/* Giriş yap sayfası (sayfaya özel) */

.lg { padding: 44px 0 90px; }
.lg-grid { display: flex; align-items: flex-start; gap: 56px; }

/* Kart */
.lg-card {
  flex: 0 1 695px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 40px 44px;
  background: var(--gray);
  border-radius: 28px;
}

/* Sekmeler */
.lg-tabs { display: flex; padding: 4px; background: #EEF1F4; border-radius: 32px; }
.lg-tab {
  flex: 1 1 0;
  padding: 12px 0;
  border: 1px solid transparent;
  border-radius: 35px;
  background: transparent;
  font-family: 'SF Pro Display', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  color: #344054;
  transition: background .2s, box-shadow .2s;
}
.lg-tab.is-active {
  background: #fff;
  border-color: #E6EBF1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  color: #485366;
}

.lg-head { margin-top: 16px; }
.lg-head h1 { font-weight: 600; font-size: 30px; line-height: 45px; letter-spacing: -0.03em; color: var(--ink); }
.lg-head p { font-size: 14px; line-height: 170%; color: var(--text); }

/* Form */
#loginForm { display: flex; flex-direction: column; margin-top: 21px; }
.lg-field { display: flex; flex-direction: column; gap: 7px; }
.lg-field label { font-weight: 500; font-size: 12px; line-height: 18px; color: var(--menu); }
.lg-field input {
  width: 100%;
  height: 51px;
  padding: 15px 18px;
  background: #fff;
  border: 1px solid #E4E7EE;
  border-radius: 14px;
  font-family: inherit;
  font-size: 14px;
  line-height: 21px;
  color: var(--ink);
  outline: 0;
  transition: border-color .2s, box-shadow .2s;
}
.lg-field input::placeholder { color: #9AA2B1; opacity: 1; }
.lg-field input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(23, 70, 158, 0.12); }
.lg-err { display: none; font-size: 12px; line-height: 18px; color: #C62828; }
.lg-field.is-invalid input { border-color: #C62828; }
.lg-field.is-invalid .lg-err { display: block; }

.lg-pass { margin-top: 14px; }
.lg-pass[hidden] { display: none; }
.lg-pass-wrap { position: relative; }
.lg-pass-wrap input { padding-right: 84px; }
.lg-eye {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-weight: 500;
  font-size: 13px;
  line-height: 20px;
  color: var(--blue);
}

.lg-row { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 21px; }
.lg-remember { position: relative; display: flex; align-items: center; margin: 0; cursor: pointer; }
.lg-remember input { position: absolute; opacity: 0; width: 0; height: 0; }
.lg-remember span { font-size: 13px; line-height: 20px; color: var(--menu); }
.lg-remember input:checked + span::before { content: "✓ "; color: var(--blue); font-weight: 600; }
.lg-remember input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.lg-forgot { font-weight: 500; font-size: 13px; line-height: 20px; color: var(--blue); }

.lg-submit {
  margin-top: 22px;
  padding: 16px 30px;
  border: 0;
  border-radius: 999px;
  background: var(--blue);
  font-family: inherit;
  font-weight: 500;
  font-size: 15px;
  line-height: 22px;
  color: #fff;
  transition: opacity .2s;
}
.lg-submit:hover { opacity: .9; }
.lg-msg {
  margin: 12px 0 0;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--border-blue);
  border-radius: 14px;
  font-size: 13px;
  line-height: 20px;
  color: var(--blue);
}
.lg-msg[hidden] { display: none; }

.lg-signup { margin: 18px 0 0; text-align: center; font-size: 13px; line-height: 20px; color: var(--text); }
.lg-signup a { margin-left: 5px; font-weight: 500; color: var(--blue); }

/* Görsel */
.lg-photo {
  flex: 0 1 507px;
  min-width: 0;
  aspect-ratio: 507 / 562;
  border-radius: 28px;
  overflow: hidden;
  background: #E8EEF9;
}
.lg-photo img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1199.98px) {
  .lg-grid { gap: 32px; }
  .lg-card { padding: 32px 28px; }
}
@media (max-width: 991.98px) {
  .lg { padding: 28px 0 56px; }
  .lg-grid { flex-direction: column; align-items: stretch; }
  .lg-card { flex: none; }
  .lg-photo { flex: none; aspect-ratio: 16 / 10; }
}
@media (max-width: 575.98px) {
  .lg-card { padding: 24px 18px; }
  .lg-tab { font-size: 14px; }
  .lg-head h1 { font-size: 26px; line-height: 1.3; }
  .lg-photo { aspect-ratio: 4 / 3; }
}