/* ==============================================================
   giris.css · giris.php v2 — tam genişlik, kartsız, WCAG AAA

   ██ 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-*),
      kısmen kursiyer-ekle.php (.kekle).

   TASARIM ANLAYIŞI (kayit.php `.ky` ve kursiyer-ekle.php `.kekle`
   ile birebir aynı dil):
     · Ortalanmış beyaz KART YOK. Sayfa zemini beyaz, form doğrudan
       sayfanın üstünde durur; içerik genişliği navbar (.nv-ic) ile
       hizalı 1320px'e kadar açılır.
     · ≥1024px'te form İKİ SÜTUNA ayrılır:
         sol  → şifreyle giriş
         sağ  → Google / SMS kodu ile giriş  (border-left ayraç)
       Altında tek sütun; DOM sırası okuma sırasıyla aynı, klavye
       akışı bozulmaz.
     · Alanlar 54px, butonlar 54px, dokunma hedefleri ≥44px.

   RENK: değerler kayit.css ile AYNI — iki sayfa arasında geçiş
   yapan üye renk farkı görmesin. Her ton hem WCAG 2.x AAA (≥7:1)
   hem APCA (Lc ≥75 gövde / ≥60 ikincil / ≥45 UI) eşiğini geçer.
   Ham HEX yazma; var(--gr-*) kullan.

   ⛔ Bu dosya 2026-07-28 tarihli `.grs-*` tasarımının YERİNE geçti.
      Eski sürüm: scripts/_canli_yedek/giris_GRS_css_20260728.css
   ⛔ css/giris-erisilebilirlik.css bu tasarımla BİRLİKTE YÜKLENMEZ
      (o dosya eski Tailwind kart tasarımının yaması; #girisSayfa
      altında kapsamlıydı, yeni markup'ta o ID yok).
   ============================================================== */

/* head_etiketleri.php kritik CSS'inde global `html{background:#1e3a8a}` var;
   bu sayfada overscroll sırasında beyaz formun 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) — */
    --gr-ink:        #0f172a;   /* 17.9:1 · APCA Lc 104.6 — başlık, girilen değer */
    --gr-body:       #334155;   /* 10.4:1 · Lc  94.0 — etiket, gövde */
    --gr-help:       #475569;   /*  7.58:1 · Lc  86.3 — yardımcı metin, placeholder, ikon */
    /* — Marka — */
    --gr-brand:      #1e40af;   /*  8.83:1 · Lc  89.2 — bağlantı + birincil buton zemini */
    --gr-brand-dark: #1e3a8a;   /* 10.5:1 — hover, odak halkası */
    --gr-brand-tint: #eff6ff;   /* hover/vurgu zemini */
    /* — Durum — */
    --gr-err:        #991b1b;   /*  8.32:1 beyazda · 7.6:1 #fef2f2 üstünde */
    --gr-err-bg:     #fef2f2;
    --gr-err-line:   #fca5a5;
    --gr-ok:         #065f46;   /*  7.75:1 */
    --gr-ok-bg:      #ecfdf5;
    /* — Yüzey / çizgi (1.4.11 ≥3:1) — */
    --gr-yuzey:      #f8fafc;   /* tonlu blok zemini */
    --gr-line:       #64748b;   /*  4.76:1 · Lc 73.0 — input kenarı; METİN DEĞİL */
    --gr-line-panel: #cbd5e1;   /* panel kenarı (dekoratif ama görünür) */
    --gr-line-soft:  #e2e8f0;   /* YALNIZ dekoratif hairline ayraç */
}

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

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

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

/* İçerik kabı — mobilde okunur genişlik, masaüstünde navbar hizası */
.gr-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: 640px) {
    .gr-ic { max-width: 620px; padding: 32px 32px 48px; }
}
@media (min-width: 1024px) {
    /* 1320px = site navbar'ının (.nv-ic) içerik genişliği.
       margin:auto — dikey ortalama; içerik taşarsa üstten kırpmaz. */
    .gr-ic {
        max-width: 1320px;
        padding: 44px clamp(28px, 3.2vw, 56px) 52px;
        margin-top: auto;
        margin-bottom: auto;
    }
}
@media (max-width: 420px) {
    .gr-ic { padding-left: 16px; padding-right: 16px; }
}

/* İki sütun — form ≥1024px'te ikiye ayrılır */
.gr-kolonlar { display: grid; grid-template-columns: 1fr; }
.gr-kolon { min-width: 0; }

@media (min-width: 1024px) {
    .gr-kolonlar {
        grid-template-columns: 1fr 1fr;
        column-gap: 0;            /* boşluğu sütun padding'leri verir */
        align-items: start;
    }
    .gr-kolonlar > .gr-kolon:first-child { padding-right: clamp(28px, 3vw, 52px); }
    .gr-kolonlar > .gr-kolon + .gr-kolon {
        padding-left: clamp(28px, 3vw, 52px);
        border-left: 1px solid var(--gr-line-soft);
    }
}

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

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

/* ══════════════════════════════════════════════════════════════
   Sunucu mesajları (hata / bilgi)
   ══════════════════════════════════════════════════════════════ */

.gr-uyari,
.gr-bilgi {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
    padding: 14px 16px;
    border-radius: 16px;
    /* 1320px'lik kapta tek cümle bant gibi uzuyordu; ölçü giriş metniyle
       (.gr-h1-alt, 62ch) aynı hizada kalsın. 1.4.8 satır uzunluğu. */
    max-width: 820px;
}
/* Soluk kenar (#fca5a5 / #bfdbfe) beyaza karşı 1.4–1.9:1 — 1.4.11'in 3:1
   eşiğini geçmez. Kutunun sınırını taşıyan yüksek kontrastlı VURGU ŞERİDİ
   eklenir (8.31:1 / 8.72:1); soluk kenar yalnız yumuşak çerçeve olarak kalır. */
.gr-uyari {
    background: var(--gr-err-bg);
    border: 1.5px solid var(--gr-err-line);
    border-left: 5px solid var(--gr-err);
}
.gr-bilgi {
    background: var(--gr-brand-tint);
    border: 1.5px solid #bfdbfe;
    border-left: 5px solid var(--gr-brand);
}

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

.gr-uyari p,
.gr-bilgi p {
    margin: 0;
    min-width: 0;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.55;
    overflow-wrap: anywhere;
}
.gr-uyari p { color: var(--gr-err); }
.gr-bilgi p { color: var(--gr-brand); }
/* Sunucu hatasında JS bu kutuya odaklanır (3.3.1) */
.gr-uyari:focus { outline: 3px solid var(--gr-brand-dark); outline-offset: 3px; }

/* ══════════════════════════════════════════════════════════════
   Bölüm (fieldset) ve alan ızgarası
   ══════════════════════════════════════════════════════════════ */

.gr-bolum { border: 0; margin: 0; padding: 0; min-width: 0; }
/* <legend> (form bölümleri) ve <h2> (askı ekranı) aynı görsel dili paylaşır */
.gr-bolum > legend,
.gr-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(--gr-body);
}
.gr-bolum > legend small,
.gr-baslik small {
    display: block;
    margin-top: 4px;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    color: var(--gr-help);
}

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

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

.gr-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    padding: 3px 0;              /* 2.5.8 — etiket tıklama hedefi ≥24px */
    min-height: 24px;
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.5;
    color: var(--gr-body);       /* 10.4:1 */
}
/* Etiket + sağda "Şifremi unuttum" bağlantısı aynı satırda */
.gr-label-satir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2px 12px;
    margin-bottom: 6px;
}
.gr-label-satir .gr-label { margin-bottom: 0; }

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

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

.gr-fikon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    align-self: stretch;
    color: var(--gr-help);       /* 7.58:1 — 1.4.11 ≥3:1 fazlasıyla */
}
.gr-fikon svg { width: 20px; height: 20px; }

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

/* Şifre göster/gizle */
.gr-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(--gr-help);
    cursor: pointer;
}
.gr-goz:hover { color: var(--gr-ink); background: #f1f5f9; }
.gr-goz .fas { font-size: 17px; }

/* ══════════════════════════════════════════════════════════════
   Yardımcı metin ve hata satırı
   ══════════════════════════════════════════════════════════════ */

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

/* Renk TEK BAŞINA taşıyıcı değil: her satırda ikon + metin (1.4.1) */
.gr-err {
    margin: 8px 0 0;
    font-size: .875rem;
    line-height: 1.5;
    font-weight: 600;
    color: var(--gr-err);        /* 8.32:1 */
}
.gr-err:not(.hidden) { display: flex; align-items: flex-start; gap: 8px; }
.gr-err > span { min-width: 0; overflow-wrap: anywhere; }
.gr-err:not(.hidden)::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");
}

/* ══════════════════════════════════════════════════════════════
   Beni hatırla (özel onay kutusu)
   ══════════════════════════════════════════════════════════════ */

.gr-hatirla { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.gr-hatirla label {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    min-height: 44px;            /* 2.5.5 — etiket de hedef sayılır */
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.55;
    color: var(--gr-body);
    cursor: pointer;
    user-select: none;
}
.gr-cb {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    flex: 0 0 auto;
    width: 24px; height: 24px;
    margin: 0;
    border: 2px solid var(--gr-line);
    border-radius: 7px;
    background: #ffffff;
    display: inline-grid;
    place-content: center;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
/* 2.5.5 (AAA) — görsel boyut 24px kalır, tıklama alanı 44×44'e genişler */
.gr-cb::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 44px; height: 44px;
    transform: translate(-50%, -50%);
}
.gr-cb:hover { border-color: var(--gr-brand-dark); }
.gr-cb:checked { background: var(--gr-brand); border-color: var(--gr-brand); }
.gr-cb:checked::after {
    content: '';
    width: .8rem; height: .45rem;
    border-left: 2.5px solid #fff;
    border-bottom: 2.5px solid #fff;
    transform: rotate(-45deg) translate(1px, -1px);
}

/* ══════════════════════════════════════════════════════════════
   Butonlar ve bağlantılar
   ══════════════════════════════════════════════════════════════ */

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

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

/* Google / SMS — beyaz zeminli ikincil buton */
.gr-btn-notr {
    background: #ffffff;
    color: var(--gr-ink);                    /* 17.9:1 */
    border: 1.5px solid var(--gr-line);      /* 4.76:1 */
    font-size: 1rem;
}
.gr-btn-notr:hover { background: var(--gr-yuzey); border-color: var(--gr-brand-dark); }
.gr-btn-notr .gr-btn-ikon { color: var(--gr-brand); }

.gr-btn-ana-kucuk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 50px;
    padding: 12px 18px;
    border: 0;
    border-radius: 13px;
    background: var(--gr-brand);
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    cursor: pointer;
    transition: background-color .15s ease;
}
.gr-btn-ana-kucuk:hover { background: var(--gr-brand-dark); }
.gr-btn-ana-kucuk:disabled { opacity: .65; cursor: not-allowed; }

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

.gr-aksiyon { margin-top: 20px; }

/* ══════════════════════════════════════════════════════════════
   Ayraç ("veya") — yalnız tek sütun kırılımında
   ══════════════════════════════════════════════════════════════ */

.gr-ayrac {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 26px 0;
}
.gr-ayrac::before, .gr-ayrac::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--gr-line-soft);
}
.gr-ayrac span {
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gr-help);       /* 7.58:1 */
}
/* İki sütuna geçince ayracı border-left üstlenir */
@media (min-width: 1024px) {
    .gr-ayrac-tek { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   Alternatif giriş yolları listesi
   ══════════════════════════════════════════════════════════════ */

.gr-yollar { display: grid; grid-template-columns: 1fr; gap: 12px; }

/* ══════════════════════════════════════════════════════════════
   SMS ile giriş paneli
   DİKKAT: .gr-sms / .gr-sms-kod üzerinde `display` TANIMLANMAZ —
   JS `hidden` sınıfıyla açıp kapatıyor ve style.css bu dosyadan
   ÖNCE yüklendiği için eşit özgüllükte `.gr-sms` kazanır, panel
   kapanmaz. Görünür durum `:not(.hidden)` ile yazılır.
   ══════════════════════════════════════════════════════════════ */

.gr-sms:not(.hidden) {
    display: block;
    margin-top: 14px;
    padding: 16px;
    border-radius: 16px;
    background: var(--gr-yuzey);
    border: 1.5px solid var(--gr-line-panel);
}
.gr-sms-kod:not(.hidden) { display: grid; gap: 10px; margin-top: 12px; }

.gr-sms .gr-alan + .gr-btn-ana-kucuk { margin-top: 14px; }
.gr-sms #smsGirisKod { letter-spacing: .3em; font-variant-numeric: tabular-nums; }
/* Harf aralığı yalnız GİRİLEN kod için; placeholder "6  h a n e l i  k o d"
   diye dağılmasın (ölçüldü, 375px'te okunaksızdı). */
.gr-sms #smsGirisKod::placeholder { letter-spacing: normal; }

.gr-sms-alt { display: flex; justify-content: flex-end; }
.gr-tekrar-btn {
    min-height: 44px;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    font: inherit;
    font-size: .875rem;
    font-weight: 700;
    color: var(--gr-brand);
    cursor: pointer;
}
.gr-tekrar-btn:hover { color: var(--gr-brand-dark); background: var(--gr-brand-tint); text-decoration: underline; }
.gr-tekrar-btn:disabled { color: var(--gr-help); background: transparent; cursor: not-allowed; text-decoration: none; }

/* Durum mesajı — JS className'i tamamen yeniden yazar (js sözleşmesi:
   'gr-sms-mesaj' + ' gr-sms-hata' | ' gr-sms-basari'). Renk tek başına
   taşıyıcı olmasın diye her duruma ::before ikonu eklenir (1.4.1). */
.gr-sms-mesaj {
    margin: 12px 0 0;
    min-width: 0;
    font-size: .875rem;
    line-height: 1.5;
    font-weight: 600;
    color: var(--gr-help);
    overflow-wrap: anywhere;
}
.gr-sms-mesaj:empty { display: none; }
.gr-sms-mesaj:not(:empty) { display: flex; align-items: flex-start; gap: 8px; }
.gr-sms-mesaj: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");
}
.gr-sms-hata { color: var(--gr-err); }
.gr-sms-hata: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.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");
}
.gr-sms-basari { color: var(--gr-ok); }
.gr-sms-basari: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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.8 10.5V12a10 10 0 1 1-5.9-9.1'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E");
}

/* ══════════════════════════════════════════════════════════════
   Alt bilgi
   ══════════════════════════════════════════════════════════════ */

.gr-alt {
    margin: 24px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--gr-line-soft);
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--gr-body);
}
.gr-alt a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
    font-weight: 700;
    color: var(--gr-brand);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.gr-alt a:hover { color: var(--gr-brand-dark); }

.gr-telif { margin: 26px 0 0; text-align: center; font-size: .75rem; line-height: 1.6; color: var(--gr-help); }

/* ══════════════════════════════════════════════════════════════
   Askıya alınmış hesap ekranı — kart değil, tam genişlik bölge
   ══════════════════════════════════════════════════════════════ */

.gr-kisit-ust {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 24px;
    margin-bottom: 26px;
    border-bottom: 2px solid var(--gr-err-line);
}
.gr-kisit-ikon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px; height: 52px;
    border-radius: 16px;
    background: var(--gr-err-bg);
    border: 1.5px solid var(--gr-err-line);
    color: var(--gr-err);
}
.gr-kisit-ikon svg { width: 26px; height: 26px; }
.gr-kisit-baslik { min-width: 0; }
.gr-kisit-baslik .gr-h1 { color: var(--gr-err); }

.gr-kisit-mesaj {
    margin: 0 0 20px;
    font-size: 1.0625rem;
    line-height: 1.65;
    font-weight: 600;
    color: var(--gr-body);
    max-width: 62ch;
    overflow-wrap: anywhere;
}

.gr-kisit-liste { margin: 0; padding: 0; list-style: none; }
.gr-kisit-liste li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--gr-body);
    border-bottom: 1px solid var(--gr-line-soft);
}
.gr-kisit-liste li:last-child { border-bottom: 0; }
.gr-kisit-liste svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 3px; color: var(--gr-help); }
.gr-kisit-liste b { color: var(--gr-ink); font-weight: 700; }
.gr-kisit-liste .gr-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 700;
    color: var(--gr-ink);
    overflow-wrap: anywhere;
}

.gr-kisit-aksiyon { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.gr-kisit-aksiyon .gr-btn { width: auto; min-width: 220px; flex: 1 1 220px; }

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

.gr a:focus-visible,
.gr button:focus-visible,
.gr input:focus-visible,
.gr [tabindex]:focus-visible {
    outline: 3px solid var(--gr-brand-dark);   /* 10.5:1 */
    outline-offset: 2px;
    border-radius: 10px;
}
/* Alan içindeki input odağını .gr-field halkası taşır — çift halka olmasın */
.gr .gr-field .gr-input:focus-visible { outline: none; }
.gr .gr-cb:focus-visible { outline-offset: 3px; border-radius: 8px; }

/* ══════════════════════════════════════════════════════════════
   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).
   ══════════════════════════════════════════════════════════════ */

@keyframes grAutoFillStart { from {} to {} }
#girisFormu input:-webkit-autofill { animation-name: grAutoFillStart; animation-duration: .001s; }

#girisFormu input:-webkit-autofill,
#girisFormu input:-webkit-autofill:hover,
#girisFormu input:-webkit-autofill:focus,
#girisFormu 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;
}
#girisFormu input:autofill,
#girisFormu input:autofill:hover,
#girisFormu 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 (1,2,1) → (1,0,1)'i yener */
#girisFormu .gr-field.has-error input:-webkit-autofill,
#girisFormu .gr-field.has-error input:-webkit-autofill:hover,
#girisFormu .gr-field.has-error input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #fef2f2 inset;
    box-shadow: 0 0 0 1000px #fef2f2 inset;
}
#girisFormu .gr-field.has-error input:autofill,
#girisFormu .gr-field.has-error input:autofill:hover,
#girisFormu .gr-field.has-error input:autofill:focus {
    box-shadow: 0 0 0 1000px #fef2f2 inset;
}
/* SMS paneli tonlu zeminde: autofill beyaz değil panel rengine boyansın */
#girisFormu .gr-sms input:-webkit-autofill,
#girisFormu .gr-sms input:-webkit-autofill:hover,
#girisFormu .gr-sms input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
    box-shadow: 0 0 0 1000px #ffffff inset;
}

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

.gr-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 büyütmede yatay kaydırma olmasın */
.gr, .gr * { min-width: 0; }
.gr img, .gr svg { max-width: 100%; }

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

@media (forced-colors: active) {
    .gr-field { border: 2px solid ButtonBorder; }
    .gr-field:focus-within { outline: 3px solid Highlight; outline-offset: 2px; }
    .gr-btn-ana, .gr-btn-ana-kucuk { border: 2px solid ButtonBorder; }
    .gr-sms:not(.hidden) { border: 2px solid ButtonBorder; }
    .gr-cb { border: 2px solid ButtonBorder; }
}