/* ==========================================================================
   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: 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). */
@font-face {
  font-family: 'Alfa Slab One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/alfaslab-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: 'Alfa Slab One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/alfaslab-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;
}
/* Sekuya tek ağırlıklı (400) bir gösteri yazı tipi; Mycorrhiza panelinin
   başlığında kullanılıyor. Türkçe "İ" (U+0130) latin-ext alt kümesinde,
   o yüzden iki yüz de gerekiyor. */
@font-face {
  font-family: 'Sekuya';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/sekuya-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: 'Sekuya';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/sekuya-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;
}

/* Fredoka: yuvarlak, dolgun hatlı gösteri yazı tipi; Colors panelinin
   buzlu cam başlığında kullanılıyor. Değişken ağırlık 300-700. */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/fredoka-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: 'Fredoka';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/fredoka-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);
  --skin-t: 620ms;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--yazi-govde, 'Space Grotesk', system-ui, sans-serif);
  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, 'Archivo', sans-serif);
  font-variation-settings: 'wdth' var(--t-wdth, 100), 'wght' var(--t-wght, var(--baslik-kalin, 800));
  font-weight: var(--baslik-kalin, 800);
  font-style: var(--baslik-italik, normal);
  text-transform: var(--baslik-buyuk, uppercase);
  letter-spacing: var(--baslik-aralik, -0.018em);
  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). */
  transition: color var(--skin-t) var(--ease),
    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 busraaydagun.com'daki gibi: orta kalınlıkta, dar ve çok sıkı
   harf aralıklı tek satır. Referansta ad, punto başına ~0,48 em yer
   kaplıyor; Archivo'da bunu wdth 74 + -0,055 em aralık veriyor. */
.marka {
  font-family: var(--yazi-baslik, 'Archivo', sans-serif);
  font-variation-settings: 'wdth' var(--marka-wdth, 76), 'wght' var(--marka-kalin, 600);
  font-weight: var(--marka-kalin, 600);
  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; }

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

/* Dar ekranda gizli; yerini üç çizgi düğmesi alıyor. */
.genis-menu { display: none; }
.genis-menu ul {
  display: flex;
  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);
  font-family: var(--yazi-baslik, 'Archivo', sans-serif);
  font-variation-settings: 'wdth' 88, '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; }

.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);
}
.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 {
  font-family: 'Archivo', sans-serif;
  font-variation-settings: 'wdth' 96, '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; }

.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'] .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. */
@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;
  grid-template-rows: repeat(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;
  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;
  inset-inline-start: var(--pad);
  /* Solda ve dikeyde tam ortada. */
  inset-block-start: 50%;
  transform: translateY(-50%);
  margin: 0;
  text-align: start;
  /* 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: min(24vw, 23vh);
  line-height: 0.8;
  letter-spacing: -0.035em;
  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, clamp(2.6rem, 12vw, 8rem));
  line-height: 0.84;
  /* 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. */
.firca-yazi {
  position: absolute;
  inset: 0;
  margin: auto;
  inline-size: 94%;
  block-size: auto;
  max-block-size: 46vh;
  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. */
.firca-boya {
  filter: drop-shadow(0 2.5px 3px rgba(74, 55, 38, 0.3))
    drop-shadow(0 8px 14px rgba(74, 55, 38, 0.22));
}

/* 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;
}

@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;
  color: #fff;
  mix-blend-mode: difference;
  filter: blur(0.35px);
}

/* 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;
}

/* Panel başlığı */
.panel-baslik {
  font-size: clamp(2.1rem, min(11.2vw, 15.5vh), 9.5rem);
  --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;
}
.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: 0.85rem;
  color: var(--skin-ink);
  transition: color var(--skin-t) var(--ease);
}
.ray a {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  text-decoration: none;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.ray .ad {
  opacity: 0;
  transform: translateX(0.5rem);
  transition: opacity 260ms var(--ease), transform 260ms var(--ease);
  white-space: nowrap;
}
.ray a:hover .ad,
.ray a:focus-visible .ad { opacity: 1; transform: none; }
.ray .im {
  display: block;
  width: 14px;
  height: 2px;
  background: currentColor;
  opacity: 0.34;
  transition: width 420ms var(--ease), opacity 420ms var(--ease);
}
.ray a[aria-current='true'] .im { width: 30px; 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-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: 'Archivo', sans-serif;
  font-variation-settings: 'wdth' 100, 'wght' 800;
  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: 'Archivo', sans-serif;
  font-variation-settings: 'wdth' 92, 'wght' 800;
  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: 'Archivo', sans-serif;
  font-variation-settings: 'wdth' 76, 'wght' 800;
  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) {
  /* 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-ic {
    grid-template-rows: auto auto auto;
    align-content: center;
    gap: clamp(1.1rem, 3.2vh, 2rem);
  }
  /* 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: 62dvh;
  }
  .panel-eser {
    block-size: 100%;
    max-block-size: 62dvh;
    align-self: center;
  }
}