:root {
  --bs-body-font-family: 'Plus Jakarta Sans', sans-serif;
  --bs-body-bg: #0d1117;
  --bs-tertiary-bg: #161b22;
}

/* Glassmorphism Navbar */
.bg-dark-blur {
  background-color: rgba(13, 17, 23, 0.85) !important;
  backdrop-filter: blur(12px);
}

.fw-extrabold { font-weight: 800; }
.fs-7 { font-size: 0.8rem; }
.tracking-wider { letter-spacing: 1.5px; }

/* Gradient Highlight Text */
.gradient-text {
  background: linear-gradient(135deg, #38bdf8 0%, #818cf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Profile Photo Hover Animation */
.profile-img {
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
}

/* Hover effect membesar & pendar halus melingkar */
.profile-img:hover {
  transform: scale(1.04);
  box-shadow: 0 0 25px rgba(56, 189, 248, 0.3) !important;
}

.status-dot {
  width: 8px;
  height: 8px;
  background-color: #3fb950;
  border-radius: 50%;
  box-shadow: 0 0 8px #3fb950;
  display: inline-block;
}

/* Button Micro-Interactions */
.btn-hover-bounce {
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-hover-bounce:hover {
  transform: translateY(-3px);
}

.text-white-hover:hover {
  color: #fff !important;
}

/* Project Card Glow & Hover */
.project-card {
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.project-card:hover {
  transform: translateY(-6px);
  border-color: rgba(56, 189, 248, 0.4) !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
}

.max-w-360 {
  max-width: 360px;
}

.tech-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #ffffff;
  border-radius: 4px;
  letter-spacing: 0.5px;
  transition: transform 0.2s ease, filter 0.2s ease;
  cursor: default;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.tech-badge:hover {
  transform: translateY(-2px) scale(1.04);
  filter: brightness(1.15);
}

/* Brand Background Colors */
.badge-html { background-color: #e34f26; }
.badge-js { background-color: #f7df1e; color: #000000; }
.badge-ts { background-color: #3178c6; }
.badge-php { background-color: #777bb4; }
.badge-python { background-color: #3776ab; }
.badge-powershell { background-color: #5391fe; }
.badge-bootstrap { background-color: #7952b3; }
.badge-tailwind { background-color: #06b6d4; }
.badge-laravel { background-color: #ff2d20; }
.badge-node { background-color: #339933; }
.badge-arduino { background-color: #00979d; }
.badge-iot { background-color: #0284c7; }
.badge-raspberry { background-color: #c51a4a; }
.badge-cisco { background-color: #1ba0d7; }
.badge-ubiquiti { background-color: #0559C9; }
.badge-docker { background-color: #2496ed; }
.badge-mysql { background-color: #4479a1; }
.badge-firebase { background-color: #ffca28; color: #000; }
.badge-cloudflare { background-color: #f38020; }
.badge-vercel { background-color: #000000; border: 1px solid #444; }
.badge-postman { background-color: #ff6c37; }
.badge-grafana { background-color: #f46800; }
.badge-wordpress { background-color: #21759b; }