/* ===========================================================================
   SIKCA SORULAN SORULAR SAYFASI (04.09.2026, Ozgur - Claude Design handoff
   "Oyuneks SSS")

   Sayfa kurumsal sol menu kabugunun DISINDA, tam genislikte basilir
   (master.blade.php istisnasi); ustte kurumsal sekme seridi
   (css/kurumsal-sekmeler.css, --ku* tokenlar). Icerik sitenin .container'ina
   (1550px) oturur; tuvaldeki 1920/100px kenar bosluklari yerine header ile
   ayni hiza. Yazi tipi sitenin kendi fontu (Wix Madefor Display).

   Yapisan katmanlar: kurumsal sekme seridi (z 5, top 0 / mobilde header alti)
   -> hemen altina kategori cipleri (z 4). Cip seridinin top degeri ve
   bolumlerin scroll-margin-top'u sabit yazilmaz; faq.blade.php JS'i seridin
   yuksekligini olcup --ssSekmeAlt / --ssUstPay degiskenlerine yazar (sekme
   yuksekligi degisirse sayfa kendiliginden uyar). Asagidaki sabitler yalniz
   JS calismadan onceki yedek degerlerdir.

   Eski faq.css bu sayfadan kalkti (partnership-faq ve privacy-policy hala
   kullaniyor, dosya silinmedi). Bootstrap accordion yerine kendi kucuk
   akordiyonu: <button aria-expanded> + [hidden] cevap, birden fazla acik olabilir.
   =========================================================================== */
.ssSayfa {
    --ssSekmeAlt: 49px;                 /* sekme seridi alt kenari (JS gunceller) */
    --ssUstPay: 125px;                  /* cip seridi alt kenari + 16 (JS gunceller) */
    --ssChevZemin: #272834;
    --ssCizgi: rgba(128,241,177,.22);
    --ssOdak: rgba(128,241,177,.18);
    color: var(--kuMetin); padding-bottom: 80px;
}
body.light .ssSayfa {
    --ssChevZemin: #F0EEE6;
    --ssCizgi: rgba(19,126,76,.22);
    --ssOdak: rgba(19,126,76,.16);
}
.ssSayfa a { color: var(--kuNane); }
.ssSayfa a:hover { color: var(--kuNaneHover); }
.ssSayfa .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
.ssSayfa button { font-family: inherit; }

/* ---- Baslik blogu: solda etiket + baslik + aciklama, sagda arama kutusu ------- */
.ssHero { padding: 56px 0 32px; display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; }
.ssHeroMetin { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.ssEtiket { font-size: 11px; font-weight: 800; letter-spacing: 1.4px; color: var(--kuNane); text-transform: uppercase; }
.ssHero h1 { font-size: 48px; font-weight: 800; letter-spacing: -1.2px; line-height: 1.05; color: var(--kuBaslik); margin: 0; text-wrap: balance; }
.ssHero p { font-size: 16px; line-height: 1.55; color: var(--kuUcuncul); margin: 0; text-wrap: pretty; }

.ssArama { flex: none; width: 520px; display: flex; flex-direction: column; gap: 10px; }
.ssAramaKutu {
    display: flex; align-items: center; height: 52px; background: var(--kuKart); border: 1px solid var(--kuKenar);
    border-radius: 12px; overflow: hidden; box-shadow: var(--kuKartGolge); transition: border-color .18s, box-shadow .18s;
}
.ssAramaKutu:focus-within { border-color: var(--kuNane); box-shadow: 0 0 0 3px var(--ssOdak); }
.ssAramaIkon { flex: none; width: 48px; height: 52px; display: flex; align-items: center; justify-content: center; color: var(--kuUcuncul); }
.ssAramaIkon svg { width: 17px; height: 17px; }
.ssSayfa input.ssAramaGiris {
    flex: 1; min-width: 0; height: 52px; margin: 0; padding: 0; border: 0; outline: 0; box-shadow: none; border-radius: 0;
    background: transparent; font-family: inherit; font-size: 14px; color: var(--kuBaslik);
}
.ssSayfa input.ssAramaGiris::placeholder { color: var(--kuUcuncul); opacity: 1; }
.ssSayfa input.ssAramaGiris::-webkit-search-cancel-button, .ssSayfa input.ssAramaGiris::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.ssAramaSonuc { flex: none; padding: 0 16px; font-size: 11.5px; color: var(--kuUcuncul); white-space: nowrap; }
.ssAramaSonuc:empty { display: none; }
.ssAramaTemizle {
    flex: none; width: 40px; height: 52px; display: none; align-items: center; justify-content: center;
    border: 0; background: transparent; color: var(--kuUcuncul); cursor: pointer; padding: 0;
}
.ssAramaTemizle svg { width: 14px; height: 14px; }
.ssAramaTemizle:hover { color: var(--kuMetin); }
.ssArama.dolu .ssAramaTemizle { display: flex; }
.ssAramaIpucu { font-size: 11.5px; color: var(--kuUcuncul); padding-left: 2px; }

/* ---- Kategori cipleri (yapisan, sekme seridinin hemen altinda) ---------------- */
.ssCipler {
    position: sticky; top: var(--ssSekmeAlt); z-index: 4;
    /* sayfa zemini (body --background): acik temada --kuZemin #FAF9F5 gövde #F5F4EE'den acik kalip bant gibi gorunuyordu */
    background: var(--background, var(--kuZemin)); border-bottom: 1px solid var(--kuInceKenar);
    /* konteyner disina tasan zemin: sticky serit tam genislik gorunsun */
    margin: 0 -12px; padding: 0 12px;
}
.ssCiplerSerit { display: flex; gap: 8px; padding: 12px 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.ssCiplerSerit::-webkit-scrollbar { display: none; }
.ssSayfa a.ssCip {
    flex: none; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px;
    background: var(--kuKart); border: 1px solid var(--kuKenar); font-size: 12.5px; font-weight: 700; color: var(--kuGovde);
    white-space: nowrap; transition: background .16s, border-color .16s, color .16s;
}
.ssSayfa a.ssCip:hover { color: var(--kuMetin); border-color: var(--kuKenarBelirgin); }
.ssSayfa a.ssCip.aktif { background: var(--kuNaneZemin); border-color: var(--kuNaneKenarHover); color: var(--kuNane); }
.ssSayfa a.ssCip:focus-visible { outline: 2px solid var(--kuNane); outline-offset: 2px; }
.ssCip .mono { font-size: 10.5px; font-weight: 600; opacity: .7; }
.ssSayfa a.ssCip.gizli { opacity: .35; pointer-events: none; }   /* aramada bos kalan bolum: serit ziplamasin, cip soluklasir */

/* ---- Bolumler ----------------------------------------------------------------- */
.ssBolumler { padding-top: 36px; display: flex; flex-direction: column; gap: 48px; }
.ssBolum { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: var(--ssUstPay); }
.ssBolumBaslik { display: flex; align-items: center; gap: 14px; }
.ssBolumIkon {
    flex: none; width: 40px; height: 40px; border-radius: 11px; background: var(--kuNaneZemin);
    display: flex; align-items: center; justify-content: center; color: var(--kuNane);
}
.ssBolumIkon svg { width: 18px; height: 18px; }
.ssBolumMetin { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ssBolumMetin h2 { font-size: 22px; font-weight: 800; letter-spacing: -.4px; line-height: 1.2; color: var(--kuBaslik); margin: 0; }
.ssBolumMetin span { font-size: 12.5px; color: var(--kuUcuncul); }
.ssBolumCizgi { flex: 1; height: 1px; background: var(--ssCizgi); margin-left: 8px; }
.ssBolumSayi { flex: none; font-size: 11.5px; color: var(--kuUcuncul); }

/* Tek kart akordiyon: sorular ince kenarla ayrilir */
.ssKart { background: var(--kuKart); border: 1px solid var(--kuKenar); border-radius: 14px; overflow: hidden; box-shadow: var(--kuKartGolge); }
.ssSoru { border-top: 1px solid var(--kuInceKenar); scroll-margin-top: var(--ssUstPay); }
.ssSoru.ilk { border-top: 0; }          /* ilk gorunen soru; arama sirasinda JS tasir */
.ssSayfa button.ssSoruBaslik {
    width: 100%; display: flex; align-items: center; gap: 14px; padding: 15px 18px; margin: 0;
    background: transparent; border: 0; border-radius: 0; text-align: left; cursor: pointer; color: var(--kuMetin);
    font-size: 14px; font-weight: 600; line-height: 1.4; transition: background .16s;
}
.ssSayfa button.ssSoruBaslik:hover { background: var(--kuKartHover); }
.ssSayfa button.ssSoruBaslik:focus-visible { outline: 2px solid var(--kuNane); outline-offset: -2px; }
.ssSoruBaslik .ssSoruMetin { flex: 1; min-width: 0; }
.ssSoruBaslik[aria-expanded="true"] { font-weight: 700; color: var(--kuBaslik); }
.ssSoruBaslik[aria-expanded="true"]:hover { background: transparent; }
.ssChevron {
    flex: none; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 999px;
    background: var(--ssChevZemin); color: var(--kuGovde); transition: transform .2s, background .16s, color .16s;
}
.ssChevron svg { width: 16px; height: 16px; display: block; }
.ssSoruBaslik[aria-expanded="true"] .ssChevron { background: var(--kuNane); color: var(--kuNaneUstu); transform: rotate(180deg); }
.ssCevap { padding: 0 60px 18px 18px; }
.ssCevapMetin { font-size: 13.5px; line-height: 1.65; color: var(--kuGovde); max-width: 900px; text-wrap: pretty; }
.ssCevapMetin p { margin: 0; }
.ssCevapMetin strong { color: var(--kuMetin); }
.ssCevapMetin a { color: var(--kuNane); text-decoration: underline; text-underline-offset: 2px; }

/* Arama sonucu yok */
.ssBos { padding: 48px; text-align: center; background: var(--kuKart); border: 1px dashed var(--kuKenarBelirgin); border-radius: 14px; }
.ssBos strong { display: block; font-size: 16px; font-weight: 700; color: var(--kuMetin); }
.ssBos span { display: block; font-size: 13px; color: var(--kuUcuncul); margin-top: 6px; }

/* ---- Alt CTA: cevabini bulamadin mi? ----------------------------------------- */
.ssCta {
    margin-top: 48px; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 26px 30px;
    background: var(--kuKart); border: 1px solid var(--kuKenar); border-radius: 16px; box-shadow: var(--kuKartGolge);
}
.ssCtaSol { display: flex; align-items: center; gap: 18px; min-width: 0; }
.ssCtaIkon {
    flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--kuNaneZemin);
    display: flex; align-items: center; justify-content: center; color: var(--kuNane);
}
.ssCtaIkon svg { width: 22px; height: 22px; }
.ssCtaMetin { display: flex; flex-direction: column; gap: 4px; }
.ssCtaMetin strong { font-size: 18px; font-weight: 800; color: var(--kuBaslik); }
.ssCtaMetin span { font-size: 13px; color: var(--kuUcuncul); }
.ssCtaButonlar { flex: none; display: flex; gap: 10px; }
.ssSayfa a.ssButon {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 10px;
    border: 1px solid var(--kuKenarBelirgin); background: var(--kuKart); font-size: 13px; font-weight: 700; color: var(--kuMetin);
    white-space: nowrap; transition: background .16s, border-color .16s, color .16s, filter .16s;
}
.ssSayfa a.ssButon:hover { color: var(--kuMetin); background: var(--kuKartHover); border-color: var(--kuNane); }
.ssSayfa a.ssButon.dolu { padding: 0 20px; border-color: var(--kuNane); background: var(--kuNane); color: var(--kuNaneUstu); font-weight: 800; }
.ssSayfa a.ssButon.dolu:hover { color: var(--kuNaneUstu); background: var(--kuNane); filter: brightness(1.06); }
.ssSayfa a.ssButon:focus-visible { outline: 2px solid var(--kuNane); outline-offset: 2px; }
.ssButon svg { width: 16px; height: 16px; flex: none; }

/* ---- Tablet / mobil ------------------------------------------------------------ */
@media (max-width: 991.98px) {
    .ssSayfa { padding-bottom: 48px; }
    .ssHero { padding: 28px 0 20px; flex-direction: column; align-items: stretch; gap: 20px; }
    .ssHero h1 { font-size: 34px; letter-spacing: -1px; }
    .ssHero p { font-size: 13.5px; line-height: 1.5; }
    /* arama tam genislik, 48px, basligin altinda */
    .ssArama { width: 100%; gap: 8px; }
    .ssAramaKutu { height: 48px; }
    .ssAramaIkon, .ssSayfa input.ssAramaGiris, .ssAramaTemizle { height: 48px; }
    .ssCipler { margin: 0 -8px; padding: 0 8px; }
    .ssCiplerSerit { padding: 10px 0; }
    .ssBolumler { padding-top: 28px; gap: 36px; }
    /* bolum basligindaki cizgi kalkar; "N soru" basligin altina iner */
    .ssBolumBaslik { flex-wrap: wrap; gap: 12px; }
    .ssBolumMetin { flex: 1; }
    .ssBolumMetin h2 { font-size: 19px; }
    .ssBolumCizgi { display: none; }
    .ssBolumSayi { flex-basis: 100%; padding-left: 52px; margin-top: -6px; }
    /* cevap: sag 60px bosluk kalkar */
    .ssCevap { padding: 0 18px 16px; }
    .ssBos { padding: 32px 20px; }
    /* CTA: metin ustte, butonlar alt alta tam genislik */
    .ssCta { margin-top: 36px; flex-direction: column; align-items: stretch; gap: 18px; padding: 20px; }
    .ssCtaButonlar { flex-direction: column; }
    .ssSayfa a.ssButon { width: 100%; }
}
@media (max-width: 575.98px) {
    .ssHero h1 { font-size: 30px; }
    .ssSayfa button.ssSoruBaslik { padding: 13px 14px; font-size: 13.5px; }
    .ssCevap { padding: 0 14px 14px; }
    .ssBolumSayi { padding-left: 0; margin-top: 0; }
}