/* Situs dua lapis: staffahli.co (jasa, beranda) dan tambahlaba.id (alat, halaman Alat dan Coba). Satu tulang punggung lima langkah. */
:root{--bg:#FBFCFA;--surf:#FFFFFF;--fg:#1E2B25;--mut:#5A6A62;--line:#DCE3DE;--brand:#2B5646;--on-brand:#FFFFFF;--acc:#C04A2E;--olive:#8A7E4B;--soft:#EEF3EF;--soft2:#DDEBE3;--soft-line:#8FB09F;--band:#2B5646;--band-fg:#FFFFFF;--band-mut:#E3EEE8;--band-line:rgba(255,255,255,.35);--band-acc:#F2C9BC;--foot:#1F4033;--ok:#1B6E40;--ok-bg:#E3F1EA;--warn:#8A5200;--shadow:0 12px 32px rgba(31,64,51,.12)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0F1A15;--surf:#16241D;--fg:#E6EFE9;--mut:#9DB0A6;--line:#2A3D33;--brand:#7FBF9F;--on-brand:#0B1410;--acc:#E88468;--olive:#C2B673;--soft:#13221A;--soft2:#1E3328;--soft-line:#3E6A55;--band:#1B3A2D;--band-fg:#F2F7F4;--band-mut:#C9DCD1;--band-line:rgba(255,255,255,.25);--band-acc:#F2C9BC;--foot:#0B1410;--ok:#7FD1A1;--ok-bg:#1B3427;--warn:#E6B566;--shadow:0 12px 32px rgba(0,0,0,.4);color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0F1A15;--surf:#16241D;--fg:#E6EFE9;--mut:#9DB0A6;--line:#2A3D33;--brand:#7FBF9F;--on-brand:#0B1410;--acc:#E88468;--olive:#C2B673;--soft:#13221A;--soft2:#1E3328;--soft-line:#3E6A55;--band:#1B3A2D;--band-fg:#F2F7F4;--band-mut:#C9DCD1;--band-line:rgba(255,255,255,.25);--band-acc:#F2C9BC;--foot:#0B1410;--ok:#7FD1A1;--ok-bg:#1B3427;--warn:#E6B566;--shadow:0 12px 32px rgba(0,0,0,.4);color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:'Nunito Sans',system-ui,sans-serif;font-size:16px;line-height:1.55}
h1,h2,h3,.mo{font-family:Montserrat,system-ui,sans-serif}
h1,h2,h3{text-wrap:balance;margin:0}
a{color:var(--brand)}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.w{max-width:1120px;margin:0 auto;padding-inline:20px}
.sec{padding-block:64px}
.eb{font-family:Montserrat,sans-serif;font-weight:700;font-size:13px;color:var(--acc);letter-spacing:.06em;text-transform:uppercase}
h2{font-weight:800;font-size:clamp(26px,4vw,34px);line-height:1.2;color:var(--brand);margin-top:10px;max-width:760px}
.lead{font-size:17px;color:var(--mut);max-width:680px;margin:14px 0 0}
.btn{display:inline-block;text-decoration:none;background:var(--brand);color:var(--on-brand);font-family:Montserrat,sans-serif;font-weight:700;font-size:15px;padding:14px 24px;border-radius:999px;border:2px solid var(--brand);cursor:pointer}
.btn.o{background:transparent;color:var(--brand)}
.btn.a{background:var(--acc);border-color:var(--acc);color:#fff}
.row{display:flex;flex-wrap:wrap;gap:14px}
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:var(--surf);border:1px solid var(--line);border-radius:16px;padding:22px;min-width:0}
.card h3{font-size:18px;font-weight:700}
.card p{margin:8px 0 0;color:var(--mut);font-size:15px}
.nt{font-size:14px;color:var(--mut);margin:16px 0 0;max-width:760px}
.ph{color:var(--acc);font-weight:700}
/* nav */
header.top{background:var(--surf);border-bottom:1px solid var(--line);position:sticky;top:env(safe-area-inset-top,0px);z-index:20}
.nv{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;padding-block:12px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto}
.lg{width:38px;height:38px;border-radius:10px;background:var(--brand);color:var(--on-brand);display:grid;place-items:center;font-family:Montserrat;font-weight:800;font-size:18px}
.lt{font-family:Montserrat;font-weight:700;font-size:21px;color:var(--brand)}.lt b{color:var(--acc);font-weight:700}
.nv nav{display:flex;flex-wrap:wrap;gap:6px 20px;font-family:Montserrat;font-weight:600;font-size:14px}
.nv nav a{text-decoration:none;padding-block:6px;border-bottom:2px solid transparent;color:var(--fg)}
.nv nav a[aria-current=page]{border-color:var(--acc);color:var(--brand)}
.nv .btn{padding:10px 18px;font-size:14px}
.tg{background:none;border:1px solid var(--line);color:var(--fg);border-radius:999px;width:38px;height:38px;cursor:pointer;font-size:16px}
/* hero */
.hero{background:linear-gradient(180deg,var(--soft),var(--bg))}
.hero .w{padding-block:56px 36px;display:flex;flex-wrap:wrap;gap:40px;align-items:center}
.hero h1{font-weight:800;font-size:clamp(34px,6vw,52px);line-height:1.1;color:var(--brand)}
.hero h1 .o{color:var(--olive)}.hero h1 .t{color:var(--acc)}
.hero p{font-size:18px;color:var(--mut);max-width:540px;margin:20px 0 0}
.mascot{flex:1 1 280px;max-width:340px;width:100%;aspect-ratio:4/5;border-radius:24px;background:var(--soft2);border:2px dashed var(--soft-line);display:grid;place-items:center;text-align:center;padding:24px;color:var(--brand);font-family:Montserrat;font-weight:600;font-size:15px}
.ahli a{text-decoration:none;color:inherit;display:block}
.ahli .k{font-family:Montserrat;font-weight:700;font-size:13px;color:var(--acc)}
/* langkah */
.stp{display:flex;flex-direction:column;gap:14px;margin-top:24px}
.st{display:flex;gap:16px;border:1px solid var(--line);border-radius:18px;padding:20px;background:var(--surf)}
.no{width:34px;height:34px;border-radius:999px;background:var(--brand);color:var(--on-brand);font-family:Montserrat;font-weight:800;display:grid;place-items:center;flex:none}
.st h3{font-size:18px}.st p{margin:6px 0 0;color:var(--mut);font-size:15px}.st small{display:block;margin-top:8px;color:var(--mut);font-size:13px}
.st .btn{margin-top:12px;padding:10px 18px;font-size:14px}
.split{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start}
.split>*{min-width:0}
.mock{background:var(--surf);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
.mock .bar{display:flex;gap:8px;align-items:center;padding:12px 16px;background:var(--soft);border-bottom:1px solid var(--line);font-size:12px;color:var(--mut)}
.mock .bar i{width:10px;height:10px;border-radius:99px;background:#E2A394}.mock .bar i+i{background:#E6D28C}.mock .bar i+i+i{background:#9CC4AE}
.mock .bd{padding:18px;display:flex;flex-direction:column;gap:12px}
.kpi{display:flex;flex-wrap:wrap;gap:10px}.kpi div{flex:1 1 100px;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.kpi small{display:block;font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.04em}.kpi b{font-family:Montserrat;font-size:15px;font-variant-numeric:tabular-nums}
.ln{display:flex;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:12px;padding:10px 14px;font-size:14px}
.ln b{font-weight:700;white-space:nowrap}.ok{color:var(--ok)}.wn{color:var(--warn)}.mt{color:var(--mut)}
.tint{background:var(--soft)}
.pill{display:inline-block;font-size:14px;font-weight:700;color:var(--brand);background:var(--soft2);border:1px solid var(--soft-line);padding:7px 14px;border-radius:999px}
.dots{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.dots li{display:flex;gap:10px;font-size:15px;color:var(--mut)}.dots li:before{content:"";margin-top:9px;width:8px;height:8px;border-radius:99px;background:var(--acc);flex:none}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.chips span{border:1px solid var(--line);background:var(--surf);border-radius:12px;padding:10px 14px;font-weight:700;font-size:14px;color:var(--brand)}
.band{background:var(--band);color:var(--band-fg)}
.band h2{color:var(--band-fg)}.band .eb{color:var(--band-acc)}
.band .card{background:transparent;border-color:var(--band-line)}.band .card p,.band .nt{color:var(--band-mut)}
.band .dots li{color:var(--band-mut)}.band .dots li:before{background:var(--band-acc)}
.faq{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:26px}
.faq h3{font-size:17px;font-weight:700}.faq p{margin:8px 0 0;color:var(--mut);font-size:15px}
.cta{text-align:center}.cta h2{margin-inline:auto}.cta .row{justify-content:center;margin-top:26px}.cta .lead{margin-inline:auto}
footer{background:var(--foot);color:#E3EEE8}
footer .w{padding-block:44px;display:flex;flex-wrap:wrap;gap:30px}
footer div div{flex:1}footer .c{flex:1 1 180px;font-size:14px;line-height:1.9}footer .c b{display:block;font-family:Montserrat;font-size:16px;color:#fff;margin-bottom:8px}
footer a{color:#E3EEE8}
/* alat */
.bmc{display:grid;gap:10px;grid-template-columns:repeat(5,1fr)}
.bmc div{border:1px solid var(--line);background:var(--surf);border-radius:12px;padding:12px;font-size:13px;min-width:0}
.bmc b{display:block;font-family:Montserrat;font-size:13px;margin-bottom:4px}
.bmc .n{border-color:var(--brand);background:var(--soft)}
.bmc .c{border-style:dashed}
.bmc .w2{grid-column:span 2}.bmc .w5{grid-column:span 5}
@media(max-width:760px){.bmc{grid-template-columns:1fr 1fr}.bmc .w2,.bmc .w5{grid-column:span 2}}
.sheets{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.sheets span{font-family:ui-monospace,Menlo,monospace;font-size:12px;border:1px solid var(--line);background:var(--surf);padding:6px 10px;border-radius:8px}
.legend{display:flex;flex-wrap:wrap;gap:16px;font-size:13px;color:var(--mut);margin-top:14px}
.legend i{display:inline-block;width:14px;height:14px;border-radius:4px;border:1px solid var(--brand);background:var(--soft);vertical-align:-2px;margin-right:6px}.legend i.d{border-style:dashed;background:transparent}
/* coba */
.frame{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;box-shadow:var(--shadow);margin-top:20px}
.frame iframe{display:block;width:100%;height:min(86vh,980px);min-height:620px;border:0}
.hd{display:flex;flex-wrap:wrap;gap:12px;align-items:end;justify-content:space-between}
.tw{overflow-x:auto;margin-top:22px;border:1px solid var(--line);border-radius:16px;background:var(--surf)}
.tbl{width:100%;min-width:560px;border-collapse:collapse;font-size:15px}.tbl th,.tbl td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}.tbl tr:last-child td{border-bottom:0}.tbl th{font-family:Montserrat;font-size:12px;color:var(--mut);text-transform:uppercase;letter-spacing:.05em;background:var(--soft)}.tbl td.p{white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:700;color:var(--brand)}.tbl td small{display:block;color:var(--mut);font-size:13px}
.pr{font-family:Montserrat;font-weight:800;font-size:24px;margin-top:12px;font-variant-numeric:tabular-nums}.pr small{font-size:13px;font-weight:600;opacity:.85}
.pr{font-family:Montserrat;font-weight:800;font-size:24px;margin-top:12px;font-variant-numeric:tabular-nums}.pr small{font-size:13px;font-weight:600;opacity:.85}
.skip{position:absolute;left:-9999px;top:0;background:var(--brand);color:var(--on-brand);padding:10px 16px;z-index:99;border-radius:0 0 10px 0}.skip:focus{left:0}
.bc{font-size:14px;color:var(--mut);margin-bottom:6px}.bc ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}.bc li+li::before{content:"/";margin-right:6px;opacity:.6}.bc a{color:var(--mut)}
img.mascot{object-fit:cover;border:0;height:auto;display:block}
.hero .w.grid{display:grid;align-items:stretch}
@media (max-width:600px){.tbl{min-width:0;font-size:14px}.tbl th,.tbl td{padding:9px 8px}.tbl td.p{white-space:nowrap}}
.lgi{display:block;height:auto;max-width:100%}.logo{margin-right:auto}
footer .w+.w{padding-top:0;color:#C9DCD1}
.isi-artikel{max-width:760px}.isi-artikel h2{font-size:clamp(22px,3vw,28px);margin-top:36px}.isi-artikel h3{font-size:19px;margin-top:26px}.isi-artikel p,.isi-artikel li{font-size:17px;line-height:1.7}.isi-artikel ul,.isi-artikel ol{padding-left:22px}

/* tangga produk */
.tangga{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end}
.tangga li{position:relative;background:var(--surf);border:1px solid var(--line);border-radius:16px;padding:20px 18px;display:flex;flex-direction:column;min-width:0}
.tangga li:nth-child(1){min-height:330px}.tangga li:nth-child(2){min-height:370px}.tangga li:nth-child(3){min-height:410px}.tangga li:nth-child(4){min-height:450px}.tangga li:nth-child(5){min-height:490px}
.tangga li.puncak{border-color:var(--acc);border-width:2px}
.tangga .no{width:30px;height:30px;border-radius:99px;background:var(--acc);color:#fff;font:800 14px Montserrat;display:grid;place-items:center;margin-bottom:10px}
.tangga h3{font-size:17px;font-weight:700}
.tangga p{margin:8px 0 14px;color:var(--mut);font-size:14px;flex:1}
.tangga .btn{align-self:flex-start;font-size:14px;padding:10px 14px}
.tangga .pr{font-size:20px;margin-top:8px}
@media (max-width:1100px){.tangga{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}.tangga li,.tangga li:nth-child(n){min-height:0}}
@media (max-width:600px){.tangga{grid-template-columns:1fr}}

.tbl td.aksi{text-align:right;white-space:nowrap}.tbl td.aksi a{font:700 13px Montserrat;color:var(--acc);border:1px solid var(--acc);border-radius:99px;padding:5px 12px;text-decoration:none}

.tangga .lnk{margin-top:8px;font-size:13px;font-weight:600}
.band .lead{color:var(--band-mut)}.band .nt a,.band .lead a{color:var(--band-fg);text-decoration:underline}

/* ===== Desain v2 digabung: kartu layanan bergulir, hero maskot, pendaftaran ===== */
.btn.hj{background:var(--brand);color:var(--on-brand)}
.lay2{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr);gap:28px;align-items:center}
.lay2 .mk img{display:block;width:100%;max-width:260px;height:auto;border-radius:18px;margin-inline:auto}
@media(max-width:900px){.lay2{grid-template-columns:minmax(0,1fr)}.lay2 .mk{display:none}}
.gulir{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 18px;margin:18px -4px 0;scrollbar-width:thin}
.kl{flex:0 0 min(78vw,260px);scroll-snap-align:start;background:var(--surf);border:1px solid var(--line);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:12px;min-height:300px;text-decoration:none;color:var(--fg);box-shadow:0 14px 30px -20px rgba(31,63,52,.35)}
.kl h3{font-size:19px;line-height:1.25;color:var(--brand)}
.kl h3::after{content:"";display:block;width:44px;height:3px;background:var(--acc);margin-top:12px;border-radius:2px}
.kl p{font-size:14.5px;flex:1;color:var(--mut);margin:0}
.kl .hg{display:flex;align-items:center;justify-content:space-between;gap:10px}
.kl .pil{display:inline-flex;gap:8px;align-items:center;border:2px solid var(--brand);border-radius:999px;padding:6px 14px;font:700 12px Montserrat,sans-serif;color:var(--brand)}
.kl .ar{font:800 20px Montserrat,sans-serif;color:var(--brand)}
.kl.u{background:var(--acc);border-color:transparent}
.kl.u h3,.kl.u .ar,.kl.u p,.kl.u .pil{color:#fff}.kl.u h3::after{background:#fff}.kl.u .pil{border-color:#fff}
.reg2{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin:22px 0 34px}
.reg2 ol{margin:10px 0 0;padding-left:20px;display:grid;gap:6px;font-size:15px;color:var(--mut)}
.badge2{display:inline-block;font:700 12px Montserrat,sans-serif;border-radius:999px;padding:4px 12px;background:var(--soft);color:var(--brand)}
.badge2.t{background:var(--acc);color:#fff}

/* ===== SEO v2: panduan, ringkasan, daftar isi, byline, kartu terkait ===== */
.ringkas{border-left:5px solid var(--acc);background:var(--soft);padding:16px 20px;border-radius:0 14px 14px 0;margin:6px 0 20px}
.ringkas b{display:block;font:700 13px Montserrat,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--acc);margin-bottom:6px}
.ringkas p{margin:0;font-size:17px;line-height:1.65}
.toc{border:1px solid var(--line);border-radius:14px;padding:14px 20px;margin:0 0 10px;background:var(--surf)}
.toc b{font:700 13px Montserrat,sans-serif;color:var(--mut);text-transform:uppercase;letter-spacing:.06em}
.toc ol{margin:8px 0 0;padding-left:20px;display:flex;flex-wrap:wrap;gap:4px 28px}
.byline{font-size:14px!important;color:var(--mut)!important;max-width:none!important;margin-top:14px!important}
.isi-artikel ul,.isi-artikel ol{padding-left:22px}
.isi-artikel li{margin:6px 0}
a.rel{text-decoration:none;color:inherit;display:block}a.rel:hover{border-color:var(--brand)}
a.rel h3{color:var(--brand)}
.cmp td:last-child,.cmp th:last-child{background:var(--soft);font-weight:700}
.tbl tfoot th{border-top:2px solid var(--fg)}

/* Rev.1b: rapikan header dan kartu layanan */
.nv{row-gap:6px}
.nv nav{order:3;flex:1 0 100%;gap:4px 24px;padding-top:4px;border-top:1px solid var(--line)}
.nv .btn{order:1}.nv .tg{order:2}
.kl{flex:0 0 min(82vw,280px)}
.kl .hg{flex-wrap:wrap;align-items:flex-end}
.kl .pil{flex-direction:column;align-items:flex-start;gap:2px;border-radius:16px;padding:7px 14px;line-height:1.25;font-size:11px;letter-spacing:.03em;white-space:nowrap}
.kl .pil b{font-size:13px;letter-spacing:0}
/* Rev.1b: tangga produk rata dan tidak menumpuk */
.tangga{grid-template-columns:repeat(6,minmax(0,1fr));align-items:stretch;gap:18px}
.tangga li,.tangga li:nth-child(n){min-height:0;padding:22px 22px}
.tangga li:nth-child(-n+3){grid-column:span 2}.tangga li:nth-child(n+4){grid-column:span 3}
.tangga .pr small{display:block;font-size:13px;font-weight:600;margin-top:2px}
.tangga .btn{white-space:nowrap}
.tangga li>.lnk{margin-top:10px}
@media (max-width:1100px){.tangga{grid-template-columns:repeat(2,minmax(0,1fr))}.tangga li:nth-child(n){grid-column:auto}.tangga li:nth-child(5){grid-column:1/-1}}
@media (max-width:600px){.tangga{grid-template-columns:1fr}.tangga li:nth-child(5){grid-column:auto}
 .nv{flex-wrap:wrap;gap:8px 10px;padding-block:8px}.nv .btn{padding:8px 12px;font-size:13px}.lgi{width:88px;height:auto}
 .nv nav{flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;gap:4px 18px;scrollbar-width:none}.nv nav a{flex:0 0 auto}}

/* Rev.4: bagian utama lebih lega dan ringkas */
.hero h1{margin-bottom:22px}
.hero .lead2{font-size:clamp(18px,2.2vw,22px);line-height:1.5;color:var(--fg);margin:0 0 10px;max-width:34em}
.hero .lead2 b{color:var(--brand)}
.hero .sub2{font-size:17px;color:var(--mut);margin:0 0 18px;max-width:34em}
.chips2{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0 0 6px}
.chips2 li{font:700 13px Montserrat,sans-serif;color:var(--brand);background:var(--soft2);border:1px solid var(--soft-line);border-radius:999px;padding:7px 14px}
#satu-staff{padding-block:72px}
#satu-staff h2{max-width:20em;margin-bottom:10px}
#satu-staff .lead{max-width:34em}
#satu-staff .sub3{margin:44px 0 12px;font-size:18px}
#satu-staff .card.rel{text-decoration:none}
#satu-staff .card h3{margin-bottom:6px}
#satu-staff .card p{margin:0}
#satu-staff .tbl td{padding:14px 16px}
@media (max-width:600px){#satu-staff{padding-block:48px}}

/* Rev.5 tahap 1: header satu baris dengan menu Layanan */
.nv{flex-wrap:nowrap;gap:0 28px;padding-block:14px;align-items:center}
.nv nav{order:0;flex:1 1 auto;border-top:0;padding-top:0;flex-wrap:nowrap;gap:0 26px;justify-content:flex-end;align-items:center}
.nv .btn{order:0;white-space:nowrap;flex:0 0 auto}.nv .tg{order:0;flex:0 0 auto;margin-left:-10px}
.nv nav>a,.ddb{font:600 14.5px Montserrat,sans-serif;color:var(--fg);background:none;border:0;border-bottom:2px solid transparent;padding:8px 0;cursor:pointer;text-decoration:none;white-space:nowrap}
.nv nav>a:hover,.ddb:hover{color:var(--acc)}
.ddb.on,.nv nav>a[aria-current=page]{color:var(--brand);border-bottom-color:var(--acc)}
.dd{position:relative}
.dd-m{display:none;position:absolute;left:-14px;top:100%;min-width:230px;background:var(--surf);border:1px solid var(--line);border-radius:14px;padding:8px;box-shadow:0 18px 36px -18px rgba(31,63,52,.35);z-index:30}
.dd:hover .dd-m,.dd:focus-within .dd-m,.dd.open .dd-m{display:block}
.dd::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px}
.dd-m a{display:block;padding:10px 14px;border-radius:9px;font:600 14px Montserrat,sans-serif;color:var(--fg);text-decoration:none;border:0}
.dd-m a:hover,.dd-m a[aria-current=page]{background:var(--soft2);color:var(--brand)}
@media (max-width:980px){
 .nv{flex-wrap:wrap;gap:8px 10px;padding-block:8px}
 .logo{margin-right:auto}
 .nv nav{order:3;flex:1 0 100%;justify-content:flex-start;overflow-x:auto;gap:0 20px;border-top:1px solid var(--line);padding-top:2px;scrollbar-width:none}
 .nv nav>a,.ddb{padding:8px 0;flex:0 0 auto}
 .ddb{display:none}
 .dd,.dd-m{display:contents}.dd-m a{display:inline-block;padding:8px 0;border-radius:0;font:600 14.5px Montserrat,sans-serif;background:none;white-space:nowrap}
 .dd::after{display:none}
 .nv .btn{padding:8px 14px;font-size:13px}.nv .tg{margin-left:0}
}

/* Portofolio */
.pfg{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.pf{display:flex;flex-direction:column;gap:6px;padding:22px}
.pf h3{font-size:18px;line-height:1.3;color:var(--brand);margin:6px 0 0}
.pf .sek{color:var(--mut);font-size:14px;margin:0}
.pf p{margin:0}
.pf .tg2{display:flex;flex-wrap:wrap;gap:6px}
.pf .tg2 span{font:700 11.5px Montserrat,sans-serif;color:var(--acc);background:var(--soft2);border-radius:999px;padding:4px 10px}
@media (max-width:980px){.pfg{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.pfg{grid-template-columns:1fr}}

/* ===== Rev.6 Hero (tahap 2) ===== */
.hero .w{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:48px;align-items:center;padding-block:64px 52px}
.hero .w>div:first-child{min-width:0}
.hero h1{font-size:clamp(32px,4.6vw,50px);line-height:1.12;margin-bottom:24px}
.hero h1 .l{display:block}
.hero .lead2{font-size:clamp(18px,2vw,21px);margin:0 0 12px}
.hero .sub2{font-size:16.5px;margin:0 0 22px}
.hero .sub2 a{white-space:nowrap}
.hero .chips2{gap:10px 18px;margin:0}
.hero .chips2 li{background:none;border:0;padding:0;font:700 14px Montserrat,sans-serif;color:var(--brand);display:flex;align-items:center;gap:8px}
.hero .chips2 li::before{content:"✓";display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--acc);color:#fff;font-size:12px}
.hero .row{margin-top:30px!important}
.hero img.mascot{justify-self:end;max-width:300px}
@media(max-width:860px){.hero .w{grid-template-columns:1fr;gap:28px;padding-block:40px 32px}.hero img.mascot{justify-self:center;max-width:240px}}
.hero h1{font-size:clamp(30px,4vw,44px)}
.hero .sub2,.hero .lead2{max-width:40em}
.hero .w{grid-template-columns:minmax(0,1.6fr) minmax(0,.55fr);gap:40px}
.hero h1{font-size:clamp(28px,3.7vw,42px)}
.hero h1{font-size:clamp(28px,3.9vw,44px)}
.hero h1 .t{display:inline}

/* Rev.7 tahap 3: Satu Staff Backoffice */
#satu-staff .lengkap{margin-top:48px;padding:30px 28px 26px;background:var(--soft);border:1px solid var(--soft-line);border-radius:20px}
#satu-staff .lengkap .sub3{margin:0 0 18px;max-width:30em;font-size:20px;line-height:1.3}
#satu-staff .lengkap .card{background:var(--surf)}
#satu-staff .lengkap .nt{margin-top:18px}
#satu-staff .lengkap .nt a{color:var(--acc);font-weight:700}
@media(max-width:600px){#satu-staff .lengkap{padding:22px 18px}}
#satu-staff .tbl th{font:700 12px Montserrat,sans-serif;letter-spacing:.06em;color:var(--brand)}
#satu-staff .lengkap .nt{max-width:none}

/* Rev.8 tahap 3 diringkas: satu pita */
#satu-staff .lengkap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:0;padding:0;margin-top:28px;overflow:hidden}
#satu-staff .lengkap h3{margin:0 0 8px;font-size:18px;line-height:1.3;color:var(--brand)}
#satu-staff .lengkap p{margin:0;color:var(--mut)}
#satu-staff .lk1,#satu-staff .lk2{padding:26px 28px}
#satu-staff .lk1{background:var(--brand);color:#fff}
#satu-staff .lk1 h3{color:#fff}#satu-staff .lk1 p{color:#e3eee8}
#satu-staff .lk2 ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px}
#satu-staff .lk2 li{font-size:15px;color:var(--fg)}#satu-staff .lk2 li b{color:var(--acc)}
@media(max-width:760px){#satu-staff .lengkap{grid-template-columns:1fr}#satu-staff .lk1,#satu-staff .lk2{padding:20px}}
#satu-staff h2{max-width:26em}#satu-staff .lead{max-width:40em}

/* ===== Rev.9 tahap 2b: logo besar, hero lega, Satu Staff Backoffice ===== */
.lgi{width:170px;height:auto}
.nv{padding-block:12px}
@media(max-width:980px){.lgi{width:128px}}
@media(max-width:600px){.lgi{width:112px}}
.hero{background:linear-gradient(180deg,var(--soft) 0%,var(--bg) 100%);overflow:hidden}
.hero .w{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;padding-block:72px 80px;min-height:600px}
.hero h1{font-size:clamp(32px,4.4vw,54px);line-height:1.1;margin-bottom:26px}
.hero .lead2{font-size:clamp(18px,1.9vw,21px)}
.mw{position:relative;justify-self:end;width:100%;max-width:440px}
.mw::before{content:"";position:absolute;inset:36px -22px -22px 36px;border-radius:32px;background:var(--acc);opacity:.9}
.mw::after{content:"";position:absolute;inset:-18px 40px 40px -18px;border-radius:32px;background:var(--brand);opacity:.92}
.mw img.mascot{position:relative;z-index:1;display:block;width:100%;max-width:none;aspect-ratio:600/850;height:auto;border-radius:28px;object-fit:cover;box-shadow:0 24px 50px rgba(30,60,50,.22)}
@media(max-width:860px){.hero .w{grid-template-columns:1fr;gap:40px;padding-block:40px 56px;min-height:0}.mw{justify-self:center;max-width:300px}}

#satu-staff{padding-block:96px}
#satu-staff h2{font-size:clamp(28px,3.6vw,42px);line-height:1.15;max-width:22em}
#satu-staff .bar{display:block;width:64px;height:5px;border-radius:3px;background:var(--acc);margin:18px 0 20px}
#satu-staff .lead{margin-top:0;font-size:18px}
#satu-staff .grid.tiga{gap:22px;margin-top:40px!important}
#satu-staff .grid.tiga .card{padding:30px 28px 28px;display:block;transition:transform .15s,box-shadow .15s}
#satu-staff .grid.tiga .card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(30,60,50,.10)}
#satu-staff .nb{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:var(--brand);color:#fff;font:800 17px Montserrat,sans-serif;margin-bottom:18px}
#satu-staff .card h3{font-size:20px;margin-bottom:8px}
#satu-staff .card p{font-size:16px;line-height:1.55}
#satu-staff .lengkap{margin-top:34px}
@media(max-width:600px){#satu-staff{padding-block:56px}}
.hero .w{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:64px;min-height:580px}
.hero h1{font-size:clamp(30px,3.9vw,48px)}
.hero .sub2{max-width:none}
.mw{max-width:400px}
.mw::after{display:none}
.mw::before{inset:28px -20px -20px 28px;background:var(--brand);opacity:1}
.mw img.mascot{padding:0!important;border:0!important;background:var(--surf)!important;box-shadow:0 22px 46px rgba(30,60,50,.20)}
@media(max-width:860px){.hero .w{grid-template-columns:1fr;gap:44px;padding-block:36px 56px;min-height:0}.mw{justify-self:center;max-width:290px;width:80%}.hero h1{font-size:clamp(28px,8vw,36px)}}

/* ===== Rev.10 maskot baru (potongan transparan) ===== */
.mw{position:relative;justify-self:center;width:100%;max-width:430px;height:600px;display:flex;align-items:flex-end;justify-content:center}
.mw::before,.mw::after{display:none}
.mw .mp{position:absolute;left:0;right:0;bottom:0;height:78%;border-radius:36px;background:linear-gradient(160deg,var(--brand) 0%,#3a6b58 100%);box-shadow:0 24px 50px rgba(30,60,50,.20)}
.mw .mc{position:absolute;right:-14px;bottom:-14px;width:150px;height:150px;border-radius:50%;background:var(--acc);opacity:.95}
.mw img.mascot{position:relative;z-index:2;width:auto;height:94%;max-width:none;aspect-ratio:auto;border-radius:0;background:none!important;box-shadow:none!important;filter:drop-shadow(0 14px 18px rgba(0,0,0,.28));object-fit:contain}
@media(max-width:860px){.mw{height:460px;max-width:340px;width:90%}}
.mw{height:660px;max-width:460px}.mw img.mascot{height:97%}.mw .mp{height:72%}
@media(max-width:860px){.mw{height:500px;max-width:340px}}

/* ===== Rev.11 PALET 60-30-10 =====
   60% putih (latar), 30% hijau tua #1D370A (judul, tombol, pita, footer), 10% oranye #E25935 (aksen).
   Netral pendukung: abu #EAE6E7 untuk garis. Kuning dan sage tidak dipakai. Mode gelap dimatikan. */
:root,:root:not([data-theme="light"]),:root[data-theme="dark"]{
--bg:#FFFFFF;--surf:#FFFFFF;--fg:#1F2A18;--mut:#5C6556;--line:#EAE6E7;
--brand:#1D370A;--on-brand:#FFFFFF;--acc:#E25935;--olive:#1D370A;
--soft:#FFFFFF;--soft2:#F6F3F4;--soft-line:#EAE6E7;
--band:#1D370A;--band-fg:#FFFFFF;--band-mut:#E4EADF;--band-line:rgba(255,255,255,.35);--band-acc:#F6C8BA;
--foot:#1D370A;--ok:#1D370A;--ok-bg:#F6F3F4;--warn:#B8431F;--shadow:0 12px 32px rgba(29,55,10,.10);color-scheme:light}
.tg{display:none!important}
.tint{background:#fff;border-block:1px solid var(--line)}
.hero{background:#fff;border-bottom:1px solid var(--line)}
.hero h1 .o{color:var(--brand)}
.mock .bar i{background:var(--acc)}.mock .bar i+i{background:var(--line)}.mock .bar i+i+i{background:var(--brand)}
.mw .mp{background:var(--brand);box-shadow:0 24px 50px rgba(29,55,10,.20)}
.mw .mc{background:var(--acc)}
.chips2 li,.pil{background:#fff}
#satu-staff .lengkap{background:#fff;border-color:var(--line)}
#satu-staff .lk2{background:#fff}
#satu-staff .lk1{background:var(--brand)}
.btn.o{background:#fff}

/* ===== Rev.12 Desain bersih putih (acuan Varian B / Goestopo), palet 60-30-10 ===== */
/* Header */
.nv nav a,.nv .ddb{font:700 12.5px Montserrat,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--fg)}
.nv .btn{border-radius:8px;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;padding:12px 20px}
.top{border-bottom:1px solid var(--line);box-shadow:none}
/* Tombol persegi lembut */
.btn,.gh-b{border-radius:8px}
.gh-b{display:inline-block;font:700 14px Montserrat,sans-serif;letter-spacing:.03em;background:var(--brand);color:#fff;text-decoration:none;border:2px solid var(--brand);padding:14px 24px;cursor:pointer}
.gh-b.o{background:#fff;color:var(--brand)}
/* Hero */
.gh{background:#fff;padding:56px 0 0;position:relative;border-bottom:0}
.gh-g{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center;padding-bottom:80px}
.gh-k{font:500 20px Montserrat,sans-serif;color:var(--fg);margin:0 0 6px}
.gh h1{margin:0 0 22px;font:800 clamp(30px,4.4vw,54px)/1.06 Montserrat,sans-serif;letter-spacing:-.01em;text-transform:uppercase;text-wrap:balance}
.gh h1 .a{display:block;color:var(--brand)}
.gh h1 .b{display:block;color:var(--acc);font-size:.62em;margin-top:8px;letter-spacing:0}
.gh-p{font-size:18px;line-height:1.6;color:var(--mut);margin:0 0 12px;max-width:34em}.gh-p b{color:var(--brand)}
.gh-s{font-size:16px;color:var(--mut);margin:0 0 16px}
.gh-ck{list-style:none;display:flex;flex-wrap:wrap;gap:8px 20px;padding:0;margin:0}
.gh-ck li{font:700 13.5px Montserrat,sans-serif;color:var(--brand);display:flex;align-items:center;gap:8px}
.gh-ck li::before{content:"✓";display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--acc);color:#fff;font-size:12px}
.gh-c{display:flex;justify-content:flex-end}
.gh-card{width:100%;max-width:400px;border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:0 18px 40px rgba(29,55,10,.12);background:#F6F3F4}
.gh-card img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:contain;object-position:center bottom;padding:18px 18px 0;background:linear-gradient(#fff,#F6F3F4)}
.gh-cap{background:var(--brand);color:#fff;padding:14px 20px}.gh-cap b{display:block;font:700 17px Montserrat,sans-serif;letter-spacing:.04em}.gh-cap span{font:600 11px Montserrat,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#E4EADF}
.gh-bar{position:relative;margin:-40px auto 0;max-width:1000px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 12px 36px rgba(29,55,10,.12);padding:22px 28px;display:flex;flex-wrap:wrap;gap:14px 16px;align-items:end;transform:translateY(40px);z-index:2}
.gh-bar label{flex:1 1 260px;min-width:0;font:600 13px Montserrat,sans-serif;color:var(--mut);display:grid;gap:6px}
.gh-bar select{width:100%;box-sizing:border-box;font:600 16px 'Nunito Sans',sans-serif;padding:13px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--fg)}
.gh-bar small{flex-basis:100%;color:var(--mut);font-size:13px}
/* Bagian beranda gaya bersih */
.gx{padding-block:88px}
.gx .eb{font:600 12.5px Montserrat,sans-serif;letter-spacing:.22em;color:var(--acc);text-transform:uppercase;margin:0 0 12px}
.gx h2{font:800 clamp(24px,3.3vw,40px)/1.12 Montserrat,sans-serif;color:var(--fg);text-transform:uppercase;max-width:24em;margin:0}
.gx h2::after{content:"";display:block;width:64px;height:5px;border-radius:3px;background:var(--brand);margin:20px 0 22px;box-shadow:72px 0 0 -0px var(--line)}
.gx .lead{margin-top:0}
.gx .card{border:1px solid #F0EDEE;border-radius:16px;box-shadow:0 6px 20px rgba(29,55,10,.05);padding:26px 22px}
.gx .card h3{font:700 18px Montserrat,sans-serif;color:var(--fg)}
/* Satu Staff Backoffice */
.gs{padding-top:130px}
.gs .gs-bar{display:none}
.gs-pill{display:inline-block;font:700 14px Montserrat,sans-serif;color:var(--brand);background:#fff;border:1px solid var(--line);border-radius:99px;padding:9px 18px}
.gs-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin:36px 0 34px}
.gs-c{background:#fff;border:1px solid #F0EDEE;border-radius:16px;padding:26px 22px;text-decoration:none;color:inherit;box-shadow:0 6px 20px rgba(29,55,10,.05);display:block;transition:transform .15s,box-shadow .15s}
a.gs-c:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(29,55,10,.10)}
.gs-c span{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--brand);color:#fff;font:800 16px Montserrat,sans-serif;margin-bottom:16px}
.gs-c.x span{background:var(--acc)}
.gs-c h3{font:700 18px Montserrat,sans-serif;margin:0 0 8px;color:var(--fg)}
.gs-c p{margin:0;font-size:15px;line-height:1.55;color:var(--mut)}
@media(max-width:980px){.gs-g{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.gh-g{grid-template-columns:1fr;gap:36px;padding-bottom:64px}.gh-c{justify-content:center}.gs{padding-top:150px}}
@media(max-width:560px){.gs-g{grid-template-columns:1fr}.gh-bar{padding:18px}.gx{padding-block:60px}}

/* ===== Rev.13 Hero Opsi A: maskot berdiri di garis lantai, bergerak halus ===== */
.gh{padding:48px 0 0;border-bottom:2px solid var(--brand)}
.gh-g{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;align-items:end;padding-bottom:0}
.gh-t{padding-bottom:64px;align-self:center}
.gh-st{position:relative;display:flex;justify-content:center;align-items:flex-end;height:600px;padding-left:70px}
.gh-st::before{content:"";position:absolute;left:55%;bottom:42px;width:380px;height:380px;transform:translateX(-50%);border-radius:50%;border:2px solid var(--line)}
.gh-mas{position:relative;z-index:2;height:96%;width:auto;display:block;transform-origin:50% 100%;filter:drop-shadow(0 10px 10px rgba(29,55,10,.18));animation:gh-bob 4.2s ease-in-out infinite;will-change:transform}
.gh-sh{position:absolute;bottom:-6px;left:55%;width:210px;height:22px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(29,55,10,.30),transparent);animation:gh-sh 4.2s ease-in-out infinite}
.gh-bub{position:absolute;z-index:3;top:44px;left:-6px;max-width:190px;background:#fff;border:2px solid var(--brand);border-radius:18px 18px 18px 4px;padding:12px 16px;font:700 14px/1.35 Montserrat,sans-serif;color:var(--brand);box-shadow:0 8px 22px rgba(29,55,10,.12);transform-origin:20% 100%;animation:gh-pop .7s .5s cubic-bezier(.2,1.4,.4,1) both,gh-bubf 4.2s 1.2s ease-in-out infinite;transition:opacity .3s}
.gh-bub.out{opacity:0}
.gh-st:hover .gh-mas{animation:gh-hop .6s ease-out 1,gh-bob 4.2s .6s ease-in-out infinite}
@keyframes gh-bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(.8deg)}}
@keyframes gh-sh{0%,100%{transform:translateX(-50%) scale(1);opacity:1}50%{transform:translateX(-50%) scale(.82);opacity:.6}}
@keyframes gh-pop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
@keyframes gh-bubf{0%,100%{translate:0 0}50%{translate:0 -5px}}
@keyframes gh-hop{0%{transform:translateY(0)}40%{transform:translateY(-26px) rotate(-1.5deg)}100%{transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.gh-mas,.gh-sh,.gh-bub,.gh-st:hover .gh-mas{animation:none}}
/* bilah kebutuhan di bawah garis lantai */
.gh-bw{padding:36px 0 8px}
.gh-bar{margin:0 auto;transform:none}
@media(max-width:900px){.gh-g{grid-template-columns:1fr;gap:10px}.gh-t{padding-bottom:20px}.gh-st{height:470px;padding-left:40px}.gh-st::before{width:300px;height:300px}.gh-bub{left:0;max-width:170px}}
@media(max-width:560px){.gh-st{padding-left:30px}}
.gs{padding-top:88px}

/* Rev.15 kedip mata: dua mata, mata kanan saja, mata kiri saja, lalu dua mata lagi (siklus 10 dtk) */
.gh-mas{aspect-ratio:581/1369;height:96%;width:auto}
.gh-mas img{display:block;height:100%;width:100%}
.ey{position:absolute;display:block;border-radius:48% 52% 50% 50%/42% 42% 58% 58%;background:radial-gradient(ellipse at 50% 35%,#f5bd9d 0,#f2b595 62%,#eeaa8a 100%);box-shadow:0 0 5px 3px rgba(242,181,149,.9);transform:scaleY(0);transform-origin:50% 0;opacity:0}
.ey::after{content:"";position:absolute;left:6%;right:6%;bottom:8%;height:34%;border-bottom:3px solid #4a2214;border-radius:0 0 55% 55%/0 0 100% 100%}
.ey.e1{left:28.4%;top:34.2%;width:17%;height:6.5%;animation:gh-l 10s infinite}
.ey.e2{left:59.4%;top:34%;width:17.8%;height:6.4%;animation:gh-r 10s infinite}
@keyframes gh-l{0%,8.5%{transform:scaleY(0);opacity:0}9%{opacity:1}10.2%{transform:scaleY(1);opacity:1}11.8%{transform:scaleY(0);opacity:1}12%,58%{transform:scaleY(0);opacity:0}58.5%{opacity:1}60.2%{transform:scaleY(1);opacity:1}63.5%{transform:scaleY(1);opacity:1}65.5%{transform:scaleY(0);opacity:1}65.8%,83.5%{transform:scaleY(0);opacity:0}84%{opacity:1}85.2%{transform:scaleY(1);opacity:1}86.8%{transform:scaleY(0);opacity:1}87%,100%{transform:scaleY(0);opacity:0}}
@keyframes gh-r{0%,8.5%{transform:scaleY(0);opacity:0}9%{opacity:1}10.2%{transform:scaleY(1);opacity:1}11.8%{transform:scaleY(0);opacity:1}12%,33%{transform:scaleY(0);opacity:0}33.5%{opacity:1}35.2%{transform:scaleY(1);opacity:1}38.5%{transform:scaleY(1);opacity:1}40.5%{transform:scaleY(0);opacity:1}40.8%,83.5%{transform:scaleY(0);opacity:0}84%{opacity:1}85.2%{transform:scaleY(1);opacity:1}86.8%{transform:scaleY(0);opacity:1}87%,100%{transform:scaleY(0);opacity:0}}
@media(prefers-reduced-motion:reduce){.ey{animation:none}}

/* Rev.16 Tangga Produk: lima anak tangga naik dari kiri bawah ke kanan atas */
#tangga{background:#fff}
#tangga .tangga{grid-template-columns:repeat(5,minmax(0,1fr));gap:0;align-items:end;margin-top:44px;padding:0;border-bottom:3px solid var(--brand)}
#tangga .tangga li,#tangga .tangga li:nth-child(n){grid-column:auto;background:#fff;border:2px solid var(--brand);border-bottom:0;border-radius:14px 14px 0 0;margin-left:-2px;padding:22px 16px 24px;box-shadow:none}
#tangga .tangga li:nth-child(1){min-height:330px}
#tangga .tangga li:nth-child(2){min-height:395px}
#tangga .tangga li:nth-child(3){min-height:460px}
#tangga .tangga li:nth-child(4){min-height:525px}
#tangga .tangga li:nth-child(5){min-height:590px}
#tangga .tangga li:first-child{margin-left:0}
#tangga .tangga li::before{content:"";position:absolute;left:-2px;right:-2px;top:-2px;height:9px;border-radius:12px 12px 0 0;background:var(--brand)}
#tangga .tangga li.puncak{border-color:var(--acc)}
#tangga .tangga li.puncak::before{background:var(--acc)}
#tangga .tangga .no{background:var(--brand);margin-top:8px}
#tangga .tangga li.puncak .no{background:var(--acc)}
#tangga .tangga h3{font-size:16px;line-height:1.25}
#tangga .tangga .pr{font-size:18px;color:var(--brand)}
#tangga .tangga p{font-size:13.5px}
#tangga .tangga .btn{font-size:13px;padding:9px 12px;white-space:normal;text-align:center}
@media(max-width:1100px){
#tangga .tangga{grid-template-columns:1fr;gap:12px;border-bottom:0}
#tangga .tangga li,#tangga .tangga li:nth-child(n){min-height:0;border:2px solid var(--brand);border-radius:12px;margin-left:0}
#tangga .tangga li.puncak{border-color:var(--acc)}
#tangga .tangga li::before{display:none}
#tangga .tangga li:nth-child(2){margin-left:18px}#tangga .tangga li:nth-child(3){margin-left:36px}#tangga .tangga li:nth-child(4){margin-left:54px}#tangga .tangga li:nth-child(5){margin-left:72px}
}
@media(max-width:560px){#tangga .tangga li:nth-child(2){margin-left:10px}#tangga .tangga li:nth-child(3){margin-left:20px}#tangga .tangga li:nth-child(4){margin-left:30px}#tangga .tangga li:nth-child(5){margin-left:40px}}
.bt2{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.bt2 .btn{align-self:flex-start}
.tangga .cr{font-size:12.5px;color:var(--mut);margin-top:6px}
.tangga .cr s{text-decoration-color:var(--acc);text-decoration-thickness:2px}
.tangga .hm{display:inline-block;align-self:flex-start;background:var(--acc);color:#fff;font:700 12.5px Montserrat,sans-serif;padding:5px 11px;border-radius:99px;margin-bottom:14px}
.tangga .hm{white-space:nowrap}

/* Rev.17 Judul halaman dalam: putih, satu kolom lega, garis hijau pendek, garis tipis di bawah */
main>.hero{background:#fff;border-bottom:1px solid var(--line)}
main>.hero .w{display:block;padding-block:40px 44px}
main>.hero .w>div:first-child{max-width:860px}
main>.hero .bc{font-size:13px;margin-bottom:22px}
main>.hero .bc ol{gap:4px 8px}
main>.hero .eb{margin:0 0 12px}
main>.hero h1{font-size:clamp(28px,4vw,42px);line-height:1.15;margin:0 0 6px!important;max-width:20em}
main>.hero h1::after{content:"";display:block;width:64px;height:5px;border-radius:3px;background:var(--brand);margin-top:22px}
main>.hero p{font-size:18px;line-height:1.65;max-width:42em;margin:22px 0 0}
main>.hero .byline{font-size:13.5px;margin-top:18px;color:var(--mut)}
main>.hero .row{margin-top:28px!important}
main>.hero img.mascot{display:none}
@media(max-width:600px){main>.hero .w{padding-block:28px 32px}main>.hero p{font-size:16.5px}}

/* Rev.18 Harga: maskot di hero, Langganan Staff bersih dan putih dengan tombol CTA */
main>.hero.hg .w{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.5fr);gap:32px;align-items:end;padding-bottom:0}
.hg-t{padding-bottom:48px;align-self:center}
.hg-m{position:relative;display:flex;justify-content:center;align-items:flex-end;min-height:340px}
.hg-m img{display:block;height:360px;width:auto;filter:drop-shadow(0 8px 8px rgba(29,55,10,.18));animation:gh-bob 4.2s ease-in-out infinite;transform-origin:50% 100%}
.hg-bub{position:absolute;top:6px;right:48%;max-width:170px;background:#fff;border:2px solid var(--brand);border-radius:16px 16px 4px 16px;padding:10px 14px;font:700 13.5px/1.35 Montserrat,sans-serif;color:var(--brand);text-decoration:none;box-shadow:0 8px 22px rgba(29,55,10,.12);z-index:2}
.hg-bub:hover{background:var(--brand);color:#fff}
@media(max-width:860px){main>.hero.hg .w{grid-template-columns:1fr}.hg-m{min-height:260px}.hg-m img{height:260px}.hg-bub{right:50%;margin-right:20px;top:0}.hg-t{padding-bottom:20px}}
@media(prefers-reduced-motion:reduce){.hg-m img{animation:none}}
#langganan{background:#fff}
#langganan .lead{max-width:44em}
.lgw{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:30px;align-items:stretch}
.lc{position:relative;display:flex;flex-direction:column;background:#fff;border:2px solid var(--brand);border-radius:16px;padding:30px 24px 24px;overflow:hidden}
.lc::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:var(--brand)}
.lc.pro{border-color:var(--acc)}.lc.pro::before{background:var(--acc)}
.lc-t{align-self:flex-start;background:var(--acc);color:#fff;font:700 12px Montserrat,sans-serif;padding:4px 11px;border-radius:99px;margin-bottom:10px}
.lc h3{font-size:22px;color:var(--brand)}
.lc .pr{font-size:26px;color:var(--brand);margin-top:8px}.lc .pr small{display:inline;font-size:14px;font-weight:600}
.lc .cr{font-size:13px;color:var(--mut);margin-top:6px}.lc .cr s{text-decoration-color:var(--acc);text-decoration-thickness:2px}
.lc>p{margin:14px 0 0;color:var(--mut);font-size:15px}
.lc-ck{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--line);display:grid;gap:9px}
.lc-ck li{display:flex;gap:10px;align-items:center;font:700 14px Montserrat,sans-serif;color:var(--brand)}
.lc-ck li::before{content:"✓";flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--acc);color:#fff;font-size:12px}
.lc-d{margin-top:16px;font-size:14px}.lc-d summary{cursor:pointer;font-weight:700;color:var(--brand)}.lc-d .dots{margin-top:10px}
.lc-a{margin-top:auto;padding-top:22px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.lc-a .btn{width:100%;text-align:center}
.lc-l{font-weight:700;font-size:14px;color:var(--brand)}
.lg-n{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:28px}
.lg-n>div{border-top:3px solid var(--line);padding-top:12px}.lg-n b{font:700 14px Montserrat,sans-serif;color:var(--brand)}.lg-n p{margin:6px 0 0;font-size:14px;color:var(--mut)}
@media(max-width:980px){.lgw,.lg-n{grid-template-columns:1fr}}
main>.hero p.lbh{font:700 15px Montserrat,sans-serif;color:var(--brand);margin:16px 0 0;letter-spacing:.01em}
.lbh b{color:var(--acc);font-size:1.15em}

/* Rev.19 Masalah yang kami selesaikan: tiga kartu bernomor */
#masalah{background:#fff}
.ms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:30px}
.ms-c{position:relative;background:#fff;border:1px solid var(--line);border-top:5px solid var(--acc);border-radius:14px;padding:26px 24px 28px;box-shadow:0 10px 28px rgba(29,55,10,.06)}
.ms-n{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--acc);color:#fff;font:800 17px Montserrat,sans-serif;margin-bottom:16px}
.ms-c h3{font-size:19px;line-height:1.3;color:var(--brand)}
.ms-c p{margin:10px 0 0;font-size:16px;line-height:1.6;color:var(--mut)}
@media(max-width:900px){.ms{grid-template-columns:1fr}}

/* Rev.20 Cocok untuk / Kurang cocok bila, dan Batas yang kami nyatakan */
#cocok,#batas{background:#fff}
.cc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:30px}
.cc-p{border:1px solid var(--line);border-radius:16px;padding:26px 26px 22px;background:#fff;border-top:6px solid var(--brand)}
.cc-p.tdk{border-top-color:var(--line);background:#fff}
.cc-k{font:700 13px Montserrat,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--acc)}
.cc-p.tdk .cc-k{color:var(--mut)}
.cc-h h3{font-size:24px;color:var(--brand);margin-top:4px}
.cc-p ul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:14px}
.cc-p li{position:relative;padding-left:36px;font-size:16px;line-height:1.55;color:var(--fg)}
.cc-p li::before{position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:800 13px Montserrat,sans-serif}
.cc-p.ya li::before{content:"✓";background:var(--acc);color:#fff}
.cc-p.tdk li::before{content:"–";background:var(--line);color:var(--brand);font-size:17px}
.cc-n{margin:22px 0 0;font-size:15px;color:var(--mut)}
.bt3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:26px}
.bt3>div{border-top:4px solid var(--brand);padding-top:12px}
.bt3 b{font:700 17px Montserrat,sans-serif;color:var(--brand)}
.bt3 p{margin:6px 0 0;font-size:15px;color:var(--mut)}
.mtg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:18px}
.mtr{border:2px solid var(--brand);border-radius:16px;padding:24px 26px;background:#fff}
.mtr-k{font:700 13px Montserrat,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--acc)}
.mtr h3{font-size:22px;line-height:1.25;color:var(--brand);margin-top:8px}
.mtr p{margin:8px 0 0;font-size:15px;color:var(--mut)}
.bt-cta{margin-top:44px;padding-top:30px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.bt-cta>div:first-child{flex:1 1 460px}.bt-cta h3{font-size:22px;color:var(--brand);margin-top:6px}.bt-cta p{margin:8px 0 0;color:var(--mut);max-width:40em}
@media(max-width:860px){.cc,.bt3,.mtg{grid-template-columns:1fr}}

/* Rev.21 Yang Anda terima dan Aturan main */
#hasil,#percaya{background:#fff}
#hasil{border-top:1px solid var(--line)}
.hs{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:start}
.hs-h{position:sticky;top:96px}
.hs-r{padding:20px 0;border-top:1px solid var(--line)}
.hs-r:first-child{border-top:3px solid var(--brand)}
.hs-r h3{font-size:19px;color:var(--brand)}
.hs-r p{margin:6px 0 0;font-size:16px;line-height:1.6;color:var(--mut)}
.hs-j{margin-top:44px;max-width:860px}
.pc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:28px}
.pc-c{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-left:6px solid var(--brand);border-radius:14px;padding:22px 24px}
.pc-n{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:8px;background:var(--brand);color:#fff;font:800 16px Montserrat,sans-serif}
.pc-c h3{font-size:19px;line-height:1.3;color:var(--brand)}
.pc-c p{margin:8px 0 0;font-size:15.5px;line-height:1.6;color:var(--mut)}
@media(max-width:900px){.hs{grid-template-columns:1fr;gap:20px}.hs-h{position:static}.pc{grid-template-columns:1fr}}

/* Rev.22 Halaman Staff: aturan langganan putih, perbandingan jam, langkah memulai */
.hm-b{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin:26px 0 18px}
.hm-n{flex:1 1 260px;border:2px solid var(--brand);border-radius:16px;padding:20px 24px;background:#fff}
.hm-n b{display:block;font:800 32px Montserrat,sans-serif;color:var(--brand)}
.hm-n span{display:block;margin-top:4px;font-size:15px;color:var(--mut)}
.hm-e{font:800 30px Montserrat,sans-serif;color:var(--acc)}
.rl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:26px}
.rl>div{border-top:4px solid var(--brand);padding-top:12px}
.rl b{font:700 17px Montserrat,sans-serif;color:var(--brand)}
.rl p{margin:6px 0 0;font-size:15px;line-height:1.6;color:var(--mut)}
.fl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:28px}
.fl-c{border:1px solid var(--line);border-top:5px solid var(--brand);border-radius:14px;padding:22px 20px;background:#fff}
.fl-n{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff;font:800 16px Montserrat,sans-serif;margin-bottom:12px}
.fl-c h3{font-size:17px;line-height:1.3;color:var(--brand)}
.fl-c p{margin:8px 0 0;font-size:15px;line-height:1.6;color:var(--mut)}
@media(max-width:1000px){.fl{grid-template-columns:repeat(2,minmax(0,1fr))}.rl{grid-template-columns:1fr}.hm-e{display:none}}
@media(max-width:560px){.fl{grid-template-columns:1fr}}

/* Rev.23: bingkai mesin tumbuh mengikuti isi, tanpa scroll sendiri */
#coba .frame{overflow:hidden}
#coba .frame iframe{height:900px;min-height:0;overflow:hidden}
#coba .frame{border:0;box-shadow:none;border-radius:0;border-block:1px solid var(--line)}

/* Rev.24: ruang kerja Aplikasi (+) LABA, layar penuh di bawah bilah situs */
body:has(main.rk){height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
body:has(main.rk) header.top{position:relative;flex:none}
main.rk{flex:1;min-height:0;display:flex}
main.rk iframe{flex:1;width:100%;height:100%;border:0;display:block;background:#fff}

/* Rev.25: Coba Gratis, langkah singkat di atas mesin (hanya #coba) */
#coba .cgs{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:0;margin:20px 0 0}
#coba .cgs li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.45;color:var(--mut)}
#coba .cgs b{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--brand);color:#fff;font:800 14px Montserrat,sans-serif}
#coba .cgs strong{display:block;color:var(--brand);font:700 15px Montserrat,sans-serif;margin-bottom:2px}
@media(max-width:820px){#coba .cgs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){#coba .cgs{grid-template-columns:1fr}}

/* Rev.26: Coba Gratis, bagian Setelah mencoba (hanya #coba-setelah) */
#coba-setelah .cgd{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;margin-top:22px}
#coba-setelah h3{font:700 18px/1.3 Montserrat,sans-serif;color:var(--brand);margin:0 0 12px}
#coba-setelah h3 small{display:block;font:600 13px "Nunito Sans",sans-serif;color:var(--mut);margin-top:2px}
#coba-setelah p{margin:0;font-size:15.5px;line-height:1.6;color:var(--mut)}
#coba-setelah .cgs{list-style:none;display:grid;gap:12px;padding:0;margin:0}
#coba-setelah .cgs li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.5;color:var(--mut)}
#coba-setelah .cgs b{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--brand);color:#fff;font:800 14px Montserrat,sans-serif}
@media(max-width:820px){#coba-setelah .cgd{grid-template-columns:1fr;gap:28px}}

/* Integrasi Staffahli: semua section memakai lebar konten yang sama. */
:root{--staffahli-content-width:1120px}
header.top>.w,
main>.sec>.w,
footer>.w{
  width:100%;
  max-width:var(--staffahli-content-width);
  margin-inline:auto;
  padding-inline:24px;
}
#coba #mesin-app{width:100%;max-width:none;margin-inline:0}
@media(max-width:640px){
  header.top>.w,
  main>.sec>.w,
  footer>.w{padding-inline:16px}
}