:root {
	--maroon-deep: #6b0000;
	--maroon-core: #aa0000;
	--maroon-mid: #cc0000;
	--maroon-light: #ee2222;
	--maroon-shine: #ff5555;
	--maroon-hot: #ff8888;

	--gold-deep: #996600;
	--gold-core: #cc9900;
	--gold-bright: #ffbb00;
	--gold-shine: #ffdd00;
	--gold-white: #ffee88;
	--gold-pure: #ffffff;

	--bg-void: #0d0000;
	--bg-base: #150000;
	--bg-surface: #1e0000;
	--bg-raised: #2a0000;
	--bg-card: #310505;

	--text-primary: #fff5dc;
	--text-secondary: #ffcc77;
	--text-muted: #bb9966;

	--gold-gradient:
		linear-gradient(135deg,
			#996600 0%,
			#cc9900 15%,
			#ffbb00 30%,
			#ffee88 45%,
			#ffffff 50%,
			#ffee88 55%,
			#ffbb00 70%,
			#cc9900 85%,
			#996600 100%);

	--maroon-gradient:
		linear-gradient(to bottom, #830000 0, #530000 100%);

	--gold-glow: 0 0 10px #ffdd00cc, 0 0 25px #ffbb00aa, 0 0 50px #cc990077;
	--maroon-glow: 0 0 10px #ff5555cc, 0 0 25px #cc0000aa, 0 0 50px #aa000077;
}

body {
	background-color: var(--bg-void) !important;
	background-image:
		radial-gradient(ellipse 90% 55% at 50% -5%, #7a0000 0%, transparent 65%),
		url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%22%20height%3D%22100%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23200f0f%22%20stroke-width%3D%221.5%22%20d%3D%22m9%205l3-3l3%203h4v4l3%203l-3%203v4h-4l-3%203l-3-3H5v-4l-3-3l3-3V5z%22%2F%3E%3C%2Fsvg%3E");
	background-attachment: fixed;
	color: var(--text-primary);
}

.wrapper {
	max-width: 1100px;
	margin: 0 auto;
	position: relative;
}

#navbar-top-wrapper {
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 1100px;
}

.navbar.fixed-bottom {
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 1100px;
	position: fixed;
}

#navbar-top {
	background: #000 !important;
	border-bottom: 2px solid var(--gold-bright);
	box-shadow:
		0 2px 20px #cc000099,
		0 0 0 1px #ffbb0044,
		inset 0 -1px 0 #ffbb0033;
}

#sidebar {
	background: var(--maroon-gradient) !important;
	border-right: 2px solid var(--gold-bright);
	box-shadow: 4px 0 30px #aa000077;
}

#sidebar .nav-link {
	color: var(--text-secondary) !important;
	transition: color 0.25s, background 0.25s, letter-spacing 0.25s !important;
	border-radius: 6px !important;
	font-weight: 700;
	letter-spacing: 0.04em;
	display: flex;
	align-items: center;
	cursor: pointer;
	text-decoration: none;
	padding: 10px 14px;
	background: rgb(75 0 0);
	border: 1px solid rgb(255 209 0);
	border-radius: 14px;
	transition: all 0.3s ease;
}

#sidebar .nav-link:hover {
	color: #ffffff !important;
	background: linear-gradient(90deg, #aa000066, transparent) !important;
	letter-spacing: 0.08em;
	text-shadow: 0 0 12px var(--gold-shine), 0 0 24px var(--gold-bright);
}

.menubar {
	background-image: var(--maroon-gradient) !important;
	border-bottom: 2px solid var(--maroon-mid);
	box-shadow:
		0 3px 16px #aa000077,
		inset 0 1px 0 #ffbb0055,
		inset 0 -1px 0 #cc000055;
	position: relative;
	overflow: hidden;
}

button#sidebarCollapse,
#sidebar button#dismiss {
	background: var(--maroon-gradient) !important;
	border: 0;
}


.menubar::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 55%;
	height: 100%;
	background: linear-gradient(90deg,
			transparent 0%,
			rgba(255, 187, 0, 0.08) 35%,
			rgba(255, 238, 136, 0.22) 50%,
			rgba(255, 187, 0, 0.08) 65%,
			transparent 100%);
	animation: menubar-sweep 4s linear infinite;
	pointer-events: none;
}

@keyframes menubar-sweep {
	0% {
		left: -70%;
	}

	100% {
		left: 160%;
	}
}

.menubar a.text-decoration-none,
.menubar .text-white {
	color: var(--text-secondary) !important;
	transition: color 0.2s, text-shadow 0.2s;
}

.menubar a:hover {
	color: #ffffff !important;
	text-shadow: var(--gold-glow);
}

.menubar img {
	filter: drop-shadow(0 0 5px var(--gold-bright)) brightness(1.1);
	transition: filter 0.3s;
}

.menubar a:hover img {
	filter: drop-shadow(0 0 10px var(--gold-shine)) brightness(1.3);
}

.navbar.fixed-bottom {
	background: var(--maroon-gradient) !important;
	border-top: 2px solid var(--gold-bright);
	box-shadow: 0 -3px 20px #cc000088;
}

.navbar.fixed-bottom a {
	color: var(--text-secondary) !important;
	transition: color 0.2s, text-shadow 0.2s;
}

.navbar.fixed-bottom a:hover {
	color: #ffffff !important;
	text-shadow: var(--gold-glow);
}

.navbar.fixed-bottom img {
	filter: drop-shadow(0 0 4px var(--gold-core));
	transition: filter 0.3s;
}

.navbar.fixed-bottom a:hover img {
	filter: drop-shadow(0 0 10px var(--gold-shine)) brightness(1.3);
}

div#row-quicklogin form .d-flex.gap-1.my-3 {
	display: block !important;
}

div#row-quicklogin form .d-flex.gap-1.my-3 .btn {
	width: 100%;
	margin-bottom: 10px;
}


.btn-primary,
.btn-primary.glowing {
	background: var(--maroon-gradient) !important;
	border: 1px solid var(--maroon-shine) !important;
	color: #ffffff !important;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-shadow: 0 0 8px rgba(0, 0, 0, 0.6), 0 0 16px #ff444466;
	position: relative;
	overflow: hidden;
	transition: box-shadow 0.3s, transform 0.2s !important;
	animation: maroon-pulse 2.5s ease-in-out infinite !important;
}

.btn-primary::after {
	content: '';
	position: absolute;
	top: -50%;
	left: -65%;
	width: 45%;
	height: 200%;
	background: linear-gradient(105deg,
			transparent 0%,
			rgba(255, 200, 100, 0.2) 40%,
			rgba(255, 255, 200, 0.55) 50%,
			rgba(255, 200, 100, 0.2) 60%,
			transparent 100%);
	transform: skewX(-15deg);
	animation: btn-shine 2.8s ease-in-out infinite;
}

.btn-primary:hover {
	box-shadow: 0 0 16px #ff5555cc, 0 0 35px #cc0000aa, 0 0 60px #aa000066 !important;
	transform: translateY(-2px) !important;
}

.btn-secondary,
.btn-secondary.glowing {
	background: var(--gold-gradient) !important;
	border: 1px solid var(--gold-white) !important;
	color: #3a0000 !important;
	font-weight: 900;
	letter-spacing: 0.08em;
	text-shadow: 0 1px 3px rgba(255, 255, 180, 0.7);
	position: relative;
	overflow: hidden;
	transition: box-shadow 0.3s, transform 0.2s !important;
	animation: gold-pulse 2.5s ease-in-out infinite !important;
}

.btn-secondary::after {
	content: '';
	position: absolute;
	top: -50%;
	left: -65%;
	width: 45%;
	height: 200%;
	background: linear-gradient(105deg,
			transparent 0%,
			rgba(255, 255, 255, 0.25) 40%,
			rgba(255, 255, 255, 0.7) 50%,
			rgba(255, 255, 255, 0.25) 60%,
			transparent 100%);
	transform: skewX(-15deg);
	animation: btn-shine 2.8s ease-in-out infinite;
	animation-delay: 1.4s;
}

.btn-secondary:hover {
	box-shadow: 0 0 16px #ffdd00cc, 0 0 35px #ffbb00aa, 0 0 60px #cc990066 !important;
	transform: translateY(-2px) !important;
}

.btn-danger {
	background: var(--maroon-gradient) !important;
	border: 1px solid var(--maroon-hot) !important;
	color: #ffffff !important;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
	position: relative;
	overflow: hidden;
	animation: maroon-pulse 2.2s ease-in-out infinite !important;
}

.btn-danger:hover {
	box-shadow: 0 0 16px #ff5555cc, 0 0 35px #cc0000aa !important;
	transform: translateY(-2px) !important;
}

@keyframes btn-shine {
	0% {
		left: -65%;
		opacity: 0;
	}

	10% {
		opacity: 1;
	}

	50% {
		left: 120%;
		opacity: 1;
	}

	51% {
		opacity: 0;
	}

	100% {
		left: 120%;
		opacity: 0;
	}
}

@keyframes gold-pulse {

	0%,
	100% {
		box-shadow: 0 0 8px #ffbb00bb, 0 0 18px #cc990088;
	}

	50% {
		box-shadow: 0 0 18px #ffdd00ee, 0 0 35px #ffbb00cc, 0 0 60px #cc9900aa;
	}
}

@keyframes maroon-pulse {

	0%,
	100% {
		box-shadow: 0 0 8px #cc0000bb, 0 0 18px #aa000088;
	}

	50% {
		box-shadow: 0 0 18px #ff5555ee, 0 0 35px #cc0000cc, 0 0 60px #aa0000aa;
	}
}

.btn-primary:active,
.btn-secondary:active,
.btn-danger:active {
	transform: scale(0.96) !important;
	transition: transform 0.1s !important;
}

.card {
	background: var(--maroon-gradient) !important;
	border-color: var(--gold-bright) !important;
	box-shadow:
		0 4px 20px #aa000055,
		inset 0 1px 0 #ffbb0033;
	color: var(--text-primary) !important;
	transition: box-shadow 0.3s, border-color 0.3s;
}

.card:hover {
	border-color: var(--gold-shine) !important;
	box-shadow:
		0 6px 30px #cc000088,
		0 0 0 1px #ffdd0044,
		inset 0 1px 0 #ffbb0055 !important;
}

#carousel-togel .card {
	border-width: 2px !important;
	border-color: var(--gold-bright) !important;
	background: var(--maroon-gradient) !important;
}

#carousel-togel .card:hover {
	border-color: var(--gold-shine) !important;
	box-shadow: 0 0 20px var(--gold-bright), 0 0 40px var(--maroon-core) !important;
}

.card .bg-white {
	color: #ffffff !important;
}

.card .text-secondary {
	color: var(--text-secondary) !important;
}

#row-quicklogin.card {
	background-color: transparent !important;
}

.form-control {
	background-color: #220000 !important;
	border-color: var(--maroon-mid) !important;
	color: var(--text-primary) !important;
	transition: border-color 0.25s, box-shadow 0.25s;
}

.form-control:focus {
	background-color: #2c0000 !important;
	border-color: var(--gold-bright) !important;
	box-shadow: 0 0 0 3px rgba(255, 187, 0, 0.35) !important;
	color: #ffffff !important;
}

.form-control::placeholder {
	color: var(--text-muted) !important;
}

.form-label {
	color: var(--text-secondary);
	font-weight: 700;
	font-size: 0.85em;
	letter-spacing: 0.04em;
}

.input-group .form-control {
	background-color: #1e0000 !important;
	border-color: var(--maroon-mid) !important;
	color: var(--text-primary) !important;
}

.input-group .btn-primary {
	background: var(--maroon-gradient) !important;
	border-color: var(--maroon-shine) !important;
	color: #ffffff !important;
	animation: none !important;
}

.input-group .btn-primary:hover {
	box-shadow: 0 0 12px #ff5555cc !important;
	transform: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	background: linear-gradient(135deg, #cc9900 0%, #ffbb00 20%, #ffee88 35%, #ffffff 50%, #ffee88 65%, #ffbb00 80%, #cc9900 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	background-size: 200% auto;
	animation: gold-text-flow 5s linear infinite;
	font-weight: 800;
	letter-spacing: 0.02em;
	filter: drop-shadow(0 0 6px #ffbb0066);
}

@keyframes gold-text-flow {
	0% {
		background-position: 0% center;
	}

	100% {
		background-position: 200% center;
	}
}

a.text-decoration-none {
	color: var(--gold-bright) !important;
	transition: color 0.2s, text-shadow 0.2s;
}

a.text-decoration-none:hover {
	color: #ffffff !important;
	text-shadow: var(--gold-glow);
}

.row.mb-3 [class*="col-"] a img {
	border-radius: 8px;
	border: 1px solid #aa000055;
	transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}

.row.mb-3 [class*="col-"] a:hover img {
	transform: scale(1.07) translateY(-3px);
	border-color: var(--gold-bright);
	box-shadow:
		0 0 14px #ffbb00cc,
		0 0 28px #cc0000aa,
		0 10px 22px #00000088;
}

.glassmorphism {
	background: var(--maroon-gradient) !important;
	border: 1px solid var(--gold-core) !important;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.glassmorphism:hover {
	background: var(--gold-gradient) !important;
	border-color: var(--gold-shine) !important;
	box-shadow:
		0 0 18px #ffbb00bb,
		0 0 35px #cc0000aa !important;
}

.glassmorphism img {
	filter: drop-shadow(0 0 7px rgba(255, 187, 0, 0.55)) brightness(1.1);
	transition: filter 0.3s;
}

.glassmorphism:hover img {
	filter: drop-shadow(0 0 14px var(--gold-shine)) brightness(1.3);
}

.carousel-inner img,
.carousel-item img {
	border-radius: 8px;
	box-shadow: 0 4px 24px #7a0000bb;
}

.togel-countdown-timer {
	color: var(--gold-bright) !important;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-shadow: 0 0 10px var(--gold-shine), 0 0 20px var(--gold-core);
}

.fa-brands {
	color: var(--gold-bright) !important;
	transition: color 0.2s, text-shadow 0.2s, transform 0.2s;
	display: inline-block;
}

.fa-brands:hover {
	color: #ffffff !important;
	text-shadow: var(--gold-glow);
	transform: scale(1.25) translateY(-3px);
}

#dismiss {
	color: var(--gold-bright) !important;
	transition: color 0.2s, text-shadow 0.2s;
}

#dismiss:hover {
	color: #ffffff !important;
	text-shadow: var(--gold-glow);
}

#sidebarCollapse i {
	color: var(--gold-bright);
	transition: color 0.2s, text-shadow 0.2s;
}

#sidebarCollapse:hover i {
	color: #ffffff;
	text-shadow: var(--gold-glow);
}

.overlay {
	background: rgba(40, 0, 0, 0.78) !important;
	backdrop-filter: blur(3px);
}

.footer {
	background: linear-gradient(180deg, transparent, #130000);
	color: var(--text-muted);
	border-top: 1px solid var(--gold-core);
	padding: 20px 0 !important;
}

.owl-dots .owl-dot span {
	background: var(--maroon-mid) !important;
}

.owl-dots .owl-dot.active span {
	background: var(--gold-bright) !important;
	box-shadow: 0 0 8px var(--gold-shine);
}

::-webkit-scrollbar {
	width: 6px;
}

::-webkit-scrollbar-track {
	background: #0d0000;
}

::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, var(--gold-bright), var(--maroon-core));
	border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(180deg, var(--gold-shine), var(--maroon-mid));
}

.bg-dark {
	background-color: transparent !important;
}

.text-white {
	color: var(--text-primary) !important;
}

@media (max-width: 767px) {
	.menubar::before {
		animation-duration: 3s;
	}

	.btn-primary,
	.btn-secondary,
	.btn-danger {
		font-size: 0.9em;
	}
}

.flex-grow-1.text-center.align-middle>a {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	text-align: center;
}

.flex-grow-1.text-center.align-middle>a img {
	position: relative;
	z-index: 2;
	width: 30px;
	height: 45px;
	object-fit: contain;
	display: block;
	padding: 3px;
	box-sizing: content-box;
}

.flex-grow-1.text-center.align-middle>a::before {
	content: "";
	position: absolute;
	top: -2px;
	left: 50%;
	transform: translateX(-50%);
	width: 50px;
	height: 60px;
	background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmQfXjg5sIJzgE8JfB6epMOxi6yIiYxSjFYomrEFz3e5fi0SLcbzENmUEMFf8qVkF-HVC8ANjoaAp7c1sDcF3NDKvi0baaPxER8VAv6rF1hYXjv4z0UgQrMAOnY4rn2SzyzHrioZ9F2hf9u6rKQGWZbgNBx_QJVJ0Z979MLAdT3uzT97eFvN4uP5OrTw/s1600/34736078_2210_w026_n002_2595b_p1_2595.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	z-index: 1;
	pointer-events: none;
}


#category-navbar .owl-item .item .text-center>a {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 4px;
	text-align: center;
	min-width: 40px;
	padding-top: 6px;
}

#category-navbar .owl-item .item .text-center>a img {
	position: relative;
	z-index: 2;
	width: 30px !important;
	height: 35px !important;
	max-width: 30px !important;
	max-height: 35px !important;
	object-fit: contain;
	display: block !important;
	margin: 0 auto;
	padding: 3px;
	box-sizing: content-box;
}

#category-navbar .owl-item .item .text-center>a::before {
	content: "";
	position: absolute;
	top: -2px;
	left: 50%;
	transform: translateX(-50%);
	width: 55px;
	height: 62px;
	background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmQfXjg5sIJzgE8JfB6epMOxi6yIiYxSjFYomrEFz3e5fi0SLcbzENmUEMFf8qVkF-HVC8ANjoaAp7c1sDcF3NDKvi0baaPxER8VAv6rF1hYXjv4z0UgQrMAOnY4rn2SzyzHrioZ9F2hf9u6rKQGWZbgNBx_QJVJ0Z979MLAdT3uzT97eFvN4uP5OrTw/s1600/34736078_2210_w026_n002_2595b_p1_2595.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	z-index: 1;
	pointer-events: none;
}

#category-navbar .owl-item .item .text-center>a>div {
	position: relative;
	z-index: 2;
	margin-top: 4px;
}

#selectProvider .btn-outline-primary.active,
#selectProvider .btn-outline-primary.active:hover {
	background: var(--maroon-gradient) !important;
}

#selectProvider .btn-outline-primary {
	border: 1px solid var(--maroon-shine) !important;
	color: #ffffff !important;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-shadow: 0 0 8px rgba(0, 0, 0, 0.6), 0 0 16px #ff444466;
	position: relative;
	overflow: hidden;
	transition: box-shadow 0.3s, transform 0.2s !important;
	animation: maroon-pulse 2.5s ease-in-out infinite !important;
}

div#selectProvider img {
	border-radius: 0;
	border: 0;
}

div#selectProvider img {
	transform: scale(1.07) translateY(-3px);
}

#member-status-panel .text-gradient {
	color: var(--gold-bright) !important;
	transition: color 0.2s, text-shadow 0.2s;
	background: linear-gradient(135deg, #cc9900 0%, #ffbb00 20%, #ffee88 35%, #ffffff 50%, #ffee88 65%, #ffbb00 80%, #cc9900 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	background-size: 200% auto;
	animation: gold-text-flow 5s linear infinite;
	font-weight: 800;
	letter-spacing: 0.02em;
	filter: drop-shadow(0 0 6px #ffbb0066);
}

#content {
	box-shadow: 0px 0px 50px 16px #4a0404;
	background: #000000a1;
}

body {
	background-color: var(--bg-void) !important;
	background-image: radial-gradient(ellipse 90% 55% at 50% -5%, #7a0000 0%, transparent 65%), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgREQLzmuh9rGM-EsDVK9HtcF8ZnsPw0k3Vh2TbZG7O12lATG5Nc9htnUAUfiiUFEKSPqQn7Hsuw8lS_7eJ7BP0UXiU0txE46ic5CA71D9cxX7ZYff8yil4r9hclc-1D04mCm5Icc959pCh7IOlAT85uaWGhtwMyyrpmDOp0h-T_RzOujxU-7ULTN1-Mg/s16000/sempurna-background-mobile.png) !important;
	background-attachment: fixed !important;
	color: var(--text-primary) !important;
	background-size: cover !important;
	background-repeat: no-repeat !important;
}

@media (min-width: 992px) {
	body {
		background-image: radial-gradient(ellipse 90% 55% at 50% -5%, #7a0000 0%, transparent 65%), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi653QlnkKMiBSl_BwyjPsjP5738W-soQXY-NYUJuZFg9wlDzu1SC_3sdnpbuzRjtiyMJUCFIWRzfH5w_aLwwz_dlgtiaxfs2A8V7yzlh345pBLNBiPaPh4c8GmDbYI2YMWPBqtL6BneUduODMiSE90ZKyFhvtN-vKATvhKTNqrbZLru1q87GsuofQeA/s16000/sempurna-background.png) !important;
		background-size: 100% !important;
	}

	#content {
		box-shadow: 0px 0px 50px 16px #4a0404;
		background: #330202d9 !important;
	}
}