:root{--o:#E8791D;--od:#B85A0C;--ot:#FFF4E8;--ink:#2B1B0E;--mut:#7A6A5B;--ln:#F0DCC8;--ok:#1D8A4C;--okb:#DFF3E6;--er:#C13333;--erb:#FBE1E1;--wn:#B4790A;--wnb:#FCEACB;--in:#2E74B0;--inb:#EAF3FB;--bl:#1F4E79;--bl2:#2E74B0;--blt:#EEF4FA}
*{box-sizing:border-box}
body{margin:0;font:15px/1.5 "Segoe UI",system-ui,-apple-system,Roboto,sans-serif;background:#FFFCF9;color:var(--ink)}
a{color:var(--bl2)}
h1{font-size:1.35rem;margin:.2rem 0 1rem}h2{font-size:1.05rem;margin:0 0 .6rem}
code{background:var(--ot);padding:1px 6px;border-radius:4px;font-size:.88em}
/* header & nav */
.hd{background:#fff;border-bottom:1px solid var(--ln);box-shadow:0 2px 0 var(--o);display:flex;align-items:center;gap:8px 14px;padding:8px 16px;flex-wrap:wrap;position:sticky;top:0;z-index:5}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand img{width:42px;height:42px}.brand b{color:var(--bl);display:block;font-family:Georgia,"Times New Roman",serif;font-weight:600;font-size:1.08rem;line-height:1.2}.brand small{color:var(--mut)}
.hd nav{display:flex;gap:2px;margin-left:auto;overflow-x:auto;max-width:100%;scrollbar-width:none}
.hd nav::-webkit-scrollbar{display:none}
.hd nav a{padding:7px 11px;border-radius:8px;color:var(--ink);text-decoration:none;white-space:nowrap;font-size:.92rem}
.hd nav a:hover{background:var(--ot)}.hd nav a.on{background:var(--bl);color:#fff}
.hd nav a.x{color:var(--mut)}
@media(max-width:820px){.hd nav{margin-left:0;flex-basis:100%}}
main{max-width:1080px;margin:0 auto;padding:18px 16px 50px}
footer{text-align:center;color:var(--mut);font-size:.8rem;padding:0 0 24px}
/* komponen */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:16px}
.stat{background:#fff;border:1px solid var(--ln);border-left:5px solid var(--bl2);border-radius:8px;padding:10px 14px;text-decoration:none;color:inherit}
.stat b{display:block;font-size:1.8rem;line-height:1.1;color:var(--bl)}.stat span{color:var(--mut);font-size:.85rem}
.stat.er{border-left-color:var(--er)}.stat.er b{color:var(--er)}.stat.ok{border-left-color:var(--ok)}.stat.ok b{color:var(--ok)}
.box{background:#fff;border:1px solid var(--ln);border-radius:10px;padding:14px;margin-bottom:16px}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
label{display:block;font-size:.84rem;color:var(--mut);margin:8px 0 3px}
input,select{width:100%;padding:9px 10px;border:1px solid #dcc7b0;border-radius:7px;font:inherit;background:#fff;color:var(--ink)}
input:focus,select:focus{outline:2px solid var(--bl2);border-color:var(--bl2)}
input[type=checkbox]{width:auto}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:4px 12px}
.ig{display:flex;gap:6px;align-items:stretch}.ig input,.ig select{flex:1;min-width:0}
button,.btn{background:var(--o);color:#fff;border:0;padding:9px 16px;border-radius:7px;font:inherit;cursor:pointer;text-decoration:none;display:inline-block;white-space:nowrap}
button:hover,.btn:hover{background:var(--od)}
.sec{background:#fff;color:var(--bl);border:1px solid #9DB9D6}.sec:hover{background:var(--blt)}
.sm{padding:4px 10px;font-size:.84rem}.dg{background:var(--er)}.dg:hover{background:#9c2626}
.il{display:inline}
table{width:100%;border-collapse:collapse;font-size:.92rem;background:#fff}
th{background:var(--blt);text-align:left;padding:8px;color:var(--bl);white-space:nowrap}
td{padding:8px;border-bottom:1px solid var(--ln);vertical-align:middle}
.tw{overflow-x:auto;border:1px solid var(--ln);border-radius:10px;margin-bottom:12px}.tw table{margin:0}
.msg{padding:10px 14px;border-radius:8px;margin-bottom:14px;background:var(--okb);border:1px solid var(--ok)}
.msg.err{background:var(--erb);border-color:var(--er)}
.b{padding:2px 9px;border-radius:99px;font-size:.78rem;background:var(--ot);color:var(--od);white-space:nowrap}
.b.ok{background:var(--okb);color:var(--ok)}.b.er{background:var(--erb);color:var(--er)}.b.wn{background:var(--wnb);color:var(--wn)}.b.in{background:var(--inb);color:var(--in)}
.pg{display:flex;gap:10px;align-items:center;justify-content:center;color:var(--mut);margin:12px 0}
.mut{color:var(--mut)}.r{text-align:right}.c{text-align:center}
.bar{display:flex;align-items:flex-end;gap:8px;height:130px;padding-top:6px}
.bar div{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;font-size:.78rem;color:var(--mut)}
.bar i{display:block;width:100%;max-width:38px;background:var(--bl2);border-radius:4px 4px 0 0;min-height:2px}
.bar b{color:var(--ink);font-weight:600}
details>summary{cursor:pointer;color:var(--bl);font-weight:600;margin-bottom:6px}
.tabs{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.tabs a{padding:6px 14px;border-radius:99px;border:1px solid var(--ln);text-decoration:none;color:var(--ink);background:#fff}.tabs a.on{background:var(--bl);color:#fff;border-color:var(--bl)}
.bk{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.bk>div{background:#fff;border:1px solid var(--ln);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:3px;transition:box-shadow .15s,transform .15s}.bk>div:hover{box-shadow:0 8px 22px rgba(43,27,14,.08);transform:translateY(-1px)}
.bk h3{margin:0;font-size:1rem;line-height:1.3}.bk small{color:var(--mut)}
/* latar halus (login, tamu, katalog) */
.pola{min-height:100vh;background:radial-gradient(900px 420px at 50% -80px,#FFE6CC 0%,rgba(255,230,204,0) 70%) no-repeat,radial-gradient(700px 360px at 100% 0,#E3EEF9 0%,rgba(227,238,249,0) 70%) no-repeat,#FFFCF9}
.pola::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.11;-webkit-mask-image:radial-gradient(ellipse 55% 52% at 50% 40%,rgba(0,0,0,.12),#000 100%);mask-image:radial-gradient(ellipse 55% 52% at 50% 40%,rgba(0,0,0,.12),#000 100%);background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='230' height='230' viewBox='0 0 220 220' fill='none' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><g stroke='%231F4E79'><path d='M18 44q22-12 42 0v34q-20-12-42 0zM60 44q22-12 42 0v34q-20-12-42 0z'/><path d='M180 120l4 10 11 1-8 7 3 11-10-6-10 6 3-11-8-7 11-1z'/><path d='M120 190q8-10 16 0t16 0 16 0'/><path d='M150 90q6-6 12 0M100 110l6 6M106 110l-6 6'/></g><g stroke='%23E8791D'><path d='M140 26l30 30-9 9-30-30zM131 35l-5 15 15-5'/><circle cx='60' cy='150' r='14'/><path d='M53 166h14M55 172h10M60 136v-6'/><path d='M20 205h30v-12H20zM24 193v-6h24v6'/></g></svg>")}
.pola .hd,.pola main{position:relative;z-index:1}.pola main{padding-bottom:40px}
.pola .box{box-shadow:0 10px 34px rgba(43,27,14,.08);border-color:var(--ln);border-radius:14px}
.seg{display:inline-flex;background:#fff;border:1px solid var(--ln);border-radius:99px;padding:3px;box-shadow:0 4px 14px rgba(43,27,14,.06);margin-top:22px}.seg a{padding:7px 22px;border-radius:99px;text-decoration:none;color:var(--bl);font-weight:600;font-size:.92rem}.seg a:hover{background:var(--blt)}.seg a.on{background:var(--bl);color:#fff}
.hero{text-align:center;margin:18px auto 22px;max-width:640px}.hero h1{color:var(--bl);font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:2.2rem;letter-spacing:-.01em;margin:0 0 .5rem}.hero h1::after{content:"";display:block;width:56px;height:2px;background:linear-gradient(90deg,var(--o) 50%,var(--bl2) 50%);margin:.7rem auto 0}.hero p{margin:0}
/* layar tamu */
.kiosk main{max-width:560px;text-align:center}
.kjam{font-size:2.6rem;font-weight:700;color:var(--bl);line-height:1}.ktgl{color:var(--mut);margin-bottom:8px}
#cam{width:100%;max-width:380px;margin:10px auto;border-radius:12px;overflow:hidden;background:#fff;min-height:60px}
.kres{margin:12px 0;padding:18px 14px;border-radius:14px;background:#fff;border:2px dashed var(--o);transition:background .15s}
.kres b{display:block;font-size:1.5rem;line-height:1.25}.kres span{color:var(--mut)}
.kres.in{background:var(--okb);border:2px solid var(--ok)}.kres.out{background:var(--inb);border:2px solid var(--in)}.kres.err{background:var(--erb);border:2px solid var(--er)}
.kres.in span,.kres.out span,.kres.err span{color:var(--ink)}
.kfoot{margin-top:14px;color:var(--mut);font-size:.9rem;display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap}
/* kamera modal */
.ov{position:fixed;inset:0;background:rgba(43,27,14,.82);z-index:50;display:flex;align-items:center;justify-content:center}
.ovb{width:min(92vw,420px);background:#fff;border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:10px}
/* cetak: kartu & label */
.sheet{display:flex;flex-wrap:wrap;gap:8px}
.kartu{width:85.6mm;height:54mm;border:1px solid #999;border-radius:3mm;overflow:hidden;display:flex;flex-direction:column;background:#fff;break-inside:avoid}
.kartu .kh{background:var(--o);color:#fff;padding:2mm 3mm;display:flex;gap:2mm;align-items:center;font-size:8pt;line-height:1.2}
.kartu .kh img{width:9mm;height:9mm;background:#fff;border-radius:50%;padding:.5mm}
.kartu .kb{flex:1;display:flex;align-items:center;justify-content:space-between;padding:2mm 3mm;gap:3mm}
.kartu .kb div:first-child{min-width:0}.kartu b{font-size:11pt;display:block;line-height:1.2}.kartu span{font-size:9pt;color:#555;display:block}
.kartu .q svg,.kartu .q canvas{width:26mm!important;height:26mm!important;display:block}
.lbl{width:52mm;height:30mm;border:1px dashed #999;padding:2mm;display:flex;gap:2mm;align-items:center;break-inside:avoid;background:#fff;overflow:hidden}
.lbl .q svg,.lbl .q canvas{width:22mm!important;height:22mm!important;display:block}
.lbl div:last-child{min-width:0;font-size:8pt;line-height:1.2}.lbl b{font-size:10pt;display:block}.lbl span{display:block;color:#444;overflow:hidden;max-height:3.6em}
@media print{body{background:#fff}.pola::before{display:none}.np,main{padding:0;max-width:none}.sheet{gap:3mm}.box,.tw{border:0}}
@media(max-width:600px){th,td{padding:6px 5px;font-size:.85rem}main{padding:14px 10px 40px}}