/* ==========================================================================
   Duygu Yücel Kaplan — görsel sanatçı sitesi
   Saf HTML/CSS/JS. Derleme adımı yok, Hostinger hPanel dosya deposuna
   olduğu gibi yüklenir.
   ========================================================================== */

/* --- Yazı tipleri ------------------------------------------------------- */
/* Archivo artık hiçbir kuralda kullanılmıyor: başlıklar Anton'a, menü ve
   gövde Space Grotesk'e geçti. Tanım yine de duruyor çünkü yönetim
   panelinde seçilebilir yazı tipleri arasında ve kullanılmayan bir
   @font-face indirilmiyor, yani sıfır bayta mal oluyor. İki dosya birlikte
   172 KB; her sayfada iniyordu.

   Archivo: değişken genişlik (wdth 62-125) + kalınlık (wght 100-900).
   Her serinin başlığı kendi genişliğinde dizilir.
   Space Grotesk: gövde ve arayüz.
   İki alt küme de yüklü: latin (ç ö ü ı) + latin-ext (ğ Ğ ş Ş İ). */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-ext.woff2') format('woff2');
  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: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  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;
}
/* Alfa Slab One: yalnızca panel başlıklarında kullanılan şişman slab.
   Tek ağırlık (400), değişken eksen yok. Google Fonts'tan indirilip
   siteyle birlikte sunuluyor (SIL Open Font License 1.1). */
/* Anton: site genelindeki bütün başlıkların yazı tipi. Tek ağırlık (400),
   değişken ekseni yok — .baslik'te wdth/wght eksenleri bu yüzden
   sıfırlanıyor, yoksa tarayıcı sahte genişletme ve kalınlaştırma yapıp
   harfleri bozuyor. */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/anton-ext.woff2') format('woff2');
  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: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/anton-latin.woff2') format('woff2');
  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';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/grotesk-ext.woff2') format('woff2');
  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: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/grotesk-latin.woff2') format('woff2');
  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;
}

/* --- Jetonlar ----------------------------------------------------------- */

/* Renkler Duygu'nun ilettiği palet panolarından geliyor; uydurma yok.
   Adları _work/veri.json > renkler altında listeli.
   Tüm site tek vurgu rengi kullanıyor: derin yeşil. */
:root {
  --ink: #241c18;        /* mürekkep */
  --paper: #f7f2ec;      /* krem */
  --signal: #1b5c43;     /* derin yeşil, 7.10:1 */
  --signal-koyu: #134634;
  --signal-solgun: #e8efea;
  --haze: #6b5a52;       /* açılmış kabuk kahve, 5.88:1 */
  --uyari: #a30d22;      /* vişne, 7.15:1 */
  --line: rgba(36, 28, 24, 0.16);

  /* Paletten seçilmiş vurgu dizisi. Noktalar, rozetler ve
     çok renkli gereken yerler bu sırayı kullanıyor. */
  --p1: #e04e35;  /* domates */
  --p2: #77cba5;  /* nane */
  --p3: #c9b93f;  /* hardal */
  --p4: #a5658c;  /* gül kurusu */
  --p5: #1b5c43;  /* derin yeşil */
  --p6: #dda0ac;  /* toz pembe */
  --p7: #5a2a56;  /* erik */
  --p8: #cbb53c;  /* oker sarı */

  /* Aktif serinin rengi. JS kaydırma sırasında bunları değiştirir,
     üst çubuk ve menü o serinin rengini giyer. */
  --skin-bg: #f7f2ec;
  --skin-ink: #241c18;

  /* Ritim */
  --pad: clamp(1.15rem, 3.4vw, 3rem);
  --gap: clamp(1.5rem, 4vw, 3.5rem);
  --rhythm: clamp(4.5rem, 12vw, 11rem);
  /* Toplanmış çubuk yüksekliği: paneller buna göre boşluk bırakıyor.
     Kaydırınca değişmiyor, yoksa her panel yeniden hesaplanırdı. */
  --bar: 6.6rem;
  /* Açık (iri) çubuk yüksekliği: sadece kapak paneli buna göre boşluk alıyor,
     çünkü iri çubuk yalnızca sayfa başındayken görünüyor. */
  --bar-acik: 10.2rem;

  /* Tek köşe yarıçapı ölçeği: her şey keskin, sadece etkileşimli
     ögeler hap biçiminde. */
  --r: 0px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* Panelden panele geçerken çubuk rengi. Uzun tutulduğunda iki rengin
     arası uzun süre görünüyor ve ara ton "renk kararsız" gibi duruyordu;
     kısa geçiş, rengin hangi panele ait olduğunu anında okutuyor. */
  --skin-t: 280ms;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Zemin BURADA da tanımlı olmak zorunda. Kök ögenin zemini yoksa
     tarayıcı gövdenin zeminini alıp tuvale boyuyor; o zemin artık gövdeye
     ait olmadığı için gövde kaydığında yerinde kalıyordu. Sayfa geçişinde
     "yazılar kayıyor ama beyaz zemin duruyor" görüntüsünün sebebi buydu.
     Kökte bir zemin olunca gövdeninki gövdede kalıyor ve onunla kayıyor. */
  background: var(--paper);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  /* Emoji yazı tipleri yığının SONUNDA. Başa alınamaz: Apple Color Emoji
     harf içermiyor ama rakamlar, "#" ve "*" için glifi var (tuş takımı
     emojilerinin tabanı). Başa alınırsa gövdedeki bütün rakamlar o
     yazı tipinden çizilir ve metin bozulur. Sonda dururken yalnızca
     başka hiçbir yazı tipinde bulunmayan karakterler, yani gerçek
     emojiler oradan geliyor. */
  font-family: var(--yazi-govde, 'Space Grotesk', system-ui, sans-serif),
    'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';
  font-size: var(--govde-boy, clamp(1rem, 0.94rem + 0.28vw, 1.125rem));
  font-weight: var(--govde-kalin, 400);
  font-style: var(--govde-italik, normal);
  line-height: var(--govde-satir, 1.62);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.menu-acik { overflow: hidden; }

/* width/height nitelikleri CSS yüksekliğini de dayatıyor; en/boy oranı
   korunsun diye yüksekliği serbest bırakıyoruz. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

::selection { background: var(--signal); color: var(--paper); }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.gizli-erisim {
  position: absolute;
  left: -9999px;
  top: 0;
}
.gizli-erisim:focus {
  left: var(--pad);
  top: var(--pad);
  z-index: 200;
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: var(--paper);
}

/* --- Tipografi ---------------------------------------------------------- */

.baslik {
  font-family: var(--yazi-baslik, 'Anton', sans-serif);
  /* Anton tek ağırlıklı ve değişken ekseni yok. wdth/wght eksenlerini
     bırakırsam tarayıcı sahte genişletme ve kalınlaştırma üretip harfleri
     bozuyor; ikisi de sıfırlanıyor. Panel başlıklarının wdth değerleri
     (veri.json > wdth) bu yüzden artık etkisiz. */
  font-variation-settings: normal;
  font-weight: var(--baslik-kalin, 400);
  font-style: var(--baslik-italik, normal);
  text-transform: var(--baslik-buyuk, uppercase);
  letter-spacing: var(--baslik-aralik, 0.05em);
  line-height: 0.88;
  margin: 0;
  text-wrap: balance;
}

.etiket {
  font-size: var(--etiket-boy, 0.7rem);
  text-transform: var(--etiket-buyuk, uppercase);
  letter-spacing: var(--etiket-aralik, 0.16em);
  font-weight: var(--etiket-kalin, 500);
}

.govde { max-width: 62ch; }
.govde p { margin: 0 0 1.15em; }
.govde p:last-child { margin-bottom: 0; }

/* --- Üst çubuk (sabit, aktif serinin rengini alır) ---------------------- */

/* İki satırlı, iri başlayan çubuk: üstte dev isim, altında menü satırı.
   Sayfa kaydırılınca tek satıra iniyor; panel yüksekliğini yemesin diye.
   Nöbetçi öge sayfanın en üstünde duruyor, gözden çıkınca "kaydırıldı"
   sınıfı ekleniyor. Kaydırma dinleyicisi yok. */
.cubuk-nobetci {
  position: absolute;
  inset: 0 0 auto 0;
  block-size: 1px;
  pointer-events: none;
}

/* Varsayılan hâl TOPLANMIŞ. Betik çalışıp sayfa başında olduğumuzu
   doğrulayınca "ustte" sınıfı ekleniyor ve çubuk iriye açılıyor.
   Bu yön güvenli: gözlemci hiç ateşlenmezse çubuk küçük kalır,
   paneller altında kaybolmaz. */
.cubuk {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  display: grid;
  gap: var(--cubuk-ara, 0.35rem);
  padding: var(--cubuk-dolgu, 0.85rem) var(--pad) var(--cubuk-dolgu-alt, 0.85rem);
  color: var(--skin-ink);
  /* Çubuğun kendi zemini yok: panelin üstünde duruyor, rengini panelden
     alıyor. Okunurluğu bulanıklık değil, mürekkep rengi sağlıyor —
     mürekkep her panelde çubuğun altına düşen piksellerden hesaplanıyor
     (bkz. site.js > cubukDerisi). */
  /* Renk için ayrı eğri: yumuşak "ease" iki rengin arasında uzun süre
     oyalanıyordu. ease-out çıkışta hızlanıp yeni renge çabuk oturuyor. */
  transition: color var(--skin-t) ease-out,
    padding 480ms var(--ease), gap 480ms var(--ease);
  pointer-events: none;
}
.cubuk > * { pointer-events: auto; }

.cubuk-ust {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
}

/* Logotip tek satır, sıkı harf aralıklı. Sitenin adı da bir başlık
   sayıldığı için başlık yazı tipini kullanıyor. Anton zaten dar; Archivo
   döneminde genişliği kısan wdth ayarı artık gereksiz, hatta zararlı:
   Anton'da o eksen yok ve bırakılırsa sahte daraltma uygulanıyor. */
.marka {
  font-family: var(--yazi-baslik, 'Anton', sans-serif);
  font-variation-settings: normal;
  font-weight: var(--marka-kalin, 400);
  font-style: var(--marka-italik, normal);
  text-transform: var(--marka-buyuk, uppercase);
  letter-spacing: var(--marka-aralik, -0.045em);
  text-decoration: none;
  line-height: 0.92;
  display: block;
  transition: font-size 480ms var(--ease),
    font-variation-settings 480ms var(--ease);
}
.marka-ad {
  display: block;
  /* Toplanmış hâl: kaydırınca logo küçülüyor ama okunur bir logotip olarak
     kalması gerekiyor, ufak bir etikete dönüşmemeli. */
  font-size: var(--marka-boy, clamp(1.5rem, 3.1vw, 2.6rem));
  transition: font-size 480ms var(--ease);
}
.marka .marka-alt {
  display: block;
  font-variation-settings: 'wdth' 88, 'wght' 500;
  font-size: var(--marka-alt-boy, 0.6rem);
  letter-spacing: 0.22em;
  opacity: 0.6;
  margin-top: 0.5em;
  transition: font-size 480ms var(--ease), opacity 320ms var(--ease);
}

/* Sayfa başındayken iri hâl. Marka 64 px'e kadar çıkıyor;
   referans sitedeki logo ölçüsü bu. */
/* Ölçüler busraaydagun.com'un kendi oranlarından alındı: logo görüntü
   genişliğinin ~%6'sı, menü satırı onun altında geniş aralıklı ve 16 px. */
html.ustte .cubuk {
  --cubuk-dolgu: 1.6rem;
  --cubuk-dolgu-alt: 1.35rem;
  --cubuk-ara: 1.15rem;
  /* Referans: 1280 px'te 64 px, 375 px'te 35 px. */
  --marka-boy: clamp(2.1rem, 5vw, 4.4rem);
  --marka-wdth: 74;
  --marka-aralik: -0.055em;
}
/* Referansta menü satırı 1280 px'te 16 px; oran 1,25vw. */
html.ustte .genis-menu a { font-size: clamp(0.9rem, 1.25vw, 1.06rem); }

/* Referansta logonun altında ikinci satır yok; künye bilgisi panellerde
   zaten geçiyor. Ekran okuyucudan da kaldırıyoruz, çünkü içerik değil süs. */
.marka .marka-alt { display: none; }

/* Kapak paneli ekrandayken üst çubukta ad yok: yalnızca yönlendirme
   bağlantıları, sayfanın üst ortasında duruyor. Panelden çıkılınca ad
   çubuğa geliyor, bağlantılar da olağan yerini alıyor.

   Kanca "sayfanın en üstünde miyiz" değil "bakılan panel kapak mı":
   ilki kaydırma sıfırdan bir piksel ayrılınca adı ortaya çıkarıyordu,
   oysa devir kapak panelinden çıkarken olmalı. Sınıfı site.js koyuyor;
   betik çalışmazsa ad görünür kalıyor, yani güvenli taraf. */
/* Geçiş animasyonlanabilir özelliklerle kuruluyor. İlk denemem
   "block-size: 0" ve "justify-content: center" idi ve ikisi de sıçrayarak
   yer değiştiriyordu: block-size auto'dan animasyonlanmıyor,
   justify-content ise hiç animasyonlanan bir özellik değil.

   Yerine: satırın kapanması max-block-size ile (sabit iki uç arasında,
   dolayısıyla animasyonlanabilir), menünün ortalanması ise transform ile.
   Kaydırma payını site.js ölçüp --menu-kaydir'e yazıyor; CSS yalnızca
   iki uç arasında geçiş yapıyor. */

.marka {
  /* Kapanırken yeterli üst sınır; adın gerçek boyu bunun altında kalıyor
     ve max-block-size iki sayı arasında olduğu için geçiş akıcı. */
  max-block-size: 8rem;
  transition: opacity 380ms var(--ease), transform 420ms var(--ease),
    max-block-size 520ms var(--ease);
}

html.kapakta .marka {
  opacity: 0;
  transform: translateY(-0.55rem);
  /* Yalnız saydamlık yetmiyor: kutu yer kaplamaya devam edip menü
     satırını aşağı itiyor. */
  max-block-size: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Seçici doğrudan çocuğa daraltılmış olmalı. Açılır menü de bir <ul> ve
   .genis-menu içinde duruyor; ".genis-menu ul" yazılırsa ortalama
   dönüşümünü o da alıyor ve About'un altından sağa, ortalama payı kadar
   kayıyor. Aynısı aşağıdaki flex/gap kuralları için de geçerli. */
.genis-menu > ul {
  transform: none;
  transition: transform 520ms var(--ease);
}
html.kapakta .genis-menu > ul {
  transform: translateX(var(--menu-kaydir, 0px));
}

html.kapakta .genis-menu > ul {
  animation: menu-ustten-gir 600ms var(--ease) backwards;
}

@keyframes menu-ustten-gir {
  from {
    opacity: 0;
    transform: translate(var(--menu-kaydir, 0px), -1.5rem);
  }
  to {
    opacity: 1;
    transform: translate(var(--menu-kaydir, 0px), 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .marka,
  .genis-menu > ul { transition: none; }
}

/* --- Kapak paneli: ad portrenin üstünde --------------------------------- */

/* Eser panelin tamamını kaplıyor ve portre kadrajın ortasında; ad, başın
   biraz üstüne oturuyor. Ölçü panele oranlı: "cover" kırpması ekran
   oranına göre değişse de portrenin başı her ölçüde yüksekliğin
   %35-37'sinde kalıyor, yazının altını %32'ye koymak ikisinde de başın
   üstünde bırakıyor. */
.kapak-ad {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 68%;
  z-index: 2;
  margin: 0;
  text-align: center;
  /* Punto ve yatay gerilme veriden: veri.json > kapak.adOlcek / adGenis. */
  font-size: calc(var(--panel-yazi-boy) * var(--kapak-ad-oran, 0.72));
  /* Renk de veriden; saydamlık adın arkasındaki eseri hafifçe gösteriyor
     (kapak.adSaydam). Çubuk aynı rengi TAM opak kullanıyor, orada okunma
     saydamlığa bırakılmıyor. */
  color: color-mix(
    in srgb,
    var(--kapak-ad-renk, rgba(122, 214, 208, 0.86))
      calc(var(--kapak-ad-saydam, 1) * 100%),
    transparent
  );
  line-height: 1;
  letter-spacing: -0.01em;
  /* Yalnız yatayda geriliyor: harfler uzuyor, yükseklik değişmiyor.
     transform yerine scale özelliği: site.js adı yatayda kaydırmak için
     transform kullanıyor, ikisi çakışmasın. */
  scale: var(--kapak-ad-genis, 1) 1;
  /* Karışım kipi veriden (kapak.adKarisim). "multiply": beyaz kağıtta
     renk olduğu gibi kalıyor, boyalı lekelerin üstünden geçerken
     koyulaşıp esere gömülüyor — ad üste yapıştırılmış gibi durmuyor. */
  mix-blend-mode: var(--kapak-ad-karisim, normal);
}

/* Ad kelime kelime yerine kayıyor: ilki soldan, ortadaki üstten, sonuncusu
   sağdan. Yalnızca sayfa açıldığında ve menüden kapağa dönüldüğünde
   oynuyor; kaydırmayla tetiklenmiyor, sınıfı site.js koyuyor.

   Başlangıçta gizleme yalnız .js varken: betik çalışmazsa ad olduğu yerde
   ve görünür kalıyor. */
.kapak-ad .ad-kelime {
  display: inline-block;
  will-change: transform, opacity;
}
.js .kapak-ad .ad-kelime { opacity: 0; }

.js .kapak-ad.ad-giris .ad-kelime {
  animation: ad-yerlesim 820ms var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 110ms);
}
.ad-soldan { --gx: -22vw; }
.ad-sagdan { --gx: 22vw; }
.ad-ustten { --gy: -180%; }

@keyframes ad-yerlesim {
  from {
    opacity: 0;
    transform: translate(var(--gx, 0), var(--gy, 0));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .kapak-ad .ad-kelime { opacity: 1; }
  .js .kapak-ad.ad-giris .ad-kelime { animation: none; }
}

/* --- Geniş ekran menü satırı -------------------------------------------- */

/* Dar ekranda gizli; yerini üç çizgi düğmesi alıyor. */
.genis-menu { display: none; }
.genis-menu > ul {
  display: flex;
  /* İçeriği kadar geniş: tam genişlikte kalsaydı transform ile ortalamak
     anlamsız olurdu, kutu zaten çubuğu doldururdu. Öğeler yine solda
     başlıyor, yani olağan görünüm değişmiyor. */
  inline-size: max-content;
  max-inline-size: 100%;
  align-items: center;
  gap: clamp(1.1rem, 2.2vw, 2rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.genis-menu a {
  position: relative;
  display: block;
  text-decoration: none;
  text-transform: var(--menu-buyuk, uppercase);
  /* Menü bağlantıları başlık değil; başlıklar Anton'a geçerken burası
     bilerek Archivo'da kaldı. Kendi değişkeni var, ikisi ayrı ayarlanıyor. */
  /* Renk çubuğun mürekkebinden geliyor: kapak panelinde koyu, diğer
     panellerde o panelin başlık rengi (site.js > cubukDerisi). Kategoriye
     sabit renk verilirse panel geçişinde çubuk tek renkte kalıyordu. */
  color: inherit;
  font-family: var(--yazi-menu, 'Space Grotesk', system-ui, sans-serif);
  font-variation-settings: 'wght' var(--menu-kalin, 700);
  font-weight: var(--menu-kalin, 700);
  font-style: var(--menu-italik, normal);
  font-size: clamp(0.85rem, 1.15vw, 1.06rem);
  /* Referansta menü satırı harf aralığı açılmadan, kalın ve büyük harf. */
  letter-spacing: var(--menu-aralik, 0.02em);
  white-space: nowrap;
  padding-bottom: 0.45rem;
}
/* Bulunduğun sayfanın altı dolu; üzerine gelince çizgi soldan çiziliyor.
   Süs değil: hangi sayfada olduğunu gösteriyor. */
.genis-menu a::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 420ms var(--ease);
}
.genis-menu a:hover::after,
.genis-menu a:focus-visible::after,
.genis-menu a[aria-current='page']::after { transform: scaleX(1); }
.genis-menu a[aria-current='page'] { opacity: 1; }

/* --- Alt menü ------------------------------------------------------------
   Temel hâl açık ve girintili bir alt liste: dar ekrandaki tam ekran
   menüde istenen bu. Açılır kutuya dönüşmesi yalnızca .genis-menu içinde
   oluyor. Medya sorgusu yerine kapsayıcıya göre ayırmak, bu dosyada daha
   önce üç kez başımı yakan sıra sorununu tümden ortadan kaldırıyor:
   @media bloğu tanımdan önce gelirse display değeri eziliyordu. */

.alt-menu {
  list-style: none;
  margin: 0;
  padding: 0.4rem 0 0 1.1rem;
}
.alt-menu a { text-decoration: none; }

.menu-ok {
  inline-size: 0.62em;
  block-size: 0.62em;
  margin-inline-start: 0.34em;
  vertical-align: -0.05em;
  transition: transform 320ms var(--ease);
}
/* Tam ekran menüde alt liste zaten açık; ok yanıltıcı olur. */
.menu-liste .menu-ok { display: none; }

.genis-menu .menu-acilir { position: relative; }

.genis-menu .alt-menu {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  min-inline-size: max-content;
  /* Üst boşluk kutunun içinde: dışarıda bırakılsa imleç çubuktan alt
     menüye geçerken aradaki boşlukta hover kopuyor ve menü kapanıyor. */
  padding: 0.7rem 1rem 0.75rem;
  background: var(--skin-bg, var(--zemin));
  color: var(--skin-ink, var(--murekkep));
  border-radius: 0.45rem;
  box-shadow: 0 0.7rem 1.8rem rgba(0, 0, 0, 0.14);
  /* Perde gibi açılıyor: kutu üstten aşağı doğru açılıyor, seçenek de
     içeride yerine otururken hafifçe aşağı kayıyor. Kapanırken
     görünürlük perde kapanmadan devreye girmesin diye gecikmeli. */
  opacity: 0;
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  /* Perdenin kendi eğrisi var: sitenin --ease değeri çok öne yüklü, onunla
     perde yarı sürede %97 açılıp aniden duruyor ve açılma hissi kayboluyor.
     Bu eğri yarı sürede %50 veriyor, perde gerçekten izlenebiliyor. */
  transition: clip-path 380ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 200ms var(--ease), visibility 0s linear 380ms;
}
.genis-menu .alt-menu li {
  transform: translateY(-0.6rem);
  transition: transform 440ms cubic-bezier(0.4, 0, 0.2, 1);
}
.genis-menu .alt-menu li + li { margin-block-start: 0.55rem; }

/* focus-within klavyeyle de açıyor; yalnız hover erişilebilir olmaz. */
.genis-menu .menu-acilir:hover .alt-menu,
.genis-menu .menu-acilir:focus-within .alt-menu {
  opacity: 1;
  visibility: visible;
  clip-path: inset(0 0 0 0);
  /* Açılırken görünürlük anında; kapanıştaki gecikme burada sıfırlanmalı. */
  transition: clip-path 380ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 160ms var(--ease), visibility 0s linear 0s;
}
.genis-menu .menu-acilir:hover .alt-menu li,
.genis-menu .menu-acilir:focus-within .alt-menu li {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .genis-menu .alt-menu,
  .genis-menu .alt-menu li { transition: none; }
}
.genis-menu .menu-acilir:hover .menu-ok,
.genis-menu .menu-acilir:focus-within .menu-ok {
  transform: rotate(180deg);
}

.menu-dugme {
  appearance: none;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  font-weight: 500;
}
@media (max-width: 26rem) {
  .menu-dugme-yazi { display: none; }
}
.menu-dugme .cizgiler {
  display: grid;
  gap: 4px;
  width: 22px;
}
.menu-dugme .cizgiler i {
  display: block;
  height: 2px;
  background: currentColor;
  transition: transform 320ms var(--ease);
}
.menu-dugme:hover .cizgiler i:nth-child(1) { transform: translateX(4px); }
.menu-dugme:hover .cizgiler i:nth-child(3) { transform: translateX(-4px); }


/* --- Tam ekran menü ----------------------------------------------------- */

.menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--skin-bg);
  color: var(--skin-ink);
  display: grid;
  grid-template-rows: var(--bar) 1fr auto;
  padding: 0 var(--pad) var(--pad);
  opacity: 0;
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 620ms var(--ease), opacity 200ms linear,
    visibility 0s linear 620ms;
}
.menu[data-acik='true'] {
  opacity: 1;
  visibility: visible;
  clip-path: inset(0 0 0 0);
  transition: clip-path 620ms var(--ease), opacity 200ms linear,
    visibility 0s linear 0s;
}

.menu-ust {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.menu-kapat {
  appearance: none;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  font-weight: 500;
  padding: 0.5rem 0;
}

.menu-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  align-self: center;
  display: grid;
  gap: clamp(0.1rem, 1vw, 0.6rem);
}
/* Yalnız üst satırlar sırayla giriyor. Seçici ">" olmazsa açılır menünün
   içindeki satır da bu kurala giriyor; onun --i değeri yok, calc geçersiz
   kalıyor ve satır sıradan düşüyordu. */
.menu-liste > li {
  opacity: 0;
  transform: translateY(0.55em);
}
.menu[data-acik='true'] .menu-liste > li {
  opacity: 1;
  transform: none;
  transition: opacity 420ms var(--ease) calc(var(--i) * 55ms + 180ms),
    transform 620ms var(--ease) calc(var(--i) * 55ms + 180ms);
}
.menu-liste a {
  /* Tam ekran menüde de aynı kural: renk çubuğun mürekkebinden. */
  color: inherit;
  font-family: var(--yazi-menu, 'Space Grotesk', system-ui, sans-serif);
  font-variation-settings: 'wght' 700;
  text-transform: uppercase;
  text-decoration: none;
  font-size: clamp(2.1rem, 8.5vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  display: inline-block;
  transition: font-variation-settings 380ms var(--ease),
    transform 380ms var(--ease);
}
.menu-liste a:hover,
.menu-liste a:focus-visible {
  font-variation-settings: 'wdth' 112, 'wght' 800;
}
.menu-liste a[aria-current='page'] { opacity: 0.42; }

/* Tam ekran menüde alt satır, ana satırla aynı puntoda çıkıyordu: 1,1 rem'lik
   girinti dev harflerin yanında görünmüyor, ikisi de ana bağlantı gibi
   duruyordu. Alt satır artık küçük, ince ve belirgin girintili. */
.menu-liste .alt-menu {
  padding-inline-start: 1.7rem;
  padding-block-start: 0.55rem;
}
.menu-liste .alt-menu a {
  font-size: clamp(0.95rem, 3.2vw, 1.55rem);
  font-variation-settings: 'wdth' 92, 'wght' 500;
  letter-spacing: 0.05em;
  opacity: 0.72;
}
.menu-liste .alt-menu a:hover,
.menu-liste .alt-menu a:focus-visible {
  font-variation-settings: 'wdth' 100, 'wght' 700;
  opacity: 1;
}

.menu-alt {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  align-items: baseline;
  justify-content: space-between;
  border-top: 1px solid currentColor;
  padding-top: 1.1rem;
  opacity: 0.72;
}
.menu-alt a { text-decoration: none; }
.menu-alt a:hover { text-decoration: underline; text-underline-offset: 0.3em; }

/* Geniş ekran: menü satırı açılır, üç çizgi ve tam ekran menü kapanır.
   Bu blok .menu ve .menu-dugme tanımlarından SONRA gelmeli; aynı
   özgüllükte olduğu için sırayı kaybederse display değeri ezilir. */
@media (min-width: 64rem) {
  .genis-menu { display: block; }
  .menu-dugme { display: none; }
  .menu,
  .menu[data-acik='true'] { display: none; }
}

/* --- Ana sayfa: tam ekran panel dizisi ---------------------------------- */

/* Kaydırma tamamen serbest: panellere oturtma (scroll-snap) yok, kaydırma
   nereye bırakılırsa orada duruyor. */
.akis { display: block; }

/* Panel ekrandan bir tık uzun. Tam 100dvh olunca fareyle ya da parmakla
   paneli tam ortalamak neredeyse imkânsızdı: en ufak kaymada bir üstteki
   ya da alttaki panel görünüyordu. Fazlalık pay o hassasiyeti kaldırıyor. */
.panel {
  position: relative;
  min-height: var(--panel-boy, 108dvh);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  isolation: isolate;
  background: var(--p-bg, var(--paper));
  color: var(--p-ink, var(--ink));
  overflow: hidden;
}

/* Eserin 24 piksellik kopyası tam ekrana yayılıyor. Tarayıcının kendi
   yumuşatması bulanık bir zemin veriyor: panel kenardan kenara doluyor,
   eser kırpılmıyor, filtre maliyeti de yok. --fon üreticiden geliyor. */
.panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--fon);
  background-size: cover;
  background-position: center;
  transform: scale(1.08);
}
/* Zeminle eser arasına ince bir sakinleştirici: zemin fazla dikkat çekmesin,
   üst çubuk ile künye her panelde okunur kalsın. */
.panel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--p-bg, var(--paper));
  opacity: var(--fon-perde, 0.62);
}
.panel[style*='--fon'] { background: var(--p-bg, var(--paper)); }

.panel-ic {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  justify-items: center;
  text-align: center;
  gap: clamp(0.7rem, 1.6vh, 1.2rem);
  padding: calc(var(--bar) + var(--pad) * 0.35) calc(var(--pad) * 0.6)
           calc(var(--pad) * 0.85);
  width: 100%;
  min-width: 0;
  /* Kesin yükseklik olmadan 1fr satırı kalan boşluğu alamaz; görsel kendi
     doğal boyuna açılıp paneli taşırır. Çok basık ekranlarda 30rem tabanı
     devreye giriyor, panel o zaman kayıyor ama içerik ezilmiyor. */
  block-size: var(--panel-boy, 108dvh);
  min-block-size: max(30rem, var(--panel-boy, 108dvh));
}

/* Panel metni varsayılan olarak ortalı; hiza="sol" olan panelde sola yaslı.
   Eser kutusu her hâlde ortada kalıyor, yalnızca yazı kayıyor. */
.panel[data-hiza='sol'] .duz-baslik { text-align: start; }
.panel[data-hiza='sol'] .panel-ic {
  justify-items: start;
  text-align: left;
}
.panel[data-hiza='sol'] .eser-kutu { justify-self: center; }
.panel[data-hiza='sol'] .panel-meta { justify-content: flex-start; }

.panel-baslik { grid-row: 1; }
.eser-kutu { grid-row: 2; }
.panel-meta,
.panel-kapak .altyazi { grid-row: 3; }

/* Görsel ile noktaların ortak kutusu.
   Kutu eserin en/boy oranına sabitli (--oran üreticiden geliyor), böylece
   noktalar tam eserin üstüne düşüyor, yanındaki renk boşluğuna taşmıyor.
   Geniş ekranda yükseklik belirleyici, dar ekranda genişlik. */
.eser-kutu {
  position: relative;
  display: block;
  block-size: 100%;
  inline-size: auto;
  aspect-ratio: var(--oran, 3 / 2);
  margin-inline: auto;
  justify-self: center;
  align-self: center;
  /* Üstüne yazılan başlık eserin genişliğine göre ölçekleniyor (cqw),
     ekran boyuna göre değil: yazı eserin neresinde duruyorsa orada kalıyor. */
  container-type: inline-size;
}

/* --- Eserin üstüne yazılan başlık ---------------------------------------
   Taslakta bu başlık boyanın içine gömülüydü: tek satır, büyük harf, sıkı
   ve harfleri karışık renkli. Yazısız eser gelince aynı görüntüyü canlı
   yazıyla kuruyoruz; renkler veri.json > baslikRenkler dizisinden sırayla
   dağıtılıyor. */
.eser-yazi {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-inline: 4cqw;
  margin: 0;
  /* Taslakta yazı eserin %73'ü kadar yer kaplıyor ve tam ortanın biraz
     üstünde duruyor; iki ölçü de eserin genişliğine bağlı. */
  font-size: 5.9cqw;
  line-height: 0.9;
  text-align: center;
  text-wrap: nowrap;
  pointer-events: none;
}
.eser-yazi-satir { transform: translateY(-6.3cqw); }
/* Yeni eserin yazı bandı açık: sarı ile yeşilin düz hâli zeminde 1,2:1
   kontrastta kalıyor, yani okunmuyor. Harf rengine dokunmadan dışına ince
   koyu bir çeper çekiyoruz; "paint-order: stroke" çeperi dışa attığı için
   harf kalınlığı da bozulmuyor. */
.eser-yazi .harf { color: var(--r, currentColor); }
.eser-yazi {
  paint-order: stroke fill;
  -webkit-text-stroke: 0.035em rgba(20, 18, 26, 0.85);
}
.js .eser-yazi {
  opacity: 0;
  transition: opacity 900ms var(--ease) 260ms;
}
.js .panel.gorunur .eser-yazi { opacity: 1; }

/* --- Paneli tamamen kaplayan eser ---------------------------------------
   Eser kutuya değil panelin tamamına yayılıyor. Başlığın her kelimesi ayrı
   satır: ilki üstte, ortadaki ortada, sonuncusu altta. Harf renkleri
   site.js'te arkadaki pikselin tersinden hesaplanıyor. */
.panel-tam .panel-fon-eser {
  position: absolute;
  inset: 0;
  z-index: -1;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
}
/* Bulanık zemin perdesi eserin üstüne biner, burada işi yok. */
.panel-tam::after { display: none; }

/* Dik ekranda yatay eseri "cover" ile doldurmak, genişliğin üçte ikisini
   kesmek demek. Kapak kolajı ortada duran bir portre, kesilirse dağılıyor;
   telefonda tam sığdırılıyor. Artan yer eserin kağıt rengiyle aynı, o
   yüzden yine kenarsız görünüyor. Seri panelindeki soyut boya kenardan
   kenara devam ettiği için orada kırpma sorun değil, "cover" kalıyor. */
/* Kapak eseri kırpılmadan tam görünsün (veri.json > kapak.gorselSigdir).
   Kolajın kağıdı beyaz ve panel zemini de beyaz: artan yer kenar gibi
   durmuyor. --- İŞARET: kapak-sigdir --- */
.panel-kapak-sigdir.panel-tam .panel-fon-eser { object-fit: contain; }

/* Paneller ekrandan biraz uzun (108dvh): kaydırırken bir sonraki panelin
   ucu görünsün diye. Ama kapak eseri tam görünmeliyse panelin fazlası
   eserin altını ekran dışında bırakıyordu. Sığdırmalı kapak tam bir ekran
   boyunda kalıyor; artan yer yok, eserin tamamı bir bakışta görünüyor. */
.panel-kapak-sigdir { min-height: 100vh; min-height: 100svh; }
.panel-kapak-sigdir .panel-ic {
  block-size: 100vh;
  block-size: 100svh;
  min-block-size: 100vh;
  min-block-size: 100svh;
}

/* İkinci güvence: panel herhangi bir sebeple ekrandan uzun kalırsa bile
   (eski tarayıcı, svh desteklenmiyor, panel boyu başka kuralla değişti)
   eser bir ekrandan yüksek çizilmesin. Kutu ortalanıyor, artan yer
   panelin zemini oluyor. */
.panel-kapak-sigdir.panel-tam .panel-fon-eser {
  inset: 0;
  margin: auto;
  block-size: auto;
  inline-size: auto;
  max-inline-size: 100%;
  max-block-size: 100vh;
  max-block-size: 100svh;
}

@media (max-width: 53.999rem) {
  .panel-kapak.panel-tam .panel-fon-eser { object-fit: contain; }
}

/* --- Kayan şerit paneli -------------------------------------------------
   Üç sıra kare eser, durmadan yana kayıyor. Sıraların yönü veriden. */
.panel-serit { overflow: hidden; }

.serit-yigin {
  position: absolute;
  inset: 0;
  display: grid;
  /* Satır sayısı veriden geliyor (veri.json > kayanSeritler.satirlar). */
  grid-template-rows: repeat(var(--serit-satir, 3), 1fr);
  row-gap: var(--serit-ara, 0.6rem);
  padding-block: var(--serit-ara, 0.6rem);
  z-index: 0;
}

.serit {
  overflow: hidden;
  block-size: 100%;
  min-inline-size: 0;
}

.serit-ray {
  display: flex;
  block-size: 100%;
  inline-size: max-content;
  will-change: transform;
}

/* Boşluk gap ile değil kenar boşluğuyla: gap son öğeden sonra durmuyor,
   o zaman ray tek kopyanın tam iki katı olmuyor ve %50'lik kaydırma her
   turda bir boşluk kadar sıçrıyor. */
.serit-ray img {
  flex: 0 0 auto;
  /* Görsel inene kadar kutu panelin zeminiyle aynı kalsın: eskiden gri
     panelde beyaz olmayan boşluklar delik gibi duruyordu. */
  background: var(--p-bg, var(--paper));
  block-size: 100%;
  inline-size: auto;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  margin-inline-end: var(--serit-ara, 0.6rem);
  border-radius: 2px;
}

@keyframes serit-sola {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
@keyframes serit-saga {
  from { transform: translate3d(-50%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

.serit-sol { animation: serit-sola var(--sure, 80s) linear infinite; }
.serit-sag { animation: serit-saga var(--sure, 80s) linear infinite; }

/* Başlık şeritlerin üstünde; zemin sürekli değiştiği için gölge şart.
   Seçiciye .eser-yazi-boyali de yazılıyor: o kuralın filter:none'ı bu
   dosyada daha sonra geliyor ve eşit özgüllükte olsa geçersiz kılıyor. */
.panel-serit .panel-ic { z-index: 1; }
.panel-serit .eser-yazi-tam.eser-yazi-boyali .yazi-ic {
  filter: drop-shadow(0 0.012em 0.02em rgba(14, 12, 20, 0.6))
    drop-shadow(0 0.05em 0.09em rgba(14, 12, 20, 0.45));
}

@media (prefers-reduced-motion: reduce) {
  .serit-sol,
  .serit-sag { animation: none; }
}

/* --- Tek renk panel -----------------------------------------------------
   Eser yok: panel düz bir renk, üstünde dev bir başlık ve zemine sekip duran
   toplar. Başlık solda, dikeyde ortanın biraz üstünde. */
.panel-duz-renk .panel-ic {
  grid-template-rows: minmax(0, 1fr) auto;
  align-content: stretch;
}

.duz-baslik {
  position: absolute;
  /* Yatayda ve dikeyde ortada. Sola almak isteyen panel data-hiza="sol"
     veriyor; o kural aşağıda. */
  inset-inline: var(--pad);
  inset-block-start: 50%;
  transform: translateY(-50%);
  margin: 0;
  text-align: center;
  /* Ekranın hem eninden hem boyundan sınırlı: hangisi önce biterse punto
     ona uyuyor, yazı hiçbir ölçüde panelden taşmıyor. */
  font-size: var(--panel-yazi-boy);
  /* Parçalar alt alta duruyor; 0.8 onları birbirine yapıştırıyordu. */
  line-height: 0.98;
  letter-spacing: 0.05em;
  max-inline-size: calc(100% - var(--pad) * 2);
}
.duz-satir {
  display: block;
  white-space: nowrap;
}
/* Ok son kelimenin yanında, harflerle aynı kalınlıkta. */
.duz-ok {
  inline-size: 0.66em;
  block-size: 0.33em;
  margin-inline-start: 0.14em;
}

/* Toplar panelin kendi perdesinin (::after) ÜSTÜNDE olmalı. z-index -1
   verilirse perdeyle aynı katmana düşüyor, perde sonradan boyandığı için
   renkleri soluyor. 0 verip metni 1'e alıyoruz. */
.ziplayan {
  position: absolute;
  inset: 0;
  z-index: 0;
  inline-size: 100%;
  block-size: 100%;
  pointer-events: none;
}
/* Yalnızca topların olduğu panelde metni onların üstüne alıyoruz.
   Bunu bütün panellere vermek olmuyor: z-index yeni bir katman bağlamı
   açıyor ve tam kaplayan panelde başlığın mix-blend-mode'u arkadaki
   eseri göremez oluyor, yazı bembeyaz kalıyor. */
.panel-duz-renk .panel-ic { z-index: 1; }

/* Yazı alanı panelin tamamını kaplıyor, künye altta ayrı satır. Dar ekranda
   .panel-ic satırları içeriğe göre kümeleniyor; bu panelde onu geçersiz
   kılıyoruz, yoksa üç kelime ortada yığılıyor. */
.panel-tam .panel-ic {
  grid-template-rows: minmax(0, 1fr) auto;
  align-content: stretch;
}

.eser-yazi-tam {
  position: static;
  grid-row: 1;
  align-self: stretch;
  justify-self: stretch;
  inline-size: 100%;
  display: grid;
  align-content: space-between;
  justify-items: center;
  padding: 0;
  /* Punto panel başına ayarlanabiliyor: veri.json > yaziBoy. */
  font-size: var(--yazi-boy, var(--panel-yazi-boy));
  line-height: 0.84;
  letter-spacing: 0.05em;
  /* Rengi karıştırma modu üretiyor; çeper de sabit renk de gerekmiyor. */
  -webkit-text-stroke: 0;
}

/* Yazının arkasında levha yok: kelimeler doğrudan eserin üstünde duruyor. */
.eser-yazi-tam .yazi-satir { display: block; }


/* Kelimeler panele dağılmıyor, blok hâlinde tam ortada duruyor.
   Izgara satırı yerine mutlak konum: üst çubuk için ayrılan boşluk yüzünden
   ortalama aşağı kayıyordu, böylece panelin gerçek ortasına oturuyor. */
.eser-yazi-tam.eser-yazi-ortala {
  position: absolute;
  /* Izgara yerleşimi bırakılırsa mutlak konumun sınırı hücre olur ve üst
     çubuk boşluğu ortalamayı aşağı kaydırır; hücreden çıkarıyoruz. */
  grid-row: auto;
  grid-column: auto;
  inset: 0;
  display: grid;
  /* "unsafe" şart: yazı panelden geniş olduğunda tarayıcı güvenli hizalamaya
     geçip sola yapıştırıyor, taşma tek yandan oluyordu. Unsafe ile yazı
     gerçekten ortalanıp iki kenardan eşit taşıyor. */
  justify-items: center;
  align-items: center;
  align-content: center;
  padding: 0;
}


/* Rengi karıştırma değil, verilen renk belirliyor; saydamlık eseri yazının
   arkasından kısmen gösteriyor. */
/* Panel başlığına kendi yazı tipi verilebiliyor (veri.json > yaziFont).
   Değişken eksenli olmayan bir yazı tipinde wdth/wght eksenleri anlamsız;
   sıfırlanmazsa tarayıcı sahte (sentetik) kalınlık üretip harfleri bozuyor. */
.eser-yazi-tam.eser-yazi-ozelfont {
  font-family: var(--yazi-font);
  /* font-variation-settings sıfırlanıyor: site fontunun wdth ekseni bu
     yazı tipinde yok, bırakılırsa tarayıcı sahte genişletme yapıyor.
     Ağırlığı font-weight üstünden veriyoruz — değişken eksenli bir yazı
     tipinde tarayıcı bunu kendi wght eksenine bağlıyor, sabit ağırlıklı
     olanda da yalnızca var olan yüz kullanılıyor. */
  font-variation-settings: normal;
  font-weight: var(--t-wght, 400);
}

/* --- Fırçayla çizilen başlık --------------------------------------------
   Başlık yazı değil, çizilen bir şekil. Harflerin gerçek konturu boyayı
   kırpıyor; maskedeki fırça izi harfin orta çizgisini takip ediyor.
   pathLength="1" olduğu için altı harf aynı anda başlayıp aynı anda
   bitiyor — uzun harf yavaş, kısa harf hızlı çizilmiş gibi durmuyor. */
/* Diğer panel başlıkları gibi ortak puntoya bağlı. Punto harfin boyu,
   SVG'nin boyu ise görüş kutusunun boyu; ikisinin oranı (--firca-olcek)
   yolları üreten betikten geliyor. Böylece bu başlık yazı olarak
   çizilmediği hâlde ötekilerle aynı boyda duruyor.
   Genişlik sınırı güvenlik payı: taşacağı ölçüde, meet ile küçülüp
   panelin içinde kalıyor. */
.firca-yazi {
  position: absolute;
  inset: 0;
  margin: auto;
  block-size: calc(var(--panel-yazi-boy) * var(--firca-olcek, 1.36));
  inline-size: auto;
  max-inline-size: 94%;
  overflow: visible;
  opacity: var(--yazi-op, 1);
}

/* Gölge SVG'nin kendi koordinatlarında ölçülüyor (viewBox 830x223), o yüzden
   piksel değerleri yazıyla birlikte ölçekleniyor. "em" ile yazılamaz: SVG
   içinde em, harfin boyuna değil miras alınan 18 px'lik font boyuna göre
   çözülüyor ve gölge 0,3 pikselde kalıyordu, yani hiç görünmüyordu. */
/* saturate/contrast: harfin içine dolan eser kopyasının rengini açıyor,
   yazı zeminden ayrılıyor. Ardından iki renkli parıltı (neon) ve
   okunurluğu taşıyan sıcak gölge geliyor. Sıra önemli: doygunluk önce
   gelmezse gölgelerin kendi rengi de doygunlaşıyor. */
/* Doygunluk desenin İÇİNDEKİ görselde. Orası durgun bir katman: desen bir
   kez taranıp saklanıyor, animasyon boyunca yeniden hesaplanmıyor. Daha
   önce bu filtre canlı boya grubundaydı ve her karede yeniden geçiyordu. */
.firca-doku {
  filter: saturate(2.1) contrast(1.12);
}

/* Çizim sürerken izler görünür, dolgu gizli. Bitince yer değiştiriyorlar:
   izler harfin köşelerine birkaç piksel eksik girebiliyor, dolgu son hâli
   garantiye alıyor. Aynı deseni paylaştıkları için takas gözle fark
   edilmiyor. */
.firca-dolgu { opacity: 1; }
.firca-izler { opacity: 0; }
.panel.firca-ciz .firca-dolgu { opacity: 0; }
.panel.firca-ciz .firca-izler { opacity: 1; }

/* Gölgeler ve parıltı, kırpılmış sonucu gören dış grupta. Sıra: önce
   koyu gölgeler (belirginlik), sonra renkli parıltı (neon).

   Tek takım, baştan sona aynı. Gölge dıştaki grupta ve o grup maskelenmiş
   (yani ilerledikçe ortaya çıkan) içeriği görüyor; dolayısıyla gölge
   kendiliğinden yazının çizimini takip ediyor, harf göründükçe onun
   gölgesi de geliyor.

   Çizim sırasında ayrı ve dar bir takım kullanmayı denedim, sonra tam
   takıma geçiyordu; gölgenin geç gelmesi ondandı. Şimdi hiçbir şey
   değişmiyor, geçiş de yok.

   Yarıçaplar ölçülü tutuluyor: animasyon maskeyi her karede yeniden
   çizdiriyor ve maskeli ağacın üstündeki her drop-shadow o karede
   yeniden bulanıklaştırılıyor. Bulanıklık maliyeti yarıçapla büyüdüğü
   için toplam 83 pikselden 47'ye çekildi; beş katman da duruyor. */
/* Gölge KIRPMANIN DIŞINDAKİ grupta olmak zorunda.

   Bir süre dolgu katmanına taşımıştım; kare maliyeti düşüyordu ama gölge
   tümden kayboldu: dolgu, harf konturuna kırpılmış grubun İÇİNDE. Kendi
   filtresi kırpmadan önce uygulanıyor, harfin dışına düşen bulanıklık da
   kırpmayla kesiliyordu. Gölge görünecekse kırpılmamış grupta duracak.

   Kare maliyeti şöyle çözülüyor: tam takım yalnızca çizim BİTTİĞİNDE;
   çizim sürerken tek ve küçük bir gölge var. Böylece her karede beş
   bulanıklık değil bir tane hesaplanıyor. */
.firca-golge {
  filter: drop-shadow(0 3px 3px rgba(52, 36, 24, 0.6))
    drop-shadow(0 8px 14px rgba(52, 36, 24, 0.5))
    drop-shadow(0 0 3px rgba(255, 255, 255, 0.9))
    drop-shadow(0 0 9px rgba(255, 60, 190, 0.55))
    drop-shadow(0 0 18px rgba(80, 200, 255, 0.45));
}

.panel.firca-ciz .firca-golge {
  filter: drop-shadow(0 3px 5px rgba(52, 36, 24, 0.6));
}

/* Takas sırasında sıçrama olmasın: iki katman da saydamlıkla giriyor,
   display değişmiyor (display anahtarı düzeni yeniden hesaplatıyordu). */
.firca-dolgu { transition: opacity 260ms var(--ease); }
.firca-izler { transition: opacity 200ms var(--ease); }

/* Başlangıç: iz tamamen geri çekilmiş, yani hiçbir harf görünmüyor.
   Betik çalışmazsa gizli kalmasın diye gizleme yalnızca .firca-hazir
   sınıfı varken uygulanıyor; sınıfı site.js koyuyor. */
.firca-hazir .firca-iz {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.firca-hazir .panel.firca-ciz .firca-iz {
  animation: firca-ciz var(--firca-sure, 1700ms) cubic-bezier(0.66, 0, 0.34, 1) forwards;
  /* Tarayıcıya ne değişeceğini önceden söylüyoruz: izin katmanı ayrı
     tutuluyor, her karede bütün grubun yeniden taranması gerekmiyor. */
  will-change: stroke-dashoffset;
}

@keyframes firca-ciz {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .firca-hazir .firca-iz { stroke-dashoffset: 0; }
  .firca-hazir .panel.firca-ciz .firca-iz { animation: none; }
}

/* Karıştırmalı başlıkta her harf kendi kutusunda; genişlik JS'te em
   cinsinden sabitleniyor, böylece rastgele harfler yazının enini
   oynatmıyor. Ortalama şart: dar bir harf geniş kutuda sola yapışmasın. */
.eser-yazi-karistir .krk {
  display: inline-block;
  text-align: center;
}

/* --- Buzlu cam / sis başlığı --------------------------------------------
   Harfin kendi rengi yok: içi, panelin arkasındaki eserin 24 piksellik
   kopyasıyla (--fon) doluyor, üstüne de zeminin kendi kremi yarı saydam
   biniyor. Böylece krem alanların üzerinde harf neredeyse kayboluyor,
   renkli lekelerin üzerinde buzlu cam gibi süzülüyor.

   Neden backdrop-filter değil: o, öğenin bütün kutusunu bulanıklaştırıyor,
   harf biçimini takip etmiyor. Harfe uydurmanın tek yolu SVG maskesi ve
   maskedeki yazı web fontunu yükleyemiyor. --fon zaten 24 piksel, yani
   büyütülünce bedavaya bulanık; aradığımız sis etkisi tam olarak bu. */
.eser-yazi-tam.eser-yazi-sisli .yazi-ic {
  mix-blend-mode: normal;
  color: transparent;
  background-image: linear-gradient(var(--sis-renk, rgba(255, 244, 221, 0.12)),
      var(--sis-renk, rgba(255, 244, 221, 0.12))), var(--fon);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  /* Cam kenarı ve gölge drop-shadow ile veriliyor, -webkit-text-stroke ile
     değil: çeper harfin bütün konturlarını boyuyor, iç kontur dış konturla
     kesiştiği yerde (Fredoka'da R'nin bacağı gövdeye böyle giriyor)
     birleşme çizgisi görünür oluyor. drop-shadow ise öğenin çizilmiş
     saydamlığını kullanıyor, yani harfin dış siluetini — iç dikiş yok.

     Üç katman: açık kenar harfi koyu lekelerden ayırıyor, sıkı gölge
     kenarı keskinleştiriyor, geniş gölge harfi zeminden kaldırıyor.
     Gölge siyah değil sıcak kahve — pastel eserin üstünde siyah kirli
     duruyor. Bu sayede perde iyice kısılıp arkadaki renk görünür
     kalırken harf hâlâ okunuyor. */
  filter: drop-shadow(0 0 0.01em rgba(255, 255, 255, 0.92))
    drop-shadow(0 0.004em 0.007em rgba(74, 55, 38, 0.32))
    drop-shadow(0 0.018em 0.034em rgba(74, 55, 38, 0.46));
  opacity: var(--yazi-op, 1);
}

/* background-clip: text destek görmezse harf tamamen görünmez kalıyor;
   o durumda düz yarı saydam kreme düşüyoruz. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .eser-yazi-tam.eser-yazi-sisli .yazi-ic {
    color: var(--sis-renk, rgba(255, 244, 221, 0.12));
    background-image: none;
  }
}

/* Aynı dosyada .eser-yazi-tam .yazi-ic kuralı daha sonra geliyor; rengi ve
   karıştırmayı geri almasın diye seçici bilerek bir tık ağır. */
.eser-yazi-tam.eser-yazi-boyali .yazi-ic {
  mix-blend-mode: normal;
  color: var(--yazi-renk, currentColor);
  opacity: var(--yazi-op, 1);
  filter: none;
}

/* Harflerin rengi yazılmıyor, hesaplanıyor: "difference" her pikselde
   arkasındaki boyanın tersini alıyor. Renk tamamen desenden geliyor ve
   tek harfin içinde bile desen değiştikçe değişiyor — düz renk yok.
   Hafif bulanıklık harfin kenarını boyaya oturtuyor. */
.eser-yazi-tam .yazi-ic {
  display: inline-block;
  /* Fark alma kipinin kaynağı. Beyaz kalırsa sonuç arka planın tam tersi
     olur ve bütün harfler tek bir renk ailesinde toplanır; kaynağı harf
     harf değiştirince aynı boyadan çok daha farklı renkler çıkıyor. */
  color: var(--kaynak, #fff);
  mix-blend-mode: difference;
  filter: blur(0.35px);
}

/* Bütün kelimeler tek satırda: üretici hepsini tek bir .yazi-satir
   kutusuna koyuyor, burada o kutuyu panelin ortasına alıyoruz. */
.eser-yazi-tam.eser-yazi-tek {
  align-content: center;
  justify-items: center;
  text-align: center;
  white-space: nowrap;
}

/* Harf rengi arkadaki pikselden hesaplandığı için yazı tipi geç gelirse
   renk de zıplıyor: yedek fontun harfleri başka pikselleri örtüyor.
   Bu yüzden başlık, kendi yazı tipi hazır olana kadar gösterilmiyor;
   site.js hazır olunca "yazi-hazir" ekleyip yumuşakça açıyor.
   Betik çalışmazsa (html.js yok) başlık doğrudan görünür kalıyor. */
/* Gizleme yalnızca "karisim-gecisi" sınıfı varken geçerli. Bu sınıfı
   başlığı geri açacak betik ekliyor. CSS ile betik ayrı önbelleklendiği
   için, ziyaretçi yeni CSS'i alıp eski betikte kalabilir; o durumda sınıf
   hiç eklenmez ve başlık gizlenmez. Aksi hâlde başlık kalıcı kaybolurdu. */
/* Panelin kendi açılış kuralı (.js .panel.gorunur .eser-yazi) üç sınıflı;
   buradaki kural onu geçebilmek için :not() ile dört sınıfa çıkıyor.
   Yazı tipi hazır olunca sınıf düşüyor ve panelin normal açılışı devralıyor. */
html.karisim-gecisi .panel .eser-yazi-tam:not(.yazi-hazir) { opacity: 0; }
html.karisim-gecisi .panel .eser-yazi-tam.yazi-hazir {
  opacity: 1;
  transition: opacity 280ms var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  html.karisim-gecisi .panel .eser-yazi-tam.yazi-hazir { transition: none; }
}
.eser-kutu .panel-eser {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
/* Eser bulanık zeminin üstünde duran bir levha gibi okunsun; kenarı
   belirsiz kalmasın. Gölge zemin rengine göre tonlanıyor. */
.eser-kutu {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 18px 60px rgba(0, 0, 0, 0.14);
}

/* --- Düz zeminli panel (kapak) ------------------------------------------
   Eser panelin tamamını kaplıyor; panel rengi yalnızca görsel yüklenene
   kadar görünüyor ve eserin kağıt rengiyle birebir aynı, o yüzden yükleme
   sırasında da sıçrama olmuyor. Bulanık zemin üretici tarafında kapalı. */
.panel-duz .eser-kutu { box-shadow: none; max-inline-size: 100%; }

/* Künye eserin üstünde, en altta duruyor. */
.panel-duz .altyazi {
  position: absolute;
  inset-inline: 0;
  bottom: calc(var(--pad) * 0.7);
}

/* Eser görseli kırpılmıyor: kutuya sığdığı kadar büyüyor, oranı bozulmuyor.
   Üst çubuk ve künye görselin üstüne binmiyor, düz renk alanda duruyor;
   bu yüzden ayrıca karartma perdesine gerek kalmıyor. */
.panel-eser {
  /* Kutu satırın tamamını kaplıyor, görsel içine "contain" ile oturuyor.
     auto boyut verirsek görsel kendi doğal 424 px'inde kalır, büyümez. */
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  object-position: center;
  align-self: stretch;
  justify-self: stretch;
}
.js .panel-eser {
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 900ms var(--ease), transform 1200ms var(--ease);
}
.js .panel.gorunur .panel-eser { opacity: 1; transform: none; }

/* --- Süzülen noktalar ---------------------------------------------------
   Eserin üstünde, paletten renklerle. Sadece transform ve opacity
   canlandırılıyor; düzen hesabı tetiklenmiyor. Panel görünür değilken
   animasyon duruyor, boşuna kare üretilmiyor. */

.noktalar {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.noktalar i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  inline-size: var(--c);
  block-size: var(--c);
  margin: calc(var(--c) / -2);
  border-radius: 50%;
  background: var(--renk);
  opacity: 0;
  will-change: transform;
}
.js .panel.gorunur .noktalar i {
  animation: nokta-suzul var(--sure) var(--gecikme) ease-in-out infinite alternate,
    nokta-belir 900ms var(--ease) forwards;
  animation-delay: var(--gecikme), 260ms;
}
/* Görünmeyen panelde kare üretilmesin. */
.panel:not(.gorunur) .noktalar i { animation-play-state: paused; }

@keyframes nokta-suzul {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(var(--kx), var(--ky), 0); }
}
@keyframes nokta-belir {
  from { opacity: 0; }
  to   { opacity: var(--op); }
}

/* Betik yoksa noktalar hareketsiz ama görünür kalsın. */
html:not(.js) .noktalar i { opacity: var(--op); }

.panel-baslik,
.panel-baslik .satir,
.panel-meta { min-width: 0; }

/* Başlık görselin içine gömülüyse ekranda tekrar yazılmıyor; yalnızca
   ekran okuyucu ve arama motoru görüyor. */
.gorsel-yazi {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Bütün panel başlıklarının ortak puntosu. Tek yerden veriliyor ki
   panelden panele değişmesin. Alt sınır (rem) bilerek yok: sabit bir
   taban koyarsam dar ekranda uzun başlıklar panelden taşar ve "hepsi aynı
   boy" kuralı ancak taşmayı göze alarak tutar. vh sınırı alçak ve yatık
   pencerelerde başlığın panele sığmasını garantiliyor. */
:root {
  --panel-yazi-boy: min(9.6vw, 18vh);
}

/* Panel başlığı */
.panel-baslik {
  font-size: var(--panel-yazi-boy);
  --t-wght: 800;
}
.panel-baslik .satir {
  display: block;
  overflow: hidden;
}
.panel-baslik .satir > span { display: block; }

/* Gizli başlangıç durumu YALNIZCA JS çalışırken uygulanır.
   Böylece betik yüklenmezse ya da gözlemci ateşlenmezse sayfa boş kalmaz. */
.js .panel-baslik .satir > span {
  transform: translateY(105%);
  transition: transform 900ms var(--ease) calc(var(--i, 0) * 90ms);
}
.js .panel.gorunur .panel-baslik .satir > span { transform: none; }

.panel-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 1.4rem;
  opacity: 0.92;
  font-size: 0.78rem;
  letter-spacing: 0.13em;
  font-weight: 600;
}
.panel-meta .etiket { font-size: inherit; letter-spacing: inherit; font-weight: inherit; }
.js .panel-meta {
  opacity: 0;
  transform: translateY(0.7em);
  transition: opacity 620ms var(--ease) 380ms, transform 620ms var(--ease) 380ms;
}
.js .panel.gorunur .panel-meta { opacity: 0.82; transform: none; }

/* Panelin tamamı seri sayfasına açılıyor. Dokunmatik ekranda üzerine gelme
   diye bir şey olmadığı için bağlantı olduğu yazıyla da belli ediliyor. */
.panel-bag {
  position: absolute;
  inset: 0;
  z-index: 3;
  text-indent: -9999px;
  overflow: hidden;
  cursor: pointer;
}

/* Panelin tıklanabilir olduğu imleçten ve başlığın gölgesinden anlaşılıyor:
   imleç panele girince başlık kâğıttan hafifçe kalkıyor.

   Gölge sıfırdan değil, GÖRÜNMEZ bir gölgeden büyüyor: "none" ile bir
   drop-shadow arasında ara değer yok, geçiş sıçrardı.

   Seçiciler başlığın kendisini değil, boyayı taşıyan katmanı hedefliyor.
   Sebep: 2. panelde harfler "difference" ile karışıyor; filtre üst ögeye
   konursa orada yeni bir katman doğuyor ve karışım eserle değil o katmanla
   yapılıyor, renk düzleşiyordu. */
/* Tepki BAŞLIĞIN ÜSTÜNDE veriliyor, panelin herhangi bir yerinde değil.

   Bunun için başlığın bağlantı katmanının üstüne çıkması gerekiyor:
   .panel-bag paneli baştan sona kaplıyor ve normalde imleci o yakalıyor,
   dolayısıyla başlık hiç :hover almıyordu. Başlık üste alınınca tıklama
   da ona düşüyor; site.js tıklamayı panelin bağlantısına aktarıyor.
   Kural .js ile sınırlı: betik yoksa başlık imleci yakalamıyor ve panelin
   tamamı yine tıklanabilir kalıyor. */
.js .panel .eser-yazi-tam,
.js .panel .duz-baslik,
.js .panel .firca-yazi {
  z-index: 4;
  /* Başlığın KUTUSU imleci yakalamıyor: kutu panelin yarısı kadar geniş
     olabiliyor, harflerden metrelerce uzakta tepki veriyordu. Yakalama
     aşağıda, harfi taşıyan katmanlara veriliyor. */
  pointer-events: none;
}

/* Başlık, bağlantı katmanının ÜSTÜNDE boyanmak zorunda; yoksa imleci hep
   bağlantı yakalıyor ve başlık hiç :hover almıyor.

   Doğrudan "z-index: 4" yetmiyor: başlıklar .panel-ic içinde, o da
   z-index:1 ile kendi katman bağlamını açıyor; içeride yazılan 4, dışarıda
   1 sayılıyor ve bağlantının 3'ünün altında kalıyor. Bu yüzden bağlantıyı
   en alta indirip .panel-ic'i imlece geçirgen yapıyoruz: boş alanda tıklama
   içinden geçip bağlantıya iniyor, harflerin üstünde ise başlık yakalıyor.

   Kural .js ile sınırlı: betik yoksa bağlantı eski yerinde (en üstte)
   kalıyor ve panelin tamamı tıklanabilir olmayı sürdürüyor. */
.js .panel .panel-bag { z-index: 0; }
.js .panel .panel-ic { pointer-events: none; }

.js .panel .eser-yazi-tam .yazi-ic,
.js .panel .duz-satir {
  pointer-events: auto;
  cursor: pointer;
}
/* SVG'de "painted": yalnızca gerçekten boyanmış piksel imleci yakalıyor,
   harflerin arasındaki boşluk yakalamıyor. HTML metinde bunun karşılığı
   yok; oradaki en dar hedef satır kutusu. */
.js .panel .firca-yazi .firca-dolgu,
.js .panel .firca-yazi .firca-izler {
  pointer-events: painted;
  cursor: pointer;
}

/* Satır kutusu da harfe kadar daralıyor; blok olarak bırakılırsa satır
   panel boyunca uzanıyor ve yine boşlukta tetikleniyor. */
.panel .duz-satir {
  inline-size: max-content;
  max-inline-size: 100%;
  margin-inline: auto;
}
.panel[data-hiza='sol'] .duz-satir { margin-inline: 0; }
/* z-index yalnız konumlandırılmış ögede işliyor. Üçünden ikisi zaten
   mutlak konumda; yalnız satırlara dağılan başlık ızgara akışında duruyor,
   konumu ona veriyoruz. Hepsine birden "relative" yazmak, mutlak
   konumdakilerin inset değerlerini kaydırmaya çevirip başlığı panelin
   ortasından ittiriyordu. */
.js .panel .eser-yazi-tam:not(.eser-yazi-ortala) { position: relative; }

/* Gölge sıfırdan değil, görünmez bir gölgeden büyüyor: "none" ile bir
   drop-shadow arasında ara değer yok, geçiş sıçrardı.

   Seçiciler bilerek ağır: renkli başlıkta (.eser-yazi-boyali) filtreyi
   sıfırlayan bir kural var, ondan sonra gelmesi gerekiyor. */
.panel .eser-yazi-tam .yazi-ic,
.panel .duz-satir,
.panel .firca-yazi {
  filter: drop-shadow(0 0 0 rgba(18, 14, 10, 0));
  transition: filter 300ms var(--ease), scale 340ms var(--ease);
}
/* Tepki, imleci yakalayan ögenin kendisinde. Fırça başlıkta yakalayan
   şekiller içeride olduğu için filtre :has() ile dış SVG'ye taşınıyor;
   gölgeyi şeklin üstüne koyarsak kırpma onu kesiyor. */
/* Kelimeler tek tek değil, başlık olarak tepki veriyor: hangi kelimenin
   üstüne gelinirse gelinsin üçü birden kalkıyor. :has() olmasaydı her
   kelime kendi başına oynardı ve başlık dağılmış görünürdü. */
.panel .eser-yazi-tam:has(.yazi-ic:hover) .yazi-ic,
.panel .duz-satir:hover {
  filter: drop-shadow(0 0.028em 0.04em rgba(18, 14, 10, 0.38));
}
/* SVG başlıkta ölçü CSS pikseli; em burada harfin boyuna değil miras
   alınan yazı boyuna göre çözülüyor. */
.panel .firca-yazi:has(.firca-dolgu:hover),
.panel .firca-yazi:has(.firca-izler:hover) {
  filter: drop-shadow(0 4px 6px rgba(18, 14, 10, 0.36));
}

/* Büyüme, harfi taşıyan katmanda. Üst ögeye konursa orada yeni bir katman
   doğuyor ve 2. paneldeki "difference" karışımı eserle değil o katmanla
   yapılıyor, renk düzleşiyor. */
/* Büyüme "transform" ile değil, ayrı "scale" özelliğiyle: bu başlıkların
   çoğunda zaten bir transform var (ortalamak için translate). transform
   yazsaydık onu ezip başlığı yerinden oynatırdık; scale onunla birleşiyor. */
.panel .eser-yazi-tam:has(.yazi-ic:hover) .yazi-ic { scale: 1.012; }
.panel .duz-satir:hover,
.panel .firca-yazi:has(.firca-dolgu:hover),
.panel .firca-yazi:has(.firca-izler:hover) { scale: 1.008; }

@media (prefers-reduced-motion: reduce) {
  .panel .eser-yazi-tam .yazi-ic,
  .panel .duz-satir,
  .panel .firca-yazi { transition: none; }
  .panel .eser-yazi-tam:has(.yazi-ic:hover) .yazi-ic,
  .panel .duz-satir:hover { scale: 1; }
}
.panel-git::after {
  content: ' \2192';
  display: inline-block;
  transition: transform 320ms var(--ease);
}
.panel:hover .panel-git::after,
.panel:focus-within .panel-git::after { transform: translateX(0.35em); }
.js .panel.gorunur:hover .panel-eser,
.js .panel.gorunur:focus-within .panel-eser { transform: scale(1.02); }
.panel-bag:focus-visible {
  outline: 3px solid var(--p-ink, currentColor);
  outline-offset: -8px;
}

/* Kapak, iri çubukla birlikte görülen tek panel. */
.panel-kapak .panel-ic {
  padding-top: calc(var(--bar-acik) + var(--pad) * 0.3);
}
@media (max-width: 63.999rem) {
  /* Dar ekranda menü satırı yok, iri çubuk daha kısa. */
  .panel-kapak .panel-ic { padding-top: calc(var(--bar-acik) * 0.62 + var(--pad) * 0.3); }
}

.panel-kapak .panel-baslik {
  font-size: clamp(1.55rem, 8.4vw, 8.5rem);
  --t-wdth: 84;
  --t-wght: 800;
  line-height: 0.92;
}

/* Kapanış paneli: görsel yok, taslaktaki mor alanın kendisi.
   Satırlar içeriğe göre, ortalanmış. */
.panel-kapanis .panel-ic {
  grid-template-rows: auto auto auto;
  align-content: center;
  gap: clamp(1rem, 2.6vh, 2rem);
}
.panel-kapanis .panel-baslik { --t-wdth: 88; }
.kapanis-metin {
  grid-row: auto;
  margin: 0;
  max-width: 34ch;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  opacity: 0.9;
}
.panel-kapanis p { grid-row: auto; }

.panel-kapak .altyazi {
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.66;
}
.js .panel-kapak .altyazi {
  opacity: 0;
  transition: opacity 700ms var(--ease) 520ms;
}
.js .panel.gorunur .altyazi { opacity: 0.66; }

/* --- Sağ kenar seri rayı ------------------------------------------------ */

.ray {
  position: fixed;
  right: calc(var(--pad) * 0.55);
  top: 50%;
  transform: translateY(-50%);
  z-index: 55;
  display: grid;
  gap: 1rem;
  /* Artık global renk yok: her .ray a kendi --ray-renk değişkenini kullanır */
}
.ray a {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
  text-decoration: none;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  /* Her link kendi panelinin rengini kullanır; JS --ray-renk'i atar.
     Yedek: eğer JS çalışmazsa --skin-ink genel rengi devreye girer. */
  color: var(--ray-renk, var(--skin-ink));
  transition: color var(--skin-t) var(--ease), opacity 260ms var(--ease);
  animation: ray-oge-in 500ms var(--ease) backwards;
}

.ray a:nth-child(1) { animation-delay: 100ms; }
.ray a:nth-child(2) { animation-delay: 180ms; }
.ray a:nth-child(3) { animation-delay: 260ms; }
.ray a:nth-child(4) { animation-delay: 340ms; }
.ray a:nth-child(5) { animation-delay: 420ms; }
.ray a:nth-child(6) { animation-delay: 500ms; }

@keyframes ray-oge-in {
  from {
    opacity: 0;
    transform: translateY(-1.2rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.ray .ad {
  /* Her zaman görünür ama aktif olmayanda soluk */
  opacity: 0.55;
  transform: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
  transition: opacity 260ms var(--ease), transform 260ms var(--ease),
    font-size 260ms var(--ease), font-weight 260ms var(--ease);
  white-space: nowrap;
}
.ray a:hover .ad,
.ray a:focus-visible .ad {
  opacity: 1;
  transform: translateX(-2px);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}
.ray a[aria-current='true'] .ad {
  opacity: 1;
  font-size: 0.82rem;
  font-weight: 700;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.65));
}
.ray .im {
  display: block;
  width: 18px;
  height: 2.5px;
  background: currentColor;
  opacity: 0.45;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  transition: width 420ms var(--ease), opacity 420ms var(--ease),
    height 420ms var(--ease);
}
.ray a:hover .im,
.ray a:focus-visible .im {
  width: 26px;
  opacity: 0.8;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}
.ray a[aria-current='true'] .im {
  width: 36px;
  height: 3px;
  opacity: 1;
}

/* --- İç sayfa iskeleti -------------------------------------------------- */

.sayfa {
  padding: calc(var(--bar) + var(--rhythm) * 0.55) var(--pad) 0;
}
.kap { max-width: 78rem; margin-inline: auto; min-width: 0; }
.kap-dar { max-width: 52rem; margin-inline: auto; min-width: 0; }
/* --- Seri sayfasının kendi takımı ---------------------------------------
   Zemin: panel görselinin en çok kullanılan rengi. Yazı ve üst çubuk:
   paneldeki başlığın rengi. Vurgu: görseldeki en canlı renk; ince çizgiler
   ve etiketler onu giyiyor. Üç değer de gövdedeki style'dan geliyor
   (bkz. _work/veri.json > sayfaRenk). */
body.seri-sayfa {
  background: var(--sayfa-bg, var(--paper));
  color: var(--sayfa-ink, var(--ink));
  /* Kayan yaprak ekranı tam kaplasın: içerik kısa kalırsa altta kökün
     zemini görünüyor ve yaprak yarım boy kaymış gibi duruyor. */
  min-block-size: 100dvh;
}
.seri-sayfa .seri-basi h1,
.seri-sayfa .sayfa-basi h1,
.seri-sayfa .eser-ad,
.seri-sayfa .kunye dt { color: var(--sayfa-ink, inherit); }

/* Vurgu az ve yerinde: etiketler, ince çizgiler, sonraki seri oku.
   Zeminle arasındaki fark düşük olabileceği için gövde metninde
   kullanılmıyor. */
.seri-sayfa .etiket,
.seri-sayfa .eser-not { color: var(--sayfa-vurgu, var(--haze)); }
.seri-sayfa .seri-ozet,
.seri-sayfa .sayfa-basi { border-color: color-mix(in srgb, var(--sayfa-vurgu, currentColor) 45%, transparent); }
.seri-sayfa .sonraki { border-block-start: 1px solid color-mix(in srgb, var(--sayfa-vurgu, currentColor) 45%, transparent); }

.seri-basi { grid-template-columns: minmax(0, 1fr); }
.seri-basi h1, .sayfa-basi h1, .sonraki strong { min-width: 0; }

.sayfa-basi {
  display: grid;
  gap: 1.4rem;
  padding-bottom: var(--rhythm);
  border-bottom: 1px solid var(--line);
}
.sayfa-basi h1 {
  font-size: clamp(2.6rem, 9.5vw, 7.5rem);
  --t-wdth: 92;
}

.bolum { padding-block: var(--rhythm); }
.bolum + .bolum { border-top: 1px solid var(--line); }
.bolum h2 {
  font-size: clamp(1.7rem, 4.5vw, 3.1rem);
  --t-wdth: 88;
  --t-wght: 700;
  margin-bottom: 1.6rem;
}

/* --- Seri sayfası ------------------------------------------------------- */

.seri-basi {
  min-height: min(78dvh, 44rem);
  display: grid;
  align-content: end;
  gap: 1.5rem;
  padding: calc(var(--bar) + var(--rhythm) * 0.5) var(--pad) var(--rhythm);
  background: var(--p-bg, var(--paper));
  color: var(--p-ink, var(--ink));
  margin-bottom: var(--rhythm);
}
.seri-basi h1 {
  font-size: clamp(2.6rem, 11vw, 8.5rem);
}
.seri-ozet {
  display: grid;
  gap: var(--gap);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 62rem) {
  .seri-ozet { grid-template-columns: 1fr 1fr; }
}
.kunye {
  display: grid;
  gap: 0.7rem;
  font-size: 0.85rem;
}
.kunye div {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 0.5rem 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
}
.kunye dt, .kunye .k {
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 0.68rem;
  color: var(--haze);
  padding-top: 0.22em;
}

/* Eser dizilimi: tek tip ızgara değil, ritmi değişen kurgu */
.eserler {
  display: grid;
  gap: var(--rhythm) var(--gap);
}
.eser figure { margin: 0; }
.eser img {
  width: 100%;
  background: rgba(36, 28, 24, 0.05);
}
.eser figcaption {
  margin-top: 0.9rem;
  font-size: 0.82rem;
  display: grid;
  gap: 0.15rem;
}
.eser .eser-ad { font-weight: 600; }
.eser .eser-not { color: var(--haze); }

.eser-genis { grid-column: 1 / -1; }
@media (min-width: 54rem) {
  .eserler { grid-template-columns: repeat(12, 1fr); }
  .eser-genis { grid-column: 1 / -1; }
  .eser-sol { grid-column: 1 / 8; }
  .eser-sag { grid-column: 8 / -1; align-self: end; }
  .eser-orta { grid-column: 3 / 11; }
  .eser-kucuk-sag { grid-column: 7 / 12; }
  .eser-kucuk-sol { grid-column: 2 / 7; }
}

.eser-ac {
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  cursor: zoom-in;
  display: block;
  width: 100%;
}

/* Sonraki seri */
.sonraki {
  display: block;
  text-decoration: none;
  padding: var(--rhythm) var(--pad);
  background: var(--n-bg, var(--ink));
  color: var(--n-ink, var(--paper));
  margin-top: var(--rhythm);
}
.sonraki .etiket { opacity: 0.6; }
.sonraki strong {
  display: block;
  font-family: var(--yazi-baslik, 'Anton', sans-serif);
  font-variation-settings: normal;
  text-transform: uppercase;
  font-size: clamp(2rem, 8vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin-top: 0.5rem;
  transition: font-variation-settings 420ms var(--ease);
}
.sonraki:hover strong { font-variation-settings: 'wdth' 118, 'wght' 800; }

/* --- Seri ızgarası (SERİLER sayfası) ------------------------------------ */

.izgara {
  display: grid;
  gap: 1px;
  background: var(--line);
  grid-template-columns: 1fr;
}
@media (min-width: 42rem) { .izgara { grid-template-columns: 1fr 1fr; } }
@media (min-width: 72rem) { .izgara { grid-template-columns: repeat(3, 1fr); } }

/* Kart: üstte eserin tamamı (kırpılmadan), altta okunur başlık.
   Yazı görselin üstüne binmiyor, o yüzden hiçbir eser kesilmiyor. */
.kart {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 1.1rem;
  min-height: clamp(18rem, 34vw, 26rem);
  padding: var(--pad);
  text-decoration: none;
  background: var(--p-bg, var(--paper));
  color: var(--p-ink, var(--ink));
  overflow: hidden;
}
.kart-gorsel {
  display: block;
  min-height: 0;
  overflow: hidden;
}
.kart-gorsel img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  object-position: center;
  transition: transform 900ms var(--ease);
}
.kart:hover .kart-gorsel img,
.kart:focus-visible .kart-gorsel img { transform: scale(1.04); }
.kart-ic { position: relative; display: grid; gap: 0.35rem; }
.kart h2 {
  font-family: var(--yazi-baslik, 'Anton', sans-serif);
  font-variation-settings: normal;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  line-height: 0.96;
  letter-spacing: -0.02em;
  margin: 0;
}

/* --- Büyütme katmanı ---------------------------------------------------- */

/* <dialog> kapalıyken tarayıcı display:none veriyor. Aşağıda display
   tanımlarsak o gizleme ezilir ve kutu her sayfada açık kalır; bu yüzden
   görünürlük kuralları yalnızca [open] durumuna bağlı. */
.buyutec:not([open]) { display: none; }

.buyutec[open] {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(10, 8, 14, 0.94);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
  padding: var(--pad);
  border: 0;
  color: var(--paper);
}
.buyutec::backdrop { background: rgba(10, 8, 14, 0.94); }
.buyutec img {
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  object-fit: contain;
}
.buyutec-ust { display: flex; justify-content: flex-end; }
.buyutec-alt { font-size: 0.82rem; text-align: center; opacity: 0.8; }
.buyutec button {
  appearance: none;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  padding: 0.5rem;
}

/* --- Bağlantı ve düğmeler ----------------------------------------------- */

.bag {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.18rem;
  font-size: 0.88rem;
  transition: gap 280ms var(--ease);
}
.bag:hover { gap: 0.95rem; }

.dugme {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.6rem;
  border-radius: var(--r-pill);
  background: var(--signal);
  /* Yazı rengi temadan geliyor: açık vurgu renginde beyaz kaybolurdu. */
  color: var(--signal-yazi, #fff);
  text-decoration: none;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  font-weight: 600;
  border: 0;
  cursor: pointer;
  transition: transform 200ms var(--ease), background 200ms var(--ease);
}
.dugme:hover { background: var(--signal-koyu); }
.dugme:active { transform: translateY(1px) scale(0.985); }

.dugme-sade {
  background: transparent;
  color: var(--signal);
  border: 1px solid var(--signal);
}
.dugme-sade:hover { background: var(--signal-solgun); color: var(--signal-koyu); border-color: var(--signal-koyu); }

/* Renkli panel üzerinde: düğme panelin mürekkep rengini zemin yapıyor,
   yazı da panelin zeminini. Mor üstünde mor düğme olmuyor. */
.dugme-ters {
  background: var(--p-ink, #fff);
  color: var(--p-bg, var(--signal));
  border: 1px solid var(--p-ink, #fff);
}
.dugme-ters:hover {
  background: transparent;
  color: var(--p-ink, #fff);
}

/* --- Alt bilgi ---------------------------------------------------------- */

.dip {
  border-top: 1px solid var(--line);
  padding: var(--rhythm) var(--pad) calc(var(--pad) * 1.4);
  display: grid;
  gap: var(--gap);
}
.dip-ust {
  display: grid;
  gap: var(--gap);
}
@media (min-width: 54rem) {
  .dip-ust { grid-template-columns: 1.4fr 1fr; align-items: start; }
}
.dip-ad {
  font-family: var(--yazi-baslik, 'Anton', sans-serif);
  font-variation-settings: normal;
  text-transform: uppercase;
  font-size: clamp(2rem, 7vw, 4.5rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
  margin: 0;
}
.dip-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.dip-liste a { text-decoration: none; }
.dip-liste a:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.dip-son {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding-top: 1.1rem;
  font-size: 0.75rem;
  color: var(--haze);
}

/* --- İletişim formu ----------------------------------------------------- */

.form { display: grid; gap: 1.4rem; max-width: 34rem; }
.alan { display: grid; gap: 0.45rem; }
.alan label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
}
.alan input, .alan textarea {
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(36, 28, 24, 0.38);
  border-radius: var(--r);
  padding: 0.8rem 0.95rem;
}
.alan textarea { min-height: 9rem; resize: vertical; }
.alan input::placeholder, .alan textarea::placeholder { color: #6b5a52; }
.alan input:focus-visible, .alan textarea:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 1px;
  border-color: var(--signal);
}
.alan .yardim { font-size: 0.78rem; color: var(--haze); }
.alan .hata { font-size: 0.78rem; color: var(--uyari); font-weight: 600; }
.alan[data-hatali='true'] input,
.alan[data-hatali='true'] textarea { border-color: var(--uyari); }

/* --- Boş durum ---------------------------------------------------------- */

.bos {
  border: 1px dashed var(--line);
  padding: clamp(2rem, 6vw, 4rem);
  display: grid;
  gap: 0.8rem;
  justify-items: start;
  color: var(--haze);
}

/* --- Kaydırma ile beliren bloklar --------------------------------------- */

.js .bel {
  opacity: 0;
  transform: translateY(1.4rem);
  transition: opacity 720ms var(--ease), transform 900ms var(--ease);
}
.js .bel.gorunur { opacity: 1; transform: none; }

/* --- Hareket azaltma ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .panel-baslik .satir > span,
  .panel-meta, .panel-eser, .altyazi, .bel {
    opacity: 1 !important;
    transform: none !important;
  }
  /* Noktalar duruyor ama görünür kalıyor; içerik kaybolmuyor. */
  .noktalar i {
    animation: none !important;
    opacity: var(--op) !important;
    transform: none !important;
  }
  .menu { transition: none; }
}

/* --- Dar ekran ---------------------------------------------------------- */

@media (max-width: 53.999rem) {
  :root {
    --panel-yazi-boy: clamp(1.4rem, 7.5vw, 2.3rem);
  }

  /* Telefon ve tablette de her kaydırışta bir panel gelsin. */
  .ray { display: none; }
  .kunye div { grid-template-columns: 1fr; gap: 0.15rem; }
  .eserler { grid-template-columns: 1fr; }

  /* Yatay eser dikey ekranı dolduramaz. Görseli esnetmek yerine eseri ve
     künyeyi ortada kümeleyip boşluğu yukarı-aşağı eşit dağıtıyoruz;
     eser rengiyle çerçevelenmiş gibi duruyor. */
  .panel:not(.panel-kapak) {
    min-height: 45dvh !important;
  }
  .panel:not(.panel-kapak) .panel-ic {
    grid-template-rows: auto auto auto;
    align-content: center;
    gap: 0.6rem;
    padding-top: calc(var(--bar) * 0.4 + var(--pad) * 0.2) !important;
    padding-bottom: calc(var(--pad) * 0.3) !important;
    block-size: 45dvh !important;
    min-block-size: 45dvh !important;
  }
  .panel-kapak {
    min-height: 80dvh !important;
  }
  .panel-kapak .panel-ic {
    block-size: 80dvh !important;
    min-block-size: 80dvh !important;
  }
  /* Dar ekranda genişlik belirleyici; kutu oranını koruyup yüksekliği
     kendi buluyor. Noktalar yine eserin üstünde kalıyor. */
  .eser-kutu {
    block-size: auto;
    inline-size: 100%;
    max-block-size: 24dvh !important;
  }
  .panel-eser {
    block-size: 100%;
    max-block-size: 24dvh !important;
    align-self: center;
  }
}

/* --- Sayfalar arası geçiş: defter yaprağı -------------------------------
   Panel başlığına tıklayınca seri sayfası ALTTAN yukarı kayarak geliyor;
   geri dönünce aynı yaprak aşağı inip altındaki sayfayı ortaya çıkarıyor.

   Belge-arası (cross-document) görünüm geçişi kullanılıyor: iki ayrı HTML
   dosyası arasında çalışıyor, tek sayfalık bir uygulamaya çevirmek
   gerekmiyor. Destekleyen tarayıcıda animasyon oluyor, desteklemeyende
   sayfa eskisi gibi anında açılıyor; kırılan bir şey yok.

   Yönü site.js belirliyor: ileri mi gidiyoruz yoksa geçmişte geri mi
   (pagereveal/pageswap olaylarında tür ekleniyor). */
@view-transition { navigation: auto; }

@keyframes yaprak-yukari {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
@keyframes yaprak-asagi {
  from { transform: translateY(0); }
  to { transform: translateY(100%); }
}
/* Altta kalan sayfa tümden hareketsiz durmuyor: az miktarda karşı yönde
   kayıyor. Derinlik hissi bundan geliyor; iki yaprak arasında boşluk
   açılmıyor. */
@keyframes yaprak-geride {
  from { transform: translateY(0); }
  to { transform: translateY(-12%); }
}
@keyframes yaprak-geriden {
  from { transform: translateY(-12%); }
  to { transform: translateY(0); }
}

/* İleri: yeni sayfa üstte, alttan yukarı. */
html:active-view-transition-type(ileri)::view-transition-old(root) {
  animation: yaprak-geride 560ms var(--ease) both;
  z-index: 1;
}
html:active-view-transition-type(ileri)::view-transition-new(root) {
  animation: yaprak-yukari 560ms var(--ease) both;
  z-index: 2;
}

/* Geri: ayrılan sayfa üstte kalıp aşağı iniyor, altındaki geri geliyor. */
html:active-view-transition-type(geri)::view-transition-old(root) {
  animation: yaprak-asagi 560ms var(--ease) both;
  z-index: 2;
}
html:active-view-transition-type(geri)::view-transition-new(root) {
  animation: yaprak-geriden 560ms var(--ease) both;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  html::view-transition-old(root),
  html::view-transition-new(root) { animation: none; }
}

/* Görünüm geçişini desteklemeyen tarayıcı için yedek: sayfanın kendisi
   alttan yukarı kayarak açılıyor, geçmişte geri gidilince yukarıdan
   iniyor. Yalnız GİRİŞ canlandırılıyor; ayrılan sayfayı beklemek gezinmeyi
   geciktirir ve iptal edilebilir bir gezinmede yarım kalırdı.

   Sınıfı site.js koyuyor ve animasyon bitince kaldırıyor. Son karede
   dönüşüm "none": sabit konumlu çubuk yalnızca animasyon boyunca sayfayla
   birlikte hareket ediyor, sonrasında ekrana sabit kalmaya dönüyor. */
@keyframes sayfa-alttan {
  from { transform: translateY(100%); }
  to { transform: none; }
}
@keyframes sayfa-ustten {
  from { transform: translateY(-16%); }
  to { transform: none; }
}
html.sayfa-giris body { animation: sayfa-alttan 520ms var(--ease) both; }
html.sayfa-geri body { animation: sayfa-ustten 520ms var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
  html.sayfa-giris body,
  html.sayfa-geri body { animation: none; }
}

/* --- Ana sayfaya gömülü seri katmanı ------------------------------------
   Seri sayfaları ayrı belge olarak da duruyor (doğrudan adresle gelen ve
   arama motoru için), ama ana sayfadan tıklandığında burada açılıyorlar.
   Yeniden yükleme olmadığı için panelden içeriğe geçiş kesintisiz.

   Katman ekranı tam kaplıyor ve kendi zeminini taşıyor; alttaki panel
   akışı yerinde duruyor, kapanınca aynı yere dönülüyor. */
.seri-katman {
  position: fixed;
  inset: 0;
  z-index: 80;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--sayfa-bg, var(--paper));
  color: var(--sayfa-ink, var(--ink));
  /* Betik yokken katman hidden kalıyor; bağlantılar ayrı sayfaya gidiyor. */
  animation: katman-gir 520ms var(--ease) both;
}
.seri-katman[hidden] { display: none; }

/* Kapanışta aşağı iniyor. Sınıfı site.js koyuyor ve animasyon bitince
   katmanı gizliyor; hidden'ı hemen koyarsak animasyon hiç görünmüyor. */
.seri-katman.kapaniyor { animation: katman-cik 460ms var(--ease) both; }

@keyframes katman-gir {
  from { transform: translateY(100%); }
  to { transform: none; }
}
@keyframes katman-cik {
  from { transform: none; }
  to { transform: translateY(100%); }
}

.katman-ic { padding-block-end: var(--rhythm); }

/* Kapat düğmesi katmanın kendi rengini giyiyor. */
.katman-kapat {
  position: fixed;
  inset-block-start: calc(var(--bar) * 0.34);
  inset-inline-end: var(--pad);
  z-index: 2;
  appearance: none;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: var(--sayfa-ink, var(--ink));
  font: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.5rem 1.1rem;
  cursor: pointer;
  transition: background 240ms var(--ease), color 240ms var(--ease);
}
.katman-kapat:hover,
.katman-kapat:focus-visible {
  background: var(--sayfa-ink, var(--ink));
  color: var(--sayfa-bg, var(--paper));
}

/* Katman açıkken arkadaki akış kaydırılmıyor. */
html.katman-acik body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .seri-katman,
  .seri-katman.kapaniyor { animation: none; }
}

/* --- Proje listesi (çubuktaki "Projects") --------------------------------
   Ekranı kaplayan liste. Telefondaki tam ekran menüyle aynı mantık ama
   masaüstünde de aynı: seriler solda alt alta, sağ taraf boş kalıyor.
   Boşluk bilerek: göz tek sütunda yukarıdan aşağı iniyor, listeyi taramak
   için satır atlamak gerekmiyor. */
.proje-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  align-content: center;
  padding: calc(var(--bar) + var(--pad)) var(--pad) var(--pad);
  /* Perdenin kendi zemini var, dolayısıyla mürekkebi de kendi zeminine
     göre olmalı. Panelin derisini almak okunmuyordu: kapakta deri
     "krem zemin üstünde turkuaz" değil, "fotoğraf üstünde turkuaz". */
  background: var(--paper);
  color: var(--ink);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Kendi katman bağlamı: arkadaki renk lekeleri listenin altında kalıyor. */
  isolation: isolate;
  /* Perde bir yaprak gibi: yukarıdan iniyor, yukarı çekilerek kapanıyor. */
  animation: proje-gir 520ms var(--ease) both;
}
.proje-menu[hidden] { display: none; }
.proje-menu.kapaniyor { animation: proje-cik 460ms var(--ease) both; }

@keyframes proje-gir {
  from { transform: translateY(-100%); }
  to { transform: none; }
}
@keyframes proje-cik {
  from { transform: none; }
  to { transform: translateY(-100%); }
}

/* --- Perdenin arkası: gezinen renk lekeleri ------------------------------
   Beş seri rengi bulanık dairelere dağılıyor, her biri ayrı hızda ve ayrı
   yönde dolaşıyor. Zemin kremin üstünde durduğu için lekeler düşük
   opaklıkta: yazının karşıtlığı bozulmuyor. */
.proje-fon {
  position: absolute;
  inset: 0;
  /* Negatif z-index olmuyor: perdenin kendi krem zemininin ARKASINA
     düşer ve hiç görünmez. Sıfırda kalıp yazıyı bir üste alıyoruz. */
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* Lekeler birbirine karışsın; tek tek daireler yerine akan bir yüzey. */
  filter: blur(38px) saturate(1.15);
}
.proje-fon i {
  position: absolute;
  inline-size: 46vmax;
  block-size: 46vmax;
  border-radius: 50%;
  opacity: 0.34;
  will-change: transform;
  animation: proje-leke var(--sure, 26s) var(--ease) infinite alternate;
  animation-delay: var(--gec, 0s);
}
.proje-fon i:nth-child(1) { background: var(--p1, #7ab800); inset-block-start: -14vmax; inset-inline-start: -10vmax; --sure: 24s; }
.proje-fon i:nth-child(2) { background: var(--p2, #d6357f); inset-block-start: 30%; inset-inline-start: 46%; --sure: 31s; --gec: -6s; }
.proje-fon i:nth-child(3) { background: var(--p3, #ffc24d); inset-block-end: -18vmax; inset-inline-start: 8%; --sure: 27s; --gec: -12s; }
.proje-fon i:nth-child(4) { background: var(--p4, #ba0f42); inset-block-start: -8vmax; inset-inline-end: -12vmax; --sure: 34s; --gec: -3s; }
.proje-fon i:nth-child(5) { background: var(--p5, #9d6311); inset-block-end: -10vmax; inset-inline-end: 4%; --sure: 29s; --gec: -18s; }

@keyframes proje-leke {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(12vmax, -9vmax, 0) scale(1.28); }
}

.proje-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  align-self: center;
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(0.15rem, 1.1vh, 0.7rem);
  /* Liste solda kalıyor; satırlar içeriği kadar geniş, dolayısıyla
     tıklama alanı da yazının kendisi kadar. */
  justify-items: start;
}
.proje-liste li {
  opacity: 0;
  transform: translateY(0.5em);
  animation: proje-satir 420ms var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 60ms + 90ms);
}
@keyframes proje-satir {
  to { opacity: 1; transform: none; }
}

.proje-liste a {
  display: flex;
  align-items: baseline;
  gap: clamp(0.6rem, 1.6vw, 1.4rem);
  text-decoration: none;
  color: inherit;
  font-family: var(--yazi-baslik, 'Archivo', sans-serif);
  font-variation-settings: 'wdth' 92, 'wght' 700;
  text-transform: uppercase;
  font-size: clamp(1.6rem, 6.5vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  transition: color 240ms var(--ease), font-variation-settings 300ms var(--ease);
}
.proje-liste a:hover,
.proje-liste a:focus-visible {
  /* Her serinin kendi rengi burada da geçerli: listede hangi projeye
     bakıldığı renkten anlaşılıyor. */
  color: var(--oge-renk, currentColor);
  font-variation-settings: 'wdth' 104, 'wght' 800;
}


.proje-kapat {
  position: fixed;
  z-index: 2;
  inset-block-start: calc(var(--bar) * 0.34);
  inset-inline-end: var(--pad);
  appearance: none;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.45rem 1rem;
  cursor: pointer;
}
.proje-kapat:hover,
.proje-kapat:focus-visible {
  background: var(--ink);
  color: var(--paper);
}

html.proje-acik body { overflow: hidden; }

/* Liste açıkken sanatçının adı kaybolmuyor. Kopyasını çizmiyoruz: gerçek
   çubuğu perdenin üstüne alıyoruz, böylece logotip milim şaşmadan kendi
   yerinde kalıyor. Çubuğun geri kalanı (geniş menü, menü düğmesi) liste
   açıkken işlevsiz — kapatma perdenin kendi düğmesinde. */
html.proje-acik .cubuk { z-index: 95; color: var(--ink); }
/* Kapak panelinde logotip gizli (adın irisi zaten ekranda). Liste
   açılınca o iri ad perdenin altında kalıyor, dolayısıyla logotip geri
   gelmeli. */
html.proje-acik.kapakta .marka {
  opacity: 1;
  transform: none;
  max-block-size: 8rem;
  pointer-events: auto;
}
html.proje-acik .cubuk .genis-menu,
html.proje-acik .cubuk .menu-dugme {
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms linear;
}
/* Çubuk perdenin üstünde olduğu için tıklamaları da yutuyordu: .cubuk-ust
   tüm genişliği kaplıyor ve sağ üstteki Close düğmesinin önüne geçiyordu.
   Liste açıkken çubukta yalnız logotip tıklanabilir kalıyor. */
html.proje-acik .cubuk > * { pointer-events: none; }
html.proje-acik .cubuk .marka {
  pointer-events: auto;
  /* Sağ üstteki Close'a yer bırakıyor: dar ekranda logotip oraya kadar
     uzanıp düğmenin üstüne biniyordu. */
  max-inline-size: calc(100% - 7rem);
}

@media (prefers-reduced-motion: reduce) {
  .proje-menu,
  .proje-menu.kapaniyor { animation: none; }
  .proje-liste li { opacity: 1; transform: none; animation: none; }
  .proje-fon i { animation: none; }
}

/* Metnin içine panelden eklenen görsel ([gorsel=…]). Paragraf akışını
   bölmesin diye kendi satırında duruyor ve kabın genişliğini aşmıyor. */
/* Metnin içine konan görsel de belli bir alanı geçmiyor: dikey bir iş
   sayfayı baştan sona kaplamasın. --- İŞARET: gorsel-alani --- */
.metin-gorsel {
  display: block;
  inline-size: auto;
  block-size: auto;
  max-inline-size: min(100%, 42rem);
  max-block-size: 70svh;
  object-fit: contain;
  margin: 1.4rem 0;
}
.govde .metin-gorsel { margin-inline: auto; }

/* --- Alt sayfalarda metin rengi = çubuk rengi ---------------------------
   Hakkında, atölye, iletişim ve 404'te üst çubuk o sayfanın mürekkebini
   kullanıyordu ama başlıklar ve metin tema mürekkebinde kalıyordu; iki
   ayrı renk görünüyordu. Artık sayfanın tamamı çubukla aynı renkte.
   Ana sayfa ve seri sayfaları hariç: onların kendi renk kurguları var
   (panelden ölçülen deri / sayfaRenk). */
html:not(.anasayfa):not(.seri-sayfa) body {
  color: var(--skin-ink, var(--ink));
}
html:not(.anasayfa):not(.seri-sayfa) .kunye dt,
html:not(.anasayfa):not(.seri-sayfa) .kunye .k,
html:not(.anasayfa):not(.seri-sayfa) .eser-not,
html:not(.anasayfa):not(.seri-sayfa) .bos,
html:not(.anasayfa):not(.seri-sayfa) .alan .yardim,
html:not(.anasayfa):not(.seri-sayfa) .dip {
  /* Soluk gri yerine aynı rengin soluğu: renk birliği bozulmuyor. */
  color: color-mix(in srgb, var(--skin-ink, var(--ink)) 72%, transparent);
}
html:not(.anasayfa):not(.seri-sayfa) .sayfa-basi,
html:not(.anasayfa):not(.seri-sayfa) .bolum,
html:not(.anasayfa):not(.seri-sayfa) .eserler {
  border-color: color-mix(in srgb, var(--skin-ink, var(--ink)) 28%, transparent);
}

/* --- Telefon uyarlaması (yoğun) -----------------------------------------
   Ölçüler dvh yerine svh: mobil tarayıcının adres çubuğu kaydırınca
   büyüyüp küçülüyor, dvh ile paneller her kaydırışta zıplıyor ve alt
   kenar taşıyordu. svh en küçük hâli baz alır, düzen sabit kalır.

   Panel başına bir ekran şartı yok: ekranda 1,5–2 panel görünüyor ama
   başlık ve eser okunur kalacak kadar büyük. */
@media (max-width: 53.999rem) {
  .panel:not(.panel-kapak),
  .panel:not(.panel-kapak) .panel-ic {
    min-height: 56svh !important;
    block-size: auto !important;
    min-block-size: 56svh !important;
  }
  /* Kapak eseri telefonda kırpılmadan sığdırılıyor: yatay bir kolaj
     dar ekranda alçak bir bant oluyor. Panel de o yüzden kısalıyor,
     altında kocaman boş beyaz kalmıyor. */
  .panel-kapak,
  .panel-kapak .panel-ic {
    min-height: 56svh !important;
    block-size: auto !important;
    min-block-size: 56svh !important;
  }

  :root {
    /* Başlık ekranın enine göre; 28 px'e sıkışmıyor. */
    --panel-yazi-boy: clamp(1.9rem, 11vw, 3.4rem);
  }

  .eser-kutu,
  .panel-eser { max-block-size: 32svh !important; }

  /* Kapaktaki ad: dar ekranda kelimeler alt alta, kenardan taşmıyor. */
  .kapak-ad {
    font-size: clamp(1.6rem, 9.5vw, 3rem);
    padding-inline: var(--pad);
    max-inline-size: 100%;
    overflow-wrap: anywhere;
  }
  .kapak-ad .ad-kelime { --gx: 12vw; }

  /* Kayan şerit: 5 satır telefonda 60 px'lik pullara düşüyordu. Üç satır
     kalıyor, kareler iki kat büyük görünüyor. */
  .serit-yigin { grid-template-rows: repeat(3, 1fr) !important; }
  .serit:nth-child(n + 4) { display: none; }

  /* Künye satırı sığmayınca alt alta insin, yatay kaydırma yaratmasın. */
  .panel-meta {
    flex-wrap: wrap;
    row-gap: 0.25rem;
    justify-content: center;
  }

  /* Uzun başlıklar kelime ortasından bölünebilsin: tek uzun kelime
     (MULTIFARIOUS gibi) ekranı yatay olarak taşırıyordu. */
  .panel .yazi-ic,
  .panel .duz-satir,
  .panel .firca-yazi,
  .baslik { overflow-wrap: anywhere; }

  /* Tek satırlık başlık telefonda da TEK SATIR kalıyor; sığmıyorsa
     satır sarması değil, punto küçülüyor (site.js > basliklariSigdir). */

  /* Sayfa içi ölçüler: kenar boşluğu daralıyor, metin sütunu tam ene
     yayılıyor. */
  .kap { padding-inline: var(--pad); }
  .sayfa-basi h1 { font-size: clamp(1.8rem, 9vw, 2.6rem); }
  .govde { max-width: none; }
  .form { max-width: none; }

  /* Dokunma hedefleri: 44 px'in altına düşen bağlantı/düğme kalmasın. */
  .menu-liste a,
  .dip a,
  .menu-alt a,
  .menu-kapat,
  .menu-dugme,
  .marka,
  .proje-kapat,
  .katman-kapat,
  .dugme { min-block-size: 44px; display: inline-flex; align-items: center; }
  .marka { flex-direction: column; align-items: flex-start; justify-content: center; }
  .menu-alt { gap: 0.2rem; }
}

/* Çok dar (küçük telefon: 352 px ve altı) */
@media (max-width: 22rem) {
  :root { --panel-yazi-boy: clamp(1.7rem, 12vw, 2.8rem); }
  .panel:not(.panel-kapak),
  .panel:not(.panel-kapak) .panel-ic {
    min-height: 52svh !important;
    min-block-size: 52svh !important;
  }
  .eser-kutu,
  .panel-eser { max-block-size: 28svh !important; }
  .serit-yigin { grid-template-rows: repeat(2, 1fr) !important; }
  .serit:nth-child(n + 3) { display: none; }
}

/* Yatay tutulan telefon: yükseklik az, panel boyu ekrana göre kısalıyor. */
@media (max-height: 30rem) and (orientation: landscape) {
  .panel:not(.panel-kapak),
  .panel:not(.panel-kapak) .panel-ic {
    min-height: 92svh !important;
    min-block-size: 92svh !important;
  }
  .panel-kapak,
  .panel-kapak .panel-ic {
    min-height: 96svh !important;
    min-block-size: 96svh !important;
  }
  .eser-kutu, .panel-eser { max-block-size: 52svh !important; }
}

/* --- Colors başlığı: gölge yok ------------------------------------------
   Başlık artık tek düz renk; çok katlı gölge (koyu + beyaz hâle + pembe/
   mavi parıltı) o desenli hâl için vardı, düz renkte kirli duruyor. */
.firca-golge,
.panel.firca-ciz .firca-golge { filter: none; }

/* --- Açılan seri katmanında üst çubuk görünsün --------------------------
   Katman ekranı kaplayınca çubuk altında kalıyordu; sitede olduğunu
   gösteren tek şey oydu. Çubuk katmanın üstüne alınıyor, rengini de
   katmanın kendi mürekkebinden alıyor. Menü ve logotip çalışmaya devam
   ediyor, kapatma düğmesi çubuğun sağındaki boşlukta duruyor. */
html.katman-acik .cubuk {
  z-index: 90;
  color: var(--katman-ink, var(--sayfa-ink, var(--ink)));
}
/* Kapak panelindeyken logotip gizli (iri ad zaten ekranda). Katman
   açılınca o ad perdenin altında kalıyor, logotip geri gelmeli. */
html.katman-acik.kapakta .marka {
  opacity: 1;
  transform: none;
  max-block-size: 8rem;
  pointer-events: auto;
}
html.katman-acik .cubuk > * { pointer-events: none; }
html.katman-acik .cubuk .marka,
html.katman-acik .cubuk .genis-menu,
html.katman-acik .cubuk .menu-dugme { pointer-events: auto; }
/* Kapatma düğmesi çubuğun üstünde kalsın. */
.katman-kapat { z-index: 95; }

/* --- About: üstte görsel, yanında geniş metin ---------------------------
   İki sütun: solda eser/portre, sağda başlık ve tanıtım. Metin sütunu dar
   bir şeride sıkışmıyor; dar ekranda alt alta iniyor. */
.hakkinda-basi {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.4rem, 4vw, 3.4rem);
  align-items: center;
  padding-block: clamp(1.6rem, 5vh, 3.4rem);
}
.hakkinda-gorsel { margin: 0; }
.hakkinda-gorsel {
  position: relative;
  aspect-ratio: 4 / 5;
  background: color-mix(in srgb, currentColor 5%, transparent);
  overflow: hidden;
}
.hakkinda-gorsel img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  display: block;
}
.hakkinda-giris { display: grid; gap: 1rem; align-content: center; }
.hakkinda-giris .baslik {
  font-size: clamp(2.4rem, 7vw, 5rem);
  line-height: 0.95;
}
.hakkinda-ozet { max-width: 46ch; font-size: 1.08em; }
.hakkinda-giris .bag {
  text-decoration: none;
  border-block-end: 1px solid currentColor;
  padding-block-end: 0.15rem;
}

.ozgecmis .govde { max-width: 60ch; }

@media (max-width: 53.999rem) {
  .hakkinda-basi { grid-template-columns: 1fr; }
  .hakkinda-gorsel { aspect-ratio: 3 / 2; }
}

/* --- Uzun metin: "Show more" -------------------------------------------
   Metin belli bir yükseklikten uzunsa kırpılıyor ve düğmeyle açılıyor.
   Betik yoksa düğme gizli kalıyor ve metnin tamamı görünüyor: kırpma
   yalnız site.js sınıfı koyduğunda devreye giriyor. */
.uzun-metin { display: grid; gap: 0.9rem; justify-items: start; }
.uzun-metin-ic { max-width: 68ch; }
.uzun-metin[data-kirpik='true'] .uzun-metin-ic {
  max-block-size: 15.5em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 70%, transparent);
  mask-image: linear-gradient(#000 70%, transparent);
}
.uzun-metin[data-kirpik='false'] .uzun-metin-ic {
  max-block-size: none;
  -webkit-mask-image: none;
  mask-image: none;
}

/* --- Seri sayfası: üstte tek kapak eseri -------------------------------- */
.seri-kapak {
  margin: 0;
  padding-inline: var(--pad);
  padding-block-start: clamp(1rem, 3vh, 2.2rem);
}
.seri-kapak img {
  inline-size: 100%;
  block-size: auto;
  max-block-size: 78svh;
  object-fit: contain;
  display: block;
  margin-inline: auto;
}

/* Sayfa içi tek görsel (iletişim, gerekirse başka sayfalar). */
.sayfa-gorsel { margin: clamp(1rem, 3vh, 2rem) 0; }
.sayfa-gorsel img {
  inline-size: auto;
  block-size: auto;
  max-inline-size: 100%;
  max-block-size: 60svh;
  object-fit: contain;
  display: block;
  margin-inline: auto;
}

/* About sayfasındaki bölüm başlıkları büyük harf: EXHIBITIONS, PROJECTS… */
.ozgecmis .baslik,
.bolum.bel > .baslik {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* --- Eser akışı: her iş aynı büyüklükte bir alanda ---------------------
   --- İŞARET: eser-akisi ---
   Her esere aynı ölçüde bir yer ayrılıyor; iş o yerin içine sığdığı kadar
   büyüyor. Yatay iş alanın enini, dikey iş boyunu doldurur; ikisi de
   kırpılmaz, esnetilmez ve alandan taşmaz. Böylece kaç eser eklenirse
   eklensin liste düzgün bir ızgara olarak kalıyor. */
.eserler {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: var(--rhythm, 2rem) var(--gap, 1.2rem);
  align-items: start;
}
.eserler .eser { min-inline-size: 0; }
.eserler .eser figure { display: grid; gap: 0; margin: 0; }

/* Ayrılan alan: oranı sabit, içinde iş ortalanıyor. */
.eserler .eser .eser-ac {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  background: color-mix(in srgb, currentColor 5%, transparent);
  overflow: hidden;
}
/* Görsel alanın içine mutlak yerleşiyor: oranla kurulan bir kutuda
   yüzdelik yükseklik güvenilir çözülmüyor, iş kutudan taşıyordu. */
.eserler .eser img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  display: block;
  background: none;
}
/* Açıklama görselin hemen altında, küçük. */
.eserler .eser figcaption {
  margin-top: 0.55rem;
  font-size: 0.78rem;
  line-height: 1.35;
}

@media (max-width: 40rem) {
  /* Telefonda tek sütun: iki dar alan yan yana okunmuyor. */
  .eserler { grid-template-columns: 1fr; }
  .eserler .eser .eser-ac { aspect-ratio: 3 / 2; }
}

/* --- Seri sayfası başlığı: yanında kapak eseri -------------------------
   --- İŞARET: seri-basligi ---
   Başlık solda, serinin temsilci eseri sağda. Dar ekranda görsel başlığın
   altına iniyor. */
.seri-basi-ic {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.2rem, 4vw, 3rem);
  align-items: center;
  inline-size: 100%;
}
.seri-basi-gorselli .seri-basi-ic {
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
}
.seri-basi-yazi { min-inline-size: 0; }
.seri-teknik { margin: 0.8rem 0 0; opacity: 0.7; }
.seri-basi-kapak { margin: 0; }
.seri-basi-kapak img {
  inline-size: 100%;
  block-size: auto;
  max-block-size: 58svh;
  object-fit: contain;
  display: block;
}

/* Eser yokken tek satırlık bilgi; kocaman boş kutu değil. */
.eserler-bos {
  margin: 0;
  color: color-mix(in srgb, currentColor 65%, transparent);
  font-size: 0.95rem;
}

@media (max-width: 53.999rem) {
  .seri-basi-gorselli .seri-basi-ic { grid-template-columns: 1fr; }
  .seri-basi-kapak img { max-block-size: 42svh; }
}

/* --- Seri sayfalarında çubuk toplanmış hâlde ----------------------------
   --- İŞARET: seri-cubuk ---
   Ana sayfada çubuk en üstte iriyken kaydırınca toplanıyor. Seri
   sayfasında kaydırılacak bir kapak yok; çubuğun iri hâlde açılıp
   sayfanın üçte birini yemesi gereksiz. Burada doğrudan toplanmış ölçüyle
   başlıyor — ana sayfanın 2. paneline indiğindeki hâl.

   Renk buna dâhil değil: sayfanın kendi mürekkebi (--skin-ink) geçerli ve
   sayfa boyunca değişmiyor. */
/* Menü satırı da ana sayfadaki toplanmış ölçüde kalsın. */
html.seri-sayfa .genis-menu a { font-size: clamp(0.85rem, 1.15vw, 1.06rem); }

html.seri-sayfa .cubuk {
  --cubuk-dolgu: 0.85rem;
  --cubuk-dolgu-alt: 0.85rem;
  --cubuk-ara: 0.35rem;
  --marka-boy: clamp(1.5rem, 3.1vw, 2.6rem);
  --marka-wdth: 82;
  --marka-aralik: -0.045em;
}