/* === Variabel Warna === */
:root {
  --primary-color: #1F509A;
  --light-bg: #ffffff;
  --light-section: #f8f9fa;
  --light-text: #212529;
  --dark-bg: #121212;
  --dark-section: #1e1e1e;
  --dark-text: #f8f9fa;
}

/* === Global Body === */
body {
  scroll-behavior: smooth;
  background-color: var(--light-bg);
  color: var(--light-text);
  padding-top: 70px; /* kompensasi navbar fixed */
  transition: background-color 0.3s, color 0.3s;
}

/* === Navbar === */
.navbar {
  background-color: var(--primary-color) !important;
}
.navbar-dark .navbar-nav .nav-link {
  color: #fff;
  transition: color 0.2s;
}
.navbar-dark .navbar-nav .nav-link:hover {
  color: #e2e2e2;
}
.navbar-brand img {
  vertical-align: middle;
}

/* === Carousel === */
.carousel-item img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}
@media (min-width: 992px) {
  .carousel-item img {
    height: 600px;
  }
}

/* === Profil === */
#profil {
  background-color: #eaf1fb; /* biru muda */
  margin-top: 0; /* tidak ada jarak dari slide */
}
body.dark-mode #profil {
  background-color: #24324a; /* biru tua */
}

/* Ukuran teks profil diperkecil */
.profil-text {
  font-size: 1rem; /* sama dengan teks visi/misi */
  line-height: 1.6;
}

/* === Kontak === */
#kontak {
  background-color: var(--light-section);
}
body.dark-mode #kontak {
  background-color: var(--dark-section);
}

/* === Footer === */
footer {
  background-color: var(--primary-color);
}

/* === Mode Gelap === */
body.dark-mode {
  background-color: var(--dark-bg);
  color: var(--dark-text);
}

body.dark-mode .navbar,
body.dark-mode footer {
  background-color: #0e2d66 !important;
}

body.dark-mode #profil h2,
body.dark-mode #profil h5,
body.dark-mode #profil p,
body.dark-mode #profil li,
body.dark-mode #kontak h3,
body.dark-mode #kontak p {
  color: var(--dark-text);
}

/* Tombol sosial adaptif */
body.dark-mode .btn-outline-primary,
body.dark-mode .btn-outline-danger {
  border-color: #f8f9fa;
  color: #f8f9fa;
}
body.dark-mode .btn-outline-primary:hover,
body.dark-mode .btn-outline-danger:hover {
  background-color: #f8f9fa;
  color: #121212;
}

/* === Tombol Toggle Mode === */
#toggleModeBtn {
  border: none;
  background: transparent;
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  margin-left: 15px;
  transition: transform 0.2s;
}
#toggleModeBtn:hover {
  transform: scale(1.1);
}

/* === Fitur Card === */
.feature-card {
  border: none;
  background-color: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s, box-shadow 0.2s;
}
.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.feature-card i {
  color: var(--primary-color);
}

/* Mode Gelap: Card */
body.dark-mode .feature-card {
  background-color: #1f1f1f;
  color: var(--dark-text);
  box-shadow: 0 2px 6px rgba(255, 255, 255, 0.05);
}
body.dark-mode .feature-card i {
  color: #f8f9fa;
}

/* === Fitur Card Klikable === */
.feature-card {
  border: none;
  background-color: #ffffff;
  color: var(--light-text);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.feature-card i {
  color: var(--primary-color);
}

/* Mode Gelap */
body.dark-mode .feature-card {
  background-color: #1f1f1f;
  color: var(--dark-text);
  box-shadow: 0 2px 6px rgba(255, 255, 255, 0.05);
}

body.dark-mode .feature-card i {
  color: #f8f9fa;
}

/* Hilangkan underline link */
.feature-card.text-decoration-none:hover {
  text-decoration: none;
}

#kontak p i {
  color: var(--primary-color);
  font-size: 1.2rem;
}
body.dark-mode #kontak p i {
  color: #f8f9fa;
}