/* ============================================================================
   MIQNO — /tasarla MOBİL DÜZENİ · CANVA KALIBI
   (Kerem, 25 Ağustos 2026 — görsel referans: AI/mochup/mobil-canva-C1..C5.png)

   "Üstte SABİT kanvas (kart, sahne koyu); altta SABİT ikonlu sekme çubuğu;
    sekmeye dokununca yarım ekran sheet açılır, tutamaçla ~%65'e büyür, aşağı
    çekince kapanır; sheet açıkken kart GÖRÜNÜR kalır. Sekme çubuğunun altında
    kalıcı CTA barı: fiyat + Sepete Ekle."

   ESKİ ÇEKMECE TAMAMEN SİLİNDİ (aynı komut, 6. madde): drawer / preview-handle
   / preview-backdrop düğümleri tasarla.html'den, motoru (csPreviewDrawer)
   tf-sayfa.js'ten, kuralları tf-sayfa.css ve tasarla-adimlar.css'ten
   kaldırıldı. Bu dosyada onlara ait TEK BİR kural yok.

   ── DÜĞÜM TAŞIMA YOK ──────────────────────────────────────────────────────
   Sheet'in gövdesi YENİ bir kap değil, sayfanın KENDİ `.customizer-form`u;
   kanvas da kendi `.customizer-preview`i. İkisi de yalnızca KONUMLANDIRILIYOR.
   Alanlar (.tff-tab-content) yerinden oynatılmıyor, sekmeye göre gösterilip
   gizleniyor. Böylece hiçbir dinleyici kopmuyor ve masaüstü düzeni bu
   dosyadan hiç etkilenmiyor (her kural @media ≤939px içinde).

   ⚠ BASKI PARİTESİ — DOKUNULMAZ KURAL
   Kart YALNIZ `transform: scale()` ile ölçeklenir. `zoom` ya da genişlik
   değişimi YASAK: baskı ölçeği `computeRatio(el.offsetWidth, targetW)` ile
   hesaplanır ve `offsetWidth` YERLEŞİM genişliğidir — transform onu etkilemez,
   `zoom`/`width` ETKİLER. Kartın kendi DOM'una ve sınıflarına bu dosya HİÇ
   dokunmaz.
   ========================================================================== */

@media (max-width: 939px) {

  /* --- 0) ÖLÇÜLER --------------------------------------------------------- */
  .tasarla-page{
    --tsm-header:56px;              /* JS ölçüp yazar */
    --tsm-sekme-h:60px;
    --tsm-cta-h:74px;
    --tsm-guvenli:env(safe-area-inset-bottom, 0px);
    --tsm-guvenli-ust:env(safe-area-inset-top, 0px);   /* Faz 5: kip ust bari JS'te de olculur */
    --tsm-tserit-h:0px;             /* tema şeridi; JS ölçüp yazar (yoksa 0) */
    /* ALT ARAÇ BLOĞUNUN PAYI — TEK KAYNAK (Kerem, 2 Eylül 2026).
       Sekme çubuğu + varsa tema şeridi. Çubuk gizleme jestinde 0'a iner ve o
       yer kanvasın olur. Değeri JS yazar (`cubukPayiYaz`); buradaki 60px yalnız
       ilk kare için makul bir başlangıçtır. Kart ölçeği (`kanvasHedefBoy`) de
       AYNI değişkeni okur -- kanvas kutusu ile ölçek hesabı ikiye ayrılmasın. */
    --tsm-cubuk-pay:60px;
    --tsm-alt:calc(var(--tsm-cubuk-pay) + var(--tsm-cta-h) + var(--tsm-guvenli));
    --tsm-sheet-h:0px;              /* açık sheet'in yüksekliği; JS yazar */
    --tsm-krem:#FFF9F0;
    --tsm-krem-2:#FFFDF8;
    --tsm-cizgi:#EADBC8;
    --tsm-murekkep:#2A1E25;
    --tsm-soluk:#6B5A62;
    --tsm-mercan:#E96A4B;
    /* KOMUT I · sekme cubugu paleti (masaustuyle AYNI degerler). */
    --tsm-sekme-cizgi:#EFE0CE;
    --tsm-sekme-ikon:#B29FAA;
    --tsm-sekme-metin:#9C8592;
    --tsm-sekme-secili:#3B2C35;
    --tsm-sekme-tik:#2F9E5F;
    --tsm-bal:#F4B860;
  }

  /* --- 0a) TAM EKRAN UYGULAMA · GÖVDE SCROLL KİLİDİ ----------------------
     Kerem (26 Ağustos 2026): "/tasarla mobilde TAM EKRAN UYGULAMA gibi
     davranmalı: gövde scroll kilitli, yalnızca sheet içerikleri kendi içinde
     kayar. Header sabit, altındaki hiçbir şey scroll'la oynamayacak."

     Tek başına `body{overflow:hidden}` YETMİYORDU:
       · overflow kilidi html'e propagate ediliyor ama LASTİK BANT (rubber band /
         overscroll) kapanmıyor -> parmak aşağı çekince tüm yüzey (sticky header
         dahil) oynuyor. `overscroll-behavior:none` bunu html + body'de kapatır.
       · Yükseklik `100vh` iken adres çubuğu gizlenip görününce görünüm alanı
         değişiyor, sabit barlar zıplıyordu. `100dvh` gövdeyi görünüm alanının
         O ANKİ boyuna bağlar (JS de `window.innerHeight` okuyor -> ikisi aynı
         değer). Scroll tamamen kilitli olduğu için adres çubuğu zaten
         kaydırmayla toplanmaz; kalan tek durum tarayıcının kendi animasyonudur
         ve dvh onu takip eder.
       · `position:fixed` gövde, iOS'ta kalan son kaydırma yolunu da kapatır.
     100% -> 100dvh sırası bilinçli: dvh desteklemeyen motorda 100% geçerli kalır. */
  html:has(body.tasarla-page){
    height:100%; overflow:hidden; overscroll-behavior:none;
  }
  .tasarla-page{
    position:fixed; top:0; left:0; right:0;
    width:100%;
    height:100%;
    height:100dvh;
    margin:0;
    overflow:hidden;
    overscroll-behavior:none;
  }

  /* HEADER SABİT: gövde artık akmıyor, header de `sticky` değil `fixed` olmalı —
     sticky bir kaydırma kabına yaslanır, burada öyle bir kap kalmadı. Altındaki
     her şey zaten `fixed` ve `--tsm-header` kadar aşağıdan başlıyor. */
  .tasarla-page > header{
    position:fixed; top:0; left:0; right:0; z-index:100;
  }
  .tasarla-page #ozel{ padding:0 !important; }
  .tasarla-page #ozel > .container{ padding:0 !important; max-width:none !important; }

  /* Masaüstü kabuğunun mobilde işi yok. */
  .tasarla-page .tw-head,
  .tasarla-page .ts-topbar-sag,
  .tasarla-page .ts-steps--panelustu,
  .tasarla-page .ts-footbar,
  .tasarla-page footer{ display:none !important; }

  .tasarla-page #ozel .customizer-grid{ display:block !important; padding:0 !important; }

  /* --- 1) KANVAS — üstte sabit, sahne koyu (C1) --------------------------- */
  .tasarla-page #ozel .customizer-preview{
    position:fixed !important;
    top:var(--tsm-header); left:0; right:0;
    bottom:calc(var(--tsm-alt) + var(--tsm-sheet-h));
    z-index:30;
    margin:0 !important; padding:0 !important;
    border:0 !important; border-radius:0 !important; box-shadow:none !important;
    background:
      radial-gradient(120% 90% at 50% 38%, #3A2C36 0%, #241A20 78%) !important;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
    transition:bottom .26s cubic-bezier(.32,.72,.28,1);
  }
  /* Krem kutu için yapılmış spot koyu sahnede gereksiz. */
  .tasarla-page .tf-custom-card-wrapper::before{ opacity:0; }

  /* Kart sahneye SIĞAR — transform ile, genişlikle DEĞİL (baskı paritesi). */
  .tasarla-page #ozel .customizer-preview .tf-custom-card-wrapper{
    transform:scale(var(--tsm-olcek, 1));
    transform-origin:center center;
    transition:transform .26s cubic-bezier(.32,.72,.28,1);
    will-change:transform;
  }

  /* ÖNİZLEME rozeti kanvasın SOL ÜSTÜNDE (C1).
     Düğüm üst barda kalır; `fixed` ile kanvasın köşesine oturur -> DOM taşıma
     yok, masaüstü düzeni bozulmaz. */
  .tasarla-page .ts-topbar{ display:block !important; margin:0 !important; }
  .tasarla-page .ts-topbar-sol{
    position:fixed !important;
    top:calc(var(--tsm-header) + 12px); left:14px;
    z-index:31;
    /* C1'de bu TEK bir hap: "ÖNİZLEME · baskıyla birebir". Masaüstünde iki
       satır (etiket + alt not); mobilde tek satıra ve tek zemine iniyor --
       koyu sahnede iki ayrı yüzen metin dağınık duruyordu. */
    display:flex !important; flex-direction:row !important; align-items:center !important;
    gap:7px !important;
    min-height:0 !important;
    padding:5px 12px !important;
    border-radius:999px;
    background:rgba(20,14,18,.74);
    border:1px solid rgba(244,184,96,.34);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    max-width:calc(100vw - 28px);
    pointer-events:none;
  }
  /* Hapın İÇİNDE ikinci bir hap olmasın: etiketin kendi zemini/kenarlığı düşer. */
  .tasarla-page .ts-topbar-sol .ts-onizleme-et{
    background:none !important; border:0 !important; padding:0 !important;
    color:var(--tsm-bal) !important;
  }
  .tasarla-page .ts-topbar-sol .ts-onizleme-not{
    color:#C9B2BD !important; font-size:11px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .tasarla-page .ts-topbar-sol .ts-onizleme-not::before{
    content:"·"; margin-right:7px; color:rgba(244,184,96,.55);
  }

  /* 5) KANVAS TEMİZ — KARTIN ÜZERİNDE HİÇBİR DÜĞME/METİN YOK (Faz 2, madde 3).
     "Rastgele Kart" ve "Fotoğrafı Ayarla" kanvasın dibinde mutlak konumda
     duruyordu; ikisi de TAŞINDI (bkz. tasarla-mobil.js -> kanvasiBosalt):
     zar ÖNİZLEME rozetinin içine, foto ayar satırı Fotoğraf sekmesine.
     "dokun → tam ekran" ipucu (::after) tam ekran davranışıyla birlikte
     KALDIRILDI — bu yüzden burada ne mutlak konum kuralı ne de ::after var.
     Kart üst bölgeye yaslı kalır; üstteki 44px rozet şeridi duruyor. */
  /* KART SAHNENİN TAM ORTASINDA (MOBİL FAZ 6, madde 3).
     Kart eskiden ÜSTE yaslıydı (align-items:flex-start) ve üstte 44px'lik bir
     rozet şeridi vardı; alt tarafta pay yoktu -> kart optik olarak yukarıda
     duruyordu ve tema/çerçeve değişince yüksekliği değişen kart yukarı-aşağı
     kayıyordu.
     ÖNİZLEME rozeti akışta DEĞİL (position:fixed) -> onun için şerit ayırmaya
     gerek yok; üst ve alt dolgu EŞİT verilir, kart iki eksende de ortalanır.
     Ölçek hesabı da bu dolguyu düşer (bkz. tasarla-mobil.js ROZET_SERIT). */
  .tasarla-page #ozel .customizer-preview{
    align-items:center !important;
    justify-content:center !important;
    padding-top:44px !important;
    padding-bottom:44px !important;
  }
  /* Kalan boş kapsayıcı yer kaplamasın (iki çocuğu da taşındı). */
  .tasarla-page #ozel .customizer-preview .tf-kart-araclar{ display:none !important; }


  /* --- 2) SHEET — sayfanın KENDİ formu, alttan yarım ekran (C2) ----------- */
  .tasarla-page #ozel .customizer-form{
    position:fixed !important;
    left:0; right:0;
    bottom:var(--tsm-alt);
    z-index:40;
    height:var(--tsm-sheet-h);
    margin:0 !important;
    padding:0 !important;
    background:var(--tsm-krem) !important;
    border:0 !important;
    /* G2: yarıçap tek kaynaktan (--miqno-blok-yaricap). Elle sayı yazılmıyor;
       masaüstündeki iki blokla AYNI değeri okuyor. */
    border-radius:var(--miqno-blok-yaricap) var(--miqno-blok-yaricap) 0 0 !important;
    box-shadow:0 -12px 34px -18px rgba(0,0,0,.6) !important;
    /* Formun KENDISI kayar; ayri bir govde kabi YOK (sira bagimliligi
       yaratiyordu -- bkz. tasarla-mobil.js aciklamasi). */
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;         /* sheet'in sonu sayfayi kaydirmasin */
    transition:height .26s cubic-bezier(.32,.72,.28,1);
    display:block;
  }
  /* Kapalıyken hiç yer kaplamaz (yükseklik 0 + tıklanamaz). */
  .tasarla-page:not(.tsm-acik) #ozel .customizer-form{ pointer-events:none; }

  /* ══════════ YÖN KİLİDİ — PANEL GÖVDESİNDEKİ KAYDIRICILAR ═══════════════
     (Kerem, 10 Eylül 2026 · MOB-1b)

     ÖLÇÜLDÜ (390×844, Fotoğraf sekmesi): parlaklık kaydırıcısının üstünde
     DİKEY 200 px sürükleme paneli KAYDIRMIYOR, kaydırıcının DEĞERİNİ
     değiştiriyordu (100 -> 105). Yani müşteri paneli kaydırmak isterken
     parmağı kaydırıcıya denk gelirse fotoğrafın parlaklığını kazara
     bozuyordu. Yatay sürükleme zaten doğruydu (105 -> 146).

     `pan-y` ÖNCE DENENDİ VE ÖLÇÜM ÇÜRÜTTÜ: dikey düzeliyordu ama denetim
     BÜSBÜTÜN ölüyordu -- Chromium'da sağa/sola sürükleme bir yana, DOKUNMA
     bile değeri değiştirmiyordu (60-150 aralığında değer 100'de kaldı).
     Yani kilit CSS'e bırakılamıyor; jestin sahibi JS olmalı.

     `none`: tarayıcı bu düğümde hiçbir jesti kendine almaz, ikisini de
     `tasarla-mobil.js -> panelSurguJesti` tahkim eder (`TFKanvas.yonYakala`):
     dikey baskın -> paneli kaydırır · yatay -> değeri yazar.

     KART BU KURALIN DIŞINDA: kartın rakip bir kaydırması yok ve fotoğraf
     iki eksende de konumlanabilmeli (bkz. tf-kanvas.js, MOB-1b). */
  .tasarla-page #ozel .customizer-form input[type="range"]{ touch-action:none; }

  /* Sheet başlığı: tutamaç + ad + ipucu (JS kurar) */
  .tasarla-page .tsm-baslik{
    position:sticky; top:0; z-index:2;
    padding:8px 18px 10px;
    background:var(--tsm-krem);
    border-radius:20px 20px 0 0;
    touch-action:none;                 /* sürükleme tarayıcıya kaçmasın */
    cursor:grab;
  }
  .tasarla-page .tsm-tutamac{
    display:block; width:52px; height:5px; margin:0 auto 10px;
    border-radius:999px; background:#DCC9B6;
  }
  .tasarla-page .tsm-baslik-satir{
    display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  }
  .tasarla-page .tsm-baslik-ad{
    margin:0; font-size:17px; font-weight:700; color:var(--tsm-murekkep);
  }
  .tasarla-page .tsm-baslik-not{ font-size:12.5px; color:var(--tsm-soluk); }

  /* Adım kabukları mobilde YOK SAYILIR: alanlar doğrudan sheet'e akar.
     `display:contents` düğümü silmez, yalnız kendi kutusunu kaldırır ->
     hiçbir dinleyici kopmaz. */
  .tasarla-page .ts-step-panel{ display:contents !important; }

  /* Sekme filtresi: yalnız aktif grubun kabı görünür. */
  .tasarla-page #ozel .tff-tab-content{ display:none !important; }
  .tasarla-page[data-tsm-sekme="foto"]     #tab-photo,
  .tasarla-page[data-tsm-sekme="tema"]     #tab-tema,
  .tasarla-page[data-tsm-sekme="cerceve"]  #tab-frame,
  .tasarla-page[data-tsm-sekme="arkaplan"] #tab-bg,
  .tasarla-page[data-tsm-sekme="yazi"]     #tab-info,
  .tasarla-page[data-tsm-sekme="boyut"]    #tab-size{
    display:flex !important; flex-direction:column; gap:14px;
    padding:2px 16px 18px;
  }
  /* 4) ÇİFT BAŞLIK YOK.
     Sheet başlığı zaten "Çerçeve" diyor; alanın kendi <label>'ı içeride bir kez
     daha "ÇERÇEVE" yazıyordu. Sekmenin İLK alanının başlığı sheet başlığının
     tekrarı olduğu için düşürülür — sonraki alanların başlıkları KALIR
     (onlar ayrı bölümler: "Çerçeve Stili", "Yazı Renkleri"...).
     Yalnız ilk alanın DOĞRUDAN çocuğu olan etiket gizlenir; iç kontrollerin
     kendi etiketlerine dokunulmaz. */
  .tasarla-page #ozel .tff-tab-content > .tff-field:first-child > label:first-child,
  .tasarla-page #ozel .tff-tab-content > .cs-picker:first-child > .cs-title:first-child{
    display:none;
  }

  /* Alanlar sheet içinde sade kart: gölge yok (sheet zaten bir yüzey). */
  .tasarla-page #ozel .customizer-form .tff-field,
  .tasarla-page #ozel .customizer-form .cs-picker{
    box-shadow:none !important;
    border:1px solid var(--tsm-cizgi) !important;
    border-radius:14px !important;
    padding:14px !important;
    margin:0 !important;
  }
  /* MASAÜSTÜNE ÖZGÜ KISAYOL mobilde YOK.
     "Bir şeyi değiştir" bloğu (.ts-card) Onay adımının çocuğu ama
     `.tff-tab-content` DEĞİL -> sekme filtresi onu yakalamıyordu ve HER
     sheet'in dibinde görünüyordu (ölçüldü: Çerçeve sheet'inde de duruyordu).
     Mobilde zaten sekme çubuğu var; adımlar arasında zıplamak için ikinci bir
     yol gereksiz. */
  .tasarla-page #ozel .customizer-form .ts-card{ display:none !important; }

  /* ESKI SEKME SERIDI de mobilde YOK: yerini alttaki ikonlu cubuk aldi.
     Dugum DOM'da kalir (tasarla-adimlar.js onu dinliyor: baska bir kod bir
     sekmeyi programatik acarsa adimi senkronluyor) -- yalniz GORUNMEZ.
     OLCULDU: gizlenmeden once sheet'in dibinde bos bir serit birakiyordu. */
  .tasarla-page #ozel .tff-tabs{ display:none !important; }

  /* 6c) DROPZONE'un altındaki boşluk toparlandı.
     Ölçüldü: Fotoğraf alanı 403px yer kaplıyordu; büyük kısmı yükleme
     kutusunun kendi min-height'ıydı. Mobilde kutu dokunmaya yetecek kadar
     yüksek olsun, fazlası sheet'i boşuna uzatmasın. */
  .tasarla-page #ozel .tff-file-upload{
    min-height:0 !important;
    padding:22px 14px !important;
  }
  .tasarla-page #ozel #tab-photo .tff-help{ margin:8px 0 0; }

  /* Eski "Devam" düğmeleri mobilde de gizli (alt bar/CTA devraldı). */
  .tasarla-page #ozel .customizer-form .tff-tab-content > .btn,
  .tasarla-page #ozel .customizer-form .tff-actions{ display:none !important; }

  /* --- 2z) BOYUT & ADET ÇEKMECESİ SADE (MOB-10, Kerem 16 Eylül 2026) --------
     "Sadece boyut seçimi ve adet seçimi olsun ve yan yana olsun... başka
     bilgilendirme olmasın." Kademe kartları (#tfTierInfo + .k2-soon notu) ve
     Sipariş Özeti (#cuOzet) mobilde GİZLİ -- düğümler durur, fiyat etiketi ve
     özet hesabı onlardan beslenmeye devam eder. #tab-size iki sütunlu ızgara:
     Boyut (JS'in kurduğu .tsm-boyut-alan) sol, Adet (#cuQtyField) sağ; geri
     kalan alanlar (magnet) tam satır. Masaüstü dokunulmadı (medya bloğu).
     `!important` YALNIZ display:grid'de: sekme filtresi (#ozel .tff-tab-content
     display:none !important) ancak öyle aşılıyor; kalan her şey ÖZGÜLLÜKLE. */
  .tasarla-page[data-tsm-sekme="boyut"] #tab-size{
    /* Sol sütun daha geniş: "Mini Kart (7×10 cm)" tek satırda sığmalı (ölçüldü:
       1fr/1fr'de 159 px'lik seçici etiketi "Mini Kart (7×10" diye kesiyordu). */
    display:grid !important; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:10px; align-items:stretch;
  }
  .tasarla-page #ozel #tab-size > *{ grid-column:1 / -1; min-width:0; }
  .tasarla-page #ozel #tab-size > .tsm-boyut-alan{ grid-column:1; position:relative; }
  .tasarla-page #ozel #tab-size > #cuQtyField{ grid-column:2; }
  .tasarla-page #ozel #tab-size > #tfTierInfo,
  .tasarla-page #ozel #tab-size > #cuOzet,
  .tasarla-page #ozel #tab-size .k2-soon{ display:none; }
  /* Boyut alanı ilk çocuk olabilir (katalog gelmeden) -> "ilk alanın etiketi
     gizli" kuralını özgüllükle aşar: burada etiket başlık DEĞİL, kontrolün adı. */
  .tasarla-page #ozel #tab-size > .tsm-boyut-alan > label:first-child{ display:block; }
  .tasarla-page #ozel #tab-size .tsm-boyut-sec{
    display:block; width:100%; height:42px; margin:0;
    padding:0 30px 0 10px;
    font:inherit; font-size:14px; font-weight:600;
    -webkit-appearance:none; appearance:none;
    border-radius:999px;
  }
  /* Ok simgesi ALANIN sözde öğesi: sahne CSS'i <select>'e `background:… !important`
     (kısa yazım) yazıyor, görsel oraya konsa silinirdi. Alan dolgusu 14 px,
     seçici 42 px yüksek -> ok seçicinin sağ ucunda dikey ortada. */
  .tasarla-page #ozel #tab-size > .tsm-boyut-alan::after{
    content:""; position:absolute; right:26px; bottom:27px; width:16px; height:16px;
    pointer-events:none;
    background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233B2C35' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") center/16px 16px no-repeat;
  }
  /* Adet sayacı sütununu doldurur: işaretler kenarlarda, sayı ortada. */
  .tasarla-page #ozel #tab-size > #cuQtyField .tk-qty{
    display:flex; width:100%; justify-content:space-between; align-self:stretch;
  }
  .tasarla-page #ozel #tab-size > #cuQtyField .tk-qty-val{ flex:1 1 auto; width:auto; min-width:0; }
  /* Dar sütunda (ölçüldü: 124 px iç genişlik) 40+46+40 taşıyor ve "−" kesiliyordu. */
  .tasarla-page #ozel #tab-size > #cuQtyField .tk-qty-btn{ flex:0 0 36px; width:36px; }

  /* --- 3) SEKME ÇUBUĞU (C1) ---------------------------------------------- */
  .tasarla-page .tsm-sekmeler{
    position:fixed; left:0; right:0;
    bottom:calc(var(--tsm-cta-h) + var(--tsm-guvenli));
    z-index:50;
    /* DAIRESELLIK TUZAGI: yukseklik `var(--tsm-sekme-h)`den gelseydi, JS o
       degiskene olctugu yuksekligi yazinca kural kendi kendini besler ve bar
       bir daha KUCULEMEZDI. Sekme cubugunun boyu SABIT ve burada yaziliyor;
       degisken yalnizca yerlesim matematigi icin bir AYNA. */
    height:60px;
    /* TEK SATIR — ASLA KIRILMAZ (Kerem, 26 Ağustos 2026).
       `1fr` yerine `minmax(0,1fr)`: düz `1fr` grid sütununa min-content (en uzun
       kelime) kadar ZEMİN koyar; uzun etiket ("Arka Plan" / EN "Background")
       sütunu şişirip çubuğu taşırıyordu. Sıfır tabanla 5 sütun ekranı HER ZAMAN
       eşit böler; sığmayan etiket alt satıra düşmez, aşağıda kırpılır.
       Sütun SAYISINI JS yazar (gizli sekme boş sütun bırakmasın) — o da aynı
       minmax kalıbını kullanır (bkz. tasarla-mobil.js sekmeleriTazele). */
    display:grid; grid-template-columns:repeat(5, minmax(0, 1fr));
    /* KOMUT I: cubuk PANELIN zeminini alir (--tsm-krem), ayri bir ton degil;
       ayirici cizgi cubuk ALTTA oldugu icin UST kenarda. */
    background:var(--tsm-krem);
    border-top:1px solid var(--tsm-sekme-cizgi);
    /* OVAL KÖŞE ÜSTTEKİ BLOKTA, CTA'DA DEĞİL (Kerem, 1 Eylül 2026).
       G2'de yarıçap CTA'ya yazılmıştı; ekranda alt alta duran iki bloğun
       YUVARLANAN olanı ALTTAKİ oluyordu. İstenen tersi: sekme çubuğu (üstteki
       blok) kanvastan yumuşak bir kenarla ayrılır, CTA ekranın dibine düz
       oturur. Yarıçap yine tek kaynaktan (--miqno-blok-yaricap) okunuyor;
       `overflow:hidden` zaten burada -> köşeler gerçekten kırpılır.
       Yukarı bakan gölge de CTA'dan buraya taşındı: gölgeyi artık kanvasla
       temas eden kenar taşıyor. */
    border-radius:var(--miqno-blok-yaricap) var(--miqno-blok-yaricap) 0 0;
    box-shadow:0 -6px 18px -12px rgba(0,0,0,.35);
    overflow:hidden;
    /* DİKEY JEST ÇUBUKTAN BAŞLAR (bkz. tasarla-mobil.js
       `sekmeBarJestiKur`): dikey sürükleme tarayıcıya kaçmasın. Çubukta
       kaydırılacak bir şey yok; dokunma/tıklama etkilenmiyor. */
    touch-action:none;
    /* MOB-9b (16 Eylül 2026): çubuğu aşağı kaydıran öteleme değişkeni, gizli sınıfı ve
       sürükleme sınıfı KALKTI -- çubuk hiçbir jestle ekran dışına çıkmaz (iPhone Safari'de
       "araçlar yok oluyor, geri alamıyorum" ölçüldü). */
  }

  /* --- 3b) TEMA ŞERİDİ — ÇUBUĞUN HEMEN ÜSTÜNDE (Kerem, 2 Eylül 2026) -------
     "Tema seçiliyken hemen o bölümün üstünde tema seçim bölümü gelmeli."
     Haplar `#cardStylePicker`ten KLONLANIR; görünümleri tf-tema-butonu.css'in
     `.tfy-tb--serit` kuralından gelir -- burada ikinci bir hap tasarımı YOK,
     yalnız şeridin kendi kabı. */
  .tasarla-page .tsm-tema-serit{
    position:fixed; left:0; right:0;
    bottom:calc(var(--tsm-cta-h) + var(--tsm-guvenli) + var(--tsm-sekme-h));
    z-index:49;
    display:flex; align-items:center; gap:8px;
    padding:8px 12px;
    background:var(--tsm-krem);
    border-radius:var(--miqno-blok-yaricap) var(--miqno-blok-yaricap) 0 0;
    box-shadow:0 -6px 18px -12px rgba(0,0,0,.35);
    overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
    scrollbar-width:none;
  }
  .tasarla-page .tsm-tema-serit::-webkit-scrollbar{ display:none; }
  .tasarla-page .tsm-tema-serit[hidden]{ display:none !important; }
  /* YUVARLAK KÖŞE HER ZAMAN EN ÜSTTEKİ BLOKTA (1 Eylül'de CTA'dan sekme
     çubuğuna taşınan kuralın aynısı, şimdi DÖRT bloğa genelleşti):
       çekmece açıksa   -> çekmece yuvarlak, şerit ve çubuk düz
       şerit varsa      -> şerit yuvarlak, çubuk düz
       şerit yoksa      -> çubuk yuvarlak
     Kaynak bir seçici numarası DEĞİL, JS'in yazdığı iki sınıf: `tsm-acik`,
     `tsm-tserit` (MOB-9b: gizli çubuk hâli kalktı). (`:has()` ile de yazılabilirdi ama
     şerit DOM'da çubuktan SONRA ekleniyor; kardeş seçici çalışmaz ve kural
     sessizce düşerdi -- ölçülmesi zor bir tuzak.) */
  .tasarla-page.tsm-tserit .tsm-sekmeler{
    border-radius:0;
    box-shadow:none;
  }
  /* ÇEKMECE AÇIKKEN KENARDA SİYAH BOŞLUK KALMAZ (Kerem, 4 Eylül 2026).
     ÖLÇÜLDÜ (390x844): çekmece açıkken `.customizer-form` 362..716 arasında
     ve DÜZ bir alt kenarla bitiyor; hemen altındaki `.tsm-sekmeler` ise
     716'dan başlayıp üst köşelerini 20px yuvarlıyordu. `overflow:hidden` o
     köşeleri gerçekten kırpıyor ve arkada boyayan bir şey yok -> (17,718)
     noktasında `elementFromPoint` çubuğu değil KOYU SAYFA ZEMİNİNİ döndürüyordu.
     İki krem yüzeyin arasında iki siyah çentik: müşteri bunu "araçlar ayrı bir
     kutuymuş" gibi görüyor. Üstteki blok zaten yuvarlak; alttaki DÜZ olmalı. */
  .tasarla-page.tsm-acik .tsm-sekmeler,
  .tasarla-page.tsm-acik .tsm-tema-serit{
    border-radius:0;
    box-shadow:none;
  }

  /* --- 3d) ÖNİZLEME ROZETİ JESTLE KÜÇÜLÜR --------------------------------
     Kerem: "bu yukarı kaydırma hareketi yapılırken sol üstteki Önizleme
     etiketi küçülmeli, aşağı kaydırılırken eski büyüklüğüne dönmeli."
     0..1) geliyor, yani rozet parmakla AYNI hızda küçülüyor. Değişkeni JS
     yazıyor; ikinci bir animasyon motoru yok. */
  .tasarla-page .ts-topbar-sol{
    transform-origin:left center;
    transition:transform .28s cubic-bezier(.32,.72,.28,1);
  }

  /* Düzenleme kipinde şerit de tutamaç da yok: ekran tamamen karta ayrılır. */
  .tasarla-page.tsm-duzen .tsm-tema-serit,
  /* Klon hap: şeritte kendi ölçüsünde durur, kap onu ezmez. */
  .tasarla-page .tsm-tema-serit .tsm-tema-hap{ flex:0 0 auto; margin:0; }
  /* KOMUT I · SEKME. Masaustuyle ayni dil, parmak icin buyutulmus:
     IZGARA yerlesimi (ikon ustte, ALT SATIRDA ad ile ✓ yan yana). Alanlar
     DOM sirasindan bagimsiz -> markup'a dokunulmadi (sira [ikon][ad][tik]). */
  .tasarla-page .tsm-sekme{
    position:relative;
    display:grid;
    grid-template-areas:'ikon ikon' 'ad tik';
    grid-template-columns:auto auto;
    justify-content:center; align-content:center;
    gap:4px;                           /* TEK deger: satir ve sutun ayni */
    background:none; border:0; padding:0 3px;
    min-width:0;                       /* grid öğesi içeriğine göre ŞİŞMESİN */
    font:inherit; font-weight:600;
    /* Ölçü ekranla küçülür: 320px'te ~9.6px, 390px'te 11px'te sabitlenir.
       Kerem'in kuralı: "ikon+etiket ölçüsü küçülerek sığacak". */
    font-size:clamp(9px, 3vw, 11px);
    color:var(--tsm-sekme-metin);
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  /* Etiket TEK SATIR: sarmalama kapalı, sığmayan kısım "…" ile kırpılır. */
  .tasarla-page .tsm-sekme .tsm-etiket{
    display:block; max-width:100%;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    line-height:1.25;
  }
  .tasarla-page .tsm-sekme svg{
    /* KOMUT I: parmak icin 22 px. Alt sinir da yukseltildi -- dar ekranda
       kucultmek eskiden 18'e kadar iniyordu, yeni dil 20'nin altina inmez. */
    width:clamp(20px, 5.6vw, 22px); height:clamp(20px, 5.6vw, 22px);
    display:block; flex:none;
    grid-area:ikon; justify-self:center;
    color:var(--tsm-sekme-ikon);
  }
  .tasarla-page .tsm-sekme .tsm-etiket{ grid-area:ad; }
  .tasarla-page .tsm-sekme .tsm-tik{ grid-area:tik; }
  /* SECILI SEKMENIN CIZGISI -- cubuk ALTTA oldugu icin sekmenin UST kenarinda
     (masaustunde alt kenarda). 3 px, ortadaki %56, koseler alt tarafta
     yumusak (cizgi asagi bakiyor). */
  .tasarla-page .tsm-sekme::after{
    content:''; position:absolute;
    left:22%; right:22%; top:0;
    height:3px; border-radius:0 0 2px 2px;
    background:transparent;
  }
  .tasarla-page .tsm-sekme[aria-selected="true"]::after{ background:var(--tsm-mercan); }
  /* [hidden] TUZAĞI — DÖRDÜNCÜ KEZ (MOBİL FAZ 6, ölçüldü 26 Ağustos 2026).
     Katalog bir sekmeyi kapattığında JS düğmeye `hidden` yazıyor VE sütun
     sayısını görünür sekme sayısına düşürüyor. Ama yukarıdaki
     `.tsm-sekme{ display:flex }` kuralı `[hidden]` NİTELİĞİNİ EZİYOR:
     gizli düğme hâlâ bir ızgara öğesi olarak yerleşiyor.
     Sonuç: 5 öğe, 4 sütun -> beşincisi ("Yazılar") kendiliğinden YENİ SATIRA
     düşüyor. ÖLÇÜLDÜ (390×844, Insta): sütunlar "90px 90px 90px 90px",
     ilk dört öğe y=716, "Yazılar" y=753 -> İKİ SATIR.
     Aynı şey Futbolcu'da da yaşandı (Insta'dan dönüşte kısıt asılı kalıyordu).
     Çubuğun yüksekliği CSS'te sabit (60px) olduğu için ikinci satır barın
     DIŞINA taşıyor ve kesik görünüyor. */
  .tasarla-page .tsm-sekme[hidden]{ display:none !important; }
  /* SON SAVUNMA: ne olursa olsun ikinci satır ÇİZİLMEZ. Izgara tek satıra
     kilitlenir; beklenmedik bir öğe eklenirse taşar ama çubuğu BÜYÜTMEZ --
     "tema değişimi çubuğun yüksekliğini hiç etkilemeyecek" kuralı bu. */
  .tasarla-page .tsm-sekmeler{ grid-template-rows:100%; grid-auto-rows:0; }
  /* KOMUT I: secili sekmenin METNI koyu murdum, IKONU mercan (masaustuyle ayni). */
  .tasarla-page .tsm-sekme[aria-selected="true"]{ color:var(--tsm-sekme-secili); }
  .tasarla-page .tsm-sekme[aria-selected="true"] svg{ color:var(--tsm-mercan); }
  /* Tamamlanan sekmede BAL ✓ rozeti (C3/C4/C5) */
  /* KOMUT I: bal rozet degil, ADIN YANINDA kucuk YESIL ✓; secilide GIZLI. */
  .tasarla-page .tsm-sekme .tsm-tik{
    position:static;
    width:auto; height:auto; border-radius:0;
    background:transparent; color:var(--tsm-sekme-tik);
    font-size:11px; font-weight:800; line-height:1; text-align:center;
    display:none;
  }
  .tasarla-page .tsm-sekme[data-tamam="1"] .tsm-tik{ display:block; }
  .tasarla-page .tsm-sekme[aria-selected="true"] .tsm-tik{ display:none; }

  /* --- 4) KALICI CTA BARI (C1) ------------------------------------------- */
  .tasarla-page .tsm-cta{
    position:fixed; left:0; right:0; bottom:0;
    z-index:50;
    /* ALT BOSLUK (Faz 2, madde 5): bar ekranin EN ALTINA oturur.
       `bottom:0` + alt dolgu YALNIZ guvenli alan kadar. Onceki hali sabit 10px
       daha tasiyordu ve ustune KALICI uyari satiri (.tsm-neden) biniyordu ->
       cubukla CTA arasinda gereksiz bir serit kaliyordu (OLCULDU: bar 99px).
       Uyari satiri kalkti, dolgu guvenli alana indi. Yukseklik yine JS ile
       olculup --tsm-cta-h'ye yazilir; buraya min-height YAZILMAZ (olcum kendi
       kendini beslerdi). */
    padding:10px 14px calc(8px + var(--tsm-guvenli));
    background:var(--tsm-krem-2);
    /* G2 · MOBİLDE DE İKİ BLOK: CTA kendi yüzeyi olarak okunsun. Ayraç çizgisi
       KALKTI (masaüstündeki kararla aynı).
       YARIÇAP GERİ ALINDI (Kerem, 1 Eylül 2026): "sepet kısmı kenarları oval
       olmuş; onun kenarları yuvarlatılmış değil, ÜSTÜNDEKİ kısmın kenarları
       yuvarlatılmış istiyorum." CTA ekranın dibine DÜZ oturur; yuvarlak köşe
       ve yukarı bakan gölge sekme çubuğuna geçti (bkz. .tsm-sekmeler). */
    border-top:0;
    border-radius:0;
    box-shadow:none;
    transition:border-radius .28s ease, box-shadow .28s ease;
    display:grid; grid-template-columns:auto 1fr; align-items:center; gap:12px;
  }
  .tasarla-page .tsm-fiyat{
    background:none; border:0; padding:0; text-align:left;
    font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent;
    /* Gösterge fiyatın YANINDA: metin bloğu solda, ok sağında. Barın
       yüksekliği DEĞİŞMEZ -- ok satır yüksekliğinin içinde kalır. */
    /* Boşluk TEK bildirimde: satırda 0 (fiyat ile boy adı bitişik kalmalı,
       bar yüksekliği değişmesin), sütunda 6 px. Eksenleri ayrı ayrı yazan
       biçim KULLANILMIYOR -- mobil blokta boşluklar tek bildirimde durur
       (bkz. MB-30). Bu yorum o kuralın aradığı adları ANMAZ: aynı kural bu
       depoda birkaç kez kendi gerekçe metnine takıldı. */
    display:grid; grid-template-columns:auto auto; align-items:center;
    gap:0 6px;
    position:relative;
  }
  .tasarla-page .tsm-fiyat .tsm-fiyat-tutar,
  .tasarla-page .tsm-fiyat .tsm-fiyat-boy{ grid-column:1; }
  .tasarla-page .tsm-fiyat-ok{
    grid-column:2; grid-row:1 / span 2;
    width:12px; height:12px; align-self:center;
    border-left:2px solid var(--tsm-soluk);
    border-top:2px solid var(--tsm-soluk);
    transform:rotate(45deg);              /* yukarı ok */
    transition:transform .18s ease;
  }
  .tasarla-page .tsm-fiyat[aria-expanded="true"] .tsm-fiyat-ok{
    transform:rotate(225deg);             /* açıkken aşağı bakar */
  }
  /* DOKUNMA HEDEFİ 44×44 (MOB-3 kuralı): görünmez `::before`, kutu DIŞINA
     büyür. `border-radius` VERİLMEZ -- MOB-3'te yarıçap köşeleri kesiyor ve
     köşe yoklaması düşüyordu. Fiyat metninin puntosu ve bar yüksekliği
     bundan etkilenmez: `::before` akışta yer kaplamaz. */
  .tasarla-page .tsm-fiyat::before{
    content:''; position:absolute; z-index:1;
    top:50%; left:0; transform:translateY(-50%);
    width:100%; min-width:44px; height:44px;
  }

  /* --- FİYAT KIRILIMI ŞERİDİ (MOB-5) --------------------------------------
     BARIN ÜSTÜNDE, BARI İTMEDEN: alt bar `position:fixed; bottom:0`, şerit de
     sabit ve barın yüksekliği kadar yukarıda. Böylece şerit YUKARI doğru
     büyür; "Sepete Ekle" düğmesinin ekran konumu değişmez (ölçülüyor).
     `--tsm-cta-h` JS'te barın GERÇEK yüksekliğinden yazılıyor; ikinci bir
     yükseklik sabiti tanımlanmıyor. */
  .tasarla-page .tsm-kirilim{
    position:fixed; left:0; right:0;
    bottom:calc(var(--tsm-cta-h) + var(--tsm-guvenli));
    /* SEKME ÇUBUĞUNUN ÜSTÜNDE (o da 50). ÖLÇÜLDÜ VE GÖRÜLDÜ: 49'da şerit
       çubuğun ARDINDA kalıyor, Magnet ve Toplam satırları hiç görünmüyordu --
       aritmetik doğruyken müşteri rakamı okuyamıyordu. Şerit açıkken sekme
       çubuğunu örtmesi kabul: dışarıya dokunmak şeridi zaten kapatıyor ve
       şeridin fiyatla görsel bağı böyle korunuyor. */
    z-index:51;
    padding:10px 14px;
    background:var(--tsm-krem-2);
    border-top:1px solid rgba(59,44,53,.08);
    box-shadow:0 -10px 24px -18px rgba(0,0,0,.45);
    display:grid; gap:2px;
  }
  .tasarla-page .tsm-kirilim[hidden]{ display:none; }
  .tasarla-page .tsm-kirilim-satir{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    width:100%; min-height:32px;
    padding:0; margin:0; border:0; background:none;
    font:inherit; font-size:15px; color:var(--tsm-murekkep);
    text-align:left;
  }
  .tasarla-page .tsm-kirilim-kapi{
    cursor:pointer; -webkit-tap-highlight-color:transparent;
  }
  .tasarla-page .tsm-kirilim-tutar{ font-variant-numeric:tabular-nums; }
  .tasarla-page .tsm-kirilim-toplam{
    margin-top:6px; padding-top:8px;
    border-top:1px solid rgba(59,44,53,.10);
    font-weight:800;
  }
  .tasarla-page .tsm-fiyat-tutar{
    display:block; font-size:19px; font-weight:800; color:var(--tsm-murekkep);
  }
  .tasarla-page .tsm-fiyat-boy{
    display:block; font-size:12px; color:var(--tsm-soluk);
  }
  .tasarla-page .tsm-ekle{
    height:48px; border:0; border-radius:var(--miqno-dugme-yaricap);
    background:var(--tsm-mercan); color:#FFF6EC;
    font:inherit; font-size:16px; font-weight:700;
    cursor:pointer; -webkit-tap-highlight-color:transparent;
    /* MOB-9: düğme metni TEK SATIR kalır; uzun etiket kırılıp barı uzatmasın (iPhone
       Safari'de ölçüldü: iki satıra kırılan "Sepete eklendi" barı 48 -> ~96 px yapıyor,
       araç şeridi altında kalıyordu). Sığmazsa kırpılır, bar boyu sabit kalır. */
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
  }
  /* Foto yokken buton SOLUK -- ama `disabled` DEGIL: basilinca nedenini soyler
     ve Fotograf sekmesini acar (Faz 2, madde 6). */
  .tasarla-page .tsm-cta[data-hazir="0"] .tsm-ekle{
    background:#E7DDD0; color:#8B7C72;
  }
  /* KALICI DURUM SATIRI (.tsm-neden) KALDIRILDI (madde 6).
     Eski gerekce "satir her zaman yer kaplasin ki bar buyuyup kuculmesin" idi;
     satir tamamen gidince bar TEK SATIR oldu -> yuksekligi zaten sabit
     (fiyat blogu + 48px dugme). Uyari artik `.tsm-toast` ile, akista yer
     kaplamadan gosteriliyor. */
  .tasarla-page .tsm-cta[data-durum="eklendi"] .tsm-ekle{
    background:#3E7D52; color:#F2FBF4;
  }

  /* --- 5) TAM EKRAN / PINCH-ZOOM: KALDIRILDI (Faz 2, madde 4) --------------
     Kerem: "Önizlemeye dokununca açılan tam ekran ve pinch-zoom davranışı
     KALDIRILACAK — ayarları bozuyor. Kart yalnızca sabit önizleme olarak
     durur; hiçbir dokunuşla büyümez/küçülmez."
     Bu bölümde ARTIK KURAL YOK: `.tsm-tam` sınıfı, `--tsm-tam-olcek`,
     `#tsmKapat` (✕) ve `data-ipucu-tam` ipucu tamamen silindi. Kartın ölçeği
     TEK yerden gelir: `--tsm-olcek` (bkz. bölüm 1). */

  /* --- 6) KISA UYARI (TOAST) ----------------------------------------------
     Kalıcı "önce bir fotoğraf ekle" satırının yerine geçer (madde 6).
     `position:fixed` -> AKIŞTA YER KAPLAMAZ, yani kanvasın konumu/boyu bundan
     etkilenmez. CTA barının hemen üstünde belirir. */
  .tasarla-page .tsm-toast{
    position:fixed; left:14px; right:14px;
    bottom:calc(var(--tsm-alt) + 12px);
    z-index:70;
    margin:0 auto; max-width:420px;
    padding:11px 14px;
    border-radius:12px;
    background:rgba(42,30,37,.94);
    color:#FFF3E4; font-size:13.5px; line-height:1.35; text-align:center;
    box-shadow:0 10px 26px -14px rgba(0,0,0,.8);
    opacity:0; transform:translateY(8px);
    pointer-events:none;                 /* uyarı, tıklamayı ASLA yakalamaz */
    transition:opacity .18s ease, transform .18s ease;
  }
  .tasarla-page .tsm-toast[data-acik="1"]{ opacity:1; transform:translateY(0); }

  /* --- 7) ÖNİZLEME ROZETİNDEKİ ZAR (madde 1) ------------------------------
     "Rastgele Kart" hapı kanvastan çıktı; rozetin İÇİNDE küçük bir ikon.
     Rozet `pointer-events:none` (üzerine yazı yazılmış bir hap) -- yalnız zar
     tıklanabilir olur, ikinci bir kural yok. */
  .tasarla-page #ozel .ts-topbar-sol .tsm-zar{
    pointer-events:auto;
    position:static !important;          /* tf-zar.js köşe ölçümü koşmasın */
    width:26px; height:26px; flex:none;
    display:inline-flex; align-items:center; justify-content:center;
    margin-left:2px; padding:0 !important;
    border-radius:50% !important;
    background:rgba(244,184,96,.16) !important;
    border:1px solid rgba(244,184,96,.42) !important;
    color:var(--tsm-bal) !important;
    box-shadow:none !important;
    cursor:pointer; -webkit-tap-highlight-color:transparent;
  }
  .tasarla-page #ozel .ts-topbar-sol .tsm-zar svg{ width:15px; height:15px; }
  /* Etiket ("Rastgele Kart") mobilde gizli: rozette yalnız ikon durur.
     Metin `data-tsm-ipucu`da yaşar -> basılı tutunca toast, farede title. */
  .tasarla-page #ozel .ts-topbar-sol .tsm-zar .tf-zar-lbl{ display:none !important; }

  /* --- 8) FOTOĞRAFI AYARLA — Fotoğraf sekmesinde normal satır (madde 2) ---
     Kanvasta mutlak konumdaydı; artık sheet içinde akan bir satır. Kanvasta
     kalan hiçbir kuralı yok (bkz. bölüm 5). */
  .tasarla-page #ozel .customizer-form .photo-adjust-row.tsm-foto-ayar{
    display:flex; flex-direction:column; align-items:stretch; gap:10px;
    margin:0; padding:0;
  }
  /* [hidden] TUZAGI (bu depoda daha once yasandi): `display` kurali `[hidden]`i
     EZER. Satir fotograf yuklenene kadar gizli olmali (tfPhotoAdjustReady acar);
     asagidaki kural olmasa fotografsiz musteriye "Fotografi Ayarla" gorunurdu.
     Ayni tuzak ic durumlar icin de gecerli (cta / rozet / duzenleme kutusu). */
  .tasarla-page #ozel .customizer-form .tsm-foto-ayar[hidden],
  .tasarla-page #ozel .customizer-form .tsm-foto-ayar .photo-adjust-cta[hidden],
  .tasarla-page #ozel .customizer-form .tsm-foto-ayar .photo-adjust-done[hidden],
  .tasarla-page #ozel .customizer-form .tsm-foto-ayar .photo-adjust-edit[hidden]{
    display:none !important;
  }
  .tasarla-page #ozel .customizer-form .tsm-foto-ayar .photo-adjust-cta{
    width:100%; min-height:44px; justify-content:center;
  }
  /* Madde 7: DÜZENLEME kipinde Sıfırla/Tamam ekran DIŞINA taşıyordu (kanvasın
     dibindeydiler). Artık sheet'in içindeler: sheet kendi içinde kayar, düğmeler
     tam genişlik ve dokunma hedefi 44px. İpucu metni de sarmalanır, kesilmez. */
  .tasarla-page #ozel .customizer-form .tsm-foto-ayar .photo-adjust-edit{
    align-items:stretch; gap:10px; width:100%;
  }
  .tasarla-page #ozel .customizer-form .tsm-foto-ayar .photo-adjust-hint{
    text-align:center; white-space:normal; overflow-wrap:anywhere;
  }
  .tasarla-page #ozel .customizer-form .tsm-foto-ayar .photo-adjust-edit-btns{
    display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%;
  }
  .tasarla-page #ozel .customizer-form .tsm-foto-ayar .photo-adjust-reset,
  .tasarla-page #ozel .customizer-form .tsm-foto-ayar .photo-adjust-ok{
    min-height:44px; width:100%; justify-content:center;
  }
/* 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. */

  /* =======================================================================
     9) SEKME İÇERİKLERİ — ORTAK IZGARA (MOBİL FAZ 3, Kerem 26 Ağustos 2026)

     "Çerçeve ızgarası: satır arası boşluk sütun arası boşlukla BİREBİR aynı
      olacak (tek gap değeri). Arka planlar çerçevelerle AYNI ızgara düzeninde:
      aynı sütun sayısı, aynı kutu boyutu, aynı yatay/dikey boşluk, dikey akış."

     İKİ IZGARA TEK KALIPTAN BESLENİR. Ölçüler burada, tek yerde:
       --tsm-izgara-sutun · --tsm-izgara-bosluk · --tsm-kutu-oran

     ── NEDEN SAHİPLİĞİ BU KATMANA ALIYORUZ ────────────────────────────────
     Izgaraya bugüne kadar ÜÇ ayrı dosya karışıyordu ve hangisinin kazandığı
     `.ts-step-panel` sınıfının O ANDA var olup olmamasına bağlıydı:
       · tf-sayfa.css     -> auto-fill minmax(88px,1fr), gap 8
       · tf-light.css     -> repeat(4,1fr) !important, gap 10 !important,
                             kutu dolgusu 12px/8px/10px (DİKEY ASİMETRİK)
       · tasarla-adimlar.css (.ts-step-panel) -> repeat(6), gap 8, dolgu 5px
     `.ts-step-panel` düğümlerini tasarla-adimlar.js SONRADAN kuruyor (tema motoru
     sekmeleri bölene kadar bekliyor) ve kurulum başarısız olursa hiç kurmuyor.
     Yani ızgara, o betiğin yetişip yetişmemesine göre iki farklı geometriyle
     çizilebiliyordu; asimetrik dolgulu tf-light yolunda satır arası ile sütun
     arası GERÇEKTEN farklı oluyor. Mobilde kural artık BURADAN gelir, tek
     geometri: hangi betik yetişirse yetişsin sonuç aynı.

     ── SİMETRİ NASIL GARANTİ EDİLİYOR ─────────────────────────────────────
     Kutuya dolgu YOK ve kutunun en-boy oranı GÖRSELİN oranına eşit; görsel
     kutuyu tam doldurur. Böylece görselden görsele mesafe, iki eksende de
     tam olarak `gap` kadardır -- letterbox payı sıfır.
     ÖLÇÜLDÜ (390×844, 26 Ağustos 2026): çerçeve küçük resimleri 92×131 ve
     alfa taraması gösterdi ki şeffaf kenar boşluğu YOK (dört kenarda da 0),
     yani kutuyu doldurmak deseni kırpmıyor.
     ===================================================================== */
  .tasarla-page #ozel .customizer-form{
    /* KOMUT G3: ÇERÇEVE ızgarası 3 sütun oldu; ARKA PLAN ızgarası 6'da kaldı.
       Bu, "iki ızgara AYNI sütun sayısında" kuralından BİLEREK bir ayrılıştır
       (Kerem G3: "çerçeve ızgarası 3 sütun"). Ayrım GÖRÜNÜR olsun diye iki
       ayrı değişken var; ikisi bir gün yine eşitlenecekse tek satır yeter. */
    --tsm-izgara-sutun:6;
    --tsm-cerceve-sutun:3;
    --tsm-izgara-bosluk:8px;
    /* Çerçeve küçük resmi 92×131 (ölçüldü). Arka plan 96×143; ortak kutuda
       `cover` ile doldurulur -> iki ızgaranın kutusu BİREBİR aynı kalır. */
    --tsm-kutu-oran:92 / 131;
    /* ÇERÇEVE ADI (17 Eylül 2026): çerçeve karosunda oran RESİMDEDİR (etiket satırı
       altına eklenir); karo kutusunun kendi oranı `auto`. Arka plan karosu eskisi gibi.
       Ortak karo kuralı bu değişkenleri okur -- ikinci bir !important yazılmadı. */
    --tsm-kutu-oran-resim:92 / 131;
  }

  .tasarla-page #ozel .customizer-form #frameFamilyGroup,
  .tasarla-page #ozel .customizer-form #tfytBgListe{
    display:grid !important;
    grid-template-columns:repeat(var(--tsm-izgara-sutun), minmax(0, 1fr)) !important;
    gap:var(--tsm-izgara-bosluk) !important;   /* TEK DEĞER: satır = sütun */
    align-content:start;
    /* DİKEY AKIŞ: iç içe kaydırma YOK. Sheet zaten kendi içinde kayıyor;
       ikinci bir kaydırma kutusu 93 arka planı 330px'lik bir pencereye
       sıkıştırıyor ve satırlar ortadan kırpılıyordu (Kerem: "ince yatay
       çizgiler halinde eziliyorlar"). ÖLÇÜLDÜ: sheet 250px iken iç kutu
       330px istiyordu -> tek satır + kırpılmış ikinci satır görünüyordu. */
    max-height:none !important;
    overflow:visible !important;
    padding-right:0 !important;
    margin-bottom:0 !important;
  }
  /* G3: yalniz CERCEVE izgarasi 3 sutun. Ortak blok yukarida duruyor -- burada
     tek bir bildirim eziliyor, ikinci bir geometri yazilmiyor. */
  .tasarla-page #ozel .customizer-form #frameFamilyGroup{
    grid-template-columns:repeat(var(--tsm-cerceve-sutun), minmax(0, 1fr)) !important;
  }

  .tasarla-page #ozel .customizer-form #frameFamilyGroup .tff-frame-family,
  .tasarla-page #ozel .customizer-form #tfytBgListe .tfyt-bg{
    aspect-ratio:var(--tsm-kutu-oran) !important;
    width:auto !important; height:auto !important;
    min-width:0; min-height:0;
    padding:0 !important;
    gap:0 !important;
    display:var(--tsm-karo-goster, block) !important;
    overflow:hidden;
    border-radius:10px !important;
  }
  .tasarla-page #ozel .customizer-form #frameFamilyGroup .tff-frame-family img,
  .tasarla-page #ozel .customizer-form #tfytBgListe .tfyt-bg img{
    width:100% !important; height:var(--tsm-karo-resim-boy, 100%) !important;
    max-width:none !important; max-height:none !important;
    display:block !important;
  }
  /* Çerçeve ŞEFFAF PNG: kırpılamaz -> contain. Oran kutuyla aynı olduğu için
     contain de tam doldurur, letterbox oluşmaz. */
  .tasarla-page #ozel .customizer-form #frameFamilyGroup .tff-frame-family img{
    object-fit:contain !important;
  }
  /* ÇERÇEVE ADI (Kerem, 17 Eylül 2026): küçük resmin ALTINDA tek satırlık ad.
     KÜÇÜK RESİM DEĞİŞMEZ: oran karodan RESME taşındı (aynı --tsm-kutu-oran, aynı
     genişlik -> aynı 113×161 kutu, ölçüldü); karo = resim + 18 px etiket satırı.
     Etiket 12 px (MOB-3 tabanı), tek satır, taşarsa üç nokta; tam ad title'da.
     Ad yoksa düğüm hiç yazılmaz (JS), karo yalnız resimdir. */
  .tasarla-page #ozel .customizer-form #frameFamilyGroup .tff-frame-family{
    --tsm-kutu-oran:auto; --tsm-karo-goster:flex; --tsm-karo-resim-boy:auto;   /* karo oranı auto; resim --tsm-kutu-oran-resim okur */
    flex-direction:column;
  }
  .tasarla-page #ozel .customizer-form #frameFamilyGroup .tff-frame-family img{
    aspect-ratio:var(--tsm-kutu-oran-resim);
    flex:0 0 auto;
  }
  .tasarla-page #ozel .customizer-form #frameFamilyGroup .tff-frame-family .tfyt-cerceve-ad{
    display:block; width:100%; height:18px; line-height:18px; padding:0 4px; box-sizing:border-box;
    font-size:12px; font-weight:600; text-align:center; color:var(--tsm-soluk);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .tasarla-page #ozel .customizer-form #frameFamilyGroup .tff-frame-family.active .tfyt-cerceve-ad{
    color:var(--tsm-vurgu, var(--coral, #E96A4B));
  }
  /* Arka plan FOTOĞRAF: oranı kutudan bir tık dar (96/143). cover ile kutuyu
     doldurur -> "ince şerit" görüntüsü ve boşluk kalmaz. */
  .tasarla-page #ozel .customizer-form #tfytBgListe .tfyt-bg img{
    object-fit:cover !important;
  }
  /* Ad dışında etiket üreten düğüm gelirse ızgarayı bozmasın (çerçeve adı
     `.tfyt-cerceve-ad` -- 17 Eylül 2026'dan beri GÖSTERİLİR; eski "ad yok" kuralı kalktı). */
  .tasarla-page #ozel .customizer-form #frameFamilyGroup .tff-frame-family > span:not(.tfyt-cerceve-ad),
  .tasarla-page #ozel .customizer-form #frameFamilyGroup .tfyt-kilit{
    display:none !important;
  }
  /* [hidden] TUZAĞI: yukarıdaki display kuralları niteliği ezmesin. */
  .tasarla-page #ozel .customizer-form #frameFamilyGroup .tff-frame-family[hidden],
  .tasarla-page #ozel .customizer-form #tfytBgListe .tfyt-bg[hidden]{
    display:none !important;
  }

  /* =======================================================================
     10) YATAY ŞERİT KALIBI (madde 3 + 4)

     "Tema kutuları SABİT genişlikte olacak ve satır YATAY kaydırmalı olacak —
      yeni tema eklendiğinde kutular küçülmeyecek, sadece yatayda kayacak.
      Kaydırma çubuğu gizli, kenarda 'devamı var' ipucu (yumuşak gölge)."
     "Aynı kural, çok öğe içeren tüm yatay şeritler için geçerli."

     ÖLÇÜLDÜ: tema şeridi `grid-auto-columns:1fr` ile çiziliyordu; sabit genişliğe
     ancak `@media (max-width:420px)` içinde geçiyordu. Yani 421–939px arasında
     (birçok telefonun yatayı, katlanabilirler, küçük tabletler) tema sayısı
     arttıkça kutular KÜÇÜLÜYOR ve kesiliyordu. Kural artık tüm mobil aralıkta.
     ===================================================================== */
  /* KOMUT G3: YATAY ŞERİT KURALI YALNIZ ŞERİT HÂLİNE.
     Tema seçici artık iki hâlli: seçim yokken BUTON IZGARASI (sarmalayan),
     seçimden sonra TEK SATIRLIK ŞERİT. Bu kural `flex-wrap:nowrap !important`
     yazdığı için ızgara hâlini de tek satıra sıkıştırıyordu -- temalar yatay
     kayıyor, sonuncusu kenarda kesiliyordu (ekran görüntüsüyle yakalandı).
     Kapsam daraltıldı; `.ps-scroll` (foto stilleri) aynen kalıyor. */
  .tasarla-page #ozel .customizer-form #tab-tema .cs-scroll:not(.tfy-tema-kap--izgara),
  .tasarla-page #ozel .customizer-form .ps-scroll{
    display:flex !important;
    flex-wrap:nowrap !important;
    grid-template-columns:none !important;     /* eski grid tanımını iptal et */
    align-items:flex-start;
    gap:10px !important;
    overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;             /* şeridin sonu sheet'i kaydırmasın */
    scroll-snap-type:x proximity;
    padding-bottom:2px;
    /* KAYDIRMA ÇUBUĞU GİZLİ (Kerem) — davranış duruyor, yalnız çubuk görünmez. */
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .tasarla-page #ozel .customizer-form #tab-tema .cs-scroll::-webkit-scrollbar,
  .tasarla-page #ozel .customizer-form .ps-scroll::-webkit-scrollbar{
    width:0; height:0; display:none;
  }
  /* SABİT GENİŞLİK: `flex:0 0 <ölçü>` -> öğe ne büyür ne küçülür. Yeni tema
     eklenince satır uzar, kutular AYNI kalır. */
  /* KOMUT G3: SABİT GENİŞLİK YENİ TEMA HAPLARINA UYGULANMAZ.
     Bu kural eski `.cs-style` KAROLARI için yazılmıştı (üstte küçük resim,
     altta ad -- sabit genişlikli bir kutu). G3'ün hapları ADLARINA göre
     genişliyor; 84 px'e kilitlenince etiketler taşıp birbirinin üstüne
     biniyordu (ölçüldü: dört hap da 84 px, adlar üst üste).
     `!important` yarışı yerine KAPSAM daraltıldı. */
  .tasarla-page #ozel .customizer-form #tab-tema .cs-scroll > *:not(.tfy-tb){
    flex:0 0 var(--tsm-serit-kutu, 84px) !important;
    width:var(--tsm-serit-kutu, 84px) !important;
    max-width:none !important;
    scroll-snap-align:start;
  }
  .tasarla-page #ozel .customizer-form #tab-tema .cs-scroll > .tfy-tb{
    scroll-snap-align:start;
  }
  .tasarla-page #ozel .customizer-form .ps-scroll > *{
    flex:0 0 auto !important;
    scroll-snap-align:start;
  }
  /* "DEVAMI VAR" İPUCU — yumuşak gölge. Hangi kenarda görüneceğini JS ölçüp
     `data-tsm-devam` ile yazar (yok / sol / sag / iki): şerit sonuna gelince
     ipucu KAYBOLUR, yoksa her zaman duran sahte bir gölge olurdu. */
  .tasarla-page #ozel .customizer-form [data-tsm-devam="sag"]{
    -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
    mask-image:linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
  }
  .tasarla-page #ozel .customizer-form [data-tsm-devam="sol"]{
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 34px);
    mask-image:linear-gradient(to right, transparent 0, #000 34px);
  }
  .tasarla-page #ozel .customizer-form [data-tsm-devam="iki"]{
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
    mask-image:linear-gradient(to right, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
  }

  /* =======================================================================
     11) RENK SHEET'İ — TEK BİLEŞEN (MOBİL FAZ 4, madde 1)

     Kerem: "Renk seçici, mevcut sheet'in İÇİNDE ikinci bir katman olarak değil,
     kendi tam genişlikli sheet'i olarak açılır."

     ÖLÇÜLDÜ (bozuk hâli): her tetiğin kendi `.tff-color-pop`u vardı ve
     tf-sayfa.js onu `position:fixed` ile TETİĞİN YANINA koyuyordu (masaüstü
     popover'ı). Mobilde tetik sheet'in içinde ve sağa yakın -> pop sheet'in
     ÜSTÜNE biniyor, ekranın sağından taşıp KIRPILIYOR ve kapatma yolu yok.

     Burada pop'un KENDİSİ bu sheet'e taşınır (bkz. tasarla-mobil.js renkAc):
     yeni bir renk seçici yazılmaz, tek bileşen korunur. Bu yüzden aşağıdaki
     kuralların ilk işi, masaüstü popover konumlandırmasını ETKİSİZLEŞTİRMEK:
     JS satır içi `position:fixed; left; top` yazıyor, `!important` onu yener. */
  .tasarla-page .tsm-renk-perde{
    position:fixed; inset:0; z-index:1200;
    background:rgba(20,14,18,.5);
    opacity:0; pointer-events:none;
    transition:opacity .2s ease;
  }
  .tasarla-page.tsm-renk-acik .tsm-renk-perde{ opacity:1; pointer-events:auto; }

  .tasarla-page .tsm-renk{
    position:fixed; left:0; right:0; bottom:0;
    z-index:1201;
    max-height:82dvh;
    display:flex; flex-direction:column;
    background:var(--tsm-krem);
    border-radius:20px 20px 0 0;
    box-shadow:0 -14px 40px -18px rgba(0,0,0,.65);
    padding-bottom:var(--tsm-guvenli);
    transform:translateY(100%);
    transition:transform .24s cubic-bezier(.32,.72,.28,1);
    overscroll-behavior:contain;
  }
  .tasarla-page.tsm-renk-acik .tsm-renk{ transform:translateY(0); }
  .tasarla-page .tsm-renk-bas{
    padding:8px 18px 10px;
    touch-action:none; cursor:grab;      /* aşağı çekme jesti tarayıcıya kaçmasın */
  }
  .tasarla-page .tsm-renk-satir{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
  }
  .tasarla-page .tsm-renk-ad{
    margin:0; font-size:17px; font-weight:700; color:var(--tsm-murekkep);
  }
  /* ✓ HEM ONAY HEM KAPAT (Kerem): renk zaten canlı uygulanıyor, bu yüzden
     "onayla" ayrı bir işlem değil -- düğme yalnız sheet'i kapatır. */
  .tasarla-page .tsm-renk-ok{
    flex:none; width:38px; height:38px; border-radius:50%;
    border:0; background:var(--tsm-mercan); color:#FFF6EC;
    font-size:18px; line-height:1; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .tasarla-page .tsm-renk-govde{
    padding:0 18px 18px;
    overflow-y:auto; overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  /* TAŞINAN POP: masaüstü popover kimliğini bırakır, sheet içeriği olur. */
  .tasarla-page .tsm-renk-govde .tff-color-pop{
    position:static !important;
    left:auto !important; top:auto !important; right:auto !important; bottom:auto !important;
    margin:0 !important; z-index:auto !important;
    width:100% !important; max-width:none !important; min-width:0 !important;
    max-height:none !important;
    display:block !important;
    background:none !important; border:0 !important; box-shadow:none !important;
    padding:0 !important;
  }
  .tasarla-page .tsm-renk-govde .tff-color-pop[hidden]{ display:none !important; }
  /* İÇERİK SIRASI (Kerem): SV karesi -> hue -> hex. Markup zaten bu sırada;
     mobilde yalnız ölçüler büyütülür (parmakla kullanılabilsin). */
  .tasarla-page .tsm-renk-govde .tff-sv{
    width:100% !important; height:44vw !important; max-height:230px !important;
    border-radius:14px !important; touch-action:none;
  }
  .tasarla-page .tsm-renk-govde .tff-hue{
    width:100% !important; height:18px !important; margin:16px 0 14px !important;
    touch-action:none;
  }
  .tasarla-page .tsm-renk-govde .tff-color-foot{ gap:12px !important; }
  .tasarla-page .tsm-renk-govde .tff-color-prev{
    width:40px !important; height:40px !important; border-radius:10px !important;
  }
  .tasarla-page .tsm-renk-govde .tff-color-foot input[type="text"]{
    flex:1; min-height:44px; font-size:16px;   /* 16px: iOS odakta sayfayı yakınlaştırmasın */
  }

  /* =======================================================================
     12) YAZININ KONUMUNU AYARLA (MOBİL FAZ 4, madde 2)
     Sürükleme kartın üstünde (tf-yeni-temalar.js), açı burada. Kart/fotoğraf/
     çerçeve bu bölümden ETKİLENMEZ: yalnız yazının kendi transform'u değişir. */
  .tasarla-page #ozel .customizer-form .tfyt-konum-baslik{
    margin-top:12px; display:block; font-weight:700;
  }
  .tasarla-page #ozel .customizer-form .tfyt-aci{
    display:grid; grid-template-columns:44px 1fr 44px; align-items:center; gap:10px;
  }
  .tasarla-page #ozel .customizer-form .tfyt-aci button{
    min-height:44px; border-radius:12px;
  }
  .tasarla-page #ozel .customizer-form .tfyt-aci input[type="range"]{
    width:100%; min-height:44px;         /* dokunma hedefi */
  }

  /* =======================================================================
     15) YAZI RENGİ ÇERÇEVE SEKMESİNDE DURAMAZ (MOBİL FAZ 6, madde 1)

     Kerem: "Çerçeve sekmesine yazı rengi kontrolü sızmış — oradan tamamen
     çıkacak. Yazı rengi yalnızca Yazılar sekmesinde bulunur."

     ── NEDEN SIZIYOR ────────────────────────────────────────────────────
     Blok markup'ta `#tab-design` içinde; tema motoru o paneli OLDUĞU GİBİ
     `#tab-frame` yapıyor (sekmeleriBol) ve yalnız ARKA PLAN alanını dışarı
     taşıyor. Yazı renkleri bölümü orada kalıyor. Bugün onu `tasarla-adimlar.js`
     adım panellerine dağıtırken `#tab-info` altına çekiyor -- ama o betik
     ASENKRON ve yetişemezse (ya da kurYedek'e düşerse) blok Çerçeve
     sekmesinde görünür kalıyor.
     Bu yüzden mobil katman iki yoldan da kapatıyor: düğümü Yazılar sekmesine
     TAŞIYOR (bkz. tasarla-mobil.js yaziRenginiTasi) ve aşağıdaki kural son
     savunma olarak Çerçeve sekmesindeki her kalıntıyı gizliyor. */
  .tasarla-page #ozel #tab-frame #colorFieldWrap,
  .tasarla-page #ozel #tab-frame #forgexiColorFieldWrap,
  .tasarla-page #ozel #tab-frame .tff-field:has(> [data-i18n="cu_text_colors"]){
    display:none !important;
  }

  /* =======================================================================
     13) TAM EKRAN DÜZENLEME KİPİ (MOBİL FAZ 5)

     Kerem'in ayrımı: önizlemenin KENDİSİ sabit kalır (Faz 2), bu AYRI bir kip
     ve YALNIZCA "Fotoğrafı Ayarla" / "Yazıyı Ayarla" düğmeleriyle açılır.

     ── SİYAH EKRAN HATASI (ölçüldü 26 Ağustos 2026) ──────────────────────
     "Fotoğrafı Ayarla" perdeyi (.tfc-edit-scrim, z-index 900) açıyordu; kartın
     öne çıkması ise tf-sayfa.css'teki
        .customizer-preview.tfc-edit-active { position:relative; z-index:1000 }
     kuralına bağlıydı. Ama mobil katmandaki
        .tasarla-page #ozel .customizer-preview
     seçicisi bir ID taşıdığı için ÖZGÜLLÜK YARIŞINI KAZANIYOR -> kanvas
     z-index 30'da kalıyor ve PERDENİN ALTINDA gömülüyor.
     ÖLÇÜLDÜ: kip açıkken kanvas z-index 30, perde 900 ve kartın tam merkezinde
     elementFromPoint -> DIV.tfc-edit-scrim. Yani sahne siyah, kart hem
     görünmez hem dokunulamaz.
     Bu kip artık kendi z düzenini kuruyor ve seçici de ID taşıyor. */
  .tasarla-page.tsm-duzen #ozel .customizer-preview{
    top:0 !important; bottom:0 !important;
    z-index:1300 !important;             /* perde 900, sheet 40, barlar 50 -> hepsinin ÜSTÜ */
    padding-top:calc(64px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom:24px !important;
    align-items:center !important;
    touch-action:none;                   /* jest tarayıcıya kaçmasın */
  }
  /* Kip açıkken alttaki kabuk yok: sheet, sekme çubuğu, CTA ve rozet. */
  .tasarla-page.tsm-duzen #ozel .customizer-form,
  .tasarla-page.tsm-duzen .tsm-sekmeler,
  .tasarla-page.tsm-duzen .tsm-cta,
  .tasarla-page.tsm-duzen .ts-topbar-sol{ display:none !important; }

  /* ÜST BAR — Sıfırla + ipucu + ✓ Tamam. Ekran İÇİNDE (Kerem: "şu an sağdan
     kesiliyorlardı"): sabit, tam genişlik, güvenli alanın altında. */
  .tasarla-page .tsm-duzen-bar{ display:none; }
  .tasarla-page.tsm-duzen .tsm-duzen-bar{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center; gap:10px;
    position:fixed; top:0; left:0; right:0;
    z-index:1310;
    padding:calc(10px + env(safe-area-inset-top, 0px)) 14px 10px;
    background:linear-gradient(180deg, rgba(20,14,18,.94), rgba(20,14,18,.72) 78%, transparent);
  }
  .tasarla-page .tsm-duzen-bar button{
    flex:none; min-height:40px; padding:0 16px;
    border-radius:999px; font:inherit; font-size:14px; font-weight:700;
    cursor:pointer; -webkit-tap-highlight-color:transparent;
    white-space:nowrap;                  /* düğme metni sarmasın, kutu daralmasın */
  }
  .tasarla-page .tsm-duzen-bar .tsm-duzen-sifirla{
    background:rgba(255,246,236,.14); color:#F3E8DC;
    border:1px solid rgba(244,184,96,.34);
  }
  .tasarla-page .tsm-duzen-bar .tsm-duzen-ok{
    background:var(--tsm-mercan); color:#FFF6EC; border:0;
  }
  .tasarla-page .tsm-duzen-ipucu{
    min-width:0;                         /* 1fr sütun İÇERİĞE göre şişmesin */
    text-align:center; font-size:11.5px; line-height:1.25;
    color:#C9B2BD;
    overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  }

  /* SEÇİLİ YAZI kip içinde ince bir çerçeveyle belli olur (Kerem: "birden fazla
     yazı varsa dokunulan yazı seçilir"). Bu kural YALNIZ kipte geçerli ve
     kartın İÇİNDEKİ düğüme yazıldığı için baskıya sızmamalı -> kip kapanınca
     sınıf da düşer, exportCardPng kipte ÇAĞRILMAZ. */
  .tasarla-page.tsm-duzen[data-tsm-duzen="yazi"] .tfyt-serbest.secili{
    outline:1px dashed rgba(244,184,96,.9);
    outline-offset:3px;
  }

  /* =======================================================================
     14) MOBİLDE GEREKSİZ KONTROLLER (Faz 5, madde 3)
     "Yazılar sekmesindeki Boyut kaydırıcısı ve rotate/konum kontrolleri
      mobilde kaldırılacak — bunlar artık parmakla yapılıyor."
     Düğümler SİLİNMEZ, gizlenir: masaüstünde aynen çalışmaya devam ediyor
     (aynı dosya, aynı dinleyiciler) ve karar tek yerden geri alınabilir. */
  .tasarla-page #ozel .customizer-form .tfyt-ek .tfyt-boyut:not(.tfyt-aci),
  .tasarla-page #ozel .customizer-form .tfyt-aci,
  .tasarla-page #ozel .customizer-form .tfyt-konum-baslik,
  .tasarla-page #ozel .customizer-form #tfytAciDeger,
  .tasarla-page #ozel .customizer-form #tfytAciSifirla{
    display:none !important;
  }
  /* "Boyut" ETİKETİ de kaydıraçla birlikte gider. ÖLÇÜLDÜ: yalnız kaydıraç
     gizlenince panelde altı boş bir "BOYUT" başlığı kalıyordu.
     `:has(+ ...)` ile: kendisinden SONRA bir .tfyt-boyut gelen etiket. Açı
     satırının etiketi ayrı (.tfyt-konum-baslik) ve zaten gizli. */
  .tasarla-page #ozel .customizer-form .tfyt-ek label.tfyt-mini:has(+ .tfyt-boyut){
    display:none !important;
  }
  /* YAZI STİLİ de aynı aileden: masaüstü paneline eklendi (mobilde ZATEN
     araç barındaki şeritte var). İki kontrol birden görünmesin -- düğüm
     silinmiyor, ötekiler gibi gizleniyor. Etiketi de kendisiyle gider. */
  .tasarla-page #ozel .customizer-form .tfyt-stiller,
  .tasarla-page #ozel .customizer-form .tfyt-ek label.tfyt-mini:has(+ .tfyt-stiller){
    display:none !important;
  }

  /* =======================================================================
     15) YAZI DÜZENLEME ARAÇ BARI (MOBİL FAZ 7)
     Görsel referans: AI/mochup/ayarla-T1..T4.png
     ======================================================================= */

  /* --- 15a) TEK DOKUNMA KATMANI (Faz 7, madde 3) -----------------------
     ŞİKÂYET: "Kartın üzerinde parmakla büyütme/küçültme takılıyor, özellikle
     parmak ÇERÇEVE alanındayken."

     KÖK NEDEN (ölçüldü): jest motoru kanvasın (.customizer-preview) üstünde
     çok-işaretçili dinliyor, AMA her yazı düğümünün KENDİ `pointerdown`
     dinleyicisi var (tf-yeni-temalar ekYaziSurukle) ve o dinleyici
     `stopPropagation()` çağırıyor. Parmak yazının/çerçevenin üstüne
     düştüğünde olay kanvasa HİÇ ULAŞMIYOR -> kanvas o parmağı saymıyor ->
     iki parmak "tek parmak" gibi görünüyor ve pinch hiç başlamıyor.

     ÇÖZÜM: kipte kanvasın İÇİ tek bir dokunma katmanı olur. Kartın bütün
     çocukları `pointer-events:none` -> isabet testi HER ZAMAN kanvasın
     kendisinde biter; parmak yazının, çerçevenin, fotoğrafın ya da boşluğun
     üstünde olsun fark etmez, olayların TEK sahibi kanvas kalır.
     `!important` şart: ekYaziSurukle yazı düğümüne SATIR İÇİ
     `pointerEvents:'auto'` yazıyor ve satır içi stil normal kuralı ezer.
     Hangi yazıya dokunulduğu yine biliniyor -- seçim `noktadaSec(x,y)` ile
     ÖLÇÜLEREK yapılıyor, dokunma olayıyla değil. */
  .tasarla-page.tsm-duzen[data-tsm-duzen="yazi"] #ozel .customizer-preview *{
    pointer-events:none !important;
    /* `touch-action:none !important` KALDIRILDI (MOB-1, 10 Eylül 2026).
       Yukarıdaki gerekçe `pointer-events` içindi (satır içi `pointerEvents:
       'auto'`u ezmek); `touch-action` için yazılmış bir sebep YOKTU.
       Ve ETKİSİZDİ: bu düğümler `pointer-events:none` olduğu için isabet
       testi hiçbir zaman onlarda bitmiyor, tarayıcı `touch-action`ı İSABET
       EDİLEN düğümden okuyor -- o da kabın kendisi (bir alttaki kural).
       Depodaki tek `!important`lı touch-action buydu; sayı 14'ten 13'e indi
       ve `!important` hiç kalmadı. */
  }
  .tasarla-page.tsm-duzen[data-tsm-duzen="yazi"] #ozel .customizer-preview{
    pointer-events:auto;
  }
  /* Alt pay HER ZAMAN araç barı + şerit kadar: şerit açılıp kapandığında kart
     yerinden oynamasın (JS'teki YAZI_ARAC_H + YAZI_SERIT_H ile AYNI).
     M1: fotoğraf kipinde de bar var -> pay TÜRDEN BAĞIMSIZ. */
  .tasarla-page.tsm-duzen #ozel .customizer-preview{
    padding-bottom:calc(var(--tsm-yz-arac) + var(--tsm-yz-serit) + var(--tsm-guvenli)) !important;
  }

  /* --- 15b) SEÇİM KUTUSU: kesikli çerçeve + dört köşe tutamacı ----------
     KARTIN KARDEŞİ (.tf-custom-card-wrapper > .tsm-yz-kutu), kartın İÇİNDE
     DEĞİL. Bu projede ölçüldü (2026-08-22): kartın içindeki
     `.tfyt-yazi.secili -> outline` baskı PNG'sine sızıyordu, çünkü
     html-to-image kartı olduğu gibi çekip hesaplanan stilleri kopyalıyor. */
  /* FAZ 7B — İKİ ÇERÇEVE DİLİ (mockup Y1):
       seçili yazı  -> kesikli SARI çerçeve + dört köşe tutamacı
       diğer yazılar -> SOLUK İNCE çerçeve, tutamaçsız ("nerede olduklarını
                        görmek için", seçili olanla karışmasın diye sönük)  */
  .tasarla-page .tsm-yz-kutular{ position:absolute; inset:0; pointer-events:none; z-index:7; }
  .tasarla-page .tsm-yz-kutu{
    position:absolute; pointer-events:none;
    border:1px dashed rgba(255,246,236,.28);
    border-radius:4px;
  }
  .tasarla-page .tsm-yz-kutu[hidden]{ display:none; }
  .tasarla-page .tsm-yz-kutu[data-secili="1"]{
    border-color:var(--tsm-bal, #F4B860);
  }
  /* Tutamaçlar YALNIZ seçili kutuda: dört yazının dördünde de tutamaç olsaydı
     hangisinin seçili olduğu okunmazdı. */
  .tasarla-page .tsm-yz-kutu i{ display:none; }
  .tasarla-page .tsm-yz-kutu[data-secili="1"] i{
    display:block;
    position:absolute; width:11px; height:11px; border-radius:50%;
    background:#FFF6EC; border:2px solid var(--tsm-bal, #F4B860);
    box-shadow:0 1px 3px rgba(0,0,0,.4);
  }
  .tasarla-page .tsm-yz-kutu i[data-k="su"]{ left:-6px; top:-6px; }
  .tasarla-page .tsm-yz-kutu i[data-k="sg"]{ right:-6px; top:-6px; }
  .tasarla-page .tsm-yz-kutu i[data-k="au"]{ left:-6px; bottom:-6px; }
  .tasarla-page .tsm-yz-kutu i[data-k="ag"]{ right:-6px; bottom:-6px; }
  /* Faz 5'in kart İÇİNDEKİ kesikli outline'ı EMEKLİ: aynı işi artık kardeş
     kutu yapıyor, iki çerçeve üst üste binmesin. */
  .tasarla-page.tsm-duzen[data-tsm-duzen="yazi"] .tfyt-serbest.secili{
    outline:none;
  }

  /* M1 — "‹" ANA ARAÇ ÇUBUĞUNA DÖN. Araçlarla aynı yükseklikte ama dar:
     bir araç gibi görünmemeli, çıkış olduğu okunmalı. */
  .tasarla-page .tsm-yz-geri{
    flex:0 0 auto; width:40px; height:var(--tsm-yz-arac);
    display:inline-flex; align-items:center; justify-content:center;
    background:none; border:0; padding:0; cursor:pointer;
    color:var(--tsm-mur, #6B5A62);
  }
  .tasarla-page .tsm-yz-geri svg{ width:22px; height:22px; }
  .tasarla-page .tsm-yz-geri:active{ opacity:.6; }
  /* M1 — PARLAKLIK ŞERİDİ: − sürgü + değer. Şeridin sabit yüksekliğine oturur. */
  .tasarla-page .tsm-yz-surgu{
    display:flex; align-items:center; gap:10px; width:100%; padding:0 6px;
  }
  .tasarla-page .tsm-yz-surgu input[type="range"]{ flex:1 1 auto; min-width:0; }
  .tasarla-page .tsm-yz-deger{
    flex:0 0 auto; font-size:.78rem; font-weight:700; color:var(--tsm-mur, #6B5A62);
    font-variant-numeric:tabular-nums;
  }
  .tasarla-page .tsm-yz-cip[aria-pressed="true"]{ border-color:var(--tsm-bal, #F4B860); }

  /* --- 15c) ARAÇ BARI + ŞERİT ------------------------------------------- */
  .tasarla-page{ --tsm-yz-arac:64px; --tsm-yz-serit:58px; }
  .tasarla-page .tsm-yazi-bar{ display:none; }
  /* M1 (KOMUT 4.2): cubuk ARTIK HER NESNE TURUNDE acilir (yazi + foto).
     Secici turden ARINDIRILDI -- ucuncu tur (emoji) geldiginde CSS'e
     dokunmak gerekmesin. */
  .tasarla-page.tsm-duzen .tsm-yazi-bar{
    display:block;
    position:fixed; left:0; right:0; bottom:0;
    z-index:1310;                        /* kanvas 1300, üst bar 1310 */
    background:var(--tsm-krem);
    box-shadow:0 -10px 30px -16px rgba(0,0,0,.55);
    padding-bottom:var(--tsm-guvenli);
  }
  /* İKİNCİ ŞERİT — araç barının ÜSTÜNDE. Yüksekliği SABİT: içeriği
     (yazı tipi adı / renk yuvarlağı / stil kutusu) değişse de bar büyümez,
     yoksa kart her araçta biraz oynardı. */
  .tasarla-page .tsm-yz-serit{
    height:var(--tsm-yz-serit);
    display:flex; align-items:center; gap:8px;
    padding:0 12px;
    overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    border-bottom:1px solid rgba(60,30,45,.10);
  }
  .tasarla-page .tsm-yz-serit::-webkit-scrollbar{ display:none; }
  .tasarla-page .tsm-yz-serit[hidden]{ display:none; }

  /* M1 (KOMUT 4.2): sirada ARTIK 7 oge var -- "<" (geri) + 5 arac + onay.
     ESKI SABLON `repeat(5,1fr) 56px` idi ve yedinci oge IKINCI SATIRA
     dusuyordu: onay dugmesi ekrandan kayboluyordu (olculdu, 390x844: onay
     left=11.4 -- yani alt satirda). Sablon artik iki UCU sabit, ortadaki
     araclari esit boluyor. */
  .tasarla-page .tsm-yz-araclar{
    height:var(--tsm-yz-arac);
    display:grid; grid-template-columns:40px repeat(5, minmax(0,1fr)) 56px;
    align-items:center;
  }
  .tasarla-page .tsm-yz-arac{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; min-width:0; height:100%;
    background:none; border:0; padding:0;
    color:var(--tsm-soluk);
    cursor:pointer; -webkit-tap-highlight-color:transparent;
  }
  .tasarla-page .tsm-yz-arac svg{ width:22px; height:22px; }
  .tasarla-page .tsm-yz-ad{
    font-size:10.5px; font-weight:700; line-height:1;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
  }
  .tasarla-page .tsm-yz-arac[aria-pressed="true"]{ color:var(--tsm-mercan); }
  /* ✓ — üst bardaki "Tamam" ile aynı iş (mockup'ta ikisi de var). */
  .tasarla-page .tsm-yz-ok{
    justify-self:center;
    width:44px; height:44px; border-radius:50%;
    background:none; border:1.5px solid rgba(60,30,45,.22);
    color:var(--tsm-murekkep); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    -webkit-tap-highlight-color:transparent;
  }
  .tasarla-page .tsm-yz-ok svg{ width:22px; height:22px; }

  /* --- 15d) ŞERİT ÖĞELERİ ----------------------------------------------- */
  .tasarla-page .tsm-yz-cip{
    flex:none; min-height:38px; padding:0 14px;
    border-radius:10px; border:1px solid rgba(60,30,45,.18);
    background:#FFFDFA; color:var(--tsm-murekkep);
    font:inherit; font-size:15px; line-height:1;
    cursor:pointer; -webkit-tap-highlight-color:transparent;
    white-space:nowrap;
  }
  .tasarla-page .tsm-yz-cip[data-on="1"]{
    border-color:var(--tsm-mercan); color:var(--tsm-mercan);
  }
  /* ARKA PLAN ÇİPİNİN ÜÇ HÂLİ (bkz. tasarla-mobil.js fotoSeritArkaplan).
     "Kaldırılıyor" hâli çipi SİLMEZ: yerinde, pasif ve nabız gibi soluklaşan
     bir bekleme. Model müşterinin telefonunda koşuyor ve ilk seferde dakikayı
     bulabiliyor -- bekleme görünür olmazsa iş "çalışmıyor" sanılıyor
     (ölçüldü, 1 Eylül 2026). */
  .tasarla-page .tsm-yz-bg[data-bg="acik"]{
    border-color:var(--tsm-sekme-tik, #2F9E5F); color:var(--tsm-sekme-tik, #2F9E5F);
  }
  .tasarla-page .tsm-yz-bg[data-bg="isliyor"]{
    border-color:var(--tsm-mercan); color:var(--tsm-mercan);
    cursor:default; animation:tsmBgBekle 1.1s ease-in-out infinite alternate;
  }
  @keyframes tsmBgBekle{ from{ opacity:1; } to{ opacity:.55; } }
  /* Yazı tipi kutusu KENDİ fontuyla yazılır (mockup T2) -> punto biraz daha
     büyük, çünkü bazı aileler (Allura gibi) küçük puntoda okunmuyor. */
  .tasarla-page .tsm-yz-font{ font-size:17px; padding:0 16px; }
  /* TAŞINAN SEÇİM (başka temadan gelen yazı tipi) şeridin başında durur ve
     seçili görünür. Küçük bir nokta onu tema listesinden AYIRIR -- yoksa
     müşteri temanın altıncı bir fontu varmış sanır. Etiketi değiştirmiyoruz:
     her kutu KENDİ fontuyla yazılmalı (mockup T2). */
  .tasarla-page .tsm-yz-font[data-mevcut="1"]{ position:relative; }
  .tasarla-page .tsm-yz-font[data-mevcut="1"]::after{
    content:''; position:absolute; top:5px; right:6px;
    width:5px; height:5px; border-radius:50%;
    background:var(--tsm-mercan);
  }
  /* Stil kutusu KENDİ stilini gösterir (mockup T4): müşteri adı okumadan da
     ne olacağını görür. Değerler tf-card.css'teki kurallarla aynı FİKİRDE
     (em tabanlı) ama burası yalnız ÖNİZLEME kutusu -- baskıya giden tanım
     tf-card.css'te, tek yerde. */
  .tasarla-page .tsm-yz-stil{ font-weight:800; }
  .tasarla-page .tsm-yz-stil[data-s="golge"]{
    text-shadow:0 1px 2px rgba(0,0,0,.55), 0 0 3px rgba(0,0,0,.35);
  }
  .tasarla-page .tsm-yz-stil[data-s="kontur"]{
    color:#FFFDFA;
    text-shadow:.05em 0 0 #3A2230, -.05em 0 0 #3A2230, 0 .05em 0 #3A2230, 0 -.05em 0 #3A2230;
  }
  .tasarla-page .tsm-yz-stil[data-s="zemin"]{
    background:#3A2230; color:#FFF6EC; border-color:#3A2230;
  }
  .tasarla-page .tsm-yz-tehlike{
    border-color:rgba(190,60,50,.5); color:#B33B30; font-weight:700;
  }
  /* Renk kartelası — yatay YUVARLAKLAR (mockup T3). */
  .tasarla-page .tsm-yz-renk{
    flex:none; width:34px; height:34px; border-radius:50%;
    border:1.5px solid rgba(60,30,45,.22); padding:0;
    cursor:pointer; -webkit-tap-highlight-color:transparent;
  }
  .tasarla-page .tsm-yz-renk[data-on="1"]{
    box-shadow:0 0 0 2px var(--tsm-krem), 0 0 0 4px var(--tsm-mercan);
  }
  /* İLK yuvarlak = ÖZEL RENK. Gökkuşağı, dokununca FAZ 4'ün renk seçici
     sheet'i açılır -- o bileşen yeniden yazılmadı, aynı düğüm taşınıyor. */
  .tasarla-page .tsm-yz-ozel{
    background:conic-gradient(#F2453D,#F2A33D,#EFE53B,#5BD16A,#3DB7F2,#6E5BF2,#EF54C8,#F2453D);
  }
  .tasarla-page .tsm-yz-girdi{
    flex:1; min-width:0; min-height:40px; padding:0 12px;
    border-radius:10px; border:1px solid rgba(60,30,45,.2);
    background:#FFFDFA; color:var(--tsm-murekkep);
    font:inherit; font-size:16px;        /* 16px: iOS odakta sayfayı yakınlaştırmasın */
  }
  .tasarla-page .tsm-yz-sor{
    flex:none; font-size:14px; color:var(--tsm-murekkep); padding-right:4px;
  }

  /* --- 15f) KATMAN ŞERİDİ + ＋ DÜĞMESİ (FAZ 7B) -------------------------
     Şerit YUVASI tek ve sabit yükseklikte; içeriği araç seçiliyse o aracın
     şeridi, değilse katman şeridi. Yükseklik değişmediği için kart hiçbir
     durumda oynamıyor. */
  /* ＋ — giriş kutusunun YANINDA, yuvarlak (mockup Y2). */
  .tasarla-page .tsm-yz-arti{
    flex:none; width:40px; height:40px; border-radius:50%;
    border:0; padding:0; background:var(--tsm-mercan); color:#FFF6EC;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; -webkit-tap-highlight-color:transparent;
  }
  .tasarla-page .tsm-yz-arti svg{ width:22px; height:22px; }
  .tasarla-page .tsm-yz-arti[aria-disabled="true"]{ opacity:.42; }
  /* "+ Yazı ekle" çipi — kesikli kenarlık, mercan yazı (mockup Y1). */
  .tasarla-page .tsm-yz-katman-ekle{
    border-style:dashed; border-color:var(--tsm-mercan);
    color:var(--tsm-mercan); font-weight:700;
  }
  .tasarla-page .tsm-yz-katman-ekle[aria-disabled="true"]{ opacity:.45; }
  /* Katman çipi: numara madalyonu + metnin ilk kelimesi. */
  .tasarla-page .tsm-yz-katman{
    display:flex; align-items:center; gap:8px; padding:0 12px 0 6px;
  }
  .tasarla-page .tsm-yz-no{
    flex:none; width:22px; height:22px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:rgba(60,30,45,.10); color:var(--tsm-soluk);
    font-size:12px; font-weight:700; line-height:1;
  }
  .tasarla-page .tsm-yz-katman[data-on="1"] .tsm-yz-no{
    background:var(--tsm-mercan); color:#FFF6EC;
  }
  .tasarla-page .tsm-yz-katman-ad{
    max-width:11ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .tasarla-page .tsm-yz-katman[data-on="1"]{ font-weight:700; }
  /* Yazı kalmayınca araçlar SOLUK (silinmiyor: durum geçici, "+ Yazı ekle"
     ile geri gelinir). */
  .tasarla-page .tsm-yz-arac[aria-disabled="true"]{ opacity:.4; }

  /* --- 15e) RENK SHEET'İ KİPİN ÜSTÜNDE ---------------------------------
     Sheet 1201'de duruyordu; kip kanvası 1300, barlar 1310 -> özel renk
     seçici kartın ALTINDA kalırdı (Faz 5'teki siyah ekran hatasının aynı
     ailesi: z düzeni kip kurulunca yeniden yazılmalı). */
  .tasarla-page.tsm-duzen .tsm-renk-perde{ z-index:1320; }
  .tasarla-page.tsm-duzen .tsm-renk{ z-index:1330; }
}

/* Yalnız mobilde görünen düğümler masaüstünde GİZLİ (bu dosya /tasarla'ya
   yüklü; kural medya bloğunun DIŞINDA olduğu için geniş ekranda da geçerli). */
.tsm-yalniz{ display:none; }
@media (max-width: 939px){
  .tasarla-page #ozel .customizer-form .tsm-yalniz{ display:block; }
}

/* Masaüstünde bu katmanın hiçbir kuralı çalışmaz; JS'in kurduğu düğümler de
   görünmez (mobilde kurulur, geniş ekranda gizlenir). */
@media (min-width: 940px){
  /* `.tsm-kapat` (tam ekran ✕) Faz 2'de emekli oldu -> listede yok. */
  .tsm-sekmeler, .tsm-cta, .tsm-baslik, .tsm-toast,
  .tsm-yazi-bar, .tsm-yz-kutu, .tsm-boyut-alan{ display:none !important; }
}

/* ═══ KOMUT G3 · TEMA SEÇİCİ MOBİLDE DE PAYLAŞILAN BİLEŞEN ════════════════
   KOMUT E'de mobile özel bir şerit (`.tsm-tema-serit`) eklenmişti ve o turda
   `#cardStylePicker` mobilde gizlenmişti. G3 seçiciyi İKİ yüzeyde birden aynı
   bileşene taşıdı (assets/js/tf-tema-butonu.js + assets/css/tf-tema-butonu.css),
   bu yüzden mobile özel şerit KALDIRILDI ve gizleme GERİ ALINDI -- artık iki
   seçici birden yok, tek seçici var.
   E'nin ölçülmüş kuralları bileşene taşındı: tek satır, yatay kaydırma,
   kenarda yumuşama, seçili hap görünür alana, dokunma hedefi 44 px. */

@media (max-width: 939px){
  /* ÇERÇEVE IZGARASI SEÇİM YAPILANA KADAR GÖRÜNMEZ.
     `hidden` NİTELİĞİ TEK BAŞINA YETMİYOR: `#frameFamilyGroup` bu dosyada ve
     tasarla-sahne.css'te `display:grid !important` alıyor ve nitelik eziliyor
     (ölçüldü: seçim yokken mobilde 4 karo görünüyordu). Masaüstünde aynı işi
     aşama sistemi yapıyor (masaüstünün "bekliyor" adımı). */
  .tasarla-page #ozel .customizer-form #frameFamilyGroup[hidden],
  .tasarla-page #ozel .customizer-form .tff-field[hidden]{ display:none !important; }

  /* "Çerçeve" ETİKETİ MOBİLDE GİZLİ: şerit ızgaranın hemen üstünde durmalı,
     araya giren her düğüm o komşuluğu bozar. */
  .tasarla-page #ozel .customizer-form #tab-tema .tff-field > label{ display:none; }
}

/* ═══ KOMUT F · MOBİL ÖNİZLEME OKLARI ═════════════════════════════════════
   Referans: AI/mochup/oklar.png — "D · YALIN OK" sütunu.

   KATMAN KARTIN KARDEŞİ, İÇİNDE DEĞİL: `.customizer-preview` ölçeksiz
   barınaktır. Kartın içine konsaydı ölçek ikinci kez uygulanır (44 px hedef
   küçülür) ve düğümler baskı PNG'sine sızardı.

   YALNIZ TEMA ARACINDA: ÖLÇÜLDÜ (390x844) Tema aracında kart 123x175 ve iki
   yanda 134/133 px boş alan var; Yazı aracında kart 382x545'e çıkıyor ve
   yanlarda yalnız 4 px kalıyor -- oklar orada kartı ÖRTERDİ. Görünürlük
   mobil katmanın kendi yazdığı `data-tsm-sekme` niteliğine bağlı; o dosyaya
   hiç dokunulmadı. */
.tsm-ok-katman{ display:none; }

@media (max-width: 939px){
  /* F2: KATMANIN GÖRÜNÜRLÜĞÜNÜ ARTIK JS SÖYLER (`data-ok-goster`).
     Eskiden `[data-tsm-sekme="tema"]` idi; o nitelik yalnız ÇEKMECE AÇIKKEN
     yazılıydı ve tek bir aracı anlatıyordu. Yeni kural iki şeye birden bakıyor
     (seçili araç + çekmece kapalı mı) ve o karar tek yerde, kapsam tablosunda
     veriliyor -- CSS'te ikinci bir araç listesi tutulmaz. */
  .tasarla-page #ozel .customizer-preview .tsm-ok-katman[data-ok-goster="1"]{
    display:flex !important;
    position:absolute; inset:0;
    align-items:center; justify-content:space-between;
    /* YAN PAY ARTIK ÖLÇÜLÜR (Kerem, 2 Eylül 2026): "oklar sadece biraz kart
       görselinden uzaklaşmalı, bazı tasarımlarda üstüne biniyor."
       Sabit 44 px, kart ÇEKMECE AÇIKKEN 123 px genişken ölçülmüştü; oklar
       F2-8'den beri yalnız çekmece KAPALIYKEN var ve orada kart temaya göre
       281-335 px arasında değişiyor. Payı JS kartın O ANKİ kutusundan yazıyor
       (bkz. tasarla-mobil.js `okPayiYaz`); buradaki 44 px yalnız geri düşüş. */
    padding:0 var(--tsm-ok-pay, 44px);
    transition:padding .2s ease;
    /* KARTIN JESTLERİ BOZULMAZ: katman kartın üstüne uzanıyor ama olayları
       GEÇİRİYOR; yalnız düğmelerin kendisi olay alıyor. KOMUT 4 pointer
       motoru bu yüzden hiçbir şey fark etmiyor. */
    pointer-events:none;
    z-index:6;
  }
  /* DÜZENLEME KİPİNDE (tam ekran foto/yazı) OK YOK.
     F-2'nin ölçümüyle aynı gerekçe: o kipte kart neredeyse tam ekran ve
     yanlarda ok için yer kalmıyor -- oklar kartın ÜSTÜNE binerdi. Eskiden bu
     durum kendiliğinden oluşuyordu (kipe yalnız Fotoğraf aracından
     giriliyordu, Fotoğraf'ın ok kapsamı da yok); ama seçili araç Tema iken de
     kipe girilebiliyor (kanvasta fotoğrafa dokunmak) ve o yol ölçüldüğünde
     oklar kartın üstünde çıkıyordu. Kural artık kipin KENDİSİNE bağlı. */
  .tasarla-page.tsm-duzen #ozel .customizer-preview .tsm-ok-katman{
    display:none !important;
  }
}
/* ══════════════════════════════════════════════════════════════════════════
   OKLARIN GÖRÜNÜMÜ KATMANDAN BAĞIMSIZDIR (Kerem, 4 Eylül 2026)

   "bu mobildeki previewda çerçeve değiştirme okları web sürümüne de gelsin."

   O günden beri oklar İKİ katmanın yüzeyinde birden duruyor. Bölünme şöyle:
     YERLEŞİM  her katmanda ayrı ve kendi medya sorgusunda
                 mobil     : yukarıdaki blok (kanvasa yayılır, `--tsm-ok-pay`)
                 masaüstü  : tasarla-masaustu.css (kart genişliğinden türer)
     GÖRÜNÜM   TEK, ve bu yüzden medya sorgusunun DIŞINDA (aşağısı)

   Görünümü ikinci kez yazmak bu depoda ölçülmüş bir tuzak: ikiz kurallar
   sessizce ayrışıyor ve fark yalnız TEK yüzeyde görünüyor (bkz.
   tests/onizleme-baski-harf-duzeni.test.js -- aynı sınıfın iki kopyası
   yüzünden önizleme ile baskı ayrışmıştı). Bu yüzden düğmenin ölçüsü, zemini,
   chevronu, basılı/pasif hâlleri ve gösterge tek yerde duruyor.

   SINIF ADI TARİHSEL: `tsm-` = tasarla-mobil. Yeniden adlandırmak JS, CSS ve
   üç nöbetçiyi birden kırardı; ad değil SAHİPLİK önemli ve o burada yazılı.
   ════════════════════════════════════════════════════════════════════════ */
  /* DOKUNMA HEDEFİ 44x44, GÖRÜNEN OK 18 px.
     ═══ SÖZLEŞME DEĞİŞTİ (Kerem, 1 Eylül 2026) ═══════════════════════════
     Eski duruş "D · YALIN OK"tu: zemin yok, gölge yok, çerçeve yok, yalnız
     #E8DCD2 ince chevron. Kerem'in geri bildirimi: "Preview kısmında (büyük
     haldeyken) previewun sağ ve solundaki oklar BELLİ OLMUYOR; onları
     yuvarlak şık bir buton şeklinde yapabiliriz."
     Neden gerçekten belli olmuyordu: oklar kartın iki yanındaki KOYU kanvasın
     üstünde duruyor ve kart büyüdükçe (Tema aracı dışındaki geniş hâllerde)
     arkalarında yüksek kontrastlı çerçeve dokusu kalıyor -- 1.8 px'lik açık
     bej bir çizgi o zeminde kayboluyor.
     YENİ DURUŞ: 44 px'lik dokunma hedefinin KENDİSİ yuvarlak bir düğme.
     Koyu yarı saydam zemin + ince açık kenar + yumuşak gölge okun ARKASINI
     her zemin üstünde sabitliyor; chevron aynı aileden (yalnız 15 -> 18 px ve
     2 px kalınlık). Katman hâlâ olay geçirir, düğme hâlâ 44x44 -- KOMUT F'nin
     geometri ve jest sözleşmesi DEĞİŞMEDİ. */
  .tasarla-page #ozel .customizer-preview .tsm-ok{
    pointer-events:auto;
    width:44px; height:44px;
    display:inline-flex; align-items:center; justify-content:center;
    padding:0; margin:0;
    border-radius:999px;
    background-color:rgba(26,15,22,.52);
    border:1px solid rgba(255,246,236,.26);
    box-shadow:0 2px 12px -2px rgba(0,0,0,.45);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    color:#FFF6EC;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:color 140ms ease, opacity 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
  }
  /* F2-4/F2-5: OK OLMAYAN ARAÇTA DÜĞME HİÇ ÇİZİLMEZ.
     `!important` şart: yukarıdaki `display:inline-flex` tarayıcının kendi
     `[hidden]{display:none}` kuralını EZİYOR -- `hidden` niteliği tek başına
     düğmeyi gizlemeye yetmez, ölçülerek görüldü. */
  .tasarla-page #ozel .customizer-preview .tsm-ok[hidden]{ display:none !important; }
  .tasarla-page #ozel .customizer-preview .tsm-ok svg{
    width:18px; height:18px;
    stroke-width:2;
  }

  /* BASILI: düğme AYDINLANIR + arkasında yumuşak bir halka. Ayrı bir düğüm
     değil -- zemin + `box-shadow` ile; fazladan bir katman kartın üstünde bir
     kutu daha demek olurdu. */
  .tasarla-page #ozel .customizer-preview .tsm-ok:active:not([disabled]){
    color:#FFF6EC;
    background-color:rgba(255,246,236,.22);
    box-shadow:0 0 0 6px rgba(255,246,236,.08);
  }

  /* PASİF: uçlarda. Basılma geri bildirimi YOK (yukarıdaki kural
     `:not([disabled])` ile korunuyor) -- döngü olmadığı belli olsun. */
  .tasarla-page #ozel .customizer-preview .tsm-ok[disabled]{
    opacity:.3;
    cursor:default;
  }

  /* F2-3 · KAPSAM GÖSTERGESİ — kartın ALTINDA (ölçüldü, aşağıdaki gerekçe).
     "TEMA · çerçeve 12 / 39" · "ARKA PLAN · 3 / 8" · Foto/Yazı'da sessiz ipucu. */
  .tasarla-page #ozel .customizer-preview .tsm-ok-sayac{
    /* `top` JS'ten OLCULEREK yazilir (bkz. tf-yeni-temalar sayaciYaz); buradaki
       deger yalniz ilk kare icin makul bir baslangictir. */
    position:absolute; left:0; right:0; top:10px;
    text-align:center;
    /* KOMPAKT: kartin ustunde ONIZLEME rozetiyle kart arasinda OLCULEN
       bosluk 22 px (rozet 106'da bitiyor, kart 127'de basliyor). 0.72rem +
       varsayilan satir yuksekligi 18 px'lik bir kutu yapiyordu ve sayac
       rozetin altina giriyordu -- piksel ornegiyle yakalandi. */
    font-size:0.64rem; line-height:1; letter-spacing:.06em;
    color:rgba(232,220,210,.55);
    pointer-events:none;
    /* Uzun ipucu satırı kartın yanına taşmasın: tek satır, gerekirse kırpılır.
       Kartın ÜSTÜNE hiçbir durumda binmez -- yeri JS'te ölçülüyor ve altta yer
       yoksa gösterge hiç çizilmiyor. */
    padding:0 12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  /* SESSİZ HÂL: ok olmayan araçta (Fotoğraf/Yazılar) ve gezilecek liste
     boş/tek öğeliyken. Sayaçtan bir tık daha soluk ve versalsız. */
  .tasarla-page #ozel .customizer-preview .tsm-ok-sayac[data-sessiz]{
    color:rgba(232,220,210,.42);
    letter-spacing:.02em;
  }

  /* F-4 · İPUCU: Tema aracı ilk kez açıldığında oklar bir kez kıpırdar
     (±3 px, 400 ms). Kullanıcı bir kez ok kullandıysa JS bu sınıfı hiç
     eklemez; `prefers-reduced-motion` altında da eklenmez, ayrıca aşağıdaki
     medya bloğu animasyonu büsbütün kapatır (iki taraflı güvence). */
  .tasarla-page .tsm-ok-katman.tsm-ok-ipucu .tsm-ok-sol{ animation:tsmOkIpucuSol 400ms ease-in-out 1; }
  .tasarla-page .tsm-ok-katman.tsm-ok-ipucu .tsm-ok-sag{ animation:tsmOkIpucuSag 400ms ease-in-out 1; }
  @keyframes tsmOkIpucuSol{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(-3px); } }
  @keyframes tsmOkIpucuSag{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(3px); } }

  /* F-5 · YUMUŞAK GEÇİŞ SARMALAYICIDA, KARTTA DEĞİL.
     `renderElementToPng` KARTI çekiyor; sarmalayıcı onun ATASI, yani çekime
     girmiyor. Geçiş kartın kendi opaklığına yazılsaydı çekim geçişin
     ORTASINDA yakalandığında yarı saydam bir çerçeve basardı. */
  .tasarla-page #ozel .customizer-preview .tf-custom-card-wrapper.tsm-ok-gecis{
    animation:tsmOkGecis 180ms ease-out 1;
  }
  @keyframes tsmOkGecis{ 0%{ opacity:.35; } 100%{ opacity:1; } }

@media (prefers-reduced-motion: reduce){
  .tasarla-page .tsm-ok-katman.tsm-ok-ipucu .tsm-ok-sol,
  .tasarla-page .tsm-ok-katman.tsm-ok-ipucu .tsm-ok-sag,
  .tasarla-page #ozel .customizer-preview .tf-custom-card-wrapper.tsm-ok-gecis,
  .tasarla-page .tsm-yz-bg[data-bg="isliyor"]{
    animation:none !important;
  }
}

/* ═════════════════════════════════════════════════════════════════════════
   MOB-3 · DOKUNMA HEDEFLERİ, KOMŞU BOŞLUĞU VE TİPOGRAFİ TABANI
                                                   (Kerem, 10 Eylül 2026)

   TEK BLOK, YENİ `!important` YOK. Çakışmalar seçici özgüllüğüyle çözüldü
   (`.tasarla-page` + kimlik/sınıf). Düzen değişmiyor: sekme çubuğu, panel ve
   alt bar yerinde; yalnız DOKUNMA ALANI büyüyor ve taban punto yükseliyor.

   ⚠ ÖNCE ÖRTÜŞME ÇÖZÜLDÜ (madde 1) — VE ÖRTÜŞME YOKTU
   MOB-0 "65 hedef örtüşüyor" diyordu. Gruplayınca ikiye ayrıldı:
     (a) ÖLÇÜM KUSURU: dedektör "boşluk sıfır"ı örtüşme sayıyordu. Sekme
         çubuğunun dört düğmesi satırı TAM bölüyor (0..97.5, 97.5..195, ...)
         -- kenarlar DEĞİYOR, alan kesişmiyor. Ölçülen kesişim: 0,0 px.
     (b) KATMANLAR ARASI: kalanların HEPSİ aynı anda etkileşimli olmayan
         düğümlerdi -- KAPALI sepet çekmecesi (`cart-drawer-footer`,
         `acc-sizes`), KAPALI menüdeki dil düğmesi (`tf-ortak-dil`) ve
         panelin sabit çubukların ALTINDAN geçen içeriği (`cs-scroll`,
         `photoStyleScroll`).
   Ölçüt gerçek alan kesişimine + `elementFromPoint` ulaşılabilirliğine
   çevrilince AYNI KATMANDA ÖRTÜŞEN TEK BİR HEDEF KALMADI (0).
   Yani büyütme örtüşmeyi artırmıyor; büyütülecek zemin temiz.

   BÜYÜTME `::before` İLE, GÖRSEL BOYUT SABİT
   Dokunma alanı görünmez bir katman; ikon, punto ve görsel ağırlık aynı
   kalıyor. Hedeflerin hiçbirinde `::before` kullanılmıyordu (denetlendi).

   KOMŞULUK KURALI: iki dokunma alanı ÜST ÜSTE BİNMEMELİ. Adım (pitch)
   44'ün altındaysa kabın boşluğu yükseltiliyor; 44'e ulaşan komşular
   kenar kenara oturur. 8 px kuralı KÜÇÜK hedefleri korumak içindir --
   ikisi de 44+ olan bitişik hedefler (sekme çubuğu, araç barı, kartela)
   o kuralın kapsamı dışında ve ölçüm bunu adıyla muaf tutuyor.
   ═════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ---- 1) GÖRÜNMEZ DOKUNMA ALANI ------------------------------------- */
  .tasarla-page #accountBtn,
  .tasarla-page #cartBtn,
  .tasarla-page #menuToggle,
  .tasarla-page #randomizeAllBtn,
  .tasarla-page #tfFiEksi,
  .tasarla-page #tfFiArti,
  .tasarla-page #tfFiSifirla,
  .tasarla-page .tfFi-anahtar,
  .tasarla-page .tff-swatch,
  .tasarla-page #bgColorTrigger,
  .tasarla-page .tsm-duzen-ok,
  .tasarla-page .tsm-duzen-sifirla,
  .tasarla-page .tsm-yz-cip,
  .tasarla-page .brand,
  .tasarla-page .tsm-yz-geri,
  .tasarla-page .tsm-yz-ok { position: relative; }

  .tasarla-page #accountBtn::before,
  .tasarla-page #cartBtn::before,
  .tasarla-page #menuToggle::before,
  .tasarla-page #randomizeAllBtn::before,
  .tasarla-page #tfFiEksi::before,
  .tasarla-page #tfFiArti::before,
  .tasarla-page #tfFiSifirla::before,
  .tasarla-page .tfFi-anahtar::before,
  .tasarla-page .tff-swatch::before,
  .tasarla-page #bgColorTrigger::before,
  .tasarla-page .tsm-duzen-ok::before,
  .tasarla-page .tsm-duzen-sifirla::before,
  .tasarla-page .tsm-yz-cip::before,
  .tasarla-page .brand::before,
  .tasarla-page .tsm-yz-geri::before,
  .tasarla-page .tsm-yz-ok::before {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    min-width: 44px; min-height: 44px;
    /* Görünmez ve ÇİZİM DÜZENİNİ BOZMAZ: yalnız isabet testine girer. */
    background: transparent;
    /* ⚠ YARIÇAP YOK — TAM DİKDÖRTGEN. Önce `border-radius: inherit` vardı
       ("alan da düğmenin şeklini izlesin" diye) ve ÖLÇÜM ÇÜRÜTTÜ: yuvarlak
       düğmede alanın KÖŞELERİ kesiliyor, (±21, ±21) noktaları hedefe
       gitmiyordu -- kenarlar isabet alıyor, köşeler almıyordu. Alan görünmez;
       şekli izlemesinin bir kazancı yok, kaybı ise dokunma alanının dörtte
       biri. */
    pointer-events: auto;
  }

  /* ---- 2) ADIM 44'E ÇIKAR: dokunma alanları üst üste binmesin --------- */
  /* Başlık düğmeleri 40 px ve aralarında 4 px vardı -> adım 44, yani 44'lük
     alanlar TAM oturuyor. Boşluk büyütülmedi: büyütülseydi başlık genişler
     ve düzen kayardı (kural: düzen değişmez). */
  /* Kartela: 24 px yonga + 7 px boşluk = adım 31 -> 44'lük alanlar 13 px
     BİNİYORDU. Boşluk 20'ye çıkıyor (adım 44). Yonganın GÖRSEL boyutu
     24 px kalıyor; değişen yalnız aradaki nefes. */
  .tasarla-page .tff-swatches { gap: 20px; }
  /* Başlık düğmeleri: 40 px + 4 px boşluk = adım 44. Kesirli yerleşimde
     (Pixel 7, DPR 2,625) adım 44'ün ALTINA düşüyor ve 44'lük alanlar
     komşunun üstüne biniyordu -- ölçüldü, iPhone'da geçen `#cartBtn` ve
     `#accountBtn` orada kalıyordu. Boşluk 6'ya çıkıyor: adım 46, alanlar
     arasında 2 px nefes kalıyor ve hiçbir yerde binmiyor. */
  .tasarla-page .nav-actions { gap: 6px; }

  /* ---- 3) TİPOGRAFİ TABANI ------------------------------------------- */
  /* Gövde metni 15 px, etiket 12 px altına inemez. Masaüstü değerleri bu
     bloğun dışında ve DEĞİŞMİYOR. */
  .tasarla-page .tsm-etiket,
  .tasarla-page .ts-onizleme-et,
  .tasarla-page .acc-head,
  .tasarla-page .tf-ortak-dil button { font-size: 0.78rem; }
  .tasarla-page #cartBadge,
  .tasarla-page .cart-aks-count { font-size: 0.75rem; }
  /* ETİKET TABANI 12 px.
     ⚠ ROZET VE TİK KAPSAM DIŞI (Kerem, 10 Eylül 2026): `.fp-badge` ("YENİ")
     ve `.tsm-tik` ("✓") METİN DEĞİL, İŞARETTİR -- bir sayaç rozeti ya da
     tamamlanma tiki okunacak bir cümle değil, bir durum simgesidir. Punto
     tabanı okunabilirlik için; simgeye uygulamak onları düğmenin dengesini
     bozacak kadar büyütürdü. Ölçüm bunları ADIYLA muaf tutuyor.

     ALAN BAŞLIĞI: `tasarla-adimlar.css:229` onu 11.5 px'e sabitliyor ve o
     seçici DAHA ÖZGÜL (0-3-2). Yeni `!important` eklemek yerine AYNI ŞEKLİ
     bir sınıf daha ekleyerek eşliyoruz (0-4-2) -- kural aynı yerde kalıyor,
     yalnız mobilde tabanı yükseliyor. */
  .tasarla-page .ts-step-panel .tff-field > label:first-child:not(:has(input, select, textarea)) {
    font-size: 0.78rem;
  }

  /* GÖVDE METNİ TABANI 15 px (0.94rem). Ölçümde 15'in altında kalan son
     dokuz gövde metni; etiket sayılanlar 12 px tabanıyla yetiniyor. */
  .tasarla-page .ts-topbar-sol .ts-onizleme-not,
  .tasarla-page .ps-name,
  .tasarla-page #tfFiSifirla,
  .tasarla-page .tsm-baslik-not,
  .tasarla-page .tff-help,
  .tasarla-page #psHint,
  .tasarla-page .fp-switch-alt,
  .tasarla-page .tff-bgremove-label,
  .tasarla-page .acc-size span,
  .tasarla-page .tfFi-anahtar span,
  .tasarla-page .hs-lineup-foot,
  .tasarla-page .tfc-foto-cagri-yazi,
  .tasarla-page #tsmOkSayac,
  .tasarla-page .tsm-fiyat-boy,
  .tasarla-page .acc-name,
  .tasarla-page .acc-item .btn,
  .tasarla-page .tf-ortak-dil button { font-size: 0.94rem; }

  /* ---- 4) SAFE-AREA: home göstergeli cihazda çubuklar üstte kalır ----- */
  /* MOB-0: alt payı 0 px ölçüldü. `env()` desteklenmeyen tarayıcıda ikinci
     değer (0px) devreye girer -- düzen değişmez. */
  .tasarla-page .tsm-sekmeler { padding-bottom: env(safe-area-inset-bottom, 0px); }
  .tasarla-page .tsm-cta { padding-bottom: env(safe-area-inset-bottom, 0px); }
}