/* ==========================================================================
   Beranda Premium Refresh — Final cascade overlay
   --------------------------------------------------------------------------
   Tujuan: tampilan portal smart-governance yang clean, modern, ringan, dan
   profesional. Stylesheet ini SENGAJA dimuat paling akhir agar dapat
   menetralkan glow biru berlebihan, blur berat, dan ornamen dekoratif
   peninggalan stylesheet sebelumnya, TANPA harus menghapus file lama
   (resiko regresi minimal).

   Hanya berdampak pada body.sg-portal-page (homepage & subpages portal).
   Tidak menyentuh admin/dashboard back-office.
   ========================================================================== */

/* --------- Design tokens ------------------------------------------------- */
body.sg-portal-page {
    /* Shadow scale lembut — meniru govtech kelas nasional (sg.gov, gov.uk) */
    --bpr-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --bpr-shadow-sm: 0 2px 6px -2px rgba(15, 23, 42, 0.08);
    --bpr-shadow-md: 0 8px 22px -14px rgba(15, 23, 42, 0.18);
    --bpr-shadow-lg: 0 18px 38px -22px rgba(15, 23, 42, 0.22);

    /* Border tipis modern */
    --bpr-border-hairline: rgba(15, 23, 42, 0.06);
    --bpr-border-soft: rgba(15, 23, 42, 0.08);
    --bpr-border-firm: rgba(15, 23, 42, 0.12);

    /* Surface */
    --bpr-surface: #ffffff;
    --bpr-surface-muted: #fbfcfe;
    --bpr-surface-tint: #f6f9fd;

    /* Typography palette */
    --bpr-ink: #0f172a;
    --bpr-ink-soft: #334155;
    --bpr-ink-muted: #64748b;
    --bpr-accent: #1d4ed8;
    --bpr-accent-soft: #3b82f6;

    /* Spacing */
    --bpr-section-gap-y: clamp(2.75rem, 5vw, 4.5rem);
    --bpr-card-padding: clamp(1.25rem, 2vw, 1.75rem);
    --bpr-radius-card: 14px;
    --bpr-radius-card-lg: 18px;
}

/* ============================================================
   1. HERO — kurangi ornamen, glow, dan pattern; fokus typography
   ============================================================ */
body.sg-portal-page .sg-subhero,
body.sg-portal-page .org-hero--sub {
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%) !important;
    box-shadow: inset 0 -1px 0 var(--bpr-border-hairline) !important;
    overflow: hidden;
}

/* Background dekoratif (radial glow / pattern) dihilangkan total */
body.sg-portal-page .sg-subhero__bg,
body.sg-portal-page .org-hero__bg {
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    opacity: 0 !important;
    pointer-events: none;
}

body.sg-portal-page .sg-subhero::before,
body.sg-portal-page .sg-subhero::after,
body.sg-portal-page .org-hero--sub::before,
body.sg-portal-page .org-hero--sub::after {
    display: none !important;
    content: none !important;
}

/* Eyebrow dot ornamen disembunyikan */
body.sg-portal-page .sg-hero__eyebrow-dot,
body.sg-portal-page .org-eyebrow__dot,
body.sg-portal-page .sg-subhero__eyebrow .org-eyebrow__dot {
    display: none !important;
}

body.sg-portal-page .sg-subhero__eyebrow,
body.sg-portal-page .org-eyebrow {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--bpr-accent) !important;
    margin-bottom: 1rem !important;
}

body.sg-portal-page .sg-subhero__title,
body.sg-portal-page .org-hero__title {
    font-size: clamp(1.6rem, 3.4vw, 2.4rem) !important;
    font-weight: 800 !important;
    line-height: 1.18 !important;
    letter-spacing: -0.015em !important;
    color: var(--bpr-ink) !important;
    text-shadow: none !important;
    margin-bottom: 0.85rem !important;
}

body.sg-portal-page .sg-subhero__title-accent {
    color: var(--bpr-accent) !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: var(--bpr-accent) !important;
    text-shadow: none !important;
}

body.sg-portal-page .sg-subhero__lead,
body.sg-portal-page .org-hero__lead {
    font-size: clamp(0.95rem, 1.05vw + 0.7rem, 1.1rem) !important;
    line-height: 1.6 !important;
    color: var(--bpr-ink-soft) !important;
    max-width: 56ch !important;
    margin-bottom: 1.5rem !important;
}

/* CTA hero — shadow lembut, bukan glow neon */
body.sg-portal-page .sg-subhero__cta {
    box-shadow: 0 6px 18px -10px rgba(29, 78, 216, 0.45) !important;
    border: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.sg-portal-page .sg-subhero__cta:hover {
    box-shadow: 0 10px 24px -10px rgba(29, 78, 216, 0.55) !important;
    transform: translateY(-1px);
}

/* Stats hero — kartu tenang */
body.sg-portal-page .sg-subhero__stats,
body.sg-portal-page .org-hero__stats {
    gap: 0.85rem !important;
}

body.sg-portal-page .sg-subhero__stat,
body.sg-portal-page .org-hero__stat {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid var(--bpr-border-hairline) !important;
    border-radius: var(--bpr-radius-card) !important;
    box-shadow: var(--bpr-shadow-sm) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0.85rem 1rem !important;
}

body.sg-portal-page .sg-subhero__stat-num,
body.sg-portal-page .org-hero__stat-value {
    color: var(--bpr-ink) !important;
    font-weight: 800 !important;
    text-shadow: none !important;
}

body.sg-portal-page .sg-subhero__stat-label,
body.sg-portal-page .org-hero__stat-label {
    color: var(--bpr-ink-muted) !important;
    font-weight: 600 !important;
    text-shadow: none !important;
}

/* Stat dengan nilai 0 — disamarkan supaya tidak menarik perhatian palsu */
body.sg-portal-page .sg-subhero__stat-num[data-sg-count="0"],
body.sg-portal-page .org-hero__stat-value[data-sg-count="0"] {
    color: rgba(15, 23, 42, 0.32) !important;
    font-weight: 700 !important;
}

/* Breadcrumb hero */
body.sg-portal-page .sg-subhero__breadcrumb,
body.sg-portal-page .org-hero__breadcrumb {
    color: var(--bpr-ink-muted) !important;
    font-size: 0.84rem !important;
}

/* ============================================================
   2. SECTIONS — whitespace, hierarchy, surface
   ============================================================ */
body.sg-portal-page .beranda-section {
    padding-top: var(--bpr-section-gap-y) !important;
    padding-bottom: var(--bpr-section-gap-y) !important;
    position: relative;
}

body.sg-portal-page .beranda-section + .beranda-section {
    border-top: 1px solid var(--bpr-border-hairline) !important;
}

body.sg-portal-page .beranda-section--surface-muted {
    background: var(--bpr-surface-muted) !important;
}

body.sg-portal-page .beranda-section--surface-white {
    background: var(--bpr-surface) !important;
}

/* Section title & subtitle */
body.sg-portal-page .beranda-section__title {
    font-size: clamp(1.35rem, 2.2vw, 1.65rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.012em !important;
    line-height: 1.25 !important;
    color: var(--bpr-ink) !important;
    text-shadow: none !important;
}

body.sg-portal-page .beranda-section__desc {
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    line-height: 1.55 !important;
    color: var(--bpr-ink-muted) !important;
    margin-top: 0.4rem !important;
    text-shadow: none !important;
}

body.sg-portal-page .beranda-exec-section__eyebrow {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--bpr-accent) !important;
    margin-top: 0.3rem !important;
    margin-bottom: 0 !important;
}

body.sg-portal-page .beranda-section__head-row {
    margin-bottom: 1.5rem !important;
}

body.sg-portal-page .beranda-section__link-all {
    font-weight: 700 !important;
    color: var(--bpr-accent) !important;
    transition: color 160ms ease, transform 160ms ease;
}

body.sg-portal-page .beranda-section__link-all:hover {
    color: var(--bpr-ink) !important;
    transform: translateX(2px);
}

/* ============================================================
   3. CARDS GLOBAL — netralkan glow biru, gunakan shadow lembut
   ============================================================ */
body.sg-portal-page .beranda-visit-card,
body.sg-portal-page .beranda-visit-stat,
body.sg-portal-page .np-hero__card,
body.sg-portal-page .np-card,
body.sg-portal-page .org-news-card,
body.sg-portal-page .pub-pi-card,
body.sg-portal-page .sg-stat-card,
body.sg-portal-page .beranda-team-target-stat,
body.sg-portal-page .beranda-team-target-card,
body.sg-portal-page .beranda-dashboard-card,
body.sg-portal-page .org-news-card-wrap,
body.sg-portal-page .card.section-card,
body.sg-portal-page .beranda-galeri-card {
    background: var(--bpr-surface) !important;
    border: 1px solid var(--bpr-border-soft) !important;
    border-radius: var(--bpr-radius-card) !important;
    box-shadow: var(--bpr-shadow-sm) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: box-shadow 220ms ease, border-color 220ms ease,
        transform 220ms ease;
}

body.sg-portal-page .beranda-visit-card:hover,
body.sg-portal-page .np-card:hover,
body.sg-portal-page .org-news-card:hover,
body.sg-portal-page .pub-pi-card:hover,
body.sg-portal-page .beranda-galeri-card:hover {
    box-shadow: var(--bpr-shadow-md) !important;
    border-color: var(--bpr-border-firm) !important;
    transform: translateY(-2px);
}

/* Padding internal kartu */
body.sg-portal-page .beranda-visit-card > .card-body {
    padding: var(--bpr-card-padding) !important;
}

body.sg-portal-page .beranda-visit-stat {
    padding: 1rem 1.15rem !important;
}

body.sg-portal-page .beranda-visit-stat__num {
    color: var(--bpr-ink) !important;
    font-weight: 800 !important;
    text-shadow: none !important;
}

body.sg-portal-page .beranda-visit-stat__num[data-sg-count="0"] {
    color: rgba(15, 23, 42, 0.32) !important;
}

body.sg-portal-page .beranda-visit-stat__label {
    color: var(--bpr-ink-muted) !important;
    font-weight: 600 !important;
}

body.sg-portal-page .beranda-visit-stat__icon {
    box-shadow: none !important;
    filter: none !important;
}

body.sg-portal-page .beranda-visit-caption {
    color: var(--bpr-ink-muted) !important;
    margin: 1.25rem 0 1rem !important;
    font-size: 0.88rem !important;
}

/* ============================================================
   4. KILL SWITCH — netralkan semua glow/neon kelas global
   ============================================================ */
body.sg-portal-page [class*="-glow"],
body.sg-portal-page [class*="glow-"],
body.sg-portal-page .sg-glow,
body.sg-portal-page .sg-glow-soft,
body.sg-portal-page .sg-orbit,
body.sg-portal-page .sg-sparkle {
    box-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
}

/* Hapus radial pattern dekoratif yang sering dipakai sebagai bg */
body.sg-portal-page .sg-pattern,
body.sg-portal-page .sg-pattern-grid,
body.sg-portal-page .sg-pattern-dots,
body.sg-portal-page .sg-ornament,
body.sg-portal-page .sg-deco-circle {
    opacity: 0.35 !important;
    filter: saturate(0.6) !important;
}

/* Drop-shadow biru tebal di icon-icon umum */
body.sg-portal-page i[class*="fa-"] {
    text-shadow: none !important;
    filter: none !important;
}

/* ============================================================
   5. PUSAT INFORMASI cards di beranda — konsistensi visual
   ============================================================ */
body.sg-portal-page .org-news-card-wrap {
    border-radius: var(--bpr-radius-card-lg) !important;
}

body.sg-portal-page .org-news-card__title {
    color: var(--bpr-ink) !important;
    font-weight: 700 !important;
    letter-spacing: -0.005em !important;
}

body.sg-portal-page .org-news-card__excerpt {
    color: var(--bpr-ink-muted) !important;
    line-height: 1.55 !important;
}

body.sg-portal-page .org-news-card__cta {
    color: var(--bpr-accent) !important;
    font-weight: 700 !important;
}

/* ============================================================
   6. FLOATING AI ASSISTANT — kecil, subtle, premium
   ============================================================ */
body .ai-chat__toggle {
    padding: 0.5rem 0.85rem 0.5rem 0.55rem !important;
    background: var(--bpr-surface, #ffffff) !important;
    color: var(--bpr-ink, #0f172a) !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    box-shadow: 0 8px 22px -10px rgba(15, 23, 42, 0.22) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: box-shadow 200ms ease, transform 200ms ease !important;
}

body .ai-chat__toggle:hover {
    box-shadow: 0 14px 30px -12px rgba(15, 23, 42, 0.28) !important;
    transform: translateY(-1px) !important;
}

body .ai-chat__toggle-icon {
    width: 1.7rem !important;
    height: 1.7rem !important;
    background: linear-gradient(135deg, #3b82f6, #6366f1) !important;
    color: #ffffff !important;
    font-size: 0.88rem !important;
    box-shadow: none !important;
}

body .ai-chat__toggle-label {
    font-size: 0.78rem !important;
    color: var(--bpr-ink, #0f172a) !important;
    font-weight: 600 !important;
    text-shadow: none !important;
}

/* Sembunyikan label di layar sangat sempit agar FAB sebatas ikon */
@media (max-width: 419.98px) {
    body .ai-chat__toggle {
        padding: 0.5rem !important;
        border-radius: 50% !important;
        width: 2.65rem;
        height: 2.65rem;
        justify-content: center;
    }
    body .ai-chat__toggle-label {
        display: none !important;
    }
    body .ai-chat__toggle-icon {
        margin: 0 !important;
    }
}

/* ============================================================
   7. KPI CARDS & TEAM TARGET — kartu kalem, hover halus
   ============================================================ */
body.sg-portal-page .gov-kpi-card,
body.sg-portal-page .gov-team-target-dash-card,
body.sg-portal-page .gov-team-target-overview-card {
    background: var(--bpr-surface) !important;
    border: 1px solid var(--bpr-border-soft) !important;
    border-radius: var(--bpr-radius-card-lg) !important;
    box-shadow: var(--bpr-shadow-sm) !important;
    transform: none !important;
    transition: box-shadow 240ms ease, border-color 240ms ease,
        transform 240ms ease !important;
}

body.sg-portal-page .gov-kpi-card:hover,
body.sg-portal-page .gov-team-target-dash-card:hover,
body.sg-portal-page .gov-team-target-overview-card:hover {
    transform: translateY(-2px) !important;
    border-color: var(--bpr-border-firm) !important;
    box-shadow: var(--bpr-shadow-md) !important;
}

body.sg-portal-page .gov-kpi-card::after,
body.sg-portal-page .gov-kpi-card:hover::after {
    opacity: 0 !important;
}

/* Progress bar — kurangi neon glow */
body.sg-portal-page .gov-kpi-card .progress {
    background: rgba(15, 23, 42, 0.06) !important;
}

body.sg-portal-page .gov-kpi-card .progress-bar {
    background: linear-gradient(90deg, #3b82f6, #6366f1) !important;
    box-shadow: none !important;
}

/* Live indicator dot — kalemkan glow */
body.sg-portal-page .gov-kpi-section__live-dot {
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.16) !important;
    filter: none !important;
    animation: none !important;
}

body.sg-portal-page .gov-kpi-section__live {
    color: var(--bpr-ink-muted) !important;
    font-weight: 600 !important;
    text-shadow: none !important;
}

body.sg-portal-page .gov-kpi-section__count {
    color: var(--bpr-ink-muted) !important;
    font-weight: 600 !important;
}

body.sg-portal-page .gov-kpi-section__title {
    font-size: clamp(1.35rem, 2.2vw, 1.65rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.012em !important;
    color: var(--bpr-ink) !important;
    text-shadow: none !important;
}

body.sg-portal-page .gov-kpi-section__subtitle {
    color: var(--bpr-ink-muted) !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
}

/* Team target dot indicators */
body.sg-portal-page .gov-team-target-dash-card__stat-dot,
body.sg-portal-page .gov-team-target-dot {
    box-shadow: none !important;
    filter: none !important;
}

body.sg-portal-page .beranda-team-target-stat__num,
body.sg-portal-page .beranda-team-target-card__num,
body.sg-portal-page .gov-team-target-dash-card__stat-num {
    color: var(--bpr-ink) !important;
    text-shadow: none !important;
}

body.sg-portal-page .beranda-team-target-stat__label,
body.sg-portal-page .beranda-team-target-card__label,
body.sg-portal-page .gov-team-target-dash-card__stat-label {
    color: var(--bpr-ink-muted) !important;
}

body.sg-portal-page .gov-team-target-dash-card__title {
    color: var(--bpr-ink) !important;
    font-weight: 700 !important;
}

body.sg-portal-page .gov-team-target-dash-card__meta {
    color: var(--bpr-ink-muted) !important;
}

/* ============================================================
   8. MOBILE (≤ 575px) — stack vertikal, full-width, lega
   ============================================================ */
@media (max-width: 575.98px) {
    body.sg-portal-page .beranda-section {
        padding-top: 2.25rem !important;
        padding-bottom: 2.25rem !important;
    }

    body.sg-portal-page .sg-subhero {
        padding-top: 1.5rem !important;
        padding-bottom: 2rem !important;
    }

    body.sg-portal-page .sg-subhero__title,
    body.sg-portal-page .org-hero__title {
        font-size: clamp(1.45rem, 5.5vw + 0.5rem, 2rem) !important;
        line-height: 1.2 !important;
    }

    body.sg-portal-page .sg-subhero__lead,
    body.sg-portal-page .org-hero__lead {
        font-size: 0.95rem !important;
        line-height: 1.55 !important;
        max-width: 100% !important;
    }

    body.sg-portal-page .sg-subhero__stats,
    body.sg-portal-page .org-hero__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.55rem !important;
    }

    body.sg-portal-page .sg-subhero__stat {
        padding: 0.7rem 0.85rem !important;
    }

    /* Kolom statistik kunjungan → 1 kolom penuh */
    body.sg-portal-page .beranda-visit-stats > [class*="col-"] {
        width: 100% !important;
    }

    body.sg-portal-page .beranda-section__head-row {
        margin-bottom: 1.15rem !important;
        gap: 0.5rem !important;
    }

    body.sg-portal-page .beranda-section__title {
        font-size: 1.25rem !important;
    }

    body.sg-portal-page .beranda-section__desc {
        font-size: 0.9rem !important;
    }
}

/* ============================================================
   9. TABLET (576px–991.98px)
   ============================================================ */
@media (min-width: 576px) and (max-width: 991.98px) {
    body.sg-portal-page .beranda-section {
        padding-top: clamp(2.5rem, 5vw, 3.5rem) !important;
        padding-bottom: clamp(2.5rem, 5vw, 3.5rem) !important;
    }
}

/* ============================================================
   10. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    body.sg-portal-page .beranda-visit-card,
    body.sg-portal-page .np-card,
    body.sg-portal-page .org-news-card,
    body.sg-portal-page .sg-subhero__cta,
    body .ai-chat__toggle {
        transition: none !important;
        animation: none !important;
    }
}

/* ============================================================
   11. INDIKATOR & STATISTIK — kartu kompak (4 kartu / baris)
   --------------------------------------------------------------
   Mengikuti referensi visual user: kartu pendek, ikon kiri, label
   kecil, nilai besar berwarna, sub-info kecil di bawah. Cocok
   untuk dashboard portal government kelas nasional.
   ============================================================ */
body.sg-portal-page .gov-kpi-section__shell {
    padding: clamp(1.25rem, 2vw, 1.75rem) !important;
    background: var(--bpr-surface) !important;
    border: 1px solid var(--bpr-border-soft) !important;
    border-radius: var(--bpr-radius-card-lg) !important;
    box-shadow: var(--bpr-shadow-sm) !important;
}

body.sg-portal-page .gov-kpi-card {
    padding: 1rem 1.1rem !important;
    border-radius: var(--bpr-radius-card) !important;
}

body.sg-portal-page .gov-kpi-card__row {
    gap: 0.85rem !important;
}

body.sg-portal-page .gov-kpi-card__icon {
    width: 2.5rem !important;
    height: 2.5rem !important;
    border-radius: 10px !important;
    font-size: 0.95rem !important;
    flex: 0 0 2.5rem !important;
    box-shadow: none !important;
}

body.sg-portal-page .gov-kpi-card__title,
body.sg-homepage #beranda-root .gov-kpi-card__title {
    font-family: var(--font-sans, 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif) !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: var(--bpr-ink-muted) !important;
    letter-spacing: 0 !important;
    line-height: 1.3 !important;
    margin-bottom: 0.25rem !important;
}

/* PENTING: selector ditingkatkan ke `body.sg-homepage #beranda-root`
   agar bisa mengalahkan rule di beranda-dashboard-cards.css yang juga
   memakai selector tersebut dan membuat font-size mencapai 2.125rem
   (terlalu besar, sampai keluar kotak). Sekaligus paksa font-family
   memakai --font-sans (Plus Jakarta Sans) — sama dengan teks lain di
   beranda — supaya konsisten secara visual. */
body.sg-portal-page .gov-kpi-card__pct,
body.sg-homepage #beranda-root .gov-kpi-card__pct {
    font-family: var(--font-sans, 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif) !important;
    font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.45rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    line-height: 1 !important;
}

body.sg-portal-page .gov-kpi-card__pct-val,
body.sg-homepage #beranda-root .gov-kpi-card__pct-val {
    font-family: var(--font-sans, 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif) !important;
    font-weight: 800 !important;
}

body.sg-portal-page .gov-kpi-card__pct-unit,
body.sg-homepage #beranda-root .gov-kpi-card__pct-unit {
    font-family: var(--font-sans, 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif) !important;
    font-size: 0.7em !important;
    font-weight: 700 !important;
    margin-left: 0.1em !important;
    opacity: 0.8 !important;
}

/* Head-aside (pct + badge) — biar tidak overflow di kartu sempit.
   Stack vertikal saat sempit; badge berukuran kompak. */
body.sg-portal-page .gov-kpi-card__head,
body.sg-homepage #beranda-root .gov-kpi-card__head {
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
}

body.sg-portal-page .gov-kpi-card__head-aside,
body.sg-homepage #beranda-root .gov-kpi-card__head-aside {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 0.3rem !important;
    flex-shrink: 0 !important;
    min-width: 0 !important;
}

body.sg-portal-page .gov-kpi-card__badge,
body.sg-homepage #beranda-root .gov-kpi-card__badge {
    font-family: var(--font-sans, 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif) !important;
    font-size: 0.62rem !important;
    font-weight: 600 !important;
    padding: 0.16rem 0.48rem !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
}

body.sg-portal-page .gov-kpi-card__info {
    font-size: 0.78rem !important;
    color: var(--bpr-ink-muted) !important;
    margin: 0.35rem 0 0.55rem !important;
    line-height: 1.35 !important;
}

body.sg-portal-page .gov-kpi-card__progress {
    height: 4px !important;
    border-radius: 999px !important;
    background: rgba(15, 23, 42, 0.06) !important;
    margin-top: 0.4rem !important;
}

body.sg-portal-page .gov-kpi-card__actions {
    margin-top: 0.55rem !important;
}

body.sg-portal-page .gov-kpi-card__badge {
    font-size: 0.65rem !important;
    padding: 0.18rem 0.5rem !important;
    border-radius: 999px !important;
}

body.sg-portal-page .gov-kpi-card__detail-btn {
    font-size: 0.72rem !important;
    padding: 0.25rem 0.55rem !important;
}

body.sg-portal-page .gov-kpi-card__trend {
    font-size: 0.72rem !important;
    color: var(--bpr-ink-muted) !important;
}

/* Portal-stat variant — kartu sederhana (Publikasi, Tamu Hari Ini) */
body.sg-portal-page .gov-kpi-card--portal-stat {
    background: var(--bpr-surface) !important;
}

body.sg-portal-page .gov-kpi-card--portal-stat .gov-kpi-card__icon {
    background: rgba(59, 130, 246, 0.10) !important;
    color: var(--bpr-accent) !important;
}

body.sg-portal-page .gov-kpi-card--portal-stat.gov-kpi-card--tone-neutral .gov-kpi-card__icon {
    background: rgba(100, 116, 139, 0.12) !important;
    color: var(--bpr-ink-soft) !important;
}

body.sg-portal-page .gov-kpi-card__portal-num {
    font-size: 1.6rem !important;
    font-weight: 800 !important;
    color: var(--bpr-ink) !important;
    line-height: 1.1 !important;
    margin: 0.1rem 0 0.1rem !important;
    letter-spacing: -0.02em !important;
}

body.sg-portal-page .gov-kpi-card__portal-num[data-sg-count="0"] {
    color: rgba(15, 23, 42, 0.42) !important;
}

body.sg-portal-page .gov-kpi-card__portal-unit {
    font-size: 0.78rem !important;
    color: var(--bpr-ink-muted) !important;
    font-weight: 500 !important;
}

/* Section header indikator: lebih ramping */
body.sg-portal-page .gov-kpi-section__header {
    margin-bottom: 1.15rem !important;
}

/* ============================================================
   12. PUSAT INFORMASI + GALERI — POSISI sejajar (kiri & kanan)
   --------------------------------------------------------------
   PENTING: stylesheet ini HANYA mengatur POSISI 2 section yang
   sebelumnya stack vertikal menjadi sejajar (2 kolom desktop /
   1 kolom mobile). Tampilan kartu di dalamnya (.org-news-card &
   .beranda-galeri-card) TIDAK diubah — semua CSS card asli tetap
   berlaku karena kita mempertahankan ID asli section masing-masing
   (#beranda-pusat-informasi dan #beranda-galeri-kegiatan).
   ============================================================ */
body.sg-portal-page .beranda-info-galeri-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 3vw, 2.25rem);
    align-items: start;
}

@media (min-width: 992px) {
    body.sg-portal-page .beranda-info-galeri-grid {
        grid-template-columns: 1fr 1fr;
    }
}

body.sg-portal-page .beranda-info-galeri-grid__col {
    min-width: 0; /* prevent grid track overflow saat konten panjang */
}

/* Border-top antar section yang berasal dari rule .beranda-section
   + .beranda-section dimatikan ketika keduanya bersanding di grid,
   karena visual pemisah kolom tidak lagi diperlukan. */
@media (min-width: 992px) {
    body.sg-portal-page .beranda-info-galeri-grid .beranda-section + .beranda-section {
        border-top: 0 !important;
    }
}

/* INTERNAL GRID DI DALAM KOLOM
   --------------------------------------------------------------
   Karena lebar kolom hanya ~50% viewport, internal grid bawaan
   (Pusat Informasi: 2-col, Galeri: 3-col) akan membuat kartu jadi
   sangat sempit. Override ke 1 kolom internal supaya setiap kartu
   tetap lega dan TAMPILANNYA SAMA seperti versi full-width.
   Spec selector ID + class agar match dengan rule asli yang juga
   pakai #beranda-pusat-informasi / #beranda-galeri-kegiatan. */
@media (min-width: 992px) {
    body.sg-portal-page #beranda-pusat-informasi .org-news-grid {
        grid-template-columns: 1fr !important;
    }
    body.sg-portal-page #beranda-galeri-kegiatan .beranda-galeri-cards {
        grid-template-columns: 1fr !important;
        gap: 0.85rem !important;
    }

    /* PROPORSIONAL — karena hanya 1 foto galeri di kolom kanan vs
       3 news card di kolom kiri, biarkan foto galeri berukuran "hero":
       aspect ratio 4:3 default + dijaga proporsional terhadap tinggi
       gabungan 3 news card. Tinggi total kolom kanan dengan 1 foto
       besar ≈ tinggi 3 news card stack di kiri → seimbang & elegan.
       Card design tetap (foto di atas, teks di bawah). */
    body.sg-portal-page .beranda-info-galeri-grid #beranda-galeri-kegiatan .beranda-galeri-card__media {
        aspect-ratio: 4 / 3 !important;
    }

    /* Galeri card "tumbuh" mengisi tinggi kolom — supaya tidak ada
       gap kosong di bawah saat news card lebih tinggi. */
    body.sg-portal-page .beranda-info-galeri-grid #beranda-galeri-kegiatan {
        display: flex !important;
        flex-direction: column !important;
    }
    body.sg-portal-page .beranda-info-galeri-grid #beranda-galeri-kegiatan .beranda-galeri-cards {
        flex: 1 1 auto !important;
        align-content: start !important;
    }

    /* SEJAJAR — batasi jumlah item yang tampil per section.
       Permintaan user: berita & pengumuman = 3 item, galeri = 1 foto.
       Sisanya tetap dapat dilihat via "Lihat semua" / "Lihat galeri"
       di head-row. */
    body.sg-portal-page .beranda-info-galeri-grid #beranda-pusat-informasi .org-news-grid > article:nth-child(n+4) {
        display: none !important;
    }
    body.sg-portal-page .beranda-info-galeri-grid #beranda-galeri-kegiatan .beranda-galeri-cards > a:nth-child(n+2) {
        display: none !important;
    }
}

/* Tablet & mobile (≤991px): konsisten dengan desktop —
   3 berita/pengumuman + 1 foto galeri. */
@media (max-width: 991.98px) {
    body.sg-portal-page .beranda-info-galeri-grid #beranda-pusat-informasi .org-news-grid > article:nth-child(n+4) {
        display: none !important;
    }
    body.sg-portal-page .beranda-info-galeri-grid #beranda-galeri-kegiatan .beranda-galeri-cards > a:nth-child(n+2) {
        display: none !important;
    }
}

/* Spacing antar head-row kedua section disamakan */
body.sg-portal-page .beranda-info-galeri-grid__col .beranda-section__head-row {
    margin-bottom: 1rem !important;
}

/* ============================================================
   14. TEAM TARGET — 3 KARTU BERDAMPINGAN (kiri-tengah-kanan)
   --------------------------------------------------------------
   Override Bootstrap grid agar selalu 3-kolom di desktop (≥992px)
   tanpa peduli col-md-4 behavior. Memakai CSS grid native untuk
   kontrol penuh, lalu menyesuaikan layout internal donut-chart
   agar muat di kolom yang lebih sempit.
   ============================================================ */
@media (min-width: 992px) {
    body.sg-portal-page #beranda-team-targets .gov-team-target-dash-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 1rem !important;
        --bs-gutter-x: 0 !important;
        --bs-gutter-y: 0 !important;
        align-items: stretch !important;
    }

    body.sg-portal-page #beranda-team-targets .gov-team-target-dash-grid > [class*="col-"],
    body.sg-portal-page #beranda-team-targets .gov-team-target-dash-grid > .col-12,
    body.sg-portal-page #beranda-team-targets .gov-team-target-dash-grid > .col-md-4 {
        flex: unset !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
    }

    /* Di kolom 1/3 viewport, chart-wrap horizontal (donut kiri + stats kanan)
       sering tertekan. Switch ke layout vertikal: donut di atas, stats di bawah
       agar konten card tetap nyaman dibaca. */
    body.sg-portal-page #beranda-team-targets .gov-team-target-dash-card__chart-wrap {
        flex-direction: column !important;
        gap: 0.75rem !important;
        align-items: stretch !important;
    }

    body.sg-portal-page #beranda-team-targets .gov-team-target-dash-card__chart {
        width: 100% !important;
        max-width: 180px !important;
        margin: 0 auto !important;
    }

    body.sg-portal-page #beranda-team-targets .gov-team-target-dash-card__stats {
        width: 100% !important;
        margin: 0 !important;
    }

    /* Padding internal kartu — sedikit lebih ramping untuk kolom sempit */
    body.sg-portal-page #beranda-team-targets .gov-team-target-dash-card {
        padding: 1.1rem !important;
    }

    body.sg-portal-page #beranda-team-targets .gov-team-target-dash-card__title {
        font-size: 0.98rem !important;
        line-height: 1.3 !important;
    }

    body.sg-portal-page #beranda-team-targets .gov-team-target-dash-card__meta {
        font-size: 0.78rem !important;
    }
}

/* Tablet (768–991px): tetap 3 kolom tapi lebih kompak (donut lebih kecil).
   Tanpa ini, di viewport sempit-ish kartunya muncul stack vertikal karena
   col-md-4 menghasilkan kolom yang terlalu sempit untuk konten internal. */
@media (min-width: 768px) and (max-width: 991.98px) {
    body.sg-portal-page #beranda-team-targets .gov-team-target-dash-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 0.75rem !important;
        --bs-gutter-x: 0 !important;
    }

    body.sg-portal-page #beranda-team-targets .gov-team-target-dash-grid > [class*="col-"] {
        flex: unset !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        display: flex !important;
    }

    body.sg-portal-page #beranda-team-targets .gov-team-target-dash-card {
        padding: 0.9rem !important;
    }

    body.sg-portal-page #beranda-team-targets .gov-team-target-dash-card__chart-wrap {
        flex-direction: column !important;
        gap: 0.55rem !important;
    }

    body.sg-portal-page #beranda-team-targets .gov-team-target-dash-card__chart {
        max-width: 140px !important;
        margin: 0 auto !important;
    }

    body.sg-portal-page #beranda-team-targets .gov-team-target-dash-card__title {
        font-size: 0.92rem !important;
    }

    body.sg-portal-page #beranda-team-targets .gov-team-target-dash-card__stat-label {
        font-size: 0.78rem !important;
    }

    body.sg-portal-page #beranda-team-targets .gov-team-target-dash-card__icon {
        width: 2.2rem !important;
        height: 2.2rem !important;
    }
}

/* ============================================================
   13. KPI GRID MOBILE — pastikan 2 col di mobile (bukan 1)
   ============================================================ */
@media (max-width: 575.98px) {
    body.sg-portal-page .gov-kpi-grid {
        --bs-gutter-x: 0.6rem !important;
    }

    body.sg-portal-page .gov-kpi-card {
        padding: 0.85rem 0.95rem !important;
    }

    body.sg-portal-page .gov-kpi-card__row {
        gap: 0.65rem !important;
    }

    body.sg-portal-page .gov-kpi-card__icon {
        width: 2.2rem !important;
        height: 2.2rem !important;
        font-size: 0.85rem !important;
        flex: 0 0 2.2rem !important;
    }

    body.sg-portal-page .gov-kpi-card__title {
        font-size: 0.75rem !important;
    }

    body.sg-portal-page .gov-kpi-card__pct,
    body.sg-portal-page .gov-kpi-card__portal-num {
        font-size: 1.25rem !important;
    }

    body.sg-portal-page .gov-kpi-card__badge {
        display: none !important; /* hemat ruang horizontal di mobile sempit */
    }
}