/* =====================================================================
   InfoDomain · Lapisan Polish (dimuat SETELAH style.css, whois.css, dll.)
   Isi: latar aurora, header kaca, tombol hidup, ikon, reveal saat scroll,
   penyempurnaan halaman Legal / Kontak / Tentang Kami / Peta Situs / 404,
   dan perbaikan khusus HP. Semua gerak menghormati prefers-reduced-motion.
   ===================================================================== */
:root{
  --pg-ease:cubic-bezier(.22,.8,.24,1);
  --pg-spring:cubic-bezier(.34,1.56,.64,1);
  --pg-a:#1f62f2;--pg-b:#6d4be0;--pg-c:#06b6d4;
  --pg-glow:rgba(31,98,242,.28);
  --pg-glass:rgba(255,255,255,.78);
  --pg-line:rgba(31,98,242,.10);
}
html[data-theme=dark]{--pg-glass:rgba(13,22,52,.78);--pg-line:rgba(120,160,255,.14);--pg-glow:rgba(79,139,255,.35)}
@property --pg-ang{syntax:"<angle>";inherits:false;initial-value:0deg}

/* ---------- dasar ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{overflow-x:clip;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
::selection{background:rgba(31,98,242,.22);color:inherit}
:focus-visible{outline:3px solid rgba(31,98,242,.5);outline-offset:2px;border-radius:8px}
html[data-theme=dark] :focus-visible{outline-color:rgba(127,176,255,.7)}
body.pub{animation:pgFade .5s ease both}
@keyframes pgFade{from{opacity:0}to{opacity:1}}

/* transisi halus saat ganti tema */
html.pg-theming *,html.pg-theming *::before,html.pg-theming *::after{transition:background-color .4s ease,color .4s ease,border-color .4s ease,box-shadow .4s ease,fill .4s ease,stroke .4s ease!important}

/* ---------- latar aurora (di belakang semua konten) ---------- */
body.pub::before{content:"";position:fixed;inset:-10% -10% -10% -10%;z-index:-1;pointer-events:none;
  background:
   radial-gradient(520px 420px at 12% 8%,rgba(31,98,242,.10),transparent 70%),
   radial-gradient(560px 460px at 92% 22%,rgba(109,75,224,.09),transparent 70%),
   radial-gradient(620px 520px at 55% 98%,rgba(6,182,212,.08),transparent 70%);
  animation:pgAurora 26s ease-in-out infinite alternate;will-change:transform}
html[data-theme=dark] body.pub::before{background:
   radial-gradient(520px 420px at 12% 8%,rgba(60,110,255,.20),transparent 70%),
   radial-gradient(560px 460px at 92% 22%,rgba(140,90,255,.16),transparent 70%),
   radial-gradient(620px 520px at 55% 98%,rgba(20,180,220,.12),transparent 70%)}
@keyframes pgAurora{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-2%,3%,0) scale(1.06)}100%{transform:translate3d(3%,-2%,0) scale(1.02)}}

/* ---------- bar progres scroll ---------- */
.pg-bar{position:fixed;left:0;top:0;height:3px;width:100%;z-index:60;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--pg-a),var(--pg-b),var(--pg-c));box-shadow:0 0 12px var(--pg-glow)}

/* ---------- header kaca ---------- */
body .top{background:var(--pg-glass);-webkit-backdrop-filter:saturate(1.7) blur(16px);backdrop-filter:saturate(1.7) blur(16px);
  border-bottom:1px solid transparent;transition:box-shadow .35s ease,border-color .35s ease,background-color .35s ease}
html.sc body .top,html.sc .top{border-bottom-color:var(--pg-line);box-shadow:0 10px 30px -14px rgba(20,60,160,.28)}
.nav{transition:height .3s var(--pg-ease)}
html.sc .nav{height:62px}
.brand img{transition:transform .35s var(--pg-spring),filter .3s}
.brand:hover img{transform:scale(1.04) rotate(-1deg)}
.nav nav>a,.dt{position:relative;transition:background-color .22s,color .22s,transform .22s var(--pg-ease)}
.nav nav>a:hover,.dt:hover{background:var(--pri2);transform:translateY(-1px)}
.nav nav>a .ni,.dt .ni{transition:transform .3s var(--pg-spring)}
.nav nav>a:hover .ni,.dt:hover .ni{transform:scale(1.15) rotate(-6deg)}
.dt .cv{transition:transform .3s var(--pg-ease)}
.dd:hover .cv,.dd.open .cv{transform:rotate(180deg)}
.dm a{display:flex;align-items:center;gap:10px;transition:background-color .18s,color .18s,transform .22s var(--pg-ease)}
.dm a .mi{width:18px;height:18px;flex:none;opacity:.75;transition:transform .25s var(--pg-spring),opacity .2s}
.dm a:hover{transform:translateX(4px)}.dm a:hover .mi{opacity:1;transform:scale(1.15)}
.theme{transition:background-color .2s,transform .35s var(--pg-spring)}
.theme:hover{transform:rotate(18deg) scale(1.08)}.theme:active{transform:scale(.9)}
.burger{transition:background-color .2s,transform .2s}.burger:active{transform:scale(.92)}

@media(min-width:1181px){
  .dm{display:block!important;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px) scale(.97);transform-origin:top left;
    transition:opacity .22s ease,transform .3s var(--pg-ease),visibility 0s linear .3s;margin-top:4px;
    background:var(--sf)}
  .nav .dm .mi{display:block;width:18px;height:18px;color:var(--pri);opacity:.85}
  .nav .dm a{padding:10px 14px 10px 12px}
  .dd:hover .dm,.dd:focus-within .dm,.dd.open .dm{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s}
  @media(min-width:1290px){.nav nav>a .ni,.dt .ni{display:block;width:20px;height:20px;color:var(--pri)}}
  .dd::after{content:"";position:absolute;left:0;right:0;top:100%;height:8px} /* jembatan hover agar menu tidak menutup */
}

/* menu mobile: masuk dengan animasi */
@media(max-width:1180px){
  #nav.open{animation:pgNavIn .35s var(--pg-ease) both;transform-origin:top center}
  #nav.open>a,#nav.open>.dd{animation:pgRise .45s var(--pg-ease) backwards}
  #nav.open>*:nth-child(1){animation-delay:.04s}#nav.open>*:nth-child(2){animation-delay:.08s}#nav.open>*:nth-child(3){animation-delay:.12s}
  #nav.open>*:nth-child(4){animation-delay:.16s}#nav.open>*:nth-child(5){animation-delay:.2s}#nav.open>*:nth-child(6){animation-delay:.24s}
  #nav.open .dd.open .dm{animation:pgRise .3s var(--pg-ease) both}
  #nav.open a,#nav.open .dt{min-height:46px}
}
@keyframes pgNavIn{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes pgRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- tombol ---------- */
.btn:not(.red):not(.ghost){position:relative;overflow:hidden;isolation:isolate;
  background-image:linear-gradient(135deg,#3a79ff 0%,#1f62f2 48%,#4b4df0 100%);background-size:160% 160%;background-position:0 50%;
  box-shadow:0 10px 22px -8px rgba(31,98,242,.6),inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .25s var(--pg-spring),box-shadow .3s ease,background-position .5s ease,filter .2s}
.btn:not(.red):not(.ghost):hover{filter:none;transform:translateY(-2px);background-position:100% 50%;box-shadow:0 16px 30px -10px rgba(31,98,242,.7),inset 0 1px 0 rgba(255,255,255,.3)}
.btn:not(.red):not(.ghost):active{transform:translateY(0) scale(.97);box-shadow:0 6px 14px -8px rgba(31,98,242,.7)}
.btn:not(.red):not(.ghost)::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.38) 50%,transparent 65%);transform:translateX(-130%);transition:transform .8s var(--pg-ease)}
.btn:not(.red):not(.ghost):hover::after{transform:translateX(130%)}
.btn.ghost,.ab-btn{transition:transform .25s var(--pg-spring),box-shadow .3s,background-color .2s,border-color .2s}
.btn.ghost:hover,.ab-btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px -12px rgba(31,98,242,.45)}
.btn:disabled{transform:none!important;filter:grayscale(.2)}
.pg-rp{position:absolute;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.55);transform:scale(0);animation:pgRipple .65s ease-out forwards;z-index:0}
@keyframes pgRipple{to{transform:scale(1);opacity:0}}
/* ikon kaca pembesar di tombol cek halaman tool */
.wh .sbar .btn:not(:has(svg))::before{content:"";display:inline-block;width:18px;height:18px;margin-right:8px;vertical-align:-3px;background:currentColor;
  -webkit-mask:var(--ic-search) center/contain no-repeat;mask:var(--ic-search) center/contain no-repeat}

/* ---------- kolom pencarian ---------- */
.sbar{position:relative;transition:box-shadow .35s ease,transform .35s var(--pg-ease)}
.sbar::before{content:"";position:absolute;inset:-2px;border-radius:inherit;padding:2px;pointer-events:none;opacity:0;transition:opacity .35s ease;
  background:conic-gradient(from var(--pg-ang),#1f62f2,#7c4dff,#22d3ee,#1f62f2);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:pgSpin 4s linear infinite}
.sbar:focus-within::before{opacity:1}
.sbar:focus-within{transform:translateY(-2px);box-shadow:0 22px 44px -16px var(--pg-glow)}
@keyframes pgSpin{to{--pg-ang:360deg}}
.sbar input{font-size:16px}
.chip,.pop .chip{transition:transform .25s var(--pg-spring),background-color .2s,color .2s,box-shadow .25s}
.chip:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 10px 20px -10px var(--pg-glow);background:var(--pri);color:#fff}
.chip:active{transform:scale(.95)}

/* ---------- judul hero: gradien bergerak + masuk bertahap ---------- */
.whero h1 em,.hero h1 em,.nf h1 em{background-image:linear-gradient(100deg,#1f62f2 0%,#6d4be0 35%,#06b6d4 65%,#1f62f2 100%)!important;background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;animation:pgShift 7s ease-in-out infinite alternate}
html[data-theme=dark] .whero h1 em,html[data-theme=dark] .hero h1 em,html[data-theme=dark] .nf h1 em{background-image:linear-gradient(100deg,#7fb0ff 0%,#b79cff 35%,#5eead4 65%,#7fb0ff 100%)!important}
@keyframes pgShift{from{background-position:0% 50%}to{background-position:100% 50%}}
.whero>*,.hero .hl>*,.nf-l>*{animation:pgRise .75s var(--pg-ease) backwards}
.whero>*:nth-child(1),.hero .hl>*:nth-child(1),.nf-l>*:nth-child(1){animation-delay:.05s}
.whero>*:nth-child(2),.hero .hl>*:nth-child(2),.nf-l>*:nth-child(2){animation-delay:.12s}
.whero>*:nth-child(3),.hero .hl>*:nth-child(3),.nf-l>*:nth-child(3){animation-delay:.19s}
.whero>*:nth-child(4),.hero .hl>*:nth-child(4),.nf-l>*:nth-child(4){animation-delay:.26s}
.whero>*:nth-child(5),.hero .hl>*:nth-child(5),.nf-l>*:nth-child(5){animation-delay:.33s}
.whero>*:nth-child(n+6),.hero .hl>*:nth-child(n+6),.nf-l>*:nth-child(n+6){animation-delay:.4s}
.hero .hr{animation:pgFloatIn 1s var(--pg-ease) .15s both}
@keyframes pgFloatIn{from{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:none}}
.crumb{animation:pgFade .6s ease both}
.crumb a{transition:transform .22s var(--pg-ease),background-color .2s}.crumb a:hover{transform:translateX(-2px)}

/* ---------- reveal saat scroll (kelas dipasang oleh polish.js) ---------- */
.pg-rv{opacity:0;transform:translateY(26px) scale(.985);transition:opacity .7s ease,transform .8s var(--pg-ease);transition-delay:calc(var(--pg-d,0)*70ms);will-change:opacity,transform}
.pg-rv.pg-in{opacity:1;transform:none;will-change:auto}

/* ---------- kartu: hover hidup ---------- */
.ab-st,.ab-pr,.ab-tool,.ab-two .card,.ps-col,.nf-c,.ab-story .card,.legal .toc{transition:transform .45s var(--pg-ease),box-shadow .45s ease,border-color .3s ease}
.ab-st:hover,.ab-pr:hover,.ps-col:hover,.nf-c:hover,.ab-two .card:hover{transform:translateY(-6px);box-shadow:0 22px 46px -18px var(--pg-glow);border-color:#bcd2fb}
html[data-theme=dark] .ab-st:hover,html[data-theme=dark] .ab-pr:hover,html[data-theme=dark] .ps-col:hover,html[data-theme=dark] .nf-c:hover,html[data-theme=dark] .ab-two .card:hover{border-color:#3a5399}
.ab-tool:hover{transform:translateY(-6px)}
.ab-tool i,.nf-ic,.ps-col h2 i{transition:transform .4s var(--pg-spring)}
.ab-tool:hover i,.nf-c:hover .nf-ic,.ps-col:hover h2 i{transform:rotate(-8deg) scale(1.12)}
.ab-tool .go{transition:transform .3s var(--pg-ease)}.ab-tool:hover .go{transform:translateX(5px)}
.ps-col li a{transition:transform .25s var(--pg-ease),color .2s,background-color .2s}.ps-col li a:hover{transform:translateX(5px)}

/* ---------- Tentang Kami ---------- */
.ab-hero{isolation:isolate}
.ab-hero::after{content:"";position:absolute;inset:auto -10% -40% auto;width:520px;height:520px;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(125,211,252,.35),transparent 65%);animation:pgOrb 12s ease-in-out infinite alternate}
@keyframes pgOrb{from{transform:translate(0,0) scale(1)}to{transform:translate(-60px,-30px) scale(1.2)}}
.ab-hero>*:not(.ab-orb){position:relative;z-index:1}
.ab-st{position:relative;overflow:hidden;padding-right:64px}
.ab-st::after{content:"";position:absolute;right:14px;top:14px;width:38px;height:38px;border-radius:12px;
  background:linear-gradient(135deg,rgba(31,98,242,.14),rgba(109,75,224,.14));
  -webkit-mask:none;mask:none}
.ab-st::before{content:"";position:absolute;right:14px;top:14px;width:38px;height:38px;z-index:1;
  background:linear-gradient(135deg,#1f62f2,#6d4be0);-webkit-mask:var(--ic-grid) center/20px no-repeat;mask:var(--ic-grid) center/20px no-repeat;transition:transform .45s var(--pg-spring)}
.ab-st:nth-child(2)::before{-webkit-mask-image:var(--ic-globe);mask-image:var(--ic-globe)}
.ab-st:nth-child(3)::before{-webkit-mask-image:var(--ic-user);mask-image:var(--ic-user)}
.ab-st:nth-child(4)::before{-webkit-mask-image:var(--ic-gift);mask-image:var(--ic-gift)}
.ab-st:hover::before{transform:rotate(-10deg) scale(1.18)}
.ab-quote:before{animation:pgBob 4s ease-in-out infinite}
@keyframes pgBob{50%{transform:translateY(-6px)}}
.ab-end{position:relative;overflow:hidden}
.ab-end::before{content:"";position:absolute;width:380px;height:380px;border-radius:50%;left:-120px;top:-160px;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,.22),transparent 65%);animation:pgOrb 10s ease-in-out infinite alternate}

/* ---------- halaman Legal / Kontak ---------- */
.legal{position:relative;overflow:hidden}
.legal::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:linear-gradient(90deg,var(--pg-a),var(--pg-b),var(--pg-c));background-size:200% 100%;animation:pgShift 6s linear infinite alternate}
.legal h2{display:flex;align-items:center;gap:12px;padding-top:6px}
.legal h2::before{content:"";flex:none;width:38px;height:38px;border-radius:12px;
  background:linear-gradient(135deg,#1f62f2,#6d4be0);box-shadow:0 8px 18px -8px rgba(31,98,242,.7);
  -webkit-mask:none;mask:none;
  background-image:var(--pg-ic,var(--ic-doc)),linear-gradient(135deg,#1f62f2,#6d4be0);background-repeat:no-repeat;background-position:center,center;background-size:20px,cover;
  transition:transform .4s var(--pg-spring)}
.legal section:hover h2::before{transform:rotate(-8deg) scale(1.1)}
.legal ul{list-style:none;padding-left:0}
.legal li{transition:transform .25s var(--pg-ease)}
.legal ul li{position:relative;padding-left:34px}
.legal ul li::before{content:"";position:absolute;left:0;top:.35em;width:22px;height:22px;border-radius:50%;
  background:var(--ic-check) center/12px no-repeat,linear-gradient(135deg,#13a05b,#34d399);box-shadow:0 4px 10px -4px rgba(19,160,91,.6)}
.legal li:hover{transform:translateX(4px)}
.legal .toc{background:linear-gradient(135deg,var(--pri2),transparent 140%)}
.legal .toc b{display:flex;align-items:center;gap:8px}
.legal .toc b::before{content:"";width:18px;height:18px;background:var(--pri);-webkit-mask:var(--ic-list) center/contain no-repeat;mask:var(--ic-list) center/contain no-repeat}
.legal .toc a{display:inline-block;transition:transform .2s var(--pg-ease)}.legal .toc a:hover{transform:translateX(4px);text-decoration:none}
.legal .cmail{margin:16px 0}
.legal .cmail a{display:inline-flex;align-items:center;gap:12px;padding:14px 22px;border:0;border-radius:16px;color:#fff;font-size:18px;
  background:linear-gradient(135deg,#2b6df6,#6d4be0);box-shadow:0 14px 28px -12px rgba(31,98,242,.7);transition:transform .3s var(--pg-spring),box-shadow .3s}
.legal .cmail a::before{content:"";width:24px;height:24px;background:#fff;-webkit-mask:var(--ic-mail) center/contain no-repeat;mask:var(--ic-mail) center/contain no-repeat;animation:pgWiggle 3.5s ease-in-out infinite}
.legal .cmail a:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 20px 36px -12px rgba(31,98,242,.8)}
@keyframes pgWiggle{0%,86%,100%{transform:rotate(0)}90%{transform:rotate(-14deg)}94%{transform:rotate(12deg)}98%{transform:rotate(-6deg)}}
.legal .upd{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:99px;background:var(--pri2)}
.legal .upd::before{content:"";width:15px;height:15px;background:var(--pri);-webkit-mask:var(--ic-clock) center/contain no-repeat;mask:var(--ic-clock) center/contain no-repeat}

/* ikon per topik (dipilih polish.js lewat atribut data-ic) */
.legal h2[data-ic=shield]{--pg-ic:var(--ic-shield)}.legal h2[data-ic=mail]{--pg-ic:var(--ic-mail)}.legal h2[data-ic=user]{--pg-ic:var(--ic-user)}
.legal h2[data-ic=lock]{--pg-ic:var(--ic-lock)}.legal h2[data-ic=globe]{--pg-ic:var(--ic-globe)}.legal h2[data-ic=alert]{--pg-ic:var(--ic-alert)}
.legal h2[data-ic=scale]{--pg-ic:var(--ic-scale)}.legal h2[data-ic=link]{--pg-ic:var(--ic-link)}.legal h2[data-ic=ad]{--pg-ic:var(--ic-ad)}
.legal h2[data-ic=chat]{--pg-ic:var(--ic-chat)}.legal h2[data-ic=clock]{--pg-ic:var(--ic-clock)}.legal h2[data-ic=tool]{--pg-ic:var(--ic-tool)}
.legal h2[data-ic=info]{--pg-ic:var(--ic-info)}.legal h2[data-ic=eye]{--pg-ic:var(--ic-eye)}.legal h2[data-ic=db]{--pg-ic:var(--ic-db)}

/* ---------- Footer ---------- */
.fmenu a,.finfo a,.copy a{transition:transform .25s var(--pg-ease),color .2s,opacity .2s}
.fmenu a:hover,.finfo a:hover{transform:translateX(5px)}
.fmenu a svg,.finfo a svg{transition:transform .3s var(--pg-spring)}
.fmenu a:hover svg,.finfo a:hover svg{transform:scale(1.2) rotate(-6deg)}
.fsoc a,.soc a{transition:transform .3s var(--pg-spring),box-shadow .3s,background-color .25s}
.fsoc a:hover,.soc a:hover{transform:translateY(-5px) scale(1.1)}
.copy a:hover{opacity:.8}
.totop{transition:opacity .35s ease,transform .35s var(--pg-spring),box-shadow .3s}
.totop:hover{transform:translateY(-4px) scale(1.06)}.totop:active{transform:scale(.92)}
.nl input{transition:box-shadow .25s,transform .25s}.nl input:focus{box-shadow:0 0 0 4px rgba(94,155,255,.35);outline:0}

/* ---------- 404 ---------- */
.nfart{animation:pgFloat 6s ease-in-out infinite}
@keyframes pgFloat{50%{transform:translateY(-12px)}}

/* ---------- ikon (SVG sebagai mask, tanpa file tambahan) ---------- */
:root{
 --ic-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/svg%3E");
 --ic-grid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='7' height='7' rx='2'/%3E%3Crect x='13.5' y='3.5' width='7' height='7' rx='2'/%3E%3Crect x='3.5' y='13.5' width='7' height='7' rx='2'/%3E%3Crect x='13.5' y='13.5' width='7' height='7' rx='2'/%3E%3C/svg%3E");
 --ic-globe:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E");
 --ic-user:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c.6-4 3.8-6 8-6s7.4 2 8 6'/%3E%3C/svg%3E");
 --ic-gift:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='9' width='17' height='11.5' rx='2'/%3E%3Cpath d='M2.5 9h19v-3h-19zM12 6v14.5M12 6c-1-3.5-5-3.5-5-1.2C7 6 9 6 12 6zm0 0c1-3.5 5-3.5 5-1.2C17 6 15 6 12 6z'/%3E%3C/svg%3E");
 --ic-mail:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='3'/%3E%3Cpath d='m4 8 8 5.5L20 8'/%3E%3C/svg%3E");
 --ic-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
 --ic-list:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11M4 6h.01M4 12h.01M4 18h.01'/%3E%3C/svg%3E");
 --ic-clock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
 --ic-doc:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l5 5v12a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E");
 --ic-shield:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 5 6v5.5c0 4.4 3 7.6 7 9.500 4-1.900 7-5.100 7-9.500V6z'/%3E%3Cpath d='m9 12 2.200 2.200L15.500 10'/%3E%3C/svg%3E");
 --ic-lock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.500' width='14' height='10' rx='2.500'/%3E%3Cpath d='M8 10.500V8a4 4 0 0 1 8 0v2.500M12 15v2'/%3E%3C/svg%3E");
 --ic-alert:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.500 2.500 20h19z'/%3E%3Cpath d='M12 10v4.500M12 17.500h.01'/%3E%3C/svg%3E");
 --ic-scale:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v16M7 20h10M5 7h14'/%3E%3Cpath d='m5 7-3 7a3 3 0 0 0 6 0zM19 7l-3 7a3 3 0 0 0 6 0z'/%3E%3C/svg%3E");
 --ic-link:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4.500 4.500 0 0 0 6.400 0l3-3a4.500 4.500 0 0 0-6.400-6.400l-1 1'/%3E%3Cpath d='M14 10a4.500 4.500 0 0 0-6.400 0l-3 3a4.500 4.500 0 0 0 6.400 6.400l1-1'/%3E%3C/svg%3E");
 --ic-ad:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Cpath d='M7.500 15l2.200-6 2.200 6M8.200 13.200h3M15 9v6M15 9.500h1.500a2.500 2.500 0 0 1 0 5H15'/%3E%3C/svg%3E");
 --ic-chat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5h14a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1h-8l-4.500 4V16H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z'/%3E%3Cpath d='M9 9.500h6M9 12.500h4'/%3E%3C/svg%3E");
 --ic-tool:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.500 6.500a4 4 0 0 0 5 5L21 13 13 21l-3.500-3.500 7.500-7.500'/%3E%3Cpath d='M3 21l5-5M14.500 6.500 11 3 7 7l3.500 3.500'/%3E%3C/svg%3E");
 --ic-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.200' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E");
 --ic-eye:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.600-7 10-7 10 7 10 7-3.600 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
 --ic-db:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='6' rx='7.500' ry='3'/%3E%3Cpath d='M4.500 6v6c0 1.700 3.400 3 7.500 3s7.500-1.300 7.500-3V6M4.500 12v6c0 1.700 3.400 3 7.500 3s7.500-1.300 7.500-3v-6'/%3E%3C/svg%3E");
}

/* =====================================================================
   HP & tablet
   ===================================================================== */
@media(max-width:1180px){
  .top{padding-top:env(safe-area-inset-top)}
}
@media(max-width:640px){
  .pub .wrap{padding-left:16px;padding-right:16px}
  .nav{height:64px}html.sc .nav{height:58px}
  .brand img{max-height:40px;width:auto}
  .burger,.theme{width:44px;height:44px}
  /* kartu langkah: ikon di kiri, teks di kanan (lebih ringkas) */
  .how .card{display:grid;grid-template-columns:56px 1fr;column-gap:14px;align-items:start;padding:18px 16px}
  .how .card .hi{grid-row:1 / span 3;width:52px;height:52px}
  .how .card h3{margin:2px 0 4px}
  .how .card>b{position:absolute;right:14px;top:12px;font-size:11px}
  .how .card h3{padding-right:78px}
  .chip{min-height:40px;display:inline-flex;align-items:center}
  .legal{padding:22px 16px}
  .legal h2{font-size:18px;gap:10px}.legal h2::before{width:34px;height:34px}
  .legal .cmail a{font-size:15px;padding:12px 16px;word-break:break-all}
  .ab-st{padding-right:58px}
  .ab-hero{border-radius:22px}
  .nf-grid{gap:12px}
  .totop{right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom))}
  .copy{padding-bottom:max(12px,env(safe-area-inset-bottom))}
  .pg-rv{transform:translateY(18px)}
  body.pub::before{animation-duration:40s}
}
@media(hover:none){
  .chip:hover,.btn:not(.red):not(.ghost):hover,.ab-st:hover,.ab-pr:hover,.ab-tool:hover,.ps-col:hover,.nf-c:hover,.ab-two .card:hover{transform:none}
  .chip:hover{background:var(--pri2);color:var(--pri);box-shadow:none}
  .chip:active,.ab-tool:active,.nf-c:active,.ps-col li a:active{transform:scale(.97)}
}

/* ---------- hormati preferensi gerak ---------- */
@media(prefers-reduced-motion:reduce){
  body.pub,body.pub::before,.whero>*,.hero .hl>*,.hero .hr,.nf-l>*,.crumb,.nfart,.legal::before,.legal .cmail a::before,.ab-hero::after,.ab-end::before,.ab-quote:before,
  .sbar::before,.whero h1 em,.hero h1 em,.nf h1 em,#nav.open,#nav.open>*{animation:none!important}
  .pg-rv{opacity:1!important;transform:none!important;transition:none!important}
  .pg-bar{display:none}
}