/* ============================================================================ AKGROUP YAPI — Tasarım Token'ları (Layer 1: primitive, Layer 2: semantic) ---------------------------------------------------------------------------- Bileşenler SADECE semantic (--color-*, --space-*, --radius-* ...) token okur. Primitive token'ları (--brand-600, --gold-500 ...) bileşen içinde kullanmak hatadır. BASELINE OVERRIDE'LARI ---------------------- 1) Nötr renk sıcaklığı Baseline: soğuk nötr, H = 258 Override: sıcak nötr, H = 60–75 Kapsam: tüm site Gerekçe: marka paleti kahve/altın (sıcak). Soğuk gri nötrler altın aksanın yanında yeşilimsi-kirli görünüyor; sıcak nötr logoyla aynı ısıda kalıyor. 2) Aksan hue Baseline: indigo H = 265 Override: oker/altın H = 78 Kapsam: tüm site Gerekçe: logodan alındı (#C29244). 3) Radius register Baseline: kart 12px (--radius-xl) Override: kart 8px (--radius-lg), buton/input 4px (--radius-sm) Kapsam: tüm site Gerekçe: yapı/inşaat sektörü; 0–8px aralığı "teknik, sağlam, ciddi" okunuyor. 12px+ tüketici/lifestyle registerine kayıyor. ========================================================================= */ :root { /* ── Primitive: sıcak nötr ramp (H ≈ 60–75) ──────────────────────────── */ --neutral-0: #ffffff; --neutral-25: oklch(0.992 0.003 75); --neutral-50: oklch(0.983 0.005 75); --neutral-100: oklch(0.962 0.007 75); --neutral-200: oklch(0.921 0.009 72); --neutral-300: oklch(0.866 0.012 70); --neutral-400: oklch(0.750 0.015 68); --neutral-500: oklch(0.648 0.017 65); --neutral-600: oklch(0.548 0.018 62); --neutral-700: oklch(0.458 0.018 60); --neutral-800: oklch(0.378 0.017 58); --neutral-900: oklch(0.298 0.015 56); --neutral-950: oklch(0.222 0.013 54); --neutral-1000: oklch(0.162 0.011 52); /* ── Primitive: marka kahvesi (logo koyu ≈ #574943) ──────────────────── */ --brand-50: oklch(0.966 0.008 55); --brand-100: oklch(0.931 0.015 55); --brand-200: oklch(0.866 0.023 55); --brand-300: oklch(0.762 0.029 55); --brand-400: oklch(0.642 0.033 55); --brand-500: oklch(0.542 0.035 55); --brand-600: oklch(0.470 0.032 55); /* logo koyu kahve */ --brand-700: oklch(0.398 0.028 55); --brand-800: oklch(0.330 0.024 54); --brand-900: oklch(0.268 0.020 52); --brand-950: oklch(0.202 0.016 50); /* ── Primitive: marka altını (logo ≈ #C29244) ────────────────────────── */ --gold-50: oklch(0.973 0.020 82); --gold-100: oklch(0.941 0.041 82); --gold-200: oklch(0.889 0.063 81); --gold-300: oklch(0.821 0.083 80); --gold-400: oklch(0.746 0.095 79); --gold-500: oklch(0.672 0.098 78); /* marka altını */ --gold-600: oklch(0.596 0.092 76); --gold-700: oklch(0.478 0.078 70); /* açık zeminde metin — 4.5:1 */ --gold-800: oklch(0.408 0.064 66); --gold-900: oklch(0.342 0.050 62); /* ── Primitive: durum renkleri ───────────────────────────────────────── */ --success-solid: oklch(0.640 0.150 150); --success-text: oklch(0.480 0.130 150); --success-bg: oklch(0.960 0.030 150); --danger-solid: oklch(0.590 0.210 25); --danger-text: oklch(0.505 0.190 25); --danger-bg: oklch(0.960 0.030 25); /* ── Space ───────────────────────────────────────────────────────────── */ --space-0: 0; --space-px: 1px; --space-0-5: 0.125rem; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; --space-40: 10rem; --space-48: 12rem; --space-fluid-sm: clamp(1rem, 0.7rem + 1.5vw, 2rem); --space-fluid-md: clamp(2rem, 1.2rem + 4vw, 4rem); --space-fluid-lg: clamp(3rem, 1.5rem + 7.5vw, 8rem); --space-fluid-xl: clamp(4rem, 1.5rem + 12.5vw, 12rem); /* Bölüm ritmi — landing register (mobil 64 → masaüstü 128) */ --space-section: clamp(4rem, 2rem + 6vw, 8rem); --space-section-tight: clamp(3rem, 1.8rem + 4vw, 5rem); /* ── Type ────────────────────────────────────────────────────────────── */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: "Montserrat", var(--font-sans); --text-11: 0.6875rem; --text-12: 0.75rem; --text-13: 0.8125rem; --text-14: 0.875rem; --text-16: 1rem; --text-18: 1.125rem; --text-20: 1.25rem; --text-24: 1.5rem; --text-30: 1.875rem; --display-xs: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); --display-sm: clamp(1.875rem, 1.4rem + 2vw, 2.75rem); --display-md: clamp(2.25rem, 1.5rem + 3.2vw, 3.5rem); --display-lg: clamp(2.75rem, 1.6rem + 4.8vw, 4.5rem); --display-xl: clamp(3.25rem, 1.5rem + 7.2vw, 6rem); --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --measure-prose: 68ch; --measure-lede: 52ch; --measure-card: 38ch; --measure-hero: 40ch; /* ── Radius ──────────────────────────────────────────────────────────── */ --radius-none: 0; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 16px; --radius-full: 9999px; /* ── Elevation (sıcak hue'lu gölge — siyah değil) ────────────────────── */ --shadow-0: none; --shadow-1: 0 1px 2px -1px oklch(0.222 0.013 54 / 0.10), 0 1px 3px 0 oklch(0.222 0.013 54 / 0.06); --shadow-2: 0 2px 4px -2px oklch(0.222 0.013 54 / 0.10), 0 4px 8px -2px oklch(0.222 0.013 54 / 0.07); --shadow-3: 0 4px 6px -3px oklch(0.222 0.013 54 / 0.09), 0 10px 20px -4px oklch(0.222 0.013 54 / 0.10); --shadow-4: 0 8px 12px -6px oklch(0.222 0.013 54 / 0.10), 0 20px 32px -8px oklch(0.222 0.013 54 / 0.14); --shadow-5: 0 12px 20px -8px oklch(0.222 0.013 54 / 0.12), 0 32px 56px -12px oklch(0.222 0.013 54 / 0.18); /* ── Border ──────────────────────────────────────────────────────────── */ --border-width-hairline: 1px; --border-width-heavy: 2px; /* ── Motion ──────────────────────────────────────────────────────────── */ --duration-micro: 120ms; --duration-short: 180ms; --duration-medium: 240ms; --duration-long: 320ms; --duration-page: 480ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1); --ease-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15); --stagger-base: 60ms; /* ── Layout ──────────────────────────────────────────────────────────── */ --container-prose: 42rem; --container-content: 75rem; /* 1200 */ --container-wide: 85rem; --gutter: var(--space-5); /* ── Z-index ─────────────────────────────────────────────────────────── */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-header: 200; --z-drawer: 300; --z-dropdown: 400; --z-overlay: 500; --z-modal: 600; --z-toast: 800; --z-tooltip: 900; /* ── Ikon ────────────────────────────────────────────────────────────── */ --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; --icon-xl: 32px; --icon-2xl: 48px; --icon-stroke: 1.5px; /* ── Kontrol yükseklikleri ───────────────────────────────────────────── */ --control-height-sm: 32px; --control-height-md: 40px; --control-height-lg: 48px; --control-height-xl: 56px; /* ── Header ──────────────────────────────────────────────────────────── */ --header-height: 76px; --topbar-height: 40px; /* ══ SEMANTIC LAYER — bileşenlerin okuduğu tek katman ═════════════════ */ /* Zeminler */ --color-bg: var(--neutral-0); --color-bg-subtle: var(--neutral-50); --color-bg-muted: var(--neutral-100); --color-bg-inverse: var(--brand-900); --color-bg-inverse-deep: var(--brand-950); /* Yüzeyler */ --color-surface: var(--neutral-0); --color-surface-raised: var(--neutral-0); --color-surface-sunken: var(--neutral-50); /* Metin */ --color-text: var(--neutral-900); --color-text-secondary: var(--neutral-600); --color-text-muted: var(--neutral-500); --color-text-disabled: var(--neutral-400); --color-text-inverse: var(--neutral-0); --color-text-inverse-secondary: oklch(0.860 0.012 70); --color-text-inverse-muted: oklch(0.720 0.016 68); --color-text-accent: var(--gold-700); --color-text-accent-inverse: var(--gold-400); --color-text-on-accent: var(--neutral-0); /* Kenarlıklar */ --color-border: var(--neutral-200); --color-border-subtle: var(--neutral-100); --color-border-strong: var(--neutral-300); --color-border-accent: var(--gold-500); --color-border-inverse: oklch(1 0 0 / 0.12); --color-border-inverse-subtle: oklch(1 0 0 / 0.07); /* Etkileşim */ --color-accent: var(--gold-500); --color-accent-hover: var(--gold-600); --color-accent-active: var(--gold-700); --color-accent-subtle: var(--gold-50); --color-ring: var(--gold-600); --color-overlay: oklch(0.202 0.016 50 / 0.62); /* Marka mürekkebi (koyu bölümler, header wordmark) */ --color-ink: var(--brand-700); --color-ink-strong: var(--brand-900); } /* Sistem koyu tema tercihi — bu site açık temada tasarlandı, sadece tarayıcı UI'ının (form kontrolleri, kaydırma çubuğu) uyumu için. */ :root { color-scheme: light; }