/* =========================================================
   1. UTILITIES / HELPER
   Kumpulan style kecil yang dipakai berulang di banyak bagian
========================================================= */

/* Menyembunyikan elemen Alpine.js sebelum siap dirender */
[x-cloak] {
  display: none !important;
}

/* Membuat perpindahan scroll antar section menjadi halus */
html {
  scroll-behavior: smooth;
}

/* Font utama */
body {
  font-family: 'Poppins', sans-serif;
}

/* Warna tambahan */
.bg-cream {
  background-color: #FFF2E1;
}

.bg-floralWhite {
  background-color: #FFFAF0;
}

.bg-yellow-500 {
  background-color: #F48C06;
}

.text-yellow-500 {
  color: #F48C06;
}

.text-darken {
  color: #153345;
}

/* Animasi melayang default */
.floating {
  animation: floating 3s ease-in-out infinite;
}

/* Variasi animasi melayang dengan durasi lebih lambat */
.floating-4 {
  animation: floating 4s ease-in-out infinite;
}

/* Keyframes animasi naik-turun lembut */
@keyframes floating {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(8px);
  }

  100% {
    transform: translateY(0px);
  }
}

/* Badge gradasi lama */
.gradient-badge {
  background: linear-gradient(180deg, #FF692E 0%, #FFF5F2 0.01%, #FFD8C8 100%);
}

/* Scrollbar hidden */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Pause animasi */
.pause-animate {
  animation-play-state: paused;
}

/* =========================================================
   2. TESTIMONIAL MARQUEE / SLIDER OTOMATIS
   Mengatur testimonial yang berjalan horizontal tanpa henti
========================================================= */

.testimonial-row {
  overflow: hidden;
  position: relative;
}

.testimonial-track {
  display: flex;
  width: max-content;
  gap: 24px;
}

.testimonial-row:hover .testimonial-track-left,
.testimonial-row:hover .testimonial-track-right {
  animation-play-state: paused;
}

.testimonial-track-left {
  animation: testimonialSlideLeft 42s linear infinite;
}

.testimonial-track-right {
  animation: testimonialSlideRight 42s linear infinite;
}

@keyframes testimonialSlideLeft {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-50% - 12px));
  }
}

@keyframes testimonialSlideRight {
  from {
    transform: translateX(calc(-50% - 12px));
  }

  to {
    transform: translateX(0);
  }
}

/* =========================================================
   3. PALET ABOUT PAGE
   Warna dan gradasi global khusus halaman About
========================================================= */

:root {
  --sky: #DFF3FC;
  --sky-2: #E9F6FE;
  --earth: #D9F5E8;
  --forest-green: #A9E6C8;

  /* kontrol recolor hutan biru -> hijau */
  --forest-hue: 310deg;
  --forest-sat: 1.25;
  --forest-bright: 0.92;
}

/* Background halaman About: langit -> putih -> hijau */
.sky-ground {
  background: linear-gradient(
    180deg,
    var(--sky) 0%,
    var(--sky) 12%,
    var(--sky-2) 40%,
    #FFFFFF 48%,
    #D9F5E8 56%,
    #C6EFDD 64%,
    var(--forest-green) 78%,
    var(--forest-green) 100%
  );
}

/* =========================================================
   4. HERO ABOUT PAGE
   Hero dengan background dekorasi yang dimask supaya menyatu
========================================================= */

.hero-assahra {
  position: relative;
  min-height: clamp(480px, 60vw, 780px);
  background: transparent;
  overflow: hidden;
  padding-bottom: clamp(28px, 7vw, 96px);
}

/* Background hero dari gambar mobile/desktop */
.hero-assahra::before {
  content: "";
  position: absolute;
  inset: -2px;
  background-image: var(--hero-mobile);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
  pointer-events: none;
  z-index: 0;
  opacity: 0.98;
  mix-blend-mode: multiply;

  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 76%,
    rgba(0, 0, 0, .90) 82%,
    rgba(0, 0, 0, .60) 88%,
    rgba(0, 0, 0, .15) 96%,
    rgba(0, 0, 0, 0) 100%
  );

  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 76%,
    rgba(0, 0, 0, .90) 82%,
    rgba(0, 0, 0, .60) 88%,
    rgba(0, 0, 0, .15) 96%,
    rgba(0, 0, 0, 0) 100%
  );
}

/* Feather tambahan bawah hero */
.hero-assahra::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(70px, 20vw, 140px);
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(223, 243, 252, 0) 0%,
    rgba(223, 243, 252, .50) 70%,
    var(--sky) 100%
  );
}

/* Konten hero tetap di atas background */
.hero-inner {
  position: relative;
  z-index: 2;
}

/* Sedikit overlap section pertama setelah hero */
.sky-ground > section.bg-transparent:first-of-type {
  margin-top: clamp(-10px, -1.8vw, -18px);
}

/* =========================================================
   5. HERO DECORATIONS ABOUT
   Pesawat, balon, dan layangan di halaman About
========================================================= */

.plane-decor {
  position: absolute;
  z-index: 1;
  top: min(10%, 80px);
  left: clamp(12px, 6vw, 120px);
  width: clamp(56px, 8vw, 140px);
  height: auto;
  transform: rotate(-14deg);
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .18));
  pointer-events: none;
}

.balloon-decor {
  display: block;
  position: absolute;
  z-index: 1;
  bottom: min(12%, 90px);
  right: clamp(12px, 6vw, 120px);
  width: clamp(48px, 7vw, 120px);
  height: auto;
  transform: rotate(8deg);
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .18));
  animation: floatBalloon 8s ease-in-out infinite;
  pointer-events: none;
}

.kite-decor {
  position: absolute;
  z-index: 15;
  left: 50%;
  transform: translateX(-50%) rotate(-6deg);
  bottom: clamp(120px, 10vw, 220px);
  width: clamp(120px, 14vw, 260px);
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .18));
  display: none;

  -webkit-mask-image: linear-gradient(to bottom, #000 0 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0 70%, transparent 100%);
}

@media (min-width: 1024px) {
  .kite-decor {
    display: block;
  }
}

@keyframes floatBalloon {
  0%, 100% {
    transform: translateY(0) rotate(8deg);
  }

  50% {
    transform: translateY(-20px) rotate(6deg);
  }
}

/* =========================================================
   6. DESKTOP HERO ABOUT
========================================================= */

@media (min-width: 1024px) {
  .hero-assahra::before {
    background-image: var(--hero-desktop);
    background-position: center top;
    background-size: cover;

    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 82%,
      rgba(0, 0, 0, .85) 88%,
      rgba(0, 0, 0, .40) 94%,
      rgba(0, 0, 0, 0) 100%
    );

    mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 86%,
      rgba(0, 0, 0, .85) 88%,
      rgba(0, 0, 0, .40) 94%,
      rgba(0, 0, 0, 0) 100%
    );
  }
}

/* =========================================================
   7. MOBILE ABOUT TUNING
========================================================= */

@media (max-width: 640px) {
  .hero-inner {
    padding-top: clamp(10px, 3.5vh, 22px) !important;
    padding-bottom: clamp(18px, 4.5vh, 28px) !important;
  }

  .hero-inner h1 {
    font-size: 26px;
    line-height: 1.2;
    letter-spacing: -0.01em;
  }

  .hero-inner p {
    font-size: 15px;
    line-height: 1.7;
    max-width: 32ch;
  }

  .plane-decor {
    display: none;
  }

  .balloon-decor {
    display: none;
  }

  .hero-assahra::before {
    background-size: cover;
    background-position: center calc(-12vw);

    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 72%,
      rgba(0, 0, 0, .85) 82%,
      rgba(0, 0, 0, .45) 92%,
      rgba(0, 0, 0, 0) 100%
    );

    mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 72%,
      rgba(0, 0, 0, .85) 82%,
      rgba(0, 0, 0, .45) 92%,
      rgba(0, 0, 0, 0) 100%
    );
  }

  .hero-assahra::after {
    height: clamp(40px, 12vw, 88px);
  }

  .sky-ground > section {
    padding-top: 2px;
    padding-bottom: 0px;
  }

  .sky-ground .rounded-2xl.p-6 {
    padding: 16px !important;
  }

  .sky-ground span[aria-hidden],
  .sky-ground .card-cloud-decor {
    display: none !important;
  }

  .forest-band-img {
    margin-top: -36px;
    height: clamp(160px, 26vh, 220px);
  }

  .forest-band-img::before {
    background-size: auto clamp(140px, 20vh, 200px);

    -webkit-mask-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, .35) 10%,
      #000 25%,
      #000 80%,
      rgba(0, 0, 0, .35) 94%,
      rgba(0, 0, 0, 0) 100%
    );

    mask-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, .35) 10%,
      #000 25%,
      #000 80%,
      rgba(0, 0, 0, .35) 94%,
      rgba(0, 0, 0, 0) 100%
    );
  }

  .stats-grid--mobile {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .stats-grid--mobile > div {
    padding: 14px !important;
  }
}

/* =========================================================
   8. FOREST BAND ABOUT
   Area dekorasi hutan/rumput yang berulang secara horizontal
========================================================= */

.forest-band-img {
  position: relative;
  height: clamp(220px, 24vw, 360px);
  background: transparent;
  margin-top: -85px;
}

.forest-band-img::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--forest);
  background-repeat: repeat-x;
  background-position: center bottom;
  background-size: auto clamp(180px, 22vw, 300px);
  bottom: -1px;
  opacity: .97;
  filter: hue-rotate(310deg) saturate(1.25) brightness(.92);

  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, .15) 6%,
    rgba(0, 0, 0, .50) 12%,
    #000 22%,
    #000 86%,
    rgba(0, 0, 0, .50) 94%,
    rgba(0, 0, 0, .15) 98%,
    rgba(0, 0, 0, 0) 100%
  );

  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, .15) 6%,
    rgba(0, 0, 0, .50) 12%,
    #000 22%,
    #000 86%,
    rgba(0, 0, 0, .50) 94%,
    rgba(0, 0, 0, .15) 98%,
    rgba(0, 0, 0, 0) 100%
  );
}

/* =========================================================
   9. ACCORDION OPTIONAL
   Jika ada accordion lama yang masih memakai hide/show manual
========================================================= */

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: all 300ms ease-in-out;
}

/* =========================================================
   10. privacy-policy
========================================================= */ 
    .doc h2 {
      margin-top: 2rem;
      margin-bottom: .75rem;
      font-weight: 700;
      font-size: 15px;
      letter-spacing: .02em;
      text-transform: uppercase;
      color: #09161E;
    }

    .doc h2:first-of-type {
      margin-top: 1rem;
    }

    .doc h3 {
      margin-top: 1.25rem;
      margin-bottom: .5rem;
      font-weight: 700;
      font-size: 14px;
      color: #09161E;
    }

    .doc p {
      margin: .55rem 0;
    }

    .doc hr {
      margin: 1.5rem 0;
      border-color: rgba(148, 163, 184, .6);
    }

    .doc ol {
      margin: .5rem 0 1rem 1.25rem;
      padding: 0;
      list-style: decimal;
    }

    .doc ol > li {
      margin: .45rem 0;
      padding-left: .25rem;
    }

    .doc ul {
      margin: .5rem 0 1rem 1.25rem;
      padding: 0;
      list-style: disc;
    }

    .doc ul > li {
      margin: .35rem 0;
    }

    .doc strong {
      color: #09161E;
    }

    .doc em {
      font-style: italic;
    }

/* =========================================================
   11. snk
========================================================= */ 
    .snk h2 {
      margin-top: 2rem;
      margin-bottom: .75rem;
      font-weight: 700;
      font-size: 15px;
      letter-spacing: .02em;
      text-transform: uppercase;
      color: #09161E;
    }

    .snk h2:first-of-type {
      margin-top: 1rem;
    }

    .snk p {
      margin: .55rem 0;
    }

    .snk hr {
      margin: 1.5rem 0;
      border-color: rgba(148, 163, 184, .6);
    }

    .snk ol {
      margin: .5rem 0 1rem 1.25rem;
      padding: 0;
      list-style: decimal;
    }

    .snk ol > li {
      margin: .45rem 0;
      padding-left: .25rem;
    }

    .snk ul {
      margin: .5rem 0 1rem 1.25rem;
      padding: 0;
      list-style: disc;
    }

    .snk ul > li {
      margin: .35rem 0;
    }

    .snk strong {
      color: #09161E;
    }