/*
 * Ortak OTP kutusu.
 * Geometri ve durum davranışı tek merkezde tutulur; admin/ana site yalnız
 * --mek-otp-* tema tokenlarını gerektiğinde alias eder.
 */
.mek-otp {
  --mek-otp-width: min(100%, 342px);
  --mek-otp-gap: .5rem;
  --mek-otp-height: 56px;
  --mek-otp-radius: 8px;
  --mek-otp-font-size: 1.35rem;
  --mek-otp-font-weight: 800;
  --mek-otp-border: var(--auth-border, var(--mek-color-border-strong));
  --mek-otp-bg: var(--auth-soft, var(--mek-color-surface-subtle));
  --mek-otp-text: var(--auth-text, var(--mek-color-text-secondary));
  --mek-otp-primary: var(--admin-primary, var(--mek-color-primary));
  --mek-otp-focus-bg: var(--auth-card, var(--mek-color-surface));
  --mek-otp-focus-ring: color-mix(in srgb, var(--mek-otp-primary) 14%, transparent);
  --mek-otp-danger: var(--auth-danger, var(--mek-color-danger));
  --mek-otp-danger-ring: color-mix(in srgb, var(--mek-color-danger) 8%, transparent);

  width: var(--mek-otp-width);
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--mek-otp-gap);
}

.mek-otp--digits-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mek-otp--digits-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mek-otp--digits-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.mek-otp--digits-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.mek-otp--digits-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }

.mek-otp__digit {
  width: 100%;
  min-width: 0;
  height: var(--mek-otp-height);
  border: 1px solid var(--mek-otp-border);
  border-radius: var(--mek-otp-radius);
  color: var(--mek-otp-text);
  background: var(--mek-otp-bg);
  font: inherit;
  font-size: var(--mek-otp-font-size);
  font-weight: var(--mek-otp-font-weight);
  line-height: 1;
  text-align: center;
  caret-color: var(--mek-otp-primary);
  outline: 0;
  transition:
    border-color var(--mek-duration-normal, 160ms) ease,
    box-shadow var(--mek-duration-normal, 160ms) ease,
    background var(--mek-duration-normal, 160ms) ease;
}

.mek-otp__digit:focus {
  border-color: var(--mek-otp-primary);
  background: var(--mek-otp-focus-bg);
  box-shadow: 0 0 0 3px var(--mek-otp-focus-ring);
}

.mek-otp__digit.is-filled {
  border-color: var(--mek-otp-primary);
}

.mek-otp[aria-invalid="true"] .mek-otp__digit,
.mek-otp__digit[aria-invalid="true"] {
  border-color: var(--mek-otp-danger);
  box-shadow: 0 0 0 3px var(--mek-otp-danger-ring);
}

@media (max-width: 520px) {
  .mek-otp {
    --mek-otp-width: 100%;
    --mek-otp-gap: .35rem;
    --mek-otp-height: 52px;
    --mek-otp-radius: 7px;
    --mek-otp-font-size: 1.2rem;
  }
}

@media (max-width: 360px) {
  .mek-otp {
    --mek-otp-gap: .25rem;
    --mek-otp-height: 48px;
    --mek-otp-radius: 6px;
    --mek-otp-font-size: 1.1rem;
  }
}