#page-loader.fade {
		opacity: 0;
		transition: opacity 0.5s ease;
	}

	/* === Header / Navbar === */
	.header {
		background-color: #ffffff;
		padding: 15px 0;
		box-shadow: 0 2px 10px rgba(0,0,0,0.05);
	}

	.hero-section {
		background: linear-gradient(to right, #e0c3fc, #8ec5fc); /* lavender ke biru muda */
		position: relative;
		overflow: hidden;
	}

	.title-shadow {
		text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
		letter-spacing: 1px;
	}

	.text-shadow {
		color: #fff;
		text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);
		font-weight: 500;
	}

	.modal-content {
	  position: relative;
	  z-index: 1055;
	}

	.btn-close {
	  z-index: 1060;
	}
	
	.gambar-box {
	  width: 300px;
	  height: 225px;
	  border: 1px solid #ddd;
	  border-radius: 8px;
	  overflow: hidden;
	  background: #000;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  margin-bottom: 10px;
	  box-shadow: 0 0 8px rgba(0,0,0,0.1);
	}
	.gambar-box img {
	  max-width: 100%;
	  max-height: 100%;
	  object-fit: contain;
	}
	
	.gambar-box {
      position: relative;
      overflow: hidden;
    }
    
    .gambar-box::after {
      content: "\f002"; /* ikon search dari FontAwesome */
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      font-size: 2rem;
      color: #fff;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0);
      opacity: 0;
      transition: all 0.3s ease;
    }
    
    .gambar-box:hover::after {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
    }
    
    .gambar-box:hover img {
      transform: scale(1.1);
      filter: brightness(70%);
    }

	
	/* Modal kecil dan gambar fit */
	.modal-content { max-width: 800px; margin: auto; }
	#carouselGambar img { max-width: 100%; max-height: 80vh; object-fit: contain; }