/**
 
/*  VARIABEL CSS - Custom properties  */
:root {
  --mobile-width: 400px;
}
@media (min-width: 1025px) {
  :root { --mobile-width: clamp(400px, 25vw, 400px); }
}
@media (max-width: 400px) {
  :root { --mobile-width: 100vw; }
}

@media (max-width: 767px) {
  :root {
    --mobile-width: 100vw;
  }
}

/* 
   KONTAINER UTAMA - Layout utama  */
.adk-kontainer-mobile {
  position: fixed;
  right: 0;
  top: 0;
  width: var(--mobile-width);
  max-width: var(--mobile-width);
  height: 100dvh;
  margin: 0;
  overflow: hidden;
  z-index: 1000; /* pastikan panel kanan di atas konten lain */
}

.scroll-container,
.kontainer-scroll-adk {
  height: 100dvh;
  overflow-y: auto;
  position: fixed;
  right: 0;
  top: 0;
  scroll-behavior: smooth;
  width: var(--mobile-width);
  max-width: var(--mobile-width);
  margin: 0;
  z-index: 500; /* default di bawah .skema agar klik tombol tetap masuk */
  scroll-snap-type: y mandatory;
  /* Sembunyikan scrollbar (Firefox, Edge lama, WebKit) */
  -ms-overflow-style: none; /* IE/Edge legacy */
  scrollbar-width: none; /* Firefox */
}

.scroll-container::-webkit-scrollbar,
.kontainer-scroll-adk::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

/* Naikkan ke atas hanya saat di kontainer terakhir */
.scroll-container.is-final,
.kontainer-scroll-adk.is-final {
  z-index: 2000; 
}

.scroll-content,
.konten-scroll-adk {
  height: auto;
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
}

/*  SCROLL SECTIONS - Section per skema animasi */
.scroll-section {
  height: 100dvh;
  scroll-snap-align: start;
  position: relative;
}

.scroll-section:last-child {
  height: auto;
}

/*  SKEMA ANIMASI - Stage untuk elemen teranimasi  */
.skema {
  position: fixed;
  top: 0;
  right: 0;
  left: auto;
  transform: none;
  width: var(--mobile-width);
  max-width: var(--mobile-width);
  height: 100%;
  overflow: hidden;
  z-index: 1002; /* paling atas agar tombol bisa diklik */
  pointer-events: none;
}

/* Elemen yang dianimasikan */
.adk-animasi {
  position: absolute;
  will-change: transform, opacity, filter;
}

.adk-animasi#adk-background {
  z-index: 0;
}

.adk-animasi#adk-mempelai {
  z-index: 3;
}

/* Elemen yang bisa diklik */
.adk-click {
  pointer-events: auto;
  z-index: 100;
}

.skema .adk-click {
  pointer-events: auto;
}

/* Sembunyikan panel konten sampai skema yang menampilkannya */
#adk-perempuan,
#adk-laki-laki,
#adk-acara,
#adk-gift,
#adk-penutup {
  opacity: 0;
}

/*  FIX: Hapus scroll internal di bagian penutup */
#adk-penutup,
#adk-penutup .adk-scrollkontainer {
  overflow: hidden !important;
  height: 100vh !important;
  -webkit-overflow-scrolling: auto !important;
}

/* sembunyikan scrollbar (di Chrome/Safari) */
#adk-penutup::-webkit-scrollbar,
#adk-penutup .adk-scrollkontainer::-webkit-scrollbar {
  display: none !important;
}

/* KONTAINER TERAKHIR - Section konten terakhir */
.kontainer-terakhir-adk {
  width: 100%;
  max-width: var(--mobile-width);
  height: auto;
  overflow-y: visible;
  overflow-x: hidden;
  position: relative;
  z-index: 1;
}

/*  SCROLL KONTAINER BERTINGKAT - Scroll internal di penutup */
.adk-scrollkontainer {
  position: relative;
  width: 100%;
  max-width: var(--mobile-width);
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  box-sizing: border-box;
}

.adk-scrollkontainer.is-top::before {
  content: '';
  position: sticky;
  top: 0;
  height: 24px;
  display: block;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
  pointer-events: none;
}

.adk-scrollkontainer.is-bottom::after {
  content: '';
  position: sticky;
  bottom: 0;
  height: 24px;
  display: block;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
  pointer-events: none;
}

/*  INTERSECTION OBSERVER - Reanimate effects */

.reanimate:not(.fade):not(.left):not(.right):not(.rotate):not(.up) {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reanimate.in-view:not(.fade):not(.left):not(.right):not(.rotate):not(.up) {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
/* Fade Effect */
body.elementor-editor-active .fade {
  opacity: 1;
  transform: scale(1);
}

.fade {
  transform: scale(0.8);
  opacity: 0;
  transition: opacity 1.5s, transform 2s;
}

.fade.reanimate.in-view {
  transform: scale(1);
  opacity: 1;
  transition: opacity 1.5s, transform 2s;
}

/* Rotate Effect */
body.elementor-editor-active .rotate {
  opacity: 1;
  transform: scale(1);
}

.rotate {
  transform: scale(0.5) rotate(-20deg);
  opacity: 0;
  transition: opacity 0.5s, transform 1.5s;
}

.rotate.reanimate.in-view {
  transform: scale(1) rotate(0deg);
  opacity: 1;
  transition: opacity 0.5s, transform 1.5s;
}

/* Left Effect */
body.elementor-editor-active .left {
  opacity: 1;
  transform: translateX(0px);
}

.left {
  transform: translateX(-100px);
  opacity: 0;
  transition: opacity 1s, transform 2s;
}

.left.reanimate.in-view {
  transform: translateX(0px);
  opacity: 1;
  transition: opacity 1s, transform 2s;
}

/* Right Effect */
body.elementor-editor-active .right {
  opacity: 1;
  transform: translateX(0px);
}

.right {
  transform: translateX(100px);
  opacity: 0;
  transition: opacity 1s, transform 2s;
}

.right.reanimate.in-view {
  transform: translateX(0px);
  opacity: 1;
  transition: opacity 1s, transform 2s;
}

/* Up Effect */
body.elementor-editor-active .up {
  opacity: 1;
  transform: translateY(0px);
}

.up {
  transform: translateY(32px);
  opacity: 0;
  will-change: transform, opacity;
  transition:
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 1000ms ease-out;
}

.up.reanimate.in-view {
  transform: translateY(0);
  opacity: 1;
  transition:
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 1000ms ease-out;
}

/* Alias nama efek agar mudah dipakai */
.enter-up { @apply up; }
.enter-up.reanimate.in-view { @apply up.reanimate.in-view; }

/*  Global scrollbar: sembunyikan scrollbar bawaan halaman  */
html, body {
  overflow: hidden;
  height: 100%;
}

/*   Desktop layout: panel kiri menyesuaikan sisa lebar dari panel kanan */
.adk-kontainer-desktop {
  position: fixed;
  left: 0;
  top: 0;
  width: calc(100vw - var(--mobile-width));
  height: 100vh;
  margin: 0;
  overflow: hidden;
  z-index: 0;
}

/* ============================================================================
   Tablet: pusatkan panel kanan dan sembunyikan panel kiri */
@media (min-width: 768px) and (max-width: 1024px) {
  .adk-kontainer-mobile,
  .kontainer-scroll-adk,
  .skema {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  .adk-kontainer-desktop {
    display: none;
  }
}