/* ========== FORM ========== */
html,
body {
  overflow: auto;
}
.Form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  box-sizing: border-box;

  width: min(92vw, 520px);
  padding: clamp(28px, 4.5vw, 60px);
  border: 1px solid #ffffff40;
  border-radius: 20px;

  background: linear-gradient(214deg, #383044 0%, #51318f 50%, #3a2d46 100%);
  position: relative; /* grid ile ortalanacak */
  backdrop-filter: saturate(115%) contrast(102%);
}

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

/* ========== INPUTS ========== */
.inputs {
  display: flex;
  flex-direction: column;
  gap: 5px;
  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 boşluğu */
  border: none;
  background: none;
  border-bottom: 1px solid #ffffff40;
  font-size: clamp(15px, 1.9vw, 18px);
  color: white;
}

.error {
  color: #ff6b81;
  font-size: 0.9rem;
  line-height: 1.15;
  min-height: 18px; /* layout kaymasın */
}

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

.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;
}
.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;
}

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

.shell {
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: 12px;
  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;
}

/* iki görseli ayrı katmanlı arkaplan olarak kullanıyorsun */
.bgDecor {
  position: absolute;
  inset: 0;
  background: url("./bg1.png") left center / 48% no-repeat,
    url("./bg2.png") right center / 48% no-repeat;
  opacity: 0.55;
  pointer-events: none;
  filter: saturate(110%);
}

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

/* Tablet (≤ 1024px) */
@media (max-width: 1024px) {
  .Form {
    width: min(92vw, 480px);
    padding: clamp(20px, 3.5vw, 36px);
    gap: 18px;
    border-radius: 16px;
  }
  .Form img {
    width: clamp(120px, 24vw, 160px);
  }
  .text {
    min-height: 40px;
    font-size: clamp(14px, 1.7vw, 16px);
  }
  .login,
  .reg {
    max-width: 100%;
    padding: 10px 16px;
    font-size: clamp(14px, 1.7vw, 16px);
    border-radius: 14px;
  }
}

/* Large Mobile / Small Tablet (≤ 768px) */
@media (max-width: 768px) {
  .Form {
    width: min(94vw, 440px);
    padding: clamp(18px, 4vw, 28px);
    gap: 12px;
    border-radius: 14px;
  }
  .text {
    min-height: 38px;
  }
  .icon {
    left: 10px;
    width: 20px;
    height: 20px;
  }
  .bgDecor {
    opacity: 0.32;
  } /* okunurluk için arkaplanı kıs */
}

/* Mobile (≤ 480px) */
@media (max-width: 480px) {
  .Form {
    width: 100%;
    padding: 14px 16px;
    gap: 8px;
    border-radius: 12px;
  }
  .Form img {
    width: 110px;
  }
  .text {
    min-height: 36px;
    padding-left: 40px; /* ikon boşluğu */
    font-size: 14px;
  }
  .icon {
    width: 18px;
    height: 18px;
    left: 9px;
  }
  .login,
  .reg {
    padding: 9px 12px;
    font-size: 14px;
    border-radius: 12px;
  }
  .error {
    font-size: 0.85rem;
    min-height: 14px; /* layout kaymasını azaltır */
  }
  .bgDecor {
    opacity: 0.24;
  }
}

/* Kısa ekranlar (ör. yatay telefon, küçük yükseklik) */
@media (max-height: 700px) {
  .Form {
    padding: 12px 16px;
    gap: 8px;
  }
  .Form img {
    width: 100px;
  }
  .text {
    min-height: 34px;
  }
  .login,
  .reg {
    padding: 8px 12px;
  }
}

/* ========== iziToast  ========== */
:global(.iziToast.custom-success-toast),
:global(.iziToast.custom-error-toast) {
  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)) !important;
  color: #ffffff;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px rgba(10, 6, 23, 0.55);
  backdrop-filter: saturate(120%) blur(2px);
}

:global(.iziToast.custom-success-toast) {
  box-shadow: 0 10px 30px rgba(10, 6, 23, 0.55),
    0 0 0 1px rgba(34, 197, 94, 0.25) inset !important;
  border-left: 4px solid #22c55e !important;
}
:global(.iziToast.custom-success-toast .iziToast-title) {
  color: #b9ffcc !important;
  font-weight: 700;
}
:global(.iziToast.custom-success-toast .iziToast-message) {
  color: #dbeafe !important;
}
:global(.iziToast.custom-success-toast .iziToast-progressbar > div) {
  background: linear-gradient(90deg, #16a34a, #22c55e) !important;
}
:global(.iziToast.custom-success-toast .iziToast-close) {
  color: #fff !important;
  opacity: 0.9 !important;
}

:global(.iziToast.custom-error-toast) {
  box-shadow: 0 10px 30px rgba(10, 6, 23, 0.55),
    0 0 0 1px rgba(255, 88, 113, 0.25) inset !important;
  border-left: 4px solid #ff5871 !important;
}
:global(.iziToast.custom-error-toast .iziToast-title) {
  color: #ffb3bf !important;
  font-weight: 700;
}
:global(.iziToast.custom-error-toast .iziToast-message) {
  color: #dbeafe !important;
}
:global(.iziToast.custom-error-toast .iziToast-progressbar > div) {
  background: linear-gradient(90deg, #ef4444, #f97316) !important;
}
:global(.iziToast.custom-error-toast .iziToast-close) {
  color: #fff !important;
  opacity: 0.9 !important;
}
