/* Kerangka prototype app EZurance. Hanya token dari tokens.css. */

body.demo { background: var(--surface-sunken); min-height: 100dvh; }

/* ---------- Panggung: ponsel di tengah, panel demo di samping (desktop) ---------- */
.stage { min-height: 100dvh; display: flex; align-items: center; justify-content: center; gap: var(--sp-10); padding: var(--sp-6); }
.device {
  position: relative; height: min(calc(100dvh - var(--sp-12)), 54rem); aspect-ratio: 9 / 19.5;
  border-radius: calc(var(--r-xl) * 2); background: var(--neutral-950); padding: var(--sp-3);
  box-shadow: var(--shadow-sheet);
}
.screen {
  position: relative; width: 100%; height: 100%; border-radius: calc(var(--r-xl) + var(--sp-3)); overflow: hidden;
  background: var(--surface-base); display: flex; flex-direction: column; isolation: isolate;
}
.statusbar { height: var(--sp-8); flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--sp-6); font-size: var(--fs-xs); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; color: var(--text-primary); background: var(--bar-bg, transparent); }
.statusbar.on-brand { color: var(--text-on-brand); }

/* Ponsel sungguhan: layar penuh, tanpa bingkai dan panel. */
@media (max-width: 40rem) {
  .stage { padding: 0; display: block; }
  .device { height: 100dvh; width: 100%; aspect-ratio: auto; border-radius: 0; padding: 0; box-shadow: none; }
  .screen { border-radius: 0; }
  .statusbar { height: auto; padding: var(--sp-1) 0; justify-content: center; background: var(--neutral-950) !important; }
  .statusbar > :not(.proto-tag) { display: none; }
  .panel { display: none; }
}

/* ---------- Panel demo ---------- */
.panel { width: 24rem; display: flex; flex-direction: column; gap: var(--sp-5); }
.panel .card { display: flex; flex-direction: column; gap: var(--sp-3); }
.panel .seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-1); padding: var(--sp-1); border-radius: var(--r-md); background: var(--surface-sunken); }
.panel .seg button { min-height: var(--sp-10); border: 0; border-radius: var(--r-sm); background: transparent; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-secondary); cursor: pointer; }
.panel .seg button[aria-pressed="true"] { background: var(--surface-raised); color: var(--text-brand); }
.panel .jump { display: flex; flex-direction: column; }
.panel .jump a { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-2) 0; min-height: var(--sp-10); text-decoration: none; color: var(--text-primary); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.panel .jump a + a { border-top: var(--border-w) solid var(--border-default); }
@media (max-width: 64rem) { .panel { display: none; } }

/* ---------- Anatomi layar ---------- */
.view { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.view-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.view-body::-webkit-scrollbar { display: none; }
.view-pad { padding: var(--sp-4) var(--gutter) var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-6); }
.view-enter { animation: masuk var(--dur-emph) var(--ease-emph); }
@keyframes masuk { from { opacity: 0; transform: translateX(var(--sp-6)); } to { opacity: 1; transform: none; } }
.view-enter.back { animation-name: kembali; }
@keyframes kembali { from { opacity: 0; transform: translateX(calc(var(--sp-6) * -1)); } to { opacity: 1; transform: none; } }

.topbar { flex: none; display: flex; align-items: center; gap: var(--sp-1); min-height: var(--sp-14); padding: 0 var(--sp-2); background: var(--surface-raised); border-bottom: var(--border-w) solid var(--border-default); }
.topbar .title { flex: 1; min-width: 0; font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar.plain { background: transparent; border-bottom: 0; }
.topbar .sub { padding: 0 var(--sp-4) var(--sp-3); }
.topbar-stack { flex: none; background: var(--surface-raised); border-bottom: var(--border-w) solid var(--border-default); display: flex; flex-direction: column; }
.topbar-stack .topbar { border-bottom: 0; }
.topbar-stack .step-wrap { padding: 0 var(--gutter) var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }

/* ---------- Beranda ---------- */
.home-head { background: var(--header-home-bg); color: var(--text-on-brand); padding: var(--sp-2) var(--gutter) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-5); }
.home-head .brandline { display: flex; align-items: center; gap: var(--sp-2); }
.home-head .brandmark { width: var(--sp-8); height: var(--sp-8); border-radius: var(--r-sm); background: var(--neutral-0); display: grid; place-items: center; flex: none; }
.home-head .brandmark img { width: var(--sp-5); height: auto; }
.home-head .points { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: var(--sp-8); padding: 0 var(--sp-3); border-radius: var(--r-full); background: rgba(255, 255, 255, 0.14); color: var(--text-on-brand); font-size: var(--fs-xs); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; border: 0; cursor: pointer; }
.home-head .points .icon { width: var(--sp-4); height: var(--sp-4); }
.home-sheet { margin-top: calc(var(--sp-4) * -1); border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--surface-base); position: relative; }
.verbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.verbs .verb { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-3); border-radius: var(--r-md); background: rgba(255, 255, 255, 0.12); color: var(--text-on-brand); font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: var(--fw-bold); border: 0; text-align: left; cursor: pointer; }
.verbs .verb small { font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: var(--fw-medium); color: var(--text-on-brand-muted); }

.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.tile { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-lg); background: var(--surface-raised); border: var(--border-w) solid var(--border-default); text-decoration: none; color: inherit; cursor: pointer; text-align: left; }
.tile.feature { grid-column: span 2; flex-direction: row; align-items: center; background: var(--surface-brand-soft); border-color: transparent; }
.tile .price { font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-secondary); }
.tile .price b { color: var(--text-primary); font-variant-numeric: tabular-nums; font-size: var(--fs-sm); }

.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
.quick button { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-2) 0; border: 0; background: transparent; color: var(--text-primary); font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: var(--fw-semibold); cursor: pointer; text-align: center; }
.quick .icon-box { width: var(--sp-12); height: var(--sp-12); border-radius: var(--r-lg); }

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.section { display: flex; flex-direction: column; gap: var(--sp-3); }

.campaign { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-lg); background: var(--accent-warm-soft); color: var(--accent-warm-text); overflow: hidden; cursor: pointer; }
.campaign .mascot { width: var(--sp-20); margin: calc(var(--sp-2) * -1) calc(var(--sp-2) * -1) calc(var(--sp-4) * -1) 0; }

.carousel { display: grid; grid-auto-flow: column; grid-auto-columns: 88%; gap: var(--sp-3); overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); scrollbar-width: none; }
.carousel::-webkit-scrollbar { display: none; }
.carousel > * { scroll-snap-align: start; }
.dots { display: flex; justify-content: center; gap: var(--sp-1); }
.dots span { width: var(--sp-2); height: var(--sp-2); border-radius: var(--r-full); background: var(--border-strong); }
.dots span.on { width: var(--sp-5); background: var(--action-primary); }

/* ---------- Produk ---------- */
.prod-hero { background: var(--surface-brand-soft); padding: var(--sp-5) var(--gutter); display: flex; flex-direction: column; gap: var(--sp-3); }
.plan-grid { display: flex; flex-direction: column; gap: var(--sp-3); }
.plan { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-lg); border: var(--border-w) solid var(--border-default); background: var(--surface-raised); cursor: pointer; text-align: left; }
.plan[aria-checked="true"] { border-color: var(--border-brand); box-shadow: 0 0 0 var(--border-w) var(--border-brand); background: var(--surface-brand-soft); }
.plan .benefits { display: flex; flex-direction: column; gap: var(--sp-2); }
.plan .benefits li { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.plan .benefits li span:last-child { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; text-align: right; }
.stepper-qty { display: flex; align-items: center; gap: var(--sp-3); }
.stepper-qty .icon-btn { border: var(--border-w) solid var(--border-strong); width: var(--sp-10); height: var(--sp-10); }
.stepper-qty .icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---------- Kamera dan OCR (simulasi) ---------- */
.camera { position: absolute; inset: 0; z-index: 60; background: var(--neutral-950); color: var(--neutral-0); display: flex; flex-direction: column; }
.camera .vf { flex: 1; display: grid; place-items: center; padding: var(--sp-6); }
.camera .frame { width: 100%; aspect-ratio: var(--card-ratio); border-radius: var(--r-lg); border: var(--focus-w) dashed rgba(255, 255, 255, 0.7); display: grid; place-items: center; text-align: center; padding: var(--sp-4); }
.camera .frame.ok { border-style: solid; border-color: var(--status-success); }
.camera .bar { padding: var(--sp-5) var(--gutter) var(--sp-8); display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); }
.shutter { width: var(--sp-16); height: var(--sp-16); border-radius: var(--r-full); border: var(--sp-1) solid var(--neutral-0); background: rgba(255, 255, 255, 0.24); cursor: pointer; }

/* ---------- Pembayaran ---------- */
.pay-group { display: flex; flex-direction: column; gap: var(--sp-2); }
.qris { display: grid; place-items: center; padding: var(--sp-5); border-radius: var(--r-lg); background: var(--neutral-0); }
.qris canvas, .qris svg, .qris img { width: 12rem; height: 12rem; }
.va-box { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-md); background: var(--surface-sunken); }
.countdown { font-variant-numeric: tabular-nums; font-weight: var(--fw-bold); color: var(--status-warning-text); }

/* ---------- Sukses ---------- */
.success-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-3); padding: var(--sp-6) 0 var(--sp-2); }
.success-hero .seal { width: var(--sp-16); height: var(--sp-16); border-radius: var(--r-full); background: var(--status-success-soft); color: var(--status-success); display: grid; place-items: center; }
.success-hero .seal .icon { width: var(--sp-8); height: var(--sp-8); }

/* ---------- Akun ---------- */
.profile { display: flex; align-items: center; gap: var(--sp-4); }
.avatar { width: var(--sp-14); height: var(--sp-14); border-radius: var(--r-full); background: var(--action-soft); color: var(--action-on-soft); display: grid; place-items: center; font-weight: var(--fw-heavy); font-size: var(--fs-h2); flex: none; }

/* Label prototype agar tidak dikira aplikasi produksi (di status bar; di ponsel sungguhan menempel di atas). */
.proto-tag { border: 0; cursor: pointer; font-family: inherit; padding: 0 var(--sp-2); border-radius: var(--r-full); background: var(--neutral-950); color: var(--neutral-0); font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: var(--fw-bold); white-space: nowrap; }

.tile.feature .icon-box { background: var(--surface-raised); }

.panel .jump a[aria-current="page"] { color: var(--text-brand); }
#sheet .list-item[aria-current="page"] .li-title, #sheet .list-item[aria-current="page"] { color: var(--text-brand); }

/* Panel persona dan kode K */
.panel { max-height: calc(100dvh - var(--sp-12)); overflow-y: auto; scrollbar-width: thin; }
.pp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.pp { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2); border-radius: var(--r-md); border: var(--border-w) solid var(--border-default); background: var(--surface-raised); cursor: pointer; text-align: left; min-height: var(--target-min); }
.pp img { width: var(--sp-10); height: var(--sp-10); border-radius: var(--r-full); object-fit: cover; flex: none; }
.pp[aria-pressed="true"] { border-color: var(--border-brand); background: var(--surface-brand-soft); box-shadow: 0 0 0 var(--border-w) var(--border-brand); }
.kcode { flex: none; padding: 0 var(--sp-2); border-radius: var(--r-full); background: var(--status-warning-soft); color: var(--status-warning-text); font-size: var(--fs-xs); line-height: var(--lh-sm); font-weight: var(--fw-heavy); font-variant-numeric: tabular-nums; }
/* Foto pada tile produk */
.tile { overflow: hidden; }
.tile .tile-foto { width: calc(100% + var(--sp-8)); margin: calc(var(--sp-4) * -1) calc(var(--sp-4) * -1) 0; aspect-ratio: 16 / 9; object-fit: cover; max-width: none; }