@font-face{font-family:Jakarta;src:url('fonts/plus-jakarta-sans-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}@font-face{font-family:Jakarta;src:url('fonts/plus-jakarta-sans-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}@font-face{font-family:Jakarta;src:url('fonts/plus-jakarta-sans-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}@font-face{font-family:Jakarta;src:url('fonts/plus-jakarta-sans-latin-800-normal.woff2') format('woff2');font-weight:800;font-display:swap}
:root{--paper:#f6f7f2;--surface:#fffffc;--ink:#172e22;--muted:#5d6c61;--line:#e0e6db;--forest:#163e2c;--green:#267346;--lime:#d8ebaf;--light:#edf3e7;--yellow:#f2d685;--danger:#ac302c;--radius:16px;--sidebar:232px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,a,input,select{ -webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}a{color:inherit;text-decoration:none}button{color:inherit}button svg,a svg{flex-shrink:0}svg.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}svg.icon.sm{width:16px;height:16px}:focus-visible{outline:3px solid #b56d20;outline-offset:4px}h1,h2,h3,p{margin:0}h1{font-size:clamp(24px,2.5vw,34px);letter-spacing:-1.2px;font-weight:800;line-height:1.25}h2{font-size:17px;letter-spacing:-.4px}h3{font-size:15px}p{line-height:1.7}.muted,.sub{color:var(--muted)}.sub{font-size:13px;margin-top:7px}.eyebrow{font-size:12px;letter-spacing:1.8px;font-weight:800;text-transform:uppercase}.num{font-variant-numeric:tabular-nums;letter-spacing:-.5px}.demo-bar{height:36px;background:#e9efde;display:flex;align-items:center;justify-content:space-between;padding:0 26px;font-size:12px;gap:12px;border-bottom:1px solid #d6e0c8}.demo-bar b{letter-spacing:1px;font-size:12px}.demo-bar button{background:none;border:0;font-size:12px;padding:8px;white-space:nowrap}.demo-bar button span{font-size:15px;margin-left:7px}.skip{position:fixed;top:-80px;left:15px;z-index:99;background:var(--yellow);padding:15px}.skip:focus{top:10px}.shell{min-height:calc(100dvh - 36px);display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr)}.sidebar{background:var(--surface);border-right:1px solid var(--line);padding:30px 17px 18px;display:flex;flex-direction:column;position:sticky;top:0;align-self:start;height:100dvh;max-height:1100px}.brand{display:flex;align-items:center;gap:10px;padding:0 15px;font-size:28px;font-weight:800;letter-spacing:-1.4px}.brand img{width:34px;height:34px}.brand .dot{color:var(--green)}.site-name{font-size:12px;color:var(--muted);letter-spacing:.5px;padding:11px 15px 28px}.nav-label{font-size:12px;font-weight:800;color:#74816f;letter-spacing:1.5px;padding:15px 15px 9px}nav{display:grid;gap:3px}nav a{display:flex;align-items:center;gap:12px;padding:11px 15px;border-radius:9px;font-size:12px;font-weight:600;min-height:43px}nav a:hover{background:var(--paper)}nav a.active{color:var(--forest);background:#eaf0df}nav a.active:after{content:'';width:5px;height:5px;background:var(--green);border-radius:50%;margin-left:auto}.sidebar-bottom{margin-top:auto;padding-top:24px}.side-help{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:15px;font-size:12px;line-height:1.7}.side-help a{display:flex;justify-content:space-between;font-weight:700;margin-top:12px;color:var(--green)}.profile{display:flex;align-items:center;gap:10px;margin:21px 8px 0;font-size:12px}.profile small{display:block;color:var(--muted);font-size:12px;margin-top:4px}.avatar{width:35px;height:35px;background:#ebe5d3;color:#5f533a;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}.avatar.mint{background:#e3edd6;color:var(--forest)}.work-area{min-width:0}.topbar{height:78px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 38px;gap:15px;background:var(--paper)}.breadcrumbs{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:10px}.breadcrumbs strong{color:var(--ink);font-weight:600}.topbar-right{display:flex;gap:20px;align-items:center;font-size:12px}.online{display:flex;gap:7px;align-items:center}.online:before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green)}.date-label{border-left:1px solid var(--line);padding-left:20px}.menu-button{display:none;border:0;background:transparent;padding:8px}.content{padding:32px 38px 24px;max-width:1570px;margin:auto;animation:enter .3s ease-out}.page-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:27px}.page-heading .actions{margin-top:2px}.actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.btn{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:11px 15px;font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;transition:background .15s,transform .15s}.btn:hover{background:#eaf0df}.btn:active{transform:translateY(1px)}.btn.primary{background:var(--forest);border-color:var(--forest);color:#f6f8ed}.btn.primary:hover{background:#286143}.btn.light{background:var(--lime);border-color:var(--lime)}.btn.ghost{background:none;border-color:transparent;color:var(--green);padding-left:0}.btn.small{padding:8px 10px;min-height:34px;font-size:12px}.btn.danger{color:var(--danger)}.welcome{display:grid;grid-template-columns:1fr 270px;align-items:center;background:#edf1e4;border:1px solid #dce5ce;border-radius:var(--radius);padding:26px 31px;overflow:hidden;min-height:173px;position:relative}.welcome h2{font-size:25px;font-weight:800;line-height:1.45;letter-spacing:-.9px;max-width:500px;margin:8px 0}.welcome p{font-size:12px;max-width:440px}.welcome .eyebrow{color:#536341}.eco-art{height:156px;width:100%;color:var(--forest)}.stats{display:grid;grid-template-columns:repeat(4,1fr);margin:25px 0 26px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}.stat{padding:20px 23px;position:relative}.stat+.stat:before{content:'';position:absolute;height:57%;border-left:1px solid var(--line);left:0;top:22%}.stat-label{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:12px;margin-bottom:13px;gap:12px}.stat-label svg{color:#819172;width:18px}.stat-value{font-size:25px;font-weight:800;letter-spacing:-1px;white-space:nowrap}.stat-value small{font-size:13px;font-weight:600;letter-spacing:0}.stat-foot{font-size:12px;color:var(--muted);margin-top:9px}.stat-foot b{color:var(--green)}.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(250px,1fr);gap:22px}.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:23px}.panel-title{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:8px}.panel-title p{font-size:12px;color:var(--muted);margin-top:7px}.tag{display:inline-flex;gap:5px;align-items:center;background:var(--light);color:#315932;border-radius:5px;padding:5px 7px;font-size:12px;font-weight:700;white-space:nowrap}.tag.gold{background:#f7edca;color:#765214}.tag.blue{background:#e5eeee;color:#2d615e}.tag.neutral{background:#edf0ea;color:#55604f}.tag.red{background:#fbe9e4;color:var(--danger)}.chart{width:100%;height:195px;display:block;margin-top:14px;overflow:visible}.chart text{font-family:Jakarta,sans-serif;font-size:12px;fill:var(--muted)}.chart .grid-line{stroke:#e5e9de;stroke-dasharray:3 5}.chart .bar{fill:#d9e5ca}.chart .bar.current{fill:#356a42}.chart .total{fill:var(--ink);font-size:12px;font-weight:700}.chart-legend{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);margin-top:10px}.legend-dot{width:7px;height:7px;border-radius:2px;background:#356a42}.campaign{background:#f3efdd;position:relative;overflow:hidden}.campaign h2{font-size:24px;line-height:1.3;margin:18px 0 10px;letter-spacing:-.8px}.campaign p{font-size:12px;max-width:250px}.campaign .campaign-art{position:absolute;width:75px;height:75px;right:17px;top:51px;opacity:.9}.campaign .campaign-copy{max-width:195px}.campaign progress{margin-top:24px}.progress-caption{display:flex;justify-content:space-between;font-size:12px;margin:9px 0 17px}progress{width:100%;height:7px;border:0;border-radius:5px;background:#dce5cc;color:var(--green);overflow:hidden;display:block}progress::-webkit-progress-bar{background:#dce5cc}progress::-webkit-progress-value{background:var(--green);border-radius:5px}progress::-moz-progress-bar{background:var(--green)}.section-space{margin-top:25px}.table-panel{padding:0;overflow:hidden}.table-panel .panel-title{padding:22px 23px 15px;margin:0}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;text-align:left;font-size:12px;white-space:nowrap}thead{background:#f5f7f0;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.8px}th{padding:12px 22px;font-weight:700}td{padding:14px 22px;border-top:1px solid #edf0e8}td:last-child,th:last-child{text-align:right}.member-cell{display:flex;align-items:center;gap:11px}.member-cell small{display:block;color:var(--muted);font-size:12px;margin-top:5px}.member-cell .avatar{width:32px;height:32px;font-size:12px}.table-foot{padding:12px 23px;color:var(--muted);font-size:12px;display:flex;justify-content:space-between;border-top:1px solid var(--line)}.money-check{display:flex;align-items:center;gap:12px;margin-top:20px;border:1px solid #d5e4c7;border-radius:11px;background:#edf3e6;padding:15px 20px;font-size:12px}.money-check svg{color:var(--green);width:21px;height:21px}.money-check strong{font-weight:700}.money-check .detail{margin-left:auto;font-size:12px;white-space:nowrap}.footer{display:flex;justify-content:space-between;gap:15px;font-size:12px;color:var(--muted);margin-top:28px;padding-top:16px;border-top:1px solid var(--line)}.form-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,.85fr);gap:24px}.field{display:block;margin-bottom:19px}.field>span,.label{font-size:12px;font-weight:700;display:block;margin-bottom:8px}.field small{font-size:12px;color:var(--muted);margin-top:7px;display:block}.input{width:100%;border:1px solid #cbd7c3;border-radius:8px;padding:12px 13px;font-size:12px;min-height:44px;background:var(--surface);color:var(--ink)}.input:focus{border-color:var(--green)}.input.big{font-size:27px;font-weight:700;text-align:right}.input-group{display:flex;align-items:center;gap:10px}.input-group .input{flex:1;min-width:0}.input-group>span{font-size:13px;color:var(--muted)}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}.category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:15px 0 24px}.category-choice{border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:16px 12px;text-align:left;min-height:96px}.category-choice:hover,.category-choice.selected{background:#eff4e6;border-color:#64804c}.category-choice svg{display:block;margin-bottom:12px}.category-choice strong{display:block;font-size:12px}.category-choice small{font-size:12px;color:var(--muted);display:block;margin-top:7px}.group-plastik{color:#8b6b27}.group-kertas{color:#4f6690}.group-logam{color:#586967}.group-kaca{color:#318074}.divider{height:1px;background:var(--line);margin:22px 0}.member-summary{background:var(--forest);color:#f5f8ed;border:0}.member-summary .muted,.member-summary .sub{color:#cad9ba}.member-summary .balance{font-size:31px;font-weight:800;margin:15px 0 5px;letter-spacing:-1px}.member-summary .avatar{background:#dce9bb;color:var(--forest);width:44px;height:44px;font-size:13px}.member-summary progress{margin-top:18px}.member-summary progress::-webkit-progress-value{background:var(--lime)}.member-summary progress::-moz-progress-bar{background:var(--lime)}.member-summary .tag{background:#33553b;color:#ebf3dc}.summary-line{display:flex;justify-content:space-between;gap:14px;font-size:12px;padding:10px 0}.summary-line.total{font-size:20px;font-weight:800;margin-top:10px;border-top:1px solid var(--line);padding-top:18px}.summary-line small{font-size:12px;color:var(--muted)}.cart-empty{border:1px dashed #cbd7c3;border-radius:10px;text-align:center;padding:24px;color:var(--muted);font-size:12px}.cart-item{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px;border-bottom:1px solid var(--line);padding:12px 0}.cart-item small{display:block;font-size:12px;color:var(--muted);margin-top:5px}.icon-btn{border:0;background:var(--paper);width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px}.error{color:var(--danger);font-size:12px;line-height:1.6;min-height:18px;margin-bottom:12px}.notice{padding:13px 15px;border-radius:8px;background:var(--light);font-size:12px;line-height:1.7}.notice.warning{background:#f7edd3;color:#765214}.search-row{display:flex;gap:14px;align-items:center;margin-bottom:20px}.search-row .input{max-width:380px}.link{color:var(--green);text-decoration:underline;text-underline-offset:3px;font-size:12px;font-weight:600}.link-button{background:none;border:0;padding:0;color:var(--green);font-size:12px;font-weight:700;text-align:left}.member-details{margin-top:22px}.stock-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.stock-card{padding:21px}.stock-card .stock-amount{font-size:30px;font-weight:800;margin:18px 0 3px}.stock-card .stock-amount small{font-size:13px;font-weight:400}.stock-card .stock-head{display:flex;align-items:center;justify-content:space-between}.stock-card p{font-size:12px;color:var(--muted);margin-top:8px}.stock-card .btn{margin-top:20px;width:100%}.tabs{display:flex;gap:7px;border-bottom:1px solid var(--line);margin-bottom:23px;padding-bottom:12px}.tabs a{padding:9px 13px;border-radius:6px;font-size:12px;font-weight:700}.tabs a.active{background:var(--light);color:var(--green)}.receipt{background:var(--surface);border:1px solid var(--line);padding:30px;max-width:600px;margin:auto}.receipt-header{text-align:center;border-bottom:1px dashed var(--line);padding-bottom:22px;margin-bottom:18px}.receipt-header img{width:40px;margin-bottom:10px}.receipt-header h2{font-size:22px}.receipt-header p{font-size:12px;color:var(--muted);margin-top:8px}.receipt .summary-line{font-size:12px}.receipt .actions{margin-top:25px}.big-number{font-size:clamp(32px,5vw,60px);font-weight:800;letter-spacing:-2px;line-height:1.3}.feature-notes{font-size:12px;line-height:1.9;display:grid;gap:15px;margin:20px 0}.feature-notes strong{color:var(--green)}.feature-notes li{padding-left:5px}.kiosk{max-width:1050px;margin:auto;padding:30px}.kiosk nav{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:25px 0}.kiosk nav a{min-height:56px;font-size:15px}.kiosk-head{display:flex;align-items:center;justify-content:space-between;gap:20px}.kiosk .brand{padding:0}.kiosk-body{display:grid;grid-template-columns:1.2fr 1fr;gap:23px;margin-top:36px}.kiosk .member-summary{padding:36px}.kiosk .member-summary h1{font-size:25px}.kiosk .member-summary .balance{font-size:48px}.kiosk .btn{min-height:56px;font-size:14px}.kiosk p{font-size:13px}.kiosk .field .input{min-height:56px}.kiosk .stat-value{font-size:31px}.price-board{min-height:calc(100dvh - 36px);background:var(--forest);color:#f5f7eb;padding:clamp(25px,5vw,70px)}.board-head{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:60px}.board-head .brand{padding:0}.board-head .brand img{background:var(--lime);border-radius:10px}.board-head .btn{background:transparent;border-color:#60805f;color:#eaf3da}.board-layout{display:grid;grid-template-columns:1.7fr 1fr;gap:65px}.price-board h1{font-size:clamp(35px,5vw,67px);letter-spacing:-2px}.price-board .sub{color:#c0d0b6;font-size:15px;margin-top:20px}.price-list{margin-top:35px}.price-line{padding:22px 0;border-bottom:1px solid #416047;display:flex;align-items:center;justify-content:space-between;gap:20px}.price-line strong{font-size:19px}.price-line b{font-size:24px;color:var(--lime);white-space:nowrap}.price-line b small{font-size:12px}.rank-panel{padding-top:15px}.rank-panel h2{color:var(--lime);font-size:23px;margin-bottom:25px}.rank-line{display:flex;align-items:center;gap:15px;border-bottom:1px solid #416047;padding:20px 0;font-size:13px}.rank-line .rank-number{color:var(--lime);font-size:24px;font-weight:800;width:30px}.rank-line b{margin-left:auto;white-space:nowrap}.board-note{border-top:1px solid #416047;margin-top:50px;padding-top:24px;color:#c0d0b6;font-size:12px}.about-hero{padding:35px;background:var(--light);border-radius:var(--radius);display:grid;grid-template-columns:1.6fr 1fr;align-items:center;gap:35px}.about-hero h1{font-size:42px;line-height:1.25;margin:15px 0}.about-hero .eco-art{height:230px}.about-hero p{font-size:13px}.about-list{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;margin-top:35px}.about-list h2{font-size:17px;margin:15px 0 10px}.about-list p{font-size:12px;color:var(--muted)}#toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);background:var(--forest);color:#f3f8e8;padding:14px 22px;border-radius:10px;z-index:100;max-width:calc(100vw - 32px);font-size:12px;opacity:0;pointer-events:none;box-shadow:0 5px 20px #163e2c25;transition:opacity .2s,transform .2s}#toast.show{opacity:1;transform:translate(-50%,0)}.no-script{padding:50px;max-width:700px}.mobile-only{display:none}.checkbox-label{display:flex;gap:10px;align-items:flex-start;margin:16px 0;font-size:12px;line-height:1.7}.checkbox-label input{margin-top:3px;accent-color:var(--green)}.empty{padding:35px;text-align:center;color:var(--muted);font-size:12px}.device-strip{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:20px;font-size:12px}.device-strip span:last-child{margin-left:auto}.device-strip .online{color:var(--green)}@keyframes enter{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}@media(min-width:1500px){:root{--sidebar:252px}.content{padding-top:40px}.welcome{min-height:190px}.stat-value{font-size:29px}}@media(max-width:1150px){:root{--sidebar:208px}.content{padding:28px 25px}.topbar{padding:0 25px}.stat{padding:17px}.stat-value{font-size:21px}.dashboard-grid{grid-template-columns:1.4fr 1fr;gap:17px}.welcome{grid-template-columns:1fr 200px;padding:25px}.welcome h2{font-size:22px}.form-grid{grid-template-columns:1.4fr 1fr}.category-grid{grid-template-columns:repeat(2,1fr)}.campaign .campaign-art{width:50px;right:12px}.stock-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:900px){:root{--sidebar:185px}.sidebar{padding:25px 10px}.sidebar nav a{padding:11px;font-size:12px;gap:9px}.brand{font-size:25px;padding:0 10px}.site-name{padding-left:10px;font-size:12px}.topbar-right .online{display:none}.dashboard-grid{grid-template-columns:1fr}.campaign h2{font-size:23px}.campaign .campaign-art{width:100px;height:100px;right:35px;top:25px}.campaign .campaign-copy{max-width:65%}.campaign p{max-width:70%}.welcome{grid-template-columns:1fr 150px}.welcome h2{font-size:20px}.stat-value{font-size:20px}.stat{padding:17px 12px}.stat-label{font-size:12px}.stat-label svg{display:none}.form-grid{grid-template-columns:1fr}.form-grid .member-summary{order:-1}.about-list{grid-template-columns:1fr}.about-hero{grid-template-columns:1fr}.about-hero .eco-art{display:none}.board-layout{grid-template-columns:1fr;gap:40px}.kiosk-body{grid-template-columns:1fr}}@media(max-width:650px){.demo-bar{height:auto;min-height:35px;padding:0 12px;font-size:12px}.demo-copy{display:none}.demo-bar b{font-size:12px}.shell{display:block}.sidebar{display:none;position:fixed;z-index:50;top:35px;left:0;width:260px;height:calc(100dvh - 35px);overflow-y:auto;border-right:1px solid #bdc9b4;box-shadow:200px 0 0 200px #172e2240}.shell.menu-open .sidebar{display:flex}.sidebar .sidebar-bottom{display:none}.sidebar .site-name{padding-bottom:10px}.sidebar .nav-label{padding-top:9px}.sidebar nav a{min-height:42px}.topbar{height:64px;padding:0 16px}.breadcrumbs{gap:6px;font-size:12px}.menu-button{display:block;margin-left:-8px}.topbar-right{gap:10px}.date-label{border:0;padding:0;font-size:12px}.content{padding:24px 17px 20px}.page-heading{flex-wrap:wrap;margin-bottom:23px;gap:15px}.page-heading .sub{font-size:12px}.page-heading .actions{width:100%;margin:0}.page-heading .actions .btn{flex:1}.welcome{grid-template-columns:1fr 90px;padding:22px 18px;min-height:170px}.welcome h2{font-size:20px}.welcome p{font-size:12px}.welcome .eco-art{height:130px;width:140px;transform:translateX(-12px)}.welcome .eyebrow{font-size:12px}.stats{grid-template-columns:repeat(2,1fr);margin:19px 0}.stat{padding:19px}.stat-value{font-size:24px}.stat-label{font-size:12px}.stat-label svg{display:block}.stat:nth-child(3),.stat:nth-child(4){border-top:1px solid var(--line)}.stat:nth-child(3):before{display:none}.stat-foot{font-size:12px}.panel{padding:19px}.table-panel{padding:0}.panel-title h2{font-size:15px}.table-panel .panel-title{padding:18px}.chart{height:185px}.campaign .campaign-art{right:16px;width:75px;top:36px}.campaign p{max-width:80%}.campaign .campaign-copy{max-width:73%}.money-check{flex-wrap:wrap;padding:14px;gap:10px}.money-check p{flex:1;font-size:12px}.money-check .detail{margin-left:31px;white-space:normal}.footer{font-size:12px;flex-wrap:wrap;gap:8px}th,td{padding:13px 17px}.table-foot{font-size:12px;padding:12px 17px}.category-grid{grid-template-columns:repeat(2,1fr)}.two-col{grid-template-columns:1fr}.stock-grid{grid-template-columns:1fr}.search-row{flex-wrap:wrap}.search-row .input{max-width:none}.form-grid{gap:17px}.member-summary .balance{font-size:29px}.summary-line{font-size:12px}.receipt{padding:22px}.receipt .actions .btn{flex:1}.kiosk{padding:24px 17px}.kiosk-head{align-items:flex-start;gap:12px;flex-wrap:wrap}.kiosk .brand{font-size:27px}.kiosk .member-summary{padding:25px}.kiosk .member-summary .balance{font-size:38px}.kiosk nav{gap:5px}.kiosk nav a{font-size:12px;padding:12px;min-height:56px}.board-head{align-items:flex-start;flex-wrap:wrap;margin-bottom:35px}.price-line strong{font-size:14px}.price-line b{font-size:19px}.price-board .sub{font-size:12px}.price-board{padding:27px 20px}.about-hero{padding:25px}.about-hero h1{font-size:34px}.about-list{gap:15px}.tabs{flex-wrap:wrap}.notice{font-size:12px}.chart .total{font-size:12px}.mobile-only{display:inline}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}@media print{.sidebar,.topbar,.demo-bar,.footer,.btn,.tabs,#toast,.actions,.skip{display:none!important}.shell,.form-grid,.dashboard-grid{display:block}.content{padding:0}.panel{break-inside:avoid;margin:12px 0}.receipt{border:0;max-width:80mm;padding:5mm;margin:0}.receipt-header:before{content:'BUKTI TRANSAKSI BANK SAMPAH';display:block;font-size:12px;margin-bottom:15px}.table-wrap{overflow:visible}body{background:#fff;color:#172e22}.price-board{background:#fff;color:#172e22}.price-line b{color:#267346}}

/* Keep reference prices readable inside the counter form. */
#deposit-price{font-size:clamp(24px,2.5vw,34px);letter-spacing:-1px;white-space:nowrap}.receipt-header h1{font-size:22px;letter-spacing:-.6px}

/* Apple HIG foundation: readable type, clear controls, quiet content surfaces. */
:root{--paper:#f5f6f7;--surface:#fbfcfb;--ink:#202725;--muted:#5e6863;--line:#dfe5e1;--forest:#1c5136;--green:#23754c;--lime:#dcebdc;--light:#e9f2eb;--yellow:#f3e3b6;--danger:#ac302c;--radius:20px;--sidebar:246px;color-scheme:light;font-size:16px}
body{font-size:.9375rem;line-height:1.5;-webkit-font-smoothing:antialiased}h1,h2,h3{font-weight:650}h1{font-size:clamp(1.75rem,2.6vw,2.25rem);letter-spacing:-.055em;line-height:1.18}h2{font-size:1.125rem;letter-spacing:-.035em}h3{font-size:1rem}.sub{font-size:.875rem;line-height:1.6}.eyebrow{font-size:.6875rem;letter-spacing:.09em;font-weight:650}.brand{font-family:Jakarta,sans-serif;font-size:1.7rem;letter-spacing:-.06em;gap:10px}.brand img{width:38px;height:38px;background:var(--light);border-radius:12px;padding:8px}.brand .dot{display:none}.site-name{font-size:.6875rem;letter-spacing:.02em;padding-top:14px;padding-bottom:25px;text-transform:none}.demo-bar{background:#edf1ed;border-color:var(--line);min-height:34px;height:auto;padding-block:3px;font-size:.75rem}.demo-bar b{font-size:.6875rem;letter-spacing:.045em}.demo-bar button{font-size:.75rem;min-height:30px}.sidebar{background:#eef0ee;border-right-color:#e0e4df;padding-top:29px;height:100dvh;max-height:none}.nav-label{font-size:.6875rem;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--muted);padding:18px 15px 8px}nav a{font-size:.875rem;font-weight:500;border-radius:10px;min-height:44px;padding:10px 13px;gap:11px}nav a.active{background:#dce7de;color:#235137;font-weight:650}nav a.active:after{display:none}nav a:hover{background:#e1e7e1}nav a .icon{width:20px;height:20px}.side-help{background:transparent;border:none;border-top:1px solid var(--line);border-radius:0;padding:18px 10px 0;font-size:.75rem}.side-help p{margin-top:6px;font-size:.75rem}.side-help a{font-size:.75rem;font-weight:600}.profile{font-size:.8125rem}.profile small{font-size:.6875rem}.avatar{font-size:.75rem}.topbar{height:76px;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(18px);padding-inline:36px}.breadcrumbs{font-size:.8125rem;gap:12px}.breadcrumbs strong{font-weight:600}.topbar-right,.date-label{font-size:.75rem}.online{gap:8px}.content{padding:34px 36px 28px;max-width:1530px}.page-heading{margin-bottom:27px;align-items:center}.page-heading .sub{margin-top:9px}.btn{font-size:.8125rem;font-weight:600;border-radius:11px;min-height:44px;padding:11px 16px;box-shadow:0 1px 1px #172e2204}.btn.primary{background:#23754c;border-color:#23754c;color:#fbfffc}.btn.primary:hover{background:#1d643f;border-color:#1d643f}.btn.light{background:#e2eddf;border-color:#e2eddf;color:#234e33}.btn.small{font-size:.75rem;min-height:36px}.btn.ghost{box-shadow:none;font-size:.8125rem}.welcome{background:#e9f2eb;border:none;padding:24px 30px;grid-template-columns:1.35fr 1fr;min-height:210px;border-radius:22px}.welcome h2{font-size:clamp(1.5rem,2.1vw,2rem);line-height:1.2;font-weight:650;letter-spacing:-.045em;margin:11px 0 13px}.welcome p{font-size:.875rem;max-width:450px;line-height:1.65}.welcome .eyebrow{color:#4f6956}.eco-art{width:100%;height:190px;object-fit:contain;filter:none}.stats{margin-block:23px 26px;border-radius:20px;border-color:var(--line)}.stat{padding:22px}.stat-label{font-size:.8125rem;line-height:1.3;margin-bottom:14px}.stat-value{font-size:1.875rem;font-weight:650;letter-spacing:-.045em}.stat-value small{font-size:.875rem;font-weight:500;letter-spacing:0}.stat-foot{font-size:.75rem;line-height:1.5;margin-top:10px}.panel{padding:24px;border-color:var(--line);border-radius:20px;box-shadow:0 2px 6px #1a302704}.panel-title p{font-size:.8125rem}.tag{font-size:.6875rem;font-weight:600;padding:5px 8px;border-radius:6px}.chart{height:210px}.chart text{font-family:inherit;font-size:11px}.chart .total{font-size:12px;font-weight:600}.chart .bar{fill:#cfded1}.chart .bar.current{fill:#23754c}.chart-legend{font-size:.75rem}.dashboard-grid{grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr);gap:22px}.campaign{background:#f3eee1;border-color:#e9e2d5}.campaign h2{font-size:1.75rem;font-weight:650;letter-spacing:-.04em;line-height:1.15;margin-top:18px}.campaign p{font-size:.8125rem}.campaign .campaign-copy{max-width:64%}.campaign .campaign-art{width:120px;height:130px;object-fit:contain;right:4px;top:54px;opacity:1}.campaign progress{margin-top:24px}.progress-caption{font-size:.75rem;line-height:1.5;margin-top:10px}.link{font-size:.8125rem;font-weight:600}.table-panel{padding:0}.table-panel .panel-title{padding:23px 24px 18px}table{font-size:.8125rem}thead{background:#f2f5f1;font-size:.6875rem;letter-spacing:.035em}th{padding:13px 23px}td{padding:16px 23px;border-top-color:var(--line)}.member-cell small{font-size:.6875rem;margin-top:4px}.member-cell .avatar{width:34px;height:34px;font-size:.6875rem}.table-foot{font-size:.75rem;padding:14px 24px}.money-check{background:#e9f2eb;border-color:#dbe7dc;padding:17px 20px;gap:13px;font-size:.8125rem;border-radius:14px}.money-check .detail{font-size:.75rem}.footer{font-size:.6875rem;line-height:1.6;margin-top:30px}.field>span,.label{font-size:.875rem;font-weight:600}.field small{font-size:.75rem;line-height:1.5}.input{min-height:46px;font-size:1rem;border-radius:10px;border-color:#cbd5cc;padding:11px 13px;background:var(--surface);color:var(--ink)}.input:focus{border-color:#23754c;outline:3px solid #23754c26;outline-offset:1px}.category-choice{border-radius:13px;min-height:108px}.category-choice strong{font-size:.875rem;font-weight:600}.category-choice small{font-size:.75rem}.category-choice:hover,.category-choice.selected{background:var(--light);border-color:#8bad93}.member-summary{background:#204d36;color:#f5faf6;border-color:transparent}.member-summary .sub,.member-summary .muted{color:#d0e0d4}.member-summary .balance{font-size:2.25rem;font-weight:650;letter-spacing:-.05em}.member-summary .avatar{background:#e0ecdf;color:#204d36}.summary-line{font-size:.875rem}.summary-line small{font-size:.75rem}.summary-line.total{font-size:1.35rem;font-weight:650}.cart-item{font-size:.875rem}.cart-item small,.cart-empty,.error,.notice,.checkbox-label{font-size:.8125rem}.cart-item small{margin-top:6px}.icon-btn{width:36px;height:36px;border-radius:8px}.stock-card .stock-amount{font-size:2rem;font-weight:650}.stock-card p{font-size:.8125rem}.stock-card .btn{font-size:.8125rem}.stock-grid{gap:20px}.tabs a{font-size:.875rem;min-height:44px;display:flex;align-items:center}.big-number{font-weight:650;letter-spacing:-.055em}.device-strip{font-size:.8125rem;line-height:1.6;flex-wrap:wrap}.receipt{border-radius:20px}.receipt-header h1{font-size:1.5rem}.receipt-header p{font-size:.8125rem}.receipt .summary-line{font-size:.875rem}.about-hero{background:var(--light)}.about-hero h1{font-size:clamp(2rem,4vw,3rem);font-weight:650;letter-spacing:-.06em}.about-hero p,.about-list p{font-size:.9375rem}.about-list h2{font-size:1.25rem}.feature-notes{font-size:.9375rem;line-height:1.8}.kiosk .brand img{background:var(--light)}.kiosk nav a{font-size:1rem;min-height:56px}.kiosk p{font-size:1rem}.kiosk .sub{font-size:.9375rem}.kiosk .field>span{font-size:1rem}.kiosk .member-summary .balance{font-size:3rem;font-weight:650}.kiosk .field .input{font-size:1.0625rem}.kiosk .btn{font-size:1rem}.price-board{background:#1b4730}.price-board .brand img{background:#dcebdc}.price-board .sub,.board-note{color:#d0ded2}.price-board .sub{font-size:1rem}.price-board .eyebrow{font-size:.75rem}.price-line strong{font-size:1.25rem;font-weight:500}.price-line b{font-size:1.6rem;font-weight:600;color:#cfe9d3}.rank-panel h2{color:#cfe9d3;font-size:1.5rem}.rank-line{font-size:.9375rem}.rank-line .rank-number{color:#cfe9d3}.board-note{font-size:.875rem}.rank-line .sub{font-size:.8125rem}.price-list{margin-top:35px}.hero-illustration{max-width:370px;justify-self:center}.product-illustration{height:230px;width:100%;object-fit:contain;margin-block:12px 4px}.about-hero .eco-art{height:260px}.chart .grid-line{stroke:var(--line)}:focus-visible{outline:3px solid #287c53;outline-offset:3px}.menu-button{min-width:44px;min-height:44px}
@media(max-width:1150px){:root{--sidebar:224px}.content{padding-inline:26px}.topbar{padding-inline:26px}.stat{padding:19px 16px}.stat-value{font-size:1.625rem}.welcome{grid-template-columns:1.35fr 1fr;padding:26px}.welcome h2{font-size:1.75rem}.welcome p{font-size:.8125rem}.campaign .campaign-art{width:100px}.campaign .campaign-copy{max-width:68%}}
@media(max-width:960px){.dashboard-grid{grid-template-columns:1fr}.campaign .campaign-copy{max-width:70%}.campaign .campaign-art{width:165px;height:160px;right:25px;top:12px}.campaign p{max-width:70%}.welcome{grid-template-columns:1.4fr 1fr}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stat:nth-child(3),.stat:nth-child(4){border-top:1px solid var(--line)}.stat:nth-child(3):before{display:none}.side-help{display:none}.form-grid{grid-template-columns:1fr}.category-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.form-grid .member-summary{order:-1}}
@media(max-width:650px){body{font-size:1rem}.sidebar{width:min(290px,calc(100vw - 44px));top:35px;height:calc(100dvh - 35px);padding:22px 14px;box-shadow:200px 0 0 200px #172e2240}.sidebar nav a{font-size:.9375rem;min-height:44px}.sidebar .nav-label{padding-top:14px}.brand{font-size:1.625rem}.topbar{height:68px;padding-inline:15px}.breadcrumbs{gap:7px;font-size:.75rem}.date-label{font-size:.6875rem}.content{padding:26px 18px}.page-heading{gap:18px}.page-heading h1{font-size:1.9rem}.page-heading .sub{font-size:.875rem}.btn,.btn.small{min-height:44px;font-size:.875rem}.page-heading .actions{gap:10px}.welcome{grid-template-columns:minmax(0,1fr) 110px;min-height:235px;padding:23px 21px}.welcome h2{font-size:1.5rem;line-height:1.2}.welcome .eyebrow{font-size:.625rem;letter-spacing:.07em}.welcome p{font-size:.8125rem}.welcome .eco-art{height:175px;width:155px;transform:translateX(-12px)}.welcome .hero-illustration{max-width:none}.stats{margin-block:20px;grid-template-columns:repeat(2,minmax(0,1fr))}.stat{padding:19px 16px}.stat-label{font-size:.75rem}.stat-value{font-size:1.625rem;white-space:normal;overflow-wrap:anywhere}.stat-foot{font-size:.6875rem}.panel{padding:21px}.table-panel{padding:0}.table-panel .panel-title{padding:20px;align-items:flex-start}.panel-title h2{font-size:1.0625rem}.panel-title p{font-size:.8125rem}.chart{height:180px}.chart-legend{font-size:.6875rem;flex-wrap:wrap}.campaign .campaign-art{width:120px;height:130px;right:5px;top:35px}.campaign .campaign-copy{max-width:69%}.campaign h2{font-size:1.7rem}.campaign p{font-size:.8125rem}.campaign .progress-caption{font-size:.75rem}.money-check p{font-size:.8125rem}.money-check .detail{font-size:.75rem}.money-check{padding:16px}.footer{font-size:.6875rem;line-height:1.65}.category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.category-choice{padding:15px;min-height:112px}.category-choice strong{font-size:.875rem}.field>span,.label{font-size:.9375rem}.field small{font-size:.8125rem}.checkbox-label{font-size:.875rem;min-height:44px}.checkbox-label input{min-width:20px;min-height:20px}.member-summary .balance{font-size:2.1rem}.cart-item{font-size:.875rem}.cart-item small{font-size:.75rem}.summary-line{font-size:.875rem}.notice,.error{font-size:.875rem}.icon-btn{min-height:44px;min-width:44px}.table-foot{font-size:.6875rem}.kiosk .member-summary .balance{font-size:2.75rem}.kiosk .brand{font-size:1.65rem}.kiosk .btn{font-size:.875rem;min-height:56px}.kiosk .sub{font-size:.9375rem}.kiosk p{font-size:1rem}.kiosk nav{justify-content:flex-start;gap:6px}.kiosk nav a{min-height:56px;font-size:.875rem}.price-line strong{font-size:1rem;max-width:55%}.price-line b{font-size:1.25rem}.price-line b small{font-size:.75rem}.price-board h1{font-size:2.5rem}.price-board .sub{font-size:.9375rem}.price-board .board-head .eyebrow{font-size:.6875rem}.price-board .btn{font-size:.8125rem}.rank-line{font-size:.875rem}.device-strip span:last-child{margin-left:0}.stock-card .btn{font-size:.875rem}.search-row .tag{font-size:.75rem}.about-hero{padding:26px}.about-hero h1{font-size:2.25rem}.about-hero p{font-size:1rem}.about-hero .eco-art{display:block;height:210px;width:100%}.about-hero{gap:15px}.about-list p{font-size:1rem}.feature-notes{font-size:.9375rem}.receipt .summary-line{font-size:.875rem}}

:root:where([data-theme="dark"]) {--paper:#171c19;--surface:#222924;--ink:#eef4ef;--muted:#aebbb2;--line:#3b4940;--green:#98d9ad;--light:#2a3b2f;--lime:#c3dfc6;--forest:#204d36}
:where([data-theme="dark"]) .sidebar {background:#1d241f;border-color:var(--line)}
:where([data-theme="dark"]) .demo-bar {background:#222c24}
:where([data-theme="dark"]) .topbar {border-color:var(--line)}
:where([data-theme="dark"]) nav a.active {background:#334d3a;color:#d2efda}
:where([data-theme="dark"]) nav a:hover {background:#2b382e}
:where([data-theme="dark"]) .welcome {background:#293b2e}
:where([data-theme="dark"]) .welcome .eyebrow {color:#c7dcc8}
:where([data-theme="dark"]) .stats,:where([data-theme="dark"]) .panel,:where([data-theme="dark"]) .receipt {box-shadow:none}
:where([data-theme="dark"]) .campaign {background:#383426;border-color:#514c39}
:where([data-theme="dark"]) .campaign .eyebrow,:where([data-theme="dark"]) .campaign p {color:#d7d6bc}
:where([data-theme="dark"]) .tag {background:#2d4835;color:#c2e6cd}
:where([data-theme="dark"]) .tag.gold {background:#4a4124;color:#f0d89e}
:where([data-theme="dark"]) .tag.blue {background:#263f40;color:#b0e4df}
:where([data-theme="dark"]) .tag.neutral {background:#323c34;color:#c5d2c7}
:where([data-theme="dark"]) .tag.red {background:#4e2a29;color:#ffc4bd}
:where([data-theme="dark"]) .input {border-color:#526456}
:where([data-theme="dark"]) .category-choice {border-color:var(--line)}
:where([data-theme="dark"]) .category-choice:hover,:where([data-theme="dark"]) .category-choice.selected {border-color:#90b59a}
:where([data-theme="dark"]) .category-choice small {color:var(--muted)}
:where([data-theme="dark"]) thead {background:#29342c}
:where([data-theme="dark"]) td {border-color:var(--line)}
:where([data-theme="dark"]) .money-check {background:#293b2e;border-color:#405947}
:where([data-theme="dark"]) .avatar {background:#403d2f;color:#ecdfb5}
:where([data-theme="dark"]) .avatar.mint {background:#354b39;color:#d6ebd8}
:where([data-theme="dark"]) .member-summary .avatar {color:#204d36}
:where([data-theme="dark"]) .notice {background:#2d4032}
:where([data-theme="dark"]) .notice.warning {background:#463b24;color:#f3deb0}
:where([data-theme="dark"]) .stat-foot b {color:#addbbc}
:where([data-theme="dark"]) .chart .bar {fill:#3e5944}
:where([data-theme="dark"]) .chart .bar.current {fill:#98c9a2}
:where([data-theme="dark"]) .chart text {fill:var(--muted)}
:where([data-theme="dark"]) .chart .total {fill:var(--ink)}
:where([data-theme="dark"]) .legend-dot {background:#98c9a2}
:where([data-theme="dark"]) .btn {background:#29352c}
:where([data-theme="dark"]) .btn:hover {background:#354a3b}
:where([data-theme="dark"]) .btn.primary {background:#23754c}
:where([data-theme="dark"]) .btn.light {background:#c3dfc6;color:#234e33}
:where([data-theme="dark"]) .btn.danger,:where([data-theme="dark"]) .error {color:#ffb7b0}
:where([data-theme="dark"]) .side-help {border-color:var(--line)}
:where([data-theme="dark"]) .brand img {background:#dcebdc}
:where([data-theme="dark"]) .kiosk .brand img {background:#dcebdc}
:where([data-theme="dark"]) .online:before {background:#98d9ad}
:where([data-theme="dark"]) .stat-label svg {color:#a8b7a8}
:where([data-theme="dark"]) .money-check svg {color:#b4dec1}
:where([data-theme="dark"]) progress::-webkit-progress-bar {background:#455446}
:where([data-theme="dark"]) progress::-moz-progress-bar {background:#98c9a2}
:where([data-theme="dark"]) progress::-webkit-progress-value {background:#98c9a2}
:where([data-theme="dark"]) .group-plastik {color:#d8c38e}
:where([data-theme="dark"]) .group-kertas {color:#bacde9}
:where([data-theme="dark"]) .group-logam {color:#c3d3ce}
:where([data-theme="dark"]) .group-kaca {color:#b0d6c4}
:where([data-theme="dark"]) .icon-btn {background:#344136}
:where([data-theme="dark"]) .tabs a.active {color:#d3efdb}
:where([data-theme="dark"]) .price-board .sub,:where([data-theme="dark"]) .price-board .board-note {color:#d0ded2}
@media(prefers-contrast:more){:root{--muted:var(--ink);--line:#718578}.btn,.input,.panel,.stats{border-width:2px}.sub,.stat-foot,.footer{color:var(--ink)}}
@media(prefers-reduced-transparency:reduce){.topbar{background:var(--paper);backdrop-filter:none}.sidebar{box-shadow:none}}
@media print{body{color:#202725;background:#fff}.panel,.receipt,.stats{color:#202725;background:#fff;border-color:#bbb;box-shadow:none}.welcome,.campaign{background:#f3f6f0;color:#202725}.member-summary{background:#f3f6f0;color:#202725}.member-summary .sub{color:#48554c}}
.sidebar-dismiss{display:none;border:0;background:transparent;color:var(--ink);align-items:center;justify-content:center;min-width:44px;min-height:44px;position:absolute;right:6px;top:7px;border-radius:10px}
@media(max-width:650px){.sidebar-dismiss{display:flex}}
:root{--demo-height:44px}.demo-bar{min-height:var(--demo-height);padding-block:0}.demo-bar button{min-height:44px}.shell{min-height:calc(100dvh - var(--demo-height))}
@media(max-width:650px){.sidebar{top:var(--demo-height);height:calc(100dvh - var(--demo-height))}.breadcrumbs>span{display:none}.topbar-right{gap:10px}}

@media screen { :root:where([data-theme="dark"]) { color-scheme: dark; } }
.demo-controls{display:flex;align-items:center;gap:12px;flex-shrink:0}.pilihan-tema{min-height:44px;max-width:128px;border:1px solid #ffffff45;border-radius:9px;padding:6px 24px 6px 10px;background:#e9f2eb;color:#204d36;font:inherit;font-size:12px}.brand img{object-fit:contain;padding:3px;background:#e9f2eb}.receipt-header img{object-fit:contain;padding:3px;border-radius:10px;background:#e9f2eb}
@media(max-width:650px){.demo-bar{padding-inline:12px;gap:6px}.demo-controls{gap:6px}.demo-bar b{font-size:10px;letter-spacing:.02em}.demo-bar button{padding-inline:8px;font-size:11px}.pilihan-tema{max-width:108px;font-size:12px}}
@media print{.demo-controls{display:none}}