/*
 * Kimlik (giris / yeni kullanici) ekranlarinin gorunumu.
 *
 * Neden ayri bir dosya: bu sayfalar Blazor DEGIL, Identity'nin Razor Pages
 * ekranlari — MudBlazor tema saglayicisi orada calismaz. Panel koyu temada
 * acilirken (MainLayout: _isDarkMode = true) giris ekrani beyaz Bootstrap
 * iskeletiyle geliyordu; ayni urunun iki ayri yuzu gibi gorunuyordu
 * (Murat 20.08.2026).
 *
 * Degerler MudBlazor'un KOYU paletinden alindi ki iki taraf birebir tutsun:
 *   arka plan #32333d, yuzey #373740, ust cubuk #27272f, birincil #594AE2,
 *   metin rgba(255,255,255,.70).
 */

:root {
    --ky-bg: #32333d;
    --ky-surface: #373740;
    --ky-appbar: #27272f;
    --ky-primary: #594ae2;
    --ky-primary-hover: #4c3fd0;
    --ky-text: rgba(255, 255, 255, .70);
    --ky-text-strong: rgba(255, 255, 255, .87);
    --ky-line: rgba(255, 255, 255, .12);
    --ky-error: #f64e62;
}

html, body {
    background-color: var(--ky-bg);
    color: var(--ky-text);
    font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
    min-height: 100%;
}

/* Ust cubuk: panelin MudAppBar'iyle ayni yukseklik ve renk. */
.ky-appbar {
    background-color: var(--ky-appbar);
    color: var(--ky-text-strong);
    height: 64px;
    display: flex;
    align-items: center;
    padding: 0 24px;
    box-shadow: 0 2px 4px -1px rgba(0,0,0,.2);
}

.ky-appbar .ky-brand {
    color: var(--ky-text-strong);
    font-size: 1.25rem;
    font-weight: 500;
    text-decoration: none;
}

/* Icerik: ortalanmis tek kart. Identity ekranlarinin hepsi tek sutunluk
   formlar; Bootstrap'in 12'lik izgarasina ihtiyaclari yok. */
.ky-kabuk {
    display: flex;
    justify-content: center;
    /* Dikey ortalama: kart tepede asili durmasin — appbar (64px) dusulmus
       gorunur alanda ortalanir (Murat 21.08.2026). */
    align-items: center;
    min-height: calc(100vh - 64px);
    padding: 48px 16px;
    box-sizing: border-box;
}

.ky-kart {
    background-color: var(--ky-surface);
    border-radius: 8px;
    box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14);
    padding: 32px;
    width: 100%;
    max-width: 420px;
}

.ky-kart h1, .ky-kart h2 {
    color: var(--ky-text-strong);
    font-size: 1.5rem;
    font-weight: 400;
    margin: 0 0 24px;
}

.ky-kart hr { border-color: var(--ky-line); }

.ky-alan { margin-bottom: 20px; }

.ky-alan label {
    display: block;
    margin-bottom: 6px;
    font-size: .875rem;
    color: var(--ky-text);
}

.ky-kart input[type="text"],
.ky-kart input[type="email"],
.ky-kart input[type="password"] {
    width: 100%;
    /* border-box SART: width:100% + ic dolgu, content-box'ta kutuyu SAGA
       tasiriyordu — solda kartin 32px boslugu dururken sagda bosluk
       kalmiyordu (Murat 21.08.2026). */
    box-sizing: border-box;
    padding: 12px 14px;
    background-color: rgba(255,255,255,.05);
    border: 1px solid var(--ky-line);
    border-radius: 4px;
    color: var(--ky-text-strong);
    font-size: 1rem;
    outline: none;
    transition: border-color .15s ease;
}

.ky-kart input:focus {
    border-color: var(--ky-primary);
}

.ky-kart input::placeholder { color: rgba(255,255,255,.35); }

/* Beni hatirla gibi onay kutulari. */
.ky-onay {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    font-size: .875rem;
}

.ky-onay input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--ky-primary);
}

.ky-dugme {
    width: 100%;
    padding: 12px 16px;
    background-color: var(--ky-primary);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: .9375rem;
    font-weight: 500;
    letter-spacing: .02em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .15s ease;
}

.ky-dugme:hover { background-color: var(--ky-primary-hover); }

/* Dogrulama iletileri — Identity bunlari text-danger ile isaretliyor. */
.text-danger, .ky-hata {
    color: var(--ky-error);
    font-size: .8125rem;
}

.validation-summary-errors ul {
    margin: 0 0 16px;
    padding-left: 18px;
    color: var(--ky-error);
}

.ky-baglantilar {
    margin-top: 20px;
    font-size: .875rem;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ky-baglantilar a { color: var(--ky-primary); text-decoration: none; }
.ky-baglantilar a:hover { text-decoration: underline; }