/* ═══════════════════════════════════════════════════════════════ MERYS ENGLISH CLUB — Design System Tokens ═══════════════════════════════════════════════════════════════ Tüm sitenin görsel dili bu dosyadan yönetilir. Bir değişiklik burada yapılır, tüm site güncellenir. ═══════════════════════════════════════════════════════════════ */ :root { /* ───────────────────────────────────────────────────────────── 1. COLOR PALETTE HEX bazlı — temiz, okunabilir, evrensel uyumluluk. ───────────────────────────────────────────────────────────── */ /* Primary — Derin Mor (Güven, sofistike, otorite) */ --clr-primary: #523d72; --clr-primary-light: #7b64a0; --clr-primary-lighter: #b0a0c8; --clr-primary-dark: #362550; --clr-primary-muted: #e2dbe9; /* Accent — Lime / Yeşilimsi (Enerji, tazelik, aksiyon) */ --clr-accent: #e0fe9c; --clr-accent-vibrant: #c8f55a; --clr-accent-soft: #eef7d9; --clr-accent-dark: #5c7230; /* Warm — Sıcak Krem (Samimi, davetkar arka planlar) */ --clr-warm: #f8f3f2; --clr-warm-deep: #efe5e0; /* Sky — Açık Mavi (Güven, profesyonellik, badge'ler) */ --clr-sky: #b2dcfa; --clr-sky-soft: #daedf9; /* Neutrals — Nötr tonlar */ --clr-white: #ffffff; --clr-off-white: #faf9f7; --clr-gray-50: #f7f6f4; --clr-gray-100: #eeece8; --clr-gray-200: #ddd9d3; --clr-gray-300: #c4bfb7; --clr-gray-400: #a39d94; --clr-gray-500: #827b72; --clr-gray-600: #635d55; --clr-gray-700: #4a453e; --clr-gray-800: #332f2a; --clr-gray-900: #1d1a17; --clr-black: #0f0d0b; /* Semantic — Anlam taşıyan renkler */ --clr-success: #35a06a; --clr-warning: #f5b731; --clr-error: #d04545; --clr-info: #4a90d9; /* Stars — Yorum yıldızları için */ --clr-star: #dca203; --clr-star-empty: var(--clr-gray-200); /* ───────────────────────────────────────────────────────────── 2. SURFACE & TEXT (Sayfa yüzeyleri) ───────────────────────────────────────────────────────────── */ --surface-page: var(--clr-off-white); --surface-card: var(--clr-white); --surface-card-hover: var(--clr-gray-50); --surface-elevated: var(--clr-white); --surface-sunken: var(--clr-warm); --surface-overlay: rgba(40, 30, 55, 0.6); --text-primary: var(--clr-gray-900); --text-secondary: var(--clr-gray-600); --text-tertiary: var(--clr-gray-400); --text-inverse: var(--clr-white); --text-on-primary: var(--clr-white); --text-on-accent: var(--clr-gray-900); --text-link: var(--clr-primary); --text-link-hover: var(--clr-primary-light); /* ───────────────────────────────────────────────────────────── 3. TYPOGRAPHY Modüler scale 1.250 (Major Third) Base: 16px → 1rem ───────────────────────────────────────────────────────────── */ /* Font Aileler */ --font-heading: 'Playfair Display', 'Georgia', serif; --font-body: 'DM Sans', 'Helvetica Neue', 'Arial', sans-serif; --font-accent: 'Caveat', 'Segoe Script', cursive; /* Yeni Eklenen Özel Başlık Fontları */ --font-title-elegant: 'Cormorant Garamond', 'Georgia', serif; --font-title-modern: 'Outfit', 'Helvetica Neue', sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; /* Font Boyutları — Piksel Tabanlı Detaylı Scale */ --fs-1: 10px; --fs-2: 12px; --fs-3: 14px; --fs-4: 16px; /* base */ --fs-5: 18px; --fs-6: 20px; --fs-7: 24px; --fs-8: 28px; --fs-9: 32px; --fs-10: 36px; --fs-11: 40px; --fs-12: 48px; --fs-13: 56px; --fs-14: 64px; --fs-15: 72px; --fs-16: 80px; --fs-17: 96px; --fs-18: 120px; /* Font Ağırlıkları */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 900; /* Satır Yükseklikleri */ --lh-tight: 1.1; --lh-snug: 1.3; --lh-normal: 1.6; --lh-relaxed: 1.8; --lh-loose: 2.0; /* Harf Aralıkları */ --ls-tight: -0.03em; --ls-snug: -0.015em; --ls-normal: 0; --ls-wide: 0.025em; --ls-wider: 0.06em; --ls-widest: 0.12em; /* ───────────────────────────────────────────────────────────── 4. SPACING SYSTEM 8px grid bazlı — tutarlılık için ───────────────────────────────────────────────────────────── */ --space-3xs: 4px; /* 4px */ --space-2xs: 8px; /* 8px */ --space-xs: 12px; /* 12px */ --space-sm: 16px; /* 16px */ --space-md: 24px; /* 24px */ --space-lg: 32px; /* 32px */ --space-xl: 48px; /* 48px */ --space-2xl: 64px; /* 64px */ --space-3xl: 96px; /* 96px */ --space-4xl: 128px; /* 128px */ --space-5xl: 160px; /* 160px */ /* Section dikey boşlukları */ --section-gap: 128px; /* Desktop default (8rem) */ --section-gap-lg: 192px; /* Desktop default (12rem) */ /* ───────────────────────────────────────────────────────────── 5. LAYOUT & CONTAINER ───────────────────────────────────────────────────────────── */ --container-xs: 512px; /* 512px — dar içerik (metin) */ --container-sm: 640px; /* 640px — blog/bio */ --container-md: 896px; /* 896px — orta içerik */ --container-lg: 1152px; /* 1152px — geniş içerik */ --container-xl: 1344px; /* 1344px — maksimum genişlik */ --container-fluid: 100%; --container-padding: 48px; /* Desktop default (3rem) */ /* Grid */ --grid-columns: 12; --grid-gap: var(--space-md); /* ───────────────────────────────────────────────────────────── 6. BORDER RADIUS ───────────────────────────────────────────────────────────── */ --radius-xs: 3px; /* 3px — küçük detaylar */ --radius-sm: 6px; /* 6px — butonlar, input */ --radius-md: 10px; /* 10px — kartlar */ --radius-lg: 16px; /* 16px — büyük kartlar */ --radius-xl: 24px; /* 24px — modal, panel */ --radius-2xl: 32px; /* 32px — hero kartlar */ --radius-full: 9999px; /* tam yuvarlak — avatar, pill */ --radius-blob: 30% 70% 70% 30% / 30% 30% 70% 70%; /* organik şekil */ /* ───────────────────────────────────────────────────────────── 7. SHADOWS — Katmanlı derinlik sistemi ───────────────────────────────────────────────────────────── */ --shadow-xs: 0 1px 2px rgba(70, 75, 90, 0.06); --shadow-sm: 0 1px 3px rgba(70, 75, 90, 0.08), 0 1px 2px rgba(70, 75, 90, 0.06); --shadow-md: 0 4px 6px -1px rgba(70, 75, 90, 0.08), 0 2px 4px -2px rgba(70, 75, 90, 0.06); --shadow-lg: 0 10px 15px -3px rgba(70, 75, 90, 0.08), 0 4px 6px -4px rgba(70, 75, 90, 0.04); --shadow-xl: 0 20px 25px -5px rgba(70, 75, 90, 0.10), 0 8px 10px -6px rgba(70, 75, 90, 0.06); --shadow-2xl: 0 25px 50px -12px rgba(70, 75, 90, 0.20); /* Renkli gölgeler — buton/CTA için */ --shadow-primary: 0 8px 24px rgba(82, 61, 114, 0.25); --shadow-accent: 0 8px 24px rgba(140, 160, 60, 0.25); /* Yukarı kaldırma efekti (hover) */ --shadow-float: 0 14px 36px rgba(70, 75, 90, 0.12), 0 4px 8px rgba(70, 75, 90, 0.06); /* İç gölge */ --shadow-inner: inset 0 2px 4px rgba(70, 75, 90, 0.08); /* ───────────────────────────────────────────────────────────── 8. TRANSITIONS & ANIMATION ───────────────────────────────────────────────────────────── */ /* Süreler (Hızlar) */ --transition-fast: 150ms ease; --transition-normal: 250ms ease; --transition-slow: 400ms ease; --transition-slowest: 600ms ease; /* ───────────────────────────────────────────────────────────── 9. Z-INDEX KATMANLARI ───────────────────────────────────────────────────────────── */ --z-behind: -1; --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; --z-max: 9999; /* ───────────────────────────────────────────────────────────── 10. BLUR & BACKDROP — Glassmorphism desteği ───────────────────────────────────────────────────────────── */ --blur-sm: 4px; --blur-md: 12px; --blur-lg: 24px; --blur-xl: 40px; --glass-bg: rgba(255, 255, 255, 0.65); --glass-border: rgba(255, 255, 255, 0.30); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.06); /* ───────────────────────────────────────────────────────────── 11. GRADIENTS & SEAMLESS FLOW ───────────────────────────────────────────────────────────── */ /* Karakteristik (İmza) Gradientler */ --gradient-brand: linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-primary-light) 60%, var(--clr-accent) 100%); --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.1) 100%); --gradient-shimmer: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%); /* Kusursuz Akış (Seamless Flow) Gradientleri */ --flow-hero: linear-gradient(to bottom, #c6b2e5ab 0%, #dfeb4573 80%, #faf9f7 100%); --flow-testimonials: linear-gradient(to bottom, #faf9f7 0%, var(--clr-sky-soft) 100%); --flow-bio: linear-gradient(to bottom, var(--clr-sky-soft) 0%, var(--clr-warm) 100%); --flow-curriculum: linear-gradient(to bottom, var(--clr-warm) 0%, #faf9f7 100%); --flow-credentials: linear-gradient(to bottom, #faf9f7 0%, var(--clr-accent-soft) 100%); --flow-schedule: linear-gradient(to bottom, var(--clr-accent-soft) 0%, var(--clr-warm) 100%); --flow-faq: var(--clr-warm); --flow-contact: linear-gradient(to bottom, var(--clr-warm) 0%, #e2dbe9 100%); /* ───────────────────────────────────────────────────────────── 12. BORDERS ───────────────────────────────────────────────────────────── */ --border-width-thin: 1px; --border-width-medium: 2px; --border-width-thick: 3px; --border-subtle: var(--border-width-thin) solid var(--clr-gray-100); --border-default: var(--border-width-thin) solid var(--clr-gray-200); --border-strong: var(--border-width-medium) solid var(--clr-gray-300); --border-accent: var(--border-width-medium) solid var(--clr-accent); --border-primary: var(--border-width-medium) solid var(--clr-primary); /* ───────────────────────────────────────────────────────────── 13. DECORATIVE — Organik şekiller ve efektler ───────────────────────────────────────────────────────────── */ /* Blob border-radius varyantları */ --blob-1: 30% 70% 70% 30% / 30% 30% 70% 70%; --blob-2: 60% 40% 30% 70% / 60% 30% 70% 40%; --blob-3: 40% 60% 60% 40% / 70% 30% 40% 60%; /* Dot pattern (background-image olarak) */ --pattern-dots: radial-gradient( circle, var(--clr-gray-200) 1px, transparent 1px ); --pattern-dots-size: 24px 24px; /* Marquee animasyon hızı */ --marquee-speed: 40s; /* Scroll-triggered animasyon mesafesi */ --reveal-distance: 30px; --reveal-duration: var(--transition-slow); } /* ───────────────────────────────────────────────────────────── PREFERS REDUCED MOTION — Erişilebilirlik ───────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { :root { --transition-fast: 0ms ease; --transition-normal: 0ms ease; --transition-slow: 0ms ease; --transition-slowest: 0ms ease; --marquee-speed: 0s; --reveal-distance: 0px; } }