.coming-soon {
  position: relative;
}

.coming-soon::after {
  content: "Coming Soon";
  position: absolute;
  top: 50%;
  right: -10px;
  transform: translateY(-50%);
  background-color: #ff6b6b;
  color: white;
  font-size: 10px;
  padding: 4px 6px;
  border-radius: 3px;
  white-space: nowrap;
  z-index: 1000;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Optional: Tambahkan efek hover */
.coming-soon:hover::after {
  background-color: #ff5252;
}

/* Animasi ilustrator */
.swiper-slide {
  position: relative;
}

.ils-cover {
  position: absolute;
  bottom: 100px;
  right: 100px;
  width: 400px;
  animation: gentleFloat 4s ease-in-out infinite;
  max-width: 90%;
}

@keyframes gentleFloat {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-12px);
  }
}

.ils-cover:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

/* Desktop/Laptop (1200px - 1370px) */
@media (max-width: 1370px) and (min-width: 1201px) {
  .ils-cover {
    width: 350px;
    right: 60px;
    bottom: 80px;
  }
}

/* Tablet Large (1024px - 1200px) */
@media (max-width: 1200px) and (min-width: 1025px) {
  .ils-cover {
    width: 350px;
    right: 80px;
    bottom: 80px;
  }
}

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
  .ils-cover {
    width: 300px;
    right: 60px;
    bottom: 70px;
  }

  @keyframes gentleFloat {

    0%,
    100% {
      transform: translateY(0px);
    }

    50% {
      transform: translateY(-8px);
    }
  }
}

/* Mobile Large (480px - 768px) */
@media (max-width: 768px) {
  .ils-cover {
    width: 320px;
    /* Diperbesar dari 250px */
    right: 30px;
    bottom: 50px;
    /* Dinaikkan dari 50px */
  }

  .ils-cover:hover {
    transform: scale(1.03);
  }
}

/* Mobile Medium (375px - 480px) */
@media (max-width: 480px) {
  .ils-cover {
    width: 200px;
    /* Diperbesar dari 200px */
    right: 20px;
    bottom: 50px;
    /* Dinaikkan dari 40px */
  }

  @keyframes gentleFloat {

    0%,
    100% {
      transform: translateY(0px);
    }

    50% {
      transform: translateY(-6px);
    }
  }
}

/* Mobile Small (320px - 375px) */
@media (max-width: 375px) {
  .ils-cover {
    width: 180px;
    /* Diperbesar dari 180px */
    right: 15px;
    bottom: 100px;
    /* Dinaikkan dari 30px */
  }
}

/* Mobile Extra Small (kurang dari 320px) */
@media (max-width: 320px) {
  .ils-cover {
    width: 160px;
    /* Diperbesar dari 150px */
    right: 10px;
    bottom: 90px;
    /* Dinaikkan dari 25px */
  }

  .ils-cover:hover {
    transform: scale(1.02);
  }
}

/* Untuk orientasi landscape di mobile */
@media (max-height: 500px) and (orientation: landscape) {
  .ils-cover {
    width: 200px;
    right: 30px;
    bottom: 60px;
    /* Dinaikkan untuk landscape */
  }

  @keyframes gentleFloat {

    0%,
    100% {
      transform: translateY(0px);
    }

    50% {
      transform: translateY(-4px);
    }
  }
}