/* ==============================================================
   sifremi-unuttum.css · Şifre kurtarma akışı — tam genişlik, kartsız

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

   BU DOSYAYI YÜKLEYEN SAYFALAR (ikisi tek bir akış):
     · sifremi_unuttum.php  → hesabı bul / sıfırlama bağlantısını gönder
     · sifre_sifirla.php    → yeni şifreyi belirle

   TASARIM ANLAYIŞI (giris.php `.gr` ile birebir aynı dil):
     · Ortalanmış beyaz KART YOK. Sayfa zemini beyaz, içerik doğrudan
       sayfanın üstünde durur; genişlik navbar (.nv-ic) ile hizalı
       1320px'e kadar açılır.
     · ≥64em'de İKİ SÜTUN:
         sol  → işlem (form / sonuç)
         sağ  → yardım, ipuçları, iletişim   (ayraç: sütunun border-left'i)
       Altında tek sütun; DOM sırası okuma sırasıyla aynı.
     · Alanlar 54px, butonlar 54px, dokunma hedefleri ≥44px (2.5.5 AAA).

   ⛔ KIRILIM NOKTASI `em` CİNSİNDEN (64em). Kullanıcı tarayıcı varsayılan
      yazı boyutunu büyüttüğünde px tabanlı kırılım sütunları dar bırakıp
      metni sıkıştırıyor, satırlar çizginin dibine yapışıyordu; `em` ile
      aynı ekran tek sütuna düşer (1.4.4 %200 yeniden boyutlandırma +
      1.4.10 yeniden akış).

   RENK: değerler giris.css / kayit.css ile AYNI. Her ton hem WCAG 2.x
   AAA (≥7:1) hem APCA (Lc ≥75 gövde) eşiğini geçer. Ham HEX yazma;
   var(--su-*) kullan.

   ⛔ 2026-09-19'da eski Tailwind kart tasarımının (.su-accent, .su-seg
      hap kontrolü, max-w-lg kart) YERİNE geçti.
      Eski sürüm: .yedek_kurtarma_tasarim_20260919/css/sifremi-unuttum.css
   ============================================================== */

/* head_etiketleri.php kritik CSS'inde global `html{background:#1e3a8a}` var;
   overscroll sırasında beyaz içeriğin 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 beyaz üstünde) — */
    --su-ink:        #0f172a;   /* 17.9:1 — başlık, girilen değer */
    --su-body:       #334155;   /* 10.4:1 — etiket, gövde */
    --su-help:       #475569;   /*  7.58:1 — yardımcı metin, placeholder, ikon
                                   (#f8fafc tonlu zeminde 7.24:1 — hâlâ AAA) */
    /* — Marka — */
    --su-brand:      #1e40af;   /*  8.83:1 — bağlantı + birincil buton zemini */
    --su-brand-dark: #1e3a8a;   /* 10.5:1 — hover, odak halkası */
    --su-brand-tint: #eff6ff;
    /* — Durum — */
    --su-err:        #991b1b;   /*  8.32:1 beyazda · 7.6:1 #fef2f2 üstünde */
    --su-err-bg:     #fef2f2;
    --su-err-line:   #fca5a5;
    --su-ok:         #065f46;   /*  7.75:1 */
    --su-ok-bg:      #ecfdf5;
    --su-ok-line:    #6ee7b7;
    --su-dikkat:     #9a3412;   /*  7.31:1 — “kayıt bulunamadı” turuncusu */
    --su-dikkat-bg:  #fff7ed;
    --su-dikkat-line:#fdba74;
    /* — WhatsApp — marka yeşili #25D366 beyaz yazıyla 1.9:1 (AA bile değil);
         koyu marka yeşili 7.67:1 ile AAA'yı geçer. — */
    --su-wa:         #075e54;
    --su-wa-dark:    #054d45;
    /* — Yüzey / çizgi (1.4.11 ≥3:1) — */
    --su-yuzey:      #f8fafc;
    --su-line:       #64748b;   /*  4.76:1 — alan kenarı; METİN DEĞİL */
    --su-line-panel: #cbd5e1;
    --su-line-soft:  #e2e8f0;   /* YALNIZ dekoratif hairline */
}

/* ══════════════════════════════════════════════════════════════
   Yerleşim
   ══════════════════════════════════════════════════════════════ */

/* Ölçüler dolgu/kenarlık dahil. Tailwind preflight (style.css) bunu zaten
   global veriyor; burada tekrarlanır ki bu akış, style.css yeniden
   derlendiğinde ya da bu dosya tek başına denendiğinde de doğru ölçülsün
   (aksi halde width:100% + padding'li butonlar kabı taşırıyordu). */
.su, .su *, .su *::before, .su *::after { box-sizing: border-box; }

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

.su-sarmal { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
@media (min-width: 64em) {
    .su-sarmal { min-height: calc(100vh - 58px); }   /* navbar yüksekliği */
}

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

/* İki sütun ──────────────────────────────────────────────────
   Ayraç: sağ sütunun border-left'i. Izgara hizalaması BİLEREK
   `stretch` (varsayılan) bırakıldı — `align-items:start` ile ayraç
   kısa sütunun boyunda kesilip sayfanın ortasında havada bitiyor,
   sütun içeriği de çizginin dibine yapışmış görünüyordu. */
.su-kolonlar { display: grid; grid-template-columns: 1fr; }
.su-kolon { min-width: 0; display: flex; flex-direction: column; }

@media (min-width: 64em) {
    .su-kolonlar {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
        column-gap: 0;             /* boşluğu sütun padding'leri verir */
    }
    .su-kolonlar > .su-kolon:first-child { padding-right: clamp(32px, 3.4vw, 60px); }
    .su-kolonlar > .su-kolon + .su-kolon {
        padding-left: clamp(32px, 3.4vw, 60px);
        border-left: 1px solid var(--su-line-soft);
    }
    /* Eşit sütunlu kırılım (sonuç ekranları) */
    .su-kolonlar-esit { grid-template-columns: 1fr 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   Başlık bloğu ve konum göstergesi (2.4.8)
   ══════════════════════════════════════════════════════════════ */

.su-ust { margin-bottom: 22px; }
.su-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(--su-ink);
}
.su-h1-alt {
    margin: 8px 0 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--su-help);
    max-width: 62ch;               /* 1.4.8 — satır ≤80 karakter */
}

/* “Adım 1 / 2” — kullanıcı akışın neresinde olduğunu bilir (2.4.8 AAA) */
.su-adim {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 6px 12px;
    border: 1.5px solid var(--su-line-panel);
    border-radius: 999px;
    background: var(--su-yuzey);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1.5;
    color: var(--su-body);
}
.su-adim svg { flex: 0 0 auto; width: 15px; height: 15px; color: var(--su-brand); }

/* ══════════════════════════════════════════════════════════════
   Sunucu mesajları (hata / bilgi / başarı)
   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ı VURGU ŞERİDİ
   taşır, soluk kenar yalnız yumuşak çerçeve olarak kalır.
   ══════════════════════════════════════════════════════════════ */

.su-uyari,
.su-bilgi,
.su-olumlu {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
    padding: 14px 16px;
    border-radius: 16px;
    max-width: 820px;              /* 1.4.8 satır uzunluğu */
}
.su-uyari  { background: var(--su-err-bg);     border: 1.5px solid var(--su-err-line); border-left: 5px solid var(--su-err); }
.su-bilgi  { background: var(--su-brand-tint); border: 1.5px solid #bfdbfe;            border-left: 5px solid var(--su-brand); }
.su-olumlu { background: var(--su-ok-bg);      border: 1.5px solid var(--su-ok-line);  border-left: 5px solid var(--su-ok); }

.su-uyari svg, .su-bilgi svg, .su-olumlu svg { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; }
.su-uyari svg  { color: var(--su-err); }
.su-bilgi svg  { color: var(--su-brand); }
.su-olumlu svg { color: var(--su-ok); }

.su-uyari p, .su-bilgi p, .su-olumlu p {
    margin: 0;
    min-width: 0;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.55;
    overflow-wrap: anywhere;
}
.su-uyari p  { color: var(--su-err); }
.su-bilgi p  { color: var(--su-brand); }
.su-olumlu p { color: var(--su-ok); }

/* Sunucu hatasında JS bu kutuya odaklanır (3.3.1) */
.su-uyari:focus, .su-olumlu:focus { outline: 3px solid var(--su-brand-dark); outline-offset: 3px; }

/* ══════════════════════════════════════════════════════════════
   Bölüm (fieldset) başlıkları
   ══════════════════════════════════════════════════════════════ */

.su-bolum { border: 0; margin: 0; padding: 0; min-width: 0; }
.su-bolum > legend,
.su-baslik {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0 0 14px;
    font-size: .8125rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
    line-height: 1.5;
    color: var(--su-body);
}
.su-bolum > legend small,
.su-baslik small {
    display: block;
    margin-top: 4px;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    color: var(--su-help);
}

.su-grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
.su-alan { min-width: 0; }

/* ══════════════════════════════════════════════════════════════
   Etiket
   ══════════════════════════════════════════════════════════════ */

.su-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 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(--su-body);
}
.su-zorunlu { color: var(--su-err); font-weight: 800; }

/* ══════════════════════════════════════════════════════════════
   Alan kutusu
   ══════════════════════════════════════════════════════════════ */

.su-field {
    display: flex;
    align-items: center;
    min-height: 54px;                       /* 2.5.5 (AAA) */
    background: #ffffff;
    border: 1.5px solid var(--su-line);     /* 4.76:1 ≥ 3:1 */
    border-radius: 14px;
    cursor: text;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.su-field:focus-within {
    border-color: var(--su-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(--su-brand-dark);
    outline: 3px solid transparent;
    outline-offset: 2px;
}
.su-field.has-error { border-color: var(--su-err); background: var(--su-err-bg); }
.su-field.has-error:focus-within { box-shadow: 0 0 0 2px #ffffff, 0 0 0 5px var(--su-err); }
.su-field.has-ok { border-color: var(--su-ok); }
.su-field.has-ok:focus-within { box-shadow: 0 0 0 2px #ffffff, 0 0 0 5px var(--su-ok); }

.su-fikon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    align-self: stretch;
    color: var(--su-help);        /* 7.58:1 */
}
.su-fikon svg { width: 20px; height: 20px; }
.su-fikon .fas { font-size: 17px; }

.su-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(--su-ink);         /* 17.9:1 */
    -webkit-appearance: none;
    appearance: none;
    /* Autofill iç gölgesi elemanın KENDİ yarıçapına kırpılır; yarıçap
       verilmezse kare köşe taşıp kenarda kaçak dikey çizgi bırakır. */
    border-radius: 13px;
}
.su-input::placeholder { color: var(--su-help); opacity: 1; }
/* Hata zemininde (#fef2f2) --su-help 6.93:1'e düşüp AAA'yı kıl payı kaçırıyor */
.su-field.has-error .su-input::placeholder { color: var(--su-body); }
.su-input:focus { outline: none; }   /* halkayı .su-field:focus-within taşır */

/* TC kimlik alanı — 11 hane; rakamlar ayrık ve eşit genişlikte okunur */
.su-input-tc {
    letter-spacing: .26em;
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 17px;
}
/* Harf aralığı yalnız GİRİLEN numara için; placeholder "1 1   h a n e l i"
   diye dağılmasın (giris.css'teki SMS kodu alanıyla aynı ders). */
.su-input-tc::placeholder { letter-spacing: normal; font-family: inherit; }

/* Şifre göster/gizle */
.su-goz {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    min-height: 48px;
    margin-right: 3px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--su-help);
    cursor: pointer;
}
.su-goz:hover { color: var(--su-ink); background: #f1f5f9; }
.su-goz .fas { font-size: 17px; }

/* ══════════════════════════════════════════════════════════════
   Yardımcı metin ve hata satırı
   Renk TEK BAŞINA taşıyıcı değil: her satırda ikon + metin (1.4.1)
   ══════════════════════════════════════════════════════════════ */

.su-help {
    margin: 7px 0 0;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--su-help);
    max-width: 62ch;
    overflow-wrap: anywhere;
}

.su-err {
    margin: 8px 0 0;
    font-size: .875rem;
    line-height: 1.5;
    font-weight: 600;
    color: var(--su-err);
}
.su-err:not(.hidden):not(:empty) { display: flex; align-items: flex-start; gap: 8px; }
.su-err > span { min-width: 0; overflow-wrap: anywhere; }
.su-err:not(.hidden):not(:empty)::before {
    content: "";
    flex: 0 0 auto;
    width: 18px; height: 18px;
    margin-top: 1px;
    background: no-repeat center / contain
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23991b1b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
}

/* ══════════════════════════════════════════════════════════════
   Butonlar
   ══════════════════════════════════════════════════════════════ */

.su-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;
}
.su-btn svg { flex: 0 0 auto; width: 20px; height: 20px; }
.su-btn .fas, .su-btn .fab { font-size: 17px; }
/* İkon + metin tek bir <span> içinde (JS innerHTML ile spinner'a çeviriyor);
   aradaki boşluğu bu gap verir — purge edilmiş Tailwind'e bağımlı değil. */
.su-btn > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 0;
}

.su-btn-ana { background: var(--su-brand); color: #ffffff; }    /* 8.83:1 */
.su-btn-ana:hover { background: var(--su-brand-dark); }
.su-btn-ana:active { transform: scale(.995); }
.su-btn-ana:disabled { opacity: .65; cursor: not-allowed; transform: none; }

.su-btn-notr {
    background: #ffffff;
    color: var(--su-ink);                     /* 17.9:1 */
    border: 1.5px solid var(--su-line);       /* 4.76:1 */
    font-size: 1rem;
}
.su-btn-notr:hover { background: var(--su-yuzey); border-color: var(--su-brand-dark); }
.su-btn-notr:disabled { opacity: .65; cursor: not-allowed; }

/* WhatsApp — marka yeşili beyaz yazıyla AAA'yı geçmiyor, koyu ton kullanılır */
.su-btn-wa { background: var(--su-wa); color: #ffffff; font-size: 1rem; }  /* 7.67:1 */
.su-btn-wa:hover { background: var(--su-wa-dark); }

.su-btn-kucuk { min-height: 48px; padding: 12px 18px; font-size: 1rem; border-radius: 13px; }

.su-aksiyon { display: grid; gap: 12px; margin-top: 20px; }
.su-aksiyon-yan { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.su-aksiyon-yan .su-btn { width: auto; min-width: 220px; flex: 1 1 220px; }

/* Satır içi metin bağlantısı — 2.5.5 için ≥44px yükseklik */
.su-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
    font-size: .9375rem;
    font-weight: 700;
    color: var(--su-brand);        /* 8.83:1 */
    text-decoration: underline;
    text-underline-offset: 3px;
}
.su-link:hover { color: var(--su-brand-dark); }

/* Metin ağırlıklı geri bağlantısı / düğmesi */
.su-geri {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 4px;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: .9375rem;
    font-weight: 700;
    color: var(--su-brand);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.su-geri:hover { color: var(--su-brand-dark); }
.su-geri svg { flex: 0 0 auto; width: 17px; height: 17px; }
/* Geri bağlantısını taşıyan satır (bir bloktan sonra gelir) */
.su-geri-satir { margin: 18px 0 0; }
.su-yan .su-geri-satir { margin-top: 14px; }

/* Bölüm İÇİNDE duran uyarı kutusu — alt boşluğu düğme grubu verir */
.su-uyari-alan { margin-top: 16px; margin-bottom: 0; }

/* ══════════════════════════════════════════════════════════════
   Yöntem seçici (tablist)
   Eski “hap” segmented kontrolün yerine tam genişlikte, 54px'lik üç
   düğme. Seçili olan YALNIZ renkle değil; dolu zemin + onay ikonu +
   aria-selected ile ayrılır (1.4.1).
   ══════════════════════════════════════════════════════════════ */

.su-yontem {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 22px;
}
@media (min-width: 30em) {
    .su-yontem { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.su-yontem button {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 12px 14px;
    border: 1.5px solid var(--su-line);
    border-radius: 14px;
    background: #ffffff;
    font: inherit;
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.35;
    text-align: left;
    color: var(--su-body);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.su-yontem-ikon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    color: var(--su-help);
}
.su-yontem-ikon svg { width: 19px; height: 19px; }
.su-yontem button > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.su-yontem button:hover { background: var(--su-yuzey); border-color: var(--su-brand-dark); color: var(--su-ink); }
.su-yontem button[aria-selected="true"] {
    background: var(--su-brand);            /* beyaz yazıyla 8.83:1 */
    border-color: var(--su-brand);
    color: #ffffff;
}
.su-yontem button[aria-selected="true"] .su-yontem-ikon { color: #ffffff; }
.su-yontem button[aria-selected="true"]:hover { background: var(--su-brand-dark); border-color: var(--su-brand-dark); }
/* Seçili durum yalnız renkle anlatılmasın (1.4.1) — sağa onay işareti */
.su-yontem button[aria-selected="true"]::after {
    content: "";
    flex: 0 0 auto;
    margin-left: auto;
    width: 18px; height: 18px;
    background: no-repeat center / contain
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* Panel geçiş animasyonu (yöntem değişince yeniden tetiklenir) */
@keyframes suFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.su-anim { animation: suFadeUp .28s ease-out both; }

/* ══════════════════════════════════════════════════════════════
   Sonuç ekranı (gönderildi / bulundu / bulunamadı)
   ══════════════════════════════════════════════════════════════ */

.su-sonuc-ust {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 24px;
    margin-bottom: 26px;
    border-bottom: 2px solid var(--su-line-soft);
}
.su-sonuc-ikon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px; height: 52px;
    border-radius: 16px;
    border: 1.5px solid var(--su-line-panel);
    background: var(--su-yuzey);
    color: var(--su-body);
}
.su-sonuc-ikon svg { width: 26px; height: 26px; }
.su-sonuc-ust-iyi { border-bottom-color: var(--su-ok-line); }
.su-sonuc-ust-iyi .su-sonuc-ikon { background: var(--su-ok-bg); border-color: var(--su-ok-line); color: var(--su-ok); }
.su-sonuc-ust-dikkat { border-bottom-color: var(--su-dikkat-line); }
.su-sonuc-ust-dikkat .su-sonuc-ikon { background: var(--su-dikkat-bg); border-color: var(--su-dikkat-line); color: var(--su-dikkat); }
.su-sonuc-ust-kotu { border-bottom-color: var(--su-err-line); }
.su-sonuc-ust-kotu .su-sonuc-ikon { background: var(--su-err-bg); border-color: var(--su-err-line); color: var(--su-err); }
.su-sonuc-baslik { min-width: 0; }
.su-sonuc-ust-dikkat .su-h1 { color: var(--su-dikkat); }
.su-sonuc-ust-kotu .su-h1 { color: var(--su-err); }

/* Maskelenmiş e-posta / telefon kutusu */
.su-hedef {
    margin: 0 0 20px;
    padding: 16px 18px;
    border: 1.5px solid var(--su-line-panel);
    border-radius: 16px;
    background: var(--su-yuzey);
}
.su-hedef dt {
    margin: 0 0 4px;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--su-help);
}
.su-hedef dd {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--su-ink);
    /* Taşan adres KIRPILMAZ (eski tasarım ellipsis kullanıyordu; kırpılan
       metin 1.4.4/1.4.10 açısından içerik kaybıdır) — alt satıra sarar. */
    overflow-wrap: anywhere;
}

/* ══════════════════════════════════════════════════════════════
   Yan sütun — yardım, ipuçları, iletişim
   ══════════════════════════════════════════════════════════════ */

.su-yan { display: grid; gap: 22px; align-content: start; }
@media (max-width: 63.99em) {
    .su-yan {
        margin-top: 30px;
        padding-top: 26px;
        border-top: 1px solid var(--su-line-soft);
    }
}

.su-panel {
    padding: 18px;
    border: 1.5px solid var(--su-line-panel);
    border-radius: 16px;
    background: var(--su-yuzey);
}
.su-panel > :first-child { margin-top: 0; }
.su-panel > :last-child { margin-bottom: 0; }
.su-panel p {
    margin: 0 0 12px;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--su-body);
}

/* İpucu listesi — madde işareti yerine ikon + metin */
.su-liste { margin: 0; padding: 0; list-style: none; }
.su-liste li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 0;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--su-body);
    border-bottom: 1px solid var(--su-line-soft);
}
.su-liste li:last-child { border-bottom: 0; padding-bottom: 0; }
.su-liste li:first-child { padding-top: 0; }
.su-liste svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 3px; color: var(--su-help); }
.su-liste b { color: var(--su-ink); font-weight: 700; }

/* Güven rozetleri */
.su-rozetler { display: flex; flex-wrap: wrap; gap: 10px; }
.su-rozet {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1.5px solid var(--su-line-panel);
    border-radius: 999px;
    background: #ffffff;
    font-size: .8125rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--su-body);
}
.su-rozet svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--su-ok); }

/* Alt bağlantılar */
.su-alt {
    margin: 22px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--su-line-soft);
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--su-body);
}
.su-alt p { margin: 0; }
.su-alt a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
    font-weight: 700;
    color: var(--su-brand);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.su-alt a:hover { color: var(--su-brand-dark); }

/* Telif + yasal bağlantılar. $hide_footer_sitemap footer'ın "Yasal"
   sütununu gizlediği için aydınlatma metinlerine giden tek yol burası. */
.su-telif {
    margin: 26px 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0 8px;
    font-size: .75rem;
    line-height: 1.6;
    color: var(--su-help);
}
.su-telif-ayrac { color: var(--su-help); }
.su-telif a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;              /* 2.5.5 (AAA) */
    padding: 0 2px;
    font-weight: 700;
    color: var(--su-brand);        /* 8.83:1 */
    text-decoration: underline;
    text-underline-offset: 3px;
}
.su-telif a:hover { color: var(--su-brand-dark); }
/* Dar ekranda ayraçlar satır sonunda asılı kalmasın */
@media (max-width: 26.25em) {
    .su-telif-ayrac { display: none; }
    .su-telif { gap: 0 14px; }
}

/* ══════════════════════════════════════════════════════════════
   sifre_sifirla.php — şifre gücü ölçeri ve canlı kural listesi
   ══════════════════════════════════════════════════════════════ */

.su-guc { margin-top: 12px; }
.su-guc-ray { display: flex; gap: 5px; height: 8px; margin-bottom: 8px; }
.su-guc-parca {
    flex: 1 1 0;
    border-radius: 999px;
    background: var(--su-line-soft);
    transition: background-color .2s ease;
}
/* Güç YALNIZ renkle değil, DOLU PARÇA SAYISIYLA ve altındaki sözle de
   okunur (1.4.1). Renkler ray zeminine karşı ≥3:1 (1.4.11):
   #991b1b 6.7:1 · #9a3412 5.9:1 · #065f46 6.3:1 */
.su-guc-1 .su-guc-parca:nth-child(-n+1) { background: var(--su-err); }
.su-guc-2 .su-guc-parca:nth-child(-n+2) { background: var(--su-dikkat); }
.su-guc-3 .su-guc-parca:nth-child(-n+3) { background: var(--su-dikkat); }
.su-guc-4 .su-guc-parca { background: var(--su-ok); }
.su-guc-metin {
    margin: 0;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--su-help);
}
.su-guc-metin:empty { display: none; }
.su-guc-1 .su-guc-metin { color: var(--su-err); }
.su-guc-2 .su-guc-metin,
.su-guc-3 .su-guc-metin { color: var(--su-dikkat); }
.su-guc-4 .su-guc-metin { color: var(--su-ok); }

/* Eşleşme satırı — ikon + metin (renk tek başına taşıyıcı değil) */
.su-eslesme {
    margin: 8px 0 0;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--su-help);
}
.su-eslesme:empty { display: none; }
.su-eslesme:not(:empty) { display: flex; align-items: flex-start; gap: 8px; }
.su-eslesme:not(:empty)::before {
    content: "";
    flex: 0 0 auto;
    width: 18px; height: 18px;
    margin-top: 1px;
    background: no-repeat center / contain
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
}
.su-eslesme-var { color: var(--su-ok); }
.su-eslesme-var:not(:empty)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23065f46' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.su-eslesme-yok { color: var(--su-err); }
.su-eslesme-yok:not(:empty)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23991b1b' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}

/* Canlı kural listesi — kural sağlandıkça işaretlenir. Durum ikonu
   dekoratif; karşılığı her satırdaki .su-sr metniyle söylenir. */
.su-kural { margin: 0; padding: 0; list-style: none; }
.su-kural li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 0;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--su-body);
    border-bottom: 1px solid var(--su-line-soft);
}
.su-kural li:last-child { border-bottom: 0; padding-bottom: 0; }
.su-kural li:first-child { padding-top: 0; }
.su-kural li::before {
    content: "";
    flex: 0 0 auto;
    width: 19px; height: 19px;
    margin-top: 2px;
    background: no-repeat center / contain
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E");
}
.su-kural li.tamam { color: var(--su-ok); font-weight: 600; }
.su-kural li.tamam::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23065f46' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12 2.5 2.5 4.5-5'/%3E%3C/svg%3E");
}

/* ══════════════════════════════════════════════════════════════
   2.4.7 / 2.4.11 — klavye odağı her yerde görünür (3px)
   ══════════════════════════════════════════════════════════════ */

.su a:focus-visible,
.su button:focus-visible,
.su input:focus-visible,
.su [tabindex]:focus-visible {
    outline: 3px solid var(--su-brand-dark);   /* 10.5:1 */
    outline-offset: 2px;
    border-radius: 10px;
}
/* Koyu zeminli seçili yöntem düğmesinde koyu halka kaybolur — beyaz ara halka */
.su-yontem button[aria-selected="true"]:focus-visible { box-shadow: 0 0 0 2px #ffffff; }
/* Alan içindeki input odağını .su-field halkası taşır — çift halka olmasın */
.su .su-field .su-input:focus-visible { outline: none; }

/* ══════════════════════════════════════════════════════════════
   Tarayıcı autofill — üç parça birlikte gerekir
     1) background-clip:text  → destekleyen tarayıcıda görünmez olur
        (Chrome bunu form kontrollerinde UYGULAMIYOR; tek başına yetmez)
     2) 1000px iç gölge       → alanı beyaza boyar (garanti yol)
     3) input'ta border-radius → iç gölge elemanın KENDİ yarıçapına
        kırpılır; olmazsa kare köşe taşıp kaçak dikey çizgi bırakır
   `:-webkit-autofill` ve `:autofill` AYRI bloklarda: tanınmayan bir
   seçici tüm kural bloğunu düşürür (seçici listeleri bağışlayıcı değil).
   ══════════════════════════════════════════════════════════════ */

.su input:-webkit-autofill,
.su input:-webkit-autofill:hover,
.su input:-webkit-autofill:focus,
.su input:-webkit-autofill:active {
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
    box-shadow: 0 0 0 1000px #ffffff inset;
    -webkit-text-fill-color: #0f172a;
    caret-color: #0f172a;
    border-radius: 13px;
    transition: background-color 9999s ease-out 0s;
}
.su input:autofill,
.su input:autofill:hover,
.su input:autofill:focus {
    background-clip: text;
    box-shadow: 0 0 0 1000px #ffffff inset;
    -webkit-text-fill-color: #0f172a;
    caret-color: #0f172a;
    border-radius: 13px;
}
/* Hata durumunda pembe zemin korunsun; özgüllük (0,3,1) → (0,2,1)'i yener */
.su .su-field.has-error input:-webkit-autofill,
.su .su-field.has-error input:-webkit-autofill:hover,
.su .su-field.has-error input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #fef2f2 inset;
    box-shadow: 0 0 0 1000px #fef2f2 inset;
}
.su .su-field.has-error input:autofill,
.su .su-field.has-error input:autofill:hover,
.su .su-field.has-error input:autofill:focus {
    box-shadow: 0 0 0 1000px #fef2f2 inset;
}

/* ══════════════════════════════════════════════════════════════
   Ekran okuyucu / yeniden akış / hareket / yüksek kontrast
   ══════════════════════════════════════════════════════════════ */

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

/* 1.4.10 — %200–%400 büyütmede yatay kaydırma olmasın */
.su, .su * { min-width: 0; }
.su img, .su svg { max-width: 100%; }
.su p, .su li, .su label, .su a, .su dd { overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
    .su * { animation: none !important; transition: none !important; }
}

@media (forced-colors: active) {
    .su-field { border: 2px solid ButtonBorder; }
    .su-field:focus-within { outline: 3px solid Highlight; outline-offset: 2px; }
    .su-btn { border: 2px solid ButtonBorder; }
    .su-panel, .su-hedef, .su-rozet, .su-adim { border: 1px solid ButtonBorder; }
    .su-yontem button { border: 2px solid ButtonBorder; }
    .su-yontem button[aria-selected="true"] { border: 3px solid Highlight; }
    .su-guc-parca { border: 1px solid ButtonBorder; }
}