/* ============================================================
   SSS.CSS — /sikca-sorulan-sorular (yeni tema)      2026-09-09
   ------------------------------------------------------------
   View : views/yeni/sss.php · Controller : Welcome::sss_yeni()
   Plan : memory-bank/sss-sayfasi-analiz-ve-plan.md

   Bu dosya YALNIZ SSS sayfasına özel kuralları taşır. Sayfa
   ayrıca ortak.css + kurs.css + vitrin.css yüklüyor:
     · hero iskeleti (.vit-hero / .vit-h1 / .vit-yol / .lede)
       → vitrin.css
     · akordiyon (.sss-liste details / summary / .ans) ve
       destek kartı (.sss-kart*) → kurs.css
   ⛔ O bileşenleri BURADA yeniden yazma; kurs detay ve takvim
      sayfaları aynı kurallara bağlı, kopya çıkarsa ikisi ayrışır.

   İMZA RENGİ: mor (#6D5AE0). Takvim yeşil, ana sayfa altın,
   kategori turkuaz; yardım merkezi için palette kullanılmayan
   tek serin ton seçildi. Yalnız aksan olarak kullanılıyor —
   düğmeler ve dönüşüm rengi (kırmızı) değişmedi.
   ============================================================ */

.sss-sayfa{
  --sss: #6D5AE0;
  --sss-d: #5645C4;
  --sss-w: #EFECFC;
}

/* ---- HERO ---------------------------------------------------
   ⚠️ HERO ZEMİNİ KOYU LACİVERT (`.vit-hero{ background:var(--navy-d) }`,
   vitrin.css:35). Buradaki her renk ONA göre seçilmek zorunda —
   ilk yazımda açık zemin varsayıp `--ink` / `--ink-3` verilmişti,
   koyu üstünde koyu metin görünmez oluyordu (yüklemeden önce
   yakalandı). Ölçüt: hero içindeki metin AÇIK, kutular saydam
   beyaz ya da dolu beyaz.

   ⛔ `.vit-hero-ust{ display:block }` KALDIRILDI (2026-09-09):
   ilk turda sağ panel yoktu, ızgara tek sütuna indirilmişti.
   Kullanıcı "sağ taraf boş kalmış" deyince `.vit-hero-yanli` ile
   iki sütuna dönüldü — o kural izgarayı öldürüyordu. Panel
   basılmazsa vitrin.css zaten tek sütun veriyor, override gereksiz. */
.sss-hero .vit-hero-metin{ max-width:none }

/* ---- HERO SAĞ PANELİ: "en çok sorulanlar" ------------------
   Bileşen tamamen vitrin.css'ten (.vit-hero-yan / .vit-alan* /
   .vit-yan-bas / .vit-yan-alt). Burada YALNIZ imza rengi
   değişiyor: vitrin/tür sayfalarında turkuaz (#5EE6C8), bu
   sayfada mor. Kutu, gölge ve ızgara ortak kalıyor ki dört
   sayfanın hero'su aynı ritimde dursun. */
.sss-sayfa .vit-alan-iko{ background:rgb(185 174 255 / .15); color:#B9AEFF }
.sss-sayfa .vit-alan-kart:hover{ border-color:rgb(185 174 255 / .42) }
.sss-sayfa .vit-alan-kart:hover .vit-alan-ok{ color:#B9AEFF }
.sss-sayfa .vit-alan-onizleme{ color:#9DB3D0 }
.sss-sayfa .vit-yan-alt a{
  color:#B9AEFF; font-weight:800;
  text-decoration:underline; text-underline-offset:2px;
}
.sss-sayfa .vit-yan-alt a:hover{ color:#fff }
/* Kicker: vitrinde nane yeşili (#5EE6C8). Burada sayfanın imza
   moru — ama KOYU ton değil, koyu zeminde okunan AÇIK tonu. */
.sss-hero .vit-kicker{ color:#B9AEFF }
/* kurs.css `.lede :is(b,strong){ color:#DCE6F3 }` zaten açık;
   soru sayısı bir tık daha öne çıksın. */
.sss-hero .lede b{ color:#fff; font-weight:900 }

/* ---- SÜZGEÇ -------------------------------------------------
   `hidden` ile geliyor, JS açıyor (JS yoksa tam liste zaten
   çalışıyor). Kutu arama sayfasındaki `.ara-kutu`nun kardeşi:
   koyu hero üstünde DOLU BEYAZ yüzey + saydam beyaz kenar +
   derin gölge. Fark: submit butonu yok, anlık süzüyor. */
.sss-bul{ margin-top:22px; max-width:560px }
.sss-bul[hidden]{ display:none }
.sss-bul-kutu{
  display:flex; align-items:center; gap:11px;
  padding:0 14px;
  background:var(--surface);
  border:1px solid rgb(255 255 255 / .25);
  border-radius:14px;
  box-shadow:0 18px 34px -24px rgb(0 0 0 / .55);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.sss-bul-kutu:focus-within{
  border-color:var(--sss);
  box-shadow:0 0 0 3px rgb(109 90 224 / .35);
}
.sss-bul-kutu > svg{ width:18px; height:18px; flex:none; color:var(--sss-d) }
/* 16px ALTINA İNME: iOS 16px'in altındaki input'a odaklanınca
   sayfayı otomatik yakınlaştırıyor (00-GENEL-OZET §5 md.7).
   `min-height:50px` — .ara-kutu ile aynı dokunma yüksekliği. */
.sss-bul input{
  flex:1 1 auto; min-width:0;
  border:0; outline:0; background:none;
  font:inherit; font-size:16px; font-weight:600; color:var(--ink);
  min-height:50px;
}
.sss-bul input::placeholder{ color:var(--ink-3); font-weight:500 }
.sss-bul input::-webkit-search-cancel-button{ -webkit-appearance:none }
.sss-bul-sil{
  flex:none; display:grid; place-items:center;
  width:34px; height:34px; padding:0;
  border:0; border-radius:9px; background:var(--tint);
  color:var(--ink-2); cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
/* 🔴 ÖLÇÜLDÜ 2026-09-09 (canlı staging, masaüstü): düğme kutu BOŞKEN
   de görünüyordu. Sebep: `hidden` niteliğinin `display:none`u TARAYICI
   VARSAYILANI (özgüllük 0); üstteki `.sss-bul-sil{display:grid}` sınıf
   seçicisi (0,1,0) onu eziyor. Aynı tuzak `.sss-bul` / `.sss-kume` /
   `.sss-bos` için baştan kapatılmıştı, bu düğme atlanmıştı.
   ⚠️ KURAL: `display` veren her bileşene `[hidden]` kardeşi yazılır. */
.sss-bul-sil[hidden]{ display:none }
.sss-bul-sil:hover{ background:var(--sss-w); color:var(--sss-d) }
.sss-bul-sil svg{ width:15px; height:15px }
/* Koyu zeminde okunur açık gri-mavi (.ara-adet'in hero karşılığı). */
.sss-bul-sonuc{
  margin:9px 4px 0; min-height:19px;
  font-size:13px; font-weight:800; color:#A9BCD8;
}

/* ---- KÜME ÇİPLERİ ------------------------------------------
   Gerçek çıpa linkleri: JS yokken bölüme atlar, JS varken
   süzgeç olur (ikinci tık süzgeci kaldırır).
   ⚠️ Koyu hero üstünde: saydam beyaz yüzey + açık metin
   (tur.css `.tur-yan-liste` dili). Dolu beyaz çip bu zeminde
   8 adet yan yana durunca hero'yu boyuyordu.
   📏 min-height:44px — dokunma hedefi eşiği (çerez düğmesi
   vakasının dersi, tuzaklar §K). */
.sss-cipler{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px }
.sss-cip{
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px; padding:10px 15px;
  border:1px solid rgb(255 255 255 / .14);
  border-top-color:rgb(255 255 255 / .22);
  border-radius:999px;
  background:linear-gradient(180deg, rgb(255 255 255 / .1), rgb(255 255 255 / .05));
  font-size:13.5px; font-weight:800; color:#E4EBF6;
  transition:border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.sss-cip:hover{
  background:linear-gradient(180deg, rgb(255 255 255 / .16), rgb(255 255 255 / .09));
  border-color:rgb(185 174 255 / .5); color:#fff;
}
.sss-cip.is-secili{
  background:var(--sss); border-color:var(--sss); color:#fff;
  box-shadow:0 10px 22px -10px rgb(109 90 224 / .95);
}
.sss-cip-adet{
  display:inline-grid; place-items:center;
  min-width:21px; height:21px; padding:0 5px;
  border-radius:999px;
  background:rgb(255 255 255 / .14); color:#C7D3E6;
  font-size:11.5px; font-weight:900;
  font-variant-numeric:tabular-nums;
}
.sss-cip:hover .sss-cip-adet{ color:#fff }
.sss-cip.is-secili .sss-cip-adet{ background:rgb(255 255 255 / .24); color:#fff }

/* ---- GÖVDE: SORU KÜMELERİ ----------------------------------- */
.sss-govde{ padding-block:clamp(44px,5.5vw,78px) }
.sss-kume + .sss-kume{ margin-top:clamp(38px,4.4vw,60px) }
.sss-kume[hidden]{ display:none }

/* Çipten gelince başlık menünün altında kalmasın. */
.sss-kume{ scroll-margin-top:100px }

.sss-kume-bas{
  display:flex; align-items:flex-start; gap:14px;
  margin-bottom:18px;
  padding-bottom:15px;
  border-bottom:1px solid var(--line);
}
.sss-kume-ikon{
  flex:none; width:44px; height:44px;
  display:grid; place-items:center;
  border-radius:14px;
  background:var(--sss-w);
  border:1px solid rgb(109 90 224 / .16);
  color:var(--sss-d);
}
.sss-kume-ikon svg{ width:22px; height:22px }
.sss-kume-bas h2{ font-size:clamp(21px,2.5vw,27px) }
.sss-kume-ozet{
  margin-top:5px;
  font-size:15px; line-height:1.55; color:var(--ink-2);
}

/* Akordiyon gövdesi tamamen kurs.css'ten geliyor.
   ⛔ `details[open] > summary` RENGİNE DOKUNMA. Bir kez denendi ve
   canlıda okunmaz çıktı: kurs.css açık kalemin summary'sine
   `background:var(--navy); color:#fff` veriyor — üstüne imza moru
   (`--sss-d`, koyu) yazılınca koyu lacivert zeminde koyu mor metin
   oluyor. Sayfanın AÇIK gelen tek kalemi olduğu için hero'nun hemen
   altındaki ilk soru okunmuyordu. İmza rengi bu sayfada küme
   ikonlarında, çiplerde ve cevap içi köprülerde taşınıyor. */
.sss-sayfa .sss-liste details[hidden]{ display:none }

/* Cevap altındaki köprüler — şemaya girmiyor, gezinme yardımı. */
.sss-baglanti{
  display:flex; flex-wrap:wrap; gap:8px 16px;
  margin-top:14px; padding-top:13px;
  border-top:1px dashed var(--line);
}
.sss-baglanti a{
  display:inline-flex; align-items:center; gap:6px;
  font-size:14px; font-weight:800; color:var(--sss-d);
}
.sss-baglanti a:hover{ text-decoration:underline; text-underline-offset:3px }
.sss-baglanti svg{ width:14px; height:14px; transition:transform .15s ease }
.sss-baglanti a:hover svg{ transform:translateX(2px) }

/* ---- 0 SONUÇ ------------------------------------------------ */
.sss-bos{
  padding:clamp(28px,4vw,44px) clamp(20px,3vw,32px);
  border:1px dashed var(--line);
  border-radius:var(--r-x);
  background:var(--surface);
  text-align:center;
}
.sss-bos[hidden]{ display:none }
.sss-bos-bas{ font-size:18px; font-weight:900; color:var(--navy) }
.sss-bos-alt{
  margin:9px auto 0; max-width:56ch;
  font-size:15px; line-height:1.62; color:var(--ink-2);
}
.sss-bos-eylem{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:18px }

/* ---- KURS KÖPRÜSÜ (kategori bazlı) --------------------------
   Sayfanın ikinci işi: eski sayfadaki 190 kurs linkinin yerini
   tutmak. Görsel YOK — 25 kategori görseli sayfanın hafiflik
   kazancını yerdi; ad + uzun ad + ürün sayısı yeterli. */
.sss-kurslar{
  padding-block:clamp(48px,6vw,86px);
  background:var(--surface);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.sss-kurslar .sec-head p{ color:var(--ink-2); margin-top:12px; font-size:16.5px }

.sss-alanlar{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:clamp(18px,2.4vw,28px);
}
.sss-alan{ min-width:0 }
.sss-alan-bas{
  display:flex; align-items:center; gap:11px;
  padding-bottom:12px; margin-bottom:10px;
  border-bottom:1px solid var(--line);
}
.sss-alan-ikon{
  flex:none; width:34px; height:34px;
  display:grid; place-items:center;
  border-radius:11px;
  background:var(--brand-w);
  border:1px solid rgb(47 107 208 / .14);
  color:var(--brand-d);
}
.sss-alan-ikon svg{ width:18px; height:18px }
.sss-alan-bas h3{
  font-size:12.5px; font-weight:900;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
}

/* 🔴 `grid-template-columns:minmax(0,1fr)` ŞART — sütun tanımlanmazsa
   tek örtük sütun MAX-CONTENT'e çakılıyor ve içindeki `min-width:0`
   çalışsa bile satır daralmıyor (tuzaklar §K "SÜTUNSUZ GRID").
   Ölçüldü 2026-09-09 canlı staging'de: uzun kategori adları
   ("Akademik Personel ve Lisansüstü Eğitimi Giriş Sınavı") 4. sütunu
   şişirip sayfayı 1440'ta 121px, 320'de 98px yatay kaydırıyordu.
   `li` ve `a` de ayrıca sıfırlanıyor: ızgara/flex çocuklarının
   varsayılan `min-width:auto` değeri zincirin her halkasında engel. */
.sss-kat-liste{ display:grid; grid-template-columns:minmax(0,1fr); gap:2px }
.sss-kat-liste li{ min-width:0 }
.sss-kat-liste a{
  display:flex; align-items:baseline; gap:9px;
  min-width:0;
  padding:9px 11px;
  border-radius:11px;
  transition:background .14s ease, color .14s ease;
}
.sss-kat-liste a:hover{ background:var(--sss-w) }
.sss-kat-liste b{
  flex:none;
  font-size:15px; font-weight:900; color:var(--navy);
  letter-spacing:-.01em;
}
.sss-kat-liste a:hover b{ color:var(--sss-d) }
/* Uzun ad tek satır: "Akademik Personel ve Lisansüstü Eğitimi…"
   iki satıra inince liste tarak gibi görünüyordu. */
/* 📏 KONTRAST: `--ink-3` (#8695AF) beyaz üstünde 3.03 çıkıyordu —
   12,5px metin için WCAG AA eşiği 4.5 (ölçüldü 2026-09-09).
   `--ink-2` ile 6.01. Sayfadaki tek eşik altı kalemdi. */
.sss-kat-uzun{
  flex:1 1 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:12.5px; font-weight:700; color:var(--ink-2);
}
.sss-kat-adet{
  flex:none;
  min-width:26px; padding:2px 7px;
  border-radius:999px;
  background:var(--tint);
  font-size:11.5px; font-weight:900; color:var(--ink-2);
  text-align:center;
}
.sss-kat-liste a:hover .sss-kat-adet{ background:#fff; color:var(--sss-d) }

/* ---- İKİNCİ KÖPRÜ ŞERİDİ ------------------------------------ */
.sss-kisayol{
  display:flex; flex-wrap:wrap; align-items:center; gap:9px 12px;
  margin-top:clamp(26px,3vw,38px);
  padding-top:20px;
  border-top:1px solid var(--line);
}
.sss-kisayol > span{
  font-size:11.5px; font-weight:900;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
}
.sss-kisayol a{
  padding:7px 13px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#FBFCFE;
  font-size:13.5px; font-weight:700; color:var(--ink);
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.sss-kisayol a:hover{ border-color:var(--sss); background:var(--sss-w); color:var(--sss-d) }

/* ---- KAPANIŞ ------------------------------------------------ */
.sss-kapanis{ padding-block:clamp(44px,5.5vw,80px) }
/* Üç düğme yan yana: kurs detaydaki kart iki düğmeye göre
   kurulmuş, burada sarma şart yoksa dar masaüstünde taşıyor. */
.sss-kapanis .sss-kart-eylem{ flex-wrap:wrap }

/* ============================================================
   DAR EKRAN — ⚠️ DOSYANIN SONUNDA (tuzaklar §N: aynı özgüllükte
   kural dosyada SONRA gelen kazanır; mobil blok yukarı taşınırsa
   masaüstü kuralları onu eziyor).
   ============================================================ */
@media (max-width:1023.98px){
  .sss-kume{ scroll-margin-top:76px }
  .sss-kume-bas{ gap:11px }
  .sss-kume-ikon{ width:38px; height:38px; border-radius:12px }
  .sss-kume-ikon svg{ width:19px; height:19px }
}

@media (max-width:759px){
  .sss-bul{ max-width:none }

  /* 📏 DOKUNMA HEDEFİ 44px — ölçüldü 2026-09-09 (390 ve 320px):
     cevap içi köprüler 25px, kısayol şeridi 39px, temizle düğmesi
     34px çıkıyordu. Çerez düğmesi (39px) ve takvim liste satırı
     (33px) vakalarının üçüncüsü olacaktı; parmak kayması komşu
     linki tetikliyor. Masaüstünde fare olduğu için kural yalnız
     dar ekranda — orada satırları gereksiz şişirmiyor. */
  .sss-baglanti{ gap:4px 16px }
  .sss-baglanti a{ min-height:44px; align-items:center }
  .sss-kisayol a{
    display:inline-flex; align-items:center;
    min-height:44px; padding-block:0;
  }
  .sss-bul-sil{ width:44px; height:44px; border-radius:11px }
  .sss-bul-kutu{ padding-right:8px }
  /* Çip şeridi yatay kayıyor: alt alta yığılınca hero'nun üçte
     birini yiyordu. Kaydırma kabın İÇİNDE — gövde yatay kaymaz
     (tuzaklar §K: `overflow:hidden` taşmayı gizler, çözmez). */
  .sss-cipler{
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    margin-inline:-22px;
    padding:2px 22px 6px;
    scroll-snap-type:x proximity;
  }
  .sss-cipler::-webkit-scrollbar{ display:none }
  .sss-cip{ flex:none; scroll-snap-align:start }

  .sss-kume-bas{ align-items:center }
  .sss-kume-ozet{ font-size:14px }

  /* Kategori satırı: uzun ad alta iner, tek satır kırpması orada
     sürer. Dokunma hedefi 44px'in altına düşmüyor. */
  .sss-kat-liste a{
    flex-wrap:wrap; align-items:center;
    padding:10px 11px; min-height:44px;
  }
  .sss-kat-uzun{ flex-basis:100%; order:3; margin-top:1px }
  .sss-kat-adet{ margin-left:auto }

  .sss-kapanis .sss-kart-eylem .btn{ flex:1 1 140px }
}

@media (max-width:400px){
  .sss-cipler{ margin-inline:-16px; padding-inline:16px }
  .sss-kat-liste b{ font-size:14.5px }
}