/* RESET DASAR */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Background container untuk gambar */
#background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: -2;
}

/* Gaya dasar halaman */
body {
    font-family: 'Poppins', sans-serif;
    text-align: center;
    color: white;
    padding: 20px;
}

/* Warna gradasi pada judul utama */
#site-title {
    font-size: 32px;
    font-weight: bold;
    background: linear-gradient(45deg, red, blue, black);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Warna gradasi pada teks berjalan */
#marquee-container {
    overflow: hidden;
    width: 100%;
    display: flex;
    justify-content: center;
}

#marquee-text {
    font-size: 20px;
    font-weight: bold;
    background: linear-gradient(45deg, black, red, blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
    display: inline-block;
    animation: marquee 10s linear infinite;
}

/* Animasi teks berjalan */
@keyframes marquee {
    from { transform: translateX(100%); }
    to { transform: translateX(-100%); }
}

/* Menambahkan jarak ke bawah untuk "Pilih Metode Pembayaran" */
#payment h3 {
    margin-top: 50px; /* Tambah jarak agar tidak mengganggu teks berjalan */
    font-size: 22px;
}

/* Style untuk tombol agar ukurannya seragam */
.uniform-button {
    display: inline-block;
    width: 100px; /* Sesuaikan ukuran sesuai kebutuhan */
    height: 45px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    padding: 10px;
    border-radius: 8px;
    border: none;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.uniform-button i {
    margin-right: 8px;
}

.uniform-button:hover {
    background-color: #0056b3;
    transform: scale(1.05);
}

/* Gaya tombol */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    color: white;
    background: linear-gradient(45deg, #ff0000, #0000ff);
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
    margin: 10px;
    border: none;
    cursor: pointer;
    gap: 8px;
}

/* Tombol lebih besar untuk Payment */
.large-button {
    font-size: 18px;
    padding: 12px 24px;
}

/* Ukuran lebih kecil untuk tombol kontak */
.small-button {
    padding: 8px 15px;
    font-size: 14px;
}

/* Hover efek */
.button:hover {
    background: linear-gradient(45deg, #800080, #000000);
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
}

/* Animasi klik */
.button:active {
    transform: scale(0.95);
}

/* Tab Hubungi Saya */
#contact {
    margin-top: 20px;
    padding: 10px;
}

/* Menyamakan ukuran tombol WA dengan Email */
.contact-button {
    display: inline-block;
    width: 95px; /* Sesuaikan dengan ukuran Email */
    height: 35px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    padding: 10px;
    border-radius: 8px;
    border: none;
    background-color: #25D366; /* Warna hijau khas WhatsApp */
    color: white;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.contact-button i {
    margin-right: 8px;
}

.contact-button:hover {
    background-color: #1ebe5d;
    transform: scale(1.05);
}


/* Bagian Credits */
#credits {
    margin-top: 20px;
    padding: 10px;
    font-size: 14px;
    text-align: center;
}