/* ════════════════════════════════════════════════════════════
Vantis Audio — açılış
PALET: üç renk, üçü de bir şey ifade ediyor.
acid kontrol — dokunduğun şey
ember zaman — hız, ısı
violet mekân — oda, yankı
steel ölçüm — aletin sana söylediği
Tek arka plan dalgası sayfanın tamamında akıyor; bölümler onun
karakterini değiştiriyor, kendi ayrı animasyonları yok.
════════════════════════════════════════════════════════════ */
:root {
/* VANTIS AUDIO paleti (marka panosu): derin grafit zemin, grafit
panel, gümüş metin, asit lime aksan, beyaz vurgu. Mor-siyah gitti. */
--ink: #181b1b; /* deep graphite */
--ink2: #1c1f20;
--panel: #22262a;
--raised: #2a2d31; /* graphite (pano: panel) */
--line: #34383d;
--line2: #444951;
--text: #e1e4ea; /* silver */
--text2: #a8aeb6;
/* Hedefe çözdürüldü: #8f969e ink üstünde 5.6, panelde 4.9. */
--text3: #8f969e;
--acid: #d4ff00; /* acid lime — dolgu, iki temada da aynı */
--on-acid:#181b1b; /* dolgunun ÜSTÜNDEKİ yazı */
--acid-t: #d4ff00; /* metin/çizgi olarak aksan (açık temada koyulaşır) */
--acid-t2:#eaff80; /* aksanın açık ucu */
/* Pano beş renk: lime, iki grafit, gümüş, beyaz. Eski ember/violet
eksen renkleri markada YOK; ember → beyaz vurgu, violet → gümüş.
Token adları kaldı (tuvaller onları okuyor), anlamı değişti:
zaman = beyaz, mekân = gümüş, kaset = lime. */
--ember: #ffffff;
--violet: #c5ccd6;
/* Metin olarak kullanılan mor AYRI.
Ölçüldü: #7c4dff yazı olarak ink üstünde 4.19:1, panelde 3.99 —
ikisi de AA'nın altında. Acid'de bu ayrım zaten yapılmıştı
(--acid / --acid-t), mor atlanmıştı. Hedefe çözdürüldü:
#8c62ff → ink 5.10, panel 4.85, raised 4.65. */
--violet-t: #c5ccd6; /* ink üstünde 10.7 */
/* alfa gerektiğinde: rgba(var(--ember-rgb), .4) */
--ember-rgb: 255, 255, 255;
--acid-rgb: 212, 255, 0;
--sunken: rgba(0, 0, 0, .28); /* gömük yüzey — kod blokları */
--steel: #8b929b; /* ink 5.5, panel 4.85 */
--steel-hi: #c6ccd4;
/* Geniş gövdeli başlık yazısı: pano "extended / bold neo-grotesk".
Google Fonts'ta buna en yakın ücretsiz aile Unbounded. */
--genis: "Unbounded", Inter, system-ui, sans-serif;
/* ── BOŞLUK ÖLÇEĞİ ──────────────────────────────────────────
Sayılar 4'ün katı. Amaç estetik bir kural değil, TUTARLILIK:
ölçüldü, açılış sayfasında 49 farklı boşluk değeri vardı ve aynı
rolü oynayan altı bölüm altı ayrı dikey ritim kullanıyordu
(120/130, 120/130, 140/140, 140/150, 130/130, 130/140). Göz bunu
"özensiz" diye okur, nedenini söyleyemeden.
Yeni bir boşluk yazacaksan önce buradan bir adım seç. Ölçekte
karşılığı yoksa gerçekten optik bir sebebi vardır — o zaman
satırın yanına sebebini yaz. */
--u1: 4px; --u2: 8px; --u3: 12px; --u4: 16px;
--u5: 20px; --u6: 24px; --u8: 32px; --u10: 40px;
--u12: 48px; --u16: 64px; --u20: 80px;
/* Bölüm ritmi. Alt boşluk üstten bir adım fazla: bir sonraki bölümün
numarası, biten bölümün son satırına yapışmasın. */
--bolum-ust: 128px;
--bolum-alt: 136px;
/* Kutu iç boşluğu iki kademe: olağan kutu ve odak kutusu. */
--kutu: 24px;
--kutu-b: 32px;
/* ── KOLON IZGARASI ──────────────────────────────────────────
Ölçüldü: sayfada ON FARKLI içerik genişliği vardı
(1180/1120/921/861/760/661/620/550/530/403/340) ve iki farklı sol
kenar. Her yeni öge kendi genişliğini seçiyordu; künye çizgisi üç
ayrı uzunlukta tekrar ediyordu, yani motif tekrar ediyor ama
hiçbir şey ÖLÇMÜYORDU.
Sekiz kolon, 32 px oluk. Bu keyfi değil: mevcut ölçülerin çoğu
zaten bu ızgaraya 30 px'den yakındı (kart 550→544, bölüm sütunu
403→400, lede 530→544, arayüz çerçevesi 1120→1120). Yani sayfa
zaten bu ızgarayı arıyormuş; yapılan şey onu görünür kılmak.
Yeni bir blok eklerken genişliğini buradan seç. Ara bir sayı
gerekiyorsa gerçekten bir sebebi vardır — yaz. */
--ic: min(1120px, calc(100vw - 60px));
--oluk: 32px;
--kol: calc((var(--ic) - 7 * var(--oluk)) / 8);
--k2: calc(2 * var(--kol) + 1 * var(--oluk));
--k3: calc(3 * var(--kol) + 2 * var(--oluk));
--k4: calc(4 * var(--kol) + 3 * var(--oluk));
--k5: calc(5 * var(--kol) + 4 * var(--oluk));
--k6: calc(6 * var(--kol) + 5 * var(--oluk));
/* ── HAREKET ─────────────────────────────────────────────────
Ölçüldü: 63 geçişin 54'ü AYNI eğriyi kullanıyordu ama 31 FARKLI
süre vardı. Tam tersi olmalı — az sayıda niyetli süre, işine göre
birkaç eğri.
Bu sitenin hareket karakteri: SÖNÜMLÜ ALET TEPKİSİ. Gerçek bir
alette iğne oturur, düğmede sürtünme vardır, makara ağırdır.
Hiçbir şey zıplamaz, hiçbir şey hedefi aşmaz. Yay/bounce yok.
Süre BÜYÜKLÜKLE ölçekleniyor: rengi değişen küçük bir etiket ile
ekranın yarısını kat eden bir başlık aynı sürede hareket edemez.
0.18 sn'lik bir renk geçişine üstel eğri koymak, eğrinin
görünmediği ama hareketin ağırlaştığı bir aralıkta çalışmaktı. */
--t-anlik: 120ms; /* renk, opaklık — göz zar zor yakalıyor */
--t-ui: 200ms; /* arayüz durumu: hover, focus, küçük kayma */
--t-panel: 380ms; /* panel ve kart açılışı */
--t-giris: 760ms; /* bölüm girişleri */
--t-agir: 1100ms; /* başlık satırları — en uzun yol */
--ease: cubic-bezier(.16, 1, .3, 1); /* GİRİŞ: uzaktan gelip yumuşak oturur */
--ease-ui: cubic-bezier(.3, 0, .2, 1); /* küçük durum: çabuk başlar, oturur */
--ease-cik: cubic-bezier(.4, 0, .9, .55); /* ÇIKIŞ: hızlanarak gider */
--ease-io: cubic-bezier(.65, 0, .35, 1); /* simetrik gidiş-geliş */
--bg-rgb: 24, 27, 27;
--mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
--sans: Inter, -apple-system, "Segoe UI", system-ui, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body {
background: var(--ink);
color: var(--text);
font: 400 15px/1.6 var(--sans);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
::selection { background: var(--acid); color: var(--on-acid); }
/* ════════════ AÇILIŞ PERDESİ ════════════ */
#loader { position: fixed; inset: 0; z-index: 200; }
#loader .ld-top, #loader .ld-bot {
position: absolute; left: 0; right: 0; height: 50%;
overflow: hidden; background: var(--ink);
transition: transform var(--t-agir) var(--ease);
will-change: transform;
}
#loader .ld-top { top: 0; }
#loader .ld-bot { bottom: 0; }
#loader canvas { position: absolute; left: 0; width: 100%; height: 200%; }
#loader .ld-top canvas { top: 0; }
#loader .ld-bot canvas { bottom: 0; }
/* yırtılma: tam sessizlik hattından ikiye ayrılır */
#loader.tear .ld-top { transform: translateY(-100%); }
#loader.tear .ld-bot { transform: translateY(100%); }
#loader.gone { opacity: 0; transition: opacity .35s; pointer-events: none; }
.ld-mark {
position: absolute; inset: 0; z-index: 2;
display: grid; place-content: center; justify-items: center; gap: 14px;
pointer-events: none;
opacity: 0; transform: scale(.94);
transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.ld-mark.in { opacity: 1; transform: none; }
.ld-mark.out { opacity: 0; transform: scale(1.06); transition-duration: .45s; }
.ld-word {
display: flex; align-items: center; gap: .18em;
font: 700 clamp(34px, 7vw, 84px) var(--genis); letter-spacing: .08em; line-height: 1;
text-transform: uppercase;
}
.ld-word .mono { width: .9em; height: .9em; color: var(--acid); }
.ld-meta { font: 400 11px var(--mono); letter-spacing: .3em; color: var(--text3); }
/* ════════════ ODAK DIŞI ATMOSFER ════════════
Referans videonun açılışı bir fotoğraf: odak dışı, yumuşak, derin.
Vektör bir sayfada bunun karşılığı büyük ve keskin kenarı olmayan
renk alanları. filter:blur() KULLANMIYOR — radial-gradient'in kendi
yumuşak duruşu yeterli ve compositor'a blur maliyeti bindirmiyor.
Sadece transform animasyonu var, yani her kare GPU'da kalıyor. */
#atmos {
position: fixed; inset: 0; z-index: 0;
pointer-events: none; overflow: hidden;
contain: strict;
}
#atmos i {
position: absolute; display: block;
width: 58vmax; height: 58vmax; border-radius: 50%;
will-change: transform;
}
/* Atmosferin rengi bölümün rengini izliyor: dalga hangi renge geçtiyse
ortam ışığı da oraya gidiyor. Değeri kare döngüsü --ortam-* olarak
yazıyor (bkz. backdrop.js) — böylece arka plan tek bir bütün oluyor,
iki ayrı katman değil. */
#atmos .a1 {
left: -22vmax; top: -26vmax;
background: radial-gradient(circle at 50% 50%,
rgba(var(--ortam, 124 77 255), .30) 0%,
rgba(var(--ortam, 124 77 255), .11) 38%, transparent 68%);
transition: background 1.2s linear;
animation: drift1 64s var(--ease-io) infinite;
}
#atmos .a2 {
right: -30vmax; top: 18vh;
background: radial-gradient(circle at 50% 50%, rgba(255,77,46,.22) 0%, rgba(255,77,46,.08) 40%, transparent 70%);
animation: drift2 82s var(--ease-io) infinite;
}
/* Üçüncü blob kaldırıldı: her biri ekran boyutunda ayrı bir compositor
katmanı ve üçü birden, üstlerindeki video + tuval + perde + gren ile
birlikte entegre grafik kartını dolduruyordu. İki tanesi aynı işi
görüyor. */
@keyframes drift1 {
0%,100% { transform: translate3d(0,0,0) scale(1); }
50% { transform: translate3d(9vw, 7vh, 0) scale(1.16); }
}
@keyframes drift2 {
0%,100% { transform: translate3d(0,0,0) scale(1.08); }
50% { transform: translate3d(-11vw, -9vh, 0) scale(.92); }
}
@keyframes drift3 {
0%,100% { transform: translate3d(0,0,0) scale(1); }
50% { transform: translate3d(-7vw, -6vh, 0) scale(1.2); }
}
:root[data-theme="light"] #atmos .a1 {
/* Kâğıt üstünde aynı yoğunluk çok daha fazla görünüyor; ortam
rengi aynı ama şiddeti üçte bir. */
background: radial-gradient(circle at 50% 50%,
rgba(var(--ortam, 79 34 214), .11) 0%,
rgba(var(--ortam, 79 34 214), .04) 38%, transparent 68%);
}
:root[data-theme="light"] #atmos .a2 { background: radial-gradient(circle at 50% 50%, rgba(201,52,15,.18) 0%, rgba(201,52,15,.07) 40%, transparent 70%); }
/* ════════════ FİLM BANDI ════════════
Sayfanın üst şeridinde gerçek çekim. Kutu içine konmuş bir video
gibi durmasın diye üç şey yapıyor:
· alt kenarı maskeyle arka plana ERİYOR, çerçevesi yok
· doygunluğu düşürülüp koyulaştırılıyor — sitenin tek renkli
diline giriyor, ayrı bir medya gibi durmuyor
· üstünde gren katmanı da geçiyor, yani sayfayla aynı dokuda
Nav bunun üstünden geçiyor ve sayfanın tepesindeyken saydam;
kaydırınca kendi zeminine kavuşuyor. */
/* PLAKA 01. Film hero'nun zemini; eskiden 378 px'lik bir şeritti.
DEVİR TESLİM: görüntü yatayda %80'e doğru tükeniyor, kalan %20'yi
dalga alanı devralıyor — aynı yumuşaklıkla (backdrop.js `handover`
tam o şeritte dalgayı güçlendiriyor). İki katman yan yana durmuyor,
biri diğerine bırakıyor; derinlik hissi oradan. Dikeyde alt kenar
zemine eriyor. */
.filmband {
position: absolute; inset: 0 0 auto 0; z-index: 0;
/* ŞERİT, tam zemin değil: kullanıcının ekran görüntüsüyle ölçüldü —
nav dahil ~457 px, yani ekranın %46'sı. Alt kenar %58'den itibaren
zemine eriyor; başlığın ikinci satırı bandın sönme şeridine denk
geliyor, eskiden de öyleydi. Yüksekliği buradan ayarla. */
--plaka-h: clamp(320px, 46vh, 480px);
height: var(--plaka-h);
overflow: hidden; pointer-events: none;
-webkit-mask-image:
linear-gradient(to bottom, #000 0%, #000 58%, rgba(0,0,0,.5) 80%, transparent 100%),
linear-gradient(to right, #000 0%, #000 62%, rgba(0,0,0,.55) 74%, rgba(0,0,0,.18) 84%, transparent 93%);
-webkit-mask-composite: source-in;
mask-image:
linear-gradient(to bottom, #000 0%, #000 58%, rgba(0,0,0,.5) 80%, transparent 100%),
linear-gradient(to right, #000 0%, #000 62%, rgba(0,0,0,.55) 74%, rgba(0,0,0,.18) 84%, transparent 93%);
mask-composite: intersect;
}
/* Dar ekranda görüntü zaten dar; yatay tükeniş kenara itiliyor. */
@media (max-width: 760px) {
.filmband {
-webkit-mask-image:
linear-gradient(to bottom, #000 0%, #000 58%, rgba(0,0,0,.5) 80%, transparent 100%),
linear-gradient(to right, #000 0%, #000 76%, rgba(0,0,0,.4) 90%, transparent 100%);
mask-image:
linear-gradient(to bottom, #000 0%, #000 58%, rgba(0,0,0,.5) 80%, transparent 100%),
linear-gradient(to right, #000 0%, #000 76%, rgba(0,0,0,.4) 90%, transparent 100%);
}
}
.filmband video {
display: block; width: 100%; height: 100%;
object-fit: cover; object-position: 50% 50%;
/* filter YOK — derece ffmpeg ile dosyaya işlendi; CSS filtresi her
karede GPU'da ayrı bir geçiş demekti. */
}
/* Metin sütununun arkası koyu, sağ taraf görüntüye açık; nav'ın oturduğu
üst şerit biraz daha koyu. Renkli ışık (mor/turuncu) eskisi gibi. */
.filmband::after {
content: ''; position: absolute; inset: 0;
background:
linear-gradient(to right, rgba(var(--bg-rgb), .84) 0%, rgba(var(--bg-rgb), .56) 46%, rgba(var(--bg-rgb), .12) 100%),
linear-gradient(to bottom, rgba(var(--bg-rgb), .70) 0%, rgba(var(--bg-rgb), .18) 22%, transparent 55%, rgba(var(--bg-rgb), .5) 100%),
linear-gradient(102deg, rgba(212,255,0,.06), transparent 48%, rgba(225,228,234,.05));
}
:root[data-theme="light"] .filmband video { filter: brightness(.84); }
:root[data-theme="light"] .filmband::after {
background:
linear-gradient(to right, rgba(var(--bg-rgb), .88) 0%, rgba(var(--bg-rgb), .66) 46%, rgba(var(--bg-rgb), .3) 100%),
linear-gradient(to bottom,
rgba(var(--bg-rgb), .76) 0%,
rgba(var(--bg-rgb), .38) 13%,
rgba(var(--bg-rgb), .14) 42%,
rgba(var(--bg-rgb), .40) 78%,
rgba(var(--bg-rgb), .62) 100%),
linear-gradient(102deg, rgba(92,47,224,.10), transparent 48%, rgba(216,58,28,.08));
}
/* ════════════ GERİLEN BAŞLIK ════════════
"time." kelimesi sayfa aşağı indikçe yatayda geriliyor.
Harfi yatayda germek tipografide normalde kusurdur — glif bozulur.
Burada bilerek yapılıyor, çünkü ürünün yaptığı şey tam olarak bu:
aynı içeriği daha uzun bir zamana yaymak. Kelime, anlattığı şeyi
kendi üstünde gösteriyor.
Ölçü küçük tutuldu (%7): fark edilen ama "bozuk" denmeyen aralık.
Kaydırmaya bağlı, yani ana iş parçacığına hiç uğramıyor. */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.hero { view-timeline-name: --hero; view-timeline-axis: block; }
.hero-title .hot {
display: inline-block; transform-origin: 0 50%;
animation: gerilme linear both;
animation-timeline: --hero;
animation-range: cover 0% cover 100%;
}
@keyframes gerilme {
from { transform: scaleX(1); }
to { transform: scaleX(1.07); }
}
}
}
/* ════════════ GREN ════════════
Tek statik doku. Düz vektör yüzeyleri "basılmış" gibi gösteren şey bu;
animasyonu yok, blend modu yok — sadece çok düşük opaklıkta bir kaplama,
yani kaydırmaya hiçbir maliyeti yok. */
.grain {
position: fixed; inset: 0; z-index: 3;
pointer-events: none; opacity: .05;
background-image: url("data:image/svg+xml;utf8,\
");
background-size: 160px 160px;
}
:root[data-theme="light"] .grain { opacity: .05; }
@media (prefers-reduced-motion: reduce) {
#atmos i { animation: none; will-change: auto; }
}
/* ════════════ ARKA PLAN DALGASI ════════════ */
#backdrop { position: fixed; inset: 0; z-index: 0; pointer-events: none; transform: translateZ(0); }
.veil {
position: fixed; inset: 0; z-index: 1; pointer-events: none;
transform: translateZ(0);
background:
radial-gradient(88% 82% at 24% 52%, rgba(var(--bg-rgb), .96) 0%, rgba(var(--bg-rgb), .70) 42%, transparent 74%),
/* üstteki karartma .75'ten indi: film bandının kendi karartması
zaten var, ikisi üst üste binince görüntü tamamen kayboluyordu */
linear-gradient(to bottom, rgba(var(--bg-rgb), .42) 0%, transparent 22%, transparent 78%, rgba(var(--bg-rgb), .75) 100%);
}
/* ════════════ NAV ════════════ */
.nav {
position: fixed; inset: 0 0 auto 0; z-index: 40;
/* Panel bu yüksekliğin altından başlıyor; iki yerde ayrı yazılırsa
araya bir şerit sızıyor. */
--nav-h: 62px;
height: var(--nav-h);
display: flex; align-items: center; gap: 24px;
padding: 0 30px;
/* backdrop-filter YOK: altındaki dalga canvas'ı her karede değiştiği
için blur da her karede yeniden hesaplanıyordu — kaydırmadaki
takılmanın ana sebebi buydu. Yerine düz bir zemin. */
/* Sayfanın tepesinde saydam: altındaki film bandı görünsün.
Okunurluğu bandın kendi üst karartması sağlıyor. */
background: linear-gradient(to bottom, rgba(var(--bg-rgb), .52), rgba(var(--bg-rgb), .10));
border-bottom: 1px solid transparent;
transition: border-color var(--t-ui) var(--ease-ui), background var(--t-ui) var(--ease-ui);
/* will-change: background YOK — arka plan değişimi zaten yeniden
boyama gerektiriyor, ipucu bir şey kazandırmadan kalıcı katman
açıyordu. */
}
.nav.scrolled { border-bottom-color: var(--line); background: rgba(var(--bg-rgb), .97); }
.nav .logo {
display: inline-flex; align-items: center; gap: 10px;
color: var(--text); text-decoration: none;
}
/* Monogram: ters üçgen V, ortasından dikey negatif boşluk ("monolithic
node"). Lime; gümüş yazı yanında. */
.logo .mono { width: 22px; height: 22px; color: var(--acid); flex: none; }
.logo .wm {
font: 700 15px var(--genis); letter-spacing: .10em; text-transform: uppercase;
line-height: 1; display: flex; flex-direction: column; gap: 3px;
}
.logo .wm small { font: 500 8px var(--mono); letter-spacing: .42em; color: var(--text3); }
.nav .links { display: flex; gap: 1px; margin-left: 6px; }
/* Sadece bölüm bağlantıları — .enter butonu bu kuraldan etkilenmemeli */
.nav .links a {
color: var(--text3); text-decoration: none;
font: 500 10.5px var(--mono); letter-spacing: .05em; text-transform: uppercase;
padding: 6px 8px; border-radius: 6px; white-space: nowrap;
transition: color var(--t-ui) var(--ease-ui), background var(--t-ui) var(--ease-ui);
}
.nav .links a:hover { color: var(--text2); background: rgba(255,255,255,.045); }
.nav .links a.active { color: var(--on-acid); background: var(--acid); }
/* ── Belgeler menüsü ──
Bölüm bağlantıları gibi görünüyor ama bir sayfa değil bir GRUP
açıyor; ok işareti farkı söylüyor. Panel iki sütun: öğrenilecekler
ve yasal metinler. Her satırın altındaki cümle, tıklamadan önce
ne bulacağını söylüyor — FabFilter'ın plugin menüsündeki gibi. */
.menu { position: relative; display: flex; align-items: center; }
.menu-btn {
display: flex; align-items: center; gap: 5px;
background: transparent; border: 0; cursor: pointer;
color: var(--text3);
font: 500 10.5px var(--mono); letter-spacing: .05em; text-transform: uppercase;
padding: 6px 8px; border-radius: 6px; white-space: nowrap;
transition: color var(--t-ui) var(--ease-ui), background var(--t-ui) var(--ease-ui);
}
.menu-btn i {
width: 4.5px; height: 4.5px;
border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
transform: rotate(45deg) translate(-1px, -1px);
transition: transform .25s var(--ease);
}
.menu-btn:hover { color: var(--text2); background: rgba(255,255,255,.045); }
.menu.open .menu-btn { color: var(--text); background: rgba(255,255,255,.06); }
.menu.open .menu-btn i { transform: rotate(-135deg) translate(-2px, -2px); }
.menu-panel {
position: absolute; top: calc(100% + 14px); left: -10px; z-index: 60;
display: grid; grid-template-columns: 236px 236px; gap: 4px 10px;
padding: 16px; border-radius: 10px;
background: var(--raised); border: 1px solid var(--line2);
box-shadow: 0 22px 54px rgba(0,0,0,.5);
opacity: 0; visibility: hidden; transform: translateY(-7px);
transition: opacity var(--t-anlik) var(--ease-ui), transform .2s var(--ease), visibility 0s .2s;
}
.menu.open .menu-panel {
opacity: 1; visibility: visible; transform: none;
transition: opacity var(--t-anlik) var(--ease-ui), transform .2s var(--ease);
}
.menu-col { display: flex; flex-direction: column; }
.menu-h {
font: 500 9.5px var(--mono); letter-spacing: .16em; text-transform: uppercase;
color: var(--text3); padding: 4px 10px 10px;
}
.menu-panel a {
display: block; padding: 8px 10px; border-radius: 9px;
text-decoration: none; color: var(--text2);
transition: background var(--t-anlik) var(--ease-ui), color var(--t-anlik) var(--ease-ui);
}
.menu-panel a b { display: block; font: 500 13.5px var(--sans); color: var(--text); }
.menu-panel a em {
display: block; margin-top: 2px; font-style: normal;
font: 400 11.5px/1.45 var(--sans); color: var(--text3);
}
.menu-panel a:hover { background: rgba(255,255,255,.05); }
.menu-panel a:hover b { color: var(--acid-t); }
.nav .grow { flex: 1; }
.nav .enter { white-space: nowrap; }
/* Dokuz bağlantı her ekrana sığmıyor — 1150'nin altında bölüm
başlıkları düşüyor, ana duraklar kalıyor. */
@media (max-width: 1150px) {
.nav .links a[data-sec="time"],
.nav .links a[data-sec="space"],
.nav .links a[data-sec="tape"],
.nav .links a[data-sec="honesty"] { display: none; }
}
/* 900'ün altı TEK bir mobil mod. Önceden üç ayrı eşik vardı (1150,
900, 760) ve 760'ın altında üst çubukta hiç bağlantı kalmıyordu:
on bölüm ve beş belge yalnızca kaydırarak bulunabiliyordu. Artık
burada masaüstü gezinmesi kapanıyor ve yerini menü alıyor. */
@media (max-width: 900px) {
/* IZGARA ÇÖKÜYOR.
Sekiz kolon + sabit 32 px oluk dar ekranda anlamsız: 375 px'te
oluklar sütunları yiyor ve ölçüldü — lede 142 px'e düşüyordu,
yani okunmaz bir şerit. Bu genişliğin altında sayfa zaten tek
sütun (bölüm ızgarası flex'e, kartlar 1fr'ye geçiyor), o yüzden
bütün açıklıklar tam genişlik oluyor. */
:root {
--k2: 100%; --k3: 100%; --k4: 100%;
--k5: 100%; --k6: 100%; --oluk: 20px;
}
.nav .links, #docsMenu { display: none; }
/* Üst çubukta yer yok: logo + menü + CTA zaten 375 px'i dolduruyor.
Dil ve tema menünün içine taşınıyor (JS taşıyor, burada yalnızca
çubuk aralığı toparlanıyor). İkisi de sık kullanılan denetimler
değil; bir dokunuş uzakta olmaları kabul edilebilir, kesilmiş bir
düğme değil. */
.nav { gap: 14px; padding: 0 22px; }
}
@media (max-width: 560px) {
.menu-panel { grid-template-columns: 1fr; }
}
/* ── Menü düğmesi ──
İki çizgi; açıkken çarpıya dönüyor. Üç çizgili klasik ikon yerine
iki çizgi: çarpıya dönüşümü dürüst oluyor, üçüncü çizgi kaybolmuyor. */
.burger {
display: none; flex-direction: column; justify-content: center; gap: 5px;
width: 38px; height: 38px; padding: 0 9px;
background: transparent; border: 1px solid var(--line2); border-radius: 10px;
cursor: pointer; flex: none;
transition: border-color var(--t-ui) var(--ease-ui), background var(--t-ui) var(--ease-ui);
}
.burger i {
display: block; height: 1.5px; background: var(--text2); border-radius: 2px;
transition: transform .28s var(--ease), opacity var(--t-anlik) var(--ease-ui);
}
.burger:hover { border-color: var(--text3); }
.nav.menu-acik .burger { border-color: var(--text3); background: rgba(255,255,255,.06); }
.nav.menu-acik .burger i:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav.menu-acik .burger i:last-child { transform: translateY(-3.25px) rotate(-45deg); }
/* ── Panel ──
Üst çubuğun ALTINDAN açılıyor ve ekranın kalanını kaplıyor. Yarı
saydam bir katman değil: arkasındaki dalga akmaya devam ederse
okumak zorlaşıyor ve panel "geçici" hissettiriyor. */
.mobil-panel {
position: fixed; inset: var(--nav-h, 62px) 0 0 0; z-index: 39;
background: var(--ink);
overflow-y: auto; overscroll-behavior: contain;
opacity: 0; transform: translateY(-8px);
/* KAPANIRKEN hızlanan eğri, AÇILIRKEN yumuşayan: kapatmak bir
karar, açmak bir davet. */
transition: opacity var(--t-ui) var(--ease-cik), transform var(--t-ui) var(--ease-cik);
}
.nav.menu-acik .mobil-panel {
opacity: 1; transform: none;
transition: opacity var(--t-panel) var(--ease), transform var(--t-panel) var(--ease);
}
body.menu-kilit { overflow: hidden; }
.mobil-ic { padding: var(--kutu) var(--u5) var(--bolum-alt); display: flex; flex-direction: column; gap: var(--u8); }
.mobil-araclar {
display: flex; align-items: center; gap: var(--u3);
padding-top: var(--u5); margin-top: var(--u2);
border-top: 1px solid var(--line);
}
.mobil-h {
font: 500 9.5px var(--mono); letter-spacing: .18em; text-transform: uppercase;
color: var(--text3); padding: 0 10px 12px;
border-bottom: 1px solid var(--line); margin-bottom: 6px;
}
.mobil-ic a {
display: flex; align-items: baseline; gap: 12px;
padding: 13px 10px; border-radius: 10px;
text-decoration: none; color: var(--text2);
font: 500 17px var(--sans); letter-spacing: -.01em;
transition: background var(--t-anlik) var(--ease-ui), color var(--t-anlik) var(--ease-ui);
}
.mobil-ic a i {
font: 500 10px var(--mono); font-style: normal; color: var(--text3);
min-width: 18px; letter-spacing: .06em;
}
.mobil-ic a:active { background: rgba(255,255,255,.05); }
.mobil-ic a.on { color: var(--acid-t); }
.mobil-ic a.on i { color: var(--acid-t); }
:root[data-theme="light"] .nav.menu-acik .burger { background: rgba(23,21,15,.06); }
:root[data-theme="light"] .mobil-ic a:active { background: rgba(23,21,15,.05); }
/* Düğmeyi açan kural bileşenin ARDINDAN geliyor: aynı özgüllükte
olduğu için önce yazılırsa temel `display:none` onu eziyor. */
@media (max-width: 900px) { .burger { display: flex; } }
/* Hareket azaltma: panel yine açılıyor, sadece kaymıyor. */
@media (prefers-reduced-motion: reduce) {
.mobil-panel { transition: opacity .01s; transform: none; }
.burger i { transition: none; }
}
.enter {
/* flex: none — SIKISTIRILAMAZ.
Üst çubukta esnek kutu bu düğmeyi 110 px'lik doğal genişliğinden
48 px'e eziyordu ve parlama efekti için konan overflow:hidden
kendi yazısını kesiyordu: ekranda "Open" yazıyordu. Hata
gövdeye taşma olarak da görünmüyordu, çünkü body overflow-x'i
gizliyor — ölçüm bunu yakalamıyordu, ekran görüntüsü yakaladı. */
flex: none;
position: relative; overflow: hidden;
font: 600 12px var(--sans);
background: var(--acid); color: var(--on-acid);
border: none; border-radius: 6px; padding: 11px 20px;
text-decoration: none; cursor: pointer;
transition: transform .35s var(--ease), box-shadow var(--t-ui) var(--ease-ui);
}
.enter::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.5) 50%, transparent 80%);
transform: translateX(-120%);
transition: transform .75s var(--ease);
}
.enter:hover { transform: translateY(-2px); box-shadow: 0 10px 34px rgba(212,255,74,.28); }
.enter:hover::before { transform: translateX(120%); }
.progress {
position: fixed; top: 0; left: 0; height: 2px; z-index: 50; width: 0;
background: linear-gradient(90deg, var(--ember), var(--acid) 55%, var(--violet));
}
/* ════════════ ORTAK ════════════ */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 30px; }
/* ── BÖLÜM KÜNYESİ ───────────────────────────────────────────
Eskiden kısa bir çizgi + "02 · Mekân" yazıyordu; numara çevirinin
İÇİNDEYDİ, yani yapısal bir bilgi cümlenin içine gömülüydü.
Şimdi teknik bir çizimin bölüm künyesi gibi kuruluyor:
MEKÂN ──────────────────────────────────── 02
Ad solda, başlığın hizasında başlıyor; ince çizgi gözü taşıyor;
numara sağ uçta bitiyor. Sayfada daha önce hiç olmayan bir şeyi
getiriyor: her bölümün tepesinde YATAY BİR YAPI ÇİZGİSİ. Rakamlar
sabit genişlikli, yani alt alta geldiklerinde hizalanıyorlar —
ölçüm yapan bir alete yakışan detay.
Genişlik 520 px'de kesiliyor: 1180 px'lik kolonda uçtan uca
gerilirse ad ile numara birbirinden kopuyor. */
.kicker {
display: grid; grid-template-columns: auto 1fr auto;
align-items: center; gap: 14px;
width: 100%; max-width: var(--k3);
font: 500 10px var(--mono); letter-spacing: .24em; text-transform: uppercase;
color: var(--text3); margin-bottom: 22px;
}
.kicker > span { grid-column: 1; }
.kicker::before { content: ''; grid-column: 2; height: 1px; background: currentColor; opacity: .38; }
.kicker > i {
grid-column: 3; font-style: normal;
font-size: 11.5px; letter-spacing: .06em;
font-variant-numeric: tabular-nums; opacity: .8;
}
/* Numarasız künyeler (Duy, Arayüz, Neden) tek sütun: çizgi onlarda
da var ama sağ uç boş kalmıyor, ızgara kendini toparlıyor. */
.kicker:not(:has(> i)) { grid-template-columns: auto 1fr; }
.kicker.acid { color: var(--acid-t); }
.kicker.ember { color: var(--ember); }
.kicker.violet { color: var(--violet-t); }
.kicker.steel { color: var(--steel); }
h2 {
font: 500 clamp(24px, 3.2vw, 44px) var(--genis);
line-height: 1.12; letter-spacing: 0;
margin-bottom: 24px;
}
/* Başlığın ikinci satırı DÜZ AKSAN RENGİ.
Eskiden dokuz başlığın dokuzunda da gradyan vardı. Bir kere
yapıldığında etkileyici olan şey dokuz kere yapıldığında tik oluyor
ve sayfayı "üretilmiş" gösteriyor — göz kalıbı üçüncüde tanıyor.
Renk BİLGİ taşımaya devam ediyor (hangi eksendesin: ember=zaman,
violet=mekân, acid=kaset ve devamı); taşımadığı tek şey süs.
Ayrıca 300 ağırlıkta ince harflerde gradyan kontrastı düşürüyordu;
düz renk hem daha okunur hem daha kararlı.
Gradyan tek bir yerde kaldı: kapanış. Orada bir kez yapılınca
yeniden bir şey ifade ediyor — bitiş. */
h2 .g-ember { color: var(--ember); }
h2 .g-violet { color: var(--violet-t); }
h2 .g-acid { color: var(--acid-t); }
h2 .dim { color: var(--text3); }
/* ÜÇ KADEME. Ölçüldü: on üç bölümün dokuzu aynı 74 px'i kullanıyordu.
Boyut bölümün İŞİNE göre: .h-buyuk argüman/kanıt, h2 teklif,
.h-sessiz form. Ağırlık aynı (300) — eski kimlik. */
h2.h-buyuk { font-size: clamp(32px, 4.8vw, 66px); font-weight: 700; line-height: 1.04; }
.chapter h2.h-buyuk { font-size: clamp(28px, 3.4vw, 46px); }
h2.h-sessiz { font-size: clamp(20px, 2.2vw, 28px); }
/* İki satırlı başlıklarda vurgu RENKLE DEĞİL TONLA.
Renk artık yalnızca üç bölümde: zaman (ember), mekân (violet),
kaset (acid) — aletin üç ekseni. Kalan altı başlıkta ikinci satır
düz beyaz, birinci satır bir ton geride: göz yine ikinci satıra
düşüyor ("Hear it / FIRST.", "Take it into / YOUR DAW.") ama sayfa
dokuz farklı yerden bağırmıyor.
Ölçüldü: renkli başlık 9 → 3, gradyanlı başlık 9 → 1. */
h2 .soluk { color: var(--text2); }
/* Kapanışın tek jesti. */
.outro h2 .g-violet {
background: linear-gradient(96deg, var(--acid-t), var(--acid-t2) 45%, var(--violet-t));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.lede { font-size: 17.5px; font-weight: 400; color: var(--text2); max-width: var(--k4); }
.lede + .lede { margin-top: 15px; }
.lede b { color: var(--text); font-weight: 500; }
.note {
font: 400 12px/1.75 var(--mono); color: var(--text3);
border-left: 1px solid var(--line2); padding-left: 15px; margin-top: 28px; max-width: 46ch;
}
/* ── giriş hareketleri ── */
/* will-change yalnızca geçiş sürerken açık; bitince JS kaldırıyor.
Kalıcı bırakılınca 30 öğe 30 kalıcı katman oluyordu. */
.rise {
opacity: 0; transform: translateY(26px);
transition: opacity var(--t-giris) var(--ease), transform var(--t-giris) var(--ease);
}
/* Başlıklardaki blur GERİ ALINDI.
Kaydırırken her bölüm başlığı 1.15 sn'lik bir blur animasyonu
başlatıyordu ve blur, animasyon edilebilecek en pahalı özelliktir:
her karede yeniden rasterleme demek. Odak çekimi artık yalnızca
açılışta, tek bir öğede (bkz. body.booting) kalıyor. Satırların
perde arkasından yükselmesi zaten aynı hissi veriyor ve bedava. */
.rise.animating { will-change: opacity, transform; }
.rise.in { opacity: 1; transform: none; }
.rise.d1 { transition-delay: .09s }
.rise.d2 { transition-delay: .18s }
.rise.d3 { transition-delay: .27s }
.rise.d4 { transition-delay: .36s }
/* satır satır açılan başlık */
/* overflow:hidden çıkıntıları keser — padding ile aç, margin ile geri al
ki satır aralığı bozulmasın */
.reveal span { display: block; overflow: hidden; padding: .1em 0 .2em; margin: -.1em 0 -.2em; }
.reveal span > i {
display: block; font-style: normal;
transform: translateY(108%);
transition: transform 1.05s var(--ease);
}
.reveal.in span > i { transform: none; }
.reveal.in span:nth-child(2) > i { transition-delay: .1s }
.reveal.in span:nth-child(3) > i { transition-delay: .2s }
/* ════════════ AÇILIŞ ODAK ÇEKİMİ ════════════
Perde yırtıldığında hero odak dışından odağa geliyor — referans
videonun ilk yedi saniyesinin yaptığı hareket. Tek öğe, tek geçiş;
bittiğinde body.booting kalkıyor ve filtre DOM'dan çıkıyor. */
body.booting .hero .wrap,
body.booting .scrollcue { filter: blur(16px); opacity: .0; transform: scale(1.035); }
.hero .wrap, .scrollcue {
transition: filter 1.5s var(--ease), opacity 1.2s var(--ease), transform 1.6s var(--ease);
}
/* ════════════ HERO ════════════ */
/* Hero'nun sol kenarı altındaki bölümlerle AYNI olmalı.
Ölçüldü: hero içeriği 282 px'den, altındaki bölümler 153 px'den
başlıyordu — 130 px'lik bir kayma. Tasarlanmış bir değer değildi,
ızgara sütununun içeriğe göre boyutlanmasının yan etkisiydi.
Kazara hizasızlık en kötüsü: ifade etmeden özensiz görünüyor. */
.hero {
position: relative; z-index: 2;
min-height: 100svh;
display: grid;
padding-top: 62px;
overflow: hidden;
}
/* Başlık üstte, altyazı dipte, arada boşluk: plaka görünsün. */
.hero > .wrap {
width: 100%; position: relative; z-index: 2;
display: grid; grid-template-rows: auto 1fr auto;
min-height: calc(100svh - 62px);
padding-top: 12vh; padding-bottom: 7vh;
}
.hero-foot {
grid-row: 3;
display: flex; align-items: flex-end; justify-content: space-between;
gap: var(--u8); flex-wrap: wrap;
border-top: 1px solid var(--line2); padding-top: var(--u5);
max-width: var(--k6);
}
@media (max-width: 760px) { .hero-foot { flex-direction: column; align-items: flex-start; } }
/* Plaka künyesi: sağ üstte, nav'ın altında — "PLAKA ── 01". */
.plaka {
position: absolute; top: calc(62px + 22px); right: 30px; z-index: 3;
display: flex; align-items: baseline; gap: 12px;
font: 500 10px var(--mono); letter-spacing: .24em; text-transform: uppercase;
color: var(--text3);
}
.plaka::before { content: ''; width: 40px; height: 1px; background: var(--line2); align-self: center; }
.plaka i { font-style: normal; color: var(--text2); font-variant-numeric: tabular-nums; letter-spacing: .06em; }
@media (max-width: 900px) { .plaka { right: 22px; top: calc(62px + 14px); } }
/* Pano: geniş, ağır, büyük harf. Unbounded geniş olduğu için punto
Inter'in yarısı; üç satır yine ekranın yarısını alıyor. */
.hero-title {
max-width: var(--k6);
font: 700 clamp(30px, 5.6vw, 80px) var(--genis);
line-height: 1.02; letter-spacing: .01em; text-transform: uppercase;
}
.hero-title .hot { color: var(--acid-t); }
/* Negatif alan: lime disk + diske kırpılmış ink kopya.
Konum başlık kutusunun yüzdesi, çap vw ile ölçekli — ölçüldü, 375'te de
aynı harflerin üstünde duruyor. */
.hero-ad {
position: relative; align-self: start;
max-width: var(--k6);
/* Ölçü BAŞLIĞIN PUNTOSUNA bağlı, kutunun yüzdesine değil: kutu ekran
yüksekliğiyle uzuyor (hero ızgarasında 1fr), punto ise harflerle
birlikte ölçekleniyor. Yüzdeyle yazıldığında disk 1034 px'te harfin
üstündeyken 1440'ta yanına kayıyordu. */
font-size: clamp(30px, 5.6vw, 80px);
--disk-c: 1.55em; /* satır yüksekliği 1.02em — disk üstten ve alttan taşıyor */
--disk-x: 1.45em; /* "beyond" sözcüğünün 2-3. harfi */
--disk-y: 1.62em; /* ikinci satırın ortası */
/* Kaçıklık ve ölçek landing.js'ten yazılıyor: nefes + imleç.
Disk ile kopya AYNI üç değişkeni okuyor, o yüzden çember ile
kırpma hiçbir karede ayrışamıyor. */
--dx: 0px; --dy: 0px; --ds: 1;
}
.hero-disk {
position: absolute; z-index: 1;
left: var(--disk-x); top: var(--disk-y);
width: var(--disk-c); height: var(--disk-c);
border-radius: 50%; background: var(--acid);
/* Ortalama da taşıma da transform'da: kare başına yerleşim okuması
ya da yazması yok, hareket derleyici katmanında kalıyor. */
transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(var(--ds));
pointer-events: none;
}
/* NEGATİF ALAN VARSAYILAN OLARAK KAPALI.
Kopya ink renginde ve başlığın tam üstünde duruyor; kırpma herhangi
bir sebeple düşerse (tarayıcı bu clip-path yazımını çözemezse, bir
değişken geçersiz kalırsa) kopya başlığı kaplar ve SAYFANIN EN BÜYÜK
YAZISI GÖRÜNMEZ olur. Kullanıcının tarayıcısında tam bu oldu.
Artık landing.js iki şeyi doğrulamadan sınıf eklenmiyor: yazım
destekleniyor mu ve kopya orijinalin üstüne oturdu mu. Süs, içeriği
riske atamaz. */
.hero-disk, .hero-title.kopya { display: none; }
.hero-ad.disk-acik .hero-disk,
.hero-ad.disk-acik .hero-title.kopya { display: block; }
.hero-title.kopya {
position: absolute; inset: 0; z-index: 2;
color: var(--on-acid); pointer-events: none; user-select: none;
clip-path: circle(calc(var(--disk-c) / 2 * var(--ds))
at calc(var(--disk-x) + var(--dx)) calc(var(--disk-y) + var(--dy)));
}
.hero-title.kopya .hot { color: var(--on-acid); }
/* Üst yazı: POWER · PRECISION · CONTROL */
.hero-ust {
font: 500 10.5px var(--mono); letter-spacing: .32em; text-transform: uppercase;
color: var(--text3); margin-bottom: var(--u6);
}
.hero-sub { max-width: 40ch; font-size: 17px; color: var(--text2); }
.hero-sub b { color: var(--text); font-weight: 500; }
.hero-cta { margin-top: 36px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.ghost-link {
font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase;
color: var(--text3); text-decoration: none;
border-bottom: 1px solid var(--line2); padding-bottom: 3px;
transition: color var(--t-ui) var(--ease-ui), border-color var(--t-ui) var(--ease-ui);
}
.ghost-link:hover { color: var(--text); border-color: var(--acid-t); }
/* ── HERO ŞERİDİ ─────────────────────────────────────────────
Eskiden dört yuvarlak hap yan yana duruyordu — bir açılış
sayfasında görebileceğin en jenerik öge. Dördü de aynı biçimde,
aynı ağırlıkta, sol kolonun altına yığılmış; sayfanın sağ yarısı
ise tamamen boştu.
Şimdi bir film slate'i ya da teknik künye gibi: üstte ince bir
çizgi, solda güven ifadesi, sağ uçta SAYILAR. Bölüm künyelerindeki
(`MEKÂN ───── 02`) çizgi motifinin ikinci ölçekteki tekrarı — aynı
görsel dil iki farklı büyüklükte konuşuyor.
Ve kompozisyon nihayet genişliği kullanıyor: ağırlık sol üstte,
karşı ağırlık sağ altta. */
.hero-meta {
/* Şerit başlıkla AYNI kolon sayısında bitiyor (6): rakamlar
"time." harfinin sağ kenarıyla hizalanıyor. Izgara olmadan bu
hizayı elle tutturmak gerekiyordu ve ekran genişliği değişince
kayıyordu. */
max-width: var(--k6);
margin-top: var(--u12); padding-top: var(--u3);
border-top: 1px solid var(--line2);
display: flex; flex-wrap: wrap; align-items: baseline;
gap: var(--u3) var(--u8);
font: 400 10.5px var(--mono); letter-spacing: .13em; text-transform: uppercase;
color: var(--text3);
}
.tag { display: inline-flex; align-items: baseline; gap: 7px; }
.tag i { font-style: normal; color: var(--acid-t); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.tag.v i { color: var(--violet-t); }
.tag.e i { color: var(--ember); }
/* Sayısal etiketler sağ uca: şerit boyunca göz sola bakar, sonra
satırın sonunda ölçüyü bulur. */
.tag.e { margin-left: auto; }
@media (max-width: 760px) { .tag.e { margin-left: 0; } }
.scrollcue {
position: absolute; right: 36px; bottom: 32px; z-index: 3;
font: 400 10px var(--mono); letter-spacing: .22em; color: var(--text3);
display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.scrollcue .rail { width: 1px; height: 46px; background: linear-gradient(var(--line2), transparent); position: relative; overflow: hidden; }
.scrollcue .rail::after {
content: ''; position: absolute; left: 0; width: 1px; height: 15px; background: var(--acid-t);
animation: cue 2.2s var(--ease-io) infinite;
}
@keyframes cue { 0% { top: -15px } 62%,100% { top: 46px } }
@media (max-width: 900px) { .scrollcue { display: none } }
/* ════════════ SABİTLENEN BÖLÜMLER ════════════ */
.chapter { position: relative; z-index: 2; }
.chapter .sticky {
position: sticky; top: 0; height: 100svh;
/* Metin 3 kolon, sahne 5 kolon, arada bir oluk — bölüm sütunu da
sayfanın geri kalanıyla aynı ızgaradan. Önce %36 idi ve 403 px
veriyordu: ızgaraya 3 px uzak, yani "neredeyse" hizalı, ki en
rahatsız edici hizasızlık türü budur. */
display: grid; grid-template-columns: var(--k3) 1fr;
align-items: center; gap: var(--oluk);
max-width: 1180px; margin: 0 auto; padding: 0 30px;
}
/* Sahne bir ŞEKİL: üstte künye (ŞEK. 02 · MEKÂN), altında tuval. Üç
bölüm tuvali aynı kromayı paylaşıyor. Künye tuvalin İÇİNE değil
ÜSTÜNE: mekân tuvali sol üst köşeyi zaten kullanıyor. */
.chapter .stage {
position: relative; height: 72vh; min-width: 0;
display: grid; grid-template-rows: auto 1fr;
}
.chapter canvas { width: 100%; height: 100%; min-height: 0; display: block; }
.sekil {
display: flex; align-items: baseline; gap: 12px;
font: 500 10px var(--mono); letter-spacing: .22em; text-transform: uppercase;
color: var(--text3); padding-bottom: 10px; margin-bottom: 12px;
border-bottom: 1px solid var(--line);
}
.sekil i { font-style: normal; color: var(--text2); font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.sekil span:last-child { margin-left: auto; color: var(--text3); }
.spacer-160 { height: 160vh; }
/* ════════════ KAYDIRMAYA BAĞLI GEÇİŞLER ════════════
Bunlar JavaScript'e HİÇ uğramıyor: `animation-timeline: view()` ile
tarayıcının kendi kaydırma zaman çizelgesine bağlılar, yani ana iş
parçacığı meşgulken bile akmaya devam ediyorlar. Kaydırırken hiçbir
kare kaybı hissedilmemesinin sebebi bu — hesabı yapan biz değiliz.
Bölümler sticky olduğu için zaman çizelgesi BÖLÜMÜN kendisine
bağlanıp içine adıyla veriliyor (view-timeline-name); sticky panel
yerinde dururken bölüm kayıyor, hareket oradan geliyor.
Desteklemeyen tarayıcıda hiçbir şey olmuyor: bölümler zaten
IntersectionObserver ile açılıyor, bu yalnızca üstüne katman. */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.chapter { view-timeline-name: --bolum; view-timeline-axis: block; }
/* Derinlik: görsel sütun metinden farklı hızda sürükleniyor.
İki katmanın farklı hızda gitmesi, gözün mesafe olarak okuduğu
tek şeydir — parallax'ın tamamı budur. */
.chapter .stage {
animation: bolumSurukle linear both;
animation-timeline: --bolum;
animation-range: entry 0% exit 100%;
/* will-change YOK: kaydırmaya bağlı animasyon zaten gerektiğinde
katman açıyor. Kalıcı ipucu, ekran dışındaki bölümleri de
katman yapıyordu — bu dersi bir kez almıştık. */
}
@keyframes bolumSurukle {
from { transform: translate3d(0, 4.5vh, 0) scale(.985); }
to { transform: translate3d(0, -4.5vh, 0) scale(1.015); }
}
/* Metin sütunu ters yöne, daha az. */
.chapter .sticky > :first-child {
animation: metinSurukle linear both;
animation-timeline: --bolum;
animation-range: entry 0% exit 100%;
}
@keyframes metinSurukle {
from { transform: translate3d(0, -1.6vh, 0); }
to { transform: translate3d(0, 1.6vh, 0); }
}
/* EK YERİ — bölüm sınırından geçen ince çizgi.
Kasette iki parçanın birleştiği yere ek denir; burada da bir
bölüm bitip diğeri başlıyor. Soldan sağa açılıp söner. */
.chapter::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--acid-t), transparent);
opacity: 0; transform: scaleX(.2); transform-origin: 18% 50%;
animation: ekYeri linear both;
animation-timeline: --bolum;
animation-range: entry 0% entry 100%;
}
@keyframes ekYeri {
0% { opacity: 0; transform: scaleX(.2); }
45% { opacity: .55; transform: scaleX(1); }
100% { opacity: 0; transform: scaleX(1); }
}
}
}
.spacer-120 { height: 120vh; }
.readout {
margin-top: 28px; font: 400 12px/2 var(--mono);
border-top: 1px solid var(--line); padding-top: 15px; max-width: var(--k3);
}
.readout div { display: flex; justify-content: space-between; gap: 16px; }
.readout span:first-child { color: var(--text3); }
.readout span:last-child { color: var(--steel-hi); font-variant-numeric: tabular-nums; }
.readout .hi span:last-child { color: var(--acid-t); }
.readout .hi.e span:last-child { color: var(--ember); }
.readout .hi.v span:last-child { color: var(--violet-t); }
/* Sürükleme ipucu. Bir etkileşim keşfedilmiyorsa yok demektir; ama
ipucu da bağırmamalı — bir kez okunup unutulacak bir satır. */
.ipucu {
display: flex; align-items: center; gap: 9px;
margin-top: var(--u4);
font: 400 11px var(--mono); letter-spacing: .06em;
color: var(--text3);
}
.ipucu i { font-style: normal; color: var(--violet-t); font-size: 13px; }
@media (pointer: coarse) { .ipucu i::after { content: ''; } }
/* Tutamak katmanı tuvalin üstünde; kendisi tıklama almıyor, yalnızca
iki düğme alıyor. Böylece tuvalin geri kalanında sayfa normal
kaydırılıyor — 309 px'lik bir tuval kaydırma tuzağı olmamalı. */
.oda-tutamak-kat { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.oda-tutamak {
position: absolute; top: 0; left: 0;
width: 44px; height: 44px; /* dokunma hedefi; görünen nokta tuvalde */
padding: 0; border: 0; background: transparent;
border-radius: 50%; cursor: grab;
pointer-events: auto; touch-action: none;
}
.oda-tutamak:active { cursor: grabbing; }
.oda-tutamak:focus-visible {
outline: 2px solid var(--violet-t); outline-offset: -6px; border-radius: 50%;
}
/* ════════════ DOĞRULUK ════════════ */
.honesty {
position: relative; z-index: 2;
padding: var(--bolum-ust) 0 var(--bolum-alt); background: var(--ink2);
border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--oluk); margin-top: var(--u12); }
.card {
border: 1px solid var(--line); border-radius: 10px;
background: var(--panel); padding: var(--kutu);
transition: transform .5s var(--ease), border-color .5s var(--ease);
}
.card:hover { transform: translateY(-4px); }
/* Kenarlık ve dış ışıma bölüm görününce güçleniyor: iki kart
birbirinden renk olarak ayrılsın, ama sayfa dururken bağırmasın. */
.card.bad { border-color: rgba(var(--ember-rgb), .30); }
.card.good { border-color: rgba(var(--acid-rgb), .32); }
.card { transition: transform .5s var(--ease), border-color .8s var(--ease), box-shadow .9s var(--ease); }
.honesty.lit .card.bad {
border-color: rgba(var(--ember-rgb), .46);
box-shadow: 0 0 44px -20px rgba(var(--ember-rgb), .85);
}
.honesty.lit .card.good {
border-color: rgba(var(--acid-rgb), .48);
box-shadow: 0 0 44px -20px rgba(var(--acid-rgb), .7);
}
.card h3 {
font: 500 10px var(--mono); letter-spacing: .18em; text-transform: uppercase;
color: var(--text3); margin-bottom: 18px; font-weight: 500;
}
.card.bad h3 { color: var(--ember); }
.card.good h3 { color: var(--acid-t); }
.card pre { font: 400 12px/1.95 var(--mono); color: var(--steel); white-space: pre-wrap; margin-bottom: 18px; }
.card .verdict { font-size: 13.5px; color: var(--text2); }
.balance { margin: 20px 0 15px; }
.balance-track { height: 2px; background: var(--line2); position: relative; }
.balance-mid { position: absolute; left: 50%; top: -4px; width: 1px; height: 10px; background: var(--line2); }
.balance-dot {
position: absolute; top: -5px; width: 12px; height: 12px; border-radius: 50%;
transform: translateX(-50%); transition: left 1.3s var(--ease);
}
.bad .balance-dot { background: var(--ember); box-shadow: 0 0 18px rgba(255,77,46,.5); }
.good .balance-dot { background: var(--acid); box-shadow: 0 0 18px rgba(212,255,74,.45); }
.balance-lab { display: flex; justify-content: space-between; font: 400 10px var(--mono); color: var(--text3); margin-top: 9px; }
/* Petek dokusu — bölümün boş sağ yarısı.
Tek seferde üretilen bir SVG; kare döngüsünde maliyeti yok.
Maske sağ üstten sola doğru söndürüyor ki yazının altına girmesin. */
.honesty { overflow: hidden; }
.hexfield {
position: absolute; top: 0; right: 0; bottom: 0;
width: min(780px, 64%);
color: var(--steel); pointer-events: none;
-webkit-mask-image: radial-gradient(112% 86% at 100% 14%, #000 0%, rgba(0,0,0,.45) 42%, transparent 74%);
mask-image: radial-gradient(112% 86% at 100% 14%, #000 0%, rgba(0,0,0,.45) 42%, transparent 74%);
}
.hexfield svg { display: block; width: 100%; height: 100%; }
.hexfield path { fill: none; stroke: currentColor; stroke-width: 1; opacity: .13; }
.hexfield path.w { stroke-width: 1.1; opacity: .30; }
/* Kart başlığı: solda ad, sağda göstergenin kendisi. */
.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.card-top h3 { margin-bottom: 18px; }
/* ── L/R seviye göstergesi ──
Geometri meter.js'ten geliyor (--seg-w / --seg-gap / --lab-w):
0 dB işaretinin yeri oradan hesaplanıyor, burada tekrar edilmiyor. */
.meter { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.m-rows { position: relative; display: flex; flex-direction: column; gap: 3px; padding-bottom: 11px; }
.m-row { display: flex; align-items: center; }
.m-row b { width: var(--lab-w); font: 500 8.5px var(--mono); color: var(--text3); }
.m-segs { display: flex; gap: var(--seg-gap); }
.m-segs i {
width: var(--seg-w); height: 9px; border-radius: 1px;
background: var(--line2); opacity: .55;
transition: background .55s var(--ease) var(--d), box-shadow .55s var(--ease) var(--d), opacity .55s var(--ease) var(--d);
}
/* 0 dB işareti: iki kartta da AYNI yerde. Kartların karşılaştırılabilir
olmasını sağlayan tek şey bu — altındaki rakam da onun için var. */
.m-zero { position: absolute; top: -4px; bottom: 11px; width: 1px; background: var(--line2); }
.m-zero::after {
content: '0'; position: absolute; top: 100%; left: 50%;
transform: translateX(-50%); padding-top: 2px;
font: 400 7.5px var(--mono); color: var(--text3);
}
.m-read {
font: 500 9.5px var(--mono); letter-spacing: .07em; color: var(--text3);
font-variant-numeric: tabular-nums;
transition: color .6s var(--ease) .35s;
}
/* Bölüm görününce yanıyor. Sınıfı IntersectionObserver koyuyor;
dengedeki nokta da aynı anda yerine kayıyor. */
.honesty.lit .m-segs i.on { opacity: 1; }
.honesty.lit .bad .m-segs i.on { background: rgba(var(--ember-rgb), .40); }
.honesty.lit .bad .m-segs i.on.over,
.honesty.lit .bad .m-segs i.on.tip {
background: var(--ember); box-shadow: 0 0 7px rgba(var(--ember-rgb), .7);
}
.honesty.lit .good .m-segs i.on { background: rgba(var(--acid-rgb), .38); }
.honesty.lit .good .m-segs i.on.tip {
background: var(--acid); box-shadow: 0 0 7px rgba(var(--acid-rgb), .6);
}
.honesty.lit .bad .m-read { color: var(--ember); }
.honesty.lit .good .m-read { color: var(--acid-t); }
/* Kartlara yükseklik: üst köşeden gelen çok hafif bir ışıma. */
.card { position: relative; overflow: hidden; }
.card::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
opacity: 0; transition: opacity .9s var(--ease);
}
.card.bad::before { background: radial-gradient(115% 76% at 88% -14%, rgba(var(--ember-rgb), .17), transparent 60%); }
.card.good::before { background: radial-gradient(115% 76% at 88% -14%, rgba(var(--acid-rgb), .14), transparent 60%); }
.honesty.lit .card::before { opacity: 1; }
.card > * { position: relative; }
.card pre {
background: var(--sunken); border-left: 2px solid var(--line2);
padding: 11px 13px; border-radius: 0 6px 6px 0;
}
/* ════════════ MODLAR ════════════ */
.modes { position: relative; z-index: 2; padding: var(--bolum-ust) 0 var(--bolum-alt); }
.modes-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.mode-rail {
margin-top: 50px; display: flex; gap: 22px;
overflow-x: auto; scroll-snap-type: x mandatory;
padding: 6px 30px 28px max(30px, calc(50% - 560px));
/* scroll-padding OLMADAN: zorunlu yapışma ilk kartı kabın soluna
hizalıyor ve soldaki payı yiyordu — sayfa açılır açılmaz
scrollLeft 153 px'e atlıyor, ilk kart başlığın hizasından
kayıyordu. Yapışma noktası payın bittiği yerden başlasın. */
scroll-padding-left: max(30px, calc(50% - 560px));
}
/* Özel değişkenler @property ile tanımlanmadan geçiş yapmıyor —
tarayıcı onları tür bilmediği için "hesaplanamaz" sayıyor.
Desteklemeyen tarayıcıda sönme anında değişiyor, kaybolmuyor. */
@property --sol { syntax: ''; inherits: false; initial-value: 0px; }
@property --sag { syntax: ''; inherits: false; initial-value: 0px; }
/* Ray yatayda kayıyor ama bunu söyleyen tek şey ince bir kaydırma
çubuğuydu. Kenarlardaki sönme "burada devam ediyor" diyor; iki uçta
da kapanıyor ki sonuna gelince yalan söylemesin.
Maske RAYIN ÜSTÜNDE DEĞİL, sarmalayıcıda. Ray 4753 px genişliğinde
bir kaydırma kabı; maskeyi ona verince tarayıcı bütün genişliği tek
katmana rasterize ediyor (~6 MB doku) ve bölüme ilk gelişte kare
105 ms'ye çıkıyordu. Ölçüldü: maske sarmalayıcıya taşınınca aynı
aralıkta en uzun kare 105.7 → 14.2 ms, 33 ms'i aşan kare 2 → 0.
Sarmalayıcı ekran genişliğinde, dolayısıyla katman da öyle. */
.rail-sar {
--sol: 0px; --sag: 64px;
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--sol), #000 calc(100% - var(--sag)), transparent 100%);
mask-image: linear-gradient(to right, transparent 0, #000 var(--sol), #000 calc(100% - var(--sag)), transparent 100%);
transition: --sol .3s, --sag .3s;
}
.rail-sar.uc-sol { --sol: 64px; }
.rail-sar.uc-sag { --sag: 0px; }
.mode-rail::-webkit-scrollbar { height: 6px }
.mode-rail::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 3px }
.mode {
flex: none; width: 306px; scroll-snap-align: start;
border: 1px solid var(--line); border-radius: 10px;
background: var(--panel); padding: var(--kutu);
cursor: pointer; text-align: left; color: inherit; text-decoration: none;
transition: border-color .45s var(--ease), transform .45s var(--ease), background .45s var(--ease);
}
.mode:hover { border-color: var(--line2); transform: translateY(-5px); background: var(--raised); }
.mode .idx { font: 400 10px var(--mono); color: var(--text3); }
.mode .name { font-size: 21px; letter-spacing: -.025em; margin: 11px 0 5px; font-weight: 500; }
.mode .why { font: 400 11px/1.5 var(--mono); color: var(--steel); min-height: 34px; }
.mode canvas { width: 100%; height: 56px; margin: 15px 0 13px }
.mode .rows { font: 400 11px/1.9 var(--mono); border-top: 1px solid var(--line); padding-top: 12px }
.mode .rows div { display: flex; justify-content: space-between }
.mode .rows span:first-child { color: var(--text3) }
.mode .rows span:last-child { color: var(--steel-hi) }
/* ════════════ YAYIN ════════════ */
.live { position: relative; z-index: 2; padding: var(--bolum-ust) 0 var(--bolum-alt); border-top: 1px solid var(--line); background: var(--ink2); }
.streams { margin-top: 48px; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.stream {
border: 1px solid var(--line); border-radius: 10px;
background: var(--panel); overflow: hidden;
display: flex; flex-direction: column;
transition: border-color .45s var(--ease), transform .45s var(--ease);
}
.stream:hover { transform: translateY(-4px); border-color: var(--line2); }
.stream-head { display: flex; align-items: center; gap: var(--u3); padding: var(--u4) var(--u4); border-bottom: 1px solid var(--line) }
.stream-logo { display: flex; color: var(--text2) }
.stream.youtube .stream-logo { color: #ff4444 }
.stream.kick .stream-logo { color: #53fc18 }
.stream-name { font-weight: 500; font-size: 14.5px }
.stream-note { margin-left: auto; font: 400 10px var(--mono); color: var(--text3) }
.stream-frame { position: relative; aspect-ratio: 16/9; background: #06050a }
.stream-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0 }
.stream-poster {
position: absolute; inset: 0; width: 100%;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
background: transparent; border: 0; cursor: pointer; color: var(--text2);
font: 400 13px var(--sans); transition: background var(--t-ui) var(--ease-ui);
}
.stream-poster:hover { background: rgba(255,255,255,.025) }
.stream-play {
width: 52px; height: 52px; border-radius: 50%;
background: var(--acid); color: var(--on-acid);
display: grid; place-items: center; font-size: 16px; padding-left: 3px;
transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.stream-poster:hover .stream-play { transform: scale(1.09); box-shadow: 0 0 34px rgba(212,255,74,.34) }
.stream-poster.external .stream-play {
background: transparent; color: var(--steel-hi); border: 1px solid var(--line2); padding: 0;
}
.stream-poster.external:hover .stream-play { color: var(--acid-t); border-color: var(--acid-t); box-shadow: none }
.stream-load { font-weight: 500; color: var(--text) }
.stream-poster small { font: 400 10px var(--mono); color: var(--text3); max-width: 32ch; text-align: center }
.stream-frame.empty { display: grid; place-items: center }
.stream-empty { text-align: center }
.stream-empty b { display: block; font-weight: 500; color: var(--text2); font-size: 13px }
.stream-empty small { display: block; font: 400 10px var(--mono); color: var(--text3); margin-top: 7px }
.stream-foot { padding: var(--u3) var(--u4); font: 400 11px var(--mono) }
.stream-foot a { color: var(--steel-hi); text-decoration: none; transition: color var(--t-ui) var(--ease-ui) }
.stream-foot a:hover { color: var(--acid) }
.stream-foot .dim { color: var(--text3) }
/* ════════════ VST ════════════ */
.vst { position: relative; z-index: 2; padding: var(--bolum-ust) 0 var(--bolum-alt); border-top: 1px solid var(--line) }
.vst-grid { margin-top: 44px; display: grid; gap: 46px; grid-template-columns: minmax(300px, 40%) 1fr; align-items: center }
.vst-badge {
display: inline-block; font: 500 10px var(--mono); letter-spacing: .2em;
text-transform: uppercase; padding: 6px 13px; border-radius: 6px; margin-bottom: 20px;
}
.vst-badge.soon { color: var(--violet-t); border: 1px solid rgba(124,77,255,.4); background: rgba(124,77,255,.08) }
.vst-badge.live { color: var(--ink); background: var(--acid) }
.vst-specs {
margin: 26px 0; font: 400 12px/2 var(--mono);
border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 14px 0;
}
.vst-specs div { display: flex; justify-content: space-between; gap: 18px }
.vst-specs span:first-child { color: var(--text3) }
.vst-specs span:last-child { color: var(--steel-hi) }
.vst-dl { display: flex; gap: 11px; flex-wrap: wrap }
.vst-dl .enter { display: inline-flex; align-items: center; gap: 8px }
.vst-dl .enter.disabled {
background: transparent; color: var(--text3); border: 1px solid var(--line2);
cursor: not-allowed; padding: 11px 18px; border-radius: 6px; font: 500 12px var(--sans);
}
.vst-dl .enter.disabled::before { display: none }
.vst-dl .enter.disabled:hover { transform: none; box-shadow: none }
/* Sihirli hex (#453f5c) 2.04:1 idi — okunmuyordu ve açık temada da
düzeltilmesi gereken bir kural daha demekti. Zaten bu iş için bir
token var. */
.vst-dl .enter.disabled i { font-style: normal; font: 400 10px var(--mono); color: var(--text3) }
.vst-right { min-width: 0 }
#vstMock { width: 100%; height: 286px; display: block }
/* ════════════ KAPANIŞ ════════════ */
/* ── KAPANIŞ ──
Ortalanmıştı: sayfanın tamamı sol omurgaya otururken kapanış tek
ortalanmış blok, üstelik "büyük yazı + hap düğme + küçük altyazı"
kalıbının kendisiydi. Sayfadaki her şey sanat yönetildikten sonra
en jenerik kompozisyon o kalmıştı — ve okuyucunun gördüğü son şey.
Şimdi omurgada ve hero'nun şeridini yankılıyor: solda güven
ifadesi, ince çizgi, sağ uçta eylem. Sayfa aynı jestle açılıp
kapanıyor; iki uç birbirini tanıyor. */
.outro { position: relative; z-index: 2; padding: 160px 0 176px; }
.outro h2 { font-size: clamp(38px, 7vw, 96px); max-width: var(--k6); }
.outro-serit {
max-width: var(--k6);
margin-top: var(--u12); padding-top: var(--u4);
border-top: 1px solid var(--line2);
display: flex; align-items: center; justify-content: space-between;
gap: var(--u5) var(--u8); flex-wrap: wrap;
}
.outro .sub {
color: var(--text3); font: 400 10.5px var(--mono);
letter-spacing: .13em; text-transform: uppercase;
}
.outro .enter { font-size: 13px; padding: 14px 26px; }
@media (max-width: 560px) {
.outro-serit { flex-direction: column; align-items: flex-start; }
}
footer { position: relative; z-index: 2; border-top: 1px solid var(--line); padding: 28px 0; font: 400 11px var(--mono); color: var(--text3) }
footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px }
footer a { color: var(--text3); transition: color var(--t-ui) var(--ease-ui) }
footer a:hover { color: var(--acid) }
/* ════════════ DAR EKRAN ════════════ */
@media (max-width: 900px) {
.chapter .sticky {
position: static; display: flex; flex-direction: column; gap: 24px;
height: auto; padding: 92px 22px 58px;
}
.chapter .stage { order: -1; height: 38vh }
.spacer-160, .spacer-120 { height: 0 }
.compare, .vst-grid { grid-template-columns: 1fr }
.nav .links { display: none }
/* Mobilde de tek ritim: token'i degistirmek yetiyor. */
:root { --bolum-ust: 88px; --bolum-alt: 88px; }
.outro { padding: 100px 0 116px }
.wrap { padding: 0 22px }
.mode-rail { padding-left: 22px; scroll-padding-left: 22px }
.mode { width: 268px }
#vstMock { height: 226px }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto }
.rise, .reveal span > i { opacity: 1; transform: none; transition: none}
.hero-ad { --dx: 0px; --dy: 0px; --ds: 1; }
.scrollcue .rail::after { animation: none }
.enter::before { display: none }
}
/* ════════════ AÇIK MOD ════════════
Aynı sözlük, farklı zemin. Aksan renkleri açık zeminde okunacak
şekilde koyulaştırıldı; aksan üstündeki yazı her iki temada da
--ink olduğu için kontrast kendiliğinden dönüyor. */
/* ════════════ AÇIK TEMA ════════════
Eskiden ölü duruyordu ve sebebi renk seçmemek değildi, üç yapısal
eksikti:
1. Marka rengi zeytine düşmüştü. Lime beyaz üstünde okunmadığı
için koyulaştırılmıştı ve karakterini kaybediyordu. Artık
ikiye ayrıldı: DOLGU olarak marka limesi aynen duruyor
(--acid, üstündeki yazı koyu), METİN olarak koyu yeşil
(--acid-t). Düğme yine parlıyor, yazı yine okunuyor.
2. Yüzeyler birbirinden ayrışmıyordu — zemin, panel ve kart
neredeyse aynı beyazdı. Zemin artık kâğıda çalıyor, paneller
saf beyaz kalıyor; aradaki fark gözle görülüyor.
3. Hiç yükseklik yoktu. Koyu temada derinliği ışıma veriyor;
açık temada bunu yalnızca gölge yapabilir. Kartlar zeminden
kalktı. */
:root[data-theme="light"] {
--ink: #f2f3f5; /* kâğıt — nötr */
--ink2: #ffffff;
--panel: #ffffff;
--raised: #ffffff;
--line: #dfe2e6;
--line2: #c3c8ce;
--bg-rgb: 242, 243, 245;
--text: #181b1b;
--text2: #454a50;
--text3: #5f656c; /* kâğıtta 5.3 */
--acid: #d4ff00; /* dolgu: lime korunuyor */
--on-acid:#181b1b;
--acid-t: #4a6400; /* metin/çizgi: kâğıtta 6.1 */
--acid-t2:#7d9c00;
--ember: #181b1b; /* beyaz vurgunun kâğıttaki karşılığı: mürekkep */
--violet: #5b636d;
--violet-t: #5b636d; /* kâğıtta 5.5 */
--steel: #5b636d;
--steel-hi: #2f353c;
--golge-1: 0 1px 2px rgba(23,21,15,.05);
--golge-2: 0 1px 2px rgba(23,21,15,.05), 0 10px 30px rgba(23,21,15,.07);
}
/* Yükseklik: kartlar zeminden kalkıyor. */
:root[data-theme="light"] .liste-box,
:root[data-theme="light"] .origin-box,
:root[data-theme="light"] .hear-box,
:root[data-theme="light"] .ui-frame,
:root[data-theme="light"] .stream,
:root[data-theme="light"] .card,
:root[data-theme="light"] .mode-card {
background: var(--panel);
box-shadow: var(--golge-2);
}
:root[data-theme="light"] .tag,
:root[data-theme="light"] .readout {
background: var(--panel); box-shadow: var(--golge-1);
}
:root[data-theme="light"] .readout { border-radius: 12px; padding: 14px 16px; border-top: 0; }
:root[data-theme="light"] .nav.scrolled { box-shadow: var(--golge-1); }
:root[data-theme="light"] .enter:hover { box-shadow: 0 10px 30px rgba(23,21,15,.16); }
:root[data-theme="light"] .nav .links a:hover { background: rgba(23,21,15,.06); }
:root[data-theme="light"] .stream-poster:hover { background: rgba(23,21,15,.04); }
:root[data-theme="light"] { --ember-rgb: 24, 27, 27; --sunken: #f2efe6; }
:root[data-theme="light"] .menu-panel { box-shadow: var(--golge-2); }
:root[data-theme="light"] .menu-btn:hover,
:root[data-theme="light"] .menu.open .menu-btn { background: rgba(23,21,15,.06); }
:root[data-theme="light"] .menu-panel a:hover { background: rgba(23,21,15,.05); }
:root[data-theme="light"] .hexfield path { opacity: .16; }
:root[data-theme="light"] .hexfield path.w { opacity: .34; }
:root[data-theme="light"] .honesty.lit .good .m-segs i.on { background: rgba(74,122,5,.42); }
:root[data-theme="light"] .honesty.lit .good .m-segs i.on.tip { background: var(--acid-t); box-shadow: 0 0 7px rgba(74,122,5,.45); }
:root[data-theme="light"] .card.bad { border-color: rgba(201,52,15,.34); }
:root[data-theme="light"] .card.good { border-color: rgba(74,122,5,.38); }
:root[data-theme="light"] .bad .balance-dot { box-shadow: 0 0 18px rgba(201,52,15,.35); }
:root[data-theme="light"] .good .balance-dot { box-shadow: 0 0 18px rgba(74,122,5,.35); }
:root[data-theme="light"] .vst-badge.soon { border-color: rgba(79,34,214,.35); background: rgba(79,34,214,.07); }
:root[data-theme="light"] .stream-poster:hover .stream-play { box-shadow: 0 0 34px rgba(74,122,5,.28); }
/* ════════════ TEMA / DİL DÜĞMELERİ ════════════ */
.nav-tools { display: flex; align-items: center; gap: 8px; }
.icon-btn {
width: 34px; height: 34px; padding: 0;
display: grid; place-items: center;
background: transparent; border: 1px solid var(--line2);
border-radius: 6px; color: var(--text2); cursor: pointer;
transition: color var(--t-ui) var(--ease-ui), border-color var(--t-ui) var(--ease-ui), background var(--t-ui) var(--ease-ui);
}
.icon-btn:hover { color: var(--text); border-color: var(--text3); }
.icon-btn svg { display: block; }
/* ════════════ DİL MENÜSÜ ════════════
Beş dil yan yana düğme olarak üst çubuğu yiyordu. Açılır menü:
üstte seçili kod, tıklayınca liste. Çevirisi bitmemiş diller
GİZLENMİYOR — "yakında" etiketiyle duruyor, çünkü gizlemek
gelmeyeceği izlenimi verir. */
.lang-menu { position: relative; }
.lang-cur {
display: flex; align-items: center; gap: 5px;
font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase;
background: transparent; border: 1px solid var(--line2); color: var(--text2);
border-radius: 6px; padding: 8px 11px; cursor: pointer;
transition: color .25s, border-color .25s;
}
.lang-cur::after {
content: ''; width: 5px; height: 5px; margin-left: 1px;
border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
transform: rotate(45deg) translate(-1px, -1px);
transition: transform .25s var(--ease, ease);
}
.lang-cur:hover { color: var(--text); border-color: var(--text3); }
.lang-menu.open .lang-cur { color: var(--text); border-color: var(--text3); }
.lang-menu.open .lang-cur::after { transform: rotate(-135deg) translate(-2px, -2px); }
.lang-list {
position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
min-width: 172px; padding: 5px;
background: var(--raised); border: 1px solid var(--line2); border-radius: 12px;
box-shadow: 0 18px 44px rgba(0,0,0,.42);
opacity: 0; visibility: hidden; transform: translateY(-6px);
transition: opacity var(--t-anlik) var(--ease-cik), transform var(--t-anlik) var(--ease-cik), visibility 0s var(--t-anlik);
}
.lang-menu.open .lang-list {
opacity: 1; visibility: visible; transform: none;
transition: opacity var(--t-ui) var(--ease), transform var(--t-ui) var(--ease);
}
.lang-row {
display: flex; align-items: center; gap: 9px; width: 100%;
background: transparent; border: 0; border-radius: 8px;
padding: 8px 9px; cursor: pointer; text-align: left;
color: var(--text2); font: 400 12.5px var(--sans);
transition: background var(--t-anlik) var(--ease-ui), color var(--t-anlik) var(--ease-ui);
}
.lang-row i {
font: 500 9.5px var(--mono); letter-spacing: .1em; text-transform: uppercase;
color: var(--text3); width: 18px; font-style: normal;
}
.lang-row span { flex: 1; }
.lang-row em {
font: 400 9.5px var(--mono); letter-spacing: .06em;
font-style: normal; color: var(--text3); opacity: .85;
}
.lang-row:hover { background: rgba(255,255,255,.05); color: var(--text); }
.lang-row.on { color: var(--acid); }
.lang-row.on i { color: var(--acid); }
.lang-row.soon { cursor: default; opacity: .5; }
.lang-row.soon:hover { background: transparent; color: var(--text2); }
/* ════════════ HABER VER ════════════
Plugin'in ne olacağı belli değilken tarih vermek yerine adres almak.
Kutu dar tutuldu: tek işi olan bir bölümde göz nereye bakacağını
bilmeli. */
.liste { position: relative; z-index: 2; padding: 4vh 0 10vh; }
.liste-box {
max-width: var(--k5); margin-top: var(--u16); /* kapanışın dipnotu */
border: 1px solid var(--line); border-radius: 12px;
background: linear-gradient(160deg, rgba(var(--bg-rgb), .55), rgba(var(--bg-rgb), .2));
padding: var(--kutu-b);
}
.liste-box h2 { font-size: clamp(30px, 4vw, 50px); margin-bottom: 18px; }
.liste-box .lede { font-size: 16px; max-width: none; }
.liste-form { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.liste-alan { flex: 1 1 240px; min-width: 0; }
.liste-alan input {
width: 100%; box-sizing: border-box;
font: 400 14px var(--sans); color: var(--text);
background: rgba(var(--bg-rgb), .5);
border: 1px solid var(--line2); border-radius: 6px;
padding: 12px 18px;
transition: border-color var(--t-ui) var(--ease-ui), background var(--t-ui) var(--ease-ui);
}
.liste-alan input::placeholder { color: var(--text3); }
.liste-alan input:focus-visible {
outline: none; border-color: var(--acid);
background: rgba(var(--bg-rgb), .75);
}
.liste-form button { flex: 0 0 auto; }
.liste-form button[disabled] { opacity: .45; cursor: not-allowed; }
.liste-form button[disabled]:hover { transform: none; box-shadow: none; }
/* Bal küpü: ekranda yer kaplamaz, ekran okuyucuya da görünmez. */
.liste-kupu { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.liste-onay {
flex: 1 1 100%; display: flex; gap: 10px; align-items: flex-start;
margin-top: 4px; cursor: pointer;
font: 400 12px/1.55 var(--sans); color: var(--text3);
}
.liste-onay input {
flex: 0 0 auto; margin-top: 1px;
width: 15px; height: 15px; accent-color: var(--acid); cursor: pointer;
}
.liste-onay a { color: var(--text2); text-decoration: none; border-bottom: 1px solid var(--line2); }
.liste-onay a:hover { color: var(--acid-t); border-color: currentColor; }
.liste-durum {
margin-top: 14px; min-height: 1.2em;
font: 400 12.5px var(--mono); color: var(--text2);
}
.liste-durum.tamam { color: var(--acid); }
.liste-durum.hata { color: var(--ember); }
.liste-gizlilik {
margin-top: 6px;
font: 400 11px var(--mono); letter-spacing: .04em; color: var(--text3);
}
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* ════════════ NEDEN ════════════
Sitenin TEK birinci tekil şahıs bloğu. Arkasında bir insan olduğu
yalnızca buradan anlaşılıyor; kalan her yerde ölçüm konuşuyor.
Ve tam da bu blok sayfanın en küçük şeyiydi: 587 px'lik bir kutu,
16.5 px yazı, iki paragraf arası bir dipnot gibi. Hiyerarşi hatası
— anlatının en insani anı üçüncül seviyeye düşmüştü.
Şimdi sayfanın SESSİZ ZİRVESİ. Yazı büyüdü, satır aralığı açıldı,
çevresi boşaltıldı. Ondan önceki bölüm (plugin) bilgi yoğun,
ondan sonraki (kapanış) yüksek sesli; arada bu duruyor. Ritim
yoğun → sessiz → yüksek diye gidiyor.
Süs eklenmedi; sadece doğru boyuta getirildi. */
.origin {
position: relative; z-index: 2;
padding: var(--bolum-alt) 0 var(--bolum-ust);
}
.origin-box {
/* ÖLÇÜ px cinsinden. `ch` kutunun kendi punto'suna göre hesaplanıyor
(gövde 15 px), içindeki yazı ise 25 px — 46ch demek 380 px'lik bir
sütun demek oluyordu ve paragraf ince uzun bir şerite dönüşüyordu.
Şimdi ızgaradan geliyor: 5 kolon = 688 px, 25 punto'da satır
başına ~51 karakter. Okunur aralık (45–75) içinde ve sayfadaki
diğer bloklarla aynı sistemden. */
max-width: var(--k5);
margin-left: max(0px, min(9vw, 130px)); /* kenardan içeri: sayfa burada nefes alıyor */
border-left: 1px solid var(--acid);
padding: 2px 0 2px var(--u8);
}
.origin-box .kicker { margin-bottom: var(--u6); max-width: 300px; }
/* Damga: birinci tekil şahsın altında, mono, sürüm. */
.origin-damga {
display: inline-block; margin-top: var(--u6);
font: 500 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase;
color: var(--text3); text-decoration: none;
border-bottom: 1px solid var(--line2); padding-bottom: 3px;
transition: color var(--t-ui) var(--ease-ui), border-color var(--t-ui) var(--ease-ui);
}
.origin-damga:hover { color: var(--text); border-color: var(--acid-t); }
.origin-box .lede {
font-size: clamp(19px, 2.1vw, 25px);
line-height: 1.62; font-weight: 300;
color: var(--text); /* text2 değil: burada konuşan biri var */
max-width: none;
text-wrap: pretty; /* tek kelimelik son satır kalmasın */
}
@media (max-width: 900px) {
.origin-box { margin-left: 0; padding-left: var(--u5); max-width: none; }
.origin-box .lede { font-size: 19px; line-height: 1.55; }
}
/* ════════════ DUY ════════════
Ürünü duymadan anlamak mümkün değildi. Burada çalan şey bir kayıt
değil; döngü tarayıcıda üretilip gerçek motordan geçiyor. */
.hear { position: relative; z-index: 2; padding: calc(var(--bolum-ust) + 6vh) 0 var(--bolum-alt); border-top: 1px solid var(--line); }
.hear-box {
margin-top: var(--u10); max-width: none; /* ana ifade: tam en */
background: var(--panel); border: 1px solid var(--line);
border-radius: 10px; padding: var(--kutu);
}
.hear-main { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.hear-play {
width: 56px; height: 56px; border-radius: 50%; flex: none; padding: 0;
background: var(--acid); color: var(--on-acid); border: none; cursor: pointer;
display: grid; place-items: center;
transition: transform .3s var(--ease), box-shadow var(--t-ui) var(--ease-ui);
}
.hear-play:hover { transform: scale(1.05); box-shadow: 0 0 34px rgba(212,255,74,.32); }
.hear-play.on { background: var(--ember); color: #fff; }
.hear-play svg { margin-left: 1px; }
.hear-play.on svg { margin-left: 0; }
.hear-ab { display: flex; border: 1px solid var(--line2); border-radius: 6px; overflow: hidden; }
.hear-ab button {
font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase;
background: transparent; border: 0; color: var(--text3);
padding: 10px 18px; cursor: pointer; transition: color .25s, background .25s;
}
.hear-ab button:hover { color: var(--text2); }
.hear-ab button.on { background: var(--acid); color: var(--ink); }
.hear-status { font: 400 11px var(--mono); color: var(--text3); }
.hear-scope { width: 100%; height: 150px; display: block; margin: 12px 0 4px; }
.hear-box .sekil { margin-top: var(--u5); margin-bottom: 0; }
.hear-modes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.hear-mode {
flex: 1 1 150px; text-align: left;
background: transparent; border: 1px solid var(--line);
border-radius: 10px; padding: 11px 13px; cursor: pointer; color: inherit;
transition: border-color .25s, background .25s;
}
.hear-mode:hover { border-color: var(--line2); background: var(--raised); }
.hear-mode.on { border-color: var(--acid); background: var(--raised); }
.hear-mode span { display: block; font-size: 13px; font-weight: 500; }
.hear-mode small { display: block; font: 400 10px var(--mono); color: var(--steel); margin-top: 3px; }
.hear-read {
display: flex; gap: 20px; margin-top: 16px;
border-top: 1px solid var(--line); padding-top: 12px;
font: 400 11px var(--mono); color: var(--steel-hi);
}
.hear-hint { font: 400 10px var(--mono); color: var(--text3); margin-top: 10px; }
@media (max-width: 900px) { .hear-box { padding: var(--u5); } }
/* ════════════ ARAYÜZ ════════════
FabFilter'ın videosundan çıkan ders: ürünün arayüzü görselin
kendisidir. Burada ekran görüntüsü yok — studio'nun kendisi gömülü
çalışıyor, yani her zaman güncel. */
.ui { position: relative; z-index: 2; padding: var(--bolum-ust) 0 var(--bolum-alt); }
.ui-frame {
position: relative; margin-top: 40px;
border: 1px solid var(--line2); border-radius: 10px;
background: var(--panel); overflow: hidden;
aspect-ratio: 16 / 10;
box-shadow: 0 30px 80px rgba(0,0,0,.45);
}
.ui-frame iframe {
position: absolute; top: 0; left: 0;
width: 1440px; height: 900px;
transform-origin: top left;
border: 0; pointer-events: none; /* önizleme — tıklama studio'ya gider */
}
.ui-shade {
position: absolute; inset: 0; z-index: 2; pointer-events: none;
background: linear-gradient(to bottom, transparent 68%, rgba(var(--bg-rgb), .82) 100%);
}
.ui-cta {
position: absolute; z-index: 3; left: 50%; bottom: 26px;
transform: translateX(-50%);
}
.ui-frame.loading::after {
content: ''; position: absolute; inset: 0; z-index: 1;
background: var(--panel);
}
@media (max-width: 900px) {
.ui-frame { aspect-ratio: 4 / 3; }
.ui-cta { bottom: 16px; }
}
:root[data-theme="light"] .lang-row:hover { background: rgba(23,21,15,.06); }
/* ════════════ ZANAAT ════════════
Görünmeyen ama hissedilen üç şey. Bir aracın yıllardır kullanılıyor
gibi durmasını sağlayan detaylar bunlar; hiçbiri "tasarım" değil,
hepsi düzeltilmiş kusur.
1. TABLO RAKAMLARI — değişen her sayı sabit genişlikte. Ölçüm
1.00× → 0.87× olurken satır sağa sola oynamasın. Bir alette
titreyen sayı, aletin kendisine güveni sarsar.
2. KLAVYE ODAĞI — tarayıcının varsayılan halkası tema ile hiç
konuşmuyor. Klavyeyle gezen biri de bu sayfada evinde olmalı.
:focus-visible kullanılıyor, yani fareyle tıklayanı rahatsız
etmiyor.
3. HAREKET AZALTMA — sistemde hareket azaltma açıksa geçişler
kapanıyor. Baş dönmesi yaşayan biri için bu bir tercih değil,
erişim meselesi. */
.meas, .readout, .knob-val, .hear-read, .stream-note,
.vst-specs, .liste-durum, .tag i, .ro, [class*="val"],
input, output, td, th, time {
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum' 1;
}
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
outline: 2px solid var(--acid-t);
outline-offset: 2px;
border-radius: 4px;
}
/* Klavyeyle gelen biri dokuz nav bağlantısını geçmek zorunda kalmasın. */
/* Atlama hedefi normalde odaklanamaz; -1 ile odak alabilir hale
geliyor, ama odak halkası göstermiyoruz — kullanıcı zaten oraya
kendi gitti. */
#icerik:focus { outline: none; }
.atla {
position: absolute; left: 12px; top: -60px; z-index: 100;
background: var(--acid); color: var(--on-acid);
font: 600 12px var(--sans); padding: 10px 16px; border-radius: 6px;
text-decoration: none; transition: top .2s var(--ease);
}
.atla:focus-visible { top: 12px; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
#atmos i { animation: none; }
.rise, .reveal span > i, .hero .wrap, .scrollcue { transition-duration: .01ms; }
.filmband video { display: none; }
}
/* Altbilgi bağlantıları — derinlik sayfalarına giriş. */
.footer-links { display: flex; flex-wrap: wrap; gap: 18px; }
.footer-links a { color: var(--text3); text-decoration: none; transition: color var(--t-ui) var(--ease-ui); }
.footer-links a:hover { color: var(--acid-t); }
@media (max-width: 640px) { .footer-links { gap: 12px; } }
/* ════════════ DOKUNMA HEDEFLERİ ════════════
WCAG 2.5.8 en az 24×24 piksel istiyor. Ölçtük: telefonda on bir
bağlantı bunun altındaydı (çoğu 14 px yüksekliğinde). Parmakla
14 piksellik bir hedefi tutturmak, o bağlantıyı yok saymakla
neredeyse aynı şey.
Yalnızca DOKUNMATİK cihazlarda büyüyor: farede zaten sorun yok ve
masaüstünde nav'ı şişirmenin anlamı yok. Görsel boyut değişmiyor,
sadece tıklanabilir alan büyüyor. */
@media (pointer: coarse) {
.nav .links a,
.footer-links a,
.ghost-link,
.belge-nav a,
.lang-row {
min-height: 26px;
display: inline-flex; align-items: center;
}
.footer-links a, .ghost-link { padding-block: 6px; }
.liste-onay input { width: 24px; height: 24px; }
.liste-onay { padding-block: 4px; }
/* Metin içine gömülü bağlantılar da parmakla tutulabilsin.
Satır aralığını bozmasınlar diye yükseklik padding ile değil
min-height ile veriliyor. */
.stream-foot a,
.liste-onay a,
.belge p a { min-height: 26px; display: inline-flex; align-items: center; }
/* "SSS" gibi kısa bağlantılar 24 px genişliğe ulaşamıyor — yatayda
da bir tutamak veriliyor. */
.footer-links a { min-width: 26px; justify-content: center; }
}