/*
==================================================
SIMANTAP v1.0
Sistem Informasi Manajemen Antrian Pelayanan Terpadu

Login CSS
==================================================
*/

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

body{

	margin:0;
	overflow:hidden;
    padding:0;
    font-family:'Poppins',sans-serif;

    background:
    linear-gradient(
        rgba(0,70,40,.70),
        rgba(0,70,40,.85)
    ),
    url("../img/bg.png");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    min-height:100vh;
}

.login-page{

width:100%;

height:100vh;

display:flex;

justify-content:center;

align-items:center;

padding:20px;

box-sizing:border-box;

}

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

.bg-video{

    position:absolute;

    width:100%;
    height:100%;

    top:0;
    left:0;

    object-fit:cover;

    z-index:-3;

}

/* ================================
   OVERLAY
================================ */

.overlay{

    position:absolute;

    width:100%;
    height:100%;

    background:

    linear-gradient(

        rgba(7,55,35,.82),

        rgba(5,40,25,.75)

    );

    z-index:-2;

}

/* ================================
   CONTENT
================================ */

.login-container{

    width:92%;
    max-width:1350px;
	height:100%;
    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:70px;

}

/* ================================
   LEFT SIDE
================================ */

.login-left{

    width:58%;

    justify-content:center;

    align-items:center;

    text-align:center;

    color:#fff;

    color:white;

    animation:fadeUp 1s;

}

.login-left img{

    width:130px;

    margin-bottom:25px;

}

.login-left h1{

    font-size:58px;

    font-weight:800;

    margin-bottom:10px;

    color:white;
	
	text-align:center;

}

.login-left h2{

    font-size:24px;

    font-weight:400;

    color:#E8F5E9;
	
	text-align:center;

}

.login-left p{

    margin-top:30px;

    font-size:18px;

    line-height:32px;

    color:#F1F8E9;
	
	text-align:center;

}

.tagline{

    width:100%;

    text-align:center;

	margin-top:40px;

    font-size:28px;

    font-weight:600;

    color:#FFD54F;

    min-height:45px;

}

/* ================================
   RIGHT SIDE
================================ */

.login-right{

    width:420px;
	
}


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

.login-card{

	width:520px;
	
	max-width:100%;
    
	padding:45px;

    border-radius:30px;

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

    backdrop-filter:blur(25px);

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

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

    box-shadow:

    0 20px 60px rgba(0,0,0,.35);

    animation:fadeUp .9s;

}

.login-card hr{

    border-color:rgba(255,255,255,.15);

    margin:28px 0;

}


/* ================================
   TITLE
================================ */

.simantap-title{

    font-size:75px;

    font-weight:800;

    letter-spacing:2px;
}
.login-card h3{

    color:white;

    text-align:center;

    margin-bottom:30px;

    font-weight:700;

}

/* ==========================================
   Toggle Password
========================================== */

.toggle-password{

position:absolute;

right:18px;

top:50%;

transform:translateY(-50%);

cursor:pointer;

z-index:100;

font-size:18px;

color:#999;

display:flex;
align-items:center;
justify-content:center;

height:100%;

}

.toggle-password:hover{
    color:#0d6efd;
}

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

.input-group{

    margin-bottom:20px;

}

.input-group-text{

    border:none;

    background:white;

}

.form-control{

    border:none;

   height:58px;

	border-radius:14px;

	padding-left:18px;

}

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

.btn-login{

    width:100%;

    height:54px;

    border:none;

    border-radius:14px;

	background:linear-gradient(
	135deg,
	#0D8B60,
	#12B886
	);

    color:white;

    font-size:17px;

    font-weight:600;

    transition:.3s;

}

.btn-login:hover{

    background:#066A46;

    transform:translateY(-2px);

    box-shadow:

    0 15px 35px rgba(0,0,0,.30);

}

/* ================================
   CLOCK
================================ */

.clock{

    width:100%;
	
	margin-top:18px;

    text-align:center;

    color:white;

}

.clock-time{

    font-size:38px;

    font-weight:700;

}

.clock-date{

    font-size:16px;

    opacity:.9;

}

/* ================================
   STATUS BOX
================================ */

.status-box{

    width:100%;

    max-width:720px;

    margin:35px auto;
	
	margin-top:35px;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

}

.status-item{

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

    backdrop-filter:blur(12px);

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

    border-radius:20px;

    padding:14px;

    text-align:center;

    transition:.3s;

}

.status-item:hover{

    transform:translateY(-4px);

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

}

.status-item h2{

    margin:0;

    font-size:28px;

    font-weight:700;

    color:#ffffff;

}

.status-item p{

    margin-top:8px;

    margin-bottom:0;

    color:#E8F5E9;

    font-size:14px;

}

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

.footer-login{

	position:absolute;

	bottom:18px;

	left:0;

	width:100%;

    margin-top:30px;

    text-align:center;

    color:white;

    font-size:14px;

    opacity:.9;

}

/* ================================
   FLOAT ANIMATION
================================ */

.logo-float{

    animation:floating 5s ease-in-out infinite;

}

@keyframes floating{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0);

}

}

.logo{

animation:floating 4s ease-in-out infinite;
width:100px;


}

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

@media(max-width:992px){

.login-container{

    flex-direction:column;

    text-align:center;

}

.login-left{

    width:100%;

}

.login-right{

    width:100%;
    max-width:450px;
	display:flex;
	justify-content:center;
	align-items:center;

}

.login-left h1{

    font-size:42px;

}

.login-left h2{

    font-size:20px;

}

.login-left p{

    display:none;

}

}

@media(max-width:576px){

.login-card{

    padding:30px;

}

.login-left img{

    width:90px;

}

.login-left h1{

    font-size:34px;

}

.tagline{

    font-size:22px;

}

.clock-time{

    font-size:28px;

}

}

.form-label{

    color:white;

    font-weight:500;

    margin-bottom:8px;

}

.form-control::placeholder{

    color:#999;

}

.form-control:focus{

    border:none;

    box-shadow:

    0 0 0 4px rgba(18,184,134,.20);

}