/* ==========================================================================
   KITABMU KIDS PREMIUM ANIMATION SYSTEM (CSS Native & Ringan)
   Version: 1.0 | Stabil & Bebas Konflik
   ========================================================================== */

/* ---------------------------- 1. Palet Warna Premium ---------------------------- */
:root {
    /* Warna Utama Islami & Pastel */
    --kids-primary: #52B788;       /* Hijau segar */
    --kids-secondary: #4361EE;     /* Biru edukasi */
    --kids-warning: #FFB703;       /* Kuning cerah */
    --kids-danger: #E63946;         /* Merah coral */
    --kids-dark: #1E293B;           /* Slate 800 */
    --kids-muted: #64748B;          /* Slate 500 */
    --kids-light-bg: #F8FAFC;       /* Latar bersih */
    
    /* Font Stack Ramah Anak (dengan fallback) */
    --font-kids-heading: 'Fredoka', 'Quicksand', 'Nunito', system-ui, sans-serif;
    --font-kids-body: 'Quicksand', 'Nunito', system-ui, sans-serif;
}

/* ---------------------------- 2. Base Typography ---------------------------- */
body {
    font-family: var(--font-kids-body);
    color: var(--kids-dark);
    background-color: #fff;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-kids-heading);
    color: var(--kids-dark);
}

/* ---------------------------- 3. Scroll Reveal Animation (Satu Definisi) ---------------------------- */
.reveal-on-scroll {
    opacity: 0;
    transform: translate3d(0, 40px, 0);
    transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1),
                transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
    will-change: opacity, transform;
}

.reveal-on-scroll.active {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* ---------------------------- 4. Premium Card Hover Effect ---------------------------- */
.premium-kids-card {
    background: #ffffff;
    border: 2px solid #F1F5F9;
    border-radius: 32px;
    padding: 2rem 1.5rem;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.4s ease,
                border-color 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Indikator garis atas per kartu (opsional, bisa diaktifkan dengan class tambahan) */
.premium-kids-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: transparent;
    transition: background 0.3s ease;
}

/* Variasi warna border bawah & garis atas (gunakan class di card) */
.card-hijaiyah { border-color: var(--kids-primary); }
.card-hijaiyah::before { background: var(--kids-primary); }

.card-juzamma { border-color: var(--kids-secondary); }
.card-juzamma::before { background: var(--kids-secondary); }

.card-doa { border-color: var(--kids-warning); }
.card-doa::before { background: var(--kids-warning); }

.card-tahsin { border-color: var(--kids-danger); }
.card-tahsin::before { background: var(--kids-danger); }

.premium-kids-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15) !important;
}

/* Ikon dalam card – efek bounce ringan */
.icon-container-premium {
    width: 90px;
    height: 90px;
    border-radius: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.2rem;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    background: rgba(82, 183, 136, 0.1);
}

.premium-kids-card:hover .icon-container-premium {
    transform: translateY(-5px) scale(1.08) rotate(2deg);
}

/* ---------------------------- 5. Tombol CTA dengan Pulse Premium ---------------------------- */
.btn-premium-pulse {
    font-family: var(--font-kids-heading);
    background: linear-gradient(135deg, var(--kids-warning) 0%, #FF9F00 100%);
    color: #1E293B !important;
    border: none;
    border-radius: 60px;
    padding: 0.8rem 2rem;
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 0 8px 20px rgba(255, 183, 3, 0.3);
    transition: all 0.3s ease;
    position: relative;
    cursor: pointer;
}

.btn-premium-pulse::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 60px;
    box-shadow: 0 0 0 0 rgba(255, 183, 3, 0.5);
    animation: premiumGlow 2s infinite;
    pointer-events: none;
}

.btn-premium-pulse:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(255, 183, 3, 0.5);
}

@keyframes premiumGlow {
    0% { box-shadow: 0 0 0 0 rgba(255, 183, 3, 0.6); }
    70% { box-shadow: 0 0 0 15px rgba(255, 183, 3, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 183, 3, 0); }
}

/* ---------------------------- 6. Floating Animation untuk Karakter ---------------------------- */
.anim-floating {
    animation: kidsFloating 5s ease-in-out infinite;
    will-change: transform;
}

@keyframes kidsFloating {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-12px); }
    100% { transform: translateY(0px); }
}

/* ---------------------------- 7. Hover Scale untuk Elemen Lain (opsional) ---------------------------- */
.hover-scale-sm {
    transition: transform 0.2s ease;
}
.hover-scale-sm:hover {
    transform: scale(1.03);
}

/* ---------------------------- 8. Placeholder SVG / Fallback Ikon ---------------------------- */
.svg-fallback-wrapper {
    background: linear-gradient(135deg, #F1F5F9, #E2E8F0);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--kids-muted);
    font-weight: 600;
}

/* ---------------------------- 9. Pattern Background Halus (opsional) ---------------------------- */
.bg-pattern-premium {
    background-color: var(--kids-light-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='%2352b788' fill-opacity='0.05'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7z'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------------------------- 10. Full-Screen Direction Page (swap left effect) ---------------------------- */
.direction-overlay-page {
    position: fixed;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #F0FDF4, #ECFDF5);
    z-index: 9999;
    transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1);
    overflow-y: auto;
    padding: 2rem;
}

.direction-overlay-page.is-active {
    transform: translateX(-100%);
}

/* Grid petualangan untuk halaman pilihan program */
.adventure-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.level-box {
    background: #fff;
    border: 4px solid #E2E8F0;
    border-bottom-width: 12px;
    border-radius: 28px;
    transition: all 0.15s ease;
    cursor: pointer;
    text-align: center;
    padding: 2rem 1rem;
}

.level-box:active {
    transform: translateY(8px);
    border-bottom-width: 4px;
}

/* Variasi warna level */
.level-box.lv-hijaiyah { border-color: #2EC4B6; border-bottom-color: #02A999; }
.level-box.lv-juzamma { border-color: #FF9F1C; border-bottom-color: #E58500; }
.level-box.lv-doa { border-color: #FF595E; border-bottom-color: #E03E42; }
.level-box.lv-story { border-color: #3A86FF; border-bottom-color: #1B60D1; }

/* ---------------------------- 11. Utility untuk Pointer Event (pastikan tombol bisa diklik) ---------------------------- */
.pointer-events-catch {
    position: relative;
    z-index: 999;
}

.btn-premium-pulse, .btn, a, button {
    pointer-events: auto !important;
    touch-action: manipulation;
}

/* ==========================================================================
   AKHIR CSS KITABMU KIDS PREMIUM
   ========================================================================== */