:root {
  --paper:#f7f6f0; --white:#fff; --navy:#223e63; --navy-dark:#19304e;
  --ink:#253345; --muted:#64717b; --line:#dfe3df; --soft:#eef1e8; --error:#a23b34;
  --serif:Georgia,"Times New Roman",serif; --sans:"Segoe UI",Arial,sans-serif;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:20px; }
body { margin:0; background:var(--paper); color:var(--ink); font:15px/1.6 var(--sans); }
a { color:inherit; text-decoration:none; }
button,input,select { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.55; }
a,button,input,summary { -webkit-tap-highlight-color:transparent; }
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible { outline:3px solid #6085b0; outline-offset:4px; }
input:focus-visible { outline-offset:1px; }
[hidden] { display:none!important; }
.wrap { width:min(1180px,calc(100% - 40px)); margin-inline:auto; }
.skip-link { position:absolute; top:-70px; left:15px; padding:12px; color:white; background:var(--navy); z-index:10; }
.skip-link:focus { top:10px; }
.button { min-height:48px; display:inline-flex; justify-content:center; align-items:center; gap:16px; border:1px solid transparent; border-radius:7px; padding:12px 20px; font-size:14px; font-weight:650; line-height:1.4; text-align:center; }
.button-primary { background:var(--navy); color:#fff; }
.button-primary:hover:not(:disabled) { background:var(--navy-dark); }
.button-outline { background:transparent; color:var(--navy); border-color:var(--navy); }
.button-plain { color:var(--ink); background:transparent; padding-inline:0; }
.text-link { min-height:44px; display:inline-flex; align-items:center; gap:10px; padding:0; background:transparent; border:0; color:var(--navy); font-weight:600; font-size:14px; }
.eyebrow { font-size:11px; font-weight:700; letter-spacing:1.7px; color:var(--navy); margin:0 0 15px; }
.brand { display:inline-flex; align-items:center; gap:15px; }
.brand-logo { display:block; width:120px; height:auto; }
.site-header { min-height:96px; display:flex; justify-content:space-between; align-items:center; gap:20px; border-bottom:1px solid var(--line); }

/* A short first screen, followed immediately by registration. */
.intro-screen { width:min(620px,100%); min-height:0; margin:auto; padding:24px 24px 22px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.landing-header { margin-bottom:18px; }
.landing-header .brand-logo { width:118px; }
.intro-copy { width:100%; max-width:430px; }
.intro-copy h1 { font:400 clamp(42px,11.5vw,54px)/1.06 var(--serif); letter-spacing:-1.7px; color:var(--navy); margin:0 0 14px; }
.intro-description { margin:0 auto 16px; max-width:350px; font-size:15px; line-height:1.65; color:var(--muted); }
.status-line { margin:0; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; color:var(--navy); font-size:12px; }
.status-pill { display:inline-flex; align-items:center; gap:7px; background:#eaece3; padding:5px 11px; border-radius:20px; font-weight:600; }
.status-dot { width:6px; height:6px; background:#a88036; border-radius:50%; }
.status-pill.is-open { background:#e7eedb; }
.status-pill.is-open .status-dot { background:#648348; }
#event-capacity { color:var(--muted); }
.event-summary { display:grid; gap:9px; margin:19px auto 0; max-width:370px; text-align:left; }
.event-summary>div { display:flex; gap:11px; justify-content:center; }
.event-summary svg { width:18px; height:18px; flex-shrink:0; color:var(--navy); margin-top:2px; }
.event-summary p { margin:0; font-size:13px; line-height:1.5; }
.event-summary strong { font-weight:500; }
.event-summary p>span { color:var(--muted); }
#event-address { display:block; font-size:12px; margin-top:2px; }
#event-fee { margin:10px 0 0; font-size:12px; color:var(--muted); }
.scroll-cue { display:flex; align-items:center; justify-content:space-between; gap:22px; width:min(100%,330px); padding:12px 16px 12px 20px; margin-top:auto; background:var(--navy); color:white; border-radius:9px; text-align:left; min-height:62px; }
.intro-copy+.scroll-cue { margin-top:24px; }
.scroll-cue>span:first-child { font-size:11px; line-height:1.5; color:#dce5ef; }
.scroll-cue strong { display:block; font-weight:600; font-size:15px; color:#fff; }
.scroll-arrow { display:grid; place-items:center; width:32px; height:32px; border:1px solid #ffffff55; border-radius:50%; font-size:21px; }
.scroll-cue:hover { background:var(--navy-dark); }
.registration-section { border-top:1px solid var(--line); background:#edf0e9; padding:32px 16px 28px; }
.registration-shell { max-width:620px; margin-inline:auto; }
.registration-heading { margin:0 4px 20px; }
.registration-heading h2 { margin:0 0 6px; color:var(--navy); font:400 29px/1.2 var(--serif); letter-spacing:-.5px; }
.registration-heading p { margin:0; color:var(--muted); font-size:13px; }
.form-card { background:#fff; border:1px solid #dce1dc; border-radius:12px; overflow:hidden; }
.form-card-top { display:flex; justify-content:space-between; gap:10px; padding:18px 22px; border-bottom:1px solid #edf0eb; font-size:9px; font-weight:650; letter-spacing:1px; color:var(--muted); }
.registration-note { padding:12px 16px; margin:18px 20px 0; background:#f5f3e9; border-radius:6px; color:#685e45; }
.registration-note h3 { margin:0 0 3px; font-size:12px; line-height:1.4; }
.registration-note p { margin:0; font-size:12px; line-height:1.5; }
.receipt-lookup { margin:18px 20px 0; border:1px solid var(--line); border-radius:6px; }
.receipt-lookup summary { padding:13px 14px; min-height:48px; cursor:pointer; font-size:13px; font-weight:600; color:var(--navy); }
.receipt-lookup form { padding:0 14px 16px; }
.receipt-lookup .fieldset-description { margin:0 0 18px; }
.receipt-lookup .form-alert { margin:0 0 16px; }
.receipt-lookup .button { width:100%; }
.stepper { display:flex; justify-content:space-between; gap:8px; padding:23px 22px 0; margin:0; list-style:none; }
.stepper li { display:flex; align-items:center; gap:7px; font-size:12px; color:#66747d; }
.stepper li>span { width:30px; height:30px; display:grid; place-items:center; border:1px solid #d7dfe2; border-radius:50%; font-size:12px; }
.stepper li.active { color:var(--navy); font-weight:650; }
.stepper li.active>span { background:var(--navy); border-color:var(--navy); color:white; }
.stepper li.done>span { background:var(--soft); border-color:#cbd7bc; color:var(--navy); }
form { padding:27px 22px 24px; }
fieldset { padding:0; border:0; margin:0; min-width:0; }
legend { padding:0; color:var(--navy); font:400 26px/1.2 var(--serif); letter-spacing:-.4px; }
legend:focus { outline:none; }
.fieldset-description { margin:9px 0 23px; font-size:13px; color:var(--muted); }
.field { margin:0 0 21px; }
.field label { display:block; font-size:14px; font-weight:600; margin:0 0 8px; }
.field label>span { color:var(--muted); font-size:12px; }
.field input { display:block; width:100%; min-width:0; height:52px; padding:12px; border:1px solid #ccd4d8; border-radius:6px; background:white; color:var(--ink); font-size:16px; }
.field input::placeholder { color:#7c878f; font-size:14px; }
.field input[aria-invalid=true] { border-color:var(--error); }
.field-hint { font-size:12px; color:var(--muted); line-height:1.6; margin:7px 0 0; }
.field-error { font-size:12px; color:var(--error); margin:6px 0 0; }
.field-error:empty { display:none; }
.soft-note { display:flex; align-items:flex-start; gap:10px; background:#f4f6f0; padding:13px; border-radius:5px; color:var(--muted); margin-top:22px; }
.soft-note>span { font-size:21px; color:var(--navy); line-height:1.2; }
.soft-note p { margin:0; font-size:12px; line-height:1.6; }
.form-actions { display:flex; align-items:center; justify-content:space-between; gap:16px; border-top:1px solid #e8ece8; padding-top:21px; margin-top:25px; }
.form-actions>.button-primary { flex:1; font-size:14px; min-height:50px; }
.form-actions>.button-plain { flex:none; font-size:13px; }
#required-note { display:none; }
.form-footer { background:#f9faf7; border-top:1px solid #edf0eb; padding:14px 22px; text-align:center; font-size:11px; line-height:1.6; color:var(--muted); }
.form-alert { margin:18px 22px 0; padding:13px; border:1px solid #edcbbb; background:#fff1e9; border-radius:5px; font-size:13px; color:#874536; }
.review-list { margin:0 0 22px; }
.review-list>div { display:grid; grid-template-columns:.85fr 1.15fr; gap:15px; padding:12px 0; border-bottom:1px solid #edf0eb; font-size:13px; }
.review-list dt { color:var(--muted); }
.review-list dd { margin:0; font-weight:600; overflow-wrap:anywhere; }
.consent { display:flex; align-items:flex-start; gap:12px; font-size:13px; line-height:1.65; color:var(--ink); cursor:pointer; padding-block:4px; }
.consent input { flex-shrink:0; width:21px; height:21px; margin:3px 0 0; accent-color:var(--navy); }
.honeypot { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.success-panel { text-align:center; padding:32px 22px; }
.success-icon { display:grid; place-items:center; width:52px; height:52px; margin:0 auto 20px; border-radius:50%; background:var(--soft); color:var(--navy); font-size:26px; }
.success-panel h3 { color:var(--navy); font:32px/1.2 var(--serif); margin:10px 0; }
.success-panel p { font-size:14px; color:var(--muted); }
.success-panel .receipt-number { color:var(--navy); background:var(--paper); border:1px dashed #c7d0d5; padding:16px 10px; font-size:17px; font-weight:700; letter-spacing:.5px; overflow-wrap:anywhere; }
.success-panel .receipt-status { font-size:12px; }
.success-panel .text-link { display:flex; margin:13px auto 0; justify-content:center; }
.help-inline { text-align:center; padding-top:20px; }
.help-inline p { font-size:12px; color:var(--muted); margin:0; }
.help-inline .text-link { font-size:13px; }
.site-footer { display:flex; align-items:center; justify-content:space-between; gap:18px; padding-block:22px; }
.site-footer p,.site-footer>a { color:var(--muted); font-size:12px; margin:0; }
.site-footer>a { min-height:44px; display:flex; align-items:center; }
@media(min-width:760px) {
  .intro-screen { padding-top:32px; padding-bottom:28px; }
  .landing-header { margin-bottom:21px; }
  .landing-header .brand-logo { width:138px; }
  .intro-copy h1 { font-size:58px; }
  .intro-description { max-width:390px; font-size:16px; }
  .registration-section { padding-block:40px; }
  .registration-heading { margin-bottom:23px; }
  .form-card-top { padding-inline:30px; }
  .stepper { padding-inline:30px; }
  form { padding:30px; }
  .registration-note { margin-inline:30px; }
}
@media(max-width:360px) {
  .intro-screen { padding-inline:18px; }
  .intro-description { font-size:14px; }
  .stepper { padding-inline:16px; }
  .stepper li { font-size:11px; gap:5px; }
  .stepper li>span { width:27px; height:27px; }
  form { padding-inline:17px; }
  .form-card-top { padding-inline:17px; font-size:8px; }
  legend { font-size:24px; }
  .form-actions { gap:10px; }
  .form-actions>.button-primary { font-size:13px; padding-inline:12px; }
}
@media(max-height:680px) and (max-width:759px) {
  .intro-screen { padding-block:18px; }
  .landing-header { margin-bottom:12px; }
  .landing-header .brand-logo { width:100px; }
  .intro-copy h1 { font-size:42px; margin-bottom:10px; }
  .intro-description { font-size:14px; margin-bottom:12px; }
  .event-summary { margin-top:14px; gap:6px; }
  .intro-copy+.scroll-cue { margin-top:18px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
@media print {
  body { background:white; }
  .intro-screen,.registration-heading,.registration-note,.receipt-lookup,.form-alert,.help-inline,.site-footer,.stepper,.form-card-top,.form-footer,.success-panel button { display:none!important; }
  .registration-section { display:block; padding:0; background:white; border:0; }
  .form-card { border:0; }
  #registration-form { display:none; }
  .success-panel:before { content:"Solo Mengaji — Bukti pendaftaran"; display:block; font-size:18px; margin-bottom:20px; }
}