/* [assets/css/style.css] Tema Spotify Dark */
:root {
  --bg-black: #000000;
  --bg-dark: #121212;
  --bg-card: #181818;
  --text-main: #ffffff;
  --text-sec: #b3b3b3;
  --green: #1db954;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Circular", "Segoe UI", sans-serif;
  background: var(--bg-black);
  color: var(--text-main);
  overflow: hidden;
}

/* Layout Grid */
.app-container {
  display: flex;
  height: calc(100vh - 90px); /* 90px untuk player bawah */
}

/* Sidebar */
.sidebar {
  width: 250px;
  background: var(--bg-black);
  display: flex;
  flex-direction: column;
  padding: 10px;
  border-right: 1px solid #333;
}
.brand {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
  padding: 10px;
  color: var(--green);
}
.playlist-header {
  font-size: 12px;
  font-weight: bold;
  color: var(--text-sec);
  padding: 0 10px;
  margin-bottom: 10px;
  letter-spacing: 1px;
}

.track-list {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-y: auto;
  flex: 1;
}
.track-list li {
  padding: 10px;
  cursor: pointer;
  border-radius: 5px;
  transition: 0.2s;
  color: var(--text-sec);
  display: flex;
  justify-content: space-between;
}
.track-list li:hover {
  background: var(--bg-card);
  color: white;
}
.track-list li.active {
  background: #2a2a2a;
  color: var(--green);
  font-weight: bold;
}
.track-list li small {
  font-size: 0.8em;
  margin-left: 10px;
}

/* Main Content */
.main-content {
  flex: 1;
  background: linear-gradient(180deg, #222 0%, #121212 40%);
  overflow-y: auto;
  padding: 30px;
}

.hero-section {
  display: flex;
  gap: 30px;
  margin-bottom: 30px;
  align-items: flex-end;
}
.hero-image img {
  width: 232px;
  height: 232px;
  box-shadow: 0 4px 60px rgba(0, 0, 0, 0.5);
  object-fit: cover;
}
.tag {
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.1em;
}
.hero-details h1 {
  font-size: 48px;
  margin: 10px 0;
  line-height: 1;
}
.hero-details p {
  color: var(--text-sec);
  font-size: 18px;
  font-weight: bold;
  margin: 0;
}
.meta-row {
  color: var(--text-sec);
  margin-top: 10px;
  font-size: 14px;
}

.action-buttons {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}
.btn-green {
  background: var(--green);
  color: black;
  border: none;
  padding: 12px 24px;
  border-radius: 50px;
  font-weight: bold;
  cursor: pointer;
  letter-spacing: 1px;
}
.btn-share {
  background: white;
  color: black;
  border: none;
  padding: 10px 20px;
  border-radius: 50px;
  font-weight: bold;
  cursor: pointer;
}
.btn-sec {
  background: transparent;
  border: 1px solid #777;
  color: white;
  padding: 10px 20px;
  border-radius: 50px;
  font-weight: bold;
  cursor: pointer;
}
.btn-sec:hover {
  border-color: white;
}

/* Tab Content (Lyrics/Comments) */
.hidden {
  display: none;
}
.content-tab {
  background: var(--bg-card);
  padding: 20px;
  border-radius: 8px;
  margin-top: 20px;
  max-width: 800px;
}
.input-dark {
  display: block;
  width: 100%;
  background: #333;
  border: none;
  padding: 10px;
  color: white;
  margin-bottom: 10px;
  border-radius: 4px;
  box-sizing: border-box;
}

/* Bottom Player */
.bottom-player {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 90px;
  background: #181818;
  border-top: 1px solid #282828;
  z-index: 100;
  padding: 0 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.progress-bar {
  width: 100%;
  height: 4px;
  -webkit-appearance: none;
  background: #555;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
}
.progress-bar::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  background: var(--green);
  border-radius: 50%;
  display: none;
}
.bottom-player:hover .progress-bar::-webkit-slider-thumb {
  display: block;
}

.player-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding-top: 5px;
}
.player-left {
  width: 30%;
}
.player-center {
  width: 40%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.player-right {
  width: 30%;
  text-align: right;
  color: var(--text-sec);
}

.ctrl-btn {
  background: none;
  border: none;
  color: #b3b3b3;
  font-size: 20px;
  cursor: pointer;
}
.ctrl-btn:hover {
  color: white;
}
.play-round {
  background: white;
  color: black;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s;
}
.play-round:hover {
  transform: scale(1.1);
  color: black;
}

/* [assets/css/style.css] UPDATE FIX MOBILE */

@media (max-width: 768px) {
  /* Container utama jadi vertikal & bisa discroll */
  .app-container {
    display: block; /* Ganti flex jadi block biasa agar natural */
    height: auto;
    padding-bottom: 120px; /* Ruang lebih luas untuk player bawah */
    overflow-y: auto;
  }

  /* 1. BAGIAN UTAMA (Cover & Info) */
  .main-content {
    padding: 20px 20px 0; /* Kurangi padding bawah */
    overflow: visible;
    background: transparent; /* Biar menyatu dengan background body */
  }

  .hero-section {
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #333; /* Pemisah visual */
  }

  .hero-image img {
    width: 220px; /* Sedikit lebih besar biar cakep */
    height: 220px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  }

  .hero-details h1 {
    font-size: 24px;
    margin-top: 20px;
  }
  .action-buttons {
    justify-content: center;
    flex-wrap: wrap;
  }

  /* Tombol aksi lebih kecil di HP */
  .action-buttons button {
    font-size: 0.8rem;
    padding: 8px 16px;
  }

  /* 2. SIDEBAR (Playlist) */
  .sidebar {
    display: block; /* Pastikan tampil */
    width: 100%;
    border: none;
    padding: 0 15px;
    background: transparent;
    box-sizing: border-box;
    margin-top: 10px;
  }

  .brand {
    display: none;
  } /* Logo sembunyi */

  .sidebar-filters {
    padding: 0 0 15px 0 !important;
    position: sticky; /* Filter tetap nempel saat scroll (opsional) */
    top: 0;
    background: #000; /* Background saat sticky */
    z-index: 10;
    padding-top: 10px !important;
  }

  .playlist-header {
    padding-left: 5px;
    margin-top: 10px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  /* PERBAIKAN UTAMA DISINI */
  .track-list {
    flex: none; /* Matikan flex:1 desktop */
    height: auto; /* Biarkan tinggi mengikuti isi lagu */
    max-height: none; /* Jangan dibatasi tingginya */
    overflow-y: visible; /* Biarkan scroll ikut halaman utama */
    margin-bottom: 20px;
  }

  /* Style item lagu di HP biar lebih enak ditekan */
  .track-list li {
    padding: 15px 10px;
    border-bottom: 1px solid #222;
  }

  /* Tab Content (Komentar/Lirik) */
  .content-tab {
    margin: 20px 0;
    padding: 15px;
  }
}

/* [assets/css/style.css] Tambahan untuk Filter Sidebar */

.sidebar-filters {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #333;
  padding-bottom: 15px !important;
}

.filter-buttons {
  display: flex;
  gap: 10px;
}

.btn-filter {
  flex: 1;
  background: #2a2a2a;
  border: 1px solid #333;
  color: #b3b3b3;
  padding: 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: 0.2s;
}

.btn-filter:hover {
  background: #333;
  color: white;
}
.btn-filter.active {
  background: #1db954;
  color: black;
  border-color: #1db954;
  font-weight: bold;
}

.genre-dropdown {
  width: 100%;
  background: #2a2a2a;
  color: white;
  border: 1px solid #333;
  padding: 8px;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
}

.genre-dropdown option {
  background: #121212;
}

/* Tambahan: Label untuk View Count di list */
.view-count {
  font-size: 0.7em;
  color: #777;
  margin-left: 5px;
  background: #222;
  padding: 2px 5px;
  border-radius: 3px;
}

/* [assets/css/style.css] Tambahan untuk Lazy Load & Thumbnail List */

/* Area scroll khusus playlist agar tombol Load More rapi */
.playlist-scroll-area {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 20px;
}

/* Thumbnail di dalam List Lagu */
.list-thumb {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  object-fit: cover;
  margin-right: 12px;
  background: #333; /* Placeholder warna sebelum gambar muncul */
}

/* Layout Item Lagu (Flexbox biar gambar & teks sejajar) */
.track-list li {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #282828;
}

/* Tombol Load More */
.btn-load-more {
  background: transparent;
  border: 1px solid #555;
  color: #fff;
  padding: 8px 20px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.8rem;
  transition: 0.2s;
}

.btn-load-more:hover {
  border-color: #1db954;
  color: #1db954;
}

/* Fix untuk Mobile agar scroll area bekerja normal */
@media (max-width: 768px) {
  .playlist-scroll-area {
    overflow-y: visible; /* Biarkan scroll ikut halaman utama */
  }
}