:root{--navy:#1E3A5F;--navy2:#2C5282;--gold:#C9A227;--wa:#25D366;--bg:#F7F8FA;--tx:#1F2933;--mut:#66727F;--line:#E4E8EE;--ok:#2E7D32;--warn:#B96B00;--bad:#C62828;--info:#1E5FA8;--r:20px;--sh:0 10px 30px rgba(0,0,0,.08)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font:400 16px/1.6 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--tx);background:var(--bg);overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.nos{overflow:hidden}
h1,h2,h3,h4{font-family:Poppins,Inter,sans-serif;color:var(--navy);line-height:1.25;margin:0 0 .5rem;letter-spacing:-.01em}
h1{font-size:clamp(1.7rem,6.6vw,3rem)}h2{font-size:clamp(1.3rem,4.6vw,2rem)}h3{font-size:1.1rem}
p{margin:0 0 1rem}a{color:var(--navy2)}img{max-width:100%;display:block}
.wrap{width:100%;max-width:1100px;margin:0 auto;padding:0 18px}
.muted{color:var(--mut)}.small{font-size:.875rem}[hidden]{display:none!important}
.ic{width:22px;height:22px;flex:none}
.card{background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:18px;border:1px solid rgba(30,58,95,.05)}
:focus-visible{outline:3px solid rgba(201,162,39,.65);outline-offset:2px}

/* Tombol */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:16px;border:1.5px solid transparent;font:600 .95rem Inter,sans-serif;cursor:pointer;text-decoration:none;transition:transform .15s,background .15s;text-align:center;max-width:100%}
.btn:active{transform:scale(.98)}.btn:disabled{opacity:.6;cursor:wait}
.btn.pri{background:var(--navy);color:#fff;box-shadow:0 8px 20px rgba(30,58,95,.25)}.btn.pri:hover{background:var(--navy2)}
.btn.wa{background:var(--wa);color:#063d1c}.btn.wa:hover{background:#1fbe5a}
.btn.ghost{background:#fff;border-color:var(--line);color:var(--navy)}.btn.ghost:hover{border-color:var(--navy)}
.btn.dng{background:#fff;border-color:#f0c4c4;color:var(--bad)}
.btn.sm{min-height:44px;padding:0 14px;font-size:.85rem;border-radius:14px}
.btn.block{width:100%}

/* Formulir */
label{display:block;font-weight:600;font-size:.9rem;margin:0 0 6px;color:var(--navy)}
input,select,textarea{width:100%;min-height:48px;padding:12px 14px;border:1.5px solid var(--line);border-radius:16px;font:400 16px Inter,sans-serif;background:#fff;color:var(--tx);transition:border-color .15s,box-shadow .15s}
textarea{min-height:88px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--navy2);box-shadow:0 0 0 4px rgba(44,82,130,.14)}
.fld{margin-bottom:14px}
.chk{display:flex;align-items:center;gap:10px;min-height:48px;font-weight:500}.chk input{width:24px;min-height:24px;height:24px}
.err{color:var(--bad);font-size:.9rem;margin:0 0 12px;min-height:0}.err:empty{display:none}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.row2{display:grid;gap:12px;grid-template-columns:1fr}

/* Lencana */
.bd{display:inline-block;padding:3px 12px;border-radius:99px;font-size:.78rem;font-weight:600;white-space:nowrap}
.bd.ok{background:#E3F3E5;color:var(--ok)}.bd.warn{background:#FFF0D6;color:var(--warn)}.bd.bad{background:#FBE3E3;color:var(--bad)}.bd.info{background:#E2EDFB;color:var(--info)}.bd.mut{background:#EDF0F4;color:var(--mut)}

/* Landing */
.top{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
.brand{font:700 1.05rem Poppins,sans-serif;color:var(--navy);display:flex;align-items:center;gap:10px;text-decoration:none}
.logo{width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff;display:grid;place-items:center;font-size:1rem}
.hero{padding:20px 0 40px;display:grid;gap:28px}
.hero .lead{font-size:1.05rem;color:var(--mut);max-width:34em}
.cta-row{display:grid;gap:12px;margin-top:20px}
.authbox{padding:22px}
.tabs{display:grid;grid-template-columns:1fr 1fr;background:#EDF0F4;border-radius:16px;padding:4px;margin-bottom:18px}
.tabs button{min-height:44px;border:0;border-radius:12px;background:transparent;font:600 .95rem Inter,sans-serif;color:var(--mut);cursor:pointer}
.tabs button.on{background:#fff;color:var(--navy);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.sec{padding:36px 0}
.grid3{display:grid;gap:16px}
.feat h3{margin-top:10px}.feat p{margin:0;color:var(--mut)}
.feat .ei{width:48px;height:48px;border-radius:16px;background:#EEF3FA;color:var(--navy);display:grid;place-items:center}
.steps{counter-reset:s;display:grid;gap:14px}
.steps li{list-style:none;position:relative;padding-left:54px;min-height:40px}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:0;width:38px;height:38px;border-radius:14px;background:var(--navy);color:#fff;display:grid;place-items:center;font:600 1rem Poppins,sans-serif}
.steps{padding:0;margin:0}.steps b{display:block;color:var(--navy)}
.trust{background:var(--navy);color:#dbe5f2;border-radius:24px;padding:26px 20px}.trust h2{color:#fff}.trust li{margin-bottom:8px}
.final{text-align:center;padding:40px 20px;border-radius:24px;background:linear-gradient(135deg,#fff,#EEF3FA)}
.foot{padding:28px 0 96px;text-align:center;color:var(--mut);font-size:.875rem}
.foot a{color:var(--navy);font-weight:600}

/* Aplikasi */
.apphead{position:sticky;top:0;z-index:20;background:rgba(247,248,250,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.apphead .wrap{display:flex;align-items:center;justify-content:space-between;min-height:60px}
.main{padding:18px 0 110px}
.bnav{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;background:#fff;border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -6px 24px rgba(0,0,0,.06)}
.ni{flex:1;min-width:0;min-height:56px;border:0;background:transparent;color:var(--mut);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font:600 .68rem Inter,sans-serif;cursor:pointer;border-radius:14px}
.ni.on{color:var(--navy);background:#EEF3FA}
.ni.more{display:none}
.pagehead{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:16px}
.pagehead h2{margin:0}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.stat{padding:16px}.stat b{display:block;font:700 1.35rem Poppins,sans-serif;color:var(--navy);word-break:break-word}.stat span{font-size:.82rem;color:var(--mut)}
.bar{height:10px;background:#E8EDF3;border-radius:99px;overflow:hidden;margin-top:8px}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),#e0c14f);border-radius:99px}
.list{display:grid;gap:12px}
.ri{padding:16px}
.ri-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.ri-top>div{min-width:0}.ri-top strong{word-break:break-word}
.ri-mid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;margin:8px 0 12px}
.ri-mid .p{font:600 1.05rem Poppins,sans-serif;color:var(--navy)}
.acts{display:flex;flex-wrap:wrap;gap:8px}
.thumb{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:16px;margin-bottom:12px;background:#E8EDF3}
.ph{width:100%;aspect-ratio:16/9;border-radius:16px;margin-bottom:12px;background:linear-gradient(135deg,#EEF3FA,#E2EAF5);display:grid;place-items:center;color:var(--navy2)}
.ph .ic{width:40px;height:40px}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:12px}
.chip{flex:none;min-height:44px;padding:0 16px;border-radius:99px;border:1.5px solid var(--line);background:#fff;font:600 .85rem Inter,sans-serif;color:var(--mut);cursor:pointer}
.chip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.empty{text-align:center;padding:34px 18px;color:var(--mut)}
.empty .eico{width:60px;height:60px;border-radius:20px;background:#EEF3FA;color:var(--navy);display:grid;place-items:center;margin:0 auto 12px}
.notice{background:#FFF7DD;border:1px solid #F1DE9A;color:#6b5400;border-radius:16px;padding:12px 16px;margin-bottom:16px;font-size:.92rem}
.sub{margin:22px 0 10px}
.copybox{word-break:break-all;background:#F1F4F8;border-radius:14px;padding:12px 14px;font-size:.88rem;margin:8px 0 12px}
.frm{max-width:640px}

/* Modal */
.mb{position:fixed;inset:0;z-index:100;background:rgba(15,28,46,.55);display:flex;align-items:flex-end;justify-content:center}
.sheet{background:#fff;width:100%;max-width:560px;max-height:92vh;overflow-y:auto;border-radius:24px 24px 0 0;padding:22px 18px calc(22px + env(safe-area-inset-bottom));animation:up .22s ease-out}
.sheet .btns{display:flex;gap:10px;margin-top:6px}.sheet .btns .btn{flex:1}
.more-list{display:grid;gap:8px}.more-list button{justify-content:flex-start}
.ok-state{text-align:center}.ok-state .eico{background:#E3F3E5;color:var(--ok)}
.toast{position:fixed;left:50%;bottom:92px;transform:translateX(-50%);z-index:200;background:var(--navy);color:#fff;padding:12px 20px;border-radius:16px;max-width:92vw;font-size:.92rem;box-shadow:var(--sh)}
.toast.err{background:var(--bad)}
@keyframes up{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}

/* Etalase publik */
.eta-head{padding:8px 0 22px}
.filters{display:flex;gap:12px;align-items:center;margin-bottom:16px}.filters select{max-width:260px}
.units{display:grid;gap:16px}
.ucard h3{margin:0 0 2px}.ucard .price{font:700 1.2rem Poppins,sans-serif;color:var(--navy);margin-bottom:6px}
.ucard .fac{color:var(--mut);font-size:.9rem;margin-bottom:14px}
.ucard .acts .btn{flex:1 1 150px}

/* Laporan */
.rep .stats{grid-template-columns:1fr 1fr}
table.t{width:100%;border-collapse:collapse;font-size:.9rem}table.t td,table.t th{padding:8px 6px;border-bottom:1px solid var(--line);text-align:left}

@media(min-width:560px){.row2{grid-template-columns:1fr 1fr}.cta-row{grid-template-columns:auto auto;justify-content:start}.grid3,.units{grid-template-columns:1fr 1fr}.mb{align-items:center}.sheet{border-radius:24px}}
@media(min-width:900px){
  .hero{grid-template-columns:1.15fr .85fr;align-items:center;padding:40px 0 60px}
  .grid3{grid-template-columns:repeat(3,1fr)}.units{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(3,1fr)}
  .bnav{top:60px;right:auto;width:230px;flex-direction:column;justify-content:flex-start;padding:12px;border-top:0;border-right:1px solid var(--line);box-shadow:none;gap:4px}
  .ni{flex:none;flex-direction:row;justify-content:flex-start;gap:12px;padding:0 16px;font-size:.95rem;min-height:48px}
  .ni.more{display:flex}.ni.morebtn{display:none}
  #app .wrap{max-width:none;padding-left:250px;padding-right:32px}
  #app .apphead .wrap{padding-left:20px;padding-right:32px}
  .stats{grid-template-columns:repeat(4,1fr)}.list.cols{grid-template-columns:1fr 1fr}.rep .stats{grid-template-columns:repeat(4,1fr)}
  .toast{bottom:32px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.apphead,.bnav,.no-print,.foot,.toast{display:none!important}#app .wrap{padding:0!important}.card{box-shadow:none;border:1px solid #ccc}body{background:#fff}}