/* radyo sayfası — bugünkü radyo.html dili: çalar arama kutusunun üstünde (bir istasyon seçilince açılır),
   mini (oynat + ses) / pro (çalan şarkı, ‹‹ ▶ ››, çalma listesi) görünüm; istasyon satırında + (listeye) ve canlı nokta. */
.rd-calar { margin: 0 0 12px; padding: 2px 0 10px; border-bottom: 1px solid var(--bb-border); animation: rd-gir .25s ease; }
.rd-calar[hidden] { display: none; }
@keyframes rd-gir { from { opacity: 0; transform: translateY(3px); } }
.rd-bas { display: flex; align-items: center; gap: 6px; min-height: 30px; }
.rd-bas .on { width: 10px; color: var(--bb-text-faint); font: 11px var(--bb-font-mono); flex: none; }
.rd-ad { flex: 1; min-width: 0; color: var(--bb-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-ad.secili { color: var(--bb-gold); }
.rd-durum { flex: none; color: var(--bb-text-faint); font: 11px var(--bb-font-mono); }
.rd-durum.canli { color: var(--bb-ok); }
.rd-durum.ipucu { color: var(--bb-gold); }
.rd-gorunum { display: flex; flex: none; border: 1px solid var(--bb-border-2); border-radius: 6px; overflow: hidden; }
.rd-gorunum button { padding: 4px 9px; background: none; border: 0; border-radius: 0; color: var(--bb-text-dim); font: 11px var(--bb-font-mono); }
.rd-gorunum button[aria-pressed="true"] { color: var(--bb-gold); background: var(--bb-accent-tint); }
.rd-gorunum button:hover { color: var(--bb-gold); background: none; }

.rd-calar[data-gorunum="mini"] .rd-pro, .rd-calar[data-gorunum="pro"] .rd-mini { display: none; }
.rd-mini, .rd-kontroller { display: flex; align-items: center; gap: 6px; min-height: 36px; padding-top: 4px; }
.rd-mini .bosluk, .rd-kontroller .bosluk { flex: 1; }
.rd-kontrol { flex: none; min-width: 34px; height: 34px; padding: 0 6px; background: none; border: 0; color: var(--bb-text-dim); font: 14px var(--bb-font-mono); display: grid; place-items: center; }
.rd-kontrol:hover:not(:disabled) { color: var(--bb-gold); background: none; }
.rd-kontrol:disabled { opacity: .35; }
.rd-oynat { width: 34px; padding: 0; border: 1px solid color-mix(in srgb, var(--bb-gold) 45%, transparent); border-radius: 50%; color: var(--bb-gold); }
.rd-oynat .ic { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor; margin-left: 2px; }
.rd-oynat.caliyor .ic { width: 8px; height: 10px; border: 0; margin: 0; border-left: 2.5px solid currentColor; border-right: 2.5px solid currentColor; }
.rd-oynat.ipucu { animation: rd-dokun 1.4s ease-in-out infinite; }
@keyframes rd-dokun { 50% { opacity: .45; } }
.rd-ses { display: flex; align-items: center; gap: 6px; }
.rd-ses[hidden] { display: none; }
.rd-ses input { width: 90px; accent-color: var(--bb-gold); }
.rd-ses-deger { min-width: 34px; color: var(--bb-text-faint); font: 11px var(--bb-font-mono); text-align: right; }

.rd-pro { margin-top: 8px; padding: 12px 13px 10px; border: 1px solid var(--bb-border-2); border-radius: 11px;
          background: radial-gradient(130% 90% at 50% -20%, rgba(var(--bb-gold-rgb), .07), transparent 55%), linear-gradient(180deg, var(--bb-surface-3), var(--bb-bg)); }
.rd-simdi { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; min-height: 22px; }
.rd-nabiz { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--bb-text-faint); }
.rd-calar.canli .rd-nabiz { background: var(--bb-ok); box-shadow: 0 0 6px var(--bb-ok); animation: rd-nabiz 1.4s ease-in-out infinite; }
@keyframes rd-nabiz { 50% { opacity: .45; } }
.rd-simdi-etiket { flex: none; color: var(--bb-text-dim); font: 11px var(--bb-font-mono); }
.rd-sarki { flex: 1; min-width: 0; color: var(--bb-text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-sarki.bos { color: var(--bb-text-muted); }
.rd-kontroller { border-top: 1px solid var(--bb-border); padding-top: 8px; }

.rd-liste { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--bb-border); }
.rd-liste-bas { display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px; }
.rd-liste-baslik { flex: 1; color: var(--bb-gold); font: 600 12px var(--bb-font-mono); }
.rd-kayit { color: var(--bb-text-faint); font: 11px var(--bb-font-mono); }
.rd-liste-sayi { padding: 0 7px; border: 1px solid var(--bb-border-2); border-radius: 99px; color: var(--bb-text-muted); font: 11px var(--bb-font-mono); }
.rd-liste-bas button { padding: 2px 4px; background: none; border: 0; color: var(--bb-text-dim); font: 11px var(--bb-font-mono); }
.rd-liste-bas button:hover { color: var(--bb-bad); background: none; }
.rd-liste-ol { list-style: none; margin: 0; padding: 0; }
.rd-liste-satir { display: flex; align-items: center; border-bottom: 1px solid var(--bb-border); }
.rd-liste-satir:last-child { border-bottom: 0; }
.rd-liste-cal { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px; background: none; border: 0; border-radius: 4px; color: var(--bb-text); text-align: left; font: 13px var(--bb-font-sans); }
.rd-liste-cal:hover { background: var(--bb-surface); color: var(--bb-text-strong); }
.rd-liste-satir.aktif .rd-liste-cal { color: var(--bb-gold); }
.rd-sira { width: 16px; flex: none; color: var(--bb-text-faint); font: 11px var(--bb-font-mono); text-align: right; }
.rd-liste-cal .ad { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-liste-cikar { flex: none; min-width: 32px; height: 32px; padding: 0; background: none; border: 0; color: var(--bb-text-faint); font-size: 15px; }
.rd-liste-cikar:hover { color: var(--bb-bad); background: none; }
.rd-liste-bos { margin: 4px 0 2px; color: var(--bb-text-faint); font-size: 12px; }
.rd-liste-bos[hidden] { display: none; }
.rd-bar-ayar { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; padding-top: 6px; border-top: 1px solid var(--bb-border); color: var(--bb-text-dim); font: 11px var(--bb-font-mono); }
.rd-bar-ayar span { flex: 1; }
.rd-bar-ayar button { padding: 4px 10px; background: none; border: 1px solid var(--bb-border-2); border-radius: 6px; color: var(--bb-text-dim); font: 11px var(--bb-font-mono); }
.rd-bar-ayar button[aria-pressed="true"] { color: var(--bb-gold); border-color: var(--bb-gold); }

/* istasyon satırı: ortak .bb-satir düğmesi + sağda "+" */
.rd-satir { display: flex; align-items: center; }
.rd-satir .rd-cal { flex: 1; min-width: 0; }
.rd-nokta { width: 5px; height: 5px; flex: none; margin-left: auto; border-radius: 50%; background: transparent; }
.rd-satir.aktif .rd-cal { background: var(--bb-surface); }
.rd-satir.aktif .ad, .rd-satir.aktif .on { color: var(--bb-gold); }
.rd-satir.aktif .rd-nokta { background: var(--bb-gold); box-shadow: 0 0 4px rgba(var(--bb-gold-rgb), .55); }
.rd-satir.caliyor .rd-nokta { animation: rd-nabiz 1.4s ease-in-out infinite; }
.rd-ekle { flex: none; min-width: 30px; height: 30px; padding: 0 6px; background: none; border: 0; color: var(--bb-text-faint); font: 14px var(--bb-font-mono); opacity: 0; transition: opacity .15s; }
.rd-satir:hover .rd-ekle, .rd-ekle:focus-visible, .rd-ekle.ekli, .rd-ekle.dolu { opacity: 1; }
.rd-ekle:hover, .rd-ekle.ekli { color: var(--bb-gold); background: none; }
.rd-ekle.dolu { color: var(--bb-bad); font-size: 11px; }
@media (hover: none) { .rd-ekle { opacity: 1; } }
@media (max-width: 600px) {
  .rd-durum { display: none; }
  .rd-kontrol { min-width: 42px; height: 42px; }
  .rd-oynat { width: 42px; }
  .rd-ses input { width: 70px; }
  .rd-ekle { min-width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .rd-calar, .rd-oynat.ipucu, .rd-calar.canli .rd-nabiz, .rd-satir.caliyor .rd-nokta { animation: none; }
}