/* ── /sss/ — Sıkça Sorulan Sorular ─────────────────────────
   Bu dosya yalnızca /sss/ sayfasında yüklenir (functions.php,
   is_page('sss')). Tüm selectorlar .faq-page altında scope
   edilmiştir — main.css veya diğer sayfaları etkilemez.
   main.css'teki --navy/--gold/--f-head vb. tokenlar ve details.sss-item
   componenti (main.css) burada yeniden kullanılır, tekrar tanımlanmaz. */

/* ── Breadcrumb ───────────────────────────────────────────── */
.faq-page .faq-breadcrumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.85rem;color:var(--muted);margin-bottom:18px;letter-spacing:.01em}
.faq-page .faq-breadcrumb a{color:rgba(255,255,255,.55);text-decoration:none;font-weight:500;transition:color var(--t)}
.faq-page .faq-breadcrumb a:hover{color:var(--gold)}
.faq-page .faq-breadcrumb .faq-sep{color:rgba(255,255,255,.22);font-size:.8rem}
.faq-page .faq-breadcrumb .faq-current{color:var(--white);font-weight:600}

/* ── Hero (kompakt sayfa başlığı — tam ekran hero değil) ────
   .site-header sabit (position:fixed) ve kaydırılmadan önce
   background:transparent (main.css, sitewide) — bu yüzden top padding
   sabit header'ın gerçek yüksekliğini (~93px) karşılamak zorunda,
   aksi halde ilk ekranda breadcrumb/H1 header'ın altında kalır. */
.faq-page .faq-hero{background:var(--navy2);padding:calc(93px + clamp(28px,5vw,48px)) 0 clamp(32px,5vw,48px)}
.faq-page .faq-hero-inner{max-width:760px}
.faq-page .faq-hero h1{font-family:var(--f-head);font-size:clamp(1.7rem,4vw,2.6rem);font-weight:900;line-height:1.16;letter-spacing:-.02em;color:var(--white);margin-bottom:16px}
.faq-page .faq-hero-desc{color:var(--muted);font-size:1rem;line-height:1.75;max-width:640px;margin-bottom:26px}
.faq-page .faq-hero-ctas{display:flex;gap:12px;flex-wrap:wrap}

/* ── Hızlı kategori menüsü + arama ────────────────────────── */
.faq-page .faq-quicknav{background:var(--navy);padding:clamp(32px,5vw,52px) 0;border-bottom:1px solid var(--border)}
.faq-page .faq-quicknav h2{font-family:var(--f-head);font-size:clamp(1.15rem,2.2vw,1.5rem);font-weight:800;color:var(--white);margin-bottom:20px}
.faq-page .faq-quicknav-list{list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:0 0 24px}
.faq-page .faq-quicknav-list a{display:inline-flex;align-items:center;padding:9px 18px;border-radius:50px;background:var(--surface-card);border:1px solid var(--border-card);color:var(--text);text-decoration:none;font-size:.85rem;font-weight:600;font-family:var(--f-head);transition:border-color var(--t),color var(--t),background-color var(--t)}
.faq-page .faq-quicknav-list a:hover,
.faq-page .faq-quicknav-list a:focus-visible{border-color:var(--gold-border-hi);color:var(--gold2)}

.faq-page .faq-search{max-width:420px}
.faq-page .faq-search label{display:block;font-size:.82rem;font-weight:600;color:var(--muted);margin-bottom:8px;font-family:var(--f-head)}
.faq-page .faq-search input[type="search"]{width:100%;padding:13px 18px;border-radius:50px;border:1px solid var(--border-card);background:var(--surface-card);color:var(--white);font-size:.92rem;font-family:var(--f-body)}
.faq-page .faq-search input[type="search"]::placeholder{color:var(--muted)}
.faq-page .faq-search input[type="search"]:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.faq-page .faq-search-empty{margin-top:16px;color:var(--muted);font-size:.9rem}

/* JS kapalıyken arama alanı sessizce boş dursun; .js-enabled main.js/faq.js
   yüklendiğinde eklenmez (yalnızca no-JS ekstra bir kural gerekmiyor —
   input boşken filter() hiç çalışmaz, tüm sorular varsayılan görünür kalır). */

/* ── Kategori bölümleri ───────────────────────────────────── */
.faq-page .faq-category{padding:clamp(40px,6vw,64px) 0}
.faq-page .faq-category--alt{background:var(--navy2)}
.faq-page .faq-category h2{font-family:var(--f-head);font-size:clamp(1.3rem,2.6vw,1.85rem);font-weight:800;color:var(--white);margin-bottom:24px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.faq-page .faq-items{display:grid;gap:12px}

/* main.css'teki details.sss-item summary'i düz metin varsayar; burada
   summary içine H3 koyduğumuz için (semantik başlık hiyerarşisi) H3'ün
   varsayılan font/margin'ini sıfırlayıp summary'nin flex düzenine
   görünmez şekilde uyduruyoruz — main.css değişmeden. */
.faq-page .sss-item summary h3{font:inherit;margin:0;color:inherit}
.faq-page .sss-item p{color:var(--muted);font-size:.92rem;line-height:1.75;padding:0 28px 22px}
.faq-page .sss-item p a{color:var(--gold2);text-decoration:underline;text-underline-offset:2px}

/* ── CTA blokları (en fazla 3) ────────────────────────────── */
.faq-page .faq-cta{padding:clamp(44px,6vw,72px) 0;background:var(--navy3);text-align:center}
.faq-page .faq-cta-inner{max-width:600px;margin:0 auto}
.faq-page .faq-cta h2{font-family:var(--f-head);font-size:clamp(1.3rem,2.6vw,1.8rem);font-weight:800;color:var(--white);margin-bottom:14px}
.faq-page .faq-cta p{color:var(--muted);font-size:.95rem;line-height:1.7;margin-bottom:26px}
.faq-page .faq-cta-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ── Mobil / responsive ───────────────────────────────────── */
@media(max-width:768px){
  .faq-page .faq-hero-ctas .btn,
  .faq-page .faq-cta-ctas .btn{flex:1 1 auto;justify-content:center}
  .faq-page .faq-quicknav-list{gap:8px}
  .faq-page .faq-quicknav-list a{padding:8px 14px;font-size:.8rem}
  .faq-page .sss-item summary{padding:18px 20px}
  .faq-page .sss-item p{padding:0 20px 18px}
}
@media(max-width:480px){
  .faq-page .faq-hero-ctas,
  .faq-page .faq-cta-ctas{flex-direction:column}
}