/* ===========================================================================
   Kimlik yüzeyi — üyelik, giriş ve parola sıfırlama sayfalarının koyu teması.

   Bu dosya YALNIZ dokuz belgede yüklenir (sablon.js, kabuk: 'kimlik'):
   üç üyelik adımı, üyelik tamamlandı, iki giriş kapısı, üç parola sıfırlama
   sayfası. Sitenin geri kalanı açık temadır ve bu dosyayı hiç indirmez.

   Neden site.css'e yazılmadı — üç sebep:
     1. ~300 satırı yalnız dört rota kullanıyor ama site.css'i her sayfa
        indiriyor.
     2. Kapsam kazası riski: `.adimlar` ve `.adim` sınıf adları müşteri
        portalındaki proje durum şeridinde de kullanılıyor. Ayrı dosya, o
        sayfalara hiç ulaşmayarak sızmayı imkânsız kılar.
     3. site.css yalnız sablon.js'te içerik damgasıyla yükleniyor; portal ve
        panel çıplak `/site.css` istiyor. Dosya büyüseydi halka açık site yeni
        sürümü alır, portal ve panel eskisiyle kalırdı.

   ---------------------------------------------------------------------------
   YÜZEY MERDİVENİ — kalıcı katman sayısı DÖRTTÜR:

       kuyu  #0B1015   girdilerin gömüldüğü oyuk (kartın ALTINDA)
       zemin #0F151A   sayfa
       kart  #191F26   .form-sar
       panel #222933   kartın ÜSTÜNDEKİ ikinci yüzey (ray, özet, seçim kartları)

   Beşinci kalıcı katman açılmaz; #29323D yalnız geçici hover durumudur.

   Yüzey ailesi referans siteden değil kendi mürekkebimizden türetildi:
   marka mürekkebi #14202C tonu 210.0°, zemin 207.3°, kart 212.3°, panel 215.3°.
   (Referansın indigosu 235.4° — oraya gidilseydi kopya olurdu.)

   OPAK DOLGU KURALI: koyu kapsamda hiçbir durum dolgusu rgba ile verilmez.
   Yarı saydam bir `background-color` elemanın kendi zeminini değiştirmez,
   ebeveyn yüzeyle bileşiklenir — yani ölçülen kontrast, ölçtüğünü sandığınız
   şey olmaz. Her durum rengi opak karşılığıyla yazılıdır.

   TEK VURGU DİSİPLİNİ: marka yeşili #60E48A yalnız altı işte kullanılır —
   birincil düğme dolgusu, etkin adım çipi, tamamlanmış adım imi ve kenarı,
   seçili kayıt tipi kenarı, ilerleme çizgisi, caret/accent rengi. Odak halkası,
   bağlantılar, ipuçları ve alt bilgi yeşil ALMAZ.
   =========================================================================== */

body.koyu {
  /* Yüzeyler */
  --k-zemin: #0F151A;
  --k-kart: #191F26;
  --k-panel: #222933;
  --k-kuyu: #0B1015;
  --k-panel-ust: #29323D;   /* yalnız hover */
  --k-alt: #0A0F14;

  /* Çizgiler: denetim sınırı ile dekoratif ayırıcı AYRI jetonlardır.
     Denetim sınırı WCAG 1.4.11 gereği 3:1 taşımak zorunda, dekoratif olan
     değil. Tek jetona indirilirse ya biri fazla parlak ya öteki eşiğin
     altında kalır. */
  --k-cizgi: #7A8794;
  --k-cizgi-hover: #99A5B1;
  --k-cizgi-acik: #39434F;

  /* Metin */
  --k-baslik: #F5F8FA;
  --k-metin: #EBEFF3;
  --k-metin-soluk: #A2AEB9;
  --k-yer-tutucu: #8E9BA8;

  /* Vurgu — marka yeşili, değiştirilmeden */
  --k-vurgu: #60E48A;
  --k-vurgu-hover: #7BEDA0;
  --k-vurgu-aktif: #4ED47C;
  --k-vurgu-metin: #08131B;
  --k-vurgu-yuzey: #1B3B29;
  --k-secili: #1D3527;

  /* Odak halkası yeşil DEĞİLDİR: yeşil dolgulu düğmede halka ile dolgu
     çakışırdı (1.31:1). Beyaza yakın halka + outline-offset ile halkanın
     komşusu daima altındaki koyu yüzeydir. */
  --k-odak: #F5F8FA;

  /* Durum */
  --k-basari: #60E48A;
  --k-basari-yuzey: #10261A;
  --k-hata: #FF9C9C;
  --k-hata-yuzey: #2B171A;
  --k-hata-kuyu: #1E1418;
  --k-bilgi: #4EB4F6;
  --k-bilgi-yuzey: #102330;
  --k-zebra: #262E38;

  /* site.css jetonlarının yeniden eşlenmesi.
     Bu satırlar, gövdelerde satır içi `style="color:var(--metin-soluk)"` gibi
     kullanımların bedelsiz düzelmesini sağlar — tek tek avlamak gerekmez. */
  --murekkep: var(--k-baslik);
  --metin: var(--k-metin);
  --metin-soluk: var(--k-metin-soluk);
  --kagit: var(--k-kart);
  --kagit-kirik: var(--k-panel);
  --cizgi: var(--k-cizgi-acik);
  --cizgi-acik: var(--k-cizgi-acik);
  /* uye.js ve formlar.js'te tanımsız var(--lacivert) kullanımı var; savunma
     amaçlı tanımlanır. Asıl düzeltme kaynakta var(--murekkep) olmalıdır. */
  --lacivert: var(--k-baslik);

  background: var(--k-zemin);
  color: var(--k-metin);
  line-height: 1.62;
}

/* ---------- Süsleme paneli ----------

   Sol kenarda tam boy görsel — yalnız `body.panelli` sayfalarında.

   Neden her kimlik sayfasında değil: panel bir denge işidir. Üç adımlık üyelik
   formunun yanında ağırlığı taşır; buna karşılık iki alanlık giriş formunun
   yanında ekranın yarısını süslemeye ayırıp asıl işi kıyıya iter. Bu yüzden
   `sayfa()` panelli seçeneği yalnız /uye-ol için açar.

   Görsel `/marka/` altındadır — o dizin sunucunun anonim ziyaretçiye açtığı
   varlık dizinlerinden biridir (server.js `acikVarlik`).

   Biçim: WebP birincil, JPEG yedek. `image-set` desteklemeyen tarayıcı ilk
   `background-image` satırındaki JPEG'i alır; destekleyen tarayıcı ikinci
   satırla WebP'ye geçer. Kaynak PNG 1,5 MB idi, ikisi de ~59 KB.

   Genişlik `min(26vw, 480px)`: sağda kalan alanın iki sütunlu kartı (adım
   listesi + form) sıkıştırmadan alması gerekir. 1280px'de panel 333px olur,
   kart 947px'lik alanda rahat durur. Gövdenin sol dolgusu aynı ifadeyi
   kullanır, yoksa içerik panelin altına girer.

   Konum `50% 72%`: görselin üst bölümü neredeyse boştur, yoğun geometri
   alttadır. `cover` kırpması ortadan yapılsaydı asıl içerik kesilirdi; kırpma
   ağırlıklı olarak boş üstten alınır.

   1280px altında panel hiç çizilmez ve indirilmez de. */

.kimlik-panel { display: none; }

@media (min-width: 1280px) {
  body.koyu.panelli { padding-left: min(26vw, 480px); }

  body.panelli .kimlik-panel {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(26vw, 480px);
    background-color: #080E13;
    background-image: url('/marka/kimlik-panel.jpg');
    background-image: image-set(
      url('/marka/kimlik-panel.webp') type('image/webp'),
      url('/marka/kimlik-panel.jpg') type('image/jpeg')
    );
    background-position: 50% 72%;
    background-size: cover;
    background-repeat: no-repeat;
    border-right: 1px solid var(--k-cizgi-acik);
    /* Süsleme, içeriğin arkasında kalır. */
    z-index: 0;
  }
}

/* ---------- Kimlik kabuğu ---------- */

.kimlik-ust {
  border-bottom: 1px solid var(--k-cizgi-acik);
  background: var(--k-zemin);
}

/* Yatay dolgu `.kap`tan gelir (0 28px); yalnız dikey dolgu eklenir. Kısayol
   `padding` yazılırsa yatay dolgu ezilir ve içerik kenara yapışır. */
.kimlik-ust-ic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 16px;
}

.kimlik-marka {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--k-baslik);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.kimlik-marka img { display: block; border-radius: 8px; }
.kimlik-donus { color: var(--k-metin-soluk); font-size: var(--yazi-govde); }
.kimlik-donus:hover { color: var(--k-metin); }

.kimlik-alt {
  margin-top: 56px;
  padding-block: 22px 28px;
  border-top: 1px solid var(--k-cizgi-acik);
  background: var(--k-alt);
  color: var(--k-metin-soluk);
  font-size: var(--yazi-kucuk);
}

.kimlik-alt-ic {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-items: center;
  justify-content: space-between;
}

.kimlik-alt-bag { display: flex; flex-wrap: wrap; gap: 18px; }
.kimlik-alt a { color: var(--k-metin-soluk); }
.kimlik-alt a:hover { color: var(--k-metin); }

/* ---------- Sayfa çerçevesi ----------
   Kimlik ekranı bir pazarlama sayfası değil, bir işlem ekranıdır: dikey
   boşluklar daraltılır ve başlık küçülür. "İşlem ekranı" hissini punto
   düşürmek değil çerçeveleme kurar.

   Ayrı bir başlık bandı yoktur: başlık kartın içindedir (`.kimlik-tepe`).
   Bant + kart iki nesne demekti ve sayfayı gereksiz uzatıyordu. */

body.koyu .bolum { padding: 52px 0 72px; background: transparent; }

/* ---------- Kart başlığı ----------
   Ortalanır. Ortalama burada bir üslup tercihi değil hizalama işidir: kart
   dar ve tek sütunlu, göz zaten ortadan iniyor. Uzun gövde metni ortalanmaz
   (okuma satır başını kaybeder) — yalnız başlık ve tek cümlelik alt satır. */

.kimlik-tepe {
  margin: 0 0 26px;
  text-align: center;
}

.kimlik-tepe h1 {
  margin: 0;
  color: var(--k-baslik);
  font-weight: 700;
  font-size: clamp(1.45rem, 1.2rem + 0.7vw, 1.8rem);
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.kimlik-tepe p {
  margin: 9px auto 0;
  max-width: 46ch;
  color: var(--k-metin-soluk);
  font-size: var(--yazi-govde);
  line-height: 1.55;
}

/* ---------- Kart ----------
   Kart/zemin oranı 1.11:1 — yükseklik renk farkıyla değil üç öğeyle kurulur:
   dış çizgi, iç üst ışık, dış gölge. İç ışık satırı silinirse kart sınırı
   düşük parlaklıkta görünmez olur. */

body.koyu .form-sar {
  background: var(--k-kart);
  border: 1px solid var(--k-cizgi-acik);
  border-radius: 14px;
  padding: 32px;
  box-shadow:
    inset 0 1px 0 rgba(245, 248, 250, 0.05),
    0 18px 40px rgba(0, 0, 0, 0.35);
}

body.koyu .form-baslik { color: var(--k-baslik); font-weight: 700; }
body.koyu .form-alt { color: var(--k-metin-soluk); }

/* ---------- İki sütunlu kart (üyelik) ----------
   Solda adım listesi, sağda form — tek kartın içinde.

   `overflow: hidden` KULLANILMAZ. Köşeleri kırpmanın kolay yolu odur ama form
   alanlarının odak halkası `outline-offset: 2px` ile kartın dışına taşar ve
   kırpılırdı: klavyeyle gezen kişi hangi alanda olduğunu göremez. Onun yerine
   yan sütuna kendi köşe yarıçapı verilir (kart 14px, iç kenar 1px çizgi kadar
   içeride: 13px).

   900px altında sütunlar yığılır. İki sütun dar ekranda formu okunamayacak
   kadar daraltır; adım listesi de yatay raya dönmez, üstte kalır. */

body.koyu .form-sar.kimlik-duzen {
  display: grid;
  grid-template-columns: 284px minmax(0, 1fr);
  padding: 0;
}

/* Yan sütun kartla AYNI yüzeydedir; ayrımı dolgu değil çizgi kurar. Kendi
   dolgusu verilseydi merdivende beşinci bir katman doğardı — ve `--k-panel`
   burada zaten adım çipinin işi. */
body.koyu .kimlik-yan {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 30px 24px;
  border-right: 1px solid var(--k-cizgi-acik);
  border-radius: 13px 0 0 13px;
}

body.koyu .kimlik-ana {
  padding: 32px;
  /* Izgara hücresi içeriğinden küçülebilsin; yoksa uzun bir alan sütunu
     taşırır. */
  min-width: 0;
}

/* Uyarı yan sütunda küçülür: orada ikincil bilgidir, formun rakibi değil. */
body.koyu .kimlik-yan-uyari {
  margin: auto 0 0;
  padding: 13px 14px;
  font-size: var(--yazi-kucuk);
  line-height: 1.5;
}

/* Dar ekranda sütunlar yığılır ve yan sütun kendi kutusu olmaktan çıkar:
   kartın içinde ikinci bir çerçeve, dar ekranda yalnız yer yer.

   Adım listesi burada yatay raya döner (bkz. `.adimlar-dikey` medya sorgusu):
   dikey liste yığılınca formun üstünde 367px'lik bir blok oluyordu — tam da
   kaçınmak istediğimiz uzunluk. Yatay ray aynı bilgiyi ~60px'de verir. */
@media (max-width: 899px) {
  body.koyu .form-sar.kimlik-duzen {
    grid-template-columns: minmax(0, 1fr);
    padding: 24px 20px 28px;
  }

  body.koyu .kimlik-yan {
    gap: 18px;
    padding: 0;
    border-right: 0;
    border-radius: 0;
  }

  body.koyu .kimlik-ana { padding: 22px 0 0; }
}

/* ---------- Girdiler: gömülü kuyu ---------- */

body.koyu .form-alan label { color: var(--k-baslik); }
body.koyu .form-alan .ipucu { color: var(--k-metin-soluk); }

body.koyu .form-alan input,
body.koyu .form-alan select,
body.koyu .form-alan textarea {
  background: var(--k-kuyu);
  border: 1px solid var(--k-cizgi);
  border-radius: 10px;
  color: var(--k-metin);
  /* 0.95rem = 15.2px idi; iOS Safari 16px altındaki alana odaklanınca sayfayı
     kendiliğinden yakınlaştırır. 1rem tam eşiği karşılar. */
  font-size: var(--yazi-orta);
  padding: 15px 16px;
  min-height: 54px;
  caret-color: var(--k-vurgu);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}

body.koyu .form-alan input::placeholder,
body.koyu .form-alan textarea::placeholder { color: var(--k-yer-tutucu); }

body.koyu .form-alan input:hover,
body.koyu .form-alan select:hover,
body.koyu .form-alan textarea:hover { border-color: var(--k-cizgi-hover); }

body.koyu .form-alan input:focus,
body.koyu .form-alan select:focus,
body.koyu .form-alan textarea:focus {
  border-color: var(--k-vurgu);
  outline: 2px solid var(--k-odak);
  outline-offset: 2px;
}

body.koyu .onay-satir { color: var(--k-metin-soluk); }
body.koyu .onay-satir input { accent-color: var(--k-vurgu); }

/* Telefon grubu — ülke kodu ve numara tek çerçevede */
body.koyu .telefon-grup {
  background: var(--k-kuyu);
  border: 1px solid var(--k-cizgi);
  border-radius: 10px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}

body.koyu .telefon-grup:hover { border-color: var(--k-cizgi-hover); }

body.koyu .telefon-grup:focus-within {
  border-color: var(--k-vurgu);
  outline: 2px solid var(--k-odak);
  outline-offset: 2px;
}

body.koyu .form-alan .telefon-grup select,
body.koyu .form-alan .telefon-grup input {
  background: transparent;
  border: 0;
  box-shadow: none;
  outline: none;
}

body.koyu .form-alan .telefon-grup select { border-right: 1px solid var(--k-cizgi); }

/* Yukarıdaki koşulsuz `outline: none`, ülke seçicisinin KENDİ odak halkasını da
   siliyordu: klavyeyle ülke kodundan numaraya geçen kişi hiçbir şeyin
   değiştiğini görmüyordu (2.4.7 ihlali — grubun `:focus-within` halkası ikisinde
   de aynı duruyor). Halka `inset box-shadow` ile geri verilir: `outline` grubun
   halkasıyla çakışır, `box-shadow` çakışmaz ve grubun `overflow: hidden`ı
   tarafından kırpılmaz. */
body.koyu .form-alan .telefon-grup select:focus-visible,
body.koyu .form-alan .telefon-grup input:focus-visible {
  box-shadow: inset 0 0 0 2px var(--k-odak);
}

/* ---------- Düğmeler ---------- */

body.koyu .dugme-birincil {
  background: var(--k-vurgu);
  color: var(--k-vurgu-metin);
  border-color: var(--k-vurgu);
}

body.koyu .dugme-birincil:hover { background: var(--k-vurgu-hover); border-color: var(--k-vurgu-hover); }
body.koyu .dugme-birincil:active { background: var(--k-vurgu-aktif); border-color: var(--k-vurgu-aktif); }

body.koyu .dugme-cerceve {
  background: transparent;
  color: var(--k-metin);
  border: 1px solid var(--k-cizgi);
}

body.koyu .dugme-cerceve:hover { border-color: var(--k-cizgi-hover); background: var(--k-panel); }

/* Dar kimlik kartında gönder düğmesi tam genişliktir. Sebep hiyerarşi: hemen
   altındaki "Ücretsiz üye olun" da bir düğme ve ikisi aynı boyda olsaydı fark
   yalnız dolgu rengine kalırdı (1.4.1). Biçim + boyut + dolgu, üç kanal.

   Yalnız DAR kartta: /uye-ol iki sütunlu ve form sütunu ~600px — orada tam
   genişlik düğme gülünç kaçar. Genişlik kabın işidir, düğmenin değil. */
body.koyu .kimlik-gonder {
  display: block;
  width: 100%;
  margin-top: 22px;
  text-align: center;
}

/* Odak halkası her yerde aynı: offset sayesinde halkanın komşusu daima
   altındaki koyu yüzeydir, düğme dolgusu değil. offset kaldırılırsa yeşil
   dolgu üzerinde halka 1.31:1 ile görünmez olur.

   `border-radius` BURAYA YAZILMAZ. Yazılıydı (6px) ve elemanın KENDİ yarıçapını
   eziyordu — tarayıcı `outline`ı elemanın yarıçapına oturttuğu için tek satır
   üç şeyi birden bozuyordu: hap düğme (999px) odakta dikdörtgene dönüyor, form
   girdisi (10px) köşelerini kaybediyor, seçici de öyle. Odak, biçimi
   değiştiriyordu. Kural kalkınca her öğe kendi biçiminde halkalanır. */
body.koyu a:focus-visible,
body.koyu button:focus-visible,
body.koyu input:focus-visible,
body.koyu select:focus-visible,
body.koyu textarea:focus-visible {
  outline: 2px solid var(--k-odak);
  outline-offset: 2px;
}

/* Tek istisna: kendi yarıçapı olmayan DÜZ metin bağlantısı. Orada 6px'in işi
   halkayı yumuşatmaktı ve o niyet doğruydu — yalnız kapsamı fazla genişti.
   Düğme dışlanır; onun yarıçapı kendisinindir. Metin bağlantısında `border-radius`
   halkanın biçiminden başka hiçbir şeyi etkilemez (dolgusu ve kenarlığı yok). */
body.koyu a:focus-visible:not(.dugme) { border-radius: 4px; }

/* ---------- İkincil eylemler ----------

   Giriş kartının altında üç bağlantı alt alta duruyordu: üçü de aynı puntoda,
   aynı renkte, altı çizili. Aynı görünen üç şey okuyana "burada üç eşit seçenek
   var" der. Oysa biri parolası tutmayanın kurtarma yolu, biri hesabı olmayanın
   kayıt yolu, üçüncüsü bambaşka bir kitlenin kapısıdır.

   Kural: KARTIN İÇİ kişinin kendi hesabıyla ilgili iştir, KARTIN DIŞI öteki
   kapıdır. İki sayfada da aynı işler, bir kere öğrenilir.

       1. Parola kurtarma → parola alanının etiket satırında, sağda
       2. Kayıt          → ayırıcının ardında, kartın içinde, çerçeve düğme
       3. Öteki kapı     → kartın dışında, sessiz bir satır

   Dördüncü basamak zaten var: tek yeşil nesne olan gönder düğmesi. */

.kimlik-kap { max-width: 460px; }

body.koyu .kimlik-formu .form-alan + .form-alan { margin-top: 14px; }

/* ---------- Google ile devam et ----------

   Marka yeşili KULLANILMAZ. Bu düğme İmaradanış'ın değil Google'ın eylemini
   temsil eder; yeşile boyansaydı sayfadaki tek vurgu rengi ikiye bölünür ve
   "asıl iş hangisi" sorusu doğardı. Nötr yüzey + Google'ın kendi işareti.

   Formun ÜSTÜNDE durur: kimliği zaten Google'da olan kişi aşağıyı hiç okumadan
   çıkar. Formu öne koyup düğmeyi altına atmak, çoğunluğu gereksiz bir alan
   yığınından geçirmek olurdu. */

body.koyu .google-dugme {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 100%;
  padding: 13px 18px;
  border: 1px solid var(--k-cizgi);
  border-radius: var(--yuvarlak);
  background: var(--k-panel);
  color: var(--k-baslik);
  font-size: var(--yazi-govde);
  font-weight: 700;
  text-decoration: none;
  transition: background 180ms ease, border-color 180ms ease;
}

body.koyu .google-dugme:hover {
  background: var(--k-panel-ust);
  border-color: var(--k-cizgi-hover);
}

/* İşaret metinle birlikte ölçeklenir ama ezilmez. */
body.koyu .google-im { flex: 0 0 auto; }

/* Ayıraç iki yolun EŞDEĞER olduğunu değil, ayrı olduğunu söyler. Çizgi metnin
   arkasından geçmesin diye iki parçaya bölünür. */
body.koyu .google-ayirac {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 20px 0;
  color: var(--k-metin-soluk);
  font-size: var(--yazi-kucuk);
}

body.koyu .google-ayirac::before,
body.koyu .google-ayirac::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--k-cizgi-acik);
}

/* ---------- Parola alanı: bağlantı etiket satırında ----------

   DOM sırası `label → input → bağlantı`, görsel sıra ise `label | bağlantı`
   üstte, input altta. Yani ızgara yerleşimi bağlantıyı görsel olarak yukarı
   çeker.

   Bu bilinçli bir ayrışmadır. Yerleşik kalıp (GitHub, Stripe) bağlantıyı DOM'da
   da etiketle input arasına koyar; o zaman kullanıcı adından Tab'layan kişi
   parola alanına varmadan bağlantıya düşer ve orada Enter'a basarsa —
   JavaScript ve taslak olmadığı için — yazdığı kullanıcı adını kaybeder.

   Ayrıca odak sırası kişinin gerçek sırasına uyar: insan önce parolayı yazmayı
   DENER, tutmayınca kurtarmayı arar. "Dene → kurtar → gönder" sırası budur.

   Ekran okuyucuda "Parola, düzenle, Parolamı unuttum bağlantı" diye okunur —
   etiket kendi alanından ayrılmaz. CSS yüklenmezse de aynı sırada, okunur
   biçimde çıkar. */

body.koyu .kimlik-parola {
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px;
}

body.koyu .kimlik-parola > label { grid-row: 1; grid-column: 1; align-self: baseline; }

body.koyu .kimlik-parola > .kimlik-yardim {
  grid-row: 1;
  grid-column: 2;
  justify-self: end;
  align-self: baseline;
}

body.koyu .kimlik-parola > input { grid-row: 2; grid-column: 1 / -1; }
body.koyu .kimlik-parola > .ipucu { grid-row: 3; grid-column: 1 / -1; }

/* Dar ekran + büyütülmüş metin: satır tek sütuna iner, bağlantı girdinin
   altına geçer.

   Ölçüldü: 320px genişlikte %200 metin büyütmesinde "Parola" etiketi ile
   bağlantı 55px üst üste biniyordu. Izgaranın `auto` sütunu taşma altında
   küçülmez, bu yüzden `white-space` ile oynamak çözmüyordu — satırın kendisi
   kırılmalı. WCAG 1.4.4 (200% büyütme) ile 1.4.10 (320px) ayrı ayrı zaten
   geçiyordu; bu, ikisinin KESISIMINDE kalan yumuşak bozulma yoludur. */
@media (max-width: 480px) {
  body.koyu .kimlik-parola { grid-template-columns: minmax(0, 1fr); }

  body.koyu .kimlik-parola > .kimlik-yardim {
    grid-row: 3;
    grid-column: 1;
    justify-self: start;
  }

  body.koyu .kimlik-parola > .ipucu { grid-row: 4; }
}

/* Izgara hücresindeki `<input>` kendi iç genişliğinin (varsayılan `size=20`)
   altına inemez ve dar ekranda kabı taşırır. Ölçüldü: 320px'de %150 metin
   büyütmesiyle belge 337px'e çıkıyordu. `min-width: 0` küçülmeye izin verir. */
body.koyu .form-alan > input,
body.koyu .form-alan > select { min-width: 0; }

/* Alt çizgi sükûnette de vardır: bağlantıyı çevresinden ayıran tek şey renk
   olamaz (1.4.1). Hover'da renk güçlenir, çizgi metnin rengine döner.

   `padding-block`: satır yüksekliği ~21px, hedef 24px'e çıkarılır (2.5.8).
   Bağlantı bir cümlenin içinde değil tek başına durduğu için "satır içi"
   istisnası burada geçmez — dolgu gerçekten gerekli.

   `margin-block: -4px` dolguyu ızgara satırından geri alır. Yoksa satır 8px
   büyüyor ve parola alanının etiket–girdi boşluğu (11px) üstteki alanınkinden
   (7px) farklı oluyordu: iki alan aynı formda farklı ritim tutuyordu. Dokunma
   hedefi dolgu kutusu olduğu için 29px'te kalır, hizalama düzelir. */
body.koyu .kimlik-yardim {
  padding-block: 4px;
  margin-block: -4px;
  font-size: var(--yazi-kucuk);
  font-weight: 600;
  color: var(--k-metin-soluk);
  text-decoration: underline;
  text-decoration-color: var(--k-cizgi);
  text-underline-offset: 3px;
}

body.koyu .kimlik-yardim:hover {
  color: var(--k-baslik);
  text-decoration-color: currentColor;
}

/* Ayırıcı, formun bittiğini söyler. Taşıdığı iş küçüktür — asıl ayrımı dolu
   düğme ile çerçeve düğme arasındaki fark kurar; çizgi yalnız onu perçinler. */
body.koyu .kimlik-ikincil {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--k-cizgi-acik);
  text-align: center;
}

/* Öteki kapı: kartın dışında, en sessiz basamak. Tek bir bağlantı için `nav`
   bölgesi açılmadı — bir bağlantılık gruplama, ekran okuyucuda bölge listesini
   şişirmekten başka bir şey yapmaz. */
body.koyu .kimlik-oteki {
  margin: 22px 0 0;
  text-align: center;
  font-size: var(--yazi-govde);
  color: var(--k-metin-soluk);
}

body.koyu .kimlik-oteki a { color: var(--k-metin); text-underline-offset: 3px; }
body.koyu .kimlik-oteki a:hover { color: var(--k-baslik); }

/* Aynı yerde ikinci bir satır varsa (parola akışında telefon satırı) daha ince
   durur ve üstündekine yaklaşır — iki ayrı blok değil, tek bir dipnot kümesi.

   Yakınlaşma KARDEŞ seçicisine bağlıdır. Koşulsuz yazılıydı ve `bittiSayfasi`de
   telefon satırı tek başına duruyor: orada 8px, dipnotu kartın dibine
   yapıştırıyordu. Kural artık yalnız gerçekten ikinci satırken uygulanır. */
body.koyu .kimlik-oteki-ince { font-size: var(--yazi-kucuk); }
body.koyu .kimlik-oteki + .kimlik-oteki-ince { margin-top: 8px; }

/* Kart dışı yardımcı bloklar — satır içi style yerine. */
body.koyu .kimlik-uyari { margin-top: 22px; }
body.koyu .kimlik-bilgi { margin-top: 0; color: var(--k-metin-soluk); }
body.koyu .kimlik-eylem { margin: 20px 0 0; }

/* ---------- Adım göstergesi (ray) ---------- */

body.koyu .adimlar {
  display: flex;
  gap: 0;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  background: var(--k-panel);
  border: 1px solid var(--k-cizgi-acik);
  border-radius: 12px;
  overflow: hidden;
}

body.koyu .adim {
  flex: 1;
  display: flex;
  gap: 12px;
  align-items: center;
  position: relative;
  padding: 14px 16px;
  min-height: 60px;
  border: 0;
  border-radius: 0;
  background: transparent;
  min-width: 0;
}

body.koyu .adim + .adim { border-left: 1px solid var(--k-cizgi-acik); }

body.koyu .adim-no {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: transparent;
  border: 1px solid var(--k-cizgi);
  color: var(--k-metin-soluk);
  font-weight: 700;
  font-size: var(--yazi-govde);
  font-variant-numeric: tabular-nums;
}

body.koyu .adim-ad { color: var(--k-baslik); font-weight: 700; }
/* Kırpma kaldırıldı: kullanıcı harf aralığını büyütebilir (WCAG 1.4.12) ve
   kırpılmış metin bilgi kaybına döner. */
body.koyu .adim-alt {
  color: var(--k-metin-soluk);
  font-size: var(--yazi-kucuk);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

body.koyu .adim-etkin { background: var(--k-panel-ust); }
body.koyu .adim-etkin .adim-no {
  background: var(--k-vurgu);
  border-color: var(--k-vurgu);
  color: var(--k-vurgu-metin);
}

body.koyu .adim-bitti .adim-no {
  background: var(--k-vurgu-yuzey);
  border-color: var(--k-vurgu);
  color: var(--k-vurgu);
}

/* "Bekliyor" hâli opaklıkla verilmez: opacity kenarlığı da soldurur ve
   1.4.11'in 3:1'inin altına düşürür. Renk ve dolgu farkıyla verilir. */
body.koyu .adim-bekliyor { opacity: 1; }
body.koyu .adim-bekliyor .adim-ad { color: var(--k-metin-soluk); font-weight: 600; }

/* İlerleme çizgisi — tamamlanmış ve etkin segmentin altında ince yeşil şerit */
body.koyu .adim-bitti::after,
body.koyu .adim-etkin::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--k-vurgu);
}

/* ---------- Tıklanabilir adım ----------
   Tamamlanmış adım bir bağlantı değil, `form` niteliğiyle üyelik formunu
   hedefleyen bir gönder düğmesidir. `formnovalidate` ZORUNLUDUR: yoksa
   mevcut adımdaki zorunlu alanlar geri dönüşü engeller ve kullanıcı sebebini
   göremez.

   Etkin ve bekleyen adımlar düz metindir — devre dışı düğme DEĞİL: devre dışı
   bir denetim ekran okuyucuda gereksiz gürültü yapar ve odak sırasında
   belirsizlik yaratır. */

body.koyu .adim-git {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
}

/* Gerilmiş hedef: tüm segment tıklanır (≈ genişlik × 60px, 2.5.8 AAA). */
body.koyu .adim-git::after { content: ''; position: absolute; inset: 0; }

body.koyu .adim-bitti:hover { background: var(--k-panel-ust); }
body.koyu .adim-bitti:hover .adim-no { background: #20452F; }
/* Renk dışı affordance (1.4.1): alt çizgi sükûnette yok, hover/odakta doğar. */
body.koyu .adim-bitti:hover .adim-ad { text-decoration: underline; text-underline-offset: 3px; }
body.koyu .adim-bitti:active { background: #202832; }

/* ✓ ile ← arasında yalnız opaklık takası — yer değiştirme yok, derleyici
   katmanında kalır. İkisi de `.adim-no`nun aynı ızgara hücresinde üst üste. */
body.koyu .adim-bitti .adim-no > * { grid-area: 1 / 1; transition: opacity 160ms ease; }
body.koyu .adim-geri-im { opacity: 0; }
body.koyu .adim-bitti:hover .adim-im { opacity: 0; }
body.koyu .adim-bitti:hover .adim-geri-im { opacity: 1; }

/* Ekran okuyucuya söylenen, ekranda görünmeyen durum metni. `display:none`
   kullanılmaz — o, içeriği erişilebilirlik ağacından da siler. */
.gorsel-gizli {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Ray `overflow: hidden` taşıdığı için dış halka kırpılırdı; içeri çizilir.
   forced-colors altında box-shadow hiç çizilmez, saydam outline ise Highlight
   rengine çevrilir — bu yüzden ikisi birlikte yazılır. */
body.koyu .adim:has(> .adim-git:focus-visible) {
  box-shadow: inset 0 0 0 2px var(--k-odak);
  outline: 2px solid transparent;
  outline-offset: -2px;
  background: var(--k-panel-ust);
}

body.koyu .adim:has(> .adim-git:focus-visible) .adim-ad {
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.koyu .adim:has(> .adim-git:focus-visible) .adim-im { opacity: 0; }
body.koyu .adim:has(> .adim-git:focus-visible) .adim-geri-im { opacity: 1; }

/* `:has()` desteklenmeyen tarayıcıda halka düğmenin çevresine çizilir. */
body.koyu .adim-git:focus-visible { outline: 2px solid var(--k-odak); outline-offset: -3px; }
body.koyu .adim:has(> .adim-git:focus-visible) .adim-git:focus-visible { outline: none; }

/* ---------- Dikey adım listesi ----------
   Aynı imleme, farklı eksen. Yatay ray formun üstünde bir satır yer kaplıyor
   ve üç adımın açıklamasını 1/3 genişliğe sıkıştırıyordu; dikeyde her adım
   tam satır genişliğinde okunur ve sayfadan bir blok eksilir.

   Konteyner çerçevesi ve dolgusu kaldırılır: kutu içinde kutu olmasın diye
   adımlar doğrudan yan sütunda durur. Ray dolgusu (`--k-panel`) artık
   konteynerin değil ETKİN ADIMIN işidir — yüzey merdiveni bozulmaz.

   Yalnız iki sütunlu düzende (≥900px) geçerlidir. Dar ekranda hepsi düşer ve
   taban `.adimlar` kuralları, yani yatay ray, yeniden yürürlüğe girer. */

@media (min-width: 900px) {
  body.koyu .adimlar-dikey {
    flex-direction: column;
    margin: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }

  body.koyu .adimlar-dikey .adim {
    flex: 0 0 auto;
    align-items: flex-start;
    gap: 13px;
    min-height: 0;
    padding: 11px 12px;
    margin-bottom: 15px;
    border-radius: 10px;
  }

  body.koyu .adimlar-dikey .adim:last-child { margin-bottom: 0; }
  body.koyu .adimlar-dikey .adim + .adim { border-left: 0; }
  body.koyu .adimlar-dikey .adim-git { align-items: flex-start; gap: 13px; }

  /* Yatay raydaki alt şerit dikeyde anlamsız: ilerlemeyi bağlantı çizgisi
     anlatır. `content: none` ile sözde eleman hiç üretilmez. */
  body.koyu .adimlar-dikey .adim-bitti::after,
  body.koyu .adimlar-dikey .adim-etkin::after { content: none; }

  /* Bağlantı çizgisi — numara kutusunun altından bir sonrakinin üstüne iner.
     `left: 28px` = 12px dolgu + 34px kutunun yarısı. `bottom` negatif: çizgi
     15px'lik boşluğa taşar. Uçlar `top`/`bottom` ile bağlı olduğundan, adım
     metni iki satıra sarsa da çizgi kendiliğinden uzar. */
  body.koyu .adimlar-dikey .adim:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 28px;
    top: 51px;
    bottom: -19px;
    width: 2px;
    border-radius: 1px;
    background: var(--k-cizgi-acik);
  }

  body.koyu .adimlar-dikey .adim-bitti::before { background: var(--k-vurgu); }

  /* Etkin adımın dolgusu karta karşı yalnız 1.13:1 — bilerek. "Buradasınız"
     bilgisini taşıyan şey dolgu DEĞİL, yeşil çiptir (ve `aria-current`, ve
     ekran okuyucuya söylenen "bu adımdasınız"). Dolgu sadece hafif bir bant.
     Görünür olsun diye `--k-panel-ust`e çıkarılsaydı merdivende beşinci bir
     kalıcı katman açılırdı; o değer hover'a ayrılmıştır. */
  body.koyu .adimlar-dikey .adim-etkin { background: var(--k-panel); }
}

/* ---------- Kayıt tipi kartları ---------- */

body.koyu .tip-kart {
  background: var(--k-panel);
  border: 1px solid var(--k-cizgi);
  border-radius: 12px;
  transition: background 200ms ease, border-color 200ms ease;
}

body.koyu .tip-kart:hover { background: var(--k-panel-ust); border-color: var(--k-cizgi-hover); }
body.koyu .tip-kart:has(input:checked) { background: var(--k-secili); border-color: var(--k-vurgu); }
body.koyu .tip-kart input { accent-color: var(--k-vurgu); }
body.koyu .tip-govde strong { color: var(--k-baslik); }
body.koyu .tip-govde span { color: var(--k-metin-soluk); }

body.koyu .firma-not { color: var(--k-baslik); }

/* Firma alanları: ızgara satırı açılımı — `display:none` geçişlenemez,
   `grid-template-rows: 0fr → 1fr` geçişlenebilir. */
body.koyu .firma-alanlari {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 260ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 200ms ease;
  opacity: 0;
  margin-top: 0;
}

body.koyu .firma-ic { overflow: hidden; min-height: 0; }

body.koyu .tip-secim:has(input[value="kurumsal"]:checked) .firma-alanlari {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 18px;
}

/* ---------- Ofis kartları ve özet ---------- */

body.koyu .ofis-kart {
  background: var(--k-panel);
  border: 1px solid var(--k-cizgi-acik);
  color: var(--k-metin-soluk);
}

body.koyu .ofis-kart strong { color: var(--k-baslik); }

body.koyu .ozet {
  background: var(--k-panel);
  border: 1px solid var(--k-cizgi-acik);
  border-radius: 12px;
}

body.koyu .ozet-satir { border-bottom: 1px solid var(--k-cizgi-acik); }
body.koyu .ozet-satir:last-child { border-bottom: 0; }
body.koyu .ozet-satir:nth-child(even) { background: var(--k-zebra); }
body.koyu .ozet-satir span { color: var(--k-metin-soluk); }
body.koyu .ozet-satir strong { color: var(--k-baslik); font-variant-numeric: tabular-nums; }

/* ---------- Durum kutuları ----------
   Hata yalnız renkle anlatılmaz; kalın önek metni taşır (1.4.1). */

body.koyu .form-mesaj-hata {
  background: var(--k-hata-yuzey);
  border: 1px solid var(--k-hata);
  border-radius: 10px;
  color: var(--k-hata);
  padding: 12px 15px;
}

body.koyu .form-mesaj-basari {
  background: var(--k-basari-yuzey);
  border: 1px solid var(--k-basari);
  border-radius: 10px;
  color: var(--k-basari);
  padding: 12px 15px;
}

body.koyu .uyari {
  background: var(--k-bilgi-yuzey);
  border-left: 3px solid var(--k-bilgi);
  border-radius: 10px;
  color: var(--k-metin);
}

body.koyu .uyari strong { color: var(--k-baslik); }

/* ---------- Hareket ----------
   Kart girişi: adımlar arası boş kare hissini kaldıran tek şey budur.
   Belgeler arası @view-transition Chromium'a özgüdür ve sayfa yükünde
   çalışır; bu animasyon her tarayıcıda çalışır. */

@keyframes kimlik-giris {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

body.koyu .form-sar,
body.koyu .adimlar,
body.koyu .ozet {
  animation: kimlik-giris 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.koyu .form-sar { animation-delay: 40ms; }

/* Hareket duyarlılığı: durum bilgisi taşıyan geçişler (zemin, alt çizgi,
   halka) kalır; yalnız yer değiştirme ve süre kalkar. */
@media (prefers-reduced-motion: reduce) {
  body.koyu .form-sar,
  body.koyu .adimlar,
  body.koyu .ozet { animation: none; }

  body.koyu .firma-alanlari,
  body.koyu .tip-kart,
  /* Seçici `.adim-im-kap` yazıyordu; öyle bir sınıf hiçbir yerde üretilmiyor
     (sablon.js `.adim-no` basıyor). Ölü kural olduğu için ✓ ↔ ← geçişi hareket
     duyarlılığında kapanmıyordu. */
  body.koyu .adim-bitti .adim-no > * { transition-duration: 1ms; }
}

/* ---------- Yüksek kontrast ----------
   Dekoratif çizgiler denetim sınırı seviyesine yükseltilir. */

@media (prefers-contrast: more) {
  body.koyu { --k-cizgi-acik: #7A8794; }
}

/* ---------- Zorlanmış renkler (Windows Yüksek Kontrast) ----------

   `forced-colors: active` altında tarayıcı `color`, `background-color`,
   `border-color` ve `box-shadow`u kendi sistem paletiyle DEĞİŞTİRİR. Bu iyi
   bir şeydir — ama renk farkıyla anlatılan her şey o anda kaybolur, çünkü
   ayrı ayrı seçtiğimiz renklerin hepsi aynı iki-üç sistem rengine çöker.

   Bu yüzeyde renkle anlatılan üç şey vardı ve üçü de kayboluyordu:

     1. Etkin adım çipi (yeşil dolgu) ile bekleyen çip (saydam) aynı görünüyordu
        — yani "buradasınız" bilgisi tamamen gidiyordu.
     2. İlerleme çizgisi (tamamlanmış = yeşil, bekleyen = gri) tek renge iniyordu.
     3. Birincil düğme (dolu yeşil) ile çerçeve düğme aynı ButtonFace'e iniyordu.

   Çözüm, kendi renklerimizi zorlamak DEĞİL (`forced-color-adjust: none` tam da
   kullanıcının kapatmak istediği şeyi geri açar); sistemin KENDİ anlamlı
   renklerini kullanmaktır. `Highlight`/`HighlightText` her temada Canvas'tan
   ayrışmak üzere tanımlıdır — seçili/etkin şeyin rengi odur.

   Tamamlanmış adımın ✓ imi zaten renk dışı bir kanaldır, dokunulmaz. */

@media (forced-colors: active) {
  /* "Buradasınız": dolgu sistemin seçim rengine döner. */
  body.koyu .adim-etkin .adim-no {
    background: Highlight;
    color: HighlightText;
    border-color: Highlight;
  }

  /* Tamamlanmış çip: dolgusu yok, ✓ ile ayrışır — ama kenarı belirgin kalsın. */
  body.koyu .adim-bitti .adim-no {
    background: Canvas;
    color: CanvasText;
    border-color: CanvasText;
  }

  /* Dikey listedeki bağlantı çizgisi bir `background`tır; zorlanmış renklerde
     sistem rengiyle yeniden boyanır, yoksa görünmez olurdu. */
  body.koyu .adimlar-dikey .adim:not(:last-child)::before { background: CanvasText; }
  body.koyu .adimlar-dikey .adim-bitti::before { background: Highlight; }

  /* Yatay raydaki ilerleme şeridi için de aynısı. */
  body.koyu .adim-bitti::after,
  body.koyu .adim-etkin::after { background: Highlight; }

  /* Etkin adımın satır dolgusu zaten silikti (1.13:1); burada hiç çizilmesin,
     yoksa Canvas'a düşüp çipin altını yutabilir. */
  body.koyu .adimlar-dikey .adim-etkin { background: Canvas; }

  /* Birincil düğme ile çerçeve düğme arasındaki fark yalnız dolgudaydı. */
  body.koyu .dugme-birincil {
    background: Highlight;
    color: HighlightText;
    border-color: Highlight;
  }

  body.koyu .dugme-cerceve {
    background: Canvas;
    color: LinkText;
    border-color: LinkText;
  }

  /* Seçili kayıt tipi kartı: dolgu ve kenar rengiyle anlatılıyordu. Radyo
     düğmesinin kendi işareti kalır, ama kart da ayrışsın. */
  body.koyu .tip-kart:has(input:checked) {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }

  /* Google düğmesinin kenarı ve ayıracın çizgileri zorlanmış renklerde
     kaybolmasın — ikisi de yalnız renkle var. */
  body.koyu .google-dugme { border-color: LinkText; }
  body.koyu .google-ayirac::before,
  body.koyu .google-ayirac::after { background: CanvasText; }
}

/* ---------- Dar ekran ---------- */

@media (max-width: 720px) {
  body.koyu .adimlar { flex-direction: column; }
  body.koyu .adim + .adim { border-left: 0; border-top: 1px solid var(--k-cizgi-acik); }
  body.koyu .form-sar { padding: 22px 18px; }
  body.koyu .form-sar.kimlik-duzen { padding: 22px 18px 26px; }
  body.koyu .bolum { padding: 34px 0 56px; }
  body.koyu .kimlik-tepe { margin-bottom: 22px; }
  body.koyu .kimlik-alt-ic { justify-content: flex-start; }
}