/* CUSTOM CSS MASJID HEKAPAN */
body { 
  font-family: 'Plus Jakarta Sans', 'Noto Sans JP', sans-serif; 
  -webkit-tap-highlight-color: transparent; 
}
.font-arab { 
  font-family: 'Amiri', serif; 
  line-height: 1.8; 
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.scrollx-snap { scroll-snap-type: x mandatory; }
.snap-item { scroll-snap-align: center; }
.hide-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.hide-scrollbar::-webkit-scrollbar { display: none; }

/* Animasi Tab Info */
.tab-slider { position: absolute; bottom: 0; height: 3px; width: 50%; background: #0EA5E9; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 3px 3px 0 0; }
.tab-left .tab-slider { transform: translateX(0); }
.tab-right .tab-slider { transform: translateX(100%); }

/* Animasi Muncul (Reveal) */
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; }
.reveal.active { opacity: 1; transform: translateY(0); }

/* Background khusus index.html */
.bg-pattern-index { 
  background-color: #f8fafc;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%230ea5e9' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Animasi Hero Slider */
.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1);
  transition: opacity 1.5s ease-in-out, transform 10s ease-out;
}
.hero-slide.active {
  opacity: 1;
  transform: scale(1.1);
}
/* Layout Fluid untuk Panduan Muslim */
.child-w-fluid > a, .child-w-fluid > div {
  flex: 1 1 calc(50% - 1rem); /* Di layar HP (Kecil), lebarnya 50% / 2 kotak berjejer */
  min-width: 150px;
  max-width: calc(25% - 1rem); /* Di layar PC (Lebar), lebarnya 25% / 4 kotak berjejer maksimal */
}

@media (max-width: 768px) {
  .child-w-fluid > a, .child-w-fluid > div {
    max-width: 100%; /* Di HP, izinkan memenuhi ruang jika ganjil */
  }
}
/* Style Khusus APP.HTML */
.glass-ultra { background: rgba(13, 22, 35, 0.5); backdrop-blur: 24px; border: 1px solid rgba(255, 255, 255, 0.08); }
.tahajjud-mode { background-color: #000000 !important; }
.tahajjud-card { border: 1px solid rgba(255, 215, 0, 0.3) !important; background: linear-gradient(135deg, #000 0%, #0a0a0a 100%) !important; }