/* tayfcet · radyo sayfası stili (sözleşme: section.radyo + section.radyo-program, radyo.js ile birlikte).
   Sayfa sahne, kart yok: solda başlık, canlı bilgi ve kontrol, sağda 60° kafesli eşitleyici (tek gradyan yalnız dolgusunda).
   Değerler sitenin ve marka kartının değişkenlerinden gelir; düğme, çizgi ve liste ölçüleri Kimlik oynatıcısıyla (.pl-*) aynı aile.
   Sınıf öneki radyo-; genel seçici yok. radyo.js durum sınıfları: .radyo-on (çalıyor), .radyo-sessiz; öznitelikler: aria-pressed, aria-busy. */

/* ---------- sahne ---------- */
.radyo { position: relative; isolation: isolate; display: grid; align-items: center; min-height: calc(100svh - var(--nav-h)); padding: clamp(32px, 6vw, 72px) 0; overflow: clip; }
.radyo::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--lattice); background-position: var(--margin) 0; -webkit-mask-image: linear-gradient(30deg, transparent 32%, #000 88%); mask-image: linear-gradient(30deg, transparent 32%, #000 88%); }
.radyo-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: clamp(32px, 5vw, 80px); }
.radyo-metin { min-width: 0; }
.radyo-h { margin: 18px 0 0; font: 700 clamp(42px, 5.4vw, 88px)/.96 var(--font-display); letter-spacing: -.035em; color: var(--ink); }
.radyo-lede { max-width: 40ch; margin: 20px 0 0; }

/* ---------- etiketler ---------- */
.radyo-k, .radyo-chip { font: 600 12px/1.2 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--color-tayf-blue-700); }

/* ---------- canlı bilgi ---------- */
.radyo-canli { display: grid; gap: 16px; margin-top: clamp(24px, 3.4vw, 40px); }
.radyo-chip { display: inline-flex; align-items: center; gap: 10px; justify-self: start; padding: 8px 14px 7px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.radyo-nokta { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--color-mint); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-mint) 22%, transparent); }
.radyo-on .radyo-nokta { animation: radyoNabiz 2.6s ease-in-out infinite; }
@keyframes radyoNabiz {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-mint) 22%, transparent); }
  50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--color-mint) 6%, transparent); }
}
.radyo-simdi, .radyo-sonraki { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0; min-width: 0; }
.radyo-simdi .radyo-k { flex-basis: 100%; }
.radyo-parca { font: 700 clamp(30px, 3.4vw, 46px)/1.05 var(--font-display); letter-spacing: -.02em; color: var(--ink); }
.radyo-bpm { font: 500 13px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.radyo-sonraki { gap: 4px 12px; font: 600 16px/1.3 var(--font-text); color: var(--ink); }
.radyo-kalan { font: 400 14px/1.3 var(--font-text); color: var(--ink-2); }
.radyo-kalan:empty { display: none; }

/* ---------- kontrol ---------- */
.radyo-kontrol { display: flex; align-items: center; gap: 16px; margin-top: clamp(24px, 3.4vw, 36px); }
.radyo-pp, .radyo-sus { display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; cursor: pointer; transition: color .2s var(--emph), background-color .2s var(--emph), transform .2s var(--emph), box-shadow .2s var(--emph); }
.radyo-pp { flex: none; width: 64px; height: 64px; background: var(--btn); color: var(--on-btn, #fff); box-shadow: 0 6px 16px -6px rgba(0, 68, 90, .35); }
.radyo-sus { flex: none; width: 40px; height: 40px; background: none; color: var(--ink); }
.radyo-pp:focus-visible, .radyo-sus:focus-visible, .radyo-ses:focus-visible { outline: 2px solid var(--color-focus, #2B8FB3); outline-offset: 3px; }
@media (hover: hover) {
  .radyo-pp:hover { background: var(--btn-h); transform: scale(1.05); }
  .radyo-sus:hover { color: var(--btn); }
}
.radyo-pp:active { transform: scale(.97); }
.radyo-pp .ti, .radyo-sus .ti { grid-area: 1 / 1; display: block; }
.radyo-pp .ti { width: 26px; height: 26px; }
.radyo-sus .ti { width: 20px; height: 20px; }
.radyo-pp .ti:last-child, .radyo-sus .ti:last-child { display: none; }
.radyo-pp[aria-pressed="true"] .ti:first-child, .radyo-sus[aria-pressed="true"] .ti:first-child { display: none; }
.radyo-pp[aria-pressed="true"] .ti:last-child, .radyo-sus[aria-pressed="true"] .ti:last-child { display: block; }
.radyo-pp[aria-busy="true"] { animation: radyoBekle 1.3s ease-in-out infinite; }
@keyframes radyoBekle {
  0%, 100% { box-shadow: 0 6px 16px -6px rgba(0, 68, 90, .35), 0 0 0 0 color-mix(in srgb, var(--btn) 30%, transparent); }
  50% { box-shadow: 0 6px 16px -6px rgba(0, 68, 90, .35), 0 0 0 9px color-mix(in srgb, var(--btn) 0%, transparent); }
}

/* ses kaydırıcısı: dolu kısım --v (radyo.js yazar) ile WebKit'te, ::-moz-range-progress ile Firefox'ta */
.radyo-ses { --v: 80%; flex: 0 1 160px; width: clamp(96px, 14vw, 160px); height: 20px; margin: 0; padding: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; transition: opacity .2s var(--emph); }
.radyo-sessiz .radyo-ses { opacity: .45; }
.radyo-ses::-webkit-slider-runnable-track { height: 4px; border: 0; border-radius: 4px; background: linear-gradient(to right, var(--btn) 0, var(--btn) var(--v), var(--color-ink-600, #668999) var(--v), var(--color-ink-600, #668999) 100%); }
.radyo-ses::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; margin-top: -5px; border: 0; border-radius: 50%; background: var(--btn); box-shadow: 0 0 0 2px var(--surface); }
.radyo-ses::-moz-range-track { height: 4px; border: 0; border-radius: 4px; background: var(--color-ink-600, #668999); }
.radyo-ses::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--btn); }
.radyo-ses::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--btn); box-shadow: 0 0 0 2px var(--surface); }

/* JS yoksa canlı bilgi, kontrol ve eşitleyici yanlış durum gösterebilir; noscript'teki yedek oynatıcı kalır */
.no-js .radyo-canli, .no-js .radyo-kontrol, .no-js .radyo-eq { display: none; }

.radyo-hata { margin: 18px 0 0; padding-left: 12px; border-left: 2px solid var(--btn); font-size: 14.5px; line-height: 1.45; color: var(--ink-2); max-width: 44ch; }
.radyo-hata[hidden] { display: none; }
.radyo-metin audio { display: block; width: 100%; max-width: 420px; margin-top: 20px; }

/* ---------- eşitleyici ---------- */
.radyo-eq { min-width: 0; }
.radyo-eq-svg { display: block; width: 100%; height: auto; overflow: visible; }
.radyo-gh { fill: none; stroke: var(--line); stroke-width: 2; stroke-linejoin: round; }

/* ---------- program ---------- */
.radyo-program { padding: clamp(40px, 6vw, 88px) 0 var(--sec); }
.radyo-program-lede { max-width: 52ch; margin: 14px 0 0; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.radyo-liste { margin: clamp(20px, 3vw, 32px) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.radyo-satir { position: relative; display: grid; grid-template-columns: 88px minmax(0, 1fr) minmax(90px, 150px) 72px; align-items: center; gap: 16px; min-height: 58px; padding: 8px 12px; border-bottom: 1px solid var(--line); color: var(--ink); }
.radyo-saat { font: 500 13px/1 var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: .04em; color: var(--ink-2); white-space: nowrap; }
.radyo-ad { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 15px/1.25 var(--font-text); color: var(--ink); }
.radyo-satir-bpm { min-width: 0; font-size: 13.5px; color: var(--ink-2); white-space: nowrap; }
.radyo-sure { font: 500 12px/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-2); text-align: right; white-space: nowrap; }
.radyo-satir[aria-current="true"] { background: color-mix(in srgb, var(--btn) 9%, var(--surface)); }
.radyo-satir[aria-current="true"] .radyo-saat { font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--btn); }
.radyo-satir[aria-current="true"] .radyo-ad { color: var(--btn); }
.radyo-satir[aria-current="true"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--tayf); pointer-events: none; }

/* ---------- dar ekran ---------- */
@media (max-width: 900px) {
  .radyo { min-height: 0; }
  .radyo-in { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .radyo-eq { width: 100%; }
}
@media (max-width: 640px) {
  .radyo-satir { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 2px 14px; padding: 10px 8px; }
  .radyo-saat { grid-row: 1 / span 2; }
  .radyo-ad { grid-column: 2; }
  .radyo-satir-bpm { grid-column: 2; grid-row: 2; font-size: 12.5px; }
  .radyo-sure { grid-column: 3; grid-row: 1 / span 2; }
  .radyo-kontrol { gap: 12px; }
}

/* ---------- azaltılmış hareket: nabız yok, geçiş yok (nokta sabit görünür) ---------- */
@media (prefers-reduced-motion: reduce) {
  .radyo-on .radyo-nokta, .radyo-pp[aria-busy="true"] { animation: none; }
  .radyo-pp, .radyo-sus, .radyo-ses { transition: none; }
  .radyo-pp:hover, .radyo-pp:active { transform: none; }
}