/* e-Pustaka v1.2.1 - Login background final */

body .login-wrap{
    min-height:100vh;
    display:grid;
    grid-template-columns:minmax(560px,1.15fr) minmax(420px,.85fr);
    overflow:hidden;
}

body .login-hero{
    position:relative;
    min-height:100vh;
    overflow:hidden;
    display:flex;
    align-items:center;
    padding:72px clamp(44px,5vw,78px);
    background-image:url('../images/login/library-login.png');
    background-size:cover;
    background-position:center center;
}

body .login-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(255,255,255,0.55);
    z-index:1;
}

body .login-hero-copy{
    position:relative;
    z-index:2;
    max-width:620px;
    color:#24183f;
}

body .login-hero-copy h1{
    color:#24183f;
}

body .login-hero-copy p,
body .hero-tag,
body .login-benefits{
    color:#24183f;
}

body .login-hero small{
    position:absolute;
    bottom:32px;
    left:78px;
    z-index:2;
    color:#ffffff;
    font-weight:700;
}

body .login-panel{
    display:grid;
    place-items:center;
}

@media(max-width:900px){
    body .login-wrap{
        display:flex;
        flex-direction:column;
    }

    body .login-hero{
        min-height:55vh;
        padding:32px 24px;
    }

    body .login-hero small{
        left:24px;
        bottom:18px;
    }
}



/* e-Pustaka v1.2.6 - Login Polish Override
   Jangan mengganti login.css utama.
   Tambahkan CSS ini setelah login.css aktif.
*/

body .login-hero {
    background-position: right center !important;
}

body .login-hero::before {
    background: rgba(255,255,255,0.30) !important;
}

body .login-hero-copy {
    max-width: 600px !important;
}

body .login-hero-copy h1 {
    font-size: clamp(42px, 3.2vw, 56px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.8px;
}

body .login-hero-copy p {
    max-width: 560px !important;
    line-height: 1.55 !important;
}

body .login-benefits {
    gap: 28px !important;
}

body .login-hero small {
    left: 78px !important;
    bottom: 32px !important;
}



/* e-Pustaka v1.2.7 - Login Hero Final Polish Override
   IMPORTANT:
   - Jangan replace login.css.
   - Tempelkan CSS ini di bagian paling bawah login.css aktif.
   - Tidak mengubah background-image asli.
*/

/* Menggeser komposisi gambar agar area teks lebih bersih */
body .login-hero{
    background-position:75% center !important;
}

/* Gradient overlay agar teks jelas tetapi gambar tetap terlihat */
body .login-hero::before{
    background:
    linear-gradient(
        90deg,
        rgba(255,255,255,0.72) 0%,
        rgba(255,255,255,0.45) 38%,
        rgba(255,255,255,0.18) 70%,
        rgba(255,255,255,0.10) 100%
    ) !important;
}

/* Area teks */
body .login-hero-copy{
    max-width:600px !important;
}

body .login-hero-copy h1{
    color:#17102f !important;
    font-size:48px !important;
    line-height:1.1 !important;
    letter-spacing:-0.8px;
    max-width:600px;
}

body .login-hero-copy p{
    color:#24183f !important;
    max-width:560px;
    line-height:1.55;
}

/* Benefit */
body .login-benefits{
    gap:30px !important;
}

/* Footer */
body .login-hero small{
    left:78px !important;
    bottom:34px !important;
    font-size:14px;
}

@media(max-width:900px){
    body .login-hero{
        background-position:center center !important;
    }

    body .login-hero-copy h1{
        font-size:38px !important;
    }

    body .login-hero small{
        left:24px !important;
        bottom:18px !important;
    }
}


/* e-Pustaka v1.2.8 - Login Text Alignment Override
   Tempelkan di bagian paling bawah login.css aktif.
   Tidak mengganti background dan tidak mengubah login panel.
*/

body .login-hero-copy{
    transform:translateX(-45px);
    max-width:520px !important;
}

body .login-hero-copy h1{
    font-size:46px !important;
    line-height:1.08 !important;
    max-width:520px !important;
    letter-spacing:-0.6px;
}

body .login-hero-copy p{
    max-width:480px !important;
}

body .login-benefits{
    gap:34px !important;
}

@media(max-width:900px){
    body .login-hero-copy{
        transform:none;
        max-width:100% !important;
    }

    body .login-hero-copy h1{
        font-size:38px !important;
    }
}


/* e-Pustaka v1.2.9 - Login Hero Left Alignment Override
   Tempelkan di bagian paling bawah login.css aktif.
   Tidak mengganti background, tidak mengubah login panel.
*/

body .login-hero-copy{
    transform:translate(-120px,-20px) !important;
    max-width:560px !important;
}

body .login-hero-copy h1{
    max-width:560px !important;
}

body .login-hero-copy p{
    max-width:500px !important;
}

@media(max-width:900px){
    body .login-hero-copy{
        transform:none !important;
        max-width:100% !important;
    }
}

/* e-Pustaka v1.4.2 - Mobile Login Final
   Gunakan sebagai CSS final setelah membersihkan patch lama.
*/

.mobile-brand{
    display:none;
}

@media(max-width:900px){

    body .login-wrap{
        display:block;
        min-height:100vh;
        position:relative;
    }

    body .login-hero{
        position:fixed;
        inset:0;
        min-height:100vh;
        padding:0;
        background-position:center;
        z-index:0;
    }

    body .login-hero-copy,
    body .login-hero small{
        display:none;
    }

    body .login-hero::before{
        background:linear-gradient(
            rgba(255,255,255,.45),
            rgba(255,255,255,.75)
        );
    }

    body .login-panel{
        min-height:100vh;
        display:flex;
        align-items:center;
        justify-content:center;
        position:relative;
        z-index:2;
    }

    body .login-card{
        width:calc(100% - 40px);
        max-width:420px;
        background:rgba(255,255,255,.92);
        backdrop-filter:blur(12px);
    }

    body .mobile-brand{
        display:block;
        text-align:center;
        margin-bottom:18px;
    }

    body .mobile-brand h1{
        margin:0;
        color:#24183f;
        font-size:34px;
        line-height:1.1;
    }

    body .mobile-brand p{
        margin:6px 0 0;
        color:#24183f;
        font-weight:700;
    }
}

@media(max-width:390px){
    body .login-card{
        width:calc(100% - 28px);
    }
}

/* e-Pustaka Mobile Cleanup */

@media(max-width:900px){

    body .login-hero-copy{
        display:none !important;
    }

    body .login-hero small{
        display:none !important;
    }

    body .login-hero{
        position:absolute !important;
        inset:0 !important;
        min-height:100vh !important;
    }

    body .login-panel{
        min-height:100vh !important;
        position:relative !important;
        z-index:10 !important;
    }

    body .login-card{
        margin:auto;
    }

}

/* e-Pustaka Mobile Background Layer Fix */

@media(max-width:900px){

    body{
        background:transparent !important;
    }

    body .login-wrap{
        background:transparent !important;
    }

    body .login-hero{
        display:block !important;
        position:fixed !important;
        inset:0 !important;
        width:100% !important;
        height:100vh !important;
        min-height:100vh !important;
        z-index:0 !important;

        background-image:url('../images/login/library-login.png') !important;
        background-size:cover !important;
        background-position:center !important;
    }

    body .login-panel{
        background:transparent !important;
        position:relative !important;
        z-index:2 !important;
    }

    body .login-card{
        background:rgba(255,255,255,0.90) !important;
        backdrop-filter:blur(10px);
    }

}

/*
e-Pustaka v1.4.3 - Mobile Login Polish

@media(max-width:900px){

  
    body .login-hero::before{
        background:
        linear-gradient(
            rgba(255,255,255,0.35),
            rgba(255,255,255,0.45)
        ) !important;
    }


   
    body .login-card{
        width:calc(100% - 48px) !important;
        max-width:420px !important;
        padding:28px 24px !important;
        border-radius:28px !important;
        background:rgba(255,255,255,0.84) !important;
    }


   
    body .mobile-brand h1{
        font-size:42px !important;
        line-height:1.05 !important;
        margin-bottom:4px !important;
    }

    body .mobile-brand p{
        font-size:20px !important;
        margin-top:0 !important;
    }


    
    body .login-card-logo{
        margin-top:8px !important;
        margin-bottom:18px !important;
    }

    body .login-card-logo img{
        width:80px !important;
        height:80px !important;
    }


    
    body .login-card h2{
        font-size:34px !important;
        margin-bottom:10px !important;
    }



    body .login-card > p{
        font-size:18px !important;
        line-height:1.35 !important;
        margin-bottom:22px !important;
    }


  
    body .field{
        margin-bottom:16px !important;
    }


   
    body .btn.primary{
        height:52px !important;
        font-size:18px !important;
    }

}
*/