/* =========================== CoolVPN — Hero + Navbar CSS Scope'lu, light/dark değişkenli, orb görünürlüğü fix + güvenli z-index =========================== */ /* 0) Light tema default değişkenleri */ :root { --app-bg: #f8fafc; --hero-dim: .30; --hero-dim-color: #dbeafe; /* açık mavi tonlu karartma */ --text-strong: #0f172a; /* slate-900 */ --text-muted: #475569; /* slate-600 */ --img-brightness: 1.02; } /* 0.b) Dark tema değişkenleri (toggle: ) */ html[data-theme="dark"] { --app-bg: #0a0f14; --hero-dim: 0.55; --hero-dim-color: #071521; --text-strong: #ffffff; --text-muted: #d1d5db; --img-brightness: 1.12; } /* 1) NAVBAR — cam görünüm */ .nav-glass{ background: linear-gradient(to bottom, rgba(255,255,255,.75), rgba(255,255,255,.65)); border-color: rgba(0,0,0,.06); backdrop-filter: saturate(140%) blur(14px); } html[data-theme="dark"] .nav-glass{ background: linear-gradient(to bottom, rgba(3,26,45,.82), rgba(3,26,45,.72)); border-color: rgba(255,255,255,.06); } /* 2) HERO — scope'lu */ .kv-hero { position: relative; width: 100%; min-height: 100vh; overflow: clip; isolation: isolate; /* yeni stacking context → orb/overlay sırası garanti */ --kv-text: var(--text-strong); --kv-muted: var(--text-muted); --kv-stripe-color: #fff; background: var(--app-bg); } /* Arka plan pattern (bulanık + invert) */ .kv-hero .kv-bg { position: absolute; inset: 0; z-index: -2; /* EN altta */ --kv-stripes: repeating-linear-gradient( 100deg, var(--kv-stripe-color) 0%, var(--kv-stripe-color) 7%, transparent 10%, transparent 12%, var(--kv-stripe-color) 16% ); --kv-rainbow: repeating-linear-gradient( 100deg, #60a5fa 10%, #e879f9 15%, #60a5fa 20%, #5eead4 25%, #60a5fa 30% ); background-image: var(--kv-stripes), var(--kv-rainbow); background-size: 300%, 200%; background-position: 50% 50%, 50% 50%; filter: blur(10px) invert(100%); mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%); } .kv-hero .kv-bg::after { content: ""; position: absolute; inset: 0; background-image: var(--kv-stripes), var(--kv-rainbow); background-size: 200%, 100%; animation: kv-smoothBg 60s linear infinite; background-attachment: fixed; mix-blend-mode: difference; } @keyframes kv-smoothBg { from { background-position: 50% 50%, 50% 50%; } to { background-position: 350% 50%, 350% 50%; } } /* Dim overlay — içerik üstüne çıkmasın */ .kv-hero::before{ content:""; position:absolute; inset:0; z-index: -1; /* bg’nin ÜSTÜ, orbların ALTINDA */ background: color-mix(in oklab, var(--hero-dim-color) 92%, black); opacity: var(--hero-dim, .35); mix-blend-mode: multiply; pointer-events: none; } /* ORBLAR — görünürlük & animasyon */ .kv-hero .kv-orbs { position:absolute; inset:0; z-index: 0; /* overlay’in ÜSTÜ, content’in ALTINDA */ pointer-events:none; } .kv-hero .kv-orb{ position:absolute; display:block; border-radius:9999px; filter: blur(36px); opacity:.48; will-change: transform; mix-blend-mode: normal; transition: opacity .3s ease, filter .3s ease; } /* Üst-sol */ .kv-hero .kv-orb--tl{ top:-120px; left:-120px; width:420px; height:420px; background: radial-gradient(60% 60% at 45% 45%, rgba(96, 165, 250, 0.88) 0%, rgba(96, 165, 250, 0.00) 72%); animation: kv-float-a 14s ease-in-out infinite alternate; } /* Alt-sağ */ .kv-hero .kv-orb--br{ right:-140px; bottom:-160px; width:560px; height:560px; background: radial-gradient(60% 60% at 55% 55%, rgba(167, 139, 250, 0.85) 0%, rgba(167, 139, 250, 0.00) 75%); animation: kv-float-b 16s ease-in-out infinite alternate; } /* Dark’ta yumuşat */ html[data-theme="dark"] .kv-hero .kv-orb{ opacity:.34; filter: blur(44px); } /* İçerik grid — ferah aralıklar */ .kv-hero .kv-content { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 6rem 1rem; display: grid; gap: 2.5rem; align-items: center; } @media (min-width:1024px){ .kv-hero .kv-content { grid-template-columns: 1fr 1fr; padding: 8rem 2rem; gap: 3rem; } } /* Başlık / paragraf — net kontrast */ .kv-hero h1, .kv-hero .kv-headline{ color: var(--kv-text); font-weight: 800; line-height: 1.1; letter-spacing: -0.015em; font-size: clamp(2.2rem, 2.2vw + 1.6rem, 3.4rem); text-wrap: balance; } .kv-hero p, .kv-hero .kv-tagline{ color: var(--kv-muted); font-size: clamp(1rem, .6vw + .9rem, 1.2rem); line-height: 1.6; margin: 0; } /* Fiyat bandı */ .kv-hero .kv-price-now{ color: var(--kv-text); font-weight: 800; letter-spacing:-0.01em; font-size: clamp(2.2rem, 1.4vw + 1.8rem, 3rem); } .kv-hero .kv-price-unit{ color: var(--kv-muted); font-weight:600; } .kv-hero .kv-price-old{ color: rgba(148,163,184,.9); } /* 2×2 Feature Grid — rahat boşluk */ .kv-hero .grid{ row-gap: 1.1rem; column-gap: 2.25rem; } .kv-hero .kv-feature{ color: var(--kv-text); font-weight: 600; } /* Feature ikon kapsülü */ .kv-hero .kv-cap{ height: 42px; width: 42px; border-radius: 12px; display:flex; align-items:center; justify-content:center; background: rgba(14,165,233,.14); box-shadow: inset 0 0 0 1px rgba(56,189,248,.28); } html[data-theme="dark"] .kv-hero .kv-cap{ background: rgba(14,165,233,.18); box-shadow: inset 0 0 0 1px rgba(125,211,252,.30); } /* Görsel — tema göre parlaklık + çerçeve */ .kv-hero .kv-figure img{ width: 100%; height: auto; max-height: 560px; object-fit: cover; border-radius: 20px; box-shadow: 0 20px 60px rgba(0,0,0,.25); outline: 1px solid rgba(255,255,255,.08); filter: brightness(var(--img-brightness, 1.06)); } /* Erişilebilirlik — hareket azaltma */ @media (prefers-reduced-motion: reduce){ .kv-hero .kv-bg::after { animation: none; } .kv-hero .kv-orb{ animation:none; } } /* Dark fallback (sadece .dark sınıfı kullanıyorsan) */ .dark .kv-hero { --kv-text:#fff; --kv-muted:#d1d5db; } /* Orb animasyonları */ @keyframes kv-float-a{ from{transform:translate(0,0)} to{transform:translate(10px,18px)} } @keyframes kv-float-b{ from{transform:translate(0,0)} to{transform:translate(-12px,-22px)} } /* === HERO renk/ikon hotfix (drop-in) =============================== */ /* 1) Tema bazlı net kontrast */ :root{ --text-strong: #0f172a; /* slate-900 */ --text-muted: #475569; /* slate-600 */ --icon-green: #059669; /* emerald-600 */ --cap-bg: rgba(16,185,129,.14); /* emerald-500/14% */ --cap-border: rgba(16,185,129,.30); --img-brightness: 1.02; } html[data-theme="dark"]{ --text-strong: #ffffff; --text-muted: #d1d5db; --icon-green: #34d399; /* emerald-400 (darka daha parlak) */ --cap-bg: rgba(16,185,129,.20); --cap-border: rgba(52,211,153,.32); --img-brightness: 1.08; --hero-dim: .42; /* 0.55 çok karartıyordu; okunurluk için düşürdük */ } /* 2) Genel tipografi kontrastını zorla */ .kv-hero .kv-headline, .kv-hero h1 { color: var(--text-strong) !important; } .kv-hero .kv-tagline, .kv-hero p { color: var(--text-muted) !important; } /* Fiyat & feature başlıkları */ .kv-hero .kv-price-now, .kv-hero .kv-feature { color: var(--text-strong) !important; } .kv-hero .kv-price-unit { color: var(--text-muted) !important; } .kv-hero .kv-price-old { color: rgba(100,116,139,.9) !important; } /* 3) İkonlar: her temada yeşil */ .kv-hero .kv-cap{ background: var(--cap-bg) !important; box-shadow: inset 0 0 0 1px var(--cap-border) !important; color: var(--icon-green) !important; /* currentColor kaynağı */ } /* İçteki SVG’leri garanti altına al */ .kv-hero .kv-cap svg{ width: 20px; height: 20px; color: var(--icon-green) !important; fill: currentColor !important; /* fill ikonlar */ stroke: none !important; } /* CTA ok ikonunun stroke’una da renk ver (stroke kullanan tek SVG bu) */ .kv-hero a svg{ color: var(--text-strong); stroke: currentColor !important; } /* 4) Görsel parlaklık (tema uyumlu) */ .kv-hero .kv-figure img{ filter: brightness(var(--img-brightness)) !important; } /* 5) Overlay biraz açıldı; text daha canlı */ .kv-hero::before{ opacity: var(--hero-dim, .30) !important; } /* 6) Olur da başka CSS z-index’i bozarsa: sıralamayı kilitle */ .kv-hero{ isolation:isolate; } .kv-hero .kv-bg { z-index: -2 !important; } .kv-hero::before { z-index: -1 !important; } .kv-hero .kv-orbs { z-index: 0 !important; } .kv-hero .kv-content{ z-index: 1 !important; } /* === KV Deal — dark/light uyumlu satış bandı ===================== */ :root{ --deal-bg: rgba(255,255,255,.55); --deal-ring: rgba(0,0,0,.08); --deal-bg-dark: rgba(3,26,45,.55); --deal-ring-dark: rgba(255,255,255,.10); --icon-green: #059669; /* emerald-600 */ --icon-green-dark: #34d399; /* emerald-400 */ } html[data-theme="dark"]{ --icon-green: var(--icon-green-dark); } .kv-deal{ display: grid; gap: 1rem; background: var(--deal-bg); border-radius: 16px; padding: 1rem; border: 1px solid var(--deal-ring); backdrop-filter: saturate(140%) blur(8px); } html[data-theme="dark"] .kv-deal{ background: var(--deal-bg-dark); border-color: var(--deal-ring-dark); } /* rozet */ .kv-pill{ display: inline-flex; align-items: center; gap: .5rem; width: fit-content; border-radius: 999px; padding: .4rem .7rem; font: 600 12px/1.1 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter; background: rgba(255,255,255,.7); color: #6b21a8; border: 1px solid rgba(0,0,0,.06); } .kv-pill .kv-pill-hot{ color: #a21caf; } /* fuchsia-700 */ .kv-pill .kv-pill-save{ color: #047857; } /* emerald-700 */ .kv-pill .kv-dot{ width: .35rem; height: .35rem; border-radius: 999px; background: rgba(100,116,139,.6); } html[data-theme="dark"] .kv-pill{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.10); color: #d946ef; } html[data-theme="dark"] .kv-pill .kv-pill-save{ color: #34d399; } /* fiyat satırı */ .kv-price-row{ display: flex; align-items: end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .kv-price-main{ display: flex; align-items: baseline; gap: .25rem; line-height: 1; color: var(--text-strong) !important; } .kv-currency{ font-weight: 800; font-size: clamp(1.6rem, 1.3vw + 1.2rem, 2rem); opacity: .9; } .kv-amount{ font-weight: 900; letter-spacing: -0.02em; font-size: clamp(2.6rem, 2vw + 2rem, 3.2rem); } .kv-unit{ margin-left: .35rem; font-weight: 600; color: var(--text-muted) !important; font-size: clamp(.95rem, .6vw + .8rem, 1.05rem); } .kv-price-compare{ display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .kv-old{ color: rgba(100,116,139,.9) !important; font-weight: 600; } .kv-badge-yr{ background: rgba(16,185,129,.12); color: var(--icon-green); border: 1px solid rgba(16,185,129,.28); padding: .25rem .55rem; border-radius: 999px; font-weight: 700; font-size: .85rem; } .kv-badge-yr .kv-badge-note{ font-weight: 600; opacity: .9; } html[data-theme="dark"] .kv-badge-yr{ background: rgba(16,185,129,.18); color: var(--icon-green); border-color: rgba(52,211,153,.32); } /* CTA’lar */ .kv-deal-ctas{ display: flex; flex-wrap: wrap; gap: .6rem; } /* mini güven satırı */ .kv-deal-bullets{ display: flex; flex-wrap: wrap; gap: .6rem 1rem; padding: 0; margin: 0; list-style: none; color: var(--text-muted) !important; font-weight: 600; font-size: .92rem; } .kv-deal-bullets li{ display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; } .kv-deal-bullets svg{ width: 16px; height: 16px; flex: none; fill: var(--icon-green); } /* hero içi spacing biraz daha ferah */ .kv-hero .space-y-7 > * + *{ margin-top: 1rem; } .kv-hero .space-y-9 > * + *{ margin-top: 1.15rem; }