:root{
  --bg:#010c0c;
  --grid-line: rgba(27,42,74,0.07);
  --surface:#090000;
  --ink:#ffffff;
  --ink-soft:#8894ac;
  --ink-faint:#8894ac;
  --accent:#d98e2b;
  --accent-2:#2e9e8f;
  --line:#c7d0de;
  --radius: 10px;
  --maxw: 920px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation:none !important; transition:none !important;}
}
body{
  margin:0;
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    var(--bg);
  background-size:32px 32px, 32px 32px, 100% 100%;
  color:var(--ink);
  font-family:'Inter', sans-serif;
  line-height:1.6;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
main{flex:1;}
.mono{font-family:'JetBrains Mono', monospace;}
h1,h2,h3{font-family:'Space Grotesk', sans-serif; margin:0; color:var(--ink);}
a{color:inherit;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
 
/* Nav */
header.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(6px);
  background:rgba(1,12,12,0.85);
  border-bottom:1px solid var(--line);
}
.nav-inner{max-width:var(--maxw); margin:0 auto; padding:14px 24px; display:flex; align-items:center; justify-content:space-between;}
.logo{font-family:'JetBrains Mono', monospace; font-weight:600; font-size:15px; letter-spacing:0.5px;}
.logo a{text-decoration:none; color:var(--ink);}
.logo span{color:var(--accent);}
nav.links{display:flex; gap:22px; font-size:13px; font-family:'JetBrains Mono',monospace;}
nav.links a{text-decoration:none; color:var(--ink-soft); padding:4px 2px; border-bottom:2px solid transparent;}
nav.links a:hover, nav.links a:focus-visible{color:var(--ink); border-color:var(--accent); outline:none;}
nav.links a.active{color:var(--ink); border-color:var(--accent-2);}
 
section{padding:64px 0;}
.sec-head{margin-bottom:34px;}
.sec-head .tag{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--accent); text-transform:uppercase; letter-spacing:1px;}
.sec-head h2{font-size:clamp(24px,4vw,32px); margin-top:6px;}
.sec-head p.lede{color:var(--ink-soft); font-size:15px; margin-top:10px; max-width:60ch;}
 
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 26px;
}
 
/* ===== Home hero ===== */
.hero-full{
  min-height:calc(100vh - 53px);
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center;
  padding:48px 0;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--accent-2);
  background:rgba(46,158,143,0.08); border:1px solid rgba(46,158,143,0.35);
  padding:5px 10px; border-radius:20px; margin-bottom:22px;
}
.eyebrow::before{content:"●"; color:var(--accent-2); font-size:9px;}
.hero-full h1{font-size:clamp(34px,7vw,64px); font-weight:700; letter-spacing:-1px; line-height:1.05;}
.hero-full .role{font-family:'JetBrains Mono', monospace; color:var(--ink-soft); font-size:clamp(14px,2.2vw,18px); margin-top:16px;}
.hero-full .role .cursor{display:inline-block; width:9px; height:1em; background:var(--accent); margin-left:4px; vertical-align:text-bottom; animation:blink 1s steps(2) infinite;}
@keyframes blink{50%{opacity:0;}}
.hero-full .tagline{color:var(--ink-soft); font-size:15.5px; max-width:56ch; margin:22px auto 0;}
 
.endpoints{margin-top:40px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
@media (max-width:680px){.endpoints{grid-template-columns:1fr;}}
.endpoint{
  display:block; text-decoration:none; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px 18px; transition:border-color .2s ease, transform .2s ease;
}
.endpoint:hover, .endpoint:focus-visible{border-color:var(--accent-2); transform:translateY(-2px); outline:none;}
.endpoint .addr{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--accent-2);}
.endpoint .label{font-size:15px; font-weight:600; margin-top:6px;}
.endpoint .desc{font-size:12.5px; color:var(--ink-faint); margin-top:3px;}
 
/* Status bar (used on home + about) */
.statusbar{
  margin-top:36px; display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
}
.statusbar .cell{background:var(--surface); padding:14px 16px;}
.statusbar .k{font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.6px;}
.statusbar .v{font-size:14.5px; margin-top:4px; font-weight:600;}
.statusbar .v.up{color:var(--accent-2);}
@media (max-width:640px){.statusbar{grid-template-columns:repeat(2,1fr);}}
 
/* ===== About: profile ===== */
.profile-flex{
  display:flex;
  flex-direction:row;
  gap:36px;
  align-items:flex-start;
  flex-wrap:nowrap;
}

.profile-side{
  flex:0 0 180px;
  width:180px;
  text-align:center;
}

.profile-photo{
  width:140px; height:140px; border-radius:50%; object-fit:cover;
  border:2px solid var(--line); background:var(--bg);
  display:block; margin:0 auto 16px;
}

.profile-name{
  font-family:'Space Grotesk', sans-serif;
  font-size:19px;
  font-weight:700;
  color:var(--ink);
  margin:0 0 4px;
}

.profile-role{
  font-family:'JetBrains Mono', monospace;
  font-size:12px;
  color:var(--ink-soft);
  line-height:1.6;
  margin:0 0 18px;
}

.profile-links{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.profile-btn{
  font-family:'JetBrains Mono', monospace;
  font-size:12px;
  color:var(--ink);
  text-decoration:none;
  border:1px solid var(--line);
  border-radius:8px;
  padding:8px 12px;
  text-align:center;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}

.profile-btn:hover, .profile-btn:focus-visible{
  border-color:var(--accent);
  color:var(--accent);
  background:rgba(217,142,43,0.06);
  outline:none;
}

.profile-bio{
  flex:1;
  min-width:0;
  color:var(--ink-soft);
  font-size:15px;
  line-height:1.7;
  margin:0;
}

@media (max-width:640px){
  .profile-flex{
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
  .profile-side{
    width:100%;
    flex:none;
  }
}
 
/* Traceroute (pengalaman) */
.trace-legend{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--ink-faint); margin-bottom:22px; padding-bottom:12px; border-bottom:1px dashed var(--line);}
.hops{position:relative; padding-left:34px;}
.hops::before{content:""; position:absolute; left:11px; top:6px; bottom:6px; width:2px; background:repeating-linear-gradient(var(--line) 0 6px, transparent 6px 11px);}
.hop{position:relative; margin-bottom:26px; opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease;}
.hop.in{opacity:1; transform:translateY(0);}
.hop:last-child{margin-bottom:0;}
.hop-dot{position:absolute; left:-34px; top:22px; width:22px; height:22px; border-radius:50%; background:var(--surface); border:2px solid var(--accent); display:flex; align-items:center; justify-content:center; font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:700; color:var(--accent);}
.hop.current .hop-dot{background:var(--accent-2); border-color:var(--accent-2); color:#0a0000;}
.hop-head{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:6px;}
.hop-rtt{font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--ink-faint); background:var(--bg); border:1px solid var(--line); padding:2px 8px; border-radius:12px;}
.hop h3{font-size:17px; font-weight:600;}
.hop .place-date{font-size:13px; color:var(--ink-faint); margin-top:2px;}
.hop ul{margin:10px 0 0; padding-left:18px; color:var(--ink-soft); font-size:14px;}
.hop li{margin-bottom:4px;}
 
/* Skills */
.skill-groups{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media (max-width:760px){.skill-groups{grid-template-columns:1fr;}}
.skill-panel .panel-title{font-family:'JetBrains Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.8px; color:var(--ink-faint); margin-bottom:14px; display:flex; align-items:center; gap:8px;}
.skill-panel .panel-title::before{content:"▣"; color:var(--accent);}
.pill-row{display:flex; flex-wrap:wrap; gap:8px;}
.pill{font-size:13px; padding:6px 12px; border-radius:8px; background:var(--bg); border:1px solid var(--line); color:var(--ink);}
 
/* Education */
.edu-card{display:flex; gap:20px; align-items:flex-start;}
.edu-stamp{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--accent-2); border:1px dashed var(--accent-2); border-radius:8px; padding:10px 12px; text-align:center; min-width:84px;}
.edu-stamp .yr{font-size:20px; font-weight:700; display:block; color:var(--ink);}
 
/* ===== Local LAB ===== */
.topo-card svg{width:100%; height:auto; display:block;}
.topo-caption{font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--ink-faint); margin-top:12px; text-align:center;}
 
.lablog{display:flex; flex-direction:column; gap:16px;}
.log-entry{
  background:var(--ink); color:#000307; border-radius:var(--radius); overflow:hidden; border:1px solid var(--ink);
}
.log-entry .bar{display:flex; align-items:center; gap:8px; padding:9px 14px; background:#16223d; font-family:'JetBrains Mono',monospace; font-size:11px; color:#9fb0d0;}
.log-entry .dot{width:8px; height:8px; border-radius:50%; background:#2e9e8f;}
.log-entry .body{padding:18px 20px; font-family:'JetBrains Mono',monospace; font-size:13px;}
.log-entry .prompt{color:var(--accent-2);}
.log-entry .cmd{color:#f2c879;}
.log-entry ul{margin:10px 0 0; padding-left:18px; color:#00030a; font-size:12.5px; font-family:'Inter',sans-serif;}
.log-entry li{margin-bottom:5px;}
.log-entry .meta{color:#00030a; font-size:11.5px; margin-top:2px;}
 
/* ===== Contact terminal ===== */
.terminal{background:var(--ink); color:#00030a; border-radius:var(--radius); overflow:hidden; border:1px solid var(--ink);}
.terminal .bar{display:flex; gap:6px; padding:10px 14px; background:#16223d;}
.terminal .dot{width:10px; height:10px; border-radius:50%;}
.terminal .body{padding:22px 24px; font-family:'JetBrains Mono',monospace; font-size:13.5px;}
.terminal .prompt{color:var(--accent-2);}
.terminal .line{margin-bottom:10px;}
.terminal a{color:#00030a; text-decoration:none; border-bottom:1px solid rgba(242,200,121,0.4);}
.terminal a:hover, .terminal a:focus-visible{border-color:#00030a; outline:none;}

/* ===== Featured Project Showcase ===== */
.project-featured{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:32px 30px;
  margin-bottom:36px;
  position:relative;
  box-shadow:0 12px 36px rgba(0,0,0,0.4);
}
.project-header{
  margin-bottom:20px;
}
.project-badge-top{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  color:var(--accent-2);
  background:rgba(46,158,143,0.1);
  border:1px solid rgba(46,158,143,0.35);
  padding:4px 10px;
  border-radius:20px;
  margin-bottom:14px;
}
.project-badge-top::before{content:"●"; font-size:8px; color:var(--accent-2);}
.project-title{
  font-size:clamp(20px, 3.2vw, 28px);
  font-weight:700;
  line-height:1.3;
  margin:0 0 14px;
  color:var(--ink);
}
.project-desc{
  color:var(--ink-soft);
  font-size:15px;
  line-height:1.7;
  margin:0 0 20px;
}
.project-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin:24px 0;
}
.btn-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--accent-2);
  color:#010c0c !important;
  font-family:'JetBrains Mono', monospace;
  font-size:13px;
  font-weight:600;
  padding:11px 20px;
  border-radius:8px;
  text-decoration:none;
  border:1px solid var(--accent-2);
  transition:all .2s ease;
}
.btn-cta:hover, .btn-cta:focus-visible{
  background:transparent;
  color:var(--accent-2) !important;
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(46,158,143,0.3);
  outline:none;
}
.btn-outline{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:transparent;
  color:var(--ink) !important;
  font-family:'JetBrains Mono', monospace;
  font-size:13px;
  padding:11px 20px;
  border-radius:8px;
  text-decoration:none;
  border:1px solid var(--line);
  transition:all .2s ease;
}
.btn-outline:hover, .btn-outline:focus-visible{
  border-color:var(--accent);
  color:var(--accent) !important;
  transform:translateY(-2px);
  outline:none;
}
.tech-badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:18px 0;
}
.tech-badge{
  font-family:'JetBrains Mono', monospace;
  font-size:12px;
  padding:5px 12px;
  border-radius:6px;
  background:var(--bg);
  border:1px solid var(--line);
  color:var(--ink);
}
.tech-badge.teal{
  background:rgba(46,158,143,0.08);
  border-color:rgba(46,158,143,0.4);
  color:var(--accent-2);
}
.tech-badge.amber{
  background:rgba(217,142,43,0.08);
  border-color:rgba(217,142,43,0.4);
  color:var(--accent);
}
.feature-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:16px;
  margin:24px 0;
}
@media (max-width:680px){
  .feature-grid{grid-template-columns:1fr;}
}
.feature-card{
  background:rgba(255,255,255,0.02);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px 20px;
}
.feature-card h4{
  font-family:'Space Grotesk', sans-serif;
  font-size:16px;
  font-weight:600;
  margin:0 0 8px;
  color:var(--ink);
  display:flex;
  align-items:center;
  gap:8px;
}
.feature-card h4 span{color:var(--accent-2);}
.feature-card p{
  margin:0;
  font-size:13.5px;
  color:var(--ink-soft);
  line-height:1.6;
}
.metric-row{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
  margin-top:20px;
}
@media (max-width:720px){
  .metric-row{grid-template-columns:repeat(2, 1fr);}
}
.metric-box{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px 16px;
  text-align:left;
}
.metric-box .mk{
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  color:var(--ink-faint);
  text-transform:uppercase;
  letter-spacing:0.5px;
}
.metric-box .mv{
  font-size:16px;
  font-weight:700;
  margin-top:4px;
  color:var(--accent-2);
}

footer{padding:34px 0 60px; text-align:center; font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--ink-faint);}