/* === Auth (Login) === */
.auth{
  min-height: calc(100dvh - 120px);
  padding: 40px 16px;            /* fixed header altında boşluk */
  display: grid; place-items: center;
}
.auth-card{
  width: min(500px, 100%);
  background: var(--block-bg);
  color: var(--text-color);
  border-radius: 16px;
  box-shadow: 0 0px 20px var(--color-bmx-shadow);
  padding: 22px 20px;
  display: flex; flex-direction: column; gap: 16px;
}
.auth-title{
  margin: 0;
  font-weight: 800;
  font-size: 24px;
  letter-spacing: .2px;
}
.auth-form{ display: grid; gap: 10px; }
.auth-label{ font-size: 12px; opacity: .85; margin-top: 10px; }

.input-wrap{ position: relative; }
.input-wrap .input-field{ height: 44px; padding-right: 44px; } /* input eye*/

.auth .input-field{
  width: 100%; height: 44px; font-size: 14px;
  color: var(--text-color);
  caret-color: var(--color-bmx-darker);
}

.auth .input-field::placeholder{
  color: var(--text-color);
  opacity: .55;             /* istersen .5–.65 arası oynat */
}


.auth-submit{
  width: 100%; height: 44px; margin-top: 20px;
  font-weight: 700; border-radius: 10px;
}

/* Link satırları ortalı */
.auth-links{
  display: grid; gap: 20px; margin-top: 40px;
  font-size: 14px; text-align: center;
}

.auth-link{ color: var(--color-bmx-darker); text-decoration: none; font-weight: 700; }
.auth-link:hover{ text-decoration: underline; }

/* input + eye */
.input-wrap{ position: relative; }
.input-wrap .input-field{ height: 44px; padding-right: 44px; }

/* Eye button: tam dikey merkez (inset-block tekniği) */
/* Kılıf: input ve eye aynı hücrede üst üste */
.input-wrap{
  display: grid;             /* overlay için grid */
}

/* Input grid hücresini doldursun */
.input-wrap .input-field{
  grid-area: 1 / 1;          /* aynı hücre */
  height: 44px;
  padding-right: 44px;       /* eye alanı */
}

/* Eye buton: aynı hücre, sağda ve dikeyde TAM ortalı */
.eye-btn{
  grid-area: 1 / 1;          /* input ile aynı hücre */
  justify-self: end;         /* sağa yasla */
  align-self: start;        /* dikey merkez */
  margin-top: 8px;
  margin-right: 12px;

  position: relative;        /* absolute KULLANMIYORUZ */
  width: 28px; height: 28px;
  display: grid; place-items: center;
  padding: 0; border: 0; background: transparent; cursor: pointer;
}

/* İkon */
.eye-btn::before{
  content: "";
  width: 18px; height: 18px;
  background-color: var(--text-color);
  -webkit-mask: url("../images/eye.png") no-repeat center / contain;
          mask: url("../images/eye.png") no-repeat center / contain;
  transition: background-color .18s ease, opacity .18s ease;
}
.eye-btn:hover::before,
.eye-btn:focus-visible::before,
.eye-btn[aria-pressed="true"]::before{
  background-color: var(--color-bmx-darker);
}

/* Mobil ufak sıkılaştırma */
@media (max-width: 480px){
  .auth-card{ padding: 18px 16px; }
  .auth-title{ font-size: 22px; }
}