/* ======================================================
KARUKATHA AUTH PAGE
Enterprise Grade • Bootstrap Safe
====================================================== */


body.auth-body{

min-height:100vh;
display:flex;
flex-direction:column;

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

margin:0;

font-family:var(--font-sans);
color:var(--color-white);

position:relative;
overflow-x:hidden;

}

/* BACKGROUND LAYER */

body.auth-body::after{

content:"";
position:fixed;
inset:0;

background:url("../img/web/login-bg.webp") center center / cover no-repeat;

z-index:-2;

}

/* DARK OVERLAY */

body.auth-body::before{

content:"";
position:absolute;
inset:0;

background:linear-gradient(
270deg,
rgba(0,0,0,0.80) 0%,
rgba(0,0,0,0.40) 35%,
rgba(0,0,0,0.25) 80%,
rgba(0,0,0,0.00) 100%
);

pointer-events:none;
z-index:-1;

}

/* ======================================================
SHELL
====================================================== */

.auth-shell{

flex:1;
display:flex;

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

width:100%;
max-width:var(--container-xl);

padding:var(--space-6);

position:relative;
z-index:1;

}


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

.auth-card{

display:grid;
grid-template-columns:1.2fr .8fr;

border-radius:var(--radius-brand);
overflow:hidden;

backdrop-filter:blur(6px);

}


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

.auth-left{

position:relative;
padding:72px;

}

.auth-left>*{
position:relative;
z-index:1;
}


/* HERO */

.hero-copy h1{

font-family:var(--font-display);
font-size:clamp(42px,3.6vw,58px);

line-height:1.05;

margin-bottom:22px;

text-transform:uppercase;
letter-spacing:.02em;

}

.hero-copy h1 span{
color:var(--color-brand);
}

.hero-copy p{

font-size:var(--text-lg);
line-height:1.6;

max-width:520px;

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

}


/* POINT LIST */

.hero-points{

list-style:none;
padding:0;
margin:26px 0;

}

.hero-points li{

margin-bottom:10px;
font-size:var(--text-base);

}

.hero-points i{

color:var(--color-brand);
margin-right:8px;

}


/* ======================================================
RIGHT SIDE LOGIN BOX
====================================================== */

.auth-right{

padding:46px 44px;

background:linear-gradient(
145deg,
rgba(0,0,0,0.80),
rgba(0,0,0,0.75)
);

border-radius:var(--radius-xl);

box-shadow:
0 40px 80px rgba(0,0,0,.55),
inset 0 0 0 1px rgba(255,255,255,.06);

}


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

.login-logo{

text-align:center;
margin-bottom:28px;

}

.login-logo img{

width:180px;
display:inline-block;

}


/* ======================================================
HEADINGS
====================================================== */

.auth-right h2{

text-align:center;
font-size:var(--text-2xl);

margin-bottom:4px;

}

.subtitle{

text-align:center;

font-size:var(--text-sm);
color:rgba(255,255,255,.55);

margin-bottom:28px;

}


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

.form-control{

height:52px;

border-radius:var(--radius-lg);

background:#0b0e16;

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

color:#fff;

transition:
border-color var(--transition-normal),
box-shadow var(--transition-normal),
background-color var(--transition-normal);

}


/* FLOATING FIX */

.form-floating>.form-control{
padding-left:52px !important;
}


/* PASSWORD INPUT EXTRA SPACE FOR EYE */

#password{
padding-right:48px;
}


/* PLACEHOLDER */

.form-control::placeholder{
color:rgba(255,255,255,.40);
}


/* LABEL */

.form-floating>label{

padding-left:52px;

background:transparent !important;
box-shadow:none !important;

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

transition:
color var(--transition-normal),
transform var(--transition-normal);

}

.form-floating>label::after{
background:transparent !important;
}

.form-floating>.form-control:not(:placeholder-shown)~label{
background:transparent !important;
}


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

.input-icon-wrap{
position:relative;
}


/* LEFT ICON (EMAIL / LOCK) */

.input-icon-wrap i:first-of-type{

position:absolute;

left:16px;
top:50%;

transform:translateY(-50%);

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

transition:color var(--transition-normal);

pointer-events:none;

}


/* FOCUS */

.input-icon-wrap:focus-within i:first-of-type{
color:var(--color-brand);
}

.form-floating>.form-control:focus~label{
color:var(--color-brand);
}


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

.password-toggle{

position:absolute;

right:16px;
top:50%;

transform:translateY(-50%);

cursor:pointer;

font-size:18px;

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

transition:color .2s ease;

}

.password-toggle:hover{
color:#fff;
}


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

.form-control:focus{

background:#080a11;

border-color:var(--color-brand);

box-shadow:0 0 0 2px rgba(126,217,87,.25);

color:#fff;

}

.form-control{
caret-color:var(--color-brand);
}


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

.remember-forgot{

display:flex;
justify-content:space-between;

font-size:var(--text-sm);

margin-bottom:20px;

}

.remember-forgot a{

color:var(--color-brand);
text-decoration:none;

}

.remember-forgot a:hover{
color:var(--color-warning);
}


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

.btn-login{

width:100%;
height:52px;

border-radius:var(--radius-full);

border:none;

background:var(--color-brand);

color:#fff;

font-weight:600;

letter-spacing:.12em;

text-transform:uppercase;

transition:transform var(--transition-normal);

}

.btn-login:hover{
transform:translateY(-1px);
}


/* ======================================================
SECURE NOTE
====================================================== */

.secure-note{

margin-top:16px;

font-size:12px;

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

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

gap:8px;

text-align:center;

}


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

footer{

width:100%;
text-align:center;

padding:18px 0;

position:relative;
z-index:2;

margin-top:20px;

}

.hero-footer{

font-size:var(--text-sm);

color:#ffffff;

opacity:.9;

letter-spacing:.03em;

text-shadow:0 2px 10px rgba(0,0,0,.65);

}


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

@media(max-width:992px){

.auth-card{
grid-template-columns:1fr;
}

.auth-left{
display:none;
}

.auth-shell{
max-width:420px;
}

}