/* LEIF 2026 — Registrasi dan Tiket.
   DW: edit value di bagian 1, Save, lalu refresh preview.
   cqw = persen lebar halaman, bukan lebar monitor.
   Elemen mengikuti aliran halaman agar tidak saling menimpa. */

@font-face {
  font-family: 'Neusharp';
  src: url('assets/fonts/Neusharp-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* 1. PENGATURAN DW — edit ukuran, posisi, jarak, dan warna di sini */
:root {
  color-scheme: light;
  --page-width: 480px;                 /* lebar maksimum halaman */
  --font-family: 'Neusharp', Arial, sans-serif;
  --cyan: #18ddf1;                    /* garis kotak isian */
  --ink: #073c4d;                     /* teks dalam isian */
  --white: #fff;
  --button-start: #0fdae8;
  --button-middle: #2bd1e9;
  --button-end: #0a9af2;

  --header-top: 5.8cqw;               /* jarak sponsor dari atas */
  --sponsors-width: 71.6%;
  --logo-gap: 4.7cqw;                 /* jarak sponsor ke LEIF */
  --logo-width: 34.6%;
  --ticket-logo-width: 34.6%;

  --form-top-gap: 9cqw;               /* lebih besar = form turun */
  --form-width: 81.4%;
  --form-title-size: clamp(17px, 4.6cqw, 22px);
  --title-bottom-gap: 5.5cqw;
  --label-size: clamp(11px, 2.9cqw, 14px);
  --input-text-size: 16px;
  --input-height: 44px;
  --input-radius: 9px;
  --label-input-gap: 5px;
  --field-gap: 3cqw;                  /* jarak antar kelompok isian */
  --submit-height: 52px;
  --submit-size: clamp(18px, 4.8cqw, 23px);
  --submit-side: 7.2%;                /* lebih besar = tombol menyempit */

  --event-copy-gap: 5cqw;             /* tombol ke tanggal */
  --date-width: 60%;
  --tagline-width: 86%;
  --tagline-gap: 3.5cqw;
  --bottom-art-height: 28.3cqw;       /* ruang ornamen bawah */
  --credit-bottom: 12.8cqw;          /* lebih besar = Powered by naik */
  --credit-size: clamp(8px, 2.5cqw, 12px);

  --ticket-top-gap: 9cqw;
  --ticket-width: 76%;
  --success-size: clamp(26px, 7.3cqw, 35px);
  --participant-size: clamp(15px, 3.8cqw, 18px);
  --qr-width: 330px;                  /* QR mengikuti lebar layar */
  --qr-padding: 18px;
  --ticket-button-size: clamp(14px, 3.6cqw, 17px);
  --ticket-button-height: 48px;
  --ticket-button-gap: 12px;
}

/* 2. DASAR HALAMAN */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-height: 100%; background: #092762; }
body {
  min-height: 100%;
  margin: 0;
  color: var(--white);
  background: linear-gradient(180deg, #178fc7, #0c2d6c);
  font-family: var(--font-family);
  font-weight: 700;
}
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; cursor: pointer; }
button:focus-visible, input:focus-visible {
  outline: 3px solid #ffe05a;
  outline-offset: 3px;
}
.app {
  container-type: inline-size;
  width: min(100%, var(--page-width));
  min-height: 100svh;
  margin: 0 auto;
  overflow: hidden;
  background: #174889;
  box-shadow: 0 0 60px rgba(0, 0, 0, .28);
}
.screen {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: max(100svh, 177.78cqw);
}
.screen-background {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* 3. SPONSOR DAN LOGO LEIF */
.event-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-top: var(--header-top);
}
.brand, .event-copy img, .bottom-layer {
  display: block;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.sponsors { width: var(--sponsors-width); }
.event-logo { width: var(--logo-width); margin-top: var(--logo-gap); }
.ticket-logo { width: var(--ticket-logo-width); margin-top: var(--logo-gap); }

/* 4. FORM REGISTRASI */
.registration-panel {
  width: var(--form-width);
  margin-top: var(--form-top-gap);
}
.registration-panel h1, .ticket-panel h1 {
  margin: 0;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}
.registration-panel h1 {
  margin-bottom: var(--title-bottom-gap);
  font-size: var(--form-title-size);
}
#registration-form { display: grid; gap: var(--field-gap); }
.field { display: grid; gap: var(--label-input-gap); min-width: 0; }
.field label {
  padding-left: 7px;
  font-size: var(--label-size);
  line-height: 1.3;
}
.field input {
  width: 100%;
  min-width: 0;
  min-height: var(--input-height);
  padding: 10px 12px;
  border: 1.5px solid var(--cyan);
  border-radius: var(--input-radius);
  color: var(--ink);
  background: #fff;
  font-size: var(--input-text-size);
}
.field input:focus { border-color: #ffe45c; }
.field input[aria-invalid='true'] {
  border-color: #ffde4f;
  box-shadow: 0 0 0 3px rgba(255, 222, 79, .25);
}
.submit-button {
  min-height: var(--submit-height);
  margin: 1.5cqw var(--submit-side) 0;
  padding: 8px;
  border: 1.5px solid #fff;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(90deg, var(--button-start), var(--button-middle) 47%, var(--button-end));
  font-size: var(--submit-size);
}
.submit-button:active { transform: translateY(1px); }
.form-status {
  margin: 0;
  color: #fff8be;
  font-size: 11px;
  line-height: 1.6;
  text-align: center;
}
.form-status:empty { display: none; }

/* 5. TANGGAL, TAGLINE, ORNAMEN BAWAH */
.event-copy {
  display: grid;
  justify-items: center;
  gap: var(--tagline-gap);
  width: 100%;
  margin-top: var(--event-copy-gap);
}
.event-date { width: var(--date-width); }
.event-title { width: var(--tagline-width); }
.art-footer {
  position: relative;
  width: 100%;
  height: var(--bottom-art-height);
  flex-shrink: 0;
  margin-top: auto;
}
.bottom-layer { position: absolute; bottom: 0; left: 0; width: 100%; }
.corners { mix-blend-mode: lighten; }
.border { height: 2.8cqw; object-fit: cover; }
.powered-by {
  position: absolute;
  z-index: 2;
  right: 8%;
  bottom: var(--credit-bottom);
  left: 8%;
  margin: 0;
  color: rgba(255, 255, 255, .82);
  font-size: var(--credit-size);
  line-height: 1.5;
  text-align: center;
  text-shadow: 0 2px 5px rgba(4, 24, 70, .65);
}

/* 6. TIKET PESERTA */
.ticket-panel {
  width: var(--ticket-width);
  margin-top: var(--ticket-top-gap);
  text-align: center;
}
.ticket-panel h1 { font-size: var(--success-size); }
.ticket-owner { display: grid; gap: 5px; margin: 16px 0; }
.ticket-owner strong {
  font-size: var(--participant-size);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.ticket-owner span { color: #d9fbff; font-size: 11px; letter-spacing: .06em; }
.qr-card {
  display: grid;
  place-items: center;
  width: min(100%, var(--qr-width));
  aspect-ratio: 1;
  margin: 0 auto;
  padding: var(--qr-padding);
  background: #fff;
}
#ticket-qr { width: 100%; aspect-ratio: 1; }
#ticket-qr canvas, #ticket-qr img {
  display: block;
  width: 100% !important;
  height: auto !important;
}
.ticket-actions { display: grid; gap: var(--ticket-button-gap); margin-top: 6cqw; }
.ticket-button {
  min-height: var(--ticket-button-height);
  padding: 10px;
  border: 1.5px solid var(--cyan);
  border-radius: 9px;
  color: #075283;
  background: #fff;
  font-size: var(--ticket-button-size);
}
.ticket-button:disabled { color: #516577; background: #e4eaf0; border-color: #a7bdce; cursor: not-allowed; }
.ticket-action-note { margin: 0; color: #e6fbff; font-size: 10px; line-height: 1.7; text-align: center; }
.ticket-message { margin: 12px 0 0; color: #e6fbff; font-size: 10px; line-height: 1.7; overflow-wrap: anywhere; }
.register-another {
  min-height: 44px;
  padding: 7px;
  border: 0;
  color: #fff;
  background: transparent;
  font-size: 11px;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* 7. PREVIEW DESKTOP */
@media (min-width: 700px) {
  body { padding: 24px 0; }
  .app { border-radius: 20px; }
}

/* 8. ANIMASI TUNGGU — jeda demo di app.js: demoTransitionMs */
.loading-overlay {
  position: fixed;
  z-index: 50;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(4, 25, 64, .76);
  backdrop-filter: blur(5px);
  animation: loading-appear .2s ease-out;
}
.loading-panel {
  display: grid;
  justify-items: center;
  width: min(100%, 320px);
  padding: 30px 22px;
  border: 1px solid rgba(24, 221, 241, .65);
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(160deg, #1479b0, #113873);
  box-shadow: 0 20px 60px rgba(0, 15, 45, .35);
  text-align: center;
}
.loading-panel:focus { outline: none; }
.loading-logo { display: block; width: 126px; height: auto; margin-bottom: 24px; }
.loading-spinner {
  display: block;
  width: 42px;
  height: 42px;
  border: 3px solid rgba(255, 255, 255, .2);
  border-top-color: #ffe05a;
  border-right-color: var(--cyan);
  border-radius: 50%;
  animation: loading-spin 1s linear infinite;
}
.loading-title { margin: 22px 0 8px; font-size: 16px; line-height: 1.5; }
.loading-description { margin: 0; color: #d6f7ff; font-size: 11px; line-height: 1.6; }
.submit-button:disabled { opacity: .65; cursor: wait; }
@keyframes loading-spin { to { transform: rotate(360deg); } }
@keyframes loading-appear { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .loading-overlay, .loading-spinner { animation: none; }
}
/* Keterangan penggunaan data: tetap ringkas pada layar HP. */
.privacy-note { font-family: sans-serif; font-size: 2cqw; line-height: 1.5; color: white; margin: 1.2em 0; }