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

   Sol kolon: yalıtım katmanlarının çizildiği dekoratif SVG sahne
              (çatı kemeri → katmanlar → ısı dalgası).
   Sağ kolon: lacivert cam etkili giriş kartı.

   Renkler tema.css jetonlarından gelir. Sayfaya özel tonlar aşağıda tek bir
   yerde tanımlı ve her biri gerçek bileşke zemine göre WCAG AA hesaplanarak
   seçildi (oranlar .superpowers/sdd/.../task-7-report.md içindeki tabloda).

   SVG renkleri buraya yazılır, işaretlemedeki sunum özniteliklerine değil:
   fill/stroke özniteliği içinde jeton başvurusu tarayıcılarda güvenilir
   çalışmıyor, CSS'ten uygulandığında sorunsuz.
   ========================================================================== */

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

  /* ── Sayfaya özel tonlar ───────────────────────────────────────────────
     Referans zemin, cam kartın gerçek bileşkesidir:
     rgba(255,255,255,.07) + backdrop saturate(140%) → --kabuk-800 üstünde
     ≈ rgb(32, 57, 101). Aşağıdaki oranlar o zemine göredir. */
  --g-metin:        #FFFFFF;                    /* 11.45:1 */
  --g-metin-2:      #C7D2E4;                    /*  7.50:1 */
  --g-metin-3:      #8FA3B8;                    /*  5.47:1 */
  --g-ipucu:        #8FA3B8;                    /*  5.46:1 — alan zemininde */
  --g-baglanti:     #3D86BA;                    /*  5.07:1 */
  --g-hata:         #FFC9CC;                    /*  7.71:1 — hata kutusunda */
  --g-basari:       #A9EFC6;                    /*  7.05:1 — başarı kutusunda */

  /* Kenarlık ve halkalar: metin değil, arayüz bileşeni → eşik 3:1 */
  --g-cizgi:        rgba(255, 255, 255, .35);   /*  3.37:1 — form kenarlığı */
  --g-halka:        rgba(61, 134, 186, .55);   /*  4.07:1 — odak halkası */
  --g-odak:         #93C5FD;                    /*  8.59:1 — :focus-visible */

  /* Yüzeyler (dekoratif, kontrast eşiği yok) */
  --g-kart:         rgba(255, 255, 255, .07);
  --g-kart-cizgi:   rgba(255, 255, 255, .12);
  --g-alan:         rgba(17, 26, 36, .55);
  --g-hata-bg:      rgba(193, 71, 61, .16);
  --g-hata-cizgi:   rgba(193, 71, 61, .48);
  --g-basari-bg:    rgba(44, 133, 88, .18);
  --g-basari-cizgi: rgba(44, 133, 88, .50);

  /* Dekoratif sahne tonu — folyo katmanı */
  --g-folyo:        #8FA3B8;
}

/* --------------------------------------------------------------------------
   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: DEKORATİF KOLON
   -------------------------------------------------------------------------- */
.giris-gorsel {
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 28px;
  padding: 48px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 20% 15%, var(--kabuk-700) 0%, transparent 60%),
    radial-gradient(90% 80% at 85% 85%, rgba(46, 111, 158, .30) 0%, transparent 62%),
    var(--kabuk-900);
}

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

/* İnce teknik ızgara — atölye/mühendislik dokusu */
.giris-gorsel::after {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: 0;
  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: 54px 54px;
  mask-image: radial-gradient(ellipse 85% 70% at 50% 45%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 45%, #000 30%, transparent 78%);
  transform: translate3d(calc(var(--fx) * .16), calc(var(--fy) * .16), 0);
  transition: transform .35s var(--egri);
}

/* Paralaks sarmalı: dönüşüm burada, süzülme animasyonu SVG'de —
   ikisi aynı öğede olsaydı transform çakışırdı. */
.gk-sarmal {
  position: relative;
  z-index: 1;
  width: min(460px, 100%);
  transform: translate3d(calc(var(--fx) * .5), calc(var(--fy) * .5), 0);
  transition: transform .35s var(--egri);
}

.gk-sahne {
  width: 100%;
  height: auto;
  overflow: visible;
  animation: gk-suzul 11s var(--egri) 2s infinite;
}

@keyframes gk-suzul {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* ── Isı halesi ─────────────────────────────────────────────────────────── */
.gk-hale-ic  { stop-color: var(--vurgu); stop-opacity: .34; }
.gk-hale-dis { stop-color: var(--vurgu); stop-opacity: 0; }

.gk-hale {
  opacity: 0;
  transform-origin: 240px 330px;
  animation: gk-hale-belir 1.2s var(--egri-yumusak) .9s forwards,
             gk-nefes 6.5s var(--egri) 2.1s infinite;
}

@keyframes gk-hale-belir { to { opacity: 1; } }
@keyframes gk-nefes {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

/* ── Çatı kemeri: çizilerek belirir ─────────────────────────────────────── */
.gk-kemer {
  fill: none;
  stroke: var(--vurgu);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: gk-ciz 1.6s var(--egri-yumusak) .2s forwards;
}
.gk-kemer-2 {
  stroke: var(--kabuk-400);
  stroke-width: 6;
  animation-delay: .45s;
}

@keyframes gk-ciz { to { stroke-dashoffset: 0; } }

/* ── Yalıtım katmanları: sırayla yerine kayar ───────────────────────────── */
.gk-katman {
  opacity: 0;
  transform: translateX(-40px);
  animation: gk-kay .7s var(--egri-yay) forwards;
}
.gk-k1 { fill: var(--kabuk-500); animation-delay: .70s; }
.gk-k2 { fill: var(--vurgu);     animation-delay: .85s; }
.gk-k3 { fill: var(--kabuk-400); animation-delay: 1.00s; }
.gk-k4 { fill: var(--g-folyo);   animation-delay: 1.15s; }

@keyframes gk-kay {
  to { opacity: 1; transform: translateX(0); }
}

/* ── Kalınlık ölçüsü: teknik çizim dili ─────────────────────────────────── */
.gk-olcu-cizgi,
.gk-olcu-uc {
  fill: none;
  stroke: rgba(255, 255, 255, .38);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 150;
  stroke-dashoffset: 150;
  animation: gk-ciz .8s var(--egri-yumusak) 1.35s forwards;
}
.gk-olcu-uc { animation-delay: 1.5s; }

/* ── Isı dalgası: girer, sönümlenerek çıkar ─────────────────────────────── */
.gk-dalga {
  fill: none;
  stroke: var(--vurgu-parlak);
  stroke-width: 4;
  stroke-linecap: round;
  opacity: 0;
  stroke-dasharray: 12 10;
  animation: gk-belir .6s ease 1.4s forwards,
             gk-ak 3.2s linear 1.4s infinite;
}
.gk-dalga-cikis {
  stroke: var(--kabuk-400);
  stroke-width: 3;
  opacity: 0;
  animation: gk-belir-sonuk .6s ease 1.7s forwards,
             gk-ak 4.6s linear 1.7s infinite;
}

@keyframes gk-belir       { to { opacity: .95; } }
@keyframes gk-belir-sonuk { to { opacity: .40; } }
@keyframes gk-ak          { to { stroke-dashoffset: -220; } }

/* ── Slogan ─────────────────────────────────────────────────────────────── */
.giris-slogan {
  position: relative;
  z-index: 1;
  max-width: 380px;
  color: #DCE3EE;
  font-size: 19px;
  line-height: 1.55;
  text-align: center;
  text-wrap: balance;
  animation: y-yukari .8s var(--egri-yumusak) 1.5s both;
}
.giris-slogan strong {
  display: inline-block;
  margin-top: 2px;
  color: #fff;
  font-weight: 750;
  letter-spacing: -.01em;
}

/* --------------------------------------------------------------------------
   SAĞ: FORM PANELİ
   -------------------------------------------------------------------------- */
.giris-panel {
  position: relative;
  display: grid;
  place-items: center;
  padding: 40px 24px;
  background: var(--kabuk-800);
  /* Kolonlar arası ince marka çizgisi */
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, .07);
}

.giris-kart {
  position: relative;
  width: min(100%, 400px);
  padding: 38px 34px 32px;
  border: 1px solid var(--g-kart-cizgi);
  border-radius: var(--r-lg);
  background: var(--g-kart);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 32px 70px rgba(0, 0, 0, .42);
  animation: giris-yuksel .6s var(--egri-yumusak) both;
}

/* Kartın üst kenarındaki marka şeridi */
.giris-kart::before {
  content: '';
  position: absolute;
  inset: -1px auto auto -1px;
  width: calc(100% + 2px);
  height: 3px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: linear-gradient(90deg, var(--vurgu), var(--vurgu-parlak) 46%, transparent);
  pointer-events: none;
}

@keyframes giris-yuksel {
  from { opacity: 0; transform: translateY(22px) 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); }
}

/* ── Logo ───────────────────────────────────────────────────────────────
   Logodaki monogram ve "RECEP YAMAN" yazısı lacivert; kart zemini de koyu
   olduğu için logo doğrudan konursa kaybolur. Çözüm beyaz yuvarlak kart.
   Piksel eşikli ters çevirme denendi ve elendi: kenar yumuşatmasından gri
   saçak bırakıyor. */
.giris-logo-kart {
  display: grid;
  place-items: center;
  width: min(100%, 264px);
  margin: 0 auto 20px;
  padding: 14px 18px;
  border-radius: var(--r);
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
}
.giris-logo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.giris-baslik {
  color: var(--g-metin);
  font-size: 22px;
  font-weight: 750;
  letter-spacing: -.02em;
  text-align: center;
}
.giris-alt {
  margin: 6px 0 24px;
  color: var(--g-metin-3);
  font-size: 13px;
  text-align: center;
}

/* ── Alanların sırayla süzülmesi ────────────────────────────────────────
   1. çocuk gizli CSRF alanı; sayım ondan sonra başlıyor. Mesaj kutusu
   dışarıda tutuldu, kendi giriş animasyonu var.
   Gecikme kuralları taban kuralla AYNI seçici gövdesini tekrar eder: taban
   kural `animation` kısayolunu kullanıyor, kısayol animation-delay'i de
   sıfırlıyor. Daha düşük özgüllükte yazılsalardı gecikmeler yutulurdu. */
.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: .18s; }
.giris-form > *:not([type="hidden"]):not(.mesaj):nth-child(3) { animation-delay: .26s; }
.giris-form > *:not([type="hidden"]):not(.mesaj):nth-child(4) { animation-delay: .34s; }
.giris-form > *:not([type="hidden"]):not(.mesaj):nth-child(5) { animation-delay: .42s; }
.giris-form > *:not([type="hidden"]):not(.mesaj):nth-child(6) { animation-delay: .50s; }

@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(--g-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(--g-cizgi);
  border-radius: var(--r);
  background: var(--g-alan);
  transition: border-color .2s var(--egri), box-shadow .2s var(--egri),
              background .2s var(--egri), transform .2s var(--egri);
}
.kontrol:hover { border-color: rgba(255, 255, 255, .58); }

/* Odak: kırmızı kenarlık tek başına kart zemininde 2.91:1 kalıyor (eşik 3:1).
   Dışına açık halka eklendi — halka 4.07:1 ile göstergeyi taşıyor. */
.kontrol:focus-within {
  border-color: var(--vurgu-parlak);
  box-shadow: 0 0 0 3px var(--g-halka), 0 10px 26px rgba(46, 111, 158, .22);
  transform: translateY(-1px);
}

.kontrol .on-ikon {
  flex: none;
  width: 19px; height: 19px;
  margin-left: 15px;
  color: var(--g-ipucu);
  transition: color .2s var(--egri);
}
.kontrol:focus-within .on-ikon { color: var(--g-metin); }

.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(--g-metin);
  caret-color: var(--vurgu-parlak);
}
.kontrol input::placeholder { color: var(--g-ipucu); }

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

.goz {
  display: grid;
  place-items: center;
  width: 48px; height: 100%;
  color: var(--g-metin-3);
  transition: color var(--hiz-hizli);
}
.goz:hover { color: var(--g-metin); }
.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(--g-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(--g-cizgi);
  border-radius: var(--r-xs);
  background: var(--g-alan);
  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-parlak);
}
.hatirla input:checked + .kutucuk::after { transform: rotate(45deg) scale(1); }
.hatirla input:focus-visible + .kutucuk { box-shadow: 0 0 0 3px var(--g-halka); }

/* --------------------------------------------------------------------------
   GÖNDER
   -------------------------------------------------------------------------- */
.gonder {
  position: relative;
  width: 100%; height: 54px;
  overflow: hidden;
  border-radius: var(--r);
  color: #fff;
  /* 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. */
  background: linear-gradient(122deg, var(--vurgu), var(--vurgu-koyu));
  box-shadow: 0 12px 28px rgba(46, 111, 158, .38);
  font-size: 14px;
  font-weight: 750;
  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, .55), transparent);
  transform: skewX(-20deg);
}
.gonder:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: saturate(1.08);
  box-shadow: 0 18px 38px rgba(46, 111, 158, .46);
}
.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(--g-hata);
  background: var(--g-hata-bg);
  border: 1px solid var(--g-hata-cizgi);
}
.mesaj.basari {
  color: var(--g-basari);
  background: var(--g-basari-bg);
  border: 1px solid var(--g-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: 11px;
  border: 1px solid var(--g-cizgi);
  border-radius: var(--r-sm);
  color: var(--g-metin-2);
  font-size: 12.5px;
  font-weight: 650;
  transition: border-color var(--hiz-hizli), color var(--hiz-hizli),
              background var(--hiz-hizli);
}
.pwa-kur:hover {
  border-color: var(--vurgu-parlak);
  color: var(--g-metin);
  background: rgba(46, 111, 158, .18);
}
.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(--g-kart-cizgi);
  color: var(--g-metin-3);
  font-size: 11.5px;
}
.giris-dip a {
  color: var(--g-baglanti);
  font-weight: 700;
}
.giris-dip a:hover { text-decoration: underline; }
.giris-dip i {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--g-metin-3);
}

/* --------------------------------------------------------------------------
   ODAK HALKASI
   tema.css genel odak halkası var(--vurgu); koyu lacivert kart üstünde
   2.21:1 kalıyor. Bu sayfada açık pembe tona çevriliyor: kart üstünde
   8.59:1, kırmızı gönder düğmesi üstünde 3.88:1.
   -------------------------------------------------------------------------- */
.giris-sahne :focus-visible {
  outline: 2px solid var(--g-odak);
  outline-offset: 2px;
}
/* Alanın kendi odak halkası zaten var; ikinci bir dış çizgi çizilmesin. */
.kontrol input:focus-visible { outline: 0; }

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

  .giris-gorsel {
    position: fixed;
    inset: 0;
    z-index: 0;
    padding: 0;
    opacity: .30;
    pointer-events: none;
  }
  .giris-gorsel .giris-slogan { display: none; }

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

  .giris-kart {
    /* Cam kart artık doğrudan sahnenin üstünde; zemini biraz koyulaştırıp
       okunabilirliği masaüstündeki seviyede tutuyoruz. */
    background: rgba(23, 35, 48, .85);
    box-shadow: 0 26px 60px rgba(0, 0, 0, .5);
  }
}

@media (max-width: 560px) {
  .giris-kart { padding: 30px 24px 26px; }
  .giris-logo-kart { width: min(100%, 236px); margin-bottom: 18px; }
  .giris-baslik { font-size: 20px; }
}

/* 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); }
  .giris-logo-kart { width: min(100%, 208px); padding: 12px 14px; }
  .giris-alt { margin-bottom: 20px; }
  .hatirla { font-size: 12px; }
  .giris-dip { font-size: 11px; }
}

/* Yatay mod: yükseklik azken sahneyi sıkıştır */
@media (max-height: 620px) and (min-width: 861px) {
  .giris-gorsel { padding: 24px; }
  .gk-sarmal { width: min(340px, 100%); }
  .giris-kart { padding: 26px 30px 22px; }
  .giris-logo-kart { margin-bottom: 14px; }
}

/* --------------------------------------------------------------------------
   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) {
  .gk-sahne, .gk-hale, .gk-kemer, .gk-katman,
  .gk-olcu-cizgi, .gk-olcu-uc,
  .gk-dalga, .gk-dalga-cikis,
  .giris-slogan, .giris-kart, .giris-kart.hatali,
  .giris-form > *, .mesaj.gorunur,
  .gonder::before, .gonder:hover:not(:disabled)::before,
  .halka {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }

  /* Sönük çizilmesi gereken katmanlar son opaklıklarında kalsın */
  .gk-dalga        { opacity: .95 !important; }
  .gk-dalga-cikis  { opacity: .40 !important; }

  /* Paralaks dönüşümleri ve geçişler kapalı */
  .giris-gorsel::before,
  .giris-gorsel::after,
  .gk-sarmal {
    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; }
}