/* =====================================================================
   GLOBAL RESET & BASE
   ===================================================================== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  overflow-anchor: none;
}
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 8px; }
html::-webkit-scrollbar-track, body::-webkit-scrollbar-track { background: var(--scrollbar-track); border-radius: 4px; }
html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; }
html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }
::-webkit-scrollbar-button { background-color: var(--scrollbar-thumb); }

html { background: var(--bg) !important; }
body { background: var(--bg) !important; transition: background 0.4s ease; font-family: var(--font-body); }
section { background: transparent !important; }

/* ---------- Loading gate: sembunyikan seluruh page sampai loading selesai ---------- */
html:not(.aldi-loading-complete) { overflow: hidden !important; scrollbar-width: none !important; }
html:not(.aldi-loading-complete)::-webkit-scrollbar { display: none !important; }
html:not(.aldi-loading-complete) body { overflow: hidden !important; scrollbar-width: none !important; }
html:not(.aldi-loading-complete) body::-webkit-scrollbar { display: none !important; }
html:not(.aldi-loading-complete) body > *:not(.aldi-loading-screen) { visibility: hidden !important; }
html:not(.aldi-loading-complete) #wrapper,
html:not(.aldi-loading-complete) .aldi-navbar-wrapper,
html:not(.aldi-loading-complete) .aldi-navbar-spacer,
html:not(.aldi-loading-complete) #aldiNavbarBurger,
html:not(.aldi-loading-complete) .container,
html:not(.aldi-loading-complete) .gallery,
html:not(.aldi-loading-complete) .spotlight,
html:not(.aldi-loading-complete) .banner { visibility: hidden !important; opacity: 0 !important; }

html.aldi-loading-complete body > *:not(.aldi-loading-screen),
html.aldi-loading-complete #wrapper,
html.aldi-loading-complete .aldi-navbar-wrapper,
html.aldi-loading-complete .aldi-navbar-spacer,
html.aldi-loading-complete #aldiNavbarBurger,
html.aldi-loading-complete .container,
html.aldi-loading-complete .gallery,
html.aldi-loading-complete .spotlight,
html.aldi-loading-complete .banner { visibility: visible !important; animation: pageIn 1s ease-out forwards; }

@keyframes pageIn { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes charIn { 0% { opacity: 0; transform: translateX(14px); filter: blur(20px); } 100% { opacity: 1; transform: translateX(0); filter: blur(0); } }

/* =====================================================================
   SECTION SEPARATOR — garis tipis + jarak ekstra antar section
   (About tidak diberi garis karena dia section pertama/hero)
   ===================================================================== */
#behindthelens,
.aldi-services-wrapper[data-embed="aldi-services"],
.prtcln-hdr-wrapper,
#galleryproject,
.aldi-cb-hdr-wrapper,
.aldi-testimoni-wrapper[data-embed="aldi-testimoni"],
#contact,
.aldi-footer-wrapper {
  border-top: 1px solid var(--section-divider);
  margin-top: 32px;
  padding-top: 48px;
}
@media (max-width: 1024px) {
  #behindthelens,
  .aldi-services-wrapper[data-embed="aldi-services"],
  .prtcln-hdr-wrapper,
  #galleryproject,
  .aldi-cb-hdr-wrapper,
  .aldi-testimoni-wrapper[data-embed="aldi-testimoni"],
  #contact,
  .aldi-footer-wrapper {
    margin-top: 24px;
    padding-top: 36px;
  }
}
@media (max-width: 480px) {
  #behindthelens,
  .aldi-services-wrapper[data-embed="aldi-services"],
  .prtcln-hdr-wrapper,
  #galleryproject,
  .aldi-cb-hdr-wrapper,
  .aldi-testimoni-wrapper[data-embed="aldi-testimoni"],
  #contact,
  .aldi-footer-wrapper {
    margin-top: 16px;
    padding-top: 28px;
  }
}