/**
 * NobarTV AI Search — Sitemap HTML ([nbt_html_sitemap])
 * Design: konsisten dengan search-widget.css (netral putih/abu, modern)
 */

.nbt-sitemap {
    --ns-accent:      #3b6ef8;
    --ns-accent-dark: #2451d4;
    --ns-accent-glow: rgba(59,110,248,.14);
    --ns-text:        #1a1f36;
    --ns-muted:       #94a3b8;
    --ns-border:      #e2e8f0;
    --ns-surface:     #f8fafc;
    --ns-font:        -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
    --ns-ease:        .18s cubic-bezier(.4,0,.2,1);

    font-family: var(--ns-font);
    color: var(--ns-text);
    max-width: 100%;
    box-sizing: border-box;
}

.nbt-sitemap *,
.nbt-sitemap *::before,
.nbt-sitemap *::after {
    box-sizing: border-box;
}

/* ── Tabs ─────────────────────────────────────────────────────────────── */
.nbt-sitemap__tabs {
    display: flex;
    gap: 8px;
    border-bottom: 1.5px solid var(--ns-border);
    margin-bottom: 20px;
}

.nbt-sitemap__tab {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -1.5px;
    padding: 10px 6px 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ns-muted);
    cursor: pointer;
    transition: color var(--ns-ease), border-color var(--ns-ease);
}

.nbt-sitemap__tab:hover {
    color: var(--ns-text);
}

.nbt-sitemap__tab.is-active {
    color: var(--ns-accent-dark);
    border-bottom-color: var(--ns-accent);
}

.nbt-sitemap__tab svg {
    flex: none;
    opacity: .85;
}

.nbt-sitemap__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--ns-surface);
    color: var(--ns-muted);
    font-size: 11.5px;
    font-weight: 700;
}

.nbt-sitemap__tab.is-active .nbt-sitemap__count {
    background: var(--ns-accent-glow);
    color: var(--ns-accent-dark);
}

/* ── Panels ───────────────────────────────────────────────────────────── */
.nbt-sitemap__panel {
    display: none;
}

.nbt-sitemap__panel.is-active {
    display: block;
    animation: nbtSitemapFade .2s ease;
}

@keyframes nbtSitemapFade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.nbt-sitemap__empty {
    color: var(--ns-muted);
    font-size: 14px;
    padding: 24px 0;
    text-align: center;
}

/* ── Alphabet quick-nav ──────────────────────────────────────────────── */
.nbt-sitemap__alpha-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px;
    margin-bottom: 20px;
    background: var(--ns-surface);
    border: 1px solid var(--ns-border);
    border-radius: 12px;
}

.nbt-sitemap__alpha-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--ns-border);
    color: var(--ns-text);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: background var(--ns-ease), border-color var(--ns-ease), color var(--ns-ease);
}

.nbt-sitemap__alpha-link:hover {
    background: var(--ns-accent);
    border-color: var(--ns-accent);
    color: #fff;
}

/* ── Groups (per-letter sections) ────────────────────────────────────────
   FIX: sebelumnya pakai CSS Grid (grid-template-columns) — Grid MENYAMAKAN
   tinggi tiap BARIS mengikuti kotak tertinggi di baris itu, jadi kotak yang
   isinya sedikit (mis. cuma 2 keyword) tetap memakan tinggi penuh sebaris
   dengan kotak lain yang isinya banyak → menyisakan ruang kosong besar di
   bawah kotak-kotak pendek.
   FIX: ganti ke CSS multi-column ("masonry" a-la Pinterest) — kotak dialirkan
   mengisi kolom dari atas ke bawah tanpa dipaksa sebaris, jadi kotak pendek
   di kolom berikutnya langsung "naik" mengisi ruang, tidak ada celah kosong. */
.nbt-sitemap__groups {
    column-width: 260px;
    column-gap: 18px;
}

.nbt-sitemap__group {
    scroll-margin-top: 90px;
    background: #fff;
    border: 1px solid var(--ns-border);
    border-radius: 14px;
    padding: 16px 18px 18px;
    margin: 0 0 18px;
    /* Cegah 1 kotak terpotong di antara 2 kolom (browser modern). */
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    /* Wajib untuk multi-column: tiap kotak jadi "block" mandiri di kolomnya. */
    display: inline-block;
    width: 100%;
}

.nbt-sitemap__letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    margin: 0 0 12px;
    border-radius: 9px;
    background: var(--ns-accent-glow);
    color: var(--ns-accent-dark);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .02em;
}

.nbt-sitemap__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nbt-sitemap__item a {
    display: block;
    color: var(--ns-text);
    font-size: 13.5px;
    line-height: 1.4;
    text-decoration: none;
    padding: 4px 0;
    border-bottom: 1px dashed transparent;
    transition: color var(--ns-ease), border-color var(--ns-ease);
}

.nbt-sitemap__item a:hover {
    color: var(--ns-accent-dark);
    border-color: var(--ns-accent-glow);
    text-decoration: none;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .nbt-sitemap__groups {
        column-width: 100%;
    }
    .nbt-sitemap__tab {
        font-size: 13.5px;
        padding: 8px 4px 10px;
    }
}