@font-face{font-family:PJS;src:url(/assets/fonts/PlusJakartaSans-Medium.ttf) format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:PJS;src:url(/assets/fonts/PlusJakartaSans-Bold.ttf) format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:PJS;src:url(/assets/fonts/PlusJakartaSans-ExtraBold.ttf) format("truetype");font-weight:800;font-display:swap}
:root{--ink:#111A15;--muted:#5B6660;--line:#E4E8E5;--bg:#F5F7F6;--card:#fff;--green:#0F4D32;--green2:#16704A;--mint:#E7F4EC;--yel:#FFC93C;--red:#B42318;--redbg:#FDECEA;--amber:#9A6700;--amberbg:#FFF4D6;--blue:#1D5FD1;--r:14px}
*{box-sizing:border-box;min-width:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:500 15px/1.55 PJS,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg)}
a{color:var(--green2)}
h1,h2,h3{line-height:1.2;margin:0 0 .4em;font-weight:800;letter-spacing:-.01em}
h1{font-size:26px}h2{font-size:19px}h3{font-size:16px}
p{margin:0 0 .8em}
code,.mono{font:500 13px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.muted{color:var(--muted)}.small{font-size:13px}
/* ---------- topbar ---------- */
.top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top .in{max-width:1180px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:800;font-size:18px}
.brand img{width:32px;height:32px}.brand b{color:var(--green2)}.brand .pill{font-size:11px;background:var(--ink);color:#fff;padding:3px 8px;border-radius:99px;letter-spacing:.06em}
.top nav{display:flex;gap:4px;margin-left:12px}
.top nav a{padding:8px 12px;border-radius:10px;text-decoration:none;color:var(--muted);font-weight:700}
.top nav a.on,.top nav a:hover{background:var(--mint);color:var(--green)}
.top .sp{flex:1}
.usage{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.bar{width:120px;height:8px;background:var(--line);border-radius:9px;overflow:hidden}.bar i{display:block;height:100%;background:var(--green2);border-radius:9px}
.bar.hot i{background:var(--red)}
.who{font-size:13px;color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:10px}
.who:hover{background:var(--bg)}
/* ---------- halaman ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:28px 24px 80px}
.head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.head .sp{flex:1}
.crumb{font-size:13px;color:var(--muted);margin-bottom:6px}.crumb a{color:var(--muted);text-decoration:none}.crumb a:hover{color:var(--green2)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.card+.card{margin-top:16px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.side{grid-template-columns:minmax(0,1fr) 340px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:11px;padding:11px 18px;font:700 15px PJS,system-ui,sans-serif;cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform .1s,background .15s}
.btn:active{transform:translateY(1px)}
.btn-p{background:var(--green2);color:#fff}.btn-p:hover{background:var(--green)}
.btn-g{background:#fff;color:var(--ink);border:1px solid var(--line)}.btn-g:hover{border-color:#c9d0cc}
.btn-d{background:var(--redbg);color:var(--red)}
.btn-sm{padding:7px 12px;font-size:13px;border-radius:9px}
.btn-lg{padding:14px 22px;font-size:16px}
.btn svg{width:18px;height:18px}
/* ---------- form ---------- */
label{display:block;font-weight:700;font-size:14px;margin:0 0 14px}
label .hint{display:block;font-weight:500;color:var(--muted);font-size:13px;margin-top:2px}
input,textarea,select{display:block;width:100%;margin-top:6px;padding:11px 13px;border:1px solid #CFD6D2;border-radius:10px;font:500 15px PJS,system-ui,sans-serif;color:var(--ink);background:#fff}
textarea{min-height:92px;resize:vertical}
input:focus,textarea:focus,select:focus{outline:2px solid #9CD3B4;border-color:var(--green2)}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.alert{padding:12px 14px;border-radius:11px;margin-bottom:16px;font-weight:600}
.alert.ok{background:var(--mint);color:var(--green)}.alert.err{background:var(--redbg);color:var(--red)}
/* ---------- kartu pixel ---------- */
.px{display:block;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s}
.px:hover{border-color:#B9D9C6;box-shadow:0 6px 20px rgba(15,77,50,.08)}
.px .t{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.dot{width:10px;height:10px;border-radius:50%;background:#C3CAC6;flex:0 0 auto}.dot.on{background:#22A060;box-shadow:0 0 0 4px #DCF3E6}.dot.err{background:var(--red);box-shadow:0 0 0 4px var(--redbg)}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}
.stat{background:var(--bg);border-radius:11px;padding:10px 12px}
.stat b{display:block;font-size:20px;font-weight:800}.stat span{font-size:12px;color:var(--muted)}
.empty{text-align:center;padding:48px 20px}
.empty svg{width:56px;height:56px;color:var(--green2)}
/* ---------- skor EMQ ---------- */
.emq{display:flex;align-items:center;gap:18px}
.ring{--v:0;width:108px;height:108px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;background:conic-gradient(var(--c,var(--green2)) calc(var(--v)*1%),var(--line) 0)}
.ring>div{width:84px;height:84px;border-radius:50%;background:#fff;display:grid;place-items:center;text-align:center}
.ring b{font-size:28px;font-weight:800;line-height:1}.ring small{font-size:11px;color:var(--muted)}
.ring.good{--c:#22A060}.ring.ok{--c:#5BAA2E}.ring.warn{--c:#D69E00}.ring.bad{--c:var(--red)}
.tag{display:inline-block;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:800}
.tag.good,.tag.ok{background:var(--mint);color:var(--green)}.tag.warn{background:var(--amberbg);color:var(--amber)}.tag.bad{background:var(--redbg);color:var(--red)}
.cov{display:grid;gap:9px;margin-top:4px}
.cov div{display:grid;grid-template-columns:130px minmax(0,1fr) 44px;align-items:center;gap:10px;font-size:13px}
.cov .b{height:8px;border-radius:9px;background:var(--line);overflow:hidden}.cov .b i{display:block;height:100%;background:var(--green2)}
.cov em{font-style:normal;text-align:right;font-weight:700}
.tips{margin:0;padding-left:18px}.tips li{margin-bottom:6px}
/* ---------- tab ---------- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:20px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:0 0 auto;padding:10px 14px;text-decoration:none;color:var(--muted);font-weight:700;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a.on{color:var(--green);border-color:var(--green2)}
/* ---------- tabel ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:8px 10px;border-bottom:1px solid var(--line)}
.tbl td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.scroll{overflow-x:auto}
.chips{display:flex;gap:4px;flex-wrap:wrap}
.chip{font-size:11px;font-weight:700;padding:2px 7px;border-radius:6px;background:var(--bg);color:#9AA39E}.chip.y{background:var(--mint);color:var(--green)}
.ok-t{color:#1B8A4E;font-weight:700}.err-t{color:var(--red);font-weight:700}
/* ---------- kode ---------- */
.code{position:relative;background:#0F1A14;color:#D7F5E3;border-radius:12px;padding:46px 16px 16px;overflow-x:auto;white-space:pre;font:500 13px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.code .copy{position:absolute;top:10px;right:10px;background:#24362C;color:#fff;border:0;border-radius:8px;padding:6px 10px;font:700 12px PJS,system-ui,sans-serif;cursor:pointer}
.code .copy:hover{background:#2F4639}
.steps{counter-reset:s;list-style:none;padding:0;margin:0}
.steps li{counter-increment:s;position:relative;padding:0 0 18px 44px}
.steps li:before{content:counter(s);position:absolute;left:0;top:-2px;width:30px;height:30px;border-radius:50%;background:var(--mint);color:var(--green);font-weight:800;display:grid;place-items:center}
.kv{display:grid;grid-template-columns:140px minmax(0,1fr);gap:8px 14px;font-size:14px}
.kv dt{color:var(--muted)}.kv dd{margin:0;font-weight:600;word-break:break-all}
/* ---------- halaman masuk ---------- */
.auth{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.auth .pitch{background:radial-gradient(1200px 500px at 0% 0%,#1E7A50 0,transparent 60%),#0E2A1D;color:#fff;padding:48px 56px;display:flex;flex-direction:column}
.auth .pitch .brand{color:#fff}.auth .pitch .brand b{color:var(--yel)}
.auth .pitch h1{font-size:40px;margin:56px 0 14px;max-width:560px}
.auth .pitch h1 span{color:var(--yel)}
.auth .pitch p.lead{font-size:17px;color:#CFE6D9;max-width:520px}
.feat{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:14px;max-width:540px}
.feat li{display:flex;gap:12px;color:#E4F2EA}.feat li svg{flex:0 0 22px;width:22px;height:22px;color:var(--yel);margin-top:1px}
.price{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:auto;padding-top:34px;max-width:560px}
.price div{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:12px}
.price b{display:block;font-size:18px}.price span{font-size:12px;color:#B9D5C5}
.auth .form{display:grid;place-items:center;padding:40px 24px;background:#fff}
.auth .box{width:100%;max-width:400px}
.seg{display:grid;grid-template-columns:1fr 1fr;background:var(--bg);border-radius:12px;padding:4px;margin-bottom:22px}
.seg a{text-align:center;padding:9px;border-radius:9px;text-decoration:none;color:var(--muted);font-weight:700}
.seg a.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
/* ---------- responsif ---------- */
@media (max-width:980px){.side{grid-template-columns:minmax(0,1fr)}.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.auth{grid-template-columns:minmax(0,1fr)}.auth .pitch{padding:28px 20px}.auth .pitch h1{font-size:28px;margin-top:28px}.price{margin-top:24px}}
@media (max-width:720px){
  .top .in{padding:10px 16px;gap:10px;flex-wrap:wrap}.top nav{order:3;width:100%;margin:0}.usage .bar{width:70px}
  .wrap{padding:20px 16px 60px}.g2,.g3{grid-template-columns:minmax(0,1fr)}.card{padding:16px}
  h1{font-size:22px}.kv{grid-template-columns:minmax(0,1fr)}.kv dt{margin-top:6px}
  .cov div{grid-template-columns:100px minmax(0,1fr) 40px}.emq{flex-direction:column;align-items:flex-start}
  .price{grid-template-columns:minmax(0,1fr)}
}
/* ---------- halaman depan (katalog) ---------- */
.btn-y{background:var(--yel);color:#2a1d00}.btn-y:hover{background:#ffd666}
.btn-o{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4)}.btn-o:hover{background:rgba(255,255,255,.08)}
body.lp{background:#fff}
.lp-in{max-width:1140px;margin:0 auto;padding:0 24px}
.lp .c{text-align:center}
.lp-top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.lp-top .lp-in{display:flex;align-items:center;gap:10px;padding-top:12px;padding-bottom:12px}
.lp-nav{display:flex;gap:2px;margin-left:16px}.lp-nav a{padding:8px 12px;border-radius:10px;color:var(--muted);text-decoration:none;font-weight:700}.lp-nav a:hover{background:var(--mint);color:var(--green)}
.lp-top .sp{flex:1}
.lp-hero{background:radial-gradient(900px 420px at 85% 10%,#E7F4EC 0,transparent 70%),radial-gradient(700px 400px at 0% 100%,#FFF4D6 0,transparent 65%);padding:64px 0 56px}
.lp-hero-g{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:center}
.lp-eyebrow{display:inline-block;background:var(--mint);color:var(--green);font-weight:800;font-size:13px;padding:5px 12px;border-radius:99px;margin-bottom:16px}
.lp-hero h1{font-size:46px;line-height:1.08;letter-spacing:-.02em;margin-bottom:16px}.lp-hero h1 span{color:var(--green2);background:linear-gradient(transparent 62%,#FFE59A 62%)}
.lp-hero .lead{font-size:18px;color:var(--muted);max-width:560px;margin-bottom:24px}
.mock{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 60px -20px rgba(15,77,50,.25);overflow:hidden}
.mock-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:var(--bg);border-bottom:1px solid var(--line)}
.mock-bar i{width:10px;height:10px;border-radius:50%;background:#D8DDDA}.mock-bar span{margin-left:10px;font-size:12px;color:var(--muted)}
.mock-body{padding:18px}
.mock-card{display:flex;gap:16px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:12px}
.mock-card .ring{width:92px;height:92px}.mock-card .ring>div{width:72px;height:72px}.mock-card .ring b{font-size:24px}
.mock-card>div:last-child{flex:1;display:grid;gap:6px}.mock-card .tag{justify-self:start}
.cov.mini div{grid-template-columns:84px minmax(0,1fr);font-size:12px;gap:8px}
.mock-list{display:grid;gap:6px}
.mock-list div{display:grid;grid-template-columns:86px 34px minmax(0,1fr) auto;align-items:center;gap:8px;font-size:13px;padding:9px 12px;background:var(--bg);border-radius:10px}
.mock-list em{font-style:normal;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mock-note{margin:10px 0 0;font-size:11px;color:#9AA39E;text-align:right}
.lp-sec{padding:72px 0}.lp-alt{background:var(--bg)}
.lp-sec h2{font-size:32px;margin-bottom:10px}.lp-sub{margin:0 auto 34px;max-width:560px}
.lp-pain h2{margin-bottom:28px}
.lp-pain .ic{font-size:28px;margin-bottom:8px}
.lp-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;counter-reset:s}
.lp-steps li{counter-increment:s;background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;position:relative}
.lp-steps li:before{content:counter(s);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--green2);color:#fff;font-weight:800;margin-bottom:14px}
.lp-steps b{display:block;font-size:18px;margin-bottom:6px}.lp-steps span{color:var(--muted)}
.lp-feat .card h3{margin-bottom:6px}.lp-feat .card p{margin:0}
.lp-soon{margin-top:18px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}.lp-soon p{margin:0;color:var(--muted)}
.lp-cmp{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;max-width:880px;margin:24px auto 0}
.lp-cmp th,.lp-cmp td{text-align:center;padding:14px 12px}.lp-cmp td:first-child,.lp-cmp th:first-child{text-align:left;font-weight:700}
.lp-cmp svg{width:20px;height:20px;color:#1B8A4E;vertical-align:middle}.lp-cmp .x svg{color:#C2C8C4}
.lp-cmp .hl{background:#F1FAF4}.lp-cmp th.hl{color:var(--green)}
.lp-price{align-items:stretch}.lp-price .card{display:flex;flex-direction:column;gap:10px;padding:26px}
.lp-price .best{border:2px solid var(--green2);box-shadow:0 20px 40px -24px rgba(15,77,50,.4)}.lp-price .best .tag{align-self:flex-start}
.lp-price .pr{font-size:34px;font-weight:800}.lp-price .pr small{font-size:15px;color:var(--muted);font-weight:600}
.lp-price .btn{margin-top:auto}
.lp-ul{list-style:none;padding:0;margin:4px 0 8px;display:grid;gap:8px}.lp-ul li{padding-left:24px;position:relative}.lp-ul li:before{content:"";position:absolute;left:2px;top:7px;width:12px;height:7px;border-left:2.5px solid var(--green2);border-bottom:2.5px solid var(--green2);transform:rotate(-45deg)}
.lp-faq{max-width:780px}.lp-faq h2{margin-bottom:24px}
.lp-faq details{border:1px solid var(--line);border-radius:12px;padding:0 18px;margin-bottom:10px;background:#fff}
.lp-faq summary{cursor:pointer;font-weight:800;padding:16px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.lp-faq summary::-webkit-details-marker{display:none}.lp-faq summary:after{content:"+";font-size:22px;line-height:1;color:var(--green2)}
.lp-faq details[open] summary:after{content:"–"}.lp-faq details p{color:var(--muted);margin:0 0 16px}
.lp-cta{background:radial-gradient(900px 400px at 10% 0%,#1E7A50 0,transparent 60%),#0E2A1D;color:#fff;padding:72px 0}
.lp-cta h2{font-size:32px}.lp-cta p{color:#CFE6D9;margin-bottom:22px}
.lp-foot{border-top:1px solid var(--line);padding:22px 0;font-size:13px;color:var(--muted)}
.lp-foot .lp-in{display:flex;gap:16px;flex-wrap:wrap}.lp-foot .sp{flex:1}.lp-foot a{color:var(--muted)}
@media (max-width:900px){.lp-hero-g{grid-template-columns:minmax(0,1fr);gap:32px}.lp-hero h1{font-size:34px}.lp-steps{grid-template-columns:minmax(0,1fr)}.lp-nav{display:none}}
@media (max-width:720px){.lp-in{padding:0 16px}.lp-hero{padding:36px 0 40px}.lp-hero h1{font-size:30px}.lp-hero .lead{font-size:16px}.lp-sec{padding:48px 0}.lp-sec h2,.lp-cta h2{font-size:25px}
  .lp-top .btn-g{display:none}.mock-list div{grid-template-columns:72px 30px minmax(0,1fr)}.mock-list div span:last-child{display:none}.lp-cmp th,.lp-cmp td{padding:10px 8px;font-size:13px}}
.grid>.card+.card,.grid>form.card+.card,.grid>aside+aside{margin-top:0}