/* ========================================================================== ArmaganFX — Tema 04 "adrevival · Sinema" Referans DNA: REFERANSLAR.md § 04 (adrevival.io, 02.09.2026 ölçümü) Bu dosya bağımsızdır. Başka temanın CSS'i import EDİLMEZ. ÖLÇÜM NOTU - Ölçülen değerler (font, H1/H2/H3, harf aralığı, zemin, metin, vurgu, köşe, geçiş) REFERANSLAR.md'den birebir alındı; yanlarında "[ölçüm]" yazıyor. - Referansta bulunmayan (bölüm boşluğu, ara boyutlar, yüzey tonları, kâr/zarar renkleri) değerler türetildi; yanlarında "[türetilmiş]" yazıyor. Uydurma ölçüm yok. - Kontrast oranları WCAG 2.1 formülüyle hesaplandı (bkz. her token yanındaki yorum). Hedef: normal metin 4.5:1 · büyük başlık ve kontrol kenarlığı 3:1. SAYFA AJANLARINA NOT — içine bunu koy: app.js etiketine "js" sınıfı ekler; JS çalışmazsa hiçbir şey gizlenmez. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400;0,500;0,600;1,400&display=swap'); /* ========================================================================== 1. TOKENLAR ========================================================================== */ :root{ /* --- Yüzeyler ------------------------------------------------------- */ --bg: #000000; /* [ölçüm] saf siyah — referansın zemini */ --surface: #0B0B0F; /* [türetilmiş] kart zemini · beyaz metin 19.64:1 */ --surface-2: #121218; /* [türetilmiş] iç kutu · beyaz metin 18.66:1 */ --surface-3: #1A1A22; /* [türetilmiş] hover/aktif · beyaz metin 17.29:1 */ --surface-inset: #08080B; /* [türetilmiş] gömük alan (tablo başlığı, input) */ /* --- Metin ---------------------------------------------------------- */ --txt: #FFFFFF; /* [ölçüm] birincil · siyahta 21.00:1 · #1A1A22 üstünde 17.29:1 */ --txt-2: #8C9EB2; /* [ölçüm] ikincil mavi-gri · siyahta 7.65:1 · #1A1A22 üstünde 6.30:1 */ --txt-3: #7A8B9E; /* [türetilmiş] üçüncül · siyahta 6.01:1 · #1A1A22 üstünde 4.95:1 */ --txt-on-accent: #FFFFFF; /* indigo dolgu üstünde 6.03:1 */ --txt-on-bright: #04121A; /* lime/camgöbeği dolgu üstünde en düşük 10.50:1 */ /* --- Vurgu ---------------------------------------------------------- */ --accent: #4B4BE9; /* [ölçüm] indigo — SADECE dolgu/kenarlık. Siyahta 3.48:1 (3:1 geçer, 4.5:1 GEÇMEZ → küçük metin olarak KULLANMA) */ --accent-hover: #3A3AD6; /* [türetilmiş] · beyaz metin 7.62:1 */ --accent-txt: #8A8AFF; /* [türetilmiş] indigo METİN tonu · siyahta 7.16:1 · #1A1A22 üstünde 5.89:1 */ --accent-soft: rgba(75,75,233,.14); /* dekoratif dolgu */ --accent-line: rgba(75,75,233,.42); /* dekoratif kenarlık */ --lime: #E1FF34; /* [ölçüm] "Most popular" rozeti · siyahta 18.56:1 · üstünde koyu mürekkep 16.77:1 */ /* --- Camgöbeği duyuru gradyanı (imza efekt 3) ------------------------ */ --cyan-1: #5EEAD4; /* [türetilmiş] koyu mürekkep üstünde 12.83:1 */ --cyan-2: #35E0F0; /* [türetilmiş] koyu mürekkep üstünde 11.81:1 */ --cyan-3: #22D3EE; /* [türetilmiş] koyu mürekkep üstünde 10.50:1 */ /* --- Kâr / zarar ----------------------------------------------------- */ --up: #4ADE80; /* [türetilmiş] kâr/yükseliş · siyahta 12.05:1 · #1A1A22 üstünde 9.92:1 */ --down: #FF8A7A; /* [türetilmiş] zarar/düşüş · siyahta 9.17:1 · #1A1A22 üstünde 7.55:1 */ --wait: #F0B429; /* [türetilmiş] bekliyor durumu · siyahta 11.27:1 · #1A1A22 üstünde 9.27:1 */ --up-soft: rgba(74,222,128,.12); --down-soft: rgba(255,138,122,.12); --wait-soft: rgba(240,180,41,.12); /* --- Fiyat kartı metalik tonları (referans: 3 farklı sıcak ton) ------ */ --metal-1: #E2A97A; /* [türetilmiş] bronz — aylık · siyahta 10.19:1 */ --metal-1-deep: #B8794A; /* dekoratif gradyan ucu */ --metal-2: #F0B429; /* [türetilmiş] altın — 3 aylık (en çok seçilen) · siyahta 11.27:1 */ --metal-2-deep: #E9A81B; /* dekoratif gradyan ucu */ --metal-3: #EFE2C8; /* [türetilmiş] şampanya — yıllık · siyahta 16.38:1 */ --metal-3-deep: #D8C4A0; /* dekoratif gradyan ucu */ /* --- Çizgiler -------------------------------------------------------- */ --line: rgba(255,255,255,.10); /* DEKORATİF ayraç — 1.21:1, metin/kontrol için KULLANMA */ --line-2: rgba(255,255,255,.16); /* DEKORATİF güçlü ayraç — 1.44:1 */ --border-ctl:#6A7686; /* KONTROL kenarlığı (input, buton, sekme) · siyahta 4.55:1 · #1A1A22 üstünde 3.74:1 → 3:1 kuralını her yüzeyde geçer */ --focus: #E1FF34; /* odak halkası (lime) · siyahta 18.56:1 */ /* --- Tipografi ölçeği (px) ------------------------------------------- */ --font: 'Instrument Sans','Schibsted Grotesk',system-ui,-apple-system,'Segoe UI',Arial,sans-serif; --fs-h1: 64px; /* [ölçüm] */ --fs-h2: 48px; /* [ölçüm] */ --fs-h3: 18px; /* [ölçüm] H3 = gövde-büyük */ --fs-body: 16px; /* [ölçüm] */ --fs-sm: 14px; /* [türetilmiş] */ --fs-xs: 12px; /* [türetilmiş] etiket/eyebrow */ --fs-num: 24px; /* [türetilmiş] KPI ara boyut */ --fs-num-lg:32px; /* [türetilmiş] KPI büyük sayı */ --fs-price:44px; /* [türetilmiş] fiyat rakamı */ --lh-h1: 1.1; /* [ölçüm] 70.4/64 */ --lh-h2: 1.1; /* [ölçüm] 52.8/48 */ --lh-h3: 1.5; /* [ölçüm] 27/18 */ --lh-body: 1.6; /* [türetilmiş] */ --lh-tight:1.2; /* [türetilmiş] sayılar */ --ls-h1: 0.52px; /* [ölçüm] POZİTİF — bu fontun karakteri, negatife çevirme */ --ls-h2: 0.52px; /* [ölçüm] */ --ls-h3: 0.585px; /* [ölçüm] */ --ls-base: 0.008em; /* [ölçüm] genel pozitif harf aralığı */ --ls-caps: 0.10em; /* [türetilmiş] eyebrow/etiket */ --w-reg: 400; --w-mid: 500; /* [ölçüm] başlıkların ağırlığı — bold DEĞİL */ --w-semi:600; /* --- Aralık ölçeği (4px tabanlı) ------------------------------------- */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; --s12:48px; --s14:56px; --s16:64px; --s20:80px; --s24:96px; --s30:120px; --s36:144px; --sec-y: 120px; /* [türetilmiş] bölüm dikey boşluğu */ --sec-y-lg: 144px; /* [türetilmiş] son CTA */ --hero-top: 128px; /* [türetilmiş] */ --hero-bot: 96px; /* [türetilmiş] */ --container: 1200px; /* [türetilmiş] */ --container-narrow: 860px; /* --- Köşe ------------------------------------------------------------ */ --r-4: 4px; /* [ölçüm] */ --r-8: 8px; /* [ölçüm] */ --r-16: 16px; /* [ölçüm] BASKIN yarıçap */ --r-pill: 999px;/* [türetilmiş] sadece nokta/avatar */ /* --- Hareket --------------------------------------------------------- */ --dur-1: .2s; /* [ölçüm] */ --dur-2: .3s; /* [ölçüm] */ --dur-3: .4s; /* [ölçüm] */ --dur-reveal: .85s; /* [ölçüm] blurin 0.85s */ --ease: cubic-bezier(.22,.61,.36,1); /* [ölçüm] */ --ease-soft: ease; /* --- İmza efekt ayarları (buradan kısılıp açılır) -------------------- */ --reveal-y: 14px; --reveal-blur: 8px; --reveal-ms: 70ms; /* kaydırma animasyonu kademesi (60–80ms bandı) */ --split-y: 14px; --split-blur: 8px; --split-ms-letter: 26ms; /* HARF modu: 60–80ms bandı harf başına çok yavaş kalıyor, bu yüzden harf kademesi 26ms; 70ms bandı KELİME/blok kademesinde */ --split-ms-word: 70ms; /* KELİME modu kademesi */ --halo-size: 900px; --halo-opacity: .30; --ticker-dur: 42s; } /* ========================================================================== 2. TEMEL / RESET ========================================================================== */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} /* Yatay taşma kilidi SADECE html'de. body'ye overflow verilirse body kaydırma kabı olur ve position:sticky nav çalışmaz — o tuzağa düşme. */ html{max-width:100%;overflow-x:hidden} body{ max-width:100%; margin:0; background:var(--bg); color:var(--txt); font-family:var(--font); font-size:var(--fs-body); font-weight:var(--w-reg); line-height:var(--lh-body); letter-spacing:var(--ls-base); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img,svg,video{max-width:100%;height:auto;display:block} button,input,select,textarea{font:inherit;letter-spacing:inherit;color:inherit} button{background:none;border:0;cursor:pointer} a{color:inherit;text-decoration:none} p{margin:0 0 var(--s4)} p:last-child{margin-bottom:0} ul,ol{margin:0;padding:0;list-style:none} table{border-collapse:collapse;width:100%} hr{border:0;border-top:1px solid var(--line);margin:var(--s10) 0} ::selection{background:var(--accent);color:var(--txt-on-accent)} .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } /* "İçeriğe geç" gibi .sr-only öğeler ODAKLANINCA görünür olmalı — kırpma odak halkasını da gizliyordu (demir kural 8). Öğe .btn olduğu için kenarlık ve 44px yükseklik hazır gelir; yeni renk yok. */ .sr-only:focus, .sr-only:focus-visible{ position:fixed;top:var(--s3);left:var(--s3);z-index:100; width:auto;height:auto;margin:0; overflow:visible;clip:auto;clip-path:none;white-space:normal; } /* --- Başlık hiyerarşisi ------------------------------------------------ */ h1,h2,h3,h4,h5,h6{margin:0;font-weight:var(--w-mid)} h1,.h1{font-size:var(--fs-h1);line-height:var(--lh-h1);letter-spacing:var(--ls-h1)} h2,.h2{font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2)} h3,.h3,.lead{font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3)} h4,.h4{font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-base);font-weight:var(--w-mid)} .lead{color:var(--txt-2);font-weight:var(--w-reg)} .muted{color:var(--txt-2)} .muted-3{color:var(--txt-3)} .small{font-size:var(--fs-sm);line-height:1.5} .xs{font-size:var(--fs-xs);line-height:1.45} /* Referansın karakteri POZİTİF harf aralığı; tabular-nums sütun hizasını zaten verdiği için aralık hizayı bozmaz (her rakama eşit uygulanır). */ .num{font-variant-numeric:tabular-nums;letter-spacing:var(--ls-base)} .up{color:var(--up)} .down{color:var(--down)} .eyebrow{ display:inline-block;font-size:var(--fs-xs);line-height:1;font-weight:var(--w-semi); letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--txt-2); margin-bottom:var(--s4); } /* --- Odak --------------------------------------------------------------- */ :focus{outline:none} :focus-visible{ outline:2px solid var(--focus); outline-offset:2px; border-radius:var(--r-4); } .card :focus-visible,.price :focus-visible{outline-offset:2px} /* ========================================================================== 3. YERLEŞİM ========================================================================== */ .container,.wrap{ width:100%;max-width:var(--container); margin-inline:auto;padding-inline:var(--s6); } .wrap--narrow{max-width:var(--container-narrow)} .sec{position:relative;padding-block:var(--sec-y)} .sec--tight{padding-block:var(--s20)} .sec--cta{padding-block:var(--sec-y-lg)} .sec--hero{padding-block:var(--hero-top) var(--hero-bot)} .sec--edge{border-top:1px solid var(--line)} .sec__head{max-width:720px;margin-bottom:var(--s12)} .sec__head--center{margin-inline:auto;text-align:center} .sec__head p{margin-top:var(--s4);color:var(--txt-2);font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3)} .grid{display:grid;gap:var(--s6)} .grid--2{grid-template-columns:repeat(2,minmax(0,1fr))} .grid--3{grid-template-columns:repeat(3,minmax(0,1fr))} .grid--4{grid-template-columns:repeat(4,minmax(0,1fr))} .row{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center} .row--between{justify-content:space-between} .row--end{justify-content:flex-end} .stack{display:flex;flex-direction:column;gap:var(--s4)} .mt-4{margin-top:var(--s4)} .mt-6{margin-top:var(--s6)} .mt-8{margin-top:var(--s8)} .mt-12{margin-top:var(--s12)} /* ========================================================================== 4. DUYURU ŞERİDİ (imza efekt 3 — camgöbeği gradyan) + KAYAN ŞERİT ========================================================================== */ .announce{ position:relative;z-index:60; background:linear-gradient(90deg,var(--cyan-1) 0%,var(--cyan-2) 48%,var(--cyan-3) 100%); color:var(--txt-on-bright); font-size:var(--fs-sm);font-weight:var(--w-mid); overflow:hidden; } .announce__inner{ max-width:var(--container);margin-inline:auto;padding:var(--s1) var(--s6); display:flex;align-items:center;justify-content:center;gap:var(--s3); min-height:44px;flex-wrap:wrap;text-align:center; } /* Şeritteki bağlantı 44px dokunma hedefi (demir kural 4). Bileşenin kendi kuralı — üç sayfanın