* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* Header dengan Background Image dan Overlay Hijau */
.header-with-overlay {
    position: relative;
    background-image: url('../asset/bgimg.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 1;
}

.header-with-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(64, 89, 87, 0.85);
    border-radius: 0 0 1.5rem 1.5rem;
    pointer-events: none;
    z-index: 1;
}

.header-with-overlay > * {
    position: relative;
    z-index: 2;
}

/* Smooth transitions */
button, a, div {
    transition: all 0.2s ease;
}

/* Responsive */
@media (max-width: 768px) {
    .max-w-md {
        max-width: 100%;
    }
}

/* Navbar responsive - tidak memanjang di desktop */
.bottom-navbar {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 100%;
    max-width: 28rem;
}

/* Page Transition */
@keyframes fadeScaleIn {
    from { 
        opacity: 0; 
        transform: scale(0.97);
    }
    to { 
        opacity: 1; 
        transform: scale(1);
    }
}

@keyframes fadeScaleOut {
    from { 
        opacity: 0; 
        transform: scale(1.03);
    }
    to { 
        opacity: 1; 
        transform: scale(1);
    }
}

.slide-in-left {
    animation: fadeScaleIn 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.slide-in-right {
    animation: fadeScaleOut 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}