/* =====================================================================
   DAFTAR LAGU
   ---------------------------------------------------------------------
   Dimuat setelah site.css. Pemutar bawaan browser (.pl-native) tampil
   apa adanya sampai JavaScript mengambil alih — jadi tanpa JavaScript
   halamannya tetap bisa didengarkan.
   ===================================================================== */

.playlist{width:100%}

.pl-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}

.pl-item{
  display:flex;align-items:center;gap:13px;
  padding:12px 14px;
  background:var(--card);border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--shadow-sm);
  transition:border-color .2s ease,transform .2s ease;
}
.pl-item:hover{transform:translateY(-2px)}
.pl-item.is-on{
  border-color:color-mix(in srgb,var(--accent) 55%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 13%,transparent);
}

/* --------------------------------------------------------------
   Tombol putar tiap lagu
   -------------------------------------------------------------- */
.pl-play{
  flex:0 0 auto;width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;border:0;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 34%,transparent);
  transition:transform .18s ease;
}
.pl-play:hover{transform:scale(1.07)}

/* Segitiga "putar" */
.pl-ico{
  width:0;height:0;margin-left:3px;
  border-left:12px solid #fff;
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
}
/* Dua batang "jeda" */
.is-playing .pl-ico{
  margin-left:0;width:11px;height:13px;border:0;
  background:linear-gradient(90deg,#fff 0 3.5px,transparent 3.5px 7.5px,#fff 7.5px 11px);
}

.pl-ico-static{
  flex:0 0 auto;width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;font-size:1.15rem;
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  color:var(--accent);
}

.pl-meta{flex:1;min-width:0;display:block}
.pl-meta strong{
  display:block;font-size:.96rem;line-height:1.3;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pl-meta small{
  display:block;margin-top:2px;font-size:.78rem;color:var(--ink-soft);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* Batang bergoyang di lagu yang sedang diputar */
.pl-bars{display:none;align-items:flex-end;gap:3px;height:20px}
.pl-item.is-on .pl-bars{display:flex}
.pl-bars i{width:3px;border-radius:2px;background:var(--accent);height:18px;
  transform-origin:bottom;transform:scaleY(.28);opacity:.5}
.pl-item.is-on.is-playing .pl-bars i{opacity:.95;animation:plWave .85s ease-in-out infinite}
.pl-item.is-on.is-playing .pl-bars i:nth-child(2){animation-delay:.16s}
.pl-item.is-on.is-playing .pl-bars i:nth-child(3){animation-delay:.32s}
/* scaleY, bukan height: menganimasikan height memicu layout ulang tiap
   frame untuk tiap batang di tiap lagu. Tampilannya identik. */
@keyframes plWave{0%,100%{transform:scaleY(.28)}50%{transform:scaleY(1)}}

/* Pemutar bawaan browser — disembunyikan begitu JavaScript siap */
.pl-native{width:100%;max-width:230px;height:36px}
.playlist.is-live .pl-native{display:none}
.playlist:not(.is-live) .pl-play,
.playlist:not(.is-live) .pl-bars{display:none}

/* --------------------------------------------------------------
   Lagu sematan (Spotify / YouTube Music)
   -------------------------------------------------------------- */
.pl-item.is-embed,.pl-item.is-link{display:block;padding:0;overflow:hidden}
.pl-fold summary{
  display:flex;align-items:center;gap:13px;
  padding:12px 14px;cursor:pointer;list-style:none;
}
.pl-fold summary::-webkit-details-marker{display:none}
.pl-fold summary::after{
  content:"▾";margin-left:auto;color:var(--accent);
  font-size:.9rem;transition:transform .22s ease;
}
.pl-fold[open] summary::after{transform:rotate(180deg)}
.pl-frame{padding:0 12px 12px}
.pl-frame iframe{
  width:100%;height:var(--h,152px);border:0;border-radius:12px;
  background:color-mix(in srgb,var(--accent) 7%,transparent);
}

.pl-open{
  display:flex;align-items:center;gap:13px;
  padding:12px 14px;text-decoration:none;color:inherit;
}

/* --------------------------------------------------------------
   Panel "sedang diputar"
   -------------------------------------------------------------- */
.pl-now{
  display:flex;align-items:center;gap:14px;
  margin-bottom:16px;padding:14px 16px;
  border-radius:20px;
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--accent) 13%,var(--card)),
    color-mix(in srgb,var(--accent2) 13%,var(--card)));
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
}
.pl-big{
  flex:0 0 auto;width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;border:0;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 40%,transparent);
  transition:transform .18s ease;
}
.pl-big:hover{transform:scale(1.06)}
.pl-big .pl-ico{border-left-width:15px;border-top-width:10px;border-bottom-width:10px;margin-left:4px}
.pl-now.is-playing .pl-big .pl-ico{margin-left:0;width:14px;height:17px;
  background:linear-gradient(90deg,#fff 0 4.5px,transparent 4.5px 9.5px,#fff 9.5px 14px)}

.pl-now-body{flex:1;min-width:0}
.pl-now-body strong{
  display:block;font-size:.98rem;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pl-seek{display:flex;align-items:center;gap:10px;margin-top:6px}
.pl-seek input[type="range"]{
  flex:1;min-width:0;height:4px;-webkit-appearance:none;appearance:none;
  background:color-mix(in srgb,var(--accent) 24%,transparent);
  border-radius:2px;outline:none;cursor:pointer;
}
.pl-seek input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;width:13px;height:13px;border-radius:50%;
  background:var(--accent);border:2px solid var(--card);
  box-shadow:0 1px 4px rgba(90,40,60,.3);
}
.pl-seek input[type="range"]::-moz-range-thumb{
  width:13px;height:13px;border-radius:50%;border:2px solid var(--card);
  background:var(--accent);
}
.pl-time{font-size:.74rem;color:var(--ink-soft);white-space:nowrap;font-variant-numeric:tabular-nums}

.pl-skip{display:flex;gap:6px}
.pl-skip button{
  width:36px;height:36px;border-radius:50%;cursor:pointer;
  border:1px solid var(--line);background:var(--card);
  color:var(--accent);font-size:.8rem;line-height:1;
  transition:background .18s ease;
}
.pl-skip button:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.pl-skip button:disabled{opacity:.35;cursor:default}

@media (max-width:430px){
  .pl-now{flex-wrap:wrap}
  .pl-now-body{order:3;flex-basis:100%}
}

@media (prefers-reduced-motion: reduce){
  .pl-item,.pl-play,.pl-big{transition:none}
  .pl-bars i{animation:none !important}
}