/*
 * Gaya halaman kontak.
 *
 * Dua kelas diberi nama lain: `error` menjadi `galatMedan`, `notice` menjadi
 * `kontakNotice`. Keduanya bentrok dengan berkas yang selalu ikut dimuat —
 * `.error` di page.css adalah KOTAK galat sehalaman penuh (bantalan 1,25rem,
 * bingkai 2px), sementara di sini ia pesan kecil di bawah satu medan.
 * Karena kontak.css dimuat belakangan, tanpa penggantian nama pesan kecil itu
 * akan mewarisi bantalan dan bingkai kotak besarnya.
 *
 * Nilainya tidak berubah sedikit pun. Tabrakan dicari `npm run cek-css`.
 */
/* Gaya khusus Hubungi Kami. Primitif bersama ada di page.module.css. */

.layout {
  display: grid;
  gap: 2.5rem;
  margin-top: 2.5rem;
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 62rem) {
  .layout {
    grid-template-columns: 1fr 19rem;
    gap: 3rem;
  }
}

/* ---------- Kartu informasi ---------- */

.infoCard {
  padding: 1.25rem;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-top: 3px solid var(--primary);
  border-radius: var(--r-kartu);
}

.infoTitle {
  margin: 0 0 0.75rem;
  font-size: var(--t-mikro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
}

.infoList {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--t-dasar);
  line-height: 1.65;
}

.infoRow {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
}

.infoRow:last-child {
  border-bottom: 0;
}

.infoLabel {
  display: block;
  color: var(--text-muted);
  font-size: var(--t-mikro);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 0.15rem;
}

.infoValue {
  overflow-wrap: break-word;
}

.infoValue a {
  color: var(--text);
  text-decoration: none;
}

.infoValue a:hover {
  color: var(--primary);
  text-decoration: underline;
}

.kontakNotice {
  margin: 0;
  padding: 0.75rem 0.9rem;
  border: 1px dashed var(--border);
  border-radius: var(--r-kartu);
  background: var(--bg);
  color: var(--text-muted);
  font-size: var(--t-kecil);
}

.waButton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 1rem;
  margin-top: 1rem;
  background: var(--primary-isi);
  color: #fff;
  border-radius: var(--r-kartu);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--t-dasar);
}

.waButton:hover {
  background: var(--primary-isi-hover);
  color: #fff;
}

/* ---------- Formulir ---------- */

.form {
  max-width: 42rem;
}

.field {
  margin-bottom: 1.25rem;
}

.label {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 600;
  font-size: var(--t-dasar);
}

.req {
  color: var(--primary);
  margin-left: 0.15rem;
}

.input,
.select,
.textarea {
  width: 100%;
  padding: 0.75rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--r-kartu);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: var(--t-dasar);
}

.textarea {
  min-height: 9rem;
  resize: vertical;
  line-height: 1.6;
}

.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 1px;
  border-color: var(--primary);
}

.inputError {
  border-color: var(--brand-600);
}

/* Pesan galat: ikon + teks, tidak mengandalkan warna saja */
.galatMedan {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin: 0.4rem 0 0;
  color: var(--brand-800);
  font-size: var(--t-kecil);
  font-weight: 600;
}

/* Pola tiga keadaan: lengan sistem dipagari media query, lengan stempel
   berdiri sendiri. Tanpa pagar itu `:not([data-theme='light'])` juga cocok
   dengan sistem terang dan warna gelapnya bocor ke sana. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .galatMedan {
    color: #e8a5aa;
  }
}

:root[data-theme='dark'] .galatMedan {
  color: #e8a5aa;
}

.hint {
  margin: 0.4rem 0 0;
  font-size: var(--t-kecil);
  color: var(--text-muted);
}

/* Honeypot — disembunyikan dari mata dan dari pembaca layar */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.consentRow {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.9rem 1rem;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-kartu);
}

.consentBox {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
  accent-color: var(--primary);
}

.consentText {
  font-size: var(--t-dasar);
  line-height: 1.55;
}

.submit {
  /* Gabungan: pasang juga kelas "tombolKirim" pada elemennya di Blade. */
}

.submit:hover:not(:disabled) {
  background: var(--primary-isi-hover);
}

.submit:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* ---------- Umpan balik pengiriman ---------- */

.result {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 1rem 1.25rem;
  border-radius: var(--r-kartu);
  margin-bottom: 1.5rem;
  font-size: var(--t-dasar);
  line-height: 1.6;
}

.resultOk {
  background: #e8f5ec;
  border: 1px solid #a8d5b8;
  color: #1c5c33;
}

.resultFail {
  background: var(--brand-50);
  border: 1px solid var(--brand-200);
  color: var(--brand-800);
}

/*
  Pola tiga keadaan, nilai tidak berubah.

  Keenam nilai gelap di sini sama PERSIS dengan `.healthHijau` dan
  `.healthMerah` di program.module.css, dan yang merah juga sama dengan
  `.cancelled` di agenda.module.css. Satu palet status ditulis tiga kali
  sebagai literal di tiga berkas — pelanggaran skill §1 (heksadesimal di luar
  globals.css) yang mendahului pekerjaan ini. Menyatukannya berarti memutuskan
  apakah hijau dan kuning boleh masuk globals.css, dan itu keputusan Anda.
*/
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .resultOk {
    background: #16301f;
    border-color: #2f5c3f;
    color: #a9dcbb;
  }

  :root:not([data-theme='light']) .resultFail {
    background: #331416;
    border-color: #6b2a2f;
    color: #e8a5aa;
  }
}

:root[data-theme='dark'] .resultOk {
  background: #16301f;
  border-color: #2f5c3f;
  color: #a9dcbb;
}

:root[data-theme='dark'] .resultFail {
  background: #331416;
  border-color: #6b2a2f;
  color: #e8a5aa;
}

.resultIcon {
  flex: none;
  font-weight: 700;
}

/*
  Dua gaya sebaris dari situs lama, dipindahkan jadi kelas.

  `judulFormulir` dulu style={{ marginTop: 0 }} pada judul seksi formulir;
  `infoTitleSosial` dulu style={{ marginTop: '1.25rem' }} pada judul Media
  Sosial. Nilainya sama persis. Gaya sebaris tidak terjangkau media query
  maupun keadaan tema, jadi begitu salah satunya perlu jarak berbeda di layar
  sempit, nilainya harus pindah ke sini juga.
*/
.judulFormulir {
  margin-top: 0;
}

.infoTitleSosial {
  margin-top: 1.25rem;
}