/* =========================================================================
   base.css — paylaşılan altyapı katmanı (TÜM temalar bunu yükler)
   =========================================================================

   Bu dosya TASARIM İÇERMEZ. Sadece:
     1. reset
     2. token SÖZLEŞMESİ (--brand, --bg, --radius-lg ... isimleri burada tanımlı)
     3. layout primitive'leri (.container, .section, .grid, .stack ...)
     4. erişilebilirlik + hareket kuralları

   Tema `css/theme.css` içinde SADECE token değerlerini ve kendi bileşen
   sınıflarını yazar. Buradaki hiçbir değeri kopyalamaz, ezmek isterse
   :root üzerinden ezer.

   ⚠️ Bu dosyayı tema başına DEĞİŞTİRME. Tüm siteler ortak kullanır.
   ========================================================================= */

/* ---------------------------------------------------------------- 1. RESET */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Sticky header'ın anchor hedefini örtmesini engeller */
  scroll-padding-top: var(--header-h, 5rem);
}

body {
  min-height: 100svh;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
}

img, picture, svg, video, canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

svg { flex: none; }

input, button, textarea, select { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-display, 700);
  line-height: var(--leading-display, 1.08);
  letter-spacing: var(--tracking-display, -0.02em);
  text-wrap: balance;
}

a { color: inherit; text-decoration: none; }

ul[class], ol[class] { list-style: none; padding: 0; }

hr { border: 0; border-top: 1px solid var(--line); }

::selection {
  background: var(--brand);
  color: var(--brand-fg);
}

/* ------------------------------------------------------ 2. TOKEN CONTRACT */
/* Buradaki değerler NÖTR FALLBACK'tir — tema bunları ezmezse site "çalışır
   ama markasızdır". Tema yazarken :root bloğunda hepsini yeniden tanımla. */

:root {
  color-scheme: dark light;

  /* --- yüzeyler & metin (OKLCH) --- */
  --bg:          oklch(15% 0.015 265);
  --bg-elev:     oklch(19% 0.018 265);
  --bg-sunken:   oklch(12% 0.014 265);
  --fg:          oklch(97% 0.005 265);
  --fg-muted:    oklch(75% 0.015 265);
  --fg-subtle:   oklch(58% 0.018 265);

  /* --- marka --- */
  --brand:        oklch(65% 0.17 250);
  --brand-strong: oklch(56% 0.18 250);
  --brand-soft:   oklch(65% 0.17 250 / 0.12);
  --brand-fg:     oklch(99% 0 0);

  --accent:       oklch(78% 0.16 165);
  --accent-fg:    oklch(18% 0.02 165);

  /* --- çizgi & odak --- */
  --line:        oklch(100% 0 0 / 0.09);
  --line-strong: oklch(100% 0 0 / 0.18);
  --ring:        var(--brand);

  /* --- durum renkleri --- */
  --ok:   oklch(72% 0.16 150);
  --warn: oklch(78% 0.15 80);
  --bad:  oklch(65% 0.19 25);

  /* --- tipografi --- */
  --font-display: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, monospace;

  --weight-display: 700;
  --leading-display: 1.08;
  --tracking-display: -0.02em;

  /* akışkan tip ölçeği — 360px → 1440px arası clamp'lenir */
  --step--2: clamp(0.69rem, 0.67rem + 0.10vw, 0.76rem);
  --step--1: clamp(0.83rem, 0.79rem + 0.18vw, 0.94rem);
  --step-0:  clamp(1.00rem, 0.94rem + 0.28vw, 1.18rem);
  --step-1:  clamp(1.20rem, 1.10rem + 0.44vw, 1.47rem);
  --step-2:  clamp(1.44rem, 1.29rem + 0.67vw, 1.84rem);
  --step-3:  clamp(1.73rem, 1.50rem + 1.00vw, 2.30rem);
  --step-4:  clamp(2.07rem, 1.74rem + 1.46vw, 2.88rem);
  --step-5:  clamp(2.49rem, 2.00rem + 2.09vw, 3.60rem);
  --step-6:  clamp(2.99rem, 2.30rem + 2.96vw, 4.50rem);
  --step-7:  clamp(3.58rem, 2.61rem + 4.16vw, 5.62rem);

  /* --- boşluk --- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;

  /* bölüm dikey ritmi — viewport'a göre nefes alır */
  --section-y: clamp(3.5rem, 2rem + 7vw, 8rem);

  /* --- geometri --- */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  22px;
  --radius-xl:  32px;
  --radius-full: 999px;

  --border-w: 1px;

  /* --- gölge --- */
  --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.2);
  --shadow-md: 0 8px 24px -8px oklch(0% 0 0 / 0.35);
  --shadow-lg: 0 32px 64px -24px oklch(0% 0 0 / 0.5);
  --shadow-glow: 0 0 0 1px var(--brand-soft), 0 12px 40px -12px var(--brand-soft);

  /* --- hareket --- */
  --dur-fast: 140ms;
  --dur-base: 260ms;
  --dur-slow: 620ms;
  --ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- ölçü --- */
  --container: 1200px;
  --container-wide: 1440px;
  --container-prose: 68ch;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --header-h: 4.5rem;
}

/* Açık tema: tema kendi light paletini tanımlar; burada sadece hook var. */
:root[data-theme="light"] {
  color-scheme: light;
}

/* -------------------------------------------------------- 3. LAYOUT PRIMITIVES */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide  { max-width: var(--container-wide); }
.container--prose { max-width: var(--container-prose); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * 0.55); }
.section--flush-top { padding-block-start: 0; }

/* Dikey yığın — aradaki boşluğu tek yerden yönetir */
.stack        { display: flex; flex-direction: column; gap: var(--space-md); }
.stack--sm    { gap: var(--space-sm); }
.stack--lg    { gap: var(--space-lg); }
.stack--xl    { gap: var(--space-xl); }

/* Yatay küme — taşarsa alt satıra iner */
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}

/* Otomatik sığdıran grid — medya sorgusu gerekmez */
.grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 17rem), 100%), 1fr));
}
.grid--2 { --grid-min: 24rem; }
.grid--3 { --grid-min: 17rem; }
.grid--4 { --grid-min: 13rem; }
.grid--tight { gap: var(--space-sm); }

/* İçerik + kenar çubuğu */
.split {
  display: grid;
  gap: var(--space-xl);
  align-items: start;
}
@media (min-width: 60rem) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem); }
  .split--reverse > :first-child { order: 2; }
}

/* Bento — asimetrik vurgu için; .bento__item--wide / --tall ile hücre büyüt */
.bento {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  grid-auto-rows: minmax(11rem, auto);
}
@media (min-width: 48rem) {
  .bento__item--wide { grid-column: span 2; }
  .bento__item--tall { grid-row: span 2; }
}

.center-x { margin-inline: auto; }
.text-center { text-align: center; }
.full-bleed { width: 100vw; margin-inline: calc(50% - 50vw); }

/* --------------------------------------------------------- 4. TYPE HELPERS */

.eyebrow {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
}

.lead {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--fg-muted);
  text-wrap: pretty;
  max-width: 60ch;
}

.muted  { color: var(--fg-muted); }
.subtle { color: var(--fg-subtle); }

.display-1 { font-size: var(--step-7); }
.display-2 { font-size: var(--step-6); }
.display-3 { font-size: var(--step-5); }
.h2 { font-size: var(--step-4); }
.h3 { font-size: var(--step-2); }
.h4 { font-size: var(--step-1); }

/* Uzun serbest metin blokları (spintax içeriği burada yaşar) */
.prose {
  max-width: var(--container-prose);
  color: var(--fg-muted);
  text-wrap: pretty;
}
.prose > * + * { margin-block-start: 1.1em; }
.prose h2, .prose h3 {
  color: var(--fg);
  margin-block-start: 1.8em;
}
.prose strong { color: var(--fg); font-weight: 650; }
.prose a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
.prose ul, .prose ol { padding-inline-start: 1.35em; }
.prose li + li { margin-block-start: 0.4em; }

/* Satır kırpma */
.clamp-2, .clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.clamp-2 { -webkit-line-clamp: 2; }
.clamp-3 { -webkit-line-clamp: 3; }

/* ------------------------------------------------------ 5. SCROLL REVEAL */
/* JS yoksa da içerik GÖRÜNÜR kalır: gizleme sınıfı reveal.js tarafından
   <html>'e js sınıfı eklendikten sonra devreye girer. */

.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--reveal-y, 18px), 0);
  transition:
    opacity var(--dur-slow) var(--ease-out) var(--reveal-delay, 0ms),
    transform var(--dur-slow) var(--ease-out) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
[data-reveal="scale"] { --reveal-y: 0px; }
.js [data-reveal="scale"] { transform: scale(0.965); }
.js [data-reveal="scale"].is-visible { transform: none; }

/* ---------------------------------------------------- 6. A11Y & MOTION */

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  inset-inline-start: var(--space-sm);
  inset-block-start: -100%;
  z-index: 999;
  padding: var(--space-2xs) var(--space-sm);
  background: var(--brand);
  color: var(--brand-fg);
  border-radius: var(--radius-sm);
}
.skip-link:focus { inset-block-start: var(--space-sm); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ------------------------------------------------------- 7. PRINT / MISC */

.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

.scroll-x {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

/* Marquee / sonsuz şerit — içeriği JS'siz iki kez basman yeterli */
@keyframes marquee-x {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track {
  display: flex;
  width: max-content;
  gap: var(--space-lg);
  animation: marquee-x var(--marquee-dur, 32s) linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }

@media print {
  body { background: #fff; color: #000; }
  .no-print, header nav, footer { display: none !important; }
}