/* ========================================================================== DENTALINS — DESIGN TOKENS (variables.css) Production-level CSS Custom Properties Tüm renkler, tipografi, spacing, shadow, radius, z-index, transition burada tanımlıdır. Hiçbir yerde hardcoded değer kullanılmaz. ========================================================================== */ :root { /* ====================================================================== 1. RENK PALETİ ====================================================================== */ /* --- PRIMARY — Cyan-Blue (Logo Rengi: #05A0D6) --- Gerekçe: Logodaki ana renk. Diş hekimliğinde güven, temizlik, profesyonellik simgeler. Canlı ve modern. */ --color-primary-50: #E8F6FC; --color-primary-100: #BDE7F7; --color-primary-200: #8DD6F1; --color-primary-300: #5CC5EB; --color-primary-400: #2EB3E1; --color-primary-500: #05A0D6; /* ← Ana Primary (Logo) */ --color-primary-600: #0489B8; --color-primary-700: #03729A; --color-primary-800: #025B7C; --color-primary-900: #01445E; /* --- SECONDARY — Deep Navy (Premium, Kurumsal) --- Gerekçe: Hero overlay, footer, dark section. Primary cyan ile mükemmel kontrast. Premium, ciddi ama baskıcı değil. */ --color-secondary-50: #E7EAF0; --color-secondary-100: #B5BFCF; --color-secondary-200: #8394AE; --color-secondary-300: #51698D; --color-secondary-400: #2D4975; --color-secondary-500: #0B1D3A; /* ← Ana Secondary */ --color-secondary-600: #091831; --color-secondary-700: #071328; --color-secondary-800: #050E1F; --color-secondary-900: #030916; /* --- ACCENT — Warm Amber (CTA, Premium vurgu) --- Gerekçe: Cyan primary + deep navy üzerinde sıcak kontrast. CTA butonları, badge'ler, premium vurgular için. */ --color-accent-50: #FEF7E8; --color-accent-100: #FCE8B8; --color-accent-200: #FAD988; --color-accent-300: #F8CA58; --color-accent-400: #F6BA35; --color-accent-500: #F0A030; /* ← Ana Accent */ --color-accent-600: #D08928; --color-accent-700: #B07220; --color-accent-800: #905B18; --color-accent-900: #704410; /* --- NEUTRAL — Gri Scale --- Metin, arka plan, border — tüm nötr tonlar */ --color-neutral-0: #ffffff; --color-neutral-50: #f8f9fa; --color-neutral-100: #f1f3f5; --color-neutral-200: #e9ecef; --color-neutral-300: #dee2e6; --color-neutral-400: #ced4da; --color-neutral-500: #adb5bd; --color-neutral-600: #868e96; --color-neutral-700: #495057; --color-neutral-800: #343a40; --color-neutral-900: #212529; /* --- SEMANTIC RENKLER --- */ --color-success: #2d9f5c; --color-success-light: #e6f6ec; --color-warning: #e8a317; --color-warning-light: #fef5e0; --color-error: #d93025; --color-error-light: #fce8e6; --color-info: #1a73e8; --color-info-light: #e3f0ff; /* --- SAYFA ARKA PLANLARI --- */ --color-bg-primary: #ffffff; --color-bg-secondary: #f8f9fa; /* Alternatif section bg */ --color-bg-tertiary: #f1f3f5; --color-bg-dark: #0B1D3A; /* CTA, footer */ --color-bg-overlay: rgba(11, 29, 58, 0.75); /* Hero overlay */ /* --- YÜZEYLER --- */ --color-surface: #ffffff; --color-surface-hover: #f8f9fa; --color-surface-active: #f1f3f5; /* --- BORDER --- */ --color-border: #e9ecef; --color-border-hover: #dee2e6; --color-border-focus: var(--color-primary-500); /* --- METİN --- */ --color-text-primary: #212529; --color-text-secondary: #495057; --color-text-tertiary: #868e96; --color-text-inverse: #ffffff; --color-text-link: var(--color-primary-600); --color-text-link-hover: var(--color-primary-800); /* ====================================================================== 2. TİPOGRAFİ ====================================================================== */ /* --- FONT FAMILY --- Inter: Google variable font. Mükemmel okunabilirlik, geniş ağırlık, modern geometrik yapı. Türkçe karakter desteği tam. */ --font-primary: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; --font-display: var(--font-primary); /* --- FONT SIZE SCALE (Major Third — 1.25 ratio) --- clamp() ile fluid typography: min, preferred, max */ --text-xs: clamp(0.7rem, 0.65rem + 0.2vw, 0.75rem); /* ~12px */ --text-sm: clamp(0.8rem, 0.75rem + 0.2vw, 0.875rem); /* ~14px */ --text-base: clamp(0.938rem, 0.875rem + 0.25vw, 1rem); /* ~16px */ --text-md: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); /* ~18px */ --text-lg: clamp(1.1rem, 1rem + 0.35vw, 1.25rem); /* ~20px */ --text-xl: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); /* ~24px */ --text-2xl: clamp(1.5rem, 1.25rem + 0.75vw, 1.75rem); /* ~28px */ --text-3xl: clamp(1.75rem, 1.4rem + 1vw, 2rem); /* ~32px */ --text-4xl: clamp(2rem, 1.5rem + 1.5vw, 2.5rem); /* ~40px */ --text-5xl: clamp(2.25rem, 1.6rem + 2vw, 3rem); /* ~48px */ --text-6xl: clamp(2.5rem, 1.75rem + 2.5vw, 3.5rem); /* ~56px */ --text-6-5xl: 65px; /* ~56px */ --text-7xl: clamp(2.75rem, 1.8rem + 3vw, 4.5rem); /* ~72px */ /* --- FONT WEIGHT --- */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; /* --- LINE HEIGHT --- */ --leading-tight: 1.2; /* Başlıklar */ --leading-snug: 1.35; /* Alt başlıklar */ --leading-normal: 1.5; /* UI text */ --leading-relaxed: 1.7; /* Body / paragraf */ --leading-loose: 1.9; /* Uzun okuma */ /* --- LETTER SPACING --- */ --tracking-tight: -0.025em; /* Büyük başlıklar */ --tracking-normal: 0; /* Normal metin */ --tracking-wide: 0.025em; /* Küçük caps, etiketler */ --tracking-wider: 0.05em; /* Buton text, badge */ --tracking-widest: 0.1em; /* Section tag */ /* ====================================================================== 3. SPACING SCALE (8px Grid) ====================================================================== */ --space-0: 0; --space-1: 0.25rem; /* 4px — ince kenarlık, ikon boşluk */ --space-2: 0.5rem; /* 8px — kompakt iç boşluk */ --space-3: 0.75rem; /* 12px — form element padding */ --space-4: 1rem; /* 16px — standart padding */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px — kart iç boşluk */ --space-7: 1.75rem; /* 28px — kart iç boşluk */ --space-8: 2rem; /* 32px — component arası boşluk */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px — section iç padding */ --space-14: 3.5rem; /* 56px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px — section arası boşluk (mobil) */ --space-24: 6rem; /* 96px — section arası boşluk (tablet) */ --space-32: 8rem; /* 128px — section arası (desktop) */ --space-40: 10rem; /* 160px — hero padding */ /* ====================================================================== 4. CONTAINER ====================================================================== */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1200px; --container-xxl: 1300px; /* Varsayılan geniş container */ --container-2xl: 1400px; --container-padding: var(--space-4); /* Mobil: 16px, media query ile büyür */ /* ====================================================================== 5. BORDER RADIUS ====================================================================== */ --radius-none: 0; --radius-sm: 0.25rem; /* 4px — badge, tag */ --radius-md: 0.5rem; /* 8px — button, input */ --radius-lg: 0.75rem; /* 12px — card */ --radius-xl: 1rem; /* 16px — modal, büyük kart */ --radius-2xl: 1.5rem; /* 24px — feature section */ --radius-full: 9999px; /* Pill shape — avatar, badge */ /* ====================================================================== 6. SHADOW SYSTEM Layered shadow: daha doğal derinlik. Material Design 3 esinlenme. ====================================================================== */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.04); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04); --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 8px 10px rgba(0, 0, 0, 0.04); --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.15); /* Renkli gölgeler — CTA buton vurgusu */ --shadow-primary: 0 4px 14px rgba(5, 160, 214, 0.3); --shadow-primary-sm: 0 2px 8px rgba(5, 160, 214, 0.2); --shadow-primary-lg: 0 6px 20px rgba(5, 160, 214, 0.3); --shadow-primary-xs: 0 2px 6px rgba(5, 160, 214, 0.15); --shadow-accent: 0 4px 14px rgba(240, 160, 48, 0.3); --shadow-accent-sm: 0 2px 8px rgba(240, 160, 48, 0.2); --shadow-accent-lg: 0 6px 20px rgba(240, 160, 48, 0.25); --shadow-accent-xs: 0 2px 6px rgba(240, 160, 48, 0.15); --shadow-secondary-sm: 0 2px 8px rgba(11, 29, 58, 0.15); --shadow-secondary-lg: 0 6px 20px rgba(11, 29, 58, 0.2); --shadow-secondary-xs: 0 2px 6px rgba(11, 29, 58, 0.1); --shadow-white-sm: 0 2px 10px rgba(255, 255, 255, 0.08); --shadow-white-lg: 0 8px 25px rgba(255, 255, 255, 0.12), 0 4px 12px rgba(5, 160, 214, 0.1); --shadow-white-xs: 0 2px 8px rgba(255, 255, 255, 0.05); --shadow-outline-lg: 0 4px 12px rgba(5, 160, 214, 0.1); --shadow-outline-light: 0 4px 15px rgba(255, 255, 255, 0.05); /* Buton spesifik token'lar */ --btn-hover-lift: -2px; --btn-border-width: 1.5px; --btn-radius: var(--radius-full); --btn-transition: all var(--transition-hover); --btn-primary-rgb: 5, 160, 214; --btn-secondary-rgb: 11, 29, 58; --btn-accent-rgb: 240, 160, 48; --btn-shimmer: rgba(255, 255, 255, 0.08); --btn-outline-hover-bg: rgba(5, 160, 214, 0.06); --btn-outline-active-bg: rgba(5, 160, 214, 0.1); --btn-light-hover-bg: rgba(255, 255, 255, 0.08); --btn-light-active-bg: rgba(255, 255, 255, 0.12); --btn-light-border: rgba(255, 255, 255, 0.3); --btn-light-border-hover: rgba(255, 255, 255, 0.5); --btn-light-border-active: rgba(255, 255, 255, 0.6); /* ====================================================================== 7. Z-INDEX SCALE Katmanlı düzen — hiçbir yerde magic number kullanılmaz. ====================================================================== */ --z-behind: -1; --z-base: 0; --z-dropdown: 100; --z-sticky: 200; /* Sticky navbar */ --z-fixed: 1000; /* Fixed navbar (hero üzerinde) */ --z-overlay: 300; /* Mobil menü overlay */ --z-modal: 400; /* Modal / Lightbox */ --z-popover: 500; /* Tooltip, popover */ --z-toast: 600; /* Toast notification */ --z-whatsapp: 700; /* Floating WhatsApp butonu */ --z-max: 9999; /* ====================================================================== 8. TRANSITION SYSTEM — Site-wide Discipline Tüm transition değerleri burada tanımlıdır. Hiçbir component'te hardcoded duration veya easing kullanılmaz. ====================================================================== */ /* --- EASING CURVES --- Ayrık tanım: farklı duration'larla kombine edilebilir. */ --ease-default: ease; --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); /* Material Design standard */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* Snappy out — hover, lift */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* Expo out — reveals, entrances */ --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* Symmetric — accordion, expand */ --ease-spring: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Natural spring — slider */ /* --- DURATIONS --- Ayrık tanım: farklı easing'lerle kombine edilebilir. */ --duration-fast: 150ms; /* Micro: color, opacity, border */ --duration-base: 250ms; /* Standard interactive */ --duration-normal: 300ms; /* Hover transforms */ --duration-slow: 400ms; /* Complex multi-property */ --duration-slower: 500ms; /* Image zoom, smooth transforms */ --duration-reveal: 600ms; /* Scroll reveal animation */ /* --- TRANSITION PRESETS (composed: duration + easing) --- Genel amaçlı. Property belirtilmeden kullanılır: transition: property var(--transition-fast); */ --transition-fast: 150ms var(--ease-default); --transition-base: 250ms var(--ease-default); --transition-normal: 300ms var(--ease-smooth); --transition-slow: 400ms var(--ease-smooth); --transition-smooth: 500ms var(--ease-smooth); /* --- SEMANTIC ALIASES --- Amaca özel token'lar. Hangi transition nerede kullanılacağı net. */ --transition-hover: 300ms var(--ease-out); /* Card hover lift, shadow */ --transition-image: 500ms var(--ease-out); /* Image scale on hover */ --transition-color: 200ms var(--ease-default); /* Color/text changes */ --transition-reveal: 600ms var(--ease-out-expo); /* Scroll-in animations */ --transition-expand: 350ms var(--ease-in-out); /* Accordion, dropdown */ --transition-overlay: 350ms var(--ease-default); /* Overlay gradients */ --transition-icon: 300ms var(--ease-out); /* Icon transforms */ --transition-slide: 300ms var(--ease-out); /* Text slide on hover */ } /* ====================================================================== REDUCED MOTION — Erişilebilirlik prefers-reduced-motion: reduce aktifse tüm transition/animation kapatılır. ====================================================================== */ @media (prefers-reduced-motion: reduce) { :root { /* Presets */ --transition-fast: 0ms; --transition-base: 0ms; --transition-normal: 0ms; --transition-slow: 0ms; --transition-smooth: 0ms; /* Semantic */ --transition-hover: 0ms; --transition-image: 0ms; --transition-color: 0ms; --transition-reveal: 0ms; --transition-expand: 0ms; --transition-overlay: 0ms; --transition-icon: 0ms; --transition-slide: 0ms; /* Durations */ --duration-fast: 0ms; --duration-base: 0ms; --duration-normal: 0ms; --duration-slow: 0ms; --duration-slower: 0ms; --duration-reveal: 0ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }