/* (dipersingkat, sama seperti versi sebelumnya + warna jenjang) */
*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:"Poppins",system-ui,-apple-system,Arial,sans-serif;color:#0f172a;background:#0b1220;overflow-x:hidden}
.bg{position:fixed;inset:0;background:radial-gradient(60% 60% at 20% 20%,#6ee7b7 0%,transparent 60%),radial-gradient(60% 60% at 80% 30%,#93c5fd 0%,transparent 60%),radial-gradient(60% 60% at 50% 80%,#fca5a5 0%,transparent 60%),linear-gradient(120deg,#0b1220 0%,#111827 100%);filter:blur(40px) saturate(120%);animation:float 18s ease-in-out infinite;z-index:-1}
@keyframes float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-12px) scale(1.02)}}
.container{width:min(980px,92vw);margin:48px auto 64px;animation:fadeIn .7s ease forwards;opacity:0}
@keyframes fadeIn{to{opacity:1}}.hero{text-align:center;margin-bottom:24px;animation:slideUp .7s .1s cubic-bezier(.2,.8,.2,1) both}
@keyframes slideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.avatar{width:132px;height:132px;object-fit:cover;border-radius:999px;border:5px solid rgba(255,255,255,.6);box-shadow:0 16px 40px rgba(0,0,0,.35)}
.title{margin:14px 0 4px;color:#e5e7eb;font-weight:700;letter-spacing:.3px}.subtitle{color:#cbd5e1}
.card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:20px 18px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);margin:16px 0;box-shadow:0 16px 40px rgba(0,0,0,.25);animation:pop .6s cubic-bezier(.2,.8,.2,1) both}
.card h2{margin:0 0 12px;color:#fff;letter-spacing:.2px}@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.grid{display:grid;gap:10px}.row{display:grid;grid-template-columns:210px 1fr;gap:8px;align-items:start;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color:#e5e7eb}.row span{color:#cbd5e1}
.timeline{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:14px}.timeline li{position:relative;padding-left:24px;color:#e5e7eb}
.timeline li::before{content:"";position:absolute;left:10px;top:0;bottom:-14px;width:2px;background:linear-gradient(#93c5fd,transparent)}
.timeline .dot{position:absolute;left:3px;top:2px;width:14px;height:14px;border-radius:999px;background:#93c5fd;box-shadow:0 0 0 4px rgba(147,197,253,.22)}
.timeline .content h3{margin:0 0 4px;color:#fff}.timeline .content p{margin:0;color:#cbd5e1}
.timeline li.kuliah .dot{background:#3b82f6;box-shadow:0 0 0 4px rgba(59,130,246,.22)}
.timeline li.sma .dot{background:#9333ea;box-shadow:0 0 0 4px rgba(147,51,234,.22)}
.timeline li.smp .dot{background:#34d399;box-shadow:0 0 0 4px rgba(52,211,153,.22)}
.timeline li.sd .dot{background:#fbbf24;box-shadow:0 0 0 4px rgba(251,191,36,.22)}
.timeline li.kuliah::before{background:linear-gradient(#3b82f6,transparent)}
.timeline li.sma::before{background:linear-gradient(#9333ea,transparent)}
.timeline li.smp::before{background:linear-gradient(#34d399,transparent)}
.timeline li.sd::before{background:linear-gradient(#fbbf24,transparent)}
.icons{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;text-decoration:none;color:#0b1220;font-weight:700;background:#a7f3d0;border:1px solid rgba(255,255,255,.25);transition:transform .15s ease,filter .15s ease,background .2s ease;will-change:transform,filter}
.btn:hover{transform:translateY(-2px);filter:brightness(1.03)}.btn svg{width:20px;height:20px;fill:currentColor}
.foot{display:grid;place-items:center;gap:10px;margin-top:12px;color:#cbd5e1}.audio-btn{border:1px solid rgba(255,255,255,.2);background:#fef3c7;color:#1f2937;padding:10px 14px;border-radius:12px;font-weight:700;cursor:pointer;transition:transform .15s ease}
.audio-btn:hover{transform:translateY(-1px)}@media(max-width:640px){.row{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.bg,.container,.hero,.card{animation:none!important}}

/* === Background Video + Bokeh Overlay === */
.bg-video{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -3;
  filter: brightness(0.9) contrast(1.05) saturate(1.15);
}

/* Jadikan .bg sebagai lapisan bokeh lembut di atas video, tidak menutupi detail */
.bg{
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .6;
  filter: blur(24px) saturate(130%);
  z-index: -2;
}

/* Vignette halus agar konten lebih fokus */
body::after{
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(120% 120% at 50% 10%, rgba(0,0,0,0) 0%, rgba(0,0,0,.15) 60%, rgba(0,0,0,.35) 100%);
  pointer-events: none;
  z-index: -1;
}

/* === Top Navigation (floating) === */
.topnav{
  position: fixed;
  top: 16px;
  right: 16px;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 50;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.topnav .nav-link{
  color: #e5e7eb;
  text-decoration: none;
  font-weight: 700;
  padding: 8px 10px;
  border-radius: 12px;
  transition: transform .15s ease, background .2s ease;
}
.topnav .nav-link:hover{ transform: translateY(-1px); background: rgba(255,255,255,.1); }

.topnav .download.btn-ghost{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  font-weight: 800;
  color: #0b1220;
  background: #a7f3d0;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.25);
  transition: transform .15s ease, filter .15s ease;
}
.topnav .download.btn-ghost:hover{ transform: translateY(-1px); filter: brightness(1.05); }

/* === CV Section === */
.cv .btn-download{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 16px;
  text-decoration: none;
  font-weight: 800;
  color: #0b1220;
  background: linear-gradient(180deg, #a7f3d0, #6ee7b7);
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  transition: transform .15s ease, filter .15s ease;
}
.cv .btn-download:hover{ transform: translateY(-2px); filter: brightness(1.05); }
.cv .btn-download svg{ width: 22px; height: 22px; fill: currentColor; }

/* Responsif untuk topnav */
@media(max-width:640px){
  .topnav{ right: 10px; left: 10px; justify-content: space-between; }
}