@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;600;700&family=Rajdhani:wght@500;600;700&display=swap');

:root { --base: #000000; --dark: #0a0a0a; --light: #ffffff; --main: #b10008; --second: #5a0005; --accent: #b10008; --text: #FFFFFF; --gold: #feeb0a; --high: #00ff00; --med: #feeb0a; --low: #ff0019; --header-height: 70px; --marquee-height: 30px; --font-body: 'Kanit', sans-serif; --font-head: 'Rajdhani', sans-serif; }

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
body { background-color: var(--base); color: var(--text); font-family: var(--font-body); padding-top: var(--header-height); font-size: 14px; line-height: 1.5; }
a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
h1, h2, h3, .hero-title, .section-title { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }

.site-header { position: fixed; top: 0; left: 0; width: 100%; height: var(--header-height); background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 1000; border-bottom: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; }
.header-container { width: 100%; max-width: 1200px; padding: 0 15px; display: flex; justify-content: space-between; align-items: center; }
.logo img { height: 35px; width: auto; }
.auth-buttons { display: flex; gap: 10px; }
.btn { padding: 8px 15px; border-radius: 5px; font-weight: 600; font-size: 14px; text-transform: uppercase; font-family: var(--font-body); }
.btn-login { border: 1px solid var(--main); color: var(--light); background: transparent; }
.btn-login:hover { background: var(--main); color: var(--light); }
.btn-register { background: var(--main); color: var(--light); }

.marquee-wrapper { position: sticky; top: var(--header-height); z-index: 910; background: linear-gradient(90deg, #000 0%, var(--main) 50%, #000 100%); height: var(--marquee-height); display: flex; align-items: center; overflow: hidden; border-bottom: 1px solid #000; box-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.marquee-content { display: flex; white-space: nowrap; animation: scroll-left 20s linear infinite; padding-left: 100%; }
.marquee-content span { font-family: var(--font-body); font-size: 12px; font-weight: 600; color: #fff; margin-right: 50px; display: flex; align-items: center; gap: 5px; text-shadow: 0 0 10px rgb(0 0 0); }
@keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }

.hero-section { text-align: center; padding: 20px 15px; }
.banner-wrapper img { border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.5); border: 1px solid var(--second); }
.hero-title { font-size: 1.5rem; margin: 15px 0 5px; color: var(--gold); text-shadow: 0 0 10px rgba(105, 83, 247, 0.3); }
.current-date { font-size: 0.9rem; color: var(--light); margin-bottom: 10px; }

.provider-nav-wrapper { position: sticky; top: calc(var(--header-height) + var(--marquee-height)); z-index: 900; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--accent); padding: 10px 0; transition: all 0.3s ease; }
.provider-list { display: flex; gap: 15px; overflow-x: auto; padding: 0 15px; max-width: 1200px; margin: 0 auto; scrollbar-width: none; }
.provider-list::-webkit-scrollbar { display: none; }
.nav-btn { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; cursor: pointer; opacity: 0.5; transition: 0.3s; }
.nav-btn.active, .nav-btn:hover { opacity: 1; transform: scale(1.05); }
.nav-btn img { width: 51px; height: auto; transition: width 0.3s ease; }
.nav-btn span { font-size: 10px; margin-top: 5px; color: #fff; font-weight: 600; }
.provider-nav-wrapper.scrolled .nav-btn img { width: 35px; }
.provider-nav-wrapper.scrolled .nav-btn span { display: none; }

.game-container { max-width: 1200px; margin: 20px auto; padding: 0 10px; }
.section-title { margin-bottom: 15px; padding-left: 10px; border-left: 4px solid var(--accent); }
#gameGrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.game-card { background: var(--dark); border: 1px solid var(--second); border-radius: 8px; overflow: hidden; position: relative; padding-bottom: 8px; transition: transform 0.2s; }
.game-card:hover { border-color: var(--main); transform: translateY(-3px); }
.img-container { position: relative; width: 100%; aspect-ratio: 1/1; overflow: hidden; }
.game-img { width: 100%; height: 100%; object-fit: cover; }
.overlay-btn { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s; backdrop-filter: blur(2px); }
.game-card:hover .overlay-btn { opacity: 1; }
.btn-play { background: var(--main); color: var(--light); padding: 8px 24px; border-radius: 50px; font-weight: bold; box-shadow: 0 0 15px var(--main); }
.rtp-info { padding: 8px; text-align: center; }

@keyframes move-stripes { 0% { background-position: 0 0; } 100% { background-position: 20px 0; } }
.rtp-bar-container { height: 18px; background: #000; border-radius: 9px; margin-bottom: 5px; position: relative; overflow: hidden; border: 1px solid #333; box-shadow: inset 0 1px 3px rgba(0,0,0,0.5); }
.percent-bar { height: 100%; width: 0%; transition: width 1s ease; position: relative; overflow: hidden; }
.percent-bar.green { background: linear-gradient(90deg, #1e7e34, var(--high)); box-shadow: 0 0 10px rgba(40, 167, 69, 0.5); }
.percent-bar.yellow { background: linear-gradient(90deg, #d39e00, var(--med)); box-shadow: 0 0 10px rgba(255, 193, 7, 0.5); }
.percent-bar.red { background: linear-gradient(90deg, #ff0019, var(--low)); }
.percent-bar::after { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); background-size: 20px 20px; animation: move-stripes 1s linear infinite; z-index: 1; }
.percent-txt { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 700; color: #fff; text-shadow: 1px 1px 2px #000; z-index: 2; font-size: 11px; }

.jamgacor { color: #aaa; margin-bottom: 5px; font-size: 10px; }
.pola { width: 100%; display: flex; flex-direction: column; gap: 3px; min-height: 55px; justify-content: center; border-radius: 4px; }
.pola-row { display: flex; justify-content: space-between; align-items: center; font-size: 10px; width: 100%; line-height: 1.2; }
.p-left { color: var(--gold); font-weight: bold; text-align: left; }
.p-right { text-align: right; letter-spacing: 1px; }
.pola-empty { color: var(--low); font-style: italic; font-size: 14px; margin-top: 15px; display: block; }

.seo-content-wrapper { background: var(--dark); padding: 40px 15px; margin-top: 30px; border-top: 1px solid var(--second); }
.seo-container { max-width: 1000px; margin: 0 auto; }
.seo-text h1 { font-size: 1.5rem; color: var(--main); margin-bottom: 15px; }
.seo-text h3 { font-size: 1.1rem; color: var(--accent); margin-top: 20px; margin-bottom: 10px; }
.seo-text p { color: #ccc; font-size: 0.95rem; line-height: 1.6; margin-bottom: 10px; text-align: justify; }
.seo-text ul { margin-left: 20px; list-style: none; }
.seo-text li { color: #ddd; margin-bottom: 5px; font-size: 0.95rem; }

.faq-section { margin-top: 40px; }
.faq-item { border-bottom: 1px solid var(--second); margin-bottom: 10px; }
.faq-question { width: 100%; background: rgba(255, 255, 255, 0.05); border: none; padding: 15px; text-align: left; color: #fff; font-family: var(--font-body); font-weight: 600; font-size: 1rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; border-radius: 5px; transition: all 0.3s ease; }
.faq-question.active { background-color: var(--main) !important; color: var(--light) !important; border-radius: 5px 5px 0 0; }
.arrow-icon { font-style: normal; font-size: 12px; transition: transform 0.3s ease; display: inline-block; }
.faq-question.active .arrow-icon { transform: rotate(180deg); }
.faq-answer { display: none; background: rgba(0,0,0,0.3); border-radius: 0 0 5px 5px; }
.faq-answer p { padding: 15px; margin: 0; color: #bbb; font-size: 0.9rem; line-height: 1.5; }

.skeleton { width: 100%; height: 100%; background: linear-gradient(90deg, var(--dark) 25%, var(--second) 50%, var(--dark) 75%); background-size: 200% 100%; animation: loading 1.5s infinite; }
@keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

@media (max-width: 768px) { #gameGrid { grid-template-columns: repeat(3, 1fr); gap: 8px; } .hero-title { font-size: 1.2rem; } .pola-row { font-size: 9px; } .seo-text h1 { font-size: 1.2rem; } .faq-question { font-size: 0.9rem; padding: 12px; } }

.icon-gacor { color: #00ff00 !important; font-size: 12px; filter: drop-shadow(0 0 5px rgba(0, 255, 0, 0.8)); }
.icon-sedot { color: #ff0000 !important; font-size: 11px; filter: drop-shadow(0 0 3px rgba(255, 0, 0, 0.5)); margin-left: 2px; }
.p-right { display: flex; align-items: center; gap: 4px; }

.wd-popup { position: fixed; bottom: -100px; left: 20px; background: rgba(10, 10, 10, 0.95); border-left: 4px solid var(--main); border-radius: 8px; padding: 12px 15px; display: flex; align-items: center; gap: 12px; z-index: 3000; box-shadow: 0 5px 20px rgba(0,0,0,0.8); transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); width: 260px; border: 1px solid var(--second); }
.wd-popup.show { bottom: 80px; }
.wd-icon { background: var(--main); color: #000000; width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; box-shadow: 0 0 10px var(--main); }
.wd-info { display: flex; flex-direction: column; }
.wd-user { font-size: 13px; font-weight: 700; color: var(--gold); font-family: var(--font-head); }
.wd-text { font-size: 11px; color: #ccc; }
.wd-amount { font-size: 13px; font-weight: 800; color: #fff; margin-top: 2px; }

@media (max-width: 768px) { .wd-popup { left: 10px; width: 220px; } .wd-popup.show { bottom: 20px; } }

.spaceman-fly { position: fixed; z-index: 9999; width: 150px; left: -200px; bottom: 50px; animation: terbang-melintas 25s linear forwards; cursor: pointer; pointer-events: auto; }
@keyframes terbang-melintas { 0% { left: -200px; bottom: 50px; opacity: 0; } 5% { opacity: 1; } 90% { opacity: 1; } 100% { left: 105%; bottom: 105%; opacity: 0; pointer-events: none; } }
.spaceman-fly img { width: 100%; display: block; animation: kena-angin 2.5s ease-in-out infinite alternate; transform-origin: center; filter: drop-shadow(0 0 10px rgb(26, 26, 26)); }
@keyframes kena-angin { 0% { transform: rotate(-8deg) translateY(0); } 100% { transform: rotate(8deg) translateY(-5px); } }
@media (max-width: 768px) { .spaceman-fly { width: 100px; animation-duration: 15s; } }