* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100vh; overflow: hidden; background-color: #030303;
}

.ytm-player-container {
  background-color: #030303; color: #ffffff; font-family: Arial, sans-serif;
  height: 100vh; display: flex; flex-direction: column; overflow: hidden;
}

/* HEADER */
.ytm-header {
  height: 64px; min-height: 64px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; border-bottom: 1px solid #1f1f1f; background-color: #030303;
}
.header-left, .header-right { display: flex; align-items: center; gap: 16px; }
.brand-logo { display: flex; align-items: center; font-size: 18px; font-weight: bold; }
.search-box { background-color: #1f1f1f; border-radius: 8px; display: flex; padding: 6px 12px; width: 300px; }
.search-box input { background: none; border: none; color: white; width: 100%; outline: none; }
.profile-avatar { background: #ff0000; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; }

/* BODY */
.ytm-main-body { display: flex; flex: 1; overflow: hidden; }

/* SIDEBAR KIRI */
.ytm-sidebar { width: 240px; padding: 16px; border-right: 1px solid #1f1f1f; display: flex; flex-direction: column; background-color: #030303; }
.sidebar-menu { display: flex; flex-direction: column; gap: 4px; }
.menu-item { color: #aaa; text-decoration: none; padding: 12px 16px; border-radius: 8px; display: flex; align-items: center; gap: 16px; font-size: 14px; }
.menu-item.active, .menu-item:hover { color: #fff; background-color: #1f1f1f; }
.sidebar-divider { height: 1px; background: #1f1f1f; margin: 16px 0; }
.social-section { display: flex; flex-direction: column; gap: 8px; }
.social-title { font-size: 12px; color: #555; font-weight: bold; text-transform: uppercase; margin: 0 0 4px 8px; }
.social-btn { text-decoration: none; padding: 10px; border-radius: 20px; font-size: 14px; font-weight: bold; text-align: center; color: #fff; }
.yt-btn { background-color: #2b0000; border: 1px solid #ff0000; }
.sp-btn { background-color: #002b00; border: 1px solid #1db954; }

/* WORKSPACE AREA */
.ytm-player-workspace { display: flex; flex: 1; overflow: hidden; }
.player-center-art { flex: 1; display: flex; align-items: center; justify-content: center; padding: 20px; }
.youtube-embed-wrapper { width: 100%; max-width: 560px; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.8); background: #000; }

/* PANEL TRACK LIST (Class track-row disesuaikan) */
.player-right-sidebar { width: 340px; border-left: 1px solid #1f1f1f; display: flex; flex-direction: column; padding: 16px; overflow: hidden; }
.playlist-tabs { font-size: 13px; font-weight: bold; color: #fff; border-bottom: 1px solid #1f1f1f; padding-bottom: 12px; }
.queue-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.track-row { display: flex; align-items: center; padding: 12px 10px; border-radius: 6px; cursor: pointer; transition: 0.2s; }
.track-row:hover { background: rgba(255,255,255,0.05); }
.track-row.active { background: rgba(255,255,255,0.1); }
.play-state-icon { color: #ff0000; width: 24px; text-align: center; font-size: 14px; }
.track-details { flex: 1; margin-left: 8px; }
.track-details h4 { margin: 0 0 2px 0; font-size: 14px; font-weight: 500; color: white; }
.track-details p { margin: 0; font-size: 12px; color: #aaa; }
.track-duration { font-size: 12px; color: #555; }

/* AUDIO CONTROLLER & TIMELINE BAR BAWAH */
.ytm-audio-bar {
  height: 80px; min-height: 80px; background-color: #1f1f1f; display: flex; flex-direction: column; position: relative; box-sizing: border-box;
}

/* Desain bar Background Pengukur Waktu */
.timeline-container {
  width: 100%; height: 4px; background-color: rgba(255,255,255,0.1); cursor: pointer; position: absolute; top: 0; left: 0; transition: height 0.1s;
}
.timeline-container:hover { height: 6px; }
/* Isi warna Merah berjalannya timeline */
.timeline-fill {
  height: 100%; width: 0%; background-color: #ff0000; position: relative;
}

.audio-bar-content {
  display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; flex: 1;
}
.control-left-buttons { display: flex; align-items: center; gap: 16px; }
/* ========================================================
   KUNCI PERBAIKAN: MEMAKSA TOMBOL PLAY TETAP BULAT DI HP
   ======================================================== */
.play-main {
  background: white !important;
  color: black !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important; /* Memaksa sudut melingkar sempurna */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  
  /* KUNCI UTAMA ANTI-GEPENG: Melarang browser menyusutkan lebar tombol di HP */
  flex-shrink: 0 !important; 
  
  /* Menghindari bentrok aspect ratio */
  aspect-ratio: 1 / 1 !important; 
}

.time-display { font-size: 12px; color: #aaa; margin-left: 8px; }
.control-center-meta h5 { margin: 0 0 2px 0; font-size: 14px; color: white; text-align: center;}
.control-center-meta p { margin: 0; font-size: 12px; color: #aaa; text-align: center;}
.control-right-features { display: flex; gap: 16px; }
.ctrl-btn { background: none; border: none; color: white; cursor: pointer; font-size: 16px; }

/* CONTAINER UTAMA */
.ytm-player-container {
  background-color: #030303; color: #ffffff; font-family: Arial, sans-serif;
  height: 100vh; display: flex; flex-direction: column; overflow: hidden;
}

/* SIDEBAR DESKTOP (BAWAAN LEBAR) */
.ytm-sidebar {
  width: 240px; padding: 16px; border-right: 1px solid #1f1f1f; 
  display: flex; flex-direction: column; background-color: #030303;
  transition: width 0.2s ease-in-out, padding 0.2s ease-in-out;
  overflow: hidden;
}

/* MODE DESKTOP MINIMALIS (KETIKA BURGER DIKLIK DI DESKTOP) */
.ytm-sidebar.mini-sidebar {
  width: 72px;
  padding: 16px 8px;
  align-items: center;
}
.ytm-sidebar.mini-sidebar .nav-text,
.ytm-sidebar.mini-sidebar .social-title,
.ytm-sidebar.mini-sidebar .social-btn {
  display: none !important; /* Sembunyikan teks, sisa icon saja */
}
.ytm-sidebar.mini-sidebar .menu-item {
  justify-content: center;
  width: 100%;
  padding: 12px 0;
}
.ytm-sidebar.mini-sidebar .sidebar-divider {
  width: 100%;
}

/* RESPONSIVITAS KHUSUS MODE HP */
@media (max-width: 768px) {
  /* Di HP, paksa sidebar sembunyi ke luar layar kiri secara default */
  .ytm-sidebar {
    position: fixed !important;
    top: 64px;
    left: -260px; /* Sembunyi total */
    width: 240px !important;
    height: calc(100vh - 144px);
    z-index: 99999;
    box-shadow: 10px 0 20px rgba(0,0,0,0.6);
    transition: left 0.3s ease-in-out !important;
    padding: 16px !important;
  }

  /* Di HP, pastikan teks menu selalu siap muncul saat sidebar digeser masuk */
  .ytm-sidebar .nav-text, 
  .ytm-sidebar .social-title, 
  .ytm-sidebar .social-btn {
    display: block !important;
  }
  .ytm-sidebar .menu-item {
    justify-content: flex-start !important;
    padding: 12px 16px !important;
  }

  /* KETIKA BURGER DIKLIK DI HP, SIDEBAR BERGESER MASUK */
  .ytm-sidebar.active-hp-menu {
    left: 0 !important;
  }

  /* Sembunyikan tracklist di HP biar fokus player video tengah */
  .player-right-sidebar { 
    display: none !important; 
  }
}


/* GAYA UNTUK GRID ALBUM LIST KANAN BAWAH */
.album-selection-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  max-height: 200px; /* Batasi tinggi agar tidak merusak sticky footer */
  overflow-y: auto;
  padding-bottom: 8px;
}

.album-row {
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.album-row:hover, .album-row.active-album {
  background: rgba(255, 255, 255, 0.08);
  border-color: #ff0000;
}

.album-details {
  flex: 1;
  margin-left: 12px;
}

.album-details h4 {
  margin: 0 0 2px 0;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
}

.album-details p {
  margin: 0;
  font-size: 11px;
  color: #888888;
}

.album-type-badge {
  font-size: 10px;
  background-color: #1f1f1f;
  color: #aaa;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

/* ========================================================
   KUNCI PERBAIKAN: INTERFACE SCROLLBAR INDAH & MODERN UI
   ======================================================== */

/* Desain Scrollbar untuk List Lagu (Kanan Atas) & List Album (Kanan Bawah) */
.queue-list::-webkit-scrollbar, 
.album-selection-grid::-webkit-scrollbar {
  width: 6px; /* Super tipis dan minimalis */
}

/* Base track scrollbar dibuat transparan pekat */
.queue-list::-webkit-scrollbar-track, 
.album-selection-grid::-webkit-scrollbar-track {
  background: transparent; 
}

/* Batang scrollbar melengkung abu-abu transparan khas YT Music */
.queue-list::-webkit-scrollbar-thumb, 
.album-selection-grid::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.15); 
  border-radius: 10px;
  transition: background-color 0.2s;
}

/* Ketika di-hover, batang scrollbar sedikit lebih terang */
.queue-list::-webkit-scrollbar-thumb:hover, 
.album-selection-grid::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.3); 
}

/* Pastikan tombol play-main di bawah flexbox-nya rapi untuk icon baru */
.play-main {
  background: white !important;
  color: black !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: transform 0.1s;
}
.play-main:hover {
  transform: scale(1.05); /* Efek membesar dikit pas di-hover mouse */
}
.play-main svg {
  width: 20px;
  height: 20px;
  fill: #000000;
}

/* ========================================================
   KUNCI PERBAIKAN: RESPONSIVE LAYOUT HP (TRACK & ALBUM LIST AKAN COCOK KE BAWAH)
   ======================================================== */
@media (max-width: 768px) {
  /* 1. Paksa Body Utama jadi satu kolom vertikal di HP */
  .ytm-main-body {
    flex-direction: column !important;
    overflow-y: auto !important; /* Izinkan seluruh halaman tengah di-scroll ke bawah di HP */
  }

  /* 2. Sembunyikan Sidebar Kiri bawaan ke luar layar (Bisa digeser masuk via burger menu) */
  .ytm-sidebar {
    position: fixed !important;
    top: 64px;
    left: -260px; /* Sembunyi total */
    width: 240px !important;
    height: calc(100vh - 144px);
    z-index: 99999;
    box-shadow: 10px 0 20px rgba(0,0,0,0.6);
    transition: left 0.3s ease-in-out !important;
    padding: 16px !important;
  }
  .ytm-sidebar.active-hp-menu {
    left: 0 !important; /* Geser masuk saat burger menu diklik */
  }

  /* 3. Atur Kontainer Workspace (Tengah + Kanan) jadi vertikal */
  .ytm-player-workspace {
    flex-direction: column !important;
    overflow-y: visible !important; /* Matikan scroll internal workspace di HP */
    flex: none !important;
    width: 100%;
  }

  /* 4. Sesuaikan ukuran pemutar video YouTube di HP */
  .player-center-art {
    width: 100% !important;
    padding: 12px !important;
    flex: none !important;
  }
  .youtube-embed-wrapper {
    max-width: 100% !important;
    border-radius: 8px !important;
  }

  /* 5. MEMUNCULKAN KEMBALI PANEL KANAN DI HP (Meluncur ke Bawah Video) */
  .player-right-sidebar {
    width: 100% !important;
    border-left: none !important; /* Hapus garis pembatas kiri karena posisinya sudah di bawah */
    border-top: 1px solid #1f1f1f !important; /* Ganti jadi garis pembatas atas */
    padding: 16px !important;
    display: flex !important; /* Paksa muncul di HP */
    flex-direction: column !important;
    overflow: visible !important; /* Matikan scroll internal sidebar agar menyatu dengan scroll utama */
    flex: none !important;
  }

  /* 6. Atur batas tinggi daftar lagu & album di HP agar nyaman di-scroll */
  .queue-list {
    max-height: 250px !important; /* Batasi tinggi track list agar pas di layar HP */
    overflow-y: auto !important;
    margin-bottom: 16px;
  }
  .album-selection-grid {
    max-height: 220px !important; /* Batasi tinggi album list di HP */
    overflow-y: auto !important;
  }

  /* 7. Perkecil bar pencarian di header atas agar muat di HP */
  .search-box {
    width: 130px !important;
  }
}