/* MotoFırsat — design tokens + catalog page styles. Recovered from Gülden's design system. Fonts load via Google Fonts (see ). "Instrument panel" palette: brass is the single hero accent, steel secondary, green means "best price" only. */ /* ============================ COLOR TOKENS ============================ */ :root { --night: #0F141B; /* Gece Mavisi — app background */ --navy-deep: #161D27; /* Derin Lacivert — raised surface */ --line: #27313F; /* Çizgi — borders / hairlines */ --line-soft: #1E2733; --brass: #C9A24B; /* Pusula Pirinci — primary accent */ --steel: #6E8CA8; /* Çelik Mavi — secondary accent */ --price-green: #3FA37A; /* Doğru Fiyat — price / savings ONLY */ --snow: #EEF2F6; /* Kar — primary text on dark */ --fog: #9AA7B4; /* Sis — secondary text / muted */ --paper: #F5F2EC; /* Kâğıt — light surface (paper mode) */ --brass-bright: #D9B665; --brass-press: #B68C39; --brass-wash: rgba(201, 162, 75, 0.12); --brass-line: rgba(201, 162, 75, 0.40); --steel-bright: #87A1B9; --steel-wash: rgba(110, 140, 168, 0.14); --green-wash: rgba(63, 163, 122, 0.14); --green-line: rgba(63, 163, 122, 0.40); --bg-page: var(--night); --surface-card: var(--navy-deep); --surface-raised: #1B2330; --surface-sunken: #0B0F15; --border: var(--line); --border-strong: #354254; --border-subtle: var(--line-soft); --text-strong: var(--snow); --text-body: #C7D0DA; --text-muted: var(--fog); --text-on-brass: #1A1206; --text-on-steel: #0E141B; --accent: var(--brass); --accent-hover: var(--brass-bright); --accent-press: var(--brass-press); --focus-ring: rgba(201, 162, 75, 0.55); /* ============================ TYPE TOKENS ============================ */ --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-numeric: 'Plus Jakarta Sans', system-ui, sans-serif; --w-regular: 400; --w-medium: 500; --w-semibold:600; --w-bold: 700; --w-extra: 800; --fs-display: 44px; --fs-h1: 34px; --fs-h2: 26px; --fs-h3: 20px; --fs-title: 17px; --fs-body: 15px; --fs-sm: 13px; --fs-xs: 12px; --fs-price: 20px; --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.5; --ls-tight: -0.02em; --ls-snug: -0.01em; --ls-normal: 0; --ls-label: 0.06em; --ls-wide: 0.18em; /* ======================= SPACING / RADIUS TOKENS ===================== */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 14px; --radius-chip:999px; --radius-full:999px; /* ============================ EFFECTS TOKENS ========================= */ --shadow-none: none; --shadow-sm: 0 1px 2px rgba(0,0,0,0.40); --shadow-md: 0 6px 20px rgba(0,0,0,0.45); --shadow-lg: 0 18px 48px rgba(0,0,0,0.55); --glow-brass: 0 0 0 1px var(--brass-line), 0 4px 18px rgba(201,162,75,0.20); --edge-top: inset 0 1px 0 rgba(255,255,255,0.04); --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in-out:cubic-bezier(0.4, 0.0, 0.2, 1); --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 280ms; } /* ============================ PAGE CSS ============================ */ body { margin: 0; } ::-webkit-scrollbar { height: 8px; width: 8px; } ::-webkit-scrollbar-thumb { background: #27313F; border-radius: 8px; } .mp-rail::-webkit-scrollbar { height: 6px; } select.mp-sel { appearance: none; -webkit-appearance: none; } @keyframes mpfade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* Reserve first-paint height for the JS-rendered featured panel and product grid. Both start empty in the HTML and are filled only after catalog.json (~700KB) lands, so without a reservation the footer paints inside the viewport and is then shoved ~5000px down when content arrives — a large CLS anchored on