/* ═══════════════════════════════════════════════════════════════════════════ NEXUS PREMIUM — Gaming Marketplace Design System Blue accent palette · Glassmorphism · Premium animations ═══════════════════════════════════════════════════════════════════════════ */ :root { /* Arka plan degiskenleri settings.json token'larindan TUREdir, sabit degildir. Onceden #05070D / #0A0F1C / #111827 sabitlenmisti; asagidaki kurallar bunlari `!important` ile body ve .bg-background uzerine bastigi icin panelden yapilan renk ayari sayfada HIC gorunmuyordu (--cl-* dogru gelse bile). --cl-* degiskenleri master.njk tarafindan [data-scheme] ile 'e yazilir. */ --nx-bg-primary: rgb(var(--cl-background)); --nx-bg-secondary: rgb(var(--cl-surface)); --nx-bg-card: rgb(var(--cl-surface-raised)); /* Cam yuzeyler de token turevi: light semada beyaz uzerine beyaz kalmasinlar. */ --nx-glass: rgba(var(--cl-t-primary), 0.05); --nx-glass-border: var(--cl-border); /* MARKA renkleri settings.json token'larindan TUREr. Sabit hex birakmak, panelden accent degistirildiginde kabugun eski renkte kalmasi demektir. --grad-accent-from/-to ve --cl-accent/-border/-t-primary master.njk tarafindan global.properties'ten yazilir. */ --nx-blue: var(--grad-accent-from); --nx-blue-bright: rgb(var(--cl-accent)); --nx-cyan: var(--grad-accent-to); --nx-highlight: var(--cl-accent-text); --nx-glow-blue: rgba(var(--cl-accent), 0.45); --nx-glow-cyan: rgba(var(--cl-accent), 0.35); /* SEMANTIK renkler accent'ten TUREMEZ (sartname §Kisitlar: yesil yalnizca basari, kirmizi yalnizca hata). Marka rengi degisse de bunlar sabit kalir. */ --nx-success: #22C55E; --nx-danger: #EF4444; --nx-warning: #F59E0B; /* --nx-nav-h = pill cubugun KENDI yuksekligi (prototip: 58px) --nx-header-h = baslik alaninin toplam kapladigi yer: 12px ust bosluk + 58px cubuk + 8px alt bosluk = 78px. hero'nun padding-top'u ve iki min-height hesabi BU degiskeni kullanir; cubugun kendi yuksekligini degil. Onceden ikisi tek degiskendi (90px) ve cubugu prototip olcusune cekmek hero hizasini bozuyordu. */ --nx-nav-h: 58px; --nx-nav-h-shrink: 52px; --nx-header-h: 78px; --nx-header-h-shrink: 72px; --nx-radius-xl: 20px; --nx-blur: 20px; } /* ── Base ─────────────────────────────────────────────────────────────────── */ .nexus-theme { /* Prototip: `padding: clamp(48px, 7vw, 88px) 0 0` -> 1440px'te 88px. */ --section-py: 88px; } /* ── Dikey ritim ─────────────────────────────────────────────────────────── Prototipte yigili bolumler YALNIZ ust dolgu kullanir; alt dolgu sadece footer'dan onceki son bolumde (64px) vardir ve footer'in ust bosluğu yoktur. built.css'teki `.py-section` ikisini birden basiyordu (96/96), yani bolum arasi 192px oluyordu — prototipte 88px. Olculen fark: ana sayfa 8030px, prototip 5868px; bunun ~990px'i bu kuraldan geliyordu. */ .nexus-theme .components > .component.py-section { padding-bottom: 0; } .nexus-theme .components > .component.py-section:last-child { padding-bottom: min(64px, 9vw); } /* Footer prototipte son bolume bitisik; `mt-section` bosluğu yok. */ .nexus-theme .sa-footer.mt-section { margin-top: 0; } /* Palet BURADA sabitlenmez. --cl-* degiskenleri settings.json -> global.properties uzerinden layouts/master.njk tarafindan [data-scheme="dark"] / [data-scheme="light"] seciciyle uzerine yazilir. Bunlari .nexus-theme (yani ) uzerinde yeniden tanimlamak, ozel degisken kalitimini body seviyesinde keser ve panelden yapilan renk ayarlarini tamamen etkisiz birakir. Onceden burada --cl-background/-surface/-surface-raised sabitlenmisti. */ .nexus-theme body, body.nexus-theme { background-color: var(--nx-bg-primary) !important; } .nexus-theme .bg-background { background-color: var(--nx-bg-primary) !important; } .nexus-theme .bg-surface { background-color: var(--nx-bg-secondary) !important; } .nexus-theme .bg-surface-raised { background-color: var(--nx-bg-card) !important; } /* Typography */ /* Baslik agirligi TOKEN'dan gelir. Onceden `font-weight: 900 !important` vardi ve settings.json'daki heading_weight (Faz 1'de 800) tamamen etkisizdi. !important kaldirildi: ozgulluk zaten yetiyor (.nexus-theme .sa-hero-title = 0,2,0 > Tailwind .text-display = 0,1,0). */ .nexus-theme .sa-hero-title, .nexus-theme h1, .nexus-theme .text-display { font-weight: var(--fw-heading); letter-spacing: -0.035em; line-height: 1.05; } /* DUZELTME: eski secici ".nexus-theme .sa-tpl-shop .sa-hero-title" idi ve HIC eslesmiyordu — master.njk iki sinifi da AYNI ustune koyuyor, CSS ise torun ariyordu. Dogrusu birlesik secici. Prototip: clamp(36px, 4.6vw, 60px). */ .nexus-theme.sa-tpl-shop .sa-hero-title { font-size: clamp(2.25rem, 4.6vw, 3.75rem); } /* Alt metin rengi sabit rgba(255,255,255,0.75) idi; light semayi bozuyordu. */ .nexus-theme .sa-hero-subtitle { font-size: 1.125rem; line-height: 1.75; color: rgb(var(--cl-t-muted)); max-width: 36rem; } /* ── Page FX enhancements ─────────────────────────────────────────────────── */ .nexus-theme .pfx-glows-top::before { background: radial-gradient(ellipse 80% 50% at 50% -20%, var(--nx-glow-blue), transparent 70%) !important; } .nexus-theme .pfx-dot { background: var(--nx-blue) !important; opacity: 0.35; } .nexus-theme .pfx-orb { background: radial-gradient(circle, var(--nx-cyan), transparent 70%) !important; opacity: 0.25; } /* Prototip degerleri: blur 120px, 24s drift, %4 noise. style.css varsayilanlari 110px / 22s / 0.05 idi. */ .nexus-theme .pfx-glows::before, .nexus-theme .pfx-glows::after { filter: blur(120px); animation-duration: 24s; } .nexus-theme .pfx-noise { opacity: 0.04; } /* background_glow tek deger aldigi icin ust glow secilir; ikinci soluk kose glow'u burada eklenir (prototip ucunu birden istiyor). */ .nexus-theme .pfx-glows-top::after { content: ''; position: absolute; top: -12rem; left: -14rem; width: 40rem; height: 34rem; border-radius: 9999px; background: radial-gradient(circle, rgba(var(--cl-accent), 0.08), transparent 68%); filter: blur(120px); animation: hero-glow-drift 24s ease-in-out -8s infinite; pointer-events: none; } /* style.css'teki azaltilmis hareket blogu yalnizca .pfx-glows::before ve .pfx-glows-corners::after'i kapsiyor; yeni kose glow'u da durdurulur. */ @media (prefers-reduced-motion: reduce) { .nexus-theme .pfx-glows-top::after { animation: none !important; } } /* ── Header / Navbar ──────────────────────────────────────────────────────── */ .nexus-theme .sa-header { transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .nexus-theme .sa-header.is-scrolled { backdrop-filter: blur(var(--nx-blur)); -webkit-backdrop-filter: blur(var(--nx-blur)); } /* Prototip pill cubugu. Onceki surum bu varyanti duzlestirip tam genislikte, kosesiz bir bara ceviriyordu; markup (components/navbar.njk, pills dali) zaten dogruydu, iptal eden CSS idi. `max-width` satiri BILEREK yazilmaz: kaldirilinca Tailwind'in max-w-container sinifi (--container-max = 1200px) yeniden yururluge girer. */ .nexus-theme .sa-navbar--pills > .px-4, .nexus-theme .sa-navbar--floating-pill > .px-4 { padding-top: 12px !important; } .nexus-theme .sa-navbar--pills .max-w-container, .nexus-theme .sa-navbar--floating-pill .max-w-container { border-radius: 9999px !important; border: var(--border-w) solid var(--cl-border) !important; background: rgba(var(--cl-surface), 0.78) !important; backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important; transition: background 0.35s ease, box-shadow 0.35s ease; } .nexus-theme .sa-header.is-scrolled .sa-navbar--pills .max-w-container, .nexus-theme .sa-header.is-scrolled .sa-navbar--floating-pill .max-w-container { background: rgba(var(--cl-surface), 0.92) !important; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5) !important; } .nexus-theme .nav-shrink { height: var(--nx-nav-h) !important; transition: height 0.35s ease; } .nexus-theme .sa-header.is-scrolled .nav-shrink { height: var(--nx-nav-h-shrink) !important; } .nexus-theme .sa-navbar-logo img { filter: drop-shadow(0 0 12px var(--nx-glow-blue)); transition: filter 0.3s ease, transform 0.3s ease; } .nexus-theme .sa-navbar-logo:hover img { filter: drop-shadow(0 0 20px var(--nx-glow-blue)); transform: scale(1.04); } .nexus-theme .sa-navbar-link { font-weight: 500 !important; transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important; } .nexus-theme .sa-navbar-link:hover, .nexus-theme .sa-navbar-link.nav-active { color: var(--nx-blue-bright) !important; } .nexus-theme .nav-pill-ind { background: rgba(var(--cl-accent), 0.15) !important; border: 1px solid rgba(var(--cl-accent), 0.25) !important; } /* Discord CTA */ .nexus-discord-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 600; color: #fff !important; background: linear-gradient(135deg, #5865F2, #4752C4); border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 0 20px rgba(88, 101, 242, 0.4); animation: nx-discord-pulse 3s ease-in-out infinite; transition: transform 0.2s ease, box-shadow 0.2s ease; text-decoration: none !important; } .nexus-discord-btn:hover { transform: translateY(-2px); box-shadow: 0 0 32px rgba(88, 101, 242, 0.6); } @keyframes nx-discord-pulse { 0%, 100% { box-shadow: 0 0 20px rgba(88, 101, 242, 0.35); } 50% { box-shadow: 0 0 32px rgba(88, 101, 242, 0.55); } } /* Language switcher */ .nexus-lang-btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.7); background: var(--nx-glass); border: 1px solid var(--nx-glass-border); cursor: pointer; transition: all 0.2s ease; } .nexus-lang-btn:hover { color: #fff; border-color: rgba(var(--cl-accent), 0.4); background: rgba(var(--cl-accent), 0.1); } /* Language flags */ .nexus-lang-picker { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.2rem; border-radius: 9999px; border: 1px solid var(--nx-glass-border); background: var(--nx-glass); } .nexus-lang-picker--mobile { width: 100%; justify-content: stretch; padding: 0.25rem; gap: 0.5rem; } .nexus-lang-flag { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.35rem 0.625rem; border-radius: 9999px; border: 1px solid transparent; background: transparent; color: rgba(255, 255, 255, 0.7); font-size: 0.75rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; flex: 1; min-width: 0; } .nexus-lang-picker--desktop .nexus-lang-flag { flex: unset; padding: 0.3rem 0.5rem; } .nexus-lang-flag__icon { font-size: 1rem; line-height: 1; } .nexus-lang-flag.is-active { background: rgba(var(--cl-accent), 0.2); border-color: rgba(var(--cl-accent), 0.45); color: #fff; } .nexus-lang-flag:hover { background: rgba(255, 255, 255, 0.08); color: #fff; } /* Navbar — Turkish overflow fix */ .nexus-theme .nav-pills .sa-navbar-link { font-size: 0.8125rem; padding: 0.375rem 0.625rem !important; } html[data-lang="tr"] .nexus-theme .nav-pills .sa-navbar-link { font-size: 0.75rem; padding: 0.35rem 0.5rem !important; letter-spacing: -0.01em; } html[data-lang="tr"] .nexus-theme .nexus-register-btn { padding: 0.4rem 0.75rem; font-size: 0.75rem; } html[data-lang="tr"] .nexus-theme .nexus-discord-btn { padding: 0.4rem 0.75rem; font-size: 0.75rem; } .nexus-theme .sa-navbar-logo span { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (min-width: 1280px) { html[data-lang="tr"] .nexus-theme .nav-pills .sa-navbar-link { font-size: 0.8125rem; padding: 0.375rem 0.625rem !important; } } /* Register button */ .nexus-register-btn { display: none; align-items: center; /* "Kayit Ol" iki kelime: dar cubukta yerlesim otururken bir kare "Kayit / Ol" diye sariyordu (1100px'te ekran goruntusunde yakalandi). */ white-space: nowrap; padding: 0.5rem 1.125rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 600; color: #fff !important; background: linear-gradient(135deg, var(--nx-blue), var(--nx-cyan)); box-shadow: 0 4px 20px var(--nx-glow-blue); transition: transform 0.2s ease, box-shadow 0.2s ease; text-decoration: none !important; border: none; cursor: pointer; } @media (min-width: 640px) { .nexus-register-btn { display: inline-flex; } } .nexus-register-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px var(--nx-glow-blue); } /* ── Hero ─────────────────────────────────────────────────────────────────── */ /* PROTOTIP PARITESI (2026-08-03 tarayici olcumu): prototipte hero ekrani DOLDURMAZ. 1440x900'de prototip hero 632px: ic sarmalayici 80px ust / 72px alt dolgu + 480px icerik. Canlida `min-height: calc(100svh - var(--nx-header-h))` hero'yu 822px'e kilitliyordu; icerik 768px oldugu icin min-height kazaniyor, fazlalik `justify-content: center` yuzunden altta ~110px olu bosluga donusuyordu. `--nx-nav-h` yine KULLANILMAZ: master.njk'de

`sticky top-0`, yani akis icinde yer kapliyor; ikisini toplamak yuksekligi iki kez sayardi. */ .nexus-theme.sa-tpl-shop .sa-hero { display: flex; flex-direction: column; justify-content: center; } .nexus-theme.sa-tpl-shop .sa-hero > .wrap { padding-top: 80px; padding-bottom: 72px; } @media (max-width: 1023px) { .nexus-theme.sa-tpl-shop .sa-hero > .wrap { padding-top: min(80px, 9vw); padding-bottom: min(72px, 8vw); } } /* Centered hero — background image behind headline text */ .sa-hero--centered, .sa-hero.nexus-hero-centered { position: relative; overflow: hidden; background: #05070d !important; } .nexus-hero-bg--full { position: absolute; top: 0; left: 50%; width: 100vw; height: 100%; transform: translateX(-50%); z-index: 0; pointer-events: none; overflow: hidden; } .nexus-hero-bg--full img { width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 0.6; display: block; } .nexus-theme .sa-hero.nexus-hero-centered { background: #05070d !important; position: relative; justify-content: center; overflow: hidden; } .nexus-theme .sa-hero.nexus-hero-centered::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 7, 13, 0.35) 0%, rgba(5, 7, 13, 0.15) 40%, rgba(5, 7, 13, 0.55) 100%); pointer-events: none; z-index: 1; } .nexus-theme .sa-hero.nexus-hero-centered::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 45%, transparent 30%, rgba(5, 7, 13, 0.4) 100%); pointer-events: none; z-index: 1; } .nexus-hero-centered__wrap { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: calc(100vh - var(--nx-header-h, 90px) - 48px) !important; position: relative; z-index: 2; } .nexus-hero-centered__content { margin: 0 auto !important; text-align: center !important; width: 100%; max-width: 820px; position: relative; padding: 2rem 1.25rem; } .nexus-hero-centered__foreground { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; width: 100%; } .nexus-hero-centered__text { margin: 0 auto !important; width: 100%; } .nexus-theme .sa-hero.nexus-hero-centered .sa-hero-eyebrow, .sa-hero--centered .sa-hero-eyebrow { color: #22C55E !important; font-size: 1.0625rem !important; font-weight: 500 !important; letter-spacing: 0.01em; margin-bottom: 1rem !important; } .nexus-theme .sa-hero.nexus-hero-centered .sa-hero-title, .sa-hero--centered .sa-hero-title { color: #ffffff !important; font-size: clamp(2.25rem, 5.5vw + 0.5rem, 3.75rem) !important; font-weight: 800 !important; letter-spacing: -0.03em !important; line-height: 1.1 !important; margin: 0 auto; max-width: 20ch; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45); } .nexus-theme .sa-hero.nexus-hero-centered .sa-hero-subtitle, .sa-hero--centered .sa-hero-subtitle { color: rgba(255, 255, 255, 0.92) !important; font-size: 0.9375rem !important; font-weight: 400 !important; line-height: 1.7 !important; max-width: 46ch; margin-left: auto !important; margin-right: auto !important; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4); } .nexus-theme .sa-hero.nexus-hero-centered .sa-hero-actions { margin-top: 2rem !important; width: 100%; display: flex; justify-content: center; } .nexus-theme .sa-hero.nexus-hero-centered .sa-hero-actions .btn-primary, .nexus-theme .sa-hero.nexus-hero-centered .sa-hero-actions .sa-btn--primary.sa-btn--solid { background: #3B82F6 !important; background-image: none !important; color: #ffffff !important; border-radius: 5px !important; font-size: 0.9375rem !important; font-weight: 600 !important; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.875rem 2.25rem !important; border: none !important; box-shadow: 0 4px 20px rgba(var(--cl-accent), 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important; transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease !important; } .nexus-theme .sa-hero.nexus-hero-centered .sa-hero-actions .btn-primary:hover, .nexus-theme .sa-hero.nexus-hero-centered .sa-hero-actions .sa-btn--primary.sa-btn--solid:hover { background: #60A5FA !important; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(var(--cl-accent), 0.55) !important; } .nexus-hero-payments { display: flex; align-items: center; justify-content: center; gap: 1.125rem; margin-top: 2.25rem; color: #ffffff; opacity: 0.9; } .nexus-hero-payments i { font-size: 1.625rem; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25)); transition: opacity 0.2s ease, transform 0.2s ease; } .nexus-hero-payments i:hover { opacity: 1; transform: translateY(-2px); } .nexus-theme .sa-hero.nexus-hero-centered .nexus-hero-orbs { opacity: 0.35; } .nexus-theme .sa-hero.nexus-hero-centered .hero-bg-glow { opacity: 0.5 !important; } .nexus-theme .sa-hero .hero-bg-glow { opacity: 1 !important; background: radial-gradient(ellipse 60% 40% at 20% 50%, rgba(var(--cl-accent), 0.18), transparent), radial-gradient(ellipse 50% 35% at 80% 30%, rgba(6, 182, 212, 0.12), transparent) !important; } .nexus-theme .sa-hero .hero-bg-grid { opacity: 0.4 !important; } .nexus-hero-orbs { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } .nexus-orb { position: absolute; border-radius: 50%; filter: blur(60px); animation: nx-float 12s ease-in-out infinite; } .nexus-orb--1 { width: 400px; height: 400px; top: 10%; left: -5%; background: rgba(var(--cl-accent), 0.15); animation-delay: 0s; } .nexus-orb--2 { width: 300px; height: 300px; top: 50%; right: -5%; background: rgba(6, 182, 212, 0.12); animation-delay: -4s; } .nexus-orb--3 { width: 200px; height: 200px; bottom: 20%; left: 40%; background: rgba(var(--cl-accent), 0.1); animation-delay: -8s; } @keyframes nx-float { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(20px, -30px) scale(1.05); } 66% { transform: translate(-15px, 20px) scale(0.95); } } /* Hero showcase card */ .nexus-showcase-wrap { perspective: 1200px; } .nexus-showcase-card { position: relative; transform-style: preserve-3d; transition: transform 0.15s ease-out; animation: nx-card-float 6s ease-in-out infinite; } @keyframes nx-card-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } .nexus-showcase-card::before { content: ''; position: absolute; inset: -2px; border-radius: inherit; background: linear-gradient(135deg, var(--nx-blue), var(--nx-cyan), var(--nx-blue)); background-size: 200% 200%; animation: nx-border-glow 4s ease infinite; z-index: -1; opacity: 0.6; filter: blur(1px); } @keyframes nx-border-glow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .nexus-theme .sa-hero-media .sa-product-card, .nexus-theme .nexus-showcase-card .sa-product-card { border: 1px solid rgba(var(--cl-accent), 0.25) !important; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5), 0 0 40px var(--nx-glow-blue), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; background: var(--nx-bg-card) !important; } /* Hero trust row */ .nexus-trust-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: var(--border-w) solid var(--cl-border); } /* Ortali hero (variant: centered / background-image, alignment: center). */ .nexus-trust-row--center { justify-content: center; } /* Renk sabit rgba(255,255,255,0.7) idi; token'a baglandi. */ .nexus-trust-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: rgb(var(--cl-t-muted)); } /* Renk sabit #fff idi; token'a baglandi. */ .nexus-trust-item strong { color: rgb(var(--cl-t-primary)); font-weight: 700; } /* Guven satiri ikonu (schema: trust_items[].icon; bos ise onay isareti). */ .nexus-trust-icon { flex-shrink: 0; color: var(--cl-accent-text); } /* Yildiz rengi marka accent'inden BAGIMSIZ oldugu icin token'lasmadi. */ .nexus-stars { color: #fbbf24; letter-spacing: 2px; } /* Hero CTA buttons */ .nexus-theme .sa-hero-actions .btn-primary, .nexus-theme .sa-hero-actions a[class*="btn-primary"] { box-shadow: 0 4px 24px var(--nx-glow-blue) !important; transition: transform 0.2s ease, box-shadow 0.2s ease !important; } .nexus-theme .sa-hero-actions .btn-primary:hover, .nexus-theme .sa-hero-actions a[class*="btn-primary"]:hover { transform: translateY(-3px); box-shadow: 0 8px 36px var(--nx-glow-blue) !important; } /* ── Live Activity Bar ────────────────────────────────────────────────────── */ .nexus-live-activity { position: relative; z-index: 2; margin-top: auto; border-top: 1px solid var(--nx-glass-border); background: rgba(10, 15, 28, 0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); overflow: hidden; } .nexus-live-activity__track { display: flex; gap: 3rem; padding: 0.875rem 0; animation: nx-marquee 40s linear infinite; white-space: nowrap; } .nexus-live-activity:hover .nexus-live-activity__track { animation-play-state: paused; } @keyframes nx-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .nexus-live-item { display: inline-flex; align-items: center; gap: 0.625rem; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.65); flex-shrink: 0; } .nexus-live-item__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--nx-success); box-shadow: 0 0 8px var(--nx-success); animation: nx-pulse-dot 2s ease infinite; } @keyframes nx-pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .nexus-live-item__badge { padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .nexus-live-item__badge--purchase { background: rgba(34, 197, 94, 0.15); color: var(--nx-success); } .nexus-live-item__badge--review { background: rgba(251, 191, 36, 0.15); color: #FBBF24; } .nexus-live-item__badge--stock { background: rgba(var(--cl-accent), 0.15); color: var(--nx-blue-bright); } .nexus-live-item strong { color: #fff; font-weight: 600; } /* ── Stats ──────────────────────────────────────────────────────────────────── */ .nexus-theme .sa-stats--strip .sa-stats-items, .nexus-theme .sa-stats--highlight-panel .sa-stats-items { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 1.25rem !important; max-width: 1100px; margin: 0 auto; } @media (max-width: 1024px) { .nexus-theme .sa-stats--strip .sa-stats-items, .nexus-theme .sa-stats--highlight-panel .sa-stats-items { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 480px) { .nexus-theme .sa-stats--strip .sa-stats-items, .nexus-theme .sa-stats--highlight-panel .sa-stats-items { grid-template-columns: 1fr !important; } } .nexus-theme .sa-stats-item { background: var(--nx-glass) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--nx-glass-border) !important; border-radius: var(--nx-radius-xl) !important; padding: 2rem 1.5rem !important; text-align: center !important; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease !important; flex: unset !important; display: flex !important; flex-direction: column !important; align-items: center !important; } .nexus-theme .sa-stats-item:hover { transform: translateY(-8px); border-color: rgba(var(--cl-accent), 0.35) !important; background: rgba(var(--cl-accent), 0.08) !important; box-shadow: 0 16px 48px rgba(var(--cl-accent), 0.15); } .nexus-theme .sa-stats--highlight-panel .sa-stats-items > div:first-child, .nexus-theme .sa-stats--highlight-panel .sa-stats-items > div:last-child { display: contents !important; } .nexus-theme .sa-stats--highlight-panel .sa-stats-items > div:first-child > .sa-stats-item, .nexus-theme .sa-stats--highlight-panel .sa-stats-items > div:last-child > .sa-stats-item { /* reset highlight panel inner items */ } .nexus-theme .sa-stats .icon-tile { width: 3rem; height: 3rem; border-radius: 14px; background: rgba(var(--cl-accent), 0.12); border: 1px solid rgba(var(--cl-accent), 0.2); display: flex; align-items: center; justify-content: center; color: var(--nx-blue-bright); margin-bottom: 1rem; } .nexus-theme .sa-stats .text-display { font-size: clamp(2rem, 4vw, 3rem) !important; font-weight: 900 !important; background: linear-gradient(135deg, #fff, var(--nx-blue-bright)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ── Categories ───────────────────────────────────────────────────────────── */ .nexus-theme .sa-categories--poster .sa-categories-item { border-radius: var(--nx-radius-xl) !important; overflow: hidden; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease !important; border-color: var(--nx-glass-border) !important; } .nexus-theme .sa-categories--poster .sa-categories-item:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 24px 56px rgba(0, 0, 0, 0.4), 0 0 32px var(--nx-glow-blue); } .nexus-theme .sa-categories--poster .sa-categories-item img { transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important; } .nexus-theme .sa-categories--poster .sa-categories-item:hover img { transform: scale(1.1) !important; } .nexus-theme .sa-categories--poster .sa-categories-item::after { content: 'Keşfet →'; position: absolute; bottom: 3.5rem; left: 1rem; font-size: 0.75rem; font-weight: 600; color: var(--nx-blue-bright); opacity: 0; transform: translateY(8px); transition: opacity 0.3s ease, transform 0.3s ease; } .nexus-theme .sa-categories--poster .sa-categories-item:hover::after { opacity: 1; transform: translateY(0); } /* ── Product Cards ──────────────────────────────────────────────────────────── */ .nexus-theme .sa-product-card { border-radius: var(--nx-radius-xl) !important; border-color: var(--nx-glass-border) !important; background: var(--nx-bg-card) !important; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease !important; overflow: hidden; } .nexus-theme .sa-product-card:hover { transform: translateY(-10px) rotateX(2deg); border-color: rgba(var(--cl-accent), 0.4) !important; box-shadow: 0 28px 56px rgba(0, 0, 0, 0.45), 0 0 40px var(--nx-glow-blue) !important; } .nexus-theme .sa-product-card img { transition: transform 0.5s ease !important; } .nexus-theme .sa-product-card:hover img { transform: scale(1.06) !important; } .nexus-theme .text-accent-text, .nexus-theme .text-accent-500 { color: var(--nx-blue-bright) !important; } /* ── Bento / Features ─────────────────────────────────────────────────────── */ .nexus-theme .sa-bento .rounded-card, .nexus-theme .sa-features .rounded-card { background: var(--nx-glass) !important; backdrop-filter: blur(12px); border-color: var(--nx-glass-border) !important; transition: transform 0.3s ease, border-color 0.3s ease !important; } .nexus-theme .sa-bento .rounded-card:hover, .nexus-theme .sa-features .rounded-card:hover { border-color: rgba(var(--cl-accent), 0.3) !important; transform: translateY(-4px); } /* ── Section headers ──────────────────────────────────────────────────────── */ .nexus-theme .sa-section-title { font-weight: 900 !important; letter-spacing: -0.03em !important; } /* DUZELTME (2026-08-03): eskiden secici `.nexus-theme .hl-accent` idi ve BASLIGIN TAMAMINI maviye boyuyordu. Prototipte baslik BEYAZ, yalnizca vurgulanan kelimeler accent renginde (kullanici "Bu hafta en cok satanlar" basliginin mavi oldugunu bildirdi). style.css:1499 ve 1551 dogru hedefi kullaniyor: `.hl-accent .mk`. Buradaki kural onu ezip genellestiriyordu. `!important` KALDIRILDI, gerekmiyor: master.njk:68-70 yukleme sirasi built -> custom -> nexus-premium, yani bu dosya sonuncu; ustelik `.nexus-theme .hl-accent .mk` (0,3,0) built.css'teki `.hl-accent .mk` (0,2,0) seciciyi ozgullukle de geciyor. Butceden bir azaldi. */ .nexus-theme .hl-accent .mk, .nexus-theme .hl-glow .mk { color: var(--nx-blue-bright); } /* ── Buttons global ───────────────────────────────────────────────────────── */ .nexus-theme .btn-primary, .nexus-theme [class*="btn-primary"] { background: linear-gradient(135deg, var(--nx-blue), var(--nx-cyan)) !important; box-shadow: 0 4px 20px var(--nx-glow-blue); } .nexus-theme .btn-primary:hover { box-shadow: 0 8px 32px var(--nx-glow-blue) !important; } /* ── Footer ───────────────────────────────────────────────────────────────── */ .nexus-theme .sa-footer { background: var(--nx-bg-secondary) !important; border-top: 1px solid var(--nx-glass-border); position: relative; } .nexus-theme .sa-footer::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 60%; height: 1px; background: linear-gradient(90deg, transparent, var(--nx-blue), transparent); } .nexus-theme .sa-footer-link:hover { color: var(--nx-blue-bright) !important; } .nexus-theme .footer-wordmark span { background: linear-gradient(180deg, rgba(var(--cl-accent), 0.08), transparent); -webkit-background-clip: text; } .nexus-footer-trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.5rem; padding: 1.5rem 0; margin-top: 2rem; border-top: 1px solid var(--nx-glass-border); } .nexus-footer-status { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.6); } .nexus-footer-status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--nx-success); box-shadow: 0 0 10px var(--nx-success); } /* ── Product page ───────────────────────────────────────────────────────────── */ /* KALDIRILDI (2026-08-03): `.nexus-theme .sa-tpl-product .rounded-card` OLU bir seciciydi — her iki sinif da ayni uzerinde, aralarinda torun iliskisi yok, kural hicbir zaman eslesmedi. Bilesik yazip (`.nexus-theme.sa-tpl-product`) CANLANDIRMAK yerine silindi: Faz 4 urun sayfasi tasarimi bu kural etkisizken kuruldu ve dogrulandi; `border-color … !important`i simdi devreye sokmak denenmemis bir degisiklik olurdu. Gerekirse yeni tasarimla birlikte bilincli olarak geri yazilir. */ .nexus-theme .sa-product-form { background: var(--nx-glass) !important; backdrop-filter: blur(16px); border: 1px solid var(--nx-glass-border) !important; border-radius: var(--nx-radius-xl) !important; } /* ── Cart ─────────────────────────────────────────────────────────────────── */ /* .sa-cart-panel kurali Faz 2 / Gorev 7 blogunda (dosya sonu) yeniden tanimlandi: prototip cekmece zemini yuzey degil, sayfa arka planina yakin bir ton. */ .nexus-theme .sa-cart-item { border-color: var(--nx-glass-border) !important; } /* ── Customer dashboard ───────────────────────────────────────────────────── */ /* KALDIRILDI (2026-08-03): iki secici de OLUYDU — `.sa-tpl-customer-*` sinifi `.nexus-theme` ile AYNI uzerinde, aralarinda torun iliskisi yok. (`[class*="sa-tpl-customer"]` de ayni tuzaga dusuyordu.) Bilesik yazip canlandirmak yerine silindi: Faz 6 panel tasarimi bu kurallar etkisizken kuruldu ve dogrulandi; `background … !important`i her `.rounded-card`a simdi uygulamak yeni tasarimi bozardi. */ .nexus-theme .customer-sidebar, .nexus-theme [class*="customer-sidebar"] { background: var(--nx-bg-card) !important; border-color: var(--nx-glass-border) !important; } /* ── Feedback / Reviews ───────────────────────────────────────────────────── */ .nexus-theme .sa-feedback-card { background: var(--nx-glass) !important; border-color: var(--nx-glass-border) !important; border-radius: var(--nx-radius-xl) !important; transition: transform 0.3s ease, border-color 0.3s ease !important; } .nexus-theme .sa-feedback-card:hover { border-color: rgba(var(--cl-accent), 0.3) !important; transform: translateY(-4px); } /* ── FAQ ──────────────────────────────────────────────────────────────────── */ .nexus-theme .sa-faq details, .nexus-theme .sa-faq .rounded-card { background: var(--nx-glass) !important; border-color: var(--nx-glass-border) !important; } /* ── Discord section ──────────────────────────────────────────────────────── */ .nexus-theme .sa-discord .rounded-card { background: linear-gradient(135deg, rgba(88, 101, 242, 0.15), rgba(var(--cl-accent), 0.1)) !important; border-color: rgba(88, 101, 242, 0.3) !important; } /* ── CTA Banner ───────────────────────────────────────────────────────────── */ .nexus-theme .sa-cta-banner .rounded-card { background: linear-gradient(135deg, rgba(var(--cl-accent), 0.12), rgba(6, 182, 212, 0.08)) !important; border-color: rgba(var(--cl-accent), 0.25) !important; } /* ── Search modal ─────────────────────────────────────────────────────────── */ .nexus-theme .sa-search-modal, .nexus-theme [x-ref="searchModal"] .rounded-card { background: var(--nx-bg-card) !important; border-color: var(--nx-glass-border) !important; } /* ── Announcement bar ─────────────────────────────────────────────────────── */ .nexus-theme .announcement { background: linear-gradient(90deg, var(--nx-blue), var(--nx-cyan)) !important; } /* ── Scroll reveal polish ─────────────────────────────────────────────────── */ .nexus-theme [data-dsr].is-revealed { animation-duration: 0.7s !important; } /* ── Loading skeleton ─────────────────────────────────────────────────────── */ .nexus-skeleton { background: linear-gradient(90deg, var(--nx-glass) 25%, rgba(255,255,255,0.08) 50%, var(--nx-glass) 75%); background-size: 200% 100%; animation: nx-shimmer 1.5s infinite; border-radius: 8px; } @keyframes nx-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ── Flash sale badge ───────────────────────────────────────────────────────── */ .nexus-flash-badge { position: fixed; bottom: 5rem; left: 1rem; z-index: 25; padding: 0.75rem 1.25rem; border-radius: var(--nx-radius-xl); background: linear-gradient(135deg, rgba(239, 68, 68, 0.9), rgba(245, 158, 11, 0.9)); color: #fff; font-size: 0.8125rem; font-weight: 600; box-shadow: 0 8px 32px rgba(239, 68, 68, 0.4); animation: nx-flash-pulse 2s ease infinite; cursor: pointer; border: none; } @keyframes nx-flash-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } } /* ── Wishlist heart on cards ──────────────────────────────────────────────── */ .nexus-wishlist-btn { position: absolute; top: 0.75rem; left: 0.75rem; z-index: 3; width: 2rem; height: 2rem; border-radius: 50%; background: rgba(5, 7, 13, 0.7); backdrop-filter: blur(8px); border: 1px solid var(--nx-glass-border); color: rgba(255, 255, 255, 0.6); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; opacity: 0; } .nexus-theme .sa-product-card:hover .nexus-wishlist-btn { opacity: 1; } .nexus-wishlist-btn:hover, .nexus-wishlist-btn.is-active { color: var(--nx-danger); border-color: rgba(239, 68, 68, 0.4); background: rgba(239, 68, 68, 0.15); } /* ── Compare bar ──────────────────────────────────────────────────────────── */ .nexus-compare-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; padding: 0.75rem 1.5rem; background: rgba(10, 15, 28, 0.95); backdrop-filter: blur(16px); border-top: 1px solid var(--nx-glass-border); display: flex; align-items: center; justify-content: space-between; transform: translateY(100%); transition: transform 0.35s ease; } .nexus-compare-bar.is-visible { transform: translateY(0); } /* ── Responsive ───────────────────────────────────────────────────────────── */ @media (max-width: 1024px) { .nexus-theme .nav-pills { display: none !important; } } @media (max-width: 768px) { .nexus-trust-row { gap: 0.75rem; justify-content: center; } .nexus-hero-centered__content { padding: 0 1rem; } .nexus-theme .sa-hero.nexus-hero-centered .sa-hero-title { font-size: clamp(1.75rem, 8vw, 2.5rem) !important; max-width: 100%; } .nexus-theme .sa-hero.nexus-hero-centered .sa-hero-subtitle { font-size: 0.875rem !important; } .nexus-hero-payments { gap: 0.75rem; margin-top: 1.5rem; flex-wrap: wrap; } .nexus-hero-payments i { font-size: 1.375rem; } .nexus-live-activity__track { animation-duration: 25s; } .nexus-flash-badge { bottom: 1rem; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 0.75rem; padding: 0.5rem 1rem; } .nexus-hero-centered__wrap { min-height: calc(100vh - var(--nx-header-h) - 56px) !important; padding-top: 1rem !important; padding-bottom: 1rem !important; } /* Mobil: hero'yu ekran yuksekligine zorlamayiz. Secici birlesige cevrildi. */ .nexus-theme.sa-tpl-shop .sa-hero { min-height: auto; } .nexus-discord-btn { display: none !important; } .nexus-register-btn { display: none !important; } .nexus-lang-picker--desktop { display: none !important; } } @media (max-width: 480px) { .nexus-theme .sa-hero.nexus-hero-centered .sa-hero-actions .btn-primary, .nexus-theme .sa-hero.nexus-hero-centered .sa-hero-actions .sa-btn--primary.sa-btn--solid { width: 100%; max-width: 280px; } } /* ═══════════════════════════════════════════════════════════════════════════ FAZ 2 — KABUK (arama modali, sepet cekmecesi, footer) Bu bloklar docs/faz2-css/ altindaki ayri dosyalarda yazildi ve buraya birlestirildi. Kaynak dosyalar referans olarak korunuyor. ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ Faz 2 / Görev 6 — Arama modalı (snippets/search-modal.njk) nexus-premium.css'e OLDUĞU GİBİ eklenecek blok. Mevcut "── Search modal ──" bölümünün hemen altına konabilir. Ne yapıyor: - .sa-search-panel : prototip ölçüleri (680px, 20px köşe, %97 saydam yüzey, blur). Temanın rounded-card (16px) ve bg-surface (opak) sınıfları prototipi karşılamıyordu; njk'da yedek olarak duruyorlar, buradaki kurallar onları eziyor (özgüllük 0,2,0 > 0,1,0). - .sa-search-tr / .sa-search-off / .sa-search-on : prototipin "yukarıdan gelip yerine oturma" açılışı (translateY(-14px) scale(0.98) → normal, 0.25s). Bunlar Tailwind arbitrary utility'si (-translate-y-3.5, scale-[0.98], duration-[250ms]) YERİNE kendi sınıfımızla veriliyor: o üç utility built.css'te yok ve panelin -translate-x-1/2 ile ortalanması transform'u zaten kullandığı için Tailwind'in transform değişkenleriyle birleştirmek kırılgan. Buradaki transform -50% yatay kaydırmayı içerir. - .sa-search-cat-grid : prototipin auto-fill/minmax(160px) grid'i. - .sa-search-popular / .sa-search-category : chip ve kategori karosu yüzeyleri + accent hover. Not: max-width hem njk'daki max-w-[680px] sınıfıyla hem burada verilir; o arbitrary utility de built.css'te yok, ikisi aynı değeri üretir. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Arama paneli ──────────────────────────────────────────────────────────── */ .nexus-theme .sa-search-panel { max-width: 680px; border-radius: var(--nx-radius-xl); border-color: var(--nx-glass-border); background: rgba(var(--cl-surface), 0.97); backdrop-filter: blur(var(--nx-blur)); -webkit-backdrop-filter: blur(var(--nx-blur)); box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6); } /* Açılış/kapanış geçişi. Alpine bu sınıfları geçiş boyunca ekleyip kaldırıyor; bittiğinde panel kendi -translate-x-1/2'sine dönüyor, o da translate(-50%, 0) demek — sıçrama olmaz. */ .nexus-theme .sa-search-panel.sa-search-tr { transition-duration: 250ms; } .nexus-theme .sa-search-panel.sa-search-off { transform: translate(-50%, -14px) scale(0.98); } .nexus-theme .sa-search-panel.sa-search-on { transform: translate(-50%, 0) scale(1); } /* ── Popüler arama chip'leri ───────────────────────────────────────────────── */ /* Prototipteki rgba(255,255,255,0.04) yerine --cl-t-primary kullanılıyor: aynı değeri koyu şemada verir, açık şemada da görünür kalır. */ .nexus-theme .sa-search-popular { border-color: var(--nx-glass-border); background: rgba(var(--cl-t-primary), 0.04); text-decoration: none; } .nexus-theme .sa-search-popular:hover { border-color: rgba(var(--cl-accent), 0.45); background: rgba(var(--cl-accent), 0.1); color: rgb(var(--cl-t-primary)); } /* ── Kategori karoları ─────────────────────────────────────────────────────── */ .nexus-theme .sa-search-cat-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } .nexus-theme .sa-search-category { border-color: rgba(var(--cl-t-primary), 0.07); background: rgba(var(--cl-t-primary), 0.02); text-decoration: none; } .nexus-theme .sa-search-category:hover { border-color: rgba(var(--cl-accent), 0.4); background: rgba(var(--cl-accent), 0.07); color: rgb(var(--cl-t-primary)); } /* ───────────────────────────────────────────────────────────────────────────── Faz 2 / Gorev 7 — Sepet cekmecesi (nexus-premium.css'e olduğu gibi eklenir) BIRLESTIRME NOTU: nexus-premium.css'teki mevcut `.nexus-theme .sa-cart-panel { background: var(--nx-bg-secondary) !important; border-left: 1px solid var(--nx-glass-border) !important; }` kurali (~satir 1056, "── Cart ──" baslıgi altinda) bu blokla DEGISTIRILIR. Dosyanin sonuna eklenirse de ayni ozgullukte ve daha sonra geldigi icin calisir; ama iki kurali birakmak kafa karistirir. `.sa-cart-item` kuralina dokunulmadi. ───────────────────────────────────────────────────────────────────────────── */ /* Prototip cekmece zemini #080C14: yuzey degil, sayfa arka planina yakin bir ton. Tokene baglayarak panel ayarini takip etmesini sagliyoruz. */ .nexus-theme .sa-cart-panel { background: rgb(var(--cl-background)) !important; border-left: var(--border-w) solid var(--cl-border) !important; } /* drawer-left varyantinda kenarlik solda degil sagda; ustteki border-left kurali oraya yanlis kenar cizmesin diye varyanta ozel duzeltme. */ .nexus-theme .sa-cart-panel--drawer-left { border-left: 0 !important; border-right: var(--border-w) solid var(--cl-border) !important; } /* Baslik ikon karosu (36px) ve bos durum karosu (88px) ayni accent ailesinden. */ .nexus-theme .sa-cart-title-tile, .nexus-theme .sa-cart-empty-tile { background: rgba(var(--cl-accent), 0.08); border-color: rgba(var(--cl-accent), 0.25); } /* Prototipte 88px karo yumusak mavi bir hale birakiyor. */ .nexus-theme .sa-cart-empty-tile { box-shadow: 0 0 40px rgba(var(--cl-accent), 0.18); } /* ── Görev 9: Footer ───────────────────────────────────────────────────────── Bu blok `CheaPest/assets/nexus-premium.css` içine AYNEN eklenir (dosyanın mevcut "── Footer" bölümünün SONUNA, ~satır 1042'den sonra). Neden ayrı: `footer.njk` iki yapısal değişiklik geçirdi ve mevcut kurallar eski yerleşimi varsayıyor: 1) Güven satırı (`.nexus-footer-trust`) artık `nexus-premium.js` `initFooterTrust()` tarafından `.sa-footer .wrap`'ın SON çocuğu olarak enjekte edilmiyor; sunucu tarafında marka sütununun içine basılıyor. Dolayısıyla "tam genişlik + üst çizgi + ortalı" kuralları geçersiz. 2) Ödeme rozetleri prototipteki gibi altta ayrı bir şeritte (`.sa-footer-payments`). Tüm seçiciler `.nexus-theme` ile başlar; bu yüzden yukarıdaki eski `.nexus-footer-trust` / `.nexus-footer-status` kurallarını sıradan bağımsız olarak (özgüllük 0,2,0 > 0,1,0) ezerler — eski blok silinmeden çalışır. Renk kuralı: sabit hex/rgb YOK. Hepsi Faz 1 token'ları üzerinden (`rgb(var(--cl-*))` / `rgba(var(--cl-*), N)`), böylece panelden renk değiştirildiğinde footer da değişir. Tek istisna semantik durum rengi: `--nx-success` (yeşil = "çalışıyor"), şartname gereği accent'ten türemez. ────────────────────────────────────────────────────────────────────────── */ /* Güven satırı artık marka sütununun içinde: sola yaslı, çizgisiz, dar. */ .nexus-theme .nexus-footer-trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0.75rem; margin-top: 0; padding: 0; border-top: 0; } /* `centered` varyantta marka sütunu ortalı akıyor, güven satırı da öyle. */ .nexus-theme .sa-footer--centered .nexus-footer-trust { justify-content: center; } /* Eski kural rgba(255,255,255,0.6) kullanıyordu: light şemada beyaz üstünde beyaz kalıyordu. Muted metin token'ına bağlandı. */ .nexus-theme .nexus-footer-status { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: rgba(var(--cl-t-muted), 0.95); } .nexus-theme .nexus-footer-status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--nx-success); box-shadow: 0 0 10px var(--nx-success); } /* Ödeme rozeti şeridi (prototip: "Kabul edilenler" etiketi + rozetler). */ .nexus-theme .sa-footer-payments { row-gap: 0.75rem; } .nexus-theme .sa-footer-payments .eyebrow { color: rgba(var(--cl-t-muted), 0.8); } /* Rozetler prototipte daha alçak ve daha yumuşak; renkler yine token türevi. */ .nexus-theme .sa-footer-payments .sa-payment-icons--chips > span { height: 2rem; /* --cl-border master.njk'da HAZIR rgba() olarak yaziliyor (uclu kanal degil), bu yuzden var(--cl-border) degil dogrudan var(--cl-border). */ border-color: var(--cl-border); background: rgba(var(--cl-t-primary), 0.03); transition: border-color 0.2s ease, transform 0.2s ease; } .nexus-theme .sa-footer-payments .sa-payment-icons--chips > span:hover { border-color: rgba(var(--cl-accent), 0.4); transform: translateY(-1px); } /* Guven isaretleri: prototipte rozet seridinin sag ucunda, 12px/400. */ .nexus-theme .nexus-footer-assure { font-size: 12px; } /* Sosyal pill — prototipten olculdu: 31px yukseklik, 0 14px dolgu, tam yuvarlak, 12px/700. Onceki hali 36x36 ikon kutusuydu. */ .nexus-theme .nexus-social-pill { height: 31px; padding: 0 14px; border-radius: 9999px; font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap; } /* ── Mobil kabuk kirilimlari (Faz 2 / Gorev 8) ───────────────────────────── */ /* Panel `fixed` oldugu icin top degeri baslik yuksekligine bagli verilir. --nx-header-h = 12px ust bosluk + 58px cubuk + 8px alt bosluk. */ .nexus-theme .sa-mobile-menu { top: calc(var(--nx-header-h) + 4px); max-height: calc(100vh - var(--nx-header-h) - 24px); overflow-y: auto; } /* Baslik kucuklerken panel de yukari kayar, arada bosluk kalmaz. */ .nexus-theme .sa-header.is-scrolled ~ * .sa-mobile-menu, .nexus-theme .sa-header.is-scrolled .sa-mobile-menu { top: calc(var(--nx-header-h-shrink) + 4px); } /* <768px: prototip arama+hesap IKONLARINI gizliyor (mobil panelde satir olarak duruyorlar) ve TR/EN METINLERINI gizleyip yalnizca bayragi birakiyor. */ @media (max-width: 767px) { .nexus-theme .nexus-lang-flag__label { display: none; } .nexus-theme .nexus-lang-picker { gap: 0.15rem; padding: 0.15rem; } .nexus-theme .sa-navbar--pills > .px-4, .nexus-theme .sa-navbar--floating-pill > .px-4 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; } .nexus-theme .nexus-register-btn { padding-left: 0.85rem; padding-right: 0.85rem; font-size: 0.8125rem; } } /* ═══════════════════════════════════════════════════════════════════════════ FAZ 3 — ANA SAYFA BOLUMLERI docs/faz3-css/ altindaki ayri dosyalarda yazilip buraya birlestirildi. Hero BLOK A yukarida mevcut kurallarin YERINE gecti; asagisi eklemeler. ═══════════════════════════════════════════════════════════════════════════ */ /* ===================================================================== Faz 3 / Gorev 3 + 4 — Hero CSS'i ===================================================================== Bu dosya DERLENMEZ. Iki bloktan olusur; her blok kendi hedef dosyasina elle tasinir (paylasimli dosyalar baska bir ajanda oldugu icin buraya yazildi): BLOK A -> CheaPest/assets/nexus-premium.css (MEVCUT kurallarin yerine) BLOK B -> CheaPest/assets/style.css (YENI kurallar, sona) Toplam 22 secici blogu: BLOK A = 10 kural + 1 medya sorgusu (icinde 1 kural) BLOK B = 9 kural + 1 keyframe + 1 medya sorgusu (icinde 1 kural) Ayrintili yerlestirme notlari her blogun basinda. ===================================================================== */ /* ===================================================================== BLOK A — CheaPest/assets/nexus-premium.css --------------------------------------------------------------------- A1-A3 : mevcut satir 78-95 blogunun YERINE A4 : mevcut satir 390-397 blogunun YERINE A5-A10: mevcut satir 682-710 ("Hero trust row") blogunun YERINE A11 : mevcut satir ~1270 icindeki ".nexus-theme .sa-tpl-shop .sa-hero" kuralinin YERINE (max-width: 1023px medya sorgusunun icinde kalir) DOKUNULMAZ: satir ~1223'teki (max-width: 768px) icindeki ".nexus-trust-row { gap: .75rem; justify-content: center; }" kuralı oldugu gibi kalir — A5 ile uyumlu, mobilde satiri ortaliyor. Iki duzeltme temasi: (1) TOKEN: font-weight/renk artik --fw-heading ve --cl-* uzerinden geliyor. Onceden `font-weight: 900 !important` vardi ve settings.json'daki heading_weight (Faz 1'de 800) etkisizdi. (2) OLU SECICI: ".nexus-theme .sa-tpl-shop ..." hicbir zaman eslesmiyordu — master.njk satir 217/158 ikisini de AYNI ustune koyuyor, CSS ise torun ariyordu. Dogrusu birlesik secici: ".nexus-theme.sa-tpl-shop ...". ===================================================================== */ /* A1 — Baslik agirligi/izleme araligi TOKEN'dan gelir. !important kaldirildi: ozgulluk zaten yetiyor (.nexus-theme .sa-hero-title = 0,2,0 > Tailwind .text-display = 0,1,0). */ .nexus-theme .sa-hero-title, .nexus-theme h1, .nexus-theme .text-display { font-weight: var(--fw-heading); letter-spacing: -0.035em; line-height: 1.05; } /* A2 — DUZELTME: eski secici ".nexus-theme .sa-tpl-shop .sa-hero-title" idi, hic eslesmiyordu. Prototip olcusu: clamp(36px, 4.6vw, 60px). Ozgulluk 0,3,0 -> A1'i ve Tailwind'i geciyor, !important gerekmiyor. */ .nexus-theme.sa-tpl-shop .sa-hero-title { font-size: clamp(2.25rem, 4.6vw, 3.75rem); } /* A3 — Alt metin rengi sabit rgba(255,255,255,0.75) idi; light semayi bozuyordu. Artik token. */ .nexus-theme .sa-hero-subtitle { font-size: 1.125rem; line-height: 1.75; color: rgb(var(--cl-t-muted)); max-width: 36rem; } /* A4 — DUZELTME: ayni olu secici ("... .sa-tpl-shop .sa-hero"). min-height: 100vh + padding-top: var(--nx-header-h) YAZILMIYOR: master.njk satir 217'de

`sticky top-0`, yani AKIS ICINDE yer kapliyor. Ustune bir de --nx-header-h kadar dolgu koymak yuksekligi iki kez sayardi. Gorunur alan butcesi yine --nx-header-h (78px = 12 ust + 58 cubuk + 8 alt) uzerinden hesaplanir; --nx-nav-h (58px, cubugun kendi yuksekligi) DEGIL. */ /* (Yinelenen `.sa-tpl-shop .sa-hero` kurali kaldirildi — birebir kopyaydi; gecerli tanim yukarida, prototip dolgusuyla.) */ /* A5 — Guven satiri. */ .nexus-trust-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: var(--border-w) solid var(--cl-border); } /* A6 — Ortali hero (variant: centered / background-image, alignment: center). */ .nexus-trust-row--center { justify-content: center; } /* A7 — Renk sabit rgba(255,255,255,0.7) idi; token'a baglandi. */ .nexus-trust-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: rgb(var(--cl-t-muted)); } /* A8 — Renk sabit #fff idi; token'a baglandi. */ .nexus-trust-item strong { color: rgb(var(--cl-t-primary)); font-weight: 700; } /* A9 — Guven satiri ikonu (schema: trust_items[].icon; bos ise onay isareti). */ .nexus-trust-icon { flex-shrink: 0; color: var(--cl-accent-text); } /* A10 — Yildiz satiri (schema: trust_items[].stars). Amber prototipten; token'lasmadi cunku yildiz rengi marka accent'inden bagimsiz. */ .nexus-stars { color: #fbbf24; letter-spacing: 2px; } /* A11 — Mobil: hero'yu ekran yuksekligine zorlamayiz. (max-width: 1023px) medya sorgusunun ICINDE, eski ".nexus-theme .sa-tpl-shop .sa-hero" kuralinin yerine.) */ @media (max-width: 1023px) { .nexus-theme.sa-tpl-shop .sa-hero { min-height: auto; } } /* ===================================================================== BLOK B — CheaPest/assets/style.css (dosyanin SONUNA, @layer disina) --------------------------------------------------------------------- Hero urun kolaji (hero variant: split-collage). Prototip (design_handoff .../Cheapest Ana Sayfa v2.dc.html, Hero bolumu): 3 sutun, hizlar 26s / 30s / 38s, translateY(0 -> -50%) sonsuz dongu, icerik iki kez basilir, kart orani 3/3.9, kapsayici 480px, rotate(-3deg) scale(1.04), ust-alt fade maskesi, sutun basi kaydirma. @layer components DISINDA: keyframe iceriyor. ===================================================================== */ /* B1 */ .hero-collage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.875rem; height: 480px; overflow: hidden; transform: rotate(-3deg) scale(1.04); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); } /* B2 — --collage-dur ve --collage-offset degerlerini hero.njk yaziyor. `align-self: start` ZORUNLU: grid varsayilani `stretch`, o zaman sutunun yuksekligi 480px'e sabitlenir ve translateY(-50%) icerigin degil KAPSAYICININ yarisi (240px) kadar kaydirir — dongu tutmaz. */ .hero-collage__col { align-self: start; display: flex; flex-direction: column; gap: 0.875rem; margin-top: var(--collage-offset, 0px); will-change: transform; animation: collage-rise var(--collage-dur, 30s) linear infinite; } /* B3 — Icerik iki kez basildigi icin -%50 tam bir tur eder. */ @keyframes collage-rise { from { transform: translateY(0); } to { transform: translateY(-50%); } } /* B4 — Oran 3/3.9 (0.77, dikey) idi. Kartlarda URUN GORSELI var ve gorseller `object-fit: cover` ile basiliyor; dikey kutuya sigdirilinca kareye yakin gorsellerin SAG-SOL kenarlari kirpiliyordu. Yuklenen gorsellerde urun adi ve fiyat gomulu oldugu icin sonuc dogrudan okunakli hata: canlida "Netflix Premium 1 Ay" -> "letflix Premium 1 Ay" olarak kirpik gorunuyordu. Kalici kural: urun gorselleri HER ALANDA 1/1. */ .hero-collage__card { position: relative; flex: 0 0 auto; aspect-ratio: 1 / 1; border-radius: var(--radius-card); border: var(--border-w) solid rgba(var(--cl-accent), 0.22); overflow: hidden; background: linear-gradient(155deg, rgba(var(--cl-accent), 0.3), rgb(var(--cl-surface-raised)) 72%); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28); transition: transform 0.25s ease, border-color 0.25s ease; } /* B5 */ .hero-collage__card:hover { transform: scale(1.04); border-color: rgba(var(--cl-accent), 0.5); } /* B6 */ .hero-collage__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; } /* B7 */ .hero-collage__meta { position: absolute; inset: auto 0 0 0; display: flex; flex-direction: column; gap: 0.125rem; padding: 0.625rem; background: linear-gradient(to top, rgba(var(--cl-background), 0.92), transparent); } /* B8 */ .hero-collage__cat { font-size: 0.625rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cl-accent-text); } /* B9 */ .hero-collage__name { font-size: 0.75rem; font-weight: 700; color: rgb(var(--cl-t-primary)); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; } /* B10 */ .hero-collage__price { font-size: 0.75rem; font-weight: 800; color: var(--cl-accent-text); } /* B11 — Isletim sisteminde "hareketi azalt" acikken akis durur. */ @media (prefers-reduced-motion: reduce) { .hero-collage__col { animation: none; } } /* ── Görev 5 + 10: How it works (steps) ve Why Cheapest (features) ─────────── Bu blok `CheaPest/assets/style.css` içine AYNEN eklenir; yeri: `.ghost-num-lg { font-size: 7rem; }` kuralının **hemen ardı** (bugün satır 1490-1492), yani "Title highlight styles (.hl-*)" yorum bloğundan hemen önce. Orası `@layer components` bloğunun DIŞIDIR (layer 514'te açılıp kapanıyor, 1478'de iç içe derinlik 0) — dolayısıyla düz üst seviye kural olarak eklenir, girinti verilmez. Neden `.ghost-num` doğrudan değiştirilmedi: aynı sınıfı `features.njk` `icon-grid` varyantı (show_numbers) ve `steps.njk` da kullanıyor. Konumu sağ alttan sağ üste çekmek o bölümleri de bozardı; bu yüzden modifiye sınıf. Renk kuralı: sabit hex/rgb YOK. Prototipin `rgba(248,250,252,0.05)` değeri dark şemadaki `dark_text_primary_color: "#F8FAFC"` = `248,250,252` ile birebir aynı; token üzerinden yazılınca light şemada da doğru tarafa döner (light: `#0A0F1C`), panelden renk değişince hayalet numara da değişir. Görev 10 (features `ghost_text`) için YENİ CSS gerekmiyor: mevcut `.ghost-num` + `.ghost-num-lg` (7rem) yeterli; `features.njk` sol bölmesine `relative overflow-hidden` eklendi, konumlandırma oradan geliyor. ────────────────────────────────────────────────────────────────────────── */ /* Sağ ÜST hayalet numara (steps `grid` varyantı / prototip "How it works"). `.ghost-num` sağ altta ve 5rem; prototip sağ üstte ve 52px (3.25rem) / 900. `bottom: auto` zorunlu — yoksa `.ghost-num`'ın `bottom: 0.5rem`'i `top` ile birlikte kalır ve kutu dikey olarak gerilir. */ .ghost-num-tr { top: 1rem; bottom: auto; right: 1.25rem; font-size: 3.25rem; color: rgba(var(--cl-t-primary), 0.05); } /* Faz 3 / Gorev 6 spotlight blogu KALDIRILDI (2026-08-03). Yerine prototip duzenini kuran yeni blok bu dosyanin SONUNA eklendi (docs/faz-cila-css/spotlight.css). Ikisi birlikte durursa ayni ozgullukte olduklari icin sonraki kazanirdi ama olu kural kalirdi. */ /* ───────────────────────────────────────────────────────────────────────────── Faz 3 / Gorev 7 — Packs (pricing variant: feature-split) BIRLESTIRME NOTU: bu blok `CheaPest/assets/style.css` SONUNA eklenir (K3: yeni bolum CSS'i style.css'e yazilir, nexus-premium.css'e degil). @layer disinda durmasi bilinclidir: kurallarin Tailwind utility'lerinden SONRA gelmesi gerekiyor — `.sa-pricing-saving` rengi bir utility ile ezilmesin diye. Eklendikten sonra `npm run build:css` calistirilmalidir. Duzenin kendisi (1 lider kart + 2x2 izgara) Tailwind ile njk icinde kurulur; burasi yalnizca lider kartin olcek farkini ve prototipin iki renk detayini tasir. Tum degerler token turevidir; tek istisna asagida gerekcelendirilen --nx-success. ───────────────────────────────────────────────────────────────────────────── */ /* Lider kart, izgara hucresinin tamamini doldurur: yaninda 2x2 dort kart varken sag sutunla ayni yuksekligi tutmasi icin flex + width:100%. */ .sa-pricing-lead { display: flex; } .sa-pricing-lead > .sa-pricing-item { width: 100%; } /* Prototipte lider kartin fiyati 26px, kucuk kartlarda 16px; yani lider kart sadece daha genis degil, tipografisi de bir kademe buyuk. text-h1 zaten clamp'li oldugu icin burada yalnizca alt/ust sinir yukseltiliyor. */ .sa-pricing-lead .sa-pricing-price { font-size: clamp(2.5rem, 4vw, 3.25rem); } .sa-pricing-lead .eyebrow { font-size: 0.8125rem; } /* Ustu cizili eski fiyat: prototipte gecerli fiyattan belirgin sonuk (#5B6678). Token'a bagli kalmasi icin t-muted'in uzerine ek saydamlik. */ .sa-pricing-price-before { color: rgba(var(--cl-t-primary), 0.42); } /* Yesil tasarruf notu. Sartname §Kisitlar: "yesil yalnizca basari" — bu renk accent'ten TUREMEZ, marka rengi degisse de sabit kalir. nexus-premium.css :root icinde --nx-success: #22C55E tanimliyor; o dosya yuklenmezse --cl-success token'ina duseriz. */ .sa-pricing-saving { color: var(--nx-success, rgb(var(--cl-success))); } /* Kart hover dili (handoff §Etkileşimler): translateY(-3/-4px) + mavi kenarlik. Lider kart bir tik daha fazla kalkar; kucuk kartlar kenarlik degistirir. */ .sa-pricing--feature-split .sa-pricing-item { transition: transform var(--dur) ease, border-color var(--dur) ease, box-shadow var(--dur) ease; } @media (hover: hover) { .sa-pricing--feature-split .sa-pricing-item:hover { transform: translateY(-3px); border-color: rgba(var(--cl-accent), 0.35); } .sa-pricing--feature-split .sa-pricing-lead > .sa-pricing-item:hover { transform: translateY(-4px); box-shadow: 0 20px 60px rgba(var(--cl-accent), 0.18); } } @media (prefers-reduced-motion: reduce) { .sa-pricing--feature-split .sa-pricing-item { transition: none; } .sa-pricing--feature-split .sa-pricing-item:hover, .sa-pricing--feature-split .sa-pricing-lead > .sa-pricing-item:hover { transform: none; } } /* "En popüler" rozeti kartin ust kenarinda duruyor (-top-3); lider kart izgaranin ilk satirinda oldugu icin bolum basligiyla arasinda yeterli bosluk kalmali. Yalnizca bu varyantta. */ .sa-pricing-items--lead { margin-top: 0.75rem; } /* ── Görev 8 + 9: promo-panel `media-cards` / `terminal` + API terminali ───── Bu blok `CheaPest/assets/style.css` dosyasının SONUNA (Builder bölümünden önce, `@layer components` bloğunun DIŞINA) aynen eklenir. Girdi her zaman `assets/style.css`; eklendikten sonra `npm run build:css` çalıştırılmalıdır (docs/kanit/K-B.md). Neden style.css: K3 gereği yeni bölüm CSS'i buraya yazılır; `nexus-premium.css` yalnızca mevcut `sa-` override'larını düzeltmek içindir. `nexus-premium.css` içinde `promo-panel`e dokunan TEK BİR kural yok (grep ile doğrulandı), yani bu blok hiçbir şeyi ezmiyor. Renk kuralı: sabit hex/rgb YOK, hepsi Faz 1 token'ları üzerinden. Tek istisna semantik durum renkleri (`--nx-success` / `--nx-danger` / `--nx-warning`): şartname gereği accent'ten türemezler, marka rengi değişse de sabit kalırlar. Bunlar `nexus-premium.css` :root'unda tanımlı; o dosya built.css'ten SONRA yüklendiği için değişken çözümlenmesi sorunsuzdur, yine de her kullanımda yedek değer verildi. Bölümün geri kalanı (ortalı başlık, panel kabuğu, 2 sütun, mini kartlar, gradient medya karosu) Tailwind sınıflarıyla `components/promo-panel.njk` içinde duruyor; burada yalnızca Tailwind ile ifade edilemeyen terminal penceresi var. ────────────────────────────────────────────────────────────────────────── */ /* ------------------------------------------------------------------ */ /* API terminal penceresi (snippets/api-terminal.njk) */ /* Prototip: üç trafik ışığı, mono başlık, gölge 0 32px 90px */ /* ------------------------------------------------------------------ */ .api-terminal { border-radius: var(--radius-card); border: var(--border-w) solid var(--cl-border); /* Prototipte terminal panelden DAHA KOYU. surface-raised dark şemada panelden açık olduğu için sayfa zemini kullanılıp bir tık koyultuluyor. */ background: rgb(var(--cl-background)); overflow: hidden; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.12); } [data-scheme="dark"] .api-terminal { background: color-mix(in srgb, rgb(var(--cl-background)) 90%, #000); box-shadow: 0 32px 90px rgba(0, 0, 0, 0.5); } .api-terminal__bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 0.875rem; border-bottom: var(--border-w) solid var(--cl-border); background: rgba(var(--cl-t-primary), 0.03); } .api-terminal__dot { width: 0.5625rem; height: 0.5625rem; border-radius: 9999px; flex-shrink: 0; } .api-terminal__dot--r { background: var(--nx-danger, #EF4444); opacity: 0.55; } .api-terminal__dot--y { background: var(--nx-warning, #F59E0B); opacity: 0.5; } .api-terminal__dot--g { background: var(--nx-success, #22C55E); opacity: 0.5; } .api-terminal__title { margin-left: 0.5rem; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.6875rem; color: rgb(var(--cl-t-muted)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .api-terminal__body { margin: 0; padding: 0.875rem 1.125rem 1.125rem; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.75rem; line-height: 1.85; /* Dar ekranda uzun JSON satırı SAYFAYI değil, yalnızca terminali kaydırır. */ overflow-x: auto; overscroll-behavior-x: contain; } /* Satırlar inline; ayraç

 içindeki gerçek yeni satır karakteri. */
.api-terminal__line--plain   { color: rgb(var(--cl-t-primary)); }
.api-terminal__line--dim     { color: rgb(var(--cl-t-muted)); }
/* Prototipteki #7DA9F8 = accent'in metin türevi (token: --cl-accent-text). */
.api-terminal__line--accent  { color: var(--cl-accent-text); }
.api-terminal__line--success { color: var(--nx-success, #22C55E); }
.api-terminal__line--error   { color: var(--nx-danger, #EF4444); }


/* ── Görev 11-12: FAQ · CTA banner · Newsletter ───────────────────────────────
   Bu blok `CheaPest/assets/nexus-premium.css` dosyasının SONUNA aynen eklenir.
   Sonuna eklenmesi ŞARTTIR: aşağıdaki üç kural, dosyanın ~1090-1107. satırların-
   daki mevcut `.sa-faq` / `.sa-cta-banner` bloklarını ezmek için yazıldı ve
   ikisi de `!important` kullandığı için sıra tie-breaker'dır (seçici özgüllüğü
   ayrıca yükseltildi, yine de sonda durmalı).

   DÜZELTİLEN İKİ GERÇEK HATA
   1) `.nexus-theme .sa-faq .rounded-card { border-color: var(--nx-glass-border)
      !important }` akordeonun kenarlığını ele geçiriyordu ve `--nx-glass-border`
      (nexus-premium.css:17) `rgb(var(--cl-border))` olarak tanımlı — oysa
      `--cl-border` master.njk:139/150'de ZATEN tam bir `rgba(...)` rengi, üçlü
      değil. Yani değer `rgb(rgba(15,15,20,0.08))` olup geçersiz; "invalid at
      computed-value time" kuralıyla border-color `currentColor`a düşüyor
      (kalemler metin renginde parlak çerçeveli çıkıyor) ve `!important`
      olduğu için Alpine'ın açık hâlde eklediği `border-accent-500/30` sınıfı
      da hiç görünmüyor. Prototipin "açıkken mavi kenarlık" davranışı (§8) bu
      yüzden çalışmıyordu. Aşağıdaki kurallar tokenı DOĞRU biçimde
      (`var(--cl-border)`) kullanır. NOT: `--nx-glass-border` tanımı hâlâ
      bozuk; başka bileşenleri de etkiliyor olabilir, ayrı bir görevde
      düzeltilmeli (bu dosya paylaşımlı CSS'e dokunmuyor).
   2) `.nexus-theme .sa-cta-banner .rounded-card` arka planı
      `rgba(6,182,212,0.08)` — camgöbeği SABİT RGB, hiçbir token'dan türemiyor;
      panelden accent değiştirilse bile bu ton kalıyordu. Prototip (§9) düz
      `rgba(255,255,255,0.02)` yüzey + tepede radial glow istiyor; glow zaten
      `cta-banner.njk` içinde token'lı olarak basılıyor.

   Renk kuralı: sabit hex/rgb YOK. Üçlü tokenlar `rgba(var(--cl-*), N)`,
   `--cl-border` ise hazır renk olduğu için düz `var(--cl-border)`.
   ────────────────────────────────────────────────────────────────────────── */

/* ── FAQ: açık kalemde mavi kenarlık (prototip §8) ────────────────────────── */

/* Kapalı kalem: cam yüzey + nötr kenarlık (eski davranış, sadece
   `.sa-faq-item`e daraltıldı ki destek kartı ayrı yönetilebilsin). */
.nexus-theme .sa-faq .sa-faq-item {
  background: rgba(var(--cl-t-primary), 0.02) !important;
  border-color: var(--cl-border) !important;
}

/* Açık kalem. `border-accent-500/30` sınıfını Alpine `:class` ile ekliyor;
   `:has()` ise JS kapalıyken/ilk boyamada açık gelen kalemi de yakalar. */
.nexus-theme .sa-faq .sa-faq-item.border-accent-500\/30,
.nexus-theme .sa-faq .sa-faq-item:has(> .faq-panel-open) {
  border-color: rgba(var(--cl-accent), 0.42) !important;
  background: rgba(var(--cl-accent), 0.04) !important;
}

.nexus-theme .sa-faq .sa-faq-item:hover {
  border-color: rgba(var(--cl-accent), 0.24) !important;
}

/* Klavye erişimi: `Tab` ile gezerken soru başlığı belirgin olsun. */
.nexus-theme .sa-faq .sa-faq-item button:focus-visible {
  outline: 2px solid rgba(var(--cl-accent), 0.65);
  outline-offset: -2px;
  border-radius: inherit;
}

/* ── FAQ split: destek kartı sol sütunda ──────────────────────────────────── */

/* `faq-support-card.njk` geniş şeritler için yazıldı (`sm:flex-row`), 2/5'lik
   sol sütunda sıkışıyor. Split'te kartı çerçevesiz bir bloğa indirip prototipin
   "başlık + Hâlâ yardım mı lazım? butonu" düzenini veriyoruz. */
.nexus-theme .sa-faq .sa-faq-support--split .sa-faq-support-card {
  display: block;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none;
}

.nexus-theme .sa-faq .sa-faq-support--split .sa-faq-support-card > div {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.nexus-theme .sa-faq .sa-faq-support--split .sa-faq-support-card a {
  margin-top: 1.125rem;
  display: inline-flex;
}

/* ── CTA banner: token'lı yüzey (prototip §9) ─────────────────────────────── */

/* Özgüllük 0,4,0 — dosyanın üstündeki 0,3,0'lık camgöbeği kuralını ezer. */
.nexus-theme .sa-cta-banner--card .wrap .sa-cta-banner-card {
  background: rgba(var(--cl-t-primary), 0.02) !important;
  border-color: rgba(var(--cl-accent), 0.22) !important;
}

/* Görsel arka plan seçilmişse metin beyaza döndüğü için yüzeyi karartmayalım;
   `cta-banner.njk` zaten `--cl-overlay` katmanını basıyor. */
.nexus-theme .sa-cta-banner--card .wrap .sa-cta-banner-card:has(img) {
  background: transparent !important;
}

/* ── Newsletter (prototip §10) ────────────────────────────────────────────── */

.nexus-theme .sa-newsletter--card .sa-newsletter-panel {
  background: rgba(var(--cl-t-primary), 0.02);
  border-color: var(--cl-border);
}

/* E-posta pill'i: odakta accent kenarlık + yumuşak halka. */
.nexus-theme .sa-newsletter-field {
  background: rgba(var(--cl-background), 0.5);
}

.nexus-theme .sa-newsletter-field:focus-within {
  border-color: rgba(var(--cl-accent), 0.55);
  box-shadow: 0 0 0 3px rgba(var(--cl-accent), 0.15);
}

/* Tarayıcının kendi `type="email"` doğrulaması tetiklendiğinde (boş/hatalı
   gönderim) kullanıcı nereye bakacağını görsün. */
.nexus-theme .sa-newsletter-field:has(input:invalid:not(:placeholder-shown)) {
  border-color: rgba(var(--cl-error), 0.55);
}

.nexus-theme .sa-newsletter-input {
  box-shadow: none;
}

.nexus-theme .sa-newsletter-input:focus {
  outline: none;
  box-shadow: none;
}

/* Otomatik doldurma, Chrome'da beyaz zemin basıp pill'i bozuyor. */
.nexus-theme .sa-newsletter-input:-webkit-autofill,
.nexus-theme .sa-newsletter-input:-webkit-autofill:focus {
  -webkit-text-fill-color: rgb(var(--cl-t-primary));
  transition: background-color 100000s ease-in-out 0s;
}

/* Full-bleed varyant: kenardan kenara accent tülü, kart çerçevesi yok. */
.nexus-theme .sa-newsletter--full-bleed .sa-newsletter-panel {
  border-top: var(--border-w) solid var(--cl-border);
  border-bottom: var(--border-w) solid var(--cl-border);
  background: linear-gradient(90deg, rgba(var(--cl-accent), 0.07), transparent 65%);
  padding: 1.75rem 0;
}

/* ── Kırılımlar ───────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  /* Buton, dar ekranda input'un altında tam genişlik olsun. */
  .nexus-theme .sa-newsletter-submit,
  .nexus-theme .sa-newsletter-fallback {
    width: 100%;
  }

  .nexus-theme .sa-faq .sa-faq-item button {
    font-size: 0.9375rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nexus-theme .sa-faq .sa-faq-item svg,
  .nexus-theme .sa-newsletter-field,
  .nexus-theme .sa-newsletter-submit {
    transition: none !important;
  }
}


/* ── Navbar cakisma duzeltmesi (Faz 3 sonrasi) ───────────────────────────── */
/*
   SORUN: navbar.njk:217 menuyu `absolute left-1/2 -translate-x-1/2` ile
   GEOMETRIK olarak ortaliyor. Bu, cubuk tam genislikteyken sorunsuzdu; Faz 2'de
   cubugu prototipe uyup 1200px'e cektikten sonra sag grup (arama, dil, tema,
   para birimi, giris, kayit, sepet = ~494px) sol gruptan (~271px) cok daha
   genis oldugu icin geometrik merkez sag grubun icine giriyor ve menu linkleri
   ("Destek", "Durum") kontrollerin altinda kaliyordu. Olculdu: menu 463-817,
   sag grup 725-1219 -> 92px cakisma.

   COZUM: menuyu akisa geri koy. Ucu de flex cocugu olunca `space-between`
   dogal olarak dagitiyor ve cakisma imkansiz hale geliyor
   (271 + 354 + 494 = 1119 < 1198, yani sigiyor).

   `position: static` DEGIL `relative`: style.css:718 yorumu, .nav-pills'in
   kayan hover gostergesi (.nav-pill-ind) icin konumlandirma baglami oldugunu
   soyluyor. static yapmak gostergeyi bozardi.
*/
.nexus-theme .nav-pills {
  position: relative;
  left: auto;
  transform: none;
  max-width: none;
}

/*
   1024-1279px: menu akisa girdikten sonra uc grup gercekten sigmiyordu.
   Olculdu (1100px): gereken 265 + 315 + 475 = 1055, yer 1051 -> menu
   `overflow-hidden` altinda kirpiliyor ve son link ("Durum") kayboluyordu.

   Oncelik menude: navigasyon, para birimi etiketinden onemli. Sag grubu
   sikistiran iki kaldirac (olculen kazanc ~62px, gereken 43px):
     - dil etiketleri (EN/TR metni) gizlenir, bayrak kalir  -> ~32px
       (768px altinda ZATEN uygulanan desen; yalnizca esik yukari tasindi)
     - pill link dolgusu 8px -> 5px                          -> ~30px
   1280px ve ustunde ikisi de geri gelir.
*/
@media (min-width: 1024px) and (max-width: 1279px) {
  .nexus-theme .nexus-lang-flag__label {
    display: none;
  }

  /* Gruplar arasi bosluk 16 -> 8 (iki bosluk = 16px kazanc). */
  .nexus-theme .nav-shrink {
    gap: 8px;
  }

  /*
     Menu daralmaz. Bunsuz kazanilan yeri sag grup geri aliyordu: ikisi de
     `flex: 0 1 auto` oldugu icin daralma ikisine paylastiriliyor ve menu
     3px eksik kalip "Durum" linkini kirpiyordu (olculdu: gerekli 285,
     yer 282). Artik butun sikisma sag gruba biniyor.
  */
  .nexus-theme .nav-pills {
    flex-shrink: 0;
  }

  /*
     Dolgu 8px -> 5px (5 link x 2 yan = 30px kazanc).
     `html[data-lang]` ve `!important` ZORUNLU: satir 342'deki
     `html[data-lang="tr"] ... padding: ... !important` kurali hem daha
     yuksek oncelikli hem !important'li. Sade `.nexus-theme .nav-pills ...`
     yazmak sessizce kaybediyordu (tarayicida olculdu: 8px kaldi).
  */
  html[data-lang] .nexus-theme .nav-pills .sa-navbar-link,
  html .nexus-theme .nav-pills .sa-navbar-link {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
}


/* KURAL: urun gorselleri HER ALANDA 1/1 (kare) — kullanici karari, 2026-08-03.
   ("unutma aklina yaz 1/1 olacak her zaman her alanda")

   Burada bir sure spotlight icin `aspect-ratio: 16/9.6` (aktif) ve `16/10`
   (yan kart) ezmesi durdu; prototip oyle kullaniyor. KALDIRILDI: kullanici
   karari prototipi gecer. Kart gorseli artik yalnizca
   `global.properties.product_card_image_aspect_ratio` ayarindan (1/1) besleniyor.

   Bir bolum kare gorselle sikisik duruyorsa cozum orani ezmek DEGIL, duzeni
   (genislik, bosluk, kaydirma matematigi) ayarlamaktir. */

/* =====================================================================
   Faz Cila — Ana sayfa HERO'sunu prototipe yaklastirma
   =====================================================================
   Kaynak prototip:
     design_handoff_cheapest_tema/pages/Cheapest Ana Sayfa v2.dc.html
     Hero bolumu = satir 98-122.

   Bu dosya DERLENMEZ. TAMAMI, oldugu gibi,
   CheaPest/assets/nexus-premium.css dosyasinin SONUNA eklenir.

   Neden sona: master.njk satir 68-70 yukleme sirasi
     built.css  ->  custom.css  ->  nexus-premium.css
   Asagidaki kurallarin hepsi nexus-premium.css icinde ZATEN var olan
   kurallarla ayni ozgullukte; kaynak sirasi son sozu soyluyor. Bu sayede
   hicbirine `!important` gerekmedi (tema butcesi zaten asilmis durumda).

   ONEMLI — bu dosya tek basina hicbir seyi degistirmez. Uc parca birlikte
   uygulanmalidir:
     1) bu CSS -> nexus-premium.css sonuna
     2) node tools/faz-cila-sema/hero.mjs   (hero.title_highlight'a
        `gradient` secenegini ekler)
     3) settings.json -> templates.shop.components.hero.properties
        .title_highlight = "gradient"
   Ayrinti C2 blogunun basinda.
   ===================================================================== */


/* ---------------------------------------------------------------------
   C1 — EYEBROW ROZETI: BUYUK HARF + HARF ARALIGI
   ---------------------------------------------------------------------
   Prototip satir 104 (rozet kapsayicisi):
     font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
     text-transform: uppercase;
   Bizde (hero.njk satir 16) yalnizca Tailwind `text-xs font-semibold`
   vardi -> 12px/600, normal yazim.

   Ozgulluk: 0,2,0. Tailwind `.text-xs` / `.font-semibold` 0,1,0 -> kaybeder.
   Yalnizca `.sa-hero` icini hedefler; baska yuzeydeki eyebrow'lara dokunmaz.
   `centered` varyantinin nexus-premium satir 501'deki `!important`li
   kurali BU KURALI EZER; orada zaten ayri bir tasarim var, bilincli.
   --------------------------------------------------------------------- */
.sa-hero .sa-hero-eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


/* ---------------------------------------------------------------------
   C2 — BASLIK: BEYAZ METIN + YALNIZCA VURGUDA GRADYAN
   ---------------------------------------------------------------------
   Prototip satir 108:
     h1  -> color: #F8FAFC  (yani rgb(var(--cl-t-primary)), dark semada)
     span-> linear-gradient(100deg, #A8C7FB, #3B82F6 60%, #2563EB)
            + background-clip: text + color: transparent

   Bizde basligin TAMAMI duz maviydi. Kok neden OLCULDU:
   nexus-premium.css satir 1002-1005
       .nexus-theme .hl-accent,
       .nexus-theme .hl-glow { color: var(--nx-blue-bright) !important; }
   Bu kural `.mk` yavrusunu degil H1'IN KENDISINI boyuyor. style.css
   satir 1499'daki dogru kural (`.hl-accent .mk`) `!important` tasimadigi
   icin eziliyor. hero'nun basligi da `hl-accent` aliyordu
   (settings.global.properties.title_highlight = "accent").

   `!important` eklemek yasak oldugu icin kural EZILMEZ, ATLATILIR:
   hero'yu `hl-gradient`e gecirdik. `hl-gradient` yukaridaki iki secicinin
   listesinde YOK; boylece h1 kendi `text-t-primary` rengini korur ve
   gradyan yalnizca `.mk` parcasina biner — prototiple birebir.

   Bunun icin GEREKEN iki adim (bu CSS tek basina yetmez):
     node tools/faz-cila-sema/hero.mjs
     settings.json: ...hero.properties.title_highlight = "gradient"

   Asagidaki kural style.css satir 1556'daki varsayilan
   `.hl-gradient .mk` (135deg, iki durak) yerine prototipin uc duraklı
   100deg gradyanini koyar. Ozgulluk 0,3,0 > 0,2,0.
   Sabit hex YOK: #A8C7FB = accent'in %45'i + metin rengi (dark semada
   ~#A3C4F9); acik semada ayni formul koyu maviye duserek okunur kalir.
   --------------------------------------------------------------------- */
.sa-hero .sa-hero-title {
  color: rgb(var(--cl-t-primary));
}

.sa-hero .sa-hero-title.hl-gradient .mk {
  background-image: linear-gradient(
    100deg,
    color-mix(in srgb, rgb(var(--cl-accent)) 45%, rgb(var(--cl-t-primary))),
    rgb(var(--cl-accent)) 60%,
    var(--grad-accent-to)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


/* ---------------------------------------------------------------------
   C3 — BIRINCIL BUTON: SAG OK IKONU
   ---------------------------------------------------------------------
   Prototip satir 111: metinden SONRA gelen 15px'lik ok SVG'si
   (path "M5 12h14" + "m12 5 7 7-7 7", stroke-width 2.2), gap 8px.

   Neden CSS ile, njk ile degil: butonlari basan yer
   CheaPest/snippets/buttons.njk ve o dosya bu gorevin kapsaminda degil
   (ayrica ikonu METINDEN ONCE basiyor, prototipte ok SONRA).
   `::after` hem dogru tarafa koyar hem snippet'e dokunmaz.

   GRADYAN NOTU — prototipteki `linear-gradient(90deg, #3B82F6, #2563EB)`
   bizde ZATEN var: body `bs-gradient` sinifini tasiyor ve nexus-premium
   satir 1009-1011 `.nexus-theme .btn-primary`e
   `linear-gradient(135deg, var(--nx-blue), var(--nx-cyan)) !important`
   veriyor; --nx-blue/--nx-cyan = --grad-accent-from/-to = #3B82F6/#2563EB
   (settings.global.properties). Yani renkler birebir, yalnizca aci farkli
   (135deg / 90deg). Aciyi duzeltmek `!important` gerektirdigi icin
   BILEREK YAPILMADI.

   `.sa-btn` zaten `inline-flex items-center gap-2` -> ::after bir flex
   ogesi olur ve 0.5rem bosluk prototipin 8px'ine denk gelir.
   --------------------------------------------------------------------- */
.sa-hero-actions .btn-primary::after {
  content: '';
  flex: 0 0 auto;
  width: 0.9375rem;
  height: 0.9375rem;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: transform var(--dur) ease;
}

.sa-hero-actions .btn-primary:hover::after {
  transform: translateX(2px);
}


/* ---------------------------------------------------------------------
   C4 — GUVEN SATIRI: AYRAC CIZGI YOK, TEK SATIR
   ---------------------------------------------------------------------
   Prototip satir 114:
     margin-top: 24px; gap: 8px 20px; font-size: 12.5px; color: #8A94A6;
     -> ne `border-top` ne `padding-top` var.
   Bizde nexus-premium.css satir 698 ve 1672'de (AYNI kural iki kez)
     padding-top: 1.5rem; border-top: var(--border-w) solid var(--cl-border);
   duruyordu. Elle silmek yerine burada sifirlaniyor: kural iki yerde
   tekrarlandigi icin "sil" talimati iki kez uygulanmak zorunda kalirdi.

   `display/flex-wrap/gap` BILEREK yeniden yazilmadi: satir 1253'te
   (max-width: 768px) icinde `.nexus-trust-row { gap: .75rem;
   justify-content: center; }` var. Bu dosya kaynagin SONUNA eklendigi
   icin burada gap'i tekrar yazsaydik mobil kurali sessizce ezerdik.

   Tek satira sigdirma (prototip: tek satir, bizde iki satira sariyordu):
   olcu prototipten alindi — kalem ici bosluk 7px, metin 12.5px, yildizlar
   arasi 1.5px. `white-space: nowrap` kalemin KENDI ICINDE bolunmesini
   engeller; satirlar arasi sarma `flex-wrap: wrap` ile hala mumkun
   (dar ekranda tasma olmasin diye).
   --------------------------------------------------------------------- */
.nexus-trust-row {
  margin-top: 1.5rem;
  padding-top: 0;
  border-top: 0;
}

.nexus-trust-item {
  gap: 0.4375rem;
  font-size: 0.78125rem;
  white-space: nowrap;
}

.nexus-stars {
  font-size: 0.75rem;
  letter-spacing: 1.5px;
}

/* =====================================================================
   Faz 8 — HAREKET (Gorev 8.1 + 8.2 + 8.3)
   =====================================================================
   Bu dosya DERLENMEZ. TAMAMI, oldugu gibi,
   CheaPest/assets/nexus-premium.css dosyasinin SONUNA eklenir.

   Neden nexus-premium.css'in sonu (custom.css degil):
   master.njk satir 68-70 yukleme sirasi
       built.css (= assets/style.css derlenmis)  ->  custom.css  ->  nexus-premium.css
   Asagidaki reveal kurallarinin OZGULLUGU, style.css satir 557-600'deki
   kurallarla BIREBIR AYNI (`.rv-fade-up [data-dsr]` = 0,2,0). Esitlikte kaynak
   sirasi karar verir; en sonda yuklenen dosya kazanir. Bu sayede TEK BIR
   `!important` eklenmedi (tema butcesi zaten asilmis: style.css 17 +
   custom.css 9 + nexus-premium.css 194).

   Bu dosya TEK BASINA yeterli DEGIL. Uc parca birlikte uygulanir:
     1) bu CSS            -> nexus-premium.css sonuna
     2) layouts/master.njk -> --rv-dist varsayilani 64, yukari cik butonu,
                              IntersectionObserver esik koprusu (bu turda yapildi)
     3) assets/nexus-premium.js -> initBackToTop (bu turda yapildi)
     4) settings.json -> global.properties.reveal_distance = 64
                         (+ istege bagli show_back_to_top = true)
        DIKKAT: 4. madde bu turda YAPILMADI, settings.json baska bir ajanin.
        Yapilmazsa reveal mesafesi 16px kalir; geri kalan her sey calisir.
   ===================================================================== */


/* ---------------------------------------------------------------------
   H1 — REVEAL ZAMANLAMASI  (Gorev 8.1)
   ---------------------------------------------------------------------
   Prototip: 0.95s + cubic-bezier(0.22, 1, 0.36, 1).

   Bugun master.njk satir 114-119:
       --dur    : motion_duration        = 200ms
       --rv-dur : motion_duration * 3    = 600ms
       --ease   : motion_easing          = cubic-bezier(0.4, 0, 0.2, 1)
   `motion_duration` 300'e cekilerek 900ms uretilebilirdi ama o ayar --dur'u da
   300ms yapip prototipin 0.2s'lik hover dilini bozardi. `--ease` de dogrudan
   ezilemez: onu hover gecisleri de kullaniyor. Bu yuzden reveal'a OZEL,
   turetilmis iki degisken burada sabitleniyor.

   `.nexus-theme` = . master.njk ayni degiskeni `:root` (= ) uzerine
   yaziyor. Ozel degiskenler KALITIM ile iniyor; daha yakin ata (body) uzerindeki
   tanim, html'den kalitilan degeri ezer — kaynak sirasi burada rol oynamaz.
   (Faz 1'de kaldirilan palet sabitlemesiyle karistirilmasin: orada bir AYAR
   eziliyordu, burada semaya sigmayan bir TUREV duzeltiliyor.)
   --------------------------------------------------------------------- */
.nexus-theme {
  --rv-dur: 950ms;
  --rv-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Yumusatma YALNIZCA reveal'a uygulanir. style.css satir 561-565 gecis
   kisayolunda 3 ayri `var(--ease)` yaziyor; tek bir
   `transition-timing-function` hepsini birden degistirir. */
:is(.rv-fade, .rv-fade-up, .rv-fade-scale, .rv-clip) [data-dsr] {
  transition-timing-function: var(--rv-ease);
}


/* ---------------------------------------------------------------------
   H2 — REVEAL GIRISI: blur(7px) + scale(0.955)  (Gorev 8.2)
   ---------------------------------------------------------------------
   Prototip giris hali: opacity 0 + translateY(64px) + scale(0.955) + blur(7px).
   translateY zaten --rv-dist ile geliyor (master.njk); olcek ve bulaniklik
   burada ekleniyor.

   Kapsam bilerek `.rv-fade-up` dali: settings.json'da reveal_style = "inherit",
   motion_preset = "expressive" -> master.njk satir 42-47 `fade-up` cozuyor.
   Diger uc varyant (fade / fade-scale / clip) magaza sahibi secerse bugunku
   davranisini korur.

   ### STICKY / FIXED TUZAGI — OLCUM, IDDIA DEGIL
   `filter`, tipki `transform` gibi, icindeki `position: fixed` ve
   `position: sticky` ogeler icin bir *containing block* uretir; temizlenmezse
   sticky sessizce duz kaydirmaya doner.
   (a) `.rv-in`'de `filter: none` ZORUNLU. `transform: none` style.css satir
       582-586'da zaten var; blur eklenince ayni temizlik filter icin de
       gerekiyor. Asagidaki kural bunu yapiyor, testi:
       tools/harness/test/faz8-hareket.test.mjs
   (b) Reveal efekti sticky/fixed bir ogenin ATASINA konmamali. Olculdu:
       22 sablonun tamami render edilip class'inda `sticky`/`fixed` gecen
       281 oge bulundu; HICBIRININ ata zincirinde `[data-dsr]` YOK
       (sa-header sticky, panel aside'lari lg:sticky, urun/sepet ozet
       kartlari, tum modaller, sepet cekmecesi, toast'lar, sosyal kanit).
       Bu olcum teste gomuldu; ileride bir bilesen sticky bir ogeyi
       [data-dsr] icine sokarsa test kirmizi doner.
   --------------------------------------------------------------------- */
.rv-fade-up [data-dsr] {
  transform: translateY(var(--rv-dist, 64px)) scale(0.955);
  filter: blur(7px);
  /* style.css'teki kisayol yalnizca opacity/transform/clip-path'i tasiyordu;
     filter listeye burada giriyor. Sure/gecikme listeleri (3 eleman) dongusel
     tekrarlandigi icin 4. ozellik de var(--rv-dur) suresini alir. */
  transition-property: opacity, transform, filter, clip-path;
}

.rv-fade-up [data-dsr].rv-in {
  transform: none;
  filter: none;
}

/* Azaltilmis hareket: bulaniklik da kapanir.
   `!important` GEREKMIYOR — style.css satir 597'deki kural `[data-dsr]` (0,1,0)
   oldugu icin `!important` kullanmak zorundaydi; asagidaki secici blur kuralinin
   ozgullugune esit (0,2,0) ve kaynak sirasinda ondan SONRA geliyor. */
@media (prefers-reduced-motion: reduce) {
  :is(.rv-fade, .rv-fade-up, .rv-fade-scale, .rv-clip) [data-dsr] {
    filter: none;
    transition: none;
  }
}


/* ---------------------------------------------------------------------
   H3 — YUKARI CIK BUTONU  (Gorev 8.3)
   ---------------------------------------------------------------------
   Markup: layouts/master.njk (SSR, 'nin dogrudan cocugu).
   Davranis: assets/nexus-premium.js -> initBackToTop (esik scrollY > 420).

   Neden Tailwind sinifi kullanilmadi: bu tur `assets/built.css`'i yeniden
   derleyemiyor (assets/*.css kapsam disi). Derlenmemis yeni bir utility
   sinifi HTML'de durur ama HICBIR SEY yapmaz. Bu yuzden gorunum tamamen
   burada, duz CSS ile ve token'larla yaziliyor.

   Konum: prototipteki sag alt. Not — `.sa-toasts` (bottom-4 right-4, z-60)
   ayni koseyi kullaniyor; z-index bilerek 40'ta birakildi ki toast ustte
   kalsin. Sol alt zaten dolu (.nexus-flash-badge z-25, .sa-social-proof z-30).

   Sabit hex yok: gradyan ve metin rengi accent token'larindan geliyor,
   panelden renk degistirilince buton da doner.
   --------------------------------------------------------------------- */
.nexus-theme .sa-back-to-top {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 40;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  background-image: linear-gradient(135deg, var(--grad-accent-from), var(--grad-accent-to));
  color: rgb(var(--cl-on-accent));
  box-shadow: 0 8px 24px rgba(var(--cl-accent), 0.35);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.nexus-theme .sa-back-to-top.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.nexus-theme .sa-back-to-top:hover {
  box-shadow: 0 10px 30px rgba(var(--cl-accent), 0.5);
}

.nexus-theme .sa-back-to-top svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* Azaltilmis hareket: buton yine belirir/kaybolur ama animasyonsuz.
   (Tiklamadaki yumusak kaydirma da nexus-premium.js icinde 'auto'ya duser.) */
@media (prefers-reduced-motion: reduce) {
  .nexus-theme .sa-back-to-top {
    transition: none;
    transform: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Faz "cila" — Featured spotlight bolumu (components/products.njk,
   `layout: spotlight`)

   NEREYE: `CheaPest/assets/nexus-premium.css` SONUNA.
   ONCE SILINMELI: nexus-premium.css satir 1911-2053 arasindaki ESKI spotlight
   blogu (`.sa-products-spotlight { --spot-w: min(400px,78vw) }` ile baslayip
   `@media (prefers-reduced-motion)` ile biten kisim). Bu dosya onun YERINE
   gecer; ikisi bir arada dururken de calisir (ayni ozgulluk, sonraki kazanir)
   ama olu kural birakmanin anlami yok.

   Kaynak olcu/renkler: design_handoff_cheapest_tema/pages/
   "Cheapest Ana Sayfa v2.dc.html" satir 169-217. Her kuralin yaninda satir no.

   ORAN KURALI (kullanici, 2026-08-03): urun gorseli HER ZAMAN 1/1. Prototip
   spotlight'ta 16/9.6 (aktif) ve 16/10 (yan) kullaniyor; BU DEGERLER
   UYGULANMADI. Burada hicbir `aspect-ratio` bildirimi YOK; medya orani
   `global.properties.product_card_image_aspect_ratio` ayarindan (1/1) gelir.
   tools/harness/test/gorsel-orani.test.mjs bunu denetliyor.

   Sabit hex/rgb YOK: renkler --cl-accent / --cl-t-primary / --cl-t-muted /
   --cl-success / --cl-star / --cl-background / --cl-border / --cl-accent-text
   ve --grad-accent-from|to uzerinden turer. `--cl-border` ZATEN tam rgba(),
   `rgb(var(--cl-border))` yazilmaz.

   `!important` butcesi: bu dosyada HIC YOK. Gereken tek yer bolum basligiydi;
   oradaki kok neden nexus-premium.css:1014'te duzeltildigi icin ezmeye gerek
   kalmadi (bkz. baslik bolumundeki not).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ------------------------------------------------------------------ */
/* Bolum basligi: rozet (pill) eyebrow + BEYAZ baslik   (prototip 172-174) */
/* ------------------------------------------------------------------ */

/* Prototip 172: eyebrow duz metin degil, mavi zeminli rozet.
   snippets/section-header.njk'nin `pill` dali GLOBAL bir ayar
   (global.properties.eyebrow_style) ile aciliyor; onu degistirmek TUM
   bolumleri etkilerdi. Bu yuzden gorunum yalnizca spotlight bolumunde,
   disaridan veriliyor. Ozgulluk 0,2,0; Tailwind yardimci siniflari
   (text-sm/font-semibold/mb-2) 0,1,0 — !important gerekmiyor. */
.sa-products--spotlight .sa-section-eyebrow {
  display: inline-flex;
  align-items: center;
  margin: 0 0 14px;
  padding: 5px 14px;
  border-radius: 9999px;
  background: rgba(var(--cl-accent), 0.12);
  border: 1px solid rgba(var(--cl-accent), 0.2);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cl-accent-text);
}

/* Prototip 173: baslik BEYAZ (#F8FAFC), mavi degil.
   BURADA KURAL YOK — bilerek. Basligin tamaminin mavi olmasinin sebebi
   nexus-premium.css'teki `.nexus-theme .hl-accent { color: var(--nx-blue-bright)
   !important }` kuraliydi: secici basligin KENDISINDEYDI, vurgulanan kelimenin
   degil. O kural 2026-08-03'te dogru hedefe cekildi
   (`.nexus-theme .hl-accent .mk`, nexus-premium.css:1014) ve baslik artik
   Tailwind'in `text-t-primary` sinifindan beyaz geliyor.

   Buraya bolume ozel bir ezme yazmak, calisan genel duzeltmeyi golgeleyen ve
   `!important` gerektiren olu bir kural olurdu. Vurgulanan kelimeler
   (settings.json'daki `*en cok satanlar*`) accent renginde KALIR: temanin
   baslik vurgusu ozelligi budur, prototipteki tek renk baslik ise vurgusuz
   yazilmis bir metin. Vurgu istenmiyorsa cozum CSS degil, settings.json'daki
   basliktan yildizlari kaldirmaktir.
   Regresyon bekcisi: cila-spotlight testindeki "baslik mavi degil". */

/* ------------------------------------------------------------------ */
/* Sahne: ok — gorunum alani — ok            (prototip 176-177, 207)   */
/* ------------------------------------------------------------------ */

.sa-products-spotlight {
  /* Prototip 183: aktif kart 400px, 178/202: yan kart 240px, 176: gap 18px.
     vw tavani neden var: sabit 400+2*240+2*18 = 916px, artı iki ok ve
     bosluklari 120px => 1036px. `.wrap` ic genisligi 1024px ekranda 976px'e
     kadar duser ve yan kart YINE kirpilirdi (kullanicinin bildirdigi hata:
     kart sag kenari 1147 > gorunum 1062). vw ile baglayinca her genislikte
     ucu de tam sigar. */
  --spot-w: min(400px, 33vw);
  --spot-side: min(240px, 20vw);
  --spot-gap: min(18px, 1.5vw);
  /* Kaydirma adimi: aktif slaytin ONUNDEKI slaytlarin hepsi YAN genisliktedir,
     dolayisiyla adim sabittir. Track donusumu buna dayanir. */
  --spot-step: calc(var(--spot-side) + var(--spot-gap));
}

.spot-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spot-gap);
}

/* Gorunum alani TAM OLARAK uc kart + iki bosluk. Fazlasi kirpilmaz cunku
   dorduncu kart zaten bosluktan sonra basliyor; boylece prototipteki gibi
   ne yarim kart ne de sizinti gorunur. */
.spotlight-viewport {
  flex: 0 1 calc(var(--spot-w) + 2 * var(--spot-side) + 2 * var(--spot-gap));
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  /* Aktif kartin glow golgesi dikeyde kirpilmasin. */
  padding-block: 1.5rem;
}

/* Track `margin-left: 50%` ile gorunum alaninin ortasindan baslar; sonra aktif
   slaytin yarisi + oncekilerin (hepsi yan genislikte) toplami kadar sola
   cekilir. Aktif kart her genislikte tam ortada durur. */
.spotlight-track {
  display: flex;
  align-items: center;
  gap: var(--spot-gap);
  margin-left: 50%;
  transform: translateX(calc(-1 * (var(--spot, 0) * var(--spot-step) + var(--spot-w) / 2)));
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Prototip 178/202: yan kartlar 240px + opaklik 0.45 + scale(0.92).
   flex-basis'in kendisi de gecisli: kart genisligi degistigi icin fark artik
   yalnizca olcekle degil, gercek genislikle veriliyor. */
.spotlight-slide {
  position: relative;
  flex: 0 0 var(--spot-side);
  opacity: 0.45;
  transform: scale(0.92);
  transition: opacity 0.35s ease, transform 0.35s ease,
    flex-basis 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.spotlight-slide:hover {
  opacity: 0.7; /* prototip 178 style-hover */
}

.spotlight-slide.is-active,
.spotlight-slide.is-active:hover {
  flex-basis: var(--spot-w);
  opacity: 1;
  transform: scale(1);
}

/* ------------------------------------------------------------------ */
/* Kart govdesi                              (prototip 178 / 183)     */
/* ------------------------------------------------------------------ */

.spotlight-card {
  height: 100%;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--cl-border);
  background: rgba(var(--cl-t-primary), 0.015);
}

.spotlight-slide.is-active .spotlight-card {
  padding: 16px;
  border-radius: 20px;
  border-color: rgba(var(--cl-accent), 0.3);
  background: rgba(var(--cl-t-primary), 0.025);
  box-shadow: 0 24px 80px rgba(var(--cl-accent), 0.14);
}

/* Medya. ORAN VERILMEZ (1/1 kurali) — yalnizca kose yaricapi prototipten:
   yan kart 10px (179), aktif kart 13px (184). */
.spot-media {
  position: relative;
}

.spot-media .sa-product-card-media {
  border-radius: 10px;
  overflow: hidden;
}

.spotlight-slide.is-active .spot-media .sa-product-card-media {
  border-radius: 13px;
}

/* Puan rozeti (prototip 187): sag ust, koyu cam zemin. */
.spot-rating {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 9999px;
  background: rgba(var(--cl-background), 0.7);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(var(--cl-t-primary), 0.12);
  font-size: 11px;
  font-weight: 700;
  color: rgb(var(--cl-t-primary));
}

.spot-star {
  width: 11px;
  height: 11px;
  color: rgb(var(--cl-star));
}

/* Indirim rozeti prototipte yok; temanin her kartinda var ve sag ust (puan) ile
   sol ust (urun rozetleri) doluyken tek bos kose sol alt. Konumu isaretlemedeki
   Tailwind siniflarindan (`absolute bottom-2 left-2`), gorunumu temanin
   `.sa-product-card-discount` kuralindan gelir; burada yalnizca soluk kartta
   gizlenmesi icin kanca olarak kullanilir (asagidaki :not(.is-active) blogu). */

/* ------------------------------------------------------------------ */
/* Kategori · stok · aninda satiri            (prototip 189-193)       */
/* ------------------------------------------------------------------ */

.spot-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

.spot-cat {
  font-size: 11px;
  font-weight: 700;
  color: var(--cl-accent-text);
}

.spot-dot {
  width: 3px;
  height: 3px;
  border-radius: 9999px;
  background: rgba(var(--cl-t-muted), 0.45);
}

.spot-stock {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: rgb(var(--cl-success));
}

/* Prototip 192: metnin onunde 5px'lik dolu yesil nokta. */
.spot-stock::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 9999px;
  background: currentColor;
}

.spot-stock--out {
  color: rgb(var(--cl-error));
}

.spot-instant {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--cl-accent-text);
  white-space: nowrap;
}

.spot-bolt {
  width: 10px;
  height: 10px;
}

/* ------------------------------------------------------------------ */
/* Ad + fiyat                                 (prototip 195-196)       */
/* ------------------------------------------------------------------ */

.spot-name {
  margin: 8px 0 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: rgb(var(--cl-t-primary));
}

.spot-price {
  margin: 4px 0 0;
  font-size: 21px;
  font-weight: 800;
  color: rgb(var(--cl-t-primary));
}

.spot-price-plus {
  opacity: 0.6;
}

.spot-price-slash {
  margin-left: 6px;
  font-size: 13px;
  font-weight: 600;
  color: rgb(var(--cl-t-muted));
  text-decoration: line-through;
}

/* ------------------------------------------------------------------ */
/* Iki buton                                  (prototip 197-199)       */
/* ------------------------------------------------------------------ */

.spot-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.spot-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 16px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 700;
  transition: transform var(--dur) ease, background-color var(--dur) ease,
    box-shadow var(--dur) ease, color var(--dur) ease;
}

.spot-btn-main {
  background: linear-gradient(90deg, var(--grad-accent-from), var(--grad-accent-to));
  color: rgb(var(--cl-on-accent));
  box-shadow: 0 4px 20px rgba(var(--cl-accent), 0.35);
}

.spot-btn-main:hover {
  transform: translateY(-1px);
  color: rgb(var(--cl-on-accent));
}

.spot-btn-alt {
  border: 1px solid rgba(var(--cl-accent), 0.4);
  background: rgba(var(--cl-accent), 0.08);
  color: var(--cl-accent-text);
}

.spot-btn-alt:hover {
  background: rgba(var(--cl-accent), 0.15);
}

.spot-btn:focus-visible {
  outline: 2px solid rgb(var(--cl-accent));
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* Soluk kartta gizlenen parcalar              (prototip 178-182)      */
/* ------------------------------------------------------------------ */

/* Yan kart prototipte yalnizca medya + ad + fiyat tasir. Ayni isaretlemenin
   iki hali oldugu icin fazlasi burada dusuruluyor; ikinci bir kart basmak
   DOM'u ikiye katlardi ve aktif kart calisma aninda degisiyor. */
.spotlight-slide:not(.is-active) .spot-meta,
.spotlight-slide:not(.is-active) .spot-actions,
.spotlight-slide:not(.is-active) .spot-rating,
.spotlight-slide:not(.is-active) .spot-discount {
  display: none;
}

.spotlight-slide:not(.is-active) .spot-name {
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.spotlight-slide:not(.is-active) .spot-price {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 800;
  color: var(--cl-accent-text);
}

.spotlight-slide:not(.is-active) .spot-price-slash {
  display: none;
}

/* Soluk kartin uzerindeki saydam secim butonu. Kartin ici link tasidigi icin
   ic ice etkilesimli oge uretmemek adina kart degil bu odaklanir. */
.spotlight-pick {
  position: absolute;
  inset: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: 16px;
}

.spotlight-pick:focus-visible {
  outline: 2px solid rgb(var(--cl-accent));
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* Oklar / sayac / "Tum urunleri gor"     (prototip 177, 209-216)      */
/* ------------------------------------------------------------------ */

.spotlight-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 9999px;
  border: 1px solid var(--cl-border);
  background: rgba(var(--cl-t-primary), 0.03);
  color: rgb(var(--cl-t-muted));
  cursor: pointer;
  transition: color var(--dur) ease, border-color var(--dur) ease,
    background-color var(--dur) ease;
}

.spotlight-arrow:hover {
  color: rgb(var(--cl-t-primary));
  border-color: rgba(var(--cl-accent), 0.4);
  background: rgba(var(--cl-accent), 0.08);
}

.spotlight-arrow:focus-visible {
  outline: 2px solid rgb(var(--cl-accent));
  outline-offset: 2px;
}

.spotlight-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.spotlight-counter {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 12px;
  color: rgba(var(--cl-t-muted), 0.72);
}

.spotlight-index {
  font-variant-numeric: tabular-nums;
}

.spotlight-name {
  color: rgb(var(--cl-t-muted));
  font-weight: 600;
}

.spotlight-cat {
  color: rgba(var(--cl-t-muted), 0.72);
}

.spotlight-cat::before {
  content: '·';
  margin-inline: 6px;
}

.spot-all {
  display: flex;
  justify-content: center;
  margin-top: 26px;
}

.spot-all-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 24px;
  border-radius: 9999px;
  border: 1px solid var(--cl-border);
  background: rgba(var(--cl-t-primary), 0.03);
  color: rgb(var(--cl-t-primary));
  font-size: 13.5px;
  font-weight: 600;
  transition: background-color var(--dur) ease, color var(--dur) ease;
}

.spot-all-link:hover {
  background: rgba(var(--cl-t-primary), 0.07);
  color: rgb(var(--cl-t-primary));
}

.spot-all-link:focus-visible {
  outline: 2px solid rgb(var(--cl-accent));
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* Dar ekran                                                          */
/* ------------------------------------------------------------------ */

/* Prototip yan kartlari mobilde `class="m-hide"` ile tamamen gizliyor.
   Ayni sey: yan slaytlar DOM'dan dusurulur, adim 0 olur ve donusum
   `-(--spot-w / 2)` degerine sadelesir — tek kart tam ortada kalir. */
@media (max-width: 860px) {
  .sa-products-spotlight {
    /* 60vw, 78vw degil: iki ok + bosluklari da ayni satirda ve `.wrap` ic
       genisligi 320px ekranda 288px'e iniyor. 78vw'de kart 250px olup
       84px'lik ok butcesiyle birlikte tasar, gorunum alani kucultulup kart
       YANLARDAN kirpilirdi. Hesap cila-spotlight testinde. */
    --spot-w: min(400px, 60vw);
    --spot-step: 0px;
  }

  .spotlight-slide:not(.is-active) {
    display: none;
  }

  .spot-actions {
    flex-wrap: wrap;
  }
}

@media (max-width: 420px) {
  .spotlight-arrow {
    width: 36px;
    height: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .spotlight-track,
  .spotlight-slide,
  .spot-btn {
    transition: none;
  }
}

/* ── Promo panel: bilgi kartlari ───────────────────────────────────────────
   Prototipten olculdu (Ana Sayfa v2, "Her sosyal hesap, otomatik pilotta"):
     ogeler cercevesiz/dolgusuz, satir yuksekligi 55px, ikon 32x32 r=10px,
     baslik 13.5px/700, izgara bosluğu 16px.
   Onceki hal cerceveli+dolgulu kutuydu; bolum 799px'ti, prototip 348px. */
.nexus-theme .sa-promo-minicard-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(var(--cl-accent), 0.1);
  border: 1px solid rgba(var(--cl-accent), 0.25);
  color: var(--cl-accent-text);
  font-size: 13px;
}

.nexus-theme .sa-promo-minicard-title {
  font-size: 13.5px;
  line-height: 1.25;
}

/* Ogeler arasi ince ayrac — prototipte kartlari cerceve degil bu ayiriyor.
   Yalnizca iki sutunlu duzende ve ilk sutunda; son satirda alt cizgi yok. */
@media (min-width: 640px) {
  .nexus-theme .sa-promo-minicards {
    column-gap: 0;
  }

  .nexus-theme .sa-promo-minicards > .sa-promo-minicard {
    padding-right: 1.25rem;
  }

  .nexus-theme .sa-promo-minicards > .sa-promo-minicard:nth-child(odd) {
    border-right: 1px solid var(--cl-border);
    margin-right: 1.25rem;
  }
}

/* Prototipte gorsel kart sag sutunla ayni yukseklikte; 4/5 dikey oran yalnizca
   tek sutuna dusen kucuk ekranlarda anlamli. */
@media (min-width: 1024px) {
  .nexus-theme .sa-promo-panel--media-cards .sa-promo-panel-mediacard {
    aspect-ratio: auto;
    height: 100%;
    min-height: 190px;
  }
}

/* ── Features / split-highlights ───────────────────────────────────────────
   Prototipten olculdu (Ana Sayfa v2, "Uctan uca premium hissettirir"):
     dis panel YOK; sol anlatim karti 577x369 (r=20, pad=30,
     border rgba(accent,.22), bg rgba(beyaz,.02)); sag satirlar 527x66
     (r=14, pad=14/18, border rgba(beyaz,.05), bg rgba(beyaz,.016)).
   Canlida cerceve ters yerdeydi: tek dis panel + cercevesiz satirlar. */
.nexus-theme .sa-features--split-highlights .sa-features-split {
  border: 0;
  background: none;
  box-shadow: none;
  padding: 0;
}

.nexus-theme .sa-features--split-highlights .sa-features-split__lead {
  border: var(--border-w) solid rgba(var(--cl-accent), 0.22);
  border-radius: var(--nx-radius-xl);
  background: rgba(var(--cl-t-primary), 0.02);
  padding: 30px;
}

.nexus-theme .sa-features--split-highlights .sa-features-item {
  border: var(--border-w) solid var(--cl-border);
  border-radius: var(--radius-card);
  background: rgba(var(--cl-t-primary), 0.016);
  padding: 14px 18px;
  transition: border-color 0.2s ease;
}

.nexus-theme .sa-features--split-highlights .sa-features-item:hover {
  border-color: rgba(var(--cl-accent), 0.35);
}

/* Navbar — genis ekranda menu kirpiliyordu (olculdu 2026-08-03, cheapest.cc):
   .nav-pills scrollWidth 561px, clientWidth 356px; son uc link (Reviews /
   Support / Status) `overflow: hidden` altinda kayboluyordu. Prototipte 7 link
   534px'e siğiyor cunku sag kontrol kumesi bizimkinden ~90px, sol blok ~64px
   dar. Menu prototiple ayni 7 baglantiya cekildi; kalan farki burada iki
   koldan kapatiyoruz. */
@media (min-width: 1280px) {
  .nexus-theme .nav-pills {
    flex-shrink: 0;
  }

  html[data-lang] .nexus-theme .nav-pills .sa-navbar-link,
  html .nexus-theme .nav-pills .sa-navbar-link {
    padding-left: 9px !important;
    padding-right: 9px !important;
  }
}

/* 1500px altinda "N online" rozeti gizlenir: sosyal kanit hos ama menunun
   kirpilmasina degmez. 1500 ustunde yer zaten var. */
@media (max-width: 1499px) {
  .nexus-theme .nexus-online-badge {
    display: none;
  }
}

/* Yapimci imzasi — footer telif satirinin devami. Sessiz durur, telif metnini
   bastirmaz; baglanti uzerine gelince accent'e doner. */
.nexus-theme .nexus-credit {
  white-space: nowrap;
}

.nexus-theme .nexus-credit-sep {
  margin: 0 0.35rem;
  opacity: 0.5;
}

.nexus-theme .nexus-credit-link {
  color: rgb(var(--cl-t-primary));
  font-weight: 600;
  transition: color 0.2s ease;
}

.nexus-theme .nexus-credit-link:hover {
  color: var(--nx-blue-bright);
}