/* --- 1. RESET & VARIABLE --- */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@600;700&display=swap');
:root {
    /* Backgrounds: Deep Navy / Space Blue dari Poster */
    --bg-deep: #050B1A; 
    --card-bg: rgba(15, 30, 70, 0.4); /* Kaca gelap transparan */
    --border-color: rgba(0, 229, 255, 0.2); /* Garis tepi Cyan samar */
    
    /* Blues & Cyans (Neon/Tech Accent) */
    --blue-dark: #F1F5F9;   /* Dibalik menjadi putih terang untuk judul di latar gelap */
    --blue-mid: #3B82F6;    /* Biru standar poster */
    --blue-bright: #00E5FF; /* Cyan Neon bercahaya (Aksen Utama) */
    --blue-light: #7DD3FC;  /* Biru muda lembut */
    
    --cyan-mid: #06B6D4;
    --cyan-light: #67E8F9;
    
    /* Greens untuk aksen tertentu */
    --green-neon: #10B981;  
    --green-pale: #34D399;  
    
    /* Grays (Warna Teks untuk Dark Mode) */
    --text-main: #F8FAFC;   /* Putih untuk teks paragraf */
    --text-muted: #94A3B8;  /* Abu-abu kebiruan untuk subtitle */
    
    --blur-val: 8px;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    
    background-image: url('assets/bg-pattern.png'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    opacity: 0.12; 

    z-index: -1;
    pointer-events: none;
    will-change: transform;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

body {
    background-color: var(--bg-deep);
    color: var(--text-main);
    overflow-x: hidden;
    
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(0, 229, 255, 0.05), transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(37, 99, 235, 0.08), transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(15, 30, 70, 0.5), transparent 60%);
    background-attachment: fixed;
}

a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style: none; }

/* --- 2. COMPONENT UTILITIES --- */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.btn {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Tombol Bercahaya */
.btn-primary {
    background: linear-gradient(135deg, var(--blue-mid), var(--blue-bright));
    color: #050B1A;
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.4);
    border: none;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(0, 229, 255, 0.6);
}

.btn-glass {
    background: rgba(0, 229, 255, 0.05);
    border: 1px solid var(--blue-bright);
    color: var(--blue-bright);
}

.btn-glass:hover {
    background: var(--blue-bright);
    color: #050B1A;
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.4);
}

/* Glassmorphism Dark Mode */
.glass-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    backdrop-filter: blur(var(--blur-val));
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(0, 229, 255, 0.02); 
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.glass-card:hover {
    border-color: rgba(0, 229, 255, 0.5);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 229, 255, 0.15);
}

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* --- 3. NAVBAR (EFEK MELAYANG DARK MODE) --- */
nav {
    position: fixed;
    top: 0;
    left: 50%; 
    transform: translateX(-50%); 
    width: 100%;
    z-index: 100;
    padding: 15px 0;
    background: rgba(5, 11, 26, 0.85); /* Gelap transparan */
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-color);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
}

nav.scrolled {
    top: 20px; 
    width: 90%; 
    max-width: 1100px;
    border-radius: 50px; 
    padding: 12px 30px; 
    background: rgba(10, 20, 45, 0.95);
    border: 1px solid var(--blue-bright);
    border-bottom: 1px solid var(--blue-bright);
    box-shadow: 0 10px 30px rgba(0, 229, 255, 0.15); 
}

nav.scrolled .container { padding: 0; }

.nav-content { display: flex; justify-content: space-between; align-items: center; position: relative; }
.nav-left { display: flex; justify-content: flex-start; z-index: 101; }
.logo-link { display: flex; align-items: center; height: 100%; }
.logo-img { height: 45px; width: auto; object-fit: contain; transition: transform 0.3s ease; }
.logo-link:hover .logo-img { transform: scale(1.05); }
.nav-links { display: flex; justify-content: center; gap: 30px; color: var(--text-main); font-weight: 600; }
.nav-links a:hover { color: var(--blue-bright); text-shadow: 0 0 8px rgba(0, 229, 255, 0.5); }

.nav-menu { display: flex; align-items: center; gap: 30px; }
.nav-links { display: flex; justify-content: center; gap: 30px; color: var(--text-main); font-weight: 600; }
.nav-links a:hover { color: var(--blue-bright); text-shadow: 0 0 8px rgba(0, 229, 255, 0.5); }
.nav-actions { display: flex; justify-content: flex-end; gap: 15px; align-items: center; }
.btn-sm { padding: 8px 20px; font-size: 0.9rem; display: flex; align-items: center; gap: 8px; white-space: nowrap; }

.nav-actions { display: flex; justify-content: flex-end; gap: 15px; align-items: center; }
.btn-sm { padding: 8px 20px; font-size: 0.9rem; display: flex; align-items: center; gap: 8px; white-space: nowrap; }

.hamburger {
    display: none;
    background: transparent;
    border: none;
    color: var(--text-main);
    cursor: pointer;
    z-index: 101;
}

/* --- RESPONSIVITAS NAVBAR UNTUK HP --- */
@media (max-width: 992px) {
    .hamburger { 
        display: block; 
    }
    

    .nav-menu {
        position: absolute;
        top: 75px;
        left: 0;
        right: 0;
        background: rgba(10, 20, 45, 0.95);
        backdrop-filter: blur(15px);
        border: 1px solid var(--blue-bright);
        border-radius: 20px;
        flex-direction: column;
        padding: 30px 25px;
        gap: 25px;
        box-shadow: 0 10px 30px rgba(0, 229, 255, 0.15);
        
        opacity: 0;
        visibility: hidden;
        transform: translateY(-20px);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }


    .nav-menu.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .nav-links { flex-direction: column; align-items: center; gap: 20px; width: 100%; }
    .nav-actions { flex-direction: column; width: 100%; gap: 15px; }
    .nav-actions .btn-sm { width: 100%; justify-content: center; }
    .btn-theme { margin: 0 auto; }
}

/* --- PENYESUAIAN MENU HP UNTUK LIGHT MODE --- */
@media (max-width: 992px) {
    body.light-mode .nav-menu {
        background: rgba(255, 255, 255, 0.95);
        border: 1px solid rgba(15, 23, 42, 0.1);
        box-shadow: 0 15px 35px rgba(15, 23, 42, 0.08);
    }
    body.light-mode .hamburger {
        color: var(--text-main);
    }
}

/* --- 4. HERO SECTION --- */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 130px;
}

.badge {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid var(--blue-bright);
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 25px;
    background: rgba(0, 229, 255, 0.1);
    color: var(--blue-bright);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.2);
}

.hero-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 5.5rem;
    line-height: 1.1;
    margin-bottom: 15px;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    /* Gradasi Biru ke Putih Bercahaya */
    background: linear-gradient(135deg, #FFFFFF 0%, #7DD3FC 50%, #00E5FF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 15px rgba(0, 229, 255, 0.3));
}

.hero-subtitle {
    font-family: 'Poppins', sans-serif;
    font-size: 1.15rem;
    color: var(--blue-bright);
    margin-bottom: 25px;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.hero-theme {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.4rem; 
    line-height: 1.5;
    font-weight: 700;
    color: var(--text-main); 
    max-width: 850px; 
    margin: 0 auto; 
}

/* --- ORGANIZER LOGOS SECTION --- */
.organizer-section { width: 100%; max-width: 1100px; margin: 0 auto 40px auto; }
.organizer-logos { display: flex; justify-content: center; align-items: center; gap: 30px; flex-wrap: nowrap; margin-bottom: 25px; }
.org-logo-group { display: flex; align-items: center; gap: 20px; }
.org-logo-link { display: flex; align-items: center; transition: transform 0.3s ease; cursor: pointer; }
.org-logo-link:hover { transform: scale(1.08); }
.org-img { height: 75px; width: auto; object-fit: contain; }

.org-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 0.75rem; 
    color: var(--text-muted);
    line-height: 1.4;
    text-transform: uppercase;
    white-space: nowrap; 
    text-align: left;
}
.org-text span, .org-text .bold-text { color: var(--blue-bright) !important; font-weight: 700; }
.org-divider { width: 1px; height: 75px; background-color: var(--border-color); }
.presents-divider { width: 100%; border-bottom: 1px dashed var(--border-color); margin-top: 10px; }

/* --- 4.5 TENTANG SECTION --- */
.about-desc {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--text-main);
    font-weight: 500;
    max-width: 900px;
    margin: 30px auto 0 auto;
    text-align: center;
}

/* --- 4.6 DOKUMENTASI --- */
.gallery-rel-container { position: relative; width: 100%; display: flex; align-items: center; }
.gallery-wrapper {
    width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    scrollbar-width: none; scroll-padding-left: 60px; scroll-padding-right: 60px;
}
.gallery-wrapper::-webkit-scrollbar { display: none; }
.gallery-track { display: flex; gap: 25px; min-width: max-content; padding: 15px 60px; }
.gallery-card { display: flex; flex-direction: row; align-items: center; width: 460px; padding: 15px; gap: 20px; scroll-snap-align: start; }
.gallery-img-box { width: 250px; height: 160px; border-radius: 12px; overflow: hidden; flex-shrink: 0; box-shadow: 0 4px 15px rgba(0,0,0,0.5); }
.gallery-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.gallery-card:hover .gallery-img { transform: scale(1.08); }
.gallery-info { display: flex; flex-direction: column; justify-content: center; border-left: 1px dashed var(--border-color); padding-left: 20px; height: 80%; }
.gallery-title { font-family: 'Poppins', sans-serif; font-size: 0.8rem; font-weight: 700; color: var(--blue-bright); margin-bottom: 5px; text-transform: uppercase; }
.gallery-desc { font-size: 1rem; color: var(--text-main); font-weight: 700; margin-bottom: 12px; line-height: 1.3; }
.gallery-date { font-size: 0.75rem; color: var(--text-muted); font-weight: 700; letter-spacing: 0.5px; }

/* Tombol Navigasi Galeri */
.gallery-nav-btn {
    position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%;
    background: var(--bg-deep); border: 1px solid var(--blue-bright); color: var(--blue-bright);
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.2); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; transition: all 0.3s ease;
}
.gallery-nav-btn:hover { background: var(--blue-bright); color: #000; box-shadow: 0 0 20px rgba(0, 229, 255, 0.5); }
.gallery-nav-btn.prev-btn { left: -23px; }
.gallery-nav-btn.next-btn { right: -23px; }

/* --- 5. INFORMASI PENDAFTARAN SECTION --- */
.reg-container { padding: 40px; border-top: 4px solid var(--blue-bright); box-shadow: 0 -10px 20px rgba(0, 229, 255, 0.05); }
.reg-grid { display: flex; gap: 40px; }
.reg-card { flex: 1; display: flex; flex-direction: column; }
.reg-divider { width: 1px; border-left: 1px dashed var(--blue-bright); opacity: 0.5; }
.reg-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 5px; }
.reg-title { font-family: 'Poppins', sans-serif; font-size: 1.8rem; color: var(--text-main); font-weight: 700; }
.reg-price { font-size: 1.5rem; font-weight: 800; color: var(--blue-bright); }
.reg-date { font-size: 0.95rem; color: var(--blue-light); margin-bottom: 20px; font-weight: 600; }
.reg-waves { list-style: none; margin-bottom: 20px; }
.reg-waves li { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border-color); color: var(--text-main); }
.reg-waves li small { color: var(--text-muted); font-size: 0.8rem; display: block; margin-top: 4px; }
.reg-waves li strong { font-size: 1.1rem; color: var(--blue-bright); text-shadow: 0 0 5px rgba(0, 229, 255, 0.3); }
.reg-spacer { flex-grow: 1; min-height: 30px; }
.reg-action { text-align: right; }

.btn-reg { display: inline-block; padding: 10px 24px; border-radius: 8px; font-size: 0.9rem; font-weight: 600; transition: all 0.3s ease; }
.btn-reg-disabled { background: rgba(255, 255, 255, 0.05); color: #475569; border: 1px solid #334155; cursor: not-allowed; pointer-events: none; }
.btn-reg-primary { background: var(--blue-bright); color: #000; box-shadow: 0 0 10px rgba(0, 229, 255, 0.4); border: 1px solid var(--blue-bright); }
.btn-reg-primary:hover { background: #00B8D4; box-shadow: 0 0 20px rgba(0, 229, 255, 0.6); border-color: #00B8D4; }

/* --- ALUR PENDAFTARAN --- */
.alur-container { margin-top: 60px; }
.alur-title { text-align: center; font-size: 1.8rem; font-family: 'Poppins', sans-serif; color: var(--text-main); margin-bottom: 35px; font-weight: 700; }
.alur-title span { color: var(--blue-bright); text-shadow: 0 0 10px rgba(0,229,255,0.4); }
.alur-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }


.alur-step {
    display: flex;
    flex-direction: row; 
    align-items: center; 
    gap: 10px; 

    padding: 25px 25px 20px 15px; 

    height: 135px; 
    width: 100%;
    
    position: relative;
    transition: transform 0.3s ease, filter 0.3s ease;
    
    background-image: url('assets/frame.png'); 
    background-size: 100% 100%; 
    background-position: center;
    background-repeat: no-repeat;
    
    background-color: transparent; 
    border: none;
    border-radius: 0; 
    box-shadow: none; 
}

.alur-step:hover {
    transform: translateY(-5px);
    filter: drop-shadow(0 10px 20px rgba(0, 229, 255, 0.4)); 
}

.alur-step::after { display: none; }


.step-num {
    font-size: 3.2rem; 
    font-weight: 700; 
    font-family: 'Fredoka', sans-serif;
    line-height: 1;
    margin-bottom: 0;
    box-shadow: none;
    width: 48px; 
    text-align: center;
    flex-shrink: 0; 
    position: relative; 
    z-index: 3;


    background-image: radial-gradient(circle at 0% 0%, rgba(0, 0, 0, 0.09), #082eb3, #01138a, #009dfd, #000000, #01138a, #9bd6fa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


.alur-step p { 
    /* KUNCI 4: Font dikecilkan menjadi 0.65rem */
    font-size: 0.65rem; 
    color: #050B1A; 
    line-height: 1.3; 
    margin: 0; 
    font-weight: 700; 
    text-align: left; 
    position: relative; 
    z-index: 2;
    width: 100%;
}

.alur-step p strong { 
    color: #000000; 
    word-wrap: break-word; 
    word-break: break-word; 
    font-weight: 900; 
}

.alur-step p em { 
    color: #1E293B; 
}

/* --- RESPONSIVITAS ALUR PENDAFTARAN --- */
@media (max-width: 992px) {
    .alur-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .alur-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }

    .alur-step { 
        height: 120px; 
        padding: 20px 15px 15px 10px; 
        gap: 8px; 
    } 
    .step-num { font-size: 2.5rem; width: 35px; }
    .alur-step p { font-size: 0.6rem; line-height: 1.2; }
}

@media (max-width: 480px) {
    .alur-grid { grid-template-columns: 1fr; }
}

/* --- 6. SUBTEMA SECTION --- */
.section-padding { padding: 80px 0; }
.section-title { text-align: center; font-size: 2.5rem; font-family: 'Bricolage Grotesque', sans-serif; color: var(--text-main); margin-bottom: 5px; }
.section-title span { color: var(--blue-bright); text-shadow: 0 0 10px rgba(0, 229, 255, 0.3); }

.subtema-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.subtema-card { text-align: center; padding: 30px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 180px; }
.subtema-icon {
    width: 50px; height: 50px; background: rgba(0, 229, 255, 0.1); border-radius: 50%; margin-bottom: 20px; display: flex; align-items: center;
    justify-content: center; font-size: 1.2rem; font-weight: 700; color: var(--blue-bright); border: 1px solid var(--blue-bright);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.3); transition: all 0.3s ease;
}
.subtema-card:hover .subtema-icon { background: var(--blue-bright); color: #000; box-shadow: 0 0 20px rgba(0, 229, 255, 0.6); transform: scale(1.1); }
.subtema-card h3 { font-family: 'Poppins', sans-serif; font-size: 1.05rem; line-height: 1.4; color: var(--text-main); font-weight: 600; }

.subtema-card:nth-child(even) .subtema-icon {
    color: var(--blue-light); border-color: var(--blue-light); box-shadow: 0 0 10px rgba(125, 211, 252, 0.3); background: rgba(125, 211, 252, 0.1);
}
.subtema-card:nth-child(even):hover .subtema-icon { background: var(--blue-light); color: #000; box-shadow: 0 0 20px rgba(125, 211, 252, 0.6); }

/* --- 7. TIMELINE SECTION (DARK MODE) --- */
.timeline-rel-container { position: relative; width: 100%; display: flex; align-items: center; }
.timeline-horizontal-wrapper {
    position: relative; width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    scrollbar-width: none; scroll-padding-left: 60px; scroll-padding-right: 60px;
}
.timeline-horizontal-wrapper::-webkit-scrollbar { display: none; }
.timeline-horizontal-track { display: flex; position: relative; min-width: max-content; padding: 20px 60px 10px 60px; }

/* Garis Putus-Putus Cyan */
.timeline-horizontal-track::before {
    content: ''; position: absolute; top: 26px; left: 67px; right: 67px; height: 1px;
    border-top: 2px dashed var(--blue-bright); opacity: 0.5; z-index: 1;
}

.timeline-h-item { position: relative; z-index: 2; width: 230px; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-start; scroll-snap-align: start; padding-right: 25px; }

/* Titik Cyan Glow */
.timeline-h-dot {
    width: 14px; height: 14px; background: var(--blue-bright); border-radius: 50%; margin-bottom: 20px;
    box-shadow: 0 0 0 6px var(--bg-deep), 0 0 15px 8px rgba(0, 229, 255, 0.4); 
}
.timeline-h-dot.active-dot {
    background: var(--blue-light); box-shadow: 0 0 0 6px var(--bg-deep), 0 0 20px 10px rgba(125, 211, 252, 0.5); transform: scale(1.2);
}

.timeline-h-title { font-family: 'Poppins', sans-serif; font-size: 0.95rem; font-weight: 700; color: var(--text-main); margin-bottom: 6px; line-height: 1.3; }
.timeline-h-date { font-size: 0.8rem; color: var(--blue-light); font-weight: 600; text-shadow: 0 0 5px rgba(125, 211, 252, 0.3); }

/* Tombol Timeline */
.timeline-nav-btn {
    position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%;
    background: var(--bg-deep); border: 1px solid var(--blue-bright); color: var(--blue-bright); box-shadow: 0 0 15px rgba(0, 229, 255, 0.2);
    display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; transition: all 0.3s ease;
}
.timeline-nav-btn:hover { background: var(--blue-bright); color: #000; box-shadow: 0 0 25px rgba(0, 229, 255, 0.5); }
.timeline-nav-btn.prev-btn { left: -23px; }
.timeline-nav-btn.next-btn { right: -23px; }

/* --- 8. PENGHARGAAN (REWARD) SECTION --- */
.reward-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 30px; }
.reward-card { text-align: center; padding: 40px 20px; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; }
.reward-medal { margin-bottom: 15px; }
.medal-img-custom { width: 85px; height: auto; object-fit: contain; filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.2)); transition: transform 0.4s ease; }
.reward-card:hover .medal-img-custom { transform: scale(1.15) translateY(-5px); }
.reward-card h3 { font-family: 'Poppins', sans-serif; font-size: 1.4rem; color: var(--text-main); margin-bottom: 5px; font-weight: 700; text-transform: uppercase; }
.reward-prize { font-size: 1.8rem; font-weight: 800; margin-bottom: 20px; }
.reward-list { list-style: none; text-align: center; width: 100%; }
.reward-list li { font-size: 0.95rem; color: var(--text-muted); padding: 10px 0; border-bottom: 1px dashed var(--border-color); }
.reward-list li:last-child { border-bottom: none; }

/* Warna Teks Hadiah */
.gold-card { border-top: 4px solid #FCD34D; box-shadow: inset 0 20px 30px -20px rgba(252, 211, 77, 0.2); }
.gold-card .reward-prize { color: #FCD34D; text-shadow: 0 0 10px rgba(252, 211, 77, 0.4); }
.silver-card { border-top: 4px solid #CBD5E1; box-shadow: inset 0 20px 30px -20px rgba(203, 213, 225, 0.2); }
.silver-card .reward-prize { color: #CBD5E1; text-shadow: 0 0 10px rgba(203, 213, 225, 0.4); }
.bronze-card { border-top: 4px solid #FBA94C; box-shadow: inset 0 20px 30px -20px rgba(251, 169, 76, 0.2); }
.bronze-card .reward-prize { color: #FBA94C; text-shadow: 0 0 10px rgba(251, 169, 76, 0.4); }

@media (min-width: 993px) {
    .reward-grid { align-items: center; }
    .gold-card { order: 2; transform: scale(1.08); box-shadow: 0 15px 40px rgba(0,0,0,0.5), inset 0 20px 30px -20px rgba(252, 211, 77, 0.2); z-index: 2; }
    .silver-card { order: 1; }
    .bronze-card { order: 3; }
}

.reward-single-box { padding: 35px 40px; border-top: 4px solid var(--blue-bright); }
.reward-extra-content { display: flex; justify-content: space-between; gap: 30px; }
.reward-col { flex: 1; text-align: left; }
.reward-divider { width: 1px; border-right: 1px dashed var(--border-color); }
.reward-col h4 { font-family: 'Poppins', sans-serif; font-size: 1.1rem; color: var(--blue-bright); margin-bottom: 15px; font-weight: 700; text-shadow: 0 0 5px rgba(0,229,255,0.3); }
.reward-col ul li { font-size: 0.9rem; color: var(--text-main); margin-bottom: 10px; line-height: 1.5; padding-left: 25px; position: relative; }
.reward-col ul li::before {
    content: ''; position: absolute; left: 0; top: 3px; width: 16px; height: 16px;
    background-image: url('assets/stars.png'); background-size: contain; background-repeat: no-repeat;
    filter: drop-shadow(0 0 5px rgba(0,229,255,0.8)); /* Bintang menyala */
}

/* --- 9. SPONSOR SECTION --- */
.sponsor-flex { 
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center; 
    gap: 40px 70px; max-width: 1000px; margin: 0 auto; 
}

.sponsor-logo-container {

    background: transparent;
    padding: 0;
    border: none;
    box-shadow: none;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sponsor-logo-container:hover { 
    transform: scale(1.15) translateY(-5px); 
}

.sponsor-img { 
    max-width: 140px; 
    max-height: 70px; 
    object-fit: contain; 
    

    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.6)) drop-shadow(0 0 10px rgba(255, 255, 255, 0.15));
    transition: filter 0.3s ease;
}

/* --- PENGATURAN KHUSUS SPONSOR UTAMA (LOBUS) --- */
.sponsor-img.logo-utama {
    max-width: 280px; 
    max-height: 160px;

    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.65)) drop-shadow(0 0 18px rgba(255, 255, 255, 0.25));
}

/* Pancaran cahaya Neon/Cyan yang lebih besar saat disorot (hover) */
.sponsor-logo-container:hover .sponsor-img.logo-utama {
    filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.7)) drop-shadow(0 0 25px rgba(0, 229, 255, 0.3));
}

/* Saat di-hover, cahaya putih berubah menjadi cahaya biru Neon/Cyan */
.sponsor-logo-container:hover .sponsor-img {
    filter: drop-shadow(0 0 5px rgba(0, 229, 255, 0.6)) drop-shadow(0 0 15px rgba(0, 229, 255, 0.3));
}
@media (max-width: 768px) {
    body::before{
        opacity: 0.08;
        background-position: center center;
    }
    
    body.light-mode::before{
        opacity: 0.15;
    }

    .sponsor-img.logo-utama {
        max-width: 180px;
        max-height: 100px;
    }
}

/* --- 10. FAQ SECTION (DARK MODE ACCORDION) --- */
.faq-container { max-width: 850px; margin: 0 auto; display: flex; flex-direction: column; gap: 15px; }
.faq-item { padding: 0; text-align: left; border-left: 4px solid var(--blue-bright); transition: all 0.3s ease; overflow: hidden; }
.faq-item:hover { box-shadow: 0 10px 25px rgba(0, 229, 255, 0.1); }
.faq-question { padding: 25px 30px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; background: transparent; transition: background 0.3s ease; }
.faq-question:hover { background: rgba(0, 229, 255, 0.05); }
.faq-question h3 { font-family: 'Poppins', sans-serif; font-size: 1.1rem; color: var(--text-main); font-weight: 700; margin: 0; line-height: 1.4; padding-right: 20px; }
.faq-icon { color: var(--blue-bright); transition: transform 0.4s ease; display: flex; align-items: center; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out, padding 0.4s ease; background: rgba(0, 0, 0, 0.3); padding: 0 30px; }
.faq-answer p { font-size: 0.95rem; color: var(--text-muted); line-height: 1.6; margin: 0; padding-bottom: 25px; }
.faq-item.active .faq-icon { transform: rotate(180deg); }
.faq-item.active .faq-answer { max-height: 300px; }

/* --- 11. FOOTER SECTION (DARK MODE) --- */
footer {
    background: rgba(5, 11, 26, 0.95);
    backdrop-filter: blur(var(--blur-val));
    border-top: 1px solid var(--border-color);
    padding: 70px 0 40px 0;
    color: var(--text-main);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
}
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 50px; }
.footer-col { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.footer-about .footer-logo { height: 50px; width: auto; margin-bottom: 15px; object-fit: contain; filter: drop-shadow(0 0 10px rgba(0,229,255,0.3)); }
.footer-about p { font-size: 0.92rem; color: var(--text-muted); line-height: 1.6; max-width: 320px; }
.footer-about .copyright { margin-top: auto; font-size: 0.82rem; color: var(--text-muted); padding-top: 25px; }
.footer-col h4 { font-family: 'Poppins', sans-serif; font-size: 1.15rem; color: var(--text-main); font-weight: 700; margin-bottom: 20px; position: relative; padding-bottom: 8px; }
.footer-col h4::after { content: ''; position: absolute; bottom: 0; left: 0; width: 30px; height: 3px; background-color: var(--blue-bright); border-radius: 2px; box-shadow: 0 0 5px var(--blue-bright); }
.footer-list { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.footer-list li { font-size: 0.95rem; color: var(--text-muted); }
.footer-list li strong { color: var(--blue-light); }
.footer-list li a { color: var(--blue-bright); font-weight: 600; margin-left: 5px; }
.footer-list li a:hover { color: #fff; text-shadow: 0 0 8px rgba(0,229,255,0.5); text-decoration: none; }
.footer-email { margin-bottom: 18px; font-size: 0.95rem; color: var(--text-muted); }
.footer-email a { display: block; color: var(--blue-bright); font-weight: 600; margin-top: 4px; word-break: break-all; }
.footer-email a:hover { color: #fff; text-shadow: 0 0 8px rgba(0,229,255,0.5); }
.footer-socials { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.footer-socials a { display: flex; align-items: center; gap: 12px; font-size: 0.9rem; color: var(--text-muted); font-weight: 500; transition: all 0.2s ease; }
.footer-socials a:hover { color: var(--blue-bright); transform: translateX(4px); }
.footer-socials svg { color: var(--blue-bright); flex-shrink: 0; }

/* --- RESPONSIVITAS UMUM LAYAR KECIL --- */
@media (max-width: 992px) {
    .organizer-logos { flex-wrap: wrap; }
    .subtema-grid { grid-template-columns: repeat(2, 1fr); }
    .reward-grid { grid-template-columns: 1fr; gap: 20px; }
    .reward-extra-content { flex-direction: column; gap: 25px; }
    .reward-single-box { padding: 30px 25px; }
    .reward-divider { width: 100%; height: 1px; border-right: none; border-bottom: 1px dashed var(--border-color); }
    .alur-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .hero-title { font-size: 3rem; margin-bottom: 10px; }
    .hero-subtitle { font-size: 0.9rem; margin-bottom: 15px; }
    .hero-theme { font-size: 1.1rem; padding: 0 10px; }
    .organizer-logos { flex-direction: column; gap: 15px; }
    .org-divider { width: 40px; height: 1px; }
    .org-text { text-align: center; align-items: center; }
    .reg-grid { flex-direction: column; gap: 30px; }
    .reg-divider { width: 100%; height: 1px; border-left: none; border-top: 1px dashed var(--border-color); }
    .timeline-horizontal-wrapper { scroll-padding-left: 20px; scroll-padding-right: 20px; }
    .timeline-horizontal-track { padding: 20px 20px 10px 20px; }
    .timeline-horizontal-track::before { left: 27px; right: 27px; }
    .alur-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
    .alur-container { margin-top: 40px; }
    .sponsor-flex { gap: 30px 40px; }
    .sponsor-img { max-width: 100px; max-height: 60px; }
    .gallery-card { flex-direction: column; width: 280px; padding: 20px; }
    .gallery-img-box { width: 100%; height: 180px; }
    .gallery-info { border-left: none; border-top: 1px dashed var(--border-color); padding-left: 0; padding-top: 15px; align-items: center; text-align: center; width: 100%; }
    .faq-question { padding: 20px; }
    .faq-question h3 { font-size: 1rem; }
    .faq-answer { padding: 0 20px; }
    .faq-answer p { font-size: 0.9rem; padding-bottom: 20px; }
    .footer-grid { grid-template-columns: 1fr; gap: 40px; }
    .footer-col { align-items: center; text-align: center; }
    .footer-col h4::after { left: 50%; transform: translateX(-50%); }
    .footer-about p { max-width: 100%; }
    .footer-about .copyright { margin-top: 20px; }
    .footer-socials a { justify-content: center; }
}

/* --- LIGHT MODE --- */


.btn-theme {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-main);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-right: 5px;
}
.btn-theme:hover {
    background: rgba(0, 229, 255, 0.1);
    color: var(--blue-bright);
    border-color: var(--blue-bright);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.2);
}


body.light-mode {

    --bg-deep: #F8FAFC; 
    --card-bg: rgba(255, 255, 255, 0.7);
    --border-color: rgba(15, 23, 42, 0.1);
    
    --blue-dark: #0F172A;
    --blue-mid: #1E3A8A;
    --blue-bright: #2563EB;
    --blue-light: #3B82F6;
    
    --text-main: #1E293B;
    --text-muted: #64748B;

    background-image: 
        radial-gradient(circle at 10% 20%, rgba(37, 99, 235, 0.05), transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(2, 132, 199, 0.05), transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.5), transparent 60%);
}

/* --- PENYESUAIAN ELEMEN KHUSUS DI LIGHT MODE --- */


body.light-mode .btn-theme:hover {
    background: rgba(37, 99, 235, 0.1);
    color: var(--blue-bright);
    border-color: var(--blue-bright);
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.15);
}

body.light-mode::before {
    opacity: 0.25; 
    filter: invert(1); 
    mix-blend-mode: multiply;
}

body.light-mode .hero-title {
    background: linear-gradient(135deg, #0F172A 0%, #2563EB 40%, #0284C7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 5px 15px rgba(37, 99, 235, 0.1));
}


body.light-mode .glass-card, 
body.light-mode nav.scrolled {
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}
body.light-mode .glass-card:hover {
    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.08);
    border-color: rgba(37, 99, 235, 0.3);
}


body.light-mode .sponsor-img {
    filter: none;
}
body.light-mode .sponsor-logo-container:hover .sponsor-img {
    filter: drop-shadow(0 4px 10px rgba(15, 23, 42, 0.1));
}


body.light-mode .faq-answer { background: rgba(37, 99, 235, 0.03); }
body.light-mode footer { 
    background: rgba(255, 255, 255, 0.95); 
    box-shadow: 0 -10px 30px rgba(15, 23, 42, 0.03); 
}

body.light-mode nav {
    background: rgba(255, 255, 255, 0.85);
    border-bottom: 1px solid var(--border-color);
}

/* Navbar saat di-scroll (bentuk kapsul) */
body.light-mode nav.scrolled {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}


body.light-mode .nav-links {
    color: var(--text-main);
}


body.light-mode .nav-links a:hover {
    color: var(--blue-bright);
    text-shadow: none;
}


body.light-mode .btn-theme {
    color: var(--text-main);
    border-color: var(--border-color);
}

@media (max-width: 576px) {
    .subtema-grid { grid-template-columns: 1fr; }
    .alur-grid { grid-template-columns: 1fr; }
}