/* Migrated from the Bun theme layout; externalized for caching and CSP. */
:root{
  --bg:#f6f2ea;--panel:#ffffff;--line:#e5ddcf;--ink:#181a22;--mut:#5c6172;
  --a1:#ff6a3d;--a2:#b476ff;--bad:#f43f5e;
  --hero-ink:#f7f4ef;--hero-mut:#c9c6d6
}
html.dark{
  --bg:#0a0b10;--panel:#12141c;--line:#242737;--ink:#f5f3ef;--mut:#a3a8b8
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:Nunito,ui-sans-serif,system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6}
img{max-width:100%;height:auto}
a{color:inherit}
.wrap{max-width:58rem;margin-inline:auto;padding-inline:1rem}
[x-cloak]{display:none!important}

/* ---------- Header ---------- */
.hdr{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hdr-row{display:flex;align-items:center;gap:.9rem;min-height:3.9rem}
.brand{margin-right:auto;font-weight:900;font-size:1.45rem;letter-spacing:-.02em;text-decoration:none;background:linear-gradient(92deg,var(--a1),var(--a2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hbtn{display:inline-flex;align-items:center;justify-content:center;height:2.4rem;min-width:2.4rem;padding-inline:.6rem;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink);font:inherit;cursor:pointer}
.hbtn:hover{border-color:var(--a1)}
.lang-wrap{position:relative}
.lang-list{position:absolute;right:0;top:2.9rem;max-height:330px;overflow:auto;white-space:nowrap;background:var(--panel);border:1px solid var(--line);border-radius:.9rem;padding:.3rem;margin:0;list-style:none;box-shadow:0 18px 44px rgba(5,6,12,.28);transition:opacity .15s,visibility .15s}
.lang-list a{display:flex;align-items:center;gap:.6rem;padding:.42rem .7rem;border-radius:.55rem;text-decoration:none;font-size:.93rem}
.lang-list a:hover{background:color-mix(in srgb,var(--a2) 14%,transparent)}

/* ---------- Hero ---------- */
.hero-m{position:relative;isolation:isolate;overflow:hidden;padding:3.4rem 0 2.9rem;background:#0b0710;color:var(--hero-ink)}
.hero-m::before{content:"";position:absolute;inset:0;z-index:-2;background:
 radial-gradient(52rem 30rem at 12% -12%,rgba(255,106,61,.42),transparent 60%),
 radial-gradient(46rem 30rem at 96% 4%,rgba(180,118,255,.36),transparent 62%),
 radial-gradient(34rem 26rem at 55% 118%,rgba(255,106,61,.20),transparent 65%),
 linear-gradient(180deg,#0d0812,#0a0710)}
.hero-m::after{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.4px);background-size:26px 26px;opacity:.16;mask-image:linear-gradient(180deg,#000 55%,transparent);-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent)}
.hm-title{margin:0 0 1.6rem;text-align:center;display:flex;flex-direction:column;gap:.45rem}
.hm-brand{font-weight:900;font-size:clamp(2.6rem,7vw,4rem);line-height:1.02;letter-spacing:-.03em;background:linear-gradient(94deg,#ffb199,#ff6a3d 34%,#b476ff 78%,#e2ccff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hm-tag{font-weight:700;font-size:clamp(1rem,2.6vw,1.3rem);color:var(--hero-mut)}
.hm-desc{max-width:48rem;margin:-.6rem auto 1.35rem;text-align:center;color:var(--hero-mut);font-size:clamp(.95rem,2vw,1.05rem);line-height:1.55}
.hm-chips{margin:1.5rem 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;padding:0;list-style:none}
.hm-chips span{border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:.32rem .85rem;font-size:.86rem;color:var(--hero-ink);background:rgba(255,255,255,.05)}

/* ---------- Form (kulit baru, hook lama) ---------- */
.dlbox{background:rgba(16,10,22,.55);border:1px solid rgba(255,255,255,.14);border-radius:1.1rem;padding:.85rem;box-shadow:0 24px 60px rgba(4,2,10,.45)}
.dl-row{display:flex;flex-direction:column;gap:.6rem}
@media(min-width:640px){.dl-row{flex-direction:row}}
.dl-field{display:flex;flex:1;gap:.5rem;background:#fff;border-radius:.8rem;padding:.35rem}
.dl-input{flex:1;height:3rem;border:0;outline:0;background:transparent;padding-inline:1rem;font:inherit;font-size:1rem;color:#181a22;min-width:0}
.btn-paste{display:inline-flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:.65rem;border:1px solid #ffd7c8;background:#fff1ea;color:#e14e1f;cursor:pointer}
.btn-paste:active{background:#ffe0d2}
.btn-go{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;height:3.7rem;padding-inline:1.5rem;border:0;border-radius:.8rem;font:inherit;font-weight:800;font-size:1.05rem;color:#fff;cursor:pointer;background:linear-gradient(94deg,#ff6a3d,#f0398a 55%,#b476ff);box-shadow:0 12px 28px rgba(240,57,138,.35)}
.btn-go:not([disabled]):active{filter:brightness(.92)}
.btn-go[disabled]{cursor:progress}
.dl-alert{margin-top:1.6rem;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.dl-alert-box{display:flex;align-items:center;gap:.7rem;background:var(--bad);color:#fff;border-radius:.8rem;padding:.8rem 1.15rem;box-shadow:0 14px 30px rgba(244,63,94,.35)}
.err-help{margin:0;font-size:.9rem}
.err-help a{color:#ffd3dc;text-decoration:underline}

/* ---------- Iklan: pembungkus NETRAL ---------- */
.ad-wrap{display:block;width:100%;margin-top:1.1rem}
.ad-wrap .adsbygoogle{display:block;width:100%}

/* ---------- Hasil unduhan ---------- */
.res{color:var(--hero-ink);text-align:center;display:flex;flex-direction:column;align-items:center;max-width:40rem;margin-inline:auto}
.res-cover{width:10rem;height:10rem;object-fit:cover;border-radius:1rem;border:1px solid rgba(255,255,255,.18);box-shadow:0 18px 44px rgba(4,2,10,.5)}
.res-author{margin:1.4rem 0 0;font-size:1.4rem;font-weight:800}
.res-desc{margin:.5rem 0 0;color:var(--hero-mut);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.res-actions{margin-top:1.4rem;display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem}
.btn-a,.btn-b,.btn-ghost{display:inline-flex;align-items:center;justify-content:center;height:3rem;padding-inline:1.25rem;border-radius:999px;font:inherit;font-weight:800;text-decoration:none;cursor:pointer;border:0}
.btn-a{color:#fff;background:linear-gradient(94deg,#ff6a3d,#f0398a);box-shadow:0 12px 26px rgba(255,106,61,.35)}
.btn-a:not([disabled]):active{filter:brightness(.92)}
.btn-b{color:#e9d8ff;background:transparent;border:1.5px solid var(--a2)}
.btn-b:active{background:rgba(180,118,255,.16)}
.btn-ghost{color:var(--hero-ink);background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.2)}
.img-grid{margin-top:2rem;display:grid;grid-template-columns:1fr;gap:1.3rem}
@media(min-width:640px){.img-grid{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.img-grid{grid-template-columns:repeat(4,1fr)}}
.img-card{position:relative}
.img-card img{border-radius:.9rem;border:1px solid rgba(255,255,255,.16)}
.img-card a{position:absolute;left:.55rem;right:.55rem;bottom:.55rem;display:flex;height:2.5rem;align-items:center;justify-content:center;border-radius:.6rem;background:rgba(255,255,255,.9);color:#181a22;font-weight:800;font-size:.9rem;text-decoration:none}
.img-card a:active{background:#fff}

/* ---------- Konten artikel ---------- */
.band{padding:3rem 0}.band-tight{padding-top:0;padding-bottom:.25rem}.band-tight .content>h2{margin-top:0}
.content{line-height:1.75}
.content h1{font-size:1.9rem;font-weight:900;letter-spacing:-.02em;margin:0 0 1rem}
.content h2{font-size:1.45rem;font-weight:900;letter-spacing:-.01em;margin:1.5rem 0 .7rem;padding-left:.85rem;border-left:4px solid;border-image:linear-gradient(180deg,var(--a1),var(--a2)) 1}.content h2:first-child,.content h3:first-child{margin-top:0}
.content h3{font-size:1.12rem;font-weight:800;margin:1.15rem 0 .5rem}.content .jr-meta{margin:.15rem 0 1.1rem;font-size:.9rem;opacity:.75;display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}.content .jr-meta .jr-by{font-weight:700;opacity:.95}.content .jr-answer{font-size:1.06rem;font-weight:600;line-height:1.7}.content ul.jr-list{list-style:none!important;margin:.5rem 0 1.6rem;padding:0!important;display:grid;gap:.7rem}.content ul.jr-list>li{margin:0;border:1px solid var(--line);border-radius:.8rem;padding:.85rem 1rem;background:var(--panel);list-style:none}.content ul.jr-list>li::marker{content:""}.content ul.jr-list a{font-weight:800;text-decoration:none;display:block;line-height:1.35}.content ul.jr-list a:hover{text-decoration:underline}.content ul.jr-list span{display:block;margin-top:.35rem;font-size:.93rem;line-height:1.55;opacity:.82;font-weight:400}@media(min-width:760px){.content ul.jr-list{grid-template-columns:1fr 1fr}}
.content p{margin:0 0 1rem}
.content a{color:var(--a1);text-decoration:underline;text-underline-offset:2px}
.content ol.content ol.steps,.content ul.steps,.steps{counter-reset:s;list-style:none!important;margin:0 0 1rem;padding:0!important;display:grid;gap:.7rem}.content ol.steps>li,.content ul.steps>li{list-style:none}.content ol.steps>li::marker,.content ul.steps>li::marker{content:""}
.content ol.steps li{counter-increment:s;position:relative;padding:.85rem 1rem .85rem 3.2rem;background:var(--panel);border:1px solid var(--line);border-radius:.9rem}
.content ol.steps li::before{content:counter(s);position:absolute;left:.85rem;top:50%;transform:translateY(-50%);width:1.7rem;height:1.7rem;display:grid;place-items:center;border-radius:999px;font-weight:900;color:#fff;background:linear-gradient(120deg,var(--a1),var(--a2))}
.content ul.content ul.ticks,.content ol.ticks,.ticks{list-style:none!important;margin:0 0 1rem;padding:0!important;display:grid;gap:.55rem}.content ul.ticks>li::marker{content:""}
.content ul.ticks li{position:relative;padding-left:1.7rem}
.content ul.ticks li::before{content:"";position:absolute;left:0;top:.42em;width:.95rem;height:.95rem;border-radius:.3rem;background:linear-gradient(120deg,var(--a1),var(--a2))}
.content details{background:var(--panel);border:1px solid var(--line);border-radius:.9rem;margin:0 0 .7rem;overflow:hidden}
.content details summary{cursor:pointer;list-style:none;padding:1rem 2.6rem 1rem 1.1rem;position:relative}
.content details summary::-webkit-details-marker{display:none}
.content details summary::after{content:"+";position:absolute;right:1rem;top:50%;transform:translateY(-50%);font-weight:900;color:var(--a1);font-size:1.2rem}
.content details[open] summary::after{content:"\2212"}
.content details summary h3{margin:0;font-size:1.02rem}
.content details>div{padding:0 1.1rem 1rem}
.content details[open]>div{animation:faq-reveal .18s ease-out}
@keyframes faq-reveal{from{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.content details[open]>div{animation:none}}
.content .note{margin-top:1.6rem;background:color-mix(in srgb,var(--a2) 10%,var(--panel));border:1px solid color-mix(in srgb,var(--a2) 34%,var(--line));border-radius:.9rem;padding:.95rem 1.1rem}
.crumbs{margin:0 0 1rem;font-size:.85rem;color:inherit;opacity:.78}
.crumbs a{color:var(--a1);font-weight:700;text-decoration:none}
.crumbs a:hover{text-decoration:underline}

/* ---------- Footer ---------- */
.ftr{margin-top:2rem;background:#0c0812;color:#cfc9dd;border-top:1px solid #241a30;padding:2.2rem 0 1.6rem}
.ftr-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.3rem;margin:0 0 1.1rem;padding:0;list-style:none}
.ftr-nav a{text-decoration:none}
.ftr-nav a:hover{text-decoration:underline;color:#fff}
.ftr-meta{text-align:center;font-size:.86rem;color:#948aa8}
.ftr-meta p{margin:.25rem 0}

/* ---------- Nav dropdown (desktop) ---------- */
.nav-toggle{display:inline-flex}.mnav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:.1rem;padding:.5rem 1rem .9rem;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 18px 40px rgba(5,6,12,.18);font-weight:700;max-height:74vh;overflow:auto;z-index:60}.mnav.is-open{display:flex}.mnav a{display:block;padding:.55rem .25rem;text-align:left}.mnav .nav-sub>.sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:transparent;padding:.1rem 0 .3rem .85rem;min-width:0}.mnav .nav-sub>a{font-weight:800}@media(min-width:768px){.nav-toggle{display:none}.mnav{display:flex!important;position:static;flex-direction:row;gap:1.1rem;align-items:center;margin-right:.4rem;padding:0;background:transparent;border:0;box-shadow:none;max-height:none;overflow:visible;z-index:auto}.mnav a{display:inline;padding:0}.mnav .nav-sub>.sub{position:absolute;left:0;top:2.2rem;min-width:16rem;background:var(--panel);border:1px solid var(--line);border-radius:.9rem;box-shadow:0 16px 40px rgba(5,6,12,.25);padding:.35rem;opacity:0;visibility:hidden;transform:translateY(6px)}.mnav .nav-sub:hover>.sub,.mnav .nav-sub:focus-within>.sub{opacity:1;visibility:visible;transform:none}.mnav .sub a{display:block;padding:.5rem .7rem;border-radius:.55rem;white-space:nowrap}}
.mnav a{text-decoration:none}
.mnav a:hover{color:var(--a1)}
.nav-sub{position:relative}
.nav-sub>.sub{position:absolute;left:0;top:2.2rem;min-width:16rem;background:var(--panel);border:1px solid var(--line);border-radius:.9rem;box-shadow:0 16px 40px rgba(5,6,12,.25);padding:.35rem;margin:0;list-style:none;display:block;opacity:0;visibility:hidden;transform:translateY(6px);transition:.15s}
.nav-sub:hover>.sub,.nav-sub:focus-within>.sub{opacity:1;visibility:visible;transform:none}
.sub a{display:block;padding:.5rem .7rem;border-radius:.55rem;white-space:nowrap}
.sub a:hover{background:color-mix(in srgb,var(--a2) 12%,transparent)}

/* ---------- Grid alat & kartu bantuan ---------- */
.sect{padding:2.6rem 0 0}
.sect-h{font-size:1.35rem;font-weight:900;margin:0 0 1rem;padding-left:.85rem;border-left:4px solid;border-image:linear-gradient(180deg,var(--a1),var(--a2)) 1}
.content ul.tools-grid,.content ol.tools-grid,.tools-grid{list-style:none!important;margin:0;padding:0!important;display:grid;gap:.8rem;grid-template-columns:1fr}.content ul.tools-grid>li::marker{content:""}
@media(min-width:640px){.tools-grid{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.tools-grid{grid-template-columns:repeat(3,1fr)}}
.tool-card{display:flex;align-items:center;gap:.75rem;background:var(--panel);border:1px solid var(--line);border-radius:.9rem;padding:.85rem 1rem;text-decoration:none;font-weight:700}
.tool-card:hover{border-color:var(--a1)}
.tool-ic{display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:.7rem;color:#fff;background:linear-gradient(120deg,var(--a1),var(--a2));flex:none}
.hcard{display:block;background:var(--panel);border:1px solid var(--line);border-radius:.9rem;padding:1rem;text-decoration:none;color:inherit;height:100%}
.hcard:hover{border-color:var(--a1)}
.hcard h3{margin:0 0 .3rem;font-size:1.02rem;color:var(--a1)}
.hcard p{margin:0;font-size:.92rem;color:var(--mut)}
.content .tip{border-left:3px solid var(--a2);padding-left:.9rem;font-size:.93rem;opacity:.88}