*{

margin:0;

padding:0;

box-sizing:border-box;

}

body{

font-family:tahoma;

direction:rtl;

background:#09111d;

height:100vh;

display:flex;

justify-content:center;

align-items:center;

overflow:hidden;

color:white;

}

.background{

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

background:

radial-gradient(circle at top left,#00bfff33,transparent),

radial-gradient(circle at bottom right,#00ff9955,transparent),

#09111d;

}

.login-box{

position:relative;

width:430px;

padding:45px;

border-radius:25px;

background:rgba(18,28,43,.72);

backdrop-filter:blur(18px);

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

box-shadow:

0 0 50px rgba(0,255,255,.15);

animation:fade 1.5s;

}

@keyframes fade{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}
.logo{

text-align:center;

margin-bottom:35px;

}

.circle{

width:90px;

height:90px;

margin:auto;

border-radius:50%;

background:#00c8ff;

display:flex;

justify-content:center;

align-items:center;

font-size:35px;

font-weight:bold;

color:#07131d;

margin-bottom:20px;

box-shadow:

0 0 40px #00c8ff;

}

.logo h1{

font-size:28px;

margin-bottom:8px;

}

.logo p{

color:#98a6ba;

font-size:15px;

}
.input-group{

margin-bottom:18px;

}

.input-group input{

width:100%;

padding:16px;

border-radius:12px;

background:#121d2b;

border:1px solid #223247;

color:white;

font-size:15px;

transition:.3s;

}

.input-group input:focus{

outline:none;

border-color:#00c8ff;

box-shadow:0 0 15px #00c8ff55;

}


.remember{

display:flex;

align-items:center;

gap:10px;

margin:15px 0 25px;

font-size:14px;

color:#b9c6d7;

}

button{

width:100%;

padding:15px;

border:none;

border-radius:12px;

background:#00c8ff;

font-size:17px;

font-weight:bold;

cursor:pointer;

transition:.35s;

}

button:hover{

background:#00e0ff;

transform:translateY(-2px);

box-shadow:0 0 25px #00c8ff;

}

.footer{

text-align:center;

margin-top:30px;

color:#7c8da4;

font-size:13px;

}
.login-box{

overflow:hidden;

}

.login-box::before{

content:"";

position:absolute;

left:-100px;

top:-100px;

width:250px;

height:250px;

border-radius:50%;

background:#00c8ff22;

filter:blur(70px);

animation:move1 8s infinite alternate;

}

.login-box::after{

content:"";

position:absolute;

right:-120px;

bottom:-120px;

width:260px;

height:260px;

border-radius:50%;

background:#00ff9950;

filter:blur(90px);

animation:move2 10s infinite alternate;

}

@keyframes move1{

100%{

transform:translate(70px,40px);

}

}

@keyframes move2{

100%{

transform:translate(-60px,-70px);

}

}


button{

position:relative;

overflow:hidden;

}

button::before{

content:"";

position:absolute;

left:-150px;

top:0;

width:80px;

height:100%;

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

transform:skewX(-25deg);

transition:.8s;

}

button:hover::before{

left:500px;

}

input::placeholder{

color:#8ca3bb;

}

input{

letter-spacing:.5px;

}


.footer{

border-top:1px solid rgba(255,255,255,.08);

padding-top:18px;

}