@import url('https://fonts.googleapis.com/css2?family=Teko:wght@400;500;600;700&display=swap');

.hero-container { position: relative; width: 100%; overflow: hidden; background-color: #000; height: 50vh; margin-top: 70px; }
@media (min-width: 768px) { .hero-container { height: auto; aspect-ratio: 16 / 9; max-height: 100vh; } }
.layer { position: absolute; pointer-events: none; }
.layer-full { top: -15%; left: -15%; width: 130%; height: 130%; background-size: cover; background-position: center; background-repeat: no-repeat; }
.layer-1 { background-image: url('../img/bg_parallax.webp'); z-index: 1; }
.layer-2 { background-image: url('../img/layer1-new1.webp'); z-index: 2; }
.layer-3 { background-image: url('../img/foreground1.webp'); z-index: 3; }
.ornament { background-size: contain; background-repeat: no-repeat; background-position: center; }
.hero-static-logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 20; height: 100px; width: auto; max-width: 80%; pointer-events: none; transition: height 0.3s ease; }

.main-layout { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }

.sponsor-section {
    position: relative; padding: 2rem 2%; background-size: cover; background-position: center; background-repeat: no-repeat;
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2rem; grid-column: 1 / -1; grid-row: 1;
    background-image: url('../img/bg_organizer.webp'); border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.sponsor-group { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; max-width: 100%; }
.title-img { height: 20px; width: auto; max-width: 100%; object-fit: contain; }

.logo-container { display: flex; align-items: center; justify-content: center; gap: 1.5rem; flex-wrap: wrap; max-width: 100%; min-height: 55px; }
.logo-container img { height: 60px; width: auto; max-width: 100%; object-fit: contain; transition: all 0.3s ease; }
.logo-container img.logo-square { height: 55px; }

.about-section { grid-column: 1 / -1; grid-row: 2; padding: 5rem 5%; background-color: #0d0d0d; display: flex; justify-content: center; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.about-content { display: flex; flex-direction: row; align-items: center; max-width: 1000px; width: 100%; gap: 2.5rem; }
.about-left { flex: 1; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 0.8rem; border-right: 3px solid #0E6873; padding-right: 1.5rem; flex-wrap: wrap; }
.about-title-img { height: 45px; width: auto; max-width: 100%; object-fit: contain; }
.about-logo { height: 35px; width: auto; max-width: 100%; object-fit: contain; }
.about-right { flex: 2; }
.about-text { color: #aaa; line-height: 1.7; font-size: 1.05rem; font-weight: 400; }
.text-highlight { color: #fff; font-weight: 500; } 

/* SEKSI BARU DOKUMENTASI */
.documentation-section { 
    grid-column: 1 / -1; 
    grid-row: 3; 
    width: 100%; 
    min-height: 150px; 
    padding: 2.5rem 5%; 
    background-image: url('../img/bg_details.webp'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

.btn-documentation {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(244, 241, 234, 0.92); 
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 8px;
    color: #FE7E3C;
    padding: 1.2rem 3rem;
    text-decoration: none;
    font-family: 'Teko', sans-serif;
    font-weight: 600;
    font-size: 2.2rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
}

.btn-documentation:hover {
    color: #0E6873; 
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* GRID ROW DIGESER +1 */
.divider-section { grid-column: 1 / -1; grid-row: 4; width: 100%; min-height: 150px; padding: 2.5rem 5%; background-image: url('../img/bg_divider1.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; border-bottom: 1px solid rgba(255, 255, 255, 0.05); display: flex; align-items: center; justify-content: center; }
.mobile-only-divider { display: none; }

.btn-check-result {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(244, 241, 234, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 8px;
    color: #0E6873;
    padding: 1.2rem 3rem;
    text-decoration: none;
    font-family: 'Teko', sans-serif;
    font-weight: 600;
    font-size: 2.2rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
}
.btn-check-result:hover {
    color: #FE7E3C;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.details-section { grid-column: 1 / -1; grid-row: 5; padding: 4rem 5%; background-image: url('../img/bg_details.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; flex-direction: column; align-items: center; gap: 3rem; }
.details-title-img { height: 65px; width: auto; max-width: 100%; object-fit: contain; }

.details-container, .map-chart-container, .facility-container, .entertainment-container, .jersey-box { 
    width: 100%; 
    max-width: 1000px; 
    background-color: rgba(244, 241, 234, 0.92); 
    border: 1px solid rgba(255, 255, 255, 0.4); 
    border-radius: 8px; 
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.3); 
    padding: 2rem; 
}

.details-wrapper { display: flex; flex-direction: row; justify-content: center; width: 100%; }
.detail-item { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0.5rem 1rem; }
.detail-item:not(:last-child) { border-right: 1px dashed rgba(26, 26, 26, 0.3); }
.detail-label-img { height: 30px; width: auto; max-width: 100%; object-fit: contain; margin-bottom: 0.8rem; }
.detail-value { font-size: 1.8rem; color: #FE7E3C; font-weight: 600; text-transform: uppercase; line-height: 1.1; }

.route-section { grid-column: 1 / -1; grid-row: 6; padding: 5rem 5%; background-image: url('../img/bg_route.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; flex-direction: column; align-items: center; gap: 2rem; }
.route-title-img { height: 65px; width: auto; max-width: 100%; object-fit: contain; }
.map-chart-container { max-width: 1200px; display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; }
#map { width: 100%; height: 450px; border: 1px solid rgba(26, 26, 26, 0.2); border-radius: 4px; z-index: 1; }
.chart-wrapper { width: 100%; height: 250px; position: relative; }
.race-stats { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px dashed rgba(26, 26, 26, 0.3); margin-top: 0.5rem; padding-top: 1.5rem; }
.stat-box { display: flex; flex-direction: column; align-items: center; text-align: center; border-right: 1px dashed rgba(26, 26, 26, 0.3); padding: 0 0.5rem; }
.stat-box:last-child { border-right: none; }
.stat-title { font-size: 1.1rem; font-weight: 500; color: #0E6873; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.1rem; }
.stat-value { font-size: 1.6rem; font-weight: 600; color: #1a1a1a; text-transform: uppercase; line-height: 1; }

/* CSS Animasi POI Marker Zoom-in Bounce */
@keyframes poiSmoothBounce {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.3); opacity: 1; }
    75% { transform: scale(0.85); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
.poi-animated {
    animation: poiSmoothBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* CSS untuk Button Download GPX */
.gpx-download-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 1.5rem;
    padding-bottom: 0.5rem;
}
.btn-download-gpx {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #0E6873;
    color: #ffffff;
    padding: 0.8rem 2rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 15px rgba(14, 104, 115, 0.3);
}
.btn-download-gpx:hover {
    background-color: #FE7E3C;
    color: #ffffff;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 6px 20px rgba(254, 126, 60, 0.4);
}

.registration-section { grid-column: 1 / -1; grid-row: 7; padding: 4rem 5%; background-image: url('../img/bg_registration.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.05); position: relative; overflow: hidden; min-height: 60vh; }
.registration-layer-back { background-image: url('../img/reg_parallax_back.webp'); z-index: 1; }
.registration-layer-front { background-image: url('../img/reg_parallax_front.webp'); z-index: 3; }
.registration-content-wrapper { width: 100%; max-width: 1000px; display: flex; justify-content: center; position: relative; z-index: 2; }
.registration-content-img { width: 75%; height: auto; display: block; }

.jersey-section { grid-column: 1 / -1; grid-row: 8; padding: 4rem 5%; background-image: url('../img/bg_jersey.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; flex-direction: column; align-items: center; gap: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.05); }
.jersey-title-img { height: 65px; width: auto; max-width: 100%; object-fit: contain; }
.jersey-box { padding: 3rem 2rem; display: flex; flex-direction: row; justify-content: space-around; align-items: center; gap: 2rem; overflow: hidden; perspective: 1000px; }
.jersey-wrapper { display: flex; flex-direction: column; align-items: center; width: 50%; }

.jersey-container { 
    position: relative; 
    width: 100%; 
    max-width: 350px; 
    height: 350px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    transform-style: preserve-3d; 
}

.jersey-item { 
    position: absolute; 
    max-width: 220px; 
    width: 55%; 
    height: auto; 
    object-fit: contain; 
    transition: transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1), filter 1.2s cubic-bezier(0.34, 1.56, 0.64, 1); 
}

.jersey-front { 
    z-index: 2; 
    transform: translate3d(-30%, 15%, -100px) rotateZ(-15deg) rotateY(-45deg) rotateX(20deg) scale(0); 
    filter: drop-shadow(0px 0px 0px rgba(0,0,0,0));
}
.jersey-back { 
    z-index: 1; 
    transform: translate3d(30%, -15%, -200px) rotateZ(15deg) rotateY(45deg) rotateX(-20deg) scale(0); 
    filter: drop-shadow(0px 0px 0px rgba(0,0,0,0));
}

.jersey-container.is-animated .jersey-front { 
    transform: translate3d(-15%, 5%, 50px) rotateZ(-4deg) rotateY(-10deg) rotateX(5deg) scale(1); 
    filter: drop-shadow(-15px 20px 25px rgba(0,0,0,0.45)); 
}
.jersey-container.is-animated .jersey-back { 
    transform: translate3d(15%, -5%, -50px) rotateZ(5deg) rotateY(15deg) rotateX(5deg) scale(1); 
    filter: drop-shadow(15px 15px 20px rgba(0,0,0,0.35)); 
}

.divider-section-alt {
    grid-column: 1 / -1; 
    grid-row: 9; 
    width: 100%; 
    min-height: 100px; 
    padding: 2.5rem 5%; 
    background-image: url('../img/bg_details.webp'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    border-top: 1px solid rgba(255, 255, 255, 0.05); 
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); 
}

.facility-section { grid-column: 1 / -1; grid-row: 10; padding: 4rem 5%; background-image: url('../img/bg_facility.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; flex-direction: column; align-items: center; gap: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.05); }
.entertainment-section { grid-column: 1 / -1; grid-row: 11; padding: 4rem 5%; background-image: url('../img/bg_entertainment.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; flex-direction: column; align-items: center; gap: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.05); }
.facility-title-img, .entertainment-title-img { height: 65px; width: auto; max-width: 100%; object-fit: contain; }
.facility-grid, .entertainment-grid { display: flex; flex-wrap: wrap; justify-content: center; border-top: 1px dashed rgba(26, 26, 26, 0.3); }
.facility-box, .entertainment-box { width: 25%; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1.5rem 1rem; font-size: 1.6rem; font-weight: 500; color: #0E6873; text-transform: uppercase; letter-spacing: 1px; border-right: 1px dashed rgba(26, 26, 26, 0.3); border-bottom: 1px dashed rgba(26, 26, 26, 0.3); }
.entertainment-box { color: #FE7E3C; }
.facility-box:nth-child(4n), .entertainment-box:nth-child(4n) { border-right: none; }
.facility-box:last-child, .entertainment-box:last-child { border-right: none; }
.facility-box:nth-last-child(-n+4) { border-bottom: none; }
.entertainment-box:nth-last-child(-n+1) { border-bottom: none; }

.gpx-credit { font-size: 0.75rem; color: #0E6873; text-align: right; margin-top: -0.5rem; font-style: italic; }

/* New Partner Sections (Updated Layout to Match Other Sections) */
.official-sponsor-section { grid-column: 1 / -1; grid-row: 12; padding: 4rem 5%; background-image: url('../img/bg_route.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; flex-direction: column; align-items: center; gap: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.05); }
.media-partner-section { grid-column: 1 / -1; grid-row: 13; padding: 4rem 5%; background-image: url('../img/bg_registration.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; flex-direction: column; align-items: center; gap: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.05); }

.partner-title-img { height: 65px; width: auto; max-width: 100%; object-fit: contain; }
.partner-content-wrapper { width: 100%; max-width: 1000px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.partner-content-img { width: 75%; height: auto; display: block; }

@media (max-width: 768px) { 
    .gpx-credit { text-align: center; margin-top: 0.5rem; margin-bottom: 0; }
    /* Mengurangi gap button di mobile */
    .gpx-download-wrapper { margin-top: 0.8rem; padding-bottom: 0; }
    
    .hero-static-logo { height: 95px; }
    .main-layout { display: flex; flex-direction: column; }
    .sponsor-section { order: 1; border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.05); padding: 2rem 5%; }
    .mobile-only-divider { display: block; order: 2; background-image: url('../img/bg_divider1.2.webp'); min-height: 25px; padding: 0; }
    .about-section { order: 3; padding: 4rem 5%; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
    .documentation-section { order: 4; padding: 2.5rem 5%; } 
    .divider-section:not(.mobile-only-divider) { order: 5; padding: 2.5rem 5%; height: auto; }
    .details-section { order: 6; padding: 1.5rem 5%; gap: 1rem; background-size: cover; }
    .route-section { order: 7; padding: 2rem 5%; }
    .registration-section { order: 8; padding: 2rem 5%; gap: 1.5rem; min-height: auto; }
    .jersey-section { order: 9; padding: 2rem 5%; gap: 1.5rem; } 
    .divider-section-alt { order: 10; min-height: 60px; } 
    .facility-section { order: 11; padding: 2rem 5%; gap: 1.5rem; }
    .entertainment-section { order: 12; padding: 2rem 5%; gap: 1.5rem; }
    .official-sponsor-section { order: 13; padding: 2rem 5%; gap: 1.5rem; }
    .media-partner-section { order: 14; padding: 2rem 5%; gap: 1.5rem; }

    .btn-check-result, .btn-documentation { padding: 1rem 2.2rem; font-size: 1.8rem; }

    .details-container, .map-chart-container, .facility-container, .entertainment-container, .jersey-box { padding: 1.5rem; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25); }
    .details-wrapper { flex-direction: column; gap: 0; }
    .detail-item { width: 100%; padding: 1rem 0; }
    .detail-item:first-child { padding-top: 0; }
    .detail-item:last-child { padding-bottom: 0; }
    .detail-label-img { height: 25px; margin-bottom: 0.5rem; }
    .detail-value { font-size: 1.4rem; }
    .detail-item:not(:last-child) { border-right: none; border-bottom: 1px dashed rgba(26, 26, 26, 0.3); }

    .race-stats { display: flex; flex-wrap: wrap; padding-top: 1rem; margin-top: 0.5rem; border-top: 1px dashed rgba(26, 26, 26, 0.3); }
    .stat-box { flex: 0 0 50%; border-right: 1px dashed rgba(26, 26, 26, 0.3); border-bottom: 1px dashed rgba(26, 26, 26, 0.3); padding: 1rem 0.5rem; }
    .stat-box:nth-child(even) { border-right: none; }
    /* Mengurangi padding bawah pada box terakhir untuk merapatkan ke teks credit GPX */
    .stat-box:last-child { flex: 0 0 100%; border-right: none; border-bottom: none; padding-bottom: 0.5rem; }

    .facility-box, .entertainment-box { width: 50%; padding: 1rem 0.5rem; font-size: 1.4rem; border-bottom: 1px dashed rgba(26, 26, 26, 0.3); border-right: 1px dashed rgba(26, 26, 26, 0.3); }
    .facility-box:nth-child(2n), .entertainment-box:nth-child(2n) { border-right: none; }
    .facility-box:nth-last-child(-n+4) { border-bottom: 1px dashed rgba(26, 26, 26, 0.3); }
    .entertainment-box:nth-last-child(-n+1) { border-bottom: 1px dashed rgba(26, 26, 26, 0.3); }
    .facility-box:nth-last-child(-n+2) { border-bottom: none; }
    .entertainment-box:last-child { border-bottom: none; } 
    .entertainment-box:last-child:nth-child(odd) { width: 100%; border-right: none; border-bottom: none; }

    .about-content { flex-direction: column; gap: 1.5rem; text-align: center; }
    .about-left { border-right: none; border-bottom: 3px solid #0E6873; padding-right: 0; padding-bottom: 1rem; justify-content: center; gap: 0.8rem; }
    .about-text { font-size: 1rem; } 
    .about-title-img { height: 38px; }
    .details-title-img, .route-title-img, .jersey-title-img, .facility-title-img, .entertainment-title-img, .partner-title-img { height: 44px; }
    .registration-content-img, .partner-content-img { width: 100%; }
    
    .map-chart-container { padding: 1rem; }
    #map { height: 350px; }
    .chart-wrapper { height: 200px; }
    
    .jersey-box { flex-direction: row; gap: 1rem; padding: 1.5rem 1rem; }
    .jersey-wrapper { width: 50%; }
    .jersey-container { height: 250px; } 
}

@media (max-width: 576px) {
    .sponsor-section { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.5rem 5%; }
    .sponsor-group { flex: 1; gap: 0.6rem; min-width: 0; }
    .title-img { height: 18px; }
    
    .logo-container { gap: 0.8rem; min-height: 38px; }
    .logo-container img { height: 40px; }
    .logo-container img.logo-square { height: 38px; }
    
    .about-left { gap: 0.5rem; }
    .about-title-img { height: 32px; }
    .details-title-img, .route-title-img, .jersey-title-img, .facility-title-img, .entertainment-title-img, .partner-title-img { height: 44px; }
    .about-logo { height: 28px; }
    .about-text { font-size: 0.95rem; text-align: center; } 
    #map { height: 300px; }
    .chart-wrapper { height: 150px; }
    .detail-value { font-size: 1.3rem; }
    .facility-box, .entertainment-box { font-size: 1.3rem; padding: 0.8rem 0.4rem; }

    .btn-check-result, .btn-documentation { padding: 0.9rem 1.8rem; font-size: 1.6rem; }
    
    .jersey-box { gap: 0.5rem; padding: 1.5rem 0.5rem; }
    .jersey-container { height: 220px; }
    .jersey-item { width: 70%; } 
}