/* ============================================================================
   base.css — sıfırlama, yazı tipleri, element varsayılanları
   tokens.css'ten SONRA yüklenir.
   ============================================================================ */

/* ── Yazı tipleri ────────────────────────────────────────────────────────
   Self-host, değişken (variable) woff2. Google Fonts CDN'i KULLANILMIYOR:
   eski sitedeki `@import url(fonts.googleapis.com…)` render-blocking bir
   zincirdi (CSS → font CSS → font dosyası, ~300-600 ms LCP cezası).

   TÜRKÇE İÇİN İKİ ALTKÜME DE ZORUNLU:
     latin      → ç ö ü  ve  ı (U+0131)
     latin-ext  → ğ ş  ve  İ Ğ Ş (U+0130, U+011E, U+015E)
   Tek dosyada birleştirmek woff2 araçları olmadan mümkün değil; bu yüzden
   Google'ın altküme bölümü ve unicode-range değerleri aynen kullanılıyor.
   Tarayıcı yalnızca sayfada geçen karakterlerin dosyasını indirir.
   ──────────────────────────────────────────────────────────────────────── */

/* Space Grotesk — display + arayüz */
@font-face {
    font-family: "Space Grotesk";
    src: url("/fonts/SpaceGrotesk-latin.woff2") format("woff2");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Space Grotesk";
    src: url("/fonts/SpaceGrotesk-latin-ext.woff2") format("woff2");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* JetBrains Mono — meta, etiket, veri, kod */
@font-face {
    font-family: "JetBrains Mono";
    src: url("/fonts/JetBrainsMono-latin.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "JetBrains Mono";
    src: url("/fonts/JetBrainsMono-latin-ext.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Newsreader — yalnızca makale gövdesi. Sadece /yazilar/{slug} preload eder. */
@font-face {
    font-family: "Newsreader";
    src: url("/fonts/Newsreader-latin.woff2") format("woff2");
    font-weight: 400 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Newsreader";
    src: url("/fonts/Newsreader-latin-ext.woff2") format("woff2");
    font-weight: 400 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Newsreader";
    src: url("/fonts/Newsreader-Italic-latin.woff2") format("woff2");
    font-weight: 400 600;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Newsreader";
    src: url("/fonts/Newsreader-Italic-latin-ext.woff2") format("woff2");
    font-weight: 400 600;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Sıfırlama ───────────────────────────────────────────────────────── */

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

html {
    /* Türkçe ZORUNLU: lang="tr" olmadan text-transform:uppercase
       "iletişim" → "ILETISIM" verir. lang="tr" ile "İLETİŞİM" olur.
       Bu, HTML tarafında <html lang="tr"> ile sağlanır. */
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text-1);
    font-family: var(--font-ui);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
    margin: 0;
}

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

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

svg {
    flex-shrink: 0;
}

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

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

table {
    border-collapse: collapse;
    width: 100%;
}

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

/* ── Tipografi varsayılanları ────────────────────────────────────────── */

h1 {
    font-size: var(--fs-h1);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-h1);
    font-weight: 700;
}

h2 {
    font-size: var(--fs-h2);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-h2);
    font-weight: 500;
}

h3 {
    font-size: var(--fs-h3);
    line-height: var(--lh-snug);
    font-weight: 500;
}

h4 {
    font-size: var(--fs-h4);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-h4);
    font-weight: 500;
}

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

p {
    text-wrap: pretty;
}

code, kbd, samp, pre {
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
}

strong, b {
    font-weight: 600;
}

/* ── Bağlantılar ─────────────────────────────────────────────────────── */

a {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--dur) var(--ease);
}

a:hover {
    color: var(--accent-hover);
}

/* Gövde metni içindeki linkler altı çizili olmalı — rengi tek ayırt
   edici işaret yapmak renk körlüğü için erişilebilir değil. */
.prose a,
p:not([class]) a {
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--accent-line);
}

.prose a:hover,
p:not([class]) a:hover {
    text-decoration-color: var(--accent);
}

/* ── Odak ────────────────────────────────────────────────────────────
   Klavye odağı her zaman görünür. :focus-visible kullanılır ki fare
   tıklamalarında halka çıkmasın. */

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

/* ── Seçim ───────────────────────────────────────────────────────────── */

::selection {
    background: var(--accent-soft);
    color: var(--text-1);
}

/* ── Kaydırma çubuğu ─────────────────────────────────────────────────── */

* {
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

/* ── Erişilebilirlik yardımcıları ────────────────────────────────────── */

/* Ekran okuyucuya görünür, gözle görünmez. Honeypot alanı için
   display:none KULLANMA — bazı botlar onu atlar. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* İçeriğe atla — klavye kullanıcısının ilk sekmesi. */
.skip-link {
    position: absolute;
    top: var(--sp-2);
    left: var(--sp-2);
    z-index: var(--z-toast);
    background: var(--accent);
    color: var(--accent-ink);
    padding: var(--sp-3) var(--sp-5);
    border-radius: var(--r);
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    transform: translateY(-200%);
    transition: transform var(--dur) var(--ease);
}

.skip-link:focus {
    transform: translateY(0);
    color: var(--accent-ink);
}

/* ── Sayfa zemini: görünür grid + tek ışık kaynağı ───────────────────
   Bu iki katman sayfanın karakteri. Grid "mühendis defteri" (B),
   ışık "tungsten sahne" (C). Birlikte melez yönü kuruyorlar.
   pointer-events:none — hiçbir etkileşimi engellemez. */

.page-ground {
    position: fixed;
    inset: 0;
    z-index: var(--z-grid);
    pointer-events: none;
    overflow: hidden;
    background-image:
        repeating-linear-gradient(to right,
            var(--grid) 0, var(--grid) 1px,
            transparent 1px, transparent var(--grid-cell)),
        repeating-linear-gradient(to bottom,
            var(--grid) 0, var(--grid) 1px,
            transparent 1px, transparent var(--grid-cell));
}

/* Işık AYRI bir katman, zeminin boyasında değil: kaydırmayla birlikte
   hareket ediyor (components.css, "Işık kayması") ve ayrı katman olarak
   yalnızca yer değiştiriyor — her karede tam ekran yeniden boyama yok.
   Kutu elipsin kendisi kadar; merkezi yatayda %18'de, dikeyde görüş
   alanının %14 üstünde. closest-side → elips kutunun kenarlarına değer,
   renk %68'de biter: kayınca hiçbir kenar görünmez. */
.page-ground__isik {
    position: absolute;
    left: calc(18% - 88vmax);
    top: calc(-14% - 66vmax);
    width: 176vmax;
    height: 132vmax;
    background: radial-gradient(closest-side,
        rgba(255, 196, 120, 0.13) 0%,
        rgba(255, 176, 90, 0.05) 36%,
        transparent 68%);

    /* Kaydırma hızı ışığa. Değeri hareket.js yazıyor: Lenis'in kare başına
       piksel cinsinden velocity'si, geçen süreye bölünüp px/ms'ye çevrilmiş
       ve 0..1 arasına kırpılmış. VARSAYILAN 0 — JS hiç yüklenmezse zemin
       bugünkü gibi durur, hiçbir şey gizlenmez.

       Opaklık tarafından gidiliyor, GEOMETRİ tarafından değil: kutunun
       kendisi kaydırmaya bağlı animasyonla (components.css, "Işık kayması")
       transform ediliyor; aynı özelliğe iki yerden yazmak onu ezerdi.
       Yayılımı (gradyan durakları / background-size) oynatmak ise her
       karede tam ekran gradyanı yeniden boyatırdı — opaklık, zaten ayrı
       katmanda olan bu kutuda derleyicide (compositor) kalıyor.

       Yumuşatma JS'te değil BURADA: geçiş her karede yeni hedefe yeniden
       nişan alıyor, bu üstel yumuşatmanın ta kendisi. Kaydırma bitince
       Lenis'in son olayı 0 getiriyor ve ışık aynı eğriyle oturuyor.
       linear ZORUNLU: her karede baştan başlayan bir geçişte eğrinin
       yalnızca ilk ~%5'i örneklenir; --ease (cubic-bezier(0.2, 0, …))
       orada neredeyse düz olduğu için ışık hiç açılmazdı.

       Tabanın 1 değil 0,9 olmasının sebebi: opaklık 1'i aşamaz, hızlanma
       için baş payı gerekiyor. Aradaki 0,1 tüm salınım — fark edilir ama
       adı konulamaz. Ayar düğmeleri burada ve hareket.js'teki HIZ_TAM'da. */
    --hiz: 0;
    opacity: calc(0.9 + var(--hiz, 0) * 0.1);
    transition: opacity 320ms linear;
}

@media print {
    .page-ground {
        display: none;
    }
}

/* ── Düzen kabı ──────────────────────────────────────────────────────── */

.page {
    position: relative;
    z-index: var(--z-content);
}

.container {
    max-width: var(--page-max);
    margin-inline: auto;
    padding-inline: var(--page-pad);
}

@media (max-width: 768px) {
    .container {
        padding-inline: var(--page-pad-sm);
    }
}