*{
    /* border: 2px solid red; */
    font-family: sans-serif;
}
@keyframes wiggle {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-5deg);
    }
    50% {
        transform: rotate(5deg);
    }
    75% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.btn1{
    top: 30%;
  
}

.btn1 img{
    width: 70%;
    max-width: 599px;
    animation: pulse 1s infinite;
    animation-timing-function: linear;  
}


@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1);}
    100% { transform: scale(1); }
} 



 /* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
    #bg{
        height: 100vh;
    }

}


/* 404 Page */
.error
{
    height: 100vh;
}

.content h1
{
    font-size: 8rem !important;
}

.content p
{
    font-weight: 600;
    color: red;
    font-size: 1.5rem;
}

.content span
{
    color: #898989;
    font-size: 1.5rem;
}

.btn-error img{
    width: 88%;
    max-width: 599px;
    animation: pulse 0.8s infinite;
    animation-timing-function: linear;  
}

/* --- CSS UNTUK POPUP --- */
        .modal {
            display: none; /* Disembunyikan secara default */
            position: fixed; /* Tetap di tempat */
            z-index: 1000; /* Tampil paling depan */
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.6); /* Latar belakang gelap transparan */
            justify-content: center; /* Posisi horizontal di tengah */
            align-items: center; /* Posisi vertikal di tengah */
        }

        .modal-content {
         background: linear-gradient(158deg, #850000 0%, #292217 100%);
         color: #fff;
         padding: 20px; /* <--- DIKURANGI */
         border-radius: 10px;
         width: 90%;
         max-width: 380px; /* <--- DIKURANGI */
         text-align: center;
         position: relative;
         box-shadow: 0 5px 25px rgba(0,0,0,0.5);
        }

        /* Wadah untuk mensejajarkan kedua tombol */
         .button-container {
         display: flex;              /* KUNCI UTAMA: Mengaktifkan layout flexbox agar item sejajar */
         justify-content: center;    /* Opsional: Menengahkan grup tombol */
         gap: 15px;                  /* Memberi jarak antar tombol */
         margin-top: 20px;
        }

        /* Mengatur agar setiap tombol memiliki lebar yang fleksibel */
         .button-container .popup-button {
         flex: 1; /* Membuat kedua tombol berbagi ruang secara merata */
         /* Hapus 'width: 100%' jika ada, agar tidak memenuhi satu baris penuh */
        }

        /* Style umum untuk tombol di popup (sebagian besar sama seperti sebelumnya) */
        .popup-button {
         flex: 1;
         padding: 12px 10px;
         background: linear-gradient(180deg, #2C2B34 0%, #0F1527 100%);
         color: #BC9149;
         border: none;
         border-radius: 5px;
         font-weight: bold;
         font-size: 1em;
         text-decoration: none;
         cursor: pointer;
         text-align: center;
    
        /* Menambahkan transisi untuk efek hover yang mulus */
         transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
        }

        /* Efek hover (terangkat) */
         .popup-button:hover {
         transform: translateY(-4px); /* Angkat tombol sedikit ke atas */
         box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); /* Tambahkan bayangan */
        }

        /* Warna khusus untuk tombol copy */
         .copy-button {
         background-color: #007bff; /* Biru */
        }

        /* Efek hover untuk tombol copy */
         .copy-button:hover {
         background-color: #BC9149;
        }

       /* Style untuk kode agar mudah dikenali */
         #redeemCode {
         padding: 3px 6px;
         border-radius: 4px;
         font-weight: bold;
         color: #ffffff;
        }
        
        /* Animasi muncul */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: scale(0.9);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        .close-button {
            color: #aaa;
            position: absolute;
            top: 10px;
            right: 15px;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }
        
        .modal-content h2 {
            margin-top: 0;
            color: #ffffff;
        }
        
        .modal-content p {
            color: #ffffff;
        }

        .popup-button {
            display: inline-block;
            padding: 12px 25px;
            margin-top: 15px;
            background: transparent linear-gradient(180deg, #2C2B34 0%, #0F1527 100%) 0% 0% no-repeat padding-box;
            color: #BC9149;
            text-decoration: none;
            border-radius: 5px;
            font-weight: bold;
        }
        /* --- AKHIR DARI CSS POPUP --- */
        
        .follow-us-section {
        /* Properti Posisi untuk melayang di atas background */
         position: absolute;      
         top: 72%;                 
         left: 50%;               
         transform: translateX(-50%); 
         width: 99.8%;              
         max-width: 800px;        
         z-index: 10;             

        /* Gaya Visual dari kode Anda */
         padding: 30px 20px;
         background: transparent linear-gradient(158deg, #850000 0%, #292217 100%) 0% 0% no-repeat padding-box;
         border-radius: 15px;
         text-align: center;
        }

        .follow-us-section h2 {
         color: #d9a31d;
         font-size: 24px;
         margin-bottom: 10px;
        }

        .follow-us-section p {
         color: #ffffff;
         font-size: 14px;
         line-height: 1.6;
         margin-bottom: 20px;
        }

        .social-media {
         display: flex;
         justify-content: center;
         gap: 15px;
        }

        .social-icon {
         width: 50px;
         height: 50px;
         background-color: #6f0007;
         border-radius: 8px;
         border: 1px solid #d9a31d;
         padding: 5px;
         box-shadow: 3px 4px 4px #990100, inset 3px 3px 6px #640000;
         transition: all 0.3s ease;
         display: flex;
         align-items: center;
         justify-content: center;
        }

        .social-icon:hover {
         transform: scale(1.1);
         box-shadow: 3px 4px 4px #c00000, inset 3px 3px 6px #640000;
        }

        .social-icon img {
         width: 100%;
         height: 100%;
         object-fit: contain;
        }

    @media (min-width: 992px) { 
     .btn-error img{
         width: 17%;
    }
}