/* Aplikasi YouTube Music (tema gelap) */

.ytm {
  background: #030303;
  color: #fff;
  --ytmsub: #aaa;
}
.ytm .av {
  width: 28px;
  height: 28px;
}

/* Header & chip */
.ytm-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 48px 14px 8px;
}
.ytm-head h2 {
  margin: 0;
  font-size: 24px;
}
.ytm-logo {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ytm-logo svg {
  width: 26px;
  height: 26px;
}
.ytm-logo b {
  font-size: 21px;
  letter-spacing: -0.5px;
}
.ytm-head-r {
  display: flex;
  align-items: center;
  gap: 18px;
}
.ytm-head-r button {
  color: #fff;
}
.ytm-head-r svg {
  width: 23px;
  height: 23px;
  display: block;
}
.ytm-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 14px 12px;
  scrollbar-width: none;
}
.ytm-chips::-webkit-scrollbar {
  display: none;
}
.ytm-chips button {
  flex: none;
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 14px;
}
.ytm-chips button.on {
  background: #fff;
  color: #000;
}

/* Bagian beranda */
.ytm-sec {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 14px 14px 10px;
}
.ytm-sec small {
  color: var(--ytmsub);
  font-size: 12px;
  letter-spacing: 0.5px;
}
.ytm-sec h3 {
  margin: 2px 0 0;
  font-size: 22px;
}
.ytm-sec button {
  height: 30px;
  padding: 0 12px;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-size: 13px;
}
.ytm-quick {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.ytm-quick::-webkit-scrollbar {
  display: none;
}
.ytm-col {
  flex: none;
  width: 86%;
  scroll-snap-align: start;
}
.ytm-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 14px;
  cursor: pointer;
}
.ytm-row img {
  width: 48px;
  height: 48px;
  border-radius: 4px;
  object-fit: cover;
  flex: none;
}
.ytm-row > div {
  flex: 1;
  min-width: 0;
}
.ytm-row b,
.ytm-row small {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ytm-row b {
  font-size: 15px;
  font-weight: 500;
}
.ytm-row small {
  color: var(--ytmsub);
  font-size: 13px;
}
.ytm-row.now b {
  color: #ff4e45;
}
.ytm-num {
  width: 18px;
  color: var(--ytmsub);
  text-align: center;
}
.ytm-dots {
  color: var(--ytmsub);
}
.ytm-dots svg {
  width: 20px;
  height: 20px;
}
.ytm-cards {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 0 14px 8px;
  scrollbar-width: none;
}
.ytm-cards::-webkit-scrollbar {
  display: none;
}
.ytm-card {
  flex: none;
  width: 150px;
  padding: 0;
  text-align: left;
  color: #fff;
}
.ytm-card img {
  width: 150px;
  height: 150px;
  border-radius: 6px;
  object-fit: cover;
}
.ytm-card b {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 500;
}
.ytm-card small {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--ytmsub);
  font-size: 12px;
}

/* Jelajahi & Koleksi */
.ytm-explore {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px 14px;
}
.ytm-explore button {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 52px;
  padding: 0 16px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
}
.ytm-moods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 14px 14px;
}
.ytm-moods button {
  height: 48px;
  padding: 0 12px;
  border-radius: 6px;
  border-left: 6px solid;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-weight: 500;
  text-align: left;
}
.ytm-libhead {
  padding: 6px 14px;
  font-size: 15px;
}

/* Samples */
.ytm-samples {
  flex: 1;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}
.ytm-samples::-webkit-scrollbar {
  display: none;
}
.ytm-sample {
  position: relative;
  height: 100%;
  scroll-snap-align: start;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.ytm-sblur {
  position: absolute;
  inset: -20px;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  object-fit: cover;
  filter: blur(30px) brightness(0.45);
}
.ytm-sart {
  position: relative;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.ytm-scap {
  position: relative;
  width: 78%;
  margin-top: 18px;
}
.ytm-scap b {
  display: block;
  font-size: 20px;
}
.ytm-scap small {
  color: var(--ytmsub);
}
.ytm-scap button {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  height: 36px;
  padding: 0 16px;
  border-radius: 18px;
  background: #fff;
  color: #000;
  font-weight: 600;
}
.ytm-scap svg {
  width: 18px;
  height: 18px;
}

/* Halaman playlist / mix */
.ytm-list {
  position: relative;
  padding-top: 44px;
}
.ytm-back {
  position: absolute;
  top: 50px;
  left: 10px;
  color: #fff;
}
.ytm-back svg {
  width: 24px;
  height: 24px;
}
.ytm-lhero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 20px 10px;
  text-align: center;
}
.ytm-lhero img {
  width: 200px;
  height: 200px;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  margin-bottom: 10px;
}
.ytm-lhero h2 {
  margin: 0;
  font-size: 24px;
}
.ytm-lhero small {
  color: var(--ytmsub);
  font-size: 13px;
}
.ytm-lbtns {
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 12px 0 4px;
}
.ytm-lbtns button {
  color: #fff;
}
.ytm-lbtns svg {
  width: 24px;
  height: 24px;
  display: block;
}
.ytm-bigplay {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  color: #000 !important;
  display: grid;
  place-items: center;
}

/* Mini player */
.ytm-mini {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: #212121;
  cursor: pointer;
}
.ytm-mbar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.15);
}
.ytm-mbar i,
.ytm-bar i {
  display: block;
  height: 100%;
  background: #fff;
}
.ytm-mini img {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  object-fit: cover;
}
.ytm-mini > div {
  flex: 1;
  min-width: 0;
}
.ytm-mini b,
.ytm-mini small {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ytm-mini b {
  font-size: 14px;
  font-weight: 500;
}
.ytm-mini small {
  color: var(--ytmsub);
  font-size: 12px;
}
.ytm-mini button {
  color: #fff;
}
.ytm-mini svg {
  width: 26px;
  height: 26px;
  display: block;
}

/* Pemutar layar penuh */
.ytm-full {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 44px 20px 0;
  overflow: hidden;
}
.ytm-fbg {
  position: absolute;
  inset: -40px;
  width: calc(100% + 80px);
  height: calc(100% + 80px);
  object-fit: cover;
  filter: blur(40px) brightness(0.35);
  z-index: 0;
}
.ytm-full > *:not(.ytm-fbg) {
  position: relative;
  z-index: 1;
}
.ytm-full header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 44px;
}
.ytm-full header button {
  color: #fff;
}
.ytm-full header svg {
  width: 24px;
  height: 24px;
  display: block;
}
.ytm-toggle {
  display: flex;
  padding: 3px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 14px;
}
.ytm-toggle b,
.ytm-toggle span {
  padding: 5px 16px;
  border-radius: 15px;
}
.ytm-toggle b {
  background: rgba(255, 255, 255, 0.2);
}
.ytm-fart {
  width: 100%;
  aspect-ratio: 1;
  max-height: 300px;
  object-fit: cover;
  border-radius: 8px;
  margin: 14px auto 18px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}
.ytm-ftitle h2 {
  margin: 0;
  font-size: 22px;
}
.ytm-ftitle small {
  color: var(--ytmsub);
  font-size: 15px;
}
.ytm-fchips {
  display: flex;
  gap: 8px;
  margin: 14px 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.ytm-fchips button {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 13px;
}
.ytm-fchips svg {
  width: 18px;
  height: 18px;
}
.ytm-bar {
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.25);
}
.ytm-seek span {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  color: var(--ytmsub);
}
.ytm-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0 14px;
}
.ytm-controls button {
  color: #fff;
}
.ytm-controls svg {
  width: 30px;
  height: 30px;
  display: block;
}
.ytm-pp {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #fff;
  color: #000 !important;
  display: grid;
  place-items: center;
}
.ytm-pp svg {
  width: 34px;
  height: 34px;
}
.ytm-ptabs {
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.ytm-ptabs button {
  padding: 10px 6px;
  color: var(--ytmsub);
  font-size: 13px;
  font-weight: 600;
}
.ytm-ptabs button.on {
  color: #fff;
  box-shadow: inset 0 -2px 0 #fff;
}
.ytm-panel {
  flex: 1;
  overflow-y: auto;
  margin: 0 -20px;
  padding: 8px 0 30px;
  scrollbar-width: none;
}
.ytm-panel .ytm-cards {
  padding-top: 8px;
}
.ytm-lyrics {
  padding: 8px 20px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
}

/* Navigasi bawah */
.ytm-nav {
  flex: none;
  display: flex;
  justify-content: space-around;
  padding: 6px 4px 26px;
  background: #212121;
  border-top: 1px solid #2a2a2a;
}
.ytm-nav button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--ytmsub);
  font-size: 10px;
}
.ytm-nav button.on {
  color: #fff;
}
.ytm-nav svg {
  width: 24px;
  height: 24px;
}