/* ==========================================================
   Portal Absensi & Visit
   Login Page
   Author : Dani Ariyanto
========================================================== */

:root{

    --primary:#DC2626;
    --primary-hover:#B91C1C;

    --white:#FFFFFF;
    --bg:#F8FAFC;

    --text:#1F2937;
    --text-light:#6B7280;

    --border:#E5E7EB;

    --radius:18px;

    --shadow:
        0 20px 60px rgba(0,0,0,.18);

    --transition:.30s ease;

}

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

html,
body{

    width:100%;
    height:100%;

    font-family:'Poppins',sans-serif;

    background:var(--bg);

}


/* =================================
   BACKGROUND
==================================== */
.login-wrapper{

    display:flex;

    width:100%;

    height:100vh;

}


/* =================================
   LEFT PANEL
==================================== */
.login-left{

    position:relative;

    flex:1;

    background-image:url("../img/login_bg.png");

    background-size:cover;

    background-position:center;

    overflow:hidden;

}


/* =================================
   BACKGROUND PATTERN
==================================== */
.login-left::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:

        radial-gradient(rgba(255,255,255,.08) 2px, transparent 2px);

    background-size:40px 40px;

    opacity:.5;

}


/* =================================
   EFEK GLOW
==================================== */
.login-left::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

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

    border-radius:50%;

    top:-150px;

    left:-150px;

    filter:blur(50px);

}


/* =================================
   OVERLAY
==================================== */
.login-left .overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        135deg,
        rgba(220,38,38,.92),
        rgba(127,29,29,.88)
    );

}


/* =================================
   CONTENT
==================================== */
.login-left .content{

    position:relative;

    z-index:10;

    color:#fff;

    height:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:80px;

}


/* =================================
   LOGO
==================================== */
.logo{

    width:90px;

    margin-bottom:30px;

}


/* =================================
   TITLE
==================================== */
.login-left h1{

    font-size:42px;

    font-weight:700;

    line-height:1.3;

}


/* =================================
   LINE
==================================== */
.line{

    width:80px;

    height:4px;

    border-radius:10px;

    background:#fff;

    margin:25px 0;

}


/* =================================
   DESCRIPTION
==================================== */
.login-left p{

    max-width:500px;

    line-height:1.9;

    font-size:16px;

    opacity:.95;

}


/* =================================
   FEATURES
==================================== */
.feature{

    margin-top:40px;

}

.feature div{

    margin-bottom:15px;

    font-size:16px;

}

.feature i{

    width:28px;

}


/* =================================
   RIGHT PANEL
==================================== */
.login-right{

    width:520px;

    background:#F9FAFB;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px;

}


/* =================================
   LOGIN CARD
==================================== */
.login-card{

    width:100%;

    max-width:420px;

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

    backdrop-filter:blur(12px);
    
    -webkit-backdrop-filter:blur(12px);
    
    border:1px solid rgba(255,255,255,.4);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:50px;

    animation:fadeIn .8s;

}


/* =================================
   HOVER CARD
==================================== */
.login-card{

    transition:.35s;

}

.login-card:hover{

    transform:translateY(-6px);

}


/* =================================
   LOGIN LOGO
==================================== */
.login-logo{

    width:75px;

    display:block;

    margin:auto;

    margin-bottom:25px;

}


/* =================================
   LOGO ANIMATION
==================================== */
.login-logo{

    transition:.35s;

}

.login-logo:hover{

    transform:rotate(-5deg) scale(1.08);

}


/* =================================
   HEADING
==================================== */
.login-card h2{

    text-align:center;

    font-size:28px;

    font-weight:600;

    color:var(--text);

}


/* =================================
   SUB TITLE
==================================== */
.login-card p{

    text-align:center;

    color:var(--text-light);

    margin-bottom:35px;

}


/* =================================
   FORM
==================================== */
.form-group label{

    font-weight:500;

    margin-bottom:8px;
    
    border-radius:10px;

}


/* =================================
   INPUT GROUP
==================================== */
.input-group-text{

    background:#fff;

    border-color:var(--border);
    
    border-radius:10px 0 0 10px;
}

.input-group-append .input-group-text{

    border-radius:0 10px 10px 0;

}


/* =================================
   INPUT
==================================== */
.form-control{

    height:48px;

    border-color:var(--border);

    box-shadow:none;

}


/* =================================
   INPUT HOVER
==================================== */
.form-control:hover{

    border-color:#d1d5db;

}


/* =================================
   SMOOTH INPUT
==================================== */
.form-control{

    transition:.25s;

}


/* =================================
   FOCUS
==================================== */
.form-control:focus{

    border-color:var(--primary);

    box-shadow:

    0 0 0 .2rem

    rgba(220,38,38,.18);

}


/* =================================
   FOCUS ANIMATION
==================================== */
.form-control:focus{

    transform:scale(1.01);

}


/* =================================
   EYE ICON
==================================== */
#togglePassword{

    cursor:pointer;

    transition:.3s;

}

#togglePassword:hover{

    background:#F3F4F6;

}


/* =================================
   BUTTON
==================================== */
.btn-login{

    background:

    linear-gradient(

        135deg,

        #DC2626,

        #B91C1C

    );

    border:none;

}


/* =================================
   HOVER
==================================== */
.btn-login:hover{

    background:

    linear-gradient(

        135deg,

        #EF4444,

        #DC2626

    );

}


/* =================================
   RIPLE EFFECT
==================================== */
.btn-login{

    position:relative;

    overflow:hidden;

}


/* =================================
   SHADOW BUTTON
==================================== */
.btn-login{

    box-shadow:

    0 8px 25px

    rgba(220,38,38,.30);

}


/* =================================
   VERSION
==================================== */
.version{

    margin-top:30px;

    text-align:center;

    color:#9CA3AF;

    font-size:13px;

}


/* =================================
   ANIMATION
==================================== */
@keyframes fadeIn{

    from{

        opacity:0;

        transform:

        translateY(40px)

        scale(.97);

    }

    to{

        opacity:1;

        transform:

        translateY(0)

        scale(1);

    }

}


/* =================================
   MOBILE
==================================== */
@media(max-width:992px){

    .login-left{

        display:none;

    }

    .login-right{

        width:100%;

    }

    .login-card{

        max-width:450px;

    }

}


/* =================================
   COPYRIGHT
==================================== */
.copyright{

    margin-top:8px;

    font-size:12px;

    color:#9ca3af;

    text-align:center;

}



/* =================================
   CIRCLE
==================================== */
.circle{

    position:absolute;
    
    border-radius:50%;
    
    background:rgba(255,255,255,.08);
    
    animation:float 8s infinite ease-in-out;

}



/* =================================
   INPUT
==================================== */




/* =================================
   INPUT
==================================== */