/* ═══════════════════════════════════════════════════════════════
   giris.css — giriş kapıları (yönetici · üye · ilk kurulum)

   NEDEN AYRI DOSYA: bu stiller ~185 satır boyunca
   `templates/kimlik/_giris_kabuk.html` içinde bir <style> bloğundaydı.
   Üç sorun çıkarıyordu:

     1. Her istekte HTML gövdesiyle birlikte iniyordu — app.css
        önbelleğe alınırken bu alınmıyordu.
     2. Blok `_belge.html`'de app.css'ten SONRA basıldığı için içindeki
        `:root{...}` GLOBAL token'ları eziyordu. Bir sayfa bileşeni
        global kapsama yazıyordu.
     3. Aynı dört token ÜÇ KEZ kopyalanmıştı (açık · cihaz-koyu ·
        elle-koyu); son iki blok birebir aynıydı.

   Bu dosyada:
     · Yerel token'lar `.giris-sahne` KAPSAMINDA — global ezme yok.
     · Doğrudan hex YOK. Zemin `var(--zemin)`, hale altın aksanın
       alfasından (gölgelerle aynı muamele).
     · Sınıf adları `giris-` önekli. Önce `.alan` `.hata` `.basarili`
       `.gelistirme` gibi GENEL adlardı; app.css'te zaten `.alan-izgara`
       ve `.alan-grafik` var, bu adlar oraya taşınsa çakışacaklardı.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Sahne ────────────────────────────────────────────────────
   İki katman: token'dan gelen düz zemin → yumuşak altın ışık havuzu.
   Zemin artık kendi gradyanını TAŞIMIYOR: `var(--zemin)` tema
   değişince kendiliğinden dönüyor, ayrıca üç yerde tekrarlanan
   hex listesi ortadan kalkıyor. */
.giris-sahne{
  /* Yerel token'lar — GLOBAL DEĞİL, bu kapsamda. */
  --giris-hale:rgba(201,164,91,.16);
  --giris-taban:rgba(201,164,91,.05);
  --giris-doku:.028;

  min-height:100vh;
  display:grid;place-items:center;
  padding:32px 20px;
  position:relative;overflow:hidden;
  background:var(--zemin);
}

/* Işık havuzu — kartın nereye oturduğunu söyler, kendisi görünmez */
.giris-sahne::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(52% 38% at 50% 26%, var(--giris-hale) 0%, transparent 72%),
    radial-gradient(90% 60% at 50% 100%, var(--giris-taban) 0%, transparent 70%);
}

/* Doku — data: URI SVG gürültüsü, ~%2,8. Tek başına görünmüyor ama
   zemini "dijital düzlük"ten çıkarıyor. Dış istek yok. */
.giris-sahne::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  opacity:var(--giris-doku);
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/>\
</filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}

/* Koyu temada hale kısılır — açık kartın üstünde okunan altın,
   koyu ekranda kirletiyor. İki seçici, AYNI üç bildirim. */
@media (prefers-color-scheme:dark){
  :root:not([data-tema="acik"]) .giris-sahne{
    --giris-hale:rgba(201,164,91,.085);
    --giris-taban:rgba(201,164,91,.03);
    --giris-doku:.020;
  }
}
:root[data-tema="koyu"] .giris-sahne{
  --giris-hale:rgba(201,164,91,.085);
  --giris-taban:rgba(201,164,91,.03);
  --giris-doku:.020;
}

.giris-kart{position:relative;width:100%;max-width:396px;}

/* ─── Marka ─────────────────────────────────────────────────── */
.giris-marka{
  display:flex;flex-direction:column;align-items:center;gap:13px;
  color:var(--metin);text-decoration:none;margin-bottom:28px;
}
.giris-marka .isaret{
  position:relative;display:grid;place-items:center;
  width:56px;height:56px;border-radius:50%;
}
.giris-marka .isaret::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle, var(--giris-hale) 0%, transparent 68%);
}
.giris-marka svg{position:relative;width:38px;height:38px;color:var(--marka-isaret);}
.giris-marka .ad{
  font-family:var(--font-baslik);font-size:22px;line-height:1;
  letter-spacing:-.005em;
}
.giris-marka .mikro{
  font-size:9.5px;font-weight:600;letter-spacing:1.9px;
  text-transform:uppercase;color:var(--ikincil);
}

/* ─── Kart ──────────────────────────────────────────────────────
   `role="dialog"` taşıyor: ekranda tek iş var ve o iş bu kartta.
   Üstünde kenarlara doğru sönen ince altın çizgi — kartın "ışığı
   yakaladığı kenar" hissi buradan. */
.giris-kutu{
  position:relative;
  background:var(--kart);background-image:var(--kart-gradyan);
  border:1px solid var(--kenar);border-radius:var(--r-kart);
  border-bottom-color:var(--kutucuk-kenar);
  box-shadow:var(--ust-isik), var(--kat-3);
  padding:32px 30px 30px;
}
.giris-kutu::before{
  content:"";position:absolute;left:14%;right:14%;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--aksan),transparent);
  opacity:.5;
}
.giris-kutu h1{font-size:25px;line-height:1.18;margin:0 0 8px;letter-spacing:-.005em;}
.giris-aciklama{
  color:var(--ikincil);font-size:13px;line-height:1.62;margin:0 0 24px;
}

/* ─── Alanlar — YÜZEYE GÖMÜLÜ ───────────────────────────────────
   Kart yükselir, alan çöker. Derinlik algısı gölgeyi büyütmekten
   değil bu zıtlıktan geliyor. */
.giris-alan{display:block;margin-bottom:17px;}
.giris-alan > span{
  display:block;font-size:10px;font-weight:600;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--ikincil);margin-bottom:8px;
}
.giris-alan input{
  width:100%;font-family:var(--font-govde);font-size:14.5px;
  padding:13px 14px;
  background:var(--kum);color:var(--metin);
  border:1px solid var(--kenar);border-radius:var(--r-kucuk);
  box-shadow:var(--ic-golge);
}
/* Yer tutucu YAZIDIR: çizgi token'ı (--ikincil-cizgi) yazı olarak
   eşiği geçmiyor, --ikincil kullanılıyor. */
.giris-alan input::placeholder{color:var(--ikincil);opacity:1;}
.giris-alan input:hover{border-color:var(--kutucuk-kenar);}
.giris-alan input:focus-visible{
  outline:none;border-color:var(--aksan-cizgi);
  background:var(--kart);
  box-shadow:var(--parilti-aksan);
}
/* Odaktaki alanın etiketi de renk alsın — göz nereye baktığını bilsin */
.giris-alan:focus-within > span{color:var(--aksan-metin);}

.giris-kutu .btn{
  width:100%;text-align:center;padding:13px;font-size:14px;
  margin-top:6px;letter-spacing:.2px;
}

/* ─── Durum kutuları — ikisi de NOKTA taşır ─────────────────────
   Renk körlüğünde hata ile başarı ayrılsın: hata DOLU nokta,
   başarı HALKA. Ayrım yalnızca renge bırakılmıyor. */
.giris-hata,.giris-basarili{
  display:flex;align-items:flex-start;gap:11px;
  border-radius:var(--r-kucuk);padding:12px 14px;
  font-size:13px;line-height:1.55;margin:0 0 19px;
  box-shadow:var(--kat-1);
}
.giris-hata{background:var(--pil-uyari-bg);border:1px solid var(--uyari-kenar);
            color:var(--pil-uyari-fg);}
.giris-hata::before{content:"";width:7px;height:7px;border-radius:50%;flex:none;
                    margin-top:6px;background:var(--uyari-dolgu);}
.giris-basarili{background:var(--pil-olumlu-bg);border:1px solid var(--kenar);
                color:var(--pil-olumlu-fg);}
.giris-basarili::before{content:"";width:7px;height:7px;border-radius:50%;flex:none;
                        margin-top:6px;border:1.5px solid var(--olumlu-dolgu);}

.giris-gelistirme{
  margin-top:17px;padding:14px;
  border:1px dashed var(--kutucuk-kenar);border-radius:var(--r-kucuk);
  background:var(--kum);
  font-size:12px;line-height:1.6;color:var(--ikincil);word-break:break-all;
}

.giris-dip{text-align:center;margin:22px 0 0;font-size:12.5px;color:var(--ikincil);}
.giris-dip a{color:var(--aksan-metin);}
.giris-tema{display:flex;justify-content:center;margin-top:24px;}
.giris-tema .tema-secim{box-shadow:var(--kat-1);}

@media (prefers-reduced-motion:no-preference){
  /* TEK animasyon. Önce `.giris-marka` da aynı keyframe'i çalıştırıyordu
     ve `.giris-kart`ın ÇOCUĞUYDU: iki dönüşüm üst üste biniyor, opaklık
     iki kez çarpılıyordu (0×0) ve marka karttan farklı hızda kayıyordu. */
  .giris-kart{animation:giris-gel .55s cubic-bezier(.22,.68,.28,1) both;}
  @keyframes giris-gel{from{opacity:0;transform:translateY(12px) scale(.982);}}

  .giris-alan input{transition:border-color .16s ease,box-shadow .2s ease,
                               background-color .16s ease;}
  .giris-alan > span{transition:color .16s ease;}
  .giris-kutu .btn{transition:box-shadow .2s ease,transform .12s ease;}
  .giris-kutu .btn:active{transform:translateY(1px);}
}

@media (max-width:420px){
  .giris-kutu{padding:26px 21px 24px;}
  .giris-kutu h1{font-size:22px;}
}