/* ==========================================================================
   Temel katman: sıfırlama, tipografi, ortak bileşenler
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: none;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4 {
  font-weight: 600;
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-tight);
  text-wrap: balance;
}
h5, h6 { font-weight: 600; letter-spacing: var(--tr-snug); }

p { text-wrap: pretty; }

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

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

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

:focus-visible {
  outline: none;
  box-shadow: var(--focus);
  border-radius: var(--r-tight);
}
:where(button, a, input, select, textarea):focus:not(:focus-visible) { outline: none; }

::selection { background: var(--signal); color: var(--signal-ink); }

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

/* Ekran okuyucu */
.sr {
  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(--s-4); top: -100px; z-index: var(--z-toast);
  background: var(--signal); color: var(--signal-ink);
  padding: var(--s-3) var(--s-5); border-radius: var(--r-input); font-weight: 600;
  transition: top var(--d-fast) var(--ease-out);
}
.skip-link:focus { top: var(--s-4); }

/* --- Düzen yardımcıları -------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--narrow { max-width: 940px; }
.shell--text { max-width: 720px; }

.stack > * + * { margin-top: var(--flow, var(--s-4)); }

/* --- Tipografik sınıflar ------------------------------------------------- */
.display {
  font-size: var(--t-3xl);
  font-weight: 600;
  letter-spacing: -0.042em;
  line-height: 0.98;
}
.title    { font-size: var(--t-2xl); }
.headline { font-size: var(--t-xl); }
.subhead  { font-size: var(--t-lg); font-weight: 600; letter-spacing: var(--tr-snug); }

.lede {
  font-size: var(--t-md);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 54ch;
}
.muted { color: var(--ink-2); }
.dim   { color: var(--ink-3); }

.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.eyebrow {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Metin okuma yüzeyi - egzersiz metinleri her yerde bu sınıfı kullanır */
.prose {
  font-family: var(--font-read);
  font-size: clamp(1rem, 0.94rem + 0.34vw, 1.25rem);
  line-height: var(--lh-read);
  letter-spacing: 0.004em;
  color: var(--ink);
  max-width: var(--measure);
  hyphens: auto;
  hyphenate-limit-chars: 7 3 3;
}
.prose p + p { margin-top: 1.05em; }

/* --- Düğmeler ------------------------------------------------------------ */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-line: var(--line-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  white-space: nowrap;
  padding: 0.72em 1.35em;
  min-height: 44px;
  border-radius: var(--r-input);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1.5px solid var(--btn-line);
  font-weight: 600;
  font-size: var(--t-sm);
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: transform var(--d-fast) var(--ease-out),
              background-color var(--d-fast) var(--ease-out),
              border-color var(--d-fast) var(--ease-out),
              opacity var(--d-fast) var(--ease-out);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.45; pointer-events: none; transform: none;
}

.btn--primary {
  --btn-bg: var(--signal);
  --btn-fg: var(--signal-ink);
  --btn-line: var(--signal);
}
.btn--primary:hover { --btn-bg: var(--signal-line); --btn-line: var(--signal-line); }

.btn--solid {
  --btn-bg: var(--ink);
  --btn-fg: var(--bg);
  --btn-line: var(--ink);
}
.btn--ghost { --btn-line: transparent; --btn-fg: var(--ink-2); }
.btn--ghost:hover { --btn-bg: var(--bg-2); --btn-fg: var(--ink); }

.btn--lg { padding: 0.92em 1.7em; font-size: var(--t-base); min-height: 52px; }
.btn--sm { padding: 0.5em 0.9em; font-size: var(--t-xs); min-height: 36px; }
.btn--block { width: 100%; }

.btn svg { width: 1.15em; height: 1.15em; flex: none; }

/* --- Rozet / etiket ------------------------------------------------------ */
.chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 0.32em 0.75em;
  border-radius: var(--r-chip);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--ink-2);
}
.chip--signal { background: var(--signal-dim); border-color: var(--signal-line); color: var(--ink); }
.chip--ok   { background: var(--ok-bg);   border-color: transparent; color: var(--ok); }
.chip--warn { background: var(--warn-bg); border-color: transparent; color: var(--warn); }
.chip--err  { background: var(--err-bg);  border-color: transparent; color: var(--err); }

/* --- Yüzey --------------------------------------------------------------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
}

/* --- Form ---------------------------------------------------------------- */
.field { display: grid; gap: var(--s-2); }
.field > label { font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.field .hint { font-size: var(--t-xs); color: var(--ink-2); }
.field .error { font-size: var(--t-xs); color: var(--err); font-weight: 600; }

.input {
  width: 100%;
  padding: 0.7em 0.9em;
  min-height: 46px;
  background: var(--surface);
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-input);
  color: var(--ink);
  transition: border-color var(--d-fast) var(--ease-out);
}
.input::placeholder { color: var(--ink-3); opacity: 1; }
.input:hover { border-color: var(--ink-3); }
.input:focus-visible { border-color: var(--ink); box-shadow: var(--focus); }

/* --- İlerleme ------------------------------------------------------------ */
.bar {
  height: 8px;
  border-radius: var(--r-chip);
  background: var(--bg-2);
  overflow: hidden;
}
.bar > i {
  display: block; height: 100%;
  background: var(--signal);
  border-radius: inherit;
  transform-origin: left center;
  transition: width var(--d-slow) var(--ease-out);
}

/* --- Giriş hareketi (ortak) ---------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
    transition-delay: var(--delay, 0ms);
  }
  .reveal.is-in { opacity: 1; transform: none; }
}
@media print {
  .reveal { opacity: 1 !important; transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}