/* =========================================================
   b2bNet — sorular.css
   Sikca sorulan sorular sayfasi.
   1. Tepe bandi + arama
   2. Kategori gezinmesi (mobilde serit / masaustunde sutun)
   3. Soru kumeleri
   4. Alt bant
   YUKLEME SIRASI: main.css → sss.css → sorular.css
   Akordiyonun kendisi sss.css'ten gelir; burada yalnizca
   bu sayfaya ozel sikilastirma yapilir.
   ========================================================= */

.b2b-sorular{
  /* Sabit menunun kapladigi yukseklik. */
  --b2b-soru-ust:84px;
  /* Mobildeki yatay kategori seridinin yuksekligi. */
  --b2b-soru-serit:60px;

  --b2b-soru-zemin:#F6F9FF;
  --b2b-soru-cizgi:#E4EBF7;
}
@media (max-width:640px){
  .b2b-sorular{ --b2b-soru-ust:78px; --b2b-soru-serit:56px; }
}

.b2b-sorular [hidden]{ display:none !important; }


/* ---------------------------------------------------------
   1. TEPE BANDI
   --------------------------------------------------------- */
.b2b-sorular-tepe{
  position:relative;
  padding:132px 20px 76px;
  text-align:center;
  background:linear-gradient(180deg,
    #2563EB 0%, #3172EF 28%, #5C9BF8 56%,
    #A9C9FF 80%, #DCE9FF 92%, #F6F9FF 100%);
}
@media (min-width:768px){ .b2b-sorular-tepe{ padding:158px 20px 88px; } }

.b2b-sorular-tepe::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:78px 78px;
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.9), transparent 70%);
  mask-image:linear-gradient(180deg, rgba(0,0,0,.9), transparent 70%);
}

.b2b-sorular-tepe-ic{ position:relative; max-width:720px; margin-inline:auto; }

.b2b-sorular-etiket{ margin-bottom:20px; }

.b2b-sorular-baslik{
  margin:0;
  font-size:clamp(2rem,4.6vw,3.1rem);
  font-weight:800; line-height:1.1; letter-spacing:-.032em;
  color:#fff;
  text-shadow:0 2px 30px rgba(9,32,86,.26);
}

.b2b-sorular-aciklama{
  max-width:500px; margin:18px auto 0;
  font-size:clamp(1rem,1.4vw,1.12rem);
  font-weight:500; line-height:1.65; color:#fff;
  text-shadow:0 1px 20px rgba(9,32,86,.32);
}

/* ---- arama ---- */
.b2b-sorular-arama{
  display:flex; align-items:center; gap:10px;
  max-width:440px; margin:30px auto 0;
  padding:0 8px 0 18px; min-height:54px;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.40);
  backdrop-filter:blur(12px) saturate(150%);
  -webkit-backdrop-filter:blur(12px) saturate(150%);
  box-shadow:0 14px 34px -16px rgba(9,32,86,.55);
  transition:background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.b2b-sorular-arama:focus-within{
  background:#fff; border-color:#fff;
  box-shadow:0 18px 40px -18px rgba(9,32,86,.6);
}

.b2b-sorular-arama-ikon{
  width:20px; height:20px; flex-shrink:0;
  color:rgba(255,255,255,.85);
  transition:color .3s ease;
}
.b2b-sorular-arama:focus-within .b2b-sorular-arama-ikon{ color:var(--b2b-mavi-600); }

.b2b-sorular-arama-giris{
  flex:1; min-width:0;
  border:0; background:transparent; outline:0;
  font-family:inherit; font-size:15.5px; font-weight:500; color:#fff;
  transition:color .3s ease;
}
.b2b-sorular-arama-giris::placeholder{ color:rgba(255,255,255,.75); font-weight:500; }
.b2b-sorular-arama:focus-within .b2b-sorular-arama-giris{ color:var(--b2b-lacivert); }
.b2b-sorular-arama:focus-within .b2b-sorular-arama-giris::placeholder{ color:#9AAAC6; }
.b2b-sorular-arama-giris::-webkit-search-cancel-button{ -webkit-appearance:none; }

.b2b-sorular-arama-sil{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; flex-shrink:0;
  border:0; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,.18); color:#fff;
  transition:background-color .2s ease, color .2s ease, transform .2s ease;
}
.b2b-sorular-arama-sil svg{ width:16px; height:16px; }
.b2b-sorular-arama-sil:hover{ transform:rotate(90deg); }
.b2b-sorular-arama:focus-within .b2b-sorular-arama-sil{
  background:var(--b2b-mavi-50); color:var(--b2b-mavi-700);
}

.b2b-sorular-sonuc{
  margin:14px 0 0;
  font-size:14px; font-weight:600; color:#fff;
  text-shadow:0 1px 16px rgba(9,32,86,.35);
}


/* ---------------------------------------------------------
   2. GOVDE
   --------------------------------------------------------- */
.b2b-sorular-govde{
  background:var(--b2b-soru-zemin);
  padding:0 20px;
}

.b2b-sorular-ic{
  max-width:var(--b2b-genislik); margin-inline:auto;
}
@media (min-width:1000px){
  /* Solda konu basliklari, sagda sorular. */
  .b2b-sorular-ic{
    display:grid;
    grid-template-columns:250px minmax(0,1fr);
    gap:0 60px;
    align-items:start;
    padding-top:56px;
  }
}


/* ---------------------------------------------------------
   2b. KATEGORI GEZINMESI
   Tek HTML, iki farkli davranis:
   mobilde yapiskan yatay serit, masaustunde yapiskan sutun.
   --------------------------------------------------------- */
.b2b-kume-gezinme{
  position:sticky; top:0; z-index:6;
  padding-top:var(--b2b-soru-ust);
  margin-inline:-20px;                 /* serit kenardan kenara aksin */
  padding-inline:20px;
  background:var(--b2b-soru-zemin);
}

.b2b-kume-gezinme-baslik{ display:none; }

.b2b-kume-liste{
  display:flex; align-items:center; gap:8px;
  min-height:var(--b2b-soru-serit);
  margin:0; padding:10px 0;
  list-style:none;
  border-bottom:1px solid var(--b2b-soru-cizgi);
  /* Mobilde 7 basligi alt alta yigmak yerine yatay serit. */
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
}
.b2b-kume-liste::-webkit-scrollbar{ display:none; }
.b2b-kume-liste li{ flex-shrink:0; scroll-snap-align:center; }

.b2b-kume-hap{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:38px; padding:0 16px;
  border-radius:999px;
  border:1px solid var(--b2b-soru-cizgi);
  background:#fff; white-space:nowrap;
  font-size:14.5px; font-weight:600; line-height:1; color:#42567B;
  transition:color .2s ease, background-color .25s ease,
             border-color .2s ease, box-shadow .25s ease;
}
.b2b-kume-hap:hover{
  color:var(--b2b-mavi-700);
  border-color:var(--b2b-mavi-200);
  background:var(--b2b-mavi-50);
}
.b2b-kume-hap.b2b-acik{
  color:#fff; border-color:transparent;
  background:linear-gradient(135deg,var(--b2b-mavi-500),var(--b2b-mavi-700));
  box-shadow:0 10px 22px -12px rgba(29,78,216,.85);
}

@media (min-width:1000px){
  /* dikey sutun */
  .b2b-kume-gezinme{
    top:calc(var(--b2b-soru-ust) + 28px);
    margin-inline:0; padding-inline:0; padding-top:0;
    background:transparent;
  }
  .b2b-kume-gezinme-baslik{
    display:block;
    margin:0 0 14px; padding-left:16px;
    font-size:12.5px; font-weight:700; letter-spacing:.06em;
    text-transform:uppercase; color:#8FA3C4;
  }
  .b2b-kume-liste{
    display:grid; gap:4px;
    padding:0; min-height:0;
    overflow:visible; border-bottom:0;
  }
  .b2b-kume-hap{
    justify-content:flex-start;
    width:100%; min-height:42px; padding:0 16px;
    border-color:transparent; background:transparent;
    border-radius:12px;
    white-space:normal; text-align:left; line-height:1.35;
  }
  .b2b-kume-hap:hover{ background:#fff; border-color:var(--b2b-soru-cizgi); }
  .b2b-kume-hap.b2b-acik{
    background:#fff;
    color:var(--b2b-mavi-700);
    border-color:var(--b2b-mavi-200);
    box-shadow:0 10px 24px -18px rgba(11,38,102,.6);
  }
}


/* ---------------------------------------------------------
   3. SORU KUMELERI
   --------------------------------------------------------- */
.b2b-sorular-alan{ padding-bottom:20px; }

.b2b-kume{
  padding:34px 0 6px;
  scroll-margin-top:calc(var(--b2b-soru-ust) + var(--b2b-soru-serit) + 8px);
}
@media (min-width:1000px){
  .b2b-kume{
    padding:0 0 42px;
    scroll-margin-top:calc(var(--b2b-soru-ust) + 28px);
  }
  .b2b-kume:first-child{ padding-top:0; }
}

.b2b-kume-basi{
  display:flex; align-items:baseline; gap:12px;
  margin-bottom:16px;
}
.b2b-kume-baslik{
  margin:0;
  font-size:clamp(1.25rem,2.2vw,1.55rem);
  font-weight:800; letter-spacing:-.025em; line-height:1.2;
  color:var(--b2b-lacivert);
}
.b2b-kume-sayi{
  font-size:13px; font-weight:600; color:#8FA3C4;
  font-variant-numeric:tabular-nums;
}

/* ---- sss.css uzerine bu sayfaya ozel sikilastirma ----
   Ana sayfada 6 soru vardi, burada onlarca soru var;
   ayni dolgular sayfayi gereksiz uzatiyor. */
.b2b-sorular .b2b-sss-liste{ gap:10px; }

.b2b-sorular .b2b-soru{ border-radius:18px; }

.b2b-sorular .b2b-soru-dugme{
  gap:18px;
  padding:20px 22px;
  font-size:clamp(15.5px,1.15vw,16.5px);
}
.b2b-sorular .b2b-soru-isaret{ width:20px; height:20px; margin-top:1px; }
.b2b-sorular .b2b-soru-isaret::before{ width:14px; }
.b2b-sorular .b2b-soru-isaret::after { height:14px; }

.b2b-sorular .b2b-cevap p{
  padding:0 22px 22px;
  font-size:15.5px; line-height:1.75;
}

.b2b-sorular-bos{
  margin:70px 0 40px; text-align:center;
  font-size:16px; color:var(--b2b-gri);
}


/* ---------------------------------------------------------
   4. ALT BANT
   --------------------------------------------------------- */
.b2b-sorular-dip{
  background:var(--b2b-soru-zemin);
  padding:44px 20px 90px;
}
@media (min-width:768px){ .b2b-sorular-dip{ padding:64px 20px 116px; } }

.b2b-sorular-dip-kart{
  position:relative; isolation:isolate; overflow:hidden;
  max-width:var(--b2b-genislik); margin-inline:auto;
  border-radius:28px;
  padding:40px 24px 38px;
  background:
    radial-gradient(120% 130% at 88% 12%, #1B3E86 0%, rgba(27,62,134,0) 60%),
    linear-gradient(148deg,#102A63 0%,#0C1F4C 56%,#0A1A40 100%);
  box-shadow:0 40px 80px -44px rgba(10,26,64,.75);
}
@media (min-width:768px){
  .b2b-sorular-dip-kart{ border-radius:36px; padding:54px 52px 50px; }
}

.b2b-sorular-dip-kart::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(90% 90% at 22% 30%, #000 0%, transparent 76%);
  mask-image:radial-gradient(90% 90% at 22% 30%, #000 0%, transparent 76%);
}

.b2b-sorular-dip-ic{ position:relative; z-index:2; }
@media (min-width:1000px){
  .b2b-sorular-dip-ic{
    display:grid; grid-template-columns:minmax(0,1.15fr) auto;
    gap:56px; align-items:center;
  }
}

.b2b-sorular-dip-baslik{
  margin:0;
  font-size:clamp(1.5rem,2.8vw,2.1rem);
  font-weight:700; line-height:1.2; letter-spacing:-.03em; color:#fff;
}
.b2b-sorular-dip-yazi{
  max-width:52ch; margin:16px 0 0;
  font-size:clamp(.98rem,1.3vw,1.06rem);
  line-height:1.7; color:rgba(214,228,255,.78);
}

.b2b-sorular-dip-eylem{
  display:flex; flex-wrap:wrap; gap:12px; margin-top:28px;
}
@media (min-width:1000px){ .b2b-sorular-dip-eylem{ margin-top:0; } }
.b2b-sorular-dip-eylem .b2b-buton--cam{ margin-top:0; }
.b2b-sorular-dip-eylem .b2b-buton{ flex:1 1 auto; }
@media (max-width:420px){
  .b2b-sorular-dip-eylem .b2b-buton{ flex:1 1 100%; }
}


/* ---------------------------------------------------------
   5. AZ HAREKET TERCIHI
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .b2b-sorular-arama-sil:hover{ transform:none; }
}


/* ---------------------------------------------------------
   6. PANELDEN GELEN CEVAP GOVDESI
   Cevaplar duz <p> olmayabiliyor: h2, ul/li, img, a, hatta
   satir ici "font-size:18pt" tasiyan span'lar var. sss.css
   dolguyu yalnizca <p>'ye veriyor; burada dolgu kapsayiciya
   alinip diger etiketler de hizaya sokuluyor.
   --------------------------------------------------------- */
.b2b-sorular .b2b-cevap-govde{ padding:0 22px 22px; }
.b2b-sorular .b2b-cevap-govde > *{ margin:0 0 14px; }
.b2b-sorular .b2b-cevap-govde > *:last-child{ margin-bottom:0; }

.b2b-sorular .b2b-cevap-govde p{
  padding:0;
  font-size:15.5px; line-height:1.75; color:#42567B;
}
.b2b-sorular .b2b-cevap-govde h2,
.b2b-sorular .b2b-cevap-govde h3,
.b2b-sorular .b2b-cevap-govde h4{
  margin:22px 0 10px;
  font-size:17px; font-weight:700; line-height:1.35;
  letter-spacing:-.015em; color:var(--b2b-lacivert);
}
.b2b-sorular .b2b-cevap-govde > *:first-child{ margin-top:0; }
/* editorden gelen satir ici punto degerlerini sifirla */
.b2b-sorular .b2b-cevap-govde [style*="font-size"]{ font-size:inherit !important; }

.b2b-sorular .b2b-cevap-govde ul,
.b2b-sorular .b2b-cevap-govde ol{ padding-left:20px; }
.b2b-sorular .b2b-cevap-govde li{
  margin-bottom:7px;
  font-size:15.5px; line-height:1.7; color:#42567B;
}
.b2b-sorular .b2b-cevap-govde strong{ color:var(--b2b-lacivert); font-weight:700; }
.b2b-sorular .b2b-cevap-govde a{
  color:var(--b2b-mavi-700); font-weight:600;
  text-decoration:underline; text-underline-offset:3px;
}
.b2b-sorular .b2b-cevap-govde img{
  display:block; max-width:100%; height:auto;
  border-radius:14px; border:1px solid var(--b2b-soru-cizgi);
}