/* ============================================================ ECOL — TASARIM TOKENLARI · yön: "Kor" Bağlayıcı kararlar DESIGN.md'de. Buradaki değerler oradan türer. TEMA: `assets/js/theme.js` 'e data-theme="light|dark" basar (İstanbul'un gün doğumu/batımına göre, kullanıcı seçimi kazanır). JS kapalıysa aşağıdaki prefers-color-scheme yedeği devreye girer. ============================================================ */ /* ---------- AÇIK TEMA (temel) ---------- */ :root { /* Zeminler — nötrler SICAK tarafa kaydırıldı, Tailwind slate DEĞİL */ --bg: #FBF8F5; --bg-soft: #F4EFE9; --bg-mute: #EDE6DE; --surface: #FFFFFF; --surface-sunk: #F7F2EC; --border: #E2DAD3; --border-soft: #EFE9E3; --text: #17120F; --text-soft: #4A423C; --text-mute: #6E645D; --text-subtle: #746B65; /* beyaz kart uzerinde 5.2:1 — #8A817B 3.8:1 kaliyordu */ --text-on-fill: #FFFFFF; /* MARKA — turuncu ve teal DENGEDE. İkisi de logodan. Rol: turuncu = eylem/sıcaklık · teal = sistem/veri (DESIGN.md §3.1) */ --orange: #F58236; /* logonun turuncusu — grafik/ışık. Üstüne beyaz metin YASAK (2.6:1) */ --orange-ink: #AD4A11; /* metin+dolgu — beyaz 5.6:1, yumusak zeminde 4.9:1 */ --orange-soft: #FBEEE3; --teal: #2BB8C4; /* logonun teal'i — grafik */ --teal-ink: #0E6A72; /* metin ve bağlantı — 6.1:1 */ --teal-soft: #E3F4F6; /* Mozaik pikselleri — yalnız işaret ve ışık alanında, seyrek */ --mosaic-orange: #F58236; --mosaic-green: #5BC07A; --mosaic-yellow: #F2C13A; --mosaic-red: #D9355C; --mosaic-blue: #3389C9; /* Durum — aksandan ayrı tutulur */ --success: #12744D; /* yumusak zeminde 5.0:1 — #157F55 4.4:1 kaliyordu */ --warning: #8A5F0C; /* yumusak zeminde 5.0:1 — #9A6B10 4.2:1 kaliyordu */ --danger: #B32347; --success-soft: #E3F3EC; --warning-soft: #FBF1DC; --danger-soft: #FBE7EC; /* Işık alanı (hero canvas) */ --field-warm: 244, 130, 54; --field-base: 120, 90, 70; --field-base-a: 0.045; --field-peak-a: 0.30; --field-scrim: linear-gradient(101deg, #FBF8F5 0%, #FBF8F5 74%, rgba(251,248,245,0.6) 84%, rgba(251,248,245,0) 97%); --header-bg: rgba(251, 248, 245, 0.84); --switch-track: #E5DCD3; --switch-knob: #FFFFFF; color-scheme: light; } /* ---------- KOYU TEMA ---------- */ :root[data-theme="dark"] { --bg: #100D0C; --bg-soft: #171312; --bg-mute: #1E1917; --surface: #171312; --surface-sunk: #0C0A09; --border: #2A2422; --border-soft: #201B19; --text: #F2EDE9; --text-soft: #C4BAB3; --text-mute: #A79E98; --text-subtle: #948A83; --text-on-fill: #17110C; --orange: #F2913F; --orange-ink: #E8873F; /* dolgu butonu — koyu metinle 6.4:1 */ --orange-soft: #2A1C12; --teal: #4FA8B0; --teal-ink: #6FB8BD; /* koyu zeminde bağlantı — 8.3:1 */ --teal-soft: #0E2124; --mosaic-orange: #F2913F; --mosaic-green: #5BC07A; --mosaic-yellow: #F2C13A; --mosaic-red: #E0526F; --mosaic-blue: #4E9BD4; --success: #4CC28E; --warning: #E0A93C; --danger: #EC6B87; --success-soft: #10231B; --warning-soft: #241C0E; --danger-soft: #26141A; --field-warm: 242, 145, 63; --field-base: 255, 244, 235; --field-base-a: 0.030; --field-peak-a: 0.38; --field-scrim: linear-gradient(101deg, #100D0C 0%, #100D0C 74%, rgba(16,13,12,0.6) 84%, rgba(16,13,12,0) 97%); --header-bg: rgba(16, 13, 12, 0.84); --mosaic-teal: #4FA8B0; --switch-track: #080605; --switch-knob: #C4BAB3; color-scheme: dark; } /* JS kapalıysa: işletim sistemi tercihine düş. Damga varsa bu blok devreye girmez. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --bg: #100D0C; --bg-soft: #171312; --bg-mute: #1E1917; --surface: #171312; --surface-sunk: #0C0A09; --border: #2A2422; --border-soft: #201B19; --text: #F2EDE9; --text-soft: #C4BAB3; --text-mute: #A79E98; --text-subtle: #948A83; --text-on-fill: #17110C; --orange: #F2913F; --orange-ink: #E8873F; --orange-soft: #2A1C12; --teal: #4FA8B0; --teal-ink: #6FB8BD; --teal-soft: #0E2124; --mosaic-orange: #F2913F; --mosaic-red: #E0526F; --mosaic-blue: #4E9BD4; --success: #4CC28E; --warning: #E0A93C; --danger: #EC6B87; --success-soft: #10231B; --warning-soft: #241C0E; --danger-soft: #26141A; --field-warm: 242, 145, 63; --field-base: 255, 244, 235; --field-base-a: 0.030; --field-peak-a: 0.38; --field-scrim: linear-gradient(101deg, #100D0C 0%, #100D0C 74%, rgba(16,13,12,0.6) 84%, rgba(16,13,12,0) 97%); color-scheme: dark; } } /* ---------- VURGU ROLLERİ ---------- Bileşenler (kor.css) rengi değil rolü çağırır. Ecol'ün birincil vurgusu logodaki turuncu kanca; teal ikincil kalır. Ürün sitelerinde bu atama tersine döner — bileşen sistemi aynıdır, marka ayrışır. */ :root { --accent: var(--orange); --accent-ink: var(--orange-ink); --accent-soft: var(--orange-soft); --accent2: var(--teal); --accent2-ink: var(--teal-ink); --accent2-soft: var(--teal-soft); } /* ---------- TİPOGRAFİ ---------- Inter / Plus Jakarta Sans KALDIRILDI (aşırı kullanılmış — DESIGN.md §4) */ :root { --font-display: 'Familjen Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-md: 1.0625rem; --fs-lg: 1.25rem; --fs-xl: 1.5rem; --fs-2xl: 2rem; --fs-3xl: 2.5rem; --fs-4xl: 3.25rem; --fs-5xl: 4rem; --lh-tight: 1.05; --lh-snug: 1.3; --lh-normal: 1.62; --lh-relaxed: 1.75; --measure: 65ch; /* --- Boşluk --- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; --sp-32: 8rem; /* --- Yuvarlama — ölçülü, "her şey rounded-lg" değil --- */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 14px; --radius-2xl: 20px; --radius-pill: 999px; /* --- Layout --- */ --container-max: 1180px; --container-narrow: 820px; --container-pad: clamp(1rem, 3vw, 2rem); --header-h: 68px; /* --- Gölge — kenarlıkla BİRLİKTE kullanılmaz (DESIGN.md §6) --- */ --shadow-sm: 0 1px 2px rgba(23, 18, 15, 0.06); --shadow-md: 0 8px 20px -8px rgba(23, 18, 15, 0.16); --shadow-lg: 0 24px 48px -16px rgba(23, 18, 15, 0.22); /* --- Geçişler — zıplama YOK, yumuşak çıkış --- */ --t-fast: 140ms cubic-bezier(0.33, 1, 0.68, 1); --t-base: 240ms cubic-bezier(0.33, 1, 0.68, 1); --t-slow: 480ms cubic-bezier(0.22, 1, 0.36, 1); /* --- Z-Index --- */ --z-header: 100; --z-overlay: 800; --z-chat: 900; --z-modal: 1000; } /* ============================================================ GEÇİŞ KÖPRÜSÜ — henüz yenilenmemiş sayfalar için eski adlar. Yeni kod bunları KULLANMAZ. Tüm sayfalar taşındığında silinecek. ============================================================ */ :root { --color-bg: var(--bg); --color-bg-soft: var(--bg-soft); --color-bg-mute: var(--bg-mute); --color-surface: var(--surface); --color-border: var(--border); --color-border-soft: var(--border-soft); --color-text: var(--text); --color-text-soft: var(--text-soft); --color-text-mute: var(--text-mute); --color-text-subtle: var(--text-subtle); /* Lacivert logoda yok (DESIGN.md §2.1). Eski referanslar metin rengine düşer. */ --color-deep: var(--text); --color-deep-2: var(--text); --color-deep-3: var(--text-soft); --color-deep-darker: var(--text); --color-brand: var(--teal-ink); --color-brand-bright: var(--teal); --color-brand-dark: var(--teal-ink); --color-brand-soft: var(--teal-soft); --color-accent: var(--orange-ink); --color-accent-dark: var(--orange-ink); --color-accent-soft: var(--orange-soft); --color-pixel-green: var(--mosaic-green); --color-pixel-yellow: var(--mosaic-yellow); --color-pixel-red: var(--mosaic-red); --color-pixel-blue: var(--mosaic-blue); --color-success: var(--success); --color-warning: var(--warning); --color-danger: var(--danger); /* Gradyan sistemi kaldırıldı — düz renge düşer (DESIGN.md §6) */ --gradient-brand: none; --gradient-brand-bright: none; --gradient-brand-soft: none; --gradient-deep: none; --gradient-glow: none; --gradient-warm-glow: none; --gradient-mesh: none; --shadow-xl: var(--shadow-lg); --shadow-glow: var(--shadow-md); --shadow-brand-glow: var(--shadow-md); --shadow-accent-glow: var(--shadow-md); --ease-spring: cubic-bezier(0.33, 1, 0.68, 1); } /* Hareket kısıtlaması her yerde geçerli */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }