/* ── Tasarım tokenları ────────────────────────────────────────────────────── * Sitedeki her renk, yazı tipi, ölçü ve hareket süresi bu dosyadan çözülür; * başka hiçbir dosyada sabit değer yoktur. Paleti değiştirmek isteyen * yalnızca buraya bakar. * * Bu site bu proje için yazıldı — hazır bir tasarım kalıbının uygulaması * değildir. Tokenları başka bir projeye taşımayın; oraya kendi tasarımını kurun. * * ── Yön ────────────────────────────────────────────────────────────────── * "Karanlık odada belge okumak." Sayfa siyah bir hacimdir; ışık aynı anda tek * bir şeyin üzerine düşer. Kaydırma, arşiv masasında lambayı gezdirmektir. * * ── Palet kaynağı (2026-08-07) ───────────────────────────────────────── * Hero videosu değişti; palet baştan ÖLÇÜLDÜ. Sekme arka plandayken * `visibilityState` "hidden" olduğu için `currentTime` seek'i hiç ilerlemedi * (doğrulama notundaki rAF tuzağının video sürümü) — bunun yerine video * `play()` ile oynatılıp 300ms aralıklarla tuvale basıldı, 14 kare boyunca * her karede sRGB→OKLCH histogramı alındı. * * Sonuç önceki lacivert palet ile TAMAMEN farklı, sıcak bir video: baskın * renk (ortalama, kareler arası tutarlı) hue 74–87° — kumlu/haki bir ton, * chroma 0.021–0.023. En parlak piksel hue 89–103°'de neredeyse saf beyaz, * sıcak bir kırığı var (martı yerine bu kez sahne ışığı). En doygun bölge * (12 örneğin tamamında tutarlı) hue 41–62°'de kehribar/pas tonu, chroma * 0.086–0.101 — yüzeyin haki ailesinden görünür şekilde ayrışan gerçek bir * ikinci renk, bu yüzden vurgu bu sefer hue 50'ye (ölçülen ortalama) * çekildi, zeminin hue 80'inden BİLEREK ayrı tutuldu. * * Karanlık zeminde hue 80'de düşük L değerlerinde gam dar: chroma 0.024+ * yeşil/mavi kanalları sıfıra kilitliyordu (ör. 9% L'de RGB [5,2,0]). * Chroma bu yüzden 0.014–0.030 aralığına çekildi — kırpılma azaldı, sıcak * kahve/espresso görünümü korundu. Kontrast tuval piksel okumasıyla * ÖLÇÜLDÜ (aşağıdaki doğrulama notuna bakın): en sönük metin kademesi en * açık yüzeye karşı 5.48:1, vurgu her iki zemine karşı 5.6:1+. */ :root { /* ---------------------------------------------------------------- yüzey Belirgin lacivert-siyah — göz kararı değil, videonun baskın rengi (deniz, sahnenin ~%25'i) burada okunsun diye chroma bilerek yüksek tutuldu. Yükseklik AÇILARAK değil, ışıkla anlatılır: yükselen yüzey biraz daha açık, gömülen daha karanlık. */ --surface-void: oklch(9% 0.018 80); /* en dip — hero, tam ekran sahne */ --surface: oklch(12% 0.022 80); /* sayfa zemini */ --surface-2: oklch(15% 0.026 80); /* bir kademe yükselen bant */ --surface-raised: oklch(19% 0.030 80); /* kart, panel, açılan satır */ --surface-sunk: oklch(7% 0.014 80); /* gömülü oyuk, medya çerçevesi */ /* ------------------------------------------------------------------- cam Hero'nun sağındaki hızlı erişim düğmeleri için: video/canvas üstünde yarı saydam, bulanıklaştırılmış bir panel — arkadaki sahne hâlâ seçilir, düğme kendini zeminden ayırır. Yalnızca hero gibi her zaman koyu okunan sahnelerde kullanılır; `.acik` bandı bunu yeniden tanımlamaz. Dinlenme hâli kullanıcı isteğiyle (2026-08-12) koyultuldu — önceki %38/%20 alfa video üstünde neredeyse okunmuyordu, "soluk" bulundu. Üzerine gelince hue vurguya (50) kayar — dinlenme hâlinin nötr camından gerçek bir ısınmaya, dokunuşun "canlı" hissetmesi bunun üstüne kurulu. */ --glass-bg: oklch(24% 0.026 80 / 0.55); --glass-bg-hover: oklch(34% 0.075 55 / 0.68); --glass-border: oklch(92% 0.014 80 / 0.38); --glass-blur: 16px; /* ---------------------------------------------------------------- metin Neredeyse saf beyaz — videodaki martı. Mavi zeminin üstünde en güçlü kontrastı bu verir; hafif bir hue taşır ama chroma o kadar düşüktür ki göz nötr okur. Dört kademe: başlık → gövde → ikincil → sönük. Dört değer de ÖLÇÜLEREK belirlendi, göz kararı değil. En sönük kademe ilk denemede 50%'ydi ve 11–13 px mikro etiketlerde 3.08:1'e düşüyordu (124 ihlal); en açık yüzeye (`--surface-raised`) karşı 4.5:1'i geçen en küçük değere çekildi. Karanlık zeminde bu eşik aldatıcıdır: metin göze okunur görünür, ölçüm aksini söyler. Paleti değiştiren yeniden ÖLÇSÜN. */ --text: oklch(96% 0.010 80); /* başlık ve birincil metin */ --text-2: oklch(85% 0.012 80); /* gövde metni */ --text-3: oklch(74% 0.014 80); /* künye, altyazı, meta */ --text-faint: oklch(64% 0.016 80); /* en sönük kademe */ /* ---------------------------------------------------------------- çizgi Kılcal çizgiler zeminin aynı lacivertinden, bir kademe canlı — karanlıkta ince çizgi nötr olursa kirli görünür, zeminle aynı hue'da olursa "oyulmuş" görünür. */ --line: oklch(72% 0.045 80 / 0.20); --line-2: oklch(72% 0.045 80 / 0.10); --line-lit: oklch(78% 0.070 80 / 0.55); /* ---------------------------------------------------------------- ışık Bu videoda vurgu zeminden GERÇEKTEN ayrı bir renk: en doygun bölge 12 örneğin tamamında hue 41–62°'de kümelendi (ortalama ~50°), zeminin hue 80'inden görünür şekilde ayrı — kehribar/pas tonu, kumlu zeminin üstünde sıcak bir vurgu olarak durur. */ --accent: oklch(66% 0.14 50); /* vurgu metni, işaretler */ --accent-lit: oklch(74% 0.13 50); /* üzerine gelince, ışıma */ --accent-deep: oklch(46% 0.12 50); /* derinlikteki vurgu */ --accent-ink: oklch(14% 0.02 50); /* vurgu dolgu ÜSTÜNDEKİ metin */ --accent-wash: oklch(66% 0.14 50 / 0.09); --accent-glow: oklch(70% 0.14 50 / 0.28); --focus: oklch(74% 0.14 50); /* odak halkası — asla animasyonlanmaz */ --scrim: oklch(8% 0.012 80 / 0.72); --scrim-solid: oklch(9% 0.012 80 / 0.94); /* ── basın kupürü rozeti ────────────────────────────────────────────── Yayın adı/tarih fotoğrafın ÜSTÜNDE durur, bandın değil — hangi bantta olursa olsun karanlık şerit + açık metin kullanır (band tokenlarını izlemez, `.acik` bunu yeniden tanımlamaz). Bu yüzden ayrı, band- bağımsız bir aile: sitenin iki ölçülü rengine (zemin hue 80, vurgu hue 41–62) bilerek bağlı değil, kendi sabit değerini taşır. */ --press-scrim: oklch(8% 0.004 270 / 0.94); --press-scrim-soft: oklch(8% 0.004 270 / 0.72); --press-label: oklch(85% 0.13 88); --press-text: oklch(88% 0.010 82); /* ---------------------------------------------------------- bölüm sıcaklığı Her bant kendi kademesinde durur; sayfa kaydıkça hacim açılıp kapanır. Düz tek bir siyah levha yerine, ışığın gezindiği bir oda. */ --tone-portre: var(--surface-void); --tone-bio: var(--surface); --tone-work: var(--surface-2); --tone-books: var(--surface); --tone-media: var(--surface-2); --tone-press: var(--surface); --tone-audio: var(--surface-2); --tone-impact: var(--surface-void); --tone-guest: var(--surface); /* Ara Söz bandı için kullanıcı isteğiyle önce salt beyaz (2026-08-03), sonra kullanıcının verdiği tam hex değere (2026-08-04): #E5E4DF → OKLCH(91.8% 0.007 97.4). Sıcak, neredeyse nötr bir krem — kullanıcının doğrudan verdiği bir renk, ölçülmüş palet kuralına tabi değil; sayı bu yüzden 2026-08-07 palet yenilemesinde DEĞİŞTİRİLMEDİ. Eskiden zeminin mavi hue ailesinin (245–247°) dışındaydı; yeni hero videosunun ölçülen hue ailesiyle (74–103°) artık kendiliğinden aynı sıcaklıkta — tesadüf, ama artık dışarıda değil. Yalnızca `.lede.acik` ve klibi (`.lede__clip`, "zemin aynı olsun" isteğiyle) kullanır — `.dock` ARTIK bu token'ı PAYLAŞMIYOR, kendi ayrı `--surface-dock`ı var (aşağıda), çünkü dock için "salt beyaz" isteği hâlâ geçerli ve bu krem tonuyla karışmamalı. */ --surface-lede: oklch(91.8% 0.007 97.4); /* `.dock` yuvası için salt beyaz, opak (2026-08-04) — kullanıcı "saydamlık olmasın, net görülsün" dedi; yuvanın eski cam görünümü (`backdrop-filter` + yarı saydam zemin) tamamen kaldırıldı. Ara Söz bandının zemininden (`--surface-lede`, artık krem) BİLEREK ayrı bir token — ikisi aynı anda farklı renk isteklerine tabi tutuldu. */ --surface-dock: oklch(100% 0 0); /* Özgeçmiş bandının zemini için kullanıcının istediği renk (2026-08-07): önce altın, sonra salt beyaza çevrildi — `--surface-dock` ile aynı istisna sınıfı, ölçülmüş video paletine tabi değil. `--text-3`/ `--text-faint` altın zemin (L80%) için main.css'te (`.band--bio.acik`) koyultulmuştu; beyaz (L100%) ondan da açık olduğu için kontrast orada daha da güçlü — override'a dokunmaya gerek kalmadı. */ --surface-bio: oklch(100% 0 0); /* Basın bandının zemini (kullanıcı isteği, 2026-08-24: "bu siyahlık okumamı engelliyor, açık renkli olsun"). Bant artık `.acik` kipinde ve kendi kağıt tonunu taşır: komşu açık bantların kreminden (L96%, C0.022) daha beyaz ve daha az doygun — gazete kağıdı. Aradaki fark bilerek küçük ama görünür; sayfa hâlâ bantlar arası ayırıcı çizgi kullanmıyor, tonun kendisi ayırıyor. */ --surface-press: oklch(98% 0.006 88); /* ------------------------------------------------------------ tipografi Hiçbir aile mekanik/geometrik değildir (kullanıcı isteği, 2026-08-03) — Didone başlık (Bodoni Moda) ve mono mikro etiket (JetBrains Mono) bilerek terk edildi. Yerine tek bir yumuşak-humanist mantık: Fraunces (oval terminalli, "wonky" bir sıcaklığı olan değişken serif) başlıkta, Figtree (yuvarlak uçlu, dostane bir grotesk) hem gövdede hem mikro etikette. Mikro etiket artık mono DEĞİL — geniş harf aralığı zaten "etiket" hissini taşıyor, ayrıca bir mono ailesine gerek yok. */ --font-display: "Fraunces", "Iowan Old Style", Georgia, serif; --font-body: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-meta: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Akışkan ölçek. Display boyutları serif, gövde boyutları sans içindir. */ --text-display: clamp(3.5rem, 1.2rem + 10.5vw, 13rem); --text-display-s: clamp(2.6rem, 1.3rem + 6.0vw, 7.5rem); --text-4xl: clamp(2.2rem, 1.4rem + 3.6vw, 4.6rem); --text-3xl: clamp(1.8rem, 1.3rem + 2.3vw, 3.1rem); --text-2xl: clamp(1.45rem, 1.2rem + 1.1vw, 2.1rem); --text-xl: 1.3125rem; --text-lg: 1.0625rem; --text-md: 0.9375rem; --text-sm: 0.8125rem; --text-xs: 0.6875rem; --leading-tight: 0.94; /* display — satırlar birbirine girer */ --leading-snug: 1.24; --leading-body: 1.72; --leading-read: 1.48; /* iki yana yaslı uzun paragraf — --leading-body'den daha sık (kullanıcı isteği, 2026-08-20) */ --tracking-wide: 0.22em; /* mono mikro etiketler */ --tracking-tight: -0.03em; /* büyük display */ --measure: 64ch; --measure-narrow: 44ch; /* ---------------------------------------------------------------- boşluk 4-pt ölçek. Karanlık tasarımda boşluk açık tasarımdakinden CÖMERT olmalı: ışık az olduğu için gözün dinlenecek yere ihtiyacı var. */ --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2.75rem; --space-2xl: 4.5rem; --space-3xl: 8rem; --space-4xl: 13rem; --gutter: clamp(1.25rem, 5vw, 5.5rem); --page-max: 88rem; /* ---------------------------------------------------------------- hareket Tek bir eğri ailesi. `--ease-out` üstel bir çıkıştır: hızlı başlar, uzun kuyrukla durur — "ağır ve pahalı" hissinin tamamı bu kuyruktan gelir. */ --ease-out: cubic-bezier(0.16, 1, 0.30, 1); --ease-in: cubic-bezier(0.70, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1); --dur-instant: 0ms; --dur-1: 220ms; /* durum değişimi: üzerine gelme, odak */ --dur-2: 620ms; /* öğe geçişi: açılan satır, çevrilen kart */ --dur-3: 1150ms; /* perde: başlık satırı yukarı sıyrılır */ --dur-4: 1900ms; /* sahne: bant devralır */ /* --------------------------------------------------------------- yüzey işi */ --radius-none: 0; --radius-xs: 2px; --radius-sm: 3px; --radius-pill: 999px; --rule-hair: 1px; --rule-thick: 2px; /* ---------------------------------------------------------------- katman */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-grain: 250; --z-dock: 300; --z-overlay: 800; --z-modal: 900; }