:root{
  --bg: #0B1120;
  --surface: #131D31;
  --surface-2: #1A2744;
  --border: #263859;
  --border-soft: #1E2D4A;
  --text: #F8FAFC;
  --text-dim: #94A3B8;
  --text-faint: #64748B;

  --net: #00F0FF;
  --net-bg: rgba(0, 240, 255, 0.12);
  --net-glow: rgba(0, 240, 255, 0.4);

  --crit: #FF3366;
  --crit-bg: rgba(255, 51, 102, 0.12);
  --high: #FFB800;
  --high-bg: rgba(255, 184, 0, 0.12);
  --med: #FACC15;
  --med-bg: rgba(250, 204, 21, 0.12);
  --low: #10B981;
  --low-bg: rgba(16, 185, 129, 0.12);

  --mono: 'JetBrains Mono', monospace;
  --sans: 'Inter', sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

/* Background Ambient Glow */
body::after {
  content: "";
  position: fixed;
  top: -150px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 240, 255, 0.15) 0%, rgba(11, 17, 32, 0) 70%);
  pointer-events: none;
  z-index: 0;
}

/* Canvas Animasi Jaringan & Lightning Cursor */
#net-canvas{
  position: fixed; inset:0;
  width:100vw; height:100vh;
  pointer-events:none;
  z-index:0;
  opacity:0.65;
}

#lightning-cursor {
  position: fixed; inset:0;
  width:100vw; height:100vh;
  pointer-events:none;
  z-index:9999;
}

body::before{
  content:"";
  position:fixed; inset:0;
  background-image:
    linear-gradient(var(--border-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-soft) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.35;
  pointer-events:none;
  z-index:0;
}

a{color:inherit; text-decoration:none;}
.wrap{max-width:980px; margin:0 auto; padding:0 24px; position:relative; z-index:1;}
::selection{background:var(--net); color:#0B1120;}
a:focus-visible, button:focus-visible{outline:2px solid var(--net); outline-offset:3px;}

/* ---------- NAV ---------- */
nav{
  position:sticky; top:0; z-index:50;
  background: rgba(11, 17, 32, 0.85);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-soft);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
nav .wrap{display:flex; align-items:center; justify-content:space-between; height:64px;}
.logo{
  font-family:var(--mono); font-weight:700; font-size:16px; letter-spacing:0.5px;
  display:flex; align-items:center; gap:10px; cursor:default; position:relative;
}
.logo .dot{
  width:10px; height:10px; border-radius:50%; 
  background:var(--net); 
  box-shadow:0 0 12px var(--net); 
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1; transform:scale(1);} 50%{opacity:0.4; transform:scale(0.85);}}

.logo:hover span.txt{animation:glitch 0.3s ease infinite;}
@keyframes glitch{
  0% { transform: translate(0) }
  20% { transform: translate(-2px, 2px) }
  40% { transform: translate(-2px, -2px) }
  60% { transform: translate(2px, 2px) }
  80% { transform: translate(2px, -2px) }
  100% { transform: translate(0) }
}

.navlinks{display:flex; gap:28px; font-family:var(--mono); font-size:13.5px; color:var(--text-dim);}
.navlinks a{transition: color 0.2s, text-shadow 0.2s;}
.navlinks a:hover{color:var(--net); text-shadow:0 0 8px var(--net-glow);}
@media (max-width:640px){.navlinks{display:none;}}

/* ---------- HERO / TERMINAL ---------- */
header.hero{padding:90px 0 70px;}
.terminal{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 20px 50px -10px rgba(0, 240, 255, 0.1), 0 10px 30px rgba(0,0,0,0.5);
  transition: border-color 0.3s;
}
.terminal:hover {
  border-color: var(--net);
}
.term-bar{
  display:flex; align-items:center; gap:8px;
  padding:12px 18px;
  background:var(--surface-2);
  border-bottom:1px solid var(--border);
}
.term-bar span{width:11px; height:11px; border-radius:50%;}
.term-bar .path{margin-left:8px; font-family:var(--mono); font-size:12px; color:var(--text-dim);}
.term-body{padding:30px 24px; font-family:var(--mono); font-size:14.5px;}
.term-body .line{color:var(--text-dim); margin-bottom:6px;}
.term-body .prompt{color:var(--net); font-weight:700;}
.term-body .cmd{color:var(--text);}
#typed{color:var(--text); font-weight: 500;}
.cursor{
  display:inline-block; width:9px; height:18px; 
  background:var(--net); vertical-align:middle; 
  animation:blink 1s step-end infinite; margin-left:4px;
  box-shadow: 0 0 8px var(--net);
}
@keyframes blink{0%,100%{opacity:1;} 50%{opacity:0;}}

.hero-title{
  font-family:var(--mono);
  font-weight:800;
  font-size:clamp(34px, 5.5vw, 56px);
  letter-spacing:-1px;
  margin:36px 0 10px;
  background: linear-gradient(135deg, #FFFFFF 30%, var(--net) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-role{font-family:var(--mono); font-size:15px; color:var(--net); margin-bottom:16px; font-weight:600;}
.hero-role .sep{color:var(--text-faint); margin:0 10px;}
.hero-role .side{color:var(--high);}
.hero-sub{color:var(--text-dim); font-size:17.5px; max-width:620px; margin-bottom:32px; line-height: 1.6;}

.hero-stats{
  display:flex; gap:0; flex-wrap:wrap; 
  border-top:1px solid var(--border); 
  background: var(--surface);
  border-radius: 8px;
  margin-top:16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.stat{flex:1; min-width:140px; padding:20px; text-align: center; border-right:1px solid var(--border);}
.stat:last-child{border-right:none;}
.stat .num{font-family:var(--mono); font-weight:800; font-size:28px; color: var(--net); text-shadow: 0 0 12px var(--net-glow);}
.stat .lbl{font-size:11.5px; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.8px; margin-top:4px;}

/* ---------- SECTION HEADERS ---------- */
section{padding:70px 0;}
.sec-head{display:flex; align-items:center; gap:14px; margin-bottom:36px;}
.sec-title{font-family:var(--mono); font-weight:800; font-size:24px; color: var(--text);}
.sec-title::before{content:"$ "; color:var(--net);}
.sec-title.side::before{color:var(--high);}
.sec-line{flex:1; height:1px; background:linear-gradient(90deg, var(--border), transparent);}

/* ---------- ABOUT / STACK ---------- */
.about-text{margin-bottom:40px; max-width:850px;}
.about-text p{color:var(--text-dim); margin-bottom:16px; font-size:16px; line-height:1.7;}
.about-text strong{color:var(--text); font-weight:600;}
.about-text strong.side{color:var(--high);}

.toolkit-section{margin-bottom:52px;}
.toolkit{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(115px, 1fr));
  gap:16px;
}
.toolkit-label{font-family:var(--mono); font-size:12px; color:var(--text-dim); text-transform:uppercase; letter-spacing:1px; margin-bottom:16px; display:block; font-weight:600;}

/* Tool Card Glow Effect */
.tool-card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  padding:16px 12px 14px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  transition:all .25s ease;
  overflow:hidden;
}
.tool-card::before, .card::before {
  content: "";
  position: absolute;
  top: var(--mouse-y, -100px);
  left: var(--mouse-x, -100px);
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(0, 240, 255, 0.25) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: opacity 0.2s;
  opacity: 0;
}
.tool-card:hover::before, .card:hover::before {opacity: 1;}

.tool-card:hover{
  transform:translateY(-4px); 
  border-color:var(--net);
  box-shadow: 0 10px 25px -5px var(--net-glow);
}
.tool-card.side:hover{
  border-color:var(--high);
  box-shadow: 0 10px 25px -5px rgba(255, 184, 0, 0.3);
}
.tool-card .led{
  position:absolute; top:8px; right:8px;
  width:6px; height:6px; border-radius:50%;
  background:var(--net); box-shadow:0 0 8px var(--net);
}
.tool-card.side .led{background:var(--high); box-shadow:0 0 8px var(--high);}
.tool-icon{
  width:44px; height:44px;
  border-radius:8px;
  margin-bottom:12px;
  padding:6px;
  background:var(--surface-2);
  display:flex; align-items:center; justify-content:center;
  position:relative; z-index:1;
  border: 1px solid var(--border-soft);
}
.tool-icon img{width:100%; height:100%; object-fit:contain; display:block;}
.tool-icon .icon-fallback{
  font-family:var(--mono); font-weight:800; font-size:11px; color:var(--high);
}
.tool-name{font-family:var(--mono); font-size:12px; color:var(--text-dim); line-height:1.3; position:relative; z-index:1; font-weight: 500;}
.tool-card:hover .tool-name{color:var(--text);}

/* ---------- CERTS SECTION (FIXED) ---------- */
.certs-section{margin-top:24px;}
.certs{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  gap:18px;
}
.cert{
  display:flex; flex-direction:column; align-items:center; text-align:center; cursor:pointer; width:100%;
}
.cert-photo {
  width: 100%;
  height: 130px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  overflow: hidden;
  position: relative;
  margin-bottom: 12px;
  padding: 16px;
  transition: all .25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cert-photo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.cert-photo .icon-fallback{
  font-family:var(--mono); font-weight:800; font-size:14px; color:var(--net);
}
.cert:hover .cert-photo{
  border-color:var(--net); 
  transform:translateY(-4px);
  box-shadow: 0 10px 30px -5px var(--net-glow);
}
.cert-name{font-family:var(--sans); font-size:14px; font-weight:700; color:var(--text); line-height:1.3;}
.cert-issuer{font-family:var(--mono); font-size:11px; color:var(--text-dim); margin-top:4px; text-transform:uppercase; letter-spacing:0.4px;}

/* ---------- CERT MODAL ---------- */
.cert-modal {
  display: none;
  position: fixed;
  z-index: 99999;
  inset: 0;
  background: rgba(11, 17, 32, 0.9);
  backdrop-filter: blur(12px);
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.cert-modal.active { display: flex; }
.cert-modal-content {
  max-width: 90%;
  max-height: 85vh;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 240, 255, 0.2);
  border: 1px solid var(--net);
  object-fit: contain;
}
.cert-modal-close {
  position: absolute;
  top: 24px;
  right: 36px;
  font-size: 38px;
  color: var(--text);
  cursor: pointer;
  font-family: var(--mono);
  transition: color 0.2s, transform 0.2s;
}
.cert-modal-close:hover { color: var(--net); transform: scale(1.1); }

/* ---------- PROJECT CARDS ---------- */
.card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--border);
  border-left:4px solid var(--card-color, var(--border));
  border-radius:8px;
  padding:24px 28px;
  margin-bottom:20px;
  transition:all .25s ease;
  overflow:hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.card:hover{
  transform:translateY(-3px); 
  box-shadow:0 14px 40px -10px rgba(0,0,0,0.6), 0 0 20px -5px var(--card-color);
  border-color: var(--border);
}
.card-top{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; position:relative; z-index:1;}
.card-id{font-family:var(--mono); font-size:12.5px; color:var(--text-dim);}
.badge{
  font-family:var(--mono); font-size:11px; font-weight:800; letter-spacing:0.5px;
  padding:4px 10px; border-radius:4px; text-transform:uppercase;
  color:var(--card-color); background:var(--card-bg);
  border:1px solid var(--card-color);
  box-shadow: 0 0 10px var(--card-bg);
}
.card-title{font-size:18px; font-weight:700; margin:12px 0 8px; position:relative; z-index:1; color: var(--text);}
.card-desc{color:var(--text-dim); font-size:15px; margin-bottom:16px; position:relative; z-index:1;}
.card-meta{display:flex; gap:22px; flex-wrap:wrap; font-family:var(--mono); font-size:12.5px; color:var(--text-dim); align-items:center; position:relative; z-index:1;}
.card-meta .kv b{color:var(--text); font-weight:600;}
.cvss-bar{width:80px; height:6px; border-radius:3px; background:var(--surface-2); overflow:hidden; display:inline-block; vertical-align:middle; margin-left:6px; border:1px solid var(--border-soft);}
.cvss-fill{height:100%; background:var(--card-color);}
.status-tag{margin-left:auto; font-family:var(--mono); font-size:12px; color:var(--low); display:flex; align-items:center; gap:6px; font-weight: 600;}
.status-tag::before{content:"●"; font-size:10px; text-shadow:0 0 6px var(--low);}

/* ---------- SIDE QUEST BANNER ---------- */
.sidequest-banner{
  display:flex; align-items:center; gap:16px;
  background:var(--high-bg); border:1px solid var(--high);
  border-radius:8px; padding:16px 20px; margin-bottom:28px;
  font-family:var(--mono); font-size:13.5px; color:var(--high);
  box-shadow: 0 0 20px rgba(255, 184, 0, 0.15);
}
.sidequest-banner .icon{font-size:18px;}

/* ---------- CTF TABLE ---------- */
.ctf-table{width:100%; border-collapse:collapse; font-family:var(--mono); font-size:14px; background: var(--surface); border-radius: 8px; overflow: hidden; border: 1px solid var(--border);}
.ctf-table th{
  text-align:left; padding:12px 16px; color:var(--text-dim);
  background: var(--surface-2); border-bottom:1px solid var(--border); 
  font-weight:700; text-transform:uppercase; font-size:11.5px; letter-spacing:0.6px;
}
.ctf-table td{padding:14px 16px; border-bottom:1px solid var(--border-soft); color:var(--text-dim);}
.ctf-table tr:hover td{background:var(--surface-2); color:var(--text);}
.ctf-table td.rank{color:var(--med); font-weight:700;}
.ctf-table td.name{color:var(--text); font-weight:600; font-family:var(--sans);}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start;}
@media (max-width:760px){.contact-grid{grid-template-columns:1fr;}}

.contact-box{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  padding:32px;
  height:100%;
}
.contact-box h3{font-family:var(--mono); font-size:17px; margin-bottom:10px; color: var(--text);}
.contact-box p{color:var(--text-dim); font-size:14.5px; margin-bottom:24px;}
.contact-links{display:flex; gap:12px; flex-wrap:wrap;}
.btn{
  font-family:var(--mono); font-size:13px; font-weight:600;
  padding:12px 20px; border-radius:6px; border:1px solid var(--border);
  background:var(--surface-2); color:var(--text); white-space:nowrap;
  transition:all .2s ease;
}
.btn:hover{border-color:var(--net); color:var(--net); box-shadow:0 0 12px var(--net-glow);}
.btn.primary{background:var(--net-bg); border-color:var(--net); color:var(--net); box-shadow: 0 0 15px var(--net-bg);}

.contact-form-box{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  padding:32px;
}
.contact-form-box .form-label{
  font-family:var(--mono); font-size:11.5px; color:var(--text-dim);
  text-transform:uppercase; letter-spacing:0.8px; margin-bottom:8px; display:block; font-weight: 600;
}
.field{margin-bottom:16px;}
.field input, .field textarea{
  width:100%;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:6px;
  padding:12px 14px;
  color:var(--text);
  font-family:var(--sans);
  font-size:14.5px;
  resize:vertical;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--net);
  box-shadow: 0 0 12px var(--net-glow);
}
.field textarea{min-height:100px;}
.form-submit{
  width:100%;
  font-family:var(--mono); font-size:13.5px; font-weight:800;
  padding:14px 20px; border-radius:6px; border:1px solid var(--net);
  background:var(--net-bg); color:var(--net); cursor:pointer;
  transition:all .2s ease;
  box-shadow: 0 0 15px var(--net-bg);
}
.form-submit:hover{background:var(--net); color:var(--bg); box-shadow: 0 0 25px var(--net);}
.form-submit:disabled{opacity:0.6; cursor:not-allowed;}
.form-hint{font-family:var(--mono); font-size:11.5px; color:var(--text-dim); margin-top:10px;}
.form-status{font-family:var(--mono); font-size:12.5px; margin-top:12px; min-height:18px;}
.form-status.ok{color:var(--low);}
.form-status.err{color:var(--crit);}

footer{padding:40px 0 60px; text-align:center; font-family:var(--mono); font-size:12.5px; color:var(--text-dim);}

.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* ---------- SHOW MORE / SHOW LESS ---------- */
.is-hidden {
  display: none !important;
}

.show-more-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.btn-toggle {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 10px 20px;
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.25s ease;
}

.btn-toggle:hover {
  border-color: var(--net);
  color: var(--net);
  box-shadow: 0 0 15px var(--net-glow);
  transform: translateY(-2px);
}

.btn-toggle i {
  transition: transform 0.3s ease;
}

.btn-toggle.active i {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
  .reveal{opacity:1; transform:none;}
  #net-canvas, #lightning-cursor{display:none;}
}