/* ==========================================================================
   JANU — Design tokens
   Catatan: font memakai font sistem (bukan CDN) supaya hemat kuota.
   Kalau nanti mau font persis "Space Grotesk" / "JetBrains Mono", tinggal
   taruh file .woff2 di assets/fonts/ lalu tambahkan @font-face di atas sini —
   nama font itu sudah didaftarkan duluan di font-stack di bawah.
   ========================================================================== */

:root{
  /* warna dasar */
  --void:        #07070c;
  --panel:       #101019;
  --panel-2:     #15151f;
  --line:        rgba(139,92,246,.18);
  --line-strong: rgba(139,92,246,.4);

  --violet:      #8b5cf6;
  --violet-2:    #6d3ff0;
  --cyan:        #3fd4ff;

  --ink:         #f1eff7;
  --ink-dim:     #a9a6b8;
  --ink-faint:   #6b6878;

  --glow-violet: 0 0 0 1px rgba(139,92,246,.35), 0 0 40px -12px rgba(139,92,246,.55);
  --glow-cyan:   0 0 0 1px rgba(63,212,255,.35), 0 0 40px -14px rgba(63,212,255,.5);

  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 26px;

  --font-display: "Space Grotesk", ui-sans-serif, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body:    ui-sans-serif, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

  --maxw: 1120px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--void);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  margin:0;
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.08;
  color:var(--ink);
}

p{ margin:0; color:var(--ink-dim); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }

::selection{ background:var(--violet); color:#fff; }

:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
  border-radius:4px;
}

.container{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 24px;
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:.8rem;
  color:var(--cyan);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.eyebrow::before{
  content:"";
  width:6px;height:6px;border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 10px 2px var(--cyan);
}

/* ---------- background fx: dot grid + soft blobs, CSS-only, no video ---------- */
.bg-fx{
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;
  background:
    radial-gradient(circle at 1px 1px, rgba(139,92,246,.16) 1px, transparent 0) 0 0/34px 34px,
    var(--void);
}
.bg-fx::before,
.bg-fx::after{
  content:"";
  position:absolute;
  width:46vw; height:46vw;
  max-width:640px; max-height:640px;
  border-radius:50%;
  filter:blur(110px);
  opacity:.35;
}
.bg-fx::before{
  top:-12%; left:-8%;
  background:var(--violet-2);
}
.bg-fx::after{
  bottom:-16%; right:-10%;
  background:var(--cyan);
  opacity:.18;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 26px;
  border-radius:999px;
  font-size:.95rem;
  font-weight:600;
  border:1px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }

.btn-primary{
  background:linear-gradient(135deg, var(--violet), var(--violet-2));
  color:#fff;
  box-shadow:var(--glow-violet);
}
.btn-primary:hover{ box-shadow:0 0 0 1px rgba(139,92,246,.5), 0 0 48px -8px rgba(139,92,246,.75); }

.btn-ghost{
  background:rgba(255,255,255,.02);
  color:var(--ink);
  border-color:var(--line);
  backdrop-filter:blur(6px);
}
.btn-ghost:hover{ border-color:var(--line-strong); background:rgba(139,92,246,.08); }

.btn-sm{ padding:10px 18px; font-size:.85rem; }

/* ---------- scroll reveal ---------- */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.reveal.in-view{ opacity:1; transform:none; }

/* ---------- section shell ---------- */
.section{ padding:112px 0; position:relative; }
.section-head{ max-width:600px; margin-bottom:52px; }
.section-head h2{ font-size:clamp(1.8rem, 3.4vw, 2.6rem); margin-top:14px; }
.section-head p{ margin-top:14px; font-size:1.02rem; }

/* ==========================================================================
   Landing page (index.html)
   ========================================================================== */
.landing{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.landing-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:28px 24px;
  max-width:var(--maxw);
  margin:0 auto;
  width:100%;
}
.logo-mark{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.15rem;
  letter-spacing:-.02em;
  display:flex;
  align-items:center;
  gap:10px;
}
.logo-mark .dot{
  width:9px;height:9px;border-radius:50%;
  background:linear-gradient(135deg,var(--violet),var(--cyan));
  box-shadow:0 0 12px 2px rgba(139,92,246,.7);
}

.landing-hero{
  flex:1;
  display:flex;
  align-items:center;
  padding:40px 24px 80px;
  position:relative;
}
.landing-hero .inner{
  max-width:var(--maxw);
  margin:0 auto;
  width:100%;
  display:grid;
  gap:28px;
}
.landing-hero h1{
  font-size:clamp(3.4rem, 13vw, 8.5rem);
  line-height:.94;
  background:linear-gradient(135deg, #fff 20%, var(--violet) 85%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.landing-hero .lede{
  max-width:520px;
  font-size:1.08rem;
  color:var(--ink-dim);
}
.landing-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:6px;
}
.float-dot{
  position:absolute;
  border-radius:50%;
  background:radial-gradient(circle, var(--cyan), transparent 70%);
  opacity:.6;
  animation:float 7s ease-in-out infinite;
  pointer-events:none;
}
@keyframes float{
  0%,100%{ transform:translateY(0) translateX(0); }
  50%{ transform:translateY(-22px) translateX(8px); }
}
.scroll-cue{
  position:absolute;
  left:24px; bottom:86px;
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:.72rem;
  color:var(--ink-faint);
}
.scroll-cue .line{
  width:26px; height:1px;
  background:linear-gradient(90deg, var(--cyan), transparent);
}
@media (max-width:720px){ .scroll-cue{ display:none; } }

.landing-footer{
  padding:26px 24px;
  border-top:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:.78rem;
  color:var(--ink-faint);
  text-align:center;
}

/* ==========================================================================
   Dashboard shell + nav
   ========================================================================== */
.topnav{
  position:sticky; top:0; z-index:40;
  background:rgba(7,7,12,.72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.topnav .bar{
  max-width:var(--maxw);
  margin:0 auto;
  padding:16px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.nav-links{
  display:flex;
  gap:30px;
  font-size:.92rem;
  color:var(--ink-dim);
}
.nav-links a{ transition:color .15s ease; }
.nav-links a:hover{ color:var(--ink); }

.nav-toggle{
  display:none;
  background:none;
  border:1px solid var(--line);
  border-radius:8px;
  width:40px; height:40px;
  align-items:center;
  justify-content:center;
  color:var(--ink);
}
.nav-mobile{
  display:none;
  flex-direction:column;
  gap:2px;
  padding:8px 24px 20px;
  border-bottom:1px solid var(--line);
  background:rgba(7,7,12,.94);
}
.nav-mobile a{
  padding:12px 4px;
  color:var(--ink-dim);
  border-bottom:1px solid rgba(255,255,255,.04);
}
.nav-mobile.open{ display:flex; }

/* ---------- hero (dashboard) ---------- */
.hero{
  padding:96px 0 70px;
}
.hero .inner{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:44px;
  align-items:center;
}
.hero-photo{
  width:132px; height:132px;
  border-radius:28px;
  overflow:hidden;
  border:1px solid var(--line-strong);
  box-shadow:var(--glow-violet);
  background:var(--panel);
  flex-shrink:0;
}
.hero-photo img{ width:100%; height:100%; object-fit:cover; }

.badge{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.02em;
  color:var(--cyan);
  border:1px solid var(--line-strong);
  padding:7px 14px;
  border-radius:999px;
  display:inline-block;
  background:rgba(63,212,255,.06);
}
.hero h1{
  margin-top:16px;
  font-size:clamp(2.1rem, 5vw, 3.4rem);
}
.hero .headline-accent{ color:var(--violet); }
.hero p.role{
  margin-top:14px;
  font-size:1.06rem;
  max-width:520px;
}
.hero-actions{
  margin-top:28px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

/* ---------- about ---------- */
.about-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:56px;
  align-items:start;
}
.skill-list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.skill-chip{
  font-family:var(--font-mono);
  font-size:.82rem;
  padding:9px 16px;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--ink-dim);
  transition:border-color .15s ease, color .15s ease, transform .15s ease;
}
.skill-chip:hover{ border-color:var(--line-strong); color:var(--ink); transform:translateY(-2px); }

/* ---------- school ---------- */
.school-card{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:28px;
  align-items:center;
  padding:34px;
  border-radius:var(--radius-l);
  border:1px solid var(--line);
  background:linear-gradient(160deg, var(--panel), var(--panel-2));
}
.school-logo{
  width:76px; height:76px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--void);
  flex-shrink:0;
}
.school-logo img{ width:100%; height:100%; object-fit:contain; padding:8px; }
.school-meta{
  display:flex;
  flex-wrap:wrap;
  gap:22px;
  margin-top:14px;
  font-family:var(--font-mono);
  font-size:.85rem;
  color:var(--ink-faint);
}
.school-meta span b{ color:var(--ink-dim); font-weight:500; }

/* ---------- projects ---------- */
.project-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
}
.project-card{
  border-radius:var(--radius-m);
  border:1px solid var(--line);
  background:var(--panel);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.project-card:hover{
  border-color:var(--line-strong);
  transform:translateY(-4px);
  box-shadow:var(--glow-violet);
}
.project-thumb{
  aspect-ratio:16/10;
  background:var(--panel-2);
  position:relative;
  overflow:hidden;
}
.project-thumb img{ width:100%; height:100%; object-fit:cover; }
.project-thumb .fallback{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono);
  color:var(--ink-faint);
  font-size:.8rem;
}
.project-body{
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
}
.project-body h3{ font-size:1.12rem; }
.project-body p{ font-size:.92rem; flex:1; }
.project-actions{
  display:flex;
  gap:10px;
  margin-top:6px;
}
.see-more-wrap{
  display:flex;
  justify-content:center;
  margin-top:38px;
}

/* ---------- music ---------- */
.player{
  display:flex;
  align-items:center;
  gap:20px;
  padding:24px 26px;
  border-radius:var(--radius-l);
  border:1px solid var(--line);
  background:linear-gradient(160deg, var(--panel), var(--panel-2));
}
.player-btn{
  width:56px; height:56px;
  border-radius:50%;
  border:1px solid var(--line-strong);
  background:linear-gradient(135deg, var(--violet), var(--violet-2));
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  box-shadow:var(--glow-violet);
}
.player-info{ flex:1; min-width:0; }
.player-info .t-title{ font-family:var(--font-display); font-weight:600; font-size:1rem; }
.player-info .t-artist{ font-family:var(--font-mono); font-size:.8rem; color:var(--ink-faint); margin-top:3px; }
.player-bar{
  margin-top:12px;
  height:4px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
}
.player-bar-fill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg, var(--violet), var(--cyan));
}

/* ---------- contact ---------- */
.contact-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
}
.contact-card{
  padding:24px;
  border-radius:var(--radius-m);
  border:1px solid var(--line);
  background:var(--panel);
  display:flex;
  flex-direction:column;
  gap:14px;
  transition:border-color .15s ease, transform .15s ease;
}
.contact-card:hover{ border-color:var(--line-strong); transform:translateY(-3px); }
.contact-card .ic{
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  border-radius:10px;
  background:rgba(139,92,246,.1);
  color:var(--cyan);
}
.contact-card .lbl{ font-family:var(--font-mono); font-size:.78rem; color:var(--ink-faint); }
.contact-card .val{ font-size:.98rem; color:var(--ink); word-break:break-word; }

footer.site-footer{
  padding:40px 0;
  border-top:1px solid var(--line);
  text-align:center;
  font-family:var(--font-mono);
  font-size:.78rem;
  color:var(--ink-faint);
}

/* ---------- scroll progress bar ---------- */
.scroll-progress{
  position:fixed;
  top:0; left:0;
  height:2px;
  width:0%;
  background:linear-gradient(90deg, var(--violet), var(--cyan));
  z-index:60;
  transition:width .1s linear;
}

/* ---------- nav active state ---------- */
.nav-links a.active,
.nav-mobile a.active{ color:var(--ink); }
.nav-links a{ position:relative; }
.nav-links a.active::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-6px;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg, var(--violet), var(--cyan));
}

/* ---------- stats strip ---------- */
.stats-strip{
  display:flex;
  flex-wrap:wrap;
  gap:36px;
  margin-top:36px;
  padding-top:28px;
  border-top:1px solid var(--line);
}
.stat-item .stat-value{
  font-family:var(--font-display);
  font-size:1.7rem;
  font-weight:700;
  background:linear-gradient(135deg, #fff, var(--violet));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.stat-item .stat-label{
  font-family:var(--font-mono);
  font-size:.74rem;
  color:var(--ink-faint);
  margin-top:4px;
}

/* ---------- focus line under hero ---------- */
.hero-focus{
  margin-top:18px;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:.9rem;
  color:var(--ink-faint);
}
.hero-focus .pulse{
  width:7px; height:7px; border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 0 0 rgba(63,212,255,.6);
  animation:pulse 2s infinite;
  flex-shrink:0;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(63,212,255,.55); }
  70%{ box-shadow:0 0 0 8px rgba(63,212,255,0); }
  100%{ box-shadow:0 0 0 0 rgba(63,212,255,0); }
}

/* ---------- skill chip with level bar ---------- */
.skill-chip{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:118px;
}
.skill-chip .skill-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.skill-chip .skill-lvl-label{
  font-size:.68rem;
  color:var(--ink-faint);
}
.skill-track{
  height:3px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
}
.skill-track-fill{
  height:100%;
  background:linear-gradient(90deg, var(--violet), var(--cyan));
  border-radius:999px;
}

/* ---------- project meta / tags ---------- */
.project-thumb .project-year{
  position:absolute;
  top:12px; right:12px;
  font-family:var(--font-mono);
  font-size:.68rem;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(7,7,12,.65);
  border:1px solid var(--line);
  color:var(--cyan);
  backdrop-filter:blur(4px);
}
.tag-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:2px;
}
.tag{
  font-family:var(--font-mono);
  font-size:.68rem;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  color:var(--ink-faint);
}

/* ---------- music equalizer ---------- */
.eq-bars{
  display:flex;
  align-items:flex-end;
  gap:3px;
  height:16px;
  margin-left:4px;
}
.eq-bars span{
  width:3px;
  border-radius:2px;
  background:var(--cyan);
  height:4px;
  opacity:.5;
}
.player.playing .eq-bars span{ animation:eq 1s ease-in-out infinite; opacity:1; }
.player.playing .eq-bars span:nth-child(1){ animation-delay:0s; }
.player.playing .eq-bars span:nth-child(2){ animation-delay:.15s; }
.player.playing .eq-bars span:nth-child(3){ animation-delay:.3s; }
@keyframes eq{
  0%,100%{ height:4px; }
  50%{ height:16px; }
}
.player-time{
  font-family:var(--font-mono);
  font-size:.7rem;
  color:var(--ink-faint);
  margin-top:6px;
  display:flex;
  justify-content:space-between;
}

/* ---------- back to top ---------- */
.back-to-top{
  position:fixed;
  right:22px; bottom:22px;
  width:46px; height:46px;
  border-radius:50%;
  border:1px solid var(--line-strong);
  background:rgba(16,16,25,.85);
  backdrop-filter:blur(8px);
  color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  opacity:0;
  pointer-events:none;
  transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease, border-color .2s ease;
  z-index:45;
}
.back-to-top.show{ opacity:1; pointer-events:auto; transform:none; }
.back-to-top:hover{ border-color:var(--cyan); }

/* ---------- footer grid ---------- */
.footer-grid{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding-bottom:26px;
}
.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:12px 22px;
  font-size:.82rem;
  color:var(--ink-faint);
}
.footer-links a:hover{ color:var(--ink); }
.footer-social{
  display:flex;
  gap:10px;
}
.footer-social a{
  width:34px; height:34px;
  border-radius:9px;
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-dim);
  transition:border-color .15s ease, color .15s ease;
}
.footer-social a:hover{ border-color:var(--line-strong); color:var(--cyan); }
.footer-bottom{
  padding-top:22px;
  border-top:1px solid var(--line);
  text-align:center;
  font-family:var(--font-mono);
  font-size:.76rem;
  color:var(--ink-faint);
}

/* ---------- responsive ---------- */
@media (max-width:920px){
  .about-grid{ grid-template-columns:1fr; gap:36px; }
  .project-grid{ grid-template-columns:repeat(2, 1fr); }
  .contact-grid{ grid-template-columns:repeat(2, 1fr); }
  .section{ padding:80px 0; }
}

@media (max-width:720px){
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; }
  .hero .inner{ grid-template-columns:1fr; text-align:left; }
  .school-card{ grid-template-columns:1fr; text-align:left; }
  .school-logo{ margin:0; }
}

@media (max-width:640px){
  .project-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .player{ flex-wrap:wrap; }
  .landing-hero h1{ font-size:clamp(3rem, 18vw, 5rem); }
  .stats-strip{ gap:22px 30px; }
  .footer-grid{ flex-direction:column; align-items:flex-start; }
  .back-to-top{ right:16px; bottom:16px; width:42px; height:42px; }
}