:root{
  --bg:#0a0a12; --card:rgba(255,255,255,.04); --line:rgba(255,255,255,.1);
  --text:#eef0ff; --muted:#9a9db8; --a1:#7c5cff; --a2:#00e0ff;
  --grad:linear-gradient(120deg,var(--a1),var(--a2));
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Space Grotesk',system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden}
.i{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* background blobs */
.blob{position:fixed;width:460px;height:460px;border-radius:50%;filter:blur(110px);opacity:.22;z-index:0;pointer-events:none;animation:float 12s ease-in-out infinite}
.b1{background:var(--a1);top:-140px;left:-120px}
.b2{background:var(--a2);bottom:-160px;right:-120px;animation-delay:-6s}
@keyframes float{50%{transform:translate(40px,50px)}}

section,footer{position:relative;z-index:1}
section{max-width:1100px;margin:0 auto;padding:100px 6vw}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* nav */
nav{position:fixed;top:0;left:0;right:0;z-index:50;height:64px;display:flex;align-items:center;gap:4px;padding:0 6vw;
  background:rgba(10,10,18,.8);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
nav a{position:relative;color:var(--muted);text-decoration:none;font-size:14px;padding:22px 14px;transition:color .25s}
nav a::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;background:var(--grad);transform:scaleX(0);transition:transform .3s}
nav a:hover{color:#fff}
nav a:hover::after,nav a.active::after{transform:scaleX(1)}
nav a.active{color:#fff}
nav .logo{margin-right:auto;padding:0;display:flex;align-items:center;color:#fff;font-size:30px;font-weight:700}
nav .logo::after{display:none}
nav .logo img{width:46px;height:46px;object-fit:contain;border-radius:10px;transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
nav .logo:hover img{transform:rotate(-8deg) scale(1.1)}

/* hero */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding-top:130px}
.hi{color:var(--a2);font-size:15px;margin-bottom:8px}
h1{font-size:clamp(64px,16vw,170px);line-height:1;letter-spacing:-.04em;font-weight:700}
.role{font-size:clamp(20px,3.4vw,32px);color:var(--muted);margin-top:16px;min-height:1.5em}
.role b{color:#fff;font-weight:500}
.caret{display:inline-block;width:3px;height:1em;background:var(--a2);margin-left:4px;vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:34px}
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;border:none;cursor:pointer;font-family:inherit;font-size:16px;font-weight:500;
  padding:13px 26px;border-radius:12px;color:#fff;text-decoration:none;transition:transform .25s,box-shadow .25s}
.btn.primary{background:var(--grad);box-shadow:0 10px 36px -12px var(--a1)}
.btn.ghost{background:var(--card);border:1px solid var(--line)}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:scale(.96)}
.btn .i{transition:transform .25s}
.btn:hover .i{transform:translateX(4px)}
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);animation:rip .6s ease-out forwards;pointer-events:none}
@keyframes rip{to{transform:scale(4);opacity:0}}

/* headings */
.tag{color:var(--a1);font-size:13px;letter-spacing:.15em;text-transform:uppercase;display:block;margin-bottom:8px}
h2{font-size:clamp(32px,5.5vw,52px);letter-spacing:-.03em;margin-bottom:14px}
.sub{color:var(--muted);max-width:520px;margin-bottom:40px}

/* reveal */
.reveal{opacity:0;transform:translateY(36px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}

/* about */
.about p{color:var(--muted);font-size:18px;max-width:640px;margin-bottom:16px}
.about p b{color:#fff;font-weight:500}

/* skills */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:40px}
.chip{background:var(--card);border:1px solid var(--line);color:var(--text);padding:10px 18px;border-radius:999px;font-family:inherit;font-size:15px;cursor:pointer;transition:.25s}
.chip:hover{border-color:var(--a1);transform:translateY(-3px)}
.chip.on{background:var(--grad);border-color:transparent}
.bars{display:grid;gap:20px;max-width:680px}
.bar-top{display:flex;justify-content:space-between;font-size:15px;margin-bottom:7px}
.bar{height:8px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:99px;background:var(--grad);transition:width 1.4s cubic-bezier(.2,.8,.2,1)}

/* projects */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:26px;cursor:pointer;transition:transform .3s,border-color .3s,background .3s;display:flex;flex-direction:column;gap:10px}
.card:hover{transform:translateY(-8px);border-color:var(--a1);background:rgba(124,92,255,.07)}
.card .ico{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;font-size:24px;background:rgba(124,92,255,.15);color:var(--a2);transition:transform .35s}
.card:hover .ico{transform:rotate(-8deg) scale(1.1)}
.card h3{font-size:20px}
.card p{color:var(--muted);font-size:15px}

/* modal */
.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;background:rgba(3,3,8,.7);backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .3s}
.modal.open{opacity:1;pointer-events:auto}
.box{position:relative;width:min(480px,100%);background:#12121f;border:1px solid var(--line);border-radius:24px;padding:32px;transform:scale(.85);transition:transform .4s cubic-bezier(.3,1.5,.5,1)}
.modal.open .box{transform:none}
.box .ico{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;font-size:28px;background:rgba(124,92,255,.15);color:var(--a2);margin-bottom:14px}
.box h3{font-size:26px;margin-bottom:8px}
.box p{color:var(--muted);margin-bottom:20px}
.x{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:none;color:#fff;font-size:16px;cursor:pointer;display:grid;place-items:center;transition:.3s}
.x:hover{transform:rotate(90deg);border-color:var(--a2)}

/* contact */
.contact{text-align:center;background:var(--card);border:1px solid var(--line);border-radius:30px;padding:64px 22px}
.contact p{color:var(--muted);margin-bottom:26px}
.socials{display:flex;gap:12px;justify-content:center;margin-top:30px}
.socials{flex-wrap:wrap}
.social{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:14px;font-size:15px;background:var(--card);border:1px solid var(--line);color:#fff;text-decoration:none;transition:.3s}
.social .i{font-size:20px}
.social:hover{transform:translateY(-5px);background:var(--grad);border-color:transparent}
footer{text-align:center;color:var(--muted);padding:30px 20px 50px;font-size:14px}
.foot-logo{display:block;width:40px;height:40px;object-fit:contain;margin:0 auto 10px;opacity:.85;transition:opacity .3s,transform .35s cubic-bezier(.3,1.5,.5,1)}
.foot-logo:hover{opacity:1;transform:scale(1.1) rotate(-6deg)}

.toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%,120px);background:#12121f;border:1px solid var(--a2);padding:11px 20px;border-radius:12px;z-index:300;transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.toast.show{transform:translate(-50%,0)}
.box{max-height:88vh;overflow:auto}

/* 1 tab = 1 halaman */
section.page{display:none}
section.page.active{display:block;animation:pageIn .55s cubic-bezier(.2,.8,.2,1)}
.hero.page.active{display:flex}
section.page:not(.hero){min-height:70svh}
@keyframes pageIn{from{opacity:0;transform:translateY(24px) scale(.985)}to{opacity:1;transform:none}}

/* ID card tergantung */
.badge-stage{position:relative;z-index:3;flex:none;width:min(100%,420px);height:372px;margin:-70px auto 4px}
.strap{position:absolute;left:50%;top:0;overflow:visible;pointer-events:none}
.strap path{fill:none;stroke-linejoin:round}
.s-edge{stroke:rgba(0,0,0,.4);stroke-width:19}
.s-body{stroke:url(#strapG);stroke-width:16}
.s-stripe{stroke:rgba(255,255,255,.55);stroke-width:2;stroke-dasharray:1 6}

.badge{--w:184px;--h:268px;--hole:20px;position:absolute;left:50%;top:0;width:var(--w);height:var(--h);
  transform-origin:0 0;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;outline:none;will-change:transform}
.badge.grab{cursor:grabbing}
.badge:focus-visible .face{box-shadow:0 0 0 3px var(--a2),0 20px 40px -14px rgba(0,0,0,.6)}
.face{background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.07) 50%,transparent 60%) padding-box,radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.2px) 0 0/12px 12px padding-box,radial-gradient(120% 55% at 50% 0,rgba(124,92,255,.38),transparent 62%) padding-box,linear-gradient(#15152b,#0c0c18) padding-box,var(--grad) border-box;position:absolute;inset:0;border-radius:18px;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:38px 12px 14px;
  border:1.5px solid transparent;
  box-shadow:0 22px 40px -14px rgba(0,0,0,.65),0 0 46px -22px var(--a1)}
.face{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 22px 40px -14px rgba(0,0,0,.65),0 0 46px -22px var(--a1)}
.face img{pointer-events:none;-webkit-user-drag:none}
.slot{position:absolute;top:16px;left:50%;width:42px;height:8px;margin-left:-21px;border-radius:99px;background:#05050b;box-shadow:inset 0 1px 3px #000,0 1px 0 rgba(255,255,255,.14)}
.b-photo{position:relative;flex:1;width:100%;border-radius:16px;padding:3px;background:var(--grad)}
.b-photo>*{position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);border-radius:13px;background:#12121f}
.b-photo span{display:grid;place-items:center;font-size:88px;font-weight:700}
.b-photo img{object-fit:cover}
.b-name{font-size:27px;font-weight:700;letter-spacing:.03em;line-height:30px;margin-top:2px}
.b-role{display:flex;align-items:center;gap:7px;flex:none;padding:5px 11px;border-radius:99px;font-size:10px;letter-spacing:.12em;white-space:nowrap;text-transform:uppercase;color:#d7d9ee;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}
.b-role i{font-style:normal;letter-spacing:0;font-weight:700;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.glare{position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(circle at var(--gx,30%) var(--gy,20%),rgba(255,255,255,.26),transparent 46%);opacity:0;transition:opacity .3s}
.badge.lit .glare{opacity:1}
/* logam penjepit tali */
.clip{position:absolute;left:50%;top:calc(var(--hole) - 30px);width:28px;height:18px;margin-left:-14px;border-radius:6px;pointer-events:none;
  background:linear-gradient(90deg,#8a8fa8,#f0f2fb 35%,#9aa0bb 62%,#d9dcee);box-shadow:0 2px 6px rgba(0,0,0,.5),inset 0 -2px 0 rgba(0,0,0,.18)}
.clip::after{content:"";position:absolute;left:50%;top:9px;width:16px;height:22px;margin-left:-8px;border-radius:10px;
  border:3.5px solid #b9bdd3;border-top-color:#eef0fa;box-shadow:0 2px 5px rgba(0,0,0,.45)}
.badge-hint{position:relative;z-index:2;font-size:12px;color:var(--muted);margin:0 0 20px;transition:opacity .6s}
.badge-hint.off{opacity:0}

/* bottom navbar: pill melayang, full glass bening ala iOS (mobile & tablet) */
.bottom-nav{display:none;position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:60;
  width:min(calc(100% - 28px),460px);justify-content:space-around;gap:2px;padding:6px;border-radius:999px;
  background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(30px) saturate(190%) brightness(1.08);backdrop-filter:blur(30px) saturate(190%) brightness(1.08);
  box-shadow:0 10px 30px -12px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(255,255,255,.12),inset 0 0 18px rgba(255,255,255,.06)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.bottom-nav{background:rgba(40,40,60,.7)}}
.bottom-nav::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 40%,rgba(255,255,255,.05))}
.bottom-nav a{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 2px 8px;border-radius:999px;
  color:rgba(255,255,255,.7);text-decoration:none;font-size:11px;font-weight:500;transition:color .25s,transform .2s;-webkit-tap-highlight-color:transparent}
.bottom-nav a::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:999px;opacity:0;transform:scale(.8);
  background:rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 0 0 1px rgba(255,255,255,.14);
  transition:opacity .3s,transform .4s cubic-bezier(.3,1.5,.5,1)}
.bottom-nav a .i{font-size:22px;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.bottom-nav a.active{color:#fff}
.bottom-nav a.active::before{opacity:1;transform:none}
.bottom-nav a.active .i{transform:translateY(-1px) scale(1.08)}
.bottom-nav a:active{transform:scale(.94)}

/* responsive */
@media(min-width:1400px){section{max-width:1240px}}
@media(max-width:768px){
  nav{display:none}
  .bottom-nav{display:flex}
  section{padding:36px 5vw 70px}
  .hero{min-height:100svh;padding-top:28px}
  .badge-stage{margin-top:0}
  footer{padding-bottom:120px}
  .toast{bottom:calc(98px + env(safe-area-inset-bottom))}
  .about p{font-size:16.5px}
}
@media(max-width:480px){
  .grid{grid-template-columns:1fr}
  .cta .btn{flex:1 1 100%;justify-content:center}
  #copyMail{width:100%;justify-content:center;font-size:14px;padding:13px 14px}
  .socials{flex-direction:column}
  .social{justify-content:center}
  .contact{padding:40px 18px;border-radius:24px}
  .box{padding:26px}
  .blob{width:300px;height:300px}
  .bottom-nav a{font-size:10.5px}
  .bottom-nav{width:calc(100% - 24px)}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* loading screen: tampil hanya di kunjungan pertama per sesi */
html:not(.fresh) .loader{display:none}
html:not(.fresh) body.loading{overflow:auto}
body.loading{overflow:hidden}
.loader{position:fixed;inset:0;z-index:999;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg);
  transition:transform .9s cubic-bezier(.77,0,.18,1);animation:loaderOut .1s linear 14s forwards}
.loader::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--grad);opacity:.7}
.loader.hide{transform:translateY(-101%)}
.l-glow{position:absolute;left:50%;top:44%;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(124,92,255,.22),rgba(0,224,255,.08) 45%,transparent 70%);animation:lGlow 3.2s ease-in-out infinite}
.l-center,.l-foot{transition:opacity .35s ease,transform .5s ease}
.loader.hide .l-center,.loader.hide .l-foot{opacity:0;transform:translateY(-14px)}
.l-center{position:relative;display:flex;flex-direction:column;align-items:center}
.l-ring{position:relative;width:132px;height:132px;display:grid;place-items:center}
.l-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.l-track{fill:none;stroke:rgba(255,255,255,.08);stroke-width:2}
.l-arc{fill:none;stroke:url(#lg);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:339.3;stroke-dashoffset:339.3}
.loader-logo{width:64px;height:64px;object-fit:contain;border-radius:16px;font-size:52px;font-weight:700;line-height:64px;text-align:center}
.l-name{margin-top:26px;font-size:15px;font-weight:700;letter-spacing:.5em;margin-right:-.5em}
.l-role{margin-top:8px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-right:-.3em}
.l-foot{position:absolute;left:24px;right:24px;bottom:max(28px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;align-items:baseline;
  font-size:12px;color:var(--muted);letter-spacing:.04em}
.l-foot b{font-weight:500;color:var(--text,#fff);font-variant-numeric:tabular-nums}
@keyframes lGlow{50%{opacity:.55;transform:scale(1.08)}}
@keyframes loaderOut{to{opacity:0;visibility:hidden}}

/* ID card jatuh: kartu disembunyikan di atas layar sampai loading selesai */
.fresh .badge-stage{visibility:hidden}
.fresh .badge-hint{opacity:0}
.badge-stage.dropping .badge{pointer-events:none}