body {
    font-family: 'Inter', sans-serif;
    background-color: #f8fafc;
    margin: 0;
    padding: 0;
	
}

.safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom);
}

/* Custom Scrollbar for better aesthetics */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #cbd5e1;
}

/* No Scrollbar Helper */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Animasi Blob */
@keyframes blob {
    0% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
}

.animate-blob {
    animation: blob 7s infinite alternate ease-in-out;
}

/* Fix: `animation-delay-xxxx` from styles.css to match `delay-xxxx` in index.css */
.delay-2000 {
    animation-delay: 2s;
}

.delay-4000 {
    animation-delay: 4s;
}

#root:empty::before {
  content: "Memuat Peni Mobile...";
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 1.25rem;
  color: #4338ca;
  background: #f8fafc;
  letter-spacing: -0.025em;
}