:root{--bg:#f5f7fb;--card:#fff;--ink:#0f1b33;--mut:#5b6679;--line:#e2e7f0;--pri:#2447e0;--pri2:#1a36b8;--acc:#0e9f6e;--soft:#eaeffd;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0b1220;--card:#131c2f;--ink:#e8edf7;--mut:#9aa6bd;--line:#243049;--pri:#6c8cff;--pri2:#8ba3ff;--acc:#34d399;--soft:#1a2748}}
:root[data-theme="dark"]{--bg:#0b1220;--card:#131c2f;--ink:#e8edf7;--mut:#9aa6bd;--line:#243049;--pri:#6c8cff;--pri2:#8ba3ff;--acc:#34d399;--soft:#1a2748}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 "Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:inherit;text-decoration:none}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--card);border-bottom:1px solid var(--line)}
.hd{display:flex;align-items:center;gap:16px;height:64px}
.logo{font-weight:800;font-size:22px;letter-spacing:-.5px;display:inline-flex;align-items:center;gap:0;transition:transform .2s cubic-bezier(.34,1.56,.64,1);transform-origin:left center}
.logo:hover{transform:scale(1.06)}
.logo b{color:var(--pri);position:relative;display:inline-block;animation:logo-fade-in .6s ease both}
.logo b::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);background-size:200% 100%;animation:logo-shimmer 3.2s ease-in-out 1s infinite;border-radius:3px;pointer-events:none}
@media(prefers-color-scheme:dark){.logo b::after{background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.2) 50%,transparent 100%);background-size:200% 100%}}
:root[data-theme="dark"] .logo b::after{background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.2) 50%,transparent 100%);background-size:200% 100%}
@keyframes logo-shimmer{0%,100%{background-position:200% 0;opacity:0}20%{opacity:1}50%{background-position:-100% 0;opacity:1}70%{opacity:0}}
@keyframes logo-fade-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.sb{flex:1;max-width:460px;margin:0 auto}
input,select,button{font:inherit;color:inherit}
.sb input,.hero input{width:100%;height:44px;border:1px solid var(--line);border-radius:10px;padding:0 14px;background:var(--bg)}
nav{display:flex;gap:4px;align-items:center}
nav a,.ib{padding:8px 12px;border-radius:8px;font-weight:600;font-size:14px;color:var(--mut);cursor:pointer;border:0;background:none}
nav a:hover,.ib:hover{background:var(--soft);color:var(--pri)}
:focus-visible{outline:3px solid var(--pri);outline-offset:2px}
.hero{padding:56px 0 36px}
.hero h1{font-size:clamp(30px,5vw,52px);line-height:1.1;letter-spacing:-1.5px;margin:0 0 12px;max-width:16ch}
.hero p{color:var(--mut);margin:0 0 22px;font-size:18px}
.hero .box{display:flex;gap:10px;max-width:560px}
.hero input{height:52px;font-size:16px;background:var(--card)}
.btn{height:44px;padding:0 20px;border-radius:10px;border:0;background:var(--pri);color:#fff;font-weight:700;cursor:pointer}
.btn:hover{background:var(--pri2)}
.btn.o{background:none;border:1px solid var(--line);color:var(--ink)}
.btn.o:hover{background:var(--soft)}
.stats{display:flex;gap:28px;flex-wrap:wrap;margin-top:26px;color:var(--mut);font-size:14px}.stats b{color:var(--ink);font-size:20px;margin-right:6px}
h2{font-size:22px;letter-spacing:-.4px;margin:40px 0 16px;display:flex;justify-content:space-between;align-items:baseline}
h2 a{font-size:14px;color:var(--pri);font-weight:600}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.tile{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;display:flex;gap:12px;align-items:flex-start}
.tile:hover{border-color:var(--pri)}
.ic{flex:none;width:42px;height:42px;border-radius:10px;background:var(--soft);color:var(--pri);display:grid;place-items:center;font-weight:800;font-size:19px}
.tile .tt{display:block;margin:0;font-size:16px;font-weight:700}.tile p{margin:2px 0 0;font-size:13px;color:var(--mut)}
.feat{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:16px}
.feat div{padding:18px;border-radius:12px;background:var(--soft)}.feat b{display:block;margin-bottom:4px}.feat span{color:var(--mut);font-size:14px}
.crumb{font-size:14px;color:var(--mut);padding:22px 0 6px}.crumb a:hover{color:var(--pri)}
.page{display:grid;gap:24px;grid-template-columns:minmax(0,1fr) 300px;align-items:start}
@media(max-width:860px){.page{grid-template-columns:1fr}nav .hide{display:none}.hd{gap:8px}}
.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px}
.panel h1{margin:0 0 4px;font-size:28px;letter-spacing:-.8px}.panel>p{margin:0 0 18px;color:var(--mut)}
.fld{margin-bottom:14px}.fld label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.fld .in{display:flex;border:1px solid var(--line);border-radius:10px;background:var(--bg);overflow:hidden}
.fld .in:focus-within{border-color:var(--pri);box-shadow:0 0 0 3px var(--soft)}
.fld input,.fld select{flex:1;min-width:0;height:44px;border:0;background:none;padding:0 12px;outline:0}
.fld select option{color:#000}
.fld .u{padding:0 12px;display:grid;place-items:center;color:var(--mut);font-size:14px;background:var(--soft)}
.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.res{margin-top:20px;border-radius:12px;border:1px solid var(--line);overflow:hidden}
.main{padding:18px 20px;background:var(--soft)}.main span{font-size:14px;color:var(--mut)}
.main strong{display:block;font-size:clamp(28px,6vw,38px);color:var(--acc);letter-spacing:-1px;overflow-wrap:anywhere}
.det{display:flex;justify-content:space-between;gap:12px;padding:11px 20px;border-top:1px solid var(--line);font-size:15px}.det span{color:var(--mut)}
.err{color:#d6336c;font-size:14px;margin-top:12px}
.side .panel{margin-bottom:16px;padding:18px}.side h3{margin:0 0 10px;font-size:15px}
.side a{display:block;padding:7px 0;font-size:14px;color:var(--mut);border-bottom:1px solid var(--line)}.side a:last-child{border:0}.side a:hover{color:var(--pri)}
.info{margin-top:24px}.info h2{margin-top:0;font-size:18px}.info p{color:var(--mut);margin:6px 0}
details{border-bottom:1px solid var(--line);padding:10px 0}summary{cursor:pointer;font-weight:600}details p{margin:8px 0 0}
footer{margin-top:64px;border-top:1px solid var(--line);background:var(--card);padding:30px 0;color:var(--mut);font-size:14px}
footer a:hover{color:var(--pri)}
.empty{padding:40px;text-align:center;color:var(--mut)}
.bar{border-top:1px solid var(--line);position:relative;z-index:10}
.bar nav{display:flex;align-items:center;gap:4px;padding:4px 0}
.bar a{flex:none}
.bar a[aria-current]{color:var(--pri);background:var(--soft)}
.nav-drop{position:relative}
.nav-drop-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:8px;font-weight:600;font-size:14px;color:var(--mut);cursor:pointer;border:0;background:none;font-family:inherit}
.nav-drop-btn:hover,.nav-drop-btn.active,.nav-drop.open .nav-drop-btn{background:var(--soft);color:var(--pri)}
.nav-caret{transition:transform .2s;flex:none}
.nav-drop:hover .nav-caret,.nav-drop.open .nav-caret{transform:rotate(180deg)}
.nav-drop-menu{position:absolute;top:calc(100% + 4px);left:0;width:440px;max-width:calc(100vw - 32px);max-height:calc(85vh - 70px);overflow-y:auto;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 32px -4px rgba(0,0,0,.15);padding:10px;z-index:50;display:none}
.nav-drop:hover .nav-drop-menu,.nav-drop.open .nav-drop-menu{display:block}
.nav-drop-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
@media(max-width:520px){.nav-drop-grid{grid-template-columns:1fr}.nav-drop-menu{width:calc(100vw - 40px);left:-20px}}
.nav-drop-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;transition:background .15s;color:var(--ink)}
.nav-drop-item:hover{background:var(--soft);color:var(--pri)}
.nav-drop-item.active{background:var(--soft);color:var(--pri)}
.nav-drop-ic{width:28px;height:28px;border-radius:7px;background:var(--soft);color:var(--pri);display:grid;place-items:center;font-weight:800;font-size:13px;flex:none}
.nav-drop-text{display:flex;flex-direction:column;line-height:1.2}
.nav-drop-text strong{font-size:13px;font-weight:600}
.nav-drop-text small{font-size:11px;color:var(--mut)}
.nav-drop-foot{border-top:1px solid var(--line);margin-top:6px;padding-top:6px;text-align:center}
.nav-drop-foot a{font-size:13px;font-weight:700;color:var(--pri);display:block;padding:6px}
.nav-drop-foot a:hover{text-decoration:underline}
.doc{margin-top:12px;max-width:820px}.doc h2{font-size:18px;margin:24px 0 6px;display:block}.doc p,.doc li{color:var(--mut)}.doc a{color:var(--pri);text-decoration:underline}
@media print{.bar,header,footer,.side,.row,.crumb{display:none}.page{display:block}}
@media(prefers-reduced-motion:no-preference){.tile{transition:border-color .15s}.res{animation:pop .25s}@keyframes pop{from{opacity:.4;transform:translateY(6px)}}}
.cat-hero{position:relative;border-radius:18px;padding:34px 28px;margin:12px 0 24px;background:var(--card);border:1px solid var(--line);overflow:hidden;box-shadow:0 4px 20px -2px rgba(0,0,0,.03)}
.cat-hero-glow{position:absolute;top:-60px;right:-60px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,var(--cat-c) 0%,transparent 70%);opacity:.15;pointer-events:none}
.cat-hero-content{position:relative;z-index:1}
.cat-badge{display:inline-flex;align-items:center;gap:8px;padding:5px 14px;border-radius:999px;font-size:13px;font-weight:700;color:var(--cat-c);background:var(--soft);margin-bottom:14px;border:1px solid var(--line)}
.cat-badge .cat-ic{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--card);color:var(--cat-c);font-weight:800;font-size:12px}
.cat-hero h1{font-size:clamp(24px,4vw,34px);line-height:1.2;letter-spacing:-.8px;margin:0 0 10px;color:var(--ink)}
.cat-hero p.cat-desc{font-size:16px;line-height:1.6;color:var(--mut);margin:0 0 20px;max-width:72ch}
.cat-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;padding-top:16px;border-top:1px solid var(--line);font-size:13px;color:var(--mut)}
.cat-meta span{display:inline-flex;align-items:center;gap:6px}
.cat-meta b{color:var(--ink);font-weight:700}
.cat-tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px;font-size:12px;color:var(--mut)}
.cat-tag{display:inline-block;padding:3px 10px;border-radius:6px;background:var(--soft);color:var(--ink);font-weight:600}
.cat-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 16px}
.cat-count-label{font-size:14px;color:var(--mut)}.cat-count-label b{color:var(--ink)}
.cat-filter{min-width:240px;max-width:340px;height:40px;border:1px solid var(--line);border-radius:10px;padding:0 14px;background:var(--card);font:inherit;color:inherit}
.cat-filter:focus{outline:3px solid var(--pri);outline-offset:2px}
.jump-wrap{margin:24px 0 32px}
.jump-title{font-size:12px;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px}
.jump-nav{display:flex;gap:8px;flex-wrap:wrap}
.jump-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;font-size:13px;font-weight:600;background:var(--card);border:1px solid var(--line);color:var(--ink);transition:all .15s}
.jump-pill:hover{border-color:var(--pri);background:var(--soft);color:var(--pri)}
.jump-pill span{color:var(--c, var(--pri));font-weight:800}
.jump-pill em{font-style:normal;color:var(--mut);font-size:11px}
.cat-sec{margin:44px 0 32px;scroll-margin-top:80px}
.cat-sec-hd{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.cat-sec-title{display:flex;align-items:center;gap:12px}
.cat-sec-ic{display:grid;place-items:center;width:42px;height:42px;border-radius:10px;background:var(--soft);font-weight:800;font-size:18px}
.cat-sec-hd h2{margin:0;font-size:22px;letter-spacing:-.4px}
.cat-sec-hd p{margin:4px 0 0;font-size:14px;color:var(--mut)}
.cat-sec-more{font-size:13px;font-weight:700;color:var(--pri);white-space:nowrap}
.cat-sec-more:hover{text-decoration:underline}
.home-doc{margin-top:16px;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.home-doc h3{margin:0 0 8px;font-size:18px}
.home-doc p{margin:0 0 10px;font-size:14px;color:var(--mut);line-height:1.6}

/* ─── Guide Hero ─── */
.guide-hero{background:linear-gradient(135deg,var(--soft) 0%,var(--card) 100%);border:1px solid var(--line);border-radius:18px;padding:44px 36px 36px;margin:12px 0 28px;position:relative;overflow:hidden}
.guide-hero::before{content:"";position:absolute;top:-80px;right:-80px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,var(--pri) 0%,transparent 70%);opacity:.07;pointer-events:none}
.guide-hero-content{position:relative;z-index:1}
.guide-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:999px;font-size:13px;font-weight:700;color:var(--pri);background:var(--soft);border:1px solid var(--line);margin-bottom:16px}
.guide-hero h1{font-size:clamp(26px,4.5vw,42px);line-height:1.15;letter-spacing:-1px;margin:0 0 12px;color:var(--ink)}
.guide-hero p{font-size:17px;color:var(--mut);margin:0 0 22px;max-width:68ch;line-height:1.6}
.guide-hero-stats{display:flex;gap:24px;flex-wrap:wrap;font-size:13px;color:var(--mut)}.guide-hero-stats b{color:var(--ink);font-size:18px;margin-right:4px}

/* ─── Guide Grid (list page) ─── */
.guide-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));margin:16px 0 40px}
.guide-card{display:flex;align-items:flex-start;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;text-decoration:none;color:inherit;transition:border-color .18s,box-shadow .18s;position:relative}
.guide-card:hover{border-color:var(--gc,var(--pri));box-shadow:0 6px 24px -4px rgba(0,0,0,.1)}
.guide-card-ic{flex:none;width:48px;height:48px;border-radius:12px;background:var(--soft);color:var(--gc,var(--pri));display:grid;place-items:center;font-size:22px;font-weight:800;border:1px solid var(--line)}
.guide-card-body{flex:1;min-width:0}
.guide-card-cat{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--gc,var(--pri));margin-bottom:5px}
.guide-card h3{margin:0 0 5px;font-size:15px;line-height:1.3;font-weight:700}
.guide-card p{margin:0 0 10px;font-size:13px;color:var(--mut);line-height:1.5}
.guide-card-meta{display:flex;gap:8px;flex-wrap:wrap}
.guide-card-meta span{font-size:11px;font-weight:600;padding:2px 8px;border-radius:5px;background:var(--soft);color:var(--mut)}
.guide-card-arr{flex:none;font-size:18px;color:var(--gc,var(--pri));opacity:.6;transition:transform .18s;align-self:center}
.guide-card:hover .guide-card-arr{transform:translateX(4px);opacity:1}

/* ─── Category Guide Hero ─── */
.cat-guide-hero{position:relative;border-radius:18px;padding:36px 30px;margin:12px 0 24px;background:var(--card);border:1px solid var(--line);overflow:hidden;box-shadow:0 4px 20px -2px rgba(0,0,0,.04)}
.cat-guide-glow{position:absolute;top:-70px;right:-70px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,var(--cat-c) 0%,transparent 70%);opacity:.14;pointer-events:none}
.cat-guide-content{position:relative;z-index:1}
.cat-guide-hero h1{font-size:clamp(22px,3.5vw,32px);line-height:1.2;letter-spacing:-.7px;margin:10px 0 8px;color:var(--ink)}
.cat-guide-hero p{font-size:16px;color:var(--mut);margin:0 0 18px;max-width:70ch;line-height:1.6}

/* ─── Guide Layout (detail page) ─── */
.guide-layout{display:grid;gap:24px;grid-template-columns:minmax(0,1fr) 280px;align-items:start;margin-top:16px}
@media(max-width:900px){.guide-layout{grid-template-columns:1fr}}
.guide-main{display:flex;flex-direction:column;gap:18px}

/* ─── Guide Boxes ─── */
.guide-box{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px}
.guide-box-title{display:block;margin-top:0;font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--pri);margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.guide-box p{margin:0 0 12px;color:var(--mut);line-height:1.65;font-size:15px}
.guide-box p:last-child{margin-bottom:0}

/* Formula */
.guide-formula{background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:16px 20px;font-family:monospace;font-size:15px;color:var(--ink);line-height:1.7;margin:10px 0 12px;overflow-x:auto;word-break:break-word}
.guide-formula-desc{font-size:14px;color:var(--mut);line-height:1.6;margin:0}

/* Inputs / Steps / Tips */
.guide-inputs,.guide-steps,.guide-tips{margin:10px 0 14px;padding-left:22px;color:var(--mut);font-size:14px;line-height:1.7}
.guide-inputs li,.guide-steps li,.guide-tips li{margin-bottom:6px}
.guide-steps{list-style:decimal}

/* Result box */
.guide-result{background:var(--soft);border-left:4px solid var(--acc);border-radius:0 10px 10px 0;padding:14px 18px;font-size:14px;color:var(--ink);line-height:1.6;margin-top:12px}

/* FAQ inside guide */
.guide-faq{border-bottom:1px solid var(--line);padding:10px 0}
.guide-faq:last-child{border-bottom:0}
.guide-faq summary{cursor:pointer;font-weight:600;font-size:15px;color:var(--ink)}
.guide-faq p{margin:8px 0 0;color:var(--mut);font-size:14px;line-height:1.6}

/* ─── Guide Sidebar ─── */
.guide-side .panel{margin-bottom:16px;padding:18px}
.guide-side h2{display:block;margin:0 0 10px;font-size:15px;letter-spacing:0}
.guide-side a{display:block;padding:7px 0;font-size:14px;color:var(--mut);border-bottom:1px solid var(--line)}
.guide-side a:last-child{border:0}
.guide-side a:hover{color:var(--pri)}

/* ─── Category guide CTA button ─── */
.guide-cat-cta{margin:24px 0 8px}
.guide-cat-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:10px;background:var(--soft);border:1px solid var(--line);color:var(--pri);font-weight:700;font-size:14px;transition:background .15s,border-color .15s}
.guide-cat-btn:hover{background:var(--pri);color:#fff;border-color:var(--pri)}


/* ===== Tool hero modern (halaman kalkulator) ===== */
.tool-hero{--hc:var(--pri);--mx:50%;--my:0%;position:relative;overflow:hidden;isolation:isolate;border-radius:24px;margin:10px 0 26px;padding:44px 36px 36px;
 background:linear-gradient(145deg,color-mix(in srgb,var(--hc) 16%,var(--card)),var(--card) 55%,color-mix(in srgb,var(--hc) 8%,var(--card)));
 border:1px solid color-mix(in srgb,var(--hc) 26%,var(--line));box-shadow:0 20px 50px -24px color-mix(in srgb,var(--hc) 55%,transparent),inset 0 1px 0 rgba(255,255,255,.35);
 animation:th-in .7s cubic-bezier(.2,.8,.2,1) both}
.th-body{position:relative;z-index:2;max-width:780px}
.th-deco{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.th-deco i{position:absolute;border-radius:50%;filter:blur(46px);background:var(--hc);opacity:.32;will-change:transform}
.th-deco .b1{width:280px;height:280px;top:-90px;right:-60px;animation:th-float1 11s ease-in-out infinite}
.th-deco .b2{width:200px;height:200px;bottom:-80px;left:30%;opacity:.2;background:color-mix(in srgb,var(--hc) 50%,#ec4899);animation:th-float2 14s ease-in-out infinite}
.th-deco .b3{width:150px;height:150px;top:20%;right:25%;opacity:.16;background:color-mix(in srgb,var(--hc) 45%,#06b6d4);animation:th-float3 9s ease-in-out infinite}
.th-deco span{position:absolute;right:34px;top:50%;translate:0 -50%;font-size:150px;line-height:1;font-weight:800;color:var(--hc);opacity:.14;animation:th-bob 6s ease-in-out infinite}
.th-spot{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(420px circle at var(--mx) var(--my),color-mix(in srgb,var(--hc) 22%,transparent),transparent 65%)}
.tool-hero:hover .th-spot{opacity:1}
.th-badge{display:inline-flex;align-items:center;gap:8px;padding:5px 14px 5px 6px;border-radius:99px;font-size:13px;font-weight:700;color:var(--hc);position:relative;overflow:hidden;
 background:color-mix(in srgb,var(--card) 70%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid color-mix(in srgb,var(--hc) 32%,var(--line))}
.th-badge::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);animation:th-shine 4.5s ease-in-out 1.2s infinite}
.th-ic{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--hc),color-mix(in srgb,var(--hc) 55%,#000));color:#fff;font-size:13px;font-weight:800;box-shadow:0 0 0 0 color-mix(in srgb,var(--hc) 55%,transparent);animation:th-pulse 2.6s ease-out infinite}
.tool-hero h1{margin:16px 0 10px;font-size:clamp(28px,5vw,46px);line-height:1.1;letter-spacing:-1.4px;font-weight:800;
 background:linear-gradient(100deg,var(--ink) 0%,var(--ink) 40%,var(--hc) 60%,var(--ink) 80%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:th-grad 7s ease-in-out infinite alternate}
.th-desc{margin:0 0 6px;font-size:18px;line-height:1.55;color:var(--ink);max-width:60ch}
.th-short{margin:0 0 20px;font-size:15px;color:var(--mut);max-width:62ch}
.th-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.hc{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:10px;font-size:13px;font-weight:600;color:var(--ink);
 background:color-mix(in srgb,var(--card) 72%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--line);
 transition:transform .25s,border-color .25s,box-shadow .25s;animation:th-pop .55s cubic-bezier(.3,1.4,.5,1) both;animation-delay:calc(.45s + var(--i,0)*.07s)}
.hc:hover{transform:translateY(-3px);border-color:var(--hc);box-shadow:0 8px 18px -8px color-mix(in srgb,var(--hc) 70%,transparent)}
.hc i{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;padding:2px 6px;border-radius:5px;background:color-mix(in srgb,var(--hc) 15%,var(--card));color:var(--hc)}
.hc.out i{background:var(--hc);color:#fff}
.th-meta{display:flex;flex-wrap:wrap;gap:8px 12px;font-size:13px;color:var(--mut)}
.th-meta span{padding:5px 12px;border-radius:99px;background:color-mix(in srgb,var(--hc) 8%,transparent);border:1px solid color-mix(in srgb,var(--hc) 16%,var(--line))}
.th-meta b{color:var(--ink);margin-right:4px;font-variant-numeric:tabular-nums}
/* animasi masuk bertahap */
.th-badge,.tool-hero h1,.th-desc,.th-short,.th-meta{animation:th-up .7s cubic-bezier(.2,.8,.2,1) both}
.th-badge{animation-delay:.05s}.tool-hero h1{animation:th-up .7s cubic-bezier(.2,.8,.2,1) .15s both,th-grad 7s ease-in-out .9s infinite alternate}.th-desc{animation-delay:.25s}.th-short{animation-delay:.33s}.th-meta{animation-delay:.9s}
/* 6 gaya, dipilih per tool */
.tool-hero.hv1 .th-deco span{right:40px;font-size:130px;animation:th-spin 26s linear infinite;translate:0 -50%}
.tool-hero.hv1::before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--ang,0deg),transparent 0 70%,var(--hc) 85%,transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:th-ring 5s linear infinite;pointer-events:none}
.tool-hero.hv2 .th-deco::before{content:"";position:absolute;right:-60px;top:-60px;bottom:-60px;width:240px;transform:skewX(-14deg);background:linear-gradient(180deg,color-mix(in srgb,var(--hc) 30%,transparent),transparent);animation:th-sweep 8s ease-in-out infinite alternate}
.tool-hero.hv3 .th-deco::before{content:"";position:absolute;inset:-20px;background-image:linear-gradient(color-mix(in srgb,var(--hc) 14%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--hc) 14%,transparent) 1px,transparent 1px);background-size:34px 34px;-webkit-mask-image:linear-gradient(90deg,transparent 30%,#000);mask-image:linear-gradient(90deg,transparent 30%,#000);animation:th-grid 12s linear infinite}
.tool-hero.hv4 .th-deco::before,.tool-hero.hv4 .th-deco::after{content:"";position:absolute;right:70px;top:50%;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--hc) 40%,transparent);translate:50% -50%;animation:th-orbit 6s ease-out infinite}
.tool-hero.hv4 .th-deco::before{width:150px;height:150px}
.tool-hero.hv4 .th-deco::after{width:150px;height:150px;animation-delay:3s}
.tool-hero.hv5 .th-deco::before{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--hc) 12%,transparent) 0 12px,transparent 12px 24px);-webkit-mask-image:linear-gradient(0deg,#000,transparent);mask-image:linear-gradient(0deg,#000,transparent);animation:th-stripes 4s linear infinite}
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes th-ring{to{--ang:360deg}}
@keyframes th-in{from{opacity:0;transform:translateY(14px) scale(.985)}}
@keyframes th-up{from{opacity:0;transform:translateY(16px)}}
@keyframes th-pop{from{opacity:0;transform:scale(.7) translateY(8px)}}
@keyframes th-float1{50%{transform:translate(-50px,40px) scale(1.15)}}
@keyframes th-float2{50%{transform:translate(60px,-30px) scale(.9)}}
@keyframes th-float3{50%{transform:translate(-30px,-40px) scale(1.2)}}
@keyframes th-bob{50%{transform:translateY(-12px) rotate(4deg)}}
@keyframes th-spin{to{transform:rotate(360deg)}}
@keyframes th-shine{60%,100%{transform:translateX(120%)}}
@keyframes th-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--hc) 50%,transparent)}70%,100%{box-shadow:0 0 0 10px transparent}}
@keyframes th-grad{to{background-position:100% 0}}
@keyframes th-sweep{to{transform:skewX(-14deg) translateX(-50px)}}
@keyframes th-grid{to{background-position:34px 34px}}
@keyframes th-orbit{0%{transform:scale(.5);opacity:.9}100%{transform:scale(2.4);opacity:0}}
@keyframes th-stripes{to{background-position:24px 0}}
@media(max-width:640px){.tool-hero{padding:30px 20px 24px;border-radius:20px}.th-deco span{font-size:90px;right:12px}.th-desc{font-size:16px}.th-deco .b1{width:200px;height:200px}}
@media(prefers-reduced-motion:reduce){.tool-hero,.tool-hero *,.tool-hero::before,.tool-hero .th-deco::before,.tool-hero .th-deco::after{animation:none!important;transition:none!important}.tool-hero h1{-webkit-text-fill-color:var(--ink);color:var(--ink);background:none}}
@media print{.th-deco,.th-spot{display:none}.tool-hero{box-shadow:none;background:none}.tool-hero h1{-webkit-text-fill-color:#000;color:#000;background:none}}

/* ===== Category hero: animasi ===== */
.cat-hero{--cat-c:var(--pri);--mx:50%;--my:0%;isolation:isolate;border-radius:24px;padding:42px 34px 32px;
 background:linear-gradient(145deg,color-mix(in srgb,var(--cat-c) 15%,var(--card)),var(--card) 58%,color-mix(in srgb,var(--cat-c) 7%,var(--card)));
 border-color:color-mix(in srgb,var(--cat-c) 26%,var(--line));box-shadow:0 20px 50px -26px color-mix(in srgb,var(--cat-c) 55%,transparent);animation:ch-in .7s cubic-bezier(.2,.8,.2,1) both}
.cat-hero-glow{display:none}
.ch-deco{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ch-deco i{position:absolute;border-radius:50%;filter:blur(46px);background:var(--cat-c);will-change:transform}
.ch-deco .c1{width:300px;height:300px;top:-100px;right:-70px;opacity:.3;animation:ch-f1 11s ease-in-out infinite}
.ch-deco .c2{width:200px;height:200px;bottom:-90px;left:35%;opacity:.18;background:color-mix(in srgb,var(--cat-c) 50%,#ec4899);animation:ch-f2 14s ease-in-out infinite}
.ch-deco span{position:absolute;right:36px;top:50%;translate:0 -50%;font-size:160px;line-height:1;font-weight:800;color:var(--cat-c);opacity:.14;animation:ch-bob 6s ease-in-out infinite}
.ch-spot{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(420px circle at var(--mx) var(--my),color-mix(in srgb,var(--cat-c) 22%,transparent),transparent 65%)}
.cat-hero:hover .ch-spot{opacity:1}
.cat-hero-content{z-index:2}
.cat-badge{position:relative;overflow:hidden;background:color-mix(in srgb,var(--card) 70%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-color:color-mix(in srgb,var(--cat-c) 32%,var(--line))}
.cat-badge::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);animation:ch-shine 4.5s ease-in-out 1.2s infinite}
.cat-badge .cat-ic{animation:ch-pulse 2.6s ease-out infinite}
.cat-hero h1{font-size:clamp(28px,5vw,44px);letter-spacing:-1.3px;font-weight:800;background:linear-gradient(100deg,var(--ink) 0%,var(--ink) 40%,var(--cat-c) 60%,var(--ink) 80%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.cat-badge{animation:ch-up .7s cubic-bezier(.2,.8,.2,1) .05s both}
.cat-hero h1{animation:ch-up .7s cubic-bezier(.2,.8,.2,1) .15s both,ch-grad 7s ease-in-out .9s infinite alternate}
.cat-hero p.cat-desc{animation:ch-up .7s cubic-bezier(.2,.8,.2,1) .25s both}
.cat-meta{animation:ch-up .7s cubic-bezier(.2,.8,.2,1) .4s both}
.cat-meta b{font-variant-numeric:tabular-nums}
.cat-tag{transition:transform .25s,background .25s,color .25s;animation:ch-pop .55s cubic-bezier(.3,1.4,.5,1) both;animation-delay:calc(.6s + var(--i,0)*.08s)}
.cat-tag:hover{transform:translateY(-3px);background:var(--cat-c);color:#fff}
/* kartu kalkulator muncul bertahap */
.cat-bar,.cat-bar~.grid .tile{animation:ch-up .6s cubic-bezier(.2,.8,.2,1) both}
.cat-bar{animation-delay:.5s}
.cat-bar~.grid .tile{animation-delay:calc(.55s + var(--n,0)*.04s)}
.cat-bar~.grid .tile:nth-child(1){--n:1}.cat-bar~.grid .tile:nth-child(2){--n:2}.cat-bar~.grid .tile:nth-child(3){--n:3}.cat-bar~.grid .tile:nth-child(4){--n:4}.cat-bar~.grid .tile:nth-child(5){--n:5}.cat-bar~.grid .tile:nth-child(6){--n:6}.cat-bar~.grid .tile:nth-child(7){--n:7}.cat-bar~.grid .tile:nth-child(8){--n:8}.cat-bar~.grid .tile:nth-child(n+9){--n:9}
.cat-bar~.grid .tile{transition:transform .25s,border-color .15s,box-shadow .25s}
.cat-bar~.grid .tile:hover{transform:translateY(-3px);box-shadow:0 12px 24px -14px color-mix(in srgb,var(--cat-c,var(--pri)) 60%,transparent)}
/* 6 gaya animasi, dipilih per kategori */
.cat-hero.ch1::before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--ang,0deg),transparent 0 70%,var(--cat-c) 85%,transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:th-ring 5s linear infinite;pointer-events:none}
.cat-hero.ch1 .ch-deco span{animation:ch-spin 26s linear infinite}
.cat-hero.ch2 .ch-deco::before{content:"";position:absolute;right:-60px;top:-60px;bottom:-60px;width:240px;transform:skewX(-14deg);background:linear-gradient(180deg,color-mix(in srgb,var(--cat-c) 30%,transparent),transparent);animation:ch-sweep 8s ease-in-out infinite alternate}
.cat-hero.ch3 .ch-deco::before{content:"";position:absolute;inset:-20px;background-image:linear-gradient(color-mix(in srgb,var(--cat-c) 14%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--cat-c) 14%,transparent) 1px,transparent 1px);background-size:34px 34px;-webkit-mask-image:linear-gradient(90deg,transparent 30%,#000);mask-image:linear-gradient(90deg,transparent 30%,#000);animation:ch-grid 12s linear infinite}
.cat-hero.ch4 .ch-deco::before,.cat-hero.ch4 .ch-deco::after{content:"";position:absolute;right:90px;top:50%;width:160px;height:160px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--cat-c) 40%,transparent);translate:50% -50%;animation:ch-orbit 6s ease-out infinite}
.cat-hero.ch4 .ch-deco::after{animation-delay:3s}
.cat-hero.ch5 .ch-deco::before{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--cat-c) 12%,transparent) 0 12px,transparent 12px 24px);-webkit-mask-image:linear-gradient(0deg,#000,transparent);mask-image:linear-gradient(0deg,#000,transparent);animation:ch-stripes 4s linear infinite}
@keyframes ch-in{from{opacity:0;transform:translateY(14px) scale(.985)}}
@keyframes ch-up{from{opacity:0;transform:translateY(16px)}}
@keyframes ch-pop{from{opacity:0;transform:scale(.7) translateY(8px)}}
@keyframes ch-f1{50%{transform:translate(-50px,40px) scale(1.15)}}
@keyframes ch-f2{50%{transform:translate(60px,-30px) scale(.9)}}
@keyframes ch-bob{50%{transform:translateY(-12px) rotate(4deg)}}
@keyframes ch-spin{to{transform:rotate(360deg)}}
@keyframes ch-shine{60%,100%{transform:translateX(120%)}}
@keyframes ch-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--cat-c) 50%,transparent)}70%,100%{box-shadow:0 0 0 9px transparent}}
@keyframes ch-grad{to{background-position:100% 0}}
@keyframes ch-sweep{to{transform:skewX(-14deg) translateX(-50px)}}
@keyframes ch-grid{to{background-position:34px 34px}}
@keyframes ch-orbit{0%{transform:scale(.5);opacity:.9}100%{transform:scale(2.4);opacity:0}}
@keyframes ch-stripes{to{background-position:24px 0}}
@media(max-width:640px){.cat-hero{padding:28px 20px 22px;border-radius:20px}.ch-deco span{font-size:90px;right:12px}}
@media(prefers-reduced-motion:reduce){.cat-hero,.cat-hero *,.cat-hero::before,.cat-hero .ch-deco::before,.cat-hero .ch-deco::after,.cat-bar,.cat-bar~.grid .tile{animation:none!important;transition:none!important}.cat-hero h1{-webkit-text-fill-color:var(--ink);color:var(--ink);background:none}}
@media print{.ch-deco,.ch-spot{display:none}.cat-hero{box-shadow:none;background:none}.cat-hero h1{-webkit-text-fill-color:#000;color:#000;background:none}}

/* ===== Related calculators: ikon beranimasi ===== */
.side a.rel{display:flex;align-items:center;gap:11px;padding:8px 6px;margin:0 -6px;border-radius:10px;border-bottom:0;color:var(--ink);font-weight:500;transition:background .2s,transform .25s;animation:rel-in .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*.06s + .1s)}
.side a.rel:hover{background:color-mix(in srgb,var(--rc) 9%,transparent);color:var(--ink);transform:translateX(4px)}
.rel-ic{flex:none;position:relative;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;color:var(--rc);
 background:linear-gradient(135deg,color-mix(in srgb,var(--rc) 18%,var(--card)),color-mix(in srgb,var(--rc) 6%,var(--card)));border:1px solid color-mix(in srgb,var(--rc) 26%,var(--line));
 transition:background .25s,color .25s,box-shadow .25s,transform .35s cubic-bezier(.3,1.5,.5,1)}
.rel .rel-ic{--rc:inherit}
.side a.rel .rel-ic{color:var(--rc)}
.rel-ic::after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1.5px solid var(--rc);opacity:0;animation:rel-ping 3.4s ease-out infinite;animation-delay:calc(var(--i,0)*.45s)}
.rel-ic svg{display:block;transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.rel-t{font-size:14px;line-height:1.3;min-width:0}
.side a.rel:hover .rel-ic{background:var(--rc);color:#fff;box-shadow:0 8px 16px -8px var(--rc);transform:translateY(-2px) rotate(-6deg)}
.side a.rel.an0:hover .rel-ic svg{animation:rel-wiggle .6s ease}
.side a.rel.an1:hover .rel-ic svg{animation:rel-bounce .6s ease}
.side a.rel.an2:hover .rel-ic svg{animation:rel-spin .7s cubic-bezier(.3,1.3,.5,1)}
.side a.rel.an3:hover .rel-ic svg{animation:rel-pulse .6s ease}
@keyframes rel-in{from{opacity:0;transform:translateX(-10px)}}
@keyframes rel-ping{0%{opacity:.55;transform:scale(1)}30%,100%{opacity:0;transform:scale(1.5)}}
@keyframes rel-wiggle{20%{transform:rotate(-18deg)}40%{transform:rotate(14deg)}60%{transform:rotate(-10deg)}80%{transform:rotate(6deg)}}
@keyframes rel-bounce{30%{transform:translateY(-6px)}60%{transform:translateY(1px)}80%{transform:translateY(-2px)}}
@keyframes rel-spin{to{transform:rotate(360deg)}}
@keyframes rel-pulse{40%{transform:scale(1.3)}70%{transform:scale(.92)}}
@media(prefers-reduced-motion:reduce){.side a.rel,.rel-ic,.rel-ic::after,.rel-ic svg{animation:none!important;transition:none!important}}
@media print{.rel-ic{display:none}}

/* ===== Card kategori modern ===== */
/* 1) Kartu kategori di /guides */
.guide-grid{gap:18px}
.guide-card{--gc:var(--pri);--mx:50%;--my:0%;position:relative;overflow:hidden;isolation:isolate;gap:16px;padding:22px 22px 20px;border-radius:20px;
 background:linear-gradient(150deg,color-mix(in srgb,var(--gc) 9%,var(--card)),var(--card) 55%);border:1px solid color-mix(in srgb,var(--gc) 18%,var(--line));
 box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 10px 26px -20px color-mix(in srgb,var(--gc) 60%,transparent);
 transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .25s}
.guide-card::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .3s;background:radial-gradient(260px circle at var(--mx) var(--my),color-mix(in srgb,var(--gc) 20%,transparent),transparent 70%)}
.guide-card::after{content:"";position:absolute;left:22px;right:22px;top:0;height:3px;border-radius:0 0 4px 4px;background:linear-gradient(90deg,var(--gc),color-mix(in srgb,var(--gc) 40%,#ec4899));transform:scaleX(.18);transform-origin:left;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.guide-card:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--gc) 55%,var(--line));box-shadow:0 22px 40px -22px color-mix(in srgb,var(--gc) 75%,transparent)}
.guide-card:hover::before{opacity:1}.guide-card:hover::after{transform:scaleX(1)}
.guide-card-ic{position:relative;width:54px;height:54px;border-radius:16px;font-size:24px;color:var(--gc);
 background:linear-gradient(135deg,color-mix(in srgb,var(--gc) 22%,var(--card)),color-mix(in srgb,var(--gc) 8%,var(--card)));border:1px solid color-mix(in srgb,var(--gc) 30%,var(--line));
 transition:transform .45s cubic-bezier(.3,1.5,.5,1),background .3s,color .3s,box-shadow .3s}
.guide-card-ic::after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1.5px solid var(--gc);opacity:0;animation:cc-ping 3.6s ease-out infinite}
.guide-card:hover .guide-card-ic{transform:translateY(-3px) rotate(-8deg) scale(1.06);background:var(--gc);color:#fff;box-shadow:0 12px 20px -10px var(--gc)}
.guide-card-cat{letter-spacing:.8px}
.guide-card h3{font-size:16px;letter-spacing:-.2px}
.guide-card-meta span{background:color-mix(in srgb,var(--gc) 9%,var(--card));color:var(--mut);border:1px solid color-mix(in srgb,var(--gc) 16%,var(--line));border-radius:99px;padding:2px 10px;transition:background .25s,color .25s}
.guide-card:hover .guide-card-meta span{background:color-mix(in srgb,var(--gc) 16%,var(--card));color:var(--ink)}
.guide-card-arr{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font-size:16px;opacity:1;background:color-mix(in srgb,var(--gc) 10%,var(--card));transition:transform .35s cubic-bezier(.3,1.5,.5,1),background .25s,color .25s}
.guide-card:hover .guide-card-arr{transform:translateX(4px);background:var(--gc);color:#fff}
/* 2) Pill "Browse by Category" di beranda */
.jump-wrap{margin:26px 0 34px}
.jump-nav{gap:10px}
.jump-pill{--c:var(--pri);position:relative;overflow:hidden;gap:8px;padding:7px 16px 7px 8px;border-radius:99px;font-weight:700;
 background:color-mix(in srgb,var(--card) 80%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid color-mix(in srgb,var(--c) 22%,var(--line));
 transition:transform .3s cubic-bezier(.3,1.5,.5,1),box-shadow .3s,color .25s,border-color .25s}
.jump-pill span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font-size:13px;color:var(--c);background:color-mix(in srgb,var(--c) 14%,var(--card));transition:background .25s,color .25s,transform .4s cubic-bezier(.3,1.5,.5,1)}
.jump-pill:hover{transform:translateY(-3px);border-color:var(--c);background:color-mix(in srgb,var(--c) 8%,var(--card));color:var(--ink);box-shadow:0 12px 20px -12px var(--c)}
.jump-pill:hover span{background:var(--c);color:#fff;transform:rotate(-12deg) scale(1.1)}
/* 3) Header section tiap kategori di beranda */
.cat-sec-hd{position:relative;border-bottom:0;padding-bottom:16px}
.cat-sec-hd::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:linear-gradient(90deg,currentColor,transparent 70%);opacity:.0}
.cat-sec-ic{position:relative;width:50px;height:50px;border-radius:15px;font-size:22px;
 background:linear-gradient(135deg,color-mix(in srgb,currentColor 20%,var(--card)),color-mix(in srgb,currentColor 6%,var(--card)));border:1px solid color-mix(in srgb,currentColor 28%,var(--line));
 transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.cat-sec-ic::after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1.5px solid currentColor;opacity:0;animation:cc-ping 3.6s ease-out infinite}
.cat-sec:hover .cat-sec-ic{transform:rotate(-8deg) scale(1.07)}
.cat-sec-hd h2{font-size:24px;letter-spacing:-.6px}
.cat-sec-more{display:inline-flex;align-items:center;padding:8px 16px;border-radius:99px;background:var(--soft);border:1px solid var(--line);transition:background .25s,color .25s,transform .3s cubic-bezier(.3,1.5,.5,1),box-shadow .25s}
.cat-sec-more:hover{text-decoration:none;background:var(--pri);color:#fff;transform:translateX(3px);box-shadow:0 10px 18px -10px var(--pri)}
/* 4) Item kategori di dropdown menu */
.nav-drop-item{border-radius:12px;padding:9px 10px;transition:background .2s,transform .25s}
.nav-drop-item:hover{transform:translateX(3px)}
.nav-drop-ic{width:34px;height:34px;border-radius:10px;font-size:15px;background:linear-gradient(135deg,var(--soft),color-mix(in srgb,var(--pri) 12%,var(--card)));border:1px solid var(--line);transition:transform .4s cubic-bezier(.3,1.5,.5,1),background .25s,color .25s}
.nav-drop-item:hover .nav-drop-ic{background:var(--pri);color:#fff;transform:rotate(-8deg) scale(1.08)}
/* reveal saat scroll (kelas ditambahkan oleh JS) */
.rv{opacity:0;transform:translateY(22px) scale(.985);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--rd,0)*55ms)}
.rv.in{opacity:1;transform:none}
.guide-card.rv.in:hover{transform:translateY(-6px)}
@keyframes cc-ping{0%{opacity:.5;transform:scale(1)}35%,100%{opacity:0;transform:scale(1.45)}}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.guide-card,.guide-card *,.jump-pill,.jump-pill *,.cat-sec-ic,.cat-sec-ic::after,.nav-drop-ic,.cat-sec-more{animation:none!important;transition:none!important}}
@media print{.guide-card::before,.guide-card::after{display:none}}

/* ===== Animasi kartu kalkulator (kategori + beranda) ===== */
:is(.cat-bar~.grid,.home-pop-sec .grid,.home-all-cats .grid,.all-calcs-sec .grid) .tile{--tc:var(--cat-c,var(--pri));--mx:50%;--my:50%;position:relative;overflow:hidden;isolation:isolate;
 background:linear-gradient(160deg,color-mix(in srgb,var(--tc) 5%,var(--card)),var(--card) 62%);
 transition:transform .22s ease-out,border-color .25s,box-shadow .3s}
:is(.cat-bar~.grid,.home-pop-sec .grid,.home-all-cats .grid,.all-calcs-sec .grid) .tile>*{position:relative;z-index:1}
/* sorotan mengikuti kursor */
:is(.cat-bar~.grid,.home-pop-sec .grid,.home-all-cats .grid,.all-calcs-sec .grid) .tile::before{content:"";position:absolute;inset:0;z-index:0;opacity:0;pointer-events:none;transition:opacity .3s;
 background:radial-gradient(220px circle at var(--mx) var(--my),color-mix(in srgb,var(--tc) 20%,transparent),transparent 70%)}
/* garis aksen bawah menyapu dari kiri */
:is(.cat-bar~.grid,.home-pop-sec .grid,.home-all-cats .grid,.all-calcs-sec .grid) .tile::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:2;pointer-events:none;
 background:linear-gradient(90deg,var(--tc),color-mix(in srgb,var(--tc) 45%,#ec4899));transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
:is(.cat-bar~.grid,.home-pop-sec .grid,.home-all-cats .grid,.all-calcs-sec .grid) .tile .ic{color:var(--tc);border:1px solid color-mix(in srgb,var(--tc) 24%,var(--line));
 background:linear-gradient(135deg,color-mix(in srgb,var(--tc) 18%,var(--card)),color-mix(in srgb,var(--tc) 6%,var(--card)));
 transition:transform .45s cubic-bezier(.3,1.6,.5,1),background .25s,color .25s,box-shadow .3s}
:is(.cat-bar~.grid,.home-pop-sec .grid,.home-all-cats .grid,.all-calcs-sec .grid) .tile .ic::after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1.5px solid var(--tc);opacity:0;pointer-events:none}
:is(.cat-bar~.grid,.home-pop-sec .grid,.home-all-cats .grid,.all-calcs-sec .grid) .tile .tt{transition:transform .3s cubic-bezier(.2,.8,.2,1),color .2s}
:is(.cat-bar~.grid,.home-pop-sec .grid,.home-all-cats .grid,.all-calcs-sec .grid) .tile:active{transform:scale(.975);transition-duration:.08s}
@media(hover:hover){
 :is(.cat-bar~.grid,.home-pop-sec .grid,.home-all-cats .grid,.all-calcs-sec .grid) .tile:hover,:is(.cat-bar~.grid,.home-pop-sec .grid,.home-all-cats .grid,.all-calcs-sec .grid) .tile:focus-visible{border-color:color-mix(in srgb,var(--tc) 55%,var(--line));
  transform:perspective(800px) translateY(-4px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  box-shadow:0 18px 30px -18px color-mix(in srgb,var(--tc) 65%,transparent),0 2px 6px -2px rgba(0,0,0,.08)}
 :is(.cat-bar~.grid,.home-pop-sec .grid,.home-all-cats .grid,.all-calcs-sec .grid) .tile:hover::before,:is(.cat-bar~.grid,.home-pop-sec .grid,.home-all-cats .grid,.all-calcs-sec .grid) .tile:focus-visible::before{opacity:1}
 :is(.cat-bar~.grid,.home-pop-sec .grid,.home-all-cats .grid,.all-calcs-sec .grid) .tile:hover::after,:is(.cat-bar~.grid,.home-pop-sec .grid,.home-all-cats .grid,.all-calcs-sec .grid) .tile:focus-visible::after{transform:scaleX(1)}
 :is(.cat-bar~.grid,.home-pop-sec .grid,.home-all-cats .grid,.all-calcs-sec .grid) .tile:hover .ic,:is(.cat-bar~.grid,.home-pop-sec .grid,.home-all-cats .grid,.all-calcs-sec .grid) .tile:focus-visible .ic{transform:rotate(-8deg) scale(1.12);color:#fff;border-color:transparent;
  background:linear-gradient(135deg,var(--tc),color-mix(in srgb,var(--tc) 60%,#000));box-shadow:0 8px 16px -6px color-mix(in srgb,var(--tc) 75%,transparent)}
 :is(.cat-bar~.grid,.home-pop-sec .grid,.home-all-cats .grid,.all-calcs-sec .grid) .tile:hover .ic::after,:is(.cat-bar~.grid,.home-pop-sec .grid,.home-all-cats .grid,.all-calcs-sec .grid) .tile:focus-visible .ic::after{animation:tl-ping 1s ease-out infinite}
 :is(.cat-bar~.grid,.home-pop-sec .grid,.home-all-cats .grid,.all-calcs-sec .grid) .tile:hover .tt,:is(.cat-bar~.grid,.home-pop-sec .grid,.home-all-cats .grid,.all-calcs-sec .grid) .tile:focus-visible .tt{color:var(--tc);transform:translateX(2px)}
}
/* muncul saat di-scroll (diaktifkan oleh JS) */
:is(.cat-bar~.grid,.home-pop-sec .grid,.home-all-cats .grid,.all-calcs-sec .grid).tl-io .tile{animation:none}
:is(.cat-bar~.grid,.home-pop-sec .grid,.home-all-cats .grid,.all-calcs-sec .grid).tl-io .tile:not(.tl-in){opacity:0}
:is(.cat-bar~.grid,.home-pop-sec .grid,.home-all-cats .grid,.all-calcs-sec .grid).tl-io .tile.tl-in{animation:tl-rise .6s cubic-bezier(.2,.8,.2,1) calc(var(--rd,0)*45ms) both}
:is(.cat-bar~.grid,.home-pop-sec .grid,.home-all-cats .grid,.all-calcs-sec .grid).tl-io .tile.tl-in .ic{animation:tl-icpop .6s cubic-bezier(.3,1.6,.5,1) calc(var(--rd,0)*45ms + .15s) both}
@keyframes tl-rise{from{opacity:0;transform:translateY(22px) scale(.96)}}
@keyframes tl-icpop{from{opacity:0;transform:scale(.4) rotate(-30deg)}}
@keyframes tl-ping{0%{transform:scale(1);opacity:.65}100%{transform:scale(1.7);opacity:0}}
@media(prefers-reduced-motion:reduce){:is(.cat-bar~.grid,.home-pop-sec .grid,.home-all-cats .grid) .tile,:is(.cat-bar~.grid,.home-pop-sec .grid,.home-all-cats .grid) .tile *,:is(.cat-bar~.grid,.home-pop-sec .grid,.home-all-cats .grid) .tile::before,:is(.cat-bar~.grid,.home-pop-sec .grid,.home-all-cats .grid) .tile::after{animation:none!important;transition:none!important}:is(.cat-bar~.grid,.home-pop-sec .grid,.home-all-cats .grid) .tile:hover{transform:none!important}:is(.cat-bar~.grid,.home-pop-sec .grid,.home-all-cats .grid).tl-io .tile:not(.tl-in){opacity:1}}

/* ===== Dropdown Category: modern + Featured Categories ===== */
.nav-drop::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px}
.nav-drop-menu{display:block;visibility:hidden;opacity:0;pointer-events:none;top:calc(100% + 8px);width:min(660px,calc(100vw - 32px));max-height:calc(85vh - 70px);padding:16px;border-radius:20px;
 transform:translateY(-10px) scale(.97);transform-origin:top left;
 background:color-mix(in srgb,var(--card) 90%,transparent);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);
 border:1px solid color-mix(in srgb,var(--pri) 20%,var(--line));box-shadow:0 34px 70px -24px rgba(15,27,51,.4);
 transition:opacity .2s ease,transform .32s cubic-bezier(.2,.9,.3,1.15),visibility 0s linear .32s;scrollbar-width:thin}
.nav-drop:hover .nav-drop-menu,.nav-drop.open .nav-drop-menu{visibility:visible;opacity:1;pointer-events:auto;transform:none;transition-delay:0s}
.ndm-hd{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 2px 12px}
.ndm-hd span{font-size:16px;font-weight:800;letter-spacing:-.4px;color:var(--ink)}
.ndm-hd em{font-style:normal;font-size:12px;color:var(--mut)}
.ndm-feat{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.ndm-card{--c:var(--pri);--mx:50%;--my:50%;position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;gap:2px;min-height:112px;padding:13px;border-radius:16px;color:var(--ink);
 background:linear-gradient(150deg,color-mix(in srgb,var(--c) 22%,var(--card)),color-mix(in srgb,var(--c) 6%,var(--card)));border:1px solid color-mix(in srgb,var(--c) 30%,var(--line));
 transition:transform .35s cubic-bezier(.3,1.4,.5,1),box-shadow .3s,border-color .25s}
.ndm-card>*{position:relative;z-index:1}
.ndm-card::before{content:"";position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .3s;background:radial-gradient(160px circle at var(--mx) var(--my),color-mix(in srgb,var(--c) 28%,transparent),transparent 70%)}
.ndm-card::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);transform:translateX(-130%)}
.ndm-bg{position:absolute!important;right:-6px;bottom:-14px;z-index:0!important;font-size:78px;line-height:1;font-weight:800;color:var(--c);opacity:.13;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .3s}
.ndm-card-ic{display:grid;place-items:center;width:34px;height:34px;margin-bottom:auto;border-radius:11px;font-size:16px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 60%,#000));
 box-shadow:0 8px 14px -8px var(--c);transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.ndm-card strong{margin-top:12px;font-size:14px;font-weight:700;letter-spacing:-.2px}
.ndm-card small{font-size:11.5px;color:var(--mut)}
.ndm-card:hover,.ndm-card:focus-visible{transform:translateY(-4px);border-color:color-mix(in srgb,var(--c) 60%,var(--line));box-shadow:0 16px 26px -16px color-mix(in srgb,var(--c) 75%,transparent)}
.ndm-card:hover::before{opacity:1}
.ndm-card:hover::after{transform:translateX(130%);transition:transform .7s ease}
.ndm-card:hover .ndm-card-ic{transform:rotate(-8deg) scale(1.12)}
.ndm-card:hover .ndm-bg{transform:scale(1.18) rotate(-6deg);opacity:.2}
.ndm-sub{margin:16px 2px 8px;font-size:12px;font-weight:700;color:var(--mut);display:flex;align-items:center;gap:10px}
.ndm-sub::after{content:"";flex:1;height:1px;background:var(--line)}
.nav-drop-grid{grid-template-columns:repeat(3,1fr);gap:4px}
.nav-drop-item{--c:var(--pri);position:relative;color:var(--ink);transition:background .2s,transform .25s}
.nav-drop-item:hover,.nav-drop-item.active{background:color-mix(in srgb,var(--c) 11%,transparent);color:var(--ink)}
.nav-drop-item:hover{transform:translateX(3px)}
.nav-drop-ic{color:var(--c);background:color-mix(in srgb,var(--c) 14%,var(--card));border:1px solid color-mix(in srgb,var(--c) 26%,var(--line))}
.nav-drop-item:hover .nav-drop-ic{background:var(--c);color:#fff;border-color:transparent;transform:rotate(-8deg) scale(1.1)}
.nav-drop-item.active::after{content:"";position:absolute;right:10px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--c);box-shadow:0 0 0 0 var(--c);animation:ndm-dot 2s ease-out infinite}
.nav-drop-foot{border-top:0;margin-top:12px;padding-top:0}
.nav-drop-foot a{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;border-radius:12px;font-size:14px;color:#fff;background:linear-gradient(100deg,var(--pri),color-mix(in srgb,var(--pri) 55%,#7c3aed));transition:transform .25s,box-shadow .25s}
.nav-drop-foot a:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 12px 20px -12px var(--pri)}
.nav-drop-foot i{font-style:normal;transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
.nav-drop-foot a:hover i{transform:translateX(5px)}
/* item muncul bertahap saat menu dibuka */
.nav-drop:hover .ndm-hd,.nav-drop.open .ndm-hd,.nav-drop:hover .ndm-card,.nav-drop.open .ndm-card,.nav-drop:hover .nav-drop-item,.nav-drop.open .nav-drop-item,.nav-drop:hover .nav-drop-foot,.nav-drop.open .nav-drop-foot{animation:ndm-in .42s cubic-bezier(.2,.8,.2,1) calc(min(var(--i,0)*26ms,420ms) + 60ms) both}
@keyframes ndm-in{from{opacity:0;transform:translateY(10px) scale(.97)}}
@keyframes ndm-dot{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c) 55%,transparent)}70%,100%{box-shadow:0 0 0 8px transparent}}
@media(max-width:640px){.ndm-feat{grid-template-columns:repeat(2,1fr)}.nav-drop-grid{grid-template-columns:repeat(2,1fr)}.ndm-hd em{display:none}}
@media(max-width:520px){.nav-drop-menu{width:calc(100vw - 40px);left:-20px;padding:14px}}
@media(max-width:380px){.nav-drop-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.nav-drop-menu{transform:none;transition:opacity .15s}.nav-drop-menu *,.nav-drop-menu *::after,.nav-drop-menu *::before{animation:none!important}.ndm-card,.nav-drop-item,.ndm-card *,.nav-drop-ic{transition:none!important}}
/* jaga warna saat hover (menimpa `nav a:hover` global) */
.nav-drop-menu .ndm-card:hover,.nav-drop-menu .ndm-card:focus-visible{color:var(--ink);background:linear-gradient(150deg,color-mix(in srgb,var(--c) 22%,var(--card)),color-mix(in srgb,var(--c) 6%,var(--card)))}
.nav-drop-menu .nav-drop-foot a:hover{color:#fff;background:linear-gradient(100deg,var(--pri),color-mix(in srgb,var(--pri) 55%,#7c3aed))}

/* ===== Tool page: modern calculator card (v2) ===== */
.page{--tc:var(--pri);gap:28px}
.page>div,.page-main{min-width:0}
.page-main{display:flex;flex-direction:column;gap:24px}
.calc{position:relative;background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;
 box-shadow:0 1px 2px rgba(15,27,51,.04),0 24px 48px -28px color-mix(in srgb,var(--tc) 55%,transparent)}
.calc::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--tc),color-mix(in srgb,var(--tc) 40%,#06b6d4))}
.calc-hd{display:flex;align-items:center;gap:14px;padding:22px 24px 18px;border-bottom:1px solid var(--line)}
.calc-hd-ic{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:var(--tc);background:color-mix(in srgb,var(--tc) 12%,transparent)}
.calc-hd-ic svg{width:24px;height:24px}
.calc-hd-t{min-width:0;flex:1}
.calc-hd-t h2{margin:0;font-size:18px;letter-spacing:-.3px;line-height:1.25}
.calc-hd-t p{margin:2px 0 0;font-size:13px;color:var(--mut)}
.live{flex:none;display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--tc);padding:5px 11px;border-radius:99px;background:color-mix(in srgb,var(--tc) 10%,transparent)}
.live i{width:7px;height:7px;border-radius:50%;background:var(--tc);animation:live-p 2s ease-out infinite}
@keyframes live-p{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--tc) 55%,transparent)}70%,100%{box-shadow:0 0 0 8px transparent}}
.calc-body{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.calc-in{padding:24px}
.calc-res{padding:24px;background:color-mix(in srgb,var(--tc) 5%,var(--card));border-left:1px solid var(--line);display:flex;flex-direction:column;gap:14px}
.step-lb{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--mut);margin-bottom:16px}
.calc-res .step-lb{margin-bottom:0}
.step-lb b{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;color:#fff;background:var(--tc);letter-spacing:0}
.cg{display:grid;gap:16px}
.calc .fld{margin:0}
.calc .fld label{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:7px}
.calc .fld .in{position:relative;border:1.5px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--ink) 3%,var(--card));overflow:hidden;transition:border-color .2s,box-shadow .2s,background .2s}
.calc .fld .in:hover{border-color:color-mix(in srgb,var(--tc) 35%,var(--line))}
.calc .fld .in:focus-within{border-color:var(--tc);background:var(--card);box-shadow:0 0 0 4px color-mix(in srgb,var(--tc) 16%,transparent)}
.calc .fld .in.bad{border-color:#e5484d;box-shadow:0 0 0 4px rgba(229,72,77,.12)}
.calc .fld input,.calc .fld select{height:48px;padding:0 14px;font:inherit;font-size:16px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;width:100%}
.calc .fld select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:40px;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%238791a5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center}
.calc .fld .u{flex:none;padding:0 14px;font-size:13px;font-weight:700;color:var(--tc);background:color-mix(in srgb,var(--tc) 9%,transparent);border-left:1.5px solid var(--line)}
.calc .fld input{color-scheme:light}
:root[data-theme="dark"] .calc .fld input{color-scheme:dark}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .calc .fld input{color-scheme:dark}}
.calc .fld input[type=number]::-webkit-inner-spin-button{opacity:.4}
.act{display:flex;gap:10px;margin-top:22px}
.calc .btn{height:48px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:700;font-size:15px;transition:transform .15s,box-shadow .2s,background .2s,border-color .2s}
.calc .btn svg{width:18px;height:18px;flex:none}
.calc .btn.go{flex:1;color:#fff;background:linear-gradient(135deg,var(--tc),color-mix(in srgb,var(--tc) 72%,#000));box-shadow:0 10px 20px -10px var(--tc)}
.calc .btn.go:hover{transform:translateY(-1px);box-shadow:0 14px 24px -10px var(--tc)}
.calc .btn.go:active{transform:translateY(0)}
.calc .btn.o{background:var(--card);border:1.5px solid var(--line);color:var(--ink)}
.calc .btn.o:hover{background:color-mix(in srgb,var(--tc) 8%,var(--card));border-color:color-mix(in srgb,var(--tc) 40%,var(--line))}
.calc .btn:focus-visible{outline:3px solid color-mix(in srgb,var(--tc) 40%,transparent);outline-offset:2px}
.calc .btn.ok{border-color:var(--acc);color:var(--acc)}
/* result */
.calc .res{margin:0;border:0;border-radius:16px;overflow:visible;animation:none;display:flex;flex-direction:column;gap:12px}
.calc .res .main{position:relative;overflow:hidden;padding:22px;border-radius:16px;color:#fff;background:linear-gradient(135deg,color-mix(in srgb,var(--tc) 88%,#000),color-mix(in srgb,var(--tc) 55%,#000));box-shadow:0 18px 32px -18px var(--tc)}
.calc .res .main::after{content:"";position:absolute;right:-40px;top:-50px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.28),transparent 70%)}
.calc .res .main span{position:relative;z-index:1;display:block;font-size:13px;font-weight:600;color:rgba(255,255,255,.82)}
.calc .res .main strong{position:relative;z-index:1;display:block;margin-top:4px;color:#fff;font-size:clamp(28px,5vw,40px);line-height:1.15;letter-spacing:-1px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.dets{border:1px solid var(--line);border-radius:14px;background:var(--card);overflow:hidden}
.calc .det{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:12px 16px;border-top:1px solid var(--line);font-size:14px}
.calc .det:first-child{border-top:0}
.calc .det span{color:var(--mut)}
.calc .det b{text-align:right;font-weight:800;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.calc .res.pulse .main{animation:res-pop .45s cubic-bezier(.3,1.4,.5,1)}
.calc .res.pulse .det{animation:res-up .45s cubic-bezier(.2,.8,.2,1) both}
.calc .res.pulse .det:nth-child(2){animation-delay:.05s}.calc .res.pulse .det:nth-child(3){animation-delay:.1s}.calc .res.pulse .det:nth-child(n+4){animation-delay:.15s}
@keyframes res-pop{from{transform:scale(.96);opacity:.5}}
@keyframes res-up{from{opacity:0;transform:translateY(6px)}}
.calc .err{display:flex;gap:10px;align-items:flex-start;margin:0;padding:16px;border-radius:14px;border:1px dashed color-mix(in srgb,#e5484d 50%,var(--line));background:rgba(229,72,77,.07);color:#c2363b;font-size:14px;font-weight:600}
.calc .err svg{flex:none;margin-top:1px}
:root[data-theme="dark"] .calc .err{color:#ff8a8f}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .calc .err{color:#ff8a8f}}
.tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:4px}
.calc .tools .btn{height:38px;padding:0 13px;font-size:13px;border-radius:10px;gap:6px}
.calc .tools .btn svg{width:15px;height:15px}
/* info card */
.panel.info{margin:0;padding:26px;border-radius:22px}
.info-hd{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.info-hd h2{margin:0;font-size:19px;letter-spacing:-.3px}
.info-ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;color:var(--tc);background:color-mix(in srgb,var(--tc) 12%,transparent)}
.info-x{margin:0 0 6px;color:var(--mut);line-height:1.75;font-size:15px}
.faq-hd{margin-top:26px}
.panel.info details{border:1px solid var(--line);border-radius:14px;padding:0;margin-top:10px;background:var(--card);transition:border-color .2s,background .2s}
.panel.info details[open]{border-color:color-mix(in srgb,var(--tc) 40%,var(--line));background:color-mix(in srgb,var(--tc) 4%,var(--card))}
.panel.info summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;font-size:15px;cursor:pointer}
.panel.info summary::-webkit-details-marker{display:none}
.panel.info summary::after{content:"";flex:none;width:9px;height:9px;border-right:2px solid var(--mut);border-bottom:2px solid var(--mut);transform:rotate(45deg) translateY(-2px);transition:transform .25s}
.panel.info details[open] summary::after{transform:rotate(-135deg) translateY(-2px);border-color:var(--tc)}
.panel.info details p{margin:0;padding:0 16px 16px;color:var(--mut);font-size:14px}
/* sidebar */
.page .side .panel{border-radius:20px;padding:18px}
.page .side h3{display:flex;align-items:center;gap:9px;margin:0 0 10px;font-size:15px}
.page .side h3 svg{color:var(--tc);flex:none}
/* toast */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:50;transform:translate(-50%,20px);opacity:0;pointer-events:none;padding:11px 18px;border-radius:12px;background:var(--ink);color:var(--bg);font-size:14px;font-weight:600;box-shadow:0 12px 30px -10px rgba(0,0,0,.4);transition:opacity .25s,transform .25s}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media(max-width:760px){
 .calc-body{grid-template-columns:1fr}
 .calc-res{border-left:0;border-top:1px solid var(--line)}
 .calc-hd{padding:18px 18px 14px}.calc-in,.calc-res{padding:18px}
 .live{display:none}
 .panel.info{padding:20px}
}
@media(prefers-reduced-motion:reduce){.live i,.calc .res.pulse .main,.calc .res.pulse .det{animation:none!important}.toast,.calc .btn,.calc .fld .in{transition:none}}
@media print{.tools,.act,.live,.toast,.step-lb{display:none!important}.calc{box-shadow:none}.calc-body{grid-template-columns:1fr}.calc .res .main{background:none!important;color:#000;border:1px solid #000;box-shadow:none}.calc .res .main span,.calc .res .main strong{color:#000}}

/* ===== Hero halaman All calculators ===== */
.ac-hero{padding:48px 34px 32px}
.ac-hero h1{font-size:clamp(30px,5.6vw,52px);letter-spacing:-1.6px}
.ac-search{position:relative;display:flex;align-items:center;max-width:580px;margin:0 0 18px;animation:ch-up .7s cubic-bezier(.2,.8,.2,1) .32s both}
.ac-search svg{position:absolute;left:17px;width:20px;height:20px;color:var(--mut);pointer-events:none;transition:color .2s,transform .35s cubic-bezier(.3,1.6,.5,1)}
.ac-search input{width:100%;height:54px;padding:0 54px 0 48px;border-radius:16px;border:1px solid color-mix(in srgb,var(--cat-c) 28%,var(--line));background:color-mix(in srgb,var(--card) 82%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font:inherit;font-size:16px;color:inherit;box-shadow:0 12px 28px -20px color-mix(in srgb,var(--cat-c) 80%,transparent);transition:border-color .2s,box-shadow .3s,transform .3s}
.ac-search input:focus{outline:none;border-color:var(--cat-c);transform:translateY(-1px);box-shadow:0 0 0 4px color-mix(in srgb,var(--cat-c) 18%,transparent),0 16px 32px -18px color-mix(in srgb,var(--cat-c) 80%,transparent)}
.ac-search:focus-within svg{color:var(--cat-c);transform:scale(1.12) rotate(-8deg)}
.ac-search kbd{position:absolute;right:14px;display:grid;place-items:center;width:26px;height:26px;border-radius:8px;border:1px solid var(--line);background:var(--soft);font:600 12px/1 inherit;color:var(--mut);pointer-events:none;transition:opacity .2s}
.ac-search:focus-within kbd{opacity:0}
.ac-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.ac-chip{--c:var(--pri);display:inline-flex;align-items:center;gap:7px;padding:5px 11px 5px 5px;border-radius:999px;font-size:13px;font-weight:600;color:var(--ink);background:color-mix(in srgb,var(--c) 8%,var(--card));border:1px solid color-mix(in srgb,var(--c) 26%,var(--line));transition:transform .28s cubic-bezier(.3,1.4,.5,1),background .25s,color .25s,box-shadow .3s,border-color .25s;animation:ch-pop .55s cubic-bezier(.3,1.4,.5,1) both;animation-delay:calc(.5s + var(--i,0)*.05s)}
.ac-chip span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:12px;font-weight:800;color:#fff;background:var(--c);transition:transform .4s cubic-bezier(.3,1.6,.5,1),background .25s}
.ac-chip em{font-style:normal;font-size:11px;font-weight:700;padding:1px 7px;border-radius:999px;background:color-mix(in srgb,var(--c) 14%,transparent);color:var(--c);transition:background .25s,color .25s}
@media(hover:hover){
.ac-chip:hover,.ac-chip:focus-visible{transform:translateY(-3px);background:var(--c);color:#fff;border-color:transparent;box-shadow:0 10px 20px -10px var(--c)}
.ac-chip:hover span,.ac-chip:focus-visible span{transform:rotate(-12deg) scale(1.15);background:rgba(255,255,255,.25)}
.ac-chip:hover em,.ac-chip:focus-visible em{background:rgba(255,255,255,.22);color:#fff}}
.ac-bar{margin:0 0 16px;animation:ch-up .6s cubic-bezier(.2,.8,.2,1) .6s both}
@media(max-width:640px){.ac-hero{padding:32px 20px 24px}.ac-hero .ch-deco span{font-size:110px;right:10px;opacity:.1}.ac-search input{height:50px}.ac-search kbd{display:none}}
@media(prefers-reduced-motion:reduce){.ac-bar,.ac-chip,.ac-search{animation:none!important;transition:none!important}}
.empty[hidden]{display:none}


/* ===== Homepage hero (modern) ===== */
.hm-hero{--c1:var(--pri);--mx:50%;--my:30%;position:relative;isolation:isolate;overflow:hidden;margin:14px 0 8px;padding:56px 44px;border-radius:28px;border:1px solid color-mix(in srgb,var(--pri) 20%,var(--line));background:linear-gradient(150deg,color-mix(in srgb,var(--pri) 9%,var(--card)),var(--card) 55%,color-mix(in srgb,var(--acc) 7%,var(--card)));box-shadow:0 30px 70px -40px color-mix(in srgb,var(--pri) 60%,transparent);animation:ch-in .8s cubic-bezier(.2,.8,.2,1) both}
.hm-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hm-bg i{position:absolute;border-radius:50%;filter:blur(70px);will-change:transform}
.hm-bg .o1{width:420px;height:420px;top:-160px;right:-80px;background:var(--pri);opacity:.28;animation:ch-f1 13s ease-in-out infinite}
.hm-bg .o2{width:320px;height:320px;bottom:-140px;left:-60px;background:var(--acc);opacity:.2;animation:ch-f2 16s ease-in-out infinite}
.hm-bg .o3{width:240px;height:240px;top:30%;left:42%;background:#ec4899;opacity:.12;animation:ch-f1 19s ease-in-out infinite reverse}
.hm-grid{position:absolute;inset:0;background-image:linear-gradient(color-mix(in srgb,var(--ink) 7%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--ink) 7%,transparent) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse at 70% 40%,#000 0,transparent 70%);mask-image:radial-gradient(ellipse at 70% 40%,#000 0,transparent 70%)}
.hm-spot{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(460px circle at var(--mx) var(--my),color-mix(in srgb,var(--pri) 16%,transparent),transparent 65%)}
.hm-hero:hover .hm-spot{opacity:1}
.hm-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;align-items:center}
.hm-copy>*{animation:ch-up .7s cubic-bezier(.2,.8,.2,1) both}
.hm-copy>:nth-child(1){animation-delay:.05s}.hm-copy>:nth-child(2){animation-delay:.14s}.hm-copy>:nth-child(3){animation-delay:.22s}.hm-copy>:nth-child(4){animation-delay:.3s}.hm-copy>:nth-child(5){animation-delay:.38s}.hm-copy>:nth-child(6){animation-delay:.46s}.hm-copy>:nth-child(7){animation-delay:.54s}
.hm-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 10px;border-radius:999px;font-size:13px;font-weight:700;color:var(--ink);background:color-mix(in srgb,var(--card) 70%,transparent);border:1px solid color-mix(in srgb,var(--acc) 35%,var(--line));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hm-badge i{width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 0 color-mix(in srgb,var(--acc) 60%,transparent);animation:hm-pulse 2.2s ease-out infinite}
.hm-hero h1{margin:18px 0 14px;font-size:clamp(34px,5.4vw,60px);line-height:1.05;letter-spacing:-2px;font-weight:800;max-width:14ch}
.hm-hero h1 em{font-style:normal;background:linear-gradient(100deg,var(--pri),var(--acc) 55%,var(--pri));background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:hm-grad 6s ease-in-out infinite alternate}
.hm-sub{margin:0 0 26px;max-width:52ch;font-size:18px;line-height:1.6;color:var(--mut)}
.hm-search{position:relative;display:flex;align-items:center;max-width:600px;padding:6px;border-radius:18px;background:color-mix(in srgb,var(--card) 86%,transparent);border:1px solid color-mix(in srgb,var(--pri) 25%,var(--line));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 18px 40px -26px color-mix(in srgb,var(--pri) 80%,transparent);transition:border-color .2s,box-shadow .3s,transform .3s}
.hm-search:focus-within{border-color:var(--pri);transform:translateY(-1px);box-shadow:0 0 0 4px color-mix(in srgb,var(--pri) 18%,transparent),0 22px 44px -24px color-mix(in srgb,var(--pri) 80%,transparent)}
.hm-search svg{flex:none;width:20px;height:20px;margin:0 6px 0 14px;color:var(--mut);transition:color .2s,transform .35s cubic-bezier(.3,1.6,.5,1)}
.hm-search:focus-within svg{color:var(--pri);transform:scale(1.12) rotate(-8deg)}
.hm-search input{flex:1;min-width:0;height:48px;border:0;background:none;outline:0;padding:0 10px;font-size:16px}
.hm-search kbd{flex:none;display:grid;place-items:center;width:26px;height:26px;margin-right:8px;border-radius:8px;border:1px solid var(--line);background:var(--soft);font:600 12px/1 inherit;color:var(--mut);transition:opacity .2s}
.hm-search:focus-within kbd{opacity:0}
.hm-search button{flex:none;height:48px;padding:0 24px;border:0;border-radius:13px;background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;font-weight:700;cursor:pointer;transition:transform .2s,box-shadow .25s}
.hm-search button:hover{transform:translateY(-1px);box-shadow:0 10px 20px -10px var(--pri)}
.hm-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:18px 0 0}
.hm-chips>span{font-size:13px;font-weight:600;color:var(--mut);margin-right:2px}
.hm-chips a{--c:var(--pri);padding:6px 13px;border-radius:999px;font-size:13px;font-weight:600;background:color-mix(in srgb,var(--c) 9%,var(--card));border:1px solid color-mix(in srgb,var(--c) 28%,var(--line));transition:transform .25s cubic-bezier(.3,1.4,.5,1),background .2s,color .2s,box-shadow .25s}
.hm-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.hm-btn{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 22px;border-radius:13px;font-weight:700;font-size:15px;color:#fff;background:var(--ink);transition:transform .2s,box-shadow .25s}
.hm-btn i{font-style:normal;transition:transform .25s}
.hm-btn.o{background:color-mix(in srgb,var(--card) 70%,transparent);color:var(--ink);border:1px solid var(--line)}
.hm-stats{display:flex;flex-wrap:wrap;gap:12px 34px;margin:30px 0 0;padding:22px 0 0;list-style:none;border-top:1px solid color-mix(in srgb,var(--ink) 10%,transparent)}
.hm-stats b{display:block;font-size:26px;line-height:1.1;letter-spacing:-.8px;font-variant-numeric:tabular-nums}
.hm-stats span{font-size:13px;color:var(--mut)}
@media(hover:hover){
.hm-chips a:hover{transform:translateY(-3px);background:var(--c);color:#fff;border-color:transparent;box-shadow:0 10px 20px -10px var(--c)}
.hm-btn:hover{transform:translateY(-2px);box-shadow:0 14px 26px -14px var(--ink)}.hm-btn:hover i{transform:translateX(4px)}
.hm-btn.o:hover{background:var(--soft)}
.hm-float:hover{transform:translateY(-4px) scale(1.04)!important}}
/* visual */
.hm-vis{position:relative;min-height:380px;animation:ch-up .9s cubic-bezier(.2,.8,.2,1) .3s both}
.hm-card{position:absolute;inset:34px 18px 34px 18px;margin:auto;height:max-content;max-width:340px;padding:18px;border-radius:22px;background:color-mix(in srgb,var(--card) 82%,transparent);border:1px solid color-mix(in srgb,var(--pri) 22%,var(--line));-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 30px 60px -30px color-mix(in srgb,var(--pri) 70%,transparent);transform:rotate(-2.5deg);animation:hm-bobc 7s ease-in-out infinite}
.hm-card-hd{display:flex;align-items:center;gap:6px;margin-bottom:14px}
.hm-card-hd span{width:10px;height:10px;border-radius:50%;background:color-mix(in srgb,var(--ink) 16%,transparent)}
.hm-card-hd em{margin-left:auto;font-style:normal;font-size:12px;font-weight:700;color:var(--mut)}
.hm-row{margin-bottom:10px}
.hm-row label{display:block;font-size:12px;font-weight:600;color:var(--mut);margin-bottom:4px}
.hm-row div{padding:10px 12px;border-radius:10px;background:var(--bg);border:1px solid var(--line);font-weight:700;font-size:15px}
.hm-res{margin-top:14px;padding:14px;border-radius:14px;background:var(--soft)}
.hm-res small{font-size:12px;color:var(--mut)}
.hm-res strong{display:block;font-size:30px;letter-spacing:-1px;color:var(--acc)}
.hm-bar{height:6px;margin-top:10px;border-radius:99px;background:color-mix(in srgb,var(--ink) 10%,transparent);overflow:hidden}
.hm-bar i{display:block;height:100%;width:68%;border-radius:inherit;background:linear-gradient(90deg,var(--pri),var(--acc));animation:hm-fill 3.6s ease-in-out infinite alternate}
.hm-float{--c:var(--pri);position:absolute;display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 7px;border-radius:999px;font-size:13px;font-weight:700;background:color-mix(in srgb,var(--card) 88%,transparent);border:1px solid color-mix(in srgb,var(--c) 30%,var(--line));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 14px 28px -16px color-mix(in srgb,var(--c) 70%,transparent);transition:transform .3s cubic-bezier(.3,1.4,.5,1);animation:hm-bob 6s ease-in-out infinite}
.hm-float span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--c);color:#fff;font-size:13px;font-weight:800}
.hm-float.f1{top:2%;left:0;animation-delay:-1s}.hm-float.f2{top:10%;right:-2%;animation-delay:-3s}.hm-float.f3{top:44%;left:-6%;animation-delay:-2s}.hm-float.f4{top:52%;right:-4%;animation-delay:-4s}.hm-float.f5{bottom:4%;left:6%;animation-delay:-5s}.hm-float.f6{bottom:0;right:8%;animation-delay:-.5s}
@keyframes hm-pulse{70%,100%{box-shadow:0 0 0 9px transparent}}
@keyframes hm-grad{to{background-position:100% 0}}
@keyframes hm-bob{50%{transform:translateY(-10px)}}
@keyframes hm-bobc{50%{transform:translateY(-10px) rotate(-1.5deg)}}
@keyframes hm-fill{from{width:42%}to{width:86%}}
@media(max-width:900px){.hm-in{grid-template-columns:1fr}.hm-vis{display:none}.hm-hero{padding:40px 28px}}
@media(max-width:640px){.hm-hero{padding:30px 20px 26px;border-radius:22px}.hm-hero h1{letter-spacing:-1.2px}.hm-sub{font-size:16px}.hm-search{border-radius:16px}.hm-search kbd{display:none}.hm-search button{padding:0 16px}.hm-stats{gap:12px 24px}.hm-stats b{font-size:22px}.hm-btn{flex:1;justify-content:center}}
@media(prefers-reduced-motion:reduce){.hm-hero,.hm-hero *{animation:none!important;transition:none!important}.hm-hero h1 em{-webkit-text-fill-color:var(--pri);color:var(--pri);background:none}}
@media print{.hm-bg,.hm-spot,.hm-vis{display:none}.hm-hero{box-shadow:none;background:none}}


/* ===== Homepage reviews: Trusted by Users ===== */
.rv-sec{margin:56px 0 12px}
.rv-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:26px}
.rv-eyebrow{display:inline-block;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.3px;color:var(--pri);background:var(--soft)}
.rv-head h2{display:block;margin:10px 0 6px;font-size:clamp(26px,4vw,38px);letter-spacing:-1.1px;font-weight:800}
.rv-head p{margin:0;max-width:52ch;color:var(--mut)}
.rv-sum{display:flex;align-items:center;gap:14px;padding:12px 18px;border-radius:16px;background:var(--card);border:1px solid var(--line)}
.rv-sum b{font-size:38px;line-height:1;letter-spacing:-1.5px}
.rv-sum small{display:block;margin-top:4px;font-size:13px;color:var(--mut)}
.rv-stars{display:flex;gap:2px}
.rv-stars svg{width:17px;height:17px;fill:#f59e0b;stroke:#f59e0b;stroke-width:1;stroke-linejoin:round}
.rv-grid{columns:3 300px;column-gap:16px}
.rv-card{position:relative;display:inline-block;width:100%;margin:0 0 16px;padding:22px;border-radius:20px;background:var(--card);border:1px solid var(--line);break-inside:avoid;overflow:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .25s}
.rv-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--g));opacity:.85}
.rv-top{display:flex;justify-content:space-between;align-items:flex-start}
.rv-q{font:800 56px/.7 Georgia,serif;height:26px;background:linear-gradient(135deg,var(--g));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;opacity:.5}
.rv-card blockquote{margin:12px 0 18px;font-size:15px;line-height:1.65;color:var(--ink)}
.rv-card figcaption{display:flex;align-items:center;gap:12px}
.rv-av{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;font-size:14px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--g));box-shadow:0 8px 16px -8px rgba(0,0,0,.35)}
.rv-card figcaption b{display:block;font-size:14px;line-height:1.3}
.rv-card figcaption small{font-size:12px;color:var(--mut)}
.rv-ok{margin-left:auto;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:color-mix(in srgb,var(--acc) 16%,transparent)}
.rv-ok svg{width:13px;height:13px;fill:none;stroke:var(--acc);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.rv-tool{display:inline-block;margin-top:16px;padding:5px 11px;border-radius:999px;font-size:12px;font-weight:600;color:var(--mut);background:var(--bg);border:1px solid var(--line);transition:color .2s,border-color .2s,background .2s}
@media(hover:hover){
.rv-card:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--pri) 35%,var(--line));box-shadow:0 22px 40px -26px color-mix(in srgb,var(--pri) 60%,transparent)}
.rv-tool:hover{color:var(--pri);border-color:var(--pri);background:var(--soft)}}
@media(prefers-reduced-motion:no-preference){
.rv-js .rv-card{opacity:0;transform:translateY(22px)}
.rv-js .rv-card.in{opacity:1;transform:none;transition:opacity .6s ease calc(var(--i)%3*.08s),transform .6s cubic-bezier(.2,.8,.2,1) calc(var(--i)%3*.08s),box-shadow .3s,border-color .25s}}
@media(max-width:640px){.rv-sec{margin-top:42px}.rv-card{padding:18px}.rv-sum{width:100%}}
@media print{.rv-card{box-shadow:none}}


/* ===== View counter: pojok kanan card, sejajar nama tool ===== */
.tile .tb{flex:1;min-width:0}
.tile .th{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.tile .th .tt{min-width:0;line-height:22px}
.vw{flex:none;display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px 0 7px;border-radius:999px;font-size:12px;line-height:1;color:var(--mut);background:color-mix(in srgb,var(--tc,var(--pri)) 10%,var(--card));border:1px solid color-mix(in srgb,var(--tc,var(--pri)) 22%,var(--line));font-variant-numeric:tabular-nums;transition:background .25s,color .25s,border-color .25s}
.vw svg{width:14px;height:14px;fill:none;stroke:var(--tc,var(--pri));stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s,transform .35s cubic-bezier(.3,1.6,.5,1)}
.vw .vw-p{fill:var(--tc,var(--pri));stroke:none;transition:fill .25s}
.vw b{font-weight:700;color:var(--ink);transition:color .25s}
.vw .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(hover:hover){.tile:hover .vw{background:var(--tc,var(--pri));border-color:transparent}.tile:hover .vw svg{stroke:#fff;transform:scale(1.12)}.tile:hover .vw .vw-p{fill:#fff}.tile:hover .vw b{color:#fff}}
@media(prefers-reduced-motion:reduce){.vw,.vw svg,.vw .vw-p,.vw b{transition:none}}


/* ===== Why people use: kartu fitur modern ===== */
.wy-sec{margin:56px 0 12px}
.wy-sec h2{margin:10px 0 0;font-size:clamp(24px,3.2vw,32px);letter-spacing:-.6px;justify-content:flex-start}
.wy-eyebrow{display:inline-block;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.3px;color:var(--pri);background:var(--soft)}
.wy{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);margin-top:24px}
.wy-card{position:relative;overflow:hidden;isolation:isolate;padding:24px 22px 22px;border-radius:18px;background:linear-gradient(160deg,color-mix(in srgb,var(--wc) 7%,var(--card)),var(--card) 60%);border:1px solid color-mix(in srgb,var(--wc) 14%,var(--line));transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .25s}
.wy-card::before{content:"";position:absolute;z-index:-1;right:-46px;top:-46px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--wc) 22%,transparent),transparent 70%);opacity:.7;transition:transform .5s ease,opacity .3s}
.wy-card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--wc),color-mix(in srgb,var(--wc) 40%,#ec4899));transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.wy-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;color:#fff;background:linear-gradient(135deg,var(--wc),color-mix(in srgb,var(--wc) 62%,#000));box-shadow:0 10px 20px -10px var(--wc);transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.wy-ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wy-card h3{margin:18px 0 6px;font-size:17px;letter-spacing:-.2px}
.wy-card p{margin:0;font-size:14.5px;line-height:1.55;color:var(--mut)}
@media(hover:hover){.wy-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--wc) 45%,var(--line));box-shadow:0 18px 34px -20px color-mix(in srgb,var(--wc) 70%,transparent)}.wy-card:hover::after{transform:scaleX(1)}.wy-card:hover::before{transform:scale(1.25);opacity:1}.wy-card:hover .wy-ic{transform:rotate(-8deg) scale(1.08)}}
@media(max-width:900px){.wy{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.wy{grid-template-columns:1fr;gap:12px}.wy-card{padding:20px 18px;display:grid;grid-template-columns:48px 1fr;column-gap:16px;align-items:start}.wy-ic{grid-row:span 2}.wy-card h3{margin:2px 0 4px}}
@media(prefers-reduced-motion:reduce){.wy-card,.wy-card::before,.wy-card::after,.wy-ic{transition:none}.wy-card:hover{transform:none}}


/* ===== About: kartu modern ===== */
.ab-sec{margin:56px 0 12px}
.ab-sec h2{margin:10px 0 0;font-size:clamp(24px,3.2vw,32px);letter-spacing:-.6px;justify-content:flex-start}
.ab-eyebrow{display:inline-block;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.3px;color:var(--pri);background:var(--soft)}
.ab-grid{display:grid;gap:16px;grid-template-columns:1.1fr 1fr;margin-top:24px}
.ab-card{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;padding:28px;border-radius:22px;border:1px solid var(--line);background:var(--card);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .25s}
.ab-card::before{content:"";position:absolute;z-index:-1;right:-70px;top:-70px;width:220px;height:220px;border-radius:50%;opacity:.8;transition:transform .5s ease}
.ab-main{background:linear-gradient(160deg,color-mix(in srgb,var(--pri) 8%,var(--card)),var(--card) 65%);border-color:color-mix(in srgb,var(--pri) 18%,var(--line))}
.ab-main::before{background:radial-gradient(circle,color-mix(in srgb,var(--pri) 22%,transparent),transparent 70%)}
.ab-acc{background:linear-gradient(160deg,color-mix(in srgb,var(--acc) 8%,var(--card)),var(--card) 65%);border-color:color-mix(in srgb,var(--acc) 20%,var(--line))}
.ab-acc::before{background:radial-gradient(circle,color-mix(in srgb,var(--acc) 22%,transparent),transparent 70%)}
.ab-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;color:#fff;margin-bottom:18px;transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.ab-main .ab-ic{background:linear-gradient(135deg,var(--pri),var(--pri2));box-shadow:0 12px 22px -12px var(--pri)}
.ab-acc .ab-ic{background:linear-gradient(135deg,var(--acc),color-mix(in srgb,var(--acc) 62%,#000));box-shadow:0 12px 22px -12px var(--acc)}
.ab-ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ab-card h3{margin:0 0 10px;font-size:20px;letter-spacing:-.3px}
.ab-card p{margin:0 0 12px;font-size:14.5px;line-height:1.65;color:var(--mut)}
.ab-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:8px 0 20px}
.ab-stats div{padding:12px 10px;border-radius:14px;text-align:center;background:color-mix(in srgb,var(--pri) 7%,var(--card));border:1px solid color-mix(in srgb,var(--pri) 14%,var(--line))}
.ab-stats b{display:block;font-size:22px;letter-spacing:-.5px;color:var(--pri);font-variant-numeric:tabular-nums}
.ab-stats span{font-size:12px;font-weight:600;color:var(--mut)}
.ab-list{list-style:none;margin:2px 0 14px;padding:0;display:grid;gap:9px}
.ab-list li{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:600;color:var(--ink)}
.ab-list li span{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:color-mix(in srgb,var(--acc) 16%,var(--card));color:var(--acc)}
.ab-list svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ab-link{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;font-size:14px;font-weight:700;color:var(--pri);background:var(--soft);transition:background .2s,color .2s}
.ab-link svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.ab-acc .ab-link{color:var(--acc);background:color-mix(in srgb,var(--acc) 12%,var(--card))}
@media(hover:hover){.ab-card:hover{transform:translateY(-4px);box-shadow:0 20px 38px -22px rgba(15,27,51,.35)}.ab-card:hover::before{transform:scale(1.2)}.ab-card:hover .ab-ic{transform:rotate(-8deg) scale(1.08)}.ab-link:hover{background:var(--pri);color:#fff}.ab-acc .ab-link:hover{background:var(--acc);color:#fff}.ab-link:hover svg{transform:translateX(3px)}}
@media(max-width:820px){.ab-grid{grid-template-columns:1fr}}
@media(max-width:560px){.ab-card{padding:22px 18px;border-radius:18px}.ab-stats b{font-size:19px}}
@media(prefers-reduced-motion:reduce){.ab-card,.ab-card::before,.ab-ic,.ab-link svg{transition:none}.ab-card:hover{transform:none}}

/* ===== Footer modern v2 ===== */
footer.ft{margin-top:72px;padding:0 0 calc(20px + env(safe-area-inset-bottom,0px));background:none;border:0;font-size:14px;color:#9aa6bd}
.ft-card{--fi:#f1f4fb;--fm:#b9c4dc;--fl:rgba(255,255,255,.14);position:relative;overflow:hidden;isolation:isolate;border-radius:28px;padding:44px 44px 24px;color:var(--fm);background:linear-gradient(160deg,#243a85 0%,#1a2b63 50%,#1d3270 100%);border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 60px -30px rgba(30,50,130,.55)}
.ft-orb{position:absolute;z-index:-1;border-radius:50%;filter:blur(70px);opacity:.6;pointer-events:none}
.ft-orb.o1{width:340px;height:340px;top:-130px;left:-90px;background:#4d6bff}
.ft-orb.o2{width:300px;height:300px;right:-80px;top:30%;background:#14b885;opacity:.34}
.ft-grid{position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(var(--fl) 1px,transparent 1px),linear-gradient(90deg,var(--fl) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse at 20% 0,#000,transparent 70%);mask-image:radial-gradient(ellipse at 20% 0,#000,transparent 70%);opacity:.7}
.ft-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-bottom:34px;margin-bottom:34px;border-bottom:1px solid var(--fl)}
.ft-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:5px 12px;border-radius:99px;background:rgba(255,255,255,.12);border:1px solid var(--fl);color:#d3dcff}
.ft-eyebrow i{width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 0 4px rgba(52,211,153,.2)}
.ft-cta .ft-title{display:block;font-weight:800;margin:14px 0 6px;font-size:clamp(24px,3.4vw,34px);line-height:1.15;letter-spacing:-.8px;color:#fff;max-width:20ch}
.ft-cta p{margin:0;max-width:none;color:var(--fm)}
.ft-sf{display:flex;align-items:center;gap:6px;flex:1;min-width:280px;max-width:460px;padding:6px;border-radius:16px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);backdrop-filter:blur(8px);transition:border-color .2s,box-shadow .2s}
.ft-sf:focus-within{border-color:#6c8cff;box-shadow:0 0 0 4px rgba(108,140,255,.2)}
.ft-sf svg{width:20px;height:20px;margin-left:10px;flex:none;fill:none;stroke:#c3cde4;stroke-width:2;stroke-linecap:round}
.ft-sf input{flex:1;min-width:0;height:42px;border:0;background:none;color:#fff;padding:0 6px;outline:0}
.ft-sf input::placeholder{color:#a9b5d0}
.ft-sf button{height:42px;padding:0 20px;border:0;border-radius:11px;font-weight:700;cursor:pointer;color:#fff;background:linear-gradient(135deg,#4d6bff,#2447e0);transition:transform .15s,filter .15s}
.ft-sf button:hover{transform:translateY(-1px);filter:brightness(1.1)}
.ft-main{display:grid;gap:32px;grid-template-columns:1.5fr 1fr 1fr 1fr}
.ft-brand .logo{font-size:24px;color:#fff}.ft-brand .logo b{color:#a9bcff}
.ft-brand p{margin:12px 0 18px;max-width:36ch;line-height:1.65;color:var(--fm)}
.ft-stats{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.ft-stats li{padding:10px 16px;border-radius:14px;background:rgba(255,255,255,.1);border:1px solid var(--fl);min-width:88px}
.ft-stats b{display:block;font-size:22px;line-height:1.1;color:#fff;letter-spacing:-.5px}.ft-stats span{font-size:12px;color:var(--fm)}
.ft-col .ft-ch{display:block;font-weight:700;margin:0 0 14px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#fff}
.ft-col .ft-ch.ft-h2{margin-top:24px}
.ft-col a{display:flex;align-items:center;gap:9px;padding:6px 0;color:var(--fm);transition:color .15s,transform .15s}
.ft-col a:hover{color:#fff;transform:translateX(4px)}
.ft-col em{margin-left:auto;font-style:normal;font-size:11px;padding:1px 8px;border-radius:99px;background:rgba(255,255,255,.14);color:#dbe3f5}
.ft-dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--d);box-shadow:0 0 10px var(--d)}
.ft-col .ft-more{margin-top:8px;font-weight:700;color:#b4c4ff}.ft-col .ft-more span{transition:transform .15s}.ft-col .ft-more:hover span{transform:translateX(3px)}
.ft-trust{list-style:none;margin:34px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ft-trust li{font-size:12px;font-weight:600;padding:6px 12px;border-radius:99px;border:1px solid var(--fl);background:rgba(255,255,255,.09);color:#e1e8f8}
.ft-note{margin:14px 0 0;max-width:none;font-size:12.5px;line-height:1.6;color:#aab6d2}
.ft-bot{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:22px;padding-top:18px;border-top:1px solid var(--fl);position:relative;z-index:1}
.ft-bot .cr{border:0;padding:0;width:auto}
.ft-act{display:flex;gap:8px}
.ft-btn{padding:8px 14px;border:1px solid rgba(255,255,255,.24);border-radius:10px;background:rgba(255,255,255,.1);font-weight:600;font-size:13px;color:#e1e8f8;cursor:pointer;transition:all .15s}
.ft-btn:hover{background:rgba(255,255,255,.2);color:#fff;border-color:rgba(255,255,255,.3)}
.ft-word{margin:6px -10px -.28em;text-align:center;white-space:nowrap;overflow:hidden;font-weight:800;letter-spacing:-.05em;line-height:1;font-size:clamp(48px,13vw,170px);color:transparent;background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 85%);-webkit-background-clip:text;background-clip:text;user-select:none;pointer-events:none}
@media(max-width:900px){.ft-main{grid-template-columns:1fr 1fr}.ft-brand{grid-column:1/-1}.ft-card{padding:34px 28px 20px}}
@media(max-width:520px){.ft-card{border-radius:22px;padding:28px 18px 16px}.ft-main{gap:26px 14px}.ft-sf{min-width:0;width:100%;max-width:none}.ft-bot{flex-direction:column;align-items:flex-start}}
html{scroll-behavior:smooth}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ft-col a:hover{transform:none}}
.ft nav.ft-col{display:block;gap:0;padding:0}
.ft nav.ft-col a{padding:6px 0;border-radius:0;background:none;font-size:14px;font-weight:500}
.ft nav.ft-col a:hover{background:none}
.ft .logo{transform:none}.ft .logo b::after{display:none}
.ft-word{font-size:clamp(40px,8.5vw,118px)}

/* ─── Homepage FAQ (modern) ─── */
.faq-sec{margin:64px 0 12px}
.faq-wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.35fr);gap:32px 48px;align-items:start}
.faq-aside{position:sticky;top:calc(84px + env(safe-area-inset-top,0px))}
.faq-aside h2{margin:10px 0 12px;font-size:clamp(26px,3.4vw,36px);line-height:1.15;letter-spacing:-.8px}
.faq-aside>p{margin:0 0 22px;font-size:15px;line-height:1.65;color:var(--mut);max-width:42ch}
.faq-help{display:grid;grid-template-columns:auto 1fr;gap:12px 14px;align-items:center;padding:18px;border-radius:20px;border:1px solid color-mix(in srgb,var(--pri) 18%,var(--line));background:linear-gradient(160deg,color-mix(in srgb,var(--pri) 8%,var(--card)),var(--card) 70%)}
.faq-help-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;color:#fff;background:linear-gradient(135deg,var(--pri),var(--pri2));box-shadow:0 10px 20px -12px var(--pri)}
.faq-help-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.faq-help b{display:block;font-size:15px}
.faq-help div span{font-size:13px;color:var(--mut)}
.faq-help .ab-link{grid-column:1/-1;margin-top:0;align-self:stretch;justify-content:center}
.faq-list{display:grid;gap:12px}
.faq-item{position:relative;border:1px solid var(--line);border-radius:18px;padding:0;margin:0;background:var(--card);overflow:hidden;transition:border-color .25s,background .25s,box-shadow .3s}
.faq-item::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,var(--pri),var(--acc));transform:scaleY(0);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.faq-item summary{list-style:none;display:flex;align-items:center;gap:14px;padding:18px 18px 18px 20px;cursor:pointer;font-weight:700;font-size:16px;line-height:1.4;color:var(--ink);-webkit-tap-highlight-color:transparent}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:focus-visible{outline:3px solid var(--pri);outline-offset:-3px;border-radius:18px}
.faq-num{flex:none;font-size:12px;font-weight:800;letter-spacing:.5px;font-variant-numeric:tabular-nums;color:var(--pri);padding:4px 9px;border-radius:999px;background:var(--soft)}
.faq-q{flex:1;min-width:0}
.faq-tg{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;color:var(--mut);background:var(--soft);transition:transform .35s cubic-bezier(.3,1.4,.5,1),background .25s,color .25s}
.faq-tg svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.faq-a{padding:0 20px 20px 20px}
.faq-a p{margin:0;padding-left:calc(14px + 40px);font-size:15px;line-height:1.7;color:var(--mut);max-width:70ch}
.faq-item[open]{border-color:color-mix(in srgb,var(--pri) 32%,var(--line));background:linear-gradient(160deg,color-mix(in srgb,var(--pri) 5%,var(--card)),var(--card) 70%);box-shadow:0 18px 34px -26px rgba(15,27,51,.4)}
.faq-item[open]::before{transform:scaleY(1)}
.faq-item[open] .faq-tg{transform:rotate(135deg);color:#fff;background:var(--pri)}
@media(hover:hover){.faq-item:not([open]):hover{border-color:color-mix(in srgb,var(--pri) 28%,var(--line));transform:translateY(-1px)}.faq-item:not([open]):hover .faq-tg{color:var(--pri)}}
@media(prefers-reduced-motion:no-preference){
  .faq-item{transition:border-color .25s,background .25s,box-shadow .3s,transform .2s}
  @supports (interpolate-size:allow-keywords){
    .faq-item{interpolate-size:allow-keywords}
    .faq-item::details-content{block-size:0;overflow:hidden;opacity:0;transition:block-size .35s cubic-bezier(.2,.8,.2,1),opacity .3s,content-visibility .35s allow-discrete}
    .faq-item[open]::details-content{block-size:auto;opacity:1}
  }
  .faq-item[open] .faq-a p{animation:faq-in .35s ease both}
  @keyframes faq-in{from{opacity:0;transform:translateY(-4px)}}
}
@media(max-width:860px){
  .faq-wrap{grid-template-columns:1fr;gap:24px}
  .faq-aside{position:static}
  .faq-aside>p{max-width:none}
}
@media(max-width:560px){
  .faq-sec{margin-top:48px}
  .faq-item{border-radius:16px}
  .faq-item summary{gap:10px;padding:16px 14px 16px 16px;font-size:15px}
  .faq-num{display:none}
  .faq-a{padding:0 16px 18px}
  .faq-a p{padding-left:0;font-size:14.5px}
  .faq-tg{width:30px;height:30px}
}

/* ─── Homepage Disclaimer (modern) ─── */
.ds-sec{margin:56px 0 0}
.ds-card{--w:#d97706;position:relative;overflow:hidden;isolation:isolate;padding:30px;border-radius:24px;border:1px solid color-mix(in srgb,var(--w) 24%,var(--line));background:linear-gradient(160deg,color-mix(in srgb,var(--w) 7%,var(--card)),var(--card) 60%)}
.ds-card::before{content:"";position:absolute;z-index:-1;right:-90px;top:-90px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--w) 20%,transparent),transparent 70%)}
.ds-head{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.ds-ic{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:16px;color:#fff;background:linear-gradient(135deg,var(--w),color-mix(in srgb,var(--w) 60%,#7c2d12));box-shadow:0 12px 22px -12px var(--w)}
.ds-ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ds-eyebrow{color:var(--w);background:color-mix(in srgb,var(--w) 13%,var(--card));margin-bottom:6px}
.ds-head h3{margin:0;font-size:clamp(20px,2.6vw,25px);letter-spacing:-.4px;line-height:1.2}
.ds-lead{margin:0 0 20px;font-size:15.5px;line-height:1.65;color:var(--ink);max-width:70ch}
.ds-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ds-note{padding:16px;border-radius:16px;border:1px solid var(--line);background:var(--card);transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .2s,box-shadow .25s}
.ds-note span{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;margin-bottom:10px;color:var(--w);background:color-mix(in srgb,var(--w) 13%,var(--card))}
.ds-note svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ds-note b{display:block;font-size:14.5px;margin-bottom:4px}
.ds-note p{margin:0;font-size:13.5px;line-height:1.55;color:var(--mut)}
.ds-legal{margin:20px 0 0;font-size:14px;line-height:1.6;color:var(--mut)}
.ds-legal a{color:var(--pri);font-weight:700;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--pri) 35%,transparent);text-underline-offset:3px}
.ds-legal a:hover{text-decoration-color:var(--pri)}
.ds-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;padding-top:18px;border-top:1px dashed color-mix(in srgb,var(--w) 28%,var(--line))}
.ds-links a{display:inline-flex;align-items:center;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-size:13px;font-weight:700;color:var(--ink);transition:background .2s,color .2s,border-color .2s}
.ds-links a:focus-visible,.ds-legal a:focus-visible{outline:3px solid var(--pri);outline-offset:2px}
@media(hover:hover){.ds-note:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--w) 35%,var(--line));box-shadow:0 16px 28px -22px rgba(15,27,51,.4)}.ds-links a:hover{background:var(--pri);border-color:var(--pri);color:#fff}}
@media(max-width:760px){.ds-grid{grid-template-columns:1fr}.ds-note{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center}.ds-note span{grid-row:1/3;margin:0}.ds-note b{margin:0}}
@media(max-width:560px){.ds-card{padding:22px 18px;border-radius:20px}.ds-head{gap:12px}.ds-ic{width:46px;height:46px;border-radius:14px}.ds-links a{flex:1 1 auto;justify-content:center}}
@media(prefers-reduced-motion:reduce){.ds-note,.ds-links a{transition:none}.ds-note:hover{transform:none}}

/* ─── Breadcrumb (modern) ─── */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
.crumb a{padding:3px 8px;margin:0 -2px;border-radius:8px;font-weight:600;transition:background .15s,color .15s}
.crumb a:hover{background:var(--soft);color:var(--pri)}
.crumb-sep{display:inline-grid;place-items:center;opacity:.6}
.crumb-sep svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.crumb-cur{font-weight:700;color:var(--ink);padding:3px 4px}

/* ─── Legal & company pages (modern) ─── */
.lg-hero{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;gap:20px;margin:12px 0 24px;padding:30px;border-radius:24px;border:1px solid color-mix(in srgb,var(--pri) 18%,var(--line));background:linear-gradient(160deg,color-mix(in srgb,var(--pri) 8%,var(--card)),var(--card) 65%)}
.lg-hero::before{content:"";position:absolute;z-index:-1;right:-80px;top:-90px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--pri) 22%,transparent),transparent 70%)}
.lg-hic{flex:none;display:grid;place-items:center;width:64px;height:64px;border-radius:20px;color:#fff;background:linear-gradient(135deg,var(--pri),var(--pri2));box-shadow:0 14px 26px -14px var(--pri)}
.lg-hic svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lg-ht .ab-eyebrow{margin-bottom:8px}
.lg-hero h1{margin:0 0 6px;font-size:clamp(26px,4vw,38px);line-height:1.15;letter-spacing:-.9px}
.lg-hero p{margin:0;max-width:62ch;font-size:16px;line-height:1.6;color:var(--mut)}
.lg-upd{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:5px 12px;border-radius:999px;font-size:12.5px;font-weight:700;color:var(--mut);background:var(--card);border:1px solid var(--line)}
.lg-upd svg{width:14px;height:14px;fill:none;stroke:var(--acc);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.lg-wrap{display:grid;grid-template-columns:250px minmax(0,1fr);gap:28px;align-items:start}
.lg-side{position:sticky;top:calc(84px + env(safe-area-inset-top,0px));display:grid;gap:16px}
.lg-nav,.lg-toc{padding:14px;border-radius:20px;border:1px solid var(--line);background:var(--card)}
.lg-nav{display:block}
.lg-grp{display:grid;gap:2px}
.lg-grp+.lg-grp{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.lg-gl{display:block;margin:2px 8px 8px;font-size:11px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--mut)}
.lg-nav a{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;padding:10px 12px;border-radius:12px;font-size:14px;font-weight:600;color:var(--ink);transition:background .2s,color .2s}
.lg-nav a svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;color:var(--mut);transition:color .2s}
.lg-nav a[aria-current="page"]{color:var(--pri);background:var(--soft)}
.lg-nav a[aria-current="page"] svg{color:var(--pri)}
.lg-toc a{display:block;padding:7px 10px;margin-left:2px;border-left:2px solid var(--line);border-radius:0 8px 8px 0;font-size:13.5px;line-height:1.4;color:var(--mut);transition:color .2s,border-color .2s,background .2s}
.lg-toc a.on{color:var(--pri);font-weight:700;border-left-color:var(--pri);background:var(--soft)}
.lg-body{padding:34px 38px;border-radius:24px;border:1px solid var(--line);background:var(--card)}
.lg-body p,.lg-body li{font-size:15.5px;line-height:1.75;color:var(--mut)}
.lg-body p{margin:0 0 14px}
.lg-body .lg-lead{font-size:17.5px;line-height:1.7;color:var(--ink);padding-bottom:18px;margin-bottom:6px;border-bottom:1px dashed var(--line)}
.lg-body h2{display:flex;align-items:center;gap:12px;margin:30px 0 12px;font-size:21px;letter-spacing:-.4px;line-height:1.3;scroll-margin-top:calc(90px + env(safe-area-inset-top,0px))}
.lg-n{flex:none;display:inline-grid;place-items:center;min-width:34px;height:28px;padding:0 8px;border-radius:9px;font-size:12px;font-weight:800;letter-spacing:.4px;font-variant-numeric:tabular-nums;color:var(--pri);background:var(--soft)}
.lg-body a{color:var(--pri);font-weight:600;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--pri) 35%,transparent);text-underline-offset:3px;transition:text-decoration-color .2s}
.lg-body a:hover{text-decoration-color:var(--pri)}
.lg-body ul{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:10px}
.lg-body li{position:relative;padding:12px 14px 12px 42px;border-radius:14px;border:1px solid var(--line);background:var(--bg)}
.lg-body li::before{content:"";position:absolute;left:15px;top:50%;width:12px;height:7px;margin-top:-6px;border-left:2.5px solid var(--acc);border-bottom:2.5px solid var(--acc);transform:rotate(-45deg)}
.lg-body a[href^="mailto:"]{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;text-decoration:none;font-weight:700;color:var(--pri);background:var(--soft);border:1px solid color-mix(in srgb,var(--pri) 20%,var(--line));transition:background .2s,color .2s}
.lg-pager{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.lg-pg{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:18px;border:1px solid var(--line);background:var(--card);transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .2s,box-shadow .25s}
.lg-pg svg{flex:none;width:20px;height:20px;fill:none;stroke:var(--pri);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.lg-pg small{display:block;font-size:11px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--mut)}
.lg-pg b{display:block;font-size:15px;color:var(--ink)}
.lg-next{grid-column:2;justify-content:space-between;text-align:right}
@media(hover:hover){.lg-nav a:not([aria-current]):hover{background:var(--soft);color:var(--pri)}.lg-nav a:not([aria-current]):hover svg{color:var(--pri)}.lg-toc a:hover{color:var(--pri)}.lg-body a[href^="mailto:"]:hover{background:var(--pri);color:#fff}.lg-pg:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--pri) 35%,var(--line));box-shadow:0 16px 28px -22px rgba(15,27,51,.4)}.lg-prev:hover svg{transform:translateX(-4px)}.lg-next:hover svg{transform:translateX(4px)}}
.lg-nav a:focus-visible,.lg-toc a:focus-visible,.lg-pg:focus-visible,.lg-body a:focus-visible{outline:3px solid var(--pri);outline-offset:2px}
@media(max-width:900px){
  .lg-wrap{grid-template-columns:1fr;gap:18px}
  .lg-side{position:static}
  .lg-toc{display:none}
  .lg-nav{display:flex;gap:8px;overflow-x:auto;padding:8px;border-radius:999px;scrollbar-width:none}
  .lg-nav::-webkit-scrollbar{display:none}
  .lg-grp{display:contents}.lg-grp+.lg-grp{margin:0;padding:0;border:0}
  .lg-gl{display:none}
  .lg-nav a{flex:none;width:auto;white-space:nowrap;border-radius:999px;padding:8px 14px}
}
@media(max-width:560px){
  .lg-hero{flex-direction:column;align-items:flex-start;gap:16px;padding:22px 18px;border-radius:20px}
  .lg-hic{width:54px;height:54px;border-radius:17px}
  .lg-body{padding:24px 18px;border-radius:20px}
  .lg-body .lg-lead{font-size:16.5px}
  .lg-body h2{font-size:19px}
  .lg-pager{grid-template-columns:1fr}.lg-next{grid-column:auto}
}
@media(prefers-reduced-motion:reduce){.lg-pg,.lg-pg svg,.lg-nav a,.lg-toc a{transition:none}.lg-pg:hover{transform:none}}
@media print{.lg-side,.lg-pager,.lg-hic{display:none}.lg-wrap{display:block}.lg-hero,.lg-body{border:0;background:none;padding:0}.lg-hero::before{display:none}}

/* ===== Contact page ===== */
.ct-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:start;margin:8px 0 28px}
.ct-info h2,.ct-card h2{margin:0 0 12px;font-size:21px;letter-spacing:-.4px;line-height:1.3;display:block}
.ct-lead{margin:0 0 24px;max-width:44ch;font-size:15.5px;line-height:1.7;color:var(--mut)}
.ct-list{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:18px}
.ct-list li{display:flex;align-items:center;gap:14px}
.ct-ic{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:var(--soft);color:var(--pri)}
.ct-ic svg,.ct-note svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ct-list strong{display:block;font-size:14.5px;line-height:1.3}
.ct-list span{display:block;font-size:13.5px;color:var(--mut)}
.ct-list a{color:var(--pri);font-weight:600;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--pri) 35%,transparent);text-underline-offset:3px}
.ct-tips{padding:20px 22px;border-radius:20px;border:1px solid var(--line);background:var(--card)}
.ct-tips h3{margin:0 0 10px;font-size:15px}
.ct-tips ul{margin:0 0 12px;padding-left:18px;display:grid;gap:6px}
.ct-tips li,.ct-tips p{font-size:13.5px;line-height:1.6;color:var(--mut)}
.ct-tips p{margin:0}
.ct-tips a{color:var(--pri);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.ct-card{padding:28px;border-radius:24px;border:1px solid var(--line);background:var(--card)}
.ct-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ct-f{margin-bottom:18px;min-width:0}
.ct-f label{display:block;margin-bottom:7px;font-size:13px;font-weight:700;color:var(--ink)}
.ct-f input,.ct-f select,.ct-f textarea{display:block;width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:14px;background:var(--bg);color:var(--ink);font:inherit;font-size:15px;padding:0 16px;height:48px;outline:0;transition:border-color .2s,box-shadow .2s}
.ct-f textarea{height:auto;min-height:150px;padding:13px 16px;line-height:1.55;resize:vertical}
.ct-f select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%235b6679' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 18px center}
.ct-f select option{color:#000}
.ct-f ::placeholder{color:color-mix(in srgb,var(--mut) 70%,transparent)}
.ct-f input:focus,.ct-f select:focus,.ct-f textarea:focus{border-color:var(--pri);box-shadow:0 0 0 3px var(--soft)}
.ct-f [aria-invalid="true"]{border-color:#d9363e}
.ct-err{display:block;margin-top:6px;font-size:13px;font-weight:600;color:#d9363e}
.ct-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ct-act{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:6px}
.ct-btn{height:46px;padding:0 28px;border:0;border-radius:999px;background:var(--pri);color:#fff;font:inherit;font-size:14.5px;font-weight:700;cursor:pointer;box-shadow:0 12px 22px -12px var(--pri);transition:background .2s,transform .2s}
.ct-btn:hover{background:var(--pri2)}
.ct-btn:active{transform:translateY(1px)}
.ct-btn:focus-visible{outline:3px solid var(--pri);outline-offset:3px}
.ct-fine{flex:1;min-width:200px;font-size:12.5px;line-height:1.5;color:var(--mut)}
.ct-fine a{color:var(--pri);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.ct-note{display:flex;gap:12px;align-items:flex-start;margin:0 0 20px;padding:14px 16px;border-radius:16px;border:1px solid}
.ct-note svg{flex:none;margin-top:2px}
.ct-note strong{display:block;font-size:14.5px;color:var(--ink)}
.ct-note span{display:block;font-size:13.5px;line-height:1.55;color:var(--mut)}
.ct-note a{color:var(--pri);font-weight:600;text-decoration:underline}
.ct-note.ok{border-color:color-mix(in srgb,var(--acc) 35%,var(--line));background:color-mix(in srgb,var(--acc) 9%,var(--card));color:var(--acc)}
.ct-note.bad{border-color:color-mix(in srgb,#d9363e 35%,var(--line));background:color-mix(in srgb,#d9363e 8%,var(--card));color:#d9363e}
@media(max-width:900px){.ct-grid{grid-template-columns:1fr;gap:28px}}
@media(max-width:560px){.ct-row{grid-template-columns:1fr;gap:0}.ct-card{padding:22px 18px;border-radius:20px}.ct-btn{width:100%}}
@media(prefers-reduced-motion:reduce){.ct-btn,.ct-f input,.ct-f select,.ct-f textarea{transition:none}}
@media print{.ct-card{display:none}}

/* ===== Legal pages: tables, code, strong ===== */
.lg-body table{width:100%;border-collapse:separate;border-spacing:0;margin:4px 0 16px;font-size:14px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.lg-body th,.lg-body td{padding:11px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);line-height:1.5;color:var(--mut)}
.lg-body th{background:var(--soft);color:var(--ink);font-size:12.5px;font-weight:800}
.lg-body tbody tr:last-child td{border-bottom:0}
.lg-body td:first-child{color:var(--ink);font-weight:600}
.lg-body code{padding:1px 6px;border-radius:6px;background:var(--soft);color:var(--ink);font-size:.88em}
.lg-body strong{color:var(--ink)}
.lg-body li strong{font-weight:700}
@media(max-width:680px){.lg-body table{display:block;overflow-x:auto;white-space:normal}.lg-body th,.lg-body td{min-width:130px}}

/* ===== SEO-FIX: tambahan (skip link, kartu kategori beranda, paginasi, konten kalkulator, share) ===== */
.skip{position:absolute;left:12px;top:-60px;z-index:1000;padding:10px 16px;border-radius:10px;background:var(--pri);color:#fff;font-weight:700;transition:top .15s}
.skip:focus{top:12px;color:#fff}
.home-cats{margin-top:8px}
.hc-lead{margin:-6px 0 18px;color:var(--mut)}
.catcards{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.catcard{--c:var(--pri);display:flex;gap:14px;align-items:flex-start;padding:16px;border-radius:14px;background:var(--card);border:1px solid var(--line);transition:transform .2s,border-color .2s,box-shadow .2s}
.catcard:hover,.catcard:focus-visible{transform:translateY(-3px);border-color:color-mix(in srgb,var(--c) 55%,var(--line));box-shadow:0 14px 24px -16px var(--c)}
.cc-ic{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:color-mix(in srgb,var(--c) 14%,var(--card));color:var(--c);font-weight:800;font-size:20px}
.cc-b{display:flex;flex-direction:column;gap:3px;min-width:0}
.cc-n{font-weight:700;font-size:16px;color:var(--ink)}
.cc-n em{font-style:normal;font-weight:600;font-size:12px;color:var(--c);margin-left:6px}
.cc-d{font-size:13px;color:var(--mut);line-height:1.45}
.cc-e{font-size:12px;color:var(--mut);opacity:.85}
.cat-about{margin:28px 0 8px;max-width:860px}
.cat-about h2{margin:0 0 10px;font-size:20px;display:block}
.cat-about p{color:var(--mut);margin:8px 0}
.cat-about a{color:var(--pri);font-weight:600}
.cat-rel{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.cat-rel span{font-weight:700;color:var(--ink)}
.pager{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;margin:28px 0 8px}
.pg-a,.pg-n{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 14px;border-radius:10px;border:1px solid var(--line);background:var(--card);font-weight:600;font-size:14px;color:var(--ink)}
a.pg-a:hover,a.pg-n:hover{border-color:var(--pri);color:var(--pri)}
.pg-n.cur{background:var(--pri);border-color:var(--pri);color:#fff}
.pg-a.off{opacity:.45}
.pg-gap{color:var(--mut)}
.io-h{margin:14px 0 6px;font-size:15px}
.io-list{margin:0;padding-left:20px;color:var(--mut)}
.io-list li{margin:4px 0}
.io-list b{color:var(--ink)}
.io-out{display:flex;flex-wrap:wrap;gap:6px 10px;padding:0;list-style:none}
.io-out li{margin:0;padding:3px 10px;border-radius:999px;background:var(--soft);border:1px solid var(--line);font-size:13px}
.ex-t{width:100%;border-collapse:collapse;margin:10px 0;font-size:15px}
.ex-t th,.ex-t td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left}
.ex-t th{font-weight:600;color:var(--mut);width:55%}
.ex-t td{font-weight:700}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.share{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px;font-size:13px;color:var(--mut)}
.share span{font-weight:700}
.shr{padding:5px 12px;border-radius:999px;border:1px solid var(--line);color:var(--ink);font-weight:600;font-size:13px}
.shr:hover{border-color:var(--tc,var(--pri));color:var(--tc,var(--pri))}
.rel-txt{display:block;padding:7px 0;font-size:14px;color:var(--mut);border-bottom:1px solid var(--line)}
.rel-txt:last-child{border:0}.rel-txt:hover{color:var(--pri)}
@media print{.skip,.share,.pager{display:none}}