/* ============================================================
   SHRP_ v4 — "monochrome terminal" edition, refined
   vibe: minimal / brutalist / mono — aksen violet-cyan
   ============================================================ */
:root{
  --bg:#08080a; --bg2:#0d0d10; --panel:#101014;
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.16);
  --txt:#ececf1; --dim:#83838f; --faint:#4c4c56;
  --vio:#8b5cf6; --cyn:#22d3ee; --pnk:#f472b6;
  --mono:'JetBrains Mono',monospace; --sans:'Space Grotesk',sans-serif;
  --ease:cubic-bezier(.19,1,.22,1);
  --mx:50vw; --my:40vh;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{background-color:transparent;color:var(--txt);font-family:var(--mono);overflow-x:hidden;
  font-size:14px;line-height:1.7;
  background-image:radial-gradient(ellipse 70% 45% at 85% -10%, rgba(139,92,246,.07), transparent),
  radial-gradient(ellipse 55% 35% at 5% 105%, rgba(34,211,238,.05), transparent);}
/* scanline halus */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:3;opacity:.5;
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.12) 3px 4px);}
/* vignette */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:3;
  background:radial-gradient(ellipse 120% 100% at 50% 40%, transparent 55%, rgba(0,0,0,.5));}
::selection{background:var(--vio);color:#fff}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--cyn);outline-offset:3px;border-radius:2px}
::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#26262e;border-radius:99px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--vio)}

body{-webkit-tap-highlight-color:transparent}
/* teks bisa diseleksi & dicopy (fix) */
::selection{background:rgba(255,255,255,.85);color:#08080a}
img,svg,canvas{pointer-events:none}
/* grain halus di atas semuanya */
.grain{position:fixed;inset:-100px;pointer-events:none;z-index:4;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");}
/* spotlight ngikutin kursor */
.spot{position:fixed;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(560px circle at var(--mx) var(--my), rgba(139,92,246,.09), transparent 65%);}

canvas#dust{position:fixed;inset:0;z-index:1;pointer-events:none}
main{position:relative;z-index:2}

#progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:70;
  background:linear-gradient(90deg,var(--vio),var(--cyn));box-shadow:0 0 12px rgba(139,92,246,.6)}

/* ---------- preloader / boot ---------- */
#loader{position:fixed;inset:0;z-index:100;background:var(--bg);display:flex;align-items:center;justify-content:center;
  transition:transform .7s var(--ease),opacity .5s .2s;}
#loader.done{transform:translateY(-100%);opacity:0;pointer-events:none}
#loader .boot{font-size:12px;letter-spacing:.12em;color:var(--dim);width:min(420px,86vw)}
#loader .boot .lg{font-size:34px;letter-spacing:.18em;color:var(--txt);font-weight:700;margin-bottom:18px;display:flex;align-items:center;gap:12px}
#loader .boot .lg .sq{width:10px;height:10px;background:var(--cyn);animation:blink 1s steps(2) infinite}
#loader .boot .ln{opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s;white-space:nowrap;overflow:hidden}
#loader .boot .ln.on{opacity:1;transform:none}
#loader .boot .ln .ok{color:var(--cyn)}
#loader .boot .ln:last-child{color:var(--pnk);font-weight:700;letter-spacing:.3em;margin-top:14px}
@keyframes blink{50%{opacity:.2}}

/* ---------- nav ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:18px 32px;font-size:12px;letter-spacing:.18em;color:var(--dim);
  transition:background .35s,border-color .35s,padding .35s;border-bottom:1px solid transparent;}
nav.scrolled{background:rgba(8,8,10,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--line);padding:13px 32px}
nav .logo{font-weight:700;font-size:17px;color:var(--txt);letter-spacing:.12em;display:flex;align-items:center;gap:10px}
nav .logo .sq{width:8px;height:8px;background:var(--cyn);animation:blink 1.4s steps(2) infinite}
nav .links{display:flex;gap:26px}
nav .links a{position:relative;padding:4px 0;transition:color .2s}
nav .links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--cyn);transition:width .3s var(--ease)}
nav .links a:hover,nav .links a.active{color:var(--txt)}
nav .links a:hover::after,nav .links a.active::after{width:100%}
@media(max-width:640px){nav{padding:14px 18px}nav .links{gap:14px;font-size:10px;letter-spacing:.1em}}
@media(max-width:640px){
  .row-item{flex-direction:column;align-items:flex-start;gap:6px;padding:20px 4px}
  .row-item:hover{padding-left:4px}
  .row-item .v{text-align:left;font-size:clamp(19px,5.8vw,26px)}
  .dl-card .btn{width:100%}
  .bio{padding:22px;font-size:12.5px}
  #loader .boot{font-size:11px}
}

/* ---------- hero ---------- */
.hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:130px 32px 80px;max-width:1240px;margin:0 auto;position:relative}
.hero .meta{display:flex;flex-wrap:wrap;gap:10px 28px;font-size:12px;letter-spacing:.16em;color:var(--dim);margin-bottom:8px}
.hero .meta b{color:var(--txt);font-weight:500}
.hero .meta .live{color:var(--cyn);display:inline-flex;align-items:center;gap:7px}
.hero .meta .live::before{content:"";width:7px;height:7px;border-radius:99px;background:var(--cyn);animation:blink 1.6s steps(2) infinite;box-shadow:0 0 10px var(--cyn)}
.hero .meta .uptime-badge{display:inline-flex;align-items:center;line-height:0;flex-shrink:0}
.hero .meta .uptime-badge img{display:block;width:auto;height:19px;max-width:100%}
.hero .meta .uptime-badge:focus-visible{outline:2px solid var(--cyn);outline-offset:3px;border-radius:4px}
.hero h1{font-family:var(--sans);font-weight:700;font-size:clamp(56px,15vw,220px);line-height:.88;letter-spacing:-.02em;text-transform:uppercase;margin:22px 0 8px}
.hero h1 .row{display:block;overflow:hidden}
.hero h1 .row span{display:inline-block;transform:translateY(110%);transition:transform 1.1s var(--ease)}
body.ready .hero h1 .row span{transform:none}
.hero h1 .row:nth-child(2) span{transition-delay:.12s;
  background:linear-gradient(100deg,#fff 30%,var(--vio) 70%,var(--cyn));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .sub{font-size:12px;letter-spacing:.2em;color:var(--dim);margin-top:26px;display:flex;flex-wrap:wrap;gap:8px 26px}
.hero .sub i{font-style:normal;color:var(--faint)}
.hero .term{margin-top:30px;font-size:12.5px;color:var(--dim);letter-spacing:.04em;min-height:1.7em}
.hero .term .ps1{color:var(--pnk)}
.hero .term .cur{display:inline-block;width:8px;height:15px;background:var(--cyn);vertical-align:-2px;animation:blink 1s steps(2) infinite}
.hero .quote{margin-top:44px;font-size:13px;color:var(--dim);max-width:430px;line-height:2;border-left:1px solid var(--line2);padding-left:18px}
.hero .quote em{color:var(--txt);font-style:normal}
.scrollhint{position:absolute;bottom:26px;left:32px;right:32px;display:flex;justify-content:space-between;gap:16px;font-size:11px;letter-spacing:.3em;color:var(--faint)}
.scrollhint .d::after{content:"↓";display:block;text-align:center;margin-top:6px;color:var(--dim);animation:bob 1.6s var(--ease) infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

.hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 30% 40%,#000 25%,transparent 78%);
  mask-image:radial-gradient(ellipse 80% 70% at 30% 40%,#000 25%,transparent 78%);}
.hero>*{position:relative;z-index:1}
/* ---------- ticker ---------- */
.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;background:var(--bg2);padding:13px 0;position:relative;z-index:2}
.ticker::before,.ticker::after{content:"";position:absolute;top:0;bottom:0;width:70px;z-index:2;pointer-events:none}
.ticker::before{left:0;background:linear-gradient(90deg,var(--bg2),transparent)}
.ticker::after{right:0;background:linear-gradient(-90deg,var(--bg2),transparent)}
.ticker-track{display:flex;width:max-content;font-size:12px;letter-spacing:.22em;color:var(--dim);animation:tick 30s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-track span{padding-right:54px;white-space:nowrap}
.ticker-track b{color:var(--pnk);font-weight:400}
.ticker-track i{color:var(--cyn);font-style:normal}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
section{max-width:1240px;margin:0 auto;padding:110px 32px;position:relative}
.sec-num{font-size:11px;letter-spacing:.3em;color:var(--faint);margin-right:12px}
.sec-label{font-size:12px;letter-spacing:.34em;color:var(--dim);margin-bottom:16px;display:flex;align-items:baseline}
.sec-title{font-family:var(--sans);font-weight:700;font-size:clamp(38px,7vw,74px);line-height:1;letter-spacing:-.02em;text-transform:uppercase;margin-bottom:56px}
.sec-title em{font-style:normal;color:transparent;-webkit-text-stroke:1.5px var(--dim)}

/* glitch reveal saat scroll */
.gl{position:relative;display:inline-block}
.gl.fx{animation:gshift .5s steps(2) 1}
.gl.fx::before,.gl.fx::after{content:attr(data-t);position:absolute;inset:0;pointer-events:none}
.gl.fx::before{color:var(--pnk);animation:gslice .5s steps(3) 1 forwards}
.gl.fx::after{color:var(--cyn);animation:gslice2 .5s steps(3) 1 forwards}
@keyframes gshift{0%{transform:translateX(-6px)}40%{transform:translateX(4px)}100%{transform:none}}
@keyframes gslice{0%{clip-path:inset(10% 0 60% 0);transform:translateX(-8px)}50%{clip-path:inset(50% 0 20% 0);transform:translateX(6px)}100%{clip-path:inset(0 0 0 0);opacity:0}}
@keyframes gslice2{0%{clip-path:inset(60% 0 5% 0);transform:translateX(8px)}50%{clip-path:inset(20% 0 55% 0);transform:translateX(-6px)}100%{clip-path:inset(0 0 0 0);opacity:0}}

/* scroll reveal */
[data-rv]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
[data-rv].in{opacity:1;transform:none}
.dl-card[data-rv].in{transition:opacity .9s var(--ease),transform .18s ease-out,border-color .25s}

/* ---------- about ---------- */
.rows{border-top:1px solid var(--line)}
.row-item{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:26px 6px;border-bottom:1px solid var(--line);transition:background .25s,padding-left .25s;flex-wrap:wrap}
.row-item:hover{background:rgba(255,255,255,.02);padding-left:16px}
.row-item .k{font-size:11px;letter-spacing:.3em;color:var(--faint)}
.row-item .v{font-family:var(--sans);font-weight:700;font-size:clamp(20px,3.6vw,34px);letter-spacing:-.01em;text-align:right}
.row-item .v small{display:block;font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.14em;color:var(--dim);margin-top:6px}
.bio{margin-top:26px;border:1px solid var(--line);background:var(--panel);padding:28px;font-size:13px;line-height:2.1;color:var(--txt);position:relative}
.bio a{color:var(--cyn);border-bottom:1px dashed rgba(34,211,238,.45)}
.bio .hl{color:var(--pnk)}
.bio::before{content:"~/sharp $ cat bio.txt";display:block;font-size:11px;letter-spacing:.2em;color:var(--faint);margin-bottom:14px}

/* ---------- aetherbox ---------- */
.aether-intro{font-size:13px;color:var(--dim);max-width:660px;line-height:2.1;margin-bottom:44px}
.aether-intro b{color:var(--txt);font-weight:500}
.aether-intro .root{color:var(--pnk)}
.dl-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;perspective:1200px}
@media(max-width:760px){.dl-cards{grid-template-columns:1fr}}
.dl-card{border:1px solid var(--line);background:var(--panel);padding:28px;display:flex;flex-direction:column;gap:16px;position:relative;transition:border-color .25s;transform-style:preserve-3d;will-change:transform}
.dl-card::before{content:"";position:absolute;top:0;left:0;width:0;height:2px;background:linear-gradient(90deg,var(--vio),var(--cyn));transition:width .4s var(--ease)}
.dl-card:hover{border-color:var(--line2)}
.dl-card i[class^="c-"]{position:absolute;width:14px;height:14px;pointer-events:none;opacity:0;transition:opacity .3s}
.c-tl{top:-1px;left:-1px;border-top:1px solid var(--cyn);border-left:1px solid var(--cyn)}
.c-br{bottom:-1px;right:-1px;border-bottom:1px solid var(--vio);border-right:1px solid var(--vio)}
.dl-card:hover i[class^="c-"]{opacity:1}
.dl-card:hover::before{width:100%}
.dl-card h4{font-family:var(--sans);font-size:21px;font-weight:700;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.badge{font-size:10px;letter-spacing:.16em;padding:4px 11px;border:1px solid var(--line2);color:var(--dim)}
.badge.root{color:var(--pnk);border-color:rgba(244,114,182,.4)}
.badge.lite{color:var(--cyn);border-color:rgba(34,211,238,.4)}
.badge.mine{color:#c4b5fd;border-color:rgba(139,92,246,.45)}
.ver{font-size:12px;color:var(--dim);letter-spacing:.06em;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ver b{color:var(--cyn);font-weight:700}
.ver .st{font-size:9px;letter-spacing:.14em;padding:2px 8px;border-radius:99px}
.ver .st.live{color:var(--cyn);border:1px solid rgba(34,211,238,.35)}
.ver .st.cached{color:var(--pnk);border:1px solid rgba(244,114,182,.35)}
.ver .st.live::before{content:"";display:inline-block;width:5px;height:5px;border-radius:99px;background:var(--cyn);margin-right:6px;vertical-align:1px;animation:blink 1.4s steps(2) infinite}
.dl-card ul{list-style:none;font-size:12px;color:var(--dim);display:grid;gap:9px}
.dl-card ul li::before{content:"// ";color:var(--faint)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--mono);font-size:12px;
  letter-spacing:.14em;font-weight:700;padding:15px 22px;transition:transform .18s var(--ease),background .2s,color .2s,border-color .2s,box-shadow .2s;cursor:pointer;border:1px solid var(--txt);will-change:transform}
.btn.solid{background:var(--txt);color:#0a0a0c}
.btn.solid:hover{box-shadow:0 10px 30px rgba(139,92,246,.28);border-color:var(--vio)}
.btn.ghost{border-color:var(--line2);color:var(--txt);background:transparent}
.btn.ghost:hover{border-color:var(--cyn);color:var(--cyn)}
.cmp-wrap{margin-top:22px;overflow-x:auto;border:1px solid var(--line);-webkit-overflow-scrolling:touch}
.cmp{width:100%;min-width:560px;border-collapse:collapse;font-size:12px;background:var(--panel)}
.cmp th,.cmp td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line)}
.cmp th{font-size:10px;letter-spacing:.24em;color:var(--dim);font-weight:400;background:rgba(255,255,255,.02);white-space:nowrap}
.cmp td{color:var(--dim)}
.cmp td:first-child{color:var(--txt)}
.cmp .ok{color:var(--cyn)}.cmp .no{color:var(--pnk)}
.cmp tbody tr{transition:background .2s}
.cmp tbody tr:hover{background:rgba(139,92,246,.05)}
.cmp tr:last-child td{border-bottom:none}
.note{margin-top:16px;font-size:11px;color:var(--faint);letter-spacing:.08em}
.note i{color:var(--cyn);font-style:normal}

/* ---------- social ---------- */
.socs{border-top:1px solid var(--line)}
.soc{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:26px 6px;border-bottom:1px solid var(--line);transition:background .25s,padding-left .25s}
.soc:hover{background:rgba(255,255,255,.02);padding-left:16px}
.soc .l{display:flex;align-items:center;gap:20px;min-width:0}
.soc .idx{font-size:11px;color:var(--faint);letter-spacing:.2em}
.soc b{font-family:var(--sans);font-size:clamp(17px,2.6vw,22px);font-weight:700;display:block}
.soc small{display:block;font-size:11px;color:var(--dim);letter-spacing:.16em;margin-top:5px}
.soc .arrow{font-size:16px;color:var(--faint);transition:color .2s,transform .25s var(--ease)}
.soc:hover .arrow{color:var(--cyn);transform:translate(4px,-4px)}
.chip{margin-top:18px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;padding:10px 20px;border:1px solid var(--line2);background:transparent;color:var(--dim);cursor:pointer;transition:color .2s,border-color .2s,transform .2s}
.chip:hover{color:var(--cyn);border-color:var(--cyn);transform:translateY(-2px)}
.chip.ok{color:var(--cyn);border-color:rgba(34,211,238,.5)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);margin-top:80px;padding:70px 32px 50px;text-align:center;position:relative;z-index:2}
footer .motto{font-family:var(--sans);font-weight:700;font-size:clamp(22px,4.5vw,36px);letter-spacing:-.01em;margin-bottom:22px}
footer .motto i{font-style:normal;background:linear-gradient(100deg,#fff,var(--vio),var(--cyn));-webkit-background-clip:text;background-clip:text;color:transparent}
footer .fine{font-size:11px;letter-spacing:.14em;color:var(--faint);line-height:2.2}
footer .fine b{color:var(--dim);font-weight:400}
footer a{color:var(--dim);border-bottom:1px solid var(--line2);transition:color .2s,border-color .2s}
footer a:hover{color:var(--cyn);border-color:var(--cyn)}
footer .top{display:inline-block;margin-top:26px;padding:10px 22px;border:1px solid var(--line2);border-radius:99px;font-size:11px;letter-spacing:.2em;transition:border-color .2s,color .2s,transform .2s}
footer .top:hover{border-color:var(--cyn);color:var(--cyn);transform:translateY(-2px)}

@media(max-width:640px){section{padding:56px 20px}.hero{padding:96px 18px 72px}.scrollhint{left:18px;right:18px;font-size:9px;letter-spacing:.2em}.hero .quote{margin-top:30px}.hero .term{margin-top:22px}.sec-title{margin-bottom:38px}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero h1 .row span{transform:none}
  [data-rv]{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   v7 — UI UPGRADE : aurora, gradient cards, cursor glow, shimmer
   ============================================================ */
.aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.aurora i{position:absolute;border-radius:50%;filter:blur(90px)}
.aurora i:nth-child(1){width:44vw;height:44vw;left:-12vw;top:-14vw;background:#8b5cf6;opacity:.15;animation:aur1 26s ease-in-out infinite alternate}
.aurora i:nth-child(2){width:38vw;height:38vw;right:-10vw;top:22vh;background:#22d3ee;opacity:.10;animation:aur2 32s ease-in-out infinite alternate}
.aurora i:nth-child(3){width:30vw;height:30vw;left:24vw;bottom:-16vw;background:#f472b6;opacity:.07;animation:aur3 38s ease-in-out infinite alternate}
@keyframes aur1{to{transform:translate(9vw,7vh) scale(1.15)}}
@keyframes aur2{to{transform:translate(-8vw,-6vh) scale(.9)}}
@keyframes aur3{to{transform:translate(6vw,-8vh) scale(1.2)}}

/* judul section: teks gradasi bergerak halus */
.sec-title{background:linear-gradient(100deg,#fff 20%,var(--vio) 45%,var(--cyn) 65%,#fff 85%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shine 7s linear infinite}
@keyframes shine{to{background-position:-220% 0}}
.sec-label::after{content:"";flex:1;height:1px;margin-left:18px;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--line2),transparent);transition:transform .9s var(--ease)}
.sec-label.in::after{transform:none}

/* download cards: gradient border + glow saat hover */
.dl-card{border-color:transparent;
  background:linear-gradient(var(--panel),var(--panel)) padding-box,
  linear-gradient(135deg,rgba(139,92,246,.45),rgba(255,255,255,.07) 45%,rgba(34,211,238,.45)) border-box;
  box-shadow:0 0 0 rgba(139,92,246,0);transition:border-color .25s,box-shadow .35s}
.dl-card:hover{box-shadow:0 14px 44px rgba(139,92,246,.16),0 0 24px rgba(34,211,238,.06)}
/* spotlight ngikutin kursor di dalam card & bio */
.dl-card::after,.bio::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;border-radius:inherit;
  background:radial-gradient(320px circle at var(--gx,50%) var(--gy,50%),rgba(139,92,246,.13),transparent 65%)}
.dl-card:hover::after,.bio:hover::after{opacity:1}
.bio{border-color:transparent;border-radius:6px;
  background:linear-gradient(var(--panel),var(--panel)) padding-box,
  linear-gradient(120deg,rgba(139,92,246,.4),rgba(34,211,238,.35)) border-box}

/* bio perlu posisi relative utk ::after */
.bio{position:relative;overflow:hidden}

/* baris about/social: sapuan gradasi halus saat hover */
.row-item,.soc{position:relative;overflow:hidden}
.row-item::before,.soc::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(139,92,246,.09),transparent 55%);
  transform:translateX(-101%);transition:transform .5s var(--ease)}
.row-item:hover::before,.soc:hover::before{transform:none}
.row-item:hover .v{color:var(--cyn)}
.row-item .v{transition:color .3s}
.soc:hover small{color:var(--cyn)}
.soc small{transition:color .3s}

/* tombol solid: isi gradasi menyapu dari kiri */
.btn{position:relative;isolation:isolate;overflow:hidden}
.btn.solid::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,var(--vio),var(--cyn));
  transform:translateX(-101%);transition:transform .35s var(--ease)}
.btn.solid:hover::before{transform:none}
.btn.solid:hover{color:#fff;border-color:transparent}
.btn.ghost:hover{background:rgba(34,211,238,.07)}
/* magnetic butuh transform tetap smooth */
.btn{transition:transform .18s var(--ease),background .2s,color .2s,border-color .2s,box-shadow .2s}

/* nav: garis bawah glow pas scroll */
nav.scrolled{box-shadow:0 1px 0 rgba(139,92,246,.28),0 12px 40px rgba(0,0,0,.4)}

/* footer motto ikut shimmer */
footer .motto i{background-size:220% 100%;animation:shine 6s linear infinite}

/* scrollbar gradasi */
::-webkit-scrollbar-thumb{background:linear-gradient(var(--vio),var(--cyn))}

@media(prefers-reduced-motion:reduce){.aurora i,.sec-title,footer .motto i{animation:none!important}}

/* ============================================================
   v8 — GLITCH ENGINE v2 + ANTI-COPY + ANDROID FIXES
   ============================================================ */

/* ---------- GLITCH: rgb-split burst (class .glitch, teks di data-text) ---------- */
.glitch{position:relative;display:inline-block}
.glitch::before,.glitch::after{
  content:attr(data-text);position:absolute;inset:0;pointer-events:none;
  opacity:0;visibility:hidden;background:none;
}
.glitch.on{animation:gl-jit .42s steps(2) 1}
.glitch.on::before{
  visibility:visible;opacity:.9;color:var(--pnk);z-index:2;
  text-shadow:-2px 0 rgba(244,114,182,.6);
  animation:gl-a .42s steps(5) 1;
}
.glitch.on::after{
  visibility:visible;opacity:.9;color:var(--cyn);z-index:2;
  text-shadow:2px 0 rgba(34,211,238,.6);
  animation:gl-b .42s steps(5) 1;
}
/* baris gradasi: layer glitch pakai warna solid, jangan ikut transparan */
.hero h1 .glitch.grad::before{color:#f472b6;-webkit-text-fill-color:#f472b6}
.hero h1 .glitch.grad::after{color:#22d3ee;-webkit-text-fill-color:#22d3ee}
.sec-title .glitch::before{color:var(--pnk);-webkit-text-fill-color:var(--pnk)}
.sec-title .glitch::after{color:var(--cyn);-webkit-text-fill-color:var(--cyn)}

@keyframes gl-jit{0%{transform:translate(-3px,1px) skewX(-3deg)}30%{transform:translate(3px,-1px) skewX(2deg)}60%{transform:translate(-2px,0) skewX(-1deg)}100%{transform:none}}
@keyframes gl-a{
  0%{clip-path:inset(12% 0 64% 0);transform:translate(-8px,2px)}
  20%{clip-path:inset(58% 0 18% 0);transform:translate(7px,-2px)}
  40%{clip-path:inset(28% 0 48% 0);transform:translate(-6px,1px)}
  60%{clip-path:inset(72% 0 6% 0);transform:translate(6px,-1px)}
  80%{clip-path:inset(6% 0 78% 0);transform:translate(-5px,0)}
  100%{clip-path:inset(0 0 0 0);opacity:0;transform:none}
}
@keyframes gl-b{
  0%{clip-path:inset(66% 0 10% 0);transform:translate(8px,-2px)}
  20%{clip-path:inset(8% 0 70% 0);transform:translate(-7px,2px)}
  40%{clip-path:inset(44% 0 34% 0);transform:translate(5px,-1px)}
  60%{clip-path:inset(18% 0 60% 0);transform:translate(-6px,1px)}
  80%{clip-path:inset(80% 0 4% 0);transform:translate(4px,0)}
  100%{clip-path:inset(0 0 0 0);opacity:0;transform:none}
}

/* glitch ringan terus di logo (vibe terminal rusak halus) */
.logo .sq{position:relative}
@keyframes gl-logo{0%,92%,100%{transform:none;opacity:1}93%{transform:translateX(2px);opacity:.6}95%{transform:translateX(-2px)}97%{transform:none;opacity:1}}
.logo{animation:gl-logo 6s steps(1) infinite}

/* ---------- ANDROID / MOBILE FIXES ---------- */
html{overflow-x:hidden}
/* blur aurora berat di GPU mobile: kecilkan + kurangi blur */
@media(max-width:768px){
  .aurora i{filter:blur(55px)}
  .aurora i:nth-child(1){opacity:.12}
  .aurora i:nth-child(2){opacity:.08}
  .aurora i:nth-child(3){opacity:.05}
  /* scanline + grain: turunkan biar scrolling gak jank */
  body::before{opacity:.3}
  .grain{opacity:.035}
  .spot{display:none} /* spotlight kursor percuma di layar sentuh */
}
/* perangkat sentuh: matikan SEMUA efek hover yang nyangkut */
@media(hover:none){
  .dl-card,.btn{transform:none!important}
  .row-item:hover,.soc:hover{padding-left:6px}
  .soc:hover .arrow{transform:none}
  .ticker:hover .ticker-track{animation-play-state:running}
  .dl-card:hover::after,.bio:hover::after{opacity:0}
}
/* hero: cegah judul kepotong di layar sempit */
@media(max-width:400px){
  .hero h1{font-size:clamp(44px,16vw,72px)}
  nav .links{gap:10px;font-size:9px}
  nav .logo{font-size:15px}
}
/* safe-area utk hp ber-notch */
@supports(padding:max(0px)){
  nav{padding-left:max(32px,env(safe-area-inset-left));padding-right:max(32px,env(safe-area-inset-right))}
  @media(max-width:640px){nav{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}}
}
/* tab press state yang jelas di sentuh */
@media(hover:none){
  .btn.solid:active{background:var(--vio);color:#fff}
  .btn.ghost:active{border-color:var(--cyn);color:var(--cyn)}
  .chip:active{color:var(--cyn);border-color:var(--cyn)}
  .soc:active{background:rgba(255,255,255,.03)}
}
/* table tetap bisa di-scroll halus di Android */
.cmp-wrap{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}


/* ============================================================
   v9 — DEEP-SPACE UI + DISCORD PRESENCE + MOBILE MENU
   "background hitam invisible": hitam dibuat berlapis nebula,
   panel jadi kaca (transparan + blur) biar bg tembus.
   ============================================================ */

:root{--bg:#07070c}
html{background:radial-gradient(ellipse 120% 90% at 80% -20%, #12102a 0%, transparent 55%),
  radial-gradient(ellipse 100% 80% at 0% 110%, #0a1420 0%, transparent 55%), var(--bg)}
body{background-color:transparent;
  background-image:radial-gradient(ellipse 70% 45% at 85% -10%, rgba(139,92,246,.10), transparent),
  radial-gradient(ellipse 55% 35% at 5% 105%, rgba(34,211,238,.07), transparent),
  radial-gradient(ellipse 40% 30% at 50% 50%, rgba(244,114,182,.03), transparent)}

/* panel jadi kaca: warna alpha + blur, bg di belakang tembus */
.dl-card,.bio,.cmp,.dc-card{background-color:rgba(14,14,20,.55);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.dl-card{background:linear-gradient(rgba(14,14,20,.55),rgba(14,14,20,.55)) padding-box,
  linear-gradient(135deg,rgba(139,92,246,.45),rgba(255,255,255,.07) 45%,rgba(34,211,238,.45)) border-box}
.bio{background:linear-gradient(rgba(14,14,20,.55),rgba(14,14,20,.55)) padding-box,
  linear-gradient(120deg,rgba(139,92,246,.4),rgba(34,211,238,.35)) border-box}
.ticker{background:rgba(13,13,18,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
nav.scrolled{background:rgba(7,7,12,.6)}

/* grid hero lebih halus biar bintang/nebula tetap keliatan */
.hero::before{opacity:.35}

/* ---------- burger (mobile) ---------- */
#burger{display:none;background:none;border:none;cursor:pointer;padding:8px;flex-direction:column;gap:5px;z-index:60}
#burger i{display:block;width:22px;height:2px;background:var(--txt);transition:transform .3s var(--ease),opacity .2s}
#burger.open i:nth-child(1){transform:translateY(7px) rotate(45deg)}
#burger.open i:nth-child(2){opacity:0}
#burger.open i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:640px){
  #burger{display:flex}
  #nav-links{position:fixed;top:0;right:0;bottom:0;width:min(240px,72vw);flex-direction:column;gap:0;
    background:rgba(9,9,14,.9);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
    border-left:1px solid var(--line);padding:90px 26px 26px;transform:translateX(102%);
    transition:transform .45s var(--ease);z-index:55}
  #nav-links.open{transform:none}
  #nav-links a{padding:16px 0;border-bottom:1px solid var(--line);font-size:13px}
}

/* ---------- discord presence card ---------- */
.dc-card{border:1px solid transparent;border-radius:8px;padding:24px;margin-bottom:34px;display:flex;flex-direction:column;gap:14px;
  position:relative;overflow:hidden;
  background:linear-gradient(rgba(14,14,20,.6),rgba(14,14,20,.6)) padding-box,
  linear-gradient(135deg,rgba(88,101,242,.55),rgba(255,255,255,.06) 50%,rgba(139,92,246,.45)) border-box;
  box-shadow:0 8px 40px rgba(88,101,242,.08)}
.dc-card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(320px circle at var(--gx,50%) var(--gy,50%),rgba(88,101,242,.14),transparent 65%)}
.dc-card:hover::after{opacity:1}
.dc-top{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.dc-top img{width:58px;height:58px;border-radius:50%;border:2px solid var(--line2);background:#1a1a22}
.dc-id{min-width:0;flex:1}
.dc-id b{font-family:var(--sans);font-size:19px;display:block}
.dc-id small{font-size:11px;letter-spacing:.12em;color:var(--dim)}
.dc-status{display:flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.22em;color:var(--dim);
  border:1px solid var(--line);border-radius:99px;padding:7px 14px}
.dc-dot{width:9px;height:9px;border-radius:99px;background:#747f8d;transition:background .3s,box-shadow .3s}
.dc-dot.online{background:#23a55a;box-shadow:0 0 12px rgba(35,165,90,.8)}
.dc-dot.idle{background:#f0b232;box-shadow:0 0 12px rgba(240,178,50,.8)}
.dc-dot.dnd{background:#f23f43;box-shadow:0 0 12px rgba(242,63,67,.8)}
.dc-dot.offline{background:#747f8d}
.dc-activity{font-size:12px;color:var(--dim);letter-spacing:.04em;border-left:2px solid #5865f2;padding-left:14px;min-height:1.6em}
.dc-activity b{color:var(--txt);font-weight:500}
.dc-actions{display:flex;gap:12px;flex-wrap:wrap}
#dc-card.hidden{display:none}

/* ---------- stack marquee ---------- */
.stack-marquee{margin-top:26px;border:1px solid var(--line);border-radius:99px;overflow:hidden;
  background:rgba(13,13,18,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:13px 0;position:relative}
.stack-marquee::before,.stack-marquee::after{content:"";position:absolute;top:0;bottom:0;width:60px;z-index:2;pointer-events:none}
.stack-marquee::before{left:0;background:linear-gradient(90deg,rgba(9,9,14,.9),transparent)}
.stack-marquee::after{right:0;background:linear-gradient(-90deg,rgba(9,9,14,.9),transparent)}
.sm-track{display:flex;width:max-content;animation:tick 22s linear infinite}
.stack-marquee:hover .sm-track{animation-play-state:paused}
.sm-track span{font-size:11px;letter-spacing:.24em;color:var(--dim);padding-right:44px;white-space:nowrap;transition:color .2s}
.sm-track span:hover{color:var(--cyn)}

/* ---------- toast ---------- */
#toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,16px);z-index:90;
  background:rgba(16,16,22,.92);border:1px solid var(--line2);color:var(--txt);
  font-size:12px;letter-spacing:.1em;padding:13px 24px;border-radius:99px;opacity:0;pointer-events:none;
  transition:opacity .3s,transform .3s var(--ease);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 10px 40px rgba(0,0,0,.5)}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- back to top ---------- */
#totop{position:fixed;bottom:24px;right:24px;z-index:80;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line2);background:rgba(13,13,18,.7);color:var(--txt);font-size:16px;cursor:pointer;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;pointer-events:none;transform:translateY(12px);
  transition:opacity .3s,transform .3s var(--ease),border-color .2s,color .2s}
#totop.show{opacity:1;pointer-events:auto;transform:none}
#totop:hover{border-color:var(--cyn);color:var(--cyn)}
@media(hover:none){#totop:active{border-color:var(--cyn);color:var(--cyn)}}
@media(max-width:640px){#totop{bottom:18px;right:18px}}

@media(prefers-reduced-motion:reduce){
  .sm-track{animation:none}
}

/* ============================================================
   v10 — GALAXY THEME : milky way + fix drawer
   ============================================================ */
.milkyway{position:fixed;inset:-35%;z-index:0;pointer-events:none;
  background:linear-gradient(118deg,transparent 32%,rgba(190,180,255,.05) 43%,rgba(150,130,230,.075) 50%,rgba(120,200,255,.05) 57%,transparent 68%);
  filter:blur(14px);transform:rotate(-6deg)}

/* drawer: lebih solid, konten nggak tembus */
@media(max-width:640px){
  #nav-links{background:rgba(7,7,12,.97);border-left:1px solid var(--line2);
    box-shadow:-30px 0 80px rgba(0,0,0,.6);justify-content:flex-start}
}
body.no-scroll{overflow:hidden}
/* ============================================================
   v11 — UI REFINEMENT : side rail, dots nav, facts, tools grid,
   live repo cards, nicer hero & nav. inspired by aarchfel.my.id
   ============================================================ */
:root{
  --r:10px;
  --gap:20px;
  --shell:min(1240px,100%);
}

/* ---------- nav: pill links + sliding indicator ---------- */
nav .links{align-items:center}
nav .links a{padding:8px 14px;border-radius:99px;border:1px solid transparent;transition:color .2s,border-color .25s,background .25s}
nav .links a::after{display:none}
nav .links a:hover{border-color:var(--line);background:rgba(255,255,255,.03)}
nav .links a.active{color:var(--txt);border-color:rgba(34,211,238,.4);background:rgba(34,211,238,.07)}
nav.scrolled{padding-top:11px;padding-bottom:11px}

/* ---------- fixed side rail ---------- */
.rail{position:fixed;left:22px;bottom:0;z-index:45;display:flex;flex-direction:column;align-items:center;gap:16px;
  opacity:0;transform:translateY(14px);transition:opacity .8s .6s var(--ease),transform .8s .6s var(--ease)}
body.ready .rail{opacity:1;transform:none}
.rail-ico{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;
  color:var(--faint);background:rgba(13,13,18,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:color .25s,border-color .25s,transform .25s var(--ease),box-shadow .25s}
.rail-ico svg{width:16px;height:16px;pointer-events:none}
.rail-ico:hover{color:var(--cyn);border-color:rgba(34,211,238,.5);transform:translateY(-3px);box-shadow:0 8px 24px rgba(34,211,238,.14)}
.rail-line{width:1px;height:76px;background:linear-gradient(var(--line2),transparent)}
.rail-idx{writing-mode:vertical-rl;font-size:10px;letter-spacing:.3em;color:var(--faint);padding-bottom:22px}
@media(max-width:980px){.rail{display:none}}

/* ---------- section dots ---------- */
.dots{position:fixed;right:24px;top:50%;transform:translateY(-50%);z-index:45;display:flex;flex-direction:column;gap:14px;align-items:flex-end}
.dots a{display:flex;align-items:center;gap:10px;font-size:9px;letter-spacing:.24em;color:var(--faint);transition:color .25s}
.dots a i{display:block;width:7px;height:7px;border:1px solid var(--line2);border-radius:50%;transition:background .25s,border-color .25s,transform .25s var(--ease)}
.dots a span{opacity:0;transform:translateX(6px);transition:opacity .25s,transform .25s var(--ease)}
.dots a:hover span{opacity:1;transform:none}
.dots a:hover,.dots a.on{color:var(--cyn)}
.dots a.on i{background:var(--cyn);border-color:var(--cyn);transform:scale(1.25);box-shadow:0 0 12px rgba(34,211,238,.6)}
@media(max-width:980px){.dots{display:none}}

/* ---------- hero CTA ---------- */
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.hero-cta .btn{padding:14px 26px}
@media(max-width:480px){.hero-cta .btn{flex:1 1 100%}}

/* ---------- facts strip ---------- */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:34px;
  border:1px solid var(--line);background:var(--line);border-radius:var(--r);overflow:hidden}
.fact{background:rgba(13,13,18,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  padding:22px 18px;display:flex;flex-direction:column;gap:8px;transition:background .25s}
.fact:hover{background:rgba(139,92,246,.09)}
.fact .n{font-family:var(--sans);font-weight:700;font-size:clamp(26px,4vw,40px);line-height:1;
  background:linear-gradient(120deg,#fff,var(--cyn));-webkit-background-clip:text;background-clip:text;color:transparent}
.fact .l{font-size:10px;letter-spacing:.22em;color:var(--faint)}
@media(max-width:700px){.facts{grid-template-columns:1fr 1fr}}

/* ---------- tools & technologies grid ---------- */
.tools{margin-top:26px}
.tools-head{font-size:11px;letter-spacing:.3em;color:var(--faint);margin-bottom:14px}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1px;
  border:1px solid var(--line);background:var(--line);border-radius:var(--r);overflow:hidden}
.tool{background:rgba(13,13,18,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  padding:16px 18px;display:flex;flex-direction:column;gap:6px;position:relative;transition:background .25s}
.tool::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(var(--vio),var(--cyn));
  transform:scaleY(0);transform-origin:top;transition:transform .3s var(--ease)}
.tool:hover{background:rgba(255,255,255,.035)}
.tool:hover::before{transform:none}
.tool .tk{font-size:9.5px;letter-spacing:.26em;color:var(--faint)}
.tool .tv{font-size:12.5px;color:var(--txt);letter-spacing:.04em}

/* ---------- repositories ---------- */
.repo-intro{font-size:13px;color:var(--dim);max-width:620px;line-height:2.1;margin-bottom:38px}
.repo-intro a{color:var(--cyn);border-bottom:1px dashed rgba(34,211,238,.45)}
.repo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--gap)}
.repo{position:relative;display:flex;flex-direction:column;gap:12px;padding:22px;border-radius:var(--r);
  border:1px solid transparent;overflow:hidden;min-height:168px;
  background:linear-gradient(rgba(14,14,20,.55),rgba(14,14,20,.55)) padding-box,
  linear-gradient(140deg,rgba(139,92,246,.35),rgba(255,255,255,.06) 50%,rgba(34,211,238,.35)) border-box;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  transition:transform .25s var(--ease),box-shadow .3s}
.repo:hover{transform:translateY(-4px);box-shadow:0 16px 44px rgba(139,92,246,.16)}
.repo .rname{font-family:var(--sans);font-weight:700;font-size:17px;display:flex;align-items:center;gap:9px}
.repo .rname .ar{margin-left:auto;color:var(--faint);transition:color .2s,transform .25s var(--ease)}
.repo:hover .rname .ar{color:var(--cyn);transform:translate(3px,-3px)}
.repo .rdesc{font-size:12px;color:var(--dim);line-height:1.9;flex:1}
.repo .rmeta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:10.5px;letter-spacing:.14em;color:var(--faint)}
.repo .rmeta .lang{display:inline-flex;align-items:center;gap:7px;color:var(--dim)}
.repo .rmeta .lang::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--vio)}
.repo .rtopics{display:flex;flex-wrap:wrap;gap:6px}
.repo .rtopics span{font-size:9.5px;letter-spacing:.14em;color:var(--dim);border:1px solid var(--line);border-radius:99px;padding:3px 9px}
.repo.skel{background:rgba(14,14,20,.45);border:1px solid var(--line);
  background-image:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.05) 45%,transparent 70%);
  background-size:220% 100%;animation:skel 1.5s linear infinite}
@keyframes skel{to{background-position:-220% 0}}
.repo-err{font-size:12px;color:var(--dim);border:1px dashed var(--line2);border-radius:var(--r);padding:22px;grid-column:1/-1}
.repo-err a{color:var(--cyn)}

/* ---------- misc polish ---------- */
.sec-label{text-transform:uppercase}
.soc,.row-item{border-radius:2px}
.dl-card,.bio,.dc-card{border-radius:var(--r)}
.cmp-wrap{border-radius:var(--r)}
.btn{border-radius:99px}
.chip{border-radius:99px}
footer{margin-top:60px}

@media(max-width:640px){
  .facts{margin-top:26px}
  .repo-intro{margin-bottom:26px}
}
@media(prefers-reduced-motion:reduce){
  .repo.skel{animation:none}
  .rail{opacity:1;transform:none}
}

/* ---------- layout breathing room for rail & dots ---------- */
@media(min-width:981px){
  nav{padding-left:88px;padding-right:88px}
  .hero,section{padding-left:88px;padding-right:88px}
  footer{padding-left:88px;padding-right:88px}
  .scrollhint{left:88px;right:88px}
}
.hero{padding-bottom:64px}
.hero .quote{margin-top:34px}
.hero-cta{margin-top:30px}
/* scrollhint ikut alur biar gak numpuk sama tombol di layar pendek */
.scrollhint{position:static;margin-top:clamp(34px,7vh,70px)}
@media(min-width:981px){.scrollhint{padding:0}}

/* ===================== v12 — MOTION LAYER ===================== */

/* stagger anak-anak grid pas section masuk viewport */
.tool, .repo, .soc, .fact{--stag:0ms}
.anim-stag>*{opacity:0;transform:translateY(22px) scale(.985);
  transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--stag)}
.anim-stag.in>*{opacity:1;transform:none}

/* tilt 3d halus untuk kartu */
.tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);
  transition:transform .35s var(--ease)}
.tilt.live{transition:transform .08s linear}

/* kilau yang ngikut kursor di atas kartu */
.sheen{position:relative;overflow:hidden}
.sheen::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity .35s ease;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.07),transparent 65%)}
.sheen:hover::after{opacity:1}

/* judul section: sweep cahaya sekali pas muncul */
.sec-title{position:relative}
.sec-title::after{content:'';position:absolute;top:0;left:-30%;width:30%;height:100%;
  pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.14),transparent)}
.sec-title.swept::after{animation:sweep 1.5s var(--ease) .15s 1}
@keyframes sweep{0%{opacity:1;left:-30%}100%{opacity:0;left:115%}}

/* ripple pas tombol diklik */
.btn,.dl-card>a,.dc-actions a,.dc-actions button{position:relative;overflow:hidden}
.rip{position:absolute;border-radius:50%;transform:translate(-50%,-50%) scale(0);
  background:rgba(34,211,238,.28);pointer-events:none;animation:rip .6s ease-out forwards}
@keyframes rip{to{transform:translate(-50%,-50%) scale(1);opacity:0}}

/* parallax hero + rail/dots masuk pelan */
.hero .quote,.hero-cta,.scrollhint{will-change:transform}
.rail,.dots{animation:railIn .9s var(--ease) .5s both}
@keyframes railIn{from{opacity:0;transform:translateY(18px)}to{opacity:1}}
.dots{animation-name:dotsIn}
@keyframes dotsIn{from{opacity:0;transform:translate(14px,-50%)}to{opacity:1;transform:translateY(-50%)}}

/* dot aktif berdenyut pelan */
.dots a.on i{animation:dotPulse 2.4s ease-in-out infinite}
@keyframes dotPulse{0%,100%{box-shadow:0 0 12px rgba(34,211,238,.6)}50%{box-shadow:0 0 20px rgba(34,211,238,.95)}}

/* ikon rail: naik dikit + halo pas hover */
.rail-ico{transition:transform .28s var(--ease),color .2s,border-color .25s,background .25s}
.rail-ico:hover{transform:translateY(-4px) scale(1.08)}

/* garis bawah nav yang menyapu */
nav .links a{position:relative}
nav .links a::after{content:'';position:absolute;left:14px;right:14px;bottom:4px;height:1px;
  background:var(--cyn);transform:scaleX(0);transform-origin:right;
  transition:transform .35s var(--ease)}
nav .links a:hover::after{transform:scaleX(1);transform-origin:left}
nav .links a.active::after{transform:scaleX(0)}

/* angka fact sedikit "pop" pas selesai menghitung */
.fact .n.done{animation:pop .5s var(--ease)}
@keyframes pop{0%{transform:none}40%{transform:translateY(-4px) scale(1.06)}100%{transform:none}}

/* kartu repo & tool ikut naik pas hover */
.repo,.tool{transition:transform .3s var(--ease),border-color .25s,background .25s}
.repo:hover{transform:translateY(-6px)}
.tool:hover{transform:translateY(-3px)}

@media(prefers-reduced-motion:reduce){
  .anim-stag>*{opacity:1;transform:none;transition:none}
  .tilt{transform:none!important}
  .sec-title.swept::after,.dots a.on i,.fact .n.done{animation:none}
  .rail,.dots{animation:none}
  .rip{display:none}
}

/* ===================== v13 — POLISH: LAYOUT & DETAIL ===================== */

html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* scrollbar senada tema */
*{scrollbar-width:thin;scrollbar-color:#2b2b33 #08080a}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--vio),var(--cyn));border-radius:99px;
  border:3px solid var(--bg)}

/* fokus keyboard yang jelas (a11y) */
a:focus-visible,button:focus-visible{outline:2px solid var(--cyn);outline-offset:3px;border-radius:6px}

/* irama vertikal antar section + garis pemisah tipis */
section{padding-top:clamp(72px,11vh,120px);padding-bottom:clamp(72px,11vh,120px)}
section+section::before{content:"";position:absolute;top:0;left:32px;right:32px;height:1px;
  background:linear-gradient(90deg,transparent,var(--line2) 18%,var(--line2) 82%,transparent)}
@media(min-width:981px){section+section::before{left:88px;right:88px}}

/* header section: label & judul lebih terbaca */
.sec-label{font-size:11px;letter-spacing:.38em}
.sec-num{color:var(--cyn);opacity:.75}
.sec-title{margin-bottom:clamp(30px,5vh,52px)}

/* facts: angka gradient + kolom lebih hidup */
.fact{padding:clamp(18px,2.4vw,26px) clamp(16px,2vw,24px);transition:background .3s}
.fact:hover{background:rgba(255,255,255,.035)}
.fact .n{font-family:var(--sans);font-weight:700;font-size:clamp(28px,3.4vw,42px);line-height:1;
  background:linear-gradient(120deg,#fff,var(--cyn));-webkit-background-clip:text;background-clip:text;
  color:transparent;font-variant-numeric:tabular-nums;display:block}
.fact .l{display:block;margin-top:10px;font-size:9.5px;letter-spacing:.24em;color:var(--faint)}

/* tools: value sedikit lebih lega */
.tool{padding:clamp(16px,2vw,22px)}
.tool .tv{margin-top:8px;display:block;line-height:1.7}

/* kartu repo: dot bahasa + panah bulat di sudut */
.repo .rname{display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-family:var(--sans);font-weight:600;font-size:16px}
.repo .ar{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--line);color:var(--dim);font-size:11px;
  transition:transform .3s var(--ease),color .25s,border-color .25s}
.repo:hover .ar{transform:translate(2px,-2px);color:var(--cyn);border-color:rgba(34,211,238,.45)}
.repo .rdesc{line-height:1.9}
.repo .rmeta{margin-top:auto;padding-top:6px}

/* tombol: solid jadi gradient lembut */
.btn.solid{background:linear-gradient(120deg,rgba(34,211,238,.16),rgba(124,92,255,.16));
  border-color:rgba(34,211,238,.4)}
.btn.solid:hover{background:linear-gradient(120deg,rgba(34,211,238,.28),rgba(124,92,255,.28))}

/* social rows & discord card lebih rapi */
.soc{transition:background .3s,border-color .25s,transform .3s var(--ease)}
.soc:hover{background:rgba(255,255,255,.03)}
.dc-card{border-radius:var(--r)}

/* footer lebih lapang */
footer{padding-top:clamp(56px,8vh,90px);padding-bottom:clamp(40px,6vh,70px)}

/* rapikan di layar kecil */
@media(max-width:640px){
  .facts{grid-template-columns:1fr 1fr}
  .fact .l{letter-spacing:.18em}
  .sec-label{letter-spacing:.28em}
  section+section::before{left:20px;right:20px}
}

/* ============================================================
   v14 — UI / LAYOUT / MOTION REFINEMENT
   fokus: keterbacaan judul, hero yang lebih rapi, kartu kaca
   konsisten, hover & micro-interaction yang halus.
   ============================================================ */

:root{
  --r:14px;
  --r-sm:10px;
  --spring:cubic-bezier(.22,1.2,.36,1);
  --glow-vio:0 18px 50px rgba(139,92,246,.18);
  --glow-cyn:0 18px 50px rgba(34,211,238,.14);
  --ring:rgba(255,255,255,.08);
}

/* ---------- 1. JUDUL SECTION: solid & terbaca, sheen tetap jalan ---------- */
.sec-title{
  background:none;color:var(--txt);
  -webkit-text-fill-color:var(--txt);
  animation:none;
  letter-spacing:-.03em;
  text-shadow:0 0 42px rgba(139,92,246,.22);
}
.sec-title em{
  color:transparent;-webkit-text-fill-color:transparent;
  -webkit-text-stroke:1.4px rgba(236,236,241,.42);
}
.sec-title .glitch,.sec-title .gl{-webkit-text-fill-color:inherit}
/* sheen: garis cahaya menyapu judul, dimasking biar cuma kena huruf */
.sec-title::after{
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  mix-blend-mode:overlay;width:38%;
}
.sec-label{align-items:center}
.sec-num{color:var(--cyn);opacity:.9;font-weight:500}

/* ---------- 2. HERO ---------- */
.hero{padding-top:clamp(120px,18vh,168px)}
.hero h1{
  font-size:clamp(52px,12.4vw,168px);
  line-height:.86;letter-spacing:-.04em;margin:26px 0 4px;
}
.hero h1 .row:nth-child(1) span{
  color:var(--txt);-webkit-text-fill-color:var(--txt);
  text-shadow:0 0 60px rgba(255,255,255,.12);
}
.hero h1 .row:nth-child(2) span{
  background:linear-gradient(100deg,#ffffff 4%,#c4b5fd 32%,var(--vio) 58%,var(--cyn) 92%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 12px 40px rgba(139,92,246,.28));
}
.hero h1 .row{padding-bottom:.06em}

/* meta atas jadi chip kaca */
.hero .meta{gap:10px 12px;margin-bottom:4px}
.hero .meta>span{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--line);border-radius:99px;padding:6px 14px;
  background:rgba(13,13,18,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-size:10.5px;letter-spacing:.14em;
  transition:border-color .25s,color .25s,transform .25s var(--spring);
}
.hero .meta>span:hover{border-color:rgba(34,211,238,.4);transform:translateY(-2px)}
.hero .meta .live{border-color:rgba(34,211,238,.35);background:rgba(34,211,238,.06)}

/* sub-line: pemisah lebih halus */
.hero .sub{margin-top:24px;gap:8px 18px;font-size:11.5px}
.hero .sub i{opacity:.5}

/* terminal mini: dibingkai seperti jendela */
.hero .term{
  margin-top:28px;max-width:640px;position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r);
  background:rgba(12,12,18,.55);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  padding:42px 18px 18px;font-size:12px;
  box-shadow:0 16px 46px rgba(0,0,0,.35);
}
.hero .term::before{
  content:"sharp@aether — bash";
  position:absolute;top:0;left:0;right:0;height:32px;
  display:flex;align-items:center;padding-left:64px;
  font-size:10px;letter-spacing:.2em;color:var(--faint);
  background:rgba(255,255,255,.03);border-bottom:1px solid var(--line);
}
.hero .term::after{
  content:"";position:absolute;top:13px;left:16px;width:7px;height:7px;border-radius:99px;
  background:#f472b6;box-shadow:14px 0 0 #f0b232,28px 0 0 #23a55a;
}
.hero .quote{
  margin-top:30px;border-left:2px solid transparent;
  border-image:linear-gradient(var(--vio),var(--cyn)) 1;
  padding-left:20px;max-width:460px;
}
.hero-cta{margin-top:34px;gap:12px}
.hero-cta .btn{padding:15px 28px;letter-spacing:.16em}

/* scrollhint: jadi baris status tipis */
.scrollhint{
  border-top:1px solid var(--line);padding-top:16px;align-items:center;
  font-size:10px;letter-spacing:.26em;
}

/* ---------- 3. NAV ---------- */
nav{transition:padding .3s var(--ease),background .3s,box-shadow .3s}
nav .logo .sq{border-radius:2px;box-shadow:0 0 12px rgba(34,211,238,.8)}
nav .links a{font-size:11px;letter-spacing:.18em}
nav .links a.active{
  box-shadow:0 0 0 1px rgba(34,211,238,.18),0 8px 24px rgba(34,211,238,.12);
}
nav.scrolled{box-shadow:0 1px 0 rgba(139,92,246,.22),0 14px 44px rgba(0,0,0,.45)}

/* progress bar lebih hidup */
#progress{height:2.5px;background:linear-gradient(90deg,var(--vio),var(--cyn),var(--pnk));
  box-shadow:0 0 14px rgba(34,211,238,.5)}

/* ---------- 4. PANEL / KARTU: gaya kaca seragam ---------- */
.dl-card,.repo,.dc-card,.bio,.cmp-wrap,.facts,.tool-grid,.stack-marquee{
  box-shadow:0 10px 34px rgba(0,0,0,.28);
}
.dl-card{padding:clamp(22px,2.6vw,30px);gap:14px}
.dl-card:hover{box-shadow:var(--glow-vio),var(--glow-cyn)}
.dl-card h4{font-size:22px;letter-spacing:-.01em}
.dl-card ul{gap:10px;line-height:1.6}
.dl-card ul li{padding-left:2px;transition:color .2s}
.dl-card ul li:hover{color:var(--txt)}
.dl-card .btn{width:100%}
.dl-card>a:last-of-type{margin-top:-4px}

.badge{border-radius:99px;padding:4px 12px;font-weight:500}
.badge.mine{background:rgba(139,92,246,.10)}
.badge.root{background:rgba(244,114,182,.08)}
.badge.lite{background:rgba(34,211,238,.08)}

/* tombol: ikon/panah ikut gerak */
.btn{letter-spacing:.16em;padding:13px 24px;font-weight:500}
.btn.solid{color:var(--txt);border:1px solid rgba(34,211,238,.4)}
.btn.solid:hover{box-shadow:0 12px 34px rgba(139,92,246,.26);transform:translateY(-2px)}
.btn.ghost:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.985)}

/* tabel perbandingan */
.cmp th{background:rgba(255,255,255,.04);letter-spacing:.2em}
.cmp th:first-child{border-top-left-radius:var(--r)}
.cmp td{padding:15px 18px}
.cmp .ok::before{content:"✓ ";color:var(--cyn)}
.cmp .no::before{content:"✕ ";color:var(--pnk)}

/* ---------- 5. ROWS (ABOUT) ---------- */
.rows{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  background:rgba(13,13,18,.4);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.row-item{padding:24px clamp(16px,2vw,26px)}
.row-item:last-child{border-bottom:none}
.row-item:hover{padding-left:clamp(22px,2.4vw,34px)}
.row-item .k{color:var(--dim);font-size:10.5px}
.row-item .v{font-size:clamp(19px,3.2vw,30px)}

/* ---------- 6. FACTS ---------- */
.facts{border-radius:var(--r)}
.fact{position:relative;overflow:hidden}
.fact::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--vio),var(--cyn));
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.fact:hover::after{transform:none}
.fact .n{background:linear-gradient(120deg,#fff 20%,var(--cyn) 90%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

.fact .l{color:var(--dim);opacity:.9}

/* ---------- 7. TOOLS ---------- */
.tool-grid{border-radius:var(--r)}
.tools-head{color:var(--dim)}
.tool .tk{color:var(--cyn);opacity:.7}
.tool:hover{background:rgba(139,92,246,.07)}

/* ---------- 8. REPO CARDS ---------- */
.repo{padding:clamp(20px,2.3vw,26px);min-height:180px}
.repo .rname{font-size:16.5px;color:var(--txt);letter-spacing:-.005em}
.repo .rdesc{color:var(--dim)}
.repo:hover{box-shadow:var(--glow-vio)}
.repo .rtopics span{background:rgba(255,255,255,.03);transition:color .2s,border-color .2s}
.repo:hover .rtopics span{border-color:rgba(34,211,238,.3);color:var(--cyn)}
.repo .rmeta{border-top:1px solid var(--line);margin-top:auto;padding-top:14px}

/* ---------- 9. SOCIAL ---------- */
.socs{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  background:rgba(13,13,18,.4);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.soc{padding:24px clamp(16px,2vw,26px)}
.soc:last-child{border-bottom:none}
.soc .idx{color:var(--cyn);opacity:.6}
.soc .arrow{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--line);font-size:13px}
.soc:hover .arrow{border-color:rgba(34,211,238,.45);transform:translate(3px,-3px)}
.dc-card{padding:clamp(20px,2.4vw,28px)}
.dc-top img{width:62px;height:62px}
.chip{padding:11px 22px;font-weight:500}

/* ---------- 10. FOOTER ---------- */
footer .motto{letter-spacing:-.02em}
footer .top{padding:12px 26px}

/* ---------- 11. ANIMASI TAMBAHAN ---------- */
/* reveal lebih halus + sedikit blur-in */
[data-rv]{transform:translateY(22px);filter:blur(6px)}
[data-rv].in{filter:blur(0)}
[data-rv]{transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease)}

/* stagger anak grid: tambah skala halus */
.anim-stag>*{transform:translateY(20px) scale(.98)}

/* live dot & badge shimmer */
@keyframes sheenMove{to{background-position:200% 0}}
.badge.mine{background-image:linear-gradient(100deg,transparent 35%,rgba(196,181,253,.18) 50%,transparent 65%);
  background-size:200% 100%;animation:sheenMove 5s linear infinite}

/* ticker & marquee: jalan lebih tenang */
.ticker-track{animation-duration:42s}
.sm-track{animation-duration:30s}

/* rail & dots: indikator lebih jelas */
.rail-idx{color:var(--cyn);opacity:.55}
.dots a span{font-size:9px}

/* back-to-top jadi tombol dengan cincin */
#totop{width:46px;height:46px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
#totop:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(34,211,238,.22)}

/* ---------- 12. RESPONSIF ---------- */
@media(max-width:980px){
  .hero{padding-top:clamp(104px,16vh,140px)}
}
@media(max-width:640px){
  .hero h1{font-size:clamp(46px,15vw,84px);margin-top:20px}
  .hero .term{padding:38px 14px 16px;font-size:11px}
  .hero .meta>span{padding:5px 11px;font-size:9.5px}
  .row-item{padding:20px 16px}
  .soc{padding:20px 16px}
  .sec-title{text-shadow:none}
}

@media(prefers-reduced-motion:reduce){
  .badge.mine{animation:none}
  [data-rv]{filter:none;transform:none}
}

/* ---------- 13. GLITCH: pastikan layer hantu hilang setelah burst ---------- */
@keyframes gl-out{0%,92%{opacity:.9}100%{opacity:0;visibility:hidden}}
.glitch.on::before{animation:gl-a .42s steps(5) 1, gl-out .42s linear forwards}
.glitch.on::after{animation:gl-b .42s steps(5) 1, gl-out .42s linear forwards}

/* ============================================================
   v15 — perbaikan kontras tombol, label, & ritme spasi mobile
   ============================================================ */
.btn.solid{
  background:linear-gradient(100deg,var(--vio),var(--cyn));
  color:#07070b;border-color:transparent;
  box-shadow:0 10px 26px rgba(139,92,246,.22)}
.btn.solid:hover{box-shadow:0 14px 34px rgba(34,211,238,.28);border-color:transparent;transform:translateY(-2px)}
.btn.ghost{border-color:rgba(255,255,255,.22)}

.row-item .k,.soc small,.tools-head,.fact .l{color:rgba(236,236,241,.62)}
.row-item .v small{color:rgba(236,236,241,.55)}
.dl-card ul li{color:rgba(236,236,241,.72)}
.badge{color:rgba(236,236,241,.7)}

@media(max-width:640px){
  section{padding:46px 18px}
  .sec-title{margin-bottom:26px}
  .bio{margin-top:20px;line-height:1.95}
  .dl-cards{gap:14px}
  .dl-card{padding:22px}
  .ticker,.stack-marquee{margin:0}
  footer{padding-top:34px}
}

/* ============================================================
   v16 — SMOOTH MOTION LAYER
   scroll reveal bertahap, hover pegas, magnetic button,
   spotlight kursor, dan transisi yang lebih halus.
   ============================================================ */
:root{
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
}
html{scroll-behavior:smooth}

/* reveal: lebih panjang, pakai stagger index dari JS */
[data-rv]{
  opacity:0;transform:translate3d(0,26px,0) scale(.985);filter:blur(7px);
  transition:opacity .9s var(--ease-out) var(--rvd,0ms),
             transform 1s var(--ease-out) var(--rvd,0ms),
             filter .9s var(--ease-out) var(--rvd,0ms)}
[data-rv].in{opacity:1;transform:none;filter:blur(0)}

/* anak-anak grid ikut masuk bertahap */
.anim-stag>*{opacity:0;transform:translate3d(0,18px,0);
  transition:opacity .7s var(--ease-out) var(--sd,0ms),transform .7s var(--ease-out) var(--sd,0ms)}
.anim-stag.in>*{opacity:1;transform:none}

/* judul section: sapuan garis + huruf naik */
.sec-title{will-change:transform}
.sec-label{opacity:0;transform:translateX(-10px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.sec-label.in{opacity:1;transform:none}

/* hover pegas untuk kartu & tombol */
.dl-card,.repo,.soc,.dc-card,.tool,.fact{
  transition:transform .55s var(--spring),border-color .35s var(--ease-soft),
             background .35s var(--ease-soft),box-shadow .45s var(--ease-soft)}
.dl-card:hover,.repo:hover,.dc-card:hover{transform:translate3d(0,-6px,0)}
.btn{transition:transform .35s var(--spring),background .3s var(--ease-soft),
     color .3s var(--ease-soft),border-color .3s var(--ease-soft),box-shadow .4s var(--ease-soft)}
.btn:active{transform:scale(.97)}

/* magnetic button: JS mengisi --mgx / --mgy */
.mag{transform:translate3d(var(--mgx,0),var(--mgy,0),0)}
.mag:hover{transition:transform .12s linear}

/* spotlight lembut mengikuti kursor di kartu */
.glow16{position:relative;isolation:isolate}
.glow16::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:0;
  transition:opacity .45s var(--ease-soft);border-radius:inherit;
  background:radial-gradient(340px circle at var(--sx,50%) var(--sy,50%),rgba(139,92,246,.16),transparent 62%)}
.glow16:hover::after{opacity:1}

/* nav: garis bawah meluncur */
nav .links a{position:relative}
nav .links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;
  background:linear-gradient(90deg,var(--vio),var(--cyn));
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-out)}
nav .links a:hover::after,nav .links a.active::after{transform:scaleX(1);transform-origin:left}

/* link sosial & repo: panah geser halus */
.soc .arrow,.repo .rname{transition:transform .45s var(--spring),color .3s var(--ease-soft)}
.repo:hover .rname{transform:translateX(3px)}

/* progress bar & rail: gerak halus */
#prog{transition:width .25s var(--ease-soft)}
.dots a i{transition:transform .5s var(--spring),background .3s}

/* back to top: muncul dengan skala */
#totop{opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;
  transition:opacity .45s var(--ease-out),transform .5s var(--spring)}
#totop.show{opacity:1;transform:none;pointer-events:auto}

/* terminal caret & badge halus */
.hero .term .cur{animation-duration:1.1s}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-rv],.anim-stag>*,.sec-label{opacity:1!important;transform:none!important;filter:none!important}
  .mag{transform:none!important}
  .glow16::after{display:none}
}

/* ============================================================
   v17 — EXTRA: grain halus, border gradient repo, fade masuk
   ============================================================ */
/* grain bawaan dibikin hidup pelan */
.grain{animation:grain 7s steps(6) infinite}
@keyframes grain{
  0%{transform:translate3d(0,0,0)}20%{transform:translate3d(-3%,2%,0)}
  40%{transform:translate3d(2%,-3%,0)}60%{transform:translate3d(-2%,-2%,0)}
  80%{transform:translate3d(3%,1%,0)}100%{transform:translate3d(0,0,0)}}

/* repo card: border gradient yang menyala saat hover */
.repo{position:relative;isolation:isolate}
.repo::before{content:"";position:absolute;inset:-1px;border-radius:inherit;z-index:-1;opacity:0;
  background:linear-gradient(135deg,rgba(139,92,246,.65),rgba(34,211,238,.5) 55%,rgba(244,114,182,.45));
  transition:opacity .45s var(--ease-soft)}
.repo:hover::before{opacity:1}

/* halaman fade masuk setelah loader */
body{opacity:0;transition:opacity .7s var(--ease-out)}
body.ready,body.loaded{opacity:1}

@media(prefers-reduced-motion:reduce){
  .grain{animation:none}
  body{opacity:1}
}

/* ============================================================
   v18 — FITUR BARU
   command palette (Ctrl+K), jam lokal, pemilih warna aksen,
   panel shortcut (?), tombol reduce-motion.
   ============================================================ */
#pal{position:fixed;inset:0;z-index:2000;display:none;padding:14vh 18px 18px;
  background:rgba(4,4,6,.62);backdrop-filter:blur(8px);
  opacity:0;transition:opacity .28s var(--ease-soft)}
#pal.open{display:block}
#pal.show{opacity:1}
.pal-box{max-width:620px;margin:0 auto;border:1px solid var(--line2);border-radius:16px;
  background:linear-gradient(180deg,rgba(18,18,24,.98),rgba(10,10,14,.98));
  box-shadow:0 40px 90px rgba(0,0,0,.6);overflow:hidden;
  transform:translateY(-14px) scale(.98);transition:transform .35s var(--ease-out)}
#pal.show .pal-box{transform:none}
.pal-box input{width:100%;padding:18px 20px;background:none;border:0;border-bottom:1px solid var(--line);
  color:var(--txt);font:500 14px/1 var(--mono);letter-spacing:.06em;outline:none}
.pal-box input::placeholder{color:var(--faint)}
.pal-list{max-height:52vh;overflow:auto;padding:8px}
.pal-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;cursor:pointer;
  color:rgba(236,236,241,.78);font:400 12.5px/1 var(--mono);letter-spacing:.05em;
  transition:background .2s var(--ease-soft),color .2s var(--ease-soft)}
.pal-item .ic{width:22px;color:var(--cyn);font-size:12px}
.pal-item .tag{margin-left:auto;color:var(--faint);font-size:10.5px;letter-spacing:.12em}
.pal-item.sel,.pal-item:hover{background:rgba(139,92,246,.16);color:#fff}
.pal-empty{padding:22px 16px;color:var(--faint);font:400 12px var(--mono);text-align:center}
.pal-foot{display:flex;gap:16px;padding:10px 16px;border-top:1px solid var(--line);
  color:var(--faint);font:400 10.5px var(--mono);letter-spacing:.1em}

/* jam lokal di nav */
#clock{margin-left:auto;margin-right:16px;display:flex;align-items:center;gap:8px;
  color:rgba(236,236,241,.6);font:500 11px var(--mono);letter-spacing:.12em;white-space:nowrap}
#clock b{color:var(--cyn);font-weight:500}
#clock .dot{width:5px;height:5px;border-radius:50%;background:var(--vio);box-shadow:0 0 8px var(--vio)}
@media(max-width:900px){#clock{display:none}}

/* tombol kecil kanan atas: palette + shortcut */
.hud{position:fixed;right:20px;bottom:88px;z-index:60;display:flex;flex-direction:column;gap:10px}
.hud button{width:42px;height:42px;border-radius:12px;cursor:pointer;
  border:1px solid var(--line2);background:rgba(16,16,20,.72);backdrop-filter:blur(8px);
  color:rgba(236,236,241,.72);font:500 11px var(--mono);
  transition:transform .35s var(--spring),color .25s,border-color .25s,background .25s}
.hud button:hover{color:#fff;border-color:rgba(139,92,246,.6);background:rgba(139,92,246,.18);transform:translateY(-2px)}
@media(max-width:640px){.hud{right:14px;bottom:78px}.hud button{width:38px;height:38px}}

/* pemilih warna aksen */
.acc-row{display:flex;gap:10px;padding:12px 16px;border-top:1px solid var(--line)}
.acc{width:22px;height:22px;border-radius:50%;cursor:pointer;border:1px solid rgba(255,255,255,.22);
  transition:transform .3s var(--spring)}
.acc:hover{transform:scale(1.15)}
.acc.on{box-shadow:0 0 0 2px rgba(255,255,255,.5)}

body.no-motion *{animation:none!important;transition:none!important}

/* ============================================================
   v19 — kursor custom, ring progres, statistik GitHub, easter egg
   ============================================================ */
@media(pointer:fine){
  .cur-dot,.cur-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:1500;border-radius:50%;
    mix-blend-mode:screen;will-change:transform}
  .cur-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--cyn);box-shadow:0 0 12px var(--cyn)}
  .cur-ring{width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid rgba(139,92,246,.75);
    transition:width .25s var(--ease-out),height .25s var(--ease-out),margin .25s var(--ease-out),
               border-color .25s var(--ease-out),background .25s var(--ease-out)}
  .cur-ring.hot{width:54px;height:54px;margin:-27px 0 0 -27px;
    border-color:rgba(34,211,238,.85);background:rgba(34,211,238,.08)}
}

/* ring progres di tombol back-to-top */
#totop{position:fixed}
#totop svg.ring{position:absolute;inset:-5px;width:calc(100% + 10px);height:calc(100% + 10px);
  transform:rotate(-90deg);pointer-events:none}
#totop svg.ring circle{fill:none;stroke-width:2}
#totop svg.ring .bg{stroke:rgba(255,255,255,.1)}
#totop svg.ring .fg{stroke:url(#totop-grad);stroke-linecap:round;transition:stroke-dashoffset .12s linear}

/* strip statistik GitHub */
.gh-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 26px}
.gh-stat{padding:16px 18px;border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.008));
  transition:border-color .35s var(--ease-soft),transform .45s var(--spring)}
.gh-stat:hover{border-color:rgba(139,92,246,.45);transform:translateY(-3px)}
.gh-stat b{display:block;font:700 26px/1 var(--sans);color:var(--txt);letter-spacing:-.02em}
.gh-stat span{display:block;margin-top:8px;color:rgba(236,236,241,.55);
  font:400 10px var(--mono);letter-spacing:.16em}
@media(max-width:720px){.gh-stats{grid-template-columns:repeat(2,1fr)}}

/* easter egg: hujan partikel */
#egg{position:fixed;inset:0;z-index:1400;pointer-events:none}
.egg-p{position:absolute;width:3px;height:3px;border-radius:50%;
  background:var(--cyn);box-shadow:0 0 10px var(--vio);animation:eggfall linear forwards}
@keyframes eggfall{to{transform:translate3d(var(--ex,0),105vh,0) rotate(360deg);opacity:0}}
body.rainbow .sec-title,body.rainbow .hero h1{animation:huecycle 6s linear infinite}
@keyframes huecycle{to{filter:hue-rotate(360deg)}}

@media(prefers-reduced-motion:reduce){.cur-dot,.cur-ring{display:none}}
body.no-motion .cur-dot,body.no-motion .cur-ring{display:none}

/* ============================================================
   v20 — terminal, filter repo, panel shortcut, snippet, PWA
   ============================================================ */
/* field bisa diketik walau anti-copy aktif */
input,textarea{-webkit-user-select:text!important;user-select:text!important}

/* ---------- blok snippet install ---------- */
.snips{margin:34px 0 10px}
.snips-head{color:var(--faint);font:400 10.5px var(--mono);letter-spacing:.2em;margin-bottom:14px}
.snip{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.008))}
.snip-top{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 14px;border-bottom:1px solid var(--line);
  color:var(--dim);font:400 10.5px var(--mono);letter-spacing:.16em}
.snip-copy{cursor:pointer;border:1px solid var(--line2);border-radius:8px;padding:5px 10px;
  background:rgba(255,255,255,.03);color:rgba(236,236,241,.75);
  font:500 10px var(--mono);letter-spacing:.14em;transition:all .25s var(--ease-soft)}
.snip-copy:hover{color:#fff;border-color:rgba(139,92,246,.6);background:rgba(139,92,246,.18)}
.snip-copy.ok{color:var(--cyn);border-color:rgba(34,211,238,.6)}
.snip code{display:block;padding:14px 16px;white-space:pre-wrap;word-break:break-word;
  color:rgba(236,236,241,.86);font:400 12px/1.85 var(--mono)}

/* ---------- bar filter repositories ---------- */
.repo-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 16px}
.repo-bar input{flex:1 1 200px;min-width:160px;padding:11px 14px;border-radius:12px;
  border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--txt);
  font:400 12px var(--mono);letter-spacing:.06em;outline:none;transition:border-color .3s}
.repo-bar input:focus{border-color:rgba(139,92,246,.6)}
.repo-bar input::placeholder{color:var(--faint)}
.repo-langs,.repo-sort{display:flex;flex-wrap:wrap;gap:8px}
.repo-langs button,.repo-sort button{cursor:pointer;border:1px solid var(--line);border-radius:999px;
  padding:7px 13px;background:rgba(255,255,255,.02);color:rgba(236,236,241,.6);
  font:500 10px var(--mono);letter-spacing:.14em;transition:all .25s var(--ease-soft)}
.repo-langs button:hover,.repo-sort button:hover{color:#fff;border-color:var(--line2)}
.repo-langs button.on,.repo-sort button.on{color:#fff;border-color:rgba(139,92,246,.7);background:rgba(139,92,246,.18)}

/* ---------- bar distribusi bahasa ---------- */
.lang-bar{margin:0 0 22px}
.lb-track{display:flex;height:6px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.06)}
.lb-track i{display:block;height:100%}
.lb-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;
  color:rgba(236,236,241,.55);font:400 10.5px var(--mono);letter-spacing:.1em}
.lb-legend span{display:flex;align-items:center;gap:6px}
.lb-legend b{width:8px;height:8px;border-radius:50%}
.lb-legend em{color:var(--faint);font-style:normal}

/* ---------- panel shortcut ---------- */
#help{position:fixed;inset:0;z-index:2100;display:none;padding:12vh 18px 18px;
  background:rgba(4,4,6,.66);backdrop-filter:blur(8px)}
#help.open{display:block;animation:fadeIn .25s var(--ease-soft)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.help-box{max-width:520px;margin:0 auto;border:1px solid var(--line2);border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,rgba(18,18,24,.98),rgba(10,10,14,.98));box-shadow:0 40px 90px rgba(0,0,0,.6)}
.help-top{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;
  border-bottom:1px solid var(--line);color:var(--txt);font:500 12px var(--mono);letter-spacing:.2em}
.help-x{cursor:pointer;background:none;border:0;color:var(--dim);font-size:14px}
.help-x:hover{color:#fff}
.help-grid{padding:10px 8px}
.help-row{display:flex;align-items:center;gap:14px;padding:9px 12px;border-radius:10px;
  color:rgba(236,236,241,.7);font:400 12px var(--mono);letter-spacing:.05em}
.help-row:hover{background:rgba(139,92,246,.12);color:#fff}
.help-row kbd{min-width:96px;padding:5px 9px;border:1px solid var(--line2);border-radius:8px;
  background:rgba(255,255,255,.04);color:var(--cyn);font:500 10.5px var(--mono);text-align:center;letter-spacing:.08em}

/* ---------- terminal interaktif ---------- */
#term20{position:fixed;inset:0;z-index:2200;display:none;padding:10vh 18px 18px;
  background:rgba(4,4,6,.66);backdrop-filter:blur(8px)}
#term20.open{display:block;animation:fadeIn .25s var(--ease-soft)}
.t-box{max-width:700px;margin:0 auto;border:1px solid var(--line2);border-radius:14px;overflow:hidden;
  background:rgba(8,8,11,.98);box-shadow:0 40px 90px rgba(0,0,0,.65)}
.t-top{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line);
  color:var(--dim);font:400 11px var(--mono);letter-spacing:.14em}
.t-dots{display:flex;gap:6px}
.t-dots i{width:9px;height:9px;border-radius:50%;background:#2a2a33}
.t-dots i:nth-child(1){background:#f87171}.t-dots i:nth-child(2){background:#fbbf24}.t-dots i:nth-child(3){background:#34d399}
.t-x{margin-left:auto;cursor:pointer;background:none;border:0;color:var(--dim)}
.t-x:hover{color:#fff}
.t-out{height:min(46vh,380px);overflow:auto;padding:14px 16px;
  color:rgba(236,236,241,.82);font:400 12px/1.75 var(--mono)}
.t-ln{white-space:pre-wrap;word-break:break-word}
.t-ln.echo{color:rgba(236,236,241,.55)}
.t-ln.err{color:#fb7185}
.t-ln .k{color:var(--cyn)}
.t-fetch{font:400 11.5px/1.6 var(--mono);color:rgba(236,236,241,.8)}
.t-fetch b{color:var(--vio)}
.t-in{display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--line)}
.t-ps1{color:var(--vio);font:500 12px var(--mono);white-space:nowrap}
.t-in input{flex:1;background:none;border:0;outline:none;color:var(--txt);
  font:400 12px var(--mono);letter-spacing:.04em;caret-color:var(--cyn)}
@media(max-width:640px){#term20{padding:6vh 10px 10px}.t-out{height:52vh}}

/* HUD jadi grid kalau tombolnya banyak */
.hud{max-height:70vh;overflow:visible}

/* ============================================================
   v21 — LIGHT MODE · CHANGELOG · GH GRAPH · TOP LANGS · NOW PLAYING · CONTACT
   ============================================================ */

/* ---------- light mode ---------- */
body.light{
  --bg:#f5f5f7; --bg2:#ececef; --panel:#ffffff;
  --line:rgba(10,10,14,.12); --line2:rgba(10,10,14,.22);
  --txt:#15151a; --dim:#4e4e59; --faint:#6e6e7b;
  background-image:radial-gradient(ellipse 70% 45% at 85% -10%, rgba(139,92,246,.12), transparent),
                   radial-gradient(ellipse 55% 35% at 5% 105%, rgba(34,211,238,.10), transparent);
}
body.light{background-color:var(--bg)}
html:has(body.light){background:#f5f5f7}
body.light::before{opacity:.14;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.05) 3px 4px)}
body.light::after{background:radial-gradient(ellipse 120% 100% at 50% 40%, transparent 60%, rgba(0,0,0,.10))}
body.light .grain{opacity:.03}
body.light .milkyway,body.light canvas#dust,body.light .aurora{opacity:.28}
body.light .spot{background:radial-gradient(560px circle at var(--mx) var(--my), rgba(139,92,246,.10), transparent 65%)}
body.light nav.scrolled{background:rgba(245,245,247,.82)}
body.light #loader{background:var(--bg)}
body.light .repo,body.light .dl-card,body.light .dc-card,body.light .tool,body.light .snip,
body.light .cform,body.light .np-card,body.light .log-item .log-body,body.light .gh-wrap,body.light .top-langs,
body.light .pal-box,body.light .help-box,body.light .fact,body.light .row-item{
  background:rgba(255,255,255,.72);
}
body.light .t-box{background:#ffffff}
body.light .snip code,body.light .t-out{color:#1a1a20}
body.light ::-webkit-scrollbar-track{background:var(--bg)}
body.light ::-webkit-scrollbar-thumb{background:#c9c9d2;border-color:var(--bg)}
body.light *{scrollbar-color:#c9c9d2 #f4f4f6}
body.light .hud button{background:rgba(255,255,255,.85)}

/* ---------- changelog ---------- */
.log-filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 22px}
.lg-f{font:inherit;font-size:10.5px;letter-spacing:.16em;color:var(--dim);background:transparent;
  border:1px solid var(--line);border-radius:99px;padding:6px 14px;cursor:pointer;transition:.2s}
.lg-f:hover{color:var(--txt);border-color:var(--line2)}
.lg-f.on{color:var(--txt);border-color:var(--vio);box-shadow:0 0 0 1px rgba(139,92,246,.25) inset}
.log-list{position:relative;padding-left:18px}
.log-list::before{content:"";position:absolute;left:3px;top:6px;bottom:6px;width:1px;
  background:linear-gradient(180deg,var(--vio),var(--cyn),transparent)}
.log-item{position:relative;display:flex;gap:14px;margin-bottom:16px;
  animation:rvUp .5s var(--ease) both;animation-delay:var(--d,0s)}
.log-dot{position:absolute;left:-18px;top:14px;width:7px;height:7px;border-radius:99px;
  background:var(--cyn);box-shadow:0 0 0 3px rgba(34,211,238,.15)}
.log-body{flex:1;border:1px solid var(--line);border-radius:12px;background:rgba(16,16,20,.55);
  padding:14px 16px;transition:border-color .25s,transform .25s}
.log-body:hover{border-color:var(--line2);transform:translateX(3px)}
.log-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.log-top b{font-size:14px;letter-spacing:.06em}
.log-top time{margin-left:auto;font-size:10.5px;color:var(--faint);letter-spacing:.12em}
.log-tag{font-size:9.5px;letter-spacing:.16em;padding:3px 8px;border-radius:99px;border:1px solid var(--line2);color:var(--dim)}
.log-tag.site{color:var(--cyn);border-color:rgba(34,211,238,.4)}
.log-tag.aetherbox{color:var(--vio);border-color:rgba(139,92,246,.45)}
.log-tag.lite{color:var(--pnk);border-color:rgba(244,114,182,.4)}
.log-body ul{list-style:none;display:grid;gap:5px}
.log-body li{font-size:12.5px;color:var(--dim);padding-left:16px;position:relative}
.log-body li::before{content:"▸";position:absolute;left:0;color:var(--vio)}
@keyframes rvUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- github contribution graph ---------- */
.gh-wrap,.top-langs{margin-top:26px;border:1px solid var(--line);border-radius:14px;
  background:rgba(16,16,20,.5);padding:16px 18px}
.gh-wrap.hidden,.top-langs.hidden,.np-card.hidden{display:none}
.gh-head{display:flex;align-items:center;gap:10px;font-size:10.5px;letter-spacing:.18em;color:var(--faint);margin-bottom:12px}
.gh-head span{margin-left:auto;color:var(--dim);letter-spacing:.12em}
.gh-graph{display:flex;gap:3px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.gh-col{display:grid;grid-template-rows:repeat(7,1fr);gap:3px}
.gh-graph i,.gh-foot i{display:block;width:10px;height:10px;border-radius:2px;background:rgba(255,255,255,.06)}
.gh-graph i.lx{background:transparent}
.gh-graph i.l0,.gh-foot i.l0{background:rgba(255,255,255,.06)}
.gh-graph i.l1,.gh-foot i.l1{background:rgba(139,92,246,.35)}
.gh-graph i.l2,.gh-foot i.l2{background:rgba(139,92,246,.6)}
.gh-graph i.l3,.gh-foot i.l3{background:var(--vio)}
.gh-graph i.l4,.gh-foot i.l4{background:var(--cyn);box-shadow:0 0 8px rgba(34,211,238,.45)}
body.light .gh-graph i.l0,body.light .gh-foot i.l0{background:rgba(10,10,14,.08)}
.gh-foot{display:flex;align-items:center;gap:4px;margin-top:10px;font-size:10px;color:var(--faint);letter-spacing:.14em}
.gh-foot span{margin:0 4px}

/* ---------- top languages ---------- */
.tl-rows{display:grid;gap:9px}
.tl-row{display:grid;grid-template-columns:150px 1fr 62px;align-items:center;gap:12px;
  animation:rvUp .45s var(--ease) both;animation-delay:var(--d,0s)}
.tl-k{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--txt)}
.tl-k i{width:9px;height:9px;border-radius:99px;display:block}
.tl-bar{height:7px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
body.light .tl-bar{background:rgba(10,10,14,.08)}
.tl-bar b{display:block;height:100%;border-radius:99px;animation:tlGrow .8s var(--ease) both}
.tl-n{font-size:10.5px;color:var(--faint);letter-spacing:.1em;text-align:right}
@keyframes tlGrow{from{width:0 !important}}
@media(max-width:620px){.tl-row{grid-template-columns:110px 1fr 52px}}

/* sad music layer */
:root{--vio:#6574a8;--cyn:#9bb5c9;--pnk:#b98598}
.music-section{padding-top:70px}.music-grid{display:grid;grid-template-columns:1.4fr .8fr;gap:20px;align-items:stretch}.music-card,.music-quote{position:relative;overflow:hidden;border:1px solid rgba(155,181,201,.18);background:linear-gradient(135deg,rgba(35,45,67,.62),rgba(13,17,26,.86));padding:30px;min-height:255px}.music-card::after{content:"";position:absolute;inset:auto -10% -55% 30%;height:230px;background:radial-gradient(ellipse,rgba(101,116,168,.27),transparent 68%);filter:blur(12px);pointer-events:none}.music-copy{position:relative;z-index:1;max-width:560px}.music-kicker{font-size:10px;letter-spacing:.24em;color:var(--cyn)}.music-copy h3{font-family:var(--sans);font-size:clamp(27px,4vw,48px);line-height:1.02;margin:25px 0 16px;text-transform:lowercase}.music-copy p,.music-quote p{color:var(--dim);line-height:1.9;font-size:13px}.music-progress{height:2px;background:rgba(255,255,255,.12);margin:28px 0 9px}.music-progress span{display:block;width:42%;height:100%;background:linear-gradient(90deg,var(--vio),var(--cyn));animation:musicPulse 4s ease-in-out infinite alternate}.music-meta{display:flex;justify-content:space-between;color:var(--faint);font-size:10px;letter-spacing:.17em}.music-orbit{position:absolute;right:42px;top:38px;width:110px;height:110px;border:1px solid rgba(155,181,201,.18);border-radius:50%;opacity:.7}.music-orbit::before,.music-orbit::after{content:"";position:absolute;inset:15px;border:1px solid rgba(155,181,201,.16);border-radius:50%}.music-orbit::after{inset:35px}.music-orbit span{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--cyn);top:7px;left:52px;box-shadow:0 0 14px var(--cyn)}.music-orbit span:nth-child(2){top:50px;left:101px;background:var(--pnk)}.music-orbit span:nth-child(3){top:94px;left:23px;background:var(--vio)}.music-quote{display:flex;flex-direction:column;justify-content:center}.quote-mark{font-family:Georgia,serif;color:var(--cyn);font-size:70px;line-height:.5}.music-quote p{color:var(--txt);font-family:var(--sans);font-size:20px;line-height:1.45;margin:18px 0}.music-quote small{color:var(--dim);font-size:10px;letter-spacing:.12em}.music-note{border-top:1px solid var(--line);margin-top:26px;padding-top:14px;color:var(--faint);font-size:10px;letter-spacing:.08em}@keyframes musicPulse{from{width:28%;opacity:.55}to{width:68%;opacity:1}}@media(max-width:760px){.music-grid{grid-template-columns:1fr}.music-orbit{right:20px;top:24px;transform:scale(.72);transform-origin:top right}.music-copy h3{max-width:70%}.music-card,.music-quote{padding:22px}}@media(prefers-reduced-motion:reduce){.music-progress span{animation:none;width:46%}}

/* ---------- now playing ---------- */
.np-card{position:relative;display:flex;gap:16px;align-items:center;margin-top:16px;
  border:1px solid var(--line);border-radius:14px;background:rgba(16,16,20,.6);padding:14px 16px}
.np-art{width:64px;height:64px;border-radius:8px;object-fit:cover;border:1px solid var(--line2);flex:none}
.np-meta{flex:1;min-width:0}
.np-head{display:flex;align-items:center;gap:8px;font-size:9.5px;letter-spacing:.18em;color:var(--faint);margin-bottom:5px}
.np-eq{display:flex;align-items:flex-end;gap:2px;height:11px}
.np-eq i{width:2px;background:var(--cyn);animation:eq .9s ease-in-out infinite}
.np-eq i:nth-child(2){animation-delay:.15s}
.np-eq i:nth-child(3){animation-delay:.3s}
.np-eq i:nth-child(4){animation-delay:.45s}
@keyframes eq{0%,100%{height:3px}50%{height:11px}}
body.no-motion .np-eq i{animation:none;height:7px}
.np-song{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-artist{display:block;font-size:11.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-track{height:3px;border-radius:99px;background:rgba(255,255,255,.1);margin-top:9px;overflow:hidden}
.np-fill{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--vio),var(--cyn));transition:width 1s linear}
.np-time{display:flex;justify-content:space-between;font-size:10px;color:var(--faint);margin-top:4px;letter-spacing:.08em}
.np-open{position:absolute;top:12px;right:14px;color:var(--dim);font-size:13px;transition:.2s}
.np-open:hover{color:var(--cyn)}

/* ---------- contact form ---------- */
.cform{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px;
  border:1px solid var(--line);border-radius:16px;background:rgba(16,16,20,.55);padding:22px}
.cform .full{grid-column:1/-1}
.cform label{display:grid;gap:7px;font-size:10px;letter-spacing:.18em;color:var(--faint)}
.cform input,.cform textarea,.cform select{
  font:inherit;font-size:13px;color:var(--txt);background:rgba(0,0,0,.25);
  border:1px solid var(--line);border-radius:10px;padding:11px 13px;transition:border-color .2s,box-shadow .2s;
  resize:vertical;width:100%}
body.light .cform input,body.light .cform textarea,body.light .cform select{background:rgba(255,255,255,.9)}
.cform input:focus,.cform textarea:focus,.cform select:focus{
  outline:none;border-color:var(--vio);box-shadow:0 0 0 3px rgba(139,92,246,.14)}
.cform .bad{border-color:var(--pnk);box-shadow:0 0 0 3px rgba(244,114,182,.12)}
.cform-foot{grid-column:1/-1;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cform-note{font-size:10.5px;color:var(--faint);letter-spacing:.12em}
.cform-btns{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}
.cform-btns .btn{cursor:pointer;border:1px solid var(--line2)}
@media(max-width:700px){.cform{grid-template-columns:1fr;padding:18px}.cform-btns{margin-left:0;width:100%}}

#hud-lang{font-size:10px;letter-spacing:.1em}

/* light-mode touch-ups */
body.light .hud button{color:var(--dim);border-color:var(--line2);box-shadow:0 6px 18px rgba(10,10,20,.08)}
body.light .hud button:hover{color:#fff}
body.light .hero .meta>span{background:rgba(255,255,255,.7);color:var(--dim)}
body.light .hero .term{background:rgba(20,20,26,.92)}
body.light .hero .term .ps1{color:var(--cyn)}
body.light .rail-ico{background:rgba(255,255,255,.75);color:var(--dim)}
body.light #totop{background:rgba(255,255,255,.85);color:var(--txt)}
body.light #toast{background:rgba(20,20,26,.94);color:#f4f4f7}
body.light .cmp th,body.light .cmp td{border-color:var(--line)}
body.light .repo:hover,body.light .soc:hover{background:rgba(255,255,255,.92)}
body.light .snip code{background:rgba(10,10,14,.05)}
body.light .dots a span{color:var(--dim)}

body.light .row-item .k,body.light .sec-label,body.light .scrollhint{color:var(--dim)}
body.light .fact .l,body.light .tool .tk{color:var(--faint)}

/* ============================================================
   v22 — FURSUIT DOSSIER · REPO VIEW OPTIONS
   ============================================================ */
[hidden]{display:none!important}

/* nav: muat 9 link di layar sedang */
@media(max-width:1180px) and (min-width:641px){
  nav{padding:16px 20px}
  nav .links{gap:8px}
  nav .links a{padding:7px 10px;font-size:10.5px;letter-spacing:.1em}
}

/* ---------- fursuit: hero ---------- */
.suit-hero{display:grid;grid-template-columns:minmax(230px,.85fr) 1.15fr;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:var(--panel);position:relative}
.suit-hero::before{content:"";position:absolute;top:0;left:0;height:2px;width:100%;
  background:linear-gradient(90deg,var(--vio),var(--cyn),transparent)}
.suit-art{position:relative;display:grid;place-items:center;padding:30px 24px;min-height:320px;
  background:radial-gradient(circle at 50% 42%,rgba(34,211,238,.16),transparent 62%),rgba(7,7,11,.6);
  border-right:1px solid var(--line);overflow:hidden}
.suit-art::before{content:"";position:absolute;inset:0;opacity:.5;
  background:repeating-linear-gradient(90deg,transparent 0 37px,rgba(255,255,255,.045) 37px 38px),
             repeating-linear-gradient(0deg,transparent 0 37px,rgba(255,255,255,.045) 37px 38px)}
.suit-wolf{width:min(230px,78%);height:auto;position:relative;z-index:1;
  filter:drop-shadow(0 14px 40px rgba(34,211,238,.28));animation:suitFloat 8s ease-in-out infinite}
@keyframes suitFloat{50%{transform:translateY(-9px) rotate(-1.2deg)}}
.suit-tag{position:absolute;top:14px;left:16px;z-index:1;font-size:9.5px;letter-spacing:.24em;color:var(--faint)}
.suit-serial{position:absolute;bottom:14px;right:16px;z-index:1;font-size:9.5px;letter-spacing:.18em;color:var(--faint)}
.suit-copy{padding:clamp(22px,3vw,36px);display:flex;flex-direction:column;gap:16px}
.suit-kicker{font-size:10.5px;letter-spacing:.28em;color:var(--cyn)}
.suit-copy h3{font-family:var(--sans);font-weight:700;font-size:clamp(26px,3.6vw,40px);line-height:1.05;letter-spacing:-.02em;text-transform:uppercase}
.suit-copy p{font-size:12.5px;color:var(--dim);line-height:2.05}
.suit-copy p b{color:var(--txt);font-weight:500}
.suit-copy .suit-note{font-size:11px;color:var(--faint);letter-spacing:.04em;border-left:2px solid rgba(139,92,246,.5);padding-left:12px;line-height:1.9}
.suit-chips{display:flex;flex-wrap:wrap;gap:8px}
.suit-chips span{font-size:9.5px;letter-spacing:.16em;color:var(--dim);border:1px solid var(--line);
  border-radius:99px;padding:5px 12px;background:rgba(255,255,255,.02);transition:color .25s,border-color .25s}
.suit-chips span:hover{color:var(--cyn);border-color:rgba(34,211,238,.45)}
.suit-status{display:flex;align-items:center;gap:9px;font-size:10.5px;letter-spacing:.18em;color:var(--dim);
  border-top:1px solid var(--line);padding-top:14px;margin-top:auto}
.suit-status i{width:7px;height:7px;border-radius:99px;background:var(--cyn);box-shadow:0 0 10px var(--cyn);animation:blink 1.6s steps(2) infinite}
.suit-status b{color:var(--txt);font-weight:500}
@media(max-width:760px){.suit-hero{grid-template-columns:1fr}.suit-art{border-right:none;border-bottom:1px solid var(--line);min-height:250px}}

/* ---------- fursuit: tabbed file ---------- */
.suit-file{margin-top:20px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);overflow:hidden}
.suit-tabs{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--line);background:rgba(255,255,255,.015)}
.suit-tabs button{cursor:pointer;background:none;border:0;padding:15px 22px;color:var(--faint);
  font:500 10.5px var(--mono);letter-spacing:.2em;position:relative;transition:color .25s,background .25s}
.suit-tabs button::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;
  background:linear-gradient(90deg,var(--vio),var(--cyn));transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.suit-tabs button:hover{color:var(--txt)}
.suit-tabs button.on{color:var(--txt);background:rgba(139,92,246,.07)}
.suit-tabs button.on::after{transform:none}
.suit-panes{padding:clamp(18px,2.6vw,28px)}
.suit-pane{display:none}
.suit-pane.on{display:block;animation:paneIn .45s var(--ease)}
@keyframes paneIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.spec-row{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:15px 4px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.spec-row:last-child{border-bottom:0}
.spec-row .k{font-size:10px;letter-spacing:.24em;color:var(--faint)}
.spec-row .v{font-family:var(--sans);font-weight:700;font-size:clamp(16px,2.2vw,21px);text-align:right}
.spec-row .v small{display:block;font-family:var(--mono);font-weight:400;font-size:10.5px;letter-spacing:.1em;color:var(--dim);margin-top:4px}
.suit-p{font-size:12.5px;line-height:2.15;color:var(--dim);max-width:74ch}
.suit-p + .suit-p{margin-top:14px}
.suit-p b{color:var(--txt);font-weight:500}
.suit-p a{color:var(--cyn);border-bottom:1px dashed rgba(34,211,238,.4)}
.suit-quote{margin-top:18px;font-family:var(--sans);font-size:clamp(18px,2.6vw,24px);font-weight:700;
  color:transparent;background:linear-gradient(100deg,var(--txt),var(--vio),var(--cyn));-webkit-background-clip:text;background-clip:text}
.rules-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:720px){.rules-grid{grid-template-columns:1fr}}
.rules-col h5{font-size:10px;letter-spacing:.2em;font-weight:500;margin-bottom:12px}
.rules-col h5.ok{color:var(--cyn)}.rules-col h5.ask{color:var(--vio)}.rules-col h5.no{color:var(--pnk)}
.rules-col ul{list-style:none;font-size:12px;color:var(--dim);display:grid;gap:8px}
.rules-col li{padding-left:16px;position:relative}
.rules-col li::before{content:"\203A";position:absolute;left:0;color:var(--faint)}
.rules-note{margin-top:18px;border-left:2px solid rgba(244,114,182,.5);padding-left:12px}

/* ---------- fursuit: strip + cta ---------- */
.suit-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-top:20px}
.suit-frame{margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel);position:relative}
.suit-frame svg{display:block;width:100%;height:150px;padding:12px;
  background:radial-gradient(circle at 50% 45%,rgba(139,92,246,.16),transparent 65%)}
.suit-frame svg path{fill:rgba(139,92,246,.14);stroke:rgba(34,211,238,.55);stroke-width:1.1;stroke-linejoin:round;
  transition:fill .3s,stroke .3s}
.suit-frame figcaption{display:flex;align-items:baseline;gap:8px;padding:10px 14px;border-top:1px solid var(--line);
  font-size:10px;letter-spacing:.18em;color:var(--txt)}
.suit-frame figcaption b{color:var(--cyn);font-weight:500}
.suit-frame figcaption small{color:var(--faint);letter-spacing:.1em;font-size:9.5px;margin-left:auto}
.suit-frame:hover svg path{fill:rgba(34,211,238,.14);stroke:var(--cyn)}
.suit-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:22px}
.suit-cta .btn{padding:13px 20px}
.suit-fine{font-size:10px;letter-spacing:.14em;color:var(--faint)}

/* ---------- repo view options ---------- */
.repo-opts{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 14px}
.ro-label{font-size:10px;letter-spacing:.24em;color:var(--faint);margin-right:2px}
.rv-group{display:flex;gap:6px;border:1px solid var(--line);border-radius:999px;padding:4px;background:rgba(255,255,255,.02)}
.rv-btn{cursor:pointer;border:0;border-radius:999px;padding:7px 15px;background:none;color:var(--dim);
  font:500 10px var(--mono);letter-spacing:.16em;transition:color .25s,background .25s}
.rv-btn:hover{color:var(--txt)}
.rv-btn.on{color:#0a0a0c;background:linear-gradient(100deg,var(--cyn),#a5f3fc);box-shadow:0 4px 16px rgba(34,211,238,.22)}
.ro-count{margin-left:auto;font-size:10px;letter-spacing:.18em;color:var(--faint)}
body.light .rv-btn.on{color:#0a0a0c}

/* grid <-> list */
.repo-grid.mode-list{grid-template-columns:1fr}
.repo-grid.mode-list .repo{flex-direction:row;align-items:center;gap:18px;min-height:0;padding:15px 20px}
.repo-grid.mode-list .repo .rname{min-width:190px}
.repo-grid.mode-list .repo .rtopics{display:none}
.repo-grid.mode-list .repo .rdesc{flex:1}
.repo-grid.mode-list .repo .rmeta{margin:0;padding:0;border:0;flex-wrap:nowrap;justify-content:flex-end}
@media(max-width:720px){
  .repo-grid.mode-list .repo{flex-direction:column;align-items:flex-start;gap:8px}
  .repo-grid.mode-list .repo .rname{min-width:0}
  .repo-grid.mode-list .repo .rmeta{justify-content:flex-start;padding-top:6px;border-top:1px solid var(--line);width:100%}
}

/* ---------- repo stats ---------- */
.repo-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.rs-tile{border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;background:var(--panel);position:relative;overflow:hidden}
.rs-tile::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,var(--vio),transparent)}
.rs-tile .n{display:block;font-family:var(--sans);font-weight:700;font-size:clamp(28px,4vw,38px);line-height:1.1;letter-spacing:-.02em}
.rs-tile .n.sm{font-size:clamp(17px,2.4vw,21px);letter-spacing:0;text-transform:uppercase}
.rs-tile .l{display:block;margin-top:6px;font-size:9.5px;letter-spacing:.22em;color:var(--faint)}
.rs-wide{grid-column:1/-1}
.rs-head{font-size:10px;letter-spacing:.22em;color:var(--faint);margin-bottom:14px}
.rs-lang{display:grid;grid-template-columns:110px 1fr 46px;align-items:center;gap:12px;font-size:11px;color:var(--dim);padding:6px 0}
.rs-lang .bar{height:6px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.rs-lang .bar b{display:block;height:100%;border-radius:99px}
.rs-lang em{font-style:normal;color:var(--faint);text-align:right}
.rs-link{display:inline-flex;gap:8px;margin-top:14px;font-size:10.5px;letter-spacing:.16em;color:var(--cyn)}
body.light .rs-lang .bar{background:rgba(10,10,14,.08)}
body.light .suit-art{background:radial-gradient(circle at 50% 42%,rgba(34,211,238,.18),transparent 62%),#0b0b10}
body.light .suit-tabs{background:rgba(10,10,14,.02)}
body.light .rv-group{background:rgba(10,10,14,.03)}
body.light .suit-hero,body.light .suit-file,body.light .suit-frame,body.light .rs-tile{background:#fff}

@media(prefers-reduced-motion:reduce){
  .suit-wolf{animation:none}
  .suit-pane.on{animation:none}
}

/* ============================================================
   v23 — MONOCHROME REBUILD : hitam & putih, tanpa aksen warna
   ============================================================ */
:root{
  --bg:#050506; --bg2:#0a0a0b; --panel:#0b0b0d;
  --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.22);
  --txt:#f5f5f6; --dim:#a4a4ad; --faint:#6c6c76;
  --vio:#e6e6ea; --cyn:#ffffff; --pnk:#b9b9c2;
  --mono-0:#ffffff; --mono-1:#e6e6ea; --mono-2:#b9b9c2;
  --sans:'Outfit','Space Grotesk',sans-serif; --mono:'JetBrains Mono',monospace;
  --r:16px;
}
body{font-family:var(--sans);font-size:15px;letter-spacing:.005em;
  background-color:var(--bg);
  background-image:radial-gradient(ellipse 65% 45% at 50% -12%,rgba(255,255,255,.12),transparent 62%),
    radial-gradient(ellipse 55% 45% at 105% 108%,rgba(255,255,255,.06),transparent 60%)}
body::before{opacity:.16;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.05) 3px 4px)}
.aurora{display:none}
.milkyway{opacity:.5;filter:grayscale(1)}
.spot{background:radial-gradient(520px circle at var(--mx) var(--my),rgba(255,255,255,.06),transparent 65%)}

/* nav melayang */
nav{top:12px;left:12px;right:12px;max-width:1220px;margin:0 auto;padding:10px 18px;
  border:1px solid var(--line);border-radius:999px;background:rgba(8,8,10,.72);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
nav.scrolled{padding:10px 18px;background:rgba(6,6,8,.88);border-bottom-color:var(--line)}
nav .logo{font-family:var(--sans);font-weight:800;letter-spacing:.16em;font-size:16px}
nav .logo .sq{background:#fff;animation:none}
nav .links{gap:2px}
nav .links a{padding:7px 12px;border-radius:999px;font-size:10px;letter-spacing:.16em;color:var(--dim)}
nav .links a:hover{color:#fff;background:rgba(255,255,255,.07);border-color:transparent}
nav .links a.active{color:#08080a;background:#fff;border-color:#fff;font-weight:500}
#clock{font-size:10px;letter-spacing:.16em;color:var(--faint)}
#clock .dot{background:#fff;box-shadow:0 0 8px rgba(255,255,255,.8)}
@media(max-width:1180px) and (min-width:641px){nav{padding:10px 14px}nav .links a{padding:6px 8px;font-size:9.5px;letter-spacing:.1em}}
@media(max-width:640px){nav{left:8px;right:8px;top:8px;padding:10px 14px}}

/* rail + dots + progress */
.rail-ico{border-color:var(--line);background:rgba(255,255,255,.03);color:var(--dim)}
.rail-ico:hover{color:#fff;border-color:rgba(255,255,255,.5);box-shadow:0 8px 24px rgba(0,0,0,.6)}
.dots a.on i{background:#fff;border-color:#fff;box-shadow:0 0 10px rgba(255,255,255,.7)}
.dots a:hover,.dots a.on{color:#fff}
#progress{background:#fff;box-shadow:0 0 10px rgba(255,255,255,.5)}

/* hero di tengah */
.hero{text-align:center;align-items:center;padding:180px 28px 96px;max-width:1140px}
.hero .meta{justify-content:center;gap:8px;margin-bottom:4px}
.hero .meta>span{border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:9.5px;letter-spacing:.18em;background:rgba(255,255,255,.025)}
.hero .meta .live{color:#fff;border-color:rgba(255,255,255,.4)}
.hero .meta .live::before{background:#fff;box-shadow:0 0 8px #fff}
.hero h1{font-weight:800;letter-spacing:-.05em;line-height:.84;font-size:clamp(62px,16vw,210px);margin:26px 0 10px}
.hero h1 .row:nth-child(2) span{background:linear-gradient(180deg,#fff 20%,#7c7c87 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .sub{justify-content:center;gap:0;font-size:10.5px;letter-spacing:.2em;margin-top:24px}
.hero .sub span{padding:0 14px;border-right:1px solid var(--line)}
.hero .sub span:last-child{border-right:0}
.hero .sub i{display:none}
.hero .term{margin:34px auto 0;max-width:540px;text-align:left;padding:14px 18px;
  border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.03);font-size:12px}
.hero .term .ps1{color:#fff}
.hero .quote{max-width:560px;margin:26px auto 0;border-left:0;border-top:1px solid var(--line);padding:20px 0 0;text-align:center;font-size:13px}
.hero-cta{justify-content:center;margin-top:28px}
.hero::after{content:"";position:absolute;left:50%;top:36%;width:min(760px,90vw);height:420px;transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center,rgba(255,255,255,.10),transparent 65%);pointer-events:none;z-index:0}
.scrollhint{justify-content:center;gap:26px;margin-top:54px;font-size:9.5px;letter-spacing:.26em}

/* ticker */
.ticker{border:0;background:rgba(255,255,255,.03);padding:12px 0}
.ticker-track{font-size:11px;letter-spacing:.24em;color:var(--dim);animation-duration:38s}
.ticker::before{background:linear-gradient(90deg,var(--bg),transparent)}
.ticker::after{background:linear-gradient(-90deg,var(--bg),transparent)}
.ticker-track b,.ticker-track i{color:#fff}

/* section */
section{padding:118px 28px;max-width:1140px}
section + section{border-top:1px solid rgba(255,255,255,.05)}
.sec-label{font-size:9.5px;letter-spacing:.32em;color:var(--faint);margin-bottom:20px}
.sec-num{border:1px solid var(--line);border-radius:999px;padding:2px 9px;margin-right:10px;color:var(--dim);font-size:9px}
.sec-title{font-weight:800;letter-spacing:-.04em;margin-bottom:42px;font-size:clamp(34px,6.6vw,72px);
  background:none;color:var(--txt);-webkit-text-fill-color:var(--txt);-webkit-text-stroke:0}
.sec-title em{color:transparent;-webkit-text-stroke:1px var(--faint)}
.sec-title .glitch::before,.sec-title .glitch::after{color:var(--faint);-webkit-text-fill-color:var(--faint)}
.sec-title,.sec-label::after{animation:none}

/* about */
.row-item .v{font-weight:600}
.bio{border:1px solid var(--line);border-radius:16px;background:var(--panel);background-image:none;padding:26px;font-size:12.5px;line-height:2.05}
.bio .hl{color:#fff;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:1px}
.bio a{color:#fff;border-bottom:1px solid rgba(255,255,255,.4)}
.bio::after{display:none}
.facts,.tool-grid{background:none;border:0;gap:12px;margin-top:30px}
.fact,.tool{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px}
.fact:hover,.tool:hover{background:rgba(255,255,255,.045)}
.fact .n{background:linear-gradient(180deg,#fff,#9d9da7);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
.tool::before{background:#fff}
.tool .tv{font-family:var(--mono);font-size:11.5px;color:var(--dim);letter-spacing:.02em}
.stack-marquee{border-radius:999px;background:rgba(255,255,255,.03)}
.sm-track span:hover{color:#fff}

/* fursuit */
.suit-hero,.suit-file,.suit-frame,.rs-tile,.dc-card,.cform,.gh-wrap,.top-langs,.music-card,.music-quote,.np-card{
  border-radius:18px;background:var(--panel);background-image:none;border-color:var(--line)}
.suit-hero::before{background:#fff;opacity:.8}
.suit-art{background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.14),transparent 62%),#08080a}
.suit-kicker{color:var(--dim)}
.suit-status i{background:#fff;box-shadow:0 0 10px #fff}
.suit-chips span{background:rgba(255,255,255,.03)}
.suit-chips span:hover{color:#fff;border-color:rgba(255,255,255,.45)}
.suit-tabs{background:rgba(255,255,255,.02)}
.suit-tabs button.on{background:rgba(255,255,255,.06)}
.suit-tabs button::after{background:#fff}
.suit-quote{background:linear-gradient(100deg,#fff,#8d8d98);-webkit-background-clip:text;background-clip:text}
.suit-note{border-left-color:rgba(255,255,255,.3)}
.suit-frame svg{background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.10),transparent 65%)}
.suit-frame svg path{fill:rgba(255,255,255,.08);stroke:rgba(255,255,255,.55)}
.suit-frame:hover svg path{fill:rgba(255,255,255,.16);stroke:#fff}
.suit-frame figcaption b{color:#fff}
.rules-col h5.ok,.rules-col h5.ask,.rules-col h5.no{color:var(--dim)}
.rules-note{border-left-color:rgba(255,255,255,.25)}

/* tombol + chip */
.btn{border-radius:999px;font-size:11px;letter-spacing:.16em;padding:14px 24px}
.btn.solid{background:#fff;color:#08080a;border-color:#fff}
.btn.solid::before{display:none}
.btn.solid:hover{background:#dedee3;color:#08080a;border-color:#fff;box-shadow:0 12px 34px rgba(255,255,255,.14)}
.btn.ghost{border-color:var(--line2);color:var(--txt);background:transparent}
.btn.ghost:hover{background:rgba(255,255,255,.07);border-color:#fff;color:#fff}
.chip{border-color:var(--line2);color:var(--dim)}
.chip:hover{color:#fff;border-color:#fff}

/* repositories */
.repo{border:1px solid var(--line);border-radius:16px;background:var(--panel);background-image:none;box-shadow:none}
.repo:hover{border-color:rgba(255,255,255,.34);transform:translateY(-3px);box-shadow:0 18px 44px rgba(0,0,0,.55)}
.repo .rmeta .lang::before{background:#fff}
.repo .rtopics span{background:rgba(255,255,255,.04)}
.repo .ar{background:rgba(255,255,255,.06)}
.repo-bar input,.rv-group{background:rgba(255,255,255,.03)}
.rv-btn.on{background:#fff;color:#08080a;box-shadow:none}
.repo-langs button,.repo-sort button{background:rgba(255,255,255,.03)}
.repo-langs button.on,.repo-sort button.on{color:#08080a;background:#fff;border-color:#fff}
.rs-tile::before{background:linear-gradient(90deg,#fff,transparent);opacity:.6}
.rs-link{color:#fff;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:2px}
.gh-graph i.l1,.gh-foot i.l1{background:rgba(255,255,255,.25)}
.gh-graph i.l2,.gh-foot i.l2{background:rgba(255,255,255,.45)}
.gh-graph i.l3,.gh-foot i.l3{background:rgba(255,255,255,.7)}
.gh-graph i.l4,.gh-foot i.l4{background:#fff;box-shadow:0 0 8px rgba(255,255,255,.5)}
.tl-bar b{background:#fff!important}

/* changelog */
.lg-f.on{background:#fff;color:#08080a;border-color:#fff}
.log-tag{color:var(--dim);border-color:var(--line2);background:rgba(255,255,255,.04)}
.log-item .log-body{background:var(--panel);border-color:var(--line)}
.log-dot{background:#fff;box-shadow:0 0 10px rgba(255,255,255,.6)}

/* discord + music */
.dc-card{border:1px solid var(--line);background:var(--panel);box-shadow:none}
.dc-card::after{display:none}
.dc-dot.online{background:#fff;box-shadow:0 0 10px #fff}
.dc-dot.idle{background:#c4c4cc}.dc-dot.dnd{background:#8a8a94}.dc-dot.offline{background:#5a5a63}
.dc-activity{border-left-color:rgba(255,255,255,.4)}
.np-card{border:1px solid var(--line)}
.np-eq i{background:#fff}
.np-track,.np-fill{background:#fff}
.music-card,.music-quote{border:1px solid var(--line)}
.music-card::before,.music-card::after,.music-orbit,.music-progress span{filter:grayscale(1)}
.music-kicker{color:var(--dim)}

/* sosial + form + footer */
.soc:hover{background:rgba(255,255,255,.04)}
.soc:hover .arrow{color:#fff}
.cform label input,.cform label select,.cform label textarea{background:rgba(255,255,255,.03);border-color:var(--line)}
.cform label input:focus,.cform label select:focus,.cform label textarea:focus{border-color:rgba(255,255,255,.55)}
footer .motto i{background:linear-gradient(100deg,#fff,#8d8d98);-webkit-background-clip:text;background-clip:text}
footer{border-top-color:var(--line)}
#toast{background:rgba(12,12,14,.94);border-color:var(--line2)}
.hud button{background:rgba(255,255,255,.05);border-color:var(--line);border-radius:12px}
.hud button:hover{color:#08080a;background:#fff;border-color:#fff}
#totop{background:rgba(255,255,255,.05);border-color:var(--line)}
#totop:hover{border-color:#fff;color:#fff}

/* light mode = kertas putih, tinta hitam */
body.light{
  --bg:#f6f6f7; --bg2:#efeff1; --panel:#ffffff;
  --line:rgba(10,10,12,.14); --line2:rgba(10,10,12,.30);
  --txt:#0b0b0d; --dim:#4a4a52; --faint:#6f6f79;
  --vio:#111114; --cyn:#000000; --pnk:#55555f;
  --mono-0:#000000; --mono-1:#111114; --mono-2:#55555f;
  background-image:radial-gradient(ellipse 65% 45% at 50% -12%,rgba(0,0,0,.06),transparent 62%),
    radial-gradient(ellipse 55% 45% at 105% 108%,rgba(0,0,0,.04),transparent 60%);
}
body.light::before{opacity:.10;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.04) 3px 4px)}
body.light nav{background:rgba(255,255,255,.82);border-color:rgba(10,10,12,.12)}
body.light nav.scrolled{background:rgba(255,255,255,.94)}
body.light nav .links a.active{background:#0b0b0d;color:#fff;border-color:#0b0b0d}
body.light nav .links a:hover{color:#000;background:rgba(0,0,0,.05)}
body.light .hero h1 .row:nth-child(2) span{background:linear-gradient(180deg,#0b0b0d,#6f6f79);-webkit-background-clip:text;background-clip:text}
body.light .hero::after{background:radial-gradient(ellipse at center,rgba(0,0,0,.06),transparent 65%)}
body.light .hero .term,body.light .ticker{background:rgba(0,0,0,.03)}
body.light .btn.solid{background:#0b0b0d;color:#fff;border-color:#0b0b0d}
body.light .btn.solid:hover{background:#2a2a30;color:#fff}
body.light .btn.ghost:hover{background:rgba(0,0,0,.06);border-color:#0b0b0d;color:#0b0b0d}
body.light .suit-art{background:radial-gradient(circle at 50% 42%,rgba(0,0,0,.10),transparent 62%),#0b0b0d}
body.light .suit-frame svg{background:radial-gradient(circle at 50% 45%,rgba(0,0,0,.06),transparent 65%)}
body.light .suit-frame svg path{fill:rgba(0,0,0,.06);stroke:rgba(0,0,0,.55)}
body.light .suit-frame:hover svg path{fill:rgba(0,0,0,.12);stroke:#000}
body.light .fact:hover,body.light .tool:hover{background:rgba(0,0,0,.04)}
body.light .repo:hover{box-shadow:0 18px 40px rgba(0,0,0,.12)}
body.light .rv-btn.on{background:#0b0b0d;color:#fff}
body.light .repo-langs button.on,body.light .repo-sort button.on{background:#0b0b0d;color:#fff;border-color:#0b0b0d}
body.light .bio .hl,body.light .bio a{color:#000;border-bottom-color:rgba(0,0,0,.4)}
body.light .log-dot{background:#0b0b0d;box-shadow:none}
body.light .dc-dot.online{background:#0b0b0d;box-shadow:none}
body.light .hud button{background:#fff}
body.light .hud button:hover{background:#0b0b0d;color:#fff}
body.light .rs-link{color:#000;border-bottom-color:rgba(0,0,0,.4)}
body.light .soc:hover{background:rgba(0,0,0,.04)}

@media(max-width:640px){
  .hero{padding:132px 18px 76px}
  section{padding:84px 20px}
  .hero .meta>span{font-size:8.5px;padding:4px 9px}
  .sec-title{margin-bottom:34px}
  .hero .sub span{padding:0 9px;border-right:0}
  .hero .sub{font-size:9px}
}

/* fix layout v23 */
.hero .term,.hero .quote{width:100%}
@media(max-width:900px){#clock{display:none}}
/* di mobile: jangan pakai backdrop-filter di nav, biar drawer fixed tetap ke viewport */
@media(max-width:640px){
  nav{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(7,7,9,.96)}
}
@media(max-width:820px) and (min-width:641px){
  nav .links a{padding:6px 6px;font-size:8.5px;letter-spacing:.05em}
  nav .logo{font-size:14px;letter-spacing:.1em}
}

/* ============================================================
   v24 — EDITORIAL REBUILD : serif besar, garis tipis, kotak tegas
   ============================================================ */
:root{--serif:'Instrument Serif',Georgia,'Times New Roman',serif}

/* ---------- nav: bar tipis, bukan pill ---------- */
nav{top:0;left:0;right:0;max-width:none;margin:0;padding:14px 26px;border:0;border-bottom:1px solid var(--line);
  border-radius:0;background:rgba(5,5,6,.84)}
nav.scrolled{padding:12px 26px;background:rgba(5,5,6,.95)}
nav .logo{font-family:var(--serif);font-size:21px;font-weight:400;letter-spacing:0;font-style:italic}
nav .logo .sq{width:6px;height:6px}
nav .links{gap:6px}
nav .links a{border-radius:0;padding:6px 9px;font-size:9.5px;letter-spacing:.18em;color:var(--dim)}
nav .links a:hover{background:none;color:#fff;border-color:transparent}
nav .links a.active{background:none;color:#fff;border-color:transparent;border-bottom:1px solid #fff}
#clock{font-size:9px;letter-spacing:.18em}

/* ---------- hero split ---------- */
.hero{display:block;text-align:left;padding:126px 26px 0;max-width:1240px}
.hero-grid{display:grid;grid-template-columns:1.42fr .58fr;gap:46px;align-items:end}
.hero .meta{justify-content:flex-start;gap:6px 18px;margin:0 0 24px;border-top:1px solid var(--line);padding-top:14px}
.hero .meta>span{border:0;background:none;padding:0;font-size:9px;letter-spacing:.24em;color:var(--faint)}
.hero .meta b{color:var(--txt);font-weight:400}
.hero .meta .live{color:#fff}
.hero h1{font-family:var(--serif);font-weight:400;text-transform:lowercase;letter-spacing:-.015em;
  line-height:.92;font-size:clamp(64px,12.5vw,168px);margin:0}
.hero h1 .row{overflow:hidden;padding-bottom:.04em}
.hero h1 .row:nth-child(2) span{font-style:italic;background:none;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.9);-webkit-text-fill-color:transparent}
.hero .sub{justify-content:flex-start;gap:0;margin-top:26px;padding:12px 0;font-size:9.5px;letter-spacing:.2em;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);width:100%}
.hero .sub span{padding:0 18px 0 0;border-right:0}
.hero .sub i{color:var(--faint);padding:0 14px 0 0;font-style:normal}
.hero .hero-cta{justify-content:flex-start;margin-top:28px;gap:10px}
.hero::after{left:1%;top:62%;width:min(620px,70vw);height:320px;background:radial-gradient(ellipse at center,rgba(255,255,255,.07),transparent 66%)}

/* kartu terminal kanan */
.hero-card{border:1px solid var(--line);background:rgba(255,255,255,.022);padding:20px;position:relative;overflow:hidden;
  will-change:transform;transition:transform .25s var(--ease),border-color .3s}
.hero-card::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 85% 0%,rgba(255,255,255,.08),transparent 62%)}
.hero-card:hover{border-color:rgba(255,255,255,.28)}
.hc-top{display:flex;align-items:center;gap:9px;font-size:8.5px;letter-spacing:.26em;color:var(--faint);
  border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:16px;position:relative}
.hc-dot{width:5px;height:5px;background:#fff;border-radius:50%;animation:pulseDot 2.2s infinite}
@keyframes pulseDot{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(255,255,255,.5)}50%{opacity:.5;box-shadow:0 0 0 5px rgba(255,255,255,0)}}
.hero .term{margin:0;max-width:none;border:0;background:none;padding:0;font-size:11px;min-height:3.6em;line-height:1.75}
.hero .quote{margin:16px 0 0;max-width:none;border:0;padding:0;text-align:left;
  font-family:var(--serif);font-size:18px;line-height:1.3;color:var(--dim)}
.hero .quote em{font-style:italic;color:var(--txt)}
.hc-rows{margin-top:18px;border-top:1px solid var(--line);position:relative}
.hc-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,.06);font-size:8.5px;letter-spacing:.2em;color:var(--faint)}
.hc-row:last-child{border-bottom:0}
.hc-row b{font-family:var(--mono);font-weight:400;font-size:9.5px;letter-spacing:.04em;color:var(--dim);text-transform:none}
.hc-row .uptime-badge img{height:15px;display:block}
.hero-foot{display:flex;justify-content:space-between;gap:16px;margin-top:54px;border-top:1px solid var(--line);
  padding:15px 0 17px;font-size:9px;letter-spacing:.26em;color:var(--faint)}
.hero-foot i{font-style:normal;display:inline-block;animation:bob 1.8s infinite}

/* entrance hero */
@keyframes riseIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
body.ready .hero .meta,body.ready .hero .sub,body.ready .hero .hero-cta,body.ready .hero-card,body.ready .hero-foot{
  animation:riseIn .95s var(--ease) both}
body.ready .hero .meta{animation-delay:.05s}
body.ready .hero .sub{animation-delay:.35s}
body.ready .hero .hero-cta{animation-delay:.45s}
body.ready .hero-card{animation-delay:.3s}
body.ready .hero-foot{animation-delay:.6s}

/* ---------- section: editorial ---------- */
section{padding:104px 26px;max-width:1240px}
section + section{border-top:1px solid var(--line)}
.sec-label{border-top:1px solid var(--line);padding-top:14px;margin-bottom:20px;font-size:9px;letter-spacing:.3em;color:var(--faint)}
.sec-num{border:0;background:none;padding:0;margin-right:10px;font-size:9px;color:var(--txt)}
.sec-title{font-family:var(--serif);font-weight:400;text-transform:none;letter-spacing:-.015em;line-height:1;
  font-size:clamp(42px,7vw,88px);margin-bottom:40px;clip-path:inset(0 100% 0 0);
  transition:clip-path 1.25s var(--ease),opacity .8s}
.sec-title.in{clip-path:inset(0 0 0 0)}
.sec-title em{font-style:italic;color:var(--faint);-webkit-text-stroke:0;-webkit-text-fill-color:var(--faint)}
.sec-title .glitch::before,.sec-title .glitch::after{display:none}

/* about */
.rows{display:grid;grid-template-columns:1fr 1fr;border-top:0;border-left:1px solid var(--line)}
.row-item{flex-direction:column;align-items:flex-start;gap:8px;padding:20px 22px;border-bottom:1px solid var(--line);
  border-right:1px solid var(--line);border-top:0}
.row-item:hover{background:rgba(255,255,255,.035);padding-left:22px}
.row-item .v{font-family:var(--serif);font-weight:400;font-size:clamp(24px,3vw,32px);line-height:1.1;text-align:left}
.row-item .v small{letter-spacing:.06em}
.bio{border-radius:0;border-left:0;border-right:0;padding:24px 0;background:none;border-top:0;border-bottom:1px solid var(--line)}
.bio::before{content:"~/sharp $ cat bio.txt";margin-bottom:12px}
.facts{border:1px solid var(--line);border-radius:0;gap:1px;background:var(--line)}
.fact{border:0;border-radius:0;padding:18px 20px;background:#09090a}
.fact .n{font-family:var(--serif);font-weight:400}
.tools{margin-top:34px}
.tool-grid{border:1px solid var(--line);border-radius:0;gap:1px;background:var(--line);display:grid;grid-template-columns:repeat(4,1fr)}
.tool{border:0;border-radius:0;padding:16px 18px;background:#09090a}
.tool .tv{font-size:10.5px}

/* NOW + Q&A */
.now{margin-top:44px}
.now-head,.qa-head,.sp-head,.tools-head{display:flex;justify-content:space-between;gap:12px;font-size:9px;
  letter-spacing:.26em;color:var(--faint);border-top:1px solid var(--line);padding-top:12px;margin-bottom:16px}
.now-head span{color:var(--txt)}
.now-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.now-card{display:flex;flex-direction:column;gap:7px;padding:20px;background:#09090a;transition:background .35s,transform .35s}
.now-card:hover{background:#121216}
.now-k{font-size:8.5px;letter-spacing:.26em;color:var(--faint)}
.now-card h4{font-family:var(--serif);font-size:23px;font-weight:400;line-height:1.1}
.now-card p{flex:1;font-size:11px;line-height:1.95;color:var(--dim)}
.now-tag{align-self:flex-start;margin-top:4px;font-size:8px;letter-spacing:.22em;border:1px solid var(--line2);padding:3px 8px;color:var(--dim)}
.qa{margin-top:38px}
.qa-list{border-top:1px solid var(--line)}
.qa-item{border-bottom:1px solid var(--line)}
.qa-item summary{display:flex;justify-content:space-between;align-items:center;gap:16px;cursor:pointer;
  padding:15px 2px;font-size:12.5px;letter-spacing:.02em;list-style:none;transition:padding-left .3s,background .3s}
.qa-item summary::-webkit-details-marker{display:none}
.qa-item summary::after{content:"+";font-family:var(--mono);color:var(--faint)}
.qa-item[open] summary::after{content:"\2212";color:#fff}
.qa-item summary:hover{padding-left:14px;background:rgba(255,255,255,.03)}
.qa-item p{font-size:11.5px;line-height:2;color:var(--dim);padding:0 2px 18px;max-width:72ch}
.qa-item[open] p{animation:qaIn .45s var(--ease)}
@keyframes qaIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- fursuit: kotak tegas ---------- */
.suit-hero,.suit-file,.suit-plan,.rs-tile,.dc-card,.cform,.gh-wrap,.top-langs,.music-card,.music-quote,.np-card{border-radius:0}
.suit-hero{border-color:var(--line)}
.suit-art{border-right:1px solid var(--line)}
.suit-kicker{letter-spacing:.24em;font-size:9.5px}
.suit-copy h3{font-family:var(--serif);font-weight:400;font-size:clamp(28px,4vw,44px);text-transform:none;line-height:1}
.suit-tabs button{border-radius:0}
.suit-frame,.suit-strip{display:none}

/* build plan */
.suit-plan{margin-top:20px;padding:22px 22px 18px;border:1px solid var(--line);background:rgba(255,255,255,.015)}
.sp-head{border-top:0;padding-top:0;margin-bottom:14px;align-items:baseline}
.sp-head>span:first-child{color:var(--dim)}
.sp-pct{font-size:9px;letter-spacing:.2em;color:var(--faint)}
.sp-pct b{color:#fff;font-weight:400}
.sp-bar{height:2px;background:rgba(255,255,255,.12);overflow:hidden;margin-bottom:20px}
.sp-bar i{display:block;height:100%;width:0;background:#fff;transition:width 1.6s var(--ease)}
.sp-steps{list-style:none;display:grid;gap:1px;background:var(--line)}
.sp-steps li{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:16px;padding:15px 18px;
  background:#09090a;transition:background .3s}
.sp-steps li:hover{background:#121216}
.sp-n{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--faint)}
.sp-steps b{font-size:12.5px;font-weight:500}
.sp-steps small{display:block;margin-top:3px;font-size:10px;letter-spacing:.04em;color:var(--faint)}
.sp-state{font-size:8px;letter-spacing:.2em;border:1px solid var(--line2);padding:4px 9px;color:var(--dim)}
.sp-steps li.done{background:#101014}
.sp-steps li.done .sp-state{background:#fff;color:#08080a;border-color:#fff}
.sp-steps li.done .sp-n{color:#fff}

/* ---------- kotak & tombol ---------- */
.btn{border-radius:0;padding:13px 22px;font-size:10px;letter-spacing:.2em}
.btn.solid,.btn.solid:hover{border-radius:0}
.chip{border-radius:0;letter-spacing:.18em}
.repo{border-radius:0}
.rv-group{border-radius:0}
.rv-btn{border-radius:0}
.rv-btn.on{border-radius:0}
.repo-langs button,.repo-sort button{border-radius:0}
.badge,.repo .rtopics span{border-radius:0}
.dc-status{border-radius:0}
.stack-marquee{border-radius:0}
.footer .top,footer .top{border-radius:0}

/* ---------- stiker animasi kecil ---------- */
.stagger-item{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--sd,0ms)}
.stagger-item.in{opacity:1;transform:none}

#suit-cursor{position:fixed;left:0;top:0;width:24px;height:24px;border:1px solid rgba(255,255,255,.45);
  border-radius:50%;pointer-events:none;z-index:9998;opacity:0;transition:opacity .3s,width .25s,height .25s,border-color .25s;
  mix-blend-mode:difference}
#suit-cursor.on{opacity:1}
#suit-cursor.hover{width:44px;height:44px;border-color:#fff}
#suit-cursor.down{width:14px;height:14px}
@media(hover:none),(max-width:820px){#suit-cursor{display:none}}

/* ---------- light mode ---------- */
body.light .hero h1 .row:nth-child(2) span{-webkit-text-stroke:1px rgba(10,10,12,.85)}
body.light .hero-card,body.light .fact,body.light .tool,body.light .now-card,body.light .sp-steps li,
body.light .suit-plan{background:#fff}
body.light .now-card:hover,body.light .sp-steps li:hover{background:#f0f0f2}
body.light .row-item:hover{background:rgba(0,0,0,.04)}
body.light .qa-item summary:hover{background:rgba(0,0,0,.04)}
body.light .sp-steps li.done{background:#f0f0f2}
body.light .sp-steps li.done .sp-state{background:#0b0b0d;color:#fff;border-color:#0b0b0d}
body.light .hero-card::before{background:radial-gradient(120% 80% at 85% 0%,rgba(0,0,0,.05),transparent 62%)}
body.light .sec-title em{-webkit-text-fill-color:var(--faint)}
body.light .hero .meta>span{color:var(--faint)}
body.light .hero-foot,body.light .sec-label{border-color:var(--line)}
body.light .bio{border-color:var(--line)}

/* ---------- responsive ---------- */
@media(min-width:981px){
  .hero,section{padding-left:88px;padding-right:88px}
  nav{padding-left:88px;padding-right:88px}
  nav.scrolled{padding-left:88px;padding-right:88px}
}
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:34px;align-items:start}
  .hero h1{font-size:clamp(58px,15vw,120px)}
  .tool-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .rows{grid-template-columns:1fr}
  .now-grid{grid-template-columns:1fr 1fr}
  .fact,.tool{padding:16px}
  .sp-steps li{grid-template-columns:32px 1fr;gap:10px}
  .sp-state{grid-column:2;justify-self:start;margin-top:6px}
}
@media(max-width:560px){
  .now-grid{grid-template-columns:1fr}
  hero .hero-foot{font-size:8px}
  .hero-foot{font-size:8px;letter-spacing:.18em}
  .hero{padding-top:104px}
  section{padding:78px 20px}
  .hero{padding-left:20px;padding-right:20px}
  .hero .sub span{padding-right:10px;font-size:8.5px}
  .hero .sub i{padding-right:8px}
  nav{padding:12px 16px}
  nav.scrolled{padding:11px 16px}
}
@media(prefers-reduced-motion:reduce){
  .sec-title{clip-path:none}
  .stagger-item{opacity:1;transform:none}
  body.ready .hero .meta,body.ready .hero .sub,body.ready .hero .hero-cta,body.ready .hero-card,body.ready .hero-foot{animation:none}
}

/* fallback tanpa JS */
html:not(.js) .sec-title{clip-path:none}

/* kartu terminal: fade saja, biar tilt (inline transform) tetap jalan */
@keyframes fadeOnly{from{opacity:0}to{opacity:1}}
body.ready .hero-card{animation:fadeOnly 1s var(--ease) .3s both}

/* ============================================================
   v25 — PROFESSIONAL POLISH : bersih, tenang, seperti situs besar
   ============================================================ */
:root{
  --sans:'Inter','Outfit',system-ui,sans-serif;
  --serif:'Inter',Georgia,serif;
  --r:12px;
  --bg:#08080a; --bg2:#0b0b0e; --panel:#101013;
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.20);
  --txt:#f4f4f6; --dim:#a1a1ab; --faint:#6e6e79;
}
body{font-family:var(--sans);font-size:15px;line-height:1.6;letter-spacing:-.003em}

/* nav */
nav{padding:12px 26px;background:rgba(8,8,10,.72);border-bottom:1px solid rgba(255,255,255,.07)}
nav.scrolled{padding:10px 26px;background:rgba(8,8,10,.92)}
nav .logo{font-family:var(--sans);font-style:normal;font-size:15px;font-weight:600;letter-spacing:.1em}
nav .links{gap:2px}
nav .links a{font-size:10px;letter-spacing:.13em;padding:7px 11px;border-radius:7px;border:0;color:var(--faint)}
nav .links a:hover{background:rgba(255,255,255,.06);color:var(--txt);border:0}
nav .links a.active{background:rgba(255,255,255,.10);color:var(--txt);border:0}
#clock{display:flex;align-items:center;gap:7px;padding:5px 10px;border:1px solid var(--line);
  border-radius:999px;font-size:9px;letter-spacing:.1em;color:var(--dim);margin-right:10px}
#clock .dot{width:5px;height:5px;background:#fff;box-shadow:0 0 8px rgba(255,255,255,.9);border-radius:50%}
#clock .clock-tz{font-size:8.5px;letter-spacing:.14em;color:var(--faint)}
#clock b{font-family:var(--mono);font-weight:400;font-size:9.5px;letter-spacing:.06em;color:var(--txt)}
@media(max-width:900px){#clock{display:none}}

/* hero */
.hero{padding:126px 26px 0;max-width:1160px}
.hero-grid{grid-template-columns:1.3fr .7fr;gap:54px;align-items:start}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:24px;padding:5px 11px;
  border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.025);
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.hero-eyebrow i{width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 8px rgba(255,255,255,.9);animation:pulseDot 2.4s infinite}
.hero h1{font-family:var(--sans);font-weight:600;text-transform:none;font-size:clamp(54px,8.4vw,100px);
  line-height:1;letter-spacing:-.045em;margin:0}
.hero h1 .row:nth-child(2) span{color:var(--faint);background:none;-webkit-text-stroke:0;
  -webkit-text-fill-color:var(--faint);font-style:normal}
.hero-lede{margin-top:20px;max-width:56ch;font-size:15px;line-height:1.75;color:var(--dim);letter-spacing:0}
.hero .hero-cta{justify-content:flex-start;margin-top:26px;gap:10px}
.hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:36px;
  padding-top:18px;border-top:1px solid var(--line)}
.hs-k{display:block;margin-bottom:5px;font-size:8px;letter-spacing:.2em;color:var(--faint)}
.hero-stats b{font-size:12.5px;font-weight:500;color:var(--txt)}
.hero .hero-quote{margin-top:24px;font-family:var(--sans);font-size:12.5px;line-height:1.7;
  color:var(--faint);border:0;padding:0;text-align:left;max-width:60ch}
.hero .hero-quote em{font-style:normal;color:var(--dim)}
.hero-foot{margin-top:44px;padding:14px 0 16px}
.hero::after{display:none}

/* kartu profil */
.hero-side{margin-top:4px}
.hero-card{background:#0c0c0f;border:1px solid var(--line);border-radius:14px;padding:20px;
  transition:border-color .3s}
.hero-card:hover{border-color:var(--line2)}
.pc-top{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.pc-mark{width:42px;height:42px;border-radius:11px;border:1px solid var(--line2);display:grid;place-items:center;
  font-size:17px;font-weight:600;background:rgba(255,255,255,.05)}
.pc-mark span{font-weight:400;color:var(--faint)}
.pc-id b{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em}
.pc-id small{display:block;font-size:10.5px;color:var(--faint);letter-spacing:.02em}
.pc-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid var(--line);
  border-radius:999px;font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.pc-live i{width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 7px rgba(255,255,255,.9)}
.terminal-note{display:flex;align-items:center;gap:6px;min-height:38px;margin-bottom:16px;padding:9px 12px;
  border:1px solid var(--line);border-radius:9px;background:rgba(0,0,0,.4);
  font-family:var(--mono);font-size:10.5px;color:var(--dim);overflow:hidden}
.terminal-note .ps1{color:var(--faint);white-space:nowrap}
.terminal-note .cur{display:inline-block;width:6px;height:12px;background:#fff;animation:blink 1s steps(2) infinite}
.hc-rows{border-top:1px solid var(--line)}
.hc-row{padding:9px 0;font-size:8px;letter-spacing:.18em;border-bottom:1px solid rgba(255,255,255,.05)}
.hc-row:last-child{border-bottom:0}
.hc-row b{font-family:var(--sans);font-weight:500;font-size:10.5px;letter-spacing:0;color:var(--txt);text-transform:none}
.pc-links{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.pc-links a{padding:5px 9px;border:1px solid var(--line);border-radius:7px;font-size:9.5px;color:var(--dim);transition:.2s}
.pc-links a:hover{background:#fff;color:#08080a;border-color:#fff}

/* section */
section{padding:96px 26px;max-width:1160px}
.sec-label{border:0;padding:0;margin-bottom:12px;font-size:9px;letter-spacing:.22em;color:var(--faint)}
.sec-num{border:1px solid var(--line);border-radius:999px;padding:2px 8px;margin-right:8px;font-size:8.5px;color:var(--faint)}
.sec-title{font-family:var(--sans);font-weight:600;text-transform:none;font-size:clamp(30px,4.4vw,46px);
  line-height:1.1;letter-spacing:-.035em;margin-bottom:28px;clip-path:none}
.sec-title em{font-style:normal;font-weight:500;color:var(--faint);-webkit-text-fill-color:var(--faint)}

/* about */
.rows{border-left:1px solid var(--line);border-radius:0}
.row-item{padding:16px 18px;gap:6px}
.row-item .k{font-size:8.5px;letter-spacing:.18em}
.row-item .v{font-family:var(--sans);font-weight:500;font-size:17px;letter-spacing:-.01em}
.row-item .v small{font-size:10px;letter-spacing:.02em}
.bio{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:22px;
  font-size:13px;line-height:1.8;letter-spacing:0}
.bio::before{font-size:9.5px;letter-spacing:.16em;margin-bottom:10px}
.facts{border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.fact{background:var(--panel);padding:18px 18px}
.fact .n{font-family:var(--sans);font-weight:600;font-size:28px;letter-spacing:-.03em}
.fact .l{font-size:8.5px;letter-spacing:.16em}
.tool-grid{border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.tool{background:var(--panel);padding:14px 16px}
.tool .tk{font-size:8.5px;letter-spacing:.18em}
.tool .tv{font-family:var(--sans);font-size:11.5px}
.tools-head{font-size:9px;letter-spacing:.2em;border:0;padding:0;margin-bottom:12px}
.stack-marquee{border-radius:999px;margin-top:28px}

/* now + q&a */
.now{margin-top:40px}
.now-head,.qa-head{font-size:9px;letter-spacing:.2em;border:0;padding:0;margin-bottom:12px}
.now-grid{border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.now-card{padding:18px;background:var(--panel)}
.now-card h4{font-family:var(--sans);font-weight:600;font-size:14.5px;letter-spacing:-.01em;line-height:1.3}
.now-card p{font-size:11.5px;line-height:1.7;color:var(--dim)}
.now-k{font-size:8px;letter-spacing:.2em}
.now-tag{border-radius:999px;font-size:8px}
.qa{margin-top:36px}
.qa-list{border-top:1px solid var(--line)}
.qa-item summary{padding:14px 2px;font-size:13px;letter-spacing:0;font-weight:500}
.qa-item p{font-size:12px;line-height:1.8;letter-spacing:0}

/* fursuit */
.suit-hero,.suit-file,.suit-plan,.rs-tile,.dc-card,.cform,.gh-wrap,.top-langs,.music-card,.music-quote,.np-card,
.repo,.pal-box,.help-box,.t-box{border-radius:12px}
.suit-copy h3{font-family:var(--sans);font-weight:600;font-size:clamp(22px,2.6vw,28px);line-height:1.2;
  text-transform:none;letter-spacing:-.02em}
.suit-copy .suit-note,.suit-p{font-size:12.5px;line-height:1.8;letter-spacing:0}
.suit-kicker{font-size:8.5px;letter-spacing:.2em}
.suit-tabs button{padding:13px 18px;font-size:9.5px;letter-spacing:.16em}
.suit-plan{padding:20px;background:var(--panel)}
.sp-head{font-size:9px;letter-spacing:.2em}
.sp-steps li{padding:14px 16px;background:transparent}
.sp-steps li:hover{background:rgba(255,255,255,.035)}
.sp-steps b{font-size:12.5px;font-weight:500}
.sp-steps small{font-size:10px;color:var(--faint)}
.sp-state{border-radius:999px;font-size:8px}
.sp-steps li.done{background:rgba(255,255,255,.045)}
.btn{border-radius:9px;padding:12px 20px;font-size:9.5px;letter-spacing:.14em;font-weight:500}
.chip{border-radius:9px}
.badge,.suit-chips span{border-radius:999px}
.rv-group,.rv-btn,.repo-langs button,.repo-sort button{border-radius:8px}
.rv-group{border-radius:10px}

/* repos */
.repo{background:var(--panel);border:1px solid var(--line);padding:20px}
.repo:hover{border-color:var(--line2);transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.4)}
.repo .rname{font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.repo .rdesc{font-size:12px;line-height:1.7}
.rs-tile{background:var(--panel);border:1px solid var(--line)}
.rs-tile .n{font-size:26px;font-weight:600;letter-spacing:-.03em}
.gh-wrap,.top-langs{background:var(--panel);border:1px solid var(--line)}

/* social + music */
.dc-card{background:var(--panel);border:1px solid var(--line)}
.dc-id b{font-size:16px}
.music-card,.music-quote{background:var(--panel);border:1px solid var(--line)}
.music-copy h3{font-weight:600;letter-spacing:-.02em}
.cform{border:1px solid var(--line);background:var(--panel)}

/* footer */
footer{margin-top:0;padding:56px 26px 26px;text-align:left;border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:40px;max-width:1160px;margin:0 auto;
  padding-bottom:34px;border-bottom:1px solid var(--line)}
.foot-logo{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;letter-spacing:.1em}
.foot-logo .sq{width:7px;height:7px;background:#fff}
.foot-brand p{max-width:34ch;margin:12px 0 14px;font-size:12px;line-height:1.75;color:var(--faint)}
.foot-badge{display:inline-flex;align-items:center;gap:7px;padding:4px 9px;border:1px solid var(--line);
  border-radius:999px;font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.foot-badge i{width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 7px rgba(255,255,255,.9)}
.foot-col h5{margin-bottom:10px;font-size:8.5px;font-weight:500;letter-spacing:.2em;color:var(--faint)}
.foot-col a{display:block;padding:4px 0;border:0;font-size:12px;color:var(--dim);transition:color .2s}
.foot-col a:hover{color:#fff}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 24px;
  max-width:1160px;margin:0 auto;padding-top:18px;font-size:9px;letter-spacing:.1em;color:var(--faint)}
.foot-bottom .top{padding:0;border:0;font-size:9px;letter-spacing:.12em;color:var(--dim)}
.foot-bottom .top:hover{color:#fff}

/* light mode */
body.light nav{background:rgba(255,255,255,.82);border-bottom-color:rgba(10,10,12,.08)}
body.light nav.scrolled{background:rgba(255,255,255,.94)}
body.light nav .links a.active{background:rgba(10,10,12,.07);color:#0b0b0d}
body.light nav .links a:hover{background:rgba(10,10,12,.05)}
body.light #clock{background:#fff}
body.light .hero-card,body.light .terminal-note,body.light .fact,body.light .tool,body.light .now-card,
body.light .repo,body.light .rs-tile,body.light .gh-wrap,body.light .top-langs,body.light .dc-card,
body.light .music-card,body.light .music-quote,body.light .cform,body.light .bio,body.light .suit-plan{
  background:#fff;border-color:rgba(10,10,12,.10)}
body.light .terminal-note{background:#f4f4f5}
body.light .pc-mark{background:rgba(10,10,12,.04)}
body.light .pc-links a:hover{background:#0b0b0d;color:#fff;border-color:#0b0b0d}
body.light .sp-steps li.done{background:rgba(10,10,12,.04)}
body.light .foot-logo .sq,body.light .foot-badge i{background:#0b0b0d;box-shadow:none}
body.light .hero-eyebrow i,body.light .pc-live i{background:#0b0b0d;box-shadow:none}
body.light .terminal-note .cur{background:#0b0b0d}
body.light .hero h1 .row:nth-child(2) span{color:var(--faint);-webkit-text-fill-color:var(--faint)}

@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hero-side{max-width:460px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .hero{padding-top:96px}
  .hero h1{font-size:clamp(46px,14vw,72px)}
  .hero-stats{grid-template-columns:1fr;gap:12px}
  .hero-lede{font-size:14px}
  .foot-grid{grid-template-columns:1fr;gap:28px}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:8px}
  section{padding:72px 20px}
  .hero{padding-left:20px;padding-right:20px}
}

/* entrance isi hero baru */
body.ready .hero-eyebrow,body.ready .hero-lede,body.ready .hero-stats,body.ready .hero-quote{
  animation:riseIn .9s var(--ease) both}
body.ready .hero-eyebrow{animation-delay:.08s}
body.ready .hero-lede{animation-delay:.55s}
body.ready .hero-stats{animation-delay:.65s}
body.ready .hero-quote{animation-delay:.78s}

/* ============================================================
   v26 — APP SHELL: HOME SCREEN, SIDEBAR INDEX, 3-DOT MENU
   ============================================================ */
:root{--side:226px;--bar:56px}
body{padding-top:var(--bar)}
body.menu-open{overflow:hidden}
main{position:relative;z-index:1;padding-left:var(--side)}

/* ---------- top bar ---------- */
#nav{
  height:var(--bar);padding:0 20px;display:flex;align-items:center;gap:16px;
  border-bottom:1px solid var(--line,rgba(255,255,255,.14));
  background:rgba(8,8,10,.88);backdrop-filter:blur(20px) saturate(1.1);
  transform:none!important;
}
#nav .links,#nav #burger{display:none!important}
#nav .logo{font-size:11px;letter-spacing:.22em;color:#fff}
#nav .logo .sq{background:#fff;box-shadow:none}
#clock{margin-left:auto;margin-right:2px}
.menu-btn{
  width:40px;height:40px;flex:0 0 40px;border:1px solid var(--line,rgba(255,255,255,.2));
  border-radius:11px;background:transparent;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:4px;cursor:pointer;transition:background .25s,border-color .25s,transform .25s;
}
.menu-btn i{width:4px;height:4px;border-radius:50%;background:#fff;transition:background .25s,transform .25s}
.menu-btn:hover{background:#fff;border-color:#fff;transform:translateY(-1px)}
.menu-btn:hover i{background:var(--ink,#08080a)}
.menu-btn[aria-expanded="true"]{background:#fff;border-color:#fff}
.menu-btn[aria-expanded="true"] i{background:var(--ink,#08080a)}

/* ---------- sidebar index ---------- */
.side-index{
  position:fixed;left:0;top:var(--bar);bottom:0;width:var(--side);z-index:700;
  display:flex;flex-direction:column;gap:14px;padding:18px 14px 16px;
  border-right:1px solid var(--line,rgba(255,255,255,.14));
  background:rgba(9,9,11,.72);backdrop-filter:blur(16px);
}
.si-top{display:flex;flex-direction:column;gap:5px;padding:4px 8px 14px;border-bottom:1px solid var(--line,rgba(255,255,255,.12))}
.si-logo{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.14em;color:#fff}
.si-logo .sq{width:6px;height:6px;background:#fff;display:block}
.si-meta{font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint,rgba(255,255,255,.4))}
.si-list{display:flex;flex-direction:column;gap:1px;flex:1}
.si-list a{
  display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;
  font-size:9.5px;letter-spacing:.18em;color:var(--faint,rgba(255,255,255,.45));
  transition:color .2s,background .2s,padding .2s;
}
.si-list a span{font-family:var(--mono,monospace);font-size:8.5px;opacity:.7}
.si-list a:hover{color:#fff;background:rgba(255,255,255,.06);padding-left:14px}
.si-list a.on{color:var(--ink,#08080a);background:#fff;font-weight:500}
.si-list a.on span{opacity:.55}
.si-foot{display:flex;flex-direction:column;gap:5px;padding:12px 8px 0;border-top:1px solid var(--line,rgba(255,255,255,.12));font-size:8px;letter-spacing:.16em;color:var(--faint,rgba(255,255,255,.4))}
.si-foot b{color:#fff;font-family:var(--mono,monospace);font-weight:400;letter-spacing:.06em}

/* ---------- fullscreen page menu ---------- */
.page-menu{
  position:fixed;inset:0;z-index:9000;display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--bar) + 18px) clamp(18px,5vw,60px) 24px;
  background:rgba(6,6,7,.97);backdrop-filter:blur(20px);
  opacity:0;visibility:hidden;transition:opacity .32s ease,visibility .32s ease;overflow:auto;
}
.page-menu.open{opacity:1;visibility:visible}
.pm-head{position:fixed;top:0;left:0;right:0;height:var(--bar);display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid var(--line,rgba(255,255,255,.14));font-size:8.5px;letter-spacing:.22em;color:var(--faint,rgba(255,255,255,.45));background:rgba(6,6,7,.9)}
.pm-close{border:1px solid var(--line,rgba(255,255,255,.2));background:transparent;color:#fff;font:inherit;letter-spacing:.16em;padding:8px 12px;border-radius:8px;cursor:pointer;transition:.2s}
.pm-close:hover{background:#fff;color:var(--ink,#08080a);border-color:#fff}
.pm-list{width:100%;max-width:820px;margin:0 auto;display:flex;flex-direction:column;border-top:1px solid var(--line,rgba(255,255,255,.14))}
.pm-list a{
  display:flex;align-items:center;gap:clamp(12px,2vw,22px);padding:12px 8px;
  border-bottom:1px solid var(--line,rgba(255,255,255,.12));color:var(--dim,rgba(255,255,255,.62));
  opacity:0;transform:translateY(12px);transition:background .22s,color .22s,padding .22s;
}
.page-menu.open .pm-list a{animation:menuIn .5s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(.045s * var(--i) + .05s)}
.pm-list a:hover{background:#fff;color:var(--ink,#08080a);padding-left:20px}
.pm-n{font-family:var(--mono,monospace);font-size:9.5px;opacity:.6;min-width:24px}
.pm-t{flex:1;font-size:clamp(20px,3.6vw,34px);font-weight:500;letter-spacing:-.03em;line-height:1.1;color:#fff}
.pm-list a:hover .pm-t{color:var(--ink,#08080a)}
.pm-t small{display:block;margin-top:3px;font-size:9px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--faint,rgba(255,255,255,.4))}
.pm-list a:hover .pm-t small{color:rgba(0,0,0,.55)}
.pm-a{font-size:15px;opacity:.6;transition:transform .22s}
.pm-list a:hover .pm-a{transform:translate(3px,-3px);opacity:1}
.pm-foot{max-width:820px;margin:16px auto 0;width:100%;display:flex;justify-content:space-between;gap:14px;font-size:8px;letter-spacing:.2em;color:var(--faint,rgba(255,255,255,.38));text-transform:uppercase}

/* ---------- background + transition ---------- */
.bg-grid{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background-image:linear-gradient(to right,rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:76px 76px;
  -webkit-mask-image:radial-gradient(circle at 50% 15%,#000 0%,transparent 76%);
  mask-image:radial-gradient(circle at 50% 15%,#000 0%,transparent 76%);
  animation:gridDrift 46s linear infinite;
}
#route-bar{position:fixed;top:0;left:0;height:2px;width:0;background:#fff;z-index:9999;opacity:0;pointer-events:none}
#route-bar.run{animation:routeBar .7s cubic-bezier(.2,.8,.2,1)}

/* ---------- pages ---------- */
.view{
  display:none;position:relative;max-width:1140px;margin:0 auto;
  padding:clamp(26px,4.6vh,54px) clamp(20px,4vw,54px) 56px;
  min-height:calc(100vh - var(--bar));animation:viewIn .55s cubic-bezier(.2,.8,.2,1) both;
}
.view.active{display:block}
.view::before{
  content:attr(data-page);position:absolute;top:10px;right:clamp(14px,3.4vw,48px);z-index:0;
  font-family:var(--mono,monospace);font-size:clamp(74px,13vw,168px);line-height:1;letter-spacing:-.08em;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.10);pointer-events:none;
}
.view > *{position:relative;z-index:1}
#home,#about,#fursuit,#repos,#social,#music,#contact{padding:clamp(26px,4.4vh,52px) clamp(20px,4vw,54px) 56px;min-height:calc(100vh - var(--bar))}
.view .sec-title{font-family:var(--sans,Inter,system-ui,sans-serif);font-size:clamp(28px,4.2vw,46px);letter-spacing:-.045em;line-height:1.05}
.view .sec-label{letter-spacing:.24em}
.view > .sec-title,.view .sec-title::after{transition:opacity .5s,transform .5s}
.view-next{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;
  margin-top:54px;padding:20px 4px 0;border-top:1px solid var(--line,rgba(255,255,255,.16));
  color:var(--faint,rgba(255,255,255,.45));transition:padding .25s,color .25s;
}
.view-next span{font-size:8px;letter-spacing:.22em;text-transform:uppercase}
.view-next b{font-size:clamp(17px,2.3vw,23px);font-weight:500;letter-spacing:-.02em;color:#fff}
.view-next small{grid-column:2;font-size:9px;letter-spacing:.14em;text-transform:uppercase;opacity:.55;margin-top:-8px}
.view-next::after{content:"→";font-size:18px;color:#fff;transition:transform .25s}
.view-next:hover{padding-left:14px}
.view-next:hover::after{transform:translateX(5px)}

/* ---------- home screen ---------- */
#home{background:none!important;border:0}
#home .hero-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(290px,.7fr);gap:clamp(26px,4.4vw,58px);align-items:start}
#home h1{font-size:clamp(54px,8.6vw,118px);line-height:.9;letter-spacing:-.055em;margin:14px 0 18px}
#home h1 .grad{color:#fff;-webkit-text-fill-color:#fff;background:none}
#home .hero-lede{max-width:48ch;font-size:14px;line-height:1.72;color:var(--dim,rgba(255,255,255,.62))}
#home .hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
#home .hero-foot{display:none}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint,rgba(255,255,255,.5));border:1px solid var(--line,rgba(255,255,255,.16));border-radius:999px;padding:6px 11px}
.hero-eyebrow i{width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.5);animation:ping 2.4s ease-out infinite}
.home-menu{display:flex;flex-direction:column;margin-top:34px;border-top:1px solid var(--line,rgba(255,255,255,.16))}
.hm-row{
  display:flex;align-items:center;gap:clamp(12px,2vw,20px);padding:13px 6px;
  border-bottom:1px solid var(--line,rgba(255,255,255,.13));color:var(--dim,rgba(255,255,255,.6));
  transition:background .22s,color .22s,padding .22s;
  opacity:0;transform:translateY(10px);
}
body.ready .hm-row{animation:riseIn .6s cubic-bezier(.2,.8,.2,1) forwards}
body.ready .hm-row:nth-child(1){animation-delay:.50s}
body.ready .hm-row:nth-child(2){animation-delay:.56s}
body.ready .hm-row:nth-child(3){animation-delay:.62s}
body.ready .hm-row:nth-child(4){animation-delay:.68s}
body.ready .hm-row:nth-child(5){animation-delay:.74s}
body.ready .hm-row:nth-child(6){animation-delay:.80s}
.hm-row:hover{background:#fff;color:var(--ink,#08080a);padding-left:16px}
.hm-n{font-family:var(--mono,monospace);font-size:9px;opacity:.6;min-width:22px}
.hm-t{flex:1;font-size:clamp(16px,2.1vw,21px);font-weight:500;letter-spacing:-.025em;line-height:1.15;color:#fff}
.hm-row:hover .hm-t{color:var(--ink,#08080a)}
.hm-t small{display:block;margin-top:3px;font-size:8.5px;font-weight:400;letter-spacing:.13em;text-transform:uppercase;color:var(--faint,rgba(255,255,255,.42))}
.hm-row:hover .hm-t small{color:rgba(0,0,0,.55)}
.hm-a{font-size:14px;opacity:.5;transition:transform .22s,opacity .22s}
.hm-row:hover .hm-a{transform:translate(3px,-3px);opacity:1}
#home .hero-quote{margin-top:26px;border:0;padding:0;font-size:11px;color:var(--faint,rgba(255,255,255,.42))}

/* ---------- ticker band ---------- */
main > .ticker{margin-left:calc(-1 * var(--side));border-top:0;border-bottom:1px solid var(--line,rgba(255,255,255,.14));background:rgba(255,255,255,.02)}

/* ---------- animasi ---------- */
@keyframes viewIn{from{opacity:0;transform:translateY(16px);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
@keyframes menuIn{to{opacity:1;transform:none}}
@keyframes routeBar{0%{width:0;opacity:1}65%{width:100%;opacity:1}100%{width:100%;opacity:0}}
@keyframes gridDrift{to{background-position:76px 76px}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(255,255,255,.45)}70%{box-shadow:0 0 0 7px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}

/* ---------- responsive ---------- */
@media (max-width:1023px){
  main{padding-left:0}
  .side-index{display:none}
  main > .ticker{margin-left:0}
  #home .hero-grid{grid-template-columns:1fr}
  #home .hero-card,#home .profile-card{max-width:520px}
}
@media (max-width:640px){
  :root{--bar:52px}
  .view{padding-left:18px;padding-right:18px}
  #home h1{font-size:clamp(46px,13vw,74px)}
  .pm-t{font-size:20px}
  .view::before{font-size:72px;top:16px;right:18px}
  .pm-foot{flex-direction:column;gap:6px}
}
@media (prefers-reduced-motion:reduce){
  .view,.hm-row,.pm-list a,.bg-grid,#route-bar.run{animation:none!important}
  .hm-row{opacity:1;transform:none}
}

/* v26 — kunci shell (menimpa nav mengambang + ornamen lama) */
#nav{top:0!important;left:0!important;right:0!important;max-width:none!important;margin:0!important;border-radius:0!important;z-index:800;padding:0 20px!important}
#nav.scrolled{top:0!important;transform:none!important}
.dots,.rail,#progress{display:none!important}
#clock{position:static!important;flex:0 0 auto}
.side-index{top:var(--bar)}

/* v26 FIX — <nav> global jangan mengenai menu di dalam halaman */
.home-menu,.si-list,.pm-list{
  position:static!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;
  height:auto!important;padding:0!important;margin:0;background:none!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;transform:none!important;
  z-index:auto!important;box-shadow:none!important;border-bottom:0;
}
.home-menu{display:flex;flex-direction:column}
.si-list{display:flex;flex-direction:column;flex:1}
.pm-list{display:flex;flex-direction:column;max-width:820px;margin:0 auto;width:100%;border-top:1px solid var(--line,rgba(255,255,255,.14))}

/* monokrom: buang sisa aksen ungu/cyan */
.spot{background:radial-gradient(560px circle at var(--mx) var(--my),rgba(255,255,255,.05),transparent 66%)!important}
.aurora i{background:#fff!important;opacity:.05!important;filter:none!important}
::-webkit-scrollbar-thumb{background:#2b2b33!important;border:2px solid var(--bg,#08080a)!important}
::-webkit-scrollbar-thumb:hover{background:#fff!important}
html{scrollbar-color:#2b2b33 #08080a}

/* HUD lama tidak perlu di layar baru */
.hud{display:none!important}
#suit-cursor{display:none!important}

/* v26 FIX 2 — row menu full-width + eyebrow rata kiri */
.home-menu{align-items:stretch!important;width:100%}
.hero-main{align-items:flex-start}
.hero-eyebrow{align-self:flex-start;width:auto}
@media(max-width:420px){
  #home h1{font-size:clamp(44px,15vw,64px)}
  #home .hero-cta{flex-direction:column;align-items:stretch}
  #home .hero-cta .btn{width:100%;justify-content:center}
  .hm-t{font-size:17px}
}

/* monokrom: warna bahasa repo jadi abu */
.tl-bar b,.rs-lang .bar b,.lang-dot,.tl-k i{filter:grayscale(1)!important;background:#fff!important}

/* v26 FIX 3 — monokrom penuh di latar & judul section */
body{
  background-image:
    radial-gradient(ellipse 70% 45% at 85% -10%, rgba(255,255,255,.055), transparent),
    radial-gradient(ellipse 55% 35% at 5% 105%, rgba(255,255,255,.035), transparent)!important;
}
.view .sec-title{
  background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;
  -webkit-text-fill-color:currentColor!important;color:#fff!important;animation:none!important;
}
.view .sec-title em{background:none!important;color:var(--faint,#6e6e79)!important;-webkit-text-fill-color:var(--faint,#6e6e79)!important;-webkit-text-stroke:0!important}
.sec-label::after{background:linear-gradient(90deg,rgba(255,255,255,.22),transparent)!important}
.hero .quote em,.hero-quote em{color:#fff!important}

/* v26 FIX 4 — baris menu overlay full-width */
.pm-list{align-items:stretch!important}
.pm-list a{width:100%}

/* ring kursor lama bikin noise di desain baru */
.cur-ring,.cur-dot{display:none!important}