#loadingOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff; /* Latar belakang putih */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Pastikan overlay di atas segalanya */
    transition: opacity 0.7s ease-out; /* Transisi halus saat menghilang */
  }

  /* Gaya untuk Dot-Dot Loader (mirip warna Google) */
  .dot-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .dot-spinner div {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    margin: 0 5px;
    animation: bounce 1.2s infinite ease-in-out both;
  }

  /* Warna-warna Google */
  .dot-spinner div:nth-child(1) {
    background-color: #4285F4; /* Biru Google */
    animation-delay: -0.32s;
  }
  .dot-spinner div:nth-child(2) {
    background-color: #EA4335; /* Merah Google */
    animation-delay: -0.16s;
  }
  .dot-spinner div:nth-child(3) {
    background-color: #FBBC05; /* Kuning Google */
    /* Tidak perlu animation-delay untuk yang ketiga jika ingin berurutan */
  }
  .dot-spinner div:nth-child(4) {
    background-color: #34A853; /* Hijau Google */
    animation-delay: 0.16s; /* Menambahkan dot keempat */
  }


  @keyframes bounce {
    0%, 80%, 100% {
      transform: scale(0);
      opacity: 0;
    }
    40% {
      transform: scale(1);
      opacity: 1;
    }
  }

  /* Kelas untuk menyembunyikan overlay */
  .hidden {
    opacity: 0;
    visibility: hidden;
  }