/* ═══════════════════════════════════════════════════════════════
   ARKUN — doğrulama kodu alanı (OTP)

   Gönderilen React/Tailwind bileşeninin bu projeye uyarlanmış hâli.
   Davranış birebir: hane hane kutular, yapıştırınca dağılma, ok
   tuşlarıyla gezinme, hata durumunda sarsılma, dolu haneye yumuşak
   geçiş. Renkler ARKUN paletine çevrildi (mavi/taş → turuncu/siyah).

   Bileşenden ALINMAYAN tek şey caret taklidi için gizli metin hilesi:
   burada gerçek metin görünür, ayrı bir katman çizilmiyor — daha az
   parça, aynı sonuç.
   ═══════════════════════════════════════════════════════════════ */

.kod-alani {
  display: inline-flex;
  flex-direction: column;
}

.kod-kutular {
  display: flex;
  gap: 8px;
}

/* Gruplama boşluğu — 3'lü okuma (204 815) tek blok 6 haneden kolay. */
.kod-kutular .kod-hane[data-bosluk="1"] { margin-left: 14px; }

.kod-hane {
  width: 46px;
  height: 56px;
  padding: 0;
  border-radius: 12px;
  border: 2px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  text-align: center;
  caret-color: var(--accent);
  transition:
    border-color 150ms var(--e-out),
    background-color 150ms var(--e-out),
    box-shadow 150ms var(--e-out);
}
.kod-hane::selection { background: rgba(255, 94, 0, 0.35); }

.kod-hane:focus,
.kod-hane:focus-visible {
  outline: none;
  border-color: var(--accent);
  background: rgba(255, 94, 0, 0.06);
  box-shadow: 0 0 0 4px rgba(255, 94, 0, 0.12);
}

/* Dolu hane: sınır belirginleşiyor ki nereye kadar girdiğin görünsün. */
.kod-hane[data-dolu="1"] { border-color: var(--border-hi); }

.kod-hane:disabled { opacity: 0.5; }

/* Yeni basılan hanenin belirmesi — bileşendeki blur+yukarı kayma. */
@keyframes kodBelir {
  from { opacity: 0; transform: translateY(6px) scale(0.97); filter: blur(4px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
.kod-hane[data-yeni="1"] { animation: kodBelir 220ms var(--e-out); }

/* Durumlar */
.kod-alani[data-durum="hata"] .kod-hane {
  border-color: #FF5A5A;
  background: rgba(255, 90, 90, 0.06);
}
.kod-alani[data-durum="basarili"] .kod-hane {
  border-color: #57D08A;
  background: rgba(87, 208, 138, 0.07);
}

/* Yanlış kodda sarsılma. Sadece görsel geri bildirim — ekran
   okuyucuya mesaj aria-live ile ayrıca gidiyor. */
@keyframes kodSarsil {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  45% { transform: translateX(4px); }
  70% { transform: translateX(-3px); }
}
.kod-alani[data-durum="hata"] .kod-kutular { animation: kodSarsil 320ms var(--e-out); }

/* Alt mesaj — yükseklik sabit, metin değişince satır zıplamasın. */
.kod-mesaj {
  min-height: 18px;
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 18px;
  color: var(--dimmer);
}
.kod-alani[data-durum="hata"] .kod-mesaj { color: #FF9A9A; }
.kod-alani[data-durum="basarili"] .kod-mesaj { color: #7FE0A8; }

/* Hareketi azalt tercihi: animasyonlar kapanıyor, durum renkleri kalıyor. */
@media (prefers-reduced-motion: reduce) {
  .kod-hane[data-yeni="1"],
  .kod-alani[data-durum="hata"] .kod-kutular { animation: none; }
  .kod-hane { transition: none; }
}

@media (max-width: 420px) {
  .kod-hane { width: 40px; height: 50px; font-size: 18px; }
  .kod-kutular { gap: 6px; }
  .kod-kutular .kod-hane[data-bosluk="1"] { margin-left: 10px; }
}