/* ============================================ Mersambalaj Design Tokens Tüm hard-coded değerler buradan türetilir. ============================================ */ :root { /* ----- Brand Colors ----- */ --mers-navy: #0A1628; --mers-navy-soft: #142540; --mers-graphite: #1F2126; --mers-steel: #2D3A4A; --mers-silver: #8B95A5; --mers-mist: #C9D1DC; --mers-haze: #E5ECF4; --mers-pearl: #FAFBFC; --mers-white: #F5F7FA; --mers-canvas: #FFFFFF; /* Logo blue (mark üst paralelogram) */ --mers-blue: #3F7FBC; --mers-blue-deep: #1F4A7A; /* Accent — Monzo "Hot Coral" (site-wide primary) */ --mers-orange: #FF4F40; --mers-orange-dark: #E5392C; --mers-orange-light: #FFD9D4; --mers-orange-tint: #FFF1EF; /* Su yeşili / teal — ikincil aksan */ --mers-teal: #16B8A0; --mers-teal-dark: #0E9A86; --mers-mint: #E2F4EE; /* Status */ --mers-success: #27AE60; --mers-success-tint: #E8F7EE; --mers-warning: #F39C12; --mers-danger: #E74C3C; /* Functional */ --ink: var(--mers-navy); --ink-2: var(--mers-steel); --ink-3: var(--mers-silver); --surface: var(--mers-canvas); --surface-2: var(--mers-pearl); --surface-3: var(--mers-white); --surface-dark: var(--mers-navy); --hairline: rgba(10, 22, 40, 0.06); /* ----- Typography ----- */ --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Type scale (clamp for responsive without media queries) */ --fs-h0: clamp(2.5rem, 5vw + 1rem, 5.5rem); /* hero display */ --fs-h1: clamp(2rem, 3vw + 1rem, 3.75rem); --fs-h2: clamp(1.75rem, 2vw + 1rem, 2.75rem); --fs-h3: clamp(1.375rem, 1vw + 1rem, 1.75rem); --fs-h4: clamp(1.125rem, 0.5vw + 1rem, 1.375rem); --fs-body-lg: 1.125rem; --fs-body: 1rem; --fs-body-sm: 0.9375rem; --fs-caption: 0.8125rem; --fs-micro: 0.75rem; --lh-tight: 1.05; --lh-snug: 1.2; --lh-base: 1.5; --lh-relaxed: 1.7; --tracking-display: -0.04em; --tracking-h: -0.02em; --tracking-base: 0; --tracking-allcaps: 0.05em; /* ----- Layout ----- */ --max-w: 1400px; --max-w-narrow: 1100px; --max-w-prose: 760px; --gutter: clamp(1rem, 3vw, 2rem); --gutter-section: clamp(3rem, 8vw, 6rem); /* ----- Sizing ----- */ --header-h: 88px; --header-h-scrolled: 64px; --announce-h: 40px; /* ----- Radius ----- */ --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; /* ----- Shadow ----- */ --shadow-editorial: 0 40px 40px -5px rgba(10, 22, 40, 0.06); --shadow-card: 0 4px 24px -4px rgba(10, 22, 40, 0.08); --shadow-card-hover: 0 12px 40px -8px rgba(10, 22, 40, 0.16); --shadow-pop: 0 8px 32px -8px rgba(232, 108, 44, 0.32); --shadow-inset: inset 0 0 0 1px rgba(10, 22, 40, 0.04); /* ----- Motion ----- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-base: cubic-bezier(0.4, 0, 0.2, 1); --t-fast: 150ms var(--ease-base); --t-base: 250ms var(--ease-base); --t-slow: 450ms var(--ease-out); /* ----- Z-index ----- */ --z-base: 1; --z-sticky: 50; --z-announce: 100; --z-header: 200; --z-drawer: 400; --z-overlay: 500; --z-modal: 600; --z-toast: 700; } @media (prefers-reduced-motion: reduce) { :root { --t-fast: 0ms; --t-base: 0ms; --t-slow: 0ms; } } /* ============================================ THEME: Monzo (alternatif palet — geri alınabilir) ile aktif olur. Kaldırmak için attribute'u sil → orijinal turuncu palet döner. ============================================ */ [data-theme="monzo"] { /* Hot Coral — primary (eski turuncunun yerine) */ --mers-orange: #FF4F40; --mers-orange-dark: #E5392C; --mers-orange-light: #FFD9D4; --mers-orange-tint: #FFF1EF; /* Su yeşili / teal — ikincil aksan + pastel zemin */ --mers-teal: #16B8A0; --mers-teal-dark: #0E9A86; --mers-mint: #E2F4EE; }