.tombol {
  --tombol-latar: rgb(29, 78, 216);
  --tombol-teks: rgb(255, 255, 255);

  background-color: var(--tombol-latar);
  color: var(--tombol-teks);
  padding: 8px 16px;
  border: 0;
  border-radius: 8px;
  font-size: 14px;
  transition: background-color 0.15s ease;
}

.tombol:hover { background-color: rgb(30, 64, 175); }
.tombol:active { background-color: rgb(30, 58, 138); }
.tombol:focus-visible { outline: 2px solid rgb(2, 132, 199); outline-offset: 2px; }
.tombol:disabled { opacity: 0.5; cursor: not-allowed; }

.input {
  border: 1px solid rgb(203, 213, 225);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
}

.input:focus-visible {
  outline: 2px solid rgb(2, 132, 199);
  border-color: rgb(29, 78, 216);
}