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

html,
body {
  width: 100%;
  height: 100%;
}

body {
  font-family: "Poppins", sans-serif;
  overflow: hidden;
}

/* ================= PAGE ================= */

.page {
  width: 100%;
  height: 100vh;

  display: flex;
}

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

.left {
  width: 50%;
  height: 100vh;

  position: relative;

  padding: 55px 90px;

  color: white;

  background: linear-gradient(135deg, #5b9ff0 0%, #536eea 50%, #5b52df 100%);

  overflow: hidden;
}

/* Dekorativ dairə */

.left::before {
  content: "";

  position: absolute;

  width: 400px;
  height: 400px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.06);

  top: -180px;
  left: -120px;
}

.left::after {
  content: "";

  position: absolute;

  width: 350px;
  height: 350px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.05);

  right: -150px;
  bottom: -150px;
}

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

.logo {
  position: relative;
  z-index: 5;

  display: flex;
  align-items: center;

  gap: 15px;

  margin-bottom: 42px;
}

.logo i {
  font-size: 42px;
}

.logo h1 {
  font-size: 42px;

  font-weight: 700;

  letter-spacing: -1px;
}

/* ================= BUTTONS ================= */

.left-buttons {
  position: relative;
  z-index: 10;

  display: flex;

  gap: 10px;

  margin-bottom: 20px;
}

.info-btn {
  border: 1px solid rgba(255, 255, 255, 0.4);

  background: transparent;

  color: white;

  padding: 11px 18px;

  border-radius: 11px;

  cursor: pointer;

  font-family: "Poppins", sans-serif;

  font-size: 14px;

  font-weight: 600;

  transition: 0.3s ease;
}

.info-btn i {
  margin-right: 6px;
}

.info-btn:hover {
  background: rgba(255, 255, 255, 0.15);

  transform: translateY(-2px);
}

/* Kliklənən düymə */

.info-btn.active {
  background: white;

  color: #536be8;

  border-color: white;
}

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

.content-section {
  position: relative;

  z-index: 5;

  display: none;

  max-width: 580px;

  animation: contentShow 0.35s ease;
}

/* İlk açılış */

.content-section.active {
  display: block;
}

.small-title {
  display: block;

  font-size: 15px;

  font-weight: 600;

  margin-bottom: 14px;

  opacity: 0.9;
}

.content-section h2 {
  font-size: 52px;

  line-height: 1.05;

  letter-spacing: -1.5px;

  margin-bottom: 14px;
}

.content-section > p {
  font-size: 17px;

  line-height: 1.7;

  max-width: 530px;

  opacity: 0.9;
}

/* ================= ABOUT ================= */

.info-list {
  margin-top: 15px;
}

.info-item {
  display: flex;

  align-items: center;

  gap: 15px;

  padding: 14px;

  margin-bottom: 11px;

  border-radius: 13px;

  background: rgba(255, 255, 255, 0.09);

  border: 1px solid rgba(255, 255, 255, 0.18);
}

.info-icon {
  width: 43px;
  height: 43px;

  flex-shrink: 0;

  display: flex;

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

  border-radius: 10px;

  background: rgba(255, 255, 255, 0.14);
}

.info-item h3 {
  font-size: 15px;

  margin-bottom: 2px;
}

.info-item p {
  font-size: 12px;

  opacity: 0.8;
}

/* ================= CONTACT ================= */

.contact-list {
  margin-top: 30px;
}

.contact-item {
  display: flex;

  align-items: center;

  gap: 15px;

  margin-bottom: 18px;
}

.contact-icon {
  width: 45px;
  height: 45px;

  flex-shrink: 0;

  display: flex;

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

  border-radius: 11px;

  background: rgba(255, 255, 255, 0.13);
}

.contact-item span {
  display: block;

  font-size: 12px;

  opacity: 0.7;

  margin-bottom: 2px;
}

.contact-item strong {
  display: block;

  font-size: 15px;

  font-weight: 500;
}

/* ================= RIGHT ================= */

.right {
  width: 50%;
  height: 100vh;

  background: #ffffff;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 70px 80px;
}

.login-card {
  width: 100%;

  max-width: 520px;
}

.login-card h2 {
  font-size: 48px;

  color: #182235;

  margin-bottom: 50px;

  font-weight: 700;
}

.inputBox {
  margin-bottom: 28px;
}

.inputBox label {
  display: block;

  margin-bottom: 10px;

  font-size: 15px;

  font-weight: 600;

  color: #344054;
}

.input {
  height: 70px;

  display: flex;

  align-items: center;

  border: 2px solid #e1e7f0;

  border-radius: 17px;

  overflow: hidden;

  background: white;

  transition: 0.3s;
}

.input:focus-within {
  border-color: #5269eb;
}

.input > i:first-child {
  width: 60px;

  text-align: center;

  color: #64748b;

  font-size: 19px;
}

.input input {
  flex: 1;

  height: 100%;

  border: none;

  outline: none;

  background: #edf3fc;

  padding: 0 15px;

  font-family: "Poppins", sans-serif;

  font-size: 17px;
}

.input .eye {
  width: 55px;

  height: 100%;

  display: flex;

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

  color: #64748b;

  background: #edf3fc;

  cursor: pointer;
}

.login-card button {
  width: 100%;

  height: 70px;

  margin-top: 25px;

  border: none;

  border-radius: 17px;

  background: linear-gradient(90deg, #2864eb, #7735e8);

  color: white;

  font-family: "Poppins", sans-serif;

  font-size: 19px;

  font-weight: 600;

  cursor: pointer;

  transition: 0.3s;
}

.login-card button:hover {
  transform: translateY(-2px);

  box-shadow: 0 12px 25px rgba(80, 76, 230, 0.25);
}

/* ================= ANIMATION ================= */

@keyframes contentShow {
  from {
    opacity: 0;
    transform: translateY(15px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@media (max-width: 900px) {
  body {
    overflow: auto;
  }

  .page {
    height: auto;

    flex-direction: column;
  }

  .left,
  .right {
    width: 100%;
    height: auto;
  }

  .left {
    min-height: 650px;

    padding: 45px 40px;
  }

  .right {
    min-height: 700px;

    padding: 50px 40px;
  }
}

@media (max-width: 550px) {
  .left {
    padding: 35px 25px;
  }

  .right {
    padding: 40px 25px;
  }

  .logo h1 {
    font-size: 34px;
  }

  .logo i {
    font-size: 34px;
  }

  .content-section h2 {
    font-size: 40px;
  }

  .left-buttons {
    flex-wrap: wrap;
  }
}