:root{--bg:#f4f8ff;--pri:#1f62f2;--pri2:#e6effd;--tx:#0c1b3a;--hd:#0b1a40;--mut:#56668a;--bd:#d9e5fb;--sf:#fff;--good:#13a05b;--warn:#e08a00;--bad:#d93a3a;--navy:#0b2a6f}
html[data-theme=dark]{--bg:#0a1330;--pri2:#16295a;--tx:#e9efff;--hd:#fff;--mut:#9db0d8;--bd:#233463;--sf:#111c3d;--navy:#06143a}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:'Plus Jakarta Sans',system-ui,Segoe UI,Arial,sans-serif;color:var(--tx);background:var(--bg);line-height:1.5}
a{color:var(--pri);text-decoration:none}.wrap{max-width:1180px;margin:auto;padding:0 20px}[hidden]{display:none!important}
.card{background:var(--sf);border:1px solid var(--bd);border-radius:18px;padding:22px;box-shadow:0 8px 28px rgba(31,107,255,.07)}
.btn{background:var(--pri);color:#fff;border:0;padding:12px 22px;border-radius:12px;font:700 15px inherit;font-family:inherit;cursor:pointer;white-space:nowrap}.btn:hover{filter:brightness(.92)}.btn:disabled{opacity:.6}
.btn.sm{padding:6px 12px;font-size:13px}.btn.red{background:var(--bad)}
.badge{display:inline-block;padding:5px 12px;border-radius:99px;font-size:13px;font-weight:700;margin-bottom:10px}
.good{background:#e3f6ec;color:var(--good)}.warn{background:#fff3dc;color:var(--warn)}.bad{background:#fde7e7;color:var(--bad)}
.logo{display:flex;align-items:center;gap:8px;font-size:26px;font-weight:800;color:var(--pri);letter-spacing:-.5px}.logo i{font-style:normal;color:var(--navy)}.logo.w,.logo.w i{color:#fff}.lg{font-size:30px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ===== halaman publik ===== */
body.pub{background:linear-gradient(180deg,#fff 0,#fff 640px,#f3f7ff 1100px,#eff4ff 100%);background-color:#eff4ff}
html[data-theme=dark] body.pub{background:var(--bg)}
.pub .wrap{max-width:1260px;padding-left:24px;padding-right:24px}.pub .wrap.wide{max-width:1300px}
.pub svg{display:block}
/* header */
.top{background:var(--sf);position:sticky;top:0;z-index:30;box-shadow:0 2px 16px rgba(31,98,242,.07)}
.nav{display:grid;grid-template-columns:auto 1fr auto;align-items:center;height:72px;gap:20px}
.brand{display:flex;align-items:center;gap:10px;font-size:clamp(26px,2.3vw,33px);white-space:nowrap;font-weight:800;color:#0b2a6f;letter-spacing:-.8px;line-height:1}
.brand i{font-style:normal;color:#1f62f2}.brand .gl{stroke:#2a6af0}.brand.w i{color:#5b9bff}.brand.w .gl{stroke:#7fb0ff}.brand svg{width:50px;height:50px;flex-shrink:0}.brand.w{color:#fff;font-size:28px}.brand.w svg{width:44px;height:44px}
html[data-theme=dark] .top .brand{color:#e9efff}html[data-theme=dark] .top .brand i{color:#6ea2ff}html[data-theme=dark] .top .brand .gl{stroke:#6ea2ff}
.nav nav{display:flex;align-items:center;justify-content:flex-start;gap:4px;margin-left:clamp(0px,3.4vw,70px)}
.nav nav>a,.dt{display:flex;align-items:center;gap:7px;color:var(--tx);font-weight:600;font-size:15.5px;font-family:inherit;padding:11px 16px;border-radius:14px;background:none;border:0;cursor:pointer;white-space:nowrap}
.nav nav>a svg{width:22px;height:22px}.dt svg{width:15px;height:15px}
.nav nav>a.on{background:#e4eeff;color:var(--pri)}html[data-theme=dark] .nav nav>a.on{background:var(--pri2);color:#8fb4ff}
.nav nav>a:hover,.dt:hover{color:var(--pri)}
.dd{position:relative}.dm{display:none;position:absolute;top:100%;left:0;min-width:210px;background:var(--sf);border:1px solid var(--bd);border-radius:14px;padding:8px;box-shadow:0 16px 34px rgba(20,60,160,.16)}
.dd:hover .dm,.dd:focus-within .dm,.dd.open .dm{display:block}
.dm a{display:block;padding:10px 14px;border-radius:10px;color:var(--tx);font-weight:600;font-size:14.5px}.dm a:hover{background:var(--pri2);color:var(--pri)}
.theme{width:44px;height:44px;border-radius:50%;border:0;background:none;color:#1c55e6;cursor:pointer;display:grid;place-items:center}.theme:hover{background:var(--pri2)}
.theme svg{width:28px;height:28px}.theme .su{display:none}html[data-theme=dark] .theme .su{display:block}html[data-theme=dark] .theme .mo{display:none}
.burger{display:none;width:44px;height:44px;border:0;background:none;color:var(--tx);cursor:pointer;place-items:center}.burger svg{width:28px;height:28px}
/* hero */
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:0;align-items:center;padding-top:38px;padding-bottom:22px}
.pill{display:inline-flex;align-items:center;gap:9px;background:#e3edfd;color:var(--pri);padding:4px 16px 4px 5px;border-radius:99px;font-size:14.5px;font-weight:700}.pill svg{width:26px;height:26px}
html[data-theme=dark] .pill{background:var(--pri2);color:#8fb4ff}
.hero h1{font-size:clamp(32px,2.9vw,45px);line-height:1.08;margin:18px 0 14px;font-weight:800;letter-spacing:-1.2px;color:var(--hd);max-width:800px}.hero h1 em{font-style:normal;color:#1f62f2}
.sub{color:#2f3d62;font-size:clamp(16px,1.2vw,18.5px);line-height:1.58;max-width:600px;margin:0 0 24px}html[data-theme=dark] .sub{color:var(--mut)}
.sbar{display:flex;align-items:center;background:var(--sf);border:2px solid #dbe7fb;border-radius:18px;padding:4px;max-width:738px;height:56px;box-shadow:0 8px 26px rgba(31,98,242,.12)}.sbar:focus-within{border-color:var(--pri)}
.sbar .gi{width:24px;height:24px;margin:0 14px 0 18px;color:#5b6783;flex-shrink:0}
.sbar input{flex:1;min-width:0;border:0;outline:0;font-weight:500;font-size:16.5px;font-family:inherit;color:var(--tx);background:transparent;height:100%}.sbar input::placeholder{color:#5f6b85}
.pub .btn{font-weight:700;font-size:15px}.sbar .btn{height:100%;display:flex;align-items:center;gap:9px;padding:0 28px;border-radius:14px;font-size:17px;background:linear-gradient(180deg,#2f78ff,#1459ea)}.sbar .btn svg{width:20px;height:20px}
.pop{margin-top:14px;font-size:14px;color:#2b3a5c;display:flex;gap:10px;flex-wrap:wrap;align-items:center}.pop>svg{width:20px;height:20px;margin-right:-4px}
html[data-theme=dark] .pop{color:var(--mut)}
.chip{border:0;background:#e8eef9;color:#2b3a5c;padding:6px 14px;border-radius:99px;font-weight:500;font-size:13px;font-family:inherit;cursor:pointer}.chip:hover{background:var(--pri);color:#fff}
html[data-theme=dark] .chip{background:var(--pri2);color:var(--tx)}
.hr{position:relative;container-type:inline-size;width:116%;margin:-66px -24px 0 0;justify-self:end;align-self:start;z-index:31;pointer-events:none}html.sc .hr{z-index:0}.hl{align-self:start}.hr>svg{width:100%;height:auto}
.fb{position:absolute;display:flex;align-items:center;justify-content:center;gap:.32em;color:#fff;font-size:clamp(17px,3.8cqw,27px);padding:0;height:15.5%;border-radius:.62em;font-weight:800;font-style:normal;letter-spacing:-.2px;box-shadow:0 .5em .9em rgba(30,60,150,.28),inset 0 -.14em 0 rgba(0,0,0,.14),inset 0 .08em 0 rgba(255,255,255,.4);animation:fl 6s ease-in-out infinite}
.fb svg{width:1.45em;height:1.45em;flex-shrink:0}
.b-whois{background:linear-gradient(135deg,#4aa0ff,#1d5fe8);left:22.6%;top:14.5%;width:19.7%;rotate:-8deg}
.b-ssl{background:linear-gradient(135deg,#46c97c,#1b9a4d);left:64.1%;top:15.5%;width:18.2%;height:17.5%;rotate:8deg;animation-delay:-1.5s}
.b-seo{background:linear-gradient(135deg,#ffbb3d,#f4801a);left:13.9%;top:42.5%;width:17.5%;height:17%;rotate:-9deg;animation-delay:-3s}
.b-dns{background:linear-gradient(135deg,#9f86ff,#5b3fe0);left:75.1%;top:43.8%;width:18.2%;height:16%;rotate:8deg;animation-delay:-4.5s}
@keyframes fl{50%{translate:0 -9px}}
@media(prefers-reduced-motion:reduce){.fb{animation:none}html{scroll-behavior:auto}}
/* tools */
.tools{display:grid;grid-template-columns:repeat(6,1fr);padding:18px 10px;gap:0;margin-top:4px;border-radius:26px;border-color:#e3ecfb;box-shadow:0 10px 34px rgba(31,98,242,.08)}
.tc{position:relative;background:none;border:0;padding:6px 14px;font-family:inherit;color:var(--tx);cursor:pointer;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;border-radius:16px}
.tc+.tc:before{content:'';position:absolute;left:0;top:6%;bottom:6%;width:1px;background:#e2e9f6}html[data-theme=dark] .tc+.tc:before{background:var(--bd)}
.tc:hover{background:var(--pri2)}.tc.on{background:var(--pri2)}
.tc{gap:3px}.tc .ti svg{width:40px;height:40px}.tc b{font-size:16.5px;color:var(--hd);margin-top:4px}.tc small{color:#4a5877;font-size:13.6px;line-height:1.45}html[data-theme=dark] .tc small{color:var(--mut)}
/* hasil */
#hasil{margin-top:20px}.res table{width:100%;border-collapse:collapse;font-size:14px}.res td{padding:10px 8px;border-bottom:1px solid var(--bd);vertical-align:top;word-break:break-word}
.res td:first-child{width:32%;color:var(--mut);font-weight:600}.res .err{color:var(--bad);font-weight:600}.res .load{color:var(--mut)}
/* tiga kartu */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px;margin-bottom:16px}
.three .card{position:relative;overflow:hidden;min-height:190px;border-radius:20px;padding:16px 24px 14px;box-shadow:none}
.three h3{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-size:19px;font-weight:800;color:var(--hd)}.three h3 svg{width:26px;height:26px;flex-shrink:0}
.c-feat{background:linear-gradient(135deg,#eaf2ff,#dde9ff);border:1.5px solid #cddffa}
.c-feat ul{list-style:none;margin:0;padding:0;position:relative;z-index:1}.c-feat li{padding:2px 0 2px 34px;line-height:1.5;position:relative;font-size:14.3px;font-weight:500;color:#1b2a4d}
.c-feat li:before{content:'';position:absolute;left:0;top:3px;width:22px;height:22px;border-radius:50%;background:#2563eb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6.5 12.5 3.6 3.6 7.4-8' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.rk{position:absolute;right:10px;bottom:6px;width:150px;height:auto}.c-feat .rk{right:2px;bottom:-4px;width:150px}
.c-ex{background:#f2f7ff;border:1.5px solid #cfe0fa}
.exrow{display:flex;gap:16px;align-items:flex-start}.thumb{width:112px;height:auto;flex-shrink:0;border-radius:8px;box-shadow:0 6px 16px rgba(20,50,110,.22)}
.c-ex .badge{display:inline-flex;align-items:center;gap:7px;background:#d8f5e3;color:#0f8a4b;border:1.5px solid #8ddcae;margin:0 0 6px;padding:3px 14px 3px 7px;font-size:13.5px}.c-ex .badge svg{width:20px;height:20px}
.c-ex dl{display:grid;grid-template-columns:auto 1fr;gap:1px 12px;margin:0;font-size:13px;line-height:1.5}.c-ex dt{color:#44506d}.c-ex dd{margin:0;font-weight:600;color:var(--hd)}.c-ex dd i{font-style:normal;font-weight:500;margin-right:10px;color:#44506d}
.c-ex>a,.c-tip>a{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-weight:700;font-size:14px}.c-ex>a svg,.c-tip>a svg{width:15px;height:15px}
.c-tip{background:linear-gradient(135deg,#f3fae8,#e2f3cb);border:1.5px solid #cfe6b2}.c-tip h4{margin:0 0 4px;font-size:17.5px;font-weight:800;color:#0e1d3f;max-width:58%;line-height:1.3}
.c-tip p{margin:0;font-size:12.6px;color:#2b4a63;max-width:64%;line-height:1.45}.c-tip p b{color:#1d4fd8}.c-tip>a{color:#1c8a3c;margin-top:6px}.c-tip .rk{width:158px;right:6px;bottom:2px}
.c-tip h3 svg{width:28px;height:28px}
html[data-theme=dark] .c-feat,html[data-theme=dark] .c-ex,html[data-theme=dark] .c-tip{background:var(--sf);border-color:var(--bd)}
html[data-theme=dark] .c-feat li,html[data-theme=dark] .c-tip h4,html[data-theme=dark] .c-tip p,html[data-theme=dark] .c-ex dt,html[data-theme=dark] .c-ex dd i{color:var(--mut)}
/* footer */
.foot{position:relative;color:#fff;margin-top:-4px}.wave{display:block;width:100%;height:46px;margin-bottom:-1px}.fin{background:var(--navy);position:relative;overflow:hidden}
.lf{position:absolute;width:132px;height:auto;bottom:40px;z-index:0;pointer-events:none}.l1{left:-30px}.l2{right:-30px}
@media(min-width:1181px) and (max-width:1560px){.pub .fin .fgrid{padding-right:84px}}
.fgrid{display:grid;grid-template-columns:1.75fr .75fr .85fr 1fr 1.9fr;gap:24px;padding-top:6px;padding-bottom:20px;position:relative;z-index:1}
.fgrid p{font-size:11.5px;margin:6px 0 0 54px;opacity:.95}.fgrid h5{margin:0 0 12px;font-size:14.5px;font-weight:700;display:flex;align-items:center;gap:10px}
.fgrid a:not(.brand){display:block;color:#fff;font-size:13px;margin-bottom:5px;opacity:.95}.fgrid a:not(.brand):hover{text-decoration:underline}
.soc{display:flex;gap:12px}.soc a{width:34px;height:34px;margin:0!important;display:block}.soc svg{width:100%;height:100%}
.nl h5 svg{width:30px;height:30px;flex-shrink:0}.nl small{display:block;opacity:.85;font-size:11.5px;margin:-6px 0 10px 40px}
.nl form{display:flex;gap:10px}.nl input{flex:1;min-width:0;border:0;border-radius:6px;padding:0 14px;height:38px;font-family:inherit;font-size:13px}.nl .btn{padding:0 20px;height:38px;border-radius:6px;font-size:14px;background:#1d62f0}
#nm{margin:8px 0 0!important}
.copy{border-top:1px solid rgba(255,255,255,.14);font-size:12px;padding:11px 0;position:relative;z-index:1}.copy .wrap{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.copy a{display:inline;color:#fff;font-size:12px}.copy i{font-style:normal;margin:0 12px;opacity:.55}
/* panel */
body.adm{background:var(--bg)}.app{display:flex;min-height:100vh}.side{width:230px;background:#fff;border-right:1px solid var(--bd);padding:22px 16px;flex-shrink:0}
.side .logo{font-size:21px;margin-bottom:14px}.side a.m{display:block;padding:10px 12px;border-radius:10px;color:var(--tx);font-weight:600;margin-top:4px;font-size:14px}.side a.m:hover{background:var(--pri2)}
.main{flex:1;padding:26px;min-width:0}.main h1{margin:0 0 18px;font-size:26px}.main h2{margin:0 0 12px;font-size:18px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:18px}.stat b{display:block;font-size:30px;color:var(--pri)}.stat span{color:var(--mut);font-size:13px}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-bottom:18px}.adm table{width:100%;border-collapse:collapse;font-size:13.5px}
.adm td,.adm th{padding:9px 8px;border-bottom:1px solid var(--bd);text-align:left;word-break:break-word}.adm th{color:var(--mut);font-size:12px;text-transform:uppercase}
label{display:block;font-size:13px;font-weight:600;margin:10px 0 4px;color:var(--mut)}.f{width:100%;padding:11px 12px;border:1px solid var(--bd);border-radius:10px;font:14px inherit;font-family:inherit}.f:focus{outline:0;border-color:var(--pri)}
.msg{padding:10px 14px;border-radius:10px;margin-bottom:14px;font-size:14px}.login{max-width:400px;margin:11vh auto}.login h1{margin:0 0 6px}
.bar{height:8px;background:var(--pri2);border-radius:9px;margin:4px 0 12px}.bar i{display:block;height:100%;background:var(--pri);border-radius:9px}
@media(max-width:1180px){.hero{grid-template-columns:1fr}.hr{max-width:560px;margin:10px auto 0}.nav{grid-template-columns:1fr auto auto;gap:6px}.burger{display:grid}
.nav nav{display:none;position:absolute;top:72px;left:0;right:0;background:var(--sf);flex-direction:column;align-items:stretch;padding:12px 20px 18px;box-shadow:0 18px 30px rgba(20,60,160,.14);gap:2px}.nav nav.open{display:flex}
.nav nav{margin-left:0}.dd .dm{position:static;box-shadow:none;border:0;padding:0 0 0 14px}.dd:hover .dm{display:none}.dd.open .dm{display:block}.dt{width:100%;justify-content:space-between}
.tools{grid-template-columns:repeat(3,1fr);row-gap:18px}.tc:nth-child(4):before{display:none}.three{grid-template-columns:1fr}.fgrid{grid-template-columns:1fr 1fr 1fr}.fgrid>div:first-child,.nl{grid-column:1/-1}.nl small{margin-left:40px}.pub .lf{display:none}}
@media(max-width:640px){.tc small br{display:none}.pub .wrap{padding-left:16px;padding-right:16px}.brand{font-size:26px}.brand svg{width:40px;height:40px}.sbar{flex-wrap:wrap;height:auto;padding:6px}.sbar input{height:50px}.sbar .btn{width:100%;height:50px;justify-content:center}.tools{grid-template-columns:repeat(2,1fr)}.tc:nth-child(odd):before{display:none}.tc:nth-child(even):before{display:block}.tc:nth-child(3):before,.tc:nth-child(5):before{display:none}
.exrow{flex-direction:column}.c-tip h4,.c-tip p{max-width:100%}.c-tip .rk{opacity:.25}.fgrid{grid-template-columns:1fr 1fr}
.app{flex-direction:column}.side{width:100%}.main{padding:16px}}

.dk{display:block}@media(max-width:1180px){.dk{display:none}}

/* ===== anti slider kanan-kiri ===== */
html{overflow-x:hidden;max-width:100%}
@supports (overflow:clip){html{overflow-x:clip}}
body{overflow-x:hidden;max-width:100vw;width:100%;position:relative}
@supports (overflow:clip){body{overflow-x:clip}}
img,svg,video,iframe,table{max-width:100%}
.pub main,.pub .wrap,.pub .card{min-width:0}
.hero>*,.three>*,.tools>*,.fgrid>*{min-width:0}
.res .card,#rbody{overflow-wrap:anywhere}
.res table{table-layout:fixed}
.foot,.fin{max-width:100%;overflow:hidden}
.fin .fgrid a,.fin .fgrid p,.fin .fgrid small{overflow-wrap:anywhere}
.pub .wrap{width:100%}
.pub .hero{padding-left:24px;padding-right:24px}
@media(max-width:1180px){.hr{width:100%;max-width:560px;margin:10px auto 0;justify-self:center;align-self:auto}.fgrid p{white-space:normal}}
@media(max-width:640px){.brand{font-size:23px}.brand svg{width:36px;height:36px}.hero{padding-left:16px;padding-right:16px}.nl form{flex-wrap:wrap}.nl .btn{width:100%}}

/* ===== scrollbar vertikal (kanan) ===== */
html{scrollbar-width:thin;scrollbar-color:#3b82f6 #e6eefc}
html[data-theme=dark]{scrollbar-color:#4f8bff #0d1838}
::-webkit-scrollbar{width:12px;height:0}
::-webkit-scrollbar-track{background:linear-gradient(90deg,#eaf1ff,#dfe9fb);border-left:1px solid #d3e0f8}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#5aa2ff 0,#1f62f2 55%,#4a3fe0 100%);border-radius:99px;border:3px solid #e6eefc;min-height:56px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#7bb6ff 0,#2f78ff 55%,#6b4df0 100%)}
::-webkit-scrollbar-thumb:active{background:linear-gradient(180deg,#2f78ff,#1459ea)}
::-webkit-scrollbar-corner{background:transparent}
html[data-theme=dark]::-webkit-scrollbar-track{background:#0d1838;border-left-color:#233463}
html[data-theme=dark]::-webkit-scrollbar-thumb{border-color:#0d1838}
@media(max-width:640px){::-webkit-scrollbar{width:8px}::-webkit-scrollbar-thumb{border-width:2px}}

/* tombol kembali ke atas + progress scroll (kanan bawah) */
.totop{position:fixed;right:22px;bottom:22px;z-index:40;width:52px;height:52px;border-radius:50%;border:0;padding:0;cursor:pointer;color:#1f62f2;background:var(--sf);box-shadow:0 10px 26px rgba(31,98,242,.28);display:grid;place-items:center;opacity:0;visibility:hidden;translate:0 14px;transition:opacity .25s,translate .25s,visibility .25s}
.totop.show{opacity:1;visibility:visible;translate:0 0}
.totop:hover{background:var(--pri);color:#fff}.totop:hover .pr{color:#fff}
.totop svg{position:absolute;inset:0;width:100%;height:100%}.totop .ar{inset:14px;width:24px;height:24px}
.totop #prg{transition:stroke-dashoffset .1s linear}
html[data-theme=dark] .totop{color:#8fb4ff}
@media(max-width:640px){.totop{right:14px;bottom:14px;width:46px;height:46px}.totop .ar{inset:11px}}
@media(prefers-reduced-motion:reduce){.totop,.totop #prg{transition:none}}
@media(max-width:420px){.brand{font-size:20px;gap:7px}.brand svg{width:32px;height:32px}.burger,.theme{width:38px;height:38px}.nav{gap:2px}.pub .wrap{padding-left:12px;padding-right:12px}}

.pub main{overflow-x:clip}

/* ===== layout lebih lebar + laptop hero baru ===== */
.pub .wrap,.pub .wrap.wide{max-width:1500px}
.pub .wrap{padding-left:32px;padding-right:32px}
.pub .hero{padding-left:32px;padding-right:32px}
@media(min-width:1181px){
.hero{grid-template-columns:1.14fr .86fr;gap:24px;padding-top:44px;padding-bottom:26px}
.hero h1{font-size:clamp(32px,2.6vw,46px);max-width:900px}
.sub{max-width:680px}
.sbar{max-width:800px}
.hr{width:100%;margin:-8px 0 0;justify-self:end;align-self:center;z-index:1}
.three{gap:26px}
.three .card{min-height:200px}
}
.b-whois{left:21.5%;top:4.6%;width:20.4%;height:24%;rotate:-7deg}
.b-ssl{left:63.9%;top:6.1%;width:18.6%;height:23.9%;rotate:6deg}
.b-seo{left:12.9%;top:36.1%;width:17%;height:21.7%;rotate:-9deg}
.b-dns{left:75%;top:38%;width:18.2%;height:21.7%;rotate:8deg}
.fb{font-size:clamp(17px,3.5cqw,32px)}
@media(max-width:1180px){.pub .wrap{padding-left:20px;padding-right:20px}.hr{width:100%;max-width:620px}}
@media(max-width:640px){.pub .wrap,.pub .hero{padding-left:16px;padding-right:16px}}
@media(max-width:420px){.pub .wrap,.pub .hero{padding-left:12px;padding-right:12px}}

/* ===== Konten panduan & FAQ (SEO) ===== */
.seo-c{margin-top:8px;margin-bottom:28px}
.seo-c .card{min-height:0;padding:26px 30px;box-shadow:none}
.seo-c h2{margin:26px 0 10px;font-size:22px;font-weight:800;color:var(--hd);line-height:1.3}
.seo-c h2:first-child{margin-top:0}
.seo-c h3{margin:18px 0 6px;font-size:17px;font-weight:700;color:var(--hd);line-height:1.35}
.seo-c p,.seo-c li{font-size:15.5px;line-height:1.7;color:var(--tx)}
.seo-c p{margin:0 0 6px;max-width:78ch}
.seo-c ol{margin:8px 0 0;padding-left:22px;max-width:78ch}
.seo-c li{margin-bottom:4px}
.seo-c [id]{scroll-margin-top:90px}
@media(max-width:640px){.seo-c .card{padding:20px 18px}.seo-c h2{font-size:20px}}

/* ===== Tombol tempel & hapus pada kolom domain ===== */
.hl{position:relative}
.sact{position:relative;display:grid;align-items:center;justify-items:end;flex-shrink:0;width:96px;height:100%;margin:0 8px 0 4px;transition:width .3s cubic-bezier(.4,0,.2,1)}
.sbar.has .sact{width:36px}
.sa{grid-area:1/1;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;cursor:pointer;font-family:inherit;font-weight:700;transition:opacity .2s ease,transform .3s cubic-bezier(.34,1.56,.64,1),visibility 0s,background .2s,color .2s;-webkit-tap-highlight-color:transparent}
.sa-paste{height:38px;padding:0 13px 0 11px;border-radius:12px;font-size:14px;background:var(--pri2);color:var(--pri);white-space:nowrap}
.sa-paste svg{width:17px;height:17px;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.sa-paste:hover{background:var(--pri);color:#fff}
.sa-paste:hover svg{transform:translateY(-1.5px) rotate(-8deg)}
.sa-paste:active{transform:scale(.94)}
.sa-clear{width:32px;height:32px;border-radius:50%;background:#eaf0fc;color:var(--mut)}
[data-theme=dark] .sa-clear{background:var(--pri2);color:var(--mut)}
.sa-clear svg{width:15px;height:15px;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.sa-clear:hover{background:var(--bad);color:#fff}
.sa-clear:hover svg{transform:rotate(90deg)}
.sa-clear:active{transform:scale(.88)}
.sa:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
/* status: kosong -> tampil Tempel, terisi -> tampil Hapus */
.sbar:not(.has) .sa-clear,.sbar.has .sa-paste{opacity:0;transform:scale(.6);visibility:hidden;pointer-events:none;transition:opacity .18s ease,transform .22s ease,visibility 0s .22s}
/* kilau singkat setelah menempel */
.sbar.flash{animation:sflash .9s ease}
@keyframes sflash{0%{box-shadow:0 8px 26px rgba(31,98,242,.12),0 0 0 0 rgba(31,98,242,.45)}45%{box-shadow:0 8px 26px rgba(31,98,242,.2),0 0 0 7px rgba(31,98,242,.16);border-color:var(--pri)}100%{box-shadow:0 8px 26px rgba(31,98,242,.12),0 0 0 14px rgba(31,98,242,0)}}
/* petunjuk singkat bila izin papan klip ditolak */
.stip{position:absolute;right:0;margin-top:-4px;max-width:100%;padding:7px 13px;border-radius:10px;background:var(--hd);color:var(--sf);font-size:13px;font-weight:600;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .25s,transform .25s;z-index:5}
.stip.on{opacity:1;transform:none}
@media(max-width:640px){
  .sact,.sbar.has .sact{width:40px;margin:0 2px 0 0}
  .sa-paste{width:38px;padding:0}.sa-paste span{display:none}
  .stip{left:0;right:auto}
}
@media(prefers-reduced-motion:reduce){.sact,.sa,.sa svg{transition:none!important}.sbar.flash{animation:none}}
.sact{grid-template-columns:minmax(0,1fr)}
.sa{justify-self:end}

/* ===== Logo gambar (PNG) ===== */
.brand img{display:block;height:46px;width:auto;max-width:100%}
.brand .lg-d{display:none}
html[data-theme=dark] .top .brand .lg-l{display:none}
html[data-theme=dark] .top .brand .lg-d{display:block}
.brand.w img{height:auto;width:230px}
@media(max-width:640px){.brand img{height:40px}.brand.w img{height:auto}}
@media(max-width:420px){.brand img{height:34px}.brand.w img{height:auto}}

/* ===== hasil gabungan: ringkasan + WHOIS + DNS + SSL dalam satu halaman ===== */
.rsec{padding:18px 0;border-top:1px solid var(--bd);border-radius:12px}
.rsec:first-child{border-top:0;padding-top:0}.rsec:last-child{padding-bottom:0}
.rsh h3{margin:0 0 10px;font-size:17px;color:var(--hd)}
.rs-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.rs-top h2{margin:0;font-size:clamp(20px,2.6vw,26px);font-weight:800;color:var(--hd);overflow-wrap:anywhere}
.rs-chip{display:inline-block;padding:4px 12px;border-radius:99px;font-size:13px;font-weight:700;background:var(--pri2);color:var(--pri)}
.rs-chip.good{background:#e3f6ec;color:var(--good)}.rs-chip.warn{background:#fff3dc;color:var(--warn)}.rs-chip.bad{background:#fde7e7;color:var(--bad)}
.rs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.rs-grid.one{grid-template-columns:1fr}
.rs-t{background:var(--pri2);border-radius:14px;padding:12px 14px;min-width:0}
.rs-t span{display:block;font-size:12.5px;font-weight:600;color:var(--mut)}
.rs-t b{display:block;font-size:16.5px;color:var(--hd);margin-top:2px;line-height:1.3;overflow-wrap:anywhere}
.rs-t small{display:block;font-size:12.5px;color:var(--mut);margin-top:2px;overflow-wrap:anywhere}
.rs-t.rs-ok b{color:var(--good)}.rs-t.rs-warn b{color:var(--warn)}.rs-t.rs-bad b{color:var(--bad)}
.rs-dim{font-style:normal;color:var(--mut)}
.rs-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.rs-note{margin:0;color:var(--mut)}
.rspin{display:inline-block;width:14px;height:14px;margin-right:8px;vertical-align:-2px;border-radius:50%;border:2.5px solid var(--pri2);border-top-color:var(--pri);animation:rspin .8s linear infinite}
@keyframes rspin{to{transform:rotate(360deg)}}
.rflash{animation:rfl 1.4s ease}
@keyframes rfl{0%,45%{box-shadow:0 0 0 3px var(--pri)}100%{box-shadow:0 0 0 3px transparent}}
@media(max-width:900px){.rs-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.rs-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.rspin,.rflash{animation:none}}

/* ===== Hasil v2: lega, tenang, mudah dipindai ===== */
html{scroll-padding-top:142px}
.pub .card.res{background:none;border:0;box-shadow:none;padding:0}
.rnav{position:sticky;top:72px;z-index:20;display:flex;gap:8px;overflow-x:auto;margin:0 0 16px;padding:10px 4px;background:color-mix(in srgb,var(--bg) 90%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);scrollbar-width:none}
.rnav::-webkit-scrollbar{display:none}
.rnav button{flex:none;display:flex;align-items:center;gap:8px;border:1px solid var(--bd);background:var(--sf);color:var(--tx);font:600 14px/1 inherit;font-family:inherit;padding:10px 16px;border-radius:99px;cursor:pointer;transition:border-color .2s,color .2s}
.rnav button:hover{border-color:var(--pri);color:var(--pri)}
.rdot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#c5d0e6;flex:none}
.rdot.ok{background:var(--good)}.rdot.wn{background:var(--warn)}.rdot.no{background:var(--bad)}
.pub .rsec,.pub .rsec:first-child,.pub .rsec:last-child{border:1px solid var(--bd);border-radius:18px;padding:22px 24px;margin-bottom:16px;background:var(--sf);box-shadow:0 4px 18px rgba(31,98,242,.05)}
.rsh{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.rsh h3{display:flex;align-items:center;gap:10px;margin:0;font-size:18px}
.rcp{border:1px solid var(--bd);background:none;color:var(--mut);border-radius:10px;font:600 13px/1 inherit;font-family:inherit;padding:8px 13px;cursor:pointer}
.rcp:hover{color:var(--pri);border-color:var(--pri)}
.rkv{margin:0}
.rr{display:grid;grid-template-columns:minmax(120px,220px) 1fr;gap:14px;padding:12px 12px;border-radius:10px;align-items:start}
.rr:nth-child(odd){background:color-mix(in srgb,var(--pri2) 45%,transparent)}
.rr dt{color:var(--mut);font-weight:600;font-size:14.5px}
.rr dd{margin:0;font-size:15px;line-height:1.6;font-weight:500;overflow-wrap:anywhere}
.rkv.dns .rr{grid-template-columns:78px 1fr}
.rkv.dns dd{font:500 13.5px/1.6 ui-monospace,Menlo,Consolas,monospace}
.tp{display:inline-block;min-width:54px;text-align:center;padding:3px 10px;border-radius:8px;font:800 12px ui-monospace,Menlo,monospace;background:var(--pri2);color:var(--pri)}
.t-MX{background:#fff0e0;color:#c2620a}.t-NS{background:#efe9ff;color:#6b45d8}.t-TXT,.t-SPF,.t-DMARC{background:#e3f6ec;color:var(--good)}.t-SOA,.t-CAA{background:#eceff6;color:#56668a}
.rchk{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:10px}
.rchk li{display:grid;grid-template-columns:12px 1fr;column-gap:12px;padding:13px 15px;border:1px solid var(--bd);border-radius:12px}
.rchk li i{width:10px;height:10px;border-radius:50%;margin-top:6px;background:#c5d0e6}
.rchk li b{font-size:14.5px;color:var(--hd)}
.rchk li span{grid-column:2;color:var(--mut);font-size:13.5px;line-height:1.5;overflow-wrap:anywhere}
.rchk .ok i{background:var(--good)}.rchk .wn i{background:var(--warn)}.rchk .no i{background:var(--bad)}
.skel i{display:block;height:14px;border-radius:7px;margin:12px 0;background:linear-gradient(90deg,var(--pri2),color-mix(in srgb,var(--pri2) 35%,var(--sf)),var(--pri2));background-size:200% 100%;animation:sk 1.3s linear infinite}
.skel i:nth-child(2){width:78%}.skel i:nth-child(3){width:52%}
@keyframes sk{to{background-position:-200% 0}}
.rs-bar{display:block;height:6px;border-radius:9px;background:rgba(31,98,242,.14);margin-top:8px;overflow:hidden}
.rs-bar u{display:block;height:100%;border-radius:9px;background:var(--pri);text-decoration:none}
.rs-ok .rs-bar u{background:var(--good)}.rs-warn .rs-bar u{background:var(--warn)}.rs-bad .rs-bar u{background:var(--bad)}
.rs-chip{padding:6px 14px}
html[data-theme=dark] .badge.good,html[data-theme=dark] .rs-chip.good{background:#0f3a2a;color:#5fd69a}
html[data-theme=dark] .badge.warn,html[data-theme=dark] .rs-chip.warn{background:#3d2f0c;color:#f5b84a}
html[data-theme=dark] .badge.bad,html[data-theme=dark] .rs-chip.bad{background:#431a1a;color:#ff8a8a}
html[data-theme=dark] .rr:nth-child(odd){background:rgba(255,255,255,.03)}
html[data-theme=dark] .rnav{background:color-mix(in srgb,var(--bg) 88%,transparent)}
@media(max-width:640px){
  html{scroll-padding-top:128px}.rnav{top:64px}
  .pub .rsec,.pub .rsec:first-child,.pub .rsec:last-child{padding:18px 16px}
  .rr{grid-template-columns:1fr;gap:2px}.rkv.dns .rr{grid-template-columns:62px 1fr;gap:10px}
  .rchk{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.skel i{animation:none}}

/* ===== tiga kartu: tampilan halus + animasi roket ===== */
.three .card{transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease,border-color .3s ease;will-change:transform}
.three .card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(31,98,242,.16)}
.three .card::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px circle at var(--mx,80%) var(--my,0%),rgba(255,255,255,.55),transparent 55%);opacity:0;transition:opacity .35s}
.three .card:hover::after{opacity:1}
html[data-theme=dark] .three .card::after{background:radial-gradient(420px circle at var(--mx,80%) var(--my,0%),rgba(120,160,255,.14),transparent 55%)}
.three h3 svg{transition:transform .5s cubic-bezier(.34,1.56,.64,1)}.three .card:hover h3 svg{transform:rotate(-10deg) scale(1.12)}
.c-feat li{transition:transform .3s ease,color .3s}.c-feat li:hover{transform:translateX(5px);color:var(--pri)}
.c-feat li:before{transition:transform .35s cubic-bezier(.34,1.56,.64,1)}.c-feat li:hover:before{transform:scale(1.18) rotate(-8deg)}
.c-ex .thumb{transition:transform .5s cubic-bezier(.2,.8,.2,1)}.c-ex:hover .thumb{transform:scale(1.05) rotate(-1.5deg)}
.c-ex .badge svg{animation:pls 2.4s ease-in-out infinite}
.c-ex>a svg,.c-tip>a svg{transition:transform .3s ease}.c-ex>a:hover svg,.c-tip>a:hover svg{transform:translateX(5px)}
.c-ex dd{position:relative}
.c-ex dd:first-of-type::after{content:'';display:inline-block;width:7px;height:7px;margin-left:8px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 0 rgba(22,163,74,.55);animation:ping 2s ease-out infinite;vertical-align:middle}

/* roket */
.rocket{overflow:visible;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.c-feat:hover .rocket{transform:translate(4px,-6px) scale(1.04)}
.r-fly{transform-box:fill-box;transform-origin:50% 100%;animation:rkfly 3.6s ease-in-out infinite}
.c-feat:hover .r-fly{animation-duration:1.6s}
.r-flame{transform-box:fill-box;transform-origin:50% 0;animation:flame .16s ease-in-out infinite alternate}
svg .sm{transform-box:fill-box;transform-origin:center;opacity:0;animation:smoke 2.4s ease-out infinite}svg .sm.m2{animation-delay:.8s}svg .sm.m3{animation-delay:1.6s}
svg .cl{transform-box:fill-box;transform-origin:center;animation:cloud 5s ease-in-out infinite}svg .cl.c2{animation-delay:-1.7s}.cl.c3{animation-delay:-3.2s}
svg .st{transform-box:fill-box;transform-origin:center;animation:twk 2.6s ease-in-out infinite}svg .st.s2{animation-delay:-.9s}.st.s3{animation-delay:-1.7s}
@keyframes rkfly{0%,100%{transform:translate(0,2px) rotate(-1.5deg)}50%{transform:translate(6px,-12px) rotate(1.5deg)}}
@keyframes flame{from{transform:scaleY(.82) scaleX(.94);opacity:.9}to{transform:scaleY(1.18) scaleX(1.06);opacity:1}}
@keyframes smoke{0%{opacity:0;transform:translate(0,0) scale(.4)}25%{opacity:.85}100%{opacity:0;transform:translate(-26px,24px) scale(1.9)}}
@keyframes cloud{50%{transform:translateX(7px) scale(1.05)}}
@keyframes twk{0%,100%{opacity:.25;transform:scale(.6)}50%{opacity:1;transform:scale(1.15)}}
@keyframes pls{50%{transform:scale(1.14)}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(22,163,74,.55)}80%,100%{box-shadow:0 0 0 9px rgba(22,163,74,0)}}

/* ikon pencarian di kartu tips */
.c-tip .rk:not(.rocket){transform-origin:70% 70%;animation:mag 4.2s ease-in-out infinite}
@keyframes mag{0%,100%{transform:rotate(0) translateY(0)}35%{transform:rotate(-7deg) translateY(-5px)}65%{transform:rotate(4deg) translateY(-2px)}}

/* muncul saat discroll */
.js .three .card[data-rv]{opacity:0;transform:translateY(26px) scale(.98)}
.js .three .card[data-rv].in{opacity:1;transform:none;transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease}
.js .three .card[data-rv="2"].in{transition-delay:.12s,.12s,0s}.js .three .card[data-rv="3"].in{transition-delay:.24s,.24s,0s}
.js .three .card[data-rv].in:hover{transform:translateY(-6px);transition-delay:0s}

@media(prefers-reduced-motion:reduce){.rocket *,.c-ex .badge svg,.c-ex dd::after,.c-tip .rk{animation:none!important}.js .three .card[data-rv]{opacity:1;transform:none}.three .card,.three .card:hover{transition:none;transform:none}}

/* ikon fitur: elegan */
.fi-h{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;flex-shrink:0;background:linear-gradient(135deg,#5b9bff,#1f62f2 55%,#5b3df5);box-shadow:0 6px 14px rgba(31,98,242,.38),inset 0 1px 0 rgba(255,255,255,.45);transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.three h3 .fi-h svg{width:20px;height:20px}
.c-feat:hover .fi-h{transform:rotate(-8deg) scale(1.1)}
.c-feat:hover .fi-h svg{transform:none}
.fl li{display:flex;align-items:center;gap:12px;padding:3px 0}
.fl li:before{display:none!important}
.fi{display:grid;place-items:center;width:26px;height:26px;border-radius:9px;flex-shrink:0;background:#fff;border:1px solid #d3e2fb;box-shadow:0 2px 6px rgba(31,98,242,.12);transition:transform .35s cubic-bezier(.34,1.56,.64,1),background .3s,box-shadow .3s,border-color .3s}
.fi svg{width:15px;height:15px;fill:none;stroke:#1f62f2;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
.fl li:hover .fi{background:linear-gradient(135deg,#4d8dff,#1f62f2);border-color:transparent;box-shadow:0 6px 14px rgba(31,98,242,.35);transform:scale(1.14) rotate(-6deg)}
.fl li:hover .fi svg{stroke:#fff}
html[data-theme=dark] .fi{background:#16295a;border-color:#2a4180}
html[data-theme=dark] .fi svg{stroke:#8fb6ff}

/* lencana judul seragam di ketiga kartu */
.three h3{gap:12px;min-height:34px;margin-bottom:10px}
.three h3 .fi-h{width:34px;height:34px;border-radius:11px}
.three h3 .fi-h svg{width:20px;height:20px;margin:0}
.fi-h.g2{background:linear-gradient(135deg,#4ec3ff,#1f62f2);box-shadow:0 6px 14px rgba(31,98,242,.34),inset 0 1px 0 rgba(255,255,255,.45)}
.fi-h.g3{background:linear-gradient(135deg,#ffd35a,#ff8a1f);box-shadow:0 6px 14px rgba(245,140,20,.38),inset 0 1px 0 rgba(255,255,255,.5)}
.three .card:hover .fi-h{transform:rotate(-8deg) scale(1.1)}
.three .card:hover h3 svg{transform:none}

/* Web Analyzer: judul grup & progres bertahap */
.rchk li.grp{grid-column:1/-1;display:block;border:0;padding:8px 2px 0;margin-top:4px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.rchk li.grp:first-child{margin-top:0;padding-top:0}
.rs-prog{position:relative;margin-top:14px;height:30px;border-radius:10px;background:var(--bd);overflow:hidden}
.rs-prog i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#1d5ff0,#38a1ff);opacity:.28;transition:width .4s ease}
.rs-prog span{position:relative;display:block;line-height:30px;padding:0 12px;font-size:13px;font-weight:600;color:var(--mut)}

/* Ketersediaan banyak ekstensi — tampilan dashboard (semua nama class berawalan tl-/tld agar tidak bentrok dengan gaya lain) */
.tldw{display:flex;flex-direction:column;gap:14px}
.tl-sum{display:flex;align-items:stretch;border:1px solid #dce8fb;border-radius:26px;background:rgba(255,255,255,.92);box-shadow:0 16px 34px -24px rgba(31,98,242,.6);overflow:hidden}
.tl-ring{--p:0;flex:none;width:92px;position:relative;display:grid;place-items:center;background:linear-gradient(160deg,#3b84ff,#1450d8)}
.tl-ring::after{content:"";position:absolute;left:0;bottom:0;height:4px;width:calc(var(--p)*1%);background:rgba(255,255,255,.85);transition:width .4s ease}
.tl-done .tl-ring::after{width:100%;background:rgba(255,255,255,.35)}
.tl-ring span{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#fff;color:var(--pri);font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;box-shadow:0 6px 14px -6px rgba(8,40,130,.55)}
.tl-ring span svg{width:28px;height:28px;color:var(--pri)}
.tl-done .tl-ring span{animation:tldPop .5s cubic-bezier(.2,.9,.3,1.3)}
.tl-info{flex:1;min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px;padding:12px 16px}
.tl-ttl{flex:1 1 180px;min-width:0;font-size:19px;font-weight:600;line-height:1.25;color:#0b2a6f;padding-right:18px;border-right:1px solid #dce8fb}
.tl-big{font-size:34px;font-weight:800;line-height:1;margin-right:4px;font-variant-numeric:tabular-nums}
.tl-pills{flex:3 1 520px;min-width:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tls{display:flex;align-items:center;gap:9px;min-width:0;padding:8px 10px;border-radius:16px;border:1px solid transparent}
.tls>svg{flex:none;width:30px;height:30px;padding:7px;border-radius:50%;box-sizing:border-box;background:currentColor}
.tls>svg *{stroke:#fff}
.tls-t{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.tls strong{font-size:15.5px;font-weight:700;color:inherit;white-space:nowrap}
.tls b{font-size:23px;font-weight:800;font-variant-numeric:tabular-nums;margin-right:.08em}
.tls small{font-size:11.5px;font-weight:500;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tls.free{color:var(--good);background:linear-gradient(135deg,#e3f7ec,#f3fcf7);border-color:#c3ead4}
.tls.err{color:var(--warn);background:linear-gradient(135deg,#fff1d6,#fff9ec);border-color:#f6dba6}
.tls.taken{color:var(--bad);background:linear-gradient(135deg,#fde6e8,#fff3f4);border-color:#f6c9cd}
html[data-theme=dark] .tl-sum,html[data-theme=dark] .tl-list{background:rgba(17,28,61,.88);border-color:#233463}html[data-theme=dark] .tl-ttl{color:#fff;border-color:#233463}
html[data-theme=dark] .tls.free{background:rgba(19,160,91,.16);border-color:rgba(19,160,91,.4)}html[data-theme=dark] .tls.err{background:rgba(224,138,0,.16);border-color:rgba(224,138,0,.4)}html[data-theme=dark] .tls.taken{background:rgba(217,58,58,.17);border-color:rgba(217,58,58,.42)}
.tl-list{border:1px solid #dce8fb;border-radius:26px;padding:14px 16px 16px;background:rgba(255,255,255,.94);box-shadow:0 16px 34px -26px rgba(31,98,242,.55)}
.tl-lh{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.tl-tab{display:inline-flex;align-items:center;gap:10px;padding:10px 44px 10px 16px;border-radius:14px 0 0 14px;clip-path:polygon(0 0,calc(100% - 34px) 0,calc(100% - 28px) 30%,100% 100%,0 100%);background:linear-gradient(90deg,#1f62f2,#3484ff);color:#fff;font-size:15.5px;font-weight:700;white-space:nowrap}
.tl-tab svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2.2}
.tl-rf{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border:1px solid #d8e6fb;border-radius:14px;background:#fff;color:var(--hd);font:600 14px inherit;font-family:inherit;cursor:pointer;transition:border-color .18s,color .18s,box-shadow .18s}
.tl-rf svg{width:18px;height:18px}
.tl-rf:hover:not(:disabled){border-color:var(--pri);color:var(--pri);box-shadow:0 6px 14px -10px rgba(31,98,242,.7)}
.tl-rf:disabled{opacity:.55;cursor:default}
.tl-rf:disabled svg{animation:tldSpin 1s linear infinite}
html[data-theme=dark] .tl-rf{background:var(--sf);border-color:#233463;color:#fff}
.tldg{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.tldc{--i:0;display:flex;align-items:center;gap:10px;min-height:52px;padding:7px 12px 7px 10px;border:1px solid #d9e6fa;border-radius:14px;background:var(--sf);color:inherit;font:inherit;text-align:left;cursor:pointer;position:relative;min-width:0;box-shadow:0 8px 16px -14px rgba(31,98,242,.55);
  transition:transform .18s,border-color .18s,box-shadow .18s;animation:tldIn .4s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i)*20ms)}
.tldc:hover,.tldc:focus-visible{transform:translateY(-2px);border-color:var(--pri);box-shadow:0 10px 20px -12px rgba(31,98,242,.65);outline:0}
.tldc:active{transform:scale(.97)}
.tldc.cur{border-color:var(--pri);box-shadow:0 0 0 2px rgba(31,98,242,.22)}
.tl-ic{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--pri2);color:var(--pri)}
.tl-ic svg{width:18px;height:18px}
.tl-ic.gl svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tl-ch{flex:none;width:11px;height:11px;margin-left:auto;color:#6c7ea6;opacity:.9;transition:transform .18s}
.tldc:hover .tl-ch,.tldc:focus-visible .tl-ch{transform:translateX(2px);color:var(--pri)}
.tl-spin{animation:tldSpin .8s linear infinite}
.tl-tx{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.tldc b{font-size:16px;font-weight:700;letter-spacing:-.1px;line-height:1.2;color:var(--hd);overflow-x:clip;overflow-y:visible;text-overflow:ellipsis;white-space:nowrap}
.tl-bal{display:inline-block;line-height:1.1;font-size:.95em;font-family:"Noto Sans Balinese","Segoe UI Historic","Noto Sans",sans-serif}
.tldc em{display:flex;align-items:center;gap:4px;font-style:normal;font-size:13px;font-weight:500;line-height:1.2;color:var(--mut)}
.tldc.wait{background:linear-gradient(100deg,var(--sf) 30%,var(--pri2) 50%,var(--sf) 70%);background-size:220% 100%;animation:tldIn .4s cubic-bezier(.2,.8,.2,1) backwards,tldShim 1.4s linear infinite;animation-delay:calc(var(--i)*20ms),0s}
.tldc.free,.tldc.taken,.tldc.err{animation:tldPop .5s cubic-bezier(.2,.9,.3,1.3) backwards}
.tldc.free{border-color:#cdeadb;background:linear-gradient(135deg,#e8f8f0,#f5fcf8 80%)}
.tldc.free .tl-ic{background:var(--good);color:#fff}.tldc.free .tl-ic.gl{background:#d2f1ea;color:#0e9a8a}.tldc.free em{color:var(--good)}
.tldc.taken{border-color:#f6cdd1;background:linear-gradient(135deg,#fde8ea,#fff4f5 80%)}.tldc.taken .tl-ic{background:var(--bad);color:#fff}.tldc.taken em{color:var(--bad)}
.tldc.err{border-color:#f6deaa;background:linear-gradient(135deg,#fff2d8,#fff9ec 80%)}.tldc.err .tl-ic{background:var(--warn);color:#fff}.tldc.err em{color:var(--warn)}
html[data-theme=dark] .tldc{border-color:#233463}
html[data-theme=dark] .tldc.free{border-color:rgba(19,160,91,.42);background:rgba(19,160,91,.12)}html[data-theme=dark] .tldc.free .tl-ic.gl{background:rgba(14,154,138,.26);color:#5fe0cf}
html[data-theme=dark] .tldc.taken{border-color:rgba(217,58,58,.45);background:rgba(217,58,58,.13)}html[data-theme=dark] .tldc.err{border-color:rgba(224,138,0,.45);background:rgba(224,138,0,.13)}
.tl-lk{display:inline-block;width:11px;height:11px;flex:none;vertical-align:-1px;background:currentColor;opacity:.7;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V8a5 5 0 0 1 10 0v2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1zm2 0h6V8a3 3 0 0 0-6 0v2z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V8a5 5 0 0 1 10 0v2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1zm2 0h6V8a3 3 0 0 0-6 0v2z'/%3E%3C/svg%3E") center/contain no-repeat}
.tl-note{position:relative;display:flex;align-items:center;gap:14px;min-height:92px;padding:14px 20px;border:1px solid #d8e6fb;border-radius:24px;background:linear-gradient(100deg,#e3eeff,#eef5ff 60%,#e6f0ff);overflow:hidden}
.tl-note::before{content:"";position:absolute;inset:0;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M0 72C80 32 160 92 262 62S362 32 400 52V100H0z' fill='%23fff' opacity='.55'/%3E%3Cpath d='M0 88C100 52 200 100 300 77S380 62 400 72V100H0z' fill='%23fff' opacity='.5'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.tl-bulb{flex:none;position:relative;z-index:1;width:48px;height:48px}.tl-bulb svg{width:100%;height:100%}
.tl-nt{position:relative;z-index:1;min-width:0;max-width:520px}
.tl-nt b{display:block;font-size:17.5px;font-weight:700;color:#0b2a6f;margin-bottom:2px}
.tl-nt p{margin:0;font-size:14px;line-height:1.5;color:#4a5d88}
.tl-sky{position:absolute;right:0;bottom:0;height:100%;max-height:112px;width:auto;pointer-events:none}
.tl-dom{position:absolute;z-index:2;right:24px;bottom:18px;display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:99px;background:linear-gradient(180deg,#123a8f,#0b2a6f);color:#fff;font-size:14.5px;font-weight:700;box-shadow:0 12px 22px -12px rgba(6,20,58,.9)}
.tl-dom svg{width:19px;height:19px}
html[data-theme=dark] .tl-note{background:linear-gradient(100deg,#16295a,#111c3d);border-color:#233463}html[data-theme=dark] .tl-nt b{color:#fff}html[data-theme=dark] .tl-nt p{color:var(--mut)}html[data-theme=dark] .tl-note::before{opacity:.12}html[data-theme=dark] .tl-dom{background:#1f62f2}
@keyframes tldIn{from{opacity:0;transform:translateY(8px) scale(.94)}}
@keyframes tldPop{0%{transform:scale(.93)}55%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes tldShim{from{background-position:120% 0}to{background-position:-120% 0}}
@keyframes tldSpin{to{transform:rotate(360deg)}}
@keyframes tldRing{0%{box-shadow:0 0 0 0 rgba(19,160,91,.55)}70%,100%{box-shadow:0 0 0 7px rgba(19,160,91,0)}}
@media(max-width:1180px){.tldg{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:960px){.tldg{grid-template-columns:repeat(3,minmax(0,1fr))}.tl-ttl{flex-basis:100%;border-right:0;padding-right:0}.tl-pills{flex-basis:100%}.tl-note .tl-sky{opacity:.55}.tls small{white-space:normal;overflow:visible;text-overflow:clip}}
@media(max-width:640px){.tl-ring{width:60px}.tl-ring span{width:38px;height:38px;font-size:11.5px}.tl-ring span svg{width:21px;height:21px}.tl-info{padding:10px 12px}.tl-ttl{font-size:16px}.tl-big{font-size:27px}.tl-pills{gap:8px}.tls{flex-direction:column;align-items:flex-start;gap:6px;padding:9px 10px;overflow:hidden}.tls small{display:none}.tls strong{font-size:13px;white-space:normal;line-height:1.15}.tls b{display:block;font-size:21px;line-height:1.1}.tls>svg{width:26px;height:26px;padding:6px}.tl-list{padding:12px}.tl-tab{font-size:14px;padding:9px 38px 9px 12px;min-width:0}.tl-rf{flex:none;padding:8px 10px;font-size:0;gap:0}.tl-rf svg{width:20px;height:20px}.tl-note{padding:14px;min-height:0;flex-wrap:wrap;padding-bottom:64px}.tl-note .tl-sky{display:none}.tl-dom{left:14px;right:auto;bottom:14px}}
@media(max-width:560px){.tldg{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.tl-ch{display:none}.tldc{gap:8px;padding:7px 8px;min-height:48px}.tl-ic{width:30px;height:30px}.tl-ic svg{width:16px;height:16px}.tldc b{font-size:14px;letter-spacing:-.2px}.tldc em{font-size:12px}}
@media(prefers-reduced-motion:reduce){.tldc,.tldc .tl-ic,.tl-spin,.tl-done .tl-ring span{animation:none!important}.tldc{transition:none}.tl-ring{transition:none}}

/* Tab Mobile / Desktop pada bagian Kecepatan */
.spt{display:inline-flex;gap:4px;padding:4px;border-radius:12px;background:var(--bd);margin-bottom:12px}
.spt button{border:0;background:transparent;color:var(--mut);font:inherit;font-weight:700;font-size:13.5px;padding:7px 16px;border-radius:9px;cursor:pointer}
.spt button.on{background:#fff;color:#1f62f2;box-shadow:0 1px 4px rgba(15,40,100,.15)}
html[data-theme=dark] .spt button.on{background:#1b2742;color:#7fb0ff}

/* Daftar semua alat (tautan internal beranda) */
.alat-g{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:none}
.alat-g li{margin:0}
.alat-g a{display:block;height:100%;padding:14px 16px;border:1px solid var(--bd);border-radius:14px;background:var(--sf);color:var(--tx);text-decoration:none;transition:border-color .15s,transform .15s}
.alat-g a:hover,.alat-g a:focus-visible{border-color:var(--pri);transform:translateY(-1px)}
.alat-g b{display:block;font-size:15.5px;font-weight:700;color:var(--pri);margin-bottom:4px}
.alat-g span{display:block;font-size:13.5px;line-height:1.55;color:var(--mut)}
.seo-c p a,.seo-c ol a{color:var(--pri);text-decoration:underline;text-underline-offset:2px}
@media(max-width:900px){.alat-g{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.alat-g{grid-template-columns:1fr}}

/* FAQ dua kolom, buka/tutup dengan tanda + / - */
.faqg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start;margin-top:14px}
.faqc{display:flex;flex-direction:column;gap:12px;min-width:0}
.faqg .fq{border:1px solid var(--bd);border-radius:14px;background:var(--sf);padding:0;transition:border-color .18s,box-shadow .18s}
.faqg .fq:hover{border-color:var(--pri)}
.faqg .fq[open]{border-color:var(--pri);box-shadow:0 8px 20px -14px rgba(31,98,242,.55)}
.faqg .fq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:14px 16px;font-size:15.5px;font-weight:700;line-height:1.4;color:var(--hd);border-radius:14px}
.faqg .fq summary::-webkit-details-marker{display:none}
.faqg .fq summary:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
.faqg .fq summary::after{content:"";flex:none;margin-left:auto;width:28px;height:28px;border-radius:50%;color:var(--pri);background:linear-gradient(currentColor,currentColor) center/12px 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 12px no-repeat,var(--pri2);transition:background-color .18s}
.faqg .fq[open] summary::after{background:linear-gradient(#fff,#fff) center/12px 2px no-repeat,var(--pri)}
.faqg .fq p{margin:0;padding:0 16px 16px;max-width:none;font-size:15px;line-height:1.7;color:var(--tx)}
@media(max-width:760px){.faqg{grid-template-columns:1fr;gap:12px}.faqg .fq summary{font-size:15px;padding:13px 14px}.faqg .fq p{padding:0 14px 14px}}

/* ===== Ringkasan: kartu utama hasil pengecekan ===== */
#sec-ringkasan{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,color-mix(in srgb,var(--pri) 6%,var(--sf)),var(--sf) 200px)}
#sec-ringkasan::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;z-index:1;background:linear-gradient(90deg,#1f62f2,#38a1ff,#13a05b,#1f62f2);background-size:300% 100%;animation:rsBar 6s linear infinite}
#sec-ringkasan::after{content:"";position:absolute;right:-70px;top:-90px;width:280px;height:280px;border-radius:50%;z-index:-1;pointer-events:none;background:radial-gradient(circle,rgba(56,161,255,.22),transparent 68%);animation:rsGlow 7s ease-in-out infinite alternate}
.rico{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:9px;color:#fff;background:linear-gradient(135deg,#1f62f2,#38a1ff);box-shadow:0 8px 16px -8px rgba(31,98,242,.75)}
.rico svg{width:16px;height:16px}

.rs-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.rs-av{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:14px;font-weight:800;font-size:24px;line-height:1;font-family:inherit;font-style:normal;color:#fff;background:linear-gradient(135deg,#1f62f2,#38a1ff);box-shadow:0 12px 22px -12px rgba(31,98,242,.85),inset 0 1px 0 rgba(255,255,255,.35)}
.rs-dn{display:flex;flex-direction:column;gap:2px;min-width:0}
.rs-dn small{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.rs-top h2{margin:0;font-size:clamp(22px,3vw,30px);font-weight:800;letter-spacing:-.4px;line-height:1.15;color:var(--hd);overflow-wrap:anywhere}
.rs-top .rs-chip{font-size:13.5px;padding:7px 15px}

.rs-chip{display:inline-flex;align-items:center;gap:7px;transition:transform .2s}
.rs-chip:hover{transform:translateY(-1px)}
.rs-chip::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:currentColor}
.rs-top .rs-chip.good::before,.rs-top .rs-chip.warn::before,.rs-top .rs-chip.bad::before{animation:rsPulse 2s ease-out infinite}
.rs-chip.load::before{width:11px;height:11px;background:none;border:2px solid currentColor;border-right-color:transparent;animation:rsSpin .7s linear infinite}

.rs-grid{gap:14px}
.rs-t{--ac:#1f62f2;position:relative;overflow:hidden;padding:14px 16px;border-radius:12px;background:linear-gradient(145deg,color-mix(in srgb,var(--ac) 11%,var(--sf)),var(--sf) 78%);border:1px solid color-mix(in srgb,var(--ac) 22%,var(--bd));transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s}
#rs-age{--ac:#7c4dff}#rs-reg{--ac:#0ea5e9}
.rs-t.rs-ok{--ac:var(--good)}.rs-t.rs-warn{--ac:var(--warn)}.rs-t.rs-bad{--ac:var(--bad)}
.rs-t::after{content:"";position:absolute;right:-28px;bottom:-34px;width:96px;height:96px;border-radius:50%;pointer-events:none;background:color-mix(in srgb,var(--ac) 10%,transparent);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.rs-t:hover{transform:translateY(-3px);border-color:var(--ac);box-shadow:0 16px 28px -18px color-mix(in srgb,var(--ac) 70%,transparent)}
.rs-t:hover::after{transform:scale(1.5)}
.rs-th{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.rs-ti{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;font-style:normal;color:var(--ac);background:color-mix(in srgb,var(--ac) 16%,transparent);transition:transform .3s cubic-bezier(.2,.9,.3,1.3)}
.rs-ti svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rs-t:hover .rs-ti{transform:rotate(-8deg) scale(1.1)}
.rs-t .rs-th span{display:block;font-size:12.5px;font-weight:600;color:var(--mut)}
.rs-t b{position:relative;z-index:1;font-size:18px;font-weight:800;letter-spacing:-.2px;font-variant-numeric:tabular-nums}
.rs-t small{position:relative;z-index:1}
.rs-sk{display:block;width:70%;height:20px;border-radius:6px;background:linear-gradient(90deg,var(--bd) 25%,color-mix(in srgb,var(--bd) 35%,var(--sf)) 50%,var(--bd) 75%) 0 0/200% 100%;animation:rsShim 1.3s linear infinite}
.rs-bar{height:7px;background:color-mix(in srgb,var(--ac) 18%,transparent)}
.rs-bar u{position:relative;overflow:hidden;background:var(--ac)}
.rs-bar u::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent) -100% 0/60% 100% no-repeat;animation:rsShine 2.2s ease-in-out infinite}

.rs-chips{gap:9px;margin-top:14px}
.rs-prog{height:34px;border-radius:99px;background:color-mix(in srgb,var(--pri) 12%,var(--sf))}
.rs-prog i{opacity:.4;border-radius:99px}
.rs-prog i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent) -100% 0/50% 100% no-repeat;animation:rsShine 1.4s linear infinite}
.rs-prog span{line-height:34px;padding-left:38px}
.rs-prog span::before{content:"";position:absolute;left:14px;top:10px;width:14px;height:14px;border-radius:50%;border:2px solid var(--pri);border-right-color:transparent;animation:rsSpin .7s linear infinite}

/* animasi masuk: hanya saat isi kotak/kapsul baru muncul atau berubah */
.rs-top.rs-new,.rs-t.rs-new{animation:rsUp .6s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i,0)*80ms)}
.rs-chip.rs-new{animation:rsPop .45s cubic-bezier(.2,.9,.3,1.3) backwards}
.rs-t.rs-new .rs-bar u{animation:rsFill 1.2s cubic-bezier(.2,.8,.2,1) .3s backwards}
.rs-t.rs-new .rs-ti{animation:rsPop .5s cubic-bezier(.2,.9,.3,1.3) calc(var(--i,0)*80ms + .15s) backwards}

@keyframes rsUp{from{opacity:0;transform:translateY(14px) scale(.97)}}
@keyframes rsPop{0%{opacity:0;transform:scale(.7)}}
@keyframes rsFill{from{width:0}}
@keyframes rsShine{to{background-position:260% 0}}
@keyframes rsShim{to{background-position:-200% 0}}
@keyframes rsSpin{to{transform:rotate(360deg)}}
@keyframes rsBar{to{background-position:300% 0}}
@keyframes rsGlow{to{transform:translate(-36px,24px) scale(1.18)}}
@keyframes rsPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 55%,transparent)}70%,100%{box-shadow:0 0 0 8px transparent}}
@media(max-width:640px){.rs-av{width:44px;height:44px;font-size:20px;border-radius:12px}.rs-top{gap:11px}.rs-t{padding:12px 13px}.rs-t b{font-size:16.5px}}
@media(prefers-reduced-motion:reduce){#sec-ringkasan::before,#sec-ringkasan::after,.rs-top,.rs-t,.rs-t .rs-ti,.rs-chip,.rs-chip::before,.rs-sk,.rs-bar u,.rs-bar u::after,.rs-prog i::after,.rs-prog span::before{animation:none!important}.rs-t,.rs-t::after,.rs-ti{transition:none}}

/* ===== Kecepatan: gaya Google PageSpeed Insights ===== */
.psi{--gb4:#4285f4;--gr:#ea4335;--gy:#fbbc05;--gg:#34a853}
.psi .psi-good,.psi-ic.psi-good,.psi-g.psi-good,.psi-cwv.psi-good{--gc:#0cce6b;--gx:#018642;--gf:rgba(12,206,107,.1)}
.psi .psi-warn,.psi-ic.psi-warn,.psi-g.psi-warn,.psi-cwv.psi-warn{--gc:#ffa400;--gx:#c33300;--gf:rgba(255,164,0,.1)}
.psi .psi-bad,.psi-ic.psi-bad,.psi-g.psi-bad,.psi-cwv.psi-bad{--gc:#ff4e42;--gx:#eb0f00;--gf:rgba(255,78,66,.1)}
html[data-theme=dark] .psi .psi-good,html[data-theme=dark] .psi-g.psi-good{--gx:#4ee0a0}
html[data-theme=dark] .psi .psi-warn,html[data-theme=dark] .psi-g.psi-warn{--gx:#ffb74d}
html[data-theme=dark] .psi .psi-bad,html[data-theme=dark] .psi-g.psi-bad{--gx:#ff7a70}

/* tab Mobile / Desktop seperti PSI */
.spt{display:flex;gap:0;padding:0;border-radius:0;background:none;border-bottom:1px solid var(--bd);margin-bottom:18px}
.spt button{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;margin-bottom:-1px;border-radius:0;border-bottom:3px solid transparent;color:var(--mut);font-size:14px;font-weight:600;transition:color .2s,border-color .2s,background .2s}
.spt button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.spt button:hover{color:#1a73e8;background:rgba(26,115,232,.06)}
.spt button.on,html[data-theme=dark] .spt button.on{background:none;box-shadow:none;color:#1a73e8;border-bottom-color:#1a73e8}
html[data-theme=dark] .spt button.on,html[data-theme=dark] .spt button:hover{color:#8ab4f8;border-bottom-color:#8ab4f8}
.psi-wait{display:flex;align-items:center;gap:10px;color:var(--mut);font-size:14px;margin:6px 0}
.psi-wait i{flex:none;width:18px;height:18px;border-radius:50%;border:3px solid #e8eaed;border-top-color:#4285f4;border-right-color:#ea4335;border-bottom-color:#34a853;border-left-color:#fbbc05;animation:rsSpin 1s linear infinite}

.psi{animation:psiIn .5s ease backwards}
.psi-card{border:1px solid var(--bd);border-radius:12px;background:var(--sf);padding:22px 18px 26px}
.psi-cats{display:flex;justify-content:center;flex-wrap:wrap;gap:18px 40px}
.psi-cat{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:76px;text-align:center}
.psi-cat>span{font-size:12.5px;font-weight:600;color:var(--tx);line-height:1.3}

/* gauge */
.psi-g{--s:54px;position:relative;width:var(--s);height:var(--s);flex:none}
.psi-g.lg{--s:124px}
.psi-g svg{display:block;width:100%;height:100%}
.psi-g .gt{fill:var(--gf);stroke:color-mix(in srgb,var(--gc) 22%,transparent);stroke-width:8}
.psi-g .ga{fill:none;stroke:var(--gc);stroke-width:8;stroke-dasharray:var(--c);stroke-dashoffset:var(--o);animation:psiGauge 1.2s cubic-bezier(.2,.8,.2,1) backwards}
.psi-g.lg .gt,.psi-g.lg .ga{stroke-width:7}
.psi-g span{position:absolute;inset:0;display:grid;place-items:center;font-family:'Roboto Mono',ui-monospace,Menlo,Consolas,monospace;font-weight:500;font-size:calc(var(--s)*.34);color:var(--gx);font-variant-numeric:tabular-nums}
.psi-g.lg span{font-size:calc(var(--s)*.36)}

.psi-main{display:grid;grid-template-columns:1fr 1fr;align-items:center;margin-top:22px;padding-top:26px;border-top:1px solid var(--bd)}
.psi-main.one{grid-template-columns:1fr}
.psi-big{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 22px}
.psi-title{margin-top:12px;font-size:22px;font-weight:500;color:var(--hd)}
.psi-big p{margin:8px 0 0;max-width:340px;font-size:13.5px;line-height:1.55;color:var(--mut)}
.psi-leg{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin-top:14px;font-size:12.5px;color:var(--mut)}
.psi-leg span{display:inline-flex;align-items:center;gap:6px}
.psi-shot{display:flex;justify-content:center;padding:0 22px;border-left:1px solid var(--bd)}
.psi-shot img{display:block;max-width:100%;max-height:300px;width:auto;height:auto;border:1px solid #dadce0;border-radius:4px;background:#fff;box-shadow:0 2px 10px rgba(60,64,67,.18);animation:psiIn .6s .2s ease backwards}

/* penanda status ala PSI: lingkaran hijau, kotak oranye, segitiga merah */
.psi-ic{display:inline-block;flex:none;width:10px;height:10px;background:var(--gc)}
.psi-ic.psi-good{border-radius:50%}
.psi-ic.psi-warn{border-radius:1px}
.psi-ic.psi-bad{width:11px;height:10px;clip-path:polygon(50% 0,100% 100%,0 100%)}

.psi-h{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:26px 0 4px;font-size:15px;font-weight:700;color:var(--hd)}
.psi-h small{font-size:12.5px;font-weight:500;color:var(--mut)}
.psi-cwv{margin-left:auto;padding:3px 11px;border-radius:99px;font-size:12px;font-weight:700;color:var(--gx);background:var(--gf)}
.psi-m{display:grid;grid-template-columns:1fr 1fr;gap:0 36px}
.psi-mt{padding:14px 0 12px;border-top:1px solid var(--bd);transition:background .2s,padding .2s}
.psi-mt:hover{background:var(--gf);padding-left:10px;padding-right:10px}
.psi-ml{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--tx)}
.psi-mt .psi-ic{background:var(--gc)}
.psi-mt.psi-good .psi-ic{border-radius:50%}.psi-mt.psi-warn .psi-ic{border-radius:1px}
.psi-mt.psi-bad .psi-ic{width:11px;clip-path:polygon(50% 0,100% 100%,0 100%)}
.psi-mt b{display:block;margin:2px 0 0 19px;font-family:Roboto,'Plus Jakarta Sans',system-ui,sans-serif;font-size:28px;font-weight:400;line-height:1.25;letter-spacing:-.3px;color:var(--gx)}
.psi-op{list-style:none;margin:0;padding:0}
.psi-op li{display:flex;align-items:center;gap:10px;padding:11px 4px;border-top:1px solid var(--bd);font-size:14px;color:var(--tx)}
.psi-op li span{flex:1;min-width:0;overflow-wrap:anywhere}
.psi-op li b{flex:none;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:700;color:#c33300;background:rgba(255,164,0,.14)}
html[data-theme=dark] .psi-op li b{color:#ffb74d}
.psi-src{display:flex;align-items:center;gap:10px;margin:20px 0 0;font-size:12.5px;color:var(--mut)}
.gdots{display:inline-flex;gap:3px;flex:none}
.gdots i{width:7px;height:7px;border-radius:50%;background:var(--gb4);animation:psiDot 1.6s ease-in-out infinite}
.gdots i:nth-child(2){background:var(--gr);animation-delay:.12s}.gdots i:nth-child(3){background:var(--gy);animation-delay:.24s}.gdots i:nth-child(4){background:var(--gg);animation-delay:.36s}

@keyframes psiGauge{from{stroke-dashoffset:var(--c)}}
@keyframes psiIn{from{opacity:0;transform:translateY(10px)}}
@keyframes psiDot{0%,100%{transform:translateY(0)}40%{transform:translateY(-4px)}}
@media(max-width:760px){.psi-main{grid-template-columns:1fr;gap:26px}.psi-shot{border-left:0;padding:0 8px}.psi-m{grid-template-columns:1fr}}
@media(max-width:560px){.psi-cats{gap:16px 22px}.psi-card{padding:18px 10px 22px}.psi-g.lg{--s:108px}.psi-mt b{font-size:24px}.spt button{padding:11px 16px}}
@media(prefers-reduced-motion:reduce){.psi,.psi-g .ga,.psi-shot img,.gdots i,.psi-wait i{animation:none!important}}

/* judul bagian Kecepatan */
.psi-hd{display:inline-flex;align-items:center;gap:10px}
.psi-hd img{flex:none;width:32px;height:32px;display:block}
.psi-hd a{font-family:'Product Sans','Google Sans','DM Sans',Arial,sans-serif;font-size:22px;font-weight:400;line-height:24px;letter-spacing:0;color:#5f6368;text-decoration:none;transition:color .2s}
.psi-hd a:hover,.psi-hd a:focus-visible{color:#1a73e8;outline:0}
html[data-theme=dark] .psi-hd a{color:#9aa0a6}
html[data-theme=dark] .psi-hd a:hover{color:#8ab4f8}
@media(max-width:560px){.psi-hd a{font-size:19px}.psi-hd img{width:28px;height:28px}}

/* ===== Kartu "Hasil Analisis Terbaru" di beranda (data nyata + tangkapan layar desktop) ===== */
.c-ex .exrow>div:last-child{min-width:0;flex:1}
.c-ex dd{min-width:0}
.c-ex dd .exv{display:inline-block;max-width:calc(100% - 34px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.c-ex .badge.warn{background:#fff1d6;color:#b36200;border-color:#f3c77a}
.c-ex .badge.bad{background:#fde2e2;color:#c02424;border-color:#f3a3a3}
.c-ex .badge.load{background:#e6effd;color:#1f62f2;border-color:#bcd0f6}
html[data-theme=dark] .c-ex .badge.load{background:#16295a;color:#8fb4ff;border-color:#2c4488}
.c-ex .badge svg.ex-spin{animation:exspin .9s linear infinite}
.c-ex[data-tone=warn] dd:first-of-type::after{background:#d97706;animation:none}
.c-ex[data-tone=bad] dd:first-of-type::after{background:#dc2626;animation:none}
.c-ex[data-tone=load] dd:first-of-type::after{background:#7a9be0;animation:none}
.exth{flex-shrink:0}
.exshot{position:relative;width:112px;aspect-ratio:160/124;background:#fff;border-radius:8px;padding:4px;box-shadow:0 6px 16px rgba(20,50,110,.22);display:flex;flex-direction:column;gap:3px;overflow:hidden;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.c-ex:hover .exshot{transform:scale(1.05) rotate(-1.5deg)}
.exshot b{display:block;height:5px;flex-shrink:0;border-radius:2px;background:#eef2f8}
.exshot img{flex:1;min-height:0;width:100%;display:block;object-fit:cover;object-position:top center;border-radius:3px;background:#eef2f8}
.exsk{flex:1;border-radius:3px;background:linear-gradient(100deg,#e8eef9 30%,#f6f9ff 50%,#e8eef9 70%);background-size:200% 100%;animation:exsh 1.3s linear infinite}
.exshot.nn span{flex:1;display:grid;place-items:center;text-align:center;padding:4px;border-radius:3px;background:#f3f6fc;color:#7a89ab;font-size:9.5px;line-height:1.25}
html[data-theme=dark] .exshot{background:#1a2750}
html[data-theme=dark] .exshot b{background:#2b3a6b}
html[data-theme=dark] .exsk{background:linear-gradient(100deg,#22325f 30%,#2d3f72 50%,#22325f 70%);background-size:200% 100%}
html[data-theme=dark] .exshot.nn span{background:#22325f;color:#9db0d8}
@keyframes exspin{to{transform:rotate(360deg)}}
@keyframes exsh{to{background-position:-200% 0}}
@media(max-width:640px){.exshot{width:150px}}
@media(prefers-reduced-motion:reduce){.exsk,.c-ex .badge svg.ex-spin,.exshot{animation:none!important;transition:none}}

/* ===== Hamburger: berborder, dan berubah jadi X saat menu terbuka ===== */
.burger{box-sizing:border-box;border:1.5px solid #c9daf8;border-radius:12px;background:linear-gradient(180deg,#fff,#f0f5ff);color:var(--pri);box-shadow:0 2px 8px rgba(31,98,242,.12),inset 0 1px 0 #fff;transition:background .25s,border-color .25s,color .25s,transform .15s,box-shadow .25s}
.burger svg{width:24px;height:24px}
.burger:hover{border-color:var(--pri);background:var(--pri2)}
.burger:active{transform:scale(.93)}
.burger:focus-visible{outline:2px solid var(--pri);outline-offset:3px}
.burger path{transform-box:view-box;transform-origin:center;transition:transform .32s cubic-bezier(.4,0,.2,1),opacity .2s}
.burger[aria-expanded=true]{background:var(--pri);border-color:var(--pri);color:#fff;box-shadow:0 4px 12px rgba(31,98,242,.35)}
.burger[aria-expanded=true] .b1{transform:rotate(45deg) translateY(5px)}
.burger[aria-expanded=true] .b2{opacity:0;transform:scaleX(.2)}
.burger[aria-expanded=true] .b3{transform:rotate(-45deg) translateY(-5px)}
html[data-theme=dark] .burger{background:linear-gradient(180deg,#16244f,#111c3d);border-color:#2c4180;color:#cfe0ff;box-shadow:0 2px 8px rgba(0,0,0,.35)}
html[data-theme=dark] .burger:hover{border-color:#5b86ff}
html[data-theme=dark] .burger[aria-expanded=true]{background:var(--pri);border-color:var(--pri);color:#fff}

/* ===== Kartu Hasil Analisis: lebar proporsional di HP & tablet ===== */
@media(max-width:1180px){
  .c-ex .exrow{gap:18px;align-items:center}
  .c-ex .exth{flex:0 0 46%;max-width:420px}
  .c-ex .exth>.thumb{width:100%;height:auto}
  .exshot{width:100%;aspect-ratio:auto;padding:0;gap:0;border-radius:12px;border:1px solid #d3e1fa;box-shadow:0 10px 26px rgba(20,50,110,.2)}
  .c-ex:hover .exshot{transform:scale(1.015)}
  .exshot b{position:relative;height:22px;border-radius:0;background:#eef3fc}
  .exshot b::before{content:'';position:absolute;left:10px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#ff6b6b;box-shadow:10px 0 #ffd24d,20px 0 #4cd964}
  .exshot b::after{content:'';position:absolute;left:46px;right:10px;top:5px;bottom:5px;border-radius:6px;background:#fff;box-shadow:inset 0 0 0 1px #dbe5f7}
  .exshot img,.exsk,.exshot.nn span{flex:none;width:100%;height:auto;aspect-ratio:3/2;border-radius:0}
  .exshot.nn span{font-size:13px}
  .c-ex .exrow>div:last-child{min-width:0}
  .c-ex .badge{font-size:14.5px;margin-bottom:10px}
  .c-ex dl{font-size:14.5px;gap:7px 14px;background:rgba(255,255,255,.72);border:1px solid #dbe7fb;border-radius:12px;padding:11px 14px}
  html[data-theme=dark] .exshot{border-color:var(--bd)}
  html[data-theme=dark] .c-ex dl{background:rgba(255,255,255,.04);border-color:var(--bd)}
  html[data-theme=dark] .exshot b::after{background:#111c3d;box-shadow:inset 0 0 0 1px #2b3a6b}
}
@media(max-width:640px){
  .c-ex .exrow{flex-direction:column;align-items:stretch;gap:14px}
  .c-ex .exth{flex:none;max-width:none;width:100%}
  .c-ex>a{display:flex;justify-content:center;width:100%;margin-top:14px;padding:12px 14px;border-radius:12px;background:#e3edff;border:1.5px solid #bcd0f6}
  html[data-theme=dark] .c-ex>a{background:var(--pri2);border-color:var(--bd)}
}

/* ===== Footer: latar lebih hidup + daun beranimasi ===== */
.wave path{fill:var(--navy)}
.fin{--n2:#0d2f7d;background:
  radial-gradient(540px 250px at 6% 270px,rgba(54,120,255,.30),transparent 70%),
  radial-gradient(520px 320px at 100% 100%,rgba(42,157,143,.30),transparent 70%),
  linear-gradient(180deg,var(--navy) 0,var(--n2) 100%)}
html[data-theme=dark] .fin{--n2:#0a1f55}
.fin::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(rgba(255,255,255,.1) 1px,transparent 1.6px) 0 0/22px 22px;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 80px);mask-image:linear-gradient(180deg,transparent 0,#000 80px)}
.fin::after{content:'';position:absolute;z-index:0;pointer-events:none;width:320px;height:320px;right:-90px;top:38%;border-radius:50%;background:radial-gradient(circle,rgba(111,214,120,.2),transparent 68%);animation:forb 9s ease-in-out infinite alternate}
.copy{background:rgba(3,10,40,.3)}
.copy::before{content:'';position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(120,190,255,.55),rgba(111,214,120,.55),transparent)}
.fgrid a:not(.brand){transition:transform .2s ease,opacity .2s ease}
.fgrid a:not(.brand):hover{transform:translateX(4px);opacity:1}
.soc a{transition:transform .25s cubic-bezier(.2,.8,.2,1),filter .25s}
.soc a:hover{transform:translateY(-4px) scale(1.08);filter:drop-shadow(0 6px 8px rgba(0,0,0,.35))}
.lf{transform-origin:50% 100%;animation:lsway 6.5s ease-in-out infinite alternate}
.l2{animation-delay:-3.2s;animation-direction:alternate-reverse}
.finfo{position:relative}
.lfm{display:none}
.lfm .lv{transform-box:view-box;transform-origin:60px 108px;animation:lsw 5s ease-in-out infinite alternate}
.lfm .v1{animation-duration:4.6s;animation-delay:-1s}.lfm .v2{animation-duration:5.4s;animation-delay:-2.4s}.lfm .v3{animation-duration:6s;animation-delay:-.4s}.lfm .v4{animation-duration:4.9s;animation-delay:-3.1s}.lfm .v5{animation-duration:5.7s;animation-delay:-1.8s}
.fall{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;container-type:size}
.fall i{position:absolute;top:0;width:12px;height:12px;border-radius:0 100% 0 100%;background:linear-gradient(135deg,#9be58f,#2a9d8f);opacity:0;animation:lfall 18s linear infinite;will-change:transform}
.fall i:nth-child(1){left:6%;animation-duration:17s;animation-delay:-2s}
.fall i:nth-child(2){left:17%;width:9px;height:9px;animation-duration:22s;animation-delay:-11s}
.fall i:nth-child(3){left:29%;width:14px;height:14px;animation-duration:19s;animation-delay:-6s}
.fall i:nth-child(4){left:41%;width:10px;height:10px;animation-duration:24s;animation-delay:-15s}
.fall i:nth-child(5){left:53%;animation-duration:18s;animation-delay:-9s}
.fall i:nth-child(6){left:64%;width:15px;height:15px;animation-duration:21s;animation-delay:-4s}
.fall i:nth-child(7){left:76%;width:9px;height:9px;animation-duration:16s;animation-delay:-13s}
.fall i:nth-child(8){left:87%;width:13px;height:13px;animation-duration:23s;animation-delay:-7s}
.fall i:nth-child(9){left:94%;width:10px;height:10px;animation-duration:20s;animation-delay:-17s}
@keyframes lfall{0%{transform:translate3d(0,-30px,0) rotate(0);opacity:0}8%{opacity:.6}25%{transform:translate3d(26px,170px,0) rotate(90deg)}50%{transform:translate3d(-18px,340px,0) rotate(200deg)}75%{transform:translate3d(24px,510px,0) rotate(290deg);opacity:.5}100%{transform:translate3d(-6px,680px,0) rotate(380deg);opacity:0}}
@supports (height:1cqh){@keyframes lfall{0%{transform:translate3d(0,-30px,0) rotate(0);opacity:0}8%{opacity:.6}25%{transform:translate3d(26px,25cqh,0) rotate(90deg)}50%{transform:translate3d(-18px,50cqh,0) rotate(200deg)}75%{transform:translate3d(24px,75cqh,0) rotate(290deg);opacity:.5}100%{transform:translate3d(-6px,100cqh,0) rotate(380deg);opacity:0}}}
@keyframes lsway{from{transform:rotate(-2.4deg)}to{transform:rotate(2.4deg)}}
@keyframes lsw{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
@keyframes forb{from{transform:translate(0,0) scale(1);opacity:.7}to{transform:translate(-40px,-30px) scale(1.15);opacity:1}}
@media(max-width:1180px){
  .lfm{display:block;position:absolute;right:0;bottom:0;width:min(44%,130px);height:auto;z-index:0;pointer-events:none}
  .nl{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:18px 18px 20px}
}
@media(prefers-reduced-motion:reduce){.lf,.lfm .lv,.fall i,.fin::after{animation:none!important}.fall{display:none}}

/* ===== Badge hero + latar hero beranimasi (netral, tanpa biru) ===== */
.pub main{position:relative;z-index:0}
.pill{position:relative;overflow:hidden;border:1px solid #cfe0fa;box-shadow:0 4px 14px rgba(31,98,242,.14)}
.pill::after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);animation:pshine 4.5s ease-in-out infinite}
.pill svg{animation:pls 2.6s ease-in-out infinite}
html[data-theme=dark] .pill{border-color:#2c4488}
html[data-theme=dark] .pill::after{background:linear-gradient(100deg,transparent,rgba(143,180,255,.28),transparent)}
.hbg{position:absolute;left:0;right:0;top:0;height:780px;z-index:-1;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent);mask-image:linear-gradient(180deg,#000 62%,transparent)}
.hb-o{position:absolute;border-radius:50%;will-change:transform}
.hb-o.o2{width:min(520px,100vw);height:min(520px,100vw);right:-150px;top:10px;background:radial-gradient(circle,rgba(110,200,165,.15),transparent 68%);animation:horb 19s ease-in-out -6s infinite alternate-reverse}
.hb-o.o4{width:min(460px,95vw);height:min(460px,95vw);left:-140px;top:300px;background:radial-gradient(circle,rgba(148,163,184,.14),transparent 68%);animation:horb 22s ease-in-out -9s infinite alternate}
.hb-l{position:absolute;inset:0;width:100%;height:100%}
.hb-l path{fill:none;stroke:#94a3b8;stroke-opacity:.26;stroke-width:1.2;vector-effect:non-scaling-stroke}
.hb-l .d{stroke-dasharray:3 11;stroke-linecap:round;stroke-opacity:.38;animation:hdash 26s linear infinite}
.hb-l g{animation:hdrift 20s ease-in-out infinite alternate}
.hb-l .g2{animation-duration:26s;animation-delay:-8s}
.hb-l .g3{animation-duration:32s;animation-delay:-14s}
html[data-theme=dark] .hb-l path{stroke:#9db0d8;stroke-opacity:.2}
html[data-theme=dark] .hb-l .d{stroke-opacity:.3}
html[data-theme=dark] .hb-o.o4{background:radial-gradient(circle,rgba(148,163,184,.1),transparent 68%)}
@keyframes pshine{0%,55%{left:-60%}100%{left:130%}}
@keyframes horb{to{transform:translate(60px,40px) scale(1.14)}}
@keyframes hdash{to{stroke-dashoffset:-280}}
@keyframes hdrift{from{transform:translate(-26px,8px)}to{transform:translate(26px,-8px)}}
@media(max-width:640px){.hbg{height:700px}}

/* ===== Footer HP: "Ikuti Kami" pindah ke bawah Informasi + ikon sosmed lebih cantik ===== */
.fcol{display:contents}
.fsoc{position:relative}
.lfs{display:none}
.soc{display:flex;flex-wrap:wrap;gap:9px}
.soc a{width:36px;height:36px;margin:0!important;display:block;border-radius:12px;box-shadow:0 5px 12px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.24);animation:sbob 3.8s ease-in-out infinite;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,filter .25s}
.soc a:nth-child(2){animation-delay:-.9s}.soc a:nth-child(3){animation-delay:-1.8s}.soc a:nth-child(4){animation-delay:-2.7s}
.soc svg{width:100%;height:100%;border-radius:12px}
.soc a:hover{transform:translateY(-4px) rotate(-5deg) scale(1.1);filter:none;animation-play-state:paused}
.soc a.s-youtube:hover{box-shadow:0 10px 22px rgba(255,70,50,.55),inset 0 0 0 1px rgba(255,255,255,.35)}
.soc a.s-facebook:hover{box-shadow:0 10px 22px rgba(40,130,255,.6),inset 0 0 0 1px rgba(255,255,255,.35)}
.soc a.s-x:hover{box-shadow:0 10px 22px rgba(180,190,210,.4),inset 0 0 0 1px rgba(255,255,255,.4)}
.soc a.s-telegram:hover{box-shadow:0 10px 22px rgba(40,170,230,.6),inset 0 0 0 1px rgba(255,255,255,.35)}
.soc a:focus-visible{outline:2px solid #9be58f;outline-offset:3px}
@keyframes sbob{50%{translate:0 -3px}}
.lfs .lv{transform-box:view-box;transform-origin:60px 108px;animation:lsw 5s ease-in-out infinite alternate}
.lfs .v1{animation-duration:4.6s;animation-delay:-1s}.lfs .v2{animation-duration:5.4s;animation-delay:-2.4s}.lfs .v3{animation-duration:6s;animation-delay:-.4s}.lfs .v4{animation-duration:4.9s;animation-delay:-3.1s}.lfs .v5{animation-duration:5.7s;animation-delay:-1.8s}
@media(max-width:640px){
  .fcol{display:flex;flex-direction:column;gap:22px;min-width:0}
  .finfo .lfm{display:none}
  .soc a{width:38px;height:38px}
  .lfs{display:block;position:absolute;right:0;bottom:calc(100% - 40px);width:min(104px,30vw);height:auto;z-index:-1;pointer-events:none}
}
@media(prefers-reduced-motion:reduce){.pill::after,.pill svg,.hb-o,.hb-l g,.hb-l .d,.soc a,.lfs .lv{animation:none!important}}

/* ===== Ikon sosmed: tetap satu baris di HP, ukuran menyesuaikan lebar ===== */
@media(max-width:640px){
  .fsoc{min-width:0}
  .soc{flex-wrap:nowrap;gap:clamp(5px,2vw,10px);width:100%}
  .soc a{flex:0 1 40px;width:auto;height:auto;min-width:0;aspect-ratio:1/1;border-radius:clamp(8px,2.6vw,12px)}
  .soc svg{border-radius:inherit}
}

/* ===== Footer: latar aurora mengalir (halus, tanpa pola titik) ===== */
.fin::before{inset:-25%;-webkit-mask-image:none;mask-image:none;will-change:transform;
 background:
  radial-gradient(38% 30% at 14% 34%,rgba(56,189,248,.34),transparent 72%),
  radial-gradient(34% 28% at 86% 22%,rgba(110,80,255,.36),transparent 72%),
  radial-gradient(40% 30% at 64% 88%,rgba(42,200,160,.26),transparent 72%),
  radial-gradient(28% 22% at 38% 60%,rgba(80,140,255,.22),transparent 72%);
 animation:faur 20s ease-in-out infinite alternate}
html[data-theme=dark] .fin::before{opacity:.8}
@keyframes faur{0%{transform:translate3d(-3%,2%,0) rotate(0deg) scale(1)}50%{transform:translate3d(2%,-3%,0) rotate(4deg) scale(1.08)}100%{transform:translate3d(4%,2%,0) rotate(-3deg) scale(1.14)}}
@media(prefers-reduced-motion:reduce){.fin::before{animation:none}}

/* ===== Menu header: penanda halaman aktif pada dropdown ===== */
.dd.cur>.dt{background:#e4eeff;color:var(--pri)}html[data-theme=dark] .dd.cur>.dt{background:var(--pri2);color:#8fb4ff}
.dm a.on{background:var(--pri2);color:var(--pri)}

/* ===== Tombol "Salin Semua Hasil": rapi, di tengah, tanpa animasi ===== */
.res .acts.rall{display:flex;justify-content:center;margin:20px 0 0}
#cpall{animation:none;transform:none;scale:none;appearance:none;cursor:pointer;font:700 14px/1 inherit;font-family:inherit;padding:12px 24px;border-radius:12px;border:1.5px solid var(--bd);background:var(--sf);color:var(--pri);box-shadow:0 4px 14px rgba(31,98,242,.08);transition:background-color .15s,color .15s,border-color .15s}
#cpall:hover{background:var(--pri);border-color:var(--pri);color:#fff;filter:none}
#cpall:active{transform:none}
html[data-theme=dark] #cpall{color:#8fb4ff}
html[data-theme=dark] #cpall:hover{color:#fff}
@media(max-width:640px){.res .acts.rall #cpall{width:100%}}
@media(prefers-reduced-motion:reduce){#cpall{transition:none}}

/* ===== Footer: baris hak cipta tidak tertutup tombol "kembali ke atas" ===== */

/* ===== Judul hero: jarak baris dan huruf lebih lega, rapi di desktop, tablet, dan HP ===== */
.hero h1{line-height:1.22;letter-spacing:-.01em;margin:20px 0 18px;text-wrap:balance}
.hero .sub{line-height:1.65}
@media(max-width:1180px){.hero h1{font-size:clamp(30px,5vw,42px);max-width:720px}}
@media(max-width:640px){
  .hero h1{font-size:clamp(26px,7.4vw,32px);line-height:1.26;margin:16px 0 14px}
  .hero .sub{font-size:15.5px;line-height:1.65;margin-bottom:20px}
}
@media(max-width:380px){.hero h1{font-size:25px}}

/* ===== Footer: rapikan latar (daun tengah hanya tablet/HP, sambungan gelombang mulus) ===== */
/* ".pub svg{display:block}" lebih spesifik dari ".lfm{display:none}" sehingga daun tengah ikut tampil di desktop */
.pub .lfm,.pub .lfs{display:none}
@media(max-width:1180px){.pub .lfm{display:block}}
@media(max-width:640px){.pub .finfo .lfm{display:none}.pub .lfs{display:block}}
/* latar menyatu dengan gelombang: warna atas = navy polos, lalu aurora muncul perlahan */
.fin{background:
  linear-gradient(180deg,var(--navy) 0,transparent 110px),
  radial-gradient(540px 250px at 6% 62%,rgba(54,120,255,.30),transparent 70%),
  radial-gradient(520px 320px at 100% 100%,rgba(42,157,143,.30),transparent 70%),
  linear-gradient(180deg,var(--navy) 0,var(--n2) 100%)}
.fin::before{-webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 19%,#000 42%);mask-image:linear-gradient(180deg,transparent 0,transparent 19%,#000 42%)}
.fin::after{top:50%}

/* ===== Footer: keterangan di bawah logo (ukuran, jarak, dan lebar baris lebih rapi) ===== */
.pub .fgrid>div:first-child p{font-size:13px;line-height:1.65;margin:12px 0 0;max-width:300px;opacity:.92;text-wrap:pretty}
@media(max-width:1180px){.pub .fgrid>div:first-child p{max-width:420px}}
@media(max-width:640px){.pub .fgrid>div:first-child p{font-size:13.5px;max-width:100%}}

/* ===== Header: latar gradasi halus (biru muda lembut, tetap bersih dan terbaca) ===== */
.top{background:
  radial-gradient(420px 120px at 100% 0,rgba(31,98,242,.10),transparent 70%),
  radial-gradient(380px 110px at 0 100%,rgba(42,157,143,.08),transparent 70%),
  linear-gradient(100deg,#fff 0%,#f4f8ff 55%,#e8f0ff 100%)}
html[data-theme=dark] .top{background:
  radial-gradient(420px 120px at 100% 0,rgba(56,120,255,.20),transparent 70%),
  radial-gradient(380px 110px at 0 100%,rgba(42,157,143,.14),transparent 70%),
  linear-gradient(100deg,#111c3d 0%,#0f2150 60%,#13296a 100%)}

/* ===== Penyempurnaan beranda: hero, tiga kartu, daftar alat, panduan & FAQ ===== */

/* -- Hero: hierarki visual lebih jelas -- */
.hero .sub{color:#1c2a4e;font-size:clamp(17px,1.25vw,19px);line-height:1.62;max-width:640px;margin-bottom:26px}
html[data-theme=dark] .hero .sub{color:#b9c8ea}
.hero .pop{margin-top:18px;gap:10px;font-size:14.5px}
.pop .pop-l{color:var(--hd);font-weight:600}
.pop>svg{color:var(--pri);margin-right:-2px}
.hero .chip{background:var(--sf);border:1px solid var(--bd);color:var(--hd);padding:7px 16px;font-size:14px;font-weight:600;box-shadow:0 2px 8px rgba(31,98,242,.07);transition:background .2s,color .2s,border-color .2s,transform .2s,box-shadow .2s}
.hero .chip:hover{background:var(--pri);border-color:var(--pri);color:#fff;transform:translateY(-2px);box-shadow:0 8px 18px -8px rgba(31,98,242,.6)}
html[data-theme=dark] .hero .chip{background:var(--pri2);border-color:var(--bd)}
html[data-theme=dark] .hero .chip:hover{background:var(--pri);border-color:var(--pri)}
.sbar{border-color:#c9d9f7}
.sbar:focus-within{border-color:var(--pri)}
@media(min-width:641px){
  .sact{margin:0 14px 0 12px}
  .sact::before{content:"";position:absolute;left:-13px;top:22%;bottom:22%;width:1px;background:var(--bd)}
}
.hr::before{content:"";position:absolute;inset:4% 0 0;border-radius:50%;background:radial-gradient(closest-side,rgba(79,139,255,.22),rgba(79,139,255,.07) 62%,transparent 78%);z-index:-1;pointer-events:none}
html[data-theme=dark] .hr::before{background:radial-gradient(closest-side,rgba(79,139,255,.28),rgba(79,139,255,.08) 62%,transparent 78%)}
@media(min-width:1181px){.hero{padding-bottom:12px}}
.tools{margin-top:8px}

/* -- Tiga kartu berwarna: tinggi, ilustrasi, dan tombol seragam -- */
.three{align-items:stretch}
.three .card{display:flex;flex-direction:column;min-height:262px;padding:20px 24px 18px}
.three h3{margin-bottom:12px}
.three .card>a{display:inline-flex;align-items:center;gap:7px;width:fit-content;margin-top:auto;padding-top:12px;font-weight:700;font-size:14.5px;position:relative;z-index:2;color:var(--pri)}
.three .card>a svg{width:15px;height:15px;transition:transform .3s ease}
.three .card>a:hover svg{transform:translateX(5px)}
.three .c-tip>a{color:#1c8a3c}
html[data-theme=dark] .three .card>a{color:#8fb4ff}
html[data-theme=dark] .three .c-tip>a{color:#6fd39a}
.three .rk,.three .c-feat .rk,.three .c-tip .rk{width:132px;right:16px;bottom:14px}
.c-feat .fl{padding-right:0}
.c-feat li{font-size:14px;padding-top:2px;padding-bottom:2px}
.c-ex .exrow{flex:0 0 auto}
.c-ex .thumb{width:112px}
.c-ex dl{font-size:13px;line-height:1.6}
.c-tip h4{max-width:62%}
.c-tip p{font-size:13.5px;max-width:62%}

/* -- Semua alat: grid 4 kolom, ikon, kartu ajakan -- */
#semua-alat .alat-g{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:20px}
#semua-alat .alat-g a{--cc:var(--c);position:relative;display:flex;flex-direction:column;gap:4px;padding:20px 20px 16px;border-radius:18px;overflow:hidden;background:var(--sf);border:1px solid var(--bd);transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .25s,box-shadow .3s}
html[data-theme=dark] #semua-alat .alat-g a{--cc:color-mix(in srgb,var(--c) 58%,#fff)}
#semua-alat .alat-g a::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--c);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
#semua-alat .alat-g a:hover,#semua-alat .alat-g a:focus-visible{transform:translateY(-5px);border-color:color-mix(in srgb,var(--c) 45%,var(--bd));box-shadow:0 16px 32px -16px color-mix(in srgb,var(--c) 60%,transparent)}
#semua-alat .alat-g a:hover::before,#semua-alat .alat-g a:focus-visible::before{transform:scaleX(1)}
#semua-alat .alat-g a:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
#semua-alat .alat-g .ai{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;margin-bottom:8px;font-style:normal;background:color-mix(in srgb,var(--c) 13%,var(--sf));color:var(--cc);transition:background .3s,color .3s,transform .4s cubic-bezier(.34,1.56,.64,1),box-shadow .3s}
#semua-alat .alat-g .ai svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#semua-alat .alat-g a:hover .ai{background:var(--c);color:#fff;transform:rotate(-7deg) scale(1.08);box-shadow:0 10px 18px -8px var(--c)}
#semua-alat .alat-g b{font-size:16.5px;font-weight:800;color:var(--hd);margin:0;line-height:1.3}
#semua-alat .alat-g a>span{font-size:13.8px;line-height:1.6;color:var(--mut);margin-bottom:10px}
#semua-alat .alat-g .go{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-style:normal;font-size:13.5px;font-weight:700;color:var(--cc)}
#semua-alat .alat-g .go svg{width:15px;height:15px;transition:transform .3s ease}
#semua-alat .alat-g a:hover .go svg{transform:translateX(5px)}
/* kartu ajakan (kartu ke-8 agar grid genap) */
html[data-theme=dark] @media(max-width:1100px){#semua-alat .alat-g{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){#semua-alat .alat-g{grid-template-columns:1fr;gap:12px}#semua-alat .alat-g a{padding:16px}}

/* -- Panduan: dua kolom sejajar + FAQ selebar kontainer -- */
#panduan .pg{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:36px;align-items:start}
#panduan .pg-main p,#panduan .pg-main ol{max-width:none}
#panduan .pg-main h2:first-child{margin-top:0}
#panduan ol.steps{list-style:none;counter-reset:st;margin:12px 0 0;padding:0;display:grid;gap:10px}
#panduan ol.steps li{counter-increment:st;position:relative;margin:0;padding:13px 16px 13px 58px;border:1px solid var(--bd);border-radius:14px;background:var(--sf);line-height:1.65}
#panduan ol.steps li::before{content:counter(st);position:absolute;left:14px;top:13px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:14px;color:#fff;background:linear-gradient(135deg,#4d8dff,#1f62f2);box-shadow:0 6px 12px -4px rgba(31,98,242,.5)}
#panduan .pg-side{align-self:start;overflow:hidden;border-radius:20px;background:linear-gradient(160deg,#f1f7ff,#e3edff);border:1.5px solid #cddffa}
#panduan .ps-head{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 16px 6px 22px}
#panduan .ps-ht{min-width:0}
#panduan .pg-side h3{margin:0;font-size:18px;line-height:1.35;font-weight:800;color:var(--hd);max-width:260px}
#panduan .ps-ill{flex:none;width:84px;height:auto;pointer-events:none}
#panduan .ps-scan{animation:psScan 3.6s ease-in-out infinite}
#panduan .ps-lens{animation:psLens 3.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes psScan{0%,100%{transform:translateY(0);opacity:0}12%,88%{opacity:.9}50%{transform:translateY(96px)}}
@keyframes psLens{0%,100%{transform:translate(0,0)}50%{transform:translate(-5px,-6px)}}
#panduan .ps-list{list-style:none;margin:0;padding:4px 14px 6px}
#panduan .ps-list li{position:relative;display:flex;align-items:center;gap:12px;margin:0;padding:7px 8px;border-radius:12px;transition:background .2s}
#panduan .ps-list li:hover{background:rgba(255,255,255,.65)}
#panduan .ps-list i{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:11px;color:var(--c);background:color-mix(in srgb,var(--c) 14%,#fff);border:1px solid color-mix(in srgb,var(--c) 22%,transparent)}
#panduan .ps-list i svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
#panduan .ps-list span{display:block;min-width:0}
#panduan .ps-list b{display:block;font-size:14.5px;line-height:1.3;font-weight:700;color:var(--hd)}
#panduan .ps-list small{display:block;margin-top:1px;font-size:12.6px;line-height:1.4;color:var(--mut)}
#panduan .ps-cta{display:flex;align-items:center;justify-content:center;gap:7px;margin:4px 16px 16px;padding:10px 14px;border-radius:12px;font-weight:700;font-size:14.5px;color:var(--pri);text-decoration:none;background:#fff;border:1.5px solid #cddffa;transition:background .18s,color .18s,border-color .18s}
#panduan .ps-cta svg{width:16px;height:16px;transition:transform .18s}
#panduan .ps-cta:hover{background:var(--pri);border-color:var(--pri);color:#fff}
#panduan .ps-cta:hover svg{transform:translateX(3px)}
#panduan .ps-cta:focus-visible{outline:3px solid #8fb4ff;outline-offset:2px}
html[data-theme=dark] #panduan .pg-side{background:var(--sf);border-color:var(--bd)}
html[data-theme=dark] #panduan .ps-list li:hover{background:rgba(255,255,255,.05)}
html[data-theme=dark] #panduan .ps-list i{background:color-mix(in srgb,var(--c) 22%,var(--sf));border-color:color-mix(in srgb,var(--c) 35%,transparent)}
html[data-theme=dark] #panduan .ps-cta{background:var(--pri2);border-color:var(--bd);color:#8fb4ff}
html[data-theme=dark] #panduan .ps-cta:hover{background:var(--pri);border-color:var(--pri);color:#fff}
@media(prefers-reduced-motion:reduce){#panduan .ps-scan,#panduan .ps-lens{animation:none}#panduan .ps-scan{opacity:0}#panduan .ps-cta,#panduan .ps-cta svg,#panduan .ps-list li{transition:none}}
#panduan #faq{margin-top:34px}
@media(max-width:980px){#panduan .pg{grid-template-columns:1fr;gap:22px}}
@media(max-width:420px){#panduan .ps-ill{width:72px}#panduan .ps-head{padding:12px 12px 4px 16px}#panduan .pg-side h3{font-size:16.5px}}
@media(max-width:640px){#panduan ol.steps li{padding:12px 14px 12px 52px}#panduan ol.steps li::before{left:12px;top:12px}}

@media(prefers-reduced-motion:reduce){#semua-alat .alat-g a,#semua-alat .alat-g .ai,#semua-alat .alat-g a::before,.hero .chip{transition:none}#semua-alat .alat-g a:hover{transform:none}}

/* ===== Penyempurnaan footer, navigasi, dan bar kepercayaan ===== */

/* -- Footer: kolom Menu Utama 2 kolom agar seimbang -- */
.fmenu{min-width:0}
@media(min-width:1181px){.fgrid{grid-template-columns:1.6fr 1.2fr .8fr 1fr 1.8fr}}
@media(min-width:641px){
  .fmenu .fm-l{display:grid;grid-auto-flow:column;grid-template-rows:repeat(4,auto);grid-template-columns:repeat(2,minmax(0,max-content));column-gap:30px}
}
.fmenu .fm-l a{white-space:nowrap}

/* -- Footer: logo lebih kontras -- */
.foot .brand img.lg-f{filter:brightness(1.3) saturate(1.2) drop-shadow(0 2px 12px rgba(90,150,255,.4))}

/* -- Footer: ikon sosial monokrom, warna merek muncul saat hover -- */
.soc svg>rect:first-of-type{fill:rgba(255,255,255,.12);transition:fill .25s}
.soc svg>path[fill-opacity]{display:none}
.soc a{box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);background:none}
.soc a.s-youtube svg>path:last-of-type{fill:#0d2f7d;transition:fill .25s}
.soc a.s-youtube:hover svg>rect:first-of-type{fill:#e62117}
.soc a.s-youtube:hover svg>path:last-of-type{fill:#e62117}
.soc a.s-facebook:hover svg>rect:first-of-type{fill:#1877f2}
.soc a.s-x:hover svg>rect:first-of-type{fill:#0b0d12}
.soc a.s-telegram:hover svg>rect:first-of-type{fill:#229ed9}
.soc a:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.soc a.s-youtube:hover{box-shadow:0 10px 22px rgba(255,70,50,.5),inset 0 0 0 1px rgba(255,255,255,.35)}

/* -- Tombol ke atas: tidak menimpa konten footer -- */
.totop{right:26px;bottom:26px;box-shadow:0 10px 26px rgba(31,98,242,.28),0 0 0 4px rgba(255,255,255,.7)}
html[data-theme=dark] .totop{box-shadow:0 10px 26px rgba(0,0,0,.45),0 0 0 4px rgba(10,19,48,.8)}
@media(max-width:1180px){.copy{padding-bottom:40px}}
@media(max-width:640px){.totop{right:14px;bottom:14px}}

/* -- Navigasi: menu mobile bisa digulir bila dropdown terbuka -- */
@media(max-width:1180px){
  .nav nav{max-height:calc(100vh - 84px);max-height:calc(100dvh - 84px);overflow-y:auto;overscroll-behavior:contain}
  .dm a{padding:12px 14px}
}

/* -- Hero: bar kepercayaan -- */
.trust{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;margin:16px 0 0;padding:0;font-size:13.5px;font-weight:600;color:#2b3a5c}
.trust li{display:inline-flex;align-items:center;gap:8px}
.trust svg{width:19px;height:19px;padding:4px;box-sizing:border-box;border-radius:50%;background:#16a34a;color:#fff;flex-shrink:0;box-shadow:0 3px 8px -2px rgba(22,163,74,.5)}
html[data-theme=dark] .trust{color:var(--mut)}
@media(min-width:1181px) and (max-width:1400px){.fgrid{grid-template-columns:1.3fr 1.5fr .8fr .95fr 1.75fr}}
@media(min-width:1181px){.fmenu .fm-l{column-gap:24px}}
@media(max-width:900px){.fmenu .fm-l{display:block}}

/* ===== Footer: ikon lembut di depan menu, judul beraksen, tagline tulisan tangan ===== */
.fsp{position:absolute;width:0;height:0;overflow:hidden}
.fgrid .fmenu .fm-l a,.fgrid .finfo>a:not(.brand){display:flex;align-items:center;gap:10px;padding:4px 0;margin:0!important;line-height:1.45}
.fi2{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:#a9cbff;opacity:.72;transition:opacity .25s,color .25s,transform .35s cubic-bezier(.34,1.56,.64,1)}
.fgrid a:hover .fi2{opacity:1;color:#9be58f;transform:scale(1.18) rotate(-6deg)}
.fmenu h5,.finfo h5,.fsoc h5,.nl>h5{position:relative;padding-bottom:11px;margin-bottom:13px}
.fmenu h5::after,.finfo h5::after,.fsoc h5::after,.nl>h5::after{content:"";position:absolute;left:0;bottom:0;width:28px;height:3px;border-radius:3px;background:linear-gradient(90deg,#4f8bff,#9be58f)}
.nl>h5::after{left:40px}
.fr{min-width:0}
.fgrid .ftag{margin:20px 0 0 6px;font-family:'Caveat','Segoe Script','Bradley Hand','Brush Script MT',cursive;font-weight:700;font-size:clamp(24px,2.1vw,31px);white-space:nowrap;line-height:1.14;letter-spacing:.2px;color:#ffc83d;rotate:-3.5deg;transform-origin:0 50%;text-shadow:0 2px 14px rgba(255,190,50,.32);position:relative;z-index:1;opacity:.96}
.fgrid .ftag svg{display:block;width:min(220px,70%);height:14px;margin:2px 0 0 4px;color:#ffc83d;opacity:.75}
@media(max-width:1180px){.fr{grid-column:1/-1}.fgrid .ftag{margin:18px 0 4px 8px;font-size:29px}}
@media(max-width:640px){.fgrid .ftag{font-size:27px;margin-left:4px}}

/* Hero desktop: baris "Pencarian Populer" dibuat sedikit lebih rapat agar tetap satu baris setelah font Google tampil (mencegah layout shift) */
@media(min-width:1181px){.hero .pop{gap:6px}.hero .chip{padding:7px 13px}}

/* Footer: cahaya aurora yang bergerak tidak lagi "bocor" ke bawah gelombang (tampak seperti warna tumpang tindih) — area bawah gelombang dijaga menyatu dengan warna gelombang */
.foot::after{content:'';position:absolute;left:0;right:0;top:40px;height:150px;z-index:0;pointer-events:none;background:linear-gradient(180deg,var(--navy) 0,var(--navy) 22%,rgba(11,42,111,.55) 55%,transparent 100%)}
html[data-theme=dark] .foot::after{background:linear-gradient(180deg,var(--navy) 0,var(--navy) 22%,rgba(6,20,58,.55) 55%,transparent 100%)}


/* ===== Semua alat: ubin ringkas (ikon di kiri, teks di samping), serasi dengan ubin ekstensi ===== */
#semua-alat .alat-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
#semua-alat .alat-hd h2{margin-top:0}
#semua-alat .alat-hd p{margin-bottom:0}
#semua-alat .alat-n{flex:none;display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:99px;font-size:13px;font-weight:600;color:var(--pri);background:var(--pri2);border:1px solid var(--bd);white-space:nowrap}
#semua-alat .alat-n b{font-size:15px;font-weight:800}
html[data-theme=dark] #semua-alat .alat-n{color:#8fb4ff}
#semua-alat .alat-g{margin-top:20px;gap:12px}
#semua-alat .alat-g a{display:grid;grid-template-columns:42px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:12px;row-gap:3px;align-items:start;padding:14px 38px 14px 14px;border-radius:12px;border-color:color-mix(in srgb,var(--c) 22%,var(--bd));background:linear-gradient(135deg,color-mix(in srgb,var(--c) 9%,var(--sf)),var(--sf) 72%);box-shadow:none}
html[data-theme=dark] #semua-alat .alat-g a{background:linear-gradient(135deg,color-mix(in srgb,var(--c) 18%,var(--sf)),var(--sf) 75%)}
#semua-alat .alat-g a::before{display:none}
#semua-alat .alat-g a:hover,#semua-alat .alat-g a:focus-visible{transform:translateY(-2px);border-color:var(--c);box-shadow:0 8px 18px -10px color-mix(in srgb,var(--c) 70%,transparent)}
#semua-alat .alat-g .ai{grid-column:1;grid-row:1/3;width:42px;height:42px;border-radius:50%;margin:0;background:color-mix(in srgb,var(--c) 16%,var(--sf));box-shadow:none}
#semua-alat .alat-g .ai svg{width:21px;height:21px}
#semua-alat .alat-g a:hover .ai,#semua-alat .alat-g a:focus-visible .ai{transform:none;box-shadow:none}
#semua-alat .alat-g b{grid-column:2;grid-row:1;font-size:15px;line-height:1.3;text-wrap:balance}
#semua-alat .alat-g a>span{grid-column:2;grid-row:2;margin:0;min-height:0;font-size:12.8px;line-height:1.5}
#semua-alat .alat-g .go{position:absolute;top:14px;right:12px;margin:0;padding:0;width:auto;border:0;font-size:0;line-height:0;gap:0}
#semua-alat .alat-g .go svg{width:14px;height:14px;padding:0;border-radius:0;background:none;color:var(--mut);opacity:.85;transition:transform .2s,color .2s}
#semua-alat .alat-g a:hover .go svg,#semua-alat .alat-g a:focus-visible .go svg{background:none;color:var(--cc);opacity:1;transform:translateX(3px)}
@media(max-width:700px){#semua-alat .alat-hd{flex-direction:column;gap:12px}}
@media(max-width:560px){#semua-alat .alat-g{gap:10px}}

/* Pembatas antar menu tools disembunyikan di kiri & kanan menu yang di-hover */
.tc:before{transition:opacity .15s}
.tc:hover:before,.tc:focus-visible:before,.tc:hover+.tc:before,.tc:focus-visible+.tc:before{opacity:0}

/* Header desktop: logo kiri, menu rapat ke kanan (dekat tombol tema), tombol tema paling kanan */
@media(min-width:1181px){
  .nav{grid-template-columns:auto 1fr auto;gap:12px}
  .nav .brand{justify-self:start}
  .nav nav{justify-self:end;margin-left:0}
  .nav .theme{justify-self:end;margin-left:6px;background:#e4eeff;transition:background-color .2s,transform .35s var(--pg-spring,cubic-bezier(.34,1.56,.64,1))}
  .nav .theme:hover{background:#d3e3ff}
  html[data-theme=dark] .nav .theme{background:var(--pri2);color:#ffd166}
  html[data-theme=dark] .nav .theme:hover{background:#1f3875}
}

/* ===== Ringkasan v3: kartu sambutan + dua kolom (masa aktif | kesehatan website) ===== */
@property --w{syntax:'<number>';inherits:true;initial-value:0}
@property --p{syntax:'<number>';inherits:true;initial-value:0}
/* warna nada dipasang lewat kelas tn-* (bukan .good/.warn/.bad global, agar latar & warna teks tidak bocor) */
#sec-ringkasan{--ac:var(--pri)}
#sec-ringkasan .tn-good{--ac:var(--good)}#sec-ringkasan .tn-warn{--ac:var(--warn)}#sec-ringkasan .tn-bad{--ac:var(--bad)}
#sec-ringkasan .tn-info,#sec-ringkasan .tn-load{--ac:var(--pri)}
#sec-ringkasan .rs-ic{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:11px;font-style:normal;color:var(--ac,var(--pri));background:color-mix(in srgb,var(--ac,var(--pri)) 14%,transparent);transition:transform .3s cubic-bezier(.2,.9,.3,1.3)}
#sec-ringkasan .rs-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#sec-ringkasan .rs-spin{display:block;width:18px;height:18px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:rsSpin .7s linear infinite}

/* --- kartu sambutan --- */
#sec-ringkasan .rs-hero{position:relative;overflow:hidden;isolation:isolate;margin-bottom:16px;padding:22px 24px 20px;border-radius:22px;border:1px solid color-mix(in srgb,var(--ac) 28%,var(--bd));background:linear-gradient(115deg,color-mix(in srgb,var(--ac) 15%,var(--sf)) 0%,color-mix(in srgb,var(--ac) 5%,var(--sf)) 55%,var(--sf) 100%)}
#sec-ringkasan .rs-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.55;background:radial-gradient(color-mix(in srgb,var(--ac) 35%,transparent) 1.3px,transparent 1.6px) 0 0/18px 18px;-webkit-mask-image:linear-gradient(100deg,transparent 40%,#000);mask-image:linear-gradient(100deg,transparent 40%,#000)}
#sec-ringkasan .rs-hero::after{content:"";position:absolute;right:-60px;top:-80px;width:260px;height:260px;border-radius:50%;z-index:-1;pointer-events:none;background:radial-gradient(circle,color-mix(in srgb,var(--ac) 30%,transparent),transparent 68%);animation:rsGlow 7s ease-in-out infinite alternate}
#sec-ringkasan .rs-hero .rs-top{margin-bottom:0}
#sec-ringkasan .rs-hero .err{margin:12px 0 0}
#sec-ringkasan .rs-vd{display:flex;align-items:flex-start;gap:13px;margin-top:16px;padding-top:15px;border-top:1px dashed color-mix(in srgb,var(--ac) 32%,var(--bd))}
#sec-ringkasan .rs-vi{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;font-style:normal;color:#fff;background:var(--ac);box-shadow:0 8px 16px -8px var(--ac)}
#sec-ringkasan .rs-vi svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
#sec-ringkasan .rs-vd p{margin:0;max-width:none;font-size:15.5px;line-height:1.65;color:var(--tx)}
#sec-ringkasan .rs-vd p b{color:var(--hd);font-weight:800}
#sec-ringkasan .rs-cta{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:8px 16px;border:0;border-radius:99px;font:700 13.5px/1 inherit;font-family:inherit;color:#fff;background:var(--good);cursor:pointer;transition:transform .2s,box-shadow .2s}
#sec-ringkasan .rs-cta svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
#sec-ringkasan .rs-cta:hover{transform:translateY(-2px);box-shadow:0 10px 18px -10px var(--good)}
#sec-ringkasan .rs-cta:hover svg{transform:translateX(4px)}
#sec-ringkasan .rs-cta:focus-visible{outline:2px solid var(--pri);outline-offset:3px}

/* --- dua kolom --- */
#sec-ringkasan .rs-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:16px;align-items:stretch}
#sec-ringkasan .rs-cols.one{grid-template-columns:minmax(0,1fr)}
#sec-ringkasan .rs-card{position:relative;overflow:hidden;display:flex;flex-direction:column;padding:20px;border-radius:20px;border:1px solid color-mix(in srgb,var(--ac) 24%,var(--bd));background:linear-gradient(170deg,color-mix(in srgb,var(--ac) 8%,var(--sf)),var(--sf) 58%);box-shadow:0 14px 30px -24px color-mix(in srgb,var(--ac) 70%,transparent)}
#sec-ringkasan .rs-card::after{content:"";position:absolute;right:-50px;bottom:-60px;width:170px;height:170px;border-radius:50%;pointer-events:none;background:color-mix(in srgb,var(--ac) 8%,transparent)}
#sec-ringkasan .rs-ch{display:flex;align-items:center;gap:10px;margin-bottom:18px;font-size:15.5px;font-weight:800;color:var(--hd)}
#sec-ringkasan .rs-tag{margin-left:auto;padding:4px 11px;border-radius:99px;font-size:12px;font-weight:800;white-space:nowrap;color:color-mix(in srgb,var(--ac) 82%,var(--hd));background:color-mix(in srgb,var(--ac) 14%,transparent)}

/* lingkar kemajuan */
#sec-ringkasan .rs-arc{--s:176px;position:relative;flex:none;width:var(--s);height:var(--s);transition:--p 1.2s cubic-bezier(.2,.8,.2,1)}
#sec-ringkasan .rs-arc.sm{--s:104px}
#sec-ringkasan .rs-arc svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 4px 10px color-mix(in srgb,var(--ac) 38%,transparent))}
#sec-ringkasan .rs-arc circle{fill:none;stroke-width:11}
#sec-ringkasan .rs-arc .t{stroke:color-mix(in srgb,var(--ac) 15%,var(--bd))}
#sec-ringkasan .rs-arc .v{stroke:var(--ac);stroke-linecap:round;stroke-dasharray:var(--p) 100}
#sec-ringkasan .rs-arc.z .v{display:none}
#sec-ringkasan .rs-gc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:1;padding:0 18px}
#sec-ringkasan .rs-gc b{display:flex;align-items:baseline;font-size:46px;font-weight:800;letter-spacing:-1.2px;color:var(--ac);font-variant-numeric:tabular-nums}
#sec-ringkasan .rs-gc b.x{font-size:17px;letter-spacing:-.2px}
#sec-ringkasan .rs-gc>span{margin-top:7px;font-size:13px;font-weight:700;color:var(--mut)}
#sec-ringkasan .rs-arc.sm .rs-gc b{font-size:30px;color:var(--hd);letter-spacing:-.6px}
#sec-ringkasan .rs-arc.sm .rs-gc small{font-size:15px;font-weight:700;color:var(--mut);letter-spacing:0}

/* kolom kiri: masa aktif */
#sec-ringkasan .rs-lb{flex:1;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:22px}
#sec-ringkasan .rs-tl{list-style:none;margin:0;padding:0;display:grid;gap:14px}
#sec-ringkasan .rs-tl li{position:relative;display:flex;align-items:center;gap:13px;min-width:0}
#sec-ringkasan .rs-tl li:not(:last-child)::before{content:"";position:absolute;left:16px;top:36px;height:calc(100% - 10px);width:0;border-left:2px solid var(--ac)}
#sec-ringkasan .rs-tl li.n:not(:last-child)::before{border-left:2px dashed color-mix(in srgb,var(--ac) 45%,var(--bd))}
#sec-ringkasan .rs-nd{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font-style:normal;color:var(--ac);background:var(--sf);border:2px solid var(--ac);position:relative;z-index:1}
#sec-ringkasan .rs-nd svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
#sec-ringkasan .rs-nd u{display:block;width:12px;height:12px;border-radius:50%;background:var(--ac);animation:rsPulse 2.4s ease-out infinite}
#sec-ringkasan .rs-tl li.e .rs-nd{border-style:dashed;color:var(--mut);border-color:color-mix(in srgb,var(--ac) 55%,var(--bd))}
#sec-ringkasan .rs-tl small{display:block;font-size:12.3px;font-weight:600;color:var(--mut)}
#sec-ringkasan .rs-tl b{display:block;font-size:14.8px;font-weight:800;line-height:1.35;color:var(--hd);overflow-wrap:anywhere}
#sec-ringkasan .rs-pbar{margin-top:22px}
#sec-ringkasan .rs-pl{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:9px;font-size:12.8px;font-weight:600;color:var(--mut)}
#sec-ringkasan .rs-pl b{font-size:13.5px;font-weight:800;color:var(--hd)}
#sec-ringkasan .rs-track{position:relative;height:10px;border-radius:99px;background:color-mix(in srgb,var(--ac) 15%,var(--bd))}
#sec-ringkasan .rs-fill{position:absolute;inset:0 auto 0 0;width:calc(var(--w)*1%);border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--ac) 45%,#fff),var(--ac));transition:--w 1.2s cubic-bezier(.2,.8,.2,1)}
#sec-ringkasan .rs-now{position:absolute;top:50%;left:calc(var(--w)*1%);width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;box-sizing:border-box;border:4px solid var(--ac);background:var(--sf);animation:rsPulse 2.4s ease-out infinite;transition:--w 1.2s cubic-bezier(.2,.8,.2,1)}
#sec-ringkasan .rs-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px;padding-top:16px;border-top:1px dashed color-mix(in srgb,var(--ac) 30%,var(--bd))}
#sec-ringkasan .rs-fa{--ac:var(--pri);display:flex;align-items:center;gap:11px;min-width:0;padding:10px 12px;border-radius:14px;background:color-mix(in srgb,var(--pri) 6%,var(--sf));border:1px solid var(--bd)}
#sec-ringkasan .rs-fa .rs-ic{width:32px;height:32px;border-radius:10px}
#sec-ringkasan .rs-fa small{display:block;font-size:12px;font-weight:600;color:var(--mut)}
#sec-ringkasan .rs-fa b{display:block;font-size:14px;font-weight:800;line-height:1.35;color:var(--hd);overflow-wrap:anywhere}

/* kolom kanan: kesehatan website */
#sec-ringkasan .rs-hs{display:flex;align-items:center;gap:18px;margin-bottom:16px}
#sec-ringkasan .rs-hst{min-width:0;flex:1}
#sec-ringkasan .rs-hst strong{display:block;font-size:16px;font-weight:800;color:var(--hd)}
#sec-ringkasan .rs-hst span{display:block;margin-top:2px;font-size:13px;color:var(--mut)}
#sec-ringkasan .rs-seg{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-top:12px}
#sec-ringkasan .rs-seg i{height:7px;border-radius:99px;background:var(--ac);transform-origin:left;animation:rsSeg .5s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i,0)*70ms + .2s)}
#sec-ringkasan .rs-seg i.tn-load{background:color-mix(in srgb,var(--pri) 18%,var(--bd));animation:none}
#sec-ringkasan .rs-hg{display:grid;gap:9px}
#sec-ringkasan .rs-hc{position:relative;z-index:1;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:9px 12px;border-radius:15px;border:1px solid color-mix(in srgb,var(--ac) 20%,var(--bd));background:linear-gradient(100deg,color-mix(in srgb,var(--ac) 9%,var(--sf)),var(--sf) 70%);color:var(--tx);text-decoration:none;transition:transform .28s cubic-bezier(.2,.8,.2,1),border-color .25s,box-shadow .28s}
#sec-ringkasan .rs-hc:hover,#sec-ringkasan .rs-hc:focus-visible{transform:translateX(4px);border-color:var(--ac);box-shadow:0 12px 24px -16px color-mix(in srgb,var(--ac) 80%,transparent)}
#sec-ringkasan .rs-hc:hover .rs-ic{transform:rotate(-8deg) scale(1.08)}
#sec-ringkasan .rs-hc:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
#sec-ringkasan .rs-hb{display:flex;flex-direction:column;gap:1px;min-width:0}
#sec-ringkasan .rs-hl{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--mut)}
#sec-ringkasan .rs-hc b{font-size:14.8px;font-weight:800;line-height:1.35;color:var(--hd);overflow-wrap:anywhere}
#sec-ringkasan .rs-hc.tn-load b{font-weight:700;color:var(--mut)}
#sec-ringkasan .rs-hc small{font-size:12.3px;line-height:1.4;color:var(--mut)}
#sec-ringkasan .rs-mt{display:block;height:5px;margin-top:6px;border-radius:99px;background:color-mix(in srgb,var(--ac) 16%,var(--bd));overflow:hidden}
#sec-ringkasan .rs-mt i{display:block;height:100%;width:calc(var(--w)*1%);border-radius:inherit;background:var(--ac);transition:--w 1.2s cubic-bezier(.2,.8,.2,1)}
#sec-ringkasan .rs-st{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 9px;border-radius:99px;font-style:normal;font-size:12px;font-weight:800;white-space:nowrap;color:color-mix(in srgb,var(--ac) 82%,var(--hd));background:color-mix(in srgb,var(--ac) 14%,transparent)}
#sec-ringkasan .rs-st em{width:7px;height:7px;border-radius:50%;background:var(--ac)}
#sec-ringkasan .rs-hc.tn-load .rs-st{background:none;padding:0;color:var(--pri)}
#sec-ringkasan .rs-hc.tn-load .rs-spin{width:16px;height:16px;border-width:2.5px}
#sec-ringkasan .rs-go{display:grid;place-items:center;width:22px;height:22px;font-style:normal;color:var(--mut);transition:transform .25s,color .2s}
#sec-ringkasan .rs-go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
#sec-ringkasan .rs-hc:hover .rs-go,#sec-ringkasan .rs-hc:focus-visible .rs-go{transform:translateX(3px);color:var(--ac)}

/* kemajuan pemeriksaan */
#sec-ringkasan .rs-pg{position:relative;overflow:hidden;height:34px;margin-top:16px;border-radius:99px;border:1px solid color-mix(in srgb,var(--pri) 20%,var(--bd));background:color-mix(in srgb,var(--pri) 8%,var(--sf))}
#sec-ringkasan .rs-pg i{position:absolute;inset:0 auto 0 0;width:calc(var(--w)*1%);border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--pri) 22%,transparent),color-mix(in srgb,var(--pri) 42%,transparent));transition:--w 1.2s cubic-bezier(.2,.8,.2,1)}
#sec-ringkasan .rs-pg span{position:relative;display:block;padding-left:40px;font-size:13px;font-weight:700;line-height:32px;color:var(--pri)}
#sec-ringkasan .rs-pg span::before{content:"";position:absolute;left:15px;top:9px;width:14px;height:14px;border-radius:50%;border:2.5px solid var(--pri);border-right-color:transparent;animation:rsSpin .7s linear infinite}
html[data-theme=dark] #sec-ringkasan .rs-pg span{color:#8fb4ff}
#sec-ringkasan .rs-skc{display:grid;gap:14px}

/* gerak: masuk saat pertama muncul, pudar halus saat isi berubah */
#sec-ringkasan .rs-hero.rs-new,#sec-ringkasan .rs-card.rs-new,#sec-ringkasan .rs-hc.rs-new{animation:rsUp .6s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i,0)*80ms)}
#sec-ringkasan .rs-vd.rs-chg{animation:rsFade .45s ease backwards}
@keyframes rsFade{from{opacity:.35}}
@keyframes rsSeg{from{transform:scaleX(0);opacity:0}}

@media(max-width:900px){#sec-ringkasan .rs-cols{grid-template-columns:minmax(0,1fr)}}
@media(max-width:560px){
  #sec-ringkasan .rs-hero{padding:16px 16px 14px;border-radius:18px}
  #sec-ringkasan .rs-vd{gap:11px}#sec-ringkasan .rs-vd p{font-size:14.5px}
  #sec-ringkasan .rs-card{padding:16px;border-radius:18px}
  #sec-ringkasan .rs-lb{grid-template-columns:1fr;justify-items:center;gap:18px}
  #sec-ringkasan .rs-tl{justify-self:stretch}
  #sec-ringkasan .rs-facts{grid-template-columns:1fr}
  #sec-ringkasan .rs-hs{gap:14px}
  #sec-ringkasan .rs-arc.sm{--s:88px}#sec-ringkasan .rs-arc.sm .rs-gc b{font-size:24px}
  #sec-ringkasan .rs-hc{grid-template-columns:auto minmax(0,1fr) auto;gap:10px;padding:10px}
  #sec-ringkasan .rs-go{display:none}
}
@media(prefers-reduced-motion:reduce){#sec-ringkasan .rs-hero,#sec-ringkasan .rs-hero::after,#sec-ringkasan .rs-card,#sec-ringkasan .rs-hc,#sec-ringkasan .rs-nd u,#sec-ringkasan .rs-seg i,#sec-ringkasan .rs-spin,#sec-ringkasan .rs-pg span::before{animation:none!important}#sec-ringkasan .rs-arc,#sec-ringkasan .rs-mt i,#sec-ringkasan .rs-pg i,#sec-ringkasan .rs-hc,#sec-ringkasan .rs-go,#sec-ringkasan .rs-ic,#sec-ringkasan .rs-cta{transition:none}}

/* ===== WHOIS: kartu status + detail (meniru desain referensi) ===== */
#rb-whois .wi{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:20px;align-items:stretch}
#rb-whois .wi svg{display:block}
.wi-l,.wi-r{border:1px solid var(--bd);border-radius:18px;background:var(--sf);padding:16px 18px;position:relative;overflow:hidden}
.wi-l{display:flex;flex-direction:column;background:linear-gradient(180deg,var(--sf) 0,color-mix(in srgb,var(--pri2) 55%,var(--sf)) 100%)}
.wi-l>*,.wi-r>*{position:relative;z-index:1}
.wi-ban{display:flex;align-items:center;gap:14px;border:1px solid;border-radius:14px;padding:12px 16px}
.wi-ban b{display:block;font-size:24px;line-height:1.2;font-weight:800}
.wi-ban p{margin:4px 0 0;font-size:15px;line-height:1.45;color:var(--tx)}.wi-ban p strong{font-weight:800}
.wi-ck{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;color:#fff}.wi-ck svg{width:32px;height:32px}
.wi-ban.wi-good{background:#e6f7ed;border-color:#bfe6cf}.wi-ban.wi-good b{color:#0f8a4b}.wi-ban.wi-good .wi-ck{background:#1fa463}
.wi-ban.wi-warn{background:#fff4de;border-color:#f3d79b}.wi-ban.wi-warn b{color:#b36200}.wi-ban.wi-warn .wi-ck{background:#e08a00}
.wi-ban.wi-bad{background:#fde9e9;border-color:#f3b4b4}.wi-ban.wi-bad b{color:#c02424}.wi-ban.wi-bad .wi-ck{background:#d93a3a}
.wi-hero.wi-good{color:#13a05b}.wi-hero.wi-warn{color:#e08a00}.wi-hero.wi-bad{color:#d93a3a}
.wi-hero{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;text-align:center;padding:4px 0 2px;margin:0 -18px}
.wi-hero::before{content:'';position:absolute;inset:6% 0 -26px;-webkit-mask:linear-gradient(#000 62%,transparent);mask:linear-gradient(#000 62%,transparent);z-index:-1;pointer-events:none;background:radial-gradient(ellipse 30% 42% at 16% 78%,color-mix(in srgb,var(--pri) 6%,transparent) 99%,transparent 100%),radial-gradient(ellipse 34% 52% at 36% 70%,color-mix(in srgb,var(--pri) 5%,transparent) 99%,transparent 100%),radial-gradient(ellipse 36% 48% at 66% 74%,color-mix(in srgb,var(--pri) 5.5%,transparent) 99%,transparent 100%),radial-gradient(ellipse 30% 40% at 90% 80%,color-mix(in srgb,var(--pri) 4.5%,transparent) 99%,transparent 100%),radial-gradient(circle 5px at 92% 34%,color-mix(in srgb,var(--pri) 12%,transparent) 99%,transparent 100%)}
.wi-gl{width:min(150px,46%);height:auto;margin:0 auto}
.wi-hero h4{margin:2px 0 0;font-size:clamp(24px,2.6vw,32px);line-height:1.15;font-weight:800;color:var(--hd);letter-spacing:-.01em;overflow-wrap:anywhere}
.wi-sm{list-style:none;margin:0;padding:4px 0 0}
.wi-sm li{display:flex;align-items:center;gap:12px;padding:8px 2px;border-top:1px solid var(--bd);font-size:16px}
.wi-sm li:first-child{border-top:0}
.wi-sm i{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--pri2);color:var(--pri)}.wi-sm i svg{width:20px;height:20px}
.wi-sm span{flex:1;color:var(--tx)}.wi-sm small{display:block;color:var(--mut);font-size:12.5px;line-height:1.3;margin-top:1px}
.wi-sm b{font-weight:800;color:var(--hd);font-size:16px;white-space:nowrap}
.wi-pill{font-style:normal;font-weight:700;font-size:15px;padding:5px 20px;border-radius:99px}
.wi-pill.wi-good{background:#d4f3e1;color:#0f8a4b}.wi-pill.wi-warn{background:#ffe9bd;color:#b36200}.wi-pill.wi-bad{background:#fbd5d5;color:#c02424}
.wi-r{display:flex;flex-direction:column;background:color-mix(in srgb,var(--pri2) 35%,var(--sf))}
.wi-r::before{content:'';position:absolute;right:-30px;top:-30px;width:300px;height:190px;z-index:0;pointer-events:none;opacity:.55;background:radial-gradient(circle,color-mix(in srgb,var(--pri) 22%,transparent) 1.4px,transparent 1.8px) 0 0/10px 10px;-webkit-mask:radial-gradient(ellipse at 70% 30%,#000 0,transparent 70%);mask:radial-gradient(ellipse at 70% 30%,#000 0,transparent 70%)}
.wi-r::after{content:'';position:absolute;left:-60px;bottom:-70px;width:280px;height:150px;border-radius:50%;z-index:0;pointer-events:none;background:color-mix(in srgb,var(--pri) 4%,transparent)}
.wi-r h4{display:flex;align-items:center;gap:12px;margin:0 0 10px;font-size:22px;font-weight:800;color:var(--hd)}
.wi-r h4 i{display:grid;place-items:center;width:34px;height:34px;color:var(--pri)}.wi-r h4 i svg{width:32px;height:32px}
.wi-kv{margin:0;border-radius:12px;overflow:hidden;flex:1;display:flex;flex-direction:column}
.wi-row{display:grid;grid-template-columns:minmax(150px,32%) 1fr;gap:12px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--bd);min-height:40px;flex:1 1 auto}
.wi-row:nth-child(odd){background:var(--sf)}.wi-row:nth-child(even){background:color-mix(in srgb,var(--pri2) 45%,var(--sf))}
.wi-row:last-child{border-bottom:0}
.wi-row dt{color:var(--mut);font-weight:500;font-size:15.5px}
.wi-row dd{margin:0;color:var(--tx);font-weight:500;font-size:15.5px;line-height:1.55;overflow-wrap:anywhere}
.wi-tip{grid-column:1/-1;position:relative;overflow:hidden;display:flex;align-items:center;gap:18px;border:1px solid var(--bd);border-radius:18px;padding:12px 20px;background:radial-gradient(ellipse 22% 130% at 6% 110%,color-mix(in srgb,var(--pri) 5%,transparent) 99%,transparent 100%),radial-gradient(ellipse 18% 120% at 62% -10%,color-mix(in srgb,var(--pri) 4%,transparent) 99%,transparent 100%),linear-gradient(90deg,color-mix(in srgb,var(--pri2) 70%,var(--sf)),var(--pri2))}
.wi-tip>*{position:relative}
.wi-bulb{flex:none;display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:var(--sf)}.wi-bulb svg{width:40px;height:40px}
.wi-tip>div:nth-child(2){flex:1;min-width:0}
.wi-tip b{display:block;font-size:17px;font-weight:800;color:var(--hd)}.wi-tip p{margin:2px 0 0;font-size:14.5px;color:var(--mut);line-height:1.5}
.wi-act{display:flex;gap:14px;flex:none}
.wi-act button{display:inline-flex;align-items:center;gap:9px;border-radius:99px;font-family:inherit;font-weight:700;font-size:16px;line-height:1;padding:14px 26px;cursor:pointer;white-space:nowrap;transition:filter .2s,transform .2s}
.wi-act button svg{width:21px;height:21px}.wi-act button:hover{transform:translateY(-1px)}
.wi-b1{background:var(--sf);color:var(--pri);border:2px solid var(--pri)}
.wi-b2{background:var(--pri);color:#fff;border:2px solid var(--pri)}.wi-b2:hover{filter:brightness(.93)}
html[data-theme=dark] .wi-ban.wi-good{background:#0f3a2a;border-color:#1c5a41}html[data-theme=dark] .wi-ban.wi-good b{color:#5fd69a}
html[data-theme=dark] .wi-ban.wi-warn{background:#3d2f0c;border-color:#5f4915}html[data-theme=dark] .wi-ban.wi-warn b{color:#f5b84a}
html[data-theme=dark] .wi-ban.wi-bad{background:#431a1a;border-color:#6b2a2a}html[data-theme=dark] .wi-ban.wi-bad b{color:#ff8a8a}
html[data-theme=dark] .wi-pill.wi-good{background:#0f3a2a;color:#5fd69a}html[data-theme=dark] .wi-pill.wi-warn{background:#3d2f0c;color:#f5b84a}html[data-theme=dark] .wi-pill.wi-bad{background:#431a1a;color:#ff8a8a}
html[data-theme=dark] .wi-sm i{color:#8fb4ff}html[data-theme=dark] .wi-r h4 i{color:#8fb4ff}
html[data-theme=dark] .wi-b1{color:#8fb4ff;border-color:#4f8bff}html[data-theme=dark] .wi-b2{background:#2f6dff;border-color:#2f6dff}
html[data-theme=dark] .wi-bulb{background:var(--bg)}
@media(max-width:980px){
  #rb-whois .wi{grid-template-columns:1fr}
  .wi-tip{flex-wrap:wrap}.wi-act{width:100%;flex-wrap:wrap}.wi-act button{flex:1 1 200px;justify-content:center}
}
@media(max-width:640px){
  .wi-l,.wi-r{padding:16px 14px}
  .wi-ban{gap:12px;padding:14px}.wi-ban b{font-size:20px}.wi-ck{width:50px;height:50px}.wi-ck svg{width:26px;height:26px}
  .wi-hero{margin:0 -14px}
  .wi-row{grid-template-columns:1fr;gap:1px;padding:9px 12px}
  .wi-row dt{font-size:13.5px}
  .wi-sm li{font-size:15px;gap:10px}.wi-sm b{font-size:15px}
  .wi-tip{padding:14px}.wi-bulb{width:50px;height:50px}.wi-bulb svg{width:32px;height:32px}
}

/* ===== Ringkasan: tampilan baru (ilustrasi, kartu lembut) ===== */
.pub #sec-ringkasan::before{display:none}
#sec-ringkasan{background:var(--sf)}
.rsh h3.rs-hp{display:inline-flex;gap:10px;padding:6px 18px 6px 8px;border-radius:99px;background:color-mix(in srgb,var(--pri) 8%,var(--sf));font-size:18px}
.rs-hp .rico{width:32px;height:32px;border-radius:50%}.rs-hp .rico svg{width:18px;height:18px}
#sec-ringkasan .rs-hero{padding:18px 22px 16px;background:linear-gradient(115deg,color-mix(in srgb,var(--pri) 12%,var(--sf)) 0%,color-mix(in srgb,var(--pri) 5%,var(--sf)) 60%,color-mix(in srgb,var(--pri) 9%,var(--sf)) 100%);border-color:color-mix(in srgb,var(--pri) 18%,var(--bd))}
#sec-ringkasan .rs-hero::before{opacity:.35}
#sec-ringkasan .rs-hero::after{width:380px;height:200px;right:-40px;top:auto;bottom:-110px;border-radius:50%;animation:none;background:color-mix(in srgb,var(--pri) 10%,transparent)}
.rs-ill{position:absolute;right:22px;top:-6px;width:300px;z-index:0;pointer-events:none}.rs-ill svg{display:block;width:100%;height:auto}
#sec-ringkasan .rs-hero .rs-top{position:relative;z-index:1}
#sec-ringkasan .rs-av{width:62px;height:62px;border-radius:16px;font-size:30px}
#sec-ringkasan .rs-top{gap:18px;margin-bottom:0}
#sec-ringkasan .rs-dn small{font-size:12.5px;letter-spacing:.03em;color:color-mix(in srgb,var(--pri) 70%,var(--hd))}
#sec-ringkasan .rs-top h2{font-size:clamp(26px,3.4vw,38px);letter-spacing:-.8px}
#sec-ringkasan .rs-top .rs-chip{font-size:15px;padding:9px 20px;margin-left:6px}
#sec-ringkasan .rs-vd{position:relative;z-index:1;align-items:center;gap:12px;margin-top:16px;padding:9px 16px 9px 12px;border:1px solid color-mix(in srgb,var(--ac) 22%,var(--bd));border-radius:99px;background:color-mix(in srgb,var(--ac) 11%,var(--sf))}
#sec-ringkasan .rs-vi{width:30px;height:30px;box-shadow:none}#sec-ringkasan .rs-vi svg{width:17px;height:17px}
#sec-ringkasan .rs-vd p{font-size:14.5px;line-height:1.5}
#sec-ringkasan .rs-vd:has(.rs-cta){border-radius:20px}
#sec-ringkasan .rs-card{padding:22px;border-radius:22px;background:linear-gradient(170deg,color-mix(in srgb,var(--ac) 6%,var(--sf)),var(--sf) 62%)}
#sec-ringkasan .rs-card::after{right:-60px;bottom:-80px;width:260px;height:200px;background:color-mix(in srgb,var(--ac) 6%,transparent)}
#sec-ringkasan .rs-life::before{content:"";position:absolute;inset:auto 0 0 0;height:46%;pointer-events:none;background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'><path d='M0 60C60 20 120 20 190 55S320 95 400 40V120H0z' fill='%2313a05b' fill-opacity='.09'/><path d='M0 85C80 55 150 70 220 88S340 100 400 74V120H0z' fill='%2313a05b' fill-opacity='.07'/></svg>") center bottom/100% 100% no-repeat}
#sec-ringkasan .rs-card>*{position:relative;z-index:1}
#sec-ringkasan .rs-ch{font-size:19px;gap:14px;margin-bottom:20px}
#sec-ringkasan .rs-ch .rs-ic{width:44px;height:44px;border-radius:50%}#sec-ringkasan .rs-ch .rs-ic svg{width:22px;height:22px}
#sec-ringkasan .rs-tag{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;font-size:14px}
#sec-ringkasan .rs-tag svg{width:16px;height:16px;fill:currentColor;fill-opacity:.2;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#sec-ringkasan .rs-arc{--s:200px}#sec-ringkasan .rs-arc.sm{--s:116px}
#sec-ringkasan .rs-arc .t{stroke:color-mix(in srgb,var(--ac) 12%,var(--sf))}
#sec-ringkasan .rs-arc circle{stroke-width:10}
#sec-ringkasan .rs-gc b{font-size:56px}#sec-ringkasan .rs-gc>span{font-size:17px;color:var(--ac);margin-top:8px}
#sec-ringkasan #rs-life .rs-arc::after{content:"";position:absolute;left:-14px;top:-4px;width:40px;height:40px;background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><g stroke='%23ffc233' stroke-width='3.5' stroke-linecap='round'><path d='M6 22l9 3M10 10l7 7M22 4l2 9'/></g></svg>") center/contain no-repeat}
#sec-ringkasan .rs-tl{gap:12px}
#sec-ringkasan .rs-tl li{gap:14px}
#sec-ringkasan .rs-tl li:not(:last-child)::before{left:21px;top:46px;height:calc(100% - 20px);border-left:2px dotted color-mix(in srgb,var(--pri) 35%,var(--bd))!important}
#sec-ringkasan .rs-nd{width:44px;height:44px;border:0!important;color:var(--pri);background:color-mix(in srgb,var(--pri) 10%,var(--sf))}
#sec-ringkasan .rs-tl li.e .rs-nd{color:var(--pri)}
#sec-ringkasan .rs-nd svg{width:23px;height:23px}
#sec-ringkasan .rs-tl small{font-size:14px;font-weight:500}
#sec-ringkasan .rs-tl b{font-size:18px}
#sec-ringkasan .rs-pl{font-size:15px;font-weight:500}#sec-ringkasan .rs-pl b{font-size:16px}
#sec-ringkasan .rs-track{height:12px;background:color-mix(in srgb,var(--pri) 12%,var(--sf))}
#sec-ringkasan .rs-facts{border-top:0;padding-top:0;margin-top:20px;gap:14px}
#sec-ringkasan .rs-fa{padding:14px 16px;border-radius:18px;background:color-mix(in srgb,var(--pri) 5%,var(--sf));box-shadow:0 6px 16px -12px color-mix(in srgb,var(--pri) 60%,transparent)}
#sec-ringkasan .rs-fa .rs-ic{width:44px;height:44px;border-radius:50%}#sec-ringkasan .rs-fa .rs-ic svg{width:22px;height:22px}
#sec-ringkasan .rs-fa small{font-size:13.5px}#sec-ringkasan .rs-fa b{font-size:15.5px}
#sec-ringkasan .rs-hs{margin-bottom:18px}
#sec-ringkasan .rs-hst strong{font-size:19px}#sec-ringkasan .rs-hst span{font-size:14.5px}
#sec-ringkasan .rs-hc{padding:11px 16px 11px 12px;border-radius:18px;background:var(--sf);box-shadow:0 6px 16px -12px color-mix(in srgb,var(--ac) 70%,transparent)}
#sec-ringkasan .rs-hc .rs-ic{width:42px;height:42px;border-radius:50%}
#sec-ringkasan .rs-hc b{font-size:16px}
#sec-ringkasan .rs-st{padding:5px 14px 5px 11px;font-size:13.5px}
.rs-tip{margin-top:16px}
@media(max-width:900px){.rs-ill{width:230px;opacity:.9}}
@media(max-width:700px){.rs-ill{display:none}#sec-ringkasan .rs-vd{border-radius:20px;align-items:flex-start}#sec-ringkasan .rs-av{width:52px;height:52px}}
@media(max-width:560px){#sec-ringkasan .rs-card{padding:16px}#sec-ringkasan .rs-arc{--s:168px}#sec-ringkasan .rs-gc b{font-size:46px}#sec-ringkasan .rs-tl b{font-size:16px}#sec-ringkasan .rs-top .rs-chip{margin-left:0}}
html[data-theme=dark] #sec-ringkasan{background:var(--sf)}
#sec-ringkasan .rs-life{container-type:inline-size}
@container (max-width:480px){
  #sec-ringkasan .rs-life .rs-lb{gap:14px}
  #sec-ringkasan .rs-life .rs-arc{--s:150px}
  #sec-ringkasan .rs-life .rs-gc b{font-size:44px}#sec-ringkasan .rs-life .rs-gc>span{font-size:15px}
  #sec-ringkasan .rs-life .rs-nd{width:38px;height:38px}#sec-ringkasan .rs-life .rs-nd svg{width:20px;height:20px}
  #sec-ringkasan .rs-life .rs-tl li{gap:10px}
  #sec-ringkasan .rs-life .rs-tl li:not(:last-child)::before{left:18px;top:40px}
  #sec-ringkasan .rs-life .rs-tl small{font-size:12.5px}#sec-ringkasan .rs-life .rs-tl b{font-size:15px}
  #sec-ringkasan .rs-life .rs-ch{font-size:17px;gap:10px}#sec-ringkasan .rs-life .rs-ch .rs-ic{width:38px;height:38px}
  #sec-ringkasan .rs-life .rs-tag{padding:6px 12px;font-size:13px}
  #sec-ringkasan .rs-life .rs-facts{gap:10px}#sec-ringkasan .rs-life .rs-fa{padding:12px;gap:9px}
  #sec-ringkasan .rs-life .rs-fa .rs-ic{width:36px;height:36px}
}
@container (max-width:380px){#sec-ringkasan .rs-life .rs-lb{grid-template-columns:1fr;justify-items:center}#sec-ringkasan .rs-life .rs-tl{justify-self:stretch}#sec-ringkasan .rs-life .rs-facts{grid-template-columns:1fr}}
#sec-ringkasan .rs-hero{container-type:inline-size}
@container (max-width:900px){.rs-ill{width:200px;right:10px;top:-2px}}
@container (max-width:700px){.rs-ill{display:none}}
@media(max-width:700px){#sec-ringkasan .rs-hero .rs-top h2{font-size:24px}}
#sec-ringkasan .rs-life .rs-tl{gap:16px}

.rs-ill{right:16px;top:6px;width:280px;z-index:2}
#sec-ringkasan .rs-vd{border-radius:22px;padding-right:300px}
@container (max-width:900px){.rs-ill{width:190px;right:8px;top:4px}#sec-ringkasan .rs-vd{padding-right:200px}}
@container (max-width:700px){#sec-ringkasan .rs-vd{padding-right:16px}}
#sec-ringkasan .rs-hc{padding:9px 14px 9px 11px}
#sec-ringkasan .rs-hs{margin-bottom:14px}
@container (min-width:481px){#sec-ringkasan .rs-life .rs-arc{--s:210px}#sec-ringkasan .rs-life .rs-gc b{font-size:60px}#sec-ringkasan .rs-life .rs-tl b{font-size:16px}}

/* ===== DNS & SSL berdampingan ===== */
.pub .rs-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;margin-bottom:16px;align-items:stretch}
.pub .rs-pair .rsec,.pub .rs-pair .rsec:first-child,.pub .rs-pair .rsec:last-child{margin-bottom:0;display:flex;flex-direction:column;min-width:0;padding:20px 22px 22px;border-radius:22px;box-shadow:0 10px 30px -22px rgba(31,98,242,.35)}
.rs-pair .rsh{margin-bottom:14px}.rs-pair .rsh h3{font-size:18px}
.rs-pair .rsec>div:last-child{flex:1;min-width:0;display:flex;flex-direction:column}
.rs-pair .rsec>div:last-child>.dn,.rs-pair .rsec>div:last-child>.ss{flex:1}
/* DNS */
.dn{display:flex;flex-direction:column}
.dn-fl{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.dn-fl button{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--bd);background:var(--sf);color:var(--mut);font-family:inherit;font-weight:700;font-size:12.5px;line-height:1;padding:7px 12px;border-radius:99px;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s}
.dn-fl button b{font-size:11.5px;padding:2px 6px;border-radius:99px;background:var(--pri2);color:var(--pri);transition:inherit}
.dn-fl button:hover{border-color:var(--pri);color:var(--pri)}
.dn-fl button.on{background:var(--pri);border-color:var(--pri);color:#fff;box-shadow:0 8px 16px -10px var(--pri)}
.dn-fl button.on b{background:rgba(255,255,255,.22);color:#fff}
.dn-fl button:focus-visible,.dn-more:focus-visible,.dn-cp:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
.dn-l{list-style:none;margin:0;padding:4px 0;border:1px solid var(--bd);border-radius:16px;background:var(--sf);overflow:hidden}
.dn-l li{display:grid;grid-template-columns:58px minmax(0,1fr) auto 30px;column-gap:12px;align-items:center;padding:9px 12px;transition:background .2s;animation:dnIn .4s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i,0)*35ms)}
.dn-l li.b{border-top:1px solid color-mix(in srgb,var(--bd) 65%,transparent)}
.dn-l li:hover{background:color-mix(in srgb,var(--pri) 5%,var(--sf))}
.dn:not(.open) .dn-l li.x{display:none}
.dn-l .tp{min-width:0;width:58px;padding:3px 0;border-radius:7px;font-size:11.5px}
.dn-l code{font:500 13.5px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--tx);overflow-wrap:anywhere;word-break:break-word}
.dn-l em{font-style:normal;font-size:12px;font-weight:600;color:var(--mut);white-space:nowrap;font-variant-numeric:tabular-nums}
.dn-cp{display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:9px;background:none;color:var(--mut);cursor:pointer;opacity:0;transition:opacity .2s,background .2s,color .2s}
.dn-cp svg{width:16px;height:16px}
.dn-l li:hover .dn-cp,.dn-cp:focus-visible,.dn-cp.ok{opacity:1}
.dn-cp:hover{background:var(--pri2);color:var(--pri)}.dn-cp.ok{color:var(--good)}
@media(hover:none){.dn-cp{opacity:.55}}
.dn-more{align-self:center;display:inline-flex;align-items:center;gap:7px;margin-top:12px;border:0;background:none;color:var(--pri);font-family:inherit;font-weight:700;font-size:13.5px;padding:6px 12px;border-radius:99px;cursor:pointer;transition:background .2s}
.dn-more:hover{background:var(--pri2)}.dn-more svg{width:16px;height:16px;transition:transform .25s}
.dn-more[aria-expanded=true] svg{transform:rotate(180deg)}
.t-A{background:#e4eeff;color:#1f62f2}.t-AAAA{background:#e0f4fb;color:#0c7fa8}.t-CNAME{background:#fde8f1;color:#c0286b}
@keyframes dnIn{from{opacity:0;transform:translateY(6px)}}
/* SSL */
.ss{display:flex;flex-direction:column}
.ss-hero{--ac:var(--good);display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:18px;border:1px solid color-mix(in srgb,var(--ac) 26%,var(--bd));background:linear-gradient(110deg,color-mix(in srgb,var(--ac) 12%,var(--sf)),color-mix(in srgb,var(--ac) 3%,var(--sf)))}
.ss-hero.warn{--ac:var(--warn)}.ss-hero.bad{--ac:var(--bad)}
.ss-ic{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;color:#fff;background:var(--ac);box-shadow:0 10px 18px -10px var(--ac)}.ss-ic svg{width:24px;height:24px}
.ss-hero>div:nth-child(2){flex:1;min-width:0}
.ss-hero b{display:block;font-size:19px;font-weight:800;color:var(--ac);line-height:1.2}
.ss-hero span{display:block;margin-top:2px;font-size:13.5px;color:var(--mut)}.ss-hero span strong{color:var(--hd)}
.ss-left{text-align:center;padding-left:16px;border-left:1px solid color-mix(in srgb,var(--ac) 28%,var(--bd))}
.ss-left b{font-size:30px;letter-spacing:-.5px;font-variant-numeric:tabular-nums}.ss-left small{display:block;font-size:12px;font-weight:700;color:var(--mut)}
.ss-bar{margin:16px 2px 6px}
.ss-tr{height:8px;border-radius:99px;background:color-mix(in srgb,var(--pri) 11%,var(--sf));overflow:hidden}
.ss-tr i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--good) 45%,#fff),var(--good));animation:ssGrow 1s cubic-bezier(.2,.8,.2,1) backwards}
.ss-bl{display:flex;justify-content:space-between;gap:8px;margin-top:8px;font-size:12px;font-weight:600;color:var(--mut)}.ss-bl span:nth-child(2){color:var(--hd);font-weight:800}
.ss-kv{margin:12px 0 0;flex:1;border:1px solid var(--bd);border-radius:16px;background:var(--sf);padding:4px 0;display:flex;flex-direction:column;justify-content:space-around}
.ss-r{display:grid;grid-template-columns:116px minmax(0,1fr);gap:12px;align-items:baseline;padding:9px 14px}
.ss-r+.ss-r{border-top:1px solid color-mix(in srgb,var(--bd) 65%,transparent)}
.ss-r dt{font-size:13px;font-weight:600;color:var(--mut)}
.ss-r dd{margin:0;font-size:14px;font-weight:700;color:var(--hd);overflow-wrap:anywhere;line-height:1.5}
.ss-san{display:flex;flex-wrap:wrap;gap:6px}.ss-san span{padding:2px 10px;border-radius:99px;background:var(--pri2);color:var(--pri);font:600 12.5px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
html[data-theme=dark] .ss-san span{color:#8fb4ff}
html[data-theme=dark] .t-A{background:#16295a;color:#8fb4ff}html[data-theme=dark] .t-AAAA{background:#0e3a4a;color:#6fd0f0}html[data-theme=dark] .t-CNAME{background:#4a1a33;color:#ff9ac6}
html[data-theme=dark] .dn-fl button.on{color:#fff}
@keyframes ssGrow{from{width:0!important}}
@media(max-width:980px){.pub .rs-pair{grid-template-columns:1fr;gap:16px}}
@media(max-width:560px){
  .pub .rs-pair .rsec,.pub .rs-pair .rsec:first-child,.pub .rs-pair .rsec:last-child{padding:16px 14px 18px}
  .dn-l li{grid-template-columns:52px minmax(0,1fr) 30px;row-gap:2px}.dn-l .tp{width:52px}.dn-l em{grid-column:2;grid-row:2}.dn-cp{grid-column:3;grid-row:1/3}
  .ss-r{grid-template-columns:1fr;gap:1px;padding:9px 12px}
  .ss-hero{flex-wrap:wrap}.ss-left{border-left:0;padding-left:0;text-align:left;display:flex;align-items:baseline;gap:6px}
}
@media(prefers-reduced-motion:reduce){.dn-l li,.ss-tr i{animation:none}}
.dn-fl{gap:5px}.dn-fl button{padding:6px 10px;gap:5px}

/* SSL: kapsul status seperti filter DNS */
.ss{--ac:var(--good)}.ss.ss-warn{--ac:var(--warn)}.ss.ss-bad{--ac:var(--bad)}
.ss-fl{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px}
.ss-fl span{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--bd);background:var(--sf);color:var(--mut);font-weight:700;font-size:12.5px;line-height:1;padding:6px 11px;border-radius:99px;white-space:nowrap}
.ss-fl svg{width:14px;height:14px;flex:none}
.ss-fl .on{background:var(--ac);border-color:var(--ac);color:#fff;box-shadow:0 8px 16px -10px var(--ac)}
.ss-fl .dy{color:var(--ac);border-color:color-mix(in srgb,var(--ac) 35%,var(--bd));background:color-mix(in srgb,var(--ac) 8%,var(--sf))}
.ss-fl .dy b{font-size:11.5px;font-weight:800;padding:2px 7px;margin-right:-4px;border-radius:99px;background:color-mix(in srgb,var(--ac) 16%,transparent)}
.ss-bar{margin:0 0 12px;padding:12px 14px;border:1px solid var(--bd);border-radius:16px;background:var(--sf)}
.ss-bar .ss-tr{margin:7px 0}
.ss-bar .ss-tr i{background:linear-gradient(90deg,color-mix(in srgb,var(--ac) 45%,#fff),var(--ac))}
.ss-bar .ss-bl span:nth-child(2){color:var(--hd);font-weight:800}
.ss-bar .ss-bl:first-child span:first-child{font-weight:700}
.ss-kv{margin-top:0}
@media(max-width:560px){.ss-fl span{font-size:12px;padding:6px 10px;white-space:normal}}
html[data-theme=dark] .t-MX{background:#4a2f0e;color:#ffb866}html[data-theme=dark] .t-NS{background:#2d2260;color:#b9a2ff}html[data-theme=dark] .t-TXT,html[data-theme=dark] .t-SPF,html[data-theme=dark] .t-DMARC{background:#0f3a2a;color:#5fd69a}html[data-theme=dark] .t-SOA,html[data-theme=dark] .t-CAA{background:#243050;color:#9db0d8}

/* ===== DNS & SSL: gaya kartu seperti desain referensi ===== */
.pub .rs-pair .rsec-x,.pub .rs-pair .rsec-x:first-child,.pub .rs-pair .rsec-x:last-child{position:relative;overflow:hidden;padding:22px 22px 20px;border-radius:26px;background:linear-gradient(180deg,color-mix(in srgb,var(--pri) 4%,var(--sf)),var(--sf) 38%);box-shadow:0 18px 44px -26px rgba(31,98,242,.4)}
.rsh-x{align-items:center;gap:14px;margin-bottom:16px}
.hx-ic{position:relative;flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;color:#fff;background:linear-gradient(145deg,#4c9bff,var(--pri) 60%,#1446c4);box-shadow:0 12px 22px -12px var(--pri),0 0 0 6px color-mix(in srgb,var(--pri) 10%,transparent)}
.hx-ic svg{width:30px;height:30px}
.hx-ic .rdot{position:absolute;right:1px;bottom:1px;width:13px;height:13px;border:2.5px solid var(--sf)}
.hx-tx{flex:1;min-width:0}
.rs-pair .hx-tx h3{display:block;margin:0;font-size:26px;line-height:1.1;font-weight:800;letter-spacing:-.4px;color:var(--hd)}
.hx-tx p{margin:4px 0 0;font-size:14px;line-height:1.35;color:var(--mut)}
.rsh-x .rcp{flex:none;display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:13px;background:var(--sf);color:var(--tx);font-weight:700;font-size:13.5px;box-shadow:0 6px 16px -10px rgba(31,98,242,.5)}
.rsh-x .rcp[hidden]{display:none}
.rsh-x .rcp svg{width:17px;height:17px}
.rsh-x .rcp:hover{color:var(--pri)}
/* DNS */
.dn-fl{padding:8px;margin-bottom:12px;border-radius:99px;background:color-mix(in srgb,var(--pri) 4%,var(--sf));gap:6px}
.dn-fl button{padding:8px 13px;font-size:13px;background:var(--sf);box-shadow:0 4px 10px -8px rgba(31,98,242,.5)}
.dn-fl button.on{background:linear-gradient(180deg,#3d86ff,var(--pri))}
.dn-l{border-radius:20px;padding:0;box-shadow:0 8px 24px -20px rgba(31,98,242,.5)}
.dn-l li{grid-template-columns:62px minmax(0,1fr) auto 30px;column-gap:14px;padding:13px 14px}
.dn-l .tp{width:62px;padding:6px 0;border-radius:12px;font-size:13px}
.dn-l code{font-family:inherit;font-weight:500;font-size:15.5px;color:var(--hd)}
.dn-l em{display:inline-flex;align-items:center;gap:6px;font-size:13px}
.dn-l em svg{width:15px;height:15px;flex:none}
.t-AAAA{background:#dff6ec;color:#0f9460}.t-MX{background:#fff0dc;color:#e0870a}.t-NS{background:#efe9ff;color:#6b45d8}
html[data-theme=dark] .t-AAAA{background:#0f3a2a;color:#5fd69a}
.ft-note{display:flex;align-items:center;gap:12px;margin-top:14px;padding:14px 16px;border-radius:18px;background:linear-gradient(110deg,color-mix(in srgb,var(--pri) 9%,var(--sf)),color-mix(in srgb,var(--pri) 3%,var(--sf)))}
.ft-note b{display:block;font-size:15px;font-weight:700;color:var(--pri)}
.ft-note span{display:block;margin-top:2px;font-size:13px;color:var(--mut)}
.ft-ic{flex:none;display:grid;place-items:center;width:34px;height:34px;color:var(--pri)}.ft-ic svg{width:30px;height:30px}
.dn .ft-note{margin-top:auto}.dn-more{margin-bottom:2px}.dn-l{margin-bottom:0}.dn>.dn-l+.ft-note{margin-top:14px}
/* SSL */
.ss{--ac:var(--good)}
.ss-hero{gap:16px;padding:18px 20px;border-radius:22px;margin-bottom:14px;background:linear-gradient(110deg,color-mix(in srgb,var(--ac) 22%,var(--sf)),color-mix(in srgb,var(--ac) 7%,var(--sf)));border-color:color-mix(in srgb,var(--ac) 40%,var(--bd))}
.ss-hero.warn{--ac:var(--warn)}.ss-hero.bad{--ac:var(--bad)}
.sh-shield{flex:none;display:grid;place-items:center;width:64px;height:72px;color:var(--ac)}
.sh-shield svg{width:64px;height:64px;fill:currentColor;stroke:#fff;stroke-width:1.2;filter:drop-shadow(0 10px 12px color-mix(in srgb,var(--ac) 45%,transparent))}
.sh-shield svg rect,.sh-shield svg path:last-child{fill:none;stroke:#fff;stroke-width:1.8}
.sh-tx{flex:1;min-width:0}
.ss-hero .sh-tx b{display:flex;align-items:center;gap:9px;font-size:26px;font-weight:800;color:var(--ac);line-height:1.15}
.sh-ok{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ac);color:#fff}.sh-ok svg{width:16px;height:16px}
.ss-hero .sh-tx span{margin-top:6px;font-size:14.5px;color:var(--tx)}.ss-hero .sh-tx strong{font-weight:800;color:var(--hd)}
.ss-left{padding-left:20px;text-align:center}
.ss-left b{display:block;font-size:44px;line-height:1;font-weight:800;color:var(--hd);letter-spacing:-1px}
.ss-left small{margin-top:4px;font-size:14px;font-weight:600;color:var(--mut)}
.ss-det{flex:1;display:flex;flex-direction:column;border:1px solid var(--bd);border-radius:20px;background:var(--sf);overflow:hidden;box-shadow:0 8px 24px -20px rgba(31,98,242,.5)}
.ss-dh{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--bd)}
.ss-dh>i{display:grid;place-items:center;width:26px;height:26px;color:var(--pri)}.ss-dh>i svg{width:26px;height:26px}
.ss-dh h4{flex:1;margin:0;font-size:16.5px;font-weight:800;color:var(--hd)}
.ss-pill{display:inline-flex;align-items:center;gap:7px;padding:5px 13px;border-radius:99px;font-size:13.5px;font-weight:700;background:#e3f6ec;color:var(--good)}
.ss-pill::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor}
.ss-pill.warn{background:#fff3dc;color:var(--warn)}.ss-pill.bad{background:#fde7e7;color:var(--bad)}
.ss-det .ss-kv{margin:0;border:0;border-radius:0;padding:0}
.ss-r{grid-template-columns:170px minmax(0,1fr);align-items:center;padding:10px 16px}
.ss-r dt{display:flex;align-items:center;gap:12px;font-size:14.5px;font-weight:500;color:var(--tx)}
.ss-r dt::after{content:":";margin-left:auto;padding-right:6px;color:var(--mut)}
.ss-r dt i{flex:none;display:grid;place-items:center;width:22px;height:22px;color:var(--pri)}.ss-r dt i svg{width:21px;height:21px}
.ss-r dd{font-size:15.5px;font-weight:500;color:var(--hd)}
.ss-san span{padding:4px 14px;font-family:inherit;font-weight:600;font-size:13.5px}
.ft-note.ft-good{background:linear-gradient(110deg,color-mix(in srgb,var(--good) 16%,var(--sf)),color-mix(in srgb,var(--good) 4%,var(--sf)))}
.ft-note.ft-warn{background:linear-gradient(110deg,color-mix(in srgb,var(--warn) 16%,var(--sf)),color-mix(in srgb,var(--warn) 4%,var(--sf)))}
.ft-note.ft-bad{background:linear-gradient(110deg,color-mix(in srgb,var(--bad) 14%,var(--sf)),color-mix(in srgb,var(--bad) 4%,var(--sf)))}
.ft-good .ft-ic,.ft-good b{color:var(--good)}.ft-warn .ft-ic,.ft-warn b{color:var(--warn)}.ft-bad .ft-ic,.ft-bad b{color:var(--bad)}
.ft-good b,.ft-warn b,.ft-bad b{color:var(--hd)}
.ft-ic svg{width:34px;height:34px}.ft-info .ft-ic svg{width:30px;height:30px}
@media(max-width:560px){
  .rs-pair .hx-tx h3{font-size:22px}.hx-ic{width:48px;height:48px}.hx-ic svg{width:26px;height:26px}.hx-tx p{font-size:13px}
  .rsh-x .rcp span{display:none}.rsh-x .rcp{padding:9px 11px}
  .ss-hero{padding:14px}.sh-shield{width:44px;height:52px}.sh-shield svg{width:44px;height:44px}.ss-hero .sh-tx b{font-size:21px}.ss-left b{font-size:34px}.ss-left{padding-left:12px;display:block;text-align:center}
  .ss-r{grid-template-columns:1fr;gap:3px;padding:10px 14px}.ss-r dt::after{display:none}
  .dn-l li{grid-template-columns:54px minmax(0,1fr) 30px;padding:11px 12px}.dn-l .tp{width:54px}.dn-l code{font-size:14px}
}

/* ---- penyempurnaan ---- */
.dn{flex:1}.dn-l{flex:none}.dn-more{align-self:center}
.dn .ft-note{margin-top:auto}.dn>.dn-l+.ft-note,.dn>.dn-more+.ft-note{margin-top:16px}
.rsec-x::before{content:"";position:absolute;inset:auto -40px -60px auto;width:260px;height:160px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--pri) 12%,transparent),transparent);pointer-events:none}
.rsec-x>*{position:relative}
.hx-ic{width:60px;height:60px}.hx-ic .rdot{display:none}
.rs-pair .hx-tx h3{font-size:30px}
.ft-note{position:relative;overflow:hidden;min-height:66px;padding-right:130px}
.ft-art{position:absolute;right:6px;bottom:0;width:120px;height:80px;pointer-events:none}.ft-art svg{width:100%;height:100%;display:block}
.ft-info{background:linear-gradient(110deg,color-mix(in srgb,var(--pri) 12%,var(--sf)),color-mix(in srgb,var(--pri) 4%,var(--sf)))}
.sh-shield{width:76px;height:84px}.sh-shield svg{width:76px;height:84px;fill:none;stroke:none;filter:drop-shadow(0 10px 10px color-mix(in srgb,var(--ac) 40%,transparent))}
.sh-sp{position:absolute;width:10px;height:10px;opacity:.55;background:#fff;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.sp1{right:38%;top:14px}.sp2{right:36%;bottom:16px;width:7px;height:7px}
.ss-hero{position:relative}
@media(max-width:560px){.ft-note{padding-right:96px}.ft-art{width:90px;height:60px}.sh-sp{display:none}.rs-pair .hx-tx h3{font-size:24px}}
.dn>.dn-l{margin-bottom:16px}.dn>.dn-more{margin:-6px 0 10px}
.dn>.dn-l+.ft-note,.dn>.dn-more+.ft-note,.dn .ft-note{margin-top:auto}
.dn-l code{font-size:15px;overflow-wrap:break-word;word-break:normal}
.ft-art{width:96px;height:64px;right:10px;bottom:2px}.ft-note{padding-right:120px}
/* filter satu baris + IPv6 muat */
.dn-fl{padding:6px;gap:4px;flex-wrap:wrap}
.dn-fl button{padding:7px 10px;gap:5px;font-size:12.5px}
.dn-fl button b{padding:2px 5px;font-size:11px}
@media(min-width:561px){.dn-fl{flex-wrap:nowrap}.dn-fl button{flex:1 1 auto;justify-content:center;min-width:0}}
.dn-l li{column-gap:10px}
.dn-l code{font-size:14px;letter-spacing:-.1px}
.dn-l em{font-size:12.5px;gap:5px}

/* ===== v3: disempurnakan agar mirip desain contoh ===== */
.rsec-x::before{display:none}
.pub .rs-pair .rsec-x,.pub .rs-pair .rsec-x:first-child,.pub .rs-pair .rsec-x:last-child{padding:26px 26px 24px;border-radius:34px;border:1px solid #e1ebfb;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200'%3E%3Cpath d='M110 0C190 70 250 20 400 100V0z' fill='%23dcebff' opacity='.75'/%3E%3Cpath d='M230 0C290 45 345 32 400 62V0z' fill='%23c6dffe' opacity='.65'/%3E%3C/svg%3E") no-repeat right top/64% auto,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 160'%3E%3Cpath d='M0 70C90 25 150 115 270 102S365 138 400 160H0z' fill='%23e4efff'/%3E%3Cpath d='M0 108C70 78 140 142 240 132S335 160 400 160H0z' fill='%23d0e4ff' opacity='.75'/%3E%3C/svg%3E") no-repeat left bottom/72% auto,linear-gradient(180deg,#f2f7ff 0%,#fff 48%);box-shadow:0 26px 54px -32px rgba(31,98,242,.5),inset 0 1px 0 #fff}
/* header */
.rsh-x{gap:20px;margin-bottom:22px;align-items:center}
.hx-ic{isolation:isolate;width:72px;height:72px;margin:6px 8px 6px 6px}
.hx-ic::before{content:"";position:absolute;inset:-13px;border-radius:50%;z-index:-1;background:radial-gradient(closest-side,rgba(110,170,255,.34),rgba(110,170,255,.15) 72%,transparent)}
.hx-ic.hx-dns{background:linear-gradient(150deg,#58a6ff,#1f62f2 58%,#1240b8);box-shadow:0 16px 26px -12px var(--pri),inset 0 2px 3px rgba(255,255,255,.55)}
.hx-ic.hx-dns::after{content:"";position:absolute;left:11%;top:5%;width:62%;height:40%;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.5),transparent)}
.hx-ic.hx-dns svg{position:relative;z-index:1;width:42px;height:42px}
.hx-ic.hx-ssl{background:none;box-shadow:none;width:66px;height:74px}
.hx-ic.hx-ssl::before{inset:-8px -16px}
.hx-ic.hx-ssl svg{width:66px;height:74px;filter:drop-shadow(0 12px 12px rgba(31,98,242,.38))}
.rs-pair .hx-tx h3{font-size:34px;letter-spacing:-.7px}
.hx-tx p{font-size:15.5px;margin-top:5px}
.rsh-x .rcp{gap:9px;padding:12px 19px;border-radius:17px;font-size:15px;color:var(--hd);border:1px solid #e1ebfb;box-shadow:0 10px 22px -14px rgba(31,98,242,.6)}
.rsh-x .rcp svg{width:20px;height:20px}
/* filter */
.dn-fl{padding:7px;border-radius:99px;background:rgba(255,255,255,.72);border:1px solid #e8effc;margin-bottom:14px}
.dn-fl button{padding:9px 11px;gap:6px;font-size:13.5px;font-weight:700;color:var(--hd);border-color:#e3ebfa;box-shadow:0 6px 12px -10px rgba(31,98,242,.6)}
.dn-fl button b{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 4px;border-radius:99px;font-size:12px;background:#e3edff;color:var(--pri)}
.dn-fl button.on{background:linear-gradient(180deg,#3e88ff,#1456e8);border-color:#1456e8;color:#fff;box-shadow:0 12px 20px -9px rgba(20,86,232,.75)}
.dn-fl button.on b{background:rgba(255,255,255,.26);color:#fff}
@media(max-width:1200px) and (min-width:981px){.dn-fl{flex-wrap:wrap}}
/* baris DNS */
.dn-l{border-radius:24px;border-color:#e3ebfa;background:rgba(255,255,255,.88)}
.dn-l li{position:relative}
.dn-l .tp{font-family:inherit;font-weight:800;letter-spacing:.2px;box-shadow:0 8px 14px -12px currentColor}
.dn-l code.lg{font-size:14.5px}
.dn-l li:hover{background:color-mix(in srgb,var(--pri) 4%,#fff)}
@media(min-width:561px){
  .dn-l li{grid-template-columns:76px minmax(0,1fr) auto;column-gap:12px;padding:15px 18px}
  .dn-l .tp{width:76px;padding:9px 0;border-radius:15px;font-size:15.5px}
  .dn-l code{font-size:18px;font-weight:500}
  .dn-l code.lg{font-size:14.5px}
  .dn-l em{font-size:13.5px}.dn-l em svg{width:17px;height:17px}
  .dn-cp{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:#fff;box-shadow:0 6px 14px -8px rgba(31,98,242,.6)}
}
/* banner bawah */
.ft-note{overflow:visible;min-height:96px;padding:16px 214px 16px 20px;margin-top:30px;border-radius:22px}
.ft-note::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M0 72C80 32 160 92 262 62S362 32 400 52V100H0z' fill='%23fff' opacity='.5'/%3E%3Cpath d='M0 88C100 52 200 100 300 77S380 62 400 72V100H0z' fill='%23fff' opacity='.45'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.ft-note>*{position:relative}
.ft-note b{font-size:17.5px}.ft-note span:not(.ft-art){font-size:14px}
.ft-ic{width:42px;height:42px}.ft-ic svg{width:42px;height:42px}
.ft-info .ft-ic svg{width:40px;height:40px}
.ft-art{position:absolute;right:8px;bottom:-2px;width:200px;height:118px}
.dn>.dn-l{margin-bottom:22px}.dn>.dn-more{margin:-8px 0 22px}
.dn .ft-note{margin-top:auto}
/* hero SSL */
.ss-hero{padding:22px 26px;border-radius:26px;border:2px solid #7fe0a8;background:linear-gradient(105deg,#c6f2d9 0%,#e5f9ee 55%,#f3fcf7);box-shadow:0 16px 30px -22px rgba(19,160,91,.65);margin-bottom:16px;gap:20px}
.ss-hero.warn{border-color:#f3c46a;background:linear-gradient(105deg,#fde9bf,#fff4dc 55%,#fffaf0)}
.ss-hero.bad{border-color:#f19a9a;background:linear-gradient(105deg,#fbd0d0,#fde8e8 55%,#fff4f4)}
.sh-shield{position:relative;isolation:isolate;width:90px;height:100px}
.sh-shield::before{content:"";position:absolute;inset:-14px -20px;border-radius:50%;z-index:-1;background:radial-gradient(closest-side,rgba(255,255,255,.75),rgba(255,255,255,.3) 70%,transparent)}
.sh-shield svg{width:90px;height:100px}
.ss-hero .sh-tx b{font-size:32px;letter-spacing:-.5px}
.sh-ok{width:34px;height:34px}.sh-ok svg{width:21px;height:21px}
.ss-hero .sh-tx span{font-size:16px;margin-top:8px}
.ss-left{padding-left:28px;border-left:1.5px solid rgba(19,160,91,.3)}
.ss-left b{font-size:58px}.ss-left small{font-size:16px;margin-top:6px}
.sh-sp{background:#fff;opacity:.9;filter:drop-shadow(0 0 4px rgba(19,160,91,.35))}
.sp1{right:33%;top:20px;left:auto;width:15px;height:15px}.sp2{right:34%;bottom:18px;width:11px;height:11px}.sp3{position:absolute;left:36%;bottom:12px;width:11px;height:11px}
/* detail */
.ss-det{border-radius:24px;border-color:#e3ebfa;background:rgba(255,255,255,.92)}
.ss-dh{padding:16px 20px}.ss-dh>i{width:30px;height:30px;color:#2f73f2}.ss-dh>i svg{width:30px;height:30px}.ss-dh h4{font-size:18.5px}
.ss-pill{padding:7px 15px;font-size:14.5px;background:#e4f7ec;color:var(--hd)}.ss-pill::before{background:var(--good)}.ss-pill.warn{background:#fff1d6}.ss-pill.warn::before{background:var(--warn)}.ss-pill.bad{background:#fde5e5}.ss-pill.bad::before{background:var(--bad)}
.ss-r{padding:12px 20px;grid-template-columns:196px minmax(0,1fr)}
.ss-r dt{font-size:16px;gap:14px}.ss-r dt::after{color:#b6c3dd}
.ss-r dt i{width:26px;height:26px;color:#2f73f2}.ss-r dt i svg{width:25px;height:25px}
.ss-r dd{font-size:17px}
.ss-san span{font-size:15px;padding:5px 16px;background:#dfeaff}
/* mobile */
@media(max-width:560px){
  .pub .rs-pair .rsec-x,.pub .rs-pair .rsec-x:first-child,.pub .rs-pair .rsec-x:last-child{padding:18px 14px 18px;border-radius:26px}
  .hx-ic{width:54px;height:54px;margin:4px 6px 4px 4px}.hx-ic.hx-dns svg{width:32px;height:32px}.hx-ic.hx-ssl{width:50px;height:56px}.hx-ic.hx-ssl svg{width:50px;height:56px}
  .rs-pair .hx-tx h3{font-size:25px}.hx-tx p{font-size:13px}
  .dn-l li{padding:11px 12px}.dn-l .tp{width:52px;padding:6px 0;font-size:13px;border-radius:11px}.dn-l code{font-size:14.5px}.dn-l code.lg{font-size:13px}
  .dn-cp{position:static;transform:none;box-shadow:none;background:none}
  .ft-note{padding:14px 100px 14px 14px;min-height:84px;margin-top:26px}.ft-art{width:112px;height:66px}.ft-note b{font-size:15px}
  .ft-ic{width:34px;height:34px}.ft-ic svg{width:34px;height:34px}
  .ss-hero{padding:14px;gap:12px}.sh-shield,.sh-shield svg{width:56px;height:62px}
  .ss-hero .sh-tx b{font-size:22px}.sh-ok{width:26px;height:26px}.ss-left b{font-size:40px}.ss-left{padding-left:12px}
  .ss-r{grid-template-columns:1fr;padding:10px 14px}.ss-r dd{font-size:15.5px}
}
/* v3.1: pil filter muat, banner & SAN tidak patah */
.dn-fl{padding:6px;gap:4px}
.dn-fl button{padding:8px 8px;gap:5px;font-size:13px}
.dn-fl button b{min-width:20px;height:20px;padding:0 3px;font-size:11.5px}
@media(min-width:561px){.dn-fl button{flex:1 1 auto;min-width:max-content}}
.ft-note{padding-right:176px}
.ft-art{width:170px;height:100px;right:8px}
.ft-note b{font-size:16.5px}.ft-note span:not(.ft-art){font-size:13.5px}
.ss-r{grid-template-columns:172px minmax(0,1fr)}
.ss-san{gap:6px}.ss-san span{font-size:14px;padding:5px 13px;white-space:nowrap}
@media(max-width:560px){.ft-note{padding-right:100px}.ft-art{width:112px;height:66px}.ss-r{grid-template-columns:1fr}}
.ss-r dt{white-space:nowrap}
@media(min-width:561px){.ss-r{grid-template-columns:186px minmax(0,1fr)}.ss-r dt{gap:12px}}
@media(max-width:560px){.ss-r dt{white-space:normal}}

/* ===== v4: jarak dipadatkan seperti kartu WHOIS ===== */
.pub .rs-pair{gap:16px}
.pub .rs-pair .rsec-x,.pub .rs-pair .rsec-x:first-child,.pub .rs-pair .rsec-x:last-child{padding:18px 18px 16px;border-radius:26px}
.rsh-x{gap:14px;margin-bottom:12px}
.hx-ic{width:58px;height:58px;margin:4px 6px 4px 4px}
.hx-ic::before{inset:-9px}
.hx-ic.hx-dns svg{width:34px;height:34px}
.hx-ic.hx-ssl{width:52px;height:59px}.hx-ic.hx-ssl svg{width:52px;height:59px}
.rs-pair .hx-tx h3{font-size:28px;letter-spacing:-.5px}
.hx-tx p{font-size:14px;margin-top:3px}
.rsh-x .rcp{padding:9px 14px;border-radius:14px;font-size:14px;gap:7px}
.rsh-x .rcp svg{width:17px;height:17px}
/* DNS */
.dn-fl{padding:5px;margin-bottom:10px}
.dn-fl button{padding:7px 7px;font-size:12.5px;gap:4px}
.dn-fl button b{min-width:19px;height:19px;font-size:11px}
.dn-l{border-radius:18px}
.dn-l code{line-height:1.4}
@media(min-width:561px){
  .dn-l li{grid-template-columns:62px minmax(0,1fr) auto;column-gap:10px;padding:8px 14px;min-height:40px}
  .dn-l .tp{width:62px;padding:6px 0;border-radius:12px;font-size:13.5px}
  .dn-l code{font-size:16px}.dn-l code.lg{font-size:14px}
  .dn-l em{font-size:12.5px;gap:5px}.dn-l em svg{width:15px;height:15px}
}
.dn>.dn-l{margin-bottom:12px}.dn>.dn-more{margin:-4px 0 12px;padding:4px 10px;font-size:13px}
/* banner bawah */
.ft-note{min-height:72px;padding:10px 160px 10px 16px;margin-top:20px;border-radius:18px;gap:10px}
.ft-note b{font-size:15.5px}.ft-note span:not(.ft-art){font-size:13px;margin-top:1px}
.ft-ic,.ft-ic svg{width:34px;height:34px}.ft-info .ft-ic svg{width:32px;height:32px}
.ft-art{width:148px;height:88px;right:6px;bottom:-2px}
.dn>.dn-l+.ft-note,.dn>.dn-more+.ft-note,.dn .ft-note{margin-top:auto}
.dn>.dn-more+.ft-note,.dn>.dn-l+.ft-note{margin-top:18px}
/* SSL */
.ss-hero{padding:14px 18px;border-radius:20px;margin-bottom:10px;gap:14px}
.sh-shield{width:66px;height:74px}.sh-shield svg{width:66px;height:74px}
.sh-shield::before{inset:-10px -14px}
.ss-hero .sh-tx b{font-size:26px}.sh-ok{width:28px;height:28px}.sh-ok svg{width:17px;height:17px}
.ss-hero .sh-tx span{font-size:14px;margin-top:5px}
.ss-left{padding-left:20px}.ss-left b{font-size:44px}.ss-left small{font-size:14px;margin-top:3px}
.ss-det{border-radius:18px}
.ss-dh{padding:10px 14px}.ss-dh>i,.ss-dh>i svg{width:24px;height:24px}.ss-dh h4{font-size:16px}
.ss-pill{padding:5px 12px;font-size:13px}
.ss-r{padding:8px 14px;min-height:40px}
@media(min-width:561px){.ss-r{grid-template-columns:150px minmax(0,1fr)}}
.ss-r dt{font-size:14.5px;gap:10px}.ss-r dt i,.ss-r dt i svg{width:21px;height:21px}
.ss-r dd{font-size:15px;line-height:1.4}
.ss-san span{font-size:13px;padding:3px 12px}
.ss-kv{padding:0}
@media(max-width:560px){
  .pub .rs-pair .rsec-x,.pub .rs-pair .rsec-x:first-child,.pub .rs-pair .rsec-x:last-child{padding:14px 12px 14px}
  .ft-note{padding:10px 96px 10px 12px;min-height:68px;margin-top:18px}
  .ss-r{padding:8px 12px}
}
.dn>.dn-l{margin-bottom:18px}.dn>.dn-more{margin:-6px 0 18px}
.pub .rs-pair .dn>.ft-note{margin-top:auto}


/* ===== Ketersediaan Ekstensi: latar & header seperti desain contoh ===== */
#sec-tld.rsec-x{position:relative;overflow:hidden;margin:18px 0;padding:24px 24px 22px;border:1px solid #d6e5fb;border-radius:34px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 280' preserveAspectRatio='none'%3E%3Cg fill='%23fff'%3E%3Cellipse cx='70' cy='30' rx='170' ry='50' opacity='.8'/%3E%3Cellipse cx='210' cy='80' rx='150' ry='42' opacity='.7'/%3E%3Cellipse cx='10' cy='96' rx='120' ry='36' opacity='.7'/%3E%3Cellipse cx='470' cy='14' rx='170' ry='34' opacity='.55'/%3E%3Cellipse cx='1130' cy='206' rx='170' ry='46' opacity='.6'/%3E%3Cellipse cx='990' cy='240' rx='150' ry='36' opacity='.55'/%3E%3C/g%3E%3Cg fill='%239cc2fb' opacity='.55'%3E%3Ccircle cx='38' cy='150' r='5'/%3E%3Ccircle cx='120' cy='196' r='3.5'/%3E%3Ccircle cx='330' cy='120' r='4'/%3E%3Ccircle cx='560' cy='92' r='3'/%3E%3C/g%3E%3C/svg%3E") no-repeat top center/100% 280px,linear-gradient(180deg,#d8e7ff 0,#e9f2ff 190px,#f3f8ff 430px,#f8fbff 100%);box-shadow:0 26px 54px -34px rgba(31,98,242,.5),inset 0 1px 0 #fff}
#sec-tld.rsec-x:first-child{padding-top:24px}
#sec-tld.rsec-x::before{display:block;content:"";position:absolute;inset:8px 0 auto auto;width:48%;height:210px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200'%3E%3Cdefs%3E%3Cpattern id='d' width='8' height='8' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='4' cy='4' r='2.1' fill='%237fa9e6'/%3E%3C/pattern%3E%3C/defs%3E%3Cg fill='url(%23d)' stroke='url(%23d)' stroke-width='6' stroke-linejoin='round'%3E%3Cpath d='M30 40L110 30 150 50 140 80 110 100 95 130 70 110 45 80z'/%3E%3Cpath d='M105 120L140 125 150 160 130 195 115 170z'/%3E%3Cpath d='M190 40L240 35 250 60 220 75 195 65z'/%3E%3Cpath d='M195 85L245 85 255 130 230 170 205 140z'/%3E%3Cpath d='M255 35L350 30 378 70 340 100 290 95 262 75z'/%3E%3Cpath d='M322 140L370 140 376 168 336 172z'/%3E%3C/g%3E%3C/svg%3E") no-repeat right top/contain;opacity:.5;pointer-events:none}
#sec-tld .rsh-x{position:relative;flex-wrap:nowrap;gap:16px;margin-bottom:20px;align-items:center}
#sec-tld .hx-ic.hx-tld{background:none;box-shadow:none;width:124px;height:112px;margin:0 2px 0 0}
#sec-tld .hx-ic.hx-tld::before{inset:-4px -10px}
#sec-tld .hx-ic.hx-tld svg{width:124px;height:112px;filter:drop-shadow(0 12px 12px rgba(31,98,242,.35))}
#sec-tld .hx-tx h3{display:block;font-size:34px;font-weight:800;letter-spacing:-.7px;line-height:1.15;color:#0b2a8a}
#sec-tld .hx-tx p{font-size:15.5px;line-height:1.45;max-width:500px;margin-top:6px;color:#3f527f}
.tl-search{flex:none;display:flex;align-items:center;gap:10px;width:310px;height:56px;padding:0 0 0 18px;border-radius:30px;background:#fff;border:1px solid #d3e3fb;box-shadow:0 18px 30px -16px rgba(31,98,242,.6);transform:rotate(-2.5deg);overflow:hidden;margin-right:8px}
.tl-search>svg{width:22px;height:22px;flex:none;color:var(--pri)}
.tl-search span{flex:1;min-width:0;font-weight:700;font-size:15px;color:var(--hd);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-search i{flex:none;align-self:stretch;width:62px;display:grid;place-items:center;background:linear-gradient(180deg,#3b84ff,#1450d8);color:#fff}
.tl-search i svg{width:24px;height:24px}
html[data-theme=dark] #sec-tld.rsec-x{background:linear-gradient(180deg,#16275a,#0f1b40 300px,#0d1738);border-color:#233463;box-shadow:none}
html[data-theme=dark] #sec-tld.rsec-x::before{opacity:.2}
html[data-theme=dark] #sec-tld .hx-tx h3{color:#fff}html[data-theme=dark] #sec-tld .hx-tx p{color:var(--mut)}
html[data-theme=dark] .tl-search{background:var(--sf);border-color:#233463}
@media(max-width:1000px){.tl-search{display:none}#sec-tld.rsec-x::before{opacity:.35}}
@media(max-width:640px){#sec-tld.rsec-x{padding:16px 12px 14px;border-radius:26px}#sec-tld .hx-ic.hx-tld{width:66px;height:60px}#sec-tld .hx-ic.hx-tld svg{width:66px;height:60px}#sec-tld .hx-tx h3{font-size:22px}#sec-tld .hx-tx p{font-size:13px;margin-top:3px}#sec-tld .rsh-x{gap:10px;margin-bottom:12px}}

/* ===== Ketersediaan Ekstensi v2: header & footer dibuat semirip mungkin dengan desain contoh ===== */
#sec-tld.rsec-x::before{width:58%;height:232px;inset:0 0 auto auto;opacity:.62;background-position:right 12px top 4px}
#sec-tld.rsec-x::after{content:"";position:absolute;top:12px;right:16px;width:58px;height:50px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 52'%3E%3Cg stroke='%23ffc83d' stroke-width='5' stroke-linecap='round' fill='none'%3E%3Cpath d='M5 30l2-12'/%3E%3Cpath d='M22 21l8-16'/%3E%3Cpath d='M38 34l15-8'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain}
@media(min-width:641px){
  #sec-tld.rsec-x{padding:26px 26px 24px}
  #sec-tld .rsh-x{gap:20px;margin-bottom:22px;align-items:center}
  #sec-tld .hx-ic.hx-tld{width:150px;height:124px;margin:0 6px 0 -8px}
  #sec-tld .hx-ic.hx-tld svg{width:150px;height:124px}
  #sec-tld .hx-tx h3{font-size:38px;letter-spacing:-.9px;color:#0a2877}
  #sec-tld .hx-tx p{font-size:16.5px;max-width:520px;margin-top:8px;color:#2c4072}
  .tl-search{width:350px;height:64px;padding-left:20px;align-self:flex-end;margin:0 6px 4px 0;transform:rotate(-3deg);box-shadow:0 20px 32px -16px rgba(31,98,242,.65),0 0 0 3px rgba(255,255,255,.55)}
  .tl-search>svg{width:26px;height:26px}
  .tl-search span{font-size:17px;color:#0a2877}
  .tl-search i{width:72px}
  .tl-search i svg{width:28px;height:28px}
}
.tl-note{min-height:118px;padding:16px 28px;gap:18px;border-radius:32px;border:1px solid #dbe8fc;background:linear-gradient(100deg,#e1ecff,#edf4ff 52%,#e3edff);box-shadow:0 16px 32px -24px rgba(31,98,242,.55),inset 0 1px 0 #fff,0 0 0 4px rgba(255,255,255,.7)}
.tl-bulb{width:64px;height:64px}
.tl-nt{max-width:560px}
.tl-nt b{font-size:21px;margin-bottom:5px;color:#0a2268}
.tl-nt p{font-size:15.5px;line-height:1.5;color:#1d3366}
.tl-nt p .tl-lk{opacity:.6;vertical-align:-1px}
.tl-sky{height:100%;max-height:none;max-width:64%}
.tl-dom{right:22px;bottom:20px;gap:10px;padding:13px 26px;font-size:17.5px;border:2px solid rgba(255,255,255,.55);background:linear-gradient(180deg,#0f3b98,#082976);box-shadow:0 14px 24px -12px rgba(6,20,58,.85)}
.tl-dom svg{width:23px;height:23px}
html[data-theme=dark] #sec-tld.rsec-x::after{opacity:.8}
html[data-theme=dark] .tl-note{box-shadow:none}html[data-theme=dark] .tl-nt b{color:#fff}html[data-theme=dark] .tl-nt p{color:var(--mut)}
@media(max-width:960px){.tl-note{min-height:104px}.tl-nt p{font-size:14px}.tl-sky{max-width:none;height:84%}.tl-dom{padding:10px 18px;font-size:15px}.tl-dom svg{width:20px;height:20px}}
@media(max-width:640px){#sec-tld.rsec-x::after{width:38px;height:34px;top:8px;right:10px}.tl-note{min-height:96px;padding:12px 14px 56px;border-radius:24px;align-items:flex-start;gap:12px}.tl-bulb{width:46px;height:46px}.tl-nt b{font-size:17px}.tl-nt p{font-size:13px}.tl-sky{height:62%;opacity:.8}.tl-dom{left:14px;right:auto;bottom:12px;padding:8px 16px;font-size:14px}}
.tl-note{min-height:124px;flex-wrap:nowrap}
.tl-nt{flex:0 1 480px}
.tl-nt p{max-width:470px}
@media(max-width:960px){.tl-nt{flex:1 1 auto}.tl-nt p{max-width:none}}
@media(max-width:640px){.tl-note{flex-direction:row;min-height:110px}.tl-sky{height:70px;width:auto;max-width:none;right:0;bottom:0}.tl-nt{padding-right:0}}

/* ===== v3: penghalusan header & footer (gradient, peta titik, skyline, pill domain) ===== */
#sec-tld.rsec-x{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 280' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='b' x='-20%25' y='-40%25' width='140%25' height='180%25'%3E%3CfeGaussianBlur stdDeviation='14'/%3E%3C/filter%3E%3C/defs%3E%3Cg fill='%23fff' filter='url(%23b)'%3E%3Cellipse cx='80' cy='34' rx='190' ry='54' opacity='.9'/%3E%3Cellipse cx='230' cy='86' rx='150' ry='40' opacity='.75'/%3E%3Cellipse cx='0' cy='110' rx='120' ry='40' opacity='.8'/%3E%3Cellipse cx='520' cy='6' rx='200' ry='30' opacity='.6'/%3E%3Cellipse cx='1130' cy='214' rx='190' ry='48' opacity='.7'/%3E%3Cellipse cx='980' cy='250' rx='160' ry='36' opacity='.6'/%3E%3C/g%3E%3Cg fill='%239cc2fb' opacity='.5'%3E%3Ccircle cx='38' cy='150' r='4'/%3E%3Ccircle cx='120' cy='196' r='3'/%3E%3Ccircle cx='330' cy='120' r='3.5'/%3E%3C/g%3E%3C/svg%3E") no-repeat top center/100% 280px,radial-gradient(ellipse 62% 74% at 88% 20%,rgba(124,172,255,.30),transparent 72%),linear-gradient(180deg,#dbe9ff 0,#eaf3ff 200px,#f4f8ff 430px,#f8fbff 100%);box-shadow:0 28px 56px -38px rgba(31,98,242,.5),inset 0 1px 0 #fff}
#sec-tld.rsec-x::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200'%3E%3Cdefs%3E%3Cpattern id='d' width='5.2' height='5.2' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='2.6' cy='2.6' r='1.55' fill='%236f9fe4'/%3E%3C/pattern%3E%3CclipPath id='c'%3E%3Cpath d='M20 30L60 18 100 22 118 38 108 58 92 70 80 86 66 74 50 62 34 52z'/%3E%3Cpath d='M118 12L142 10 146 24 128 30z'/%3E%3Cpath d='M86 100L112 98 124 118 116 150 100 184 90 150 82 120z'/%3E%3Cpath d='M176 30L214 24 226 38 212 52 186 54z'/%3E%3Cpath d='M178 66L216 62 236 86 228 120 206 150 188 126 176 96z'/%3E%3Cpath d='M226 22L300 16 368 30 380 56 350 78 318 92 292 108 270 84 240 70 232 46z'/%3E%3Cpath d='M320 126L366 122 378 144 350 160 322 148z'/%3E%3Cpath d='M298 112L334 116 330 124 298 120z'/%3E%3C/clipPath%3E%3C/defs%3E%3Crect width='400' height='200' fill='url(%23d)' clip-path='url(%23c)'/%3E%3C/svg%3E") no-repeat right 10px top 6px/contain;opacity:.55;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%);mask-image:linear-gradient(90deg,transparent 0,#000 38%)}
.tl-sum,.tl-list{border-color:#e0ebfc;box-shadow:0 18px 38px -28px rgba(31,98,242,.5)}
.tl-ring{background:linear-gradient(160deg,#4a90ff,#1a58e0 70%,#1450d8)}
.tldc{border-color:#dfebfc;box-shadow:0 10px 18px -16px rgba(31,98,242,.5)}
.tl-sky{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%);mask-image:linear-gradient(90deg,transparent 0,#000 26%)}
.tl-dom{top:50%;bottom:auto;right:26px;transform:translateY(-50%);background:linear-gradient(180deg,rgba(20,66,168,.82),rgba(8,36,116,.88));-webkit-backdrop-filter:blur(8px) saturate(1.3);backdrop-filter:blur(8px) saturate(1.3);border:1.5px solid rgba(255,255,255,.6);box-shadow:0 14px 28px -16px rgba(6,20,58,.7),inset 0 1px 0 rgba(255,255,255,.38)}
@media(min-width:641px){#sec-tld .hx-tx h3{font-size:clamp(28px,3.1vw,38px)}#sec-tld .hx-tx p{max-width:440px}.tl-search{width:372px;flex-shrink:0}.tl-search span{font-size:15.5px;letter-spacing:-.1px}}
@media(min-width:961px){.tl-ttl{flex:0 1 290px;min-width:240px;font-size:20px;line-height:1.3;padding-right:22px}.tl-big{font-size:38px}.tl-info{padding:14px 20px}}
@media(max-width:640px){.tl-dom{top:auto;bottom:12px;transform:none}}

/* ===== Web Analyzer: Performa, SEO & Keamanan (tampilan dasbor) =====
   Tata letak mengikuti lebar area hasil (container query), bukan lebar layar. */
.pub .rsec.rsec-wz,.pub .rsec.rsec-wz:first-child,.pub .rsec.rsec-wz:last-child{border:0;background:none;box-shadow:none;padding:0;border-radius:0;container:wz/inline-size}
.wz-hero{position:relative;overflow:hidden;display:flex;align-items:center;min-height:238px;padding:28px 32px;border:1px solid #dbe8fc;border-radius:30px;background:radial-gradient(120% 140% at 85% 0,#dbe9ff 0,transparent 60%),linear-gradient(135deg,#eef5ff,#f8fbff 55%,#e9f2ff)}
.wz-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'%3E%3Cpath d='M0 40C90 8 170 62 270 34S370 10 400 26V60H0z' fill='%23dcebff' opacity='.7'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.wz-hx{position:relative;z-index:2;max-width:57%}
.wz-pill{display:inline-flex;align-items:center;gap:10px;padding:8px 24px 8px 14px;border-radius:99px;background:#dce9ff;color:var(--pri);font-size:19px;font-weight:700;box-shadow:inset 0 1px 0 #fff,0 8px 18px -12px rgba(31,98,242,.6)}
.wz-pill svg{width:28px;height:28px}
.rsec-wz .wz-hx h3{display:block;margin:14px 0 10px;font-size:clamp(28px,5.3cqw,50px);line-height:1.08;font-weight:800;letter-spacing:-1.3px;color:var(--navy)}
.wz-hx p{margin:0;max-width:440px;font-size:clamp(14.5px,2cqw,18px);line-height:1.55;color:#1c2f5e}
.wz-rule{display:block;width:72px;height:3px;border-radius:3px;margin-top:16px;background:var(--pri)}
.wz-art{position:absolute;z-index:1;right:0;top:0;bottom:0;width:52%;pointer-events:none}
.wz-art svg{width:100%;height:100%}
.wz-hero .rcp{position:absolute;z-index:3;top:14px;right:16px;padding:7px 14px;border:1px solid #cfe0fb;border-radius:12px;background:rgba(255,255,255,.88);color:var(--tx);font:700 13px inherit;font-family:inherit;cursor:pointer;box-shadow:0 6px 16px -10px rgba(31,98,242,.5)}
.wz-hero .rcp:hover{color:var(--pri)}
.wz{display:block}
.wz-card{position:relative;margin-top:36px;padding:32px 12px 12px;border:1px solid var(--bd);border-radius:26px;background:var(--sf);box-shadow:0 14px 34px -22px rgba(31,98,242,.38)}
.wz-tab{position:absolute;z-index:2;top:-19px;left:-4px;display:flex;align-items:center;gap:9px;height:42px;padding:0 42px 0 15px;border-radius:18px 0 0 0;background:linear-gradient(180deg,#e5efff,#d5e5ff);color:var(--pri);font-size:17px;font-weight:700;white-space:nowrap;clip-path:polygon(0 0,calc(100% - 26px) 0,100% 100%,0 100%);box-shadow:inset 0 1px 0 #fff}
.wz-tab i{display:grid;place-items:center;width:24px;height:24px}.wz-tab svg{width:22px;height:22px}
.wz-two{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.wz-grid{display:grid;gap:9px}
.wz-grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}.wz-grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}.wz-grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.hue-g{--f:var(--good)}.hue-b{--f:var(--pri)}.hue-v{--f:#6d4de0}
.wz-wn.wz-it .wz-bub,.wz-wn.wz-pt .wz-bub{--f:var(--warn)}.wz-no.wz-it .wz-bub,.wz-no.wz-pt .wz-bub{--f:var(--bad)}
.wz-bub{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--f,var(--pri));background:color-mix(in srgb,var(--f,var(--pri)) 14%,var(--sf))}
.wz-bub svg{width:23px;height:23px}
.wz-it{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;align-items:start;padding:12px;border:1px solid var(--bd);border-radius:16px;background:color-mix(in srgb,var(--pri2) 38%,var(--sf))}
.wz-it b{display:flex;align-items:center;gap:6px;font-size:13.5px;line-height:1.25;color:var(--hd)}
.wz-it p{margin:3px 0 0;font-size:12px;line-height:1.45;color:var(--mut);overflow-wrap:break-word;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.wz-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--good)}
.wz-wn .wz-dot{background:var(--warn)}.wz-no .wz-dot{background:var(--bad)}
.wz-sc{display:grid;grid-template-columns:40px minmax(0,1fr);gap:11px;align-items:center;padding:12px 14px;border:1px solid var(--bd);border-radius:16px;background:color-mix(in srgb,var(--pri2) 38%,var(--sf))}
.wz-st{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:var(--good);background:color-mix(in srgb,var(--good) 14%,var(--sf))}
.wz-st svg{width:25px;height:25px}
.wz-sc.wz-wn .wz-st{color:var(--warn);background:color-mix(in srgb,var(--warn) 16%,var(--sf))}.wz-sc.wz-no .wz-st{color:var(--bad);background:color-mix(in srgb,var(--bad) 14%,var(--sf))}
.wz-sc b{display:block;font-size:13.5px;line-height:1.25;color:var(--hd);overflow-wrap:break-word}
.wz-sc p{margin:2px 0 0;font-size:12px;color:var(--mut)}
.wz-perf{display:grid;grid-template-columns:minmax(0,1.1fr) repeat(4,minmax(0,1fr));padding:16px 4px;border:1px solid var(--bd);border-radius:20px;background:color-mix(in srgb,var(--pri2) 30%,var(--sf))}
.wz-perf:has(.wz-pt:nth-child(6)){grid-template-columns:minmax(0,1.1fr) repeat(5,minmax(0,1fr))}
.wz-pt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:4px 8px;text-align:center;min-width:0}
.wz-pt+.wz-pt{border-left:1px solid var(--bd)}
.wz-pt .wz-bub{width:52px;height:52px;margin-bottom:4px}.wz-pt .wz-bub svg{width:27px;height:27px}
.wz-pt b{max-width:100%;font-size:16.5px;line-height:1.25;font-weight:800;color:var(--hd);overflow-wrap:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wz-pt>span{font-size:14px;color:var(--mut)}
.wz-g{--c1:#22c55e;--c2:#0fa77a}.wz-g.wz-warn{--c1:#f7b733;--c2:#e08a00}.wz-g.wz-bad{--c1:#f58a8a;--c2:#d93a3a}
.wz-ring{position:relative;width:124px;height:124px}
.wz-ring svg{width:100%;height:100%;fill:none;stroke-width:10;stroke-linecap:round}
.wz-ring .gt{stroke:color-mix(in srgb,var(--c2) 16%,var(--sf))}.wz-ring .ga{stroke:url(#wzGr)}
.wz-ring .s1{stop-color:var(--c1)}.wz-ring .s2{stop-color:var(--c2)}
.wz-sn{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.wz-sn b{font-size:42px;font-weight:800;letter-spacing:-1.5px;color:var(--hd)}.wz-sn small{margin-top:2px;font-size:15px;color:var(--mut)}
.wz-lb{display:inline-block;padding:5px 18px;border-radius:99px;font-size:14.5px;font-weight:700}
.wz-lb.good{background:#dff5e8;color:var(--good)}.wz-lb.warn{background:#fff0d2;color:#b86e00}.wz-lb.bad{background:#fde2e2;color:var(--bad)}
.wz-srv{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:12px;align-items:center}
.wz-kv{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:12px;align-items:start}
.wz-kv dl{margin:0;overflow:hidden;border:1px solid var(--bd);border-radius:14px}
.wz-r{display:grid;grid-template-columns:90px minmax(0,1fr);gap:8px;padding:10px 12px;font-size:13.5px;line-height:1.45}
.wz-r:nth-child(odd){background:color-mix(in srgb,var(--pri2) 55%,var(--sf))}
.wz-r dt{color:var(--hd);font-weight:500}.wz-r dd{margin:0;color:var(--tx);overflow-wrap:break-word}
.wz-sv svg{width:100%;height:auto;max-height:150px}
.wz-note{margin-top:22px;padding-right:250px}
.wz-note .tl-dom{bottom:auto;top:50%;transform:translateY(-50%)}
.wz-info{flex:none;position:relative;z-index:1;width:50px;height:50px;color:var(--pri)}.wz-info svg{width:100%;height:100%}
html[data-theme=dark] .wz-hero{border-color:var(--bd);background:radial-gradient(120% 140% at 85% 0,#1b3170 0,transparent 60%),linear-gradient(135deg,#14224f,#111c3d)}
html[data-theme=dark] .wz-hero::after{opacity:.2}html[data-theme=dark] .rsec-wz .wz-hx h3{color:#fff}html[data-theme=dark] .wz-hx p{color:var(--mut)}
html[data-theme=dark] .wz-pill{background:var(--pri2);color:#8fb4ff}html[data-theme=dark] .wz-hero .rcp{background:var(--sf);border-color:var(--bd)}
html[data-theme=dark] .wz-tab{background:linear-gradient(180deg,#1e3470,#18295a);color:#8fb4ff}
html[data-theme=dark] .wz-lb.good{background:#123a2a}html[data-theme=dark] .wz-lb.warn{background:#44330f;color:#ffc65a}html[data-theme=dark] .wz-lb.bad{background:#4a1d22}
@container wz (min-width:1100px){
  .wz-two{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:16px}
  .wz-grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wz-bub{width:50px;height:50px}.wz-it{grid-template-columns:50px minmax(0,1fr);padding:13px 14px}.wz-it b{font-size:14.5px}.wz-it p{font-size:12.5px}
}
@container wz (max-width:800px){
  .wz-perf,.wz-perf:has(.wz-pt:nth-child(6)){grid-template-columns:repeat(3,minmax(0,1fr));row-gap:8px}
  .wz-pt+.wz-pt{border-left:0}.wz-g{grid-column:1/-1;padding-bottom:12px;border-bottom:1px solid var(--bd)}
  .wz-grid.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wz-srv{grid-template-columns:1fr}.wz-sv{display:none}
  .wz-hx{max-width:100%}.wz-art{opacity:.25;width:78%}
  .wz-note{padding-right:20px;flex-wrap:wrap}.wz-note .tl-dom{position:static;transform:none;margin-top:6px}
}
@container wz (max-width:560px){
  .wz-hero{padding:22px 18px;min-height:0;border-radius:24px}
  .wz-pill{font-size:16px;padding:6px 18px 6px 11px}.wz-pill svg{width:22px;height:22px}
  .wz-grid.c4,.wz-grid.c2{grid-template-columns:1fr}.wz-grid.c3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wz-perf,.wz-perf:has(.wz-pt:nth-child(6)){grid-template-columns:repeat(2,minmax(0,1fr))}
  .wz-kv{grid-template-columns:1fr}.wz-r{grid-template-columns:92px minmax(0,1fr)}
  .wz-card{padding:30px 9px 9px;border-radius:22px}.wz-tab{font-size:16px;padding-right:36px}
}
@container wz (max-width:400px){.wz-grid.c3{grid-template-columns:1fr}}
@container wz (max-width:560px){
  .wz-art{display:none}
  .wz-note .tl-nt{flex:1 1 0;min-width:0}.wz-note .tl-dom{margin-left:64px}
}

/* ===== Footer: menu utama tidak lagi bertumpuk di semua halaman =====
   Jumlah kolom mengikuti lebar kolom menu (container query): 2 kolom bila cukup ruang, selain itu 1 kolom. */
.fmenu{container:fmenu/inline-size}
.pub .fmenu .fm-l,.fmenu .fm-l{display:block}
.fmenu .fm-l a{white-space:nowrap;min-width:0}
@container fmenu (min-width:316px){
  .pub .fmenu .fm-l,.fmenu .fm-l{display:grid;grid-auto-flow:column;grid-template-rows:repeat(5,auto);grid-template-columns:repeat(2,max-content);column-gap:20px}
}
@container fmenu (max-width:200px){.fmenu .fm-l a{white-space:normal}}
@media(min-width:1181px){.fgrid,.pub .fgrid{grid-template-columns:1.2fr 1fr .75fr 1.2fr 1.6fr}}
@media(min-width:1340px){.fgrid,.pub .fgrid{grid-template-columns:1.1fr 1.76fr .7fr 1.06fr 1.7fr}}
.copy a{white-space:nowrap}
@media(max-width:480px){.copy i{margin:0 8px}}

/* ===== Keamanan Email: dasbor kartu selaras Web Analyzer ===== */
.rsec-ml .wz-hero{min-height:178px;padding:24px 30px}
.rsec-ml .wz-hx{max-width:62%}
.rsec-ml .wz-hx h3{margin:12px 0 8px;font-size:clamp(24px,4.4cqw,40px);letter-spacing:-1px}
.rsec-ml .wz-hx p{max-width:470px;font-size:clamp(14px,1.8cqw,16.5px)}
.rsec-ml .wz-pill{font-size:17px;padding:7px 20px 7px 12px}.rsec-ml .wz-pill svg{width:24px;height:24px}
.rsec-ml .wz-art{width:46%}
.wz-perf.ml-perf{grid-template-columns:minmax(0,1.1fr) repeat(3,minmax(0,1fr))}
.ml-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.ml-it{--f:var(--good);grid-template-columns:44px minmax(0,1fr);align-content:start}
.ml-it.wz-wn{--f:var(--warn)}.ml-it.wz-no{--f:var(--bad)}
.ml-it b{flex-wrap:wrap;font-size:15px}
.ml-it p{display:block;-webkit-line-clamp:unset;margin-top:6px;font-size:13px;color:var(--tx)}
.ml-st{margin-left:auto;font-style:normal;font-size:11.5px;font-weight:800;padding:3px 10px;border-radius:99px;background:#e3f6ec;color:var(--good)}
.ml-it.wz-wn .ml-st{background:#fff3dc;color:#b86e00}.ml-it.wz-no .ml-st{background:#fde7e7;color:var(--bad)}
.ml-wh,.ml-tip{display:block;margin-top:8px;font-size:12.5px;line-height:1.5;color:var(--mut)}
.ml-tip{padding:8px 11px;border-radius:11px;background:color-mix(in srgb,var(--f) 9%,var(--sf));color:var(--tx)}.ml-tip strong{color:var(--f)}
.ml-rec{margin:0}
.ml-rec li{grid-template-columns:62px minmax(0,1fr) auto 30px}
.ml-nt{padding:3px 10px;border-radius:99px;font-style:normal;font-size:12px;font-weight:700;background:#e3f6ec;color:var(--good)}
.dn-l .ml-nt.warn{background:#fff3dc;color:#b86e00}.dn-l .ml-nt.bad{background:#fde7e7;color:var(--bad)}
html[data-theme=dark] .ml-st,html[data-theme=dark] .ml-nt{background:#123a2a}
html[data-theme=dark] .ml-it.wz-wn .ml-st,html[data-theme=dark] .dn-l .ml-nt.warn{background:#44330f;color:#ffc65a}
html[data-theme=dark] .ml-it.wz-no .ml-st,html[data-theme=dark] .dn-l .ml-nt.bad{background:#4a1d22}
@container wz (max-width:860px){.ml-grid{grid-template-columns:minmax(0,1fr)}.rsec-ml .wz-hx{max-width:100%}.rsec-ml .wz-art{opacity:.22;width:70%}}
@container wz (max-width:800px){.wz-perf.ml-perf{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container wz (max-width:560px){
  .rsec-ml .wz-hero{padding:20px 18px;min-height:0}.rsec-ml .wz-art{display:none}
  .wz-perf.ml-perf{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ml-perf .wz-pt{padding:4px 4px}.ml-perf .wz-pt .wz-bub{width:42px;height:42px}.ml-perf .wz-pt .wz-bub svg{width:22px;height:22px}.ml-perf .wz-pt b{font-size:14px}.ml-perf .wz-pt>span{font-size:13px}
  .ml-rec li{grid-template-columns:54px minmax(0,1fr) 30px;row-gap:3px}.ml-rec .tp{width:54px}.ml-rec .ml-nt{grid-column:2;grid-row:2;justify-self:start}.ml-rec .dn-cp{grid-column:3;grid-row:1/3}
}
@container wz (max-width:800px){
  .wz-note.ml-note{padding:16px 18px;flex-wrap:wrap;gap:12px}
  .wz-note.ml-note .tl-nt{flex:1 1 200px;min-width:0;max-width:none}
  .wz-note.ml-note .tl-dom{position:static;transform:none;margin:0 0 0 62px}
}
html[data-theme=dark] .wz-card .ml-rec{background:color-mix(in srgb,var(--pri2) 30%,var(--sf));border-color:var(--bd)}
html[data-theme=dark] .wz-card .ml-rec li:hover{background:color-mix(in srgb,var(--pri) 10%,var(--sf))}
html[data-theme=dark] .ml-rec code{color:var(--tx)}

/* ===== Kecepatan: bingkai dasbor (hero + kartu bertab) dengan isi khas PageSpeed ===== */
.psi-pill{padding:6px 20px 6px 10px;gap:9px}
.psi-pill img{flex:none;width:26px;height:26px;display:block}
.psi-pill a{color:inherit;text-decoration:none;font-family:'Product Sans','Google Sans','DM Sans',Arial,sans-serif;font-weight:500}
.psi-pill a:hover{text-decoration:underline}
.rsec-sp .spt{margin:20px 4px 0}
.rsec-sp .psi-wait,.rsec-sp .skel{margin-top:18px}
.psi.wz .wz-card{margin-top:34px}
.psi.wz .psi-card{border:1px solid var(--bd);border-radius:20px;background:color-mix(in srgb,var(--pri2) 30%,var(--sf));padding:22px 14px 26px}
.psi.wz .psi-m{border:1px solid var(--bd);border-radius:20px;background:color-mix(in srgb,var(--pri2) 30%,var(--sf));padding:0 20px 4px}
.psi.wz .psi-m .psi-mt:first-child{border-top:0}
@container wz (min-width:761px){.psi.wz .psi-m .psi-mt:nth-child(2){border-top:0}}
.psi.wz .psi-op{border:1px solid var(--bd);border-radius:20px;background:color-mix(in srgb,var(--pri2) 30%,var(--sf));padding:0 16px}
.psi.wz .psi-op li:first-child{border-top:0}
.psi-fh{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;margin:0 4px 10px;font-size:13.5px;color:var(--mut)}
.psi-fh b{color:var(--hd);font-weight:700}
.psi-fh .psi-cwv{margin-left:0}
.psi.wz .psi-main{border-top-color:color-mix(in srgb,var(--bd) 80%,transparent)}
.psi-note-dots{display:inline-flex}
.wz-note .gdots{margin-right:6px;vertical-align:1px}
@container wz (max-width:560px){.psi.wz .psi-card{padding:18px 8px 22px}.psi.wz .psi-m{padding:0 14px 4px}.psi-pill a{font-size:15.5px}}

/* ===== Latar halaman putih polos (mode terang) ===== */
html:not([data-theme=dark]) body.pub{--bg:#fff;background:#fff}
html:not([data-theme=dark]) .top{background:#fff}

/* ===== Semua Alat: hero + kartu bertab selaras hasil lain, ikon gradien ===== */
#semua-alat{margin-top:8px;margin-bottom:28px}
.at{container:wz/inline-size}
.at .wz-hero{min-height:190px;padding:26px 32px}
.at .wz-hx{max-width:58%}
.at .wz-hx h2{display:block;margin:14px 0 10px;font-size:clamp(25px,4.4cqw,42px);line-height:1.1;font-weight:800;letter-spacing:-1.1px;color:var(--navy)}
.at .wz-hx p{max-width:470px;margin:0;font-size:clamp(14px,1.8cqw,16.5px);line-height:1.55;color:#1c2f5e}
.at .wz-pill{font-size:17px;padding:7px 20px 7px 12px}.at .wz-pill svg{width:24px;height:24px}
.at .wz-art{width:48%}
.at-n{position:absolute;z-index:3;top:16px;right:18px;display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:1px solid #cfe0fb;border-radius:99px;background:rgba(255,255,255,.9);color:var(--pri);font-size:13px;font-weight:600;white-space:nowrap;box-shadow:0 6px 16px -10px rgba(31,98,242,.5)}
.at-n b{font-size:15px;font-weight:800}
.at-g{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.at-g li{margin:0;padding:0;font-size:inherit}
.at-t{--cc:var(--c);position:relative;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:5px;height:100%;padding:16px 16px 14px;border:1px solid color-mix(in srgb,var(--c) 22%,var(--bd));border-radius:18px;background:linear-gradient(160deg,color-mix(in srgb,var(--c) 10%,var(--sf)),var(--sf) 64%);color:var(--tx);text-decoration:none;overflow:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .25s,box-shadow .3s}
.at-t::after{content:"";position:absolute;right:-34px;top:-34px;width:110px;height:110px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 16%,transparent),transparent);pointer-events:none;transition:transform .5s ease}
html[data-theme=dark] .at-t{--cc:color-mix(in srgb,var(--c) 58%,#fff)}
.at-t:hover,.at-t:focus-visible{transform:translateY(-4px);border-color:color-mix(in srgb,var(--c) 55%,var(--bd));box-shadow:0 16px 30px -16px color-mix(in srgb,var(--c) 65%,transparent)}
.at-t:hover::after{transform:scale(1.4)}
.at-t:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
.at-i{position:relative;z-index:1;display:grid;place-items:center;width:54px;height:54px;margin-bottom:6px;border-radius:17px;font-style:normal;color:#fff;background:linear-gradient(145deg,color-mix(in srgb,var(--c) 58%,#fff),var(--c) 52%,color-mix(in srgb,var(--c) 80%,#000));box-shadow:0 12px 20px -12px var(--c),inset 0 1px 0 rgba(255,255,255,.4);transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.at-i svg{width:29px;height:29px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.at-t:hover .at-i{transform:rotate(-6deg) scale(1.08)}
.at-t b{position:relative;z-index:1;display:block;font-size:16px;font-weight:800;line-height:1.3;color:var(--hd)}
.at-d{position:relative;z-index:1;display:block;font-size:13px;line-height:1.55;color:var(--mut)}
.at-go{position:relative;z-index:1;margin-top:8px;display:inline-flex;align-items:center;gap:6px;font-style:normal;font-size:13px;font-weight:700;color:var(--cc)}
.at-go svg{width:14px;height:14px;transition:transform .3s ease}
.at-t:hover .at-go svg{transform:translateX(5px)}
html[data-theme=dark] .at-n{background:var(--sf);border-color:var(--bd);color:#8fb4ff}
html[data-theme=dark] .at .wz-hx h2{color:#fff}html[data-theme=dark] .at .wz-hx p{color:var(--mut)}
@container wz (max-width:1000px){.at-g{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container wz (max-width:800px){.at .wz-hx{max-width:100%}.at .wz-art{opacity:.22;width:72%}}
@container wz (max-width:560px){
  .at .wz-hero{padding:56px 18px 22px;min-height:0}.at .wz-art{display:none}
  .at-g{grid-template-columns:minmax(0,1fr);gap:10px}
  .at-t{grid-template-columns:54px minmax(0,1fr);column-gap:12px;row-gap:2px;padding:14px}
  .at-i{grid-row:1/4;margin:0}.at-t b,.at-d,.at-go{grid-column:2}.at-go{margin-top:4px}
  .at .wz-card{padding:30px 9px 9px;border-radius:22px}.at .wz-tab{font-size:16px;padding-right:36px}
  .at-n{top:14px;right:14px}
}
@media(prefers-reduced-motion:reduce){.at-t,.at-i,.at-t::after,.at-go svg{transition:none}.at-t:hover{transform:none}}

/* ===== Semua Alat: kartu lebih ramping (ikon kiri, teks kanan, panah di pojok) ===== */
.at-g{gap:10px}
.at-t{grid-template-columns:46px minmax(0,1fr);grid-template-rows:auto 1fr;align-content:center;column-gap:12px;row-gap:2px;padding:12px 34px 12px 12px;border-radius:16px}
.at-i{grid-column:1;grid-row:1/3;align-self:center;width:46px;height:46px;margin:0;border-radius:14px}
.at-i svg{width:25px;height:25px}
.at-t b{grid-column:2;grid-row:1;font-size:15px;line-height:1.25;text-wrap:balance}
.at-d{grid-column:2;grid-row:2;font-size:12.6px;line-height:1.45}
.at-go{position:absolute;z-index:1;top:13px;right:12px;margin:0;gap:0;font-size:0;line-height:0}
.at-go svg{width:14px;height:14px;color:var(--mut);opacity:.8;transition:transform .2s,color .2s,opacity .2s}
.at-t:hover .at-go svg,.at-t:focus-visible .at-go svg{color:var(--cc);opacity:1;transform:translateX(3px)}
.at-t:hover,.at-t:focus-visible{transform:translateY(-3px)}
.at-t::after{width:90px;height:90px;right:-30px;top:-30px}
.at .wz-card{margin-top:30px;padding:28px 10px 10px}
.at .wz-hero{min-height:166px;padding:22px 30px}
@container wz (max-width:560px){.at .wz-hero{padding:54px 18px 20px}.at .wz-card{padding:28px 8px 8px}.at-t{padding:11px 32px 11px 11px}}

/* ===== Perbaikan mobile: screenshot "Hasil Analisis Terbaru" selebar kartu + menu footer tidak tertutup tombol ke atas ===== */
@media(max-width:640px){
  .c-ex .exrow{flex-direction:column;align-items:stretch;gap:14px}
  .c-ex .exrow>.exth,.c-ex .exth{flex:none;width:100%;max-width:none;min-width:0}
  .c-ex .exshot{width:100%;max-width:100%}
  .c-ex .exshot img,.c-ex .exsk,.c-ex .exshot.nn span{width:100%;max-width:100%}
  .c-ex .exrow>div:last-child{width:100%}
}
/* tombol ke atas diangkat otomatis (var --lift dari JS) saat bar hak cipta terlihat, jadi selalu bertengger tepat di atasnya */
.totop{margin-bottom:var(--lift,0px)}
@media(max-width:1180px){
  .copy{padding-top:16px;padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
}
/* tagline footer: garis bawah baru (sapuan emas bergradasi + kilau bintang) */
.fgrid .ftag svg{width:min(240px,78%);height:auto;aspect-ratio:240/26;margin:4px 0 0 2px;opacity:1;filter:drop-shadow(0 2px 8px rgba(255,190,50,.35));overflow:visible}
.fgrid .ftag .ft-st{transform-box:fill-box;transform-origin:center;animation:ftw 2.8s ease-in-out infinite}
.fgrid .ftag .ft-st.s2{animation-delay:.9s}.fgrid .ftag .ft-st.s3{animation-delay:1.8s}
@keyframes ftw{0%,100%{opacity:.35;transform:scale(.7) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(20deg)}}
@media(prefers-reduced-motion:reduce){.fgrid .ftag .ft-st{animation:none}}
@media(max-width:640px){
  .fgrid .ftag{margin:20px auto 6px;text-align:center;rotate:-2deg;transform-origin:50% 50%;font-size:28px}
  .fgrid .ftag svg{margin:4px auto 0;width:min(250px,80%)}
  .copy .wrap{flex-direction:column;align-items:center;text-align:center;gap:12px}
  .copy .wrap>span:first-child{font-size:12.5px;line-height:1.5}
  .copy .wrap>span:nth-of-type(2){display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 18px;width:100%;max-width:340px;margin:0 auto;padding-top:12px;border-top:1px solid rgba(255,255,255,.12)}
  .copy .wrap>span:nth-of-type(2) i{display:none}
  .copy .wrap>span:nth-of-type(2) a{font-size:12.5px;opacity:.92;transition:opacity .2s}
  .copy .wrap>span:nth-of-type(2) a:active,.copy .wrap>span:nth-of-type(2) a:hover{opacity:1}
}
@media(max-width:350px){.copy .wrap>span:nth-of-type(2){gap:10px 14px}.copy .wrap>span:nth-of-type(2) a{font-size:12px}}

/* credit footer */
.copy .credit{flex:0 0 100%;text-align:center;font-size:11.5px;color:rgba(255,255,255,.7);padding-top:9px;margin-top:2px;border-top:1px solid rgba(255,255,255,.08)}
.copy .credit a{font-weight:600;color:#fff;text-decoration:none;border-bottom:1px dotted rgba(255,255,255,.55);transition:color .2s,border-color .2s}
.copy .credit a:hover,.copy .credit a:focus-visible{color:#ffd166;border-bottom-color:#ffd166}
@media(max-width:640px){.copy .credit{padding-top:10px;margin-top:0;width:100%;max-width:340px}}

/* ===== Menu mobile v2: burger bulat, panel kartu, ikon di setiap menu ===== */
.nsp{position:absolute;width:0;height:0;overflow:hidden}
.ni,.mi{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.burger{border-radius:50%}
@media(min-width:1181px){
  .nav nav>a .ni,.dt .ni,.dm .mi{display:none}
  .nav nav>a:first-child .ni{display:block;width:22px;height:22px}
  .dt span{display:inline}
}
@media(max-width:1180px){
  .theme{box-sizing:border-box;border:1.5px solid #c9daf8;background:linear-gradient(180deg,#fff,#f0f5ff);box-shadow:0 2px 8px rgba(31,98,242,.12),inset 0 1px 0 #fff;transition:border-color .25s,transform .15s}
  .theme svg{width:22px;height:22px}
  .theme:hover{border-color:var(--pri)}.theme:active{transform:scale(.93)}
  html[data-theme=dark] .theme{background:linear-gradient(180deg,#16244f,#111c3d);border-color:#2c4180;box-shadow:0 2px 8px rgba(0,0,0,.35);color:#ffd166}

  .nav nav{left:12px;right:12px;top:80px;padding:10px;gap:3px;border:1px solid var(--bd);border-radius:22px;box-shadow:0 26px 50px -14px rgba(15,40,110,.34),0 4px 14px rgba(15,40,110,.08);max-height:calc(100vh - 100px);max-height:calc(100dvh - 100px)}
  .nav nav.open{animation:mnIn .24s cubic-bezier(.2,.8,.3,1)}
  @keyframes mnIn{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}

  .nav nav>a,.nav .dt{gap:12px;padding:8px 10px;border-radius:16px;font-size:15.5px;font-weight:600;min-height:54px;transition:background .2s,color .2s}
  .nav nav>a:hover,.nav .dt:hover,.nav nav>a:active,.nav .dt:active{background:rgba(31,98,242,.07);color:var(--tx)}
  html[data-theme=dark] .nav nav>a:hover,html[data-theme=dark] .nav .dt:hover{background:rgba(120,160,255,.1)}
  .nav .dt{width:100%}
  .nav .dt span{flex:1;text-align:left}
  .nav nav>a .ni,.nav .dt .ni{display:block;width:38px;height:38px;padding:9px;border-radius:13px;background:var(--pri2);color:var(--pri);transition:background .2s,color .2s}
  html[data-theme=dark] .nav nav>a .ni,html[data-theme=dark] .nav .dt .ni{color:#8fb4ff}
  .nav nav>a.on,.dd.cur>.dt{background:var(--pri2);color:var(--pri)}
  .nav nav>a.on .ni,.dd.cur>.dt .ni,.dd.open>.dt .ni{background:var(--pri);color:#fff}
  .nav .dt .cv{width:16px;height:16px;color:var(--mut);transition:transform .28s}
  .dd.open>.dt .cv{transform:rotate(180deg);color:var(--pri)}
  .dd.open>.dt{color:var(--pri)}

  .nav .dd .dm{display:none;margin:2px 0 8px 29px;padding:2px 0 2px 10px;border:0;border-left:2px solid var(--bd);border-radius:0;background:none;min-width:0}
  .nav .dd.open .dm{display:block;animation:mnIn .22s ease}
  .nav .dm a{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:12px;font-size:14.5px;font-weight:600;color:var(--tx)}
  .nav .dm .mi{display:block;width:19px;height:19px;color:var(--pri);opacity:.9}
  .nav .dm a:hover,.nav .dm a:active{background:var(--pri2);color:var(--pri)}
  .nav .dm a.on{background:var(--pri2);color:var(--pri)}
  html[data-theme=dark] .nav .dm .mi{color:#8fb4ff}
}
@media(prefers-reduced-motion:reduce){.nav nav.open,.nav .dd.open .dm{animation:none}}
@media(max-width:1180px){
  html[data-theme=dark] .dd.open>.dt,html[data-theme=dark] .dd.open>.dt .cv,html[data-theme=dark] .nav nav>a.on,html[data-theme=dark] .dd.cur>.dt{color:#8fb4ff}
  html[data-theme=dark] .nav .dm a:hover,html[data-theme=dark] .nav .dm a.on{color:#8fb4ff}
}

/* honeypot newsletter: tersembunyi dari pengunjung, terlihat oleh bot */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
/* il-v1 */
/* ===== Ilustrasi hidup: idle halus, hidup saat memeriksa, "mendarat" saat hasil muncul ===== */
.il{display:block;overflow:visible}
.il-c{transform-box:fill-box;transform-origin:50% 50%}
.il-bt{transform-box:fill-box;transform-origin:50% 100%}
.il-off,.il-off *{animation-play-state:paused!important}
@keyframes ilFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes ilTw{0%,100%{opacity:.3;transform:scale(.65)}50%{opacity:1;transform:scale(1.15)}}
@keyframes ilDrift{0%,100%{transform:translateX(0)}50%{transform:translateX(8px)}}
@keyframes ilSway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(4deg)}}
@keyframes ilGlow{0%,100%{opacity:.14;transform:scale(1)}50%{opacity:.34;transform:scale(1.035)}}
@keyframes ilPing{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(1.55)}}
@keyframes ilPingOnce{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.7)}}
@keyframes ilFire{0%,100%{transform:scale(1,1)}35%{transform:scale(.88,1.32)}70%{transform:scale(1.1,.86)}}
@keyframes ilGround{0%,100%{transform:scale(1);opacity:.13}50%{transform:scale(.94);opacity:.09}}
@keyframes ilDot{0%,100%{opacity:.3}40%{opacity:1}}
@keyframes ilVF{0%,49.9%{opacity:1}50%,100%{opacity:0}}
@keyframes ilVB{0%,49.9%{opacity:0}50%,100%{opacity:1}}
@keyframes ilLandT{to{transform:translateX(-116px)}}
@keyframes ilLandW{to{transform:translateX(-104px)}}
@keyframes ilSeg{0%,100%{opacity:.3}35%{opacity:1}}
@keyframes ilScan{0%{transform:translateY(0);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateY(122px);opacity:0}}
@keyframes ilBeam{0%{transform:translateY(0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateY(46px);opacity:0}}
@keyframes ilRowP{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes ilRowIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ilBarIn{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes ilBarEq{0%{transform:scaleY(.4)}100%{transform:scaleY(1)}}
@keyframes ilDashIn{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes ilDashLoop{0%{stroke-dashoffset:100}55%,100%{stroke-dashoffset:0}}
@keyframes ilAppear{0%,72%{opacity:0}100%{opacity:1}}
@keyframes ilFade{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes ilStreak{0%{transform:translateY(-8px);opacity:0}30%{opacity:.9}100%{transform:translateY(26px);opacity:0}}
@keyframes ilFillIn{from{transform:scaleX(0)}to{transform:scaleX(.646)}}
@keyframes ilFillLoop{0%{transform:scaleX(.04)}80%,100%{transform:scaleX(1)}}
@keyframes ilNdA{0%,100%{transform:rotate(52deg)}30%{transform:rotate(58deg)}62%{transform:rotate(46deg)}}
@keyframes ilNdS{0%,100%{transform:rotate(38deg)}30%{transform:rotate(44deg)}62%{transform:rotate(32deg)}}
@keyframes ilNdSettleA{0%{transform:rotate(-84deg)}100%{transform:rotate(52deg)}}
@keyframes ilNdSettleS{0%{transform:rotate(-84deg)}100%{transform:rotate(38deg)}}
@keyframes ilNdSweepA{0%{transform:rotate(-84deg)}100%{transform:rotate(84deg)}}
@keyframes ilNdSweepS{0%{transform:rotate(-84deg)}100%{transform:rotate(84deg)}}
@keyframes ilMagIdle{0%,100%{transform:translate(0,0)}50%{transform:translate(-3px,-5px)}}
@keyframes ilMagSettle{0%{transform:translate(-76px,-30px)}55%{transform:translate(4px,3px)}100%{transform:translate(0,0)}}
@keyframes ilMagScan{0%,100%{transform:translate(0,0)}18%{transform:translate(-44px,-24px)}36%{transform:translate(-78px,-8px)}54%{transform:translate(-86px,-22px)}74%{transform:translate(-40px,10px)}}
@keyframes ilLtLoop{0%,100%{transform:translateY(-12px)}22%,78%{transform:translateY(-48px)}}
@keyframes ilLtSettle{0%{transform:translateY(0)}60%{transform:translateY(-35px)}100%{transform:translateY(-30px)}}
@keyframes ilTickLoop{0%,6%{opacity:0;transform:scale(.3)}14%{opacity:1;transform:scale(1.3)}20%,76%{opacity:1;transform:scale(1)}90%,100%{opacity:0;transform:scale(.3)}}
@keyframes ilTickIn{0%{opacity:0;transform:scale(.2)}70%{transform:scale(1.35)}100%{opacity:1;transform:scale(1)}}
@keyframes ilBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes ilBeat{0%,100%{transform:scale(1)}50%{transform:scale(1.075)}}
@keyframes ilShineIdle{0%{transform:translateX(15px) skewX(-18deg)}28%,100%{transform:translateX(150px) skewX(-18deg)}}
@keyframes ilShineLoop{0%{transform:translateX(15px) skewX(-18deg)}100%{transform:translateX(150px) skewX(-18deg)}}
@keyframes ilDraw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes ilDrawLoop{0%,10%{stroke-dashoffset:100}45%,78%{stroke-dashoffset:0}92%,100%{stroke-dashoffset:-100}}
@keyframes ilPulseS{0%{transform:scale(.8)}60%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes ilOrbT{0.0%{transform:translate(98.91px,-32.14px) scale(0.95)}4.167%{transform:translate(97.62px,-24.64px) scale(0.994)}8.333%{transform:translate(89.68px,-15.47px) scale(1.035)}12.5%{transform:translate(75.62px,-5.24px) scale(1.07)}16.667%{transform:translate(56.41px,5.35px) scale(1.097)}20.833%{transform:translate(33.36px,15.57px) scale(1.114)}25.0%{transform:translate(8.03px,24.73px) scale(1.12)}29.167%{transform:translate(-17.84px,32.2px) scale(1.114)}33.333%{transform:translate(-42.5px,37.48px) scale(1.097)}37.5%{transform:translate(-64.26px,40.21px) scale(1.07)}41.667%{transform:translate(-81.64px,40.2px) scale(1.035)}45.833%{transform:translate(-93.46px,37.44px) scale(0.994)}50.0%{transform:translate(-98.91px,32.14px) scale(0.95)}54.167%{transform:translate(-97.62px,24.64px) scale(0.906)}58.333%{transform:translate(-89.68px,15.47px) scale(0.865)}62.5%{transform:translate(-75.62px,5.24px) scale(0.83)}66.667%{transform:translate(-56.41px,-5.35px) scale(0.803)}70.833%{transform:translate(-33.36px,-15.57px) scale(0.786)}75.0%{transform:translate(-8.03px,-24.73px) scale(0.78)}79.167%{transform:translate(17.84px,-32.2px) scale(0.786)}83.333%{transform:translate(42.5px,-37.48px) scale(0.803)}87.5%{transform:translate(64.26px,-40.21px) scale(0.83)}91.667%{transform:translate(81.64px,-40.2px) scale(0.865)}95.833%{transform:translate(93.46px,-37.44px) scale(0.906)}100.0%{transform:translate(98.91px,-32.14px) scale(0.95)}}@keyframes ilOrbW{0.0%{transform:translate(89.27px,-22.26px) scale(1.0)}5.0%{transform:translate(86.84px,-13.37px) scale(1.062)}10.0%{transform:translate(75.92px,-3.18px) scale(1.118)}15.0%{transform:translate(57.56px,7.33px) scale(1.162)}20.0%{transform:translate(33.57px,17.12px) scale(1.19)}25.0%{transform:translate(6.29px,25.23px) scale(1.2)}30.0%{transform:translate(-21.6px,30.87px) scale(1.19)}35.0%{transform:translate(-47.38px,33.49px) scale(1.162)}40.0%{transform:translate(-68.52px,32.83px) scale(1.118)}45.0%{transform:translate(-82.95px,28.96px) scale(1.062)}50.0%{transform:translate(-89.27px,22.26px) scale(1.0)}55.0%{transform:translate(-86.84px,13.37px) scale(0.938)}60.0%{transform:translate(-75.92px,3.18px) scale(0.882)}65.0%{transform:translate(-57.56px,-7.33px) scale(0.838)}70.0%{transform:translate(-33.57px,-17.12px) scale(0.81)}75.0%{transform:translate(-6.29px,-25.23px) scale(0.8)}80.0%{transform:translate(21.6px,-30.87px) scale(0.81)}85.0%{transform:translate(47.38px,-33.49px) scale(0.838)}90.0%{transform:translate(68.52px,-32.83px) scale(0.882)}95.0%{transform:translate(82.95px,-28.96px) scale(0.938)}100.0%{transform:translate(89.27px,-22.26px) scale(1.0)}}

/* --- umum: awan, kilau, bayangan, roket --- */
.il-dr{animation:ilDrift 9s ease-in-out infinite}
.il-tw{animation:ilTw 3.6s ease-in-out infinite;animation-delay:var(--d,0s)}
.il-gr{animation:ilGround 5s ease-in-out infinite}
.il-sway{animation:ilSway 4.6s ease-in-out infinite;animation-delay:var(--d,0s)}
.il-chip{animation:ilFloat 4.2s ease-in-out infinite;animation-delay:var(--d,0s)}
.il-fl{animation:ilFloat 5s ease-in-out infinite}
.il-fire{transform-box:fill-box;transform-origin:50% 0;animation:ilFire .9s ease-in-out infinite}
.il-glow{animation:ilGlow 4.4s ease-in-out infinite}
.il-ping{opacity:0}
.il-dot{animation:none}
.il-st{opacity:0}
.il-hub{transform-box:fill-box;transform-origin:50% 50%}
.rsec-wz:has(.skel) .il-a .il-hub,.il-a.il-go .il-hub,.rsec-wz:has(.skel) .il-s .il-hub,.il-s.il-go .il-hub{animation:ilBeat .8s ease-in-out infinite}

/* --- SEMUA ALAT: globe berputar + ikon mengorbit --- */
.il-t{--ot:20s}
.il-t .il-land{animation:ilLandT 38s linear infinite}
.il-t .ol{animation:ilOrbT var(--ot) linear infinite;animation-delay:calc(var(--ot)*var(--k)*-.25)}
.il-t .ol-f{animation:ilOrbT var(--ot) linear infinite,ilVF var(--ot) linear infinite;animation-delay:calc(var(--ot)*var(--k)*-.25)}
.il-t .ol-b{animation:ilOrbT var(--ot) linear infinite,ilVB var(--ot) linear infinite;animation-delay:calc(var(--ot)*var(--k)*-.25)}
body:has(.skel) .il-t,body:has(.tn-load) .il-t,.il-t.il-go{--ot:7s}
body:has(.skel) .il-t .il-land,body:has(.tn-load) .il-t .il-land,.il-t.il-go .il-land{animation-duration:11s}
body:has(.skel) .il-t .il-glow,body:has(.tn-load) .il-t .il-glow,.il-t.il-go .il-glow{animation-duration:1.3s}
body:has(.skel) .il-t .il-ping,body:has(.tn-load) .il-t .il-ping,.il-t.il-go .il-ping{animation:ilPing 1.5s ease-out infinite}
body:has(.skel) .il-t .il-ping2,body:has(.tn-load) .il-t .il-ping2,.il-t.il-go .il-ping2{animation-delay:.75s}
body:has(.skel) .il-t .il-gr,body:has(.tn-load) .il-t .il-gr,.il-t.il-go .il-gr{animation-duration:1.6s}

/* --- WHOIS: globe, satelit, kaca pembesar memindai jendela --- */
.il-w .il-land{animation:ilLandW 34s linear infinite}
.il-w .ow{animation:ilOrbW 14s linear infinite}
.il-w .ow-f{animation:ilOrbW 14s linear infinite,ilVF 14s linear infinite}
.il-w .ow-b{animation:ilOrbW 14s linear infinite,ilVB 14s linear infinite}
.il-w .il-mag{animation:ilMagSettle .95s cubic-bezier(.3,1,.4,1) backwards,ilMagIdle 5.5s ease-in-out .95s infinite}
.il-w .il-row{transform-box:fill-box;transform-origin:0 50%;animation:ilRowIn .6s cubic-bezier(.2,.9,.3,1) backwards;animation-delay:calc(.25s + var(--i)*.12s)}
.il-w .il-beam{opacity:0}
#sec-ringkasan:has(.rs-life.tn-load) .il-w .il-mag,#sec-ringkasan:has(.rs-vd.tn-load) .il-w .il-mag,.il-w.il-go .il-mag{animation:ilMagScan 3.4s ease-in-out infinite}
#sec-ringkasan:has(.rs-life.tn-load) .il-w .il-beam,#sec-ringkasan:has(.rs-vd.tn-load) .il-w .il-beam,.il-w.il-go .il-beam{animation:ilBeam 1.7s linear infinite}
#sec-ringkasan:has(.rs-life.tn-load) .il-w .il-row,#sec-ringkasan:has(.rs-vd.tn-load) .il-w .il-row,.il-w.il-go .il-row{animation:ilRowP 1.1s ease-in-out infinite;animation-delay:calc(var(--i)*.22s)}
#sec-ringkasan:has(.rs-life.tn-load) .il-w .il-wtx,#sec-ringkasan:has(.rs-vd.tn-load) .il-w .il-wtx,.il-w.il-go .il-wtx{animation:ilRowP 1.1s ease-in-out infinite}
#sec-ringkasan:has(.rs-life.tn-load) .il-w .il-land,#sec-ringkasan:has(.rs-vd.tn-load) .il-w .il-land,.il-w.il-go .il-land{animation-duration:12s}
#sec-ringkasan:has(.rs-life.tn-load) .il-w .il-glow,#sec-ringkasan:has(.rs-vd.tn-load) .il-w .il-glow,.il-w.il-go .il-glow{animation-duration:1.4s}
#sec-ringkasan:has(.rs-life.tn-load) .il-w .il-ping,#sec-ringkasan:has(.rs-vd.tn-load) .il-w .il-ping,.il-w.il-go .il-ping{animation:ilPing 1.6s ease-out infinite}
#sec-ringkasan:has(.rs-life.tn-load) .il-w .il-ping2,#sec-ringkasan:has(.rs-vd.tn-load) .il-w .il-ping2,.il-w.il-go .il-ping2{animation-delay:.8s}
#sec-ringkasan:has(.rs-life.tn-load) .il-w .il-dot,#sec-ringkasan:has(.rs-vd.tn-load) .il-w .il-dot,.il-w.il-go .il-dot{animation:ilDot 1s ease-in-out infinite;animation-delay:calc(var(--i)*.18s)}
#sec-ringkasan:has(.rs-life.tn-load) .il-w .ow,#sec-ringkasan:has(.rs-vd.tn-load) .il-w .ow,.il-w.il-go .ow,#sec-ringkasan:has(.rs-life.tn-load) .il-w .ow-f,#sec-ringkasan:has(.rs-vd.tn-load) .il-w .ow-f,.il-w.il-go .ow-f,#sec-ringkasan:has(.rs-life.tn-load) .il-w .ow-b,#sec-ringkasan:has(.rs-vd.tn-load) .il-w .ow-b,.il-w.il-go .ow-b{animation-duration:4s}

/* --- WEB ANALYZER --- */
.il-a .il-nd{animation:ilNdSettleA 1.1s cubic-bezier(.25,1.35,.4,1) backwards,ilNdA 7s ease-in-out 1.1s infinite;transform:rotate(52deg)}
.il-a .il-bar{transform-box:fill-box;transform-origin:50% 100%;animation:ilBarIn .8s cubic-bezier(.2,.9,.3,1) backwards;animation-delay:calc(.2s + var(--i)*.12s)}
.il-a .il-ln{stroke-dasharray:100;animation:ilDashIn 1s ease-out .45s backwards}
.il-a .il-ar{animation:ilAppear 1.5s linear backwards}
.il-a .il-scan{opacity:0}
.rsec-wz:has(.skel) .il-a .il-nd,.il-a.il-go .il-nd{animation:ilNdSweepA 1.25s ease-in-out infinite alternate}
.rsec-wz:has(.skel) .il-a .il-seg,.il-a.il-go .il-seg{animation:ilSeg 1.3s ease-in-out infinite;animation-delay:calc(var(--i)*.13s)}
.rsec-wz:has(.skel) .il-a .il-bar,.il-a.il-go .il-bar{animation:ilBarEq .6s ease-in-out infinite alternate;animation-delay:calc(var(--i)*.16s)}
.rsec-wz:has(.skel) .il-a .il-ln,.il-a.il-go .il-ln{animation:ilDashLoop 1.7s ease-in-out infinite}
.rsec-wz:has(.skel) .il-a .il-ar,.il-a.il-go .il-ar{animation:ilFade 1.7s ease-in-out infinite}
.rsec-wz:has(.skel) .il-a .il-scan,.il-a.il-go .il-scan{animation:ilScan 1.9s linear infinite}
.rsec-wz:has(.skel) .il-a .il-fl,.il-a.il-go .il-fl{animation:ilFloat 1.1s ease-in-out infinite}
.rsec-wz:has(.skel) .il-a .il-fire,.il-a.il-go .il-fire{animation-duration:.22s}
.rsec-wz:has(.skel) .il-a .il-chip,.il-a.il-go .il-chip{animation-duration:1.6s}

/* --- KECEPATAN --- */
.il-s .il-nd{animation:ilNdSettleS 1.1s cubic-bezier(.25,1.35,.4,1) backwards,ilNdS 6s ease-in-out 1.1s infinite;transform:rotate(38deg)}
.il-s .il-fill{transform-box:fill-box;transform-origin:0 50%;transform:scaleX(.646);animation:ilFillIn 1.1s cubic-bezier(.2,.9,.3,1) .2s backwards}
.rsec-wz:has(.skel) .il-s .il-nd,.il-s.il-go .il-nd{animation:ilNdSweepS 1.05s ease-in-out infinite alternate}
.rsec-wz:has(.skel) .il-s .il-seg,.il-s.il-go .il-seg{animation:ilSeg 1.1s ease-in-out infinite;animation-delay:calc(var(--i)*.12s)}
.rsec-wz:has(.skel) .il-s .il-fill,.il-s.il-go .il-fill{animation:ilFillLoop 1.7s cubic-bezier(.5,0,.3,1) infinite}
.rsec-wz:has(.skel) .il-s .il-dot,.il-s.il-go .il-dot{animation:ilDot .9s ease-in-out infinite;animation-delay:calc(var(--i)*.15s)}
.rsec-wz:has(.skel) .il-s .il-fl,.il-s.il-go .il-fl{animation:ilFloat .8s ease-in-out infinite}
.rsec-wz:has(.skel) .il-s .il-fire,.il-s.il-go .il-fire{animation-duration:.2s}
.rsec-wz:has(.skel) .il-s .il-st,.il-s.il-go .il-st{animation:ilStreak .65s linear infinite;animation-delay:calc(var(--i)*.2s)}

/* --- EMAIL --- */
.il-m .il-lt{transform:translateY(-30px);animation:ilLtSettle .9s cubic-bezier(.3,1.3,.4,1) backwards}
.il-m .il-tick{transform-box:fill-box;transform-origin:50% 50%;animation:ilTickIn .45s cubic-bezier(.2,1.3,.4,1) backwards;animation-delay:calc(.45s + var(--i)*.14s)}
.il-m .il-sh{transform-box:fill-box;transform-origin:50% 60%;animation:ilPulseS .8s cubic-bezier(.3,1.4,.4,1) .1s backwards,ilBreath 4.6s ease-in-out .9s infinite}
.il-m .il-shine{animation:ilShineIdle 6s ease-in-out 1.4s infinite;transform:translateX(15px) skewX(-18deg)}
.il-m .il-ck{stroke-dasharray:100;animation:ilDraw .7s ease-out .3s backwards}
.il-m .il-ping{animation:ilPingOnce 1.2s ease-out .25s 1 forwards}
.il-m .il-ping2{display:none}
.rsec-wz:has(.skel) .il-m .il-lt,.il-m.il-go .il-lt{animation:ilLtLoop 2.6s ease-in-out infinite}
.rsec-wz:has(.skel) .il-m .il-tick,.il-m.il-go .il-tick{animation:ilTickLoop 2.6s ease-in-out infinite;animation-delay:calc(.25s + var(--i)*.3s)}
.rsec-wz:has(.skel) .il-m .il-sh,.il-m.il-go .il-sh{animation:ilBeat .9s ease-in-out infinite}
.rsec-wz:has(.skel) .il-m .il-shine,.il-m.il-go .il-shine{animation:ilShineLoop 1.2s linear infinite}
.rsec-wz:has(.skel) .il-m .il-ck,.il-m.il-go .il-ck{animation:ilDrawLoop 2s ease-in-out infinite}
.rsec-wz:has(.skel) .il-m .il-ping,.il-m.il-go .il-ping{animation:ilPing 1.6s ease-out infinite}
.rsec-wz:has(.skel) .il-m .il-ping2,.il-m.il-go .il-ping2{display:inline;animation-delay:.8s}

@media(prefers-reduced-motion:reduce){.il,.il *{animation:none!important}}

/* ===== Platform / CMS (Web Analyzer) ===== */
.wz-cms{display:grid;gap:14px;padding:16px;border:1px solid var(--bd);border-radius:20px;background:color-mix(in srgb,var(--pri2) 30%,var(--sf))}
.wz-cms.wz-ok .wz-bub{--f:var(--good)}.wz-cms.wz-wn .wz-bub{--f:var(--warn)}.wz-cms.wz-nu .wz-bub{--f:var(--pri)}
.wz-cm-h{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.wz-cm-h .wz-bub{width:56px;height:56px}.wz-cm-h .wz-bub svg{width:28px;height:28px}
.wz-cm-t{flex:1 1 220px;min-width:0}
.wz-cm-t small{display:block;font-size:13px;color:var(--mut)}
.wz-cm-t h4{margin:2px 0 0;font-size:clamp(21px,3.4cqw,28px);line-height:1.2;font-weight:800;letter-spacing:-.5px;color:var(--hd);overflow-wrap:anywhere}
.wz-cm-t h4 em{font-style:normal;font-size:.6em;font-weight:700;color:var(--mut);letter-spacing:0;margin-left:4px}
.wz-cm-m{display:flex;gap:8px;flex-wrap:wrap}
.wz-ch{display:inline-block;padding:5px 13px;border:1px solid var(--bd);border-radius:99px;background:var(--sf);font-size:13px;font-weight:600;line-height:1.3;color:var(--tx)}
.wz-ch.kd{background:#dce9ff;border-color:#cfe0fb;color:var(--pri)}
.wz-ch.cf{background:#dff5e8;border-color:transparent;color:var(--good)}
.wz-wn .wz-ch.cf{background:#fff0d2;color:#b86e00}.wz-nu .wz-ch.cf{background:#e8eefb;color:var(--mut)}
.wz-ch.tc{background:color-mix(in srgb,var(--pri2) 55%,var(--sf))}
.wz-cm-b{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:14px;align-items:start}
.wz-cm-s{padding:12px 14px;border:1px solid var(--bd);border-radius:14px;background:var(--sf)}
.wz-cm-s+.wz-cm-s{margin-top:10px}
.wz-cm-s b{display:block;margin-bottom:6px;font-size:13.5px;color:var(--hd)}
.wz-cm-s p{margin:0;font-size:13.5px;line-height:1.5;color:var(--tx)}
.wz-cm-s ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.wz-cm-s li{position:relative;padding-left:20px;font-size:13.5px;line-height:1.45;color:var(--tx);overflow-wrap:anywhere}
.wz-cm-s li::before{content:"";position:absolute;left:3px;top:.5em;width:7px;height:7px;border-radius:50%;background:var(--good)}
.wz-chs{display:flex;flex-wrap:wrap;gap:7px}
.wz-cm-s dl{margin:0;display:grid;gap:6px}.wz-cm-s dl div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:8px;font-size:13.5px;line-height:1.45}
.wz-cm-s dt{color:var(--hd);font-weight:600}.wz-cm-s dd{margin:0;color:var(--tx);overflow-wrap:anywhere}
.wz-cm-n{margin:0;font-size:12.5px;line-height:1.5;color:var(--mut)}
html[data-theme=dark] .wz-ch.kd{background:var(--pri2);border-color:var(--bd);color:#8fb4ff}
html[data-theme=dark] .wz-ch.cf{background:#123a2a}html[data-theme=dark] .wz-wn .wz-ch.cf{background:#44330f;color:#ffc65a}html[data-theme=dark] .wz-nu .wz-ch.cf{background:#1b2a52}
@container wz (max-width:800px){.wz-cm-b{grid-template-columns:1fr}.wz-cm-s+.wz-cm-s{margin-top:10px}.wz-cm-b>div+div{margin-top:0}}
@container wz (max-width:560px){.wz-cms{padding:12px}.wz-cm-h .wz-bub{width:46px;height:46px}.wz-cm-s dl div{grid-template-columns:92px minmax(0,1fr)}}