:root {
  --primary-green: #198754;
}
body {
  font-family: "Inter", sans-serif;
  overflow-x: hidden;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Penyesuaian warna saat mode gelap aktif */
[data-bs-theme="dark"] .bg-white {
  background-color: #212529 !important; /* Warna dark Bootstrap */
}

[data-bs-theme="dark"] .navbar,
[data-bs-theme="dark"] .py-2.border-bottom.bg-white {
  background-color: #1a1d20 !important;
  border-color: #373b3e !important;
}

[data-bs-theme="dark"] .text-dark {
  color: #f8f9fa !important;
}

/* Agar card testimoni dan modal tetap terlihat bagus */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .modal-content {
  background-color: #2c3034;
  border-color: #495057;
}

[data-bs-theme="dark"] .bg-light,
[data-bs-theme="dark"] .bg-light-subtle {
  background-color: #2b2f32 !important;
}

/* Perbaikan Video Background agar benar-benar Cover */
.bg-hero {
  position: relative;
  min-height: 80vh; /* Lebih tinggi untuk impresi hero */
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #000;
}

.nav-link {
  transition: color 0.3s ease, border-color 0.3s ease;
  border-bottom: 2px solid transparent; /* Border transparan saat tidak aktif */
}

.nav-link.active {
  font-weight: bold;
  color: #ff5b5b !important;
  /*border-bottom: 2px solid #ff5b5b;*/
}

/* Opsional: Efek hover agar lebih interaktif */
.nav-link:hover {
  color: #ff5b5b;
}

.video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.video-background iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vh;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Menggunakan Aspect Ratio untuk menjaga video tetap memenuhi layar */
@media (min-aspect-ratio: 16/9) {
  .video-background iframe {
    height: 56.25vw;
  }
}
@media (max-aspect-ratio: 16/9) {
  .video-background iframe {
    width: 177.78vh;
  }
}

.video-background::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6); /* Sedikit lebih gelap agar teks kontras */
  z-index: 2;
}

.bg-hero .container {
  z-index: 3;
  position: relative;
}

/* Responsivitas Logo Partner */
.partner-logos img {
  max-width: 40%;
  height: auto;
  margin-bottom: 20px;
  filter: grayscale(100%);
  transition: 0.3s;
  opacity: 0.7;
}
.partner-logos img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

/* Floating Contact Circle Fix */
.contact-logo-container {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100px;
  height: 100px;
}

/* Simulation Card Mobile Fix */
@media (max-width: 768px) {
  .bg-hero h1 {
    font-size: 1.8rem;
  }
  .bg-hero h3 {
    font-size: 1.2rem;
  }
  .display-5 {
    font-size: 2rem;
  }
  .border-end {
    border-end: none !important;
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 20px;
    padding-bottom: 20px;
  }
}

.hover-scale {
  transition: transform 0.3s ease;
}
.hover-scale:hover {
  transform: scale(1.1);
}
#btn-back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
  z-index: 1000;
}
.cta-section {
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
    url("<?php echo base_url(); ?>assets/images/bg/06.jpg");
  background-attachment: fixed;
  padding: 80px 0;
  color: white;
}
.faq-title {
  font-weight: bold;
  color: #002d4b;
}
.btn-hubungi {
  background-color: #198754;
  color: white;
  padding: 10px 25px;
  border-radius: 5px;
  text-decoration: none;
}
.btn-hubungi:hover {
  background-color: #157347;
  color: white;
}

/* Efek hover scale jika diperlukan */
.hover-scale:hover {
  transform: scale(1.1);
}

/* Mengatur ukuran logo secara dinamis */
.logo-item {
  width: 100px; /* Ukuran default di desktop */
  transition: transform 0.3s ease;
}

/* Media Query untuk Tablet (Layar di bawah 768px) */
@media (max-width: 768px) {
  .logo-item {
    width: 80px; /* Logo mengecil sedikit */
  }
}

/* Media Query untuk Handphone (Layar di bawah 480px) */
@media (max-width: 480px) {
  .logo-item {
    width: 60px; /* Logo mengecil agar muat lebih banyak dalam satu baris */
  }
  .gap-3 {
    gap: 10px !important; /* Memperkecil jarak antar logo */
  }
}

/* Hilangkan focus ring biru bawaan browser */
.accordion-button:focus {
  box-shadow: none;
}

/* Membuat button yang sedang terbuka terlihat lebih "aktif" */
.accordion-button:not(.collapsed) {
  background-color: #f0f7ff; /* Warna biru sangat muda */
  color: #0d6efd;
}

/* Transisi halus pada badge */
.status-label {
  transition: all 0.3s ease;
  font-size: 0.7rem;
  min-width: 55px; /* Menjaga lebar badge tetap konsisten saat teks berubah */
  text-align: left;
}

.flex-grow-1 {
  flex-grow: 1;
}

.cta-card {
  background-color: #ffffff;
  border-radius: 15px;
  padding: 40px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  border: 1px solid #f0f0f0;
}

/* Ikon user samar di latar belakang kiri */
.cta-card::before {
  content: "\f007"; /* Placeholder ikon jika pakai FontAwesome */
  position: absolute;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 150px;
  color: #f8f9fa;
  z-index: 0;
}

/* Mengatur ukuran logo secara dinamis */
.icons-item {
  width: 200px; /* Ukuran default di desktop */
  transition: transform 0.3s ease;
}

/* Media Query untuk Tablet (Layar di bawah 768px) */
@media (max-width: 768px) {
  .icons-item {
    width: 100px; /* Logo mengecil sedikit */
  }
}

/* Media Query untuk Handphone (Layar di bawah 480px) */
@media (max-width: 480px) {
  .icons-item {
    width: 85px; /* Logo mengecil agar muat lebih banyak dalam satu baris */
  }
  .gap-3 {
    gap: 5px !important; /* Memperkecil jarak antar logo */
  }
}

/* 1. Pengaturan Footer Default (Light Mode) */
footer {
  background-color: #f8f9fa !important; /* Abu-abu sangat terang */
  color: #212529 !important;
  transition: all 0.3s ease;
}
footer .footer-description,
footer p,
footer h6 {
  color: #212529 !important;
}
footer hr {
  border-color: rgba(0, 0, 0, 0.1);
}
footer .text-white {
  /* Override class text-white manual jika ada */
  color: #212529 !important;
}

/* 2. Pengaturan Footer Saat Dark Mode */
[data-bs-theme="dark"] footer {
  background-color: #111418 !important; /* Hitam pekat */
  color: #f8f9fa !important;
}
[data-bs-theme="dark"] footer .footer-description,
[data-bs-theme="dark"] footer p,
[data-bs-theme="dark"] footer h6,
[data-bs-theme="dark"] footer .text-white {
  color: #f8f9fa !important;
}
[data-bs-theme="dark"] footer hr {
  border-color: rgba(255, 255, 255, 0.1);
}

/* 3. Logika Penukaran Logo */
[data-bs-theme="dark"] .theme-logo-light {
  display: none !important;
}
[data-bs-theme="dark"] .theme-logo-dark {
  display: block !important;
}

/* Jangan lupa terapkan hal yang sama untuk Navbar logo jika diperlukan */
[data-bs-theme="dark"] .navbar-brand img {
  content: url("../../assets/images/logo/logo-dark-lg.png");
}

/* Default: Sembunyikan logo Dark saat Light Mode */
.theme-logo-dark {
  display: none !important;
}

/* Saat Dark Mode Aktif: Tukar tampilan logo */
[data-bs-theme="dark"] .theme-logo-light {
  display: none !important;
}

[data-bs-theme="dark"] .theme-logo-dark {
  display: block !important;
}

/* Default (Light Mode): Background Transparan */
.dynamic-icon-bg {
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important; /* Border putih tipis agar terlihat di atas video */
  transition: all 0.3s ease;
}

/* Dark Mode: Background Putih */
[data-bs-theme="dark"] .dynamic-icon-bg {
  background-color: #ffffff !important;
  border: none !important;
}

/* Opsional: Jika di Dark Mode gambar logo terlalu mepet, beri sedikit padding */
[data-bs-theme="dark"] .dynamic-icon-bg img {
  filter: none; /* Memastikan logo instansi tidak terkena filter warna */
}

/* Penyesuaian garis pemisah di Hero agar tetap kontras */
.divider-line {
  background-color: #ffffff !important;
}

.bg-danger-soft {
  background-color: rgba(220, 53, 69, 0.1);
}
.bg-primary-soft {
  background-color: rgba(13, 110, 253, 0.1);
}
.nav-pills .nav-link {
  color: #6c757d;
  background: #f8f9fa;
}
.nav-pills .nav-link.active {
  background-color: #dc3545;
  color: #fff;
}
#tangguh-tab.active {
  background-color: #0d6efd !important;
  color: #fff;
}

@media (min-width: 768px) {
  .border-md-end {
    border-right: 1px solid #dee2e6 !important;
  }
}