<style>



.btn-primary {  
    color: #ffffff;
    border-color: #ff0000;
    background: linear-gradient(270deg, rgba(139, 0, 0, 1) 0%, rgba(210, 0, 0, 1) 21%, rgba(139, 0, 0, 1) 33%, rgba(210, 0, 0, 1) 44%, rgba(139, 0, 0, 1) 60%, rgb(210, 0, 0, 1) 73%, rgb(139, 0, 0, 1) 85%, rgba(210, 0, 0, 1) 100%);
    background-size: 400% 400%;
    animation: gradient 5s ease infinite;
    box-shadow: inset 0 0 5px 3px #e60e00, inset 0 2px 0 0 #fff, inset 0 0 0 2px #e20000, 3px 3px 3px 1px rgba(0, 0, 0, 1);
}



.btn-danger {   
    color: #000000;
    border-color: #ffe400;
    background: linear-gradient(270deg, rgba(201, 138, 0, 1) 0%, rgba(255, 248, 59, 1) 21%, rgba(255, 245, 59, 1) 33%, rgba(211, 158, 7, 1) 44%, rgba(215, 166, 9, 1) 60%, rgb(255 245 59) 73%, rgb(255 248 59) 85%, rgba(201, 138, 0, 1) 100%);
    background-size: 400% 400%;
    animation: gradient 5s ease infinite;
    box-shadow: inset 0 0 5px 3px #ffe100, inset 0 2px 0 0 #000000, inset 0 0 0 2px #ffe100, 3px 3px 3px 1px rgba(0, 0, 0, 1); 
}

#sidebarCollapse {
  color: black;
  border-color: #f5f0d0;
  background: linear-gradient(270deg,#f5f0d0 0%, #e8d9a0 20%, #d6c088 35%, #cdb67e 50%, #bfa76f 65%, #d6c088 80%,  #e8d9a0 90%,  #f5f0d0 100% );
  background-size: 400% 400%;
  animation: gradient 5s ease infinite;
  box-shadow: inset 0 0 5px 3px #f5f0d0, inset 0 2px 0 0 #000000, inset 0 0 0 2px #f5f0d0, 3px 3px 3px 1px rgba(0, 0, 0, 1);  
}


.border-primary { animation: borderPulse 1s infinite ease-out; }

.owl-stage-outer { padding-bottom:10px; padding-top:10px }

@keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes borderPulse{
    0% { box-shadow: 0px 0px 0px 5px rgba(255, 255, 255, 0.4), 0px 0px 0px 0px rgb(255, 255, 255); }
    100% { box-shadow: 0px 0px 0px 3px rgba(255, 117, 117, 0), 0px 0px 0px 10px rgba(255, 0, 0, 0); }
}
 
#announcement {
    max-width: 1300px; 
    margin: 0 auto; 
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
}

#announcement marquee {
    width: 100%;
}



.tab-pane {
    background-color: rgba(0, 0, 0, 0.7); 
    color: white; 
    padding: 20px; 
    border-radius: 12px; 
}

.tab-pane h3 {
    color: #FFD700;
}

.tab-pane a {
    color: #00BFFF; 
    text-decoration: none; 
}

.tab-pane a:hover {
    text-decoration: underline;
}

.tab-pane ul {
    list-style-type: square;
    margin-left: 20px;
}

.tab-pane li {
    margin-bottom: 8px;
}

.tab-pane strong {
    color: #FF4500; 
}

.progress {
  background-color: #000;
  border-radius: 10px;
  overflow: hidden;
  height: 16px;
}

.progress-bar {
  background-color: #ff0000;
  height: 100%;
  transition: width 0.3s ease-in-out;
}


.card.border-primary {
    background-image: url('https://data.z-assets.site/facai/img/background_polos_saldo.png');
    background-size: 100% 100%;
    background-position: center; 
    background-repeat: no-repeat; 
    width: 200px;
    height: 120px;
    border-radius: 12px;
    color: transparent;
    box-shadow: var(--bs-card-box-shadow);
    transition: box-shadow 0.3s ease;
}


.card.border-primary .text-center .my-1,
.card.border-primary .text-center h2 a,
.card.border-primary .text-center .togel-countdown-timer {
    background: linear-gradient(90deg, rgba(82,0,0,1) 0%, rgba(207,0,0,1) 35%, rgba(255,0,0,1) 50%, rgba(213,0,0,1) 65%, rgba(82,0,0,1) 100%);
    background-size: 800% 800%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: animated-gradient 5s ease infinite;
    font-weight: bold;
}

@keyframes animated-gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.card.border-primary .text-center h2 a:hover {
    color: #000000;
}

.card h1.text-center {
    color: inherit !important;
    background: none !important;
    box-shadow: none !important;
}
h2.bg-white {
    background-color: transparent !important;
}
@media (max-width: 576px) {
    .card.border-primary {
        width: 100% !important;
        height: auto;
        margin-bottom: 10px; 
    }

    .card.border-primary .text-center h2 {
        font-size: 2em;
    }

    .card.border-primary .text-center .my-1 {
        font-size: 0.7em; 
    }
}

.container .col-lg-6 .card.p-3.my-3.shadow {
    background-image: url('https://data.z-assets.site/facai/img/background_login.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: auto;
    border-radius: 12px;
    color: red;
    box-shadow: var(--bs-card-box-shadow);
    transition: box-shadow 0.3s ease;
    text-align: center;
    font-weight: bold;
}

#row-quicklogin {
  background-image: url('https://data.z-assets.site/facai/img/background_daftar.png');
  box-shadow: none !important;
  border: none !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    text-align: center;
}

.container .card.p-3.my-3.shadow {
    background-image: url('https://data.z-assets.site/facai/img/background_daftar.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: auto;
    border-radius: 12px;
    color: white;
    box-shadow: var(--bs-card-box-shadow);
    transition: box-shadow 0.3s ease;
    text-align: center;
    color: red;
    font-weight: bold;
}


.card .card-body h1 a {
    background: linear-gradient(270deg, #ff0000, #940101, #ff0000 , #a00000, #ff0000);
    background-size: 800% 800%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: animated-gradient 5s ease infinite;
    font-weight: bold;
}

select {
    border: 2px solid red !important;
    background-color: #000 !important;
    color: #fff !important;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 30px;
    background-image: url('data:image/svg+xml;utf8,<svg fill="white" height="20" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
}



.form-control {
    background-color: #000 !important; /* tetap hitam */
    color: #fff !important;            /* teks putih */
    border: 2px solid red !important;
}


.form-control:focus {
    background-color: #000 !important;
    color: #fff !important;
    border-color: red !important;
    box-shadow: none;
}

.form-control::placeholder {
    color: #aaa;
}

.form-control:focus {
    box-shadow: 0 0 5px red;
}

.text-center a[href="/register"] {
    color: #000000; 
    font-weight: bold;
    font-size: 0.9em;
    text-decoration: none;
    transition: all 0.3s ease;
}

.text-center a[href="/register"]:hover {
    color: #ff0000;
    text-shadow: 0 0 5px #000000;
    text-decoration: underline;
}

.text-center a[href="/login"] {
    color: #ff0000;
    font-weight: bold;
    font-size: 0.9em;
    text-decoration: none;
    transition: all 0.3s ease;
}

.text-center a[href="/login"]:hover {
    color: #ffffff;
    text-shadow: 0 0 5px #000000;
    text-decoration: underline;
}



.glassmorphism {
  color: #000000;
  background: url('https://data.z-assets.site/facai/img/background_polos.png') no-repeat center center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  text-align: center;
}

.glassmorphism .text-gradient {
    color: #ff0000 !important; /* warna merah solid */
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
}


.glassmorphism a.text-decoration-none span:last-of-type {
	color: #ff0000 !important; 
}



.glassmorphism .deposit-time {
    text-align: center;
}


.glassmorphism .progress {
    width: 80%;
    margin: 0 auto; /* Biar tetap di tengah */
    border-radius: 10px;
    overflow: hidden;
}

.glassmorphism .progress-bar {
    height: 16px;
}

.fa-whatsapp {
    color: #25D366; 
    filter: none;  
}

.fa-whatsapp:hover {
    color: #128C7E; 
}

.fa-telegram {
    color: #0088cc; 
    filter: none;  
}

.fa-telegram:hover {
    color: #0077b5; 
}

.fa-instagram {
    color: #833AB4; 
    filter: none;  
}

.fa-instagram:hover {
    color: #d72d4d; 
}


.fa-youtube{
    color: #FF0000; 
    filter: none;  
}

.fa-youtube:hover {
    color: #cc0000; 
}

.fa-facebook{
    color: #1877F2; 
    filter: none;  
}

.fa-facebook:hover {
    color: #145dbf; 
}

.fa-tiktok {
    color: #010101; 
    filter: none;  
}

.fa-tiktok:hover {
    color: #1c1c1c; 
}

.fa-twitter {
    color: #1DA1F2; 
    filter: none;  
}

.fa-twitter:hover {
    color: #0d8ddf; 
}

#promotion-content {
    background-color: rgba(0, 0, 0, 0.6); /* Transparansi 60% */
    padding: 15px;
    border-radius: 12px;
}

.btn.btn-sm.btn-outline-primary.py-2 {
    background: rgba(0, 0, 0, 0.5);
    color: #ffffff;
    }
    
    .btn.btn-outline-primary.rounded-3 {
    background: rgba(0, 0, 0, 0.5);
    color: #ffffff;
    }
    
    
    .btn.btn-outline-primary.m-1 {
     background: linear-gradient(270deg, rgba(139, 0, 0, 1) 0%, rgba(210, 0, 0, 1) 21%, rgba(139, 0, 0, 1) 33%, rgba(210, 0, 0, 1) 44%, rgba(139, 0, 0, 1) 60%, rgb(210, 0, 0, 1) 73%, rgb(139, 0, 0, 1) 85%, rgba(210, 0, 0, 1) 100%);
    border-color: none;
    color: #ffffff;
        background-size: 400% 400%;
        animation: gradient 5s ease infinite;
        box-shadow: inset 0 0 5px 3px #e60e00, inset 0 2px 0 0 #fff, inset 0 0 0 2px #e20000, 3px 3px 3px 1px rgba(0, 0, 0, 1);
    }
    
    .btn.btn-outline-primary.m-1 {
        border-radius: 8px; 
    }
    
    
    
    .nav-link.active {
       color: #ffffff;
        border-color: none;
        background: linear-gradient(270deg, rgba(139, 0, 0, 1) 0%, rgba(210, 0, 0, 1) 21%, rgba(139, 0, 0, 1) 33%, rgba(210, 0, 0, 1) 44%, rgba(139, 0, 0, 1) 60%, rgb(210, 0, 0, 1) 73%, rgb(139, 0, 0, 1) 85%, rgba(210, 0, 0, 1) 100%);
        background-size: 400% 400%;
        animation: gradient 5s ease infinite;
        box-shadow: inset 0 0 5px 3px #e60e00, inset 0 2px 0 0 #fff, inset 0 0 0 2px #e20000, 3px 3px 3px 1px rgba(0, 0, 0, 1);
    }

</style>