/* * SOGA Spaces — bileşen stilleri (@layer components) * * Neden tek dosya: buradaki bileşenlerin çoğu (başlık, altbilgi) HER sayfada * bulunur; toplam boyut küçük olduğu için blok-başına koşullu yükleme * karmaşıklığı kazancından fazla olurdu. WooCommerce blokları gibi gerçekten * koşullu yüklenmesi gerekenler functions.php'de wp_enqueue_block_style ile * ayrı kaydedilir. * * KURAL: hardcoded değer yok — her şey var(--wp--preset--*) / var(--wp--custom--*). */ @layer components { /* ============ ÜST ÇUBUK (topbar) ============ Ana menü ticari dikeyleri taşır; kurumsal bağlantılar ve dil seçimi buraya alındı. */ .soga-topbar { min-height: 34px; align-items: center; gap: var(--wp--preset--spacing--40); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: var(--wp--custom--track-wide); } .soga-topbar__menu { display: flex; align-items: center; gap: var(--wp--preset--spacing--40); } .soga-topbar a { color: var(--wp--preset--color--body); transition: color var(--wp--custom--transition-hover); } .soga-topbar a:hover { color: var(--wp--preset--color--ink); } /* Dil seçimi — bayraklı açılır menü.
kullanıldı: JavaScript gerekmez, klavye erişimi ve ESC davranışı yerleşik. Polylang bağlanınca markup eklentinin çıktısıyla değişir, sınıflar korunur. */ .soga-dil { position: relative; padding-inline-start: var(--wp--preset--spacing--40); border-inline-start: 1px solid var(--wp--preset--color--border-light); } .soga-dil summary { display: flex; align-items: center; gap: 7px; cursor: pointer; list-style: none; color: var(--wp--preset--color--ink); transition: color var(--wp--custom--transition-hover); } .soga-dil summary::-webkit-details-marker { display: none; } .soga-dil summary:hover { opacity: .55; } .soga-dil__bayrak { display: block; width: 20px; flex: none; line-height: 0; box-shadow: 0 0 0 1px rgb(0 0 0 / .10); } .soga-dil__bayrak svg { width: 100%; height: auto; display: block; } .soga-dil__ok { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; /* ⚠️ `transform: rotate()`, bağımsız `rotate` özelliği DEĞİL — sebebi GEÇİŞ, özelliğin kendisi değil. Ölçüldü 2026-08-02: dil oku menü açıldığında HİÇ dönmüyordu (`transform: none`, computed `0deg`). Kök neden: kapalı durumda başlangıç `rotate: none` ve `none` bir AÇI DEĞERİ olmadığı için `transition: rotate` onu `180deg`e interpolasyon edemiyor, değer 0'da takılıyor. `transform`'da ise `none` = birim matris olarak tanımlı, dolayısıyla geçiş çalışıyor. (`rotate` özelliğinin kendisi ``'de sorunsuz uygulanıyor — geçişsiz ölçümle doğrulandı; ilk teşhis bu yönde yanlıştı.) Alternatif çözüm kapalı duruma açıkça `rotate: 0deg` yazmaktı; `transform` seçildi çünkü desteği daha geniş. */ transition: transform var(--wp--custom--transition-hover); } .soga-dil[open] .soga-dil__ok { transform: rotate(180deg); } /*
kapalıyken içeriği gizler, ANCAK mutlak konumlu çocuk bundan etkilenmiyor (ölçüldü: kapalıyken display:block, 127px). Açıkça gizlenir. */ .soga-dil:not([open]) .soga-dil__liste { display: none; } .soga-dil__liste { position: absolute; inset-block-start: calc(100% + 8px); inset-inline-end: 0; z-index: 40; min-width: 168px; margin: 0; padding: 6px 0; list-style: none; background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--border-light); box-shadow: 0 8px 24px rgb(0 0 0 / .10); } .soga-dil__liste li { margin: 0; } .soga-dil__liste a { display: flex; align-items: center; gap: 9px; padding: 9px var(--wp--preset--spacing--30); color: var(--wp--preset--color--body); text-transform: none; letter-spacing: 0; font-weight: 500; transition: background var(--wp--custom--transition-hover), color var(--wp--custom--transition-hover); } .soga-dil__liste a:hover { background: var(--wp--preset--color--surface); color: var(--wp--preset--color--ink); } .soga-dil__liste a[aria-current] { color: var(--wp--preset--color--ink); font-weight: 700; } @media (max-width: 620px) { .soga-topbar { font-size: 0.625rem; gap: var(--wp--preset--spacing--30); } .soga-topbar__menu { gap: var(--wp--preset--spacing--30); } .soga-dil { padding-inline-start: var(--wp--preset--spacing--30); } } /* ============ BAŞLIK ============ */ /* ⚠️ STICKY BURADA DEĞİL — `overrides.css`'te şablon parçasına verilir. Ölçüldü 2026-08-02 (Osman'ın tarayıcısında): `.soga-ust`'a `position:sticky` yazmak ETKİSİZ. Yapışkan öğe yalnız KENDİ ATA KUTUSUNUN içinde yapışır; `.soga-ust`'un atası `
` ve o kutu yalnızca 113px yüksekliğinde (üst çubuk + başlık). Sayfa kayınca başlık o 113px'lik alanla birlikte yukarı çıkıyordu — 900px kaydırmada `top: -820px` ölçüldü. Sticky'yi ATA'ya taşımak tek doğru çözüm. */ .soga-ust { height: var(--wp--custom--header-height); } .soga-ust__logo img { width: var(--wp--custom--logo-width); height: auto; } .soga-ust__menu a { transition: color var(--wp--custom--transition-hover); } .soga-ust__araclar { display: flex; align-items: center; gap: 12px; } .soga-ust__ikon { display: grid; place-items: center; padding: 4px; line-height: 0; background: none; border: 0; cursor: pointer; color: var(--wp--preset--color--ink); transition: color var(--wp--custom--transition-hover); } /* Monokrom palette (2026-08-02) vurgu rengi metin rengine eşitlendi, bu yüzden "hover'da rengi vurguya çevir" artık HİÇBİR fark üretmiyor — ölçüldü: normal ve hover ikisi de rgb(50,44,44). İkon yüzeylerinde geri bildirim saydamlıkla verilir (kart favori düğmesi zaten bu dili kullanıyordu, sözleşme birleşti). */ .soga-ust__ikon:hover { opacity: .55; } .soga-ust__ikon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } /* Optik denge: nominal boyut eşit olsa da çizim alanı değil. Ölçüm (24 birim viewBox, en büyük kenar): hesap/arama 18 · kalp 20. ⚠️ `[data-ikon="sepet"]` seçicisi 2026-08-02'de KALDIRILDI — ölü koddu. Sepet ikonunu artık `woocommerce/mini-cart` bloğu basıyor ve o markup'ta `data-ikon` özniteliği YOK; kural hiçbir öğeye uygulanmıyordu. Sepet ikonunun aynı optik dengesi `woocommerce.css`'te, Woo'nun kendi sınıfı üzerinden veriliyor. */ .soga-ust__ikon[data-ikon="favori"] svg { scale: .92; } /* ============ HERO ============ */ .soga-hero { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } /* ---- Carousel okları ------------------------------------------------- Sürükleme YERİNE ok gezinmesi (Osman kararı 2026-08-01): panelin tamamı tıklanabilir olduğu için sürükleme ile tıklama aynı yüzeyde çakışıyordu. Ölçülen kusur: `scroll-snap: x mandatory` bırakma anında en yakın durağa zorla çekiyordu (80px ve 200px sürüklemeler 0'a geri zıplıyordu). Ok dili tekil ürün görüntüleyicisiyle AYNI (DESIGN-DNA §9.7 Moderno ölçümü): 50×50 daire, beyaz zemin, 1px ink kenarlık, hover'da ters renk. */ .soga-hero-sarmal { position: relative; } .soga-hero__ok { position: absolute; inset-block-start: 50%; translate: 0 -50%; z-index: 10; display: grid; place-items: center; width: 50px; height: 50px; padding: 0; border: 1px solid var(--wp--preset--color--ink); /* Keskin köşe — tema dili radius 0 (DESIGN-DNA). Moderno'nun kendi okları daireydi ama bizim tasarım dilimiz keskin; tutarlılık referansı yener. */ border-radius: 0; background: var(--wp--preset--color--base); color: var(--wp--preset--color--ink); cursor: pointer; /* Yalnız hero'ya gelindiğinde belirir — görseli sürekli kapatmasın. */ opacity: 0; transition: opacity var(--wp--custom--transition-move), background var(--wp--custom--transition-hover), color var(--wp--custom--transition-hover); } .soga-hero__ok svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .soga-hero__ok:hover { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--base); } .soga-hero__ok--onceki { inset-inline-start: 30px; } .soga-hero__ok--sonraki { inset-inline-end: 30px; } /* `.soga-slider` = /wood/ hero slider'ı (Osman 2026-08-05). Ok dili PAYLAŞILIR, kopyalanmaz: yalnız görünürlüğü tetikleyen ata eklendi. Slider'ın kendisi `position: relative` (overrides.css) — sarmala gerek yok, oklar doğrudan onun içinde konumlanır. */ .soga-hero-sarmal:hover .soga-hero__ok, .soga-hero-sarmal:focus-within .soga-hero__ok, .soga-slider:hover .soga-hero__ok, .soga-slider:focus-within .soga-hero__ok, .soga-carousel-kap:hover .soga-hero__ok, .soga-carousel-kap:focus-within .soga-hero__ok { opacity: 1; } /* Dokunmatikte hover yok — oklar gizli kalır, parmakla kaydırma zaten doğal. */ @media (hover: none) { .soga-hero__ok { display: none; } } /* Klon paneller görsel olarak asıllarla aynıdır; ayrı stile ihtiyaçları yok. Erişilebilirlik tarafı JS'te: aria-hidden + tabindex -1. */ .soga-hero--suruklerken img { pointer-events: none; } .soga-hero::-webkit-scrollbar { display: none; } .soga-hero__panel { position: relative; flex: 0 0 calc(100% / 3.05); height: var(--wp--custom--hero-height); scroll-snap-align: start; overflow: hidden; display: grid; place-items: center; text-align: center; color: var(--wp--preset--color--inverse); } .soga-hero__panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Okunabilirlik katmanı — ölçülen kontrast: en düşük 4.91:1 (küçük metin eşiği 4.5). Görsel seçimine bağımlı olmamalı: açık tonlu bir hero görseli gelse de eşik tutar. */ .soga-hero__panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / .32) 0%, rgb(0 0 0 / .30) 20%, rgb(0 0 0 / .46) 42%, rgb(0 0 0 / .46) 70%, rgb(0 0 0 / .32) 86%, rgb(0 0 0 / .36) 100%); } .soga-hero__ic { position: relative; z-index: 2; display: grid; gap: var(--wp--preset--spacing--30); padding: var(--wp--preset--spacing--50); /* Metin bloğunun tamamı düğmeye gidiyor (Osman 2026-08-18, `hero.js`). Tıklanabilirlik imleçle bildirilir; PANEL değil yalnız bu blok — görselin üstü tıklanmaz, orada imleç de değişmez. */ cursor: pointer; } /* Metin bloğuna yumuşak lokal vinyet — tüm görseli karartmadan kontrastı destekler. */ .soga-hero__ic::before { content: ""; position: absolute; inset: -70% -45%; z-index: -1; background: radial-gradient(ellipse at center, rgb(0 0 0 / .20) 0%, rgb(0 0 0 / .15) 34%, rgb(0 0 0 / .05) 60%, rgb(0 0 0 / 0) 78%); } .soga-hero__etiket { margin: 0; font-size: var(--wp--preset--font-size--label); font-weight: 700; text-transform: uppercase; letter-spacing: var(--wp--custom--track-wide); } .soga-hero__baslik { margin: 0; font-size: var(--wp--preset--font-size--hero); font-weight: 500; line-height: 1.14; letter-spacing: var(--wp--custom--track-tight); } .soga-hero__link { justify-self: center; padding-bottom: 2px; font-size: var(--wp--preset--font-size--label); font-weight: 700; text-transform: uppercase; letter-spacing: var(--wp--custom--track-wide); color: inherit; transition: color var(--wp--custom--transition-hover); } /* ⚠️ `border-bottom` BURADAN KALDIRILDI (2026-08-18, Osman bildirimi). Sabit kenarlık, `base.css > ARAYÜZ BAĞLANTISI`taki kanonik hover çizgisiyle ÜST ÜSTE biniyordu: hover'da iki çizgi görünüyordu (ölçüldü — normal 1 kaynak, hover 2 kaynak). Çizgiyi artık tek yer verir: kanonik `::after`, soldan sağa. Hero'nun kendi kenarlığını geri koymak duplicate'i geri getirir. */ /* 🔴 YAYILAN BAĞLANTI ŞU AN YOK — kural KALDIRILDI, karar bekliyor (2026-08-18). Buradaki `::after { inset: 0 }` "panelin tamamı tıklanabilir" içindi ama 2026-08-05'te hover çizgisi `base.css > ARAYÜZ BAĞLANTISI`taki tek kanonik tanıma taşınınca AYNI pseudo'yu iki kural paylaşmaya başladı; çizgi kuralı kazandı (`height:1px` + `inset-block-end:-0.28em`) ve yayılan katman sessizce öldü. Ölçüldü 2026-08-18: panel 456x770, tıklanabilir alan 125x25 (%0,9), panel merkezinde bağlantı YOK. Yorum "tamamı tıklanabilir" diyordu — yalan söyleyen bir kuralı yerinde bırakmak yerine durum yazıldı. `::before`e taşımak ÇÖZMEZ (denendi, ölçüldü): pseudo en yakın konumlandırılmış ataya göre yayılır, `.soga-hero__link` `position: relative` (kanonik çizgi bunu gerektiriyor) → katman 124x25'te kaldı, panele ulaşmadı. Gerçek seçenekler — mimari karar, Osman'a bağlı: (a) link `position: static` + hover çizgisi `background-image` gradyanıyla → yayılan katman panele yayılır, ama hero kanonik `::after` dilinden çıkar (b) markup'a `
` sarmalayıcı → hero bloğu DB'de, müşteri düzenliyor (c) yayılan bağlantıdan vazgeç → düğme zaten tıklanabilir, panel dekoratif kalır */ .soga-hero__panel:hover .soga-hero__link { color: var(--wp--preset--color--accent); } /* ============ KAYAN ŞERİT ============ Referans ölçümü (Moderno /furniture/, 2026-08-01 · `_reference/marquee-tab.mjs`): 5 kopya · her kopya DOĞAL genişlikte (830px) · flex + gap 15px animasyon 14s linear infinite keyframe: translateX(0) → translateX(calc(-100% - var(--gap))) Bizdeki kusurun kök nedeni (ölçüldü): grup `min-width:100%` ile viewport'a GERİLİYOR ve öğeler `space-around` ile dağılıyordu. Sonuç: öğe araları içerikten değil ekran genişliğinden geliyordu (1440'ta çok açık, dar ekranda sıkışık) ve iki grubun ek yerinde ritim kırılıyordu. Ayrıca kaydırma `-100%` idi; gap hesaba katılmadığı için her devirde boşluk kadar sıçrama oluyordu. Çözüm Moderno ile aynı: grup doğal genişlikte kalır, ritmi tek bir `--serit-gap` kurar, kaydırma bir grup + bir gap kadar olur → dikişsiz döngü. */ .soga-serit { --serit-gap: var(--wp--preset--spacing--60); display: flex; gap: var(--serit-gap); overflow: hidden; padding-block: var(--wp--preset--spacing--30); border-block: 1px solid var(--wp--preset--color--border-light); } .soga-serit__grup { flex: 0 0 auto; display: flex; gap: var(--serit-gap); align-items: center; /* Hız Moderno ile eşitlendi: referans 59 px/sn ölçüldü; bizim grup+gap 1169px olduğu için 20s ≈ 58 px/sn verir (17s'de 69 px/sn ile fazla hızlıydı). */ animation: soga-kay 20s linear infinite; } .soga-serit__oge { display: flex; align-items: center; gap: var(--serit-gap); white-space: nowrap; font-size: var(--wp--preset--font-size--strip); font-weight: 600; text-transform: uppercase; letter-spacing: var(--wp--custom--track-wide); } /* Ayraç noktası onaylı mockup'tan gelir (Moderno'da ayraç yok, bu bizim işaretimiz). */ .soga-serit__oge::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--wp--preset--color--accent); } /* Bir grup + aradaki boşluk kadar kayınca sıradaki grup tam yerine oturur. `- var(--serit-gap)` olmazsa her turda boşluk kadar sıçrama görünür. */ @keyframes soga-kay { to { transform: translateX(calc(-100% - var(--serit-gap))); } } @media (prefers-reduced-motion: reduce) { .soga-serit__grup { animation: none; } } /* ============ FAVORİ / KARŞILAŞTIRMA ============ Kart düğmeleri temanın kendi markup'ından gelir (`inc/urun-kart.php`): `.soga-kart__favori` sol üstte, `.soga-kart__btn[data-eylem]` alt şeritte. Burada YALNIZ durum görünümü ve liste sayfaları tanımlanır. */ /* Listeye eklenmiş durumu: ikon dolu ve vurgu renginde. */ .soga-kart__favori[data-ekli="evet"], .soga-kart__btn[data-ekli="evet"], .soga-eylem__btn[data-ekli="evet"] { color: var(--wp--preset--color--accent); } .soga-kart__favori[data-ekli="evet"] svg, .soga-eylem__btn[data-ekli="evet"] svg { fill: currentColor; } /* Listede olan kartın kalbi hover beklemeden görünür kalır — kuralın kanonik yeri `blocks/urun-kart.css` (katmansız). Buradaki kopya `@layer components` içinde olduğu için hiç uygulanmıyordu; kaldırıldı. */ /* ---- liste sayfaları (favorilerim / karsilastir) ---- */ .soga-liste__bos { color: var(--wp--preset--color--muted); } /* ============ İKON ROZETLERİ + BİLDİRİM ============ Rozet, taşıdığı ikonun köşesine oturur. ⚠️ `position: relative` TÜM ikonlara verilir, yalnız sepete DEĞİL. Ölçüldü 2026-08-02 (Osman'ın tarayıcısında, gerçek oturumla): kural `[data-ikon="sepet"]` ile daraltılmıştı; sonradan favori ve karşılaştırma ikonlarına da rozet eklenince (`liste.js`) o ikiсinin rozeti konumlanacak ata bulamayıp en yakın konumlandırılmış ataya kaçtı ve İKİSİ DE AYNI NOKTAYA (x=1485, y=76) yığıldı. Ekranda üst üste binmiş iki rozet görünüyordu — "sepetin üstünde adet kısımları duplicate" şikâyeti buydu. Sayılar da farklıydı (favori 3 · karşılaştırma 3 · sepet 5), o yüzden "yanlış çalışıyor" gibi okunuyordu. Ders: bir bileşene sonradan yeni taşıyıcı eklenirse, o bileşenin konumlandırma önkoşulu da yeni taşıyıcıya taşınmalı. */ .soga-ust__ikon { position: relative; } .soga-rozet { position: absolute; inset-block-start: -4px; inset-inline-end: -6px; display: grid; place-items: center; min-width: 18px; height: 18px; padding-inline: 5px; border-radius: 9px; background: var(--wp--preset--color--accent); color: var(--wp--preset--color--inverse); font-size: 11px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } /* Bildirim ekranın altında belirir: akışı kesmez, tıklamayı engellemez. */ .soga-bildirim { position: fixed; inset-block-end: var(--wp--preset--spacing--50); inset-inline-start: 50%; z-index: 90; display: flex; align-items: center; gap: var(--wp--preset--spacing--40); padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50); background: var(--wp--preset--color--ink); color: var(--wp--preset--color--inverse); font-size: var(--wp--preset--font-size--label); opacity: 0; visibility: hidden; transform: translate(-50%, 12px); transition: opacity .25s ease, transform .25s ease, visibility .25s; } .soga-bildirim[data-acik] { opacity: 1; visibility: visible; transform: translate(-50%, 0); } /* `color` BİLEREK yok: `overrides.css` katmansız olarak `inverse` yazıyor ve bu dosya `@layer components` içinde olduğu için buradaki değer HİÇ uygulanmıyordu (ölçüldü 2026-08-04). Çift tanım kaldırıldı; rengin tek kanonik yeri `overrides.css`. */ .soga-bildirim a { font-weight: 700; text-transform: uppercase; letter-spacing: var(--wp--custom--track-wide); border-block-end: 1px solid currentColor; } @media (prefers-reduced-motion: reduce) { .soga-bildirim { transition: none; } } /* ============ ARAMA KATMANI ============ Başlıktaki arama düğmesi bir `` açar (odak tuzağı + ESC tarayıcıdan). Katman üstten iner: sayfanın geri kalanını örtmez, arama bir "mod" değil bir "çekmece" gibi davranır. */ .soga-arama { width: min(760px, 100% - var(--wp--preset--spacing--50)); margin-block-start: var(--wp--preset--spacing--70); padding: var(--wp--preset--spacing--50); border: 1px solid var(--wp--preset--color--border-light); background: var(--wp--preset--color--base); color: var(--wp--preset--color--ink); } .soga-arama::backdrop { background: color-mix(in srgb, var(--wp--preset--color--ink) 45%, transparent); } .soga-arama__form { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--wp--preset--spacing--30); padding-block-end: var(--wp--preset--spacing--30); border-block-end: 1px solid var(--wp--preset--color--border-light); } .soga-arama__ikon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; } .soga-arama__girdi { border: 0; background: none; font-family: inherit; font-size: var(--wp--preset--font-size--section); color: inherit; } .soga-arama__girdi:focus { outline: none; } .soga-arama__girdi::placeholder { color: var(--wp--preset--color--faint); } /* Chrome `type="search"` girdisine kendi temizle (×) düğmesini basıyor; katmanın kendi kapat düğmesiyle yan yana İKİ × görünüyordu (ekran görüntüsüyle yakalandı). */ .soga-arama__girdi::-webkit-search-cancel-button { display: none; } .soga-arama__kapat { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--wp--preset--color--border-light); border-radius: 50%; background: none; color: inherit; cursor: pointer; transition: background var(--wp--custom--transition-hover), color var(--wp--custom--transition-hover); } .soga-arama__kapat:hover { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--inverse); } .soga-arama__kapat svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; } .soga-arama__durum { margin-block: var(--wp--preset--spacing--30) 0; font-size: var(--wp--preset--font-size--label); color: var(--wp--preset--color--muted); } .soga-arama__sonuc { margin: 0; padding: 0; list-style: none; } .soga-arama__oge { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: var(--wp--preset--spacing--30); padding-block: var(--wp--preset--spacing--30); border-block-start: 1px solid var(--wp--preset--color--border-light); color: inherit; text-decoration: none; } .soga-arama__oge:hover { color: var(--wp--preset--color--accent); } .soga-arama__oge img, .soga-arama__bos { width: 56px; height: 56px; object-fit: cover; background: var(--wp--preset--color--image-bg); } .soga-arama__ad { font-size: var(--wp--preset--font-size--body); } .soga-arama__fiyat { font-size: var(--wp--preset--font-size--label); color: var(--wp--preset--color--muted); white-space: nowrap; } /* ============ KATEGORİ BANNER ============ */ /* 2+3 düzen (2026-08-06): bölüm 2 karttan 5'e çıktı (Ofis · Mağaza · Kids · Wood · Mimarlık) ve `1fr 1fr` ızgarada beşincisi tek başına yarım satırda kalıyordu. 6 sütunluk taban, iki kartı yarım (span 3), üçünü üçte bir (span 2) yapıyor — satırlar tam doluyor. Sınıf taşımayan kart 6 sütunun tamamını kaplamasın diye `--dar` varsayılan. */ .soga-kategoriler { display: grid; grid-template-columns: repeat(6, 1fr); } .soga-kategori { grid-column: span 2; } .soga-kategori--genis { grid-column: span 3; } .soga-kategori { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; } /* Üçlü satırdaki kartlar dar olduğu için 16/10 onları çok kısaltıyor; biraz daha dikey oran satır yüksekliklerini birbirine yaklaştırıyor. */ .soga-kategori--dar { aspect-ratio: 4 / 3; } .soga-kategori img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .soga-kategori__btn { position: relative; z-index: 2; padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--60); background: var(--wp--preset--color--base); color: var(--wp--preset--color--ink); font-size: var(--wp--preset--font-size--label); font-weight: 700; text-transform: uppercase; letter-spacing: var(--wp--custom--track-wide); transition: background var(--wp--custom--transition-hover), color var(--wp--custom--transition-hover); } /* Kategori kartı hover'ı BURADA DEĞİL: `overrides.css` aynı seçiciye katmansız `background: ink` yazıyor ve katmansız stiller katmanlıları her zaman yener — buradaki `background: accent` hiç uygulanmıyordu (ölçüldü 2026-08-05, css-denetim `[1] dosyalar arası çakışma`). Üstelik monokrom kararından beri `accent` zaten `ink`e eşit, yani kural uygulansaydı bile fark üretmezdi. Tek yer: `overrides.css`. */ /* ============ ALTBİLGİ ============ */ /* Altbilgi KOYU zeminli ve bağlantıları zaten beyaz — monokromda "hover'da vurgu rengine geç" hem fark üretmez hem de vurgu artık zeminle aynı aileden olduğu için bağlantıyı GÖRÜNMEZ yapardı. Geri bildirim alt çizgiyle verilir. ⚠️ Kural burada DEĞİL: 2026-08-05'te `base.css > ARAYÜZ BAĞLANTISI` altındaki tek kanonik tanıma taşındı (soldan sağa açılan çizgi). Altbilgiye özel bir hover davranışı kalmadı. */ .soga-alt__iletisim p { color: rgb(255 255 255 / .72); margin-block: 0 10px; } .soga-alt__iletisim strong { color: var(--wp--preset--color--inverse); font-weight: 600; } /* NOT: iletişim bağlantılarının rengi buraya YAZILAMAZ — `overrides.css`te. theme.json'un `a:where(:not(.wp-element-button))` kuralı KATMANSIZ üretilir ve buradaki katmanlı kuralı yener; ölçüldü: bağlantı ink kalıyor, footer zemini de ink → metin görünmez oluyordu (@layer tuzağı, CLAUDE.md §4). */ /* ----------------------------------------------------------------------- BÜLTEN ŞERİDİ — altbilginin İÇİNDEN çıkarılıp ÜSTÜNE alındı (Osman 2026-08-05: "bülten şeridi ayrılsın"). Zemin artık `surface` (açık), koyu değil; input ve düğme buna göre yeniden kuruldu. Düğmenin görünümü `blocks/buton.css`teki BİRİNCİL sözleşmeden gelir — o dosyada koyu-zemin listesinden çıkarıldı. ----------------------------------------------------------------------- */ .soga-bulten-serit__ic { display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--50); flex-wrap: wrap; } .soga-bulten-serit__metin { margin: 0; max-width: 46ch; color: var(--wp--preset--color--ink); letter-spacing: var(--wp--custom--track-wide); } .soga-bulten { display: flex; min-width: min(24rem, 100%); } .soga-bulten input { flex: 1; padding: 12px var(--wp--preset--spacing--30); background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--border-light); border-inline-end: 0; color: var(--wp--preset--color--ink); font-size: var(--wp--preset--font-size--price); } /* Görünüm `blocks/buton.css > .soga-btn--ters` bloğundan gelir (koyu zemin varyantı). Burada yalnız kutu + tipografi kalır; renk/kenarlık/hover tekrarlanmaz — eski hover `accent` kullanıyordu ve accent ink'e eşit olduğu için koyu zeminde düğmeyi görünmez yapıyordu. */ .soga-bulten button { padding-inline: var(--wp--preset--spacing--40); cursor: pointer; font-size: var(--wp--preset--font-size--price); font-weight: 600; text-transform: uppercase; letter-spacing: var(--wp--custom--track-wide); } } @layer utilities { @media (max-width: 860px) { .soga-hero__panel { flex-basis: 100%; } .soga-hero { --wp--custom--hero-height: 495px; } /* Tek kolonda span'lar taşar (6 sütunluk tabandan geliyorlar) — sıfırlanır ve iki oran tek orana iner, yoksa kartlar dar ekranda farklı boyda dizilir. */ .soga-kategoriler { grid-template-columns: 1fr; } .soga-kategori, .soga-kategori--genis, .soga-kategori--dar { grid-column: auto; aspect-ratio: 16 / 10; } .soga-ust__logo img { width: 132px; } .soga-arama { padding: var(--wp--preset--spacing--40); } .soga-arama__girdi { font-size: var(--wp--preset--font-size--product); } } } /* --------------------------------------------------------------------------- MİNİ SEPET PANELİ — sağdan açılır (assets/js/sepet.js) Ölçüler Moderno'dan ALINDI (kod kopyalanmadı): 360px genişlik, tam yükseklik, translateX(100%) → 0, arkada hafif karartma. KATMANSIZ: `` ve backdrop'a WordPress/WooCommerce global kuralları karışıyor; katmanlı yazılsa onlara kaybederdi (@layer tuzağı, bu projede 8 kez). --------------------------------------------------------------------------- */ /* ⚠️ `min-height: 0` ZORUNLU — bu satır olmadan `overflow-y: auto` HİÇ ÇALIŞMAZ. Izgara/esnek kutu satırlarının varsayılan alt sınırı `min-content`'tir; yani `1fr` satırı içeriğinin tamamı kadar BÜYÜR ve kaydırma hiç tetiklenmez. Ölçüldü 2026-08-02 (Osman'ın tarayıcısında, 5 ürünlü gerçek sepetle): ürün satırları y=113'ten y=1231'e uzuyordu, "Ödemeye Geç" düğmesi y=552'de yani LİSTENİN ORTASINDA kalıyordu — düğmeler ürün satırlarının altında kaldığı için tıklanamıyordu. Kullanıcı bunu "mini-sepetin içindeki hiçbir fonksiyon çalışmıyor" diye bildirdi; işlevler sağlamdı, ERİŞİLEMİYORLARDI. 2 ürünle test edildiğinde görünmüyor — kusur ancak liste panel yüksekliğini aştığında ortaya çıkıyor. Ders: kaydırılabilir panelleri TAŞACAK kadar veriyle test et. */