/* ============================================================================ MIQNO — /tasarla ATÖLYE DÜZENİ (Sprint 1 ek, 2026-08-21) Editör ana sayfadan kendi sayfasına taşındı. Bu dosya YALNIZ DÜZENDİR: body.tasarla-page kapsamında çalışır, markup'a ve kartı çizen koda DOKUNMAZ. BASKI PARİTESİ — buradaki hiçbir kural .tf-custom-card / .tfc-* / .fx-* geometrisine, yazı boyutuna, rengine veya gölgesine dokunmaz. Kartın kendisi tek kanonik kaynaktan (tf-card.css) çizilir; bu dosya kartın ETRAFINDAKİ kutuları konumlandırır. Kart ölçüsü yalnız kapsayıcı GENİŞLİĞİ ile değişir (cqw tabanlı punto zaten buna göre ölçeklenir — canlı DOM = baskı PNG). Yüklenme sırası: tüm diğer css'lerden SONRA (bkz. tasarla.html ). ========================================================================== */ /* ---- 1) Sayfa kabuğu ---- */ body.tasarla-page { background: var(--bg); } .tasarla-page .tw { display: block; padding: clamp(18px, 3vw, 34px) 0 0; } .tasarla-page .tw-head { padding-bottom: clamp(10px, 2vw, 18px); } .tasarla-page .tw-crumb { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--muted); margin-bottom: 10px; } .tasarla-page .tw-crumb a { color: var(--muted); text-decoration: none; } .tasarla-page .tw-crumb a:hover { color: var(--coral); } .tasarla-page .tw-crumb span[aria-current] { color: var(--text); font-weight: 600; } .tasarla-page .tw-title { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: clamp(1.5rem, 3.4vw, 2.25rem); letter-spacing: -.015em; color: var(--text); margin: 0 0 6px; } .tasarla-page .tw-lead { color: var(--muted); margin: 0; max-width: 62ch; font-size: clamp(.92rem, 1.4vw, 1rem); } /* ---- 2) Bölüm kabuğunu sadeleştir ---- #ozel ana sayfada bir "pazarlama bölümü"ydü (yelpaze görseli + başlık + üst boşluk). Atölyede sayfanın KENDİSİ o başlıktır -> bölüm başlığı ve dekoratif yelpaze kalkar. */ .tasarla-page #ozel.customizer-section { background: transparent; border-top: none; padding: 0 0 clamp(40px, 6vw, 72px); } .tasarla-page #ozel > .container { max-width: 1400px; } .tasarla-page #ozel .section-head.cu-head { display: none; } /* ---- 3) Atölye ızgarası: SOL sahne / SAĞ adımlar ---- Ana sayfadaki .tf-stage TÜM ızgarayı koyu yapıyordu. Atölyede yalnız ÖNİZLEME koyu sahnedir; seçenekler açık krem zeminde okunur (Kerem: "açık sayfanın içinde çerçeveli koyu sahne"). */ .tasarla-page #ozel .customizer-grid.tf-stage { background: transparent; border: none; box-shadow: none; padding: 0; margin-top: 0; gap: clamp(20px, 2.6vw, 36px); } @media (min-width: 1040px) { .tasarla-page #ozel .customizer-grid { grid-template-columns: minmax(360px, .92fr) minmax(0, 1.18fr); } .tasarla-page #ozel .customizer-preview { position: sticky; top: 88px; align-self: start; } } /* ---- 4) AÇIK SAHNE: canlı kart önizlemesi (Kerem kararı, 2026-08-22) ---- KARAR DEĞİŞTİ: sahne artık KOYU değil. Mobildeki alttan çekmece krem olduğu için masaüstündeki panel de krem olmalı — aynı ürün iki cihazda iki ayrı dilde görünüyordu. İstenen "dış açık, iç koyu" düzeni zaten KARTIN KENDİSİNDEN geliyor (tema/çerçeve kararı); sahnenin ayrıca koyu olmasına gerek yok. Tipografi ve düğmeler koyu sahne için AÇIK renkti; zemin kremleşince okunmaz hale gelirlerdi -> hepsi birlikte çevrildi. (Aynı hatayı mobil çekmecede ölçmüştük: krem üstünde krem yazı.) */ .tasarla-page #ozel .customizer-preview { background: var(--panel, #FFFDF8); border: 1px solid var(--line, #E4D5C2); border-radius: 22px; padding: clamp(16px, 2.2vw, 26px); box-shadow: 0 24px 60px -34px rgba(59,44,53,.28); } /* sahne içi tipografi: koyu üstü krem DEĞİL, krem üstü mürdüm */ .tasarla-page #ozel .customizer-preview, .tasarla-page #ozel .customizer-preview h3, .tasarla-page #ozel .customizer-preview span, .tasarla-page #ozel .customizer-preview p { color: var(--text, #2A1E25); } /* KART KENDİ MÜREKKEBİNİ YÖNETİR — sahne kuralı kartın İÇİNE giremez. ÖLÇÜLDÜ (2026-08-22, Kerem bildirimi "bütün yazı renkleri aynı renkte değişebilmeli"): müşteri Yazı & Rakam Rengi'ni kırmızı yapınca isim/OVR/ pozisyon kırmızı oluyor ama STAT etiketleri ve rakamları mürdüm kalıyordu. Sebep özgüllük çatışması (el.matches ile tarandı): kartın kendi kuralı .tf-custom-card .tfc-stats .tfc-stat .lbl -> var(--tfc-text) özgüllük (0,3,0) sahne kuralı .tasarla-page #ozel .customizer-preview span -> var(--text) özgüllük (1,2,1) KAZANIYOR Kimlik seçici yüzünden sahne, kartın içindeki span'leri boyuyordu. Kart baskı ustasıdır ve çekim BU DOM'dan yapılır -> yanlış renk baskıya da giderdi. Aşağıdaki kural sahneyi kartın SINIRINDA durduruyor (özgüllük (1,3,1) > (1,2,1)) ve mürekkebi kartın kendi değişkenine geri veriyor. Not: tf-card.css (baskı ustası) DEĞİŞTİRİLMEDİ. */ .tasarla-page #ozel .customizer-preview .tf-custom-card, .tasarla-page #ozel .customizer-preview .tf-custom-card h3, .tasarla-page #ozel .customizer-preview .tf-custom-card span, .tasarla-page #ozel .customizer-preview .tf-custom-card p { color: var(--tfc-text, #FFFFFF); } .tasarla-page #ozel .customizer-preview .cs-title { color: var(--text, #2A1E25); } .tasarla-page #ozel .customizer-preview .cs-name { color: var(--muted, #6B5A62); } /* AÇILIŞ FOTOĞRAF ÇAĞRISI da sahne mürekkebinden MUAF (Kerem, 4 Eylül 2026: "Fotoğrafınızı yükleyin yazısı pek okunmuyor"). ÖLÇÜLDÜ (390x844): çağrının hesaplanan rengi `rgb(59, 44, 53)` çıkıyordu -- yani tf-sayfa.css'te ona yazılan krem DEĞİL, yukarıdaki `span` kuralı. Özgüllük: sahne (1,2,1) > çağrının kendi sınıfı (0,1,0). Çağrı KOYU kartın üstünde duruyor; koyu mürekkep orada neredeyse görünmez oluyordu. Kart için yazılan muafiyetin (yukarıda) aynısı, bir kardeş düğüm için: özgüllük (1,4,0) > (1,2,1). RENK BURADA, GERİ KALANI tf-sayfa.css'te (.tfc-foto-cagri bloğu). Bölünme keyfi değil: sahne kuralını YALNIZ bu dosyadaki bir seçici yenebilir ve tuzağın açıklaması da burada duruyor. */ .tasarla-page #ozel .customizer-preview .tfc-foto-cagri .tfc-foto-cagri-yazi { color: #F7EFE6; } .tasarla-page #ozel .customizer-preview .cs-style.active .cs-name { color: #E8674C; } /* tema kutuları: krem sahnede beyaz kart dili (koyu sahne için saydam beyazdı) */ .tasarla-page #ozel .customizer-preview .cs-thumb, .tasarla-page #ozel .customizer-preview #tab-tema .cs-thumb { background-color: #fff !important; border: 1.5px solid var(--line, #E4D5C2) !important; } .tasarla-page #ozel .customizer-preview .cs-style.active .cs-thumb, .tasarla-page #ozel .customizer-preview #tab-tema .cs-style.active .cs-thumb { border: 2px solid #E8674C !important; } /* foto ayarlama satırı sahnenin içinde */ .tasarla-page #ozel .photo-adjust-row { color: var(--muted, #6B5A62); } .tasarla-page #ozel .photo-adjust-cta { background: #fff; border: 1px solid var(--line, #E4D5C2); color: var(--text, #2A1E25); } .tasarla-page #ozel .photo-adjust-cta:hover { border-color: #E8674C; color: #E8674C; } /* M3: acik zeminde 90 derece dugmesi de sayfanin kendi cizgisini kullansin. */ .tasarla-page #ozel .photo-adjust-rot { background: #fff; border: 1px solid var(--line, #E4D5C2); color: var(--text, #2A1E25); } .tasarla-page #ozel .photo-adjust-rot:hover { border-color: #E8674C; color: #E8674C; } .tasarla-page #ozel .photo-adjust-hint, .tasarla-page #ozel .photo-adjust-done { color: var(--muted, #6B5A62); } /* KART ARAÇ SATIRI: zar + "Fotoğrafı Ayarla" yan yana, kartın altında. Zar tabanda position:absolute (kart köşesi) -- burada akışa alınır ve ADI YAZILIR: ikon tek başına ne yaptığını söylemiyordu. */ .tasarla-page #ozel .tf-kart-araclar { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; } .tasarla-page #ozel .tf-kart-araclar .photo-adjust-row { margin-top: 0; } .tasarla-page #ozel .tf-zar { position: static; width: auto; height: auto; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; font-family: 'Oswald', sans-serif; font-size: .86rem; font-weight: 700; letter-spacing: .02em; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; background: #fff; border: 1px solid var(--line, #E4D5C2); color: var(--text, #2A1E25); } .tasarla-page #ozel .tf-zar:hover { border-color: #E8674C; color: #E8674C; transform: none; box-shadow: none; } .tasarla-page #ozel .tf-zar svg { width: 17px; height: 17px; } .tasarla-page #ozel .tf-zar .tf-zar-lbl { display: inline; } /* ---- 5) SAĞ SÜTUN: adım adım seçenekler (açık panel) ---- */ /* Dolgu ve yaricap DEGISKENDEN: alt bar (.ts-footbar) panelin kenarina kadar uzanmak icin ayni degerlere ihtiyac duyuyor. Elle kopyalansaydi clamp() degisince bar sessizce ayrisirdi. */ .tasarla-page #ozel .customizer-form { --ts-pane-pad: clamp(16px, 2vw, 26px); --ts-pane-radius: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--ts-pane-radius); padding: var(--ts-pane-pad); box-shadow: var(--shadow-1); } /* ADIM SIRASI (Kerem): Tema -> Çerçeve -> Fotoğraf -> Yazılar -> Boyut & Fiyat. DİKKAT: sekmeler markup'ta 4 taneydi; tf-yeni-temalar.js `sekmeleriBol()` "Tasarım" sekmesini ÇALIŞMA ANINDA tema/frame/bg diye ÜÇE böler -> gerçek sekme kümesi tema · frame · bg · info · photo · size'dır. Sıra bu kümeye göre kurulur. Markup/JS DEĞİŞMEDİ; yalnız görsel sıra flex `order` ile -> davranış riski yok. Adım numarası CSS counter ile YAZILAMAZ: counter DOM sırasını sayar, `order` yalnız görseli değiştirir -> numaralar karışırdı. Bu yüzden numara sekme başına SABİT. */ .tasarla-page #ozel .tff-tabs { display: flex; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 18px; } .tasarla-page #ozel .tff-tab-btn { order: 9; } /* KADEME 1 (Kerem, 2026-08-21) — FOTOGRAF ONCE. Atolye "tek akisa kademeli gecis"in ilk kademesi: musteri once fotografini birakir, gerisi onun uzerine kurulur. Eski sira tema -> cerceve -> arka plan -> fotograf -> yazilar -> fiyat idi. */ .tasarla-page #ozel .tff-tab-btn[data-tab="photo"] { order: 1; } .tasarla-page #ozel .tff-tab-btn[data-tab="tema"] { order: 2; } .tasarla-page #ozel .tff-tab-btn[data-tab="frame"] { order: 3; } .tasarla-page #ozel .tff-tab-btn[data-tab="bg"] { order: 4; } .tasarla-page #ozel .tff-tab-btn[data-tab="info"] { order: 5; } .tasarla-page #ozel .tff-tab-btn[data-tab="size"] { order: 6; } .tasarla-page #ozel .tff-tab-btn[data-tab="photo"]::before { content: "1"; } .tasarla-page #ozel .tff-tab-btn[data-tab="tema"]::before { content: "2"; } .tasarla-page #ozel .tff-tab-btn[data-tab="frame"]::before { content: "3"; } .tasarla-page #ozel .tff-tab-btn[data-tab="bg"]::before { content: "4"; } .tasarla-page #ozel .tff-tab-btn[data-tab="info"]::before { content: "5"; } .tasarla-page #ozel .tff-tab-btn[data-tab="size"]::before { content: "6"; } .tasarla-page #ozel .tff-tab-btn { position: relative; flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; color: var(--muted); font-weight: 600; font-size: .86rem; cursor: pointer; transition: border-color .15s, color .15s, background .15s; } .tasarla-page #ozel .tff-tab-btn::before { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: var(--gold); color: #3B2C35; font-size: .7rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .tasarla-page #ozel .tff-tab-btn:hover { border-color: rgba(233,106,75,.45); color: var(--text); } .tasarla-page #ozel .tff-tab-btn.active { background: #FFFFFF; border-color: var(--coral); color: var(--coral); } /* sekme İÇERİKLERİ de aynı sırada aksın (tek sekme görünür ama sıra tutarlı kalsın) */ .tasarla-page #ozel .tff-tab-content { order: 9; } .tasarla-page #ozel #tab-photo { order: 1; } .tasarla-page #ozel #tab-tema { order: 2; } .tasarla-page #ozel #tab-frame { order: 3; } .tasarla-page #ozel #tab-bg { order: 4; } .tasarla-page #ozel #tab-info { order: 5; } .tasarla-page #ozel #tab-size { order: 6; } .tasarla-page #ozel .customizer-form { display: flex; flex-direction: column; } .tasarla-page #ozel .tff-tabs { order: 0; } /* ---- 6) MOBİL: önizleme ÜSTTE ve yapışık, seçenekler altta ---- */ @media (max-width: 1039px) { .tasarla-page #ozel .customizer-grid { grid-template-columns: 1fr; } .tasarla-page #ozel .customizer-form { border-radius: 16px; } /* MOBİL ÖNİZLEME = ALTTAN ÇEKMECE (Kerem kararı, 2026-08-22). ESKİ KARAR GERİ ALINDI. Editör index.html'den /tasarla'ya taşınırken "önizleme zaten hep üstte yapışık, çekmece burada GEREKSİZ" denip .cs-drawer / tutamaç / perde !important ile devre dışı bırakılmıştı. Yeni dört adımlı akışta mobil düzen "araçlar tam ekran + önizleme alttan üç konumlu sheet" olduğu için o gerekçe geçersiz -> kapatma kuralları KALDIRILDI; sheet'in kendi CSS'i (tf-sayfa.css) yeniden yürürlükte. Ölçüm (390px koşum): kapatma dururken çekmece position:static, genişlik 0 / yükseklik 2px, tutamaç display:none idi — mobilde önizleme fiilen YOKTU. .customizer-preview yer KAPLAMAZ: sheet position:fixed ile görünüm alanına oturur; sarmalayıcı akışta kalsaydı araçların üstünde boş kutu bırakırdı. */ .tasarla-page #ozel .customizer-preview { display: contents; } } /* ---- 7) Bu sayfada ana sayfanın yapışık CTA'sı YOK (editörün kendisi buradadır) ---- */ .tasarla-page .mq-sticky-cta { display: none !important; } @media (max-width: 768px) { body.tasarla-page { padding-bottom: 0; } } /* ---- 8) SEKME SERIDI GOZ KIRPMASI (FOUC) — 2026-08-21 ---------------------- tf-yeni-temalar.js `sekmeleriBol()` ham seridi (BILGILER/STIL/FOTOGRAF/FIYAT) 6 adima cevirir, ama bunu ancak katalog JSON'lari gelince yapar (~271KB). O ana kadar ham serit ve Bilgiler formu ekranda durur; bolunme bitince serit yeniden dizilip TEMA'ya atlar -> yavas baglantida goz kirpmasi. Gizlemenin ANAHTARI ozniteligidir ve bu oznitelik YALNIZ JS tarafindan konur (bkz. tasarla.html, seridin hemen ardindaki satir-ici betik). Bu yuzden kural burada durmasi guvenlidir: - JS kapali/cokmus -> oznitelik hic konmaz -> hicbir sey gizlenmez, - kurulum biterse -> 'tfyt:hazir' olayinda oznitelik silinir, - hicbiri olmazsa -> 3 sn'lik zaman asimi silinir. Bir CSS kuralinin TEK BASINA seridi gizlemesine izin verilmez; sprint1-cila testi bunu kilitler. visibility, display DEGIL: yer korunur, bolunme bitince sayfa ziplamaz. */ html[data-tfyt-bolunuyor] .tasarla-page #tffTabs, html[data-tfyt-bolunuyor] .tasarla-page .tff-tab-content { visibility: hidden; } /* ---- 9) KADEME 1: FOTOĞRAF ADIMI DAVETKÂR ------------------------------- Fotoğraf artık 1. adım: müşterinin gördüğü İLK ekran burası. Eskiden 4. sıradaydı ve sıradan bir form alanı gibi duruyordu. Yükleme alanının DAVRANIŞI değişmedi: .tff-file-upload içindeki input[type=file] alanı `inset: 0` ile kaplar (tf-sayfa.css), yani dosyayı kutunun üstüne bırakmak zaten native olarak çalışır. Burada yalnız kutu BÜYÜTÜLÜR ve davet dili eklenir -> JS'e, maskeye, baskı zincirine dokunulmaz. */ .tasarla-page #ozel .tasarla-foto-giris { text-align: center; margin: 2px 0 18px; } .tasarla-page #ozel .tasarla-foto-baslik { margin: 0 0 6px; font-size: clamp(1.15rem, 2.4vw, 1.45rem); font-weight: 700; letter-spacing: -.01em; color: var(--text); } .tasarla-page #ozel .tasarla-foto-alt { margin: 0 auto; max-width: 46ch; font-size: .92rem; line-height: 1.5; color: var(--muted); } /* Büyük bırakma alanı — YALNIZ bu sayfanın fotoğraf adımında. */ .tasarla-page #ozel #tab-photo .tff-file-upload { padding: 44px 24px; border-width: 2px; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 190px; } .tasarla-page #ozel #tab-photo .tff-file-upload::before { content: ""; width: 40px; height: 40px; margin-bottom: 12px; flex: 0 0 auto; background: var(--gold); opacity: .85; /* yukarı ok + taban çizgisi (yükleme) — maskelenmiş SVG, ek istek yok */ -webkit-mask: var(--tasarla-yukle-ic) center / contain no-repeat; mask: var(--tasarla-yukle-ic) center / contain no-repeat; } .tasarla-page #ozel #tab-photo .tff-file-upload span { font-size: 1rem; font-weight: 600; color: var(--text); } .tasarla-page #ozel #tab-photo .tff-file-upload:hover { transform: none; } :root { --tasarla-yukle-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M7 9l5-5 5 5M4 17v2a1 1 0 001 1h14a1 1 0 001-1v-2'/%3E%3C/svg%3E"); } @media (max-width: 768px) { .tasarla-page #ozel #tab-photo .tff-file-upload { padding: 32px 18px; min-height: 156px; } }