/* ===========================
   Fortopolio — Enhanced (No BG Color Change)
   =========================== */

/* Vars sesuai warna lama */
:root{
  --sidebar-width: 280px;
  --sidebar-bg: #0b0f19;   /* tetap */
  --sidebar-hover: #111827;/* tetap */
  --brand: #0d6efd;        /* tetap */
  --accent: #198754;       /* tetap */
  --text-muted: #cbd5e1;   /* tetap */
  --radius: 14px;
  --shadow-soft: 0 6px 18px rgba(0,0,0,.18);
  --shadow-hover: 0 10px 28px rgba(0,0,0,.28);
  --tr: .28s ease;
}

/* Hormati prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* --- Base (tidak mengubah background body) --- */
body{ scroll-behavior:smooth; }

/* --- Sidebar: efek halus tanpa ubah warna --- */
#sidebar{
  position:fixed; top:0; left:0; bottom:0; width:var(--sidebar-width);
  background: var(--sidebar-bg); /* tetap */
  color:#fff; padding:2rem 1.25rem; overflow-y:auto;
  border-right:1px solid rgba(255,255,255,.06);
  box-shadow: 0 0 24px rgba(0,0,0,.18);
}
#sidebar .avatar{
  width:140px;height:140px;border-radius:50%;object-fit:cover;
  border:6px solid rgba(255,255,255,.15);
  transition: transform var(--tr), box-shadow var(--tr);
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
#sidebar .avatar:hover{ transform: scale(1.04); box-shadow: 0 8px 20px rgba(0,0,0,.35); }

#sidebar .name{ font-size:1.4rem;font-weight:700;margin-top:.75rem; letter-spacing:.2px; }
#sidebar .headline{ font-size:.95rem;opacity:.85; }

/* Nav: lift ringan */
#sidebar .nav a{
  color:var(--text-muted); text-decoration:none; display:block;
  padding:.55rem .75rem; border-radius:.5rem;
  transition: color var(--tr), background var(--tr), transform var(--tr);
}
#sidebar .nav a.active,
#sidebar .nav a:hover{
  background: var(--sidebar-hover); /* tetap */
  color:#fff; transform: translateX(3px);
}

/* Scrollbar sidebar (tidak ubah warna utama) */
#sidebar::-webkit-scrollbar{ width:8px; }
#sidebar::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.15); border-radius:6px; }
#sidebar::-webkit-scrollbar-track{ background: transparent; }

/* --- Content layout --- */
#content{ margin-left:var(--sidebar-width); transition: margin var(--tr); }

/* --- Section & Title underline (brand tetap) --- */
.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:var(--brand); display:block; margin-top:8px; border-radius:2px;
  transition: width var(--tr);
}
.section .section-title:hover::after{ width:88px; }

/* --- Hero: gradient asli dipertahankan --- */
#hero{
  min-height:100vh; display:flex; align-items:center;
  background: linear-gradient(135deg,rgba(13,110,253,.08),rgba(25,135,84,.08)); /* tetap */
  position:relative; overflow:hidden;
}
#hero h1{ font-size:3rem;font-weight:800; }
#hero .lead{ font-size:1.2rem; }

/* Mikro anim lembut (tanpa ubah warna) */
#hero::before{
  content:''; position:absolute; inset:-10%;
  pointer-events:none;
  background: radial-gradient(closest-side, rgba(255,255,255,.06), transparent 70%);
  filter: blur(30px); opacity:.6;
  animation: floatPulse 7s ease-in-out infinite;
}
@keyframes floatPulse{
  0%,100%{ transform: translateY(0) scale(1); }
  50%{ transform: translateY(-10px) scale(1.02); }
}

/* --- Card: hanya shadow & radius (tidak set background) --- */
.card-cover{ height:200px; object-fit:cover; }
.card{
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  transition: transform var(--tr), box-shadow var(--tr);
  border:1px solid rgba(0,0,0,.06);
  /* tidak mengatur background agar mengikuti tema aslinya */
}
.card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-hover); }

/* --- Footer: garis top disesuaikan tone, tanpa ubah bg --- */
.footer-min{
  font-size:.95rem; padding:24px 0;
  border-top:1px solid #e5e7eb; /* tetap */
}

/* --- Skills --- */
.skill-item .progress { background: #e9ecef; border-radius:999px; height:10px; overflow:hidden; }
.skill-item .skill-bar{
  min-width:4%;
  height:100%; border-radius:999px;
  background: linear-gradient(90deg, var(--brand), var(--accent)); /* pakai warna lama */
  position:relative; transition: width .6s ease;
}
.skill-item .skill-bar::after{
  content:''; position:absolute; inset:0;
  background-image: linear-gradient(45deg, rgba(255,255,255,.22) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.22) 50%, rgba(255,255,255,.22) 75%, transparent 75%, transparent);
  background-size: 20px 20px; opacity:.35;
  animation: moveStripe 2.2s linear infinite;
}
@keyframes moveStripe{ from{ background-position:0 0; } to{ background-position:40px 0; } }

/* --- Badge: tanpa ubah bg halaman; hover hanya outline/opacity --- */
.badge{
  font-weight:600; padding:.35em .6em; border-radius:.5rem; text-transform:capitalize;
  border:1px solid rgba(0,0,0,.08);
  transition: transform var(--tr), box-shadow var(--tr), opacity var(--tr);
}
.badge:hover{ transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,.12); opacity:.95; }

/* --- Reveal sederhana (tambah .reveal di elemen) --- */
.reveal{ opacity:0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

/* --- Responsive --- */
@media (max-width: 991.98px){
  :root{ --sidebar-width:0px; }
  #sidebar{ position:static; width:auto; box-shadow:none; border-right:none; border-bottom:1px solid rgba(0,0,0,.06); }
  #content{ margin-left:0; }
  .section{ padding:64px 0; }
  #hero h1{ font-size:2.4rem; }
}
