/* ============================================================
   SOBEP — Tanıtım Sitesi · Tasarım Sistemi
   Marka: çelik mavisi #2E6A93 · teal #12B89B · mercan #F0704F · lacivert #16243A
   ============================================================ */

/* ---------- Tokens: renk paletleri (tweakable: data-theme) ---------- */
:root {
  /* default palette: "Çelik & Teal" */
  --blue:      #2E6A93;
  --blue-600:  #265d83;
  --blue-700:  #1f4d6e;
  --blue-300:  #7fb0cf;
  --blue-50:   #eef5fa;
  --teal:      #12b89b;
  --teal-600:  #0e9c84;
  --teal-50:   #e6f8f3;
  --coral:     #f0704f;
  --coral-600: #e2542f;
  --coral-50:  #fdeee9;
  --ink:       #16243a;     /* dark sections / footer */
  --ink-2:     #1d3047;

  --accent:    var(--teal); /* energetic accent */
  --accent-600:var(--teal-600);
  --accent-50: var(--teal-50);

  /* neutrals */
  --bg:        #ffffff;
  --bg-soft:   #f4f8fb;
  --bg-soft-2: #eaf1f6;
  --surface:   #ffffff;
  --border:    #e3ecf2;
  --border-2:  #d4e0e9;
  --text:      #17263b;
  --text-2:    #44586d;
  --muted:     #6b7e91;

  /* radius (tweakable: data-radius) */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-pill: 999px;

  /* spacing rhythm (tweakable: data-density) */
  --section-y: 116px;
  --gap: 24px;

  /* type (tweakable: data-font) */
  --font-head: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, sans-serif;

  --shadow-sm: 0 1px 2px rgba(22,36,58,.06), 0 2px 6px rgba(22,36,58,.05);
  --shadow-md: 0 6px 20px rgba(22,36,58,.08), 0 2px 8px rgba(22,36,58,.05);
  --shadow-lg: 0 24px 60px rgba(22,36,58,.14), 0 8px 24px rgba(22,36,58,.08);
  --shadow-brand: 0 18px 44px rgba(46,106,147,.24);

  --maxw: 1200px;
}

/* Theme: Okyanus (daha derin mavi, koyu vurgular) */
[data-theme="ocean"] {
  --blue: #1f5f8b; --blue-600:#185178; --blue-700:#124060; --blue-300:#76aacb; --blue-50:#eaf3f9;
  --teal:#1796b6; --teal-600:#0f7e9c; --teal-50:#e6f5f9;
  --coral:#ef8354; --coral-600:#df6633; --coral-50:#fdf0e8;
  --accent:var(--teal); --accent-600:var(--teal-600); --accent-50:var(--teal-50);
  --ink:#0f2336; --ink-2:#163049;
  --bg-soft:#f1f7fb; --bg-soft-2:#e4eff6;
}

/* Theme: Sıcak (mercan öncelikli, insan odaklı) */
[data-theme="warm"] {
  --blue:#3a6d8f; --blue-600:#305f7e; --blue-300:#86b1cb; --blue-50:#eef4f8;
  --teal:#1fae8e; --teal-600:#179177;
  --coral:#ef6a45; --coral-600:#e04e28; --coral-50:#fdece6;
  --accent:var(--coral); --accent-600:var(--coral-600); --accent-50:var(--coral-50);
  --ink:#221a2e; --ink-2:#2e2440;
  --bg-soft:#fbf6f3; --bg-soft-2:#f4e9e3;
}

/* Theme: Orman (büyüme, teal/yeşil öncelikli) */
[data-theme="forest"] {
  --blue:#2f7d6b; --blue-600:#266757; --blue-300:#86c2b3; --blue-50:#ecf6f3;
  --teal:#11a37e; --teal-600:#0c8868; --teal-50:#e5f6f0;
  --coral:#eaa13f; --coral-600:#d98a26; --coral-50:#fdf3e2;
  --accent:var(--teal); --accent-600:var(--teal-600); --accent-50:var(--teal-50);
  --ink:#11261f; --ink-2:#1a352b;
  --bg-soft:#f1f8f5; --bg-soft-2:#e3f0ea;
}

/* ---------- Fonts (tweakable: data-font) ---------- */
[data-font="space"]   { --font-head:"Space Grotesk", system-ui, sans-serif; --font-body:"Manrope", system-ui, sans-serif; }
[data-font="outfit"]  { --font-head:"Outfit", system-ui, sans-serif; --font-body:"Nunito Sans", system-ui, sans-serif; }
[data-font="sora"]    { --font-head:"Sora", system-ui, sans-serif; --font-body:"Public Sans", system-ui, sans-serif; }

/* ---------- Radius scale (tweakable: data-radius) ---------- */
[data-radius="soft"]  { --r-xs:6px; --r-sm:9px; --r-md:13px; --r-lg:18px; --r-xl:24px; }
[data-radius="sharp"] { --r-xs:3px; --r-sm:5px; --r-md:7px; --r-lg:10px; --r-xl:12px; --r-pill:10px; }
[data-radius="round"] { --r-xs:12px; --r-sm:16px; --r-md:24px; --r-lg:34px; --r-xl:44px; }

/* ---------- Density (tweakable: data-density) ---------- */
[data-density="compact"]  { --section-y:84px; --gap:18px; }
[data-density="spacious"] { --section-y:148px; --gap:30px; }

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.6;
}
h1,h2,h3,h4,h5 { font-family: var(--font-head); color: var(--text); margin: 0; line-height: 1.1; letter-spacing: -0.02em; font-weight: 700; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); }

#root { overflow-x: hidden; }

/* ---------- Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.wrap-sm { max-width: 920px; }
.section { padding: var(--section-y) 0; position: relative; }
.section-tight { padding: calc(var(--section-y) * 0.62) 0; }

/* ---------- Type scale ---------- */
.display { font-size: clamp(40px, 5.6vw, 74px); line-height: 1.02; letter-spacing: -0.035em; }
.h1 { font-size: clamp(34px, 4vw, 52px); letter-spacing:-0.03em; }
.h2 { font-size: clamp(28px, 3.1vw, 42px); letter-spacing:-0.025em; }
.h3 { font-size: clamp(21px, 1.7vw, 26px); }
.lead { font-size: clamp(17px, 1.35vw, 20px); color: var(--text-2); line-height: 1.62; }
.eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-head);
  font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-600);
}
.eyebrow::before { content:""; width:22px; height:2px; background: var(--accent); border-radius:2px; display:inline-block; }
.muted { color: var(--muted); }

/* ---------- Buttons ---------- */
.skip-link {
  position:absolute; left:8px; top:-48px; z-index:1000;
  background:var(--blue, #2563eb); color:#fff; padding:10px 16px;
  border-radius:8px; font-weight:600; transition:top .15s ease;
}
.skip-link:focus { top:8px; }
#main-content:focus { outline:none; }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family: var(--font-head); font-weight: 600; font-size: 15.5px;
  padding: 13px 22px; border-radius: var(--r-pill);
  border: 1.5px solid transparent; transition: all .18s ease; white-space: nowrap;
  line-height: 1;
}
.btn svg { width: 18px; height: 18px; }
.btn:disabled, .btn.is-disabled { opacity:.6; cursor:not-allowed; pointer-events:none; transform:none; }
.btn-primary { background: var(--blue); color:#fff; box-shadow: var(--shadow-brand); }
.btn-primary:hover { background: var(--blue-600); }
.btn-accent { background: var(--accent); color:#fff; }
.btn-accent:hover { background: var(--accent-600); }
.btn-coral { background: var(--coral); color:#fff; }
.btn-coral:hover { background: var(--coral-600); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border-2); }
.btn-ghost:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-50); }
.btn-light { background:#fff; color: var(--ink); }
.btn-light:hover { box-shadow: var(--shadow-md); }
.btn-lg { padding: 16px 28px; font-size: 16.5px; }
.btn-sm { padding: 9px 16px; font-size: 14px; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card-hover:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--border-2); }

.pill {
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 14px; border-radius: var(--r-pill);
  background: var(--bg-soft); border:1px solid var(--border);
  font-size:13.5px; font-weight:600; color: var(--text-2);
}

/* ---------- Icon tile (uygulamadaki yumuşak kutucuklar) ---------- */
.tile {
  width:54px; height:54px; border-radius: var(--r-md);
  display:grid; place-items:center; flex:none;
}
.tile svg { width: 26px; height: 26px; }
.tile-teal  { background: var(--teal-50); color: var(--teal-600); }
.tile-blue  { background: var(--blue-50); color: var(--blue); }
.tile-coral { background: var(--coral-50); color: var(--coral-600); }
.tile-violet{ background:#f0ecfb; color:#7b5cd6; }

/* ---------- Section backgrounds ---------- */
.bg-soft { background: var(--bg-soft); }
.bg-ink  { background: var(--ink); color:#dfe8f0; }
.bg-ink h1,.bg-ink h2,.bg-ink h3,.bg-ink h4 { color:#fff; }

/* ---------- Reveal-on-scroll (handled by motion — keep reduced-motion) ---------- */
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

/* grid utilities */
.grid { display:grid; gap: var(--gap); }
.g2 { grid-template-columns: repeat(2,1fr); }
.g3 { grid-template-columns: repeat(3,1fr); }
.g4 { grid-template-columns: repeat(4,1fr); }
@media (max-width: 980px){ .g4{grid-template-columns:repeat(2,1fr);} .g3{grid-template-columns:repeat(2,1fr);} }
@media (max-width: 640px){ .g4,.g3,.g2{grid-template-columns:1fr;} }

.flex { display:flex; }
.center { align-items:center; }
.between { justify-content:space-between; }
.wrap-gap { flex-wrap:wrap; gap:14px; }
.text-center { text-align:center; }