/* Sentuhan desain custom di luar utility Tailwind bawaan */

::selection { background: #DCE7FF; color: #0E1D5C; }

.bg-grid {
  background-image:
    linear-gradient(to right, rgba(14,29,92,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(14,29,92,0.05) 1px, transparent 1px);
  background-size: 32px 32px;
}

.spec-card {
  font-family: 'JetBrains Mono', monospace;
}

.blink-dot {
  animation: blink-dot 1.6s ease-in-out infinite;
}
@keyframes blink-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.fade-up {
  animation: fade-up 0.5s ease both;
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Scroll-reveal: elemen dengan class .reveal tersembunyi dulu, muncul saat masuk viewport
   (dipicu lewat IntersectionObserver di public/js/main.js). data-delay (ms) untuk efek stagger. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Kartu yang "mengambang" halus saat hover — dipakai di kartu fitur, paket, dashboard */
.hover-lift {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px -14px rgba(14, 29, 92, 0.28);
  border-color: #B8CFFF;
}

/* Tombol dengan sedikit "pop" saat hover/klik */
.btn-anim {
  transition: transform 0.15s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.btn-anim:hover { transform: translateY(-1px) scale(1.02); }
.btn-anim:active { transform: translateY(0) scale(0.98); }

/* Ikon fitur berdenyut halus saat kartu di-hover */
.hover-lift:hover .icon-pop {
  transform: scale(1.1) rotate(-2deg);
}
.icon-pop { transition: transform 0.3s ease; }

/* Elemen mengambang lambat, dipakai di kartu spec hero */
.float-slow {
  animation: float-slow 5s ease-in-out infinite;
}
@keyframes float-slow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Garis progress berjalan di dalam log kartu hero */
.log-line {
  opacity: 0;
  animation: log-in 0.45s ease forwards;
}
@keyframes log-in {
  from { opacity: 0; transform: translateX(-6px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Gradient border tipis yang bergerak, dipakai sebagai aksen di badge/counter */
.shimmer {
  background: linear-gradient(90deg, #EEF3FF 0%, #DCE7FF 50%, #EEF3FF 100%);
  background-size: 200% 100%;
  animation: shimmer 2.4s linear infinite;
}
@keyframes shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* Ikon status (sukses/gagal) muncul dengan efek "pop" kecil */
.pop-in {
  animation: pop-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes pop-in {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .blink-dot, .fade-up, .float-slow, .log-line, .shimmer, .pop-in { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hover-lift:hover, .btn-anim:hover, .btn-anim:active { transform: none; }
}

/* Fokus keyboard yang jelas untuk aksesibilitas */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #3763EA;
  outline-offset: 2px;
}

.table-scroll {
  -webkit-overflow-scrolling: touch;
}