/* Hallmark · redesign · macrostructure: Numbered Programme (Long Document family)
 * genre: editorial · tone: ceremonial-invitation · anchor hue: maroon + gold
 * JS-contract: preserved (ids, radio names, .warna-*, .notif.tampil, .mendesak,
 *   .tiket.warna-*, .titik.habis, #teksTanggal/#teksTempat firstChild text nodes)
 * pre-emit critique: P5 H5 E5 S5 R4 V5
 * Self-contained stylesheet for the participant order page only.
 * panitia.html keeps assets/css/style.css untouched.
 * ===================================================================== */

/* ============================ TOKENS ============================ */
:root {
  /* — Brand anchors (Universitas Hasanuddin — kept exact for fidelity) — */
  --color-maroon:        #7b1220;
  --color-maroon-deep:   #4a0a13;
  --color-maroon-bright: #a3182b;
  --color-night:         #1a0a0d;
  --color-night-2:       #261014;
  --color-gold:          #d4af5a;
  --color-gold-bright:   #f0d799;

  /* — Surfaces & ink — */
  --color-paper:    #f4ecdd;   /* warm invitation ground */
  --color-paper-2:  #fbf6ec;   /* raised panel / input field */
  --color-card:     #fffdf9;   /* card face */
  --color-ink:      #241819;
  --color-ink-2:    #6a585b;

  /* — Rules / hairlines — */
  --color-rule:        rgba(122, 18, 32, .16);
  --color-rule-strong: rgba(122, 18, 32, .30);
  --color-gold-line:   rgba(212, 175, 90, .40);

  /* — Status / semantic — */
  --color-success: #1f7a4d;
  --color-danger:  #b3261e;

  /* — Session/ticket colors (JS-driven .warna-hijau / .warna-kuning / .warna-merah) — */
  --color-hijau:      #1f7a4d;
  --color-hijau-soft: #e4f3ec;
  --color-kuning:     #b98713;
  --color-kuning-soft:#f6eccf;
  --color-merah:      #b3261e;   /* tiket tendik */
  --color-merah-soft: #fbe4e2;

  /* — Type — */
  --font-display: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  --text-display: clamp(2.5rem, 7vw, 4.25rem);
  --text-h2:      clamp(1.55rem, 3.4vw, 2.15rem);
  --text-h3:      clamp(1.3rem, 2.4vw, 1.6rem);
  --text-lg:      1.15rem;
  --text-md:      1rem;
  --text-sm:      .875rem;
  --text-xs:      .78rem;
  --text-2xs:     .7rem;

  --track-wide:  .22em;   /* eyebrow / label tracking */
  --track-tight: -.015em; /* display tracking */

  /* — Space (4pt scale) — */
  --space-3xs: .25rem;  --space-2xs: .5rem;  --space-xs: .75rem;
  --space-sm:  1rem;    --space-md:  1.5rem; --space-lg: 2rem;
  --space-xl:  3rem;    --space-2xl: 4.5rem; --space-3xl: 7rem;

  /* — Radii — */
  --radius-btn:   5px;
  --radius-input: 7px;
  --radius-card:  10px;
  --radius-pill:  999px;

  /* — Motion — */
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-1: 140ms;
  --dur-2: 260ms;
  --dur-3: 440ms;

  /* — Depth — */
  --shadow-card: 0 1px 0 rgba(255,255,255,.6) inset, 0 22px 48px -30px rgba(30,8,12,.5);
  --shadow-lift: 0 1px 0 rgba(255,255,255,.6) inset, 0 30px 60px -34px rgba(30,8,12,.6);
}

/* ============================ BASE ============================ */
* { box-sizing: border-box; }

html, body { overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.62;
  color: var(--color-ink);
  background: var(--color-paper);
  background-image:
    radial-gradient(1200px 600px at 78% -8%, rgba(212,175,90,.07), transparent 60%),
    radial-gradient(900px 520px at 6% 4%, rgba(122,18,32,.05), transparent 55%);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: normal;
  letter-spacing: var(--track-tight);
  line-height: 1.1;
  overflow-wrap: anywhere;
  min-width: 0;
  margin: 0;
}

p { margin: 0; }
a { color: var(--color-maroon); }
img { max-width: 100%; }

::selection { background: var(--color-maroon); color: var(--color-gold-bright); }

.wrap { width: min(1100px, 100% - 2.5rem); margin-inline: auto; }

:focus-visible {
  outline: 2px solid var(--color-maroon);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ============================ TOPBAR ============================ */
.topbar {
  background: var(--color-night);
  color: var(--color-gold-bright);
  border-bottom: 1px solid var(--color-gold-line);
}
.topbar .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-sm); padding: .8rem 0;
}
.brand {
  display: flex; align-items: center; gap: .7rem;
  font-weight: 600; letter-spacing: .01em; font-size: .98rem;
}
.brand small {
  display: block; font-weight: 400; font-size: var(--text-2xs);
  opacity: .62; letter-spacing: .12em; text-transform: uppercase;
}
.lambang-img {
  width: 40px; height: 40px; object-fit: contain;
  background: #fff; border-radius: 50%; padding: 3px;
  border: 1px solid var(--color-gold-line);
  flex: 0 0 auto;
}
.topbar nav { display: flex; gap: .3rem; }
.topbar nav a {
  color: rgba(244, 236, 221, .72); text-decoration: none; white-space: nowrap;
  font-size: var(--text-sm); padding: .45rem .85rem; border-radius: var(--radius-btn);
  transition: color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.topbar nav a:hover { color: var(--color-gold-bright); background: rgba(212,175,90,.1); }
.topbar nav a[aria-current="page"] {
  color: var(--color-night); background: var(--color-gold); font-weight: 600;
}

/* ============================ HERO ============================ */
.hero {
  position: relative; overflow: hidden;
  color: var(--color-paper);
  background:
    radial-gradient(120% 90% at 50% 118%, rgba(122,18,32,.45), transparent 60%),
    linear-gradient(158deg, var(--color-night) 0%, var(--color-maroon-deep) 62%, #300d16 100%);
  padding: clamp(2.6rem, 6vw, 4.4rem) 0 clamp(2.4rem, 5vw, 3.6rem);
}
/* Flyer acara sebagai wash latar (diblur + diredam) agar teks tetap terbaca */
.hero::before {
  content: ""; position: absolute; inset: -48px; pointer-events: none; z-index: 0;
  background: url("../img/flyer.jpeg") center 42% / cover no-repeat;
  filter: blur(22px) saturate(.78) brightness(.72);
  opacity: .34;
}
.hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}
.hero .wrap {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.18fr .82fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}

.hero-logo {
  width: 68px; height: 68px; object-fit: contain; margin-bottom: 1.1rem;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.45));
}

.hero-kicker {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: var(--text-2xs); letter-spacing: var(--track-wide); text-transform: uppercase;
  color: var(--color-gold); font-weight: 600;
  margin-bottom: 1.25rem;
}
.hero-kicker::before {
  content: ""; width: 26px; height: 1px; background: var(--color-gold); opacity: .8;
}

.hero-judul {
  font-size: var(--text-display);
  margin: 0 0 1.1rem;
}
.hero-judul-2 {
  display: block; color: var(--color-gold-bright);
  font-style: normal; font-weight: 500;
}

.hero-lead {
  color: rgba(244, 236, 221, .82);
  max-width: 46ch; margin: 0 0 1.4rem;
  font-size: var(--text-lg); line-height: 1.6;
}
.hero-pengisi { color: rgba(244,236,221,.86); font-size: var(--text-sm); margin: 0 0 1.7rem; }
.hero-pengisi b { color: var(--color-gold-bright); font-weight: 600; }

.hero-kuota { justify-content: flex-start; margin-top: 1.3rem; }

/* Ledger of event particulars */
.detail-acara {
  margin: 0; display: grid; gap: 0;
  background: rgba(0,0,0,.16);
  border: 1px solid var(--color-gold-line);
  border-radius: var(--radius-card);
  padding: .35rem 1.25rem;
  backdrop-filter: blur(2px);
}
.detail-acara > div {
  display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(212,175,90,.16);
}
.detail-acara > div:last-child { border-bottom: 0; }
.detail-acara .ikon {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 8px;
  display: grid; place-items: center; font-size: 1rem;
  background: rgba(212,175,90,.1); border: 1px solid rgba(212,175,90,.26);
}
.detail-acara dt {
  font-size: var(--text-2xs); letter-spacing: .16em; text-transform: uppercase;
  color: var(--color-gold); margin: 0 0 .18rem; font-weight: 600;
}
.detail-acara dd {
  margin: 0; font-family: var(--font-display); font-size: 1.1rem; line-height: 1.25;
}
.detail-acara dd small {
  display: block; font-family: var(--font-body); font-size: var(--text-xs);
  opacity: .66; line-height: 1.4; margin-top: .15rem;
}

/* ============================ MAIN / STEP RAIL ============================ */
main#pesan { padding: clamp(2.4rem, 5vw, 3.6rem) 0 clamp(3.4rem, 7vw, 5rem); }

.langkah {
  list-style: none; margin: 0 0 clamp(2rem, 4vw, 3rem); padding: 0;
  display: flex; gap: 0;
  max-width: 760px; margin-inline: auto;
}
.langkah-item {
  flex: 1 1 0; min-width: 0; position: relative;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  text-align: center;
}
/* connector line between numerals */
.langkah-item + .langkah-item::before {
  content: ""; position: absolute; top: 17px; right: 50%; left: -50%;
  height: 2px; background: var(--color-rule); z-index: 0;
}
.langkah-no {
  position: relative; z-index: 1;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: .95rem; font-weight: 600;
  color: var(--color-ink-2);
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule-strong);
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.langkah-teks {
  font-size: var(--text-2xs); letter-spacing: .04em; color: var(--color-ink-2);
  line-height: 1.25; font-weight: 500;
  transition: color var(--dur-2) var(--ease-out);
}

/* — active step (the visible stage) — */
#pesan:has(#tahapSesi:not([hidden]))    .langkah-item[data-step="sesi"]  .langkah-no,
#pesan:has(#tahapAntrian:not([hidden])) .langkah-item[data-step="antri"] .langkah-no,
#pesan:has(#tahapForm:not([hidden]))    .langkah-item[data-step="form"]  .langkah-no,
#pesan:has(#tahapTiket:not([hidden]))   .langkah-item[data-step="tiket"] .langkah-no {
  background: var(--color-maroon); color: #fff; border-color: var(--color-maroon);
  transform: scale(1.06);
  box-shadow: 0 0 0 4px rgba(122,18,32,.14);
}
#pesan:has(#tahapSesi:not([hidden]))    .langkah-item[data-step="sesi"]  .langkah-teks,
#pesan:has(#tahapAntrian:not([hidden])) .langkah-item[data-step="antri"] .langkah-teks,
#pesan:has(#tahapForm:not([hidden]))    .langkah-item[data-step="form"]  .langkah-teks,
#pesan:has(#tahapTiket:not([hidden]))   .langkah-item[data-step="tiket"] .langkah-teks {
  color: var(--color-maroon); font-weight: 600;
}

/* — completed steps (before the visible stage) — */
#pesan:has(#tahapAntrian:not([hidden])) .langkah-item[data-step="sesi"]  .langkah-no,
#pesan:has(#tahapForm:not([hidden]))    .langkah-item[data-step="sesi"]  .langkah-no,
#pesan:has(#tahapForm:not([hidden]))    .langkah-item[data-step="antri"] .langkah-no,
#pesan:has(#tahapTiket:not([hidden]))   .langkah-item[data-step="sesi"]  .langkah-no,
#pesan:has(#tahapTiket:not([hidden]))   .langkah-item[data-step="antri"] .langkah-no,
#pesan:has(#tahapTiket:not([hidden]))   .langkah-item[data-step="form"]  .langkah-no {
  background: var(--color-gold); color: var(--color-night); border-color: var(--color-gold);
}
/* completed connectors turn gold */
#pesan:has(#tahapAntrian:not([hidden])) .langkah-item[data-step="antri"]::before,
#pesan:has(#tahapForm:not([hidden]))    .langkah-item[data-step="antri"]::before,
#pesan:has(#tahapForm:not([hidden]))    .langkah-item[data-step="form"]::before,
#pesan:has(#tahapTiket:not([hidden]))   .langkah-item[data-step="antri"]::before,
#pesan:has(#tahapTiket:not([hidden]))   .langkah-item[data-step="form"]::before,
#pesan:has(#tahapTiket:not([hidden]))   .langkah-item[data-step="tiket"]::before {
  background: var(--color-gold);
}

/* stage reveal */
main#pesan > .wrap > section:not([hidden]) {
  animation: masuk var(--dur-3) var(--ease-out) both;
}
@keyframes masuk {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ============================ SECTION HEAD ============================ */
.bagian-kepala { max-width: 60ch; margin: 0 auto clamp(1.6rem, 3vw, 2.2rem); text-align: center; }
.bagian-kepala::before {
  content: ""; display: block; width: 44px; height: 2px;
  background: var(--color-gold); margin: 0 auto .95rem;
}
.bagian-kepala h2 { font-size: var(--text-h2); margin: 0 0 .5rem; }
.bagian-kepala p { color: var(--color-ink-2); margin: 0; font-size: var(--text-md); }

/* ============================ CARD ============================ */
.kartu {
  background: var(--color-card);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.kartu-isi { padding: clamp(1.4rem, 4vw, 2.3rem); }
.form-kartu { max-width: 660px; margin-inline: auto; }

/* ============================ SESSION CARDS (JS-generated) ============================ */
.kartu-sesi {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem;
  max-width: 860px; margin-inline: auto;
}
.sesi { display: block; cursor: pointer; position: relative; }
.sesi input { position: absolute; opacity: 0; pointer-events: none; }
.sesi-isi {
  display: flex; flex-direction: column; gap: .6rem; height: 100%;
  background: var(--color-card);
  border: 1px solid var(--color-rule);
  border-top: 4px solid var(--color-gold);
  border-radius: var(--radius-card);
  padding: 1.5rem 1.55rem;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out),
              border-color var(--dur-1) var(--ease-out);
}
.sesi.warna-hijau  .sesi-isi { border-top-color: var(--color-hijau); }
.sesi.warna-kuning .sesi-isi { border-top-color: var(--color-kuning); }
.sesi:not(.nonaktif):hover .sesi-isi { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.sesi input:checked + .sesi-isi {
  box-shadow: 0 0 0 2px var(--color-maroon) inset, var(--shadow-lift);
  border-color: transparent;
}
.sesi input:focus-visible + .sesi-isi { box-shadow: 0 0 0 3px rgba(122,18,32,.4), var(--shadow-card); }
.sesi.nonaktif { cursor: not-allowed; }
.sesi.nonaktif .sesi-isi { opacity: .6; background: var(--color-paper-2); box-shadow: none; }

.sesi-atas { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.sesi-nama { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; line-height: 1.1; }
.sesi-jam { font-size: var(--text-sm); color: var(--color-ink-2); }
.sesi-ket { font-size: var(--text-sm); color: var(--color-ink-2); }
.sesi-status {
  font-size: var(--text-2xs); font-weight: 600; letter-spacing: .04em;
  padding: .24rem .62rem; border-radius: var(--radius-pill); white-space: nowrap;
}
.sesi-status.buka       { background: var(--color-hijau-soft); color: var(--color-hijau); }
.sesi-status.belum-buka { background: #e9e9f6; color: #4a4ab0; }
.sesi-status.habis      { background: #fdecea; color: var(--color-danger); }
.sesi-status.dikunci    { background: rgba(106,88,91,.14); color: var(--color-ink-2); }

.bar-kuota {
  display: block; height: 7px; background: rgba(122,18,32,.1);
  border-radius: var(--radius-pill); overflow: hidden; margin-top: .2rem;
}
.bar-kuota > span {
  display: block; height: 100%; background: var(--color-maroon);
  border-radius: var(--radius-pill); transition: width var(--dur-3) var(--ease-out);
}
.sesi.warna-hijau  .bar-kuota > span { background: var(--color-hijau); }
.sesi.warna-kuning .bar-kuota > span { background: var(--color-kuning); }
.sesi-kuota { font-size: var(--text-sm); }
.sesi-kuota b { color: var(--color-maroon); font-weight: 600; }
.sesi-buka { font-size: var(--text-xs); color: #4a4ab0; }

/* ============================ ACTION GATE (ambil antrian) ============================ */
.gerbang { max-width: 660px; margin: clamp(1.6rem, 4vw, 2.2rem) auto 0; text-align: center; }
.gerbang .petunjuk { margin: 0 0 1.1rem; color: var(--color-ink-2); font-size: var(--text-sm); }
.gerbang .petunjuk b { color: var(--color-maroon); }

/* ============================ NOTIF ============================ */
.notif {
  display: none; gap: .7rem; align-items: flex-start; text-align: left;
  padding: .9rem 1.1rem; border-radius: var(--radius-input);
  font-size: var(--text-sm); margin-bottom: 1.3rem;
}
.notif.tampil { display: flex; }
.notif.galat  { background: #fdf1f0; border: 1px solid rgba(179,38,30,.25); color: #8c1c16; }
.notif.sukses { background: #f0f8f4; border: 1px solid rgba(31,122,77,.25); color: #14603b; }
.notif.info   { background: #f8efd6; border: 1px solid var(--color-gold-line); color: #6b551f; }

/* ============================ WAITING ROOM ============================ */
.antri-panel { text-align: center; }
.nomor-antrian { margin-bottom: 1.6rem; }
.nomor-antrian span {
  display: block; font-size: var(--text-2xs); letter-spacing: .18em;
  text-transform: uppercase; color: var(--color-ink-2); margin-bottom: .3rem;
}
.nomor-antrian strong {
  font-family: var(--font-display); font-size: clamp(3.2rem, 12vw, 4rem);
  line-height: 1; color: var(--color-maroon); letter-spacing: .02em;
}
.antrian-info {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem;
  margin-bottom: 1.5rem;
  border-top: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule);
  padding: 1.1rem 0;
}
.antrian-info > div { padding: 0 .4rem; }
.antrian-info span {
  display: block; font-size: var(--text-2xs); letter-spacing: .1em;
  text-transform: uppercase; color: var(--color-ink-2); margin-bottom: .3rem;
}
.antrian-info strong { font-size: 1.05rem; font-weight: 600; }
.bar-tunggu {
  height: 8px; background: rgba(122,18,32,.1); border-radius: var(--radius-pill);
  overflow: hidden; position: relative;
}
.bar-tunggu > span {
  position: absolute; inset: 0; width: 34%;
  background: linear-gradient(90deg, transparent, var(--color-maroon), transparent);
  animation: geser 1.5s var(--ease-in-out) infinite;
}
@keyframes geser { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }

/* ============================ COUNTDOWN + FORM ============================ */
.hitung-mundur {
  background: var(--color-night-2); color: var(--color-paper);
  padding: 1rem clamp(1.4rem, 4vw, 2.3rem);
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}
.hitung-mundur span { font-size: var(--text-sm); opacity: .78; }
.hitung-mundur strong { font-family: var(--font-display); font-size: 1.45rem; color: var(--color-gold-bright); }
.hitung-mundur .bar-waktu {
  flex: 1 1 120px; height: 6px; background: rgba(255,255,255,.16);
  border-radius: var(--radius-pill); overflow: hidden;
}
.hitung-mundur .bar-waktu > span {
  display: block; height: 100%; width: 100%; background: var(--color-gold);
  transition: width 1s linear;
}
.hitung-mundur.mendesak strong { color: #ffb0b0; }
.hitung-mundur.mendesak .bar-waktu > span { background: #ff6b6b; }

.pilihan-sesi-terpilih {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem;
}

/* Role picker — auto-fits 2 or 3 options without leaving an orphan gap */
.pilihan-peran {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: .8rem; margin-bottom: 1.4rem;
}
.pilihan-peran input { position: absolute; opacity: 0; pointer-events: none; }
.pilihan-peran label {
  display: flex; align-items: center; gap: .75rem; cursor: pointer;
  padding: .95rem 1rem; border: 1px solid var(--color-rule); border-radius: var(--radius-input);
  background: var(--color-paper-2); transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.pilihan-peran label:hover { border-color: var(--color-rule-strong); }
.pilihan-peran input:checked + label {
  border-color: var(--color-maroon); background: rgba(122,18,32,.05);
  box-shadow: 0 0 0 1px var(--color-maroon) inset;
}
.pilihan-peran input:focus-visible + label { box-shadow: 0 0 0 3px rgba(122,18,32,.28); }
.pilihan-peran .emoji { font-size: 1.35rem; }
.pilihan-peran strong { display: block; font-size: .95rem; }
.pilihan-peran span.ket { font-size: var(--text-xs); color: var(--color-ink-2); }

fieldset { border: 0; padding: 0; margin: 0 0 .3rem; }
legend { font-size: var(--text-xs); font-weight: 600; padding: 0; margin-bottom: .5rem; }

.baris { display: grid; gap: 1.1rem; }
.baris.dua { grid-template-columns: 1fr; }

.bidang { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.15rem; }
.bidang > label { font-size: var(--text-xs); font-weight: 600; letter-spacing: .01em; }
.bidang > label .opsional { font-weight: 400; color: var(--color-ink-2); }
.petunjuk { font-size: var(--text-xs); color: var(--color-ink-2); }

input[type="text"], input[type="tel"], select {
  width: 100%; padding: .8rem .95rem; font: inherit; font-size: .95rem;
  color: var(--color-ink); background: var(--color-paper-2);
  border: 1px solid var(--color-rule); border-radius: var(--radius-input);
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
input::placeholder { color: #a7969a; }
input:hover, select:hover { border-color: var(--color-rule-strong); }
input:focus, select:focus {
  outline: none; background: #fff; border-color: var(--color-maroon);
  box-shadow: 0 0 0 3px rgba(122,18,32,.14);
}
input[aria-invalid="true"], select[aria-invalid="true"] {
  border-color: var(--color-danger); background: #fef7f6;
}
input[aria-invalid="true"]:focus, select[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(179,38,30,.16);
}
.galat { font-size: var(--text-xs); color: var(--color-danger); min-height: 1.1em; margin: 0; }

/* File input (e.g. KTM upload) — matched to the field aesthetic */
input[type="file"] {
  width: 100%; font: inherit; font-size: .9rem; color: var(--color-ink-2);
  background: var(--color-paper-2); border: 1px solid var(--color-rule);
  border-radius: var(--radius-input); padding: .5rem .55rem; cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
input[type="file"]::file-selector-button {
  font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
  margin-right: .8rem; padding: .5rem .9rem;
  color: var(--color-maroon); background: var(--color-card);
  border: 1px solid var(--color-rule-strong); border-radius: var(--radius-btn);
  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
input[type="file"]::file-selector-button:hover { border-color: var(--color-maroon); background: rgba(122,18,32,.04); }
input[type="file"]:hover { border-color: var(--color-rule-strong); }
input[type="file"]:focus, input[type="file"]:focus-within {
  outline: none; border-color: var(--color-maroon); box-shadow: 0 0 0 3px rgba(122,18,32,.14);
}
input[type="file"][aria-invalid="true"] { border-color: var(--color-danger); background: #fef7f6; }

/* ============================ BUTTONS ============================ */
.tombol {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-size: .93rem; font-weight: 600; line-height: 1.1; cursor: pointer;
  padding: .82rem 1.6rem; border-radius: var(--radius-btn); border: 1px solid transparent;
  text-decoration: none; white-space: nowrap;
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out),
              background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.tombol:active { transform: translateY(1px); }
.tombol.lebar { width: 100%; }
.tombol-lg { padding: .95rem 1.9rem; font-size: 1rem; }

.tombol-utama { background: var(--color-maroon); color: #fff; box-shadow: 0 12px 26px -16px rgba(122,18,32,.9); }
.tombol-utama:hover { background: var(--color-maroon-bright); box-shadow: 0 16px 30px -16px rgba(122,18,32,.9); }
.tombol-utama:disabled { background: #c3b3b5; color: #f6f0f0; cursor: not-allowed; box-shadow: none; transform: none; }

.tombol-garis { border-color: var(--color-rule-strong); color: var(--color-maroon); background: var(--color-card); }
.tombol-garis:hover { border-color: var(--color-maroon); background: rgba(122,18,32,.04); }

.tombol-emas { background: var(--color-gold); color: var(--color-night); box-shadow: 0 12px 26px -16px rgba(212,175,90,.9); }
.tombol-emas:hover { background: var(--color-gold-bright); }

.tombol-bahaya { border-color: rgba(179,38,30,.35); color: var(--color-danger); background: var(--color-card); }
.tombol-bahaya:hover { border-color: var(--color-danger); background: rgba(179,38,30,.04); }

.tombol-mini {
  font: inherit; font-size: var(--text-xs); font-weight: 600; padding: .34rem .8rem; cursor: pointer;
  border-radius: var(--radius-pill); border: 1px solid var(--color-rule-strong);
  background: var(--color-card); color: var(--color-maroon); white-space: nowrap;
  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.tombol-mini:hover { border-color: var(--color-maroon); background: rgba(122,18,32,.04); }

.tombol-emas:focus-visible { outline-color: var(--color-gold-bright); }

/* ============================ KUOTA LINE ============================ */
.kuota {
  display: flex; align-items: center; gap: .6rem; justify-content: center;
  font-size: var(--text-sm); color: var(--color-ink-2); margin-top: 1.2rem;
}
.kuota b { color: var(--color-maroon); font-weight: 600; }
.hero-kuota { color: rgba(244,236,221,.72); }
.hero-kuota b { color: var(--color-gold-bright); }
.titik {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
  background: var(--color-success); box-shadow: 0 0 0 4px rgba(31,122,77,.16);
}
.titik.habis { background: var(--color-danger); box-shadow: 0 0 0 4px rgba(179,38,30,.16); }

/* ============================ LENCANA SESI ============================ */
.lencana-sesi {
  display: inline-block; padding: .3rem .8rem; border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: 600; letter-spacing: .01em;
  background: var(--color-hijau-soft); color: var(--color-hijau);
}
.lencana-sesi.warna-kuning { background: var(--color-kuning-soft); color: #8a6410; }
.lencana-sesi.warna-hijau  { background: var(--color-hijau-soft); color: var(--color-hijau); }
.lencana-sesi.warna-merah  { background: var(--color-merah-soft); color: var(--color-merah); }
.lencana-sesi.besar { font-size: var(--text-sm); margin-top: .9rem; }

/* ============================ E-TICKET ============================ */
.tiket {
  position: relative; max-width: 620px; margin: 0 auto;
  background: var(--color-card); border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow-lift); border: 1px solid var(--color-rule);
}
.pita-sesi { height: 6px; background: var(--color-gold); }
.tiket.warna-hijau  .pita-sesi { background: var(--color-hijau); }
.tiket.warna-kuning .pita-sesi { background: var(--color-kuning); }
.tiket.warna-merah  .pita-sesi { background: var(--color-merah); }

.tiket-kepala {
  background: linear-gradient(150deg, var(--color-night), var(--color-maroon-deep) 68%, var(--color-maroon));
  color: var(--color-paper); padding: 1.9rem 1.8rem 1.7rem; text-align: center; position: relative;
}
.tiket-kepala .kicker {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--text-2xs); letter-spacing: var(--track-wide); text-transform: uppercase;
  color: var(--color-gold); font-weight: 600; margin-bottom: .8rem;
}
.tiket-kepala .kicker::before,
.tiket-kepala .kicker::after { content: ""; width: 16px; height: 1px; background: var(--color-gold); opacity: .7; }
.tiket-kepala h3 { margin: 0; font-size: var(--text-h3); }
.tiket-kepala p { margin: .3rem 0 0; color: rgba(244,236,221,.74); font-size: var(--text-sm); }

.tiket-sobek {
  height: 22px; background: var(--color-card); position: relative;
  border-top: 2px dashed var(--color-rule);
}
.tiket-sobek::before, .tiket-sobek::after {
  content: ""; position: absolute; top: -13px; width: 24px; height: 24px;
  border-radius: 50%; background: var(--color-paper);
}
.tiket-sobek::before { left: -12px; }
.tiket-sobek::after { right: -12px; }

.tiket-badan {
  padding: 0 1.8rem 1.8rem; display: grid;
  grid-template-columns: minmax(0, 1fr) auto; gap: 1.8rem; align-items: start;
}
.tiket-data { display: grid; gap: 1rem; min-width: 0; }
.tiket-data .item span {
  display: block; font-size: var(--text-2xs); letter-spacing: .16em;
  text-transform: uppercase; color: var(--color-ink-2); margin-bottom: .18rem;
}
.tiket-data .item strong { font-size: 1rem; font-weight: 600; overflow-wrap: anywhere; }
.tiket-qr { text-align: center; }
.tiket-qr .kotak {
  width: 148px; height: 148px; display: grid; place-items: center;
  padding: 8px; background: #fff; border: 1px solid var(--color-rule); border-radius: 12px;
}
.tiket-qr .kotak img, .tiket-qr .kotak canvas { display: block; width: 100%; height: 100%; }
.kode-tiket {
  font-family: var(--font-mono); font-size: 1.02rem; letter-spacing: .06em;
  font-weight: 600; color: var(--color-maroon); margin-top: .7rem;
}
.tiket-kaki {
  background: var(--color-paper-2); border-top: 1px solid var(--color-rule);
  padding: 1rem 1.8rem; font-size: var(--text-xs); color: var(--color-ink-2);
}
.aksi-tiket { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; margin-top: 1.8rem; }

/* ============================ FOOTER ============================ */
footer.kaki {
  background: var(--color-night); color: rgba(244,236,221,.6);
  padding: 2.2rem 0; font-size: var(--text-sm); text-align: center;
  border-top: 1px solid var(--color-gold-line);
}
footer.kaki a { color: var(--color-gold); }

/* ============================ RESPONSIVE ============================ */
@media (min-width: 560px) {
  .baris.dua { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 720px) {
  .langkah-teks { font-size: var(--text-xs); }
}

@media (max-width: 880px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 2rem; }
  .detail-acara { padding: .35rem 1.1rem; }
}
@media (max-width: 600px) {
  .wrap { width: min(1100px, 100% - 2rem); }
  .topbar .wrap { padding: .65rem 0; gap: .6rem; }
  .lambang-img { width: 34px; height: 34px; }
  .brand { font-size: .85rem; gap: .55rem; min-width: 0; }
  .brand small { display: none; }
  .topbar nav { flex: 0 0 auto; gap: .2rem; }
  .topbar nav a { padding: .4rem .58rem; font-size: .76rem; }
  .hero-kicker { letter-spacing: .14em; font-size: .68rem; gap: .45rem; }
}
@media (max-width: 620px) {
  .kartu-sesi { grid-template-columns: 1fr; }
  .antrian-info { grid-template-columns: 1fr; gap: 0; }
  .antrian-info > div { padding: .7rem 0; border-bottom: 1px dashed var(--color-rule); }
  .antrian-info > div:last-child { border-bottom: 0; }
  .tiket-badan { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .tiket-data { text-align: left; width: 100%; }
}
@media (max-width: 380px) {
  .langkah-no { width: 32px; height: 32px; font-size: .85rem; }
  .langkah-item + .langkah-item::before { top: 15px; }
}

/* ============================ MOTION SAFETY ============================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  main#pesan > .wrap > section:not([hidden]) { animation: none; }
  .bar-tunggu > span { animation: none; left: 0; width: 100%; opacity: .5; }
}

/* ============================ PRINT (e-ticket only) ============================ */
@media print {
  body { background: #fff; background-image: none; }
  .topbar, .hero, footer.kaki, .aksi-tiket, .bagian-kepala, .langkah, .no-print { display: none !important; }
  main#pesan { padding: 0; }
  .tiket { box-shadow: none; border: 1px solid #ccc; max-width: 100%; }
  .tiket-sobek::before, .tiket-sobek::after { background: #fff; }
  .tiket-kepala, .pita-sesi { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}