
:root{ --sidebar-width: 280px; }
body{ scroll-behavior:smooth; }
#sidebar{ position:fixed; top:0; left:0; bottom:0; width:var(--sidebar-width); background:#0b0f19; color:#fff; padding:2rem 1.25rem; overflow-y:auto; }
#sidebar .avatar{ width:140px;height:140px;border-radius:50%;object-fit:cover;border:6px solid rgba(255,255,255,.15); }
#sidebar .name{ font-size:1.4rem;font-weight:700;margin-top:.75rem; }
#sidebar .headline{ font-size:.95rem;opacity:.85; }
#sidebar .nav a{ color:#cbd5e1;text-decoration:none;display:block;padding:.55rem .75rem;border-radius:.5rem; }
#sidebar .nav a.active,#sidebar .nav a:hover{ background:#111827;color:#fff; }
#content{ margin-left:var(--sidebar-width); }
.section{ padding:80px 0; }
.section .section-title{ font-weight:700;margin-bottom:24px;position:relative; }
.section .section-title::after{ content:''; width:56px;height:3px;background:#0d6efd;display:block;margin-top:8px; }
#hero{ min-height:100vh;display:flex;align-items:center;background:linear-gradient(135deg,rgba(13,110,253,.08),rgba(25,135,84,.08)); }
#hero h1{ font-size:3rem;font-weight:800; }
#hero .lead{ font-size:1.2rem; }
.card-cover{ height:200px;object-fit:cover; }
.footer-min{ font-size:.95rem;padding:24px 0;border-top:1px solid #e5e7eb; }
@media (max-width: 991.98px){ :root{ --sidebar-width:0px; } #sidebar{ position:static;width:auto; } #content{ margin-left:0; } }
.skill-item .progress { background: #e9ecef; }
.skill-item .skill-bar { min-width: 4%; } /* bar tetap terlihat saat >0 */
.badge {
  font-weight: 600;
  padding: 0.35em 0.6em;
  border-radius: 0.5rem;
  text-transform: capitalize;
}
