/* Kulit publik HP/PC. Huruf sistem, spasi kata tegas, warna RS kalem. */
:root {
  --rs-bg: #eef3ef;
  --rs-bg-2: #f7f4ee;
  --rs-ink: #1c2b28;
  --rs-muted: #4d5e59;
  --rs-card: #ffffff;
  --rs-line: #d5e0da;
  --rs-teal: #1f6b5c;
  --rs-teal-2: #15564a;
  --rs-blue: #2f6280;
  --rs-field: #fffdf8;
  --rs-warn: #fff6e0;
  --rs-warn-line: #e2b656;
  --rs-err: #fdecee;
  --rs-err-line: #d07080;
  --rs-ok: #e6f6ec;
  --rs-ok-line: #6fbf86;
  --rs-shadow: 0 12px 32px rgba(28, 43, 40, 0.08);
}

html {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans",
    "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
  letter-spacing: 0.02em;
  word-spacing: 0.16em;
  font-kerning: normal;
  font-variant-ligatures: none;
  -webkit-text-stroke: 0;
  text-shadow: none;
  -webkit-font-smoothing: antialiased;
}

body.publik {
  margin: 0;
  min-height: 100vh;
  color: var(--rs-ink);
  background:
    radial-gradient(900px 420px at 8% -8%, #dceae4 0%, transparent 55%),
    linear-gradient(180deg, var(--rs-bg) 0%, var(--rs-bg-2) 100%);
  font-size: 1.08rem;
}

body.publik h1,
body.publik h2,
body.publik p,
body.publik label,
body.publik li,
body.publik a,
body.publik button {
  letter-spacing: 0.02em;
  word-spacing: 0.16em;
  overflow-wrap: break-word;
  word-break: normal;
  white-space: normal;
}

.publik .wrap {
  max-width: 36rem;
  margin: 0 auto;
  padding: 1.35rem 1.1rem 2.8rem;
}

.publik .brand {
  margin: 0 0 0.35rem;
  color: var(--rs-teal);
  font-size: 0.98rem;
  font-weight: 700;
  word-spacing: 0.2em;
}

.publik h1 {
  margin: 0 0 0.45rem;
  font-size: 1.7rem;
  line-height: 1.25;
  font-weight: 700;
}

.publik .sub,
.publik .hint,
.publik .field-hint {
  color: var(--rs-muted);
  font-weight: 500;
}

.publik .field-hint {
  margin: 0 0 0.4rem;
  font-size: 0.98rem;
}

.publik .card {
  background: var(--rs-card);
  border: 1px solid var(--rs-line);
  border-radius: 1.15rem;
  padding: 1.15rem 1.2rem 1.25rem;
  margin: 0.95rem 0;
  box-shadow: var(--rs-shadow);
}

.publik label {
  display: block;
  font-weight: 700;
  margin: 1rem 0 0.2rem;
  font-size: 1.08rem;
}

.publik input,
.publik select,
.publik textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 3.1rem;
  font: inherit;
  letter-spacing: 0.02em;
  word-spacing: 0.12em;
  padding: 0.55rem 0.75rem;
  border: 1.5px solid #c5d2cb;
  border-radius: 0.75rem;
  background: var(--rs-field);
  color: var(--rs-ink);
}

.publik textarea { min-height: 5.2rem; resize: vertical; }

.publik .btn,
.publik button.btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0.85rem 0 0;
  min-height: 3.4rem;
  padding: 0.8rem 1.1rem;
  border: 0;
  border-radius: 1rem;
  background: var(--rs-teal);
  color: #fff;
  font: inherit;
  font-size: 1.12rem;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  word-spacing: 0.18em;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.publik .btn-alt { background: var(--rs-blue); }
.publik .btn-ghost,
.publik a.btn-ghost {
  background: #edf3ef;
  color: var(--rs-ink);
  border: 1.5px solid var(--rs-line);
}

.publik .btn:active,
.publik button.btn:active { background: var(--rs-teal-2); }

.publik .warn { background: var(--rs-warn); border-color: var(--rs-warn-line); }
.publik .err { background: var(--rs-err); border-color: var(--rs-err-line); }
.publik .ok { background: var(--rs-ok); border-color: var(--rs-ok-line); }

.publik .syarat {
  margin: 0.4rem 0 0;
  padding-left: 1.25rem;
}

.publik .syarat li {
  margin: 0.55rem 0;
}

.publik .langkah {
  display: flex;
  gap: 0.4rem;
  list-style: none;
  padding: 0;
  margin: 0.85rem 0 1.1rem;
}

.publik .langkah li {
  flex: 1;
  margin: 0;
  text-align: center;
  padding: 0.55rem 0.25rem;
  border-radius: 999px;
  background: #e3ebe7;
  color: #3d4f4b;
  font-weight: 700;
  font-size: 0.86rem;
  word-spacing: 0.14em;
}

.publik .langkah li.on {
  background: var(--rs-teal);
  color: #fff;
}

.publik .nomor {
  margin: 0.4rem 0;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  word-spacing: 0.16em;
  color: var(--rs-teal);
}

.publik .ringkas p { margin: 0.35rem 0; }

.publik .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* HP: satu kolom, tap besar, tanpa kibot mesin. */
body.hp {
  font-size: 1.12rem;
}

body.hp .wrap {
  max-width: 28rem;
  padding: 1.05rem 0.95rem 2.4rem;
}

body.hp h1 { font-size: 1.55rem; }

body.hp .btn,
body.hp button.btn {
  min-height: 3.7rem;
  font-size: 1.16rem;
}

body.hp input,
body.hp select,
body.hp textarea {
  min-height: 3.35rem;
}

/* Tablet: lebih lebar, tap nyaman, tanpa kibot mesin. */
body.tablet {
  font-size: 1.14rem;
}

body.tablet .wrap {
  max-width: 44rem;
  padding: 1.4rem 1.25rem 2.6rem;
}

body.tablet h1 { font-size: 1.85rem; }

body.tablet .card { padding: 1.25rem 1.35rem 1.4rem; }

body.tablet .btn,
body.tablet button.btn {
  min-height: 3.85rem;
  font-size: 1.2rem;
}

body.tablet input,
body.tablet select,
body.tablet textarea {
  min-height: 3.45rem;
}

/* PC: kartu tengah, hover boleh, tanpa kibot mesin. */
body.pc {
  font-size: 1.08rem;
}

body.pc .wrap {
  max-width: 36rem;
}

body.pc .btn:hover,
body.pc a.btn:hover {
  background: var(--rs-teal-2);
}

body.hp .btn:hover,
body.tablet .btn:hover {
  filter: none;
}