/* Loader global NabaTOUR: umpan balik seketika setiap kali ada proses berjalan --
   tombol ditekan, form dikirim, atau halaman berpindah.

   Dua lapis, sengaja tidak muncul bersamaan:
   1. Garis tipis di puncak layar -> tampil SEKETIKA, untuk aksi yang cepat.
   2. Kartu berisi cincin berputar -> baru menyusul setelah ~220 ms, supaya aksi yang
      selesai dalam sekejap tidak menimbulkan kedipan yang mengganggu. */

#appProgress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 12001;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
#appProgress::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(246,196,83,0) 0%, #f6c453 18%, #f2802a 42%, #c2560a 62%, #f6c453 82%, rgba(246,196,83,0) 100%);
  background-size: 45% 100%;
  background-repeat: no-repeat;
  box-shadow: 0 0 12px rgba(242,128,42,0.75), 0 0 3px rgba(246,196,83,0.9);
  transform: translateX(-45%);
}
#appProgress.jalan { opacity: 1; }
#appProgress.jalan::before { animation: appProgressLari 1.15s cubic-bezier(0.45,0,0.35,1) infinite; }

#appLoader {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(46, 24, 8, 0.30);
  backdrop-filter: blur(7px) saturate(115%);
  -webkit-backdrop-filter: blur(7px) saturate(115%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s;
}
#appLoader.tampil { opacity: 1; visibility: visible; }

.app-loader-kartu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 30px 38px 26px;
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff 0%, #fffaf5 100%);
  box-shadow: 0 34px 80px rgba(60,25,0,0.38), 0 0 0 1px rgba(246,196,83,0.38);
  transform: translateY(10px) scale(0.96);
  transition: transform 0.3s cubic-bezier(0.2,0.9,0.3,1.25);
}
#appLoader.tampil .app-loader-kartu { transform: none; }

/* Sepasang gear yang saling bertaut: yang besar berputar searah jarum jam, yang kecil
   berlawanan arah dan sedikit lebih cepat -- seperti roda gigi yang benar-benar bergerigi. */
.app-loader-gear {
  position: relative;
  width: 74px;
  height: 62px;
}
.app-loader-gear .gear {
  position: absolute;
  overflow: visible;
  filter: drop-shadow(0 4px 10px rgba(194,86,10,0.35));
}
.app-loader-gear .gear-besar {
  left: 0; top: 0;
  width: 50px; height: 50px;
  animation: appGearPutar 2.6s linear infinite;
}
.app-loader-gear .gear-kecil {
  right: 0; bottom: 0;
  width: 34px; height: 34px;
  animation: appGearPutarBalik 1.75s linear infinite;
}
.app-loader-teks {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: #7a3a05;
}
.app-loader-teks::after {
  content: '';
  animation: appLoaderTitik 1.4s steps(4, end) infinite;
}

@keyframes appProgressLari {
  0%   { transform: translateX(-45%); }
  55%  { transform: translateX(80%); }
  100% { transform: translateX(225%); }
}
@keyframes appGearPutar { to { transform: rotate(360deg); } }
@keyframes appGearPutarBalik { to { transform: rotate(-360deg); } }
@keyframes appLoaderTitik {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
}

/* Hormati setelan "kurangi animasi": tetap ada tanda, tanpa gerakan berputar. */
@media (prefers-reduced-motion: reduce) {
  #appProgress.jalan::before { animation: none; }
  .app-loader-gear .gear { animation-duration: 6s; }
}