html {
  scroll-behavior: smooth;
  scroll-padding-top: 56px;
}

body {
  font-family: "Raleway", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  /* memberi padding atas agar konten tidak tertutup navbar fixed */
  padding-top: 56px;
}

/* mengatur agar setiap section memenuhi layar */
.full-page-section {
  min-height: 100vh;
  padding: 60px 20px;
}

/* mengatur ukuran font item di navbar agar lebih kecil */
.navbar .nav-link {
  font-size: 0.9rem;
}

/* memberi efek hover warna secondary pada nav item */
.navbar .nav-link:hover {
  color: white !important;
  /* background-color: #6c757d !important; */
  background-color: #345beb !important;
}

#beranda {
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url("images/hero/hero.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 100vh;
  padding-top: 35px;
  padding-bottom: 100px !important;
}

#layanan {
  background-color: #e9ecef; /* Abu-abu terang */
}

/* accordion styles */
.accordion-button {
  font-weight: normal;
  transition: all 0.3s ease;
}

.accordion-button.collapsed:hover {
  font-weight: bold !important;
}

.accordion-button:not(.collapsed) {
  font-weight: bold;
  color: white;
  background-color: #345beb;
}

.accordion-button:focus {
  box-shadow: none;
  border-color: rgba(0, 0, 0, 0.125);
}

.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.service-features {
  list-style: none;
  padding: 0;
  margin-bottom: 20px;
}

.service-features {
  list-style: none;
  padding: 0;
  margin-bottom: 20px;
}

.service-features-features li {
  color: #6c757d;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}

.service-features i {
  margin-right: 10px;
}

#produk {
  background-color: #dee2e6;
}

/* Styling Kartu Produk Baru (Full Gambar) */
.product-card-full {
  position: relative;
  height: 300px; /* Atur tinggi kartu agar seragam */
  overflow: hidden; /* Memastikan gambar tetap di dalam rounded corner */
  border-radius: 1rem;
}

/* Efek mengangkat */
/* .product-card-full:hover {
  transform: translateY(-5px); 
} */

.product-card-full img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.product-card-full:hover img {
  transform: scale(1.05); /* Efek zoom pada gambar saat hover */
}

.product-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* Latar gradien agar teks terbaca */
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.8) 0%,
    /* Gelap di bawah (untuk tombol) */ rgba(0, 0, 0, 0) 40%,
    /* Transparan di tengah */ rgba(0, 0, 0, 0.5) 100%
      /* Sedikit gelap di atas (untuk judul) */
  );

  /* Menggunakan Flexbox untuk memposisikan konten */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Mendorong judul ke atas, tombol ke bawah */
  padding: 1rem;
  color: white;
}

.product-card-overlay h5 {
  /* Judul sudah otomatis di kiri atas */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
  font-size: 1rem; /* Sesuaikan ukuran font jika perlu */
}

.product-card-overlay .btn {
  /* Mendorong tombol ke kanan bawah */
  align-self: flex-end;
  font-size: 0.65rem;
}

/* Kustomisasi Tombol Carousel Produk (Tetap Sama) */
#productCarousel .carousel-control-prev,
#productCarousel .carousel-control-next {
  transform: translateY(-50%);
  top: 50%;
  width: 45px;
  height: 45px;
  background-color: rgba(255, 255, 255, 0.7); /* Latar putih transparan */
  border-radius: 50%;
  opacity: 1;
}

#productCarousel .carousel-control-prev {
  left: -20px;
}
#productCarousel .carousel-control-next {
  right: -20px;
}

/* Ganti warna ikon panah jadi hitam (Tetap Sama) */
#productCarousel .carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}
#productCarousel .carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

#productCarousel .carousel-control-prev:hover,
#productCarousel .carousel-control-next:hover {
  background-color: #fff; /* Latar jadi putih solid saat hover */
}

/* Pada layar kecil, tombol kembali ke dalam (Tetap Sama) */
@media (max-width: 768px) {
  #productCarousel .carousel-control-prev {
    left: 5px;
  }
  #productCarousel .carousel-control-next {
    right: 5px;
  }
}

/* Styling untuk tombol carousel yang dinonaktifkan (Tetap Sama) */
#productCarousel .carousel-control-prev.disabled,
#productCarousel .carousel-control-next.disabled {
  opacity: 0;
  pointer-events: none;
  cursor: default;
}

#testimoni {
  background-color: #ced4da; /* Abu-abu medium */
}

/* Testimonial Card Styling */
.testimonial-card {
  border-radius: 1rem; /* Samakan dengan product card */
}

/* Styling untuk Avatar Testimoni */
.testimonial-avatar {
  width: 50px; /* Lebar lingkaran */
  height: 50px; /* Tinggi lingkaran */
  border-radius: 50%; /* Membuatnya bulat */
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.2rem; /* Ukuran inisial */
  flex-shrink: 0; /* Mencegah avatar mengecil jika nama panjang */
}

/* Add hover animation to testimonial cards */
#testimoni .testimonial-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Ensure smooth transition */
  cursor: pointer; /* Add hand cursor on hover */
}

#testimoni .testimonial-card:hover {
  transform: translateY(-5px); /* Lift card up slightly */
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; /* Increase shadow */
}

#kontak {
  background-color: #343a40; /* Abu-abu gelap (seperti footer) */
}

/* Styling Map Responsif */
.map-responsive {
  overflow: hidden;
  /* Rasio aspek untuk peta 600x450 (450/600 = 0.75) */
  /* padding-bottom: 75%;  */
  padding-bottom: 60%;
  position: relative;
  height: 0;
}

.map-responsive iframe {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute;
  border-radius: 0.5rem; /* Samakan sudut bulat peta */
}

/* Perkecil font detail kontak */
#kontak .col-md-6.text-start p {
  font-size: 0.9rem; /* Ukuran standar <p> adalah 1rem */
}

/* Styling untuk tombol kembali ke atas (Versi Transparan Statis) */
#back-to-top-btn {
  display: none; /* Sembunyi secara default (INI SATU-SATUNYA DISPLAY) */
  position: fixed;
  bottom: 75px;
  right: 30px;
  z-index: 99;
  width: 35px;
  height: 35px;
  font-size: 20px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border-radius: 50%;
  text-decoration: none;
  /* 'display: flex;' DIHAPUS DARI SINI */
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
}

#back-to-top-btn:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Styling untuk tombol WhatsApp melayang (Ukuran Disesuaikan) */
.whatsapp-float {
  position: fixed;
  width: 35px;
  height: 35px;
  font-size: 20px;
  bottom: 30px;
  right: 30px;
  background-color: #25d366;
  color: #fff;
  border-radius: 50px;
  /* box-shadow: 2px 2px 3px #999; */
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: opacity 0.3s;
  opacity: 0.7;
}

.whatsapp-float:hover {
  opacity: 1;
}

/* styling untuk carousel galeri di beranda */
#heroGalleryCarousel .carousel-item img {
  height: 350px; /* Atur tinggi tetap untuk semua gambar galeri */
  /* Crop gambar agar pas tanpa distorsi */
  object-fit: cover;
  border-radius: 0.375rem; /* Menyesuaikan dengan 'rounded' bootstrap */
}

#heroGalleryCarousel .carousel-caption {
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 0.25rem;
  padding: 0.75rem 1.25rem; /* Menambah padding untuk proporsionalitas */
  bottom: 2rem;
}

#heroGalleryCarousel .carousel-caption p {
  font-size: 0.75rem; /* <-- PERKECIL LAGI NILAI INI */
  margin-bottom: 0;
}

/* Mengubah indikator carousel galeri dari garis menjadi titik */
#heroGalleryCarousel .carousel-indicators [data-bs-target] {
  width: 10px; /* Atur lebar titik */
  height: 10px; /* Atur tinggi titik */
  border-radius: 50%; /* Ini kuncinya: membuat jadi lingkaran */

  /* Kode di bawah ini menyesuaikan/mereset gaya default Bootstrap */
  margin-right: 5px; /* Jarak antar titik */
  margin-left: 5px; /* Jarak antar titik */
  border-top: 0; /* Hapus border atas transparan bawaan */
  border-bottom: 0; /* Hapus border bawah transparan bawaan */
  text-indent: -9999px; /* Tetap sembunyikan teks */
}

/* Menggeser tombol galeri beranda ke luar gambar */
#heroGalleryCarousel .carousel-control-prev,
#heroGalleryCarousel .carousel-control-next {
  /* Membuat tombol menjadi lingkaran hitam transparan */
  background-color: rgba(0, 0, 0, 0.4);
  width: 45px;
  height: 45px;
  border-radius: 50%;

  /* Posisikan di tengah secara vertikal */
  top: 50%;
  transform: translateY(-50%);
}

#heroGalleryCarousel .carousel-control-prev {
  /* Geser ke luar sisi kiri */
  left: -25px;
}

#heroGalleryCarousel .carousel-control-next {
  /* Geser ke luar sisi kanan */
  right: -25px;
}

/* Styling untuk info kontak di navbar */
.navbar-contact-info i,
.navbar-contact-info a {
  color: #ced4da !important; /* Warna putih agak abu-abu */
  font-size: 0.8rem; /* Ukuran font diperkecil sedikit */
  transition: color 0.3s;
}

.navbar-contact-info a:hover {
  color: #fff !important; /* Jadi putih solid saat di-hover */
}

/* Styling untuk Footer Baru */
footer {
  /* Mengatur warna latar, biarkan 'bg-dark' dari HTML */
  padding: 2rem 0;
}

footer .footer-link {
  color: #fff; /* Warna teks link putih */
  text-decoration: none;
  font-size: 0.9rem; /* Ukuran font link */
  transition: color 0.3s;
}

footer .footer-link:hover {
  color: #0d6efd; /* Warna link saat di-hover (biru primary) */
}

footer i {
  color: #ced4da; /* Warna ikon putih-abu */
}

footer small {
  font-size: 0.8rem;
}

footer .mb-3 .d-block {
  font-size: 0.9rem;
}

/* Styling untuk Fitur di Dalam Modal Produk */
.modal-body .modal-features {
  padding-left: 0.5rem;
}

.modal-body .modal-features li {
  display: flex;
  align-items: flex-start; /* Jaga ikon dan teks rata atas */
  margin-bottom: 0.75rem;
  font-size: 0.95rem; /* Sedikit lebih besar dari teks biasa */
}

.modal-body .modal-features i {
  margin-top: 3px; /* Posisikan ikon agar pas dengan baris pertama teks */
}

/* Perkecil lebar modal di desktop (layar large / lg) */
@media (min-width: 992px) {
  .modal-lg {
    max-width: 600px; /* Defaultnya 800px */
  }
}

/* PERBAIKAN: Atur gambar produk di modal agar di tengah (mode HP) */
@media (max-width: 767.98px) {
  /* Target kolom gambar di dalam modal */
  .modal-body .row .col-md-4 {
    display: flex;
    justify-content: center; /* Ini akan memusatkan gambar */
    margin-bottom: 1rem; /* Beri jarak bawah setelah gambar */
  }

  .modal-body .row .col-md-4 img {
    width: 80%; /* Perkecil gambar agar 'justify-content' berfungsi */
    height: auto;
  }
}

/* Kustomisasi Tombol Carousel Testimoni */
#testimonialCarousel .carousel-control-prev,
#testimonialCarousel .carousel-control-next {
  transform: translateY(-50%);
  top: 50%;
  width: 45px;
  height: 45px;
  background-color: rgba(0, 0, 0, 0.15); /* Latar abu-abu transparan */
  border-radius: 50%;
  opacity: 1;
}

#testimonialCarousel .carousel-control-prev {
  left: -20px;
}
#testimonialCarousel .carousel-control-next {
  right: -20px;
}

/* Ganti warna ikon panah jadi hitam */
#testimonialCarousel .carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}
#testimonialCarousel .carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

#testimonialCarousel .carousel-control-prev:hover,
#testimonialCarousel .carousel-control-next:hover {
  background-color: rgba(0, 0, 0, 0.3); /* Sedikit lebih gelap saat hover */
}

/* Bawa tombol ke dalam di layar HP */
@media (max-width: 768px) {
  #testimonialCarousel .carousel-control-prev {
    left: 5px;
  }
  #testimonialCarousel .carousel-control-next {
    right: 5px;
  }
}

/* Styling untuk tombol carousel yang dinonaktifkan */
#testimonialCarousel .carousel-control-prev.disabled,
#testimonialCarousel .carousel-control-next.disabled {
  opacity: 0;
  pointer-events: none;
  cursor: default;
}

#testimoni .testimonial-card:hover {
  transform: scale(0.95);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* Mengubah warna indikator carousel yang aktif menjadi hitam */
/* #heroGalleryCarousel .carousel-indicators .active, */
#testimonialCarousel .carousel-indicators .active,
#productCarousel .carousel-indicators .active {
  background-color: #a09e9e; /* Kode untuk warna hitam */
}

/* Styling untuk logo marketplace di footer */
.footer-social-links .footer-logo {
  height: 32px; /* Atur tinggi logo (misal 32px), lebar akan otomatis */
  width: auto;
  opacity: 0.7; /* Beri efek agak pudar */
  transition: opacity 0.3s;
}

.footer-social-links a:hover .footer-logo {
  opacity: 1; /* Tampilkan penuh saat hover */
}

/* Pastikan tidak ada background di link yang membungkus logo */
.footer-social-links a.footer-link {
  background-color: transparent !important; /* Hilangkan background jika ada */
  border: none !important; /* Hilangkan border jika ada */
  padding: 0; /* Pastikan tidak ada padding berlebih */
}