/*
Theme Name: COKISEO
Theme URI: https://cokiseo.com
Author: COKISEO Team
Author URI: https://cokiseo.com
Description: Theme WordPress untuk situs slot online — dual theme (Dark/Light), full-managed via wp-admin, responsive, dengan CPT Game/Provider/Banner + Customizer lengkap.
Version: 4.5.0
Requires at least: 5.9
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v3
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: cokiseo
Tags: dark, light, one-column, custom-menu, custom-logo, custom-colors, featured-images, threaded-comments, translation-ready
*/

/* ============================================================
   0. SCROLLBAR (theme-aware)
   ============================================================ */
* { scrollbar-width: thin; scrollbar-color: var(--c-primary) var(--c-bg-alt); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--c-bg-alt); }
::-webkit-scrollbar-thumb {
	background: var(--c-primary);
	border-radius: 6px;
	border: 2px solid var(--c-bg-alt);
}
::-webkit-scrollbar-thumb:hover { background: var(--c-accent); }
::-webkit-scrollbar-corner { background: var(--c-bg-alt); }

/* ============================================================
   1. RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
h1, h2, h3, h4, h5, h6, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font: inherit; }

/* ============================================================
   2. FONT
   ============================================================ */
@font-face{
	font-family: 'LatoWeb';
	src: url('fonts/Lato-Regular.woff2') format('woff2'),
	     url('fonts/Lato-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* ============================================================
   3. VARIABLES — dark defaults di :root, light fallback di body.theme-light,
   user Customizer overrides di-emit sebagai body.theme-{mode} (menang di specificity)
   ============================================================ */
:root {
	--c-primary:         #f4c430;
	--c-primary-dark:    #c9a020;
	--c-accent:          #e6b800;
	--c-bg:              #0a0a0a;
	--c-bg-alt:          #151515;
	--c-bg-card:         #1a1409;
	--c-text:            #e0e0e0;
	--c-text-muted:      #a0a0a0;
	--c-border:          #3a2f1d;
	--c-btn-daftar-bg:   #f4c430;
	--c-btn-daftar-text: #0a0a0a;
	--c-btn-login-bg:    #2a2a2a;
	--c-btn-login-text:  #e0e0e0;
	--c-header-bg:       #0a0a0a;
	--c-header-text:     #e0e0e0;
	--c-livechat-bg:     #f4c430;
	--c-livechat-text:   #0a0a0a;
	--c-payment-bg:      #1a1409;
	--c-payment-border:  #3a2f1d;
	--c-payment-shadow:  rgba(0,0,0,.35);

	--container-max: 1200px;
	--radius-sm: 6px;
	--radius: 10px;
	--radius-lg: 16px;
	--radius-pill: 999px;
	--space-xs: 4px;
	--space-sm: 8px;
	--space: 16px;
	--space-md: 24px;
	--space-lg: 32px;
	--space-xl: 48px;
	--shadow-sm: 0 1px 3px rgba(0,0,0,.3);
	--shadow: 0 4px 20px rgba(0,0,0,.4);
	--header-h: 128px;
	--bottom-bar-h: 60px;
	--marquee-speed: 40s;
	--font-body: 'LatoWeb', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	--font-display: 'LatoWeb', Impact, sans-serif;
}

/* ============================================================
   4. BASE
   ============================================================ */
body {
	background: var(--c-bg);
	color: var(--c-text);
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.55;
	min-height: 100vh;
	overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 { line-height: 1.2; color: var(--c-primary); font-weight: 700; }
h1 { font-size: 26px; margin-bottom: 16px; }
h2 { font-size: 22px; margin-bottom: 14px; }
h3 { font-size: 19px; margin-bottom: 12px; }
h4 { font-size: 17px; margin-bottom: 10px; }
a { color: var(--c-primary); transition: color .2s ease; }
a:hover { color: var(--c-accent); }
strong { color: var(--c-text); }
p { margin-bottom: 12px; color: var(--c-text-muted); }

.container { max-width: var(--container-max); width: 100%; margin: 0 auto; padding: 0 16px; }
.sr-only { position: absolute!important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }
.mobile-only { display: none; }
.desktop-only { display: block; }

.cokiseo-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }

/* ============================================================
   5. HEADER — TOP BAR
   ============================================================ */
.site-header {
	background: var(--c-header-bg);
	color: var(--c-header-text);
	position: relative;
	z-index: 100;
	box-shadow: var(--shadow-sm);
}
/* Sticky hanya kalau body punya class 'is-sticky-header' (dari Customizer toggle) */
body.is-sticky-header .site-header { position: sticky; top: 0; }
/* Mobile: SELALU non-sticky supaya tidak menghalangi konten */
@media (max-width: 767px) {
	body.is-sticky-header .site-header,
	body.no-sticky-header .site-header { position: relative !important; top: auto !important; }
}
.top-bar {
	background: var(--c-bg-alt);
	border-bottom: 1px solid var(--c-border);
	padding: 8px 0;
}
.top-bar-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.contact-menu { display: flex; gap: 6px; flex-wrap: wrap; }
.contact-menu a {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 12px; border-radius: var(--radius-pill);
	color: var(--c-header-text); font-size: 13px;
	transition: background .2s ease;
}
.contact-menu a:hover { background: rgba(255,255,255,.06); color: var(--c-primary); }
.auth-buttons { display: flex; gap: 8px; }
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	padding: 8px 22px; border-radius: var(--radius-pill);
	font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .3px;
	white-space: nowrap;
	transition: background .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease;
}
/* No transform/filter on hover — keeps text pixel-stable */
.btn:hover { box-shadow: 0 4px 12px rgba(0,0,0,.28); }
.btn-daftar { background: var(--c-btn-daftar-bg); color: var(--c-btn-daftar-text); border: 2px solid var(--c-btn-daftar-bg); }
.btn-login  { background: var(--c-btn-login-bg);  color: var(--c-btn-login-text);  border: 2px solid var(--c-btn-login-bg); }
/* Hover swaps bg with primary for clear signal, text stays visible in both modes */
.btn-daftar:hover { background: var(--c-primary); color: var(--c-btn-daftar-bg); border-color: var(--c-primary); }
.btn-login:hover  { background: var(--c-primary); color: var(--c-btn-login-bg);  border-color: var(--c-primary); }
body.theme-light .btn-login:hover { color: #212121; }
body.theme-light .btn-daftar:hover { color: #ffffff; }

/* ============================================================
   6. MAIN NAV
   ============================================================ */
.main-nav-wrap { padding: 8px 0; }
.main-nav-inner { display: flex; align-items: center; gap: 32px; justify-content: space-between; }
.site-logo img, .site-logo svg { max-height: 68px; width: auto; }
.main-menu { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.main-menu > li > a {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 10px 14px; border-radius: var(--radius-sm);
	color: var(--c-header-text); font-weight: 600; font-size: 14px;
	text-transform: uppercase; transition: background .2s ease, color .2s ease;
}
.main-menu > li > a:hover,
.main-menu > li.current-menu-item > a { background: rgba(255,255,255,.05); color: var(--c-primary); }
.main-menu .cokiseo-icon { color: var(--c-primary); }
.hamburger { display: none; padding: 8px; border-radius: var(--radius-sm); color: var(--c-header-text); }

/* ============================================================
   7. INFO STRIP (5 badge)
   ============================================================ */
.info-strip {
	background: linear-gradient(180deg, var(--c-bg-alt) 0%, var(--c-bg) 100%);
	border-top: 1px solid var(--c-border);
	border-bottom: 1px solid var(--c-border);
	padding: 12px 0;
}
.info-strip-list {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	align-items: center;
	gap: 8px;
}
.info-strip-item {
	display: flex; align-items: center; justify-content: center;
	gap: 10px; padding: 4px 6px;
}
.info-strip-item .icon-wrap {
	width: 44px; height: 44px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: radial-gradient(circle, var(--c-primary) 0%, var(--c-primary-dark) 100%);
	color: var(--c-bg);
	box-shadow: 0 0 12px rgba(244,196,48,.3);
	flex-shrink: 0;
}
.info-strip-item .text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.info-strip-item .label {
	display: block;
	font-weight: 700; color: var(--c-primary); font-size: 13px; line-height: 1.15;
}
.info-strip-item .sub {
	display: block;
	color: var(--c-text-muted); font-size: 11px; line-height: 1.15;
	margin-top: 2px;
}

/* ============================================================
   8. MARQUEE
   ============================================================ */
.marquee {
	background: var(--c-bg-alt);
	border-bottom: 1px solid var(--c-border);
	color: var(--c-primary);
	overflow: hidden;
	position: relative;
	padding: 6px 0;
}
.marquee-track {
	display: flex;
	gap: 60px;
	white-space: nowrap;
	animation: cokiseo-scroll var(--marquee-speed) linear infinite;
	will-change: transform;
}
.marquee-item { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; }
.marquee-item::before { content: '\1F525'; }
@keyframes cokiseo-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
.marquee:hover .marquee-track { animation-play-state: paused; }

/* ============================================================
   9. MOBILE GRID MENU (Slotajib style)
   ============================================================ */
.mobile-grid-menu {
	display: none;
	background: var(--c-bg);
	padding: 16px 0;
	border-bottom: 1px solid var(--c-border);
}
.mobile-grid-menu ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mobile-grid-menu li a {
	display: flex; flex-direction: column; align-items: center; gap: 6px;
	padding: 12px 4px; text-align: center; color: var(--c-text-muted);
	border-radius: var(--radius); transition: background .2s ease, color .2s ease;
}
.mobile-grid-menu li a:hover { background: var(--c-bg-alt); color: var(--c-primary); }
.mobile-grid-menu .cokiseo-icon { color: var(--c-primary); width: 28px; height: 28px; }
.mobile-grid-menu li a span { font-size: 12px; font-weight: 500; }

/* ============================================================
   10. HERO / BANNER SLIDER
   ============================================================ */
.hero { background: var(--c-bg); padding: 12px 0; }
.hero-slider {
	position: relative;
	border-radius: var(--radius-lg); overflow: hidden;
	box-shadow: var(--shadow);
	aspect-ratio: 1920/613;
	background: var(--c-bg-alt);
}
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
.hero-slide.is-active { opacity: 1; }
.hero-slide, .hero-slide a, .hero-slide img { width: 100%; height: 100%; display: block; }
.hero-slide img { object-fit: cover; }
.hero-dots {
	position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
	display: flex; gap: 6px; z-index: 5;
}
.hero-dot {
	width: 10px; height: 10px; border-radius: 50%;
	background: rgba(255,255,255,.4); border: 1px solid rgba(0,0,0,.2);
	padding: 0; cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}
.hero-dot.is-active { background: var(--c-primary); transform: scale(1.2); }
.hero-cta {
	display: grid !important; grid-template-columns: 1fr 1fr;
	gap: 0; margin-top: 0;
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(0,0,0,.15);
}
.hero-cta a {
	padding: 14px 20px; text-align: center; font-weight: 800;
	font-size: 15px; text-transform: uppercase;
	border-radius: 0; border: 0;
	transition: background .18s ease, color .18s ease;
	position: relative;
}
/* Hover — swap dengan kontras kuat: Daftar jadi DARK+kuning, Login jadi KUNING+dark */
.hero-cta .btn-daftar:hover { background: #0a0a0a; color: var(--c-primary); }
.hero-cta .btn-login:hover  { background: var(--c-primary); color: #0a0a0a; }
body.theme-light .hero-cta .btn-daftar:hover { background: #212121; color: #ffffff; }
body.theme-light .hero-cta .btn-login:hover  { background: var(--c-primary); color: #ffffff; }
/* Force distinctive colors so buttons never blend with background (esp. light mode) */
.hero-cta .btn-daftar {
	background: var(--c-accent);
	color: #1a1a1a;
	border: 0; border-radius: 0;
}
.hero-cta .btn-login {
	background: #2a2a2a;
	color: #ffffff;
	border: 0; border-radius: 0;
}
body.theme-light .hero-cta .btn-daftar { background: var(--c-accent); color: #1a1a1a; }
body.theme-light .hero-cta .btn-login { background: #333333; color: #ffffff; }
/* Vertical divider between the two buttons for extra clarity */
.hero-cta .btn-login::before {
	content: ''; position: absolute; left: 0; top: 20%; bottom: 20%;
	width: 1px; background: rgba(255,255,255,.2);
}

/* ============================================================
   11. JACKPOT BANNER
   ============================================================ */
.jackpot-section { padding: 12px 0; }
.jackpot-wrap {
	position: relative; border-radius: var(--radius-lg); overflow: hidden;
	background: linear-gradient(135deg, #0d0d0d 0%, #2b1a0a 40%, #6b3f0a 100%);
	border: 2px solid var(--c-primary);
	min-height: 140px;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 0 30px rgba(0,0,0,.5) inset;
}
.jackpot-wrap.has-banner { padding: 0; background: none; border: 1px solid var(--c-border); }
.jackpot-wrap img { width: 100%; height: auto; display: block; }
.jackpot-label {
	position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
	font-family: var(--font-display); font-size: clamp(14px, 2vw, 22px);
	font-weight: 900; color: var(--c-primary); letter-spacing: 6px;
	text-shadow: 0 2px 8px rgba(0,0,0,.8);
	pointer-events: none;
}
.jackpot-counter {
	font-family: var(--font-display); font-size: clamp(22px, 5vw, 52px);
	font-weight: 900; color: #fff;
	text-shadow: 0 2px 10px rgba(0,0,0,.9), 0 0 20px rgba(244,196,48,.4);
	letter-spacing: 2px; padding: 10px 26px;
	pointer-events: none; text-align: center;
	white-space: nowrap;
}
.jackpot-wrap.no-banner .jackpot-counter { margin-top: 24px; }
.jackpot-wrap.has-banner .jackpot-counter {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
	background: rgba(0,0,0,.72); border-radius: var(--radius);
	border: 1px solid rgba(244,196,48,.4);
}

/* ============================================================
   12. SECTION TITLE
   ============================================================ */
.section { padding: 20px 0; }
.section-title {
	display: flex; align-items: center; gap: 10px;
	color: var(--c-primary); font-size: 20px; font-weight: 800;
	margin-bottom: 14px; padding-bottom: 8px;
	border-bottom: 2px solid var(--c-border);
}
.section-title .cokiseo-icon { color: var(--c-accent); }

/* ============================================================
   13. GAMES GRID
   ============================================================ */
.games-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.game-card {
	position: relative;
	background: linear-gradient(180deg, var(--c-bg-card) 0%, var(--c-bg-alt) 100%);
	border: 2px solid var(--c-primary);
	border-radius: var(--radius); overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease;
}
.game-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(244,196,48,.25); }
.game-card a { display: block; color: inherit; }
.game-card .thumb { aspect-ratio: 1/1; background: var(--c-bg); }
.game-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.game-card .game-title { padding: 8px 6px; text-align: center; color: var(--c-text); font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============================================================
   14. PROVIDERS GRID
   ============================================================ */
.providers-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.provider-card {
	display: flex; align-items: center; justify-content: center;
	padding: 18px 10px; background: var(--c-bg-card);
	border: 1px solid var(--c-border); border-radius: var(--radius);
	min-height: 90px; transition: border-color .2s ease, transform .2s ease;
}
.provider-card:hover { border-color: var(--c-primary); transform: translateY(-2px); }
.provider-card img { max-width: 100%; max-height: 60px; width: auto; height: auto; }

/* ============================================================
   15. PAYMENT GRID
   ============================================================ */
.payment-grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
	gap: 6px; margin-top: 8px;
}
.payment-card {
	display: flex; align-items: center; justify-content: center;
	background: var(--c-payment-bg);
	border: 1px solid var(--c-payment-border);
	border-radius: var(--radius-sm);
	padding: 10px 8px; min-height: 46px;
	box-shadow: 0 1px 3px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.05);
	transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.payment-card:hover {
	transform: translateY(-2px);
	border-color: var(--c-primary);
	box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.payment-card img { max-height: 26px; width: auto; filter: none; }
.payment-group + .payment-group { margin-top: 12px; }
.payment-group h4 { color: var(--c-text-muted); font-size: 12px; text-transform: uppercase; margin-bottom: 6px; font-weight: 600; }

/* ============================================================
   16. ENTRY CONTENT (single, page)
   ============================================================ */
.entry { padding: 24px 0; }
.entry-title { color: var(--c-primary); font-size: clamp(22px, 4vw, 32px); margin-bottom: 20px; text-align: center; }
.entry-content { color: var(--c-text-muted); font-size: 15px; line-height: 1.75; }
.entry-content h1, .entry-content h2, .entry-content h3 { color: var(--c-primary); margin: 22px 0 12px; text-align: center; }
.entry-content h2 { font-size: 22px; }
.entry-content ul, .entry-content ol { margin: 12px 0 12px 22px; color: var(--c-text-muted); }
.entry-content ul li { list-style: disc; }
.entry-content ol li { list-style: decimal; }
.entry-content a { color: var(--c-primary); text-decoration: underline; }
.entry-content strong { color: var(--c-primary); }
.entry-content img { border-radius: var(--radius); margin: 12px auto; }

/* ============================================================
   17. FOOTER
   ============================================================ */
.site-footer {
	background: var(--c-bg-alt);
	border-top: 3px solid var(--c-primary);
	color: var(--c-text-muted);
	padding: 24px 0 16px;
}
.footer-section + .footer-section { margin-top: 20px; padding-top: 16px; border-top: 1px dotted var(--c-border); }
.footer-section h4 { color: var(--c-primary); text-align: center; font-size: 15px; margin-bottom: 12px; text-transform: uppercase; letter-spacing: .5px; }
.footer-license img { max-height: 50px; width: auto; margin: 0 auto; }
.footer-license .label { text-align: center; display: block; margin-bottom: 8px; }
.copyright { text-align: center; padding-top: 16px; margin-top: 16px; border-top: 1px dotted var(--c-border); font-size: 12px; color: var(--c-text-muted); }
.copyright a { color: var(--c-primary); }

/* ============================================================
   18. MOBILE BOTTOM BAR
   ============================================================ */
.mobile-bottom-bar {
	display: none;
	position: fixed; bottom: 0; left: 0; right: 0;
	background: var(--c-bg-alt);
	border-top: 1px solid var(--c-primary);
	padding: 6px 0;
	z-index: 90;
	box-shadow: 0 -4px 12px rgba(0,0,0,.4);
}
.mobile-bottom-bar ul { display: flex; }
.mobile-bottom-bar li { flex: 1; }
.mobile-bottom-bar a {
	display: flex; flex-direction: column; align-items: center; gap: 2px;
	padding: 4px; color: var(--c-text-muted); font-size: 11px; font-weight: 600;
}
.mobile-bottom-bar a:hover, .mobile-bottom-bar a.active { color: var(--c-primary); }
.mobile-bottom-bar .cokiseo-icon { color: var(--c-primary); }

/* ============================================================
   19. FLOATING LIVECHAT
   ============================================================ */
.floating-livechat {
	position: fixed;
	bottom: 20px; right: 20px;
	background: var(--c-livechat-bg); color: var(--c-livechat-text);
	padding: 10px 16px; border-radius: var(--radius);
	font-weight: 700; font-size: 13px;
	display: inline-flex; align-items: center; gap: 6px;
	z-index: 95; box-shadow: 0 4px 16px rgba(0,0,0,.5);
	transition: transform .2s ease;
}
.floating-livechat:hover { transform: scale(1.05); }
@media (max-width: 767px) { .floating-livechat { bottom: calc(var(--bottom-bar-h) + 12px); } }

/* ============================================================
   20. RESPONSIVE
   ============================================================ */
@media (max-width: 1279px) {
	.games-grid { grid-template-columns: repeat(5, 1fr); }
	.providers-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 1023px) {
	.games-grid { grid-template-columns: repeat(4, 1fr); }
	.providers-grid { grid-template-columns: repeat(4, 1fr); }
	.main-menu > li > a { padding: 8px 10px; font-size: 13px; }
	.info-strip-list { gap: 8px; }
	.info-strip-item .icon-wrap { width: 36px; height: 36px; }
	.info-strip-item .icon-wrap .cokiseo-icon { width: 20px; height: 20px; }
}
@media (max-width: 767px) {
	:root { --header-h: 96px; }
	.mobile-only { display: block; }
	.desktop-only { display: none !important; }
	.hamburger { display: inline-flex; }
	.main-menu { display: none; }
	.main-menu.is-open {
		display: flex; flex-direction: column; align-items: stretch;
		position: absolute; top: 100%; left: 0; right: 0;
		background: var(--c-header-bg); border-top: 1px solid var(--c-border);
		padding: 8px 12px;
	}
	.main-menu.is-open > li > a { padding: 12px; border-bottom: 1px solid var(--c-border); }
	/* Mobile top-bar: HANYA icon kontak (Daftar/Login pindah ke bawah banner) */
	.top-bar { padding: 6px 0; }
	.top-bar-inner {
		display: flex; align-items: center;
		justify-content: center; gap: 12px;
	}
	.contact-menu { gap: 4px; }
	.contact-menu a { padding: 6px 10px; }
	.contact-menu a span { display: none; }  /* hide text label, icon only */
	.contact-menu .cokiseo-icon { width: 20px; height: 20px; }
	.auth-buttons { display: none; }  /* mobile: tombol pindah ke hero-cta di bawah banner */

	/* Hero CTA full width 2 kolom */
	.hero-cta { display: grid !important; grid-template-columns: 1fr 1fr; }
	.hero-cta a { padding: 14px 12px; font-size: 14px; }
	.hero-dots { bottom: 6px; }
	.hero-dot { width: 8px; height: 8px; }

	/* Info strip: 5 badge grid rapi, tidak wrap aneh */
	.info-strip-list {
		display: grid !important;
		grid-template-columns: repeat(5, 1fr);
		gap: 4px;
		justify-content: unset;
	}
	.info-strip-item {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 4px;
		padding: 4px 2px;
	}
	.info-strip-item .icon-wrap { width: 30px; height: 30px; }
	.info-strip-item .icon-wrap .cokiseo-icon { width: 16px; height: 16px; }
	.info-strip-item .label { font-size: 10px; line-height: 1.1; }
	.info-strip-item .sub { font-size: 9px; line-height: 1.1; }
	.info-strip-item br { display: none; }
	.games-grid { grid-template-columns: repeat(2, 1fr); }
	.providers-grid { grid-template-columns: repeat(3, 1fr); }
	.payment-grid { grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); }
	.mobile-grid-menu { display: block; }
	.mobile-bottom-bar { display: block; }
	body { padding-bottom: var(--bottom-bar-h); }
	.section-title { font-size: 17px; }
	.jackpot-counter { font-size: clamp(18px, 6vw, 30px); }
	.provider-card { padding: 10px 6px; min-height: 60px; }
	.provider-card img { max-height: 40px; }
}
@media (max-width: 479px) {
	body { font-size: 13px; }
	.container { padding: 0 12px; }
	.games-grid { gap: 8px; }
	.game-card .game-title { font-size: 12px; padding: 6px 4px; }
	.mobile-grid-menu ul { grid-template-columns: repeat(4, 1fr); }
	.mobile-grid-menu li a span { font-size: 10px; }
	.mobile-grid-menu .cokiseo-icon { width: 22px; height: 22px; }
	.btn { padding: 6px 14px; font-size: 12px; }
	.hamburger .cokiseo-icon { width: 22px; height: 22px; }
	.info-strip-item .label { font-size: 9px; }
	.info-strip-item .sub { font-size: 8px; }
}

/* ============================================================
   21. LIGHT THEME OVERRIDES
   ============================================================ */
/* Light theme fallback vars — dipakai kalau enqueue inline CSS gagal load.
   Note: Customizer inline CSS pakai selector body.theme-light dengan specificity sama,
   dan datang setelah style.css, jadi user color changes tetap menang. */
body.theme-light {
	--c-primary:         #c00000;
	--c-primary-dark:    #7a0000;
	--c-accent:          #ffcc00;
	--c-bg:              #ffffff;
	--c-bg-alt:          #f7f7f7;
	--c-bg-card:         #ffffff;
	--c-text:            #212121;
	--c-text-muted:      #666666;
	--c-border:          #e5e5e5;
	--c-btn-daftar-bg:   #ffffff;
	--c-btn-daftar-text: #c00000;
	--c-btn-login-bg:    #ffcc00;
	--c-btn-login-text:  #212121;
	--c-header-bg:       #c00000;
	--c-header-text:     #ffffff;
	--c-livechat-bg:     #ffcc00;
	--c-livechat-text:   #212121;
	--c-payment-bg:      #dcdcdc;
	--c-payment-border:  #b0b0b0;
	--c-payment-shadow:  rgba(0,0,0,.15);
}
/* Payment cards: gradient depth so white/transparent icons pop in light mode */
body.theme-light .payment-card {
	background: linear-gradient(180deg, #ececec 0%, #cccccc 100%);
	border: 1px solid #a5a5a5;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 4px rgba(0,0,0,.12);
}
body.theme-light { background: var(--c-bg); color: var(--c-text); }
body.theme-light .marquee { background: #fff8e0; color: #212121; }
body.theme-light .marquee-item::before { color: var(--c-primary); }
body.theme-light .site-header { box-shadow: 0 2px 6px rgba(0,0,0,.08); }
body.theme-light .btn-daftar { border-color: var(--c-primary); }
body.theme-light .info-strip-item .icon-wrap { color: #fff; }
/* Force light-mode game & provider card cleanliness */
body.theme-light .game-card {
	background: #ffffff;
	border-color: var(--c-primary);
	box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
body.theme-light .game-card:hover { box-shadow: 0 4px 16px rgba(192,0,0,.15); }
body.theme-light .game-card .game-title { color: var(--c-text); background: #f7f7f7; }
body.theme-light .provider-card { background: #ffffff; border-color: var(--c-border); }
body.theme-light .provider-card:hover { border-color: var(--c-primary); }
body.theme-light .info-strip {
	background: linear-gradient(180deg, #ffffff 0%, #f7f7f7 100%);
}
body.theme-light .info-strip-item .label { color: var(--c-primary); }
body.theme-light .info-strip-item .sub { color: var(--c-text-muted); }
body.theme-light .jackpot-wrap.no-banner {
	background: linear-gradient(135deg, #fff 0%, #fff5cc 40%, #ffcc00 100%);
	border-color: var(--c-primary);
	color: var(--c-primary-dark);
}
body.theme-light .jackpot-wrap.no-banner .jackpot-counter {
	color: var(--c-primary-dark);
	text-shadow: 0 2px 4px rgba(255,255,255,.6);
}
body.theme-light .jackpot-label { color: var(--c-primary-dark); text-shadow: 0 1px 3px rgba(255,255,255,.6); }
body.theme-light .site-footer { background: #f7f7f7; color: var(--c-text-muted); }
body.theme-light .section-title { color: var(--c-primary); border-bottom-color: var(--c-border); }
body.theme-light .top-bar { background: #ffffff; }
body.theme-light .contact-menu a { color: var(--c-text); }
body.theme-light .contact-menu a:hover { color: var(--c-primary); background: rgba(0,0,0,.04); }
body.theme-light .main-nav-wrap { background: var(--c-header-bg); }
body.theme-light .main-menu > li > a { color: var(--c-header-text); }
body.theme-light .main-menu > li > a:hover,
body.theme-light .main-menu > li.current-menu-item > a { color: var(--c-accent); background: rgba(0,0,0,.15); }
body.theme-light .main-menu .cokiseo-icon { color: var(--c-accent); }
body.theme-light .mobile-grid-menu { background: #ffffff; border-bottom-color: var(--c-border); }
body.theme-light .mobile-grid-menu li a:hover { background: #f0f0f0; }
body.theme-light .mobile-bottom-bar { background: #ffffff; border-top-color: var(--c-primary); }

/* ============================================================
   22a. ENGAGEMENT WIDGETS
   ============================================================ */
/* Live-online popup — bottom-left, dismissible */
.cokiseo-live-online {
	position: fixed; bottom: 20px; left: 20px;
	background: var(--c-bg-alt); color: var(--c-text);
	border: 1px solid var(--c-border); border-radius: var(--radius);
	padding: 10px 14px 10px 12px; z-index: 90;
	display: flex; align-items: center; gap: 10px;
	box-shadow: 0 6px 20px rgba(0,0,0,.4);
	max-width: 320px;
	animation: cokiseo-slide-up .35s ease-out;
}
@keyframes cokiseo-slide-up { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.cokiseo-live-online .cokiseo-live-dot {
	width: 10px; height: 10px; border-radius: 50%;
	background: #22c55e; box-shadow: 0 0 8px #22c55e;
	animation: cokiseo-pulse 2s ease-in-out infinite;
}
@keyframes cokiseo-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(1.3); } }
.cokiseo-live-online .cokiseo-live-text { display: flex; flex-direction: column; line-height: 1.2; font-size: 12px; }
.cokiseo-live-online .cokiseo-live-text strong { font-size: 15px; color: var(--c-primary); }
.cokiseo-live-online .cokiseo-live-cta {
	background: var(--c-primary); color: var(--c-bg);
	padding: 5px 10px; border-radius: var(--radius-pill);
	font-weight: 700; font-size: 12px; text-transform: uppercase;
}
.cokiseo-live-close {
	position: absolute; top: -10px; right: -10px;
	background: var(--c-bg-alt); color: var(--c-text);
	border: 1px solid var(--c-border); border-radius: 50%;
	width: 22px; height: 22px; font-size: 14px; line-height: 1;
}
@media (max-width: 767px) {
	.cokiseo-live-online { bottom: calc(var(--bottom-bar-h) + 12px); left: 10px; right: 10px; max-width: none; }
}

/* Welcome Popup Modal */
.cokiseo-welcome { position: fixed; inset: 0; z-index: 999; display: flex; align-items: center; justify-content: center; }
.cokiseo-welcome-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.7); backdrop-filter: blur(3px); }
.cokiseo-welcome-modal {
	position: relative; background: var(--c-bg-alt); color: var(--c-text);
	border: 2px solid var(--c-primary); border-radius: var(--radius-lg);
	padding: 32px 24px 24px; max-width: 460px; width: 90%;
	text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.6);
	animation: cokiseo-modal-in .3s ease-out;
}
@keyframes cokiseo-modal-in { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.cokiseo-welcome-modal h2 { color: var(--c-primary); font-size: 24px; margin-bottom: 8px; }
.cokiseo-welcome-modal p { color: var(--c-text-muted); font-size: 14px; margin-bottom: 20px; }
.cokiseo-welcome-image { max-width: 100%; border-radius: var(--radius); margin-bottom: 12px; }
.cokiseo-welcome-close {
	position: absolute; top: 8px; right: 12px;
	color: var(--c-text-muted); font-size: 28px; line-height: 1;
	background: transparent;
}
.cokiseo-welcome-close:hover { color: var(--c-primary); }

/* Search live-filter */
.cokiseo-search-filter {
	max-width: 380px; margin: 0 auto 14px; position: relative;
}
.cokiseo-search-filter input {
	width: 100%; padding: 10px 14px 10px 38px;
	background: var(--c-bg-alt); color: var(--c-text);
	border: 1px solid var(--c-border); border-radius: var(--radius-pill);
	font-size: 14px;
}
.cokiseo-search-filter input:focus { outline: none; border-color: var(--c-primary); }
.cokiseo-search-filter::before {
	content: '🔍'; position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
	font-size: 14px; opacity: .6;
}
.game-card.is-hidden { display: none; }

/* ============================================================
   22. 404 PAGE
   ============================================================ */
.entry-404 { padding: 40px 0; }
.entry-404-hero { text-align: center; max-width: 640px; margin: 0 auto; }
.entry-404-code {
	font-family: var(--font-display);
	font-size: clamp(80px, 15vw, 180px);
	font-weight: 900;
	color: var(--c-primary);
	line-height: 1;
	text-shadow: 0 4px 20px rgba(244,196,48,.4);
	letter-spacing: -4px;
}
.entry-404-hero .entry-title { font-size: clamp(22px, 4vw, 34px); margin: 8px 0 12px; }
.entry-404-lead { color: var(--c-text-muted); font-size: 15px; margin-bottom: 24px; }
.entry-404-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; }
.entry-404-search { max-width: 400px; margin: 0 auto; }
.entry-404-search input[type=search] {
	width: 100%; padding: 10px 14px;
	background: var(--c-bg-alt); color: var(--c-text);
	border: 1px solid var(--c-border); border-radius: var(--radius-pill);
}
.entry-404-search input[type=submit] { display: none; }

/* ============================================================
   22b. TIER 5 — FAQ, TESTIMONIALS, RELATED GAMES, WA FORM, LANDING GAME
   ============================================================ */
/* FAQ Accordion */
.faq-accordion { max-width: 720px; margin: 0 auto; }
.faq-item { background: var(--c-bg-card); border: 1px solid var(--c-border); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; }
.faq-question { padding: 14px 16px; font-weight: 700; color: var(--c-primary); cursor: pointer; list-style: none; position: relative; padding-right: 40px; }
.faq-question::-webkit-details-marker, .faq-question::marker { display: none; }
.faq-question::after { content: '+'; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 22px; transition: transform .2s; }
.faq-item[open] .faq-question::after { transform: translateY(-50%) rotate(45deg); }
.faq-answer { padding: 0 16px 14px; color: var(--c-text-muted); }

/* Testimonials horizontal scroll */
.testimonials-track { display: grid; grid-auto-flow: column; grid-auto-columns: 280px; gap: 12px; overflow-x: auto; padding: 8px 0; scroll-snap-type: x mandatory; }
.testimonial-card { background: var(--c-bg-card); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 16px; text-align: center; scroll-snap-align: start; }
.testimonial-avatar { width: 60px; height: 60px; border-radius: 50%; overflow: hidden; margin: 0 auto 8px; }
.testimonial-avatar img { width: 100%; height: 100%; object-fit: cover; }
.testimonial-author { color: var(--c-primary); font-size: 15px; margin-bottom: 6px; }
.testimonial-body { color: var(--c-text-muted); font-size: 13px; line-height: 1.5; }

/* Contact WA form */
.cokiseo-wa-form { display: grid; gap: 10px; max-width: 380px; }
.cokiseo-wa-form label { display: block; }
.cokiseo-wa-form label > span { display: block; font-size: 12px; margin-bottom: 4px; color: var(--c-text-muted); }
.cokiseo-wa-form input, .cokiseo-wa-form textarea {
	width: 100%; padding: 8px 12px; background: var(--c-bg-alt); color: var(--c-text);
	border: 1px solid var(--c-border); border-radius: var(--radius); font-size: 14px;
}
.cokiseo-wa-form button { padding: 10px; font-weight: 700; }

/* Related games in single post */
.related-games { margin: 32px 0 16px; padding: 20px; background: var(--c-bg-alt); border-radius: var(--radius-lg); border: 1px solid var(--c-border); }
.related-games h3 { color: var(--c-primary); font-size: 18px; margin-bottom: 14px; }
.related-games-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.related-game-card { display: flex; flex-direction: column; align-items: center; padding: 8px; background: var(--c-bg-card); border: 1px solid var(--c-border); border-radius: var(--radius); color: var(--c-text); text-align: center; font-size: 12px; transition: transform .15s ease, border-color .15s ease; }
.related-game-card:hover { border-color: var(--c-primary); transform: translateY(-2px); color: var(--c-primary); }
.related-game-card img { border-radius: 6px; margin-bottom: 6px; max-width: 100%; }
@media (max-width: 767px) { .related-games-grid { grid-template-columns: repeat(2, 1fr); } }

/* Language switcher */
.cokiseo-lang-switcher { display: inline-flex; gap: 4px; }
.cokiseo-lang-switcher a { padding: 4px 10px; background: var(--c-bg-alt); border: 1px solid var(--c-border); border-radius: var(--radius-pill); color: var(--c-text); font-size: 12px; }
.cokiseo-lang-switcher a:hover { border-color: var(--c-primary); color: var(--c-primary); }

/* Keyword cloud */
.cokiseo-keyword-cloud { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 0; }
.cokiseo-keyword-cloud .kw-tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: var(--c-bg-alt); border: 1px solid var(--c-border); border-radius: var(--radius-pill); font-size: 12px; color: var(--c-text-muted); }
.cokiseo-keyword-cloud .kw-tag:hover { border-color: var(--c-primary); color: var(--c-primary); }
.cokiseo-keyword-cloud .kw-count { background: var(--c-primary); color: var(--c-bg); padding: 1px 6px; border-radius: 10px; font-size: 10px; font-weight: 700; }

/* Landing page per game */
.game-landing-header { text-align: center; margin-bottom: 20px; }
.game-landing-cats { display: flex; justify-content: center; gap: 6px; margin-bottom: 8px; }
.game-landing-cat { padding: 3px 10px; background: var(--c-primary); color: var(--c-bg); border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.game-landing-hero { display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: center; margin-bottom: 24px; }
.game-landing-thumb { border-radius: var(--radius-lg); overflow: hidden; border: 2px solid var(--c-primary); }
.game-landing-cta { display: flex; gap: 8px; margin-bottom: 12px; }
.game-landing-excerpt { color: var(--c-text-muted); font-size: 15px; line-height: 1.6; }
@media (max-width: 767px) {
	.game-landing-hero { grid-template-columns: 1fr; text-align: center; }
	.game-landing-cta { justify-content: center; }
}

/* ============================================================
   22c. TIER 6 — AGE GATE, COOKIE CONSENT, RESPONSIBLE GAMING
   ============================================================ */
/* Age Gate — fullscreen overlay */
.cokiseo-age-gate {
	position: fixed; inset: 0; z-index: 999999;
	background: rgba(5,5,5,.92); backdrop-filter: blur(6px);
	display: flex; align-items: center; justify-content: center;
	padding: 20px;
}
.cokiseo-age-modal {
	background: var(--c-bg-alt); border: 2px solid var(--c-primary);
	border-radius: var(--radius-lg);
	padding: 28px 24px 20px; max-width: 460px; width: 100%;
	text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.8);
}
.cokiseo-age-badge {
	display: inline-block;
	width: 80px; height: 80px; border-radius: 50%;
	background: radial-gradient(circle, var(--c-primary) 0%, #a00 100%);
	color: #fff; font-family: var(--font-display);
	font-size: 32px; font-weight: 900; line-height: 80px;
	margin-bottom: 12px; box-shadow: 0 0 24px rgba(220,53,69,.5);
}
.cokiseo-age-modal h2 { color: var(--c-primary); font-size: 22px; margin-bottom: 8px; }
.cokiseo-age-modal p { color: var(--c-text); margin-bottom: 18px; font-size: 14px; }
.cokiseo-age-actions { display: flex; gap: 10px; justify-content: center; margin-bottom: 12px; flex-wrap: wrap; }
.cokiseo-age-actions .btn { min-width: 140px; }
.cokiseo-age-modal small { display: block; color: var(--c-text-muted); font-size: 11px; }

/* Cookie Consent — bottom bar */
.cokiseo-cookie {
	position: fixed; left: 12px; right: 12px; bottom: 12px;
	z-index: 995;
	background: var(--c-bg-alt); border: 1px solid var(--c-border);
	border-radius: var(--radius);
	padding: 12px 16px;
	display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
	box-shadow: 0 -4px 20px rgba(0,0,0,.4);
	max-width: 900px; margin: 0 auto;
}
.cokiseo-cookie-text { flex: 1 1 260px; color: var(--c-text-muted); font-size: 13px; }
.cokiseo-cookie-text a { color: var(--c-primary); text-decoration: underline; }
.cokiseo-cookie-accept { flex: 0 0 auto; }
@media (max-width: 767px) {
	.cokiseo-cookie { bottom: calc(var(--bottom-bar-h) + 8px); }
}

/* Responsible Gaming — footer widget */
.cokiseo-responsible {
	display: flex; align-items: center; gap: 10px;
	max-width: 720px; margin: 16px auto 0; padding: 10px 14px;
	background: rgba(220,53,69,.08); border: 1px solid rgba(220,53,69,.3);
	border-radius: var(--radius); font-size: 12px;
	color: var(--c-text-muted);
}
.cokiseo-responsible-badge {
	background: #dc3545; color: #fff; font-weight: 900;
	padding: 3px 9px; border-radius: var(--radius-sm);
	font-size: 12px; flex-shrink: 0;
}
.cokiseo-responsible-text a { color: var(--c-primary); }

/* ============================================================
   22d. TIER 7 — PWA INSTALL BUTTON
   ============================================================ */
.cokiseo-pwa-install {
	position: fixed; left: 20px; bottom: 20px; z-index: 92;
	background: var(--c-primary); color: var(--c-bg);
	border: 0; border-radius: var(--radius-pill);
	padding: 10px 18px; font-weight: 700; font-size: 13px;
	box-shadow: 0 4px 16px rgba(0,0,0,.4);
	cursor: pointer;
	animation: cokiseo-slide-up .3s ease-out;
}
.cokiseo-pwa-install:hover { filter: brightness(1.08); }
@media (max-width: 767px) {
	.cokiseo-pwa-install { bottom: calc(var(--bottom-bar-h) + 60px); left: 12px; }
}

/* ============================================================
   23. UTILITY
   ============================================================ */
.center { text-align: center; }
.mt-lg { margin-top: 32px; }
.hidden { display: none !important; }