/* (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}}