/* Siri Enjin Niaga holding page. Loads after /panduan/gaya.css and adds only what this page needs:
   the waitlist block, the form and its states. Tokens come from that file. */

.siri .lampu { color: var(--lampu) }
.tindakan { display: grid; justify-items: start; gap: 0.75rem }

.buku h3 { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem); line-height: 1.1 }
.buku p { margin-block-start: 0.375rem }

.daftar { display: grid; gap: 1rem; margin-block: 2.5rem; padding: clamp(1.25rem, 1rem + 2vw, 2rem); border: 1px solid var(--lampu) }
.daftar-borang { display: grid; align-content: start; gap: 1rem }
.daftar h2 { margin: 0; font-family: var(--display); font-weight: 800; font-stretch: 62%; text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.9; font-size: clamp(2.5rem, 1.8rem + 3vw, 3.75rem) }
.daftar h2 em { font-size: 1.08em }

form { display: grid; gap: 1.25rem; margin-block-start: 0.5rem }
.medan { display: grid; gap: 0.5rem }
.medan > label { font-weight: 600 }
.pilihan { color: var(--muted); font-weight: 400 }
input[type="text"] {
  inline-size: 100%;
  min-block-size: 3rem;
  padding: 0.75rem 0.875rem;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid color-mix(in oklch, var(--paper) 35%, transparent);
  border-radius: 0;
  font: 400 1rem/1.4 var(--sans); /* 16px, so phones don't zoom in */
}
input[type="text"]:focus-visible { outline-offset: 0; border-color: var(--lampu) }
input[aria-invalid="true"] { border-color: var(--lampu) }
.nota { color: var(--muted); font-size: 0.9375rem }
.salah { color: var(--lampu); font-size: 0.9375rem; font-weight: 600 }

.izin { grid-template-columns: 1.5rem 1fr; gap: 0.5rem 0.75rem; align-items: start }
.izin input { inline-size: 1.25rem; block-size: 1.25rem; margin: 0.2rem 0 0; accent-color: var(--lampu) }
.izin label { font-weight: 400; font-size: 0.9375rem; line-height: 1.5 }
.izin .salah, .izin .notis { grid-column: 2 }
.izin-en { display: block; margin-block-start: 0.375rem; color: var(--muted); font-size: 0.8125rem; line-height: 1.45 }
.izin .notis { justify-self: start; min-block-size: 2.75rem; padding: 0.5rem 1rem; font-size: 0.875rem }

form .btn { justify-self: start }
form .btn[aria-busy="true"] { opacity: 0.7; cursor: progress }

/* honeypot: off screen for people, still in the form for bots */
.perangkap { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap }

.keadaan p { padding: 1rem 1.25rem; background: var(--ink-2); border-inline-start: 2px solid var(--lampu); font-weight: 600 }
.keadaan p.salah { font-size: inherit; color: var(--paper) }
/* without JavaScript, the function redirects to #daftar-<kod> and only that message shows */
.tanpa-js:not(:target) { display: none }

/* the guide links are a hub list, not article bullets */
.isi .senarai > li { padding-inline-start: 0 }
.isi .senarai > li::before { content: none }