* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth !important;
}
.parent-current-image {
  height: calc(100vh - 220px);
}
/* CSS untuk spinner di modal gambar */
#currentImage {
  max-width: 100%;
  transition: opacity 0.5s ease-in-out; /* Anda sudah punya ini, bagus! */
  height: 100%; /* Mengurangi tinggi untuk memberi ruang pada konten lain */
  object-fit: contain;
}

#currentImage.hidden {
  opacity: 0; /* Anda sudah punya ini, ini yang akan kita gunakan untuk fade out */
}
/* CSS untuk spinner di modal gambar */
.image-loading-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10; /* Pastikan di atas gambar, tapi di bawah konten modal lain jika perlu */
}
body {
  margin: 0;
  padding: 0;

  color: #fff;
  background-image: radial-gradient(
    ellipse farthest-corner at 50% 20%,
    /* Pusat elips agak ke atas */ #56ab2f 0%,
    /* Warna hijau terang di pusat elips */ #2e5d18 40%,
    /* Warna hijau lebih gelap, transisi lebih cepat */ #000000 90%
      /* Hitam lebih cepat mendominasi di tepi */
  );
  /* background: linear-gradient(to right, #56ab2f, #a8e063); */
  /* overflow: hidden; */
  background-attachment: fixed;
  overflow-x: hidden;
  position: relative;
  font-family: sans-serif;
}

.bubble {
  position: fixed;
  bottom: -200px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  animation: rise 10s infinite ease-in;
}
@keyframes rise {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.5;
  }
  100% {
    transform: translateY(-120vh) scale(1.5); /* naik tinggi sekali */
    opacity: 0;
  }
}

body::before {
  /* content: ""; */
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.2) 0%,
    rgba(0, 0, 0, 0.5) 100%
  );
  opacity: 0.2;
  z-index: 1;
}
body .container,
body footer {
  position: relative;
  z-index: 2;
}

/* body::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150px;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(0, 0, 0, 0) 70%
  );
  z-index: 0;
} */

.card-glass {
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(0, 0, 0, 0.3);
  border-radius: 20px;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  transition: transform 0.3s ease;
  overflow: hidden;
}

.card-glass:hover {
  transform: scale(1.05);
}

.bg-glass {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border-radius: 15px;
}

.flipbook-container {
  width: 100%;
  height: 500px;
  margin: auto;
}

.page img {
  width: 100%;
  height: auto;
  display: block;
}

.skeleton {
  background-color: #e0e0e0;
  height: 100%;
  width: 100%;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}

.flipbook-container {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
  min-height: 520px;
  padding: 10px;
}

.page img {
  width: 100%;
  height: auto;
  transition: opacity 0.3s ease;
  opacity: 0;
}

.skeleton {
  background: #eee;
  height: 100%;
  width: 100%;
  position: absolute;
}

.loading-overlay {
  position: absolute;
  inset: 0;
  /* background: rgba(255, 255, 255, 0.8); */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.loading-overlay .spinner-border {
  width: 3rem;
  height: 3rem;
}

#loadingOverlay {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh; /* Ensure full viewport height */
  box-sizing: border-box; /* Include padding and border in height */
  background: #56ab2f; /* Full green background */
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.5s ease; /* Fade-out transition */
}

#loadingOverlay.hidden {
  opacity: 0;
  pointer-events: none; /* Prevent interaction when hidden */
}

#loadingOverlay .text-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  text-align: center; /* Ensure text is centered */
}

#loadingOverlay img {
  margin-bottom: 20px; /* Add spacing between logo and text */
}

/* Floating Icon */
.floating-icon {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  background-color: #ffffff;
  /* background-color: #56ab2f; */
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  z-index: 999;
  transition: transform 0.3s ease;
}

.floating-icon:hover {
  transform: scale(1.1);
}

.floating-icon img {
  width: 80%;
  height: 80%;
}

/* Feedback Drawer */
.feedback-drawer {
  position: fixed;
  top: 0;
  right: -100%;
  width: 30%;
  height: 100%;
  background-color: #ffffff;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  transition: right 0.3s ease;
  display: flex;
  flex-direction: column;
}

.feedback-drawer.open {
  right: 0;
}

@media (max-width: 768px) {
  .feedback-drawer {
    width: 100%;
  }
  body {
    background-image: linear-gradient(
      to bottom,
      #56ab2f 0%,
      /* Tahan warna hijau solid hingga 25% ketinggian layar */
        /* Anda bisa sesuaikan 25% ini. Semakin besar, semakin
                                         banyak area hijau solid di atas. */
        #2e5d18 50%,
      /* Transisi ke hijau yang lebih gelap */ #000000 100%
        /* Menuju hitam di bagian bawah */
    );
  }
}

.drawer-header {
  padding: 15px;
  background-color: #56ab2f;
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.drawer-body {
  padding: 15px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

textarea.form-control {
  resize: none;
  overflow: hidden;
}

textarea.form-control:focus {
  outline: none;
}

/* Added styles for WebP fallback */
@supports not (background-image: url("img/bg5.webp")) {
  body {
    background-image: url("img/bg5.png");
  }
}

/* blocked touch user event */
img {
  pointer-events: none;
  user-select: none;
}

/* Overlay transparan untuk mencegah klik langsung pada gambar */
.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0);
  z-index: 1;
}
/* Di file style.css Anda */
#currentImage:fullscreen {
  cursor: default; /* Atau none jika ingin kontrol penuh via JS */
}

/* Jika ingin indikator panah kiri/kanan yang lebih jelas */
#currentImage.fullscreen-nav-left:fullscreen {
  cursor: url("../img/left.jpg"), w-resize !important; /* Sediakan file kursor .cur atau .png */
}
#currentImage.fullscreen-nav-right:fullscreen {
  cursor: url("../img/right.jpg"), e-resize !important;
}