/* ============================================================================
   Giriş / kayıt kabuğu. site.css'ten SONRA yüklenir; kendi paleti yoktur.

   Bu dosya yalnızca Pages/Giris/_GirisKatmani.cshtml altındaki ekranlarda
   yüklenir. Renk, punto, gölge ve süre değerlerinin tamamı site.css'teki
   --yz-* tokenlarından gelir; burada yeni token TANIMLANMAZ. İki ayrı palete
   düşmemek için tek kaynak orasıdır.
   ========================================================================= */

body.giris { background: var(--yz-zemin-tanitim); color: var(--yz-metin); margin: 0; }

.giris-kabuk {
    min-height: 100vh; min-height: 100dvh;
    display: grid; grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 64rem) {
    .giris-kabuk { grid-template-columns: minmax(22rem, 27rem) minmax(0, 1fr); }
}
@media (min-width: 90rem) {
    .giris-kabuk { grid-template-columns: minmax(24rem, 30rem) minmax(0, 1fr); }
}

/* ── Sol: marka paneli (.yz-kabuk sınıfını da taşır) ──────────────────────────
   Koyu otorite yüzeyinin boyası .yz-kabuk adıyla tanitim.css'te duruyor ama
   giriş katmanı tanitim.css'i YÜKLEMİYOR — orada üç stil dosyası var:
   bootstrap, site.css, giris.css. Panel boyasız kalmasın diye aynı yüzey
   burada da çiziliyor; değerler tanitim.css'teki .yz-kabuk ile birebir aynı
   tokenlardan okunuyor, ikisi ayrışmaz. Aside yine .yz-kabuk sınıfını taşır:
   site.css'teki `.yz-kabuk .marka-ad` ve odak kuralları ona bakıyor.
   position: relative — ızgara dokusunu çizen ::before'un dayanağı. */
.giris-yan {
    display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
    padding: clamp(1.25rem, 3vw, 2.5rem);
    overflow: hidden;
    position: relative; isolation: isolate;
    background: var(--yz-kabuk-ust);
    background-image:
        radial-gradient(1100px 460px at 15% -20%, var(--yz-kabuk-hale), transparent 60%),
        linear-gradient(180deg, var(--yz-kabuk-ust) 0%, var(--yz-kabuk-alt) 100%);
    color: var(--yz-kabuk-metin);
}
@media (min-width: 64rem) { .giris-yan { position: sticky; top: 0; height: 100vh; } }
.giris-yan::before {                      /* ızgara dokusu — 0 bayt, 0 hareket */
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        linear-gradient(var(--yz-kabuk-izgara) 1px, transparent 1px),
        linear-gradient(90deg, var(--yz-kabuk-izgara) 1px, transparent 1px);
    background-size: 32px 32px;
    -webkit-mask-image: radial-gradient(ellipse 90% 75% at 50% 0%, #000 30%, transparent 80%);
            mask-image: radial-gradient(ellipse 90% 75% at 50% 0%, #000 30%, transparent 80%);
}
/* Koyu bantta --yz-halka okunmuyor; bağlantı rengi 6.70 ile geçiyor. */
.giris-yan :focus-visible { outline-color: var(--yz-kabuk-baglanti); }

.giris-marka { border-bottom: 0; padding: 0; gap: .7rem; text-decoration: none; }
.giris-marka .marka-im { width: 36px; height: 36px; border-radius: 10px; font-size: .9rem; }
.giris-marka .marka-ad, .giris-marka .marka-alt { display: block; }

.giris-slogan {
    font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem);
    font-weight: 600; letter-spacing: -.02em; line-height: 1.25;
    color: #fff; max-width: 20ch; margin: 0 0 1.2rem; text-wrap: balance;
}
.giris-guvence { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.giris-guvence li {
    display: grid; grid-template-columns: 18px 1fr; gap: .6rem;
    font-size: var(--yz-yazi-govde); line-height: 1.5;
    color: var(--yz-kabuk-soluk);            /* haleli en açık noktada 5.90 ✓ */
}
.giris-guvence svg {
    width: 16px; height: 16px; margin-top: 3px; flex: 0 0 auto;
    fill: none; stroke: #34d399; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.giris-yan-alt {
    border-top: 1px solid var(--yz-kabuk-kenar); padding-top: 1rem; margin: 0;
    font-size: var(--yz-yazi-kucuk); color: var(--yz-kabuk-soluk);
}
.giris-yan-alt a { color: var(--yz-kabuk-baglanti); }

/* Dar ekran: panel yatay şeride döner. Marka ve İLK güvence kalır. */
@media (max-width: 63.99rem) {
    .giris-yan {
        flex-direction: row; align-items: center; justify-content: space-between;
        flex-wrap: wrap; gap: 1rem; padding: 1rem 1.25rem;
        height: auto;   /* position: relative kalır — ::before'un dayanağı */
    }
    .giris-slogan, .giris-yan-alt, .giris-guvence li:nth-child(n+2) { display: none; }
    .giris-guvence { margin: 0; }
}

/* ── Sağ: form alanı ─────────────────────────────────────────────────────── */
.giris-alan { display: grid; place-items: center; padding: clamp(1.5rem, 5vw, 4rem) 1.25rem; }
.giris-kutu { width: min(30rem, 100%); }
.giris-kutu-genis { width: min(34rem, 100%); }     /* Kayıt: 6 alan */

/* Kayıt sayfası kartını RenderBody içinde .giris-kutu-genis ile sarıyor, yani
   34rem'lik kutu 30rem'lik kabın içine düşüyor ve taşardı. Kap da genişler. */
.giris-kutu:has(.giris-kutu-genis) { width: min(34rem, 100%); }

.giris-kart {
    background: var(--yz-kart); border: 1px solid var(--yz-kenar);
    border-radius: var(--yz-r-buyuk);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    box-shadow: var(--yz-kat-3), var(--yz-parlak);
}
.giris-kart h1 {
    font-size: 1.375rem; font-weight: 600; letter-spacing: -.02em;
    line-height: 1.25; margin: 0 0 .35rem; text-wrap: balance;
}
.giris-aciklama {
    font-size: var(--yz-yazi-govde); color: var(--yz-metin-soluk);
    margin: 0 0 1.5rem; line-height: 1.55;
}

/* ── Adım göstergesi: parola → iki adım → doğrulayıcı kurulumu ─────────────
   Durum YALNIZ renkle anlatılmaz: metin var, ayrıca aria-current taşınır. */
.giris-adimlar {
    display: flex; align-items: center; gap: .5rem; margin-bottom: 1.1rem;
    font-size: var(--yz-yazi-mikro); font-weight: 600; letter-spacing: .08em;
    color: var(--yz-metin-soluk); flex-wrap: wrap;
}
.giris-adim { display: inline-flex; align-items: center; gap: .4rem; }
.giris-adim::before {
    content: ""; width: 9px; height: 9px; border-radius: 50%;
    background: var(--yz-kart); border: 2px solid var(--yz-kenar-kontrol);  /* 3.79 ✓ */
}
.giris-adim-etkin { color: var(--yz-metin); }
.giris-adim-etkin::before { background: var(--yz-ana); border-color: var(--yz-ana); box-shadow: 0 0 0 3px var(--yz-ana-soluk); }
.giris-adim-bitti::before { background: var(--yz-basari); border-color: var(--yz-basari); }
.giris-adim-ayrac { flex: 0 0 1.25rem; height: 1px; background: var(--yz-kenar-kontrol); }

.giris-alt-not { margin-top: 1.1rem; font-size: var(--yz-yazi-kucuk); color: var(--yz-metin-soluk); text-align: center; }
.giris-kutu > .giris-dipnot {
    margin: 1rem 0 0; font-size: var(--yz-yazi-kucuk); color: var(--yz-metin-soluk); text-align: center;
}

/* ── Ortak kontrol stilleri ──────────────────────────────────────────────── */

.giris-kart .form-label { font-size: var(--yz-yazi-kucuk); font-weight: 600; margin-bottom: .3rem; }
.giris-kart .form-control,
.giris-kart .form-select {
    background: var(--yz-kart); color: var(--yz-metin);
    border: 1px solid var(--yz-kenar-kontrol);      /* non-text 3:1 ✓ */
    border-radius: var(--yz-r-kucuk);
    padding: .6rem .75rem; font-size: var(--yz-yazi-veri); min-height: 44px;
    transition: border-color var(--yz-sure-hizli) var(--yz-egri),
                box-shadow var(--yz-sure-hizli) var(--yz-egri);
}
.giris-kart .form-control:focus,
.giris-kart .form-select:focus {
    border-color: var(--yz-ana);
    box-shadow: 0 0 0 3px var(--yz-ana-soluk);
    outline: none;                                   /* :focus-visible halkası ayrıca çiziliyor */
}
.giris-kart .form-text { font-size: var(--yz-yazi-kucuk); color: var(--yz-metin-soluk); margin-top: .3rem; }
.giris-kart .btn-primary {
    width: 100%; justify-content: center;
    min-height: 44px; font-size: 1rem; font-weight: 600; border-radius: var(--yz-r);
}
.giris-alanlar { display: grid; gap: 1rem; }

/* ── Hata durumu ─────────────────────────────────────────────────────────
   asp-validation-summary hata YOKKEN de <div>'i basıyor; bugün kullanıcı
   formu doldurmadan boş bir kırmızı şeritle karşılanıyor. */
.validation-summary-valid { display: none !important; }
.field-validation-valid   { display: none; }

.giris-hata-ozeti {
    border: 1px solid var(--yz-tehlike); border-left-width: 3px;
    background: var(--yz-tehlike-zemin); color: var(--yz-tehlike-metin);   /* 5.59 ✓ */
    border-radius: var(--yz-r-kucuk); padding: .8rem .9rem; margin-bottom: 1.1rem;
    font-size: var(--yz-yazi-govde);
}
.giris-hata-ozeti ul { margin: 0; padding-left: 1.1rem; }
.field-validation-error {
    display: block; margin-top: .35rem;
    font-size: var(--yz-yazi-kucuk); color: var(--yz-tehlike-metin);
}
.form-control.input-validation-error,
.form-select.input-validation-error,
.is-invalid { border-color: var(--yz-tehlike) !important; }
.form-control.input-validation-error:focus { box-shadow: 0 0 0 3px var(--yz-tehlike-zemin) !important; }

/* ── Bilgi / yönlendirme bloğu (hata DEĞİL) ─────────────────────────────── */
.giris-secim {
    display: flex; gap: .7rem; align-items: flex-start;
    background: var(--yz-bilgi-zemin); color: var(--yz-bilgi-metin);       /* 5.54 ✓ */
    border: 1px solid var(--yz-bilgi); border-left-width: 3px;
    border-radius: var(--yz-r-kucuk); padding: .8rem .9rem; margin-bottom: 1.1rem;
    font-size: var(--yz-yazi-govde);
}

/* ── Uyarı bloğu (kurtarma, kayıt kapalı) ───────────────────────────────── */
.giris-uyari {
    background: var(--yz-uyari-zemin); color: var(--yz-uyari-metin);       /* 6.46 ✓ */
    border: 1px solid var(--yz-uyari); border-left-width: 3px;
    border-radius: var(--yz-r-kucuk); padding: .85rem .9rem;
    font-size: var(--yz-yazi-govde); line-height: 1.55;
}
.giris-uyari strong { font-weight: 600; }
.giris-uyari a { color: inherit; text-decoration: underline; }

/* ── Parola alanı: göster düğmesi + CapsLock ────────────────────────────── */
.giris-parola { position: relative; }
.giris-parola .form-control { padding-right: 3.1rem; }
.giris-parola-goz {
    position: absolute; right: .25rem; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px;                       /* dokunma hedefi — 32px DEĞİL */
    display: grid; place-items: center;
    border: 0; background: none; border-radius: var(--yz-r-kucuk);
    color: var(--yz-metin-soluk); cursor: pointer;
    transition: color var(--yz-sure-hizli) var(--yz-egri),
                background-color var(--yz-sure-hizli) var(--yz-egri);
}
.giris-parola-goz:hover { color: var(--yz-metin); background: var(--yz-vurgu-zemin); }
.giris-parola-goz svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; }

/* Düğmenin durumu ekranda da görünsün: parola AÇIKKEN göz üstü çizilir.
   Ek JS gerekmiyor, giris.js zaten aria-pressed'i sürüyor; ikon tek nüsha kalır. */
.giris-parola-goz[aria-pressed="true"]::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 22px; height: 1.75px; border-radius: 2px; background: currentColor;
    transform: translate(-50%, -50%) rotate(-45deg);
}

.giris-capslock {
    display: none; margin-top: .35rem;
    font-size: var(--yz-yazi-kucuk); color: var(--yz-uyari-metin); font-weight: 600;
}
.giris-capslock-acik { display: block; }

/* ── Parola gücü — 12 karakter zorunluluğu görünür olsun ────────────────── */
.giris-guc { height: 4px; border-radius: 999px; background: var(--yz-kenar-koyu); overflow: hidden; margin-top: .45rem; }
.giris-guc > i { display: block; height: 100%; width: var(--guc, 0%); background: var(--yz-ana);
                 transition: width var(--yz-sure-orta) var(--yz-egri); }

/* ── TOTP ────────────────────────────────────────────────────────────────── */
.giris-anahtar {
    font-family: var(--yz-yazi-tanimlayici); font-size: 1rem; letter-spacing: .12em;
    background: var(--yz-vurgu-zemin); border: 1px dashed var(--yz-kenar-kontrol);
    border-radius: var(--yz-r-kucuk); padding: .8rem .85rem;
    overflow-wrap: anywhere; text-align: center; user-select: all;
}
.giris-kod {
    font-family: var(--yz-yazi-tanimlayici); font-size: 1.5rem;
    letter-spacing: .5em; text-indent: .5em; text-align: center;
    font-variant-numeric: tabular-nums; padding-block: .7rem;
}

/* ── Kayıt formu: tek yerde iki sütun (iki parola alanı) ─────────────────── */
@media (min-width: 40rem) {
    .giris-alanlar-kayit { grid-template-columns: 1fr 1fr; }
    .giris-alanlar-kayit > .tam { grid-column: 1 / -1; }
}
.giris-onay {
    background: var(--yz-vurgu-zemin); border: 1px solid var(--yz-kenar);
    border-radius: var(--yz-r-kucuk); padding: .9rem 1rem;
}
/* ★ 24×24 — WCAG 2.5.8 (Target Size, Minimum) alt sınırı.
   Bootstrap varsayılanı 14px ve ölçüldü (15.08.2026, 375px genişlik): tek
   başına kalan onay kutusu sınırın çok altındaydı. Etiket tıklanabilir olduğu
   için "etkin alan zaten büyük" denebilirdi ama bu KVKK onayıdır — kullanıcının
   isabetsiz dokunuşla işaretlemesi de, işaretleyememesi de kabul edilemez.
   Boyut büyürken hizayı bozmamak için üst boşluk yeniden ayarlandı. */
.giris-onay .form-check-input {
    width: 1.5rem;
    height: 1.5rem;
    margin-top: .05rem;
    border-color: var(--yz-kenar-kontrol);
}

/* Bootstrap etiketi 1.5em'lik girintiye göre konumluyor; kutu büyüyünce
   etiket kutunun üstüne biner. Girinti kutu genişliğiyle birlikte artar. */
.giris-onay .form-check { padding-left: 2.1rem; }
.giris-onay .form-check-input { margin-left: -2.1rem; }

.giris-onay .form-check-label { font-size: var(--yz-yazi-govde); line-height: 1.5; }

/* ── Kartını kendi basmayan sayfalar ─────────────────────────────────────
   TotpKur ve Yasak da bu kabuğu kullanıyor ama içerikleri eski katmanın
   .card sarmalına güveniyordu; şartname bu iki sayfaya .giris-kart eklemiyor.
   Kutunun içinde kart yoksa kart yüzeyini kutunun kendisi taşır — böylece
   içerik boş zeminde çıplak kalmaz. :has desteklenmeyen tarayıcıda kural hiç
   uygulanmaz; sonuç sade görünür, bozulmaz. */
.giris-kutu:not(:has(.giris-kart)) {
    background: var(--yz-kart); border: 1px solid var(--yz-kenar);
    border-radius: var(--yz-r-buyuk);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    box-shadow: var(--yz-kat-3), var(--yz-parlak);
}