/* templates/login.html
   Faz 3 (2026-09-06): sablon icindeki <style> blogundan cikarildi.
   Belge sirasi KORUNDU — <link> tam olarak <style>'in bulundugu yerde.
   Surum ?v= app.py: sayfa_css() tarafindan dosya mtime+boyutundan uretilir. */
  /* ── Giriş ekranı (2026-08-30 yeniden tasarım) ──────────────────────────
     Öncesi: düz koyu kutu, tek başlık, iki alan. Yeni ekran uygulamanın KENDİ
     görsel dilini (launchpad "Crystal" katmanı + uic-panel spot kartları)
     giriş anına taşıyor: derin lacivert zemin + iki yumuşak mor/cyan yıkama,
     üstte gerçek uygulama ikonu, kart TEK katman (kart içinde kart YOK).

     Kurallar (docs/AI_RULES.md + impeccable yasakları):
       • Degrade METİN YOK (`background-clip:text` kullanılmadı).
       • Yan-şerit (kalın border-left) YOK.
       • Kart yarıçapı 20px (32px+ "aşırı yuvarlak" yasağının altında).
       • 1px kenarlık + geniş yumuşak gölge AYNI ANDA dekorasyon olarak
         kullanılmıyor: kenarlık ince, gölge dar/tanımlı.
       • Yıkamalar `pointer-events:none` ve KENDİ kırpılan katmanında —
         sayfada yatay taşma yaratmaz (kasa.css'te bire bir yaşanmış tuzak).
       • `prefers-reduced-motion` altında tüm hareket kapanır.
     Mobil/APK: `viewport-fit=cover` + `env(safe-area-inset-*)` — durum
     çubuğu/gesture çubuğu altında içerik kalmaz.

     RENKLER BİLİNÇLİ OLARAK SABİT (tema token'ı KULLANILMIYOR): bu sayfa
     oturum AÇILMADAN gösterilir, `base.html`'in tema bootstrap script'i
     burada ÇALIŞMAZ ve `style.css`'in `:root`'u AÇIK tema değerlerini taşır
     (`--text: #1a1030`, ölçüldü 2026-08-30). Zemin koyuya sabitlenmişken
     `var(--text)` kullanmak metni GÖRÜNMEZ yapıyordu — ekran görüntüsüyle
     yakalandı. Bu ekran koyu görünüme KASITLI olarak bağlıdır. */

  html, body { height: 100%; }
  body {
    margin: 0;
    display: flex; align-items: center; justify-content: center;
    padding:
      calc(1.5rem + env(safe-area-inset-top, 0px))
      calc(1.25rem + env(safe-area-inset-right, 0px))
      calc(1.5rem + env(safe-area-inset-bottom, 0px))
      calc(1.25rem + env(safe-area-inset-left, 0px));
    background: #0a0c14;
    position: relative;
    overflow-x: hidden;
  }
  /* Dekoratif zemin — kendi kutusunda (inset:0 + overflow:hidden), negatif
     ofsetli daireler DIŞARI taşmaz. */
  .lg-decor {
    position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
  }
  .lg-decor::before, .lg-decor::after {
    content: ''; position: absolute; border-radius: 50%; filter: blur(70px);
  }
  .lg-decor::before {
    width: 520px; height: 520px; top: -180px; left: -140px;
    background: rgba(139, 92, 246, .30);
  }
  .lg-decor::after {
    width: 460px; height: 460px; right: -160px; bottom: -180px;
    background: rgba(56, 189, 248, .20);
  }

  .lg-card {
    position: relative; z-index: 1;
    width: 100%; max-width: 400px;
    background: rgba(22, 22, 27, .92);
    border: 1px solid rgba(220, 220, 240, .10);
    border-radius: 20px;
    padding: 2.25rem 1.9rem 2rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .55);
    animation: lg-in .5s cubic-bezier(.16, 1, .3, 1) both;
  }
  @keyframes lg-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

  .lg-mark {
    width: 60px; height: 60px; border-radius: 17px; display: block;
    margin: 0 0 1.15rem;
    box-shadow: 0 4px 14px rgba(139, 92, 246, .35);
  }
  .lg-title {
    margin: 0 0 .3rem; font-size: 1.55rem; font-weight: 700;
    letter-spacing: -.01em; color: #f2f0f8;
  }
  .lg-sub { margin: 0 0 1.75rem; font-size: .86rem; color: #a5a1b8; }

  .lg-field { margin-bottom: 1rem; }
  .lg-field label {
    display: block; margin-bottom: .38rem;
    font-size: .74rem; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: #a5a1b8;
  }
  .lg-field input {
    width: 100%; box-sizing: border-box;
    padding: .8rem .9rem;
    background: rgba(10, 12, 20, .75);
    border: 1px solid rgba(220, 220, 240, .12);
    border-radius: 12px;
    color: #f2f0f8; font-size: .95rem;
    transition: border-color .18s ease, box-shadow .18s ease;
  }
  .lg-field input::placeholder { color: #8a85a0; }
  .lg-field input:focus {
    outline: none;
    border-color: #a78bfa;
    box-shadow: 0 0 0 3px rgba(167, 139, 250, .22);
  }

  .lg-submit {
    width: 100%; margin-top: .85rem; padding: .82rem 1rem;
    border: 0; border-radius: 12px; cursor: pointer;
    background: #8b5cf6; color: #fff;
    font-size: .95rem; font-weight: 600; letter-spacing: .01em;
    transition: background .18s ease, transform .18s cubic-bezier(.16, 1, .3, 1);
  }
  .lg-submit:hover { background: #a78bfa; }
  .lg-submit:active { transform: translateY(1px); }
  .lg-submit:focus-visible { outline: 2px solid #a78bfa; outline-offset: 3px; }

  .lg-err {
    background: rgba(248, 113, 113, .12);
    border: 1px solid rgba(248, 113, 113, .30);
    color: #fca5a5;
    padding: .65rem .8rem; border-radius: 10px;
    font-size: .84rem; margin-bottom: 1.1rem;
  }
  .lg-foot {
    margin: 1.4rem 0 0; text-align: center;
    font-size: .72rem; color: #8a85a0;
  }

  @media (max-width: 420px) {
    .lg-card { padding: 1.9rem 1.35rem 1.65rem; border-radius: 18px; }
    .lg-title { font-size: 1.4rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    .lg-card { animation: none; }
    .lg-field input, .lg-submit { transition: none; }
    .lg-submit:active { transform: none; }
  }