/* Giriş sayfasına özel ek stiller */

/* Marka — web: görsel yukarı kaydır; mobil: kesilmeden üstte görünsün */
@media (min-width: 901px) {
  .brand-hero {
    transform: translateY(-1.15rem);
    padding-top: 0.35rem;
    padding-bottom: 1rem;
  }
}

@media (max-width: 900px) {
  .brand-hero {
    transform: none;
    padding-top: 0.35rem;
    padding-bottom: 0.75rem;
    margin-bottom: 0.85rem;
  }

  .brand-logo {
    width: 2.5rem;
    margin-bottom: 0.45rem;
  }

  /* Samsung / mobil — gradient metin ilk karede görünmeyebilir; düz renk yedek */
  .brand-portal {
    color: var(--accent);
    -webkit-text-fill-color: currentColor;
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
  }

  #panel-login > h2 {
    margin-bottom: 1.35rem;
  }
}

/* Geçici: login panelindeki "Kayıt ol" bağlantısı (panel-register + dış link aktif kalır) */
#login-register-hint {
  display: none !important;
}

/* Giriş butonu ile "Parolamı unuttum" — parola ↔ giriş yap aralığı ile aynı */
#panel-login .hint-stack {
  margin-top: var(--login-form-action-stack);
}

/* Parolamı unuttum — tıklanabilir bağlantı */
.hint-row-forgot {
  margin-top: 0;
}

.login-forgot-trigger.link {
  padding: 0;
  text-align: left;
}

.hint-row-persist {
  margin-top: 0;
}

.login-remember-toggle.link {
  padding: 0;
  text-align: left;
}

/* Parola sıfırlama formu — birincil düğme ortada (giriş ile aynı) */
#panel-forgot #form-forgot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

#panel-forgot #form-forgot .form-message {
  text-align: center;
}

#panel-forgot #forgot-submit.btn-primary.btn-with-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: auto;
  min-width: 9.25rem;
  align-self: center;
  margin-top: var(--login-form-submit-gap);
  padding: var(--login-button-padding-y) 1.35rem;
  line-height: 1.25;
}

#panel-forgot #forgot-submit.btn-with-icon .btn-icon {
  width: 1rem;
  height: 1rem;
}

/* Parola sıfırlama paneli — Sıfırla birincil düğme teması */
.panel--reset-theme .btn-reset.btn-primary {
  background: linear-gradient(
    118deg,
    color-mix(in srgb, var(--accent) 72%, #ffffff 28%) 0%,
    var(--accent) 46%,
    color-mix(in srgb, var(--accent) 58%, #5eb8e8 42%) 100%
  );
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 20%, transparent);
}

.panel--reset-theme .btn-reset.btn-primary:hover:not(:disabled) {
  background: linear-gradient(
    118deg,
    color-mix(in srgb, var(--accent-hover) 68%, #ffffff 32%) 0%,
    var(--accent-hover) 48%,
    color-mix(in srgb, var(--accent-hover) 52%, #5eb8e8 48%) 100%
  );
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 28%, transparent);
}

.panel--reset-theme .btn-reset.btn-primary:disabled {
  background: color-mix(in srgb, var(--border) 48%, var(--surface));
  color: var(--muted);
  border-color: var(--border);
  box-shadow: none;
  opacity: 1;
}

.panel--reset-theme .btn-reset.btn-primary:focus:not(:disabled),
.panel--reset-theme .btn-reset.btn-primary:focus-visible:not(:disabled) {
  color: #fff;
}

#panel-forgot > h2 {
  margin-bottom: 0.85rem;
}

/* Parola sıfırlama — e-Posta / GSM / Kullanıcı Adı seçici */
.forgot-method-tabs {
  display: flex;
  width: 100%;
  gap: 0.18rem;
  margin: 0 0 1.25rem;
  padding: 0.15rem;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: color-mix(in srgb, var(--muted) 10%, var(--surface));
  box-sizing: border-box;
}

.forgot-method-tab {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.42rem 0.35rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: var(--login-font-label);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.16s, background 0.16s, box-shadow 0.16s;
}

.forgot-method-tab:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}

.forgot-method-tab.is-active {
  color: #fff;
  background: var(--accent);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 40%, transparent);
}

.forgot-method-tab:focus {
  outline: none;
}

.forgot-method-tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.forgot-method-tab.is-active:focus-visible {
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--accent) 40%, transparent),
    0 0 0 2px var(--accent-soft);
}

#panel-forgot [data-forgot-field][hidden] {
  display: none !important;
}

@media (max-width: 640px) {
  .forgot-method-tab {
    padding: 0.38rem 0.2rem;
    font-size: 0.625rem;
  }
}

/* Başlık ile kullanıcı adı alanı arasında boşluk */
#panel-login > h2 {
  margin-bottom: 2rem;
}

/* Kullanıcı adı placeholder — ana metin ile aynı ölçek */
#login-username::placeholder,
#login-password::placeholder {
  font-size: var(--login-font-placeholder);
}

/* Parola alanı — sağda göster/gizle düğmesi */
.input-icon-wrap--has-toggle input {
  padding-right: 2.65rem;
}

.input-toggle-btn {
  position: absolute;
  right: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--form-input-icon);
  cursor: pointer;
  transition: color 0.2s, background 0.15s;
}

.input-toggle-btn:hover {
  color: var(--accent);
  background: var(--accent-soft);
}

.input-toggle-btn:focus-visible {
  outline: none;
  color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.input-toggle-btn svg {
  width: 1.05rem;
  height: 1.05rem;
  display: block;
}

.input-icon-wrap--has-toggle:focus-within .input-toggle-btn {
  color: var(--accent);
}

/* Giriş formu — birincil düğme ortada, kompakt ölçek */
#panel-login #form-login {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

#panel-login #form-login .form-message {
  text-align: center;
}

/* Giriş yap — ikonlu birincil düğme */
#panel-login #login-submit.btn-primary.btn-with-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: auto;
  min-width: 9.25rem;
  align-self: center;
  margin-top: var(--login-form-submit-gap);
  padding: var(--login-button-padding-y) 1.35rem;
  line-height: 1.25;
}

.btn-primary.btn-with-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
}

#panel-login #login-submit.btn-with-icon .btn-icon {
  width: 1rem;
  height: 1rem;
}

.btn-primary.btn-with-icon .btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}

.btn-primary.btn-with-icon .btn-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Giriş yap — marka gradyanı ile uyumlu, daha açık birincil düğme */
#panel-login #login-submit.btn-primary {
  background: linear-gradient(
    118deg,
    color-mix(in srgb, var(--accent) 72%, #ffffff 28%) 0%,
    var(--accent) 46%,
    color-mix(in srgb, var(--accent) 58%, #5eb8e8 42%) 100%
  );
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 20%, transparent);
}

#panel-login #login-submit.btn-primary:hover:not(:disabled) {
  background: linear-gradient(
    118deg,
    color-mix(in srgb, var(--accent-hover) 68%, #ffffff 32%) 0%,
    var(--accent-hover) 48%,
    color-mix(in srgb, var(--accent-hover) 52%, #5eb8e8 48%) 100%
  );
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 28%, transparent);
}

#panel-login #login-submit.btn-primary:disabled {
  background: color-mix(in srgb, var(--border) 48%, var(--surface));
  color: var(--muted);
  border-color: var(--border);
  box-shadow: none;
  opacity: 1;
  cursor: not-allowed;
}

#panel-login #login-submit.btn-primary:focus:not(:disabled),
#panel-login #login-submit.btn-primary:focus-visible:not(:disabled) {
  color: #fff;
}

/* Giriş bekletme penceresi — dashboard senkron bekleme diyaloğu ile uyumlu */
.login-wait-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.login-wait-overlay[hidden] {
  display: none !important;
}

.login-wait-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.48);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.login-wait-modal {
  position: relative;
  width: min(420px, 100%);
  padding: 1.35rem 1.35rem 1.15rem;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  border-left: 4px solid var(--accent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent),
    var(--shadow-lg);
  text-align: left;
}

.login-wait-title {
  margin: 0 0 0.65rem;
  font-size: var(--login-font-heading);
  font-weight: 700;
  color: var(--text);
}

.login-wait-body {
  margin: 0 0 1.1rem;
}

.login-wait-user {
  margin: 0 0 0.35rem;
  font-size: var(--login-font-input);
  font-weight: 600;
  line-height: 1.5;
  color: var(--text);
}

.login-wait-user[hidden] {
  display: none !important;
}

.login-wait-submessage {
  margin: 0;
  font-size: var(--login-font-sub);
  line-height: 1.5;
  color: var(--muted);
}

.login-wait-footer {
  display: flex;
  justify-content: center;
  padding-top: 0.15rem;
  padding-bottom: 0.35rem;
}

.login-wait-indicator {
  width: 1.75rem;
  height: 1.75rem;
  border: 2px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: login-wait-spin 0.75s linear infinite;
}

@keyframes login-wait-spin {
  to {
    transform: rotate(360deg);
  }
}