/* ===========================================
   SOMS LOGIN PAGE
   =========================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* Token warna disamakan dgn app.css/head.php (--primary/--primary-hover)
   supaya tombol & aksen di halaman Login konsisten satu tema dgn landing
   page & Layanan Publik - halaman ini berdiri sendiri (bukan extend
   layouts/landing), jadi token-nya didefinisikan ulang di sini, BUKAN
   diwarisi dari head.php. */
:root{
    --primary:#0e7c86;
    --primary-hover:#0a5f67;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Inter',sans-serif;
    overflow:hidden;
    background:#073e44;
}

/* ===========================================
   BACKGROUND
   =========================================== */

.login-page{

    min-height:100vh;

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    /* Gradasi PERSIS sama dengan .ps-hero/.public-service-shell di
       landing.css (radial highlight + linear teal 3-stop) supaya
       Login terasa 1 sistem visual yang sama dgn Layanan Publik. */
    background:
        radial-gradient(circle at 15% 20%, rgba(255,255,255,.08) 0, transparent 45%),
        linear-gradient(135deg,#12979f 0%,#0e7c86 45%,#073e44 100%);

}

.login-page::before{

    content:'';

    position:absolute;

    inset:0;

    background-image:radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px);

    background-size:26px 26px;

    -webkit-mask-image:radial-gradient(circle at 30% 40%, rgba(0,0,0,.6), transparent 70%);

    mask-image:radial-gradient(circle at 30% 40%, rgba(0,0,0,.6), transparent 70%);

    pointer-events:none;

}

/* ===========================================
   FLOATING BLOBS
   =========================================== */

.blob{

    position:absolute;

    border-radius:50%;

    filter:blur(60px);

    opacity:.22;

    animation:blobMove 14s infinite alternate ease-in-out;

}

.blob1{

    width:320px;

    height:320px;

    background:#5fd3d9;

    left:-80px;

    top:-80px;

}

.blob2{

    width:420px;

    height:420px;

    background:#12979f;

    right:-150px;

    bottom:-100px;

}

.blob3{

    width:220px;

    height:220px;

    background:#8fe0e3;

    top:45%;

    left:45%;

}

@keyframes blobMove{

    from{

        transform:translate(0,0) scale(1);

    }

    to{

        transform:translate(40px,-40px) scale(1.15);

    }

}

/* ===========================================
   LEFT PANEL
   =========================================== */

.welcome{

    color:#fff;

    padding-right:70px;

}

.welcome h1{

    font-size:54px;

    font-weight:800;

    line-height:1.2;

    margin-bottom:25px;

}

.welcome p{

    font-size:18px;

    line-height:1.9;

    opacity:.92;

    margin-bottom:35px;

}

.welcome ul{

    list-style:none;

    padding:0;

}

.welcome li{

    margin-bottom:18px;

    font-size:17px;

}

.welcome i{

    color:#22c55e;

    margin-right:12px;

}

/* ===========================================
   LOGIN CARD
   =========================================== */

.login-card{

    background:rgba(255,255,255,.10);

    backdrop-filter:blur(22px);

    -webkit-backdrop-filter:blur(22px);

    border:1px solid rgba(255,255,255,.18);

    border-radius:24px;

    padding:45px;

    box-shadow:

    0 25px 70px rgba(2,20,22,.45);

}

/* ===========================================
   LOGO
   =========================================== */

.logo{

    width:84px;

    height:84px;

    margin:auto;

    margin-bottom:22px;

    border-radius:22px;

    background:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:36px;

    color:#0e7c86;

    box-shadow:

    0 12px 30px rgba(2,20,22,.35);

}

.login-card h3{

    font-weight:700;

    color:#fff;

}

.login-card p{

    color:#e2e8f0;

}

/* ===========================================
   FORM
   =========================================== */

label{

    color:#fff;

    font-weight:600;

    margin-bottom:8px;

}

.form-control{

    height:54px;

    border-radius:14px;

    border:none;

    background:rgba(255,255,255,.18);

    color:#fff;

    padding-left:18px;

}

.form-control::placeholder{

    color:#cdeceb;

}

.form-control:focus{

    background:rgba(255,255,255,.22);

    color:#fff;

    box-shadow:

    0 0 0 .25rem rgba(95,211,217,.3);

}

/* ===========================================
   PASSWORD
   =========================================== */

.password-box{

    position:relative;

}

.password-box button{

    position:absolute;

    right:15px;

    top:50%;

    transform:translateY(-50%);

    border:none;

    background:none;

    color:#fff;

    font-size:18px;

}

/* ===========================================
   LINK
   =========================================== */

a{

    text-decoration:none;

}

.login-card a{

    color:#fff;

    transition:.3s;

}

.login-card a:hover{

    color:#facc15;

}

/* ===========================================
   BUTTON
   =========================================== */

.btn-primary{

    border:none;

    border-radius:14px;

    height:55px;

    background:var(--primary);

    color:#fff;

    font-weight:700;

    transition:.35s;

}

.btn-primary:hover{

    background:var(--primary-hover);

    color:#fff;

    transform:translateY(-2px);

    box-shadow:

    0 12px 30px rgba(14,124,134,.4);

}

/* ===========================================
   CHECKBOX
   =========================================== */

input[type=checkbox]{

    accent-color:#facc15;

}

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

.text-center a{

    font-weight:600;

}

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

@media(max-width:991px){

body{

overflow:auto;

}

.login-page{

padding:40px 15px;

}

.login-card{

padding:35px 28px;

}

.logo{

width:75px;

height:75px;

font-size:34px;

}

}

@media(max-width:576px){

.login-card{

border-radius:22px;

padding:28px 22px;

}

.login-card h3{

font-size:28px;

}

.form-control{

height:50px;

}

.btn-primary{

height:50px;

}

}