/* =========================================================
   LOGIN MIN 1 BLITAR — v1.5.5
   CSS khusus halaman login agar tidak mengganggu aplikasi lain.
   ========================================================= */

:root{
    --navy:#061d68;
    --blue:#0a2a92;
    --blue2:#123da9;
    --green:#078d52;
    --green2:#08b56d;
    --yellow:#ffd447;
    --white:#fff;
    --muted:#7281a6;
    --panel:#f4f7fc;
    --border:#dce5f2;
}

*{box-sizing:border-box}

html,body{
    width:100%;
    min-height:100%;
    margin:0;
}

body.login-page{
    min-height:100vh;
    overflow-x:hidden;
    font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;
    color:#0a1c57;
    background:var(--panel);
}

.login-shell{
    min-height:100vh;
    display:grid;
    grid-template-columns:59% 41%;
}

/* ================= BLUE SIDE ================= */

.login-visual{
    position:relative;
    min-height:100vh;
    overflow:hidden;
    isolation:isolate;
    color:#fff;
    background:
        radial-gradient(circle at 90% 80%,rgba(0,180,105,.25),transparent 32%),
        linear-gradient(120deg,#061b61 0%,#092a89 57%,#0b397e 100%);
}

.visual-dots{
    position:absolute;
    inset:0;
    z-index:0;
    opacity:.23;
    background-image:radial-gradient(rgba(255,255,255,.55) .8px,transparent .8px);
    background-size:8px 8px;
    mask-image:linear-gradient(to right,transparent 0%,#000 52%,#000 100%);
}

.brand{
    position:absolute;
    top:40px;
    left:7%;
    z-index:7;
    display:flex;
    align-items:center;
    gap:13px;
}

.brand img{
    width:58px;
    height:58px;
    object-fit:contain;
}

.brand-title{
    font-size:29px;
    line-height:1;
    font-weight:800;
    letter-spacing:-.5px;
}

.brand-subtitle{
    margin-top:7px;
    color:#00e69a;
    font-size:14px;
    line-height:1;
    font-weight:800;
    letter-spacing:1px;
}

.hero-copy{
    position:absolute;
    z-index:6;
    top:27%;
    left:7%;
    width:64%;
}

.eyebrow{
    display:inline-flex;
    align-items:center;
    padding:7px 14px;
    border:1px solid rgba(0,226,255,.35);
    border-radius:999px;
    color:#13dcff;
    background:rgba(0,151,224,.17);
    font-size:11px;
    font-weight:800;
    letter-spacing:.2px;
}

.hero-copy h1{
    margin:18px 0 10px;
    font-size:39px;
    line-height:1.08;
    letter-spacing:-1.1px;
    font-weight:800;
}

.hero-copy h1 strong{
    display:block;
    color:var(--yellow);
    font-weight:850;
}

.hero-description{
    margin:0;
    max-width:510px;
    color:#eef4ff;
    font-size:16px;
    line-height:1.55;
}

.login-child{
    position:absolute;
    z-index:2;
    right:3%;
    bottom:12%;
    width:min(48%,390px);
    max-height:72%;
    object-fit:contain;
    object-position:center bottom;
    filter:drop-shadow(0 14px 24px rgba(0,0,0,.18));
    pointer-events:none;
    user-select:none;
}

.contact-list{
    position:absolute;
    z-index:7;
    left:7%;
    bottom:25%;
    width:54%;
    max-width:440px;
}

.contact-item{
    display:flex;
    align-items:center;
    gap:11px;
    padding:7px 0;
    border-bottom:1px solid rgba(255,255,255,.23);
}

.contact-item:last-child{border-bottom:0}

.contact-icon{
    flex:0 0 40px;
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.18);
    border-radius:50%;
    background:rgba(5,60,153,.68);
}

.contact-icon svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
}

.location-icon{color:#ffd400}
.mail-icon{color:#00f0ae}
.web-icon{color:#00d9ff}

.contact-item div > span{
    display:block;
    margin-bottom:2px;
    color:rgba(255,255,255,.68);
    font-size:10px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.5px;
}

.contact-item p{
    margin:0;
    color:#fff;
    font-size:13px;
    line-height:1.4;
}

.visual-credit{
    position:absolute;
    z-index:8;
    left:7%;
    right:7%;
    bottom:11%;
    padding-top:10px;
    border-top:1px solid rgba(255,255,255,.28);
    text-align:center;
    color:#eef4ff;
    font-size:13px;
    line-height:1.8;
}

.visual-credit strong{color:#00e69a}

.ministry-footer{
    position:absolute;
    z-index:9;
    left:0;
    right:0;
    bottom:0;
    padding:0 5% 8px;
    background:rgba(1,18,72,.35);
}

.footer-line{
    height:1px;
    background:rgba(255,255,255,.22);
}

.ministry-content{
    min-height:82px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:22px;
}

.ministry-content img{
    width:49px;
    height:49px;
    object-fit:contain;
}

.ministry-side{
    min-width:125px;
    color:#fff;
    font-size:10px;
    line-height:1.65;
    letter-spacing:.2px;
}

.ministry-side.right{text-align:left}

/* ================= LOGIN SIDE ================= */

.login-side{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    position:relative;
    padding:45px 7%;
    background:
        radial-gradient(circle at 50% 38%,rgba(255,255,255,.98),rgba(244,247,252,.96) 62%),
        #f4f7fc;
}

.login-card{
    width:min(100%,430px);
    padding:35px 34px 31px;
    border:1px solid rgba(208,218,234,.7);
    border-radius:19px;
    background:rgba(255,255,255,.98);
    box-shadow:0 22px 60px rgba(31,53,95,.13);
}

.login-card-head{
    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:28px;
}

.login-card-head img{
    width:52px;
    height:52px;
    object-fit:contain;
}

.login-card-head h2{
    margin:0;
    color:#092069;
    font-size:25px;
    line-height:1.15;
    letter-spacing:-.4px;
}

.login-card-head p{
    margin:6px 0 0;
    color:#7181a5;
    font-size:13px;
}

.alert{
    margin:-8px 0 18px;
    padding:10px 12px;
    border-radius:9px;
    font-size:13px;
}

.alert.danger{
    color:#a42323;
    border:1px solid #ffd0d0;
    background:#fff1f1;
}

.login-card form label{
    display:block;
    margin:0 0 8px;
    color:#0a1d55;
    font-size:12px;
    font-weight:800;
}

.input-wrap{
    position:relative;
    margin-bottom:18px;
}

.input-wrap input{
    width:100%;
    height:43px;
    padding:0 42px;
    border:1px solid #cfdbea;
    border-radius:9px;
    outline:none;
    color:#102152;
    background:#f5f8fe;
    font:inherit;
    font-size:13px;
    transition:.18s ease;
}

.input-wrap input::placeholder{color:#8a96b2}

.input-wrap input:focus{
    border-color:#19a968;
    background:#fff;
    box-shadow:0 0 0 3px rgba(25,169,104,.11);
}

.input-icon{
    position:absolute;
    left:13px;
    top:50%;
    z-index:2;
    width:18px;
    height:18px;
    transform:translateY(-50%);
    color:#111;
}

.input-icon svg{
    width:100%;
    height:100%;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
}

.toggle-password{
    position:absolute;
    right:8px;
    top:50%;
    width:30px;
    height:30px;
    transform:translateY(-50%);
    display:grid;
    place-items:center;
    border:0;
    border-radius:6px;
    color:#111;
    background:transparent;
    cursor:pointer;
}

.toggle-password svg{
    width:17px;
    height:17px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
}

.login-btn{
    width:100%;
    height:45px;
    margin-top:4px;
    border:0;
    border-radius:9px;
    color:#fff;
    background:linear-gradient(135deg,#087e4b,#0da967);
    box-shadow:0 8px 18px rgba(7,141,82,.16);
    font:inherit;
    font-size:14px;
    font-weight:800;
    cursor:pointer;
    transition:transform .15s ease,box-shadow .15s ease;
}

.login-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 10px 22px rgba(7,141,82,.22);
}

.login-note{
    display:block;
    margin-top:19px;
    text-align:center;
    color:#7181a5;
    font-size:12px;
}

/* no duplicate footer on the white side */
.login-side::after{display:none}

/* ================= RESPONSIVE ================= */

@media (max-width:1050px){
    .login-shell{grid-template-columns:57% 43%}
    .hero-copy h1{font-size:33px}
    .hero-description{font-size:14px}
    .login-child{width:48%;right:-2%}
    .contact-list{bottom:25%;width:60%}
    .contact-item p{font-size:11px}
    .visual-credit{font-size:11px}
}

@media (max-width:800px){
    body.login-page{background:#f4f7fc}

    .login-shell{
        display:block;
        min-height:100vh;
    }

    .login-visual{
        min-height:650px;
        height:auto;
        padding-bottom:90px;
    }

    .brand{
        top:25px;
        left:24px;
    }

    .brand img{
        width:48px;
        height:48px;
    }

    .brand-title{font-size:22px}
    .brand-subtitle{font-size:10px;margin-top:5px}

    .hero-copy{
        top:145px;
        left:24px;
        right:24px;
        width:auto;
        z-index:8;
    }

    .hero-copy h1{
        margin-top:15px;
        font-size:31px;
    }

    .hero-description{
        max-width:340px;
        font-size:14px;
    }

    .login-child{
        z-index:3;
        width:245px;
        max-height:none;
        right:-25px;
        bottom:80px;
        opacity:.48;
    }

    .contact-list{
        left:24px;
        right:24px;
        bottom:115px;
        width:auto;
        max-width:none;
        z-index:8;
    }

    .contact-item{
        padding:5px 0;
    }

    .contact-icon{
        width:34px;
        height:34px;
        flex-basis:34px;
    }

    .contact-icon svg{width:17px;height:17px}

    .contact-item div > span{font-size:8px}
    .contact-item p{font-size:10.5px}

    .visual-credit{
        left:20px;
        right:20px;
        bottom:57px;
        font-size:9.5px;
        line-height:1.55;
        z-index:10;
    }

    .ministry-footer{
        padding:0 20px 4px;
    }

    .ministry-content{
        min-height:51px;
        gap:9px;
    }

    .ministry-content img{
        width:33px;
        height:33px;
    }

    .ministry-side{
        min-width:0;
        font-size:7px;
        line-height:1.4;
    }

    .login-side{
        min-height:auto;
        padding:32px 18px 42px;
        background:#f4f7fc;
    }

    .login-card{
        width:min(100%,440px);
        padding:28px 24px 26px;
        border-radius:17px;
    }
}

@media (max-width:430px){
    .login-visual{min-height:620px}

    .brand{
        left:18px;
        top:19px;
    }

    .hero-copy{
        top:125px;
        left:18px;
        right:18px;
    }

    .hero-copy h1{font-size:27px}
    .hero-description{font-size:13px}

    .login-child{
        width:215px;
        right:-28px;
        bottom:78px;
        opacity:.35;
    }

    .contact-list{
        left:18px;
        right:18px;
        bottom:111px;
    }

    .contact-item p{font-size:9.5px}

    .visual-credit{
        left:18px;
        right:18px;
        bottom:52px;
        font-size:8.5px;
    }

    .ministry-side{font-size:6.5px}

    .login-card{
        padding:25px 20px 24px;
    }

    .login-card-head h2{font-size:22px}
}

@media (prefers-reduced-motion:reduce){
    *{scroll-behavior:auto!important;transition:none!important}
}

/* =========================================================
   FIX LAPTOP / NETBOOK DENGAN LAYAR PENDEK
   Contoh: 1366x600, 1366x650, 1366x720
   Tidak mempengaruhi HP / tablet
   ========================================================= */

@media (min-width:801px) and (max-height:760px){

    body.login-page{
        overflow-x:hidden;
    }

    /* ================= BLUE PANEL ================= */

    .login-visual{
        height:100vh;
        min-height:0;
        display:flex;
        flex-direction:column;
        overflow:hidden;
        padding:25px 0 0;
    }

    /* BRAND */

    .brand{
        position:relative;
        top:auto;
        left:auto;
        margin:0 7%;
        gap:10px;
        flex-shrink:0;
    }

    .brand img{
        width:48px;
        height:48px;
    }

    .brand-title{
        font-size:24px;
    }

    .brand-subtitle{
        margin-top:5px;
        font-size:11px;
        letter-spacing:.7px;
    }

    /* HERO */

    .hero-copy{
        position:relative;
        top:auto;
        left:auto;
        width:62%;
        margin:27px 7% 0;
        z-index:6;
    }

    .eyebrow{
        padding:5px 11px;
        font-size:10px;
    }

    .hero-copy h1{
        margin:12px 0 7px;
        font-size:31px;
        line-height:1.03;
        letter-spacing:-.8px;
    }

    .hero-description{
        max-width:390px;
        font-size:12.5px;
        line-height:1.35;
    }

    /* ================= ILUSTRASI ================= */

    .login-child{
        right:1%;
        bottom:10%;
        width:min(38%,300px);
        max-height:68%;
    }

    /* ================= KONTAK ================= */

    .contact-list{
        position:relative;
        left:auto;
        bottom:auto;
        width:52%;
        max-width:390px;
        margin:9px 7% 0;
        z-index:7;
    }

    .contact-item{
        gap:9px;
        padding:4px 0;
    }

    .contact-icon{
        width:32px;
        height:32px;
        flex-basis:32px;
    }

    .contact-icon svg{
        width:16px;
        height:16px;
    }

    .contact-item div > span{
        margin-bottom:1px;
        font-size:9px;
    }

    .contact-item p{
        font-size:11px;
        line-height:1.25;
    }

    /* ================= CREDIT ================= */

    .visual-credit{
        position:relative;
        left:auto;
        right:auto;
        bottom:auto;
        margin: auto 7% 0;
        padding-top:6px;
        font-size:10.5px;
        line-height:1.45;
        flex-shrink:0;
    }

    /* ================= FOOTER ================= */

    .ministry-footer{
        position:relative;
        left:auto;
        right:auto;
        bottom:auto;
        margin-top:5px;
        padding:0 4% 5px;
        flex-shrink:0;
    }

    .ministry-content{
        min-height:56px;
        gap:12px;
    }

    .ministry-content img{
        width:38px;
        height:38px;
    }

    .ministry-side{
        min-width:105px;
        font-size:8px;
        line-height:1.35;
    }
}


/* =========================================================
   EXTRA COMPACT
   Untuk netbook / browser sekitar 600px tinggi
   ========================================================= */

@media (min-width:801px) and (max-height:620px){

    .login-visual{
        padding-top:18px;
        overflow-y:auto;
    }

    .brand img{
        width:42px;
        height:42px;
    }

    .brand-title{
        font-size:21px;
    }

    .brand-subtitle{
        font-size:9px;
        margin-top:4px;
    }

    .hero-copy{
        margin-top:18px;
    }

    .eyebrow{
        padding:4px 10px;
        font-size:9px;
    }

    .hero-copy h1{
        margin:9px 0 5px;
        font-size:28px;
    }

    .hero-description{
        font-size:11.5px;
        line-height:1.25;
    }

    .login-child{
        width:min(35%,260px);
        max-height:63%;
        bottom:12%;
    }

    .contact-list{
        margin-top:6px;
    }

    .contact-item{
        padding:3px 0;
    }

    .contact-icon{
        width:28px;
        height:28px;
        flex-basis:28px;
    }

    .contact-icon svg{
        width:14px;
        height:14px;
    }

    .contact-item div > span{
        font-size:8px;
    }

    .contact-item p{
        font-size:10px;
    }

    .visual-credit{
        font-size:9px;
        line-height:1.3;
        padding-top:4px;
    }

    .ministry-footer{
        margin-top:3px;
        padding-bottom:3px;
    }

    .ministry-content{
        min-height:46px;
        gap:8px;
    }

    .ministry-content img{
        width:32px;
        height:32px;
    }

    .ministry-side{
        min-width:90px;
        font-size:7px;
    }
}