@media screen and (max-width: 600px) {
				.mauMobilGa {
					visibility: hidden;
					clear: both;
					float: left;
					margin: 10px auto 5px 20px;
					width: 28%;
					display: none;
				}
				}
				/* =====================================================
   MODERN LOGIN LMS MADRASAH
   PART 2A
======================================================*/

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

:root{

--primary:#15803d;
--primary2:#22c55e;
--secondary:#16a34a;
--yellow:#facc15;
--white:#ffffff;
--text:#1e293b;
--muted:#64748b;
--border:#e2e8f0;
--bg:#f3f7fb;
--shadow:0 25px 60px rgba(0,0,0,.10);

}

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

html,
body{

height:100%;

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

background:var(--bg);

overflow-x:hidden;

}

a{

text-decoration:none;

transition:.3s;

}

img{

max-width:100%;

display:block;

}

button{

cursor:pointer;

border:none;

outline:none;

font-family:'Poppins';

}

input{

font-family:'Poppins';

outline:none;

}






/***************************************************
BACKGROUND
****************************************************/

.login-page{

min-height:100vh;

background:
linear-gradient(
135deg,
#f7fafc 0%,
#edf7f0 100%
);

position:relative;

overflow:hidden;

}

.bg-shape{

position:absolute;

border-radius:50%;

filter:blur(70px);

opacity:.30;

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

}

.shape1{

width:420px;

height:420px;

background:#22c55e;

top:-120px;

left:-120px;

}

.shape2{

width:350px;

height:350px;

background:#38bdf8;

bottom:-120px;

right:-80px;

animation-delay:2s;

}

.shape3{

width:220px;

height:220px;

background:#fde047;

top:40%;

left:45%;

animation-delay:5s;

}

@keyframes floating{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(25px);

}

100%{

transform:translateY(0px);

}

}







/***************************************************
MAIN WRAPPER
****************************************************/

.login-wrapper{

width:100%;

min-height:100vh;

display:flex;

align-items:center;

justify-content:center;

padding:40px;

position:relative;

z-index:10;

}







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

.login-left{

flex:1.1;

min-height:820px;

border-radius:35px 0 0 35px;

background:

linear-gradient(

135deg,

rgba(21,128,61,.96),

rgba(22,163,74,.90)

),

url("../versi4/img/background.png");

background-size:cover;

background-position:center;

position:relative;

overflow:hidden;

display:flex;

align-items:center;

justify-content:center;

box-shadow:

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

}

.login-left::before{

content:"";

position:absolute;

width:650px;

height:650px;

border-radius:50%;

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

top:-250px;

right:-250px;

}

.login-left::after{

content:"";

position:absolute;

width:400px;

height:400px;

border-radius:50%;

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

bottom:-150px;

left:-120px;

}

.overlay{

position:absolute;

inset:0;

background:

linear-gradient(

180deg,

rgba(0,0,0,.05),

rgba(0,0,0,.15)

);

}







/***************************************************
LEFT CONTENT
****************************************************/

.login-left .content{

position:relative;

z-index:10;

padding:70px;

color:#fff;

max-width:650px;

}

.logo{

width:95px;

margin-bottom:25px;

filter:drop-shadow(

0 8px 15px rgba(0,0,0,.25)

);

}

.badge-lms{

display:inline-flex;

align-items:center;

padding:10px 22px;

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

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

border-radius:40px;

font-size:14px;

font-weight:600;

backdrop-filter:blur(10px);

margin-bottom:30px;

}

.login-left h1{

font-size:46px;

font-weight:800;

line-height:1.2;

margin-bottom:20px;

}

.subtitle{

font-size:18px;

font-weight:400;

line-height:1.8;

opacity:.95;

margin-bottom:50px;

}







/***************************************************
FEATURE LIST
****************************************************/

.feature-list{

display:flex;

flex-direction:column;

gap:22px;

margin-bottom:55px;

}

.feature-item{

display:flex;

align-items:flex-start;

gap:18px;

padding:18px 22px;

border-radius:18px;

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

backdrop-filter:blur(15px);

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

transition:.35s;

}

.feature-item:hover{

transform:translateX(8px);

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

}

.feature-item .icon{

width:58px;

height:58px;

border-radius:16px;

background:#fff;

color:var(--primary);

display:flex;

align-items:center;

justify-content:center;

font-size:24px;

flex-shrink:0;

}

.feature-item h5{

font-size:18px;

font-weight:700;

margin-bottom:5px;

}

.feature-item span{

font-size:14px;

opacity:.90;

line-height:1.6;

display:block;

}







/***************************************************
ILLUSTRATION
****************************************************/

.illustration{

width:100%;

max-width:500px;

margin:50px auto 0;

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

}

@keyframes floatImage{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}

/* =====================================================
   MODERN LOGIN LMS MADRASAH
   PART 2B
======================================================*/


/*****************************************
RIGHT PANEL
******************************************/

.login-right{

flex:.9;

min-height:820px;

display:flex;

align-items:center;

justify-content:center;

background:#f8fafc;

border-radius:0 35px 35px 0;

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

padding:60px;

position:relative;

overflow:hidden;

}

.login-right::before{

content:"";

position:absolute;

width:350px;

height:350px;

background:rgba(34,197,94,.08);

border-radius:50%;

top:-150px;

right:-150px;

}

.login-right::after{

content:"";

position:absolute;

width:220px;

height:220px;

background:rgba(21,128,61,.05);

bottom:-80px;

left:-80px;

border-radius:50%;

}





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

.login-card{

width:100%;

max-width:500px;

background:#fff;

border-radius:28px;

padding:45px;

position:relative;

z-index:5;

box-shadow:

0 20px 60px rgba(15,23,42,.10);

border:1px solid rgba(226,232,240,.8);

transition:.35s;

}

.login-card:hover{

transform:translateY(-6px);

box-shadow:

0 35px 80px rgba(15,23,42,.15);

}





/*****************************************
HEADER
******************************************/

.login-header{

text-align:center;

margin-bottom:40px;

}

.login-header h2{

font-size:34px;

font-weight:700;

color:#0f172a;

margin-bottom:10px;

}

.login-header p{

font-size:15px;

color:#64748b;

line-height:1.7;

}





/*****************************************
INPUT GROUP
******************************************/

.input-group-modern{

margin-bottom:24px;

}

.input-group-modern label{

display:block;

font-size:14px;

font-weight:600;

color:#334155;

margin-bottom:10px;

}

.label-row{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:10px;

}

.label-row a{

font-size:13px;

font-weight:600;

color:#16a34a;

}

.label-row a:hover{

color:#15803d;

}





/*****************************************
INPUT BOX
******************************************/

.input-box{

position:relative;

display:flex;

align-items:center;

height:60px;

background:#f8fafc;

border:2px solid #e2e8f0;

border-radius:16px;

transition:.3s;

}

.input-box:hover{

border-color:#22c55e;

}

.input-box:focus-within{

border-color:#15803d;

box-shadow:

0 0 0 4px rgba(34,197,94,.12);

background:#fff;

}





.input-box i{

width:55px;

text-align:center;

font-size:18px;

color:#64748b;

}





.input-box input{

flex:1;

height:100%;

border:none;

background:none;

padding-right:18px;

font-size:15px;

color:#1e293b;

}

.input-box input::placeholder{

color:#94a3b8;

}





/*****************************************
SHOW PASSWORD
******************************************/

.toggle-password{

width:55px;

height:55px;

background:none;

border:none;

color:#64748b;

font-size:18px;

cursor:pointer;

transition:.3s;

}

.toggle-password:hover{

color:#15803d;

}





/*****************************************
OPTION
******************************************/

.login-option{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:28px;

}

.login-option label{

font-size:14px;

color:#475569;

display:flex;

align-items:center;

gap:10px;

cursor:pointer;

}

.login-option input{

width:17px;

height:17px;

accent-color:#15803d;

}





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

.btn-login{

width:100%;

height:58px;

border:none;

border-radius:16px;

background:

linear-gradient(

135deg,

#15803d,

#22c55e

);

color:#fff;

font-size:17px;

font-weight:700;

letter-spacing:.4px;

transition:.35s;

box-shadow:

0 12px 30px rgba(21,128,61,.30);

margin-bottom:18px;

}

.btn-login:hover{

transform:translateY(-3px);

box-shadow:

0 20px 40px rgba(21,128,61,.40);

}





.btn-login:active{

transform:scale(.98);

}





/*****************************************
CBT BUTTON
******************************************/

.btn-cbt{

display:flex;

align-items:center;

justify-content:center;

gap:12px;

width:100%;

height:56px;

border-radius:16px;

font-size:15px;

font-weight:600;

color:#15803d;

background:#ecfdf5;

border:2px solid #bbf7d0;

transition:.3s;

}

.btn-cbt:hover{

background:#15803d;

color:#fff;

border-color:#15803d;

}





/*****************************************
LOADING
******************************************/

.loading-area{

height:45px;

display:flex;

justify-content:center;

align-items:center;

margin-top:18px;

}





/*****************************************
FOOTER
******************************************/

.footer-login{

margin-top:35px;

text-align:center;

font-size:13px;

color:#94a3b8;

line-height:1.8;

border-top:1px solid #e2e8f0;

padding-top:22px;

}





/*****************************************
SMOOTH ANIMATION
******************************************/

.login-left{

animation:leftSlide .8s ease;

}

.login-card{

animation:rightSlide .9s ease;

}

@keyframes leftSlide{

from{

opacity:0;

transform:translateX(-60px);

}

to{

opacity:1;

transform:translateX(0);

}

}

@keyframes rightSlide{

from{

opacity:0;

transform:translateX(60px);

}

to{

opacity:1;

transform:translateX(0);

}

}





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

input:-webkit-autofill{

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

-webkit-text-fill-color:#1e293b;

transition:background-color 9999s ease-in-out 0s;

}

/* =====================================================
   MODERN LOGIN LMS MADRASAH
   PART 2C
======================================================*/


/**************************************
SCROLLBAR
***************************************/

::-webkit-scrollbar{

width:10px;

height:10px;

}

::-webkit-scrollbar-track{

background:#eef2f7;

}

::-webkit-scrollbar-thumb{

background:#15803d;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#0f6c31;

}





/**************************************
SELECTION
***************************************/

::selection{

background:#15803d;

color:#fff;

}





/**************************************
INPUT PLACEHOLDER
***************************************/

input::placeholder{

transition:.3s;

}

input:focus::placeholder{

opacity:.35;

}





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

.btn-login,
.btn-cbt{

position:relative;

overflow:hidden;

}

.btn-login::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:120%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.25),

transparent

);

transition:.8s;

}

.btn-login:hover::before{

left:120%;

}





/**************************************
FEATURE CARD
***************************************/

.feature-item{

cursor:pointer;

}

.feature-item:hover .icon{

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

transition:.35s;

}





.logo{

transition:.5s;

}

.logo:hover{

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

}





/**************************************
GLASS EFFECT
***************************************/

.login-card{

backdrop-filter:blur(12px);

}

.feature-item{

backdrop-filter:blur(20px);

}





/**************************************
ILLUSTRATION
***************************************/

.illustration{

filter:

drop-shadow(

0 25px 40px rgba(0,0,0,.25)

);

}





/**************************************
FOCUS ACCESSIBILITY
***************************************/

button:focus,
input:focus,
a:focus{

outline:none;

}





/**************************************
SMALL DECORATION
***************************************/

.login-card::before{

content:"";

position:absolute;

top:0;

left:0;

right:0;

height:6px;

border-radius:28px 28px 0 0;

background:

linear-gradient(

90deg,

#15803d,

#22c55e,

#84cc16

);

}





/**************************************
ANIMATION
***************************************/

@keyframes pulseGreen{

0%{

box-shadow:

0 0 0 0 rgba(34,197,94,.35);

}

70%{

box-shadow:

0 0 0 18px rgba(34,197,94,0);

}

100%{

box-shadow:

0 0 0 0 rgba(34,197,94,0);

}

}

.btn-login{

animation:pulseGreen 3s infinite;

}





/**************************************
TABLET
***************************************/

@media(max-width:1200px){

.login-wrapper{

padding:25px;

}

.login-left{

min-height:720px;

}

.login-right{

min-height:720px;

padding:40px;

}

.login-left h1{

font-size:36px;

}

.subtitle{

font-size:16px;

}

.login-card{

padding:35px;

}

}





/**************************************
RESPONSIVE
***************************************/

@media(max-width:992px){

.login-wrapper{

display:block;

padding:20px;

}

.login-left{

border-radius:25px 25px 0 0;

min-height:auto;

padding:50px 30px;

}

.login-right{

border-radius:0 0 25px 25px;

min-height:auto;

padding:40px 25px;

}

.login-left .content{

padding:10px;

max-width:100%;

text-align:center;

}

.feature-list{

margin-top:40px;

}

.illustration{

max-width:350px;

margin-top:40px;

}

}





/**************************************
MOBILE
***************************************/

@media(max-width:768px){

.login-wrapper{

padding:15px;

}

.login-left{

border-radius:20px 20px 0 0;

}

.login-right{

border-radius:0 0 20px 20px;

padding:25px;

}

.login-left h1{

font-size:30px;

}

.subtitle{

font-size:15px;

margin-bottom:35px;

}

.badge-lms{

font-size:13px;

padding:8px 18px;

}

.feature-item{

padding:15px;

gap:15px;

}

.feature-item h5{

font-size:16px;

}

.feature-item span{

font-size:13px;

}

.feature-item .icon{

width:48px;

height:48px;

font-size:20px;

}

.login-card{

padding:30px 25px;

border-radius:20px;

}

.login-header h2{

font-size:28px;

}

.input-box{

height:56px;

}

.btn-login{

height:55px;

font-size:15px;

}

.btn-cbt{

height:54px;

font-size:14px;

}

.footer-login{

font-size:12px;

}

}





/**************************************
EXTRA SMALL
***************************************/

@media(max-width:480px){

.login-wrapper{

padding:0;

}

.login-left{

border-radius:0;

}

.login-right{

border-radius:0;

padding:20px;

}

.login-left{

display:none;

}

.login-right{

width:100%;

min-height:100vh;

display:flex;

align-items:center;

justify-content:center;

}

.login-card{

width:100%;

max-width:100%;

padding:28px 20px;

border-radius:18px;

box-shadow:none;

border:none;

}

.login-header h2{

font-size:26px;

}

.login-header p{

font-size:14px;

}

.logo{

width:70px;

margin:auto;

}

}





/**************************************
LARGE DESKTOP
***************************************/

@media(min-width:1600px){

.login-wrapper{

max-width:1700px;

margin:auto;

}

.login-left{

min-height:900px;

}

.login-right{

min-height:900px;

}

.login-left h1{

font-size:52px;

}

.login-card{

max-width:540px;

}

}
/* ==========================================
RIPPLE
========================================== */

.btn-login,
.btn-cbt{

position:relative;

overflow:hidden;

}

.ripple{

position:absolute;

width:15px;

height:15px;

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

border-radius:50%;

transform:translate(-50%,-50%);

animation:ripple .6s linear;

pointer-events:none;

}

@keyframes ripple{

0%{

width:0;

height:0;

opacity:.8;

}

100%{

width:450px;

height:450px;

opacity:0;

}

}





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

.input-box.active{

border-color:#16a34a;

box-shadow:

0 0 0 4px rgba(34,197,94,.15);

}





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

.btn-login:disabled{

opacity:.85;

cursor:not-allowed;

}





/* ==========================================
SMOOTH
========================================== */

.login-card{

transition:

transform .25s,

box-shadow .35s;

transform-style:preserve-3d;

}

/*==========================================================
        PREMIUM FINISH
==========================================================*/


/******************************
STATISTIC
******************************/

.stats{

display:flex;

gap:18px;

margin-top:45px;

flex-wrap:wrap;

}

.stat{

flex:1;

min-width:130px;

padding:18px;

border-radius:20px;

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

backdrop-filter:blur(20px);

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

text-align:center;

transition:.35s;

}

.stat:hover{

transform:translateY(-8px);

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

}

.stat h2{

font-size:32px;

font-weight:700;

margin-bottom:8px;

color:#fff;

}

.stat p{

font-size:13px;

opacity:.9;

}





/******************************
FLOATING PARTICLE
******************************/

.particle{

position:absolute;

width:12px;

height:12px;

border-radius:50%;

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

animation:particle 18s linear infinite;

pointer-events:none;

}

@keyframes particle{

0%{

transform:translateY(0);

opacity:0;

}

20%{

opacity:1;

}

100%{

transform:translateY(-1200px);

opacity:0;

}

}





/******************************
GLASS BADGE
******************************/

.glass-badge{

display:inline-flex;

padding:10px 20px;

border-radius:40px;

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

backdrop-filter:blur(15px);

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

font-size:13px;

margin-bottom:25px;

}





/******************************
WAVE
******************************/

.wave{

position:absolute;

bottom:0;

left:0;

width:100%;

opacity:.15;

}





/******************************
INPUT SHADOW
******************************/

.input-box{

box-shadow:

0 5px 15px rgba(0,0,0,.04);

}





/******************************
BUTTON
******************************/

.btn-login{

letter-spacing:.6px;

text-transform:uppercase;

}





/******************************
SMOOTH
******************************/

*{

scroll-behavior:smooth;

}