/* styles/style.css — Seminar Web Komunitas
   Stylesheet bersama proyek Formulir Pendaftaran.
   Ditulis pada Bagian 3, dipakai halaman form dan halaman pemeriksaan. */

/* Token desain: ubah nilai di sini, seluruh halaman ikut menyesuaikan. */
:root {
  --warna-teks: #1f2937;
  --warna-teks-lembut: #5b6472;
  --warna-latar: #f8fafc;
  --warna-aksen: #1a6b54;
  --warna-tepi: #cbd5e1;
  --warna-galat: #b3261e;
  --warna-galat-lembut: #e8b4ae;
  --warna-kartu: #e6f1ec;
}

body {
  margin: 0;
  background-color: var(--warna-latar);
  color: var(--warna-teks);
  font-family: "Segoe UI", Arial, sans-serif;
  line-height: 1.6;
}

main {
  max-width: 34rem;
  margin-inline: auto;
  padding: 1.5rem 1rem 3rem;
}

form {
  display: grid;
  gap: 1.25rem;
}

fieldset {
  margin: 0;
  border: 1px solid var(--warna-tepi);
  border-radius: 8px;
  padding: 1rem;
  display: grid;
  gap: 0.9rem;
}

legend {
  font-weight: 600;
  padding-inline: 0.4rem;
}

form label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 600;
}

.kolom {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--warna-tepi);
  border-radius: 6px;
  background-color: #ffffff;
  color: inherit;
  font: inherit;
}

/* Indikator fokus yang terlihat jelas bagi navigasi keyboard. */
.kolom:focus-visible {
  outline: 3px solid var(--warna-aksen);
  outline-offset: 2px;
}

/* Tanda ringan untuk isian yang belum sah — peringatan, bukan hukuman. */
.kolom:invalid {
  border-color: var(--warna-galat-lembut);
}

.pilihan {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0;
  font-weight: normal;
}

.pesan-galat {
  margin: 0;
  color: var(--warna-galat);
  font-size: 0.9rem;
}

button[type="submit"] {
  justify-self: start;
  font: inherit;
  font-weight: 600;
  color: #ffffff;
  background-color: var(--warna-aksen);
  border: 0;
  border-radius: 999px;
  padding: 0.6rem 1.5rem;
  cursor: pointer;
}

button[type="submit"]:focus-visible {
  outline: 3px solid var(--warna-teks);
  outline-offset: 2px;
}

.ringkasan {
  border: 1px solid var(--warna-aksen);
  border-radius: 8px;
  padding: 1rem;
  background-color: var(--warna-kartu);
}