input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/* Remove spin buttons for number inputs */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* For Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

/* Base animations */
.animate-fade-in {
  animation: fadeIn 0.8s ease-in-out forwards;
}
.bg-light-beige {
  background-color: #e0d4cc;
}

.animate-fade-out {
  animation: fadeOut 0.8s ease-in-out forwards;
}

.animate-slide-up {
  animation: slideUp 0.6s ease-out forwards;
}

.animate-slide-right {
  animation: slideRight 0.6s ease-out forwards;
}

.animate-scale {
  animation: scale 0.6s ease-out forwards;
}

.animate-bounce-in {
  animation: bounceIn 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}

.animate-rotate-in {
  animation: rotateIn 0.8s ease-out forwards;
}

/* Staggered animations with delays */
.delay-100 {
  animation-delay: 100ms;
}

.delay-200 {
  animation-delay: 200ms;
}

.delay-300 {
  animation-delay: 300ms;
}

.delay-400 {
  animation-delay: 400ms;
}

.delay-500 {
  animation-delay: 500ms;
}

/* Carousel specific animations */
.carousel-item {
  opacity: 0;
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  transition: opacity 1.2s ease-in-out;
}

.carousel-item.active {
  display: block;
  opacity: 1;
}

.carousel-item.fade-out {
  opacity: 0;
}

/* Animation keyframes */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(40px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideRight {
  from {
    transform: translateX(-40px);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes scale {
  from {
    transform: scale(0.8);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes bounceIn {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }

  20% {
    transform: scale(1.1);
  }

  40% {
    transform: scale(0.9);
  }

  60% {
    transform: scale(1.03);
    opacity: 1;
  }

  80% {
    transform: scale(0.97);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes rotateIn {
  from {
    transform: rotate(-90deg);
    opacity: 0;
  }

  to {
    transform: rotate(0);
    opacity: 1;
  }
}

/* Navbar dropdown */
.nav-dropdown {
  display: none;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}

.nav-dropdown.show {
  display: block;
  transform: translateY(0);
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

.carousel-item {
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
  display: none;
}

.carousel-item.active {
  opacity: 1;
  display: block;
}

.dropdown-menu {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  visibility: hidden;
}

.dropdown-menu.show {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.glass-effect {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.8);
}

.card-hover {
  transition: all 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
body.no-scroll {
  overflow: hidden;
}
#navbar {
  transition: all 0.3s ease-in-out; /* Animasi smooth untuk perubahan posisi */
  z-index: 999;
}

.carousel-item img {
  transition: transform 0.7s ease, opacity 0.7s ease;
  transform: scale(1);
  opacity: 0;
}
html {
  scroll-behavior: smooth;
}
.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 20px 20px 0;
  border-color: transparent #1a202c transparent transparent;
}

/* Saat gambar aktif (menampilkan gambar dengan fade dan zoom in) */
.carousel-item.active img {
  opacity: 1;
  transform: scale(1.2); /* Zoom in */
}

/* Saat gambar menghilang (fade dan zoom out) */
.carousel-item.inactive img {
  opacity: 0;
  transform: scale(0.8); /* Zoom out */
}

.card-body p {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Membatasi hingga 4 baris */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis; /* Menambahkan '...' jika teks melebihi batas */
}

.text-3-baris {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Membatasi hingga 4 baris */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis; /* Menambahkan '...' jika teks melebihi batas */
}

.text-2-baris {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Membatasi hingga 4 baris */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis; /* Menambahkan '...' jika teks melebihi batas */
}

.text-1-baris {
  display: -webkit-box;
  -webkit-line-clamp: 1; /* Membatasi hingga 4 baris */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis; /* Menambahkan '...' jika teks melebihi batas */
}
.hexagon {
  background-color: #fbbf24; /* Warna default */
  position: relative;
  margin: 28.87px 5px; /* Sesuai rasio */
  clip-path: polygon(
    25.1% 0%,
    75.1% 0%,
    100% 50%,
    75.1% 100%,
    25.1% 100%,
    0% 50%
  );
}

.hexagon1 {
  position: relative;
  margin: 28.87px 5px; /* Sesuai rasio */
  clip-path: polygon(
    30% 0%,
    70% 0%,
    100% 30%,
    100% 70%,
    70% 100%,
    30% 100%,
    0% 70%,
    0% 30%
  );
}

.hexagon-1 {
  height: 150px;
  aspect-ratio: 1 / cos(30deg);
  clip-path: polygon(50% -50%, 100% 50%, 50% 150%, 0 50%);
  background: linear-gradient(60deg, #bf4d28, #cc333f);
}
.hexagon-alt {
  height: 150px;
  aspect-ratio: cos(30deg);
  clip-path: polygon(-50% 50%, 50% 100%, 150% 50%, 50% 0);
  background: linear-gradient(60deg, #bf4d28, #cc333f);
}
.hexagon-border {
  --b: 10px; /* adjust to control the border */
  height: 150px;
  aspect-ratio: 1 / cos(30deg);
  clip-path: polygon(
    0 50%,
    50% -50%,
    100% 50%,
    50% 150%,
    0 50%,
    var(--b) 50%,
    calc(25% + var(--b) * cos(60deg)) calc(100% - var(--b) * sin(60deg)),
    calc(75% - var(--b) * cos(60deg)) calc(100% - var(--b) * sin(60deg)),
    calc(100% - var(--b)) 50%,
    calc(75% - var(--b) * cos(60deg)) calc(var(--b) * sin(60deg)),
    calc(25% + var(--b) * cos(60deg)) calc(var(--b) * sin(60deg)),
    var(--b) 50%
  );
  background: linear-gradient(60deg, #bf4d28, #cc333f);
}
.hexagon-border-alt {
  --b: 10px; /* adjust to control the border */
  height: 150px;
  aspect-ratio: cos(30deg);
  clip-path: polygon(
    50% 0,
    -50% 50%,
    50% 100%,
    150% 50%,
    50% 0,
    50% var(--b),
    calc(100% - var(--b) * sin(60deg)) calc(25% + var(--b) * cos(60deg)),
    calc(100% - var(--b) * sin(60deg)) calc(75% - var(--b) * cos(60deg)),
    50% calc(100% - var(--b)),
    calc(var(--b) * sin(60deg)) calc(75% - var(--b) * cos(60deg)),
    calc(var(--b) * sin(60deg)) calc(25% + var(--b) * cos(60deg)),
    50% var(--b)
  );
  background: linear-gradient(60deg, #bf4d28, #cc333f);
}

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");

body {
  font-family: "Inter", sans-serif;
}

.device-card {
  transition: all 0.2s ease;
}

.device-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.sidebar {
  transition: all 0.3s ease;
}

.sidebar-collapsed {
  width: 80px;
}

.sidebar-expanded {
  width: 260px;
}

.main-content {
  transition: margin-left 0.3s ease;
}
.glass-card {
  background: rgba(255, 255, 255, 0.807);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.gradient-text {
  background: linear-gradient(90deg, #0ea5e9 0%, #6366f1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.avatar-gradient {
  background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
}

.hover-scale {
  transition: transform 0.2s ease;
}
.verification-badge {
  position: relative;
  padding-right: 20px;
}

.verification-badge::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-size: contain;
  background-repeat: no-repeat;
}

.verified::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2310B981'%3E%3Cpath fill-rule='evenodd' d='M8.603 3.799A4.49 4.49 0 0112 2.25c1.357 0 2.573.6 3.397 1.549a4.49 4.49 0 013.498 1.307 4.491 4.491 0 011.307 3.497A4.49 4.49 0 0121.75 12a4.49 4.49 0 01-1.549 3.397 4.491 4.491 0 01-1.307 3.497 4.491 4.491 0 01-3.497 1.307A4.49 4.49 0 0112 21.75a4.49 4.49 0 01-3.397-1.549 4.49 4.49 0 01-3.498-1.306 4.491 4.491 0 01-1.307-3.498A4.49 4.49 0 012.25 12c0-1.357.6-2.573 1.549-3.397a4.49 4.49 0 011.307-3.497 4.49 4.49 0 013.497-1.307zm7.007 6.387a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z' clip-rule='evenodd' /%3E%3C/svg%3E");
}

.unverified::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23EF4444'%3E%3Cpath fill-rule='evenodd' d='M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-1.72 6.97a.75.75 0 10-1.06 1.06L10.94 12l-1.72 1.72a.75.75 0 101.06 1.06L12 13.06l1.72 1.72a.75.75 0 101.06-1.06L13.06 12l1.72-1.72a.75.75 0 10-1.06-1.06L12 10.94l-1.72-1.72z' clip-rule='evenodd' /%3E%3C/svg%3E");
}

.active::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath fill-rule='evenodd' d='M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-.53 14.03a.75.75 0 001.06 0l3-3a.75.75 0 10-1.06-1.06l-2.47 2.47-1.47-1.47a.75.75 0 00-1.06 1.06l2 2z' clip-rule='evenodd' /%3E%3C/svg%3E");
}

.pending::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23eab308'%3E%3Cpath fill-rule='evenodd' d='M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zM12.75 6a.75.75 0 00-1.5 0v6c0 .414.336.75.75.75h4.5a.75.75 0 000-1.5h-3.75V6z' clip-rule='evenodd' /%3E%3C/svg%3E");
}

.suspend::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f97316'%3E%3Cpath fill-rule='evenodd' d='M6.75 5.25a.75.75 0 01.75-.75H9a.75.75 0 01.75.75v13.5a.75.75 0 01-.75.75H7.5a.75.75 0 01-.75-.75V5.25zm7.5 0A.75.75 0 0115 4.5h1.5a.75.75 0 01.75.75v13.5a.75.75 0 01-.75.75H15a.75.75 0 01-.75-.75V5.25z' clip-rule='evenodd' /%3E%3C/svg%3E");
}

.banned::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23EF4444'%3E%3Cpath fill-rule='evenodd' d='M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-1.72 6.97a.75.75 0 10-1.06 1.06L10.94 12l-1.72 1.72a.75.75 0 101.06 1.06L12 13.06l1.72 1.72a.75.75 0 101.06-1.06L13.06 12l1.72-1.72a.75.75 0 10-1.06-1.06L12 10.94l-1.72-1.72z' clip-rule='evenodd' /%3E%3C/svg%3E");
}

.waiting::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233b82f6'%3E%3Cpath fill-rule='evenodd' d='M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-.53 14.03a.75.75 0 001.06 0l3-3a.75.75 0 10-1.06-1.06l-2.47 2.47-1.47-1.47a.75.75 0 00-1.06 1.06l2 2z' clip-rule='evenodd' /%3E%3C/svg%3E");
}

.ongoing::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a855f7'%3E%3Cpath fill-rule='evenodd' d='M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0 3.285L7.28 19.991c-1.25.687-2.779-.217-2.779-1.643V5.653z' clip-rule='evenodd' /%3E%3C/svg%3E");
}

.deactive::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-1.72 6.97a.75.75 0 10-1.06 1.06L10.94 12l-1.72 1.72a.75.75 0 101.06 1.06L12 13.06l1.72 1.72a.75.75 0 101.06-1.06L13.06 12l1.72-1.72a.75.75 0 10-1.06-1.06L12 10.94l-1.72-1.72z' clip-rule='evenodd' /%3E%3C/svg%3E");
}

.nonactive::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239ca3af'%3E%3Cpath fill-rule='evenodd' d='M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-3 10.5a.75.75 0 01.75-.75h4.5a.75.75 0 010 1.5h-4.5a.75.75 0 01-.75-.75z' clip-rule='evenodd' /%3E%3C/svg%3E");
}

.block::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath fill-rule='evenodd' d='M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-1.72 6.97a.75.75 0 10-1.06 1.06L10.94 12l-1.72 1.72a.75.75 0 101.06 1.06L12 13.06l1.72 1.72a.75.75 0 101.06-1.06L13.06 12l1.72-1.72a.75.75 0 10-1.06-1.06L12 10.94l-1.72-1.72z' clip-rule='evenodd' /%3E%3C/svg%3E");
}

.number-animation {
  animation: count 2s ease-in-out forwards;
}

@keyframes count {
  from {
    opacity: 0;
  }

  25% {
    opacity: 1;
  }

  50% {
    opacity: 1;
  }

  75% {
    opacity: 1;
  }

  to {
    opacity: 1;
  }
}