/* SKY250 external stylesheet */

			.menubar {
    			background-image: linear-gradient(rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 100%);
			}
		

#navbar-top {background: linear-gradient(#000000, #000000, #000000)}#content {background: linear-gradient(#002042, #002042)}.menubar {background: linear-gradient(#000000, #000000, #000000)}


/* =========================================
   SKY250 FINAL PREMIUM NEON THEME
   BLUE TOOLBAR + DEEP NAVY BLUE BACKGROUND
   ALL BLUE NEON BUTTONS
========================================= */

/* =========================================
   FULL BACKGROUND - DEEP NAVY BLUE
========================================= */

html {
    min-height: 100%;
    background: #061638 !important;
}

body {
    min-height: 100vh;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 50% 15%,
            #187dff44 0%,
            transparent 55%
        ),
        linear-gradient(
            180deg,
            #123d83 0%,
            #092b68 30%,
            #03112f 65%,
            #0b3577 100%
        ) !important;
    background-attachment: fixed !important;
}

/* =========================================
   TEXT & ICONS
========================================= */

main,
.container,
.container-fluid {
    color: #ffffff;
}

.table-bordered > :not(caption) > * > * {
    border-width: 0 1px;
    color: #ffffff !important;
}

.alert-warning {
    --bs-alert-bg: #092552 !important;
    background-color: #092552 !important;
    color: #ffffff;
}

.bi-x-lg::before,
.bi-list::before {
    color: #00eaff;
    text-shadow: 0 0 8px #00eaff;
}

a {
    color: #00eaff;
}

a:hover {
    color: #9af2ff;
    text-shadow: 0 0 9px #00cfff;
}

.my-1,
.my-2,
.mb-0 {
    color: #ffffff;
}

.text-center {
    color: #ffffff;
}

/* =========================================
   ALL TOOLBARS - BLUE ONLY
========================================= */

.navbar,
.glassmorphism,
.bg-primary,
.card-header,
#container-apk {
    background: linear-gradient(
        90deg,
        #002eaa 0%,
        #007bff 25%,
        #00cfff 50%,
        #006aff 75%,
        #002eaa 100%
    ) !important;

    background-size: 300% 300% !important;

    animation:
        blueToolbarFlow 5s ease-in-out infinite alternate,
        blueToolbarGlow 2s ease-in-out infinite alternate !important;

    color: #ffffff !important;

    box-shadow:
        0 0 10px #007bff88,
        inset 0 1px 2px #ffffff77,
        inset 0 -2px 0 #00cfff;

    backdrop-filter: blur(10px);
}

/* NAVIGATION TEXT */

.navbar .nav-link,
.navbar-nav .nav-link {
    color: #ffffff !important;
    font-weight: 800;
    text-shadow: 0 1px 3px #001c59;
}

.navbar .nav-link:hover,
.navbar-nav .nav-link:hover {
    color: #9af2ff !important;
    text-shadow: 0 0 10px #00cfff;
}

/* =========================================
   BACKGROUND UTILITIES
========================================= */

.bg-white {
    background: linear-gradient(
        180deg,
        #0045cc 0%,
        #007bff 50%,
        #002eaa 100%
    ) !important;
    color: #ffffff !important;
}

.bg-primary {
    --bs-bg-opacity: 1;
}

/* =========================================
   BUTTON BASE
========================================= */

.btn {
    border-radius: 9px;
    font-weight: 800;
    transition: transform .2s ease;
}

/* =========================================
   ALL BUTTONS - BLUE TOP, DEEP MID, SKY BOTTOM
   MOVEMENT GOES RIGHT AND BACK LEFT
========================================= */

.btn-primary,
.btn-secondary,
.btn-grad-2,
.btn-grad-3,
.btn-danger,
.btn-dark,
#apk-button {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: #006aff;
    --bs-btn-border-color: #79edff;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #008cff;
    --bs-btn-hover-border-color: #ffffff;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #003fa8;
    --bs-btn-active-border-color: #79edff;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border: 2px solid #79edff !important;
    border-radius: 9px;
    color: #ffffff !important;
    font-weight: 800;
    text-shadow: 0 1px 3px #00144b;
    background: linear-gradient(
        180deg,
        #008cff 0%,
        #006aff 24%,
        #002a85 52%,
        #0062d9 75%,
        #39cfff 100%
    ) !important;
    background-size: 200% 300% !important;
    animation: blueButtonFlow 3.5s ease-in-out infinite alternate,
               blueButtonGlow 1.3s ease-in-out infinite alternate !important;
    box-shadow: inset 0 2px 3px #ffffff88,
                0 0 10px #007bff,
                0 0 20px #00cfff88 !important;
}

.btn-primary::after,
.btn-secondary::after,
.btn-grad-2::after,
.btn-grad-3::after,
.btn-danger::after,
.btn-dark::after,
#apk-button::after {
    content: "";
    position: absolute;
    top: -80%;
    left: -70%;
    width: 35%;
    height: 260%;
    pointer-events: none;
    transform: rotate(25deg);
    background: linear-gradient(90deg, transparent, #ffffffaa, transparent);
    animation: blueShine 2.8s ease-in-out infinite alternate;
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-grad-2:hover,
.btn-grad-3:hover,
.btn-danger:hover,
.btn-dark:hover,
#apk-button:hover {
    color: #ffffff !important;
    border-color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 0 18px #00eaff,
                0 0 35px #007bff !important;
}

.btn-primary,
.btn-secondary,
.btn-grad-2,
.btn-grad-3 { padding: .6em .9em; }
.btn-danger { padding: .6em .5em; }

/* =========================================
   BLUE NEON BLINKING BORDER
========================================= */

.border-primary {
    border: 2px solid #00cfff !important;

    animation:
        blueBorderBlink 1.3s ease-in-out infinite alternate !important;

    fill: #ffffff;
}

/* =========================================
   APK CONTAINER
========================================= */

#container-apk {
    padding: 10px;
}

#container-apk-a {
    text-transform: uppercase;
    font-weight: bold;
    font-size: .7rem;
    color: #ffffff;
}

#container-apk-b {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.1rem;
    color: #ffffff;
    text-shadow: 0 0 8px #00eaff;
}

#container-apk-button {
    float: right;
    text-transform: uppercase;
    font-weight: bold;
}

/* APK BLUE BUTTON */

#apk-button {
    display: inline-block;
    padding: .6em 1.5em;
    border-radius: 2rem;
    box-sizing: border-box;
    text-decoration: none;
    text-align: center;
}

/* =========================================
   INPUTS
========================================= */

.form-control:focus {
    border-color: #00eaff;

    box-shadow:
        0 0 10px #00bfff88;
}

/* =========================================
   OTHER
========================================= */

#navbar-imglogo {
    margin-left: 0 !important;
}

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

/* =========================================
   ANIMATIONS
========================================= */

/* BLUE TOOLBAR GRADIENT */

@keyframes blueToolbarFlow {
    from { background-position: 0% 50%; }
    to { background-position: 100% 50%; }
}

/* BLUE TOOLBAR GLOW */

@keyframes blueToolbarGlow {
    from {
        box-shadow:
            0 0 5px #007bff,
            0 0 10px #0055ff;
    }

    to {
        box-shadow:
            0 0 12px #00cfff,
            0 0 22px #007bff;
    }
}

/* BLUE BUTTON BACK-AND-FORTH */
@keyframes blueButtonFlow {
    from { background-position: 0% 0%; }
    to { background-position: 100% 100%; }
}

@keyframes blueButtonGlow {
    from { box-shadow: inset 0 2px 2px #ffffff77, 0 0 6px #005eff, 0 0 12px #007bff88; }
    to { box-shadow: inset 0 2px 3px #ffffffaa, 0 0 16px #00cfff, 0 0 28px #007bff; }
}

@keyframes blueShine {
    from { left: -70%; }
    to { left: 140%; }
}

/* BLUE BORDER BLINK */

@keyframes blueBorderBlink {
    from {
        border-color: #007bff;
        box-shadow:
            0 0 5px #007bff;
    }

    to {
        border-color: #00eaff;
        box-shadow:
            0 0 12px #00cfff,
            0 0 20px #007bff;
    }
}

/* =========================================
   MOBILE RESPONSIVE
========================================= */

@media (max-width: 768px) {
    body {
        background-attachment: scroll !important;
    }

    .btn-primary,
    .btn-secondary,
    .btn-grad-2,
    .btn-grad-3 {
        font-size: 14px;
    }
}

/* =========================================
   ACCESSIBILITY
========================================= */

@media (prefers-reduced-motion: reduce) {
    .navbar,
    .glassmorphism,
    .bg-primary,
    .card-header,
    #container-apk,
    .border-primary,
    .btn-primary,
    .btn-secondary,
    .btn-grad-2,
    .btn-grad-3,
    .btn-danger,
    .btn-dark,
    #apk-button,
    .btn-primary::after,
    .btn-secondary::after,
    .btn-grad-2::after,
    .btn-grad-3::after,
    .btn-danger::after,
    .btn-dark::after,
    #apk-button::after {
        animation: none !important;
    }
}

/* =========================================
   LOGIN / DAFTAR - BLUE BLOCK NEON
   Add .btn-login / .btn-daftar to buttons if needed.
========================================= */
.btn-login,
.btn-daftar,
a[href*="/login"].btn,
a[href*="/register"].btn,
a[href*="/daftar"].btn,
a[href*="/registrasi"].btn,
a[href*="/signup"].btn,
a[href*="/masuk"].btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    isolation: isolate;
    border: 2px solid #69efff !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    font-weight: 900;
    text-shadow: 0 1px 4px #00144b !important;
    background: linear-gradient(180deg,#008cff 0%,#006aff 24%,#002a85 52%,#0062d9 75%,#39cfff 100%) !important;
    background-size: 200% 300% !important;
    animation: loginBlueFlow 3.5s ease-in-out infinite alternate,loginBlueGlow 1.3s ease-in-out infinite alternate !important;
    box-shadow: inset 0 1px 3px #ffffff88,0 0 10px #00bfff,0 0 20px #001e88 !important;
    padding: .6em 1.1em;
    text-decoration: none !important;
}
.btn-login::after,
.btn-daftar::after,
a[href*="/login"].btn::after,
a[href*="/register"].btn::after,
a[href*="/daftar"].btn::after,
a[href*="/registrasi"].btn::after,
a[href*="/signup"].btn::after,
a[href*="/masuk"].btn::after {
    content: "";
    position: absolute;
    top: -80%;left: -70%;width: 35%;height: 260%;
    transform: rotate(25deg);
    pointer-events: none;
    background: linear-gradient(90deg,transparent,#ffffffaa,transparent);
    animation: blueShine 2.8s ease-in-out infinite alternate;
}
.btn-login:hover,
.btn-daftar:hover,
a[href*="/login"].btn:hover,
a[href*="/register"].btn:hover,
a[href*="/daftar"].btn:hover,
a[href*="/registrasi"].btn:hover,
a[href*="/signup"].btn:hover,
a[href*="/masuk"].btn:hover {
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 0 16px #00eaff,0 0 30px #007bff !important;
}
@keyframes loginBlueFlow {
    from {background-position: 0% 0%;}
    to {background-position: 100% 100%;}
}
@keyframes loginBlueGlow {
    from {box-shadow: inset 0 1px 3px #ffffff77,0 0 6px #007bff,0 0 12px #002eaa;}
    to {box-shadow: inset 0 1px 3px #ffffffaa,0 0 16px #00eaff,0 0 26px #007bff;}
}
@media (prefers-reduced-motion: reduce) {
    .btn-login,.btn-daftar,
    a[href*="/login"].btn,a[href*="/register"].btn,
    a[href*="/daftar"].btn,a[href*="/registrasi"].btn,
    a[href*="/signup"].btn,a[href*="/masuk"].btn,
    .btn-login::after,.btn-daftar::after,
    a[href*="/login"].btn::after,a[href*="/register"].btn::after,
    a[href*="/daftar"].btn::after,a[href*="/registrasi"].btn::after,
    a[href*="/signup"].btn::after,a[href*="/masuk"].btn::after {
        animation: none !important;
    }
}


/* TOP NAVBAR WRAPPER - SOLID DEEP NAVY RGB(0,32,66) */
.navbar-top-wrapper,
.navbar-top-wrapper.navbar,
.navbar-top-wrapper.glassmorphism,
.navbar-top-wrapper.bg-primary {
    background: rgb(0, 32, 66) !important;
    background-image: none !important;
    background-color: rgb(0, 32, 66) !important;
    animation: none !important;
}


/* LOGIN & DAFTAR - RGB RED BRIGHT NEON */
.btn-login, .btn-daftar,
a.btn[href*="login"], a.btn[href*="daftar"],
a.btn[href*="register"], a.btn[href*="registrasi"],
a.btn[href*="signup"], a.btn[href*="masuk"],
button.btn-login, button.btn-daftar,
form button[type="submit"].btn-primary,
form button[type="submit"].btn-grad-2 {
    --bs-btn-bg: rgb(255,1,1);
    --bs-btn-border-color: rgb(255,85,85);
    --bs-btn-hover-bg: rgb(255,1,1);
    background: rgb(255,1,1) !important;
    background-image: none !important;
    background-color: rgba(255,1,1,1) !important;
    color: rgb(255,255,255) !important;
    border: 2px solid rgb(255,95,95) !important;
    border-radius: 9px !important;
    text-shadow: 0 1px 3px rgb(95,0,0) !important;
    box-shadow: inset 0 2px 3px rgba(255,255,255,.45),
                0 0 8px rgba(255,0,0,.9),
                0 0 20px rgba(255,0,0,.65) !important;
    animation: skyRedRgbPulse 1.5s ease-in-out infinite alternate !important;
}
.btn-login::after, .btn-daftar::after,
a.btn[href*="login"]::after, a.btn[href*="daftar"]::after,
a.btn[href*="register"]::after, a.btn[href*="registrasi"]::after,
a.btn[href*="signup"]::after, a.btn[href*="masuk"]::after,
form button[type="submit"].btn-primary::after,
form button[type="submit"].btn-grad-2::after {
    background: linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent) !important;
    animation: skyRedRgbSweep 2.8s ease-in-out infinite !important;
}
.btn-login:hover, .btn-daftar:hover,
a.btn[href*="login"]:hover, a.btn[href*="daftar"]:hover,
a.btn[href*="register"]:hover, a.btn[href*="registrasi"]:hover,
a.btn[href*="signup"]:hover, a.btn[href*="masuk"]:hover,
form button[type="submit"].btn-primary:hover,
form button[type="submit"].btn-grad-2:hover {
    background: rgb(255,1,1) !important;
    box-shadow: 0 0 13px rgba(255,1,1,1), 0 0 29px rgba(255,1,1,.85) !important;
}
@keyframes skyRedRgbPulse {
    from { box-shadow: inset 0 2px 3px rgba(255,255,255,.3),0 0 7px rgba(255,1,1,.65),0 0 15px rgba(255,1,1,.45); }
    to { box-shadow: inset 0 2px 4px rgba(255,255,255,.5),0 0 14px rgba(255,1,1,1),0 0 27px rgba(255,1,1,.85); }
}
@keyframes skyRedRgbSweep {
    from { left: -70%; }
    to { left: 140%; }
}
@media (prefers-reduced-motion: reduce) {
    .btn-login,.btn-daftar,a.btn[href*="login"],a.btn[href*="daftar"],
    a.btn[href*="register"],a.btn[href*="registrasi"],
    form button[type="submit"].btn-primary,form button[type="submit"].btn-grad-2 {animation:none !important;}
}


/* PROMOSI - SAMAKAN DENGAN LOGIN & DAFTAR RGB RED NEON */
.btn-promosi, .btn-promo,
a.btn[href*="promo"], button.btn-promosi,
.btn-grad-3 {
    --bs-btn-bg: rgb(255,1,1);
    --bs-btn-border-color: rgb(255,95,95);
    --bs-btn-hover-bg: rgb(255,1,1);
    position: relative;
    overflow: hidden;
    background: rgba(255,1,1,1) !important;
    background-image: none !important;
    color: #fff !important;
    border: 2px solid rgb(255,95,95) !important;
    border-radius: 9px !important;
    text-shadow: 0 1px 3px rgb(95,0,0) !important;
    box-shadow: inset 0 2px 3px rgba(255,255,255,.45), 0 0 8px rgba(255,0,0,.9), 0 0 20px rgba(255,0,0,.65) !important;
    animation: skyRedRgbPulse 1.5s ease-in-out infinite alternate !important;
}
.btn-promosi::after, .btn-promo::after,
a.btn[href*="promo"]::after, button.btn-promosi::after,
.btn-grad-3::after {
    background: linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent) !important;
    animation: skyRedRgbSweep 2.8s ease-in-out infinite !important;
}
.btn-promosi:hover, .btn-promo:hover,
a.btn[href*="promo"]:hover, button.btn-promosi:hover,
.btn-grad-3:hover {
    background: rgb(255,1,1) !important;
    box-shadow: 0 0 13px rgba(255,1,1,1), 0 0 29px rgba(255,1,1,.85) !important;
}
@media (prefers-reduced-motion: reduce) {
    .btn-promosi,.btn-promo,a.btn[href*="promo"],.btn-grad-3 { animation:none !important; }
}




			.footer {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 15px 0;
				font-size: 12px;
			}

			.footer-logo {
				width: 50%;
    			max-width: 80px;
				height: auto;
				display: block;
				margin: 0 auto;
				transition: filter 0.3s ease;
			}

			.footer p {
				margin: 0;
			}
		


#longtail-content img {
	width: 100%;
}
		
#longtail-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 1rem 0;
	font-size: 0.95rem;
}

#longtail-content th,
#longtail-content td {
	border: 1px solid #dee2e6;
	padding: 0.5rem;
	text-align: left;
	vertical-align: top;
}


/* SKY250: Provider Kami & Cara Pembayaran tanpa efek neon */
/* Menggunakan struktur asli index.php, tanpa mengubah HTML. */
.row:has(a[href*="provider="]) > [class*="col-"] > .glassmorphism,
.row:has(img[src*="/banks/"]) > [class*="col-"] > .glassmorphism {
    animation: none !important;
    background: #0752b9 !important;
    background-image: none !important;
    background-size: auto !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    filter: none !important;
    border-color: transparent !important;
}
.row:has(a[href*="provider="]) > [class*="col-"] > .glassmorphism:hover,
.row:has(img[src*="/banks/"]) > [class*="col-"] > .glassmorphism:hover {
    animation: none !important;
    box-shadow: none !important;
    transform: none !important;
}
.row:has(a[href*="provider="]) .glassmorphism img,
.row:has(img[src*="/banks/"]) .glassmorphism img {
    filter: none !important;
    animation: none !important;
}
.row:has(a[href*="provider="]) .glassmorphism a,
.row:has(img[src*="/banks/"]) .glassmorphism a {
    text-shadow: none !important;
}


/* SKY250 AUTH PAGES: login and register only (CSS-only route detection via form layout) */
/* Login and registration form panels, not the main page background */
body:has(form input[type="password"]):has(a[href*="register"]) #content .card,
body:has(form input[type="password"]):has(a[href*="login"]) #content .card,
body:has(form input[type="password"]):has(a[href*="register"]) #content .glassmorphism,
body:has(form input[type="password"]):has(a[href*="login"]) #content .glassmorphism {
  background: #0b3765 !important;
  background-image: none !important;
  animation: none !important;
  box-shadow: 0 8px 25px rgba(0, 7, 30, .35) !important;
}
/* Submit buttons inside login/register forms */
body:has(form input[type="password"]) #content form button[type="submit"],
body:has(form input[type="password"]) #content form input[type="submit"] {
  background: #ff0101 !important;
  background-image: none !important;
  color: white !important;
  border: 2px solid #ff6262 !important;
  border-radius: 9px !important;
  box-shadow: 0 0 9px #f00, 0 0 19px rgba(255,0,0,.55) !important;
  animation: skyRedRgbPulse 1.5s ease-in-out infinite alternate !important;
  font-weight: 800;
}
body:has(form input[type="password"]) #content form button[type="submit"]:hover,
body:has(form input[type="password"]) #content form input[type="submit"]:hover {
  box-shadow: 0 0 15px #f00, 0 0 28px rgba(255,0,0,.8) !important;
}
@media (prefers-reduced-motion: reduce) {
  body:has(form input[type="password"]) #content form button[type="submit"],
  body:has(form input[type="password"]) #content form input[type="submit"] {animation: none !important;}
}