/* Skala jarak konsisten (basis 4px) — presisi & rapi di semua layar */
  :root {
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
    --r-md: 12px; --r-lg: 16px;
    --hijau: #1b5e20; --hijau-tua: #145017;
    --abu-garis: #ced4da; --teks: #212529; --teks-redup: #6c757d;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
  html { touch-action: manipulation; scrollbar-gutter: stable; } /* matikan jeda double-tap zoom; kunci gutter scrollbar */
  body {
    font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    background: #f1f3f5; color: var(--teks); font-size: 15px; line-height: 1.5;
  }
  .wrap {
    max-width: 520px; margin: 0 auto;
    padding: var(--sp-4) var(--sp-4) calc(var(--sp-8) + env(safe-area-inset-bottom));
  }
  header { background: var(--hijau); color: #fff; padding: var(--sp-4); text-align: center; }
  header h1 { font-size: 18px; letter-spacing: .5px; }
  .card {
    background: #fff; border-radius: var(--r-lg); padding: var(--sp-5);
    margin-bottom: var(--sp-4); box-shadow: 0 1px 4px rgba(0,0,0,.08);
  }
  .card > :first-child { margin-top: 0; }
  label { display: block; font-size: 13px; font-weight: 700; color: #37474f; margin: var(--sp-4) 0 var(--sp-2); }
  input[type=text], input[type=number], select {
    width: 100%; font-size: 18px; line-height: 1.35; color: var(--teks);
    padding: 13px var(--sp-3); border: 2px solid var(--abu-garis);
    border-radius: var(--r-md); background: #fff;
  }
  input:focus, select:focus { border-color: var(--hijau); outline: none; }
  .row2 { display: flex; gap: var(--sp-2); }
  .row2 > div { flex: 1; min-width: 0; }
  .btn {
    display: block; width: 100%; border: none; border-radius: var(--r-md);
    padding: var(--sp-4); font-size: 17px; font-weight: 700; line-height: 1.3;
    margin-top: var(--sp-4); cursor: pointer; text-align: center;
    text-decoration: none; transition: transform .08s ease;
  }
  .btn-go { background: var(--hijau); color: #fff; }
  .btn-go:active { background: var(--hijau-tua); }
  .btn-go:disabled { background: #9e9e9e; }
  .btn-warn { background: #ef6c00; color: #fff; }
  .btn:active { transform: scale(.98); } /* umpan balik sentuhan */
  .result {
    display: none; margin-top: var(--sp-4); border-radius: var(--r-md);
    padding: var(--sp-4); font-size: 14px; line-height: 1.6;
  }
  .result.ok { display: block; background: #e8f5e9; border: 1px solid #a5d6a7; }
  .result.warn { display: block; background: #fff8e1; border: 1px solid #ffe082; }
  .result.err { display: block; background: #ffebee; border: 1px solid #ef9a9a; }
  .result table { width: 100%; border-collapse: collapse; margin: var(--sp-2) 0; }
  .result td { padding: 5px 2px; vertical-align: top; }
  .result td.k { color: #555; width: 108px; }
    font-size: clamp(36px, 12vw, 52px); font-weight: 800; color: var(--hijau);
    text-align: center; margin: var(--sp-2) 0; line-height: 1.15; letter-spacing: 1px;
  }
  .muted { color: var(--teks-redup); font-size: 12px; }
  .spin { text-align: center; padding: var(--sp-5) var(--sp-2); color: #555; font-size: 14px; }
  .loader {
    width: 40px; height: 40px; margin: 0 auto var(--sp-3);
    border: 4px solid #c8e6c9; border-top-color: var(--hijau);
    border-radius: 50%; animation: putar .9s linear infinite;
  }
  @keyframes putar { to { transform: rotate(360deg); } }
  footer {
    text-align: center; font-size: 11.5px; color: #9e9e9e;
    margin-top: var(--sp-6); line-height: 1.7; padding: 0 var(--sp-2);
  }
  /* Layar sangat kecil: rapatkan sedikit, tetap nyaman disentuh */
  @media (max-width: 380px) {
    .card { padding: var(--sp-4); }
    header { padding: var(--sp-4) var(--sp-3) var(--sp-3); }
    header h1 { font-size: 16px; }
    .btn { font-size: 16px; }
  }

  /* Karcis digital — persis tiket kertas anjungan */
  .tiket {
    background: #fff; color: #000;
    font-family: Calibri, Helvetica, Arial, sans-serif;
    font-size: 22px; line-height: 1.1;
    text-align: center; padding: 14px 8px;
    border: 1px solid #e0e0e0; border-radius: 4px;
  }
  .tiket .t-head { font-weight: 700; }
  .tiket .t-dash { white-space: nowrap; overflow: hidden; margin: 8px 0; }
  .tiket .t-nomor {
    font-family: Cambria, "Times New Roman", serif;
    font-size: clamp(72px, 26vw, 100px); line-height: .9; margin: 8px 0;
  }
  .tiket .t-ruang { font-weight: 700; font-size: clamp(24px, 8vw, 30px); }
  .tiket .t-ruangval { font-style: italic; }

  /* Karcis tampil mandiri — tanpa bungkus kotak berwarna */
  .result.plain { display: block; background: none; border: none; padding: 0; }
  .result.plain > p { margin: var(--sp-3) 2px var(--sp-2); }
  .tiket .t-meta { display: flex; justify-content: space-between; font-size: 13px; color: #616161; margin: 2px 28px 12px; }