:root {
  --pink-100: #FFE6F0;
  --pink-200: #FFC6D9;
  --pink-300: #FFB3C9;
  --pink-400: #f472b6;
  --pink-500: #ec4899;
  --pink-600: #db2777;
  --pink-700: #be185d;

  /* Set warna preloader */
  --preloader-bg: var(--pink-100);   /* background overlay */
  --preloader-fg: var(--pink-500);   /* warna spinner & logo */
  --preloader-text: var(--pink-700); /* warna teks kecil */
}

body.preloading { overflow: hidden }

.preloader {
  position: fixed; inset: 0; z-index: 20000;
  display: flex; align-items: center; justify-content: center;
  background: var(--preloader-bg);
  transition: opacity .35s ease, visibility .35s ease;
}
.preloader.hide { opacity: 0; visibility: hidden }

.preloader__box {
  display: flex; flex-direction: column; align-items: center; gap: .75rem;
  text-align: center; padding: 1rem 1.25rem;
}
.preloader__logo {
  font-weight: 700; letter-spacing: .5px; color: var(--preloader-fg);
}
.preloader__spinner {
  width: 42px; height: 42px; border-radius: 50%;
  border: 3px solid var(--pink-200);
  border-top-color: var(--preloader-fg);
  animation: spin .8s linear infinite;
}
.preloader__text {
  font-size: .9rem; color: var(--preloader-text);
}

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

@media (prefers-reduced-motion: reduce) {
  .preloader, .preloader * {
    animation: none !important;
    transition: none !important;
  }
}