/* ========== FORM ========== */
.Form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  box-sizing: border-box;

  /* responsive kutu ölçüsü */
  width: min(92vw, 520px);
  padding: clamp(28px, 4.5vw, 60px);
  border: 1px solid #ffffff40;
  border-radius: 20px;

  /* arka plan */
  background: linear-gradient(214deg, #383044 0%, #51318f 50%, #3a2d46 100%);
  position: relative; /* absolute değildi, grid ile ortalanacak */
}

.Form img {
  width: clamp(140px, 28vw, 189px);
}

/* ========== INPUTS ========== */
.inputs {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
}

.inputWrap {
  position: relative;
  width: 100%;
}

.icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  color: lightgray;
  pointer-events: none;
}

.text {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 10px 12px 10px 44px; /* ikon için boşluk */
  border: none;
  background: none;
  border-bottom: 1px solid #ffffff40;
  font-size: clamp(15px, 1.9vw, 18px);
  color: white;
}

/* ========== BUTTONS ========== */
.login,
.reg {
  width: 100%;
  max-width: 360px;
  padding: 12px 20px;
  border-radius: 16px;
  font-size: clamp(15px, 1.9vw, 18px);
  cursor: pointer;
  border: none;
  transition: transform 0.7s ease, background-position 0.7s ease;
}

.login {
  background: linear-gradient(90deg, #ffc727 0%, #9e40ba 61%, #7000ff 91%);
  color: white;
}
.login:hover {
  transform: scale(1.05);
  background-image: linear-gradient(to right, #7000ff, #9e40ba 31%, #ffc727);
  background-size: 200%;
  background-position: right center;
}

.reg {
  background-color: white;
  color: black;
  display: flex;
  justify-content: center;
}
.reg:hover {
  transform: scale(1.05);
  background-image: linear-gradient(to right, #fff, #623f8b 31%, #fff);
  background-size: 200%;
  background-position: right center;
}

/* ========== BG & LAYOUT ========== */
:root {
  --bg-1: #9e30a1;
  --bg-2: #1a1030;
  --bg-3: #5c316e;
}

/* küçük ekranlarda scroll kilitlenmesin */
html,
body {
  margin: 0;
  border: none;
  overflow-x: hidden;
  overflow-y: auto;
}

.shell {
  display: grid;
  place-items: center;

  /* mobil güvenli yükseklik */
  min-height: 100dvh;
  padding: 16px;

  background: radial-gradient(80% 120% at 20% 0%, #220540, transparent 60%),
    radial-gradient(80% 120% at 80% 100%, var(--bg-3), transparent 60%),
    linear-gradient(120deg, var(--bg-1), var(--bg-2) 50%, var(--bg-3));
  position: relative;
  overflow: hidden;
}

.bgDecor {
  position: absolute;
  inset: 0;
  background: url("./bgimg.png") center/cover no-repeat;
  opacity: 0.25;
  pointer-events: none;
  filter: saturate(110%);
}

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

/* Tablet (≤ 1024px) */
@media (max-width: 1024px) {
  .Form {
    width: min(92vw, 500px);
    padding: clamp(24px, 4vw, 52px);
    border-radius: 18px;
  }
  .login,
  .reg {
    max-width: 100%;
  }
}

/* Large Mobile / Small Tablet (≤ 768px) */
@media (max-width: 768px) {
  .Form {
    width: min(94vw, 460px);
    padding: clamp(22px, 5vw, 48px);
    gap: 22px;
    border-radius: 16px;
  }
  .text {
    min-height: 42px;
  }
  .icon {
    left: 10px;
  }
  .shell {
    padding: 12px;
  }
}

/* Mobile (≤ 480px) */
@media (max-width: 480px) {
  .Form {
    width: 100%;
    padding: 20px;
    gap: 18px;
    border-radius: 14px;
  }
  .text {
    min-height: 40px;
    padding-left: 42px;
  }
  .icon {
    width: 20px;
    height: 20px;
  }
  .login,
  .reg {
    padding: 11px 16px;
    border-radius: 14px;
  }
  .bgDecor {
    opacity: 0.2; /* metin okunurluğu için hafif kıs */
  }
}
