@charset "UTF-8"; /* ============================================================================ ChoiceCrush — Central Design Token Layer ---------------------------------------------------------------------------- Tek merkezden yönetim: TÜM renk / tipografi / boşluk / köşe / gölge buradan. ASP.NET MVC'de bunu wwwroot/css/theme.css olarak _Layout.cshtml'e bağlayın. Tema durumu üzerindeki data-attribute'larla kontrol edilir: data-theme="light" | "dark" -> renk paleti data-font-size="0".."4" -> okuma boyutu (A- / A / A+) theme.js bu attribute'ları localStorage ile kalıcı tutar. ========================================================================== */ /* ---- Fontlar ---- */ @import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap'); /* ============================================================================ 1. KÖK TOKENLAR (tema'dan bağımsız: tipografi, boşluk, köşe, geçiş) ========================================================================== */ :root { /* -- Tipografi aileleri -- */ --font-display: 'Newsreader', Georgia, 'Times New Roman', serif; --font-body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace; /* -- Okuma boyutu çarpanı (theme.js günceller) -- */ --font-scale: 1; /* -- Tip ölçeği (rem tabanlı -> font-scale ile birlikte büyür) -- */ --text-xs: 0.78rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.15rem; --text-xl: 1.35rem; --text-2xl: 1.7rem; --text-3xl: 2.15rem; --text-4xl: clamp(2.4rem, 4.5vw, 3.4rem); --text-5xl: clamp(3rem, 6vw, 4.6rem); --leading-tight: 1.12; --leading-snug: 1.3; --leading-normal: 1.6; --leading-relaxed: 1.75; /* -- Boşluk ölçeği -- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; /* -- Köşe yarıçapı -- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 999px; /* -- Düzen -- */ --container: 1180px; --container-narrow: 720px; /* -- Geçişler -- */ --transition: 180ms cubic-bezier(0.4, 0, 0.2, 1); } /* ============================================================================ 2. AÇIK TEMA (varsayılan) ========================================================================== */ :root, [data-theme="light"] { color-scheme: light; --bg: oklch(0.992 0.004 80); --surface: oklch(1 0 0); --surface-2: oklch(0.972 0.006 80); --surface-3: oklch(0.95 0.008 80); --border: oklch(0.9 0.006 80); --border-strong: oklch(0.82 0.008 75); --text: oklch(0.26 0.012 60); --text-muted: oklch(0.52 0.012 60); --text-faint: oklch(0.66 0.01 60); /* Marka vurgusu (mercan) */ --accent: oklch(0.63 0.16 36); --accent-hover: oklch(0.57 0.16 36); --accent-soft: oklch(0.95 0.04 45); --on-accent: oklch(0.99 0.01 80); /* Kategori renk kodları (aynı doygunluk, farklı ton) */ --cat-gaming: oklch(0.58 0.15 300); --cat-gaming-soft: oklch(0.95 0.035 300); --cat-tech: oklch(0.6 0.13 232); --cat-tech-soft: oklch(0.95 0.03 232); --cat-productivity: oklch(0.6 0.13 155); --cat-productivity-soft: oklch(0.95 0.035 155); --cat-news: oklch(0.6 0.16 30); --cat-news-soft: oklch(0.95 0.04 30); --cat-lifestyle: oklch(0.6 0.15 350); --cat-lifestyle-soft: oklch(0.95 0.035 350); --cat-finance: oklch(0.65 0.14 95); --cat-finance-soft: oklch(0.95 0.04 95); --cat-health: oklch(0.6 0.12 195); --cat-health-soft: oklch(0.95 0.03 195); --cat-entertainment: oklch(0.58 0.14 275); --cat-entertainment-soft: oklch(0.95 0.035 275); /* Puanlama / olumlu-olumsuz */ --positive: oklch(0.6 0.13 155); --negative: oklch(0.6 0.16 28); --star: oklch(0.74 0.15 75); --shadow-sm: 0 1px 2px oklch(0.4 0.02 60 / 0.06), 0 1px 3px oklch(0.4 0.02 60 / 0.08); --shadow-md: 0 4px 12px oklch(0.4 0.02 60 / 0.08), 0 2px 4px oklch(0.4 0.02 60 / 0.05); --shadow-lg: 0 12px 32px oklch(0.4 0.02 60 / 0.12), 0 4px 8px oklch(0.4 0.02 60 / 0.06); } /* ============================================================================ 3. KOYU TEMA ========================================================================== */ [data-theme="dark"] { color-scheme: dark; --bg: oklch(0.19 0.008 65); --surface: oklch(0.23 0.01 65); --surface-2: oklch(0.27 0.011 65); --surface-3: oklch(0.31 0.012 65); --border: oklch(0.33 0.012 65); --border-strong: oklch(0.42 0.014 65); --text: oklch(0.95 0.006 80); --text-muted: oklch(0.72 0.01 75); --text-faint: oklch(0.58 0.01 70); --accent: oklch(0.72 0.15 40); --accent-hover: oklch(0.78 0.15 42); --accent-soft: oklch(0.33 0.06 40); --on-accent: oklch(0.18 0.02 60); --cat-gaming: oklch(0.72 0.13 300); --cat-gaming-soft: oklch(0.32 0.05 300); --cat-tech: oklch(0.72 0.11 232); --cat-tech-soft: oklch(0.31 0.045 232); --cat-productivity: oklch(0.72 0.11 155); --cat-productivity-soft: oklch(0.31 0.05 155); --cat-news: oklch(0.72 0.14 30); --cat-news-soft: oklch(0.32 0.06 30); --cat-lifestyle: oklch(0.72 0.13 350); --cat-lifestyle-soft: oklch(0.32 0.05 350); --cat-finance: oklch(0.78 0.12 95); --cat-finance-soft: oklch(0.32 0.05 95); --cat-health: oklch(0.72 0.1 195); --cat-health-soft: oklch(0.31 0.045 195); --cat-entertainment: oklch(0.72 0.12 275); --cat-entertainment-soft: oklch(0.32 0.05 275); --positive: oklch(0.74 0.12 155); --negative: oklch(0.72 0.14 30); --star: oklch(0.8 0.14 78); --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.3); --shadow-md: 0 4px 14px oklch(0 0 0 / 0.4); --shadow-lg: 0 14px 36px oklch(0 0 0 / 0.5); } /* ============================================================================ 4. OKUMA BOYUTU ADIMLARI (A- / A / A+ ...) theme.js data-font-size'ı 0..4 arasında ayarlar. ========================================================================== */ [data-font-size="0"] { --font-scale: 0.9; } [data-font-size="1"] { --font-scale: 1; } /* varsayılan */ [data-font-size="2"] { --font-scale: 1.1; } [data-font-size="3"] { --font-scale: 1.22; } [data-font-size="4"] { --font-scale: 1.35; } /* ============================================================================ 5. TEMEL / RESET ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { font-size: calc(100% * var(--font-scale)); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; } body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background var(--transition), color var(--transition); } img, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: var(--leading-tight); letter-spacing: -0.01em; text-wrap: pretty; } ::selection { background: var(--accent-soft); color: var(--text); } :focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; border-radius: 3px; } /* ============================================================================ 6. DÜZEN YARDIMCILARI ========================================================================== */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-5); } .section { padding-block: var(--space-9); } .ad-slot:empty { display: none; } .ad-slot { margin-block: var(--space-6); text-align: center; overflow: hidden; } .eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-muted); font-weight: 500; } /* ============================================================================ 7. ÜST BAR (HEADER) + TEMA KONTROLLERİ ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in oklch, var(--bg) 82%, transparent); backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--border); transition: background var(--transition), border-color var(--transition); } .header-inner { display: flex; align-items: center; gap: var(--space-5); height: 68px; } .brand { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); letter-spacing: -0.02em; white-space: nowrap; } .brand-mark { width: 32px; height: 32px; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); border-radius: var(--radius-md); font-size: 1.1rem; flex-shrink: 0; } .brand-mark::after { content: "\2726"; } .main-nav { display: flex; align-items: center; gap: var(--space-2); margin-left: var(--space-3); } .main-nav a { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 500; color: var(--text-muted); transition: color var(--transition), background var(--transition); } .main-nav a:hover { color: var(--text); background: var(--surface-2); } .header-tools { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); } .header-tools > * { flex-shrink: 0; } /* Kontrol grubu (segment) */ .control-group { display: inline-flex; align-items: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-full); padding: 3px; gap: 2px; } .control-btn { display: grid; place-items: center; min-width: 34px; height: 30px; padding-inline: var(--space-2); border: none; background: transparent; color: var(--text-muted); border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: 600; line-height: 1; transition: var(--transition); } .control-btn:hover { color: var(--text); background: var(--surface-3); } .control-btn[aria-pressed="true"], .control-btn.is-active { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-sm); } .control-btn .a-small { font-size: 0.72em; } .control-btn .a-large { font-size: 1.1em; } .theme-toggle { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--border); background: var(--surface-2); border-radius: var(--radius-full); color: var(--text); font-size: 1.1rem; transition: var(--transition); } .theme-toggle:hover { background: var(--surface-3); border-color: var(--border-strong); } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } .nav-toggle { display: none; } .nav-toggle .icon-close { display: none; } .nav-toggle.is-open .icon-menu { display: none; } .nav-toggle.is-open .icon-close { display: block; } .nav-social-x { display: none; } /* Kullanıcı menüsü (dropdown) — _LayoutCC için */ .cc-menu { position: relative; } .cc-menu-list { position: absolute; top: calc(100% + 8px); right: 0; min-width: 180px; list-style: none; padding: var(--space-2); margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); display: none; z-index: 60; } .cc-menu.open .cc-menu-list { display: block; } .cc-menu-list a { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--text-muted); } .cc-menu-list a:hover { background: var(--surface-2); color: var(--text); } /* Görünüm ayarları paneli (yazı boyutu + tema) */ .cc-settings-panel { display: none; flex-direction: column; gap: var(--space-3); padding: var(--space-3); min-width: 220px; } .cc-menu.open .cc-settings-panel { display: flex; } .cc-settings-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .cc-settings-label { font-size: var(--text-sm); color: var(--text-muted); font-weight: 500; } .cc-headsearch { display: flex; } .cc-headsearch .input { width: 180px; } @media (max-width: 900px) { .cc-headsearch { display: none; } } /* ============================================================================ 8. BUTONLAR ========================================================================== */ .btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); border: 1px solid transparent; border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: 600; line-height: 1; transition: var(--transition); white-space: nowrap; } .btn-primary { background: var(--accent); color: var(--on-accent); } .btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-ghost { background: var(--surface-2); color: var(--text); border-color: var(--border); } .btn-ghost:hover { background: var(--surface-3); border-color: var(--border-strong); } .btn-danger { background: var(--negative); color: #fff; } .btn-danger:hover { background: var(--negative); filter: brightness(1.1); transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-lg { padding: var(--space-4) var(--space-6); font-size: var(--text-base); } /* ============================================================================ 9. ROZETLER / KATEGORİ ETİKETLERİ ========================================================================== */ .tag { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.02em; padding: 5px var(--space-3); border-radius: var(--radius-full); background: var(--surface-2); color: var(--text-muted); } .tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .tag-gaming { color: var(--cat-gaming); background: var(--cat-gaming-soft); } .tag-tech { color: var(--cat-tech); background: var(--cat-tech-soft); } .tag-productivity { color: var(--cat-productivity); background: var(--cat-productivity-soft); } .tag-news { color: var(--cat-news); background: var(--cat-news-soft); } .tag-lifestyle { color: var(--cat-lifestyle); background: var(--cat-lifestyle-soft); } .tag-finance { color: var(--cat-finance); background: var(--cat-finance-soft); } .tag-health { color: var(--cat-health); background: var(--cat-health-soft); } .tag-entertainment { color: var(--cat-entertainment); background: var(--cat-entertainment-soft); } .badge-pick { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; padding: 5px var(--space-3); border-radius: var(--radius-full); background: var(--accent); color: var(--on-accent); } /* ============================================================================ 10. GÖRSEL PLACEHOLDER (kullanıcı kendi görselini koyar) ========================================================================== */ .ph { position: relative; background-color: var(--surface-2); background-image: repeating-linear-gradient( 135deg, transparent 0 11px, color-mix(in oklch, var(--border) 60%, transparent) 11px 12px ); border-radius: var(--radius-md); display: grid; place-items: center; overflow: hidden; color: var(--text-faint); } .ph span { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.04em; background: var(--bg); padding: 4px 10px; border-radius: var(--radius-full); border: 1px solid var(--border); } /* ============================================================================ 11. HERO ========================================================================== */ .hero { padding-block: var(--space-8) var(--space-7); } .hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-7); align-items: center; } .hero h1 { font-size: var(--text-4xl); margin-bottom: var(--space-4); } .hero h1 em { font-style: italic; color: var(--accent); } .hero-lede { font-size: var(--text-xl); color: var(--text-muted); line-height: var(--leading-snug); max-width: 34ch; margin-bottom: var(--space-6); } .hero-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; } .hero-note { font-size: var(--text-sm); color: var(--text-faint); margin-top: var(--space-4); display: flex; align-items: center; gap: var(--space-2); } .hero-art { position: relative; aspect-ratio: 4 / 3; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; display: block; } .hero-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* ============================================================================ 12. KATEGORİ KARTLARI ========================================================================== */ .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-6); flex-wrap: wrap; } .section-head h2 { font-size: var(--text-3xl); } .section-head p { color: var(--text-muted); max-width: 42ch; margin-top: var(--space-2); } .link-more { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; font-size: var(--text-sm); color: var(--accent); } .link-more:hover { gap: var(--space-3); } .cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } .cat-card { --c: var(--text-muted); position: relative; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); transition: var(--transition); overflow: hidden; } .cat-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--c); z-index: 2; } .cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); } .cat-card.has-image { min-height: 240px; color: #fff; } .cat-card .cat-card-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .cat-card .cat-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.1) 100%); z-index: 1; } .cat-card.has-image .cat-icon, .cat-card.has-image h3, .cat-card.has-image p, .cat-card.has-image .cat-meta { position: relative; z-index: 2; } .cat-card.has-image h3 { color: #fff; } .cat-card.has-image p { color: rgba(255, 255, 255, 0.85); } .cat-card.has-image .cat-icon { background: rgba(255, 255, 255, 0.15); color: #fff; backdrop-filter: blur(4px); } .cat-card.gaming { --c: var(--cat-gaming); } .cat-card.tech { --c: var(--cat-tech); } .cat-card.productivity { --c: var(--cat-productivity); } .cat-card.news { --c: var(--cat-news); } .cat-card.lifestyle { --c: var(--cat-lifestyle); } .cat-card.finance { --c: var(--cat-finance); } .cat-card.health { --c: var(--cat-health); } .cat-card.entertainment { --c: var(--cat-entertainment); } .cat-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--radius-md); background: color-mix(in oklch, var(--c) 14%, transparent); color: var(--c); font-size: 1.5rem; } .cat-card h3 { font-size: var(--text-xl); } .cat-card p { color: var(--text-muted); font-size: var(--text-sm); flex-grow: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .cat-card .cat-meta { display: flex; align-items: center; justify-content: space-between; font-size: var(--text-sm); color: var(--c); font-weight: 600; } /* ============================================================================ 13. MAKALE KARTLARI (blog / affiliate) ========================================================================== */ .post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } .post-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: var(--transition); } .post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); } .post-thumb { position: relative; aspect-ratio: 16 / 10; border-radius: 0; overflow: hidden; display: block; background: var(--surface-2); } .post-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .post-thumb .badge-pick { position: absolute; top: var(--space-3); left: var(--space-3); z-index: 2; } .post-body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); flex-grow: 1; } .post-card h3 { font-size: var(--text-xl); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .post-card h3 a:hover { color: var(--accent); } .post-dek { color: var(--text-muted); font-size: var(--text-sm); flex-grow: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .post-pick { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); padding-top: var(--space-3); border-top: 1px dashed var(--border); } .post-pick b { color: var(--text); } .post-meta { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-xs); color: var(--text-faint); font-family: var(--font-mono); } .post-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; } /* ============================================================================ 14. EDİTÖRÜN SEÇİMİ — İNCELEME KARTI (puan + artı/eksi + fiyat + CTA) ========================================================================== */ .review { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); } .review-media { position: relative; min-height: 340px; border-right: 1px solid var(--border); } .review-media .ph { position: absolute; inset: 0; border-radius: 0; } .review-media .badge-pick { position: absolute; top: var(--space-4); left: var(--space-4); z-index: 2; } .review-body { padding: var(--space-7); display: flex; flex-direction: column; gap: var(--space-4); } .review-rating { display: flex; align-items: center; gap: var(--space-3); } .score { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 600; line-height: 1; } .score small { font-size: 0.5em; color: var(--text-faint); font-weight: 400; } .stars { display: inline-flex; gap: 2px; color: var(--star); font-size: 1.1rem; letter-spacing: 2px; } .review-body h2 { font-size: var(--text-2xl); } .review-summary { color: var(--text-muted); } .proscons { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-6); padding-block: var(--space-3); } .proscons h4 { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; margin-bottom: var(--space-3); } .proscons ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); } .proscons li { display: flex; gap: var(--space-2); font-size: var(--text-sm); line-height: var(--leading-snug); } .proscons li::before { font-weight: 700; flex-shrink: 0; } .pros li { color: var(--text); } .pros h4 { color: var(--positive); } .pros li::before { content: "+"; color: var(--positive); } .cons h4 { color: var(--negative); } .cons li::before { content: "\2212"; color: var(--negative); } .review-cta { display: flex; align-items: center; gap: var(--space-4); margin-top: auto; padding-top: var(--space-5); border-top: 1px solid var(--border); flex-wrap: wrap; } .price { display: flex; flex-direction: column; } .price b { font-family: var(--font-display); font-size: var(--text-2xl); } .price span { font-size: var(--text-xs); color: var(--text-faint); } /* ============================================================================ 14b. EDITOR'S PICK — ANA SAYFA VİTRİNİ & VİTRİN DETAY SAYFASI ========================================================================== */ .editors-pick, .spotlight-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); } .editors-pick-media, .spotlight-media { position: relative; min-height: 280px; border-right: 1px solid var(--border); background: var(--surface-2); } .editors-pick-body, .spotlight-body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); } .editors-pick-body .badge-pick, .spotlight-body .badge-pick { align-self: flex-start; } .editors-pick-body h2 { font-size: var(--text-2xl); } .editors-pick-body h2 a:hover { color: var(--accent); } .spotlight-body h1 { font-size: var(--text-3xl); } .editors-pick-price, .spotlight-price { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; } .editors-pick-reason, .spotlight-reason { color: var(--text-muted); line-height: var(--leading-relaxed); } /* Anasayfa kartı PickReason uzunluğuna göre sonsuza kadar uzamasın */ .editors-pick-reason { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; } .editors-pick-reason p, .spotlight-reason p { margin-bottom: var(--space-3); } .editors-pick-reason p:last-child, .spotlight-reason p:last-child { margin-bottom: 0; } .editors-pick-actions { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-2); } .ad-disclosure { font-size: var(--text-xs); color: var(--text-faint); } /* ============================================================================ 14c. SPOTLIGHT DETAIL — bağımsız ürün vitrin sayfası (tam genişlik) ========================================================================== */ .spotlight-page { display: flex; flex-direction: column; gap: var(--space-7); } .spotlight-hero { position: relative; aspect-ratio: 16 / 7; border-radius: var(--radius-xl); border: 1px solid var(--border); overflow: hidden; background: var(--surface-2); } .spotlight-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .spotlight-hero .badge-pick { position: absolute; top: var(--space-4); left: var(--space-4); z-index: 2; } .spotlight-page .spotlight-body { padding: 0; } /* Detay sayfasındaki PickReason de sonsuza kadar uzamasın — "Tümünü oku" ile açılır */ .spotlight-page .spotlight-reason.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; overflow: hidden; position: relative; } .spotlight-page .spotlight-reason.is-clamped::after { content: ""; position: absolute; inset: auto 0 0 0; height: 64px; background: linear-gradient(to bottom, transparent, var(--bg)); } .spotlight-readmore { align-self: flex-start; } /* ============================================================================ 15. BÜLTEN / CTA ŞERİDİ ========================================================================== */ .cta-band { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--space-8) var(--space-7); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); } .cta-band h2 { font-size: var(--text-3xl); max-width: 18ch; } .cta-band p { color: var(--text-muted); max-width: 46ch; } .newsletter { display: flex; gap: var(--space-2); width: 100%; max-width: 420px; margin-top: var(--space-2); } .newsletter input { flex: 1; padding: var(--space-3) var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-full); background: var(--surface); color: var(--text); font: inherit; font-size: var(--text-sm); } .newsletter input:focus-visible { outline-color: var(--accent); border-color: var(--accent); } .cta-fine { font-size: var(--text-xs); color: var(--text-faint); } /* ============================================================================ 16. FOOTER ========================================================================== */ .site-footer { border-top: 1px solid var(--border); background: var(--surface); padding-block: var(--space-8) var(--space-6); margin-top: var(--space-8); } .footer-grid { display: grid; grid-template-columns: 1.2fr repeat(4, 1fr); gap: var(--space-6); margin-bottom: var(--space-7); } .footer-brand p { color: var(--text-muted); font-size: var(--text-sm); max-width: 32ch; margin-top: var(--space-3); } .footer-col h3 { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-faint); font-weight: 500; margin-bottom: var(--space-4); } .footer-col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); } .footer-col a { color: var(--text-muted); font-size: var(--text-sm); } .footer-col a:hover { color: var(--accent); } .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-5); border-top: 1px solid var(--border); font-size: var(--text-xs); color: var(--text-faint); flex-wrap: wrap; } .affiliate-note { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-5); margin-bottom: var(--space-5); } /* ============================================================================ 17. DUYARLILIK (RESPONSIVE) ========================================================================== */ @media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; } .hero-art { aspect-ratio: 16 / 10; max-height: 320px; order: -1; } .cat-grid, .post-grid { grid-template-columns: 1fr 1fr; } .review, .editors-pick, .spotlight-grid { grid-template-columns: 1fr; } .review-media, .editors-pick-media, .spotlight-media { min-height: 240px; border-right: none; border-bottom: 1px solid var(--border); } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 680px) { .main-nav { display: none; } .main-nav.open { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; margin: 0; padding: var(--space-3); gap: var(--space-1); background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-lg); z-index: 60; } .main-nav.open a { padding: var(--space-3) var(--space-4); } .main-nav.open .nav-social-x { display: flex; align-items: center; gap: var(--space-2); border-top: 1px solid var(--border); margin-top: var(--space-1); } .header-tools .social-x { display: none; } .nav-toggle { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--border); background: var(--surface-2); border-radius: var(--radius-full); color: var(--text); } .cat-grid, .post-grid { grid-template-columns: 1fr; } .proscons { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; gap: var(--space-5); } .section { padding-block: var(--space-7); } .header-tools { gap: var(--space-2); } .header-tools .label-text { display: none; } .header-signin { width: 38px; height: 38px; padding: 0; justify-content: center; } .cc-settings > .theme-toggle { width: 30px; height: 30px; font-size: 0.9rem; } .newsletter { flex-direction: column; } .newsletter .btn { width: 100%; justify-content: center; } /* Editör seçimi (anasayfa widget + vitrin detay) mobilde daha kompakt */ .editors-pick-media { min-height: 160px; } .editors-pick-body { padding: var(--space-5); gap: var(--space-3); } .editors-pick-body h2 { font-size: var(--text-xl); } .spotlight-hero { aspect-ratio: 16 / 9; } .spotlight-page .spotlight-body { gap: var(--space-3); } .spotlight-body h1 { font-size: var(--text-2xl); } .editors-pick-reason { -webkit-line-clamp: 3; } .spotlight-page .spotlight-reason.is-clamped { -webkit-line-clamp: 5; } } /*-------------------------------------------------------------- # Scroll to top --------------------------------------------------------------*/ .scroll-top { position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 90; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--accent); color: var(--on-accent); font-size: var(--text-xl); line-height: 1; text-decoration: none; box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .3s, transform .3s, background-color .2s; } .scroll-top.active { opacity: 1; visibility: visible; transform: translateY(0); } .scroll-top:hover { background: color-mix(in oklch, var(--accent), black 12%); } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }