/* ============================
   SKY BAND — site.css (clean)
   ============================ */

/* Theme & base */
:root{
  --bg:#0b1220;
  --muted:#9aa4b2;
  --accent:#19d1b6;
  --card:#0f172a;
  --border:rgba(255,255,255,.12);
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --header-h:60px;

  /* Brand colors */
  --spotify:#1db954; --youtube:#ff0000; --ytmusic:#e62117;
  --apple:#ff6ab2;   --joox:#00d26a;
  --itunes:#ff2d55;  --amazon:#ff9900; --amazonmusic:#146ff8;
  --pandora:#005483; --deezer:#0dcaf0; --tidal:#0dd3ff;

  /* Action button gradients */
  --btn-grad-1:#0ea5e9; /* sky */
  --btn-grad-2:#6366f1; /* indigo */
  --btn-grad-3:#7c3aed; /* violet */

  color-scheme: dark;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
}

*{ box-sizing:border-box }
html,body{ height:100% }

body{
  margin:0; color:#e6edf3; background:var(--bg);
  padding-top:var(--header-h);
  min-height:100vh; display:flex; flex-direction:column;
}

#app{ flex:1 0 auto }

/* === Spasi nyaman antara konten & footer khusus beranda (home) === */
body[data-page="songs"] #app{
  padding-bottom: clamp(48px, 8vw, 96px);
}

img{ max-width:100%; height:auto; display:block }
.container{ width:min(1100px,92%); margin:0 auto }

/* ============================
   Header & Nav (hamburger → dropdown kanan)
   ============================ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:1000;
  height:var(--header-h); background:var(--bg); border-bottom:1px solid var(--border);
}
.nav{
  height:100%; display:flex; align-items:center; justify-content:space-between; position:relative;
}
.brand{ display:flex; gap:10px; align-items:center; text-decoration:none; color:#fff }
.brand-avatar{ width:36px; height:36px; border-radius:50%; object-fit:cover }
.brand-name{ font-weight:700 }

.menu{ display:flex; gap:14px }
.menu-link{
  color:#d0d6dd; text-decoration:none; padding:8px 10px; border-radius:10px;
}
.menu-link:hover, .menu-link.active{ color:#fff; background:rgba(255,255,255,.07) }

.menu-toggle{
  display:none; align-items:center; gap:8px; padding:8px 12px;
  background:#162036; color:#fff; border:1px solid var(--border); border-radius:10px; cursor:pointer;
}
.menu-toggle:hover{ filter:brightness(1.08) }

@media (max-width:900px){
  .menu-toggle{ display:inline-flex }
  .menu{
    position:absolute; top:calc(100% + 8px); right:0; left:auto;
    display:none; flex-direction:column; gap:6px; padding:10px;
    background:var(--bg); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow);
    width:max-content; min-width:180px; z-index:1001;
  }
  body.nav-open .menu{ display:flex }
  .menu-link{ text-align:left }
}

/* ============================
   Tooltip & Toast (untuk notifikasi/aksesibilitas)
   ============================ */
.tip{ position:relative }
.tip:focus-visible{ outline:2px solid #D40000; outline-offset:2px; border-radius:10px }
.tip::after{
  content: attr(data-tip);
  position:absolute; left:50%; bottom:calc(100% + 6px); transform:translate(-50%,8px);
  background:#D40000; color:#fff; font-size:12px; font-weight:600;
  padding:6px 10px; border-radius:8px; opacity:0; pointer-events:none; transition:.2s;
  box-shadow:0 6px 16px rgba(0,0,0,.35); white-space:nowrap; z-index:1001;
}
.tip:hover::after,.tip:focus-visible::after{ opacity:1; transform:translate(-50%,0) }

.toast{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(10px);
  background:#0f172a; border:1px solid var(--border); color:#fff; padding:8px 12px; border-radius:8px;
  opacity:0; transition:all .25s ease; z-index:1200;
}
.toast.on{ opacity:1; transform:translateX(-50%) translateY(0) }

/* ============================
   Hero (profil)
   ============================ */
.hero-card{ padding:22px 0 10px }
.hero-box{
  margin:0 auto; padding:22px 20px; width:100%;
  background:var(--card); border:1px solid var(--border); border-radius:16px; text-align:center; box-shadow:var(--shadow);
}
.hero-avatar{ width:120px; height:120px; border-radius:999px; object-fit:cover; margin:8px auto 10px; border:3px solid rgba(255,255,255,.15)}
.hero-name{ margin:0 0 4px 0; font-size:24px; letter-spacing:.06em; color:#fff }
.hero-role{ color:#cdd7e3; font-weight:600; margin-bottom:6px }
.hero-bio{ color:#9fb1bf; margin:4px auto 12px; max-width:680px }

.hero-follow{ font-weight:700; margin:4px 0 8px }
.hero-actions{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap }
.btn.follow{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:32px; padding:0 12px; border-radius:999px;
  font-size:12px; font-weight:700; text-decoration:none; color:#fff;
  border:1px solid var(--border); transition:filter .15s ease;
}
.btn.follow:hover{ filter:brightness(1.08) }
.btn.follow.sp{ background:var(--spotify); color:#0a0a0a; border-color:transparent }
.btn.follow.yt{ background:var(--youtube) }
.btn.follow.jx{ background:var(--joox); color:#0a0a0a; border-color:transparent }

/* Share (di hero bila dipakai) */
.btn-share{
  margin-top:10px; display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:12px; border:1px solid var(--border);
  background:#162036; color:#fff; cursor:pointer; transition:filter .15s ease;
}
.btn-share:hover{ filter:brightness(1.07) }

/* ============================
   Song list / detail card
   ============================ */
.song-list-grid{ display:grid; gap:16px }
@media (min-width:980px){ .song-list-grid{ grid-template-columns: 1fr 1fr } }

.song-item{
  display:grid; grid-template-columns:110px 1fr; gap:16px;
  background:var(--card); border:1px solid var(--border); border-radius:16px; padding:14px; box-shadow:var(--shadow);
  align-items:flex-start;
}
.col-left{ display:flex; flex-direction:column; align-items:center }
.cover-wrap{ position:relative; width:110px }
.cover{ width:110px; height:110px; aspect-ratio:1/1; object-fit:cover; border-radius:12px }
.coming{
  position:absolute; left:8px; top:8px; background:#0009; padding:6px 10px; border-radius:10px; font-size:12px; border:1px solid rgba(255,255,255,.2)
}
.artist{ margin-top:8px; font-size:12px; color:#a9b6c6; text-align:center; width:100% }

.col-right{ min-width:0 }
.head{ display:flex; align-items:center; gap:10px }
.title{ margin:0; font-size:22px; font-weight:900; color:var(--accent); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.meta-line{ color:#cfd7e3; font-size:13px; margin:6px 0 0 }

/* Actions (preview/detail/share/copy) */
.actions{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:10px }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; border-radius:999px; transition:filter .15s ease, transform .08s ease }
.btn:active{ transform:translateY(1px) }

.btn.preview-btn-inline{
  font-size:12px; padding:8px 14px; cursor:pointer;
  background:var(--accent); color:#0a0a0a; border:1px solid transparent;
}
.btn.preview-btn-inline:hover{ filter:brightness(1.06) }
.btn.preview-btn-inline .icon-pause{ display:none }
.btn.preview-btn-inline.playing .icon-play{ display:none }
.btn.preview-btn-inline.playing .icon-pause{ display:inline }

.btn.detail{
  font-size:12px; padding:8px 16px;
  background:#162036; color:#fff; border:1px solid var(--border);
}
.btn.detail:hover{ filter:brightness(1.07) }

/* Share & Copy (senada, ukuran = tombol Preview) */
.actions .btn.share,
.actions .btn.copyurl{
  font-size:12px;
  padding:8px 14px;           /* samakan dengan preview */
  margin-left:8px;
  border-radius:999px; border:1px solid rgba(255,255,255,.12); color:#fff; font-weight:600;
  text-shadow:0 1px 0 rgba(0,0,0,.15);
  background:linear-gradient(135deg,var(--btn-grad-1),var(--btn-grad-2));
  box-shadow:0 8px 18px rgba(99,102,241,.35), inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .12s ease, box-shadow .18s ease, filter .18s ease;
}
.actions .btn.copyurl{ background:linear-gradient(135deg,var(--btn-grad-2),var(--btn-grad-3)) }
.actions .btn.share:hover,
.actions .btn.copyurl:hover{
  transform:translateY(-1px);
  filter:saturate(1.08) brightness(1.03);
  box-shadow:0 12px 28px rgba(99,102,241,.45), inset 0 1px 0 rgba(255,255,255,.2);
}
.actions .btn.share:active,
.actions .btn.copyurl:active{
  transform:translateY(0);
  box-shadow:0 6px 14px rgba(99,102,241,.30), inset 0 1px 0 rgba(255,255,255,.18);
}

/* Platform section */
.plat-full{
  grid-column:1 / -1;
  margin-top:10px; padding-top:10px;
  border-top:1px solid var(--border); text-align:center;
}
.plat-title{ color:#cdd7e3; font-size:14px; font-weight:700; margin-bottom:8px }
.coming-banner{
  display:inline-block; margin-bottom:8px; font-size:20px; font-weight:900; color:#ff4d4f;
  background:rgba(255,77,79,.12); padding:6px 12px; border-radius:10px; border:1px solid rgba(255,77,79,.35)
}
.plat-strip{ display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap }

.btn.platform{
  font-size:12px; font-weight:700; letter-spacing:.02em;
  padding:8px 12px; border:none; border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center; gap:6px; color:#fff;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.08);
  transition:filter .15s ease, transform .08s ease;
}
.btn.platform:hover{ filter:brightness(1.06) }
.btn.platform:active{ transform:translateY(1px) }
.btn.platform svg{ width:16px; height:16px }
.btn.platform .pimg{ width:16px; height:16px; border-radius:4px; object-fit:cover }
.btn.platform.spotify{ background:var(--spotify); color:#0a0a0a }
.btn.platform.youtube-music{ background:var(--ytmusic) }
.btn.platform.apple-music{ background:var(--apple) }
.btn.platform.joox{ background:var(--joox); color:#0a0a0a }
.btn.platform.itunes{ background:var(--itunes) }
.btn.platform.amazon{ background:var(--amazon); color:#0a0a0a }
.btn.platform.amazon-music{ background:var(--amazonmusic) }
.btn.platform.pandora{ background:var(--pandora) }
.btn.platform.deezer{ background:var(--deezer); color:#0a0a0a }
.btn.platform.tidal{ background:var(--tidal); color:#0a0a0a }

/* Back button (di bawah semua platform) */
.after-plat{ grid-column:1 / -1; margin-top:16px; text-align:center }
.btn.outline{
  padding:10px 14px; border-radius:999px; border:1px solid var(--border); background:transparent; color:#fff;
}
.btn.outline:hover{ background:rgba(255,255,255,.06) }

/* Breadcrumb (detail) */
.breadcrumb{ font-size:14px; color:#9fb1bf; padding-top:18px }
.breadcrumb .crumb{ color:#9fb1bf; text-decoration:none }
.breadcrumb .crumb.cur{ color:#fff }
.breadcrumb .sep{ margin:0 6px; opacity:.6 }

/* Listen description (di detail, bawah tombol preview) */
.listen-desc{
  margin:12px 0 0; padding:10px 12px; border-radius:10px;
  background:rgba(255,255,255,0.06); color:#D0D5DD;
  font-size:.95rem; line-height:1.6;
}

/* Audio player (preview) */
audio.preview-audio{ display:block; width:100%; margin-top:8px }

/* Tambah jarak ke platform strip bila dipakai di card detail */
.song-item .plat-full{ margin-top:16px }

/* ============================
   Floating buttons (WA + to-top)
   ============================ */
.float-btns{
  position:fixed; right:18px; bottom:18px; z-index:1200;
  display:flex; flex-direction:column; gap:12px;
}
.float-btns a, .float-btns button{
  width:44px; height:44px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center;
  border:none; cursor:pointer; box-shadow:0 10px 18px rgba(0,0,0,.35); transition:filter .15s ease, transform .08s ease;
}
.float-wa{ background:#25D366; color:#0a0a0a }
.float-wa:hover{ filter:brightness(1.06) }
.float-top{
  background:var(--accent); color:#0a0a0a;
  opacity:0; transform:translateY(8px); pointer-events:none; transition:.2s, filter .15s ease, transform .08s ease;
}
.float-top.on{ opacity:1; transform:none; pointer-events:auto }
.float-top:hover{ filter:brightness(1.06) }

/* ============================
   Footer (kompak & sticky)
   ============================ */
.site-footer{
  margin-top:auto;                          /* tetap sticky di bawah */
  padding:10px 0;                           /* dibuat kecil seperti header */
  border-top:1px solid var(--border);
  background:var(--bg);
  font-size:0.9rem;                         /* skala teks footer */
  line-height:1.3;
}
.site-footer .container{
  display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
}
.footer-grid{
  display:flex !important; flex-direction:column; align-items:center; gap:6px;
}
.f-links{
  display:flex; flex-direction:row; gap:12px; flex-wrap:wrap; justify-content:center;
}
.f-link{ color:#d0d6dd; text-decoration:none; font-size:0.85rem }
.f-link:hover{ color:#fff }
.f-text{ color:#9fb1bf; font-size:0.85rem; margin:0 }
.f-copy{ color:#8c96a5; font-size:12px }
.f-right, .f-title{ display:none !important }

/* ============================
   Doc pages (about/contact)
   ============================ */
.doc{ padding:28px 0 }
.doc h1{ margin:0 0 10px }

/* ============================
   Mobile tweaks
   ============================ */
@media (max-width:720px){
  .hero-box{ padding:18px }
  .hero-avatar{ width:90px; height:90px }
  .song-item{ grid-template-columns:1fr }
  .cover-wrap,.cover{ width:100%; height:auto }

  /* label pendek (YT music / Music) di mobile */
  .btn.platform .label[data-short]{ font-size:0 }
  .btn.platform .label[data-short]::after{ content: attr(data-short); font-size:11px }

  .btn.platform{ font-size:11px; padding:7px 10px }

  /* Footer makin rapat di mobile */
  .site-footer{ padding:8px 0 }
  .footer-grid{ gap:6px }
  .f-link, .f-text{ font-size:0.8rem }
  .f-copy{ font-size:11px }
}

/* ============================
   Accessibility: focus ring
   ============================ */
:focus-visible{
  outline:2px solid currentColor;
  outline-offset:2px;
}

/* ==== Mobile tweak (detail): Share & Copy lebih kecil + sejajar ==== */
@media (max-width:720px){
  [data-page="detail"] .actions{
    gap: 6px;
    flex-wrap: nowrap;          /* jangan turun ke baris baru */
  }
  [data-page="detail"] .actions .btn{ 
    flex: 0 1 auto;             /* boleh mengecil agar muat */
  }
  /* opsional: kecilkan sedikit juga tombol klip biar proporsional */
  [data-page="detail"] .actions .btn.preview-btn-inline{
    font-size: 12px;
    padding: 8px 12px;
  }
  /* kecilkan Share & Copy */
  [data-page="detail"] .actions .btn.share,
  [data-page="detail"] .actions .btn.copyurl{
    font-size: 11px;
    padding: 7px 10px;
    margin-left: 6px;
    box-shadow:
      0 6px 14px rgba(99,102,241,.30),
      inset 0 1px 0 rgba(255,255,255,.16);
  }
}