/* ========================================================================== BASE.CSS — Design tokens, resets, typography Mersin Gider Açma — Premium Kurumsal Site ========================================================================== */ /* Fontlar artık her sayfanın bölümünde ile yükleniyor (render-blocking @import kaldırıldı — bkz. Core Web Vitals notu). */ :root { /* ---- Renk Paleti (brief tanımlı) ---- */ --color-primary: #0A66C2; --color-primary-rgb: 10, 102, 194; --color-support: #0B2D52; --color-accent: #FF7A00; --color-accent-rgb: 255, 122, 0; /* Düz zemin üzerinde beyaz metinle kullanılacak buton rengi. #FF7A00 üzerinde beyaz metin 2.6:1 kontrast veriyordu (WCAG AA'nın altında). #B85800 aynı marka tonunda ~4.7:1 kontrast sağlıyor. */ --color-accent-strong: #B85800; --color-bg: #FFFFFF; --color-card: #FFFFFF; --color-border: #E8EEF5; --color-success: #18B566; /* ---- Türetilmiş nötrler ---- */ --ink-900: #0B1420; --ink-700: #33465C; --ink-500: #5C7189; --ink-300: #647890; --surface-100: #F6F9FC; --surface-200: #EEF3F8; /* ---- Gölge sistemi ---- */ --shadow-sm: 0 1px 2px rgba(11, 20, 32, 0.05), 0 1px 1px rgba(11, 20, 32, 0.04); --shadow-md: 0 8px 24px -8px rgba(11, 45, 82, 0.18); --shadow-lg: 0 24px 48px -16px rgba(11, 45, 82, 0.22); --shadow-glow-accent: 0 10px 30px -8px rgba(255, 122, 0, 0.35); --shadow-glow-primary: 0 10px 30px -8px rgba(10, 102, 194, 0.30); /* ---- Yarıçap / boşluk ---- */ --radius-lg: 24px; --radius-md: 16px; --radius-sm: 10px; --radius-pill: 999px; --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-5: 48px; --space-6: 64px; --space-7: 96px; --space-8: 128px; /* ---- Tipografi ---- */ --font-display: 'Manrope', 'Segoe UI', sans-serif; --font-body: 'Inter', 'Segoe UI', sans-serif; --container-w: 1240px; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --transition-fast: 180ms var(--ease-out); --transition-base: 320ms var(--ease-out); --header-h: 84px; } /* Dark mode token overrides live in darkmode.css */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } body { margin: 0; font-family: var(--font-body); color: var(--ink-900); background: var(--color-bg); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg, video { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul, ol { margin: 0; padding: 0; list-style: none; } button { font-family: inherit; cursor: pointer; } input, textarea, select, button { font: inherit; } h1, h2, h3, h4, h5 { font-family: var(--font-display); color: var(--color-support); margin: 0; line-height: 1.15; letter-spacing: -0.01em; font-weight: 800; } h1 { font-size: clamp(2.4rem, 4.4vw, 3.75rem); letter-spacing: -0.02em; } h2 { font-size: clamp(1.9rem, 3vw, 2.75rem); letter-spacing: -0.015em; } h3 { font-size: clamp(1.25rem, 1.6vw, 1.5rem); font-weight: 700; } h4 { font-size: 1.125rem; font-weight: 700; } p { margin: 0; color: var(--ink-700); } .tabular { font-variant-numeric: tabular-nums; } /* ---- Erişilebilir odak durumu ---- */ :focus-visible { outline: 2.5px solid var(--color-accent-strong); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--color-accent); color: #fff; } /* ---- Kaydırma çubuğu (ince, marka rengi) ---- */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--surface-100); } ::-webkit-scrollbar-thumb { background: var(--ink-300); border-radius: var(--radius-pill); } ::-webkit-scrollbar-thumb:hover { background: var(--color-primary); } /* ---- Erişilebilirlik yardımcıları ---- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link { position: fixed; top: -60px; left: 16px; background: var(--color-support); color: #fff; padding: 12px 20px; border-radius: var(--radius-sm); z-index: 1000; transition: top var(--transition-fast); font-weight: 600; } .skip-link:focus { top: 16px; }