/* az.css — katalog A–Z: section KATALOG homepage + hub daftar /makna-lagu/ + /profil-artis/.
   Lahir dari review Denboy 9 Agu: .az-cols tadinya NOL css (list mentah), hub polos. */

/* ── Homepage: section KATALOG ── */
.az-cols {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 6px 18px;
}
.az-cols a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: var(--r-s);
  color: var(--text);
  font-size: var(--fs-card);
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
}
.az-cols a:hover {
  background: var(--surface);
  border-color: var(--line);
  color: var(--accent);
  text-decoration: none;
}
.az-artist {
  color: var(--muted);
  font-size: var(--fs-caption);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.az-artist::before { content: "·"; margin-right: 8px; color: var(--muted); }

.hub-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 18px;
}

/* ── Hub daftar (/makna-lagu/, /profil-artis/) ── */
/* Bar A–Z sticky (Denboy 24 Agu 2026, handoff FRESHNESS-CHART §4.1). Sebelumnya
   nav polos: klik huruf → terdampar di bawah, bar hurufnya ilang dari layar.
   SATU BARIS + scroll horizontal, BUKAN wrap: waktu masih wrap, barnya 204px di
   /profil-artis/ @390px (24% layar) — di-sticky-in apa adanya malah nutupin isi.
   Resep ini disamain sama .anchor-chips (song.css) biar dua bar sticky sitewide
   tampil identik. Bleed -20px ngelawan padding main.container. */
.az-index {
  position: sticky;
  top: var(--header-h);
  z-index: 30;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 26px -20px 6px;
  padding: 10px 20px;
  background: rgba(var(--bg-rgb), .94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(var(--text-rgb), .07);
  overflow-x: auto;
  scrollbar-width: none;
}
.az-index::-webkit-scrollbar { display: none; }
.az-index a { flex: 0 0 auto; }

.az-group { margin: 34px 0; }
/* Anchor huruf harus turun sebanyak header (sticky) + bar A–Z (sticky, 66px
   terukur) + napas — tanpa ini klik "Z" mendaratkan judul hurufnya PERSIS di
   balik dua bar itu. */
.az-letter {
  scroll-margin-top: calc(var(--header-h) + 80px);
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'Newsreader',Georgia,serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--accent-2);
  margin-bottom: 14px;
}
.az-letter::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.az-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
@media (max-width: 600px) {
  .az-items { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
}

/* ── Seragam direktori (Denboy 9 Agu malam): /makna-lagu/ + /profil-artis/
   dibentuk row 44px kayak /ost-anime/ (pola .track-row di anime.css) — tiga
   halaman direktori tampil identik. ── */
.hub-page .az-items,
.artist-index-page .az-items{display:flex;flex-direction:column;gap:0}
.hub-page .az-items .song-card{display:flex;align-items:center;gap:12px;background:transparent;border:0;border-bottom:1px solid rgba(var(--text-rgb),.06);border-radius:0;padding:11px 2px;box-shadow:none;transform:none}
.hub-page .az-items .song-card:hover{transform:none;border-color:rgba(var(--text-rgb),.06);background:color-mix(in srgb,var(--aura) 14%,transparent)}
.hub-page .az-items .song-card:last-child{border-bottom:0}
.hub-page .az-items .song-cover-wrap{flex:none;width:44px;height:44px;border-radius:var(--r-s);overflow:hidden;margin:0}
.hub-page .az-items .song-cover-wrap img{width:100%;height:100%;object-fit:cover}
.hub-page .az-items .song-card-body{flex:1;min-width:0;padding:0}
.hub-page .az-items .song-card-body strong{display:block;font-size:var(--fs-card);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hub-page .az-items .song-artist{display:block;font-size:var(--fs-caption);color:var(--muted)}
.hub-page .az-items .song-card-meta{display:none}
.hub-page .az-items .song-card-tag{flex:none;font-size:var(--fs-kicker);letter-spacing:.08em;color:var(--muted);border:1px solid var(--line);border-radius:var(--r-s);padding:4px 6px;background:transparent;order:3}
.artist-index-page .az-items .artist-card{display:flex;align-items:center;gap:12px;background:transparent;border:0;border-bottom:1px solid rgba(var(--text-rgb),.06);border-radius:0;padding:11px 2px;box-shadow:none;transform:none}
.artist-index-page .az-items .artist-card:hover{transform:none;background:color-mix(in srgb,var(--aura) 14%,transparent)}
.artist-index-page .az-items .artist-card:last-child{border-bottom:0}
.artist-index-page .az-items .artist-mark{flex:none;width:44px;height:44px;border-radius:50%;overflow:hidden;margin:0}
.artist-index-page .az-items .artist-mark img{width:100%;height:100%;object-fit:cover}
.artist-index-page .az-items .artist-card-copy{flex:1;min-width:0;padding:0}
.artist-index-page .az-items .artist-card-copy strong{display:block;font-size:var(--fs-card)}
.artist-index-page .az-items .artist-card-copy span,.artist-index-page .az-items .artist-card-copy small{display:block;font-size:var(--fs-caption);color:var(--muted)}