/* ==========================================================================
   TEMEL
   Sıfırlama, gövde, ekran okuyucu yardımcısı ve zemin katmanı.
   Renk/ölçü kararları burada değil: hepsi tokens.css'ten geliyor.
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ZEMİN NEDEN BURADA DA VAR
   `.background-layer` sabit konumlu: yerleşim görüntü alanını kaplıyor, ama
   tarayıcının TUVALİNİ kaplamıyor. Tuval, adres çubuğu toplanırken açılan üst
   şerit ile alttaki araç çubuğu/ana ekran çizgisi bölgesi demek — `viewport-fit
   =cover` sayfayı bilerek oralara kadar uzatıyor. Tarayıcı o şeritleri KÖK
   ÖĞEDEN yayılan zeminle boyuyor; kökte zemin olmadığı için mobilde altta ve
   üstte beyaz bantlar çıkıyordu.
   Renk kökte durunca tuvale yayılıyor ve bantlar kayboluyor. */
html {
    overscroll-behavior: none;
    background: var(--bg);
    /* Dil geçişiyle aynı tempoda (bkz. theme.js → THEME_FADE). İkisi aynı
       sayı olmak zorunda: çubuk ile sayfanın zemini tek hareket görünüyor. */
    transition: background-color 0.6s var(--ease-out);
}

/* Tema sınıfı `body` üzerinde, oysa yayılan zemin `html`den okunuyor. Bu satır
   olmadan kök her zaman hardal kalır, TR temasında bantlar sarı görünürdü. */
html:has(body.theme-maroon) { --bg: var(--maroon); }

/* ==========================================================================
   ŞERİTLER PANELİ TAKİP EDİYOR — VE ETMEK ZORUNDA
   Bir zamanlar burada "çubuklar her zaman sitenin zemini kalsın" yazıyordu.
   Öyle olması İSTENİYORDU ama olmuyordu: iOS Safari çubuğunu yalnızca
   `theme-color`dan almıyor, tam ekran panelden ÖRNEKLEYEREK de buluyor.
   `.portal-window` tam ekran ve zemini krem (`--surface`), yani panele
   girildiği anda çubuklar zaten kremdi — biz istemesek de.

   Sorun oradan çıkmıyordu; çıkışta çıkıyordu. Etikette hâlâ "hardal"
   yazdığı için kapanışta yazılan hardal bir DEĞİŞİKLİK sayılmıyor ve
   Safari örneklediği kremde kalıyordu.

   Artık etiket ekranda olanı söylüyor: panel açılırken bilerek `--surface`
   yazılıyor, kapanırken `--bg`. Ekranda yeni bir şey olmuyor, ama çıkıştaki
   krem → hardal geçişi sahici oluyor ve bantlar kalkıyor.
   Ayrıntısı theme.js'te (bkz. `chromeColor`, `refreshBrowserChrome`). */

body {
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: var(--font-main);
    color: var(--text);
    overflow: hidden;
    overscroll-behavior: none;
    transition: color 0.6s var(--ease-out);
    -webkit-font-smoothing: antialiased;
}

/* Intro açıkken kaydırma jestini biz yorumluyoruz. */
body.intro-active { touch-action: none; }

/* ==========================================================================
   OKLAR EMOJİ DEĞİL, YAZI
   `↗` (U+2197) Unicode'da hem yazı hem emoji karşılığı olan karakterlerden.
   iOS varsayılan olarak EMOJİ hâlini seçiyordu: mavi-beyaz, yuvarlak köşeli,
   sayfanın hiçbir yerinde olmayan bir renkte — ağır tipografinin yanında
   ucuz duruyordu. Masaüstünde aynı karakter düz yazı olarak çiziliyor, yani
   sorun karakterde değil, iOS'un hangi hâli seçtiğinde.

   Üç katmanlı çözüm, üçü de aynı yöne çalışıyor:

   1) İşaretlemede karakterin ardına U+FE0E (VS15) ekleniyor
      (bkz. templates.js). "Bunu YAZI olarak çiz" demenin standart yolu ve
      her yerde destekleniyor.
   2) `font-variant-emoji: text` — aynı şeyin CSS karşılığı. Yeni bir özellik;
      desteklemeyen tarayıcı satırı yok sayıyor, bir şey bozulmuyor.
   3) Yazı tipi zincirine `Apple Symbols` giriyor. Asıl sebep bu: `Helvetica
      Neue`da bu karakterin yazı hâli YOK, o yüzden iOS zincir tükenince
      sistemin emoji yazı tipine düşüyordu. Zincirde karakteri yazı olarak
      taşıyan bir kaynak olunca oraya hiç gelmiyor.

   ← → ↓ (U+2190/2192/2193) bilerek listede yok: onların emoji karşılığı
   yok, her koşulda yazı olarak çiziliyorlar. */
.arrow,
.portfolio-item-arrow {
    font-family: 'Helvetica Neue', Helvetica, Arial, 'Apple Symbols', sans-serif;
    font-variant-emoji: text;
}

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   2. ARKA PLAN + RIPPLE
   ========================================================================== */
.background-layer {
    position: fixed;
    inset: 0;
    z-index: -3;
    background: var(--bg);
}

.theme-ripple {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    transform: scale(0);
}