/* =====================================
   DISABLE SHIMMER & FADE-UP DI ELEMENTOR EDITOR
   Agar konten tetap terlihat saat edit
===================================== */
.elementor-editor-active .shimmer,
.elementor-editor-active .fade-up {
    opacity: 1 !important;
    transform: none !important;
    overflow: visible !important;
    animation: none !important;
    transition: none !important;
}

.elementor-editor-active .shimmer::before,
.elementor-editor-active .shimmer::after {
    display: none !important;
    content: none !important;
}

.elementor-editor-active .shimmer > * {
    visibility: visible !important;
}

/* =====================================
   SHIMMER LOADING - YouTube Style (FIXED v3 - Simplified)
   
   CARA PAKAI:
   - Shimmer saja: class="shimmer"
   - Shimmer + border: class="shimmer shimmer-rounded-20"
   - Fade-up saja: class="fade-up"
   - Shimmer + Fade-up: class="shimmer shimmer-rounded-20 fade-up"
===================================== */

/* =====================================
   Base Shimmer - YouTube Style (HANYA DI FRONTEND)
===================================== */
body:not(.elementor-editor-active) .shimmer {
  position: relative !important;
  overflow: hidden !important;
  min-height: 200px !important;
}

/* Background Abu-abu Terang + Wave dalam SATU pseudo-element */
body:not(.elementor-editor-active) .shimmer:not(.loaded)::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: #F0F0F0 !important;
  background-image: linear-gradient(
    90deg,
    rgba(240, 240, 240, 0) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(240, 240, 240, 0) 100%
  ) !important;
  background-size: 50% 100% !important;
  background-position: -50% 0 !important;
  background-repeat: no-repeat !important;
  animation: shimmer-wave-youtube 1.8s ease-in-out infinite !important;
  z-index: 9999 !important;
  pointer-events: none !important;
  will-change: background-position !important;
}

/* Keyframe sederhana */
@keyframes shimmer-wave-youtube {
  0% {
    background-position: -50% 0;
  }
  100% {
    background-position: 150% 0;
  }
}

/* =====================================
   Shimmer Selesai - Remove overlay
===================================== */
body:not(.elementor-editor-active) .shimmer.loaded {
  overflow: visible !important;
}

body:not(.elementor-editor-active) .shimmer.loaded::before {
  content: none !important;
  display: none !important;
}

/* Smooth fade-in setelah load */
body:not(.elementor-editor-active) .shimmer.loaded:not(.fade-up) {
  animation: shimmerFadeIn 0.3s ease-out forwards !important;
}

@keyframes shimmerFadeIn {
  from {
    opacity: 0.7;
  }
  to {
    opacity: 1;
  }
}

/* Hide children saat shimmer */
body:not(.elementor-editor-active) .shimmer:not(.loaded) > * {
  visibility: hidden !important;
}

body:not(.elementor-editor-active) .shimmer.loaded > * {
  visibility: visible !important;
}

/* =====================================
   SHIMMER MODIFIERS - Border Radius
===================================== */
body:not(.elementor-editor-active) .shimmer.shimmer-rounded-10:not(.loaded)::before {
  border-radius: 10px !important;
}

body:not(.elementor-editor-active) .shimmer.shimmer-rounded-15:not(.loaded)::before {
  border-radius: 15px !important;
}

body:not(.elementor-editor-active) .shimmer.shimmer-rounded-20:not(.loaded)::before {
  border-radius: 20px !important;
}

body:not(.elementor-editor-active) .shimmer.shimmer-rounded-30:not(.loaded)::before {
  border-radius: 30px !important;
}

body:not(.elementor-editor-active) .shimmer.shimmer-rounded-50:not(.loaded)::before {
  border-radius: 50px !important;
}

body:not(.elementor-editor-active) .shimmer.shimmer-pill:not(.loaded)::before {
  border-radius: 9999px !important;
}

/* =====================================
   FADE-UP ANIMATION (HANYA DI FRONTEND)
===================================== */
body:not(.elementor-editor-active) .fade-up {
  opacity: 0 !important;
  transform: translateY(40px) !important;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), 
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body:not(.elementor-editor-active) .fade-up.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Kombinasi shimmer + fade-up */
body:not(.elementor-editor-active) .shimmer.fade-up:not(.loaded) {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: none !important;
}

body:not(.elementor-editor-active) .shimmer.loaded.fade-up:not(.visible) {
  opacity: 0 !important;
  transform: translateY(40px) !important;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.1s, 
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important;
}

body:not(.elementor-editor-active) .shimmer.loaded.fade-up.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ====================================
   Infinite Scroll (tidak berubah)
===================================== */
.scroll-up-box {
  position: relative !important;
  overflow: hidden !important;
  min-height: 552px !important;
  background-repeat: repeat-y !important;
  background-size: 100% auto !important;
  background-attachment: scroll !important;
  animation: bgScroll 120s linear infinite !important;
}

@keyframes bgScroll {
  0% { background-position: center 0; }
  100% { background-position: center -5000px; }
}