/* ========================================================= Plato Çiçek — Tema (component katmanı) ========================================================= Bu dosya artık tokens.css'in ÜZERİNE kurulu. Aşağıdaki :root bloğu, projenin geri kalanında (bu dosya + admin.css + tüm view'lar) hâlâ kullanılan KISA isimleri (--color-primary vb.) tokens.css'teki yeni kanonik token'lara eşleyen bir "legacy alias" katmanıdır — hiçbir component stili değişmedi, sadece değerlerin KAYNAĞI değişti. tokens.css BU DOSYADAN ÖNCE yüklenmelidir (bkz. layout ). Marka rengi/logo netleştiğinde artık BURASI DEĞİL, tokens.css'teki "1. COLOR TOKENS" primitive paleti güncellenir — bu dosyaya dokunmaya gerek kalmaz. Ayrıntılı token referansı: docs/DESIGN_SYSTEM.md. ========================================================= */ :root { --color-primary: var(--pc-color-primary); --color-primary-dark: var(--pc-color-primary-hover); --color-accent: var(--pc-color-accent); --color-accent-hover: var(--pc-color-accent-hover); --color-accent-light: var(--pc-color-accent-subtle); --color-bg: var(--pc-color-bg-canvas); --color-surface: var(--pc-color-bg-surface); --color-text: var(--pc-color-text-primary); --color-text-muted: var(--pc-color-text-secondary); --color-border: var(--pc-color-border-default); --color-border-focus: var(--pc-color-border-focus); --color-success: var(--pc-color-success-text); --color-success-bg: var(--pc-color-success-bg); --color-success-border: var(--pc-color-success-border); --color-danger: var(--pc-color-danger-text); --color-danger-bg: var(--pc-color-danger-bg); --color-danger-border: var(--pc-color-danger-border); --color-warning: var(--pc-color-warning-text); --color-warning-bg: var(--pc-color-warning-bg); --font-heading: var(--pc-font-family-heading); --font-body: var(--pc-font-family-body); --radius-sm: var(--pc-radius-sm); --radius-md: var(--pc-radius-md); --radius-lg: var(--pc-radius-lg); --shadow-sm: var(--pc-shadow-sm); --shadow-md: var(--pc-shadow-md); --space-1: var(--pc-space-1); --space-2: var(--pc-space-2); --space-3: var(--pc-space-3); --space-4: var(--pc-space-4); --space-5: var(--pc-space-5); --space-6: var(--pc-space-6); --container-width: var(--pc-container-max-width); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); color: var(--color-text); background: var(--color-bg); line-height: 1.6; font-size: 16px; } h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 600; line-height: 1.25; margin: 0 0 var(--space-3); color: var(--color-primary-dark); } h1 { font-size: clamp(2rem, 4vw, 2.75rem); } h2 { font-size: clamp(1.5rem, 3vw, 2rem); } h3 { font-size: 1.25rem; } p { margin: 0 0 var(--space-3); color: var(--color-text-muted); } a { color: var(--color-primary); text-decoration: none; } a:hover { color: var(--color-accent); } img { max-width: 100%; display: block; } .container { max-width: var(--container-width); margin: 0 auto; padding: 0 var(--space-4); } /* Focus görünürlüğü — erişilebilirlik */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: var(--pc-border-width-thick) solid var(--color-border-focus); outline-offset: 2px; } /* Görsel olarak gizli ama ekran okuyucu/klavye için erişilebilir metin */ .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; padding: 0; margin: -1px; } /* --- Header --- Yükseklik: 88px (docs/homepage/HOMEPAGE_HIGH_FIDELITY_UI.md §1). Sticky, dinlenme halinde Elevation 0; scroll sonrası (.is-scrolled, header.js ile eklenir) Elevation 2'ye geçiş — progressive enhancement, JS yüklenmezse header yine sticky çalışır, sadece gölge geçişi olmaz. Stickiness artık .site-header-stack sarmalayıcısında (bkz. aşağıda) — böylece anasayfa/mobilde üstüne .promo-marquee eklendiğinde ikisi TEK bir sticky blok olarak birlikte kayar, ayrı bir yükseklik hesabı gerekmez. */ .site-header-stack { position: sticky; top: 0; z-index: var(--pc-z-sticky); } .site-header { background: var(--color-surface); border-bottom: 1px solid var(--pc-border-subtle); box-shadow: var(--pc-elevation-0); transition: box-shadow var(--pc-transition-base), border-color var(--pc-transition-base); } .site-header.is-scrolled { border-bottom-color: transparent; box-shadow: var(--pc-elevation-2); } /* Mobil kayan duyuru şeridi — sadece anasayfada (bkz. layouts/storefront.php $showMarquee), sadece ≤768px'te görünür. İki aynı art arda + %50 translateX döngüsü ile sonsuz/kesintisiz akış sağlanır (klasik CSS marquee tekniği — bkz. .promo-marquee__track span:nth-child(2)). */ .promo-marquee { display: none; background: var(--color-primary-dark); color: #fff; overflow: hidden; } .promo-marquee__track { display: flex; width: max-content; animation: promo-marquee-scroll 16s linear infinite; } .promo-marquee__track span { display: inline-block; flex-shrink: 0; padding: 7px var(--pc-space-6) 7px 0; font-size: 0.8125rem; font-weight: var(--pc-font-weight-medium); letter-spacing: 0.01em; white-space: nowrap; } @keyframes promo-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (max-width: 768px) { .promo-marquee { display: block; } } @media (prefers-reduced-motion: reduce) { .promo-marquee { overflow-x: auto; } .promo-marquee__track { animation: none; } } .site-header__inner { position: relative; /* .main-nav--mobile'ın konumlanma referansı — bkz. aşağıda */ display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 88px; } .brand { /* Creative pass: logo biraz daha güçlü konumlansın — .text-h4'ten bir kademe büyük + hafif harf aralığı, ama hâlâ ölçülü (Aesop tarzı "sessiz güç", bağırmayan bir wordmark). */ font-family: var(--font-heading); font-size: var(--pc-font-size-xl); /* 1.25rem */ font-weight: var(--pc-font-weight-semibold); color: var(--color-primary-dark); letter-spacing: 0.01em; flex-shrink: 0; } /* Masaüstü navigasyon — daha hafif optik ağırlık (semibold yerine medium). İki ayrı