@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(/static/fonts/inter-latin-wght-normal.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(/static/fonts/inter-latin-ext-wght-normal.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* =====================================================================
   SITUS PUBLIK & HALAMAN MASUK — sistem tata letak v4 (menimpa style.css)
   Prinsip: satu lebar kontainer, ritme jarak 96px, garis tipis, ikon SVG
   ===================================================================== */
:root{--pw:1120px;--ink:#0b1324;--ink-2:#4a5a72;--hair:#e3e8f0;--paper:#fff;--wash:#f6f8fc;--accent:#2563eb;--accent-ink:#1d4ed8;
  --chk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  --arr:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d4ed8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2359687f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
@media (prefers-color-scheme:dark){:root{--ink:#e8edf6;--ink-2:#9fb0c8;--hair:#1f2b44;--paper:#111a2e;--wash:#0d1526}}
.pubsite,body.auth{background:var(--wash);color:var(--ink);font-size:16px;line-height:1.65}
.pubsite .wrap{max-width:var(--pw);padding-left:24px;padding-right:24px}
.pubsite h1,.pubsite h2,.pubsite h3{color:var(--ink);letter-spacing:-.025em}
.pubsite .muted,.pubsite .lead{color:var(--ink-2)}

/* header */
.pubsite .pub-head{background:color-mix(in srgb,var(--paper) 90%,transparent);border-bottom:1px solid var(--hair)}
.pubsite .pub-head .wrap{height:68px}
.pubsite .pub-nav{gap:2px}.pubsite .pub-nav a:not(.btn){padding:8px 14px;border-radius:8px;color:var(--ink-2);font-weight:500;font-size:15px}
.pubsite .pub-nav a:not(.btn):hover{color:var(--ink);background:var(--wash)}.pubsite .pub-nav a.on{color:var(--ink);font-weight:600}
.pubsite .pub-nav .btn{height:40px;padding:0 18px;border-radius:10px;margin-left:10px}

/* ritme bagian */
.pubsite .sect{padding:96px 24px}.pubsite .band .sect{padding:88px 24px}
.pubsite .sect-head{max-width:640px;margin:0 auto 56px}.pubsite .sect-head h2{font-size:clamp(1.8rem,3vw,2.4rem);line-height:1.15;margin:.35em 0 .45em;font-weight:750}
.pubsite .sect-head p{font-size:1.05rem;margin:0}
.pubsite .band{background:var(--paper);border-block:1px solid var(--hair)}
.pubsite .eyebrow{display:inline-flex;align-items:center;gap:8px;background:none;padding:0;border-radius:0;font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--accent-ink);margin-bottom:14px}
.pubsite .eyebrow::before{content:"";width:18px;height:2px;border-radius:2px;background:currentColor;opacity:.6}
.pubsite .sect-head .eyebrow{justify-content:center}

/* hero */
.pubsite .hero2{padding:88px 0 72px;background:radial-gradient(900px 380px at 78% -8%,rgba(59,130,246,.13),transparent 62%),var(--wash)}
.pubsite .hero-grid{gap:72px}.pubsite .hero2 h1{font-size:clamp(2.2rem,4.4vw,3.4rem);line-height:1.08;font-weight:800;margin:0 0 .5em;max-width:560px}
.pubsite .lead{font-size:1.15rem;max-width:520px;margin:0 0 1.8em}
.pubsite .cta{gap:12px}.pubsite .btn.big{height:50px;padding:0 28px;font-size:15.5px;border-radius:12px}
.pubsite .hero-points{margin-top:28px;gap:10px;color:var(--ink-2);font-size:15px}
.pubsite .hero-points li{position:relative;padding-left:28px}.pubsite .hero-points li::before{content:"";position:absolute;left:0;top:.35em;width:18px;height:18px;margin:0;background:var(--chk) center/contain no-repeat}
.pubsite .strip{background:var(--paper);border-block:1px solid var(--hair)}.pubsite .strip .wrap{gap:10px 36px;padding:20px 24px;font-size:14px}
.pubsite .strip b{color:var(--ink);font-weight:600;position:relative}.pubsite .strip b+b::before{content:"";position:absolute;left:-19px;top:50%;width:3px;height:3px;border-radius:50%;background:#b4bfd0}

/* kartu fitur, use case, langkah */
.pubsite .feat,.pubsite .use,.pubsite .steps4 li{background:var(--paper);border:1px solid var(--hair);border-radius:16px;box-shadow:none;padding:26px}
.pubsite .feat:hover,.pubsite .use:hover{box-shadow:0 12px 32px -16px rgba(11,19,36,.25);transform:translateY(-2px);border-color:#cfd8e6}
.pubsite .feats{gap:20px}.pubsite .feat h3,.pubsite .use h3,.pubsite .steps4 h3{font-size:1.06rem;font-weight:700;margin:.9em 0 .35em}.pubsite .feat p,.pubsite .use p,.pubsite .steps4 p{color:var(--ink-2);font-size:15px;margin:0}
.pubsite .ico,.pubsite .use .emo{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#eaf1ff;color:var(--accent-ink);font-size:0}
.pubsite .ico svg,.pubsite .use .emo .ic{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pubsite .usecases{gap:20px}.pubsite .qchips{margin-top:14px}.pubsite .qchips i{background:var(--wash);border:1px solid var(--hair);color:var(--ink-2);font-weight:500;padding:3px 11px}
.pubsite .steps4{gap:20px;counter-reset:s}.pubsite .steps4 b{width:32px;height:32px;font-size:14px;background:var(--ink);color:var(--paper)}
.pubsite .trust .feat h3{margin-top:0}

/* showcase panel */
.pubsite .shotwrap{max-width:1040px}.pubsite .browser{border-radius:16px;border:1px solid var(--hair);box-shadow:0 30px 70px -30px rgba(11,19,36,.4)}
.pubsite .shottabs button{border-color:var(--hair);color:var(--ink-2);font-weight:600}.pubsite .shottabs button.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* harga */
.pubsite .plan{border:1px solid var(--hair);border-radius:18px;padding:30px;box-shadow:none;background:var(--paper)}
.pubsite .plan.hl{border:1.5px solid var(--accent);box-shadow:0 20px 50px -24px rgba(37,99,235,.45)}
.pubsite .plan h3{font-size:1.1rem}.pubsite .plan .price{font-size:2.1rem;letter-spacing:-.03em;font-weight:800;margin:.5em 0 .1em}
.pubsite .ribbon{top:-13px;left:28px;font-size:11.5px;letter-spacing:.04em;padding:4px 12px}
.pubsite .ticks{list-style:none;padding:0;margin:18px 0 22px}.pubsite .ticks li{position:relative;padding:5px 0 5px 28px;font-size:15px}
.pubsite .ticks li::before{content:"";position:absolute;left:0;top:.62em;width:16px;height:16px;background:var(--chk) center/contain no-repeat;color:transparent}
.pubsite .ticks.small li{font-size:14px;padding:3px 0 3px 26px}
.pubsite .plan .morefeat summary{color:var(--accent-ink);font-size:14px}
.pubsite .arrowlink::after,.pubsite .plan .altlink::after{content:"";display:inline-block;width:14px;height:14px;margin-left:6px;vertical-align:-2px;background:var(--arr) center/contain no-repeat}
.pubsite .center>.arrowlink{display:inline-block;padding:10px 6px;font-weight:600}
.pubsite .inclall .feat{padding:22px}.pubsite .pricing-extra .narrow2{max-width:760px}

/* tabel fitur */
.pubsite .cmp{border:1px solid var(--hair);border-radius:16px;box-shadow:none;background:var(--paper)}.pubsite .cmp th,.pubsite .cmp td{border-bottom:1px solid var(--hair);padding:14px 20px}
.pubsite .cmp thead th{background:var(--paper);font-size:15px;border-bottom:1px solid var(--hair)}.pubsite .cmp tr.grp th{background:var(--wash);color:var(--ink-2);font-size:11.5px;letter-spacing:.1em;padding:10px 20px}
.pubsite .cmp .yes{width:22px;height:22px;background:#dcfce7;display:inline-grid;place-items:center;border-radius:50%;font-size:0}.pubsite .cmp .yes .ic{width:13px;height:13px;fill:none;stroke:#166534;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}.pubsite .cmp .no{color:#a6b2c4}
.pubsite .cmp tr.hlcol td:nth-child(3),.pubsite .cmp th.hlcol{background:color-mix(in srgb,var(--accent) 5%,transparent)}

/* FAQ */
.pubsite details.card{background:var(--paper);border:1px solid var(--hair);border-radius:14px;box-shadow:none;padding:0;margin:0 0 12px;overflow:hidden}
.pubsite details.card>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;font-weight:600;color:var(--ink);min-height:56px}
.pubsite details.card>summary::-webkit-details-marker{display:none}.pubsite details.card>summary::after{content:"";flex:none;width:18px;height:18px;background:var(--chev) center/contain no-repeat;transition:transform .2s}
.pubsite details.card[open]>summary::after{transform:rotate(180deg)}.pubsite details.card>p{margin:0;padding:0 22px 20px;color:var(--ink-2)}

/* ajakan akhir */
.pubsite .cta-band{background:linear-gradient(135deg,#0f1f3d,#1d4ed8);padding:88px 24px}.pubsite .cta-band h2{font-size:clamp(1.7rem,3vw,2.3rem);font-weight:750;color:#fff}.pubsite .cta-band p{color:#c7d6f2;font-size:1.05rem}

/* footer */
.pubsite .pub-foot{background:var(--paper);border-top:1px solid var(--hair);padding:64px 0 0}.pubsite .foot-grid{gap:40px}
.pubsite .foot-grid h4{color:var(--ink-2);font-size:12px;letter-spacing:.12em;margin-bottom:14px}.pubsite .foot-grid a:not(.logo){color:var(--ink-2);padding:5px 0;font-size:15px}.pubsite .foot-grid a:not(.logo):hover{color:var(--ink)}
.pubsite .foot-bot{border-top:1px solid var(--hair);margin-top:48px;padding:22px 24px;color:var(--ink-2);font-size:13.5px}

/* halaman dalam (fitur, harga, demo, legal, daftar) */
.pubsite .pagehero{max-width:720px;padding:0}.pubsite .pagehero h1{font-size:clamp(2rem,3.6vw,2.8rem);font-weight:800;line-height:1.12;margin:0 0 .4em}.pubsite .pagehero p{font-size:1.1rem}
.pubsite section.pad{padding-top:72px;padding-bottom:88px}
.pubsite .legal{max-width:760px}.pubsite .prose{background:var(--paper);border:1px solid var(--hair);border-radius:16px;box-shadow:none;padding:32px 36px}.pubsite .prose p{color:var(--ink);line-height:1.75}.pubsite .prose p b{color:var(--accent-ink)}

/* daftar */
.pubsite .regpage{padding-top:72px}.pubsite .regform{background:var(--paper);border:1px solid var(--hair);border-radius:20px;box-shadow:0 24px 60px -34px rgba(11,19,36,.3);padding:32px}
.pubsite .regform legend{font-size:.95rem;letter-spacing:-.01em;margin-bottom:14px}.pubsite .pickcard{border:1px solid var(--hair);border-radius:14px;background:var(--paper)}.pubsite .pickcard.on{border-color:var(--accent);background:#f3f7ff;box-shadow:0 0 0 3px rgba(37,99,235,.14)}
.pubsite .regsum{border:1px solid var(--hair);box-shadow:none;border-radius:16px}.pubsite .regsum .ticks li{padding-top:3px;padding-bottom:3px}
.pubsite .regsteps b{background:var(--ink);color:var(--paper)}
.pubsite .entcall{background:#f1faf5;border:1px solid #bfe6cf;border-radius:14px}
.pubsite .okbadge svg{stroke:#16a34a}

/* demo */
.pubsite .demogrid{gap:56px;margin-top:8px}.pubsite .demoside{background:var(--paper);border:1px solid var(--hair);border-radius:18px;box-shadow:none;padding:28px}.pubsite .demoside h3{font-size:1.1rem}

/* masuk / auth */
body.auth{background:var(--wash)}.auth-aside{background:radial-gradient(800px 420px at 8% -10%,rgba(96,165,250,.28),transparent 60%),linear-gradient(165deg,#0b1324,#12254a)}
.auth-copy li::before{content:"";width:22px;height:22px;border-radius:50%;background:rgba(34,197,94,.18) var(--chk) center/12px no-repeat;color:transparent}
.auth-copy h2{font-weight:750}.auth-main .loginbox h2{font-weight:750}.auth-main .loginbox input{background:var(--paper);border-color:#d3dbe8}
.auth-main .backhome{display:inline-flex;align-items:center;gap:6px}.auth-main .backhome::before{content:"";width:14px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2359687f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 18l-6-6 6-6'/%3E%3C/svg%3E") center/contain no-repeat}
.nf-ico{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 12px;border-radius:50%;background:#eaf1ff;color:#1d4ed8}.nf-ico svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

@media(max-width:860px){.pubsite .sect{padding:64px 20px}.pubsite .band .sect{padding:56px 20px}.pubsite .sect-head{margin-bottom:36px}.pubsite .hero2{padding:48px 0 40px}.pubsite .hero-grid{gap:36px}.pubsite section.pad{padding-top:44px;padding-bottom:56px}.pubsite .pub-head .wrap{height:62px}.pubsite .prose{padding:22px}.pubsite .regform{padding:22px}.pubsite .cta-band{padding:60px 20px}.pubsite .pub-foot{padding-top:44px}}

/* penyempurnaan tahap 2 */
.pubsite .hero2 h1{font-size:clamp(2.1rem,3.9vw,3.05rem);max-width:600px}
.pubsite section.pad>.pagehero+*,.pubsite section.pad>p.muted+.grid3{margin-top:44px}
.pubsite section.pad>.eyebrow+h1+p.muted{margin-bottom:0}.pubsite section.pad>p.muted+.grid3.plans{margin-top:44px}
.pubsite .plan .price small{font-size:.9rem;font-weight:500;color:var(--ink-2);letter-spacing:0}
.pubsite .plan .price+p{margin-bottom:0}
.pubsite .morefeat>summary{list-style:none;display:flex;align-items:center;gap:6px}.pubsite .morefeat>summary::-webkit-details-marker{display:none}
.pubsite .morefeat>summary::after{content:"";width:14px;height:14px;background:var(--chev) center/contain no-repeat;transition:transform .2s}.pubsite .morefeat[open]>summary::after{transform:rotate(180deg)}
.regform .pk-price small{display:inline;margin:0}
.auth-slot .backhome{display:inline-flex;margin:0 0 28px}
@media(max-width:860px){.auth-slot .backhome{margin-bottom:18px}}

.msg time em.tick{display:inline-flex;margin-left:3px;vertical-align:-2px}.msg time em.tick svg{width:13px;height:13px;fill:none;stroke:#38bdf8;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}.msg.out time em.tick svg{stroke:#bae6fd}
.float i .ic{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}.float i{font-size:0}
@media(max-width:560px){.pubsite .eyebrow{font-size:11px;letter-spacing:.09em;gap:6px}.pubsite .eyebrow::before{width:12px}.pubsite .hero2 h1{font-size:2.05rem}}
@media(max-width:820px){a.logo,.altlink,.auth-main p a,.foot a,.legal a{display:inline-flex;align-items:center;min-height:44px}}
@media(max-width:820px){.authlinks a,.backhome{display:inline-flex;align-items:center;min-height:44px}.authlinks{gap:6px 16px;flex-wrap:wrap}}
body,input,select,textarea,button{font-family:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
/* v2: harga di hero, kalkulator, pembandingan, tombol WhatsApp melayang */
.pubsite .hero-price{margin:18px 0 0;font-size:15px;color:var(--ink-2,#475569);display:flex;gap:8px;align-items:center;flex-wrap:wrap}.pubsite .hero-price b{color:var(--ink,#0f172a)}.pubsite .hp-badge{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;border-radius:99px;background:#dbeafe;color:#1d4ed8}
.pubsite .calc{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px;max-width:960px;margin:0 auto;align-items:stretch}
.pubsite .calc-in,.pubsite .calc-out{background:#fff;border:1px solid var(--hair,#e2e8f0);border-radius:20px;padding:26px;box-shadow:0 10px 30px rgba(15,23,42,.05)}
.pubsite .calc-in{display:grid;gap:22px;align-content:start}.pubsite .calc-in label{display:grid;gap:8px;font-weight:600;font-size:14.5px}.pubsite .calc-in input[type=range]{width:100%;accent-color:#2563eb}.pubsite .calc-in b{font-size:1.15rem;color:#1d4ed8}
.pubsite .calc-out{display:grid;gap:18px;align-content:space-between;background:linear-gradient(160deg,#0f1f3d,#1d4ed8);color:#fff;border:0}.pubsite .co-main span,.pubsite .co-sub span{display:block;font-size:13px;opacity:.8}.pubsite .co-main b{display:block;font-size:clamp(2.2rem,5vw,3rem);line-height:1.1;margin:4px 0}.pubsite .co-main small{opacity:.85;font-size:14px}
.pubsite .co-sub{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.2)}.pubsite .co-sub b{font-size:1.1rem}.pubsite .calc-out .btn{background:#fff;color:#1d4ed8;justify-self:start}
.pubsite .perday{margin:-6px 0 8px;font-size:13px;color:var(--muted,#64748b)}
.pubsite .firstpay{display:grid;gap:2px;margin:12px 0 14px;padding:12px 14px;border-radius:12px;background:#f1f5f9}.pubsite .firstpay span{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted,#64748b);font-weight:700}.pubsite .firstpay b{font-size:1.2rem}.pubsite .firstpay small{color:var(--muted,#64748b)}
.pubsite .cmp-wrap{overflow-x:auto;border:1px solid var(--hair,#e2e8f0);border-radius:16px;background:#fff}.pubsite .cmp2{width:100%;border-collapse:collapse;min-width:640px;font-size:14.5px}.pubsite .cmp2 th,.pubsite .cmp2 td{padding:12px 16px;border-bottom:1px solid var(--hair,#e2e8f0);text-align:center}.pubsite .cmp2 tbody th{text-align:left;font-weight:500}.pubsite .cmp2 thead th{font-size:15px;vertical-align:bottom}.pubsite .cmp2 thead th small{display:block;font-weight:500;color:var(--muted,#64748b);margin-top:2px}.pubsite .cmp2 thead th:first-child{text-align:left}.pubsite .cmp2 th.hl{background:#eff6ff;color:#1d4ed8}
.pubsite .cmp2 tr.grp th{background:#f6f8fb;text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted,#64748b);font-weight:700}.pubsite .cmp2 .yes{color:#16a34a;font-weight:700}.pubsite .cmp2 .no{color:#cbd5e1}.pubsite .cmp2 tbody tr:last-child th,.pubsite .cmp2 tbody tr:last-child td{border-bottom:0}.pubsite .cmp2 tbody th:first-child{position:sticky;left:0;background:#fff}
.wa-float{position:fixed;right:18px;bottom:18px;z-index:40;display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:99px;background:#16a34a;color:#fff;font-weight:700;font-size:14px;text-decoration:none;box-shadow:0 10px 26px rgba(22,163,74,.38)}.wa-float svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2}.wa-float:hover{background:#15803d}
@media(max-width:860px){.pubsite .calc{grid-template-columns:minmax(0,1fr)}.wa-float span{display:none}.wa-float{padding:13px}}
@media(prefers-reduced-motion:reduce){.pubsite *{animation:none!important;transition:none!important}}

.pubsite .plan .setupline{min-height:3.1em;margin-bottom:0}