:root {
    /* ── Palette: Obsidian · Champagne Gold · Deep Rose ── */
    --color-primary:        #C8A96E;   /* champagne gold  */
    --color-primary-dark:   #8F7140;   /* antique gold    */
    --color-accent-red:     #8B2140;   /* deep rose       */
    --color-accent-gold:    #E5D0A0;   /* pale highlight  */
    --color-accent-orange:  #B8935A;   /* warm amber      */

    /* Backgrounds – cool obsidian */
    --color-bg:             #07070E;
    --color-surface:        #0F1018;
    --color-surface-2:      #161820;
    --color-surface-3:      #1E2028;

    /* Text */
    --color-text:           #F0EDE8;
    --color-text-muted:     #7A7880;
    --color-white:          #ffffff;

    /* Borders */
    --color-border:         #262630;
    --color-border-warm:    rgba(200,169,110,.26);

    /* Gradients */
    --grad-brand:           linear-gradient(135deg, #8B2140 0%, #9A7240 52%, #C8A96E 100%);
    --grad-brand-subtle:    linear-gradient(135deg, #120f18 0%, #1c1812 100%);
    --grad-header:          linear-gradient(180deg, #141220 0%, #0f1018 60%, #07070E 100%);
    --grad-card:            linear-gradient(135deg, #13101e 0%, #1a1812 100%);

    --border-col: #8B2140;
    --base-col:   #F0EDE8;
    --btn-col:    #07070E;

    --login-panel-login-btn-bg:             linear-gradient(to bottom, #262632 0%, #161820 100%);
    --login-panel-login-btn-color:          #c4c0b8;
    --login-panel-login-btn-border:         rgba(255,255,255,.1);
    --login-panel-login-btn-hover-bg:       linear-gradient(to bottom, #30303c 0%, #22222e 100%);
    --login-panel-login-btn-hover-color:    #fff;
    --login-panel-register-btn-bg:          linear-gradient(135deg, #8B2140 0%, #9A7240 60%, #C8A96E 100%);
    --login-panel-register-btn-color:       #fff;
    --login-panel-register-btn-border:      transparent;
    --login-panel-register-btn-hover-bg:    linear-gradient(135deg, #C8A96E 0%, #9A7240 40%, #8B2140 100%);
    --login-panel-register-btn-hover-color: #fff;
    --login-panel-register-btn-hover-ts:    none;
}


/* ============================================================
   2. WEB FONTS
   ============================================================ */

@font-face {
    font-family: 'Open24DisplaySt';
    font-display: swap;
    src: url('https://d2rzzcn1jnr24x.cloudfront.net/Fonts/Open24DisplaySt.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'gilroybold';
    font-display: swap;
    src: url('https://d2rzzcn1jnr24x.cloudfront.net/Fonts/Gilroy-Bold.woff2') format('woff2'),
         url('https://d2rzzcn1jnr24x.cloudfront.net/Fonts/Gilroy-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


/* ============================================================
   3. RESET & NORMALIZE
   ============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

article, footer, header, main, nav, section {
    display: block;
}

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

body {
    margin: 0;
    font-family: 'LatoWeb', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.875rem;   /* 14px */
    line-height: 1.5;
    color: var(--color-text);
    background-color: var(--color-bg);
    background-image:
        radial-gradient(ellipse 80% 40% at 50% 0%, rgba(139,33,64,.08) 0%, transparent 60%),
        radial-gradient(ellipse 50% 30% at 100% 100%, rgba(200,169,110,.04) 0%, transparent 60%);
    background-attachment: fixed;
    padding-top: 143px;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    outline: 0;
    transition: all .3s ease;
}

a:hover,
a:active,
a:focus {
    color: var(--color-primary-dark);
    text-decoration: none;
    outline: 0;
}

body a,
body a[data-active="true"],
body a:hover,
body a:focus {
    text-decoration: none;
}

button {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    background-image: none;
    outline: 0;
    cursor: pointer;
    -webkit-appearance: button;
    appearance: button;
    text-transform: none;
}

button::-moz-focus-inner {
    padding: 0;
    border: 0;
}

img {
    border: 0;
    vertical-align: middle;
}

svg:not(:root) {
    overflow: hidden;
}

hr {
    height: 0;
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid var(--color-border);
    box-sizing: content-box;
}

p {
    margin: 0 0 10px;
}

strong {
    font-weight: bold;
}

code {
    font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;
    padding: 2px 4px;
    font-size: 90%;
    color: #c7254e;
    white-space: nowrap;
    background-color: #f9f2f4;
    border-radius: 4px;
}

ul, ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul ul, ol ul, ul ol, ol ol {
    margin-bottom: 0;
}

fieldset {
    padding: 0;
    margin: 0;
    border: 0;
}

/* legend default override */
legend {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: 20px;
    font-size: 1.3125rem;   /* 21px */
    line-height: inherit;
    color: var(--color-text);
    border: 0;
    border-bottom: 1px solid var(--color-border);
}

label {
    display: inline-block;
    margin-bottom: 5px;
    font-weight: bold;
}

::placeholder {
    text-transform: capitalize;
}

@media print {
    * { color: #000 !important; text-shadow: none !important; background: transparent !important; box-shadow: none !important; }
    a, a:visited { text-decoration: underline; }
    a[href]:after { content: " (" attr(href) ")"; }
    img { page-break-inside: avoid; max-width: 100% !important; }
    @page { margin: 2cm .5cm; }
    p, h2, h3 { orphans: 3; widows: 3; }
    h2, h3 { page-break-after: avoid; }
    .navbar { display: none; }
    .label { border: 1px solid var(--color-border); }
}



/* ============================================================
   4. BASE STYLES
   ============================================================ */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 0em;
}

/* 1rem = 16px setelah reset 100% */
h1, .h1 { font-size: 1.375rem;  }  /* 22px */
h2, .h2 { font-size: 1.125rem;  }  /* 18px */
h3, .h3 { font-size: 0.9375rem; }  /* 15px */
h4, .h4 { font-size: 0.8125rem; }  /* 13px */
h5, .h5 { font-size: 0.75rem;   }  /* 12px */
h6, .h6 { font-size: 0.6875rem; }  /* 11px */

.home-progressive-jackpot .jackpot-play-section .jackpot-play-text { font-family: 'gilroybold', sans-serif; }
.home-progressive-jackpot .jackpot-container { font-family: 'Open24DisplaySt', monospace; }
.announcement-outer-container { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }

.img-responsive {
    display: block;
    height: auto;
    max-width: 100%;
    margin: auto;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
}

.fade { opacity: 0; transition: opacity .15s linear; }
.fade.in { opacity: 1; }

[data-container-background] {
    background: no-repeat center top;
    background-size: 100%;
}

[data-container-background="home"] {
    position: relative;
    background-color: var(--color-bg);
}

.section-bg-img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: -1;
    pointer-events: none;
}


/* ============================================================
   5. GRID & LAYOUT
   ============================================================ */

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.container::before,
.container::after,
.row::before,
.row::after,
.navbar::before,
.navbar::after,
.nav::before,
.nav::after {
    display: table;
    content: " ";
}

.container::after,
.row::after,
.navbar::after,
.nav::after {
    clear: both;
}

.row {
    margin-right: -15px;
    margin-left: -15px;
}

.col-sm-12, .col-md-3, .col-md-4, .col-md-5, .col-md-8, .col-md-12 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 768px) {
    .container { max-width: 750px; }
    .col-sm-12 { width: 100%; }
}

@media (min-width: 992px) {
    .container { max-width: 970px; }
    .col-md-3, .col-md-4, .col-md-5, .col-md-8 { float: left; }
    .col-md-3  { width: 25%; }
    .col-md-4  { width: 33.33333333%; }
    .col-md-5  { width: 41.66666667%; }
    .col-md-8  { width: 66.66666667%; }
    .col-md-12 { width: 100%; }
}

@media (min-width: 1200px) {
    .container { max-width: 1170px; }
}


/* ============================================================
   6. BUTTONS & FORMS
   ============================================================ */

.button1 {
    background: var(--grad-brand);
    border: 1px solid rgba(200,169,110,.32);
    padding: 11px 28px;
    margin-top: 6px;
    border-radius: 24px;
    font-weight: 700;
    font-size: 0.9375rem;
    color: #fff;
    display: inline-block;
    white-space: nowrap;
    text-align: center;
    letter-spacing: .06em;
    text-transform: uppercase;
    box-shadow:
        0 4px 20px rgba(139,33,64,.45),
        0 0 0 0 rgba(200,169,110,.25),
        0 1px 0 rgba(255,255,255,.12) inset;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
    position: relative;
    overflow: hidden;
}

.button1::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255,255,255,.18) 0%, transparent 60%);
    pointer-events: none;
}

.button1:hover,
.button1:focus {
    color: #fff;
    transform: translateY(-2px);
    filter: brightness(1.1);
    box-shadow: 0 10px 32px rgba(139,33,64,.6), 0 0 0 3px rgba(200,169,110,.18);
}

.close {
    float: right;
    font-size: 1.3125rem;   /* 21px */
    font-weight: bold;
    line-height: 1;
    color: var(--color-text);
    text-shadow: 0 1px 0 #fff;
    opacity: .2;
}

.close:hover, .close:focus { color: var(--color-text); text-decoration: none; cursor: pointer; opacity: .5; }

button.close {
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
    appearance: none;
}

.progress-bar {
    float: left;
    width: 0;
    height: 100%;
    font-size: 12px;
    color: #fff;
    text-align: center;
    background-color: var(--color-primary);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
    transition: width .6s ease;
}


/* ============================================================
   7. DROPDOWN & NAV
   ============================================================ */

.dropdown { position: relative; }

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    list-style: none;
    background-color: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(0,0,0,.65);
    background-clip: padding-box;
}

.dropdown-menu > li > a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.428571429;
    color: var(--color-text);
    white-space: nowrap;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus { color: #fff; text-decoration: none; background-color: var(--color-primary); }

.open > .dropdown-menu { display: block; }
.open > a { outline: 0; }

.nav { padding-left: 0; margin-bottom: 0; list-style: none; }
.nav > li { position: relative; display: block; }
.nav > li > a { position: relative; display: block; padding: 10px 15px; }
.nav > li > a:hover, .nav > li > a:focus { text-decoration: none; background-color: var(--color-surface-3); }
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus { background-color: var(--color-surface-3); border-color: var(--color-primary); }
.nav > li > a > img { max-width: none; }

.glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    font-family: inherit;
}

.glyphicon-chevron-left::before  { content: "\2039"; font-size: 1.2em; }
.glyphicon-chevron-right::before { content: "\203A"; font-size: 1.2em; }
.glyphicon-chevron-down::before  { content: "\25BC"; font-size: 0.6em; vertical-align: 0.1em; }



/* ============================================================
   8. NAVBAR & HEADER
   ============================================================ */

.navbar {
    position: relative;
    z-index: 1000;
    min-height: 50px;
    margin-bottom: 20px;
    border: 1px solid transparent;
}

@media (min-width: 768px) { .navbar { border-radius: 4px; } }

.navbar-fixed-top {
    position: fixed;
    top: 0; right: 0; left: 0;
    z-index: 1030;
    border-width: 0 0 1px;
}

@media (min-width: 768px) { .navbar-fixed-top { border-radius: 0; } }

.site-header {
    background: var(--grad-header);
    border-bottom: 1px solid rgba(200,169,110,.22);
    box-shadow:
        0 6px 32px rgba(0,0,0,.85),
        0 1px 0 rgba(200,169,110,.14) inset,
        0 -1px 0 rgba(139,33,64,.08) inset;
}

.site-header .container .row > div { position: initial; }

.site-header-inner-container {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    height: 98px;
    gap: 10px;
}

.site-header-inner-container .logo {
    display: flex;
    width: auto;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
}

.site-header-inner-container .logo > img,
.site-header-inner-container .logo > picture,
.site-header-inner-container .logo > picture img {
    display: block;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.site-header-inner-container .primary-nav { flex: 1; min-width: 0; }
.primary-nav-mobile { display: none; }
.hero-login-panel { display: none; }

.topbar-container {
    padding: 8px 0;
    border-bottom: 1px solid rgba(200,169,110,.14);
    background: linear-gradient(180deg, #110f1a 0%, #0a0b12 100%);
    font-size: 0.75rem;     /* 12px */
}

.topbar-inner-container {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

.topbar-left-section { display: flex; flex-wrap: nowrap; }

.topbar-left-section [data-icon] {
    display: inline-block;
    height: 14px; width: 14px;
    background: none;
    animation: topbar-icon-bounce 2.5s linear infinite both;
}

.topbar-left-section [data-icon] img { width: 100%; height: 100%; object-fit: contain; display: block; }

@keyframes topbar-icon-bounce {
    0%, 20%, 40%, 60%, 80%, 100% { transform: translateY(0); }
    50%  { transform: translateY(-12px); }
    70%  { transform: translateY(-5px); }
}

.topbar-left-section .topbar-item { color: #aaa; display: flex; justify-content: center; align-items: center; }
.topbar-left-section .topbar-item a { color: #aaa; padding: 5px 10px; border-radius: 3px; line-height: 1; display: flex; align-items: center; font-size: 0.75rem; }
.topbar-left-section .topbar-item a:hover { color: var(--color-primary); }

.topbar-left-section .language-selector-container { position: relative; color: #fff; padding: 5px 10px; }
.topbar-left-section .language-selector-trigger { cursor: pointer; display: flex; align-items: center; }

.topbar-left-section .language-selector-trigger::after {
    content: '';
    display: inline-block;
    width: 0; height: 0;
    border: 5px solid transparent;
    border-top: 5px solid #fff;
    border-bottom: 0;
    margin-left: 5px;
}

.topbar-left-section .language-selector-trigger[data-active='true']::after {
    border-top: 0;
    border-bottom: 5px solid #fff;
}

.topbar-left-section .language-selector {
    background-color: var(--color-surface-2);
    border: 1px solid var(--color-border-warm);
    cursor: pointer; padding: 0;
    min-width: initial; margin-left: -11px;
}

.topbar-left-section .language-selector li {
    background-color: var(--color-surface-2);
    padding: 7px 10px; white-space: nowrap;
    margin: 2px 0; display: flex; gap: 10px; align-items: center;
}

.topbar-left-section .language-selector li:hover { background-color: var(--color-primary); }
.topbar-left-section .language-selector .language-name > div:last-child { font-size: 0.625rem; }  /* 10px */

.topbar-left-section i[data-language] { display: inline-block; height: 11px; width: 16px; overflow: hidden; background: none; }
.topbar-left-section i[data-language] img { width: 256px; height: 200px; object-fit: none; display: block; }

.menu-slide { display: flex; align-items: center; overflow: visible; height: inherit; }
.menu-slide > i { cursor: pointer; color: #fff; top: -2px; }
.menu-slide > i.glyphicon-chevron-left { margin-right: 10px; }
.menu-slide > i.glyphicon-chevron-right { margin-left: 10px; }

.top-menu {
    font-size: 0.875rem;    /* 14px */
    margin: 0; padding: 0; list-style: none;
    display: flex; flex-wrap: nowrap; height: 100%; flex-grow: 1;
    overflow-x: auto; overflow-y: visible;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.top-menu::-webkit-scrollbar { display: none; }

.top-menu > li {
    flex: 1; color: #e0e0e0; display: flex; align-items: center;
    width: 100%; flex-basis: calc(100% / 11); flex-shrink: 0;
}

.top-menu > li > a {
    text-decoration: none; display: block;
    padding: 20px 0; width: 100%; text-align: center;
    color: inherit; text-transform: inherit;
    white-space: nowrap; font-size: 0.75rem;        /* 12px */
    position: relative; letter-spacing: .01em;
}

.top-menu > li > a::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%; right: 50%;
    height: 2px;
    background: var(--grad-brand);
    transition: left .2s ease, right .2s ease;
    border-radius: 2px 2px 0 0;
}

.top-menu > li[data-active="true"] > a::after,
.top-menu > li:hover > a::after {
    left: 0; right: 0;
}

.top-menu > li > a > i { font-size: 0.75rem; }  /* 12px */
.top-menu > li > a > i.glyphicon-chevron-down { display: none; }

.top-menu > li[data-active="true"],
.top-menu > li:hover { color: var(--color-primary); }

.top-menu > li + li::before { content: ''; background: rgba(200,169,110,.2); height: 20px; width: 1px; margin: 0 8px; }

.top-menu > li:hover > a > i:not([data-icon]) { transform: rotate(-180deg); }
.top-menu > li:not(:hover):not(.dropdown-open) .game-list-container { display: none; }

/* Nav label */
.nav-label {
    text-decoration: none;
    display: block;
    padding: 20px 0;
    width: 100%;
    text-align: center;
    color: inherit;
    text-transform: inherit;
    white-space: nowrap;
    font-size: 0.75rem;     /* 12px */
    position: relative;
    letter-spacing: .01em;
    cursor: pointer;
}
.nav-label::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%; right: 50%;
    height: 2px;
    background: var(--grad-brand);
    transition: left .2s ease, right .2s ease;
    border-radius: 2px 2px 0 0;
}
.top-menu > li[data-active="true"] > .nav-label::after,
.top-menu > li:hover > .nav-label::after { left: 0; right: 0; }

.top-menu .game-list-container {
    position: absolute; top: 100%; left: 0; right: 0;
    z-index: 16;
    background: linear-gradient(180deg, #0f1018 0%, #090a12 100%);
    border-top: 2px solid var(--color-primary);
    border-bottom: 3px solid var(--color-accent-red);
    padding: 24px 0 18px;
    max-height: calc(100vh - 100%); overflow: auto;
    box-shadow: 0 12px 40px rgba(0,0,0,.9);
}

.top-menu .games-container { margin: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 32px; }
.top-menu .games-container > li { flex-basis: calc(calc(100% / 5) - 32px); border-radius: 20px; padding: 1px; background: linear-gradient(160deg, var(--color-accent-red) 0%, var(--color-primary) 100%); }
.top-menu .games-container > li > a,
.top-menu .games-container > li > span { display: block; border-radius: 20px; position: relative; }
.top-menu .games-container > li > a img,
.top-menu .games-container > li > span img { width: 100%; height: auto; background: linear-gradient(180deg, var(--color-bg) 25%, #141622 100%); border-radius: 20px; }
.top-menu .games-container > li:hover > a,
.top-menu .games-container > li:hover > span { background-color: rgba(154,114,64,.1); }


/* ============================================================
   9. MODAL
   ============================================================ */

.modal {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
    z-index: 1040; display: none;
    overflow: auto; overflow-y: scroll;
}

.modal.fade .modal-dialog { transform: translate(0,-25%); transition: transform .3s ease-out; }
.modal.in { display: block !important; }
.modal.in .modal-dialog { transform: translate(0,0); }

.modal-dialog {
    z-index: 1050; width: auto; padding: 10px;
    margin-right: auto; margin-left: auto;
    display: flex; align-items: center; justify-content: center;
    min-height: 100%; pointer-events: none;
}

.modal-content {
    position: relative; flex-basis: 100%;
    pointer-events: initial; background: transparent;
    border: 0; border-radius: 10px; outline: 0; width: 100%;
}

.modal-header {
    min-height: 52px; padding: 16px 20px;
    background: linear-gradient(180deg, #181628 0%, #0f1018 55%, #07070e 100%);
    text-align: center;
    border-top-left-radius: inherit; border-top-right-radius: inherit;
    border-bottom: 1px solid rgba(200,169,110,.28);
    text-transform: uppercase; color: var(--color-primary);
    letter-spacing: .12em; font-size: 0.8125rem;
    box-shadow: 0 1px 0 rgba(200,169,110,.06) inset;
}

.modal-header .close { opacity: 1; color: #fff; margin: 0; text-shadow: none; margin-top: -2px; }
.modal-title { margin: 0; line-height: 1.428571429; }

.modal-body {
    position: relative; padding: 20px;
    background: linear-gradient(160deg, #0d0e1a 0%, #111216 100%);
    color: var(--color-text);
}

.modal-body:last-child { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }
.modal-body img { max-width: 100%; }

.modal-content ul { list-style: disc; }
.modal-content ol { list-style: decimal; }
.modal-content ol, .modal-content ul, .modal-content .download-32-bit-cntr {
    margin-block-start: 1em; margin-block-end: 1em; padding-inline-start: 40px;
}

@media screen and (min-width: 768px) {
    .modal-dialog { right: auto; left: 50%; width: 600px; padding-top: 30px; padding-bottom: 30px; }
    .modal-content { box-shadow: 0 5px 15px rgba(0,0,0,.5); }
}

.download-popup-modal .modal-body img { height: 20px; width: 20px; margin-right: 5px; filter: contrast(0); }

.search-popup-container {
    display: none; position: fixed;
    top: 0; bottom: 0; left: 0; right: 0;
    width: 100vw; height: 100vh;
    background-color: rgba(0,0,0,.8);
    z-index: 1030; overflow-y: auto;
}

.search-popup-container.open { display: flex; justify-content: center; }

.qr-codes img { display: block; width: 50%; margin: 10px auto; }


/* ============================================================
   10. BANNER & SWIPER
   ============================================================ */

.banner .banner-swiper { width: 100%; height: auto; overflow: hidden; position: relative; }
.banner .banner-swiper .swiper-slide { line-height: 0; }

.banner .banner-swiper .swiper-slide img {
    display: block; width: 100%; height: auto;
    aspect-ratio: 1920 / 600; object-fit: cover;
}

.banner .banner-swiper .swiper-button-prev,
.banner .banner-swiper .swiper-button-next {
    width: 48px; height: 48px;
    background: transparent; border: none;
    transition: opacity .2s, transform .2s; cursor: pointer;
    position: absolute; z-index: 10; top: 50%; margin-top: -24px;
}

.banner .banner-swiper .swiper-button-prev:hover,
.banner .banner-swiper .swiper-button-next:hover { opacity: .9; transform: scale(1.1); }

.banner .banner-swiper .swiper-button-prev::after,
.banner .banner-swiper .swiper-button-next::after {
    font-size: 28px; font-weight: 700; color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,.6); pointer-events: none;
}

.banner .banner-swiper .swiper-button-prev::after { content: "‹"; }
.banner .banner-swiper .swiper-button-next::after { content: "›"; }
.banner .banner-swiper .swiper-button-prev { left: 20px; }
.banner .banner-swiper .swiper-button-next { right: 20px; }

/* Hero overlay copy */
.banner-swiper { position: relative; }
.hero-copy {
    position: absolute;
    left: 50%;
    bottom: 56px;
    z-index: 4;
    width: min(800px, calc(100% - 40px));
    padding: 24px 32px 22px;
    border-radius: 20px;
    background: rgba(7, 7, 14, 0.90);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(200,169,110,.28);
    box-shadow:
        0 0 0 1px rgba(200,169,110,.08) inset,
        0 24px 56px rgba(0,0,0,.7),
        0 0 80px rgba(139,33,64,.16);
    text-align: center;
    transform: translateX(-50%);
}

.hero-copy .page-heading {
    margin: 0 0 10px;
    background: linear-gradient(100deg, #ffffff 0%, #e5d0a0 40%, #c8a96e 70%, #8b2140 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: clamp(22px, 3.6vw, 42px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.01em;
    text-shadow: none;
}

.hero-summary {
    margin: 0;
    color: rgba(210, 200, 185, 0.9);
    font-size: 1rem;
    line-height: 1.65;
}

.banner .banner-swiper .swiper-pagination { display: none; }


/* ============================================================
   11. ANNOUNCEMENT BAR
   ============================================================ */

.announcement-outer-container {
    background: linear-gradient(90deg, #0b0d14 0%, #141622 50%, #0b0d14 100%);
    border-bottom: 1px solid rgba(200,169,110,.15);
    padding: 7px 0;
    color: #c4c0b8;
}


/* ============================================================
   12. JACKPOT
   ============================================================ */

.home-outer-container { padding-top: 20px; padding-bottom: 20px; }

.home-inner-container {
    background: linear-gradient(135deg, #08090e 0%, #131420 55%, #1b1c2a 100%);
    padding: 20px; border-radius: 40px;
    border: 1px solid rgba(200,169,110,.18);
    box-shadow:
        0 2px 40px rgba(0,0,0,.6),
        0 0 0 1px rgba(200,169,110,.06) inset;
}

.home-progressive-jackpot {
    background: linear-gradient(160deg, #0c0e16 0%, #17192a 50%, #0c0e16 100%);
    border-radius: 30px; color: #fff; padding: 10px; display: flex;
    border: 1px solid rgba(200,169,110,.18);
}

.home-progressive-jackpot .outer-container { display: flex; flex-grow: 1; padding: 10px; background: rgba(0,0,0,.6); border-radius: 100px; border: 1px solid rgba(200,169,110,.1); }
.home-progressive-jackpot .inner-container { display: flex; flex-grow: 1; padding: 10px; border-radius: 100px; background-image: linear-gradient(#00000099, transparent); }

.home-progressive-jackpot .border-container {
    display: flex; align-items: center; gap: 50px;
    flex-grow: 1; padding: 10px; border-radius: 100px;
    background: rgba(0,0,0,.7);
    border: 2px solid var(--color-primary);
    box-shadow: 0 0 20px rgba(200,169,110,.15) inset;
}

.home-progressive-jackpot .jackpot-container {
    display: flex; justify-content: center; align-items: center;
    flex-grow: 2; font-size: 50px; letter-spacing: 5px;
    background: linear-gradient(160deg, var(--color-accent-red) 0%, var(--color-primary) 60%, var(--color-accent-gold) 100%);
    border-radius: 70px; padding: 10px;
}

.home-progressive-jackpot .jackpot-inner-container {
    background-color: #06060c; display: flex; flex-grow: 2;
    justify-content: center; border-radius: 50px; padding: 10px; color: #fff;
}

.home-progressive-jackpot .jackpot-border-container {
    display: flex; flex-grow: 2; justify-content: center;
    border-radius: 50px; border: 2px dotted var(--color-primary);
    line-height: 40px; padding-bottom: 10px; color: #fff;
    text-shadow: 0 0 18px rgba(200,169,110,.8), 0 2px 8px rgba(0,0,0,.9);
}

.home-progressive-jackpot .jackpot-currency { color: var(--color-accent-gold); margin-right: 10px; }

.home-progressive-jackpot .jackpot-play-section {
    display: flex; flex-direction: column; align-items: flex-end; margin-left: 20px;
}

.home-progressive-jackpot .jackpot-play-section .jackpot-play-text {
    color: var(--color-primary); font-size: 38px; text-transform: uppercase; line-height: 1;
    text-shadow: 0 0 20px rgba(200,169,110,.5);
}

.home-progressive-jackpot .jackpot-play-section .jackpot-play-text label { color: var(--color-accent-red); }
.home-progressive-jackpot .jackpot-play-section img { height: auto; width: 87px; }


/* ============================================================
   13. GAME LIST
   ============================================================ */

.game-list {
    background: linear-gradient(160deg, #08090e 0%, #0f1018 100%);
    border: 1px solid rgba(200,169,110,.16);
    padding: 12px; border-radius: 24px;
    margin-top: 20px; display: flex; flex-wrap: wrap;
    box-shadow:
        0 4px 28px rgba(0,0,0,.65) inset,
        0 0 0 1px rgba(200,169,110,.04) inset;
}

.game-list .game-item {
    width: calc((100% - (5px * 6 * 2)) / 6);
    margin: 5px; padding: 5px;
    background: linear-gradient(160deg, #0c0d18 0%, #141620 100%);
    border-radius: 20px; position: relative;
    border: 1px solid rgba(200,169,110,.1);
    transition: border-color .25s, box-shadow .25s, transform .25s;
}

.game-list .game-item:hover {
    border-color: rgba(200,169,110,.45);
    box-shadow: 0 4px 20px rgba(200,169,110,.14), 0 0 0 1px rgba(200,169,110,.18);
    transform: translateY(-2px);
}

.game-list img { position: absolute; top: 0; left: 0; height: 100%; width: 100%; transition: transform .25s ease; transform-origin: center; }

.game-list .game-name {
    font-size: 0.875rem;    /* 14px */
    color: #ccc; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
    text-align: center; padding: 4px 10px 8px;
}

.game-list .link-container {
    background: linear-gradient(160deg, rgba(10,4,0,.9) 0%, rgba(26,10,0,.92) 100%);
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}

.game-list .wrapper-container { position: relative; padding-top: 100%; border-radius: 20px; overflow: hidden; }
.game-list .wrapper-container:hover { background: #090a12; }
.game-list .wrapper-container:hover img { transform: scale(1.25); }
.game-list .wrapper-container:not(:hover) .link-container { display: none; }
.game-list .link-container a { margin: 10px; width: 70%; padding: 10px 15px; }

.popular-game-title-container {
    display: flex; align-items: center; padding: 12px 16px; margin-top: 20px;
    border-radius: 24px; color: #fff;
    background: linear-gradient(90deg, #0c0e16 0%, #161820 40%, var(--color-primary) 100%);
    border: 1px solid rgba(200,169,110,.18);
    box-shadow: 0 2px 16px rgba(0,0,0,.5);
}

.popular-game-title-container .title { font-size: 1.25rem; display: flex; align-items: center; }  /* 20px */
.popular-game-title-container .title i { display: inline-block; height: 24px; width: 25px; background: center no-repeat; background-size: contain; margin-right: 10px; }
.popular-game-title-container .title i[data-icon] { background: none; }
.popular-game-title-container .title i[data-icon] img { width: 100%; height: 100%; object-fit: contain; display: block; }
.popular-game-title-container > i { border-bottom: 1px solid rgba(200,169,110,.4); border-top: 1px solid transparent; flex-grow: 1; margin: 0 15px; }
.popular-game-title-container a { display: inline-block; padding: 5px 30px; border-radius: 20px; font-size: 0.9375rem; background: rgba(0,0,0,.5); color: #fff; border: 1px solid rgba(255,255,255,.1); transition: background .2s, border-color .2s; }  /* 15px */
.popular-game-title-container a:hover { background: rgba(200,169,110,.2); border-color: var(--color-primary); }

.popular-game-title-container + .game-list-container { background: linear-gradient(160deg, #090a12 0%, #0f1018 100%); border: 1px solid var(--color-border-warm); padding: 10px 15px; border-radius: 24px; }
.popular-game-title-container + .game-list-container .game-list { overflow-x: auto; flex-wrap: nowrap; padding: 0; margin: 0; border: 0; background: transparent; box-shadow: none; }
.popular-game-title-container + .game-list-container .game-list .game-item { flex-shrink: 0; position: relative; }
.popular-game-title-container + .game-list-container .game-list::-webkit-scrollbar { height: 6px; }
.popular-game-title-container + .game-list-container .game-list::-webkit-scrollbar-track { background: transparent; }
.popular-game-title-container + .game-list-container .game-list::-webkit-scrollbar-thumb { background: rgba(200,169,110,.3); border-radius: 5px; }
.popular-game-title-container + .game-list-container .game-list .games-group { width: calc((100% - 6px * 5) / 6.5); flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; margin: 3px; }
.popular-game-title-container + .game-list-container .game-list .games-group .game-item { width: 100%; margin: 0; }


/* ============================================================
   14. DOWNLOAD APK
   ============================================================ */

.download-apk-container { position: relative; overflow: hidden; }

.download-apk { display: flex; align-items: center; color: #fff; }
.download-apk > div { flex-basis: 50%; opacity: 0; transition: all 1s ease; }
.download-apk > div:nth-child(1) { transform: translateX(-100%); }
.download-apk > div:nth-child(2) { transform: translateX(100%); }

.download-apk .apk-slide:nth-child(1),
.download-apk .apk-slide:nth-child(2) { transform: translateX(0); opacity: 1; }

    .download-apk .h2 { text-transform: uppercase; font-weight: 700; font-size: 1.75rem; margin: 0 0 10px; }   /* 28px */
    .download-apk .h2 span { display: block; color: var(--color-primary); }

.download-apk .apk-copy { color: var(--color-primary); text-align: center; padding: 20px; }
.download-apk .apk-copy .h2 { font-style: italic; font-size: 1.125rem; color: var(--color-primary); }  /* 18px */
.download-apk .apk-copy p { text-align: justify; color: rgba(255,255,255,.8); font-style: italic; font-size: 0.875rem; }

.download-apk-btn .download-apk-text { margin-left: 4px; font-size: 0.6875rem; color: #fff; }                  /* 11px */


@keyframes bounce {
    0%, 20%, 60%, 100% { transform: translateY(0); }
    40% { transform: translateY(-20px); }
    80% { transform: translateY(-10px); }
}


/* ============================================================
   15. LOGIN PANEL
   ============================================================ */

.login-panel { display: flex; flex-wrap: nowrap; justify-content: flex-end; color: #fff; }
.login-panel .login-panel-item + .login-panel-item { margin-left: 10px; }
.login-panel .login-panel-item:last-of-type { padding-right: 15px; margin-right: 15px; }
.login-panel .login-panel-item > label { position: relative; margin: 0; }

.login-panel .login-button,
.login-panel .register-button {
    border-radius: 15px; display: block; padding: 3px 10px;
    text-transform: uppercase; line-height: 22px;
    border: 1px solid transparent; width: 90px; text-align: center; outline: 0;
}

.login-panel .login-button { background: var(--login-panel-login-btn-bg); color: var(--login-panel-login-btn-color); border-color: var(--login-panel-login-btn-border); }
.login-panel .login-button:hover, .login-panel .login-button:focus { background: var(--login-panel-login-btn-hover-bg); color: var(--login-panel-login-btn-hover-color); }

.login-panel .register-button {
    background: var(--login-panel-register-btn-bg);
    color: var(--login-panel-register-btn-color);
    border-color: var(--login-panel-register-btn-border);
}

.login-panel .register-button:hover, .login-panel .register-button:focus {
    background: var(--login-panel-register-btn-hover-bg);
    color: var(--login-panel-register-btn-hover-color);
    text-shadow: var(--login-panel-register-btn-hover-ts);
}

/* Desktop: topbar login/register button sizing */
.topbar-container .login-panel .login-button,
.topbar-container .login-panel .register-button {
    width: auto;
    min-width: 90px;
    padding: 5px 12px;
    font-size: 0.6875rem;   /* 11px */
    white-space: nowrap;
    letter-spacing: .02em;
}


/* ============================================================
   16. SITE INFO & FOOTER
   ============================================================ */

.site-contacts {
    padding: 14px 0;
    background: linear-gradient(180deg, #0c0d18 0%, var(--color-surface) 100%);
    border-top: 1px solid rgba(200,169,110,.18);
    border-bottom: 1px solid rgba(200,169,110,.1);
    box-shadow: 0 -2px 20px rgba(200,169,110,.04);
}

.footer-separator {
    padding: 0;
    margin: 32px 0;
    border: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(200,169,110,.2)  10%,
        rgba(200,169,110,.5)  30%,
        rgba(200,169,110,.7)  50%,
        rgba(200,169,110,.5)  70%,
        rgba(200,169,110,.2)  90%,
        transparent 100%);
}
.site-footer { padding: 25px 0; }
.footer-bottom {
    border-top: 1px solid rgba(200,169,110,.12);
    padding-top: 20px;
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.footer-links { margin: 0; padding: 0; list-style: none; margin-bottom: 15px; }
.footer-links > li { display: inline-block; }
.footer-links > li > a { cursor: pointer; display: block; color: #b0b0b0; padding-right: 10px; line-height: 20px; text-decoration: none; font-size: 0.75rem; transition: color .2s; }
.footer-links > li + li > a { padding-left: 10px; border-left: 1px solid rgba(200,169,110,.18); }
.footer-links > li > a:hover { color: var(--color-primary); }
.copyright { color: #a0a0a0; text-align: right; margin-bottom: 15px; font-size: 0.6875rem; }

.site-footer a { flex-basis: calc((100% - 15px * 6) / 5); color: #888; font-size: 0.5625rem; text-align: center; padding: 3px 0; background-color: inherit; }  /* 9px */

/* ----------------------------------------------------------
   Site Info
   ---------------------------------------------------------- */

.footer-info-container { display: flex; }
.footer-info-container .site-info { flex-basis: calc(100% / 3 + 30px); position: relative; padding-right: 30px; }
.footer-info-container .site-info:last-child { flex-basis: calc(100% / 3 - 30px * 2); padding: 0; }

.footer-info-container .site-info:not(:last-child)::after,
.site-info:not(:last-child)::after {
    content: ''; position: absolute; display: inline-block;
    top: 90px; right: 20px; width: 1px; bottom: 20px;
    background: linear-gradient(to bottom, transparent, rgba(200,169,110,.25), transparent);
    border-radius: 2px;
}

.site-info:not(:last-child) { padding-right: 40px; }

.site-info [data-icon] { display: inline-block; height: 40px; width: 40px; background: no-repeat left; }
.site-info [data-icon="service"]          { background-position-y: 0; }
.site-info [data-icon="product"]          { background-position-y: -48px; }
.site-info [data-icon="help-and-service"] { background-position-y: -97px; }

.site-info .site-info-title { display: flex; flex-wrap: nowrap; align-items: center; padding: 15px 0; border-bottom: 1px solid rgba(200,169,110,.14); }
.site-info .site-info-title [data-icon] { width: 49px; height: 52px; overflow: hidden; flex-shrink: 0; }
.site-info .site-info-title [data-icon] img { width: 49px; height: 52px; object-fit: none; display: block; }
.site-info .site-info-title h3 { font-size: 1.3125rem; color: #e0e0e0; margin: 0; padding: 0; }   /* 21px */
.site-info .site-info-title p { font-size: 0.75rem; color: var(--color-text-muted); margin: 0; padding: 0; }  /* 12px */

.site-info .site-info-description { margin: 14px 0; }
.site-info .site-info-description.with-seperator + .with-seperator { border-top: 1px solid rgba(200,169,110,.12); padding-top: 12px; }
.site-info .site-info-description h4 { font-size: 1.0625rem; margin: 0 0 6px; color: #ffffff; }       /* 17px, 6px gap ke p */
.site-info .site-info-description p { font-size: 0.875rem; line-height: 1.6; color: rgba(255,255,255,.75); font-family: verdana; margin: 0; }   /* 14px */
.site-info .site-info-description p a {
    font-size: inherit;
    font-family: inherit;
    color: var(--color-primary);
    text-decoration: none;
    border-bottom: 1px solid rgba(200,169,110,.3);
    transition: color .2s, border-color .2s;
}
.site-info .site-info-description p a:hover {
    color: var(--color-accent-gold);
    border-bottom-color: var(--color-accent-gold);
}

.site-info .site-info-description .progress-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.site-info .site-info-description .progress-time { font-size: 0.875rem; font-weight: 600; color: var(--color-primary); }  /* 14px */
.site-info .site-info-description .progress-bar-wrap { margin-top: 4px; }

.site-info .site-info-description .progress-bar {
    display: block; width: 100%; height: 10px;
    background: rgba(255,255,255,.12); border-radius: 999px;
    overflow: hidden; float: none; box-sizing: border-box;
}

.site-info .site-info-description .progress-bar-fill {
    display: block; height: 100%; min-width: 4%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent-gold));
    border-radius: 999px; transition: width .4s ease;
}

.site-info .progress-bar-fill.progress-fill-deposit    { width: 85%; }
.site-info .progress-bar-fill.progress-fill-withdrawal { width: 35%; }

.footer-section-title {
    font-size: 0.6875rem;        /* 11px */
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 8px;
    margin-top: 0;
}

.site-footer .site-info .site-info-description h4,
.site-footer .site-info .site-info-description h4 { color: #ffffff; }

.supported-browser-container { display: flex; justify-content: flex-end; }

.hover-list { display: flex; flex-wrap: wrap; }
.hover-list > li + li { margin-left: 10px; }
.hover-list > li { position: relative; }
.hover-list > li picture, .hover-list > li img { width: 100%; }
.hover-list > li a > picture:first-child, .hover-list > li a > img:first-child, .hover-list > li > picture:first-child, .hover-list > li > img:first-child { opacity: 1; }
.hover-list > li a > picture:last-child, .hover-list > li a > img:last-child, .hover-list > li > picture:last-child, .hover-list > li > img:last-child { position: absolute; left: 0; top: 0; opacity: 0; }
.hover-list > li a > picture, .hover-list > li a > img, .hover-list > li > picture, .hover-list > li > img { transition: opacity .5s; }
.hover-list > li:hover a > picture:first-child, .hover-list > li:hover a > img:first-child, .hover-list > li:hover > picture:first-child, .hover-list > li:hover > img:first-child { opacity: 0; }
.hover-list > li:hover a > picture:last-child, .hover-list > li:hover a > img:last-child, .hover-list > li:hover > picture:last-child, .hover-list > li:hover > img:last-child { opacity: 1; }

/* hover-list: span wrapper support (converted <a> → <span class="static-link">) */
.hover-list > li span > picture:last-child,
.hover-list > li span > img:last-child { position: absolute; left: 0; top: 0; opacity: 0; }
.hover-list > li span > picture,
.hover-list > li span > img { transition: opacity .5s; }
.hover-list > li:hover span > picture:first-child,
.hover-list > li:hover span > img:first-child { opacity: 0; }
.hover-list > li:hover span > picture:last-child,
.hover-list > li:hover span > img:last-child { opacity: 1; }

/* Static / non-clickable element utilities */
.static-link { cursor: default; }

/* Provider & Mitra Kami wrapper */
.provider-section { width: 100%; }

.provider-section-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
}

.provider-container {
    display: inline-flex;
    flex-direction: column;
    min-width: 0;
    box-sizing: border-box;
    padding: 8px 10px 10px;
    margin: 0;
    border: 1px solid rgba(200,169,110,.2);
    border-radius: 8px;
    position: relative;
}

.provider-container > legend {
    width: initial; border-bottom: 0; margin-bottom: 6px; margin-top: 0;
    background: transparent; padding: 0 4px;
    font-size: 0.6875rem;   /* 11px */
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.provider-container .hover-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.provider-container .hover-list > li {
    margin: 0;
    flex-shrink: 0;
}

.provider-container .hover-list > li + li {
    margin-left: 0;
}

.provider-container .hover-list > li picture,
.provider-container .hover-list > li img {
    width: auto;
    max-width: 90px;
    height: 32px;
    object-fit: contain;
    display: block;
}


/* ============================================================
   17. SOCIAL MEDIA
   ============================================================ */

.social-media-list { margin-top: 5px; display: flex; flex-direction: column; gap: 10px; }
.social-media-list > li { display: block; }
.social-media-list > li + li { margin-left: 0; }
.social-media-list > li img { width: 32px; height: 32px; }

.social-media-list .social-icon {
    display: inline-flex; align-items: center;
    gap: 8px; color: #bbb; text-decoration: none;
    transition: color .2s, transform .2s;
}

.social-media-list .social-icon:hover { color: var(--color-primary); transform: scale(1.05); }
.social-media-list .social-icon-label { font-size: 0.875rem; font-weight: 600; }  /* 14px */
.social-media-list .social-icon svg { width: 32px; height: 32px; display: block; flex-shrink: 0; }
.social-media-list > li:hover img { animation: bounce 1s; }


/* ============================================================
   19. UTILITIES / KEYFRAMES
   ============================================================ */

/* Scroll-reveal */
[data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .55s cubic-bezier(.4,0,.2,1), transform .55s cubic-bezier(.4,0,.2,1);
    transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

@keyframes hero-heading-in {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.hero-copy { animation: hero-heading-in .5s ease both; }



/* ============================================================
   20. RESPONSIVE - TABLET (max-width: 991px)
   ============================================================ */

@media (max-width: 991px) {
    body { padding-top: 110px; }

    .site-header-inner-container { height: 70px; gap: 6px; }
    .site-header-inner-container .logo { width: auto; min-width: 0; flex-shrink: 0; }
    .site-header-inner-container .logo > img,
    .site-header-inner-container .logo > picture img { height: 40px; }    /* tablet */
    .site-header-inner-container .primary-nav { min-width: 0; overflow: hidden; }

    .home-progressive-jackpot .border-container { gap: 20px; }
    .home-progressive-jackpot .jackpot-container { font-size: 2.25rem; letter-spacing: 3px; }  /* 36px */

    .game-list .game-item { width: calc((100% - (5px * 4 * 2)) / 4); }

    .footer-info-container { flex-wrap: wrap; }
    .footer-info-container .site-info { flex-basis: 100%; padding-right: 0; }
    .footer-info-container .site-info:last-child { flex-basis: 100%; padding: 0; }
    .footer-info-container .site-info:not(:last-child)::after, .site-info:not(:last-child)::after { display: none; }

    .site-footer .col-md-4.supported-browser-container,
    .site-footer .supported-browser-container { justify-content: flex-start; text-align: left; }
}


/* ============================================================
   21. RESPONSIVE - MOBILE (max-width: 767px)
   ============================================================ */

@media (max-width: 767px) {
    body { padding-top: 96px; }

    .topbar-container { padding: 5px 0; }
    .topbar-inner-container { flex-wrap: wrap; gap: 4px; justify-content: space-between; }
    .topbar-left-section { flex-wrap: wrap; gap: 2px; width: 100%; align-items: center; }
    .topbar-left-section .topbar-item:first-child { margin-right: auto; }
    .topbar-left-section .topbar-item a { padding: 4px 6px; font-size: 0.6875rem; }  /* 11px */
    .topbar-left-section .language-selector-container { padding: 4px 6px; }
    .topbar-container .login-panel { display: none; }

    .hero-login-panel { display: block; width: 100%; margin: 10px 0 0; padding: 0; }

    .login-panel-hero-mobile { display: flex; width: 100%; flex-wrap: nowrap; justify-content: center; }
    .login-panel-hero-mobile .login-panel-item { flex: 0 0 50%; max-width: 50%; margin: 0; padding: 0; }
    .login-panel-hero-mobile .login-panel-item + .login-panel-item { margin-left: 0; }
    .login-panel-hero-mobile .login-panel-item:last-of-type { padding-right: 0; margin-right: 0; }
    .login-panel-hero-mobile .login-button,
    .login-panel-hero-mobile .register-button {
        display: block; width: 100%; font-size: 0.875rem; padding: 10px 0; line-height: 24px;  /* 14px */
        border-radius: 0; text-transform: uppercase; font-weight: 700;
    }

    .site-header-inner-container .primary-nav { display: none; }
    .primary-nav-mobile { display: block; margin-top: 10px; }
    .primary-nav-mobile .menu-slide { height: auto; padding: 10px; }
    .primary-nav-mobile .top-menu { overflow-x: auto; justify-content: space-between; -webkit-overflow-scrolling: touch; }
    .primary-nav-mobile .top-menu > li { flex: 0 0 20%; max-width: 20%; width: 20%; }
    .primary-nav-mobile .top-menu > li + li::before { display: none; }

    .site-header-inner-container { height: 58px; gap: 4px; padding: 0 4px; justify-content: center; }
    .site-header-inner-container .logo { width: auto; max-width: 140px; flex-shrink: 0; margin: 0 auto; }
    .site-header-inner-container .logo > img,
    .site-header-inner-container .logo > picture img { height: 34px; }    /* mobile */
    .menu-slide { overflow: hidden; }
    .menu-slide > i.glyphicon-chevron-left, .menu-slide > i.glyphicon-chevron-right { font-size: 0.625rem; }   /* 10px */

    .top-menu > li { flex-basis: auto; flex-shrink: 0; }
    .top-menu > li > a { font-size: 0.75rem; padding: 10px 4px; white-space: nowrap; }   /* 12px */
    .top-menu > li + li::before { margin: 0 4px; height: 16px; }

    .banner .banner-swiper .swiper-button-prev, .banner .banner-swiper .swiper-button-next { width: 32px; height: 32px; margin-top: -16px; }
    .banner .banner-swiper .swiper-button-prev::after, .banner .banner-swiper .swiper-button-next::after { font-size: 1.25rem; }   /* 20px */
    .banner .banner-swiper .swiper-button-prev { left: 8px; }
    .banner .banner-swiper .swiper-button-next { right: 8px; }

    .home-progressive-jackpot { flex-direction: column; padding: 10px 10px 18px; border-radius: 20px; }
    .home-progressive-jackpot .outer-container { border-radius: 60px; padding: 10px; }
    .home-progressive-jackpot .inner-container { border-radius: 60px; padding: 8px; }
    .home-progressive-jackpot .border-container { flex-direction: column; align-items: center; gap: 10px; border-radius: 50px; padding: 8px; background-color: #07070ee6; }
    .home-progressive-jackpot .jackpot-container { font-size: 1.75rem; letter-spacing: 5px; width: 100%; }    /* 28px */
    .home-progressive-jackpot .jackpot-inner-container { border-radius: 50px; padding: 8px; width: 100%; }
    .home-progressive-jackpot .jackpot-border-container { border-radius: 50px; background-color: #06060c; line-height: 30px; padding-bottom: 5px; width: 100%; }
    .home-progressive-jackpot .jackpot-play-section { align-items: center; margin-left: 0; gap: 6px; }
    .home-progressive-jackpot .jackpot-play-section > div { text-align: center; }
    .home-progressive-jackpot .jackpot-play-section picture { display: flex; justify-content: center; }
    .home-progressive-jackpot .jackpot-play-section img { height: auto; width: 64px; }
    .home-progressive-jackpot .jackpot-play-section .jackpot-play-text { font-size: 1.5rem; }   /* 24px */

    .home-inner-container { padding: 12px; border-radius: 25px; }

    .popular-game-title-container { padding: 6px; flex-wrap: wrap; gap: 6px; }
    .popular-game-title-container .title { font-size: 0.9375rem; }     /* 15px */
    .popular-game-title-container a { padding: 4px 16px; font-size: 0.8125rem; }  /* 13px */

    .game-list { border-radius: 20px; }
    .game-list .game-item { width: calc((100% - (5px * 3 * 2)) / 3); border-radius: 15px; }
    .game-list .wrapper-container { border-radius: 15px; }
    .game-list .game-name { font-size: 0.6875rem; padding: 3px 6px 6px; }  /* 11px */

    .popular-game-title-container + .game-list-container .game-list .games-group { width: calc((100% - 6px * 3) / 3.5); }

    .download-apk { flex-direction: column; text-align: center; }
    .download-apk > div { flex-basis: 100%; }
    .download-apk .h2 { margin-bottom: 6px; }
    .download-apk .h3 { font-size: 1.25rem; }        /* 20px */
    .download-apk .h4 { width: auto; font-size: 0.8125rem; }   /* 13px */
    .download-apk-btn .download-apk-text { font-size: 0.625rem; }  /* 10px */

    .announcement-outer-container { font-size: 0.6875rem; }    /* 11px */
    .site-contacts { padding: 8px 0; }

    /* -- Site footer ----------------------------------------- */
    .site-footer { padding: 15px 0; }
    .footer-bottom { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; margin-top: 16px; }
    .footer-bottom .col-md-8,
    .footer-bottom .col-md-4 { width: 100%; float: none; }

    .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; }
    .footer-links > li > a { font-size: 0.6875rem; padding: 12px 10px; line-height: 20px; min-height: 44px; display: flex; align-items: center; }              /* 11px, touch target 44px */
    .footer-links > li + li > a { border-left: 1px solid rgba(255,255,255,.12); padding-left: 10px; }
    .copyright { text-align: center; font-size: 0.6875rem; color: #dfdfdf; }           /* 11px */

    .footer-badges-row { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 10px; }
    .footer-badges-row .col-md-5,
    .footer-badges-row .col-md-3,
    .footer-badges-row .col-md-4 { flex: 1 1 0; min-width: 0; width: auto; max-width: none; float: none; padding: 0; }

    .site-footer .footer-section-title { font-size: 0.5625rem; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* 9px */
    .site-footer .hover-list { display: flex; flex-wrap: wrap; justify-content: flex-start; }
    .site-footer .hover-list > li { margin: 0; }
    .site-footer .hover-list > li + li { margin-left: 0; }
    .site-footer .hover-list > li picture,
    .site-footer .hover-list > li img { width: auto; max-width: 60px; max-height: 28px; object-fit: contain; display: block; }
    .site-footer .supported-browser-container { display: block; text-align: left; }

    .footer-info-container { flex-direction: column; gap: 0; }
    .footer-info-container .site-info,
    .footer-info-container .site-info:last-child { flex-basis: 100%; padding: 0; }
    .footer-info-container .site-info:not(:last-child)::after,
    .site-info:not(:last-child)::after { display: none; }
    .site-info .site-info-title { padding: 10px 0; }

    .provider-container { padding: 6px 8px 8px; }
    .provider-container .hover-list > li picture,
    .provider-container .hover-list > li img { max-width: 72px; height: 26px; }

    .hover-list > li + li { margin-left: 6px; }
    .hover-list > li picture, .hover-list > li img { width: 80px; }

    .social-media-list { gap: 8px; }

    .download-popup-modal .modal-dialog { width: 360px; max-width: calc(100vw - 24px); margin-left: auto; margin-right: auto; padding: 6px; }
    .modal-dialog { padding: 6px; }
    .button1 { padding: 8px 16px; font-size: 0.8125rem; }   /* 13px */
    .qr-codes img { width: 70%; }

    .hero-copy {
        bottom: 0;
        transform: none;
        width: 100%;
        border-radius: 0;
        padding: 6px 12px;
        background: rgba(7, 7, 14, 0.75);
        text-align: left;
        box-shadow: none;
    }
    .hero-copy .page-heading {
        font-size: 0.8125rem;   /* 13px */
        line-height: 1.3;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .hero-summary { display: none; }
}


/* ============================================================
   22. RESPONSIVE - XSMALL (max-width: 480px)
   ============================================================ */

@media (max-width: 480px) {
    body { padding-top: 88px; }
    .site-header-inner-container { height: 50px; }
    .site-header-inner-container .logo > img,
    .site-header-inner-container .logo > picture img { height: 28px; }    /* xsmall mobile */

    .topbar-container .login-panel .login-button,
    .topbar-container .login-panel .register-button {
        width: 56px; font-size: 0.625rem; line-height: 18px; border-radius: 10px;   /* 10px */
    }

    .game-list .game-item { width: calc((100% - (5px * 3 * 2)) / 3); }
    .home-progressive-jackpot .jackpot-container { font-size: 1.25rem; letter-spacing: 1px; }   /* 20px */
    .home-progressive-jackpot .jackpot-play-section .jackpot-play-text { font-size: 1.125rem; } /* 18px */

    .download-apk .h2 { font-size: 1.625rem; }   /* 26px */
    .download-apk .h3 { font-size: 1rem; }        /* 16px */

    .hover-list > li picture, .hover-list > li img { width: 60px; }
    .site-footer a { flex-basis: calc((100% - 15px * 2) / 2);}   /* 8px */

    .footer-badges-row .col-md-5,
    .footer-badges-row .col-md-3,
    .footer-badges-row .col-md-4 { flex: 1 1 0; padding: 0; }
    .site-footer .hover-list > li picture,
    .site-footer .hover-list > li img { max-width: 44px; max-height: 22px; }
    .site-footer .footer-section-title { font-size: 0.5rem; }                /* 8px */
    .provider-container .hover-list > li picture,
    .provider-container .hover-list > li img { max-width: 56px; height: 22px; }

    .popular-game-title-container .title { font-size: 0.8125rem; }    /* 13px */
    .popular-game-title-container a { padding: 3px 12px; font-size: 0.6875rem; }  /* 11px */
    .top-menu > li > a { font-size: 0.75rem; padding: 8px 3px; }  /* 12px */

}