/* =========================================================
   SCROLLBAR GLOBAL EDUQASI
   Chrome, Edge, Safari : ::-webkit-scrollbar (bulat + gradasi emas)
   Firefox              : scrollbar-color (tipis, emas)
   ========================================================= */

/* ---------- Chrome / Edge / Safari ---------- */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #f4c542, #e0a800);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ffd75a, #f4c542);
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:active {
  background: #e0a800;
  background-clip: padding-box;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* Scrollbar halaman utama: sedikit lebih lebar, trek gelap penuh */
html::-webkit-scrollbar {
  width: 12px;
}

html::-webkit-scrollbar-track {
  background: rgba(0, 12, 22, 0.65);
  border-radius: 0;
}

html::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  background-clip: padding-box;
}

/* ---------- Firefox ---------- */
/* Sengaja dibungkus @supports: di Chrome 121+, properti standar ini
   akan MEMATIKAN gaya ::-webkit-scrollbar di atas. */
@supports (-moz-appearance: none) {
  * {
    scrollbar-width: thin;
    scrollbar-color: #f4c542 rgba(255, 255, 255, 0.06);
  }
}

/* ---------- Perilaku gulir ---------- */
/* Menggulir isi modal tidak ikut menggulir halaman di belakangnya */
.overflow-y-auto {
  overscroll-behavior-y: contain;
}

.overflow-x-auto {
  overscroll-behavior-x: contain;
}

/* ---------- Varian untuk panel berlatar terang ---------- */
/* Pakai: <div class="... scroll-light"> */
.scroll-light::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.06);
}

@supports (-moz-appearance: none) {
  .scroll-light {
    scrollbar-color: #e0a800 rgba(0, 0, 0, 0.08);
  }
}

/* Hormati pengguna yang mengurangi animasi */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
}