/* css/preloader.css */

#preloader {
   position: fixed;
   inset: 0;
   background-color: var(--color-white); /* Menggunakan variabel White */
   z-index: 9999;
   display: flex;
   justify-content: center;
   align-items: center;
}

body.no-scroll {
   overflow: hidden;
   height: 100vh;
   /* biar pasti tidak bisa geser */
}

#preloader.fade-out {
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.7s ease;
}

.preloader-content {
   display: flex;
   flex-direction: column;
   align-items: center;
}

.preloader-logo {
   width: 200px;
   /* Sesuaikan ukuran logo */
   margin-bottom: 20px;
}

.loader {
   /* Menggunakan base Light Grey (#878787) transparan untuk jalur putaran */
   border: 8px solid rgba(135, 135, 135, 0.2);
   /* Menggunakan variabel Maroon presisi untuk indikator utamanya */
   border-top: 8px solid var(--color-maroon);
   border-radius: 50%;
   width: 60px;
   height: 60px;
   animation: spin 1s linear infinite;
}

@keyframes spin {
   to {
      transform: rotate(360deg);
   }
}