:root{
  --bg-1:#061123; --bg-2:#04101a; --muted:#9aa4b2; --accent:#19d1b6;
  --glass:rgba(255,255,255,0.04); --card-radius:12px; --focus:#19d1b6;
  --tooltip-bg:#d40000;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color-scheme: dark;
}

/* base */
*{ box-sizing:border-box }
body{
  margin:0; display:flex; flex-direction:column; min-height:100vh; color:#eaf2ff;
  background:
    radial-gradient(600px 300px at 10% 10%, rgba(99,102,241,0.03), transparent 8%),
    linear-gradient(180deg,var(--bg-1) 0%, var(--bg-2) 100%);
}
.container{ width:100%; max-width:1100px; margin:0 auto; padding:20px }
a{ color:inherit }

/* focus */
.btn-follow:focus,.pill:focus,.btn-preview:focus,.btn-detail:focus,.tb-link:focus{
  outline:2px solid var(--focus); outline-offset:2px;
}

/* sticky header */
.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(160%) blur(10px);
  background:linear-gradient(180deg, rgba(6,17,35,.9), rgba(6,17,35,.75));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.tb-inner{
  max-width:1100px; margin:0 auto; height:56px; padding:0 12px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.brand{ text-decoration:none; display:inline-flex; align-items:center }
.brand-text{
  font-weight:900; font-size:18px; letter-spacing:.6px;
  background:linear-gradient(90deg, #8ec5ff 0%, #ffffff 50%, #bfe1ff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.tb-nav{
  display:flex; gap:10px; align-items:center; overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.tb-nav::-webkit-scrollbar{ display:none }
.tb-link{
  text-decoration:none; font-weight:700; font-size:14px; white-space:nowrap;
  color:#eaf2ff; padding:8px 10px; border-radius:8px;
  transition:background .2s ease, transform .08s ease;
}
.tb-link:hover{ background:rgba(255,255,255,.06); transform:translateY(-1px) }

/* hero (card) */
.hero{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  padding:18px; border-radius:14px; border:1px solid rgba(255,255,255,.03);
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 12px 40px rgba(0,0,0,.45);
}
.avatar{
  width:140px; height:140px; border-radius:50%;
  background-size:cover; background-position:center; margin-bottom:10px;
  box-shadow:0 0 0 3px rgba(255,255,255,.06) inset;
}
.artist-name{
  font-size:22px; font-weight:900; margin:0;
  background:linear-gradient(90deg,#cfe9ff 0%, #8ff2dd 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.artist-role{ color:var(--muted); font-weight:700; font-size:12px; margin:4px 0 6px }
.bio{ color:var(--muted); font-size:14px; line-height:1.5; margin:0 0 12px }

/* follow */
.follow-wrap{ display:flex; flex-direction:column; align-items:center; gap:8px; width:100%; max-width:700px; margin:8px auto 0 }
.follow-title{ font-weight:800; font-size:14px; letter-spacing:.2px }

/* satu baris (ikon-only bulat) */
#followActions{
  display:grid;
  grid-auto-flow:column;           /* selalu satu baris */
  grid-auto-columns:max-content;   /* selebar ikon */
  justify-content:center;
  gap:10px;
  width:100%;
  overflow-x:auto; -webkit-overflow-scrolling:touch; padding:0 4px 4px;
}
.btn-follow{
  width:48px; height:48px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.06);
  background:var(--glass); color:#fff; text-decoration:none;
  box-shadow:0 6px 14px rgba(0,0,0,.35);
  transition:background .25s ease, transform .08s ease, box-shadow .25s ease;
}
.btn-follow svg{ width:22px; height:22px; fill:#fff }
.btn-follow:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(0,0,0,.45) }
.btn-follow.bg-yt{ background:#FF0000 }
.btn-follow.bg-ig{
  background:radial-gradient(120% 120% at 30% 10%, #FEDA75 0%, #FA7E1E 35%, #D62976 60%, #962FBF 80%, #4F5BD5 100%)
}
.btn-follow.bg-tt{ background:#000 }

/* songs grid */
.songs{ display:grid; grid-template-columns:1fr; gap:14px; margin-top:18px }
@media (min-width:900px){ .songs{ grid-template-columns:repeat(2,minmax(0,1fr)) } }

/* song card */
.song{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  padding:12px; border-radius:12px; border:1px solid rgba(255,255,255,.03);
  display:grid; grid-template-columns:120px 1fr; column-gap:12px; row-gap:12px;
  position:relative; overflow:hidden;
  content-visibility:auto; contain-intrinsic-size:180px 140px;
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.38);
  transition:transform .08s ease, box-shadow .25s ease;
}
.song:hover{ transform:translateY(-1px); box-shadow:0 0 0 1px rgba(255,255,255,.1), 0 12px 24px rgba(0,0,0,.42) }

/* left */
.art-left{
  grid-column:1; grid-row:1; display:flex; flex-direction:column; gap:6px;
  align-items:center; justify-content:flex-start;
}
.thumb{
  width:120px; height:120px; border-radius:10px; background-size:cover; background-position:center;
  position:relative; overflow:hidden; background-color:#0b1a2e; opacity:0; transition:opacity .4s ease;
}
.thumb::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.06) 45%, rgba(255,255,255,0) 80%);
  transform:translateX(-100%); animation:shimmer 1.2s infinite linear;
}
.thumb.is-loaded{ opacity:1 } .thumb.is-loaded::before{ content:none }
@keyframes shimmer{ 0%{ transform:translateX(-100%) } 100%{ transform:translateX(100%) } }

.coming-soon{
  position:absolute; inset:0; background:rgba(0,0,0,.6);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:bold; color:#fff; border-radius:10px;
}
.song-sub-left{
  color:var(--muted); font-size:12px; text-align:center; line-height:1.25;
  width:100%; max-width:120px; margin-top:2px;
}

/* right */
.song-info{ grid-column:2; grid-row:1; display:flex; flex-direction:column; gap:8px; min-width:0 }
.song-title{
  font-weight:900;
  font-size:clamp(19px, 4.2vw, 23px);
  margin:0;
  color:#eaf7ff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.song-credits{ color:#d6e3ff; font-size:13px }
.song-date{ color:var(--muted); font-size:12px; font-style:italic }

/* CTA row */
.cta-row{ display:flex; gap:8px; margin-top:4px }
.btn-preview{
  flex:0 0 auto; height:40px; min-width:48px; padding:0 12px; border-radius:8px; border:none; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; font-weight:900; font-size:18px;
  background:var(--accent); color:#04101a; box-shadow:0 6px 16px rgba(0,0,0,.35);
  transition:background .25s ease, color .25s ease, transform .05s ease;
}
.btn-preview:hover{ background:#14b29a } .btn-preview:active{ transform:translateY(1px) }
.btn-preview.playing{ background:#D40000; color:#fff }
.btn-detail{
  flex:1 1 auto; height:40px; display:inline-flex; align-items:center; justify-content:center;
  text-align:center; background:var(--accent); color:#04101a; font-weight:800; font-size:14px; padding:0 14px;
  border-radius:8px; text-decoration:none; box-shadow:0 6px 14px rgba(0,0,0,.35);
  transition:background .25s ease, transform .05s ease, box-shadow .25s ease;
}
.btn-detail:hover{ background:#14b29a; transform:translateY(-1px); box-shadow:0 10px 22px rgba(0,0,0,.45) }

/* bottom */
.song-bottom{
  grid-column:1 / -1; grid-row:2; display:flex; flex-direction:column; align-items:center; gap:8px;
  border-top:1px solid rgba(255,255,255,.06); padding-top:10px;
}
.platform-label{ color:var(--muted); font-size:12px; font-weight:700; letter-spacing:.2px; text-align:center }

/* platform buttons */
.platforms{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center }
@media (min-width:900px){ .platforms{ gap:10px } }

.pill{
  position:relative; height:36px; min-width:40px; padding:0 10px;
  border-radius:10px; display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none; border:1px solid rgba(255,255,255,.06); box-shadow:0 6px 14px rgba(0,0,0,.35);
  transition: transform .1s ease, background .25s ease, box-shadow .25s ease;
  gap:6px;
}
.pill svg{ width:18px; height:18px; fill:#fff }
.pill img{ width:18px; height:18px; display:block; object-fit:contain; object-position:center } /* joox */
.pill:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(0,0,0,.45) }
.pill-label{ font-size:10px; line-height:1; color:#fff; font-weight:700; white-space:nowrap }

/* YouTube Music: lebar responsif */
.pill.ytmusic{ min-width:auto; padding:0 8px }

/* Mobile label overrides */
@media (max-width: 899px){
  .pill.ytmusic .pill-label{ font-size:0; line-height:0 }
  .pill.ytmusic .pill-label::after{ content:"YT Music"; font-size:10px; line-height:1; color:#fff }
  .pill.apple .pill-label{ font-size:0; line-height:0 }
  .pill.apple .pill-label::after{ content:"Music"; font-size:10px; line-height:1; color:#fff }
}

/* tooltip */
.pill::after{
  content: attr(data-tip);
  position:absolute; bottom:calc(100% + 8px); left:50%; transform:translate(-50%,6px);
  opacity:0; pointer-events:none; background:var(--tooltip-bg); color:#fff;
  padding:6px 10px; font-size:12px; border-radius:8px; white-space:nowrap; box-shadow:0 6px 20px rgba(0,0,0,.35);
  transition:opacity .15s ease, transform .15s ease;
}
.pill::before{
  content:""; position:absolute; bottom:100%; left:50%; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:var(--tooltip-bg); opacity:0; transition:opacity .15s ease;
}
.pill:hover::after,.pill:focus-visible::after{ opacity:1; transform:translate(-50%,0) }
.pill:hover::before,.pill:focus-visible::before{ opacity:1 }

/* brand backgrounds */
.pill.ytmusic{ background:#FF0000 }
.pill.spotify{ background:#1DB954 }
.pill.apple{ background:linear-gradient(135deg,#ff2d55 0%,#ff3b7f 48%,#ff6bd6 100%); border-color:rgba(255,255,255,.08) }
.pill.joox{ background:#31C27C }

/* footer */
.site-footer{
  margin-top:auto; padding:18px 20px; border-top:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  text-align:center;
}
.foot-inner{
  max-width:1100px; margin:0 auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  color: var(--muted); font-size:13px;
}
.foot-links{ display:flex; align-items:center; gap:8px; justify-content:center }
.foot-links a{ color:#eaf2ff; text-decoration:none }
.foot-links a:hover{ text-decoration:underline }

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .thumb{ transition:none } .thumb::before{ animation:none }
  .song,.pill,.btn-detail,.btn-follow,.btn-preview,.tb-link{ transition:none }
}

/* anchor offset for sticky header */
section[id], main[id]{ scroll-margin-top:72px }
@media (max-width:560px){ section[id], main[id]{ scroll-margin-top:64px } }

/* mobile tweaks */
@media (max-width:560px){
  .container{ padding:14px }
  .tb-inner{ height:54px; padding:0 10px }
  .brand-text{ font-size:16px }
  .tb-link{ font-size:13px; padding:6px 8px }
  .song{ grid-template-columns:100px 1fr }
  .thumb{ width:100px; height:100px }
  .song-sub-left{ max-width:100px; width:100%; text-align:center }
  #followActions{ gap:8px }
}