/* =============================================================
   Bikutranslate — temel katman
   Sıra: reset → yazı tipi → ölçek belirteçleri → tipografi kuralları
   Renk belirteçleri BURADA TANIMLANMAZ; kaynak: brand/brand.css
   ============================================================= */

/* ---------- yazı tipi (self-hosted, OFL 1.1 — assets/fonts/OFL.txt) ----------
   Archivo değişken: wght 100–900, wdth 62–125. Tek aile, iki eksen:
   başlıkta daraltılmış ağır kesit, gövdede normal. Ayrı display fontu
   yüklemeye gerek yok — hem tutarlı hem 84 KB. */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0100-0101, U+011E-011F, U+0130-0131,
                 U+015E-015F, U+0152-0153, U+2000-206F, U+20AC, U+20BA,
                 U+2122, U+2190-2193, U+2197, U+2212, U+25CF;
}

/* ---------------------------- reset ---------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; }
summary::-webkit-details-marker { display: none; }

/* --------------------- ölçek belirteçleri ---------------------- */
:root {
  /* akıcı tip ölçeği — 360px'te ~1,20, 1440px'te ~1,44 oranlı
     (küçük ekranda sıkı hiyerarşi, büyük ekranda nefes) */
  --fs-xs:   clamp(0.78rem, 0.755rem + 0.11vw, 0.85rem);
  --fs-sm:   clamp(0.90rem, 0.868rem + 0.14vw, 0.99rem);
  --fs-base: clamp(1.03rem, 0.985rem + 0.20vw, 1.16rem);
  --fs-md:   clamp(1.19rem, 1.104rem + 0.38vw, 1.43rem);
  --fs-lg:   clamp(1.42rem, 1.256rem + 0.73vw, 1.90rem);
  --fs-xl:   clamp(1.80rem, 1.464rem + 1.49vw, 2.75rem);
  --fs-2xl:  clamp(2.25rem, 1.657rem + 2.64vw, 3.95rem);
  /* 3xl iki uçta da ÖLÇÜLDÜ:
     taban 2,30rem — 320 px'te "çevirir," satıra sığsın (2,70rem'de min-content
       330 px > 288 px kaptı, sayfa taşıyordu);
     tavan 4,50rem — 1440 px'te hero başlığı 2 satırda kalsın (5,30rem'de
       ikinci satır kabın %99'unu dolduruyor, 4 satıra kırılıyordu). */
  --fs-3xl:  clamp(2.20rem, 1.433rem + 3.833vw, 4.50rem);

  /* boşluk — 4px tabanlı, üstte geometrik büyür */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 2.75rem; --sp-8: 3.5rem;
  --sp-9: 5rem;    --sp-10: 7rem;   --sp-11: 9.5rem;

  /* bölüm ritmi — dikey boşluk da akıcı */
  --band-y: clamp(4.5rem, 3rem + 6vw, 9rem);
  --wrap:   76rem;
  --wrap-narrow: 46rem;
  --measure: 68ch;      /* ~45-75 karakter bandının üst ucu */
  --measure-tight: 58ch;

  --radius: 14px;
  --radius-sm: 9px;

  /* yüzey ayrımı — renk değil, kontrast kenarı.
     ⚠ --line-strong DENETİM/FORM SINIRIDIR (düğme çerçevesi, seçim kutusu,
     sürgü yolu, anahtar) → WCAG 1.4.11 gereği ≥3:1 olmak ZORUNDA.
     Ölçüldü (2026-08-13, sRGB kompozit + WCAG bağıl parlaklık):
       eski %26 → #121114 üstünde 2,10 · #1B1A20'de 2,14 · #24232A'da 2,12 ✗
       yeni %40 → #121114 üstünde 3,32 · #1B1A20'de 3,25 · #24232A'da 3,26 ✓
     Aydınlık tema aşağıda ayrıca ölçüldü. --line (dekoratif ayraç) kasıtlı
     olarak zayıf bırakıldı: metin/denetim taşımaz, 1.4.11 kapsamı dışıdır. */
  --line:        color-mix(in oklab, var(--paper) 14%, transparent);
  --line-strong: color-mix(in oklab, var(--paper) 40%, transparent);
  --shade:       color-mix(in oklab, var(--paper) 5%, transparent);
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.28), 0 8px 24px -12px rgb(0 0 0 / 0.55);
  --shadow-2: 0 2px 6px rgb(0 0 0 / 0.30), 0 26px 60px -28px rgb(0 0 0 / 0.70);
}
@media (prefers-color-scheme: light) {
  :root {
    /* Ölçüldü: eski %30 → #F6F1E7 üstünde 1,94 · #FDFAF3'te 1,97 · #FFF'te 2,00 ✗
                yeni %48 → 3,14 · 3,19 · 3,22 ✓  (kaynak: brand.css paleti) */
    --line:        color-mix(in oklab, var(--paper) 16%, transparent);
    --line-strong: color-mix(in oklab, var(--paper) 48%, transparent);
    --shade:       color-mix(in oklab, var(--paper) 4%, transparent);
    --shadow-1: 0 1px 2px rgb(23 22 26 / 0.10), 0 8px 22px -14px rgb(23 22 26 / 0.30);
    --shadow-2: 0 2px 6px rgb(23 22 26 / 0.10), 0 26px 56px -30px rgb(23 22 26 / 0.38);
  }
}

/* --------------------------- gövde ----------------------------- */
body {
  background: var(--ink-bg);
  color: var(--paper);
  font-family: "Archivo", ui-sans-serif, "Segoe UI", system-ui, sans-serif;
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.62;
  font-variation-settings: "wdth" 100;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Türkçede otomatik heceleme YOK — kendi dizgi motorumuzun da kuralı budur */
  hyphens: manual;
  overflow-x: hidden;
}

/* Desteklendiği yerde açılış tırnağı/parantezi optik olarak dışarı asılır */
@supports (hanging-punctuation: first) {
  body { hanging-punctuation: first last; }
}

/* --------------------------- başlıklar -------------------------- */
h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.018em;
  text-wrap: balance;             /* öksüz başlık satırı olmasın */
  font-variation-settings: "wdth" 96;   /* hafif daralt: optik yoğunluk */
}
h1 { font-size: var(--fs-3xl); font-weight: 800; letter-spacing: -0.032em; line-height: 0.98; }
h2 { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -0.026em; line-height: 1.04; }
h3 { font-size: var(--fs-md);  font-weight: 700; letter-spacing: -0.012em; line-height: 1.22; }

p { text-wrap: pretty; }          /* son satırda tek kelime kalmasın */
p, li, dd { max-width: var(--measure); }

b, strong { font-weight: 650; }
em { font-style: normal; color: var(--shu-text); }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { text-decoration-color: var(--shu-text); }

/* --------- rakamlar: hizalı, sabit genişlikli, optik ------------ */
.num {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "kern" 1, "tnum" 1, "lnum" 1;
  letter-spacing: -0.01em;
}

.eyebrow {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper-2);
  margin-bottom: var(--sp-3);
}

/* --------------------------- odak ------------------------------ */
:focus-visible {
  outline: 2px solid var(--shu-text);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute; left: var(--sp-4); top: var(--sp-4);
  z-index: 100; padding: var(--sp-3) var(--sp-4);
  background: var(--ink-raised); color: var(--paper);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  transform: translateY(-200%);
}
/* :focus-visible tek başına yetmez — atlama bağlantısı zaten yalnız klavyeyle
   erişilir; programatik/eski tarayıcı odağında da görünmesi gerekir. */
.skip:focus, .skip:focus-visible { transform: none; }

/* Yalnız ekran okuyucuya görünen metin. `display:none` OLMAZ — o, içeriği
   erişilebilirlik ağacından da siler; canlı bölge (aria-live) susardı. */
.vh {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* --------------------------- düzen ----------------------------- */
.wrap {
  width: min(100% - 2 * var(--sp-5), var(--wrap));
  margin-inline: auto;
}
.wrap--narrow { width: min(100% - 2 * var(--sp-5), var(--wrap-narrow)); }
@media (max-width: 480px) {
  .wrap, .wrap--narrow { width: min(100% - 2 * var(--sp-4), var(--wrap)); }
}

.band { padding-block: var(--band-y); }
.band--surface { background: var(--ink-surface); }

/* -------------------- görünüme girme (reveal) ------------------- */
/* Taban durum GÖRÜNÜR. Gizleme yalnız .js sınıfı varken devreye girer —
   böylece betik yüklenmezse/çökerse içerik kaybolmaz. (Sınıf <head>'deki
   satır içi betikle eklenir, yani boyamadan önce: yanıp sönme olmaz.) */
.js .reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 620ms var(--ease-settle), transform 620ms var(--ease-settle);
  transition-delay: var(--d, 0ms);
}
.js .reveal.is-in { opacity: 1; transform: none; }

@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;
  }
  .js .reveal { opacity: 1; transform: none; }
}

html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }