.statistik-wrapper { display: flex; gap: 24px; padding: 40px 0; }
    .statistik-sidebar { width: 220px; flex-shrink: 0; }
    .statistik-sidebar .nav-link {
        display: flex; align-items: center; gap: 10px;
        padding: 12px 16px; border-radius: 8px; color: #555;
        font-weight: 500; margin-bottom: 4px; transition: all 0.2s;
    }
    .statistik-sidebar .nav-link:hover { background: #f0f0f0; color: #ffbf00; }
    .statistik-sidebar .nav-link.active { background: #ffbf00; color: #fff; }
    .statistik-content { flex: 1; min-width: 0; }

    /* Header */
    .stat-header-wrap { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
    .stat-header {
        flex: 1; background: #ffbf00; color: white; text-align: center;
        padding: 14px; border-radius: 8px; font-weight: 700;
        font-size: 18px; margin-bottom: 0; letter-spacing: 1px;
    }

    /* Summary cards — ikon kiri, label atas, nilai bawah (sama seperti kependudukan) */
    .stat-summary-card {
        background: #f9f9f9; border: 1px solid #eee;
        border-radius: 8px; padding: 16px 24px;
        display: flex; align-items: center; gap: 16px;
    }
    .stat-summary-card .card-icon {
        width: 48px; height: 48px; border-radius: 12px;
        display: flex; align-items: center; justify-content: center;
        font-size: 22px; flex-shrink: 0;
    }
    .stat-summary-card .card-text .label  { font-size: 12px; font-weight: 600; color: #888; letter-spacing: 1px; }
    .stat-summary-card .card-text .value  { font-size: 28px; font-weight: 700; color: #333; line-height: 1.15; }
    .stat-summary-card .card-text .value small { font-size: 13px; font-weight: 500; color: #888; margin-left: 3px; }

    /* Chart cards */
    .chart-card { background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 20px; margin-bottom: 20px; }
    .chart-card .chart-title { font-size: 13px; font-weight: 600; color: #555; letter-spacing: 1px; margin-bottom: 16px; }

    /* Two-column middle section */
    .geo-mid-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 0; }
    .chart-card-left { display: flex; flex-direction: column; gap: 20px; }
    .chart-card-left .chart-card { margin-bottom: 0; }

    /* Map */
    #geo-map { height: 490px; width: 100%; border-radius: 8px; z-index: 1; }

    /* Map */

    /* Comparison chart toggle */
    .chart-title-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 4px; }
    .chart-sub { font-size: 11px; color: #aaa; margin-bottom: 12px; }
    .chart-toggle-btns { display: flex; gap: 6px; }
    .chart-toggle-btns button {
        font-size: 11px; padding: 3px 12px; border-radius: 5px; border: 1px solid #ddd;
        background: #f5f5f5; color: #666; cursor: pointer; font-weight: 600;
    }
    .chart-toggle-btns button.active { background: #ffbf00; border-color: #ffbf00; color: #fff; }

    /* Highlight cards */
    .geo-highlight-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 20px; }
    .geo-hl-card {
        background: #fff; border: 1px solid #eee; border-radius: 8px;
        padding: 14px 16px; display: flex; align-items: center; gap: 12px;
    }
    .geo-hl-card .hl-icon {
        width: 42px; height: 42px; border-radius: 10px;
        display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0;
    }
    .geo-hl-card .hl-tag  { font-size: 10px; font-weight: 700; letter-spacing: 1px; margin-bottom: 2px; }
    .geo-hl-card .hl-name { font-size: 13px; font-weight: 700; color: #222; }
    .geo-hl-card .hl-sub  { font-size: 11px; color: #888; }

    /* Kerangka tabel dipindah ke komponen statistik.tabel
       (assets/statistik/css/tabel.css) dan dipakai bersama semua modul.
       Yang dulu ada di sini — .geo-table-wrap, .geo-search-*, .geo-pager,
       .geo-source-footer, warna per kolom, dan blok responsive-nya — sudah
       tidak dirujuk markup mana pun lagi. */

    /* ANIMASI CARD TETAP DIPAKAI */
@keyframes cardValueIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.stat-summary-card .card-anim {
    animation: cardValueIn .35s ease both;
}

    /* ============================================================
   RESPONSIVE - TABLET & MOBILE
   Aturan tabel sudah pindah ke assets/statistik/css/tabel.css; yang tersisa
   di sini hanya bagian khas geografis: sidebar, peta, dan legendanya.
============================================================ */

@media (max-width: 992px) {

    .geo-mid-grid {
        grid-template-columns: 1fr;
    }

    .geo-highlight-grid {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 768px) {

    .statistik-wrapper {
        flex-direction: column;
        padding: 20px 0;
        gap: 16px;
    }

    .statistik-sidebar {
        width: 100%;
    }

    .statistik-sidebar .nav {
        flex-direction: row !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 6px;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }

    .statistik-sidebar .nav-link {
        white-space: nowrap;
        margin-bottom: 0;
    }

    .stat-header {
        font-size: 15px;
        padding: 12px;
    }

    #geo-map {
        height: 360px;
    }

    /* Legend peta */
    .kec-legend {
        font-size: 8.5px;
        line-height: 1.25;
        padding: 4px 6px;
        max-width: 44vw;
        max-height: 150px;
        overflow-y: auto;
        opacity: 0.92;
    }

    .kec-legend .legend-kec-item {
        padding: 1px 3px;
        gap: 3px;
    }

    .kec-legend .legend-kec-item span:last-child {
        white-space: normal;
    }
}