/*
 * Tampilan NR Ponsel: arang + emas dari logo.
 * Emas hanya untuk aksen dan tombol utama; teks penting selalu gelap di atas terang.
 * Huruf dasar 18px, kontras tinggi, untuk pemakaian harian di PC.
 */
:root {
    --arang-0: #121215;
    --arang-1: #1b1b1f;
    --arang-2: #26262c;
    --emas: #e0ab1c;
    --emas-terang: #f6cd4f;
    --emas-tua: #8a6500;
    --krem: #f6f4ef;
    --garis: #e4ded2;
    --teks: #17171b;
    --teks-2: #5c5a55;
    --teks-3: #8f8a7e;
    --sudut: 14px;
    --huruf: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --huruf-judul: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;

    --bs-body-font-family: var(--huruf);
    --bs-body-color: var(--teks);
    --bs-body-bg: var(--krem);
    --bs-border-color: var(--garis);
    --bs-link-color: var(--emas-tua);
    --bs-link-color-rgb: 138, 101, 0;
    --bs-focus-ring-color: rgba(224, 171, 28, 0.35);
}

html {
    font-size: 18px;
}

body {
    background: var(--krem);
    color: var(--teks);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: var(--huruf-judul);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--teks);
}

/* ---------- Tombol dan pesan (dipakai di semua halaman) ---------- */
.tombol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    border: 0;
    border-radius: var(--sudut);
    padding: 0.8rem 1.4rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.tombol:focus-visible {
    outline: 3px solid var(--arang-1);
    outline-offset: 3px;
}

.tombol-emas {
    color: var(--arang-1);
    background: linear-gradient(180deg, var(--emas-terang) 0%, var(--emas) 55%, #c99410 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 10px 22px -10px rgba(170, 120, 0, 0.75);
}

.tombol-emas:hover {
    color: var(--arang-1);
    filter: brightness(1.05);
    transform: translateY(-1px);
}

.tombol-emas:active {
    transform: translateY(0);
    filter: brightness(0.97);
}

.pesan {
    border-radius: 12px;
    padding: 0.8rem 1rem;
    margin: 0 0 1.25rem;
    font-weight: 600;
    line-height: 1.4;
}

.pesan-gagal {
    background: #fdeceb;
    color: #8f1d14;
    border: 1px solid #f4c7c2;
}

.pesan-info {
    background: #f6f0df;
    color: #5e4500;
    border: 1px solid #e9dcb8;
}

/* ---------- Halaman masuk ---------- */
.masuk {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}

.masuk-merek {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    color: #fff;
    background:
        radial-gradient(circle at 50% 42%, rgba(224, 171, 28, 0.2), transparent 42%),
        radial-gradient(circle at 85% 100%, rgba(224, 171, 28, 0.1), transparent 45%),
        linear-gradient(160deg, var(--arang-2) 0%, var(--arang-1) 45%, var(--arang-0) 100%);
    border-right: 3px solid transparent;
    border-image: linear-gradient(180deg, transparent, var(--emas) 25%, var(--emas) 75%, transparent) 1;
}

/* Dua garis miring tipis, mengikuti sabetan di logo. */
.masuk-merek::before {
    content: "";
    position: absolute;
    inset: -30%;
    background:
        linear-gradient(118deg, transparent 49.75%, rgba(224, 171, 28, 0.32) 49.85%, transparent 50%),
        linear-gradient(118deg, transparent 52.9%, rgba(224, 171, 28, 0.16) 53%, transparent 53.1%);
    pointer-events: none;
}

/* Titik halus di latar, memudar ke tepi. */
.masuk-merek::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.5px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 0%, transparent 70%);
    mask-image: radial-gradient(circle at 50% 45%, #000 0%, transparent 70%);
    pointer-events: none;
}

.masuk-merek-isi {
    position: relative;
    z-index: 1;
    text-align: center;
}

.masuk-logo {
    width: clamp(200px, 25vw, 330px);
    height: auto;
    filter: drop-shadow(0 18px 40px rgba(224, 171, 28, 0.28));
    animation: muncul 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.masuk-slogan {
    margin: 1.5rem 0 0;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #dcd5c3;
}

.masuk-slogan span {
    color: var(--emas);
    margin: 0 0.35rem;
}

.masuk-merek-kaki {
    position: absolute;
    z-index: 1;
    bottom: 1.75rem;
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.42);
}

.masuk-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background:
        radial-gradient(circle at 100% 0%, rgba(224, 171, 28, 0.09), transparent 40%),
        var(--krem);
}

.masuk-form {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 450px;
    padding: 2.75rem 2.5rem 2.25rem;
    background: #fff;
    border: 1px solid rgba(228, 222, 210, 0.9);
    border-radius: 24px;
    box-shadow: 0 1px 2px rgba(20, 20, 24, 0.04), 0 24px 48px -20px rgba(20, 20, 24, 0.22);
    animation: naik 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s both;
}

.masuk-form::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #c99410, var(--emas-terang), #c99410);
}

.masuk-sapa {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--emas-tua);
}

.masuk-form h1 {
    margin: 0.3rem 0 0.45rem;
    font-size: 1.75rem;
}

.masuk-sub {
    margin: 0 0 1.75rem;
    color: var(--teks-2);
}

.label {
    display: block;
    margin-bottom: 0.45rem;
    font-weight: 700;
}

.kolom {
    position: relative;
    margin-bottom: 1.3rem;
}

.kolom input {
    width: 100%;
    height: 3.3rem;
    padding: 0 1rem 0 3.1rem;
    font-size: 1.05rem;
    color: var(--teks);
    background: #fbfaf7;
    border: 1.5px solid var(--garis);
    border-radius: var(--sudut);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.kolom input#password {
    padding-right: 3.6rem;
}

.kolom input:hover {
    border-color: #cdc4b1;
}

.kolom input:focus {
    outline: none;
    background: #fff;
    border-color: #c99410;
    box-shadow: 0 0 0 4px rgba(224, 171, 28, 0.22);
}

.kolom svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kolom-ikon {
    position: absolute;
    left: 1.05rem;
    top: 50%;
    width: 1.25rem;
    height: 1.25rem;
    transform: translateY(-50%);
    color: var(--teks-3);
    pointer-events: none;
    transition: color 0.15s ease;
}

.kolom:focus-within .kolom-ikon {
    color: var(--emas-tua);
}

.kolom-lihat {
    position: absolute;
    right: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 2.7rem;
    height: 2.7rem;
    padding: 0;
    color: #6f6a5f;
    background: transparent;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
}

.kolom-lihat:hover {
    background: #f1ede4;
    color: var(--teks);
}

.kolom-lihat:focus-visible {
    outline: 3px solid rgba(224, 171, 28, 0.6);
}

.kolom-lihat svg {
    width: 1.35rem;
    height: 1.35rem;
}

.kolom-lihat .ikon-mata-tutup,
.kolom-lihat[aria-pressed="true"] .ikon-mata {
    display: none;
}

.kolom-lihat[aria-pressed="true"] .ikon-mata-tutup {
    display: block;
}

.capslock {
    margin: -0.55rem 0 1.1rem;
    padding: 0.35rem 0.75rem;
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    color: #7a4f00;
    background: #fff4d4;
    border-radius: 8px;
}

.tombol-masuk {
    width: 100%;
    height: 3.4rem;
    margin-top: 0.35rem;
    font-size: 1.1rem;
}

.tombol-masuk svg {
    width: 1.3rem;
    height: 1.3rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.15s ease;
}

.tombol-masuk:hover svg {
    transform: translateX(3px);
}

.tombol-masuk.sedang-proses {
    pointer-events: none;
    cursor: wait;
    filter: saturate(0.6);
}

.masuk-catatan {
    margin: 1.5rem 0 0;
    text-align: center;
    font-size: 0.9rem;
    color: var(--teks-2);
}

.masuk-panel {
    position: relative;
}

.masuk-hak {
    position: absolute;
    bottom: 0.9rem;
    margin: 0;
    font-size: 0.8rem;
    color: var(--teks-3);
}

@keyframes naik {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
}

@keyframes muncul {
    from { opacity: 0; transform: scale(0.94); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
    .masuk {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .masuk-merek {
        padding: 2.25rem 1.5rem 2rem;
        border-right: 0;
        border-bottom: 3px solid transparent;
        border-image: linear-gradient(90deg, transparent, var(--emas) 25%, var(--emas) 75%, transparent) 1;
    }

    .masuk-logo {
        width: 140px;
    }

    .masuk-slogan {
        margin-top: 1rem;
        font-size: 0.72rem;
        letter-spacing: 0.12em;
    }

    .masuk-form h1 {
        font-size: 1.5rem;
    }

    .masuk-merek-kaki {
        display: none;
    }

    .masuk-panel {
        padding: 1.75rem 1rem 3.25rem;
    }

    .masuk-form {
        padding: 2.25rem 1.5rem 1.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ---------- Bilah atas dan isi halaman aplikasi ---------- */
.bilah-atas {
    color: #fff;
    background: linear-gradient(180deg, var(--arang-2), var(--arang-1));
    border-bottom: 3px solid var(--emas);
}

.bilah-atas-isi {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.65rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.merek {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: #fff;
    font-family: var(--huruf-judul);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-decoration: none;
}

.merek:hover {
    color: var(--emas-terang);
}

.bilah-pengguna {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.bilah-pengguna form {
    margin: 0;
}

.bilah-nama {
    text-align: right;
    font-weight: 600;
    line-height: 1.2;
}

.bilah-nama small {
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--emas-terang);
}

/* ---------- Menu akun di bilah atas (Profil, Keluar) ---------- */
.akun-tombol {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.3rem 0.6rem 0.3rem 0.3rem;
    font: inherit;
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.akun-tombol:hover,
.akun-tombol[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(246, 205, 79, 0.55);
}

.akun-tombol:focus-visible {
    outline: 3px solid var(--emas);
    outline-offset: 2px;
}

.akun-tombol .bilah-nama {
    text-align: left;
}

.akun-panah {
    width: 1.1rem;
    height: 1.1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.2s ease;
}

.akun-tombol[aria-expanded="true"] .akun-panah {
    transform: rotate(180deg);
}

.foto-profil {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    object-fit: cover;
    border: 2px solid var(--emas);
    border-radius: 999px;
}

.foto-profil-inisial {
    font-family: var(--huruf-judul);
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--arang-1);
    background: linear-gradient(160deg, var(--emas-terang), var(--emas));
}

.foto-profil-besar {
    width: 8rem;
    height: 8rem;
    font-size: 2.6rem;
    border-width: 3px;
    box-shadow: 0 10px 24px -14px rgba(18, 18, 21, 0.55);
}

.akun-menu {
    min-width: 15rem;
    margin-top: 0.6rem !important;
    padding: 0.5rem;
    font-size: 1rem;
    border: 1px solid var(--garis);
    border-radius: var(--sudut);
    box-shadow: 0 18px 40px -16px rgba(18, 18, 21, 0.45);
}

.akun-menu.show {
    animation: naik 0.2s ease both;
}

.akun-menu-kepala {
    padding: 0.35rem 0.75rem 0.55rem;
    line-height: 1.25;
}

.akun-menu-kepala strong,
.akun-menu-kepala small {
    display: block;
    overflow-wrap: anywhere;
}

.akun-menu-kepala small {
    margin-top: 0.15rem;
    font-size: 0.82rem;
    color: var(--teks-2);
}

.akun-menu form {
    margin: 0;
}

.akun-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.75rem;
    font-weight: 600;
    color: var(--teks);
    border-radius: 10px;
    transition: background-color 0.15s ease;
}

.akun-menu .dropdown-item svg {
    width: 1.2rem;
    height: 1.2rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.akun-menu .dropdown-item:hover,
.akun-menu .dropdown-item:focus {
    color: var(--teks);
    background: #fbf0cc;
}

.akun-menu .dropdown-item:active {
    background: #f4e2a6;
}

.akun-menu .akun-keluar {
    color: #b42318;
}

.akun-menu .akun-keluar:hover,
.akun-menu .akun-keluar:focus {
    color: #b42318;
    background: #fdecea;
}

.akun-menu .dropdown-divider {
    margin: 0.35rem 0;
    border-color: var(--garis);
}

.isi {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.5rem 3rem;
}

.sapaan {
    margin-bottom: 1.5rem;
}

.sapaan-tanggal {
    margin: 0;
    font-weight: 600;
    color: var(--teks-2);
}

.sapaan h1 {
    margin: 0.15rem 0 0;
    font-size: 2rem;
}

.kartu {
    padding: 1.5rem;
    background: #fff;
    border: 1px solid var(--garis);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(20, 20, 24, 0.04);
}

.kartu-kosong p {
    margin: 0;
    color: var(--teks-2);
}

@media (max-width: 600px) {
    .bilah-atas-isi {
        padding: 0.6rem 1rem;
    }

    .merek span,
    .akun-tombol .bilah-nama {
        display: none;
    }

    .akun-tombol {
        gap: 0.35rem;
        padding-right: 0.45rem;
    }

    .isi {
        padding: 1.5rem 1rem 2.5rem;
    }
}

/* ---------- Efek masuk halaman (halus, tidak menunda input) ---------- */
.isi > * {
    animation: naik 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.isi > *:nth-child(2) { animation-delay: 0.05s; }
.isi > *:nth-child(3) { animation-delay: 0.1s; }
.isi > *:nth-child(n+4) { animation-delay: 0.15s; }

/* ---------- Tombol tambahan ---------- */
.tombol-abu {
    color: var(--teks);
    background: #f1ede4;
    border: 1px solid var(--garis);
}

.tombol-abu:hover {
    background: #e9e3d6;
}

.tombol-merah {
    color: #fff;
    background: linear-gradient(180deg, #d9473a, #b42318);
    box-shadow: 0 10px 22px -10px rgba(180, 35, 24, 0.7);
}

.tombol-merah:hover {
    color: #fff;
    filter: brightness(1.05);
    transform: translateY(-1px);
}

.tombol.sedang-proses {
    pointer-events: none;
    cursor: wait;
    filter: saturate(0.6);
    opacity: 0.85;
}

/* ---------- Konfirmasi (modal Bootstrap) ---------- */
.konfirmasi .modal-dialog {
    max-width: 440px;
    padding: 0 1rem;
    margin-left: auto;
    margin-right: auto;
}

.konfirmasi .modal-content {
    padding: 2rem 1.75rem 1.5rem;
    text-align: center;
    border: 0;
    border-radius: 24px;
    box-shadow: 0 30px 60px -20px rgba(20, 20, 24, 0.45);
}

.konfirmasi.fade .modal-dialog {
    transform: scale(0.92);
    transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.konfirmasi.show .modal-dialog {
    transform: none;
}

.konfirmasi-ikon {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1rem;
    color: var(--emas-tua);
    background: #fbf3dc;
    border-radius: 50%;
}

.konfirmasi-bahaya .konfirmasi-ikon {
    color: #b42318;
    background: #fdeceb;
}

.konfirmasi-ikon svg,
.notif-ikon svg,
.ubin-ikon svg,
.kosong-tengah > svg,
.kembali svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.konfirmasi-ikon svg {
    width: 2rem;
    height: 2rem;
}

.konfirmasi-judul {
    margin: 0 0 0.5rem;
    font-size: 1.35rem;
}

.konfirmasi-pesan {
    margin: 0 0 1.5rem;
    color: var(--teks-2);
}

.konfirmasi-pesan:empty {
    display: none;
}

.konfirmasi-tombol {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.modal-backdrop.show {
    opacity: 0.55;
}

/* ---------- Notifikasi (toast Bootstrap) ---------- */
.notif-wadah {
    position: fixed;
    z-index: 1090;
    top: 5rem;
    right: 1rem;
    display: grid;
    gap: 0.6rem;
    width: min(380px, calc(100vw - 2rem));
}

.notif {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.85rem 0.9rem 0.85rem 1rem;
    color: #fff;
    background: var(--arang-1);
    border: 0;
    border-left: 4px solid var(--emas);
    border-radius: 0;
    box-shadow: 0 18px 40px -16px rgba(20, 20, 24, 0.55);
    font-weight: 600;
    line-height: 1.35;
}

.notif.show {
    animation: geser-masuk 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.notif-sukses { border-left-color: #3fb26b; }
.notif-gagal { border-left-color: #e5534b; }

.notif-ikon {
    flex: none;
    display: grid;
    place-items: center;
    color: var(--emas-terang);
}

.notif-sukses .notif-ikon { color: #6fd49a; }
.notif-gagal .notif-ikon { color: #f08a83; }

.notif-ikon svg {
    width: 1.4rem;
    height: 1.4rem;
}

.notif-pesan {
    flex: 1;
}

.notif-tutup {
    flex: none;
    width: 2rem;
    height: 2rem;
    padding: 0;
    font-size: 1.4rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.6);
    background: transparent;
    border: 0;
    border-radius: 8px;
}

.notif-tutup:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

@keyframes geser-masuk {
    from { opacity: 0; transform: translateX(24px); }
    to { opacity: 1; transform: none; }
}

/* ---------- Judul halaman ---------- */
.judul-halaman h1 {
    margin: 0.35rem 0;
    font-size: 2rem;
}

.judul-halaman {
    margin-bottom: 1.5rem;
}

.judul-halaman p {
    margin: 0;
    max-width: 52rem;
    color: var(--teks-2);
}

.kembali {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    color: var(--emas-tua);
    text-decoration: none;
}

.kembali:hover {
    color: #5e4500;
}

.kembali svg {
    width: 1.1rem;
    height: 1.1rem;
    transition: transform 0.15s ease;
}

.kembali:hover svg {
    transform: translateX(-3px);
}

.kosong-tengah {
    text-align: center;
    padding: 2.5rem 1.5rem;
}

.kosong-tengah > svg {
    width: 3rem;
    height: 3rem;
    color: var(--emas);
    margin-bottom: 0.75rem;
}

.kosong-tengah h2 {
    font-size: 1.25rem;
    margin: 0 0 0.4rem;
}

.kosong-tengah p {
    max-width: 34rem;
    margin: 0 auto;
}

/* ---------- Beranda: angka ringkas, ubin, Lainnya ---------- */
.beranda-bagian {
    margin-bottom: 1.75rem;
}

.beranda-judul {
    margin: 0 0 0.75rem;
    font-family: var(--huruf);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--teks-3);
}

.angka-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.angka {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 1.1rem 1.25rem;
    background: #fff;
    border: 1px solid var(--garis);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(20, 20, 24, 0.04);
}

.angka-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--teks-2);
}

.angka-nilai {
    font-family: var(--huruf-judul);
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.angka-merah {
    color: #8f1d14;
}

.lainnya {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.lainnya-tombol {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.1rem;
    font-weight: 700;
    color: var(--teks);
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--garis);
    border-radius: 999px;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.lainnya-tombol:hover {
    color: var(--teks);
    border-color: #e6cf8f;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -14px rgba(20, 20, 24, 0.35);
}

.lainnya-tombol:focus-visible {
    outline: 3px solid var(--emas);
    outline-offset: 3px;
}

.lainnya-tombol svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: var(--emas-tua);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ubin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}

.ubin {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.4rem;
    color: var(--teks);
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--garis);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(20, 20, 24, 0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.ubin:hover {
    color: var(--teks);
    transform: translateY(-3px);
    border-color: #e6cf8f;
    box-shadow: 0 18px 36px -18px rgba(20, 20, 24, 0.3);
}

.ubin:focus-visible {
    outline: 3px solid var(--emas);
    outline-offset: 3px;
}

.ubin-ikon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 0.5rem;
    color: var(--emas-terang);
    background: linear-gradient(160deg, var(--arang-2), var(--arang-1));
    border-radius: 14px;
}

.ubin-ikon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.ubin-judul {
    font-family: var(--huruf-judul);
    font-size: 1.15rem;
    font-weight: 800;
}

.ubin-ket {
    color: var(--teks-2);
    font-size: 0.92rem;
}

/* ---------- Kelola Izin ---------- */
.izin-kelompok {
    margin-bottom: 1rem;
}

.izin-kelompok h2,
.riwayat h2 {
    margin: 0 0 0.75rem;
    font-size: 1.2rem;
}

.izin-tabel {
    width: 100%;
    border-collapse: collapse;
}

.izin-tabel th,
.izin-tabel td {
    padding: 0.75rem 0.5rem;
    border-top: 1px solid var(--garis);
    vertical-align: middle;
}

.izin-tabel thead th {
    border-top: 0;
    padding-top: 0;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--teks-3);
}

.izin-tabel tbody th {
    font-weight: 600;
}

.izin-nama {
    display: block;
}

.izin-kode {
    font-size: 0.75rem;
    color: var(--teks-3);
}

.izin-kolom-peran {
    width: 7rem;
    text-align: center;
}

.izin-tabel td.berubah {
    background: #fff8e3;
}

.saklar {
    position: relative;
    display: inline-block;
    width: 3.25rem;
    height: 1.9rem;
    cursor: pointer;
}

.saklar input {
    position: absolute;
    z-index: 1;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.saklar-tombol {
    position: absolute;
    inset: 0;
    background: #d9d3c6;
    border-radius: 999px;
    transition: background-color 0.18s ease;
}

.saklar-tombol::after {
    content: "";
    position: absolute;
    top: 0.2rem;
    left: 0.2rem;
    width: 1.5rem;
    height: 1.5rem;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.saklar input:checked + .saklar-tombol {
    background: linear-gradient(180deg, var(--emas-terang), #c99410);
}

.saklar input:checked + .saklar-tombol::after {
    transform: translateX(1.35rem);
}

.saklar input:focus-visible + .saklar-tombol {
    outline: 3px solid var(--arang-1);
    outline-offset: 2px;
}

.bilah-simpan {
    position: sticky;
    bottom: 1rem;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1.25rem 0 1.5rem;
    padding: 0.75rem 0.75rem 0.75rem 1.25rem;
    color: var(--teks-2);
    font-weight: 600;
    background: #fff;
    border: 1px solid var(--garis);
    border-radius: 18px;
    box-shadow: 0 18px 40px -20px rgba(20, 20, 24, 0.35);
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.ada-perubahan .bilah-simpan {
    color: #5e4500;
    background: #fff8e3;
    border-color: #e6cf8f;
}

/* ---------- Tabel umum ---------- */
.tabel-gulir {
    overflow-x: auto;
}

.tabel {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.tabel th,
.tabel td {
    padding: 0.6rem 0.75rem;
    border-top: 1px solid var(--garis);
    white-space: nowrap;
}

.tabel thead th {
    border-top: 0;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--teks-3);
}

.riwayat-kosong {
    margin: 0;
    color: var(--teks-2);
}

.lencana {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: 999px;
}

.lencana-hijau { color: #1d6b3a; background: #e3f5ea; }
.lencana-merah { color: #8f1d14; background: #fdeceb; }

@media (max-width: 600px) {
    .judul-halaman h1,
    .sapaan h1 {
        font-size: 1.6rem;
    }

    .izin-kolom-peran {
        width: 4.25rem;
    }

    .angka-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }

    .angka {
        padding: 0.85rem 1rem;
        border-radius: 14px;
    }

    .angka-label {
        font-size: 0.8rem;
    }

    .angka-nilai {
        font-size: 1.2rem;
    }

    .ubin-grid {
        gap: 0.75rem;
    }

    .ubin {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 1rem;
        row-gap: 0.1rem;
        align-items: center;
        padding: 1rem;
        border-radius: 14px;
    }

    .ubin-ikon {
        grid-row: span 2;
        margin: 0;
    }

    .bilah-simpan {
        padding-left: 1rem;
        font-size: 0.9rem;
    }
}

/* ---------- Isian form umum ---------- */
.isian {
    display: block;
    width: 100%;
    height: 3.1rem;
    margin-bottom: 1.1rem;
    padding: 0 1rem;
    font: inherit;
    font-size: 1rem;
    color: var(--teks);
    background: #fbfaf7;
    border: 1.5px solid var(--garis);
    border-radius: var(--sudut);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.isian:hover {
    border-color: #cdc4b1;
}

.isian:focus {
    outline: none;
    background: #fff;
    border-color: #c99410;
    box-shadow: 0 0 0 4px rgba(224, 171, 28, 0.22);
}

.isian[aria-describedby] {
    margin-bottom: 0.35rem;
}

.bantuan {
    margin: 0 0 1.1rem;
    font-size: 0.85rem;
    color: var(--teks-2);
}

.tombol-penuh {
    width: 100%;
    margin-top: 0.4rem;
}

.tombol-kecil {
    padding: 0.55rem 1rem;
    font-size: 0.92rem;
}

.lencana-emas { color: #5e4500; background: #fbf0cc; }

/* ---------- Profil ---------- */
.profil-tata {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: start;
}

.profil-tata h2 {
    margin: 0 0 1rem;
    font-size: 1.2rem;
}

.profil-foto-isi {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.profil-foto-nama {
    min-width: 0;
}

.profil-foto-nama strong,
.profil-foto-nama small {
    display: block;
    overflow-wrap: anywhere;
}

.profil-foto-nama strong {
    margin-bottom: 0.3rem;
    font-size: 1.2rem;
}

.profil-foto-nama small {
    margin-top: 0.45rem;
    font-size: 0.85rem;
    color: var(--teks-2);
}

.isian-berkas {
    height: auto;
    padding: 0.7rem 1rem;
}

.isian-berkas::file-selector-button {
    margin-right: 0.85rem;
    padding: 0.4rem 0.9rem;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--teks);
    background: #f1ede4;
    border: 1px solid var(--garis);
    border-radius: 10px;
    cursor: pointer;
}

.profil-hapus-foto {
    margin-top: 0.75rem;
}

@media (max-width: 900px) {
    .profil-tata {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 600px) {
    .profil-foto-isi {
        flex-direction: column;
        text-align: center;
    }
}

/* ---------- Kelola Pengguna ---------- */
.pengguna-tata {
    display: grid;
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
    margin-bottom: 1.25rem;
}

.pengguna-form h2,
.pengguna-daftar-kepala h2 {
    margin: 0 0 1rem;
    font-size: 1.2rem;
}

.pengguna-daftar-kepala {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.pengguna-daftar-kepala span {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--teks-2);
}

.pengguna-daftar {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pengguna-baris {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 0;
    border-top: 1px solid var(--garis);
}

.pengguna-info {
    min-width: 0;
}

.pengguna-nama {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
}

.pengguna-sub {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.85rem;
    color: var(--teks-2);
    overflow-wrap: anywhere;
}

.pengguna-nonaktif .pengguna-nama,
.pengguna-nonaktif .pengguna-sub {
    color: var(--teks-3);
}

.pengguna-aksi {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.pengguna-dipilih {
    margin: 0 -0.75rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    background: #fff8e3;
    border-radius: 12px;
}

.pengguna-form-ganti {
    border-color: #e6cf8f;
    box-shadow: 0 0 0 4px rgba(224, 171, 28, 0.15);
}

.pengguna-form-untuk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: -0.4rem 0 1.1rem;
    font-weight: 700;
}

.pengguna-form-untuk small {
    flex-basis: 100%;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--teks-2);
}

.pengguna-form-tombol {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    margin-top: 0.4rem;
    white-space: nowrap;
}

.pengguna-aksi form {
    margin: 0;
}

.pengguna-catatan {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--teks-3);
}

@media (max-width: 900px) {
    .pengguna-tata {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 600px) {
    /* Mode Ubah/Ganti password: tombol boleh turun baris agar kartu tidak melebar di HP. */
    .pengguna-form-tombol {
        white-space: normal;
    }

    .pengguna-baris {
        flex-wrap: wrap;
        gap: 0.6rem;
    }

    .pengguna-aksi {
        width: 100%;
        flex-wrap: nowrap;
    }

    .pengguna-aksi > *,
    .pengguna-aksi .tombol {
        flex: 1;
        width: 100%;
    }
}

/* ---------- Umum: ikon di tombol, angka rata kanan, sorotan hasil cari ---------- */
.tombol svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kanan {
    text-align: right;
}

mark {
    padding: 0 0.1em;
    color: inherit;
    background: #fbe7a6;
    border-radius: 3px;
}

.label-opsional {
    font-weight: 500;
    color: var(--teks-3);
}

.isian-panjang {
    height: auto;
    min-height: 5.5rem;
    padding: 0.7rem 1rem;
    line-height: 1.45;
    resize: vertical;
}

.riwayat-ubah {
    display: block;
    margin-top: 0.25rem;
    white-space: normal;
    min-width: 16rem;
    color: var(--teks-2);
}

.judul-dengan-aksi {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.judul-dengan-aksi > .tombol {
    flex: none;
}

/* ---------- Bilah atas: kolom cari barang ---------- */
.bilah-cari {
    position: relative;
    flex: 1;
    max-width: 30rem;
    margin: 0;
}

.bilah-cari svg {
    position: absolute;
    left: 0.9rem;
    top: 50%;
    width: 1.15rem;
    height: 1.15rem;
    transform: translateY(-50%);
    fill: none;
    stroke: rgba(255, 255, 255, 0.6);
    stroke-width: 2.2;
    stroke-linecap: round;
    pointer-events: none;
}

.bilah-cari input {
    width: 100%;
    height: 2.75rem;
    padding: 0 1rem 0 2.6rem;
    font: inherit;
    font-size: 0.98rem;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.bilah-cari input::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

.bilah-cari input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.14);
    border-color: var(--emas);
    box-shadow: 0 0 0 3px rgba(224, 171, 28, 0.3);
}

/* ---------- Data Barang ---------- */
.barang-cari {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 15rem) auto;
    gap: 0 1rem;
    align-items: end;
    margin-bottom: 1.25rem;
}

.barang-cari .isian {
    margin-bottom: 0;
}

.barang-cari-tombol {
    height: 3.1rem;
    min-width: 7rem;
}

.barang-cari-centang {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.85rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--teks-2);
    cursor: pointer;
}

.barang-cari-centang input {
    width: 1.2rem;
    height: 1.2rem;
    accent-color: var(--emas-tua);
}

.barang-hasil-kepala {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.barang-hasil-kepala h2 {
    margin: 0;
    font-size: 1.2rem;
}

.barang-hasil-kepala span {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--teks-2);
}

.barang-daftar {
    margin: 0;
    padding: 0;
    list-style: none;
}

.barang-baris {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 1.25rem;
    align-items: center;
    padding: 0.9rem 0.75rem;
    margin: 0 -0.75rem;
    border-top: 1px solid var(--garis);
    border-radius: 10px;
    transition: background-color 0.15s ease;
}

.barang-baris:hover {
    background: #fbf8f0;
}

.barang-info {
    min-width: 0;
}

.barang-nama {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-weight: 800;
}

.barang-tipe {
    display: block;
    margin-top: 0.1rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.barang-kategori {
    display: inline-block;
    margin-top: 0.3rem;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--teks-3);
}

.barang-nonaktif .barang-nama,
.barang-nonaktif .barang-tipe,
.barang-nonaktif .barang-harga dd {
    color: var(--teks-3);
}

.barang-harga {
    display: grid;
    grid-template-columns: repeat(3, 6.5rem);
    gap: 0.75rem;
    margin: 0;
    text-align: right;
}

.barang-dengan-modal .barang-harga {
    grid-template-columns: repeat(3, 6.5rem) 8rem;
}

.barang-harga dt {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--teks-3);
}

.barang-harga dd {
    margin: 0;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.barang-harga dd small {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--teks-2);
}

.barang-modal {
    padding-left: 0.75rem;
    border-left: 2px solid #f1e4bd;
}

.harga-ikut {
    font-size: 0.85rem;
    color: var(--teks-3);
}

.halaman-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--garis);
    font-weight: 700;
    color: var(--teks-2);
}

/* ---------- Tambah / Ubah Barang ---------- */
.barang-ubah-tata {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
    gap: 1.25rem;
    align-items: start;
    margin-bottom: 1.25rem;
}

.harga-isian {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 1rem;
}

.harga-isian .isian {
    margin-bottom: 0.35rem;
}

.isian-rupiah {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.barang-form-tombol {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.4rem;
}

.barang-samping {
    display: grid;
    gap: 1.25rem;
}

.barang-samping h2 {
    margin: 0 0 0.75rem;
    font-size: 1.2rem;
}

.barang-samping form {
    margin: 0;
}

.barang-samping .tombol-penuh + .tombol-penuh,
.barang-samping form + .tombol-penuh {
    margin-top: 0.6rem;
}

.barang-status-teks {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    color: var(--teks-2);
}

.barang-catatan {
    margin: 0.75rem 0 0;
}

@media (max-width: 1000px) {
    .barang-baris {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .barang-baris .barang-harga {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: start;
        text-align: left;
    }

    .barang-ubah {
        grid-column: 2;
        grid-row: 1;
    }

    .barang-ubah-tata {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .bilah-atas-isi {
        flex-wrap: wrap;
    }

    .bilah-cari {
        order: 3;
        flex-basis: 100%;
        max-width: none;
    }

    .judul-dengan-aksi {
        flex-direction: column;
        align-items: stretch;
    }

    .barang-cari {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }

    .barang-baris .barang-harga,
    .barang-dengan-modal .barang-harga {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .barang-modal {
        grid-column: 1 / -1;
        padding: 0.4rem 0 0;
        border-left: 0;
        border-top: 1px dashed #eadbb0;
    }

    .barang-modal dd small {
        display: inline;
        margin-left: 0.4rem;
    }

    .harga-isian {
        grid-template-columns: 1fr;
    }

    .barang-form-tombol {
        flex-direction: column-reverse;
    }

    .halaman-nav .tombol {
        padding: 0.7rem 0.9rem;
    }
}

/* ---------- Pelanggan ---------- */
.lencana-abu { color: var(--teks-2); background: #efebe2; }

.pilih-level {
    margin: 0 0 0.35rem;
    padding: 0;
    border: 0;
}

.pilih-level legend.label {
    float: none;
    font-size: 1rem;
    line-height: inherit;
}

.pilih-level-opsi {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    padding: 0.7rem 0.9rem;
    background: #fbfaf7;
    border: 1.5px solid var(--garis);
    border-radius: var(--sudut);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.pilih-level-opsi:hover {
    border-color: #cdc4b1;
}

.pilih-level-opsi:has(input:checked) {
    background: #fff8e3;
    border-color: #c99410;
}

.pilih-level-opsi input {
    flex: none;
    width: 1.2rem;
    height: 1.2rem;
    accent-color: var(--emas-tua);
}

.pilih-level-opsi span {
    color: var(--teks-2);
}

.pilih-level-opsi strong {
    display: inline-block;
    min-width: 4.5rem;
    color: var(--teks);
}

.pelanggan-cari {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 12rem) auto;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.pelanggan-cari .isian {
    margin: 0;
}

.pelanggan-hasil {
    margin: 0 0 0.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--teks-2);
}

@media (max-width: 600px) {
    .pelanggan-cari {
        grid-template-columns: 1fr;
    }
}

/* ---------- Pembelian: form, cari barang dengan daftar hasil, baris barang ---------- */
.pembelian-kepala {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 11rem) minmax(0, 1fr);
    gap: 0.85rem 1rem;
    margin-bottom: 1.25rem;
}

/* Jatuh tempo wajib dipilih: dua pilihan sebaris, kolom tanggal muncul bila memakai jatuh tempo. */
.pembelian-tempo {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 0.75rem;
    margin: 0;
    padding: 0;
    border: 0;
}

.pembelian-tempo legend {
    width: 100%;
    float: none;
    margin-bottom: 0;
    font-size: 1rem;
}

.pembelian-tempo .pilih-level-opsi {
    margin: 0;
}

.pembelian-tempo .pilih-level-opsi strong {
    min-width: 0;
}

.pembelian-tempo-tanggal {
    flex: 0 1 12rem;
    animation: muncul 0.2s ease;
}

.pembelian-tempo .pembelian-jatuh-tempo {
    flex-basis: 100%;
    margin-top: 0;
}

.pembelian-kepala-catatan {
    grid-column: 1 / -1;
}

.pembelian-jatuh-tempo {
    display: block;
    margin-top: 0.3rem;
}

.pembelian-kepala .isian {
    margin-bottom: 0;
}

.cari-barang {
    position: relative;
}

.cari-barang-kolom {
    position: relative;
}

.cari-barang-kolom svg {
    position: absolute;
    left: 1rem;
    top: 50%;
    width: 1.2rem;
    height: 1.2rem;
    transform: translateY(-50%);
    fill: none;
    stroke: var(--teks-3);
    stroke-width: 2.2;
    stroke-linecap: round;
    pointer-events: none;
}

.cari-barang-kolom .isian {
    height: 3.4rem;
    margin-bottom: 0.35rem;
    padding-left: 2.9rem;
    font-size: 1.1rem;
}

.cari-hasil {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    top: 5.6rem;
    max-height: 22rem;
    overflow-y: auto;
    padding: 0.35rem;
    background: #fff;
    border: 1px solid var(--garis);
    border-radius: var(--sudut);
    box-shadow: 0 22px 44px -18px rgba(20, 20, 24, 0.4);
    animation: muncul 0.15s ease-out both;
}

.cari-opsi {
    display: block;
    width: 100%;
    padding: 0.6rem 0.8rem;
    text-align: left;
    color: var(--teks);
    background: transparent;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
}

.cari-opsi:hover,
.cari-opsi.aktif {
    background: #fff4d4;
}

.cari-opsi-nama {
    display: block;
    font-weight: 700;
    line-height: 1.35;
}

.cari-opsi-info,
.cari-catatan {
    display: block;
    font-size: 0.85rem;
    color: var(--teks-2);
}

.cari-catatan {
    padding: 0.6rem 0.8rem;
}

.item-kepala,
.item-baris {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 7rem 10rem 9rem 2.75rem;
    gap: 0.75rem;
    align-items: center;
}

.item-kepala {
    margin-top: 0.75rem;
    padding: 0.5rem 0;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--teks-3);
    border-bottom: 1px solid var(--garis);
}

.item-daftar {
    margin: 0;
    padding: 0;
    list-style: none;
}

.item-baris {
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--garis);
    animation: naik 0.25s ease-out both;
}

.item-barang strong,
.item-barang span,
.item-barang small {
    display: block;
}

.item-barang span {
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.item-barang small {
    margin-top: 0.15rem;
    font-size: 0.8rem;
    color: var(--teks-2);
}

.item-isian {
    margin: 0;
}

.item-isian > span {
    display: none;
}

.item-isian .isian {
    margin: 0;
    height: 2.8rem;
}

.item-subtotal {
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.item-hapus {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.5rem;
    line-height: 1;
    color: #8f1d14;
    background: #fdeceb;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.item-hapus:hover {
    background: #f9d7d3;
}

.item-kosong {
    margin: 0;
    padding: 1.5rem 0 0.5rem;
    text-align: center;
    color: var(--teks-2);
}

.bilah-simpan-tombol {
    display: flex;
    gap: 0.6rem;
}

.total-besar {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--teks);
    font-variant-numeric: tabular-nums;
}

kbd {
    padding: 0.1rem 0.4rem;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--arang-1);
    background: rgba(255, 255, 255, 0.5);
    border-radius: 6px;
}

/* ---------- Pembelian: daftar dan rincian ---------- */
.pembelian-saring {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 1rem;
    margin-bottom: 1.25rem;
}

.pembelian-saring > div {
    flex: 1 1 12rem;
    max-width: 18rem;
}

.pembelian-saring .isian {
    margin: 0;
}

.pembelian-saring .tombol {
    height: 3.1rem;
}

.pembelian-daftar {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pembelian-baris {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    margin: 0 -0.75rem;
    padding: 0.85rem 0.75rem;
    color: var(--teks);
    text-decoration: none;
    border-top: 1px solid var(--garis);
    border-radius: 10px;
    transition: background-color 0.15s ease;
}

.pembelian-baris:hover {
    color: var(--teks);
    background: #fbf8f0;
}

.pembelian-tgl {
    font-weight: 700;
    color: var(--teks-2);
    font-variant-numeric: tabular-nums;
}

.pembelian-info strong {
    margin-right: 0.35rem;
}

.pembelian-info small {
    display: block;
    color: var(--teks-2);
    overflow-wrap: anywhere;
}

.pembelian-total {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.pembelian-batal .pembelian-info strong,
.pembelian-batal .pembelian-total {
    color: var(--teks-3);
    text-decoration: line-through;
}

.judul-aksi-grup {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.pembelian-catatan {
    margin: 0 0 0.75rem;
}

.tabel-rincian td {
    vertical-align: top;
}

.tabel-rincian tfoot td {
    font-weight: 800;
    border-top: 2px solid var(--garis);
}

.rincian-barang {
    white-space: normal !important;
    min-width: 16rem;
}

.rincian-barang strong,
.rincian-barang span,
.rincian-barang small {
    display: block;
}

.rincian-barang small {
    color: var(--teks-2);
}

.pembelian-batal-form {
    margin-top: 1.25rem;
    border-color: #f4c7c2;
}

.pembelian-batal-form h2 {
    margin: 0 0 0.4rem;
    font-size: 1.2rem;
}

.pembelian-batal-form p {
    color: var(--teks-2);
}

.pembelian-batal-baris {
    display: flex;
    gap: 0.75rem;
}

.pembelian-batal-baris .isian {
    margin: 0;
}

.pembelian-batal-baris .tombol {
    flex: none;
}

@media (max-width: 900px) {
    .pembelian-kepala {
        grid-template-columns: 1fr 1fr;
        gap: 0.85rem 1rem;
    }

    .pembelian-kepala-catatan {
        grid-column: 1 / -1;
    }

    .item-kepala {
        display: none;
    }

    .item-baris {
        grid-template-columns: 1fr 1fr 2.75rem;
        gap: 0.5rem 0.75rem;
    }

    .item-barang {
        grid-column: 1 / 3;
    }

    .item-hapus {
        grid-column: 3;
        grid-row: 1;
    }

    .item-isian > span {
        display: block;
        margin-bottom: 0.2rem;
        font-size: 0.8rem;
        font-weight: 700;
        color: var(--teks-2);
    }

    .item-subtotal {
        grid-column: 1 / -1;
    }

    .item-subtotal::before {
        content: "Subtotal ";
        font-weight: 600;
        color: var(--teks-2);
    }
}

@media (max-width: 600px) {
    .pembelian-kepala {
        grid-template-columns: 1fr;
    }

    .pembelian-tempo .pilih-level-opsi,
    .pembelian-tempo-tanggal {
        flex: 1 1 100%;
    }

    .cari-hasil {
        top: 5.4rem;
    }

    /* Di HP bilah simpan form pembelian berada di akhir form agar tidak menutupi isian barang. */
    .form-pembelian .bilah-simpan {
        position: static;
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
    }

    .bilah-simpan-tombol .tombol {
        flex: 1;
    }

    /* Tombol Hapus draft (bila ada draft) mengambil satu baris sendiri agar tidak mendorong bilah ke samping. */
    .bilah-simpan-tombol:has(#hapus-draft:not([hidden])) {
        flex-wrap: wrap;
    }

    #hapus-draft {
        flex-basis: 100%;
    }

    .bilah-simpan kbd {
        display: none;
    }

    .pembelian-saring > div {
        max-width: none;
    }

    .pembelian-baris {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.2rem 0.75rem;
    }

    .pembelian-tgl {
        grid-column: 1 / -1;
        font-size: 0.85rem;
    }

    .judul-aksi-grup .tombol {
        flex: 1;
    }

    .pembelian-batal-baris {
        flex-direction: column;
    }
}

/* ---------- Penjualan ---------- */
.jual-pembeli {
    margin-bottom: 1.25rem;
}

.jual-pembeli-kepala {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.jual-pembeli-kepala h2 {
    margin: 0;
    font-size: 1.2rem;
}

.jual-pembeli-kepala > span {
    font-weight: 600;
    color: var(--teks-2);
}

.pilih-mode {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.3rem;
    margin-bottom: 1rem;
    background: #f1ede4;
    border-radius: var(--sudut);
}

.pilih-mode-tombol {
    padding: 0.6rem 1.1rem;
    font-weight: 700;
    color: var(--teks-2);
    background: transparent;
    border: 0;
    border-radius: 11px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.pilih-mode-tombol:hover {
    color: var(--teks);
}

.pilih-mode-tombol.aktif {
    color: var(--arang-1);
    background: #fff;
    box-shadow: 0 1px 3px rgba(20, 20, 24, 0.12);
}

.pilih-mode-tombol:focus-visible {
    outline: 3px solid var(--emas);
    outline-offset: 1px;
}

.jual-panel {
    animation: naik 0.2s ease-out both;
}

.jual-panel-teks {
    margin: 0;
}

.jual-terpilih {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 1rem;
    background: #fff8e3;
    border: 1.5px solid #e6cf8f;
    border-radius: var(--sudut);
}

.jual-terpilih strong {
    font-size: 1.1rem;
}

.jual-terpilih small {
    display: block;
    color: var(--teks-2);
}

.cari-hasil-pelanggan {
    top: 5.2rem;
}

.jual-baru {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 15rem);
    gap: 0 1rem;
}

.jual-baru-level,
.jual-baru-catatan {
    grid-column: 1 / -1;
}

.jual-baru-level {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.jual-baru-level legend {
    width: 100%;
}

.jual-baru-level .pilih-level-opsi {
    flex: 1 1 13rem;
    margin: 0;
}

.jual-baru-catatan {
    margin-top: 0.6rem;
}

.item-jual {
    grid-template-columns: minmax(0, 1fr) 11rem 6rem 7.5rem 8.5rem 2.75rem;
}

.item-asal small {
    font-size: 0.82rem;
    color: var(--teks-2);
}

.isian-asal {
    height: 2.8rem;
    margin: 0;
    padding: 0 0.6rem;
    font-size: 0.9rem;
}

.item-harga {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.jual-bayar {
    flex-wrap: wrap;
}

.jual-total {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.jual-dibayar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.jual-dibayar label {
    font-weight: 700;
    color: var(--teks);
}

.jual-dibayar .isian {
    width: 10rem;
    height: 2.9rem;
    margin: 0;
}

.jual-status .lencana {
    font-size: 0.9rem;
    padding: 0.3rem 0.75rem;
}

.saring-hari {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-left: auto;
}

.penjualan-ringkas {
    margin-bottom: 1.25rem;
}

.tanda-perkiraan {
    display: block;
    font-size: 0.75rem;
    color: var(--emas-tua);
}

.teks-merah {
    color: #b42318;
    font-weight: 800;
}

@media (max-width: 1000px) {
    .item-jual.item-baris {
        grid-template-columns: 1fr 1fr 2.75rem;
    }

    .item-jual .item-asal {
        grid-column: 1 / -1;
    }

    .item-jual .item-harga::before {
        content: "Harga ";
        font-weight: 600;
        color: var(--teks-2);
    }

    .item-jual .item-harga {
        text-align: left;
        align-self: end;
        padding-bottom: 0.6rem;
    }
}

@media (max-width: 900px) {
    .item-kepala.item-jual {
        display: none;
    }
}

@media (max-width: 600px) {
    .pilih-mode {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .jual-baru {
        grid-template-columns: 1fr;
    }

    .form-pembelian .jual-bayar {
        align-items: stretch;
    }

    .jual-total {
        flex-direction: row;
        justify-content: space-between;
        align-items: baseline;
    }

    .jual-dibayar {
        margin-left: 0;
    }

    .jual-dibayar .isian {
        flex: 1;
        width: auto;
    }

    .saring-hari {
        margin-left: 0;
        width: 100%;
    }

    .saring-hari .tombol {
        flex: 1;
    }
}

@media (max-width: 600px) {
    /* Bilah bayar penjualan di HP: semua bagian selebar layar, tanpa geser ke samping. */
    .form-pembelian .jual-bayar > * {
        width: 100%;
        min-width: 0;
    }

    .jual-dibayar .isian {
        min-width: 0;
    }
}

/* ---------- Hitung stok dan tampilan stok ---------- */
.barang-stok {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.35rem;
}

.hitung-progres {
    margin-bottom: 1.25rem;
}

.hitung-progres-teks {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
    color: var(--teks-2);
}

.hitung-progres-teks strong {
    font-size: 1.3rem;
    color: var(--teks);
}

.hitung-progres-teks span {
    margin-left: auto;
    font-weight: 800;
    color: var(--emas-tua);
}

.hitung-progres-bilah {
    display: block;
    width: 100%;
    height: 0.75rem;
    border: 0;
    border-radius: 999px;
    background: #efe9dc;
    overflow: hidden;
    appearance: none;
}

.hitung-progres-bilah::-webkit-progress-bar {
    background: #efe9dc;
    border-radius: 999px;
}

.hitung-progres-bilah::-webkit-progress-value {
    background: linear-gradient(90deg, var(--emas), var(--emas-terang));
    border-radius: 999px;
}

.hitung-progres-bilah::-moz-progress-bar {
    background: linear-gradient(90deg, var(--emas), var(--emas-terang));
    border-radius: 999px;
}

.hitung-saring {
    grid-template-columns: minmax(0, 1fr) minmax(0, 13rem) minmax(0, 11rem) auto;
}

.hitung-kolom {
    grid-template-columns: minmax(0, 1fr) 9rem 8rem 9rem 10rem;
}

.hitung-baris {
    margin: 0;
    transition: background-color 0.3s ease;
}

.hitung-tersimpan {
    background: #f1faf4;
}

.hitung-stok-sekarang strong,
.hitung-stok-sekarang small {
    display: block;
}

.hitung-stok-sekarang small {
    font-size: 0.8rem;
    color: var(--teks-2);
}

.isian-rak {
    text-transform: uppercase;
}

.hitung-aksi {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

.hitung-status {
    font-size: 0.8rem;
    line-height: 1.3;
}

.hitung-status-ok { color: #1d6b3a; font-weight: 700; }
.hitung-status-gagal { color: #b42318; font-weight: 700; }
.hitung-status-proses { color: var(--teks-2); }

@media (max-width: 1000px) {
    .hitung-saring {
        grid-template-columns: 1fr 1fr;
        gap: 0.85rem 1rem;
    }

    .hitung-saring .barang-cari-kolom {
        grid-column: 1 / -1;
    }

    .item-kepala.hitung-kolom {
        display: none;
    }

    .hitung-baris.item-baris {
        grid-template-columns: 1fr 1fr;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .hitung-baris .item-barang {
        grid-column: 1 / -1;
    }

    .hitung-baris .hitung-aksi {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
    }
}

@media (max-width: 600px) {
    .hitung-saring {
        grid-template-columns: 1fr;
    }

    .hitung-baris .hitung-aksi .tombol {
        flex: none;
    }
}

/* ---------- Teks broadcast WA (Rincian Pembelian) ---------- */
.broadcast {
    margin-top: 1.25rem;
}

.broadcast h2 {
    margin: 0 0 0.4rem;
    font-size: 1.2rem;
}

.broadcast p {
    color: var(--teks-2);
}

.broadcast-panel {
    animation: naik 0.25s ease both;
}

.broadcast-teks {
    height: auto;
    min-height: 9rem;
    padding: 0.75rem 1rem;
    line-height: 1.5;
    resize: vertical;
    white-space: pre-wrap;
}

.broadcast-aksi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.broadcast-aksi small {
    color: var(--teks-3);
}

@media (max-width: 600px) {
    .broadcast-aksi .tombol {
        width: 100%;
        justify-content: center;
    }
}

/* ---------- Lonceng di bilah atas (kabar bon) ---------- */
.lonceng {
    position: relative;
}

.lonceng-tombol {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.lonceng-tombol:hover,
.lonceng-tombol[aria-expanded="true"] {
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
}

.lonceng-tombol.ada {
    border-color: var(--emas);
}

.lonceng-tombol svg {
    width: 1.3rem;
    height: 1.3rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lonceng-tombol.ada svg {
    stroke: var(--emas-terang);
}

.lonceng-angka {
    position: absolute;
    top: -0.3rem;
    right: -0.3rem;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.3rem;
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1.35rem;
    text-align: center;
    color: var(--arang-1);
    background: var(--emas);
    border-radius: 999px;
    animation: muncul-lonceng 0.25s ease both;
}

.lonceng-panel {
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    z-index: 1050;
    width: min(24rem, calc(100vw - 2rem));
    max-height: 70vh;
    overflow-y: auto;
    padding: 0.75rem;
    color: var(--teks);
    background: #fff;
    border: 1px solid var(--garis);
    border-radius: var(--sudut);
    box-shadow: 0 18px 40px -16px rgba(18, 18, 21, 0.45);
    animation: naik 0.2s ease both;
}

.lonceng-judul {
    margin: 0 0 0.4rem;
    padding: 0 0.4rem;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--teks-2);
}

.lonceng-baris {
    display: block;
    padding: 0.6rem 0.7rem;
    color: var(--teks);
    text-decoration: none;
    border-left: 4px solid var(--garis);
    border-radius: 8px;
    transition: background-color 0.15s ease;
}

.lonceng-baris + .lonceng-baris {
    margin-top: 0.35rem;
}

.lonceng-baris:hover {
    color: var(--teks);
    background: #fbf8f0;
}

.lonceng-baris strong,
.lonceng-baris small {
    display: block;
}

.lonceng-baris small {
    color: var(--teks-2);
    overflow-wrap: anywhere;
}

.lonceng-menunggu { border-left-color: var(--emas); }
.lonceng-disetujui { border-left-color: #2f8a4f; }
.lonceng-ditolak { border-left-color: #b42318; }
.lonceng-baru { background: #fbf3dc; }

.lonceng-kosong {
    margin: 0;
    padding: 0.4rem;
    color: var(--teks-2);
}

@keyframes muncul-lonceng {
    from { transform: scale(0.4); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* ---------- Bon Pelanggan dan Persetujuan Bon ---------- */
.bon-tahan .tombol {
    margin: 0.5rem 0 0;
    display: flex;
    width: fit-content;
}

.bon-putus {
    margin: 0 0 1rem;
}

.bon-baris {
    grid-template-columns: minmax(0, 1fr) auto;
}

.bon-cari {
    grid-template-columns: minmax(0, 1fr) auto;
}

.bon-tunggu-daftar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
}

.bon-tunggu {
    border-left: 4px solid var(--emas);
    scroll-margin-top: 1rem;
}

.bon-tunggu:target {
    box-shadow: 0 0 0 3px rgba(224, 171, 28, 0.35);
}

.bon-tunggu-kepala {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.bon-tunggu-kepala h2 {
    margin: 0;
    font-size: 1.3rem;
}

.bon-tunggu-kepala p {
    margin: 0.2rem 0 0;
    color: var(--teks-2);
}

.bon-tunggu-angka {
    margin-bottom: 1rem;
}

.bon-tunggu-aksi {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.bon-tunggu-aksi form {
    margin: 0;
}

.bon-tolak {
    display: flex;
    flex: 1 1 22rem;
    gap: 0.75rem;
}

.bon-tolak .isian {
    margin: 0;
}

.bon-tolak .tombol {
    flex: none;
}

.bon-terima {
    margin-bottom: 1.25rem;
    border-left: 4px solid var(--emas);
}

.bon-terima h2,
.kartu-judul {
    margin: 0 0 0.4rem;
    font-size: 1.2rem;
}

.bon-terima-baris {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
    align-items: end;
    gap: 0.75rem 1rem;
}

.bon-terima-baris .isian {
    margin: 0;
}

.bon-terima-isian {
    display: flex;
    gap: 0.5rem;
}

.bon-terima-isian .tombol {
    flex: none;
}

.baris-pelunasan td {
    font-weight: 600 !important;
    color: var(--teks-2);
    border-top: 0 !important;
}

.bon-riwayat {
    margin: 0;
    padding: 0;
    list-style: none;
}

.bon-riwayat-baris {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem 1rem;
    padding: 0.85rem 0;
    border-top: 1px solid var(--garis);
}

.bon-riwayat-info {
    min-width: 0;
}

.bon-riwayat-info small {
    display: block;
    color: var(--teks-2);
    overflow-wrap: anywhere;
}

.bon-riwayat-batal .bon-riwayat-info strong {
    color: var(--teks-3);
    text-decoration: line-through;
}

.bon-riwayat-batal-form {
    display: flex;
    gap: 0.5rem;
    margin: 0;
}

.bon-riwayat-batal-form .isian {
    margin: 0;
    min-width: 14rem;
}

@media (max-width: 900px) {
    .bon-terima-baris {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .lonceng-panel {
        position: fixed;
        top: 4rem;
        right: 1rem;
        left: 1rem;
        width: auto;
    }

    .bon-tolak,
    .bon-riwayat-batal-form {
        flex-direction: column;
        flex-basis: 100%;
    }

    .bon-tunggu-aksi > form:first-child,
    .bon-tunggu-aksi > form:first-child .tombol {
        width: 100%;
    }

    .bon-riwayat-batal-form .isian {
        min-width: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lonceng-angka,
    .lonceng-panel {
        animation: none;
    }
}