/* Pengaturan khusus untuk layar HP */
@media (max-width: 767px) {
    .copyright .copyright-text {
        font-size: 12px !important; /* Memaksa ukuran font menjadi 12px */
    }
}

.swiper {
  width: 100%;
 
}

/* Base Card Style */
.gallery-card {
  position: relative;
  border-radius: 15px;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1 / 1;
  /* box-shadow: 0 10px 20px rgba(0,0,0,0.1); */
}

.gallery-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Overlay Styling */
.gallery-card .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, #0387bf 10%, #0387bf2e 80%);
  display: flex;
  align-items: flex-end;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.gallery-card .text-content {
  color: white !important;
  transform: translateY(30px);
  transition: transform 0.5s ease;
  padding: 20px;
}

.gallery-card .text-content h5{
  color: white !important;
}

/* Hover Effects */
/* .gallery-card:hover img {
  transform: scale(1.1);
}

.gallery-card:hover .overlay {
  opacity: 1;
}

.gallery-card:hover .text-content {
  transform: translateY(0);
} */
 /* --- EFEK HOVER HANYA UNTUK DESKTOP / PERANGKAT DENGAN MOUSE --- */
@media (hover: hover) {
  .gallery-card:hover img {
    transform: scale(1.1);
  }

  .gallery-card:hover .overlay {
    opacity: 1;
  }

  .gallery-card:hover .text-content {
    transform: translateY(0);
  }
}

/* --- PENGATURAN UNTUK MOBILE (Layar Sentuh) --- */
@media (max-width: 768px) {
  /* Pastikan gambar tidak bisa di-zoom saat tidak sengaja tersentuh */
  /* .gallery-card img {
    transform: none !important;
  } */

  /* Opsi A: Jika ingin overlay BENAR-BENAR HILANG di mobile */
  .gallery-card .overlay {
    display: none;
  }

  /* Opsi B: Jika ingin overlay SELALU MUNCUL (Tanpa Hover) agar teks terbaca di HP */
  .gallery-card .overlay {
    opacity: 1;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
  }
  .gallery-card .text-content {
    transform: translateY(0);
  }
 
}

/* Warna Tombol Navigasi Swiper */
.swiper-button-next, .swiper-button-prev {
  color: #000;
  background: rgba(255,255,255,0.8);
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.swiper-button-next::after, .swiper-button-prev::after {
  font-size: 18px;
  font-weight: bold;
}


/* detail gambar  */
/* Container Utama Lightbox */
.custom-lightbox {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.742); /* Latar belakang sedikit lebih gelap */
    backdrop-filter: blur(5px);
    /* Tambahkan padding agar konten tidak menempel ke dahi/sisi layar */
    padding: 20px; 
    box-sizing: border-box; /* Penting agar padding tidak menambah lebar total */
}

/* Tombol Close (X) */
.close-lightbox {
    position: absolute;
    top: 15px;
    right: 25px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    z-index: 10002; /* Z-index tertinggi */
}
.close-lightbox:hover { color: #bbb; }

/* Tombol Navigasi Kiri Kanan */
.lightbox-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.7); /* Agak transparan agar tidak terlalu ganggu */
    font-size: 50px;
    padding: 20px;
    cursor: pointer;
    user-select: none;
    z-index: 10001;
    transition: 0.3s;
}
.lightbox-nav-btn:hover {
    color: white;
    background: rgba(0,0,0,0.3); /* Background halus saat hover */
}
.prev-btn { left: 10px; }
.next-btn { right: 10px; }


/* --- BAGIAN PENTING YANG DIPERBAIKI --- */

/* Wadah Gambar */
.lightbox-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    /* Pastikan wadah ini tidak tertutup navigasi */
    position: relative; 
}

/* Gambar di dalam Lightbox */
.lightbox-content {
    /* Trik agar gambar selalu full tapi tidak keluar layar */
    width: auto;  /* Biarkan lebar menyesuaikan */
    height: auto; /* Biarkan tinggi menyesuaikan */
    
    /* Batasi maksimal lebar dan tinggi berdasarkan layar */
    max-width: 90vw; /* Maksimal 90% dari lebar layar (Viewport Width) */
    max-height: 90vh; /* Maksimal 90% dari tinggi layar (Viewport Height) */
    
    /* KUNCI UTAMA: Pastikan gambar utuh dan proporsional */
    object-fit: contain; 
    
    border-radius: 4px;
    box-shadow: 0 5px 30px rgba(0,0,0,0.5);
    animation: zoomIn 0.3s ease-out;
}

@keyframes zoomIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Responsif untuk layar kecil */
@media (max-width: 576px) {
    .lightbox-nav-btn {
        font-size: 30px;
        padding: 10px;
    }
    .close-lightbox {
        top: 10px;
        right: 15px;
        font-size: 30px;
    }
    /* Di HP, kita beri ruang lebih sedikit di pinggir */
    .lightbox-content {
        max-width: 95vw; 
        max-height: 85vh; /* Sisakan ruang atas untuk tombol close */
    }
}