/* =====================================================================
   BLISS ADMIN OPS · static/css/pages/login.css
   `templates/login.html` — oturum ÖNCESİ giriş sayfası.

   NEDEN AYRI DOSYA (S2.1): 37 satır inline <style> + üç `style="..."`
   attribute'u vardı. Sınırın (ui.md §6: 40 satır) hemen altındaydı ama inline
   stil ne cache'lenir ne sürüm damgası alır; giriş sayfası oturum düşen her
   kullanıcıya yeniden iniyor.

   NEDEN ŞABLON BAĞIMSIZ KALDI: `bls_base.html` GENİŞLETİLEMEZ. Ölçüldü
   (S2.1): `bls_base.html:148` `current_user.name[0]` okuyor, giriş yapmamış
   kullanıcıda `current_user` AnonymousUserMixin'dir ve `name` yoktur —
   Jinja UndefinedError atar, giriş sayfası 500 döner ve **kimse siteye
   giremez**. Nav zaten rol koşullu; oturumu olmayan kullanıcıda gösterecek
   tek bir bağlantısı yok. Yani bağımsızlık bir borç değil, sayfanın doğru
   biçimi; buna karşılık Buzul'un tamamına uyuyor (token + bileşen + bu dosya,
   üçü de asset_v damgalı) ve tek satır inline JS taşımıyor.

   YÜKLEME SIRASI ŞART (ui.md §1):
     bls-tokens.css → bls-components.css → bu dosya
   ===================================================================== */

html, body { margin: 0; }

/* Solda marka, sağda giriş. 820px altında hero düşer (aşağıda). */
.login-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
}

.login-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--s-6);
    padding: var(--s-12);
    border-right: var(--bw) solid var(--bls-ink);
    overflow: hidden;
    background:
        radial-gradient(circle at 30% 25%, var(--bls-powder) 0%, transparent 55%),
        radial-gradient(circle at 75% 80%, var(--bls-accent-soft) 0%, transparent 50%),
        var(--bls-bg);
}

/* Piksel ızgara: `.bls-root`unki 9px, hero'nunki 12px — marka yıkamasının
   üstünde daha iri okunuyor. Ayrı katman çünkü altındaki üç gradyanla aynı
   `background` kısayolunda yaşayamaz. */
.login-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(var(--bls-bg-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--bls-bg-grid) 1px, transparent 1px);
    background-size: 12px 12px;
}

/* `position: relative` üçlüsü ::before ızgarasının ÜSTÜNDE kalmak için. */
.login-logo {
    position: relative;
    width: 180px;
    image-rendering: pixelated;
    filter: drop-shadow(4px 4px 0 rgba(20, 56, 78, .14));
}

.login-hero .brand-block { position: relative; text-align: center; }
.login-hero .bls-wordmark { font-size: 22px; color: var(--bls-ink); }
.login-hero .bls-eyebrow { font-size: 9px; margin-top: var(--s-2); }

.login-hero .tag {
    position: relative;
    max-width: 280px;
    text-align: center;
    color: var(--bls-ink-2);
}

.login-form-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s-12);
    background: var(--bls-panel);
}

.login-form {
    width: 100%;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
}

.login-lead { margin: 6px 0 0; }

/* GSI düğmesi iframe olarak geliyor: yükleninceye kadar yer tutulmazsa
   form yükleme bitince zıplıyor. */
.login-google {
    display: flex;
    justify-content: center;
    min-height: 44px;
}

.login-sep {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    color: var(--bls-ink-3);
    font-size: var(--caption-size);
    font-weight: 700;
}

.login-sep hr {
    flex: 1;
    border: 0;
    border-top: var(--bw-thin) solid var(--bls-line);
}

/* Hata kutusu: JS `display: flex` yapana kadar gizli. `.bls-toast` kullanılmadı
   (göç tarifi §7) — bu mesaj GEÇİCİ değil, kullanıcı yeniden denemeden
   kalmalı ve formun içinde durmalı. */
.login-err {
    display: none;
    align-items: center;
    gap: var(--s-2);
    background: var(--bls-err-bg);
    border: var(--bw) solid var(--bls-err);
    color: var(--bls-err);
    padding: 11px 13px;
    font-size: var(--body-sm-size);
    font-weight: 600;
}

/* Sunucudan gelen bildirim JS'siz açılmalı: `flash()` mesajı sayfa ilk
   boyandığında zaten oradadır, `showError`ı beklerse hiç görünmez. */
.login-err.is-open {
    display: flex;
}

/* Oturum bildirimi (`warning`) hata değil: kırmızı kutu "giriş başarısız"
   sanılıyordu. Rozet varyantıyla aynı token çifti (`bls-components.css` §badge). */
.login-err.warn {
    background: var(--bls-warn-bg);
    border-color: var(--bls-warn);
    color: var(--bls-warn);
}

.login-foot {
    font-size: var(--caption-size);
    color: var(--bls-ink-3);
    text-align: center;
}

/* Tek kırılım burada 820px — ui.md §8'in 880'i değil: kırılımı belirleyen sol
   nav değil, iki sütuna sığmayan 340px'lik form + 280px'lik hero metni. */
@media (max-width: 820px) {
    .login-grid { grid-template-columns: 1fr; }
    .login-hero { display: none; }
}