:root{--bg:#050608;--fg:#f4f5f7;--mut:#8b93a1;--card:#10131a;--line:#222836;--acc:#3b9dff;--acc2:#b6ff3b;--accfg:#000;--bg-grid:rgba(255,255,255,.04);--bg-dots:rgba(255,255,255,.07);--aurora-1:rgba(10,102,194,.32);--aurora-2:rgba(109,40,217,.28);--aurora-3:rgba(182,255,59,.16);color-scheme:dark;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
:root[data-theme="light"]{--bg:#f3f1ea;--fg:#0a0b0d;--mut:#5d6472;--card:#fff;--line:#d8d5cb;--acc:#0a5fd6;--acc2:#0a0b0d;--accfg:#fff;--bg-grid:rgba(0,0,0,.045);--bg-dots:rgba(0,0,0,.07);--aurora-1:rgba(59,157,255,.16);--aurora-2:rgba(147,51,234,.12);--aurora-3:rgba(245,158,11,.14);color-scheme:light}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--fg);font:500 16px/1.5 "Inter Tight","Helvetica Neue",Arial,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.w{padding:0 clamp(16px,3vw,40px);max-width:1680px;margin:0 auto}
.big{font-weight:900;text-transform:uppercase;letter-spacing:-.055em;line-height:.82;margin:0}
.h1{font-size:clamp(3.4rem,17.5vw,19rem)}
.h2{font-size:clamp(2.8rem,11vw,10rem)}
.out{color:transparent;-webkit-text-stroke:2px var(--fg)}
.acc{color:var(--acc2)}
p{color:var(--mut);margin:0}
section{padding:clamp(60px,10vw,140px) 0}
.tag{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);font-weight:800}
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 30px;border-radius:999px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;border:2px solid var(--fg);transition:.3s}
.btn.p{background:var(--fg);color:var(--bg)}
.btn:hover{background:var(--acc2);border-color:var(--acc2);color:var(--accfg);transform:translateY(-3px) rotate(-1.5deg)}
#ld{position:fixed;inset:0;z-index:99;background:#000;color:#fff;display:none;flex-direction:column;justify-content:space-between;padding:clamp(16px,3vw,40px);transition:transform 1s cubic-bezier(.77,0,.18,1)}
.js #ld{display:flex}
#ld.out2{transform:translateY(-101%)}
#ld .big{font-size:clamp(3rem,14vw,14rem)}
#ldn{font-weight:900;font-size:clamp(3rem,14vw,14rem);align-self:flex-end;line-height:.8;letter-spacing:-.06em}
#cv{position:fixed;inset:0;z-index:90;background:var(--acc2);transform:translateY(101%);pointer-events:none;transition:transform .55s cubic-bezier(.77,0,.18,1)}
#cv.in{transform:none}#cv.out{transform:translateY(-101%)}
.bar{position:fixed;top:0;left:0;height:4px;width:0;background:var(--acc2);z-index:95}
.glow{position:fixed;left:0;top:0;width:660px;height:660px;margin:-330px 0 0 -330px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--acc2) 20%,var(--acc)) 0%,color-mix(in srgb,var(--acc) 45%,transparent) 32%,transparent 70%);opacity:.2;pointer-events:none;z-index:0;will-change:transform;mix-blend-mode:screen}
:root[data-theme="light"] .glow{opacity:.12;mix-blend-mode:multiply}
@media(hover:none){.glow{display:block;left:50%;top:35%;transform:translate(-50%,-50%);animation:breatheGlow 9s ease-in-out infinite alternate}}
@keyframes breatheGlow{0%{transform:translate(-50%,-50%) scale(.85);opacity:.1}100%{transform:translate(-50%,-50%) scale(1.25);opacity:.22}}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:var(--fg);border-bottom:2px solid var(--line);transition:background .3s}
header .w{display:flex;justify-content:space-between;align-items:center;height:66px}
header b{font-weight:900;letter-spacing:-.04em;font-size:1.2rem;text-transform:uppercase}
header nav a{margin-left:28px;font-weight:800;text-transform:uppercase;font-size:.85rem}
.pg{display:none}.pg.on{display:block}
.hero{padding-top:clamp(16px,4vw,48px);position:relative;z-index:1}
.hero .top{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:clamp(16px,3vw,36px)}
.ln{display:block;overflow:hidden;padding-bottom:.06em}
.ln>span{display:block}
.js .ln>span{transform:translateY(112%);transition:transform 1.1s cubic-bezier(.16,1,.3,1) var(--d,0s)}
.go .ln>span{transform:none}
.h1s{min-height:calc(100svh - 68px);display:flex;flex-direction:column;justify-content:space-between}

.hfoot{padding:clamp(16px,3vw,32px) 0 0}
.hfoot .top{margin-bottom:18px}
.hfoot .hbot{margin-top:0}
.hbot{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;margin-top:clamp(24px,4vw,56px)}
.hbot p{max-width:460px;font-size:1.15rem}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.frame{margin-top:clamp(32px,5vw,72px);border-radius:clamp(20px,3vw,40px);overflow:hidden;position:relative;aspect-ratio:16/8;min-height:260px;background:linear-gradient(120deg,#0a66c2,#6d28d9,#ec4899,#f59e0b);background-size:300% 300%;animation:sh 12s ease infinite}
@keyframes sh{50%{background-position:100% 100%}}
.frame::before{content:"";position:absolute;width:55%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.45),transparent 65%);left:var(--mx,50%);top:var(--my,30%);transform:translate(-50%,-50%);transition:left .4s,top .4s}
.frame .pf{position:absolute;left:clamp(16px,3vw,40px);bottom:clamp(16px,3vw,40px);right:16px;color:#fff;display:flex;align-items:center;gap:clamp(12px,2vw,24px)}
.frame .av{width:clamp(56px,9vw,110px);aspect-ratio:1;border-radius:50%;background:#000;display:grid;place-items:center;font-weight:900;font-size:clamp(1.2rem,3.4vw,2.6rem);flex:none}
.frame b{font-weight:900;font-size:clamp(1.3rem,4vw,3.2rem);letter-spacing:-.04em;text-transform:uppercase;line-height:1;display:block}
.stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--fg);border-bottom:2px solid var(--fg)}
.stats div{padding:clamp(20px,3vw,44px) clamp(10px,2vw,28px);border-right:2px solid var(--line)}
.stats div:last-child{border:0}
.stats b{display:block;font-weight:900;font-size:clamp(2.8rem,11vw,11rem);letter-spacing:-.06em;line-height:.9}
.stm{font-weight:900;text-transform:uppercase;letter-spacing:-.045em;line-height:.95;font-size:clamp(1.9rem,6.4vw,6.4rem);color:var(--fg)}
.stm.sm{font-size:clamp(1.25rem,3.2vw,3rem);line-height:1.05;text-transform:none;letter-spacing:-.03em}
.stm span{opacity:.15;transition:opacity .25s}
.stm span.on{opacity:1}
/* Card stack: offset tiap kartu dihitung dari --i (diisi JS), jadi berapa pun jumlah kartu tetap menumpuk rapi */
.stack .pane{--st:84px;--sg:20px;position:sticky;top:calc(var(--st) + var(--i,0)*var(--sg) + env(safe-area-inset-top,0px));min-height:min(70vh,520px);border-radius:clamp(20px,3vw,44px);padding:clamp(20px,3vw,48px);display:flex;flex-direction:column;justify-content:space-between;margin-bottom:clamp(24px,6vh,56px);color:#fff;overflow:hidden;box-shadow:0 -20px 50px rgba(0,0,0,.35);transform-origin:50% 0;will-change:transform}
.stk-sp{height:clamp(40px,14vh,140px);pointer-events:none}
.pane .n{font-weight:900;font-size:clamp(1rem,2vw,1.6rem)}
.pane h3{font-size:clamp(2.6rem,10vw,9.5rem)}
.pane p{color:rgba(255,255,255,.88);max-width:460px;font-size:1.1rem}
.mq{overflow:hidden;white-space:nowrap}
.mq .tr{display:inline-flex;gap:16px;will-change:transform}
.tile{width:clamp(210px,28vw,400px);aspect-ratio:4/5;border-radius:24px;padding:18px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;position:relative;overflow:hidden;white-space:normal;transition:transform .4s}
.tile:hover{transform:scale(.97) rotate(-1deg)}
.tile::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 75% 20%,rgba(255,255,255,.35),transparent 45%)}
.tile b{font-weight:900;font-size:clamp(1.5rem,3vw,2.6rem);letter-spacing:-.045em;text-transform:uppercase;line-height:.95;position:relative}
.tile span{position:relative;font-size:.8rem;opacity:.85}
.gm{font-weight:900;text-transform:uppercase;letter-spacing:-.06em;line-height:.85;font-size:clamp(4rem,17vw,17rem);white-space:nowrap;display:inline-block;animation:gm 32s linear infinite}
@keyframes gm{to{transform:translateX(-50%)}}
.ll a{display:flex;justify-content:space-between;align-items:center;border-top:2px solid var(--line);padding:clamp(14px,2vw,28px) 0;font-weight:900;text-transform:uppercase;letter-spacing:-.045em;line-height:.9;font-size:clamp(2.2rem,8vw,7.5rem);transition:.35s}
.ll a:last-child{border-bottom:2px solid var(--line)}
.ll a:hover{padding-left:clamp(12px,3vw,48px);color:var(--acc2)}
.ll a i{font-style:normal;font-size:.5em;transition:.35s}
.ll a:hover i{transform:rotate(-45deg)}
.it{display:grid;grid-template-columns:1fr auto;gap:12px 24px;align-items:end;border-top:2px solid var(--line);padding:clamp(16px,2.4vw,32px) 0}
.it:last-child{border-bottom:2px solid var(--line)}
.it h3{font-weight:900;text-transform:uppercase;letter-spacing:-.045em;line-height:.9;font-size:clamp(1.8rem,5.5vw,5rem);margin:0}
.it p{margin-top:8px;font-size:1.1rem}
.it .tag{text-align:right}
.pills{display:flex;flex-wrap:wrap;gap:12px}
.pills span{padding:14px 26px;border-radius:999px;border:2px solid var(--fg);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(1rem,2.4vw,1.8rem);transition:.3s}
.pills span:hover{background:var(--acc2);border-color:var(--acc2);color:var(--accfg);transform:rotate(-2deg)}
.sub{margin:clamp(48px,7vw,96px) 0 20px}
.mstack .mgrid{display:flex;flex-direction:column;gap:0;margin-top:clamp(32px,5vw,60px)}
.mstack .mgrid::after{content:"";display:block;flex:none;height:clamp(40px,12vh,120px)}
.mstack .mcard{--st:84px;--sg:24px;position:sticky;top:calc(var(--st) + var(--i,0)*var(--sg) + env(safe-area-inset-top,0px));transform-origin:50% 0;will-change:transform;min-height:clamp(200px,32vh,300px);border-radius:clamp(20px,3vw,36px);padding:clamp(24px,3.5vw,44px);display:flex;flex-direction:column;justify-content:space-between;margin-bottom:clamp(28px,5vh,52px);overflow:hidden;box-shadow:0 -20px 48px rgba(0,0,0,.45);border:2px solid var(--line);background:color-mix(in srgb,var(--card) 90%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:border-color .35s,box-shadow .35s}
.mstack .mcard:nth-child(1){border-color:color-mix(in srgb,var(--acc) 38%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--card) 92%,#0a66c2 10%),color-mix(in srgb,var(--card) 86%,#22d3ee 14%))}
.mstack .mcard:nth-child(1) i{color:#38bdf8;border-color:rgba(56,189,248,.35);background:rgba(56,189,248,.12)}
.mstack .mcard:nth-child(1) .mc-dot{background:#38bdf8;box-shadow:0 0 10px #38bdf8}
.mstack .mcard:nth-child(2){border-color:color-mix(in srgb,#a855f7 38%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--card) 92%,#6d28d9 10%),color-mix(in srgb,var(--card) 86%,#ec4899 14%))}
.mstack .mcard:nth-child(2) i{color:#c084fc;border-color:rgba(192,132,252,.35);background:rgba(192,132,252,.12)}
.mstack .mcard:nth-child(2) .mc-dot{background:#c084fc;box-shadow:0 0 10px #c084fc}
.mstack .mcard:nth-child(3){border-color:color-mix(in srgb,var(--acc2) 38%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--card) 92%,#059669 10%),color-mix(in srgb,var(--card) 86%,#b6ff3b 14%))}
.mstack .mcard:nth-child(3) i{color:var(--acc2);border-color:color-mix(in srgb,var(--acc2) 35%,transparent);background:color-mix(in srgb,var(--acc2) 12%,transparent)}
.mstack .mcard:nth-child(3) .mc-dot{background:var(--acc2);box-shadow:0 0 10px var(--acc2)}

.mc-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mcard i{display:inline-flex;align-items:center;justify-content:center;padding:4px 14px;border-radius:999px;font-style:normal;font-weight:900;font-size:.82rem;letter-spacing:.08em;line-height:1;border:1px solid transparent}
.mc-dot{width:8px;height:8px;border-radius:50%;opacity:.9}
.mc-body{display:flex;flex-direction:column;gap:10px;margin-top:clamp(20px,3vh,36px)}
.mc-body b{font-weight:900;text-transform:uppercase;letter-spacing:-.04em;font-size:clamp(1.4rem,3.4vw,2.8rem);line-height:1}
.mc-body p{font-size:clamp(.95rem,1.25vw,1.15rem);line-height:1.6;color:var(--mut);max-width:700px}
footer{border-top:2px solid var(--fg);padding:24px 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--mut);font-size:.9rem}
.js .rv{opacity:0;transform:translateY(40px);transition:opacity .9s,transform .9s cubic-bezier(.16,1,.3,1)}
.js .rv.in{opacity:1;transform:none}
.mbtn{display:none;align-items:center;background:none;border:2px solid var(--fg);color:var(--fg);border-radius:999px;padding:9px 20px;font:900 .85rem "Inter Tight",Arial,sans-serif;text-transform:uppercase;cursor:pointer}
#mn{position:fixed;inset:0;z-index:85;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);color:var(--fg);display:flex;flex-direction:column;justify-content:space-between;padding:calc(env(safe-area-inset-top,0px) + 10px) clamp(16px,4vw,40px) calc(env(safe-area-inset-bottom,0px) + 24px);transform:translateY(-101%);visibility:hidden;transition:transform .55s cubic-bezier(.77,0,.18,1),visibility 0s .55s;overflow-y:auto;-webkit-overflow-scrolling:touch}
#mn.open{transform:none;visibility:visible;transition:transform .55s cubic-bezier(.77,0,.18,1)}
#mn .top{display:flex;justify-content:space-between;align-items:center;height:60px;flex-shrink:0}
#mn ul{list-style:none;margin:20px 0;padding:0;flex:1;display:flex;flex-direction:column;justify-content:center}
#mn li{opacity:0;transform:translateY(30px);transition:.5s cubic-bezier(.16,1,.3,1)}
#mn.open li{opacity:1;transform:none;transition-delay:calc(.2s + var(--i)*.05s)}
#mn li a{display:flex;align-items:baseline;gap:14px;border-top:2px solid var(--line);padding:clamp(10px,2vh,18px) 0;font-weight:900;text-transform:uppercase;letter-spacing:-.05em;line-height:.95;font-size:clamp(2.1rem,9vh,4.2rem);transition:color .25s,padding-left .25s}
#mn li:last-child a{border-bottom:2px solid var(--line)}
#mn li a small{font-size:.75rem;letter-spacing:.1em;color:var(--mut);transition:color .25s}
#mn li a:hover,#mn li a.on{color:var(--acc2);padding-left:8px}
#mn li a:hover small,#mn li a.on small{color:var(--acc2)}
#mn li a:active{color:var(--acc2)}
#mn .ft{display:flex;flex-direction:column;gap:6px;font-weight:800;color:var(--mut);word-break:break-all;flex-shrink:0;padding-top:12px}
.lk{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.pane p{margin-top:12px}
.pane .btn{border-color:#fff;color:#fff}
.pane .btn:hover{color:#000}
.btn.dis{opacity:.5;border-style:dashed;pointer-events:none}
.tile{cursor:pointer}
.tile::after{content:"+";position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.35);display:grid;place-items:center;font-weight:900;font-size:1.3rem}
#tk{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.65);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
#tk.open{opacity:1;visibility:visible;transition:opacity .35s}
.tkc{position:relative;width:min(720px,100%);background:color-mix(in srgb,var(--card) 95%,transparent);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);color:var(--fg);border:2px solid var(--fg);border-top:12px solid var(--hc,var(--acc2));border-radius:32px 32px 0 0;padding:clamp(24px,4vw,48px) clamp(20px,4vw,48px) calc(28px + env(safe-area-inset-bottom,0px));transform:translateY(40px);transition:transform .5s cubic-bezier(.16,1,.3,1)}
#tk.open .tkc{transform:none}
.tkc h3{font-size:clamp(2.4rem,8vw,5rem);margin:10px 0 14px;padding-right:50px}
.tkc p{font-size:1.15rem}
.tkx{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:50%;border:2px solid var(--fg);background:none;color:var(--fg);font-size:1.1rem;cursor:pointer}
@media(min-width:701px){#tk{align-items:center}.tkc{border-radius:32px}}
html{scroll-snap-type:y proximity}
main .pg>section{min-height:calc(100svh - 68px);display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,4vw,56px) 0;scroll-snap-align:start;scroll-margin-top:68px;position:relative;overflow:hidden}
.pg:not(#v-home)>section{justify-content:flex-start}
main .pg>section>.w{width:100%;position:relative;z-index:1}
main .pg>.hero{padding:0}
main .pg>.hero>.w{flex:1;display:flex;flex-direction:column;justify-content:space-between;padding-top:clamp(16px,3vw,32px);padding-bottom:clamp(16px,3vw,32px)}
.hbg{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-around;opacity:.2;pointer-events:none}
.hb{display:inline-block;align-self:flex-start;white-space:nowrap;font-weight:900;text-transform:uppercase;letter-spacing:-.05em;line-height:1;font-size:clamp(5rem,24vh,14rem);color:transparent;-webkit-text-stroke:2px var(--fg);animation:gm 40s linear infinite}
.hn{font-size:clamp(3.2rem,min(17.5vw,calc((100svh - 68px - 190px)/2.7)),19rem);white-space:nowrap}
.js #hn .ln>span{transform:none;transition:none}
.ch{display:inline-block;font-variation-settings:"wght" var(--w,900)}
.js .ch{transform:translateY(115%) rotate(10deg);transform-origin:0 100%;transition:transform 1s cubic-bezier(.16,1,.3,1) calc(var(--i)*45ms),font-variation-settings .3s}
.go .ch{transform:none}
#ld.inv{background:#f4f5f7;color:#000}
main .pg .frame{margin-top:0;aspect-ratio:auto;height:clamp(220px,38svh,440px);min-height:0}
main .pg>section.stack{display:block;min-height:0;overflow:visible;padding:clamp(60px,10vw,140px) 0;scroll-snap-align:none}
.mq .tile{width:clamp(150px,15vw,230px);aspect-ratio:1}
.mq .tile b{font-size:clamp(1.1rem,1.8vw,1.7rem)}
@media(max-width:700px){html{scroll-snap-type:none}main .pg>section:not(.hero){min-height:0;overflow:visible;scroll-snap-align:none;padding:clamp(44px,8vw,68px) 0}.stm{font-size:clamp(1.5rem,5.6vw,2.4rem);line-height:1.1;letter-spacing:-.035em}.mstack .mgrid{margin-top:28px}.mstack .mcard{--st:74px;--sg:20px;min-height:190px;padding:22px 20px;border-radius:22px;margin-bottom:20px;box-shadow:0 -14px 35px rgba(0,0,0,.5)}.mc-body{margin-top:16px;gap:6px}.mc-body b{font-size:1.3rem;line-height:1.1}.mc-body p{font-size:.92rem;line-height:1.55}.h1s{min-height:0;justify-content:flex-start}.hfoot{padding-top:28px}header nav,#conn{display:none}.mbtn{display:inline-flex}.hbot{grid-template-columns:1fr}.frame{aspect-ratio:4/3}.out{-webkit-text-stroke-width:1.2px}.it{grid-template-columns:1fr}.it .tag{text-align:left}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.js .ln>span,.js .rv,.js .ch{transform:none;opacity:1}#ld{display:none!important}.stm span{opacity:1}.aurora,.glow{animation:none!important}}
.hr{display:flex;align-items:center;gap:14px}
.thbtn{display:inline-flex;align-items:center;background:none;border:2px solid var(--fg);color:var(--fg);border-radius:999px;padding:9px 16px;font:900 .8rem "Inter Tight",Arial,sans-serif;text-transform:uppercase;letter-spacing:.02em;cursor:pointer;transition:.3s}
.thbtn:hover{background:var(--fg);color:var(--bg)}

/* Background visual enhancements */
.bg-fx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-aurora{position:absolute;inset:-20%;width:140%;height:140%;overflow:hidden;filter:blur(85px);transform:translateZ(0)}
.aurora{position:absolute;border-radius:50%;will-change:transform,opacity;mix-blend-mode:screen}
:root[data-theme="light"] .aurora{mix-blend-mode:multiply;filter:blur(95px)}
.aurora.a1{width:clamp(340px,50vw,720px);aspect-ratio:1;background:radial-gradient(circle,var(--aurora-1) 0%,transparent 70%);top:4%;right:4%;animation:floatAurora1 22s ease-in-out infinite alternate}
.aurora.a2{width:clamp(380px,55vw,820px);aspect-ratio:1;background:radial-gradient(circle,var(--aurora-2) 0%,transparent 70%);bottom:8%;left:-6%;animation:floatAurora2 28s ease-in-out infinite alternate}
.aurora.a3{width:clamp(280px,40vw,580px);aspect-ratio:1;background:radial-gradient(circle,var(--aurora-3) 0%,transparent 70%);top:44%;right:20%;animation:floatAurora3 25s ease-in-out infinite alternate}
@keyframes floatAurora1{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-8vw,12vh) scale(1.15)}100%{transform:translate(6vw,20vh) scale(.9)}}
@keyframes floatAurora2{0%{transform:translate(0,0) scale(1)}50%{transform:translate(10vw,-14vh) scale(1.2)}100%{transform:translate(14vw,-6vh) scale(.95)}}
@keyframes floatAurora3{0%{transform:translate(0,0) scale(.9)}50%{transform:translate(-10vw,-10vh) scale(1.12)}100%{transform:translate(7vw,-16vh) scale(1.04)}}

.bg-grid{position:absolute;inset:0;background-image:linear-gradient(to right,var(--bg-grid) 1px,transparent 1px),linear-gradient(to bottom,var(--bg-grid) 1px,transparent 1px),radial-gradient(circle,var(--bg-dots) 1px,transparent 1px);background-size:64px 64px,64px 64px,32px 32px;background-position:0 0,0 0,16px 16px;mask-image:radial-gradient(ellipse 85% 75% at 50% 45%,#000 40%,transparent 95%);-webkit-mask-image:radial-gradient(ellipse 85% 75% at 50% 45%,#000 40%,transparent 95%)}
.bg-noise{position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");background-size:160px 160px;opacity:.7;pointer-events:none}
:root[data-theme="light"] .bg-noise{opacity:.35}

/* ===== Mobile: compact project cards ===== */
@media(max-width:700px){
#projects .h2{margin-bottom:20px!important}
.stack .pane{--st:78px;--sg:14px;min-height:0;gap:26px;padding:20px 18px;border-radius:22px;margin-bottom:18px;box-shadow:0 -10px 28px rgba(0,0,0,.4)}
.pane .n{font-size:.85rem;opacity:.9}
.pane h3{font-size:clamp(1.7rem,8vw,2.3rem);line-height:.95}
.pane p{font-size:.92rem;line-height:1.45;margin-top:8px;max-width:none}
.lk{gap:8px;margin-top:14px}
.pane .btn{padding:10px 16px;font-size:.72rem;gap:6px;border-width:1.5px}
}
@media(hover:none){.btn:hover,.pills span:hover,.tile:hover{transform:none}}

/* Project card tech tag */
.pane .tag{display:block;color:rgba(255,255,255,.8);margin-bottom:10px}
.pane .ptop{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.pane .tech{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin:0;padding:0;list-style:none}
.pane .tech li{font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;line-height:1;padding:7px 12px;border:1px solid currentColor;border-radius:999px;opacity:.92}
.pane .tech li.prole{background:color-mix(in srgb,currentColor 20%,transparent);border-color:transparent}
@media(max-width:700px){.pane .ptop{flex-direction:column;gap:10px}.pane .tech{gap:6px;justify-content:flex-start}.pane .tech li{font-size:.62rem;padding:6px 10px}}
@media(max-width:700px){.pane .tag{font-size:.68rem;margin-bottom:8px}}

/* ===== Performance pass ===== */
/* aurora gradients already fade to transparent, so blur filters were redundant (light mode stacked two) */
.bg-aurora{filter:none}
:root[data-theme="light"] .aurora{filter:none}
.bar{width:100%;transform:scaleX(0);transform-origin:0 50%;will-change:transform}
.hbg.off .hb{animation-play-state:paused}
@media(hover:none),(max-width:700px){
.aurora,:root[data-theme="light"] .aurora{mix-blend-mode:normal}
.glow{display:none}
header{backdrop-filter:none;-webkit-backdrop-filter:none;background:color-mix(in srgb,var(--bg) 94%,transparent)}
.mstack .mcard{backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 -8px 20px rgba(0,0,0,.25)}
.stack .pane{box-shadow:0 -8px 20px rgba(0,0,0,.25)}
.frame{animation:none;background-size:100% 100%}
.frame::before{transition:none}
.hb:nth-child(3){display:none}
}

/* ===== Floating pill navbar ===== */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:none;border-bottom:0;backdrop-filter:none;-webkit-backdrop-filter:none;pointer-events:none;transition:transform .4s cubic-bezier(.16,1,.3,1);--pb:rgba(18,21,28,.88);--pbd:rgba(255,255,255,.14);--pt:#aeb5c2;--pa:#f4f5f7;--pat:#050608;--ph:rgba(255,255,255,.08);--pl:#b6ff3b;--plt:#050608;--pc:#b6ff3b;--pct:#050608;--ps:rgba(0,0,0,.35)}
:root[data-theme="light"] header{--pb:rgba(255,255,255,.9);--pbd:rgba(0,0,0,.14);--pt:#5d6472;--pa:#0a0b0d;--pat:#ffffff;--ph:rgba(0,0,0,.06);--pl:#0a0b0d;--plt:#ffffff;--pc:#0a0b0d;--pct:#ffffff;--ps:rgba(0,0,0,.12)}
header.hide{transform:translateY(-130%)}
header .w{display:flex;align-items:center;justify-content:center;height:66px}
.pill{pointer-events:auto;display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border-radius:999px;background:var(--pb);border:1px solid var(--pbd);box-shadow:0 8px 28px var(--ps);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);transition:background .3s,border-color .3s,box-shadow .3s}
.hlogo{width:36px;height:36px;border-radius:50%;background:var(--pl);color:var(--plt);display:grid;place-items:center;font-weight:900;font-size:.82rem;letter-spacing:-.02em;flex:none;transition:transform .25s}
.hlogo:hover{transform:scale(1.06)}
header nav{display:flex;align-items:center;gap:2px}
header nav a{margin:0;padding:8px 14px;border-radius:999px;font-size:.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--pt);transition:background .2s,color .2s;white-space:nowrap}
header nav a:hover{background:var(--ph);color:var(--pa)}
header nav a.on{background:var(--pa);color:var(--pat)}
header .hr{display:flex;align-items:center;gap:6px;margin-left:4px}
#conn{display:inline-flex;align-items:center;background:var(--pc);color:var(--pct);padding:8px 16px;border-radius:999px;font-weight:900;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;transition:transform .2s,opacity .2s;white-space:nowrap}
#conn:hover{transform:translateY(-1px);opacity:.92}
header .thbtn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;padding:0;background:transparent;border:1px solid var(--pbd);color:var(--pt);font:900 .85rem "Inter Tight",Arial,sans-serif;cursor:pointer;flex:none;transition:background .2s,color .2s,border-color .2s,transform .2s}
header .thbtn:hover{background:var(--ph);color:var(--pa);border-color:var(--pt);transform:rotate(15deg)}
header .mbtn{display:none;align-items:center;justify-content:center;padding:0 16px;height:36px;border-radius:999px;border:1px solid var(--pa);background:transparent;color:var(--pa);font:900 .75rem "Inter Tight",Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;flex:none;transition:background .2s,color .2s;white-space:nowrap}
header .mbtn:hover,header .mbtn:active{background:var(--pa);color:var(--pat)}
.tl{display:none}

/* ===== Minimalist Mobile Navbar ===== */
@media(max-width:700px){
header .w{height:62px;padding:0 clamp(12px,4vw,24px);justify-content:stretch}
.pill{width:100%;max-width:100%;box-sizing:border-box;justify-content:space-between;padding:5px 8px;gap:8px}
header nav,#conn{display:none!important}
.hlogo{width:36px;height:36px;margin-right:0;flex-shrink:0}
header .hr{margin-left:auto;gap:8px;flex-shrink:0}
header .thbtn{width:36px;height:36px;padding:0;flex-shrink:0}
header .mbtn{display:inline-flex;height:36px;padding:0 16px;flex-shrink:0;font-size:.75rem;font-weight:900}
}
@media(max-width:360px){
header .w{padding:0 10px}
.pill{padding:5px 6px;gap:6px}
header .mbtn{padding:0 12px;font-size:.72rem}
}

#projects,#contact{scroll-margin-top:calc(76px + env(safe-area-inset-top,0px))}


/* ===== Theme picker ===== */
#tp{position:fixed;z-index:60;top:calc(env(safe-area-inset-top,0px) + 72px);right:clamp(12px,3vw,40px);width:min(360px,calc(100vw - 24px));max-height:calc(100svh - 96px - env(safe-area-inset-top,0px));overflow:auto;display:none;background:var(--card);color:var(--fg);border:1px solid var(--line);border-radius:18px;padding:4px 14px 14px;box-shadow:0 18px 50px rgba(0,0,0,.28)}
#tp.open{display:block}
#tp .tg{margin:14px 0 8px;font-size:.78rem;font-weight:800;color:var(--mut)}
#tp .tgr{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#tp button{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--fg);font:700 .82rem/1.1 "Inter Tight",Arial,sans-serif;text-align:left;cursor:pointer}
#tp button:hover{border-color:var(--fg)}
#tp button[aria-pressed=true]{border-color:var(--acc2);box-shadow:0 0 0 2px var(--acc2)}
#tp i{width:24px;height:24px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;flex:none}
#tp u{width:10px;height:10px;border-radius:50%}
/* Desktop: picker jadi dropdown yang menempel di bawah pill navbar (ikut bergerak/sembunyi bersama header). Mobile tetap panel fixed di kanan atas. */
.pill{position:relative}
#tp.dk{position:absolute;top:calc(100% + 12px);right:0;left:auto;width:min(420px,calc(100vw - 32px));max-height:calc(100svh - 120px - env(safe-area-inset-top,0px));z-index:5;border-radius:20px;box-shadow:0 22px 60px rgba(0,0,0,.34)}
#tp.dk.open{animation:tpIn .24s cubic-bezier(.16,1,.3,1)}
@keyframes tpIn{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#tp.dk.open{animation:none}}

/* ===== Extra themes: shared ===== */
html[data-nt]{--hw:700;--uw:600;--tt:none;--tu:none;--ls:-.02em;--lu:0;--lh:1;--hs:1;--ow:1.5px;--r:14px;--rb:999px;--sh:none;--bw:1px;--cl:var(--line);--cb:var(--card);--bf:none;--pf:#fff;--tb:var(--card);--tb2:var(--tb);--tf:var(--fg);--ff:#fff;--go:0;--bgd:block;--gd:none;--fu:var(--fb);--fh:var(--fb);--fsp:none;--fa:none;--pc2:var(--pc1)}
html[data-nt] body{font-family:var(--fb)}
html[data-nt] :where(.big,.stm,.gm,.hb,.tile b,.ll a,.it h3,.mc-body b,.pills span,.tkc h3,.stats b,.frame b){font-family:var(--fh);font-weight:var(--hw);text-transform:var(--tt);letter-spacing:var(--ls)}
html[data-nt] #mn li a{font-family:var(--fh);font-weight:var(--hw);text-transform:var(--tt);letter-spacing:var(--ls)}
html[data-nt] :where(.btn,.tag,.hlogo,header nav a,.mbtn,.thbtn,.pane .n,.av,.mcard i){font-family:var(--fu);font-weight:var(--uw);text-transform:var(--tu);letter-spacing:var(--lu)}
html[data-nt] #conn{font-family:var(--fu);font-weight:var(--uw);text-transform:var(--tu);letter-spacing:var(--lu);border-radius:var(--rb)}
html[data-nt] :where(.big,.stm,.ll a,.it h3,.mc-body b){line-height:var(--lh)}
html[data-nt] .stm.sm{font-family:var(--fb);font-weight:400}
html[data-nt] .ln{padding-bottom:.14em}
html[data-nt] .ch{font-variation-settings:normal}
html[data-nt] .out{-webkit-text-stroke-width:var(--ow)}
html[data-nt] .h1{font-size:calc(clamp(3.4rem,17.5vw,19rem)*var(--hs))}
html[data-nt] .h2{font-size:calc(clamp(2.8rem,11vw,10rem)*var(--hs))}
html[data-nt] .hn{font-size:calc(clamp(3.2rem,min(17.5vw,calc((100svh - 68px - 190px)/2.7)),19rem)*var(--hs))}
html[data-nt] .pane h3{font-size:calc(clamp(2.6rem,10vw,9.5rem)*var(--hs))}
@media(max-width:700px){html[data-nt] .pane h3{font-size:calc(clamp(1.7rem,8vw,2.3rem)*var(--hs))}}
html[data-nt] :where(.btn,.pills span,.pill,header nav a,.hlogo,.thbtn,.mbtn){border-radius:var(--rb)}
html[data-nt] :where(.btn,.pills span,.thbtn,.mbtn,.pill){border-width:var(--bw)}
html[data-nt] :is(.pane,.mcard,.tile,.frame,.tkc){border-radius:var(--r)}
html[data-nt] :is(.btn,.pills span,.pane,.mcard,.tile,.frame,.pill){box-shadow:var(--sh)}
html[data-nt] :is(.pane,.mcard,.tile,.frame){backdrop-filter:var(--bf);-webkit-backdrop-filter:var(--bf)}
html[data-nt] #tp{border-radius:var(--r);box-shadow:var(--sh);border-width:var(--bw)}
html[data-nt] #tp button{font-family:var(--fu)}
html[data-nt] .mstack .mcard:nth-child(n){background:var(--cb);border:var(--bw) solid var(--cl)}
html[data-nt] .mstack .mcard:nth-child(n) i{color:var(--acc2);background:transparent;border-color:var(--acc2)}
html[data-nt] .mstack .mcard:nth-child(n) .mc-dot{background:var(--acc2);box-shadow:none}
html[data-nt] .pane{background:var(--pc1)!important;color:var(--pf);border:var(--bw) solid var(--cl)}
html[data-nt] .pane:nth-of-type(even){background:var(--pc2)!important}
html[data-nt] .pane :is(p,.tag){color:inherit}
html[data-nt] .pane .tag{opacity:.8}
html[data-nt] .pane .btn{border-color:currentColor;color:inherit}
html[data-nt] .pane .btn:hover{background:var(--acc2);border-color:var(--acc2);color:var(--accfg)}
html[data-nt] .tile{background:var(--tb)!important;color:var(--tf);border:var(--bw) solid var(--cl)}
html[data-nt] .tile:nth-child(3n+2){background:var(--tb2)!important}
html[data-nt] .tile::before{display:none}
html[data-nt] .tile::after{background:var(--acc2);color:var(--accfg)}
html[data-nt] .frame{background:var(--fr,var(--acc2));animation:var(--fa);border:var(--bw) solid var(--cl)}
html[data-nt] .frame::before{display:var(--fsp)}
html[data-nt] .frame .pf{color:var(--ff)}
html[data-nt] .frame .av{background:var(--fg);color:var(--bg)}
html[data-nt] .bg-fx{display:var(--bgd)}
html[data-nt] .bg-grid{display:var(--gd)}
html[data-nt] .bg-noise{display:none}
html[data-nt] .aurora{mix-blend-mode:normal}
html[data-nt] .glow{opacity:var(--go);mix-blend-mode:normal}
html[data-nt] header{--pb:color-mix(in srgb,var(--bg) 88%,transparent);--pbd:var(--cl);--pt:var(--mut);--pa:var(--fg);--pat:var(--bg);--ph:color-mix(in srgb,var(--fg) 10%,transparent);--pl:var(--acc2);--plt:var(--accfg);--pc:var(--acc2);--pct:var(--accfg);--ps:rgba(0,0,0,.14)}

/* Anthropic */
html[data-theme="anthropic"]{--bg:#f3eee4;--fg:#2b2620;--mut:#6f675a;--card:#faf6ee;--line:#dcd3c2;--acc:#c0603a;--acc2:#b3502b;--accfg:#fff;--aurora-1:rgba(192,96,58,.14);--aurora-2:rgba(150,130,100,.14);--aurora-3:rgba(214,170,110,.16);color-scheme:light;--fb:"Source Serif 4",Georgia,serif;--fu:Inter,system-ui,sans-serif;--hw:500;--ls:-.015em;--hs:.95;--ow:1.2px;--pc1:#b3502b;--pc2:#5d6b4a;--fr:linear-gradient(160deg,#c9704a,#8e3d20)}
html[data-theme="anthropic"] p{line-height:1.7}
html[data-theme="anthropic"] .stm.sm{font-size:clamp(1.15rem,2.2vw,1.6rem);line-height:1.7;max-width:62ch}
/* Gemini */
html[data-theme="gemini"]{--bg:#f5f7ff;--fg:#1a1c2e;--mut:#555b78;--card:#fff;--line:#dde2f5;--acc:#3c78e8;--acc2:#7b5cf0;--accfg:#fff;--aurora-1:rgba(66,133,244,.28);--aurora-2:rgba(155,114,203,.28);--aurora-3:rgba(217,101,112,.24);color-scheme:light;--fb:Outfit,system-ui,sans-serif;--hw:600;--ls:-.03em;--hs:.95;--r:28px;--sh:0 6px 24px rgba(66,133,244,.14);--pc1:linear-gradient(135deg,#3c78e8,#7b5cf0);--pc2:linear-gradient(135deg,#8a5fc4,#cf5a68);--tb:linear-gradient(150deg,#e3ebff,#efe5ff);--tb2:linear-gradient(150deg,#ffe3ea,#fff0e0);--fr:linear-gradient(120deg,#3c78e8,#8a5fc4,#cf5a68);--fa:sh 12s ease infinite;--fsp:block;--go:.1}
html[data-theme="gemini"] .acc{background:linear-gradient(90deg,#3c78e8,#8a5fc4,#cf5a68);-webkit-background-clip:text;background-clip:text;color:transparent;width:fit-content}
/* OpenAI */
html[data-theme="openai"]{--bg:#fff;--fg:#0d0d0d;--mut:#676770;--card:#f7f7f8;--line:#e3e3e6;--acc:#10a37f;--acc2:#0e8a6c;--accfg:#fff;color-scheme:light;--fb:Inter,system-ui,sans-serif;--hw:600;--ls:-.04em;--hs:.95;--r:12px;--pc1:#0d0d0d;--pc2:#0e7c61;--fr:linear-gradient(135deg,#0d0d0d,#1f2a27);--bgd:none}
/* Perplexity */
html[data-theme="perplexity"]{--bg:#f7f7f2;--fg:#13343b;--mut:#587077;--card:#fff;--line:#dbe2df;--acc:#20808d;--acc2:#1a7f8c;--accfg:#fff;--aurora-1:rgba(32,184,205,.14);--aurora-2:rgba(19,52,59,.07);--aurora-3:rgba(32,128,141,.1);color-scheme:light;--fb:Inter,system-ui,sans-serif;--fh:"Space Grotesk",Inter,sans-serif;--hw:500;--ls:-.035em;--hs:.95;--r:16px;--pc1:#13343b;--pc2:#1a7f8c;--fr:linear-gradient(135deg,#13343b,#20808d)}
html[data-theme="perplexity"] .hfoot::before{content:"Ask anything about Atha…";display:block;margin-bottom:18px;padding:16px 24px;border:1px solid var(--acc);border-radius:999px;background:var(--card);color:var(--mut);font-size:1.1rem;box-shadow:0 4px 18px rgba(19,52,59,.1)}
html[data-theme="perplexity"] .hbot p{padding:16px 20px;border:1px solid var(--line);border-radius:16px;background:var(--card);color:var(--fg)}
html[data-theme="perplexity"] .stack{counter-reset:s}
html[data-theme="perplexity"] .pane{counter-increment:s}
html[data-theme="perplexity"] .pane .n::before{content:"[" counter(s) "] "}
/* Neo-Brutalism */
html[data-theme="neo"]{--bg:#fff7d1;--fg:#000;--mut:#1f1f1f;--card:#fff;--line:#000;--acc:#ff3d81;--acc2:#ff3d81;--accfg:#000;color-scheme:light;--fb:"Space Mono",ui-monospace,monospace;--hw:700;--tt:uppercase;--tu:uppercase;--ls:-.05em;--lh:.95;--hs:.8;--ow:2px;--r:0;--rb:0;--sh:6px 6px 0 #000;--bw:3px;--pc1:#ffde00;--pc2:#8be9fd;--pf:#000;--tb:#ffde00;--tb2:#8be9fd;--fr:#ff90c8;--ff:#000;--bgd:none}
html[data-theme="neo"] .acc{text-shadow:.05em .05em 0 #000}
/* Glassmorphism */
html[data-theme="glass"]{--bg:#4338ca;--fg:#fff;--mut:rgba(255,255,255,.8);--card:rgba(255,255,255,.14);--line:rgba(255,255,255,.3);--acc:#67e8f9;--acc2:#fde68a;--accfg:#2e1065;--aurora-1:rgba(34,211,238,.5);--aurora-2:rgba(244,114,182,.5);--aurora-3:rgba(250,204,21,.32);color-scheme:dark;--fb:Manrope,system-ui,sans-serif;--hw:700;--ls:-.035em;--hs:.95;--r:28px;--sh:0 12px 40px rgba(30,20,100,.3);--cl:rgba(255,255,255,.35);--cb:rgba(255,255,255,.14);--bf:blur(22px) saturate(1.4);--pc1:rgba(255,255,255,.16);--tb:rgba(255,255,255,.16);--fr:rgba(255,255,255,.12);--fsp:block}
html[data-theme="glass"] body{background:linear-gradient(125deg,#3a2fd0,#7a2bd0,#d93a96,#1a8ad6);background-size:300% 300%;animation:sh 20s ease infinite}
html[data-theme="glass"] #tp{background:rgba(52,36,150,.88);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
/* Cyberpunk */
html[data-theme="cyber"]{--bg:#06060d;--fg:#d9faff;--mut:#7f93ad;--card:#0c0d1b;--line:#1c2742;--acc:#00e5ff;--acc2:#ff2bd6;--accfg:#06060d;--bg-grid:rgba(0,229,255,.07);--bg-dots:rgba(255,43,214,.1);--aurora-1:rgba(0,229,255,.2);--aurora-2:rgba(255,43,214,.2);--aurora-3:rgba(57,255,20,.1);color-scheme:dark;--fb:"JetBrains Mono",ui-monospace,monospace;--fh:Orbitron,"JetBrains Mono",sans-serif;--hw:800;--uw:700;--tt:uppercase;--tu:uppercase;--ls:.01em;--lu:.06em;--hs:.6;--r:2px;--rb:2px;--sh:0 0 16px rgba(0,229,255,.28);--cl:rgba(0,229,255,.45);--pc1:linear-gradient(135deg,#071a2b,#14123a);--pc2:linear-gradient(135deg,#2a0b30,#12123a);--pf:#d9faff;--tb:#0c0d1b;--tb2:#160c24;--fr:linear-gradient(120deg,#0a2a3a,#3a0a40);--gd:block;--go:.12}
html[data-theme="cyber"] .acc{text-shadow:0 0 24px var(--acc2)}
html[data-theme="cyber"] .out{-webkit-text-stroke-color:var(--acc)}
html[data-theme="cyber"] body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;background:repeating-linear-gradient(0deg,rgba(0,0,0,.2) 0 1px,transparent 1px 3px);opacity:.4}
/* Editorial */
html[data-theme="editorial"]{--bg:#f6f3ec;--fg:#18181a;--mut:#615f5a;--card:#fffdf8;--line:#cfc9bb;--acc:#a8261c;--acc2:#a8261c;--accfg:#fff;color-scheme:light;--fb:"Source Serif 4",Georgia,serif;--fh:"Playfair Display",Georgia,serif;--hw:500;--ls:-.03em;--lu:.01em;--hs:.95;--ow:1px;--r:0;--rb:0;--pc1:#18181a;--pc2:#a8261c;--fr:#a8261c;--bgd:none}
html[data-theme="editorial"] :is(.tag,.acc){font-style:italic}
html[data-theme="editorial"] .hn .ln:nth-child(2){padding-left:14vw}
html[data-theme="editorial"] .hn .ln:nth-child(3){padding-left:5vw}
html[data-theme="editorial"] main .pg>section>.w{padding-left:clamp(16px,7vw,120px)}
html[data-theme="editorial"] .stm.sm{font-size:clamp(1.2rem,2.3vw,1.7rem);line-height:1.65;max-width:62ch}
/* SaaS Clean */
html[data-theme="saas"]{--bg:#f3f5f9;--fg:#0f172a;--mut:#5b6678;--card:#fff;--line:#e1e6ee;--acc:#2563eb;--acc2:#1d4ed8;--accfg:#fff;--bg-grid:rgba(15,23,42,.045);--bg-dots:transparent;--aurora-1:transparent;--aurora-2:transparent;--aurora-3:transparent;color-scheme:light;--fb:"IBM Plex Sans",system-ui,sans-serif;--hw:600;--ls:-.025em;--lh:1.05;--hs:.88;--rb:8px;--sh:0 1px 2px rgba(15,23,42,.06),0 10px 28px rgba(15,23,42,.07);--pc1:#1e3a8a;--pc2:#334155;--fr:linear-gradient(135deg,#1e3a8a,#2563eb);--gd:block}
html[data-theme="saas"] .stats{border:0;gap:16px}
html[data-theme="saas"] .stats div{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh)}
html[data-theme="saas"] .stats b{font-size:clamp(2.4rem,6vw,4.6rem)}
/* Retro Web */
html[data-theme="retro"]{--bg:#fff;--fg:#000;--mut:#222;--card:#e8e8e8;--line:#000;--acc:#0000ee;--acc2:#e00000;--accfg:#fff;color-scheme:light;--fb:"Times New Roman",Times,serif;--fu:"Courier New",Courier,monospace;--hw:700;--uw:700;--ls:0;--ow:1px;--r:0;--rb:0;--bw:2px;--cl:#000;--pc1:#0000cc;--pc2:#cc0000;--tb:#ffff00;--tb2:#99ccff;--fr:#0000cc;--bgd:none}
html[data-theme="retro"] :is(header nav a,.ll a,#conn){text-decoration:underline}
html[data-theme="retro"] :is(.btn,.btn.p,.pane .btn,.thbtn,.mbtn){background:#c0c0c0;color:#000;border-style:outset;border-color:#fff #555 #555 #fff}
html[data-theme="retro"] :is(.btn,.pane .btn):hover{background:#ffff00;color:#000;transform:none}


/* ===== Theme scenes (transisi per tema) ===== */
#sc{position:fixed;inset:0;z-index:120;pointer-events:none;display:none;overflow:hidden}
#sc.on{display:block}
#sc .p{position:absolute;inset:0;will-change:transform}
#sc .l{position:absolute;inset:0;display:grid;place-items:center;padding:0 4vw;text-align:center;font-weight:800;line-height:1.1;font-size:clamp(1.2rem,6vw,4.5rem);overflow-wrap:anywhere;opacity:0;animation:scl 1.3s .1s both}
@keyframes scl{0%,28%{opacity:0;transform:translateY(24px) scale(.96)}42%,60%{opacity:1;transform:none}78%,100%{opacity:0;transform:translateY(-16px)}}
#sc.wipe .p{animation:scU 1.3s cubic-bezier(.77,0,.18,1) both}
#sc.steps .p{animation:scS 1.3s steps(7) both}
#sc.iris .p{animation:scI 1.3s cubic-bezier(.65,0,.35,1) both}
#sc.curtain .p{inset:0 auto 0 0;width:50.6%}
#sc.curtain .cu.b{inset:0 0 0 auto;animation:scR 1.3s cubic-bezier(.7,0,.2,1) both}
#sc.curtain .cu.a{animation:scL 1.3s cubic-bezier(.7,0,.2,1) both;box-shadow:10px 0 34px rgba(0,0,0,.35)}
#sc .cu::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(0,0,0,.16) 0 18px,rgba(255,255,255,.07) 18px 30px,transparent 30px 54px)}
#sc.blinds .p{inset:0 auto 0 calc(var(--i)*12.5%);width:12.7%;transform-origin:50% 0;animation:scB 1.3s cubic-bezier(.7,0,.2,1) both;animation-delay:calc(var(--i)*.035s)}
#sc.pop .p{inset:auto;width:90vmax;height:90vmax;margin:-45vmax 0 0 -45vmax;border-radius:50%;animation:scP 1.3s cubic-bezier(.34,1.56,.64,1) both}
#sc.grid .p{inset:auto;width:25.3%;height:33.7%;left:calc(var(--x)*25%);top:calc(var(--y)*33.333%);animation:scG 1.3s cubic-bezier(.5,0,.3,1) both}
@keyframes scU{0%{transform:translateY(101%)}35%,62%{transform:none}100%{transform:translateY(-101%)}}
@keyframes scL{0%{transform:translateX(-101%)}35%,62%{transform:none}100%{transform:translateX(-101%)}}
@keyframes scR{0%{transform:translateX(101%)}35%,62%{transform:none}100%{transform:translateX(101%)}}
@keyframes scI{0%{clip-path:circle(0% at 50% 50%);opacity:1}35%,62%{clip-path:circle(78% at 50% 50%);opacity:1}100%{clip-path:circle(78% at 50% 50%);opacity:0}}
@keyframes scB{0%{transform:scaleY(0)}35%,62%{transform:scaleY(1)}100%{transform:scaleY(0)}}
@keyframes scS{0%{clip-path:inset(0 100% 0 0)}35%,62%{clip-path:inset(0)}100%{clip-path:inset(0 0 0 100%)}}
@keyframes scP{0%{transform:scale(0)}35%,62%{transform:scale(1)}100%{transform:scale(0)}}
@keyframes scG{0%{transform:scale(0)}35%,62%{transform:scale(1.02)}100%{transform:scale(0)}}

/* ===== Minimalis & estetis modern ===== */
html[data-theme="neu"]{--bg:#e0e5ec;--fg:#3d4455;--mut:#6b7387;--card:#e0e5ec;--line:#e0e5ec;--acc:#5b6cff;--acc2:#5b6cff;--accfg:#fff;color-scheme:light;--fb:Nunito,system-ui,sans-serif;--hw:800;--ls:-.03em;--hs:.95;--r:28px;--rb:999px;--bw:0px;--sh:9px 9px 18px #a3b1c6,-9px -9px 18px #fff;--cl:transparent;--cb:#e0e5ec;--pc1:#e0e5ec;--pc2:#e0e5ec;--pf:#3d4455;--tb:#e0e5ec;--tb2:#e0e5ec;--tf:#3d4455;--fr:#e0e5ec;--ff:#3d4455;--bgd:none}
html[data-theme="neu"] .btn.p{background:var(--bg);color:var(--acc)}
html[data-theme="neu"] .btn:hover{background:var(--bg);color:var(--acc);transform:none;box-shadow:inset 6px 6px 12px #a3b1c6,inset -6px -6px 12px #fff}
html[data-theme="neu"] .stats,html[data-theme="neu"] .stats div{border-color:transparent}
html[data-theme="neu"] .pane :is(h3,.n){text-shadow:1px 1px 1px #fff}
html[data-theme="bento"]{--bg:#f1f1f3;--fg:#111;--mut:#6b6b73;--card:#fff;--line:#e2e2e7;--acc:#0071e3;--acc2:#0071e3;--accfg:#fff;color-scheme:light;--fb:"Plus Jakarta Sans",system-ui,sans-serif;--hw:800;--ls:-.045em;--hs:.92;--r:30px;--sh:0 1px 2px rgba(0,0,0,.04);--cl:#e2e2e7;--cb:#fff;--pc1:#111;--pc2:#0071e3;--tb:#fff;--tb2:#e9f2ff;--fr:linear-gradient(135deg,#0071e3,#6a5cff);--bgd:none}
html[data-theme="bento"] .stats{border:0;gap:12px}
html[data-theme="bento"] .stats div{background:var(--card);border:1px solid var(--line);border-radius:26px}
html[data-theme="bento"] .stats b{font-size:clamp(2.4rem,6vw,5rem)}
html[data-theme="bento"] .it{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:22px 26px;margin-bottom:12px}
html[data-theme="bento"] .it:last-child{border-bottom:1px solid var(--line)}
html[data-theme="organic"]{--bg:#efe9dc;--fg:#3b3a2c;--mut:#6c6b55;--card:#f7f2e6;--line:#d9d0b8;--acc:#c26a43;--acc2:#b4572f;--accfg:#fff;--aurora-1:rgba(107,127,79,.25);--aurora-2:rgba(194,106,67,.2);--aurora-3:rgba(214,190,130,.3);color-scheme:light;--fb:"DM Sans",system-ui,sans-serif;--fh:Fraunces,Georgia,serif;--hw:600;--ls:-.03em;--hs:.92;--r:56px 16px 56px 16px;--cl:#d9d0b8;--cb:#f7f2e6;--pc1:#6b7f4f;--pc2:#b4572f;--tb:#d9d2a8;--tb2:#e8b99c;--fr:linear-gradient(160deg,#8a9a62,#b4572f)}
html[data-theme="organic"] .stats div:nth-child(2){border-radius:0 0 40px 0}
html[data-theme="mono"]{--bg:#e6eefb;--fg:#0a2a5e;--mut:#4a6a9a;--card:#f3f7fd;--line:#b9cdea;--acc:#1f5fd1;--acc2:#1f5fd1;--accfg:#fff;--aurora-1:rgba(31,95,209,.18);--aurora-2:rgba(10,42,94,.1);--aurora-3:rgba(120,160,230,.2);color-scheme:light;--fb:Sora,system-ui,sans-serif;--hw:700;--ls:-.05em;--hs:.86;--r:10px;--pc1:#0a2a5e;--pc2:#1f5fd1;--tb:#cfe0f7;--tb2:#9fbfee;--tf:#0a2a5e;--fr:linear-gradient(135deg,#0a2a5e,#1f5fd1 60%,#9fbfee)}

/* ===== Visual eksperimental & retro ===== */
html[data-theme="yk"]{--bg:#dfeaff;--fg:#1b1f5e;--mut:#4b5199;--card:#f3f7ff;--line:#1b1f5e;--acc:#ff4fd8;--acc2:#e11cc0;--accfg:#fff;--aurora-1:rgba(255,79,216,.3);--aurora-2:rgba(0,200,255,.3);--aurora-3:rgba(255,242,122,.35);color-scheme:light;--fb:Quicksand,system-ui,sans-serif;--fh:Audiowide,sans-serif;--hw:400;--uw:700;--ls:0;--hs:.78;--ow:2px;--r:26px;--bw:2px;--sh:0 5px 0 rgba(27,31,94,.35);--cl:#1b1f5e;--pc1:linear-gradient(135deg,#ff9be8,#9be7ff);--pc2:linear-gradient(135deg,#9be7ff,#fff27a);--pf:#1b1f5e;--tb:linear-gradient(150deg,#fff,#b8d4ff);--tb2:linear-gradient(150deg,#ffd6f5,#fff);--fr:linear-gradient(120deg,#ff9be8,#9be7ff,#fff27a);--ff:#1b1f5e;--fa:sh 10s ease infinite;--fsp:block;--gd:block;--bg-grid:rgba(27,31,94,.07);--bg-dots:transparent}
html[data-theme="yk"] .acc{background:linear-gradient(180deg,#fff 0,#8fb3ff 45%,#fff 55%,#ff7ae6 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:1.5px #1b1f5e;width:fit-content}
html[data-theme="vapor"]{--bg:#1a0b3a;--fg:#ffe9ff;--mut:#c7a6ff;--card:#2a1260;--line:rgba(255,113,206,.4);--acc:#01cdfe;--acc2:#ff71ce;--accfg:#1a0b3a;--aurora-1:rgba(255,113,206,.35);--aurora-2:rgba(1,205,254,.28);--aurora-3:rgba(185,103,255,.4);color-scheme:dark;--fb:"Share Tech Mono",ui-monospace,monospace;--fh:"Press Start 2P",monospace;--hw:400;--uw:400;--tt:uppercase;--tu:uppercase;--ls:-.02em;--lu:.08em;--lh:1.25;--hs:.38;--ow:2px;--r:0;--rb:0;--bw:2px;--sh:4px 4px 0 #ff71ce;--cl:#ff71ce;--pc1:linear-gradient(135deg,#3b1a86,#b967ff);--pc2:linear-gradient(135deg,#ff71ce,#6a2fb0);--pf:#fff;--tb:linear-gradient(160deg,#ff71ce,#b967ff);--tb2:linear-gradient(160deg,#01cdfe,#3b1a86);--tf:#fff;--fr:linear-gradient(180deg,#ff71ce,#ffb86c 55%,#ffe66d);--ff:#1a0b3a;--gd:block;--bg-grid:rgba(255,113,206,.12);--bg-dots:transparent;--go:.18}
html[data-theme="vapor"] .bg-fx::before{content:"";position:absolute;left:50%;bottom:22%;width:min(46vw,420px);aspect-ratio:1;margin-left:calc(min(46vw,420px)/-2);border-radius:50%;background:linear-gradient(180deg,#ffe66d,#ff71ce);-webkit-mask:repeating-linear-gradient(180deg,#000 0 14px,transparent 14px 18px);mask:repeating-linear-gradient(180deg,#000 0 14px,transparent 14px 18px);opacity:.35}
html[data-theme="vapor"] .bg-fx::after{content:"";position:absolute;left:-40%;right:-40%;bottom:0;height:34vh;background:linear-gradient(rgba(255,113,206,.5) 1px,transparent 1px) 0 0/100% 36px,linear-gradient(90deg,rgba(255,113,206,.5) 1px,transparent 1px) 0 0/56px 100%;transform:perspective(260px) rotateX(62deg);transform-origin:50% 100%;opacity:.5}
html[data-theme="memphis"]{--bg:#fff3d9;--fg:#1c1c1c;--mut:#3a3a3a;--card:#fff;--line:#1c1c1c;--acc:#ff5a8a;--acc2:#ff5a8a;--accfg:#1c1c1c;--aurora-1:transparent;--aurora-2:transparent;--aurora-3:transparent;color-scheme:light;--fb:Poppins,system-ui,sans-serif;--hw:800;--uw:700;--ls:-.04em;--hs:.9;--ow:2px;--r:20px;--bw:3px;--sh:6px 6px 0 #1c1c1c;--cl:#1c1c1c;--pc1:#ff5a8a;--pc2:#3ac7e0;--pf:#1c1c1c;--tb:#ffd23f;--tb2:#b8f2c9;--fr:#b8a6ff;--ff:#1c1c1c}
html[data-theme="memphis"] .bg-fx::before{content:"";position:absolute;inset:0;background:radial-gradient(#ff5a8a 2.5px,transparent 3px) 0 0/34px 34px,repeating-linear-gradient(135deg,transparent 0 22px,rgba(58,199,224,.35) 22px 26px);opacity:.4}
html[data-theme="memphis"] .bg-fx::after{content:"";position:absolute;right:6%;top:18%;width:110px;height:110px;border-radius:50%;background:#ffd23f;border:3px solid #1c1c1c;box-shadow:-28vw 55vh 0 -10px #b8f2c9,-62vw 22vh 0 -30px #ff5a8a}
html[data-theme="oled"]{--bg:#000;--fg:#f4f4f5;--mut:#8a8a93;--card:#0a0a0a;--line:#1f1f23;--acc:#00ff9c;--acc2:#00ff9c;--accfg:#000;color-scheme:dark;--fb:"Space Grotesk",system-ui,sans-serif;--hw:600;--ls:-.045em;--hs:.95;--r:16px;--cl:#26262b;--pc1:#0b0b0d;--pc2:#00150d;--pf:#f4f4f5;--tb:#0b0b0d;--tb2:#00150d;--fr:#050505;--ff:#f4f4f5;--bgd:none;--go:.07}

/* ===== Industry & gaming ===== */
html[data-theme="game"]{--bg:#cdeeff;--fg:#2b2a4c;--mut:#4b4a78;--card:#fff;--line:#2b2a4c;--acc:#ff6b6b;--acc2:#ff8a00;--accfg:#fff;--aurora-1:rgba(255,180,0,.3);--aurora-2:rgba(108,92,231,.25);--aurora-3:rgba(0,184,148,.25);color-scheme:light;--fb:Nunito,system-ui,sans-serif;--fh:Fredoka,sans-serif;--hw:700;--uw:800;--ls:-.01em;--hs:.92;--ow:2px;--r:30px;--bw:3px;--sh:0 7px 0 rgba(43,42,76,.35);--cl:#2b2a4c;--pc1:#6c5ce7;--pc2:#00b894;--pf:#fff;--tb:#ffeaa7;--tb2:#fab1a0;--fr:linear-gradient(120deg,#6c5ce7,#00b894);--fsp:block}
html[data-theme="game"] .btn,html[data-theme="game"] .pills span,html[data-theme="game"] .tile{transition:transform .35s cubic-bezier(.34,1.8,.64,1),background .2s,color .2s}
html[data-theme="game"] .btn:hover,html[data-theme="game"] .pills span:hover{transform:translateY(-6px) scale(1.07) rotate(-2deg)}
html[data-theme="game"] .btn:active{transform:translateY(3px) scale(.95)}
html[data-theme="game"] .btn.p{background:#ff6b6b;color:#fff}
html[data-theme="game"] .bar{height:14px;border:3px solid #2b2a4c;border-left:0;border-radius:0 99px 99px 0;background:repeating-linear-gradient(45deg,#ffb400 0 12px,#ff6b6b 12px 24px)}
html[data-theme="skeuo"]{--bg:#4a3220;--fg:#f5e6c8;--mut:#d3bf99;--card:#3a2618;--line:#2a1a0e;--acc:#d9a441;--acc2:#e0b050;--accfg:#2a1a0e;--aurora-1:rgba(217,164,65,.18);--aurora-2:transparent;--aurora-3:rgba(120,60,20,.3);color-scheme:dark;--fb:Lora,Georgia,serif;--fh:"Bree Serif",Georgia,serif;--hw:400;--uw:700;--ls:-.01em;--hs:.9;--ow:1.5px;--r:18px;--bw:2px;--sh:inset 0 1px 0 rgba(255,255,255,.28),0 4px 0 #1f1209,0 12px 22px rgba(0,0,0,.5);--cl:#1f1209;--pc1:linear-gradient(160deg,#7a4a2a,#3e2414);--pc2:linear-gradient(160deg,#5b2a2a,#2c1212);--pf:#f5e6c8;--tb:linear-gradient(160deg,#8a5a34,#4a2c18);--tb2:linear-gradient(160deg,#6a3030,#341616);--tf:#f5e6c8;--fr:linear-gradient(160deg,#8a5a34,#3a2012);--ff:#f5e6c8}
html[data-theme="skeuo"] body{background:repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0 3px,transparent 3px 11px),linear-gradient(#5a3d26,#3a2616)}
html[data-theme="skeuo"] :is(.btn,.pills span,#conn){background:linear-gradient(#e8c26a,#b98a2e);color:#2a1a0e;border-color:#6b4a14;text-shadow:0 1px 0 rgba(255,255,255,.4)}
html[data-theme="skeuo"] :is(.btn,.pills span,#conn):hover{filter:brightness(1.1)}
html[data-theme="skeuo"] :is(.pane,.mcard,.frame){outline:2px dashed rgba(245,230,200,.4);outline-offset:-10px}

/* ===== Tren visual & UI terbaru ===== */
html[data-theme="spatial"]{--bg:#101428;--fg:#fff;--mut:rgba(255,255,255,.72);--card:rgba(255,255,255,.1);--line:rgba(255,255,255,.22);--acc:#8ab4ff;--acc2:#a9c7ff;--accfg:#0b1020;--aurora-1:rgba(80,120,255,.45);--aurora-2:rgba(180,100,255,.35);--aurora-3:rgba(80,220,255,.28);color-scheme:dark;--fb:Inter,system-ui,sans-serif;--hw:600;--ls:-.045em;--hs:.92;--r:36px;--sh:0 24px 60px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.35);--cl:rgba(255,255,255,.22);--cb:rgba(255,255,255,.1);--bf:blur(40px) saturate(1.8);--pc1:rgba(255,255,255,.12);--pc2:rgba(255,255,255,.18);--pf:#fff;--tb:rgba(255,255,255,.12);--tb2:rgba(255,255,255,.2);--tf:#fff;--fr:rgba(255,255,255,.1);--fsp:block;--go:.3}
html[data-theme="spatial"] body{background:radial-gradient(120% 90% at 20% 0%,#2a3a8a,#101428 60%) fixed}
html[data-theme="clay"]{--bg:#fdeaf1;--fg:#4a3b57;--mut:#7a6a88;--card:#fff5f9;--line:#f3cfe0;--acc:#ff8fb1;--acc2:#7c6cf0;--accfg:#fff;--aurora-1:rgba(255,143,177,.3);--aurora-2:rgba(124,108,240,.25);--aurora-3:rgba(191,232,255,.5);color-scheme:light;--fb:Nunito,system-ui,sans-serif;--fh:"Baloo 2",sans-serif;--hw:800;--ls:-.02em;--hs:.95;--r:40px;--bw:0px;--sh:10px 12px 24px rgba(170,100,150,.3),inset -8px -8px 14px rgba(0,0,0,.08),inset 8px 8px 14px rgba(255,255,255,.75);--cl:transparent;--pc1:#ffb3c9;--pc2:#b9a8ff;--pf:#4a3b57;--tb:#bfe8ff;--tb2:#ffe3a3;--tf:#4a3b57;--fr:#ffcadb;--ff:#4a3b57}
html[data-theme="clay"] .btn.p{background:var(--acc2);color:#fff}
html[data-theme="holo"]{--bg:#0d0b1f;--fg:#f5f3ff;--mut:#b4aed6;--card:rgba(255,255,255,.07);--line:rgba(255,255,255,.18);--acc:#7af7e0;--acc2:#c9a8ff;--accfg:#0d0b1f;--aurora-1:rgba(0,255,200,.4);--aurora-2:rgba(160,90,255,.5);--aurora-3:rgba(255,100,200,.4);color-scheme:dark;--fb:"Plus Jakarta Sans",system-ui,sans-serif;--fh:Syne,sans-serif;--hw:700;--ls:-.04em;--hs:.92;--r:32px;--cl:rgba(255,255,255,.28);--cb:rgba(255,255,255,.07);--bf:blur(16px);--pc1:linear-gradient(135deg,#0fd9b0,#6c4cff);--pc2:linear-gradient(135deg,#ff5fd0,#8c7bff);--pf:#fff;--tb:linear-gradient(150deg,#7af7e0,#a98bff);--tb2:linear-gradient(150deg,#ff9be8,#ffd36a);--tf:#0d0b1f;--fr:linear-gradient(120deg,#7af7e0,#a98bff,#ff9be8,#ffd36a);--fa:sh 10s ease infinite;--fsp:block;--go:.2}
html[data-theme="holo"] .acc{background:linear-gradient(90deg,#7af7e0,#c9a8ff,#ff9be8,#ffd36a,#7af7e0);background-size:200% 100%;animation:holo 6s linear infinite;-webkit-background-clip:text;background-clip:text;color:transparent;width:fit-content}
@keyframes holo{to{background-position:200% 0}}
html[data-theme="acid"]{--bg:#050505;--fg:#e8ffb0;--mut:#9fb36a;--card:#0d0d0d;--line:#d7ff00;--acc:#ff00e5;--acc2:#d7ff00;--accfg:#000;--aurora-1:rgba(255,0,229,.3);--aurora-2:rgba(0,240,255,.25);--aurora-3:rgba(215,255,0,.2);color-scheme:dark;--fb:"Space Mono",ui-monospace,monospace;--fh:Unbounded,sans-serif;--hw:900;--uw:700;--tt:uppercase;--tu:uppercase;--ls:-.04em;--lu:.04em;--lh:1;--hs:.6;--ow:2px;--r:0;--rb:0;--bw:2px;--sh:5px 5px 0 #ff00e5;--cl:#d7ff00;--pc1:#d7ff00;--pc2:#ff00e5;--pf:#000;--tb:#d7ff00;--tb2:#ff00e5;--tf:#000;--fr:repeating-linear-gradient(45deg,#d7ff00 0 18px,#000 18px 36px);--ff:#fff;--gd:block;--bg-grid:rgba(215,255,0,.1);--go:.15}
html[data-theme="acid"] :is(.big,.stm,.ll a,.it h3,.tile b){text-shadow:3px 0 #ff00e5,-3px 0 #00f0ff}
html[data-theme="acid"] .hn{animation:acidj 4s steps(1) infinite}
@keyframes acidj{0%,91%,100%{transform:none}93%{transform:translate(5px,-2px) skewX(8deg)}96%{transform:translate(-6px,1px)}}

/* ===== Cetak & seni klasik ===== */
html[data-theme="swiss"]{--bg:#f4f4f0;--fg:#0a0a0a;--mut:#4a4a4a;--card:#fff;--line:#0a0a0a;--acc:#e30613;--acc2:#e30613;--accfg:#fff;--aurora-1:transparent;--aurora-2:transparent;--aurora-3:transparent;color-scheme:light;--fb:Archivo,"Helvetica Neue",Arial,sans-serif;--hw:800;--ls:-.055em;--hs:.95;--ow:2px;--r:0;--rb:0;--bw:2px;--cl:#0a0a0a;--pc1:#0a0a0a;--pc2:#e30613;--pf:#fff;--tb:#0a0a0a;--tb2:#e30613;--tf:#fff;--fr:#0a0a0a;--ff:#fff;--gd:block;--bg-grid:rgba(10,10,10,.09);--bg-dots:transparent}
html[data-theme="swiss"] .bg-grid{-webkit-mask-image:none;mask-image:none;background-size:8.3333% 100%,100% 72px,0 0}
html[data-theme="swiss"] .hn .ln:nth-child(2){padding-left:8.3333%}
html[data-theme="deco"]{--bg:#0b0b0b;--fg:#ecdca8;--mut:#a89a6c;--card:#141210;--line:#6e5a2a;--acc:#d4af37;--acc2:#d4af37;--accfg:#0b0b0b;--aurora-1:rgba(212,175,55,.14);--aurora-2:transparent;--aurora-3:rgba(192,192,192,.08);color-scheme:dark;--fb:"Josefin Sans",system-ui,sans-serif;--fh:Cinzel,Georgia,serif;--hw:600;--uw:600;--tt:uppercase;--tu:uppercase;--ls:.02em;--lu:.14em;--lh:1.1;--hs:.62;--ow:1px;--r:0;--rb:0;--bw:1px;--cl:#d4af37;--pc1:linear-gradient(135deg,#1c1810,#2e2512);--pc2:linear-gradient(135deg,#101010,#26261f);--pf:#ecdca8;--tb:linear-gradient(150deg,#1c1810,#2e2512);--tb2:linear-gradient(150deg,#1a1a1a,#2c2c2c);--tf:#ecdca8;--fr:linear-gradient(135deg,#1c1810,#3a2e14);--ff:#ecdca8;--gd:block}
html[data-theme="deco"] .bg-grid{background-image:linear-gradient(45deg,rgba(212,175,55,.08) 1px,transparent 1px),linear-gradient(-45deg,rgba(212,175,55,.08) 1px,transparent 1px);background-size:56px 56px}
html[data-theme="deco"] :is(.pane,.mcard,.tile,.frame){outline:1px solid rgba(212,175,55,.5);outline-offset:-9px}
html[data-theme="deco"] .tag{color:#c9c9c9}
html[data-theme="deco"] .out{-webkit-text-stroke-color:#d4af37}
html[data-theme="paper"]{--bg:#ece3cc;--fg:#1d1d1d;--mut:#4a4638;--card:#fffaf0;--line:#1d1d1d;--acc:#e63946;--acc2:#e63946;--accfg:#fff;--aurora-1:transparent;--aurora-2:transparent;--aurora-3:transparent;color-scheme:light;--fb:"Special Elite","Courier New",monospace;--fh:"Bowlby One",Impact,sans-serif;--hw:400;--uw:400;--ls:-.01em;--lu:0;--lh:1.05;--hs:.8;--ow:2px;--r:6px;--rb:6px;--bw:2px;--sh:5px 7px 0 rgba(0,0,0,.28);--cl:#1d1d1d;--pc1:#ffd166;--pc2:#ef476f;--pf:#1d1d1d;--tb:#fffaf0;--tb2:#ffd166;--tf:#1d1d1d;--fr:#06d6a0;--ff:#1d1d1d}
html[data-theme="paper"] body{background:repeating-linear-gradient(0deg,rgba(0,0,0,.025) 0 2px,transparent 2px 5px),#ece3cc}
html[data-theme="paper"] .bg-fx::before{content:"";position:absolute;inset:0;background:radial-gradient(rgba(0,0,0,.12) 1px,transparent 1.3px) 0 0/8px 8px;opacity:.5}
html[data-theme="paper"] .pane:nth-of-type(odd){rotate:-.4deg}
html[data-theme="paper"] .pane:nth-of-type(even){rotate:.4deg}
html[data-theme="paper"] .mcard:nth-child(odd){rotate:-.4deg}
html[data-theme="paper"] .mcard:nth-child(even){rotate:.4deg}
html[data-theme="paper"] .tile:nth-child(odd){rotate:-2deg}
html[data-theme="paper"] .tile:nth-child(even){rotate:2deg}
html[data-theme="paper"] .pills span:nth-child(odd){rotate:-2deg}
html[data-theme="paper"] .btn{rotate:-1deg}
html[data-theme="paper"] .btn+.btn{rotate:1deg}
html[data-theme="paper"] .pane::before{content:"";position:absolute;top:-6px;left:50%;width:96px;height:28px;margin-left:-48px;background:rgba(255,255,255,.55);border:1px dashed rgba(0,0,0,.25);rotate:-3deg}

/* ===== Fungsional & industri ===== */
html[data-theme="bskeu"]{--bg:#c9c9c3;--fg:#111;--mut:#2c2c2c;--card:#dcdcd6;--line:#111;--acc:#ff4d00;--acc2:#ff4d00;--accfg:#000;--aurora-1:transparent;--aurora-2:transparent;--aurora-3:transparent;color-scheme:light;--fb:"Space Mono",ui-monospace,monospace;--fh:"Archivo Black",Impact,sans-serif;--hw:400;--uw:700;--tt:uppercase;--tu:uppercase;--ls:-.04em;--lu:.04em;--lh:.95;--hs:.85;--ow:2px;--r:0;--rb:0;--bw:3px;--cl:#111;--pc1:#dcdcd6;--pc2:#ff4d00;--pf:#111;--tb:#dcdcd6;--tb2:#ff4d00;--tf:#111;--fr:#a9a9a2;--ff:#111;--bgd:none}
html[data-theme="bskeu"] body{background:radial-gradient(rgba(0,0,0,.09) 1px,transparent 1.5px) 0 0/6px 6px,#c9c9c3}
html[data-theme="bskeu"] :is(.btn,.pills span,.thbtn,#conn){background:linear-gradient(#f4f4f0,#a9a9a4);color:#111;border:3px solid #111;box-shadow:inset 0 2px 0 #fff,inset 0 -3px 0 rgba(0,0,0,.35),0 4px 0 #111}
html[data-theme="bskeu"] :is(.btn,.pills span,.thbtn,#conn):hover{background:linear-gradient(#ff7a3d,#ff4d00);color:#000;transform:translateY(2px);box-shadow:inset 0 2px 0 rgba(255,255,255,.5),inset 0 -3px 0 rgba(0,0,0,.35),0 2px 0 #111}
html[data-theme="lowpoly"]{--bg:#0c2438;--fg:#eefaff;--mut:#a9cde0;--card:#123650;--line:rgba(160,220,255,.3);--acc:#4fd1ff;--acc2:#ffb347;--accfg:#06202f;--aurora-1:transparent;--aurora-2:transparent;--aurora-3:transparent;color-scheme:dark;--fb:"Exo 2",system-ui,sans-serif;--hw:800;--ls:-.03em;--hs:.92;--r:0;--rb:0;--bw:0px;--cl:transparent;--pc1:linear-gradient(120deg,#0f5c8a 0 36%,#1a7db5 36% 68%,#0c4a73 68%);--pc2:linear-gradient(60deg,#c43a63 0 34%,#e0527a 34% 66%,#a82e55 66%);--pf:#fff;--tb:linear-gradient(135deg,#1a7db5 0 50%,#0f5c8a 50%);--tb2:linear-gradient(45deg,#e0527a 0 50%,#a82e55 50%);--tf:#fff;--fr:linear-gradient(120deg,#0f5c8a 0 30%,#1a7db5 30% 62%,#2a9bd6 62% 80%,#0c4a73 80%);--ff:#fff}
html[data-theme="lowpoly"] body{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 500' preserveAspectRatio='xMidYMid slice'%3E%3Crect width='800' height='500' fill='%230c2438'/%3E%3Cpolygon points='0,0 260,60 120,230' fill='%23113a58'/%3E%3Cpolygon points='260,60 520,0 400,200' fill='%23154668'/%3E%3Cpolygon points='520,0 800,0 640,170' fill='%23103452'/%3E%3Cpolygon points='120,230 400,200 260,60' fill='%230f3050'/%3E%3Cpolygon points='400,200 640,170 520,0' fill='%2312405f'/%3E%3Cpolygon points='0,180 120,230 0,380' fill='%23144a6e'/%3E%3Cpolygon points='120,230 300,380 0,380' fill='%230e2f4a'/%3E%3Cpolygon points='300,380 560,330 400,200' fill='%2316506f'/%3E%3Cpolygon points='560,330 800,260 640,170' fill='%23113c5a'/%3E%3Cpolygon points='560,330 800,500 520,500' fill='%230e2f4a'/%3E%3Cpolygon points='0,380 300,380 200,500' fill='%23133f5f'/%3E%3Cpolygon points='300,380 520,500 200,500' fill='%23184d70'/%3E%3C/svg%3E") center/cover fixed,#0c2438}
html[data-theme="lowpoly"] :is(.pane,.mcard,.tile,.frame){clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,26px 100%,0 calc(100% - 26px))}
html[data-theme="lowpoly"] .btn{clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%)}

/* Font sangat lebar: perkecil judul sekunder agar tidak meluap */
html:is([data-theme="vapor"],[data-theme="acid"],[data-theme="deco"]) :is(.stm,.ll a,.it h3,.mc-body b,.stats b,.pills span,.tile b,#mn li a){font-size:clamp(1rem,2.6vw,2.2rem)}
html:is([data-theme="vapor"],[data-theme="acid"],[data-theme="deco"]) .stats b{font-size:clamp(1.6rem,5vw,4rem)}
html:is([data-theme="vapor"],[data-theme="acid"],[data-theme="deco"]) .ll a{font-size:clamp(1.1rem,3.6vw,3.2rem)}
html:is([data-theme="vapor"],[data-theme="acid"],[data-theme="deco"]) :is(.tile b,.pills span){font-size:clamp(.7rem,1.1vw,1rem)}
html:is([data-theme="vapor"],[data-theme="acid"],[data-theme="deco"]) #mn li a{font-size:clamp(1.2rem,5vh,2.4rem)}

/* ===== FIX 1: hero selalu muat di layar pertama (semua tema) =====
   --hh  = tinggi header + safe-area
   --hf  = tinggi blok bawah hero (diukur JS; default sebelum JS jalan)
   --lb  = tinggi 3 baris judul dalam satuan em (bergantung line-height tema)
   --hav = sisa tinggi yang boleh dipakai judul */
:root{--hh:calc(66px + env(safe-area-inset-top,0px) + env(safe-area-inset-bottom,0px));--hf:190px;--lb:2.64;--hav:calc(100svh - var(--hh) - 2*clamp(16px,3vw,32px) - var(--hf) - 8px)}
@media(max-width:700px){:root{--hf:290px}}
html[data-nt]{--lb:calc(3*(var(--lh) + .14))}
main .pg>.hero{min-height:calc(100svh - var(--hh))}
.hn,html[data-nt] .hn{font-size:clamp(calc(3.2rem*var(--hs,1)),min(calc(17.5vw*var(--hs,1)),calc(var(--hav)/var(--lb,2.64))),calc(19rem*var(--hs,1)))}
/* kunci scroll selama loader tampil, supaya halaman tidak "nyangkut" di tengah */
html.ldk,html.ldk body{overflow:hidden}

/* ===== FIX 2: panel & popup tema benar-benar solid (tidak tembus pandang) =====
   Lapisan --card (yang bisa transparan) ditumpuk di atas --bg yang solid. */
#tp,.tkc{background-color:var(--bg);background-image:linear-gradient(var(--card),var(--card))}
html[data-theme="glass"] #tp{background:#33279a}
html[data-nt] header{--pb:color-mix(in srgb,var(--bg) 96%,transparent)}

/* ================= REVISI ================= */

/* --- Logo SVG --- */
.hlogo svg{width:22px;height:21px;display:block}

/* --- Frame foto: besar, datar (tanpa gradient) --- */
main .pg .frame{height:clamp(380px,76svh,820px);background:var(--card)!important;animation:none!important}
main .pg .frame::before{display:none!important}
.frame .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block}
.frame.np .ph{display:none}
.frame.np{border:2px dashed var(--line)}
.frame .phf{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px 24px 120px;text-align:center;background:none;border:0;color:var(--fg);font:inherit;cursor:pointer}
.frame.np .phf{display:flex}
.frame .phf svg{width:56px;height:56px;opacity:.65}
.frame .phf b{font-size:clamp(1.2rem,2.4vw,1.8rem);text-transform:uppercase;letter-spacing:-.03em;font-weight:900}
.frame .phf span{max-width:400px;font-size:.95rem;color:var(--mut)}
.frame .pf{right:auto;max-width:calc(100% - 2*clamp(16px,3vw,40px));z-index:2}
.frame .pf>div{background:rgba(8,9,12,.62);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding:14px 20px;border-radius:16px;color:#fff;border:1px solid rgba(255,255,255,.12)}
.frame .pf b{font-size:clamp(1.05rem,2.2vw,1.7rem)}
.frame .pf span{display:block;margin-top:4px;font-size:.85rem;opacity:.85}
@media(max-width:700px){main .pg .frame{height:clamp(360px,68svh,560px)}}

/* --- Tombol tema + panel: animasi halus 0,4s --- */
#tp,#tp.dk{display:block;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-10px) scale(.97);transform-origin:100% 0;transition:opacity .4s cubic-bezier(.16,1,.3,1),transform .4s cubic-bezier(.16,1,.3,1),visibility 0s linear .4s}
#tp.open,#tp.dk.open{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .4s cubic-bezier(.16,1,.3,1),transform .4s cubic-bezier(.16,1,.3,1),visibility 0s}
#tp.dk.open{animation:none}
header .thbtn{transition:background .4s,color .4s,border-color .4s,transform .4s cubic-bezier(.16,1,.3,1)}
header .thbtn[aria-expanded="true"]{transform:rotate(180deg);background:var(--pa);color:var(--pat);border-color:var(--pa)}
header .thbtn:active{transform:scale(.88)}
header .thbtn[aria-expanded="true"]:active{transform:rotate(180deg) scale(.88)}
@media(prefers-reduced-motion:reduce){#tp,#tp.dk,#tp.open,#tp.dk.open{transition:none!important}}

/* --- Hover/fokus tidak "nyangkut" di layar sentuh --- */
a:focus:not(:focus-visible),button:focus:not(:focus-visible){outline:none}
.btn:active{transform:scale(.96)}
@media(hover:none){
header nav a:not(.on):hover{background:none;color:var(--pt)}
header .thbtn:not([aria-expanded="true"]):hover{background:transparent;color:var(--pt);border-color:var(--pbd);transform:none}
#conn:hover{transform:none;opacity:1}
.btn:not(.p):hover{background:transparent;border-color:var(--fg);color:var(--fg)}
.btn.p:hover{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.pane .btn:hover{background:transparent;border-color:#fff;color:#fff}
#mn li a:hover:not(.on){color:var(--fg);padding-left:0}
#mn li a:hover:not(.on) small{color:var(--mut)}
.pills span:hover{background:transparent;border-color:var(--fg);color:var(--fg)}
}

/* --- Explore: kartu terpisah & konsisten --- */
.xl{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px)}
.xl a{position:relative;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr;gap:clamp(28px,5vw,72px) 16px;min-height:clamp(190px,20vw,260px);padding:clamp(20px,2.4vw,32px);border:2px solid var(--line);border-radius:clamp(18px,2.4vw,30px);background:color-mix(in srgb,var(--card) 88%,transparent);transition:transform .45s cubic-bezier(.16,1,.3,1),border-color .3s,background .3s}
.xl .xn{font-size:.78rem;letter-spacing:.14em;font-weight:800;color:var(--mut)}
.xl i{font-style:normal;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:2px solid var(--line);font-size:1.1rem;transition:transform .45s cubic-bezier(.16,1,.3,1),background .3s,color .3s,border-color .3s}
.xl .xb{grid-column:1/-1;align-self:end;display:flex;flex-direction:column;gap:10px}
.xl .xt{display:block;font-size:clamp(1.9rem,3.6vw,3.2rem)}
.xl .xs{font-size:.95rem;color:var(--mut);line-height:1.4}
@media(hover:hover){
.xl a:hover{transform:translateY(-6px);border-color:var(--acc2)}
.xl a:hover i{background:var(--acc2);border-color:var(--acc2);color:var(--accfg);transform:rotate(-45deg)}
}
.xl a:active{transform:scale(.98)}
html[data-nt] .xl a{border:var(--bw) solid var(--cl);border-radius:var(--r);background:var(--cb);box-shadow:var(--sh)}
html[data-nt] .xl i{border-radius:var(--rb);border-width:var(--bw)}
@media(max-width:900px){.xl{grid-template-columns:1fr}.xl a{min-height:0;gap:36px 16px}}

/* --- Kontak + footer di mobile --- */
#ct{gap:12px}
@media(max-width:700px){
#ct{flex-direction:column;align-items:stretch;margin-top:28px!important}
#ct .btn{width:100%;justify-content:space-between;padding:16px 20px;font-size:.85rem;overflow-wrap:anywhere;text-align:left}
footer{flex-direction:column;gap:6px}
}

/* --- Skills: akordion informatif --- */
.sk-lead{margin-top:clamp(28px,4vw,48px);max-width:560px;font-size:1.15rem}
.sk{margin-top:clamp(32px,5vw,64px)}
.sk-g{display:grid;grid-template-columns:minmax(200px,.75fr) 2fr;gap:clamp(16px,4vw,64px);padding:clamp(28px,4vw,52px) 0;border-top:2px solid var(--fg)}
.sk-g:last-child{border-bottom:2px solid var(--fg)}
.sk-h h3{font-size:clamp(2rem,4.2vw,3.6rem);margin:12px 0}
.sk-h p{font-size:1rem;max-width:300px}
.sk-l{list-style:none;margin:0;padding:0}
.sk-r{border-top:2px solid var(--line)}
.sk-r:first-child{border-top:0}
.sk-r:last-child{border-bottom:2px solid var(--line)}
.sk-b{width:100%;display:flex;align-items:center;gap:14px;padding:clamp(14px,2vw,22px) 0;background:none;border:0;color:var(--fg);font:inherit;text-align:left;cursor:pointer}
.sk-n{flex:1;font-size:clamp(1.5rem,3.6vw,2.8rem);transition:transform .45s cubic-bezier(.16,1,.3,1),color .3s}
.sk-r.open .sk-n{color:var(--acc2)}
.sk-p{position:relative;width:34px;height:34px;border-radius:50%;border:2px solid var(--line);flex:none;transition:transform .5s cubic-bezier(.16,1,.3,1),background .3s,border-color .3s,color .3s}
.sk-p::before,.sk-p::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:currentColor;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.sk-p::after{transform:rotate(90deg)}
.sk-r.open .sk-p{transform:rotate(180deg);background:var(--acc2);border-color:var(--acc2);color:var(--accfg)}
.sk-r.open .sk-p::after{transform:rotate(0)}
.sk-d{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.16,1,.3,1)}
.sk-r.open .sk-d{grid-template-rows:1fr}
.sk-i{overflow:hidden;min-height:0;opacity:0;transform:translateY(-8px);transition:opacity .4s,transform .55s cubic-bezier(.16,1,.3,1)}
.sk-r.open .sk-i{opacity:1;transform:none;transition-delay:.08s}
.sk-i p{font-size:1.1rem;max-width:620px;padding-bottom:14px}
.sk-u{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-bottom:clamp(16px,2.4vw,26px)}
.sk-u .c{padding:7px 14px;border-radius:999px;border:1.5px solid var(--line);font-size:.82rem;font-weight:800}
@media(hover:hover){.sk-b:hover .sk-n{color:var(--acc2);transform:translateX(10px)}}
@keyframes skIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.js .sk-g:not(.in) .sk-r{opacity:0}
.sk-g.in .sk-r{animation:skIn .7s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--r)*70ms + .1s)}
@media(max-width:800px){.sk-g{grid-template-columns:1fr}.sk-h p{max-width:none}}

/* --- Toolkit: marquee kartu berlogo --- */
.mq{-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.mq .tr{gap:clamp(12px,1.4vw,18px);padding:10px 0}
.mq .tile{flex:none;width:clamp(190px,17vw,250px);aspect-ratio:auto;height:clamp(140px,13vw,176px);padding:16px;border-radius:22px;justify-content:space-between;align-items:flex-start;background:color-mix(in srgb,var(--card) 86%,transparent);color:var(--fg);border:1px solid var(--line);transform:scale(calc(var(--s,1)*var(--h,1)));transition:transform .5s cubic-bezier(.16,1,.3,1),border-color .35s,box-shadow .35s;will-change:transform}
.mq .tile::before{display:none}
.mq .tile .tm{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;flex:none;background:#f4f5f7}
.mq .tile .tm img{width:28px;height:28px;display:block}
.mq .tile .tm.nf,.mq .tile .tm.nl{background:hsl(var(--hu) 70% 55%/.16);color:hsl(var(--hu) 90% 70%)}
.mq .tile .tm em{font-style:normal;font-weight:900;font-size:1rem;letter-spacing:-.02em}
.mq .tile .tn{display:flex;flex-direction:column;gap:6px;opacity:1}
.mq .tile b{font-size:clamp(1.05rem,1.6vw,1.45rem);line-height:1;letter-spacing:-.03em}
.mq .tile .ts{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;opacity:.6}
.mq .tile::after{width:30px;height:30px;top:16px;right:16px;font-size:1rem;background:transparent;border:1px solid var(--line);transition:transform .5s cubic-bezier(.16,1,.3,1),background .3s,color .3s,border-color .3s}
.tile:focus-visible{outline:2px solid var(--acc2);outline-offset:3px}
@media(hover:hover){
.mq .tile:hover{--h:1.05;border-color:hsl(var(--hu) 80% 60%);box-shadow:0 18px 40px -18px hsl(var(--hu) 80% 50%/.55)}
.mq .tile:hover::after{transform:rotate(90deg);background:var(--acc2);color:var(--accfg);border-color:var(--acc2)}
}
html[data-nt] .mq .tile .tn{color:inherit}

/* ===== FIX kartu proyek: konten kartu yang tertutup memudar (tidak nongol di strip), bayangan lebih ringan, tinggi seragam ===== */
.stack .pane>*{opacity:max(0,calc(1 - var(--cv,0)*2.2))}
.stack .pane[data-cov]>*{visibility:hidden}
.stack .pane{box-shadow:0 -10px 28px rgba(0,0,0,.28);backface-visibility:hidden}
@media(max-width:700px){.stack .pane{box-shadow:0 -6px 16px rgba(0,0,0,.25)}}

/* ===== Particle wave 3D (Three.js) sebagai latar section My toolkit ===== */
.wavesec{position:relative;overflow:hidden;isolation:isolate}
.wavesec>canvas.wv{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:-1;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent)}

/* ===== Explore menu: kembali ke gaya lama (baris besar + garis + panah) ===== */
.xl{grid-template-columns:1fr;gap:0;border-bottom:1px solid var(--line)}
.xl a,html[data-nt] .xl a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:0;padding:clamp(14px,2vw,26px) 0;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;transition:padding .5s cubic-bezier(.16,1,.3,1),color .3s}
.xl .xn,.xl .xs{display:none}
.xl .xb{display:block;grid-column:auto;gap:0;order:1}
.xl .xt{font-size:clamp(3rem,8.4vw,9rem);line-height:.9}
.xl i,html[data-nt] .xl i{order:2;width:auto;height:auto;border:0;border-radius:0;background:transparent;color:var(--fg);font-size:clamp(1.8rem,4.4vw,3.6rem);font-weight:300;line-height:1;transition:transform .5s cubic-bezier(.16,1,.3,1),color .3s}
@media(hover:hover){
.xl a:hover,html[data-nt] .xl a:hover{transform:none;padding-left:clamp(10px,1.6vw,24px);border-color:var(--line);color:var(--acc2)}
.xl a:hover i{background:transparent;border:0;color:var(--acc2);transform:translate(8px,-8px) rotate(-45deg)}
}
.xl a:active{transform:none;opacity:.8}
@media(max-width:900px){.xl a{min-height:0;gap:16px}}

/* ===== Kontak: email di atas, LinkedIn dan GitHub bersebelahan (rapi + minimalis) ===== */
@media(max-width:700px){
#ct{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px}
#ct .btn,#ct .btn.p{width:auto;max-width:100%;justify-content:center;gap:8px;padding:14px 20px;font-size:.85rem;text-align:center}
}

/* ===== Skills: minimalis (hairline tipis, nama skill normal, penanda +/- polos) ===== */
.sk{margin-top:clamp(28px,4vw,48px)}
.sk-g{grid-template-columns:minmax(180px,.6fr) 2fr;gap:clamp(12px,4vw,56px);padding:clamp(24px,3.4vw,40px) 0;border-top:1px solid var(--line)}
.sk-g:last-child{border-bottom:1px solid var(--line)}
.sk-h .tag{font-size:.68rem}
.sk-h h3.big{font-size:clamp(1.25rem,2vw,1.6rem);font-weight:700;text-transform:none;letter-spacing:-.02em;line-height:1.2;margin:8px 0 6px}
.sk-h p{font-size:.9rem;line-height:1.5;max-width:260px}
.sk-r{border-top:1px solid var(--line)}
.sk-r:first-child{border-top:0}
.sk-r:last-child{border-bottom:0}
.sk-b{gap:12px;padding:clamp(12px,1.6vw,16px) 0}
.sk-n.big{font-size:clamp(1.05rem,1.7vw,1.35rem);font-weight:600;text-transform:none;letter-spacing:-.015em;line-height:1.3}
.sk-r.open .sk-n{color:var(--fg)}
.sk-p,.sk-r.open .sk-p{width:18px;height:18px;border:0;border-radius:0;background:none;color:var(--mut);transform:none}
.sk-r.open .sk-p{color:var(--fg)}
.sk-p::before,.sk-p::after{width:12px;height:1.5px;margin:-.75px 0 0 -6px}
.sk-i p{font-size:.95rem;line-height:1.6;max-width:560px;padding-bottom:12px}
.sk-u{gap:6px;padding-bottom:18px}
.sk-u .tag{font-size:.64rem;margin-right:4px}
.sk-u .c{padding:4px 10px;font-size:.74rem;font-weight:600;border-width:1px;color:var(--mut)}
@media(hover:hover){.sk-b:hover .sk-n{color:var(--fg);transform:translateX(4px)}.sk-b:hover .sk-p{color:var(--fg)}}
@media(max-width:800px){.sk-g{grid-template-columns:1fr;gap:6px;padding:22px 0}.sk-h{margin-bottom:8px}.sk-h p{max-width:none}.sk-n.big{font-size:1.1rem}.sk-b{padding:13px 0}}

/* ===== Used in: chip proyek jadi link ke GitHub (panah ↗) ===== */
.sk-u a.c{display:inline-flex;align-items:center;gap:6px;transition:color .25s,border-color .25s}
.sk-u a.c .ar{font-size:.8em;line-height:1;transition:transform .35s cubic-bezier(.16,1,.3,1)}
@media(hover:hover){.sk-u a.c:hover{color:var(--fg);border-color:var(--fg)}.sk-u a.c:hover .ar{transform:translate(2px,-2px)}}
.sk-u a.c:focus-visible{outline:2px solid var(--acc2);outline-offset:2px}

/* ===== Semua panah: beranimasi serong kanan atas saat hover / tap ===== */
.ar{display:inline-block;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.xl i{transition:transform .5s cubic-bezier(.16,1,.3,1),color .3s}
.xl a:active i{transform:translate(8px,-8px) rotate(-45deg)}
.btn:active .ar,.sk-u a.c:active .ar{transform:translate(3px,-3px)}
@media(hover:hover){.btn:hover .ar,.sk-u a.c:hover .ar{transform:translate(3px,-3px)}}
@media(prefers-reduced-motion:reduce){.ar,.xl i{transition:none}}

/* ===== Foto desktop: tampil tajam (tidak diperbesar paksa), sisi bingkai diisi blur dari foto yang sama ===== */
.frame .phb{position:absolute;inset:-30px;background:center/cover no-repeat;filter:blur(30px) brightness(.55) saturate(1.2);display:none}
@media(min-width:901px){
.frame .phb{display:block}
.frame.np .phb{display:none}
.frame .ph{object-fit:contain;object-position:50% 50%}
}

/* ===== Manifesto: alur stack, garis di sebelah kiri nama dan sinkron dengan scroll ===== */
.flow{margin-top:clamp(32px,5vw,64px)}
.fl-row{--fp:0;list-style:none;margin:0 0 0 4px;padding:0;position:relative;border-left:1px solid var(--fg)}
.fl-st{position:relative;min-width:0;padding:clamp(14px,2.2vw,30px) 0 clamp(14px,2.2vw,30px) clamp(26px,4vw,56px)}
.fl-st::before{content:"";position:absolute;left:-5px;top:50%;margin-top:-4.5px;width:9px;height:9px;border:2px solid var(--fg);border-radius:var(--rb,50%);background:var(--bg);transition:background .3s,border-color .3s}
.fl-st .big{display:block;font-size:clamp(2.2rem,7.4vw,6.4rem);line-height:.95;overflow-wrap:anywhere}
/* Animasi mengikuti scroll: JS mengisi --fp (0 sampai 1) di .fl-row dan menambahkan .fx pada .flow */
.fl-row::before{content:"";position:absolute;left:-1.5px;top:0;bottom:0;width:2px;background:var(--acc2);transform-origin:50% 0;transform:scaleY(var(--fp));opacity:0;pointer-events:none}
.fl-row::after{content:"";position:absolute;left:-5px;top:calc(var(--fp)*(100% - 9px));width:9px;height:9px;border-radius:var(--rb,50%);background:var(--acc2);box-shadow:0 0 14px var(--acc2);opacity:0;pointer-events:none}
.fx .fl-row::before{opacity:1}
.fx .fl-row::after{opacity:min(1,calc(var(--fp)*40))}
.fx .fl-st .big{opacity:.3;transition:opacity .4s}
.fx .fl-st.on .big{opacity:1}
.fx .fl-st.on::before{background:var(--acc2);border-color:var(--acc2)}
html:is([data-theme="vapor"],[data-theme="acid"],[data-theme="deco"]) .fl-st .big{font-size:clamp(1rem,2.6vw,2.2rem)}
@media(max-width:700px){
.fl-st{padding:12px 0 12px 22px}
.fl-st .big{font-size:clamp(1.9rem,9.6vw,2.8rem)}
}

/* ===== About: teks dipecah per kalimat dengan jarak lega agar mudah dibaca ===== */
.ab{display:flex;flex-direction:column;gap:clamp(22px,3.4vw,44px);margin-top:clamp(32px,5vw,64px)}
.ab .stm.sm{line-height:1.4;letter-spacing:-.02em;max-width:34em}
.it p{margin-top:12px;line-height:1.5}

/* ===== Navbar: pil penanda yang meluncur + label menu bergulir saat hover (diaktifkan JS lewat .nvx) ===== */
header nav.nvx{position:relative}
header nav.nvx a,header nav.nvx a:hover,header nav.nvx a.on{background:none;color:var(--pt)}
header nav.nvx a.lit,header nav.nvx a.lit:hover{color:var(--pat)}
header nav.nvx a{position:relative;z-index:1}
.nv-i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:var(--rb,999px);background:var(--pa);opacity:0;pointer-events:none;z-index:0}
header nav.nvx.rdy .nv-i{transition:transform .5s cubic-bezier(.16,1,.3,1),width .5s cubic-bezier(.16,1,.3,1),opacity .3s}
header nav.nvx.has .nv-i{opacity:1}
.rl{display:block;overflow:hidden;height:1.5em;line-height:1.5}
.rl-in{display:flex;flex-direction:column;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.rl-in>span{display:block;height:1.5em;white-space:nowrap}
@media(hover:hover){header nav.nvx a:hover .rl-in,header nav.nvx a:focus-visible .rl-in{transform:translateY(-1.5em)}}

/* ===== Footer menu (email, LinkedIn, GitHub): panah ↗ ikut bergerak saat hover atau tap ===== */
#mn .ft a{width:fit-content;transition:color .25s}
#mn .ft a:active{color:var(--acc2)}
#mn .ft a:active .ar{transform:translate(3px,-3px)}
@media(hover:hover){#mn .ft a:hover{color:var(--acc2)}#mn .ft a:hover .ar{transform:translate(3px,-3px)}}