/* ============================================================ Athrio — global styles - Custom property based theming - System dark mode + manual override (data-theme on ) - Mobile-first, single 768px breakpoint ============================================================ */ :root { --primary: #0D7377; --primary-hover: #0a5d60; --accent: #E8913A; --accent-hover: #d97f29; --bg: #FAFAF8; --bg-elevated: #FFFFFF; --text: #1A1A2E; --text-muted: #6B6B80; --border: #E8E8E0; --shadow: 0 1px 2px rgba(26, 26, 46, 0.04), 0 4px 16px rgba(26, 26, 46, 0.06); --max-width: 1120px; --radius: 14px; --radius-sm: 8px; --font: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; } @media (prefers-color-scheme: dark) { :root { --primary: #14A8AE; --primary-hover: #18bdc4; --accent: #FFA94D; --accent-hover: #ffb868; --bg: #1A1A2E; --bg-elevated: #25253F; --text: #FAFAF8; --text-muted: #9999B0; --border: #2F2F4A; --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.25); } } /* Manual override — JS sets data-theme on */ html[data-theme="light"] { --primary: #0D7377; --primary-hover: #0a5d60; --accent: #E8913A; --accent-hover: #d97f29; --bg: #FAFAF8; --bg-elevated: #FFFFFF; --text: #1A1A2E; --text-muted: #6B6B80; --border: #E8E8E0; --shadow: 0 1px 2px rgba(26, 26, 46, 0.04), 0 4px 16px rgba(26, 26, 46, 0.06); } html[data-theme="dark"] { --primary: #14A8AE; --primary-hover: #18bdc4; --accent: #FFA94D; --accent-hover: #ffb868; --bg: #1A1A2E; --bg-elevated: #25253F; --text: #FAFAF8; --text-muted: #9999B0; --border: #2F2F4A; --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.25); } /* ============================================================ Reset + base ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); font-weight: 400; font-size: 16px; line-height: 1.6; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background 0.2s ease, color 0.2s ease; } h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; } p { margin: 0; } a { color: var(--primary); text-decoration: none; transition: color 0.15s ease; } a:hover { color: var(--primary-hover); } ul { margin: 0; padding: 0; list-style: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } img, svg { display: block; max-width: 100%; } .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 24px; } /* ============================================================ Header ============================================================ */ .site-header { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 24px; } .brand { font-size: 22px; font-weight: 900; color: var(--primary); letter-spacing: -0.03em; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: var(--text); transition: background 0.15s ease, transform 0.15s ease; } .theme-toggle:hover { background: var(--bg-elevated); } .theme-toggle:active { transform: scale(0.94); } .theme-toggle .icon { width: 20px; height: 20px; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } @media (prefers-color-scheme: dark) { .theme-toggle .icon-sun { display: block; } .theme-toggle .icon-moon { display: none; } } html[data-theme="light"] .theme-toggle .icon-sun { display: none; } html[data-theme="light"] .theme-toggle .icon-moon { display: block; } html[data-theme="dark"] .theme-toggle .icon-sun { display: block; } html[data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* ============================================================ Hero ============================================================ */ .hero { display: flex; align-items: center; justify-content: center; min-height: calc(90vh - 88px); padding: 64px 24px; } .hero-inner { max-width: 720px; text-align: center; } .wordmark { font-size: clamp(64px, 14vw, 128px); font-weight: 900; color: var(--primary); letter-spacing: -0.05em; line-height: 0.95; margin-bottom: 24px; } .tagline { font-size: clamp(22px, 4vw, 32px); font-weight: 600; color: var(--text); margin-bottom: 16px; letter-spacing: -0.01em; } .lede { font-size: 17px; color: var(--text-muted); max-width: 540px; margin: 0 auto 40px; line-height: 1.6; } .cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .cta { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: var(--radius); font-weight: 700; font-size: 16px; transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; box-shadow: var(--shadow); } .cta:hover { transform: translateY(-2px); } .cta:active { transform: translateY(0); } .cta-primary { background: var(--text); color: var(--bg); } .cta-primary:hover { background: var(--text); color: var(--bg); } .cta-secondary { background: var(--accent); color: #ffffff; } .cta-secondary:hover { background: var(--accent-hover); color: #ffffff; } /* ============================================================ Sections ============================================================ */ .section-title { font-size: clamp(28px, 5vw, 42px); text-align: center; margin-bottom: 56px; color: var(--text); } .features { padding: 96px 0; background: var(--bg-elevated); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .feature-grid { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 640px) { .feature-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .feature-grid { grid-template-columns: repeat(4, 1fr); } } .feature { padding: 32px 28px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .feature:hover { transform: translateY(-4px); border-color: var(--primary); box-shadow: var(--shadow); } .feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); margin-bottom: 20px; } .feature-icon svg { width: 24px; height: 24px; } .feature h3 { font-size: 19px; font-weight: 700; margin-bottom: 8px; color: var(--text); } .feature p { font-size: 15px; color: var(--text-muted); line-height: 1.6; } /* ============================================================ Exams (pills) ============================================================ */ .exams { padding: 96px 0; } .pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .pill { display: inline-flex; align-items: center; padding: 10px 20px; border: 2px solid var(--primary); border-radius: 999px; color: var(--primary); font-weight: 700; font-size: 15px; letter-spacing: 0.02em; background: transparent; } .pill-muted { border-color: var(--border); color: var(--text-muted); } /* ============================================================ Footer ============================================================ */ .site-footer { padding: 64px 0 48px; background: var(--bg-elevated); border-top: 1px solid var(--border); color: var(--text-muted); } .footer-grid { display: grid; grid-template-columns: 1fr; gap: 40px; } @media (min-width: 768px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; align-items: start; } } .footer-col h4 { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text); margin-bottom: 16px; } .footer-col ul li { margin-bottom: 10px; } .footer-col a { color: var(--text-muted); font-size: 15px; } .footer-col a:hover { color: var(--primary); } .footer-brand { font-size: 22px; font-weight: 900; color: var(--primary); margin-bottom: 8px; letter-spacing: -0.03em; } .footer-copy { font-size: 14px; color: var(--text-muted); } .social { display: flex; gap: 12px; } .social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); color: var(--text-muted); transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease; } .social a:hover { color: var(--primary); border-color: var(--primary); transform: translateY(-2px); } /* ============================================================ Legal pages (privacy, terms, kvkk) ============================================================ */ .legal { max-width: 760px; margin: 0 auto; padding: 64px 24px 96px; } .legal h1 { font-size: clamp(32px, 5vw, 44px); margin-bottom: 8px; color: var(--text); } .legal .updated { font-size: 14px; color: var(--text-muted); margin-bottom: 32px; } .legal h2 { font-size: 22px; margin-top: 40px; margin-bottom: 12px; color: var(--text); } .legal h3 { font-size: 17px; margin-top: 24px; margin-bottom: 8px; color: var(--text); } .legal p, .legal li { font-size: 16px; color: var(--text); line-height: 1.75; } .legal p { margin-bottom: 16px; } .legal ul { list-style: disc; padding-left: 22px; margin-bottom: 16px; } .legal li { margin-bottom: 8px; } .legal a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; } .legal hr { border: none; border-top: 1px solid var(--border); margin: 48px 0; } .lang-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; padding: 4px; margin-bottom: 32px; background: var(--bg-elevated); } .lang-toggle button { padding: 8px 18px; font-size: 14px; font-weight: 600; color: var(--text-muted); border-radius: 999px; transition: background 0.15s ease, color 0.15s ease; } .lang-toggle button[aria-pressed="true"] { background: var(--primary); color: #ffffff; } [hidden] { display: none !important; } /* ============================================================ Reduced motion ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }