/* ============================================================================
   VOTUM — temel katman: sıfırlama, tipografi, yerleşim iskeleti
   ============================================================================ */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  color-scheme: light dark;
}

body {
  min-height: 100svh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-feature-settings: "kern" 1, "liga" 1, "cv11" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
svg { flex: none; }

input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

/* --- Başlıklar --- */
h1, h2, h3, h4 { line-height: 1.15; font-weight: 640; letter-spacing: -0.021em; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.014em; }
h1, h2, h3 { text-wrap: balance; }
p  { text-wrap: pretty; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }

code, kbd, samp, pre { font-family: var(--mono); font-size: 0.9em; }

/* --- Odak: her yerde aynı, görünür --- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

::selection { background: var(--accent-weak); }

/* --- Yerleşim --- */
.wrap      { width: 100%; max-width: var(--wrap);      margin-inline: auto; padding-inline: var(--gutter); }
.wrap-wide { width: 100%; max-width: var(--wrap-wide); margin-inline: auto; padding-inline: var(--gutter); }
.measure   { max-width: var(--wrap-text); }

.stack-sm  { display: grid; gap: .5rem; }
.stack     { display: grid; gap: 1rem; }
.stack-lg  { display: grid; gap: 2rem; }
.row       { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.row-end   { margin-inline-start: auto; }

/* --- Metin yardımcıları --- */
.lead    { font-size: var(--fs-lead); color: var(--fg-muted); line-height: 1.6; }
.muted   { color: var(--fg-muted); }
.subtle  { color: var(--fg-subtle); }
.small   { font-size: var(--fs-sm); }
.xs      { font-size: var(--fs-xs); }
.hint    { font-size: var(--fs-sm); color: var(--fg-muted); }
.mono    { font-family: var(--mono); }
.nowrap  { white-space: nowrap; }
.break   { overflow-wrap: anywhere; }
.center  { text-align: center; }

.label {
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--fg-subtle);
}

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

.skip {
  position: fixed; left: 50%; translate: -50% -150%; top: 12px; z-index: 100;
  background: var(--accent); color: var(--accent-fg);
  padding: .7rem 1.25rem; border-radius: var(--r-pill);
  font-weight: 600; text-decoration: none; box-shadow: var(--shadow-lg);
  transition: translate var(--t-mid) var(--ease-out);
}
.skip:focus-visible { translate: -50% 0; }

/* --- Bölüm ritmi --- */
.section { padding-block: clamp(3rem, 9vh, 6.5rem); }
.section-tight { padding-block: clamp(2rem, 5vh, 3.5rem); }
.section-head { display: grid; gap: .75rem; max-width: 46rem; margin-bottom: clamp(2rem, 5vw, 3rem); }
.section-head.center { margin-inline: auto; text-align: center; }

/* --- Ayraç --- */
.rule { height: 1px; background: var(--border); border: 0; }

/* ----------------------------------------------------------------------------
   Hareket

   Ortaya çıkış animasyonları JS tarafından `is-in` sınıfıyla tetiklenir.
   JS çalışmazsa içerik zaten görünür durumdadır — animasyon bir katman,
   bir ön koşul değil.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    translate: 0 14px;
    transition: opacity var(--t-slow) var(--ease-out),
                translate var(--t-slow) var(--ease-out);
  }
  .reveal.is-in { opacity: 1; translate: 0 0; }
  .reveal-d1 { transition-delay: 70ms; }
  .reveal-d2 { transition-delay: 140ms; }
  .reveal-d3 { transition-delay: 210ms; }
  .reveal-d4 { transition-delay: 280ms; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}