/* ==========================================================================
   RECEP YAMAN YALITIM · EYVA ÜRETİM — Giriş ekranı

   Sol kolon: koyu lacivert ortam sahnesi
     (kayan gradyan → soluk teknik ızgara → süzülen chevron bandı →
      çelik-mavi ışık küreleri) üzerinde marka hikâyesi.
   Sağ kolon: beyaz cam giriş kartı.

   Renkler tema.css jetonlarından gelir. Sayfaya özel tonlar aşağıda tek bir
   yerde tanımlı; her biri kartın gerçek bileşke zemenine (≈ #F7F9FB) göre
   WCAG AA hesaplanarak seçildi.
   ========================================================================== */

.giris-govde {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--kabuk-900);
  color: #fff;
  overflow-x: hidden;
  /* Tarayıcı kendi arayüzünü (otomatik doldurma, kaydırma çubuğu) koyu
     temaya göre boyasın. */
  color-scheme: dark;

  /* ── Beyaz kart üstü ölçülmüş tonlar ───────────────────────────────────
     Referans zemin: linear-gradient(rgba(255,255,255,.98), rgba(247,249,251,.94))
     → --kabuk-800 üstünde ≈ rgb(247, 249, 251). Oranlar o zemine göredir. */
  --k-metin:    #16202C;                    /* 15.8:1 */
  --k-metin-2:  #45566A;                    /*  7.4:1 — etiketler */
  --k-metin-3:  #6B7B8C;                    /*  4.7:1 — ipuçları, dip */
  --k-baglanti: #21567D;                    /*  6.9:1 */
  --k-cizgi:    #DBE2EA;                    /* arayüz kenarı (eşik yok) */
  --k-cizgi-2:  #C6D0DA;                    /* 3.1:1 — alan kenarı */
  --k-alan:     #F1F5F8;
  --k-hata:     #8F2E27;                    /*  6.4:1 — hata kutusunda */
  --k-hata-bg:  rgba(193, 71, 61, .09);
  --k-hata-cizgi: rgba(193, 71, 61, .32);
  --k-basari:   #1C6B43;                    /*  5.2:1 */
  --k-basari-bg: rgba(44, 133, 88, .10);
  --k-basari-cizgi: rgba(44, 133, 88, .34);
}

/* --------------------------------------------------------------------------
   SAHNE
   -------------------------------------------------------------------------- */
.giris-sahne {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--kabuk-900);
  isolation: isolate;

  /* Fare paralaksı: giris.js pointermove'da bu iki değişkeni günceller
     (yalnız hassas işaretçide ve hareket azaltma kapalıyken). */
  --fx: 0px;
  --fy: 0px;
}

/* --------------------------------------------------------------------------
   SOL: ORTAM SAHNESİ + HİKÂYE
   -------------------------------------------------------------------------- */
.giris-gorsel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 26px;
  padding: clamp(40px, 5.5vw, 88px) clamp(30px, 5vw, 80px);
  overflow: hidden;
  background: var(--kabuk-900);
}

/* Yumuşak ışık — fareyle ters yönde kayar, derinlik hissi verir */
.giris-gorsel::before {
  content: '';
  position: absolute;
  top: 6%; left: 8%;
  width: 60%; height: 58%;
  z-index: -2;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(46, 111, 158, .20), transparent 68%);
  filter: blur(70px);
  pointer-events: none;
  transform: translate3d(calc(var(--fx) * -1), calc(var(--fy) * -1), 0);
  transition: transform .35s var(--egri);
}

/* Yavaş kayan lacivert gradyan */
.sahne-gradyan {
  position: absolute;
  inset: 0;
  z-index: -6;
  background:
    radial-gradient(1000px 620px at 14% 10%, var(--vurgu-bg2), transparent 60%),
    radial-gradient(820px 640px at 92% 96%, rgba(46, 111, 158, .14), transparent 58%),
    linear-gradient(150deg, var(--kabuk-900) 0%, var(--kabuk-700) 40%, var(--kabuk-600) 66%, var(--kabuk-900) 100%);
  background-size: 170% 170%;
  animation: gradyan-kay 30s var(--egri) infinite;
}

/* Soluk teknik ızgara — atölye/mühendislik dokusu */
.sahne-izgara {
  position: absolute;
  inset: -2px;
  z-index: -5;
  opacity: .5;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 88% 72% at 42% 42%, #000 28%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 88% 72% at 42% 42%, #000 28%, transparent 78%);
  transform: translate3d(calc(var(--fx) * .16), calc(var(--fy) * .16), 0);
  transition: transform .35s var(--egri);
}

/* İMZA: yavaşça süzülen chevron bandı — yalıtım "V" katman motifi.
   Çok düşük opaklık, metinle yarışmaz; fareyle hafif kayar. */
.sahne-chevron {
  position: absolute;
  inset: 0;
  z-index: -4;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    -52deg,
    transparent 0 24px,
    rgba(61, 134, 186, .16) 24px 27px,
    transparent 27px 50px,
    rgba(61, 134, 186, .08) 50px 53px
  );
  mask-image: radial-gradient(ellipse 75% 95% at 16% 58%, #000 4%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 75% 95% at 16% 58%, #000 4%, transparent 70%);
  transform: translate3d(calc(var(--fx) * .1), calc(var(--fy) * .1), 0);
  transition: transform .35s var(--egri);
  animation: chevron-kay 22s linear infinite;
}
@keyframes chevron-kay { to { background-position: 0 220px; } }

/* Süzülen çelik-mavi ışık küreleri */
.isik {
  position: absolute;
  z-index: -3;
  border-radius: 50%;
  filter: blur(74px);
  pointer-events: none;
}
.isik-a {
  width: 440px; height: 440px;
  top: -130px; left: -120px;
  background: radial-gradient(circle, rgba(46, 111, 158, .42), transparent 68%);
  animation: suzul-a 21s var(--egri) infinite;
}
.isik-b {
  width: 520px; height: 520px;
  right: -180px; bottom: -200px;
  background: radial-gradient(circle, rgba(61, 134, 186, .24), transparent 70%);
  animation: suzul-b 27s var(--egri) infinite;
}
@keyframes suzul-a { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(54px, 40px) scale(1.08); } }
@keyframes suzul-b { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-58px, -44px) scale(1.05); } }

/* ── Marka kilidi ─────────────────────────────────────────────────────── */
.marka {
  display: flex;
  align-items: center;
  gap: 14px;
  animation: y-asagi .8s .05s var(--egri-yumusak) both;
}
.giris-logo-kart {
  flex: none;
  display: grid;
  place-items: center;
  padding: 9px 11px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .34);
}
.giris-logo {
  display: block;
  width: auto;
  height: 58px;
  object-fit: contain;
}
.marka-cizgi { width: 1px; height: 46px; background: rgba(255, 255, 255, .16); }
.marka-urun { display: flex; flex-direction: column; gap: 3px; }
.marka-ad {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .11em;
  color: #fff;
}
.marka-slogan {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--vurgu-parlak);
}

/* ── Eyva Yazılım künyesi — ön planda ─────────────────────────────────── */
.eyva-kunye {
  position: relative;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: 100%;
  padding: 9px 14px 9px 17px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 11px;
  color: rgba(231, 238, 244, .74);
  background: linear-gradient(110deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .025));
  box-shadow: 0 10px 30px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 255, 255, .07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 10.5px;
  letter-spacing: .03em;
  animation: y-asagi .8s .12s var(--egri-yumusak) both;
}
.eyva-kunye::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(var(--vurgu-parlak), var(--vurgu));
  box-shadow: 0 0 14px rgba(61, 134, 186, .7);
}
.eyva-kunye strong { color: #fff; font-weight: 800; white-space: nowrap; }
.eyva-kunye > span { color: rgba(255, 255, 255, .24); }
.eyva-kunye a { color: rgba(255, 255, 255, .82); white-space: nowrap; transition: color var(--hiz-hizli); }
.eyva-kunye a:hover { color: #fff; }

/* ── Başlık + metin ──────────────────────────────────────────────────── */
.hikaye h1 {
  font-size: clamp(38px, 4.6vw, 66px);
  font-weight: 760;
  line-height: 1.02;
  letter-spacing: -.045em;
  text-shadow: 0 3px 30px rgba(0, 0, 0, .35);
  animation: y-yukari 1s .18s var(--egri-yumusak) both;
}
.hikaye h1 em {
  font-style: normal;
  color: transparent;
  background: linear-gradient(96deg, var(--vurgu-parlak) 0%, #8FBEDD 52%, #DCEBF6 96%);
  -webkit-background-clip: text;
  background-clip: text;
}
.hikaye-metin {
  max-width: 440px;
  margin-top: 20px;
  font-size: clamp(13.5px, 1vw, 15px);
  line-height: 1.72;
  color: rgba(231, 238, 244, .66);
  animation: y-yukari 1s .26s var(--egri-yumusak) both;
}

/* ── Özellik hapları ─────────────────────────────────────────────────── */
.ozellikler {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  animation: y-yukari 1s .34s var(--egri-yumusak) both;
}
.ozellik {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 999px;
  background: var(--vurgu-bg2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 11.5px;
  font-weight: 550;
  color: rgba(231, 238, 244, .82);
  transition: border-color var(--hiz) var(--egri), transform var(--hiz) var(--egri);
}
.ozellik:hover { border-color: rgba(61, 134, 186, .5); transform: translateY(-2px); }
.ozellik svg { flex: none; width: 15px; height: 15px; color: var(--vurgu-parlak); }

/* ── Modül şeridi — "tek ekranda" iddiasını somutlaştırır ─────────────── */
.modul-serit {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: var(--r-lg);
  background: linear-gradient(120deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018));
  animation: y-yukari 1.1s .42s var(--egri-yumusak) both;
}
.modul-serit-etiket {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--vurgu-parlak);
}
.modul-serit-etiket::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #2fd88a;
  box-shadow: 0 0 10px rgba(47, 216, 138, .8);
}
.modul-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  font-size: 11px;
  font-weight: 600;
  color: rgba(231, 238, 244, .62);
}
.modul-liste span { display: inline-flex; align-items: center; }
.modul-liste span:not(:last-child)::after {
  content: '';
  width: 3px; height: 3px;
  margin: 0 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .28);
}

/* --------------------------------------------------------------------------
   SAĞ: FORM PANELİ
   -------------------------------------------------------------------------- */
.giris-panel {
  position: relative;
  display: grid;
  place-items: center;
  padding: 40px 26px;
  background:
    radial-gradient(120% 80% at 80% 20%, var(--vurgu-bg2), transparent 60%),
    linear-gradient(200deg, var(--kabuk-800), var(--kabuk-900));
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, .06);
}
.giris-panel::after {
  content: '';
  position: absolute;
  top: -120px; right: -100px;
  width: 340px; height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(46, 111, 158, .22), transparent 66%);
  filter: blur(30px);
  pointer-events: none;
}

.giris-kart {
  position: relative;
  width: min(100%, 410px);
  padding: 34px 36px 30px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: var(--r-xl);
  color: var(--k-metin);
  background: linear-gradient(152deg, rgba(255, 255, 255, .98), rgba(247, 249, 251, .94));
  box-shadow: 0 42px 90px rgba(0, 0, 0, .46), inset 0 1px 0 #fff;
  backdrop-filter: blur(26px) saturate(140%);
  -webkit-backdrop-filter: blur(26px) saturate(140%);
  animation: giris-yuksel .7s .12s var(--egri-yumusak) both;
}
/* Üst kenar marka şeridi — köşe yarıçapının içinde kalsın, taşmasın */
.giris-kart::before {
  content: '';
  position: absolute;
  top: 0;
  left: clamp(22px, 9%, 34px);
  right: clamp(22px, 9%, 34px);
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--vurgu), var(--vurgu-parlak) 55%, transparent);
  pointer-events: none;
}
@keyframes giris-yuksel {
  from { opacity: 0; transform: translateY(20px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* Hatalı girişte kart titrer (giris.js .hatali sınıfını ekler) */
.giris-kart.hatali { animation: giris-titre .42s var(--egri); }
@keyframes giris-titre {
  10%, 90%      { transform: translateX(-2px); }
  20%, 80%      { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60%      { transform: translateX(7px); }
}

/* ── Müşteri markası ─────────────────────────────────────────────────── */
.kart-marka {
  display: block;
  width: auto;
  height: 46px;
  margin: 0 0 18px;
  object-fit: contain;
}

.kart-ust {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 11px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--vurgu-koyu);
}
.kart-ust .nokta {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--vurgu);
  animation: halka 2.6s var(--egri) infinite;
}
.kart-baslik {
  font-size: clamp(24px, 2.3vw, 30px);
  font-weight: 750;
  letter-spacing: -.035em;
}
.kart-alt {
  margin: 8px 0 26px;
  font-size: 13px;
  color: var(--k-metin-3);
  line-height: 1.6;
}

/* ── Alanların sırayla süzülmesi ────────────────────────────────────────
   1. çocuk gizli CSRF alanı; sayım ondan sonra başlar. Mesaj kutusu
   dışarıda tutuldu. Gecikme kuralları taban kuralın seçici gövdesini
   birebir tekrar eder (kısayol `animation` delay'i sıfırlıyor). */
.giris-form > *:not([type="hidden"]):not(.mesaj) {
  opacity: 0;
  animation: giris-alan .5s var(--egri-yumusak) both;
}
.giris-form > *:not([type="hidden"]):not(.mesaj):nth-child(2) { animation-delay: .16s; }
.giris-form > *:not([type="hidden"]):not(.mesaj):nth-child(3) { animation-delay: .24s; }
.giris-form > *:not([type="hidden"]):not(.mesaj):nth-child(4) { animation-delay: .32s; }
.giris-form > *:not([type="hidden"]):not(.mesaj):nth-child(5) { animation-delay: .40s; }
@keyframes giris-alan {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   FORM ALANLARI
   -------------------------------------------------------------------------- */
.alan-giris { margin-bottom: 15px; }
.alan-giris > label {
  display: block;
  margin-bottom: 7px;
  color: var(--k-metin-2);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .01em;
}

.kontrol {
  position: relative;
  display: flex;
  align-items: center;
  height: 52px;
  border: 1.5px solid var(--k-cizgi-2);
  border-radius: var(--r);
  background: var(--k-alan);
  transition: border-color .2s var(--egri), box-shadow .2s var(--egri),
              background .2s var(--egri), transform .2s var(--egri);
}
.kontrol:hover { border-color: var(--gri-400); }
.kontrol:focus-within {
  background: #fff;
  border-color: var(--vurgu);
  box-shadow: 0 0 0 4px var(--vurgu-bg), 0 8px 22px rgba(46, 111, 158, .12);
  transform: translateY(-1px);
}
.kontrol .on-ikon {
  flex: none;
  width: 19px; height: 19px;
  margin-left: 15px;
  color: var(--k-metin-3);
  transition: color .2s var(--egri);
}
.kontrol:focus-within .on-ikon { color: var(--vurgu-koyu); }
.kontrol input {
  width: 100%; height: 100%; min-width: 0;
  padding: 0 13px;
  border: 0; outline: 0;
  background: transparent;
  /* iOS'ta odaklanınca yakınlaştırmayı önlemek için 16px */
  font-size: 16px;
  color: var(--k-metin);
  caret-color: var(--vurgu);
}
.kontrol input::placeholder { color: var(--k-metin-3); }

/* Chrome otomatik doldurmada kendi açık zeminini basıyor; beyaz alanla
   uyumlu kalsın diye zemin iç gölgeyle geri alınıyor. */
.kontrol input:-webkit-autofill,
.kontrol input:-webkit-autofill:hover,
.kontrol input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--k-metin);
  -webkit-box-shadow: 0 0 0 60px #fff inset;
  box-shadow: 0 0 0 60px #fff inset;
  caret-color: var(--vurgu);
  transition: background-color 100000s ease 0s;
}

.goz {
  display: grid;
  place-items: center;
  width: 48px; height: 100%;
  color: var(--k-metin-3);
  border-radius: 0 var(--r) var(--r) 0;
  transition: color var(--hiz-hizli), background var(--hiz-hizli);
}
.goz:hover { color: var(--vurgu-koyu); background: var(--vurgu-bg); }
.goz svg { width: 19px; height: 19px; }

/* --------------------------------------------------------------------------
   HATIRLA
   -------------------------------------------------------------------------- */
.secenekler { margin: 3px 0 22px; }
.hatirla {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--k-metin-2);
  font-size: 12.5px;
  cursor: pointer;
  user-select: none;
}
.hatirla input { position: absolute; opacity: 0; width: 0; height: 0; }
.kutucuk {
  flex: none;
  display: grid;
  place-items: center;
  width: 19px; height: 19px;
  border: 1.6px solid var(--k-cizgi-2);
  border-radius: var(--r-xs);
  background: #fff;
  transition: background var(--hiz-hizli) var(--egri),
              border-color var(--hiz-hizli) var(--egri),
              box-shadow var(--hiz-hizli) var(--egri);
}
.kutucuk::after {
  content: '';
  width: 5.5px; height: 9.5px;
  margin-top: -2px;
  border: solid #fff;
  border-width: 0 2.2px 2.2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform var(--hiz) var(--egri-yay);
}
.hatirla input:checked + .kutucuk { background: var(--vurgu); border-color: var(--vurgu); }
.hatirla input:checked + .kutucuk::after { transform: rotate(45deg) scale(1); }
.hatirla input:focus-visible + .kutucuk { box-shadow: 0 0 0 3px var(--vurgu-bg2); }

/* --------------------------------------------------------------------------
   GÖNDER
   Gradyanın her iki ucu da beyaz metinle AA'yı geçer:
   --vurgu 5.17:1, --vurgu-koyu 7.35:1. --vurgu-parlak (3.93:1) burada
   kullanılmaz; yalnızca kenarlık/parıltı rengidir.
   -------------------------------------------------------------------------- */
.gonder {
  position: relative;
  width: 100%; height: 54px;
  overflow: hidden;
  border-radius: var(--r);
  color: #fff;
  background: linear-gradient(122deg, var(--vurgu), var(--vurgu-koyu));
  box-shadow: 0 12px 28px rgba(46, 111, 158, .38), inset 0 1px 0 rgba(255, 255, 255, .22);
  font-size: 14px;
  font-weight: 750;
  letter-spacing: .02em;
  transition: transform .2s var(--egri), box-shadow .2s var(--egri), filter .2s var(--egri);
}
.gonder::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 42%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: skewX(-20deg);
}
.gonder:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: saturate(1.08);
  box-shadow: 0 18px 40px rgba(46, 111, 158, .48), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.gonder:hover:not(:disabled)::before { animation: huzme .8s var(--egri) both; }
.gonder:active:not(:disabled) { transform: translateY(0); }
.gonder:disabled { opacity: .82; cursor: wait; transform: none; }

.gonder-ic {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.gonder-ic svg { width: 18px; height: 18px; transition: transform .2s var(--egri); }
.gonder:hover:not(:disabled) .gonder-ic svg { transform: translateX(4px); }

.halka {
  display: none;
  width: 17px; height: 17px;
  border: 2.2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: donme .65s linear infinite;
}
.gonder.yukleniyor .halka { display: block; }
.gonder.yukleniyor .gonder-ic svg { display: none; }

/* --------------------------------------------------------------------------
   MESAJ
   -------------------------------------------------------------------------- */
.mesaj {
  display: none;
  align-items: flex-start;
  gap: 9px;
  margin-top: 14px;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  font-size: 12.5px;
  line-height: 1.5;
}
.mesaj.gorunur { display: flex; animation: y-asagi .3s var(--egri) both; }
.mesaj.hata {
  color: var(--k-hata);
  background: var(--k-hata-bg);
  border: 1px solid var(--k-hata-cizgi);
}
.mesaj.basari {
  color: var(--k-basari);
  background: var(--k-basari-bg);
  border: 1px solid var(--k-basari-cizgi);
}
.mesaj strong { flex: none; font-size: 14px; line-height: 1.25; }

/* --------------------------------------------------------------------------
   PWA KUR / DİP
   -------------------------------------------------------------------------- */
.pwa-kur {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 11px;
  padding: 12px;
  border: 1px solid var(--k-cizgi-2);
  border-radius: var(--r-sm);
  color: var(--k-metin-2);
  font-size: 12.5px;
  font-weight: 650;
  background: var(--k-alan);
  transition: border-color var(--hiz-hizli), color var(--hiz-hizli), background var(--hiz-hizli);
}
.pwa-kur:hover {
  border-color: var(--vurgu);
  color: var(--vurgu-koyu);
  background: var(--vurgu-bg);
}
.pwa-kur svg { width: 17px; height: 17px; }
/* .gizli tema.css'te `display: none !important` — burada tekrarlanmıyor. */

.giris-dip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--k-cizgi);
  color: var(--k-metin-3);
  font-size: 11.5px;
}
.giris-dip a { color: var(--k-baglanti); font-weight: 700; }
.giris-dip a:hover { text-decoration: underline; }
.giris-dip i { width: 3px; height: 3px; border-radius: 50%; background: var(--k-metin-3); }

/* --------------------------------------------------------------------------
   ODAK HALKASI
   -------------------------------------------------------------------------- */
.giris-sahne :focus-visible {
  outline: 2px solid var(--vurgu-parlak);
  outline-offset: 2px;
}
.giris-kart :focus-visible { outline-color: var(--vurgu); }
.kontrol input:focus-visible { outline: 0; }

/* --------------------------------------------------------------------------
   MOBİL: TEK KOLON, SAHNE ARKA PLANA GEÇER
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .giris-sahne { grid-template-columns: 1fr; }

  .giris-gorsel {
    position: fixed;
    inset: 0;
    z-index: 0;
    justify-content: flex-end;
    gap: 18px;
    padding: 40px 20px 22px;
  }
  .giris-gorsel .hikaye-metin,
  .giris-gorsel .ozellikler,
  .giris-gorsel .modul-serit { display: none; }
  .giris-gorsel::before { opacity: .5; }
  .hikaye h1 { font-size: clamp(30px, 8vw, 42px); }

  .giris-panel {
    position: relative;
    z-index: 1;
    padding: 32px 18px calc(32px + env(safe-area-inset-bottom));
    background: transparent;
    box-shadow: none;
  }
  .giris-panel::after { display: none; }

  .giris-kart {
    /* Cam kart artık doğrudan sahnenin üstünde. */
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 26px 60px rgba(0, 0, 0, .5);
  }
}

@media (max-width: 560px) {
  .giris-kart { padding: 30px 24px 26px; }
  .kart-marka { height: 40px; margin-bottom: 16px; }
  .giris-logo { height: 48px; }
  .kart-baslik { font-size: 22px; }
}

/* 360 px: en dar hedef cihaz */
@media (max-width: 400px) {
  .giris-panel { padding: 24px 12px calc(24px + env(safe-area-inset-bottom)); }
  .giris-kart { padding: 26px 18px 22px; border-radius: var(--r); }
  .kart-alt { margin-bottom: 20px; }
  .hatirla { font-size: 12px; }
  .giris-dip { font-size: 11px; }
}

/* Yatay mod: yükseklik azken sahneyi ve kartı sıkıştır */
@media (max-height: 620px) and (min-width: 861px) {
  .giris-gorsel { gap: 18px; padding: 32px clamp(30px, 5vw, 60px); }
  .giris-kart { padding: 26px 30px 22px; }
  .kart-marka { height: 38px; margin-bottom: 12px; }
}

/* --------------------------------------------------------------------------
   HAREKET AZALTMA
   Kullanıcı hareket istemiyorsa hiçbir animasyon oynamaz; her şey son
   halinde görünür. giris.js paralaksı da aynı sorguyu okuyup kapatıyor.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sahne-gradyan, .sahne-chevron, .isik,
  .marka, .eyva-kunye, .hikaye h1, .hikaye-metin,
  .ozellikler, .modul-serit,
  .giris-kart, .giris-kart.hatali,
  .giris-form > *, .mesaj.gorunur, .halka,
  .gonder::before, .gonder:hover:not(:disabled)::before {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Paralaks dönüşümleri ve geçişler kapalı */
  .giris-gorsel::before,
  .sahne-izgara,
  .sahne-chevron {
    transform: none !important;
    transition: none !important;
  }

  .kontrol, .gonder, .kutucuk, .pwa-kur, .goz,
  .kontrol .on-ikon, .gonder-ic svg {
    transition: none !important;
  }
  .kontrol:focus-within { transform: none !important; }
  .gonder:hover:not(:disabled) { transform: none !important; }

  /* Yükleniyor halkası dönmüyorsa da görünür kalmalı */
  .gonder.yukleniyor .halka { display: block; }
}