/* ============================================================
 * stepper.css — ORTAK ADIM MOTORU'nun iskeleti (.st-*)
 * (JS karşılığı: js/core/stepper.js)
 *
 * Dört slider (kurulum · bakiye yükleme · yeni harita · yeni karakter)
 * bu dosyadan boyanır; görünüş kurulum sihirbazının ("Sükût") birebir
 * aynısıdır (kullanıcı kararı 2026-09-29). Buradaki her kural eskiden
 * onboarding.css'teydi; öbür üç ekran kendi kopyalarını (.ast-seq-*,
 * .kseq-*, .wl-wiz/.tp-*) taşıyordu, o kopyalar silindi.
 *
 * Adımların İÇERİĞİ (paket kartları, foto ızgarası, tema karoları…)
 * burada DEĞİL, kendi ekranının dosyasında. Form alanları GLOBAL
 * bileşenlerdir (.field/.input/.textarea/.opt-pill/.select-btn —
 * components.css); burada yalnız motorun içindeki tonları ayarlanır.
 *
 * ÜÇ SUNUM — kök `data-kind`:
 *   panel  sağ paneldeki cam kart, paneli TAM kaplar, boyu sabit
 *   gate   kurulum: mobilde tam ekran (şeffaf), masaüstünde ortalı kart
 *   popup  popup motorunun paneli içinde (sözleşme onayı, çerez kararı):
 *          boyamaz, paneli doldurur; alt şerit ve sayaç yok
 * ============================================================ */

.st-shell {
  /* Sükût'un editoryal serifi — başlık + sayaç aksanı (font dosyası
     yok, sistem yığını → CSP/indirme derdi yok). */
  --st-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  /* Tek padding ritmi (head·content·foot ORTAK). 2026-08-07 kullanıcı
     kararı: TEK değer, mobil/masaüstü ayrımı YOK. */
  --st-pad: 18px;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  color: var(--text); font-family: var(--font);
}

/* ── SUNUM: panel ────────────────────────────────────────────────
   Sağ panelin cam kartı. Panelin kenarına dayanmaz, yüksekliği
   DOLDURUR — adım değişirken kart kıpırdamaz. Reçete karakter kartıyla
   (.kc-card) ve harita detayıyla aynı çerçeve ailesinden.
   Pay panele DEĞİL karta yazılır (margin): #view-* kutularını sohbet
   ve harita detayı da kullanıyor, oraya padding vermek onları da
   içeri iterdi. K10: kabın KENDİSİNE opacity yazılmaz, blur ölür. */
.st-shell[data-kind="panel"] {
  flex: 1; min-height: 0;
  margin: 20px;
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--surface-2);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-2), var(--glass-edge);
}
/* Telefonda pay daralır (kart ekranı yemesin) — projenin 720 eşiği. */
@media (max-width: 720px) {
  .st-shell[data-kind="panel"] { margin: 10px; }
}

/* ── SUNUM: gate (kurulum) ───────────────────────────────────────
   Mobil: tam ekran, kendi zemini YOK — altındaki gerçek arkaplan
   (#bgfx) görünür (kök .ob-root da şeffaf, onboarding.css).
   Giriş jesti kabuğun KENDİSİNDE: şeffaf kökte oynasaydı kartın
   frost'u 240ms boyunca düz leke kalıyordu (K10, 2026-08-16). */
.st-shell[data-kind="gate"] { position: absolute; inset: 0; animation: st-in var(--tr-med); }
@keyframes st-in { from { opacity: 0; } to { opacity: 1; } }
/* FROST ADIMA ÖZEL (2026-08-03): okunacak metin taşıyan adımlar
   (profil, sözleşme) mobilde tüm ekranı buzlar; dil ve tema adımları
   şeffaf kalır → arkaplan/renk önizlemesi görünür. */
@media (max-width: 719px) {
  .st-shell[data-kind="gate"].is-frost {
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    backdrop-filter: blur(20px) saturate(1.4);
  }
  /* Karşılama adımlarında form dibe yaslanır (başlık tepede, arada
     arkaplan görünür); masaüstü kartta içerik üstten akar. */
  .st-shell[data-kind="gate"] .st-view.is-bottom .st-form { margin-top: auto; padding-top: 22px; }
}
/* MASAÜSTÜ: ortalanmış cam kart. Boy auto → her adım kendi içeriğinin
   boyunu alır; ekrana sığmazsa max-height kartı pencereye kilitler ve
   taşma .st-content içinde kayar. Adım geçişindeki boy farkını
   stepper.js animasyonla kapatır. */
@media (min-width: 720px) {
  .st-shell[data-kind="gate"] {
    position: relative; inset: auto;
    width: min(560px, 100%); height: auto; max-height: 100%;
    background: var(--surface-3);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    backdrop-filter: blur(20px) saturate(1.4);
    border-radius: 24px;
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .55);
    overflow: hidden;
  }
  /* Aramalı alt görünüm dolu bir liste yüzeyi ister: auto kalsa her tuş
     vuruşunda süzülen liste boyu kartı titretirdi → sabit boy. */
  .st-shell[data-kind="gate"].is-picking { height: min(640px, 100%); }
  .st-shell[data-kind="gate"] .st-view { min-height: 0; }
}

/* ── SUNUM: popup (2026-10-05) ──────────────────────────────────
   Popup motorunun panelinin İÇİ (uygulama içi sözleşme onayı ve çerez
   kararı). Zemin,
   köşe ve gölge PANELİN (popup.css "zemin tek karar") — kabuk boyamaz,
   paneli DOLDURUR: boyu panelin, içerik değişince kıpırdamaz. Alt şerit
   ve sayaç YOK (stepper.js çizmez); alt payı içerik taşır, ev çubuğu
   dahil. Sağ yuvada popup'ın X'i (.st-aside). */
.st-shell[data-kind="popup"] { flex: 1; min-height: 0; }
.st-shell[data-kind="popup"] .st-content { padding-bottom: calc(var(--safe-bottom) + var(--st-pad)); }

/* ── Üst şerit (SABİT) ─────────────────────────────────────────
   Her yandan --st-pad; ÜST'e çentik/durum çubuğu payı eklenir
   (masaüstünde ve çentiksiz cihazda env() 0 → düpedüz 18px).
   Sütun 560px: geniş panelde şerit, içerik ve alt şerit ortada aynı
   hizada durur (kurulum kartının kendi genişliği de 560). */
.st-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  width: 100%; max-width: 560px; justify-self: center;
  padding: calc(var(--safe-top) + var(--st-pad)) var(--st-pad) var(--st-pad);
}
/* Sol yuva: panellerde akışın adı, kurulumda marka künyesi (işaret +
   ad). ── MARKA KÜNYESİ — ÜÇ YUVADA TEK ÖLÇÜ (2026-08-23, kullanıcı) ──
   Header · giriş ekranı · kurulum sihirbazı (bu yuva): işaret 32 · yazı
   17/700 · boşluk 11 · aralık -.02em (tokens.css). Üç dosyada da bu not
   var (shell.css · auth.css · burası); birini değiştiren üçünü
   değiştirsin. Akış adı da aynı yuvada aynı ölçüyle durur — dört
   slider'ın şeridi birbirinin aynısı görünür. */
.st-label {
  display: inline-flex; align-items: center; gap: var(--brandmark-gap); min-width: 0;
  font-weight: 700; font-size: var(--brandmark-name); letter-spacing: var(--brand-tracking);
}
.st-count { flex: 0 0 auto; font-family: var(--st-serif); font-style: italic; color: var(--text-3); font-size: 15px; font-variant-numeric: tabular-nums; }
/* Sağ yuvanın 'popup' hâli: sayaç yerine düğme (X) — şerit taban
   çizgisine değil ortaya hizalanır. */
.st-aside { flex: 0 0 auto; align-self: center; display: flex; }
.st-shell.is-picking .st-head { display: none; }

/* ── İçerik (KAYAR) ─────────────────────────────────────────────
   Kaydırma çubuğu AYRI TANIMLANMAZ → webapp'in tek global çubuğu
   (base.css). İçerik kutusu kartın tam genişliğinde (çubuk kart
   kenarında), okunur sütun .st-view'da: 524 = 560 − iki yandan --st-pad. */
.st-content { overflow-y: auto; padding: 0 var(--st-pad); }
.st-view { min-height: 100%; display: flex; flex-direction: column; max-width: 524px; margin: 0 auto; }
/* Dolduran görünüm (sözleşme slaytı): adım .st-content'i tam doldurur,
   taşan yalnız içteki METİN olur — iç içe iki kaydırma doğmaz. Zincirin
   her halkasında min-height:0 yoksa flex çocuk içeriğinden küçülemez.
   Motor yalnız kabı verir; içeriğin kendisi kalan boyu doldurur (deste
   bunu .pd-deck'le yapar — popup'ta da aynı kap, legal.css). */
.st-view.is-fill { height: 100%; min-height: 0; }
.st-view.is-fill .st-form { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* TEK BAŞLIK BOYU (2026-08-07 kullanıcı: "slide başlıkları aynı px
   olmak zorunda") — adım geçişinde başlık zıplamaz. */
.st-h { font-family: var(--st-serif); font-weight: 500; font-size: 30px; line-height: 1.08; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
@media (min-width: 720px) { .st-h { font-size: 34px; } }
.st-rule { width: 40px; height: 2px; background: var(--accent); margin: 20px 0 0; }
.st-sub { color: var(--text-3); font-size: 14px; line-height: 1.7; margin: 18px 0 0; }
.st-form { margin-top: 22px; }
.st-hint { margin-top: 22px; font-size: 12px; line-height: 1.55; color: var(--text-4); }
/* Zorunlu alan yıldızı */
.st-req { color: var(--accent-pop); margin-left: 2px; }
/* Etiketin yanındaki sönük not (sayaç, kısa açıklama) */
.st-note { font-weight: 400; color: var(--text-3); margin-left: 4px; }
/* "Ya da …" — aynı zorunluluğun İKİNCİ yolunun etiketi (tek renk,
   özel tutar). Kalan ölçüsünü .field > label verir. */
.st-or { margin-top: 28px; letter-spacing: .15em; text-transform: uppercase; }

/* Form kontrolleri motorun içinde --surface-3: cam kartın (--surface-2
   / kurulumda --surface-3) üstünde katmanlanıp belirgin ayrışır
   (2026-08-03 kurulum profil adımının ayarı, artık her adımda). */
.st-form .input { background: var(--surface-3); }
.st-form .textarea { background: var(--surface-3); }
.st-form .select-btn { background: var(--surface-3); }
.st-form .opt-pill { background: var(--surface-3); }
/* GRADIENT YOK (2026-08-07 kullanıcı): vurgu motor boyunca düz
   --accent-strong; global .opt-pill.active gradient basar → düzleşir. */
.st-form .opt-pill.active { background: var(--accent-strong); }

/* ── Alt şerit (SABİT): ← (SOL) · İleri/bitiş (SAĞ) ─────────────
   Üst şeridin aynası: ALT'a ev çubuğu payı (--safe-bottom). */
.st-foot {
  display: flex; align-items: center; gap: 12px;
  width: 100%; max-width: 560px; justify-self: center;
  padding: var(--st-pad) var(--st-pad) calc(var(--safe-bottom) + var(--st-pad));
}
.st-shell.is-picking .st-foot { display: none; }
/* Geri — daire zeminli ikon düğme. Gizliyken de YER TUTAR → İleri
   sağ kenarda sabit kalır. */
.st-back { flex: 0 0 auto; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--surface-3); color: var(--text); display: grid; place-items: center; cursor: pointer; transition: filter var(--tr-fast), transform var(--tr-fast); }
.st-back:hover { filter: brightness(1.15); }
.st-back:active { transform: scale(.95); }
.st-back[hidden] { display: grid; visibility: hidden; }
/* İleri / bitiş — accent pill (cüzdan "Yükle"nin .wl-topup ikizi).
   Aktifken nabız (.pulse-attn, markup'a stepper.js ekler). */
.st-next { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; min-width: 128px; padding: 13px 28px; border: 0; border-radius: var(--r-full); background: var(--accent-strong); color: var(--on-accent); font-weight: 700; font-size: 15px; line-height: 1.2; cursor: pointer; user-select: none; white-space: nowrap; transition: filter var(--tr-fast), transform var(--tr-fast); }
.st-next:hover { filter: brightness(1.15); }
.st-next:active { transform: scale(.97); }
/* Pasif hâl SÖNÜK ama TIKLANABİLİR: basınca eksik alanlar işaretlenir. */
.st-next.is-off { background: var(--surface-3); color: var(--text-3); }

/* ── Eksik zorunlu alan (2026-08-03 · 2026-08-07) ────────────────
   İki eşzamanlı animasyon, AYNI ANDA başlar AYNI ANDA (2s) biter →
   uyarı bitince ekran kalıntısız normale döner:
     • st-ring — eksik alanın halkası yanıp söner (400ms × 5)
     • st-dim  — geri kalan her şey kararır, bekler, geri gelir
   Halka KALICI DEĞİL: keyframe'in iki ucu saydam, dolu olan ORTASI.
   Geriye tek iz accent'e dönmüş ETİKET kalır, alan dolunca o da kalkar.
   HALKAYI TAŞIYAN: alanın içinde `data-ring` işaretli kontrol —
     "in"  kutunun çevresine box-shadow (input, pill, kart, avatar)
     "out" outline (seçili hâlini outline ile gösteren karolar: tema,
           paket, sağlayıcı…). O karo kendi bloğunda outline-offset'ini
           yazar; halka seçilince göreceği çerçevenin ta kendisidir.
   Alfa üçlüden (literal renk YASAK). */
.st-form .field.is-missing > label { color: var(--accent); }
/* Alanın altındaki açıklama (sınırlar gibi — "Min $5 · Max $500") da
   yanar: halka NEREDE dediğini, bu satır NEDEN dediğini söyler. */
.st-form .field.is-missing > .hint { color: var(--accent); }
.st-form .field.is-missing [data-ring="in"] { animation: st-ring 400ms ease-in-out 5; }
.st-form .field.is-missing [data-ring="out"] { outline: 2px solid transparent; animation: st-ring-out 400ms ease-in-out 5; }
@keyframes st-ring {
  0%, 100% { box-shadow: 0 0 0 1.5px rgba(var(--accent-rgb), 0); }
  50%      { box-shadow: 0 0 0 1.5px rgba(var(--accent-rgb), 1); }
}
@keyframes st-ring-out {
  0%, 100% { outline-color: rgba(var(--accent-rgb), 0); }
  50%      { outline-color: rgba(var(--accent-rgb), 1); }
}
.st-form.is-dim .field { animation: st-dim 2s ease both; }
.st-form.is-dim .st-hint { animation: st-dim 2s ease both; }
.st-form.is-dim .field.is-lit { animation: none; }
/* Kararma 2s'nin ilk %12'sinde iner, %78'e dek sönük bekler, son %22'de
   geri gelir → son halka sönmesiyle birlikte biter. */
@keyframes st-dim {
  0%        { opacity: 1; }
  12%, 78%  { opacity: .32; }
  100%      { opacity: 1; }
}
/* Hareket istemeyen kullanıcıda animasyon susar; uyarının TEK taşıyıcısı
   animasyon olduğu için halka STATİK yanar (yoksa geri bildirim kalmazdı). */
@media (prefers-reduced-motion: reduce) {
  .st-shell[data-kind="gate"] { animation: none; }
  .st-form .field.is-missing [data-ring="in"] { animation: none; box-shadow: 0 0 0 1.5px var(--accent); }
  .st-form .field.is-missing [data-ring="out"] { animation: none; outline-color: rgb(var(--accent-rgb)); }
  .st-form.is-dim .field { animation: none; }
  .st-form.is-dim .st-hint { animation: none; }
}