/* === Dark Mode Base === */
body.bg-dark-mode {
  background-color: #121212;
  color: #ffffff;
  font-family: "Poppins";
}

/* CARD - Lebih terang, tanpa shadow */
.card {
  border-radius: 20px !important;
}

.card.bg-dark-mode {
  background-color: rgba(59, 59, 59, 0.5); /* transparansi */
  border: 1px solid rgba(255, 255, 255, 0.1); /* soft border */
  backdrop-filter: blur(2px); /* efek blur utama */
  -webkit-backdrop-filter: blur(2px); /* untuk Safari */
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); /* bayangan lembut */
  border-radius: 16px; /* sudut membulat */
  transition: all 0.3s ease;
}

/* BORDER */
.rounded {
  border-radius: 15px !important;
}

/* TEXT COLOR */
.text-primary-orange {
  color: #feba17 !important;
}

.text-secondary-dark {
  color: #dddddd !important;
}

.text-muted-dark {
  color: #aaaaaa !important;
}

/* BACKGROUND COLOR */
.bg-primary-orange {
  background-color: #feba17 !important;
  color: #000000 !important; /* teks di atas orange */
}

.bg-surface-dark {
  background-color: #575757 !important;
}

.bg-hover-dark:hover {
  background-color: #383838 !important;
}

/* BUTTONS */

.btn-dark {
  background-color: #575757;
  border-color: #575757;
  color: white;
}

.btn-dark:hover {
  background-color: #feba17;
  border-color: #feba17;
  color: #000000;
}

.btn-primary-orange {
  background-color: #feba17;
  border-color: #feba17;
  color: #000000;
}

.btn-primary-orange:hover {
  background-color: #cc8400;
  border-color: #cc8400;
  color: #000000;
}

/* BORDER */
.border-dark-soft {
  border-color: #3a3a3a !important;
}

.badge-icon {
  border-radius: 10px !important;
}

/* DIVIDER */
.divider-dark {
  height: 2px;
  width: 70px;
  border-radius: 40px;
  background-color: #feba17;
}

.bottom-line {
  border: none;
  border-bottom: 3px solid #feba17;
  padding-bottom: 10px;
  display: inline-block;
}

/* STATUS COLORS */
.alert-success-dark {
  background-color: #2e7d32;
  color: #ffffff;
}

.alert-warning-dark {
  background-color: #ffc107;
  color: #000000;
}

.alert-error-dark {
  background-color: #f44336;
  color: #ffffff;
}

.indicator-point {
  width: 0.5rem;
  height: 0.5rem;
  background-color: #feba17;
  border-radius: 50%;
  box-shadow: 0 0 8px #feba17, 0 0 12px #feba17;
  flex-shrink: 0; /* Penting agar tidak ikut mengecil */
  margin-top: 8px;
}

.skill-image {
  padding: 20px 20px;
  border: 2px solid #646464;
  display: inline-block;
  background-color: transparent; /* Awalnya transparan */
  border-radius: 10px;
  transition: background-color 0.2s ease;
}

.cover-image {
  filter: grayscale(100%);
  transition: filter 0.2s ease;
}

.skill-image:hover {
  background-color: rgba(255, 255, 255, 0.1); /* efek transparan hover */
}

/* Ketika hover ke skill-image, icon dalamnya jadi menyala */
.skill-image:hover .cover-image {
  filter: grayscale(0%);
}

.nav-link {
  color: white !important;
}

.nav-link:hover {
  color: #feba17 !important;
}

.nav-link.active:hover {
  color: white !important;
}

.nav-item .active {
  /* background-color: #feba17 !important; */
  background-color: transparent !important;
  border: none !important;
  border-radius: 0px !important;
  border-bottom: 3px solid #feba17 !important;
  /* padding-bottom: 10px !important;
  display: inline-block !important; */
}

.project-item {
  padding: 16px;
  border: 2px solid #505050;
  border-radius: 20px;
  margin-bottom: 20px;
  background-color: #505050;
}

.image-project {
  border-radius: 10px;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

/* .project-description {
  display: block;
  margin-top: 8px;
  font-size: 0.95rem;
  color: #aaaaaa;
} */

.bg-label-primary {
  background-color: #e7e7ff !important;
  color: #696cff !important;
}
.bg-label-secondary {
  background-color: #ebeef0 !important;
  color: #8592a3 !important;
}
.bg-label-success {
  background-color: #e8fadf !important;
  color: #71dd37 !important;
}
.bg-label-danger {
  background-color: #ffe0db !important;
  color: #ff3e1d !important;
}
.bg-label-warning {
  background-color: #fff2d6 !important;
  color: #ffab00 !important;
}
.bg-label-info {
  background-color: #d7f5fc !important;
  color: #03c3ec !important;
}
.bg-label-dark {
  background-color: #dcdfe1 !important;
  color: #233446 !important;
}

.bg-label-blue {
  background-color: #e4eefb !important;
  color: #0b61d2 !important;
}

.bg-label-cyan {
  background-color: #e0f7fa !important;
  color: #00acc1 !important;
}

.bg-label-teal {
  background-color: #e0f2f1 !important;
  color: #00897b !important;
}

.bg-label-pink {
  background-color: #fce4ec !important;
  color: #ec407a !important;
}

.bg-label-orange {
  background-color: #fff3e0 !important;
  color: #fb8c00 !important;
}

.bg-label-brown {
  background-color: #efebe9 !important;
  color: #6d4c41 !important;
}

.bg-label-black {
  background-color: #e0e0e0 !important;
  color: #000000 !important;
}

.bg-label-indigo {
  background-color: #e8eaf6 !important;
  color: #3f51b5 !important;
}

.bg-label-purple {
  background-color: #f3e5f5 !important;
  color: #9c27b0 !important;
}

.bg-label-green {
  background-color: #e8f5e9 !important;
  color: #43a047 !important;
}

.badge-top {
  border-top-right-radius: 18px !important;
}

@media (min-width: 768px) {
  .profile-sticky {
    position: sticky;
    top: 48px; /* Jarak dari atas layar */
    align-self: flex-start; /* Jika digunakan dalam flex container */
    z-index: 1;
  }
}