/* ═══════════════════════════════════════════════════════════════════════════
   SESLİ KAYITLAR — bölümün stili
   ═══════════════════════════════════════════════════════════════════════════

   AYRI DOSYADIR; index.html onu tokens.css ve css/main.css'ten SONRA yükler.
   Bölüm 2026-08-27'de sahne + çalma listesi düzenine geçtiğinde stil burada
   yazıldı ve taşınmadı — main.css § 13 yalnızca buraya işaret eder.

   Tüm renk, ölçü ve tipografi değerleri tokens.css'ten gelir — burada sabit
   değer yok. Sınıf öneki `stud` (stüdyo); mevcut `.ep` / `.player` sınıf
   adlarıyla çakışmaz, iki oynatıcı aynı sayfada bile yan yana durabilir. */

/* ── Künye şeridi ─────────────────────────────────────────────────────────
   Basın bandının künyesiyle aynı okuma: ad solda, kural ortada, sayım
   sağda. İki bölüm aynı sayfada aynı dili konuşsun. */
.stud__kunye {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-sm);
  border-bottom: var(--rule-thick) solid var(--line);
}
.stud__logo {
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
}
.stud__cizgi {
  flex: 1;
  height: var(--rule-hair);
  background: var(--line-2);
}
.stud__sayac {
  display: flex;
  gap: var(--space-md);
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--text-faint);
}
.stud__sayac b { font-weight: 400; color: var(--text-3); }

/* ── Sahne: kapak solda, künye ve denetimler sağda ────────────────────── */

.stud__sahne {
  display: grid;
  grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: center;
  padding-bottom: var(--space-2xl);
  border-bottom: var(--rule-hair) solid var(--line-2);
}

/* Kapak kare durur — plak/kapak oranı. Oynatma düğmesi ve eşitleyici bu
   katmana göre konumlanır. */
.stud__kapak {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border: var(--rule-hair) solid var(--line-2);
  background: var(--surface-sunk);
  transition: border-color var(--dur-1) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out);
}
.stud__kapak > svg:not(.stud__glyph) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.stud__sahne[data-state='playing'] .stud__kapak {
  border-color: var(--accent);
  box-shadow: 0 40px 70px -44px var(--accent-glow);
}

/* ── Kapaktaki tayfın canlanması ──────────────────────────────────────────
   Çubuklar çalarken kendi eksenlerinde uzayıp kısalır (kullanıcı isteği,
   2026-08-27); kapak öncesinde sabit bir resimdi ve ses çalarken bile
   ölü duruyordu. `transform-box: fill-box` şart: onsuz SVG dönüşümünün
   merkezi tuvalin köşesi olur ve çubuklar ölçeklenmek yerine kayar.
   Süre ve gecikme her çubuk için js/ses.js'te tohumdan yazılır. */
.stud__cubuk,
.stud__hat {
  transform-box: fill-box;
  transform-origin: center;
}
.stud__sahne[data-state='playing'] .stud__cubuk {
  animation-name: studTayf;
  animation-timing-function: var(--ease-out);
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.stud__sahne[data-state='playing'] .stud__hat {
  animation-name: studHat;
  animation-timing-function: var(--ease-out);
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
/* Çubuk yalnızca DİKEY ölçeklenir — eni değişirse tayfın aralığı bozulur. */
@keyframes studTayf {
  from { transform: scaleY(0.32); }
  to   { transform: scaleY(1.18); }
}
/* Hat hem hafif esner hem parlaklık değiştirir; sürüklenme hissi verir. */
@keyframes studHat {
  from { transform: scaleY(0.7);  opacity: 0.55; }
  to   { transform: scaleY(1.25); opacity: 1; }
}

.stud__buyukplay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  border: 0;
  background: none;
  color: var(--text);
  cursor: pointer;
}
.stud__buyukplay::before {
  content: '';
  position: absolute;
  width: 5.5rem;
  height: 5.5rem;
  border: var(--rule-hair) solid var(--line-lit);
  border-radius: 50%;
  background: var(--surface-sunk);
  opacity: 0.82;
  transition: transform var(--dur-2) var(--ease-out),
              border-color var(--dur-1) var(--ease-out),
              opacity var(--dur-1) var(--ease-out);
}
.stud__buyukplay:hover:not(:disabled)::before {
  transform: scale(1.08);
  border-color: var(--accent);
  opacity: 1;
}
.stud__buyukplay:disabled { opacity: 0.35; cursor: not-allowed; }
.stud__glyph {
  position: relative;
  z-index: 1;
  width: 1.6rem;
  height: 1.6rem;
  fill: currentColor;
}

/* Eşitleyici kapağın alt kenarına oturur; duraklatılmışken sabit kısa
   çubuklar, çalarken her biri kendi gecikmesiyle zıplar. */
.stud__bars {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 3.25rem;
  padding: 0 var(--space-sm) var(--space-sm);
  pointer-events: none;
}
/* Her çubuğun dip/tepe noktası, opaklığı, süresi ve yumuşatma eğrisi
   js/ses.js'te kaydın başlığından tohumlanarak yazılır — şerit tek tip bir
   dalga gibi akmasın (kullanıcı isteği, 2026-08-27). Buradaki değerler
   yalnızca yedektir: betik çalışmazsa çubuklar makul bir boyda durur. */
.stud__bars span {
  flex: 1;
  height: var(--dip, 12%);
  background: var(--accent);
  opacity: calc(var(--op, 1) * 0.55);
  transform-origin: bottom;
}
.stud__sahne[data-state='playing'] .stud__bars span {
  animation-name: studSerit;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  opacity: var(--op, 0.85);
}
@keyframes studSerit {
  from { height: var(--dip, 10%); }
  to   { height: var(--tepe, 100%); }
}

/* Satır dalgası şeritten ayrı kalsın: orada dört çubuk var, düzensizlik
   okunmaz — sade ve hızlı bir zıplama yeter. */
@keyframes studZipla {
  from { height: 10%; }
  to   { height: 100%; }
}

/* ── Sahnenin sağ yarısı ──────────────────────────────────────────────── */

.stud__bilgi { display: grid; gap: var(--space-sm); min-width: 0; }
.stud__rozet {
  margin: 0;
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
}
.stud__baslik {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 400;
  line-height: var(--leading-tight);
  color: var(--text);
  text-wrap: balance;
}
.stud__ozet {
  max-width: var(--measure-narrow);
  margin: 0 0 var(--space-sm);
  font-size: var(--text-lg);
  line-height: var(--leading-read);
  color: var(--text-2);
}

/* ── Taşıma denetimleri ──────────────────────────────────────────────── */

.stud__denetim {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}
.stud__dg {
  display: grid;
  place-items: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 var(--space-sm);
  border: var(--rule-hair) solid var(--line);
  background: none;
  color: var(--text-3);
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: color var(--dur-1) var(--ease-out),
              border-color var(--dur-1) var(--ease-out),
              background var(--dur-1) var(--ease-out);
}
.stud__dg:hover:not(:disabled) {
  color: var(--accent-lit);
  border-color: var(--accent);
}
.stud__dg:disabled { opacity: 0.35; cursor: not-allowed; }
/* Ana düğme yuvarlak ve dolgulu — göz önce ona gitsin. */
.stud__dg--ana {
  width: 3.5rem;
  min-width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  border-radius: 50%;
  border-color: var(--accent);
  color: var(--text);
}
.stud__dg--ana:hover:not(:disabled) { background: var(--accent-deep); }
.stud__dg--gez { font-size: var(--text-lg); }
/* Hız düğmesi diğerlerinden ayrı dursun: sağa itilir. */
.stud__dg--hiz { margin-left: auto; }

/* ── Konum çubuğu ────────────────────────────────────────────────────── */

.stud__iz {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
}
.stud__sure {
  font-family: var(--font-meta);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.stud__seek {
  width: 100%;
  height: var(--space-md);
  margin: 0;
  background: none;
  accent-color: var(--accent);
  cursor: pointer;
}
.stud__seek:disabled { cursor: not-allowed; opacity: 0.4; }
.stud__seek::-webkit-slider-runnable-track {
  height: var(--rule-thick);
  background: var(--line-2);
}
.stud__seek::-moz-range-track { height: var(--rule-thick); background: var(--line-2); }
.stud__seek::-moz-range-progress { height: var(--rule-thick); background: var(--accent); }

/* ── Çalma listesi ───────────────────────────────────────────────────── */

.stud__liste {
  display: grid;
  margin: var(--space-xl) 0 0;
  padding: 0;
  list-style: none;
}
/* Liste 2026-08-27'de kullanıcı isteğiyle büyütüldü: satırlar önce künye
   ölçüsündeydi ve sahnenin altında dipnot gibi duruyordu; artık kendi
   başına okunan bir içindekiler.

   Fare gelince satır AYRICA büyür. Büyüme `transform` iledir, yazı ölçüsü
   ile değil: ölçüyü değiştirmek satırın yüksekliğini değiştirir, altındaki
   on bir satır birden zıplardı. `transform` düzeni etkilemez — satır
   yerinde durur, yalnızca komşusunun üstüne bir tık taşar. Soldan büyüsün
   diye kaynak sol kenardır; ortadan büyüseydi numara sütunu içeri kaçardı. */
.stud__satir {
  position: relative;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-lg);
  width: 100%;
  padding: var(--space-lg) var(--space-md);
  border: 0;
  border-bottom: var(--rule-hair) solid var(--line-2);
  background: none;
  text-align: left;
  cursor: pointer;
  transform-origin: left center;
  transition: background var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out),
              transform var(--dur-2) var(--ease-out);
}
.stud__satir:hover:not(:disabled),
.stud__satir:focus-visible {
  background: var(--surface-2);
  transform: scale(1.03);
  /* Büyüyen satır komşusunun kenar çizgisinin ALTINDA kalmasın. */
  z-index: 1;
}
.stud__satir:hover:not(:disabled) .stud__satir__ad { color: var(--text); }
.stud__satir:hover:not(:disabled) .stud__satir__no { color: var(--accent-lit); }
.stud__satir:disabled { opacity: 0.45; cursor: not-allowed; }
.stud__satir.is-on { background: var(--surface-2); }
.stud__satir.is-on .stud__satir__ad { color: var(--text); }
.stud__satir.is-on .stud__satir__no { color: var(--accent-lit); }

/* Satırın kendi kapağı — sahnedekinin küçültülmüşü, aynı tohumdan.
   Liste böylece numaralı bir dizin olmaktan çıkıp bakılan bir şey olur
   (kullanıcı isteği, 2026-08-28). */
.stud__satir__kapak {
  position: relative;
  display: block;
  width: 3.5rem;
  height: 3.5rem;
  overflow: hidden;
  border: var(--rule-hair) solid var(--line-2);
  background: var(--surface-sunk);
  transition: border-color var(--dur-1) var(--ease-out);
}
.stud__satir__kapak svg:not(.stud__satir__im) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.stud__satir:hover:not(:disabled) .stud__satir__kapak,
.stud__satir.is-on .stud__satir__kapak { border-color: var(--accent); }

/* Oynatma imi kapağın üstünde durur; yalnızca fare gelince belirir —
   listedeki on iki kapak sürekli imle örtülü olsaydı desen kaybolurdu. */
.stud__satir__im {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.9rem;
  height: 0.9rem;
  margin: -0.45rem 0 0 -0.45rem;
  fill: var(--text);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity var(--dur-1) var(--ease-out),
              transform var(--dur-1) var(--ease-out);
}
.stud__satir:hover:not(:disabled) .stud__satir__im {
  opacity: 1;
  transform: scale(1);
}
/* Satırın kapağındaki çubuklar o satır çalarken canlanır — sahnedekiyle
   aynı kural, ayrı seçici. */
.stud__satir[data-state='playing'] .stud__cubuk {
  animation-name: studTayf;
  animation-timing-function: var(--ease-out);
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.stud__satir__no {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  letter-spacing: 0.04em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-1) var(--ease-out);
}
/* Başlık artık gövde ölçüsünde değil, sahnedeki başlığın küçük kardeşi —
   listede gezerken kayıt adları taranabilsin. */
.stud__satir__ad {
  min-width: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--text-2);
  text-wrap: pretty;
  transition: color var(--dur-1) var(--ease-out);
}
.stud__satir__sure {
  font-family: var(--font-meta);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

/* Satırın minik dalgası yalnızca O SATIR çalarken görünür — hangi kaydın
   çaldığı listede de okunsun, sahneye bakmak gerekmesin. */
.stud__satir__dalga {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  width: 1.4rem;
  height: 1.15rem;
  opacity: 0;
  transition: opacity var(--dur-1) var(--ease-out);
}
.stud__satir__dalga span {
  flex: 1;
  height: 25%;
  background: var(--accent);
}
.stud__satir[data-state='playing'] .stud__satir__dalga { opacity: 1; }
.stud__satir[data-state='playing'] .stud__satir__dalga span {
  animation: studZipla 0.85s var(--ease-out) infinite alternate;
}

/* ── Dar ekran ───────────────────────────────────────────────────────── */

@media (max-width: 64rem) {
  .stud__sahne { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .stud__kapak { max-width: 26rem; }
}
@media (max-width: 46rem) {
  .stud__kunye { flex-wrap: wrap; gap: var(--space-xs) var(--space-md); }
  .stud__cizgi { display: none; }
  .stud__baslik { font-size: var(--text-2xl); }
  .stud__ozet { font-size: var(--text-md); }
  .stud__dg--hiz { margin-left: 0; }
  /* Dar ekranda beş sütun sığmıyor: kapak solda iki satır boyunca durur,
     sağında numara + başlık, altlarında süre. Çalma imi burada düşer —
     dokunmada "hover" yok, sürekli görünse kapağı boşuna örterdi. */
  .stud__satir {
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: var(--space-xs) var(--space-md);
    padding: var(--space-md) var(--space-xs);
  }
  .stud__satir__kapak {
    grid-row: 1 / span 2;
    width: 3rem;
    height: 3rem;
  }
  .stud__satir__no,
  .stud__satir__ad { grid-row: 1; }
  .stud__satir__dalga { display: none; }
  .stud__satir__sure { grid-row: 2; grid-column: 2 / -1; }
  /* Dar ekranda satır başlığı bir kademe iner: --text-xl'de üç satıra
     kırılıp listeyi okunmaz bir yığına çeviriyor. */
  .stud__satir__ad { font-size: var(--text-lg); }
  /* Dokunmada "hover" yapışıp kalır — büyüme yalnızca gerçek fareye. */
  .stud__satir:hover:not(:disabled) { transform: none; }
}

/* Hareket azaltılmışsa eşitleyiciler durur; kapak ve düzen aynı kalır. */
@media (prefers-reduced-motion: reduce) {
  .stud__bars span,
  .stud__satir__dalga span,
  .stud__cubuk,
  .stud__hat { animation: none !important; }
  /* Satır fare gelince büyümez; renk ve zemin değişimi bilgiyi zaten
     taşıyor, ölçek burada süsten ibaret. */
  .stud__satir:hover:not(:disabled),
  .stud__satir:focus-visible { transform: none; }
  /* Hat animasyonu opaklığı da sürüyor; durdurulunca son kareye takılı
     kalmasın diye kapak sanatı tam görünürlüğe döner. */
  .stud__hat { opacity: 1; }
}