/* ==========================================================================
   AUTH BENTO — OBS auth sayfaları için bento-edu uyumlu tasarım dili
   /web/assets/css/bento-edu.css token'larını yansıtır.
   Metronic style.bundle.css + Bootstrap 5 üstüne giydirilir; sonradan yüklenir.
   Namespace: .auth-* (çakışma riskini düşürür).
   ========================================================================== */

/* -- Tokens (bento-edu ile aynı palet) ----------------------------------- */
:root {
  --bn-bg:            #FAFAFB;
  --bn-surface:       #FFFFFF;
  --bn-surface-2:     #F4F4F5;
  --bn-text:          #18181B;
  --bn-text-soft:     #3F3F46;
  --bn-text-muted:    #71717A;
  --bn-border:        #E4E4E7;
  --bn-border-strong: #D4D4D8;

  --bn-indigo:    #818CF8;  --bn-indigo-bg:  #EEF2FF;  --bn-indigo-ink:  #3730A3;
  --bn-rose:      #FB7185;  --bn-rose-bg:    #FFE4E6;  --bn-rose-ink:    #9F1239;
  --bn-lime:      #A3E635;  --bn-lime-bg:    #ECFCCB;  --bn-lime-ink:    #3F6212;
  --bn-amber:     #FBBF24;  --bn-amber-bg:   #FEF3C7;  --bn-amber-ink:   #92400E;

  --bn-brand:        #E74238;
  --bn-brand-soft:   #FFEEEB;
  --bn-brand-ink:    #B91C1C;

  --bn-s-1: 4px;  --bn-s-2: 8px;  --bn-s-3: 12px;  --bn-s-4: 16px;
  --bn-s-5: 20px; --bn-s-6: 24px; --bn-s-8: 32px;  --bn-s-10: 40px;
  --bn-s-12: 48px; --bn-s-16: 64px;

  --bn-r-sm: 8px; --bn-r-md: 12px; --bn-r-lg: 18px; --bn-r-xl: 24px; --bn-r-2xl: 32px;

  --bn-sh-sm: 0 1px 2px rgba(24,24,27,.04), 0 1px 3px rgba(24,24,27,.06);
  --bn-sh-md: 0 4px 12px -2px rgba(24,24,27,.06), 0 2px 4px -1px rgba(24,24,27,.04);
  --bn-sh-lg: 0 24px 48px -16px rgba(24,24,27,.12), 0 8px 16px -8px rgba(24,24,27,.08);

  --bn-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
}

/* -- Base ---------------------------------------------------------------- */
.auth-shell,
.auth-shell * {
  font-family: var(--bn-font) !important;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}

.auth-shell {
  background: var(--bn-bg) !important;
  color: var(--bn-text) !important;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* -- Layout: hero (sol) + form (sağ) ------------------------------------- */
.auth-grid {
  display: grid;
  grid-template-columns: 1fr;
  flex: 1;
  min-height: 0;
}
@media (min-width: 992px) {
  .auth-grid { grid-template-columns: 1fr 1fr; }
}

/* Hero panel — sol (renkli logoyu kaybetmemek için açık zemin) */
.auth-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--bn-s-12) var(--bn-s-6);
  background: #ffffff;
  color: #18181B;
  overflow: hidden;
  isolation: isolate;
  border-right: 1px solid rgba(24,24,27,.06);
}
.auth-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(231,66,56,.06) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(99,102,241,.05) 0%, transparent 55%);
  pointer-events: none;
  z-index: -1;
}
.auth-hero__logo {
  max-width: 260px;
  width: 80%;
  height: auto;
  margin-bottom: var(--bn-s-8);
}
.auth-hero__title {
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 var(--bn-s-3) 0;
  text-align: center;
  color: #18181B;
}
.auth-hero__subtitle {
  font-size: 15px;
  color: rgba(24,24,27,.6);
  font-weight: 500;
  text-align: center;
  max-width: 380px;
  line-height: 1.6;
}
.auth-hero__visual {
  max-width: 360px;
  width: 70%;
  height: auto;
  margin-top: var(--bn-s-8);
  border-radius: var(--bn-r-xl);
}

/* Mobil/tablet: hero üst kompakt banner */
@media (max-width: 991.98px) {
  .auth-hero {
    padding: var(--bn-s-6) var(--bn-s-5);
    min-height: 200px;
  }
  .auth-hero__logo {
    max-width: 160px;
    margin-bottom: var(--bn-s-3);
  }
  .auth-hero__title {
    font-size: 1.125rem;
    margin-bottom: var(--bn-s-1);
  }
  .auth-hero__subtitle {
    font-size: 13px;
  }
  .auth-hero__visual { display: none; }
}

/* -- Form column (sağ) --------------------------------------------------- */
.auth-form-col {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--bn-s-10) var(--bn-s-6);
  background: var(--bn-bg);
}
@media (max-width: 991.98px) {
  .auth-form-col { padding: var(--bn-s-8) var(--bn-s-4); }
}
@media (max-width: 480px) {
  .auth-form-col { padding: var(--bn-s-6) var(--bn-s-3); }
}

/* -- Card ---------------------------------------------------------------- */
.auth-card {
  width: 100%;
  max-width: 460px;
  background: var(--bn-surface);
  border: 1px solid var(--bn-border);
  border-radius: var(--bn-r-xl);
  box-shadow: var(--bn-sh-md);
  padding: var(--bn-s-10);
}
@media (max-width: 991.98px) {
  .auth-card { padding: var(--bn-s-8) var(--bn-s-6); }
}
@media (max-width: 480px) {
  .auth-card {
    padding: var(--bn-s-6) var(--bn-s-5);
    border-radius: var(--bn-r-lg);
  }
}

.auth-card--wide { max-width: 540px; }

/* -- Header in card ------------------------------------------------------ */
.auth-head { text-align: center; margin-bottom: var(--bn-s-8); }
.auth-title {
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--bn-text);
  margin: 0 0 var(--bn-s-2) 0;
}
@media (max-width: 480px) {
  .auth-title { font-size: 1.375rem; }
}
.auth-subtitle {
  font-size: 14px;
  color: var(--bn-text-muted);
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
}
.auth-firma {
  display: inline-block;
  margin-top: var(--bn-s-3);
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--bn-indigo-ink);
  background: var(--bn-indigo-bg);
  border-radius: 999px;
}

/* -- Form fields --------------------------------------------------------- */
.auth-field { margin-bottom: var(--bn-s-5); }
.auth-field--row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bn-s-3);
}
@media (max-width: 480px) {
  .auth-field--row { grid-template-columns: 1fr; }
}

.auth-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--bn-text-soft);
  margin-bottom: var(--bn-s-2);
  letter-spacing: -0.005em;
}

.auth-shell .form-control,
.auth-shell input.form-control,
.auth-input {
  display: block;
  width: 100%;
  height: 48px;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 500;
  font-family: var(--bn-font);
  color: var(--bn-text);
  background: var(--bn-surface);
  border: 1.5px solid var(--bn-border);
  border-radius: var(--bn-r-md);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.auth-shell .form-control::placeholder,
.auth-input::placeholder {
  color: var(--bn-text-muted);
  opacity: 1;
  font-weight: 500;
}
.auth-shell .form-control:hover,
.auth-input:hover {
  border-color: var(--bn-border-strong);
}
.auth-shell .form-control:focus,
.auth-shell .form-control:focus-visible,
.auth-input:focus,
.auth-input:focus-visible {
  border-color: var(--bn-text);
  box-shadow: 0 0 0 3px rgba(24,24,27,.12);
  outline: none;
  background: var(--bn-surface);
}
.auth-shell .form-control[disabled],
.auth-input[disabled] {
  background: var(--bn-surface-2);
  color: var(--bn-text-muted);
  cursor: not-allowed;
}

/* Password meter wrapper — Metronic'in [data-kt-password-meter] yapısını koruyor */
.auth-password-wrap { position: relative; }
.auth-password-toggle {
  position: absolute;
  top: 50%;
  right: var(--bn-s-2);
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--bn-text-muted);
  border-radius: var(--bn-r-sm);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.auth-password-toggle:hover,
.auth-password-toggle:focus-visible {
  background: var(--bn-surface-2);
  color: var(--bn-text);
  outline: none;
}
.auth-password-toggle:focus-visible {
  box-shadow: 0 0 0 3px rgba(24,24,27,.12);
}
.auth-password-toggle i { font-size: 18px; }

/* Password strength meter */
.auth-meter {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--bn-s-3);
}
.auth-meter > div {
  flex: 1;
  height: 5px;
  background: var(--bn-surface-2);
  border-radius: 999px;
  transition: background .2s ease;
}
.auth-meter > div.active { background: var(--bn-lime); }

.auth-hint {
  margin-top: var(--bn-s-2);
  font-size: 12.5px;
  color: var(--bn-text-muted);
  line-height: 1.5;
}

/* -- Buttons ------------------------------------------------------------- */
.auth-btn-primary,
.auth-shell button.btn.auth-btn-primary,
.auth-shell .btn.auth-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bn-s-2);
  width: 100%;
  height: 50px;
  padding: 0 var(--bn-s-6);
  font-size: 15px;
  font-weight: 600;
  font-family: var(--bn-font);
  color: #fff !important;
  background: var(--bn-brand) !important;
  border: 1.5px solid var(--bn-brand) !important;
  border-radius: var(--bn-r-md) !important;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
  letter-spacing: -0.005em;
  box-shadow: 0 4px 14px -4px rgba(231,66,56,.4);
}
.auth-btn-primary:hover,
.auth-btn-primary:focus-visible {
  background: var(--bn-brand-ink) !important;
  border-color: var(--bn-brand-ink) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -4px rgba(231,66,56,.5);
  color: #fff !important;
}
.auth-btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(231,66,56,.25), 0 6px 18px -4px rgba(231,66,56,.5); }
.auth-btn-primary:active { transform: translateY(0); }
.auth-btn-primary[disabled] { opacity: .65; cursor: not-allowed; transform: none; }

.auth-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bn-s-2);
  height: 50px;
  padding: 0 var(--bn-s-6);
  font-size: 15px;
  font-weight: 600;
  color: var(--bn-text) !important;
  background: var(--bn-surface) !important;
  border: 1.5px solid var(--bn-border) !important;
  border-radius: var(--bn-r-md) !important;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
  letter-spacing: -0.005em;
  text-decoration: none !important;
}
.auth-btn-secondary:hover,
.auth-btn-secondary:focus-visible {
  background: var(--bn-surface-2) !important;
  border-color: var(--bn-border-strong) !important;
  color: var(--bn-text) !important;
  outline: none;
}
.auth-btn-secondary:focus-visible {
  box-shadow: 0 0 0 3px rgba(24,24,27,.12);
}

.auth-actions {
  display: flex;
  flex-direction: column;
  gap: var(--bn-s-3);
  margin-top: var(--bn-s-2);
  margin-bottom: var(--bn-s-6);
}
.auth-actions--row {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
@media (max-width: 480px) {
  .auth-actions--row { flex-direction: column; }
  .auth-actions--row > * { width: 100%; }
}

/* Spinner inside primary button (Metronic .indicator-progress sınıfını kullanır) */
.auth-btn-primary .indicator-progress { display: none; }
.auth-btn-primary[data-kt-indicator="on"] .indicator-label { display: none; }
.auth-btn-primary[data-kt-indicator="on"] .indicator-progress { display: inline-flex; align-items: center; gap: 8px; }

/* -- Meta / link / footer ----------------------------------------------- */
.auth-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--bn-s-3);
  margin-bottom: var(--bn-s-6);
  font-size: 14px;
  font-weight: 500;
  color: var(--bn-text-muted);
}
.auth-link {
  color: var(--bn-brand) !important;
  font-weight: 600;
  text-decoration: none !important;
  transition: color .15s ease;
  border-radius: 4px;
}
.auth-link:hover,
.auth-link:focus-visible {
  color: var(--bn-brand-ink) !important;
  text-decoration: underline !important;
  outline: none;
}
.auth-link:focus-visible {
  box-shadow: 0 0 0 3px rgba(231,66,56,.2);
}

.auth-footer-line {
  text-align: center;
  font-size: 14px;
  color: var(--bn-text-muted);
  font-weight: 500;
}

/* -- Divider ------------------------------------------------------------- */
.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--bn-s-3);
  margin: var(--bn-s-6) 0;
  color: var(--bn-text-muted);
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--bn-border);
}

/* -- Alerts (error / success) ------------------------------------------- */
.auth-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--bn-s-2);
  padding: var(--bn-s-3) var(--bn-s-4);
  border-radius: var(--bn-r-md);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: var(--bn-s-5);
}
.auth-alert--error {
  background: var(--bn-rose-bg);
  color: var(--bn-rose-ink);
  border: 1px solid color-mix(in srgb, var(--bn-rose) 25%, transparent);
}
.auth-alert--success {
  background: var(--bn-lime-bg);
  color: var(--bn-lime-ink);
  border: 1px solid color-mix(in srgb, var(--bn-lime) 25%, transparent);
}
.auth-alert--info {
  background: var(--bn-indigo-bg);
  color: var(--bn-indigo-ink);
  border: 1px solid color-mix(in srgb, var(--bn-indigo) 25%, transparent);
}

/* -- TOC checkbox -------------------------------------------------------- */
.auth-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--bn-s-2);
  padding: var(--bn-s-3);
  border: 1px solid var(--bn-border);
  border-radius: var(--bn-r-md);
  background: var(--bn-surface);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
  margin: 0;
}
.auth-checkbox:hover { background: var(--bn-surface-2); border-color: var(--bn-border-strong); }
.auth-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 1px 0 0 0;
  accent-color: var(--bn-brand);
  flex-shrink: 0;
  cursor: pointer;
}
.auth-checkbox__label {
  font-size: 13.5px;
  color: var(--bn-text-soft);
  font-weight: 500;
  line-height: 1.45;
}
.auth-checkbox__label .auth-link { font-weight: 600; }

/* -- Status block (reset-password sonucu) ------------------------------- */
.auth-status {
  text-align: center;
  padding: var(--bn-s-4) 0;
}
.auth-status__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  margin: 0 auto var(--bn-s-5);
  background: var(--bn-indigo-bg);
  color: var(--bn-indigo-ink);
}
.auth-status__icon--success { background: var(--bn-lime-bg); color: var(--bn-lime-ink); }
.auth-status__icon--error   { background: var(--bn-rose-bg); color: var(--bn-rose-ink); }
.auth-status__icon i { font-size: 38px; }
.auth-status__icon i.ki-duotone { font-size: 38px; }
.auth-status__icon i.ki-duotone [class*="path"] { font-size: 38px; }

/* -- Top info strip (kurumsal duyuru) ----------------------------------- */
.auth-topbar {
  background: var(--bn-text);
  color: #fff;
  padding: var(--bn-s-2) var(--bn-s-4);
  display: flex;
  align-items: center;
  gap: var(--bn-s-3);
  font-size: 12.5px;
  line-height: 1.4;
}
.auth-topbar img {
  width: 56px;
  height: auto;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--bn-r-sm);
  flex-shrink: 0;
}

/* -- Modal (TOS / KVKK) override ---------------------------------------- */
.auth-shell .modal-content {
  border-radius: var(--bn-r-lg) !important;
  border: 1px solid var(--bn-border) !important;
  box-shadow: var(--bn-sh-lg) !important;
}
.auth-shell .modal-header {
  border-bottom: 1px solid var(--bn-border) !important;
  padding: var(--bn-s-5) var(--bn-s-6) !important;
}
.auth-shell .modal-title {
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  color: var(--bn-text) !important;
}
.auth-shell .modal-body {
  padding: var(--bn-s-6) !important;
  color: var(--bn-text-soft);
  font-size: 14.5px;
  line-height: 1.6;
}
.auth-shell .modal-footer {
  border-top: 1px solid var(--bn-border) !important;
  padding: var(--bn-s-4) var(--bn-s-6) !important;
}

/* -- Languages bar (alt; languages.php çıktısı) ------------------------- */
.auth-card .menu,
.auth-card .languages {
  margin-top: var(--bn-s-6);
}

/* -- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .auth-shell,
  .auth-shell *,
  .auth-shell *::before,
  .auth-shell *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .auth-btn-primary:hover { transform: none; }
}

/* -- Min screen safety (320px) ------------------------------------------ */
@media (max-width: 360px) {
  .auth-card { padding: var(--bn-s-5) var(--bn-s-4); }
  .auth-title { font-size: 1.25rem; }
  .auth-form-col { padding: var(--bn-s-5) var(--bn-s-2); }
}