body .bg-image {
    /* background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3Crect stroke='%23ffffff' stroke-width='.5' width='1' height='1' id='s'/%3E%3Cpattern id='a' width='3' height='3' patternUnits='userSpaceOnUse' patternTransform='scale(50) translate(-980 -735)'%3E%3Cuse fill='%23fcfcfc' href='%23s' y='2'/%3E%3Cuse fill='%23fcfcfc' href='%23s' x='1' y='2'/%3E%3Cuse fill='%23fafafa' href='%23s' x='2' y='2'/%3E%3Cuse fill='%23fafafa' href='%23s'/%3E%3Cuse fill='%23f7f7f7' href='%23s' x='2'/%3E%3Cuse fill='%23f7f7f7' href='%23s' x='1' y='1'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23a)' width='100%25' height='100%25'/%3E%3C/svg%3E");
    background-attachment: fixed;
    background-size: cover;
    min-height: 100vh;
    width: 100%; */

    min-height: 100vh;
    width: 100%;
    background: #02242e;
    background: -webkit-linear-gradient(
        345deg,
        rgba(2, 36, 46, 1) 0%,
        rgba(0, 0, 0, 1) 35%,
        rgba(0, 79, 61, 1) 100%
    );
    background: -moz-linear-gradient(
        345deg,
        rgba(2, 36, 46, 1) 0%,
        rgba(0, 0, 0, 1) 35%,
        rgba(0, 79, 61, 1) 100%
    );
    background: linear-gradient(
        345deg,
        rgba(2, 36, 46, 1) 0%,
        rgba(0, 0, 0, 1) 35%,
        rgba(0, 79, 61, 1) 100%
    );
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#02242E", endColorstr="#004F3D", GradientType=0);
}

body .card {
    background: #ffffff; /* fallback kalau blur gagal */
    background: rgba(255, 255, 255, 0.8); /* semi transparan */
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px); /* buat Safari/iOS */
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
    border-radius: 12px;
}

body.dark .bg-image {
    /* background-color: #191e3a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3Crect stroke='%23191E3A' stroke-width='.5' width='1' height='1' id='s'/%3E%3Cpattern id='a' width='3' height='3' patternUnits='userSpaceOnUse' patternTransform='scale(50) translate(-980 -735)'%3E%3Cuse fill='%232c2f44' href='%23s' y='2'/%3E%3Cuse fill='%232c2f44' href='%23s' x='1' y='2'/%3E%3Cuse fill='%23393b4c' href='%23s' x='2' y='2'/%3E%3Cuse fill='%23393b4c' href='%23s'/%3E%3Cuse fill='%23434554' href='%23s' x='2'/%3E%3Cuse fill='%23434554' href='%23s' x='1' y='1'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23a)' width='100%25' height='100%25'/%3E%3C/svg%3E");
    background-attachment: fixed;
    background-size: cover;
    min-height: 100vh;
    width: 100%; */
    min-height: 100vh;
    width: 100%;
    background: #002130;
    background: linear-gradient(
        223deg,
        rgba(0, 33, 48, 1) 0%,
        rgba(0, 0, 0, 1) 96%
    );
}

body.dark .card {
    background: #002130;
    background: linear-gradient(
        223deg,
        rgba(0, 33, 48, 1) 0%,
        rgba(0, 0, 0, 1) 96%
    );
    border: none;
}

.spinner-border-sm {
    width: 1.5rem;
    height: 1.5rem;
}

/* 👇 Mobile fallback (max-width: 768px = tablet ke bawah) */
@media screen and (max-width: 768px) {
    body .card {
        background: #ffffff !important;
    }
}