*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',sans-serif;}
body{
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#0b0b0f;
  padding:20px;
}

.container{
  width:900px;
  height:540px;
  background:#111;
  border-radius:24px;
  display:flex;
  overflow:hidden;
  box-shadow:0 40px 80px rgba(0,0,0,0.7);
}

.side{
  width:50%;
  background:linear-gradient(45deg,#f58529,#dd2a7b,#8134af,#515bd4);
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:36px;
  font-weight:600;
  color:white;
  position:relative;
  flex-direction:column;
}

.logo-text{
  position:absolute;
  top:45px;
  font-size:45px;
  letter-spacing:1px;
}

.side-img{
  width:300px;
  height:300px;
  object-fit:contain;
  z-index:2;
}

.side::after{
  content:"";
  position:absolute;
  width:300px;
  height:300px;
  background:rgba(255,255,255,0.15);
  border-radius:50%;
  filter:blur(100px);
  animation:floatGlow 6s ease-in-out infinite alternate;
}

@keyframes floatGlow{
  from{transform:translate(-40px,-40px);}
  to{transform:translate(40px,40px);}
}

.form-area{
  width:50%;
  padding:70px 60px;
  color:white;
}

.form{width:100%;}
h2{margin-bottom:35px;font-weight:600;}

.input-box{
  position:relative;
  margin-bottom:18px;
}

.input-box input{
  width:100%;
  padding:15px 50px 15px 18px;
  background:#1a1a22;
  border-radius:12px;
  border:1px solid #222;
  color:white;
  outline:none;
  transition:.35s;
}

.input-box input:focus{
  border-color:#dd2a7b;
  box-shadow:0 0 15px rgba(221,42,123,0.35);
  transform:scale(1.02);
}

.input-box i{
  position:absolute;
  right:15px;
  top:50%;
  transform:translateY(-50%);
  color:#bbb;
  cursor:pointer;
}

button{
  width:100%;
  padding:15px;
  border:none;
  border-radius:12px;
  background:linear-gradient(45deg,#f58529,#dd2a7b,#8134af);
  color:white;
  font-weight:600;
  cursor:pointer;
  margin-top:5px;
}
button:hover {
  transform:translateY(-1px);
  box-shadow:0 20px 30px rgba(221,42,123,0.35);
}
.switch{
  margin-top:18px;
  text-align:center;
  font-size:14px;
  color:#aaa;
}

.switch a{
  color:#dd2a7b;
  text-decoration:none;
  font-weight:bold;
}

/* MOBILE RESPONSIVE FIX */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
    height: auto;
    width: 100%;
  }

  /* Image ko hide karne ke liye */
  .side-img {
    display: none;
  }

  /* Side section ko chota kiya aur gradient rakha taake clean dikhe */
  .side {
    width: 100%;
    height: 100px; /* Height kam kardi */
    font-size: 24px;
    padding: 20px 0;
  }

  /* Logo text ki position adjust ki mobile ke liye */
  .logo-text {
    position: static;
    font-size: 32px;
    margin-top: 0;
  }

  /* Glow effect hide kardo taake mobile par heavy na ho */
  .side::after {
    display: none;
  }

  .form-area {
    width: 100%;
    padding: 40px 25px;
  }
}