:root{--burgundy:#622A29;--pink:#D49A9F;--light-pink:#EBC3C5;--paper:#F9EEEE;--white:#fff;--ink:#3a2a2a;--red:#E2001A;--k:.55;
--f:'Nunito Sans','Poppins',Arial,sans-serif;--h:'Poppins','Montserrat',Arial,sans-serif}
*{box-sizing:border-box;margin:0;padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact}
body{background:#7b5557;font:700 20px var(--f);color:var(--burgundy);padding:14px 0;overflow-x:auto}
.bar{position:fixed;top:10px;right:12px;z-index:9;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;max-width:calc(100% - 24px)}
.bar>*{border:0;border-radius:20px;padding:8px 16px;background:var(--burgundy);color:#fff;font:700 13px var(--f);cursor:pointer;text-decoration:none;box-shadow:0 2px 8px #0005}
.bar .save{background:#2D7D46}

/* A4 sheet: designed at 1624x2296 px (A4 ratio), scaled with --k */
.stage{width:calc(1624px*var(--k));height:calc(2296px*var(--k));margin:0 auto;position:relative;overflow:hidden;box-shadow:0 8px 30px #0007}
.sheet{position:absolute;left:0;top:0;width:1624px;height:2296px;overflow:hidden;transform:scale(var(--k));transform-origin:0 0;
background:#D89FA4 url(bg-nota.png) 0 0/100% 100% no-repeat}
.sheet>*,.hd>*,.prod>*{position:absolute}
.hd,.prod{left:0;top:0;width:1624px;height:660px}

/* header */
.logo{left:268px;top:86px;width:150px;height:172px;object-fit:contain}
.hd h1{left:0;width:1606px;top:61px;text-align:center;font:800 104px/130px var(--h);letter-spacing:-3px}
.site{left:0;width:1610px;top:159px;text-align:center;font:700 52px/60px var(--h);letter-spacing:-.5px}
.co{left:0;width:1610px;top:219px;text-align:center}
.loc{font:700 28px/32px var(--f)}
.nib{font:700 24px/27px var(--f);color:#3a1d1d}
.addr{font:700 22px/25.5px var(--f);color:#fff}
.ink{left:1149px;top:88px;width:236px;text-align:center}
.ink svg{width:94px;height:104px}
.ink b{display:block;font:800 32px/36px var(--h);letter-spacing:3px}
.ink small{display:block;font:700 10.5px/12px var(--f)}
.hd hr{left:237px;top:338px;width:1151px;height:3px;border:0;background:#F7E6E7;box-shadow:0 5px 0 #8A5558}

/* products */
.ph{left:430px;top:366px;font:800 26px/32px var(--f)}
.cat{width:241px}
.cat h3{height:33px;background:var(--white);border-radius:9px;color:#8B1C4D;font:700 21px/33px var(--f);text-align:center}
.cat ul{list-style:none;padding:3px 8px 0 6px;text-align:right;font:800 17px/17px var(--f);color:#4B2323;white-space:nowrap}
.cat .two{display:grid;grid-template-columns:auto auto;justify-content:space-between}
.cat .sm{font-size:14px;line-height:13.5px}
.cat .sm2{font-size:16px;line-height:16.5px}

/* customer box */
.cust{left:955px;top:400px;width:487px;height:212px;padding:6px 0 0 14px;background:rgba(255,246,246,.88);border-radius:24px}
.fld{display:flex;font:600 36px/38px var(--f);letter-spacing:.5px;color:#6A2C2C}
.lb{flex:none;width:138px}
.val{flex:1;min-width:0;padding:6px 12px 0 8px;border:0;border-bottom:2px dotted rgba(98,42,41,.3);border-radius:0;background:transparent;outline:0;resize:none;overflow:hidden;font:600 26px/32px var(--f);letter-spacing:0;color:#3a1d1d}
.val:focus{border-bottom-color:var(--burgundy);background:rgba(255,255,255,.7)}
.adr{height:86px;padding-top:12px;font-size:21px;line-height:24px}
.cust .via{position:absolute;left:39px;top:172px;display:flex;gap:28px;font:700 29px/36px var(--f)}
.via label{display:flex;align-items:center;gap:12px;cursor:pointer}
.via input{position:absolute;opacity:0}
.mk{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--white);box-shadow:0 0 3px #0002;color:#2DB34A;font-size:38px;line-height:1}
.via input:checked+.mk{background:none;box-shadow:none}
.via input:checked+.mk::before{content:"\2714"}
.via input:focus-visible+.mk{outline:2px solid var(--burgundy);outline-offset:2px}

/* order table */
.ord{left:83px;top:670px;width:1463px;table-layout:fixed;border-collapse:collapse;border:3px solid var(--ink)}
.ord th{height:84px;background:var(--burgundy);color:var(--white);font:800 31px/1.15 var(--f);border:2px solid #4B1F1E}
.ord th:first-child{font-size:21px}
.ord td{height:47.1px;padding:0 12px;background:var(--white);border:2.5px solid var(--ink);font:600 26px/32px var(--f);color:#3a1d1d;white-space:nowrap;overflow:hidden;cursor:text}
.ord td:nth-child(1),.ord td:nth-child(3),.ord td:nth-child(4){text-align:center}
.ord td:nth-child(n+5){text-align:right}
.ord td:focus{outline:3px solid var(--burgundy);outline-offset:-3px;background:#FFF6F6}
/* Harga Satuan & Jumlah: harga awal (dicoret) di kiri, harga akhir di kanan */
.ord td.u,.ord td.j{padding:0}
.pp{display:flex;height:40px}
.pp input{min-width:0;height:100%;padding:0 6px;border:0;border-radius:0;background:transparent;outline:0;text-align:right;font:600 26px/32px var(--f);color:#3a1d1d}
.pp .p0{flex:0 0 46px;padding:0 8px 0 2px;font-size:19px;color:#8D6F6F}
.pp .p0:not(:placeholder-shown){text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--red)}
.pp .p1{flex:1}
.pp input::placeholder{opacity:1;color:transparent;font-size:15px;font-weight:600}
.ord tr:hover .u input::placeholder,.ord tr:focus-within .u input::placeholder{color:rgba(98,42,41,.32)}
.pp input.man{background:rgba(232,163,61,.2)}
.pp input:focus{background:#FFF6F6;box-shadow:inset 0 0 0 2.5px var(--burgundy)}
.row-del{--d:calc(22px/var(--k));z-index:5;display:grid;place-items:center;width:var(--d);height:var(--d);border:0;border-radius:calc(var(--d)/5);background:#F6D5D6;color:var(--burgundy);font-family:var(--f);font-weight:800;font-size:calc(var(--d)*.8);line-height:1;cursor:pointer}
.row-del:hover{background:var(--burgundy);color:var(--white)}
.row-del[hidden]{display:none}
.thx{left:83px;top:1142px;font:italic 400 18.5px/20px var(--f);color:#6A2C2C}
.tot{left:900px;top:1131px;width:646px}
.tot div{display:flex;height:54px}
.tot b{flex:1;align-self:center;text-align:right;padding-right:23px;font:700 37px/40px var(--f)}
.tot .dp{color:var(--red);font-size:39px;font-weight:800}
.tot i{display:flex;align-items:center;gap:10px;width:255px;padding:0 14px 0 16px;background:var(--white);border:solid var(--ink);border-width:0 3px 3px}
.tot i:focus-within{background:#FFF6F6}
.tot em{font:700 24px/1 var(--f);color:#6A2C2C}
.amt{flex:1;min-width:0;height:44px;padding:0;border:0;outline:0;background:transparent;text-align:right;font:700 32px/1 var(--f);color:#3a1d1d}
.amt[readonly]{cursor:default}
.tot div:first-child i{border-top-width:3px}

/* mockup + payment */
.mock{left:186px;top:1231px;width:429px;height:382px;border-radius:22px;background:linear-gradient(var(--white),rgba(255,255,255,.55))}
.mock figcaption{text-align:center;padding-top:10px;font:700 29px/34px var(--f)}
.mock{overflow:hidden}
.mock:not(.has-img){outline:3px dashed rgba(98,42,41,.35);outline-offset:-10px}
.up{position:absolute;inset:0;display:grid;place-items:center;padding-top:44px;border-radius:inherit;cursor:pointer;text-align:center;color:rgba(98,42,41,.6);font:700 26px/32px var(--f)}
.up:hover{background:rgba(98,42,41,.06)}
.up:has(:focus-visible){outline:3px solid var(--burgundy);outline-offset:-6px}
.up input{position:absolute;width:1px;height:1px;opacity:0}
.up small{display:block;font:600 19px/24px var(--f)}
.has-img .up span{display:none}
.mock img{position:absolute;left:14px;top:52px;width:calc(100% - 28px);height:calc(100% - 66px);object-fit:contain;pointer-events:none}
.pay{left:630px;top:1359px;width:780px;text-align:center;font:800 27px/31.5px var(--f);letter-spacing:.8px;white-space:nowrap}
.pay p{margin-bottom:7.5px}
.bk{display:inline-block;margin:0 4px;font:800 21px/1 var(--h);letter-spacing:-.5px}
.bri::before{content:"";display:inline-block;width:24px;height:24px;margin-right:4px;border:3px solid;border-radius:6px;vertical-align:-5px}
.bca{font-style:italic}
.mdr{font-weight:500;font-size:26px;text-transform:lowercase;letter-spacing:0}
.dana{letter-spacing:3px}
.prule{left:647px;top:1638px;width:744px;height:4px;border:0;background:var(--burgundy)}

/* notes + signature */
.note{left:243px;top:1646px}
.note h2{font:800 28px/34px var(--f)}
.note ol{margin:2px 0 0 27px;font:700 23.5px/25.8px var(--f);white-space:nowrap}
.gap{margin:0 26px}
.hk{left:457px;top:1856px;font:800 34px/40px var(--f)}
.tb{left:413px;top:2045px;font:800 34px/40px var(--f)}
.ttd{left:422px;top:1878px;width:423px;pointer-events:none}

/* footer */
.foot{left:0;top:2142px;width:1105px;height:90px;display:flex;align-items:center;gap:36px;padding-left:37px;background:var(--burgundy);border-radius:0 46px 46px 0;color:var(--white);font:800 35px/1 var(--f)}
.foot span{display:flex;align-items:center;gap:10px}
.ic{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--white);color:var(--burgundy);font:800 22px/1 var(--f)}
.ic.sm{font-size:11px}
.pills{left:1128px;top:1998px;width:240px;list-style:none}
.pills li{width:188px;height:36px;margin:0 0 -3px calc(var(--i)*9px);background:var(--burgundy);border-radius:4px;color:var(--white);font:700 19px/36px var(--f);text-align:center;transform:rotate(-12deg) skewX(-6deg)}
.badge{left:1305px;top:2047px;width:190px;height:190px;object-fit:cover;object-position:100% 50%}

/* A4 print: 1624px * .4887 = 793.6px = 210mm */
@page{size:A4 portrait;margin:0}
@media print{
  :root{--k:.4887!important}
  html,body{width:210mm;height:297mm;margin:0;padding:0;overflow:hidden;background:none}
  .stage{margin:0;box-shadow:none}
  .bar{display:none}
  .val{border-bottom-color:transparent!important;background:none!important}
  .row-del{display:none!important}
  .ord td:focus{outline:0;background:var(--white)}
  .up{display:none!important}
  .pp input,.amt{background:none!important;box-shadow:none!important}
  .pp input::placeholder{color:transparent!important}
  .tot i:focus-within{background:var(--white)}
  .mock{outline:0!important}
}