/* ============================================================================
   MIQNO — AÇIK MİNİMAL TASARIM SİSTEMİ (Sprint 1, 2026-08-21)
   "Tatlı premium unisex minimal": krem zemin, mürdüm yazı, bal vurgu, mercan CTA.
   Override katmanı: TÜM diğer css'lerden SONRA yüklenir -> cascade ile ezer.
   Koyu kart SAHNESİ (örnek karusel + editör önizleme) --stage token'ıyla korunur.
   ========================================================================== */

/* ---- 1) TOKEN: açık palet (koyu :root'u ezer) ---- */
:root{
  color-scheme: light;
  --bg:#FFF9F0; --bg-2:#FBF3E7; --panel:#FFFFFF; --panel-2:#FFFFFF; --cream:#FFF9F0; --cream-2:#FBF3E7;
  --text:#3B2C35; --muted:#86707C; --on-ink:#3B2C35; --on-ink-dim:#86707C;
  --gold:#F4B860; --gold-2:#E3A648; --gold-text:#A9772B; --gold-dim:rgba(244,184,96,.16);
  --coral:#E96A4B; --coral-2:#DE5636;
  --line:rgba(59,44,53,.10); --line-soft:rgba(59,44,53,.06);
  --header-bg:rgba(255,249,240,.82); --footer-bg:#FBF3E7; --deep:#FFF9F0;
  --ink:#FFF9F0; --ink-2:#FBF3E7; --ink-3:#FFFFFF;
  --drawer-bg:rgba(255,255,255,.98); --drawer-foot-bg:rgba(251,243,231,.98);
  --radius:16px;
  --shadow-1:0 1px 2px rgba(59,44,53,.04), 0 10px 26px -16px rgba(59,44,53,.18);
  --shadow-2:0 2px 6px rgba(59,44,53,.05), 0 22px 48px -22px rgba(59,44,53,.22);
  /* KOYU SAHNE (sıcak mürdüm-koyu; kartlar burada okunur) */
  --stage:#241A20; --stage-2:#1B1218; --on-stage:#F3E8DC; --on-stage-dim:#C9B6BE;
}

/* ---- 2) Genel gövde ---- */
body{ background:var(--bg); color:var(--text); }
h1,h2,h3,h4{ color:var(--text); font-family:'Poppins','Inter',sans-serif; text-transform:none; letter-spacing:-.01em; }
.eyebrow,[class*="eyebrow"]{ color:var(--gold-text); }
::selection{ background:rgba(233,106,75,.18); }

/* ---- 3) Header / nav ---- */
header{ background:var(--header-bg); border-bottom:1px solid var(--line);
  box-shadow:0 6px 26px -20px rgba(59,44,53,.35); }
header::after{ display:none; }
.nav-menu a{ color:var(--muted); }
.nav-menu a:hover{ color:var(--coral); }
/* Mercan uzerinde AA (bkz. .btn-gold notu): #1E1410 = 5.70:1, #FFF6EC = 2.96:1 idi. */
.nav-menu a.nav-cta{ background:var(--coral); color:#1E1410; }
.lang-toggle button.active{ background:var(--gold); color:#3B2C35; }
.cart-badge{ background:var(--coral); color:#1E1410; }

/* ---- 4) Butonlar ---- */
/* MERCAN CTA — METIN RENGI DUZELTILDI (24 Agustos 2026, Kerem'in kontrast kurali).
   OLCULDU: #FFF6EC / #E96A4B = 2.96:1 -> WCAG AA (4.5:1) ALTINDA. Buton her iki
   tonda da ayni gorunmek ZORUNDA oldugu icin (talimat: "mercan butonlar iki tonda
   da AYNI kalir") duzeltme tek yerde, site genelinde yapildi.
   MERCAN HEX'I DEGISMEDI (#E96A4B) — yalniz metin koyulastirildi:
     #1E1410 / #E96A4B = 5.70:1  ✓ AA
     #1E1410 / #DE5636 (hover) = 4.72:1  ✓ AA
   Alternatif (mercani koyulastirmak, #BE3F22 ile beyaz metin 5.01) BILEREK
   secilmedi: marka rengini degistirirdi.
   NOT: ilk denemede #2A1B15 yazilmisti; HOVER mercanda (#DE5636) yalniz 4.34
   ediyordu -- yani AA'yi HOVER'da kaybediyorduk. Testin hesabi yakaladi
   (tests/anasayfa-cila.test.js CL-K), deger #1E1410'a cekildi. */
.btn-gold{ background:var(--coral); color:#1E1410; box-shadow:0 12px 26px -12px rgba(233,106,75,.5); }
.btn-gold:hover{ background:var(--coral-2); color:#1E1410; box-shadow:0 16px 32px -12px rgba(233,106,75,.55); }
.btn-ghost{ background:#FFFFFF; color:var(--text); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--coral); color:var(--coral); background:#FFFFFF; }

/* ---- 5) Hero (açık krem) ---- */
.teamforge-hero{ background:
  radial-gradient(58% 50% at 74% 18%, rgba(244,184,96,.16), transparent 60%),
  radial-gradient(48% 46% at 26% 88%, rgba(233,106,75,.06), transparent 62%),
  linear-gradient(180deg,#FFFDF9 0%, var(--bg) 55%, #FFF6EA 100%) !important; }
.th-overlay,.th-glow{ display:none !important; }
.th-title,.th-title .th-line{ color:var(--text) !important; -webkit-text-fill-color:currentColor !important;
  background:none !important; text-shadow:none !important; }
.th-lead{ color:var(--muted); }
.th-trust{ color:var(--muted); }
.th-trust svg{ color:var(--gold-2); }
/* hero fiyat rozeti */
.th-price{ display:inline-flex; align-items:center; gap:6px; margin-top:6px;
  font-size:.95rem; color:var(--text); font-weight:500; }
.th-price b{ font-family:'Poppins',sans-serif; font-weight:700; }
.th-price .th-price-badge{ font-size:.72rem; font-weight:700; letter-spacing:.02em;
  color:#3B2C35; background:var(--gold); border-radius:999px; padding:3px 10px; }

/* ---- 6) Kart/panel yüzeyleri: beyaz + yumuşak gölge ---- */
.pkg-card,.cat-card,.step,.faq-item,.tv-card,.mst-pano,.story,.rv-card,.tf-choose-card,
.sc-card,.section-card{ background:#FFFFFF; border:1px solid var(--line);
  border-radius:16px; box-shadow:var(--shadow-1); }
.step:hover,.pkg-card:hover,.tv-card:hover{ box-shadow:var(--shadow-2); border-color:rgba(59,44,53,.14); }
.step .sicon{ background:var(--gold-dim); color:var(--gold-text); }
.step .snum{ color:var(--coral); }

/* ---- 7) Bölüm zeminleri (açık) ---- */
.tf-section--light{ background:var(--bg-2) !important; color:var(--text); }
.story{ background:linear-gradient(180deg,#FFFFFF,var(--bg-2)); }
.story-text,.story-wrap p{ color:var(--muted); }
#nasil{ background:var(--bg); }
#sss,.faq-sub{ color:var(--muted); }
.faq-item{ background:#FFFFFF; }
.faq-ic{ background:var(--gold-dim); border-color:var(--gold); color:var(--gold-text); }

/* ---- 8) Tema vitrini (#temalar) açık ---- */
.tv{ background:var(--bg) !important; }
.tv-title{ color:var(--text); }
.tv-eyebrow{ color:var(--gold-text); }
.tv-lead,.tv-count{ color:var(--muted); }
.tv-name{ color:var(--text); }
.tv-card{ background:#FFFFFF; border:1px solid var(--line); }
.tv-card:hover{ border-color:var(--coral); box-shadow:0 16px 34px -16px rgba(233,106,75,.25); }
.tv-soon{ color:var(--gold-text); border-color:rgba(244,184,96,.5); }

/* ---- 9) VİTRİN SAHNESİ: örnek kart karuseli (#ornekler) — HER İKİ TEMADA BEYAZ ----
   Kerem (24 Ağustos 2026): "bu kısım bence hep beyaz olarak kalmalı, kartların
   altına hafif kartların gölgesi gelmeli, sanki gerçekten ayakta duruyorlar,
   tam vitrin hissi."

   Eskiden burası KOYU bir sahneydi (--stage/--stage-2) -- açık temada bile.
   Artık gerçek bir vitrin gibi beyaz; kartlar ürünün kendisi, zemin onları
   taşıyan yüzey. Koyu temada da beyaz kalır: tf-koyu.css bu bloğu EZMEZ
   (oradaki .sc > .container kuralı bu yüzden kaldırıldı).

   Yazılar zemin değişince ters kontrasta düşerdi -> koyu mürekkebe alındı.
   !important şart: taban kural (tf-sayfa.css) açık-zemin varsaymıyor. */
.sc{ background:var(--bg) !important; border-top:none !important;
  padding:clamp(40px,6vw,72px) 0 !important; }
.sc > .container{
  background:linear-gradient(180deg,#FFFFFF,#FCFAF6) !important;
  border-radius:26px; padding:clamp(28px,4vw,48px) clamp(16px,3vw,32px);
  box-shadow:0 30px 70px -34px rgba(42,30,37,.30), inset 0 0 0 1px rgba(42,30,37,.06) !important; }
.sc .sc-title{ color:#2A1E25 !important; }
.sc .sc-eyebrow{ color:#A9772B !important; }
.sc .sc-lead{ color:#6B5A62 !important; }

/* Nokta göstergeleri de beyaz zemine göre. */
.sc .sc-dot{ background:rgba(42,30,37,.18) !important; }
.sc .sc-dot.is-active{ background:#E8674C !important; }

/* --- KARTLARIN ZEMİNE OTURMASI ---
   Kartlar kalkan biçiminde die-cut; box-shadow DİKDÖRTGEN gölge çizerdi ve
   kart havada duran bir kutu gibi görünürdü. filter: drop-shadow SİLUETİ
   izler -> gölge kartın gerçek kenarından düşer.

   İki katman: yakın/koyu olan TEMAS gölgesi (kartın tabana değdiği yer),
   uzak/yumuşak olan ise düşen gölge. Beyaz zeminde saf siyah kirli bir leke
   bırakıyor -> mürdüm tonu kullanıldı (sitenin mürekkep rengi).

   NOT: 2026-08-21'de kart arkası gölge/glow katmanları KALDIRILMIŞTI
   (bkz. bölüm 14) -- o karar HERO ve tema vitrini içindi, orada gölge kartın
   ARKASINDA duruyor ve leke gibi görünüyordu. Buradaki gölge kartın ALTINDA;
   istenen şey zaten bu. Bölüm 14'ün kuralları .sc-art'ı kapsamıyor. */
.sc .sc-slide.is-active .sc-art{
  filter:
    drop-shadow(0 4px 3px rgba(42,30,37,.26))      /* temas */
    drop-shadow(0 18px 24px rgba(42,30,37,.22))    /* düşen gölge */
    !important;
}
.sc .sc-slide:not(.is-active) .sc-art{
  /* Yandakiler geride: gölge daha yumuşak, kartlar hafif soluk.
     brightness/saturate koyu sahne için 0.72/0.9 idi -- beyazda o kadar
     kısmak kartı gri gösteriyor; 0.94/0.96 derinliği verir, rengi öldürmez. */
  filter:
    drop-shadow(0 3px 3px rgba(42,30,37,.18))
    drop-shadow(0 12px 18px rgba(42,30,37,.16))
    brightness(.94) saturate(.96)
    !important;
}

/* ---- 10) Metal pano (#sergile / .mst) açık ---- */
.mst-eyebrow{ color:var(--gold-text); }
.mst-title{ color:var(--text); }
.mst-lead,.mst p{ color:var(--muted); }

/* ---- 11) Footer açık ---- */
footer{ background:var(--footer-bg) !important; color:var(--text); border-top:1px solid var(--line); }
footer h4{ color:var(--text); }
footer a,footer li a,footer p{ color:var(--muted); }
footer a:hover{ color:var(--coral); }

/* ---- 12) Mobil yapışık CTA ---- */
.mq-sticky-cta{ display:none; }
@media (max-width:768px){
  /* İKİNCİ BÖLÜMDEN ÖNCE GİZLİ (Kerem, 9 Eylül 2026). İşareti JS koyar
     (`tfYapiskanCtaKapisi`, tf-sayfa.js); JS düşerse çubuk GÖRÜNÜR kalır --
     satış yolu kapanmaz, yalnız erken görünür.
     `translateY` + `opacity`: yer kaplamayı bırakmadığı için sayfanın alt
     dolgusu (`padding-bottom`) sabit kalır ve çubuk belirirken düzen kaymaz. */
  .mq-sticky-cta{ position:fixed; left:0; right:0; bottom:0; z-index:90;
    display:flex; gap:10px; align-items:center;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
    background:rgba(255,249,240,.92); backdrop-filter:blur(12px);
    border-top:1px solid var(--line); box-shadow:0 -8px 24px -16px rgba(59,44,53,.3); }
  .mq-sticky-cta .mq-sticky-price{ font-size:.82rem; color:var(--muted); line-height:1.2; white-space:nowrap; }
  .mq-sticky-cta .mq-sticky-price b{ display:block; color:var(--text); font-family:'Poppins',sans-serif; font-weight:700; font-size:1rem; }
  .mq-sticky-cta .btn{ flex:1; }

  /* ---- BÖLÜM CTA'LARI MOBİLDE KALKAR (Kerem, 9 Eylül 2026) ----
     "Mobilde hero banner hariç tüm bölümlerdeki Kartını Tasarla butonunu
     kaldıralım, çünkü zaten 2. bölümden itibaren tasarla kısmı sayfayla
     birlikte hareket ediyor."

     KIRILMA NOKTASI YAPIŞIK ÇUBUĞUN KENDİSİYLE AYNI BLOKTA (<=768px).
     Ayrı bir sorguya yazılsaydı biri değişip diğeri kalabilir ve
     müşteri HİÇBİR tasarla düğmesi olmayan bir aralıkta kalabilirdi.
     Aynı blok = ikisi birlikte var, birlikte yok.

     HERO DOKUNULMAZ: yapışık çubuk ilk açılışta GİZLİ (ikinci bölümden
     sonra geliyor), yani ilk ekranın tek eylemi hero'nun kendi düğmesi.
     Onu da kaldırmak sayfayı eylemsiz açardı. */
  #ornekler .sc-cta,
  #ozel .tf-gate-cta,
  #urun .urun-cta,
  #sergile .mst-cta,
  #hediye .hd-cta { display: none; }

  /* KAPANIŞ ŞERİDİ BÜTÜNÜYLE KALKAR, yalnız düğmesi değil.
     O bölüm eyebrow + "Kartını Tasarlamaya Başla" başlığı + tek
     düğmeden ibaret; düğmesi alınınca geriye eylemsiz bir çağrı
     kalıyordu -- başlık bir şey vaat edip karşılığını vermiyordu.
     Masaüstünde aynen duruyor. */
  .cta-strip { display: none; }
  /* KAPIYI JS'İN KENDİ İŞARETİ AÇAR. `data-kapi` yalnız kural gerçekten
     kurulduğunda konur; JS hiç koşmazsa nitelik yoktur ve çubuk ESKİSİ GİBİ
     görünür kalır -- satış yolu bir betiğe bağlanmaz.
     (Önce `html.js` yazılmıştı; bu depoda öyle bir sınıf YOK ve kural
     hiçbir zaman uygulanmazdı.) */
  .mq-sticky-cta[data-kapi]{ transform:translateY(110%); opacity:0; pointer-events:none;
    transition:transform .28s ease, opacity .28s ease; }
  .mq-sticky-cta[data-kapi][data-gorunur]{ transform:none; opacity:1; pointer-events:auto; }
  @media (prefers-reduced-motion: reduce){
    .mq-sticky-cta[data-kapi]{ transition:none; }
  }
  body{ padding-bottom:76px; }

  /* ---- HERO FİYAT SATIRI · MOBİL (Kerem, 2026-08-26) --------------------
     ÖLÇÜLDÜ (390px koşumu): `.th-price` masaüstünde `display:inline-flex;
     flex-wrap:nowrap`. Mobilde cümlenin her parçası AYRI bir esnek öğe olduğu
     için "Fotoğraftan özel tasarım kart" 184px'lik kendi öğesinin içinde iki
     satıra kırılıyor, "₺589'dan başlar" ise onun YANINDA dikey ortada kalıyordu
     -> kelimeler kopuk görünüyordu (rozet 55px, metin 184px, fiyat 42px).
     ÇÖZÜM: mobilde satır tek bir METİN AKIŞI olur (display:block). Rozet
     satır içi bir hap olarak metnin başında akar, satır sonları doğal düşer.
     Fiyat + eki tek parça: `.th-price-amt` asla bölünmez.
     Masaüstü (>768px) bu bloğun DIŞINDA — inline-flex düzeni aynen duruyor. */
  .th-price{ display:block; line-height:1.55; }
  .th-price .th-price-badge{
    display:inline-flex; align-items:center; vertical-align:baseline;
    margin-right:8px; white-space:nowrap;
  }
  .th-price .th-price-amt{ white-space:nowrap; }
  /* Aynı kalıbı kullanan kapı satırı da tek parça kalsın. */
  .tf-gate-price .th-price-amt{ white-space:nowrap; }
}

/* ---- 13) Hero koyu kalıntı düzeltmeleri (Sprint 1) ---- */
.th-stadium{ background:
  radial-gradient(52% 56% at 70% 26%, rgba(244,184,96,.16), transparent 62%),
  radial-gradient(46% 50% at 66% 20%, rgba(233,106,75,.05), transparent 66%),
  linear-gradient(180deg,#FFFDF9 0%, var(--bg) 55%, #FFF6EA 100%) !important; }
.th-stadium::before,.th-stadium::after{ opacity:.5 !important; }
.th-overlay,.th-glow,.th-vignette{ display:none !important; }
/* hero ghost butonu açık zemine uyarlanır (eski koyu rgba iptal) */
.teamforge-hero .btn-ghost,.btn-ghost{ background:#FFFFFF !important; color:var(--text) !important;
  border-color:var(--line) !important; }
.teamforge-hero .btn-ghost:hover,.btn-ghost:hover{ border-color:var(--coral) !important; color:var(--coral) !important; }

/* ---- 14) Kart arkası gölgeleri KALDIRILDI (Kerem 2026-08-21) ----
   preview (hero kartı) + temalar vitrini thumbnail'lerinin arkasındaki
   drop-shadow/glow katmanları temiz açık zemin için sıfırlandı. */
.tv-thumb{ filter:none !important; }
.hero-board{ filter:none !important; }
.hero-cards img{ filter:none !important; }
/* DİKKAT — `.th-media img` YAZMA (2026-08-21 regresyonu): o seçici .th-media-shadow'u da
   yakalıyordu. Siluet gölgesi AYNI kart görselinin arka kopyasıdır ve görünmezliğini
   `filter: brightness(0) blur(15px)` ile alır; filtre `none`'a çekilince kopya TAM RENKLİ
   olarak kartın üstüne biniyor ve hero kartı bulanık bir leke gibi görünüyordu.
   Gölge isteniyorsa filtre KALIR; istenmiyorsa eleman GİZLENİR (aşağıdaki kural). */
.th-card,.th-media-card,.th-figure,.th-stadium .th-card{ filter:none !important; }
/* Kerem: kart arkasında gölge/glow YOK -> siluet kopyası tamamen gizlenir (filtresi
   bozulmaz, eleman hiç çizilmez). Kartın "oturduğunu" gösteren zemin teması ::after'da kalır. */
.th-media-shadow{ display:none !important; }
/* zemin teması: koyu tema için konmuş saf siyah (%55) krem üstünde gri leke gibi duruyordu
   -> mürdüm tonuna çekilip yumuşatıldı (kart hâlâ "oturuyor", gölge dikkat çekmiyor). */
.th-media::after{ background:radial-gradient(ellipse at center, rgba(59,44,53,.22), transparent 72%) !important; }
.tf-custom-card,.tf-custom-card:hover{ filter:none !important; }
/* 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. */

/* ---- 15) Editör seçicileri: SEÇİM = ince yuvarlak çerçeve (gölge/glow DEĞİL) ----
   Kerem 2026-08-21: Kart Teması seçimi gölge/halka ile gösteriliyordu -> ince
   yuvarlatılmış mercan çerçeveye çevrildi. Aynı stil Çerçeve ve Arka Plan
   seçicilerine de uygulandı (görsel tutarlılık). */

/* Kart Teması */
.cs-thumb{ border:2px solid #D0B492 !important; border-radius:13px !important; box-shadow:0 2px 6px rgba(42,30,37,.10) !important; }
.cs-style:hover .cs-thumb{ border-color:rgba(233,106,75,.45) !important; box-shadow:none !important; filter:none !important; }
.cs-style.active .cs-thumb{ border:2px solid var(--coral) !important; box-shadow:none !important; }
.cs-style.active .cs-name{ color:var(--coral) !important; }
.cs-check{ background:var(--coral) !important; color:#1E1410 !important; }

/* Çerçeve */
.tff-frame-family{ border:1.5px solid var(--line) !important; border-radius:14px !important; box-shadow:none !important; background:#FFFFFF !important; }
.tff-frame-family:hover{ border-color:rgba(233,106,75,.45) !important; color:var(--text) !important; box-shadow:none !important; }
.tff-frame-family.active{ border:2px solid var(--coral) !important; background:#FFFFFF !important; color:var(--text) !important; box-shadow:none !important; }
.tff-frame-family img{ filter:none; }  /* yalniz drop-shadow'u siler; tint'li (tahta/silver/copper) frame'ler kendi filtresini korur (daha yuksek ozgulluk) */

/* Arka Plan */
.tfyt-bg{ border:1.5px solid var(--line) !important; border-radius:12px !important; box-shadow:none !important; overflow:hidden; }
.tfyt-bg:hover{ border-color:rgba(233,106,75,.45) !important; box-shadow:none !important; }
.tfyt-bg.active{ border:2px solid var(--coral) !important; box-shadow:none !important; }

/* ---- 16) Kart Teması + Çerçeve: TEK TİP kutu ve çerçeve ebadı (Kerem 2026-08-21) ----
   Tüm temaların çerçeveleri Futbolcu bölümündeki gibi beyaz, dikey, AYNI ebat
   kutularda; çerçeve görselleri aynı boyda (contain). Seçilen temanın arkasındaki
   gölge/glow tamamen kaldırıldı — seçim yalnız ince mercan çerçeve. */

/* Kart Teması: gölge/glow YOK (mobil #tab-tema glow'u dahil) */
.cs-style .cs-thumb,.cs-style:hover .cs-thumb,.cs-style.active .cs-thumb,
#tab-tema .cs-style .cs-thumb,#tab-tema .cs-style:hover .cs-thumb,
#tab-tema .cs-style.active .cs-thumb{ filter:none !important; box-shadow:none !important; }
.cs-thumb .tf-custom-card,.cs-thumb img{ filter:none !important; box-shadow:none !important; }
/* TEMA KUTUSU (Kerem 2026-08-22, iki turda oturdu).
   TUR 1: kutu BEYAZDI ve cerceve sanati kenardan kenara doluyordu -> sanatin
   kendi silueti (Gezi/Gamer kalkan, Bebek kemerli, Renk dikdortgen) kutunun
   OUTLINE'i gibi okunuyordu: "biri dikdortgen biri oval".
   TUR 2: kutuya kartin koyu zemini (#23191F) verildi. Sekil sorunu bitti ama
   krem sayfada BES KOYU BLOK cikti -- Kerem: "cok kotu gozukmuyor mu". Dogru.
   BUGUNKU: sicak krem kart yuzu + IC BOSLUK. Iki mekanizma birlikte calisir:
     - ic bosluk (background-size:%86) sanatin kenara degmesini keser ->
       kutunun KENDI dikdortgeni baskin olur, siluet artik outline degildir;
     - sicak krem zemin: bes cercevenin de okunur kaldigi ton (beyazda Bebek'in
       krem pampasi soluyordu, koyuda sayfa agirlasiyordu).
   TUR 3: ilk deneme (#F3E7D8, %86, 1.5px kenar) YETMEDI -- Kerem: "hala neden
   boyle gozukuyor". Olcum: kutu neredeyse beyaz panelin uzerinde solgun
   kaliyor ve %86'lik sanat kenara fazla yaklasiyordu; goz yine silueti
   okuyordu. Varyantlar bu kez GERCEK panel zemininde kosuldu ve kutu
   guclendirildi: #EFE0CD yuzey + %76 sanat + 2px #D0B492 kenar + hafif golge.
   Artik kutu belirgin bir KART; cerceve onun uzerindeki sus.
   Yeni gorsel URETILMEDI; yalniz zemin ve olcek degisti. */
.cs-thumb{ background-color:#EFE0CD !important; background-size:76% !important; background-position:center !important; }  /* DIKKAT: 'background' KISAYOLU KULLANMA — inline background-image'i (cerceve onizlemesi) siler */
#tab-tema .cs-thumb,#tab-tema .cs-style.active .cs-thumb{ background-color:#EFE0CD !important; border:2px solid #D0B492 !important; }
#tab-tema .cs-style.active .cs-thumb{ border:2px solid var(--coral) !important; }

/* Çerçeve seçici: her tema için AYNI beyaz kutu + AYNI ebat çerçeve */
.tff-frame-family-group,.tff-frame-family-group.tfyt-liste{
  grid-template-columns:repeat(4,1fr) !important; gap:10px !important; }
.tff-frame-family{ background:#FFFFFF !important; padding:12px 8px 10px !important;
  justify-content:flex-start !important; }
/* çerçeve görseli: SABİT yükseklik + contain -> hepsi aynı ebatta görünür */
.tff-frame-family img,.tfyt-liste .tff-frame-family img{
  width:auto !important; max-width:100% !important; height:88px !important;
  object-fit:contain !important; }
/* isim: tek satır, taşarsa … (kutular aynı yükseklik) */
.tff-frame-family > span{ width:100%; text-align:center; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; font-size:.74rem !important; }

/* ---- 17) TASARIM KAPISI (#ozel) — editör /tasarla'ya taşındıktan sonra ----
   Ana sayfada kalan hafif yönlendirme bölümü: solda adımlar + CTA, sağda koyu
   sahnede kart görseli. Editör CSS'i (customizer-*) bu sayfada artık YÜKLENMİYOR
   değil — dosya aynı, sadece o markup burada yok; bu bölüm kendi stilini taşır. */
.tf-gate{ padding:clamp(48px,7vw,84px) 0; }
.tf-gate-grid{ display:grid; grid-template-columns:1fr; gap:clamp(24px,4vw,56px); align-items:center; }
@media (min-width:900px){ .tf-gate-grid{ grid-template-columns:1.05fr .95fr; } }
.tf-gate-copy h2{ margin:12px 0 10px; font-size:clamp(1.5rem,3vw,2.15rem); letter-spacing:-.015em; }
.tf-gate-copy > p{ color:var(--muted); margin:0 0 20px; max-width:52ch; }
.tf-gate-list{ list-style:none; margin:0 0 26px; padding:0; display:grid; gap:12px; }
.tf-gate-list li{ display:flex; align-items:center; gap:12px; color:var(--text); font-size:.96rem; }
.tf-gate-list li > span:first-child{ flex:0 0 auto; width:26px; height:26px; border-radius:50%;
  background:var(--gold); color:#3B2C35; font-weight:700; font-size:.8rem;
  display:inline-flex; align-items:center; justify-content:center; }
.tf-gate-cta{ display:inline-flex; }
.tf-gate-price{ margin:14px 0 0; color:var(--muted); font-size:.9rem; }
.tf-gate-price b{ color:var(--text); font-family:'Poppins',sans-serif; }
/* koyu sahne — açık sayfanın içinde çerçeveli panel */
.tf-gate-stage{ background:linear-gradient(180deg,var(--stage),var(--stage-2));
  border-radius:24px; padding:clamp(20px,3vw,36px); display:flex; justify-content:center;
  box-shadow:0 30px 70px -34px rgba(59,44,53,.5), inset 0 0 0 1px rgba(255,255,255,.05); }
.tf-gate-card{ width:100%; max-width:320px; height:auto; display:block; }