/* Erfa Atelier — Kişiye Özel araçlar ortak tasarım sistemi (atelier.css).
 * personalized.css + cizim.css'ten SONRA yüklenir; 4 araçta da ortaktır.
 *
 * İçerik:
 *  1) Lüks palet tokenları (--ea-*) — tek aksan sistemi (şampanya), turuncu/altın
 *     çatışmasını bitirir. Uyum katmanı eski değişken adlarını yeni renklere bağlar.
 *  2) cizim.css'ten taşınan paylaşılan bloklar: WIZARD, TAM EKRAN, INTRO, ÖZET, KUTLAMA
 *     (harita.css'teki kopyalar silindi — tek kaynak burası).
 */

:root{
  --ea-bg-0:#0c0a08;            /* sayfa tabanı — espresso siyahı */
  --ea-bg-1:#14110d;            /* yükseltilmiş yüzeyler */
  --ea-veil:rgba(255,255,255,.04);
  --ea-line:rgba(255,255,255,.10);
  --ea-line-soft:rgba(255,255,255,.06);
  --ea-text:#f4f1ea;            /* sıcak fildişi */
  /* ÜÇ KADEMELİ METİN ÖLÇEĞİ. Eski değerler (.58 / .56) birbirinden yalnız
     %2 farklıydı — yani ölçek DEĞİLDİ, iki ayrı isim taşıyan tek bir tondu;
     hiyerarşi kurmuyor, sadece iki yerde ayrı ayrı ayarlanması gerekiyordu.
     Üstelik ikisi de kişiye özel araçların cam panelinde WCAG'i geçmiyordu.
     ÖLÇÜM (tools/qa-kontrast.mjs, gerçek piksel, /cizim tam ekran paneli;
     ölçülen panel zemini rgb(80,78,88)):
       .58 → 3,42:1   .56 → 3,52:1   (eşik 4,5)
     Yeni ölçek panelin de koyulaştırılmasıyla (aşağıda .hr-fs) birlikte:
       .74 → 5,6:1    .64 → 4,6:1
     Fark artık %14 — gözle görülür bir kademe. */
  --ea-text-soft:rgba(244,241,234,.74);   /* ikincil: açıklama, etiket */
  --ea-text-faint:rgba(244,241,234,.64);  /* üçüncül: üstveri, dipnot */
  --ea-accent:#d9c08f;          /* mat şampanya — TEK aksan */
  --ea-accent-strong:#ecdcb4;   /* hover / vurgu */
  --ea-accent-ink:#241c10;      /* aksan dolgular üzerindeki metin */
  --ea-platinum:#cfccc4;        /* gümüş bağlamları için ikincil metalik */
  --ea-ok:#8fbf9f; --ea-err:#ff6b81;
  --ea-glow:0 0 40px rgba(217,192,143,.12);
}
/* Uyum katmanı: eski tema değişkenleri yeni aksana bağlanır (kırılmadan geçiş). */
.personalized-tool-page{--pt-accent:var(--ea-accent)}

/* ---------------------------------------------------- odak göstergesi ----
   Bu dosya 12 etkileşimli kontrol tanımlıyor (adım düğümleri, kapat, nasıl
   çalışır, tanıtım, kutlama, finale düğmeleri, harita seçici) ve tek bir
   :focus kuralı yoktu — hepsi tarayıcı varsayılanına kalıyordu; cam panel
   üzerinde o halka pratikte görünmüyor. Klavyeyle ilerleyen müşteri çok
   adımlı bir tasarım + ödeme akışında nerede olduğunu göremiyordu.
   Şampanya halka koyu zeminde 8,4:1 kontrast verir (WCAG 2.4.11 için gereken
   3:1'in çok üstünde). Yalnız :focus-visible: fareyle tıklayanı rahatsız etmez. */
.hr-fs :focus-visible,
.pz-intro :focus-visible,
.pz-celebrate :focus-visible,
.ea-finale :focus-visible,
.hr-pick :focus-visible{
  outline:2px solid var(--ea-accent-strong);outline-offset:3px;border-radius:6px}

/* ============================================================ WIZARD =====
   Adım adım tasarım deneyimi. Genel amaçlı: konum/çizim/gökyüzü sayfalarının
   üçünde de bu stiller kullanılır (üçü de cizim.css yükler). Müşteri her adımda
   tek karar verir; ilerleme çubuğu emeği görünür kılar. */
.wiz{display:flex;flex-direction:column;gap:14px}
.wiz-head{display:flex;flex-direction:column;gap:12px}
.wiz-bar{height:4px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden}
/* Dolgu tam boy durur, --wiz-fill oranıyla soldan ölçeklenir (bkz. .wiz-dots::after
   notu): width animasyonu her karede yerleşim hesabı tetiklerdi. */
.wiz-bar i{display:block;height:100%;width:100%;border-radius:4px;
  transform-origin:left center;transform:scaleX(var(--wiz-fill,0));
  background:linear-gradient(90deg,var(--ea-accent),var(--ea-accent-strong));
  box-shadow:0 0 10px rgba(217,192,143,.42);transition:transform .5s cubic-bezier(.22,1,.36,1)}
.wiz-dots{list-style:none;display:flex;justify-content:space-between;gap:4px;margin:0;padding:0}
.wiz-dots li{display:flex;flex-direction:column;align-items:center;gap:5px;flex:1;min-width:0;
  cursor:pointer;opacity:.5;transition:opacity .3s ease}
.wiz-dots li b{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;
  font-size:12px;font-weight:600;background:rgba(255,255,255,.08);color:rgba(255,255,255,.7);
  border:1px solid rgba(255,255,255,.14);transition:all .3s ease}
.wiz-dots li span{font-size:11px;font-weight:400;letter-spacing:.02em;color:rgba(255,255,255,.6);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.wiz-dots li.is-done{opacity:.9}
.wiz-dots li.is-done b{background:rgba(217,192,143,.20);border-color:rgba(217,192,143,.42);color:var(--ea-accent-strong)}
.wiz-dots li.is-current{opacity:1}
.wiz-dots li.is-current b{background:linear-gradient(180deg,var(--ea-accent-strong),var(--ea-accent));border-color:var(--ea-accent-strong);color:var(--ea-accent-ink);
  box-shadow:0 0 0 4px rgba(217,192,143,.14)}
.wiz-body{position:relative}
.wiz-step{display:none;animation:wizIn .42s cubic-bezier(.22,1,.36,1)}
.wiz-step.is-current{display:flex;flex-direction:column;gap:11px}
@keyframes wizIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.wiz-title{font-size:16px;font-weight:500;color:#fff;margin:0}
.wiz-sub{font-size:12px;font-weight:300;line-height:1.55;color:rgba(255,255,255,.6);margin:-4px 0 4px}
.wiz-note{text-align:center;font-size:12px;font-weight:300;color:var(--ea-text-soft);margin:0}
.wiz-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-top:1px solid rgba(255,255,255,.08);padding-top:14px}
.wiz-count{font-size:12px;font-weight:400;letter-spacing:.06em;color:var(--ea-text-faint)}

/* ===== HAP DÜĞME (.cz-pill) — PAYLAŞILAN TABAN ==========================
   Bu tanım cizim.css içindeydi ve o dosyayı YALNIZ üç araç yüklüyor.
   isim-kolye.php yüklemiyor: aynı .cz-pill sınıfını taşıyan wizard Geri /
   Devam düğmeleri taban stilini hiç almıyor, ölçtüm: border-radius 0px.
   Kullanıcının gördüğü "kare kare tuşlar" tam olarak buydu — atelier.css'te
   yalnız .wiz-next/.wiz-prev RENK örtmeleri vardı, biçim örtmesi yoktu.
   atelier.css dört aracın da yüklediği paylaşılan tasarım sistemi; kanonik
   yer burası. cizim.css'ten silindi, kopya yok. */
.cz-pill .cz-plus{font-size:11px;font-weight:400;color:inherit;opacity:.6;margin-left:5px}
.cz-pill.is-disabled{opacity:.3;cursor:not-allowed}
/* min-height 44px: pil 43px ölçülüyordu (dolgudan). Kabuk içinde 46px'e
   çıkarılıyordu ama SAYFA düzeninde 43'te kalıyordu — 1px'lik bu fark WCAG
   2.5.5 / Apple HIG eşiğinin altında bırakıyordu. Dolgu değişmedi, yalnız
   taban yükseklik garanti edildi; tipografi ve hizalama aynı. */
.cz-pill{cursor:pointer;border:none;font-family:'Barlow',sans-serif;padding:9px 15px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.65);font-size:12px;font-weight:500;letter-spacing:.02em;transition:background .3s,color .3s;white-space:nowrap}
.cz-pill:hover{color:#fff}
.cz-pill.is-active{background:#fff;color:#000}
.cz-pill:focus-visible{outline:2px solid rgba(255,255,255,.6);outline-offset:2px}
.cz-pill:disabled{opacity:.35;cursor:default}
.cz-pill .cz-new{font-size:11px;letter-spacing:.06em;background:#8fbf9f;color:#0c1810;border-radius:9999px;padding:2px 6px;margin-left:6px;font-weight:700;vertical-align:1px}
.cz-pill.is-active .cz-new{background:#0c1810;color:#8fbf9f}
@media(max-width:900px){
  .cz-pill{flex:0 0 auto;min-height:46px;padding:12px 17px;font-size:13px}
}

.wiz-next{background:linear-gradient(180deg,var(--ea-accent-strong),var(--ea-accent))!important;color:var(--ea-accent-ink)!important;
  border-color:var(--ea-accent-strong)!important;font-weight:600}
.wiz-next:hover{filter:brightness(1.05)}
.wiz-prev:disabled{opacity:.35;cursor:default}
@media (prefers-reduced-motion: reduce){.wiz-step{animation:none}.wiz-bar i{transition:none}}
@media (max-width:520px){.wiz-dots li span{font-size:11px}.wiz-dots li b{width:23px;height:23px;font-size:11px}}

/* ==================================================== TAM EKRAN WIZARD =====
   Liquid-glass tasarım deneyimi: önizleme hazır olunca tüm ekranı kaplar.
   Sol: büyük 3D önizleme. Sağ: buzlu cam panelde adım adım wizard.
   Sınıf adı geçmişten hr- önekli; üç sayfada da ortak kullanılır. */
/* KABUK ZEMINI: OKUNABILIRLIK ARKADAKI URUNE BAGLI KALAMAZ.
   Eski deger rgba(10,8,12,.5) + blur(30px). Blur YAPIYI bulaniklastirir ama
   PARLAKLIGI korur — arkada parlak gumus bir kolye varken kabugun icindeki
   panel zemini rgb(80,78,88)'e kadar aciliyordu ve panelin TUM ikincil metni
   4,5'in altina dusuyordu (/cizim'de 19 kesin ihlalin ortak sebebi).
   brightness(.62) arkadaki her seyi once koyulastirir: panel zemini artik
   parlak sahnede bile ~rgb(52,50,58) civarinda kalir, koyu sahnede zaten
   daha koyu. Cam hissi (bulanik sekiller, doygunluk) korunur. */
.hr-fs{position:fixed;inset:0;z-index:3000;opacity:0;transition:opacity .4s ease;
  background:rgba(10,8,12,.62);
  -webkit-backdrop-filter:blur(30px) saturate(1.35) brightness(.62);
  backdrop-filter:blur(30px) saturate(1.35) brightness(.62)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hr-fs{background:rgba(10,8,12,.94)}
}
.hr-fs.is-in{opacity:1}
.hr-fs[hidden]{display:none}
body.hr-fs-open{overflow:hidden}
.hr-fs-glow{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(58% 46% at 28% 18%, rgba(217,192,143,.14), transparent 68%),
    radial-gradient(50% 50% at 82% 84%, rgba(126,150,255,.11), transparent 70%),
    radial-gradient(90% 90% at 50% 50%, transparent 55%, rgba(6,5,8,.55) 100%)}
/* PANEL GENISLIGI EKRANLA BUYUR.
   Eski deger `minmax(300px,362px)` idi: panel 362 px'de TAVANLANIYORDU.
   Olculdu (1920x1080): panel 362 px, sahne 1558 px — yani ekranin %81'i
   bos sahneye giderken tum kararlar dar bir seride sikisiyordu. Secim
   haplari alt alta katlaniyor, ozet karti iki sutuna sigmiyor, "Devam"
   ekranin altina dusuyordu.
   Yeni deger genislikle olceklenir ama iki uctan da kelepcelidir:
     clamp(340px, 26vw, 520px)
   26vw secimi: 1280'de 340 (alt kelepce, eskisinden biraz genis),
   1600'de 416, 1920'de 500, 2560'ta 520 (ust kelepce). Ust kelepce
   onemli — panel sonsuz genislerse satir uzunlugu okunabilirligi bozar
   (60-75 karakter bandi asilir) ve urun sahnesi gereksiz kuculur. */
/* SATIR GORUS ALANINA SABITLENIR. Ortulu satir `auto` idi: icerik uzun
   oldugunda satir buyuyor, panel de onunla birlikte gorus alanini asiyordu
   (olculdu /isim-kolye: panel 940 px, gorus alani 900 px — alt kismi ekran
   disinda kaliyordu). minmax(0,1fr) satiri hem doldurur hem BUYUMESINI
   engeller; kaydirma panelin kendi slotunda kalir. */
.hr-fs-inner{position:relative;height:100%;display:grid;
  grid-template-rows:minmax(0,1fr);
  grid-template-columns:1fr clamp(340px,26vw,520px);
  transform:scale(.985);transition:transform .45s cubic-bezier(.22,1,.36,1)}
.hr-fs.is-in .hr-fs-inner{transform:none}
/* PANEL üstte durur, sahne altta. Önce sahneye z-index:1 vermiştim: sahne
   panelin üzerine çıkıp wizard başlığını, "Nasıl çalışır?" ve kapat düğmesini
   KAPATIYORDU. Doğrusu tersi — panel üstte, kenarı kendi maskesiyle erir. */
/* SONSUZ EKRAN: sahne ızgaranın TÜM hücrelerini kaplar, panel üstünde yüzer.
   Kolye ayrı bir kareye hapsolmaz; zincir ekranın en tepesinden iner ve
   arkasındaki yıldızlı zemin kesintisiz görünür — çerçeve, kenar, blur yok.
   Ürün panelin altında kalmasın diye sahnenin dolgusu panel ölçüsüne eşitlenir;
   flex ortalaması ürünü kalan boşluğun ortasına taşır. */
.hr-fs-stage{position:relative;z-index:0;grid-area:1 / 1 / -1 / -1;
  display:flex;align-items:center;justify-content:center;min-width:0;
  /* Sag bosluk panel genisligiyle AYNI formulu kullanmali. Sabit 362px
     kalsaydi panel clamp ile buyurken sahne onun altina girerdi. */
  padding:0 clamp(340px,26vw,520px) 0 0}
.hr-fs-panel{z-index:1;grid-area:1 / 2 / -1 / -1}
/* KUTU YOK: kolye doğrudan yıldızlı zeminde durur.
   Kart görünümü (koyu dolgu + köşe yuvarlaklığı + gölge + overflow:hidden)
   ürünü küçük bir vitrin karesine hapsediyordu. Kabuk içinde tamamen kaldırıldı;
   arkada .hr-fs-stage::before halesi ve parıltı tuvali görünür kalır. */
/* Kutu ekran yüksekliğini kaplayan kare olur → zincir tuvalin en üstünden,
   yani ekranın tepesinden inmeye başlar. */
.hr-fs-stage .cz-stagebox{height:100%;width:auto;max-width:100%;max-height:100%;
  aspect-ratio:1;
  /* KENAR DA GITMELI. Zemin, kose ve golge sifirlaniyordu ama `border`
     unutulmustu: olculdu, kutu 900x900 ve `1px rgba(255,255,255,.1)`
     kenar tasiyordu — kolyenin cevresinde ipince beyaz bir KARE cizgi
     olarak goruunuyordu. "Kutu yok, kolye dogrudan yildizli zeminde
     durur" kuralinin eksik kalan parcasi. */
  background:transparent!important;border-radius:0!important;overflow:visible!important;
  box-shadow:none!important;border:none!important;position:relative;
  /* top:auto ŞART. Sayfa düzeninde kutu `position:sticky; top:70px`
     (cizim.css) — kaydırırken ürünü ekranda tutmak için. Kabuk içinde konum
     relative'e döner ama `top` sıfırlanmadığı için o 70px OFSET OLARAK
     kalıyordu: ürün 70px aşağı kayıyor ve alt kenarı wizard panelinin arkasına
     giriyordu (375x844'te ölçüldü: kutu 70..417, panel tepesi 347). */
  top:auto}   /* relative KALMALI: içindeki
  tuvaller (zincir, ön/arka yüz, WebGL) mutlak konumlu, referansları burası */

/* Sağ panel — liquid glass */
/* KESKİN KENAR YOK. Panelin 1px çizgisi + iç gölgesi iki alanı birbirinden
   ayırıyordu; önizleme "ayrı bir kare" gibi duruyordu. Sınır artık panelin
   kendi arka planının soldan şeffafa gitmesiyle oluşur ve maske sayesinde cam
   bulanıklığı da kenarda kademeli söner — nerede bittiği belli olmaz. */
/* MASKE PANELIN KENDISINDE DEGIL, CAM KATMANINDA.
   Eski kurgu maskeyi .hr-fs-panel'e uyguluyordu — maske elemanin TUM
   icerigini kirpar, yani yaziyi da. Ustelik duraklar YUZDEYDI (%22'de tam
   opaklik) ama metin sabit bir ic bosluktan basliyor. Olculdu:
     panel 340 -> fade 75 px'te biter, metin 38 px'te baslar -> %53 opak
     panel 374 -> 82 px  / 38 px -> %49
     panel 499 -> 110 px / 44 px -> %43
   Yani basliklar ve secim kartlarinin sol tarafi yariya kadar SILINIYORDU;
   panel genisledikce daha da kotulesiyordu.

   Cozum: cam (arka plan + blur + maske) ::before'a tasindi, icerik uste
   alindi. Artik fade ISTENDIGI KADAR GENIS ve yumusak olabilir, yaziya
   hic dokunmaz. Duraklar da px cinsinden — panel genisligi degisince
   gecis bozulmasin. */
.hr-fs-panel{position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:none;border:none}
.hr-fs-panel::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(100deg,transparent 0,rgba(255,255,255,.03) 16%,rgba(255,255,255,.065) 48%,rgba(255,255,255,.05) 100%);
  -webkit-backdrop-filter:blur(44px) saturate(1.5);backdrop-filter:blur(44px) saturate(1.5);
  /* Daha GENIS ve daha yumusak: 0 -> 128 px boyunca uc duraklı gecis.
     Metnin nerede basladigi artik onemsiz. */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.18) 28px,rgba(0,0,0,.62) 72px,#000 128px);
  mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.18) 28px,rgba(0,0,0,.62) 72px,#000 128px)}
/* Icerik camin USTUNDE — maskeden etkilenmez. */
.hr-fs-head,.hr-fs-slot{position:relative;z-index:1}
.hr-fs-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:22px 30px 0}
/* Panel basligi 362px'lik kolonda "Nasil calisir?" ve 44px'lik kapat
   dugmesiyle YARISIYOR. Olculdu (/cizim, 1280px): kullanilabilir 302px'in
   56'sini kapat, ~90'ini "Nasil calisir?" aliyor; kicker'a 150px kaliyor
   ama 11px/.14em ile 250px istiyor. Sonuc: HER IKISI de sariyor ve baslik
   satiri kirik gorunuyordu.
   Kicker iki satira sarabilir (satir araligi sikilastirildi), ama tek bir
   KONTROL olan "Nasil calisir?" asla sarmamali — o nowrap. */
.hr-fs-kicker{font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  line-height:1.35;min-width:0;color:rgba(217,192,143,.85)}
/* 42 -> 44px: tam ekrandan cikis, aracin en kritik kacis yolu. */
.hr-fs-close{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
  flex-shrink:0;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff;cursor:pointer;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .2s,transform .2s}
.hr-fs-close:hover{background:rgba(255,255,255,.18);transform:rotate(90deg)}
.hr-fs-slot{flex:1;overflow-y:auto;padding:22px 30px 34px;scrollbar-width:thin}
/* BIRINCIL CTA ARTIK KATLAMANIN ALTINA DUSMEZ.
   Olculdu 1280x900 /cizim: slot icerigi 1115 px, kutu 812 px. "Devam →"
   ilk ekranda ekranin 258 px ALTINDA, son adimda "Her Sey Tamam ✓" 237 px
   altinda kaliyordu; ikisi de gorunur=false. Panel overflow-y:auto oldugu
   icin teknik olarak kaydirilabiliyordu ama koyu zeminde 7 px'lik ince
   cubuktan baska hicbir isaret yoktu — kullanici birincil eylemi hic
   gormeden ekranda kaliyordu.
   Cozum: gezinme seridi slotun DIBINE yapisir. Icerik ne kadar uzarsa
   uzasin CTA her zaman ekranda. Kaydirilabilir icerik seridin altindan
   gecerken kaybolmasin diye seridin kendi zemini var; ust kenardaki kisa
   gecis bandi icerigin bicak gibi kesilmesini onler.
   `position:sticky` kaydirma KAPSAYICISINA (slot) gore calisir; slot
   overflow-y:auto oldugu icin dogru kapsayici zaten o.
   Adim gostergesine (.wiz-dots) de yapiskanlik denendi ve GERI ALINDI:
   olculdu, hicbir sey degismedi (dots_y 16 -> 16). Sebep, dots'un kendi
   sarmalayicisi kisa; sticky ancak KAPSAYICISININ icinde yol bulabilir,
   sarmalayici kayip gidince gosterge de gidiyor. Adim bilgisi zaten
   seritteki "4 / 4" sayacinda duruyor — ayni bilgi, calisan yerde.
   Bandin SOL kenari sert bir dikdortgen olarak gorunuyordu: panelin kendi
   sol maskesi yumusakken serit bicak gibi basliyordu. Zemin yatayda da
   eritiliyor (ilk 34 px saydamdan tama). */
/* SIHIRBAZ SLOTU DOLDURUR, SERIT DIBE ITILIR.
   Kisa adimda (ornek: isim kolyesinde yalniz tek bir isim alani var) icerik
   slotu doldurmuyor ve serit panelin ORTASINDA asili kaliyordu — olculdu,
   /isim-kolye adim 1'de y=454, /cizim'de y=800. Ayni bilesen iki araçta iki
   ayri yerde duruyordu. `margin-top:auto` seridi her zaman dibe iter; icerik
   uzunsa zaten yapiskanlik devreye girer. */
/* min-height:0 SART. Flex ogesinin varsayilan min-height:auto degeri onu
   ICERIGININ ALTINA inmekten alikoyar: slot 812 px yerine icerik kadar
   (852 px) buyuyor, panel de 940 px'e cikip 900 px'lik gorus alanindan
   tasiyordu (olculdu /isim-kolye). overflow-y:auto ancak boyle is gorur. */
.hr-fs-slot{min-height:0}
.hr-fs-slot > .wiz,
.hr-fs-slot > [data-wiz],
.hr-fs-slot > #panel{display:flex;flex-direction:column;min-height:100%}
/* Sihirbaz sarmalayicisi da uzamali; yoksa `margin-top:auto` seridi
   sarmalayicinin dibine iter, panelin dibine degil (olculdu: .wiz 373 px
   iken panel 780 px, serit y=433'te asili kaliyordu). */
.hr-fs-slot > #panel > .wiz,
.hr-fs-slot > .wiz{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
.hr-fs-slot .wiz-nav{margin-top:auto}
/* ISIM KOLYESI: sihirbaz kabuga #panel ile TASINIYOR (data-fs-movers="#panel"),
   diger uc araçta dogrudan .wiz giriyor. #panel sayfa duzeninde kendi kartini
   tasiyor: kendi kaydirmasi, sag kenar cizgisi, dolgusu ve gradyan zemini.
   Kabugun icinde bunlarin hepsi FAZLA — panel zaten cam; ustune ikinci bir
   kart binince "sablon" gibi duruyordu ve panel gorus alanindan tasiyordu
   (olculdu: 340x940, gorus alani 900). Kabuk icinde notrlestirilir; sayfa
   duzenindeki gorunumu (atolye modu) degismez. */
.hr-fs-slot > #panel{overflow:visible;padding:0;border:none;background:none;max-height:none}
/* Negatif kenar bosluklari SLOT DOLGUSUYLA ESLESMELI. Sabit -30px yazilinca
   1280 px ustunde slot dolgusu 38 px'e cikiyor ve serit kenarlara ulasmiyordu
   (olculdu: serit 324 px, panel 340 px). Degisken tek yerden surulur. */
.hr-fs-slot{--fs-slot-pad:30px}
@media (min-width:1280px){ .hr-fs-slot{--fs-slot-pad:38px} }
@media (min-width:1600px){ .hr-fs-slot{--fs-slot-pad:44px} }
@media (max-width:860px){ .hr-fs-slot{--fs-slot-pad:20px} }
/* SERIT ARTIK DORT ARACTA VE HER GENISLIKTE AYNI: SIHIRBAZIN SON SATIRI.
   Once masaustunde yapiskan + kendi koyu zeminli bir bant yapilmisti; amac
   CTA nin katlama altinda kalmamasiydi. Kullanici iki kez bildirdi: bant
   panelden kopuk, ayri bir cubuk gibi duruyor ve ozet kartini kesiyor.
   Mobilde zaten akista birakilmisti; masaustu de ona esitlendi.
   TAKAS BILINCLI: uzun adimda CTA gorunur olmak icin panel kaydirilmali.
   Karsiliginda serit panelin bir parcasi gibi duruyor — istenen buydu.
   `margin-top:auto` korunuyor: icerik kisa oldugunda serit yine dibe iner,
   panelin ortasinda asili kalmaz. */
.hr-fs-slot .wiz-nav{position:static;margin:14px 0 0;padding:14px 0 0;
  background:none;-webkit-backdrop-filter:none;backdrop-filter:none;
  border-top:1px solid rgba(255,255,255,.08)}
.hr-fs-slot::-webkit-scrollbar{width:7px}
.hr-fs-slot::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:7px}
.hr-fs-slot [data-cz-options]{margin-top:0!important;display:block!important}

/* Wizard'ı cam panelde daha zarif göster */
.hr-fs .wiz{gap:18px}
.hr-fs .wiz-title{font-size:20px}
.hr-fs .cz-pill{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

@media (max-width:860px){
  /* NOT: satır yüksekliği aşağıdaki safe-area bloğunda 44dvh olarak belirlenir;
     burada ayrıca yazmak (eski 42vh) her zaman ezilen ÖLÜ bir kuraldı ve birini
     düzeltip diğerini unutmaya davetiye çıkarıyordu. */
  .hr-fs-inner{grid-template-columns:1fr}

  /* dvh, vh DEĞİL: satır 44dvh iken kutuyu vh ile ölçmek, iOS'ta adres çubuğu
     görünürken (vh ≈ 1,12 × dvh) kutuyu satırdan TAŞIRIYORDU — ürünün altı
     kırpılıyor ve tam da satın alma kararını veren görsel bozuluyordu.
     max-height ayrıca satırı mutlak tavan yapar. */

  /* Mobilde geçiş YUKARIDAN aşağı yumuşar; çizgi ve gölge yok.
     MASKE ELEMANIN KENDISINDE DEGIL, ::before ZEMIN KATMANINDA.
     Eskiden -webkit-mask-image dogrudan .hr-fs-panel e veriliyordu; maske
     elemanin TUM icerigini kirpar, yani zeminle birlikte YAZIYI da soldurur.
     Olculdu: "KISIYE OZEL - ISIM KOLYESI" basligi panel tepesinden 24 px
     asagida, rampin (%20 = 67 px) tam icinde kaliyordu. Zemin ayri bir
     katmana alininca ramp istenildigi kadar uzun olabilir, metne dokunmaz.
     Ayni cozum masaustunde zaten uygulanmisti (.hr-fs-panel::before). */
  .hr-fs-panel{border:none;box-shadow:none;background:none;
    -webkit-mask-image:none;mask-image:none}
  .hr-fs-panel::before{
    background:linear-gradient(180deg,transparent 0,rgba(255,255,255,.03) 10%,rgba(255,255,255,.06) 34%,rgba(255,255,255,.05) 100%);
    -webkit-backdrop-filter:blur(30px) saturate(1.3);backdrop-filter:blur(30px) saturate(1.3);
    -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.4) 8%,#000 20%);
    mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.4) 8%,#000 20%)}
  .hr-fs-head{padding:16px 20px 0}
  .hr-fs-slot{padding:16px 20px 28px}
}
@media (prefers-reduced-motion:reduce){.hr-fs,.hr-fs-inner,.hr-fs-close{transition:none}}

/* ==================================================== TANITIM SLAYTI (INTRO) ==
   Araç seçilir seçilmez oynayan tam ekran mini tanıtım. Bitince builder'a akıtır.
   Ortak: üç kişiye özel sayfada da kullanılır. */
.pz-intro{position:fixed;inset:0;z-index:4000;display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .5s ease;
  background:radial-gradient(120% 100% at 50% 0%,#241f19 0%,#17130e 55%,#0d0a07 100%)}
.pz-intro.is-in{opacity:1;pointer-events:auto}
.pz-intro[hidden]{display:none}
body.pz-intro-open{overflow:hidden}
.pz-intro-glow{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(46% 40% at 26% 22%, rgba(217,192,143,.18), transparent 66%),
    radial-gradient(44% 44% at 80% 82%, rgba(126,150,255,.14), transparent 70%)}
.pz-intro-stars{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.pz-intro-stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;opacity:0;
  animation:pzStar 3.4s ease-in-out infinite}
@keyframes pzStar{0%,100%{opacity:0;transform:scale(.6)}50%{opacity:.7;transform:scale(1)}}
.pz-intro-inner{position:relative;width:min(680px,92vw);text-align:center;padding:32px}
.pz-intro-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:9999px;
  background:rgba(217,192,143,.12);border:1px solid rgba(217,192,143,.26);
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ea-accent-strong);margin-bottom:30px;
  opacity:0;transform:translateY(10px);animation:pzUp .6s .05s cubic-bezier(.22,1,.36,1) forwards}
.pz-slide{display:none;flex-direction:column;align-items:center;gap:16px}
.pz-slide.is-current{display:flex}
.pz-slide-ic{width:76px;height:76px;display:flex;align-items:center;justify-content:center;border-radius:24px;
  color:var(--ea-accent-strong);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 1px rgba(255,255,255,.12);
  animation:pzPop .7s cubic-bezier(.22,1,.36,1) both}
.pz-slide-t{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;
  font-size:clamp(30px,5vw,52px);line-height:1.02;letter-spacing:-.02em;color:#fff;
  animation:pzUp .6s .08s cubic-bezier(.22,1,.36,1) both}
.pz-slide-d{font-size:16px;font-weight:300;line-height:1.7;color:rgba(255,255,255,.68);max-width:44ch;
  animation:pzUp .6s .16s cubic-bezier(.22,1,.36,1) both}
@keyframes pzUp{to{opacity:1;transform:none}}
@keyframes pzPop{0%{opacity:0;transform:scale(.7)}100%{opacity:1;transform:scale(1)}}
.pz-intro-dots{display:flex;justify-content:center;gap:8px;margin-top:34px}
.pz-intro-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.22);transition:all .35s}
.pz-intro-dots i.is-on{width:24px;border-radius:4px;background:linear-gradient(90deg,var(--ea-accent-strong),var(--ea-accent))}
.pz-intro-actions{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:30px;flex-wrap:wrap}
.pz-intro-start{cursor:pointer;display:inline-flex;align-items:center;gap:10px;border:none;
  background:linear-gradient(180deg,var(--ea-accent-strong),var(--ea-accent));color:var(--ea-accent-ink);padding:15px 30px;border-radius:9999px;
  font-family:'Barlow',sans-serif;font-size:14px;font-weight:700;letter-spacing:.02em;
  box-shadow:0 12px 34px rgba(217,192,143,.26);transition:transform .2s,filter .2s}
.pz-intro-start:hover{transform:translateY(-2px);filter:brightness(1.05)}
.pz-intro-skip{cursor:pointer;background:none;border:none;color:var(--ea-text-soft);
  font-family:'Barlow',sans-serif;font-size:12px;font-weight:400;padding:8px 14px;transition:color .2s;
  /* 32px olculuyordu; tanitimi atlamak dort aracin da ilk etkilesimi ve
     dokunma hedefi 44px'in altindaydi (WCAG 2.5.5). Yazi boyutu ve rengi
     degismedi, yalniz hedef buyudu. */
  min-height:44px;display:inline-flex;align-items:center}
.pz-intro-skip:hover{color:rgba(255,255,255,.85)}
@media (prefers-reduced-motion:reduce){
  .pz-intro,.pz-intro-badge,.pz-slide-ic,.pz-slide-t,.pz-slide-d{animation:none;opacity:1;transform:none;transition:none}
  .pz-intro-stars{display:none}
}

/* ==================================================== WIZARD — CANLI ÖZET =====
   "Ne inşa ediyorsun" paneli: seçtiklerini anlık gösterir, ilerledikçe dolar. */
.wiz-summary{margin-top:6px;border-radius:16px;padding:14px 16px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);box-shadow:inset 0 1px 1px rgba(255,255,255,.08)}
.wiz-summary-h{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(217,192,143,.85);margin-bottom:10px}
.wiz-summary-rows{display:flex;flex-direction:column;gap:7px}
.wiz-sumrow{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px}
.wiz-sumrow dt{color:var(--ea-text-soft);font-weight:300}
.wiz-sumrow dd{margin:0;color:#fff;font-weight:500;text-align:right;transition:color .3s}
.wiz-sumrow dd.is-flash{animation:sumFlash .6s ease}
@keyframes sumFlash{0%{color:var(--ea-accent-strong)}100%{color:#fff}}
.wiz-summary-total{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;
  padding-top:11px;border-top:1px solid rgba(255,255,255,.1);font-size:13px}
.wiz-summary-total span:first-child{color:var(--ea-text-soft);font-weight:300}
.wiz-summary-total b{font-family:'Barlow',sans-serif;font-size:20px;font-weight:700;color:var(--ea-accent-strong);letter-spacing:.01em}
/* Adım geçişinde hafif parıltı */
.wiz-step.is-current{animation:wizIn .42s cubic-bezier(.22,1,.36,1)}
.hr-fs .wiz-next{position:relative;overflow:hidden}
.hr-fs .wiz-next::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);animation:wizSheen 3.4s ease-in-out infinite}
@keyframes wizSheen{0%,72%{left:-60%}86%,100%{left:130%}}
@media (prefers-reduced-motion:reduce){.hr-fs .wiz-next::after{display:none}.wiz-sumrow dd.is-flash{animation:none}}

/* ==================================================== KUTLAMA (BAŞARI) ========
   Teklif gönderilince: "bir şey başardın" hissi — konfeti + rozet. */
.pz-celebrate{position:fixed;inset:0;z-index:5000;display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .45s ease;background:rgba(10,8,7,.62);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.pz-celebrate.is-in{opacity:1;pointer-events:auto}
.pz-celebrate[hidden]{display:none}
.pz-celebrate-card{position:relative;width:min(440px,92vw);text-align:center;padding:40px 30px;border-radius:26px;
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.16);box-shadow:0 30px 80px rgba(0,0,0,.5),inset 0 1px 1px rgba(255,255,255,.14);
  transform:scale(.9);transition:transform .5s cubic-bezier(.22,1,.36,1)}
.pz-celebrate.is-in .pz-celebrate-card{transform:none}
.pz-celebrate-seal{width:84px;height:84px;margin:0 auto 20px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;color:var(--ea-accent-ink);background:linear-gradient(180deg,var(--ea-accent-strong),var(--ea-accent));
  box-shadow:0 12px 34px rgba(233,196,106,.4)}
.pz-celebrate-seal svg{animation:sealCheck .6s .2s cubic-bezier(.22,1,.36,1) both}
@keyframes sealCheck{0%{opacity:0;transform:scale(.4) rotate(-12deg)}100%{opacity:1;transform:none}}
.pz-celebrate-t{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;
  font-size:clamp(26px,4vw,38px);line-height:1.05;color:#fff;margin-bottom:12px}
.pz-celebrate-d{font-size:14px;font-weight:300;line-height:1.65;color:rgba(255,255,255,.7);margin-bottom:24px}
.pz-celebrate-close{cursor:pointer;border:none;background:linear-gradient(180deg,var(--ea-accent-strong),var(--ea-accent));color:var(--ea-accent-ink);
  padding:13px 28px;border-radius:9999px;font-family:'Barlow',sans-serif;font-size:13px;font-weight:700;
  transition:transform .2s,filter .2s}
.pz-celebrate-close:hover{transform:translateY(-2px);filter:brightness(1.05)}
.pz-confetti{position:fixed;inset:0;z-index:5001;pointer-events:none;overflow:hidden}
.pz-confetti i{position:absolute;top:-14px;width:9px;height:14px;border-radius:2px;opacity:0;
  animation:pzFall linear forwards}
@keyframes pzFall{0%{opacity:1;transform:translateY(-10px) rotate(0)}100%{opacity:.9;transform:translateY(104vh) rotate(720deg)}}
@media (prefers-reduced-motion:reduce){.pz-confetti{display:none}.pz-celebrate,.pz-celebrate-card{transition:none;transform:none}}

/* ==================================================== ÜRÜN SAHNESİ SÜSLEME ====
   Koyu stüdyo vinyeti + şampanya hale + ışıltı canvas'ı (stage-sparkle.js). */
.hr-fs-stage{position:relative}
.hr-fs-stage::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 52% at 50% 46%, rgba(217,192,143,.07), transparent 70%)}
/* Parıltı ARKADA. z-index:2 ile kolyenin ÜSTÜNDE çiziliyordu: yıldızlar ürünün
   önüne geçiyor ve metali soluklaştırıyordu. Müşterinin istediği, kolyenin
   parıldayan zeminin İÇİNDE durması — yani parıltı arkada, ürün önde. */
.ea-sparkle{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.hr-fs-stage .cz-stagebox{z-index:1}
/* kabuk içinde kutu gölgesi yok (bkz. yukarıdaki not) */

/* Başlıktaki "Nasıl çalışır?" — tanıtımı yeniden açar */
.hr-fs-how{cursor:pointer;margin-left:auto;flex:0 0 auto;white-space:nowrap;background:none;border:none;padding:10px 6px;min-height:44px;display:inline-flex;align-items:center;
  font-family:'Barlow',sans-serif;font-size:12px;font-weight:500;letter-spacing:.04em;
  color:var(--ea-text-faint);transition:color .2s}
.hr-fs-how:hover{color:var(--ea-accent-strong)}

/* ==================================================== FİNALE (Her Şey Tamam) ===
   Panel kenara süzülür, sahne büyür, model serbest döner; ardından cam sipariş
   özeti alttan yükselir. */
body.ea-finale-open .hr-fs-panel{transform:translateX(105%);opacity:0;pointer-events:none;
  transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .45s ease}
.hr-fs-panel{transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .45s ease}
.hr-fs-inner{transition:transform .45s cubic-bezier(.22,1,.36,1)}
/* İNCELEME MODU: ürün neredeyse tam ekrana büyür (istenen: 'animasyonlu şekilde
   ürün büyüsün ve tam ekrana yakın bir deneyimle görüntülensin'). Sahne kenar
   boşluğu da daralır ki büyüme gerçekten hissedilsin. */
/* NOT: 'width' ASLA animasyonlanmaz. Panel kapanırken ızgara sütunu da
   değiştiği için yüzde tabanı kayıyor ve kutu 1.6px'e çöküyordu (ölçüldü).
   Genişlik anında uygulanır (WebGL yeniden ölçeklenir → net kalır); büyüme
   hissi GPU üzerinde transform ile verilir. */
/* Panel gerçekten çekilsin: sütun 0'a iner (aksi halde sahne 794px'te kalıyordu). */
/* FİNALEDE TEK SONSUZ EKRAN: panel tamamen çekilir, sahne tüm ekranı kaplar,
   kolye kesintisiz yıldızlı zeminde durur. Özet kartı da blur zemin taşımaz —
   yalnız ince bir çizgi ve okunabilirlik için hafif bir koyulaştırma. */
/* IZGARA ÇÖKERTMESİ KALDIRILDI. Panelin sütununu/satırını 0'a indirmek, panelin
   transform ile SÜZÜLMESİNİ imkânsız kılıyor: 0 genişlikli bir kutunun
   translateX(100%) değeri 0px'dir, yani panel kayarak çıkmıyor, bir anda
   yok oluyordu — "sert kesme olmasın" isteğiyle çelişiyor.
   Sahnenin tüm ekranı kaplaması için çökertme GEREKMİYOR: .hr-fs-stage
   grid-area 1/1/-1/-1 ile tüm alanı zaten kaplıyor ve finalede padding:0 alıyor
   (aşağıdaki kural), yani ayrılan yer o an serbest kalıyor. */
body.ea-finale-open .hr-fs-stage{padding:0!important}
body.ea-finale-open .hr-fs-panel{opacity:0;pointer-events:none}
/* Süzülme bittikten sonra tamamen sahne dışı. JS 640 ms sonra ekler; geçişlerin
   çalışmadığı ortamlarda (arka plan sekme) panelin sahnenin üzerinde asılı
   kalmasını engeller. */
body.ea-panel-cekildi .hr-fs-panel{visibility:hidden}
/* (ölü kural kaldırıldı: bir üstteki padding:0!important zaten kazanıyordu) */
body.ea-finale-open .hr-fs-stage .cz-stagebox{
  /* YÜKSEKLİK güdümlü + köşe yuvarlaklığı YOK: eski width/border-radius
     kuralı kutuyu 582x619'a düşürüp yuvarlak köşeli kartı geri getiriyordu. */
  height:100%;width:auto;max-width:100%;border-radius:0}
/* CSS BÜYÜME ANİMASYONU KALDIRILDI (eski: eaGrow, transform:scale(.86)→1).
   İki sorun vardı: (1) transform:scale rasterize edilmiş WebGL tuvalini
   büyüttüğü için ürün animasyon boyunca BULANIK görünüyordu; (2) animasyon
   biterken tuval gerçek çözünürlüğe geçiyor ve gözle görülür SERT BİR KESME
   oluşuyordu — üstelik ölçek değişimi 3B kadraj hesabıyla yarışıyordu.
   Hareket artık 3B kadrajın kendisinde (Pendant3D.flipTo): ürün eski ekran
   konumundan yeni kadraja yaylanarak gider, her karede tam çözünürlükte. */
@media (max-width:860px){
  /* satır çökertmesi yok — panel translateY ile süzülür (yukarıdaki gerekçe) */
  /* Panel display:none DEĞİL, aşağı SÜZÜLÜR: display:none anında yok ediyor ve
     "sert kesme olmasın" isteğiyle çelişiyordu. Geçiş bitince pointer-events
     kapalı olduğu için tıklamayı da engellemiyor. */
  body.ea-finale-open .hr-fs-panel{
    transform:translateY(100%);opacity:0;pointer-events:none;
    transition:transform .56s cubic-bezier(.22,1.1,.36,1),opacity .34s ease}
  body.ea-finale-open .hr-fs-stage .cz-stagebox{height:100%;width:auto;max-width:100%}
}
/* panel geçişi yukarıda (satır ~317) tek yerde tanımlı — burada yinelenmez */
@media (prefers-reduced-motion:reduce){
  .hr-fs-panel,body.ea-finale-open .hr-fs-panel{transition:none}
}

.ea-finale{position:fixed;inset:0;z-index:3600;pointer-events:none;display:none}
.ea-finale.is-on{display:block}
/* white-space:nowrap + sabit dolgu, 320px'te çubuğu 380px genişletiyordu:
   "Devam →" düğmesi ekranın DIŞINA taşıyor (sağ kenar 338 > 320) ve müşteri
   sipariş özetine geçemiyordu. Artık ekrana sığar, dar ekranda metin sarar. */
.ea-finale-hint{pointer-events:auto;position:absolute;left:50%;bottom:34px;transform:translateX(-50%);
  display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
  max-width:calc(100vw - 24px);border-radius:26px;padding:12px 12px 12px 22px;
  font-size:13px;font-weight:300;color:var(--ea-text-soft);text-align:center;
  transition:opacity .4s ease,transform .5s cubic-bezier(.16,1,.3,1)}
@media (min-width:520px){.ea-finale-hint{flex-wrap:nowrap;white-space:nowrap;border-radius:9999px}}
.ea-finale-hint.is-away{opacity:0;transform:translateX(-50%) translateY(24px);pointer-events:none}
.ea-finale-next{cursor:pointer;border:none;border-radius:9999px;padding:10px 22px;
  background:linear-gradient(180deg,var(--ea-accent-strong),var(--ea-accent));color:var(--ea-accent-ink);
  font-family:'Barlow',sans-serif;font-size:13px;font-weight:600}
.ea-finale-next:hover{filter:brightness(1.05)}
/* KENDI ZEMINI OLMALI — OKUNABILIRLIK ARKAPLANA BAGLI KALAMAZ.
   .liquid-glass-strong zemini rgba(255,255,255,.01), yani pratikte SEFFAF;
   tum okunabilirlik backdrop-filter:blur(50px)'e yasliyordu. Blur yapiyi
   bulaniklastirir ama PARLAKLIGI korur: kart parlak gumus bir kolyenin
   uzerine denk gelirse arka plan lumasi ~200 kalir.
   OLCUM (WCAG, beyaz .85 metin):
     parlak gumus uzerinde  1,55  (esik 4,5 — metin OKUNMUYOR)
     koyu sahne uzerinde   12,89
   Diger uc araçta sorun GORUNMUYOR cunku .hr-fs kabugu arkayi
   rgba(10,8,12,.5) + blur(30px) ile onceden duzlestiriyor; isim-kolye'de
   kabuk olmadigi icin kart dogrudan kolyenin ustune dusuyor (kullanicinin
   ekran goruntusu). Zemin eklenince iki durumda da 12+ oluyor.
   backdrop-filter desteklenmeyen tarayicilar icin de dogru olan bu. */
.ea-finale-sum{background:rgba(20,17,13,.92)}
.ea-finale-hint{background:rgba(20,17,13,.88)}
.ea-finale-sum{pointer-events:auto;position:absolute;left:50%;bottom:0;transform:translate(-50%,26px);
  width:min(560px,calc(100vw - 32px));border-radius:26px 26px 0 0;padding:26px 28px 30px;
  opacity:0;transition:opacity .5s ease,transform .55s cubic-bezier(.16,1,.3,1)}
.ea-finale-sum.is-in{opacity:1;transform:translate(-50%,0)}
.ea-finale-sum-k{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ea-accent);margin:0 0 14px}
.ea-finale-rows{margin:0 0 6px;display:flex;flex-direction:column;gap:7px}
.ea-finale-row{display:flex;justify-content:space-between;gap:16px;font-size:14px}
.ea-finale-row dt{font-weight:300;color:var(--ea-text-soft)}
.ea-finale-row dd{margin:0;font-weight:500;color:var(--ea-text)}
/* Ödeme öncesi güvence satırları — ince, sakin, satır satır okunabilir.
   İşaretler ::before ile çizilir; ekran okuyucu yalnız metni duyar. */
.ea-finale-trust{list-style:none;margin:12px 0 0;padding:12px 0 0;
  border-top:1px solid var(--ea-line);display:flex;flex-direction:column;gap:7px}
.ea-finale-trust li{position:relative;padding-left:19px;font-size:12px;font-weight:300;
  line-height:1.45;color:var(--ea-text-soft)}
.ea-finale-trust li::before{position:absolute;left:0;top:0;font-size:11px;line-height:1.6}
.ea-trust-ok::before{content:"✓";color:var(--ea-accent)}
.ea-trust-info::before{content:"i";font-style:italic;font-weight:600;color:var(--ea-text-faint)}
.ea-trust-info{color:var(--ea-text-faint)}
.ea-finale-total{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  border-top:1px solid var(--ea-line);margin-top:10px;padding-top:14px;font-size:13px;color:var(--ea-text-soft)}
.ea-finale-total b{font-size:20px;font-weight:600;color:var(--ea-accent-strong)}
/* Fiyatın gerekçesi — katlanır, sakin, rakamsız. */
.ea-finale-why{margin:10px 0 0;font-size:12px}
.ea-finale-why summary{cursor:pointer;list-style:none;color:var(--ea-accent);
  font-weight:500;letter-spacing:.02em;padding:6px 0}
.ea-finale-why summary::-webkit-details-marker{display:none}
.ea-finale-why summary::after{content:" +";color:var(--ea-text-faint)}
.ea-finale-why[open] summary::after{content:" −"}
.ea-finale-why ul{list-style:none;margin:4px 0 2px;padding:0;display:flex;
  flex-direction:column;gap:5px}
.ea-finale-why li{position:relative;padding-left:14px;font-size:12px;font-weight:300;
  line-height:1.45;color:var(--ea-text-soft)}
.ea-finale-why li::before{content:"·";position:absolute;left:3px;color:var(--ea-accent)}
.ea-finale-note{font-size:11px;font-weight:300;color:var(--ea-text-faint);margin:8px 0 16px}
.ea-finale-cta{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.ea-finale-back{cursor:pointer;background:none;border:none;padding:12px 6px;
  font-family:'Barlow',sans-serif;font-size:12px;font-weight:500;color:var(--ea-text-soft)}
.ea-finale-back:hover{color:var(--ea-text)}
.ea-finale-order{cursor:pointer;border:none;border-radius:9999px;padding:15px 30px;
  background:linear-gradient(180deg,var(--ea-accent-strong),var(--ea-accent));color:var(--ea-accent-ink);
  font-family:'Barlow',sans-serif;font-size:14px;font-weight:700;letter-spacing:.02em;
  box-shadow:0 12px 34px rgba(217,192,143,.26)}
.ea-finale-order:hover{filter:brightness(1.05)}
.ea-finale-order:disabled{opacity:.6;cursor:default}
@media (prefers-reduced-motion:reduce){
  .hr-fs-panel,.hr-fs-inner,.ea-finale-hint,.ea-finale-sum{transition:none}
}

/* Finale her araçta yüklü: eski sipariş bloğu asla görünmez (çift CTA biter);
   finale gizli [data-cz-order]'ı programatik tıklar, durum finale içinde gösterilir. */
[data-cz-result]{display:none!important}

/* "Konumu Değiştir" çipi (harita) */
.hr-remap{cursor:pointer;align-self:flex-start;display:inline-flex;align-items:center;gap:7px;
  padding:9px 16px;border-radius:9999px;background:var(--ea-veil);border:1px solid var(--ea-line);
  color:var(--ea-text-soft);font-family:'Barlow',sans-serif;font-size:12px;font-weight:500;
  transition:color .2s,border-color .2s}
.hr-remap:hover{color:var(--ea-accent-strong);border-color:rgba(217,192,143,.4)}
/* Konum seçildikten sonra harita/arama kolonu çekilir — adımlar sade kalır (özellikle mobil) */
/* hr-picked: harita (konum seçildi) · ea-entry-done: çizim (görsel geldi).
   İkisi de aynı şeyi yapar: giriş kolonu çekilir, wizard adımları yukarı gelir. */
body.hr-picked .cz-entry-col,body.ea-entry-done .cz-entry-col{display:none}

/* ================================================= PREMIUM WIZARD YÜZÜ =====
   "Hazır şablon" hissini bitiren dokunuşlar: serif adım başlıkları, hat-çizgisi
   pill'ler, ışıltı süpürmeli ilerleme, numaralı zarif adımlar. */
.wiz-title{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;
  font-size:clamp(24px,2.6vw,30px);letter-spacing:-.01em;color:var(--ea-text)}
.hr-fs .wiz-title{font-size:clamp(26px,2.8vw,32px)}
.wiz-sub{color:var(--ea-text-soft)}

/* İlerleme: ince ışık hattı + üzerinde süzülen parıltı */
.wiz-bar{height:2px;background:var(--ea-line-soft);overflow:visible;position:relative}
.wiz-bar i{position:relative;height:2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(217,192,143,.35),var(--ea-accent-strong));
  box-shadow:0 0 14px rgba(217,192,143,.5)}
.wiz-bar i::after{content:"";position:absolute;right:-3px;top:50%;width:7px;height:7px;
  border-radius:50%;transform:translateY(-50%);background:var(--ea-accent-strong);
  box-shadow:0 0 10px 2px rgba(236,220,180,.65)}

/* Adım noktaları: dolgulu daire yerine zarif numara + ince halka */
.wiz-dots li b{background:transparent;border:1px solid var(--ea-line);
  font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;font-size:14px;
  color:var(--ea-text-faint)}
.wiz-dots li span{letter-spacing:.08em;text-transform:uppercase;font-size:11px}
.wiz-dots li.is-done b{background:transparent;border-color:rgba(217,192,143,.55);color:var(--ea-accent)}
.wiz-dots li.is-current b{background:transparent;border-color:var(--ea-accent-strong);
  color:var(--ea-accent-strong);box-shadow:0 0 0 3px rgba(217,192,143,.12),0 0 18px rgba(217,192,143,.22)}
.wiz-dots li.is-current span{color:var(--ea-accent-strong)}

/* Seçenek pill'leri: dolgu değil hat — seçili olan şampanya konturla ışır */
.hr-fs .cz-pill{background:transparent;border:1px solid var(--ea-line);color:var(--ea-text-soft);
  box-shadow:none;transition:border-color .25s,color .25s,box-shadow .25s,background .25s}
.hr-fs .cz-pill:hover{border-color:rgba(217,192,143,.45);color:var(--ea-text)}
.hr-fs .cz-pill.is-active{background:rgba(217,192,143,.10);border-color:var(--ea-accent);
  color:var(--ea-accent-strong);box-shadow:0 0 0 1px rgba(217,192,143,.25),0 0 22px rgba(217,192,143,.14)}
.hr-fs .cz-pill.is-active .cz-plus{color:var(--ea-accent)}

/* Özet kartı: cam + şampanya hat */
.wiz-summary{background:rgba(217,192,143,.05);border:1px solid rgba(217,192,143,.16);border-radius:18px}
.wiz-summary-h{color:var(--ea-accent)}
.wiz-summary-total b{color:var(--ea-accent-strong)}

/* Geri/sayaç sadeleşir */
.wiz-prev{background:transparent!important;border:1px solid var(--ea-line)!important;color:var(--ea-text-soft)!important}
.wiz-count{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:14px;color:var(--ea-text-faint)}

/* ================================================ MOBİL: SAFE AREA + DVH =====
   iPhone home-indicator / çentik ve mobil tarayıcı çubuğu düzeltmeleri.
   Tam ekran tasarım deneyiminin tamamı bu kurallara bağlı. */
/* --fs-pad: yan boşluk TEK yerden yönetilir. Safe-area kuralları medya
   sorgusunun DIŞINDA ve kaynakta SONRA geldiği için sabit 30px, mobildeki
   20px'lik kuralı eziyordu: 320px ekranda 20px yerine 30px uygulanıyor, yani
   %7,7 içerik alanı kayboluyordu (adım etiketi ve gezinme taşmalarının
   doğrudan sebebi). Değişkenle mobil değer gerçekten geçerli olur. */
.hr-fs{--fs-pad:30px;height:100dvh;padding-top:env(safe-area-inset-top,0px)}
.hr-fs-inner{height:100%}
.hr-fs-head{padding-left:max(var(--fs-pad),env(safe-area-inset-left,0px));
  padding-right:max(var(--fs-pad),env(safe-area-inset-right,0px))}
.hr-fs-slot{padding-bottom:calc(34px + env(safe-area-inset-bottom,0px));
  padding-left:max(var(--fs-pad),env(safe-area-inset-left,0px));
  padding-right:max(var(--fs-pad),env(safe-area-inset-right,0px));
  overscroll-behavior:contain} /* alt panelde kaydırma sayfaya taşmasın */
/* Finale: ipucu ve özet kartı home-indicator'ın üstünde durur */
.ea-finale-hint{bottom:calc(34px + env(safe-area-inset-bottom,0px))}
.ea-finale-sum{padding-bottom:calc(30px + env(safe-area-inset-bottom,0px))}
/* Tanıtım: çentikli ekranlarda içerik kırpılmasın */
.pz-intro{height:100dvh}
.pz-intro-inner{padding-top:max(32px,calc(32px + env(safe-area-inset-top,0px)));
  padding-bottom:max(32px,calc(32px + env(safe-area-inset-bottom,0px)))}

@media (max-width:860px){
  /* Mobilde sahne biraz daha yüksek, panel tam kalanı alsın (yarım-ekran hissi biter) */
  .hr-fs{--fs-pad:20px}
  /* Panel payı: uzun telefonda tam %38 (hedef %35-40), ama MUTLAK bir tabanı var.
     Neden taban: 375x667 gibi kısa ekranda %38 = 254px ve ilk seçenek pili 54px
     taşıyordu — yüzde korunurken amaç (ilk seçenekler kaydırmasız görünsün)
     çiğneniyordu. 336px tabanı 844px ekranda paneli %39,8 yapıyor (bant içinde)
     ve /cizim gibi iki satırlık açıklama metni olan adımlarda 3px taşmayı
     kapatıyor; kısa ekranda ise gereken mutlak yeri veriyor.
     İki değer AYNI ifade olmalı: sahnenin alt dolgusu panel yüksekliğini
     birebir aynalıyor, yoksa ürün panelin altına kayar. */
  .hr-fs-inner{grid-template-rows:minmax(0,1fr) max(336px,38dvh)}
  /* Mobilde dolgu ALTTA: ürün panelin üstünde, ekranın üst bölümünde durur. */
  .hr-fs-stage{padding:0 0 max(336px,38dvh) 0}
  .hr-fs-panel{grid-area:2 / 1 / -1 / -1}

  /* --- Panel içi sıkıştırma: İLK SEÇENEK KAYDIRMADAN GÖRÜNSÜN ---
     Ölçüm (390x844): seçenek pili panel tepesinden 307px aşağıdaydı, panel 321px
     → ekranın altında kalıyordu. Panelin ORANINA dokunmuyoruz (%38, hedef %35-40
     aralığında) ve sahne yüksekliği aynı kalıyor; kazanç yalnız başlık/ray/etiket
     çevresindeki ölü boşluktan geliyor. Dokunma hedefleri (44px) korunuyor:
     adım rayı TIKLANABİLİR (wizard.js), o yüzden li min-height'ı düşürmüyoruz,
     rayın kendi padding'ini kısıyoruz. */
  .hr-fs-head{padding-top:8px}
  .hr-fs-slot{padding-top:10px;padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
  .hr-fs [data-wiz-dots]{padding-top:4px;padding-bottom:0}
  .wiz-dots li span{margin-top:6px}
  .hr-fs .wiz-title{font-size:24px}
  .wiz-head{gap:7px}
  .wiz-sub{margin-bottom:0;line-height:1.45}
  /* Çip görsel olarak inceldi ama DOKUNMA ALANI 44px kalıyor: yükseklik veren
     bir kutu yerine düzeni etkilemeyen ::after ile büyütülüyor (WCAG 2.5.5).
     Not: çip zaten 34px'ti, yani hedef bu blok yazılalı beri eksikti — burada
     kısarken tam olarak düzeltiliyor. */
  .hr-remap{padding-top:5px;padding-bottom:5px;position:relative}
  .hr-remap::after{content:"";position:absolute;left:0;right:0;top:50%;
    transform:translateY(-50%);height:44px;border-radius:inherit}

  /* Dokunma hedefleri ≥44px (WCAG 2.5.5 / Apple HIG) */
  .hr-fs .cz-pill{min-height:46px;display:inline-flex;align-items:center}
  .wiz-prev,.wiz-next{min-height:48px}
  .wiz-dots li{min-height:44px;justify-content:center}
  /* Giriş kolonundaki butonlar (Örnek Gör, arama) da parmak dostu olsun */
  .cz-entry-col button,.cz-entry-col .lg,.cz-entry-col .lgs,.hr-search-input{min-height:46px}
  .ea-finale-order{min-height:52px}
  .ea-finale-next{min-height:44px}
  .hr-fs-close{width:46px;height:46px}
  .hr-fs-how{min-height:44px;display:inline-flex;align-items:center}
}

/* ============================================ HARİTA: TAM EKRAN SEÇİM ADIMI ===
   Şikayet: "haritada seçmek çok zor, ekranı kaydırmaya çalışınca harita oynuyor,
   çubuğu aşağı indiremiyorum." Sebep: harita, kaydırılabilir panelin içindeydi →
   dokunma haritaya gidiyordu. Çözüm: konum seçimi kendi TAM EKRAN adımı olur;
   sayfa kaydırma yok, harita tüm alanı kaplar, altta tek bir "Devam" butonu.
   Seçim bitince bu katman kapanır ve wizard başlar (haritanın devamı yok). */
.hr-pick{position:fixed;inset:0;z-index:3200;display:none;flex-direction:column;
  background:var(--ea-bg-0);overscroll-behavior:none;touch-action:none}
body.hr-pick-on .hr-pick{display:flex}
body.hr-pick-on{overflow:hidden}
.hr-pick-top{position:relative;z-index:2;display:flex;gap:10px;align-items:center;
  padding:calc(12px + env(safe-area-inset-top,0px)) 14px 12px;
  background:linear-gradient(180deg,rgba(12,10,8,.92),rgba(12,10,8,0));pointer-events:auto}
.hr-pick-top .hr-search-row{flex:1;min-width:0}
.hr-pick-body{position:relative;flex:1;min-height:0}
.hr-pick-body .hr-map-card{position:absolute;inset:0;border-radius:0;height:100%}
.hr-pick-body .hr-map{height:100%;min-height:0;aspect-ratio:auto}
.hr-pick-body .hr-results{left:14px;right:14px;top:0}
/* Hedef işareti tam ekranda daha görünür */
body.hr-pick-on .hr-reticle{width:58px;height:58px}
body.hr-pick-on .hr-reticle::before{width:58px;height:58px}
.hr-pick-foot{position:relative;z-index:2;display:flex;flex-direction:column;gap:10px;
  align-items:center;padding:14px 16px calc(16px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(0deg,rgba(12,10,8,.94),rgba(12,10,8,.55) 60%,transparent)}
.hr-pick-hint{font-size:12px;font-weight:300;color:var(--ea-text-soft);text-align:center}
.hr-pick-go{width:min(420px,100%);min-height:54px;cursor:pointer;border:none;border-radius:9999px;
  background:linear-gradient(180deg,var(--ea-accent-strong),var(--ea-accent));color:var(--ea-accent-ink);
  font-family:'Barlow',sans-serif;font-size:16px;font-weight:700;letter-spacing:.02em;
  box-shadow:0 14px 38px rgba(217,192,143,.3)}
.hr-pick-go:hover{filter:brightness(1.05)}
/* Seçiciden çıkış düğmesi — 44px dokunma hedefi, kabuktaki kapat ile aynı dil. */
.hr-pick-close{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  flex-shrink:0;border-radius:50%;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);color:var(--ea-text);cursor:pointer;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .2s}
.hr-pick-close:hover{background:rgba(255,255,255,.14)}
.hr-pick-demo{background:none;border:none;cursor:pointer;font-family:'Barlow',sans-serif;
  font-size:12px;color:var(--ea-text-faint);min-height:44px}
.hr-pick-demo:hover{color:var(--ea-accent-strong)}

/* ================================================= WIZARD — ATÖLYE ŞERİDİ ====
   Eski tasarım (numaralı daireler + altında etiket) hem hazır-şablon duruyordu
   hem de rakamlar optik olarak ortalı değildi (Cormorant italik yan boşluğu).
   Yeni dil: ATÖLYE TEZGÂHI ŞERİDİ — tek ince altın hat üzerinde ilerleyen
   elmas biçimli düğümler. Tamamlananlar dolu, mevcut olan halkalı ve ışıklı,
   gelecek olanlar soluk. Rakam yok → optik ortalama sorunu kökten biter;
   etiket yalnız mevcut adımda görünür (ekran sadeleşir). */
.wiz-head{gap:10px}
.wiz-bar{display:none}                    /* ayrı çubuk yok; hat düğümlerin içinde */

.wiz-dots{position:relative;justify-content:space-between;align-items:center;
  padding:14px 6px 6px;gap:0}
/* zemin hattı */
.wiz-dots::before{content:"";position:absolute;left:14px;right:14px;top:22px;height:1px;
  background:var(--ea-line-soft)}
/* tamamlanan kısmı vurgulayan ışıklı hat */
/* İlerleme transform ile çizilir, width ile DEĞİL: width her karede yerleşim
   hesabı tetikler. Ray tam boy durur ve soldan ölçeklenir — degrade elemanın
   kendi kutusuyla birlikte sıkıştığı için görüntü birebir aynı, maliyet GPU'da. */
.wiz-dots::after{content:"";position:absolute;left:14px;top:22px;height:1px;
  width:calc(100% - 28px);transform-origin:left center;
  transform:scaleX(var(--wiz-progress,0));
  background:linear-gradient(90deg,rgba(217,192,143,.35),var(--ea-accent-strong));
  box-shadow:0 0 12px rgba(217,192,143,.45);
  transition:transform .55s cubic-bezier(.22,1,.36,1)}

.wiz-dots li{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;
  gap:0;opacity:1;min-height:44px;justify-content:flex-start}
/* rakamı gizle — düğüm artık bir elmas */
.wiz-dots li b{position:relative;width:16px;height:16px;border-radius:0;border:none;
  background:none;font-size:0;color:transparent;box-shadow:none;
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.wiz-dots li b::before{content:"";width:7px;height:7px;transform:rotate(45deg);
  background:var(--ea-bg-0);border:1px solid var(--ea-line);
  transition:all .35s cubic-bezier(.22,1,.36,1)}
.wiz-dots li.is-done b::before{background:var(--ea-accent);border-color:var(--ea-accent);
  width:8px;height:8px}
.wiz-dots li.is-current b::before{background:var(--ea-accent-strong);
  border-color:var(--ea-accent-strong);width:11px;height:11px;
  box-shadow:0 0 0 5px rgba(217,192,143,.14),0 0 16px rgba(236,220,180,.55)}
/* mevcut adımın etiketi — diğerleri gizli, ekran sakin kalır */
.wiz-dots li span{margin-top:9px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ea-text-faint);opacity:0;transform:translateY(-3px);
  transition:opacity .35s ease,transform .35s ease;white-space:nowrap}
.wiz-dots li.is-current span{opacity:1;transform:none;color:var(--ea-accent-strong)}
/* opacity KALDIRILDI, yerine kendi rengi. Sebep: etiketin rengi zaten
   var(--ea-text-faint) yani .64 alfali; uzerine opacity:.55 gelince ETKIN
   ALFA .35'e dusuyordu. Iki soluklastirma ust uste carpilir — kimse .35
   hedeflemedi, iki ayri yerde ".biraz soluk olsun" denince oyle oldu.
   Olculdu (masaustu, /cizim): 3,52:1 goruluyor ama gercek deger daha kotu,
   cunku olcum aracı da opacity carpimini hesaba katmiyordu (simdi katiyor).
   Tek bir renk degeri: hem okunur hem tahmin edilebilir. */
@media (min-width:900px){ .wiz-dots li span{opacity:1;color:var(--ea-text-faint);transform:none} }
@media (prefers-reduced-motion:reduce){
  .wiz-dots::after,.wiz-dots li b::before,.wiz-dots li span{transition:none}
}

/* ---- "Tasarımımı e-postala" (finale özet kartı) ----
   Varsayılan KAPALI bir <details>: sipariş düğmesiyle dikkat yarıştırmasın,
   hemen karar veremeyen müşteri açsın. Alan 44px dokunma hedefinde. */
.ea-finale-kaydet{margin-top:14px;border-top:1px solid var(--ea-line-soft);padding-top:12px}
.ea-finale-kaydet > summary{cursor:pointer;list-style:none;font-size:12px;color:var(--ea-text-soft);
  min-height:44px;display:flex;align-items:center;gap:8px}
.ea-finale-kaydet > summary::-webkit-details-marker{display:none}
.ea-finale-kaydet > summary::after{content:"+";margin-left:auto;font-size:16px;color:var(--ea-accent);transition:transform .25s}
.ea-finale-kaydet[open] > summary::after{content:"−"}
.ea-finale-kaydet > summary:hover{color:var(--ea-text)}
.ea-finale-kaydet-l{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ea-text-faint);margin:8px 0 6px}
.ea-finale-kaydet-satir{display:flex;gap:8px;flex-wrap:wrap}
.ea-finale-kaydet-satir input{flex:1 1 190px;min-width:0;min-height:46px;padding:0 14px;border-radius:9999px;
  border:1px solid var(--ea-line);background:var(--ea-veil);color:var(--ea-text);
  font-family:'Barlow',sans-serif;font-size:13px}
.ea-finale-kaydet-satir input::placeholder{color:var(--ea-text-faint)}
.ea-finale-kaydet-satir button{min-height:46px;padding:0 20px;border-radius:9999px;border:0;cursor:pointer;
  background:linear-gradient(180deg,var(--ea-accent-strong),var(--ea-accent));color:var(--ea-accent-ink);
  font-family:'Barlow',sans-serif;font-size:12px;font-weight:600}
.ea-finale-kaydet-satir button:disabled{opacity:.6;cursor:default}
.ea-finale-kaydet-not{font-size:12px;line-height:1.6;color:var(--ea-text-faint);margin:10px 0 0}


/* Gravür uyarısı: müşteri kazınamayacak bir punto seçtiğinde çıkar.
   HATA değil BİLGİ — kırmızı değil şampanya tonunda, panik yaratmasın.
   Eşik ve fon başına gövde kalınlıkları kolye-motor.js'te ölçümle
   belgelendi (gerçek .woff2 dosyaları rasterize edilerek). */
.cz-engrave-warn{
  grid-column:1/-1;margin:6px 0 0;font-size:12px;font-weight:300;line-height:1.5;
  color:var(--ea-accent-strong,#ecdcb4);
  background:rgba(217,192,143,.08);border:1px solid rgba(217,192,143,.22);
  border-radius:12px;padding:8px 11px;
}


/* Adim gecisi geri bildirimi. Mobilde "Devam" panelin en altinda; basinca
   yeni adim kabin yukarisinda aciliyor ve ekranda gorunen hicbir sey
   degismiyordu. wizard.js artik yeni adimin basini kabin tepesine
   getiriyor; bu kisa darbe de gostergenin degistigini isaretliyor. */
@keyframes wiz-atim{
  0%{transform:none}
  38%{transform:translateY(-3px) scale(1.035)}
  100%{transform:none}
}
.wiz-atim{animation:wiz-atim .42s cubic-bezier(.16,1,.3,1)}
.wiz-count.wiz-atim{color:var(--ea-accent-strong,#ecdcb4)}
@media (prefers-reduced-motion:reduce){ .wiz-atim{animation:none} }


/* Sihirbaz engel uyarisi. Araclarin kendi [data-cz-status] elemani urun
   sahnesinin altinda kaliyor; 390x844'te olculdu, panelin gorunur alaninin
   TAMAMEN disinda. Bu satir "Devam"in hemen ustunde duruyor. */
.wiz-warn{
  margin:0 0 10px;font-size:12px;font-weight:300;line-height:1.5;
  color:var(--ea-err,#ff6b81);
  background:rgba(255,107,129,.08);border:1px solid rgba(255,107,129,.24);
  border-radius:12px;padding:9px 12px;
}
.wiz-warn[hidden]{display:none}


/* ===== GENIS EKRANDA WIZARD NEFES ALSIN ==================================
   Panel artik clamp(340px,26vw,520px) ile buyuyor. Ama yalniz kutuyu
   genisletmek bosluk uretir; icerik de olceklenmeli, yoksa 500 px'lik
   panelde 12 px yazi ve 22 px kenar boslugu "buyutulmus mobil" gibi durur.

   Kirilim 1280 px: bu esigin ustunde panel en az ~380 px oluyor ve iki
   sutunlu secim satirlari rahat siga biliyor. */
@media (min-width:1280px){
  .hr-fs-slot{padding:30px 38px 42px}
  .hr-fs-head{padding-top:26px;padding-bottom:18px}

  /* Secim haplari: dar seride alt alta katlaniyorlardi. */
  .hr-fs .cz-pill{font-size:13.5px;padding:11px 18px;min-height:46px}

  /* Adim basligi ve alt metni: 500 px'lik panelde 22 px baslik kucuk
     kaliyordu; site tipografisi zaten Cormorant italic. */
  .hr-fs .wiz-title{font-size:30px;line-height:1.08}
  .hr-fs .wiz-sub{font-size:14px;line-height:1.65;max-width:46ch}

  /* Ozet satirlari iki sutuna acilir — dar panelde tek sutundu ve
     "Toplam" satiri ekranin cok altina dusuyordu. Gercek isaretleme:
     .wiz-summary > .wiz-summary-rows > .wiz-sumrow (harita.php:368-374). */
  .hr-fs .wiz-summary-rows{display:grid;grid-template-columns:1fr 1fr;
    gap:4px 22px}

  /* Gezinme: genis panelde dugmeler kenarlara yapissin, ortada sayac. */
  .hr-fs .wiz-nav{padding-top:20px}
  .hr-fs .wiz-next{min-width:150px}
}

/* 1600 px ustu: panel ~420 px+. Satir uzunlugu 75 karakteri gecmesin diye
   metin genisligi ayrica sinirlanir; kutu buyur, SATIR buyumez. */
@media (min-width:1600px){
  .hr-fs-slot{padding:34px 44px 48px}
  .hr-fs .wiz-sub{max-width:52ch}
  .hr-fs .wiz-title{font-size:34px}
}