:root {
  --bg: #030014;
  --bg-alt: #0a0518;
  --accent: #8b5cf6;
  --accent2: #d4af37;
  --text: #e5e0f0;
  --text-dim: #9d97b5;
  --border: rgba(139, 92, 246, 0.2);
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  line-height: 1.6;
}

.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

a { color: inherit; text-decoration: none; }

/* Navbar */
.navbar {
  position: fixed; top:0; left:0; right:0; z-index:100;
  backdrop-filter: blur(12px);
  background: rgba(3, 0, 20, 0.7);
  border-bottom: 1px solid var(--border);
}
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:70px; }
.logo { font-weight:800; font-size:1.3rem; background:linear-gradient(90deg,#d4af37,#8b5cf6); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.nav-links { display:flex; gap:32px; list-style:none; }
.nav-links a { color:var(--text-dim); font-weight:500; transition:color .2s; }
.nav-links a:hover { color:var(--accent2); }
.nav-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; }
.nav-toggle span { width:24px; height:2px; background:var(--text); }

/* Hero */
.hero {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden; padding-top:70px;
}
.hero-glow {
  position:absolute; width:600px; height:600px; border-radius:50%;
  background: radial-gradient(circle, rgba(139,92,246,0.25) 0%, transparent 70%);
  top:-100px; left:50%; transform:translateX(-50%); pointer-events:none;
}
.hero-inner { text-align:center; position:relative; z-index:2; }
.hero-photo {
  width:140px; height:140px; border-radius:50%; object-fit:cover;
  border:3px solid var(--accent2); margin:0 auto 24px; display:block;
  box-shadow: 0 0 40px rgba(212,175,55,0.3);
}
.hero-eyebrow { color:var(--accent2); letter-spacing:3px; text-transform:uppercase; font-size:.85rem; font-weight:700; margin-bottom:16px; }
.hero-title {
  font-size:clamp(2.2rem, 6vw, 4rem); font-weight:900;
  background:linear-gradient(90deg,#fff,#d4af37,#8b5cf6);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  margin-bottom:8px;
}
.hero-role { font-size:clamp(1.1rem,3vw,1.6rem); color:var(--text-dim); font-weight:600; margin-bottom:20px; }
.hero-desc { max-width:600px; margin:0 auto 32px; color:var(--text-dim); font-size:1.05rem; }
.hero-actions { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

.btn { padding:14px 32px; border-radius:50px; font-weight:700; display:inline-block; transition:transform .2s, box-shadow .2s; }
.btn-primary { background:linear-gradient(90deg,#8b5cf6,#a855f7); color:#fff; box-shadow:0 8px 24px rgba(139,92,246,0.35); }
.btn-outline { border:1px solid var(--border); color:var(--text); }
.btn:hover { transform:translateY(-2px); }

/* Sections */
.section { padding:90px 0; }
.section-alt { background:var(--bg-alt); }
.section-title {
  font-size:2rem; font-weight:800; text-align:center; margin-bottom:48px;
  background:linear-gradient(90deg,#fff,#d4af37);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

.about-content { max-width:700px; margin:0 auto; text-align:center; color:var(--text-dim); font-size:1.05rem; }
.about-meta { margin-top:20px; color:var(--accent2); }

/* Skills */
.skills-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:24px; }
.skill-card { background:rgba(255,255,255,0.03); border:1px solid var(--border); border-radius:16px; padding:24px; }
.skill-name { font-weight:700; margin-bottom:12px; }
.skill-bar { height:8px; background:rgba(255,255,255,0.08); border-radius:10px; overflow:hidden; margin-bottom:8px; }
.skill-bar-fill { height:100%; background:linear-gradient(90deg,#8b5cf6,#d4af37); border-radius:10px; }
.skill-level { font-size:.85rem; color:var(--text-dim); text-align:right; }

/* Projects */
.projects-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:28px; }
.project-card { background:rgba(255,255,255,0.03); border:1px solid var(--border); border-radius:18px; overflow:hidden; transition:transform .2s; }
.project-card:hover { transform:translateY(-4px); }
.project-img { height:180px; background-size:cover; background-position:center; }
.project-img-placeholder { background:linear-gradient(135deg,#1a1030,#2e1a52); }
.project-body { padding:24px; }
.project-body h3 { font-size:1.2rem; margin-bottom:10px; }
.project-body p { color:var(--text-dim); font-size:.95rem; margin-bottom:16px; }
.tech-tags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.tag { background:rgba(139,92,246,0.15); color:#c4b5fd; font-size:.78rem; padding:4px 12px; border-radius:20px; font-weight:600; }
.project-links { display:flex; gap:16px; }
.project-links a { color:var(--accent2); font-weight:700; font-size:.9rem; }

/* Contact */
.contact-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:20px; margin-bottom:32px; }
.contact-item { background:rgba(255,255,255,0.03); border:1px solid var(--border); border-radius:14px; padding:20px; display:flex; flex-direction:column; gap:6px; transition:border-color .2s; }
.contact-item:hover { border-color: var(--accent2); }
.contact-label { color:var(--text-dim); font-size:.8rem; text-transform:uppercase; letter-spacing:1px; }
.contact-value { font-weight:700; }
.social-links { display:flex; justify-content:center; gap:24px; }
.social-links a { color:var(--text-dim); font-weight:600; }
.social-links a:hover { color:var(--accent2); }

.empty-state { color:var(--text-dim); text-align:center; grid-column:1/-1; }

.footer { text-align:center; padding:32px 0; color:var(--text-dim); font-size:.85rem; border-top:1px solid var(--border); }

/* Splash screen welcome */
body.intro-active { overflow:hidden; height:100vh; }
.intro-screen {
  position:fixed; inset:0; z-index:9999;
  background: radial-gradient(circle at 50% 40%, #14101f 0%, #030014 70%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transition: opacity .8s ease, visibility .8s ease;
  cursor:pointer;
}
.intro-screen.intro-hide { opacity:0; visibility:hidden; pointer-events:none; }
.intro-glow {
  position:absolute; width:500px; height:500px; border-radius:50%;
  background: radial-gradient(circle, rgba(212,175,55,0.22) 0%, transparent 70%);
  animation: introPulse 3s ease-in-out infinite;
}
@keyframes introPulse {
  0%, 100% { transform:scale(1); opacity:.7; }
  50% { transform:scale(1.15); opacity:1; }
}
.intro-content { position:relative; z-index:2; text-align:center; }
.intro-line {
  opacity:0; transform:translateY(24px);
  animation: introFadeUp .8s ease forwards;
}
.intro-line-1 { color:var(--accent2); letter-spacing:4px; text-transform:uppercase; font-size:.9rem; font-weight:700; margin-bottom:14px; animation-delay:.2s; }
.intro-line-2 {
  font-size:clamp(2rem,6vw,3.2rem); font-weight:900; margin-bottom:10px;
  background:linear-gradient(90deg,#fff,#d4af37,#8b5cf6);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation-delay:.5s;
}
.intro-line-3 { color:var(--text-dim); font-size:1.1rem; font-weight:500; animation-delay:.8s; }
@keyframes introFadeUp {
  to { opacity:1; transform:translateY(0); }
}
.intro-bar {
  position:relative; z-index:2; width:180px; height:3px; margin-top:36px;
  background:rgba(255,255,255,0.08); border-radius:10px; overflow:hidden;
}
.intro-bar-fill {
  height:100%; width:0%; background:linear-gradient(90deg,#d4af37,#8b5cf6);
  animation: introBarFill 1.8s ease forwards; animation-delay:.3s;
}
@keyframes introBarFill {
  to { width:100%; }
}
.intro-skip {
  position:relative; z-index:2; margin-top:14px;
  color:var(--text-dim); font-size:.75rem; opacity:0;
  animation: introFadeUp .8s ease forwards; animation-delay:1.3s;
}
@media (prefers-reduced-motion: reduce) {
  .intro-line { opacity:1; transform:none; animation:none; }
  .intro-bar-fill { width:100%; animation:none; }
}

/* Animasi scroll reveal */
.reveal {
  opacity:0;
  transform:translateY(36px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal-visible {
  opacity:1;
  transform:translateY(0);
}
.reveal-delay-1 { transition-delay:.1s; }
.reveal-delay-2 { transition-delay:.2s; }
.reveal-delay-3 { transition-delay:.3s; }
.reveal-delay-4 { transition-delay:.4s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1; transform:none; transition:none; }
}

@media (max-width: 768px) {
  .nav-links { position:fixed; top:70px; left:0; right:0; background:var(--bg-alt); flex-direction:column; padding:20px 24px; gap:16px; display:none; border-bottom:1px solid var(--border); }
  .nav-links.open { display:flex; }
  .nav-toggle { display:flex; }
}