/* ════════════════════════════════════════════════════════════
   ÖLÇEKLER — sayfadaki her değer buradan gelir.
   Ölçek dışı değer yazılmaz; yeni değer gerekiyorsa jeton eklenir.
   ════════════════════════════════════════════════════════════ */
:root{
  /* zemin */
  --gece:#07090B;
  --gece-2:#0A0C0F;
  --dip:#040506;

  /* İki sıcak ton, iki ayrı iş — ölçüldü, takas edilmez (test/birim/jetonlar.test.js):
     --ates ZEMİN (beyazla 6.17:1) · --ufuk MÜREKKEP (gece üstünde 4.94:1) */
  --ates:#A93E27;
  --ates-hi:#C2482C;
  --ufuk:#C4633C;
  --kor:#E08A5C;
  --kehribar:#D08A45;

  --kemik:#F2EFEA;
  --beton:#9AA0A7;
  --beton-koyu:#727B86;  /* AA: #4A5057 yalnız 2.45:1 veriyordu (WCAG 1.4.3 4.5:1 ister) */
  --cizgi:#1A1E22;
  --cizgi-acik:#2A3036;

  /* Odak: hover için --kor varken odak için jeton YOKTU. Çift katmanlı
     halkanın dış rengi; gece üstünde 3:1 üstü. */
  --odak:#F2EFEA;

  /* Etap renkleri MEVSİMİ kodlar: doygunluk .69 → .11 → .19 */
  --etap1:#C4633C;
  --etap2:#9E958C;
  --etap3:#7E909C;

  --display:"Archivo",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;

  --t0:9px; --t1:10.5px; --t2:12.5px; --t3:14px; --t4:16px; --t5:19px;
  --t6:clamp(1.3rem,2.1vw,1.6rem);
  --t7:clamp(1.75rem,3.4vw,2.4rem);
  --t8:clamp(2.4rem,5.6vw,3.6rem);

  --iz-siki:-.03em; --iz-orta:-.018em; --iz-genis:.16em; --iz-cok:.22em;
  --lh0:1; --lh1:1.08; --lh2:1.35; --lh3:1.62;

  --u1:4px;  --u2:8px;  --u3:12px; --u4:16px; --u5:22px;
  --u6:32px; --u7:44px; --u8:64px; --u9:88px; --u10:120px;

  --hiz-kisa:.16s; --hiz:.30s; --hiz-uzun:.46s;
  --egri:cubic-bezier(.22,.61,.36,1);
  /* Yay eğrisi — hafif aşma yapıp yerine OTURUR. `--egri` yumuşak ama
     cansız: yavaşlayıp durur, "oturmuş" hissi vermez. `linear()` gerçek bir
     yayı örnekleyerek taklit eder ve bunu JAVASCRIPT'SİZ yapar (React Bits'in
     yay animasyonundaki his, kütüphane yükü olmadan). Desteklemeyen tarayıcı
     `--egri`ye düşer: dönüş yine çalışır, yalnızca aşma olmaz. */
  --yay:var(--egri);
  --yay:linear(
    0, .0088 2.3%, .0346 4.7%, .1408 9.6%, .5231 22%, .6491 26.3%, .7542 30.7%,
    .8413 35.3%, .8819 37.9%, .9165 40.6%, .9455 43.5%, .9691 46.6%,
    .9878 50.2%, 1.0009 54%, 1.0093 58.4%, 1.0129 63.6%, 1.0114 71.6%, 1
  );

  --kolon:1120px;
  --tepe:56px;
  --afis-en:288px;
  /* Tek konser sayfasındaki TAM boyutlu afiş (spec §18.3) — panel'in
     288px'inden ayrı jeton: 864'ün yarısı, 2x ekranda en büyük srcset
     adayı tam çözünürlükte gösterilsin diye. */
  --afis-buyuk:432px;
  --serit-y:42px;
  --hat:22px;
  --girinti:38px;
  --nokta:7px;
  --nokta-bas:10px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  background:var(--gece);
  background-image:
    radial-gradient(126% 74% at 78% 4%, rgba(169,62,39,.12), transparent 60%),
    radial-gradient(94% 58% at 8% 92%, rgba(126,144,156,.045), transparent 68%),
    linear-gradient(to bottom,#07090B 0%,#090B0E 34%,#0A0C0F 58%,#060709 82%,#040506 100%);
  color:var(--kemik);
  font-family:var(--display);
  font-size:var(--t4);
  line-height:var(--lh3);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}

/* Çift katmanlı halka: hem koyu hem açık bölgede görünür. */
:focus-visible{
  outline:2px solid var(--odak);
  outline-offset:2px;
  box-shadow:0 0 0 4px var(--gece);
  border-radius:2px;
}

/* Sabit alt şerit odaklanan öğeyi örtmesin. */
html{scroll-padding-bottom:calc(var(--serit-y) + var(--u5))}

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

.atla{
  position:absolute;left:var(--u4);top:calc(-1 * var(--u9));z-index:99;
  background:var(--ates);color:#fff;
  font-family:var(--mono);font-size:var(--t1);letter-spacing:var(--iz-genis);
  text-transform:uppercase;padding:var(--u3) var(--u4);
  transition:top var(--hiz) var(--egri);
}
.atla:focus{top:var(--u4)}

.kabuk{max-width:var(--kolon);margin:0 auto;padding:0 var(--u6)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ════════════════════════════════════════════════════════════
   AFİŞ PANELİ — rota listesinin solunda yapışkan afiş; imlecin ve
   klavye odağının izlediği tarihe geçer (spec §12.2). 900px altında
   gizlenir, rota listesi tam genişliğe yayılır (spec §18.10).
   Tüm değerler jetonlardan gelir; 4/5 oran ve clamp() aralığı
   brifingin bağlayıcı gereksinimlerinden birebir alındı (jeton
   karşılığı yok, ölçek dışı SAYILMAZ — bkz. anasayfa.css başlığı).
   ════════════════════════════════════════════════════════════ */

.rota-grid{
  display:grid;
  grid-template-columns:var(--afis-en) minmax(0,1fr);
  gap:clamp(26px,4vw,56px);
  align-items:start;
}

.afis-panel{
  position:sticky;
  top:calc(var(--tepe) + var(--u5));
  width:var(--afis-en);
}

.afis-cerceve{
  position:relative;
  width:100%;
  aspect-ratio:4/5;
  overflow:hidden;
  border:1px solid var(--cizgi-acik);
  background:var(--gece);
}

.afis-bag{
  position:absolute;inset:0;
  display:block;
  opacity:0;
  /* Görünmeyen afişler tıklamayı YAKALAMAMALI: on ikisi de aynı kutuda üst
     üste duruyor, en sondaki (Rize) boyama sırasında en üstte. `opacity:0`
     işaretçi olaylarını kapatmaz — etkin afişe tıklamak imkânsızlaşıyordu
     (ölçüldü: tıklama Rize bağlantısına gidiyordu). */
  pointer-events:none;
  transition:opacity var(--hiz-uzun) var(--egri);
}
.afis-bag[data-aktif="1"]{opacity:1;pointer-events:auto}
.afis-cerceve img{width:100%;height:100%;object-fit:cover;display:block}

/* Etiket geniş ekranda BASILMAZ: künye satırı aynı bilgiyi panelin altında
   zaten taşıyor. Şeride dönüşen dar ekranda görünür hâle gelir. */
.afis-etiket{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}

.afis-kunye{
  margin:var(--u3) 0 0;
  font-family:var(--mono);font-size:var(--t1);font-weight:500;
  letter-spacing:var(--iz-orta);color:var(--beton-koyu);
}

/* ---------- Kırılma noktaları: yalnızca 560 / 720 / 900 ---------- */
@media(max-width:900px){
  /* Spec §18.10 yapışkan paneli dar ekranda GİZLİYORDU: içeriğin yarısını
     yiyordu ve dokunmatikte "imlecin izlediği afiş" etkileşimi zaten
     çalışmıyor. Ama gizlemek afişleri telefonda TAMAMEN yok ediyordu —
     sahip (2026-09-11) haklı olarak "biletler kısmında konserlerin afişleri
     yok" dedi. Panel artık gizlenmiyor, YATAY ŞERİDE dönüşüyor: on iki afiş
     de görünür, her biri kendi konser sayfasına götürür.
     Rota listesi yine tam genişlikte kalır — şerit onun ÜSTÜNDE. */
  .rota-grid{grid-template-columns:minmax(0,1fr)}

  .afis-panel{position:static;width:auto;margin-bottom:var(--u6)}
  .afis-cerceve{
    aspect-ratio:auto;border:0;background:none;overflow:visible;
    display:flex;gap:var(--u4);
    overflow-x:auto;scroll-snap-type:x proximity;
    padding-bottom:var(--u3);
  }
  .afis-bag{
    position:static;inset:auto;opacity:1;
    flex:0 0 auto;width:52vw;max-width:240px;
    scroll-snap-align:start;
    border:1px solid var(--cizgi-acik);
  }
  .afis-bag img{aspect-ratio:4/5;height:auto}
  .afis-etiket{
    position:static;width:auto;height:auto;overflow:visible;
    clip-path:none;white-space:normal;
    display:block;padding:var(--u3);
    font-family:var(--mono);font-size:var(--t0);letter-spacing:var(--iz-orta);
    color:var(--beton);
  }
  /* Künye satırı şeritte anlamsız: her afiş kendi etiketini taşıyor. */
  .afis-kunye{display:none}
}

/* ════════════════════════════════════════════════════════════
   ANA SAYFA — hero (tanıtım), çıkış özeti ve bilet rota hattı.
   Tüm değerler jetonlardan (src/stil/jetonlar.css) gelir. Ham piksel
   yalnızca saç çizgisi (1px, rota hattı ve satır ayraçları) için
   serbest; 336px ve 120px brifingin bağlayıcı gereksinimlerinden
   birebir alındı (jeton karşılığı yok, ölçek dışı SAYILMAZ).
   ════════════════════════════════════════════════════════════ */

/* ---------- Hero ---------- */
/* Hero'nun KENDİ zemini YOK — bilerek. Opak bir zemin (eskiden --gece-2)
   gövdenin sıcak radyal gradyanını hero'nun içinde örtüyordu; hero bitince o
   sıcaklık aniden ortaya çıkıyor ve sınırda görünür bir dikiş oluşuyordu.
   Ölçüldü: son hero pikseli rgb(7,9,11), hemen altı rgb(20,15,15) — 13 puanlık
   sıçrama. Zemin saydam olunca aynı gradyan sınırın iki yanında da sürüyor. */
.hero{
  position:relative;
  overflow:hidden;
  /* Üst dolgu SABİT BARIN yüksekliğini de içerir. Hero y=0'dan başlıyor ama
     ilk 56px'i bar örtüyor; eşit dolgu verildiğinde kutu matematiksel olarak
     simetrik oluyor ama GÖZLE alta 56px ağır duruyordu. */
  /* Dolgu PENCERE YÜKSEKLİĞİNE göre esner. Sabit --u9 (96px) uzun ekranda
     ferahlık, kısa ekranda ölü alandı: 1000×650'lik bir pencerede üstte 144px
     (56'sını bar örtüyor, 88'i boşluk) ve altta 96px — perdenin %37'si dolgu
     (ölçüldü, sahip bildirdi: "üstte boşluk kaldı, üst başlıkla içerik
     arasında da boşluk kaldı"). Bar yüksekliği ayrıca ekleniyor: hero y=0'dan
     başlıyor ve ilk 56px'i bar örtüyor. */
  --hero-dolgu:clamp(var(--u4), 7vh, var(--u9));
  padding:calc(var(--hero-dolgu) + var(--tepe)) 0 var(--hero-dolgu);

  /* Yükseklik PENCEREYE BAĞLI. Sabit 679px'ken aynı kod ekrana göre zıt
     izlenim veriyordu: 1280×800'de hero ekranın %85'ini kaplıyor ve alttan
     121px sızıyordu (iyi bir "aşağısı var" ipucu), 1990×1180'de %58'e
     düşüp 501px sızdırıyordu — ekranın üçte biri, yani ipucu değil hero'nun
     bitmesi.

     Denenip elenen ara çözüm: hero'yu biraz kısaltıp altta ~140px'lik bir
     "aşağısı var" ipucu bırakmak. Ölçüldü ve kötü çıktı — sonraki bölümün
     "Biletler" başlığı 12px görünüp sabit şeridin altında KESİLİYORDU.
     Yarım kelime, hiç göstermemekten de tam göstermekten de kötü; üstelik
     nerede kesileceği pencere yüksekliğine göre değiştiği için kırılgan.
     Hero artık ilk perdeyi tam dolduruyor, sonraki bölüm her ekran
     boyunda temiz biçimde katlamanın altında kalıyor (1280×800'den
     1990×1180'e dört ölçüde doğrulandı).

     `svh` küçük görünüm yüksekliği: mobil tarayıcıda adres çubuğu kayarken
     `vh` zıplıyor. Desteklemeyen tarayıcı üstteki `vh` satırına düşer. */
  min-height:calc(100vh - var(--serit-y));
  min-height:calc(100svh - var(--serit-y));
  display:flex;align-items:center;
}
/* Esnek kapsayıcının çocuğu tam genişlik almalı; aksi halde içerik
   ortalanırken yatayda da daralıyor. */
.hero > .hero-icerik{width:100%}

/* İplik çizimi src/betik/iplikler.js'te. `width`/`height` ZORUNLU (D9.7,
   Görev 9 denetimi): kanvas mutlak konumlanmış bir REPLACED öge — `width`/
   `height` olmadan içsel boyut varsayılana (300×150) düşer, `inset:0` ile
   birlikte `left`+`right` kutuyu aşırı kısıtlar ve `right`/`bottom` yok
   sayılır (CSS 2.1 §10.3.8). `width:100%;height:100%` bu kutuyu
   `.hero`nun (containing block, `position:relative`) tam boyutuna sabitler
   — betik ayrıca `hero.clientWidth/Height * dpr` ile piksel yoğun içsel
   boyutu ayarlar, CSS boyutu sabit kaldığı için düzen kutusu BÜYÜMEZ. */
.iplikler{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  width:100%;height:100%;
}

/* Kanvasla içerik arasında okunabilirlik perdesi. */
.hero-perde{
  position:absolute;inset:0;z-index:2;
  /* Dipte SIFIRA söner. Tam opak bitirmek (eskiden var(--gece)) gövdenin sıcak
     gradyanını örtüyordu ve hero sınırında dikiş yaratıyordu; ayrıca ipliklerin
     alt bölümünü tamamen siliyordu (Görev 9 denetimi D9.4). Perde okunabilirliği
     içeriğin bulunduğu orta banda veriyor, kenarı serbest bırakıyor. */
  background:linear-gradient(180deg,
    rgba(4,5,6,.20) 0%,
    rgba(4,5,6,.50) 58%,
    rgba(4,5,6,.34) 86%,
    rgba(4,5,6,0) 100%);
}

.hero-icerik{position:relative;z-index:3}

.deste-grid{
  display:grid;
  /* Kapak sütunu PENCEREYE GÖRE büyür. Sabit 336px, 1990px'lik bir ekranda
     pencerenin yalnızca %16,9'u kalıyordu: kataloğun en güçlü görseli
     kompozisyonun en küçük öğesiydi. Alt sınır dar ekranı, üst sınır
     kapağın kendi çözünürlüğünü (640px kaynak) korur. */
  grid-template-columns:minmax(0, clamp(300px, 31vw, 560px)) 1fr;
  gap:var(--u8);
  align-items:end;
  margin-bottom:var(--u8);
}

/* Kare kapak yuvası. İçindeki tanıtım videosu bu kareye ortadan kırpılarak
   oturur. */
.sahne{max-width:clamp(300px, 31vw, 560px)}

.meta .tur{
  font-family:var(--mono);font-size:var(--t2);font-weight:500;
  letter-spacing:var(--iz-genis);text-transform:uppercase;
  color:var(--beton);margin-bottom:var(--u2);
}
.meta h2{
  font-size:var(--t8);font-weight:600;letter-spacing:var(--iz-siki);
  line-height:var(--lh1);color:var(--kemik);
}
/* Hero başlığına ÜÇ SATIRLIK yer ayrılır ve yazı o kutunun DİBİNE oturur.
   Sebebi üç kısıtın aynı anda tutulması:
     · göz satırı slaytlar arasında kıpırdamamalı (sahip 2026-09-11),
     · "devamını oku" fotoğrafın alt kenarında olmalı (sahip 2026-09-22),
     · yazı bloğu o satırla birlikte aşağıda durmalı, ortada delik kalmamalı.
   Başlık slaytlara göre 2 ya da 3 satır (ölçüldü: 124px / 187px) ve tek
   değişken o. Yer ayrılmazsa blok boyu değişiyor, blok dibe hizalıyken de
   göz satırı 62px oynuyordu. Boşluk başlığın ÜSTÜNDE kalıyor: küçük bir
   künye satırının ardından gelen geniş aralık, iki paragrafı birbirinden
   koparan aralıktan daha sakin duruyor. */
.hero-slayt .meta h2{
  min-height:calc(var(--lh1) * 3em);
  display:flex;align-items:flex-end;
}
/* Özete de İKİ SATIRLIK yer ayrılır. Blok dibe hizalı olduğu için toplam
   boyu sabit kalmalı: bir slaydın özeti tek satıra indiğinde (Avrupa
   turnesinde konuk sanatçı cümlesi Hamburg satırına taşınınca oldu) blok
   kısalıyor ve göz satırı 22px yukarı kayıyordu — kıpırdama testi üç
   motorda birden yakaladı. Boşluk özetin ALTINDA, "devamını oku"dan
   önce kalıyor: bir eylem satırının önündeki aralık en sakin yer. */
.hero-slayt .hero-ozet{min-height:calc(var(--lh2) * 2em)}
/* Dar/kısa pencerede kapak küçülüyor (clamp alt sınırı 300px) ama başlık
   küçülmüyor: üç satırlık ayrılmış yer künyeyi kapaktan UZUN yapıyor ve
   "devamını oku" kapağın altına taşıyordu (ölçüldü: künye 317px, kapak
   310px). O genişliklerde yer ayrılmaz — hizalama sözü yer ayırmaktan
   önce gelir. */
@media(max-width:1180px){
  .hero-slayt .meta h2{min-height:0;display:block}
}
.meta .tarih{
  font-family:var(--mono);font-weight:500;font-size:var(--t2);
  letter-spacing:var(--iz-genis);text-transform:uppercase;color:var(--kemik);
  margin-top:var(--u4);font-variant-numeric:tabular-nums;
}
/* Tarihin kendisi --ufuk renginde — sayfanın en sıcak bilgisi o. */
.meta .tarih b{color:var(--ufuk);font-weight:500}
.meta .feat{
  font-size:var(--t3);line-height:var(--lh2);color:var(--beton);
  margin-top:var(--u3);
}

.platformlar{display:flex;flex-wrap:wrap;gap:var(--u4);margin-top:var(--u5)}
/* text-transform YOK — bu bağlantıların metni PLATFORM ADI: "Apple Music",
   "Spotify", "YouTube Music". Türkçe sayfada versal dönüşümü "i" harfini
   noktalı "İ" yapıyor ve "APPLE MUSİC" çıkıyor — marka adı bozuluyor.
   Aynı gerekçe maNga (ustbar.css) ve Ferman Akgül (sayfa.css) için de yazılı.
   Versal için açılmış harf aralığı karışık kasada dağınık durduğundan
   --iz-genis yerine --iz-orta. Koruma: test/e2e/marka.spec.js */
.platformlar a{
  font-family:var(--mono);font-size:var(--t2);font-weight:500;
  letter-spacing:var(--iz-orta);
  color:var(--beton);padding-bottom:var(--u1);
  border-bottom:1px solid transparent;
  transition:color var(--hiz) var(--egri), border-color var(--hiz) var(--egri);
}
.platformlar a:hover{color:var(--kor);border-color:currentColor}

.kutular{display:flex;flex-wrap:wrap;gap:var(--u4);margin-top:var(--u7)}
.kutu{
  font-family:var(--mono);font-size:var(--t1);font-weight:500;
  letter-spacing:var(--iz-genis);text-transform:uppercase;color:var(--kemik);
  padding:var(--u4) var(--u6);
  /* WCAG 1.4.11 arayüz bileşeni 3:1 ister; --cizgi-acik bu eşiği geçmez,
     bu yüzden --kemik'in kendisinden türetilmiş bir alfa değeri kullanılır. */
  border:1px solid rgba(242,239,234,.42);
  transition:background var(--hiz) var(--egri), border-color var(--hiz) var(--egri);
}
.kutu:hover{background:rgba(242,239,234,.07);border-color:var(--kemik)}

/* ---------- Blok (bölüm) ---------- */
.blok{padding:var(--u9) 0}
/* Sayfa dibi sabit alt şeridin altında kalmasın. */
.blok:last-of-type{padding-bottom:calc(var(--serit-y) + var(--u8))}

.blok-basi{
  display:flex;align-items:baseline;justify-content:space-between;
  flex-wrap:wrap;gap:var(--u3);
  padding-bottom:var(--u4);margin-bottom:var(--u7);
  border-bottom:1px solid var(--cizgi);
}
.blok-basi h2{
  font-size:var(--t6);font-weight:600;letter-spacing:var(--iz-siki);
  color:var(--kemik);
}
.tamami{
  font-family:var(--mono);font-size:var(--t1);letter-spacing:var(--iz-genis);
  text-transform:uppercase;color:var(--beton);
  transition:color var(--hiz) var(--egri);
}
.tamami:hover{color:var(--kor)}

/* ---------- Rota hattı ---------- */
.yol{position:relative;padding-left:var(--girinti);margin-bottom:var(--u8)}
.yol:last-child{margin-bottom:0}
/* Soldan inen saç çizgisi — currentColor, etap rengini miras alır. */
.yol::before{
  content:'';position:absolute;top:0;bottom:0;left:var(--hat);
  width:1px;background:currentColor;opacity:.3;
}

/* Etap renkleri MEVSİMİ kodlar; hat ve noktalar currentColor kullandığı
   için renk buradan miras alınır. Renk TEK BAŞINA bilgi taşımaz — etap
   adı ve tanımı .etap-bas içinde metin olarak zaten var. */
.etap-1{color:var(--etap1)}
.etap-2{color:var(--etap2)}
.etap-3{color:var(--etap3)}

.etap-bas{
  position:relative;
  display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--u3);
  padding:var(--u3) 0 var(--u4);
}
/* Etap başlığındaki nokta hattın üstünde, her zaman dolu. */
.etap-bas::before{
  content:'';position:absolute;
  left:calc(var(--hat) - var(--girinti));top:50%;
  transform:translate(-50%,-50%);
  width:var(--nokta-bas);height:var(--nokta-bas);border-radius:50%;
  background:currentColor;
}
.etap-bas .ad{
  font-family:var(--mono);font-size:var(--t2);font-weight:600;
  letter-spacing:var(--iz-genis);text-transform:uppercase;color:currentColor;
}
.etap-bas .tanim{font-size:var(--t2);color:var(--beton)}

/* İKİ AYRI HEDEF (Görev 3 incelemesi sonrası): `.tarih-satir` artık bir <a>
   DEĞİL — gövde (`.tarih-govde`, detay sayfasına) ve bilet çipi (`.t-bilet`,
   bubilete) iki AYRI <a> çocuğu. Kapsayıcı yalnızca ızgarayı kurar; kendi
   hover/cursor stili YOK — o iki çocuğun kendi stilinde (aşağıda), böylece
   iki hedef görsel olarak ayrışık kalır. */
.tarih-satir{
  position:relative;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;gap:var(--u4);
  padding:var(--u4) 0;
  border-top:1px solid var(--cizgi);
}

.tarih-govde{
  display:grid;
  grid-template-columns:120px 1fr;
  align-items:center;gap:var(--u4);
  transition:background var(--hiz) var(--egri);
}
.tarih-govde:hover,.tarih-govde:focus-visible{background:rgba(242,239,234,.03)}

/* Halka boş — currentColor, satırın (gövde ya da çip) üstüne gelince ya da
   klavyeyle içine odaklanınca dolar. */
.tarih-satir::before{
  content:'';position:absolute;
  left:calc(var(--hat) - var(--girinti));top:50%;
  transform:translate(-50%,-50%);
  width:var(--nokta);height:var(--nokta);border-radius:50%;
  background:var(--gece);border:1px solid currentColor;
  transition:background var(--hiz) var(--egri);
}
.tarih-satir:hover::before,.tarih-satir:focus-within::before{background:currentColor}

/* Geçmiş konser sönük: şehir adı --beton. Gövde HER durumda gerçek bir
   bağlantı olduğu için ayrı bir `cursor:default` kuralı gerekmiyor —
   imleç doğal olarak yalnızca gerçekten tıklanabilir kısımların üstünde
   işaretçi gösteriyor. */
.tarih-satir[data-gecmis] .t-yer .sehir{color:var(--beton)}

.t-gun{
  display:flex;flex-direction:column;gap:var(--u1);
  font-family:var(--mono);font-size:var(--t3);
  letter-spacing:var(--iz-orta);color:var(--kemik);
  font-variant-numeric:tabular-nums;
}
.t-gun em{
  font-style:normal;font-size:var(--t0);letter-spacing:var(--iz-genis);
  text-transform:uppercase;color:var(--beton);
}

.t-yer{display:flex;flex-direction:column;gap:var(--u1)}
.t-yer .sehir{font-size:var(--t3);font-weight:500;color:var(--kemik)}
.t-yer .mekan{font-size:var(--t2);color:var(--beton)}

/* Dokunma hedefi (WCAG 2.2 SC 2.5.8, AA): çıplak metin 56×18px ölçüyordu —
   24×24 asgarisinin altında. Dolgu asıl araç: hedefi büyütür ama görsel
   olarak bağırmaz (metin boyutu AYNI kalıyor). Masaüstünde yalnızca
   asgariyi rahat geçecek kadar (--u2/--u3); ≤720px'te (dokunma birincil
   genişlik) --u4 dikey dolguyla 44px'i geçiyor — platform rehberinin
   ("bir başparmağın gerçekten ihtiyacı") istediği ölçek. Genişlik zaten
   her iki katmanda da 24px'in çok üstünde, ayrıca büyütülmüyor. */
.t-bilet{
  display:inline-block;
  font-family:var(--mono);font-size:var(--t1);font-weight:500;
  letter-spacing:var(--iz-genis);text-transform:uppercase;
  color:var(--ufuk);text-align:right;white-space:nowrap;
  padding:var(--u2) var(--u3);
  border-bottom:1px solid transparent;
  transition:border-color var(--hiz) var(--egri);
}
/* Kendi hedefi (bubilet) — kendi hover/focus'u, gövdeninkinden bağımsız:
   iki farklı bağlantı iki farklı görsel tepki verir. Alt çizgi artık
   dolgulu KUTUNUN TAMAMINI ölçüyor (metnin değil) — bu bilerek böyle:
   büyüyen dokunma alanının tamamını görünür kılıyor, "gövde" hover'ının
   arka-plan tonundan (`.tarih-govde:hover`) yine de görsel olarak ayrı
   kalıyor (çizgi ≠ dolgu), iki hedef karışmıyor. */
.t-bilet:hover,.t-bilet:focus-visible{border-color:currentColor}

.t-yakinda{
  font-family:var(--mono);font-size:var(--t1);letter-spacing:var(--iz-genis);
  text-transform:uppercase;color:var(--beton);text-align:right;white-space:nowrap;
}

/* ---------- Kırılma noktaları: yalnızca 560 / 720 / 900 ---------- */
@media(max-width:900px){
  .deste-grid{grid-template-columns:1fr;align-items:start}
  /* Dar ekranda medya SÜTUNU DOLDURUR. Eskiden 240px'e sabitlenmişti:
     390px'lik telefonda 326px'lik sütunda sola yapışık 240px'lik bir resim
     bırakıyordu (sol boşluk 32, sağ boşluk 118 — ölçüldü). Sahip
     (2026-09-11): "resimlerimiz garip duruyor, ortalı durmuyor." */
  .sahne{max-width:none}

  /* Dar ekranda dikey boşluklar kısılır. Masaüstündeki 120px üst dolgu ve
     64px sütun aralığı telefonda ölü alana dönüşüyordu: üst barla resim
     arasında ~230px, noktalarla künye arasında 64px (ölçüldü). Ekran dar
     olduğu için içeriğin ilk perdede görünmesi yatay ferahlıktan önemli. */
  /* Üst bar `position:fixed` — dolgu onun yüksekliğini AÇIKÇA hesaba katar.
     Sabit bir sayı yazıldığında (44px denendi) medya barın altına giriyordu. */
  .hero{padding:calc(var(--tepe) + var(--u5)) 0 var(--u8)}
  .deste-grid{gap:var(--u6)}

  /* Dar ekranda sıra: FOTOĞRAF → NOKTALAR → YAZI. Noktalar ızgaranın kendi
     satırına taşınınca belge sırasında künyenin ARKASINA düşüyor; telefonda
     bu onları resimden koparıp sayfanın dibine atıyordu. Sahip (2026-09-11)
     noktaların resme yapışık olmasını istemişti — yerleşim elle veriliyor. */
  .hero-slayt>.deste-grid{row-gap:var(--u4)}

  /* Deste ile künyesi arasına NEFES PAYI. Tek sütuna inince ızgara aralığı
     yetmiyordu: "2016'dan bugüne …" satırı kapaklara yapışık duruyordu
     (ölçüldü: 24px, sahip bildirdi "kapaklara çok yakın"). Deste eğik
     kartlar yüzünden görünenden geniş, o yüzden ayrıca üstten pay veriliyor. */
  .hero-slayt>.deste-grid>.sahne{grid-row:1;grid-column:1}
  .hero-slayt>.deste-grid>.hero-noktalar{grid-row:2;grid-column:1}
  .hero-slayt>.deste-grid>.meta{grid-row:3;grid-column:1;margin-top:var(--u2)}
  /* Tek sütunda künyeyi germenin anlamı yok; "devamını oku" yazının
     hemen altında kalsın. */
  .hero-slayt .meta{display:block}
  .hero-devam{margin-top:var(--u5);padding-top:0}
}

@media(max-width:720px){
  .tarih-satir{grid-template-columns:1fr;justify-items:start;gap:var(--u2)}
  .tarih-govde{grid-template-columns:1fr;justify-items:start;gap:var(--u2)}
  .t-bilet,.t-yakinda{text-align:left}
  /* Dokunma birincil genişlikte dikey dolgu büyütülüyor: 44px hedefini
     geçsin diye (bkz. .t-bilet üstündeki yorum). */
  .t-bilet{padding:var(--u4) var(--u3)}
}

@media(max-width:560px){
  .kutular{flex-direction:column;align-items:stretch}
  .kutu{text-align:center}
  .blok-basi{flex-direction:column;align-items:flex-start}
}

/* ── Hero slaytları ─────────────────────────────────────────────
   Slaytlar aynı ızgarayı paylaşır, yani geçişte düzen ZIPLAMAZ. Gizleme
   `hidden` özniteliğiyle: durum işaretlemede durur, ekran okuyucu gizli
   slaytları hiç okumaz. */
/* Slaytlar AYNI ızgara hücresinde üst üste: kap en uzun slayta göre yükselir,
   geçişte düzen zıplamaz. Video slaydı denetim satırı yüzünden ötekilerden
   24px uzundu; `display:none` ile gizlense o fark her geçişte görünürdü. */
.hero-slaytlar{display:flex;flex-direction:column;gap:var(--u5)}
/* Slaytlar AYRI bir kapta üst üste; noktalar o kabın DIŞINDA. Noktalar aynı
   ızgaranın içindeyken kap yükseklik hesabında şişiyordu: içerik 505'te
   bitiyor, noktalar 625'te başlıyordu — arada 120px ölü alan. */
/* Yatay kaydırma slayt geçişi; tarayıcının kendi yatay jestleri (ör. geri
   gitme) araya girmesin, dikey kaydırma serbest kalsın. */
.hero-sahne{display:grid;touch-action:pan-y}
/* Slayt ve içindeki ızgara kabın TAMAMINI kaplar. Kaplamazsa her slaytın
   ızgarası kendi içeriği kadar yükselir ve `align-items:end` yüzünden künye
   farklı yerden başlar: video slaydının medya sütunu denetim satırıyla 24px
   uzun olduğu için yazı 24px aşağıdan başlıyordu. Kabın tamamına yayılınca
   üçü de aynı tabana hizalanıyor. */
/* .deste-grid'in genel margin-bottom'u hero içinde ölü alana dönüşüyordu:
   içerik 505'te bitip kap 593'e kadar uzuyordu. Hero'da boşluğu noktalar
   veriyor, ızgaranın kendi payına gerek yok. */
.hero-slayt{grid-area:1/1}
/* Medya ve künye AYNI satırı paylaşıyor, noktalar kendi satırında. Noktalar
   sahnenin içindeyken künye sütunu sahne kadar uzuyordu ve "devamını oku"yu
   fotoğrafın altına sabitlemek onu noktalarla hizalıyordu — fotoğrafla değil. */
.hero-slayt>.deste-grid{margin-bottom:0;align-items:stretch;row-gap:var(--u4)}
/* Satır aralığı sütun aralığından AYRI: sütunlar arasındaki 64px noktaların
   altına girince fotoğrafla nokta arası koca bir boşluk oluyordu. */
.hero-slayt>.deste-grid>.hero-noktalar{grid-column:1;margin-top:0}
/* Başlık/özet için satır ayırMAYIZ. Denendi (min-height:3lh) ve geri alındı:
   iki satırlık başlıkta üçüncü satır boş kalıyor, özet görünür biçimde aşağı
   düşüyordu — sahibin "yazı da bir altta, bunun sebebi ne" dediği şey.
   Kıpırtıya karşı asıl güvence medyanın sabit kare yuvası: masaüstünde kap
   zaten medyaya göre uzuyor (336 > künye 273), yani künye farkı hiç
   görünmüyor. Mobilde noktalar slayta göre birkaç piksel oynuyor; bu,
   kısa başlığın altına boşluk açmaktan iyi. */
/* Slayt ızgarası ÜSTE hizalanır, alta değil. Alta hizalama slaytlar arasında
   iki ayrı kayma yaratıyordu: video slaydının medya sütunu denetim satırıyla
   24px uzun olduğu için (a) künye 24px aşağıdan başlıyordu, (b) medyanın
   kendisi 24px yukarı itiliyordu. Üste hizalayınca hem görsel hem yazı üç
   slaytta da aynı noktadan başlıyor — geçişte hiçbir şey kıpırdamıyor.
   `align-items:end` hero'nun tek çıkış gösterdiği düzenden kalmaydı; artık
   slayt olduğu için sabitlik daha değerli. */
.hero-slayt[inert]{visibility:hidden}

.hero-gorsel{
  width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block;
  background:var(--dip);
  /* GERÇEK bir kenar. Eskiden çerçeve `--cizgi` idi ve zemine karşı 1,19:1
     kontrasttaydı — yani görünmüyordu. Ölçüldü: kapağın sol kenarında zemin
     #080809, görselin kendi kenarı #060606; aynı ton. Kenarı olmayan nesne
     daha küçük ve daha az mevcut okunuyordu.
     Çözüm tek çizgi değil iki katman: ince bir hat ve görseli zeminden
     kaldıran yumuşak bir gölge. Ağır bir çerçeve yerine "nesne burada
     duruyor" hissi. */
  /* GERÇEK bir kenar: ince hat + görseli zeminden kaldıran gölge.
     Paspartulu çerçeve DENENDİ ve geri alındı — sahip (2026-09-22):
     "çerçeveyi sevmedim, sanatsal olmamış." */
  border:1px solid var(--cizgi-acik);
  box-shadow:0 18px 44px rgba(0,0,0,.55), 0 0 0 1px rgba(242,239,234,.04);
}

.hero-ozet{
  font-size:var(--t4);line-height:var(--lh2);color:var(--beton);
  max-width:52ch;margin-top:var(--u4);
}
/* Künye sütunu satırı DOLDURUR ve "devamını oku" dibine yapışır: böylece her
   slaytta fotoğrafın alt kenarıyla aynı hizada duruyor. Eskiden yazının
   uzunluğuna göre kayıyordu — üç slaytta 260 / 260 / 322 (ölçüldü), yani
   geçişte göz her seferinde onu yeniden arıyordu. Sahip bildirdi.
   Alta hizalama eskiden kaymaya yol açıyordu çünkü video slaydının medya
   sütunu denetim satırı yüzünden 24px uzundu; hero'da artık video yok,
   üç slaytta da medyanın alt kenarı aynı noktada. */
/* Künye bloğunun TAMAMI dibe hizalanır. Önce yalnızca "devamını oku"
   `margin-top:auto` ile aşağı atılmıştı; sahip haklı olarak itiraz etti:
   "devamını oku alta gelmiş de yazı en üstte kalmaya devam ediyor, değişen
   bir şey olmadı ki." O hâlde blok ikiye bölünüyor ve ortada kocaman bir
   delik kalıyordu. Blok bütün hâlinde aşağı iniyor: son satır fotoğrafın
   alt kenarıyla aynı hizada, yazı yukarı doğru büyüyor. */
.hero-slayt .meta{
  display:flex;flex-direction:column;justify-content:flex-end;min-height:0;
}
.hero-devam{margin-top:var(--u5)}
.hero-devam a{
  font-family:var(--mono);font-size:var(--t1);font-weight:500;
  letter-spacing:var(--iz-genis);text-transform:uppercase;
  color:var(--ufuk);
  border-bottom:1px solid transparent;padding-bottom:var(--u1);
  transition:border-color var(--hiz) var(--egri);
}
.hero-devam a:hover{border-color:currentColor}

/* Noktalar: hangi haberde olduğunu tek bakışta gösterir. Ok tuşları
   içerikten 120px aşağıda kalıyordu ve kopuk duruyordu; nokta hem daha az
   yer kaplar hem konumu bildirir. Her nokta kendi haberine gider. */
.hero-noktalar{display:flex;gap:var(--u3);align-items:center;margin-top:var(--u4)}
.hero-noktalar[hidden]{display:none}
.hero-nokta{
  appearance:none;cursor:pointer;padding:0;
  /* Görünen nokta 8px ama dokunma hedefi 24×24 (WCAG 2.5.8 AA): görünürlük
     ile tıklanabilirlik ayrı şeyler. */
  width:24px;height:24px;position:relative;
  background:none;border:0;
}
.hero-nokta::after{
  content:"";position:absolute;inset:8px;
  border:1px solid var(--beton-koyu);border-radius:50%;
  transition:background var(--hiz) var(--egri), border-color var(--hiz) var(--egri),
             inset var(--hiz) var(--egri);
}
.hero-nokta:hover::after{border-color:var(--beton)}
.hero-nokta[aria-current]::after{
  background:var(--ufuk);border-color:var(--ufuk);inset:7px;
}
.hero-nokta:focus-visible{outline:2px solid var(--odak);outline-offset:0}

@media(max-width:560px){
  .hero-ozet{font-size:var(--t3)}
}

/* ── Plak destesi ────────────────────────────────────────────
   Spec §18.4'te baştan planlanmış, katalog üç çıkışa ulaşana kadar
   ertelenmiş bileşen. Kartlar üst üste ve hafifçe eğik: düzgün
   istiflenmiş değil, masaya atılmış bir deste gibi.

   React Bits'in Stack bileşeninden alınanlar: eğik istif ve destenin
   üstündekini arkaya atma jesti. ALINMAYANLAR: kendiliğinden dönme
   (sitenin ilkesi "kendiliğinden hareket eden tek şey alt şerittir") ve
   rastgele açı (her derlemede aynı desen çıksın diye açılar sabit). */
.deste-duzen{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:var(--u8);align-items:center;
}
.deste{
  position:relative;
  width:300px;height:300px;
  flex:none;
}
.deste:focus-visible{outline:2px solid var(--odak);outline-offset:var(--u4)}

.deste-kart{
  position:absolute;inset:0;
  transform:rotate(var(--egim)) translateY(calc(var(--sira, 0) * 4px));
  transition:transform .52s var(--yay), opacity var(--hiz) var(--egri);
  transform-origin:50% 90%;
}
.deste-kapak{
  width:100%;height:100%;object-fit:cover;display:block;
  border:1px solid var(--cizgi-acik);
  box-shadow:0 18px 40px rgba(0,0,0,.6);
}

/* KAPAĞA DOKUNMAK SIRADAKİ PLAĞI ÖNE GETİRİR — çıkış sayfasını açmaz.
   Sahip (2026-09-21): "buna tıklayınca arkadaki şarkıya gitsin, amaç tüm
   kapaklara ulaşmak." Detay ayrı bir tuşta; müzik kartlarındaki künye
   düğmesiyle aynı ayrım: büyük yüzey birincil jesti, küçük tuş ikincil
   eylemi taşır. */
.deste-ilerle{
  position:absolute;inset:0;z-index:2;
  appearance:none;background:none;border:0;padding:0;
  cursor:pointer;
}
.deste-ilerle:focus-visible{outline:2px solid var(--odak);outline-offset:-3px}

/* Künye ve detay tuşu ilerletme yüzeyinin ÜSTÜNDE: detay tuşuna basmak
   kapağı ilerletmemeli. */
.deste-kunye{z-index:3}
.deste-detay{
  position:absolute;right:var(--u4);bottom:var(--u4);z-index:4;
  display:inline-flex;align-items:center;gap:var(--u2);
  padding:var(--u3) var(--u4);
  border:1px solid var(--cizgi-acik);
  background:rgba(4,5,6,.72);
  backdrop-filter:blur(6px);
  font-family:var(--mono);font-size:var(--t1);letter-spacing:var(--iz-orta);
  color:var(--kemik);
  opacity:0;transition:opacity var(--hiz) var(--egri), border-color var(--hiz) var(--egri);
}
.deste-kart[data-ust] .deste-detay{opacity:1}
.deste-detay:hover{border-color:var(--kor);color:var(--kor)}
.deste-detay:focus-visible{outline:2px solid var(--odak);outline-offset:2px;opacity:1}

/* Üstteki kart düz durur ve künyesini taşır; alttakiler eğik ve künyesiz. */
.deste-kart[data-ust]{transform:rotate(0deg)}
.deste-kunye{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;flex-direction:column;gap:2px;
  padding:var(--u6) var(--u4) var(--u4);
  /* Sağ dolgu tuşun GERÇEK genişliğinden hesaplanır (118px ölçülen değer) +
     araya bir boşluk: ad ile tuş bitişik duruyordu. */
  padding-right:calc(var(--u4) + 118px + var(--u3));
  background:linear-gradient(to top, rgba(4,5,6,.94), rgba(4,5,6,0));
  opacity:0;transition:opacity var(--hiz) var(--egri);
}
.deste-kart[data-ust] .deste-kunye{opacity:1}
.deste-kunye b{
  font-size:var(--t4);font-weight:600;letter-spacing:var(--iz-orta);color:var(--kemik);
}
.deste-kunye span{
  font-family:var(--mono);font-size:var(--t1);letter-spacing:var(--iz-orta);
  color:var(--beton);
}

/* Arkaya atılan kart: yana savrulup destenin altına iner. */
.deste-kart[data-atiliyor]{
  transform:translateX(-58%) rotate(-14deg);
  opacity:0;
}

.deste-ipucu{
  font-family:var(--mono);font-size:var(--t1);letter-spacing:var(--iz-orta);
  color:var(--beton-koyu);margin:0;max-width:34ch;
}

@media(max-width:900px){
  /* Satır aralığı sütun aralığından BÜYÜK: eğik kartlar kabı 21px aşıyor
     (ölçüldü), o yüzden 32px'lik aralığın görünen kısmı 11px'e düşüyor ve
     "2016'dan bugüne …" satırı kapaklara yapışık duruyordu (sahip bildirdi).
     Taşma paya ekleniyor. */
  .deste-duzen{
    grid-template-columns:1fr;
    column-gap:var(--u6);row-gap:calc(var(--u6) + 28px);
    justify-items:start;
  }
}
@media(max-width:560px){
  .deste{width:min(76vw, 300px);height:min(76vw, 300px)}
}
@media(prefers-reduced-motion: reduce){
  .deste-kart{transition:none}
  .deste-kart[data-atiliyor]{transform:none;opacity:0}
}

.deste-yan{display:flex;flex-direction:column;align-items:flex-start;gap:var(--u4);max-width:40ch}
.deste-ozet{
  font-size:var(--t5);line-height:var(--lh2);color:var(--kemik);
  letter-spacing:var(--iz-orta);margin:0;
}
.deste-yan .kutu{margin-top:var(--u2)}

/* Yurt dışı turnesi bloğu: Türkiye etaplarıyla aynı düzen, ayrı kimlik.
   Etap renkleri mevsimi kodluyor (--etap1..3); bu blok o diziye girmiyor,
   kendi nötr çizgisini taşıyor — farklı bir turne olduğu görünmeli. */
.yol-dis{border-left-color:var(--cizgi-acik)}
.yol-dis .etap-bas .ad{color:var(--kemik)}
/* NOT: `tarih-satir-dis` ve `tarih-govde-duz` kuralları KALDIRILDI. Yurt
   dışı satırları bir ara detay sayfası olmadığı için düz metindi; afişler
   gelip o dört konser de kendi sayfasını alınca satırlar standart
   `konserSatiri`ye döndü ve bu sınıflar hiç basılmaz oldu. Basılmayan
   sınıfa kural bırakmak bu projede tekrar eden bir kusur. */

/* ════════════════════════════════════════════════════════════
   BİLETLER — `/biletler` sayfasına özel. Yaklaşan tarihler ve afiş
   paneli anasayfa.css/afis.css'teki `.rota-grid`/`.tarih-satir`/`.yol`
   sınıflarını yeniden kullanır; burada yalnızca bu sayfaya özgü iki
   yeni sınıf var: sönük/katlanır geçmiş arşivi ve boş durum mesajı.
   Tüm değerler jetonlardan (src/stil/jetonlar.css) gelir.
   ════════════════════════════════════════════════════════════ */

.bos-mesaj{
  font-size:var(--t3);line-height:var(--lh2);color:var(--beton);
  padding:var(--u4) 0;
  border-top:1px solid var(--cizgi);
}

/* ---------- Geçmiş arşivi ---------- */
.gecmis-blok{
  margin-top:var(--u8);
  border-top:1px solid var(--cizgi-acik);
}

/* Katlanınca satırlar hiç boyanmaz; açılış oku tarayıcı varsayılanı
   yerine kendi işaretimiz — çift işaret görünmesin diye kapatılır. */
.gecmis-blok summary{
  display:flex;align-items:baseline;gap:var(--u3);
  padding:var(--u4) 0;
  cursor:pointer;
  list-style:none;
}
.gecmis-blok summary::-webkit-details-marker{display:none}
.gecmis-blok summary::before{
  content:'+';
  font-family:var(--mono);font-size:var(--t2);color:var(--beton);
  width:1em;
}
.gecmis-blok[open] summary::before{content:'–'}

.gecmis-blok summary .etiket{
  font-family:var(--mono);font-size:var(--t1);font-weight:500;
  letter-spacing:var(--iz-genis);text-transform:uppercase;color:var(--beton);
}
.gecmis-blok summary .sayi{
  font-family:var(--mono);font-size:var(--t1);color:var(--beton-koyu);
}

/* Arşivin içindeki rota hattı sönük: geçmiş konserler zaten
   `.tarih-satir[data-gecmis]` ile soluk (anasayfa.css) — burada ek
   olarak bütün blok biraz daha düşük opaklıkla, "arşiv" hissi verir. */
.gecmis-blok .yol{opacity:.72}

/* ---------- Kırılma noktaları: yalnızca 560 / 720 / 900 ---------- */
@media(max-width:560px){
  .gecmis-blok summary{gap:var(--u2)}
}

/* ════════════════════════════════════════════════════════════
   DUYURULAR — `/duyurular` akışı, tek giriş okuma sayfası ve ana
   sayfadaki DUYURULAR bölümü (spec §18.5/§18.6, D4.5). `.duyuru-liste`/
   `.duyuru-satir` hem akışta hem ana sayfa bölümünde aynı satırı basar
   (bkz. src/sablon/duyurular.js `duyuruSatiri`). `.bos-mesaj` burada
   YENİDEN TANIMLANMAZ — biletler.css'te zaten var, aynı sınıf paylaşılıyor.
   Tüm değerler jetonlardan (src/stil/jetonlar.css) gelir.
   ════════════════════════════════════════════════════════════ */

/* ---------- Satır (akış + ana sayfa bölümü ortak) ---------- */
.duyuru-liste{list-style:none;margin:0;padding:0}

.duyuru-satir{border-top:1px solid var(--cizgi)}

.duyuru-baglanti{
  display:grid;
  grid-template-columns:minmax(200px,260px) 1fr;
  align-items:baseline;gap:var(--u4);
  padding:var(--u4) 0;
  transition:background var(--hiz) var(--egri);
}
.duyuru-baglanti:hover,.duyuru-baglanti:focus-visible{background:rgba(242,239,234,.03)}

.duyuru-ust{display:flex;align-items:baseline;gap:var(--u3)}
.duyuru-tur{
  font-family:var(--mono);font-size:var(--t1);font-weight:500;
  letter-spacing:var(--iz-genis);text-transform:uppercase;color:var(--beton);
}
.duyuru-tarih{
  font-family:var(--mono);font-size:var(--t1);color:var(--beton-koyu);
  font-variant-numeric:tabular-nums;
}

.duyuru-baslik{font-size:var(--t4);font-weight:600;color:var(--kemik)}

/* ---------- Sayfalama (spec §18.9) — bu planda tek sayfaya sığıyor,
   `duyurularSayfasi` toplamSayfa=1 olunca hiç basmıyor; burada yalnızca
   20+ girişte kullanılacak görünümü tanımlıyoruz. ---------- */
.duyuru-sayfalama{
  display:flex;align-items:center;justify-content:center;gap:var(--u5);
  margin-top:var(--u8);
}
.duyuru-sayfa-onceki,.duyuru-sayfa-sonraki{
  font-family:var(--mono);font-size:var(--t1);font-weight:500;
  letter-spacing:var(--iz-genis);text-transform:uppercase;color:var(--beton);
  transition:color var(--hiz) var(--egri);
}
.duyuru-sayfa-onceki:hover,.duyuru-sayfa-sonraki:hover{color:var(--kor)}
.duyuru-sayfa-durum{
  font-family:var(--mono);font-size:var(--t1);color:var(--beton-koyu);
  font-variant-numeric:tabular-nums;
}

/* ---------- Tek giriş: özet (spec §18.6 — "--t5, --beton") ---------- */
.duyuru-ozet{
  font-size:var(--t5);line-height:var(--lh2);color:var(--beton);
  max-width:48ch;margin-top:var(--u5);
}

/* ---------- Tek giriş: gövde — okuma tipografisi (spec §18.6: satır
   uzunluğu ~65 karakter, satır aralığı --lh3, gövde --t4). body zaten
   t4/lh3'ü varsayılan taşıyor (temel.css) ama sayfa buna örtük güvenmez,
   kendi okuma yüzeyini burada açıkça tanımlar. Beyaz listedeki (src/lib/
   markdown.js SEMA) etiketlerin HEPSİ burada stillendirilir — tanımsız
   kalan etiket, yazar onu kullandığında sayfanın bozulması demektir.

   ÖLÇÜ NOTU (görev 4B incelemesi, Important bulgu): `ch` birimi yazı
   tipinin "0" rakamının ilerleme genişliği, düzyazının ortalama küçük
   harfinden BELİRGİN biçimde geniş — `65ch` yazmak 65 karakter DEĞİL,
   gerçek Archivo düzyazısında ölçüldüğünde satır başına ~87-88 karakter
   veriyordu (Playwright Range API ile canlı `dist/` çıktısında ölçüldü:
   her karakterin render edildiği satır bulunup TAM DOLU satırlar
   sayıldı). `48ch` burada aynı yöntemle yeniden ölçülüp doğrulandı —
   gerçek Türkçe düzyazıda satır başına ortalama ~62-65 karakter veriyor
   (bkz. task-4b-report.md "Düzeltme — 65ch okuma ölçüsü" bölümü, tam
   ölçüm çıktısı orada). ---------- */
.duyuru-govde{
  max-width:48ch;
  font-size:var(--t4);line-height:var(--lh3);color:var(--kemik);
  margin-top:var(--u7);
}
.duyuru-govde>*+*{margin-top:var(--u5)}

.duyuru-govde h2{
  font-size:var(--t6);font-weight:600;letter-spacing:var(--iz-siki);
  line-height:var(--lh1);color:var(--kemik);
}
.duyuru-govde h3{
  font-size:var(--t5);font-weight:600;letter-spacing:var(--iz-siki);
  line-height:var(--lh1);color:var(--kemik);
}
.duyuru-govde strong{font-weight:700;color:var(--kemik)}
.duyuru-govde em{font-style:italic}

.duyuru-govde ul,.duyuru-govde ol{padding-left:var(--u6)}
.duyuru-govde ul{list-style:disc}
.duyuru-govde ol{list-style:decimal}
.duyuru-govde li{margin-top:var(--u2)}
.duyuru-govde li:first-child{margin-top:0}

.duyuru-govde blockquote{
  padding-left:var(--u4);
  border-left:2px solid var(--cizgi-acik);
  color:var(--beton);font-style:italic;
}

.duyuru-govde a{color:var(--ufuk);text-decoration:underline;text-underline-offset:.15em}
.duyuru-govde a:hover{color:var(--kor)}

.duyuru-govde figure{margin:0}
.duyuru-govde img{width:100%;height:auto;display:block;border:1px solid var(--cizgi-acik)}
.duyuru-govde figcaption{
  font-family:var(--mono);font-size:var(--t1);color:var(--beton);
  margin-top:var(--u2);
}

/* ---------- Tek giriş: önceki/sonraki komşu gezinme ---------- */
.duyuru-komsular{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--u4);
  margin-top:var(--u9);padding-top:var(--u6);
  border-top:1px solid var(--cizgi);
}
.duyuru-komsu{
  display:flex;flex-direction:column;gap:var(--u1);
  padding:var(--u3) var(--u4);
  border:1px solid var(--cizgi-acik);
  transition:border-color var(--hiz) var(--egri), background var(--hiz) var(--egri);
}
.duyuru-komsu:hover{border-color:var(--kor);background:rgba(242,239,234,.03)}
/* Komşulardan biri yoksa (katalog ucunda — en eski girişte "önceki" yok,
   en yenide "sonraki" yok) `komsuBaglanti` o tarafı hiç basmaz; tek kalan
   kart burada tam genişliğe yayılır, boş bir grid hücresi bırakmaz. Yön
   sınıfının (onceki=sol, sonraki=sağ) text-align'ı tam genişlikte de
   korunur. */
.duyuru-komsu:only-child{grid-column:1/-1}
.duyuru-komsu-sonraki{text-align:right;align-items:flex-end}
.duyuru-komsu-yon{
  font-family:var(--mono);font-size:var(--t1);font-weight:500;
  letter-spacing:var(--iz-genis);text-transform:uppercase;color:var(--beton);
}
.duyuru-komsu-baslik{font-size:var(--t3);font-weight:500;color:var(--kemik)}

/* ---------- Kırılma noktaları: yalnızca 560 / 720 / 900 ---------- */
@media(max-width:720px){
  .duyuru-baglanti{grid-template-columns:1fr;justify-items:start;gap:var(--u2)}
  .duyuru-komsular{grid-template-columns:1fr}
  .duyuru-komsu-sonraki{text-align:left;align-items:flex-start}
}

/* ── Ana sayfa haber kartları ───────────────────────────────────
   Hero TEK haberi büyük gösterir ve kendiliğinden geçer; bu bölüm ÜÇÜNÜ
   birden serer ve DEVİNMEZ — aynı sayfada iki kendiliğinden geçiş göz yorar.
   Geniş ekranda üçü yan yana; dar ekranda yatay kaydırılır. */
.haber-liste{
  display:grid;
  /* DÖRT sütun: ana sayfada dört duyuru gösteriliyor (sahip 2026-09-22),
     üç sütunda dördüncüsü tek başına alt satıra düşüyordu. Kartlar yatay
     (3:2) olduğu için dört sütun 1400px'te hâlâ rahat. */
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:var(--u5);
  list-style:none;margin:0;padding:0;
}
@media(max-width:1180px){
  .haber-liste{grid-template-columns:repeat(2, minmax(0, 1fr))}
}

.haber-kart>a{
  display:flex;flex-direction:column;height:100%;
  border:1px solid var(--cizgi);
  background:var(--gece-2);
  transition:border-color var(--hiz) var(--egri), transform var(--hiz) var(--egri);
}
.haber-kart>a:hover{border-color:var(--cizgi-acik);transform:translateY(-2px)}

/* Kart çerçevesi YATAY (3:2), dikey değil. Arşivin 17 kaynağının 11'i yatay,
   5'i kare, yalnız 1'i dikey; dikey çerçeve materyale ters çalışıyor ve
   yanları kesiyordu — sahip bildirdi (Make-a-Wish karesinde fotoğrafın kendi
   altyazısı ortadan bölünmüştü). Afişler yine kesilmeden sığdırılıyor. */
.haber-gorsel{aspect-ratio:3/2;overflow:hidden;background:var(--dip)}
.haber-gorsel img{width:100%;height:100%;object-fit:cover;display:block}

/* Üst dolgu yanlardan BÜYÜK: görsel kartın tam kenarına dayandığı için
   metin ona yapışık görünüyordu (sahip 2026-09-11: "duyuruların altındaki
   yazı resimlere çok yakın"). Resimle yazı arasına gerçek bir nefes payı. */
.haber-govde{
  padding:var(--u6) var(--u5) var(--u5);
  display:flex;flex-direction:column;gap:var(--u2);flex:1;
}

.haber-ust{
  display:flex;gap:var(--u3);align-items:baseline;
  font-family:var(--mono);font-size:var(--t0);letter-spacing:var(--iz-genis);
  text-transform:uppercase;color:var(--beton-koyu);
}
.haber-tur{color:var(--ufuk)}
/* Tarih türden bir tık geride: kart taranırken önce ne olduğu, sonra ne zaman. */
.haber-tarih{color:var(--beton-koyu);letter-spacing:var(--iz-orta)}

.haber-baslik{
  font-size:var(--t4);font-weight:600;line-height:var(--lh1);
  letter-spacing:var(--iz-orta);color:var(--kemik);
}
.haber-ozet{
  font-size:var(--t2);line-height:var(--lh2);color:var(--beton);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}

/* Duyurular sayfası aynı kartı kullanır ama ızgarası farklıdır: ana sayfa
   üçle sınırlı bir vitrin, burası arşiv. Sütun sayısı içeriğe göre artar ve
   dar ekranda yatay kaydırma YOK — arşivde yan kaydırma, listenin nerede
   bittiğini gizler. */
.haber-liste-sayfa{grid-template-columns:repeat(auto-fill, minmax(260px, 1fr))}

@media(max-width:900px){
  .haber-liste{
    grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:62vw;
    overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:var(--u3);
  }
  .haber-kart{scroll-snap-align:start}

  /* Sayfa ızgarası yatay kaydırmaya KATILMAZ — yukarıdaki kuralları geri alır. */
  .haber-liste-sayfa{
    grid-auto-flow:row;grid-auto-columns:auto;
    grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
    overflow-x:visible;scroll-snap-type:none;padding-bottom:0;
  }
}
@media(max-width:560px){
  .haber-liste{grid-auto-columns:80vw}
  .haber-liste-sayfa{grid-template-columns:1fr}
}

/* Gövdedeki uzun belirteçler SARAR. Arşivden gelen metinlerde ham adresler
   var; 320px'te bölünemeyen bir kelime sayfayı yatay taşırıyordu (ölçüldü:
   iki duyuruda 24 ve 53px). İçerik düzeltildi, ama koruma kalıyor: metni
   sahip de yazacak ve bir adres bütün düzeni bozmamalı. */
.duyuru-govde{overflow-wrap:anywhere}
.duyuru-govde a{word-break:break-word}

/* ── Detay sayfası: geri dönüş, görsel, arşiv etiketi ──────── */

/* Listeye dönüş. Kartlardan açılan sayfada geri dönecek bir bağlantı YOKTU;
   komşu gezinmesi bir sonraki duyuruya götürüyor, listeye değil. */
.duyuru-geri{margin:0 0 var(--u5)}
.duyuru-geri a{
  font-family:var(--mono);font-size:var(--t1);font-weight:500;
  letter-spacing:var(--iz-genis);text-transform:uppercase;color:var(--beton);
  border-bottom:1px solid transparent;padding-bottom:2px;
  transition:color var(--hiz) var(--egri), border-color var(--hiz) var(--egri);
}
.duyuru-geri a:hover{color:var(--kor);border-color:currentColor}

/* Yazıya eşlik eden görsel. Listedeki kart 4:5 dikey kırpıyor; okuma
   sayfasında kırpma YOK — fotoğraf kendi oranında duruyor, yükseklik
   sınırlanıyor ki metni perdeden sürmesin. */
.duyuru-gorsel{
  margin:var(--u6) 0 0;max-width:620px;
  border:1px solid var(--cizgi-acik);background:var(--dip);line-height:0;
}
/* Yükseklik sınırı yok: görsel kendi oranında, kırpılmamış. 66vh'lik sınır
   bantlı 4:5 dosyayla birleşince kutuyu gereksiz büyütüyordu (sahip:
   "duyuru için görsel boyutu büyük mü"). */
.duyuru-gorsel img{display:block;width:100%;height:auto}

/* Arşiv etiketi kendini belli eder: 2017'de yazılmış bir metin bugünün
   duyurusuyla aynı görünmemeli. */
.haber-arsiv{color:var(--beton-koyu)}

/* ════════════════════════════════════════════════════════════
   FOTOĞRAFLAR — CSS 3B küre + gruplanmış arşiv ızgarası.

   Küre, React Bits'in Infinite Menu'sünün görsel fikri; bileşen DEĞİL.
   WebGL yerine CSS 3B kullanılmasının sebebi teknik değil, içeriksel:
   tuvalin içinde gerçek bağlantı, seçilebilir metin ve ekran okuyucu
   erişimi yok. Burada fayanslar gerçek <img> ve gerçek <a>.
   ════════════════════════════════════════════════════════════ */

.kure-alan{margin:var(--u5) 0 var(--u9)}

/* Küre İLK PERDEYE sığar: künyesi ve ipucuyla birlikte. Yalnızca genişliğe
   bağlıyken 1280x800'de perdenin altından taşıyor, künye görünmüyordu.
   `--cap` tek kaynak: yarıçap da fayans boyu da ondan türüyor. */
.kure{
  /* Kürenin ÜSTÜNDE ve ALTINDA duran her şeyin toplamı: sayfa başlığı,
     ipucu, künye ve turne şeridi. Ölçülerek bulundu — küre bu sabitin
     dışında kalan yeri dolduruyor. Düzen değişirse ölçüp güncelle. */
  --dolgu:342px;
  /* Çap üç sınırın en küçüğü:
     · 900px — metin sütunundan (--kolon 1120px) taşmasın;
     · genişlik: sayfanın KENAR BOŞLUĞU düşülüyor. Düz `92vw` onları
       saymadığı için 320px'te küre 9px taşıyordu. `100%` kullanılamaz:
       --cap'ten türeyen --r `translateZ()`e gidiyor, orada yüzde geçersiz —
       fayanslar sıfır boyuta düşüyor (denendi, ölçüldü);
     · yükseklik: sabit bir vh ORANI değil, kalan yer. Sayfa başlığı 258px,
       künye 47px, turne şeridi 42px — üstü küreye kalıyor. `56vh` iken
       1080p'de 130px, 1440p'de 500px boşta duruyordu. */
  --cap:min(900px, calc(100vw - var(--u6) * 2), calc(100dvh - var(--dolgu)));
  --r:calc(var(--cap) * .415);
  position:relative;
  width:var(--cap);height:var(--cap);
  margin:0 auto;
  perspective:1400px;
  cursor:grab;
  touch-action:pan-y;   /* dikey kaydırma serbest kalsın */
  /* Küre bir METİN DEĞİL, çevrilen bir nesne: sürükleme seçim başlatmamalı.
     Başlatınca tarayıcı fayansların ve künyenin üstüne mavi seçim katmanı
     çiziyor, küre "bozulmuş" gibi görünüyordu (sahip Safari'de bildirdi).
     Sayfanın geri kalanı seçilebilir kalıyor — asıl arşiv aşağıdaki ızgara. */
  user-select:none;-webkit-user-select:none;
}
.kure:active{cursor:grabbing}
.kure:focus-visible{outline:2px solid var(--odak);outline-offset:var(--u4)}

.kure-yuzey{
  list-style:none;margin:0;padding:0;
  position:absolute;inset:0;
  /* Yüzey ISABET HEDEFİ DEĞİL. WebKit'te 3B çocukların üstünde bu kutu
     kazanıyor ve tıklama fayansa hiç ulaşmıyordu: Safari'de bir fotoğrafa
     basınca HİÇBİR ŞEY olmuyordu (Playwright: "kure-yuzey intercepts
     pointer events"). Chromium'da sorun görünmüyordu. */
  pointer-events:none;
  transform-style:preserve-3d;
  transform:rotateX(var(--x, -8deg)) rotateY(var(--y, 0deg));
  will-change:transform;
}

/* Fayanslar SUNUCUDA hesaplanmış enlem/boylamla yerleşir; betik yalnızca
   yüzeyi döndürür. Yarıçap kürenin yarısından biraz küçük: fayanslar
   kenardan taşmasın. */
.kure-fayans{
  pointer-events:auto;         /* yüzey kapalı; isabet fayansın kendisinde */
  --en:calc(var(--cap) * .165);
  --boy:calc(var(--en) * .65);
  position:absolute;top:50%;left:50%;
  width:var(--en);height:var(--boy);
  margin:calc(var(--boy) / -2) 0 0 calc(var(--en) / -2);
  transform:
    rotateY(var(--boylam)) rotateX(calc(var(--enlem) * -1))
    translateZ(var(--r));
  transition:opacity var(--hiz) var(--egri);
}
.kure-fayans a{display:block;width:100%;height:100%}
/* Görselin kendi sürükle-bırak hayaleti de küreyi çevirmeyi bozuyordu. */
.kure-fayans img,.kure-fayans a{-webkit-user-drag:none}
.kure-fayans img{
  width:100%;height:100%;object-fit:cover;display:block;
  border:1px solid var(--cizgi-acik);
  box-shadow:0 6px 18px rgba(0,0,0,.55);
}
/* Öndeki fayans büyür ve künyesini açar; arkadakiler söner. Betik hangisinin
   önde olduğunu hesaplayıp `data-on` koyar. */
.kure-fayans[data-on] img{
  border-color:var(--kor);
  box-shadow:0 10px 30px rgba(0,0,0,.7), 0 0 0 1px var(--kor);
}
/* ARKADAKİ fayans tıklanmaz. Kürenin arkasında kalan bir kare görsel olarak
   sönük duruyor ama isabet sınamasında hâlâ öndekinin önüne geçebiliyordu:
   öne bakan bir fotoğrafa basarken arkadaki kare tıklamayı kapıyordu. */
.kure-fayans[data-arka]{opacity:.28;pointer-events:none}
/* Fayans tıklanabilir: imleç bunu söylesin, klavye odağı da görünsün. */
.kure-fayans a{cursor:zoom-in}
.kure-fayans a:focus-visible{outline:2px solid var(--odak);outline-offset:3px}

/* Künye TEK SATIR. İki satır halindeyken 47px yer yiyordu ve o yer
   küreden kısılıyordu; ad ile dönem yan yana durunca fark küreye gidiyor.
   Dar ekranda sarmasına izin var — orada dikey yer bol. */
.kure-kunye{
  margin:var(--u4) 0 0;min-height:1.6em;
  display:flex;flex-wrap:wrap;gap:var(--u2);
  align-items:baseline;justify-content:center;
  font-size:var(--t4);letter-spacing:var(--iz-orta);color:var(--kemik);
}
.kure-kunye span{
  font-family:var(--mono);font-size:var(--t1);
  letter-spacing:var(--iz-orta);color:var(--beton-koyu);
}
/* İpucu sayfanın TEK bilgi satırı: "eski sitenin arşivinden" cümlesi
   kaldırıldı (sahip istedi), yeri buna kaldı. Mono küçük etiket olarak
   durduğunda cümle gibi değil kod gibi okunuyordu; sayfa açıklamasının
   biçimini alıyor — gövde yazısı, okunur boy, kontrastı yüksek renk. */
.kure-ipucu{
  margin:var(--u4) 0 0;max-width:62ch;
  font-size:var(--t3);line-height:var(--lh2);color:var(--beton);
}

/* Betik yokken küre kurulmaz: `data-kure` işlenmemişse yüzey düz bir
   ızgaraya döner — kimse üst üste yığılmış fayans görmez. */
.kure:not([data-hazir]) .kure-yuzey{
  position:static;transform:none;
  display:flex;flex-wrap:wrap;gap:var(--u2);justify-content:center;
}
.kure:not([data-hazir]) .kure-fayans{
  position:static;margin:0;transform:none;width:76px;height:50px;
}
/* Betiksiz yedekte `--cap` bir yükseklik dayatmasın. */
.kure:not([data-hazir]){height:auto;perspective:none;cursor:default}
.foto-basi:not([data-hazir]) .kure-ipucu{display:none}

/* ── Gruplanmış arşiv ──────────────────────────────────────── */
.foto-izgara-baslik{
  font-family:var(--mono);font-size:var(--t2);font-weight:500;
  letter-spacing:var(--iz-genis);text-transform:uppercase;color:var(--beton);
  margin:var(--u9) 0 var(--u6);padding-bottom:var(--u3);
  border-bottom:1px solid var(--cizgi-acik);
}
.foto-izgara-baslik b,.foto-grup-baslik b{
  color:var(--kor);font-weight:500;margin-left:var(--u2);
}

.foto-grup{margin-bottom:var(--u9)}
.foto-grup:last-child{margin-bottom:0}
.foto-grup-baslik{
  font-family:var(--mono);font-size:var(--t2);font-weight:500;
  letter-spacing:var(--iz-orta);color:var(--kemik);
  margin:0 0 var(--u5);
}
.foto-grup-baslik span{color:var(--beton-koyu);margin-left:var(--u2)}

.foto-izgara{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:var(--u5);
}
.foto-izgara figure{margin:0;display:flex;flex-direction:column;gap:var(--u3)}
.foto-izgara img{
  width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block;
  border:1px solid var(--cizgi);background:var(--dip);
  transition:border-color var(--hiz) var(--egri);
}
.foto-izgara li:hover img{border-color:var(--cizgi-acik)}
.foto-izgara figcaption{
  font-family:var(--mono);font-size:var(--t1);letter-spacing:var(--iz-orta);
  color:var(--beton);
}
/* Küreden bir fotoğrafa atlandığında hedef kısa süre işaretlenir. */
.foto-izgara li:target img{border-color:var(--kor)}

@media(max-width:560px){
  .foto-izgara{grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));gap:var(--u4)}
}

/* Hareket azaltma: küre KURULMAZ, ızgara hâlinde kalır. Sürekli dönen bir
   yüzey bu tercihi açmış kullanıcı için tam da kaçınılan şey. */
@media(prefers-reduced-motion: reduce){
  .kure-yuzey{transition:none}
}


/* ── BÜYÜTEÇ ────────────────────────────────────────────────
   Küreden bir fotoğrafa basınca açılan büyük görünüm. Yerli <dialog>:
   odak tuzağı, Esc ve perde tarayıcıdan geliyor.

   Neden var: tıklayınca sayfanın en altındaki ızgaraya ışınlanmak kafa
   karıştırıyordu (sahip bildirdi). Küçük bir kareye basan kişi onu
   BÜYÜK görmek istiyor. */
.buyutec{
  border:0;padding:0;max-width:none;max-height:none;
  /* Zemin TAMAMEN donuk. `::backdrop` %94'teyken sayfanın kendi künyesi
     perdeden sızıp büyütecin künyesiyle üst üste biniyordu. Donuk zemin
     `::backdrop` desteklenmeyen tarayıcıda da arkayı kapatır. */
  background:var(--dip);
  color:var(--kemik);
  width:100vw;height:100dvh;
  display:none;                       /* açılmadan yer kaplamasın */
  align-items:center;justify-content:center;gap:var(--u4);
  overflow:hidden;
}
.buyutec[open]{display:flex}
.buyutec::backdrop{background:var(--dip)}

.buyutec-govde{
  margin:0;display:flex;flex-direction:column;gap:var(--u4);align-items:center;
  max-width:min(1100px, 88vw);
}
.buyutec-govde img{
  display:block;max-width:100%;max-height:70dvh;width:auto;height:auto;
  border:1px solid var(--cizgi-acik);background:var(--dip);
}
.buyutec-govde figcaption{text-align:center}
.buyutec-govde figcaption b{
  display:block;font-weight:500;font-size:var(--t4);color:var(--kemik);
  letter-spacing:var(--iz-orta);
}
.buyutec-govde figcaption span{
  display:block;margin-top:var(--u1);
  font-family:var(--mono);font-size:var(--t1);letter-spacing:var(--iz-orta);
  color:var(--beton-koyu);
}

/* Dokunma hedefleri 44px: WCAG 2.5.8. */
.buyutec-tus{
  flex:none;width:44px;height:44px;
  display:grid;place-items:center;
  border:1px solid var(--cizgi);background:rgba(20,18,18,.7);
  color:var(--kemik);font-size:var(--t5);line-height:1;
  cursor:pointer;transition:border-color var(--hiz) var(--egri),
    color var(--hiz) var(--egri);
}
.buyutec-tus:hover{border-color:var(--kor);color:var(--kor)}
.buyutec-tus:focus-visible{outline:2px solid var(--odak);outline-offset:2px}
.buyutec-kapat{position:absolute;top:var(--u4);right:var(--u4)}

/* Dar ekranda oklar fotoğrafın YANINDA değil ÜSTÜNDE duruyor: yan yana
   dizilince ikisi birden genişliğin dörtte birini yiyor, 390px'te fotoğraf
   284px'e düşüyordu. Üste alınca kare neredeyse tüm genişliği kullanıyor. */
@media(max-width:560px){
  .buyutec{gap:0}
  .buyutec-govde{max-width:94vw}
  .buyutec-govde img{max-height:58dvh}
  .buyutec-onceki,.buyutec-sonraki{
    position:absolute;top:50%;transform:translateY(-50%);
    background:rgba(20,18,18,.86);
  }
  .buyutec-onceki{left:var(--u2)}
  .buyutec-sonraki{right:var(--u2)}
}

@media(prefers-reduced-motion: reduce){
  .buyutec-tus{transition:none}
}

/* ════════════════════════════════════════════════════════════
   İÇERİK SAYFASI — genel gövde okuma tipografisi (spec §18.7, D6.1).
   Şu an yalnızca `/hakkinda` bunu kullanıyor (bkz. src/sablon/
   icerikSayfasi.js). `.duyuru-govde` (duyurular.css) ile AYNI ölçüm
   yöntemiyle doğrulanmış aynı satır uzunluğu jetonlarını paylaşır — iki
   bileşenin ayrı dosyada durması kasıtlı: `duyuru-govde` sayfalama/komşu
   gezinme gibi duyuruya özgü bağlamla iç içe, `icerik-govde` sade bir
   tek-sütun okuma yüzeyi ve gelecekteki başka içerik sayfalarınca da
   (spec §6 `sayfa` tablosu) kullanılabilir. Tüm değerler jetonlardan
   (src/stil/jetonlar.css) gelir.
   ════════════════════════════════════════════════════════════ */

/* ÖLÇÜ NOTU: `ch` birimi yazı tipinin "0" rakamının ilerleme genişliği,
   düzyazının ortalama küçük harfinden belirgin biçimde geniş — bu plandaki
   ilk sürümde `65ch` yazmak satır başına ~87-88 karakter veriyordu (bkz.
   duyurular.css'teki ölçüm notu, aynı yöntem). `48ch` burada da Playwright
   Range API ile canlı `dist/` çıktısında ölçülüp doğrulandı (bkz.
   test/e2e/hakkinda.spec.js) — gerçek Archivo düzyazıda satır başına
   konforlu aralıkta (45-75 karakter) veriyor. */
.icerik-govde{
  max-width:48ch;
  font-size:var(--t4);line-height:var(--lh3);color:var(--kemik);
  margin-top:var(--u7);
}
.icerik-govde>*+*{margin-top:var(--u5)}

.icerik-govde h2{
  font-size:var(--t6);font-weight:600;letter-spacing:var(--iz-siki);
  line-height:var(--lh1);color:var(--kemik);
}
.icerik-govde h3{
  font-size:var(--t5);font-weight:600;letter-spacing:var(--iz-siki);
  line-height:var(--lh1);color:var(--kemik);
}
.icerik-govde strong{font-weight:700;color:var(--kemik)}
.icerik-govde em{font-style:italic}

.icerik-govde ul,.icerik-govde ol{padding-left:var(--u6)}
.icerik-govde ul{list-style:disc}
.icerik-govde ol{list-style:decimal}
.icerik-govde li{margin-top:var(--u2)}
.icerik-govde li:first-child{margin-top:0}

.icerik-govde blockquote{
  padding-left:var(--u4);
  border-left:2px solid var(--cizgi-acik);
  color:var(--beton);font-style:italic;
}

.icerik-govde a{color:var(--ufuk);text-decoration:underline;text-underline-offset:.15em}
.icerik-govde a:hover{color:var(--kor)}

.icerik-govde figure{margin:0}
.icerik-govde img{width:100%;height:auto;display:block;border:1px solid var(--cizgi-acik)}
.icerik-govde figcaption{
  font-family:var(--mono);font-size:var(--t1);color:var(--beton);
  margin-top:var(--u2);
}

/* ════════════════════════════════════════════════════════════
   İLETİŞİM — `/iletisim` sayfası (src/sablon/iletisim.js). İki adres
   kartı (booking · basın) `konser.css`teki `.konser-komsu` çerçeve
   desenini paylaşır (ince kenarlık, hover'da --kor). Sosyal liste
   burada YENİDEN TANIMLANMAZ — `.sosyal`/`.sosyal li`/`.sosyal a`
   sayfa.css'te (alt bilgi) zaten tanımlı, aynı sınıf paylaşılıyor.
   Tüm değerler jetonlardan (src/stil/jetonlar.css) gelir.
   ════════════════════════════════════════════════════════════ */

.iletisim-kartlar{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--u6);
  margin-top:var(--u8);
}

.iletisim-kart{
  display:flex;flex-direction:column;gap:var(--u3);
  padding:var(--u6);
  border:1px solid var(--cizgi-acik);
  transition:border-color var(--hiz) var(--egri);
}
.iletisim-kart:hover{border-color:var(--kor)}

.iletisim-kart-etiket{
  font-family:var(--mono);font-size:var(--t1);font-weight:500;
  letter-spacing:var(--iz-genis);text-transform:uppercase;
  color:var(--beton);
}

.iletisim-kart-aciklama{
  font-size:var(--t3);line-height:var(--lh2);color:var(--beton);
}

.iletisim-kart-eposta{
  font-size:var(--t5);font-weight:600;letter-spacing:var(--iz-siki);
  color:var(--kemik);
  transition:color var(--hiz) var(--egri);
}
.iletisim-kart-eposta:hover{color:var(--kor)}

/* ---------- Sosyal hesaplar: başlık yeni, liste `.sosyal` (sayfa.css) ---------- */
.iletisim-sosyal{margin-top:var(--u8)}
.iletisim-sosyal-baslik{
  font-family:var(--mono);font-size:var(--t1);font-weight:500;
  letter-spacing:var(--iz-genis);text-transform:uppercase;
  color:var(--beton);margin-bottom:var(--u4);
}
/* Bu sayfada liste bir footer içinde DEĞİL — sayfa.css'teki `.sosyal`
   kuralı zaten sınıfa bağlı (footer'a scope'lu değil), ek kural gerekmez. */

/* ---------- Kırılma noktaları: yalnızca 560 / 720 / 900 ---------- */
@media(max-width:720px){
  .iletisim-kartlar{grid-template-columns:1fr}
}

/* ════════════════════════════════════════════════════════════
   KONSER — tek konser detay sayfası (spec §18.3). Solda afiş TAM
   boyutta, sağda künye, altta aynı etaptaki diğer tarihlerin komşu
   gezinmesi. Bilet düğmesi `.kutu`'yu (anasayfa.css) yeniden kullanır —
   sitedeki tek CTA görünümü burada tekrar tanımlanmaz. Tüm değerler
   jetonlardan (src/stil/jetonlar.css) gelir.
   ════════════════════════════════════════════════════════════ */

.konser-grid{
  display:grid;
  grid-template-columns:var(--afis-buyuk) minmax(0,1fr);
  gap:var(--u8);
  align-items:start;
}

.konser-afis{
  width:100%;
  /* 4/5: afişlerin gerçek oranı (spec §11.3 "Afişler 1080×1350 (4:5)") —
     afis.css'teki panel de aynı oranı taşır, jeton karşılığı yok, ölçek
     dışı SAYILMAZ. */
  aspect-ratio:4/5;
  overflow:hidden;
  border:1px solid var(--cizgi-acik);
  background:var(--gece);
}
.konser-afis img{width:100%;height:100%;object-fit:cover;display:block}

.konser-kunye{display:flex;flex-direction:column}

.konser-tarih{
  font-family:var(--mono);font-size:var(--t3);font-weight:500;
  letter-spacing:var(--iz-orta);color:var(--ufuk);
  font-variant-numeric:tabular-nums;
}

.konser-mekan{
  font-size:var(--t5);color:var(--kemik);
  margin-top:var(--u2);
}

/* "Bu konser geçti" / "Yakında" durum etiketi. */
.konser-durum{
  font-family:var(--mono);font-size:var(--t1);font-weight:500;
  letter-spacing:var(--iz-genis);text-transform:uppercase;color:var(--beton);
  margin-bottom:var(--u3);
}

.konser-eylem{margin-top:var(--u5)}
.konser-eylem .kutu{display:inline-block}

/* ---------- Komşu gezinme: aynı etaptaki diğer tarihler ---------- */
.konser-komsular{
  margin-top:var(--u9);
  padding-top:var(--u6);
  border-top:1px solid var(--cizgi);
}
.komsu-baslik{
  font-family:var(--mono);font-size:var(--t1);font-weight:500;
  letter-spacing:var(--iz-genis);text-transform:uppercase;color:var(--beton);
  margin-bottom:var(--u4);
}
.komsu-liste{display:flex;flex-wrap:wrap;gap:var(--u3)}
.konser-komsu{
  display:flex;flex-direction:column;gap:var(--u1);
  padding:var(--u3) var(--u4);
  border:1px solid var(--cizgi-acik);
  transition:border-color var(--hiz) var(--egri), background var(--hiz) var(--egri);
}
.konser-komsu:hover{border-color:var(--kor);background:rgba(242,239,234,.03)}
.komsu-sehir{font-size:var(--t3);font-weight:500;color:var(--kemik)}
.komsu-tarih{
  font-family:var(--mono);font-size:var(--t1);letter-spacing:var(--iz-orta);
  color:var(--beton);font-variant-numeric:tabular-nums;
}

/* ---------- Kırılma noktaları: yalnızca 560 / 720 / 900 ---------- */
@media(max-width:720px){
  .konser-grid{grid-template-columns:minmax(0,1fr)}
}

/* Konuk sanatçı — yalnızca veride varsa basılır (şu an Hamburg). Mekanın
   hemen altında: afişteki "special guest" satırının karşılığı. */
.konser-konuk{
  font-family:var(--mono);font-size:var(--t1);letter-spacing:var(--iz-orta);
  color:var(--kehribar);margin:var(--u2) 0 0;
}

/* ════════════════════════════════════════════════════════════
   MÜZİK — sekmeler, yıl akışı, çevrilen çıkış kartı, çıkış sayfası.
   Tüm değerler jetonlardan gelir.
   ════════════════════════════════════════════════════════════ */

/* ── Sekmeler ────────────────────────────────────────────────
   Gerçek bağlantı, JS sekmesi değil (bkz. muzik.js `sekmeler`).
   Sayfa başlığının ALTINDA gerçek bir denetim olarak durur; açıklama
   metni sekmenin ALTINA iner — üstündeyken sıfır boşlukla yapışıp tek
   blok gibi okunuyordu. */
.muzik-sekme{
  display:flex;gap:var(--u2);flex-wrap:wrap;
  border-bottom:1px solid var(--cizgi);
  margin:var(--u7) 0 0;
}
/* Üçüncü sekme (Canlı) eklenince çubuk 320px'e SIĞMIYOR ve sayfa 108px
   yatay taşıyordu (ölçüldü). Dar ekranda sekmeler alt satıra iner ve
   dolgusu kısılır — yatay kaydırma çubuğu vermek yerine sarıyorlar. */
@media(max-width:560px){
  .muzik-sekme a{padding:var(--u3) var(--u4);gap:var(--u2)}
}
.muzik-sekme a{
  display:flex;align-items:center;gap:var(--u3);
  padding:var(--u4) var(--u5);
  margin-bottom:-1px;
  border:1px solid transparent;border-bottom:0;
  color:var(--beton);
  transition:color var(--hiz) var(--egri), background var(--hiz) var(--egri),
             border-color var(--hiz) var(--egri);
}
.muzik-sekme a:hover{color:var(--kemik);background:var(--gece-2)}
.muzik-sekme a:focus-visible{outline:2px solid var(--odak);outline-offset:-2px}

.sekme-ad{
  font-family:var(--mono);font-size:var(--t2);font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
}
/* Sayı rozeti: sekmenin ne kadar dolu olduğunu söyler, etiketle yarışmaz. */
.sekme-sayi{
  font-family:var(--mono);font-size:var(--t0);font-weight:500;
  font-variant-numeric:tabular-nums;color:var(--beton-koyu);
  padding:2px 6px;border:1px solid var(--cizgi-acik);
  line-height:1.4;
}

/* Etkin sekme gerçekten ÖNE ÇIKAR: kendi zemini var, çizgisi köz rengi ve
   alt kenarı çubuğun çizgisini keserek "seçili sayfa buradan açılıyor"
   izlenimini verir. Tek bir alt çizgi bunu anlatmaya yetmiyordu. */
.muzik-sekme a[aria-current="page"]{
  color:var(--kemik);
  background:var(--gece-2);
  border-color:var(--cizgi-acik);
  box-shadow:inset 0 2px 0 var(--ufuk);
}
.muzik-sekme a[aria-current="page"] .sekme-sayi{
  color:var(--kor);border-color:rgba(224,138,92,.4);
}

/* Açıklama sekmeyi TARİF eder: seçili olana göre değişir. */
.sekme-aciklama{
  color:var(--beton);font-size:var(--t3);line-height:var(--lh2);
  /* Sekmeyle arası GENİŞ: ikisi yapışıkken tek blok gibi okunuyordu.
     Soldaki köz çizgi metni sekmeye değil sayfaya bağlar. */
  margin:var(--u7) 0 var(--u8);max-width:58ch;
  padding-left:var(--u5);border-left:2px solid var(--ufuk);
}

/* ── Katalog ızgarası ────────────────────────────────────────
   Tek akış; yıl ayracı YOK (gerekçe muzik.js `akis`). */
.muzik-liste{
  display:grid;
  /* 240px: kapak daha iyi okunuyor VE arka yüzdeki metne gerçek yer kalıyor.
     190px'te dört satırlık özet bile yarım kelimede kesiliyordu. */
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:var(--u7) var(--u5);
}

/* ── Çıkış kartı ─────────────────────────────────────────────
   Kapak kare bir sahne; künye onun ARKASINDA duruyor. Çevirmeyi
   köşedeki düğme tetikler, kapağın kendisi değil (gerekçe muzik.js). */
.cikis-kart{display:flex;flex-direction:column;gap:var(--u4)}

/* ── Çevrilen kart ────────────────────────────────────────────
   DÖNEN ŞEY iki yüz DEĞİL, onları taşıyan tek bir kat (`.kart-yuzler`).
   Önceki sürüm iki yüzü ayrı ayrı döndürüyordu ve arka yüz `display:none`
   ile başlıyordu; yeni görünür olan bir öğede geçiş ÇALIŞMAZ, o yüzden
   arka yüz hiç dönmeden son hâline atlıyordu (ölçüldü: her karede
   `matrix(1,0,0,1,0,0)`, yani birim matris). Sonuçta ön yüz yarım saniye
   dönerken arka yüz ilk kareden beri karşıda duruyordu — sahip (2026-09-21)
   "düzgünce geçmiyor" derken tam olarak bunu görüyordu.

   Doğru kurulum: perspektif sahnede, `preserve-3d` dönen katta, iki yüz
   sabit açılarda (0° ve 180°) ve `backface-visibility:hidden` ile sırtı
   dönük olan gizli. Hiçbir yüz `display:none` OLMAZ — erişilebilirlik
   `inert` + `aria-hidden` ile sağlanır (hero slaytlarındaki aynı desen). */
.kart-sahne{
  position:relative;
  aspect-ratio:1;
  perspective:1100px;
}

.kart-yuzler{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  transition:transform .62s var(--yay);
}
.cikis-kart[data-acik] .kart-yuzler{transform:rotateY(180deg)}

.kart-on,.kart-arka{
  position:absolute;inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
/* Gölge DÖNÜŞE tepki verir: kart kenarına geldiğinde daralır, yüzü dönünce
   yeniden açılır (React Bits'in fikri, kütüphanesiz).
   Geçişle YAPILAMAZ: iki değer arasında ara nokta yok, gölgenin ortada
   dibe inip geri çıkması gerekiyor. Bu yüzden anahtar kareler — ve iki yöne
   de çalışsın diye betik her çevirmede `data-donuyor` koyup kaldırıyor. */
.kart-golge{
  position:absolute;left:8%;right:8%;bottom:-6px;height:18px;
  border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.65), transparent 72%);
  pointer-events:none;
}
.cikis-kart[data-donuyor] .kart-golge{animation:golge-dar .62s var(--egri)}
/* Dip %50'de DEĞİL %24'te: yay eğrisi başta hızlı olduğu için kart kenara
   (90°) 620ms'nin 150ms'inde geliyor — ölçüldü. Doğrusal ortada bir dip,
   kart çoktan dönmüşken gölgeyi daraltıyordu. */
@keyframes golge-dar{
  0%{transform:scaleX(1);opacity:1}
  24%{transform:scaleX(.42);opacity:.32}
  100%{transform:scaleX(1);opacity:1}
}

.kart-on{display:block;transform:rotateY(0deg)}
.kart-arka{
  transform:rotateY(180deg);
  background:var(--gece-2);border:1px solid var(--cizgi-acik);
  /* Sağ altta çevirme düğmesi duruyor; alt dolgu onun üstüne yazı
     binmesin diye büyük. */
  padding:var(--u4) var(--u4) var(--u6);
  display:flex;flex-direction:column;
  overflow-y:auto;
}

.kart-kapak{
  display:block;width:100%;height:100%;
  background:var(--dip);border:1px solid var(--cizgi);
  overflow:hidden;position:relative;
  transition:border-color var(--hiz) var(--egri);
}
.kapak-im{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--hiz-uzun) var(--egri), filter var(--hiz) var(--egri);
}

/* İmleç kapağın üstündeyken: kapak hafifçe yaklaşır ve aydınlanır, çerçeve
   belirginleşir, başlık köz rengine döner. Kart tıklanabilir olduğunu
   söylemeliydi — önce hiçbir tepki vermiyordu. */
.cikis-kart:hover .kart-kapak,
.cikis-kart:focus-within .kart-kapak{border-color:var(--cizgi-acik)}
.cikis-kart:hover .kapak-im,
.cikis-kart:focus-within .kapak-im{transform:scale(1.04);filter:brightness(1.08)}
.cikis-kart:hover .cikis-baslik a,
.cikis-kart:focus-within .cikis-baslik a{color:var(--kor)}

/* Çevrilmiş kartta yakınlaştırma anlamsız: ön yüz zaten görünmüyor. */
.cikis-kart[data-acik]:hover .kapak-im{transform:none}
.kart-kapak:has(.kapak-harf){display:grid;place-items:center}
.kapak-harf{
  font-family:var(--display);font-size:var(--t8);font-weight:700;
  color:var(--beton-koyu);line-height:1;
}

/* Çevirme düğmesi — kapağın sağ alt köşesinde, dokunma hedefi 44px. */
.kart-cevir{
  position:absolute;right:0;bottom:0;z-index:2;
  appearance:none;background:none;border:0;padding:0;cursor:pointer;
  width:44px;height:44px;
  display:grid;place-items:center;
  color:var(--beton);
  transition:color var(--hiz) var(--egri);
}
.kart-cevir:hover{color:var(--kemik)}
.kart-cevir:focus-visible{outline:2px solid var(--odak);outline-offset:-4px}
.cevir-im{width:19px;height:19px;display:block;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.65))}
.cikis-kart[data-acik] .kart-cevir{color:var(--kor)}

/* Betik yüklenmemişse düğme HİÇ görünmez: tıklandığında bir şey olmayan bir
   denetim bırakmayız. Künye o hâlde çıkış sayfasında duruyor. */
.kart-cevir[hidden]{display:none}

/* Arka yüz: bir plak kabının arkası gibi kurulu — üstte künye satırı ve
   ad, ortada ön yüze sığmayan bilgi, altta eylem. Tür ve tarih BURADA
   TEKRAR EDİLMEZ; ikisi de kartın ön yüzünde yazıyor. */
/* Açılış cümlesi arka yüzün ASIL içeriği. Başlık ve tür burada TEKRAR
   EDİLMEZ: ikisi de kartın altında, çevrilse de görünür durumda. */
.arka-ozet{
  font-size:var(--t2);line-height:var(--lh2);color:var(--kemik);
  margin:0 0 var(--u3);
  /* `min-height:0` ŞART: esnek kapsayıcının çocuğu varsayılan olarak
     küçülmüyor ve kırpma hiç devreye girmeden metin taşıyordu. */
  flex:0 1 auto;min-height:0;
  /* Kırpma sınırı KUTUYA GÖRE. 5 satıra ayarlıydı ama kutu dört satır
     alıyordu (ölçüldü: 76px kutu, 17px satır): kırpma hiç devreye girmiyor,
     `overflow:hidden` satır ortasından kesiyor ve üç nokta çıkmıyordu —
     yazı cümle ortasında bitmiş gibi görünüyordu (sahip mobilde bildirdi).
     Dört satır hem sığıyor hem üç noktayı gösteriyor. */
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
.arka-bilgi{
  list-style:none;margin:0;padding:var(--u3) 0 0;
  border-top:1px solid var(--cizgi-acik);
  display:flex;flex-direction:column;gap:var(--u2);
  font-family:var(--mono);font-size:var(--t1);line-height:var(--lh1);
  letter-spacing:var(--iz-orta);color:var(--beton);
}
/* Eylem bloğu dibe yapışır: kart ne kadar bilgi taşırsa taşısın dinleme
   düğmeleri hep aynı yerde. */
.arka-eylem{margin-top:auto;display:flex;flex-direction:column;gap:var(--u3)}

.kart-platform{display:flex;gap:var(--u3)}
.kart-platform a{
  width:34px;height:34px;display:grid;place-items:center;
  border:1px solid var(--cizgi-acik);color:var(--beton);
  transition:color var(--hiz) var(--egri), border-color var(--hiz) var(--egri);
}
.kart-platform a:hover{color:var(--kemik);border-color:var(--beton-koyu)}
.platform-im{width:17px;height:17px;display:block;fill:currentColor}

.kart-detay{
  font-family:var(--mono);font-size:var(--t1);letter-spacing:var(--iz-orta);
  color:var(--kor);
}

.cikis-bilgi{display:flex;flex-direction:column;gap:var(--u1)}
.cikis-baslik{font-size:var(--t4);font-weight:600;letter-spacing:var(--iz-orta);
  line-height:var(--lh1);margin:0}
.cikis-baslik a{color:var(--kemik);transition:color var(--hiz) var(--egri)}
.cikis-baslik a:hover{color:var(--kor)}
.cikis-kunye{
  font-family:var(--mono);font-size:var(--t1);letter-spacing:var(--iz-orta);
  color:var(--beton-koyu);margin:0;
}
.cikis-yakinda{color:var(--kor);font-weight:600}

/* Tam künye listesi — yalnızca ÇIKIŞ SAYFASINDA. Kartın arkasında değil:
   orada tür ve tarih ön yüzde zaten yazıyor, tekrar edilmiyor. */
.kart-kunye{margin:0;display:flex;flex-direction:column;gap:var(--u3)}
.kunye-satir{
  display:grid;grid-template-columns:130px minmax(0,1fr);gap:var(--u4);
  align-items:baseline;padding-bottom:var(--u3);
  border-bottom:1px solid var(--cizgi);
}
.kunye-satir:last-child{border-bottom:0;padding-bottom:0}
.kunye-satir dt{
  font-family:var(--mono);font-size:var(--t0);letter-spacing:var(--iz-genis);
  text-transform:uppercase;color:var(--beton-koyu);margin:0;
}
.kunye-satir dd{margin:0;font-size:var(--t3);color:var(--kemik);line-height:var(--lh1)}

@media(max-width:560px){
  .kunye-satir{grid-template-columns:1fr;gap:var(--u1)}
}

/* ── Tek çıkış sayfası ───────────────────────────────────────── */
.cikis-geri{
  font-family:var(--mono);font-size:var(--t1);letter-spacing:var(--iz-orta);
  margin:0 0 var(--u6);
}
.cikis-geri a{color:var(--beton)}
.cikis-geri a:hover{color:var(--kor)}

.cikis-duzen{
  display:grid;grid-template-columns:420px minmax(0,1fr);
  gap:var(--u8);align-items:start;
}
/* Kapak YAPIŞKAN: metin uzun, aşağı inildikçe görsel kaçmasın (sahip
   2026-09-21: "açıklama yazısında aşağıya indikçe kapak da inmeli").
   Yalnızca iki sütunun sığdığı genişlikte — dar ekranda üst üste
   dizildiği için anlamsız. Hakkında sayfasındaki portreyle aynı desen. */
.cikis-gorsel .kart-kapak{aspect-ratio:1}
@media(min-width:901px){
  /* `align-self:stretch` ŞART: ızgara `align-items:start` ile kurulu, öğe
     içeriğine göre daralıyor ve yapışacak boşluk kalmıyordu (ölçüldü: 420px
     kaydırınca kapak -142'ye kaçtı). Öğe uzatılıp YAPIŞKAN olan içteki
     kutu yapılınca kapak metin boyunca yerinde kalıyor. */
  .cikis-gorsel{align-self:stretch}
  .cikis-gorsel .kart-kapak{
    position:sticky;top:calc(var(--tepe) + var(--u5));
    /* `height:auto` ŞART: temel kuralda `height:100%` var (kartta kare
       sahneyi doldurmak için) ve burada uzayan sütunu baştan sona
       kaplıyordu — kapak kabıyla aynı boyda olunca yapışacak pay
       kalmıyordu (ölçüldü: gorsel 987px, kapak 987px, pay 0). */
    height:auto;
  }
}
.cikis-govde h1{margin:0 0 var(--u2)}
.cikis-alt{
  font-family:var(--mono);font-size:var(--t2);letter-spacing:var(--iz-orta);
  color:var(--beton);margin:0 0 var(--u5);
}
.cikis-govde .kart-kunye{margin-bottom:var(--u6)}
.cikis-platform{display:flex;gap:var(--u4);margin-bottom:var(--u6)}
.cikis-platform a{
  display:flex;align-items:center;gap:var(--u3);
  padding:var(--u3) var(--u5);
  border:1px solid var(--cizgi-acik);color:var(--kemik);
  font-family:var(--mono);font-size:var(--t1);letter-spacing:var(--iz-orta);
  transition:border-color var(--hiz) var(--egri), color var(--hiz) var(--egri);
}
.cikis-platform a:hover{border-color:var(--kor);color:var(--kor)}
.cikis-platform .sr-only{position:static;width:auto;height:auto;
  clip-path:none;white-space:normal}
.cikis-metin p{max-width:62ch;color:var(--beton);margin:0 0 var(--u4)}

/* ---------- Kırılma noktaları: yalnızca 560 / 720 / 900 ---------- */
@media(max-width:900px){
  .cikis-duzen{grid-template-columns:1fr;gap:var(--u6)}
  .cikis-gorsel{max-width:340px}
}
@media(max-width:720px){
  .muzik-liste{grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
    gap:var(--u6) var(--u4)}
}
@media(max-width:560px){
  .muzik-sekme{gap:var(--u4)}
}

/* Hareket azaltma: 3B dönüş YOK, anında değişim. Kart yine çalışır —
   yalnızca dönme animasyonu düşer. */
@media(prefers-reduced-motion: reduce){
  /* 3B dönüş YOK, anında değişim. Yüzler artık dönmediği için
     `backface-visibility` de iş görmez — görünürlük elle çevrilir. */
  .kart-yuzler{transition:none;transform-style:flat}
  .cikis-kart[data-acik] .kart-yuzler{transform:none}
  .kart-on,.kart-arka{backface-visibility:visible;transform:none}
  .kart-arka{visibility:hidden}
  .cikis-kart[data-acik] .kart-on{visibility:hidden}
  .cikis-kart[data-acik] .kart-arka{visibility:visible}
}

/* feat bilgisi — kart künyesinin altında, bir tık geride. */
.cikis-feat{
  font-family:var(--mono);font-size:var(--t1);letter-spacing:var(--iz-orta);
  color:var(--beton);margin:0;
}

/* ════════════════════════════════════════════════════════════
   CANLI KAYITLAR — tıkla-yükle oynatıcı.

   Sayfa açılırken YouTube'dan hiçbir şey istenmiyor: kapak sitenin kendi
   sunucusundan, gömülü oynatıcı ancak oynata basınca kuruluyor. Beş gömülü
   oynatıcı sayfayı açan herkese yüz kilobaytlarca üçüncü taraf betiği
   indirtirdi.
   ════════════════════════════════════════════════════════════ */

.canli-liste{
  display:grid;
  /* `minmax(320px, …)` dar ekranda KABI AŞIYOR: 320px'lik telefonda sütun
     kenar boşluklarını saymadan 320px istiyor ve sayfa 108px yatay taşıyordu
     (ölçüldü). `min(320px, 100%)` alt sınırı kaba bağlıyor. */
  grid-template-columns:repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap:var(--u7) var(--u6);margin-top:var(--u7);
}

.canli-kart{display:flex;flex-direction:column;gap:var(--u4)}

/* 16:9 yuva. Kapak ve gömülü oynatıcı AYNI kutuyu dolduruyor; oynatıcı
   gelince düzen kıpırdamıyor. */
.canli-sahne{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  background:var(--dip);border:1px solid var(--cizgi-acik);
}
.canli-kapak{width:100%;height:100%;object-fit:cover;display:block}
.canli-sahne iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Oynat tuşu kapağın ÜSTÜNDE, tam ortada. Dokunma hedefi 64px — WCAG 2.5.8
   asgarisi 24px ama bu birincil eylem. */
.canli-oynat{
  position:absolute;inset:0;width:100%;height:100%;
  display:grid;place-items:center;
  appearance:none;border:0;padding:0;cursor:pointer;
  background:linear-gradient(to bottom, rgba(4,5,6,.16), rgba(4,5,6,.52));
  transition:background var(--hiz) var(--egri);
}
.canli-oynat:hover{background:linear-gradient(to bottom, rgba(4,5,6,.06), rgba(4,5,6,.42))}
.canli-oynat:focus-visible{outline:2px solid var(--odak);outline-offset:-4px}
.canli-ucgen{
  width:64px;height:64px;border-radius:50%;
  background:rgba(4,5,6,.72);border:1px solid var(--cizgi-acik);
  display:block;position:relative;
  transition:background var(--hiz) var(--egri), border-color var(--hiz) var(--egri);
}
.canli-oynat:hover .canli-ucgen{background:var(--ates);border-color:var(--ates-hi)}
/* Üçgen SVG değil, kenarlıkla: ek istek yok, ek dosya yok. */
.canli-ucgen::after{
  content:"";position:absolute;top:50%;left:calc(50% + 3px);
  transform:translate(-50%, -50%);
  border-style:solid;border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent var(--kemik);
}
/* NOT: "açıkken kapağı gizle" diye bir kural YOK ve olmamalı. Betik
   `replaceChildren` ile kapağı ve tuşu DOM'dan çıkarıyor; o kural yazıldığında
   hiçbir zaman eşleşmeyen ölü koddu (kırma denemesi kuralı kaldırdığında test
   yine geçti — durumu markup hiç üretmiyor). */

.canli-govde{display:flex;flex-direction:column;gap:var(--u2)}
.canli-baslik{
  font-size:var(--t5);font-weight:600;letter-spacing:var(--iz-siki);
  line-height:var(--lh1);color:var(--kemik);margin:0;
}
.canli-baglam{
  font-family:var(--mono);font-size:var(--t1);letter-spacing:var(--iz-orta);
  color:var(--beton);margin:0;
}
.canli-duet{
  display:inline-block;margin-left:var(--u2);padding:1px var(--u2);
  border:1px solid var(--cizgi-acik);color:var(--kehribar);
  text-transform:uppercase;letter-spacing:var(--iz-genis);font-size:var(--t0);
}
.canli-metin{font-size:var(--t2);line-height:var(--lh2);color:var(--beton);margin:0}

/* Betik yüklenmezse tuş çalışmaz; bu bağlantı her hâlde çalışır. */
.canli-dis{margin:var(--u1) 0 0}
/* VERSAL YOK: bağlantı "YouTube" markasını taşıyor ve `uppercase` onu
   YOUTUBE yapıyor. Aynı kural sitede iki kez daha ihlal edilmişti (maNga üst
   barda, Ferman Akgül sayfa gözünde); marka taşıyan öğe bu kalıbın dışında
   kalır ve harf aralığı karışık kasaya göre kısılır. */
.canli-dis a{
  font-family:var(--mono);font-size:var(--t1);font-weight:500;
  letter-spacing:var(--iz-orta);color:var(--ufuk);
  border-bottom:1px solid transparent;padding-bottom:2px;
  transition:border-color var(--hiz) var(--egri);
}
.canli-dis a:hover{border-color:currentColor}

@media(prefers-reduced-motion: reduce){
  .canli-oynat,.canli-ucgen,.canli-dis a{transition:none}
}

/* ════════════════════════════════════════════════════════════
   SAYFA KABUĞU — iç sayfaların başlık bloğu, giriş metni ve alt bilgi.
   Tüm değerler jetonlardan (src/stil/jetonlar.css) gelir.
   ════════════════════════════════════════════════════════════ */

/* ---------- Sayfa başlığı (anasayfa.css'teki .blok-basi'nin sayfa
   ölçeğine büyütülmüş hâli — spec §18.1). .blok-goz burada YENİ tanımlanan
   bir sınıf — anasayfa.css'te böyle bir sınıf yok, büyütülen yalnızca
   .blok-basi (h1 için ek stil aşağıda). ---------- */
/* Ayrı bir üst boşluk YOK: sayfa404'ün de gösterdiği gibi .sayfa-basi her
   zaman bir .blok içine yerleşir; .blok'un kendi üst dolgusu (--u9, 88px)
   sabit üst barı (--tepe, 56px) zaten temizliyor. */

/* text-transform YOK — bu göz "Ferman Akgül" markasını taşıyor ve versal
   dönüşüm onu FERMAN AKGÜL yapar (küresel kısıt: marka yazımlarına
   text-transform uygulanmaz). Versal için açılmış harf aralığı karışık kasada
   dağınık durduğu için --iz-genis yerine --iz-orta. Aynı gerekçe ustbar.css'te
   maNga bağlantısı için de yazılı. Koruma: test/e2e/marka.spec.js */
.sayfa-basi .blok-goz{
  font-family:var(--mono);font-size:var(--t1);font-weight:500;
  letter-spacing:var(--iz-orta);
  color:var(--beton);margin-bottom:var(--u4);
}

.sayfa-basi .blok-basi h1{
  font-size:var(--t7);font-weight:800;letter-spacing:var(--iz-siki);
  line-height:var(--lh1);color:var(--kemik);
}

.sayfa-alt{
  font-size:var(--t3);line-height:var(--lh2);color:var(--beton);
  max-width:62ch;margin-top:var(--u4);
}

.sayfa-eylem{margin-top:var(--u7)}

/* ---------- Alt bilgi ---------- */
footer{
  border-top:1px solid var(--cizgi);
  padding:var(--u8) 0 calc(var(--u10) + var(--serit-y));
}

.alt-adres{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--u6);
  margin-bottom:var(--u7);
}
.alt-adres p{display:flex;flex-direction:column;gap:var(--u1)}
.alt-adres .mono{
  font-family:var(--mono);font-size:var(--t0);font-weight:500;
  letter-spacing:var(--iz-genis);text-transform:uppercase;color:var(--beton);
}
.alt-adres a{
  font-size:var(--t3);color:var(--kemik);
  transition:color var(--hiz) var(--egri);
}
.alt-adres a:hover{color:var(--kor)}

/* Brifingde "tek satır" isteniyor: satır kaymıyor (flex-wrap YOK). 4
   sosyal bağlantıyla dar ekranlarda (~339px altı, ölçülmüş) satır kabuk
   genişliğini aşıyor; taşan kısım bu yüzden kaydırılabilir bırakılıyor —
   body{overflow-x:hidden} (temel.css) nedeniyle kaydırma çubuğu olmazsa
   son öge ekranın dışında hem görünmez hem dokunulamaz kalırdı. */
.sosyal{
  display:flex;list-style:none;margin:0 0 var(--u7);padding:0;
  overflow-x:auto;
}
.sosyal li{
  border-left:1px solid var(--cizgi-acik);
  padding:0 var(--u4);
}
.sosyal li:first-child{
  border-left:none;padding-left:0;
}
/* text-transform YOK — bu listenin metni PLATFORM ADI: "Apple Music",
   "Spotify", "YouTube", "Instagram". Türkçe yerelde versal dönüşümü "i"yi
   noktalı "İ" yapıyor ve "APPLE MUSİC" çıkıyor. Aynı gerekçe maNga (ustbar),
   Ferman Akgül (.blok-goz) ve platform düğmeleri (anasayfa.css) için de
   yazılı. Koruma: test/e2e/marka.spec.js */
.sosyal a{
  font-family:var(--mono);font-size:var(--t2);font-weight:500;
  letter-spacing:var(--iz-orta);
  color:var(--beton);
  transition:color var(--hiz) var(--egri);
}
.sosyal a:hover{color:var(--kor)}

.kunye{
  font-size:var(--t2);line-height:var(--lh2);color:var(--beton-koyu);
}

/* ---------- Kırılma noktaları: yalnızca 560 / 720 / 900 ---------- */
@media(max-width:720px){
  .alt-adres{grid-template-columns:1fr}
}

/* ── Hakkında: portre ve metin yan yana ─────────────────────────────
   Geniş ekranda sabit genişlikte bir portre sütunu ve yanında metin.
   Portre sütunu `max-content` DEĞİL sabit: başlık uzunluğu değiştiğinde
   görselin genişliği oynamasın. */
.hakkinda-duzen{
  display:grid;
  grid-template-columns:420px minmax(0, 1fr);
  gap:var(--u8);
  align-items:start;
}
.hakkinda-portre{display:block;width:100%;height:auto}

/* Metin sütunundaki sayfa başlığı kendi üst boşluğunu taşımaz: portrenin
   üst kenarıyla AYNI hizadan başlaması isteniyor. */
.hakkinda-metin>.sayfa-basi{margin-top:0}

/* Portre yapışkan: biyografi uzun, kaydırırken görsel kaçmasın. Yalnızca
   sütunun sığdığı genişlikte — dar ekranda üst üste dizildiği için anlamsız. */
@media(min-width:901px){
  /* Izgara `align-items:start` ile kurulu; öğe içeriğine göre daralınca
     yapışacak pay kalmıyor. `stretch` onu metin sütunu boyunca uzatır,
     yapışkan olan içteki portre olur. */
  .hakkinda-gorsel{align-self:stretch}
  .hakkinda-portre{position:sticky;top:calc(var(--tepe) + var(--u5))}
}

@media(max-width:900px){
  .hakkinda-duzen{grid-template-columns:1fr;gap:var(--u6)}
}

.serit-alt{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:flex;align-items:stretch;height:var(--serit-y);
  background:rgba(4,5,6,.96);backdrop-filter:blur(14px);
  border-top:1px solid var(--cizgi-acik);
}
.serit-pencere{
  flex:1;
  /* min-width:0 OLMADAN bu flex öğesi içeriği kadar genişler, taşma hiç
     oluşmaz ve overflow-x kaydıracak bir şey bulamaz. */
  min-width:0;
  position:relative;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;cursor:grab;
}
.serit-pencere::-webkit-scrollbar{display:none}
.serit-pencere.cekiliyor{cursor:grabbing}
.serit-pencere.cekiliyor .serit-yol{user-select:none}
.serit-yol{display:flex;width:max-content;height:100%}
.serit-oge{
  display:flex;align-items:center;gap:var(--u3);padding:0 var(--u5);white-space:nowrap;
  font-family:var(--mono);font-size:var(--t1);letter-spacing:.14em;text-transform:uppercase;
  color:var(--beton);
  transition:color var(--hiz) var(--egri),background var(--hiz) var(--egri);
}
.serit-oge .nokta{
  width:var(--nokta);height:var(--nokta);border-radius:50%;flex:none;
  background:var(--gece);border:1px solid var(--ufuk);
  transition:background var(--hiz) var(--egri);
}
.serit-oge:hover{color:var(--kor);background:rgba(196,99,60,.07)}
.serit-oge:hover .nokta{background:var(--ufuk)}
.serit-oge .tar{color:var(--ufuk);font-variant-numeric:tabular-nums}
.serit-oge[data-yakinda]{cursor:default}
.serit-oge[data-yakinda] .nokta{border-color:var(--beton-koyu)}
.serit-oge[data-yakinda]:hover{color:var(--beton);background:none}
.serit-oge[data-yakinda]:hover .nokta{background:var(--gece)}
.serit-yakinda{color:var(--beton-koyu);font-size:var(--t0);letter-spacing:.18em}

/* ════════════════════════════════════════════════════════════
   ÜST BAR — marka solda · gezinme ORTADA · araçlar sağda.
   Tüm değerler jetonlardan gelir. Ham piksel yalnızca .marka-im
   (26px, spec §3.3'ün bağlayıcı gereksinimi) için serbest.
   ════════════════════════════════════════════════════════════ */
.ust{
  position:fixed;top:0;left:0;right:0;z-index:60;
  height:var(--tepe);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:var(--u4);
  padding:0 var(--u6);
  background:rgba(4,5,6,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--cizgi);
}

.marka{
  justify-self:start;
  display:flex;align-items:center;gap:var(--u3);
}
/* SVG'nin kapsayıcıya açılmasını engelleyen tek şey bu — viewBox tek
   başına boyut vermez. */
.marka-im{
  width:26px;height:26px;flex:none;display:block;
}
.marka span{
  font-weight:800;font-size:15px;letter-spacing:var(--iz-orta);
  color:var(--kemik);
}

.ust nav{justify-self:center}

.gnav-liste{
  display:flex;list-style:none;gap:var(--u1);margin:0;padding:0;
}
.gnav-liste a{
  /* Gövde 10.5px ve ince kalıyordu; 12.5px + 500 ağırlık mono'nun karakterini
     kaybetmeden okunaklı yapar. Harf aralığı bir tık kısıldı: versal mono'da
     .16em 10.5px'te ferah, 12.5px'te dağınık görünüyor. */
  font-family:var(--mono);font-size:var(--t2);font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;
  color:var(--beton);
  padding:var(--u2) var(--u4);
  position:relative;
  transition:color var(--hiz) var(--egri);
}
.gnav-liste a:hover{color:var(--kemik)}

/* Etkin sayfa: yazı beyaza çıkar, altına köz rengi bir çizgi. Çizgi eskiden
   kemik rengindeydi ve yazıyla aynı tonda kalıp "etkin"i zayıf gösteriyordu;
   aksan rengi hem ayırt eder hem markanın rengini gezinmeye taşır. */
.gnav-liste a[aria-current="page"]{color:var(--kemik)}
.gnav-liste a[aria-current="page"]::after{
  content:'';position:absolute;left:var(--u4);right:var(--u4);bottom:2px;
  height:2px;background:var(--ufuk);
}
.gnav-liste a:focus-visible{outline:2px solid var(--odak);outline-offset:2px}

/* Masaüstünde bu sarmalayıcı GÖRÜNMEZ (`display:contents`): `nav` ve
   `.araclar` doğrudan `.ust`in ızgara ögeleri olarak yerleşir — eskisiyle
   birebir aynı üç sütunlu düzen. 900px altında gerçek bir kutuya döner
   (aşağıdaki kırılma noktası bloğu) ve menü düğmesinin açtığı açılır
   panel olur. `[hidden]`in UA varsayılanı (`display:none`) yazar
   kaynaklı bu kuralla zaten ezilir — tanıtım.css'teki aynı desen. */
.gezinme-panel{display:contents}

.menu-dugme{
  display:none; /* masaüstünde yok — 900px altında görünür (aşağıda) */
  appearance:none;background:none;border:0;padding:0;cursor:pointer;
  color:var(--kemik);
  width:var(--u7);height:var(--u7);
  align-items:center;justify-content:center;
}
.menu-im{width:var(--u5);height:var(--u5)}

.araclar{
  justify-self:end;
  display:flex;align-items:center;gap:var(--u4);
}

/* maNga siteden ÇIKAN bağlantı. text-transform YOK — marka "maNga" diye
   yazılır, versal dönüşüm onu MANGA yapar (küresel kısıt). */
.disari-bag{
  font-size:11px;letter-spacing:.06em;
  color:var(--beton);
  border-left:1px solid var(--cizgi-acik);
  padding-left:var(--u5);
  transition:color var(--hiz) var(--egri);
}
.disari-bag:hover{color:var(--kor)}

.bar-dil{
  font-family:var(--mono);font-size:var(--t0);
  color:var(--beton-koyu);
  transition:color var(--hiz) var(--egri);
}
.bar-dil:hover{color:var(--kor)}

/* ---------- Kırılma noktaları: yalnızca 560 / 720 / 900 ---------- */
/* D8.1 (Görev 8 denetimi, ENGELLEYİCİ): eskiden burada `.ust nav{display:
   none}` vardı, yerine HİÇBİR ŞEY konmamıştı — 390px'te görünür/odaklanabilir
   gezinme bağlantısı SIFIR'dı, Müzik ve Duyurular telefondan ulaşılamaz
   sayfalardı (spec §11.3: dağıtım WhatsApp/Instagram, trafiğin çoğu mobil).
   Spec §18.10 bu genişlikte açıkça bir MENÜ DÜĞMESİ istiyor ("dil de
   menüye girer") — çözüm burada bir disclosure: `.gezinme-panel` gerçek
   bir kutuya döner, `.menu-dugme` görünür olur ve betik (src/betik/ustbar.js)
   onu açıp kapatır. Betik hiç çalışmasa bile panel `hidden` TAŞIMAZ (bkz.
   ustbar.js şablonu) — gezinme HER durumda görünür ve klavyeyle erişilebilir
   kalır, betik yalnızca daha temiz bir varsayılan (kapalı) sunar. */
@media(max-width:900px){
  .ust{grid-template-columns:1fr auto}

  .menu-dugme{display:flex}

  /* Panel artık EKRANI DOLDURUR. Eskiden içeriğe göre uzuyordu ve altından
     sayfa görünüyordu: menü açıkken arkada hero'nun yarısı duruyor, panel
     havada asılı bir kutu gibi görünüyordu. Tam yükseklik hem odağı menüye
     verir hem bağlantılara nefes alacak yer açar. */
  .gezinme-panel{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    /* `position:fixed` BURADA ÇALIŞMAZ: `.ust` `backdrop-filter` taşıyor ve
       bu, sabit konumlu çocuklar için kapsayıcı blok oluşturuyor — panel
       ekrana değil 56px'lik bara göre konumlanıp 64px'te kalıyordu
       (ölçüldü). Mutlak konum + açık yükseklik aynı sonucu güvenle verir. */
    position:absolute;top:100%;left:0;right:0;
    height:calc(100vh - var(--tepe));
    background:var(--gece);
    /* Alt dolgu SABİT ŞERİDİ hesaba katar: hesaba katılmazsa panelin son
       satırı (dil anahtarı) şeridin altında kalıyordu (ölçüldü). */
    padding:var(--u6) var(--u6)
      calc(var(--serit-y) + var(--u5) + env(safe-area-inset-bottom));
    overflow-y:auto;
  }
  /* [hidden]in UA varsayılanı display:none, ama üstteki
     .gezinme-panel{display:flex} onu ezer (aynı desen: tanıtım.css) —
     burada özgüllüğü yükselterek geri alıyoruz, betik gerçekten kapatınca
     panel gerçekten kaybolsun. */
  .gezinme-panel[hidden]{display:none}

  /* `nav` esner, araçlar panelin DİBİNE iner: gezinme üstte toplu durur,
     dil ve kardeş site bağlantısı ayrı bir katman olarak altta. */
  .ust nav{width:100%;flex:1}
  .gnav-liste{flex-direction:column;align-items:stretch;gap:0}

  /* Telefonda bağlantılar okunacak kadar büyük ve dokunulacak kadar geniş:
     satır yüksekliği 56px'i geçer (WCAG 2.5.8'in 24px tabanının çok üstü).
     Aralarındaki ince çizgi listeyi bir gezinme olarak okutur. */
  .gnav-liste a{
    display:flex;align-items:center;
    min-height:56px;padding:var(--u3) 0;
    font-size:var(--t5);letter-spacing:.08em;
    color:var(--kemik);
    border-bottom:1px solid var(--cizgi);
  }
  .gnav-liste li:last-child a{border-bottom:0}

  /* Etkin sayfa dar ekranda alt çizgiyle değil, SOLDAKİ köz çubuğuyla
     işaretlenir: satırlar zaten alt çizgi taşıyor, ikisi karışırdı. */
  .gnav-liste a[aria-current="page"]{color:var(--kemik)}
  .gnav-liste a[aria-current="page"]::after{
    /* Çubuk yazının SOLUNA yapışır. Panel dolgusunun tamamı kadar (-32px)
       kaydırılınca ekranın en kenarına düşüp satırdan kopuk görünüyordu. */
    content:'';position:absolute;left:calc(var(--u4) * -1);right:auto;
    top:var(--u4);bottom:var(--u4);width:3px;height:auto;
    background:var(--ufuk);
  }

  .araclar{
    width:100%;justify-self:stretch;
    flex-direction:row;align-items:center;gap:var(--u5);
    margin-top:var(--u6);padding-top:var(--u5);
    border-top:1px solid var(--cizgi-acik);
  }
  .disari-bag{border-left:0;padding-left:0;font-size:var(--t3)}
  .bar-dil{font-size:var(--t3);color:var(--beton)}
}

/* Brifingde 640px isteniyor; proje genelinde kırılma noktaları yalnızca
   560/720/900 — en yakın izinli değer kullanıldı. */
@media(max-width:720px){
  .disari-bag{display:none}
}

/* Brifingde 520px isteniyor; aynı gerekçeyle 560px kullanıldı. */
@media(max-width:560px){
  .marka span{display:none}
}