/* Warna tema kreatif */
    :root {
        --mi-orange: #FF6B35;
        --mi-light-orange: #FFA15F;
        --mi-green: #2ECC71;
        --mi-light-green: #ABEBC6;
        --mi-yellow: #FFD166;
        --mi-blue: #118AB2;
        --mi-purple: #9D4EDD;
        --mi-white: #FFFFFF;
        --mi-light-gray: #F8F9FA;
        --mi-paper: #FFFBF0;
    }

/*
Theme Name: Blocksy Child - MI Gen Tangguh Bold
Template: blocksy
Version: 1.1
Author: Madrasah Ibtidaiyah Gen Tangguh
Description: Tema child dengan header minimalis & bold untuk MI Gen Tangguh
*/
/* MI GEN TANGGUH - ENHANCEMENT CSS */
.mi-parallax-layer {
    will-change: transform;
    backface-visibility: hidden;
}

/* Smooth transitions for all interactive elements */
.mi-feature-button,
.mi-bubble,
.mi-cta-main,
.mi-cta-secondary,
.mi-article-card,
.mi-teacher-card-simple {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* Enhanced scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: rgba(255, 85, 0, 0.05);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #FF5500, #00A884);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #FF5500, #FFD166);
}

/* Selection color */
::selection {
    background: rgba(255, 85, 0, 0.3);
    color: white;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .mi-parallax-layer,
    #mi-dynamic-texture,
    .mi-bubble div {
        animation: none !important;
        transition: none !important;
    }
    
    .mi-feature-button:hover,
    .mi-bubble:hover {
        transform: none !important;
    }
}

/* Print styles */
@media print {
    .mi-parallax-layer,
    #mi-gradient-trail,
    #mi-scroll-progress,
    #mi-dynamic-texture,
    #mi-page-loader {
        display: none !important;
    }
}
/* Import Montserrat font untuk tampilan bold */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');

/* Reset beberapa style untuk header */
.mi-header-minimalist * {
    box-sizing: border-box;
}

/* Ensure proper stacking */
.mi-header-minimalist {
    position: relative;
    z-index: 1000;
}

/* Hide default Blocksy header jika menggunakan custom header */
.site-header {
    display: none;
}

body.mi-header-active .site-header {
    display: block;
}

/* Smooth transitions */
.mi-nav-link,
.mi-cta-button,
.mi-logo-link {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
}

/* Focus styles untuk aksesibilitas */
.mi-nav-link:focus,
.mi-cta-button:focus {
    outline: 2px solid var(--mi-orange-bold);
    outline-offset: 2px;
}

/* Print styles */
@media print {
    .mi-header-strip,
    .mi-mobile-toggle,
    .mi-cta-button {
        display: none !important;
    }
    
    .mi-main-header {
        position: static !important;
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .mi-logo-shape {
        border: 5px solid white;
    }
    
    .mi-nav-link {
        border: 1px solid transparent;
    }
    
    .mi-nav-link:hover {
        border-color: var(--mi-orange-bold);
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .mi-logo-ring,
    .mi-nav-link::before,
    .mi-cta-button::before {
        animation: none !important;
        transition: none !important;
    }
    
    .mi-logo-link:hover,
    .mi-cta-button:hover,
    .mi-nav-link:hover {
        transform: none !important;
    }
}
    
    /* Background pattern kreatif */
    body .mi-home-page {
        background-color: var(--mi-paper);
        background-image: 
            radial-gradient(circle at 10% 20%, rgba(255, 107, 53, 0.05) 0%, transparent 20%),
            radial-gradient(circle at 90% 80%, rgba(46, 204, 113, 0.05) 0%, transparent 20%),
            radial-gradient(circle at 50% 50%, rgba(255, 209, 102, 0.03) 0%, transparent 30%);
        background-attachment: fixed;
        position: relative;
        overflow-x: hidden;
    }
    
    /* Jumbotron dengan bentuk organik */
    .mi-jumbotron {
        background: linear-gradient(135deg, 
            var(--mi-orange) 0%, 
            var(--mi-light-orange) 30%, 
            var(--mi-yellow) 70%, 
            var(--mi-green) 100%);
        padding: 120px 0 150px;
        text-align: center;
        color: white;
        position: relative;
        overflow: hidden;
        margin-bottom: 0;
        clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
    }
    
    .mi-jumbotron::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: 
            url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M0,50 Q50,0 100,50 Q50,100 0,50" fill="white" fill-opacity="0.1"/></svg>'),
            url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60"><circle cx="30" cy="30" r="25" fill="white" fill-opacity="0.05"/></svg>');
        background-size: 200px, 80px;
        background-position: 20% 30%, 80% 70%;
        animation: floatBackground 40s infinite linear;
    }
    
    @keyframes floatBackground {
        0% { background-position: 20% 30%, 80% 70%; }
        50% { background-position: 80% 70%, 20% 30%; }
        100% { background-position: 20% 30%, 80% 70%; }
    }
    
    .mi-jumbotron-content {
        position: relative;
        z-index: 2;
        max-width: 900px;
        margin: 0 auto;
        padding: 0 20px;
    }
    
    .mi-jumbotron h1 {
        font-size: 4rem;
        margin-bottom: 25px;
        text-shadow: 3px 3px 8px rgba(0,0,0,0.2);
        color: white;
        font-weight: 800;
        letter-spacing: -0.5px;
        position: relative;
        display: inline-block;
    }
    
    .mi-jumbotron h1::after {
        content: "";
        position: absolute;
        bottom: -10px;
        left: 25%;
        width: 50%;
        height: 4px;
        background: linear-gradient(90deg, transparent, white, transparent);
        border-radius: 2px;
    }
    
    .mi-jumbotron p {
        font-size: 1.8rem;
        margin-bottom: 40px;
        opacity: 0.95;
        font-weight: 300;
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
        line-height: 1.6;
    }
    
    /* Bubbles buttons */
    .mi-bubbles-container {
        display: flex;
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 50px;
    }
    
    .mi-bubble {
        width: 140px;
        height: 140px;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: white;
        font-weight: bold;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        position: relative;
        overflow: hidden;
        box-shadow: 0 10px 10px rgba(0,0,0,0.2);
        border: 10px solid rgba(255,255,255,0.3);
    }
    
    .mi-bubble::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%);
        z-index: 1;
    }
    
    .mi-bubble-icon {
        font-size: 2.5rem;
        margin-bottom: 10px;
        z-index: 2;
    }
    
    .mi-bubble-text {
        font-size: 0.9rem;
        z-index: 2;
        text-align: center;
        padding: 0 10px;
    }
    
    .mi-bubble-1 {
		background: linear-gradient(135deg, var(--mi-light-orange), var(--mi-orange));
        animation: floatBubble 5s ease-in-out infinite;
		transform: translateY(-3px);
   		box-shadow: 0 5px 15px rgba(255, 69, 0, 0.35);
    }
    
    .mi-bubble-2 {
        background: linear-gradient(135deg, var(--mi-light-orange), var(--mi-orange));
        animation: floatBubble 5s ease-in-out infinite;
		transform: translateY(-3px);
   		box-shadow: 0 10px 25px rgba(255, 69, 0, 0.35);
    }
    
    .mi-bubble-3 {
        background: linear-gradient(135deg, var(--mi-light-orange), var(--mi-orange));
        animation: floatBubble 5s ease-in-out infinite;
		transform: translateY(-3px);
   		box-shadow: 0 10px 25px rgba(255, 69, 0, 0.35);
    }
    
    .mi-bubble-4 {
        background: linear-gradient(135deg, var(--mi-light-orange), var(--mi-orange));
        animation: floatBubble 5s ease-in-out infinite;
		transform: translateY(-3px);
   		box-shadow: 0 10px 25px rgba(255, 69, 0, 0.35);
    }
    
    @keyframes floatBubble {
        0%, 100% { transform: translateY(0) rotate(0deg); }
        50% { transform: translateY(-20px) rotate(5deg); }
    }
    
    .mi-bubble:hover {
        transform: scale(1.15) rotate(10deg);
        box-shadow: 0 15px 30px rgba(0,0,0,0.3);
        z-index: 10;
    }
    
    /* Logo Frame Tameng Kreatif */
    .mi-logo-masterpiece {
        display: flex;
        justify-content: center;
        margin: -80px 0 100px;
        position: relative;
        z-index: 10;
    }
    
    .mi-logo-artistic {
        width: 280px;
        height: 280px;
        background: linear-gradient(135deg, var(--mi-orange) 0%, var(--mi-light-orange) 30%, var(--mi-yellow) 70%, var(--mi-green) 100%);
        border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        box-shadow: 
            0 20px 40px rgba(0,0,0,0.15),
            inset 0 -10px 20px rgba(255,255,255,0.3),
            inset 0 10px 20px rgba(0,0,0,0.1);
        border: 8px solid white;
        overflow: hidden;
        animation: rotateLogo 20s linear infinite;
        transform-style: preserve-3d;
    }
    
    @keyframes rotateLogo {
        0% { transform: rotate(0deg) scale(1); }
        50% { transform: rotate(180deg) scale(1.05); }
        100% { transform: rotate(360deg) scale(1); }
    }
    
    .mi-logo-artistic::before {
        content: "";
        position: absolute;
        width: 240px;
        height: 240px;
        background: linear-gradient(135deg, var(--mi-green) 0%, var(--mi-light-green) 30%, rgba(255,255,255,0.8) 70%, var(--mi-blue) 100%);
        border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
        z-index: 1;
        box-shadow: inset 0 0 30px rgba(255,255,255,0.5);
    }
    
    .mi-logo-artistic::after {
        content: "";
        position: absolute;
        width: 220px;
        height: 220px;
        background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.3) 70%);
        border-radius: 50%;
        z-index: 2;
        opacity: 0.4;
    }
    
    .mi-logo-content {
        z-index: 3;
        color: white;
        font-weight: bold;
        text-align: center;
        padding: 20px;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        position: relative;
    }
    
    .mi-logo-main {
        font-size: 2.2rem;
        font-weight: 800;
        margin-bottom: 10px;
        background: linear-gradient(45deg, white, var(--mi-yellow));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    
    .mi-logo-sub {
        font-size: 1.2rem;
        opacity: 0.9;
        font-weight: 600;
    }
    
    .mi-logo-decoration {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 4;
    }
    
    .mi-logo-star {
        position: absolute;
        width: 20px;
        height: 20px;
        background: var(--mi-yellow);
        clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
        animation: twinkle 2s infinite alternate;
    }
    
    .mi-logo-star:nth-child(1) { top: 20px; left: 40px; animation-delay: 0s; }
    .mi-logo-star:nth-child(2) { top: 50px; right: 60px; animation-delay: 0.5s; }
    .mi-logo-star:nth-child(3) { bottom: 70px; left: 70px; animation-delay: 1s; }
    .mi-logo-star:nth-child(4) { bottom: 40px; right: 40px; animation-delay: 1.5s; }
    
    @keyframes twinkle {
        0% { opacity: 0.3; transform: scale(0.8); }
        100% { opacity: 1; transform: scale(1.2); }
    }
    
    /* Section Styles dengan bentuk kreatif */
    .mi-section {
        padding: 100px 0;
        position: relative;
    }
    
    .mi-section-title {
        text-align: center;
        margin-bottom: 70px;
        position: relative;
    }
    
    .mi-section-title h2 {
        font-size: 3.2rem;
        color: var(--mi-orange);
        font-weight: 800;
        display: inline-block;
        position: relative;
        padding: 0 20px;
        background: var(--mi-paper);
        z-index: 2;
    }
    
    .mi-section-title::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 300px;
        height: 300px;
        background: radial-gradient(circle, rgba(255, 107, 53, 0.1) 0%, transparent 70%);
        z-index: 1;
    }
    
    .mi-section-title::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, transparent, var(--mi-orange), var(--mi-green), transparent);
        z-index: 1;
    }
    
    /* Profil dalam bentuk timeline artistik */
    .mi-profil-timeline {
        max-width: 1000px;
        margin: 0 auto;
        position: relative;
        padding: 40px 0;
    }
    
    .mi-profil-timeline::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 4px;
        background: linear-gradient(to bottom, var(--mi-orange), var(--mi-green));
        transform: translateX(-50%);
        border-radius: 2px;
    }
    
    .mi-timeline-item {
        display: flex;
        margin-bottom: 80px;
        position: relative;
    }
    
    .mi-timeline-item:nth-child(odd) {
        flex-direction: row-reverse;
    }
    
    .mi-timeline-dot {
        position: absolute;
        left: 50%;
        top: 30px;
        width: 30px;
        height: 30px;
        background: linear-gradient(135deg, var(--mi-green), var(--mi-blue));
        border-radius: 50%;
        transform: translateX(-50%);
        z-index: 2;
        border: 4px solid var(--mi-paper);
        box-shadow: 0 0 0 4px var(--mi-orange);
        animation: pulse 2s infinite;
    }
    
    @keyframes pulse {
        0% { box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.7); }
        70% { box-shadow: 0 0 0 15px rgba(255, 107, 53, 0); }
        100% { box-shadow: 0 0 0 0 rgba(255, 107, 53, 0); }
    }
    
    .mi-timeline-content {
        width: calc(50% - 60px);
        background: white;
        border-radius: 20px;
        padding: 30px;
        box-shadow: 0 15px 35px rgba(0,0,0,0.1);
        position: relative;
        transition: all 0.4s ease;
        border-top: 8px solid var(--mi-orange);
    }
    
    .mi-timeline-item:nth-child(even) .mi-timeline-content {
        margin-left: 60px;
        border-top-color: var(--mi-green);
    }
    
    .mi-timeline-item:nth-child(odd) .mi-timeline-content {
        margin-right: 60px;
        border-top-color: var(--mi-blue);
    }
    
    .mi-timeline-content:hover {
        transform: translateY(-10px);
        box-shadow: 0 25px 50px rgba(0,0,0,0.15);
    }
    
    .mi-timeline-icon {
        width: 70px;
        height: 70px;
        background: linear-gradient(135deg, var(--mi-orange), var(--mi-yellow));
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        color: white;
        margin-bottom: 20px;
        position: absolute;
        top: -35px;
        right: 30px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }
    
    .mi-timeline-item:nth-child(even) .mi-timeline-icon {
        background: linear-gradient(135deg, var(--mi-green), var(--mi-blue));
        left: 30px;
        right: auto;
    }
    
    .mi-timeline-content h3 {
        font-size: 1.8rem;
        color: var(--mi-orange);
        margin-bottom: 15px;
        padding-right: 80px;
    }
    
    .mi-timeline-item:nth-child(even) .mi-timeline-content h3 {
        padding-right: 0;
        padding-left: 80px;
        color: var(--mi-green);
    }
    
    /* Galeri Kreatif */
    .mi-gallery-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }
    
    .mi-gallery-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 25px;
        perspective: 1000px;
    }
    
    .mi-gallery-item {
        height: 280px;
        border-radius: 20px;
        overflow: hidden;
        position: relative;
        cursor: pointer;
        transform-style: preserve-3d;
        transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }
    
    .mi-gallery-item:hover {
        transform: rotateY(10deg) rotateX(5deg) translateY(-15px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    }
    
    .mi-gallery-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.8s ease;
    }
    
    .mi-gallery-item:hover .mi-gallery-image {
        transform: scale(1.1);
    }
    
    .mi-gallery-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
        color: white;
        padding: 30px 20px 20px;
        transform: translateY(100%);
        transition: transform 0.4s ease;
    }
    
    .mi-gallery-item:hover .mi-gallery-overlay {
        transform: translateY(0);
    }
    
    .mi-gallery-overlay h4 {
        font-size: 1.3rem;
        margin-bottom: 10px;
    }
    
    /* Prestasi dalam bentuk medal kreatif */
    .mi-achievement-wall {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 40px;
        max-width: 1200px;
        margin: 0 auto;
    }
    
    .mi-medal {
        width: 220px;
        height: 220px;
        position: relative;
        animation: swing 6s ease-in-out infinite;
        animation-delay: calc(var(--i) * 0.5s);
    }
    
    @keyframes swing {
        0%, 100% { transform: rotate(-5deg) translateY(0); }
        50% { transform: rotate(5deg) translateY(-15px); }
    }
    
    .mi-medal-circle {
        width: 100%;
        height: 100%;
        background: radial-gradient(circle at 30% 30%, var(--mi-yellow) 0%, var(--mi-orange) 100%);
        border-radius: 50%;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        border: 8px solid white;
    }
    
    .mi-medal-circle::before {
        content: "";
        position: absolute;
        width: 90%;
        height: 90%;
        border-radius: 50%;
        background: radial-gradient(circle at 70% 30%, var(--mi-green) 0%, var(--mi-blue) 100%);
        box-shadow: inset 0 0 20px rgba(255,255,255,0.5);
    }
    
    .mi-medal-content {
        position: relative;
        z-index: 2;
        color: white;
        text-align: center;
        padding: 20px;
        text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    }
    
    .mi-medal-ribbon {
        position: absolute;
        top: -20px;
        width: 60px;
        height: 100px;
        background: linear-gradient(45deg, var(--mi-green), var(--mi-blue));
        clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
        left: 50%;
        transform: translateX(-50%);
    }
    
    /* Floating Elements */
    .mi-floating-elements {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        pointer-events: none;
        z-index: 1;
        overflow: hidden;
    }
    
    .mi-floating-element {
        position: absolute;
        opacity: 0.1;
        animation: floatAround 20s infinite linear;
    }
    
    @keyframes floatAround {
        0% { transform: translate(0, 0) rotate(0deg); }
        25% { transform: translate(100px, 100px) rotate(90deg); }
        50% { transform: translate(0, 200px) rotate(180deg); }
        75% { transform: translate(-100px, 100px) rotate(270deg); }
        100% { transform: translate(0, 0) rotate(360deg); }
    }
    
    .mi-floating-circle {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: var(--mi-orange);
    }
    
    .mi-floating-triangle {
        width: 0;
        height: 0;
        border-left: 40px solid transparent;
        border-right: 40px solid transparent;
        border-bottom: 70px solid var(--mi-green);
    }
    
    /* Responsive */
    @media (max-width: 1100px) {
        .mi-profil-timeline::before {
            left: 30px;
        }
        
        .mi-timeline-item,
        .mi-timeline-item:nth-child(odd) {
            flex-direction: row;
        }
        
        .mi-timeline-content {
            width: calc(100% - 100px);
            margin-left: 100px !important;
            margin-right: 0 !important;
        }
        
        .mi-timeline-dot {
            left: 30px;
        }
        
        .mi-timeline-icon {
            left: 30px !important;
            right: auto !important;
        }
        
        .mi-timeline-content h3 {
            padding-left: 80px !important;
            padding-right: 0 !important;
        }
    }
    
    @media (max-width: 768px) {
        .mi-jumbotron h1 {
            font-size: 2.8rem;
        }
        
        .mi-jumbotron p {
            font-size: 1.4rem;
        }
        
        .mi-bubble {
            width: 120px;
            height: 120px;
        }
        
        .mi-logo-artistic {
            width: 220px;
            height: 220px;
        }
        
        .mi-logo-artistic::before {
            width: 180px;
            height: 180px;
        }
        
        .mi-section-title h2 {
            font-size: 2.5rem;
        }
        
        .mi-gallery-grid {
            grid-template-columns: 1fr;
        }
        
        .mi-achievement-wall {
            gap: 20px;
        }
        
        .mi-medal {
            width: 180px;
            height: 180px;
        }
    }
    
    @media (max-width: 480px) {
        .mi-jumbotron {
            padding: 80px 0 120px;
        }
        
        .mi-bubbles-container {
            gap: 10px;
        }
        
        .mi-bubble {
            width: 100px;
            height: 100px;
        }
        
        .mi-bubble-icon {
            font-size: 2rem;
        }
        
        .mi-bubble-text {
            font-size: 0.8rem;
        }
    }