@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    background-color: #0a0f1e;
    color: #e2e8f0;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: #0a0f1e;
}
::-webkit-scrollbar-thumb {
    background: #1e3a8a;
    border-radius: 3px;
}

/* Animasi mengetik (blinking cursor) */
.typing-cursor::after {
    content: '|';
    animation: blink 1s infinite;
    color: #3b82f6;
}
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Glow efek untuk elemen */
.glow-border {
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
    border: 1px solid rgba(59, 130, 246, 0.5);
}

/* Transisi modal */
#api-modal {
    transition: opacity 0.3s ease;
}
#api-modal .relative.z-10 {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Endpoint card style */
.row > div {
    transition: all 0.2s ease;
}
.row > div:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.2);
}

/* Tombol GET di card */
.get-api-btn {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    border: none;
    box-shadow: 0 0 10px rgba(37, 99, 235, 0.4);
}
.get-api-btn:hover {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.6);
}

/* Splash screen */
#splash {
    background: radial-gradient(circle at center, #0f172a 0%, #0a0f1e 100%);
}

/* Responsive video */
@media (max-width: 640px) {
    #splash video {
        width: 48px;
        height: 48px;
    }
}