/** * ============================================================================ * zaferkaya.com.tr - CSS Değişkenleri (Design Tokens) * ============================================================================ * NEXUS CORE tasarım sistemi — renkler, tipografi, spacing, gölgeler. * ============================================================================ */ :root { /* -------------------------------------------------------------------------- * Renk Paleti * -------------------------------------------------------------------------- */ --color-black: #0A0E17; --color-navy: #12182B; --color-navy-light: #1A2238; --color-gray-dark: #1E293B; --color-gray: #334155; --color-gray-medium: #64748B; --color-gray-light: #94A3B8; --color-gray-lighter: #CBD5E1; --color-white: #FFFFFF; --color-off-white: #F1F5F9; /* Marka renkleri */ --color-primary: #00D4FF; --color-primary-rgb: 0, 212, 255; --color-accent: #00F0FF; --color-accent-rgb: 0, 240, 255; --color-primary-dark: #0099CC; --color-primary-glow: rgba(0, 212, 255, 0.35); /* Durum renkleri */ --color-success: #10B981; --color-warning: #F59E0B; --color-danger: #EF4444; --color-info: #3B82F6; /* -------------------------------------------------------------------------- * Arka Plan & Yüzey * -------------------------------------------------------------------------- */ --bg-body: var(--color-black); --bg-surface: var(--color-navy); --bg-surface-elevated: var(--color-navy-light); --bg-card: rgba(18, 24, 43, 0.65); --bg-card-hover: rgba(26, 34, 56, 0.85); --bg-glass: rgba(18, 24, 43, 0.55); --bg-glass-border: rgba(0, 212, 255, 0.12); --bg-glass-border-hover: rgba(0, 212, 255, 0.35); --bg-overlay: rgba(10, 14, 23, 0.85); --bg-hero-gradient: linear-gradient(135deg, #0A0E17 0%, #12182B 40%, #1A2238 100%); --bg-section-alt: rgba(30, 41, 59, 0.25); /* -------------------------------------------------------------------------- * Metin Renkleri * -------------------------------------------------------------------------- */ --text-primary: var(--color-white); --text-secondary: var(--color-gray-light); --text-muted: var(--color-gray-medium); --text-accent: var(--color-primary); --text-heading: var(--color-white); /* -------------------------------------------------------------------------- * Tipografi * -------------------------------------------------------------------------- */ --font-heading: 'Space Grotesk', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-accent: 'Poppins', system-ui, sans-serif; /* Font boyutları (fluid typography) */ --text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.75rem); --text-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem); --text-base: clamp(0.9rem, 0.85rem + 0.25vw, 1rem); --text-md: clamp(1rem, 0.95rem + 0.3vw, 1.125rem); --text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.25rem); --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem); --text-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem); --text-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem); --text-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3.5rem); --text-5xl: clamp(2.75rem, 2rem + 3.75vw, 4.5rem); /* Font ağırlıkları */ --font-light: 300; --font-regular: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* Satır yükseklikleri */ --leading-tight: 1.15; --leading-snug: 1.35; --leading-normal: 1.6; --leading-relaxed: 1.75; /* Harf aralığı */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.05em; --tracking-wider: 0.1em; /* -------------------------------------------------------------------------- * Spacing * -------------------------------------------------------------------------- */ --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; /* Section padding */ --section-py: clamp(4rem, 8vw, 7rem); --section-px: clamp(1rem, 4vw, 2rem); /* -------------------------------------------------------------------------- * Border & Radius * -------------------------------------------------------------------------- */ --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-2xl: 1.5rem; --radius-full: 9999px; --border-width: 1px; --border-color: rgba(255, 255, 255, 0.08); --border-color-accent: rgba(0, 212, 255, 0.2); /* -------------------------------------------------------------------------- * Gölgeler * -------------------------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5); --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.6); --shadow-glow: 0 0 20px rgba(0, 212, 255, 0.25); --shadow-glow-lg: 0 0 40px rgba(0, 212, 255, 0.35); --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04); /* -------------------------------------------------------------------------- * Glassmorphism * -------------------------------------------------------------------------- */ --glass-blur: 16px; --glass-blur-heavy: 24px; --glass-bg: var(--bg-glass); --glass-border: var(--bg-glass-border); /* -------------------------------------------------------------------------- * Geçişler & Animasyon * -------------------------------------------------------------------------- */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); /* -------------------------------------------------------------------------- * Layout * -------------------------------------------------------------------------- */ --container-max: 1200px; --container-wide: 1400px; --container-narrow: 800px; --header-height: 72px; --header-height-scrolled: 64px; /* Z-index katmanları */ --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-modal-backdrop: 400; --z-modal: 500; --z-tooltip: 600; --z-particles: -1; /* -------------------------------------------------------------------------- * Grid & Kartlar * -------------------------------------------------------------------------- */ --card-padding: var(--space-6); --card-gap: var(--space-6); --grid-gap: var(--space-6); } /* ============================================================================ * Light Mode Değişkenleri * ============================================================================ */ [data-theme="light"] { --bg-body: var(--color-off-white); --bg-surface: var(--color-white); --bg-surface-elevated: #F8FAFC; --bg-card: rgba(255, 255, 255, 0.85); --bg-card-hover: rgba(255, 255, 255, 0.95); --bg-glass: rgba(255, 255, 255, 0.75); --bg-glass-border: rgba(0, 153, 204, 0.15); --bg-glass-border-hover: rgba(0, 153, 204, 0.35); --bg-overlay: rgba(241, 245, 249, 0.9); --bg-hero-gradient: linear-gradient(135deg, #F1F5F9 0%, #E2E8F0 40%, #CBD5E1 100%); --bg-section-alt: rgba(226, 232, 240, 0.5); --text-primary: var(--color-gray-dark); --text-secondary: var(--color-gray); --text-muted: var(--color-gray-medium); --text-heading: var(--color-black); --border-color: rgba(0, 0, 0, 0.08); --border-color-accent: rgba(0, 153, 204, 0.25); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.1); --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8); --shadow-glow: 0 0 20px rgba(0, 153, 204, 0.15); }