@import url('https://fonts.cdnfonts.com/css/Military');

* {
    font-family: "Military", sans-serif;
}

html, body {
    max-width: 100vw;
    overflow-x: hidden !important;

}

/* font external */
@font-face {
    font-family: "Military";
    src: url('/font/sf-pro.otf');
}

.section .number .font-external {
    word-break: break-word;
    font-family: "Military";
    white-space: normal;
    display: inline-block;
    line-height: 1;
    font-size: 1em;
    margin-top: 70px;
}

body {
    margin: 0;
    font-family: "Military", sans-serif;
    background-color: #000000;
    color: #ffffff;
    font-size: 14px;
    /* background-image:
        url(img/bg.png),
        repeating-linear-gradient(to right, transparent 0 500px, #73814B33 500px 501px); */
    background-size: 100%;
}

.penjelasan {
    font-family: "Military", sans-serif;
    background-color: #000000;
    color: #ffffff;
    font-family: 'Military', sans-serif;
    font-size: 14px;
    text-align: justify;
    line-height: 1.5;
    margin-bottom: 1em;
    margin-top: 0px;
}



*::-webkit-scrollbar {
    width: 0;
}

* {
    padding: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
}

.section {
    width: 100%;
    min-height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

}

.content-fit {
    width: min(1200px, 90vw);
    margin: auto;
    min-height: 100vh;
    position: relative;
    padding-block: 10em;
    z-index: 30;
}

header {
    padding-block: 1em;
    position: fixed;
    top: 0;
    width: 100%;
    backdrop-filter: blur(20px);
    z-index: 100;
    background-color: #1B1B1B11;
    background-image: repeating-linear-gradient(transparent 0 500px, #eee1 500px 501px);
}

header .content-fit {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: unset !important;
    padding-block: unset !important;
}

header .content-fit nav ul {
    display: flex;
    gap: 2em;
}

#banner .title {
    color: #ffffff;
    font-size: 5em;
    font-family: "Military", sans-serif;
    font-weight: bold;
    position: relative;
    text-align: center;
    position: absolute;
    /* Menggunakan absolute agar tidak terpengaruh perubahan lain */
    top: 0%;
    /* Menjaga elemen di tengah secara vertikal */
    left: 50%;
    /* Menjaga elemen di tengah secara horizontal */
    transform: translate(-50%, -50%);
    /* Menyesuaikan posisi agar elemen tepat di tengah */
    text-align: center;
    margin-top: 30px;
    width: 100%;
    /* Menghapus margin-top untuk menghindari pergeseran */
}


#banner .title::before {
    content: attr(data-before);
    position: absolute;
    top: 0.5em;
    inset: 0.66em 0 0 0;
    z-index: -1;
    color: #445022;
}

.title-text {
    display: inline-block;
    /* Ensures it behaves like text */
    color: inherit;
    /* Inherit the color of the title */
    font-size: 100%;
    /* Adjust font size if needed */
    font-family: inherit;
    /* Inherit the font family of the title */
    font-weight: inherit;
    /* Inherit the font weight */
    position: relative;
}

/* Media query for mobile screens */
@media screen and (max-width: 767px) {
    .title-text {
        position: absolute;
        /* Absolute positioning to move only this element */
        top: 10%;
        /* Move it higher */
        left: 50%;
        transform: translateX(-50%);
        /* Keep it horizontally centered */
        font-size: 2.5em;
        /* Adjust the size if needed for mobile */
    }
}

.section .decorate {
    position: absolute;
}



#intro .content-fit {
    display: flex;
    gap: 55%;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 1;
}

.section .number {
    font-family: "devil breeze";
    font-size: 7em;
    font-weight: bold;
}

.section .content-fit .title {
    font-family: "devil breeze";
    font-size: 5em;
    font-weight: bold;
}

#description .content-fit {
    padding-right: 30%;
    z-index: 10;
}

#description .number {
    font-size: 5em;
    z-index: 12;
}

#description .title {
    font-size: 7em;
    font-weight: 500;
    z-index: 10;
}

#contact .content-fit {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

#contact table {
    width: min(800px, 90vw);
    padding-top: 2em;
    font-size: 2em;
    margin: auto;
}

#contact table td {
    padding-block: 0.5em;
    border-bottom: 1px dashed #445022;
}

#contact table td:nth-child(1) {
    text-align: left;
    font-weight: 500;
}

#contact table td:nth-child(2) {
    text-align: right;
    font-weight: 200;
}

#contact .sign {
    font-family: 'Bimbo', sans-serif;
    font-size: 10em;
}

#container3D {
    position: fixed;
    inset: 0;
    /* background-color: red; */
    z-index: 11;
    pointer-events: none;
}

@media screen and (max-width: 1023px) {
    #banner .title {
        font-size: 5em;
    }

    #intro .content-fit {
        flex-direction: column;
    }
}

@media screen and (max-width: 767px) {
    #banner .title {
        font-size: 3em;
    }

    #intro .content-fit {
        flex-direction: column;
    }

    .section .number {
        font-size: 5em;
    }

    .section .content-fit .title {
        font-size: 2em;
    }

    #description .content-fit {
        padding-right: 0;
        z-index: 12;
    }

    #contact table {
        font-size: 1em;
    }

    #contact .sign {
        font-size: 2em;
    }

    #container3D {
        position: absolute;
        z-index: 11;
    }
}

.logo-image {
    height: auto;
    max-height: 50px;
    width: 400px;
    max-width: 100%;
    object-fit: contain;
    display: block;
    margin-left: -60px;
}


.shadow-title {
    position: relative;
    top: 290px;

}

.shadow-title::before {
    content: "";
    display: block;
    background: url('img/logo-rama.png') no-repeat center center;
    background-size: contain;
    opacity: 0.5;
    /* Adjust the opacity to create a shadow effect */
    /* filter: blur(5px); */
    /* Adjust the blur to create a shadow effect */
    position: absolute;
    /* Adjust this value to move the shadow upwards */
    width: 100%;
    height: 60%;
    margin-top: -80px;
    /* margin-left: 700px; */
    z-index: -1;
    /* Ensure the shadow is behind the content */
}


@media (max-width: 768px) {
    .shadow-title {
        /* margin-top: -50px; */
        font-size: 1.5rem;
        /* top: -100px; */
        height: 170px;
        /* opsional, pastikan judul tidak kepanjangan */
    }

    .shadow-title::before {
        top: -60px;
        height: 190px;
        background-size: 80%;
        /* bisa contain atau cover juga */
        filter: blur(3px);
        /* kurangi efek di layar kecil */
    }
}

.title-image {
    height: 1em;
    /* Adjust the height to match the text size */
    vertical-align: middle;
    /* Align the image vertically with the text */
}

.scroll-button {
    position: absolute;
    bottom: 250px;
    /* Adjust this value to move the button up or down */
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    background-color: transparent;
    border: 2px solid #007bff00;
    /* Adjust the border color as needed */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 500000;
    /* Ensure the button is above other elements */
}

.scroll-button:hover {
    background-color: #87060600;
}

.arrow-down {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid rgb(255, 255, 255);
    z-index: 9999;
}

.arrow-up {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid rgb(255, 255, 255);
}

#description {
    /* position: relative; */
    z-index: 100;
    /* Nilai z-index yang lebih tinggi */
    background-color: #000000;
}

#contact {
    background-color: #000000;
    z-index: 100;
}

.buttons {
    display: flex;
    justify-content: flex-start;
    /* Align buttons to the left */
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: -5px;
    width: 100%;
    height: 100%;
}

.buttons button {
    flex-grow: 1;
    margin: 0 10px;
    padding: 10px 20px;
    font-size: 14px;
    cursor: pointer;
    background-color: #BF0405;
    color: white;
    border: none;
    border-radius: 5px;
    z-index: 15;
    white-space: nowrap;
}

.buttons button:hover {
    background-color: #8f0000;
}

.hotspot {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    border: none;
    background-color: blue;
    box-sizing: border-box;
    pointer-events: none;
}

.hotspot[slot="hotspot-hand"] {
    --min-hotspot-opacity: 0;
    background-color: red;
}

.hotspot[slot="hotspot-foot"]:not([data-visible]) {
    background-color: transparent;
    border: 3px solid blue;
}

.annotation {
    background-color: #888888;
    position: absolute;
    transform: translate(10px, 10px);
    border-radius: 10px;
    padding: 10px;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    /* Adjust the duration as needed */
}

.annotation.show {
    opacity: 1;
}

/* This keeps child nodes hidden while the element loads */
:not(:defined)>* {
    display: none;
}

#hotspot-demo {
    position: absolute;
    /* Atau gunakan fixed jika ingin elemen tetap di tempat saat scroll */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    height: 50vh;
    z-index: 1000;
    /* Pastikan z-index cukup tinggi untuk menimpa elemen lain */
}

.intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Dua kolom sama lebar */
    gap: 20px;
    /* Jarak antar kolom */
    align-items: stretch;
    /* Supaya tiap kolom bisa meregang ke tinggi yang sama (opsional) */
}

:root {
    --model-viewer-width: 50%;
    --model-viewer-height: 50%;
}

.model-viewer-banner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    flex: 2;
}

.grid-right {
    display: flex;
    align-items: center;
    /* Konten di tengah secara vertikal */
    justify-content: flex-start;
    /* Memastikan kotak berada di sisi kiri kolom */
}

model-viewer {
    width: var(--model-viewer-width);
    height: var(--model-viewer-height);
    transition: all 0.5s ease;
    z-index: 1;
}

model-viewer.small {
    width: 300px;
    /* Adjust the width as needed */
    height: 300px;
    /* Adjust the height as needed */
}

.hotspot {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background-color: red;
    pointer-events: auto;
    cursor: pointer;
}

/* .HotspotAnnotation {
    background: rgb(255, 255, 255);
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 2px 4px;
    color: rgba(0, 0, 0, 0.8);
    display: block;
    font-family: Futura, "Helvetica Neue", sans-serif;
    font-size: 8px;
    font-weight: 700;
    left: calc(100% + 1em);
    max-width: 128px;
    overflow-wrap: break-word;
    padding: 0.5em 1em;
    position: absolute;
    top: 50%;
    width: max-content;
} */

/* Styling untuk kotak anotasi */
.HotspotAnnotation {
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid #ff0000;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(255, 0, 0, 0.2), 0 0 30px rgba(255, 0, 0, 0.1);
    color: #ffffff;
    display: block;
    font-family: 'Military', sans-serif;
    font-size: 14px;
    font-weight: 400;
    left: calc(100% + 85px);
    max-width: 250px;
    overflow-wrap: break-word;
    padding: 12px 15px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: max-content;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.accordion {
    border: 1px solid #ddd;
    margin-bottom: 0;
    font-family: "Military", sans-serif;
    font-size: 14px;
    z-index: 16;
    border-radius: 15px;
    /* Add rounded corners to the accordion */
    overflow: hidden;
    margin-top: 15px;
}

.accordion-header {
    background-color: #f9f9f9;
    padding: 15px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 16;
    border-top-left-radius: 10px;
    /* Add rounded corners to the top header */
    border-top-right-radius: 10px;
    border: none;
    /* Remove default button border */
    width: 100%;
    /* Make button full width */
    text-align: left;
    /* Align text to the left */
    outline: none;
    /* Remove default button outline */

}

.accordion-header h2, .accordion-header h3 {
    color: #000000;
    font-size: 18px;
    margin: 0;
    z-index: 16;
}

.accordion-header .plus-icon {
    font-size: 20px;
    color: #d9534f;
    z-index: 16;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
    padding: 0 20px;
    /* Adjust padding to be inside the transition */
    border-top: 1px solid #ddd;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;

}

.accordion-content.show {
    max-height: 500px;
    /* Adjust this value based on your content */
    padding: 20px;
    /* Add padding when content is shown */
}

.accordion-content ul {
    list-style-type: none;
    padding-left: 20px;
    margin: 0;
    z-index: 16;
    position: relative;
}

.accordion-content ul li {
    margin-bottom: 10px;
    z-index: 16;
    position: relative;
    font-weight: 50;
}

.accordion-content ul li::before {
    content: '•';
    /* Custom marker */
    color: red;
    /* Marker color */
    position: absolute;
    left: -20px;
    /* Adjust position as needed */
    z-index: 16;
}

/* carousel */
.carousel {
    position: relative;
    width: 100%;
    max-width: 1200px;
    overflow: hidden;
    background-color: #ffffff00;
    border: 1px solid #dddddd00;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
    z-index: 16;
}

.carousel-inner {
    display: flex;
    transition: transform 0.5s ease;

}

.carousel-item {
    min-width: 33.33%;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    text-align: center;
}

.carousel-item img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    cursor: pointer;
}

.carousel-controls {
    position: absolute;
    top: 40%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 1;
}

.carousel-controls i {
    pointer-events: all;
    color: #fff;
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
    margin: 10px;
    font-size: 30px;
    z-index: 1;
}

.carousel-indicators {
    display: flex;
    justify-content: center;
    padding: 10px 0;
}

.carousel-indicators span {
    display: block;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    background-color: #ddd;
    border-radius: 50%;
    cursor: pointer;
}

.carousel-indicators .active {
    background-color: #ff0000;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
}

.modal-content {
    position: relative;
    background-color: #ffffff00;
    padding: 20px;
    border-radius: 8px;
    max-width: 90%;
    max-height: 90%;
    text-align: center;
}

.modal-content img {
    max-width: 100%;
    max-height: 80vh;
}

.modal-controls {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.modal-controls button {
    padding: 10px 20px;
    border: none;
    background-color: #ff0000;
    color: #fff;
    cursor: pointer;
    border-radius: 5px;
}

/* footer */
.footer {
    background-color: #1c1c1c;
    color: #ffffff;
    padding: 40px 40px;
    /* Memperbesar padding untuk menambah tinggi */
    display: grid;
    grid-template-columns: 1fr auto auto auto 1fr;
    /* Mengatur grid dengan kolom kosong di kiri dan kanan */
    align-items: flex-start;
    gap: 20px;
}

.footer div {
    margin: 10px;
}

.footer h3 {
    margin-top: 0;
    font-size: 18px;
}

.footer p {
    margin: 5px 0;
    font-size: 14px;
}

.footer a {
    color: #ffffff;
    text-decoration: none;
}

.footer a:hover {
    text-decoration: underline;
}

.footer .social-media a {
    display: flex;
    align-items: center;
    margin: 5px 0;
}

.footer .social-media i {
    margin-right: 10px;
}

.footer-bottom {
    background-color: #111111;
    color: #888888;
    text-align: center;
    padding: 10px 40px;
    font-size: 12px;
}

.footer-bottom a {
    color: #888888;
    text-decoration: none;
}

.footer-bottom a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .footer {
        grid-template-columns: 1fr;
        /* Mengatur grid menjadi satu kolom pada layar kecil */
        padding: 20px;
    }

    .footer-bottom {
        padding: 10px 20px;
    }
}

#scrollTopButton {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    /* Initially hidden */
    z-index: 1000;
    /* Ensure it is above other elements */
    background-color: #ff0000;
    /* Optional: Add background color for better visibility */
    border: none;
    /* Optional: Remove border */
    padding: 14.5px;
    /* Optional: Add padding */
    border-radius: 50%;
    /* Optional: Make it circular */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    /* Optional: Add shadow */
}

.scroll-button2 {
    position: absolute;
    /* Adjust this value to move the button up or down */
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    background-color: transparent;
    border: 2px solid #007bff00;
    /* Adjust the border color as needed */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 500000;
    /* Ensure the button is above other elements */
}

#scrollButton1 {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 16px;
}

#banner {
    position: relative;
    top: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    /* background: url("img/bg.png") no-repeat center center/cover; */
}

.banner-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-align: center;
    padding-top: -100px;
}

/* Mengatur posisi carousel agar lebih turun ke bawah */
.carousel-container {
    position: relative;
    /* Menggunakan fixed untuk posisi tetap di layar */
    top: 25%;
    /* Mengatur posisi carousel 25% dari atas layar (atau sesuaikan sesuai kebutuhan) */
    left: 0;
    width: 100%;
    height: 100vh;
    /* Mengisi seluruh tinggi layar */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 30;
    pointer-events: auto;
    /* Agar tidak mengganggu interaksi dengan elemen lain */
}

.model-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    gap: 100px;
    transition: transform 0.5s ease-in-out;
    z-index: 300;
}

.model-slide {
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease-out;
}

.model-slide.active {
    width: 600px;
    height: 600px;
    transform: scale(1.5);
    /* Membesarkan model aktif */
}

model-viewer {
    width: 100%;
    height: 100%;
}

/* Tombol navigasi carousel */
.swiper-button-prev, .swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-500%);
    background: rgba(0, 0, 0, 0.5);
    color: #ff0000 !important;
    /* Paksa warna merah */
    border-radius: 50%;
    padding: 50px;
    pointer-events: auto;
    z-index: 10000;
}

.swiper-button-prev {
    left: 0 !important;
    /* Posisikan di ujung kiri */
}

.swiper-button-next {
    right: 0 !important;
    /* Posisikan di ujung kanan */
}

/* Contoh styling untuk tiap state */
.decode-text {
    font-family: "Military";
    src: url('/font/Military-Jr34-Bold.woff');
    color: #ffffff;
    font-size: clamp(1px, 2.5vw, 3rem);
    line-height: 1.2;
    text-align: center;
    padding: 0 2rem;
    max-width: 800px;
    margin: 0 auto;
    overflow: hidden;
    letter-spacing: -0.5px;
}

.decode-text span {
    /* transition: all 0.3s ease; */
    opacity: 0;
    /* Awal: tidak terlihat */
    font-family: "Military";
    src: url('/font/Military-Jr34-Bold.woff');
    display: inline-block;
    white-space: normal;
    transition: all 0.3s ease;
    margin: 1 0.1em;

}


.decode-text span.state-1 {
    opacity: 0.3;
    /* Bisa ditambahkan efek garis (line) dengan border-bottom misalnya */
    border-bottom: 1px solid #fff;
}

.decode-text span.state-2 {
    opacity: 0.6;
    /* Ubah tampilan, misalnya background block sementara */
    background-color: rgba(255, 255, 255, 0.3);
}

.decode-text span.state-3 {
    opacity: 1;
    border-bottom: none;
    background-color: transparent;
}

@media (max-width: 768px) {
    .decode-text {
        font-size: clamp(2rem, 1.4vw, 2rem);
        line-height: 1.2;
    }

    .title {
        padding-bottom: 0px;
    }

    .decode-text span {
        margin: 3 0.05em;
        transition-duration: 0.2s;
    }

    .title::before {
        top: 0.3em;
    }
}

@media (max-width: 480px) {
    .decode-text {
        font-size: clamp(1.2rem, 6vw, 1rem);
        padding: 0 1rem;
    }

    .decode-text span.state-1,
    .decode-text span.state-2,
    .decode-text span.state-3 {
        letter-spacing: normal;
    }
}

.red-letter {
    color: red;
}

.intro-box {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* min-height: 400px; */
    min-width: 800px;
    background: linear-gradient(135deg, #000000, #000000);
    border: 2px solid #000000;
    border-radius: 15px;
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.5),
        inset 0 2px 5px rgb(0, 0, 0);
    padding: 0;
    /* Adjust padding for the centered model */
    margin-top: 100px;
    margin-left: -500px;
    z-index: 20;
    /* Ensure it's above other elements */
}

#title-banner {
    position: relative;
    /* Memungkinkan elemen untuk bergerak relatif terhadap posisinya saat ini */
    top: 300px;
    /* Menggeser elemen ke bawah sebanyak 30px */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 10;

}

/* Media query for mobile screens */
@media screen and (max-width: 767px) {
    #title-banner {
        top: 100px;
        /* Adjust the top value for mobile to move the title up */
        font-size: 2.5em;
        /* Adjust font size for better fit on smaller screens */
    }
}

.red-line {
    /* width: 170px; */
    height: 3px;
    background-color: red;
    margin: 10px 0;
    align-self: center;
    /* Menjaga garis berada di tengah */
}

.model-description {
    font-size: 1.2em;
    color: #fff;
    margin-top: 10px;
    margin: 10px auto;
    max-width: 600px;
    /* Ganti sesuai kebutuhan lebar maksimal */
    padding: 0 15px;
    /* Tambahan padding kiri-kanan jika diperlukan */
}

#tengah {
    font-size: 3em;
    font-family: "Military";
}

.ambient-light {
    position: absolute;
    width: 900px;
    height: 900px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 70%);
    filter: blur(100px);
    pointer-events: none;
    z-index: -100;
}

@media screen and (max-width: 768px) {
    .font-external {
        font-size: 1.5em;
    }
}

@media screen and (min-width: 769px) {
    .font-external {
        font-size: 2.5em;
    }
}

/* Titik pusat hotspot */
.hotspot-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background-color: #ff0000;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.8), 0 0 20px rgba(255, 0, 0, 0.4);
    animation: pulse 2s infinite;
}

/* Lingkaran luar untuk efek */
.Hotspot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 0, 0, 0.5);
    border-radius: 50%;
    animation: expand 2s infinite;
}

/* Garis penghubung antara hotspot dan anotasi */
.connector-line {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150px;
    /* Diperpanjang dari 100px */
    height: 2px;
    /* Dipertebal dari 1px */
    background: linear-gradient(90deg,
            rgba(255, 0, 0, 0.8) 0%,
            rgba(255, 255, 255, 0.4) 70%,
            transparent 100%);
    transform-origin: left center;
    transform: translateY(-50%) rotate(0deg);
    z-index: -1;
    opacity: 0;
    /* Tambahkan opacity awal 0 */
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    /* Transisi lebih smooth */
}

/* Tambahkan ini untuk mengatur visibilitas saat hover */
.Hotspot:hover .connector-line {
    opacity: 1;
    width: 180px;
    /* Panjang tambahan saat hover */
}

/* Animasi untuk garis penghubung */
@keyframes line-pulse {
    0% {
        background-position-x: 0%;
    }

    100% {
        background-position-x: 200%;
    }
}

.Hotspot:hover .connector-line {
    animation: line-pulse 2s linear infinite;
}

/* Judul di dalam anotasi */
.annotation-title {
    color: #ff0000;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 5px;
    font-family: "Military", sans-serif;
    letter-spacing: 1px;
}

/* Efek ketika hotspot dihover */
.Hotspot:hover .HotspotAnnotation {
    opacity: 1;
    transform: translateY(-50%) translateX(5px);
}

/* Animasi pulse untuk titik hotspot */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
    }
}

/* Animasi untuk lingkaran luar */
@keyframes expand {
    0% {
        width: 20px;
        height: 20px;
        opacity: 0.8;
    }

    70% {
        width: 30px;
        height: 30px;
        opacity: 0.2;
    }

    100% {
        width: 20px;
        height: 20px;
        opacity: 0.8;
    }
}

/* Animasi untuk anotasi agar terlihat lebih futuristik */
.Hotspot.show .HotspotAnnotation::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ff0000, transparent);
    animation: scanline 2s linear infinite;
}

@keyframes scanline {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(100%);
    }
}

/* Posisi garis untuk setiap hotspot spesifik */
.Hotspot[slot="hotspot-1"] .connector-line {
    transform: translateY(-50%) rotate(0deg);
    width: 100px;
}

.Hotspot[slot="hotspot-2"] .connector-line {
    transform: translateY(-50%) rotate(0deg);
    width: 100px;
}

.Hotspot[slot="hotspot-3"] .connector-line {
    transform: translateY(-50%) rotate(0deg);
    width: 100px;
}

.Hotspot[slot="hotspot-4"] .connector-line {
    transform: translateY(-50%) rotate(0deg);
    width: 100px;
}

/* Tambahkan di awal file */
#logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    position: fixed;
    width: 100%;
    z-index: 10001;
    /* Pastikan lebih tinggi dari z-index lain */
    opacity: 0;
    animation: fadeInOut 3s forwards;
    background: #000;
    /* Background hitam */
}

@keyframes fadeInOut {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

#content {
    opacity: 0;
    transition: opacity 1s ease-out;
}

.show-content #content {
    opacity: 1;
}

/* Styling untuk menu icon (hamburger menu) */
.menu-icon {
    display: none;
    cursor: pointer;
    margin-right: 15px;
}

.menu-icon i {
    color: #ffffff;
    font-size: 30px;
}

/* Styling dasar untuk navigasi */
nav {
    font-family: "Military", sans-serif;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    /* gap: 20px; */
    /* Memberikan jarak antar item menu */
}

nav ul li {
    cursor: pointer;
    padding: 10px;
    transition: color 0.3s, background-color 0.3s;
    /* Animasi untuk perubahan warna */
}

/* Efek hover untuk item menu utama */
nav ul li:hover {
    color: white;
    /* Mengubah warna teks menjadi putih saat hover */
    background-color: #ff0000;
    /* Mengubah latar belakang menjadi merah terang */
}

.menu-item {
    display: block;
    width: 100%;
    /* Menyusun kotak agar lebar penuh */
    padding: 10px 15px;
    /* Berikan padding agar area lebih besar dan lebih mudah diklik */
    background-color: #f1f1f1;
    /* Warna latar belakang kotak */
    border-radius: 5px;
    /* Sudut membulat */
    margin: 5px 0;
    /* Jarak antar item menu */
    cursor: pointer;
    /* Mengubah kursor menjadi pointer untuk menunjukkan bahwa kotak dapat diklik */
    transition: background-color 0.3s;
    /* Efek transisi saat hover */
}

/* Membuat link menjadi block-level agar area link penuh bisa diklik */
.menu-item a {
    display: block;
    text-decoration: none;
    /* Menghapus garis bawah */
    color: #000;
    /* Warna teks */
}

/* Efek hover untuk menu item */
.menu-item:hover {
    background-color: #ff0000;
    /* Mengubah warna latar belakang saat item dihover */
}

.menu-item:hover a {
    color: white;
    /* Mengubah warna teks saat hover */
}

/* Styling untuk dropdown menu */
nav ul li>.dropdown {
    display: none;
    /* Menyembunyikan dropdown secara default */
    position: absolute;
    background-color: #ffffff;
    color: #000;
    list-style-type: none;
    padding: 5px;
    margin-top: 10px;
    margin-left: -10px;
    border-radius: 5px;
    z-index: 10;
    /* Pastikan dropdown berada di atas elemen lain */
}

/* Menampilkan dropdown saat item menu dihover */
nav ul li:hover>.dropdown {
    display: block;
}

/* Styling untuk item dropdown */
nav ul li .dropdown li {
    padding: 10px;
    transition: background-color 0.3s;
}

/* Efek hover untuk item dropdown */
nav ul li .dropdown li:hover {
    background-color: #ff4d4d;
    color: white;
}

/* Menandai item aktif dalam dropdown */
nav ul li .dropdown .active {
    font-weight: bold;
    color: #ff0000;
    /* Mengubah warna teks item aktif */
}


/* Styling untuk menu icon pada tampilan mobile */
.menu-icon {
    cursor: pointer;
    font-size: 24px;
    display: none;
}

@media (max-width: 600px) {
    #menuList {
        position: absolute;
        top: 57px;
        left: 0;
        right: 0;
        flex-direction: column;
        text-align: center;
        gap: 0;
        overflow: hidden;
        display: none !important;
        z-index: 100;
        opacity: 0;
        transition: all 0.3s ease;
        backdrop-filter: blur(20px) !important;
        background-color: rgba(27, 27, 27, 0.8);
        -webkit-backdrop-filter: blur(20px) !important;
        background-image: repeating-linear-gradient(to right,
                transparent 0 500px,
                /* Diperkecil untuk mobile */
                #eee1 500px 501px) !important;
    }

    #menuList.mobile-visible {
        display: flex !important;
        opacity: 1;
    }

    .menu-icon {
        display: block !important;
        z-index: 1000;
    }

    nav ul li>.dropdown {
        position: static;
        margin-left: 0px;
        width: 100%;
        /* margin-top: 100; */
        max-height: 100;
        overflow: hidden;
        transition: max-height 0.3s ease;
        backdrop-filter: blur(20px) !important;
        /* background-color: rgba(27, 27, 27, 0.8); */
        -webkit-backdrop-filter: blur(20px) !important;
        background-image: repeating-linear-gradient(to right,
                transparent 0 500px,
                /* Diperkecil untuk mobile */
                #eee1 500px 501px) !important;
    }
}

.middle-navigation {
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1900px;
    /* or suitable width for buttons container */
    /* Optional - control z-index to be above other content */
    z-index: 10000;
}

.middle-navigation a {
    display: flex;
    /* Make links fit the size of buttons */
    /* max-width: 1000px;
    width: 500px;
    height: 500px; */
    /* remove underline */
    text-decoration: none;
    z-index: -1000;
}

/* Adjust swipers buttons inside the links */
.swiper-button-prev, .swiper-button-next {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0);
    color: #ff0000 !important;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 24px;
}

/* Responsive: reduce size for smaller screens */
@media screen and (max-width: 600px) {
    .middle-navigation {
        width: 100%;
    }

    .middle-navigation a {
        width: 40px;
        height: 40px;
    }

    .swiper-button-prev, .swiper-button-next {
        font-size: 20px;
    }
}

/* ========== FOOTER RESPONSIVE ========== */
@media (max-width: 768px) {
    .footer {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .social-media a {
        justify-content: center;
    }
}

/* --- PATCH RESPONSIVE HALAMAN HELM --- */
@media (max-width: 1023px) {
    .intro-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 20px !important;
    }

    .grid-right {
        width: 100% !important;
        justify-content: center !important;
        align-items: center !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .content-fit, .section {
        width: 100vw !important;
        min-width: 0 !important;
        max-width: 100vw !important;
        padding-block: 20em !important;
        box-sizing: border-box !important;
    }

    .buttons {
        display: flex;
        flex-direction: row;
        /* horizontal */
        gap: 8px;
        /* spasi antar tombol */
        margin-left: 0;
        width: 100%;
        justify-content: space-between;
        /* tombol merata seluruh baris */
        align-items: stretch;
        box-sizing: border-box;
    }

    .buttons button {
        flex: 1 1 0;
        /* semua tombol lebar sama, grow/shrink */
        min-width: 0;
        /* biarkan mengecil jika viewport sempit */
        max-width: unset;
        padding: 10px 6px;
        /* padding cukup agar teks tetap muat */
        font-size: 13px;
        box-sizing: border-box;
        word-break: break-word;
        /* jika label panjang di HP */
    }

    .carousel-inner {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }



    .carousel {
        max-width: 100vw !important;
    }
}

@media (max-width: 600px) {


    .section .number,
    .section .content-fit .title {
        font-size: 2em !important;
    }
}

html, body {
    max-width: 100vw;
    overflow-x: hidden !important;
}

.empty-space {
    /* display: block; */
    width: 100%;
    height: 100px;
    /* Atur tinggi sesuai kebutuhan */
}