/* ==========================================================================
   NİKBİNLER — Anadolu Psikedelik Rock
   Tasarım sistemi. Palet, grubun kendi sahne fotoğrafından örneklenmiştir:
   petrol mavisi gölgeler, kehribar sahne ışığı, kiremit kostüm, mürekkep siyahı.
   ========================================================================== */

/* Fraunces gelene kadar Georgia kullanılır. Metrikler eşitlenmezse
   9rem'lik başlıklar font yüklendiği anda yeniden akar (CLS). */
@font-face{
  font-family:"Fraunces Fallback";
  src:local("Georgia"),local("Times New Roman");
  size-adjust:103%;
  ascent-override:94%;
  descent-override:24%;
  line-gap-override:0%;
}
@font-face{
  font-family:"Schibsted Fallback";
  src:local("Helvetica Neue"),local("Arial");
  size-adjust:99%;
  ascent-override:97%;
  descent-override:24%;
  line-gap-override:0%;
}

/* ---------- 1. Token'lar ------------------------------------------------- */
:root{
  /* Yüzeyler */
  --void:      #06080A;
  --ink:       #0B0F13;
  --ink-2:     #11171D;
  --ink-3:     #18212A;
  --line:      #232E38;
  --line-soft: #1A222B;

  /* Anadolu paleti */
  --petrol:    #16323A;
  --petrol-2:  #1E4854;
  --teal:      #4A939F;
  --teal-dim:  #2C5D68;   /* yalnız dolgu/çizgi — metinde kullanma (2.74:1) */
  --teal-text: #5FA9B5;   /* metin için teal, 7.48:1 */
  --line-strong:#5E6C7A;  /* grafik öğe kenarı, 3.35:1 (SC 1.4.11) */
  --ember:     #E2761E;
  --ember-hot: #F6A83F;
  --ember-dim: #8A4712;
  --rust:      #B4491F;

  /* Tipografi renkleri */
  --bone:      #F0EADF;
  --bone-2:    #CFC7B9;
  --bone-dim:  #9A9388;
  --muted:     #8F98A3;   /* AA: 6.17:1 (en koyu zemin --ink-2 üstünde) */

  /* Tipografi */
  /* Fraunces: optik eksenli, ılık, hafif "wonk" — 70'ler afiş serifine yakın.
     Schibsted Grotesk: editoryal, karakterli, mükemmel Türkçe desteği.
     DM Mono: laboratuvar etiketleri için ölçülü daktilo sesi. */
  --serif: "Fraunces", "Fraunces Fallback", Georgia, serif;
  --sans:  "Schibsted Grotesk", "Schibsted Fallback", system-ui, sans-serif;
  --mono:  "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --s--2: clamp(.69rem, .67rem + .08vw, .74rem);
  --s--1: clamp(.81rem, .78rem + .12vw, .88rem);
  --s-0:  clamp(1rem, .97rem + .16vw, 1.1rem);
  --s-1:  clamp(1.19rem, 1.13rem + .3vw, 1.4rem);
  --s-2:  clamp(1.44rem, 1.33rem + .55vw, 1.85rem);
  --s-3:  clamp(1.78rem, 1.56rem + 1.05vw, 2.6rem);
  --s-4:  clamp(2.2rem, 1.79rem + 1.95vw, 3.7rem);
  --s-5:  clamp(2.75rem, 2rem + 3.6vw, 5.6rem);
  --s-6:  clamp(3.4rem, 1.9rem + 7.2vw, 9rem);

  /* Ritim */
  --gap:     clamp(1rem, .8rem + .9vw, 1.6rem);
  --pad-x:   clamp(1.25rem, .7rem + 2.6vw, 3.5rem);
  --section: clamp(4rem, 2.8rem + 5.2vw, 7.5rem);
  --wrap:    1380px;
  --wrap-narrow: 780px;

  /* Hareket */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --dur:       .55s;

  --radius: 2px;

  /* Sabit başlığın gerçek yüksekliği. Hem kaydırma payı hem mobil menü
     konumu buradan beslenir; ölçülen değerle uyuşmazsa odaklanan öğe
     başlığın altında kalır (SC 2.4.11). */
  --nav-h: 118px;
}

/* ---------- 2. Sıfırlama ------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 1rem);
}

body{
  background:var(--void);
  color:var(--bone-2);
  font-family:var(--sans);
  font-size:var(--s-0);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}

img,svg,video{ display:block; max-width:100%; height:auto }
a{ color:inherit; text-decoration:none }
button,input{ font:inherit; color:inherit }
ul,ol{ list-style:none }

::selection{ background:var(--ember); color:var(--void) }

:focus-visible{
  outline:2px solid var(--ember-hot);
  outline-offset:3px;
  border-radius:1px;
}

/* ---------- 3. Doku: film grenİ + vinyet ---------------------------------- */
/* Sabit bir gren katmanı tüm sayfayı kaplar; fotoğrafla tipografiyi
   aynı "film" yüzeyinde birleştirir. */
body::after{
  content:"";
  position:fixed; inset:0;
  z-index:9000;
  pointer-events:none;
  opacity:.32;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* ---------- 4. Tipografi ------------------------------------------------- */
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:600;
  line-height:1.02;
  letter-spacing:-.022em;
  color:var(--bone);
  font-variation-settings:"SOFT" 20,"WONK" 1,"opsz" 40;
  text-wrap:balance;
}

.display{ font-size:var(--s-6); line-height:.9; letter-spacing:-.04em }
.h1{ font-size:var(--s-5) }
.h2{ font-size:var(--s-4) }
.h3{ font-size:var(--s-3) }
.h4{ font-size:var(--s-2); line-height:1.12 }

em,.em{
  font-style:italic;
  font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 40;
  color:var(--ember-hot);
}

/* Küçük büyük-harf etiketler — arayüzün "laboratuvar" sesi */
.label{
  font-family:var(--mono);
  font-size:var(--s--2);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--teal);
  font-weight:500;
}
.label--ember{ color:var(--ember) }
.label--dim{ color:var(--muted) }

.lede{
  font-size:var(--s-1);
  line-height:1.55;
  color:var(--bone-2);
  font-weight:400;
  text-wrap:pretty;
}

p{ text-wrap:pretty }
p + p{ margin-top:1.1em }

/* ---------- 5. Yerleşim -------------------------------------------------- */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--pad-x);
}
.wrap--narrow{ max-width:var(--wrap-narrow) }

.section{ padding-block:var(--section); position:relative }
.section--line{ border-top:1px solid var(--line-soft) }

/* Bölüm başlığı: numara + başlık + açıklama */
.section-head{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--gap);
  margin-bottom:clamp(2.5rem,1.5rem + 3vw,5rem);
  max-width:60ch;
}
.section-head .label{ display:flex; align-items:center; gap:.85em }
.section-head .label::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg,var(--line) 0%,transparent 100%);
  max-width:180px;
}

/* ---------- 6. Gezinme --------------------------------------------------- */
.nav{
  position:fixed; inset:0 0 auto 0;
  z-index:1000;
  display:flex; align-items:center; gap:var(--gap);
  padding:.9rem var(--pad-x);
  transition:background .45s var(--ease), border-color .45s var(--ease), padding .45s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:color-mix(in srgb, var(--void) 88%, transparent);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom-color:var(--line-soft);
  padding-block:.6rem;
}

.nav-logo{ flex:none; display:block; width:clamp(120px,11vw,168px) }
.nav-logo img{ width:100%; height:auto }

.nav-links{
  display:flex; align-items:center; gap:clamp(1rem,2vw,2.1rem);
  margin-inline:auto;
}
.nav-links a{
  font-family:var(--mono);
  font-size:var(--s--2);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--bone-2);
  position:relative;
  padding-block:.4em;
  transition:color .25s var(--ease);
}
.nav-links a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--ember);
  transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav-links a:hover{ color:var(--bone) }
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after{ transform:scaleX(1) }
.nav-links a[aria-current="page"]{ color:var(--ember-hot) }

.nav-right{ display:flex; align-items:center; gap:.75rem; flex:none }

.nav-toggle{
  display:none;
  width:42px; height:42px;
  background:none; border:1px solid var(--line-strong);
  cursor:pointer; position:relative;
}
.nav-toggle span{
  position:absolute; left:11px; right:11px; height:1.5px;
  background:var(--bone);
  transition:transform .3s var(--ease), opacity .2s;
}
.nav-toggle span:nth-child(1){ top:15px }
.nav-toggle span:nth-child(2){ top:20px }
.nav-toggle span:nth-child(3){ top:25px }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(5px) rotate(45deg) }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5px) rotate(-45deg) }

/* ---------- 7. Düğmeler -------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.65em;
  font-family:var(--mono);
  font-size:var(--s--2);
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:500;
  padding:.95em 1.5em;
  border:1px solid var(--line-strong);
  color:var(--bone);
  background:transparent;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:color .35s var(--ease), border-color .35s var(--ease);
  white-space:nowrap;
}
.btn::before{
  content:"";
  position:absolute; inset:0;
  background:var(--ember);
  transform:translateY(101%);
  transition:transform .42s var(--ease-out);
  z-index:-1;
}
.btn > *{ position:relative; z-index:1 }
.btn:hover{ color:var(--void); border-color:var(--ember) }
.btn:hover::before{ transform:translateY(0) }

.btn--solid{ background:var(--ember); color:var(--void); border-color:var(--ember) }
.btn--solid::before{ background:var(--bone) }
.btn--solid:hover{ color:var(--void); border-color:var(--bone) }

.btn--ghost{ border-color:var(--line-strong); color:var(--bone-2) }

.btn svg{ width:1em; height:1em; fill:currentColor; flex:none }

/* ---------- 8. Hero ------------------------------------------------------ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  isolation:isolate;
}
.hero-media{
  position:absolute; inset:0; z-index:-2;
  overflow:hidden;
}
.hero-media img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:62% 42%;
  transform:scale(1.08);
  will-change:transform;
}
/* Fotoğrafın üzerine iki katmanlı scrim: alttan mürekkep, soldan petrol */
.hero-media::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(to top, var(--void) 2%, color-mix(in srgb,var(--void) 72%,transparent) 30%, transparent 62%),
    linear-gradient(105deg, color-mix(in srgb,var(--void) 90%,transparent) 0%, color-mix(in srgb,var(--petrol) 30%,transparent) 45%, transparent 75%),
    radial-gradient(120% 90% at 70% 35%, transparent 30%, color-mix(in srgb,var(--void) 78%,transparent) 100%);
}

.hero-inner{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding:0 var(--pad-x) clamp(1.75rem,1.4rem + 1.6vw,2.75rem);
  display:grid;
  gap:clamp(1.35rem,.9rem + 1.7vw,2.4rem);
}

/* Logo artık sayfanın h1'i — başlık varsayılanları sıfırlanır */
.hero-mark-wrap{ margin:0; line-height:0; font-size:0 }
.hero-mark{
  width:min(500px,70%);
  filter:drop-shadow(0 8px 40px rgba(0,0,0,.65));
  margin-bottom:-.4rem;
}

.hero-tagline{
  font-family:var(--serif);
  font-size:var(--s-2);
  font-style:italic;
  font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 40;
  color:var(--bone);
  max-width:22ch;
  line-height:1.2;
}

.hero-actions{ display:flex; flex-wrap:wrap; gap:.75rem; align-items:center }

.hero-foot{
  display:flex; flex-wrap:wrap;
  gap:var(--gap) clamp(1.5rem,4vw,3.5rem);
  align-items:baseline;
  padding-top:clamp(1.1rem,.9rem + 1.1vw,1.7rem);
  padding-right:9rem;              /* kaydırma ipucuna çarpmasın */
  border-top:1px solid color-mix(in srgb,var(--bone) 14%,transparent);
}

.hero-scroll{
  position:absolute;
  right:var(--pad-x);
  bottom:clamp(1.75rem,1.4rem + 1.6vw,2.75rem);
  display:flex; align-items:center; gap:.7em;
  font-family:var(--mono); font-size:var(--s--2);
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--bone-dim);
}
.hero-scroll::after{
  content:""; width:44px; height:1px;
  background:linear-gradient(90deg,var(--bone-dim),transparent);
  animation:scrollcue 2.4s var(--ease) infinite;
}
@keyframes scrollcue{
  0%,100%{ transform:scaleX(.4); transform-origin:left; opacity:.5 }
  50%    { transform:scaleX(1);  transform-origin:left; opacity:1 }
}

/* ---------- 9. Sayı şeridi ---------------------------------------------- */
/* Şerit tam genişlikte, hücre içerikleri sayfa ızgarasına hizalı */
.stats-band{
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg,var(--ink) 0%,var(--void) 100%);
}
.stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.stat{
  padding-block:clamp(1.6rem,1.1rem + 1.8vw,2.6rem);
  padding-inline:0 clamp(1rem,2vw,2rem);
  border-right:1px solid var(--line-soft);
  display:grid; gap:.4rem; align-content:start;
  min-width:0;
}
.stat + .stat{ padding-inline-start:clamp(1rem,2vw,2rem) }
.stat:last-child{ border-right:none; padding-inline-end:0 }
.stat-num{
  font-family:var(--serif);
  /* Hücreye sığması gerekiyor: "53.100.341" en uzun dize */
  font-size:clamp(1.7rem,1.1rem + 1.85vw,2.65rem);
  line-height:.98;
  color:var(--bone);
  font-variation-settings:"SOFT" 20,"WONK" 0,"opsz" 40;
  font-weight:600;
  letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
}
.stat-num sup{
  font-size:.42em; vertical-align:super;
  color:var(--ember); font-family:var(--mono); letter-spacing:0;
}
.stat-key{ font-family:var(--mono); font-size:var(--s--2); letter-spacing:.14em; text-transform:uppercase; color:var(--muted) }
.stat-src{ font-family:var(--mono); font-size:var(--s--2); color:var(--teal-text); letter-spacing:.06em }

/* ---------- 10. Kayan şerit --------------------------------------------- */
.marquee{
  overflow:hidden;
  border-block:1px solid var(--line-soft);
  padding-block:1.15rem;
  background:linear-gradient(90deg,var(--ink) 0%,var(--ink-2) 50%,var(--ink) 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{
  display:flex; width:max-content;
  animation:marquee 42s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state:paused }
.marquee-item{
  display:inline-flex; align-items:center; gap:1.6rem;
  padding-inline:1.6rem;
  font-family:var(--serif);
  font-size:var(--s-2);
  font-style:italic;
  color:var(--bone-2);
  white-space:nowrap;
  font-variation-settings:"SOFT" 60,"WONK" 1;
}
.marquee-item::after{ content:"✦"; color:var(--ember); font-size:.5em; font-style:normal }
@keyframes marquee{ to{ transform:translateX(-50%) } }

.marquee{ position:relative }
.marquee-stop{
  position:absolute; right:.6rem; top:50%; transform:translateY(-50%);
  z-index:2;
  width:30px; height:30px;
  display:grid; place-items:center;
  background:color-mix(in srgb, var(--void) 82%, transparent);
  border:1px solid var(--line-strong);
  color:var(--bone-2); cursor:pointer;
  transition:color .25s, border-color .25s;
}
.marquee-stop:hover{ color:var(--ember-hot); border-color:var(--ember) }
.marquee-stop svg{ width:11px; height:11px; fill:currentColor }
.marquee.is-paused .marquee-track{ animation-play-state:paused!important }

/* ---------- 11. Manifesto ------------------------------------------------ */
.manifesto{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2.5rem,2rem + 4vw,6rem);
  align-items:start;
}
/* Dikey kare fotoğrafı 4:5'e kırparak metin sütunuyla aynı boya getirir —
   aksi hâlde sol sütunun altında büyük bir boşluk kalıyor. */
.manifesto-figure{ position:relative }
.manifesto-figure img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:50% 26%;
  filter:contrast(1.06) saturate(.94);
}
.manifesto-figure figcaption{
  margin-top:.9rem;
  font-family:var(--mono); font-size:var(--s--2);
  color:var(--muted); letter-spacing:.1em; text-transform:uppercase;
}

.quote{
  border-left:2px solid var(--ember);
  padding:.3em 0 .3em 1.5rem;
  margin:clamp(1.75rem,1.5rem + 1vw,2.75rem) 0;
  font-family:var(--serif);
  font-size:var(--s-2);
  font-style:italic;
  line-height:1.35;
  color:var(--bone);
  font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 40;
}
.quote cite{
  display:block;
  margin-top:.9rem;
  font-family:var(--mono);
  font-size:var(--s--2);
  font-style:normal;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--teal);
}

/* ---------- 13. Çalar ---------------------------------------------------- */
.player{
  border:1px solid var(--line);
  background:linear-gradient(160deg,var(--ink-2),var(--ink));
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
}
.player-art{
  width:clamp(120px,17vw,210px);
  aspect-ratio:1;
  object-fit:cover;
  border-right:1px solid var(--line);
}
.player-body{
  padding:clamp(1.1rem,.9rem + 1vw,1.9rem);
  display:grid;
  gap:.9rem;
  align-content:center;
  min-width:0;
}
.player-now{ display:grid; gap:.25rem; min-width:0 }
.player-track{
  font-family:var(--serif); font-size:var(--s-2); color:var(--bone);
  line-height:1.1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.player-album{ font-family:var(--mono); font-size:var(--s--2); color:var(--muted); letter-spacing:.1em; text-transform:uppercase }

.player-controls{ display:flex; align-items:center; gap:.85rem }
.pbtn{
  width:38px; height:38px; flex:none;
  display:grid; place-items:center;
  background:transparent; border:1px solid var(--line-strong);
  color:var(--bone-2); cursor:pointer;
  transition:border-color .3s, color .3s, background .3s;
}
.pbtn:hover{ border-color:var(--ember); color:var(--ember) }
.pbtn svg{ width:14px; height:14px; fill:currentColor }
.pbtn--main{ width:52px; height:52px; background:var(--ember); border-color:var(--ember); color:var(--void) }
.pbtn--main:hover{ background:var(--ember-hot); border-color:var(--ember-hot); color:var(--void) }
.pbtn--main svg{ width:17px; height:17px }

.player-time{ font-family:var(--mono); font-size:var(--s--2); color:var(--muted); flex:none; font-variant-numeric:tabular-nums }

/* Dalga formu — scrubber */
.wave{
  position:relative;
  height:44px;
  flex:1;
  display:flex; align-items:center; gap:2px;
  cursor:pointer;
  min-width:0;
}
.wave-bar{
  flex:1;
  min-width:1px;
  background:var(--line-strong);
  border-radius:1px;
  transition:background .18s linear;
}
.wave-bar.is-played{ background:var(--ember) }
.wave:hover .wave-bar{ opacity:.92 }

.tracklist{ border-top:1px solid var(--line-soft) }
.tracklist li{ border-bottom:1px solid var(--line-soft) }
.track{
  width:100%;
  display:grid;
  grid-template-columns:2.6rem minmax(0,1fr) auto auto;
  gap:1rem; align-items:center;
  padding:1.05rem .4rem;
  background:none; border:none; cursor:pointer;
  text-align:left;
  transition:background .3s var(--ease), padding .3s var(--ease);
}
.track:hover{ background:color-mix(in srgb,var(--ember) 7%,transparent); padding-inline:.9rem .4rem }
.track-n{ font-family:var(--mono); font-size:var(--s--2); color:var(--muted) }
.track-name{ font-family:var(--serif); font-size:var(--s-1); color:var(--bone-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.track-album{ font-family:var(--mono); font-size:var(--s--2); color:var(--muted); letter-spacing:.08em }
.track-dur{ font-family:var(--mono); font-size:var(--s--2); color:var(--muted); font-variant-numeric:tabular-nums }
.track.is-active .track-name{ color:var(--ember-hot) }
.track.is-active .track-n{ color:var(--ember) }

/* Çalarken oynayan eşitleyici çubukları */
.eq{ display:inline-flex; align-items:flex-end; gap:2px; height:12px }
.eq i{ width:2px; background:var(--ember); animation:eq .9s ease-in-out infinite }
.eq i:nth-child(2){ animation-delay:.15s }
.eq i:nth-child(3){ animation-delay:.3s }
@keyframes eq{ 0%,100%{ height:3px } 50%{ height:12px } }

/* ---------- 14. Konserler ------------------------------------------------ */
.gig{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(1rem,3vw,2.5rem);
  align-items:center;
  padding:clamp(1.4rem,1.1rem + 1.2vw,2.2rem) 0;
  border-bottom:1px solid var(--line-soft);
  transition:padding-inline .4s var(--ease), background .4s var(--ease);
}
.gig:hover{ background:color-mix(in srgb,var(--ember) 5%,transparent); padding-inline:clamp(.5rem,1.5vw,1.5rem) }
.gig-date{ text-align:center; min-width:5.5rem }
.gig-day{
  font-family:var(--serif); font-size:var(--s-4); line-height:.9; color:var(--bone);
  font-variation-settings:"SOFT" 20,"WONK" 0; display:block;
}
.gig-mon{ font-family:var(--mono); font-size:var(--s--2); letter-spacing:.16em; text-transform:uppercase; color:var(--ember) }
.gig-venue{ font-family:var(--serif); font-size:var(--s-2); color:var(--bone); line-height:1.15 }
.gig-city{ font-family:var(--mono); font-size:var(--s--2); color:var(--muted); letter-spacing:.1em; text-transform:uppercase; margin-top:.35rem }

/* ---------- 14b. Liste (en çok dinlenenler) ----------------------------- */
.chart{ border-top:1px solid var(--line-soft) }
.chart li{
  display:grid;
  grid-template-columns:3.2rem minmax(0,1fr) auto;
  gap:clamp(1rem, 2.5vw, 2.5rem);
  align-items:baseline;
  padding:clamp(1.15rem, .95rem + .9vw, 1.75rem) 0;
  border-bottom:1px solid var(--line-soft);
  transition:padding-inline .4s var(--ease), background .4s var(--ease);
}
.chart li:hover{ background:color-mix(in srgb, var(--ember) 5%, transparent); padding-inline:clamp(.5rem,1.5vw,1.25rem) }
.chart-rank{ font-family:var(--mono); font-size:var(--s--2); color:var(--ember); letter-spacing:.1em }
.chart-title{ font-family:var(--serif); font-size:var(--s-2); color:var(--bone); line-height:1.1 }
.chart-year{ font-family:var(--mono); font-size:var(--s--2); color:var(--muted); margin-top:.3rem; letter-spacing:.1em }
.chart-plays{
  font-family:var(--mono); font-size:var(--s--1); color:var(--teal);
  font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right;
}
.chart-plays small{ display:block; font-size:var(--s--2); color:var(--muted); letter-spacing:.12em; text-transform:uppercase; margin-top:.25rem }
@media (max-width:640px){
  .chart li{ grid-template-columns:2.2rem minmax(0,1fr); }
  .chart-plays{ grid-column:2; text-align:left; margin-top:.5rem }
}

/* ---------- 15. Kartlar / bağlantı ızgaraları ---------------------------- */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  gap:1px;
  background:var(--line-soft);
  border:1px solid var(--line-soft);
}
.card{
  background:var(--ink);
  padding:clamp(1.5rem,1.2rem + 1.4vw,2.4rem);
  display:grid; gap:.85rem; align-content:start;
  transition:background .4s var(--ease);
  position:relative;
}
a.card:hover{ background:var(--ink-2) }
a.card::after{
  content:"→";
  position:absolute; right:clamp(1.5rem,1.2rem + 1.4vw,2.4rem); bottom:clamp(1.5rem,1.2rem + 1.4vw,2.4rem);
  color:var(--ember); opacity:0; transform:translateX(-8px);
  transition:opacity .35s var(--ease), transform .35s var(--ease-out);
}
a.card:hover::after{ opacity:1; transform:translateX(0) }
.card h3{ font-size:var(--s-2) }
.card p{ font-size:var(--s--1); color:var(--bone-dim) }

/* ---------- 16. Galeri --------------------------------------------------- */
.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));
  gap:clamp(.5rem,1vw,1rem);
}
.gallery figure{ position:relative; overflow:hidden; background:var(--ink-2) }
.gallery img{
  width:100%; aspect-ratio:3/4; object-fit:cover;
  transition:transform .8s var(--ease-out), filter .5s;
  filter:saturate(.92);
}
.gallery figure:hover img{ transform:scale(1.06); filter:saturate(1.05) }

/* ---------- 17. Zaruret Records şeridi ----------------------------------- */
.label-strip{
  border:1px solid var(--line);
  background:
    radial-gradient(90% 140% at 12% 0%, color-mix(in srgb,var(--petrol) 55%,transparent) 0%, transparent 60%),
    linear-gradient(140deg,var(--ink-2),var(--ink));
  padding:clamp(2rem,1.5rem + 2.5vw,3.75rem);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(1.5rem,3vw,3rem);
  align-items:center;
}

/* ---------- 18. Şarkı sözü sayfası -------------------------------------- */
.lyrics{
  font-family:var(--serif);
  font-size:var(--s-1);
  line-height:1.85;
  color:var(--bone-2);
  white-space:pre-line;
  font-variation-settings:"SOFT" 40,"WONK" 0,"opsz" 24;
}
.lyrics .part{
  display:block;
  font-weight:500;
  font-variation-settings:normal;
  letter-spacing:.18em;
  line-height:1.4;
  font-family:var(--mono);
  font-size:var(--s--2);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ember);
  margin:2.2rem 0 .8rem;
  white-space:normal;
}
.lyrics .part:first-child{ margin-top:0 }

/* ---------- 19. Alt bilgi ------------------------------------------------ */
.footer{
  border-top:1px solid var(--line-soft);
  padding-block:clamp(3.5rem,2.5rem + 4vw,6rem) 2rem;
  background:linear-gradient(to bottom,var(--void),var(--ink));
}
.footer-grid{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) repeat(auto-fit,minmax(140px,1fr));
  gap:clamp(2rem,1.5rem + 3vw,4rem);
}
..footer-h{
  font-family:var(--mono); font-size:var(--s--2);
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ember); margin-bottom:1.1rem;
  font-weight:500; line-height:1.4; letter-spacing:.18em;
  font-variation-settings:normal;
}
.footer ul{ display:grid; gap:.7rem }
.footer li a{
  font-size:var(--s--1); color:var(--bone-dim);
  transition:color .25s var(--ease); display:inline-flex; gap:.5em; align-items:center;
}
.footer li a:hover{ color:var(--ember-hot) }
.footer-mark{ width:min(240px,70%); margin-bottom:1.4rem; opacity:.92 }

.colophon{
  margin-top:clamp(3rem,2rem + 3vw,5rem);
  padding-top:1.6rem;
  border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between;
  font-family:var(--mono); font-size:var(--s--2);
  color:var(--muted); letter-spacing:.08em;
}

/* ---------- 20. Sayfa başlığı (alt sayfalar) ---------------------------- */
.pagehead{
  padding-top:clamp(7rem,5rem + 7vw,11rem);
  padding-bottom:clamp(2.5rem,2rem + 3vw,4.5rem);
  border-bottom:1px solid var(--line-soft);
  position:relative;
  overflow:hidden;
}
/* Logodaki ışık huzmesi motifinin soyutlaması */
.pagehead::before{
  content:"";
  position:absolute;
  top:-40%; left:50%;
  width:120vw; height:120vh;
  transform:translateX(-50%);
  background:conic-gradient(from 200deg at 50% 100%,
    transparent 0deg,
    color-mix(in srgb,var(--petrol) 40%,transparent) 8deg,
    transparent 16deg,
    color-mix(in srgb,var(--ember-dim) 25%,transparent) 26deg,
    transparent 34deg,
    color-mix(in srgb,var(--petrol) 30%,transparent) 46deg,
    transparent 56deg);
  opacity:.5;
  pointer-events:none;
  z-index:-1;
  -webkit-mask-image:radial-gradient(60% 70% at 50% 100%,#000,transparent 75%);
          mask-image:radial-gradient(60% 70% at 50% 100%,#000,transparent 75%);
}

.crumbs ol{
  display:flex; flex-wrap:wrap; gap:.6em; list-style:none;
}
.crumbs li{ display:flex; gap:.6em; align-items:center }
.crumbs li + li::before{ content:"/"; color:var(--line-strong) }
.crumbs{
  display:block;
  font-family:var(--mono); font-size:var(--s--2);
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin-bottom:1.6rem;
}
.crumbs a:hover{ color:var(--ember) }
.crumbs [aria-current]{ color:var(--bone-2) }

/* ---------- 21. Künye tablosu ------------------------------------------- */
.credits{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
  gap:1px; background:var(--line-soft);
  border:1px solid var(--line-soft);
}
.credit{ background:var(--ink); padding:1.4rem 1.5rem; display:grid; gap:.4rem }
.credit dt{ font-family:var(--mono); font-size:var(--s--2); letter-spacing:.14em; text-transform:uppercase; color:var(--teal) }
.credit dd{ font-family:var(--serif); font-size:var(--s-1); color:var(--bone) }

/* ---------- 22. Gömme çerçeveleri --------------------------------------- */
.embed{
  border:1px solid var(--line);
  background:var(--ink-2);
  overflow:hidden;
}
.embed iframe{ display:block; width:100%; border:0 }
.embed--video{ aspect-ratio:16/9 }
.embed--video iframe{ height:100% }

/* ---------- 23. Ortaya çıkma animasyonu --------------------------------- */
/* Gizleme yalnızca JS varken uygulanır (head'deki satır içi betik .js ekler).
   Aksi hâlde betik yüklenemezse sayfanın yarısı kalıcı olarak görünmez kalır. */
.js [data-reveal]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .85s var(--ease-out), transform .85s var(--ease-out);
  transition-delay:var(--d,0ms);
}
[data-reveal].is-in{ opacity:1; transform:none }
/* JS çalışmazsa ya da odak animasyondan önce gelirse içerik gizli kalmasın */
[data-reveal]:focus-within{ opacity:1; transform:none; transition:none }

/* ---------- 24. Duyarlı kırılımlar -------------------------------------- */
@media (max-width:1080px){
  .manifesto{ grid-template-columns:1fr }
  .manifesto-figure{ max-width:520px }
  .label-strip{ grid-template-columns:1fr }
}

@media (max-width:860px){
  .nav-links{
    position:fixed;
    inset:var(--nav-h) 0 auto 0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:color-mix(in srgb,var(--void) 97%,transparent);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid var(--line);
    padding:.5rem 0;
    transform:translateY(-130%);
    /* Yalnızca taşımak yetmez: kapalı panelin linkleri klavyeyle
       odaklanabilir kalır ve ekran dışında görünmez odak üretir. */
    visibility:hidden;
    transition:transform .45s var(--ease-out), visibility 0s .45s;
    max-height:calc(100svh - var(--nav-h));
    overflow-y:auto;
    margin:0;
  }
  .nav-links.is-open{ transform:translateY(0); visibility:visible; transition-delay:0s }
  .nav-links a{ padding:1.1rem var(--pad-x); font-size:var(--s--1); border-bottom:1px solid var(--line-soft) }
  .nav-links a::after{ display:none }
  .nav-toggle{ display:block }
  .nav-right .btn{ display:none }
  .nav-links{ order:3 }

  .hero-mark{ width:min(420px,88%) }
  .hero-scroll{ display:none }

  .player{ grid-template-columns:1fr }
  .player-art{ width:100%; aspect-ratio:16/9; border-right:none; border-bottom:1px solid var(--line) }

  .track{ grid-template-columns:2rem minmax(0,1fr) auto }
  .track-album{ display:none }

  .gig{ grid-template-columns:auto minmax(0,1fr); gap:1rem 1.25rem }
  .gig .btn{ grid-column:1/-1; justify-self:start }

  .stats{ grid-template-columns:repeat(2,1fr) }
  .stat{ border-right:none; border-bottom:1px solid var(--line-soft) }
  /* dar ekranda hücreler alt alta gelir — yatay girinti sıfırlanır */
  .stat,.stat + .stat{ padding-inline:0 }
  .stat:nth-child(2n){ border-right:none }
}

@media (max-width:520px){
  .stats{ grid-template-columns:1fr }
  .footer-grid{ grid-template-columns:1fr }
  .colophon{ flex-direction:column; gap:.6rem }
}

/* ---------- 25. Açılış koreografisi ------------------------------------- */
/* Tek, iyi kurgulanmış giriş — dağınık mikro-animasyonlardan daha etkili. */
@keyframes rise{ from{ opacity:0; transform:translateY(30px) } to{ opacity:1; transform:none } }
@keyframes markRise{ from{ opacity:0; transform:translateY(38px) scale(.985) } to{ opacity:1; transform:none } }
@keyframes veil{ from{ opacity:1 } to{ opacity:0 } }
@keyframes slowZoom{ from{ transform:scale(1.14) } to{ transform:scale(1.08) } }

.hero-media img{ animation:slowZoom 2.6s var(--ease-out) both }
/* Fotoğrafın üzerinden çekilen perde */
.hero::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:var(--void);
  animation:veil 1.15s var(--ease-out) both;
  pointer-events:none;
}
.hero-mark-wrap{ animation:markRise 1.05s var(--ease-out) .18s both }
.hero-tagline { animation:rise .9s var(--ease-out) .42s both }
.hero-actions { animation:rise .9s var(--ease-out) .56s both }
.hero-foot    { animation:rise .9s var(--ease-out) .70s both }
.hero-scroll  { animation:rise .9s var(--ease-out) .86s both }
.nav          { animation:rise .8s var(--ease-out) .30s both }

/* ---------- 26. Hayalet rakamlar ---------------------------------------- */
/* Bölüm numarası, başlığın arkasında devasa bir kontur olarak yankılanır. */
/* Başlık kutusu 60ch ile sınırlı; sağında kalan negatif alan boş duruyordu.
   Rakam oraya, konturlu ve sessiz biçimde yerleşir. */
.section-head{ position:relative }
.section-head[data-ghost]::before{
  content:attr(data-ghost);
  position:absolute;
  left:calc(100% + clamp(2rem, 4vw, 5rem));
  top:50%;
  transform:translateY(-52%);
  font-family:var(--serif);
  font-size:clamp(7rem, 11vw, 13rem);
  line-height:.78;
  font-weight:600;
  letter-spacing:-.06em;
  color:transparent;
  -webkit-text-stroke:1px color-mix(in srgb, var(--teal) 30%, transparent);
  opacity:.42;
  pointer-events:none;
  user-select:none;
  white-space:nowrap;
}
@media (max-width:1200px){
  .section-head[data-ghost]::before{ display:none }
}

/* ---------- 27. Kırılan ızgara ------------------------------------------ */
/* Galeri kareleri düz bir hat yerine kaydırılmış bir ritim izler. */
@media (min-width:900px){
  .gallery{ align-items:start }
  .gallery figure:nth-child(2){ transform:translateY(clamp(1.5rem,3vw,3.5rem)) }
  .gallery figure:nth-child(3){ transform:translateY(clamp(-1.5rem,-2vw,-.5rem)) }
  .gallery figure:nth-child(4){ transform:translateY(clamp(2.5rem,5vw,5.5rem)) }
  .gallery figure:nth-child(odd) img{ aspect-ratio:3/4 }
  .gallery figure:nth-child(even) img{ aspect-ratio:4/5 }
}

/* Manifesto fotoğrafı bölüm sınırını hafifçe taşar */
@media (min-width:1081px){
  .manifesto-figure{ margin-top:calc(var(--section) * -.42) }
}

/* ---------- 28. Erişilebilirlik ----------------------------------------- */
.visually-hidden{
  position:absolute!important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
  position:absolute; top:-100px; left:var(--pad-x);
  z-index:2000;
  background:var(--ember); color:var(--void);
  padding:.8em 1.2em;
  font-family:var(--mono); font-size:var(--s--2);
  letter-spacing:.12em; text-transform:uppercase;
  transition:top .25s var(--ease);
}
.skip:focus{ top:.75rem }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-delay:0ms!important;      /* gecikme kalırsa içerik boş görünür */
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    transition-delay:0ms!important;
    scroll-behavior:auto!important;
  }
  .js [data-reveal]{ opacity:1; transform:none }
  .hero-media img{ transform:none!important }   /* animasyon kaynağını geçmek için */
}

/* Yazdırma — basın kiti için temiz çıktı */
@media print{
  body{ background:#fff; color:#000 }
  body::after,.nav,.hero-media,.player,.marquee{ display:none }
  h1,h2,h3,h4{ color:#000 }
}

/* ---------- 29. Diskografi ızgarası (gerçek 16:9 kapaklar) -------------- */
.disc-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));
  gap:clamp(1rem, .8rem + 1vw, 1.75rem);
}
.disc{ display:grid; gap:.9rem; align-content:start; position:relative }
.disc-art{
  position:relative; overflow:hidden;
  aspect-ratio:16/9;
  background:var(--ink-2);
  border:1px solid var(--line-soft);
}
.disc-art img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s var(--ease-out), filter .45s var(--ease);
}
.disc:hover .disc-art img{ transform:scale(1.045); filter:brightness(.78) }
.disc-art::after{
  content:"▶"; position:absolute; inset:0;
  display:grid; place-items:center;
  font-size:1.6rem; color:var(--bone);
  background:color-mix(in srgb, var(--void) 45%, transparent);
  opacity:0; transition:opacity .4s var(--ease);
}
.disc:hover .disc-art::after,
.disc:focus-visible .disc-art::after{ opacity:1 }
.disc-meta{ display:grid; gap:.3rem }
.disc-title{ font-family:var(--serif); font-size:var(--s-1); color:var(--bone); line-height:1.15 }
.disc-date,.disc-plays{
  font-family:var(--mono); font-size:var(--s--2); color:var(--muted);
  letter-spacing:.1em; font-variant-numeric:tabular-nums;
}
.disc-plays{ color:var(--teal-text) }

/* ---------- 30. Galeri sayfası ------------------------------------------ */
.gal-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));
  gap:clamp(.75rem, .6rem + .8vw, 1.4rem);
}
.gal-item{ position:relative; overflow:hidden; background:var(--ink-2) }
.gal-item img{
  width:100%; aspect-ratio:9/16; object-fit:cover;
  transition:transform .8s var(--ease-out), filter .5s;
  filter:saturate(.94);
}
.gal-item:hover img{ transform:scale(1.05); filter:saturate(1.06) }
.gal-item figcaption{
  position:absolute; inset:auto 0 0 0;
  padding:2.5rem 1rem .9rem;
  font-family:var(--mono); font-size:var(--s--2);
  letter-spacing:.08em; color:var(--bone-2);
  background:linear-gradient(to top, color-mix(in srgb,var(--void) 92%,transparent), transparent);
  opacity:0; transform:translateY(8px);
  transition:opacity .4s var(--ease), transform .4s var(--ease-out);
}
.gal-item:hover figcaption,
.gal-item:focus-within figcaption{ opacity:1; transform:none }
@media (hover:none){ .gal-item figcaption{ opacity:1; transform:none } }

.vid-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(360px,100%),1fr));
  gap:clamp(1.25rem, 1rem + 1.2vw, 2rem);
}
.vid-grid figcaption{
  margin-top:.8rem;
  font-family:var(--mono); font-size:var(--s--2);
  color:var(--muted); letter-spacing:.08em;
}

/* ---------- 31. Basın listesi ------------------------------------------- */
.press-list{ border-top:1px solid var(--line-soft) }
.press{
  display:grid;
  grid-template-columns:minmax(0,14rem) minmax(0,1fr) auto;
  gap:clamp(1rem, 2.5vw, 2.5rem);
  align-items:baseline;
  padding:clamp(1.3rem, 1rem + 1.1vw, 2rem) 0;
  border-bottom:1px solid var(--line-soft);
  transition:background .4s var(--ease), padding-inline .4s var(--ease);
}
.press:hover{ background:color-mix(in srgb, var(--ember) 5%, transparent); padding-inline:clamp(.5rem,1.5vw,1.25rem) }
.press-outlet{
  font-family:var(--mono); font-size:var(--s--2);
  letter-spacing:.14em; text-transform:uppercase; color:var(--ember);
}
.press-title{ font-family:var(--serif); font-size:var(--s-1); color:var(--bone); line-height:1.25; display:block }
.press-note{
  display:block; margin-top:.45rem;
  font-size:var(--s--1); color:var(--bone-dim);
}
.press-kind{
  font-family:var(--mono); font-size:var(--s--2);
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
  white-space:nowrap;
}
@media (max-width:820px){
  .press{ grid-template-columns:1fr; gap:.5rem }
  .press-kind{ justify-self:start }
}
/* Yıl başlıkları: ilki üstteki bölüm dolgusunu tekrarlamasın */
.disc-year{ margin-top:clamp(2.5rem, 2rem + 2vw, 4rem); margin-bottom:1.6rem }
.disc-year:first-of-type{ margin-top:0 }
/* Başlık + not tek hücrede toplanır; yoksa tür etiketi alt satıra düşer */
.press-body{ display:block; min-width:0 }

/* ---------- 32. Sahne durumu ve bilgi kutusu --------------------------- */
.gig-past{
  font-family:var(--mono); font-size:var(--s--2);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap;
}
.notice{
  border:1px solid var(--line-strong);
  border-left:2px solid var(--ember);
  background:color-mix(in srgb, var(--ink-2) 70%, transparent);
  padding:clamp(1.1rem, .9rem + .8vw, 1.6rem) clamp(1.2rem, 1rem + 1vw, 1.9rem);
}
.notice p{ color:var(--bone-2); font-size:var(--s-0) }
.notice a{ color:var(--ember-hot) }

/* ---------- 33. Şarkı sayfası ------------------------------------------ */
.song{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem, 1.5rem + 3vw, 4.5rem);
  align-items:start;
}
.song-media{ position:sticky; top:calc(var(--nav-h) + 1.5rem) }
.stanza{
  margin:0 0 1.9em;
  font-family:var(--serif);
  font-size:var(--s-1);
  line-height:1.75;
  color:var(--bone-2);
  font-variation-settings:"SOFT" 40,"WONK" 0,"opsz" 24;
}
.stanza:last-child{ margin-bottom:0 }
@media (max-width:900px){
  .song{ grid-template-columns:1fr }
  .song-media{ position:static }
}

/* ---------- 34. Shorts ızgarası (dikey 9:16) --------------------------- */
.short-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));
  gap:clamp(.9rem, .7rem + .8vw, 1.5rem);
}
.short{ display:grid; gap:.8rem; align-content:start }
.short-art{
  position:relative; overflow:hidden; aspect-ratio:9/16;
  background:var(--ink-2); border:1px solid var(--line-soft);
}
.short-art img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease-out), filter .45s }
.short:hover .short-art img{ transform:scale(1.05); filter:brightness(.76) }
.short-art::after{
  content:"▶"; position:absolute; inset:0; display:grid; place-items:center;
  font-size:1.5rem; color:var(--bone);
  background:color-mix(in srgb, var(--void) 42%, transparent);
  opacity:0; transition:opacity .4s var(--ease);
}
.short:hover .short-art::after, .short:focus-visible .short-art::after{ opacity:1 }
.short-title{ font-family:var(--serif); font-size:var(--s-0); color:var(--bone); line-height:1.2 }

/* ---------- 35. Sık sorulanlar (details/summary) ----------------------- */
.faq{ border-bottom:1px solid var(--line-soft) }
.faq:first-of-type{ border-top:1px solid var(--line-soft) }
.faq summary{
  display:flex; align-items:baseline; gap:1rem;
  padding:clamp(1.15rem, .95rem + .8vw, 1.7rem) 0;
  cursor:pointer; list-style:none;
  font-family:var(--serif); font-size:var(--s-2);
  color:var(--bone); line-height:1.25;
  transition:color .25s var(--ease);
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{
  content:"+"; margin-left:auto; flex:none;
  font-family:var(--mono); font-size:var(--s-2); color:var(--ember);
  transition:transform .3s var(--ease);
}
.faq[open] summary::after{ transform:rotate(45deg) }
.faq summary:hover{ color:var(--ember-hot) }
.faq-body{ padding-bottom:clamp(1.2rem, 1rem + .8vw, 1.8rem); max-width:68ch }
.faq-body p{ color:var(--bone-2); font-size:var(--s-0); line-height:1.7 }
.faq-body strong{ color:var(--bone) }

/* Gezinme 7 öğeye çıktı — dar masaüstünde aralığı kıs */
@media (min-width:861px) and (max-width:1200px){
  .nav-links{ gap:.9rem }
  .nav-links a{ letter-spacing:.08em }
}

/* ---------- 36. Zaman çizelgesi ----------------------------------------- */
.timeline{ counter-reset:tl; border-top:1px solid var(--line-soft) }
.timeline li{
  display:grid;
  grid-template-columns:4.5rem 7rem minmax(0,1fr);
  gap:clamp(1rem, 2.5vw, 2.5rem);
  align-items:baseline;
  padding:clamp(1.3rem, 1rem + 1.1vw, 2rem) 0;
  border-bottom:1px solid var(--line-soft);
  position:relative;
}
.tl-year{
  font-family:var(--serif); font-size:var(--s-2); color:var(--bone);
  font-variation-settings:"SOFT" 20,"WONK" 0; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.tl-when{
  font-family:var(--mono); font-size:var(--s--2);
  letter-spacing:.14em; text-transform:uppercase; color:var(--ember);
}
.tl-text{ color:var(--bone-2); font-size:var(--s-0); line-height:1.6 }
.tl-note{
  margin-top:.45rem; font-family:var(--mono); font-size:var(--s--2);
  color:var(--muted); letter-spacing:.06em;
}
@media (max-width:760px){
  .timeline li{ grid-template-columns:4rem minmax(0,1fr); gap:.5rem 1.2rem }
  .tl-when{ grid-column:2 }
  .tl-body{ grid-column:2 }
}

/* Zaruret audit: contain marquee overflow */
html { overflow-x: clip; }

/* Zaruret audit: prevent player grid content from widening mobile layout */
.player, .player-body, .player-now, .player-controls { min-width: 0; max-width: 100%; }
.player-body, .player-now, .player-controls { overflow-x: hidden; }

/* Zaruret mobile stability patch: contain animated/player content */
@media (max-width: 860px) {
  .marquee { max-width: 100%; overflow: hidden; }
  .marquee-track { max-width: none; }
  .player { min-width: 0; max-width: 100%; overflow: hidden; }
  .player-body { min-width: 0; max-width: 100%; overflow: hidden; }
  .player-now, .player-controls { min-width: 0; max-width: 100%; overflow: hidden; }
  .player-controls { flex-wrap: wrap; }
  .wave { min-width: 0; max-width: 100%; }
}