/* ==========================================

   KAS PRAMUKA DIGITAL

   SCOUT ADVENTURE RESPONSIVE V2

   ========================================== */

:root {

    --brown: #43291b;

    --brown-dark: #2f1d14;

    --cream: #fff9ef;

    --sand: #f5ead7;

    --gold: #d7b26d;

    --forest: #24583b;

    --green-dark: #17452f;

    --green-soft: #eaf4e6;

    --ink: #332b24;

    --muted: #716d64;

    --border: #e8ddcc;

    --shadow: 0 7px 28px rgba(65, 44, 23, .08);

}

*, *::before, *::after {

    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;

}

body {

    margin: 0;

    background: #fffcf7;

    color: var(--ink);

    font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

    line-height: 1.55;

}

a {

    color: inherit;

}

img {

    max-width: 100%;

    display: block;

}

a:focus-visible,

summary:focus-visible {

    outline: 3px solid #e6a438;

    outline-offset: 3px;

}

.site-container {

    width: min(100% - 48px, 1220px);

    margin-inline: auto;

}

.skip-link {

    position: absolute;

    z-index: 200;

    left: -9999px;

    top: 4px;

    background: white;

    padding: 9px;

    border-radius: 5px;

}

.skip-link:focus {

    left: 12px;

}

/* ==========================================

   HEADER

   ========================================== */

.site-header {

    position: sticky;

    top: 0;

    z-index: 50;

    background: rgba(255, 250, 240, .98);

    border-bottom: 1px solid #eaddc9;

    box-shadow: 0 2px 12px rgba(50, 32, 20, .04);

}

.nav-wrap {

    min-height: 78px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

}

.brand {

    display: flex;

    align-items: center;

    gap: 12px;

    text-decoration: none;

    flex-shrink: 0;

}

.brand-symbol {

    font-size: 43px;

    color: #5c3926;

    line-height: 1;

}

.brand-words {

    display: flex;

    flex-direction: column;

    line-height: 1.18;

    gap: 6px;

}

.brand-words strong {

    font-size: 17px;

    font-weight: 900;

    letter-spacing: -.5px;

    color: var(--brown);

}

.brand-words small {

    font-size: 10px;

    letter-spacing: 1.5px;

    font-weight: 800;

    color: #967047;

}

.desktop-nav {

    display: flex;

    align-items: center;

    gap: 7px;

}

.desktop-nav a {

    border-radius: 100px;

    min-height: 42px;

    padding: 11px 17px;

    display: inline-flex;

    align-items: center;

    font-weight: 750;

    font-size: 13px;

    text-decoration: none;

    color: #3a2b21;

    white-space: nowrap;

    transition: background .15s;

}

.desktop-nav a:hover {

    background: #f3e6d3;

}

.desktop-nav .active {

    background: #613b27;

    color: white;

}

/* MENU MOBILE */

.mobile-nav {

    display: none;

    position: relative;

}

.mobile-nav summary {

    list-style: none;

    display: flex;

    align-items: center;

    gap: 7px;

    background: #f6ecd9;

    color: #4c3020;

    border: 1px solid #e7d6c2;

    border-radius: 10px;

    padding: 10px 14px;

    font-size: 13px;

    font-weight: 800;

    cursor: pointer;

    min-height: 44px;

}

.mobile-nav summary::-webkit-details-marker {

    display: none;

}

.hamburger {

    font-size: 19px;

}

.mobile-nav-links {

    position: absolute;

    right: 0;

    top: calc(100% + 12px);

    background: #fffaf1;

    border: 1px solid #e6d7c5;

    box-shadow: 0 16px 32px rgba(30, 20, 12, .16);

    border-radius: 12px;

    width: min(290px, calc(100vw - 48px));

    padding: 8px;

    display: flex;

    flex-direction: column;

}

.mobile-nav-links a {

    font-size: 14px;

    text-decoration: none;

    padding: 13px 12px;

    border-radius: 8px;

    font-weight: 700;

}

.mobile-nav-links a:hover {

    background: #f2e8d6;

}

.page-main {

    min-height: calc(100vh - 180px);

}

/* ==========================================

   HERO / FOTO SISWA

   ========================================== */

.hero-banner {

    isolation: isolate;

    position: relative;

    min-height: 445px;

    background: #2e3b2a;

    overflow: hidden;

    color: white;

    display: flex;

    align-items: center;

}

.hero-photo {

    position: absolute;

    z-index: 0;

    right: 0;

    top: 0;

    height: 100%;

    width: 66%;

    object-fit: cover;

    object-position: 54% 43%;

}

.hero-shade {

    position: absolute;

    z-index: 1;

    inset: 0;

    background: linear-gradient(

        90deg,

        rgba(30, 40, 26, .98) 0%,

        rgba(33, 45, 29, .95) 26%,

        rgba(34, 47, 30, .75) 49%,

        rgba(29, 39, 29, .04) 81%

    );

}

.hero-banner::after {

    content: "";

    position: absolute;

    z-index: 3;

    bottom: 0;

    left: 0;

    right: 0;

    height: 8px;

    background: repeating-linear-gradient(

        120deg,

        #d8ad66 0 8px,

        #f1d4a0 8px 12px,

        #8a603b 12px 17px

    );

}

.hero-inner {

    position: relative;

    z-index: 2;

    min-height: 445px;

    display: flex;

    align-items: center;

}

.hero-copy {

    max-width: 590px;

    padding: 47px 0 58px;

}

.hero-eyebrow {

    display: inline-block;

    background: rgba(255, 245, 211, .12);

    border: 1px solid rgba(255, 227, 170, .35);

    border-radius: 99px;

    padding: 7px 13px;

    font-size: 11px;

    letter-spacing: 1.2px;

    font-weight: 850;

    color: #ffe8b8;

}

.hero-copy h1 {

    font-size: clamp(34px, 4.1vw, 57px);

    line-height: 1.13;

    letter-spacing: -1.5px;

    margin: 18px 0;

    font-weight: 900;

    max-width: 585px;

    text-shadow: 0 2px 9px rgba(0, 0, 0, .12);

}

.hero-copy h1 span {

    color: #f3cc7b;

    display: block;

}

.hero-copy p {

    font-size: 15px;

    line-height: 1.72;

    color: #fcf6e8;

    max-width: 495px;

    margin: 0 0 25px;

}

.hero-buttons {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

}

.action-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    min-height: 48px;

    padding: 11px 18px;

    border-radius: 99px;

    border: 2px solid #e9dfcc;

    text-decoration: none;

    font-size: 13px;

    font-weight: 850;

    transition: transform .16s, background .16s;

}

.action-btn:hover {

    transform: translateY(-2px);

}

.action-primary {

    background: #76452a;

    color: white;

    border-color: #f0d2a5;

}

.action-primary:hover {

    background: #8d5834;

}

.action-secondary {

    background: #fff9ed;

    color: #3b291c;

}

.action-secondary:hover {

    background: #f3e4cc;

}

.hero-photo-label {

    position: absolute;

    right: 0;

    bottom: 22px;

    font-size: 10px;

    padding: 5px 10px;

    border-radius: 6px;

    background: rgba(27, 30, 22, .6);

    color: #fff6e6;

    text-align: right;

}

/* ==========================================

   BERANDA

   ========================================== */

.home-content,

.page-content {

    padding-top: 29px;

    padding-bottom: 72px;

}

.summary-row {

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 17px;

    margin-bottom: 47px;

}

.summary-card {

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    gap: 14px;

    min-height: 116px;

    padding: 20px;

    border-radius: 17px;

    background: linear-gradient(130deg, #fff4e1, #eee3ce);

    border: 1px solid #f0e2cb;

    box-shadow: var(--shadow);

}

.summary-primary {

    background: linear-gradient(125deg, #f8efdc, #e1e5ca);

}

.summary-green {

    background: linear-gradient(120deg, #eff3de, #dce8d1);

}

.summary-icon {

    width: 50px;

    height: 50px;

    flex: 0 0 50px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    font-size: 27px;

    background: #6a4324;

    color: #ffe3aa;

}

.summary-green .summary-icon {

    background: #345f33;

}

.summary-card > div {

    min-width: 0;

    z-index: 1;

}

.summary-label {

    display: block;

    font-size: 12px;

    font-weight: 800;

    color: #4d2e20;

    line-height: 1.3;

}

.summary-value {

    display: block;

    margin-top: 6px;

    line-height: 1.15;

    font-size: clamp(18px, 1.75vw, 27px);

    color: #1f5733;

    font-weight: 900;

    overflow-wrap: anywhere;

}

.summary-unavailable {

    font-size: 15px;

    color: #896332;

}

/* ==========================================

   JUDUL SECTION

   ========================================== */

.content-section {

    margin-top: 38px;

    margin-bottom: 45px;

}

.section-title-row {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 14px;

    flex-wrap: wrap;

    margin-bottom: 19px;

}

.section-title-group {

    display: flex;

    align-items: center;

    gap: 15px;

}

.section-deco {

    font-size: 26px;

    color: #7e4627;

    background: #fbf0da;

    border: 1px solid #ebd7b3;

    width: 49px;

    height: 49px;

    border-radius: 12px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

}

.section-kicker {

    display: block;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1.1px;

    color: #a07a4d;

    margin-bottom: 4px;

}

.section-title-group h2 {

    margin: 0;

    color: var(--brown);

    font-size: clamp(22px, 2.3vw, 30px);

    font-weight: 900;

    line-height: 1.24;

}

.section-title-group p {

    margin: 5px 0 0;

    color: var(--muted);

    font-size: 12px;

}

.section-more {

    font-weight: 800;

    font-size: 12px;

    color: #5a3523;

    text-decoration: none;

    border: 1px solid #bba289;

    background: white;

    padding: 10px 17px;

    min-height: 43px;

    border-radius: 99px;

    white-space: nowrap;

}

/* ==========================================

   KARTU REGU

   ========================================== */

.regu-grid {

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 16px;

}

.regu-card {

    position: relative;

    display: flex;

    flex-direction: column;

    min-width: 0;

    padding: 20px;

    border: 1px solid #e0c9a8;

    border-radius: 17px;

    background: linear-gradient(180deg, #fffdf6, #fef5e7);

    text-decoration: none;

    box-shadow: 0 5px 14px rgba(72, 41, 17, .05);

    transition: transform .17s, box-shadow .17s;

    overflow: hidden;

}

.regu-card:hover {

    transform: translateY(-4px);

    box-shadow: 0 14px 26px rgba(75, 47, 23, .11);

}

.regu-card::after {

    content: "";

    pointer-events: none;

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    height: 23px;

    opacity: .36;

    background: linear-gradient(

        170deg,

        transparent 42%,

        #aebf92 42% 75%,

        #91a779 76%

    );

}

.regu-card-head {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 8px;

}

.regu-art {

    width: 75px;

    height: 75px;

    display: grid;

    place-items: center;

    border-radius: 16px;

    background: color-mix(

        in srgb,

        var(--regu-accent) 13%,

        white

    );

    border: 1px solid color-mix(

        in srgb,

        var(--regu-accent) 37%,

        white

    );

    overflow: hidden;

    flex-shrink: 0;

}

.regu-art > span {

    font-size: 41px;

    line-height: 1;

}

.regu-art img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    padding: 5px;

}

.regu-kind {

    font-size: 10px;

    background: #e9ebd9;

    color: #4a683b;

    font-weight: 850;

    padding: 5px 8px;

    border-radius: 7px;

    white-space: nowrap;

}

.regu-card h3 {

    font-size: 18px;

    font-weight: 900;

    margin: 13px 0 3px;

    color: #49301f;

    line-height: 1.25;

    overflow-wrap: anywhere;

}

.regu-meta {

    font-size: 12px;

    color: #726655;

    margin-bottom: 13px;

}

.regu-finance {

    background: #f3eadb;

    border-radius: 10px;

    padding: 11px 13px;

    margin-top: auto;

    min-height: 66px;

}

.regu-finance small {

    display: block;

    color: #766552;

    font-size: 11px;

}

.regu-finance strong {

    display: block;

    font-size: 19px;

    font-weight: 900;

    color: #24583b;

    line-height: 1.25;

    overflow-wrap: anywhere;

    margin-top: 4px;

}

.regu-finance strong.pending-amount {

    font-size: 13px;

    color: #8b683c;

}

.regu-card-link {

    font-size: 11px;

    font-weight: 850;

    color: #794b32;

    display: flex;

    justify-content: space-between;

    margin-top: 14px;

    padding-bottom: 12px;

}

/* ==========================================

   TABEL TRANSAKSI

   ========================================== */

.table-card {

    background: #fffdf9;

    border: 1px solid #eadac7;

    border-radius: 15px;

    box-shadow: var(--shadow);

    overflow: hidden;

}

.portal-table {

    width: 100%;

    border-collapse: collapse;

    font-size: 13px;

}

.portal-table th {

    text-align: left;

    padding: 15px 18px;

    background: #513320;

    color: white;

    white-space: nowrap;

    font-size: 12px;

}

.portal-table td {

    padding: 16px 18px;

    border-bottom: 1px solid #efe7db;

    color: #5b4f44;

    vertical-align: middle;

}

.portal-table tbody tr:last-child td {

    border-bottom: 0;

}

.portal-table tbody tr:hover {

    background: #fffcf6;

}

.portal-table strong {

    font-weight: 800;

    color: #463325;

}

.portal-table .cell-amount {

    white-space: nowrap;

    font-weight: 850;

    color: #5a321d;

}

.table-tag {

    display: inline-block;

    background: #eaf0de;

    color: #47653a;

    font-size: 10px;

    font-weight: 850;

    padding: 6px 9px;

    border-radius: 100px;

    white-space: nowrap;

}

.portal-table td.table-empty {

    text-align: center;

    padding: 30px;

    color: #82756a;

}

/* ==========================================

   INFORMASI

   ========================================== */

.about-strip {

    display: flex;

    align-items: center;

    gap: 19px;

    background: #eff4e9;

    border: 1px solid #d9e5d5;

    border-radius: 18px;

    padding: 22px 25px;

    margin-top: 30px;

}

.about-emblem {

    font-size: 47px;

    color: #637e49;

    line-height: 1;

}

.about-strip h2 {

    margin: 0 0 7px;

    font-size: 18px;

    color: #325a38;

}

.about-strip p {

    font-size: 12px;

    color: #62705e;

    margin: 0;

    line-height: 1.7;

    max-width: 800px;

}

/* ==========================================

   HALAMAN DALAM

   ========================================== */

.page-banner {

    background: linear-gradient(105deg, #f6eddb, #e9efda);

    border-bottom: 1px solid #e6d8bd;

}

.page-banner-inner {

    min-height: 205px;

    padding-top: 36px;

    padding-bottom: 36px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

}

.page-banner h1 {

    font-size: clamp(27px, 3.7vw, 43px);

    line-height: 1.2;

    color: #4c2c1c;

    margin: 4px 0 8px;

}

.page-banner p {

    margin: 0;

    color: #776c5e;

    font-size: 14px;

    max-width: 650px;

}

.banner-emblem {

    font-size: 91px;

    color: #b4b998;

    opacity: .65;

    line-height: 1;

}

.back-link {

    display: inline-block;

    font-size: 12px;

    font-weight: 850;

    color: #5a3e27;

    margin-bottom: 15px;

    text-decoration: none;

}

.regu-art-large {

    width: 104px;

    height: 104px;

    border-radius: 23px;

}

.regu-art-large > span {

    font-size: 56px;

}

/* PERINGATAN DAN PENJELASAN */

.notice,

.explainer {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    padding: 17px 20px;

    border-radius: 13px;

    margin-bottom: 24px;

    background: #fff5df;

    border: 1px solid #e8d6ae;

    color: #6c5028;

}

.notice-icon {

    font-size: 22px;

    line-height: 1.2;

}

.notice strong {

    font-size: 13px;

}

.notice p,

.explainer p {

    font-size: 12px;

    line-height: 1.75;

    margin: 4px 0 0;

}

.explainer {

    background: #eff5e9;

    border-color: #dce7d1;

    color: #50694b;

    margin-top: 28px;

}

.explainer > span {

    font-size: 23px;

}

/* FILTER REGU */

.filter-row {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 23px;

}

.filter-pill {

    min-height: 43px;

    display: inline-flex;

    align-items: center;

    border: 1px solid #d6bd9d;

    border-radius: 100px;

    background: white;

    padding: 10px 19px;

    color: #603d28;

    text-decoration: none;

    font-size: 12px;

    font-weight: 850;

}

.filter-pill:hover {

    background: #f8f0e4;

}

.filter-pill.selected {

    background: #315b3b;

    color: white;

    border-color: #315b3b;

}

/* DETAIL REGU */

.detail-stats {

    display: grid;

    grid-template-columns: 1.2fr 1fr;

    gap: 18px;

    margin-bottom: 36px;

}

.detail-balance {

    border-radius: 18px;

    background: linear-gradient(110deg, #2b613d, #194d35);

    color: white;

    padding: 27px 30px;

}

.detail-balance small {

    color: #d6e8d8;

    font-size: 12px;

}

.detail-balance strong {

    display: block;

    margin: 9px 0;

    font-size: clamp(25px, 3vw, 36px);

    line-height: 1.15;

    overflow-wrap: anywhere;

}

.detail-balance p {

    color: #e0eee3;

    font-size: 12px;

    margin: 0;

}

.detail-small-stats {

    display: grid;

    gap: 13px;

}

.detail-small-stats > div {

    background: #fff8ee;

    border: 1px solid #ebdcca;

    border-radius: 15px;

    padding: 19px;

    display: flex;

    flex-direction: column;

    justify-content: center;

}

.detail-small-stats span {

    font-size: 11px;

    color: #70675d;

}

.detail-small-stats strong {

    font-size: 22px;

    color: #573620;

    overflow-wrap: anywhere;

}

/* TOTAL PENGELUARAN */

.expense-summary {

    display: flex;

    align-items: center;

    gap: 17px;

    background: #fff0d8;

    border: 1px solid #ead2ab;

    border-radius: 16px;

    padding: 24px;

    margin-bottom: 28px;

    max-width: 530px;

}

.expense-summary small {

    display: block;

    font-size: 12px;

    color: #765a38;

}

.expense-summary strong {

    display: block;

    font-size: clamp(25px, 3vw, 34px);

    color: #245539;

    margin-top: 6px;

}

.expense-summary .summary-icon {

    background: #644026;

}

/* KOMPONEN LAINNYA */

.soft-panel,

.empty-state {

    background: #fff8eb;

    border: 1px solid #ecdfca;

    border-radius: 15px;

    padding: 23px;

    color: #7c684e;

    font-size: 13px;

    line-height: 1.7;

}

.empty-state {

    grid-column: 1 / -1;

}

.portal-pagination {

    margin-top: 22px;

}

.portal-pagination nav {

    max-width: 100%;

}

.text-deficit,

.summary-value.text-deficit,

.regu-finance strong.text-deficit {

    color: #ae473a;

}

.detail-balance .text-deficit {

    color: #ffe2a5;

}

/* ==========================================

   FOOTER

   ========================================== */

.site-footer {

    background: #432a1b;

    color: #f7efde;

    border-top: 5px solid #a27d4c;

}

.footer-content {

    min-height: 105px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 22px;

    padding-top: 19px;

    padding-bottom: 19px;

}

.footer-brand {

    display: flex;

    gap: 14px;

    align-items: center;

}

.footer-logo {

    font-size: 42px;

    color: #e5c68c;

}

.footer-brand strong {

    display: block;

    font-size: 15px;

}

.footer-brand small {

    display: block;

    font-size: 11px;

    color: #dbcebd;

    margin-top: 6px;

}

.footer-note {

    color: #dcccb6;

    font-size: 11px;

    text-align: right;

}

/* ==========================================

   RESPONSIVE LAPTOP / TABLET

   ========================================== */

@media (max-width: 1100px) {

    .summary-row {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

    .regu-grid {

        grid-template-columns: repeat(3, minmax(0, 1fr));

    }

    .hero-photo {

        width: 72%;

    }

    .hero-shade {

        background: linear-gradient(

            90deg,

            rgba(30, 40, 26, .98) 0%,

            rgba(33, 45, 29, .92) 35%,

            rgba(34, 47, 30, .63) 61%,

            rgba(29, 39, 29, .1) 100%

        );

    }

    .hero-copy {

        max-width: 540px;

    }

}

@media (max-width: 800px) {

    .desktop-nav {

        display: none;

    }

    .mobile-nav {

        display: block;

    }

    .nav-wrap {

        min-height: 69px;

    }

    .hero-banner,

    .hero-inner {

        min-height: 405px;

    }

    .hero-copy {

        max-width: 520px;

    }

    .hero-copy h1 {

        font-size: 40px;

    }

    .hero-photo {

        width: 100%;

        opacity: .65;

    }

    .hero-shade {

        background: linear-gradient(

            90deg,

            rgba(29, 39, 26, .97),

            rgba(29, 39, 26, .58)

        );

    }

    .regu-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

    .summary-card {

        min-height: 105px;

    }

}

/* ==========================================

   RESPONSIVE HP

   ========================================== */

@media (max-width: 600px) {

    .site-container {

        width: min(100% - 28px, 1220px);

    }

    .brand {

        gap: 8px;

    }

    .brand-symbol {

        font-size: 34px;

    }

    .brand-words strong {

        font-size: 13px;

    }

    .brand-words small {

        font-size: 8px;

        letter-spacing: .8px;

    }

    /* FOTO DI ATAS, TEKS DI BAWAH */

    .hero-banner {

        display: flex;

        flex-direction: column;

        align-items: stretch;

        background: #263b2a;

        min-height: 0;

    }

    .hero-photo {

        position: relative;

        z-index: auto;

        width: 100%;

        height: 250px;

        opacity: 1;

        object-fit: cover;

        object-position: center 38%;

        order: 0;

    }

    .hero-shade {

        display: none;

    }

    .hero-inner {

        width: 100%;

        min-height: 0;

        order: 1;

        background: linear-gradient(

            135deg,

            #2a402f,

            #253326

        );

        padding: 0 14px;

    }

    .hero-copy {

        padding: 25px 0 40px;

        max-width: none;

    }

    .hero-eyebrow {

        font-size: 10px;

    }

    .hero-copy h1 {

        font-size: clamp(30px, 8.1vw, 41px);

        letter-spacing: -1px;

        margin: 15px 0;

    }

    .hero-copy p {

        font-size: 13px;

        line-height: 1.7;

        margin-bottom: 20px;

    }

    .hero-buttons {

        display: grid;

        grid-template-columns: 1fr;

        gap: 9px;

    }

    .action-btn {

        min-height: 48px;

        font-size: 13px;

    }

    .hero-photo-label {

        position: absolute;

        right: 14px;

        top: -27px;

        bottom: auto;

        font-size: 9px;

        padding: 4px 7px;

    }

    /* RINGKASAN */

    .home-content,

    .page-content {

        padding-top: 22px;

        padding-bottom: 43px;

    }

    .summary-row {

        gap: 10px;

        margin-bottom: 36px;

    }

    .summary-card {

        min-height: 119px;

        padding: 15px 12px;

        display: flex;

        align-items: flex-start;

        flex-direction: column;

        gap: 7px;

    }

    .summary-icon {

        width: 35px;

        height: 35px;

        flex: 0 0 35px;

        font-size: 20px;

    }

    .summary-label {

        font-size: 11px;

    }

    .summary-value {

        font-size: clamp(17px, 5vw, 21px);

    }

    .summary-unavailable {

        font-size: 12px;

    }

    /* JUDUL BAGIAN */

    .content-section {

        margin-top: 33px;

        margin-bottom: 34px;

    }

    .section-title-row {

        align-items: flex-start;

    }

    .section-title-group {

        gap: 9px;

    }

    .section-title-group h2 {

        font-size: 22px;

    }

    .section-title-group p {

        font-size: 11px;

    }

    .section-deco {

        width: 40px;

        height: 40px;

        font-size: 21px;

    }

    .section-more {

        font-size: 11px;

        min-height: 39px;

        padding: 9px 13px;

    }

    /* KARTU REGU */

    .regu-grid {

        gap: 11px;

    }

    .regu-card {

        padding: 13px;

        border-radius: 13px;

    }

    .regu-art {

        width: 59px;

        height: 59px;

        border-radius: 12px;

    }

    .regu-art > span {

        font-size: 33px;

    }

    .regu-kind {

        font-size: 9px;

        padding: 4px 6px;

    }

    .regu-card h3 {

        font-size: 15px;

        margin-top: 12px;

    }

    .regu-meta {

        font-size: 11px;

    }

    .regu-finance {

        padding: 10px;

    }

    .regu-finance strong {

        font-size: 17px;

    }

    .regu-finance strong.pending-amount {

        font-size: 11px;

    }

    .regu-card-link {

        font-size: 10px;

    }

    /* TABEL MENJADI KARTU DI HP */

    .table-card {

        background: transparent;

        border: 0;

        box-shadow: none;

        overflow: visible;

    }

    .portal-table,

    .portal-table tbody {

        display: block;

        width: 100%;

    }

    .portal-table thead {

        display: none;

    }

    .portal-table tr {

        display: block;

        background: white;

        border: 1px solid #e8d8c3;

        border-radius: 13px;

        padding: 8px 14px;

        margin-bottom: 11px;

        box-shadow: 0 3px 10px rgba(65, 44, 23, .04);

    }

    .portal-table td {

        display: flex;

        justify-content: space-between;

        align-items: flex-start;

        gap: 12px;

        padding: 10px 0;

        border-bottom: 1px solid #f0e6d7;

        font-size: 12px;

        text-align: right;

        overflow-wrap: anywhere;

    }

    .portal-table td::before {

        content: attr(data-label);

        flex: 0 0 37%;

        font-weight: 750;

        color: #836c53;

        text-align: left;

    }

    .portal-table td:last-child {

        border: 0;

    }

    .portal-table td.table-empty {

        display: block;

        text-align: center;

    }

    .portal-table td.table-empty::before {

        display: none;

    }

    .portal-table .cell-amount {

        white-space: normal;

    }

    /* HALAMAN DALAM */

    .page-banner-inner {

        min-height: 165px;

        padding-top: 28px;

        padding-bottom: 28px;

    }

    .page-banner h1 {

        font-size: 29px;

    }

    .page-banner p {

        font-size: 12px;

    }

    .banner-emblem {

        font-size: 60px;

    }

    .regu-art-large {

        width: 73px;

        height: 73px;

        flex-shrink: 0;

    }

    .regu-art-large > span {

        font-size: 43px;

    }

    .detail-stats {

        grid-template-columns: 1fr;

        gap: 12px;

    }

    .detail-balance {

        padding: 23px;

    }

    .detail-small-stats {

        grid-template-columns: 1fr 1fr;

    }

    .detail-small-stats > div {

        padding: 13px;

    }

    .detail-small-stats strong {

        font-size: 17px;

    }

    .filter-pill {

        font-size: 11px;

        padding: 9px 13px;

        min-height: 40px;

    }

    .about-strip {

        align-items: flex-start;

        padding: 17px;

    }

    .about-emblem {

        font-size: 33px;

    }

    .about-strip h2 {

        font-size: 15px;

    }

    .about-strip p {

        font-size: 11px;

    }

    .footer-content {

        align-items: flex-start;

        flex-direction: column;

        min-height: 0;

        gap: 14px;

    }

    .footer-note {

        text-align: left;

    }

}

/* HP KECIL */

@media (max-width: 380px) {

    .regu-grid {

        grid-template-columns: 1fr;

    }

    .regu-card-head {

        justify-content: flex-start;

        gap: 12px;

    }

    .regu-card h3 {

        font-size: 17px;

    }

    .regu-finance strong {

        font-size: 19px;

    }

    .brand-words strong {

        font-size: 11px;

    }

    .brand-words small {

        letter-spacing: 0;

    }

    .page-banner-inner {

        gap: 7px;

    }

    .regu-art-large {

        width: 64px;

        height: 64px;

    }

}

/* AKSESIBILITAS */

@media (prefers-reduced-motion: reduce) {

    *,

    *::before,

    *::after {

        scroll-behavior: auto !important;

        transition-duration: 0s !important;

        animation-duration: 0s !important;

    }

}

/* ==========================================
   ANIMASI BERANDA V4 — HALUS & RESPONSIF
   Animasi CSS berjalan saat halaman dibuka.
   Animasi scroll membutuhkan portal-animation.js.
   ========================================== */

@keyframes pramukaFadeLeft {
    from { opacity: 0; transform: translateX(-35px); }
    to   { opacity: 1; transform: translateX(0); }
}

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

@keyframes pramukaImageIn {
    from { transform: scale(1.07); }
    to   { transform: scale(1); }
}

@media (prefers-reduced-motion: no-preference) {

    /* FOTO SISWA: transform saja agar opacity tablet tetap benar. */
    .hero-photo {
        animation: pramukaImageIn 1.6s ease-out both;
        transform-origin: center center;
    }

    /* ISI BANNER: masuk bertahap. */
    .hero-eyebrow {
        animation: pramukaFadeUp .65s ease-out .1s both;
    }

    .hero-copy h1 {
        animation: pramukaFadeLeft .85s ease-out .2s both;
    }

    .hero-copy p {
        animation: pramukaFadeUp .75s ease-out .35s both;
    }

    .hero-buttons {
        animation: pramukaFadeUp .75s ease-out .5s both;
    }

    /* EMPAT KARTU RINGKASAN. */
    .summary-card {
        animation: pramukaFadeUp .7s ease-out both;
    }

    .summary-card:nth-child(1) { animation-delay: .2s; }
    .summary-card:nth-child(2) { animation-delay: .32s; }
    .summary-card:nth-child(3) { animation-delay: .44s; }
    .summary-card:nth-child(4) { animation-delay: .56s; }

    /* INTERAKSI KARTU REGU dengan kursor / fokus keyboard. */
    .regu-art {
        transition: transform .3s ease;
    }

    .regu-card:hover .regu-art,
    .regu-card:focus-visible .regu-art {
        transform: translateY(-3px) rotate(-4deg) scale(1.06);
    }

    /* Elemen tidak disembunyikan jika JavaScript tidak berjalan.
       Kelas motion-ready ditambah HANYA jika IntersectionObserver aktif. */
    html.motion-ready .reveal-on-scroll {
        opacity: 0;
        transform: translateY(28px);
        transition: opacity .8s ease, transform .8s ease;
    }

    html.motion-ready .reveal-on-scroll.is-visible {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 600px) and (prefers-reduced-motion: no-preference) {
    /* Efek HP lebih singkat dan ringan. */
    .hero-photo {
        animation-duration: .9s;
    }
}

@media (prefers-reduced-motion: reduce) {
    /* Hormati pengaturan sistem pengguna. */
    .hero-photo,
    .hero-eyebrow,
    .hero-copy h1,
    .hero-copy p,
    .hero-buttons,
    .summary-card {
        animation: none !important;
    }

    .reveal-on-scroll,
    html.motion-ready .reveal-on-scroll {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}