/* ============================================================
   Sofart Dergi — VİTRİN stil katmanı
   ------------------------------------------------------------
   `panel.css` /panel ve kimlik ekranlarını giydirir, bu dosya genel
   sayfaları. İkisi AYNI tasarım dilini (renk, tipografi, üst menü)
   paylaşır — yalnızca bileşen kütüphaneleri farklıdır (tablo/form gibi
   panele özgü öğeler panel.css'te yaşar, vitrine özgü büyük yerleşimler
   burada). Ortak kök değişkenler `tokens.css`'tedir, ikisi de onu okur.

   Ses:
   · Başlıklar KÜÇÜK HARFLE yazılır ve altları altın çizilir. Küçük harf
     Blade'de metnin kendisinde durur, CSS `text-transform` ile DEĞİL:
     Türkçede büyük/küçük dönüşümü (İ/ı) tarayıcıya bırakılmaz.
   · Eser başlıkları ve kişi adları KENDİ yazımını korur — küçültülmez.
   · Parlak altın (--gold) yalnızca dolgu ve çizgide; metinde okunur
     karşılığı (--gold-deep) kullanılır.
   ============================================================ */

@import url("fonts.css");
@import url("tokens.css");
@import url("header.css");
/* Editörün ürettiği figür sunum sınıfları (hizalama, sarma, genişlik) —
   panelle ORTAK tek kaynak, bkz. govde.css. Yayınlanan yazı editördeki
   görünümün aynısı olmak zorunda. */
@import url("govde.css");

:root {
  /* Renk, tipografi, --edge ve --govde artık tokens.css'te (panel.css ile ortak) */

  /* Vitrine özgü ızgara ölçüleri — panel bunları kullanmaz */
  --gut: clamp(1.1rem, 2.2vw, 2.25rem);
  --band: clamp(3rem, 6vw, 5.5rem);

  /* TEK SOL KENAR: gövde, üst menü, başlıklar ve çizgiler 1200px'te aynı
     çizgiden başlar. Başlıkların her iki yandan 20px taştığı `--taskin`
     (1240px) çıkıntısı kaldırıldı (tasarım incelemesi, Eki 2026): 20px fark
     "kasıtlı" okunmaya yetmiyor, hizasızlık gibi görünüyordu.

     Dergi yazısının gövde ölçüsü GÖVDE GENİŞLİĞİDİR (1200px). Tarihçe: 660px →
     gövde genişliği (1 Ağu 2026) → tasarım incelemesinde ~680px (Eki 2026) →
     Yiğit "çok daralmış" dedi, yeniden gövde genişliği. TEK DÜĞME burasıdır:
     yerleşimin geri kalanı bu satıra uyar. */
  --okuma: var(--govde);
}

* { box-sizing: border-box; }

html {
  background: var(--paper);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: var(--fs-s);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; width: 100%; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 1rem; top: 1rem;
  z-index: 60;
  background: var(--ink); color: var(--paper);
  padding: .6rem 1rem;
}

.sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- ortak ızgara yardımcıları ---------- */
/* .wrap ve .altcizgi artık header.css'te (üst menü ve panelle ortak) */

/* Bölüm başlığı + kural çizgisi: her bölümde birebir aynı */
.bandhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  flex-wrap: wrap;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--ink);
}

/* Ana sayfada bölüm başlıklarının altındaki siyah kural çizgisi kaldırılır
   (karar 2 Ağu 2026): başlığın kendi altın alt çizgisi (`--cizgili`) zaten
   ayracı taşıyor, ikinci bir siyah çizgi vitrin sayfasında fazlaydı. Sayı
   sayfası da çizgisizdir (karar 18 Eki 2026, aynı gerekçe). Ekip ve biz
   kimiz sayfalarındaki `.bandhead` etkilenmez. */
.bandhead--cizgisiz { border-bottom: 0; }

.bandhead__t {
  font-family: var(--serif);
  font-size: var(--fs-d3);
  line-height: 1;
  font-weight: 500;
  letter-spacing: var(--ls-tight);
  margin: 0;
}

/* SAYFA BOYU (`--fs-d2`, `.phead__t` ile aynı): bandhead düzeninde duran ama sayfanın ANA
   başlığı olanlar — /etkinlikler'in h1'i ve ana sayfanın bölümleri (ana sayfanın her bölümü
   kendi sayfasının vitrinidir). Sayfa İÇİNDEKİ bölümler (geçmiş etkinlikler, içindekiler…)
   `--fs-d3`te kalır (Yiğit, 28 Eki 2026: "serbest içerikler" sayfasının başlığı ölçü). */
.bandhead__t--sayfa { font-size: var(--fs-d2); }

/* Başlık sonundaki nokta altın — eski sitedeki altın alt çizginin karşılığı */
.bandhead__t b { font-weight: 500; color: var(--gold); }

.bandhead__n {
  font-size: var(--fs-s);
  color: var(--grey);
}

.band { padding-block: 0 var(--band); }

/* ---------- header ---------- */
/* .hd* artık header.css'te (panelle ortak üst menü) */

/* ---------- flash ---------- */

.flash {
  margin: 1rem 0 0;
  padding: .75rem 1rem;
  border-left: 2px solid var(--gold);
  background: var(--paper-2);
  font-size: var(--fs-sm);
}
.flash--error { border-left-color: var(--danger); }

/* ---------- sayfa başlığı (arşiv ve tekil sayfalar) ---------- */

.phead { padding-block: clamp(2rem, 4vw, 3.25rem) 0; }

.phead__t {
  font-family: var(--serif);
  font-size: var(--fs-d2);
  line-height: 1;
  font-weight: 500;
  letter-spacing: var(--ls-tight);
  margin: 0;
}
.phead__t b { font-weight: 500; color: var(--gold); }

.phead__d {
  margin: .9rem 0 0;
  max-width: 48ch;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

.phead__rule {
  margin-top: 1.4rem;
  border-bottom: 1px solid var(--ink);
}

/* ---------- hero: son sayı + içindekiler şeridi ----------
   YERLEŞİM ESKİ SOFART'IN ANA SAYFASINDAN, CANLIDA ÖLÇÜLEREK ALINDI
   (2 Ağu 2026); açılış bloğu tasarım incelemesinde değişti (Eki 2026):

     1. bölüm başlığı            — altı altın çizili
     2. [KAPAK | sayı bilgisi]   — kapak solda, numara + künye + düğme
                                   kapağın HEMEN YANINDA, alt kenara yaslı
     3. İÇİNDEKİLER ŞERİDİ       — kenardan kenara yatay karo dizisi

   Referansın [boş | kapak | no XX] üçlüsü bırakıldı: numara kapaktan ~200px
   uzakta sayfanın kenarına ait gibi duruyordu, sol üçte bir bomboştu ve
   kapağın altındaki "sayının adı" satırı adı olmayan sayıda numarayı ikinci
   kez yazıyordu. İlk ekran artık boşluk değil bilgi gösterir.

   Referans ölçüleri (1200px gövdede): kapak 400×570, karo 240×320, karo
   numarası 32px, açık kartın ayrıntısı 1000px genişliğinde iki kolon.
   Bizim gövdemiz de 1200 olduğu için oranlar birebir taşınabildi.

   ŞERİT BİR KAYDIRMA KUTUSUDUR (`overflow-x`), taşıyıcı bir "slider" değil:
   dokunmatikte parmakla, farede oklarla ve klavyede yön tuşlarıyla aynı
   davranır; JS düşerse şerit yine kaydırılır. Referansta açık kartı
   `slick-current` belirliyordu — bizde ORTAYA EN YAKIN kart açıktır ve
   kararı `site.js` verir. */

.hero { padding-block: clamp(2rem, 4vw, 3.5rem) var(--band); }

/* Kapak + bilgi kolonu. Bilgi kolonu kapağın ALT kenarına yaslanır: numara
   kapağın yanında bir imza gibi durur, sayfanın öbür ucunda değil. */
/* [boş | kapak | bilgi] — kapak sayfanın ORTASINDA (eski sitenin ana sayfası; 17 Eki
   incelemesinde bir süre sola alınmıştı, Yiğit 28 Eki 2026'da geri istedi). Kapak 400px'te
   kalır, yan kolonlar eşit; bilgi sağ kolonda kapağın alt çizgisine oturur. */
.hero__ust {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px) minmax(0, 1fr);
  align-items: end;
  gap: clamp(1.5rem, 5vw, 4.5rem);
  margin-top: 1.75rem;
}
.hero__ust .issue__frame { grid-column: 2; }
.hero__ust .issue__bilgi { grid-column: 3; }

/* ---------- KESİK KÖŞE — DERGİ tarafının kapak çerçevesi ----------
   Köşeleri KESİK ve iki köşede renkli üçgen var: `clip-path` kesiği açar,
   üçgenler onu doldurur. Ölçüler eski siteden aynen alındı; üçgenin 60px'i
   kapağın 400px genişliğine göredir, bu yüzden `--kose` ekranla küçülür.

   KAPSAM DERGİ TARAFIDIR ve dört yüzeyde birden geçerlidir (karar 2 Ağu 2026,
   3 Ağu'da sayı rafı eklendi): ana sayfanın sayı kapağı, sayı sayfasının kapağı,
   sayı sayfasındaki dergi içeriklerinin görselleri ve sayı listesindeki kapak.
   SERBEST içerik bunu ALMAZ — Cormorant kuralıyla aynı ayrım: çerçeve derginin
   imzasıdır, tek başına duran işin değil.

   `z-index` ŞART: kapak görseli de konumlandırılmış (`position: absolute`) ve
   ağaçta `::before`den SONRA geliyor — z-index'siz üstteki üçgen görselin
   altında kalır, alttaki kalmaz. Belirti ikisinden yalnızca birinin
   görünmesidir. */
.issue__frame,
.kapak__gorsel,
.ic__gorsel,
.raf__kapak {
  position: relative;
  background: var(--paper-2);
  overflow: hidden;
  --kose: clamp(1.1rem, 5vw, 3.75rem);
  clip-path: polygon(0% 0%, 85% 0%, 100% 5%, 100% 100%, 15% 100%, 0% 95%);
}

.issue__frame::before,
.issue__frame::after,
.kapak__gorsel::before,
.kapak__gorsel::after,
.ic__gorsel::before,
.ic__gorsel::after,
.raf__kapak::before,
.raf__kapak::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 0; height: 0;
}
.issue__frame::before,
.kapak__gorsel::before,
.ic__gorsel::before,
.raf__kapak::before {
  top: 0; right: 0;
  border-top: var(--kose) solid var(--ink);
  border-left: var(--kose) solid transparent;
}
.issue__frame::after,
.kapak__gorsel::after,
.ic__gorsel::after,
.raf__kapak::after {
  bottom: 0; left: 0;
  border-bottom: var(--kose) solid var(--gold);
  border-right: var(--kose) solid transparent;
}

/* Ana sayfadaki sayı kapağı: 400×570 (referans) */
.issue__frame { aspect-ratio: 400 / 570; }
.issue__frame img {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.issue__frame:hover img { transform: scale(1.03); }

/* Bilgi kolonu: numara → (varsa) sayının adı → künye satırı → düğme.
   Sola yaslı; kapağın alt kenarıyla aynı çizgide biter. */
.issue__bilgi {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding-bottom: .25rem;
}
.issue__num { display: block; }
.issue__ad {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--fs-d4);
  font-weight: 500;
  line-height: 1.15;
}

/* İÇİ BOŞ, KENARI ÇİZİLİ rakam — referansın imzası, altı 3px altın çizili.
   ÖLÇÜ VE YAZI TİPİ SAYI SAYFASINDAKİ BAŞLIĞIN AYNISIDIR (`.kapak__no`, karar
   2 Ağu 2026): aynı sayı iki sayfada aynı sesle okunmalı. Dolgu/çeper de oradan
   gelir — `.kapak__no` ile ortak kural için "OYULMUŞ SAYI" bloğuna bakın. */
.issue__no {
  font-family: var(--serif);
  font-size: var(--fs-d1);
  line-height: .95;
  font-weight: 500;
  letter-spacing: var(--ls-tight);
  font-variant-numeric: lining-nums tabular-nums;
  /* Sitenin tek süs çizgisi (`--cizgi`, altın), ama `text-decoration` DEĞİL: oyulmuş
     sayının çeperi `text-shadow`dur ve gölge alt çizgiye de basılır — çizginin
     çevresinde açık renkli ikinci bir hat çıkıyordu ("çift çizgi", 18 Eki 2026).
     Gölge arka plana basılmaz. `.18em` = başlıklardaki `.05em` ofsetin bu yazı
     tipinde ölçülen karşılığı. */
  background: linear-gradient(var(--gold), var(--gold)) no-repeat 0 calc(100% - .18em) / 100% var(--cizgi);
}

.issue__sub {
  font-size: var(--fs-s);
  color: var(--grey);
}


/* ---------- içindekiler şeridi ----------
   Kenardan kenara: `.toc` bir `.wrap` ALMAZ, şerit sayfanın iki kenarına
   dayanır (referansta da öyle). Şerit artık kendiliğinden döngüyle ilerliyor
   (bkz. site.js), bu yüzden kaydırma çubuğu GİZLENİR — elle kaydırma yine
   çalışır (dokunmatik/ok/klavye), yalnızca çubuk görünmez. */
.toc {
  position: relative;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* GENİŞ EKRANDA ŞERİT KENARDAN KENARA DOLUDUR, ortalanmaz. Referansın şeridi
   sonsuz döngülüydü (slick), bu yüzden iki yanı da doluydu; döngüsüz bir
   kaydırma kutusunu ortalasaydık ilk karo ortada dururken solu bomboş kalırdı
   (denendi, yarım sayfa boşluk). AÇIK kartı EKRAN GENİŞLİĞİNDEN BAĞIMSIZ
   TEK bir kural belirler: şeridin ortasına en yakın karo (karar 2 Ağu 2026,
   güncellendi — hover artık seçimi değiştirmez, yalnızca otomatik döngüyü
   durdurur). */
.toc__ray {
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  /* Tarayıcının "kaydırma çapalama"sı (scroll anchoring) KAPALI: JS,
     sonsuz döngü için başa/sona görünmez kopya karolar EKLİYOR
     (site.js) — çapalama açıkken tarayıcı bu ekleme sırasında kaydırma
     konumunu kendiliğinden kaydırıp JS'in hesapladığı ortalama hedefini
     bozuyordu (ilk karo yerine ikincisi ortada açılıyordu). */
  overflow-anchor: none;
  padding-inline: var(--edge);
  --karo: 240px;
  /* Kaydırma çubuğu YOKTUR: şerit artık kendiliğinden döngüyle ilerliyor
     (bkz. site.js), çubuk yalnızca gürültüydü. Kaydırma kendisi kalır —
     dokunmatik/ok/klavye hâlâ çalışır, yalnızca görünmez. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.toc__ray::-webkit-scrollbar { display: none; }
.toc__ray:focus-visible { outline-offset: -2px; }

.toc__k {
  flex: 0 0 var(--karo);
  width: var(--karo);
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
}

/* Karo numarası: içi kağıt, kenarı mürekkep — sayı numarasıyla aynı aygıt */
.toc__n {
  font-family: var(--serif);
  font-size: var(--fs-l);
  line-height: 1.5;
  font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--paper);
  text-shadow:
    -1px -1px 0 var(--ink), 1px -1px 0 var(--ink),
    -1px  1px 0 var(--ink), 1px  1px 0 var(--ink);
}

/* 240×320 = 3:4 (referans). Dingin hâlde SÖNÜK, açık kart tam parlak ve
   altında gölgeli — şeridin okunma ekseni budur. */
.toc__gorsel {
  display: block;
  aspect-ratio: 3 / 4;
  background: var(--paper-2);
  overflow: hidden;
  opacity: .6;
  transition: opacity .4s ease, box-shadow .4s ease;
}
.toc__gorsel img { height: 100%; object-fit: cover; }

.toc__k.is-acik .toc__gorsel {
  opacity: 1;
  box-shadow: 0 36px 52px -33px rgb(0 0 0 / .85);
}

/* Şeridin okları — referansta 48×48 kare, mürekkep zeminde altın ok.
   JS yoksa `hidden` kalırlar (Blade onları öyle basar): şerit zaten
   kaydırılabilir, işlemeyen bir düğme bırakmanın anlamı yok. */
.toc__ok {
  position: absolute;
  top: calc(1.5rem + 50%);
  transform: translateY(-50%);
  z-index: 2;
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: var(--ink);
  color: var(--gold);
  cursor: pointer;
  transition: opacity .2s ease;
}
.toc__ok[hidden] { display: none; }
.toc__ok--geri { left: 0; }
.toc__ok--ileri { right: 0; }
.toc__ok:disabled { opacity: .3; cursor: default; }
.toc__ok svg { width: 32px; height: 32px; }

/* ---------- açık karonun ayrıntısı ----------
   Referansta 1000px genişliğinde iki EŞİT kolon: solda sağa yaslı başlık ve
   kolonu ayıran altın çizgi, sağda kısa açıklama ile künye. Kartlar üst üste
   yığılır (aynı ızgara hücresi) ama kutunun boyu AÇIK kartın yazısına göredir
   (Yiğit, 21 Eki 2026): bir süre en uzun karta ve 160px alt sınıra sabitti,
   kısa özetli içerikte altında boşluk kalıyordu. Kapalı kartlar 0 yükseklikte
   durur, yalnızca solup küçülürken üstte görünür. */
/* `.wrap` ile BİRLİKTE yazılır: `.wrap:not(figure)` (0,1,1) tek sınıflı bir
   kuraldan özgündür ve `max-width`i geri alırdı — kutu 1000 değil 1200 çıkardı. */
.toc__ic-kutu.wrap {
  display: grid;
  margin-top: 1.5rem;
  max-width: calc(1000px + 2 * var(--edge));
}

.toc__ic {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  height: 0;
  opacity: 0;
  transform: scale(0);
  transition: opacity .4s ease, transform .4s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}
.toc__ic.is-acik {
  height: auto;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* BAŞLIK KELİME KELİME ALT ALTA DİZİLİR (karar 2 Ağu 2026). Daraltma
   BAŞLIĞIN KENDİSİNDE değil İÇİNDEKİ bağlantıdadır: `min-content` (= en uzun
   kelime) `.toc__t`ye verilseydi kolonu ayıran altın çizgi de metinle birlikte
   sola kayardı — çizgi kolon sınırında durmak zorunda. Bağlantı `inline-block`
   olduğu için ebeveynin `text-align: right`i onu sağ kenara oturtur.

   Başlık Cormorant'tır — başlık her yerde aynı yazı tipiyle okunur. */
.toc__t {
  margin: 0;
  padding: .625rem 1.5rem .625rem .625rem;
  border-right: 1px solid var(--gold);
  height: 100%;
  font-family: var(--serif);
  /* 32px: Cormorant'ın x-yüksekliği Poppins'ten belirgin küçüktür, 24'te
     yanındaki 18px özetten küçük okunuyordu (karar 18 Eki 2026). */
  font-size: var(--fs-l);
  line-height: 1.15;
  font-weight: 500;
  text-align: right;
}
.toc__t a {
  display: inline-block;
  width: min-content;
  min-width: 4ch;
}
.toc__t a { transition: color .2s ease; }
.toc__t a:hover { color: var(--gold-deep); }

.toc__yan {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.25rem;
  padding: .625rem;
}

.toc__q {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-2);
}

/* Künye referansta İTALİKTİR; Poppins'in italiği yok (sahte italik üretilir),
   ayrım harf aralığı ve renkle yapılır. */
.toc__c {
  margin: 0;
  font-size: var(--fs-s);
  color: var(--grey);
}

.more {
  align-self: flex-start;
  margin-top: 1.4rem;
  padding-block: .25rem 2px;
  font-size: var(--fs-s);
  color: var(--ink);
  border-bottom: 2px solid var(--gold);
}

/* Bölüm başlığındaki "tümü →" bir bağlantı olduğunda dokunulabilir olmalı;
   aynı sınıf `<p>` olarak da geçtiği için yalnızca `a` seçilir. */
a.bandhead__n { padding-block: .3rem; }

@media (max-width: 64rem) {
  /* Dar ekranda iki kolon tek kolona iner: kapak üstte, bilgi altında. */
  .hero__ust { grid-template-columns: minmax(0, 1fr); }
  .hero__ust .issue__frame,
  .hero__ust .issue__bilgi { grid-column: auto; }
  /* `width` ŞART: `margin-inline: auto` ızgara hücresindeki gerilmeyi (stretch)
     iptal eder ve kutu içerik kadar kalır — kapağın tek çocuğu mutlak
     konumlandırılmış bir görsel olduğu için o da SIFIRDIR. Belirti dar ekranda
     kapağın hiç görünmemesidir. */
  .issue__frame { width: 100%; max-width: 400px; }
  .toc__ray {
    --karo: 200px;
    /* Dar ekranda tek karo sığar: ilk ve son karonun da ortaya gelebilmesi
       için kutunun yanları yarım ekran açılır. */
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 50%;
    padding-inline: max(var(--edge), calc(50% - var(--karo) / 2));
  }
  .toc__ok { width: 40px; height: 40px; }
  .toc__ok svg { width: 24px; height: 24px; }
}

@media (max-width: 46rem) {
  /* Ayrıntı tek kolona iner; başlığı ayıran dikey altın çizgi yatağa yatar */
  .toc__ic { grid-template-columns: minmax(0, 1fr); }
  .toc__t {
    padding: 0 0 .625rem;
    border-right: 0;
    border-bottom: 1px solid var(--gold);
    text-align: left;
  }
  .toc__yan { padding-inline: 0; }
}

/* ---------- öne çıkan seçimler ----------
   Kartlar YAN YANA DEĞİL ALT ALTADIR: her seçim bir satırdır — solda kapak,
   sağda künye bloğu. Yapı ve hareket ESKİ SOFART'IN listeleme düzeninden
   birebir alınmıştır; markup karşılıkları `welcome.blade.php`te yazılı.

   HAREKETİN TAMAMI (dingin → hover):

     · `.pick__media`  (overlay-image)      görünür        → söner, sola çıkar
     · `.pick__ikinci` (hover-image)        solda görünmez → gelir, belirir
     · `.pick__ust`    (anim-move-upwards)  140px AŞAĞIDA  → yerine oturur
     · `.pick__alt`    (anim-move-downwards)140px YUKARIDA → yerine oturur
     · `.pick__acilan` (hover-content)      solda görünmez → aradan açılır
     · `.pick__q`      (hover-excerpt)      mürekkep       → gri

   Yani kart dingin hâlde KAPALIDIR: başlıkla künye birbirine yaklaşmış durur,
   aralarındaki açıklama ve "devamını oku" bağlantısı hover'da açılır.

   ÖLÇÜLER REFERANSTAN AYNEN ALINDI (140px, 120px, 80px, -400px, .4s ease).
   Sabit piksellerin anlamlı olabilmesi için kapak da referanstaki ölçüde
   sabitlendi: 400px genişlik. Bu yüzden `.pick` `width: fit-content`tir —
   satır içeriği kadar yer kaplar, sabit ölçüler ızgaraya göre kaymaz.

   KAPSAM: hareket yalnızca 768px üstünde VE gerçek hover'ı olan aygıtta.
   Dar ekranda ve dokunmatikte hiçbir şey gizlenmez, kart açık bir yığındır —
   referansın kırılımı da 768px'ti. `:focus-within` eklendi (referansta yoktu):
   klavyeyle gezen de aynı içeriği açabilsin, görüntü hiç değişmeden. */

.picks__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--band);
  margin-top: 1.75rem;
}

.pick { display: flex; flex-direction: column; gap: .85rem; }

.pick__media { background: var(--paper-2); }
.pick__media img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* İkinci kapak yalnızca hover düzeninde vardır; dar ekranda hiç basılmaz
   (aynı görselin ikinci kopyası orada yalnızca tekrar olurdu). */
.pick__ikinci { display: none; }
.pick__yan { display: flex; flex-direction: column; gap: .85rem; }
.pick__ust,
.pick__alt { display: flex; flex-direction: column; gap: .5rem; }
.pick__acilan { display: flex; flex-direction: column; align-items: flex-start; gap: .85rem; }

.pick__devam {
  font-size: var(--fs-s);
  letter-spacing: .08em;
  color: var(--ink);
}

@media (min-width: 48rem) {
  /* Referans: `display: flex; position: relative; width: fit-content`.
     `flex-direction: row` AÇIKÇA yazılır: taban kural `column` ve o hâlde
     aşağıdaki `flex: 0 0 400px` bir GENİŞLİK değil YÜKSEKLİK tabanı olurdu
     (panelin `.field` tuzağının aynısı — bkz. CLAUDE.md). */
  .pick {
    /* Kapağın ölçüsü TEK YERDE: ikinci kapak da, kayma da bundan türetilir —
       kapak genişliği değişince iki görsel hizalı kalır. */
    --pick-kapak: 400px;
    --pick-kay: 120px;

    display: flex;
    flex-direction: row;
    /* `stretch`: sağ kolon kapağın boyunca uzar, üç grup da `space-between` ile
       o yüksekliğe dağılır — canlı referansta ölçülen düzen bu (sağ kolonun
       toplam boyu 507px, kapak 500px). */
    align-items: stretch;
    position: relative;
    width: fit-content;
    /* `fit-content` TEK BAŞINA yetmez: satırın doğal genişliği (400px kapak +
       boşluk + metin) 1024px altında gövdeden taşıyor ve sayfaya yatay kaydırma
       düşüyordu (820px'te ölçüldü: 848px satır, 754px yer). Tavan + daralabilen
       metin kolonu, referansın 768px kırılımını korurken taşmayı bitirir. */
    max-width: 100%;
    gap: clamp(1.5rem, 4vw, 3.5rem);
  }

  /* `align-self: start`: satır `stretch` olduğu için kapak kutusu satır boyuna
     uzuyor ve altında boş alan bırakıyordu; kapak kendi boyunda kalır, uzayan
     yalnızca sağ kolondur. */
  .pick__media { flex: 0 0 var(--pick-kapak); align-self: start; }

  .pick__yan { flex: 1 1 auto; min-width: 0; justify-content: space-between; text-align: right; }
  .pick__orta { min-width: 0; }
  .pick .credits { justify-content: flex-end; }
  .pick .pick__q { text-align: left; }
  .pick__acilan { align-items: flex-end; }
}

@media (min-width: 48rem) and (hover: hover) {
  /* İkinci kapak YALNIZCA animasyon çalışırken vardır. Görünürlüğü `.pick__ust`
     gibi genel yerleşim bloğuna konursa dokunmatik bir tablette (hover yok ama
     genişlik 768 üstü) aynı kapak yan yana İKİ KEZ basılır ve satır taşar —
     800px'te ölçüldü. */
  /* İKİNCİ KAPAK, BİRİNCİNİN KUTUSUNA OTURUR.

     Kutusu ilk kapağınkiyle birebir aynıdır (aynı sol kenar, aynı üst kenar,
     aynı ölçü — hepsi `--pick-kapak`/`--pick-kay`ten türüyor), görselin kendisi
     ise o kutunun içinde ORTALANMIŞ ve DAHA KÜÇÜKTÜR. Böylece hover'da gelen
     görsel, sönen görselin tam üstüne denk gelir.

     Akıştan çıkarıldı (`position: absolute`) ve hareket `margin-left` yerine
     `transform` ile yazıldı: referanstaki `-100% → -400px` kapsayıcı genişliğine
     bağlıydı ve bizim sağ kolonumuz onlarınkinden geniş olduğu için görsel
     ilkinin üstüne değil soluna düşüyordu. Hareketin kendisi aynı — soldan
     gelir, yerine oturur.

     Yan etkisi istenen yönde: `.pick__orta` artık yalnızca metni taşıyor, yani
     açıklama sağ kolonun tamamını kullanıyor ve görselle yan yana kalıyor. */
  .pick__ikinci {
    display: grid;
    place-items: center;
    position: absolute;
    left: var(--pick-kay);
    top: 0;
    width: var(--pick-kapak);
    height: calc(var(--pick-kapak) * 1.25);   /* ilk kapakla aynı 4:5 kutu */
    margin: 0;
    opacity: 0;
    transform: translateX(-100%);
    transition: transform .4s ease, opacity .4s ease;
    z-index: 2;
    pointer-events: none;
  }
  .pick__ikinci picture { display: block; width: 70%; }
  .pick__ikinci img { aspect-ratio: 4 / 5; object-fit: cover; }

  /* Metin görsele göre DİKEYDE ORTALANIR — canlı referansta bu kap
     `display: flex; align-items: center` ölçüldü. */
  .pick__orta { display: flex; align-items: center; }

  .pick__q { color: var(--ink); transition: color .4s ease; }

  /* YALNIZCA `transform` ve `opacity` CANLANIR — akıcılığın ve sabit satırların
     şartı. Referanstaki `margin-left: -80px → 0` (Eki 2026'ya kadar bizde de
     öyleydi) iki hata üretiyordu, ikisi de ölçüldü:
       · bloğun GENİŞLİĞİ animasyon boyunca 824 → 744px değişiyor, satırlar her
         karede yeniden kırılıyordu — "2000'lerin" blok tam görünürken birinci
         satırın sonundan ikincinin başına atlıyordu (~250. ms'de);
       · margin her karede yerleşimi (layout) yeniden hesaplatır, transform
         hesaplatmaz — hareket "düşük kare hızında" gibi takılıyordu.
     Aynı 80px'lik ek kayma artık transform'un içinde: gözle aynı hareket,
     genişlik baştan sona SABİT. */
  .pick__acilan {
    transform: translateX(calc(-100% - 80px));
    opacity: 0;
    transition: transform .4s ease, opacity .2s ease;
    z-index: 1;
    pointer-events: none;
  }

  /* Hareket eden katmanlar önceden kendi katmanlarına alınır: ilk hover'da
     katman oluşturma maliyeti animasyonun ilk karelerine düşmesin. */
  .pick__media,
  .pick__ikinci,
  .pick__acilan,
  .pick__ust,
  .pick__alt { will-change: transform, opacity; }

  .pick__media {
    transform: translateX(var(--pick-kay));
    transition: opacity .4s ease, transform .4s ease;
  }

  .pick__ust { transform: translateY(140px); transition: transform .4s ease; }
  .pick__alt { transform: translateY(-140px); transition: transform .4s ease; }

  .pick:hover .pick__q,
  .pick:focus-within .pick__q { color: var(--grey); }

  .pick:hover .pick__ikinci,
  .pick:focus-within .pick__ikinci { transform: translateX(0); opacity: 1; pointer-events: auto; }

  .pick:hover .pick__media,
  .pick:focus-within .pick__media { opacity: 0; transform: translateX(-100%); }

  .pick:hover .pick__acilan,
  .pick:focus-within .pick__acilan { transform: translateX(0); opacity: 1; pointer-events: auto; }

  .pick:hover .pick__alt,
  .pick:focus-within .pick__alt { transform: translateY(0); }

  .pick:hover .pick__ust,
  .pick:focus-within .pick__ust { transform: translateY(0); }
}

.pick__tag {
  font-size: var(--fs-s);
  letter-spacing: .18em;
  color: var(--gold-deep);
}

.pick__h {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -.02em;
  margin: 0;
}

/* Seçkinin excerpt'i BÜYÜK HARF POPPINS'tir — eski sitede de öyleydi
   (`font-ml font-extralight`, canlıda 24px/w200/uppercase ölçüldü) ve seçki
   bloğunun tek "sesli" öğesi odur: başlık Cormorant, künye küçük gri, arada
   duran bu blok ikisinden de ayrılmak zorunda.

   Bu, "`text-transform` kullanılmaz" kuralının BİLİNÇLİ istisnasıdır. Kural
   Türkçe I/ı/İ/i kararını tarayıcıya bırakmamak içindir; burada bırakılabilir
   çünkü belge `<html lang="tr">` ile işaretli ve tarayıcı Türkçe dönüşümü
   uygular ("için" → "İÇİN", "IÇIN" DEĞİL — ölçüldü). Metnin kendisini büyük
   harfe çevirmek seçenek değildi: excerpt editörün yazdığı içeriktir.

   Ağırlık 200 ŞART: büyük harf zaten görsel olarak ağırdır, 300'de blok
   başlıkla yarışıyor. Harf aralığı da onun için açık. */
.pick__q {
  font-size: var(--fs-ml);
  line-height: 1.5;
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-2);
  border-left: 2px solid var(--gold);
  padding-left: .95rem;
  margin: 0;
}

@media (max-width: 54rem) {
  .picks__grid { gap: 2.25rem; }
}

/* ---------- kart ızgarası (serbest, arşivler) ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gut);
  margin-top: 1.75rem;
  padding: 0;
  list-style: none;
}

.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card { display: flex; flex-direction: column; gap: .55rem; }
.card > a { display: flex; flex-direction: column; gap: .55rem; }

/* KART standardı: görsel 4:5, köşe `--kart-kose`, başlık ≈28, aralık `--gut`.
   Serbest duvarı (LEVHA) ve etkinlik kartı köşeyi kendileri belirler. */
.card__media { overflow: hidden; border-radius: var(--kart-kose); background: var(--paper-2); }
.card__media img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.card:hover .card__media img { transform: scale(1.04); }

.card__kind {
  font-size: var(--fs-s);
  color: var(--grey);
  margin-top: .2rem;
}

.card__t {
  font-family: var(--serif);
  font-size: calc(var(--fs-m) * var(--serif-oran));   /* canlı Poppins 20 → ≈28 */
  line-height: 1.18;
  font-weight: 500;
  letter-spacing: var(--ls-tight);
}

.card__a { font-size: var(--fs-s); color: var(--grey); }

/* KÜÇÜK KART — yalnızca ~150px'lik kolonlar (yazının katkıcı kartları). Oran ve
   köşe aynı; 28px başlık bu genişlikte uzun başlığı 8 satıra kırıyordu (ölçüldü,
   23 Eki 2026), başlık bir basamak küçük. */
.card--kucuk { gap: .4rem; }
.card--kucuk > a { gap: .4rem; }
.card--kucuk .card__t { font-size: calc(var(--fs-s) * var(--serif-oran)); line-height: 1.15; }

/* ---------- TEK BAŞLIK BİÇİMİ ----------
   Sitenin imzası: KÜÇÜK HARF, Cormorant, altın nokta, ALTIN ALT ÇİZGİ. İki boy
   vardır — sayfa başlığı (`.phead__t`, d2) ve bölüm başlığı (`.bandhead__t`,
   d3) — ve biçim ikisinde, vitrinin her sayfasında ve panelde aynıdır.

   Önceden dört biçim vardı (Cormorant + nokta, Poppins + alt çizgi, Cormorant
   + alt çizgi, Poppins kalın); hangisinin nerede kullanıldığı ekrandan
   okunmuyordu. Serbest tarafının Poppins başlıkları (`--duz`) da kalktı:
   yazı tipinin görevi artık İÇERİK TÜRÜNE değil METİN ROLÜNE bağlıdır —
   başlık Cormorant, arayüz ve okuma metni Poppins (bkz. CLAUDE.md).

   `text-decoration` kullanılır, `border-bottom` DEĞİL: çizgi metnin kendisini
   takip etmeli (başlık iki satıra düştüğünde her satırın altına iner). Kalınlık
   SABİT 4px — canlı sitedeki `.text-decoration` kuralının birebir aynısı
   (karar 2 Ağu 2026; 19 Eki 2026'dan beri boya oranlı: `--cizgi`). Çizgi alt uzantılı harflerin (g, ğ, y, ş) altından
   kesilir (`skip-ink: auto`) — referans böyleydi.

   SİTEDEKİ TEK SÜS ÇİZGİSİ BUDUR (karar 18 Eki 2026): sayı numarası, etkinlik
   etiketleri ve tarihi de bir süre kendi çizgisini (2–3px, uzak, kesintisiz)
   yazıyordu; iki biçim yan yana görünüyordu. Altın alt çizgi isteyen yeni bir
   öğe buraya EKLENİR, kendi `text-decoration`ını yazmaz. Bağlantıların hover
   çizgisi (menü, gövde bağlantısı) süs değil etkileşimdir, bu kurala girmez.
   Tek istisna OYULMUŞ sayıdır (`.issue__no`): aynı çizgi orada `background`
   ile çizilir. */
.phead__t,
.bandhead__t,
.etk__th,
.giris__baslik,
.etkp__et,
.etkp__tarih time,
.etkp__tarih span,
.bldr__grup,
.satir--buyuk .satir__kisi {
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: var(--cizgi);
  text-underline-offset: .05em;
  text-decoration-skip-ink: auto;
}


/* ---------- SERBEST İÇERİK LİSTESİ ----------
   Eski Sofart'ın serbest listelemesi. Üç farkı var ve üçü birlikte anlamlı:

   1. ÜÇ KOLON, 4px BOŞLUK. 1200px gövdede (1200 − 2×4) / 3 = 397px, 4:5 oranla
      497px: yani kapaklar ~400×500 basılır. Dört kolonda 285×356 kalıyordu ve
      eser kapağı için küçüktü. 4px boşluk kartları neredeyse bitiştirir —
      liste bir ızgara değil bir DUVAR gibi okunur, eserin kendisi öne çıkar.
   2. Kart dingin hâlde YALNIZCA kapak + başlıktır; kategori ve künye kapalıdır.
   3. Hover'da kart zemini karartılır, kapak yarıya söner ve kapalı iki satır
      açılır (referans: `max-height 0 → 200px`, `.6s ease`).

   Dolgu METİNLERDEDİR, kartta değil: kapak tam kolon genişliğinde kalmak
   zorunda, yoksa 400px hedefi tutmaz.

   Kapanma YALNIZCA gerçek hover'ı olan aygıtta: dokunmatikte kategori ve künye
   kalıcı olarak görünmez kalırdı (referansta bu koruma yoktu). Klavye için
   `:focus-within` eklendi. */

.grid--serbest {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

/* KAPAK KARTIN KENDİSİDİR: kart sabit oranlı bir kutudur, kapak onu boydan
   boya doldurur ve METİNLER KAPAĞIN ÜSTÜNE basılır — kategori sağ üstte,
   başlık sol altta, künye sağ altta (canlı referansta ölçülen düzen).
   Metin kapağın ALTINDA değildir; kart bir "resim + altyazı" değil, üstünde
   yazı olan bir levhadır. */
/* Zemin koyudur ama kapak dingin hâlde SÖNMEZ: serbest taraf bir görsel
   vitrindir ve işlerin renkleri bastırılmamalı (tasarım incelemesi, Eki 2026 —
   önceki .5 sönme bütün duvarı griye çekiyordu). Başlığın okunurluğunu
   kapağın tamamı değil, yalnızca ALT ŞERİTTEKİ perde taşır. */
.grid--serbest .card {
  position: relative;
  aspect-ratio: 4 / 5;
  background: #1A1714;
}


.grid--serbest .card > a {
  position: absolute;
  inset: 0;
  gap: 0;
  padding: .7rem;
}

.grid--serbest .card__media { position: absolute; inset: 0; border-radius: 0; }
.grid--serbest .card__media img { width: 100%; height: 100%; aspect-ratio: auto; }

/* Metinler kapağın üstünde: yığın sırası için `position: relative` yeter. */
.grid--serbest .card__kind,
.grid--serbest .card__t,
.grid--serbest .card__a { position: relative; }

.grid--serbest .card__kind { margin: 0 0 auto; text-align: right; color: #EAB801; }
.grid--serbest .card__t { color: #F0EEE6; }
.grid--serbest .card__a { margin-top: .2rem; text-align: right; color: #F0EEE6; }

/* Perde YALNIZCA İKİ UÇTADIR: alt şerit başlığı, ince üst şerit kategoriyi
   taşır; eserin gövdesi (ortadaki ~%55) hiç karartılmaz. Başlık bandında
   (alt %15) perde .8'e iner — beyaz zeminli bir eserde bile başlık
   arkasındaki parlaklık ~.2 kalır, gölgeyle birlikte okunur. */
.grid--serbest .card > a::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgb(0 0 0 / .8) 0%, rgb(0 0 0 / .45) 18%, rgb(0 0 0 / 0) 38%),
    linear-gradient(to bottom, rgb(0 0 0 / .45) 0%, rgb(0 0 0 / 0) 16%);
  pointer-events: none;
}

/* Perdenin üstüne İNCE bir gölge: altın kategori etiketi kapağın parlak bir
   yerine denk geldiğinde perde tek başına yetmiyor (altın L≈.53, eşiği
   başlıktan zor geçer). Gölge kapağı karartmadan yalnızca harfin çevresini
   koyultur — perdeyi daha da güçlendirip eseri büsbütün söndürmekten iyidir. */
.grid--serbest .card__kind,
.grid--serbest .card__t,
.grid--serbest .card__a { text-shadow: 0 1px 4px rgb(0 0 0 / .85); }

/* AÇIK KAPAK (`is-acik`, site.js başlığın altındaki parlaklığı ölçer — kapak
   rozetiyle aynı yardımcı): beyaz zeminli bir eserde perde + gölge bile
   beyaz başlığı kurtarmıyordu (ör. "Kaybolduğum An"). Başlık ve künye koyu
   mürekkebe döner, perde ve gölge kalkar; kategori koyu altına iner. Hover'da
   kapak sönüp zemin karardığı için aşağıda eski renklere geri dönülür. */
.grid--serbest .card.is-acik > a::before { opacity: 0; }
.grid--serbest .card.is-acik .card__t,
.grid--serbest .card.is-acik .card__a { color: #1A1714; text-shadow: none; }
.grid--serbest .card.is-acik .card__kind { color: #7A6006; text-shadow: none; }

@media (hover: hover) {
  .grid--serbest .card__kind,
  .grid--serbest .card__a {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity .6s ease, max-height .6s ease;
  }

  .grid--serbest .card__media { transition: opacity .4s ease; }

  /* Karartma zemini SABİT (`.cta` ve `.tag` ile aynı gerekçe): iki temada da
     koyu olmak zorunda. Kapak yarıya sönünce siyah zemin arkadan vurur. */
  .grid--serbest .card:hover,
  .grid--serbest .card:focus-within { background: #1A1714; }

  .grid--serbest .card:hover .card__kind,
  .grid--serbest .card:focus-within .card__kind,
  .grid--serbest .card:hover .card__a,
  .grid--serbest .card:focus-within .card__a { opacity: 1; max-height: 200px; }

  /* .35 (21 Eki 2026, Yiğit: "bir tık daha koyu"; önce .45'ti) */
  .grid--serbest .card:hover .card__media,
  .grid--serbest .card:focus-within .card__media { opacity: .35; }

  /* Açık kartta da hover'da kapak söner, zemin koyudur: yazı eski rengine */
  .grid--serbest .card.is-acik:hover .card__t,
  .grid--serbest .card.is-acik:focus-within .card__t,
  .grid--serbest .card.is-acik:hover .card__a,
  .grid--serbest .card.is-acik:focus-within .card__a { color: #F0EEE6; text-shadow: 0 1px 4px rgb(0 0 0 / .85); }
  .grid--serbest .card.is-acik:hover .card__kind,
  .grid--serbest .card.is-acik:focus-within .card__kind { color: #EAB801; text-shadow: 0 1px 4px rgb(0 0 0 / .85); }
  .grid--serbest .card.is-acik:hover > a::before,
  .grid--serbest .card.is-acik:focus-within > a::before { opacity: 1; }

  /* Referansta kapak yalnızca SÖNER, büyümez */
  .grid--serbest .card:hover .card__media img { transform: none; }
}

/* Akışın bulanık zemini yalnızca telefonda (aşağıda) */
.card__zemin { display: none; }

/* TELEFON: serbest arşivi bir AKIŞTIR (Instagram önerisi A1, 22 Eki 2026).
   Levha (kapak üstüne yazı) dar ekranda işi örtüyordu; burada sıra şudur:
   künye (kim) → görsel (KIRPILMAZ, 4:5 kutuda, kalan şerit bulanık kopya) →
   başlık + tür. Kutu oranı sabittir: görselin boyu yüklenmeden bilinmiyor ve
   sonsuz kaydırmanın konum geri yüklemesi zıplamayan bir liste ister.
   Dokunuş yine pencereyi açar. */
@media (max-width: 30rem) {
  .grid--serbest { gap: 2.25rem; }
  .grid--serbest .card { aspect-ratio: auto; background: none; }
  .grid--serbest .card > a { position: static; gap: .55rem; padding: 0; }
  .grid--serbest .card > a::before { content: none; }

  .grid--serbest .card__a { order: -1; margin: 0; text-align: left; font-weight: 400; }
  .grid--serbest .card__media {
    position: relative;
    inset: auto;
    aspect-ratio: 4 / 5;
    border-radius: 16px;
    background: #1A1714;
  }
  .grid--serbest .card__media > picture { position: relative; z-index: 1; display: block; height: 100%; }
  .grid--serbest .card__media > picture img { object-fit: contain; }
  .grid--serbest .card__zemin { display: block; position: absolute; inset: 0; }
  .grid--serbest .card__zemin picture { display: block; height: 100%; }
  .grid--serbest .card__zemin img { filter: blur(24px) saturate(1.15); transform: scale(1.2); opacity: .55; }

  .grid--serbest .card__t { order: 1; }
  .grid--serbest .card__kind { order: 2; margin: -.3rem 0 0; text-align: left; }

  /* Levhanın açık-kapak rengi ve gölgesi akışta geçersiz: metin kağıt üstünde */
  .grid--serbest .card__kind,
  .grid--serbest .card__t,
  .grid--serbest .card__a,
  .grid--serbest .card.is-acik .card__t,
  .grid--serbest .card.is-acik .card__a { color: var(--ink); text-shadow: none; }
  .grid--serbest .card__kind,
  .grid--serbest .card.is-acik .card__kind { color: var(--grey); }
}

@media (max-width: 64rem) {
  .grid,
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 46rem) {
  .grid,
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 30rem) {
  .grid,
  .grid--3 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- künye satırı: "yazı: ad · grafik: ad" ---------- */

.credits {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem 1.25rem;
  margin: 0;
  padding: 0;
  font-size: var(--fs-s);
  color: var(--grey);
}

.credits div { display: flex; gap: .35rem; }
.credits dt { color: var(--grey); }
.credits dd { margin: 0; color: var(--ink-2); }

/* Tekil sayfadaki büyük künye bloğu */
.credits--full {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.25rem 2rem;
  font-size: var(--fs-sm);
}
.credits--full div { flex-direction: column; gap: .3rem; }
.credits--full dt {
  font-size: var(--fs-s);
  color: var(--grey);
}
.credits--full dd {
  font-size: var(--fs-m);
  line-height: 1.35;
  color: var(--ink);
}

/* ---------- SAYI RAFI (/guncel-sayilar, /ozel-sayilar) ----------
   Eski sitedeki jet-listing-grid bileşeninin karşılığı; ölçüler canlıda
   ölçülerek alındı (3 Ağu 2026, 1200px gövdede):

     satır        1200×480 · iç kap 430 yüksek, sol dolgu 100px, kolon arası 10px
     kapak        300×428, kesik köşe, object-fit: cover
     sağ kolon    flex dikey, gap 8, dolgu 10
     sayı adı     32/48, altın 3px alt çizgi, içi boş (çeperli) harf
     içindekiler  352 yüksek KUTU, overflow: auto — satır 36 yüksek, gap 20
     ayraç        satır altında 2px altın çizgi, iki yanında 24px

   Kart ızgarası (eski `.shelf`) BIRAKILDI: bir sayının listede söyleyecek şeyi
   kapağı değil içindekileridir.

   Satır YÜKSEKLİĞİ kapağa bağlıdır ve içindekiler kutusu onun içinde kaydırılır
   (referansta da öyle). Liste uzadıkça satır uzasaydı satır aralığı sayıdan
   sayıya değişir, sayfa dalgalanırdı.

   Sabit pikseller `--raf-kapak`tan TÜRETİLİR — referansın 1200px'lik gövdesiyle
   bizimki aynı ölçüde ama dar ekranda kapak küçülüyor, üçgen ve girinti onunla
   birlikte küçülmeli. */

.raf {
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}

.raf__satir {
  --raf-kapak: 300px;
  /* Satırın BOYU kapaktan gelir (referans: 300×428). Sağ kolona `max-height`
     olarak verilir — ızgara hücresi kendiliğinden içeriğinden kısalmaz, o
     yüzden KESİN bir sınır olmadan içindeki kaydırma kutusu hiç kaydırılmaz
     ve uzun içindekiler listesi satırı kapaktan uzun yapardı. */
  --raf-boy: calc(var(--raf-kapak) / 300 * 428);
  display: grid;
  grid-template-columns: var(--raf-kapak) minmax(0, 1fr);
  gap: 10px;
  /* Girinti referansta 100px = kapağın 1/3'ü; kapakla birlikte küçülür */
  padding: 24px 0 24px calc(var(--raf-kapak) / 3);
  border-bottom: 2px solid var(--gold);
}
.raf__satir:first-child { padding-top: 0; }

/* Kesik köşe çerçevesi ORTAK kuraldadır (bkz. "KESİK KÖŞE"), burada yalnızca
   oran ve görselin oturma biçimi verilir. */
.raf__kapak {
  display: block;
  aspect-ratio: 300 / 428;
  /* Üçgen KAPAKLA BİRLİKTE küçülür: referanstaki 60px, 300px'lik kapağın
     %20'siydi. Ortak kuraldaki `clamp` 400px'lik ana sayfa kapağına göre
     ayarlı ve dar ekranda buradaki kapağın dörtte birini yerdi. */
  --kose: calc(var(--raf-kapak) * .2);
}
.raf__kapak img {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.raf__satir:hover .raf__kapak img { transform: scale(1.03); }

/* Sağ kolon KAPAĞIN KENARLARINA oturur (karar 21 Eki 2026): dikeyde iç boşluk
   yoktur — 10px'lik dolgu başlığı kapağın üstünden, liste kutusunu altından
   içeri çekiyordu (ölçüldü: üstte ~22px, altta 10px). Üstteki hizayı başlığın
   `text-box` kırpması tamamlar. */
.raf__govde {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  max-height: var(--raf-boy);
  padding: 0 10px;
}

/* Başlık ve sayaç TEK SATIRDA, aynı taban çizgisinde (karar 4 Ağu 2026).
   Referansta sayaç yoktu ve başlığın altında altın bir çizgi vardı; ikisi de
   değişti — sayaç başlığın sağında durunca alt çizgi onun altından geçemiyor,
   satırın altındaki gerçek altın ayraçla da yarışıyordu. */
.raf__bas {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .35rem 1rem;
  margin: 0;
}

/* Dolgu/çeper "OYULMUŞ SAYI" bloğundan gelir — aynı sayı ana sayfada, sayı
   sayfasında ve burada aynı sesle okunur. */
.raf__no {
  font-family: var(--serif);
  font-size: calc(var(--fs-l) * var(--serif-oran));   /* canlı Poppins 32 → ≈45 */
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
  /* Satır kutusunun üst payı kırpılır: rakamın tepesi kapağın üst kenarıyla
     aynı çizgide durur. Desteklemeyen tarayıcı birkaç px aşağıda başlar. */
  text-box: trim-start cap alphabetic;
}

.raf__sayim {
  font-size: var(--fs-s);
  color: var(--grey);
}
.raf__ozel {
  font-size: var(--fs-s);
  color: var(--grey);
}
.raf__ad {                       /* bölüm adı (No 17) — `.kapak__ad`ın küçüğü */
  flex-basis: 100%;
  order: 1;
  font-family: var(--serif);
  font-size: var(--fs-ml);
  font-style: italic;
  color: var(--ink);
}

.raf__ic {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Çubuk ALTIN DEĞİL: kutunun sağında baştan sona uzayan parlak bir şerit,
     satırın gerçek altın çizgisiyle (ayraç) yarışıyor ve tasarım öğesi gibi
     okunuyordu. Kaydırma bir ARAÇTIR, vurgu değil. */
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
  /* Kaydırma çubuğunun yeri baştan ayrılır: uzun listede çubuk çıkınca
     başlıklar yana kaymaz. */
  scrollbar-gutter: stable;
}

.raf__ic-satir {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 5px;
}

.raf__ic-no {
  flex: none;
  font-family: var(--serif);
  font-size: var(--fs-ml);
  font-weight: 500;
  line-height: 1.5;
  font-variant-numeric: lining-nums tabular-nums;
}
.raf__ic-no b { color: inherit; font-weight: inherit; }

.raf__ic-t {
  font-size: var(--fs-s);
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink);
  transition: color .2s ease;
}
.raf__ic-t:hover { color: var(--gold-deep); }

.raf__bos {
  margin: 0;
  font-size: var(--fs-s);
  color: var(--grey);
}

@media (max-width: 64rem) {
  .raf__satir { --raf-kapak: 220px; }
}

/* Telefonda kapak üstte, gövde altta. Kapak tam genişliği DOLDURMAZ (bir
   dergi kapağı ekranı kaplayınca liste "liste" olmaktan çıkıyor) ve
   içindekiler kutusu sabit bir yüksekliğe düşer — artık kapağa bağlanamaz. */
@media (max-width: 46rem) {
  .raf__satir {
    --raf-kapak: 180px;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    padding-left: 0;
  }
  .raf__kapak { width: var(--raf-kapak); }
  /* Kolonlar alt alta düştüğü için sağ kolon artık kapağın boyuna bağlı
     DEĞİLDİR; sınır doğrudan listeye taşınır. */
  .raf__govde { max-height: none; padding: 0; }
  .raf__ic { max-height: 15rem; }
}

.tag {
  font-size: var(--fs-s);
  padding: .2em .55em;
  background: var(--gold);
  color: #1A1714;
}

/* ---------- dergi yazısı (tekil içerik sayfası) ----------
   Ölçüler:
   · KAPAK 1920px'e kadar kenardan kenara; daha geniş ekranda iki yanı AYNI
     görselin bulanık bir kopyasıyla dolar — sayfanın açılış görüntüsü odur,
     tıklanınca büyüteçte tam boyu açılır,
   · GÖVDE gövde genişliğinde (--okuma → --govde, 1200px),
   · KÜNYE sağa yaslı ve metnin bittiği yerde — imza sayfanın sonundadır.

   Sayfanın yapısal aygıtı bir DİZGİ SATIRIDIR: solda etiket, sağda veri,
   altında saç teli çizgi. İki kez geçer (kapağın altı, galeri başlığı) —
   ikisi de aynı kuralları okur, üçüncü bir başlık biçimi eklenmez. */

.yazi { padding-bottom: var(--band); }

/* Kapak: YÜKSEKLİK CANLIDAN — 800px (canlıda ölçüldü, Eki 2026: 1440 ve
   1920 genişlikte aynı, `background-size: cover`). Dar ekranda genişlikle
   küçülür (56vw, tabanı 240px) — telefonda 800px'lik kapak ekranı yutardı.
   Bir süre `clamp(15rem, 34vw, 30rem)` = 480px'ti ve kısa kalıyordu.

   GENİŞLİK 1920px'e kadar kenardan kenaradır. Daha geniş ekranda kapak
   1920'de durur ve iki yanı boş kalmaz: aynı görselin küçük bir çeşidi
   (`.yazi__hero-fon`, ~400px) bandın tamamına yayılır, bulanıklaşır ve biraz
   söner — kapak kendi renginde kenara kadar "devam ediyor" gibi okunur.
   Bulanık kopyanın kenarları içeri sönmesin diye kutudan taşırılıp kırpılır
   (`inset` negatif + `overflow: hidden`). 1920'den dar ekranda kapak bandı
   doldurur, kopya görünmez. Bir süre kapak 1200px'te duruyordu. */
.yazi__hero {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--paper-2);
  isolation: isolate;
}
.yazi__hero-fon {
  position: absolute;
  inset: -48px;
  z-index: -1;
  width: calc(100% + 96px);
  height: calc(100% + 96px);
  object-fit: cover;
  filter: blur(36px) saturate(1.15) brightness(.88);
}
.yazi__hero-ac {
  position: relative;
  display: block;
  width: 100%;
  max-width: 1920px;
  margin-inline: auto;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.yazi__hero picture { display: block; }
.yazi__hero-ac img {
  display: block;
  width: 100%;
  height: clamp(15rem, 56vw, 50rem);
  object-fit: cover;
}
.yazi__hero-ac:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; }

/* KENAR GEÇİŞİ YUMUŞAKTIR: kapağın iki yanı ~120px boyunca saydamlaşıp bulanık
   zemine erir, keskin bir dikiş kalmaz. Bir süre keskin kenar + gölgeydi;
   "bir tık smooth" istendi (Eki 2026). Yalnızca kapak bandı doldurmadığında
   (1920px'ten geniş ekranda) — daha darında kapak bandı doldurur, kenarı
   saydamlaştırmak görselin kendisini söndürürdü. */
@media (min-width: 120.01rem) {
  .yazi__hero-ac {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%);
  }
}

/* SAYI ROZETİ — canlıdan ölçüldü (1440, Eki 2026): kapağın sol üstünden
   24px içeride, yan yana iki öğe arası 16px. Yıl Cormorant 700 48px DİKEY
   (`sideways-lr`, aşağıdan yukarı okunur), "no 12" Cormorant 700 64px, iki
   satır. Telefonda canlı yılı gizler ve numarayı tek satıra indirir.

   Kapak 1920px'te durduğu için sol kenar BANDIN değil KAPAĞIN kenarıdır.

   OKUNURLUK canlının ÜSTÜNE eklendi: canlıda rozet çıplak beyazdır ve açık
   bir kapakta kaybolur (bu yüzden bir süre kapaktan kaldırılmıştı). Köşede
   yumuşak bir karartma + hafif gölge — koyu kapakta fark edilmez. Renk tema
   tokenı DEĞİL sabit beyazdır: zemin her iki temada da görseldir. */
.yazi__hero { --rozet-x: max(24px, calc((100% - 1920px) / 2 + 24px)); }
/* HİZA canlıdan, MÜREKKEBE göre ölçüldü (1440, glif sınırları): yılın alt
   ucu "12"nin TABAN ÇİZGİSİNDEdir, "no"nun x-yüksekliği kapağın 37px
   altında başlar, yılın mürekkebi numaradan ~17px önce biter. Kutu ölçüleri
   (24px / 16px) yanıltıyordu: satır kutusu glifin üstünde ~13px boşluk
   taşır. Değerler numaranın boyuna (`--no-fs`) bağlıdır ki ara genişlikte
   oran bozulmasın. */
.yazi__rozet {
  --no-fs: clamp(2.5rem, 4.5vw, 4rem);
  position: absolute;
  z-index: 1;
  top: calc(24px - var(--no-fs) * .2);
  left: var(--rozet-x);
  display: flex;
  align-items: flex-end;
  gap: calc(var(--no-fs) * .06);
  color: #fff;
  font-family: var(--serif);
  font-weight: 700;
  text-shadow: 0 1px 12px rgb(0 0 0 / .35);
}
.yazi__hero:has(.yazi__rozet)::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 420px 300px at var(--rozet-x) 0, rgb(0 0 0 / .38), transparent 75%);
}
/* Açık kapak (site.js köşenin parlaklığını ölçer): rozet koyu mürekkep,
   karartma ve gölge yok */
.yazi__hero--acik .yazi__rozet { color: #1A1714; text-shadow: none; }
.yazi__hero--acik::after { display: none; }

/* Satır yüksekliği dikey yazıda kutunun GENİŞLİĞİDİR: canlıda yıl kutusu
   48px yazıyla 52px geniş — 1.1 bunu verir (1.5 numarayı ~20px uzağa itiyordu) */
.yazi__rozet-yil {
  writing-mode: sideways-lr;
  font-size: calc(var(--no-fs) * .75);
  line-height: 1.1;
  margin-left: calc(var(--no-fs) * .19);
  /* "12"nin satır kutusunun altı taban çizgisinin ~.19em altındadır */
  margin-bottom: calc(var(--no-fs) * .19);
}
.yazi__rozet-no {
  display: flex;
  flex-direction: column;
  font-size: var(--no-fs);
  font-weight: inherit;
  line-height: 1;
  text-transform: lowercase;
}
.yazi__rozet:hover .yazi__rozet-no { color: var(--gold); }
.yazi__rozet:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }

@media (max-width: 40rem) {
  .yazi__rozet { --no-fs: 2.75rem; top: 6px; }
  .yazi__rozet-yil { display: none; }
  .yazi__rozet-no { flex-direction: row; gap: .25em; }
}

/* Dizgi satırı — kategori ve tam tarih. Sayı numarası kapaksız içerikte
   burada durur (kapak varsa kapaktaki rozettedir). */
.yazi__dizgi {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1.2rem;
  margin: 0;
  padding: .9rem 0 .75rem;
  font-size: var(--fs-s);
  color: var(--grey);
}
/* Çizgi `border-bottom` DEĞİL: satır bir `.wrap`tır ve kenarlık `--edge`
   dolgusunu da kapsayıp gövdeden ~60px taşıyordu (sol kenar x=62, gövde
   x=120). Çizgi içeriğin genişliğinde, gövdeyle aynı kenardan başlar. */
.yazi__dizgi::after {
  content: "";
  position: absolute;
  left: var(--edge);
  right: var(--edge);
  bottom: 0;
  border-bottom: 1px solid var(--rule);
}
.yazi__sayi {
  display: inline-flex;
  align-items: baseline;
  gap: .45rem;
  color: var(--ink);
}
.yazi__sayi b {
  font-size: var(--fs-ml);
  font-weight: 500;
  line-height: 1;
}
.yazi__sayi span { color: var(--grey); }
.yazi__sayi:hover b { color: var(--gold-deep); }

.yazi__dizgi-sag {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .4rem 1.2rem;
  margin-left: auto;
}
.yazi__dizgi-sag a { color: var(--ink); }

/* Gövde ile iki ray TEK ızgaradadır ve ızgara TAM GENİŞLİKTİR: orta kolon
   gövdedir (1200px), yan kolonlar ekranın kenarına kadar uzanan artıktır ve
   raylar oraya oturur. Kenar kolonu en az `--edge` genişliğindedir, yani gövde
   dar ekranda da nefes alır.

   `align-items: start` ŞART: aksi halde ray hücreyi baştan sona doldurur,
   kendi boyu satır boyuna eşit olur ve yapışkanlık hiç işlemez. */
.yazi__ana {
  display: grid;
  grid-template-columns:
    minmax(var(--edge), 1fr)
    minmax(0, var(--okuma))
    minmax(var(--edge), 1fr);
  align-items: start;
  padding-top: clamp(2rem, 4vw, 3.5rem);
}
.yazi__in { grid-column: 2; min-width: 0; }

/* Raylar DİKEY okunur: ekranın kenarında yatay metne yer yok, ve dikey künye
   kapaktan kaldırılan hareketin doğru yerdeki karşılığı. Sol ray aşağıdan
   yukarı (kitap sırtı gibi), sağ ray yukarıdan aşağı. */
.yazi__ray { position: sticky; top: 42vh; justify-self: center; }
.yazi__ray--geri { grid-column: 1; }
.yazi__ray--ileri { grid-column: 3; }
.yazi__ray a {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  writing-mode: vertical-rl;
  max-height: 60vh;
}
.yazi__ray--geri a { rotate: 180deg; }
.yazi__ray span {
  font-size: var(--fs-s);
  color: var(--grey);
  white-space: nowrap;
}
/* Dikey yazımda satır uzunluğu YÜKSEKLİKTİR: uzun başlık `max-height` ile
   kesilir, üç nokta ile biter. */
.yazi__ray b {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
  max-height: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.yazi__ray a:hover b { color: var(--gold-deep); }
.yazi__ray a:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 4px; }

.yazi__head { text-align: center; }

.yazi__t {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--fs-d2);
  font-weight: 500;
  line-height: 1.08;
  text-wrap: balance;
}

/* Gövde: 18px, 300 ağırlık (sitenin Poppins sesi — 400 denendi, Yiğit inceyi
   istedi, Eki 2026), mürekkep rengi. Sola yaslı: 1200px satırda iki yana
   yaslama kelime aralarını açıp dikey "ırmaklar" bırakıyor. */
.yazi__body {
  margin-top: clamp(2rem, 4vw, 3rem);
  font-size: var(--fs-sm);
  font-weight: 300;
  line-height: 1.75;
  text-align: left;
  color: var(--ink);
}
.yazi__body > :first-child { margin-top: 0; }
.yazi__body p { margin: 0 0 1.6em; }
.yazi__body h2,
.yazi__body h3 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: var(--ls-tight);
  margin: 2em 0 .6em;
  text-align: left;
}
.yazi__body h2 { font-size: var(--fs-d4); line-height: 1.15; }
.yazi__body h3 { font-size: var(--fs-ml); line-height: 1.2; }
.yazi__body a { color: var(--ink); border-bottom: 1px solid var(--gold); }
.yazi__body blockquote {
  margin: 1.75em 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--gold);
  font-size: var(--fs-m);
  text-align: left;
  color: var(--ink);
}
/* Figür kuralları BURADA DEĞİL `govde.css`'te — panelin editörüyle ORTAK.
   Buraya kopya yazılırsa iki kopya birbirinden sürüklenir ve editörde
   ayarlanan hizalama/sarma yayınlanınca kaybolur. */
.yazi__body ul,
.yazi__body ol { margin: 0 0 1.25em; padding-left: 1.35em; text-align: left; }
.yazi__body li { margin-bottom: .4em; }

/* Kapanış alıntısı — kısa açıklama, metnin sonunda */
.yazi__alinti {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding-left: 1.1rem;
  border-left: 3px solid var(--gold);
  font-size: var(--fs-m);
  line-height: 1.5;
  color: var(--ink);
  white-space: pre-line;   /* şiirden alıntının dizeleri (Post::excerptText) */
}

/* Gövde kolonunun İÇİNDE arka arkaya gelen bölümler (etkinlik sayfasının
   başvurusu ve künyesi) ilk boşluğunu bandın kendi ölçüsünden alır — aradaki
   boşlukları `.basvuru` zaten kendi alt kenarıyla veriyor. Ritim tek
   değişkenden (--band) yönetilsin diye satır içi `margin-top` yazılmaz. */
.yazi__body + section,
.facts + section { margin-top: var(--band); }

/* Gövde ızgarasından SONRA gelen band (etkinlik sayfasının "← etkinlikler"
   çıkışı) kendi üst boşluğunu kendisi alır: `.band` yalnızca ALT dolgu verir ve
   ondan önceki bloğun alt kenarı `.basvuru:last-child` ile sıfırlanıyor. */
.yazi__ana + .band { margin-top: var(--band); }

/* İmza: sağa yaslı, rol adı gri, ad koyu */
.yazi__kunye {
  justify-content: flex-end;
  gap: .25rem 1.5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  font-size: var(--fs-s);
}
.yazi__kunye div { justify-content: flex-end; }
.yazi__kunye dt { color: var(--grey); }
.yazi__kunye dd { color: var(--ink); font-weight: 500; }

/* ---------- GALERİ (partials/galeri — vitrin) ----------
   Dergi eser galerisi + etkinliğin afiş galerisi ve etkinlikten görseller TEK
   bileşendir (karar 19 Eki 2026). Önceden iki dil vardı ve ikisi de görseli
   300×300'e kırpıyordu. İki biçim denendi; VİTRİN seçildi.

   KOYU BANT (#313131, temadan bağımsız). Renk tokenları bant İÇİNDE yeniden
   tanımlanır: künye bileşeni `--ink`/`--grey` okuduğu için tek tek yazılmaz.

   SAHNE GÖRSELİ SARAR: koyu çerçeve her yönden SABİT 20px (telefonda 14px),
   sahnenin boyu seçili görselden gelir; görselin tavanı 560px (telefonda
   420px), dar ekranda genişliğe sığmak için küçülür. Sahne + sağdaki
   küçükler sütunu bandın ORTASINDA durur. Önceden sahne sabit genişlikteydi
   ve dikey bir görselin iki yanında geniş koyu alanlar kalıyordu.

   Yalnızca SEÇİLİ görsel sahnenin boyunu belirler: diğerleri mutlak
   konumludur (akış dışı) — yoksa en büyük görsel sahneyi hep geniş tutardı.
   Geçiş opaklıktır; sahnenin yeni boya oturması canlandırılmaz (layout). */
.galeri {
  --ink: #F0EEE6;
  --ink-2: #DADADA;
  --grey: #BEBBB3;
  --rule: rgb(255 255 255 / .15);
  --gold-deep: var(--gold);
  margin-top: var(--band);
  padding-block: clamp(2.5rem, 5vw, 3.5rem) clamp(3rem, 6vw, 4.5rem);
  background: #313131;
  color: var(--ink);
}
.galeri + .galeri { margin-top: 4px; }

.galeri__t {
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  font-family: var(--serif);
  font-size: var(--fs-d3);
  font-weight: 500;
  line-height: 1.1;
  text-align: center;
}
.galeri__t b { font-weight: inherit; color: var(--gold); }
/* Kenarlara doğru sönen altın çizgi — başlığın kendi alt çizgisinin yerine */
.galeri__t::after {
  content: "";
  display: block;
  width: min(100%, 36rem);
  height: 1px;
  margin: 1rem auto 0;
  background: linear-gradient(to right, transparent, var(--gold) 50%, transparent);
}

.vitrin {
  display: grid;
  /* sahne kolonu içeriği kadar, ama ekrandan geniş olamaz */
  grid-template-columns: minmax(0, max-content) 104px;
  justify-content: center;
  gap: 1.25rem;
  align-items: start;
}
.galeri--tek .vitrin { grid-template-columns: minmax(0, max-content); }

.vitrin__sahne {
  position: relative;
  display: grid;
  margin: 0;
  padding: 20px;
  overflow: hidden;
  background: #262626;
}
.galeri__sahne {
  display: grid;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.galeri__kat {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.galeri__kat:not(.is-acik) {
  position: absolute;
  inset: 20px;
}
.galeri__kat.is-acik {
  opacity: 1;
  visibility: visible;
  transition: opacity .35s ease;
}
.galeri__kat picture { display: block; min-width: 0; }
.galeri__kat img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 560px;
}

.vitrin__kucukler {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  max-height: 600px;
  overflow-y: auto;
  scrollbar-width: none;
}
.vitrin__kucukler::-webkit-scrollbar { display: none; }
.vitrin__kucuk {
  position: relative;
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  opacity: .5;
  transition: opacity .2s ease;
}
/* KARE: 5 küçük (5×104 + 4×.6rem ≈ 560px) sahnenin boyuna sığar; 3:4'te
   beşinci yarım kesiliyordu. Daha fazlası sütunda kayar. Küçükler yalnızca
   seçim içindir — eserin tamamı sahnededir. */
.vitrin__kucuk img { display: block; width: 104px; aspect-ratio: 1; object-fit: cover; }
.vitrin__kucuk:hover { opacity: .85; }
.vitrin__kucuk.is-acik { opacity: 1; }
.vitrin__kucuk.is-acik::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 2px var(--gold);
}

/* Ad + sayaç satırı grubun ALTINDA, iki kolonu da kaplar — ama kendi metni
   ızgaranın genişliğini BELİRLEMEZ (`width: 0; min-width: 100%`): uzun bir
   ad sahne kolonunu genişletip yan boşluğu geri getirmesin. */
.vitrin__alt {
  grid-column: 1 / -1;
  width: 0;
  min-width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem 2rem;
  margin-top: .25rem;
}
.vitrin__bilgi { display: grid; gap: .35rem; min-width: 0; }
.vitrin__ad {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--fs-d4);
  font-weight: 500;
  line-height: 1.1;
}
.galeri__on { margin: 0; font-size: var(--fs-s); color: var(--grey); }
.galeri__kunye { font-size: var(--fs-s); }
.galeri__kunye dt { color: var(--grey); }
.galeri__kunye dd { color: var(--ink); font-weight: 500; }

.vitrin__gez { display: flex; align-items: center; gap: .75rem; flex: none; }
.vitrin__sayac {
  margin: 0 .5rem 0 0;
  font-size: var(--fs-s);
  color: var(--grey);
}
/* Cormorant'ın VARSAYILAN (eski usul) rakamları: lining rakamlarda 0 yuvarlak
   bir O'ya, 1 serifli bir I'ya benziyor ve sayaç "O I" okunuyordu */
.vitrin__sayac span {
  font-family: var(--serif);
  font-size: var(--fs-ml);
  color: var(--ink);
}
.galeri__ok {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / .25);
  border-radius: 50%;
  background: none;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.galeri__ok:hover { background: rgb(255 255 255 / .07); border-color: var(--gold); }
.galeri__ok svg { width: 20px; height: 20px; }

.galeri__ok:focus-visible,
.galeri__sahne:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }
.vitrin__kucuk:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

@media (max-width: 56rem) {
  .vitrin { grid-template-columns: minmax(0, max-content); }
  .vitrin__sahne { padding: 14px; }
  .galeri__kat:not(.is-acik) { inset: 14px; }
  .galeri__kat img { max-height: 420px; }
  /* Şerit sahnenin altında, sahne GENİŞLİĞİNDE kayar — kendi genişliği
     kolonu büyütmez (yoksa sahne gerilir ve yan çerçeve kalınlaşır) */
  .vitrin__kucukler { flex-direction: row; max-height: none; overflow-x: auto; width: 0; min-width: 100%; }
  .vitrin__kucuk img { width: 72px; }
  .vitrin__alt { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .galeri__kat,
  .galeri__kat.is-acik,
  .vitrin__kucuk,
  .galeri__ok { transition: none; }
}

/* Dar ekran: kenar kolonu dikey metni taşıyamayacak kadar incelir (--edge
   1024px'in altında ~40px'in altına düşer) — ızgara tek kolona iner ve raylar
   `order` ile metnin ALTINA, yatay bir gezinme satırına dönüşür. İkinci bir
   markup yazılmaz, aynı bağlantılar yerini ve yönünü değiştirir. */
@media (max-width: 64rem) {
  .yazi__ana {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: var(--edge);
  }
  .yazi__in { grid-column: 1; order: 1; }

  .yazi__ray {
    grid-column: 1;
    position: static;
    width: 100%;
  }
  .yazi__ray a {
    writing-mode: horizontal-tb;
    align-items: baseline;
    max-height: none;
  }
  .yazi__ray--geri a { rotate: none; }
  .yazi__ray--ileri a { justify-content: flex-end; }
  .yazi__ray b { max-height: none; }

  .yazi__ray--geri { order: 2; padding-top: clamp(2rem, 5vw, 3rem); }
  .yazi__ray--ileri { order: 3; padding-top: .9rem; }
}

/* (Burada bir `.eser__reel` kuralı duruyordu: galeri yatay şeritken kullanılan
   sınıftı, levha sayfasına geçilince markup'tan düştü ama kural kaldı. Yanındaki
   `.yazi__body { text-align: left }` de taban kuralın tekrarıydı.) */

/* ---------- etkinlik olguları ---------- */

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1.25rem 2rem;
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}
.facts div { display: flex; flex-direction: column; gap: .3rem; }
.facts dt {
  font-size: var(--fs-s);
  color: var(--grey);
}
.facts dd {
  margin: 0;
  font-size: var(--fs-m);
  line-height: 1.3;
}

/* ---------- arşiv süzgeçleri ---------- */

.filters {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-top: 1.5rem;
}

/* Satır aralığı, bağlantıların KENDİ dolgusuyla birlikte düşünülür: süzgeç
   bağlantıları (özellikle "11", "16" gibi iki haneli sayı numaraları) dolgusuz
   hâlde 8–17px genişliğindeydi, yani dokunma hedefi için asgari 24×24'ün çok
   altında. Dolgu bağlantıya, boşluk satıra: ikisi birlikte eski görünümü korur. */
.filters__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2rem .55rem;
  font-size: var(--fs-s);
}

.filters__label {
  min-width: 4.5rem;
  font-size: var(--fs-s);
  color: var(--grey);
}

.filters__row a {
  min-width: 1.5rem;
  padding: .25rem .4rem;
  text-align: center;
  color: var(--ink-2);
  border-bottom: 2px solid transparent;
  transition: border-color .2s ease, color .2s ease;
}
.filters__row a:hover { color: var(--ink); border-bottom-color: var(--rule); }
.filters__row a[aria-current] { color: var(--ink); border-bottom-color: var(--gold); }

/* ---------- etkinlikler sayfası ----------
   YERLEŞİM ESKİ SİTENİN /etkinlikler/ SAYFASINDAN, CANLIDA ÖLÇÜLEREK ALINDI
   (2 Ağu 2026). 1200px gövdede iki kolon: solda 800 (yaklaşanlar), sağda 400
   (takvim). Alt bölüm tam genişlikte: başlık, süzgeç şeridi, kart ızgarası.

   Referansın hiç yapmadığı iki şeyi biz yaparız ve ikisi de zorunlu:
   1240'ta kolonlar tek kolona iner (referansta 900px'te takvim ekrandan
   taşıyordu) ve süzgeç JS'siz de gönderilir. */

/* İKİ LİSTENİN KARTI AYNI BOYDADIR (karar 19 Eki 2026). Önceden üstteki
   "yaklaşan" ızgarası sayfanın 2/3'ünü 3'e, alttaki "geçmiş" ızgarası tam
   genişliği 4'e bölüyordu — kartlar farklı boydaydı. Kolon genişliği artık
   `.etk` kabından türetilir (`cqi` = kabın iç genişliği) ve İKİ ızgara da onu
   kullanır; üstteki ızgara o genişlikten sığdığı kadar kolon alır
   (`auto-fill`): masaüstünde 2, üst blok tek kolona indiğinde alttakiyle aynı
   sayıda. Kolon sayıları `.grid`in kırılımlarıyla aynıdır (4 → 3 → 2 → 1). */
.etk {
  container-type: inline-size;
  --etk-kolon: 4;
}
.etk .grid { grid-template-columns: repeat(auto-fill, calc((100cqi - (var(--etk-kolon) - 1) * var(--gut)) / var(--etk-kolon))); }
@media (max-width: 64rem) { .etk { --etk-kolon: 3; } }
@media (max-width: 46rem) { .etk { --etk-kolon: 2; } }
@media (max-width: 30rem) { .etk { --etk-kolon: 1; } }

.etk__ust {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--gut);
  padding-top: clamp(2rem, 4vw, 3.25rem);
}

/* Başlığın altındaki ince çizgi — referansta başlıkla arası 12px */
.etk__rule {
  margin-top: .75rem;
  border-bottom: 1px solid var(--rule);
}

/* TAKVİM BAŞLIĞI: yazı tipi ve altın alt çizgi BİZİMDİR (tek başlık biçimi),
   BOYUT ve KALINLIK canlıdan (24px/400, 18 Eki 2026). SAĞ KENARI TAKVİMİN
   sağ kenarıyla hizalıdır; dikey ay adı bunun dışında, takvimin sağında
   kalır. Bir süre takvimden taşıyordu. */
.etk__sag { justify-self: end; }
.etk__th {
  width: var(--takvim-w);
  margin: 0;
  font-family: var(--serif);
  /* Canlı Poppins 24px → Cormorant karşılığı (≈34) */
  font-size: calc(var(--fs-ml) * var(--serif-oran));
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: var(--ls-tight);
  text-align: right;
}
.etk__th b { font-weight: inherit; color: var(--gold); }

/* Takvim + SAĞINDAKİ dikey ay adı; ay adı takvimin dikey ortasında */
.etk__takvim {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 1rem;
}
/* 7 × 49px; dar ekranda ay sütununa (≈40px) yer kalacak kadar daralır */
.etk__sag { --takvim-w: min(calc(7 * 49px), calc(100vw - 2 * var(--edge) - 40px)); }

.etk__gecmis { margin-top: var(--band); }

/* ---------- ay takvimi ----------
   Canlıdan (18 Eki 2026): hücre 49×64, başlık satırı 44, gün dairesi 34×34.
   Başlık satırı ve gövde AYNI soluk zemindedir (canlıda #FAFAFA, sayfadan
   ancak seçilir). Yalnızca SOL köşeler yuvarlaktır — üst-sol ve alt-sol
   (canlıda `9999px`, hücre ölçüsüyle sınırlanır). Satır sayısı ayın
   ihtiyacı kadardır (bkz. EventCalendar::weeks). */
.takvim {
  flex: 0 0 var(--takvim-w);
  width: var(--takvim-w);
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.takvim th,
.takvim__h { background: color-mix(in srgb, var(--grey) 5%, transparent); }

.takvim th {
  padding: 10px 0;
  font-size: var(--fs-s);
  font-weight: 300;
  line-height: 24px;
  color: var(--grey);
  text-align: center;
}
.takvim thead th:first-child { border-top-left-radius: 9999px; }
.takvim tbody tr:last-child .takvim__h:first-child { border-bottom-left-radius: 9999px; }

.takvim__h {
  padding: 15px 0;
  text-align: center;
  vertical-align: top;
}

/* Gün: 34×34'lük daire. Dingin hâlde kenarı görünmez — bugün ALTIN HALKA,
   etkinliği olan gün DOLU DAİREdir. İkisi aynı kutuyu kullandığı için gün
   sayıları hiçbir durumda yerinden oynamaz. */
.takvim__g {
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  border: 1px solid transparent;
  border-radius: 9999px;
  font-size: var(--fs-s);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink-2);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* Ayın dışında kalan günler soluk (referansta da basılırlar: ızgara ay ay
   farklı yükseklikte olmasın) */
.takvim__h.is-disi .takvim__g { color: color-mix(in srgb, var(--grey) 55%, transparent); }

.takvim__h.is-bugun .takvim__g { border-color: var(--gold); }

/* ETKİNLİĞİ OLAN GÜN — dolu altın daire. Şu an hiç etkinlik yok, işaret ilk
   etkinlik girildiği gün kendiliğinden çıkar (bkz. App\Support\EventCalendar). */
/* Dolu gün etkinliğin KENDİ RENGİNDEDİR (canlıdaki gibi); rakamın rengi o
   renge göre seçilir (Event::inkOnColor). Renk yoksa altın. */
.takvim__h.is-dolu .takvim__g {
  background: var(--etk-renk, var(--gold));
  border-color: var(--etk-renk, var(--gold));
  color: var(--etk-murekkep, #1A1714);
  font-weight: 400;
}

/* ETKİNLİK KARTI — YAPI CANLIDAN (etkinlikler, 1440, ölçüldü 19 Eki 2026):
   kart 25px yuvarlak; afişin altında solda 20px'lik, sol alt köşesi 25px
   yuvarlak, etkinliğin KENDİ RENGİNDE şerit; şeridin sağında 4/16/10/20 iç
   boşluklu, SAĞA YASLI bilgi bloğu (canlıdaki gibi tarih + başlık). Hover
   gölgesi canlıdan (0 8px 16px); canlının scale(1.005)'i ALINMADI — afiş
   hover'da kımıldamaz (karar 19 Eki).
   Canlıdan bilinçli farklar: boyut bizim (ızgara kolonu, afiş 4:5 — canlıda
   247×280), yazı tipi rolleri bizim (başlık Cormorant, büyük harf yok) ve
   canlıda olmayan TÜR + YER (hover'da görünür).

   Kart köşelerini KENDİ KIRPAR (`overflow: hidden`): renk katmanı ve afiş
   ayrı ayrı yuvarlatılmaz, kenarda ek yeri kalmaz. `container-type` kartın
   genişliğini `cqi` olarak verir — afişin boyu = 125cqi (4:5). */
.etk-kart { container-type: inline-size; }
.etk-kart > a {
  position: relative;
  gap: 0;
  overflow: hidden;
  border-radius: var(--kart-kose);
  transition: box-shadow .3s ease;
}
/* Afiş ayrıca yuvarlatılmaz: alt köşeleri şeridin üstünde boşluk açardı */
.etk-kart .card__media { border-radius: 0; }
.etk-kart > a:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
@media (hover: hover) {
  .etk-kart:hover > a { box-shadow: 0 8px 16px rgb(0 0 0 / .3); }
}
.etk-kart:hover .card__media img { transform: none; }

/* RENK KATMANI — kartın TAMAMINI kaplayan TEK yüzey; dinginken afişin altında
   20px'lik şeride MASKELİDİR, hover'da maske açılır ve kartın hepsini (afiş
   dahil) boyar. Tek yüzey olduğu için iki rengin birleştiği çizgi yoktur.

   Katman kartın 2px DIŞINA taşar (`inset: -2px`), fazlasını kartın kendi
   yuvarlak kırpması keser: kartın genişliği küsuratlıdır (ör. 276.23px) ve
   kenarda biten bir katman son piksel sütununu yarım kaplıyordu — 1x ekranda
   sağ kenarda afişten ince koyu bir sütun sızıyordu (19 Eki 2026).

   Şeridin sol alt yuvarlaklığı ayrıca yazılmaz: kartın 25px köşesidir.

   MASKE iki degradenin KESİŞİMİDİR — yatay (`--etk-x`: soldan dolu genişlik)
   ve dikey (`--etk-y`: üstten boş yükseklik). Kenarın YUMUŞAKLIĞI ilerlemeden
   türer: dinginken 0 (şerit keskin), şerit ilerledikçe 48px'e kadar açılır.
   İki değişken `@property` ile kayıtlıdır — kayıtsız değişken canlanmaz, atlar.
   Afişin boyu `125cqi`dir (kart = kap, afiş 4:5). */
@property --etk-x { syntax: '<length-percentage>'; inherits: false; initial-value: 22px; }
@property --etk-y { syntax: '<length>'; inherits: false; initial-value: 0px; }
.etk-kart > a::before {
  --etk-x: 22px;                       /* 2px taşma + 20px şerit */
  --etk-y: calc(125cqi + 2px);         /* afişin alt kenarı */
  content: "";
  position: absolute;
  inset: -2px;
  z-index: 1;
  background: var(--etk-renk, var(--gold));
  mask-image:
    linear-gradient(to right,
      #000 var(--etk-x),
      transparent calc(var(--etk-x) + clamp(0px, var(--etk-x) - 22px, 48px))),
    linear-gradient(to bottom,
      transparent calc(var(--etk-y) - clamp(0px, 125cqi + 2px - var(--etk-y), 48px)),
      #000 var(--etk-y));
  mask-composite: intersect;
  pointer-events: none;
}

.etk-kart__bilgi {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .15rem;
  min-height: 72px;
  padding: 4px 16px 10px 40px;   /* 20px şerit + canlının 20px'i */
  text-align: right;
}
.etk-kart .card__kind { margin-top: 0; }
.etk-kart__ek {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .1rem;
}
.etk-kart__tur { font-weight: 500; color: var(--ink); }

/* ETKİNLİK KARTI — HOVER (karar 19 Eki 2026). Dingin hâlde tarih + başlık ve
   solda renk şeridi. Hover'da ŞERİT GENİŞLER ve KARTIN TAMAMINI kaplar —
   sağa ve yukarı birlikte (afişin üstüne); yazılar renge göre seçilen
   mürekkebe döner (`--etk-murekkep` = Event::inkOnColor, takvimdeki dolu
   günle aynı kural) ve tür + konum, bilgi bloğunun ÜSTÜNDE (mutlak
   konumlu, `bottom: 100%`) gecikmeyle belirir. Kartın boyu değişmez, afiş
   kımıldamaz — yalnızca üstü örtülür.

   Hareket YALNIZCA maske konumu (kayıtlı değişken) / opacity / transform /
   color ile (layout canlandırılmaz, bkz. CLAUDE.md).

   Fareli cihaz şartıyla (`hover: hover`): dokunmatikte ek alan AKIŞTA kalır
   ve hep görünür (renksiz) — yoksa tür ve konuma hiç ulaşılamazdı. Klavyeyle
   karta gelince de açılır (`:focus-within`). */
@media (hover: hover) {
  .etk-kart > a::before {
    /* İlk hover'da katman ilk kez çizilip ilk kareler düşmesin: önceden hazır */
    will-change: mask-image;
    transition: --etk-x .55s cubic-bezier(.22, 1, .36, 1), --etk-y .55s cubic-bezier(.22, 1, .36, 1);
  }
  .etk-kart__bilgi .card__kind,
  .etk-kart__bilgi .card__t { transition: color .3s ease; }

  .etk-kart__ek {
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    padding: 12px 16px 5px 40px;
    color: var(--etk-murekkep, #1A1714);
  }
  .etk-kart__ek > * {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .25s ease, transform .4s cubic-bezier(.22, 1, .36, 1);
  }
  .etk-kart__ek .etk-kart__tur,
  .etk-kart__ek .card__a { color: inherit; }

  /* Sona varınca yumuşak kenar da kartın DIŞINDA kalır: +48px */
  .etk-kart:hover > a::before,
  .etk-kart:focus-within > a::before {
    --etk-x: calc(100% + 48px);
    --etk-y: -48px;
  }
  .etk-kart:hover .etk-kart__ek > *,
  .etk-kart:focus-within .etk-kart__ek > * {
    opacity: 1;
    transform: none;
    /* Renk afişin alt kısmını örtmeden yazı belirmesin (yavaş çekimde ölçüldü) */
    transition-delay: .26s;
  }
  .etk-kart:hover .etk-kart__bilgi .card__kind,
  .etk-kart:hover .etk-kart__bilgi .card__t,
  .etk-kart:focus-within .etk-kart__bilgi .card__kind,
  .etk-kart:focus-within .etk-kart__bilgi .card__t { color: var(--etk-murekkep, #1A1714); }
}
@media (prefers-reduced-motion: reduce) {
  .etk-kart > a,
  .etk-kart > a::before,
  .etk-kart__bilgi .card__kind,
  .etk-kart__bilgi .card__t,
  .etk-kart__ek > * { transition: none; }
}
.takvim__h.is-dolu .takvim__g:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Ay adı takvimin SAĞINDA, dikey ve harfleri DİK ("E / K / İ / M") —
   yerleşim, boyut ve kalınlık canlıdan (24px/400, harf adımı ~33px, büyük
   harf PHP'de); yazı tipi bizim (Cormorant). Bir süre üstte ve yataydı. */
.takvim__ay {
  margin: 0;
  writing-mode: vertical-lr;
  text-orientation: upright;
  font-family: var(--serif);
  font-size: calc(1.5rem * var(--serif-oran-buyuk));   /* BÜYÜK harf: oran 1.11 */
  font-weight: 400;
  line-height: 36px;
  letter-spacing: -3px;
  color: var(--ink);
}

/* ---------- etkinlik sayfası ----------
   YERLEŞİM CANLIDAN BİREBİR (etkinlik-post/fast, 1440, 18 Eki 2026): 1200px
   gövdede iki eşit kolon (540 + 540), aralarında 120px ve ORTADA dikey çizgi.
   Afiş sol kolonun ortasında 377×500 ve kırpılır; afişin üstü menüden 78px.
   Etiketli bölümler: etiket 18px, 4px iç boşluk, üstte ve altta çizgi, altın
   alt çizgi. Sağda başlık 48px/700, tür, sağa yaslı tarih satırı + çizgi,
   iki yana yaslı açıklama, sağa yaslı künye.
   Yazı tipi rolleri ve küçük harf bizimdir (bkz. etkinlik.blade.php). */

.etkp__in {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 120px;
  align-items: start;
  padding-block: 78px 2rem;
}
.etkp__in::before {
  content: "";
  position: absolute;
  top: 30px;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--ink);
}

.etkp__afis {
  display: block;
  width: 377px;
  max-width: 100%;
  margin: 0 auto 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.etkp__afis picture { display: block; }
.etkp__afis img { display: block; width: 100%; aspect-ratio: 377 / 500; object-fit: cover; }
.etkp__afis:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

.etkp__bolum + .etkp__bolum { margin-top: 40px; }
/* Etiket CORMORANT'tır (başlık rolü). Canlıda Poppins 18/400 idi; Cormorant'ın
   x-yüksekliği küçük olduğu için 24'te küçük, 32'de iri kaldı — 20px Poppins
   kadar görünen Cormorant: ≈28px (`--serif-oran`, karar 19 Eki 2026). Altın
   alt çizgi sitenin tek süs çizgisidir (bkz. ".phead__t, .bandhead__t"). */
.etkp__et {
  margin: 0;
  padding: 4px;
  border-block: 1px solid var(--ink);
  font-family: var(--serif);
  font-size: calc(var(--fs-m) * var(--serif-oran));
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}
.etkp__bolum p {
  margin: 13px 0 0;
  padding-inline: 4px;
  font-size: var(--fs-s);
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink);
}

.etkp__t {
  margin: 0;
  font-family: var(--serif);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: var(--ls-tight);
  overflow-wrap: anywhere;
}
.etkp__tur { margin: .25rem 0 0; font-family: var(--serif); font-size: var(--fs-ml); color: var(--grey); }
.etkp__tur a { color: inherit; transition: color .2s ease; }
.etkp__tur a:hover { color: var(--etk-renk, var(--gold-deep)); }

.etkp__tarih {
  margin: 1.5rem 0 0;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--ink);
  font-size: var(--fs-s);
  color: var(--ink-2);
  text-align: right;
}
.etkp__tarih time,
.etkp__tarih span {
  margin-left: .35rem;
  font-weight: 300;
  color: var(--ink);
}

.etkp__govde {
  margin-top: 1.75rem;
  padding-inline: 4px;
  font-size: var(--fs-s);
  font-weight: 300;
  line-height: 1.5;
  text-align: justify;
  hyphens: auto;
  color: var(--ink);
}

.etkp__kunye {
  justify-content: flex-end;
  margin-top: 2rem;
  font-size: var(--fs-s);
  text-align: right;
}
.etkp__kunye div { justify-content: flex-end; }
.etkp__kunye dt { color: var(--grey); }
.etkp__kunye dd { color: var(--ink); font-weight: 500; }

.etkp__basvuru { margin: var(--band) 0 0; }
.etkp__kapandi { margin: 2rem 0 0; font-size: var(--fs-s); color: var(--grey); text-align: right; }


@media (max-width: 64rem) {
  .etkp__in { grid-template-columns: minmax(0, 1fr); row-gap: 3rem; padding-top: 2.5rem; }
  .etkp__in::before { display: none; }
  .etkp__sag { order: -1; }
}

/* ---------- etkinlik süzgeci ----------
   Eski sitedeki üç hap: arama · türler · şehirler. Bizde normal bir GET
   formudur — JS düşse de gönderilir ve süzülmüş adres paylaşılabilir. */
.suzgec {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: .5rem 0 1rem;
}

.suzgec__alan { flex: 1 1 220px; margin: 0; }
.suzgec__eylem {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin: 0;
}

.suzgec__yazi,
.cs__tetik {
  width: 100%;
  padding: .5rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--fs-s);
  font-weight: 300;
  line-height: 1.5;
  transition: border-color .2s ease;
}
.suzgec__yazi:hover,
.cs__tetik:hover { border-color: var(--ink-2); }

/* ---------- çoklu seçim süzgeci ----------
   Bir eksende birden çok değer: kapalıyken seçilenler HAP olarak tetiğin
   içinde durur, açıkken kutu tetiğin altına iner.

   JS'SİZ ASIL HÂLİ AÇIK KUTUDUR (tetik `hidden` doğar): sayfa o zaman sıradan
   bir onay kutusu listesidir ve "süz" ile gönderilir. Aşağıdaki kurallar bu
   yüzden kutuyu iki durumda da yaşayacak biçimde yazılır — `.cs--js` yalnızca
   JS devraldığında eklenir. */
.cs { position: relative; }

.cs__tetik {
  display: flex;
  align-items: center;
  gap: .4rem;
  min-height: 42px;
  text-align: left;
  cursor: pointer;
}
.cs__tetik[hidden] { display: none; }

.cs__ic {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem;
  flex: 1 1 auto;
  min-width: 0;
}
.cs__yer { color: var(--grey); }

/* Seçilen değer — "×" AYRI BİR DÜĞME DEĞİL (button içinde button olmaz),
   tıklaması tetiğin dinleyicisinde ayrıştırılır. */
.cs__hap {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .05rem .5rem;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 14%, transparent);
  color: var(--ink);
  white-space: nowrap;
}
.cs__hap b { font-weight: 300; color: var(--grey); }
.cs__hap:hover b { color: var(--ink); }

/* Ok imi açıkken döner — üst menüdeki `.hd__caret` ile aynı aygıt */
.cs__ok {
  flex: 0 0 auto;
  color: var(--grey);
  transition: transform .22s ease;
}
.cs__tetik[aria-expanded="true"] .cs__ok { transform: rotate(180deg); }

/* Kutunun köşeleri tetikle UYUMLU yuvarlaktır (hap 999px, kutu 20px): kutu
   bir hap kadar yuvarlatılamaz, ama keskin köşeli bir kutu haplı bir tetiğin
   altında yabancı durur. */
.cs__kutu {
  margin: 0;
  padding: .5rem;
  border: 1px solid var(--rule);
  border-radius: 20px;
  background: var(--paper);
}
.cs__bas {
  padding: 0 .5rem .25rem;
  font-size: var(--fs-s);
  color: var(--grey);
}

/* JS devraldığında kutu tetiğin ALTINA açılan bir katmandır */
.cs--js .cs__kutu {
  position: absolute;
  z-index: 20;
  top: calc(100% + .4rem);
  left: 0;
  right: 0;
  max-height: 17rem;
  overflow-y: auto;
  box-shadow: 0 18px 40px -24px rgb(0 0 0 / .55);
}
.cs--js .cs__bas { display: none; }
.cs__kutu[hidden] { display: none; }

.cs__satir {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem .6rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .18s ease;
}
.cs__satir:hover { background: var(--paper-2); }
.cs__satir input { position: absolute; opacity: 0; width: 0; height: 0; }
.cs__satir:has(input:focus-visible) { outline: 2px solid var(--gold-deep); outline-offset: 2px; }

/* İm: boş çember → seçilince dolu çember + tik. Onay kutusunun kendisi
   gizlidir ama DOM'da durur; gönderilen şey odur. */
.cs__im {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 18px; height: 18px;
  border: 1px solid var(--grey);
  border-radius: 999px;
  transition: background-color .18s ease, border-color .18s ease;
}
.cs__im::after {
  content: "";
  width: 8px; height: 5px;
  border-left: 2px solid var(--paper);
  border-bottom: 2px solid var(--paper);
  rotate: -45deg;
  translate: 0 -1px;
  opacity: 0;
  transition: opacity .18s ease;
}
.cs__satir:has(input:checked) .cs__im {
  background: var(--ink);
  border-color: var(--ink);
}
.cs__satir:has(input:checked) .cs__im::after { opacity: 1; }
.cs__ad { color: var(--ink-2); }
.cs__satir:has(input:checked) .cs__ad { color: var(--ink); }

/* Süzgecin gönder düğmesi BİRİNCİL düğmedir (`.dugme` ile aynı altın dolgu);
   "temizle" ikincildir. Önceden siyah haptı — birincil eylemin rengi ekrandan
   ekrana değişiyordu. */
.suzgec__hap {
  display: inline-block;
  padding: .5rem 1.25rem;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: var(--gold);
  color: #1A1714;
  font-family: inherit;
  font-size: var(--fs-s);
  font-weight: 300;
  line-height: 1.5;
  cursor: pointer;
  transition: opacity .2s ease, border-color .2s ease;
}
.suzgec__hap:hover { opacity: .84; }
.suzgec__hap--bos { border-color: var(--rule); background: transparent; color: var(--ink); }
.suzgec__hap--bos:hover { opacity: 1; border-color: var(--ink); }

@media (max-width: 64rem) {
  /* Referansta bu kırılım YOKTU ve 900px'te takvim ekrandan taşıyordu */
  .etk__ust { grid-template-columns: minmax(0, 1fr); }
  .etk__sag { justify-self: start; }
}

@media (max-width: 46rem) {
  /* Süzgeç alanları alt alta: yarım kalan bir kutu haplı biçimi bozuyor */
  .suzgec__alan { flex-basis: 100%; }
}

/* ---------- boş durum ---------- */

/* Etkinlik sayfasında canlıdaki gibi: çizginin hemen altında, gövde boyunda,
   altında ikinci bir çizgi yok (canlı 16px/300, çizgiyle arası 12px) */
.etk .empty { margin-top: .75rem; padding: 0; border-bottom: 0; }
.etk .empty p { font-size: var(--fs-s); font-weight: 300; }

.empty {
  margin-top: 1.75rem;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0;
  border-bottom: 1px solid var(--rule);
  text-align: center;
}
.empty p {
  font-size: var(--fs-ml);
  color: var(--grey);
  margin: 0;
}

/* ---------- sayfalama ---------- */

.pager {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: 2.25rem;
  font-size: var(--fs-s);
}
.pager a,
.pager span {
  padding: .4em .85em;
  border: 1px solid var(--rule);
  color: var(--ink-2);
}
.pager a:hover { border-color: var(--gold); color: var(--ink); }
.pager [aria-current] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.pager .disabled { opacity: .4; }

/* SONSUZ KAYDIRMA (site.js). Sayfalama DOM'da kalır — gözcünün işareti odur
   ve istek düşerse elle devam yolu olarak geri görünür — ama JS devraldığında
   görünmez. Yer tutucu ince bir altın çizgidir: dilim gelirken kayar. */
[data-sayfalama].is-sonsuz {
  height: 0;
  margin: 0;
  overflow: hidden;
  visibility: hidden;
}
[data-sonsuz].is-yukleniyor::after {
  content: "";
  grid-column: 1 / -1;
  height: 2px;
  margin-top: 1.5rem;
  background: linear-gradient(90deg, transparent, var(--gold), transparent) 0 0 / 40% 100% no-repeat;
  animation: sonsuz-kay 1s linear infinite;
}
@keyframes sonsuz-kay {
  from { background-position: -40% 0; }
  to   { background-position: 140% 0; }
}
@media (prefers-reduced-motion: reduce) {
  [data-sonsuz].is-yukleniyor::after { animation: none; background-size: 100% 100%; opacity: .5; }
}

.arsiv-onceki { margin: 1rem 0 0; font-size: var(--fs-s); }
.arsiv-onceki a { color: var(--ink-2); border-bottom: 1px solid var(--rule); }
.arsiv-onceki a:hover { color: var(--ink); border-bottom-color: var(--gold); }

/* ---------- footer ----------
   CANLIDAN (18 Eki 2026, 1440): siyah bant, üstte 50 / altta ~65px; solda
   160px logo + üç paragraf, sağ kolon x≈919 (≈ 2fr / 1fr) "sosyal medya" ve
   50×50'lik altı ikon (25px beyaz SVG, aralık 5px).

   ZEMİN ALTINDIR (karar 18 Eki 2026) — "bize katıl." çağrı bandının (`.cta`)
   rengi: `--gold`, mürekkep sabit #1A1714 (iki temada da koyu; `.cta` ile aynı
   gerekçe). Bir süre canlıdaki gibi siyah, sonra #313131'di. Logo tek renk
   siyahtır: renkli logonun "ART"ı altın zeminde kaybolurdu, `brightness(0)`
   saydamlığı koruyarak bütün harfleri siyaha çeker (ayrı dosya gerekmez).
   Canlıdan iki bilinçli sapma: paragraflar 14 değil 16px (punto tabanı
   kuralı, CLAUDE.md) ve başlık Cormorant (yazı tipi rolü: başlık Cormorant —
   Poppins 24px ile aynı görünür boy için 32px, x-yüksekliği ölçüldü). */

.ft {
  margin-top: var(--band);
  background: var(--gold);
  color: #1A1714;
  border-top: 1px solid rgb(26 23 20 / .2);
}

.ft__in {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 2rem var(--gut);
  padding-block: 50px 65px;
  font-size: var(--fs-s);
  line-height: 1.5;
}
.ft__in p { margin: 0; }
.ft__sol p + p { margin-top: .9em; }

.ft__in .ft__logo { margin: 0 0 1.5rem; line-height: 0; }
.ft__logo img { width: 160px; height: auto; filter: brightness(0); }

.ft__t {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--fs-l);
  font-weight: 400;
  line-height: 1.15;
  color: #1A1714;
}

.ft__sosyal {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.ft__in .ft__sosyal { margin-top: 1rem; }
.ft__sosyal a {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  color: #1A1714;
  transition: color .2s ease, transform .2s ease;
}
.ft__sosyal svg { width: 25px; height: 25px; fill: currentColor; }
.ft__sosyal a:hover { color: #FFFFFF; transform: translateY(-2px); }
.ft__sosyal a:focus-visible { outline: 2px solid #1A1714; outline-offset: -4px; }

/* "bize katıl" sağ kolonda sosyal medyanın altındadır (karar 18 Eki 2026).
   Altın zeminde altın düğme olmaz — mürekkep zemine döner. */
.ft__t--katil { margin-top: 2.25rem; }
.ft__dugme {
  display: inline-block;
  margin-top: 1rem;
  padding: .68em 1.55em;
  border-radius: 999px;
  background: #1A1714;
  color: var(--gold);
  font-size: var(--fs-sm);
  transition: transform .22s ease;
}
.ft__dugme:hover { transform: translateY(-2px); }
.ft__dugme:focus-visible { outline: 2px solid #1A1714; outline-offset: 3px; }

@media (max-width: 46rem) {
  .ft__in { grid-template-columns: minmax(0, 1fr); padding-block: 40px 48px; }
  .ft__in .ft__sosyal { margin-left: -12px; }
}

/* ---------- giriş hareketi ---------- */

.in { opacity: 0; transform: translateY(8px); }
.lit .in {
  opacity: 1;
  transform: none;
  transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--d, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
  .in { opacity: 1; transform: none; }
}

/* ---------- pencere (serbest işin açıldığı yer) ----------
   Serbest içeriğin KENDİ SAYFASI YOKTUR: iş arşivde bu pencerede açılır
   (bkz. PostType::hasOwnPage). Kabuk `site.js` tarafından kurulur, gövdesi
   sunucuda basılır — biçimlendirme JS'te tekrarlanmaz.

   ÇERÇEVE EKRANA GÖRE SABİTTİR (Instagram önerisi A2, 22 Eki 2026 — önceki
   900×600 kuralının yerine): boy işten işe DEĞİŞMEZ, yalnızca ekranla değişir,
   yani ileri/geri gezinirken ekran yine zıplamaz. Görsel sütunu ~%65'tir ve
   görsel KIRPILMAZ (`contain`); kalan şeritleri aynı görselin bulanık kopyası
   doldurur, pencere "yarım dolu" görünmez (2 Ağu 2026'da `cover`a geçilmesinin
   sebebi buydu). Görsel payı %60'tır (Yiğit, 22 Eki 2026; ilk deneme %65). */

.pencere {
  /* İşten işe oklar (‹ ›) pencerenin DIŞINDA durur: iki yanda 5rem pay */
  width: min(1240px, calc(100vw - 10rem));
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
  color: var(--ink);
  /* Yatay parmak hareketi SAYFANINDIR (site.js: komşu iş / görsel). Bu olmadan
     tarayıcı sağa kaydırmayı kendi "geri" hareketi sayıp önceki sayfaya
     gidiyordu (ölçüldü). Dikey kaydırma ve iki parmakla büyütme tarayıcıda kalır. */
  touch-action: pan-y pinch-zoom;
  overscroll-behavior: contain;
}
/* Chrome'un yatay "geri" hareketi yalnızca KÖK öğedeki ayarla kapanır */
html:has(.pencere[open]) { overscroll-behavior-x: none; }
.pencere::backdrop { background: rgb(0 0 0 / .8); }

.pencere__in {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(20rem, 2fr);
  width: 100%;
  height: min(86vh, 820px);
  background: var(--paper);
  overflow: hidden;
}

/* --- görsel sütunu: sabit kutu, kırpılmayan görsel, bulanık zemin --- */

.pencere__media {
  position: relative;
  background: #1A1714;
  overflow: hidden;
}

.pencere__kare {
  position: absolute;
  inset: 0;
  display: none;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.pencere__kare.is-acik { display: block; }
.pencere__kare picture { display: block; width: 100%; height: 100%; }
/* GÖRSEL KIRPILMAZ: oran korunur, kutuya sığar. */
.pencere__kare > picture { position: relative; z-index: 1; }
.pencere__kare > picture img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Zemin: aynı görsel, kutuyu doldurur, bulanık ve sönük. Kenarı bulanıklıktan
   açılmasın diye büyütülür (taşan kısım `overflow: hidden` ile kesilir). */
.pencere__zemin { position: absolute; inset: 0; }
.pencere__zemin picture { display: block; width: 100%; height: 100%; }
.pencere__zemin img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(32px) saturate(1.15);
  transform: scale(1.2);
  opacity: .55;
}

/* Oklar ve sayaç görselin ÜSTÜNDE: karedeki görsel `z-index: 1` taşır (bulanık zeminin
   üstüne çıksın diye) — okların z-index'i yokken görsel onları örtüyordu ve oka tıklamak
   görsele tıklamak olup büyüteci açıyordu (28 Eki 2026, ölçüldü). */
.pencere__gez,
.pencere__sayac { z-index: 2; }

.pencere__gez {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 0;
  background: rgb(0 0 0 / .35);
  color: #fff;
  font-size: var(--fs-ml);
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s ease;
}
.pencere__media:hover .pencere__gez,
.pencere__gez:focus-visible { opacity: 1; }

/* Dokunmatikte hover diye bir şey yok: okları hover'a bağlamak, çok görselli
   bir işte ileri/geri gezinmeyi telefonda TAMAMEN görünmez kılıyordu (sayaç
   "1 / 4" yazıyor ama çevirecek bir şey görünmüyor). Kalıcı görünürler. */
@media (hover: none) {
  .pencere__gez { opacity: 1; }
}
.pencere__gez--geri { left: .4rem; }
.pencere__gez--ileri { right: .4rem; }

.pencere__sayac {
  position: absolute;
  right: .6rem;
  bottom: .5rem;
  margin: 0;
  padding: .15rem .5rem;
  background: rgb(0 0 0 / .45);
  color: #fff;
  font-size: var(--fs-s);
}

/* --- künye sütunu --- */

.pencere__meta {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: clamp(1.4rem, 2.5vw, 2.2rem);
  overflow-y: auto;
}

/* FİLİGRAN — canlıdan ölçüldü (16 Eki 2026): sütunun tamamını kaplayan
   `::before`, dikey logo `contain` + sağ-orta, %20 opaklık. Logo kuralının
   aynısı: "SOF" tema başına renk değiştirir, "ART" altın kalır — İKİ DOSYA,
   gizleme iki kez yazılır (bkz. header.css). `z-index: -1` sütunun kendi
   yığın bağlamında kalır: metnin altında, zeminin üstünde. */
.pencere__meta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("assets/filigran-siyah.png") 100% 50% / contain no-repeat;
  opacity: .2;
  pointer-events: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="light"]) .pencere__meta::before { background-image: url("assets/filigran-beyaz.png"); }
}
:root[data-tema="dark"] .pencere__meta::before { background-image: url("assets/filigran-beyaz.png"); }

/* İŞİN SAHİPLERİ (Instagram önerisi A3): künyenin tamamı pencerenin
   başında, kişi başına bir satır — portre + ad (profili varsa bağlantı) + rol */
.pencere__sahipler {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pencere__sahip {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0;
  font-size: var(--fs-s);
}
.pencere__sahip-bag {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  min-width: 0;
  color: var(--ink);
}
a.pencere__sahip-bag:hover .pencere__sahip-ad { color: var(--gold-deep); }
.pencere__sahip-portre { --boy: 2.5rem; }
.pencere__sahip-ad { font-weight: 400; transition: color .2s ease; }
.pencere__sahip-rol { color: var(--grey); }
.pencere__sahip-rol::before { content: "· "; }

.pencere__kind {
  margin: 0;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--gold);
  font-size: var(--fs-s);
  color: var(--grey);
}

/* Pencere başlığı da bir BAŞLIKTIR → Cormorant (yazı tipi metin rolüne
   bağlıdır, içerik türüne değil). Akışkan `clamp()` DEĞİL sabit basamak —
   pencere ekrana göre sabit ölçülü bir kutudur. */
.pencere__t {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--fs-l);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: var(--ls-tight);
}

/* Serbest işin gövdesi boştur (218/218): metni KISA AÇIKLAMADIR ve yazı
   sayfasındaki kapanış alıntısıyla (`.yazi__alinti`) aynı altın çizgiyi taşır */
.pencere__q {
  margin: 0;
  padding-left: .9rem;
  border-left: 3px solid var(--gold);
  font-size: var(--fs-s);
  line-height: 1.65;
  color: var(--ink-2);
  white-space: pre-line;   /* dizeler, `.yazi__alinti` gibi */
}
.pencere__q--uzun { white-space: normal; }   /* gövde HTML'i: paragraflar <p> */
.pencere__q--uzun p { margin: 0 0 .7em; }
.pencere__q--uzun p:last-child { margin-bottom: 0; }

.pencere__foot {
  margin-top: auto;
  padding-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  text-align: right;
}
.pencere__date {
  margin: 0;
  padding-top: .5rem;
  border-top: 1px solid var(--rule);
  font-size: var(--fs-s);
  color: var(--grey);
}

/* --- kapatma / işten işe gezinme: panelin DIŞINDA, görsele binmez --- */

.pencere__x,
.pencere__nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  background: none;
  color: var(--gold);
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
  transition: transform .2s ease;
}
.pencere__x { top: -2.9rem; right: 0; font-size: var(--fs-ml); }
/* İşten işe oklar pencere büyüdükçe küçük kaldı (Yiğit, 22 Eki 2026): pencere
   900 → 1240 (~1.4×), ok da aynı oranda — 40 → 56px kutu, 30 → 42px işaret */
.pencere__nav { top: 50%; translate: 0 -50%; width: 3.5rem; height: 3.5rem; font-size: 2.65rem; }
.pencere__nav--onceki { left: -4.25rem; }
.pencere__nav--sonraki { right: -4.25rem; }
.pencere__nav:hover, .pencere__x:hover { transform: scale(1.15); }
.pencere__nav[hidden] { display: none; }

.pencere.is-busy .pencere__in { opacity: .45; }

/* --- büyüteç (lightbox): görsel tam boy ---
   Canlıdan (1440×1000, Eki 2026): zemin %80 siyah — arkadaki sayfa SEÇİLİR;
   görsel üstten ve alttan 70px boşluk bırakır. Karartma YALNIZCA
   `::backdrop`tadır: dialog'un kendisi de boyanırsa iki katman üst üste
   biner ve zemin tam siyaha döner (bir süre ikisi de %93'tü). */

.buyutec {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  padding: 70px 0;
  border: 0;
  background: none;
}
.buyutec::backdrop { background: rgb(0 0 0 / .8); }
/* Gezinme satırı yalnızca galeriden açılınca görünür (`buyutec--gez`) */
.buyutec__gez { display: none; }
.buyutec--gez .buyutec__gez {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin: .75rem 0 0;
  font-size: var(--fs-s);
  color: #BEBBB3;
  font-variant-numeric: tabular-nums;
}
.buyutec__ok {
  padding: .25rem 1rem;
  border: 0;
  background: none;
  color: #F0EEE6;
  font-size: var(--fs-m);
  cursor: pointer;
}
.buyutec__ok:hover { color: var(--gold); }
.buyutec__ok:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.buyutec img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* `zoom-out` DEĞİL: büyüteç imleçleri Windows'ta yükleme imleci gibi
     okunuyor (bkz. CLAUDE.md, imleç kuralı) */
  cursor: pointer;
}
/* Gezinme satırı açıkken görsel o satır kadar kısalır, ekrandan taşmaz */
.buyutec--gez img { height: calc(100% - 3.5rem); }
/* Kapatma: canlıda 20px'lik ikon köşeye yapışıktı ve fark edilmiyordu —
   dokunma alanı 48px, ikon büyük, köşeden içeride */
.buyutec__x {
  position: absolute;
  top: 1.25rem;
  right: 1.75rem;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 0;
  background: none;
  color: var(--gold);
  font-size: 2.1rem;
  line-height: 1;
  cursor: pointer;
  transition: transform .2s ease;
}
.buyutec__x:hover { transform: scale(1.15); }
.buyutec__x:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

@media (max-width: 40rem) {
  .buyutec { padding: 64px 0 24px; }
  .buyutec__x { top: .5rem; right: .75rem; }
}

@media (max-width: 62rem) {
  .pencere { width: 94vw; }
  .pencere__in {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 56vh minmax(0, 1fr);
    height: 86vh;
  }
  .pencere__media { min-height: 0; }
  .pencere__x { top: -2.4rem; }
  .pencere__nav { top: auto; bottom: -3.9rem; translate: none; }
  .pencere__nav--onceki { left: 0; }
  .pencere__nav--sonraki { right: 0; }
}

/* ---------- sayı sayfası: kapak bloğu + içindekiler ----------
   İçindekiler bu sayfanın ASIL GÖVDESİDİR: kapağın yanındaki dar kolona
   sıkışmaz, tam genişlikte kendi bandında durur. Her satır işin kendisini
   gösterir (numara, başlık, künye, açıklama, görsel). */

/* Sol kolon kapağın ALT hizasına oturur (`end`), ortasına değil: kapak 3:4 ve
   uzun, metin bloğu kısa — ortalandığında altında ve üstünde ~230px boşluk
   kalıyor ve blok "boşlukta yüzüyor" gibi duruyordu. Alt hiza, numarayı
   kapağın etiketi hâline getirir. Kapak da bir tık daraltıldı. */
.kapak {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .62fr);
  align-items: end;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-block: clamp(2rem, 4vw, 3.5rem);
}

.kapak__no {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--fs-d1);
  font-weight: 500;
  line-height: .95;
  letter-spacing: var(--ls-tight);
}

/* ---------- OYULMUŞ SAYI (sayı numaraları) ----------
   Dolgu kağıt, çeper mürekkep: sayı sayfanın zemininden "oyulmuş" gibi durur.
   Eski sitedeki beyaz-içi-boş sayı görünümünün karşılığı.

   Renkler SABİT yazılmaz (referansta `white` + `black` sabitti): tokenlarla
   yazıldığında koyu temada dolgu ve çeper kendiliğinden yer değiştirir ve
   etki iki temada da "oyuk sayı" olarak okunur. Sabit beyaz koyu temada
   çeperi görünmez kılardı.

   `text-shadow` dört yöne basılır — `-webkit-text-stroke` daha temiz olurdu
   ama harfin İÇİNE doğru çizdiği için Cormorant'ın ince tırnaklarını yiyor.

   Çeper kalınlığı `--cizik` ile ayarlanır: 26–37px'lik içindekiler numarasında
   1px yeterli, 48–88px'lik sayı başlığında ince kalıyor. */
.satir__n,
.issue__no,
.kapak__no,
.raf__no,
.raf__ic-no,
.ekp__ad,
.hata__kod {
  color: var(--paper);
  text-shadow:
    calc(-1 * var(--cizik, 1px)) calc(-1 * var(--cizik, 1px)) 0 var(--ink),
    var(--cizik, 1px) calc(-1 * var(--cizik, 1px)) 0 var(--ink),
    calc(-1 * var(--cizik, 1px)) var(--cizik, 1px) 0 var(--ink),
    var(--cizik, 1px) var(--cizik, 1px) 0 var(--ink);
}

/* Başlığın TAMAMI ("no 16") aynı görünür — yalnızca rakam değil */
.issue__no,
.kapak__no { --cizik: 2px; }
/* Sayı rafındaki başlık 32px, yani ikisinin arası: 1px ince, 2px kaba kalıyor */
.raf__no { --cizik: 1.5px; }
/* Ekibimiz'deki oyulmuş ekip adı (64px) — konseptteki 1.4px'lik çeper */
.ekp__ad { --cizik: 1.5px; }

.kapak__ad {
  margin: .35rem 0 0;
  font-family: var(--serif);
  font-size: var(--fs-d3);
  font-style: italic;
  color: var(--ink);
}

.kapak__olgu {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.1rem;
  margin: 1.1rem 0 1.4rem;
  /* "no 16"nın altındaki çizgi — arşiv başlıklarının `.phead__rule`u ile
     aynı (1px, mürekkep). Bölüm çizgileri kalkınca kapak bloğu ile
     içindekiler arası boş kalıyordu (18 Eki 2026). */
  padding-top: 1.1rem;
  border-top: 1px solid var(--ink);
  font-size: var(--fs-s);
  color: var(--grey);
}
.kapak__ozel { color: var(--grey); }

/* Kesik köşe çerçevesi ORTAK kuraldadır (bkz. "KESİK KÖŞE"), burada yalnızca
   görselin oranı verilir. */
.kapak__gorsel img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

/* ---------- SATIR — sitenin TEK satır listesi (L. liste standardı, 23 Eki 2026) ----------
   Sayının içindekileri, profilin işleri/etkinlikleri ve bildirim kutusu AYNI
   bileşendir. Eskiden üç biçimdi: görsel solda/sağda, 72/112/240px, kare/16/kesik
   köşe, başlık 28/34, etiket başlığın altında/üstünde, sağda tek başına "→".

     [oyulmuş sıra — `satir--no`] · [üst etiket · BAŞLIK · alt not] · [görsel 4:5]

   - Satırın TAMAMI bağlantıdır (`.satir__a`); hover'da başlık altınlaşır, görsel
     hafifçe büyür.
   - Etiket başlığın ÜSTÜNDE, kişiler / not ALTINDA — kartın `.card__kind` /
     `.card__a` sırası. Etiketler arasında ince gri nokta.
   - Görsel hep SAĞDA, 90px, köşe 16. Görseli olmayan satır yerini boş tutar,
     başlıklar tek kolonda hizalı kalır.
   - `satir--buyuk` (YALNIZCA sayının içindekileri): başlık ≈34, görsel 240 ve
     dergi imzası kesik köşe (`.ic__gorsel`, bkz. "KESİK KÖŞE"), özet ve
     "devamını oku". */

.satir { margin: 1.75rem 0 0; padding: 0; list-style: none; }
.satir__s { border-top: 1px solid var(--rule-2); }
.satir__s:first-child { border-top: 0; }

.satir__a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5.625rem;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  align-items: center;
  padding: 1.25rem 0;
  color: var(--ink);
}
.satir--no .satir__a { grid-template-columns: 4.5rem minmax(0, 1fr) 5.625rem; }

/* Sıra numarası SAYFANIN KENDİ BAŞLIĞIYLA (`.kapak__no`) aynı sesle okunur:
   aynı yazı tipi, aynı "oyulmuş" muamele (dolgu kağıt, çeper mürekkep).
   ALTIN BURADA GEÇMEZ: numara sayfanın iskeletidir, vurgusu değil. Renk
   `color`la DEĞİL "OYULMUŞ SAYI" kuralıyla verilir; buraya `color` yazmayın. */
.satir__n {
  font-family: var(--serif);
  font-size: var(--fs-d3);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--ls-tight);
  font-variant-numeric: lining-nums tabular-nums;
}
.satir__n b { color: inherit; font-weight: inherit; }

.satir__gvd { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }

.satir__ust {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 .5rem;
  font-size: var(--fs-s);
  color: var(--grey);
}
.satir__ust > * + *::before { content: "·"; margin-inline-end: .5rem; color: var(--rule); }

.satir__t {
  margin: 0;
  font-family: var(--serif);
  font-size: calc(var(--fs-m) * var(--serif-oran));   /* kart başlığıyla aynı ≈28 */
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: var(--ls-tight);
  transition: color .2s ease;
}
.satir__a:hover .satir__t { color: var(--gold-deep); }

.satir__alt { font-size: var(--fs-s); color: var(--grey); }

.satir__g {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 16px;
  background: var(--paper-2);
}
.satir__g picture { display: block; height: 100%; }
.satir__g img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}
.satir__a:hover .satir__g img { transform: scale(1.04); }

/* --- büyük satır: sayının içindekileri --- */
.satir--buyuk .satir__a {
  grid-template-columns: 4.5rem minmax(0, 1fr) 15rem;   /* görsel 240 × 300 (karar 2 Ağu 2026) */
  align-items: start;
  padding: clamp(1.25rem, 2.5vw, 2rem) 0;
}
.satir--buyuk .satir__t {
  /* d4'ün akışkan deseni, tavanı canlı Poppins 24'ün karşılığı (≈34) */
  font-size: clamp(1.35rem, 2.6vw, calc(1.5rem * var(--serif-oran)));
}
/* Köşe kesiktir (`.ic__gorsel`), yuvarlatılmaz */
.satir--buyuk .satir__g { border-radius: 0; }

.satir__x {
  margin-top: .5rem;
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--ink-2);
}

/* "devamını oku" satırın parçasıdır: çizgisi satırın hover'ında çizilir */
.satir__devam {
  align-self: flex-start;
  margin-top: .45rem;
  padding-top: .4rem;
  font-size: var(--fs-s);
  color: var(--grey);
  transition: color .2s ease;
}
.satir__a:hover .satir__devam { color: var(--gold-deep); }
.satir__a:hover .satir__devam::after { right: 0; }

/* Kesik köşenin üçgeni görselle birlikte küçülür: referanstaki 60px 400px'lik
   kapağın %15'iydi; 240px'lik görselde aynı oran ≈36px. */
.ic__gorsel { --kose: clamp(1.1rem, 2.5vw, 2.25rem); }

/* SAYI SAYFASINDA başlıklar içeriğe bir tık yakındır (18 Eki 2026): bölüm
   başlıkları çizgisizdir, çizgi için ayrılan alt dolgu ve ilk satırın üst
   çizgisi boşta kalıyordu (içindekiler 73 → 40px, serbest ızgara 41 → 24px). */
.band--sayi .bandhead { padding-bottom: 0; }
.band--sayi .satir,
.band--sayi .grid,
.band--sayi .cevir { margin-top: 1.5rem; }
.band--sayi .satir__s:first-child .satir__a { padding-top: 1rem; }

@media (max-width: 64rem) {
  .kapak { grid-template-columns: minmax(0, 1fr); }
  .kapak__gorsel { max-width: 22rem; }
  .satir--buyuk .satir__a { grid-template-columns: 3rem minmax(0, 1fr) 11.25rem; }   /* 180 */
}

@media (max-width: 40rem) {
  .satir__a { grid-template-columns: minmax(0, 1fr) 4.5rem; gap: 1rem; padding: 1rem 0; }
  .satir--no .satir__a { grid-template-columns: 2.75rem minmax(0, 1fr) 4.5rem; }
  .satir__t { font-size: calc(var(--fs-s) * var(--serif-oran)); }
  .satir__g { border-radius: 12px; }
  /* Büyük satırda görsel metnin ALTINA iner (240'lık görsel yan kolona sığmaz) */
  .satir--buyuk .satir__a { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .satir--buyuk .satir__g { grid-column: 2; width: 100%; max-width: 15rem; }
  .satir--buyuk .satir__t { font-size: clamp(1.35rem, 2.6vw, calc(1.5rem * var(--serif-oran))); }
  /* "yeni · tür · zaman" 390px'te tek satıra sığmıyor, zaman alta düşünce
     ayırıcı nokta satır başında kalıyordu. Sözcük ekran okuyucuya kalır,
     gözle görünen altın noktadır ve tür etiketine bitişik durur. */
  .satir__yeni-s {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .satir__ust > .satir__yeni + *::before { content: none; }
}

/* ============================================================
   EKİBİMİZ — konsept E1 (onay 21 Eki 2026)
   ------------------------------------------------------------
   https://claude.ai/artifact/DTZ8vNekksZZPifKRTjqDg (Main)
   Her ekip bir bölüm: SOLDA oyulmuş ekip adı + ekip renginde kısa
   çizgi + üye sayısı + başvuru bağı; SAĞDA iki kolon üye satırı
   (52px portre + Cormorant ad + not). Birden çok ekipteki kişi HER
   bölümünde durur, halkası o bölümün renginde, notunda öteki ekipleri.
   Ekip rengi YALNIZCA çizgi ve halkadadır, metne verilmez.
   ============================================================ */

/* Başlık altı şerit: tekil üye sayısı · ekip sayısı · bize katıl.
   `.phead__rule`un yerini alır (konseptte açık çizgi). */
.ekp-serit {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.75rem;
  margin: 2.25rem 0 0;
  padding-top: .65rem;
  border-top: 1px solid var(--rule);
  font-size: var(--fs-s);
  color: var(--grey);
}
.ekp-serit a { color: var(--ink); border-bottom: 1px solid var(--gold); transition: color .2s ease; }
.ekp-serit a:hover { color: var(--gold-deep); }

.ekp { padding-block: 1.5rem var(--band); }

.ekp__ekip {
  display: grid;
  grid-template-columns: 18.75rem minmax(0, 1fr);
  gap: 3rem;
  padding-block: 2.75rem;
  border-bottom: 1px solid var(--rule-2);
  scroll-margin-top: 6rem;
}

.ekp__yan { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; }

/* Oyulmuş ekip adı — dolgu/çeper "OYULMUŞ SAYI" bloğundan gelir */
.ekp__ad {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--fs-xxl);
  font-weight: 500;
  /* Konseptte .9'du: "ç", "ğ", "y" inişleri kutudan taşıp renkli çizgiye
     biniyordu (ölçüldü). Kutu inişleri kapsasın, çizgi altlarında dursun. */
  line-height: 1.15;
  letter-spacing: var(--ls-tight);
}
.ekp__ad b { color: inherit; font-weight: inherit; }

.ekp__cizgi { display: block; width: 3.5rem; height: 3px; background: var(--renk, var(--gold)); }
.ekp__n { margin: 0; font-size: var(--fs-s); color: var(--grey); }
.ekp__basvur { font-size: var(--fs-s); color: var(--ink-2); transition: color .2s ease; }
.ekp__basvur:hover { color: var(--gold-deep); }

.ekp__uyeler {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .4rem 2.5rem;
  align-content: start;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ekp__uye {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--rule-2);
  color: var(--ink);
}
.ekp__kim { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.ekp__uye-ad {
  font-family: var(--serif);
  font-size: calc(var(--fs-sm) * var(--serif-oran));   /* ≈25, konseptteki boy */
  font-weight: 500;
  line-height: 1.1;
  transition: color .2s ease;
}
.ekp__uye:hover .ekp__uye-ad { color: var(--gold-deep); }
/* Roller TEK satır: üç öğeyle sınırlı (görünüm) ve yine de taşarsa kesilir —
   ikinci satıra inen bir not komşu üyeyle hizayı bozardı */
.ekp__not {
  overflow: hidden;
  font-size: var(--fs-s);
  line-height: 1.4;
  color: var(--grey);
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media (max-width: 64rem) {
  .ekp__ekip { grid-template-columns: 13rem minmax(0, 1fr); gap: 2rem; }
  .ekp__uyeler { column-gap: 1.75rem; }
}

@media (max-width: 46rem) {
  .ekp__uyeler { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 40rem) {
  .ekp__ekip { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding-block: 2rem; }
  .ekp__ad { font-size: var(--fs-xl); }
}

/* ============================================================
   ÜYE IZGARASI — takip ettiklerin (`/hesap/takiptekilerin`)
   ------------------------------------------------------------
   Eskiden ekibimiz sayfasının ızgarasıydı; ekibimiz E1'e geçti,
   bu ızgara yalnızca takip listesinde kaldı.
   Kart ızgarası `.grid`den AYRIDIR: içerik kartı 4/5 dikey bir
   kapak taşır, üye kartı KARE bir portre taşır ve daha sık dizilir.
   ============================================================ */

.uyeler {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--gut);
  margin-top: 1.75rem;
  padding: 0;
  list-style: none;
}

.uye > a {
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

.uye__media {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--paper-2);
}

.uye__media img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}

/* Hover geçişi eski sitenin görsel imzasıydı: ikinci fotoğraf üstte durur
   ve yalnızca üzerine gelince görünür. İkinci fotoğraf yoksa kart yine de
   hafifçe yakınlaşır — davranış fotoğraf sayısına göre kaybolmaz. */
.uye__hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .45s ease;
}
.uye__hover img { width: 100%; height: 100%; }

.uye:hover .uye__hover,
.uye:focus-within .uye__hover { opacity: 1; }
.uye:hover .uye__media > picture img { transform: scale(1.03); }

.uye__bos {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  font-size: 2.6rem;
  color: var(--rule);
}

.uye__ad {
  font-family: var(--serif);
  font-size: var(--fs-sm);
  line-height: 1.2;
  font-weight: 500;
  padding-bottom: .45rem;
  /* Ekip rengi YALNIZCA çizgide: rastgele bir renk kağıt üstünde metin
     kontrastını tutturamaz (parlak altının metinde kullanılmamasıyla aynı kural) */
  border-bottom: 2px solid transparent;
  transition: border-color .3s ease;
}
.uye:hover .uye__ad { border-bottom-color: var(--renk, var(--gold)); }

@media (max-width: 64rem) { .uyeler { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 46rem) { .uyeler { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 30rem) { .uyeler { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ============================================================
   PROFİL — konsept P1 (onay 21 Eki 2026)
   ------------------------------------------------------------
   https://claude.ai/artifact/DTZ8vNekksZZPifKRTjqDg (ProfilKapak)
   Kırıntı · 256px portre (konseptte 320 — 22 Eki 2026'da bir basamak küçüldü) + üst satır, ad, ekip etiketleri, hakkında,
   takip · "öne çıkanlar." 4:5 kartlar · "işleri." içindekiler satırı
   dilinde liste · "etkinlikleri." aynı dilde (konseptte yok, korundu).
   KESKİN/KESİK KÖŞE YOK (Yiğit): kart görseli 25px, satır görseli 16px
   (ikisi de sitenin ortak bileşeni: `.card`, `.satir`).
   ============================================================ */

.profil-kirinti {
  margin: 0;
  padding-top: 1.75rem;
  font-size: var(--fs-s);
  color: var(--grey);
}
.profil-kirinti a { color: var(--grey); transition: color .2s ease; }
.profil-kirinti a:hover { color: var(--gold-deep); }
.profil-kirinti span { margin-inline: .35rem; }

.profil__in {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  gap: 4rem;
  align-items: center;
  padding-block: 2.5rem 3.5rem;
  border-bottom: 1px solid var(--rule);
}

.profil__foto { --boy: 16rem; }

.profil__bilgi { display: flex; flex-direction: column; align-items: flex-start; gap: 1.125rem; min-width: 0; }

.profil__ust { margin: 0; font-size: var(--fs-s); color: var(--grey); }

/* Kişi adı kendi yazımını korur; boyu SAYFA BAŞLIĞININ boyudur (`.phead__t`,
   d2 — karar 22 Eki 2026; konseptteki 84px/d1 "çok büyük" bulundu). Küçük
   harf ve altın çizgi almaz: başlık biçimi değil, özel addır. */
.profil__ad {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--fs-d2);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--ls-tight);
}

.profil__bio {
  margin: 0;
  max-width: 35rem;
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--ink-2);
}

.profil__bilgi .takip { margin-top: .375rem; }

/* Başlığın çizgisinden sonraki ilk bant (öne çıkanlar ya da işleri) */
.profil + .band { padding-top: 3.5rem; }

/* --- öne çıkanlar: arşivlerin `.grid--3` + `.card`ı, ayrı kart kuralı yok --- */

/* --- işleri / etkinlikleri: sitenin `.satir` listesi (`satir--no`) --- */

@media (max-width: 64rem) {
  .profil__in { grid-template-columns: 13rem minmax(0, 1fr); gap: 2.5rem; }
  .profil__foto { --boy: 13rem; }
}

@media (max-width: 46rem) {
  .profil__in { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; padding-block: 1.75rem 2.5rem; }
  .profil__foto { --boy: 11rem; }
}

/* ============================================================
   FAVORİ — kişisel yer imi
   ------------------------------------------------------------
   Sayaç YOKTUR: favori kaç kişide olduğu gösterilen bir beğeni
   değil, üyenin kendi listesidir.
   ============================================================ */

.fav { display: inline-flex; }

.fav__btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .9rem;
  border: 1px solid var(--rule);
  background: transparent;
  font: inherit;
  font-size: var(--fs-s);
  color: var(--grey);
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease;
}

.fav__btn:hover { color: var(--ink); border-color: var(--ink); }
.fav__ikon { font-size: var(--fs-sm); line-height: 1; color: var(--rule); transition: color .25s ease; }
.fav__btn:hover .fav__ikon { color: var(--gold-deep); }

/* Basılı durum: dolgu altın, metin okunur hardal */
.fav__btn.is-fav { color: var(--ink); border-color: var(--gold); }
.fav__btn.is-fav .fav__ikon { color: var(--gold); }
.fav__btn[disabled] { opacity: .55; cursor: default; }

.yazi__eylem {
  margin-top: 2rem;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: .6rem;
}

/* PAYLAŞ (components/paylas) — favorinin hapını kullanır. Görünürlük ve metin kökteki
   sınıftan (site.js): JS yoksa hiç görünmez; telefonda "paylaş", masaüstünde "kopyala" */
.fav.paylas { display: none; }
.paylas-var .fav.paylas { display: inline-flex; }
.paylas__menu { display: none; }
.paylas-menu .paylas__menu { display: inline; }
.paylas-menu .paylas__kopya { display: none; }
.paylas .ikon { inline-size: 1em; block-size: 1em; }
.etkp__paylas { margin-top: 1.5rem; }

/* Sayı kapağının altı: "çevirerek oku" solda, paylaş sağda. Flipbook yoksa paylaş yine sağda */
.kapak__eylem {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.4rem;
}
/* `.more`un kendi `align-self: flex-start`ı ortalamayı ezer (44px'lik hapla 5px kayıyordu) */
.kapak__eylem .more { margin-top: 0; align-self: center; }
.kapak__paylas { margin-left: auto; }

.pencere__yan {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .75rem;
  flex-wrap: wrap;
}
.pencere__yan .pencere__date { border-top: 0; padding-top: 0; }
.pencere__fav .fav__btn { padding: .4rem .7rem; font-size: var(--fs-s); }

/* Favori listesindeki "çıkar" bağlantısı: kartın altında sessiz durur */
.fav__cikar { margin-top: .15rem; }
.fav__cikar button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-s);
  color: var(--grey);
  cursor: pointer;
  border-bottom: 1px solid transparent;
}
.fav__cikar button:hover { color: var(--ink); border-bottom-color: var(--gold); }

/* ============================================================
   BİZ KİMİZ — kelimeler alt alta, arkalarında ekip
   ------------------------------------------------------------
   Söz dört satırdır ve iki kelimesi altın: eski sitedeki
   düzenin karşılığı. Arkadaki ızgara EKİP FOTOĞRAFLARIDIR ve
   ağır bulanıktır — okunacak bir şey değil, dokusu olan bir
   zemindir; bu yüzden üstünde kağıt rengine giden bir örtü var,
   yoksa serif harfler yüzlerin üstünde kaybolurdu.
   ============================================================ */

.bizkim {
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(78vh, 40rem);
  padding: var(--band) var(--edge);
  overflow: hidden;
  background: var(--paper-2);
  isolation: isolate;
}

.bizkim__yuzler {
  position: absolute;
  inset: -4%;                       /* bulanıklık kenarlarda soluk bir çerçeve bırakmasın */
  z-index: -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
  filter: blur(18px) saturate(.65);
  opacity: .42;
}

.bizkim__yuz { overflow: hidden; }
.bizkim__yuz img { width: 100%; height: 100%; object-fit: cover; }

/* Örtü: harflerin altındaki zemini bandın KENDİ rengine çeker.
   Renk SABİT YAZILMAZ — bir süre `rgba(251,250,247,…)` (eski kağıt) yazılıydı ve
   `light-dark()` tokenlarının etrafından dolaştığı için iki temada da yanlıştı:
   koyu temada band sayfadan kopuk açık gri bir levha oluyordu, açık temada da
   `--paper-2` bandını neredeyse beyaza çekip `--paper`ile arasındaki farkı
   siliyordu. `color-mix` örtünün işini (yüzü bastırmak) bozmadan rengi tokendan
   alır. */
.bizkim::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at center,
    color-mix(in srgb, var(--paper-2) 88%, transparent) 30%,
    color-mix(in srgb, var(--paper-2) 55%, transparent) 100%);
}

.bizkim__soz {
  display: grid;
  justify-items: center;
  gap: .1em;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.8rem, 11vw, 7.5rem);
  font-weight: 500;
  line-height: .88;
  letter-spacing: var(--ls-tight);
  text-align: center;
}

.bizkim__vurgu { color: var(--gold-deep); }

@media (max-width: 46rem) {
  .bizkim__yuzler { grid-template-columns: repeat(3, 1fr); filter: blur(14px) saturate(.65); }
}

/* ------------------------------------------------------------
   Manifesto metni — okuma ölçüsünde, dergi yazısıyla aynı dil
   ------------------------------------------------------------ */

/* Kahraman bandına yapışık durmasın: `.band` yalnızca ALT dolgu verir. */
.bizkim + .band { padding-top: var(--band); }

/* Metin bölüm başlığının altından, AYNI sol kenardan başlar (ortalanmaz) ve
   dergi yazısıyla aynı okuma dilini kullanır. İki yana yaslama kalktı: 1200px
   satırda kelime aralarını açıp "ırmak" bırakıyordu. */
.manifesto { max-width: var(--okuma); margin-top: 1.75rem; }

.manifesto p {
  margin: 0 0 1.35rem;
  font-size: var(--fs-sm);
  font-weight: 300;
  line-height: 1.75;
  color: var(--ink);
}

/* Seçici `.manifesto p`'den daha güçlü olmak zorunda — sıraya güvenilmez */
.manifesto p.manifesto__giris {
  font-size: var(--fs-d4);
  line-height: 1.45;
  color: var(--ink);
}

.manifesto__ara {
  margin: 2.5rem 0 1.35rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-family: var(--serif);
  font-size: var(--fs-ml);
  font-weight: 500;
  line-height: 1.35;
}

.manifesto p.manifesto__kapanis { color: var(--ink); }

/* ============================================================
   BAŞVURU — gömülü Google Form
   ------------------------------------------------------------
   Yükseklik sabit değil ESNEKTİR (form uzunluğu ekipten ekibe
   değişir) ama bir tavanı vardır: iframe içi kendi kaydırmasını
   yapar, sayfa metrelerce uzamaz.
   ============================================================ */

.basvuru { margin-bottom: var(--band); }
.basvuru:last-child { margin-bottom: 0; }
.basvuru .bandhead__t b { color: var(--takim, var(--gold)); }

.basvuru__cerceve {
  height: min(78vh, 46rem);
  background: var(--paper-2);
  border: 1px solid var(--rule);
}

.basvuru__cerceve iframe { display: block; width: 100%; height: 100%; border: 0; }

.basvuru__alt {
  margin: .75rem 0 0;
  font-size: var(--fs-s);
  color: var(--grey);
}
.basvuru__alt a { color: var(--ink); border-bottom: 1px solid var(--rule); }
.basvuru__alt a:hover { border-bottom-color: var(--gold); }

/* ============================================================
   BİZE KATIL — ekip kartları (canlıdan, ölçüldü 23 Eki 2026)
   ------------------------------------------------------------
   Canlı: 500 × en az 625 kart, 25px köşe, ortak zemin görseli
   (`Çalışma yüzeyi 2`), üstünde ekip renginden saydama 0° geçiş
   (%0 → %50), iç boşluk 80/20/32, öğeler dibe yaslı, 8px aralık;
   64px ad, 32px/200 siyah haplar (15px köşe, 16px yan boşluk),
   16/24 300 beyaz metin (112px'lik dibe yaslı alanda), sağa yaslı
   18/300 "Bize katıl ›" ve hover'da soldan uzayan 1px beyaz çizgi;
   kart hover'ında 0 8px 16px gölge.
   Bizim dilimize çevrilenler: ad Cormorant (64 × --serif-oran) ve
   EKİP RENGİNDE altın-nokta yerine nokta; kartlar sola yaslı (tek sol
   kenar), aralık --gut; canlının scale(1.005)'i alınmadı (etkinlik
   kartıyla aynı karar); pencere giriş penceresinin dili.
   Kart zemini temadan bağımsızdır: görsel açık, yazılar sabit renk.
   ============================================================ */

.katil {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(0, 28.125rem));   /* 450 (Yiğit; canlıda 500) */
  gap: var(--gut);
  /* Sayfa başlığında çizgi YOK (Yiğit): kartlar açıklamanın altından nefes alır */
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
}

.katil__kart { container-type: inline-size; }

.katil__bag {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: .5rem;
  min-height: 125cqi;   /* 4:5 — canlının 500 × 625 oranı; içerik uzunsa kart uzar */
  padding: 5rem 1.25rem 2rem;
  overflow: hidden;
  border-radius: var(--kart-kose);
  background: #F0EEE6 url("/assets/bize-katil-zemin.webp") center / cover no-repeat;
  color: #fff;
  transition: box-shadow .3s ease;
}
/* Ekip rengi alttan yukarı, kartın yarısında söner */
.katil__bag::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, var(--takim) 0%, transparent 50%);
}
.katil__bag:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
@media (hover: hover) {
  .katil__bag:hover { box-shadow: 0 8px 16px rgb(0 0 0 / .3); }
}

/* Ad: canlıda 64px Poppins → Cormorant karşılığı; dar kartta kartın
   genişliğine iner ("fotoğrafçı" taşmasın) */
.katil__ad {
  margin: 0;
  font-family: var(--serif);
  font-size: min(calc(4rem * var(--serif-oran)), 21cqi);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  color: #1A1714;
}
.katil__ad b { color: var(--takim); font-weight: inherit; }

.katil__hap {
  padding: 0 1rem;
  border-radius: 15px;
  background: #000;
  font-size: 2rem;
  font-weight: 200;
  line-height: 1.5;
}

.katil__metin {
  display: flex;
  align-items: flex-end;
  min-height: 7rem;   /* 112 */
  font-size: var(--fs-s);
  font-weight: 300;
  line-height: 1.5;
}

.katil__dugme {
  position: relative;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  margin-top: .5rem;
  padding: 0 .25rem;
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1;
}
.katil__dugme .ikon { inline-size: 1em; block-size: 1em; }
.katil__dugme::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -.5rem;
  height: 1px;
  background: currentColor;
  transition: right .4s ease;
}
.katil__bag:hover .katil__dugme::after,
.katil__bag:focus-visible .katil__dugme::after { right: 0; }

/* PENCERE — giriş penceresinin kutusu ve kapatma düğmesi; canlıda 800px */
.katil-pencere {
  width: min(94vw, 50rem);
  max-height: 92vh;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border: 0;
  border-radius: 25px;
  background: var(--paper);
  color: var(--ink);
  overflow: auto;
}
.katil-pencere::backdrop { background: rgb(0 0 0 / .72); }

.katil-pencere__cerceve {
  height: min(70vh, 37.5rem);   /* canlıda 600 */
  margin-top: 1.25rem;
  overflow: hidden;
  border-radius: 20px;
  background: var(--paper-2);
}
.katil-pencere__cerceve iframe { display: block; width: 100%; height: 100%; border: 0; }

@media (max-width: 40rem) {
  .katil-pencere {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 4rem 1.25rem 2rem;
    border-radius: 0;
  }
  .katil-pencere__cerceve { height: calc(100dvh - 12rem); }
}

/* ============================================================
   ÇEVİREREK OKUMA — sayının gömülü flipbook'u
   ------------------------------------------------------------
   Oran SABİTTİR (yayılmış iki sayfa ≈ 4:3): yükseklik içeriğe
   göre değişseydi sayfa yerleşimi zıplardı — serbest işin
   penceresindeki 900×600 kuralının aynı gerekçesi.
   ============================================================ */

.cevir {
  aspect-ratio: 4 / 3;
  background: var(--paper-2);
  border: 1px solid var(--rule);
}

.cevir__cerceve { display: block; width: 100%; height: 100%; border: 0; }

.cevir__alt {
  margin: .75rem 0 0;
  font-size: var(--fs-s);
  color: var(--grey);
}
.cevir__alt a { color: var(--ink); border-bottom: 1px solid var(--rule); }
.cevir__alt a:hover { border-bottom-color: var(--gold); }

@media (max-width: 46rem) {
  /* Dar ekranda 4:3 çok alçak kalıyor — dikey okumaya yaklaşır */
  .cevir { aspect-ratio: 3 / 4; }
}

/* ============================================================
   TAKİP — profildeki tek düğme
   ------------------------------------------------------------
   Favori düğmesiyle aynı ölçüde ve aynı geçişlerde: ikisi de
   "bu kaydı kendime bağladım" der. Sayaç YOKTUR (kaç takipçisi
   olduğu hiçbir yerde basılmaz) — takip bir bildirim aboneliği,
   bir popülerlik ölçüsü değil.
   ============================================================ */

.takip { display: inline-flex; margin-top: 1.5rem; }

/* Altın hap (P1, 21 Eki 2026) — `.dugme`nin birincil sesi, boyu 42px.
   Takip edilince ikincile döner (çerçeveli): eylem yapıldı, artık bağırmaz. */
.takip__btn {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 1.5rem;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: var(--gold);
  font: inherit;
  font-size: var(--fs-s);
  font-weight: 400;
  color: #1A1714;
  cursor: pointer;
  transition: opacity .22s ease, color .22s ease, border-color .22s ease, background-color .22s ease;
}

.takip__btn:hover { opacity: .84; }
.takip__btn.is-takip { border-color: var(--rule); background: transparent; color: var(--ink); }
.takip__btn.is-takip:hover { opacity: 1; border-color: var(--ink); }
.takip__btn[disabled] { opacity: .55; cursor: default; }

/* ============================================================
   EMEĞİ GEÇENLER — içerik sayfasının sonu (21 Eki 2026, seçenek D)
   ------------------------------------------------------------
   Şerit: kişiler sekme olarak (ad + bu işteki rol), seçilen altın
   çizgiyle. Panel üç kolon: BÜYÜK yuvarlak portre (Yiğit: şeritteki
   küçük halka yerine altta ve büyük; sabit, hover ile DEĞİŞMEZ) · ad,
   ekipler, hakkında, müzikler · öne çıkan işleri.

   Ekip rengi YALNIZCA çizgidedir (`.uye__ad` kuralı): rastgele bir
   ekip rengi metin kontrastını tutturamaz.
   ============================================================ */

.katki { padding-block: clamp(2.5rem, 5vw, 4rem); }

.katki__serit {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 2rem;
  margin-top: 1.5rem;
  border-bottom: 1px solid var(--rule-2);
}

.katki__sekme {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .15rem;
  margin-bottom: -1px;
  padding: .5rem 0 .85rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font: inherit;
  color: var(--grey);
  cursor: pointer;
  transition: color .2s ease, border-color .25s ease;
}
.katki__sekme:hover { color: var(--ink); }
.katki__sekme[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--gold); }

.katki__sekme-ad {
  font-family: var(--serif);
  font-size: calc(var(--fs-m) * var(--serif-oran));
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
}
.katki__sekme-rol { font-size: var(--fs-s); color: var(--grey); }

.katki__panel {
  display: grid;
  grid-template-columns: 17.5rem minmax(0, 1fr) minmax(0, 30rem);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: start;
  margin-top: 2rem;
}
.katki__panel[hidden] { display: none; }
.katki__panel:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }

/* Portre ortak bileşendir (`.portre`, bkz. "PORTRE"); burada yalnızca boyu */
.katki__foto { --boy: 15rem; }

.katki__bilgi { display: flex; flex-direction: column; gap: .9rem; min-width: 0; }

.katki__rol { margin: 0; font-size: var(--fs-s); color: var(--grey); }

.katki__ad {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--fs-d3);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
}
.katki__ad a { color: var(--ink); transition: color .2s ease; }
.katki__ad a:hover { color: var(--gold-deep); }

/* Ekip etiketleri — profil başlığında da aynı (`.profil__ekipler`) */
.katki__ekipler,
.profil__ekipler {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-s);
  color: var(--ink-2);
}
.katki__ekipler li,
.profil__ekipler li { padding-bottom: .2rem; border-bottom: 2px solid var(--renk, var(--gold)); }

.katki__bio {
  margin: 0;
  max-width: 34rem;
  font-size: var(--fs-s);
  line-height: 1.75;
  color: var(--ink-2);
  /* Uzun "hakkında" kartı şişirmez: beş satırda kesilir, devamı profilde */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.katki__profil { align-self: flex-start; font-size: var(--fs-s); color: var(--ink); }

.katki__alt { margin: 0 0 .6rem; font-size: var(--fs-s); color: var(--grey); }

.katki__muzik { margin-top: .6rem; padding-top: 1rem; border-top: 1px solid var(--rule-2); }
.katki__muzik ul { display: flex; flex-direction: column; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.katki__calar { display: block; width: 100%; max-width: 34rem; height: 80px; border: 0; border-radius: 12px; }
.katki__bag { font-size: var(--fs-s); color: var(--ink-2); }
a.katki__bag:hover { color: var(--gold-deep); }

.katki__isler ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 64rem) {
  .katki__panel { grid-template-columns: 13rem minmax(0, 1fr); }
  .katki__isler { grid-column: 1 / -1; }
}

@media (max-width: 64rem) {
  .katki__foto { --boy: 12rem; }
}

@media (max-width: 40rem) {
  .katki__panel { grid-template-columns: minmax(0, 1fr); }
  .katki__foto { --boy: 11rem; }
}

/* ============================================================
   BİLDİRİMLER — üyenin kutusu (yeniden, 21 Eki 2026)
   ------------------------------------------------------------
   Satır sitenin ortak `.satir`ıdır (L. liste standardı): üstte tür +
   zaman · Cormorant başlık · altında künye/tarih notu · sağda konunun
   görseli. Satırın TAMAMI bağlantıdır.

   Okunmamış satır ZEMİNLE AYRIŞMAZ. Eskiden `--paper-2` levha +
   sol altın şerit + çerçeveli "yeni" kutusuydu: sitenin hiçbir
   yerinde zemin boyanarak vurgu yapılmıyor, köşeli etiket de yok.
   Kutuya girilince hepsi okunmuş sayıldığından işaret zaten bir
   kez görünür — etiket satırındaki altın nokta + "yeni" yeter.

   Akış zamana göre bölünür (bugün / dün / bu hafta / daha önce);
   bölüm başlığı sitenin başlık dilinin küçüğüdür.
   ============================================================ */

.bldr__grup {
  margin: 2.5rem 0 .25rem;
  font-family: var(--serif);
  font-size: calc(var(--fs-ml) * var(--serif-oran));
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
}
.bldr__grup:first-child { margin-top: 1.75rem; }   /* sayfa başlığının çizgisinden ayrılsın */

/* Liste sitenin `.satir`ıdır; burada yalnızca grupların arasında boşluk */
.bldr { margin: 0; }

/* Okunmamış: etiket satırının başında altın nokta + "yeni" */
.satir__yeni {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--gold-deep);
}
.satir__yeni::before {
  content: "";
  width: .45rem; height: .45rem;
  border-radius: 50%;
  background: var(--gold);
}
/* "yeni"den sonra gelen ayırıcı noktayı yine gri tut, sözcüğün rengini almasın */
.satir__ust > .satir__yeni + *::before { color: var(--rule); }

/* .hd__rozet artık header.css'te */

/* ============================================================
   GİRİŞ — pencere ve yedek sayfalar (karar 16 Eki 2026)
   ------------------------------------------------------------
   `.giris-kart` İKİ YERDE aynıdır: pencerenin bölmesi ve /giris,
   /kayit, /sifremi-unuttum, /sifre-sifirla sayfalarının kartı.
   Alanlar süzgeç şeridinin hap biçimindedir (`.suzgec__yazi`),
   düğme altın hap. Pencere telefonda EKRANIN TAMAMINI kaplar.
   ============================================================ */

.giris-sayfa {
  display: grid;
  place-items: start center;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.giris-sayfa .giris-kart {
  width: min(100%, 34rem);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border: 1px solid var(--rule);
  border-radius: 25px;
  background: var(--paper);
}

.giris {
  width: min(94vw, 34rem);
  max-height: 92vh;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border: 0;
  border-radius: 25px;
  background: var(--paper);
  color: var(--ink);
  overflow: auto;
}
.giris::backdrop { background: rgb(0 0 0 / .72); }

.giris__kapat {
  position: absolute;
  top: .6rem;
  right: .6rem;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  background: none;
  color: var(--gold);
  font-size: var(--fs-ml);
  line-height: 1;
  cursor: pointer;
  transition: transform .2s ease;
}
.giris__kapat:hover { transform: scale(1.15); }

.giris-kart[hidden] { display: none; }

/* Giriş başlığı da TEK BAŞLIK BİÇİMİNDEDİR (Cormorant + altın alt çizgi,
   bkz. ".phead__t, .bandhead__t" listesi) — bölüm başlığı boyunda (d3). */
.giris__baslik {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--fs-d3);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
}
.giris__baslik b { color: var(--gold); font-weight: inherit; }

.giris__aciklama {
  margin: .6rem 0 0;
  color: var(--grey);
  font-size: var(--fs-s);
  font-weight: 300;
}

.giris__form {
  display: grid;
  gap: .95rem;
  margin-top: 1.5rem;
}

.giris__alan { display: grid; gap: .35rem; margin: 0; }

/* Bot tuzağının bal küpü (BotTrap): ekran DIŞINA itilir, `display: none`
   değil — gizli alanları atlayan botlar da var, ekran dışındakini doldururlar */
.giris__tuzak {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.giris__alan label { font-size: var(--fs-s); color: var(--ink-2); }
.giris__ipucu { color: var(--grey); font-weight: 300; }
.giris__alan input {
  width: 100%;
  padding: .6rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--fs-s);
  font-weight: 300;
  line-height: 1.5;
  transition: border-color .2s ease;
}
.giris__alan input:hover { border-color: var(--ink-2); }
.giris__alan input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.giris__alan input[aria-invalid="true"] { border-color: var(--danger); }

.giris__hata { color: var(--danger); font-size: var(--fs-s); padding-left: 1rem; }
.giris__hata[hidden] { display: none; }

/* Sunucunun genel mesajı ("bağlantıyı gönderdik") — bildirim şeridinin dili */
.giris__durum {
  padding: .7rem 1rem;
  border-left: 2px solid var(--gold);
  background: var(--paper-2);
  font-size: var(--fs-s);
}
.giris__durum[hidden] { display: none; }

.giris__satir {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1rem;
  margin: 0;
  font-size: var(--fs-s);
}
.giris__kutu { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; color: var(--ink-2); }
.giris__kutu input { width: 1.05rem; height: 1.05rem; accent-color: var(--gold); }

.giris__bag { color: var(--ink); border-bottom: 1px solid var(--rule); transition: border-color .2s ease; }
.giris__bag:hover { border-bottom-color: var(--gold); }

.giris__dugme {
  margin-top: .3rem;
  padding: .7rem 1.2rem;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: var(--gold);
  color: #1A1714;
  font-family: inherit;
  font-size: var(--fs-s);
  cursor: pointer;
  transition: opacity .2s ease;
}
.giris__dugme:hover { opacity: .86; }
.giris__dugme[disabled] { opacity: .5; cursor: progress; }

.giris__alt {
  margin: 1.4rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule-2);
  color: var(--grey);
  font-size: var(--fs-s);
}

/* TELEFON: pencere ekranı kaplar — küçük kutu değil, tam sayfa panel */
@media (max-width: 40rem) {
  .giris {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 4rem 1.25rem 2rem;
    border-radius: 0;
  }
}

/* ============================================================
   SIRT — sağ kenarda derginin kitap sırtı (deneme, Eki 2026)
   ------------------------------------------------------------
   Canlı sitedeki sağ kenar şeridinin (56×300 siyah blok + giriş ikonu)
   yerine önerilen öğe: dikey kimlik kalır, işi dergiye döner. Kalın siyah
   blok değil, SAÇ TELİ + dikey yazı — görsel ağırlığı kapakların ve
   işlerin önüne geçmesin diye bilerek hafif.

   SABİT DEĞİLDİR: sayfanın AÇILIŞ alanına aittir (üst menünün altından
   34rem boyunca) ve sayfa kayınca onunla birlikte gider. Bir ilk denemede
   `position: fixed`ti — kaydırınca içindekiler şeridinin karolarının ve sağ
   okunun üstüne biniyordu; ayrıca okurken sürekli duran bir öğe tam da
   canlıdaki şeritte eleştirilen şeydi. Üstte ve altta saç teli, ortada
   "sofart · no 16"; yazı aşağıdan yukarı okunur (yazı sayfasındaki sol rayla
   aynı, kitap sırtı gibi). Yalnızca kenarda gerçekten boşluk olan ekranda
   (85rem üstü): 1200px'lik gövdenin yanında en az ~16px pay kalır. */
.sirt { display: none; }

@media (min-width: 85rem) {
  .sirt {
    position: absolute;
    right: 0;
    top: calc(var(--hd-tam, 91px) + 2.5rem);
    height: 34rem;
    z-index: 1;
    width: clamp(2.5rem, calc((100vw - var(--govde)) / 2 - 1.5rem), 3.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
    pointer-events: none;
  }
  .sirt::before,
  .sirt::after {
    content: "";
    flex: 1 1 0;
    width: 1px;
    background: var(--rule);
  }
  /* Üst saç teli altına doğru altına kayar: sırtın tepesindeki altın, logonun
     yanındaki altın çizginin dikey yankısı. */
  .sirt::before { background: linear-gradient(to bottom, transparent, var(--gold)); }
  .sirt::after { background: linear-gradient(to bottom, var(--rule), transparent); }

  .sirt__ad {
    flex: none;
    writing-mode: vertical-rl;
    rotate: 180deg;
    font-family: var(--serif);
    font-size: var(--fs-m);
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    color: var(--ink-2);
    pointer-events: auto;
    transition: color .22s ease;
  }
  .sirt__ad b {
    margin-inline: .45em;
    font-weight: inherit;
    color: var(--gold);
  }
  a.sirt__ad:hover { color: var(--ink); }
  a.sirt__ad:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .sirt__ad { transition: none; }
}

/* ============================================================
   404 — öneri C (Yiğit'in seçimi, 22 Eki 2026)
   ------------------------------------------------------------
   https://claude.ai/artifact/UF2nxzZxNfHQhH8zXgizqJ (C)
   Büyük OYULMUŞ "404" (sayı numaralarıyla aynı ses) → bir basamak küçük
   sayfa başlığı (d2) → açıklama; sağda arama. Altta son eklenenler: öneri
   C'nin kartları, AYNI genişlikte — 4 kart, 1200'de 279 px, kapak 3:4 dikey
   (279×372; ikinci tur: küçültülmüş 6'lı şerit "sıkışık" bulundu). Üst blokla şerit arasında
   geniş bir boşluk vardır; kart yazısı kapağın kenarından içeri çekilir.
   ============================================================ */

.hata {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2.5rem 3rem;
  padding-block: 4.5rem 0;
}
.hata__bas { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.hata__bas .phead__d { margin: 0; }

.hata__kod {
  --cizik: 2px;
  margin: 0 0 .5rem;
  font-family: var(--serif);
  font-size: clamp(5rem, 14vw, 10rem);
  font-weight: 500;
  line-height: .85;
  letter-spacing: var(--ls-tight);
  font-variant-numeric: lining-nums tabular-nums;
}

.hata__ara {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  width: min(34rem, 100%);
}
.hata__ara .suzgec__yazi { flex: 1 1 14rem; width: auto; }

/* Üst blokla şerit arasında nefes: başlığın altından ~100px */
.hata + .band { padding-top: clamp(4rem, 8vw, 6.5rem); }

/* Son eklenenler arşivlerin `.grid` + `.card`ıdır — ayrı kart kuralı yok. */