:root{--bg:#0b0c0e;--text:#eeefec;--mist:#c6d0d5;--steel:#89969c;--mut:#9aa1a5;--line:rgba(238,239,236,.15);--mono:"DM Mono",ui-monospace,monospace;--sans:"Manrope",system-ui,sans-serif;color-scheme:dark}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{margin:0;color:var(--text);font:400 16px/1.75 var(--sans);overflow-x:hidden;background:radial-gradient(ellipse 70% 52rem at 92% 0,rgba(110,135,148,.24),transparent 70%) 0 0/100% 100% no-repeat,radial-gradient(circle at 1px 1px,rgba(238,239,236,.11) 1.1px,transparent 1.7px) 0 0/24px 24px,linear-gradient(rgba(238,239,236,.04) 1px,transparent 1px) 0 0/120px 120px,linear-gradient(90deg,rgba(238,239,236,.04) 1px,transparent 1px) 0 0/120px 120px,var(--bg)}
a{color:inherit;text-decoration:none}
a:focus-visible,summary:focus-visible{outline:2px solid var(--mist);outline-offset:4px}
::selection{background:#d8e0e2;color:#0b0c0e}
.mono,dt{font:12px/1.6 var(--mono);letter-spacing:.06em}
.top{position:absolute;inset:0 0 auto;height:64px;padding:0 6vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);color:var(--mut)}
.logo{display:flex;align-items:center;gap:10px;color:var(--text)}
.logo b{display:grid;place-items:center;width:30px;height:30px;border:1.5px solid var(--mist);font-weight:800;font-size:13px;letter-spacing:-.06em;line-height:1}
.logo span{font-weight:700;font-size:16px;letter-spacing:-.05em}
i{font-style:normal;color:var(--steel)}
main{width:min(64rem,88vw);margin:0 auto}
section:not(.hero)>*{max-width:46rem}
section{padding:72px 0;border-top:1px solid var(--line)}
.hero{min-height:100svh;padding:120px 0 56px;border:0;display:flex;flex-direction:column;justify-content:center}
h1{font-size:clamp(2.5rem,11.5vw,7.4rem);line-height:.95;letter-spacing:-.06em;font-weight:700;margin:0;text-wrap:balance}
h1 span{display:block;margin-left:clamp(0px,4vw,4.5rem);color:var(--mist)}
.say{font-size:clamp(1.25rem,5vw,2rem);font-weight:500;letter-spacing:-.03em;margin:36px 0 0;min-height:2.6em}
.say em{font-style:normal;color:var(--mist)}
.caret{display:inline-block;width:2px;height:1.05em;margin-left:3px;background:var(--mist);vertical-align:-.15em;animation:bl 1s steps(1) infinite}
@keyframes bl{50%{opacity:0}}
.lead{max-width:30rem;color:var(--mut);font-size:clamp(1.05rem,3.8vw,1.3rem);line-height:1.6;margin:28px 0 0}
.down{color:var(--mist);font-size:14px;border-bottom:1px solid var(--steel);align-self:flex-start;padding-bottom:3px;margin-top:24px}
h2{font-size:clamp(1.9rem,6.5vw,3rem);line-height:1.1;letter-spacing:-.06em;font-weight:500;margin:0 0 32px}
.hint{margin:-16px 0 20px;color:var(--mut);font-size:14px}
.file{margin:0;border-top:1px solid var(--line)}
.file div{display:flex;gap:16px;padding:15px 0;border-bottom:1px dotted var(--line)}
dt{flex:0 0 7.5rem;color:var(--steel)}
dd{margin:0}
.manual{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.manual li{padding:22px 0 22px 18px;border-bottom:1px solid var(--line);border-left:2px solid var(--steel);margin-bottom:-1px;color:var(--mut)}
.manual b{display:block;color:var(--text);font-size:1.12rem;letter-spacing:-.02em}
.acc{border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;font-size:clamp(1.15rem,4.4vw,1.55rem);font-weight:500;letter-spacing:-.04em}
summary::-webkit-details-marker{display:none}
summary::after{content:"Buka +";flex:none;font:12px/1 var(--mono);letter-spacing:.04em;color:var(--mist);border:1px solid var(--steel);border-radius:999px;padding:9px 14px;transition:background .2s,color .2s}
summary:hover::after{background:var(--mist);color:var(--bg)}
details[open] summary::after{content:"Tutup −";border-color:var(--line);color:var(--mut)}
details[open] summary:hover::after{background:transparent;color:var(--text)}
details p{margin:0 0 24px;max-width:34rem;color:var(--mut);font-size:15px}
.end{padding-bottom:40px}
.big{font-size:clamp(2.6rem,10vw,5.2rem);line-height:1;letter-spacing:-.08em;font-weight:500;margin:0 0 56px}
.big span{color:var(--steel)}
.soc{display:flex;justify-content:space-between;gap:12px;padding:22px 0;border-block:1px solid var(--line);transition:color .2s}
.soc .mono{color:var(--mist)}
.soc:hover{color:#fff}
footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;margin-top:72px;padding-top:22px;border-top:1px solid var(--line);color:var(--mut);font-size:13px}
@media (min-width:760px){dt{flex-basis:9rem}.file div,.manual li{padding-block:18px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.caret{animation:none}summary::after{transition:none}}