/*====================================================
E-LEARNING STAI IHYAUL ULUM GRESIK
Modern Login UI
====================================================*/

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

body{

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

background:#eef3f8;

overflow:hidden;

}

/*==============================

BACKGROUND

==============================*/

.login-layout{

display:flex;

width:100%;

height:100vh;

}

/*==============================

LEFT PANEL

==============================*/

.left-panel{

width:58%;

position:relative;

display:flex;

justify-content:center;

align-items:center;

background:url("../../images/staiiu1.png");

background-size:cover;

background-position:center;

overflow:hidden;

}

.left-panel::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

background:linear-gradient(135deg,

rgba(0,32,96,.85),

rgba(0,83,156,.80),

rgba(0,0,0,.55));

}

.overlay{

position:absolute;

width:100%;

height:100%;

backdrop-filter:blur(3px);

}

.hero-content{

position:relative;

z-index:5;

width:80%;

color:#fff;

}

.hero-logo{

width:120px;

margin-bottom:30px;

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

}

.hero-content h1{

font-size:56px;

font-weight:700;

margin-bottom:8px;

}

.hero-content h2{

font-size:34px;

font-weight:500;

margin-bottom:25px;

}

.hero-content p{

font-size:17px;

line-height:32px;

opacity:.95;

margin-bottom:45px;

}

/*==============================

FEATURE

==============================*/

.hero-feature{

display:grid;

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

gap:20px;

}

.feature-card{

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

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

border-radius:20px;

padding:22px;

backdrop-filter:blur(10px);

transition:.4s;

display:flex;

align-items:center;

gap:15px;

}

.feature-card:hover{

transform:translateY(-8px);

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

}

.feature-card i{

font-size:32px;

color:#FFD54F;

}

.feature-card span{

font-size:18px;

font-weight:500;

}

/*==============================

RIGHT PANEL

==============================*/

.right-panel{

width:42%;

display:flex;

justify-content:center;

align-items:center;

background:#ffffff;

position:relative;

overflow:hidden;

}

.right-panel::before{

content:"";

position:absolute;

width:700px;

height:700px;

border-radius:50%;

background:linear-gradient(135deg,#1e88e5,#42a5f5);

top:-350px;

right:-250px;

opacity:.08;

}

.right-panel::after{

content:"";

position:absolute;

width:500px;

height:500px;

border-radius:50%;

background:#1565c0;

bottom:-250px;

left:-150px;

opacity:.06;

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

.login-card{

width:440px;

background:#fff;

border-radius:28px;

padding:28px;

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

position:relative;

z-index:10;

transition:.4s;

}

.login-card:hover{

transform:translateY(-6px);

box-shadow:0 30px 70px rgba(0,0,0,.18);

}

/*=========================================
HEADER LOGIN
=========================================*/

.login-header{

text-align:center;

margin-bottom:25px;

}

.logo-login{

width:60px;

margin-bottom:14px;

animation:floatLogo 4s infinite ease-in-out;

}

.login-header h2{

font-size:25px;

font-weight:600;

color:#003366;

margin-bottom:8px;

letter-spacing:1px;

}

.login-header p{

font-size:10px;

color:#777;

font-weight:500;

}

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

.input-group-custom{

margin-bottom:16px;

}

.input-group-custom label{

display:block;

font-size:10px;

font-weight:500;

margin-bottom:4px;

color:#003366;

}

.input-box{

display:flex;

align-items:center;

background:#f7f9fc;

border:2px solid #e3eaf3;

border-radius:12px;

padding:0 13px;

transition:.3s;

height:42px;

}

.input-box:hover{

border-color:#1976d2;

}

.input-box:focus-within{

border-color:#1565c0;

box-shadow:0 0 12px rgba(33,150,243,.20);

background:#fff;

}

.input-box i{

width:25px;

text-align:center;

font-size:12px;

color:#1565c0;

}

.input-box input{

border:none;

outline:none;

background:none;

width:100%;

height:54px;

font-size:10px;

padding-left:10px;

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

}

.input-box input::placeholder{

color:#999;

}

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

.toggle-password{

cursor:pointer;

padding-left:10px;

color:#1565c0;

font-size:10px;

transition:.3s;

}

.toggle-password:hover{

color:#0d47a1;

}

/*=========================================
SELECT
=========================================*/

.input-group-custom select{

width:100%;

height:40px;

border-radius:10px;

border:2px solid #e3eaf3;

background:#f7f9fc;

padding:0 10px;

font-size:10px;

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

outline:none;

transition:.3s;

}

.input-group-custom select:focus{

border-color:#1565c0;

background:#fff;

box-shadow:0 0 12px rgba(33,150,243,.20);

}

/*=========================================
REMEMBER
=========================================*/

.remember{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:12px;

font-size:10px;

}

.remember label{

display:flex;

align-items:center;

cursor:pointer;

}

.remember input{

margin-right:8px;

accent-color:#1565c0;

}

/*=========================================
FORGOT
=========================================*/

.forgot-password{

text-align:right;

margin-bottom:20px;

}

.forgot-password a{

text-decoration:none;

font-size:10px;

color:#1565c0;

font-weight:450;

transition:.3s;

}

.forgot-password a:hover{

color:#0d47a1;

}

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

.btn-login{

width:100%;

height:36px;

border:none;

border-radius:12px;

background:linear-gradient(135deg,#1565c0,#1e88e5);

color:#fff;

font-size:10px;

font-weight:500;

cursor:pointer;

transition:.35s;

margin-bottom:10px;

box-shadow:0 12px 35px rgba(21,101,192,.35);

}

.btn-login:hover{

transform:translateY(-3px);

box-shadow:0 20px 40px rgba(21,101,192,.45);

}

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

.btn-register{

width:100%;

height:36px;

border-radius:12px;

border:2px solid #1565c0;

background:#fff;

color:#1565c0;

font-size:10px;

font-weight:500;

cursor:pointer;

transition:.35s;

}

.btn-register:hover{

background:#1565c0;

color:#fff;

}

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

.login-footer{

margin-top:18px;

text-align:center;

font-size:10px;

color:#888;

line-height:18px;

}
/*==================================================
ANIMATION
==================================================*/

@keyframes floatLogo{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-12px);
}

100%{
transform:translateY(0px);
}

}

@keyframes floating{

0%{
transform:translateY(0px) rotate(0deg);
opacity:.25;
}

50%{
transform:translateY(-25px) rotate(15deg);
opacity:.55;
}

100%{
transform:translateY(0px) rotate(0deg);
opacity:.25;
}

}

@keyframes fadeIn{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.hero-content{

animation:fadeIn 1.2s ease;

}

.login-card{

animation:fadeIn .9s ease;

}

/*==================================================
FLOATING ICON
==================================================*/

.floating-icons{

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

pointer-events:none;

overflow:hidden;

z-index:1;

}

.floating-icons i{

position:absolute;

font-size:34px;

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

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

}

/* posisi icon */

.floating-icons i:nth-child(1){

left:8%;

top:12%;

animation-delay:0s;

}

.floating-icons i:nth-child(2){

left:22%;

top:72%;

animation-delay:1s;

}

.floating-icons i:nth-child(3){

left:35%;

top:20%;

animation-delay:2s;

}

.floating-icons i:nth-child(4){

left:47%;

top:80%;

animation-delay:3s;

}

.floating-icons i:nth-child(5){

left:63%;

top:16%;

animation-delay:1.5s;

}

.floating-icons i:nth-child(6){

left:74%;

top:68%;

animation-delay:2.8s;

}

.floating-icons i:nth-child(7){

left:86%;

top:30%;

animation-delay:4s;

}

.floating-icons i:nth-child(8){

left:93%;

top:78%;

animation-delay:5s;

}

/*==================================================
SCROLLBAR
==================================================*/

::-webkit-scrollbar{

width:8px;

}

::-webkit-scrollbar-thumb{

background:#1976d2;

border-radius:20px;

}

::-webkit-scrollbar-track{

background:#edf3fb;

}

/*==================================================
SELECTION
==================================================*/

::selection{

background:#1976d2;

color:#fff;

}

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

input:-webkit-autofill{

-webkit-box-shadow:0 0 0px 1000px #fff inset;

-webkit-text-fill-color:#222;

}

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

.btn-login i,

.btn-register i{

margin-right:10px;

}

.btn-login:active,

.btn-register:active{

transform:scale(.97);

}

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

@media(max-width:1200px){

.left-panel{

width:52%;

}

.right-panel{

width:48%;

}

.hero-content h1{

font-size:46px;

}

.hero-content h2{

font-size:28px;

}

.hero-content p{

font-size:16px;

}

.login-card{

width:410px;

padding:40px;

}

}

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

@media(max-width:991px){

.login-layout{

flex-direction:column;

}

.left-panel{

width:100%;

height:35vh;

}

.right-panel{

width:100%;

height:65vh;

padding:30px;

}

.hero-content{

width:90%;

text-align:center;

}

.hero-content h1{

font-size:34px;

}

.hero-content h2{

font-size:24px;

}

.hero-content p{

display:none;

}

.hero-feature{

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

margin-top:20px;

}

.feature-card{

padding:15px;

}

.feature-card span{

font-size:14px;

}

.login-card{

width:100%;

max-width:450px;

}

}

/*==================================================
MOBILE KECIL
==================================================*/

@media(max-width:576px){

.left-panel{

display:none;

}

.right-panel{

width:100%;

height:100vh;

padding:20px;

}

.login-card{

padding:30px 25px;

border-radius:22px;

}

.logo-login{

width:85px;

}

.login-header h2{

font-size:25px;

}

.login-header p{

font-size:13px;

}

.input-box{

height:52px;

}

.input-group-custom select{

height:52px;

}

.btn-login,

.btn-register{

height:52px;

font-size:15px;

}

.floating-icons{

display:none;

}

}

/*==================================================
END
==================================================*/