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

body{
font-family:'Inter',sans-serif;
background:#020617;
color:#fff;
}

.login-wrapper{
display:flex;
min-height:100vh;
}

/* LEFT PANEL */

.left-panel{

    width:650px;

    padding:50px;

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

    overflow:hidden;

    background-image:
        linear-gradient(
            rgba(0,0,0,.35),
            rgba(0,0,0,.35)
        ),
        url('/assets/images/test.jpg');

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

/* LOGIN CARD */

.login-card{


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

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

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

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

border-radius:28px;

padding:40px;

box-shadow:
    0 8px 32px rgba(0,0,0,.35);


}

/* LOGO */

.logo-area{

    text-align:center;

    margin-bottom:25px;
}

.logo-area img{

    width:320px;

    max-width:100%;

    display:block;

    margin:0 auto;
}

/* TEXT */

.login-card h2{


font-weight:700;

margin-bottom:10px;

text-align:center;


}

.login-card p{


color:#CBD5E1;

margin-bottom:30px;

text-align:center;


}

/* INPUTS */

.form-control{


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

border:none;

color:#111827;

height:56px;

border-radius:14px;


}

.form-control:focus{


background:#fff;

color:#111827;

border-color:#2563EB;

box-shadow:none;


}

/* BUTTON */

.btn-login{


width:100%;

height:56px;

border:none;

border-radius:14px;

background:
    linear-gradient(
        135deg,
        #2563EB,
        #3B82F6
    );

color:white;

font-weight:600;

transition:.3s;


}

.btn-login:hover{


transform:translateY(-1px);

opacity:.95;


}

/* RIGHT PANEL */

.right-panel{


flex:1;

background:
linear-gradient(
    135deg,
    #020617,
    #0F172A,
    #1E3A8A
);

position:relative;

overflow:hidden;


}

.hero-content{


position:absolute;

top:50%;

left:80px;

transform:translateY(-50%);


}

.hero-content h1{


font-size:60px;

font-weight:700;

line-height:1.1;


}

.hero-content p{


margin-top:20px;

font-size:18px;

color:#CBD5E1;


}

/* MOBILE */

@media(max-width:991px){


.right-panel{
    display:none;
}

.left-panel{
    width:100%;
    padding:25px;
}

.login-card{
    max-width:420px;
}


}