/**
 * RadyoSever — player.css Premium v5
 * Glassmorphism + Wave + Tüm butonlar çalışır
 */

/* ── 1. PLAYER KAPSAYICI ─────────────────────────── */
.rsp-player {
  position: fixed;
  bottom: 0;
  left: var(--rs-sidebar-collapsed, 68px);
  right: 0;
  z-index: 300;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1),
              left 0.35s cubic-bezier(0.4,0,0.2,1);
  background: rgba(10, 8, 20, 0.88);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-top: 1px solid rgba(124,58,237,0.3);
  box-shadow: 0 -8px 32px rgba(0,0,0,0.6), 0 -2px 12px rgba(124,58,237,0.1);
}
.rsp-player.visible { transform: translateY(0); }
body.rs-sidebar-expanded .rsp-player { left: var(--rs-sidebar-w, 260px); }

[data-theme="light"] .rsp-player {
  background: rgba(250,249,255,0.94);
  border-top-color: rgba(124,58,237,0.15);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.1);
}

/* ── 2. ARKA PLAN GLOW ───────────────────────────── */
.rsp-bg { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.rsp-bg-glow {
  position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:600px; height:100px;
  background: radial-gradient(ellipse at center bottom, rgba(124,58,237,0.14) 0%, transparent 70%);
  opacity:0; transition: opacity 0.5s;
}
.rsp-player.visible .rsp-bg-glow { opacity:1; }

/* ── 3. INNER — 3 KOLON GRID ────────────────────── */
#rsPlayer .rs-player-inner,
#rsPlayer .rsp-inner {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  height: 72px !important;
  gap: 12px !important;
  padding: 0 20px !important;
  /* Eski flex'i kapat */
  flex-direction: unset !important;
  flex-wrap: unset !important;
}

/* Eski elementleri gizle */
#rsPlayer .rs-player-info,
#rsPlayer .rs-player-controls,
#rsPlayer .rs-player-volume,
#rsPlayer .rs-player-extra { display: none !important; }

/* ── 4. SOL — Radyo Bilgisi ─────────────────────── */
.rsp-info {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.rsp-logo-wrap {
  position: relative !important;
  flex-shrink: 0 !important;
  width: 46px !important;
  height: 46px !important;
}

.rsp-logo {
  width: 46px !important; height: 46px !important;
  border-radius: 10px !important;
  object-fit: cover !important;
  border: 1.5px solid rgba(124,58,237,0.4) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
  transition: border-color 0.3s, box-shadow 0.3s !important;
}
.rsp-player.playing .rsp-logo {
  border-color: rgba(6,182,212,0.6) !important;
  box-shadow: 0 0 12px rgba(6,182,212,0.3) !important;
}

/* Equalizer */
.rsp-eq {
  position:absolute; inset:0; background:rgba(0,0,0,0.75);
  border-radius:10px; display:none; align-items:flex-end;
  justify-content:center; gap:2px; padding:8px 6px 5px;
}
.rsp-eq.active { display:flex !important; }
.rsp-eq span {
  display:block; width:3px; border-radius:2px;
  background: linear-gradient(to top, #7c3aed, #06b6d4);
  animation: rsp-eq-bar 0.7s ease-in-out infinite alternate;
  transform-origin: bottom center;
}
.rsp-eq span:nth-child(1){height:55%;animation-delay:0s}
.rsp-eq span:nth-child(2){height:90%;animation-delay:.1s}
.rsp-eq span:nth-child(3){height:40%;animation-delay:.05s}
.rsp-eq span:nth-child(4){height:75%;animation-delay:.15s}
.rsp-eq span:nth-child(5){height:60%;animation-delay:.08s}
@keyframes rsp-eq-bar { from{transform:scaleY(.25)} to{transform:scaleY(1)} }

/* Canlı nokta */
.rsp-live-dot {
  position:absolute; top:-3px; right:-3px;
  width:10px; height:10px; border-radius:50%;
  background:#ef4444; border:2px solid rgba(10,8,20,0.9);
  display:none; animation: rsp-live 1.5s ease-in-out infinite;
}
.rsp-player.playing .rsp-live-dot { display:block; }
@keyframes rsp-live { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.3);opacity:0.7} }

/* Metin */
.rsp-text { min-width:0; overflow:hidden; }
.rsp-name {
  font-size:14px !important; font-weight:700 !important;
  white-space:nowrap !important; overflow:hidden !important;
  text-overflow:ellipsis !important;
  color: var(--rs-text, #e2e8f0) !important;
}
[data-theme="light"] .rsp-name { color:#1e293b !important; }

.rsp-now-playing { display:flex; align-items:center; gap:5px; margin-top:2px; }
.rsp-np-dot {
  width:5px; height:5px; border-radius:50%; background:#ef4444;
  flex-shrink:0; animation: rsp-live 1.5s ease-in-out infinite; display:none;
}
.rsp-player.playing .rsp-np-dot { display:block; }
.rsp-np-text {
  font-size:11.5px; color:rgba(255,255,255,0.5);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px;
}
[data-theme="light"] .rsp-np-text { color:rgba(0,0,0,0.45); }

.rsp-status { font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.rsp-status.playing { color:#6ee7b7; }
.rsp-status.loading { color:#06b6d4; }
.rsp-status.error   { color:#fca5a5; }
.rsp-status.paused  { color:rgba(255,255,255,0.35); }
.rsp-timer { font-size:10px; color:#06b6d4; font-weight:600; margin-top:1px; }

/* ── 5. ORTA — Wave + Play ───────────────────────── */
.rsp-controls {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
}

/* Wave wrap — her iki taraf */
.rsp-wave-wrap {
  display: flex !important;
  align-items: flex-end !important;
  gap: 3px !important;
  height: 28px !important;
}

.rsp-wave-right { transform: scaleX(-1); }

/* Wave barlar — HER ZAMAN hareket eder */
.rsp-wave-bar {
  width: 3px !important;
  border-radius: 3px !important;
  background: linear-gradient(to top, #7c3aed, #06b6d4) !important;
  animation: rsp-wave 1.1s ease-in-out infinite alternate !important;
  transform-origin: bottom center !important;
  opacity: 0.4;
  transition: opacity 0.3s, height 0.3s;
}

/* Çalarken daha belirgin ve uzun */
.rsp-player.playing .rsp-wave-bar { opacity: 0.85 !important; }

/* Her barın farklı yüksekliği ve gecikmesi */
.rsp-wave-bar:nth-child(1){height:8px;animation-delay:0s}
.rsp-wave-bar:nth-child(2){height:14px;animation-delay:.08s}
.rsp-wave-bar:nth-child(3){height:20px;animation-delay:.16s}
.rsp-wave-bar:nth-child(4){height:26px;animation-delay:.04s}
.rsp-wave-bar:nth-child(5){height:22px;animation-delay:.12s}
.rsp-wave-bar:nth-child(6){height:16px;animation-delay:.2s}
.rsp-wave-bar:nth-child(7){height:11px;animation-delay:.06s}
.rsp-wave-bar:nth-child(8){height:7px;animation-delay:.14s}

/* Çalarken maksimum yükseklik 2x */
.rsp-player.playing .rsp-wave-bar:nth-child(1){height:14px}
.rsp-player.playing .rsp-wave-bar:nth-child(2){height:24px}
.rsp-player.playing .rsp-wave-bar:nth-child(3){height:28px}
.rsp-player.playing .rsp-wave-bar:nth-child(4){height:28px}
.rsp-player.playing .rsp-wave-bar:nth-child(5){height:26px}
.rsp-player.playing .rsp-wave-bar:nth-child(6){height:22px}
.rsp-player.playing .rsp-wave-bar:nth-child(7){height:18px}
.rsp-player.playing .rsp-wave-bar:nth-child(8){height:12px}

@keyframes rsp-wave { from{transform:scaleY(0.2)} to{transform:scaleY(1)} }

/* Play butonu */
.rsp-play-btn {
  width: 52px !important; height: 52px !important;
  border-radius: 50% !important; flex-shrink: 0 !important;
  position: relative !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  cursor: pointer !important; border: none !important; color: #fff !important;
  background: linear-gradient(135deg, #7c3aed, #06b6d4) !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,0.2), 0 4px 16px rgba(124,58,237,0.4) !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}
.rsp-play-btn:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 0 0 4px rgba(124,58,237,0.3), 0 6px 24px rgba(124,58,237,0.55) !important;
}
.rsp-play-btn:active { transform: scale(0.96) !important; }

.rsp-player.playing .rsp-play-btn::before {
  content:''; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid rgba(124,58,237,0.3);
  animation: rsp-ring 2s ease-in-out infinite;
}
@keyframes rsp-ring { 0%{transform:scale(.9);opacity:.8} 50%{transform:scale(1.1);opacity:.3} 100%{transform:scale(.9);opacity:.8} }

.rsp-loading {
  position:absolute; inset:-4px; border-radius:50%;
  border:2px solid transparent; border-top-color:rgba(255,255,255,0.9);
  border-right-color:rgba(255,255,255,0.4);
  animation: rsp-spin 0.7s linear infinite; display:none;
}
.rsp-loading.active { display:block; }
@keyframes rsp-spin { to{transform:rotate(360deg)} }

/* ── 6. SAĞ — Aksiyonlar ────────────────────────── */
.rsp-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 2px !important;
}

.rsp-btn {
  width: 34px !important; height: 34px !important;
  border-radius: 8px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important;
  color: rgba(255,255,255,0.5) !important;
  background: none !important; border: none !important; cursor: pointer !important;
  transition: color 0.15s, background 0.15s !important;
}
.rsp-btn:hover {
  color: rgba(255,255,255,0.9) !important;
  background: rgba(255,255,255,0.08) !important;
}
.rsp-btn.active { color: #ec4899 !important; }

[data-theme="light"] .rsp-btn { color: rgba(0,0,0,0.45) !important; }
[data-theme="light"] .rsp-btn:hover { color:rgba(0,0,0,0.8) !important; background:rgba(0,0,0,0.06) !important; }

.rsp-close-btn { color:rgba(255,255,255,0.25) !important; margin-left:4px !important; }
.rsp-close-btn:hover { color:#fca5a5 !important; background:rgba(239,68,68,0.1) !important; }

/* Bozuk yayın — kırmızı */
.rs-report-btn-player { display:flex !important; }
.rs-report-btn-player:hover { color:#fca5a5 !important; background:rgba(239,68,68,0.1) !important; }

/* Volume */
.rsp-volume {
  display: flex !important; align-items: center !important; gap: 4px !important; margin-right: 4px !important;
}
.rsp-vol-wrap { width:72px !important; display:block !important; }
.rsp-vol-slider {
  -webkit-appearance:none; width:100%; height:3px; border-radius:2px;
  background:rgba(255,255,255,0.12); outline:none; cursor:pointer;
  transition:height .15s;
}
.rsp-vol-slider:hover { height:5px; }
.rsp-vol-slider::-webkit-slider-thumb {
  -webkit-appearance:none; width:12px; height:12px; border-radius:50%;
  background:linear-gradient(135deg,#7c3aed,#06b6d4); cursor:pointer;
  box-shadow:0 0 4px rgba(124,58,237,0.5); transition:transform .15s;
}
.rsp-vol-slider::-webkit-slider-thumb:hover { transform:scale(1.3); }
[data-theme="light"] .rsp-vol-slider { background:rgba(0,0,0,0.12); }

/* Sleep dropdown */
.rsp-sleep-wrap { position:relative; }
.rs-sleep-dropdown {
  position:absolute; bottom:calc(100% + 10px); right:0;
  background:var(--rs-bg-2,#1a1a2e);
  border:1px solid rgba(255,255,255,0.1); border-radius:12px;
  padding:8px; min-width:160px;
  box-shadow:0 8px 32px rgba(0,0,0,0.5); z-index:10;
}

/* ── 7. HATA BARI ────────────────────────────────── */
.rsp-error {
  display:flex; align-items:center; gap:10px; padding:8px 20px;
  background:rgba(239,68,68,0.1); border-top:1px solid rgba(239,68,68,0.2);
  font-size:12.5px; color:#fca5a5; position:relative; z-index:1;
}
.rsp-retry-btn {
  padding:4px 12px; background:rgba(239,68,68,0.2); border:1px solid rgba(239,68,68,0.4);
  border-radius:100px; font-size:11.5px; color:#fca5a5; cursor:pointer; margin-left:auto;
}
.rsp-retry-btn:hover { background:rgba(239,68,68,0.35); }

/* ── 8. MOBİL ────────────────────────────────────── */
@media (max-width: 1024px) {
  .rsp-player {
    left:0 !important; right:0 !important; width:100% !important;
    border-radius:0 !important;
    bottom: calc(var(--rs-mob-nav-h, 60px) + env(safe-area-inset-bottom, 0px)) !important;
  }

  #rsPlayer .rs-player-inner,
  #rsPlayer .rsp-inner {
    grid-template-columns: 1fr auto auto !important;
    height: 64px !important;
    padding: 0 12px !important;
    gap: 8px !important;
  }

  .rsp-wave-left, .rsp-wave-right { display:none !important; }
  .rsp-volume    { display:none !important; }
  .rsp-play-btn  { width:44px !important; height:44px !important; }
  .rs-theme-toggle-player,
  .rsp-sleep-wrap,
  .rs-player-share-btn { display:none !important; }

  /* Mobilde: bozuk yayın butonu, favori, kapat görünsün */
  .rs-report-btn-player { display:flex !important; }
  .rs-player-fav-btn    { display:flex !important; }
  .rsp-close-btn        { display:flex !important; }

  .rsp-name   { font-size:13px !important; }
  .rsp-np-text { font-size:10.5px !important; max-width:150px !important; }
}

@media (max-width: 480px) {
  .rsp-close-btn { display:none !important; }
  .rsp-play-btn  { width:40px !important; height:40px !important; }
  .rsp-np-text   { max-width:110px !important; }
}

@media (max-width: 320px) {
  .rsp-logo-wrap { width:34px !important; height:34px !important; }
  .rsp-logo      { width:34px !important; height:34px !important; }
  .rsp-name      { font-size:11px !important; }
  .rsp-np-text   { display:none !important; }
}

/* ── 9. REDUCED MOTION ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .rsp-wave-bar, .rsp-eq span, .rsp-live-dot,
  .rsp-np-dot, .rsp-loading, .rsp-play-btn::before {
    animation:none !important;
  }
}

/* ── 10. LIGHT MODE ──────────────────────────────── */
[data-theme="light"] .rsp-eq    { background:rgba(255,255,255,0.85) !important; }
[data-theme="light"] .rsp-live-dot { border-color:rgba(255,255,255,0.9); }

/* ── Radyo değişince logo geçiş animasyonu ──── */
.rsp-logo {
  transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.3s, box-shadow 0.3s !important;
}

/* ── Now playing: "Canlı Yayın" fallback görünümü ── */
.rsp-np-text:empty::before {
  content: 'Canlı Yayın';
  opacity: 0.5;
}

/* ── Status metni renk düzeltmesi ─────────────── */
.rsp-status { display: block; margin-top: 2px; }

/* ── Player genişlet butonu — wave barlardan önce ── */
.rsp-actions {
  /* Genişlet + mini butonlar için sağ tarafa sıra ekle */
  flex-wrap: nowrap !important;
}

/* ── Responsive: 1280px üstü tüm butonlar görünsün ── */
@media (min-width: 1280px) {
  .rs-report-btn-player { display: flex !important; }
  .rs-player-share-btn  { display: flex !important; }
  .rsp-sleep-wrap       { display: flex !important; }
  .rs-theme-toggle-player { display: flex !important; }
}

/* ── Smooth player visibility ──────────────────── */
.rsp-player {
  transition:
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    left      0.35s cubic-bezier(0.4, 0, 0.2, 1),
    opacity   0.3s ease !important;
}
.rsp-player:not(.visible) { opacity: 0; pointer-events: none; }
.rsp-player.visible        { opacity: 1; pointer-events: auto; }

/* ── Hız/erişilebilirlik eki (player optimizasyon turu) ── */
/* Bağlanıyor durumu: hafif, layout bozmayan görsel ipucu */
.rsp-status.loading { opacity: .85; }
/* Kart "şu an çalıyor" etiketi reduced-motion'da sabit kalsın */
@media (prefers-reduced-motion: reduce) {
  .rs-now-playing-label .rs-live-dot,
  .rs-radio-card.is-playing,
  .rs-now-playing-label { animation: none !important; }
}