/* static/css/index.css */
body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: #f8fafc;
}

/* Pola titik-titik pada latar belakang */
.bg-pattern {
    background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
    background-size: 24px 24px;
}

/* Animasi bentuk abstrak (Blob) - Hanya Aktif di Layar Besar (Desktop) */
@media (min-width: 768px) {
    @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;
        will-change: transform; /* Hint ke GPU agar super mulus */
    }
    .animation-delay-2000 {
        animation-delay: 2s;
    }
    .animation-delay-4000 {
        animation-delay: 4s;
    }
}

/* Efek kaca untuk navigasi atas */
.glass-nav {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

/* Memperbaiki aksesibilitas untuk fokus keyboard (Tab) */
a:focus-visible, button:focus-visible {
    outline: 2px solid #0284c7; /* Warna biru fokus */
    outline-offset: 2px;
}