/* ===================================================================== Ürün Gezgini — Dark theme. Applied via . Remaps the ink ramp (text light / surfaces dark) + explicit fixes for components that hardcode #fff or dark surfaces. ===================================================================== */ :root[data-theme="dark"] { /* ink ramp remapped: 950 = lightest (headings), 50 = darkest (subtle bg) */ --ink-950:#F5F8FC; --ink-900:#E9EEF5; --ink-800:#D5DDE8; --ink-700:#B7C1D0; --ink-600:#93A0B4; --ink-500:#78859B; --ink-400:#5B6880; --ink-300:#3B475C; --ink-200:#2B3547; --ink-100:#222B3B; --ink-50:#1A2230; --paper:#10151F; --paper-soft:#171E2A; --surface:#161D29; --surface-2:#1B2331; --color-bg:var(--paper); --color-surface:var(--surface); --color-text:var(--ink-800); --color-text-soft:var(--ink-600); --color-text-mute:var(--ink-500); --color-border:var(--ink-200); --color-border-mid:var(--ink-300); --color-link:#C7A6E8; --primary-50:#26163A; /* dark-tinted primary tint for chips/icon bg */ --primary-100:#301B49; --shadow-xs:0 1px 2px rgba(0,0,0,.4); --shadow-sm:0 1px 3px rgba(0,0,0,.5); --shadow-md:0 6px 16px rgba(0,0,0,.5); --shadow-lg:0 16px 40px rgba(0,0,0,.6); --grad-hero: radial-gradient(1200px 500px at 15% -10%, rgba(255,190,0,.10), transparent 60%), radial-gradient(900px 500px at 100% 0%, rgba(146,89,200,.16), transparent 55%); } /* Components that hardcode a white surface -> dark surface */ :root[data-theme="dark"] :is(.btn-outline, .cat-nav, .cat-tile, .chip, .drawer__panel, .search, .stats__c, .step, .suggest, .ticker, .bestbuy__logo, .chart-card, .cmp thead th, .filters, .offers-wrap, .pager a, .pager span, .range-tabs button.on, .range-tabs a.on, .sortsel, .input, .select, .store-stats, .store-logo--lg) { background: var(--surface); } :root[data-theme="dark"] .offers thead th { background: var(--surface-2); } :root[data-theme="dark"] textarea.input { background: var(--surface); } /* Sticky header (was translucent white) */ :root[data-theme="dark"] .site-header { background: rgba(18,24,36,.85); } /* Media wells (were white radial gradients) */ :root[data-theme="dark"] .product-card__media, :root[data-theme="dark"] .gallery { background: radial-gradient(120% 100% at 50% 0, var(--surface-2), var(--paper)); } :root[data-theme="dark"] .product-card__media img, :root[data-theme="dark"] .gallery img { mix-blend-mode: normal; } :root[data-theme="dark"] .product-card__fav { background: rgba(30,40,58,.9); } /* "En ucuz" best-buy panel */ :root[data-theme="dark"] .bestbuy { background: linear-gradient(180deg, #10281E, var(--surface)); border-color:#1F4A37; } /* Intentionally dark components: keep them dark (ink-950 would flip to light) */ :root[data-theme="dark"] .site-footer { background:#0A0E17; color:#B7C1D0; } :root[data-theme="dark"] .site-footer h4 { color:#fff; } :root[data-theme="dark"] .compare-tray__inner { background:#0A0E17; } :root[data-theme="dark"] .cookie-consent { background:#0A0E17; color:#D5DDE8; } :root[data-theme="dark"] .utilbar { background:#0A0E17; } /* Table zebra + hover surfaces */ :root[data-theme="dark"] .specs tr:nth-child(even) { background: var(--surface-2); } /* Theme toggle icon button */ .theme-toggle { display:inline-grid; place-items:center; width:42px; height:42px; border-radius:var(--radius-md); color:var(--ink-700); background:transparent; flex:none; } .theme-toggle:hover { background:var(--ink-100); color:var(--primary-700); } .theme-toggle .moon { display:none; } :root[data-theme="dark"] .theme-toggle .sun { display:none; } :root[data-theme="dark"] .theme-toggle .moon { display:block; }