/* Gambar latar belakang */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-image: url('https://pub-751322c69db74c4aab5241238590aeb1.r2.dev/gas1/background.png');
    background-size: cover;  /* Menutupi seluruh area dengan gambar */
    background-position: center; /* Memusatkan gambar latar belakang */
    background-repeat: no-repeat; /* Menghindari pengulangan gambar latar belakang */
    background-attachment: fixed; /* Menggunakan pengaturan fixed untuk gambar latar belakang */
    overflow-x: hidden; /* Mencegah horizontal scroll yang tidak diinginkan */
    min-height: 100vh; /* Memastikan body memiliki tinggi minimal 100% viewport height */
}

@media (max-width: 576px) {
    body {
        background-image: url('https://pub-751322c69db74c4aab5241238590aeb1.r2.dev/gas1/backgroundmobile.jpg');
    }
}


.navbar {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    background-color: #000000; /* Warna abu-abu */
    color: #fff;
}

.navbar img {
    height: 40px;
}

.button-container {
    display: flex;
    justify-content: center;
    margin-top: -18px; /* Mengurangi jarak dari elemen di atas */
    padding: 20px;
    background-color: #000; /* Background hitam untuk container tombol */
    border-radius: 0 0 40px 40px; /* Border-radius hanya pada pojok kiri bawah dan kanan bawah */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); /* Menambahkan shadow untuk efek visual */
}


.button-link {
    text-decoration: none; /* Menghilangkan garis bawah */
}

.ranciau {
    padding: 0.6em 2em;
    border: none;
    outline: none;
    color: rgb(255, 255, 255);
    background: #111;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    margin: 0 10px; /* Jarak antar tombol */
    min-width: 100px; /* Menetapkan lebar minimum untuk tombol */
    height: 40px; /* Menetapkan tinggi untuk tombol */
    transition: background 0.3s ease, box-shadow 0.3s ease; /* Transisi untuk hover */
}

.ranciau:before {
    content: "";
    background: linear-gradient(
        45deg,
        #ff0000,
        #747474,
        #ffae00,
        #747474,
        #ff0000,
        #ffae00,
        #ff0000,
        #747474,
        #ffae00
    );
    position: absolute;
    top: -2px;
    left: -2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    -webkit-filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing-ranciau 20s linear infinite;
    transition: opacity 0.3s ease-in-out;
    border-radius: 10px;
}

.ranciau:after {
    z-index: -1;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #222;
    left: 0;
    top: 0;
    border-radius: 10px;
}

/* Hover effects */
.ranciau:hover {
    background: #333; /* Ganti warna background saat hover */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); /* Tambahkan bayangan saat hover */
}

.ranciau:hover:before {
    filter: blur(8px); /* Efek blur yang lebih besar saat hover */
}

@keyframes glowing-ranciau {
    0% {
        background-position: 0 0;
    }
    50% {
        background-position: 400% 0;
    }
    100% {
        background-position: 0 0;
    }
}

/* Gambar utama */
.main-image {
    width: 100%;
    max-width: 830px; /* Ukuran maksimal gambar untuk PC */
    height: auto; /* Menjaga rasio aspek gambar */
    margin: 20px auto; /* Menjaga jarak vertikal dan horizontal center */
    display: block; /* Menghindari gambar inline */
    border-radius: 10px; /* Contoh border-radius untuk sudut membulat */
}

/* Gaya gambar untuk versi mobile */
@media (max-width: 576px) {
    .main-image {
        max-width: 100%; /* Menyesuaikan gambar dengan lebar layar mobile */
        height: auto; /* Menjaga rasio aspek gambar */
    }
}


/* Bottom Menu Styling */
.bottom-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color:rgb(0, 0, 0); /* Warna biru dengan transparansi 50% */
    padding: 10px 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    flex-wrap: wrap; /* Allow wrapping if needed */
    border-radius: 40px; /* Sesuaikan radius sesuai kebutuhan */

}

.bottom-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 90px; /* Space between menu items for PC */
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    flex: 1 0 auto; /* Allow items to shrink or grow */
}

.bottom-menu-item img {
    height: 20px; /* Adjust size */
    width: 20px;  /* Adjust size */
    margin-bottom: 5px; /* Space between image and text */
}

/* Mobile view */
@media (max-width: 576px) {
    .bottom-menu {
        flex-direction: row; /* Ensure items are side-by-side */
        flex-wrap: nowrap;  /* Prevent wrapping on mobile */
        padding: 10px 0;
        justify-content: space-around; /* Space items evenly */
    }

    .bottom-menu-item {
        margin: 0 20px; /* Adjust space between menu items on mobile */
    }

    .bottom-menu-item img {
        height: 30px; /* Smaller icon size for mobile */
        width: 30px;  /* Smaller icon size for mobile */
    }
}

/* Gaya heading */
h1, h2, h3, h4 {
    text-align: center; /* Menyelaraskan teks ke tengah */
    color: white; /* Mengatur warna teks menjadi putih */
    margin: 10px 0; /* Menambahkan jarak vertikal di atas dan bawah heading */
}

/* Container dengan border-radius pada pojok atas dan latar belakang transparan */
.container {
    border-radius: 20px 20px 0 0; /* Border-radius pada pojok atas kiri dan kanan */
    padding: 20px; /* Menambahkan padding di dalam container */
    background-color: rgba(0, 0, 0, 0.5); /* Warna latar belakang transparan (rgba) */
    margin: 20px auto; /* Jarak vertikal dan horizontal center */
    max-width: 800px; /* Ukuran maksimal container */
    color: white; /* Warna teks dalam container */
}
/* Gaya untuk teks paragraf dalam container */
.container p {
    text-align: justify; /* Menyelaraskan teks paragraf agar rata kanan-kiri */
    color: white; /* Warna teks paragraf putih (atau warna lain sesuai kebutuhan) */
}

/* Gaya untuk tautan dalam container */
.container a {
    color: red; /* Warna tautan merah */
    text-decoration: none; /* Menghilangkan garis bawah pada tautan */
}

.container a:hover {
    text-decoration: underline; /* Garis bawah saat tautan di-hover */
}

/* Styling untuk space bar */
.space-bar {
    height: 20px; /* Menentukan tinggi space bar */
    width: 100%; /* Lebar penuh kontainer */
    background-color: transparent; /* Tidak ada warna latar belakang */
    margin: 20px 0; /* Jarak vertikal di sekitar space bar */
}

.menu-utama {
    display: flex;
    flex-wrap: wrap; /* Membungkus tombol ke baris baru jika diperlukan */
    justify-content: center; /* Menyelaraskan tombol di tengah */
    margin-top: -25px; /* Mengurangi jarak dari elemen di atas */
    padding: 15px;
    border-radius: 20px; /* Border-radius pada semua pojok */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); /* Menambahkan shadow untuk efek visual */
    background: none; /* Menghilangkan background */
}

.rincauw {
    padding: 0.6em 2em;
    border: none;
    outline: none;
    color: rgb(255, 255, 255);
    background: #111;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    margin: 10px; /* Jarak antar tombol */
    min-width: 100px; /* Menetapkan lebar minimum untuk tombol */
    height: 40px; /* Menetapkan tinggi untuk tombol */
    transition: background 0.3s ease, box-shadow 0.3s ease; /* Transisi untuk hover */
}

/* Glow effect on hover */
.rincauw:hover {
    background: #333; /* Ganti warna background saat hover */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); /* Tambahkan bayangan saat hover */
}

.rincauw:hover:before {
    filter: blur(8px); /* Efek blur yang lebih besar saat hover */
}

.rincauw:hover {
    animation: glowing 1.5s infinite alternate; /* Menambahkan efek animasi glowing */
}

@keyframes glowing {
    0% {
        box-shadow: 0 0 10px rgba(255, 0, 0, 0.8), 0 0 20px rgba(255, 0, 0, 0.6);
    }
    50% {
        box-shadow: 0 0 20px rgba(0, 255, 0, 0.8), 0 0 40px rgba(0, 255, 0, 0.6);
    }
    100% {
        box-shadow: 0 0 10px rgba(0, 0, 255, 0.8), 0 0 20px rgba(0, 0, 255, 0.6);
    }
}


/* Menetapkan lebar tombol agar dua tombol berada dalam satu baris */
@media (min-width: 576px) {
    .rincauw {
        flex: 0 1 calc(50% - 20px); /* Dua tombol per baris dengan jarak antar tombol */
    }
}

@media (max-width: 575px) {
    .rincauw {
        flex: 0 1 100%; /* Satu tombol per baris pada layar lebih kecil */
    }
}
/* Styling untuk tabel */
.table {
    width: 100%;
    margin: 20px 0;
    border-collapse: collapse;
    background-color: rgba(0, 0, 0, 0.5); /* Warna latar belakang transparan (rgba) */
}

.table table {
    width: 100%;
    border: 1px solid #ffc400; /* Border tabel */
}

.table th, .table td {
    padding: 10px;
    text-align: left;
    color: #fff; /* Warna teks putih */
    border-bottom: 2px solid #ff0000; /* Border bawah sel tabel */
}

.table th {
    background-color: #000000; /* Warna latar belakang header tabel */
    font-weight: bold;
}

.table tr:nth-child(even) {
    background-color: #000000; /* Warna latar belakang baris genap */
}

.table tr:hover {
    background-color: #ff51005e   ; /* Warna latar belakang saat hover */
}

.table a {
    color: #ff0000  ; /* Warna teks link */
    text-decoration: none;
}

.table a:hover {
    text-decoration: underline; /* Garis bawah saat hover pada link */
}
/* Media Query untuk versi mobile */
@media only screen and (max-width: 768px) {
.table th, .table td, {
        padding: 5px; /* Mengurangi padding untuk versi mobile */
    
}
.table td:first-child {
    border-right: 2px solid #ff0000; /* Warna dan ketebalan garis */
    padding-right: 10px; /* Menambah ruang antara teks dan garis */
}