/* ============================================================
   AÇILIŞ EKRANI — HOLOGRAFİK CAM / KOMUTA MERKEZİ (v431 denemesi)
   ============================================================
   Kullanıcı (18.09.2026): "Holografik cam … Bir komuta merkezi görünümü
   istiyorum." Yalnız #girisEkran'ı kapsar; uygulama içi hiçbir ekrana
   dokunmaz. Beğenilirse aynı dil sekmelere yayılacak.

   ⚠️ BOYAMA BÜTÇESİ (ölçülmüş derslerden): kullanıcının Chrome'unda donanım
      hızlandırma KAPALI. Bu yüzden:
      · `backdrop-filter` TEK öğede (kartın kendisi). Panellerde çoğaltılan
        blur, v425'te kanıtlanmış yavaşlık kaynağıydı.
      · Hareketli süslemeler YALNIZ transform/opacity ile. Degrade açısı,
        blur yarıçapı, box-shadow gibi her karede yeniden boyatan şeyler
        animasyona SOKULMAZ. (Prizmatik kenar bu yüzden SABİT bir conic —
        döndürülseydi kartın tamamı her karede yeniden boyanırdı.)
      · Izgara zemin tek seferlik boyanır (repeating-linear-gradient + maske).
      · Tek sürekli animasyon monogramın 22 sn'lik halkası; onun dışında
        açılış ekranında hareket YOK.
   ⚠️ HAREKET AYARINA SAYGI: html.hareket-kapali veya işletim sistemi
      "hareketi azalt" derse bütün animasyonlar durur, görünüm bozulmaz.
   ⚠️ İŞLEVE DOKUNMAZ: hiçbir id, form alanı, olay dinleyicisi değişmedi.
      Eklenen her öğe aria-hidden ve pointer-events: none.
   ============================================================ */

#girisEkran {
  --holo-1: #5ED8FF;              /* buz mavisi  — birincil hologram  */
  --holo-2: #A98BFF;              /* menekşe     — prizma ikinci ucu  */
  --holo-cizgi: color-mix(in srgb, var(--holo-1) 30%, transparent);
  --hud-yazi: color-mix(in srgb, var(--holo-1) 72%, var(--metin));
}

/* ---------- Komuta merkezi zemini: perspektif ızgara ---------- */
/* ⚠️ İLK DENEMEDE GÖRÜNMEDİ (18.09.2026, ekran görüntüsüyle): düz ızgara
   %30 renk + %50 opaklıkta sıvı metal zeminin üstünde kayboluyordu ve
   "kontrol odası" hissi hiç oluşmuyordu. İki değişiklik: çizgi kuvvetlendi
   ve ızgaraya PERSPEKTİF verildi — zemin izleyiciden uzaklaşıyor.
   ⚠️ `transform` SABİT, animasyonlu değil: bir kez boyanır, sonra
   kompozisyon katmanı olarak durur. Döndürülseydi her kare yeniden
   boyanırdı (donanım hızlandırma kapalı). */
/* ⚠️ KONUM TUZAĞI (ölçüldü): `bottom: -12%` + perspektif, öğeyi görüntü
   alanının ALTINA düşürdü (üst 666 px, alt 784 px / ekran 700 px) — ızgara
   hiç görünmedi. Dönüşüm öğeyi ALT KENARINA doğru sıkıştırdığı için alt kenar
   ekranın alt kenarına oturtulmalı (`bottom: 0`) ve yükseklik piksel cinsinden
   verilmeli; yüzde verilince kısa ekranlarda ızgara tamamen yok oluyor. */
#girisEkran .hud-zemin {
  position: absolute; left: -50%; right: -50%; bottom: 0; height: 900px;
  z-index: 0; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, var(--holo-cizgi) 0 1px, transparent 1px 58px),
    repeating-linear-gradient(0deg,  var(--holo-cizgi) 0 1px, transparent 1px 58px);
  transform: perspective(700px) rotateX(72deg);
  transform-origin: 50% 100%;
  -webkit-mask: linear-gradient(0deg, #000 10%, transparent 88%);
          mask: linear-gradient(0deg, #000 10%, transparent 88%);
  opacity: .95;
}
/* Ufuk çizgisi — zeminin bittiği yer */
#girisEkran .hud-ufuk {
  position: absolute; left: 0; right: 0; bottom: 28%; height: 1px; z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--holo-1) 22%, var(--holo-1) 78%, transparent);
  opacity: .45;
  box-shadow: 0 0 22px 1px color-mix(in srgb, var(--holo-1) 45%, transparent);
}
/* Kartı zeminden ayıran yumuşak parıltı — kart havada dursun */
#girisEkran::before {
  content: "";
  position: absolute; left: 50%; top: 46%; z-index: 0;
  width: 760px; height: 620px; transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--holo-1) 16%, transparent),
    color-mix(in srgb, var(--holo-2) 7%, transparent) 55%,
    transparent 78%);
}

/* ---------- Kart: holografik cam ---------- */
#girisEkran .giris-kart {
  max-width: 460px;
  padding: 30px 28px 26px;
  border: 0;
  border-radius: 22px;
  background:
    linear-gradient(158deg,
      color-mix(in srgb, var(--holo-1) 7%, transparent) 0%,
      transparent 38%,
      color-mix(in srgb, var(--holo-2) 6%, transparent) 100%),
    color-mix(in srgb, var(--panel) 58%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
          backdrop-filter: blur(22px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    0 0 0 1px color-mix(in srgb, var(--holo-1) 12%, transparent),
    0 40px 90px -40px rgba(0, 0, 0, .8),
    0 0 70px -30px color-mix(in srgb, var(--holo-1) 40%, transparent);
  overflow: hidden;
}

/* Prizmatik kenar — SABİT conic. Maske ile yalnız 1px çerçeveye iniyor. */
#girisEkran .giris-kart::before {
  content: "";
  position: absolute; inset: 0; z-index: 3;
  border-radius: inherit; padding: 1px;
  pointer-events: none;
  background: conic-gradient(from 210deg,
    transparent 0 6%, var(--holo-1) 14%, transparent 24%,
    transparent 44%, var(--holo-2) 54%, transparent 64%,
    transparent 84%, color-mix(in srgb, var(--holo-1) 70%, #fff) 92%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 1;
}

/* ---------- HUD katmanı (js/girishud.js ekler) ---------- */
.hud-katman { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

/* Köşe braketleri */
.hud-kose {
  position: absolute; width: 20px; height: 20px;
  border: 1.5px solid var(--holo-1); opacity: .75;
}
.hud-kose.k1 { top: 12px; left: 12px;  border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.hud-kose.k2 { top: 12px; right: 12px; border-left: 0;  border-bottom: 0; border-radius: 0 6px 0 0; }
.hud-kose.k3 { bottom: 12px; left: 12px;  border-right: 0; border-top: 0; border-radius: 0 0 0 6px; }
.hud-kose.k4 { bottom: 12px; right: 12px; border-left: 0;  border-top: 0; border-radius: 0 0 6px 0; }

/* ---------- Gövde (marka + karşılama + alanlar) ---------- */
/* ⚠️ Şeritler kaldırıldığı için iç boşluk KARTA geri döndü; .giris-govde
   sarmalı da kalktı. Düğme ve hata kutusunun yatay boşluğu artık kartın
   kendi padding'inden geliyor — ayrı margin verilmez. */

/* Monogram — hologram halkası içinde */
#girisEkran .marka { gap: 10px; }
#girisEkran .marka-monogram.buyuk {
  width: 62px; height: 62px; border-radius: 17px; font-size: 22px;
  position: relative;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--holo-1) 34%, transparent),
    0 0 26px -6px color-mix(in srgb, var(--holo-1) 55%, transparent);
}
/* Dönen kesikli halka — transform animasyonu, küçük alan */
#girisEkran .marka-monogram.buyuk::after {
  content: "";
  position: absolute; inset: -9px; border-radius: 22px;
  border: 1px dashed color-mix(in srgb, var(--holo-1) 42%, transparent);
  animation: hudDon 22s linear infinite;
  will-change: transform;
}
@keyframes hudDon { to { transform: rotate(360deg); } }

#girisEkran .marka h1 {
  font-size: 22px; letter-spacing: .01em;
  /* Prizma kayması — metnin kendisi tek renk kalır, gölge iki uçtan sızar */
  text-shadow:
    -0.6px 0 0 color-mix(in srgb, var(--holo-2) 45%, transparent),
     0.6px 0 0 color-mix(in srgb, var(--holo-1) 40%, transparent);
}
#girisEkran .marka p {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--hud-yazi);
}
.giris-karsilama h2 { font-size: 17px; }
.giris-karsilama p  { font-size: 13px; }

/* ---------- Alanlar: HUD girdisi ---------- */
#girisEkran .alan { display: grid; gap: 6px; }
#girisEkran label {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--hud-yazi); font-weight: 600;
}
#girisEkran label::before { content: "\25B8 "; opacity: .6; }
#girisEkran input[type="email"],
#girisEkran input[type="password"] {
  background: color-mix(in srgb, var(--holo-1) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--holo-1) 20%, transparent);
  border-radius: 12px;
  color: var(--metin);
  letter-spacing: .02em;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
#girisEkran input[type="email"]:focus,
#girisEkran input[type="password"]:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--holo-1) 62%, transparent);
  background: color-mix(in srgb, var(--holo-1) 9%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--holo-1) 16%, transparent);
}
.sifre-goster { color: var(--hud-yazi); }
.sifre-goster[aria-pressed="true"] { color: var(--holo-1); }

/* ---------- Giriş düğmesi: köşeleri kesik komuta tuşu ---------- */
#girisEkran #girisBtn {
  margin-top: 8px;
  position: relative; z-index: 1;
  padding: 14px 18px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: #06121c;
  border: 0; border-radius: 12px;
  background: linear-gradient(120deg, var(--holo-1), color-mix(in srgb, var(--holo-2) 55%, var(--holo-1)));
  box-shadow: 0 0 24px -8px color-mix(in srgb, var(--holo-1) 75%, transparent);
  overflow: hidden;
}
/* Üzerine gelince geçen ışık — transform ile */
#girisEkran #girisBtn::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, .55) 50%, transparent 62%);
  transform: translate3d(-110%, 0, 0);
  transition: transform .55s ease;
}
#girisEkran #girisBtn:hover::after { transform: translate3d(110%, 0, 0); }
#girisEkran #girisBtn:hover { box-shadow: 0 0 34px -6px color-mix(in srgb, var(--holo-1) 85%, transparent); }


/* ---------- Aydınlık tema ---------- */
:root[data-tema="aydinlik"] #girisEkran {
  --holo-1: #0E8FC4;
  --holo-2: #6A55D8;
  --hud-yazi: color-mix(in srgb, var(--holo-1) 62%, var(--metin));
}
:root[data-tema="aydinlik"] #girisEkran .giris-kart {
  background:
    linear-gradient(158deg,
      color-mix(in srgb, var(--holo-1) 8%, transparent) 0%,
      transparent 40%,
      color-mix(in srgb, var(--holo-2) 7%, transparent) 100%),
    color-mix(in srgb, var(--panel) 76%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .8),
    0 0 0 1px color-mix(in srgb, var(--holo-1) 16%, transparent),
    0 34px 80px -38px rgba(20, 40, 80, .45);
}
/* ⚠️ KONTRAST ÖLÇÜLDÜ (18.09.2026): aydınlık temada beyaz yazı, --holo-1
   (#0E8FC4) zemininde yalnız 3,66:1 veriyordu. Düğme yazısı 12 px kalın,
   yani "büyük yazı" eşiğine (18,66 px kalın) girmiyor ve 4,5:1 gerekiyor.
   Degrade bu yüzden KOYULAŞTIRILDI — beyaz yazı korunuyor. */
:root[data-tema="aydinlik"] #girisEkran #girisBtn {
  color: #fff;
  background: linear-gradient(120deg, #0A6288, #3C31A6);
}

/* ---------- Telefon ---------- */
@media (max-width: 480px) {
  #girisEkran .giris-kart { max-width: 100%; padding: 24px 18px 20px; }
}

/* ---------- Hareket kapalı / azaltılmış ---------- */
/* ⚠️ Animasyon durur ama SÜSLEME KAYBOLMAZ: tarama çizgisi kartın dışında
   park eder (görünmez), diğerleri sabit kalır. */
:root.hareket-kapali #girisEkran .marka-monogram.buyuk::after { animation: none; }
@media (prefers-reduced-motion: reduce) {
  #girisEkran .marka-monogram.buyuk::after { animation: none; }
  #girisEkran #girisBtn::after { transition: none; }
}