/* ============================================================================ * MIQNO — /tasarla MASAÜSTÜ DÜZENİ · FAZ W1 * (Kerem, 27 Ağustos 2026 — "mobildeki araç tabanlı modelin masaüstü karşılığı") * * ÜÇ SÜTUN: solda dikey araç rayı · ortada SABİT kanvas · sağda seçili aracın * paneli. Zorunlu 4 adım sıralaması kalkar; ilerleme yalnız raydaki ✓'larla. * * BU DOSYA YALNIZ >=940px'te KONUŞUR. Mobil katman (tasarla-mobil.css) 939px ve * altını sahipleniyor; iki dosya HİÇBİR genişlikte aynı anda kural yazmaz. * * ── NEDEN `body.tsw-aktif` ──────────────────────────────────────────────── * Sınıfı JS yazar ve YALNIZCA kurulum gerçekten tamamlandıysa yazar. Tema * motoru panelleri bölemezse (kurYedek dalı) sınıf hiç gelmez ve sayfa eski * düzeninde çalışmaya devam eder -- yarım kurulmuş bir üç sütun ekranda * kalmaz. Aynı sigorta tasarla-adimlar.js'te de var. * * ── ADIM MOTORUNUN KROMU NEDEN SİLİNMEZ, SUSTURULUR ─────────────────────── * tasarla-adimlar.js her genişlikte çalışıyor ve `.ts-topbar` / `.ts-footbar` / * `.ts-step-panel` kuruyor. Onu kapatmak yerine kromunu susturuyoruz -- * mobil katmanın 27 Ağustos'a kadar kanıtlanmış deseni bu (tasarla-mobil.css * §"ADIM MOTORU"). Düğümler DOM'da kalır, adım motorunun testleri yeşil kalır, * ve `window.tsAdimGit` gibi dışarıdan çağrılan kancalar kırılmaz. * ========================================================================== */ /* --- VARSAYILAN: KROM KAPALI ----------------------------------------------- Ray / panel başlığı / CTA düğümleri yalnız masaüstü katmanı AKTİFKEN görünür. Neden burada, medya sorgusunun dışında: müşteri masaüstünde açıp pencereyi daraltırsa düğümler DOM'da kalıyor (silinmiyorlar -- yeniden genişletirse dinleyicileriyle hazır bulunmalılar). Mobil katmanın düzenine sızmasınlar. `.tsw-panel-govde` bir sarmalayıcı: kapalıyken `display:contents` ile TAMAMEN çözülür, yani mobilde araya giren bir kutu YOKMUŞ gibi davranır. */ .tsw-ray, .tsw-panel-basi, .tsw-cta { display: none !important; } .tsw-panel-govde { display: contents; } /* KOMUT C: DEVAM, aşama başlıkları ve özet YALNIZ masaüstünde vardır. Mobil katmanın düzenine sızmasınlar. */ .tsw-devam, .tsw-asama-basi { display: none !important; } /* ── M-1 · ÇEKMECE EŞİĞİN ALTINDA GİZLENMEZ, ÇÖZÜLÜR ────────────────────── ÖLÇÜLDÜ (canlı, 500x615 ve yerelde yeniden): Tema aracı seçili, mobil sheet gövdesi 470x258 BOMBOŞ krem alan; tema ızgarası DOM'da ama 0x0. KÖK NEDEN DOM SAHİPLİĞİ: masaüstü katmanı kurulurken panelleri KLONLAMIYOR, TAŞIYOR -- `while (form.firstChild) panelGovde.appendChild(form.firstChild)` (tasarla-masaustu.js `kur`). Yani `.customizer-form`un bütün içeriği `.tsw-cekmece > .tsw-panel-govde` içine giriyor. Müşteri pencereyi 940'ın ALTINA daraltınca masaüstü düzeni kapanıyor ama düğümler çekmecede kalıyor (silinmiyorlar -- yeniden genişletirse dinleyicileriyle hazır bulunmalılar) ve çekmece `display:none` olduğu için mobil sheet BOŞ kalıyordu. Yani hata eşiğin YERİNDE değil (iki katman da 940'ı kullanıyor), panelin SAHİPLİĞİNDE idi: bir genişlikte "ikisi de kapalı" hâli doğuyordu. ÇÖZÜM `.tsw-panel-govde`nin zaten kanıtlanmış deseni: kapalıyken `display:contents` ile TAMAMEN çözül. Kutu yokmuş gibi davranır, çocukları mobil sheet'in doğrudan çocuğu olur, hiçbir düğüm taşınmaz/silinmez. `[hidden]` de ezilir: çekmece kapalıyken `hidden` niteliği taşıyor ve tarayıcının `[hidden]{display:none}` kuralı buraya sızardı. Masaüstünde (>=940px) daha özgül `body.tsw-aktif #ozel .tsw-cekmece*` kuralları bunu ezer -- orada çekmece yine gerçek bir kutudur. */ .tsw-cekmece, .tsw-cekmece[hidden] { display: contents !important; } @media (min-width: 940px) { /* D-2: SOL BLOK SABİT 448 px. Daralmaz, genişlemez, kapanmaz. `clamp` BİLEREK YOK: blok daralsaydı kanvas sütunu genişler, o da `olcekYaz()` üzerinden KARTIN ÖLÇEĞİNİ değiştirirdi -- "araç değişince kart kutusu BİREBİR AYNI kalacak" kuralı tam olarak bunu yasaklıyor. BILDIRIM `body.tsw-aktif`TEN `html`E TASINDI (KOMUT H-7): yükleme işareti kabuk KURULMADAN önce de sahnenin ortasına konumlanmak için bu genişliği okuyor. Değer ve tek-kaynak kuralı DEĞİŞMEDİ -- yalnız kapsam genişledi; `.tsw-aktif` altındaki bütün kullanımlar kalıtımla aynı değeri alıyor. */ html { --tsw-blok-w: 448px; } /* --- 0) ÖLÇÜ DEĞİŞKENLERİ ------------------------------------------------ --tsw-h : editör kabuğunun yüksekliği. JS ÖLÇER (gridin tepesi + alt pay), buradaki değer yalnız JS yetişene kadarki ilk karedir. Tahmin değil, geri düşüş. --tsw-olcek : kartın kanvasa sığması için ölçek. JS yazar. --tsw-ara-* : TEK DİKEY BOŞLUK ÖLÇEĞİ (md.6). Panelin içinde serbest px değeri yazılmaz; bölüm dolgusu, başlık altı ve satır arası bu üç basamaktan seçilir. Ölçüldü (düzeltme öncesi): aynı panelde başlık altı 12px, yardım satırı 8px, anahtar 10px, bölüm dolgusu 16px yan yana duruyordu -- göz bunu "bazı yerde çok geniş" diye okuyor. */ body.tsw-aktif { /* D-2: RAY ARTIK AYRI SÜTUN DEĞİL -- bloğun ilk satırı. Değişken 0'a iner ki ona dayanan sol hizalar kendi başlarına kaymasın; hizanın yeni dayanağı --tsw-blok-w. */ --tsw-ray-w: 0px; /* D2-0b: header sağ kümesinin bloğun SOL kenarına bırakacağı nefes payı. Değer TEK yerde; K2-3 hizasını yazan kural onu okur. */ --tsw-header-pay: 16px; /* ALT SINIR 360 -> 336 (KOMUT C-10, ölçüldü 1280x855): ray 108 + çekmece 352 + panel 360 kalınca kanvas sütunu 904'te bitiyordu ve kart (430 geniş) en sağa kaysa bile çekmecenin 1px altında kalıyordu -- yer 2px eksikti. Çekmece genişliği C'de SABİT (352), esneyen yer bizim panelimiz. Alt sınır yalnız DAR ekranlarda bağlar: 1280'de 27vw=345.6 (eskiden 360'a yuvarlanıyordu), 1360 ve üstünde 27vw zaten 336'nın üstünde -> hiçbir şey değişmez. Medya sorgusu YOK: bu dosya dar ekrana kural yazmaz (W1-2). */ /* D-1 SONRASI: bu değişkenin TEK müşterisi SEPET ÇEKMECESİ ve kalem detayı kaldı (sağdaki "Tasarımın" paneli yok). Değer sabitlendi; sepet çekmecesinin genişliği D öncesiyle BİREBİR aynı (448). */ --tsw-panel-w: 448px; --tsw-bosluk: 20px; --tsw-h: clamp(520px, calc(100dvh - 200px), 1000px); /* PANEL ALT BLOĞU SABİT YÜKSEKLİKLİ (md.2). Gövdenin boyu ondan TÜREYECEK (flex: panel - başlık - alt blok), bu yüzden değer içerikle oynamamalı: satırlar 42 + 48 + 18 ve aralar 10 + 10, dolgu 12 + 10 -> 150. */ --tsw-cta-h: 150px; --tsw-ara-1: 6px; --tsw-ara-2: 10px; --tsw-ara-3: 16px; } /* --- 0b) EDİTÖR TAM EKRAN, SAYFA KAYMAZ (md.1) -------------------------- Kerem: "Panelin üzerinde tekerlek çevrilince tüm sayfa kayıyor; kanvas yukarı çıkıyor, footer'a iniliyor." ÖLÇÜLDÜ (düzeltme öncesi, 1920x911): belge yüksekliği 1276, görünüm 911 -- yani sayfanın 365px kaydırma payı vardı ve altbilgi 955'te başlıyordu. Kabuk kendi içinde doğru boydaydı; kayan şey SAYFAYDI. `overscroll-behavior: contain` panel gövdesinin SONUNA gelince zincirlemeyi kesiyor ama tekerlek panelin başlığı/alt bloğu gibi KAYMAYAN bir parçasının üzerindeyken olay doğrudan sayfaya gidiyor -- orada durduracak bir şey yok. ÇÖZÜM GÖRÜNÜM SEVİYESİNDE: gövdeye `overflow:hidden` yazılınca kök öğe `visible` olduğu için bu değer GÖRÜNÜME yayılır (HTML belgelerinde gövdenin taşma değeri kökünkü `visible` ise görünümü belirler) -- sayfa artık hiç kaymaz, kayan tek yer sağ panelin gövdesi kalır. İKİ KAZANÇ DAHA: (a) sayfa kaydırma çubuğu kaybolur -> panel ekranın sağ kenarına kadar uzanır (md.5; ölçüldü: `clientWidth` 2116 iken görünüm 2133, aradaki 17px'lik koyu şerit çubuğun kendisiydi). (b) altbilgi editör ekranının ALTINDA kalır ve editördeyken erişilmez -- Kerem'in verdiği iki seçenekten biri buydu; düğüm SİLİNMEZ, yalnız kırpılır. YÜKSEKLİK DE VERİLİR, YALNIZ `overflow` YETMEZ (ölçüldü, bu turda): `overflow:hidden` KIRPAR ama kutuyu hâlâ bir KAYDIRMA KABI bırakır -- `scrollHeight` 1405, `clientHeight` 1012 idi ve kanvasın üzerinde çevrilen tekerlek sayfayı 393px kaydırabildi (izleyici: tek bir `scroll` olayı, sapma 393). `height:100dvh` ikisine birden yazılınca gövde kendi içeriğini kırpıyor, kökün kaydırılabilir taşması SIFIRLANIYOR ve kaydıracak bir şey kalmıyor -- yani kilit "engellenen bir kaydırma" değil, "olmayan bir kaydırma" oluyor. KISA EKRAN İSTİSNASI aşağıda: kabuk akışa döndüğünde kilit de kalkar, yoksa müşteri okuyamadığı bir editöre hapsolur. KOMUT H-3 · KİLİT AÇILIŞTAN İTİBAREN GEÇERLİ (`[data-kart-hazir]`in kardeşi `[data-duzen-hazir="0"]`, tasarla.html 'de yazılıyor). ÖLÇÜLDÜ (scripts/olc-eski-duzen.js, 1440x950, CPU 4x): masaüstü kabuğu ancak katalog indikten sonra (`body.tsw-aktif`, 2286 ms) kuruluyor; o ana kadar sayfa ESKİ iki sütunlu düzeninde ve 1393 px boyunda duruyor, sonra bir anda 950'ye iniyor -- kaydırma çubuğu belirip kayboluyor ve sayfa zıplıyor. Kilidi aynı kurala ekleyerek yükseklik BAŞTAN doğru oluyor. Seçici ayrı bir kural DEĞİL, aynı kuralın ikinci yarısı: iki ayrı yere yazılsaydı biri değişip öteki bayatlardı. GÜVENLİK AĞI: nitelik JS'ten konur ve kabuk gelmezse üst sınırla (4 sn) KALDIRILIR -- yoksa kurulum başarısız olduğunda müşteri, içeriği görünümü aşan kilitli bir sayfada kalırdı (bu dosyanın kendi kısa-ekran istisnası da tam bu sebeple var). */ /* SELEKTÖR SIRASI BİLEREK BÖYLE: açılış kapısı ÖNDE, `.tsw-aktif` ARKADA. Nöbetçiler (tests/masaustu-w1-yerlesim.js W1S-1, tests/komutE-son- duzenlemeler.js E-1) kuralı `html.tsw-aktif, body.tsw-aktif {` literaliyle buluyor; kapıyı öne almak o literali bozmadan tek kuralda kalmayı sağlıyor. CSS için sıranın hiçbir anlamı yok -- iki yarım aynı bildirimleri paylaşır. */ html[data-duzen-hazir="0"], html[data-duzen-hazir="0"] body, html.tsw-aktif, body.tsw-aktif { overflow: hidden; height: 100dvh; } /* KOMUT E-1 · KAYDIRMA OLUĞU KİLİTLİ EDİTÖRDE KAPANIR. ÖLÇÜLDÜ (1920x911): header 1890px ve x=15'te başlıyordu, blok da sağ kenara 1905'te dayanıyordu -- yani sayfanın iki yanında 15'er px ölü şerit vardı ve header "tam genişlikte" görünmüyordu. KÖK NEDEN: `tf-sayfa.css` genelde `html { scrollbar-gutter: stable both-edges }` yazıyor. O kural DOĞRU ve yerinde kalır -- kaydırılabilir sayfalarda çubuk belirip kaybolurken düzenin sıçramasını engelliyor. Ama editör AÇIKKEN sayfa zaten kilitli (`overflow: hidden`, hemen yukarıda): kaydırma çubuğu HİÇBİR koşulda belirmiyor, yani oluk boş yere 30px yiyor. Kural yalnız `.tsw-aktif` iken kapanır; editörden çıkınca site geneli davranışı aynen döner. Sıçrama riski yok çünkü ortada kaydırma yok. */ html[data-duzen-hazir="0"], html.tsw-aktif { scrollbar-gutter: auto; } /* --- KOMUT H-4b · BEKLERKEN YARIM EDİTÖR GÖSTERİLMEZ ------------------- KEREM BİLDİRDİ (ekran görüntüsü, ilk açılış): eski iki sütunlu düzen ekranda dururken kart kutusu KOCAMAN VE BOŞ (kart kapısı henüz kapalı) ve altında başıboş denetim etiketleri ("90° Döndür", "Sürükle · sürgüyle yakınlaştır", "Rastgele Kart") kalıyordu -- sayfa yarım/bozuk görünüyor. PENCERE NEDEN KAPANMIYOR (ölçüldü, scripts/olc-eski-duzen.js, CPU 4x): ilk boya 980 ms DOMContentLoaded 1984 ms body.tsw-aktif 2404 ms tfyt:hazir 2601 ms <- kabuk ARTIK bunu beklemiyor (H-4) Yani darboğaz artık katalog değil BELGENİN KENDİSİ: kabuk, kaydırdığı düğümler ayrıştırılmadan kurulamaz. İlk boya ile DOMContentLoaded arası kapatılamaz -- o aralıkta EDİTÖR ÇİZİLMEMELİ. `visibility` seçildi (`display:none` DEĞİL): kutu yerinde kalır, sayfa boyu kilidiyle birlikte hiçbir şey zıplamaz. Başlık/açıklama zaten yeni düzende gizli -- beklerken de gizlenince o da tek geçişte oturur. GÜVENLİK AĞI kilidin kendisiyle aynı: kabuk gelmezse nitelik üst sınırla kalkar ve sayfa eski düzeniyle GÖRÜNÜR olur (tasarla.html `duzenKapisi`). */ /* `.tw-head` DE GIZLENIR (KOMUT H-6). Ilk yazimda yalniz h1/p gizlenmisti ve geriye KREM, tam genislikte, yuvarlak kosel bir baslik karti kaliyordu; kabuk kurulunca ince koyu bir kirinti cubuguna donusuyordu. Kerem "arkada eski bu sayfanin tasarimi gozukuyor" derken gordugu sey buydu (ana sayfadan TIKLAYARAK gelisin kareleri yakalandi: 500-2800 ms). */ /* `opacity: 0` DE SART -- `visibility` tek basina yetmiyor. `visibility` kalitsaldir ve ALT OGE onu geri acabilir: adim motorunun kabi (`assets/css/tasarla-adimlar.css`) panellere `visibility: visible !important` yaziyor. Paneller o kaba tasindigi an buradaki gizleme EZILIYOR ve eski iki sutunlu form ekranda beliriyordu (ana sayfadan tiklayarak gelisin kareleri: 1625 ms, kapi hala kapali). Opaklik bir GRUP olusturur; alt oge onu geri acamaz. `display:none` BILEREK KULLANILMADI: kabuk kurulurken kutu olculeri okunuyor (`kabukOlc`, `olcekYaz`) ve kaldirilmis kutu sifir olculur. */ html[data-duzen-hazir="0"] #ozel, html[data-duzen-hazir="0"] .tw-head { visibility: hidden; opacity: 0; pointer-events: none; } /* --- 1) ADIM MOTORUNUN KROMU SUSTURULUR --------------------------------- */ body.tsw-aktif .ts-topbar-sag, body.tsw-aktif .ts-steps--panelustu, body.tsw-aktif .ts-footbar { display: none !important; } /* Adım gruplaması ÇÖZÜLÜR: `display:contents` ile `.ts-step-panel` görsel olarak yok olur ve içindeki `#tab-*` panelleri sağ sütunun DOĞRUDAN çocuğu gibi davranır. Böylece görünürlüğü artık ADIM değil ARAÇ belirler. (Aynı çözüm mobilde de kullanılıyor.) */ body.tsw-aktif .ts-step-panel { display: contents !important; } /* Eski sekme şeridi masaüstünde de sessiz: rayın işini o yapıyordu. Düğümler DOM'da (tf-sayfa.js programatik `.click()` yapıyor). */ body.tsw-aktif #ozel .tff-tabs { display: none !important; } /* PANEL GÖRÜNÜRLÜĞÜ — TEK KURAL. tasarla-adimlar.css `.ts-step-panel .tff-tab-content{display:block!important}` diyor (adım kabı görünürlüğün sahibiydi). Burada sahiplik araca geçiyor: seçili aracın kabı AÇIK, diğerleri kapalı. Seçici `#ozel` taşıdığı için özgüllük yarışını kazanır -- iki `!important` çarpışıyor, kazananı özgüllük belirliyor ve bu bilinçli. */ body.tsw-aktif #ozel .tff-tab-content { display: none !important; } body.tsw-aktif #ozel .tff-tab-content[data-tsw-acik="1"] { display: block !important; visibility: visible !important; } /* --- 2) BAŞLIK BLOĞU KOMPAKT (madde 5) --------------------------------- "Editör ilk ekranda tam görünsün." Blok SİLİNMEZ -- marka kimliği ve SEO metni orada. Yelpaze küçülür, açıklama paragrafı düşer, dikey pay yarılanır. Metin DOM'da kalır (data-i18n taraması ve okuyucular için). */ body.tsw-aktif #ozel .cu-head { margin-bottom: 14px; gap: 18px; align-items: center; } body.tsw-aktif #ozel .cu-head-fan { transform: scale(0.62); transform-origin: left center; } body.tsw-aktif #ozel .cu-head-text h2 { font-size: clamp(1.28rem, 1.9vw, 1.72rem); margin: 2px 0 0; } body.tsw-aktif #ozel .cu-head-text p { display: none; } /* SAYFA BAŞLIĞI BLOĞU (düzeltme turu md.2) — YALNIZ BREADCRUMB KALIR. Kerem: "büyük 'Kartını Tasarla' H1'i ve altındaki açıklama kalkacak; yalnızca tek satır breadcrumb kalacak. Kazanılan dikey alan kanvasa gitsin." ÖLÇÜLDÜ (2133x1012 koşumu, düzeltme öncesi): `.tw-head` krem bir KART (zemin #FFF9F0, yarıçap 16, gölge) ve 112px yüksekliğindeydi; grid 277'den başlıyordu. Blok bir satıra indiğinde o yükseklik doğrudan `--tsw-h`ye, yani kanvasa geçiyor -- kabuk yüksekliği JS'te ölçülüyor (kabukOlc), ayrıca bir sayı yazmaya gerek yok. DÜĞÜMLER SİLİNMEZ, GİZLENİR: `h1` ve `p` DOM'da kalır (data-i18n taraması, SEO ve ekran okuyucular için); yalnız masaüstü katmanında görünmezler. "Kısa rehber" (tur girişi) kalır -- kaybolmuş bir özellik olmasın. KART DİLİ DÜŞER: krem kart artık koyu kanvasın hemen üstünde tek satırlık bir gezinti izi; kutu süsü (zemin/kenarlık/yarıçap/gölge) kalkar. */ /* SEÇİCİDE `.tw` ŞART (ölçüldü): tasarla.css `.tasarla-page .tw` (0,2,0) `padding: clamp(18px,3vw,34px) 0 0` yazıyor ve `body.tsw-aktif main` (0,1,2) onu yenemiyordu -- üst dolgu 34px'te kalmıştı. */ body.tsw-aktif main.tw { padding-top: 10px; padding-bottom: 0; } body.tsw-aktif .tw-head { position: relative; background: transparent; border: 0; border-radius: 0; box-shadow: none; /* Kabuk kenardan kenara olduğu için breadcrumb da `.container` genişliğinde değil, ÖNİZLEME rozetiyle AYNI hizada başlar (rayın genişliği kadar içeriden) -- yoksa iz sayfanın ortasında, kanvas kenarda kalıyordu. */ max-width: none; width: 100%; /* D2-0b: blok sağa geçti -> iz yine SOLDAN başlar. Sağda bloğun genişliği kadar içeride biter. */ padding: 6px calc(var(--tsw-blok-w) + 22px) 4px 22px; margin-bottom: 0; min-height: 30px; } body.tsw-aktif .tw-head h1, body.tsw-aktif .tw-head p { display: none !important; } body.tsw-aktif .tw-head .tw-crumb { font-size: 0.8rem; line-height: 20px; margin: 0; } /* Koyu zeminde okunur iz: krem kartın soluk mürekkebi (#86707C) burada 3:1'in altına düşüyordu. Koyu sahne değerleri (tasarla-sahne.css §dark) ile aynı: bağlantı #B79DA9, bulunulan sayfa #F3E8DC. */ body.tsw-aktif .tw-head .tw-crumb, body.tsw-aktif .tw-head .tw-crumb a { color: #B79DA9 !important; } body.tsw-aktif .tw-head .tw-crumb a:hover { color: var(--coral, #E96A4B) !important; } body.tsw-aktif .tw-head .tw-crumb span[aria-current] { color: #F3E8DC !important; } /* Tur girişi mutlak konumlu (tasarla-adimlar.css `right:0; top:0`); yeni dolgunun içine alınır ve koyu zemine göre boyanır. SEÇİCİDE `#tfTurAc` ŞART (ölçüldü): tasarla-sahne.css `.tasarla-page .tw #tfTurAc{ background:var(--a-kart) !important }` yazıyor -- özgüllüğü (1,2,0). Sınıf üzerinden yazılan `!important` (0,3,1) ID'yi yenemiyordu ve düğme koyu zeminde BEYAZ bir hap olarak kalıyordu (soluk mürekkeple: okunmuyordu). ID ile (1,3,1) olunca kazanıyor. KONUM VE BİÇİM BURADA YENİDEN YAZILIYOR. ÖLÇÜLDÜ: `.tasarla-page .tfTur-cagir` kuralı (tasarla-adimlar.css: inline-flex hap, 6/12 dolgu, mutlak konum) bu sayfada HİÇ uygulanmıyor -- düğmeye eşleşen kurallar tarandığında tasarla-adimlar.css'ten TEK kural bile gelmedi; kazanan `display` tf-sayfa.css'in `.tw-head > *{display:block}` kuralı. Yani düğme blok seviyesinde, breadcrumb'ın ALTINDA, altı çizili düz metin olarak duruyordu (önceki ekran görüntülerinde de böyleydi -- eski düzende krem kartın içinde kaybolduğu için fark edilmemiş). Tek satır sözü tutulsun diye konumu burada açıkça veriliyor. */ body.tsw-aktif .tw-head #tfTurAc { position: absolute; left: auto; bottom: auto; right: calc(var(--tsw-ray-w) + 22px); top: 4px; display: inline-flex; align-items: center; padding: 3px 11px; font-size: 0.76rem; line-height: 18px; text-decoration: none; border: 1px solid rgba(244, 184, 96, 0.30) !important; border-radius: 999px; background: transparent !important; color: #B79DA9 !important; cursor: pointer; } body.tsw-aktif .tw-head #tfTurAc:hover { color: var(--coral, #E96A4B) !important; } /* ÖNİZLEME satırı tek satıra iner (57px -> ~26px). */ body.tsw-aktif #ozel .ts-topbar-sol .ts-onizleme-not { font-size: 0.74rem; } /* --- TAM GENİŞLİK KABUK (mockup W1/W2) -------------------------------- Mockup'ta ray ekranın SOL KENARINA, sağ panel SAĞ KENARINA dayalı; editör header'ın altında tam genişlikte bir çalışma alanı. Bölümün kendi `.container` genişlik sınırı bu düzende kabuğu ortada dar bir kutuya hapsediyordu. Sınır YALNIZ `#ozel` için kalkar -- sayfanın diğer blokları (başlık kartı, altbilgi) kendi genişliklerinde kalır. */ body.tsw-aktif #ozel { padding-left: 0; padding-right: 0; padding-bottom: 0; } body.tsw-aktif #ozel > .container { max-width: none; width: 100%; padding-left: 0; padding-right: 0; } /* --- 3) ÜÇ SÜTUN -------------------------------------------------------- Sütunlar açıkça numaralanır (`grid-column`): gridin DOM sırası ray/kanvas/panel değil (ray sonradan ekleniyor ve `.hs-lineup` gizli bir kardeş olarak duruyor). Otomatik yerleşime bırakılsaydı gizli kardeşin `hidden` bayrağı düştüğü an sütunlar kayardı. */ /* SEÇİCİ `body.tasarla-page.tsw-aktif` — ÖLÇÜLDÜ (27 Ağustos 2026): tasarla.css'teki `.tasarla-page #ozel .customizer-grid.tf-stage` özgüllükte (1,3,0) ile bizim (1,2,1)'i yeniyor ve `gap`/`padding` bildirimlerimiz sessizce düşüyordu (ölçülen: gap 36 yerine 20, padding 0). Sütun tanımı tesadüfen tutuyordu çünkü onu yazan kural daha zayıftı. Kabuğun sahibi belirsiz kalmasın diye özgüllük bir basamak yükseltildi. */ body.tasarla-page.tsw-aktif #ozel .customizer-grid { /* D2-0: İKİ SÜTUN — KANVAS | BLOK. Blok SAĞA geçti; iç yapısı ve davranışı aynen duruyor, yalnız yeri değişti. Kanvas artık ilk sütun ve kalan bütün alanı kaplıyor. */ grid-template-columns: minmax(0, 1fr) var(--tsw-blok-w); gap: 0; align-items: stretch; height: var(--tsw-h); margin-top: 0; /* Kabuk kenardan kenara: gridin kendi kutu süsü (dolgu, kenarlık, yarıçap, gölge) düşer -- sütunlar kendi yüzeylerini taşır. */ padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; box-sizing: border-box; /* SON SAVUNMA: kabuk hiçbir koşulda kendi yüksekliğini aşmaz. Aşarsa "kanvas sabit" sözü sessizce bozulur (kart sayfa kaydıkça oynamaya başlar). */ overflow: hidden; } body.tsw-aktif #ozel .customizer-preview { grid-column: 1; grid-row: 1; } body.tsw-aktif #ozel .customizer-form { grid-column: 2; grid-row: 1; } /* REVEAL ANİMASYONU KABUĞUN İÇİNDE KAPALI. ÖLÇÜLDÜ: `.customizer-preview.reveal` / `.customizer-form.reveal` henüz `show` almadığı için 16px aşağı ötelenmiş duruyordu; sütunlar kabuğun alt kenarını 16px aşıyor ve KALICI CTA ekranın altında kalıyordu (ctaEkranda: false). Sabit yükseklikli bir kabukta "kaydırınca belir" fikrinin karşılığı zaten yok -- iki sütun da her zaman görünür. */ body.tsw-aktif #ozel .customizer-preview, body.tsw-aktif #ozel .customizer-form { /* `!important` ŞART: ölçüldü, sütunlar `reveal show` sınıflarıyla bile hesaplanan `matrix(1,0,0,1,0,16)` taşıyor -- yani translate'i yazan kural bu seçiciyi özgüllükle yeniyor. 16px'lik o öteleme kabuğun altını taşırıp KALICI CTA'yı ekranın dışına itiyordu (ctaEkranda: false). */ transform: none !important; opacity: 1 !important; /* GEÇİŞİ DE KAPAT -- ASIL DÜZELTME BU. Kök neden (ölçüldü, getAnimations()): sütunların üzerinde `playState: running` bir CSSTransition duruyordu (translateY(14.4px) -> none). KOŞAN BİR GEÇİŞ, `!important` dahil bildirimsel her değeri EZER; bu yüzden ne stylesheet kuralı ne de satır içi `!important` 16px'lik ötelemeyi düşürebildi -- sınıfı silmek de yetmedi. Geçiş hiç kurulmazsa değer anında kesinleşir. Sabit yükseklikli bir kabukta "kaydırınca belir" animasyonunun zaten karşılığı yok. */ transition: none !important; } /* --- 4) ARAÇ RAYI ------------------------------------------------------- */ body.tsw-aktif #ozel .tsw-ray { display: flex !important; flex-direction: column; gap: 4px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 6px; margin: 0; /* Kendi yüzeyi: mockup'ta ray kanvastan bir ton koyu, sola dayalı bir şerit. */ background: rgba(0, 0, 0, 0.24); border-right: 1px solid rgba(255, 255, 255, 0.07); } body.tsw-aktif #ozel .tsw-arac { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px 6px; min-height: 74px; border: 1px solid transparent; border-radius: 13px; background: transparent; cursor: pointer; color: var(--on-ink, #f4f2ec); opacity: 0.62; font-family: inherit; font-size: 0.76rem; line-height: 1.15; text-align: center; transition: background .18s ease, opacity .18s ease, border-color .18s ease; } body.tsw-aktif #ozel .tsw-arac svg { width: 24px; height: 24px; display: block; } body.tsw-aktif #ozel .tsw-arac:hover { opacity: 0.9; background: rgba(255,255,255,0.05); } body.tsw-aktif #ozel .tsw-arac[aria-selected="true"] { opacity: 1; color: var(--gold, #F4B860); background: rgba(244,184,96,0.11); border-color: rgba(244,184,96,0.42); } body.tsw-aktif #ozel .tsw-arac:focus-visible { outline: 2px solid var(--gold, #F4B860); outline-offset: 2px; } /* ✓ ROZETİ — ilerlemenin TEK göstergesi (madde 4: adım zorlaması kalktı). */ /* ✓ ROZETI — ilerlemenin TEK gostergesi (madde 4: adim zorlamasi kalkti). KOMUT I: kose rozeti degil, ADIN YANINDA kucuk yesil ✓; SECILI sekmede GOSTERILMEZ (secili zaten mercan cizgiyle isaretli, iki isaret gurultu). */ body.tsw-aktif #ozel .tsw-tik { position: static; width: 12px; height: 12px; border-radius: 0; display: none; align-items: center; justify-content: center; background: transparent; color: #2F9E5F; } body.tsw-aktif #ozel .tsw-tik svg { width: 12px; height: 12px; stroke-width: 3; } body.tsw-aktif #ozel .tsw-arac[data-tamam="1"] .tsw-tik { display: flex; } body.tsw-aktif #ozel .tsw-arac[aria-selected="true"] .tsw-tik { display: none; } /* --- 5) KANVAS SABİT (madde 2) ----------------------------------------- `position:sticky` KAPATILIR. Sticky, kartı sayfa kaydıkça "takip ettiriyor" -- yani kart ekranda OYNUYORDU. Yeni kural kartın hiç oynamaması: kanvas kendi yüksekliğinde sabit bir kutu, kart onun tam ortasında. */ body.tsw-aktif #ozel .customizer-preview { /* KANVAS KOYU (Kerem, 27 Ağustos 2026 akşamı — W1 düzeltme turu md.1). ÖLÇÜLDÜ: kanvasın hesaplanan zemini rgb(255,249,240) idi -- krem bir kutu (yarıçap 16, gölge) kartın arkasında büyük bir hale gibi duruyordu ve kartın beyaz-mavi çerçeve öğeleri o halede eriyordu. KAZANAN KURAL (ölçüldü, el.matches taraması): tasarla-sahne.css `.tasarla-page #ozel .customizer-preview{ background:var(--a-bg) !important }` Özgüllüğü (1,2,1); bizim seçicimiz de (1,2,1). Eşitlikte `!important` kazanır, eşit `!important`te de SONRA YÜKLENEN dosya kazanır -- tasarla-masaustu.css ``te tasarla-sahne.css'ten sonra geliyor (tasarla.html 98 vs 106), bu yüzden `!important` yeterli. ŞEFFAF, kendi gradyanı DEĞİL: sayfa zemini zaten `radial-gradient(ellipse at 50% 15%, #4A3A44, #2E2630)` ve `background-attachment:fixed` -- kanvas şeffaf olunca ışık kaynağı sayfayla BİREBİR aynı yerde kalır, iki gradyan arasında dikiş olmaz. */ background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; /* `static` DEĞİL `relative`: kart araçları (Rastgele Kart · Fotoğrafı Ayarla) alttaki dolgunun içine mutlak konumlanıyor -- aşağıya bakın. Sticky'nin kapatılması bakımından ikisi de aynı: kart artık sayfayla oynamıyor. `top: auto` ŞART. ÖLÇÜLDÜ (27 Ağustos 2026): tf-sayfa.css sticky düzen için `.customizer-preview{top:90px}` (>=1200px'te 96px) yazıyor. `sticky` iken bu yapışma eşiği; `relative` yapınca AYNI bildirim bir KAYDIRMAYA dönüştü ve kanvası satırın 88px altına itti (offsetTop 108, panel 20) -> sütun kabuğu aşıyor, CTA ekranın altında kalıyordu. Konumlanmayı değiştirirken eski konum bildirimlerini de düşürmek gerekiyor. */ position: relative; top: auto; bottom: auto; left: auto; right: auto; /* `height:100%` YAZILMAZ. Ölçüldü (1440x900): grid item'a yüzde yükseklik verilince satır kabuğun İÇ kutusundan değil TAM yüksekliğinden türedi ve sütunlar gridi 32px aştı -- CTA panelin alt kenarından taşıp kırpıldı. Satırı `align-items: stretch` zaten dolduruyor; ikinci bir yükseklik kaynağı eklemek çelişki üretiyor. */ min-height: 0; display: grid; place-items: center; overflow: hidden; align-self: stretch; /* ALT DOLGU = kart araçları şeridinin evi. Şerit AKIŞTAN ÇIKARILIYOR çünkü kanvasın içinde normal bir satır olarak dururken kartın ortalanmasına ortak oluyordu: kart, şeridin de dahil olduğu yığının ortasına gidiyor ve ÖLÇEKLENDİĞİNDE şeridin üstüne biniyordu (ölçüldü: kart 486 -> 613, şerit 557..598 aralığında kalıyor). Artık kart kendi alanının tam ortasında, şerit onun altında sabit. */ /* Kart araçları şeridi artık kanvasta DEĞİL (rozetin yanına ve Fotoğraf paneline taşındı -- mockup: "kartın üzerinde hiçbir düğme yok"), bu yüzden alt dolgu yalnız nefes payı; yatayda kenarlardan uzak durur. */ padding: 18px 22px; } /* Kart sahneye TRANSFORM ile sığar, genişlikle DEĞİL. Baskı paritesi kuralı: kartın kendi ölçüleri (cqw/px) baskı PNG'siyle birebir; genişliğini değiştirmek tipografiyi kaydırırdı. Mobil katman da aynı sebeple `scale()` kullanıyor. */ /* E-2: ÖLÇEK + OPTİK KAYDIRMA, TEK TRANSFORM'DA. Sıra önemli: `translateY(...) scale(...)` sağdan sola uygulanır -- önce ölçek, sonra öteleme. Yani kaydırma ÖLÇEKTEN ETKİLENMEZ ve JS'in yazdığı px değeri ekranda birebir o kadar kayar. Ters sırada yazsaydık öteleme de ölçekle çarpılır, 1.26 ölçekte %26 fazla kayardı. Kart `transform-origin: center center` ile ortasından ölçekleniyor; kaydırma bunu bozmaz çünkü ötelemenin kendi orijini yok. */ body.tsw-aktif #ozel .customizer-preview .tf-custom-card-wrapper { transform: translateY(calc(-1 * var(--tsw-kaydirma, 0px))) scale(var(--tsw-olcek, 1)); transform-origin: center center; will-change: transform; } /* --- 6) SAĞ PANEL — YALNIZ İÇERİĞİ KAYAR (madde 2) ---------------------- */ /* PANEL TEK PARÇA AÇIK YÜZEY (düzeltme turu md.5 + md.6). Kerem: "içerik ayrı bir beyaz kart gibi yüzüyor, panelin geri kalanı koyu. Panel baştan sona tek açık yüzey olacak; bölümler ince ayraçlarla ayrılsın, iç içe kart görüntüsü olmasın." Ve: "başlık panelin İÇİNDE, içerikle aynı hizada ve aynı yüzeyde olacak." ÖLÇÜLDÜ (düzeltme öncesi): `.customizer-form` zemini rgba(0,0,0,0) -- yani KOYU sayfa görünüyordu; içerideki her `.tff-field` ise kendi başına krem bir kart (zemin #FFF9F0, yarıçap 16, kenarlık, dolgu 20). Sonuç: koyu panelin üzerinde yüzen krem kutular ve başlık ile ilk kutu arasında koyu bir şerit. ÇÖZÜM İKİ ADIMLI: (a) yüzey panelin KENDİSİNE taşınır, (b) içerideki kutular DÜZLEŞTİRİLİR (aşağıda). Kutular silinmez -- yalnız kart süsleri düşer; içlerindeki kontroller ve dinleyicileri aynen kalır. */ body.tsw-aktif #ozel .customizer-form { min-height: 0; /* G2: iki blok arasında 10 px. Ray artık blokların TAŞIYICISI -- kendi kutusu (x, genişlik 448) değişmiyor, yalnız içindekiler ayrı yüzeyler. */ display: flex; flex-direction: column; gap: 10px; padding: 0 10px 10px; overflow: hidden; /* İki blok kendi kenarlığını taşıyor; rayın sol ayırıcı çizgisi artık gereksiz -- bloklar zaten kendi kenarlarıyla okunuyor. */ border: 0; border-radius: 0; box-shadow: none; /* Blokların ortak yüzey tarifi. Üçü de TEK yerde: "aynı zemin, aynı kenarlık, aynı gölge" bir kural değil, aynı değişkenler. */ /* Sekme cubugunun altindaki ince ayirici (KOMUT I). */ --tsw-sekme-cizgi: #EFE0CE; --tsw-blok-zemin: #FFFDF8; --tsw-blok-kenar: rgba(59, 44, 53, 0.14); --tsw-blok-golge: 0 6px 18px -12px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .06); /* `!important` ŞART: tasarla-sahne.css `.tasarla-page .customizer-form` `background:transparent !important` yazıyor (ölçüldü). Aynı özgüllük sınıfında değiliz ama karşı taraf `!important` taşıdığı için bizimki de taşımak zorunda; sıralamada sonra geldiğimiz için kazanır. */ background: #FFF9F0 !important; color: #2A1E25; /* AÇIK KABIN TOKENLARI (tasarla-sahne.css §13b ile AYNI değerler). Gövde `color-scheme:dark` taşıyor; krem panelin içinde yerleşik form kontrolleri (onay kutusu, kaydırma çubuğu) tarayıcının KOYU çizimiyle geliyordu. Token kapsamı burada açık değerlerine döner -- kontrollerin kendi kuralları değişmez. */ --ts-surface: #FFFDF8; --ts-line: #E4D5C2; --ts-ink: #2A1E25; --ts-muted: #6B5A62; --ts-plum: #3B2C35; color-scheme: light; } /* BAŞLIK PANELİN İÇİNDE, İÇERİKLE AYNI HİZADA (md.5). Yatay dolgusu gövdeninkiyle BİREBİR aynı (22px) -- ölçüldü, farklı olduğu sürece başlık "dışarıda" okunuyor. Mockup W1/W2: ad üstte, açıklama hemen altında, ikisi de aynı krem yüzeyde. */ body.tsw-aktif #ozel .tsw-panel-basi { flex: 0 0 auto; display: flex !important; flex-direction: column; align-items: flex-start; gap: 3px; padding: 18px 22px 12px; background: transparent; border-bottom: 1px solid rgba(59, 44, 53, 0.10); } body.tsw-aktif #ozel .tsw-panel-ad { font-family: 'Oswald', var(--fx-font-display, sans-serif); font-size: 1.34rem; letter-spacing: 0.005em; line-height: 1.15; color: #2A1E25; } body.tsw-aktif #ozel .tsw-panel-not { font-size: 0.82rem; line-height: 1.4; opacity: 1; color: #6B5A62; } /* KAYAN TEK YER BURASI. `min-height:0` olmadan flex çocuğu içeriğine göre büyür ve kabuğu taşırır -> kanvas da onunla birlikte uzar, sabitlik biter. */ /* KAYAN TEK YER (md.1 + md.2). `flex: 1 1 0` -- taban `auto` DEĞİL: `auto` tabanla ilk yerleşimde içeriğin kendi boyu da hesaba giriyor; sıfır tabanla gövdenin boyu yalnızca "panel - başlık - alt blok" farkından türer. Kerem'in istediği hesap bu. `min-height: 0` olmadan flex çocuğu içeriğine göre büyür ve kabuğu taşırır. `overscroll-behavior: contain` -> panelin sonuna gelince kaydırma sayfaya ZİNCİRLENMEZ (sayfa zaten kilitli; bu ikinci sigorta). Alt dolgu `--tsw-ara-3`: son bölüm alt bloğun çizgisine yapışmasın. */ body.tsw-aktif #ozel .tsw-panel-govde { display: block; flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 0 22px var(--tsw-ara-3); /* İNCE, MARKA RENGİNDE ÇUBUK (md.5). Firefox/standart yol + WebKit yolu birlikte: ikisi de tek başına yetmiyor. */ scrollbar-width: thin; scrollbar-color: rgba(201, 134, 43, 0.45) transparent; /* OLUK HER ZAMAN AYRILIR (W2). Ölçüldü: Arka Plan aracında 93 küçük resim paneli kaydırılabilir yapıyor ve çubuk içerik genişliğinden 11px yiyor -- Çerçeve aracında (kaydırma yok) bölüm 404px, Arka Plan'da 393px oluyordu, yani "aynı kutu boyutu" sözü araç değiştikçe bozuluyordu (61x81 karşı 59x78). Oluk sabitlenince üç ızgara da AYNI genişlikten türüyor; ayrıca araçlar arası geçişte içerik yatayda kıpırdamıyor. */ scrollbar-gutter: stable; } body.tsw-aktif #ozel .tsw-panel-govde::-webkit-scrollbar { width: 6px; } body.tsw-aktif #ozel .tsw-panel-govde::-webkit-scrollbar-track { background: transparent; } body.tsw-aktif #ozel .tsw-panel-govde::-webkit-scrollbar-thumb { background: rgba(201, 134, 43, 0.40); border-radius: 999px; } body.tsw-aktif #ozel .tsw-panel-govde:hover::-webkit-scrollbar-thumb { background: rgba(201, 134, 43, 0.62); } /* --- 6b) İÇ İÇE KART YOK — BÖLÜMLER İNCE AYRAÇLA AYRILIR (md.6) --------- `.tff-field` sayfanın her yerinde krem bir KART (zemin/kenarlık/yarıçap/ gölge/20px dolgu). Panelin kendisi krem olunca aynı ton üst üste binip "kart içinde kart" görüntüsü veriyordu. Burada YALNIZ kart süsü düşer: düğüm, içeriği ve dinleyicileri aynen yerinde. KAPSAM DAR: seçici `.tsw-panel-govde` altında -- sayfanın başka yerlerindeki `.tff-field` kutuları (sepet, ödeme) etkilenmez. */ body.tsw-aktif #ozel .tsw-panel-govde .tff-field { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 16px 0 !important; margin: 0 !important; border-bottom: 1px solid rgba(59, 44, 53, 0.10) !important; } /* Son ayraç düşer: panelin dibinde havada asılı bir çizgi kalmasın. `:last-child` YETMEZ -- kapların içinde gizli kardeşler var (ör. kademe modelinde `display:none` yapılan boyut ızgarası). `:last-of-type` da yanıltıcı; bu yüzden GÖRÜNÜR son kutu JS'te işaretlenmiyor, bunun yerine ayraç bir SONRAKİ görünür kardeşi olmayan kutuda da zararsız kalsın diye panelin dibine 18px dolgu bırakıldı ve çizgi çok soluk. */ body.tsw-aktif #ozel .tsw-panel-govde .tff-field:last-child { border-bottom: 0 !important; } /* TEMA SEÇİCİSİ DE BİR KAP, KART DEĞİL. ÖLÇÜLDÜ (panelin içindeki kart-benzeri kutuların taranması, altı aracın hepsinde): `.tff-field` dışında geriye tek bir kap kalıyordu -- `#cardStylePicker.cs-picker` (zemin #FFF9F0, yarıçap 16, kenarlık). Panel krem olunca o da "kart içinde kart" oluyordu. Tarama ayrıca `.tk-qty` (adet sayacı hapı) buldu; o bir KONTROL, kap değil -- dokunulmadı. Temanın KÜÇÜK KARTLARINA (isim/görsel düzeni) dokunulmuyor: W2 kapsamı. */ body.tsw-aktif #ozel .tsw-panel-govde .cs-picker { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; } /* --- 6c) TEK DİKEY BOŞLUK ÖLÇEĞİ (md.6) --------------------------------- Kerem: "başlıklar ile içerik arasındaki boşluklar tutarsız (bazı yerde çok geniş)". ÖLÇÜLDÜ (Fotoğraf paneli, düzeltme öncesi): bölüm dolgusu 16, başlık altı 12, yardım satırı üstü 8, arka plan anahtarı üstü 10, kalite durumu üstü 8, adım şeridi üstü 8 -- altı farklı değer, hiçbiri bir ölçekten gelmiyor. Hepsi `--tsw-ara-*` üç basamağına indiriliyor. YÖNTEM: her düğüme tek tek pay yazmak yerine AKIŞ KURALI. Bir bölümün içinde ardışık iki blok arasındaki mesafe TEK bir değerdir; ilk blok pay almaz. Böylece yeni bir kontrol eklendiğinde de ritim kendiliğinden korunur -- listeyi güncellemeyi unutmak diye bir şey kalmıyor. ARALIĞIN SAHİBİ `gap`, MARJ DEĞİL -- ölçüldü: tasarla-sahne.css bölümleri `display:flex !important; flex-direction:column; gap:var(--kart-bosluk)` yapıyor. Önce marjla ritim kurmayı denedim ve aralık 18px çıktı: 10px'lik marj, 8px'lik flex boşluğunun ÜSTÜNE biniyordu (marj ile gap toplanır). Doğru yer tek: `gap`. Marjlar sıfırlanır ki ikinci bir kaynak kalmasın. */ body.tsw-aktif #ozel .tsw-panel-govde .tff-field, body.tsw-aktif #ozel .tsw-panel-govde .cs-picker { gap: var(--tsw-ara-2) !important; } body.tsw-aktif #ozel .tsw-panel-govde .tff-field > *, body.tsw-aktif #ozel .tsw-panel-govde .cs-picker > * { margin-top: 0 !important; margin-bottom: 0 !important; } /* Bölüm başlığı (etiket) kendi satırında dursun -- yan yana akan bir `label` başlığı kontrolün etiketi gibi okunuyordu. KOMUT B2-4 (ölçüldü 30 Ağustos 2026, 1920x911): bu kural BAŞLIK etiketleri için yazılmıştı ama `.tff-bgremove-toggle` DA bir `label` ve `.tff-field`in doğrudan çocuğu -- yani "Arka Planı Kaldır" anahtarının kendi `display: flex`ini eziyordu. Sonuç ölçüldü: sarmalayıcı `display: block`, `.tff-bgremove-track` satır-içine düşüp genişliği YOK SAYIYOR (38px yazılı, çizilen kutu 2px), buna göre konumlanan `.tff-bgremove-thumb` (16px, mutlak) etiketin ilk harflerinin ÜSTÜNE biniyordu: "●ka Planı Kaldır". Kural artık BAŞLIK etiketlerini hedefliyor; anahtar dışarıda. */ body.tsw-aktif #ozel .tsw-panel-govde .tff-field > label:not(.tff-bgremove-toggle), body.tsw-aktif #ozel .tsw-panel-govde .tff-field > legend { display: block; } /* Bölüm dolgusu da ölçekten: üst ve alt EŞİT olsun ki ayraçlar ritmi bozmasın. (Yukarıdaki düzleştirme kuralı `padding: 16px 0` yazıyordu -- aynı seçici ailesi olduğu için burada ölçek değeriyle tazeleniyor.) */ body.tsw-aktif #ozel .tsw-panel-govde .tff-field { padding: var(--tsw-ara-3) 0 !important; } /* --- 3b) YÜKLEME ALANI: KESİKLİ KUTU, DAR RİTİM (md.3) ------------------- Kerem: "çerçevesi yok, nereye bırakılacağı belirsiz ve etrafında çok boşluk var." KÖK NEDEN (ölçüldü, el.matches taraması): tasarla-sahne.css'in "kart içinde kart yok" kuralı -- `.ts-step-panel .tff-field > div:not(.tff-swatches):not(...)` -- bırakma kutusunu da yakalıyor ve `border:0 !important; padding:0 !important` yazıyor. Kutunun kesikli kenarlığı (tasarla-adimlar.css) ve 44px'lik dolgusu (tasarla.css) böylece DÜŞÜYOR; geriye yalnız `min-height:190px` kalıyor ve içerik o boşlukta ortalanıyor -- yani "çerçevesiz, çok boşluklu" görüntünün kaynağı tek bir `!important`. Kutu burada geri veriliyor; `!important` zorunlu, karşı kural da öyle. */ body.tsw-aktif #ozel .tsw-panel-govde .tff-file-upload { border: 1.5px dashed rgba(201, 134, 43, 0.45) !important; border-radius: var(--miqno-alan-yaricap) !important; background: rgba(244, 184, 96, 0.05) !important; padding: var(--tsw-ara-3) !important; /* `!important` ŞART: tasarla.css `.tasarla-page #ozel #tab-photo .tff-file-upload{min-height:190px}` İKİ ID taşıyor (2,2,0) ve bizim (1,3,1) onu yenemiyor -- ölçüldü, kutu 190px'te kalmıştı ve içeriği (ikon 28 + yazı 26 + dolgu 32 = 92) 98px boşlukta yüzüyordu. 140: bırakma hedefi olarak hâlâ rahat, boşluk yarı yarıya iniyor. */ min-height: 140px !important; gap: var(--tsw-ara-1); } body.tsw-aktif #ozel .tsw-panel-govde .tff-file-upload:hover { border-color: var(--coral, #E96A4B) !important; background: rgba(233, 106, 75, 0.06) !important; } /* Yükleme ikonu (::before) 40px'ten 28'e; alt payı ölçekten. */ body.tsw-aktif #ozel .tsw-panel-govde .tff-file-upload::before { width: 28px; height: 28px; margin-bottom: var(--tsw-ara-1); } body.tsw-aktif #ozel .tsw-panel-govde .tff-file-upload span { font-size: 0.92rem; } /* --- 4b) "FOTOĞRAFI AYARLA" FOTOĞRAF YOKKEN GÖRÜNMEZ (md.4) -------------- Kerem: "Panelde tek başına ortada duruyor ve fotoğraf yokken de aktif -- ne ayarlayacağı belirsiz." KÖK NEDEN (ölçüldü): düğümün `hidden` NİTELİĞİ zaten AÇIK (`hidden: true`) -- yani sayfanın kendi kapısı doğru çalışıyor. Onu ezen şey tf-sayfa.css'in `.photo-adjust-row{display:flex}` kuralı; `[hidden]`ın örtük `display:none`u sınıf kuralına yeniliyor. Eski düzende satır `.tf-kart-araclar` içindeydi ve o kap W1'de zaten gizli olduğu için hata görünmüyordu; satır Fotoğraf paneline TAŞININCA ortaya çıktı. Fotoğraf hazır olunca `window.tfPhotoAdjustReady()` niteliği kaldırıyor -- ikinci bir görünürlük kuralı YAZILMIYOR, var olan kapı onarılıyor. KURAL TEK BİR DÜĞÜME DEĞİL, PANELİN TAMAMINA yazılıyor: aynı tuzağa `#bgRemoveToggleWrap` de düşüyor (`hidden: true` iken hesaplanan `display` `block`) ve bu tur içinde bir kez daha yaşandı -- ritim kuralı `.tff-field > label{display:block}` yazınca o etiket de `[hidden]`ı ezip görünür oldu. Panelin içinde `hidden` niteliği HER ZAMAN gizler. `.tff-tab-content` DIŞARIDA: araç kaplarının görünürlüğünü `data-tsw-acik` yönetiyor ve o kuralla çarpışmamalı. */ body.tsw-aktif #ozel .tsw-panel-govde [hidden]:not(.tff-tab-content) { display: none !important; } /* Görünür olduğunda: "Fotoğrafın" bölümünün ilk satırı -- sola yaslı, kendi payı ölçekten (JS onu yükleme alanının etiketinin hemen altına taşıyor). */ body.tsw-aktif #ozel .tsw-panel-govde .photo-adjust-row { justify-content: flex-start; } /* Panel krem olunca KOYU SAHNE için yazılmış açık mürekkepler ters döner. ÖLÇÜLDÜ: `.tasarla-foto-baslik` rgb(243,232,220) / krem = 1.1:1 -- pratikte GÖRÜNMÜYOR. Başlıklar koyu mürekkebe, alt metinler soluk mürekkebe döner (tasarla-sahne.css'in açık kart değerleriyle aynı). */ body.tsw-aktif #ozel .tsw-panel-govde .tasarla-foto-baslik, body.tsw-aktif #ozel .tsw-panel-govde h3, body.tsw-aktif #ozel .tsw-panel-govde h4, body.tsw-aktif #ozel .tsw-panel-govde label, body.tsw-aktif #ozel .tsw-panel-govde legend { color: #2A1E25 !important; } body.tsw-aktif #ozel .tsw-panel-govde .tasarla-foto-alt, body.tsw-aktif #ozel .tsw-panel-govde .k2-soon, body.tsw-aktif #ozel .tsw-panel-govde .tff-hint, body.tsw-aktif #ozel .tsw-panel-govde .photo-adjust-hint { color: #6B5A62 !important; } /* Fotoğraf aracının giriş başlığı artık PANEL BAŞLIĞIYLA aynı şeyi söylüyor (ad + tek satır açıklama). İkisi üst üste gelmesin diye giriş bloğu düşer; düğüm DOM'da kalır (mobil katman ve adım motoru onu okuyor). */ body.tsw-aktif #ozel .tsw-panel-govde .tasarla-foto-giris { display: none !important; } /* --- 7) CTA HEP GÖRÜNÜR (madde 3) -------------------------------------- Kabuğun SON SATIRI. Kabuk viewport'a sığdığı için bar da her zaman ekranda; ayrıca `position:sticky; bottom:0` ile kabuk beklenmedik şekilde uzarsa (çok uzun bir panel, zoom) bar yine dibe yapışır. TEK SATIR: yüksekliği içerikten bağımsız sabit kalsın ki kanvas hiçbir durumda yeniden ölçülmesin (mobilde ölçülen hata buydu). */ /* CTA da PANELİN YÜZEYİNDE (md.6: panel baştan sona tek açık yüzey). Eski koyu gradyan bar krem panelin dibinde ikinci bir kat gibi duruyordu. Üç satır: [Boy · Adet] / [fiyat · Sepete Ekle] / [neden -- yeri ayrılmış]. */ /* BLOK 2. Ayraç çizgisi (`border-top`) KALKTI -- iki blok artık kendi kenarlıklarıyla ayrılıyor, araya ikinci bir çizgi koymak "tek yüzey bölünmüş" izlenimi verirdi. G2 · YÜKSEKLİK ARTIK İÇERİKTEN. Eskiden `--tsw-cta-h: 150px` sabitti ve o sayı ESKİ üç satırlık düzene göre hesaplanmıştı (42+48+18+aralar). Yeni blok dört satır (boyut · adet · fiyat · Sepete Ekle) -> sabit yükseklik ADET BLOĞUNU EZİYORDU (ölçüldü: ekran görüntüsünde adet satırı ince bir çizgiye inmişti). Sabit yüksekliğin gerekçesi "panel her araçta farklı yükseklikte kaymasın"dı; bu blok artık ARAÇTAN BAĞIMSIZ (dört araçta da aynı içerik). Tek değişen eşik ipucu satırı ve o da Kerem'in açık şartı: "adet 12 -> satır tamamen kaybolur, BOŞ YER BIRAKMAZ." Sabit yükseklikle o satırın yeri ayrılmış kalırdı. Yükseklik içerikten türüyor; farkı BLOK 1 (flex: 1) yutuyor ve kart öbür sütunda olduğu için kıpırdamıyor. */ body.tsw-aktif #ozel .tsw-cta { flex: 0 0 auto; height: auto; position: sticky; bottom: 0; z-index: 2; display: grid !important; /* ══════════ İKİ SATIR, YAN YANA (Kerem, 10 Eylül 2026) ════════════════ "Adet ve boyut yan yana tek satıra insin; sepete ekle butonunun yanında fiyat olsun. Amacımız üstteki alanımız geniş olsun." ÖNCE DÖRT AYRI SATIRDI ve blok 272 px'ti (ölçüldü, 1440): 47 boyut · 46 adet · 58 fiyat · 48 ekle · 18 ÖLÜ + 4 boşluk Beşinci satır BOMBOŞTU: "neden" satırı 2 Eylül 2026'da kaldırılmış ama ızgaradaki 18 px'lik yeri kalmıştı -- hiçbir düğüm oraya girmiyordu. BEŞ EŞİT SÜTUN, ÖLÇÜLEN EN KÜÇÜKLERDEN türedi (kap 414 px, boşluk 8): adet bloğu en az 154 px ister (44 + 44 ok, ortada ADET + sayı) -> 2 sütun = 161 px, sığar; 1 sütun = 76 px, sığmazdı. tutar "₺3.294" 1.42rem Oswald ile ~90 px -> 2 sütun rahat. Bölüşüm: boyut 3 · adet 2 / fiyat 2 · ekle 3. */ grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: auto auto auto; /* boyut+adet · fiyat+ekle · ayrıntı */ align-items: stretch; gap: 8px; padding: 12px 16px 8px; border: 1px solid var(--tsw-blok-kenar); border-radius: var(--miqno-blok-yaricap); box-shadow: var(--tsw-blok-golge); background: var(--tsw-blok-zemin); } /* --- 7b) BOY / ADET (md.8) ---------------------------------------------- Mockup W1/W2: CTA'nın hemen ÜSTÜNDE iki açılır kutu. İkisi de kendi kontrolünün VEKİLİ -- Boy `input[name=customSize]` radyosunu tıklar, Adet `window.tfCustomQtySet()` çağırır. İkinci bir fiyat/kademe hesabı YAZILMADI: fiyatı zaten o iki kapı tazeliyor (bkz. tasarla-masaustu.js). */ /* ══════════ G2 · BOYUT SATIRI ═══════════════════════════════════════════ Tek satırlık blok: üstte küçük punto etiket, altında seçili boyutun adı. Liste bloğun ALTINA YAPIŞIK açılır -- üst köşeler düz, alt köşeler yuvarlak, yani ikisi TEK GÖVDE gibi okunur. Yarıçap tek kaynaktan (--miqno-alan-yaricap); elle sayı yazılmıyor. */ body.tsw-aktif #ozel .tsw-boyut-sar { grid-column: 1 / 4; grid-row: 1; position: relative; } body.tsw-aktif #ozel .tsw-boyut { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 12px; min-height: 46px; border: 1px solid #EADBC8; border-radius: var(--miqno-alan-yaricap); background: #FFFDF8; color: #2A1E25; font-family: inherit; cursor: pointer; text-align: left; } /* TEK BOYUT: ok yok, tıklanamaz, sessiz renkte. Kural sayıdan türüyor -- `data-tek` JS'te seçenek sayısına bakılarak yazılıyor. */ body.tsw-aktif #ozel .tsw-boyut-sar[data-tek="1"] .tsw-boyut { cursor: default; } body.tsw-aktif #ozel .tsw-boyut-sar[data-tek="1"] .tsw-boyut-ok { display: none; } body.tsw-aktif #ozel .tsw-boyut-sar[data-tek="1"] .tsw-boyut-ad { color: #6B5A62; } /* Liste açıkken üst gövdeyle dikişsiz birleşsin. */ body.tsw-aktif #ozel .tsw-boyut[aria-expanded="true"] { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-color: transparent; } body.tsw-aktif #ozel .tsw-boyut-sol { display: flex; flex-direction: column; gap: 1px; min-width: 0; } body.tsw-aktif #ozel .tsw-boyut-et { font-size: 0.62rem; letter-spacing: .12em; color: #6B5A62; } body.tsw-aktif #ozel .tsw-boyut-ad { font-size: 0.9rem; font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.tsw-aktif #ozel .tsw-boyut-ok { display: flex; color: #6B5A62; } body.tsw-aktif #ozel .tsw-boyut-ok svg { width: 18px; height: 18px; } body.tsw-aktif #ozel .tsw-boyut-liste { position: absolute; left: 0; right: 0; top: 100%; z-index: 4; display: flex; flex-direction: column; border: 1px solid #EADBC8; border-top: 0; border-radius: 0 0 var(--miqno-alan-yaricap) var(--miqno-alan-yaricap); background: #FFFDF8; overflow: hidden; box-shadow: 0 10px 24px -16px rgba(0,0,0,.45); } body.tsw-aktif #ozel .tsw-boyut-liste[hidden] { display: none; } body.tsw-aktif #ozel .tsw-boyut-satir { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; min-height: 42px; border: 0; background: transparent; color: #2A1E25; font-family: inherit; font-size: 0.86rem; cursor: pointer; text-align: left; } body.tsw-aktif #ozel .tsw-boyut-satir:hover { background: rgba(59,44,53,.05); } body.tsw-aktif #ozel .tsw-boyut-satir[aria-selected="true"] { background: rgba(244,184,96,.16); font-weight: 600; } body.tsw-aktif #ozel .tsw-boyut-satir-fiyat { color: #6B5A62; white-space: nowrap; } /* ══════════ G2 · ADET — TEK BLOK, ÜST SINIR YOK ═════════════════════════ İki ucunda ok, ortada etiket ve sayı. Dokunma hedefi 44 px (mobil kuralıyla aynı sayı; masaüstünde de fare hedefi rahat olsun). */ body.tsw-aktif #ozel .tsw-adet-blok { grid-column: 4 / 6; grid-row: 1; display: flex; align-items: stretch; justify-content: space-between; border: 1px solid #EADBC8; border-radius: var(--miqno-alan-yaricap); background: #FFFDF8; overflow: hidden; } body.tsw-aktif #ozel .tsw-adet-ok { flex: 0 0 auto; width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: #2A1E25; cursor: pointer; transition: background-color 140ms ease; } body.tsw-aktif #ozel .tsw-adet-ok svg { width: 18px; height: 18px; } /* BASINCA OKUN ARKASINDA YUMUŞAK ZEMİN. */ body.tsw-aktif #ozel .tsw-adet-ok:active:not([disabled]) { background: rgba(59,44,53,.10); } body.tsw-aktif #ozel .tsw-adet-ok:hover:not([disabled]) { background: rgba(59,44,53,.05); } /* ALT SINIR 1: sol ok soluklaşır ve tıklanamaz. Sağ ok HİÇ kapanmaz. */ body.tsw-aktif #ozel .tsw-adet-ok[disabled] { opacity: .3; cursor: default; } body.tsw-aktif #ozel .tsw-adet-orta { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; } body.tsw-aktif #ozel .tsw-adet-et { font-size: 0.62rem; letter-spacing: .12em; color: #6B5A62; } body.tsw-aktif #ozel .tsw-adet-sayi { font-family: 'Oswald', var(--fx-font-display, sans-serif); font-size: 1.05rem; color: #2A1E25; min-width: 2ch; text-align: center; } /* G2 · FİYAT — TOPLAM tutar, altında birim ayrıntısı, altında eşik ipucu. Artık DÜĞME DEĞİL: Boyut & Adet kabına giden kapı olmasına gerek kalmadı, ikisi de bu blokta duruyor. */ body.tsw-aktif #ozel .tsw-fiyat { grid-column: 1 / 3; grid-row: 2; display: flex; align-items: center; justify-content: flex-start; padding: 0 2px; background: transparent; color: inherit; text-align: left; } body.tsw-aktif #ozel .tsw-fiyat-tutar { font-family: 'Oswald', var(--fx-font-display, sans-serif); font-size: 1.42rem; line-height: 1.1; color: #2A1E25; white-space: nowrap; } /* AYRINTI + İPUCU ARTIK ALT SATIRDA, YAN YANA. Tutarın altında alt alta dururken blok 58 px'ti ve düğmenin yanına sığmıyordu. İkisi de kısa (~130 px ve ~250 px); 414 px'lik satıra TEK SATIRDA giriyor. Sığmazsa sarar -- kesilmez, çünkü ikisi de fiyatın gerekçesi. */ body.tsw-aktif #ozel .tsw-fiyat-alt { grid-column: 1 / -1; grid-row: 3; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; min-height: 0; padding: 0 2px; } body.tsw-aktif #ozel .tsw-fiyat-alt[hidden] { display: none !important; } body.tsw-aktif #ozel .tsw-fiyat-ayrinti { font-size: 0.72rem; line-height: 1.25; color: #6B5A62; } /* EŞİK İPUCU — hep BİR SONRAKİ eşiği söyler. Son kademede `hidden` gelir ve satır TAMAMEN kaybolur: boş yer bırakmaz (`display:none`), yoksa blokta ölü bir satır kalırdı. */ body.tsw-aktif #ozel .tsw-fiyat-ipucu { font-size: 0.72rem; line-height: 1.3; color: var(--gold-text, #C9862B); } body.tsw-aktif #ozel .tsw-fiyat-ipucu[hidden] { display: none; } /* SEPETE EKLE — MARKA DİLİ (md.3). Kerem: "pasif haldeyken hardal/kahve bir renge dönüyor ve üstündeki beyaz yazı okunuyor -- aktif buton sanılıyor." Eski hal altın GRADYAN + %50 opaklık idi; opaklık düşürmek altını hardala çeviriyor ama hâlâ DOLU bir düğme gibi duruyordu. Artık iki halin RENGİ farklı, opaklık kullanılmıyor. Tipografi de marka düğmesine döner: `.btn` (tf-sayfa.css:59) Inter 600, 0.95rem, BÜYÜK HARF YOK -- Oswald + uppercase + 0.05em bu sayfaya ait değildi. */ body.tsw-aktif #ozel .tsw-ekle { grid-column: 3 / 6; grid-row: 2; flex: 1 1 auto; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; /* G2: yarıçap tek kaynaktan (--miqno-dugme-yaricap), elle sayı yok. */ padding: 12px 18px; border-radius: var(--miqno-dugme-yaricap); cursor: pointer; border: 1px solid transparent; background: var(--coral, #E96A4B); color: #FFFFFF; font-weight: 600; font-family: 'Inter', var(--fx-font-body, sans-serif); font-size: 0.95rem; letter-spacing: 0.02em; text-transform: none; transition: background .18s ease, color .18s ease; /* Alt blok artık SABİT yükseklikli (--tsw-cta-h): butonun metni sepete eklendikten sonra uzuyor ("✓ Sepete eklendi · Sepete git") ve sarsaydı satır iki kata çıkıp bloğu taşırırdı. Tek satır, gerekirse kırpılır. */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.tsw-aktif #ozel .tsw-ekle:hover { background: var(--coral-2, #DE5636); } body.tsw-aktif #ozel .tsw-ekle:focus-visible { outline: 2px solid #2A1E25; outline-offset: 2px; } /* FOTOĞRAFSIZ: soluk ama TIKLANABİLİR (`disabled` DEĞİL) -- müşteri basınca nedenini öğrenmeli ve doğru araca gitmeli. Mobildeki kuralın aynısı. Mockup: soluk krem zemin + soluk gri yazı. Kontrast bilerek DÜŞÜK ama okunur: #8C8078 / #F6EFE4 = 3.6:1 -- "şu an basılacak düğme bu değil" mesajı rengin kendisinden okunmalı. */ body.tsw-aktif #ozel .tsw-cta[data-hazir="0"] .tsw-ekle { opacity: 1; background: #F6EFE4; border-color: #EADBC8; color: #8C8078; } body.tsw-aktif #ozel .tsw-cta[data-hazir="0"] .tsw-ekle:hover { background: #F1E7D8; } /* ÇİFT CTA OLMAZ. Gerçek sepet düğmesi `#tab-size` panelinin içinde ve kalıcı CTA barı zaten ONU vekaleten çağırıyor (ince delege). Boyut paneli açıkken ikisi alt alta iki özdeş altın düğme olarak görünüyordu. GİZLENİR AMA SİLİNMEZ: kapı odur, `.click()` gizli düğümde de çalışır ve `#customCardPriceTag` metni `display:none` iken de okunur. */ body.tsw-aktif #ozel #addCustomCartBtn { display: none !important; } /* ÜST BAR: adım motorunun iki hücreli satırı üç sütuna hizalanmıyor. Sağ hücre zaten susturuldu; kalan ÖNİZLEME rozeti tek satırlık bir başlık olarak kabuğun üstünde durur. */ body.tsw-aktif #ozel .ts-topbar { display: block; margin: 0 0 6px; /* Rozet KANVASIN sol üstüne hizalanır (mockup'taki yeri): rayın genişliği kadar içeriden başlar. Adım motorunun iki hücreli satır tanımı bu düzende rozeti sağ panelin üstüne atıyordu (ölçüldü). */ padding: 0 var(--tsw-blok-w) 0 22px; } body.tsw-aktif #ozel .ts-topbar-sol { /* TEK SATIR. Ölçüldü: rozet ve not alt alta dururken satır 57px yer kaplıyordu; o 57px doğrudan kabuktan düşüyor, yani karttan kısıyor. */ /* `flex-direction: row` AÇIKÇA yazılır: tasarla-adimlar.css bu kutuyu `column` yapıyor (adım düzeninde rozet ile not alt alta duruyordu) ve yalnız `display:flex` yazmak onu düşürmüyor -- ölçüldü, rozet/not/zar üç ayrı satıra iniyordu. */ display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 9px; margin: 0; padding: 0; line-height: 1.2; } /* D (2 Eylül 2026): AYRI NEDEN SATIRI KALKTI (markup + bu kurallar birlikte). Neden artık CTA butonunun kendi metni. Satır her durumda aynı yüksekliği kapladığı için kaldırılması kabuk ölçüsünü DEĞİŞTİRMEZ. */ /* ZAR ROZETİN YANINDA, ETİKETSİZ İKON (mockup W1: kartın üzerinde düğme yok). */ body.tsw-aktif #ozel .ts-topbar-sol .tsw-zar { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; margin-left: 4px; border: 1px solid rgba(244,184,96,0.42); border-radius: 9px; background: transparent; color: var(--gold, #F4B860); cursor: pointer; } body.tsw-aktif #ozel .ts-topbar-sol .tsw-zar svg { width: 16px; height: 16px; } body.tsw-aktif #ozel .ts-topbar-sol .tsw-zar .tf-zar-lbl { display: none; } body.tsw-aktif #ozel .ts-topbar-sol .tsw-zar:hover { background: rgba(244,184,96,0.12); } /* Şeridin kendisi boşaldı: iki parçası da yeni evine taşındı. */ body.tsw-aktif #ozel .customizer-preview .tf-kart-araclar { display: none !important; } /* --- 8) ADIM MOTORUNUN ARTIKLARI --------------------------------------- "Devam →" düğümleri adım motorunda zaten `hidden`; Onay adımının kısayol kartı (`.ts-jump`) ise adım kavramına ait -- araç modelinde karşılığı yok. */ /* "Bir seyi degistir" karti (.ts-card) Onay ADIMININ cocugu. `.ts-step-panel` `display:contents` olunca o kart da sag sutunun dogrudan cocugu haline geliyor ve -- bir `.tff-tab-content` OLMADIGI icin -- arac gorunurluk kuralimizin disinda kalip HER araçta gorunuyordu (olculdu: Tema panelinde bos bir "BIR SEYI DEGISTIR" basligi). Mobil katman da ayni sebeple ayni kurali yaziyor (tasarla-mobil.css). Arac modelinde karsiligi yok: raydaki her arac zaten tek tikla erisilebilir. */ body.tsw-aktif #ozel .customizer-form .ts-card, body.tsw-aktif #ozel .ts-jump, body.tsw-aktif #ozel .tff-next, body.tsw-aktif #ozel .tfyt-ileri { display: none !important; } /* ========================================================================== * FAZ W2 — TEMA · ÇERÇEVE · ARKA PLAN PANELLERİ * (Kerem, 28 Ağustos 2026 — mockup W2/W3) * * TEK IZGARA SÖZLEŞMESİ: üç panelde de aynı sütun sayısı, aynı kutu oranı, * aynı boşluk. Değerler tek yerden gelir (`--tsw-izgara-*`) -- iki ızgara * ayrı ayrı yazılırsa yarın biri değişir, öteki kalır. * ======================================================================== */ body.tsw-aktif { /* KOMUT G3-D: ÇERÇEVE ızgarası 4 sütun oldu; ARKA PLAN ızgarası 6'da kaldı. "TEK IZGARA SÖZLEŞMESİ"nden BİLEREK bir ayrılış (Kerem: "6 sütun/59 px yerine 4 sütun olsun"). Ayrım görünür olsun diye ayrı değişken; ikisi bir gün yine eşitlenecekse tek satır yeter. Mobilde de aynı desen var (`--tsm-cerceve-sutun`). */ --tsw-izgara-sutun: 6; --tsw-cerceve-sutun: 4; --tsw-izgara-bosluk: 8px; /* YATAY VE DİKEY AYNI: `gap` tek değer alır */ --tsw-izgara-oran: 3 / 4; /* kart oranı; kutular eşit yükseklikte kalsın */ } /* --- W2.1) TEMA ÇİPLERİ --------------------------------------------------- Kerem: "küçük kutucuklar (isimler üç satıra kırılıyor, görseller çok küçük) kalkacak... YATAY KAYDIRMALI çip şeridi olacak: sabit yükseklikte, isim tek satır, seçili çip mercan vurgulu. Yeni tema eklendiğinde çipler küçülmeyecek, şerit yatayda kayacak." ÖLÇÜLDÜ (düzeltme öncesi): `#tab-tema .cs-scroll` bir IZGARA idi (`grid-auto-flow:column; grid-auto-columns:1fr`) -- yani sütunlar paneli PAYLAŞIYORDU. Altı temada çip genişlikleri 57 ve 69px'e düşmüş, adlar 31px yüksekliğinde iki-üç satıra kırılmıştı ("Renk Koleksiyonu"). Yedinci tema eklendiğinde hepsi bir tık daha küçülecekti. ÇÖZÜM YERLEŞİM CİNSİNİ DEĞİŞTİRMEK: ızgara yerine ESNEK ŞERİT ve `flex: 0 0 auto` -- çip kendi içeriği kadar yer kaplar, sığmayınca şerit yatayda kayar. Küçük resim (`.cs-thumb`) düşer; mockup'ta çip METİNDİR. Düğüm SİLİNMEZ: mobil katman aynı düğümü küçük resimli kullanıyor. */ /* KOMUT G3-D: BU KURAL YALNIZ ŞERİT HÂLİNE. `display:flex !important` buton ızgarası hâlini de yakalıyor ve bileşenin `display:grid` sözleşmesini eziyordu -- sütun tanımı düşüyor, buton genişliğini içerik belirliyordu (ölçüldü: kap 2872 px, 8 satır, buton 226 px). ŞERİT hâli esnek şerit olmaya devam eder. */ body.tsw-aktif #ozel .tsw-panel-govde #cardStylePicker .cs-scroll:not(.tfy-tema-kap--izgara) { display: flex !important; flex-wrap: nowrap; grid-auto-flow: unset; grid-template-columns: none; gap: var(--tsw-ara-1) !important; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; padding-bottom: 4px; scrollbar-width: thin; scrollbar-color: rgba(201, 134, 43, 0.35) transparent; } /* --- W-T1) AÇILIŞ IZGARASI DA YATAY ŞERİT (Kerem, 23 Eylül 2026) ---------- "Webde tema kısmı sağa sola kaydırılabilir olmalı." ÖLÇÜLDÜ (1280 ve 1440, Tema aracı açık, seçim yokken): `.tfy-tema-kap--izgara` 3 sütunlu ızgara -> 15 tema 5 SATIR, kap 1111 px, `overflow-x: visible`, scrollWidth = clientWidth = 392 (yani yatayda kaydırılamıyor) ve panel 1225 px'e uzuyordu. Aynı bileşenin ŞERİT hâli (seçim sonrası) zaten yatay kayıyor. ÇÖZÜM: masaüstünde AÇILIŞ hâli de tek satırlık yatay şerit olur -- buton TASARIMI değişmez (kapak + ad + "N çerçeve"), yalnız yerleşim cinsi. Bileşenin kendi `display:grid` sözleşmesi (tf-tema-butonu.css, G3-D) ve MOBİL ızgara DOKUNULMADI: kural `body.tsw-aktif` ve 940 px üstü medya bloğunun içinde. */ body.tsw-aktif #ozel .tsw-panel-govde #cardStylePicker .cs-scroll.tfy-tema-kap--izgara { display: flex; flex-wrap: nowrap; grid-template-columns: none; gap: var(--tsw-ara-1); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; padding-bottom: 4px; scroll-padding-inline: 34px; scrollbar-width: thin; scrollbar-color: rgba(201, 134, 43, 0.35) transparent; } /* Buton KÜÇÜLMEZ: yeni tema eklendiğinde şerit uzar, kutular aynı kalır (ŞERİT hâlindeki `flex: 0 0 auto` kuralının ızgara karşılığı). */ body.tsw-aktif #ozel .tsw-panel-govde #cardStylePicker .cs-scroll.tfy-tema-kap--izgara > .tfy-tb { flex: 0 0 125px; scroll-snap-align: start; } body.tsw-aktif #ozel .tsw-panel-govde #cardStylePicker .cs-scroll::-webkit-scrollbar { height: 5px; } body.tsw-aktif #ozel .tsw-panel-govde #cardStylePicker .cs-scroll::-webkit-scrollbar-track { background: transparent; } body.tsw-aktif #ozel .tsw-panel-govde #cardStylePicker .cs-scroll::-webkit-scrollbar-thumb { background: rgba(201, 134, 43, 0.32); border-radius: 999px; } body.tsw-aktif #ozel .tsw-panel-govde #cardStylePicker .cs-style { flex: 0 0 auto; /* KÜÇÜLME YOK -- maddenin kendisi */ display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 14px; gap: 0; border: 1px solid #EADBC8; border-radius: 999px; background: #FFFDF8; transition: border-color .16s ease, color .16s ease; } body.tsw-aktif #ozel .tsw-panel-govde #cardStylePicker .cs-thumb { display: none !important; } body.tsw-aktif #ozel .tsw-panel-govde #cardStylePicker .cs-name { font-size: 0.84rem !important; line-height: 1 !important; white-space: nowrap; /* TEK SATIR -- maddenin kendisi */ color: #2A1E25 !important; text-align: left !important; } body.tsw-aktif #ozel .tsw-panel-govde #cardStylePicker .cs-style:hover { border-color: rgba(233, 106, 75, 0.45); } body.tsw-aktif #ozel .tsw-panel-govde #cardStylePicker .cs-style.active { border-color: var(--coral, #E96A4B); box-shadow: 0 0 0 1px var(--coral, #E96A4B) inset; } body.tsw-aktif #ozel .tsw-panel-govde #cardStylePicker .cs-style.active .cs-name { color: var(--coral, #E96A4B) !important; font-weight: 600; } /* Bölüm başlığı diğerleriyle aynı dilde (küçük, mercan, harf aralıklı). */ body.tsw-aktif #ozel .tsw-panel-govde #cardStylePicker .cs-title { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--coral, #E96A4B) !important; } /* --- W2.2/3/4) ÜÇ IZGARA, TEK KURAL -------------------------------------- Çerçeve ızgarası ve arka plan ızgarası AYNI kuralı okur. (K1-4'e kadar üçüncü bir okuyucu daha vardı: tema panelindeki AYNA ızgara; kaldırıldı.) ÖLÇÜLDÜ (düzeltme öncesi): çerçeve ızgarası `repeat(6,...)` + `gap:8px` idi ama arka plan ızgarası `repeat(6,1fr)` + `gap:5px` + kendi `max-height:330px; overflow-y:auto` kutusuydu -- yani hem boşluk farklıydı hem de panelin İÇİNDE İKİNCİ BİR KAYDIRMA kabı vardı (W1'in "kayan tek yer panel gövdesi" kuralına aykırı). İkisi de tek kurala bağlandı. */ body.tsw-aktif #ozel .tsw-panel-govde #frameFamilyGroup, body.tsw-aktif #ozel .tsw-panel-govde .tfyt-bg-liste { display: grid !important; grid-template-columns: repeat(var(--tsw-izgara-sutun), minmax(0, 1fr)) !important; gap: var(--tsw-izgara-bosluk) !important; align-content: start; /* İÇ KAYDIRMA YOK: kayan tek yer panel gövdesi (W1 md.1). */ max-height: none !important; overflow: visible !important; padding-right: 0 !important; margin: 0 !important; } /* G3-D: yalniz CERCEVE izgarasi 4 sutun. Ortak blok yukarida duruyor -- burada tek bir bildirim eziliyor, ikinci bir geometri yazilmiyor. */ body.tsw-aktif #ozel .tsw-panel-govde #frameFamilyGroup { grid-template-columns: repeat(var(--tsw-cerceve-sutun), minmax(0, 1fr)) !important; } /* `:not([hidden])` ŞART (ölçüldü, bu turda): W1'in "panelde `hidden` her zaman gizler" kuralı (1,4,1) özgüllüğünde; buradaki kutu kuralı İKİ ID taşıyor (2,3,1) ve `display:flex !important` ile onu yeniyordu. Sonuç: çerçeve ızgarasında `hidden` olan `classic` ailesi görünür oldu -- futbolcu temasında 4 yerine 5 kutu sayıldı. Görünürlük kararının sahibi yine `hidden`; kutu kuralı ona hiç karışmıyor. */ body.tsw-aktif #ozel .tsw-panel-govde #frameFamilyGroup .tff-frame-family:not([hidden]), body.tsw-aktif #ozel .tsw-panel-govde .tfyt-bg-liste .tfyt-bg:not([hidden]) { aspect-ratio: var(--tsw-izgara-oran); width: 100%; min-width: 0; height: auto; /* ÇERÇEVE ADI (17 Eylül 2026): çerçeve karosu dolguyu RESME verir (değişken); arka plan karosu 4 px. */ padding: var(--tsw-karo-dolgu, 4px) !important; margin: 0 !important; display: flex !important; align-items: center; justify-content: center; overflow: hidden; border: 1px solid #EADBC8 !important; border-radius: 10px !important; background: rgba(59, 44, 53, 0.04) !important; box-shadow: none !important; cursor: pointer; } /* GÖRSEL KUTUYU DOLDURUR AMA EZİLMEZ. Arka plan küçük resimleri `width:100%; height:auto` ile çiziliyordu; sabit oranlı bir kutunun içinde bu, satırdaki kutuların YÜKSEKLİĞİNİ farklı yapıyor ve dikey boşluk bozuluyordu. `object-fit: cover` kutuyu doldurur, `contain` çerçevenin kendi şeklini korur -- ikisi de ORANI BOZMAZ (mobilde bildirilen "çizgi çizgi ezilme" oranın bozulmasıydı). */ body.tsw-aktif #ozel .tsw-panel-govde #frameFamilyGroup .tff-frame-family img { width: 100% !important; height: var(--tsw-karo-resim-boy, 100%) !important; object-fit: contain !important; display: block; } /* ÇERÇEVE ADI (Kerem, 17 Eylül 2026): küçük resmin altında tek satır ad. Oran karodan RESME taşındı (aynı --tsw-izgara-oran, aynı genişlik -> resim kutusu değişmez, ölçüldü 82×113); karo = resim + 18 px etiket. Sütun sayısı aynı. */ body.tsw-aktif #ozel .tsw-panel-govde #frameFamilyGroup .tff-frame-family:not([hidden]) { --tsw-karo-dolgu: 0px; --tsw-karo-resim-boy: auto; /* ortak karo kuralı bunları okur; !important eklenmedi */ aspect-ratio: auto; flex-direction: column; justify-content: flex-start; } /* Resim kutusu = eski karo içi: karo genişliğinde, aynı oran, 4 px dolgu içeride (box-sizing) -> görünen küçük resim eskisiyle aynı (82×112, ölçüldü). */ body.tsw-aktif #ozel .tsw-panel-govde #frameFamilyGroup .tff-frame-family img { aspect-ratio: var(--tsw-izgara-oran); flex: 0 0 auto; padding: 4px; box-sizing: border-box; } body.tsw-aktif #ozel .tsw-panel-govde #frameFamilyGroup .tff-frame-family .tfyt-cerceve-ad { display: block; width: 100%; height: 18px; line-height: 18px; padding: 0 4px 2px; box-sizing: content-box; font-size: 12px; font-weight: 600; text-align: center; color: var(--a-soluk, #7A6A72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.tsw-aktif #ozel .tsw-panel-govde #frameFamilyGroup .tff-frame-family.active .tfyt-cerceve-ad { color: var(--coral, #E96A4B); } body.tsw-aktif #ozel .tsw-panel-govde .tfyt-bg-liste .tfyt-bg img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; border-radius: 6px; } /* SEÇİLİ OLAN VURGU ÇERÇEVESİYLE BELLİ (md.2/3/4) — iki ızgarada da aynı. */ body.tsw-aktif #ozel .tsw-panel-govde #frameFamilyGroup .tff-frame-family:hover, body.tsw-aktif #ozel .tsw-panel-govde .tfyt-bg-liste .tfyt-bg:hover { border-color: rgba(233, 106, 75, 0.45) !important; } body.tsw-aktif #ozel .tsw-panel-govde #frameFamilyGroup .tff-frame-family.active, body.tsw-aktif #ozel .tsw-panel-govde .tfyt-bg-liste .tfyt-bg.active { border-color: var(--coral, #E96A4B) !important; box-shadow: 0 0 0 1px var(--coral, #E96A4B) inset !important; } /* Ad DIŞINDA etiket üreten düğüm gösterilmez (B4 "aile başlığı yok" kuralı duruyor; çerçeve ADI `.tfyt-cerceve-ad` 17 Eylül 2026'dan beri gösterilir). */ body.tsw-aktif #ozel .tsw-panel-govde #frameFamilyGroup .tff-frame-family > span:not(.tfyt-cerceve-ad) { display: none !important; } /* --- W2.3b) RENK ŞERİDİ -------------------------------------------------- Mockup W3: tek satır -- ilk yuvarlak GÖKKUŞAĞI (özel renk seçiciyi açar), ardından küratörlü kartelalar, sonda küçük "Rengi kaldır" metin bağlantısı. PALET DEĞİŞTİRİLMEDİ (ölçüldü): satırdaki renkler zaten Kerem'in listesi -- #D4AF37 altın · #B0B7BD gümüş · #C77B4A bakır · #7A5065 mürdüm · #245C86 lacivert · #2E6E52 zümrüt · #7B2E3A bordo · #E6D2A8 krem (tf-sayfa.js `TF_COLOR_PRESETS`). Altı temanın hepsi tarandı; hiçbirinde neon (yüksek doygunluk + yüksek açıklık) renk YOK -- bebek temasının pastelleri temaya özgü ve neon değil. Değişen yalnız BİÇİM. */ body.tsw-aktif #ozel .tsw-panel-govde .tff-color-row { display: flex !important; flex-wrap: wrap; align-items: center; gap: var(--tsw-ara-1) !important; height: auto !important; } /* TETİK = İLK YUVARLAK, GÖKKUŞAĞI. İçindeki nokta ve hex etiketi düşer; düğümler SİLİNMEZ (tf-sayfa.js seçili rengi o noktaya yazıyor). */ body.tsw-aktif #ozel .tsw-panel-govde .tff-color-trigger { width: 26px; height: 26px; min-width: 0; padding: 0 !important; border-radius: 50% !important; border: 1px solid #EADBC8 !important; background: conic-gradient(#E96A4B, #F4B860, #2E6E52, #245C86, #7A5065, #E96A4B) !important; overflow: hidden; flex: 0 0 auto; } body.tsw-aktif #ozel .tsw-panel-govde .tff-color-trigger > * { display: none !important; } body.tsw-aktif #ozel .tsw-panel-govde .tff-color-trigger:hover { border-color: var(--coral, #E96A4B) !important; } body.tsw-aktif #ozel .tsw-panel-govde .tff-color-trigger[aria-disabled="true"] { opacity: 0.35; cursor: not-allowed; } body.tsw-aktif #ozel .tsw-panel-govde .tff-swatches { display: flex !important; flex-wrap: wrap; align-items: center; gap: var(--tsw-ara-1) !important; width: auto !important; } body.tsw-aktif #ozel .tsw-panel-govde .tff-swatch { width: 26px; height: 26px; padding: 0; border-radius: 50% !important; border: 1px solid rgba(59, 44, 53, 0.18) !important; box-shadow: none !important; } body.tsw-aktif #ozel .tsw-panel-govde .tff-swatch:hover { border-color: var(--coral, #E96A4B) !important; } /* "Rengi kaldır" — şeridin SONUNDA, küçük metin bağlantısı. Görünürlüğünün sahibi hâlâ tf-sayfa.js (renk uygulanınca `hidden` düşer); burada yalnız yeri ve dili verilir. JS onu satırın içine taşıyor (bkz. dugumleriTasi). */ body.tsw-aktif #ozel .tsw-panel-govde .tff-color-row .tff-link { margin-left: auto; padding: 0; border: 0; background: none; font-size: 0.76rem; color: var(--coral, #E96A4B); text-decoration: underline; cursor: pointer; white-space: nowrap; } /* --- W2.5) RENK SEÇİCİ: TEK BİLEŞEN, YÜKSEKLİĞE DOKUNMAZ ---------------- Bileşen SİTENİN kendi `makeColorPicker` fabrikası (tf-sayfa.js; `window.tfRenkSeciciKur`) -- mobil katman da onu kullanıyor, yeniden yazılmadı. Pop `position:fixed` olduğu için AKIŞTAN ÇIKIK: açılıp kapanması ne kanvası ne panel gövdesini kıpırdatır (ölçüldü). Burada yalnız krem panele uyarlanıyor: koyu sahne için yazılmış zemin/kenarlık krem panelin üstünde ters dönüyordu. */ body.tsw-aktif #ozel .tff-color-pop { background: #FFFDF8 !important; border: 1px solid #EADBC8 !important; border-radius: 14px !important; box-shadow: 0 18px 44px -18px rgba(59, 44, 53, 0.45) !important; color: #2A1E25 !important; color-scheme: light; } body.tsw-aktif #ozel .tff-color-pop input[type="text"], body.tsw-aktif #ozel .tff-color-pop input:not([type="range"]) { background: #FFFFFF !important; color: #2A1E25 !important; border: 1px solid #EADBC8 !important; } /* ✓ = KAPAT. Mobil sheet'te başlıkta duran düğmenin masaüstü karşılığı; seçicinin kendisi değişmedi (bkz. tasarla-masaustu.js renkSeciciTamamKur). */ body.tsw-aktif #ozel .tff-color-pop .tsw-renk-ok { flex: 0 0 auto; width: 32px; height: 32px; margin-left: auto; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 9px; background: var(--coral, #E96A4B); color: #FFFFFF; font-size: 0.95rem; line-height: 1; cursor: pointer; } body.tsw-aktif #ozel .tff-color-pop .tsw-renk-ok:hover { background: var(--coral-2, #DE5636); } body.tsw-aktif #ozel .tff-color-pop .tsw-renk-ok:focus-visible { outline: 2px solid #2A1E25; outline-offset: 2px; } body.tsw-aktif #ozel .tff-color-pop .tff-color-foot { display: flex !important; align-items: center; gap: var(--tsw-ara-2); } /* --- W2.6) "FOTOĞRAFA ALT GÖLGE VER" ------------------------------------ Kerem: "krem panelde sıkışık duruyor". Onay kutusu ile yazı arasında pay yoktu ve satırın kendi yüksekliği yoktu -- ölçek diline getiriliyor. */ body.tsw-aktif #ozel .tsw-panel-govde .tfFi-anahtar { display: flex !important; align-items: center; gap: var(--tsw-ara-2); min-height: 26px; font-size: 0.86rem; color: #2A1E25; cursor: pointer; } body.tsw-aktif #ozel .tsw-panel-govde .tfFi-anahtar input[type="checkbox"] { flex: 0 0 auto; width: 16px; height: 16px; margin: 0; accent-color: var(--coral, #E96A4B); } /* ========================================================================== * FAZ W2 — PANEL DÜZELTMELERİ (KOMUT 1, Kerem 28 Ağustos 2026) * Hepsi 1920x855'te gözle ölçülüp doğrulandı; ölçüler kuralların yanında. * ======================================================================== */ /* --- K1-1) ARKA PLAN NOTU IZGARANIN SÜTUNUNA SIKIŞMASIN ------------------ ÖLÇÜLDÜ (Gezi teması, Arka Plan aracı): "Bu temada hazır arka plan yok — aşağıdan düz renk seç." notu 59x152 -- yani ızgaranın 6 sütunundan BİRİNE düşüyor ve tek kelimelik satırlara kırılıyordu. (Aynı `.tfyt-not` sınıfı Çerçeve panelinde 394x19; sorun metinde değil, ızgara çocuğu olmasında.) Not ızgaranın çocuğu KALIR (tema motoru onu oraya yazıyor, dokunmuyoruz); yalnız bütün satırı kaplar. */ body.tsw-aktif #ozel .tsw-panel-govde .tfyt-bg-liste > .tfyt-not { grid-column: 1 / -1; margin: 0; font-size: 0.78rem; line-height: 1.45; color: #6B5A62; } /* IZGARA BOŞKEN YER KAPLAMAZ. ÖLÇÜLDÜ: kutu 394x160 -- içinde tek bir not varken bile 160px'lik boşluk bırakıyordu (yukarıdaki kural onu da bitirir). `:empty` hiç çocuğu olmayan hâl içindir: tema motoru listeyi yazana kadar geçen anda boş bir 160px'lik delik açılmasın. */ body.tsw-aktif #ozel .tsw-panel-govde .tfyt-bg-liste:empty { display: none !important; } /* --- K1-2) SAHİPSİZ YARDIM METNİ ----------------------------------------- "Önizlemedeki arka planı rastgele değiştir." — işaret ettiği düğme (`.tff-bg-random-row` içindeki zar) masaüstünde gizli; zar üst bara taşındı. Sınıfı JS ÖLÇEREK koyuyor (bkz. tasarla-masaustu.js `sahipsizYardimGizle`): tarif ettiği satır görünürse sınıf düşer, cümle geri gelir. Kural yalnız `body.tsw-aktif` altında; mobilde zar panelde durduğu için orada etkisiz. */ body.tsw-aktif #ozel .tsw-panel-govde .tff-help.tsw-sahipsiz { display: none !important; } /* --- K1-6) PANEL GÖVDESİ ALTINDA SOLMA — KALDIRILDI ---------------------- Kerem (1 Eylül 2026): "Burada bir gölge mi var çerçeve bölümünün bir yerinde, aşağı doğru insen de onlar görünüyor. O kalkmalı." Örtü, taşan panelin dibine `position:sticky` ile çivilenmiş 24px'lik krem bir degradeydi ("devamı var" işareti). Çerçeve ızgarasında alt sıradaki karoların üstüne biniyordu ve kaydırırken karoların arkasından geçtiği için gölge gibi okunuyordu. Kural KALDIRILDI, gizlenmedi: örtüyü besleyen `data-tsw-tasiyor` ölçümü de (tasarla-masaustu.js `tasmaDurumu`) kaldırıldı -- tek tüketicisi buydu, kalsaydı ölü kod olurdu. ALT İÇ BOŞLUK KALIYOR: son satır kabın kenarına yapışmasın diye 12px ek dolgu duruyor. Solmanın çözdüğü asıl sorun ("içerik kesiliyor") zaten kaydırmayla çözülüyor; kesilen bir şey yok, yalnız işaret vardı. */ body.tsw-aktif #ozel .tsw-panel-govde { padding-bottom: calc(var(--tsw-ara-3) + 12px); } /* --- K1-7) YATAY ŞERİTLERİN KENAR SOLMASI -------------------------------- ÖLÇÜLDÜ: `#cardStylePicker .cs-scroll` clientWidth 394, scrollWidth 664 -- çipler panel kenarında sert kesiliyordu. Mobilde zaten olan kuralın masaüstü karşılığı; yönü JS ölçüp `data-tsw-devam` ile yazıyor, şerit sonuna gelince ipucu kaybolur. Burada maske GÜVENLİ: şeridin içinde kabın dışına açılan düğüm yok. */ body.tsw-aktif #ozel .tsw-panel-govde [data-tsw-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%); } body.tsw-aktif #ozel .tsw-panel-govde [data-tsw-devam="sol"] { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 34px); mask-image: linear-gradient(to right, transparent 0, #000 34px); } body.tsw-aktif #ozel .tsw-panel-govde [data-tsw-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%); } /* Klavye/anlık kaydırmada seçili çip solmanın altında kalmasın. */ body.tsw-aktif #ozel .tsw-panel-govde #cardStylePicker .cs-scroll { scroll-padding-inline: 34px; } /* --- K1-8) KART SARMALAYICISI KENDİ KUTUSUNA OTURUR ---------------------- ÖLÇÜLDÜ (1920x855, düzeltme öncesi): `.tf-custom-card-wrapper` 1631.9px genişti (tf-sayfa.css `width:100%`) ve üzerinde `scale(1.265)` vardı -> sınır kutusu -25.9 ... 1606.0, yani hem araç rayının hem sağ panelin ALTINA giriyordu. Görsel bozukluk yoktu ama sarmalayıcıya göre hesaplanan her koordinat (tutamaçlar) kayardı -- mobilde tam bu yüzden hata alınmıştı. Sarmalayıcının yüzde-tabanlı sahne ışığı (`::before { inset:-7% -10% }`, tasarla-sahne.css) da bu genişlikten türüyordu: yatayda 163px'lik bir hale, oysa kural "kesim hattından en fazla 30-40px". `max-content` = kutu, içindeki en geniş çocuk kadar. Kartın kendi genişliği `clamp(270px, 84vw, 340px)` -- GÖRÜNÜM genişliğinden türüyor, sarmalayıcıdan DEĞİL; bu yüzden kartın ekrandaki boyutu değişmez. Ölçek de zaten kartın kendi kutusundan hesaplanıyor (bkz. `olcekYaz`), sarmalayıcıdan değil. Ortalama sahibi kanvasın kendi `place-items:center` kuralı. */ body.tsw-aktif #ozel .customizer-preview .tf-custom-card-wrapper { width: max-content; max-width: 100%; justify-self: center; } } /* Kabuk yüksekliği çok kısaldığında (düşük ekran, tarayıcı zoom) üç sütun sıkışmasın: kabuk sabitliğini bırakır, sayfa normal akışa döner. Kartın oynamaması bir konfor kuralıdır; okunmaz bir editör ondan daha kötüdür. */ @media (min-width: 940px) and (max-height: 560px) { /* KİLİT DE KALKAR. Kabuk akışa döndüğü an sayfanın kayabilmesi ŞART -- yoksa müşteri, içeriği görünümü aşan bir editöre hapsolur (md.1'in kilidi yalnız kabuk ekrana sığdığı sürece doğru). */ /* H-3: açılış kilidi de burada kalkar -- kısa ekranda kilit ZATEN yanlış, kabuğun gelip gelmemesi bunu değiştirmiyor. */ html[data-duzen-hazir="0"], html[data-duzen-hazir="0"] body, html.tsw-aktif, body.tsw-aktif { overflow: auto; height: auto; } body.tsw-aktif #ozel .customizer-grid { height: auto; } body.tsw-aktif #ozel .customizer-preview { height: auto; min-height: 320px; } body.tsw-aktif #ozel .customizer-form { height: auto; max-height: none; } body.tsw-aktif #ozel .tsw-panel-govde { overflow-y: visible; } } @media (prefers-reduced-motion: reduce) { body.tsw-aktif #ozel .tsw-arac { transition: none; } body.tsw-aktif #ozel .tsw-ekle { transition: none; } } /* ========================================================================== * KOMUT 2 — MASAÜSTÜ DÜZLEM HİZALAMASI (Kerem, 28 Ağustos 2026) * * KAPSAM: TAMAMI /tasarla'ya özel. Her seçici `body.tasarla-page.tsw-aktif` * ile başlıyor -- `tsw-aktif` yalnız bu sayfanın masaüstü katmanı kurulunca * yazılıyor (assets/js/tasarla-masaustu.js), `tasarla-page` de yalnız bu * belgenin body sınıfı. Başka hiçbir sayfanın header'ı ya da sepet çekmecesi * bu bloktan etkilenmez. * * 15px'LİK OLUK — ÖLÇÜLDÜ VE KORUNDU: `tf-sayfa.css` site genelinde * `html { scrollbar-gutter: stable both-edges }` yazıyor; bu yüzden ilk içeren * blok (ICB) 1920 yerine 1890 ve iki yandan 15px içeride. `position:fixed` * öğeler de ONA göre konumlanıyor -- yani `right:0` = 1905, tam olarak panelin * bugünkü sağ kenarı. Oluğu bu sayfada kapatmak ray/panel/breadcrumb'ın hepsini * 15px kaydırırdı (Kerem'in ölçtüğü x=145 hizası dahil). Kapatılmadı. * ======================================================================== */ @media (min-width: 940px) { /* --- K2-1) RAY VE PANEL TAM BOY, HEADER'IN ÜZERİNDE -------------------- ÖLÇÜLDÜ (1920x855, öncesi): ray y 165→855, panel y 165→855; header y 0→77 tam genişlikte ikisinin de ÜSTÜNDEN geçiyordu. Sepet çekmecesi ise zaten y 0→855 idi -- yani üç yüzey üç ayrı düzlemdeydi. İkisi de `position: fixed` oluyor. Grid izleri (`grid-template-columns`) AÇIKÇA yazılı olduğu için akıştan çıkmaları sütun ölçülerini DEĞİŞTİRMEZ; kanvas `grid-column: 2` ile yerinde kalır -> kart kıpırdamaz. Z-DÜZENİ: header 100 < ray/panel 120 < sepet overlay 150 < çekmece 151. Yani ray/panel header'ı örter ama sepet açılınca ikisi de perdenin ALTINDA kalır (Kerem'in istediği sıra). */ /* D-2: TEK YÜZEY. Ray artık bağımsız bir sabit şerit değil, bloğun ilk satırı -- listeden düştü, `position: fixed` yalnız blokta. */ /* KOMUT E-1 · BLOK HEADER'IN ALTINDAN BAŞLAR. ÖNCESİ (ölçüldü): blok y=0'dan başlıyor, boyu 911 ve z-index 120 ile header'ın (z-index 100) ÜSTÜNE biniyordu. Header sağdan 448px'lik bir dilim kaybediyor, tek parça görünmüyordu. ARTIK: üst kenar header'ın ÖLÇÜLEN alt kenarı. Sayı SABİT YAZILMAZ -- `--tsw-bar-h` header'ın kendi kutusundan geliyor (bkz. kabukOlc); komutta "78" deniyordu ama header bugün 77px, yani sabit yazsaydık ilk günden 1px şaşırtacaktı. Header boyu bir gün değişirse blok kendiliğinden uyar. D3 NOTU: "araç barı header ile AYNI bandı paylaşsın" varsayımı bu maddeyle GEÇERSİZ (Kerem, KOMUT E). Bar artık header bandında değil, onun ALTINDA ve bloğun ilk satırı. Sekmenin panele kesintisiz bağlanması (D3-2) AYNEN geçerli -- o kural barın nerede durduğuna değil, dikişe bakıyor. */ body.tasarla-page.tsw-aktif #ozel .customizer-form { position: fixed; top: var(--tsw-bar-h, 77px); bottom: 0; height: auto; z-index: 120; } /* GENİŞLİKLER DEĞİŞMİYOR (maddenin kendisi): ikisi de gridin okuduğu AYNI değişkenden geliyor -- ikinci bir ölçü yazılmıyor. */ /* D2-0: BLOK SAĞDA. Genişlik gridin okuduğu AYNI değişkenden gelir -- ikinci bir ölçü yazılmaz, yoksa sütun ile yüzey ayrışır. */ body.tasarla-page.tsw-aktif #ozel .customizer-form { right: 0; left: auto; width: var(--tsw-blok-w); } /* RAYIN İKONLARI KANVAS ÜST HİZASINDA KALIR; yukarı taşan kısım yalnız zemin. Ofset ölçülerek geliyor: `--tsw-ust` = kabuğun belge tepesi (JS'te `kabukOlc` zaten hesaplıyordu, artık CSS'e de yazıyor). Değişken yoksa bugünkü değere düşer -- ray hiçbir koşulda tepeye yapışmaz. */ /* D-2: BLOK TEPEDEN BAŞLAR. C'de ray ayrı bir sabit şeritti ve ikonları kanvasın üst hizasına indirmek için --tsw-ust kadar boş dolgu taşıyordu; o dolgu şimdi 175px'lik ÖLÜ ALAN olurdu -- blok tek yüzey ve içeriği tepeden akıyor. Nefes payı rayın kendi dolgusundan geliyor. */ /* PANEL İÇERİĞİ YUKARI DOĞRU BÜYÜR: başlık bloğu tepeye oturur, kazanılan ~165px gövdeye gider (gövde zaten `flex: 1 1 0`), alt CTA bloğu dipte sabit kalır. K1-6'nın alt solma maskesi gövdenin `::after`ı olduğu için olduğu gibi çalışmaya devam eder. */ body.tasarla-page.tsw-aktif #ozel .customizer-form { max-height: none; } /* --- K2-2) SEPET ÇEKMECESİ PANELLE BİREBİR AYNI DÜZLEMDE --------------- ÖLÇÜLDÜ (öncesi): çekmece 400px, panel 448px -> sepet açılınca kenar 48px zıplıyordu. Artık ikisi de AYNI değişkenden genişlik alıyor ve aynı sağ kenara oturuyor; çekmece panelin tam üstüne geliyor. YALNIZ /tasarla: diğer sayfalarda çekmece 400px kalır. */ body.tasarla-page.tsw-aktif #cartDrawer { width: var(--tsw-panel-w) !important; top: 0; bottom: 0; right: 0; /* Köşe ve gölge dili panelle AYNI: panelin yarıçapı 0 ve gölgesi yok, yerini tek bir ince ayırıcı alıyor. Ağır `-10px 0 30px` gölge, panelin tam üstüne oturan bir yüzeyde kanvasa taşan sahte bir derinlik veriyordu. */ border-radius: 0; border-left: 1px solid rgba(59, 44, 53, 0.14); box-shadow: none; } /* Kalem detayı çekmecenin SOL bitişiğinde açılıyor; dayanağı da yeni genişlik. */ body.tasarla-page.tsw-aktif .cart-detail { right: var(--tsw-panel-w); width: min(468px, calc(100vw - var(--tsw-panel-w))); } /* --- K2-3) HEADER ORTADAKİ ŞERİDE SIKIŞIR ------------------------------ ÖLÇÜLDÜ (öncesi): `.container.nav` 340→1580 (ortalanmış 1240px kutu); logo x=340, oysa altındaki breadcrumb ve ÖNİZLEME rozeti x=145. Üç öğe tek dikey çizgiye geliyor: ikisinin de sol kenarı `ray genişliği + 22px` (`.tw-head`in dolgusu -- aynı formül). Sağ küme panelin SOL kenarına dayanıyor: sağ dolgu = panel genişliği. Header YÜKSEKLİĞİ ve TİPOGRAFİSİ değişmiyor -- yalnız yatay dolgu. */ body.tasarla-page.tsw-aktif header .container.nav { max-width: none; width: 100%; /* D2-0b · K2-3 HİZASI GERİ: logo yine SOLDA ve altındaki iz ile ÖNİZLEME rozetiyle AYNI x'te başlar (üçünün de sol dayanağı 22px). Sağ küme bloğun SOL kenarına dayanır ve 16px nefes payı bırakır. */ padding-left: 22px; padding-right: calc(var(--tsw-blok-w) + var(--tsw-header-pay)); } /* "Kısa rehber" düğmesi PANELİN ALTINA GİRMESİN. Dayanağı rayın genişliğiydi (sağdan 130px) -> yeni düzende panelin (448px) altında kalıyordu. */ body.tasarla-page.tsw-aktif .tw-head #tfTurAc { right: calc(var(--tsw-blok-w) + 22px); } /* Breadcrumb ve ÖNİZLEME satırı da sağdan panel kadar içeride biter. */ body.tasarla-page.tsw-aktif .tw-head { padding-right: calc(var(--tsw-blok-w) + 22px); } body.tasarla-page.tsw-aktif #ozel .ts-topbar { padding-right: var(--tsw-blok-w); } /* --- K2-6) TEMA ÇİPLERİ SARMALAR, KAYDIRMAZ ---------------------------- ÖLÇÜLDÜ (K1-4 sonrası): şerit clientWidth 394 / scrollWidth 664 -- altı çipin sonuncusu ("Insta") panel kenarında kesiliyordu ve altında 403px boş alan duruyordu. Dikey alan bolken yatay kaydırma yanlış desen. Şerit SARMALAYAN düzene geçiyor: çipler kendi genişliklerini korur (`flex: 0 0 auto` W2'den beri öyle), sığmayan alt satıra iner. Kaydırma kalmayınca K1-7'nin kenar solması KENDİLİĞİNDEN düşer: `seritDurumu` taşma <= 2 ölçtüğü an `data-tsw-devam` niteliğini siliyor. MOBİLDE ŞERİT KORUNUYOR: bu kural `min-width: 940px` bloğunun içinde. ── KOMUT G3 SINIRLADI ───────────────────────────────────────────────── G3 tema seçicisini İKİ HÂLLİ yaptı: seçim yokken BUTON IZGARASI (`.tfy-tema-kap--izgara`, zaten `display:grid` -- sarmalama oradan gelir), seçimden sonra TEK SATIRLIK YATAY ŞERİT (`.tfy-tema-kap--serit`). Kerem G3'te açıkça "şerit yatay kaydırılabilir; kenarda içeriğin devam ettiğini gösteren yumuşama olur" dedi -- yani ŞERİT HÂLİNDE K2-6'nın sarmalama kararı geçerli değil. Kural şerit hâlini DIŞLAR; `!important` yarışına girilmedi, kapsam daraltıldı. */ /* G3-D: dışlama ŞERİT hâlinden TÜM bileşene genişletildi -- ızgara hâli de bileşenin kendi `display:grid` kuralını kullanıyor, sarmalayan esnek düzene ihtiyacı yok. */ body.tasarla-page.tsw-aktif #ozel .tsw-panel-govde #cardStylePicker .cs-scroll:not(.tfy-tema-kap) { flex-wrap: wrap !important; overflow-x: visible; row-gap: var(--tsw-ara-1); padding-bottom: 0; scroll-padding-inline: 0; } } /* ========================================================================== * KOMUT 3 — ÇOKLU YAZI KATMANI · WEB PANELİ (Kerem, 28 Ağustos 2026) * * K3-2: "Webde bu şerit sağ panelin Yazılar bölümünde, mobilde Yazılar yarım * sayfasında AYNI düzende olacak." Mobil (Faz 7B) numaralı çip şeridi + giriş * kutusunun yanında ＋ kullanıyordu; web dikey, numarasız, tam genişlikte * satırlar gösteriyordu. Burada web mobilin diline getiriliyor. * * ÖLÇÜLDÜ (öncesi, 1920x855): üç katmanla panel gövdesi 137px taşıyordu * (3 x 37px satır + 49px blok düğme). Çipler sarmalayan tek şeride iniyor. * ======================================================================== */ @media (min-width: 940px) { /* --- ÇİP ŞERİDİ --------------------------------------------------------- Dikey liste -> SARMALAYAN şerit. Kaydırma YOK: en fazla beş çip var (YAZI_UST_SINIR) ve ikisi bir satıra rahat sığıyor. K1-7'nin kenar solmasına da gerek kalmıyor -- taşma olmadığı için o kural kendiliğinden sessiz kalır. */ body.tasarla-page.tsw-aktif #ozel .tsw-panel-govde .tfyt-katmanlar { display: flex !important; flex-direction: row !important; flex-wrap: wrap; gap: var(--tsw-ara-1); margin: var(--tsw-ara-2) 0 0 !important; } /* Çip: numara + ilk kelime + sil. Tema çipleriyle (W2) AYNI dil -- yükseklik, yarıçap ve kenarlık oradan; panelde iki ayrı çip görünümü olmasın. */ body.tasarla-page.tsw-aktif #ozel .tsw-panel-govde .tfyt-katman { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: flex-start; gap: 7px; height: 34px; padding: 0 8px 0 6px; border: 1px solid #EADBC8 !important; border-radius: 999px !important; background: #FFFDF8 !important; color: #2A1E25 !important; font-size: 0.84rem; line-height: 1; cursor: pointer; transition: border-color .16s ease, color .16s ease; } body.tasarla-page.tsw-aktif #ozel .tsw-panel-govde .tfyt-katman:hover { border-color: rgba(233, 106, 75, 0.45) !important; } body.tasarla-page.tsw-aktif #ozel .tsw-panel-govde .tfyt-katman.on { border-color: var(--coral, #E96A4B) !important; box-shadow: 0 0 0 1px var(--coral, #E96A4B) inset !important; background: #FFFDF8 !important; color: var(--coral, #E96A4B) !important; } /* NUMARA: çipin kimliği. Mobildeki .tsm-yz-no ile aynı rol. */ body.tasarla-page.tsw-aktif #ozel .tsw-panel-govde .tfyt-katman-no { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(59, 44, 53, 0.08); font-size: 0.72rem; font-weight: 700; line-height: 1; } body.tasarla-page.tsw-aktif #ozel .tsw-panel-govde .tfyt-katman.on .tfyt-katman-no { background: var(--coral, #E96A4B); color: #FFFFFF; } body.tasarla-page.tsw-aktif #ozel .tsw-panel-govde .tfyt-katman-tx { flex: 0 1 auto; min-width: 0; max-width: 11ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* SİL: çipin içinde, ayrı bir düğme DEĞİL bir işaret -- iç içe