/* Theme & layout */
:root{
  --bg:#0b0f14;
  --card:#0f1722cc;
  --muted:#9aa5b1;
  --text:#e6edf3;
  --green:#2fff97;
  --red:#ff4d4d;
  --accent:#00d1ff;
  --ring: 0 0 0 2px rgba(0,209,255,.35), 0 0 32px rgba(0,209,255,.15);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth} /* smooth scroll */
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,Segoe UI,Roboto,Ubuntu,Cantarell,Arial,sans-serif;
  color:var(--text); background:radial-gradient(1200px 800px at 70% -10%, #081018 0%, transparent 60%),
                     radial-gradient(900px 700px at -20% 110%, #061821 0%, transparent 60%),
                     var(--bg);
  overflow-x:hidden;
}
.matrix{position:fixed; inset:0; pointer-events:none; opacity:.12; mix-blend-mode:screen}
.wrap{max-width:1000px; margin:0 auto; padding:3.2rem 1rem 5rem}
header{display:flex; align-items:center; gap:1rem; margin-bottom:1.2rem}
.avatar{width:72px; height:72px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 2px #1b2735, 0 0 30px rgba(0,209,255,.15)}
h1{font-family:"JetBrains Mono",monospace; font-size:clamp(1.6rem, 4.5vw, 2.2rem); margin:0}
.badge{display:inline-flex; align-items:center; gap:.5rem; color:var(--muted); font-size:.95rem}
.badge .dot{width:8px;height:8px;border-radius:50%;background:var(--green); box-shadow:0 0 8px var(--green)}
.email{margin-top:.3rem; font-family:"JetBrains Mono",monospace; font-size:.95rem; color:var(--muted)}
.email a{color:#cfe8ff; text-decoration:none} .email a:hover{color:var(--accent)}

.card{position:relative; background:linear-gradient(180deg, rgba(17,28,39,.75), rgba(10,15,22,.55));
  border:1px solid rgba(255,255,255,.06); border-radius:20px; padding:1.1rem; box-shadow:0 10px 40px rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
}
.grid{display:grid; grid-template-columns:1fr; gap:1rem}

.terminal{font-family:"JetBrains Mono",monospace; background:#050a0f; border-radius:16px; padding:.9rem 1rem 1.1rem; border:1px solid rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(0,0,0,.4)}
.term-head{display:flex; align-items:center; gap:.4rem; margin-bottom:.6rem}
.term-dot{width:10px;height:10px;border-radius:50%}
.term-dot.red{background:#ff5f56}
.term-dot.yellow{background:#ffbd2e}
.term-dot.green{background:#27c93f}
.prompt{color:#8ca0b3}
.tilde{color:var(--accent)}
.type{display:inline}
.cursor{display:inline-block; width:10px; background:var(--green); margin-left:2px; animation:blink 1s steps(1,end) infinite}
@keyframes blink{50%{opacity:0}}

/* reveal animations */
.reveal{opacity:0; transform:translateY(14px) scale(.997); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.9,.2,1); will-change:opacity, transform}
.reveal.visible{opacity:1; transform:translateY(0) scale(1)}

/* services */
.services{display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:.8rem; margin-top:.6rem}
.svc{padding:1rem; border-radius:14px; border:1px solid rgba(255,255,255,.06); background:linear-gradient(180deg, rgba(13,19,28,.7), rgba(9,14,22,.6));}
.svc h3{margin:.2rem 0 .45rem; font-size:1rem}
.svc p{margin:0; color:var(--muted); font-size:.93rem}

.h2{margin:.2rem 0 .6rem}
.muted{color:var(--muted); margin:.2rem 0 1rem}
.form{flex-direction:column; align-items:start; gap:.8rem; max-width:680px}
.form input,.form textarea{width:100%; padding:.9rem; border-radius:12px; border:1px solid rgba(255,255,255,.08); background:#0a121b; color:var(--text)}

footer{margin-top:1.6rem; color:#7f8b97; font-size:.92rem; display:flex; justify-content:space-between; gap:.8rem; flex-wrap:wrap}
.social a{color:var(--muted); text-decoration:none; margin-right:.9rem}
.social a:hover{color:var(--accent)}

.scan{position:fixed; inset:0; pointer-events:none; background: repeating-linear-gradient(to bottom, rgba(255,255,255,.02), rgba(255,255,255,.02) 1px, transparent 2px);
  mix-blend-mode:overlay; opacity:.25}

/* responsive tweaks */
@media (max-width:480px){
  .wrap{padding:2rem .8rem 3rem}
  .avatar{width:64px; height:64px}
  .card{padding:.9rem}
  .cursor{width:8px}
}

.avatar {
  width: 75px;             /* ukuran bisa disesuaikan */
  height: 75px;
  border-radius: 50%;       /* bikin bulat sempurna */
  object-fit: cover;        /* biar isi foto pas di lingkaran */
  border: 2px solid #2fff97; /* garis pinggir neon hijau */
}