/* ========================================================================== Delta Motor — Tasarim jetonlari Tek dogruluk kaynagi. Renk/olcu degeri dogrudan baska dosyaya yazilmaz, buradan var() ile cekilir. ========================================================================== */ /* --- Olcu uyumlu yedek font ----------------------------------------------- Archivo `display=swap` ile geliyor: once yedek font ciziliyor, sonra takas ediliyor. Yedek font dar cizdigi icin baslik takasta satir sayisi degistiriyor ve sayfa asagi kayiyordu (olculdu: hero basligi 348px -> 522px). `size-adjust` yedegi Archivo genisligine getirir, satir sayisi sabit kalir. Deger olculdu (Chrome, 106/680 ayarinda): Helvetica Neue %107,1 · Arial %105,9 -> ortak deger %106,5. Baslik ayari degisirse YENIDEN OLCULMELI. -------------------------------------------------------------------------- */ @font-face { font-family: 'Archivo Fallback'; src: local('Helvetica Neue'), local('Arial'), local('Liberation Sans'); size-adjust: 106.5%; font-weight: 400 900; font-style: normal; } :root { color-scheme: light; /* --- Renk: acik mod -------------------------------------------------- `--c-ink` SADECE metin rengidir. Koyu panellerin (footer, .section--ink) zemini icin `--c-invert-*` kullanilir; koyu modda bu ikisi ayrisir. --------------------------------------------------------------------- */ --c-bg: #F7F8FA; /* sayfa zemini */ --c-surface: #FFFFFF; /* kart, panel */ --c-surface-alt: #EEF1F6; /* ikincil yuzey, tablo seridi */ --c-ink: #0F172A; /* ana metin */ --c-ink-mute: #5A6478; /* ikincil metin */ --c-ink-faint: #98A1B3; /* etiket, pasif */ --c-line: #DDE2EA; /* kenarlik */ --c-line-strong: #C3CAD6; /* vurgulu kenarlik */ --c-blue: #0B45D0; /* birincil: baglanti, ray, musait */ --c-blue-deep: #072F91; /* hover */ --c-blue-wash: #E7EDFC; /* mavi zemin */ --c-red: #D31E28; /* vurgu: CTA, aktif, dolu */ --c-red-deep: #A5141C; /* hover */ --c-red-wash: #FCEAEB; /* kirmizi zemin */ --c-focus: #0B45D0; /* klavye odagi */ /* Marka yuzeyi uzerindeki metin — dolu mavi/kirmizi zeminler */ --c-on-brand: #FFFFFF; /* Etkilesimli kontrol kenarligi (input, ikon dugmesi, secilebilir kart). `--c-line-strong`ten ayri: o dekoratif ayraclarda kullaniliyor ve WCAG 1.4.11'in 3:1 esigini tasimasi gerekmiyor. */ --c-edge-ctl: #8B93A3; /* Ters panel — footer ve .section--ink */ --c-invert-bg: #0F172A; --c-invert-fg: #F7F8FA; --c-invert-mute: #A9B2C4; --c-invert-faint: #97A1B3; --c-invert-line: rgba(255, 255, 255, 0.12); --c-invert-edge: rgba(255, 255, 255, 0.34); /* Koyu perde uzerindeki mavi vurgu. --c-blue acik temada #0B45D0 olup video perdesinde okunmaz; bu deger her iki temada da aynidir. */ --c-blue-invert: #6E9BFF; /* Koyu dugme yuzeyi (btn hover) */ --c-ink-hover: #1D2941; /* Ust katman zemini — baslik seffafligi */ --c-veil: rgba(247, 248, 250, 0.88); --c-veil-solid: rgba(247, 248, 250, 0.96); } /* ========================================================================== Koyu mod `` ile acilir. Tercih head icindeki kucuk betikle boyanmadan once yazilir, boylece yanlis temayla yanip sonme olmaz. Sistem tercihi de ayni betikte okunur; burada media query tekrari yok. ========================================================================== */ :root[data-theme='dark'] { color-scheme: dark; --c-bg: #0B0F1A; --c-surface: #131A2A; --c-surface-alt: #1B2334; --c-ink: #E8ECF5; --c-ink-mute: #A3ADC2; /* #6C7689 idi: 12px mono etiketlerde 3.4-4.2:1 kaliyordu, 4.5 gerekiyor */ --c-ink-faint: #8A94A6; --c-line: #232C3F; --c-line-strong: #36425C; /* Mavi ve kirmizi koyu zeminde aciliyor — #0B45D0 koyuda okunmuyor */ --c-blue: #6E9BFF; --c-blue-deep: #9CBBFF; --c-blue-wash: #17203C; --c-red: #FF6069; --c-red-deep: #FF8E95; --c-red-wash: #331519; --c-focus: #6E9BFF; /* Marka renkleri koyu modda acildigi icin uzerlerinde beyaz metin okunmuyor (2.0-3.0:1). Koyu metin 6.5-10:1 veriyor. */ --c-on-brand: #0B0F1A; --c-edge-ctl: #616E8A; /* Koyu modda ters panel daha KOYU degil, daha YUKSEK olur */ --c-invert-bg: #161E30; --c-invert-fg: #E8ECF5; --c-invert-mute: #A3ADC2; --c-invert-faint: #8A94A6; --c-invert-line: rgba(255, 255, 255, 0.10); --c-invert-edge: rgba(255, 255, 255, 0.34); --c-ink-hover: #202B44; --c-veil: rgba(11, 15, 26, 0.86); --c-veil-solid: rgba(11, 15, 26, 0.95); } :root { /* --- Tipografi -------------------------------------------------------- */ --f-display: 'Archivo', 'Archivo Fallback', 'Helvetica Neue', Arial, sans-serif; --f-body: 'IBM Plex Sans', 'Segoe UI', Roboto, Arial, sans-serif; --f-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Archivo degisken eksenleri — tabela hissi icin genisletilmis kullanilir */ --wdth-display: 118; --wdth-tight: 100; /* Olcek — 1.25 orani, akiskan */ --t-xs: 0.75rem; /* 12 */ --t-sm: 0.8125rem; /* 13 */ --t-base: 1rem; /* 16 */ --t-md: 1.0625rem; /* 17 */ --t-lg: clamp(1.125rem, 0.4vw + 1.03rem, 1.375rem); --t-xl: clamp(1.5rem, 1.1vw + 1.24rem, 2.125rem); --t-2xl: clamp(1.75rem, 2.1vw + 1.2rem, 2.75rem); --t-3xl: clamp(2.125rem, 3.2vw + 1.1rem, 3.75rem); --t-4xl: clamp(2.5rem, 5.6vw + 0.4rem, 6rem); /* 1.0 altina inme: buyuk harf Ş/Ç/Ğ kuyruklari ve İ noktasi kirpilir */ --lh-tight: 1.0; --lh-snug: 1.15; --lh-body: 1.6; --ls-display: -0.02em; --ls-label: 0.14em; /* mono etiketler */ /* --- Bosluk — 4px temel birim ---------------------------------------- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem; /* Bolum dikey ritmi */ /* Bolum ic boslugu. Iki bolum arasindaki GORUNEN bosluk bunun IKI KATIDIR (ustteki bolumun alti + alttakinin ustu) — deger secilirken bu unutulmamali. 2026-09-01: kullanici karari, gorunen bosluk 201px'ten 72px'e indirildi (1435px'de 2.5vw = 35.9px x 2). Mobilde 24 x 2 = 48px. */ --sec-y: clamp(1.5rem, 2.5vw, 2.5rem); /* --- Yerlesim --------------------------------------------------------- */ --rail-w: 4.5rem; /* sol olcu rayi genisligi (>=1080px) */ --page-max: 82.5rem; /* 1320px */ --page-pad: clamp(1.25rem, 4vw, 3.5rem); /* 2026-09-02: 4,5rem (72px) -> 3,75rem (60px), kullanici istegi. OLCULDU: header icindeki en yuksek oge 49px (Randevu Al dugmesi), yani 72px'te 23px bos pay vardi. 60px'te pay 11px'e iniyor — dugme ve 40px'lik ikon dugmeleri rahat siginiyor. Daha asagi inilecekse ONCE `.btn` dolgusu kucultulmeli, yoksa dugme header'i kendisi buyutur (min-height yalnizca ALT sinirdir). */ --header-h: 3.75rem; /* Anasayfa video sahnesi. Serit degil SAHNE: basligin altindaki ilk ekrani doldurur. Ust sinir 50rem — 4K ekranda video devlesmesin. */ --hero-h: clamp(34rem, calc(100svh - var(--header-h)), 50rem); /* --- Kenar, golge ----------------------------------------------------- */ --r-none: 0; --r-sm: 2px; --r-md: 4px; --r-lg: 8px; --sh-sm: 0 1px 2px rgba(15, 23, 42, 0.05); --sh-md: 0 2px 8px rgba(15, 23, 42, 0.07), 0 1px 2px rgba(15, 23, 42, 0.05); --sh-lg: 0 12px 32px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.05); /* --- Hareket — olculu, 180-320ms, ease-out --------------------------- */ --e-out: cubic-bezier(0.22, 0.61, 0.36, 1); --e-in-out: cubic-bezier(0.65, 0, 0.35, 1); --d-fast: 160ms; --d-base: 240ms; --d-slow: 420ms; --z-rail: 20; --z-header: 40; --z-overlay: 60; } @media (prefers-reduced-motion: reduce) { :root { --d-fast: 1ms; --d-base: 1ms; --d-slow: 1ms; } }