/* ===========================================================================
   KİMLİK EKRANLARI — giriş ve kayıt
   ===========================================================================
   Bu dosya `views/login.ejs` içindeki <style> bloğundan çıkarıldı (2026-09-10).
   Neden: kayıt ekranı da AYNI kabuğu kullanıyor; stil iki dosyada kopyalansaydı
   biri değiştirildiğinde iki sayfa birbirinden görsel olarak kayardı.
   Tüm sınıflar `lg-` önekli — app.css ile çakışmaz.
   =========================================================================== */
/* Yeni giris tasarimi (2026-09-03, firma sahibi: "cekici guzel birsey, sifirdan").
   Ikiye bolunmus duzen: solda marka paneli (lacivert + isiltili kureler +
   siluet), sagda form. Tum siniflar lg- onekiyle — app.css ile cakismaz. */
.lg-sahne { display: flex; min-height: 100vh; background: var(--card); }

/* ---------- SOL: marka paneli ---------- */
.lg-marka {
  position: relative; flex: 1.15; min-width: 0; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: 28px;
  padding: 56px 64px;
  background: linear-gradient(160deg, #0b1622 0%, #06304f 58%, #004274 100%);
  color: #e8f1f8;
}
.lg-kure { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; pointer-events: none; }
.lg-kure-1 { width: 420px; height: 420px; top: -120px; right: -100px; background: #0090d6; animation: lgSuzul 9s ease-in-out infinite alternate; }
.lg-kure-2 { width: 340px; height: 340px; bottom: -80px; left: -110px; background: #00aeff; opacity: .28; animation: lgSuzul 11s ease-in-out infinite alternate-reverse; }
@keyframes lgSuzul { from { transform: translateY(0) scale(1); } to { transform: translateY(26px) scale(1.06); } }

/* Sehir silueti — alt kenarda, cok silik */
.lg-siluet { position: absolute; left: 0; right: 0; bottom: 0; height: 180px; opacity: .16; pointer-events: none; }
.lg-siluet svg { width: 100%; height: 100%; display: block; }

/* DIKKAT: kure ve siluet HARIC — ayni (0,1,0) ozgullukte oldugundan sonra
   gelen bu kural onlarin position:absolute'unu eziyordu; kureler yerlesime
   girip sol kolonu ~1600px'e uzatti, tum icerik ekran altina kaydi (ilk
   yayinlanan surumde yasandi, 2026-09-04). */
.lg-marka > :not(.lg-kure):not(.lg-siluet) { position: relative; }
.lg-logo img { height: 46px; display: block; }
.lg-baslik { margin: 0; font: 800 clamp(26px, 3vw, 38px)/1.2 'Inter', sans-serif; letter-spacing: -.5px; }
.lg-baslik b { color: #00aeff; }
.lg-alt { margin: 0; max-width: 460px; font-size: 14.5px; line-height: 1.65; color: #b9cbda; }

.lg-ozellikler { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.lg-oz { display: flex; align-items: center; gap: 13px; font-size: 14px; font-weight: 500; color: #d7e5f0; }
.lg-oz-ikon {
  width: 38px; height: 38px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 11px; background: rgba(0,174,255,.14); border: 1px solid rgba(0,174,255,.28); color: #4fc6ff;
}
.lg-oz-ikon svg { width: 19px; height: 19px; }

/* ---------- SAG: form ---------- */
.lg-form-yan {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center;
  padding: 40px 24px; background: var(--bg);
}
.lg-kutu { width: 100%; max-width: 400px; }
.lg-mobil-logo { display: none; }
.lg-selam { margin: 0 0 6px; font: 800 26px/1.25 'Inter', sans-serif; letter-spacing: -.4px; color: var(--text); }
.lg-selam-alt { margin: 0 0 26px; font-size: 13.5px; color: var(--muted); }

.lg-alan { position: relative; margin-bottom: 14px; }
.lg-alan svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--muted); pointer-events: none; }
.lg-alan input {
  width: 100%; box-sizing: border-box; padding: 13px 44px 13px 42px;
  font: 500 14px 'Inter', sans-serif; color: var(--text);
  background: var(--card); border: 1.5px solid var(--border-2); border-radius: 12px;
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.lg-alan input::placeholder { color: var(--muted); opacity: .7; font-weight: 400; }
.lg-alan input:focus { border-color: var(--sky); box-shadow: 0 0 0 4px rgba(0,144,214,.12); }
.lg-goz {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; padding: 6px; cursor: pointer; color: var(--muted); line-height: 0; border-radius: 8px;
}
.lg-goz:hover { color: var(--sky); background: var(--sky-tint); }
.lg-goz svg { position: static; transform: none; width: 18px; height: 18px; pointer-events: none; }

.lg-dugme {
  width: 100%; margin-top: 6px; padding: 13px; border: 0; border-radius: 12px; cursor: pointer;
  font: 700 15px 'Inter', sans-serif; color: #fff; letter-spacing: .2px;
  background: linear-gradient(135deg, #00aeff 0%, #0090d6 55%, #006fb1 100%);
  box-shadow: 0 8px 20px rgba(0,144,214,.32);
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.lg-dugme:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 12px 26px rgba(0,144,214,.4); }
.lg-dugme:active { transform: translateY(0); }

.lg-not { margin-top: 22px; text-align: center; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.lg-not strong { color: var(--text); }
.lg-kutu .flash { border-radius: 12px; }

/* ---------- Karanlik tema ---------- */
html[data-theme="dark"] .lg-form-yan { background: #0d1826; }
html[data-theme="dark"] .lg-alan input { background: #14243a; border-color: #24384f; color: #e6eef6; }
html[data-theme="dark"] .lg-selam { color: #e6eef6; }
html[data-theme="dark"] .lg-not strong { color: #cfe0ee; }

/* ---------- Mobil: tek kolon, marka paneli kisa serit ---------- */
@media (max-width: 860px) {
  .lg-sahne { flex-direction: column; }
  .lg-marka { flex: none; padding: 34px 24px 46px; gap: 12px; justify-content: flex-start; }
  .lg-baslik { font-size: 24px; }
  .lg-alt, .lg-ozellikler { display: none; }
  .lg-siluet { height: 90px; }
  .lg-logo img { height: 38px; }
  .lg-form-yan { align-items: flex-start; padding-top: 34px; }
}