:root{
  --bg:#0a0a0b;
  --bg-soft:#111113;
  --card:rgba(255,255,255,.035);
  --card-border:rgba(255,255,255,.09);
  --card-border-hover:rgba(255,255,255,.18);
  --text:#f2f2f0;
  --text-dim:#a1a1a6;
  --text-dimmer:#6b6b70;
  --accent:#8b7cf6;
  --accent-soft:rgba(139,124,246,.15);
  --line:rgba(255,255,255,.08);
  --radius:18px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  overflow-x:hidden;
  position:relative;
}
h1,h2,h3{font-family:'Baloo 2',sans-serif;}
.mono{font-family:'Space Mono',monospace;}

/* ---- background grid ---- */
.grid-overlay{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, black 40%, transparent 90%);
          mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, black 40%, transparent 90%);
}
section, nav, footer{ position:relative; z-index:1; }

a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer;}

/* ---- nav ---- */
nav.navbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 40px;
  background:rgba(10,10,11,.85);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.logo{font-family:'Space Mono',monospace; letter-spacing:1px; color:var(--text-dim); font-size:14px;}
.nav-links{display:flex; gap:36px; font-family:'Space Mono',monospace; font-size:13px; letter-spacing:2px;}
.nav-links a{color:var(--text-dim); position:relative; padding-bottom:6px; transition:color .25s;}
.nav-links a:hover{color:var(--text);}
.nav-links a.active{color:var(--text);}
.nav-links a.active::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--text);
}
.nav-toggle{display:none; background:none; border:none; color:var(--text); font-size:22px;}

/* ---- hero ---- */
.hero{
  min-height:92vh;
  display:flex; align-items:center;
  padding:60px 40px 40px;
  max-width:1180px; margin:0 auto;
  gap:40px;
  flex-wrap:wrap;
}
.hero-left{flex:1 1 480px; min-width:280px;}
.eyebrow{
  font-family:'Space Mono',monospace; font-size:12px; letter-spacing:3px; color:var(--text-dimmer);
  margin-bottom:22px; display:flex; align-items:center; gap:8px;
}
.eyebrow::before{content:''; width:6px; height:6px; border-radius:50%; background:#4ade80; display:inline-block; box-shadow:0 0 8px #4ade80;}
.hero h1{
  font-size:clamp(40px,6vw,64px); line-height:1.05; font-weight:800;
  color:var(--text);
}
.hero h1 .muted{color:#55555c;}
.typed-line{
  font-family:'Space Mono',monospace; color:var(--text-dim); font-size:15px; margin:22px 0 16px;
  min-height:22px;
}
.typed-line .cursor{display:inline-block; width:8px; background:var(--accent); margin-left:2px; animation:blink 1s steps(1) infinite;}
@keyframes blink{50%{opacity:0;}}
.hero-desc{color:var(--text-dim); font-size:16px; line-height:1.7; max-width:460px; margin-bottom:26px;}
.tags{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:34px;}
.tags span{
  font-family:'Space Mono',monospace; font-size:12px; color:var(--text-dim);
  border:1px solid var(--line); padding:7px 14px; border-radius:100px; background:var(--card);
}
.hero-footer-notes{font-family:'Space Mono',monospace; font-size:12.5px; color:var(--text-dimmer); line-height:2;}

.hero-right{
  flex:0 0 300px; display:flex; justify-content:center; position:relative; padding-top:10px; margin:0 auto;
}
.lanyard-strap{
  width:6px; height:70px; background:linear-gradient(#1a1a1c,#2a2a2e);
  margin:0 auto; border-radius:3px;
}
.lanyard-tag{
  position:absolute; top:20px; left:50%; transform:translateX(56px) rotate(6deg);
  writing-mode:vertical-rl; font-family:'Space Mono',monospace; font-size:10px; letter-spacing:2px;
  color:var(--text-dimmer); background:#151517; border:1px solid var(--line);
  padding:10px 5px; border-radius:6px;
}
.id-card{
  width:260px; background:#fff; border-radius:14px; padding:10px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
  animation:sway 5s ease-in-out infinite;
  transform-origin:top center;
}
@keyframes sway{
  0%,100%{transform:rotate(-2deg);}
  50%{transform:rotate(2deg);}
}
.id-photo{
  width:100%; aspect-ratio:3/3.6; border-radius:8px; overflow:hidden;
  background:radial-gradient(circle at 50% 30%, #3a3a3d, #0c0c0d 75%);
  display:flex; align-items:center; justify-content:center;
}
.id-photo img, .about-photo .circle img{
  width:100%; height:100%; object-fit:cover; display:block;
}

.scroll-indicator{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  font-family:'Space Mono',monospace; font-size:11px; letter-spacing:3px; color:var(--text-dimmer);
}

/* ---- section shared ---- */
.section{padding:120px 40px 40px; max-width:1180px; margin:0 auto;}
.section-title{font-size:clamp(30px,4vw,42px); font-weight:800; margin-bottom:10px;}
.section-sub{color:var(--text-dim); margin-bottom:44px; max-width:560px;}
.center{text-align:center; margin-left:auto; margin-right:auto;}

/* ---- about ---- */
.about-grid{display:flex; gap:60px; align-items:center; flex-wrap:wrap; margin-top:20px;}
.about-text{flex:1 1 480px; min-width:280px;}
.about-text h2{font-size:clamp(30px,4.5vw,46px); line-height:1.08; font-weight:800; margin-bottom:20px;}
.about-text p{color:var(--text-dim); line-height:1.75; margin-bottom:22px; max-width:520px;}
.about-buttons{display:flex; gap:14px; flex-wrap:wrap;}
.btn-primary, .btn-outline{
  padding:13px 26px; border-radius:100px; font-size:14px; font-weight:600; display:inline-flex; align-items:center; gap:8px;
  transition:all .25s;
}
.btn-primary{background:#fff; color:#0a0a0b;}
.btn-primary:hover{background:#e4e4e4; transform:translateY(-2px);}
.btn-outline{border:1px solid var(--line); color:var(--text);}
.btn-outline:hover{border-color:var(--card-border-hover); background:var(--card); transform:translateY(-2px);}

.about-photo{flex:0 0 260px; display:flex; justify-content:center; margin:0 auto;}
.about-photo .circle{
  width:260px; height:260px; border-radius:50%; overflow:hidden;
  background:radial-gradient(circle at 50% 30%, #3a3a3d, #0c0c0d 75%);
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line);
}

.stats-row{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:56px;}
.stat-card{
  background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius);
  padding:26px; transition:border-color .25s, transform .25s;
}
.stat-card:hover{border-color:var(--card-border-hover); transform:translateY(-4px);}
.stat-top{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:26px;}
.stat-icon{
  width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:center; font-family:'Space Mono',monospace; font-size:15px; color:var(--text);
}
.stat-num{font-family:'Baloo 2',sans-serif; font-size:26px; font-weight:700;}
.stat-label{font-family:'Space Mono',monospace; font-size:11px; letter-spacing:2px; color:var(--text-dimmer); display:flex; justify-content:space-between;}

/* ---- portfolio tabs ---- */
.tabs{
  display:inline-flex; background:var(--card); border:1px solid var(--card-border); border-radius:100px;
  padding:6px; margin-bottom:44px; gap:4px; max-width:100%; overflow-x:auto;
}
.tab{
  background:none; border:none; color:var(--text-dim); padding:11px 26px; border-radius:100px; font-size:14px; font-weight:500;
  transition:all .25s; white-space:nowrap;
}
.tab.active{background:rgba(255,255,255,.1); color:var(--text);}
.tab:hover:not(.active){color:var(--text);}

.tab-panel{display:none;}
.tab-panel.active{display:block; animation:fadein .4s ease;}
@keyframes fadein{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);}}

.projects-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:24px;}
.project-card{
  background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius); overflow:hidden;
  transition:border-color .25s, transform .25s; cursor:pointer;
}
.project-card:hover{border-color:var(--card-border-hover); transform:translateY(-4px);}
.project-thumb{
  aspect-ratio:16/10; background:linear-gradient(150deg,#1b1b1d,#0a0a0b);
  padding:22px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden;
  border-bottom:1px solid var(--line);
}
.project-thumb::before{
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:20px 20px;
}
.project-thumb h4{position:relative; font-family:'Baloo 2',sans-serif; font-size:20px; line-height:1.15; font-weight:700;}
.project-thumb h4 .muted{color:#666;}
.project-thumb .mini-photo{
  position:relative; align-self:flex-end; width:52px; height:64px; background:#fff; border-radius:4px; padding:3px;
}
.project-thumb .mini-photo div{
  width:100%; height:100%; border-radius:2px; background:radial-gradient(circle at 50% 30%,#3a3a3d,#0c0c0d 75%); overflow:hidden;
}
.project-thumb .mini-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.project-body{padding:22px;}
.project-body h3{font-size:19px; margin-bottom:8px; font-weight:700;}
.project-body p{color:var(--text-dim); font-size:14px; line-height:1.6; margin-bottom:18px;}
.project-footer{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;}
.no-link{font-family:'Space Mono',monospace; font-size:12px; color:var(--text-dimmer);}
.details-btn{
  font-size:13px; font-weight:600; background:rgba(255,255,255,.08); padding:9px 18px; border-radius:100px;
  display:inline-flex; align-items:center; gap:6px; transition:background .25s;
}
.details-btn:hover{background:rgba(255,255,255,.16);}

/* project detail view - FIX BUG LAYOUT HP/TABLET */
.project-detail{display:none;}
.project-detail.active{display:block; animation:fadein .4s ease;}
.back-link{font-family:'Space Mono',monospace; font-size:13px; color:var(--text-dim); display:inline-flex; align-items:center; gap:8px; margin-bottom:30px; cursor:pointer;}
.back-link:hover{color:var(--text);}
.detail-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start;}
.detail-left h2{font-size:32px; margin-bottom:18px;}
.detail-left p{color:var(--text-dim); line-height:1.75; margin-bottom:26px;}
.detail-mini-stats{display:flex; gap:16px; margin-bottom:26px; flex-wrap:wrap;}
.mini-stat{background:var(--card); border:1px solid var(--card-border); border-radius:14px; padding:16px 20px; flex:1; min-width:130px;}
.mini-stat .num{font-size:22px; font-weight:700; font-family:'Baloo 2',sans-serif;}
.mini-stat .label{font-size:11px; color:var(--text-dimmer); font-family:'Space Mono',monospace; letter-spacing:1px;}
.detail-links{display:flex; gap:12px; margin-bottom:30px; flex-wrap:wrap;}
.ghost-btn{border:1px solid var(--line); border-radius:100px; padding:10px 18px; font-size:13px; color:var(--text-dimmer); display:flex; align-items:center; gap:8px;}
.tech-title{font-size:13px; font-family:'Space Mono',monospace; color:var(--text-dimmer); letter-spacing:1px; margin-bottom:12px; display:flex; align-items:center; gap:8px;}
.tech-chips{display:flex; gap:10px; flex-wrap:wrap;}
.tech-chips span{background:var(--card); border:1px solid var(--card-border); border-radius:100px; padding:8px 16px; font-size:13px;}
.detail-right{width:100%; overflow:hidden;}
.detail-preview{
  background:linear-gradient(150deg,#1b1b1d,#0a0a0b); border:1px solid var(--card-border); border-radius:18px; padding:24px; margin-bottom:20px;
}
.key-features{background:var(--card); border:1px solid var(--card-border); border-radius:18px; padding:24px;}
.key-features h4{font-size:15px; margin-bottom:16px; display:flex; align-items:center; gap:8px;}
.key-features ul{display:flex; flex-direction:column; gap:12px;}
.key-features li{color:var(--text-dim); font-size:14px; display:flex; align-items:center; gap:10px; word-break:break-word;}
.key-features li::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--accent); flex-shrink:0;}

/* certificates */
.cert-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:24px;}
.cert-card{
  background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius); overflow:hidden; cursor:pointer;
  transition:border-color .25s, transform .25s;
}
.cert-card:hover{border-color:var(--card-border-hover); transform:translateY(-4px);}
.cert-thumb{
  aspect-ratio:4/3; background:#f4f4f2; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
}
.cert-thumb iframe{width:100%; height:100%; pointer-events:none;}
.cert-label{padding:18px 20px; font-size:14px; font-weight:600;}
.cert-label span{display:block; font-family:'Space Mono',monospace; font-weight:400; font-size:11px; color:var(--text-dimmer); margin-top:4px;}

/* tech stack grid */
.stack-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:18px;}
.stack-item{
  background:var(--card); border:1px solid var(--card-border); border-radius:16px; padding:26px 10px;
  display:flex; flex-direction:column; align-items:center; gap:14px; transition:border-color .25s, transform .25s; text-align:center;
}
.stack-item:hover{border-color:var(--card-border-hover); transform:translateY(-4px);}
.stack-icon{width:52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; font-family:'Space Mono',monospace;}
.stack-item span{font-size:12.5px; color:var(--text-dim);}

/* contact - FIX TEXTAREA PADDING (IKON TIDAK NEMBUS) */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.contact-card{background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius); padding:32px;}
.contact-card h3{font-size:22px; margin-bottom:10px;}
.contact-card > p{color:var(--text-dim); font-size:14px; margin-bottom:24px; line-height:1.6;}
.field{margin-bottom:14px; position:relative;}
.field input, .field textarea{
  width:100%; background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:12px;
  padding:14px 16px 14px 42px; color:var(--text); font-family:'Inter',sans-serif; font-size:14px; resize:none;
  transition:border-color .2s;
}
/* PERBAIKAN: Textarea diberikan padding kiri 42px agar teks tidak menembus ikon */
.field textarea{padding-left:42px; min-height:110px;}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--accent);}
.field .ic{position:absolute; left:15px; top:15px; color:var(--text-dimmer); font-size:15px; display:flex; align-items:center; pointer-events:none;}
.send-btn{
  width:100%; background:#fff; color:#0a0a0b; border:none; border-radius:100px; padding:15px; font-weight:700;
  font-size:14px; display:flex; align-items:center; justify-content:center; gap:8px; margin-top:6px; transition:transform .2s, background .2s;
}
.send-btn:hover{transform:translateY(-2px); background:#e6e6e6;}
.connect-title{font-size:13px; color:var(--text-dimmer); font-family:'Space Mono',monospace; letter-spacing:1px; margin:28px 0 14px;}
.connect-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.connect-grid a{
  background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:12px; padding:12px 14px;
  display:flex; align-items:center; gap:10px; font-size:13px; font-weight:600; transition:border-color .2s, background .2s;
}
.connect-grid a:hover{border-color:var(--card-border-hover); background:rgba(255,255,255,.06);}
.connect-grid a span{display:block; font-weight:400; color:var(--text-dimmer); font-size:11px; font-family:'Space Mono',monospace;}
.connect-grid a.full{grid-column:1 / -1;}
footer{
  text-align:center; padding:40px; color:var(--text-dimmer); font-size:13px; border-top:1px solid var(--line); margin-top:60px;
  font-family:'Space Mono',monospace;
}

/* modal */
.modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.8); backdrop-filter:blur(6px); z-index:100;
  display:flex; align-items:center; justify-content:center; padding:30px; opacity:0; pointer-events:none; transition:opacity .3s;
}
.modal-overlay.open{opacity:1; pointer-events:auto;}
.modal-close{
  position:absolute; top:26px; right:36px; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.1);
  border:none; color:#fff; font-size:18px; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.modal-close:hover{background:rgba(255,255,255,.2);}
.cert-paper{
  background:#fff; width:min(760px,92vw); border-radius:14px; padding:14px; color:#1c1c1c; position:relative;
  box-shadow:0 40px 90px rgba(0,0,0,.5);
  transform:scale(.95); transition:transform .3s;
}
.modal-overlay.open .cert-paper{transform:scale(1);}
.cert-paper-image{padding:0; overflow:hidden; line-height:0;}

/* ---- splash intro ---- */
#splash{
  position:fixed; inset:0; z-index:200; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  transition:opacity .6s ease, visibility .6s ease;
}
#splash.fade-out{opacity:0; visibility:hidden; pointer-events:none;}
.splash-icons{display:flex; gap:14px;}
.splash-icons span{
  width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.06); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--text-dim);
}
#splash h2{font-size:clamp(24px,4vw,34px); text-align:center; font-weight:700; line-height:1.3;}
.splash-url{
  font-family:'Space Mono',monospace; font-size:12px; color:var(--text-dimmer);
  border:1px solid var(--line); padding:8px 18px; border-radius:100px; background:var(--card);
}

/* RESPONSIF MULTI-DEVICE (ANDROID, IPAD, TABLET, LAPTOP, PC) */
@media(max-width:1024px){
  .detail-grid, .contact-grid{grid-template-columns:1fr;}
}

@media(max-width:768px){
  .nav-links{position:fixed; top:70px; right:20px; left:20px; background:#111113; border:1px solid var(--line); border-radius:16px;
    flex-direction:column; padding:20px; gap:18px; display:none;}
  .nav-links.open{display:flex;}
  .nav-toggle{display:block;}
  .about-grid{grid-template-columns:1fr;}
  .stats-row{grid-template-columns:1fr;}
  .wrap, .section{padding-left:20px; padding-right:20px;}
  nav.navbar{padding:18px 20px;}
  .hero{padding:40px 20px;}
}