/* ===========================================================================
   MIQNO — /tasarla 4 ADIMLI AKIŞ (uxB-ekran1..6)

   İKİ BÖLGE PRENSİBİ:
     SERBEST  — bu dosyanın tamamı: kabuk, stepper, panel yerleşimi, alt bar.
     DİKKAT   — .tf-custom-card ve içindekiler. BU DOSYA ONLARA DOKUNMAZ.
                Kart = baskı ustası; görünümü tf-card.css'in sözleşmesidir.

   Panelleri YENİDEN YAZMIYORUZ, TAŞIYORUZ (bkz. tasarla-adimlar.js). Eski
   .tff-tab-content düğümleri adım kapsayıcılarının içine girer; görünürlüğü
   artık adım kapsayıcısı yönetir, eski .active mantığı değil -> aşağıdaki
   display override'ı bu yüzden var.
   =========================================================================== */

.tasarla-page{
  --ts-ground:#FBF3E7;
  --ts-surface:#FFFDF8;
  --ts-line:#E4D5C2;
  --ts-ink:#2A1E25;
  --ts-muted:#6B5A62;
  --ts-honey:#F4B860;
  --ts-coral:#E8674C;
  --ts-plum:#3D2B34;
  --ts-shadow:0 1px 2px rgba(42,30,37,.05), 0 8px 24px rgba(42,30,37,.06);
}

/* --- Eski sekme şeridi: SİLİNMEZ, gizlenir -------------------------------
   tf-sayfa.js birkaç yerde programatik olarak .tff-tab-btn[data-tab=..].click()
   çağırıyor (ör. foto hatasında 'photo' sekmesine atlama). Düğümleri DOM'da
   bırakıp yalnız görünmez yapıyoruz; o çağrılar çalışmaya devam eder ve
   stepper onları dinleyip kendi adımını senkronlar. */
.tasarla-page #ozel .tff-tabs{
  position:absolute !important;
  width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}

/* --- Stepper ------------------------------------------------------------- */
/* ADIM SERIDI (Kerem, 2026-08-22: "tam bu alana ortalanmali, belki cok az
   buyuyerek"). Olculdu: adimlarin merkezi 905px, bandin merkezi 960px --
   55px SOLA kaymisti. Sebep: "Kisa rehber" hapi da seridin bir parcasiydi ve
   flex ortalamasi ADIMLAR + HAP grubunu ortaliyordu; adimlar tek baslarina
   hapin yarisi kadar sola kayiyordu. Hap genis ekranda akistan cikarilip saga
   sabitlendi (asagida) -> adimlar bandin TAM ortasinda kalir.
   Serit ayrica bir tik buyudu: nokta 26->30px, yazi 14.5->15.5px. */
/* === UST BAR: onizleme etiketi + adim seridi (Kerem, 24 Agustos 2026) =======
   "Stepper'i sagdaki panelin TAM USTUNE hizala -- panelin sol ve sag kenar
   cizgileriyle ayni hizada olsun ve 4 adim panel genisligine ESIT araliklarla
   dagilsin (space-between; sabit uzunluklu tire yerine esnek cizgiler)."

   HIZA NEREDEN GELIYOR: .ts-topbar, .customizer-grid ile AYNI sutun tanimini
   kullanir (assets/css/tasarla.css:48). Boylece sol hucre onizleme sutununun,
   sag hucre kontrol panelinin tam ustune oturur. Piksel tahmini YOK -- sutun
   tanimi degisirse hiza kendiliginden takip eder. */
.ts-topbar{ display:grid; grid-template-columns:1fr; gap:10px; margin:0 0 22px; }
.ts-topbar-sol{ display:flex; flex-direction:column; gap:2px; justify-content:flex-end; }
.ts-onizleme-et{
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ts-coral);line-height:1;
}
.ts-onizleme-not{ font-size:12px;color:var(--ts-muted);line-height:1.3; }

@media (min-width:1040px){
  .tasarla-page #ozel .ts-topbar{
    grid-template-columns:minmax(360px, .92fr) minmax(0, 1.18fr);
    gap:clamp(20px, 2.6vw, 36px);
    align-items:end;
  }
}

/* Adimlar sag hucrenin TAMAMINI kaplar ve esit dagilir. justify-content:center +
   max-width:860px + margin:auto UCU DE KALDIRILDI: ucu birden seridi hucreden
   bagimsiz ortaliyor, panelle hizayi bozuyordu. */
.ts-steps{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;
  gap:0;flex-wrap:nowrap;
  width:100%;margin:0;padding:0;list-style:none;
}
.ts-step-btn{
  display:inline-flex;align-items:center;gap:9px;
  background:none;border:none;padding:6px 10px;border-radius:999px;
  font:inherit;font-size:15.5px;font-weight:500;color:var(--ts-muted);
  cursor:pointer;
}
.ts-step-btn[disabled]{cursor:default;opacity:.55}
.ts-step-btn:hover:not([disabled]) .ts-step-lbl{color:var(--ts-ink)}
.ts-step-btn:focus-visible{outline:2px solid var(--ts-coral);outline-offset:2px}
.ts-step-dot{
  flex:none;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;
  background:#EFE2CF;color:var(--ts-muted);
  font-size:13.5px;font-weight:600;line-height:1;
  transition:background .18s ease,color .18s ease;
}
.ts-step-btn[aria-current="step"] .ts-step-dot{background:var(--ts-coral);color:#fff}
.ts-step-btn[aria-current="step"] .ts-step-lbl{color:var(--ts-ink);font-weight:600}
.ts-step-btn[data-done="1"] .ts-step-dot{background:var(--ts-honey);color:var(--ts-plum)}
/* ESNEK BAGLANTI CIZGISI: sabit 26px iken adimlar arasindaki bosluk metin
   uzunluguna gore degisiyordu (Fotograf/Tema/Yazilar/Onay esit uzunlukta degil)
   ve dagilim esit GORUNMUYORDU. flex:1 ile kalan alan cizgilere esit paylastirilir. */
.ts-step-sep{flex:1 1 auto;min-width:10px;height:1px;background:var(--ts-line)}

/* --- Adım kapsayıcıları ---------------------------------------------------
   Sayfanın KENDİ iki sütunu (.customizer-grid) kullanılır; burada yeni bir
   kabuk KURULMAZ. Adım kapsayıcıları sağ sütunun (.customizer-form) içine
   girer, kart çekmecesi sol sütunda YERİNDE kalır. */
.ts-step-panel{display:none}
.ts-step-panel.is-active{display:block}
/* Taşınan eski paneller adım içinde HER ZAMAN görünür — eski .active mantığı
   tek panel gösteriyordu, adım 2'de üç panel birlikte durmalı. */
.ts-step-panel .tff-tab-content{display:block !important;visibility:visible !important}
.ts-step-panel .tff-tab-content + .tff-tab-content{margin-top:18px}

.ts-card{
  background:var(--ts-surface);border:1px solid var(--ts-line);
  border-radius:14px;padding:18px 20px;box-shadow:var(--ts-shadow);
}
.ts-card + .ts-card{margin-top:14px}
.ts-card-t{
  font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ts-coral);margin:0 0 12px;
}

.ts-hint{
  border:1px dashed var(--ts-line);border-radius:12px;
  padding:13px 16px;margin-top:14px;
  font-size:13.5px;line-height:1.55;color:var(--ts-muted);
}

/* --- Alt bar ------------------------------------------------------------- */
/* ALT BAR = PANELIN ALTLIGI (Kerem, 2026-08-22: "alttaki adım kısmı ve devam
   butonu tam oturmamış gibi"). Olculdu, uc ayri kirik vardi:
     1) Zemin YANLIS RENKTI: bar --ts-ground (#FBF3E7) boyuyordu ama panel
        BEYAZ (--panel). Beyaz panelin uzerinde bej bir bant duruyordu.
     2) Bar panelin IC DOLGUSUNU kapsamiyordu: panel 26px dolguluyken bar
        712px, panel 766px -> iki yanda 26px'lik beyaz seritler kaliyor ve bar
        panele ait degil, ustune BIRAKILMIS gibi gorunuyordu.
     3) Gradyan YARI SAYDAMDI (72% durakta bitiyor): yapiskan bar altindan
        gecen icerik siziyordu.
   Simdi: panelin kendi zemini, panelin kenarina kadar (negatif kenar boslugu),
   alt koseleri panelin yaricapina uyumlu ve ustunde ince bir ayrac. */
.ts-footbar{
  position:sticky;bottom:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin:26px calc(-1 * var(--ts-pane-pad,26px)) calc(-1 * var(--ts-pane-pad,26px));
  padding:14px var(--ts-pane-pad,26px);
  background:var(--panel,#FFFDF8);
  border-top:1px solid var(--ts-line);
  border-radius:0 0 calc(var(--ts-pane-radius,18px) - 1px) calc(var(--ts-pane-radius,18px) - 1px);
}
.ts-footbar-pos{font-size:13.5px;color:var(--ts-muted);white-space:nowrap}
.ts-nav{display:flex;gap:10px;align-items:center}
.ts-back{
  background:none;border:1px solid var(--ts-line);border-radius:999px;
  padding:10px 18px;font:inherit;font-size:14px;color:var(--ts-ink);
  cursor:pointer;
}
.ts-back:hover{border-color:var(--ts-muted)}
.ts-next{
  background:var(--ts-coral);color:#fff;border:none;border-radius:999px;
  padding:12px 28px;font:inherit;font-size:15px;font-weight:600;cursor:pointer;
}
.ts-next:hover{filter:brightness(1.05)}
/* Dugme metni ASLA sarmasin: 390px'te "Devam → Yazılar" iki satira kirilip
   dugmeyi 72px yuksekliginde bir bloga ceviriyordu (olculdu). */
.ts-back,.ts-next{white-space:nowrap}
.ts-next[disabled]{opacity:.45;cursor:default;filter:none}
.ts-back:focus-visible,.ts-next:focus-visible{outline:2px solid var(--ts-plum);outline-offset:2px}

/* --- Onay adımı: düzenleme kısayolları (ekran 6) -------------------------- */
.ts-jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.ts-jump button{
  background:var(--ts-surface);border:1px solid var(--ts-line);border-radius:999px;
  padding:8px 15px;font:inherit;font-size:13.5px;color:var(--ts-ink);cursor:pointer;
}
.ts-jump button:hover{border-color:var(--ts-coral);color:var(--ts-coral)}
.ts-jump button:focus-visible{outline:2px solid var(--ts-coral);outline-offset:2px}

/* --- Dar ekran kucuk ayarlari -------------------------------------------
   NOT: eski cekmeceye ait alt bosluk KALDIRILDI (tutamac degiskeni artik yok).
   Mobil duzenin tamaminin sahibi assets/css/tasarla-mobil.css. */
@media (max-width:900px){
  .ts-steps{gap:0}
  .ts-step-lbl{display:none}              /* dar ekranda yalnız numara */
  .ts-step-sep{min-width:8px}
  .ts-topbar{margin-bottom:16px}
}
/* DAR EKRAN: uc oge (sayac + Geri + Devam) 358px'e sigmiyordu; ucu de iki
   satira kiriliyordu. Adim ADI dusuruluyor (sayac kaliyor), olculer kuculuyor. */
@media (max-width:560px){
  .ts-footbar{gap:10px}
  .ts-footbar-pos{font-size:12.5px}
  .ts-pos-ad{display:none}
  .ts-back{padding:9px 14px;font-size:13.5px}
  .ts-next{padding:11px 16px;font-size:14px}
}
@media (max-width:380px){
  .ts-step-dot{width:23px;height:23px;font-size:11.5px}
}

/* --- Koyu tema: sayfa zaten açık temaya sabitli; yine de zemin açıkça yazılır */
@media (prefers-color-scheme:dark){
  .tasarla-page .ts-card{background:var(--ts-surface)}
}

/* ===========================================================================
   GÖRSEL KATMAN — mockup dili mevcut alanlara giydirilir
   Panellerin İÇ yapısına dokunulmaz: her .tff-field bir "kart" olur, ilk
   <label> mockup'taki küçük büyük-harf başlığa (FOTOĞRAFIN, TEMA, BOY…)
   dönüşür. Kontrollerin kendi düzeni (renk seçici, sürgü, ızgara) olduğu
   gibi kalır — onları yeniden yazmak dinleyicileri koparırdı.
   =========================================================================== */

.ts-step-panel .tff-field{
  background:var(--ts-surface);
  border:1px solid var(--ts-line);
  border-radius:14px;
  padding:16px 18px;
  box-shadow:var(--ts-shadow);
  margin:0 0 14px;
}
.ts-step-panel .tff-field:last-child{margin-bottom:0}

/* İlk etiket = bölüm başlığı (mockup'taki FOTOĞRAFIN / TEMA / BOY).
   İçinde form kontrolü OLAN etiket başlık DEĞİLDİR (magnet onay kutusu gibi) —
   ayrı bir override yerine kuralın KENDİSİ dışlar; override aynı özgüllükte
   kalıp sırayla kazanmaya çalışmak kırılgandı (ölçüldü: magnet etiketi büyük
   harfe dönüyordu). */
.ts-step-panel .tff-field > label:first-child:not(:has(input,select,textarea)){
  display:block;
  font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ts-coral);
  margin:0 0 12px;
}

.ts-step-panel .tff-help{
  display:block;font-size:12.5px;line-height:1.5;color:var(--ts-muted);margin-top:8px;
}

/* Yükleme alanı — ekran 1'deki kesikli kutu */
.ts-step-panel .tff-file-upload{
  border:1.5px dashed var(--ts-line);
  border-radius:12px;
  background:transparent;
  transition:border-color .16s ease,background .16s ease;
}
.ts-step-panel .tff-file-upload:hover{border-color:var(--ts-honey);background:rgba(244,184,96,.06)}

/* TEMA SEÇİCİ — "HAP ÇİPİ" KURALI KALDIRILDI (Kerem, 2026-08-22:
   "kart temalarının çevresindeki oval çerçeveyi görmüyor musun?").

   Buradaki kurallar mockup'ın ekran 4'ündeki METİN ÇİPLERİ için yazılmıştı:
     .ts-step-panel .cs-picker [data-tema]  ->  border-radius:999px; padding:9px 17px
   Ama üründe seçici metin çipi ÇİZMİYOR; küçük resimli .cs-style düğmeleri
   çiziyor ve onlar da data-tema taşıyor. Sonuç: 121x164 boyutundaki düğme
   999px yarıçapla OVAL bir halkaya dönüşüyordu -- yani her temanın etrafında,
   içindeki DİKDÖRTGEN kutuyla çelişen ikinci bir şekil. Şikâyetin kaynağı
   ("biri dikdörtgen diğeri oval") çerçeve sanatı DEĞİL, tam olarak buydu.

   Düğmenin görünümü artık yalnız kutunun kendisidir (.cs-thumb; bkz.
   tf-light.css) -- düğme saydam ve çerçevesiz kalır. Başlık kendi satırında
   tutulur: hap dolgusu kalkınca satır daralıyor ve .cs-picker flex sarması
   başlığı kutuların YANINA çekiyordu. */
.ts-step-panel .cs-picker{display:flex;flex-wrap:wrap;gap:8px}
.ts-step-panel .cs-picker .cs-title{flex:0 0 100%;text-align:left}   /* tam genislik olunca kendi ortalamasi gorunur oldu -> diger bolum basliklariyla hizala */
/* KOMUT G3: BU RESET YENİ TEMA BUTONUNA UYGULANMAZ.
   Kural eski `.cs-style` karoları için yazılmıştı: süs (kenar, zemin) iç
   kutudaydı, butonun kendisi ÇIPLAK olmalıydı. G3'ün `TemaButonu` bileşeni
   süsü BUTONUN kendisinde taşıyor; bu reset onu yiyordu (ölçüldü: zemin
   `rgba(0,0,0,0)`, kenar `0px`, dolgu `4px` -- haplar görünmez oluyordu).
   `!important` yarışı yerine KAPSAM daraltıldı. */
.ts-step-panel .cs-picker [data-tema]:not(.tfy-tb){
  border:0;border-radius:14px;padding:4px;background:transparent;cursor:pointer;
}

/* Adım 2: üç panel tek adımda — aralarına ince ayraç */
#ts-step-tema .tff-tab-content + .tff-tab-content{
  border-top:1px solid var(--ts-line);padding-top:18px;
}

/* Onay adımı: fiyat/özet satırları (ekran 6) */
#ts-step-onay .tff-size-grid{display:flex;flex-wrap:wrap;gap:10px}

/* Kart içindeki birincil düğmeler mercan hap olur (sepete ekle vb.) */
.ts-step-panel .btn-gold{
  background:var(--ts-coral);border-color:var(--ts-coral);color:#fff;border-radius:999px;
}
.ts-step-panel .btn-gold:hover{filter:brightness(1.05)}

/* [hidden] TUZAĞI: .btn-block{display:block} gibi sınıf kuralları, [hidden]
   özniteliğinin tarayıcı varsayılanı olan düşük öncelikli display:none'ını
   EZİYOR -> JS ile hidden=true yapılan eski "Devam Et" düğmeleri ekranda
   kalıyordu (ölçüldü). Alt bar bu düğmeleri devraldığı için burada kesin
   olarak gizlenirler. */
.ts-step-panel .tff-next[hidden],
.ts-step-panel .tfyt-ileri[hidden]{display:none !important}

/* "Kart Teması" gibi panel içi başlıklar da bölüm başlığı diline uyar */
.ts-step-panel .tff-tab-content > h3,
.ts-step-panel .cs-picker-title{
  font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ts-coral);margin:0 0 12px;
}

/* ===========================================================================
   MOBİL ÇEKMECE — MIQNO PALETİ

   tf-sayfa.css'teki sheet kabuğu koda gömülü KOYU gradyanla geliyor
   (linear-gradient(#15151b,#0e0e12)) ve tf-light.css'in --drawer-bg
   değişkenini HİÇ okumuyor — ölçüldü: değişken açık (rgba(255,255,255,.98))
   ama hesaplanan zemin koyu. Bu yüzden değişkeni düzeltmek yetmez, kabuğun
   kendisi burada yeniden boyanır.

   KAPSAM .tasarla-page: ana sayfanın çekmecesine DOKUNULMAZ (orayı ayrıca
   karara bağlarız). Kırılma noktası sheet'in kendi kuralıyla aynı (939px).
   KART'A DOKUNULMAZ: .tf-custom-card ve içi baskı ustasıdır.
   =========================================================================== */
/* BLOK KAPANDI (29 Agustos 2026) -- KAPANMAMIS SUSLU PARANTEZ.
   9766f03'te bu @media'nin ICI silindi ama KAPANIS PARANTEZI de silindi.
   Sonuc: dosyanin 312. satirdan SONUNA KADAR olan HER kurali bu mobil
   sorgunun icine hapsoldu -> masaustunde (>=940px) hicbiri uygulanmadi.
   OLCULDU: 1920'de .tfc-yazi-vurgu ve .tfk-secim-katmani 'position: static'
   cikiyordu; ikisi de .tf-custom-card-wrapper'in (display:grid) cocugu oldugu
   icin IZGARAYA EK SATIR olarak girdiler, sarmalayici sisti ve KART KESILDI.
   Ayni dosyada tarayici uyarmadi: acik parantez sessizce yutar.
   Bos kalan sorgu silinmiyor, KAPATILIYOR: dosyanin geri kalani ust duzeye
   doner ve 25 Agustos'tan beri masaustunde olu olan kurallar geri gelir. */


/* ===========================================================================
   ADIM 3 DÜZELTMELERİ (Kerem ekran görüntüleri, 2026-08-22)
   =========================================================================== */

/* 1) BOŞ KART SORUNU — "YAZI RENKLERİ" gibi alanlar aslında BÖLÜM BAŞLIĞIdır:
      markup'ta içi boş bir .tff-field + tek <label>. Kart stilini onlara da
      uygulayınca ekranda içi bomboş beyaz bir kutu kalıyordu. Sadece label
      taşıyan alan kart DEĞİL, başlıktır. */
.ts-step-panel .tff-field:has(> label:only-child){
  background:none;border:none;box-shadow:none;
  padding:0;margin:24px 0 10px;
}
.ts-step-panel .tff-field:has(> label:only-child) > label{margin:0}

/* 2) İSTATİSTİK SÜRGÜLERİ kart dışında, çıplak krem zemindeydi — çevresindeki
      her şey beyaz karttı, dil tutarsızdı. Sarmalayıcıları YOK (art arda
      kardeşler), o yüzden :has() ile TEK kart gibi birleştiriliyor:
      ilk satır üst köşeleri, son satır alt köşeleri yuvarlar; aradaki
      kenarlıklar kaldırılır. */
.ts-step-panel .tff-stat-row{
  background:var(--ts-surface);
  border:1px solid var(--ts-line);
  padding:12px 18px;margin:0;
}
.ts-step-panel .tff-stat-row + .tff-stat-row{border-top:none}
.ts-step-panel .tff-stat-row:not(.tff-stat-row + .tff-stat-row){
  border-radius:14px 14px 0 0;margin-top:14px;
}
.ts-step-panel .tff-stat-row:not(:has(+ .tff-stat-row)){
  border-radius:0 0 14px 14px;margin-bottom:14px;
  box-shadow:var(--ts-shadow);
}

/* 3) Ayraçlar krem zeminde koyu çizgi olarak duruyordu */
.ts-step-panel .tff-divider{
  border:none;border-top:1px solid var(--ts-line);
  height:0;margin:18px 0;background:none;
}

/* 4) Renk seçici kartları art arda geldiğinde aralarındaki boşluk daralır —
      "YAZI RENKLERİ" başlığı altında tek grup gibi okunurlar. */
.ts-step-panel #colorFieldWrap .tff-field + .tff-field,
.ts-step-panel .tff-field:has(.tff-color-swatch) + .tff-field:has(.tff-color-swatch){
  margin-top:8px;
}

/* KART STİLİ SEÇİCİSİ KALDIRILDI (Kerem, 2026-08-22).
   "TF Futbolcu Kart Stili / TF Custom Kart Stili" dropdown'ı müşteriye ikinci
   bir stil kavramı sunuyordu; tema seçimi zaten bu işi yapıyor.
   DÜĞÜM SİLİNMEZ, GİZLENİR: <select> aynı zamanda selectStyle zincirinin ince
   delegesi (change -> gizli .cs-style düğmesine programatik tık). Silseydik
   varsayılan 'fifa' seçimini kuran zincir kopardı. Gizli kalır, fifa sabittir
   ve Forge XI renk seçicileri (Lakap/İsim/Söz) böylece kalıcı olarak kapanır —
   tüm yazılar tek kartelaya bağlanır. */
.ts-step-panel #cardStyleField{display:none !important}

/* === ÇERÇEVE IZGARASI (B4, 2026-08-23) ====================================
   Kural (Kerem): "Çerçeveler tek bir ızgarada, yan yana 6 adet, hepsi AYNI
   boyutta küçük önizleme kutuları halinde sıralanır. Alt alta satırlar halinde
   devam eder; isimle/kategoriyle bölünmez, gruplanmaz. Seçili çerçeve yalnızca
   vurgu çerçevesiyle belli olur."

   Aile başlığı (.tfyt-baslik) kuralı BURADAN KALDIRILDI — o düğüm artık
   üretilmiyor (bkz. tf-yeni-temalar.js/cerceveIzgarasi).

   Sabit 6 sütun: auto-fill kullanılmıyor, çünkü panel genişliği değişince
   satırdaki adet de değişiyordu ve ızgara her ekranda başka görünüyordu.

   aspect-ratio: kutu, görsel inmeden ÖNCE de yerini tutar. Bu olmadan lazy
   yüklenen satırlar önce sıfır yükseklikte oluyor, sonra zıplıyordu. Zemin de
   burada: yüklenene kadar kutu boş değil, sönük bir yüzey görünür. */
.ts-step-panel #frameFamilyGroup{
  display:grid !important;
  grid-template-columns:repeat(6, minmax(0, 1fr)) !important;
  gap:8px !important;
  align-content:start;
}
.ts-step-panel #frameFamilyGroup .tff-frame-family{
  aspect-ratio:3 / 4;
  padding:5px !important;
  gap:0 !important;
  display:flex !important;
  align-items:center;justify-content:center;
  overflow:hidden;
  background:rgba(0,0,0,.035) !important;   /* yüklenene kadarki zemin */
}
/* GENISLIK KESIN OLMALI (width:auto DEGIL). Kaynagi henuz atanmamis bir <img>'in
   dogal genisligi 0'dir; width:auto verilince kutusu da 0x125 olur. Sifir genislikli
   element hicbir zaman "gorunur alana girdi" saymaz -> IntersectionObserver TETIKLENMEZ
   ve gorsel hic yuklenmez. Olculdu (2026-08-23): gozlemci 50 hedefte 0 kez tetiklendi.
   width:100% kutuyu bastan doldurur; object-fit:contain oran bozulmasini engeller. */
.ts-step-panel #frameFamilyGroup .tff-frame-family img{
  width:100% !important;height:auto !important;   /* ÇERÇEVE ADI: boy orandan (aşağıda), etiket altına gelir */
  object-fit:contain;display:block;
}
/* Aile başlığı / kilit gibi düğümler GÖSTERİLMEZ (B4). Çerçeve ADI (`.tfyt-cerceve-ad`,
   17 Eylül 2026) bunun dışında: küçük resmin altında tek satır; oran karodan resme taşındı. */
.ts-step-panel #frameFamilyGroup .tff-frame-family > span:not(.tfyt-cerceve-ad),
.ts-step-panel #frameFamilyGroup .tff-frame-family .tfyt-kilit,
.ts-step-panel #frameFamilyGroup .tfyt-baslik{display:none !important}
.ts-step-panel #frameFamilyGroup .tff-frame-family{aspect-ratio:auto;flex-direction:column}
.ts-step-panel #frameFamilyGroup .tff-frame-family img{aspect-ratio:3 / 4;flex:0 0 auto}
.ts-step-panel #frameFamilyGroup .tff-frame-family .tfyt-cerceve-ad{
  display:block;width:100%;height:18px;line-height:18px;font-size:12px;font-weight:600;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Dar ekranda da 6 sütun (kural böyle). 390px'te kutu ~52px'e iniyor; ölçüldü
   ve Kerem'e raporlandı -- deseni okumak zorlaşırsa satırdaki adet burada
   düşürülür, kuralın geri kalanı (isim yok, eşit boyut) aynen korunur. */

/* === KISA REHBER (ilk kullanım turu) ======================================
   Tur mantığı tf-tur.js'te; GÖRSEL DİLİ burada, çünkü krem sahne, mürdüm
   mürekkep ve mercan CTA bu sayfanın dili. tf-sayfa.css'teki koyu stiller
   DURUYOR (başka sayfalarda tur değişmesin) — burası yalnız .tasarla-page.

   Ölçüldü 2026-08-22: balon altın çerçeveli koyu bir kutuydu ve başlığı
   büyük harf Oswald'dı; krem sahnede yabancı duruyordu. Perde de saf siyahtı
   (rgba(0,0,0,.72)) — krem sayfayı çamurlaştırıyordu, mürdüme çevrildi.
   ========================================================================== */
.tasarla-page .tfTur-perde{
  background:radial-gradient(circle at var(--tfTur-x,50%) var(--tfTur-y,40%),
    rgba(61,43,52,0) 96px, rgba(61,43,52,.42) 300px);
}
.tasarla-page .tfTur-balon{
  background:var(--ts-surface);border:1px solid var(--ts-line);border-radius:18px;
  padding:18px 18px 15px;color:var(--ts-ink);
  box-shadow:0 18px 48px -20px rgba(42,30,37,.35);
}
.tasarla-page .tfTur-ok{
  background:var(--ts-surface);border-left-color:var(--ts-line);border-top-color:var(--ts-line);
}
/* Balon uste gecince ok da doner (bkz. tf-sayfa.css .tfTur-ustte) -- bu deri
   yalniz rengi devralir, konumu taban kural belirler. */
.tasarla-page .tfTur-balon.tfTur-ustte .tfTur-ok{
  border-right-color:var(--ts-line);border-bottom-color:var(--ts-line);
}
.tasarla-page .tfTur-sayi{color:var(--ts-muted);font-size:12px;letter-spacing:.12em}
/* Başlık: sakin. Büyük harf başlık burada bağırıyordu. */
.tasarla-page .tfTur-bas{
  font-family:inherit;font-size:17px;font-weight:600;
  text-transform:none;letter-spacing:0;color:var(--ts-ink);
}
.tasarla-page .tfTur-ne{color:var(--ts-muted);font-size:14px;line-height:1.6;margin-bottom:16px}
.tasarla-page .tfTur-alt button{
  border:1px solid var(--ts-line);color:var(--ts-ink);font:inherit;font-size:14px;padding:10px 16px;
}
.tasarla-page .tfTur-bitir{flex:0 0 auto}
/* Birincil düğme sayfanın kendi CTA'sıyla aynı: mercan hap (bkz. .ts-next) */
.tasarla-page .tfTur-ileri{background:var(--ts-coral);color:#fff;border-color:transparent;font-weight:600}
.tasarla-page .tfTur-ileri:hover{filter:brightness(1.05)}
.tasarla-page .tfTur-sus{color:var(--ts-muted);font-size:12.5px;text-decoration:none}
.tasarla-page .tfTur-sus:hover{text-decoration:underline}
/* İşaretli hedef artık stepper hapı: altın halka krem zeminde kayboluyordu. */
.tasarla-page .tfTur-isaretli{
  box-shadow:0 0 0 2px var(--ts-coral), 0 0 0 6px rgba(232,103,76,.16);
  border-radius:999px;
}
/* Rehber çağrısı: artık adım şeridinde DEĞİL, sayfa başlığının sağ üstünde.
   Şeridin içindeki her ek öğe, adımların panele hizasını bozuyordu (bir kez
   position:absolute ile yamanmıştı; şerit sağ panele hizalanınca o yama da
   yetmez oldu). Artık .tw-head'e taşınıyor -- şerit temiz kalır. */
.tw-head--rehberli{ position:relative; }
.tasarla-page .tfTur-cagir{
  display:inline-flex;align-items:center;padding:6px 12px;
  border:1px solid var(--ts-line);border-radius:999px;background:none;
  color:var(--ts-muted);font:inherit;font-size:13px;text-decoration:none;cursor:pointer;
}
.tasarla-page .tfTur-cagir:hover{color:var(--ts-ink);border-color:var(--ts-muted)}
.tasarla-page .tfTur-cagir:focus-visible{outline:2px solid var(--ts-plum);outline-offset:2px}
@media (min-width:641px){
  /* Başlık bloğunun sağ üst köşesi. Akıştan çıkar -> başlık/alt metin yerinde kalır. */
  .tasarla-page .tw-head--rehberli .tfTur-cagir{ position:absolute; right:0; top:0; }
}
@media (max-width:640px){
  /* Dar ekranda mutlak konum başlığın üstüne biner; akışta, sağa yaslı dursun. */
  .tasarla-page .tw-head--rehberli{ display:flex; flex-direction:column; align-items:flex-start; }
  .tasarla-page .tw-head--rehberli .tfTur-cagir{ margin-top:10px; align-self:flex-start; }
}

/* === ADET SAYACI — TEK SAHİBE TAŞINDI (R-2, 29 Ağustos 2026) =============
   Sayacın TÜM kuralları (geometri + renk + tipografi) artık
   `tasarla-sahne.css` "13d) ADET SAYACI" bölümünde, TEK YERDE.

   NEDEN taşındı: bileşenin sahibi bölünmüştü -- hap geometrisi burada,
   renk/punto orada. `.tasarla-page .tk-qty-btn { font-size }` iki dosyada da
   düz `(0,2,0)` özgüllükle yazılıydı ve çatışma yalnız DOSYA SIRASIYLA
   çözülüyordu (sahne, adimlar'dan sonra yükleniyor). Sheet sırası bir gün
   değişirse sayaç sessizce 18px'e düşerdi -- kimsenin fark etmeyeceği türden.

   NEDEN sahne dosyası seçildi: bugün kazanan değerlerin sahibi o
   (`!important` + sonra yüklenme). Blok oraya, mevcut 13d kuralının HEMEN
   ÜSTÜNE, sırası bozulmadan taşındı -> hesaplanan hiçbir değer değişmedi.
   ÖLÇÜLDÜ (önce/sonra, 1920x911 / 1280x855 / 390x844): kap 999px hap,
   düğmeler 40x42 / 22px / #1E1410, rakam 46x42 / 15.2px / 600 -- BİREBİR.
   ========================================================================= */

/* === MASAÜSTÜ YAKINLAŞTIRMA SÜRGÜSÜ (uxB) ================================
   Karar: sürgü YALNIZ masaüstünde. Dokunmatikte pinch zaten doğal ve mobil
   çekmecesinde her piksel değerli; masaüstünde ise tekerlek jesti kimseye
   söylenmiyordu. Eşik 939px -- tf-sayfa.js'teki isMobile() ile AYNI, ikisi
   ayrışırsa ipucu ile gerçek davranış çelişir.
   ========================================================================= */
.tasarla-page .photo-hint-desk,
.tasarla-page .photo-zoom{display:none}
@media (min-width:940px){
  .tasarla-page .photo-hint-touch{display:none}
  .tasarla-page .photo-hint-desk{display:inline}
  .tasarla-page .photo-zoom{
    display:flex;align-items:center;gap:10px;width:100%;max-width:260px;margin:8px auto 0;
  }
}
.tasarla-page .photo-zoom-ico{
  font-size:14px;line-height:1;color:var(--ts-muted);user-select:none;
}
.tasarla-page .photo-zoom-range{
  flex:1;height:20px;margin:0;background:none;-webkit-appearance:none;appearance:none;cursor:pointer;
}
.tasarla-page .photo-zoom-range::-webkit-slider-runnable-track{
  height:3px;border-radius:999px;background:var(--ts-line);
}
.tasarla-page .photo-zoom-range::-moz-range-track{
  height:3px;border-radius:999px;background:var(--ts-line);
}
.tasarla-page .photo-zoom-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:16px;height:16px;margin-top:-6.5px;
  border-radius:50%;background:var(--ts-coral);border:2px solid #fff;
  box-shadow:0 1px 3px rgba(42,30,37,.28);
}
.tasarla-page .photo-zoom-range::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;background:var(--ts-coral);border:2px solid #fff;
  box-shadow:0 1px 3px rgba(42,30,37,.28);
}
.tasarla-page .photo-zoom-range:focus-visible{outline:2px solid var(--ts-plum);outline-offset:4px}

/* Çerçeve rengi alanı KİLİTLİ temada gizlenir. .tff-field'ın kendi display'i
   var; tarayıcının [hidden] varsayılanı (UA sayfası) yazar kuralın ALTINDA
   kalıyor -> hidden yazmak yetmiyordu (aynı tuzak .tfyt-ileri[hidden]'da da
   yaşandı, bkz. yukarısı). */
.tasarla-page #frameColorField[hidden]{display:none !important}

/* === AKTİF YAZI VURGUSU — EMEKLİ (R-6, 29 Ağustos 2026) ==================
   `.tfc-yazi-vurgu` KALDIRILDI (kural + düğüm). Seçili yazının halkasını artık
   YALNIZ `.tfk-secim-katmani` çiziyor (aşağıdaki KOMUT 4 bölümü).

   ÖLÇÜLDÜ (1920x911 / 1280x855 / 390x844; iki yazı katmanı eklenip kanvastan
   seçilerek): kutu sahnede vardı ama HER ölçümde `hidden` idi; görünür halka
   sayısı zaten 1 ve sınıfı `tfk-secim tfk-serbest`. Kutuyu açacak iki dalın
   ikisi de ulaşılamazdı -- `.tfyt-alan[data-alan]` eşleşmesi 0 ("Kart
   bilgileri" paneli 24 Ağustos'ta kalktı) ve serbest yazı dalı yalnız TFKanvas
   yokken çalışıyordu.

   BURASI SİLİNMESİ GEREKEN YERDİ, çünkü kutu `.tf-custom-card-wrapper`ın
   (display:grid) çocuğuydu ve akıştan çıkmasını YALNIZ buradaki
   `position:absolute` sağlıyordu. O kural 25-29 Ağustos arasında ölüyken
   ölçülen sonuç: ızgara "485.703px" -> "485.703px 47px", sarmalayıcı
   666.9 -> 731.4, kartın tepesi 204.6 -> 172.3 -> KART KESİLDİ.
   Artık sarmalayıcının ızgarasına satır açabilecek ikinci düğüm yok.
   Nöbetçi: tests/aktif-yazi-vurgusu.test.js (VY-2/VY-3 "geri gelmesin").
   ========================================================================= */

/* === SİPARİŞ ÖZETİ (uxB-ekran6) ==========================================
   "Sepete Ekle"nin ÜSTÜNDE satır satır döküm: kalem, ek ücretler, kargo notu
   ve toplam. Rakamlar butonun yanındaki tutarla AYNI hesaptan gelir.
   ========================================================================= */
.tasarla-page .cu-ozet{
  background:var(--ts-ground);border:1px solid var(--ts-line);border-radius:14px;
  padding:14px 16px;
}
.tasarla-page .cu-ozet-satirlar{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.tasarla-page .cu-ozet-satir{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-size:14px;color:var(--ts-ink);
}
.tasarla-page .cu-ozet-satir span:last-child{white-space:nowrap;font-variant-numeric:tabular-nums}
.tasarla-page .cu-ozet-not{font-style:normal;font-size:13px;color:var(--ts-muted)}
.tasarla-page .cu-ozet-toplam{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--ts-line);
  font-size:15.5px;font-weight:600;color:var(--ts-ink);
}
.tasarla-page .cu-ozet-toplam b{font-size:18px;font-variant-numeric:tabular-nums}
@media (max-width:560px){
  .tasarla-page .cu-ozet{padding:12px 13px}
  .tasarla-page .cu-ozet-satir{font-size:13.5px}
  .tasarla-page .cu-ozet-toplam b{font-size:17px}
}

/* === YAZILAR PANELİ — seçili yazı belirgin olsun (Kerem, 24 Ağustos 2026) ====
   "Yazı eklendikten sonra yazılan yazı ile seçilen yazı anlaşılabilmeli."

   ÖNCEKİ HÂLİ: listedeki seçili satır yalnız ince bir altın kenarlıkla
   belliydi (tf-sayfa.css .tfyt-katman.on) ve hemen altında AYNI metni gösteren
   ikinci bir kutu duruyordu -- ekran görüntüsünde ikisi birbirinin kopyası gibi
   görünüyor, hangisinin ne olduğu anlaşılmıyordu.

   ŞİMDİ: seçili satır dolgulu bir yüzey + "düzenleniyor" rozeti taşıyor;
   düzenleme kutusunun başında da hangi yazının düzenlendiği yazılı. */
.ts-step-panel .tfyt-katman{
  border-radius:10px;padding:9px 10px;cursor:pointer;
  transition:background .15s ease,border-color .15s ease;
}
.ts-step-panel .tfyt-katman:hover{ border-color:var(--ts-muted); }
.ts-step-panel .tfyt-katman.on{
  background:rgba(232,103,76,.09);
  border-color:var(--ts-coral) !important;
  color:var(--ts-ink) !important;
  box-shadow:0 0 0 1px var(--ts-coral) inset;
}
.ts-step-panel .tfyt-katman-tx{
  flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* `.tfyt-katman-rozet` KURALI SİLİNDİ (R-3, 29 Ağustos 2026).
   "düzenleniyor" rozeti K3-2'de (28 Ağustos) numaralı çip şeridine geçilirken
   üretilmez oldu: tf-yeni-temalar katman çipi artık `.tfyt-katman-no`,
   `-tx` ve `-sil` üretiyor. ÖLÇÜLDÜ (1920x911 / 1280x855 / 390x844, iki
   katman ekliyken): `.ts-step-panel .tfyt-katman-rozet` eşleşmesi ÜÇÜNDE DE 0;
   depoda düğümü üreten tek bir satır bile yok. Kardeşi
   (tasarla-masaustu.css'teki `display:none !important` savunması) da aynı
   gerekçeyle kaldırıldı. */
.ts-step-panel .tfyt-secili-bilgi{ display:block;margin:12px 0 4px;color:var(--ts-muted); }
.ts-step-panel .tfyt-secili-bilgi b{ color:var(--ts-ink);font-weight:600; }

/* === Y4 (28 Agustos 2026): YAZI IPUCU PLATFORMA GORE ======================
   Olculdu: masaustu panelinde "parmaginla surukle" yaziyordu -- mobil metni
   web'e sizmisti. Ayrim sitenin KENDI deseniyle: iki dugum, gorunurlugu
   940px esiginden. Esik `.photo-hint-touch/desk` ile AYNI; ikisi ayrisirsa
   ipucu ile gercek davranis celisir. */
.tasarla-page .tfyt-ipucu-masaustu{ display:none; }
@media (min-width:940px){
  .tasarla-page .tfyt-ipucu-dokunmatik{ display:none; }
  .tasarla-page .tfyt-ipucu-masaustu{ display:block; }
}

/* === Y3: YER TUTUCU YAZI =================================================
   Katman metni bosken kartta SOLUK bir "Yeni yazi" durur -- musteri nereye
   geldigini gorsun, secebilsin. Bu bir DUZENLEME YARDIMI: temaSpec'e girmez
   (tf-yeni-temalar temaSpec filtresi) ve baski cekiminden elenir
   (tf-card-render cekimFiltre). Ikisi de AYNI isareti okur: .tfyt-yertutucu */
.tasarla-page .tfyt-yertutucu{ opacity:.42; }

/* === KOMUT 4 (29 Agustos 2026): KANVAS SECIM KATMANI =====================
   Secim gostergeleri ve tutamaclar .tf-custom-card'in ICINE GIRMEZ -- katman
   kartin KARDESI olarak sarmalayiciya konur. Baski cekimi KARTI cektigi icin
   gosterge PNG'ye hicbir kosulda giremez. (Ayni gerekce .tfc-yazi-vurgu'da da
   uygulanmisti; burada tur-bagimsiz hale getiriliyor.)
   pointer-events: none -> katman jesti YUTMAZ; jestin tek sahibi kart. */
.tasarla-page .tfk-secim-katmani{
  position:absolute; inset:0; z-index:6;
  pointer-events:none;
}
.tasarla-page .tfk-secim-katmani[hidden]{ display:none; }
.tasarla-page .tfk-secim{
  position:absolute; box-sizing:border-box;
  transform-origin:center center;
}
/* SERBEST NESNE (yazi, ileride emoji): kesikli cerceve + kose tutamaclari. */
.tasarla-page .tfk-serbest{
  border:1px dashed var(--gold,#F4B860);
  border-radius:3px;
}
.tasarla-page .tfk-tutamac{
  position:absolute; width:11px; height:11px;
  background:#fff; border:1.5px solid var(--gold,#F4B860); border-radius:50%;
  pointer-events:auto;
}
.tasarla-page .tfk-tl{ left:-6px; top:-6px; }
.tasarla-page .tfk-tr{ right:-6px; top:-6px; }
.tasarla-page .tfk-bl{ left:-6px; bottom:-6px; }
.tasarla-page .tfk-br{ right:-6px; bottom:-6px; }
.tasarla-page .tfk-don{ left:50%; top:-24px; margin-left:-5.5px; }
/* A2 (KOMUT A, Kerem): FOTOGRAFIN PENCERE GOSTERGESI TAMAMEN KALDIRILDI --
   ne cizgi ne kose isareti, hicbir durumda. Kural + DUGUM birlikte gitti
   (tf-kanvas.js gostergeyiTazele artik `serbest` olmayan turde HICBIR SEY
   cizmiyor); geride olu kural birakilmadi -- OLU KURAL muhru (D-1..D-4)
   bunu kolluyor. Eski siniflar: .tfk-pencere, .tfk-koseisaret.
   Yazi tutamaclari ve halkasi (.tfk-serbest, .tfk-tutamac) AYNEN duruyor. */

/* K4-7: bir kerelik ipucu. Katman gibi kartin KARDESI -- baskiya giremez. */
.tasarla-page .tfk-ipucu{
  position:absolute; left:50%; bottom:-6px; transform:translate(-50%,100%);
  z-index:7; pointer-events:none; white-space:nowrap;
  padding:6px 12px; border-radius:999px;
  background:rgba(20,14,18,.82); color:#F3E8DC;
  font-size:.76rem; line-height:1;
}
@media (prefers-reduced-motion: reduce){
  .tasarla-page .tfk-secim{ transition:none; }
}
/* ═════════════════════════════════════════════════════════════════════════
   GERİ AL DÜĞMESİ (MOB-4, 10 Eylül 2026)
   Panel başlığında; mobilde `.tsm-baslik`, masaüstünde `.tsw-panel-basi`.
   Bu dosya KATMAN BAĞIMSIZ ve /tasarla'da her iki düzende de yükleniyor --
   kural bir kez yazılıyor, iki katman da aynı düğmeyi görüyor.
   Ölçü 44×44 (MOB-3 kuralı): görsel kutu da bu -- ikon 18 px, gerisi nefes.
   ========================================================================== */
.tfga-dugme {
  margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 44px; min-height: 44px; padding: 0 10px;
  border: 1px solid var(--line, rgba(59,44,53,.10));
  border-radius: 999px;
  background: transparent; color: inherit;
  font: inherit; font-size: 0.82rem; cursor: pointer;
  transition: opacity .15s ease, background-color .15s ease;
}
.tfga-dugme svg { width: 18px; height: 18px; flex: 0 0 auto; }
.tfga-dugme:hover:not([disabled]) { background: rgba(59,44,53,.05); }
/* PASİF: yığın boşken tıklama hiçbir şey değiştirmez. `disabled` niteliği
   JS'te de var -- burada yalnız görünür karşılığı. */
.tfga-dugme[disabled] { opacity: .38; cursor: default; }
/* Dar ekranda yalnız ikon: başlık satırı zaten ad + ipucu taşıyor. */
@media (max-width: 480px) {
  .tfga-dugme .tfga-ad { display: none; }
  .tfga-dugme[hidden] { display: none; }
}

/* MOBİLDE BAŞLIĞA YÜKSEKLİK EKLEMEZ.
   ÖLÇÜLDÜ (MOB-4): düğme sheet başlığında KENDİ SATIRINI açıyordu; başlık
   ~44 px büyüyünce tema ızgarası aşağı kayıyor, üç adet 114x209'luk çerçeve
   düğmesi yapışkan başlığın altına giriyor ve "44 altı" sayısı 3'ten 6'ya
   çıkıyordu. Yani panelde açılan her piksel, aşağıdaki hedeflerin
   ulaşılabilirliğinden düşüyor.
   Düğme başlığın SAĞ ÜST köşesine oturtulur: kendi kutusu akıştan çıkar,
   başlık yüksekliği DEĞİŞMEZ. İpucu metnine yer açmak için başlık satırına
   sağdan boşluk verilir -- metin düğmenin altına girmez. */
@media (max-width: 767px) {
  /* Kapsayıcı kutu ZATEN var: başlık `position: sticky` (tasarla-mobil.css).
     Burada tekrar yazılmıyor -- bir özelliğin tek sahibi olsun. */
  .tasarla-page .tsm-baslik .tfga-dugme {
    position: absolute; top: 4px; right: 12px; margin-left: 0;
  }
  .tasarla-page .tsm-baslik .tsm-baslik-satir { padding-right: 52px; }
}