/* ================================================================
   MEDIALIS RADIO AI — assets/css/radio.css  v2.0
   Floating player minimal + Studio page + TikTok mode
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&family=Space+Mono&display=swap');

:root {
  --mr-bg:    #0c0e14;
  --mr-s1:    #13161f;
  --mr-s2:    #1a1f2e;
  --mr-bd:    #242b3d;
  --mr-red:   #e8003d;
  --mr-red2:  #ff3860;
  --mr-gold:  #f0a500;
  --mr-ad:    #22c55e;
  --mr-txt:   #dde4f0;
  --mr-muted: #5f6e8a;
  --mr-r:     14px;
  --mr-sh:    0 8px 32px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.3);
  --mr-ff:    'Space Grotesk', -apple-system, sans-serif;
  --mr-mono:  'Space Mono', monospace;
}

/* ══════════════════════════════════════
   FLOATING PLAYER WRAPPER
══════════════════════════════════════ */
#mrad {
  position: fixed;
  bottom: 14px; right: 14px;
  z-index: 9980;
  font-family: var(--mr-ff);
  max-width: 250px;
  width: auto;
  transition: opacity .3s, transform .3s;
}
#mrad.mrad--hidden {
  opacity: 0; pointer-events: none;
  transform: translateY(12px);
}

/* ── BUMPER OVERLAY ── */
.mrad-bumper {
  display: none;
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(8,9,14,.94);
  flex-direction: column; align-items: center; justify-content: center; gap: 10px;
}
.mrad-bumper.show { display: flex; }
.mrad-bumper__icon  { font-size: 48px; }
.mrad-bumper__title { font-size: 22px; font-weight: 800; color: var(--mr-txt); letter-spacing:.04em; }
.mrad-bumper__sub   { font-size: 12px; color: var(--mr-muted); font-family: var(--mr-mono); }

/* ── MINI BAR ── */
.mrad-mini {
  display: flex; align-items: center; gap: 8px;
  background: var(--mr-bg);
  border: 1px solid var(--mr-bd);
  border-radius: 50px;
  padding: 7px 10px;
  box-shadow: var(--mr-sh);
  cursor: pointer;
  transition: border-color .2s;
  max-width: 220px;
}
.mrad-mini:hover { border-color: var(--mr-red); }
.mrad-mini.mrad--dim { opacity: .5; }

/* Animasi bars mini */
.mrad-mini__bars {
  display: flex; align-items: flex-end; gap: 2px;
  height: 16px; flex-shrink: 0;
}
.mrad-mini__bars span {
  display: block; width: 3px; background: var(--mr-muted);
  border-radius: 2px;
  animation: mr-bar 1.3s ease-in-out infinite;
}
.mrad-mini__bars span:nth-child(1){height:5px;animation-delay:0s}
.mrad-mini__bars span:nth-child(2){height:11px;animation-delay:.18s}
.mrad-mini__bars span:nth-child(3){height:16px;animation-delay:.36s}
.mrad-mini__bars span:nth-child(4){height:8px;animation-delay:.54s}
@keyframes mr-bar{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.3)}}

#mrad.is-music .mrad-mini__bars span { background: var(--mr-gold); }
#mrad.is-news  .mrad-mini__bars span { background: var(--mr-red); }
#mrad.is-ad    .mrad-mini__bars span { background: var(--mr-ad); }

.mrad-mini__info { flex:1; min-width:0; max-width:110px; }
.mrad-mini__name  { display:block; font-size:9px; font-weight:700; color:var(--mr-txt); letter-spacing:.05em; }
.mrad-mini__track { display:block; font-size:10px; color:var(--mr-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.mrad-mini__btn {
  background: none; border: none; cursor: pointer;
  color: var(--mr-txt); padding: 5px; flex-shrink: 0;
  transition: color .18s; line-height:1;
}
.mrad-mini__btn:hover { color: var(--mr-red); }
.mrad-mini__pp { color: var(--mr-gold); }
.mrad-mini__pp:hover { color: var(--mr-red); }

/* ── FULL PLAYER ── */
.mrad-full[hidden] { display: none !important; }

.mrad-full {
  background: var(--mr-bg);
  border: 1px solid var(--mr-bd);
  border-radius: var(--mr-r);
  box-shadow: var(--mr-sh);
  padding: 10px;
  display: flex; flex-direction: column; gap: 7px;
  margin-top: 6px;
  width: 220px;
  max-width: 80vw;
  max-height: 70vh;
  overflow-y: auto;
}

.mrad-full__head {
  display: flex; align-items: center; gap: 9px;
}

.mrad-close {
  background: var(--mr-s2);
  border: 1px solid var(--mr-bd);
  color: var(--mr-txt);
  width: 24px; height: 24px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 1; cursor: pointer;
  flex-shrink: 0; transition: all .18s;
}
.mrad-close:hover { background: var(--mr-red); border-color: var(--mr-red); color: #fff; }

.mrad-full__logo { display:flex; align-items:center; gap:8px; flex:1; min-width:0; }
.mrad-full__logo-icon {
  width:28px; height:28px; background:var(--mr-red);
  border-radius:7px; display:flex; align-items:center; justify-content:center;
  font-size:14px; flex-shrink:0;
}
.mrad-full__name { font-size:12px; font-weight:700; color:var(--mr-txt); }
.mrad-full__tag  { font-size:9px; color:var(--mr-muted); font-family:var(--mr-mono); }

/* Badge ON AIR */
.mrad-air {
  font-family: var(--mr-mono); font-size:9px; letter-spacing:.1em;
  color: var(--mr-muted); padding:3px 9px; border-radius:20px;
  background: var(--mr-s1); border:1px solid var(--mr-bd);
  flex-shrink:0; transition:all .3s;
}
.mrad-air.live {
  background: rgba(232,0,61,.1); border-color:rgba(232,0,61,.3);
  color:var(--mr-red); animation:mr-air 1.4s ease-in-out infinite;
}
@keyframes mr-air{0%,100%{opacity:1}50%{opacity:.6}}

/* Waveform */
#mrad-wave {
  width:100%; height:28px; display:block;
  border-radius:6px; background:var(--mr-s1); opacity:.8;
}

/* Now playing */
.mrad-now__mode {
  font-family:var(--mr-mono); font-size:9px; letter-spacing:.14em;
  color:var(--mr-muted);
}
.mrad-now__mode.music { color:var(--mr-gold); }
.mrad-now__mode.news  { color:var(--mr-red); }
.mrad-now__mode.ad    { color:var(--mr-ad); }
.mrad-now__title { font-size:14px; font-weight:700; line-height:1.3; color:var(--mr-txt); margin-top:3px; }
.mrad-now__sub   { font-size:10px; color:var(--mr-muted); font-family:var(--mr-mono); }

/* Progress */
.mrad-prog__bar  { height:2px; background:var(--mr-bd); border-radius:2px; }
.mrad-prog__fill { height:100%; width:0%; border-radius:2px; background:var(--mr-gold); transition:width .5s linear; }
.mrad-prog__fill.news { background:var(--mr-red); }
.mrad-prog__fill.ad   { background:var(--mr-ad); }
.mrad-prog__times{ display:flex; justify-content:space-between; font-family:var(--mr-mono); font-size:9px; color:var(--mr-muted); margin-top:3px; }

/* Controls */
.mrad-ctrl { display:flex; align-items:center; gap:5px; }
.mrad-btn {
  display:flex; align-items:center; gap:4px;
  border:none; border-radius:7px; cursor:pointer;
  font-family:var(--mr-ff); font-weight:600; font-size:11px;
  padding:6px 8px; transition:all .18s;
}
.mrad-btn--red   { background:var(--mr-red); color:#fff; flex:1; justify-content:center; }
.mrad-btn--red:hover { background:var(--mr-red2); }
.mrad-btn--ghost { background:var(--mr-s2); color:var(--mr-txt); border:1px solid var(--mr-bd); }
.mrad-btn--ghost:hover { border-color:var(--mr-red); color:var(--mr-red); }

.mrad-vol { display:flex; align-items:center; gap:4px; font-size:11px; color:var(--mr-muted); }
.mrad-vol input[type=range] { width:60px; accent-color:var(--mr-gold); cursor:pointer; }

/* Floating player: volume slider disembunyikan (ruang terbatas), tetap ada di studio page */
.mrad-full .mrad-vol { display: none; }

/* Schedule strip */
/* Schedule strip — default (dipakai juga oleh studio page via .mrad-page__sched-row) */
.mrad-sched { display:flex; gap:4px; flex-wrap:wrap; }
.mrad-sched__slot {
  flex:1; min-width:52px;
  background:var(--mr-s1); border:1px solid var(--mr-bd);
  border-radius:7px; padding:5px 7px; text-align:center;
  font-size:10px; color:var(--mr-txt);
}
.mrad-sched__slot span  { display:block; font-weight:700; }
.mrad-sched__slot small { display:block; color:var(--mr-muted); font-family:var(--mr-mono); font-size:8px; margin-top:1px; }
.mrad-sched__slot.current { background:rgba(232,0,61,.1); border-color:rgba(232,0,61,.3); color:var(--mr-red); }
.mrad-sched__slot.passed  { opacity:.3; }

/* Floating player: jadwal jadi grid 3 kolom ringkas, bukan 5 kotak sebaris */
.mrad-full .mrad-sched {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.mrad-full .mrad-sched__slot { min-width: 0; padding: 4px 3px; font-size: 9px; }
.mrad-full .mrad-sched__slot small { font-size: 7px; }

.mrad-studio-link {
  display:block; text-align:center; font-size:11px;
  color:var(--mr-gold); text-decoration:none; padding:5px;
  border-top:1px solid var(--mr-bd); transition:color .18s;
}
.mrad-studio-link:hover { color:var(--mr-red2); }

/* ══════════════════════════════════════
   HALAMAN /radio — STUDIO
══════════════════════════════════════ */
.mrad-studio-root { min-height:100vh; background:var(--mr-bg); }

.mrad-page {
  min-height:100vh;
  display:flex; flex-direction:column;
  background:var(--mr-bg);
  color:var(--mr-txt);
  font-family:var(--mr-ff);
}

/* Hero */
.mrad-page__hero {
  background: linear-gradient(180deg,#100816 0%,var(--mr-bg) 100%);
  border-bottom:1px solid var(--mr-bd);
  padding:28px 24px 20px;
  position:relative; overflow:hidden;
}
.mrad-page__hero::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 0%,rgba(232,0,61,.08) 0%,transparent 65%);
  pointer-events:none;
}
.mrad-page__top {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;
}
.mrad-page__logo { font-size:14px; font-weight:800; letter-spacing:.04em; }
.mrad-page__clock {
  font-family:var(--mr-mono); font-size:28px; font-weight:700;
  letter-spacing:.08em; color:var(--mr-txt); margin:8px 0 4px;
}
.mrad-page__title { font-size:20px; font-weight:700; line-height:1.3; margin-top:4px; }
.mrad-page__sub   { font-size:11px; color:var(--mr-muted); font-family:var(--mr-mono); margin-top:3px; }

/* Wave */
#mrad-page-wave {
  width:100%; height:52px; display:block;
  background:var(--mr-s1); opacity:.85;
}

/* Progress */
.mrad-page__prog { padding:10px 20px 0; }
.mrad-page__prog-bar  { height:3px; background:var(--mr-bd); border-radius:3px; }
.mrad-page__prog-fill { height:100%; width:0%; border-radius:3px; background:var(--mr-gold); transition:width .5s linear; }
.mrad-page__prog-times{ display:flex; justify-content:space-between; font-family:var(--mr-mono); font-size:9px; color:var(--mr-muted); margin-top:4px; }

/* Controls */
.mrad-page__ctrl {
  display:flex; align-items:center; gap:9px;
  padding:14px 20px; flex-wrap:wrap;
}
.mrad-btn--lg { flex:1; padding:12px 20px; font-size:14px; justify-content:center; }

/* Schedule row */
.mrad-page__sched-row {
  display:flex; align-items:center; gap:12px;
  padding:0 20px 14px; flex-wrap:wrap;
}
.mrad-page__sched-row .mrad-sched { flex:1; }
.mrad-page__session { font-size:11px; color:var(--mr-muted); font-family:var(--mr-mono); white-space:nowrap; }
.mrad-page__session strong { color:var(--mr-gold); }

/* Queue */
.mrad-page__queue { padding:0 20px 20px; }
.mrad-page__queue-title { font-family:var(--mr-mono); font-size:9px; letter-spacing:.12em; color:var(--mr-muted); margin-bottom:10px; }
.mrad-qlist { display:flex; flex-direction:column; gap:4px; max-height:240px; overflow-y:auto; }
.mrad-qlist::-webkit-scrollbar{width:3px}
.mrad-qlist::-webkit-scrollbar-thumb{background:var(--mr-bd);border-radius:3px}

.mrad-qi { display:flex; align-items:flex-start; gap:9px; padding:9px 11px; border-radius:9px; border:1px solid transparent; transition:all .18s; }
.mrad-qi.active { background:rgba(240,165,0,.07); border-color:rgba(240,165,0,.22); }
.mrad-qi.done   { opacity:.35; }
.mrad-qi__icon  { font-size:13px; flex-shrink:0; margin-top:1px; }
.mrad-qi__title { font-size:12px; line-height:1.35; }
.mrad-qi__meta  { font-size:10px; color:var(--mr-muted); font-family:var(--mr-mono); margin-top:2px; }

/* TikTok mode */
.mrad-page[data-tiktok] {
  justify-content:center; align-items:center;
  background:#000;
}
.mrad-page__tiktok-info {
  text-align:center; padding:20px;
  font-size:22px; font-weight:800; color:var(--mr-txt);
  line-height:1.8;
}
.mrad-page__tiktok-info .small { font-size:13px; color:var(--mr-muted); font-family:var(--mr-mono); }

/* Mode TikTok: sembunyikan header/footer WordPress */
body.page-radio.tiktok-mode #masthead,
body.page-radio.tiktok-mode #colophon,
body.page-radio.tiktok-mode .site-header,
body.page-radio.tiktok-mode .site-footer { display:none !important; }

/* Sembunyikan floating player di halaman /radio */
body.page-radio #mrad { display:none !important; }

/* Mobile */
@media (max-width:480px) {
  #mrad { bottom:10px; right:10px; max-width:200px; }
  .mrad-full { max-width:240px; }
  .mrad-page__clock { font-size:22px; }
  .mrad-page__title { font-size:16px; }
}