/* ============================================================
MotoMap public-site — tasarım sistemi (v7, ışık ritmi)
============================================================
TEZ
Sayfa bir sürüştür ve bir sürüş boyunca IŞIK DEĞİŞİR. Gece çıkılır;
yolun ortasında bir yerde tam gün olur; akşam sıcak bir odada,
insanların yanında biter. Sayfanın ZEMİNİ bu üç ânı taşır ve başka
hiçbir şeyi taşımaz.
── ÖNCEKİ KARAR VE NEDEN DÜŞTÜ (v6) ──
Buraya v6'ya kadar şu yazılıydı: "İlk pikselden sonuncusuna kadar TEK
bir zemin rengi var... Ritim ZEMİN RENGİ DEĞİŞTİREREK kurulmaz —
siyah bir sayfada arka plan rengi değişimini kimse göremez ve
görebiliyormuş gibi yapmak sayfayı 'kutu yığını'na çevirir."
O kural GERÇEK bir kusuru kapatıyordu ve bulgusu hâlâ geçerli: v5'te
bölümler birbirine yakın koyu tonlarla ayrılıyordu, hiçbir fark
görülmüyor, geriye yalnızca dikişler kalıyordu. Ama çözüm fazla
genişti. Yasaklanması gereken şey "zemin değişimi" değil GÖRÜLMEYEN
zemin değişimiydi — ve v6 yasağı geniş tuttuğu için sayfa sekiz bölüm
boyunca tek zemin, tek metin ölçeği ve tek vurgu rengiyle akmaya
başladı. Kurucu ortak kusuru tek cümlede söyledi: "sitede samimiyet
eksik gibi duruyor, soğuk kış günü gibi olmuş, kapalı kasvetli falan."
Haklıydı: sayfa kötü değildi, İLERLEMİYORDU. Ziyaretçi yol almıyor,
aynı odada farklı panellere bakıyordu.
── v9 — KÂĞIT ÖNCE (2 Eylül) ──
Kurucunun kararı: "çoğunlukla beyaz tema olsun; düz beyaz değil,
Ali'nin HTML'indeki bejimsi renk." Sayfanın varsayılanı artık KÂĞIT:
hero, üç film karesi, söz ve kapanış GECEDE kalır (hepsi medya
taşıyor ve gece çekildi); geri kalan her bölüm, boşluklar ve altlık
KÂĞITTA. Akşam zemini (--warm) kalktı: Ekip de kâğıtta. Zemin iki.
--ink #0B1119 gece hero, film 02/04/05, söz, kapanış
--paper #E9E8E4 kâğıt neden, 03, ürün, nasıl, ölçüm,
modlar, garage, insan, ekip,
sorular, altlık, boşluklar
--paper-raised #F6F5F2 kâğıt üstündeki BEYAZIMSI MALZEME:
harita şasisi, sorular listesi,
koridor anahtarının seçili hapı
Kâğıdın tonu Ali'nin editoryal alternatifinden birebir (#E9E8E4,
sıcak açık gri): kurucunun "bejimsi" dediği şey bu, saf beyaz değil.
Hiçbir bölüm zeminini kendisi bildirmez: `.ground-day` bölümün
köküne kâğıdı ve kâğıdın tam metin ölçeğini yazar (aşağıda).
Önceki kural ("tam üç zemin") ve gerekçesi bu bloğun altında
tarih olarak duruyor; ölçüm mantığı aynı, zemin sayısı iki.
Zemin değişimi TAM KANAMADIR: tek kenarı sayfanın kendi kenarıdır.
── HANGİ BÖLÜM HANGİ ZEMİNDE, VE NEDEN (v9) ──
· MEDYA TAŞIYAN anlar gecede kalır — hero, film 02/04/05, söz,
kapanış. Onlar sürüşün kendisidir ve sürüş gece çekildi.
· OKUNAN ve İNCELENEN her şey kâğıtta: gerekçeler, ürün, nasıl
çalışır, ölçüm (haritalar zaten açık — v8f), modlar, garage,
insan anları, ekip, sorular, altlık.
── PANEL KURALI (kutu yasağının tek istisnası) ──
Açık zemine koyu bir görsel doğrudan konamaz. Denendi ve iki yerde
birden bozuldu: Garage render'ları saf siyah stüdyo zemininde
üretildi ve kâğıdın üzerinde kirli bir leke gibi duruyor; telefon
gövdesinin kenar ışığı (--lit, beyazın %7'si) kâğıtta şeffafa
yaklaşıp gövdeyi deliyor.
KURAL: açık zeminde koyu medya, YUVARLATILMIŞ ve İÇ BOŞLUKLU BİR
PANELİN içinde durur. Panel kart DEĞİLDİR ve ayrımı tek cümlede
test edilebilir: PANEL YALNIZCA MEDYA TAŞIR, METİN TAŞIMAZ. Bir
panelin içine bir başlık ya da bir paragraf giriyorsa o artık karttır
ve yasak sürüyor. Sayfada üç medya paneli var (telefon, makine,
03'ün karesi); üçünün de içeriği tek bir görsel.
v9'da kurucunun kararıyla TEK metin istisnası açıldı: Sorular
listesi kâğıt üstünde beyazımsı bir yüzeyde durur ("modern
beyazımsı bir şey"). Bir kart yığını değil: tek yüzey, satırlar saç
teliyle ayrılır, yüzeyin kendisi hiçbir satırı öne çıkarmaz.
Panelin arkasında yumuşak bir --bloom hâlesi var: ürünün kendi
mavisinin kâğıda sızması. Hâle bir kenar çizmez, bir gölge de
değildir (gölge --sh-3 ile ayrıca duruyor) — panelin ışık verdiğini
söyler. Mavinin sözleşmesine uyar: orada MotoMap'in kendisi duruyor.
Kutu yasağı DÜŞMEDİ. Düşen şey "koyu medya her zaman çıplak zemine
oturur" varsayımıydı; o varsayım tek zeminli bir sayfada doğruydu.
Geçişin biçimi zevkle değil KONTRASTLA belirlenir:
· --ink → --paper KESMEDİR. Yumuşak bir ramp konsaydı bölümün kendi
KOYU metni rampanın koyu ucuna denk gelirdi: sahne başlığı sahnenin
tepesinden 88px aşağıda başlıyor (nav payı + --s4), yani 160px'lik
bir ramp doğrudan başlığın altından geçerdi.
· --paper DÜZDÜR, üstünde gün ışığı sızıntısı YOKTUR. Denendi ve
ölçüldü: #F7F5F0 → #F0EEE9 arası 630px'e yayıldığında kanal başına
7 kademe kalıyor, yani 8-bit panelde ~90px'de bir şerit. Açık bir
zeminde bant kırılmasını gizleyecek dither de yok (body::after
zeminin altında kalıyor).
── AÇIK ZEMİN AYRI BİR METİN ÖLÇEĞİ İSTER ──
Koyu zemin için seçilmiş üçlü açık zeminde çöker — ölçüldü, --paper
üzerinde --text 1,04:1, --text-2 1,96:1, --text-3 3,38:1. Bu yüzden
--paper KENDİ TAM ÖLÇEĞİNİ taşır ve bölümün kökünde sistem
jetonlarının üzerine yazar (.ground-day).
Böylece bölümdeki her kural — .d2, .lead, sönük adım, saç teli, odak
halkası — tek bir yerden yeniden tonlanır; hiçbir bileşen kendi
rengini ikinci kez bildirmez. Ölçülen oranlar :root'ta her jetonun
yanında yazılı ve hepsi AA'yı geçer.
── MAVİ ──
Mavi atmosfer değil IŞIKTIR: #0488CE yalnızca MotoMap gerçekten bir
şey yaparken görünür. Kural v6'da da yazılıydı ama UYGULANMIYORDU —
mavi nav hâlesinde, hap hâlesinde, telefon hâlesinde ve üç portre
çerçevesinde BOŞTA duruyordu, yani hiçbir şey olmadan da görünüyordu
ve sinyal olmaktan çıkmıştı. Boşta duran maviler kaldırıldı. Mavi
artık yalnızca bir DURUM taşıdığında var: okuma yayı, odak halkası,
seçili satır, açılışta çizilen kural, ölçüm panelleri.
── ZEMİNİN RENGİ (v8) ──
Gece zemini artık nötr gri değil, DÜŞÜK KROMALI LACİVERT: #0B0C0E →
#0B1119 (CIE b* -1,0 → -5,8; L* 3,3 → 4,9). Kurucunun isteği "bu
mavinin güzel tonları, bir tık ferah, daha temiz ve profesyonel"
idi ve doğru yer zeminin kendisiydi, süs değil: sayfanın her
pikseli markanın soğuk eksenine oturuyor, hiçbir yere yeni bir
mavi öğe konmuyor. Kâğıt da aynı yöne döndü: sıcak fildişi
#F0EEE9 yerine serin #EEF1F5 (b* +2,6 → -2,3).
MAVİ = IŞIK kuralı BOZULMADI, çünkü zeminin kastı doygunluk taşımıyor
(b* -5,8, tek haneli); doygun tek mavi hâlâ #0488CE ve hâlâ yalnızca
MotoMap bir şey yaparken görünür. Ölçüldü: bütün metin oranları
AA'nın üstünde kaldı (yukarıdaki sayılar yeni zeminle yeniden
hesaplandı), --raised de bu kastı aldı ve --text-3 orada 4,5'in
üstünde tutuldu — bir kademe daha koyu lacivert (#171C24) onu 4,37'ye
düşürüyordu ve reddedildi.
── SICAK EKSEN ──
Palete bir sıcak eksen eklendi ve okunabilir bir ayrım kuruyor:
MAVİ = teknoloji (motor bir şey yapıyor), AMBER = insan ve doğa.
Bu yüzden amber sayfada tek bir yerde var — Ekip bölümünde, portre
çerçevelerinde dolaşan ışık orada mavi değil amberdir.
YASAKLAR (denetimde aranır)
· Hiçbir başlık ortalanmaz. Ortalı iki öğe: nav adası ve Ekip.
· Kart yok. Dört kenarı çerçeveli kutu yok. Üst etiket ("eyebrow") yok.
TEK İSTİSNA: açık zemindeki koyu MEDYA PANELİ (yukarıdaki PANEL
KURALI). Metin taşıyan bir panel karttır ve yasaktır.
· Bölüm kendi adını söylemez. Ayraç bir çizgi + kelime değildir.
· background-color YALNIZCA bölüm zemininde (.ground-day, .void,
body) ve "yükseltilmiş malzeme"de (nav adası, form alanı, harita
paneli, sorular listesi, 03'ün medya paneli) bulunur.
· Renk değişmezi (#hex / rgb) yalnızca aşağıdaki :root bloğunda bulunur.
Denetim komutu:
grep -nE '#[0-9a-fA-F]{3,6}|rgba?\([0-9]' assets/css/*.css
:root dışında eşleşme çıkarsa birleştirme reddedilir.
============================================================ */
:root{
/* ── ZEMİN 1/3 — GECE ── Sayfanın varsayılanı. section/footer şeffaftır
ve bu zemini gösterir. */
--ink:#0B1119;
--ink-rgb:11,17,25;
/* Tek "yükseltilmiş malzeme": nav adası, form alanı, harita paneli.
Bölüm zemini olarak ASLA kullanılmaz. */
--raised:#13181F;
/* Şasi malzemesi: gece --raised, kâğıtta --paper-raised (.ground-day
yeniden tanımlar). Harita paneli, yükleniyor hapı, koridor anahtarı
bu jetonu okur; --raised'i doğrudan okumaz. */
--panel:var(--raised);
/* ── YÜZEY ── Nötr beyaz-alfa. Mavi tonlu yüzey yok: yüzeyler mavi
olursa mavi vurgu olmaktan çıkar. */
--fill:rgba(255,255,255,.04);
--line:rgba(255,255,255,.10);
--line-soft:rgba(255,255,255,.06);
--lit:rgba(255,255,255,.07); /* üst kenar ışığı: yükseklik = aydınlatma, çerçeve değil */
/* ── METİN ── Üçü de AA geçer.
--ink üzerinde : 17.06 / 8.32 / 4.84
--raised üzerinde: 16.05 / 7.83 / 4.55
--text-3 hem zeminde hem yükseltilmiş malzemede geçmek zorunda:
showcase panelleri --raised üzerinde ve mono etiketleri bu tonda.
#787D86 orada 4.30 ile AA'nın altında kalıyordu; ton ailesi
korunarak bir kademe açıldı. */
/* --on-media*: FOTOĞRAF ve PERDE üstünde duran metin (mod karolarının
adları). Kâğıt bölümünde de açık kalmak zorunda, yani .ground-day'in
jeton yeniden tanımından etkilenmeyen kendi adıyla anılır. */
--on-media:#F2F3F5;
--on-media-2:#A8ACB4;
--text:var(--on-media);
--text-2:var(--on-media-2);
--text-3:#7C818A;
/* ── VURGU ── Dolgu/çizgi rolü ile metin rolü ayrıdır.
--blue metin olarak KULLANILMAZ (5.05:1); metin mavisi --cyan (8.62:1). */
--blue:#0488CE;
--blue-lit:#1EA6DD;
--cyan:#47B8E5;
--blue-line:rgba(4,136,206,.55);
--blue-soft:rgba(4,136,206,.14);
/* Marka işaretinin okuma yayı dolarken bıraktığı iz. Değişmez burada
duruyor çünkü `drop-shadow()` bir renk değişmezi ister ve o satır
denetim grep'ini :root dışında düşürüyordu. */
--blue-glow:rgba(4,136,206,.6);
/* ── ZEMİN 2/2 — KÂĞIT (v9) ────────────────────────────────────
Sayfanın varsayılanı. Ton Ali'nin editoryal alternatifinden
(#E9E8E4, sıcak açık gri): kurucu "düz beyaz değil, bejimsi" dedi.
Kendi metin ölçeği var, çünkü koyu zemin için seçilmiş üçlü burada
çöküyor. Ölçülen oranlar --paper üzerinde, hepsi AA üstü:
--paper-ink 14.81:1 başlık (koyu lacivert)
--paper-text 10.10:1 gövde
--paper-text-3 4.74:1 sönük adım, künye
--paper-blue 5.29:1 seçili rakam, odak halkası, canlı rozet
--paper-danger 4.95:1 "kullanılamıyor" (--danger kâğıtta 2,7 idi)
Marka mavisi kâğıt üzerinde METİN OLARAK KULLANILAMAZ (--blue 3,2:1,
--cyan 2,0:1); 1px kural ve çizgi olarak 3:1 eşiğini geçer.
--paper-raised kâğıt üstündeki beyazımsı malzeme (şasi, sorular
listesi); --paper-fill kâğıt üstündeki yumuşak dolgu (anahtar). */
--paper:#E9E8E4;
--paper-raised:#F6F5F2;
--paper-ink:#0E1622;
--paper-text:#2C3542;
--paper-text-3:#5C6675;
--paper-blue:#0A6396;
--paper-danger:#B3361C;
--paper-line:rgba(14,22,34,.16);
--paper-line-soft:rgba(14,22,34,.09);
--paper-fill:rgba(14,22,34,.05);
/* --lit (beyaz-alfa) kâğıt üzerinde şeffafa yakın ve telefon
gövdesinin köşesini kâğıda açıyordu. Bu, o kenar ışığının opak
karşılığı: --lit'in --raised üzerindeki bileşkesi. */
--edge-lit:#252A32;
/* ── AKŞAM ZEMİNİ KALKTI (v9) ── --warm ve sıcak metin ölçeği silindi:
Ekip kâğıda geçti, ısıyı fotoğraflar ve amber taşıyor. */
/* ── SICAK VURGU ── Maviyle simetrik ve maviyle YARIŞMAZ:
mavi "motor bir şey yapıyor" demek, amber "burada insan var".
Bu yüzden sayfada tek bölümde bulunur. */
--amber:#E9A85A;
--amber-line:rgba(233,168,90,.55);
/* Kâğıt üstünde açık amber görünmez kalıyordu (1,9:1); gezen yayın
çekirdeği bir kademe koyu (2,9:1 — 1px'lik ışık, metin değil). */
--amber-deep:#B8722A;
/* ── MOD RENKLERİ ── YALNIZCA ölçüm haritasındaki üç çizgi ve onların
anahtarı: kategorik veri rengi, arayüz rengi değil. Kurucunun
kararı (2 Eylül): "her mod için haritadaki çizginin rengi
değişebilir" — daha önce "palette üçüncü rota rengi yok" diye
kesik deseniyle ayrılıyorlardı ve uydu üstünde zor seçiliyorlardı.
standart marka mavisi (metin mavisi --cyan, hale --blue)
viraj keyfi amber — sıcak eksen: keyif insana ait
güvenli nane yeşili — paletteki TEK yeni ton; "güvenli"nin
evrensel rengi ve mavi/amber'e en uzak açı.
Kesik deseni ikincil ipucu olarak kalır (renk körü ziyaretçi). */
/* v8f: harita açık zemine geçince üç ton koyulaştı — anahtardaki örnek
çizgi koyu panelde, çizgi açık haritada; ikisinde de okunuyor. */
--mode-standart:var(--blue);
--mode-viraj:#C2410C;
--mode-guvenli:#15803D;
/* ── LACİVERT ── Koyu medya panelinin içindeki ışık havuzu: makine ve
ekran, gecenin içinde ama saf siyahın içinde değil, bir lambanın
altında duruyor. Bölüm zemini DEĞİLDİR — yalnızca panelin kendi
zemininde, radial-gradient olarak. ΔL* 10,51 --ink'ten. */
--navy:#1E2735;
/* ── HÂLE ── Açık zeminde duran koyu medya panelinin arkasına düşen
renkli ışık. Gölge değil (gölge --sh-3 ile ayrıca duruyor): panelin
ürünün kendi mavisini kâğıda sızdırması. Yalnızca box-shadow'un
renk yuvasında kullanılır, hiçbir yerde dolgu değildir. */
--bloom:rgba(4,136,206,.32);
/* ── CTA ── Sayfada tek dolu düğme kıyafeti vardır: beyaz hap. */
--cta-bg:#FFFFFF;
--cta-ink:#0A0E14;
/* ── ANLAMSAL ── Yalnızca hata ve "ölçüm alınamadı". Dekoratif değil. */
--danger:#EF5B3F;
--danger-soft:rgba(239,91,63,.14);
/* ── HARİTA ── Google Maps ve Leaflet API'leri hex dize ister; showcase.js
paletini buradan okur (bkz. showcase.js PAL). Yol yüzeyi zeminden bir
kademe açık: rota şeridi üzerinde okunabilsin. */
--map-road:#232A33;
/* ── AÇIK HARİTA (v8f) ── Ölçüm haritaları açık, temiz, minimal
(kurucu: "profesyonel light temalı"). Google'ın vektör altlığı bu
jetonlarla boyanır (showcase.js `styles`); anahtarsız yedek Esri
World Light Gray (CARTO Positron anahtar istediği için seçilmedi). Rota renkleri açık zemine
göre: amber ve nane yeşili beyaz üstünde 1,9 ve 1,7:1'e düşüyordu
(ölçüldü), yeni değerler ≥ 4,5:1; marka mavisi çizgi olarak 3,5:1
(grafik eşiği 3:1). Karşı motorun kesik çizgisi gri, 4,35:1. */
--map-l-ground:#F1F3F6;
--map-l-road:#FFFFFF;
--map-l-road-line:#D9DEE5;
--map-l-water:#CFE0EE;
--map-l-park:#E3ECE3;
--map-l-label:#6B7280;
--map-l-label-stroke:#FFFFFF;
--map-l-other:#6B7280;
--map-l-casing:#FFFFFF;
--map-l-veil:rgba(241,243,246,.72);
--map-l-attr:rgba(255,255,255,.78);
/* ── TEMAS GÖLGESİ ── Zeminden TÜRETİLMEZ ve bu bilinçlidir: --ink'i
kendi üzerine %55 opaklıkla bindirmek yine --ink verir, yani gölge
tamamen kaybolur. Öznenin yere bastığını gösteren tek şey bu, o yüzden
saf siyah kalır. */
--shadow-contact:rgba(0,0,0,.55);
/* ── YARIÇAP ── Dört değer. Şüphedeysen 0.
--r-lg DÖRDÜNCÜ ADIM ve tek bir iş için açıldı: açık zeminde duran
koyu MEDYA PANELİ (bkz. TEZ · PANEL KURALI). 10px orada işe
yaramıyor — telefon gövdesinin kendi yarıçapı zaten clamp(28..44px)
ve yanındaki makine paneli 10px'te ona göre keskin, yani ikisi aynı
malzemeden yapılmamış gibi duruyor. 26px ikisini aynı aileye
sokuyor. Metin taşıyan hiçbir şeye verilmez. */
--r-0:0;
--r-md:10px;
--r-lg:26px;
--r-pill:999px;
/* ── GÖLGE ── Üçü de zeminden türer, hiçbiri mavi değil.
Koyu zeminde renkli gölge neon gibi okunur. */
--sh-1:0 2px 10px -4px rgba(var(--ink-rgb),.6);
--sh-2:0 20px 44px -26px rgba(var(--ink-rgb),.75);
--sh-3:0 44px 96px -52px rgba(var(--ink-rgb),.85);
/* ── TİPOGRAFİ ──
Tek aile: Geist. Mono YALNIZCA sayı, birim, durum ve etiket için —
ürünün sesi ölçümdür. İtalik yok, 700 üstü yok.
Ağırlık ekseni artık canlı (bkz. fonts.css): ara değerler gerçek. */
--font:'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
/* Serif yalnız ölçüm damgasında ("Kayıtlı ölçüm" rozeti ve tarih satırı):
kurucunun seçimi, Nimbus Roman No9 L (URW base35, AGPL + font istisnası). */
--serif:'Nimbus Roman', 'Times New Roman', Georgia, serif;
--mono:'Geist Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
/* SIRA RAKAMI YÜZÜ (v11). Kurucu: bu rakamlar FF DIN olsun. FF DIN ticari,
lisanssız gömülemiyor; yerine aynı DIN 1451 geleneğinden açık lisanslı
D-DIN (bkz. fonts.css). Yalnızca SAYAN rakamlarda: 01/02/03, bölüm
numaraları, mod sayacı. ÖLÇÜLEN değerler (km, dk, koordinat) Geist
Mono'da kalır — kurucu o kaydı beğendi; iki register bilinçli ayrı:
DIN sayar, mono ölçer. */
--numeral:'D-DIN', 'Geist Mono', ui-monospace, monospace;
/* Görüntü ölçeği: üç adım, akışkan, clamp tabanlı. */
--d1:clamp(2.75rem, 7.4vw, 7rem); /* sayfada TAM İKİ kez: hero h1 ve Söz */
--d2:clamp(2.25rem, 4.6vw, 4.25rem); /* her bölüm başlığı, tek boy */
--d3:clamp(1.75rem, 2.8vw, 2.5rem); /* bölüm içi özne adları */
--num:clamp(2.5rem, 5vw, 4.5rem); /* ölçüm rakamı, mono, tabular */
/* ── BOŞLUK ── Kapalı küme. Aradaki keyfi değerler kullanılmaz. */
--s1:4px; --s2:8px; --s3:12px; --s4:16px;
--s5:24px; --s6:32px; --s7:48px; --s8:64px;
--s9:96px; --s10:128px;
/* ── HAREKET ── Üç eğri, dört süre. Dördüncü eğri yok.
Yerleşik `ease-out` zayıf; `ease-in` hiçbir yerde kullanılmaz. */
--ease-out:cubic-bezier(.16,1,.3,1); /* giren her şey */
--ease-state:cubic-bezier(.4,0,.2,1); /* ekranda durum değişimi */
--ease-io:cubic-bezier(.77,0,.175,1); /* iki yönlü yapışkan devir */
--press:120ms; /* :active geri bildirimi */
--ui:200ms; /* hover, odak, nav durumu */
--state:320ms; /* çapraz geçiş, görsel değişimi */
--enter:720ms; /* tek seferlik kaydırma açılışı */
--nav-h:72px;
}
/* GEÇİCİ ÖNİZLEME ANAHTARI — kurucunun --paper'ı (bejimsi #E9E8E4) daha
soğuk/temiz bir tona taşıyıp taşımayacağına canlı sitede karar vermesi
için iki aday. index.html'deki senkron betik `motomap:paper`
localStorage anahtarını okuyup köke data-paper="a"|"b" yazıyor; hiçbir
ziyaretçiye görünen bir kontrol YOK, yalnız ?paper=a / ?paper=b ile URL
üzerinden denenir. Karar verilince: seçilen tonu --paper/--paper-raised'e
TAŞI, bu iki bloğu ve index.html'deki betiği SİL. */
:root[data-paper="a"]{--paper:#F0EFEA;--paper-raised:#F8F8F6;}
:root[data-paper="b"]{--paper:#F2F1ED;--paper-raised:#F9F9F7;}
/* ============================================================
TEMEL
============================================================ */
*,*::before,*::after{box-sizing:border-box;}
html{
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;
scroll-padding-top:var(--nav-h);
/* Çapa atlamaları yumuşak. Daha önce kapalıydı çünkü bu yükseklikte bir
sayfada aradaki her katmanı çözmeye zorluyordu — ama aradaki
görsellerin tamamı artık lazy ve videolar görünürlüğe kadar hiç
inmiyor, yani bedeli kalmadı. Hareket azaltmada anında atlar. */
scroll-behavior:smooth;
}
/* Ölçüt medya sorgusu değil bayrak: karar :root[data-motion] üzerinde (v9:
varsayılan açık; altlıktaki anahtar kalktı, bayrak QA için duruyor). */
:root[data-motion="off"]{scroll-behavior:auto;}
body{
margin:0;
background:var(--ink);
color:var(--text);
font-family:var(--font);
font-size:17px;
line-height:1.65;
font-weight:400;
overflow-x:hidden;
}
/* DİTHER KALKTI (v9). Tane dokusu koyu zeminde bant kırılmasını
kırmak içindi; sayfanın varsayılanı kâğıt olunca aynı doku açık
zeminde kir gibi okunuyordu. Kalan gece alanları fotoğraf ve film —
kendi dokuları var. */
/* figure'ün tarayıcı varsayılan kenar boşluğu `1em 40px`. Sıfırlanmadığı
sürece her ızgara sütunundan 80px yiyor — film şeridi panelleri
236px'lik sütunlarında 157px'e düşüyordu. */
figure,figcaption,blockquote,dl,dd{margin:0;}
h1,h2,h3,h4,p,ul,ol{margin:0;}
ul,ol{padding:0;list-style:none;}
img,video{display:block;max-width:100%;}
/* canvas'a max-width VERİLMEZ. Leaflet'in katman panelleri (.leaflet-pane)
sıfır genişlikte konumlandırılmış kaplardır; içindeki tuvale
`max-width:100%` uygulanınca genişliği 0'a çöküyor ve neon rota
çizildiği halde görünmüyordu (ölçüldü: canvas.width 586, hesaplanan
genişlik 0px, boyanmış piksel var). Leaflet kendi CSS'inde aynı tuzağa
karşı svg'yi `max-width:none !important` ile koruyor ama canvas'ı
kapsamıyor. Tuvalin ölçüsünü her zaman onu çizen kod belirler. */
canvas{display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:none;padding:0;}
::selection{background:var(--blue);color:var(--cta-ink);}
/* Odak her yerde görünür ve her zaman aynı. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
outline:2px solid var(--cyan);
outline-offset:3px;
border-radius:2px;
}
/* Görsel olarak gizli ama ekran okuyucuya açık. Form etiketleri için. */
.visually-hidden{
position:absolute;width:1px;height:1px;margin:-1px;padding:0;
overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}
/* Klavye kullanıcısı için içeriğe atlama. */
.skip{
position:absolute;left:var(--s4);top:calc(-1 * var(--s9));z-index:100;
background:var(--cta-bg);color:var(--cta-ink);
padding:var(--s3) var(--s5);border-radius:var(--r-pill);
font-size:15px;font-weight:600;
transition:top var(--ui) var(--ease-out);
}
.skip:focus{top:var(--s4);}
/* ============================================================
IZGARA
Her şey gerçek bir 12 kolonda oturur. Ölçü (34-38rem) sorun değildi —
ONU ORTALAMAK sorundu.
============================================================ */
.wrap{
width:100%;
max-width:min(92vw, 84rem);
margin-inline:auto;
padding-inline:clamp(1.25rem, 4.5vw, 4rem);
display:grid;
grid-template-columns:repeat(12, 1fr);
column-gap:clamp(16px, 2vw, 32px);
}
/* Izgaraya girmesi gerekmeyen tek parça blok. */
.wrap > .full{grid-column:1 / -1;}
/* Bir kademe ferah (v8): 96→128px taban, 10→12rem tavan. Tek kademe;
iki kademe sayfayı bölümler arasında boşlukta bırakıyordu. */
.section{padding-block:clamp(var(--s10), 14vh, 12rem);}
/* Izgara içine doğrudan konan bir başlığın YERLEŞİMİ OLMAK ZORUNDA.
Yoksa 12 kolonluk ızgaranın ilk 1fr'ine düşer: masaüstünde tek kelimelik
dört satır, mobilde taşma üretiyordu. */
.section-head{grid-column:1 / 9;}
@media(max-width:900px){ .section-head{grid-column:1 / -1;} }
/* ============================================================
TİPOGRAFİ PRİMİTİFLERİ
Ortalama YOK. Kaçış kapısı da yok: .is-centered diye bir sınıf
bilinçli olarak tanımlanmadı.
============================================================ */
/* ── GÖRÜNTÜ AĞIRLIKLARI — BÜYÜDÜKÇE İNCELİR ────────────────────────
Kurucunun notu: "fontlara dikkat edin, dandik duruyor."
Ölçüm kusuru buldu ve kusur ağırlıktaydı, ailede değil. Görüntü
ölçeğinin üç adımı da 520-560 bandındaydı, yani 106px'lik bir hero
başlığı 17px'lik bir dizin terimiyle neredeyse AYNI ağırlıkta
basılıyordu. Punto büyüdükçe aynı ağırlık optik olarak KALINLAŞIR:
harf gövdeleri büyürken iç boşluklar orantısız kapanır. Bu yüzden
büyük başlıklar bağırıyordu.
Referans ölçüldü (antigravity.google): 80px başlık, ağırlık 450,
harf aralığı normal. Bizim yeni bant:
ölçek punto (390 → 1440) ağırlık ÖNCE → SONRA
--d1 44 → 106,6 px 450 560 → 450
--d2 36 → 66,2 px 470 540 → 470
--d3 28 → 40 px 500 520 → 500
20px ve altı 520 değişmedi
Ağırlık ekseni canlı (fonts.css 100..900), yani 450/470/500 gerçek
ara değerler; sahte bir sentetik kalınlaştırma yok.
HARF ARALIĞI DA GEVŞETİLDİ, çünkü ikisi birlikte çalışır: 560'ta
-.035em harfleri birbirine yaslamak için gerekliydi, 450'de aynı
sıkışıklık ince gövdeleri birbirine yapıştırıyor ve metni ucuz
gösteriyor. Referans 80px'te sıfır aralık kullanıyor; biz sıfıra
inmiyoruz (Geist'in kendi çizimi büyük puntoda hâlâ hafif negatif
ister) ama yarıya yakın gevşetiyoruz:
--d1 -.035em → -.022em --d2 -.028em → -.018em
--d3 -.020em → -.015em
20px ve altındaki her şey aynı kaldı: orada ağırlık ve aralık zaten
doğruydu ve küçük punto inceltilirse okunurluk düşer. */
.d1{
font-size:var(--d1);line-height:.96;letter-spacing:-.022em;
font-weight:450;color:var(--text);margin:0;
text-wrap:balance;
}
.d2{
font-size:var(--d2);line-height:1.02;letter-spacing:-.018em;
font-weight:470;color:var(--text);margin:0;
text-wrap:balance;
}
.d3{
font-size:var(--d3);line-height:1.1;letter-spacing:-.015em;
font-weight:500;color:var(--text);margin:0;
}
.lead{font-size:20px;line-height:1.55;color:var(--text-2);margin:0;max-width:34rem;}
.body{font-size:17px;line-height:1.65;color:var(--text-2);margin:0;max-width:38rem;text-wrap:pretty;}
.small{font-size:15px;line-height:1.6;color:var(--text-2);margin:0;}
/* Mono etiket: sayfadaki TEK etiket boyu. Büyük harf bütçesi dört. */
.label{
font-family:var(--mono);font-size:13px;line-height:20px;
letter-spacing:.08em;color:var(--text-3);
margin:0;
}
.label-up{text-transform:uppercase;}
.micro{
font-family:var(--mono);font-size:11px;line-height:16px;
letter-spacing:.08em;color:var(--text-3);margin:0;
}
/* ── SAYI ──
Sayfadaki her ÖLÇÜLMÜŞ rakam aynı kayıtta okunur ve bu kayıt ölçüm
cihazının kaydıdır: Geist Mono, tabular-nums (rakam genişlikleri
eşit, değer değişince sütun oynamaz), sıfırdan büyük negatif harf
aralığı, ve ağırlık ekseni artık canlı olduğu için 380 — gövdeden
hafif İNCE. İnce olması bilinçli: büyük puntoda kalın bir rakam
bağırır, ince bir rakam ölçülmüş görünür.
"Her rakam" DEĞİL "her ölçülmüş rakam": sayan rakamlar (01/02/03,
dizin, ürün adımları) bu kayıtta değil, sections.css'in başındaki
SIRA RAKAMI kaydında. Mono burada bir sinyal ve sinyal ancak
seçiciyse sinyaldir.
Kesikli sıfır bu ayrımın görünür tarafı ve bir ÖZELLİKTEN DEĞİL
ÇİZİMDEN geliyor: Geist Mono'nun varsayılan `zero` glifi zaten
eğik kesikli, Geist'inki değil. Aşağıdaki `font-feature-settings`
ilanı ÖLÜ — kurulu dört woff2'nin hiçbirinde `ss01` yok (fontTools
ile denetlendi: geist-mono-06 GSUB = ccmp, dnom, frac, locl, numr).
Ölçüldü: ss01 kapatılıp koordinat, Garage listesi ve dizin yeniden
basıldığında görüntüler bit bit aynı çıkıyor (fark kutusu boş).
Silinmesi bir pikseli değiştirmez; bkz. HUNK 6. */
.num{
font-family:var(--mono);font-size:var(--num);line-height:1;
font-variant-numeric:tabular-nums;
/* `ss01` BURADA DEĞİL, çünkü diye bir özellik yok: kurulu dört woff2
fontTools ile denetlendi ve hiçbirinde `ss01` bulunmuyor
(geist-mono-06 GSUB = ccmp, dnom, frac, locl, numr). Bir süre bu
satırda `font-feature-settings:"ss01" 1` duruyordu ve üç ayrı yorum
onu "eğik kesikli sıfırı açar" diye savunuyordu. Ölü ilandı: ss01
kapatılıp açılarak render edilen görüntüler bit-bit aynı çıktı.
Kesikli sıfır bir ÖZELLİKTEN değil ÇİZİMDEN geliyor — Geist
Mono'nun varsayılan `zero` glifi zaten eğik kesikli. */
letter-spacing:-.02em;
font-weight:380;color:var(--text);margin:0;
}
/* Rakamların taşıdığı birim ve etiketler sayıdan bir kademe geri düşer. */
.num small{font-weight:400;}
/* ============================================================
BÖLÜM AÇILIŞLARI — dört desen, dönüşümlü.
Kural: ardışık iki bölüm aynı deseni kullanmaz.
Atama (kodla birebir):
hero kendi kompozisyonu (.hero__inner)
neden A hizalı bölme
söz D tek cümle
ürün kendi kompozisyonu (.preview__head + yapışkan cihaz)
ölçüm C ölçüm önce
karakter A
modlar .section-head
garage A
ekip F ortalı ← tek kullanım
kapanış D
Burada bir zamanlar B (medya içinde) ve E (özne önce) desenleri de
vardı. İkisi de hiçbir öğeye hiç uygulanmadı — B index.html'e hiç
girmedi, E bir yeniden yazımda sessizce düştü — ama CSS'leri ve bu
listedeki satırları kaldı. Ölü kalıp, uygulanmış kalıp gibi okunur;
silindiler. Beş desen iddiası da düzeltildi.
============================================================ */
/* A — HİZALI BÖLME. Başlık solda büyük kütle, tek cümle sağda küçük
kütle, başlığın SON taban çizgisine hizalı. Kompozisyon bu köşegen. */
.open-split{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;align-items:end;row-gap:var(--s5);}
.open-split > h2{grid-column:1 / 8;}
.open-split > p{grid-column:9 / 13;align-self:end;max-width:26rem;}
@media(max-width:900px){
.open-split > h2,.open-split > p{grid-column:1 / -1;}
}
/* C — ÖLÇÜM ÖNCE. Bölüm bir mono rakamla açılır, düzyazı altına gelir.
KURAL (AGENTS.md): buradaki rakam gerçek ölçülmüş bir değer ya da
iddia olmayan bir sayı olmak zorunda. Uydurma mesafe/süre asla. */
.open-measure{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;row-gap:var(--s6);align-items:start;}
.open-measure .fig{grid-column:1 / 6;}
/* Rakamın altındaki etiket. line-height AÇIKÇA yazılıyor: bu
.num'un içinde duruyor ve .num'un `line-height:1`ini miras alıyordu —
o değer 4.5rem'lik bir rakam için doğru, 13px'lik bir etiket için
sıfır satır arası demek. Sayfadaki bütün 13px mono etiketler
(.label, .preview__caption, .team__role, .foot h3) 20px'te; bu da
oraya alınıyor. Yeni bir ölçek uydurulmuyor, var olan etiket kaydına
dönülüyor. Bugün sarmıyor (320px'te ve daha uzun bir çeviriyle de
ölçüldü: tek satır) — ama sardığı gün satırlar birbirine değerdi. */
.open-measure .fig small{display:block;margin-top:var(--s3);font-size:13px;line-height:20px;letter-spacing:0;color:var(--text-3);font-family:var(--font);font-weight:500;}
.open-measure .fig small::first-letter{text-transform:uppercase;}
.open-measure .said{grid-column:7 / 12;}
@media(max-width:900px){
.open-measure .fig,.open-measure .said{grid-column:1 / -1;}
}
/* D — TEK CÜMLE. Cümle bölümün kendisidir. Sayfanın en büyük yazısı
burada ve hero'da; başka hiçbir yerde --d1 kullanılmaz. */
/* Cümle bir de olabilir bir
de — ölçü öğeye değil DESENE ait.
(Selector'ı yalnızca p'ye bağladığımda Söz başlığı 25px'e düşüyordu.) */
.open-statement{grid-column:1 / 10;}
/* Ağırlık ve harf aralığı `.d1` ile birebir aynı kayıtta: bu desen
sayfanın en büyük yazısını taşıyor ve iki yerde iki farklı ağırlık
olamaz (bkz. GÖRÜNTÜ AĞIRLIKLARI). 560/-.035em → 450/-.022em. */
.open-statement > p,
.open-statement > h2{
font-size:var(--d1);line-height:.96;letter-spacing:-.022em;
font-weight:450;max-width:22ch;margin:0;color:var(--text);
text-wrap:balance;
}
@media(max-width:900px){ .open-statement{grid-column:1 / -1;} }
/* F — ORTALI. Sayfadaki TEK ortalı kompozisyon (nav dışında), yalnızca
Ekip'te. Garage ile Ekip arka arkaya duruyor ve ikisi de A kullanıyordu;
ritim burada, kapanıştan hemen önce değişiyor.
Tek kullanımlık olması kasıtlı: ortalama ikinci kez yapıldığı anda
desen olmaktan çıkıp varsayılan hâline gelir.
Dar ekranda ortalama BIRAKILIR: 360px'de ortalı bir paragraf hem
satır başlarını kaybettiriyor hem tarama hızını düşürüyor. */
.open-centre{
grid-column:2 / 12;
display:flex;flex-direction:column;align-items:center;gap:var(--s5);
text-align:center;
}
.open-centre > p{max-width:36rem;}
@media(max-width:900px){
.open-centre{grid-column:1 / -1;text-align:left;align-items:flex-start;}
}
/* ============================================================
BÖLÜM GEÇİŞLERİ — ikisi de dönüşümlü, hiçbiri üzerinde ad taşımaz.
BURADA BİR ŞEY DENENDİ VE GERİ ALINDI, kaydı duruyor:
bir tur boyunca bu geçişler canvas'a ÇİZİLİYORDU — akan bir gece
haritası, ikiye ayrılan bir yol, metin bölümlerinin arkasında dolan
bir rota çizgisi. Teknik olarak çalışıyordu (periyodik desen, dikişsiz
döngü, kare başına sıfır maliyet) ama sahibin tek cümlesiyle düştü:
"js ve svg tabanlı şeyler kullanma, çok acemice duruyor."
Haklıydı. Çizilmiş bir yol, ne kadar iyi çizilirse çizilsin, çizim
olduğunu belli ediyor ve bir ürün sayfasında tel kafes gibi duruyor.
KURAL: bu geçişlerde çizim yok. Ya fotoğraf ya film.
Kalıcı hâl üretilmiş film; üretim kotası dolduğu için şu an fotoğraf.
============================================================ */
/* T1 — YOL KESİTİ. Tam kanama medya bandı. Üstü ve altı doğrusal
maskeyle eriyor, yani BİR KENARI YOK: her iki komşusunun altına
sızıyor ve gözün kaydedeceği bir sınır kalmıyor. Kenarsızlık pahalı
okunmasının nedeni — medya tam bu kırpım için seçilmiş gibi durur. */
.band{
position:relative;width:100%;
height:clamp(280px, 46svh, 520px);
overflow:hidden;
-webkit-mask-image:linear-gradient(180deg, transparent, black 18%, black 82%, transparent);
mask-image:linear-gradient(180deg, transparent, black 18%, black 82%, transparent);
}
/* Bant DURUYOR. Burada bir paralaks vardı — %116 yükseklik ve
kaydırmaya bağlı ±%8 kayma — ve o da gitti. Sahibin kararı net:
"o jsdeki kısımlar image olarak kalsın, css js animate etmektense."
Kaydırma zaman çizelgesi JS'siz ve derleyicide kalan bir tekniktir,
yani ucuzdu; ama mesele maliyet değil. Bir fotoğrafı kaydırırken
oynatmak, fotoğrafın kendi kadrajına güvenmediğini söyler. Kadraj
doğruysa hareket gereksiz, yanlışsa hareket onu kurtarmaz.
Geriye tek iş kalıyor: görüntüyü kenar boşluğu bırakmadan
yerleştirmek. */
.band > img,
.band > video{
width:100%;height:100%;
object-fit:cover;object-position:50% 45%;
}
/* T2 — BOŞLUK. İçinde hiçbir şey olmayan, ölçülmüş bir zemin aralığı.
Kalan boşluk değil, yazılmış bir sessizlik: her iki yanındaki bölüm
dolgusundan daima daha uzun.
Kural: bir boşluk asla başka bir boşluğun yanına gelmez. */
/* v9: boşluk KÂĞIT. Sayfanın varsayılanı kâğıt olunca iki açık bölüm
arasında gece bir şerit kalmasın. */
.void{height:clamp(120px, 20svh, 240px);background:var(--paper);}
/* ============================================================
IŞIK RİTMİ — bölüm zeminleri
============================================================
Sayfanın gecesi varsayılan; bu iki sınıf yalnızca iki bölümde
kullanılır ve her biri KENDİ TAM METİN ÖLÇEĞİNİ bölümün köküne
yazar. Yöntem bilinçli: bileşenler renklerini yeniden bildirmiyor,
SİSTEM JETONLARI yeniden tanımlanıyor. Böylece .d2, .lead, sönük
adım tonu, saç teli ve odak halkası tek yerden dönüyor ve
"açık zeminde şu bileşen unutulmuş" durumu yapısal olarak imkânsız
hâle geliyor.
Gerekçesi ve ölçümleri dosyanın başındaki TEZ bloğunda.
============================================================ */
/* KÂĞIT — v9'dan beri sayfanın varsayılanı (neden, 03, ürün, nasıl,
ölçüm, modlar, garage, insan, ekip, sorular, altlık).
Zemin DÜZ: gün ışığı sızıntısı denendi ve bant kırılması yüzünden
düştü (TEZ). Kesme ile giriliyor, kesme ile çıkılıyor.
--blue BİLEREK ezilmiyor: `::selection` onu --cta-ink ile eşliyor ve
kâğıt üzerinde koyu metinli koyu bir seçim kutusu üretirdi. Kâğıdın
mavisi --cyan üzerinden geliyor, yani hem seçili adım rakamı hem
odak halkası tek jetondan besleniyor.
--lit BİLEREK ezilmiyor: telefon ekranındaki yansıma (.device__glare)
onu degrade durağı olarak okuyor ve opak bir karşılık ekranda beyaz
bir şerit bırakırdı; şasi malzemesi --panel üzerinden dönüyor. */
.ground-day{
background:var(--paper);
color:var(--paper-text);
--text:var(--paper-ink);
--text-2:var(--paper-text);
--text-3:var(--paper-text-3);
--line:var(--paper-line);
--line-soft:var(--paper-line-soft);
--cyan:var(--paper-blue);
--panel:var(--paper-raised);
--fill:var(--paper-fill);
--danger:var(--paper-danger);
}
/* AKŞAM KALKTI (v9): .ground-dusk ve --warm ölçeği silindi, Ekip
kâğıtta. */
/* ============================================================
AÇILIŞ HAREKETİ — yönlü silme, "22px yukarı sönümlenme" değil.
Fade-up + kademeli gecikme her üreticinin varsayılan ön ayarıdır ve
her slop kontrol listesinde yer alır. clip-path derleyici dostudur.
Yön anlam taşır: medya SOLDAN (rota yönü), metin YUKARI silinir.
============================================================ */
/* v8d — SİLME DEĞİL YÜKSELME. Referans giscarta.com (Framer "appear"):
öğe 16px aşağıdan, saydamdan geliyor; 250 ms'de yerinde, kademeli.
Eski clip-path silmesi "perde açılıyor" gibi okunuyordu; bu daha
sakin ve daha hızlı. Medya (.wipe-x) kaymaz, hafifçe büyüyerek
oturur — giscarta'nın ürün karesi gibi. Sürücü aynı: motion.js
getBoundingClientRect ile is-in yazıyor. */
.wipe{
opacity:0;transform:translateY(16px);
transition:opacity var(--enter) var(--ease-out), transform var(--enter) var(--ease-out);
}
.wipe-x{
opacity:0;transform:scale(.985);
transition:opacity var(--enter) var(--ease-out), transform var(--enter) var(--ease-out);
}
.wipe.is-in,.wipe-x.is-in{opacity:1;transform:none;}
.no-js .wipe,.no-js .wipe-x{opacity:1;transform:none;}
/* En fazla dört öğe, 50-70ms adım. 100ms+ adım yok. */
.stagger-1{transition-delay:60ms;}
.stagger-2{transition-delay:120ms;}
.stagger-3{transition-delay:180ms;}
/* ============================================================
ÇEVRE İZİ (neon dolum göstergesi)
Bir dikdörtgenin kenarında dolaşan ince mavi ışık. Tek bir
conic-gradient, iki katmanlı maskeyle 1px'lik bir halkaya indirgenir —
SVG yok, ekstra düğüm yok, animasyon yalnızca tek bir sayı üzerinde.
KURAL: bu iz BOŞTA DÖNMEZ. Her kullanımı bir duruma bağlı — Garage'da
"bu sınıf seçildi", modlarda "bu panelin üzerindeyim". Sürekli dönen
bir çevre ışığı, anlatısal görevi olmayan dekoratif harekettir ve dört
panelde birden koşarsa bedeli de vardır.
@property olmadan --trace bir dizedir ve ara değer üretmez; kayıt
edilince gerçekten 0'dan 1'e akar.
============================================================ */
@property --trace{ syntax:''; inherits:false; initial-value:0; }
.trace{position:relative;}
.trace::before{
content:"";position:absolute;inset:0;z-index:2;
pointer-events:none;
border-radius:inherit;
padding:1px;
background:conic-gradient(from -90deg,
var(--blue) calc(var(--trace) * 360deg),
transparent 0);
-webkit-mask:linear-gradient(black, black) content-box,
linear-gradient(black, black);
-webkit-mask-composite:xor;
mask:linear-gradient(black, black) content-box,
linear-gradient(black, black);
mask-composite:exclude;
opacity:0;
}
/* Işık kenarı DOLAŞIR VE GİDER. Bitişte ekranda kalsaydı dört kenarlı
kalıcı bir çerçeve olurdu — sözleşmenin açıkça yasakladığı şey. İz bir
DEĞİŞİM sinyalidir ("bu seçildi"), duruş hâli değil; duruşu zaten adın
tonu, altındaki mavi kural ve hacim aralığının rengi taşıyor. */
@keyframes traceRun{
0% {--trace:0; opacity:1;}
68% {--trace:1; opacity:1;}
100%{--trace:1; opacity:0;}
}
.trace.is-tracing::before{
animation:traceRun 900ms var(--ease-out) forwards;
}
/* Hareket azaltmada iz hiç koşmaz. Yerine bir şey KOYMAYA da gerek yok:
seçili durumu taşıyan üç gösterge (ad tonu, mavi kural, hacim rengi)
zaten hareketsiz çalışıyor. */
/* Ölçüt medya sorgusu değil bayrak: karar :root[data-motion] üzerinde (v9:
varsayılan açık; altlıktaki anahtar kalktı, bayrak QA için duruyor). */
:root[data-motion="off"] .trace::before{display:none;}
/* ============================================================
NAV — sayfadaki tek ortalı öğe.
============================================================ */
/* ÜÇ ADA (v8). Eskiden tek bir ada vardı ve her şeyi taşıyordu: marka,
bağlantılar, dil, hap. Kurucunun isteği markayı sola, hapı sağa
AYIRMAKTI — Kurviger ve calimoto'nun yaptığı şey, ve 21st.dev'deki
navbar bloklarının çoğunun düzeni: logo solda, bağlantılar ortada,
eylem sağda. Üç sütunlu ızgara: kenar sütunları en az kendi içeriği
kadar (`minmax(max-content,1fr)`), yani ada sığmazsa kenarları
ezmez, taşar ve görünür — 860–1023 arası için sıkı kural aşağıda.
Marka ve hap tek başına kalınca aydınlık bölümlerde (--paper)
okunmaz olurdu; bu yüzden marka ve mobil düğme adanın MALZEMESİNİ
alıyor: aynı cam, aynı yükseklik, aynı kaydırma davranışı. Hap
zaten beyaz dolu. Üç ada, tek kıyafet. */
.nav{
position:fixed;top:0;left:0;right:0;z-index:50;
display:grid;
grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr);
align-items:center;column-gap:var(--s4);
padding:var(--s4) var(--s5) 0;
pointer-events:none;
}
.nav > *{pointer-events:auto;}
/* Sütunlar AÇIKÇA atanır. Dar ekranda orta ada display:none, yani ızgara
öğesi değil ve hücre işgal etmiyor; atama olmasaydı sağ uç kendiliğinden
ikinci sütuna kayıp markanın dibine yapışıyordu (ölçüldü, 390 piksel:
206–262). */
.nav__inner,
.nav > .brand,
.nav__toggle{
height:56px;
border-radius:var(--r-pill);
background:rgba(var(--ink-rgb),.62);
box-shadow:inset 0 1px 0 var(--lit), var(--sh-1);
backdrop-filter:blur(20px) saturate(160%);
-webkit-backdrop-filter:blur(20px) saturate(160%);
transition:height var(--state) var(--ease-state),
background-color var(--state) var(--ease-state);
}
.nav.is-scrolled .nav__inner,
.nav.is-scrolled > .brand,
.nav.is-scrolled .nav__toggle{height:50px;background:rgba(var(--ink-rgb),.88);}
.nav__inner{
display:none;
align-items:center;gap:clamp(var(--s5), 3vw, var(--s7));
width:max-content;max-width:100%;
grid-column:2;justify-self:center;
padding-inline:var(--s5);
}
.nav > .brand{grid-column:1;justify-self:start;padding-inline:var(--s4) var(--s5);}
.nav__end{grid-column:3;justify-self:end;display:flex;align-items:center;gap:var(--s3);}
/* 860–1023: üç ada yan yana ancak sıkışarak sığar (ölçüldü: 860'ta
812px yer var, gevşek ada 862px istiyor). Bağlantı aralığı ve punto
bir kademe iner; 1024'ten sonra gevşek hâline döner. */
@media(min-width:860px) and (max-width:1023px){
.nav__inner{gap:var(--s5);padding-inline:var(--s4);}
.nav__links{gap:var(--s5);}
.nav__links a{font-size:14px;}
}
/* Marka işareti. (v8d: çevresindeki okuma yayı kaldırıldı — aşağıdaki
nota bakın; kaydırma ilerlemesini yalnız adanın altındaki ray taşıyor.) */
.brand{position:relative;display:flex;align-items:center;gap:var(--s2);}
.brand__mark{position:relative;display:grid;place-items:center;}
.brand__mark img{
height:26px;width:auto;
transition:height var(--state) var(--ease-state);
/* AÇILIŞ — bir kez. İşaret sayfayla birlikte ORADA BİTMİYOR, geliyor:
hafifçe küçükten oturuyor ve aynı anda beliriyor. 520ms, --ease-out,
tek koşu, `both` ile son durumda kalıyor.
Nav SABİT ve ziyaret boyunca ekranda; buradaki her sonsuz animasyon
bütün ziyaret boyunca koşar. Bu yüzden işarette tek bir kerelik
animasyon var; kaydırma ilerlemesini adanın altındaki ray taşıyor.
(v8d: hapın altı saniyede bir geçen ışığı bu kuralın bilinçli tek
istisnası — kurucunun isteği, gerekçesi .pill::after'da.) */
animation:brandIn 520ms var(--ease-out) both;
}
@keyframes brandIn{
from{opacity:0;transform:scale(.86);}
to {opacity:1;transform:none;}
}
.nav.is-scrolled .brand__mark img{height:22px;}
/* DİNLENME HÂLESİ KALDIRILDI (v7).
Burada işaretin arkasında sabit bir mavi hâle vardı: sayfanın ilk
pikselinde bile görünüyor, kaydırma başlayınca .22'den .5'e
güçleniyordu. Yorumu onu "durum göstergesi" diye savunuyordu ama
göstermediği tek durum yoktu — sayfa dururken de oradaydı, yani
dosyanın tezini ("mavi yalnızca MotoMap bir şey yaparken görünür")
tam olarak ihlal eden şeydi. Nav SABİT, dolayısıyla o hâle bütün
ziyaret boyunca ekranda duran ve hiçbir şey söylemeyen bir maviydi.
Aynı işaretin arkasında o sırada bir de okuma yayı vardı (::before,
--read ile dolan); iki mavi ışık aynı 26px'lik işareti paylaşınca
hangisinin bir şey söylediği okunmuyordu. v8d'de yay da kaldırıldı:
işaretin çevresinde artık hiçbir ışık yok.
Sonuç: sayfanın en üstünde artık HİÇ mavi yok. İlk mavi, ziyaretçi
okumaya başladığı anda geliyor. */
/* Ölçüt medya sorgusu değil bayrak: karar :root[data-motion] üzerinde (v9:
varsayılan açık; altlıktaki anahtar kalktı, bayrak QA için duruyor). */
:root[data-motion="off"] .brand__mark img{animation:none;}
/* OKUMA YAYI KALDIRILDI (v8d). İşaretin çevresinde --read ile dolan ve
kaydırma durunca sıfırdan yeniden dolan bir halka vardı. Kurucu:
"hiç temiz gözükmüyor, her scroll'da sıfırdan tekrar doluyor —
istediğimiz bu stil bir şey değil." Halka, @property --read ve
is-refilling/is-settled durumları silindi; motion.js artık --read
yazmıyor. Okuma ilerlemesini adanın altındaki ray taşımaya devam
ediyor (.nav__rail) — tek gösterge, sessiz. */
/* WORDMARK (v8d). "MOTOMAP" geniş aralıklı büyük harf yerine uygulamadaki
wordmark: "MotoMap", şirket yüzü Geist, 600, sıkı aralık; "Map"
marka mavisinin metin tonunda (--cyan, AA). Kurucunun isteği: font
şirket fontu olsun, MAP kısmına temiz mavi bir şey gelsin. */
/* v10 — kurucu: nav'daki "MotoMap" daha kurumsal, "monospaceli ama
güzel" olsun. Yeni bir dosya yok: sayfanın zaten yüklü Geist Mono'su
(--mono) tam bu sesi taşıyor — ölçüm kaydının da fontu. */
.brand__word{
font-family:var(--mono);
font-size:15px;font-weight:560;letter-spacing:-.01em;color:var(--text);
}
.brand__map{color:var(--cyan);}
/* ── METİN İÇİNDEKİ MARKA ADI ──
Kurucunun kararı: "MotoMap" sayfada nerede geçerse geçsin şirket
yüzüyle dizilsin ve "Map" marka mavisinde olsun. Düğümleri motion.js
çalışma zamanında kuruyor (sözlük dizeleri işaretleme taşımıyor).
BOY MİRAS ALINIR: başlıkta başlık boyunda, gövdede gövde boyunda
okunur; değişen yalnızca aile, ağırlık ve "Map"in rengi — nav'daki
wordmark'ın birebir aynısı. */
.wordmark{font-family:var(--mono);font-weight:560;letter-spacing:-.01em;}
.wordmark__map{color:var(--cyan);}
.nav__links{display:none;align-items:center;gap:var(--s6);}
.nav__links a{
position:relative;padding-block:var(--s2);
font-size:15px;font-weight:600;color:var(--text-2);
transition:color var(--ui) var(--ease-state);
}
.nav__links a::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
background:var(--blue-line);
transform:scaleX(0);transform-origin:left center;
transition:transform var(--state) var(--ease-out);
}
.nav__links a:hover{color:var(--text);}
@media (hover:hover) and (pointer:fine){
.nav__links a:hover::after{transform:scaleX(1);}
}
/* Sayfadaki TEK dolu düğme kıyafeti.
Arkasındaki mavi hâle DİNLENMEDE SÖNÜK (v7). Eskiden .55'te duruyordu:
nav sabit olduğu için o hâle bütün ziyaret boyunca ekrandaydı ve
yorumu onu "geri bildirim" diye savunmasına rağmen hiçbir şeye cevap
vermiyordu. Şimdi gerçekten geri bildirim: hap üzerindeyken ya da
odaktayken yanıyor, basılınca kısılıyor, geri kalan zaman yok.
İşaretçisi olmayan cihazda hiç görünmüyor — orada hover diye bir
durum yok ve olmayan bir duruma ışık yakmak yalan olurdu. */
.pill{
position:relative;
display:none;align-items:center;justify-content:center;
height:38px;padding-inline:var(--s5);
border-radius:var(--r-pill);
background:var(--cta-bg);color:var(--cta-ink);
font-size:14px;font-weight:600;letter-spacing:-.005em;
transition:transform var(--press) var(--ease-out);
}
.pill::before{
content:"";position:absolute;inset:-3px;z-index:-1;
border-radius:var(--r-pill);
background:var(--blue);
filter:blur(11px);
opacity:0;
transition:opacity var(--ui) var(--ease-state),
transform var(--ui) var(--ease-out);
}
/* SAKİN IŞIK SÜPÜRMESİ (v8d). Kurucu: "closed beta'da güzel saf temiz bir
animasyon olmalı." Beyaz hapın üstünden altı saniyede bir, 1,4 sn
süren mavi tonlu ince bir ışık geçiyor — degrade konumu animasyonu,
taşma yok, düzen işi yok. Dosyanın "boşta dönen yok" kuralının
bilinçli tek istisnası; sayfadaki tek dönüşüm noktasına işaret eder. */
.pill::after{
content:"";position:absolute;inset:0;z-index:0;
border-radius:inherit;pointer-events:none;
background:linear-gradient(115deg, transparent 38%, var(--blue-soft) 50%, transparent 62%);
background-size:260% 100%;background-position:130% 0;
animation:pillSheen 6s var(--ease-io) infinite;
}
@keyframes pillSheen{
0%{background-position:130% 0;}
23%{background-position:-30% 0;}
100%{background-position:-30% 0;}
}
:root[data-motion="off"] .pill::after{animation:none;}
.pill > span{position:relative;z-index:1;}
@media (hover:hover) and (pointer:fine){
.pill:hover::before{opacity:.85;transform:scale(1.06);}
}
.pill:focus-visible::before{opacity:.85;}
.pill:active{transform:scale(.97);}
.pill:active::before{opacity:.4;}
/* DİL MENÜSÜ (v8d). TR / EN parçalı anahtar yerine dünya ikonu + kod +
ok; tıklanınca liste açılır. Kurucu: "birden fazla dil olacak gibi."
Seçenekler i18n.js'in zaten dinlediği .lang__opt düğmeleri — dil
mantığı değişmedi, yalnız kabı. Bayrak yok (bayrak ülke gösterir).
Liste adanın malzemesinden (gece cam), seçili satırda mavi nokta. */
.lang{position:relative;display:none;}
.lang__toggle{
display:inline-flex;align-items:center;gap:6px;
height:30px;padding-inline:var(--s2) 6px;
border-radius:var(--r-pill);
color:var(--text-2);
font-size:12px;font-weight:600;letter-spacing:.04em;
transition:color var(--ui) var(--ease-state), background-color var(--ui) var(--ease-state);
}
.lang__toggle svg{width:16px;height:16px;flex-shrink:0;}
.lang__toggle .lang__chev{width:12px;height:12px;transition:transform var(--ui) var(--ease-state);}
@media (hover:hover) and (pointer:fine){ .lang__toggle:hover{color:var(--text);} }
.lang__toggle[aria-expanded="true"]{color:var(--text);background:var(--lit);}
.lang__toggle[aria-expanded="true"] .lang__chev{transform:rotate(180deg);}
.lang__list{
position:absolute;top:calc(100% + var(--s2));right:0;
min-width:10.5rem;padding:var(--s1);
display:grid;gap:2px;
border-radius:var(--r-md);
background:rgba(var(--ink-rgb),.94);
box-shadow:inset 0 1px 0 var(--lit), var(--sh-2);
backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
animation:langIn var(--ui) var(--ease-out) both;
}
.lang__list[hidden]{display:none;}
@keyframes langIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
.lang__opt{
display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
height:36px;padding-inline:var(--s3);
border-radius:calc(var(--r-md) - 4px);
font-size:14px;color:var(--text-2);text-align:left;
transition:color var(--ui) var(--ease-state), background-color var(--ui) var(--ease-state);
}
.lang__opt.is-on{color:var(--text);background:var(--lit);}
.lang__opt.is-on::after{content:"";width:6px;height:6px;border-radius:var(--r-pill);background:var(--blue);}
@media (hover:hover) and (pointer:fine){ .lang__opt:not(.is-on):hover{color:var(--text);} }
.lang__opt:active{transform:scale(.98);}
@media(min-width:860px){ .lang{display:block;} }
/* Mobil menüde liste düz durur: kap yok, satırlar 44px dokunma hedefi. */
.lang--menu{display:grid;gap:2px;margin-top:var(--s4);width:100%;}
.lang--menu .lang__opt{height:44px;}
@media(min-width:860px){ .lang--menu{display:none;} }
:root[data-motion="off"] .lang__list{animation:none;}
.nav__toggle{display:flex;align-items:center;justify-content:center;width:56px;color:var(--text-2);}
.nav.is-scrolled .nav__toggle{width:50px;}
.nav__toggle svg{width:20px;height:20px;}
.nav__menu{
display:none;
grid-column:1 / -1;
width:min(100%, 28rem);margin:var(--s3) auto 0;
padding:var(--s4) var(--s5) var(--s5);
border-radius:var(--r-md);
background:rgba(var(--ink-rgb),.96);
box-shadow:inset 0 1px 0 var(--lit), var(--sh-2);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
}
.nav__menu.is-open{display:block;}
.nav__menu a{display:block;padding-block:var(--s3);font-size:17px;color:var(--text-2);}
/* Çekmecedeki hap `.nav__menu a` kuralının (0,1,1) rengini alıyordu:
beyaz hap üzerinde gri yazı (ölçüldü, 390px). Renk burada geri
yazılıyor; özgüllük (0,2,0). */
.nav__menu .pill{display:flex;margin-top:var(--s3);width:100%;height:44px;color:var(--cta-ink);}
@media(min-width:860px){
.nav__inner{display:flex;}
.nav__links{display:flex;}
.pill{display:inline-flex;}
.nav__toggle{display:none;}
}
/* Dar ekranda orta ada boş kalırdı (bağlantılar ve dil gizli); ada da
altındaki okuma rayı da gizlenir, geriye marka ve menü düğmesi kalır. */
@media(max-width:859px){
.nav__rail{display:none;}
}
/* Okuma rayı: adanın alt kenarında, sayfanın kendi rota çizgisi.
En üstte gizli — okunacak bir ilerleme yokken film üzerinde başıboş
bir çizgi gibi duruyordu. */
.nav__rail{
position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);
width:min(18rem, 56%);height:2px;border-radius:var(--r-pill);
background:var(--line-soft);overflow:hidden;pointer-events:none;
opacity:0;transition:opacity var(--state) var(--ease-state);
}
.nav.is-scrolled .nav__rail{opacity:1;}
.nav__rail span{
display:block;width:100%;height:100%;
background:var(--blue);
transform:scaleX(0);transform-origin:left center;
}
/* ============================================================
DÜĞMELER
============================================================ */
.cta{
display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
height:52px;padding-inline:var(--s7);
border-radius:var(--r-pill);
background:var(--cta-bg);color:var(--cta-ink);
font-size:16px;font-weight:600;letter-spacing:-.005em;
transition:transform var(--press) var(--ease-out);
}
.cta:active{transform:scale(.97);}
.cta svg{width:16px;height:16px;transition:transform var(--state) var(--ease-out);}
@media (hover:hover) and (pointer:fine){
.cta:hover svg{transform:translateX(6px);}
}
/* İkincil eylem: hap tekrarı yok, altı çizili metin bağlantısı.
ALTÇİZGİ DİNLENMEDE NÖTR (v7). Eskiden --blue-line ile duruyordu ve
ok ucu da sürekli --cyan'dı: hero'da, altlıkta ve form yedeğinde
hiçbir şey olmadan üç mavi vardı. Mavi burada da bir DURUM taşıyor
artık — imleç üzerine geldiğinde hem kural hem ok camgöbeğine
geçiyor, geri kalan zaman bağlantı nötr gri bir çizgi. */
.link{
display:inline-flex;align-items:center;gap:var(--s2);
font-size:16px;font-weight:600;color:var(--text);
padding-bottom:var(--s1);
box-shadow:inset 0 -1px 0 var(--line);
transition:box-shadow var(--ui) var(--ease-state);
}
.link svg{
width:16px;height:16px;color:var(--text-3);
transition:transform var(--state) var(--ease-out),
color var(--ui) var(--ease-state);
}
.link:focus-visible{box-shadow:inset 0 -1px 0 var(--cyan);}
.link:focus-visible svg{color:var(--cyan);}
@media (hover:hover) and (pointer:fine){
.link:hover{box-shadow:inset 0 -1px 0 var(--cyan);}
.link:hover svg{transform:translateX(6px);color:var(--cyan);}
}
.link:active{transform:scale(.97);}
/* ============================================================
ÖZNE — çıplak zeminde, çerçevesiz.
Kenarlık yok, yarıçap yok, zemin yok, dikdörtgenin ETRAFINDA gölge
yok. Yere basmasını sağlayan tek şey ALTINA çizilen eliptik zemin
gölgesi. Garage render'ları zaten saf siyah üzerinde üretildi, bu
yüzden sayfa zemininde dikişsiz oturuyorlar.
============================================================ */
.subject{position:relative;}
.subject img{width:100%;height:auto;object-fit:contain;}
.subject::after{
content:"";position:absolute;inset:auto 0 0 0;height:14%;pointer-events:none;
background:radial-gradient(ellipse 55% 60% at 50% 100%, var(--shadow-contact), transparent 70%);
}
/* ============================================================
ERİŞİLEBİLİRLİK / HAREKET AZALTMA
Evrensel `*{animation-duration:.001ms!important}` çekici BİLİNÇLİ
OLARAK KULLANILMIYOR: hiçbir sonraki bildirim onu geçemiyor ve
showcase'in yükleniyor halkasını donduruyordu — yani sahibin
istediği "yükleniyor durumu"nu yalana çeviriyordu.
Burada son durumlar ADIYLA render edilir, hareket AZALIR, sıfırlanmaz.
============================================================ */
/* Ölçüt medya sorgusu değil bayrak: karar :root[data-motion] üzerinde (v9:
varsayılan açık; altlıktaki anahtar kalktı, bayrak QA için duruyor). */
:root[data-motion="off"] .wipe,
:root[data-motion="off"] .wipe-x{opacity:1;transform:none;transition:none;}
:root[data-motion="off"] .brand__mark::before{transition:none;}
:root[data-motion="off"] .nav__inner,
:root[data-motion="off"] .brand img,
:root[data-motion="off"] .nav__rail{transition:none;}
/* KORUNUR: 200ms altı opaklık/renk geçişleri — odak halkası, seçili
durum, nav okunabilirlik değişimi ve yükleniyor göstergesi. */
@media (prefers-reduced-transparency: reduce){
.nav__inner,.nav__menu{
backdrop-filter:none;-webkit-backdrop-filter:none;
background:var(--ink);
}
}
/* HAREKET ANAHTARI KALKTI (v9): kurucu altlıktaki "Hareket" düğmesini
kaldırdı; bayrak varsayılan açık (index.html ). */
/* ============================================================
HERO GİRİŞİ (v8d) — giscarta.com'un giriş dili
============================================================
Sayfa açılınca üst yazı, başlık, satır ve düğmeler 16px aşağıdan
sırayla yükselerek beliriyor (0 / 90 / 180 / 270 ms, 720 ms);
film hafif büyük başlayıp yerine oturuyor (1,04 → 1, 1,6 s). Hızlı ve
sakin: ziyaretçi daha okumaya başlamadan her şey yerinde.
Hareket bayrağı kapalıysa hiçbiri koşmaz, son durum anında yazılır.
============================================================ */
.hero__kicker,.hero__title,.hero__lead,.hero__actions{
animation:heroIn 720ms var(--ease-out) both;
}
.hero__title{animation-delay:90ms;}
.hero__lead{animation-delay:180ms;}
.hero__actions{animation-delay:270ms;}
@keyframes heroIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
/* Ölçek SARMALAYICIDA (.hero__media: poster + video birlikte): video
posterin üstünde belirirken ikisi aynı ölçekte olsun, sıçrama olmasın. */
.hero__media{animation:heroMediaIn 1600ms var(--ease-out) both;}
@keyframes heroMediaIn{from{transform:scale(1.04);}to{transform:none;}}
:root[data-motion="off"] .hero__kicker,
:root[data-motion="off"] .hero__title,
:root[data-motion="off"] .hero__lead,
:root[data-motion="off"] .hero__actions,
:root[data-motion="off"] .hero__media{animation:none;}