/* =========================================
   1. FONT FACE (WAJIB DIISI URL ASLINYA)
   ========================================= */
/* PENTING: Upload file font ke Media Library WordPress, 
   lalu copy URL-nya dan paste di dalam url('...') di bawah ini. */

@font-face {
  font-family: 'Boogy Brut Poster Web White';
  src: url('LINK_FONT_KAMU_DISINI.woff2') format('woff2'),
       url('LINK_FONT_KAMU_DISINI.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* =========================================
   2. VARIABEL GLOBAL
   ========================================= */
:root {
  --grey: #d9d9d9;
  --black: #000;
  --white: #fff;
  --main-dark: #000000;
  --main-light: #d18221;
}

/* =========================================
   3. SCOPED RESET (HANYA AKTIF SAAT GALERI MUNCUL)
   ========================================= */

/* A. Keadaan Normal (Halaman Lain) - Biarkan scroll berjalan */
html, body {
  /* Tidak ada overflow: hidden disini agar page lain aman */
}

/* B. Keadaan Galeri Aktif (.scg-active) */
/* Class ini ditambahkan otomatis oleh JS saat shortcode galeri ada */

html.scg-active {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important; /* KUNCI: Lock Scroll hanya di sini */
  
  /* Font Size Dinamis Khusus Galeri */
  font-size: calc(0.625rem + 0.41666666666666663vw) !important; 
}

body.scg-active {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  background-color: #d9d9d9 !important;
  color: #000;
  font-family: "Boogy Brut Poster Web White", sans-serif;
  line-height: 1.2;
  overflow: hidden !important; /* KUNCI: Lock Scroll hanya di sini */
}

/* =========================================
   4. FULLSCREEN OVERLAY (MENIMPA TEMA WP)
   ========================================= */
.page-wrapper.home {
  position: fixed !important; /* Mengunci posisi agar tidak ikut scroll tema */
  top: 0;
  left: 0;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 99999; /* Pastikan di atas Header/Menu tema */
  background-color: #000;
  color: #d9d9d9;
  overflow: hidden;
}

/* FIX: Jika Login Admin Bar Muncul (Hanya saat galeri aktif) */
body.scg-active.admin-bar .page-wrapper.home {
  top: 32px !important;
  height: calc(100vh - 32px) !important;
}

@media screen and (max-width: 782px) {
  body.scg-active.admin-bar .page-wrapper.home {
    top: 46px !important;
    height: calc(100vh - 46px) !important;
  }
}

/* =========================================
   5. UTILS & HELPER
   ========================================= */
.custom-embed { display: none; } /* Hide container style */

a { color: inherit; text-decoration: none; background: transparent; }
img { border: 0; vertical-align: middle; }
* { box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Sembunyikan elemen Webflow yang tidak perlu */
.w-condition-invisible, .is-empty, .w-dyn-hide { display: none !important; }
.inline-link { display: inline-block; max-width: 100%; }

/* =========================================
   6. GRID SYSTEM (STRUCTURE)
   ========================================= */
.header { inset: 0 0 auto; position: fixed; z-index: 20; pointer-events: none; }
.main { opacity: 1; width: 100%; height: 100%; }

.gallery-list-wrapper {
  height: 100%;
  width: 100%;
  pointer-events: none; /* Klik tembus ke Canvas WebGL */
  position: relative;
}

.gallery-list {
  /* Grid Layout Utama */
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr; /* 5 Kolom */
  grid-template-rows: auto;
  grid-auto-columns: 1fr;
  grid-column-gap: 0;
  grid-row-gap: 0;
  
  /* Posisi & Dimensi */
  position: fixed;
  top: 0;
  left: 0;
  width: 130%; /* Lebih lebar untuk efek parallax */
  aspect-ratio: 2/2.9;
  
  cursor: grab;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  
  /* URUTAN: Kanan ke Kiri (Sesuai Request) */
  direction: rtl; 
}

.gallery-list.grid {
  grid-auto-rows: 65vh;
  grid-template-rows: 65vh;
}

/* =========================================
   7. ITEM & GAMBAR (FIX TAMPILAN WP)
   ========================================= */
.home-cc-item {
  width: 100%;
  height: 100%;
  position: relative;
  direction: ltr; /* Kembalikan teks jadi Kiri ke Kanan */
  margin: 0 !important;
  padding: 0 !important;
}

.gallery-img-container {
  height: 100%;
  width: 100%;
  position: relative;
  padding: 0.25rem;
}

.gallery-img-box {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
}

/* --- FORCE IMAGE FULL COVER (ANTI-GEPENG) --- */
.gallery-main-img {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  
  /* Paksa Ukuran Penuh */
  width: 100% !important;
  height: 100% !important;
  
  /* Paksa Crop Rapi */
  object-fit: cover !important;
  
  /* Reset Gangguan Tema */
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  display: block !important;
  background: transparent !important;
  box-shadow: none !important;
}

.h-name { display: none; }

/* =========================================
   8. INDICATOR / LOTTIE
   ========================================= */
.home-lottie-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
}

.home-indicator-lottie-wrapper {
  display: grid;
  width: 1.25rem;
  grid-template-columns: 1fr;
  grid-gap: 16px;
  pointer-events: auto;
}
.home-indicator-lottie-wrapper > svg { grid-column: 1; grid-row: 1; align-self: center; }
.home-indicator-lottie-wrapper svg:nth-child(even) { opacity: 0; }
.home-indicator-name { max-width: 20ch; }

/* =========================================
   9. SELECTION STYLE
   ========================================= */
::selection { background: var(--main-light); color: var(--main-dark); text-shadow: none; }
img::selection, svg::selection { background: transparent; color: #d9d9d9; }

/* =========================================
   10. MEDIA QUERIES (RESPONSIVE SCOPED)
   ========================================= */

/* Desktop Besar */
@media screen and (max-width: 1920px) {
  /* Hanya ubah font html jika galeri aktif */
  html.scg-active { 
    font-size: calc(0.625rem + 0.41666666666666674vw) !important; 
  }
}

/* Laptop */
@media screen and (max-width: 1440px) {
  html.scg-active { 
    font-size: calc(0.8126951092611863rem + 0.20811654526534862vw) !important; 
  }
}

/* Tablet */
@media screen and (max-width: 991px) {
  .gallery-list.grid { width: 180%; }
  .home-lottie-wrapper { display: none; }
  .motion-visual video { object-fit: contain; }
}

/* Mobile Landscape */
@media screen and (max-width: 767px) {
  .gallery-list { grid-template-columns: 1fr 1fr 1fr; }
  .gallery-list.grid { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; width: 220%; }
}

/* Mobile Portrait */
@media screen and (max-width: 479px) {
  html.scg-active { 
    font-size: calc(0.7497384937238494rem + 0.41841004184100417vw) !important; 
  }
  .gallery-list.grid { 
    grid-auto-rows: 55vh; 
    grid-template-rows: 55vh; 
    width: 300%; 
  }
}

/* =========================================
   FIX HEADER TERTUTUP (Z-INDEX RESCUE)
   ========================================= */

/* Kita targetkan selector umum header WordPress 
   (site-header, masthead, elementor-header, dll).
   Kita paksa z-index nya lebih tinggi dari galeri (100000).
*/

header, 
#masthead, 
.site-header, 
.main-header,
.elementor-location-header,
[data-elementor-type="header"] {
  position: relative !important; 
  z-index: 100000 !important; /* Lebih tinggi dari 99999 milik galeri */
}

/* OPSIONAL: 
   Jika kamu ingin Header-nya melayang (Overlay) di atas galeri 
   tanpa background putih (Transparan), aktifkan kode di bawah ini:
*/
/*
header, #masthead, .site-header {
  position: fixed !important;
  width: 100% !important;
  top: 0 !important;
  background: transparent !important; 
}
*/