.siapmang-auth-page{
    min-height:100vh;
    margin:0;
    overflow-x:hidden;
    color:#0f172a;
    background:
        radial-gradient(circle at 12% 18%, rgba(191,219,254,.75), transparent 34%),
        radial-gradient(circle at 86% 18%, rgba(209,250,229,.82), transparent 32%),
        radial-gradient(circle at 78% 70%, rgba(153,246,228,.38), transparent 36%),
        linear-gradient(135deg,#f8fbff 0%,#eef7ff 45%,#f5fffb 100%);
}

.siapmang-auth-bg{
    position:fixed;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(
            90deg,
            rgba(248,251,255,.78),
            rgba(248,251,255,.46)
        ),
        url('/assets/landing/hero-bg.jpg');
    background-size:cover;
    background-position:center;
    opacity:.20;
    z-index:0;
}

.siapmang-auth-topbar{
    position:relative;
    z-index:2;
    width:min(1180px, calc(100% - 32px));
    height:88px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.siapmang-auth-brand{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    color:#0f172a;
    font-weight:900;
    letter-spacing:.02em;
    font-size:20px;

    padding:12px 18px 12px 14px;
    border-radius:20px;
    background:rgba(255,255,255,.74);
    border:1px solid rgba(255,255,255,.86);
    box-shadow:
        0 20px 50px rgba(15,23,42,.08),
        inset 0 1px 0 rgba(255,255,255,.9);
    backdrop-filter:blur(18px);
}

.siapmang-auth-brand{
    position:relative;
    overflow:hidden;

    box-shadow:
        0 20px 50px rgba(15,23,42,.08),
        0 0 0 1px rgba(255,255,255,.58),
        0 0 34px rgba(6,182,212,.14),
        0 0 58px rgba(16,185,129,.12),
        inset 0 1px 0 rgba(255,255,255,.92);
}

.siapmang-auth-brand::before{
    content:'';
    position:absolute;
    inset:-40%;

    background:
        linear-gradient(
            120deg,
            rgba(255,255,255,0) 18%,
            rgba(34,211,238,.24) 40%,
            rgba(45,212,191,.38) 50%,
            rgba(125,211,252,.22) 60%,
            rgba(255,255,255,0) 78%
        );

    transform:translateX(-140%) rotate(8deg);

    animation:siapmangAquaGloss 1.2s linear infinite;
}

@keyframes siapmangAquaGloss{
    100%{
        transform:translateX(140%) rotate(8deg);
    }
}

.siapmang-auth-brand img{
    width:42px;
    height:42px;
    object-fit:contain;
    position:relative;
    z-index:2;

    filter:
        drop-shadow(0 0 10px rgba(6,182,212,.22))
        drop-shadow(0 0 18px rgba(16,185,129,.16))
        drop-shadow(0 10px 18px rgba(37,99,235,.10));
}

.siapmang-auth-brand span{
    display:inline-flex;
    flex-direction:column;
    line-height:1.1;

    text-shadow:
        0 0 10px rgba(34,211,238,.10),
        0 0 18px rgba(45,212,191,.08);
}

.siapmang-auth-brand span::after{
    content:'Kota Bogor';
    margin-top:5px;
    font-size:11px;
    font-weight:800;
    letter-spacing:0;
    color:#64748b;
}

.siapmang-auth-back{
    text-decoration:none;
    color:#334155;
    font-weight:800;
    padding:13px 20px;
    border:1px solid rgba(255,255,255,.80);
    border-radius:999px;
    background:rgba(255,255,255,.78);
    backdrop-filter:blur(18px);
    box-shadow:0 18px 44px rgba(15,23,42,.08);
}

.siapmang-auth-main{
    position:relative;
    z-index:1;
    width:min(1180px, calc(100% - 32px));
    min-height:calc(100vh - 88px);
    margin:0 auto;
    display:grid;
    grid-template-columns:minmax(0,1fr) 460px;
    gap:56px;
    align-items:center;
    padding:0 0 20px;
    box-sizing:border-box;
}

.siapmang-auth-hero{
    max-width:620px;
}

.siapmang-auth-badge{
    display:inline-flex;
    width:max-content;
    padding:9px 14px;
    margin-bottom:20px;
    border-radius:999px;
    font-size:13px;
    font-weight:900;
    color:#075985;
    background:rgba(224,242,254,.78);
    border:1px solid rgba(125,211,252,.65);
}

.siapmang-auth-hero h1{
    margin:0;
    font-size:clamp(34px, 4vw, 58px);
    line-height:1.08;
    letter-spacing:-.055em;
    font-weight:950;
    color:#0f172a;
}

.siapmang-auth-hero p{
    margin:22px 0 0;
    max-width:560px;
    font-size:17px;
    line-height:1.7;
    color:#475569;
}

.siapmang-auth-panel,
.siapmang-auth-card-wrap{
    width:100%;
}

.siapmang-auth-card{
    width:100%;
    border-radius:30px;
    background:rgba(255,255,255,.78);
    border:1px solid rgba(255,255,255,.86);
    box-shadow:0 30px 80px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,.80);
    backdrop-filter:blur(24px);
    overflow:hidden;
}

.siapmang-auth-logo{
    padding:24px 30px 8px;
}

.siapmang-auth-logo .w-100{
    gap:14px;
}

.siapmang-auth-logo img{
    width:56px !important;
    height:56px;
    object-fit:contain;
    padding:8px;
    border-radius:18px;
    background:rgba(255,255,255,.90);
    box-shadow:0 12px 28px rgba(15,23,42,.10);
}

.siapmang-auth-card-content{
    padding:6px 30px 26px;
}

.siapmang-auth-card .card-body{
    padding:0 !important;
}

.siapmang-auth-card .mb-3{
    margin-bottom:14px !important;
}

.siapmang-auth-card .form-floating{
    margin-bottom:0 !important;
}

.siapmang-auth-card .form-control,
.siapmang-auth-card .form-select,
.siapmang-auth-card select{
    min-height:54px;
    border-radius:16px !important;
    border:1px solid rgba(148,163,184,.28);
    background:rgba(239,246,255,.72);
    color:#0f172a;
    box-shadow:none;
}

.siapmang-auth-card .form-control:focus,
.siapmang-auth-card .form-select:focus,
.siapmang-auth-card select:focus{
    border-color:rgba(14,165,233,.55);
    box-shadow:0 0 0 4px rgba(14,165,233,.14);
    background:#fff;
}

.siapmang-auth-card label{
    color:#64748b;
}

.siapmang-auth-card .btn,
.siapmang-auth-card button,
.siapmang-auth-card a.btn{
    min-height:50px;
    border-radius:16px !important;
    font-weight:900;
    letter-spacing:.01em;
}

.siapmang-auth-card .btn-accent,
.siapmang-auth-card button[type="submit"],
.siapmang-auth-card #btn-show-password{
    position:relative;
    overflow:hidden;

    border:0;
    color:#fff !important;

    background:linear-gradient(
        135deg,
        #2563eb 0%,
        #06b6d4 55%,
        #10b981 100%
    ) !important;

    box-shadow:
        0 18px 38px rgba(37,99,235,.18),
        0 10px 22px rgba(16,185,129,.14);

    transition:
        transform .22s ease,
        filter .22s ease,
        box-shadow .22s ease;
}

.siapmang-auth-card .btn-accent::before,
.siapmang-auth-card button[type="submit"]::before,
.siapmang-auth-card #btn-show-password::before{
    content:'';
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            120deg,
            rgba(255,255,255,0) 20%,
            rgba(255,255,255,.28) 45%,
            rgba(255,255,255,0) 70%
        );

    transform:translateX(-140%);
    transition:transform .7s ease;
}

.siapmang-btn-loading{
    pointer-events:none;
    opacity:.92;
}

.siapmang-auth-card .btn-accent:hover::before,
.siapmang-auth-card button[type="submit"]:hover::before,
.siapmang-auth-card #btn-show-password:hover::before{
    transform:translateX(140%);
}

.siapmang-auth-card .btn-accent:hover,
.siapmang-auth-card button[type="submit"]:hover,
.siapmang-auth-card #btn-show-password:hover{
    transform:translateY(-1px);
    filter:saturate(1.08);
}

.siapmang-auth-card .btn,
.siapmang-auth-card button,
.siapmang-auth-card a.btn{
    min-height:50px;
    border-radius:16px !important;
    font-weight:900;
    letter-spacing:.01em;
    transition:all .22s ease;
}

.siapmang-auth-card #btn-show-password{
    width:42px;
    height:42px;
    min-height:42px;
    right:8px !important;
    top:8px !important;
    border-radius:14px !important;
}

.siapmang-auth-card .btn-dark,
.siapmang-auth-card .btn-sso{
    border:1px solid rgba(15,23,42,.10);
    background:#0f172a !important;
    color:#fff !important;
    box-shadow:0 16px 34px rgba(15,23,42,.14);
}

.siapmang-auth-card .d-flex.gap-2.justify-content-end.align-items-baseline{
    align-items:stretch !important;
}

.siapmang-auth-card .btn-sso,
.siapmang-auth-card button[type="submit"]{
    height:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:1;
}

.siapmang-auth-card #captcha-img{
    width:100%;
    height:50px;
    max-height:50px !important;
    object-fit:contain;
    object-position:center;
    border-radius:14px;
    background:#fff;
    padding:4px 10px;
    border:1px solid rgba(148,163,184,.18);
}

.siapmang-auth-card .input-captcha{
    min-height:44px !important;
    height:44px !important;
}

.siapmang-auth-card .reset-captcha{
    width:44px;
    min-width:44px;
    height:44px;
    min-height:44px;
}

.siapmang-auth-card .alert{
    border-radius:16px !important;
    border:0;
}

@media (max-width: 992px){
    .siapmang-auth-main{
        grid-template-columns:1fr;
        gap:28px;
        align-items:start;
        padding-bottom:32px;
    }

    .siapmang-auth-hero{
        max-width:100%;
        text-align:center;
        margin:0 auto;
    }

    .siapmang-auth-badge{
        margin-left:auto;
        margin-right:auto;
    }
}

@media (max-width: 576px){
    .siapmang-auth-topbar{
        height:76px;
    }

    .siapmang-auth-brand span{
        font-size:17px;
    }

    .siapmang-auth-back{
        padding:9px 13px;
        font-size:13px;
    }

    .siapmang-auth-main{
        width:min(100% - 24px, 1180px);
        min-height:calc(100vh - 76px);
    }

    .siapmang-auth-hero h1{
        font-size:30px;
    }

    .siapmang-auth-hero p{
        font-size:15px;
    }

    .siapmang-auth-card{
        border-radius:24px;
    }

    .siapmang-auth-logo{
        padding:22px 22px 8px;
    }

    .siapmang-auth-card-content{
        padding:8px 22px 24px;
    }

    .siapmang-auth-card .d-flex.gap-2.justify-content-end.align-items-baseline{
        flex-direction:column;
    }
}

html,
body{
    height:100%;
}

.siapmang-auth-page{
    height:100vh;
    overflow:hidden;
    font-family:'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.siapmang-auth-main{
    min-height:0;
    height:calc(100vh - 88px);
    padding-bottom:0;
}

.siapmang-auth-card-content{
    padding-bottom:22px;
}

.siapmang-login-main-logo{
    width:140px !important;
    height:auto !important;
    background:transparent !important;
    box-shadow:none !important;
    border-radius:0 !important;
    padding:0 !important;
    object-fit:contain;
}

.siapmang-auth-version{
    margin-top:18px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    font-size:12px;
    font-weight:800;
    letter-spacing:.01em;

    color:#64748b;

    opacity:.88;
}

.siapmang-auth-version-dot{
    width:7px;
    height:7px;

    border-radius:999px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #06b6d4,
            #10b981
        );

    box-shadow:
        0 0 10px rgba(16,185,129,.45),
        0 0 18px rgba(6,182,212,.28);
}

.siapmang-error-main{
    grid-template-columns:minmax(0,1fr) 380px;
}

.siapmang-error-actions{
    margin-top:30px;
    display:flex;
    gap:14px;
    flex-wrap:wrap;
}

.siapmang-error-primary,
.siapmang-error-secondary{
    min-height:52px;
    padding:0 22px;
    border-radius:16px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    font-weight:900;
}

.siapmang-error-primary{
    position:relative;
    overflow:hidden;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #2563eb 0%,
            #06b6d4 55%,
            #10b981 100%
        );

    box-shadow:
        0 18px 38px rgba(37,99,235,.18),
        0 10px 22px rgba(16,185,129,.14);

    transition:
        transform .22s ease,
        filter .22s ease,
        box-shadow .22s ease;
}

.siapmang-error-primary::before{
    content:'';

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            120deg,
            rgba(255,255,255,0) 20%,
            rgba(255,255,255,.30) 45%,
            rgba(255,255,255,0) 70%
        );

    transform:translateX(-140%);
    transition:transform .7s ease;
}

.siapmang-error-primary:hover::before{
    transform:translateX(140%);
}

.siapmang-error-primary:hover{
    transform:translateY(-2px);
    filter:saturate(1.08);
}

.siapmang-error-secondary{
    color:#0f172a;
    background:rgba(255,255,255,.78);
    border:1px solid rgba(255,255,255,.88);
    box-shadow:0 16px 34px rgba(15,23,42,.08);
}

.siapmang-error-card{
    border-radius:30px;
    padding:42px 34px;
    text-align:center;
    background:rgba(255,255,255,.78);
    border:1px solid rgba(255,255,255,.86);
    box-shadow:0 30px 80px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,.80);
    backdrop-filter:blur(24px);
}

.siapmang-error-card img{
    width:92px;
    height:auto;
    margin-bottom:20px;
}

.siapmang-error-card h2{
    margin:0;
    font-size:72px;
    line-height:1;
    font-weight:950;
    letter-spacing:-.06em;
    color:#0f172a;
}

.siapmang-error-card p{
    margin:10px 0 0;
    font-weight:900;
    color:#334155;
}

.siapmang-error-card small{
    display:block;
    margin-top:18px;
    color:#64748b;
    line-height:1.6;
    font-weight:700;
}

@media(max-width:992px){
    .siapmang-error-main{
        grid-template-columns:1fr;
    }
}