/*==========================================================
 NURUL YAQIN
 Login Design System
==========================================================*/

:root{

    --primary:#15803D;
    --primary-dark:#166534;
    --primary-light:#DCFCE7;

    --white:#FFFFFF;

    --background:#F4F7F9;

    --text:#0F172A;

    --text-soft:#64748B;

    --border:#E2E8F0;

    --shadow-sm:0 10px 30px rgba(15,23,42,.06);

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

    --shadow-lg:0 30px 70px rgba(15,23,42,.15);

    --radius:24px;

    --transition:.30s ease;

}

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

height:100%;

scroll-behavior:smooth;

}

body{

height:100%;

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

background:

linear-gradient(
135deg,
#F8FAFC 0%,
#F2F7F4 50%,
#EEF8F2 100%
);

color:var(--text);

overflow:hidden;

position:relative;

}

body::before{

content:"";

position:fixed;

top:-220px;

right:-180px;

width:500px;

height:500px;

border-radius:50%;

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

filter:blur(80px);

z-index:0;

}

body::after{

content:"";

position:fixed;

bottom:-180px;

left:-180px;

width:420px;

height:420px;

border-radius:50%;

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

filter:blur(70px);

z-index:0;

}

/*==========================================================
LOGIN LAYOUT
==========================================================*/

.login-wrapper{

position:relative;

z-index:10;

display:flex;

align-items:center;

justify-content:center;

min-height:100vh;

padding:40px;

gap:0;

}

.login-left{

flex:1;

min-height:760px;

display:flex;

align-items:center;

justify-content:center;

padding:80px;

position:relative;

overflow:hidden;

background:
linear-gradient(
135deg,
#166534,
#15803D,
#22C55E);

border-radius:32px 0 0 32px;

}

.login-right{

width:520px;

min-height:760px;

display:flex;

align-items:center;

justify-content:center;

padding:60px;

background:#FFF;

border-radius:0 32px 32px 0;

box-shadow:var(--shadow-lg);

}

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

.login-left::before{

content:"";

position:absolute;

width:700px;

height:700px;

border-radius:50%;

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

top:-250px;

right:-220px;

}

.login-left::after{

content:"";

position:absolute;

width:420px;

height:420px;

border-radius:50%;

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

bottom:-150px;

left:-120px;

}

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

@media(max-width:991px){

.login-wrapper{

flex-direction:column;

padding:20px;

}

.login-left{

width:100%;

min-height:320px;

border-radius:28px 28px 0 0;

}

.login-right{

width:100%;

min-height:auto;

border-radius:0 0 28px 28px;

padding:40px 30px;

}

}

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

.brand{

position:relative;

z-index:2;

max-width:520px;

color:#FFF;

}

.brand-logo{

width:120px;

height:120px;

border-radius:30px;

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

backdrop-filter:blur(18px);

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

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

display:flex;

align-items:center;

justify-content:center;

margin-bottom:35px;

overflow:hidden;

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

transition:var(--transition);

}

.brand-logo img{

width:82px;

height:auto;

transition:.35s;

}

.brand-logo i{

font-size:60px;

color:#FFF;

}

.brand h1{

font-size:52px;

font-weight:700;

line-height:1.1;

margin-bottom:18px;

letter-spacing:-1px;

}

.brand p{

font-size:18px;

line-height:1.9;

opacity:.92;

max-width:420px;

}

.brand-logo:hover{

transform:translateY(-6px);

box-shadow:0 30px 60px rgba(0,0,0,.22);

}

.brand-logo:hover img{

transform:scale(1.08);

}

@media(max-width:991px){

.brand{

text-align:center;

max-width:100%;

}

.brand-logo{

margin:0 auto 30px;

}

.brand h1{

font-size:38px;

}

.brand p{

font-size:16px;

margin:auto;

}

}

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

.login-card{

width:100%;

max-width:460px;

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

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

border-radius:30px;

padding:45px;

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

backdrop-filter:blur(20px);

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

position:relative;

overflow:hidden;

transition:var(--transition);

}

.login-card::before{

content:"";

position:absolute;

top:-70px;

right:-70px;

width:180px;

height:180px;

border-radius:50%;

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

}

.login-card::after{

content:"";

position:absolute;

bottom:-60px;

left:-60px;

width:140px;

height:140px;

border-radius:50%;

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

}

.login-card>*{

position:relative;

z-index:2;

}

.login-card:hover{

transform:translateY(-6px);

box-shadow:

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

}

.login-header{

margin-bottom:35px;

}

.login-header h2{

font-size:36px;

font-weight:700;

margin-bottom:8px;

color:var(--text);

}

.login-header p{

font-size:15px;

color:var(--text-soft);

line-height:1.8;

}

@media(max-width:576px){

.login-card{

padding:30px 25px;

border-radius:24px;

}

.login-header h2{

font-size:30px;

}

}

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

..form-label{

display:block;

margin:0 0 10px;

padding:0;

font-size:14px;

font-weight:600;

line-height:1.4;

color:var(--text);

}

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

.login-input{

display:flex;

align-items:center;

height:56px;

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

border-radius:16px;

background:#FFF;

overflow:hidden;

}

.login-input:hover{

border-color:#CBD5E1;

}

.login-input:focus-within{

border-color:var(--primary);

box-shadow:

0 0 0 4px rgba(21,128,61,.10),

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

transform:translateY(-2px);

}

.login-input .input-group-text{

width:56px;

height:56px;

padding:0;

display:flex;

align-items:center;

justify-content:center;

background:#FFF;

border:none;

}

.login-input:focus-within .input-group-text{

color:var(--primary);

}

.login-input .form-control{

height:56px;

padding:0 16px;

border:none;

background:transparent;

box-shadow:none;

}

.login-input .form-control:focus{

box-shadow:none;

}

.login-input .form-control::placeholder{

color:#94A3B8;

}

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

.btn-password{

width:58px;

border:none;

background:#FFF;

color:#94A3B8;

transition:var(--transition);

}

.btn-password:hover{

background:#F8FAFC;

color:var(--primary);

}

.btn-password:focus{

box-shadow:none;

}

@media(max-width:576px){

.login-input{

height:54px;

}

.login-input .input-group-text{

width:54px;

}

.btn-password{

width:54px;

}

}

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

.btn-login{

width:100%;

height:58px;

border:none;

border-radius:18px;

background:linear-gradient(
135deg,
#16A34A,
#15803D
);

color:#FFF;

font-size:16px;

font-weight:600;

display:flex;

align-items:center;

justify-content:center;

gap:10px;

cursor:pointer;

position:relative;

overflow:hidden;

transition:var(--transition);

box-shadow:
0 15px 35px rgba(21,128,61,.25);

}

.btn-login::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:70%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.35),

transparent

);

transform:skewX(-25deg);

}

.btn-login:hover{

transform:translateY(-3px);

box-shadow:

0 25px 50px rgba(21,128,61,.35);

background:

linear-gradient(
135deg,
#15803D,
#166534
);

}

.btn-login:hover::before{

animation:buttonShine .9s linear;

}

.btn-login:active{

transform:scale(.98);

}

.btn-login:disabled{

cursor:not-allowed;

opacity:.8;

transform:none;

}

.btn-login span{

position:relative;

z-index:2;

display:flex;

align-items:center;

gap:8px;

}

#btnLoading{

display:flex;

align-items:center;

justify-content:center;

gap:10px;

}

@keyframes buttonShine{

0%{

left:-120%;

}

100%{

left:180%;

}

}

@media(max-width:576px){

.btn-login{

height:54px;

font-size:15px;

}

}

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

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(30px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

@keyframes fadeLeft{

0%{

opacity:0;

transform:translateX(-40px);

}

100%{

opacity:1;

transform:translateX(0);

}

}

@keyframes floating{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

}

@keyframes pulseGlow{

0%,100%{

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

}

50%{

box-shadow:0 30px 65px rgba(21,128,61,.28);

}

}

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

.login-left{

animation:fadeLeft .9s ease;

}

.login-right{

animation:fadeUp .9s ease;

}

.login-card{

animation:fadeUp .8s ease;

}

.brand{

animation:fadeLeft 1.1s ease;

}

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

.brand-logo{

animation:

floating 5s ease-in-out infinite,

pulseGlow 5s ease-in-out infinite;

}

.brand-logo img{

transition:.35s;

}

.brand-logo:hover img{

transform:scale(1.08);

}

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

.brand h1{

animation:fadeLeft 1.2s ease;

}

.brand p{

animation:fadeLeft 1.35s ease;

}

.login-header{

animation:fadeUp .8s ease;

}

form{

animation:fadeUp 1s ease;

}

.login-footer{

animation:fadeUp 1.2s ease;

}

/*==========================================================
HOVER EFFECT
==========================================================*/

.login-card{

transition:

transform .35s ease,

box-shadow .35s ease;

}

.login-card:hover{

transform:translateY(-6px);

box-shadow:

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

}

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

.login-card{

backdrop-filter:blur(20px);

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

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

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

}

/*==========================================================
DECORATION
==========================================================*/

.login-card::before{

content:"";

position:absolute;

top:-80px;

right:-80px;

width:180px;

height:180px;

border-radius:50%;

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

pointer-events:none;

}

.login-card::after{

content:"";

position:absolute;

bottom:-70px;

left:-70px;

width:140px;

height:140px;

border-radius:50%;

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

pointer-events:none;

}

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

::selection{

background:#DCFCE7;

color:#166534;

}

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

::-webkit-scrollbar{

width:8px;

height:8px;

}

::-webkit-scrollbar-thumb{

background:#CBD5E1;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#94A3B8;

}

::-webkit-scrollbar-track{

background:#F8FAFC;

}

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

a,
button,
input,
textarea,
select,
.login-input,
.btn-login,
.brand-logo,
.login-card{

transition:all .30s ease;

}

/*==========================================================
FOCUS
==========================================================*/

button:focus,

input:focus,

textarea:focus,

select:focus{

outline:none;

}

/*==========================================================
DISABLE IMAGE DRAG
==========================================================*/

img{

user-select:none;

-webkit-user-drag:none;

}

/*==========================================================
REDUCE MOTION
==========================================================*/

@media (prefers-reduced-motion:reduce){

*{

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}

}