.fascustom {
    color : #B5368D;
}
.dark {
    background-color: rgba(77, 72, 77, 0.5) !important;
}
/*new style*/
/* Container Spinner di dalam Overlay AdminLTE */
.overlay .spinner {
  position: relative;
  width: 50px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important; /* Pastikan tidak ada background putih */
}

/* Base style untuk ketiga bola */
.overlay .spinner > div {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  /* Gunakan normal atau lighten agar tidak bocor jadi putih di background gelap */
  mix-blend-mode: lighten; 
  animation: tiktok-loader 1.2s infinite ease-in-out;
}

/* Warna dan delay animasi masing-masing bola */
.overlay .spinner .bounce1 {
  background-color: #25F4EE; /* Cyan khas TikTok */
  animation-delay: 0s;
}

.overlay .spinner .bounce2 {
  background-color: #FE2C55; /* Red/Magenta khas TikTok */
  animation-delay: -0.6s;
}

.overlay .spinner .bounce3 {
  display: none;
}

/* Keyframes Gerakan Orbit */
@keyframes tiktok-loader {
  0%, 100% {
    transform: translateX(-12px) scale(1);
    z-index: 1;
  }
  50% {
    transform: translateX(12px) scale(0.85);
    z-index: 10;
  }
}



/*tik tok 3 dot*/
/* Container Wrapper */
.tiktok-loader-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
  background-color: #121212;
  border-radius: 12px;
}

/* Container Loader Utama */
.tiktok-loader {
  position: relative;
  width: 80px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  isolation: isolate; /* Menjaga stacking context z-index aman di atas background */
}

.tiktok-loader .dot {
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  mix-blend-mode: screen; /* Blending warna saat bertumpuk */
  animation-duration: 0.9s; /* Durasi dikencangkan sedikit agar mengalir mulus */
  animation-iteration-count: infinite;
  /* KUNCI UTAMA: 'linear' membuat pergerakan konstan kontinu tanpa deceleration/jeda */
  animation-timing-function: linear;
}

/* Warna Cyan / Teal Khas TikTok */
.dot-cyan {
  background-color: #25f4ee;
  box-shadow: 0 0 10px rgba(37, 244, 238, 0.8);
  animation-name: tiktok-orbit-continuous-cyan;
}

/* Warna Pink / Magenta Khas TikTok */
.dot-magenta {
  background-color: #fe2c55;
  box-shadow: 0 0 10px rgba(254, 44, 85, 0.8);
  animation-name: tiktok-orbit-continuous-magenta;
}

/* --- KEYFRAMES ORBIT KONTINU (TANPA JEDA) --- */

/* Bola Cyan: Berputar melingkar di depan lalu ke belakang */
@keyframes tiktok-orbit-continuous-cyan {
  0%, 100% {
    transform: translateX(-24px) scale(1);
    z-index: 2;
  }
  25% {
    /* Melintas di DEPAN (Membesar) */
    transform: translateX(0px) scale(1.35);
    z-index: 3;
  }
  50% {
    transform: translateX(24px) scale(1);
    z-index: 2;
  }
  75% {
    /* Melintas di BELAKANG (Mengecil) */
    transform: translateX(0px) scale(0.65);
    z-index: 1;
  }
}

/* Bola Magenta: Berputar melingkar di belakang lalu ke depan */
@keyframes tiktok-orbit-continuous-magenta {
  0%, 100% {
    transform: translateX(24px) scale(1);
    z-index: 2;
  }
  25% {
    /* Melintas di BELAKANG (Mengecil) */
    transform: translateX(0px) scale(0.65);
    z-index: 1;
  }
  50% {
    transform: translateX(-24px) scale(1);
    z-index: 2;
  }
  75% {
    /* Melintas di DEPAN (Membesar) */
    transform: translateX(0px) scale(1.35);
    z-index: 3;
  }
}


/*tiktok 3 dot loader*/
.tiktok-3dots-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
  background-color: #121212;
  border-radius: 12px;
}

.tiktok-3dots {
  position: relative;
  width: 72px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tiktok-3dots .dot {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  mix-blend-mode: screen; /* Blending warna khas TikTok */
}

/* Durasi Total 4.8 detik untuk seluruh siklus (Fase Shift + 3x Tempo Wave) */
.dot-blue {
  background-color: #00f2fe;
  /*box-shadow: 0 0 10px rgba(0, 242, 254, 0.8);*/
  animation: tempo-blue 4.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.dot-white {
  background-color: #ffffff;
  /*box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);*/
  animation: tempo-white 4.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.dot-red {
  background-color: #ff0050;
  /*box-shadow: 0 0 10px rgba(255, 0, 80, 0.8);*/
  animation: tempo-red 4.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

/* --- ANIMASI COMBINATION DENGAN PERBEDAN TEMPO PANTULAN --- */

/* TITIK DI SEBELAH KIRI (Berada di X: -24px saat melambai) */
@keyframes tempo-blue {
  /* FASE 1: Shift & Cross TikTok (0% - 38%) */
  0%, 100% { transform: translate(24px, 0px) scale(1); }
  6%       { transform: translate(0px, 0px) scale(1.15); }
  12%      { transform: translate(0px, 0px) scale(1); }
  18%      { transform: translate(0px, 0px) scale(1.15); }
  24%      { transform: translate(-24px, 0px) scale(1); }
  30%      { transform: translate(0px, 0px) scale(1.15); }
  36%      { transform: translate(-24px, 0px) scale(1); } /* Berjajar Rapi */

  /* FASE 2: MELAMBAI DENGAN 3 TEMPO BERBEDA */
  
  /* 1. Pantulan BERAT & LAMBAT (38% - 58%) */
  42%      { transform: translate(-24px, -14px) scale(1.15); }
  52%      { transform: translate(-24px, 0px) scale(1); }
  
  /* 2. Pantulan SEDANG (58% - 74%) */
  63%      { transform: translate(-24px, -10px) scale(1.1); }
  70%      { transform: translate(-24px, 0px) scale(1); }
  
  /* 3. Pantulan CEPAT & RINGAN (74% - 86%) */
  78%      { transform: translate(-24px, -6px) scale(1.05); }
  83%      { transform: translate(-24px, 0px) scale(1); }

  /* Transisi Mulus Kembali ke Loop Awal */
  92%      { transform: translate(-24px, 0px); }
}

/* TITIK DI TENGAH (Berada di X: 0px saat melambai) */
@keyframes tempo-white {
  /* FASE 1: Shift & Cross TikTok (0% - 38%) */
  0%, 100% { transform: translate(0px, 0px) scale(1); }
  6%       { transform: translate(0px, 0px) scale(1.15); }
  12%      { transform: translate(-24px, 0px) scale(1); }
  18%      { transform: translate(0px, 0px) scale(1.15); }
  24%      { transform: translate(24px, 0px) scale(1); }
  30%      { transform: translate(0px, 0px) scale(1.15); }
  36%      { transform: translate(0px, 0px) scale(1); }

  /* FASE 2: MELAMBAI (Jeda sedikit setelah titik kiri) */
  
  /* 1. Pantulan BERAT & LAMBAT */
  45%      { transform: translate(0px, -14px) scale(1.15); }
  55%      { transform: translate(0px, 0px) scale(1); }
  
  /* 2. Pantulan SEDANG */
  66%      { transform: translate(0px, -10px) scale(1.1); }
  73%      { transform: translate(0px, 0px) scale(1); }
  
  /* 3. Pantulan CEPAT & RINGAN */
  80%      { transform: translate(0px, -6px) scale(1.05); }
  85%      { transform: translate(0px, 0px) scale(1); }

  /* Transisi Kembali */
  92%      { transform: translate(0px, 0px); }
}

/* TITIK DI SEBELAH KANAN (Berada di X: 24px saat melambai) */
@keyframes tempo-red {
  /* FASE 1: Shift & Cross TikTok (0% - 38%) */
  0%, 100% { transform: translate(-24px, 0px) scale(1); }
  6%       { transform: translate(0px, 0px) scale(1.15); }
  12%      { transform: translate(24px, 0px) scale(1); }
  18%      { transform: translate(0px, 0px) scale(1.15); }
  24%      { transform: translate(0px, 0px) scale(1); }
  30%      { transform: translate(0px, 0px) scale(1.15); }
  36%      { transform: translate(24px, 0px) scale(1); }

  /* FASE 2: MELAMBAI (Jeda sedikit setelah titik tengah) */
  
  /* 1. Pantulan BERAT & LAMBAT */
  48%      { transform: translate(24px, -14px) scale(1.15); }
  58%      { transform: translate(24px, 0px) scale(1); }
  
  /* 2. Pantulan SEDANG */
  69%      { transform: translate(24px, -10px) scale(1.1); }
  76%      { transform: translate(24px, 0px) scale(1); }
  
  /* 3. Pantulan CEPAT & RINGAN */
  82%      { transform: translate(24px, -6px) scale(1.05); }
  87%      { transform: translate(24px, 0px) scale(1); }

  /* Transisi Kembali */
  92%      { transform: translate(24px, 0px); }
}