/* Ganti font default jika diinginkan */
body {
    font-family: 'Inter', sans-serif; /* Contoh menggunakan Google Font */
}

/* Sedikit custom untuk hasil proses */
#result {
    transition: all 0.3s ease-in-out;
}

/* Menambahkan sedikit animasi pada elemen yang dimuat */
.skeleton {
    background-color: #e5e7eb; /* gray-200 */
    border-radius: 0.5rem; /* rounded-lg */
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
/* Aturan Tambahan untuk Loader */
#loader {
    transition: opacity 0.5s ease-out;
}

/* Aturan untuk elemen yang akan dianimasikan saat di-scroll */
.animate-on-scroll {
    opacity: 0; /* Mulai dengan transparan */
    transform: translateY(20px); /* Mulai sedikit dari bawah */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    transition-delay: 0.2s; /* Sedikit jeda agar lebih halus */
}

/* Class 'visible' akan ditambahkan oleh JavaScript saat elemen terlihat */
.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}