/* ===========================
   INPUT STATES / COLORS
   Kullanım: .input + .is-{state}
   Hint:     .input-hint + .is-{state}
   =========================== */

/* ----- Error (Kırmızı) ----- */
.input.is-error,
.form-control.is-error {
  border-color: #ef4444;
}
.input.is-error:focus,
.form-control.is-error:focus {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}
.input-hint.is-error {
  color: #ef4444;
}
.input-icon.is-error {
  color: #ef4444;
}

/* ----- Success (Yeşil) ----- */
.input.is-success,
.form-control.is-success {
  border-color: #22c55e;
}
.input.is-success:focus,
.form-control.is-success:focus {
  border-color: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}
.input-hint.is-success {
  color: #22c55e;
}
.input-icon.is-success {
  color: #22c55e;
}

/* ----- Warning (Sarı) ----- */
.input.is-warning,
.form-control.is-warning {
  border-color: #f59e0b;
}
.input.is-warning:focus,
.form-control.is-warning:focus {
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}
.input-hint.is-warning {
  color: #f59e0b;
}
.input-icon.is-warning {
  color: #f59e0b;
}

/* ----- Checked/Toggle renkleri ----- */

/* Success checkbox/radio/toggle */
.check-item input:checked.is-success,
.toggle-item input:checked.is-success {
  background-color: #22c55e;
  border-color: #22c55e;
}

.toggle-item input.is-success:checked {
  background-color: #22c55e;
}

/* Danger checkbox/radio/toggle */
.check-item input:checked.is-danger,
.toggle-item input.is-danger:checked {
  background-color: #ef4444;
  border-color: #ef4444;
}

.toggle-item input.is-danger:checked {
  background-color: #ef4444;
}

/* Warning checkbox/radio/toggle */
.toggle-item input.is-warning:checked {
  background-color: #f59e0b;
}