body {
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(135deg, #f0fdf4 0%, #e0f2fe 50%, #ffffff 100%);
}

.font-title {
    font-family: 'Fredoka', sans-serif;
}

.booklet-container {
    perspective: 1500px;
}

.page-card {
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s ease;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

.page-active {
    transform: rotateY(0deg) translateZ(0px);
    opacity: 1;
    z-index: 10;
}

.page-next {
    transform: rotateY(20deg) translateZ(-100px) translateX(20%);
    opacity: 0;
    z-index: 5;
    pointer-events: none;
}

.page-prev {
    transform: rotateY(-20deg) translateZ(-100px) translateX(-20%);
    opacity: 0;
    z-index: 5;
    pointer-events: none;
}

@media (min-width: 768px) {
    .page-next {
        transform: rotateY(45deg) translateZ(-100px) translateX(50%);
    }

    .page-prev {
        transform: rotateY(-45deg) translateZ(-100px) translateX(-50%);
    }
}

@keyframes progress {
    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}

.progress-bar-fill {
    animation: progress 8s linear infinite;
}

.progress-paused {
    animation-play-state: paused !important;
}

/* Efek Skeleton Loading sederhana */
.loading-skeleton {
    background: #e2e8f0;
    color: transparent !important;
    border-radius: 4px;
    animation: pulse 1.5s infinite;
}

.loading-skeleton * {
    visibility: hidden;
}

@keyframes pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}