/* ================= FOOTER COMPACT ================= */

.site-footer{
  background:#0f1117;
  border-top:1px solid #1f2330;
  font-size:.85rem;
}

/* TOP */
.footer-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:14px 0;
}

/* Brand */
.footer-brand{
  display:flex;
  flex-direction:column;
  line-height:1.2;
}
.footer-brand span{
  color:#9aa0b8;
  font-size:.75rem;
}

/* Genres */
.footer-genres{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.footer-genres a{
  color:#cfd3ff;
  font-size:.75rem;
}
.footer-genres a:hover{
  color:#e10600;
}

/* Player */
.footer-player{
  display:flex;
  align-items:center;
  gap:10px;
}

.footer-player img{
  width:36px;
  height:36px;
  object-fit:contain;
}

.player-meta{
  min-width:110px;
}
.player-station{
  font-size:.8rem;
}
.player-country{
  font-size:.7rem;
  color:#9aa0b8;
}

.footer-player button{
  background:none;
  border:none;
  color:#fff;
  cursor:pointer;
  font-size:.9rem;
}

.footer-player input[type="range"]{
  width:70px;
}

.footer-player select{
  background:#1f222d;
  border:1px solid #2a2e3d;
  color:#fff;
  font-size:.7rem;
}

/* BOTTOM */
.footer-bottom{
  border-top:1px solid #1f2330;
  padding:8px 0;
}

.footer-legal{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.footer-legal nav{
  display:flex;
  gap:12px;
}
.footer-legal a{
  color:#9aa0b8;
  font-size:.7rem;
}
.footer-legal a:hover{
  color:#ffffff;
}

/* MOBILE */
@media (max-width: 900px){
  .footer-top{
    flex-direction:column;
    align-items:flex-start;
  }
  .footer-player{
    flex-wrap:wrap;
  }
/* PLAYER FARA LOGO – STABIL */
.footer-player{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:56px;
}

/* MOBILE STICKY */
@media (max-width: 768px){

  .site-footer{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    z-index:999;
  }

  .footer-brand,
  .footer-genres,
  .footer-bottom{
    display:none;
  }

  body{
    padding-bottom:70px;
  }

  .footer-player button{
    width:44px;
    height:44px;
    font-size:1rem;
  }

  #btnPlay{
    background:#e10600;
    border-radius:50%;
  }
/* ===============================
   PLAYER STICKY – MOBILE ONLY
   =============================== */

/* Desktop & tablet: footer NORMAL */
@media (min-width: 769px){
  .site-footer{
    position:static !important;
    bottom:auto !important;
  }

  body{
    padding-bottom:0 !important;
  }
}

/* Mobile: footer STICKY */
@media (max-width: 768px){
  .site-footer{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    z-index:999;
  }

  body{
    padding-bottom:70px;
  }
}