/* ═══════════════════════════════════════════════════════════════ prodverse-site.css — HALKA AÇIK SİTENİN TASARIM SİSTEMİ NEDEN VAR --------- Halka açık sayfaların ortak bir tasarım kararı yoktu. Ölçüldü (2026-08-31): landing.html tek başına 21 farklı font boyutu, 5 ayrı buton stili ve AYNI ANDA 14 hareket/efekt sistemi taşıyordu. Her bölüm kendi ölçeğini ve kendi efektini icat etmişti. Lüks görünümün tanımı KISITTIR: az sayıda karar, kusursuz tekrar. Bu dosya o kısıtı tanımlar. Halka açık her sayfa buna bağlanır ve BURADAKİ değerlerin dışına çıkmaz. YÜKLEME SIRASI: Tailwind CSS'inden (tw-*.css) ÖNCE. Tailwind utility'leri bu dosyadaki bileşen sınıflarını ezebilmeli. PANEL AYRI: panelin kendi token dosyası var (prodverse-tokens.css, kırmızı-turuncu aksan). Bu ikisi KARIŞTIRILMAZ — farklı ürün yüzeyleri, farklı paletler. ⚠ ALTIN İKİ YERDE: Tailwind'in `bg-primary/20` gibi opaklık varyantları var()'lı renklerle SESSİZCE bozulur, o yüzden altının ham hex'i scripts/tailwind-config/*.cjs içinde de duruyor. Ayrışmayı tests/site-tasarim-sistemi.test.mjs kırmızı yakar. (Aynı desen kart-stil.js ↔ panel-stitch-theme.css için de var.) ═══════════════════════════════════════════════════════════════ */ :root { /* ── Zemin ve yükseklik merdiveni ──────────────────────────── "Her şey glass" bir yükseklik merdiveni DEĞİLDİR: her şey yükseldiyse hiçbir şey yükselmemiştir. Cam artık yalnız nav pill'inde; kartlar bu opak katmanları kullanır. */ --pv-bg: #050505; --pv-yuzey-1: #0B0B0B; /* standart kart */ --pv-yuzey-2: #111111; /* öne çıkan kart (Pro) */ --pv-saclinesi: rgba(255,255,255,.08); --pv-kenar: rgba(255,255,255,.06); /* ── Metin ────────────────────────────────────────────────── #050505 üzerinde ölçüldü: --pv-metin 17,9:1 · --pv-metin-sonuk 7,0:1. İkisi de AA (4,5:1) eşiğinin çok üstünde. */ --pv-metin: #F2F0EE; --pv-metin-sonuk: rgba(242,240,238,.62); /* ── Altın: DEKORASYON DEĞİL, HİYERARŞİ İŞARETİ ───────────── Kural: ekran başına EN FAZLA bir altın DOLGU (birincil CTA). Altın metin yalnız eyebrow etiketlerinde ve tek "POPÜLER" rozetinde. Altın çizgi yalnız bölüm ayracında. Başka yerde yok. Kontrast: #D4AF37 üzerinde SİYAH metin 10,0:1 (beyaz olsaydı 2,1:1 — AA'nın çok altında). Bu yüzden dolgu butonun metni her zaman --pv-bg. */ --pv-altin: #D4AF37; --pv-altin-parlak: #F4C430; /* yalnız hover */ --pv-altin-sonuk: rgba(212,175,55,.14); /* ── Tipografi ────────────────────────────────────────────── 3 aile → 2. Hanken Grotesk kaldırıldı (bir font isteği eksi). Space Grotesk zaten 11 hukuki sayfada yüklüydü; yeni bağımlılık eklemeden keskin bir display sesi verdi. İkisi de latin-ext, yani Türkçe ğ/ı/İ/ş/ç/ö/ü tam. */ --pv-font-display: 'Space Grotesk', 'Plus Jakarta Sans', system-ui, sans-serif; --pv-font-govde: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; /* 21 boyut → 8, hepsi akışkan. Elle `md:` sınıfı ile boyut yönetmek bitti: clamp() 360px'ten 1920px'e kadar tek eğri. */ --pv-fs-display: clamp(2.75rem, 1.20rem + 5.2vw, 5rem); /* 44 → 80 */ --pv-fs-h1: clamp(2.25rem, 1.45rem + 3.4vw, 3.75rem); /* 36 → 60 */ --pv-fs-h2: clamp(1.75rem, 1.30rem + 2.0vw, 2.5rem); /* 28 → 40 */ --pv-fs-h3: clamp(1.25rem, 1.10rem + 0.7vw, 1.5rem); /* 20 → 24 */ --pv-fs-lg: 1.125rem; /* 18 */ --pv-fs-base: 1rem; /* 16 */ --pv-fs-sm: .875rem; /* 14 */ --pv-fs-xs: .75rem; /* 12 — caps etiketler YALNIZ burada */ /* ── Boşluk ───────────────────────────────────────────────── Boşluk lüksün en ucuz bileşenidir. Tek ölçek; p-10/p-12/p-24 + mb-8/10/12/16 karmaşası buna indirgenir. */ --pv-b-1: 4px; --pv-b-2: 8px; --pv-b-3: 12px; --pv-b-4: 16px; --pv-b-5: 24px; --pv-b-6: 32px; --pv-b-7: 48px; --pv-b-8: 64px; --pv-b-9: 96px; --pv-b-10:128px; --pv-b-11:160px; --pv-bolum-y: clamp(80px, 9vw, 144px); /* bölüm dikey ritmi */ --pv-kenar-x: clamp(20px, 5vw, 64px); /* sayfa yatay payı */ --pv-kap-en: 1280px; /* içerik kabı */ /* ── Biçim ve hareket ─────────────────────────────────────── TEK yumuşama eğrisi. Sayfada üç farklı easing varsa kullanıcı üç farklı ürün hissi alır. */ --pv-radius: 16px; --pv-radius-lg: 24px; --pv-egri: cubic-bezier(.16, 1, .3, 1); --pv-sure: .45s; } /* ── Temel ──────────────────────────────────────────────────── */ html { background: var(--pv-bg); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background-color: var(--pv-bg); color: var(--pv-metin); font-family: var(--pv-font-govde); font-size: var(--pv-fs-base); line-height: 1.6; overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Film tanesi: TEK kalan atmosfer katmanı. Statik (animasyon yok), .035 opaklıkta. Düz siyah zemine ucuza derinlik katıyor — 14 efektin temizliğinden sağ çıkan iki öğeden biri. */ body::before { content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .035; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } ::selection { background: var(--pv-altin); color: var(--pv-bg); } /* Klavye odağı: altın halka. Erişilebilirliğin pazarlık payı yok. */ :where(a, button, input, textarea, select, [tabindex]):focus-visible { outline: 2px solid var(--pv-altin); outline-offset: 3px; border-radius: 4px; } /* ── Düzen ilkelleri ────────────────────────────────────────── */ .pv-kap { max-width: var(--pv-kap-en); margin-inline: auto; padding-inline: var(--pv-kenar-x); } /* Bölümler YALNIZ üst dolgu taşır. Simetrik `padding-block` verildiğinde her bölüm sınırında iki dolgu üst üste biniyordu: 1440px'te hero ile "Ne yapar" arasında 240px, ızgara ile "Paketler" arasında 216px ölü boşluk ölçüldü. Bol boşluk lükstür, ÖLÇÜSÜZ boşluk savrukluktur — ikisi arasındaki fark ritmin tekrar etmesidir. Bölümler arası mesafe artık her yerde tam olarak --pv-bolum-y. Zemin farkı olan bir bölüm eklenirse .pv-bolum--kapanis ile alt dolgu ver. */ .pv-bolum { padding-block-start: var(--pv-bolum-y); } .pv-bolum--kapanis { padding-block-end: var(--pv-bolum-y); } .pv-ayrac { border: 0; border-top: 1px solid var(--pv-saclinesi); margin: 0; } /* ── Tipografi sınıfları ────────────────────────────────────── */ .pv-display, .pv-h1, .pv-h2, .pv-h3 { font-family: var(--pv-font-display); font-weight: 600; text-wrap: balance; /* dul satırları engeller */ } /* Cümle düzeni ŞART: 80px ALL CAPS bağırmaktır. Caps yalnız .pv-eyebrow'da (≤12px) kullanılır. */ .pv-display { font-size: var(--pv-fs-display); line-height: 1.06; letter-spacing: -.035em; font-weight: 700; } .pv-h1 { font-size: var(--pv-fs-h1); line-height: 1.10; letter-spacing: -.03em; font-weight: 700; } .pv-h2 { font-size: var(--pv-fs-h2); line-height: 1.14; letter-spacing: -.02em; } .pv-h3 { font-size: var(--pv-fs-h3); line-height: 1.25; letter-spacing: -.01em; } .pv-govde { font-size: var(--pv-fs-base); color: var(--pv-metin-sonuk); } .pv-govde-lg { font-size: var(--pv-fs-lg); color: var(--pv-metin-sonuk); line-height: 1.55; } /* Okunabilirlik sınırı: 62 karakterden geniş satır göz yorar. Hero paragrafı 274 karakterken bu sınır anlamsızdı; artık değil. */ .pv-olcu { max-width: 62ch; } /* Yoğun bağlantı listelerinde (footer yasal linkleri) dokunma hedefi. WCAG 2.5.8 "Target Size (Minimum)" AA seviyesi 24x24 CSS piksel ister; düz satır yüksekliğiyle bırakılan linkler 21px kalıyordu (ölçüldü, 360px). */ .pv-link-listesi a { display: inline-flex; align-items: center; min-height: 24px; } .pv-eyebrow { font-family: var(--pv-font-govde); font-size: var(--pv-fs-xs); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--pv-altin); } /* ── Butonlar: 5 stil → 2 ─────────────────────────────────── Dokunma hedefi her yerde ≥48px (WCAG 2.5.8). */ .pv-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--pv-b-2); min-height: 56px; padding-inline: var(--pv-b-6); border-radius: 999px; font-family: var(--pv-font-govde); font-size: 1.0625rem; /* 17 */ font-weight: 700; line-height: 1; text-align: center; cursor: pointer; border: 1px solid transparent; transition: background-color var(--pv-sure) var(--pv-egri), border-color var(--pv-sure) var(--pv-egri), color var(--pv-sure) var(--pv-egri), transform .2s var(--pv-egri); } .pv-btn:active { transform: scale(.98); } /* Birincil = altın dolgu. Sayfada ekran başına EN FAZLA BİR TANE. */ .pv-btn--birincil { background: var(--pv-altin); color: var(--pv-bg); } .pv-btn--birincil:hover { background: var(--pv-altin-parlak); } .pv-btn--hayalet { background: transparent; color: var(--pv-metin); border-color: var(--pv-saclinesi); } .pv-btn--hayalet:hover { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.18); } /* Hero ve final CTA. Emir'in "tuşlar büyütülsün" isteğinin karşılığı: 56px → 64px, yatay dolgu 32 → 48. */ .pv-btn--lg { min-height: 64px; padding-inline: var(--pv-b-7); font-size: 1.1875rem; } .pv-btn--tam { width: 100%; } /* ── Yüzeyler ───────────────────────────────────────────────── */ .pv-yuzey { background: var(--pv-yuzey-1); border: 1px solid var(--pv-kenar); border-radius: var(--pv-radius-lg); transition: border-color var(--pv-sure) var(--pv-egri), transform var(--pv-sure) var(--pv-egri); } /* Hover = kalan 3 hareket sisteminden biri. Tek jest: 4px yüksel + kenar aydınlan. İmleç takipli radial parlama KALDIRILDI. */ .pv-yuzey--etkilesimli:hover { border-color: rgba(255,255,255,.16); transform: translateY(-4px); } /* Öne çıkan kart: nabız animasyonu YERİNE sabit altın saç teli. Sürekli yanıp sönen bir kutu premium değil, dikkat dağıtıcıdır. */ .pv-yuzey--one { background: var(--pv-yuzey-2); border-color: rgba(212,175,55,.38); } /* ── Hareket: 14 sistem → 3 ───────────────────────────────── 1) Hero kare dizisi (tek imza jesti, landing.html içinde) 2) Scroll reveal (aşağıda) 3) Hover durumu (yukarıda) KALDIRILANLAR: 7 CSS yıldızı, 2 dönen Satürn halkası, orb drift, 3 kıvılcım, başlık shimmer'ı, rozet nefesi, featured-pulse, manyetik butonlar, imleç parlaması, parallax. */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--pv-egri), transform .7s var(--pv-egri); } .reveal.in-view { opacity: 1; transform: none; } .reveal-stagger > * { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--pv-egri), transform .6s var(--pv-egri); } .reveal-stagger.in-view > * { opacity: 1; transform: none; } .reveal-stagger.in-view > *:nth-child(2) { transition-delay: .07s; } .reveal-stagger.in-view > *:nth-child(3) { transition-delay: .14s; } .reveal-stagger.in-view > *:nth-child(4) { transition-delay: .21s; } /* Hero atmosferi: TEK, ANİMASYONSUZ altın ışıma. Eskiden `position:fixed` ile tüm sayfaya yayılıyor ve her bölümün arkasında sürekli kayıyordu — sayfanın baştan sona "meşgul" görünmesinin asıl sebebi buydu. Artık yalnız hero'ya demirli. */ .pv-hero-isima { position: absolute; top: -10%; left: 50%; transform: translateX(-50%); width: min(1100px, 130%); aspect-ratio: 1; background: radial-gradient(circle at 50% 50%, rgba(212,175,55,.22) 0%, rgba(212,175,55,.07) 38%, transparent 68%); filter: blur(80px); pointer-events: none; z-index: -1; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; } .pv-btn, .pv-yuzey { transition: none !important; } .pv-yuzey--etkilesimli:hover { transform: none; } }