* {margin: 0; padding: 0; box-sizing: border-box; text-decoration: none; font-family: 'Poppins', sans-serif;}
body {display: flex; justify-content: center; align-items: center; min-height: 100vh; background: url(images/1.jpg) no-repeat; background-size: cover; background-position: center;}
header {position: fixed; left: 0; top: 0; width: 100%; padding: 20px 100px; background: rgba(0,0,0,0.2); display: flex; justify-content: space-between; align-items: center; z-index: 99;}
.logo {font-size: 2em; color: #fff; user-select: none;}
.navigation a {position: relative; font-size: 1.1em; color: #fff; font-weight: 500; margin-left: 40px;}
.navigation a::after {content: ''; position: absolute; left: 0; bottom: -6px; width: 100%; height: 3px; background: #fff; border-radius: 5px; transform: scaleX(0); transform-origin: right; transition: transform 0.5s;}
.navigation a:hover::after {transform: scaleX(1); transform-origin: left;}
.btnLogin-popup {width: 130px; height: 50px; background: transparent; border: 2px solid #fff; border-radius: 6px; outline: none; cursor: pointer; font-size: 1.1em; color: #fff; font-weight: 500; margin-left: 40px; transition: 0.5s;}
.btnLogin-popup:hover {background: #fff; color: #162938;}
.wrapper {position: relative; width: 440px; height: 440px; background: transparent; border: 2px solid rgba(255,255,255,0.5); border-radius: 20px; backdrop-filter: blur(20px); box-shadow: 0 0 30px rgba(0,0,0,0.5); overflow: hidden; transform: scale(0); display: flex; justify-content: center; align-items: center; transition: transform 0.5s ease, height 0.2s ease;}
.wrapper.active {height: 520px;}
.wrapper.active-popup {transform: scale(1);}
.form-box {width: 100%; padding: 40px;}
.form-box.login {transform: translateX(0); transition: transform 0.18s ease;}
.wrapper.active .form-box.login {transition: none; transform: translateX(-400px);}
.form-box.register {position: absolute; transform: translateX(400px); transition: none;}
.wrapper.active .form-box.register  {transform: translateX(0); transition: transform 0.18s ease;}
.icon-close {position: absolute; right: 0; top: 0; width: 45px; height: 45px; background: #162938; font-size: 2em; color: #fff; display: flex; justify-content: center; align-items: center; border-bottom-left-radius: 20px; cursor: pointer; z-index: 1;}
.form-box h2 {font-size: 2em; color: #162938; text-align: center;}
.input-box {position: relative; width: 100%; height: 50px; border-bottom: 2px solid #162938; margin: 30px 0;}
.input-box label {position: absolute; left: 5px; top: 50%; transform: translateY(-50%); font-size: 1em; color: #162938; font-weight: 500; pointer-events: none; transition: 0.5s;}
.input-box input:focus ~ label,
.input-box input:valid ~ label {top: -5px;}
.input-box input {width: 100%; height: 100%; background: transparent; border: none; outline: none; font-size: 1em; color: #162938; font-weight: 600; padding: 0 35px 0 5px;}
.input-box .icon {position: absolute; right: 8px; font-size: 1.2em; color: #162938; line-height: 57px;}
.remember-forgot {font-size: 0.9em; color: #162938; font-weight: 500; margin: -15px 0 15px; display: flex; justify-content: space-between;}
.remember-forgot label input {accent-color: #162938; margin-right: 6px;}
.remember-forgot a {color: #162938;}
.remember-forgot a:hover {text-decoration: underline;}
.btn {width: 100%; height: 45px; background: #162938; border-radius: 6px; border: none; outline: none; cursor: pointer; font-size: 1em; color: #fff; font-weight: 500;}
.login-register {font-size: 0.9em; color: #162938; font-weight: 500; text-align: center; margin: 25px 0 10px;}
.login-register p a {color: #162938; font-weight: 600;}
.login-register p a:hover {text-decoration: underline;}