/* style.css */
body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  transition:
    background-color 0.3s,
    color 0.3s;
}

/* Pengaturan ukuran font khusus untuk input teks */
input[type="text"] {
  font-size: 16px;
}

/* Efek kaca (Glassmorphism) */
.glass-effect {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Animasi Fade In */
.animate-fade {
  animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hilangkan Panah Naik Turun pada Input Number */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -appearance: textfield;
}

/* Konsistensi Ukuran Video & Loader */
.video-container {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 65vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
  position: relative;
  border-radius: 0 0 1rem 1rem;
  overflow: hidden;
}

.plyr,
.plyr__video-wrapper,
video {
  width: 100%;
  height: 100% !important;
  max-height: 65vh !important;
  object-fit: contain;
}

/* Animasi Skeleton Loading */
.skeleton {
  background: linear-gradient(90deg, #1f2937 25%, #374151 50%, #1f2937 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Style Area Kamera Scanner */
#reader {
  width: 100%;
  border: none !important;
  border-radius: 1rem;
  overflow: hidden;
}
#reader__dashboard_section_csr button {
  background-color: #3b82f6 !important;
  color: white !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
}