/* ==========================================================================
base.css — Design tokens, reset, typography
Mersin Tıkanıklık Açma — Premium Corporate Design System
========================================================================== */
/* ---- Fonts ----
Manrope (headings) & Inter (body) are loaded via + Google Fonts
tags in each page (see /fonts/README.txt for self-hosting instructions).
font-display: swap is enforced on the Google Fonts request via &display=swap. */
/* ---- Design tokens ---- */
:root {
color-scheme: light;
/* Brand palette — deep marine blue + amber-red accent (tesisat/su teması, premium) */
--color-primary-950: #04121f;
--color-primary-900: #0a1f33;
--color-primary-800: #0f2c47;
--color-primary-700: #163d5e;
--color-primary-600: #1f5279;
--color-primary-500: #2a6a99;
--color-primary-400: #4a8ab8;
--color-primary-300: #83b3d4;
--color-primary-200: #bcd8ea;
--color-primary-100: #e2f0f8;
--color-primary-50: #f2f9fc;
--color-accent-700: #b8360f;
--color-accent-600: #d84315;
--color-accent-500: #ea5a2a;
--color-accent-400: #f4794f;
--color-accent-300: #f8a582;
--color-accent-100: #fde7dd;
--color-success-500: #1c9d6c;
--color-success-100: #dff5ec;
--color-ink-950: #0b1116;
--color-ink-900: #131a21;
--color-ink-700: #2c3742;
--color-ink-600: #4a5660;
--color-ink-500: #6b7680;
--color-ink-400: #93a0aa;
--color-ink-300: #c3cdd4;
--color-ink-200: #dfe6ea;
--color-ink-100: #eef2f5;
--color-ink-50: #f7f9fa;
--color-surface: #ffffff;
--color-surface-alt: var(--color-ink-50);
--color-surface-sunken: var(--color-primary-50);
--color-text: var(--color-ink-900);
--color-text-muted: var(--color-ink-600);
--color-text-inverse: #ffffff;
--color-text-inverse-muted: rgba(255,255,255,.72);
--color-border: var(--color-ink-200);
--color-border-soft: rgba(15, 44, 71, .08);
/* Gradients */
--gradient-hero: linear-gradient(160deg, var(--color-primary-950) 0%, var(--color-primary-800) 46%, var(--color-primary-600) 100%);
--gradient-accent: linear-gradient(135deg, var(--color-accent-600) 0%, var(--color-accent-400) 100%);
--gradient-surface: linear-gradient(180deg, #ffffff 0%, var(--color-primary-50) 100%);
--gradient-glass: linear-gradient(135deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.03) 100%);
/* Typography */
--font-heading: 'Manrope', -apple-system, 'Segoe UI', sans-serif;
--font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;
--fs-2xs: .75rem;
--fs-xs: .8125rem;
--fs-sm: .9375rem;
--fs-base: 1rem;
--fs-md: 1.125rem;
--fs-lg: 1.25rem;
--fs-xl: 1.5rem;
--fs-2xl: 1.875rem;
--fs-3xl: 2.375rem;
--fs-4xl: 3rem;
--fs-5xl: 3.75rem;
--lh-tight: 1.15;
--lh-snug: 1.35;
--lh-normal: 1.6;
--lh-relaxed: 1.75;
/* 8pt spacing system */
--space-1: .25rem;
--space-2: .5rem;
--space-3: .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;
/* Radius */
--radius-sm: 10px;
--radius-md: 16px;
--radius-lg: 24px;
--radius-xl: 32px;
--radius-full: 999px;
/* Shadows — soft, layered, premium */
--shadow-xs: 0 1px 2px rgba(11, 17, 22, .05);
--shadow-sm: 0 2px 8px rgba(11, 17, 22, .06), 0 1px 2px rgba(11,17,22,.04);
--shadow-md: 0 8px 24px rgba(11, 17, 22, .08), 0 2px 6px rgba(11,17,22,.04);
--shadow-lg: 0 20px 48px rgba(10, 31, 51, .14), 0 4px 12px rgba(11,17,22,.06);
--shadow-xl: 0 32px 72px rgba(10, 31, 51, .20);
--shadow-glow: 0 0 0 1px rgba(255,255,255,.06), 0 20px 60px rgba(4,18,31,.45);
--shadow-focus: 0 0 0 4px rgba(42, 106, 153, .28);
/* Motion */
--ease-out: cubic-bezier(.16,1,.3,1);
--ease-in-out: cubic-bezier(.65,0,.35,1);
--dur-fast: 160ms;
--dur-base: 280ms;
--dur-slow: 480ms;
/* Layout */
--container-max: 1280px;
--container-pad: clamp(1.25rem, 4vw, 2.5rem);
--header-h: 84px;
--header-h-scrolled: 68px;
color-scheme: light;
}
/* ---- Dark mode tokens (class-based, toggled by darkmode.js; also mirrors prefers-color-scheme) ---- */
:root[data-theme="dark"] {
color-scheme: dark;
--color-surface: #0d1620;
--color-surface-alt: #101b26;
--color-surface-sunken: #0a121b;
--color-text: #f2f6f8;
--color-text-muted: #a8b6c0;
--color-border: #223141;
--color-border-soft: rgba(255,255,255,.08);
--gradient-surface: linear-gradient(180deg, #0d1620 0%, #0a121b 100%);
}
/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
}
body {
font-family: var(--font-body);
font-size: var(--fs-base);
line-height: var(--lh-normal);
color: var(--color-text);
background: var(--color-surface);
min-height: 100dvh;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
overflow-x: hidden;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
img { color: transparent; }
/* Elle çizilen ikonlar (SVG) intrinsic boyutu olmadığı için taşan tarayıcı
varsayılanına (300x150) düşmesin diye güvenli bir varsayılan boyut alır.
Daha spesifik seçiciler (.btn svg, .feature-card__icon svg vb.) bunu ezer. */
svg { width: 20px; height: 20px; flex-shrink: 0; }
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: 800;
line-height: var(--lh-tight);
letter-spacing: -.02em;
color: var(--color-text);
}
h1 { font-size: clamp(2.25rem, 4.4vw, var(--fs-5xl)); }
h2 { font-size: clamp(1.75rem, 3.2vw, var(--fs-3xl)); }
h3 { font-size: clamp(1.25rem, 2vw, var(--fs-xl)); }
h4 { font-size: var(--fs-lg); }
p { color: var(--color-text-muted); line-height: var(--lh-relaxed); }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }
input, textarea, select {
font-family: inherit;
font-size: var(--fs-base);
color: var(--color-text);
background: var(--color-surface);
}
/* ---- Focus states — WCAG AA ---- */
:focus-visible {
outline: none;
box-shadow: var(--shadow-focus);
border-radius: var(--radius-sm);
}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
box-shadow: var(--shadow-focus);
}
/* ---- Selection ---- */
::selection { background: var(--color-primary-600); color: #fff; }
/* ---- Skip link (a11y) ---- */
.skip-link {
position: absolute;
left: var(--space-4);
top: -60px;
background: var(--color-primary-900);
color: #fff;
padding: var(--space-3) var(--space-5);
border-radius: var(--radius-sm);
z-index: 1000;
transition: top var(--dur-base) var(--ease-out);
font-weight: 600;
}
.skip-link:focus { top: var(--space-4); }
/* ---- Scrollbar (webkit, subtle) ---- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-ink-300); border-radius: var(--radius-full); border: 2px solid var(--color-surface); }
::-webkit-scrollbar-thumb:hover { background: var(--color-ink-400); }