/* ==========================================================================
   Piksir v2 — Temel stiller
   Katman sırası: v2.tokens < v2.base < v2.components < v2.utilities.
   Katmansız (unlayered) sayfa stilleri her zaman bunların üstündedir.
   ========================================================================== */
@layer v2.tokens, v2.base, v2.components, v2.utilities;

@layer v2.base {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; }
  /* F4.5 (2.4.11 odak gizlenmesin): sabit alt gezinme varken Tab ile odaklanan öğe gezinmenin altında kalmasın */
  @media (max-width: 1023.98px) { html:has(> body.v2-has-bottomnav) { scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom)); } }
  body {
    margin: 0;
    min-height: 100vh;
    background: var(--v2-paper);
    color: var(--v2-ink);
    font-family: var(--v2-font-body);
    font-size: var(--v2-text-md);
    line-height: var(--v2-leading);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    overflow-wrap: break-word;
  }
  h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
  ul[class], ol[class] { list-style: none; padding: 0; }
  img, svg, video { display: block; max-width: 100%; }
  img { height: auto; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { cursor: pointer; }
  a { color: var(--v2-link); text-underline-offset: 0.18em; text-decoration-thickness: 2px; }
  a:hover { text-decoration-thickness: 3px; }

  h1, h2 { font-family: var(--v2-font-display); font-weight: var(--v2-weight-heavy); line-height: var(--v2-leading-tight); letter-spacing: -0.01em; text-wrap: balance; }
  h1 { font-size: var(--v2-text-3xl); }
  h2 { font-size: var(--v2-text-2xl); }
  h3, h4 { font-family: var(--v2-font-body); font-weight: var(--v2-weight-heavy); line-height: 1.25; }
  h3 { font-size: var(--v2-text-lg); }
  p { text-wrap: pretty; }
  code, kbd { font-family: var(--v2-font-mono); font-size: 0.92em; }

  /* 7.–8. sınıf: başlıklar el yazısından düz ve ağır gövde yazısına geçer (olgun görünüm) */
  [data-density="genc"] h2 { font-family: var(--v2-font-body); letter-spacing: -0.02em; }

  /* Görünür klavye odağı — her etkileşimli öğede aynı */
  :focus-visible { outline: 3px solid var(--v2-focus); outline-offset: 3px; border-radius: 6px; }

  ::selection { background: var(--v2-yellow); color: #1F1D3D; }

  /* ---- Disleksi dostu yazı (kullanıcı seçeneği, F4.5) ----
     Kanca: <html data-yazi="disleksi"> (a11y.js apply() içinde tek satır) ya da <html class="v2-yazi-disleksi">.
     Katmanlı !important, a11y.js'in enjekte ettiği katmansız !important yedek yazı kuralını (Trebuchet/Comic Sans) ezer;
     böylece v2 sayfalarında kendinden barındırılan OpenDyslexic kullanılır. Kod/mono alanları mono kalır.
     OpenDyslexic zaten geniş: harf aralığı yalnız .01em, sözcük .08em, paragraf satır aralığı 1.7. */
  :root:is([data-yazi="disleksi"], .v2-yazi-disleksi) {
    --v2-font-body: "OpenDyslexic", "Atkinson Hyperlegible Next", system-ui, sans-serif;
    --v2-font-display: "OpenDyslexic", "Atkinson Hyperlegible Next", system-ui, sans-serif;
  }
  :root:is([data-yazi="disleksi"], .v2-yazi-disleksi) body,
  :root:is([data-yazi="disleksi"], .v2-yazi-disleksi) body :not(code, kbd, pre, samp, .v2-mono, .v2-mono *, svg, svg *) {
    font-family: "OpenDyslexic", "Atkinson Hyperlegible Next", system-ui, sans-serif !important;
    letter-spacing: .01em !important; word-spacing: .08em !important;
  }
  :root:is([data-yazi="disleksi"], .v2-yazi-disleksi) :is(p, li, dd, td, th, label, .v2-hint, .v2-bubble) { line-height: 1.7 !important; }
  :root:is([data-yazi="disleksi"], .v2-yazi-disleksi) :is(h1, h2, h3, h4) { line-height: 1.3 !important; letter-spacing: 0 !important; }

  /* Hareket azaltma: dönüşüm ve süreleri kapat (içerik yine görünür) */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 1ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 1ms !important;
      scroll-behavior: auto !important;
    }
  }
}

@layer v2.utilities {
  .v2-container { width: 100%; max-width: calc(var(--v2-max) + 2 * var(--v2-gutter)); margin-inline: auto; padding-inline: var(--v2-gutter); }
  @media (min-width: 768px) { .v2-container { --v2-gutter: 32px; } }
  .v2-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .v2-skip { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--v2-ink); color: var(--v2-on-ink); padding: 12px 16px; border-radius: var(--v2-radius-sm); font-weight: 700; }
  .v2-skip:focus { top: 12px; }
  /* Kareli defter zemini */
  .v2-paper-grid {
    background-color: var(--v2-paper);
    background-image:
      linear-gradient(var(--v2-grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--v2-grid) 1px, transparent 1px);
    background-size: var(--v2-grid-size) var(--v2-grid-size);
  }
  .v2-mono { font-family: var(--v2-font-mono); }
  .v2-muted { color: var(--v2-ink-2); }
  [data-density="minik"] .v2-hide-minik { display: none !important; }
  .v2-only-genc { display: none; }
  [data-density="genc"] .v2-only-genc { display: revert; }
}