/* ===========================
   VALIDATION
   Bağımlılık: inputs.css, input-states.css
   =========================== */

/* Shake animasyonu — hata durumunda input sallanır */
@keyframes v-shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-6px); }
  40%       { transform: translateX(6px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}

.input.v-shake,
.form-control.v-shake {
  animation: v-shake 0.35s ease;
}

/* Validasyon mesajı (input-hint üzerine kurulu) */
.v-message {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  min-height: 18px;
  transition: opacity 0.15s ease;
}

.v-message.is-error   { color: #ef4444; }
.v-message.is-success { color: #22c55e; }
.v-message.is-warning { color: #f59e0b; }

.v-message svg {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
}

/* Karakter sayacı */
.v-counter {
  font-size: 11px;
  color: #94a3b8;
  text-align: right;
  margin-top: 2px;
}

.v-counter.is-over {
  color: #ef4444;
  font-weight: 600;
}

/* Form-level özet banner */
.v-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 20px;
}

.v-banner.is-error {
  background: #fef2f2;
  border: 1.5px solid #fca5a5;
  color: #991b1b;
}

.v-banner.is-success {
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  color: #166534;
}

.v-banner svg {
  flex-shrink: 0;
  margin-top: 1px;
  width: 16px;
  height: 16px;
}