:root {
  --color-100: #fff7ed;
  --color-200: #ffedd5;
  --color-300: #fdba74;
  --color-400: #ffffff;
  --color-bg-500: #18181b;
  --color-bg-600: #27272a;
  --color-bg-700: #2b2b2b;
  --color-bg-800: #252525d2;
  --color-bg-900: #002724fa;
  --color-700: #7c2d12;
  --color-primary: #1f1f1f;
  --color-primary-2: #27272a;
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.7);
  --text-muted: rgba(255, 255, 255, 0.5);
  --text-dark: #27272a;
  --text-black: #000000;
  --bg-main: #18181b;
  --bg-card: #27272a;
  --bg-input: #18181b;
  --bg-footer: #18181b;
  --border-primary: rgb(255 255 255 / 33%);
  --border-secondary: rgba(253, 253, 253, 0.11);
  --border-accent: #ffedd5;
  --border-divider: rgba(253, 253, 253, 0.11);
  --border-separator: rgba(253, 253, 253, 0.11);
  --shadow-yellow: rgba(254, 224, 71, 0.3);
  --shadow-yellow-lg: rgb(254 224 71 / 8%);
  --shadow-black: rgba(0, 0, 0, 0.3);
  --shadow-black-lg: rgba(0, 0, 0, 0.5);
  --gradient-yellow-start: #ffedd5;
  --gradient-yellow-end: #fdba74;
  --gradient-dark-start: #27272a;
  --gradient-dark-end: #18181b;
  --accent-green: #a3e635;
  --accent-red: #dc2626;
  --accent-red-dark: #ff0000;
  --input-height: 38px;
  --button-height: 44px;
  --header-height: 52px;
  --login-height: 128px;
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 0.95rem;
  --spacing-lg: 1rem;
  --spacing-xl: 1.5rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.4rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-full: 9999px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  overflow-y: auto;
  height: auto;
  min-height: 100%;
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-main); border-radius: 10px; }
::-webkit-scrollbar-thumb { background: var(--gradient-yellow-start); border-radius: 10px; border: 1px solid var(--bg-main); }
::-webkit-scrollbar-thumb:hover { background: var(--gradient-yellow-end); }
html { scrollbar-width: thin; scrollbar-color: var(--gradient-yellow-start) var(--bg-main); }

.marquee-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: linear-gradient(to bottom, var(--gradient-yellow-start) 0%, var(--gradient-yellow-end) 100%); color: var(--text-black); padding: 0.2rem 1rem; font-size: 0.875rem; font-weight: 600; overflow: hidden; white-space: nowrap; display: flex; align-items: center; gap: 0.75rem; }
.marquee-icon { flex-shrink: 0; font-size: 1rem; display: flex; align-items: center; color: #000000; filter: brightness(0) saturate(100%); }
.marquee-wrapper { flex: 1; overflow: hidden; display: flex; align-items: center; }
.marquee { font-size: 0.875rem; line-height: 1; vertical-align: middle; white-space: nowrap; animation: marqueeScroll 30s linear infinite; }
@keyframes marqueeScroll { 0% { transform: translateX(100%);} 100% { transform: translateX(-100%);} }

.header { background: var(--bg-main); padding: 1rem 0.5rem; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 30px; z-index: 100; border-bottom: 1px solid var(--border-secondary); margin-top: 30px; gap: var(--spacing-lg); }
@media (min-width: 768px) { .header { padding: 1rem 1rem; } }
.menu-toggle { width: 30px; height: 24px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; background: transparent; border: none; padding: 4px; position: relative; border-radius: 4px; transition: background 0.3s ease; }
.menu-toggle:hover { background: rgba(255, 255, 255, 0.1); }
.menu-toggle span { width: 100%; height: 3px; background: var(--color-200); border-radius: 2px; transition: all 0.3s ease; display: block; transform-origin: center; }
.menu-toggle:hover span { background: var(--color-100); }
.menu-toggle:active { transform: scale(0.95); }
.logo-img { height: 40px; width: auto; max-width: 100%; object-fit: contain; }
.logo-mobile { display: flex; align-items: center; }
.logo-desktop { display: none; }
.spacer-mobile { display: block; width: 35px; }
@media (min-width: 768px) { .logo-mobile { display: none; } .logo-desktop { display: flex; align-items: center; } .menu-toggle { display: none; } .spacer-mobile { display: none; } }
.logo-img-desktop { height: 50px; width: auto; max-width: 100%; object-fit: contain; }

.nav-desktop { display: none; }
@media (min-width: 768px) { .nav-desktop { display: flex; flex: 1; justify-content: flex-end; align-items: center; } }
.nav-menu { display: flex; list-style: none; margin: 0; padding: 0; gap: var(--spacing-lg); align-items: center; }
.nav-menu > li { position: relative; }
.nav-menu > li > a { text-decoration: none; font-size: 0.875rem; font-weight: 500; padding: var(--spacing-md); transition: color 0.3s ease; color: #ffffff; }
.nav-menu > li > a:hover { color: var(--color-200); }
.has-dropdown > a:hover { color: var(--color-200); }
.has-dropdown:hover > a { color: var(--color-200); }
.btn-daftar-nav { background: linear-gradient(135deg, var(--gradient-yellow-start) 0%, var(--gradient-yellow-end) 100%); color: #000000!important; height: var(--button-height); padding: 0 var(--spacing-md); border-radius: var(--radius-xl); font-weight: 700; font-size: 0.9rem; text-align: center; text-decoration: none; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-accent); box-shadow: 0 4px 6px var(--shadow-yellow); transition: all 0.3s ease; }
.btn-daftar-nav:hover { background: linear-gradient(135deg, var(--gradient-yellow-end) 0%, var(--gradient-yellow-start) 100%); color: #000000; border: 1px solid var(--border-accent); box-shadow: 0 4px 6px var(--shadow-yellow); }

.has-dropdown { position: relative; }
.has-dropdown > a::after { content: '▼'; font-size: 0.65rem; margin-left: 0.35rem; display: inline-block; transition: transform 0.3s ease; color: #ffffff; }
.has-dropdown:hover > a::after { transform: rotate(180deg); color: var(--color-200); }
.dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: var(--bg-main); border: 1px solid var(--border-secondary); border-radius: var(--radius-sm); list-style: none; margin: var(--spacing-sm) 0 0 0; padding: var(--spacing-sm) 0; min-width: 200px; z-index: 1000; box-shadow: 0 4px 12px var(--shadow-black-lg); }
.has-dropdown:hover .dropdown-menu { display: block; }
.dropdown-menu li { margin: 0; }
.dropdown-menu a { display: block; padding: var(--spacing-sm) var(--spacing-lg); color: var(--text-primary); text-decoration: none; font-size: 0.875rem; transition: background 0.3s ease, color 0.3s ease; }
.dropdown-menu a:hover { background: var(--bg-input); color: var(--color-200); }

.mobile-nav-dropdown { display: block; position: fixed; top: 100px; left: 0; right: 0; max-height: 0; overflow: hidden; background: var(--bg-main); transition: max-height 0.3s ease-out; z-index: 99; }
.mobile-nav-dropdown.open { max-height: 400px; }
@media (min-width: 768px) { .mobile-nav-dropdown { display: none; } }
.mobile-nav-menu { list-style: none; margin: 0; padding: 0; background-color: var(--bg-main); }
.mobile-nav-menu li { border-bottom: 0.5px solid var(--border-separator); }
.mobile-nav-menu li:last-child { border-bottom: none; }
.mobile-nav-menu a { display: block; padding: var(--spacing-lg); color: var(--text-primary); text-decoration: none; font-size: 0.875rem; transition: background 0.3s ease, color 0.3s ease; }
.mobile-nav-menu a:hover { background: var(--bg-input); color: var(--color-200); }
.mobile-menu-checkbox { display: none; }
#mobile-menu-toggle:checked ~ .mobile-nav-dropdown { max-height: 400px; }
#mobile-menu-toggle:checked ~ .header .menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#mobile-menu-toggle:checked ~ .header .menu-toggle span:nth-child(2) { opacity: 0; transform: translateX(20px); }
#mobile-menu-toggle:checked ~ .header .menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.skip-link { position: fixed; top: -100px; left: 50%; transform: translateX(-50%); background: var(--color-200); color: var(--text-black); padding: 12px 24px; text-decoration: none; font-weight: 700; z-index: 99999; border-radius: 4px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); transition: top 0.3s ease; }
.skip-link:focus { top: 10px; outline: 3px solid var(--color-300); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }

a:focus { outline: 3px solid var(--color-300); outline-offset: 2px; }

.accordion-wrapper { background: var(--bg-card); border-radius: var(--radius-lg); overflow: hidden; }
.accordion-item { margin-bottom: 10px; overflow: visible; z-index: 20; }
.accordion-header { padding: 10px; cursor: default; z-index: 9999; }
.accordion-header h1 { margin: 0; color: #ffedd5; font-size: 32px; font-weight: 700; line-height: 1.3; }
.accordion-arrow { background: var(--color-200); display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-sm); transition: transform 0.3s ease; }
.accordion-toggle { display: none; }
.accordion-toggle:checked ~ div .accordion-item .accordion-arrow { transform: rotate(180deg); }
.accordion-toggle:checked ~ div .accordion-item .accordion-content { max-height: none; opacity: 1; transform: translateY(0); padding: 0 1rem 1rem 1rem; }
.accordion-arrow-icon { color: var(--text-dark); font-size: 0.875rem; font-weight: bold; }
.accordion-content { z-index: 9999; padding: 0 1rem 1rem 1rem; max-height: none; overflow: visible; opacity: 1; transform: translateY(0); transition: opacity 0.3s ease-out, transform 0.3s ease-out, padding 0.3s ease-out; }
.accordion-title { font-weight: 700; font-size: 1.5rem; margin-bottom: 1rem; margin-top: 0.25rem; color: #fdba74; }
.accordion-text { font-size: 0.875rem; line-height: 1.6; font-weight: 400; color: var(--text-primary); }
.accordion-text { word-break: break-word; hyphens: auto; }
.accordion-text p { margin: 0.5rem 0; text-align: left; }
.accordion-text h2 { margin: 0.75rem 0 0.5rem; color: #ffedd5; font-size: 27px; font-weight: 700; line-height: 1.4; text-align: left; }
.accordion-text h3 { margin: 0.75rem 0 0.5rem; color: #ffedd5; font-size: 22px; font-weight: 700; line-height: 1.4; text-align: left; }
.accordion-text a, .accordion-text a:visited, .accordion-text a:hover, .accordion-text a:active { color: #ffe2c4; text-decoration: none; font-weight: 600; }
.accordion-text a { position: relative; }
.accordion-text a::after { display: inline-block; margin-left: 2px; font-size: 0.85em; line-height: 1; opacity: 0.85; }
.seo-link { color: #fdba74; text-decoration: none; }
.seo-link::after { display: inline-block; margin-left: 2px; font-size: 0.85em; line-height: 1; opacity: 0.85; }
.seo-link:hover { text-decoration: none; }
.hidden { display: none; }
[hidden] { display: none; }
@media (min-width: 768px) { .md\:block { display: block; } .md\:hidden { display: none; } .md\:flex { display: flex; } .hidden.md\:block { display: block; } .hidden.md\:flex { display: flex; } }

@media (max-width: 767px) {
  .accordion-text { font-size: 0.9375rem; line-height: 1.7; }
  .accordion-text p { margin: 0.75rem 0; }
  .accordion-text ul { padding-left: 1.25rem; margin: 0.5rem 0; }
  .accordion-text li { margin: 0.375rem 0; }
}

.download-apk-section { width: 100%; padding: var(--spacing-md); background: linear-gradient(to bottom, var(--gradient-yellow-start) 0%, var(--gradient-yellow-end) 100%); position: relative; }
.download-apk-inner { display: flex; justify-content: space-between; align-items: center; }
.download-left { display: flex; gap: 0.75rem; align-items: center; }
.download-text-title { font-size: 0.875rem; color: #7c2d12; font-weight: 600; }
.download-text-subtitle { font-size: 0.75rem; opacity: 0.65; color: #7c2d12; }
.btn-download { margin-right: var(--spacing-md); border-radius: var(--radius-sm); background: var(--bg-card); padding: var(--spacing-sm); font-size: 0.875rem; text-decoration: none; display: flex; align-items: center; gap: var(--spacing-xs); color: var(--text-primary); }
.btn-download:hover { background: var(--color-bg-700); }
.btn-close-apk { color: #ffffff; background: #dc2626; height: 28px; width: 28px; min-height: 28px; min-width: 28px; font-size: 1rem; font-weight: bold; display: flex; justify-content: center; align-items: center; border-radius: 50%; position: absolute; top: 8px; right: 12px; border: 2px solid #ffffff; cursor: pointer; z-index: 20; pointer-events: auto; transition: all 0.3s ease; padding: 0; line-height: 1; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }
.btn-close-apk:hover { background: #b91c1c; transform: scale(1.15); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); }
.btn-close-apk:active { transform: scale(0.9); }
@media (max-width: 767px) { .btn-close-apk { height: 30px; width: 30px; min-height: 30px; min-width: 30px; font-size: 1.0625rem; top: 8px; right: 10px; border-width: 2px; } }
@media (min-width: 768px) { .btn-close-apk { height: 32px; width: 32px; min-height: 32px; min-width: 32px; font-size: 1.125rem; top: 10px; right: 14px; border-width: 2.5px; } }

.hero-section { position: relative; width: 100%; max-width: 100%; height: auto; overflow: hidden; margin: 0 auto 1rem; padding: 0; }
.hero-carousel { width: 100%; height: 100%; position: relative; overflow: hidden; display: flex; align-items: center; }
.carousel-slide { width: 100%; height: auto; }
.carousel-slide img { width: 100%; height: auto; max-height: 613px; object-fit: contain; display: block; }
.carousel-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.3); cursor: pointer; transition: all 0.3s ease; padding: 0; outline: none; }
.carousel-dot.active { background: #FFD700; border-color: #FFD700; box-shadow: 0 0 12px rgba(255, 215, 0, 0.8), 0 0 6px rgba(255, 215, 0, 0.4); transform: scale(1.3); }
.carousel-dot:hover { background: rgba(255, 255, 255, 0.8); transform: scale(1.1); }
.carousel-dot.active:hover { background: #FFD700; transform: scale(1.3); }
@media (max-width: 767px) { .hero-section { aspect-ratio: 1920 / 613; height: auto; } .carousel-slide img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1920 / 613; } .carousel-dot { width: 8px; height: 8px; } }
@media (max-width: 767px) {
  .carousel-dot { background: transparent; border: none; position: relative; padding: 0; }
  .carousel-dot::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.3); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all 0.3s ease; }
  .carousel-dot:hover::after { background: rgba(255, 255, 255, 0.8); transform: translate(-50%, -50%) scale(1.1); }
  .carousel-dot.active::after { background: #FFD700; border-color: #FFD700; box-shadow: 0 0 12px rgba(255, 215, 0, 0.8), 0 0 6px rgba(255, 215, 0, 0.4); transform: translate(-50%, -50%) scale(1.3); }
  .carousel-dots { gap: 0.5rem; }
}
@media (min-width: 768px) { .hero-section { aspect-ratio: 1920 / 613; height: auto; } .carousel-slide img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1920 / 613; } }

.input-wrapper { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; }
.input-icon { color: var(--text-secondary); font-size: 1.1rem; width: 24px; text-align: center; flex-shrink: 0; }
.input-group { display: flex; align-items: center; background: var(--bg-input); border: 1px solid var(--border-primary); border-radius: var(--radius-md); padding: 0 0.65rem; height: var(--input-height); flex: 1; transition: border-color 0.3s ease; }
.input-group:focus-within { border-color: var(--border-accent); }
.input-field { flex: 1; background: transparent; border: none; padding: var(--spacing-sm) 0; color: var(--text-primary); font-size: 0.8rem; }
.input-field:focus { outline: none; }
.input-field::placeholder { color: var(--text-muted); }
.input-icon-right { color: var(--text-muted); font-size: 0.9rem; cursor: pointer; margin-left: var(--spacing-sm); }
.form-footer { display: flex; justify-content: space-between; align-items: center; font-size: 0.65rem; color: var(--text-muted); margin-top: var(--spacing-xs); }
.form-footer a { color: var(--color-200); text-decoration: none; }

.container-fluid { position: relative; overflow-x: hidden; overflow-y: visible; padding: 0 0.5rem; }
@media (min-width: 768px) { .container-fluid { padding: 0 0.5rem; } }
@media (min-width: 1024px) { .container-fluid { padding: 0 0.5rem; } }
.flex { display: flex; }
.justify-center { justify-content: center; }
.w-full { width: 100%; }
.max-w\[1150px\] { max-width: 1150px; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.z-0 { z-index: 0; }
.overflow-auto { overflow: auto; }
.pt-2 { padding-top: 0.5rem; }
@media (min-width: 768px) { .md\:block { display: block; } .md\:mt-3 { margin-top: 0.75rem; } .md\:mt-0 { margin-top: 0; } .md\:pt-0 { padding-top: 0; } .md\:mb-1 { margin-bottom: 0.25rem; } }
.-mt-10 { margin-top: -2.5rem; }
.-mt-3 { margin-top: -0.75rem; }

.desktop-tab-btn { flex: 1; background: transparent; border: none; color: #ffffff; font-size: 0.875rem; font-weight: 500; padding: 0.75rem 1rem; display: flex; align-items: center; justify-content: center; gap: 0.625rem; text-align: center; position: relative; cursor: pointer; transition: background 0.2s ease; white-space: nowrap; }
.desktop-tab-btn:hover { background: rgba(255, 255, 255, 0.05); }
.desktop-tab-btn span:not(.desktop-tab-icon) { line-height: 1; }
@media (min-width: 768px) { .desktop-tab-btn { padding: 0.5rem 0.75rem; gap: 0.5rem; font-size: 0.875rem; } }
.desktop-tab-btn:not(:first-child)::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 24px; width: 1px; background: rgba(255, 255, 255, 0.15); }
.desktop-tab-icon { display: inline-flex; align-items: center; justify-content: center; font-size: 28px; width: 28px; height: 28px; flex-shrink: 0; color: #ffffff; }
.desktop-tab-icon.material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-size: 28px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; font-feature-settings: 'liga'; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; }
@media (min-width: 768px) { .desktop-tab-icon { font-size: 24px; width: 24px; height: 24px; } .desktop-tab-icon.material-symbols-outlined { font-size: 24px; } }

.category-container { margin-top: -2.5rem; position: relative; z-index: 10; }
@media (min-width: 768px) { .category-container { margin-top: 0; } }
.category-wrapper { border-radius: 10px; margin-bottom: 1rem; overflow: visible; position: relative; }
.glow-effect, .glow-on-hover { position: relative; border-radius: 10px; overflow: hidden; margin-top: 1.2rem; }
@media (min-width: 768px) { .glow-effect, .glow-on-hover { margin-top: 1rem; } }
.glow-effect::before, .glow-on-hover::before { content: ''; position: absolute; inset: -100px; background: conic-gradient(from 0deg, #ff2770 0%, #ff2770 2%, transparent 4%, transparent 14%, #27fff4 16%, #27fff4 18%, transparent 20%, transparent 31%, #ff2770 33%, #ff2770 35%, transparent 37%, transparent 47%, #27fff4 49%, #27fff4 51%, transparent 53%, transparent 64%, #ff2770 66%, #ff2770 68%, transparent 70%, transparent 81%, #27fff4 83%, #27fff4 85%, transparent 87%, transparent 97%, #ff2770 99%, #ff2770 100%); border-radius: 50%; animation: glowRotate 4s linear infinite; z-index: 0; }
@media (min-width: 768px) { .glow-effect::before, .glow-on-hover::before { inset: -350px; } }
.glow-effect::after, .glow-on-hover::after { content: ''; position: absolute; inset: 2px; background-color: #27272a; border-radius: 10px; z-index: 0; }
@keyframes glowRotate { 0% { transform: rotate(0deg);} 100% { transform: rotate(360deg);} }

.category-tabs { display: flex; overflow-x: auto; gap: 0.5rem; align-items: flex-end; width: 100%; background: transparent; position: relative; z-index: 2; border-radius: 10px; }
@media (min-width: 768px) { .category-tabs { justify-content: center; } }
.category-tab { flex-shrink: 0; text-align: center; text-decoration: none; background: transparent; padding: var(--spacing-sm); border-radius: var(--radius-lg); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; box-shadow: none; }
@media (min-width: 768px) { .category-tab { padding: var(--spacing-sm); } }
.category-tab-inner { background: transparent; box-shadow: none; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
@media (min-width: 768px) { .category-tab-inner { padding: var(--spacing-sm); } }
.category-icon { width: 57px; height: auto; }
.category-label { font-size: 0.69rem; font-weight: 400; color: var(--text-secondary); text-transform: uppercase; line-height: 1.15; margin-top: var(--spacing-sm); text-align: center; }
@media (min-width: 768px) { .category-label { font-size: 0.875rem; } }
.category-tab.active .category-label { color: var(--color-300); }
.category-tab:hover .category-label, .category-tab:focus .category-label { color: #ffedd5; }
.category-tabs::-webkit-scrollbar { display: none; }

.main-container { margin-top: -var(--spacing-md); background: var(--bg-card); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--spacing-xl); }
@media (min-width: 768px) { .main-container { margin-top: 1rem; } }
.tab-buttons { display: flex; gap: 0.5rem; background: transparent; border-bottom: 1px solid #52525b; }
.tab-btn { flex: 1; padding: var(--spacing-sm) var(--spacing-md); background: transparent; color: var(--text-secondary); font-weight: 600; font-size: 0.875rem; text-align: center; text-decoration: none; display: block; border: none; border-radius: var(--radius-sm); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; position: relative; transform: scale(1); }
.tab-btn:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.05); transform: scale(1.02); }
.tab-btn:active { transform: scale(0.98); }
.tab-btn.active { background: linear-gradient(to bottom, var(--gradient-yellow-start) 0%, var(--gradient-yellow-end) 100%); color: var(--text-black); box-shadow: 0 2px 8px var(--shadow-yellow); transform: scale(1); animation: tabActivate 0.3s ease-out; }
@keyframes tabActivate { 0% { transform: scale(0.95);} 50% { transform: scale(1.05);} 100% { transform: scale(1);} }
.tab-content { display: block; opacity: 1; transform: translateY(0); transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out; }
.tab-content.hiding { opacity: 0; transform: translateY(-6px); pointer-events: none; }
.tab-content.showing { opacity: 0; transform: translateY(6px); animation: fadeInUp 0.25s ease-in-out forwards; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(6px);} to { opacity: 1; transform: translateY(0);} }
.tab-progress { height: 3px; background: rgba(255, 255, 255, 0.08); border-radius: 9999px; overflow: hidden; margin: 4px 8px; }
.tab-progress .bar { height: 100%; width: 0; background-image: linear-gradient(to right, var(--gradient-yellow-start), var(--gradient-yellow-end)); animation: progressGrow 0.3s ease-in-out forwards; }
@keyframes progressGrow { from { width: 0; } to { width: 100%; } }
.stagger-in .game-card { opacity: 0; transform: translateY(8px) scale(0.98); }
.stagger-in .game-card.appear { opacity: 1; transform: translateY(0) scale(1); transition: transform 0.3s ease, opacity 0.3s ease; }

.results-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0.5rem 0.5rem; }
.results-title { font-size: 0.75rem; font-weight: 700; color: #fff; border-left: 4px solid #ffedd5; padding-left: 0.5rem; text-transform: uppercase; }
.btn-riwayat { color: #ffffff; border: 1px solid var(--border-accent); opacity: 1 !important; visibility: visible !important; padding: var(--spacing-xs) var(--spacing-md); border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 700; text-decoration: none; display: flex; align-items: center; gap: var(--spacing-xs); }
.btn-riwayat:hover { background: linear-gradient(135deg, var(--gradient-yellow-start) 0%, var(--gradient-yellow-end) 100%); color: var(--text-dark); box-shadow: 0 4px 6px var(--shadow-yellow); border-color: var(--border-accent); opacity: 1; }
.nav-arrow-icon { font-size: 0.9rem; margin-top: 1px; }

.search-section { padding: 0 0.5rem 0.75rem; }
.search-box { display: flex; align-items: center; background: var(--bg-input); border-radius: var(--radius-xl); padding: var(--spacing-sm) var(--spacing-md); gap: var(--spacing-sm); border: 1px solid var(--border-primary); }
.search-icon { color: var(--text-muted); font-size: 1rem; }
.search-input { flex: 1; background: transparent; border: none; outline: none; color: var(--text-primary); font-size: 0.875rem; height: 32px; }
.search-input::placeholder { color: var(--text-muted); }
.search-input:focus { outline: none; border: none; }

.game-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; padding: 0 0.5rem 1rem; }
.game-card { background: var(--bg-input); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; box-shadow: 0 4px 8px var(--shadow-black); position: relative; }
.game-header { background: linear-gradient(to bottom, var(--gradient-yellow-start) 0%, var(--gradient-yellow-end) 100%); padding: var(--spacing-sm) var(--spacing-md); text-align: center; display: flex; align-items: center; justify-content: center; min-height: 36px; position: relative; }
.game-title { font-size: 0.75rem; font-weight: 700; color: var(--text-black); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.game-body { padding: 1.25rem 0.75rem 0.75rem; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 140px; gap: 0.75rem; }
.game-logo { width: 65px; height: 65px; border-radius: 50%; display: block; object-fit: contain; }
.game-icon-placeholder { width: 65px; height: 65px; border-radius: 50%; background-color: #ea580c; display: flex; align-items: center; justify-content: center; font-size: 2rem; flex-shrink: 0; }
.game-timer { background: #0a0a0a; color: var(--accent-green); font-size: 0.875rem; font-weight: 600; padding: 0.125rem 0.5rem; border-radius: var(--radius-lg); display: inline-block; margin: 0; margin-top: 0.25rem; font-family: 'Courier New', monospace; }
.game-timer.closing { color: var(--accent-red-dark); }
.game-btn-kunjungi { background: linear-gradient(135deg, var(--gradient-yellow-start) 0%, var(--gradient-yellow-end) 100%); color: var(--text-dark); border: 1px solid var(--border-accent); box-shadow: 0 4px 6px var(--shadow-yellow); opacity: 1 !important; visibility: visible !important; font-size: 0.75rem; font-weight: 700; padding: 0.375rem 0.75rem; border-radius: var(--radius-sm); text-decoration: none; display: inline-block; margin-top: 0.5rem; width: 100%; text-align: center; transition: opacity 0.3s ease, transform 0.2s ease; cursor: pointer; }
.game-btn-kunjungi:hover { background: linear-gradient(135deg, var(--gradient-yellow-end) 0%, var(--gradient-yellow-start) 100%); color: var(--text-dark); border: 1px solid var(--border-accent); box-shadow: 0 4px 6px var(--shadow-yellow); opacity: 1; }
.game-btn-kunjungi:active { transform: translateY(0); }
@media (min-width: 640px) { .game-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .game-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .game-grid { grid-template-columns: repeat(5, 1fr); } }

.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; background: var(--bg-card); box-shadow: 0 -4px 12px var(--shadow-black-lg); display: flex; justify-content: space-around; align-items: flex-end; z-index: 100; border-radius: 1.5rem 1.5rem 0 0; }
.nav-item { flex: 1; text-align: center; text-decoration: none; color: var(--text-primary); padding: 0.3rem 0; display: flex; flex-direction: column; align-items: center; }
.nav-item.active { opacity: 1; }
.nav-item:not(.active):not(.nav-item-center) { opacity: 1; }
.nav-icon-wrapper { position: relative; display: inline-flex; margin-bottom: 0.2rem; }
.nav-icon-img { width: 30px; height: 30px; }
.nav-item-center { flex: 1; display: flex; justify-content: center; align-items: center; padding: 0; position: relative; }
.nav-dompet-wrapper { position: absolute; bottom: 0.75rem; }
.nav-dompet-button { background: linear-gradient(to bottom, var(--gradient-yellow-start) 0%, var(--gradient-yellow-end) 100%); padding: var(--spacing-xs); border-radius: var(--radius-full); box-shadow: 0 6px 16px var(--shadow-yellow-lg); display: flex; flex-direction: column; align-items: center; justify-content: center; width: 60px; height: 60px; }
.nav-label { font-size: 0.56rem; font-weight: 700; text-transform: uppercase; white-space: nowrap; color: var(--text-primary); }
.nav-label-dompet { color: var(--text-black); margin-top: 2px; font-size: 0.56rem; }
@media (min-width: 768px) { .bottom-nav { display: none; } }

.footer-section { background: var(--bg-footer); padding: 2rem 2.5rem 1rem; margin-top: 1rem; }
@media (max-width: 767px) { .footer-section { padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-lg); margin-top: var(--spacing-lg); padding-bottom: var(--spacing-xl); } }
.footer-container { margin: 0 auto; z-index: 0; width: 100%; max-width: 1150px; }
.footer-title { font-size: 0.8125rem; margin-bottom: var(--spacing-xs); color: var(--text-muted); }
.text-end { text-align: end; }
.text-center { text-align: center; }
.footer-divider { border-top: 1px dashed var(--border-divider); margin-top: var(--spacing-lg); margin-bottom: var(--spacing-lg); }
.footer-divider-mobile { display: block; border-top: 1px dashed var(--border-divider); margin-top: 1.25rem; margin-bottom: 1.25rem; }
@media (min-width: 768px) { .footer-divider-mobile { display: none; } }
.footer-bottom-section { background: var(--bg-footer); padding: 0 2.5rem 3rem; }
@media (max-width: 767px) { .footer-bottom-section { padding: 0 var(--spacing-lg) 5rem; } }
.footer-bottom-container { display: flex; justify-content: center; margin: 0 auto; z-index: 0; width: 100%; max-width: 1050px; padding: var(--spacing-lg); }
@media (min-width: 768px) { .footer-bottom-container { justify-content: center; } }
@media (max-width: 767px) { .footer-bottom-container { padding: var(--spacing-lg) var(--spacing-lg) 6rem; flex-direction: column; gap: var(--spacing-md); } }
.footer-nav-mobile { color: var(--text-muted); font-size: 0.75rem; text-align: center; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--spacing-sm); }
.footer-nav-mobile .footer-nav-link { padding: 0 var(--spacing-md); margin: 0; }
.footer-nav-mobile .footer-nav-link:not(:last-child) { border-right: 1px solid var(--text-primary); }
.copyright-text { font-size: 0.75rem; color: var(--text-secondary); text-align: center; }
@media (min-width: 768px) { .copyright-text { text-align: center; } }
.copyright-link { color: var(--color-200); text-decoration: none; font-weight: 600; }
.copyright-link::after { display: inline-block; margin-left: 2px; font-size: 0.85em; line-height: 1; opacity: 0.85; }
.footer-nav-desktop { color: var(--text-muted); font-size: 0.75rem; }
.footer-nav-link { color: var(--text-secondary); text-decoration: none; padding-right: var(--spacing-lg); border-right: 1px solid var(--text-primary); margin-right: var(--spacing-lg); }
.footer-nav-link:last-child { border-right: none; padding-right: 0; margin-right: 0; }
.content-section { background: var(--bg-main); }
.category-tabs::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.hide-scrollbar::-webkit-scrollbar { display: none; }
.justify-between { justify-content: space-between; }
.flex-col { flex-direction: column; }
.gap-3 { gap: 0.75rem; }
.fixed { position: fixed !important; transform: none !important; will-change: auto !important; }
.left-4 { left: 1rem; }
@media (min-width: 1024px) { .lg\:left-16 { left: 4rem; } }
.bottom-8 { bottom: 9.5rem; }
@media (max-width: 767px) { .bottom-8 { bottom: 6rem; padding-bottom: env(safe-area-inset-bottom, 0); } .fixed.left-4.bottom-8.z-40 { margin-bottom: 1rem; } }
@media (min-width: 768px) { .bottom-8 { bottom: 2rem; } }
.z-40 { z-index: 99999; }
.items-center { align-items: center; }
.w-14 { width: 3.5rem; }
.h-14 { height: 3.5rem; }
.bg-gradient-to-r\.from-primary-200\.to-primary-300 { background-image: linear-gradient(to right, var(--color-200), var(--color-300)); }
.rounded-xl { border-radius: 0.75rem; }
.shadow-elegant { box-shadow: 0 4px 6px -1px rgba(254, 224, 71, 0.3), 0 2px 4px -1px rgba(254, 224, 71, 0.2); }
.transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms; }
.duration-300 { transition-duration: 300ms; }
.ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
.hover\:scale-110:hover { transform: scale(1.1); }
.gap-0\.5 { gap: 0.125rem; }
.w-5 { width: 1.25rem; }
.h-5 { height: 1.25rem; }
.text-zinc-900 { color: #18181b; }
.text\[9px\] { font-size: 9px; }
.font-semibold { font-weight: 600; }
.leading-tight { line-height: 1.25; }
ul, ol { margin: 0.5rem 0 0.75rem; padding-left: 1.25rem; }
ol { list-style: decimal; }
ul { list-style: disc; }
li { margin: 0.25rem 0; line-height: 1.6; color: var(--text-primary); }
.accordion-text ul, .accordion-text ol { margin: 0.5rem 0 0.75rem; padding-left: 1.25rem; }
.accordion-text ul { list-style: disc; }
.accordion-text ol { list-style: decimal; }
.accordion-text li { margin: 0.25rem 0; }
.accordion-text li ul { list-style: circle; padding-left: 1.25rem; }
.accordion-text li ol { list-style: lower-alpha; padding-left: 1.25rem; }