/* ==============================================================
   sss.css · sss.php v2

   ██ TASARIM DİLİ: “BERRAK” (Berrak Design Language · BDL)
   ──────────────────────────────────────────────────────────────
   Tam tanım ve 8 kural: css/profilim.css dosya başı.
   Aynı dili kullananlar: giris.php (.gr-*) · kayit.php (.ky-*)
   profilim.php (.pr-*) · sss.php (.ss-*)

   NEDEN AYRI DOSYA: style.css purge edilmiş bir Tailwind derlemesi.
   sss.php eskiden yalnız utility sınıflarına dayanıyordu ve purge
   sonrası şu sınıflar style.css'te YOKTU → stiller sessizce düşüyordu:
     max-h-[90vh] · active:scale-95 · w-3.5 · mb-0.5 · py-0.5
     px-1.5 · py-1.5 · mt-1.5 · mb-1.5 · left-3.5 · bottom-2.5
     right-2.5 · py-2.5 · px-3.5
   Bu dosya semantik sınıf kullanır; purge'e bağımlı değildir.

   WCAG 2.1/2.2 AAA katmanı. Kontrast oranları beyaz (#fff) zemine
   göre ölçüldü.
     #0f172a 17.9:1 · #334155 10.4:1 · #475569 7.58:1 · #1e40af 8.83:1
     #1e3a8a 10.5:1 · #991b1b 8.32:1 · #065f46 7.75:1 · #78350f 9.08:1
     #64748b 4.76:1 (YALNIZ kenar/ikon — metin DEĞİL)
   ============================================================== */

/* head_etiketleri.php kritik CSS'inde global `html{background:#1e3a8a}` var;
   overscroll sırasında beyaz gövdenin altında koyu mavi görünüyordu.
   !important: inline <style> bloğu bu link'ten SONRA geliyor. */
html { background-color: #ffffff !important; }

:root {
    /* — Metin (AAA ≥7:1) — */
    --ss-ink:        #0f172a;   /* 17.9:1 · başlık, soru metni */
    --ss-body:       #334155;   /* 10.4:1 · gövde, etiket */
    --ss-help:       #475569;   /*  7.58:1 · yardımcı metin, meta, ikon */
    /* — Marka — */
    --ss-brand:      #1e40af;   /*  8.83:1 · bağlantı + birincil buton */
    --ss-brand-dark: #1e3a8a;   /* 10.5:1 · hover, odak halkası */
    --ss-brand-tint: #eff6ff;   /* vurgu zemini */
    /* — Durum — */
    --ss-err:        #991b1b;   /*  8.32:1 beyazda · 7.6:1 #fef2f2 üstünde */
    --ss-err-bg:     #fef2f2;
    --ss-err-line:   #fca5a5;
    --ss-ok:         #065f46;   /*  7.75:1 beyazda · 7.29:1 #ecfdf5 üstünde */
    --ss-ok-bg:      #ecfdf5;
    --ss-ok-line:    #6ee7b7;
    --ss-uyar:       #78350f;   /*  9.08:1 beyazda · 8.75:1 #fffbeb üstünde */
    --ss-uyar-bg:    #fffbeb;
    --ss-uyar-line:  #fcd34d;
    /* — Yüzey / çizgi (1.4.11 ≥3:1) — */
    --ss-yuzey:      #f8fafc;
    --ss-line:       #64748b;   /*  4.76:1 · alan kenarı; METİN DEĞİL */
    --ss-line-panel: #cbd5e1;
    --ss-line-soft:  #e2e8f0;   /* YALNIZ dekoratif hairline ayraç */
}

/* ══════════════════════════════════════════════════════════════
   1 · Yerleşim
   ══════════════════════════════════════════════════════════════ */

.ss {
    width: 100%;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    color: var(--ss-ink);
}

/* İçerik kabı — mobilde okunur genişlik, masaüstünde navbar hizası.
   1320px = site navbar'ının (.nv-ic) içerik genişliği. */
.ss-ic {
    width: 100%;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px 20px calc(48px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 640px) {
    .ss-ic { max-width: 660px; padding: 28px 32px 56px; }
}
@media (min-width: 1024px) {
    .ss-ic { max-width: 1320px; padding: 36px clamp(28px, 3.2vw, 56px) 64px; }
}
@media (max-width: 420px) {
    .ss-ic { padding-left: 16px; padding-right: 16px; }
}

/* İki sütun — ≥1024px.
   Sol sütun (arama + sayaçlar + eylem) dar ve yapışkan; sağ sütun liste.
   DOM sırası = okuma sırası: arama → liste. Klavye akışı bozulmaz. */
.ss-kolonlar { display: grid; grid-template-columns: 1fr; gap: 28px 0; }
.ss-kolon { min-width: 0; }

@media (min-width: 1024px) {
    .ss-kolonlar {
        grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
        column-gap: 0;              /* boşluğu sütun padding'leri verir */
        row-gap: 0;
        align-items: start;
    }
    .ss-kolonlar > .ss-kolon:first-child { padding-right: clamp(28px, 2.6vw, 44px); }
    .ss-kolonlar > .ss-kolon + .ss-kolon {
        padding-left: clamp(28px, 2.6vw, 44px);
        border-left: 1px solid var(--ss-line-soft);
    }
    /* Yapışkan yan sütun: navbar 58px + nefes payı.
       max-height + overflow: kısa ekranda içerik kesilmesin diye
       kendi içinde kayar (2.1.1 klavye ile erişilebilir kalır). */
    .ss-yan {
        position: sticky;
        top: 74px;
        max-height: calc(100vh - 90px);
        overflow-y: auto;
        overscroll-behavior: contain;
        /* overflow-y:auto verildiğinde overflow-x da `auto`ya düşer; odak
           halkası (outline 3px + offset 2px = 5px) her dört kenardan da
           kırpılabilir. İç boşlukla yer açıp negatif kenar boşluğuyla
           hizayı geri alıyoruz — sütunun görsel konumu değişmez. */
        padding: 6px;
        margin: -6px;
    }
}
/* Yükseklik dar ekranlarda (yatay telefon/tablet) yapışkanlık iptal —
   1.4.10 yeniden akış: içerik kendi kutusunda hapsolmasın. */
@media (min-width: 1024px) and (max-height: 620px) {
    .ss-yan { position: static; max-height: none; overflow: visible; }
}

/* ══════════════════════════════════════════════════════════════
   2 · Yol izi (breadcrumb)
   ══════════════════════════════════════════════════════════════ */

.ss-yol { margin: 0 0 14px; }
.ss-yol ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ss-yol li { display: inline-flex; align-items: center; min-width: 0; }
.ss-yol a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;            /* 2.5.5 */
    padding: 0 4px;
    font-size: .875rem;
    font-weight: 700;
    color: var(--ss-brand);      /* 8.83:1 */
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ss-yol a:hover { color: var(--ss-brand-dark); }
.ss-yol a svg { width: 16px; height: 16px; }
.ss-yol span[aria-current] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
    font-size: .875rem;
    font-weight: 700;
    color: var(--ss-body);       /* 10.4:1 */
}
.ss-yol-ayrac { color: var(--ss-help); font-size: .875rem; user-select: none; }

/* ══════════════════════════════════════════════════════════════
   3 · Başlık bloğu
   ══════════════════════════════════════════════════════════════ */

.ss-ust {
    margin-bottom: 24px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--ss-line-soft);
}
.ss-h1 {
    margin: 0;
    font-size: clamp(1.65rem, 1.3rem + 1.2vw, 2.05rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--ss-ink);        /* 17.9:1 */
}
.ss-h1-alt {
    margin: 8px 0 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ss-help);       /* 7.58:1 */
    max-width: 62ch;             /* 1.4.8 · satır ≤80 karakter */
}

/* ══════════════════════════════════════════════════════════════
   4 · Bölüm başlığı (h2 / h3)
   ══════════════════════════════════════════════════════════════ */

.ss-bolum { margin: 0 0 28px; }
.ss-bolum:last-child { margin-bottom: 0; }

.ss-bolum-basligi {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin: 0 0 14px;
    font-size: .8125rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
    line-height: 1.5;
    color: var(--ss-body);       /* 10.4:1 */
}
.ss-bolum-basligi > svg {
    flex: 0 0 auto;
    width: 18px; height: 18px;
    color: var(--ss-help);       /* 7.58:1 */
}
.ss-bolum-basligi .ss-adet {
    margin-left: auto;
}

/* Sayı rozeti — 1.4.1: renk tek başına taşıyıcı değil, metin de var */
.ss-adet {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .04em;
    line-height: 1.4;
    white-space: nowrap;
    text-transform: none;
}
.ss-adet-uyar { background: var(--ss-uyar-bg); border: 1.5px solid var(--ss-uyar-line); color: var(--ss-uyar); }
.ss-adet-bilgi { background: var(--ss-brand-tint); border: 1.5px solid #bfdbfe; color: var(--ss-brand); }

/* ══════════════════════════════════════════════════════════════
   5 · Durum bantları (hata / başarı / bilgi / dikkat)
   Soluk kenar (#fca5a5 vb.) beyaza karşı 1.4–1.9:1 — 1.4.11'in 3:1
   eşiğini geçmez. Kutunun sınırını yüksek kontrastlı 5px VURGU
   ŞERİDİ taşır; soluk kenar yalnız yumuşak çerçevedir.
   ══════════════════════════════════════════════════════════════ */

.ss-bant {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 18px;
    padding: 14px 16px;
    border-radius: 16px;
    max-width: 900px;
}
.ss-bant > svg { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 2px; }
.ss-bant-govde { min-width: 0; flex: 1 1 auto; }
.ss-bant p {
    margin: 0;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.55;
    overflow-wrap: anywhere;
}
.ss-bant p + p { margin-top: 6px; }

.ss-bant-hata   { background: var(--ss-err-bg);    border: 1.5px solid var(--ss-err-line);  border-left: 5px solid var(--ss-err); }
.ss-bant-basari { background: var(--ss-ok-bg);     border: 1.5px solid var(--ss-ok-line);   border-left: 5px solid var(--ss-ok); }
.ss-bant-bilgi  { background: var(--ss-brand-tint);border: 1.5px solid #bfdbfe;             border-left: 5px solid var(--ss-brand); }
.ss-bant-dikkat { background: var(--ss-uyar-bg);   border: 1.5px solid var(--ss-uyar-line); border-left: 5px solid var(--ss-uyar); }

.ss-bant-hata   > svg, .ss-bant-hata   p { color: var(--ss-err); }
.ss-bant-basari > svg, .ss-bant-basari p { color: var(--ss-ok); }
.ss-bant-bilgi  > svg, .ss-bant-bilgi  p { color: var(--ss-brand); }
.ss-bant-dikkat > svg, .ss-bant-dikkat p { color: var(--ss-uyar); }

.ss-bant:focus { outline: 3px solid var(--ss-brand-dark); outline-offset: 3px; }

/* JS'in yazdığı canlı bölgeler — boşken hiç yer kaplamaz (4.1.3) */
#ss-durum:empty,
.ss-form-durum:empty { display: none; }
#ss-durum { margin-bottom: 18px; }
.ss-form-durum { margin: 12px 0 0; }
#ss-durum .ss-bant,
.ss-form-durum .ss-bant { margin-bottom: 0; max-width: none; }

/* ══════════════════════════════════════════════════════════════
   6 · Arama
   ══════════════════════════════════════════════════════════════ */

.ss-arama { margin: 0 0 22px; }
.ss-etiket {
    display: block;
    margin: 0 0 6px;
    padding: 3px 0;              /* 2.5.8 · etiket hedefi ≥24px */
    min-height: 24px;
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.5;
    color: var(--ss-body);       /* 10.4:1 */
}

.ss-field {
    display: flex;
    align-items: center;
    min-height: 54px;                     /* 2.5.5 dokunma hedefi (AAA) */
    background: #ffffff;
    border: 1.5px solid var(--ss-line);   /* 4.76:1 ≥ 3:1 */
    border-radius: 14px;
    cursor: text;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.ss-field:focus-within {
    border-color: var(--ss-brand-dark);
    /* 2px beyaz boşluk + 3px koyu halka (10.5:1). outline: forced-colors için */
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 5px var(--ss-brand-dark);
    outline: 3px solid transparent;
    outline-offset: 2px;
}
.ss-fikon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    align-self: stretch;
    color: var(--ss-help);       /* 7.58:1 */
}
.ss-fikon svg { width: 20px; height: 20px; }

.ss-input {
    flex: 1 1 auto;
    min-width: 0;
    align-self: stretch;
    background: transparent;
    border: 0;
    outline: none;
    padding: 12px 14px 12px 0;
    font: inherit;
    font-size: 16px;             /* iOS otomatik yakınlaşma engeli */
    line-height: 1.5;
    color: var(--ss-ink);        /* 17.9:1 */
    -webkit-appearance: none;
    appearance: none;
    border-radius: 13px;
}
.ss-input::placeholder { color: var(--ss-help); opacity: 1; }   /* 7.58:1 */
.ss-input:focus { outline: none; }   /* halkayı .ss-field taşır */
/* type=search'ün WebKit temizleme çarpısı 44px hedefi bozuyor; kendi
   butonumuz var. */
.ss-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* Aramayı temizle — 2.5.5 için 44×44 */
.ss-arama-temizle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    margin-right: 4px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--ss-help);       /* 7.58:1 */
    cursor: pointer;
}
.ss-arama-temizle:hover { color: var(--ss-ink); background: #f1f5f9; }
.ss-arama-temizle svg { width: 18px; height: 18px; }
.ss-arama-temizle[hidden] { display: none; }

.ss-yardim {
    margin: 7px 0 0;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--ss-help);       /* 7.58:1 */
    max-width: 62ch;
    overflow-wrap: anywhere;
}
/* Sonuç sayacı yer tuttuğu için satır zıplaması olmaz (CLS) */
.ss-arama-sonuc { min-height: 1.3125rem; }

/* ══════════════════════════════════════════════════════════════
   7 · Sayaçlar (istatistik listesi)
   Kart YOK (BDL kuralı 1): ayrımı hairline ve tipografi kurar.
   ══════════════════════════════════════════════════════════════ */

.ss-sayaclar { margin: 0 0 22px; padding: 0; list-style: none; }
.ss-sayac {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--ss-line-soft);
}
.ss-sayaclar > .ss-sayac:first-child { padding-top: 0; }
.ss-sayaclar > .ss-sayac:last-child { border-bottom: 0; }
.ss-sayac-etiket {
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--ss-body);       /* 10.4:1 */
}
.ss-sayac-deger {
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    color: var(--ss-ink);        /* 17.9:1 */
}
.ss-sayac-uyar .ss-sayac-deger { color: var(--ss-uyar); }   /* 9.08:1 */
.ss-sayac-bilgi .ss-sayac-deger { color: var(--ss-brand); } /* 8.83:1 */

/* ══════════════════════════════════════════════════════════════
   8 · Butonlar
   ══════════════════════════════════════════════════════════════ */

.ss-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 54px;
    padding: 14px 20px;
    border: 0;
    border-radius: 14px;
    font: inherit;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, transform .12s ease;
}
.ss-btn > svg { flex: 0 0 auto; width: 20px; height: 20px; }
/* İkon + metin tek <span> içinde: JS meşgul durumunda içeriği değiştirir */
.ss-btn > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 0;
}
.ss-btn > span > svg { flex: 0 0 auto; width: 20px; height: 20px; }

.ss-btn-ana      { background: var(--ss-brand); color: #ffffff; }   /* 8.83:1 */
.ss-btn-ana:hover { background: var(--ss-brand-dark); }
.ss-btn-onay     { background: var(--ss-ok);    color: #ffffff; }   /* 7.75:1 */
.ss-btn-onay:hover { background: #064e3b; }
.ss-btn-uyar     { background: var(--ss-uyar);  color: #ffffff; }   /* 9.08:1 */
.ss-btn-uyar:hover { background: #5c2a0c; }
.ss-btn-tehlike  { background: var(--ss-err);   color: #ffffff; }   /* 8.32:1 */
.ss-btn-tehlike:hover { background: #7f1d1d; }
.ss-btn-notr {
    background: #ffffff;
    color: var(--ss-ink);                    /* 17.9:1 */
    border: 1.5px solid var(--ss-line);      /* 4.76:1 */
    font-size: 1rem;
}
.ss-btn-notr:hover { background: var(--ss-yuzey); border-color: var(--ss-brand-dark); }

.ss-btn:active { transform: scale(.995); }
.ss-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.ss-btn:disabled.is-busy { opacity: 1; cursor: progress; }

/* Küçük buton — 2.5.5 (AAA) için yine ≥44px yüksekliğinde kalır */
.ss-btn-kucuk {
    width: auto;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 12px;
    font-size: .9375rem;
}
.ss-btn-kucuk > span > svg,
.ss-btn-kucuk > svg { width: 17px; height: 17px; }

/* Buton satırı — dar ekranda alt alta, hedefler asla ezilmez */
.ss-btn-satir { display: flex; flex-wrap: wrap; gap: 10px; }
.ss-btn-satir > .ss-btn { flex: 1 1 150px; }

/* Meşgul göstergesi (spinner) */
.ss-spinner {
    flex: 0 0 auto;
    width: 18px; height: 18px;
    border: 2.5px solid rgba(255, 255, 255, .45);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: ssDon .7s linear infinite;
}
.ss-btn-notr .ss-spinner { border-color: var(--ss-line-panel); border-top-color: var(--ss-brand); }
@keyframes ssDon { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════════════════
   9 · Soru listesi (akordeon)
   BDL kuralı 1 · kart yok: her soru hairline ile ayrılır.
   ══════════════════════════════════════════════════════════════ */

.ss-liste { margin: 0; padding: 0; list-style: none; }
.ss-soru {
    border-bottom: 1px solid var(--ss-line-soft);
    scroll-margin-top: 84px;      /* programatik odakta navbar altında kalmasın */
}
.ss-liste > .ss-soru:first-child { border-top: 1px solid var(--ss-line-soft); }
.ss-soru[hidden] { display: none; }

.ss-soru-h { margin: 0; font-size: inherit; font-weight: inherit; }

/* Açılır tetik — tam genişlik buton (2.5.5: yükseklik ≥54px) */
.ss-tetik {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
    min-height: 54px;
    padding: 16px 4px;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: start;
    cursor: pointer;
    color: var(--ss-ink);        /* 17.9:1 */
    transition: background-color .15s ease;
}
.ss-tetik:hover { background: var(--ss-brand-tint); }
.ss-tetik-metin {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.45;
    overflow-wrap: anywhere;     /* uzun başlık yatay taşma yapmasın */
}
.ss-tetik-ok {
    flex: 0 0 auto;
    width: 22px; height: 22px;
    margin-top: 2px;
    color: var(--ss-brand);      /* 8.83:1 · 1.4.11 fazlasıyla karşılanır */
    transition: transform .22s ease;
}
.ss-tetik[aria-expanded="true"] .ss-tetik-ok { transform: rotate(180deg); }
.ss-tetik[aria-expanded="true"] .ss-tetik-metin { color: var(--ss-brand-dark); }

/* Meta satırı — tetiğin DIŞINDA: butonun erişilebilir adı yalnız
   sorunun kendisi olsun (4.1.2 / 2.5.3). */
.ss-soru-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
    margin: -6px 0 14px;
    padding: 0 4px;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--ss-help);       /* 7.58:1 */
}
.ss-soru-meta > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.ss-soru-meta svg { flex: 0 0 auto; width: 14px; height: 14px; }
.ss-soru-meta .ss-meta-cevapli { color: var(--ss-brand); font-weight: 700; }  /* 8.83:1 */

/* Panel — kapalıyken `hidden`: içindeki buton/textarea sekme
   sırasına GİRMEZ (2.4.3). JS yükseklik animasyonunu yönetir. */
.ss-panel { padding: 0 4px 20px; }
.ss-panel[hidden] { display: none; }
.ss-panel.ss-animasyonlu {
    overflow: hidden;
    max-height: 0;
    transition: max-height .28s cubic-bezier(.22, 1, .36, 1);
}
/* Açılma tamamlandığında JS `.ss-tam` ekler → max-height kilidi kalkar.
   Pencere yeniden boyutlanınca veya içerik büyüyünce kırpılma olmaz. */
.ss-panel.ss-tam { max-height: none; overflow: visible; }

.ss-soru-govde {
    margin: 0 0 16px;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--ss-body);       /* 10.4:1 */
    max-width: 68ch;             /* 1.4.8 */
    overflow-wrap: anywhere;
}

/* ── Cevaplar ────────────────────────────────────────────────── */

.ss-cevaplar { margin: 0 0 18px; padding: 0; list-style: none; }
.ss-cevap {
    padding: 14px 0 14px 16px;
    border-left: 4px solid var(--ss-brand);   /* 8.83:1 ≥ 3:1 */
    background: var(--ss-brand-tint);
    border-radius: 0 12px 12px 0;
}
.ss-cevap + .ss-cevap { margin-top: 10px; }
.ss-cevap-uzman { border-left-color: var(--ss-ok); background: var(--ss-ok-bg); }
.ss-cevap-metin {
    margin: 0;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--ss-ink);        /* 17.9:1 (#eff6ff üstünde 16.6:1) */
    max-width: 68ch;
    overflow-wrap: anywhere;
}
.ss-cevap-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin: 10px 0 0;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--ss-body);       /* 10.4:1 · renkli zeminde de ≥7:1 */
}
.ss-cevap-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.ss-cevap-meta svg { flex: 0 0 auto; width: 14px; height: 14px; }
.ss-rozet-uzman {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    background: #ffffff;
    border: 1.5px solid var(--ss-ok-line);
    color: var(--ss-ok);         /* 7.75:1 */
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ── Cevap yazma formu ───────────────────────────────────────── */

.ss-cevap-form {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--ss-line-soft);
}
.ss-textarea-sar { position: relative; }
.ss-textarea {
    display: block;
    width: 100%;
    min-height: 108px;
    padding: 14px 16px;
    background: #ffffff;
    border: 1.5px solid var(--ss-line);   /* 4.76:1 */
    border-radius: 14px;
    font: inherit;
    font-size: 16px;             /* iOS otomatik yakınlaşma engeli */
    line-height: 1.6;
    color: var(--ss-ink);        /* 17.9:1 */
    resize: vertical;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.ss-textarea::placeholder { color: var(--ss-help); opacity: 1; }
.ss-textarea:focus,
.ss-textarea:focus-visible {
    outline: 3px solid transparent;   /* forced-colors için */
    outline-offset: 2px;
    border-color: var(--ss-brand-dark);
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 5px var(--ss-brand-dark);
}
.ss-textarea[aria-invalid="true"] { border-color: var(--ss-err); background: var(--ss-err-bg); }
.ss-textarea[aria-invalid="true"]::placeholder { color: var(--ss-body); }

/* Sayaç — aria-hidden; sınır bilgisi ayrıca .ss-yardim metninde yazar */
.ss-sayac-karakter {
    display: block;
    margin: 6px 0 0;
    text-align: end;
    font-size: .8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
    color: var(--ss-help);       /* 7.58:1 */
}
.ss-sayac-karakter.ss-dolmak-uzere { color: var(--ss-uyar); }   /* 9.08:1 */

/* ── Yönetici eylem satırı ───────────────────────────────────── */

.ss-yonetim {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 16px;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--ss-line-soft);
}

/* ══════════════════════════════════════════════════════════════
   10 · Moderasyon kuyruğu (bekleyen soru / cevap)
   ══════════════════════════════════════════════════════════════ */

.ss-kuyruk { margin: 0; padding: 0; list-style: none; }
.ss-kuyruk-oge {
    padding: 16px 0 16px 16px;
    border-left: 4px solid var(--ss-uyar);   /* 9.08:1 */
    background: var(--ss-uyar-bg);
    border-radius: 0 12px 12px 0;
}
.ss-kuyruk-oge + .ss-kuyruk-oge { margin-top: 12px; }
.ss-kuyruk-cevap { border-left-color: var(--ss-brand); background: var(--ss-brand-tint); }

.ss-kuyruk-baslik {
    margin: 0 0 6px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--ss-ink);        /* 17.9:1 */
    overflow-wrap: anywhere;
}
.ss-kuyruk-metin {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--ss-body);       /* 10.4:1 */
    max-width: 68ch;
    overflow-wrap: anywhere;
}
.ss-kuyruk-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin: 10px 0 0;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--ss-body);       /* 10.4:1 */
}
.ss-kuyruk-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.ss-kuyruk-meta svg { flex: 0 0 auto; width: 14px; height: 14px; }
.ss-kuyruk-eylem { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.ss-kuyruk-eylem > .ss-btn { flex: 1 1 130px; }

/* ══════════════════════════════════════════════════════════════
   11 · Boş durum
   ══════════════════════════════════════════════════════════════ */

.ss-bos {
    padding: 34px 4px;
    text-align: center;
    border-top: 1px solid var(--ss-line-soft);
    border-bottom: 1px solid var(--ss-line-soft);
}
.ss-bos > svg { width: 44px; height: 44px; color: var(--ss-help); }   /* 7.58:1 */
.ss-bos-h {
    margin: 12px 0 0;
    font-size: 1.0625rem;
    font-weight: 800;
    line-height: 1.4;
    color: var(--ss-ink);        /* 17.9:1 */
}
.ss-bos p {
    margin: 6px auto 0;
    max-width: 46ch;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--ss-help);       /* 7.58:1 */
}
.ss-bos .ss-btn { width: auto; margin-top: 18px; }
.ss-bos[hidden] { display: none; }

/* ══════════════════════════════════════════════════════════════
   12 · Diyalog (native <dialog>)
   Berrak'ın tek “kutu” istisnası: üst üste binen katman kart değil,
   diyalog yüzeyidir. <dialog>.showModal() odak tuzağını, Esc'i,
   arka planın inert olmasını ve odağın geri dönmesini TARAYICI'dan
   alır — elle yazılmış tuzaktan güvenilirdir (2.1.2 / 2.4.3).
   ══════════════════════════════════════════════════════════════ */

.ss-diyalog {
    width: 100%;
    max-width: min(640px, calc(100vw - 32px));
    max-height: min(88vh, 820px);
    padding: 0;
    border: 1.5px solid var(--ss-line-panel);
    border-radius: 20px;
    background: #ffffff;
    color: var(--ss-ink);
    box-shadow: 0 24px 60px -18px rgba(15, 23, 42, .5);
    overflow: hidden;            /* köşeler panelin kaydırmasını kırpsın */
    animation: ssPanelAc .22s cubic-bezier(.22, 1, .36, 1) both;
}
.ss-diyalog::backdrop {
    background: rgba(15, 23, 42, .72);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    animation: ssModalAc .16s ease-out both;
}
@keyframes ssModalAc { from { opacity: 0 } to { opacity: 1 } }
@keyframes ssPanelAc { from { opacity: 0; transform: translateY(8px) scale(.985) } to { opacity: 1; transform: none } }

/* Panel dikeyde kayar; başlık ve alt bar sabit kalır */
.ss-diyalog-ic {
    display: flex;
    flex-direction: column;
    max-height: inherit;
    max-height: min(88vh, 820px);
}
.ss-diyalog-ust {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--ss-line-soft);
}
.ss-diyalog-ikon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px; height: 46px;
    border-radius: 14px;
    background: var(--ss-brand-tint);
    border: 1.5px solid #bfdbfe;
    color: var(--ss-brand);
}
.ss-diyalog-ikon svg { width: 23px; height: 23px; }
.ss-diyalog-ikon-uyar { background: var(--ss-uyar-bg); border-color: var(--ss-uyar-line); color: var(--ss-uyar); }
.ss-diyalog-ikon-err  { background: var(--ss-err-bg);  border-color: var(--ss-err-line);  color: var(--ss-err); }

.ss-diyalog-baslik {
    flex: 1 1 auto;
    margin: 0;
    padding-top: 4px;
    min-width: 0;
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -.01em;
    color: var(--ss-ink);        /* 17.9:1 */
    overflow-wrap: anywhere;
}
.ss-diyalog-kapat {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;   /* 2.5.5 */
    margin: -4px -6px 0 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--ss-help);       /* 7.58:1 */
    cursor: pointer;
}
.ss-diyalog-kapat:hover { color: var(--ss-ink); background: #f1f5f9; }
.ss-diyalog-kapat svg { width: 20px; height: 20px; }

.ss-diyalog-govde { padding: 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ss-diyalog-metin {
    margin: 0 0 16px;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--ss-body);       /* 10.4:1 */
    max-width: 62ch;
    overflow-wrap: anywhere;
}
.ss-diyalog-alan + .ss-diyalog-alan { margin-top: 18px; }
/* Diyalog içi canlı bölge — boşken yer kaplamaz (4.1.3) */
.ss-diyalog-durum:empty { display: none; }
.ss-diyalog-durum { margin: 0 0 16px; }
.ss-diyalog-durum .ss-bant { margin: 0; max-width: none; }
.ss-diyalog-alt {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--ss-line-soft);
    background: var(--ss-yuzey);
}
.ss-diyalog-alt > .ss-btn { width: auto; min-width: 132px; }
@media (max-width: 479px) {
    .ss-diyalog-alt > .ss-btn { width: 100%; flex: 1 1 100%; }
}

/* Diyalog açıkken arka plan kaymasın (iOS dahil).
   BİRİNCİL YOL `:has()` — kilit doğrudan tarayıcının koruduğu `open`
   özniteliğine bağlıdır, JS'te tutulan bir duruma DEĞİL. Neden önemli:
   belge gizliyken (arka plan sekmesi) <dialog>'un `close` olayı
   ertelenebiliyor; kilidi yalnız o olaya bağlasaydık sınıf üstte kalır
   ve sayfa bir daha kaydırılamazdı. `.ss-kilit` yalnızca `:has()`
   desteklemeyen eski tarayıcılar için yedektir. */
body:has(dialog.ss-diyalog[open]) { overflow: hidden; }
body.ss-kilit { overflow: hidden; }

/* <dialog>.showModal() desteklemeyen çok eski tarayıcı yedeği:
   `open` özniteliği yalnız display:block verir, konumlandırmaz.
   Odak tuzağını JS üstlenir (js/sss.js · diyalogAc). */
.ss-diyalog.ss-diyalog-yedek {
    position: fixed;
    z-index: 70;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}
.ss-diyalog.ss-diyalog-yedek::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: rgba(15, 23, 42, .72);
}

/* ══════════════════════════════════════════════════════════════
   13 · Odak · 2.4.7 / 2.4.11 — her yerde görünür (3px)
   ══════════════════════════════════════════════════════════════ */

.ss a:focus-visible,
.ss button:focus-visible,
.ss input:focus-visible,
.ss textarea:focus-visible,
.ss [tabindex]:focus-visible,
.ss-diyalog a:focus-visible,
.ss-diyalog button:focus-visible,
.ss-diyalog input:focus-visible,
.ss-diyalog textarea:focus-visible {
    outline: 3px solid var(--ss-brand-dark);   /* 10.5:1 */
    outline-offset: 2px;
    border-radius: 10px;
}
/* Alan içindeki girdinin odağını .ss-field halkası taşır — çift halka olmasın */
.ss .ss-field .ss-input:focus-visible { outline: none; }
/* Programatik odakta içerik navbar'ın altında kalmasın */
.ss [tabindex="-1"] { scroll-margin-top: 84px; }
.ss-diyalog:focus { outline: none; }

/* ══════════════════════════════════════════════════════════════
   14 · Ekran okuyucu / yardımcı sınıflar
   ══════════════════════════════════════════════════════════════ */

.ss-sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ══════════════════════════════════════════════════════════════
   15 · 1.4.10 Yeniden akış — %200 büyütmede yatay kaydırma olmasın
   ══════════════════════════════════════════════════════════════ */

.ss, .ss * { min-width: 0; }
.ss img, .ss svg { max-width: 100%; }
.ss-diyalog * { min-width: 0; }

/* ══════════════════════════════════════════════════════════════
   16 · Hareket azaltma / yüksek kontrast
   ══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .ss *,
    .ss-diyalog,
    .ss-diyalog *,
    .ss-diyalog::backdrop {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

@media (forced-colors: active) {
    .ss-field { border: 2px solid ButtonBorder; }
    .ss-field:focus-within { outline: 3px solid Highlight; outline-offset: 2px; }
    .ss-textarea { border: 2px solid ButtonBorder; }
    .ss-btn { border: 2px solid ButtonBorder; }
    .ss-diyalog { border: 2px solid ButtonBorder; }
    .ss-cevap, .ss-kuyruk-oge, .ss-bant { border: 1px solid ButtonBorder; }
    .ss-adet, .ss-rozet-uzman { border: 1px solid ButtonBorder; }
    /* Ok yönü tek başına taşıyıcı olmasın diye zaten aria-expanded var */
    .ss-tetik-ok { forced-color-adjust: auto; }
}

/* ══════════════════════════════════════════════════════════════
   17 · Yazdırma — tüm cevaplar açık basılsın
   ══════════════════════════════════════════════════════════════ */

@media print {
    .ss-yan, .ss-yonetim, .ss-cevap-form, .ss-diyalog { display: none !important; }
    .ss-panel[hidden] { display: block !important; }
    .ss-panel { max-height: none !important; overflow: visible !important; }
    .ss-ic { max-width: none; padding: 0; }
    .ss-kolonlar { display: block; }
    .ss-kolonlar > .ss-kolon + .ss-kolon { padding-left: 0; border-left: 0; }
    .ss-soru { break-inside: avoid; }
}