/* ============================================================ VARIABLES.CSS Odium Stüdyo — Tasarım Sistemi Değişkenleri Renk Paleti Temeli: • Birincil Arka Plan: #0F100F • Birincil Metin: #FFFFFF Tüm renkler bu iki değerden türetilmiştir. Doygun veya neon renkler kullanılmaz. ============================================================ */ :root { /* ========================================================== RENKLER — ARKA PLAN KATMANLARi #0F100F'den türetilmiş kademeli tonlar. En koyu → en açık sırasıyla. ========================================================== */ --bg-primary: #0F100F; --bg-secondary: #141514; --bg-tertiary: #1A1B1A; --bg-elevated: #222322; /* ========================================================== RENKLER — YÜZEY (Glassmorphism & Kart) Beyazın çok düşük opaklıktaki tonları. ========================================================== */ --surface: rgba(255, 255, 255, 0.03); --surface-hover: rgba(255, 255, 255, 0.06); --surface-border: rgba(255, 255, 255, 0.08); --surface-border-hover: rgba(255, 255, 255, 0.14); --surface-glass: rgba(15, 16, 15, 0.85); /* ========================================================== RENKLER — ANA VURGU (Accent) Beyazın yumuşak gri tonları. Parlak veya doygun renk kullanılmaz. ========================================================== */ --accent: #C8C8C8; --accent-light: #E0E0E0; --accent-dark: #999999; --accent-glow: rgba(255, 255, 255, 0.08); --accent-subtle: rgba(255, 255, 255, 0.04); /* ========================================================== RENKLER — İKİNCİL VURGU Çok hafif sıcak ve soğuk gri tonları. Birbirinden ayrışması gereken durumlar için. ========================================================== */ --accent-secondary: #A0A0A0; --accent-secondary-glow: rgba(255, 255, 255, 0.06); --accent-warm: #D4D0CC; --accent-warm-glow: rgba(255, 255, 255, 0.06); /* ========================================================== RENKLER — METİN #FFFFFF'den türetilmiş okunabilir tonlar. ========================================================== */ --text-primary: #FFFFFF; --text-secondary: #A0A0A0; --text-muted: #606060; --text-accent: #D4D4D4; --text-inverse: #0F100F; /* ========================================================== RENKLER — DURUM Çok düşük doygunlukta, gri tabanlı durum renkleri. Neon veya canlı renk kullanılmaz. ========================================================== */ --status-success: #8A9B8A; --status-active: #8A8F9B; --status-planned: #9B978A; /* ========================================================== GRADIENT'LER Sadece #0F100F ve #FFFFFF tonları kullanılır. ========================================================== */ /* Hero arka plan — çok hafif beyaz ışıma */ --gradient-hero: radial-gradient( ellipse 80% 60% at 50% 0%, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 40%, transparent 70% ); /* Kart arka plan — neredeyse görünmez beyaz geçiş */ --gradient-card: linear-gradient( 145deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.005) 100% ); /* Buton gradient — beyazdan açık griye */ --gradient-accent: linear-gradient( 135deg, #FFFFFF 0%, #D4D4D4 50%, #C0C0C0 100% ); /* CTA bölüm arka plan */ --gradient-cta: linear-gradient( 135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 50%, rgba(255, 255, 255, 0.02) 100% ); /* CTA border gradient */ --gradient-border: linear-gradient( 135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 50%, rgba(255, 255, 255, 0.12) 100% ); /* ========================================================== TİPOGRAFİ — FONT AİLELERİ ========================================================== */ --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; /* ========================================================== TİPOGRAFİ — FONT BOYUTLARI clamp() ile responsive ölçekleme. ========================================================== */ --text-display: clamp(2.5rem, 5vw + 1rem, 4.5rem); --text-h1: clamp(2rem, 4vw + 0.5rem, 3.5rem); --text-h2: clamp(1.75rem, 3vw + 0.5rem, 2.5rem); --text-h3: clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem); --text-h4: clamp(1.125rem, 1vw + 0.5rem, 1.25rem); --text-body-lg: clamp(1rem, 0.5vw + 0.75rem, 1.125rem); --text-body: 1rem; --text-small: 0.875rem; --text-caption: 0.75rem; --text-tag: 0.75rem; /* ========================================================== TİPOGRAFİ — FONT AĞIRLIKLARI ========================================================== */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ========================================================== TİPOGRAFİ — SATIR YÜKSEKLİĞİ ========================================================== */ --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.65; /* ========================================================== TİPOGRAFİ — HARF ARALIĞI ========================================================== */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.05em; /* ========================================================== SPACING — 8px TABANLI ÖLÇEK ========================================================== */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 5rem; --space-10: 6rem; --space-11: 8rem; /* ========================================================== BORDER RADIUS ========================================================== */ --radius-sm: 0.375rem; --radius-md: 0.75rem; --radius-lg: 1rem; --radius-xl: 1.5rem; --radius-full: 9999px; /* ========================================================== GÖLGELER Saf siyah tabanlı, renksiz gölgeler. ========================================================== */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.50); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.60); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.70); --shadow-glow: 0 0 40px rgba(255, 255, 255, 0.05); --shadow-glow-sm: 0 0 20px rgba(255, 255, 255, 0.04); --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.04); --shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.50), 0 0 20px rgba(255, 255, 255, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.06); /* ========================================================== GEÇİŞLER (Transition) ========================================================== */ --duration-fast: 0.15s; --duration-normal: 0.25s; --duration-slow: 0.4s; --duration-slower: 0.6s; --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --transition-fast: var(--duration-fast) var(--ease-out); --transition-normal: var(--duration-normal) var(--ease-in-out); --transition-slow: var(--duration-slow) var(--ease-in-out); /* ========================================================== Z-INDEX KATMANLARI ========================================================== */ --z-base: 1; --z-card: 10; --z-navbar: 100; --z-mobile-menu: 200; --z-overlay: 300; --z-toast: 400; /* ========================================================== CONTAINER ========================================================== */ --container-max: 1200px; --container-padding: 1.5rem; /* ========================================================== NAVBAR ========================================================== */ --navbar-height: 4.5rem; --navbar-height-mobile: 4rem; /* ========================================================== GLASSMORPHISM AYARLARI ========================================================== */ --glass-blur: 20px; --glass-saturate: 1.2; --glass-bg: var(--surface-glass); --glass-border: var(--surface-border); /* ========================================================== GRAIN OVERLAY ========================================================== */ --grain-opacity: 0.03; } /* ============================================================== RESPONSIVE OVERRIDE'LAR ============================================================== */ @media (min-width: 640px) { :root { --container-padding: 2rem; } } @media (min-width: 1024px) { :root { --container-padding: 3rem; } }