/* ========================================================================== SyncResto — V3 "AURORA" TEMASI · main.css 26 Ağu 2026. Referans: gncmenu.com/19845 (Garden 1922). TEMA: (v3-theme-head.ejs senkron snippet'i basar — bayi varsayılanı + ziyaretçinin localStorage tercihi). Koyu = varsayılan. ACCENT: --v3-accent-dark / --v3-accent-light sunucuda türetilir (server.js v3Accents): bayinin panel_settings.primary_color'ı, ilgili zemine karşı WCAG ≥4.5:1 olacak şekilde parlaklığı kaydırılmış hâli. Marka rengi yoksa veya griyse Aurora altını. 🔴 --primary/--accent/--price-color ADLARINI KULLANMA: common.js applyThemeColors() onları her temada HAM (clamp'siz) renkle eziyor. --on-dark-*: fotoğraf scrim'i üstündeki yazılar. Tema ile DÖNMEZ — hero, kategori kapağı ve ürün detay hero'su her iki modda da koyu görselin üstünde durur. ========================================================================== */ :root { --bg-0: #14110f; --bg-1: #1c1815; --bg-2: #23201b; --surface: #29241f; --border: rgba(212, 175, 106, 0.16); --ink-0: #f5efe4; --ink-1: #cfc6b8; --ink-2: #948a7c; --glass: rgba(255, 255, 255, 0.045); --danger: #e2694b; --success: #4caf7d; --scrim: rgba(15, 12, 10, 0.88); /* accent — v3-theme-head.ejs tarafından basılır, burada yalnız devralınır */ --v3-accent-dark: #d4af6a; --v3-accent-light: #8c6630; --gold: var(--v3-accent-dark); /* sabit — tema ile dönmez (koyu foto üstü) */ --on-dark: #f5efe4; --on-dark-soft: #cfc6b8; --on-dark-mute: #948a7c; --on-dark-border: rgba(212, 175, 106, 0.16); --on-dark-glass: rgba(255, 255, 255, 0.045); --on-dark-gold: #d4af6a; --on-dark-gold-soft: #e7cf9c; --radius-s: 10px; --radius-m: 16px; --radius-l: 26px; --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --ease: cubic-bezier(.22, .61, .36, 1); --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.28); --shadow-2: 0 16px 36px rgba(0, 0, 0, 0.42); } :root[data-theme="light"] { --bg-0: #faf7f2; --bg-1: #f3efe7; --bg-2: #ece5d8; --surface: #ffffff; --border: rgba(150, 110, 40, 0.22); --ink-0: #2a2420; --ink-1: #55493c; --ink-2: #766b5d; --glass: rgba(20, 17, 15, 0.035); --scrim: rgba(15, 12, 10, 0.88); --gold: var(--v3-accent-light); --shadow-1: 0 2px 8px rgba(90, 70, 40, 0.10); --shadow-2: 0 16px 36px rgba(90, 70, 40, 0.16); } /* ========================================================================== 🔗 DEĞİŞKEN KÖPRÜSÜ — TEK KAYNAK Temel tema (klasik) tüm renklerini `--primary / --bg / --text / --surface-2 …` üzerinden kurar. Bu değişkenleri common.js `applyThemeColors()` ÇALIŞMA ANINDA `:root`a INLINE yazar (ham bayi rengi). Sepet, ödeme adımları, giriş modali ve checkout.js'in ÜRETTİĞİ inline stiller hep bunlara bakar. Burada onları body seviyesinde Aurora token'larına bağlıyoruz: • `:root` inline'ı body'deki tanımı EZEMEZ (daha yakın tanım kazanır) → !important gerekmez • Böylece TEK bu blok, klasik CSS + inline stiller dahil TÜM yüzeyi temaya sokar • Accent kontrast-güvenli `--gold`tan gelir (ham renk değil) — koyu/açık modda okunur ========================================================================== */ body.v3-theme { --primary: var(--gold); --primary-color: var(--gold); --primary-dark: var(--gold); --primary-light: var(--on-dark-gold-soft); --primary-rgb: var(--v3-accent-dark-rgb, 212, 175, 106); --primary-glow: var(--glass); --primary-soft: var(--glass); --primary-alpha-30: rgba(var(--v3-accent-dark-rgb, 212, 175, 106), 0.30); --secondary: var(--ink-1); --secondary-color: var(--ink-1); --secondary-glow: var(--glass); --secondary-rgb: var(--v3-accent-dark-rgb, 212, 175, 106); --accent: var(--gold); --price-color: var(--gold); --price-color-rgb: var(--v3-accent-dark-rgb, 212, 175, 106); --price-color-soft: var(--glass); --bg: var(--bg-0); --surface-2: var(--bg-2); --text: var(--ink-0); --text-light: var(--ink-2); --text-muted: var(--ink-2); --shadow: rgba(0, 0, 0, 0.35); --warning: #f0b64b; } :root[data-theme="light"] body.v3-theme { --primary-rgb: var(--v3-accent-light-rgb, 140, 102, 48); --secondary-rgb: var(--v3-accent-light-rgb, 140, 102, 48); --price-color-rgb: var(--v3-accent-light-rgb, 140, 102, 48); --primary-alpha-30: rgba(var(--v3-accent-light-rgb, 140, 102, 48), 0.30); --primary-light: var(--ink-1); --shadow: rgba(90, 70, 40, 0.16); } /* ---------- base ---------- */ *, *::before, *::after { box-sizing: border-box; } body.v3-theme { margin: 0; min-height: 100%; background: var(--bg-0); color: var(--ink-0); font-family: var(--font-body); font-size: 15px; line-height: 1.5; overflow-x: hidden; -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; } .v3-theme h1, .v3-theme h2, .v3-theme h3 { font-family: var(--font-display); font-weight: 600; margin: 0; letter-spacing: 0.01em; } .v3-theme p { margin: 0; } .v3-theme button { font-family: inherit; } .v3-theme img { max-width: 100%; display: block; } .v3-theme a { color: inherit; text-decoration: none; } .v3-theme ::selection { background: var(--gold); color: var(--bg-0); } .v3-theme :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; } /* Aurora'nın görsel yer tutucusu — görsel yokken EK İSTEK ATMAZ (saf CSS gradyan). Ürün/kategori görseli olmayan bayide sayfa yine dolu görünür. */ .v3-theme .v3-ph { position: relative; z-index: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(120% 140% at 30% 20%, #3a2f22 0%, #211c17 60%, #17130f 100%); color: rgba(245, 239, 228, 0.85); overflow: hidden; } .v3-theme .v3-ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(212, 175, 106, 0.10), transparent 55%); } /* ========================================================================== HEADER ========================================================================== */ /* ============ HEADER (v3) — hero üstünde SAYDAM yüzer ============ 27 Ağu — Mustafa: header İLK GİRİŞTE SAYDAM (hero fotoğrafı üstünde). MOBİLDE aşağı kaydırınca ARKAPLAN gelir (sticky kalır, okunur); MASAÜSTÜNDE absolute → yukarı kaydırınca SABİT KALMAZ, kaybolur (menü şeridi sabit kalır). '.scrolled' sınıfını home.js scroll'da ekler/çıkarır. NOT: .top-bar (pages.css, main.css'ten SONRA) background:bg-0 DAYATIYOR → override'lar .v3-header.top-bar (+1 sınıf özgüllük) ile yazıldı ki KESİN kazansın. */ .v3-theme .v3-header { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 12px; padding: 12px 16px; } .v3-theme .v3-header.top-bar { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: none; min-height: 0; transition: background .25s ease, border-color .25s ease; } /* header SAYDAMKEN (kaydırılmadan) foto hero üstünde metin/ikon AÇIK renk (her iki tema) */ .v3-theme .v3-header.top-bar.over-media:not(.scrolled) .v3-header__name { color: var(--on-dark); } .v3-theme .v3-header.top-bar.over-media:not(.scrolled) .v3-icon-btn { color: var(--on-dark); border-color: rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.10); } .v3-theme .v3-header.top-bar.over-media:not(.scrolled) .v3-icon-btn:hover { border-color: var(--gold); color: var(--gold); } /* MOBİL: aşağı kaydırınca (.scrolled) header'a arkaplan gelsin — sticky nav okunur olsun */ @media (max-width: 767px) { .v3-theme .v3-header.top-bar.scrolled { background: var(--bg-0); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); border-bottom: 1px solid var(--border); } } /* MASAÜSTÜ: header hero üstünde FLOAT (absolute) → yukarı kaydırınca kaybolur; menü sabit (top:0) */ @media (min-width: 768px) { .v3-theme .v3-header.top-bar { position: absolute; top: 0; left: 0; right: 0; } .v3-theme .v3-catrail.categories { top: 0; } } .v3-theme .v3-header__brand { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; } .v3-theme .v3-header__brand img { height: 34px; width: auto; object-fit: contain; } .v3-theme .v3-header__name { font-family: var(--font-display); font-size: 1.24rem; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .v3-theme .v3-header__actions { display: flex; align-items: center; gap: 8px; flex: none; } .v3-theme .v3-icon-btn { position: relative; width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--border); background: var(--glass); color: var(--ink-0); cursor: pointer; padding: 0; transition: border-color .2s var(--ease), background .2s var(--ease), transform .15s var(--ease); } .v3-theme .v3-icon-btn:hover { border-color: var(--gold); color: var(--gold); } .v3-theme .v3-icon-btn:active { transform: scale(0.94); } /* Sepet rozeti — temel temada kırmızı (#ff4757). Alt sayfalar (hesabim, kampanya…) kendi üst çubuğunu kullandığı için orada kırmızı kalıyordu → her yerde accent. */ .v3-theme .cart-count, .v3-theme .icon-badge { background: var(--gold); color: var(--bg-0); font-family: var(--font-body); font-weight: 700; } /* sepet sayacı — mevcut #cartCount id'si korunur */ .v3-theme .v3-icon-btn .cart-count { position: absolute; top: -3px; inset-inline-end: -3px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 100px; background: var(--gold); color: var(--bg-0); font-size: 0.68rem; font-weight: 700; display: flex; align-items: center; justify-content: center; font-family: var(--font-body); } .v3-theme .v3-icon-btn .cart-count:empty, .v3-theme .v3-icon-btn .cart-count[data-count="0"] { display: none; } /* koyu/açık geçiş düğmesi — ikonlar SVG (emoji YASAK) */ .v3-theme .v3-mode-toggle .v3-mode-toggle__sun { display: none; } :root[data-theme="light"] .v3-theme .v3-mode-toggle .v3-mode-toggle__sun { display: block; } :root[data-theme="light"] .v3-theme .v3-mode-toggle .v3-mode-toggle__moon { display: none; } /* ========================================================================== HERO — referansın "welcome" ekranının tek sayfaya uyarlanmış hâli ========================================================================== */ .v3-theme .v3-hero { position: relative; /* 27 Ağu — arama sonuçları hero'nun ALTINA taşıyor; overflow:hidden onları KIRPIYORDU (sonuçlar görünmüyordu). visible → dropdown taşabilir. Dekoratif gradyan katmanı (__layer inset:-10%) ayrıca __bg'de overflow:hidden ile kırpılır (aşağıda). */ overflow: visible; padding: clamp(28px, 7vw, 64px) 20px clamp(24px, 5vw, 44px); text-align: center; border-bottom: 1px solid var(--border); } /* Fotoğraflı hero'da alan ver — görsel ezilmesin, içerik ortada dursun */ .v3-theme .v3-hero.has-media { min-height: min(52vh, 420px); display: flex; align-items: center; justify-content: center; } .v3-theme .v3-hero.has-media .v3-hero__content { width: 100%; } .v3-theme .v3-hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; } /* __layer(-10%) burada kırpılır */ .v3-theme .v3-hero__layer { position: absolute; inset: -10%; background: radial-gradient(45% 38% at 22% 28%, rgba(212, 175, 106, 0.16), transparent 60%), radial-gradient(55% 45% at 82% 74%, rgba(226, 105, 75, 0.10), transparent 60%), linear-gradient(160deg, #1a1512 0%, #201b16 45%, #14110f 100%); animation: v3DriftA 22s ease-in-out infinite; } :root[data-theme="light"] .v3-theme .v3-hero__layer { background: radial-gradient(45% 38% at 22% 28%, rgba(150, 110, 40, 0.10), transparent 60%), radial-gradient(55% 45% at 82% 74%, rgba(226, 105, 75, 0.07), transparent 60%), linear-gradient(160deg, #f6f1e8 0%, #efe8dc 45%, #faf7f2 100%); } .v3-theme .v3-hero__grain { position: absolute; inset: 0; opacity: .05; pointer-events: none; background-image: url("data:image/svg+xml;utf8,"); } /* bayi hero görseli varsa gradyanı boşuna boyama */ .v3-theme .v3-hero.has-media .v3-hero__bg { display: none; } .v3-theme .v3-hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .v3-theme .v3-hero__media img { width: 100%; height: 100%; object-fit: cover; } /* Scrim: bayinin fotoğrafı PARLAK olabilir (beyaz tabak, aydınlık masa) — logo ve arama kutusu okunmaz hale geliyordu. İki katman: üstten-alta koyulaştırma + ortada radyal koyultma (içerik tam orada duruyor). Fotoğraf yine görünür, yazı her zaman okunur. */ .v3-theme .v3-hero__scrim { position: absolute; inset: 0; z-index: 0; background: radial-gradient(70% 62% at 50% 46%, rgba(15, 12, 10, 0.66) 0%, rgba(15, 12, 10, 0.22) 62%, transparent 100%), linear-gradient(180deg, rgba(15, 12, 10, 0.68) 0%, rgba(15, 12, 10, 0.42) 42%, rgba(15, 12, 10, 0.92) 100%); } @keyframes v3DriftA { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-2%, 2%, 0) scale(1.04); } } .v3-theme .v3-hero__content { position: relative; z-index: 1; } /* Temel CSS #headerLogo'yu 120px'e kısıyordu (klasik temanın küçük başlık logosu). Hero'da logo ANA öğe → id seçicisiyle özgüllüğü aşıp gerçek boyuta çıkarıyoruz. */ /* ⚠️ KAPSAM: yalnız HERO içindeki logo. `#headerLogo` id'si alt sayfalarda (kampanya, hesabim…) üst çubuktaki KÜÇÜK logoda da kullanılıyor — kural hero'ya bağlanmazsa oradaki logo da 130px olup başlığı 129px'e şişiriyordu. */ .v3-theme .v3-hero img#headerLogo, .v3-theme .v3-hero__logo { width: min(56vw, 230px); max-width: none; max-height: 130px; height: auto; object-fit: contain; margin: 0 auto 12px; /* Bayi logosu beyaz/açık renkli olabilir → fotoğraf üstünde kaybolmasın diye çift gölge (yakın sert + geniş yumuşak). */ filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55)) drop-shadow(0 6px 22px rgba(0, 0, 0, 0.45)); } .v3-theme .v3-hero__name { display: block; /* span olarak da render edilebiliyor (logo yoksa) */ font-family: var(--font-display); font-size: clamp(2rem, 7.5vw, 3rem); font-weight: 700; letter-spacing: 0.1em; margin: 0; background: linear-gradient(180deg, var(--on-dark-gold-soft), var(--gold) 72%); -webkit-background-clip: text; background-clip: text; color: transparent; } .v3-theme .v3-hero.has-media .v3-hero__name { background: linear-gradient(180deg, var(--on-dark-gold-soft), var(--on-dark-gold) 72%); -webkit-background-clip: text; background-clip: text; } .v3-theme .v3-hero__tagline { font-size: 0.72rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--ink-2); margin-top: 6px; padding-inline-start: 0.4em; /* eklenen harf aralığı için optik ortalama */ } .v3-theme .v3-hero.has-media .v3-hero__tagline { color: var(--on-dark-mute); } /* arama — .search-container ZORUNLU (home.js:506 dış-tık kapatma bu class'a bakar). 🔴 TEMEL CSS SIZINTISI: klasik tema `.search-section`e koyu şerit, `.search-bar`a BEYAZ hap + gölge basıyor. Koyu Aurora zemininde beyaz balon gibi duruyordu. */ .v3-theme .search-section { background: none; padding: 0; margin: 0; box-shadow: none; border: none; max-width: none; } .v3-theme .search-container { position: relative; max-width: 460px; margin: 20px auto 0; } .v3-theme .search-bar { display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 16px; border-radius: var(--radius-m); border: 1px solid var(--border); background: var(--glass); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); box-shadow: none; transition: border-color .2s var(--ease); } .v3-theme .search-bar:focus-within { border-color: var(--gold); } .v3-theme .search-bar svg { width: 18px; height: 18px; flex: none; color: var(--ink-2); fill: currentColor; } .v3-theme .search-bar input, .v3-theme .search-container input { flex: 1; min-width: 0; width: 100%; padding: 0; border: none; border-radius: 0; background: none; box-shadow: none; color: var(--ink-0); font-family: var(--font-body); font-size: 0.96rem; } .v3-theme .search-bar input:focus, .v3-theme .search-container input:focus { outline: none; box-shadow: none; } /* foto üstündeki hero'da her iki modda da koyu cam */ .v3-theme .v3-hero.has-media .search-bar { background: rgba(20, 17, 15, 0.58); border-color: var(--on-dark-border); } .v3-theme .v3-hero.has-media .search-bar input { color: var(--on-dark); } .v3-theme .v3-hero.has-media .search-bar input::placeholder { color: var(--on-dark-mute); } .v3-theme .search-container input::placeholder { color: var(--ink-2); } /* Logo yüklenemeyince common.js metin span'i koyuyor; temel CSS onu 120px'e kısıp küçük sans yapıyordu (marka adı "Test Resto…" diye kırpılıyordu). */ .v3-theme .brand-text-fallback.hero-logo-text, .v3-theme .brand-text-fallback.header-logo-text, .v3-theme span#headerLogo { display: block; width: auto; max-width: none; padding: 0; margin: 0 auto; font-family: var(--font-display); font-size: clamp(1.9rem, 7vw, 2.9rem); font-weight: 700; letter-spacing: 0.1em; line-height: 1.1; white-space: normal; overflow: visible; text-overflow: clip; background: linear-gradient(180deg, var(--on-dark-gold-soft), var(--gold) 72%); -webkit-background-clip: text; background-clip: text; color: transparent; } .v3-theme .v3-hero.has-media .brand-text-fallback.hero-logo-text, .v3-theme .v3-hero.has-media .brand-text-fallback.header-logo-text, .v3-theme .v3-hero.has-media span#headerLogo { background: linear-gradient(180deg, var(--on-dark-gold-soft), var(--on-dark-gold) 72%); -webkit-background-clip: text; background-clip: text; } .v3-theme .search-clear { position: absolute; top: 50%; inset-inline-end: 12px; transform: translateY(-50%); width: 26px; height: 26px; display: none; align-items: center; justify-content: center; border: none; background: none; color: var(--ink-2); cursor: pointer; padding: 0; } .v3-theme .search-clear.visible { display: flex; } .v3-theme .search-dropdown { position: absolute; top: calc(100% + 8px); inset-inline: 0; background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-m); box-shadow: var(--shadow-2); overflow: hidden; text-align: start; display: none; /* 27 Ağu — arama sonuçları sticky kategori şeridinin (z:50) ALTINDA kalıyordu; hero stacking context yaratmadığı için 40<50 → sekmelerin arkasına düşüyordu. 70 > catrail(50) → sonuçlar her zaman üstte. */ z-index: 70; max-height: 60vh; overflow-y: auto; } .v3-theme .search-dropdown.active { display: block; } /* 27 Ağu — Mustafa: rezervasyon/saat bilgi çubuğu arama ALTINDA, KÜÇÜK + SAYDAM (siyah yarı-saydam zemin, beyaz yazı). #customInfoStrip (common.js) buraya oturur. */ .v3-theme .v3-info-strip { /* 27 Ağu — Mustafa: TEK SATIR olsun, aşağı inmesin (uzasın). fit-content + nowrap; dar ekranda taşarsa pill İÇİNDE yatay kayar (sayfa taşmaz, scrollbar gizli). */ margin: 12px auto 0; width: fit-content; max-width: calc(100% - 24px); padding: 7px 16px; border-radius: 100px; background: rgba(0, 0, 0, 0.42); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: 1px solid rgba(255, 255, 255, 0.14); text-align: center; white-space: nowrap; overflow-x: auto; scrollbar-width: none; } .v3-theme .v3-info-strip::-webkit-scrollbar { display: none; } .v3-theme .v3-info-strip__text { color: #fff; font-size: 0.76rem; font-weight: 500; line-height: 1.35; letter-spacing: 0.01em; white-space: nowrap; } .v3-theme .v3-info-strip.hidden { display: none; } /* 27 Ağu — Mustafa: masaüstü TEK SATIR; MOBİLDE sığmazsa ALT SATIRA geçsin (kaydırmalı değil). */ @media (max-width: 767px) { .v3-theme .v3-info-strip { white-space: normal; overflow-x: visible; border-radius: 16px; } .v3-theme .v3-info-strip__text { white-space: normal; } } /* ========================================================================== KATEGORİ ŞERİDİ (#categoriesNav) — yatay kaydırmalı, JS'in .cat-btn'i ========================================================================== */ .v3-theme .v3-catrail { position: sticky; /* 27 Ağu — mobilde header (.top-bar min-height:60) ile menü arasında boşluk vardı; top 64→60 = menü header'a BİTİŞİK yapışır. Masaüstünde media query top:0 yapar. */ top: 60px; z-index: 50; background: var(--bg-0); /* düz zemin — altından kayan içerik görünmesin */ border-bottom: 1px solid var(--border); padding: 10px 0; } /* 🔴 ÇAKIŞMA: temel CSS `.closed-banner`ı sticky top:59px z:100 yapıyor; v3'ün kategori şeridi de sticky top:64px → "Şu anda kapalıyız" yazısı kategori butonlarının ÜSTÜNE biniyordu. v3'te banner akışta kalsın. */ .v3-theme .closed-banner { position: static; z-index: auto; } /* Yukarı çık düğmesi — temel temada siyah ok, koyu zeminde görünmüyordu */ .v3-theme .scroll-to-top { width: 46px; height: 46px; border: 1px solid var(--border); border-radius: 50%; background: var(--gold); color: var(--bg-0); box-shadow: var(--shadow-2); } .v3-theme .scroll-to-top svg { fill: currentColor; stroke: currentColor; } /* 🔴 Alt sayfalarda (kampanya vb.) bu şerit `v3-catrail` OLMADAN sadece `.categories` class'ıyla geliyor → temel CSS'in BEYAZ zemini kalıyordu. */ .v3-theme .categories { background: var(--bg-0); border-bottom: 1px solid var(--border); box-shadow: none; } .v3-theme .categories, .v3-theme .categories-inner { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 16px; scroll-behavior: smooth; } .v3-theme .categories::-webkit-scrollbar, .v3-theme .categories-inner::-webkit-scrollbar { display: none; } .v3-theme .cat-btn { flex: none; padding: 9px 16px; border-radius: 100px; border: 1px solid var(--border); background: var(--glass); color: var(--ink-1); font-family: var(--font-body); font-size: 0.86rem; font-weight: 500; white-space: nowrap; cursor: pointer; transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease); } .v3-theme .cat-btn:hover { color: var(--ink-0); border-color: var(--gold); } .v3-theme .cat-btn.active { color: var(--bg-0); background: var(--gold); border-color: var(--gold); font-weight: 600; } /* ========================================================================== BÖLÜM BAŞLIKLARI (.category-section / .section-title — home.js üretir) ========================================================================== */ .v3-theme .main { padding: 0 0 56px; } .v3-theme .category-section { padding: 26px 16px 0; scroll-margin-top: 120px; } .v3-theme .section-title { font-family: var(--font-display); font-size: clamp(1.5rem, 5vw, 2rem); font-weight: 600; color: var(--ink-0); display: flex; align-items: center; gap: 10px; margin: 0 0 4px; } /* 🔴 home.js başlığı `

ikon Ad

` üretiyor ve temel CSS o span'e SİYAH renk veriyor → koyu zeminde kategori adı görünmüyordu. */ .v3-theme .section-title span { color: inherit; -webkit-text-fill-color: currentColor; } .v3-theme .section-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--border), transparent); } /* ========================================================================== FOOTER ========================================================================== */ .v3-theme .footer, .v3-theme footer { border-top: 1px solid var(--border); background: var(--bg-1); color: var(--ink-2); padding: 32px 20px calc(32px + env(safe-area-inset-bottom)); font-size: 0.85rem; text-align: center; } .v3-theme .footer a { color: var(--ink-1); } .v3-theme .footer a:hover { color: var(--gold); } /* ========================================================================== QR MENÜ MODU — common.js body'ye class basar (tema-bağımsız). v3'ün KENDİ öğeleri için de kapatma kuralları burada. ========================================================================== */ body.qr-menu-only .v3-theme-cart, body.qr-menu-only .v3-icon-btn--cart, body.qr-menu-only .v3-sticky-cart { display: none !important; } body.hide-price .v3-price, body.hide-price .v3-product__price { display: none !important; } body.hide-description .v3-product__desc { display: none !important; } /* ========================================================================== ERİŞİLEBİLİRLİK / HAREKET ========================================================================== */ @media (prefers-reduced-motion: reduce) { .v3-theme *, .v3-theme *::before, .v3-theme *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ========================================================================== RESPONSIVE ========================================================================== */ @media (min-width: 640px) { .v3-theme .category-section { padding-inline: 32px; } .v3-theme .categories, .v3-theme .categories-inner { padding-inline: 32px; } .v3-theme .v3-header { padding-inline: 28px; } } @media (min-width: 1024px) { .v3-theme .main, .v3-theme .v3-hero__content { max-width: 1160px; margin-inline: auto; } .v3-theme .category-section { padding-inline: 0; } .v3-theme .main { padding-inline: 32px; } }