/*==================================================
   LOGIN PREMIUM SMKN 4 JEMBER
   PART 1
==================================================*/

/*=============================
GOOGLE FONT
=============================*/

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

/*=============================
ROOT
=============================*/

:root{

--primary:#2563eb;
--primary-dark:#1d4ed8;
--secondary:#3b82f6;

--success:#10b981;
--warning:#f59e0b;
--danger:#ef4444;
--purple:#7c3aed;

--white:#ffffff;
--bg:#f4f8fd;

--text:#1f2937;
--text-light:#64748b;

--border:#e5e7eb;

--glass:rgba(255,255,255,.78);

--glass-border:rgba(255,255,255,.35);

--shadow:
0 20px 60px rgba(15,23,42,.12);

--radius:28px;

}

/*=============================
DARK MODE
=============================*/

body.dark{

--bg:#0f172a;

--white:#1e293b;

--text:#f8fafc;

--text-light:#cbd5e1;

--border:#334155;

--glass:rgba(15,23,42,.75);

--glass-border:rgba(255,255,255,.08);

}

/*=============================
RESET
=============================*/

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

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

background:linear-gradient(
135deg,
#dbeafe,
#eff6ff,
#ffffff
);

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

padding:30px;

overflow-x:hidden;

transition:.4s;

position:relative;

}

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

.background-circle{

position:absolute;

border-radius:50%;

filter:blur(35px);

opacity:.4;

z-index:0;

animation:float 8s ease-in-out infinite;

}

.circle1{

width:350px;

height:350px;

background:#60a5fa;

top:-120px;

left:-100px;

}

.circle2{

width:260px;

height:260px;

background:#818cf8;

bottom:-80px;

right:-70px;

animation-delay:2s;

}

.circle3{

width:180px;

height:180px;

background:#38bdf8;

top:50%;

left:45%;

animation-delay:4s;

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-20px);

}

100%{

transform:translateY(0);

}

}

/*=============================
LOGIN WRAPPER
=============================*/

.login-wrapper{

width:1180px;

max-width:100%;

display:grid;

grid-template-columns:58% 42%;

background:var(--glass);

backdrop-filter:blur(18px);

border:1px solid var(--glass-border);

border-radius:32px;

overflow:hidden;

box-shadow:var(--shadow);

position:relative;

z-index:5;

}

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

.left-panel{

padding:40px;

background:linear-gradient(
135deg,
#2563eb,
#3b82f6
);

color:#fff;

display:flex;

flex-direction:column;

justify-content:space-between;

position:relative;

overflow:hidden;

}

.left-panel::before{

content:"";

position:absolute;

width:320px;

height:320px;

border-radius:50%;

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

top:-120px;

right:-100px;

}

.left-panel::after{

content:"";

position:absolute;

width:220px;

height:220px;

border-radius:50%;

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

left:-60px;

bottom:-60px;

}

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

.right-panel{

background:var(--white);

display:flex;

justify-content:center;

align-items:center;

padding:30px;

}

/*=============================
GLASS CARD
=============================*/

.glass{

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

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

backdrop-filter:blur(10px);

}

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

::-webkit-scrollbar{

width:9px;

}

::-webkit-scrollbar-thumb{

background:#3b82f6;

border-radius:30px;

}

::-webkit-scrollbar-track{

background:#e5e7eb;

}

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

::selection{

background:#2563eb;

color:#fff;

}

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

.fade-up{

animation:fadeUp .8s ease;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(25px);

}

to{

opacity:1;

transform:translateY(0);

}

}

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

@media(max-width:1100px){

.login-wrapper{

grid-template-columns:1fr;

width:100%;

}

.left-panel{

display:none;

}

.right-panel{

padding:25px;

}

}

@media(max-width:768px){

body{

padding:15px;

}

.login-wrapper{

border-radius:22px;

}

.right-panel{

padding:20px;

}

}
/*==================================================
 LOGIN PREMIUM
 PART 2
 BRAND - HERO - FEATURE
==================================================*/


/*==============================
BRAND
==============================*/

.brand{

display:flex;

align-items:center;

gap:18px;

position:relative;

z-index:2;

margin-bottom:35px;

}

.logo{

width:68px;

height:68px;

border-radius:18px;

padding:8px;

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

backdrop-filter:blur(10px);

box-shadow:

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

object-fit:contain;

transition:.35s;

}

.logo:hover{

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

}

.brand h2{

font-size:26px;

font-weight:700;

letter-spacing:.5px;

margin-bottom:3px;

}

.brand p{

font-size:14px;

opacity:.92;

}


/*==============================
HERO
==============================*/

.hero{

position:relative;

z-index:2;

margin-bottom:45px;

animation:slideLeft .8s;

}

.hero h1{

font-size:42px;

font-weight:800;

line-height:1.2;

margin-bottom:18px;

}

.hero h1 span{

display:block;

color:#dbeafe;

}

.hero p{

font-size:15px;

line-height:1.9;

opacity:.95;

max-width:480px;

}


/*==============================
FEATURE GRID
==============================*/

.feature-grid{

display:grid;

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

gap:18px;

margin-top:20px;

margin-bottom:35px;

position:relative;

z-index:2;

}


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

.feature{

padding:20px;

border-radius:22px;

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

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

backdrop-filter:blur(12px);

transition:.35s;

cursor:pointer;

position:relative;

overflow:hidden;

}

.feature::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:100%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

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

transparent

);

transition:.8s;

}

.feature:hover::before{

left:120%;

}

.feature:hover{

transform:translateY(-8px);

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

box-shadow:

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

}


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

.feature-icon{

width:52px;

height:52px;

border-radius:16px;

display:flex;

justify-content:center;

align-items:center;

font-size:22px;

margin-bottom:14px;

color:#fff;

transition:.35s;

}

.feature:hover .feature-icon{

transform:scale(1.15) rotate(10deg);

}


/*==============================
ICON COLOR
==============================*/

.blue{

background:

linear-gradient(

135deg,

#2563eb,

#60a5fa

);

}

.green{

background:

linear-gradient(

135deg,

#10b981,

#34d399

);

}

.orange{

background:

linear-gradient(

135deg,

#f59e0b,

#fb923c

);

}

.purple{

background:

linear-gradient(

135deg,

#7c3aed,

#8b5cf6

);

}


/*==============================
TEXT
==============================*/

.feature h4{

font-size:16px;

font-weight:700;

margin-bottom:8px;

}

.feature p{

font-size:13px;

line-height:1.7;

opacity:.94;

}


/*==============================
COPYRIGHT
==============================*/

.copyright{

display:flex;

align-items:center;

gap:10px;

font-size:14px;

opacity:.9;

margin-top:auto;

position:relative;

z-index:2;

}

.copyright i{

font-size:16px;

color:#bbf7d0;

}


/*==============================
LEFT ANIMATION
==============================*/

@keyframes slideLeft{

from{

opacity:0;

transform:translateX(-35px);

}

to{

opacity:1;

transform:translateX(0);

}

}


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

@media(max-width:1100px){

.feature-grid{

grid-template-columns:1fr 1fr;

}

}

@media(max-width:768px){

.feature-grid{

grid-template-columns:1fr;

gap:15px;

}

.hero{

text-align:center;

}

.hero h1{

font-size:32px;

}

.hero p{

font-size:14px;

margin:auto;

}

.brand{

justify-content:center;

}

.brand h2{

font-size:22px;

}

.logo{

width:58px;

height:58px;

}

}
/*==================================================
 LOGIN PREMIUM
 PART 3
 LOGIN CARD
==================================================*/

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

.login-card{

width:100%;
max-width:400px;

background:var(--white);

border-radius:28px;

padding:35px;

box-shadow:
0 20px 50px rgba(15,23,42,.08);

position:relative;

animation:fadeLogin .8s ease;

transition:.35s;

}

.login-card:hover{

transform:translateY(-5px);

box-shadow:
0 30px 60px rgba(15,23,42,.12);

}

body.dark .login-card{

background:#1e293b;

}

/*==============================
LOGIN ICON
==============================*/

.login-icon{

width:72px;

height:72px;

margin:auto;

margin-bottom:22px;

display:flex;

justify-content:center;

align-items:center;

font-size:30px;

color:#fff;

border-radius:50%;

background:

linear-gradient(
135deg,
#2563eb,
#60a5fa);

box-shadow:
0 12px 25px rgba(37,99,235,.35);

}

.login-card h2{

text-align:center;

font-size:28px;

font-weight:700;

color:var(--text);

margin-bottom:5px;

}

.login-card h2 span{

display:block;

font-size:15px;

font-weight:500;

margin-top:4px;

color:var(--primary);

}

.login-card>p{

text-align:center;

font-size:14px;

color:var(--text-light);

margin-bottom:28px;

line-height:1.8;

}

/*==============================
FORM
==============================*/

form{

margin-top:10px;

}

.input-group{

margin-bottom:20px;

}

.input-group label{

display:block;

margin-bottom:8px;

font-size:14px;

font-weight:600;

color:var(--text);

}

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

.input-box{

position:relative;

display:flex;

align-items:center;

}

.input-box i:first-child{

position:absolute;

left:18px;

font-size:17px;

color:#94a3b8;

transition:.3s;

}

.input-box input,
.input-box select{

width:100%;

height:52px;

padding-left:52px;

padding-right:50px;

border-radius:15px;

border:1px solid var(--border);

outline:none;

background:#fff;

font-size:14px;

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

color:var(--text);

transition:.3s;

appearance:none;

}

body.dark .input-box input,
body.dark .input-box select{

background:#0f172a;

border-color:#334155;

color:#fff;

}

.input-box input::placeholder{

color:#94a3b8;

}

.input-box input:focus,
.input-box select:focus{

border-color:#2563eb;

box-shadow:

0 0 0 4px rgba(37,99,235,.15);

}

.input-box:focus-within i:first-child{

color:#2563eb;

transform:scale(1.1);

}

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

.input-box::after{

content:"\f078";

font-family:"Font Awesome 6 Free";

font-weight:900;

position:absolute;

right:18px;

color:#94a3b8;

pointer-events:none;

}

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

.eye{

position:absolute;

right:8px;

width:40px;

height:40px;

display:flex;

justify-content:center;

align-items:center;

border:none;

background:none;

cursor:pointer;

border-radius:50%;

transition:.3s;

}

.eye i{

font-size:17px;

color:#64748b;

}

.eye:hover{

background:#eff6ff;

}

.eye:hover i{

color:#2563eb;

}

body.dark .eye:hover{

background:#334155;

}

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

.btn-login{

width:100%;

height:54px;

margin-top:10px;

border:none;

border-radius:16px;

background:

linear-gradient(
135deg,
#2563eb,
#3b82f6);

color:#fff;

font-size:15px;

font-weight:700;

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

cursor:pointer;

display:flex;

justify-content:center;

align-items:center;

gap:10px;

transition:.35s;

box-shadow:

0 15px 30px rgba(37,99,235,.30);

position:relative;

overflow:hidden;

}

.btn-login::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:100%;

height:100%;

background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.45),
transparent);

transition:.8s;

}

.btn-login:hover{

transform:translateY(-3px);

box-shadow:

0 25px 40px rgba(37,99,235,.40);

}

.btn-login:hover::before{

left:120%;

}

.btn-login:active{

transform:scale(.98);

}

/*==============================
ALERT ERROR
==============================*/

.alert-error{

padding:14px 16px;

margin-bottom:20px;

border-radius:14px;

background:#fee2e2;

color:#b91c1c;

font-size:14px;

display:flex;

gap:10px;

align-items:center;

font-weight:600;

}

body.dark .alert-error{

background:#7f1d1d;

color:#fecaca;

}

/*==============================
DIVIDER
==============================*/

.divider{

margin:28px 0;

text-align:center;

position:relative;

}

.divider::before{

content:"";

position:absolute;

left:0;

right:0;

top:50%;

height:1px;

background:#e5e7eb;

}

.divider span{

position:relative;

padding:0 15px;

background:#fff;

font-size:13px;

color:#94a3b8;

}

body.dark .divider span{

background:#1e293b;

}

/*==============================
LOGIN INFO
==============================*/

.login-info{

padding:15px;

border-radius:14px;

background:#eff6ff;

border-left:4px solid #2563eb;

display:flex;

gap:10px;

align-items:flex-start;

font-size:13px;

line-height:1.7;

color:#475569;

}

.login-info i{

color:#2563eb;

margin-top:2px;

}

body.dark .login-info{

background:#172554;

color:#cbd5e1;

}

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

@keyframes fadeLogin{

from{

opacity:0;

transform:translateY(25px);

}

to{

opacity:1;

transform:translateY(0);

}

}
/*==================================================
 LOGIN PREMIUM
 PART 4
 FINISHING + DARK MODE + RESPONSIVE
==================================================*/

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

.theme-toggle{

position:fixed;

right:25px;

bottom:25px;

width:58px;

height:58px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

cursor:pointer;

background:linear-gradient(
135deg,
#2563eb,
#60a5fa);

color:#fff;

font-size:22px;

box-shadow:
0 15px 35px rgba(37,99,235,.35);

transition:.35s;

z-index:999;

}

.theme-toggle:hover{

transform:translateY(-6px) rotate(180deg);

}

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

.btn-login{

overflow:hidden;

}

.ripple{

position:absolute;

border-radius:50%;

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

transform:scale(0);

pointer-events:none;

animation:ripple .6s linear;

}

@keyframes ripple{

100%{

transform:scale(4);

opacity:0;

}

}

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

.login-card{

overflow:hidden;

}

.login-card::before{

content:"";

position:absolute;

top:-140px;

right:-140px;

width:250px;

height:250px;

border-radius:50%;

background:rgba(37,99,235,.05);

transition:.5s;

}

.login-card:hover::before{

transform:scale(1.5);

}

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

.input-box{

transition:.3s;

}

.input-box:hover{

transform:translateY(-2px);

}

/* ==============================
   FEATURE CARD EFFECT
============================== */

.feature{

position:relative;

overflow:hidden;

}

.feature::after{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(

120deg,

transparent,

rgba(255,255,255,.12),

transparent

);

transform:translateX(-100%);

transition:.7s;

}

.feature:hover::after{

transform:translateX(100%);

}

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

.btn-login::after{

content:"";

position:absolute;

inset:-2px;

border-radius:18px;

background:

linear-gradient(
135deg,
#2563eb,
#60a5fa);

z-index:-1;

filter:blur(15px);

opacity:0;

transition:.4s;

}

.btn-login:hover::after{

opacity:.65;

}

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

::-webkit-scrollbar{

width:9px;

}

::-webkit-scrollbar-track{

background:#e5e7eb;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(
180deg,
#2563eb,
#60a5fa);

border-radius:30px;

}

/* ==============================
   DARK MODE
============================== */

body.dark{

background:linear-gradient(
135deg,
#020617,
#0f172a,
#1e293b);

}

body.dark .right-panel{

background:#1e293b;

}

body.dark .login-card{

background:#1e293b;

color:#fff;

}

body.dark input,

body.dark select{

background:#0f172a;

color:#fff;

border-color:#334155;

}

body.dark .divider::before{

background:#334155;

}

body.dark .feature{

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

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

}

body.dark .copyright{

color:#cbd5e1;

}

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

.btn-loading{

pointer-events:none;

opacity:.85;

}

.btn-loading i{

animation:spin 1s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

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

.feature{

animation:fadeUp .8s ease;

}

.login-card{

animation:fadeUp .8s ease;

}

.logo{

animation:zoomLogo .8s ease;

}

@keyframes zoomLogo{

from{

opacity:0;

transform:scale(.6);

}

to{

opacity:1;

transform:scale(1);

}

}

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

.footer{

margin-top:20px;

text-align:center;

font-size:13px;

color:var(--text-light);

}

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

@media(max-width:992px){

.login-wrapper{

grid-template-columns:1fr;

max-width:650px;

}

.left-panel{

display:none;

}

.right-panel{

padding:25px;

}

}

@media(max-width:768px){

body{

padding:15px;

}

.login-card{

max-width:100%;

padding:25px;

border-radius:22px;

}

.login-icon{

width:60px;

height:60px;

font-size:24px;

}

.login-card h2{

font-size:24px;

}

.input-box input,

.input-box select{

height:48px;

font-size:14px;

}

.btn-login{

height:50px;

font-size:14px;

}

.theme-toggle{

width:50px;

height:50px;

font-size:18px;

right:15px;

bottom:15px;

}

}

@media(max-width:480px){

.login-card{

padding:20px;

}

.login-card h2{

font-size:22px;

}

.input-group{

margin-bottom:16px;

}

.btn-login{

height:48px;

}

}