/* ============================================================================
   MIQNO — /tasarla SAHNESİ · "SEÇENEK A" (onaylı, 24 Ağustos 2026)
   Referans: AI/mochup/tasarla-secenek-A.png + uxB-ekran1..6

   KATMANLAMA (Kerem'in nihai kararı):
       koyu sayfa  →  AÇIK (krem) önizleme kutusu  →  kutunun içinde kartın
       hemen arkasında yumuşak koyu oval/spot  →  kart
   Spot, kartın KESİM SINIRININ koyu zeminde net görünmesi için var. Abartılı
   degrade değil; yumuşak, dar bir sahne ışığı.

   TOKEN SİSTEMİ ANA SAYFAYLA AYNI (talimat: "renkleri tek tek yazma, tokenlardan
   türet"). Koyu palet anasayfa-ritim.css'teki `--d-*` ile BİREBİR aynı
   değerlerdedir; açık ada ise mevcut açık panel dilidir (krem zemin, beyaz
   kartlar, mürdüm metin).

   DOKUNULMAZ: `.tf-custom-card` ve içindekiler. Bu dosya kartın hiçbir kuralını
   yazmaz — yalnız kartın DURDUĞU SAHNEYİ kurar. Spot bile karta değil, önizleme
   KUTUSUNA (`.customizer-preview::before`) çizilir; kart zaten konumlandırılmış
   bir torun olduğu için doğal olarak spotun ÜSTÜNDE boyanır, z-index gerekmez.

   YÜKLEME SIRASI: tf-koyu.css'ten SONRA. O dosya sayfayı soğuk gri (#0F1115)
   yapıyor; buradaki sıcak mürdüm onu ezer.
   ========================================================================== */


/* ---------------------------------------------------------------------------
   1) SAYFA — koyu mürdüm sahne
   ------------------------------------------------------------------------- */
.tasarla-page{
  /* --- koyu palet (anasayfa-ritim.css ile AYNI) --- */
  --d-bg:#2E2229;
  --d-bg-2:#1D141B;
  --d-head:#F3E8DC;
  --d-muted:#B79DA9;
  --d-tag:#F4B860;
  --d-surface:rgba(255,246,236,.06);
  --d-edge:rgba(244,184,96,.22);

  /* --- açık ada (paneller + önizleme kutusu) --- */
  --a-bg:#FFF9F0;
  --a-kart:#FFFFFF;
  --a-cizgi:#EADBC8;
  --a-metin:#3B2C35;
  --a-soluk:#86707C;

  --coral:#E96A4B;
  --coral-2:#DE5636;
  --coral-metin:#1E1410;          /* mercan üstünde AA: 5.70:1 */

  background:
    radial-gradient(120% 80% at 50% 0%, var(--d-bg) 0%, var(--d-bg-2) 70%) !important;
  color:var(--d-head);
  min-height:100vh;
}

/* Bölüm kapsayıcıları saydam olur ki sayfa degradesi kesintisiz aksın. */
.tasarla-page #ozel,
.tasarla-page #ozel.customizer-section,
.tasarla-page .tw{
  background:transparent !important;
  border:none !important;
}

/* Başlık + ekmek kırıntısı — koyu zeminde, kompakt. */
.tasarla-page #ozel{ color:var(--d-head); }
.tasarla-page .tw-title{ color:var(--d-head) !important; }
.tasarla-page .tw-lead{ color:var(--d-muted) !important; }
.tasarla-page .tw-crumb,
.tasarla-page .tw-crumb a{ color:var(--d-muted) !important; }
.tasarla-page .tw-crumb a:hover{ color:var(--d-tag) !important; }
.tasarla-page .tw-crumb span[aria-current]{ color:var(--d-head) !important; }
.tasarla-page .tw-head{ padding-bottom:clamp(8px,1.4vw,14px); }


/* ---------------------------------------------------------------------------
   2) STEPPER — koyu zemin üstünde
   pasif soluk · aktif MERCAN · tamamlanan BAL
   ------------------------------------------------------------------------- */
.tasarla-page .ts-topbar{ background:transparent !important; }
.tasarla-page .ts-onizleme-et{ color:var(--d-tag) !important; }
.tasarla-page .ts-onizleme-not{ color:var(--d-muted) !important; }

.tasarla-page .ts-step-lbl{ color:var(--d-muted); }
.tasarla-page .ts-step-dot{
  background:rgba(255,246,236,.10);
  border:1px solid rgba(255,246,236,.18);
  color:var(--d-muted);
}
.tasarla-page .ts-step-sep{ background:rgba(255,246,236,.14); }

.tasarla-page .ts-step-btn[aria-current="step"] .ts-step-dot,
.tasarla-page .ts-step-btn.is-active .ts-step-dot{
  background:var(--coral); border-color:var(--coral); color:#FFF6EC;
}
.tasarla-page .ts-step-btn[aria-current="step"] .ts-step-lbl,
.tasarla-page .ts-step-btn.is-active .ts-step-lbl{ color:var(--d-head); font-weight:600; }

.tasarla-page .ts-step-btn.is-done .ts-step-dot{
  background:var(--d-tag); border-color:var(--d-tag); color:#241A20;
}
.tasarla-page .ts-step-btn.is-done .ts-step-lbl{ color:var(--d-head); }

/* Ziyaret edilmemiş adım tıklanamaz görünür. */
.tasarla-page .ts-step-btn[disabled]{ opacity:.55; cursor:default; }

/* "Kısa rehber" sağ üstte, koyu zemine göre. */
.tasarla-page #tfTurAc{ color:var(--d-muted) !important; }
.tasarla-page #tfTurAc:hover{ color:var(--d-tag) !important; }


/* ---------------------------------------------------------------------------
   3) ÖNİZLEME KUTUSU — krem ada + içinde koyu spot
   ------------------------------------------------------------------------- */
/* SOL ONIZLEME KUTUSU da ayni kural: TEK KATMAN acik kutu, icinde spot + kart.
   Yaricap ve golge sag sutundaki kartlarla AYNI degerlerden gelir. */
/* OZGULLUK: tasarla.css `.tasarla-page #ozel .customizer-preview` (0,3,0) ile
   boyuyor; duz `.tasarla-page .customizer-preview` (0,2,0) golgeyi yenemiyordu
   (olculdu: hesaplanan golge hala eski deger). #ozel eklenerek esitlendi. */
.tasarla-page #ozel .customizer-preview{
  position:sticky;
  background:var(--a-bg) !important;
  border:1px solid var(--a-cizgi) !important;
  border-radius:var(--kart-yaricap) !important;
  box-shadow:var(--kart-golge);
  overflow:hidden;                       /* spot köşelerden taşmasın */
  isolation:isolate;                      /* spot dışarı sızmasın */
}

/* SPOT — kartın hemen arkasında yumuşak, DAR bir sahne ışığı.
   NEREYE BAĞLANDI: `.tf-custom-card-wrapper` — yani KARTIN KENDİ KUTUSU.
   İlk denemede spot önizleme KUTUSUNA (`.customizer-preview::before`) çizilmişti;
   ölçtüm, iki sorun çıktı:
     1) kutu 598×592, kart 340×486 -> dikeyde yalnız 53 px pay kalıyor; spot
        kartın arkasına sığmıyor, görünen tek şey soluk bir hale oluyordu,
     2) kutunun altındaki "Rastgele Kart / Fotoğrafı Ayarla" düğmeleri spotun
        koyu alanına düşüyordu (krem düğmeler koyu zeminde yanlış duruyor).
   Sarmalayıcıya bağlanınca spot KARTLA BİRLİKTE ölçekleniyor, hep kartın
   arkasında kalıyor ve düğmelere değmiyor.

   KARTA DOKUNULMADI: sarmalayıcı DİKKAT bölgesinin (.tf-custom-card ve
   içindekiler) DIŞINDA. Kart `position:relative` olduğu için konumlandırılmış
   bir öğe; DOM sırası gereği ::before'un ÜSTÜNDE boyanır, z-index gerekmez. */
.tasarla-page .tf-custom-card-wrapper{ position:relative; }
.tasarla-page .tf-custom-card-wrapper::before{
  content:"";
  position:absolute;
  /* ÖLÇÜ (Kerem, 25 Ağustos 2026): "kartın kesim hattından her yöne en fazla
     30-40px taşsın". Kart 340×486 -> %7 dikey ≈ 34px, %10 yatay ≈ 34px.
     İlk sürüm -7% -26% idi (yatayda 88px) ve opaklık 0.95'e çıkıyordu; "leke
     gibi" duruyordu. Artık zar zor fark edilen bir zemin. */
  inset:-7% -10%;
  border-radius:50%;
  background:
    radial-gradient(closest-side,
      rgba(38,26,34,.34) 0%,
      rgba(38,26,34,.30) 55%,
      rgba(38,26,34,.16) 78%,
      rgba(38,26,34,0)   100%);
  filter:blur(18px);                    /* geniş, yumuşak geçiş */
  pointer-events:none;
}

/* ÖNİZLEME etiketi kutunun DIŞINDA, koyu zeminde kalır (uxB-ekran2). */
.tasarla-page .ts-onizleme-blok{ padding-bottom:8px; }


/* ---------------------------------------------------------------------------
   4) PANELLER — krem ada
   Açık panel dili: krem zemin, BEYAZ kartlar, #EADBC8 kenarlık, mürdüm metin.
   Token'lar burada yeniden tanımlanır; içerideki yüzlerce kural zaten
   var(--text)/var(--muted)/var(--panel)/var(--line) okuyor -> kendiliğinden
   açık zemine döner (aynı kalıtım tekniği ana sayfada da kullanıldı).
   ------------------------------------------------------------------------- */
.tasarla-page .customizer-preview,
.tasarla-page .customizer-form,
.tasarla-page .ts-step-panel{
  --bg:var(--a-bg); --bg-2:#FBF3E7; --cream:var(--a-bg);
  --panel:var(--a-kart); --panel-2:var(--a-kart); --ink-3:var(--a-kart);
  --text:var(--a-metin); --muted:var(--a-soluk);
  --on-ink:var(--a-metin); --on-ink-dim:var(--a-soluk);
  --line:var(--a-cizgi); --line-soft:rgba(234,219,200,.6);
  --gold-text:#A9772B;
  --l-bg:var(--a-bg); --l-panel:var(--a-kart); --l-heading:var(--a-metin);
  --l-body:var(--a-metin); --l-muted:var(--a-soluk); --l-line:var(--a-cizgi);
  color:var(--a-metin);
}

/* ---------------------------------------------------------------------------
   4b) BAGIMSIZ KARTLAR — SARMALAYICI YOK, KART-ICINDE-KART YOK

   Kerem (25 Agustos 2026): "Sag sutundaki bolumleri iceren buyuk krem
   konteyner kutuyu kaldir. Her bolum, koyu sayfa zemininin UZERINDE duran
   BAGIMSIZ bir acik kart olacak. Bir acik kartin icinde ikinci bir beyaz/krem
   kutu katmani olmayacak — tek seviye yukselti."

   ONCEKI YAPI UC KATMANDI (olculdu):
       .customizer-form      krem #FFF9F0, 18px yaricap, 26px dolgu   <- sarmalayici
         .ts-step-panel
           .tff-tab-content  BEYAZ, 16px yaricap                      <- ikinci katman
             .tff-field      BEYAZ + kenarlik                         <- ucuncu katman

   YENI YAPI TEK KATMAN:
       .customizer-form      SEFFAF (yalniz yerlesim)
         .ts-step-panel      SEFFAF, dikey akis, 16px bosluk
           .tff-tab-content  SEFFAF grup, 16px bosluk
             .tff-field      >>> KART <<<  krem + 1px kenarlik + 16px + tek golge

   Istisna: cerceve izgarasindaki tekil hucreler (ince kenarlikli kucuk kutular)
   kart-icinde-kart sayilmaz -- onlar icerigin kendisi (talimatta acikca ayrildi).
   ------------------------------------------------------------------------- */
.tasarla-page{ --kart-yaricap:16px; --kart-bosluk:16px;
  --kart-golge:0 10px 28px -18px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.18); }

/* ══════════ G2 · YUVARLAKLIK TEK KAYNAKTAN ═══════════════════════════════
   Kerem (G2): "Hiçbir yere elle border-radius yazma; bu üç değeri değiştirmek
   tüm bloğu değiştirmeye yetsin."

   Üç basamak, üç iş:
     --miqno-blok-yaricap  sağdaki iki blok (mockup: 20px)
     --miqno-alan-yaricap  giriş alanları, boyut satırı, adet bloğu
     --miqno-dugme-yaricap Devam ve Sepete Ekle
   Bu dosya hem masaüstü hem mobil katmanın ALTINDA (tasarla.html ikisinden de
   önce yüklüyor), yani iki yüzey aynı sayıdan besleniyor. `.tasarla-page`
   kapsamında: başka sayfaların kartlarına sızmaz. */
.tasarla-page{
  --miqno-blok-yaricap:20px;
  --miqno-alan-yaricap:12px;
  --miqno-dugme-yaricap:14px;
}

/* SARMALAYICI KALKTI: yalnizca yerlesim tasiyicisi. */
.tasarla-page .customizer-form{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0 !important;
}

/* DIKKAT — GORUNURLUK: `.ts-step-panel{display:none}` /
   `.ts-step-panel.is-active{display:block}` ile adim degistiriliyor
   (tasarla-adimlar.css:107). Ilk yazimda `display:flex` kosulsuz verilmisti;
   ayni ozgullukte ve SONRA yuklendigi icin gizlemeyi EZDI -> tum adimlar ayni
   anda gorunur oldu, stepper 2. adimi gosterirken panelde 1. adim duruyordu.
   Akis kurali dokunulmaz: flex YALNIZ aktif panele verilir. */
.tasarla-page .ts-step-panel{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0 !important;
}
.tasarla-page .ts-step-panel.is-active{
  display:flex; flex-direction:column; gap:var(--kart-bosluk);
}
.tasarla-page .ts-step-panel > .tff-tab-content{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  display:flex !important; flex-direction:column; gap:var(--kart-bosluk);
  margin:0 !important;
}

/* >>> KART <<< — tek yukselti seviyesi, hepsinde AYNI yaricap ve AYNI golge.
   `.cs-picker` (#cardStylePicker = "Kart Temasi") bir .tff-field DEGIL; kart
   listesine ACIKCA ekleniyor. Olculdu: sarmalayici kalkinca o bolum koyu zemine
   dustu ve tema ADLARI murdum ciziltigi icin okunmaz oldu. */
.tasarla-page .ts-step-panel .tff-field,
.tasarla-page .ts-step-panel .cs-picker{
  background:var(--a-bg) !important;
  border:1px solid var(--a-cizgi) !important;
  border-radius:var(--kart-yaricap) !important;
  box-shadow:var(--kart-golge);
  padding:clamp(14px, 1.6vw, 20px);
  margin:0 !important;
}

/* KART-ICINDE-KART YOK: kartin DOGRUDAN cocuklari kendi zeminini kurmaz.
   Cerceve/renk izgaralarindaki hucreler HARIC (asagida geri veriliyor). */
/* KOMUT E-3: `.tsm-tema-serit` de DISLANIR. Bu kuralin `padding:0 !important`
   bildirimi seridin yatay dolgusunu yiyordu -- olculdu: ilk cip x=0'dan, yani
   ekranin kenarindan basliyordu; oysa Kerem "cipler iceriden baslasin" dedi.
   Cozum ONEM YARISI DEGIL, kuralin KENDI dislama listesi: `.tff-swatches`,
   `.tff-frame-family-group` ve `.tff-color-pop` da tam bu sebeple burada. */
.tasarla-page .ts-step-panel .cs-picker > div:not(.cs-scroll),
.tasarla-page .ts-step-panel .tff-field > div:not(.tff-swatches):not(.tff-frame-family-group):not(.tff-color-pop):not(.tsm-tema-serit),
.tasarla-page .ts-step-panel .tff-field > .tff-grp{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
}

/* Izgara HUCRELERI: ince kenarlikli kucuk kutular olarak KALIR. */
.tasarla-page .tff-frame-family-group > button,
.tasarla-page .tff-swatches > button{
  background:var(--a-kart);
  border:1px solid var(--a-cizgi);
  border-radius:12px;
}

/* ADIM GIRIS METNI — sarmalayici kalkinca KOYU sayfa zeminine dustu.
   Olculdu: .tasarla-foto-baslik hala murdum (#3B2C35) ciziliyordu ve koyu
   zeminde okunmuyordu. Bu metinler bir KARTIN ICINDE degil; bolum basligi
   gibi davranirlar -> koyu zemin renkleri. Secici KART DISINDA kalan her
   basligi kapsar (dogrudan cocuk sarti fazla dardi: giris blogu bir sarmal
   icinde duruyor). */
.tasarla-page .ts-step-panel h3:not(.tff-field h3),
.tasarla-page .ts-step-panel .tasarla-foto-baslik,
.tasarla-page .ts-step-panel .tasarla-foto-giris h3{
  color:var(--d-head) !important; margin:0 0 4px;
}
.tasarla-page .ts-step-panel .tasarla-foto-alt,
.tasarla-page .ts-step-panel .tasarla-foto-giris p{
  color:var(--d-muted) !important; margin:0;
}
.tasarla-page .tasarla-foto-giris{
  background:transparent !important; border:0 !important;
  box-shadow:none !important; padding:0 !important; text-align:center;
}

/* ALT BAR da bagimsiz: koyu zeminde yuzer, kart dili disinda kalir. */
/* ALT BAR — `position:sticky; bottom:0` ile ekranin altina yapisiyor.
   Sarmalayici varken onun zeminini kullaniyordu; sarmalayici kalkinca SEFFAF
   kaldi ve altindaki kart metninin UZERINE bindi (olculdu: bar 960..1012,
   son kart 902..1096 -- cakisiyor). Artik kendi sicak zeminini tasiyor. */
.tasarla-page .ts-footbar{
  background:linear-gradient(180deg, rgba(29,20,27,0) 0%, rgba(29,20,27,.92) 34%) !important;
  border:0 !important;
  padding:16px 2px 10px !important;
  margin-top:var(--kart-bosluk);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.tasarla-page .ts-footbar-pos{ color:var(--d-muted) !important; }
.tasarla-page .customizer-form h3,
.tasarla-page .customizer-form h4,
.tasarla-page .customizer-form label,
.tasarla-page .ts-step-panel h3,
.tasarla-page .ts-step-panel h4,
.tasarla-page .ts-step-panel label{ color:var(--a-metin) !important; }

.tasarla-page .customizer-form .tff-help,
.tasarla-page .ts-step-panel .tff-help{ color:var(--a-soluk) !important; }

/* Grup başlıkları (TEMA / ÇERÇEVE / ARKA PLAN) — mercan, küçük, harf aralıklı. */
.tasarla-page .tff-grp-t,
.tasarla-page .ts-step-panel > .tff-tab-content > label:first-child{
  color:var(--coral) !important;
  font-size:.72rem; font-weight:700; letter-spacing:.10em; text-transform:uppercase;
}

/* Girdi alanları */
.tasarla-page .customizer-form input[type="text"],
.tasarla-page .customizer-form input[type="number"],
.tasarla-page .customizer-form select,
.tasarla-page .customizer-form textarea{
  background:var(--a-kart) !important;
  color:var(--a-metin) !important;
  border:1px solid var(--a-cizgi) !important;
  border-radius:12px;
}
.tasarla-page .customizer-form input:focus-visible,
.tasarla-page .customizer-form select:focus-visible,
.tasarla-page .customizer-form textarea:focus-visible{
  outline:none;
  border-color:var(--d-tag) !important;
  box-shadow:0 0 0 3px rgba(244,184,96,.22);
}


/* ---------------------------------------------------------------------------
   5) BUTONLAR — mercan iki zeminde de AYNI, metin AA
   ------------------------------------------------------------------------- */
.tasarla-page .btn-gold,
.tasarla-page #tsNext,
.tasarla-page #addCustomCartBtn,
.tasarla-page #csSheetCartBtn{
  background:var(--coral) !important;
  color:var(--coral-metin) !important;
  border-color:transparent !important;
}
.tasarla-page .btn-gold:hover,
.tasarla-page #tsNext:hover{ background:var(--coral-2) !important; color:var(--coral-metin) !important; }

/* Kontur buton — krem panelde */
.tasarla-page .customizer-form .btn-ghost,
.tasarla-page .ts-step-panel .btn-ghost{
  background:var(--a-kart) !important;
  color:var(--a-metin) !important;
  border:1px solid var(--a-cizgi) !important;
}
/* Alt bardaki "Geri" koyu zeminde durur. */
.tasarla-page #tsBack{
  background:transparent !important;
  color:var(--d-muted) !important;
  border:1px solid rgba(255,246,236,.20) !important;
}
.tasarla-page #tsBack:hover{ color:var(--d-head) !important; border-color:var(--d-edge) !important; }


/* ---------------------------------------------------------------------------
   6) SLIDER'LAR — marka stili (ham mavi tarayıcı sürgüsü kalkar)
   Talimat: "Slider'lar marka stiline çekilir."
   ------------------------------------------------------------------------- */
.tasarla-page input[type="range"]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:22px; background:transparent; cursor:pointer;
}
.tasarla-page input[type="range"]::-webkit-slider-runnable-track{
  height:6px; border-radius:999px;
  background:linear-gradient(90deg, var(--d-tag) 0%, var(--d-tag) var(--tf-dolgu,50%),
                                     #EADBC8 var(--tf-dolgu,50%), #EADBC8 100%);
}
.tasarla-page input[type="range"]::-moz-range-track{
  height:6px; border-radius:999px; background:#EADBC8;
}
.tasarla-page input[type="range"]::-moz-range-progress{
  height:6px; border-radius:999px; background:var(--d-tag);
}
.tasarla-page input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; margin-top:-6px;
  border-radius:50%; background:var(--coral);
  border:2px solid #FFF6EC;
  box-shadow:0 2px 6px rgba(42,30,37,.35);
}
.tasarla-page input[type="range"]::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%; background:var(--coral);
  border:2px solid #FFF6EC; box-shadow:0 2px 6px rgba(42,30,37,.35);
}
.tasarla-page input[type="range"]:focus-visible::-webkit-slider-thumb{
  box-shadow:0 0 0 4px rgba(244,184,96,.30);
}


/* ---------------------------------------------------------------------------
   7) ALT BAR — panelin altlığı, koyu sayfada yüzer
   ------------------------------------------------------------------------- */
.tasarla-page .ts-altbar{
  background:var(--a-bg);
  border-top:1px solid var(--a-cizgi);
}
.tasarla-page .ts-altbar-adim{ color:var(--a-soluk); }

/* ---------------------------------------------------------------------------
   8) KUCUK METIN BAGLANTISI — "Rengi Kaldir"
   Kerem: "tam genislik buton olmaktan cikip kucuk metin baglantisina donsun."
   Tam genislikte bir hap, yanindaki kartela kadar agirlik tasiyordu; oysa bu
   bir GERI ALMA eylemi, esit oncelikli bir secenek degil.
   ------------------------------------------------------------------------- */
.tasarla-page .tff-link{
  display:inline; width:auto; margin:6px 0 0;
  padding:0; border:0; background:none;
  color:var(--a-soluk); font-size:.78rem; line-height:1.4;
  text-decoration:underline; text-underline-offset:2px;
  cursor:pointer;
}
.tasarla-page .tff-link:hover{ color:var(--coral); }
.tasarla-page .tff-link:focus-visible{ outline:2px solid var(--d-tag); outline-offset:2px; border-radius:4px; }

/* ---------------------------------------------------------------------------
   9) ONIZLEME ETIKETI TASMAZ
   Kerem (25 Agustos 2026): "sol ustteki ONIZLEME / baskiya giden dosyayla
   birebir etiketi ekran disina tasiyor, kesik okunuyor."

   Yeni surumde masaustunde tasma OLCULEMEDI (etiketin sol kenari 260px,
   onizleme sutununun sol kenari da 260px -- tam hizali). Ama sebebi ortadan
   kaldirmak icin beklemeye gerek yok: GRID HUCRELERI varsayilan olarak
   `min-width:auto` tasir, yani icerik sutundan genisse hucre BUYUR ve disari
   tasar. Dar ekranda uzun mikro not tam bunu yapar.
   `min-width:0` o davranisi kapatir; sarma kurallari da kelimenin ortasindan
   degil, dogal yerden kirar.
   ------------------------------------------------------------------------- */
.tasarla-page .ts-topbar,
.tasarla-page .ts-topbar-sol{ min-width:0; }
.tasarla-page .ts-onizleme-et,
.tasarla-page .ts-onizleme-not{
  min-width:0;
  max-width:100%;
  overflow-wrap:break-word;
  hyphens:none;
}
/* Etiket bloku onizleme sutunuyla AYNI sol hizada baslar (grid tanimindan
   geliyor); burada yalnizca ic dolgunun onu kaydirmadigini garantiliyoruz. */
.tasarla-page .ts-topbar-sol{ padding-left:0; margin-left:0; }

/* ---------------------------------------------------------------------------
   10) HEADER — SAYFANIN KENDI TONUNDA

   KOK NEDEN (olculdu 25 Agustos 2026): /tasarla'da header zemini
   rgba(15,17,21,.86) idi -- tf-koyu.css'in SOGUK GRI --header-bg degeri.
   Sayfa ise SICAK MURDUM (#2E2229). Soguk gri, sicak murdumun uzerinde
   %86 opaklikla binince kirli, yesilimsi bir bant olusturuyordu:
   gercek boyanan renk rgb(19,19,24) cikiyordu.

   Header ton kurallari anasayfa-ritim.css'te yaziliydi ve o dosya YALNIZ
   ana sayfaya yukleniyor; /tasarla o kurallari hic gormuyordu.
   Burada sayfanin KENDI paletiyle yeniden tanimlaniyor.

   OZGULLUK: tf-koyu.css header'i `:root:not([data-tema="acik"]) header`
   ile boyuyor -> (0,2,1). Basa `:root` eklenerek esitlendi; bu dosya SONRA
   yuklendigi icin esitlikte kazanir.
   ------------------------------------------------------------------------- */
:root .tasarla-page header{
  background:rgba(33,24,32,.88) !important;      /* --d-bg-2 ailesi, sicak */
  border-bottom:1px solid rgba(244,184,96,.16) !important;
  box-shadow:0 6px 26px -20px rgba(0,0,0,.75) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
          backdrop-filter:blur(14px) saturate(1.15);
}

/* --- TR / EN — okunakli ve SICAK ---
   Serit zemini rgba(0,0,0,.32) ve kenarligi rgba(255,255,255,.12) idi:
   ikisi de NOTR, sicak murdum header uzerinde gri bir ada gibi duruyordu.
   Pasif dil de soguk gri (#A8AEB8). Artik ucu de markanin sicak tonlarindan.
   KONTRAST (olculdu, serit zemini rgb(28,20,26) uzerinde):
     pasif  #D9C6CF -> 9.6:1
     aktif  #241A20 / #F4B860 -> 9.9:1                                     */
:root .tasarla-page .lang-toggle{
  background:rgba(20,13,18,.55);
  border:1px solid rgba(244,184,96,.22);
}
:root .tasarla-page .lang-toggle button{ color:#D9C6CF; }
:root .tasarla-page .lang-toggle button:hover{ color:#F4B860; }
:root .tasarla-page .lang-toggle button.active{
  background:linear-gradient(135deg,#F9D9A2,#F4B860);
  color:#241A20;
  box-shadow:0 1px 6px rgba(244,184,96,.35);
}

/* Sepet/hesap ikonlari da sicak krem */
:root .tasarla-page header .icon-btn,
:root .tasarla-page header svg{ color:#F3E8DC; }
:root .tasarla-page .nav-menu a{ color:#D9C6CF; }
:root .tasarla-page .nav-menu a:hover{ color:#F4B860; }
:root .tasarla-page .nav-menu a.nav-cta{ color:#1E1410; }

/* Kart Temasi karti: baslik ve tema adlari ACIK zemine gore. */
.tasarla-page .ts-step-panel .cs-picker .cs-title{ color:var(--coral) !important;
  font-size:.72rem; font-weight:700; letter-spacing:.10em; text-transform:uppercase; }
.tasarla-page .ts-step-panel .cs-picker .cs-name{ color:var(--a-metin) !important; }
.tasarla-page .ts-step-panel .cs-picker .cs-style.active .cs-name{ color:var(--coral) !important; font-weight:700; }
.tasarla-page .ts-step-panel .cs-picker .cs-thumb{ background-color:var(--a-kart); border:1px solid var(--a-cizgi); border-radius:12px; }

/* ---------------------------------------------------------------------------
   11) UST BLOK YENIDEN DUZENLENDI (Kerem, 25 Agustos 2026)
   ------------------------------------------------------------------------- */

/* 11a) HIZALAMA — sayfa header LOGOSUNU GECMEZ.
   OLCULDU: #ozel kapsayicisi 367..1767 (1400px), header kapsayicisi 447..1687
   (1240px) -> sayfa her yandan 80px TASIYORDU; onizleme kutusu logonun 80px
   soluna tasip hizayi bozuyordu. Kerem: "Gerekirse Preview bolumu kucculebilir."
   Kapsayici site genisligine cekildi; onizleme sutunu onunla birlikte daraliyor. */
.tasarla-page #ozel > .container{ max-width:1240px; }

/* 11b) BASLIK BLOGU — bilgiler kartiyla AYNI acik kart dili, tam genislik. */
.tasarla-page .tw-head{
  background:var(--a-bg);
  border:1px solid var(--a-cizgi);
  border-radius:var(--kart-yaricap, 16px);
  box-shadow:var(--kart-golge, 0 10px 28px -18px rgba(0,0,0,.55));
  padding:clamp(16px, 2vw, 24px) clamp(18px, 2.2vw, 28px);
  margin-bottom:var(--kart-bosluk, 16px);
}
.tasarla-page .tw-head .tw-title{ color:var(--a-metin) !important; margin:6px 0 4px; }
.tasarla-page .tw-head .tw-lead{ color:var(--a-soluk) !important; margin:0; }
.tasarla-page .tw-head .tw-crumb,
.tasarla-page .tw-head .tw-crumb a{ color:var(--a-soluk) !important; }
.tasarla-page .tw-head .tw-crumb a:hover{ color:var(--coral) !important; }
.tasarla-page .tw-head .tw-crumb span[aria-current]{ color:var(--a-metin) !important; }
/* "Kisa rehber" acik kartin uzerinde durur. */
.tasarla-page .tw-head #tfTurAc,
.tasarla-page .tw #tfTurAc{
  color:var(--a-soluk) !important;
  border:1px solid var(--a-cizgi) !important;
  background:var(--a-kart) !important;
}
.tasarla-page .tw #tfTurAc:hover{ color:var(--coral) !important; border-color:var(--coral) !important; }

/* 11c) ONIZLEME ETIKETI — artik gercek bir ETIKET (kayboluyordu). */
.tasarla-page .ts-topbar-sol{ align-items:flex-start; gap:6px; }
.tasarla-page .ts-onizleme-et{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px;
  border-radius:999px;
  background:rgba(244,184,96,.14);
  border:1px solid rgba(244,184,96,.42);
  color:#F4B860 !important;
  font-size:11px; font-weight:700; letter-spacing:.12em;
}
.tasarla-page .ts-onizleme-not{
  color:var(--d-muted) !important;
  font-size:12px; line-height:1.35;
}

/* 11d) ADIM GIRISI ust bara tasindi — koyu zeminde, sag hucrede. */
.tasarla-page .ts-topbar-sag{ min-width:0; display:flex; flex-direction:column; justify-content:flex-end; }
.tasarla-page .ts-topbar-sag .tasarla-foto-giris{ text-align:left; }
.tasarla-page .ts-topbar-sag .tasarla-foto-baslik{
  color:var(--d-head) !important; margin:0 0 4px;
  font-size:clamp(1.05rem, 1.5vw, 1.35rem); line-height:1.25;
}
.tasarla-page .ts-topbar-sag .tasarla-foto-alt{
  color:var(--d-muted) !important; margin:0; font-size:.92rem;
}

/* 11e) ADIM SERIDI artik kartlarin HEMEN USTUNDE (sag panelin icinde).

   DIKKAT — TOKEN KAPSAMI: serit `.customizer-form`un ICINE tasindi ve o kapsam
   ACIK panel token'larini tasiyor (--text:#3B2C35, --muted:#86707C). Serit
   kurallari o token'lari okudugu icin pasif adimlar MURDUM ciziliyordu; ama
   serit hala KOYU sayfa zemininde duruyor.
   OLCULDU: pasif etiket ve nokta 1.16:1 -- pratikte GORUNMEZ.
   Cozum: seridin kendi tonu ACIKCA yazilir, token'dan turemez.
   KONTRAST (zemin #2E2229): pasif #B79DA9 6.1 · aktif #F3E8DC 12.6
   · tamamlanan nokta metni #241A20 / #F4B860 9.9 · aktif nokta #1E1410 / mercan 5.7 */
.tasarla-page .ts-steps--panelustu{
  margin:0 0 var(--kart-bosluk, 16px);
  padding:0;
}
.tasarla-page .ts-steps--panelustu .ts-step-lbl{ color:#B79DA9; }
.tasarla-page .ts-steps--panelustu .ts-step-dot{
  background:rgba(255,246,236,.10);
  border:1px solid rgba(255,246,236,.20);
  color:#B79DA9;
}
.tasarla-page .ts-steps--panelustu .ts-step-sep{ background:rgba(255,246,236,.16); }

.tasarla-page .ts-steps--panelustu .ts-step-btn[aria-current="step"] .ts-step-lbl{
  color:#F3E8DC; font-weight:600;
}
.tasarla-page .ts-steps--panelustu .ts-step-btn[aria-current="step"] .ts-step-dot{
  background:var(--coral); border-color:var(--coral); color:#1E1410;   /* mercan uzerinde AA */
}
.tasarla-page .ts-steps--panelustu .ts-step-btn[data-done="1"] .ts-step-dot{
  background:#F4B860; border-color:#F4B860; color:#241A20;
}
.tasarla-page .ts-steps--panelustu .ts-step-btn[data-done="1"] .ts-step-lbl{ color:#F3E8DC; }
.tasarla-page .ts-steps--panelustu .ts-step-btn[disabled]{ opacity:.6; cursor:default; }

/* ---------------------------------------------------------------------------
   12) SUTUN HIZASI + AYDINLATMA (Kerem, 25 Agustos 2026)

   "Sol onizleme kutusu ile sag sutunun ILK PANELI ayni yatay cizgiden
    baslayacak. Onlarin ustundeki satir tek hat olacak: solda ONIZLEME rozeti +
    not, sagda stepper -- ikisi ayni baseline'da. Adim basligi bu hattin
    altinda, sag panel sutununun tepesinde. Alt bar iki sutunun toplam
    genisligiyle ayni hizada bitecek."

   OLCULEN BOZUKLUK (once):
     ust bar sag hucre   340..867   -> SOL sutunun ustunde duruyordu
     onizleme kutusu     T439       -> ilk panel T521  (82px kayma)
     alt bar             877..1606  -> grid 340..1580  (sagdan 26px TASMA)

   COZUM: serit ve alt bar sag panelin ICINDEN cikarildi (ikisi de ilk paneli
   asagi itiyordu), alt bar gridin KARDESI oldu (genislik kapsayicidan turer).
   ------------------------------------------------------------------------- */

/* 12a) TEK HAT — rozet ve serit ayni satirda, ayni tepe cizgisinde.
   `align-items:end` KALDIRILDI: sag hucre artik iki satirli (serit + baslik),
   alta hizalarsa serit rozetin cok altina duserdi. */
.tasarla-page #ozel .ts-topbar{
  align-items:start;
  gap:clamp(20px, 2.6vw, 36px) !important;   /* sutun araligi grid ile AYNI */
  margin:0 0 var(--kart-bosluk, 16px);
}
/* Rozet iki satir (etiket + not), serit tek satir ama daha uzun boylu.
   Ikisini ayni ORTA cizgide bulusturmak icin rozet serit yuksekliginde bir
   kutuya oturur. OLCULDU: serit 42px, rozet 43px -> pratikte ayni hat. */
.tasarla-page #ozel .ts-topbar-sol{
  min-height:42px;
  align-items:flex-start;
  gap:5px;
  /* Rozet hapi (23px) seridin nokta sirasiyla (42px) ayni OPTIK hatta otursun:
     (42 - 23) / 2 = 9px. Olculdu: hap merkezi 321 -- serit nokta merkezi 321. */
  padding-top:9px;
}
/* Sag hucre: 1. satir serit, 2. satir adim basligi. */
.tasarla-page #ozel .ts-topbar-sag{
  display:flex; flex-direction:column;
  justify-content:flex-start;
  gap:14px;
}

/* Adim basligi sag SUTUNUN basligi: panelin sol kenarindan baslar.
   11d'de zaten `text-align:left` yaziliydi ama tasarla.css'teki
   `.tasarla-page #ozel .tasarla-foto-giris` (1,2,0) onu eziyordu -- kendi
   kuralimiz (0,3,0) zayifti. #ozel eklenip esitlendi, sonra yuklendigi icin
   kazanir. */
.tasarla-page #ozel .ts-topbar-sag .tasarla-foto-giris,
.tasarla-page #ozel .ts-topbar-sag .tasarla-foto-giris *{ text-align:left !important; }
/* Alt satirin kendi `max-width + margin:auto`si onu blok olarak ORTALIYORDU;
   text-align tek basina yetmedi. Sol kenara sabitlenir. */
/* Renk: aydinlatma ust bolgeyi #2E2229'dan #4A3A44'e acti -> koyu zemin icin
   secilmis --d-muted (#B79DA9) orada 4.25:1'e dustu (AA alti). #C9B2BD = 5.35 */
.tasarla-page #ozel .ts-topbar-sag .tasarla-foto-alt{
  color:#C9B2BD !important;
  margin-left:0 !important; margin-right:0 !important; max-width:56ch;
}

/* 12b) ROZET KOYU ZEMINE GERI DONDU -> not yine ACIK murekkep olmali.
   Bir onceki turda rozet krem kutunun icindeydi ve not #6B5A62 yapilmisti;
   bu hat koyu zeminde oldugu icin o renk 1.6:1'e duserdi.
   Zemin artik AYDINLATILMIS ust bolge (#4A3A44) -> eski #B79DA9 orada
   4.29:1 ile AA'nin altinda kaliyor. Olculdu ve acildi:
     not #C9B2BD / #4A3A44 = 5.41:1
     etiket #F4B860 / hap zemini = 4.52:1 */
.tasarla-page #ozel .ts-onizleme-not{
  color:#C9B2BD !important;
  font-size:12px;
}

/* 12c) SERIT — aydinlatilmis zeminde pasif adimlar da okunur.
   #B79DA9 koyu zeminde 6.1:1 idi; zemin acilinca 4.29:1'e dustu. */
.tasarla-page .ts-steps--panelustu{ margin:0; }
.tasarla-page .ts-steps--panelustu .ts-step-lbl,
.tasarla-page .ts-steps--panelustu .ts-step-dot{ color:#C9B2BD; }

/* 12d) SUTUN BASLANGICLARI AYNI CIZGIDE.
   Grid ogeleri kendi yuksekliklerine cekilir; `stretch` olsaydi kisa sutun
   uzayip ust kenar hissi kaybolurdu. */
.tasarla-page #ozel .customizer-grid{ align-items:start; }
.tasarla-page #ozel .customizer-form{ padding-top:0 !important; }
.tasarla-page #ozel .ts-step-panel.is-active > :first-child{ margin-top:0 !important; }

/* 12e) ALT BAR — IKI SUTUNUN TAM GENISLIGI, acik kart dilinde.
   Taban kural (tasarla-adimlar.css:145) onu panel dolgusu kadar DISARI
   tasiyordu: margin:26px calc(-1 * var(--ts-pane-pad)) calc(-1 * ...).
   Artik gridin kardesi -> negatif paylar sifirlanir, genislik kapsayicidan
   turer; tasma da daralma da olmaz. */
.tasarla-page .ts-footbar{
  margin:var(--kart-bosluk, 16px) 0 0 !important;
  background:var(--a-bg) !important;
  border:1px solid var(--a-cizgi) !important;
  border-radius:var(--kart-yaricap, 16px) !important;
  box-shadow:var(--kart-golge, 0 10px 28px -18px rgba(0,0,0,.55)) !important;
  padding:12px clamp(14px, 1.6vw, 20px) !important;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
/* Sayac ACIK zeminde: koyu murekkep. #3B2C35 / #FFF9F0 = 11.4:1 */
.tasarla-page .ts-footbar .ts-footbar-pos,
.tasarla-page .ts-footbar-pos{ color:var(--a-metin) !important; }
.tasarla-page .ts-footbar .ts-pos-ad{ color:var(--a-soluk) !important; }
/* "Geri" acik kart dilinde kontur buton olur. */
.tasarla-page .ts-footbar #tsBack{
  background:var(--a-kart) !important;
  color:var(--a-metin) !important;
  border:1px solid var(--a-cizgi) !important;
}
.tasarla-page .ts-footbar #tsBack:hover{ color:var(--coral) !important; border-color:var(--coral) !important; }

/* 12f) AYDINLATMA PAKETI — "sayfa simsiyah kalmayacak."
   Ust bolgedeki ACIK KREM BANT zaten yerinde (11b: .tw-head tam genislikte
   krem kart). Eksik olan EDITOR ZEMINI idi: eski zemin 50% 0%'dan baslayip
   %70'te #1D141B'ye kapaniyordu, yani editorun bulundugu yer neredeyse
   dumduz koyuydu. Isik kaynagi asagi (%15) alindi ve iki uc da acildi. */
.tasarla-page{
  background:
    radial-gradient(ellipse at 50% 15%, #4A3A44 0%, #2E2630 100%) !important;
  background-attachment:fixed !important;   /* isik sayfayla birlikte kaymasin */
}

/* ---------------------------------------------------------------------------
   13) HEADER SUREKLILIGI + ACIK PANEL TOKENLARI (Kerem, 25 Agustos 2026)
   ------------------------------------------------------------------------- */

/* 13a) HEADER "ilk bolum rengi ile AYNI, bir cizgi ile boyut".
   OLCULEN SEBEP: header zemini yari saydamdi -- rgba(33,24,32,.88). Yapiskan
   header AKISIN icinde, yani arkasinda sayfa zemini var; %88 murdum, %12
   sayfa. Sayfa zemini aydinlatilinca (#4A3A44) header ondan belirgin KOYU
   kaldi ve ayri bir bant gibi okundu.

   DUZ BIR RENK YETMEZ: zemin radyal bir gradyan, yani "ust bolgenin rengi"
   gorunum yuksekligine gore degisir. Header'a AYNI gradyan, AYNI
   `background-attachment:fixed` ile veriliyor -- boylece header kendi
   diliminde sayfanin tam olarak boyayacagi rengi boyar. Gorunum boyutundan
   BAGIMSIZ olarak dikissiz; boyutu tek bir cizgi verir. */
:root .tasarla-page header{
  background:
    radial-gradient(ellipse at 50% 15%, #4A3A44 0%, #2E2630 100%) !important;
  background-attachment:fixed !important;
  border-bottom:1px solid rgba(244,184,96,.20) !important;
  box-shadow:none !important;
  /* Zemin artik OPAK -> bulaniklastirilacak bir arka plan kalmadi. */
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}

/* 13b) ACIK PANELLERIN ICINDE `--ts-*` TOKENLARI ACIK DEGERLERINE SABITLENIR.

   OLCULEN SEBEP: tf-koyu.css site geneli koyu temada bu tokenlari GOVDE
   uzerinde ceviriyor (--ts-ink:#ECECEC, --ts-surface:#171A21). Secenek A
   panelleri ise KREM. Token'dan boyanan her kontrol o panelde ters donuyordu:
     Adet sayaci +/- : #ECECEC / #FFF9F0 = 1.06:1  -> pratikte GORUNMUYOR
     "Bir seyi degistir" karti: zemin #171A21     -> krem sayfada SIYAH kutu
   Kontrolleri tek tek boyamak yerine TOKEN KAPSAMI duzeltiliyor: acik kabin
   icinde tokenlar acik degerlerine doner, kontrollerin kendi kurallari
   degismez. Ozel ozellikler kalitimla geldigi icin daha YAKIN tanim kazanir --
   ozgulluk yarisina girmeye gerek yok. */
.tasarla-page .tw-head,
.tasarla-page .ts-step-panel .tff-field,
.tasarla-page .ts-step-panel .cs-picker,
.tasarla-page .ts-step-panel .ts-card,
.tasarla-page .ts-footbar{
  --ts-surface:#FFFDF8;
  --ts-line:#E4D5C2;
  --ts-ink:#2A1E25;
  --ts-muted:#6B5A62;
  --ts-plum:#3B2C35;
  --ts-shadow:0 1px 2px rgba(59,44,53,.06), 0 8px 24px rgba(59,44,53,.06);
  /* AYNI KOKTEN: govde `color-scheme:dark` tasiyor, bu yuzden YERLESIK form
     kontrolleri (onay kutusu, metin alani, ic kaydirma cubuklari) krem panelin
     icinde tarayicinin KOYU cizimiyle geliyordu -- "Magnetli olsun" kutusu
     krem kartin uzerinde SIYAH bir kare olarak duruyordu (olculdu:
     color-scheme "dark"). Acik kabin icinde acik cizime donuyor. */
  color-scheme:light;
}

/* 13c) "BIR SEYI DEGISTIR" bloguda kart ailesine katilir.
   Kerem: "Fotograf degistir / yazi degistir bolumu siyah karanlik kalmis."
   Token duzeltmesi zemini kremlestirdi; burada yalnizca yaricap/golge/pay
   diger kartlarla esitleniyor -- kart-icinde-kart olmasin diye ic dolgusu
   digerleriyle ayni. */
.tasarla-page .ts-step-panel .ts-card{
  background:var(--a-bg) !important;
  border:1px solid var(--a-cizgi) !important;
  border-radius:var(--kart-yaricap, 16px) !important;
  box-shadow:var(--kart-golge, 0 10px 28px -18px rgba(0,0,0,.55)) !important;
  padding:clamp(14px, 1.6vw, 20px);
  margin:0 !important;
}
/* Baslik komsu kart basliklariyla ayni koyu murekkep. --a-soluk (#86707C)
   krem uzerinde 4.34:1 -- AA'nin hemen altinda kaliyordu. */
.tasarla-page .ts-step-panel .ts-card .ts-card-t{ color:var(--a-metin) !important; }
/* Kisayol dugmeleri: krem uzerinde kontur hap. #3B2C35 / #FFF9F0 = 11.4:1 */
.tasarla-page .ts-step-panel .ts-jump button{
  background:var(--a-kart) !important;
  color:var(--a-metin) !important;
  border:1px solid var(--a-cizgi) !important;
}
.tasarla-page .ts-step-panel .ts-jump button:hover{
  color:var(--coral) !important; border-color:var(--coral) !important;
}

/* --- 13d/1) SAYACIN GEOMETRİSİ (uxB-ekran6; R-2 ile buraya TAŞINDI) ------
   Mockup: boyun altında "− 1 +". Rakam hem okunabilir hem düzenlenebilir
   olsun diye ortadaki bir input; sayfanın hap dilinde tek bir çerçeve.
   Bu blok 29 Ağustos 2026'da tasarla-adimlar.css'ten OLDUĞU GİBİ taşındı --
   sayacın tek sahibi bu dosya olsun diye. Aşağıdaki 13d/2 renk katmanının
   HEMEN ÜSTÜNDE durması şart: iki dosya arasındaki eski yükleme sırası
   (adimlar -> sahne) böylece dosya içi sıraya birebir çevrilir. */
.tasarla-page .tk-qty{
  /* .tff-field sutun flex kabi: cocuklar gerilir -> sayac panel genisligine yayiliyordu
     (olculdu: 674px). Kendine yeter genislikte kalsin. */
  display:inline-flex;align-self:flex-start;align-items:center;gap:0;
  border:1px solid var(--ts-line);border-radius:999px;background:var(--ts-surface);
  overflow:hidden;
}
.tasarla-page .tk-qty-btn{
  width:40px;height:42px;border:none;background:none;cursor:pointer;
  font:inherit;font-size:18px;line-height:1;color:var(--ts-ink);
}
.tasarla-page .tk-qty-btn:hover{background:rgba(232,103,76,.08);color:var(--ts-coral)}
.tasarla-page .tk-qty-btn:focus-visible{outline:2px solid var(--ts-plum);outline-offset:-2px}
.tasarla-page .tk-qty-val{
  width:46px;height:42px;border:none;background:none;text-align:center;
  font:inherit;font-size:15px;font-weight:600;color:var(--ts-ink);
  -moz-appearance:textfield;
}
.tasarla-page .tk-qty-val:focus{outline:none}
.tasarla-page .tk-qty-val::-webkit-outer-spin-button,
.tasarla-page .tk-qty-val::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* 13d/2) ADET SAYACI — "+ ve - gozukmuyor."
   OLCULDU: dugme metni rgb(236,236,236), zemin rgb(255,249,240) -> 1.06:1.
   13b tokenlari zaten koyu murekkebe cevirdi; burada isaretlere govde
   veriliyor ki dokunulabilir bir kontrol gibi okunsunlar.
   OLCULDU (sonra): #2A1E25 / #FFFDF8 = 15.3:1 */
/* OZGULLUK NOTU: 4b'deki "kart icinde kart yok" duzlestirmesi
   `.tff-field > div:not(...)` ile (0,6,1) tasiyor ve `background:transparent
   !important; border:0 !important` yaziyor. Duz `.tasarla-page .tk-qty`
   (0,2,0) onu YENEMIYORDU -- olculdu: zemin saydam, kenar mirasa dustu.
   Sayac bir KART degil bir KONTROL; hapi geri veriliyor, #ozel ile ozgulluk
   asiliyor. */
.tasarla-page #ozel .ts-step-panel .tff-field > .tk-qty{
  background:var(--a-kart) !important;
  border:1px solid var(--a-cizgi) !important;
  border-radius:999px !important;
}
.tasarla-page .tk-qty-btn{
  /* Kerem, ikinci tur: "+ ve - renkleri gozukmuyor, sadece KOYULASTIRILSIN."
     --a-metin (#3B2C35) zaten 13.14:1 idi ama isaretler INCE cizgiler; puntoyu
     ve kalinligi artirmadan yine soluk okunuyordu. En koyu murekkebe alindi ve
     govde verildi -- glif kalinligi kontrastin kendisi kadar onemli.
     OLCULDU: #1E1410 / #FFFFFF = 17.34:1 */
  color:#1E1410 !important;
  font-size:22px; font-weight:800; line-height:1;
}
.tasarla-page .tk-qty-btn:disabled{ color:var(--a-soluk) !important; cursor:default; }
.tasarla-page .tk-qty-val{ color:var(--a-metin) !important; }

/* 13e) FOTOGRAF AYARLA modunda YALNIZ FOTOGRAF hareket eder.
   Kerem: "Fotografi ayarla'ya basildiginda yazi ile birlikte degisebiliyor.
   Burada sadece fotograf hareket ettirilebilmeli."

   OLCULEN SEBEP: tema motoru serbest yazi katmanlarini surukletiyor
   (tf-yeni-temalar.js:ekYaziSurukle) ve her birine SATIRICI `pointer-events:
   auto` yaziyor. Ayarla modunda imlec bir yazinin uzerine denk gelirse
   pointerdown YAZIYA gidiyor, ustelik `preventDefault` ile fotograf jestine
   hic ulasmiyordu.

   Yazar `!important` satirici bildirimi YENER -- JS'e ikinci bir kapi
   eklemeye gerek yok (ayni kuralin iki sahibi olmasin).
   Kural YALNIZ .tfc-editing suresince gecerli; mod kapaninca yazilar yine
   surukleniyor ve baski cikti DEGISMIYOR (gorunum kurali degil, isaret
   kurali). */
/* A2 (KOMUT A): "Fotografi Ayarla" KIPI EMEKLI -- kural + dugum birlikte kalkti.
   Kaldirilan siniflar: .tfc-edit-scrim · .tfc-edit-active · .tfc-edit-lift · .tfc-editing.
   Fotograf artik kipsiz, dogrudan kartin ustunde konumlaniyor; jestin tek sahibi
   kanvas motoru (tf-kanvas.js). Olu kural birakilmadi -- D-1..D-4 muhru. */

/* ---------------------------------------------------------------------------
   14) EMEKLI AYIRICILAR — kartlar arasindaki OLU BOSLUK (Kerem, 25 Agustos 2026)

   "Gereksiz bos bir alan mevcut, nedenini tespit et ve duzelt."

   OLCULEN SEBEP: `.tff-divider` DUZ duzenden kalma. O duzende tum alanlar tek
   bir panelin icinde art arda akiyordu ve aralarina ince bir cizgi
   gerekiyordu. Secenek A'da her alan KENDI KARTI ve aralarinda 16px koyu
   bosluk var -> cizgi ikinci bir ayirici, yani gereksiz.

   Ustelik bedava degil: her ayirici 18px ust + 1px cizgi + 18px alt tasiyor VE
   esnek kabin `gap:16px`i onun iki yaninda da sayiliyor.
     16 + (18+1+18) + 16 + (18+1+18) + 16 = 122px
   OLCULDU: CERCEVE karti alt kenari 1102, ARKA PLAN ust kenari 1224 -> 122px.
   Cizgiler ayrica rgba(255,255,255,.12) yani KOYU zemine gore secilmis; krem
   kartlarin arasinda soluk iki hayalet cizgi olarak okunuyordu.

   `display:none` esnek cocugu kaldirdigi icin ONUN gap paylari da dusuyor ->
   bosluk 122px'ten kart ailesinin standart 16px'ine iner.
   ------------------------------------------------------------------------- */
.tasarla-page .ts-step-panel .tff-divider{ display:none; }

/* KART ICINDE bir ayirici hala anlamli olabilir (bir kartin kendi alt
   bolumlerini ayirmak). Orada yasar -- ama rengi KREM zemine gore. */
.tasarla-page .ts-step-panel .tff-field .tff-divider,
.tasarla-page .ts-step-panel .cs-picker .tff-divider{
  display:block;
  border-top-color:var(--a-cizgi);
  margin:12px 0;
}