/* Global Variables */
:root {
    --gold-primary: #FFD700;
    --gold-dark: #B8860B;
    --bg-dark: #0f0f0f;
    --bg-card: #1a1a1a;
    --text-light: #f3f4f6;
}

/* Base Body Styles */
body {
    background-color: var(--bg-dark);
    background-image: radial-gradient(circle at 50% 0%, #1a1a1a 0%, #0f0f0f 100%); 
    color: var(--text-light);
    font-family: 'Space Grotesk', sans-serif;
}

/* Background Noise Texture */
.bg-noise {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
    opacity: 0.4;
    pointer-events: none;
}

/* --- ANIMATIONS --- */

/* 1. Pulse Slow (Existing) */
@keyframes pulse-slow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}
.animate-pulse-slow {
    animation: pulse-slow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* 2. Fade In Up (Entry Animation) */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
.animate-fade-in-up {
    animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }

/* 3. Floating Blobs (Background) */
@keyframes float {
    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-float {
    animation: float 20s ease-in-out infinite;
}

/* 4. Shine Effect for Button */
.btn-shine {
    position: relative;
    overflow: hidden;
}
.btn-shine::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: 0.5s;
}
.btn-shine:hover::after {
    left: 100%;
    transition: 0.5s;
}

/* --- UTILITIES & OVERRIDES --- */

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(17, 17, 17, 0.5);
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--gold-dark);
}

/* Log Entry Styling (Mobile Responsive) */
.log-entry {
    word-break: break-word; /* Memastikan teks panjang turun ke bawah */
    overflow-wrap: break-word;
    white-space: pre-wrap;
    font-size: 0.85rem;
    line-height: 1.4;
    padding: 2px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Input Autofill Fix */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px #151515 inset !important;
    -webkit-text-fill-color: white !important;
    transition: background-color 5000s ease-in-out 0s;
}

.text-gold { color: var(--gold-primary); }
.bg-gold { background-color: var(--gold-primary); }
.border-gold { border-color: var(--gold-primary); }

/* Wallet Connected State */
.wallet-connected {
    background-color: var(--gold-primary) !important;
    color: #000000 !important;
    border-color: var(--gold-primary) !important;
    opacity: 1 !important;
    font-weight: 700 !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}
.wallet-connected:hover {
    background-color: #e6c200 !important;
    transform: translateY(-1px);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
}

::selection {
    background: var(--gold-dark);
    color: white;
}