/* ===========================================================================
   temel.css — reset, temel elemanlar, odak halleri, hareket tercihi.

   Kurumsal siteden (akatur-site → src/styles/base.css) BİREBİR kopyalandı.
   Astro'nun bileşen bazlı <style> blokları burada yok; onlar kabuk.css'te.

   Bileşene özel stil buraya yazılmaz.
   =========================================================================== */

@layer reset, temel, yardimci;

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

  html { -webkit-text-size-adjust: 100%; }

  body,
  h1, h2, h3, h4, p, figure, blockquote, dl, dd,
  ul, ol { margin: 0; }

  ul[role='list'], ol[role='list'] { list-style: none; padding: 0; }

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

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

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

@layer temel {
  html { background: var(--paper); }

  /* Sticky footer: kısa sayfalarda footer ekranın altına yapışır, uzun
     sayfalarda davranış değişmez. MobilMenu position:fixed olduğu için
     bu yerleşimi etkilemez. */
  body {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-govde);
    font-size: var(--ts-govde);
    line-height: var(--lh-govde);
    /* 01.09.2026: gövde 400 → 500 (okunabilirlik). Archivo değişken font
       400–700 aralığında, ek dosya gerekmedi. Başlıklar (700), kartlar (600)
       ve mono metinler (400) kendi ağırlıklarını ayrıca veriyor. */
    font-weight: 500;
    /* §2: gövde metninde pretty, başlıklarda balance */
    text-wrap: pretty;
    -webkit-font-smoothing: antialiased;
  }

  /* Kalan alanı ana içerik doldurur */
  main { flex: 1 0 auto; }

  h1, h2, h3, h4 {
    font-weight: 700;
    text-wrap: balance;
  }

  h1 { font-size: var(--ts-sayfa-h1); line-height: var(--lh-sayfa-h1); letter-spacing: var(--ls-sayfa-h1); }
  h2 { font-size: var(--ts-h2);       line-height: var(--lh-h2);       letter-spacing: var(--ls-h2); }
  h3 { font-size: var(--ts-h3);       line-height: var(--lh-h3);       letter-spacing: var(--ls-h3); }

  /* §6 Link — gövde içi link altı çizili, hover'da accent */
  a { color: var(--ink); }
  main a:not([class]) {
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  main a:not([class]):hover { color: var(--accent); }

  /* §9 Odak — outline: none hiçbir yerde kullanılmaz.
     Fare tıklamasında görünmez, klavyede görünür. */
  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  /* Koyu zeminde odak rengi kâğıt (footer, mobil menü, CTA şeridi) */
  .koyu :focus-visible,
  .koyu-zemin :focus-visible {
    outline-color: var(--paper);
  }

  /* §9 prefers-reduced-motion: geçişler kapatılır.
     Otomatik dönen slider/karusel zaten kullanılmıyor. */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

@layer yardimci {
  /* Site kabuğu — §4: maksimum 1200px, ortalanır, kenar boşluğu kırılma noktasına göre */
  .kabuk {
    max-width: var(--konteyner);
    margin-inline: auto;
    padding-inline: var(--kenar);
  }
  /* Kenar boşluğunu kendi içinde yöneten tam genişlik şeritler için */
  .kabuk-genis {
    max-width: var(--konteyner);
    margin-inline: auto;
  }

  /* §2 Mono etiket — daima uppercase */
  .mono {
    font-family: var(--font-mono);
    font-size: var(--ts-mono);
    letter-spacing: var(--ls-mono);
    text-transform: uppercase;
    line-height: 1.4;
    font-weight: 400;
  }

  /* §9 "İçeriğe geç" — yalnızca odaklandığında görünür */
  .atlama-baglantisi {
    position: absolute;
    left: var(--bosluk-8);
    top: var(--bosluk-8);
    z-index: 100;
    background: var(--ink);
    color: var(--paper);
    padding: var(--bosluk-12) var(--bosluk-20);
    font-size: var(--ts-buton);
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-200%);
  }
  .atlama-baglantisi:focus-visible {
    transform: translateY(0);
  }

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