@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,500&display=swap');

:root{
  --ink:#16302B; --paper:#F5F0E3; --suds:#E7F3F1;
  --water:#1C6E8C; --water-dark:#154F63;
  --matahari:#F2A93B; --matahari-dark:#a2680f;
  --beres:#4C8C6B; --tunggu:#C1443A;
}

*{ box-sizing:border-box; }
body{
  margin:0; min-height:100vh; background:var(--paper); color:var(--ink);
  font-family:'Plus Jakarta Sans',sans-serif;
}
.display{ font-family:'Baloo 2',sans-serif; }

.container{ max-width:440px; margin:0 auto; padding:0 16px 24px; }

.topbar{ position:sticky; top:0; z-index:10; background:var(--water); color:#fff; }
.topbar-inner{ max-width:440px; margin:0 auto; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; }
.topbar-inner a{ color:#fff; text-decoration:none; display:flex; align-items:center; gap:8px; font-weight:700; font-size:1.1rem; }

.card{ background:#fff; border-radius:20px; padding:20px; margin-bottom:16px; }

.btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:16px; border:none; border-radius:16px;
  font-family:inherit; font-weight:700; font-size:1rem; cursor:pointer;
  transition: transform .12s ease, opacity .12s ease; text-decoration:none;
}
.btn:active{ transform:scale(0.97); }
.btn:disabled{ opacity:.4; cursor:not-allowed; }
.btn-primary{ background:var(--water); color:#fff; }
.btn-accent{ background:var(--matahari); color:var(--ink); }
.btn-ghost{ background:var(--suds); color:var(--water-dark); }
.btn-success{ background:var(--beres); color:#fff; }
.btn-danger{ background:var(--tunggu); color:#fff; }
.btn-dark{ background:var(--ink); color:#fff; }
.btn-sm{ padding:10px; font-size:.85rem; border-radius:12px; }

.badge{ display:inline-flex; align-items:center; gap:6px; font-size:.8rem; font-weight:700; padding:5px 12px; border-radius:999px; }

.row{ display:flex; align-items:center; justify-content:space-between; }
.muted{ color:rgba(22,48,43,0.55); }
.small{ font-size:.8rem; }

.ticket-stub{ background:#fff; border-radius:26px; padding:26px; box-shadow:0 18px 40px -20px rgba(22,48,43,0.45); }
.ticket-number{ font-family:'Baloo 2',sans-serif; text-align:center; font-weight:800; font-size:72px; line-height:1; margin:8px 0; }
.ticket-divider{ position:relative; margin:18px -26px; border-top:2px dashed rgba(22,48,43,0.22); }
.ticket-divider::before,.ticket-divider::after{
  content:''; position:absolute; top:50%; width:26px; height:26px; border-radius:50%;
  background:var(--paper); transform:translateY(-50%);
}
.ticket-divider::before{ left:-13px; }
.ticket-divider::after{ right:-13px; }

.vehicle-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.vehicle-option{ padding:12px; border-radius:12px; background:var(--suds); text-align:left; border:2px solid transparent; cursor:pointer; font-family:inherit; color:var(--ink); }
.vehicle-option.selected{ background:var(--water); color:#fff; }
.vehicle-option .emoji{ font-size:1.4rem; display:block; margin-bottom:4px; }
.vehicle-option .label{ font-size:.9rem; font-weight:700; display:block; }
.vehicle-option .hint{ font-size:.75rem; opacity:.8; display:block; }

input[type=text]{
  width:100%; padding:14px 16px; border-radius:12px; border:2px solid transparent;
  background:var(--suds); font-family:inherit; font-size:1.05rem; font-weight:600; color:var(--ink);
}
input[type=text]:focus{ outline:2px solid var(--water); background:#fff; }
label{ font-size:.9rem; font-weight:700; display:block; margin-bottom:6px; }

.steps{ display:flex; align-items:center; margin-bottom:16px; }
.step{ display:flex; flex-direction:column; align-items:center; width:60px; flex-shrink:0; }
.step-dot{ width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--suds); color:rgba(22,48,43,0.35); font-weight:700; font-size:.8rem; }
.step-dot.done{ background:var(--beres); color:#fff; }
.step-label{ font-size:.75rem; margin-top:4px; color:rgba(22,48,43,0.4); text-align:center; }
.step-label.done{ color:var(--ink); }
.step-line{ flex:1; height:2px; background:rgba(22,48,43,0.12); margin-bottom:18px; }
.step-line.done{ background:var(--beres); }

.progress-bar{ height:8px; border-radius:999px; background:var(--suds); overflow:hidden; }
.progress-bar-fill{ height:100%; background:var(--water); }
.progress-bar-fill.low{ background:var(--tunggu); }

.numpad{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; max-width:280px; margin:0 auto; }
.numpad button{
  font-family:'Baloo 2',sans-serif; font-size:1.5rem; font-weight:700; padding:16px 0;
  border:none; border-radius:16px; background:var(--suds); color:var(--ink); cursor:pointer;
}
.numpad button:active{ transform:scale(0.94); }
.pin-dots{ display:flex; justify-content:center; gap:12px; margin:20px 0; }
.pin-dot{ width:16px; height:16px; border-radius:50%; border:2px solid var(--water); background:var(--suds); }
.pin-dot.filled{ background:var(--water); }
.pin-dot.error{ border-color:var(--tunggu); background:var(--tunggu); }

.shake{ animation:shake .45s; }
@keyframes shake{ 10%,90%{transform:translateX(-2px)} 20%,80%{transform:translateX(3px)} 30%,50%,70%{transform:translateX(-5px)} 40%,60%{transform:translateX(5px)} }

.center{ text-align:center; }
.footer-note{ text-align:center; font-size:.75rem; color:rgba(22,48,43,0.5); padding:16px 24px; }

@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }