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

.qr-pattern {
  background-image: linear-gradient(45deg, #000 25%, transparent 25%),
    linear-gradient(-45deg, #000 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #000 75%),
    linear-gradient(-45deg, transparent 75%, #000 75%);
  background-size: 4px 4px;
  background-position: 0 0, 0 2px, 2px -2px, -2px 0px;
}

.animate-pulse-slow {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

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

.fade-in {
  animation: fadeIn 0.5s ease-out;
}

.camera-button:active {
  transform: scale(0.95);
}

.result-image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 1rem;
}

.marquee-wrapper {
  overflow: hidden;
  width: 100%;
  padding: 8px 0;
}

.marquee-track {
  display: flex;
  gap: 14px;
  width: max-content;
  cursor: grab;
  user-select: none;
  animation: marquee-loop 22s linear infinite;
  will-change: transform;
}

.marquee-track:active {
  cursor: grabbing;
}

.marquee-wrapper:hover .marquee-track,
.marquee-track.paused {
  animation-play-state: paused;
}

@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes marquee-loop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
.slide-card {
  flex-shrink: 0;
  width: 176px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  pointer-events: none;
}
.slide-card img {
  width: 100%;
  height: 128px;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.slide-card .card-label {
  padding: 6px 12px 8px;
}

.marquee-track.dragging {
  animation: none !important;
}

@keyframes pulse-ring {
  0% {
    transform: scale(1);
    opacity: 0.55;
  }
  70% {
    transform: scale(1.5);
    opacity: 0;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}
.pulse-ring {
  position: relative;
}
.pulse-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: #171717;
  animation: pulse-ring 2s ease-out infinite;
  z-index: -1;
}

@keyframes pulse-ring-pill {
  0% {
    opacity: 0.55;
    transform: scale(1);
  }
  70% {
    opacity: 0.2;
    transform: scale(1.05);
  }
  100% {
    opacity: 0;
    transform: scale(1.1);
  }
}
.pulse-ring-pill {
  position: relative;
  z-index: 0;
}
.pulse-ring-pill::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 16px;
  background: #2563EB;
  animation: pulse-ring-pill 2s ease-out infinite;
  z-index: -10;
  pointer-events: none;
}

        /* Menggunakan System Font Stack agar memanggil SF Pro di Apple Devices */
        /* 2. Daftarkan Font Kustom Anda di Sini */
  @font-face {
  font-family: 'SFPro';
  src: url('fonts/SF-Pro-Display-Regular.ttf') format('truetype'),
       url('fonts/SF-Pro-Display-Regular.otf'),
       url('fonts/SF-Pro-Display-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

  @font-face {
  font-family: 'SFPro';
  src: url('fonts/SF-Pro-Text-Medium.otf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;

}
  @font-face {
  font-family: 'SFPro';
  src: url('fonts/SF-Pro-Text-Semibold.otf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;

}
  @font-face {
  font-family: 'SFPro';
  src: url('fonts/SF-Pro-Display-Bold.ttf') format('truetype'),
       url('fonts/SF-Pro-Display-Bold.otf'),
       url('fonts/SF-Pro-Display-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;

}
  @font-face {
  font-family: 'SFPro';
  src: url('fonts/SF-Pro-Display-Heavy.ttf') format('truetype'),
       url('fonts/SF-Pro-Display-Heavy.otf'),
       url('fonts/SF-Pro-Display-Heavy.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;

}
  @font-face {
  font-family: 'SFPro';
  src: url('fonts/SF-Pro-Text-Black.ttf') format('truetype'),
       url('fonts/SF-Pro-Text-Black.otf'),
       url('fonts/SF-Pro-Text-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;

}
        /* Haluskan tampilan font di browser */
        body {
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            font-family: 'SFPro', -apple-system, BlinkMacSystemFont, 'sans-serif', 'ui-serif';
        }