:root {

    --primary-color: #4A90E2;

    --secondary-color: #FFD166;

    --accent-color: #50E3C2;

    --text-color: #333;

    --bg-color: #F8F9FA;

    --font-heading: 'Fredoka One', cursive;

    --font-body: 'Nunito', sans-serif;

}



/* --- EFEK MERIAH BARU: Hujan Konfeti --- */

body::before {

    content: '';

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    /* PERBAIKAN: Anda kekurangan background-image. Ganti path ini! 

    */

    background-image: url('https://www.kodingmu.id/images/confetti.png'); /* <-- GANTI INI JIKA PERLU */

    background-size: 500px, 500px;

    animation: confetti-fall 20s linear infinite;

    z-index: -1;

    opacity: 0.5;

    pointer-events: none; /* Pastikan tidak menghalangi klik */

}



/* Custom Scrollbar & Smooth Scroll */

::-webkit-scrollbar { width: 10px; }

::-webkit-scrollbar-track { background: #f1f1f1; }

::-webkit-scrollbar-thumb { background: var(--accent-color); border-radius: 10px; }

::-webkit-scrollbar-thumb:hover { background: var(--primary-color); }

html { scroll-behavior: smooth; }



body {

    font-family: var(--font-body);

    margin: 0;

    color: var(--text-color);

    background-color: var(--bg-color);

    overflow-x: hidden;

    cursor: none; /* Sembunyikan kursor asli untuk diganti kustom */

}



/* Custom Cursor */

.cursor-dot, .cursor-outline {

    pointer-events: none;

    position: fixed;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    z-index: 9999;

    opacity: 0;

    transition: opacity 0.3s ease-in-out, transform 0.1s linear; /* Buat lebih responsif */
 transform: translate(-50%, -50%);

}

.cursor-dot { 

    width: 8px; 

    height: 8px; 

    background-color: var(--secondary-color); 

    transition: opacity 0.3s ease-in-out, transform 0s linear; /* Dot bergerak instan */
 transform: translate(-50%, -50%);

}

.cursor-outline { 

    width: 40px; 

    height: 40px; 

    border: 2px solid var(--secondary-color); 
 transform: translate(-50%, -50%);

}

/* Efek hover kursor */

body.link-hovered .cursor-outline {

    transform: translate(-50%, -50%) scale(1.5);

    opacity: 0.5;

}

body.link-hovered .cursor-dot {

    opacity: 0;

}





.container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px;

}



/* Header */

header {

    background: rgba(255, 255, 255, 0.8);

    backdrop-filter: blur(10px);

    box-shadow: 0 2px 4px rgba(0,0,0,0.1);

    padding: 10px 0;

    position: sticky;

    top: 0;

    z-index: 1000;

}

header .container { display: flex; justify-content: space-between; align-items: center; }

.logo { display: flex; align-items: center; }

.logo img { width: 50px; height: 50px; margin-right: 15px; animation: bounce 2s infinite; }

.logo h1 { font-family: var(--font-heading); color: var(--primary-color); margin: 0; font-size: 24px; }

nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 15px; }

nav li { margin-left: 15px; } /* Kurangi margin kiri karena ada gap */

nav a { text-decoration: none; color: var(--primary-color); font-weight: 700; font-size: 18px; transition: color 0.3s ease; }

nav a:hover { color: var(--secondary-color); }



/* Skor Pengguna & Tombol Logout (dari index.php) */

.user-score { 

    display: flex; 

    align-items: center; 

    background-color: #FFD166; 

    color: #5d4000; 

    padding: 5px 12px; 

    border-radius: 20px; 

    font-weight: 700; 

    font-size: 16px; 

}

.user-score i { margin-right: 8px; color: white; font-size: 1.1em; }

.hero-actions { display: flex; gap: 15px; align-items: center; }

.logout-button { display: inline-block; padding: 10px 20px; background-color: #ff5d6c; color: white; border-radius: 50px; text-decoration: none; font-weight: 700; transition: background-color 0.3s, transform 0.2s; }

.logout-button:hover { background-color: #e04856; transform: scale(1.05); }





/* Hero Section */

.hero {

    background: linear-gradient(135deg, #6e8efb, #a777e3, #50E3C2, #4A90E2);

    background-size: 400% 400%;

    color: white;

    padding: 80px 0;

    text-align: left;

    position: relative;

    overflow: hidden;

    animation: gradientBG 15s ease infinite;

}

.hero-content { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 2; }

.hero-text { max-width: 50%; animation: slideInUp 1s ease-out; }

.hero-text h2 { font-family: var(--font-heading); font-size: 52px; margin-bottom: 20px; text-shadow: 0 2px 4px rgba(0,0,0,0.2); }

.hero-text p { font-size: 20px; margin-bottom: 30px; }



/* --- CSS SLIDESHOW DIGABUNGKAN --- */

.hero-image {

    width: 450px; /* Ukuran dari CSS Anda */

    animation: float 3s ease-in-out infinite; /* Animasi float dari CSS Anda */

    z-index: 1; 

    display: grid; /* Teknik untuk menumpuk gambar */

    position: relative; 

}

.hero-image img.hero-slide {

    grid-area: 1 / 1; /* Tumpuk semua gambar di sel grid yang sama */

    width: 100%; /* Penuhi container .hero-image */

    height: auto; 

    object-fit: contain;

    opacity: 0;

    transition: opacity 1s ease-in-out; /* Efek fade 1 detik */

}

.hero-image img.hero-slide.active {

    opacity: 1; /* Tampilkan gambar yang aktif */

}

/* --- AKHIR CSS SLIDESHOW --- */





.cta-button {

    background-color: var(--secondary-color);

    color: var(--text-color);

    padding: 15px 30px;

    text-decoration: none;

    font-family: var(--font-heading);

    font-size: 22px;

    border-radius: 50px;

    box-shadow: 0 4px 10px rgba(0,0,0,0.2);

    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s;

    border: 3px solid #fff;

}

.cta-button:hover {

    transform: scale(1.15) rotate(-8deg);

    box-shadow: 0 8px 20px rgba(0,0,0,0.3);

}



/* Banner Aktivitas (dari index.php) */

.activity-section {

    padding: 18px 0;

    background-color: #fff;

    color: var(--text-color);

    overflow: hidden;

    box-shadow: 0 2px 10px rgba(0,0,0,0.05);

    border-top: 1px solid #eee;

    border-bottom: 1px solid #eee;

}

.activity-marquee {

    width: 100%;

    overflow: hidden;

    white-space: nowrap;

}

.marquee-content {

    display: inline-block;

    animation: scroll-left 60s linear infinite;

    will-change: transform; /* Optimasi animasi */

}

.marquee-item {

    display: inline-flex;

    align-items: center;

    margin: 0 25px;

    font-size: 16px;

    font-family: var(--font-body);

}

.marquee-item i {

    margin-right: 10px;

    font-size: 1.2em;

    color: var(--accent-color);

}

.marquee-item strong {

    font-weight: 700;

    color: var(--primary-color);

    margin-right: 5px;

}

.marquee-item .time-ago {

    color: #6c757d;

    font-size: 0.9em;

    margin-left: 8px;

}





/* --- EFEK MERIAH BARU: Teks Pelangi Berkilau --- */

h2.section-title {

    font-family: var(--font-heading);

    font-size: 42px;

    text-align: center;

    margin-bottom: 60px;

    background: linear-gradient(90deg, #ff7e5f, #feb47b, #ffeb3b, #86e3ce, #d16ba5, #86A8E7, #5FFBF1);

    background-size: 200% 200%;

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    animation: rainbow-text 5s ease infinite;

}



/* About Section */

.about { padding: 80px 0; text-align: center; }

.features { display: flex; justify-content: space-around; gap: 30px; }

.feature-item { background: white; padding: 30px; border-radius: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); width: 30%; transition: transform 0.3s ease, box-shadow 0.3s ease; }

.feature-item:hover { transform: translateY(-15px) scale(1.05); box-shadow: 0 15px 30px rgba(0,0,0,0.15); }

.feature-item img { width: 80px; margin-bottom: 20px; }

.feature-item h3 { font-family: var(--font-heading); color: var(--primary-color); font-size: 24px; }



/* Levels Section */

.levels { 

    padding: 80px 0; 

    background-color: #EBF5FF; 

    position: relative; 

    overflow: hidden; /* Tambahkan baris ini */

}

.level-map { position: relative; max-width: 800px; margin: 0 auto; }

.level-map::before { content: ''; position: absolute; width: 6px; background-image: linear-gradient(var(--accent-color) 40%, rgba(255,255,255,0) 0%); background-position: left; background-size: 100% 20px; background-repeat: repeat-y; left: 50%; top: 0; bottom: 0; margin-left: -3px; z-index: 0; }

.level-item { padding: 20px 30px; background-color: white; position: relative; width: 40%; border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); display: flex; align-items: center; margin-bottom: 50px; transition: transform 0.3s ease; }

.level-item:nth-child(odd) { left: -5%; }

.level-item:nth-child(even) { left: 65%; }

.level-item:hover { transform: scale(1.1); z-index: 2; }

.level-item::after { content: " "; position: absolute; top: 28px; width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; }

.level-item:nth-child(odd)::after { right: -15px; border-left: 15px solid white; }

.level-item:nth-child(even)::after { left: -15px; border-right: 15px solid white; }



.level-icon {

    width: 60px;

    height: 60px;

    background-color: var(--secondary-color);

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align: center;

    font-family: var(--font-heading);

    font-size: 28px;

    color: white;

    margin-right: 20px;

    flex-shrink: 0;

    border: 4px solid white;

    box-shadow: 0 0 0 4px var(--secondary-color);

    animation: pulse-glow 2s infinite;

}

.level-info h4 { margin: 0 0 5px 0; font-family: var(--font-heading); color: var(--primary-color); }

.level-info p { margin: 0; }



/* Footer */

footer { background-color: var(--primary-color); color: white; text-align: center; padding: 20px 0; }



/* Keyframe Animations */

@keyframes bounce { 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 40% {transform: translateY(-20px);} 60% {transform: translateY(-10px);} }

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

@keyframes slideInUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } }

@keyframes gradientBG { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }



/* Animasi Banner Aktivitas */

@keyframes scroll-left {

    0% { transform: translateX(0); }

    100% { transform: translateX(-50%); }

}



/* --- EFEK MERIAH BARU: Keyframes --- */

@keyframes confetti-fall {

    0% { transform: translateY(-100%) rotate(0deg); }

    100% { transform: translateY(100vh) rotate(360deg); } /* Jatuh sampai dasar */

}



@keyframes rainbow-text {

    0% { background-position: 0% 50%; }

    50% { background-position: 100% 50%; }

    100% { background-position: 0% 50%; }

}



@keyframes pulse-glow {

    0% { box-shadow: 0 0 0 4px var(--secondary-color), 0 0 0 8px rgba(255, 209, 102, 0.5); }

    50% { box-shadow: 0 0 0 8px var(--secondary-color), 0 0 0 16px rgba(255, 209, 102, 0); }

    100% { box-shadow: 0 0 0 4px var(--secondary-color), 0 0 0 8px rgba(255, 209, 102, 0.5); }

}



/* Testimonials Section */

.testimonials-section {

    padding: 80px 0;

    background-color: var(--bg-color); /* Warna latar yang sama dengan body */

}



.testimonial-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 30px;

    margin-top: 40px;

}



.testimonial-card {

    background: white;

    padding: 30px;

    border-radius: 20px;

    box-shadow: 0 4px 15px rgba(0,0,0,0.08);

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.testimonial-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 10px 25px rgba(0,0,0,0.12);

}



.testimonial-card .rating-stars {

    color: var(--secondary-color); /* Warna kuning dari variabel Anda */

    font-size: 1.2em;

    margin-bottom: 15px;

}



.testimonial-card blockquote {

    font-size: 1.1em;

    line-height: 1.6;

    margin: 0 0 20px 0;

    font-style: italic;

    color: #555;

    flex-grow: 1; /* Membuat blockquote mengisi ruang yang tersedia */

}



.testimonial-author {

    display: flex;

    align-items: center;

    margin-top: auto; /* Mendorong author ke bagian bawah kartu */

}



.author-avatar img {

    width: 50px;

    height: 50px;

    border-radius: 50%;

    object-fit: cover;

    margin-right: 15px;

    border: 3px solid var(--accent-color);

}



.author-name {

    font-weight: 700;

    color: var(--primary-color);

}

/* =============================================== */

/* ============== MEDIA QUERIES ================== */

/* =============================================== */

/* PERBAIKAN: Blok @media ini sebelumnya bersarang secara tidak benar. */

/* Sekarang sudah diletakkan di luar. */



/* Untuk Tablet dan Perangkat Seluler Besar (max-width: 992px) */

@media (max-width: 992px) {

    .hero-text h2 {

        font-size: 40px;

    }

    .hero-image {

        width: 350px; /* Sesuaikan ukuran container slideshow */

    }

    .features {

        flex-wrap: wrap;

    }

    .feature-item {

        width: 45%;

        margin-bottom: 20px;

    }

}





/* Untuk Perangkat Seluler (max-width: 768px) */

@media (max-width: 768px) {

    body {

        cursor: auto; /* Kembalikan cursor default di mobile */

    }

    .cursor-dot, .cursor-outline {

        display: none; /* Sembunyikan custom cursor */

    }

    

    header .container {

        flex-direction: column;

        gap: 10px;

    }

    nav {

        margin-top: 10px;

        width: 100%;

        overflow-x: auto; /* Izinkan scroll horizontal jika menu terlalu panjang */

    }

    nav ul {

        justify-content: center;

    }

    nav li {

        margin: 0 10px;

    }



    .hero-content {

        flex-direction: column;

        text-align: center;

    }



    .hero-text {

        max-width: 100%;

        order: 2; /* Pindahkan teks di bawah gambar */

    }



    .hero-text h2 {

        font-size: 32px;

    }

    .hero-text p {

        font-size: 18px;

    }



    .hero-image {

        order: 1; /* Pindahkan gambar ke atas */

        width: 80%; /* Sesuaikan container slideshow */

        max-width: 300px;

        margin-bottom: 30px;

        animation: none; /* Matikan animasi float di mobile */

    }



    .features {

        flex-direction: column;

        align-items: center;

    }



    .feature-item {

        width: 80%;

    }

    

    h2.section-title {

        font-size: 36px;

    }



    .level-map::before {

        left: 30px; 

    }



    .level-item {

        width: calc(100% - 50px); /* Sesuaikan lebar */

        left: 50px !important; 

        padding-left: 20px;

    }



     .level-item:nth-child(even) {

        left: 50px !important;

    }



    .level-item::after {

        left: -15px; 

        border-right: 15px solid white;

        border-left: 0;

    }



    .level-item:nth-child(odd)::after {

         right: auto;

         left: -15px;

         border-right: 15px solid white;

         border-left: 0;

    }

}



/* style.css */



/* ... (tambahkan di sebelum @media) ... */



/* Statistik di Hero Section */

.hero-stats {

    display: flex;

    flex-wrap: wrap; /* Agar rapi di layar kecil */

    gap: 10px;

    margin-top: 30px; /* Jarak dari tombol */

    padding: 15px;

    background-color: rgba(255, 255, 255, 0.2); /* Latar transparan */

    border-radius: 12px;

    backdrop-filter: blur(5px); /* Efek 'glass' */

}



.stat-item {

    flex: 1; /* Agar setiap item sama lebarnya */

    min-width: 90px; /* Lebar minimum sebelum 'wrap' */

    text-align: center;

    color: white;

}



.stat-item strong {

    display: block;

    font-family: var(--font-heading); /* Menggunakan font 'Fredoka One' */

    font-size: 28px;

    line-height: 1.2;

    text-shadow: 0 1px 3px rgba(0,0,0,0.2);

}



.stat-item span {

    font-size: 14px;

    font-weight: 600;

    opacity: 0.9;

}