/* ============================================================================ MİQNO — ANA SAYFA "NE ALACAKSIN?" BÖLÜMÜ (#urun) · v4, 9 Eylül 2026 KAPSAM: `.urun-bolum` sınıfını taşıyan bölümler -- #urun ve (ANA-1, 16 Eylül 2026) #katmanlar. Kerem: "5 katman bölümünün tüm yapısı Ne alacaksın ile aynı olmalı" -> iskelet kuralları `#urun` kimliğinden sınıfa alındı; ikinci bir yerleşim yazılmadı. #urun KOYU tondadır; renkler `.tf-section--dark`ın kendi jetonlarından (--d-*) okunur, yeni palet KURULMAZ. #katmanlar AÇIK tondadır (Kerem, 16 Eylül 2026: "5 katmanlı yapı bölümü açık renk olacak"): aynı iskelet kuralları, ama --d-* jetonları o bölümde açık paletin (--l-*, tf-sayfa.css FAZ 16) karşılıklarına bağlanır -- ikinci bir kural takımı yazılmadı. Yalnız #urun'a özgü: `[data-bos]`. BİLEŞEN DİLİ: anahtar düğmeleri `.cs-picker` / `.cs-style` / `.cs-name` ailesini kullanır (temel stiller assets/css/tf-sayfa.css:2139). Buradaki kurallar o ailenin yalnız YERLEŞİMİNİ değiştirir (dikey kart -> hap satırı); yeni bir tasarım sistemi yok. v4'TE DEĞİŞEN ÜÇ ŞEY 1) KART HİÇBİR KUTUNUN İÇİNDE DEĞİL. Önce her yüz bir kaptaydı: `background: var(--d-surface)` + `border: 1.5px solid var(--d-edge)` + `border-radius: 14px` + `overflow: hidden`. Çerçeve şekilli kesiliyor; dikdörtgen kabuk onu "kutulu ürün" gibi gösteriyordu. Artık yalnız kendi silueti ve gölgesi var. 2) İKİ SÜTUN: solda kart, sağda sol hizalı başlık + anahtar + künye. Kart, sağ sütunun boyu kadar büyür. 3) Alttaki "yakında" şeridi ve künyedeki fiyat satırı KALKTI. YÜKLEME SIRASI: index.html'de `anasayfa-vitrin.css`ten hemen sonra, yani `anasayfa-ritim.css`ten ÖNCE. Ritim katmanı tipografiyi `!important` ile sürüyor ve o kasıtlı: bölüm tonunun sahibi odur. ========================================================================== */ .urun-bolum { --u-satir-y: 44px; /* künye satırı */ padding: clamp(48px, 6vw, 72px) 0; } /* VERİ GELMEZSE BÖLÜM DURMAZ. Yarım künye göstermek yanlış künye göstermektir; motor (`tf-urun-bolumu.js`) hata hâlinde `data-bos` işaretler. */ #urun[data-bos] { display: none; } /* ------------------------------------------------------------------- GÖVDE */ .urun-bolum .urun-govde { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: 1fr; align-items: center; /* AYRILAN YÜKSEKLİK: gövde JS ile dolar (JSON ~1 istek sonra iner). Yer baştan ayrılmazsa bölüm dolarken ALTINDAKİ her şey aşağı kayar. Ölçü sağ sütunun içeriğinden türer: 5 künye satırı + başlık + anahtar. */ min-height: calc(5 * var(--u-satir-y) + 320px); } @media (min-width: 940px) { .urun-bolum .urun-govde { /* SOLDA KART, SAĞDA TEK SÜTUN. Kart sütunu biraz dar: kart kendi silueti kadar yer kaplıyor, kutusu yok. */ grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr); } } /* SAĞ SÜTUN SOL HİZALI — mockup kararı. Bölümün `section-head`i kaldırıldı; başlık artık bu sütunun içinde ve ortalanmıyor. */ .urun-bolum .urun-sag { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; } .urun-bolum .urun-eyebrow { margin: 0; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--d-edge); background: var(--d-surface); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; } .urun-bolum .urun-sag h2 { margin: 0; } .urun-bolum .urun-lead { margin: 0; max-width: 46ch; } /* -------------------------------------------------------------------- SAHNE Kart, sağ sütunun boyu kadar. `--u-kart-g` yalnız bir TAVAN: kart alanı sütunun tamamını alır, kartın kendisi 2:3 oranında ona sığar. */ .urun-bolum .urun-sahne { display: flex; justify-content: center; align-items: center; } .urun-bolum .urun-kart-alan { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; /* Perspektif ALANDA, kartın kendisinde değil: dönüş derinlikli okunur. */ perspective: 1400px; } .urun-bolum .urun-kart { --u-don: -13deg; width: min(100%, 360px); aspect-ratio: 7 / 10; cursor: grab; /* YALNIZ YATAY SÜRÜKLEME BİZE AİT: dikey hareket SAYFANIN kaydırmasıdır ve tarayıcıya bırakılır. `pan-y` onu açıkça serbest bırakır. */ touch-action: pan-y; -webkit-user-select: none; user-select: none; /* YEREL GÖRSEL SÜRÜKLEMESİ KAPALI: `` varsayılan olarak sürüklenebilir ve Chrome o jesti başlatınca `pointermove` göndermeyi bırakıyor. Nitelik (`draggable="false"`) motor tarafında; bu kural WebKit'in kendi yolunu da kapatır. */ -webkit-user-drag: none; outline-offset: 8px; } .urun-bolum .urun-kart:active { cursor: grabbing; } .urun-bolum .urun-kart:focus-visible { outline: 2px solid var(--d-tag); } .urun-bolum .urun-kart-ic { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; /* DURUŞ: rotateX SABİT 3deg. Dikey eksende döndürme YOK -- yalnız `--u-don` (rotateY) sürükleme ile değişir. */ transform: rotateY(var(--u-don)) rotateX(3deg); } /* Sürükleme BİTİNCE yumuşak oturur; sürüklerken geçiş olmaz (parmağa yapışsın). */ .urun-bolum .urun-kart-alan--suruklenmiyor .urun-kart-ic { transition: transform .45s ease; } @media (prefers-reduced-motion: reduce) { .urun-bolum .urun-kart-alan--suruklenmiyor .urun-kart-ic { transition: none; } } /* KUTU YOK: zemin, kenarlık, yarıçap, kırpma -- hiçbiri. Kartın görünen sınırı kendi silueti; derinliği gölgesi veriyor. */ .urun-bolum .urun-yuz { position: absolute; inset: 0; /* Yer tutucu buna göre konumlanır. */ display: block; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .urun-bolum .urun-yuz--arka { transform: rotateY(180deg); } .urun-bolum .urun-yuz > img, .urun-bolum .urun-yuz > svg { -webkit-user-drag: none; pointer-events: none; display: block; width: 100%; height: 100%; object-fit: contain; /* Gölge SİLUETE uygulanır (kutuya değil): `drop-shadow` alfa kanalını izler, `box-shadow` dikdörtgen çizerdi. */ filter: drop-shadow(0 22px 34px rgba(0, 0, 0, .45)); } /* YER TUTUCU: çerçevenin penceresinde, DÜŞÜK KONTRAST. Karta ait olduğu için yüzle birlikte döner ve arkaya geçince görünmez (`backface-visibility` yüzün üstünde). Tıklamayı yutmaz. */ .urun-bolum .urun-yertutucu { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 6px; color: rgba(255, 246, 236, .30); font-size: .74rem; letter-spacing: .04em; text-align: center; pointer-events: none; } .urun-bolum .urun-yertutucu svg { width: 26px; height: 26px; } .urun-bolum .urun-surukle { margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--d-edge); background: var(--d-surface); font-size: .78rem; color: var(--d-muted); } /* Arka yüz hazır değilken söz de verilmez: ipucu sessizleşir. */ .urun-bolum .urun-kart-alan:not([data-arka="hazir"]) .urun-surukle { opacity: .55; } /* Yüz durumu YALNIZ EKRAN OKUYUCUYA: ipucu metni zaten görünen karşılığı. */ .urun-bolum .tf-gizli-okur { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ------------------------------------------------------------------ ANAHTAR */ .urun-bolum .urun-anahtar-blok { width: 100%; } .urun-bolum .urun-anahtar-blok .cs-title { margin: 0 0 10px; text-align: left; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--d-muted); font-weight: 600; } .urun-bolum .urun-anahtar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; margin-bottom: 0; min-height: 40px; /* düğmeler JS ile geliyor: yer ayrılır */ } /* HAP KABUĞU. `.cs-style` temeli dikey kart (thumb + ad); burada yatay hap. */ .urun-bolum .urun-anahtar-dugme { flex-direction: row; gap: 8px; padding: 8px 16px; border-radius: 999px; background: var(--d-surface); border: 1.5px solid var(--d-edge); transition: background-color .15s, border-color .15s; } .urun-bolum .urun-anahtar-dugme:hover { background: var(--d-surface-2); border-color: var(--d-tag); } .urun-bolum .urun-anahtar-dugme.active { background: var(--d-tag); border-color: var(--d-tag); } .urun-bolum .urun-anahtar-dugme .cs-name { font-size: .9rem; } .urun-bolum .urun-anahtar-dugme.active .cs-name { color: #241A20; } /* PASİF SEÇENEK GÖRÜNÜR AMA SÖZ VERMEZ. `disabled` verilmedi: klavye onu görebilsin ve "YAKINDA" etiketini okuyabilsin. */ .urun-bolum .urun-anahtar-dugme--pasif { opacity: .55; cursor: default; } .urun-bolum .urun-anahtar-dugme--pasif:hover { background: var(--d-surface); border-color: var(--d-edge); } .urun-bolum .urun-anahtar-etiket { font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--d-tag); border: 1px solid var(--d-edge); border-radius: 999px; padding: 2px 6px; } /* -------------------------------------------------------------------- KÜNYE FİYAT SATIRI YOK (v4): fiyat üstteki blokta zaten duruyor. */ .urun-bolum .urun-kunye { margin: 0; width: 100%; display: grid; gap: 0; } .urun-bolum .urun-kunye-satir { display: grid; grid-template-columns: minmax(96px, 34%) 1fr; gap: 12px; align-items: baseline; min-height: var(--u-satir-y); padding: 11px 0; border-bottom: 1px solid var(--line-soft, rgba(244, 184, 96, .14)); } .urun-bolum .urun-kunye-satir:last-child { border-bottom: none; } .urun-bolum .urun-kunye dt { margin: 0; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--d-muted); } .urun-bolum .urun-kunye dd { margin: 0; font-weight: 600; text-align: right; } /* ARKA YÜZ satırı ürünü AYIRAN şey: vurgulu. */ .urun-bolum .urun-kunye-satir[data-alan="arkaYuz"] dd { color: var(--d-tag); } .urun-bolum .urun-cta { margin-top: 4px; } /* KISA AD MASAÜSTÜNDE GİZLİ. İki ad da basılır (tf-urun-bolumu.js); hangisinin görüneceğini genişlik seçer. `display: none` KASITLI -- gizlenen ad erişilebilirlik ağacından da düşer, yani düğmenin adı her genişlikte TEKtir. */ .urun-bolum .urun-anahtar-ad--kisa { display: none; } /* ------------------------------------------------------------------- MOBİL 390 px (Kerem, 10 Eylül 2026, mockup madde 6): TEK SÜTUN ve sıra başlık -> kart -> ipucu -> ürün anahtarı -> künye -> düğme. ANAHTAR KÜNYEDEN ÖNCE: dar ekranda önce "hangi ürün", sonra "özellikleri" okunuyor. `display: contents` ŞART, `order` TEK BAŞINA YETMEZ: başlık `.urun-sag`ın, kart `.urun-sahne`nin çocuğu. İki AYRI ebeveyn olduğu için esnek/ızgara `order` onları birbirine göre sıralayamaz. `contents` iki sarmalayıcının KUTUSUNU düşürüp çocuklarını doğrudan ızgara öğesi yapar; sıra artık tek bir düzlemde kurulur. DOM TAŞIMA (`.tv-krom` gibi) SEÇİLMEDİ: orada sarmalayıcının kutusu fiyat düzlemini kuran `min-height`i taşıyordu ve düşürülemezdi. Burada iki sarmalayıcı da yalnız hizalama/boşluk taşıyor -- ikisi de bu blokta yeniden kuruluyor. Taşımasız çözüm yeniden boyutlandırma dinleyicisi istemez ve dil değişiminde yeniden çizilen düğümlerle yarışmaz. */ @media (max-width: 640px) { .urun-bolum { --u-satir-y: 40px; } .urun-bolum .urun-sahne { display: contents; } .urun-bolum .urun-sag { display: contents; } .urun-bolum .urun-govde { grid-template-columns: minmax(0, 1fr); /* Sarmalayıcıların boşluğu KUTUYLA birlikte düştü; ritmi ızgara kurar. 14 px: `.urun-sag`ın mobilde zaten kullandığı aralık -- başlık/anahtar/ künye arası görünüm DEĞİŞMEZ. */ row-gap: 14px; align-items: start; min-height: calc(5 * var(--u-satir-y) + 560px); } /* Sıra tek yerde okunsun diye 1..7. Aradaki boşluklar kasıtlı değil, yalnız araya bir şey girerse numaraları kaydırmamak için. */ .urun-bolum .urun-eyebrow { order: 1; justify-self: start; } .urun-bolum .urun-sag h2 { order: 2; } .urun-bolum .urun-lead { order: 3; max-width: none; } .urun-bolum .urun-kart-alan { order: 4; margin: 6px 0; } .urun-bolum .urun-anahtar-blok { order: 5; } .urun-bolum .urun-kunye { order: 6; } .urun-bolum .urun-cta { order: 7; align-self: stretch; text-align: center; } /* KART EKRANIN ~%55'İ (390'da 214 px), en az 190 px. Önce `min(72vw, 280px)` idi ve 390'da ekranın %71,8'ini kaplıyordu: künye ilk ekrana giremiyordu. Tavan 300 px, 640 px'lik kırılma sınırında kartın kopmaması için. */ .urun-bolum .urun-kart { width: clamp(190px, 55vw, 300px); } /* SAHNE YÜKSEKLİĞİ DÖNERKEN OYNAMAZ. Ayrı bir `height` VERİLMEDİ: kart `aspect-ratio` ile ölçülüyor ve `rotateY` bir dönüşüm -- yerleşimi etkilemez. İkinci bir yükseklik kaynağı açmak, kart ölçüsü değiştiğinde sessizce ayrışacak bir sayı eklerdi. Ölçüm bunu doğruluyor (madde 27). */ /* ÜÇ DÜĞME TEK SATIR. Kısa adlar görünür, tam adlar gizlenir. */ .urun-bolum .urun-anahtar-ad { display: none; } .urun-bolum .urun-anahtar-ad--kisa { display: inline; } .urun-bolum .urun-anahtar-dugme { padding: 7px 13px; } .urun-bolum .urun-anahtar-dugme .cs-name { font-size: .84rem; } /* Sarma KALDIRILMADI: sığmayan bir gelecek ürün alt satıra insin -- yatay kaydırma çubuğu ASLA açılmasın. Bugün sığdığını ölçüm kilitliyor. */ .urun-bolum .urun-kunye-satir { grid-template-columns: minmax(88px, 42%) 1fr; } } /* AÇIK TONDA İSKELET: `.urun-bolum` kuralları --d-* okur; açık bölümde o jetonlar açık paletten türer. Eyebrow/çip yüzeyi beyaz panel, kenarlık bronz, vurgu altın metni. */ .urun-bolum.tf-section--light { --d-head: var(--l-heading); --d-muted: var(--l-body); --d-tag: var(--l-gold-text); --d-surface: var(--l-panel); --d-surface-2: var(--l-panel); --d-edge: var(--l-panel-line); --line-soft: var(--l-line); color: var(--l-body); } .urun-bolum.tf-section--light .urun-eyebrow { color: var(--l-gold-text); } .urun-bolum.tf-section--light .urun-lead { color: var(--l-body); } /* ============================================================ #katmanlar (ANA-1) İskelet yukarıdaki `.urun-bolum` kuralları; burada yalnız bu bölümün İÇERİĞİ: katman fotoğrafı sahnede, 1-5 etiket listesi (tf-sayfa.css `.tf-layer-marker` bileşeni, koyu jetonlarla) sağ sütunda künyenin yerinde, dört özellik çipi `.urun-anahtar` hap satırıyla aynı dilde. */ #katmanlar .urun-govde { min-height: 0; } #katmanlar .tfl-stage { margin: 0; width: 100%; display: flex; justify-content: center; } #katmanlar .tf-layer-stack { width: min(100%, 560px); } #katmanlar .tf-layer-markers { max-width: none; gap: 4px; } #katmanlar .tf-layer-marker { padding: 10px 6px; } #katmanlar .tfl-icons { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 0; max-width: none; } #katmanlar .tfl-icon { padding: 8px 14px; border-radius: 999px; background: var(--d-surface); border: 1px solid var(--d-edge); color: var(--d-head); font-size: .86rem; } #katmanlar .tfl-icon svg { color: var(--d-tag); width: 18px; height: 18px; } /* Açık zeminde 1-5 etiketleri: metin lacivert, numara bronz, çizgi bronz. */ #katmanlar .tf-layer-marker { color: var(--l-body); } #katmanlar .tfm-info b { color: var(--l-heading); } #katmanlar .tfm-num { color: var(--l-gold-text); border-color: var(--l-gold-graphic); } #katmanlar .tf-layer-marker:hover .tfm-num, #katmanlar .tf-layer-marker.on .tfm-num { background: var(--l-gold-fill); color: #241A20; border-color: var(--l-gold-fill); box-shadow: 0 0 16px rgba(184,147,74,0.4); } #katmanlar .tfm-line { background: var(--l-line); } #katmanlar .tf-layer-marker:hover .tfm-line, #katmanlar .tf-layer-marker.on .tfm-line { background: var(--l-gold-graphic); } #katmanlar .tf-layer-marker:hover, #katmanlar .tf-layer-marker.on { background: rgba(10,17,40,0.05); } @media (max-width: 640px) { /* Figür (`.tfl-stage.tf-layer-stack`) `.urun-sahne`nin `display:contents`iyle doğrudan ızgara öğesi olur; KENDİSİ contents YAPILMAZ -- IntersectionObserver onu gözlüyor, kutusuz öğe hiç kesişmez ve fotoğraf mobilde görünmez kalırdı (ölçüldü: opacity 0). */ #katmanlar .tf-layer-stack { order: 4; width: clamp(220px, 70vw, 340px); justify-self: center; } #katmanlar .tf-layer-markers { order: 5; } #katmanlar .tfl-icons { order: 6; } #katmanlar .urun-govde { min-height: 0; } }