/* base.css - reset, tipografi tabani, semantic elemanlar, a11y, motion guard.
   Tum degerler tokens.css'ten. */

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

* { margin: 0; }

[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--sp-16);
  color-scheme: light dark;
}
[data-theme="dark"] { color-scheme: dark; }
[data-theme="light"] { color-scheme: light; }

body {
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--ff-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-body);
  line-height: 1.6;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "dlig" 0, "calt" 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

img, svg, picture { display: block; max-width: 100%; }

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

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

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

h1, h2, h3 {
  font-family: var(--ff-display);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: var(--fw-black);
  text-wrap: balance;
}

p { max-width: 65ch; }

/* etiket-mikrotipografi (Swiss-teknik parmak izi) */
.eyebrow,
.label {
  font-family: var(--ff-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}

/* tabular rakamlar - datasheet hizalamasi */
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* layout yardimcilari */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-pad); }

/* gorunur 12-kolon izgara (Specimen Grid) */
.grid12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
}
@media (max-width: 768px) {
  .grid12 { grid-template-columns: repeat(6, 1fr); }
}

/* erisilebilirlik */
:focus-visible { outline: var(--focus-ring); outline-offset: 3px; border-radius: 2px; }
:focus:not(:focus-visible) { outline: none; }

.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: absolute; left: var(--sp-4); top: -100px;
  background: var(--c-ink); color: var(--c-bg);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--radius);
  z-index: 100; transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: var(--sp-4); }

/* ============ SAYFA GECISI (MPA) + GIRIS ANIMASYONU ============ */
/* Edge/Chrome: sayfalar arasi otomatik cross-fade (desteklemeyen tarayicida zararsiz degrade) */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--dur-med);
  animation-timing-function: var(--ease);
}
/* ilk yukleme / fallback: icerik yumusak girer ("zink" yerine renk-acilmasi) */
@keyframes pageIn { from { opacity: 0; transform: translateY(8px); } }
#main { animation: pageIn var(--dur-slow) var(--ease) both; }

/* reduced-motion: tum dekoratif hareket kapali, son durum aninda */
@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;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  #main { animation: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}