/*==================== 🎧 Music Player Premium ====================*/

/* ==================== 💻 Desktop ==================== */
.music-player {
  position: fixed;
  left: 10%;
  bottom: 25rem;
  transform: translateX(-50%);
  background: rgba(18, 18, 18, 0.85);
  backdrop-filter: blur(16px);
  padding: 1rem 1.2rem;
  border-radius: 1.2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  color: #fff;
  max-width: 90%;
  width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 9999;
  gap: 0.8rem;
  font-family: "SF Pro Display", sans-serif;
  transition: all 0.3s ease-in-out;
}

/* ==================== 🎵 Judul Lagu ==================== */
.music-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: #f0f0f0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

/* ==================== ▶️ Kontrol Musik ==================== */
.music-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
  margin-top: 1rem;
}

.music-controls button {
  width: 34px;
  height: 34px;
  font-size: 1.1rem;
  font-weight: bold;
  border: none;
  border-radius: 50%;
  background: rgba(0, 240, 255, 0.08); /* 🌊 Warna transparan cyan */
  color: #00f0ff;
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: all 0.25s ease-in-out;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

.music-controls button:hover {
  background: rgba(29, 185, 84, 0.15); /* Hijau transparan */
  transform: scale(1.12);
  box-shadow: 0 0 12px rgba(29, 185, 84, 0.3); /* Glow hijau */
}

.music-controls button:active {
  transform: scale(0.95);
  box-shadow: inset 0 0 4px rgba(29, 185, 84, 0.25); /* Efek tekan hijau */
}

.music-controls i {
  pointer-events: none;
  font-size: 1rem;
}

/* 🔄 Animasi ikon berputar */
.rotate-music {
  animation: spin 4s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ==================== 🔁 Shuffle & Repeat ==================== */
.music-options {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  justify-content: center;
  margin-top: 0.8rem; /* 🔻 Tambahan: geser ke bawah */
}

.music-options button {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: #ccc;
  font-size: 1rem;
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
}

.music-options button:hover {
  background: rgba(29, 185, 84, 0.15);
  color: #1db954;
  transform: scale(1.08);
  box-shadow: 0 0 10px rgba(29, 185, 84, 0.3);
}

/* 🌟 Efek saat aktif */
.music-options button.active {
  color: #1db954;
  background: rgba(29, 185, 84, 0.12);
  box-shadow: 0 0 12px rgba(29, 185, 84, 0.4) inset;
}

/* ==================== ❤️ Like Button ==================== */
.music-like {
  position: absolute;
  top: 21.1rem; /* atau sesuaikan dengan layout */
  right: 1.5rem;
  z-index: 10;
}

.music-like button {
  width: 25px;
  height: 25px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: #ccc;
  font-size: 1.1rem;
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
}

.music-like button:hover {
  color: #ff5f7c;
  background: rgba(255, 95, 124, 0.1);
  box-shadow: 0 0 10px rgba(255, 95, 124, 0.3);
  transform: scale(1.12);
}

.music-like button:active {
  transform: scale(0.95);
  box-shadow: inset 0 0 5px rgba(255, 95, 124, 0.25);
}

/* 🔥 Efek Ledakan Cinta */
.like-explode {
  position: absolute;
  top: -10px;
  font-size: 0.7rem;
  color: #ff5f7c;
  opacity: 0;
  animation: explode 1s ease forwards;
  pointer-events: none;
  font-weight: bold;
}

@keyframes explode {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(-25px) scale(1.8);
    opacity: 0;
  }
}

/* ❤️ Heart aktif glow */
.music-like button.liked {
  color: #ff5f7c;
  box-shadow: 0 0 12px rgba(255, 95, 124, 0.6), inset 0 0 6px rgba(255, 95, 124, 0.4);
  background: rgba(255, 95, 124, 0.08);
}

/* ==================== 🔊 Visualizer ==================== */
.music-visualizer {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 4px;
  height: 18px;
  margin-top: 0.6rem;
  padding-bottom: 2px;
  transform: translateY(2px);
  pointer-events: none;
  user-select: none;
}

.music-visualizer span {
  width: 3px;
  height: 6px;
  background: linear-gradient(to top, #1db954, #1ed760);
  animation: bounce 1.2s infinite ease-in-out;
  border-radius: 30px;
  box-shadow: 0 0 4px rgba(29, 185, 84, 0.4);
  transition: all 0.4s ease-in-out;
  opacity: 0.7;
}

.music-visualizer span:nth-child(1) { animation-delay: 0s; }
.music-visualizer span:nth-child(2) { animation-delay: 0.2s; }
.music-visualizer span:nth-child(3) { animation-delay: 0.4s; }
.music-visualizer span:nth-child(4) { animation-delay: 0.6s; }

@keyframes bounce {
  0%, 100% {
    height: 5px;
    opacity: 0.5;
    transform: scaleY(1);
  }
  50% {
    height: 16px;
    opacity: 1;
    transform: scaleY(1.3);
  }
}


/* ==================== 🎤 Lirik Musik ==================== */
.music-lyrics {
  max-height: 140px;
  overflow-y: auto;
  overflow-x: hidden; /* 🚫 Matikan scroll horizontal */
  scroll-behavior: smooth;
  padding: 0 0.5rem;
  text-align: center;
  margin-top: 0.6rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.05);
  transition: background 0.3s ease;
  box-sizing: border-box; /* ✅ Pastikan padding tidak menyebabkan overflow */
}

/* 📝 Teks lirik default */
.music-lyrics p,
.music-lyrics div {
  font-size: 0.82rem;
  line-height: 1.5;
  opacity: 0.65;
  color: #ffffff;
  font-weight: 500;
  transition: all 0.3s ease;
  padding: 2px 0;
  white-space: normal;     /* Pastikan teks tidak satu baris panjang */
  overflow-wrap: break-word; /* 🔁 Pecah kata panjang jika perlu */
}

/* 🌟 Baris lirik aktif - Versi Pro 2025 */
.music-lyrics .active {
  color: #72ff90;
  font-weight: 600;
  opacity: 1;
  transform: scale(1.07);
  text-shadow:
    0 0 4px rgba(114, 255, 144, 0.5),
    0 0 8px rgba(114, 255, 144, 0.4),
    0 0 12px rgba(114, 255, 144, 0.25);
  transition: all 0.3s ease-in-out;
}

/* 🌙 Dark Mode */
html[data-theme="dark"] .music-lyrics {
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.2);
}

/* ==================== ⏳ Progress Bar Premium ==================== */
.music-progress {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  font-size: 0.72rem;
  color: #d1d1d1;
  padding: 0.3rem 0;
  user-select: none;
}

/* Waktu kiri & kanan */
.music-progress span {
  min-width: 32px;
  text-align: center;
  font-weight: 500;
  color: #aaa;
}

/* Bar Utama */
.music-progress input[type="range"] {
  flex: 1;
  height: 6px;
  background: linear-gradient(90deg, #1db954, #1ed760);
  border-radius: 12px;
  appearance: none;
  outline: none;
  cursor: pointer;
  transition: background 0.3s ease;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.08);
}

/* Thumb */
.music-progress input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 12px;
  height: 12px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow:
    0 0 4px rgba(30, 215, 96, 0.5),
    0 0 8px rgba(30, 215, 96, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.music-progress input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow:
    0 0 6px rgba(30, 215, 96, 0.6),
    0 0 10px rgba(30, 215, 96, 0.5);
}

/* Firefox support */
.music-progress input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: #ffffff;
  border-radius: 50%;
  border: none;
  box-shadow:
    0 0 4px rgba(30, 215, 96, 0.5),
    0 0 8px rgba(30, 215, 96, 0.3);
}

/* ==================== 🔉 Volume ==================== */
.music-volume {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
}

.music-volume button {
  width: 34px;
  height: 34px;
  font-size: 1.2rem;
  font-weight: bold;
  border: none;
  border-radius: 50%;
  background: rgba(0, 240, 255, 0.08);
  color: #00f0ff;
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: all 0.25s ease-in-out;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.15);
}

.music-volume button:hover {
  background: rgba(0, 240, 255, 0.18);
  transform: scale(1.12);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.35);
}

.volume-indicator {
  min-width: 50px;
  text-align: center;
  font-size: 0.75rem;
  padding: 0.3rem 0.6rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.05);
  color: #00f0ff;
  font-weight: 500;
  backdrop-filter: blur(5px);
  box-shadow: inset 0 0 4px rgba(0, 240, 255, 0.25);
}


/* ==================== ⬇️ Download Lagu ==================== */
/* ==================== ⬇️ Download Lagu (Desktop) ==================== */
.music-download {
  position: absolute;
  top: 21.2rem;
  right: 19.8rem;
  color: #ccc;
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 20;
  transition: all 0.3s ease;
}

.music-download:hover {
  color: #fff;
  transform: scale(1.08);
}

/* ==================== 🔍 Pencarian Lagu ==================== */
.music-search {
  position: absolute;
  top: 2.5rem;
  right: 1.6rem;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: none;
  color: #ccc;
  font-size: 1rem;
  padding: 0.6rem;
  border-radius: 50%;
  cursor: pointer;
  z-index: 20;
  transition: all 0.3s ease;
}

.music-search:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  transform: scale(1.08);
}

/* ==================== 🔍 POPUP CARI LAGU ==================== */
/* 🌒 Latar overlay popup */
.search-popup {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 1.5rem;
  transition: all 0.3s ease;
}

/* 📦 Kontainer popup */
.search-popup-content {
  background: linear-gradient(145deg, #1c1c1e, #111);
  padding: 1.6rem;
  border-radius: 1.25rem;
  width: 100%;
  max-width: 400px;
  color: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  max-height: 85vh;
  overflow: hidden;
  animation: fadeInUp 0.35s ease;
}

/* 🔍 Input pencarian */
.search-popup input {
  width: 100%;
  padding: 0.65rem 1rem;
  border-radius: 0.75rem;
  border: none;
  outline: none;
  font-size: 1rem;
  background: #222;
  color: #fff;
  box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.04);
  margin-bottom: 1rem;
  transition: all 0.3s ease;
}

.search-popup input::placeholder {
  color: #aaa;
  font-weight: 400;
}

/* 🎵 Daftar lagu hasil pencarian */
#searchResults {
  flex-grow: 1;
  overflow-y: auto;
  padding-right: 0.4rem;
  scrollbar-width: thin;
  scrollbar-color: #666 transparent;
}

/* 📝 Setiap hasil lagu */
#searchResults li {
  padding: 0.6rem 1rem;
  margin-bottom: 0.4rem;
  background: #181818;
  border-radius: 0.6rem;
  font-size: 0.95rem;
  color: #eee;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

#searchResults li:hover {
  background: #2a2a2a;
  transform: translateX(3px);
}

/* 🧪 Scrollbar premium */
#searchResults::-webkit-scrollbar {
  width: 6px;
}
#searchResults::-webkit-scrollbar-thumb {
  background-color: #444;
  border-radius: 4px;
}
#searchResults::-webkit-scrollbar-track {
  background: transparent;
}

/* 🔕 Popup hidden default */
.hidden {
  display: none !important;
}

/* 🌟 Animasi masuk */
@keyframes fadeInUp {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ==================== 🔍 RESPONSIVE HASIL CARI LAGU ==================== */

/* 💻 Desktop: maksimal 3 lagu tampil, lalu scroll */
@media (min-width: 769px) {
  #searchResults {
    max-height: calc(3 * 3.1rem); /* 3 item × tinggi ideal */
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
  }
}

/* 📱 Mobile: maksimal 2 lagu tampil, lalu scroll */
@media (max-width: 768px) {
  #searchResults {
    max-height: calc(2 * 3.1rem); /* 2 item × tinggi ideal */
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
  }
}

/* ==================== 📱 Mobile ==================== */
@media screen and (max-width: 600px) {
  .music-player {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    max-width: 92vw;
    width: auto;
    padding: 0.6rem 0.9rem;
    border-radius: 1rem;
    background: rgba(18, 18, 18, 0.9);
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    z-index: 9999;
  }

  .music-title {
    font-size: 0.8rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
  }

  .music-controls {
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: nowrap;
  }

  .music-controls button {
    font-size: 16px;
    padding: 0.2rem 0.3rem;
  }

  .music-lyrics {
    font-size: 0.7rem;
    line-height: 1.3;
    max-height: 3rem;
    padding: 0 0.5rem;
    text-align: center;
  }

  .music-lyrics p span.active {
    color: #00f0ff;
    font-weight: 600;
    text-shadow: 0 0 3px rgba(0, 240, 255, 0.2);
  }
}

/* 📱 Responsive Tablet / icon download & icon love */
@media (max-width: 768px) {
  .music-download {
    top: 9rem;
    right: 2.5rem;
    font-size: 1.05rem;
  }
}

@media (max-width: 768px) {
  .music-like {
    top: 9.2rem;
    left: 2.5rem;
    font-size: 1rem;
  }
}

/* 📱 Responsive Mobile / icon download & icon love */
@media (max-width: 480px) {
  .music-download {
    top: 14.5rem;
    right: 1.6rem;
    font-size: 1.05rem;
    position: absolute;
    z-index: 99;
  }
}

@media (max-width: 480px) {
  .music-like {
    top: 14.5rem;
    left: 1.5rem;
    font-size: 1.05rem;
    position: absolute;
    z-index: 99;
  }
}

/* 📱 Responsive Mobile & Tablet / icon Pencarian */
@media (max-width: 480px) {
  .music-search {
    top: 2.5rem;
    right: 1rem;
    font-size: 1rem;
  }
}

@media (max-width: 768px) {
  .music-search {
    top: 2.5rem;
    right: 1rem;
    font-size: 1rem;
  }
}