/* 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-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; }
/* dar gruplarda ad önce: açıklama yalnız kalan yere sığar (sağa yaslı, kısalır; tamamı fareyle kutuda). Seçki (tavsiye) olduğu gibi. */
.bb-grup:not(.bb-secki) .rd-cal .ad { flex: 0 1 auto; }
.bb-grup:not(.bb-secki) .rd-cal .bb-aciklama { flex: 1 1 0; max-width: none; text-align: right; }
.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 { 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; } }
/* fareli masaüstü: görünmez "+" ve sönük nokta yer kaplamasın, açıklama kart kenarına uzansın. "+" fareyle/odakla
   satırın sonunda, satırın zeminiyle açıklamanın üstüne biner. Ekli/dolu "+" hep görünür → yerinde kalır. Dokunmatik aynı. */
@media (hover: hover) and (pointer: fine) {
  .rd-satir { position: relative; }
  .rd-satir:not(.aktif) .rd-nokta { display: none; }
  .rd-satir:hover .rd-cal, .rd-satir:focus-within .rd-cal { background: var(--bb-surface); }
  .rd-ekle:not(.ekli):not(.dolu) { position: absolute; top: 50%; right: 0; min-width: 34px; padding-left: 10px; transform: translateY(-50%);
                                   background: linear-gradient(90deg, transparent, var(--bb-surface) 10px); border-radius: 0 4px 4px 0; }
}
@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; }
}