:root{
  --green:#1dbf71;
  --navy:#1a2a33;
  --bg:#f9fafb;
  --card:#ffffff;
  --shadow:0 8px 24px rgba(0,0,0,.08);
  --softshadow:0 4px 12px rgba(0,0,0,.06);
}

/* Genel taşma koruması */
html, body { max-width:100%; overflow-x:hidden; }
*, *:before, *:after { box-sizing:border-box; }

/* HERO */
.help-hero{
  background:linear-gradient(135deg, #1a2a33 0%, #273845 100%);
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:300px;
}
.help-hero .inner{padding:40px 20px}
.help-hero h1{font-size:36px;font-weight:700;margin-bottom:10px;color:#fff}
.help-hero p.lead{font-size:16px;opacity:.8;color:#d7dde3}

/* Layout */
.help-main{padding:28px 0 34px}

/* Tabs */
.tabs{margin-top:-10px}

/* Desktop/Tablet: yatay şerit (mevcut davranış) */
.tab-bar{
  background:#fff;border-radius:16px;box-shadow:var(--shadow);
  padding:8px;
  display:flex;gap:8px;
  flex-wrap:nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.tab-bar::-webkit-scrollbar{ display:none; }

.tab-btn{
  flex:0 0 auto;
  white-space:nowrap;
  text-align:center;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid #eaeaea;
  background:#fff;
  cursor:pointer;
  font-weight:600;
  color:#334;
  transition:.2s;
}
.tab-btn.active{background:var(--green);color:#fff;border-color:var(--green)}

.tab-panels{margin-top:22px}

/* Cards */
.card-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-top:14px;
}
.card{
  background:#fff;border-radius:14px;box-shadow:var(--softshadow);
  padding:18px;
}
.card h3{font-size:16px;margin-bottom:8px;color:var(--navy)}
.card p{font-size:14px;opacity:.85;color:#223}

/* Accordion */
.accordion{margin-top:18px}
.acc-item{
  background:#fff;border-radius:12px;box-shadow:var(--softshadow);
  margin-bottom:10px;overflow:hidden
}
.acc-head{
  width:100%;
  text-align:left;
  border:0;background:#fff;
  padding:16px 16px;
  cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;
  font-weight:600;
  font-size:15px;
  color:#1f2937;
}
.acc-head i{opacity:.6;transition:.2s}
.acc-item.open .acc-head i{ transform:rotate(180deg); }
.acc-body{
  display:none;
  padding:0 16px 16px;
  color:#333;
}
.acc-item.open .acc-body{ display:block; }
.acc-body p{font-size:14px;line-height:1.6;margin:0}

/* Support */
.support-cta{
  margin:28px 0;background:#fff;border-radius:14px;box-shadow:var(--softshadow);
  padding:20px;display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap
}
.support-cta .left b{font-size:18px;color:var(--navy)}
.support-cta .sub{opacity:.85;color:#223}
.support-cta .right{display:flex;gap:10px;flex-wrap:wrap}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  border:0;border-radius:10px;padding:12px 16px;
  cursor:pointer;font-weight:600;text-decoration:none;
}
.btn.whatsapp{background:#25D366;color:#fff}
.btn.mail{background:#1b73e8;color:#fff}

/* Responsive */
@media (max-width: 992px){
  .card-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width: 768px){
  .help-hero{min-height:220px;padding:15px 13px}
  .help-hero h1{font-size:24px}
  .help-hero p.lead{font-size:14px}

  /* Mobilde gerçek padding */
  .help-main{padding:18px 12px 28px}

  /* ✅ MOBİL: TAB BUTONLARI ALT ALTA */
  .tab-bar{
    flex-direction:column;     /* alt alta */
    flex-wrap:nowrap;          /* wrap gereksiz */
    overflow-x:visible;        /* yatay kaydırmayı kapat */
    overflow-y:visible;
    gap:10px;
    padding:10px;
  }
  .tab-btn{
    width:100%;               /* tam genişlik */
    flex:0 0 auto;
    white-space:normal;       /* uzun metin varsa satıra sığsın */
  }

  .card-grid{grid-template-columns:1fr}
  .support-cta{flex-direction:column;align-items:flex-start}
}