/* azatech – Adım adım sihirbaz (Paket I, madde 24): Teklif oluştur ve Satış onay formu.
 * app.css ve mobil.css'ten SONRA yüklenir. Renk üretmez (mevcut değişkenler); boşluk/gölge belirteçleri belirtec.css'ten.
 * Mantıksal özellikler (inline/block) kullanılır, bu yüzden sağdan sola dillerde (fa/ar) ek kural gerekmez.
 * Eski tek sayfa görünümü: localStorage['azt-sihirbaz']='kapali' (sihirbaz.js hiçbir şey sarmaz, bu kurallar etkisiz kalır). */
.sbz-gz { display: none !important; }

/* ---- Adım göstergesi ---- */
.sbz-ust { margin: 0 0 var(--b-1); }
.sbz-adimlar { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--b-2); counter-reset: none; }
.sbz-adimlar li { flex: 1 1 0; min-width: 0; position: relative; }
.sbz-adimlar li + li::before { content: ''; position: absolute; inset-block-start: 14px; inset-inline-end: calc(50% + 18px); inset-inline-start: calc(-50% + 18px); height: 2px; background: var(--line); }
.sbz-adimlar li.tamam + li::before, .sbz-adimlar li.aktif::before { background: var(--navy); }
.sbz-ad { all: unset; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: var(--b-1); width: 100%; cursor: pointer; font-size: var(--yz-xs); font-weight: 600; color: var(--mut); text-align: center; padding: var(--b-1) 0; border-radius: var(--r-sm); }
.sbz-ad:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.sbz-no { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line); background: var(--panel); display: grid; place-items: center; font-size: var(--yz-xs); font-weight: 700; color: var(--mut); position: relative; z-index: 1; transition: background var(--hrk), border-color var(--hrk), color var(--hrk); }
.sbz-yazi { line-height: 1.25; }
li.aktif .sbz-no { border-color: var(--navy); background: var(--navy); color: #fff; }
li.aktif .sbz-ad { color: var(--navy); }
li.tamam .sbz-no { border-color: var(--navy); background: var(--panel); color: var(--navy); }
li.tamam .sbz-no::before { content: '✓'; }
li.tamam .sbz-no span { display: none; }

/* ---- Alt düğme çubuğu ---- */
.sbz-alt { display: flex; gap: var(--b-2); align-items: center; justify-content: space-between; margin-block-start: var(--b-2); padding-block-start: var(--b-3); border-block-start: 1px solid var(--line); }
.sbz-alt > * { margin: 0; }
.sbz-alt .sbz-geri { margin-inline-end: auto; }
.sbz-alt .sbz-ileri, .sbz-alt .primary { margin-inline-start: auto; }
.sbz-alt button.dl { width: auto; flex: 1 1 auto; }
.sbz .sbz-alt button { min-height: 40px; }

/* ---- Satır içi hata (Ortak.hataYaz: small.fx-hata) ---- */
.sbz .fx-hata { display: block; margin-block-start: var(--b-1); font-size: var(--yz-xs); font-weight: 600; color: var(--bad, #B3261E); }
.sbz [aria-invalid=true] { border-color: var(--bad, #B3261E) !important; }

/* ---- Özet (3. adım) ---- */
.sbz-ozet { display: none; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); box-shadow: var(--g-1); padding: var(--b-3) var(--b-4); }
.sbz .sbz-ozet { display: block; }
.sbz-ozet h4 { margin: 0 0 var(--b-2); font-size: var(--yz-sm); }
.sbz-ozet dl { margin: 0; display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: var(--b-1) var(--b-3); font-size: var(--yz-sm); }
.sbz-ozet dt { color: var(--mut); font-weight: 600; }
.sbz-ozet dd { margin: 0; text-align: end; font-weight: 600; overflow-wrap: anywhere; }
.sbz-ozet dd bdi { unicode-bidi: isolate; }
.sbz-ozet .sbz-fark { margin: var(--b-2) 0 0; padding-block-start: var(--b-2); border-block-start: 1px dashed var(--line); font-size: var(--yz-xs); color: var(--mut); }
.sbz-ozet .sbz-tut dd { font-size: var(--yz-lg); }
.sbz-bilgi { font-size: var(--yz-xs); color: var(--mut); margin: 0; }

/* ---- Masaüstü / iPad: adımlar yan panelin içinde; alt çubuk yapışkan ---- */
@media (min-width: 641px) {
  .sbz .sbz-alt { position: sticky; inset-block-end: 0; background: var(--panel); padding-block: var(--b-3); z-index: 2; }
}

/* ---- Telefon (≤640px): tam ekran adım adım, alt sabit çubuk, güvenli alan ---- */
@media (max-width: 640px) {
  .sbz-kap { display: block !important; }
  .sbz-kap > aside.sbz { border: 0; padding: var(--b-3) var(--b-4) calc(84px + env(safe-area-inset-bottom)); min-height: calc(100dvh - var(--top-h, 48px) - 58px); }
  .sbz-kap:not([data-sbz-adim="3"]) > .stage, .sbz-kap:not([data-sbz-adim="3"]) > section.stage { display: none !important; }
  .sbz-kap[data-sbz-adim="3"] > .stage, .sbz-kap[data-sbz-adim="3"] > section.stage { padding-block-end: calc(84px + env(safe-area-inset-bottom)); }
  .sbz-alt { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 70; margin: 0; background: var(--panel); border-block-start: 1px solid var(--line); box-shadow: var(--g-2); padding: var(--b-2) var(--b-4) calc(var(--b-2) + env(safe-area-inset-bottom)); }
  .sbz .sbz-alt button { min-height: 46px; flex: 1 1 0; }
  .sbz-yazi { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .sbz-no { transition: none; } }

/* ---- Sağdan sola (fa/ar) düzeltmeleri ---- */
.sbz .phn .fx-hata { grid-column: 1 / -1; }
/* Yan menü daralt oku: menü RTL'de sağ kenarda; app.js oku fiziksel sol/sağ seçtiği için RTL'de ters kalıyor, bu yüzden aynalanır.
   (Menü kodu app.js'te düzeltilirse bu kural SİLİNMELİ, yoksa ok yeniden ters döner.) */
[dir="rtl"] .side-tog svg { transform: scaleX(-1); }

/* iPad dikey (641-820px): alt sekme çubuğu (58px) var; yapışkan düğme çubuğu onun üstünde durur */
@media (min-width: 641px) and (max-width: 820px) {
  .sbz .sbz-alt { inset-block-end: calc(58px + env(safe-area-inset-bottom)); }
  .sbz { padding-block-end: 72px; }
}