*{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif;background:#F5F8F6;color:#1b1b1b;font-size:17px}
header{background:#fff;color:#0B4A2F;border-bottom:3px solid #F2400F;padding:14px 16px;display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:5}
header h1{font-size:20px;margin:0;flex:1;color:#0B4A2F}.tile span{color:#F2400F}header button{background:#E6F2EC;color:#0B4A2F;border:0;border-radius:10px;padding:8px 12px;font-size:16px}
main{padding:14px;max-width:560px;margin:auto;padding-bottom:40px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{background:#fff;border:0;border-radius:16px;padding:18px 10px;font-size:17px;font-weight:600;box-shadow:0 1px 4px #0002;text-align:center;min-height:100px}
.tile span{display:block;font-size:34px;margin-bottom:6px}.tile.priv{background:#FFF1EB}
.card{background:#fff;border-radius:14px;padding:14px;margin-bottom:12px;box-shadow:0 1px 3px #0002}
label{display:block;font-weight:600;margin:10px 0 4px}input,select,textarea{width:100%;font-size:18px;padding:12px;border:1px solid #bbb;border-radius:10px;background:#fff}
.btn{display:block;width:100%;padding:15px;font-size:18px;font-weight:700;border:0;border-radius:12px;background:#006B45;color:#fff;margin-top:12px}
.btn.wa{background:#25d366}.btn.sec{background:#e0e0e0;color:#222}.btn.red{background:#c62828}
.row{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px solid #eee}.row:last-child{border:0}
.big{font-size:24px;font-weight:800;color:#0B4A2F}.muted{color:#666;font-size:14px}.neg{color:#c62828}
.struk{font-family:ui-monospace,monospace;white-space:pre-wrap;background:#fffef5;border:1px dashed #999;padding:14px;border-radius:10px;font-size:15px}
.tabs{display:flex;gap:8px;margin-bottom:10px}.tabs button{flex:1;padding:10px;border-radius:10px;border:1px solid #006B45;background:#fff;font-size:16px}.tabs button.on{background:#006B45;color:#fff}
.lock{background:#FFF1EB;border-radius:10px;padding:6px 10px;font-size:14px;display:inline-block;margin-bottom:8px}
.small{padding:8px 12px;font-size:15px;border-radius:8px;border:0;background:#E6F2EC}

:root{--g:#0B4A2F;--g2:#006B45;--o:#F2400F;--bg:#F5F8F6}
body{-webkit-tap-highlight-color:transparent;padding-bottom:env(safe-area-inset-bottom)}
header{padding-top:max(14px,env(safe-area-inset-top))}
button,a.small{cursor:pointer;font-family:inherit}.btn:active,.tile:active,.small:active{transform:scale(.98);opacity:.9}
.tile{border:1px solid #e3ebe6;color:#1b1b1b}.tile.priv{border-color:#ffd9c9}
input:focus,select:focus{outline:2px solid var(--g2);outline-offset:0;border-color:var(--g2)}
.btn.sec{background:#E6F2EC;color:var(--g)}
.acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}a.small{text-decoration:none;color:#0B4A2F;display:inline-block}
.small{color:#0B4A2F}.small.del,.small.x{background:#fdecea;color:#c62828}.small.x{padding:4px 9px;margin-left:4px}
.empty{text-align:center;padding:26px 12px;color:#555}.empty div{font-size:40px}.empty b{display:block;margin-top:6px;color:var(--g)}
.center{text-align:center}.lockic{font-size:42px;margin:4px 0}.pinin{text-align:center;font-size:24px;letter-spacing:8px}
#toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(20px);background:#0B4A2F;color:#fff;padding:12px 18px;border-radius:12px;font-size:16px;opacity:0;pointer-events:none;transition:.25s;max-width:92vw;z-index:20;box-shadow:0 4px 14px #0004}
#toast.show{opacity:1;transform:translateX(-50%)}#toast.err{background:#c62828}
.sw{display:flex;align-items:center;gap:10px;font-weight:700;margin:14px 0 4px}.sw input{width:24px;height:24px;margin:0;accent-color:#006B45}
.opt{display:flex;gap:10px;align-items:flex-start;font-weight:400;border:1px solid #dfe8e3;border-radius:10px;padding:10px;margin:8px 0}.opt input{width:22px;height:22px;margin:2px 0 0;accent-color:#006B45;flex:none}
.wrow{font-weight:400;margin:0;align-items:center}.wrow input{width:20px;height:20px;vertical-align:middle;accent-color:#006B45}
.badge{display:inline-block;padding:6px 12px;border-radius:20px;font-weight:700;font-size:15px;margin-bottom:10px}.badge.ok{background:#E6F2EC;color:#006B45}.badge.wait{background:#FFF1EB;color:#c2410c}
[hidden]{display:none!important}.grid>div{min-width:0}.grid input[type=date]{font-size:16px;padding:10px 8px}
.lockmsg{background:#FDECEC;color:#B42318;border-radius:10px;padding:10px;margin-top:10px;font-weight:600}
.btn:disabled,input:disabled{opacity:.5;cursor:not-allowed}

.badge.part{background:#FFF8E1;color:#8a6100}.seg{display:flex;gap:6px;flex-wrap:wrap}.seg .opt{flex:1;min-width:0;margin:4px 0;padding:8px 6px;gap:6px;font-size:14px;line-height:1.25}.seg .opt input{width:18px;height:18px}
.legal h1{font-size:22px;color:#0B4A2F;margin:0 0 4px}.legal h2{font-size:18px;color:#0B4A2F;margin:18px 0 6px}.legal p,.legal li{line-height:1.5}.legal a{color:#006B45}
.draft{background:#FFF1EB;border:2px solid #F2400F;border-radius:10px;padding:10px;margin:10px 0}
.legalnav,.legallinks{text-align:center;font-size:14px;line-height:2}.legalnav a,.legallinks a{color:#006B45}
footer.legallinks{max-width:560px;margin:0 auto;padding:0 14px 30px}
/* ===== halaman publik ===== */
body.lp .appui{display:none!important}body:not(.lp) #landing{display:none}
.pubhead{background:#fff;border-bottom:3px solid #F2400F;padding:10px 16px;position:sticky;top:0;z-index:5}
.pubhead .in{max-width:1040px;margin:auto;display:flex;align-items:center;gap:12px}.pubhead img{height:40px;width:auto}
.pubhead nav{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap}.pubhead nav a{color:#0B4A2F;text-decoration:none;font-size:15px;padding:6px 8px}
.pubhead nav a.cta,.cta{background:#006B45;color:#fff!important;border-radius:10px;padding:9px 14px;font-weight:700;text-decoration:none;display:inline-block}
.cta.alt{background:#fff;color:#006B45!important;border:2px solid #006B45}
.lpw section{max-width:1040px;margin:auto;padding:28px 16px}.lpw h2{color:#0B4A2F;font-size:24px;margin:0 0 12px}.lpw p{line-height:1.55}
.hero{background:linear-gradient(160deg,#E6F2EC,#F5F8F6)}.hero .in{max-width:1040px;margin:auto;padding:32px 16px;display:grid;gap:24px;align-items:center}
.hero h1{font-size:30px;line-height:1.2;color:#0B4A2F;margin:0 0 10px}.hero .btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.hero img.ss{width:100%;max-width:300px;justify-self:center;border-radius:18px;box-shadow:0 6px 24px #0003}
.feat{display:grid;gap:12px;grid-template-columns:1fr}.feat div{background:#fff;border-radius:14px;padding:14px;box-shadow:0 1px 3px #0002}.feat b{display:block;color:#0B4A2F;margin-bottom:4px}
.shots{display:flex;gap:14px;overflow-x:auto;padding-bottom:8px}.shots figure{margin:0;flex:0 0 220px;text-align:center;font-size:14px;color:#555}.shots img{width:220px;border-radius:14px;box-shadow:0 2px 10px #0002}
.price{background:#fff;border-radius:16px;padding:20px;box-shadow:0 2px 8px #0002;max-width:460px;border-top:5px solid #006B45}.price .amt{font-size:34px;font-weight:800;color:#0B4A2F}
.steps{padding-left:22px}.steps li{margin:6px 0;line-height:1.5}
.faq details{background:#fff;border-radius:12px;padding:12px 14px;margin-bottom:8px;box-shadow:0 1px 3px #0002}.faq summary{font-weight:700;cursor:pointer;color:#0B4A2F}
.sitefoot{background:#0B4A2F;color:#E6F2EC;margin-top:24px}.sitefoot .in{max-width:1040px;margin:auto;padding:22px 16px;font-size:14px;line-height:1.9}
.sitefoot a{color:#fff;margin-right:14px;white-space:nowrap}.sitefoot p{margin:6px 0}
.ck .row b{white-space:nowrap}.ck .tot{font-size:20px;border-top:2px solid #0B4A2F;margin-top:6px;padding-top:10px}.btn[disabled]{background:#9bb5a8;cursor:not-allowed}
.todo{background:#FFF8E1;border:1px dashed #C77700;border-radius:10px;padding:8px 10px;font-size:14px;color:#6b4500;margin-top:8px}
@media(min-width:760px){.hero .in{grid-template-columns:1.3fr 1fr}.hero h1{font-size:40px}.feat{grid-template-columns:1fr 1fr 1fr}.lpw .two{display:grid;grid-template-columns:1fr 1fr;gap:24px}}