:root{--ink:#0a1128;--ink-2:#111a38;--ink-line:#223057;--paper:#fdfcf7;--paper-edge:#efece0;--print:#23272f;--print-fade:#8a8f9c;--rule:#d9d5c6;--biru:#0042cd;--biru-terang:#4d82ff;--kuning:#ffd639;--merah:#f61337;--hijau:#0f7a52;--radius:4px;--tooth:13px;--tooth-h:7px;--sobek-atas:conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--tooth) var(--tooth-h) repeat-x;--sobek-bawah:conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--tooth) var(--tooth-h) repeat-x;--badan-1:linear-gradient(#000 0 0) bottom / 100% calc(100% - var(--tooth-h)) no-repeat;--badan-2:linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--tooth-h)) no-repeat;--font-display:"Bricolage Grotesque", "Plus Jakarta Sans", system-ui, sans-serif;--font-body:"Plus Jakarta Sans", system-ui, -apple-system, sans-serif;--font-mono:"DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:var(--ink);color:var(--paper);font-family:var(--font-body);-webkit-font-smoothing:antialiased;background-image:radial-gradient(900px 500px at 50% -10%,#16224a 0%,#0000 70%);background-attachment:fixed;margin:0;font-size:16px;line-height:1.5}main{max-width:440px;margin:0 auto;padding:28px 16px 64px}:where(a){color:var(--biru-terang)}:focus-visible{outline:3px solid var(--kuning);outline-offset:2px;border-radius:2px}.kop{padding:0 4px 20px}.eyebrow{font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--biru-terang);margin:0 0 10px;font-size:.72rem}.merek{font-family:var(--font-display);letter-spacing:-.02em;text-transform:none;color:var(--paper);font-weight:800}.merek i{color:var(--kuning);font-style:normal}h1{font-family:var(--font-display);letter-spacing:-.025em;color:var(--paper);margin:0;font-size:clamp(2rem,9vw,2.75rem);font-weight:800;line-height:.98}.kop-meta{font-family:var(--font-mono);color:#93a0c4;margin:10px 0 0;font-size:.8rem}.nota{background:var(--paper);color:var(--print);margin-top:14px;padding:22px 18px;position:relative;box-shadow:0 16px 36px -24px #000000e6}.struk{-webkit-mask:var(--sobek-atas), var(--sobek-bawah), var(--badan-2);-webkit-mask:var(--sobek-atas), var(--sobek-bawah), var(--badan-2);mask:var(--sobek-atas), var(--sobek-bawah), var(--badan-2)}.nota.sobek{-webkit-mask:var(--sobek-atas), var(--badan-1);-webkit-mask:var(--sobek-atas), var(--badan-1);mask:var(--sobek-atas), var(--badan-1);background:var(--paper);border-left:3px solid var(--kuning);animation:.52s cubic-bezier(.2,.9,.25,1) robek;transform:rotate(-.55deg)}@keyframes robek{0%{opacity:0;transform:translateY(-14px)rotate(2.5deg)}55%{opacity:1;transform:translateY(3px)rotate(-1.6deg)}to{opacity:1;transform:translateY(0)rotate(-.55deg)}}.nota-head{font-family:var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--print-fade);text-align:center;margin:0 0 14px;font-size:.74rem}.nota-head:before{content:"— "}.nota-head:after{content:" —"}h2{font-family:var(--font-display);letter-spacing:-.015em;color:var(--print);margin:0 0 12px;font-size:1.15rem;font-weight:700}.perf{border-top:2px dashed var(--rule);height:1px;margin:18px -18px;position:relative}.perf:before,.perf:after{content:"";background:var(--ink);border-radius:50%;width:15px;height:15px;position:absolute;top:-8px}.perf:before{left:-8px}.perf:after{right:-8px}.baris{font-family:var(--font-mono);align-items:baseline;gap:8px;padding:7px 0;font-size:.92rem;display:flex}.baris>.nama{flex:0 auto;min-width:0}.baris>.titik{background-image:linear-gradient(90deg, var(--rule) 0 2px, transparent 2px 6px);background-repeat:repeat-x;background-size:6px 1px;flex:auto;align-self:center;min-width:14px;height:1px}.nominal{font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:500}.nominal.utama{font-family:var(--font-display);letter-spacing:-.035em;color:var(--biru);margin:4px 0 2px;font-size:clamp(2.4rem,13vw,3.4rem);font-weight:800;line-height:1;display:block}.pudar{color:var(--print-fade)}.kecil{font-size:.78rem;line-height:1.45}.mono{font-family:var(--font-mono)}.catatan{font-family:var(--font-mono);color:var(--print-fade);margin:12px 0 0;font-size:.76rem}.nama-list{flex-wrap:wrap;gap:8px;display:flex}.stempel{font-family:var(--font-body);color:var(--print);border:1.5px solid var(--rule);cursor:pointer;background:0 0;border-radius:2px;padding:9px 15px;font-size:.95rem;font-weight:600;transition:border-color .14s,background .14s,color .14s}.stempel:hover{border-color:var(--biru);color:var(--biru)}.stempel[aria-pressed=true]{background:var(--kuning);border-color:var(--kuning);color:#2a2100}.tombol{background:var(--biru);color:#fff;width:100%;font-family:var(--font-body);letter-spacing:-.005em;cursor:pointer;border:0;border-radius:2px;margin-top:16px;padding:15px;font-size:1rem;font-weight:700;transition:background .14s,transform 80ms;display:block}.tombol:hover{background:#0036a8}.tombol:active{transform:translateY(1px)}.tombol:disabled{background:var(--print-fade);cursor:default}.salin{border:1.5px solid var(--rule);color:var(--biru);font-family:var(--font-mono);letter-spacing:.04em;cursor:pointer;white-space:nowrap;background:0 0;border-radius:2px;padding:6px 12px;font-size:.78rem}.salin:hover{border-color:var(--biru)}.cap{font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;border:1.5px solid;border-radius:2px;padding:3px 8px;font-size:.68rem;font-weight:500}.cap.unpaid{color:var(--print-fade)}.cap.pending{color:#9a6b00;background:#fff6d9}.cap.paid{color:var(--hijau);background:#e2f4ec}.daftar>li,.daftar>div{border-bottom:1px dashed var(--rule)}.daftar>li:last-child,.daftar>div:last-child{border-bottom:0}ul.daftar{margin:0;padding:0;list-style:none}ul.daftar>li{padding:6px 0}.qris{border:1px solid var(--rule);background:#fff;width:100%;max-width:260px;margin:14px auto 0;padding:8px;display:block}.kaki{font-family:var(--font-mono);letter-spacing:.02em;color:#7f8db8;text-align:center;margin:26px 0 0;font-size:.72rem}.kaki .merek{color:inherit;font-size:inherit}.hero h1{font-size:clamp(2.6rem,13vw,4rem)}.hero .eyebrow.merek{font-size:1.05rem}.hero .sorot{color:var(--kuning)}.hero p{color:#aeb9d8;max-width:34ch;margin:16px 0 0;font-size:1.05rem}.demo{margin-top:26px}.demo .nota{margin-top:0}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}.nota.sobek{transform:none}}