/* Arah 3B · Nota Warung — nota kontan rangkap, pulpen biru, stempel ungu */
:root {
  --wood: #7b5c40;
  --wood-light: #a8835e;
  --form: #b83227;
  --pen: #1f3fb0;
  --paper: #fbf8ef;
  --carbon: #f3df7a;
  --carbon-ink: #3d3a8c;
  --stamp: #6e32a0;
  --kw: #eef3ea;
  --kw-line: #3f7a5a;
  --cream: #f8ead2;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --print: "Archivo Narrow", "Arial Narrow", sans-serif;
  --hand: "Nanum Pen Script", cursive;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--print); color: var(--form); overflow: hidden;
  background: radial-gradient(140% 70% at 30% 15%, var(--wood-light), var(--wood) 70%) fixed, var(--wood); }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .28; background: repeating-linear-gradient(8deg, rgba(0, 0, 0, .16) 0 2px, transparent 2px 9px), repeating-linear-gradient(8deg, transparent 0 40px, rgba(255, 255, 255, .05) 40px 46px); }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--cream); outline-offset: 3px; }
[hidden] { display: none !important; }

.stage { position: relative; height: 100dvh; max-width: 440px; margin: 0 auto; }
.scene { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; overflow-y: auto; overflow-x: hidden;
  padding: max(20px, env(safe-area-inset-top)) 16px max(22px, env(safe-area-inset-bottom));
  opacity: 0; visibility: hidden; transform: translateY(20px); transition: opacity .6s var(--ease), transform .6s var(--ease), visibility 0s .6s; }
/* tetap bisa digulir di layar pendek, tapi tanpa scrollbar */
.scene { scrollbar-width: none; }
.scene::-webkit-scrollbar { display: none; }
.scene.active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

.table-note { margin: 4px 0 14px; padding: 0 52px; color: var(--cream); font-size: 17px; font-weight: 600; text-align: center; min-height: 24px; }
.hand-title { margin: 6px 0 0; font: 400 38px/1 var(--hand); color: var(--cream); }
.hand-hint { margin: 16px 0 0; font: 400 26px/1.1 var(--hand); color: var(--cream); text-align: center; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 0 26px; border-radius: 6px;
  background: var(--paper); color: var(--pen); font: 400 30px/1 var(--hand); text-decoration: none;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .25), 0 10px 20px rgba(0, 0, 0, .2); transform: rotate(-1.5deg); transition: transform .15s; animation: up .5s var(--ease) both; }
.btn:active { transform: rotate(-1.5deg) translateY(3px); }
.btn.ghost { background: transparent; color: var(--cream); box-shadow: inset 0 0 0 2px rgba(248, 234, 210, .5); transform: rotate(1deg); }
@keyframes up { from { opacity: 0; transform: translateY(10px); } }
.dock { margin-top: 18px; min-height: 60px; display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; }
.dock-hint { margin: 0; color: var(--cream); font: 400 25px/1.1 var(--hand); text-align: center; animation: up .5s var(--ease) both; }

/* ---------- Buku nota ---------- */
.pad-fit { width: min(350px, 100%); flex-shrink: 0; transform-origin: 50% 0; }
.pad { position: relative; width: 100%; }
.sheet { position: relative; background: var(--paper); box-shadow: 0 14px 28px rgba(0, 0, 0, .3); }
.white { z-index: 2; transform: rotate(-1.4deg); transition: transform 1s var(--ease), opacity 1s; }
.carbon { position: absolute; inset: 0; z-index: 1; background: var(--carbon); transform: rotate(2.6deg) translate(6px, 6px); transition: transform .9s var(--spring); overflow: hidden; }
.carbon .form { color: rgba(184, 50, 39, .55); }
.carbon .hw, .carbon .pen { color: var(--carbon-ink); filter: blur(.35px); opacity: .9; clip-path: none !important; }
.carbon .stamp { opacity: 0 !important; }
.carbon .perf { visibility: hidden; }
.pad.torn .white { transform: translate(40px, -130%) rotate(-14deg); opacity: 0; pointer-events: none; }
.pad.torn .carbon { position: relative; transform: rotate(-.6deg); z-index: 3; }

.perf { position: relative; height: 34px; border-bottom: 2px dotted rgba(123, 92, 64, .55); }
.perf::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 10px; background: radial-gradient(circle 4px at 8px 5px, var(--wood) 98%, transparent) 0 0 / 16px 10px repeat-x; opacity: .9; }
.cut { position: absolute; left: 0; bottom: -4px; height: 8px; width: 0; background: linear-gradient(transparent 40%, var(--wood) 40% 60%, transparent 60%); }
.tear-handle { position: absolute; z-index: 3; left: -6px; top: 6px; width: 56px; height: 46px; border-radius: 23px; background: var(--pen); box-shadow: 0 4px 0 #142a78, 0 8px 14px rgba(0, 0, 0, .25);
  display: grid; place-items: center; touch-action: none; animation: nudge 1.4s ease-in-out infinite; }
.tear-handle span { width: 22px; height: 14px; border-left: 3px solid #fff; border-right: 3px solid #fff; }
.tear-handle.drag { animation: none; }
@keyframes nudge { 50% { transform: translateX(14px); } }

.form { padding: 10px 18px 20px; color: var(--form); }
.head { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 2px solid currentColor; padding: 4px 0 8px; }
.head h1 { margin: 0; font-weight: 700; font-size: 32px; letter-spacing: .06em; }
.head small { font-size: 15px; font-weight: 600; }
.field { display: flex; gap: 8px; align-items: baseline; margin-top: 10px; font-size: 15px; font-weight: 600; white-space: nowrap; }
.line { flex: 1; min-width: 0; border-bottom: 1px dotted currentColor; padding-left: 6px; min-height: 30px; }
.hw { display: inline-block; font: 400 30px/1 var(--hand); color: var(--pen); white-space: nowrap; clip-path: inset(0 100% 0 0); transition: clip-path var(--t, .8s) linear; }
.hw.on { clip-path: inset(-8px -8px -8px -8px); }
table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 14px; }
th { border: 1.5px solid currentColor; padding: 5px 3px; font-weight: 700; }
td { border-left: 1.5px solid currentColor; border-right: 1.5px solid currentColor; border-bottom: 1px solid rgba(184, 50, 39, .35); height: 40px; padding: 0 6px; vertical-align: middle; }
td.q { text-align: center; width: 48px; } td.p { text-align: right; width: 90px; }
td .hw { font-size: 25px; white-space: normal; line-height: .9; }
tbody tr:last-child td { border-bottom: 1.5px solid currentColor; }
.total { display: flex; justify-content: flex-end; align-items: baseline; gap: 8px; margin-top: 12px; font-weight: 700; font-size: 16px; }
.total .line { flex: 0 1 auto; min-width: 150px; border-bottom: 3px double currentColor; }
.total .hw { font-size: 36px; }
.foot { position: relative; display: flex; justify-content: space-between; align-items: flex-end; margin-top: 18px; min-height: 120px; }
.sign { font-size: 14px; font-weight: 600; display: flex; flex-direction: column; min-width: 0; max-width: 100%; }
.sign .sig { font-size: 40px; transform: rotate(-6deg); margin-top: 6px; }
.stamp { position: absolute; right: 0; bottom: 0; width: 132px; height: 132px; border: 4px solid var(--stamp); border-radius: 50%; color: var(--stamp);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-weight: 700; font-size: 12px; line-height: 1.15; padding: 10px;
  mix-blend-mode: multiply; opacity: 0; transform: rotate(-18deg) scale(2.4); pointer-events: none; }
.stamp::before { content: ""; position: absolute; inset: 6px; border: 1.5px solid currentColor; border-radius: 50%; }
.stamp b { font-size: 30px; letter-spacing: .08em; margin: 2px 0; }
.stamp.on { animation: stampIn .4s cubic-bezier(.5, 0, .7, 1.3) forwards; }
@keyframes stampIn { to { opacity: .85; transform: rotate(-18deg) scale(1); } }
.pad.thud { animation: thud .3s; }
@keyframes thud { 40% { transform: translateY(4px) scale(.99); } }

/* ---------- Lampiran ---------- */
.deck { position: relative; width: min(300px, 82vw); aspect-ratio: 300 / 420; margin: 22px 0 24px; flex-shrink: 0; }
.card { position: absolute; inset: 0; background: var(--paper); padding: 12px 12px 0; box-shadow: 0 14px 28px rgba(0, 0, 0, .3); display: flex; flex-direction: column; cursor: grab; user-select: none; -webkit-user-select: none; }
.card:nth-last-child(2) { transform: rotate(4deg) translate(8px, 6px); }
.card:nth-last-child(n+3) { transform: rotate(-5deg) translate(-8px, 10px); }
.card .staple { position: absolute; top: 6px; left: 50%; width: 46px; height: 7px; margin-left: -23px; border-radius: 2px; background: linear-gradient(#d8d8d8, #8f8f8f); box-shadow: 0 1px 1px rgba(0, 0, 0, .3); z-index: 2; }
.card .ph { flex: 1; min-height: 0; background: #ccc center / cover no-repeat; pointer-events: none; }
.card .meta { padding: 10px 4px 14px; pointer-events: none; }
.card .t { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; color: var(--form); font-weight: 700; font-size: 15px; }
.card .t small { font-weight: 600; font-size: 13px; white-space: nowrap; }
.card .nt { font: 400 26px/1.05 var(--hand); color: var(--pen); margin-top: 4px; }
.card .badge { position: absolute; top: 26px; padding: 2px 12px; border: 3px solid; border-radius: 6px; font-weight: 700; font-size: 22px; letter-spacing: .08em; opacity: 0; transition: opacity .15s; pointer-events: none; mix-blend-mode: multiply; }
.card .badge.keep { left: 22px; color: var(--stamp); transform: rotate(-12deg); }
.card .badge.skip { right: 22px; color: var(--form); transform: rotate(12deg); }
.card[data-dir="right"] .badge.keep, .card[data-dir="left"] .badge.skip { opacity: .9; }
.deck-actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.round { width: 84px; height: 54px; border-radius: 6px; background: var(--paper); color: var(--form); font: 400 28px/1 var(--hand); box-shadow: 0 3px 0 rgba(0, 0, 0, .25); transform: rotate(-3deg); }
.round.keep { color: var(--stamp); transform: rotate(3deg); }
.round:active { transform: translateY(3px); }
.saved { min-width: 96px; text-align: center; font: 400 26px/1 var(--hand); color: var(--cream); }
.saved.bump { animation: bump .35s var(--spring); }
@keyframes bump { 50% { transform: scale(1.3); } }

/* ---------- Kwitansi ---------- */
#kwScene { justify-content: safe center; }
.kw { position: relative; width: min(350px, 100%); flex-shrink: 0; padding: 18px 18px 20px; color: var(--kw-line); transform: rotate(1.2deg);
  background: repeating-radial-gradient(circle at 20% 30%, transparent 0 6px, rgba(63, 122, 90, .07) 6px 7px), var(--kw);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .3); animation: up .6s var(--ease) both; }
.kw::before { content: ""; position: absolute; inset: 7px; border: 1.5px solid rgba(63, 122, 90, .5); pointer-events: none; }
.kw-head { display: flex; justify-content: space-between; align-items: baseline; }
.kw-head h2 { margin: 0; font-weight: 700; font-size: 26px; letter-spacing: .3em; }
.kw-head small { font-size: 14px; font-weight: 600; }
.kw-row { margin-top: 12px; font-size: 13px; font-weight: 600; }
.kw-row span { display: block; }
.pen { display: block; font: 400 28px/1.05 var(--hand); color: var(--pen); border-bottom: 1px dotted rgba(63, 122, 90, .6); padding: 2px 4px 4px; }
.pen.shade { background: rgba(63, 122, 90, .12); }
.kw-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; margin-top: 14px; }
.rp { font-weight: 700; font-size: 16px; padding: 8px 10px; border: 1.5px solid currentColor; background: rgba(63, 122, 90, .1); min-width: 100px; display: flex; align-items: baseline; gap: 6px; }
.rp .pen { border: 0; font-size: 34px; padding: 0; }
.kw-sign { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.place { font-size: 12.5px; font-weight: 600; }
.materai-slot { position: relative; width: 108px; height: 84px; border: 1.5px dashed rgba(63, 122, 90, .7); display: grid; place-items: center; }
.slot-txt { font-size: 12px; font-weight: 600; line-height: 1.15; padding: 4px; color: var(--kw-line); }
.materai { position: absolute; inset: -4px -6px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(135deg, #f7b6c2, #e86a86 60%, #c9435f);
  color: #5a0f22; font-weight: 700; text-align: center; line-height: 1.05; opacity: 0; transform: translateY(-60px) rotate(-20deg) scale(1.4);
  border: 3px dotted #fff6f8; outline: 1px solid rgba(90, 15, 34, .25); outline-offset: -7px; box-shadow: 0 3px 6px rgba(0, 0, 0, .2); }
.materai i { font-style: normal; font-size: 12px; line-height: 1; }
.materai b { font-size: 18px; margin: 2px 0; }
.materai-slot.on .materai { animation: stick .45s var(--spring) forwards; }
@keyframes stick { to { opacity: 1; transform: rotate(-4deg); } }
.sig-zone { position: relative; width: 150px; height: 64px; margin-top: -22px; z-index: 2; touch-action: none; }
.sig-zone[disabled] { cursor: default; }
.sig-zone svg { width: 100%; height: 100%; overflow: visible; }
#sigPath { fill: none; stroke: var(--pen); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 600; stroke-dashoffset: 600; }
.sig-name { display: block; margin-top: -4px; border-top: 1px solid currentColor; font-size: 12.5px; font-weight: 600; color: var(--kw-line); }
.sig-zone:not([disabled]) { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { filter: drop-shadow(0 0 6px rgba(31, 63, 176, .5)); } }
.end { margin-top: 18px; text-align: center; color: var(--cream); max-width: 340px; animation: up .7s var(--ease) both; }
.end h2 { margin: 0; font: 400 40px/1 var(--hand); }
.end p { margin: 10px 0 0; font-size: 16px; line-height: 1.55; font-weight: 500; }
.end-actions { display: flex; gap: 14px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }

.os-music { position: fixed; z-index: 50; top: max(12px, env(safe-area-inset-top)); right: 12px; width: 44px; height: 44px; border-radius: 50%;
  background: var(--paper); color: var(--pen); display: grid; place-items: center; box-shadow: 0 3px 0 rgba(0, 0, 0, .25); }
.os-music.on svg { animation: spin 4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .2s !important; }
}