/* CARD HEXAGON — DESAIN PERTAMA */
.card.p-3.my-3.shadow {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    color: #fff8dd;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(150, 56, 201, 0.22),
            transparent 60%
        ),
        linear-gradient(
            145deg,
            #4b146f 0%,
            #260936 48%,
            #12051f 100%
        ) !important;

    border: 1px solid #d4af37 !important;
    border-radius: 0 !important;

    clip-path: polygon(
        14px 0,
        calc(100% - 14px) 0,
        100% 14px,
        100% calc(100% - 14px),
        calc(100% - 14px) 100%,
        14px 100%,
        0 calc(100% - 14px),
        0 14px
    );

    box-shadow:
        0 10px 26px rgba(4, 0, 8, 0.65),
        0 0 12px rgba(126, 38, 180, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

/* Garis emas bagian atas */
.card.p-3.my-3.shadow::before {
    content: "";
    position: absolute;
    top: 0;
    left: 14px;
    right: 14px;
    z-index: 0;

    height: 2px;

    background: linear-gradient(
        90deg,
        transparent,
        #d4af37,
        #ffe59a,
        #d4af37,
        transparent
    );

    box-shadow: 0 0 7px rgba(212, 175, 55, 0.45);

    pointer-events: none;
}

/* Cahaya ungu di sudut */
.card.p-3.my-3.shadow::after {
    content: "";
    position: absolute;
    top: -70px;
    right: -70px;
    z-index: 0;

    width: 170px;
    height: 170px;

    background: radial-gradient(
        circle,
        rgba(150, 56, 201, 0.28),
        transparent 70%
    );

    pointer-events: none;
}

/* Memastikan isi berada di atas efek */
.card.p-3.my-3.shadow > * {
    position: relative;
    z-index: 1;
}

/* Judul di dalam card */
.card.p-3.my-3.shadow h1,
.card.p-3.my-3.shadow h2,
.card.p-3.my-3.shadow h3,
.card.p-3.my-3.shadow h4 {
    color: #ffe59a;

    text-shadow:
        0 0 5px rgba(212, 175, 55, 0.28),
        0 2px 3px rgba(0, 0, 0, 0.75);
}

/* Paragraf */
.card.p-3.my-3.shadow p {
    color: #fff8dd;
    line-height: 1.7;
}

/* Link */
.card.p-3.my-3.shadow a {
    color: #ffe59a;
    font-weight: 700;
    text-decoration-color: rgba(212, 175, 55, 0.5);
}

/* Efek hover desktop */
@media (hover: hover) and (pointer: fine) {
    .card.p-3.my-3.shadow:hover {
        transform: translateY(-3px);

        border-color: #ffe59a !important;

        box-shadow:
            0 14px 30px rgba(4, 0, 8, 0.72),
            0 0 16px rgba(126, 38, 180, 0.28),
            0 0 8px rgba(212, 175, 55, 0.18),
            inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    }
}

/* Penyesuaian HP */
@media (max-width: 575.98px) {
    .card.p-3.my-3.shadow {
        clip-path: polygon(
            10px 0,
            calc(100% - 10px) 0,
            100% 10px,
            100% calc(100% - 10px),
            calc(100% - 10px) 100%,
            10px 100%,
            0 calc(100% - 10px),
            0 10px
        );
    }
}



/* ================================================================
   HDC — HEXAGON PURPLE & GOLD THEME
   Tempel seluruh blok <style> ini pada Custom SEO.
   Tidak membutuhkan perubahan struktur HTML atau JavaScript tambahan.
================================================================ */

:root {
    --hx-bg: #09020f;
    --hx-bg-soft: #11051a;
    --hx-panel: #190725;
    --hx-panel-2: #260b38;
    --hx-purple-dark: #2a0a3d;
    --hx-purple: #5b1780;
    --hx-purple-light: #9638c9;
    --hx-gold-dark: #8a5a0b;
    --hx-gold: #d4af37;
    --hx-gold-light: #ffe69a;
    --hx-white: #fffaf0;
    --hx-muted: #cfbdd8;
    --hx-border: rgba(212, 175, 55, .58);
    --hx-shadow: 0 10px 28px rgba(4, 0, 8, .58);
    --hx-cut-sm: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
    --hx-cut-md: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
    --hx-shape: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

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

html {
    overflow-x: hidden;
    background: var(--hx-bg);
    scrollbar-color: var(--hx-gold) var(--hx-bg-soft);
}


body {
    min-width: 320px;
    overflow-x: hidden;
    padding-bottom: calc(82px + env(safe-area-inset-bottom));
    color: var(--hx-white);
    background:
        radial-gradient(circle at 15% 10%, rgba(112, 29, 155, .18), transparent 28rem),
        radial-gradient(circle at 90% 35%, rgba(212, 175, 55, .07), transparent 26rem),
        linear-gradient(180deg, #11051a 0%, #09020f 52%, #100419 100%) !important;
    font-family: "Exo 2", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body::-webkit-scrollbar {
    width: 8px;
}

body::-webkit-scrollbar-track {
    background: var(--hx-bg-soft);
}

body::-webkit-scrollbar-thumb {
    border: 2px solid var(--hx-bg-soft);
    border-radius: 10px;
    background: linear-gradient(var(--hx-gold-light), var(--hx-gold-dark));
}

a {
    color: var(--hx-gold-light);
}

a:hover {
    color: #fff4bf;
}

::selection {
    color: #1a0823;
    background: var(--hx-gold-light);
}

/* Fixed header clearance: this replaces the inline margin-top:60px safely. */
#content {
    width: 100%;
    margin-top: 72px !important;
}

#maincontent {
    position: relative;
    z-index: 1;
    width: 100%;
    overflow: hidden;
}

/* ================================================================
   TOP HEADER
================================================================ */

#navbar-top-wrapper.fixed-top {
    z-index: 1090;
}

#navbar-top {
    position: relative;
    isolation: isolate;
    min-height: 64px;
    padding: 4px 0 !important;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% -90%, rgba(181, 76, 226, .45), transparent 68%),
        linear-gradient(180deg, #310c48 0%, #190623 58%, #0f0317 100%) !important;
    border-top: 1px solid rgba(255, 230, 154, .46);
    border-bottom: 2px solid var(--hx-gold);
    box-shadow: 0 5px 18px rgba(5, 0, 10, .72), inset 0 1px rgba(255, 255, 255, .08);
}

#navbar-top::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, .07), rgba(132, 34, 181, .12), rgba(212, 175, 55, .07), transparent);
}

#navbar-top > .container {
    position: relative;
    z-index: 2;
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) 52px;
    align-items: center;
    width: 100%;
}

#navbar-top > .container > .position-relative {
    z-index: 5;
    display: flex;
    align-items: center;
}

#sidebarCollapse {
    position: relative;
    display: grid !important;
    place-items: center;
    width: 48px;
    height: 44px;
    padding: 0 !important;
    overflow: hidden;
    color: var(--hx-gold-light) !important;
    background: linear-gradient(135deg, var(--hx-gold-light), var(--hx-gold) 48%, var(--hx-gold-dark)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    clip-path: var(--hx-shape);
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .58));
    transition: transform .2s ease, filter .2s ease;
}

#sidebarCollapse::before {
    content: "";
    position: absolute;
    inset: 3px;
    background: linear-gradient(145deg, var(--hx-purple-light), var(--hx-purple) 48%, var(--hx-purple-dark));
    clip-path: inherit;
}

#sidebarCollapse .bi {
    position: relative;
    z-index: 2;
    color: var(--hx-gold-light);
    font-size: 1.45rem !important;
    line-height: 1;
    text-shadow: 0 0 6px rgba(255, 224, 122, .55);
}

#sidebarCollapse:active {
    transform: scale(.92);
}

#navbar-top .flex-fill.text-center {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 54px;
    min-width: 0;
}

#navbar-top .flex-fill.text-center::before,
#navbar-top .flex-fill.text-center::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    clip-path: polygon(9% 0, 91% 0, 100% 50%, 91% 100%, 9% 100%, 0 50%);
}

#navbar-top .flex-fill.text-center::before {
    z-index: 0;
    width: min(320px, 100%);
    height: 50px;
    background: linear-gradient(135deg, var(--hx-gold-dark), var(--hx-gold), var(--hx-gold-light), var(--hx-gold), var(--hx-gold-dark));
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .6));
}

#navbar-top .flex-fill.text-center::after {
    z-index: 1;
    width: min(314px, calc(100% - 6px));
    height: 44px;
    background: radial-gradient(circle, rgba(150, 56, 201, .35), transparent 70%), linear-gradient(180deg, #4b1268, #23082f 58%, #15041e);
    box-shadow: inset 0 0 13px rgba(255, 255, 255, .08);
}

#navbar-top .flex-fill.text-center > a {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

#navbar-imglogo {
    position: relative;
    z-index: 4;
    width: auto;
    height: auto;
    max-width: min(220px, calc(100% - 40px)) !important;
    max-height: 42px !important;
    margin-left: 0 !important;
    object-fit: contain;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .82)) drop-shadow(0 0 4px rgba(255, 220, 105, .26));
    transition: transform .22s ease, filter .22s ease;
}

/* ================================================================
   CATEGORY NAVIGATION — SHARED
================================================================ */

nav.menubar:not(.fixed-bottom) {
    position: relative !important;
    isolation: isolate;
    z-index: 3;
    width: 100%;
    margin: 0 !important;
    padding: 7px 0 6px !important;
    overflow: hidden;
    background: radial-gradient(circle at 50% -80%, rgba(132, 36, 181, .34), transparent 72%), linear-gradient(180deg, #240933, #100318) !important;
    border-top: 1px solid rgba(255, 230, 154, .32);
    border-bottom: 2px solid var(--hx-gold);
    box-shadow: 0 6px 18px rgba(5, 0, 10, .6), inset 0 1px rgba(255, 255, 255, .06);
}

nav.menubar:not(.fixed-bottom)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, .055), transparent);
}

/* Mobile Owl carousel category menu. */
#category-navbar.owl-carousel {
    width: 100%;
    min-height: 59px;
}

#category-navbar .owl-stage {
    display: flex;
    align-items: stretch;
}

#category-navbar .owl-item {
    align-self: stretch;
}

#category-navbar .item {
    height: 100%;
    padding: 1px 2px;
}

#category-navbar .item > div {
    height: 100%;
}

#category-navbar .item a {
    position: relative;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 58px;
    padding: 5px 2px 1px;
    color: var(--hx-white) !important;
}

#category-navbar .item a::before,
#category-navbar .item a::after {
    content: "";
    position: absolute;
    left: 50%;
    clip-path: var(--hx-shape);
    transform: translateX(-50%);
}

#category-navbar .item a::before {
    top: 0;
    z-index: 0;
    width: 47px;
    height: 42px;
    background: linear-gradient(135deg, var(--hx-gold-light), var(--hx-gold) 48%, var(--hx-gold-dark));
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .56));
}

#category-navbar .item a::after {
    top: 3px;
    z-index: 1;
    width: 41px;
    height: 36px;
    background: linear-gradient(145deg, var(--hx-purple-light), var(--hx-purple) 50%, var(--hx-purple-dark));
}

#category-navbar .item img {
    position: relative;
    z-index: 2;
    display: block !important;
    width: 31px !important;
    height: 31px !important;
    max-width: 31px !important;
    max-height: 31px !important;
    object-fit: contain;
}

#category-navbar .item a > div {
    position: relative;
    z-index: 2;
    margin-top: 7px;
    color: var(--hx-white);
    font-size: .58rem !important;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .25px;
    white-space: nowrap;
    text-shadow: 0 1px 3px #000;
}

/* Desktop category menu. */
#category-navbar-desktop {
    align-items: center;
    gap: 2px;
}

#category-navbar-desktop > .flex-grow-1 {
    min-width: 0;
}

#category-navbar-desktop > .flex-grow-1 > a {
    position: relative;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 75px;
    padding: 7px 2px 2px;
    color: var(--hx-white) !important;
    border-radius: 8px;
    transition: transform .2s ease, background .2s ease;
}

#category-navbar-desktop > .flex-grow-1 > a::before,
#category-navbar-desktop > .flex-grow-1 > a::after {
    content: "";
    position: absolute;
    left: 50%;
    clip-path: var(--hx-shape);
    transform: translateX(-50%);
    transition: transform .2s ease, filter .2s ease;
}

#category-navbar-desktop > .flex-grow-1 > a::before {
    top: 1px;
    z-index: 0;
    width: 61px;
    height: 55px;
    background: linear-gradient(135deg, var(--hx-gold-light), var(--hx-gold) 48%, var(--hx-gold-dark));
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .62));
}

#category-navbar-desktop > .flex-grow-1 > a::after {
    top: 4px;
    z-index: 1;
    width: 55px;
    height: 49px;
    background: linear-gradient(145deg, var(--hx-purple-light), var(--hx-purple) 50%, var(--hx-purple-dark));
}

#category-navbar-desktop img {
    position: relative;
    z-index: 2;
    width: 42px;
    height: 42px;
    object-fit: contain;
    transition: transform .2s ease, filter .2s ease;
}

#category-navbar-desktop a > div {
    position: relative;
    z-index: 2;
    margin-top: 8px;
    color: var(--hx-white);
    font-size: .59rem !important;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .45px;
    white-space: nowrap;
    text-shadow: 0 1px 3px #000;
}

/* ================================================================
   SIDEBAR
================================================================ */

#sidebar.bg-dark {
    overflow-x: hidden !important;
    opacity: 1 !important;
    color: var(--hx-white);
    background: radial-gradient(circle at 20% 5%, rgba(148, 49, 196, .3), transparent 18rem), linear-gradient(180deg, #270a39, #100318 65%, #08010d) !important;
    border-right: 2px solid var(--hx-gold);
    box-shadow: 12px 0 32px rgba(0, 0, 0, .64);
}

#sidebar > .d-flex:first-child {
    border-bottom: 1px solid var(--hx-border);
    background: rgba(255, 255, 255, .025);
}

#sidebar > .d-flex:first-child img {
    filter: drop-shadow(0 0 5px rgba(255, 221, 109, .35));
}

#dismiss {
    display: grid;
    place-items: center;
    width: 40px;
    height: 36px;
    padding: 0 !important;
    color: var(--hx-gold-light) !important;
    background: linear-gradient(145deg, #721e98, #310b43) !important;
    border: 1px solid var(--hx-gold) !important;
    border-radius: 0 !important;
    clip-path: var(--hx-shape);
}

#sidebar .nav-link {
    position: relative;
    margin: 3px 0;
    padding: 12px 14px !important;
    color: var(--hx-white) !important;
    background: linear-gradient(90deg, rgba(95, 25, 130, .35), rgba(30, 7, 44, .1));
    border: 1px solid rgba(212, 175, 55, .18);
    border-radius: 0 !important;
    clip-path: var(--hx-cut-sm);
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

#sidebar .nav-link i {
    color: var(--hx-gold-light);
}

#sidebar .nav-link:hover,
#sidebar .nav-link:focus-visible {
    transform: translateX(4px);
    background: linear-gradient(90deg, rgba(146, 49, 191, .65), rgba(63, 15, 87, .32));
    border-color: var(--hx-gold);
}

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

/* ================================================================
   MAIN SLIDERS AND PROMOTION BANNERS
================================================================ */

#main-slider,
#carousel-exlusive-promotion {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--hx-gold-dark), var(--hx-gold-light), var(--hx-gold-dark));
    box-shadow: var(--hx-shadow);
}

#main-slider {
    padding: 2px 0;
    border-top: 1px solid var(--hx-gold-light);
    border-bottom: 1px solid var(--hx-gold);
}

#carousel-exlusive-promotion {
    padding: 2px;
    clip-path: var(--hx-cut-md);
}

#main-slider .carousel-item img,
#carousel-exlusive-promotion .carousel-item img {
    display: block;
    object-fit: cover;
    background: var(--hx-panel);
}

#carousel-exlusive-promotion .carousel-item img {
    clip-path: var(--hx-cut-md);
}

#main-slider .carousel-indicators {
    margin-bottom: 8px;
}

#main-slider .carousel-indicators button {
    width: 9px;
    height: 9px;
    margin: 0 4px;
    background-color: var(--hx-gold-light) !important;
    border: 1px solid rgba(40, 8, 54, .82);
    border-radius: 0;
    clip-path: var(--hx-shape);
    opacity: .5;
}

#main-slider .carousel-indicators button.active {
    opacity: 1;
    filter: drop-shadow(0 0 5px var(--hx-gold));
}

/* ================================================================
   HEADINGS, LINKS AND SECTION SEPARATORS
================================================================ */

#maincontent h3 {
    color: var(--hx-white);
    font-weight: 700;
    letter-spacing: .25px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .65);
}

#maincontent .d-flex.justify-content-between.align-items-center {
    position: relative;
    min-height: 46px;
    margin-top: 20px !important;
    padding: 6px 12px;
    background: linear-gradient(90deg, rgba(83, 20, 115, .72), rgba(31, 7, 44, .42), transparent);
    border-left: 3px solid var(--hx-gold);
    border-bottom: 1px solid rgba(212, 175, 55, .4);
    clip-path: var(--hx-cut-sm);
}

#maincontent .d-flex.justify-content-between.align-items-center h3 {
    margin: 0 !important;
    font-size: clamp(1.05rem, 3.5vw, 1.55rem);
}

#maincontent .d-flex.justify-content-between.align-items-center > a {
    color: var(--hx-gold-light);
    font-size: clamp(.7rem, 2.5vw, .95rem);
    white-space: nowrap;
    text-shadow: 0 1px 3px #000;
}

#maincontent h3.text-center {
    position: relative;
    width: fit-content;
    margin-right: auto;
    margin-bottom: 20px;
    margin-left: auto;
    padding: 8px 34px;
    color: var(--hx-gold-light);
    background: linear-gradient(180deg, rgba(101, 26, 139, .64), rgba(31, 7, 44, .46));
    border-top: 1px solid var(--hx-gold);
    border-bottom: 1px solid var(--hx-gold-dark);
    clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%);
}

/* ================================================================
   LOGIN FORM, INPUTS AND BUTTONS
================================================================ */

#row-quicklogin.card {
    overflow: hidden;
    color: var(--hx-white);
    background: linear-gradient(145deg, rgba(71, 18, 98, .94), rgba(20, 5, 29, .97)) !important;
    border: 1px solid var(--hx-gold) !important;
    border-radius: 0 !important;
    clip-path: var(--hx-cut-md);
    box-shadow: var(--hx-shadow), inset 0 1px rgba(255, 255, 255, .07);
}

#row-quicklogin .card-body {
    padding: clamp(15px, 4vw, 24px);
}

#row-quicklogin .form-label {
    margin-bottom: 6px;
    color: var(--hx-gold-light);
    font-size: .92rem;
    letter-spacing: .35px;
}

.form-control,
.input-group .form-control {
    min-height: 44px;
    color: var(--hx-white) !important;
    caret-color: var(--hx-gold-light);
    background: rgba(9, 2, 15, .72) !important;
    border: 1px solid rgba(212, 175, 55, .62) !important;
    border-radius: 0 !important;
    clip-path: var(--hx-cut-sm);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, .4) !important;
}

.form-control::placeholder {
    color: #b9a7c2 !important;
    opacity: 1;
}

.form-control:focus {
    border-color: var(--hx-gold-light) !important;
    box-shadow: 0 0 0 2px rgba(212, 175, 55, .15), 0 0 12px rgba(147, 52, 196, .32) !important;
}

#togglePass {
    z-index: 4;
    color: var(--hx-gold-light);
    cursor: pointer;
}

.btn {
    min-height: 42px;
    font-weight: 700;
    letter-spacing: .35px;
    border-radius: 0 !important;
    clip-path: var(--hx-cut-sm);
    box-shadow: 0 5px 12px rgba(0, 0, 0, .32);
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.btn-primary,
#btn-login {
    color: #fff !important;
    background: linear-gradient(135deg, #9b3ace, #5d1782 52%, #351047) !important;
    border: 1px solid var(--hx-gold) !important;
}

.btn-secondary,
#btn-register {
    color: #22092e !important;
    background: linear-gradient(135deg, var(--hx-gold-light), var(--hx-gold) 54%, #b77c13) !important;
    border: 1px solid #fff0b3 !important;
}

.btn-danger,
#btn-promotion {
    color: #fff !important;
    background: linear-gradient(135deg, #7f245f, #501037 56%, #2d081f) !important;
    border: 1px solid var(--hx-gold) !important;
}

.input-group {
    overflow: visible;
    border-radius: 0 !important;
}

.input-group .btn-primary {
    min-width: 54px;
    clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
}

.btn:active {
    transform: translateY(1px) scale(.98);
}

/* ================================================================
   GAME GRID
================================================================ */

#maincontent .row.mb-3.g-1 > [class*="col-"] > a {
    position: relative;
    display: block;
    padding: 2px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--hx-gold-light), var(--hx-gold-dark));
    clip-path: var(--hx-cut-sm);
    filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .42));
    transition: transform .2s ease, filter .2s ease;
}

#maincontent .row.mb-3.g-1 > [class*="col-"] > a::after {
    content: "";
    position: absolute;
    inset: 2px;
    z-index: 2;
    pointer-events: none;
    border: 1px solid rgba(255, 230, 154, .28);
    clip-path: var(--hx-cut-sm);
}

#maincontent .row.mb-3.g-1 > [class*="col-"] > a img {
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: var(--hx-panel);
    clip-path: var(--hx-cut-sm);
    transition: transform .25s ease, filter .25s ease;
}

/* ================================================================
   PROVIDERS, PAYMENT AND SOCIAL PANELS
================================================================ */

#maincontent .glassmorphism {
    color: var(--hx-white);
    background: linear-gradient(145deg, rgba(86, 22, 118, .62), rgba(18, 4, 27, .84)) !important;
    border: 1px solid rgba(212, 175, 55, .62) !important;
    border-radius: 0 !important;
    clip-path: var(--hx-cut-sm);
    box-shadow: inset 0 1px rgba(255, 255, 255, .06), 0 5px 12px rgba(0, 0, 0, .3);
}

#maincontent .row.g-1 .glassmorphism {
    display: grid;
    place-items: center;
    min-height: 64px;
    padding: 12px 5px !important;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

#maincontent .row.g-1 .glassmorphism img {
    width: auto;
    height: auto;
    max-width: min(100px, 88%) !important;
    max-height: 32px;
    object-fit: contain;
}

#maincontent .my-5.p-3.glassmorphism {
    padding: 20px !important;
    clip-path: var(--hx-cut-md);
}

/* ================================================================
   MODAL
================================================================ */

#popupModal .modal-content {
    overflow: hidden;
    color: var(--hx-white);
    background: linear-gradient(145deg, #43115d, #160520) !important;
    border: 2px solid var(--hx-gold) !important;
    clip-path: var(--hx-cut-md);
    box-shadow: 0 16px 45px rgba(0, 0, 0, .72);
}

#popupModal .modal-body {
    background: transparent;
}

.modal-backdrop.show {
    opacity: .78;
}

/* ================================================================
   FOOTER
================================================================ */

.footer {
    position: relative;
    margin-top: 32px;
    padding: 22px 12px 18px !important;
    color: var(--hx-muted);
    background: linear-gradient(180deg, rgba(41, 10, 58, .45), rgba(9, 2, 15, .96));
    border-top: 1px solid var(--hx-border);
}

.footer::before {
    content: "";
    position: absolute;
    top: -2px;
    left: 50%;
    width: min(260px, 70%);
    height: 3px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, var(--hx-gold-light), transparent);
    box-shadow: 0 0 8px rgba(212, 175, 55, .56);
}

.footer-logo {
    margin-top: 5px !important;
    filter: drop-shadow(0 0 5px rgba(255, 220, 105, .34)) !important;
}

/* ================================================================
   FIXED BOTTOM NAVIGATION
================================================================ */

nav.menubar.fixed-bottom {
    position: fixed !important;
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 1080;
    display: flex !important;
    min-height: 72px;
    padding: 3px 0 calc(3px + env(safe-area-inset-bottom)) !important;
    overflow: visible;
    background: radial-gradient(circle at 50% 140%, rgba(155, 55, 207, .42), transparent 65%), linear-gradient(180deg, #290b3c, #100318) !important;
    border-top: 2px solid var(--hx-gold);
    border-bottom: 0;
    box-shadow: 0 -6px 20px rgba(5, 0, 10, .72), inset 0 1px rgba(255, 255, 255, .07);
}

nav.menubar.fixed-bottom > .container {
    width: 100%;
    max-width: 560px;
    padding-right: 8px;
    padding-left: 8px;
}

nav.menubar.fixed-bottom .container > .d-flex {
    align-items: center;
    gap: 4px;
}

nav.menubar.fixed-bottom .flex-grow-1 {
    min-width: 0;
    padding: 1px 0 !important;
}

nav.menubar.fixed-bottom .flex-grow-1 > a {
    position: relative;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 62px;
    padding: 4px 2px 1px;
    color: var(--hx-white) !important;
    touch-action: manipulation;
    transition: transform .18s ease, background .18s ease;
}

nav.menubar.fixed-bottom .flex-grow-1 > a::before,
nav.menubar.fixed-bottom .flex-grow-1 > a::after {
    content: "";
    position: absolute;
    left: 50%;
    clip-path: var(--hx-shape);
    transform: translateX(-50%);
}

nav.menubar.fixed-bottom .flex-grow-1 > a::before {
    top: 0;
    z-index: 0;
    width: 49px;
    height: 44px;
    background: linear-gradient(135deg, var(--hx-gold-light), var(--hx-gold) 50%, var(--hx-gold-dark));
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .58));
}

nav.menubar.fixed-bottom .flex-grow-1 > a::after {
    top: 3px;
    z-index: 1;
    width: 43px;
    height: 38px;
    background: linear-gradient(145deg, var(--hx-purple-light), var(--hx-purple) 50%, var(--hx-purple-dark));
}

nav.menubar.fixed-bottom .flex-grow-1 > a img {
    position: relative;
    z-index: 2;
    width: 32px;
    height: 32px;
    object-fit: contain;
    transition: transform .18s ease, filter .18s ease;
}

nav.menubar.fixed-bottom .flex-grow-1 > a > div {
    position: relative;
    z-index: 2;
    margin-top: 7px;
    color: var(--hx-white);
    font-size: .63rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .4px;
    white-space: nowrap;
    text-shadow: 0 1px 3px #000;
}

nav.menubar.fixed-bottom .flex-grow-1 > a:active {
    transform: scale(.94);
}

/* ================================================================
   POINTER HOVER EFFECTS
================================================================ */

@media (hover: hover) and (pointer: fine) {
    #sidebarCollapse:hover {
        transform: translateY(-2px) scale(1.04);
        filter: drop-shadow(0 0 6px rgba(255, 229, 154, .78)) drop-shadow(0 5px 6px rgba(0, 0, 0, .64));
    }

    #navbar-top a:hover #navbar-imglogo {
        transform: scale(1.035);
        filter: brightness(1.07) drop-shadow(0 2px 3px rgba(0, 0, 0, .8)) drop-shadow(0 0 7px rgba(255, 220, 105, .56));
    }

    #category-navbar-desktop a:hover,
    nav.menubar.fixed-bottom a:hover {
        transform: translateY(-3px);
        background: linear-gradient(180deg, rgba(212, 175, 55, .09), transparent);
    }

    #category-navbar-desktop a:hover::before,
    nav.menubar.fixed-bottom a:hover::before {
        filter: drop-shadow(0 0 5px rgba(255, 229, 154, .84)) drop-shadow(0 4px 5px rgba(0, 0, 0, .58));
    }

    #category-navbar-desktop a:hover img,
    nav.menubar.fixed-bottom a:hover img {
        transform: translateY(-2px) scale(1.06);
        filter: brightness(1.1) drop-shadow(0 0 4px rgba(255, 224, 125, .66));
    }

    .btn:hover {
        transform: translateY(-2px);
        filter: brightness(1.08);
        box-shadow: 0 8px 16px rgba(0, 0, 0, .4);
    }

    #maincontent .row.mb-3.g-1 > [class*="col-"] > a:hover {
        z-index: 3;
        transform: translateY(-4px) scale(1.025);
        filter: drop-shadow(0 9px 13px rgba(0, 0, 0, .52));
    }

    #maincontent .row.mb-3.g-1 > [class*="col-"] > a:hover img {
        filter: brightness(1.08) saturate(1.06);
    }

    #maincontent .row.g-1 .glassmorphism:hover {
        transform: translateY(-3px);
        background: linear-gradient(145deg, rgba(113, 29, 153, .76), rgba(28, 7, 40, .92)) !important;
        border-color: var(--hx-gold-light) !important;
    }
}

/* ================================================================
   RESPONSIVE SAFETY
================================================================ */

/* Phones and tablets: mobile category carousel is visible, desktop is not. */
@media (max-width: 1199.98px) {
    #content {
        margin-top: 70px !important;
    }

    nav.menubar:not(.fixed-bottom) {
        padding-top: 7px !important;
        padding-bottom: 6px !important;
    }

    #maincontent > .container,
    #maincontent .container {
        padding-right: 10px;
        padding-left: 10px;
    }

    #maincontent .my-5 {
        margin-top: 2.2rem !important;
        margin-bottom: 2.2rem !important;
    }
}

/* Tablets. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    #category-navbar .item a {
        min-height: 62px;
    }

    #category-navbar .item a::before {
        width: 52px;
        height: 46px;
    }

    #category-navbar .item a::after {
        width: 46px;
        height: 40px;
    }

    #category-navbar .item img {
        width: 34px !important;
        height: 34px !important;
        max-width: 34px !important;
        max-height: 34px !important;
    }
}

/* Normal phones. */
@media (max-width: 575.98px) {
    #navbar-top > .container {
        grid-template-columns: 46px minmax(0, 1fr) 46px;
        padding-right: 10px;
        padding-left: 10px;
    }

    #sidebarCollapse {
        width: 44px;
        height: 40px;
    }

    #sidebarCollapse .bi {
        font-size: 1.32rem !important;
    }

    #navbar-top .flex-fill.text-center::before {
        height: 47px;
    }

    #navbar-top .flex-fill.text-center::after {
        height: 41px;
    }

    #navbar-imglogo {
        max-width: calc(100% - 32px) !important;
        max-height: 38px !important;
    }

    #main-slider .carousel-indicators {
        margin-bottom: 4px;
    }

    #row-loginmenu .my-3 {
        margin-top: 12px !important;
        margin-bottom: 12px !important;
    }

    #row-quicklogin .card-body {
        padding: 15px;
    }

    #maincontent .d-flex.justify-content-between.align-items-center {
        min-height: 42px;
        padding: 5px 9px;
    }

    #maincontent .d-flex.justify-content-between.align-items-center > a {
        max-width: 48%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #maincontent h3.text-center {
        padding: 7px 25px;
        font-size: 1.2rem;
    }

    #maincontent .row.g-1 .glassmorphism {
        min-height: 58px;
        padding: 10px 4px !important;
    }

    #maincontent .row.g-1 .glassmorphism img {
        max-width: 88px !important;
        max-height: 28px;
    }
}

/* Very small phones: 320px–359px. */
@media (max-width: 359.98px) {
    #navbar-top > .container {
        grid-template-columns: 42px minmax(0, 1fr) 42px;
        padding-right: 6px;
        padding-left: 6px;
    }

    #sidebarCollapse {
        width: 40px;
        height: 37px;
    }

    #navbar-top .flex-fill.text-center::before {
        height: 43px;
    }

    #navbar-top .flex-fill.text-center::after {
        height: 37px;
    }

    #navbar-imglogo {
        max-width: calc(100% - 24px) !important;
        max-height: 34px !important;
    }

    #category-navbar .item a > div {
        font-size: .53rem !important;
        letter-spacing: 0;
    }

    nav.menubar.fixed-bottom .flex-grow-1 > a::before {
        width: 45px;
        height: 40px;
    }

    nav.menubar.fixed-bottom .flex-grow-1 > a::after {
        width: 39px;
        height: 34px;
    }

    nav.menubar.fixed-bottom .flex-grow-1 > a img {
        width: 29px;
        height: 29px;
    }

    nav.menubar.fixed-bottom .flex-grow-1 > a > div {
        margin-top: 7px;
        font-size: .58rem;
    }

    #maincontent .d-flex.justify-content-between.align-items-center h3 {
        font-size: .98rem;
    }

    #maincontent .d-flex.justify-content-between.align-items-center > a {
        font-size: .65rem;
    }
}

/* Desktop category sizing. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    #category-navbar-desktop > .flex-grow-1 > a::before {
        width: 56px;
        height: 50px;
    }

    #category-navbar-desktop > .flex-grow-1 > a::after {
        width: 50px;
        height: 44px;
    }

    #category-navbar-desktop img {
        width: 38px;
        height: 38px;
    }

    #category-navbar-desktop a > div {
        margin-top: 8px;
        font-size: .54rem !important;
        letter-spacing: .25px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ==================================================
   PERBAIKAN SELECTOR PROVIDER
   Desain pertama: ungu gelap + emas
================================================== */

/* Kolom provider */
#maincontent #selectProvider.row > [class*="col-"] {
    display: grid;
}

/* Tombol provider */
#maincontent #selectProvider.row > [class*="col-"] > a.btn {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 42px;
    min-height: 42px;

    padding: 6px 10px !important;
    overflow: hidden;

    color: #fff8dd !important;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(150, 56, 201, 0.2),
            transparent 65%
        ),
        linear-gradient(
            145deg,
            #4b146f 0%,
            #260936 52%,
            #12051f 100%
        ) !important;

    border: 1px solid #d4af37 !important;
    border-radius: 0 !important;

    clip-path: polygon(
        8px 0,
        calc(100% - 8px) 0,
        100% 8px,
        100% calc(100% - 8px),
        calc(100% - 8px) 100%,
        8px 100%,
        0 calc(100% - 8px),
        0 8px
    ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 4px 9px rgba(0, 0, 0, 0.4) !important;

    filter: none !important;
    transform: none !important;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

/* Menghapus pseudo-element dari CSS game card */
#maincontent #selectProvider.row > [class*="col-"] > a.btn::after {
    content: none !important;
    display: none !important;
}

/* Memperbaiki semua logo provider */
#maincontent #selectProvider.row a.btn img:not(.pragmatic-icon-badge) {
    position: relative !important;
    inset: auto !important;
    z-index: 2;

    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: 90px !important;
    max-height: 23px !important;

    margin: auto !important;

    object-fit: contain !important;
    aspect-ratio: auto !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    clip-path: none !important;

    box-shadow: none !important;
    filter:
        brightness(1.08)
        drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)) !important;

    transform: none !important;
}

/* Badge kecil khusus Pragmatic */
#maincontent #selectProvider .pragmatic-badge-container {
    position: relative;
}

#maincontent #selectProvider img.pragmatic-icon-badge {
    position: absolute !important;
    top: 3px !important;
    right: 4px !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 4;

    display: block !important;

    width: 14px !important;
    height: 14px !important;
    max-width: 14px !important;
    max-height: 14px !important;

    margin: 0 !important;

    object-fit: contain !important;
    aspect-ratio: auto !important;

    background: transparent !important;
    border: 0 !important;
    clip-path: none !important;

    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
}

/* Tombol provider aktif */
#maincontent #selectProvider.row a.btn.active {
    color: #2a0a38 !important;

    background: linear-gradient(
        135deg,
        #fff1ae 0%,
        #d4af37 48%,
        #9d6810 100%
    ) !important;

    border-color: #ffe59a !important;

    box-shadow:
        0 0 8px rgba(212, 175, 55, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

/* Teks “Semua” */
#maincontent #selectProvider.row a.btn span {
    position: relative;
    z-index: 2;

    color: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
}

/* Hover desktop */
@media (hover: hover) and (pointer: fine) {
    #maincontent #selectProvider.row > [class*="col-"] > a.btn:hover {
        background: linear-gradient(
            145deg,
            #8126b8 0%,
            #4b146f 50%,
            #260936 100%
        ) !important;

        border-color: #ffe59a !important;

        box-shadow:
            0 0 10px rgba(126, 38, 180, 0.38),
            0 5px 11px rgba(0, 0, 0, 0.48) !important;

        filter: none !important;
        transform: translateY(-2px) !important;
    }

    #maincontent #selectProvider.row a.btn.active:hover {
        color: #2a0a38 !important;

        background: linear-gradient(
            135deg,
            #fff5c5,
            #e2bd42 50%,
            #aa7111
        ) !important;
    }

    #maincontent #selectProvider.row a.btn:hover img {
        transform: none !important;
    }
}

/* Penyesuaian HP */
@media (max-width: 575.98px) {
    #maincontent #selectProvider.row > [class*="col-"] > a.btn {
        height: 39px;
        min-height: 39px;
        padding: 5px 4px !important;
    }

    #maincontent #selectProvider.row a.btn img:not(.pragmatic-icon-badge) {
        max-width: 72px !important;
        max-height: 20px !important;
    }

    #maincontent #selectProvider.row a.btn span {
        font-size: 0.7rem;
    }
}

/* ================================================================
   SHARED CONTENT COMPONENTS
   Cara bermain, artikel, referral, market, tabel, dan promosi.
================================================================ */

:root {
    --hx-overlay: rgba(5, 0, 10, 0.86);
    --hx-overlay-strong: rgba(9, 0, 14, 0.94);
    --hx-bright-gold: #ffd740;
    --hx-panel-border: rgba(255, 215, 64, 0.8);
    --hx-panel-shadow:
        0 10px 25px rgba(0, 0, 0, 0.55),
        0 0 15px rgba(174, 0, 255, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --hx-heading-shadow:
        0 2px 3px #000,
        0 0 12px rgba(255, 215, 64, 0.45);
}

/* Panel hitam transparan yang digunakan oleh beberapa halaman. */
:where(
    #nav-tabContent,
    div.mb-3:has(> h1:first-child),
    div.my-3:has(> h1):has(> table.table-bordered),
    div.mb-5:has(select.form-select[name="m"]),
    div.row:has(table.table-bordered)
) {
    color: #fff !important;
    background: var(--hx-overlay) !important;
    border: 1px solid var(--hx-panel-border);
    border-radius: 12px;
    box-shadow: var(--hx-panel-shadow);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

#nav-tabContent,
div.mb-3:has(> h1:first-child),
div.my-3:has(> h1):has(> table.table-bordered) {
    padding: 22px 24px !important;
}

#nav-tabContent {
    margin-top: 12px;
}

div.mb-5:has(select.form-select[name="m"]) {
    padding: 20px !important;
}

div.row:has(table.table-bordered) {
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding: 20px 16px !important;
}

/* Judul emas pada panel isi. */
:is(
    #nav-tabContent h3,
    div.mb-3:has(> h1:first-child) > h1,
    div.my-3:has(> h1):has(> table.table-bordered) > h1
) {
    color: var(--hx-bright-gold) !important;
    font-weight: 800;
    border-bottom: 2px solid rgba(255, 215, 64, 0.7);
    text-shadow: var(--hx-heading-shadow);
}

#nav-tabContent h3 {
    margin-bottom: 15px;
    padding-bottom: 8px;
}

div.mb-3:has(> h1:first-child) > h1,
div.my-3:has(> h1):has(> table.table-bordered) > h1 {
    margin: 0 0 16px !important;
    padding-bottom: 11px;
    font-size: clamp(22px, 3vw, 34px);
    line-height: 1.3;
}

/* Sembunyikan gambar referral yang belum memiliki URL. */
div.mb-3:has(> img[src=""]) {
    display: none !important;
}

div.mb-3:has(> h1:first-child) {
    position: relative;
    overflow: hidden;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.75;
    text-shadow: 0 1px 2px #000;
}

div.mb-3:has(> h1:first-child)::before {
    content: "";
    position: absolute;
    top: -70px;
    right: -70px;
    width: 180px;
    height: 180px;
    pointer-events: none;
    background: rgba(178, 0, 255, 0.25);
    border-radius: 50%;
    filter: blur(30px);
}

div.mb-3:has(> h1:first-child) > h1 {
    position: relative;
}

/* ================================================================
   CARA BERMAIN: TAB DAN ISI
================================================================ */

#nav-tab {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    background: rgba(5, 0, 10, 0.78);
    border: 1px solid rgba(255, 215, 64, 0.65);
    border-radius: 12px;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.5), 0 0 12px rgba(180, 0, 255, 0.2);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

#nav-tab .nav-link {
    flex: 1 1 auto;
    padding: 9px 13px;
    color: #fff !important;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    background: linear-gradient(180deg, rgba(105, 15, 145, 0.85), rgba(38, 0, 55, 0.9)) !important;
    border: 1px solid rgba(255, 215, 64, 0.5) !important;
    border-radius: 8px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    text-shadow: 0 1px 2px #000;
    transition: transform 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

#nav-tab .nav-link:hover {
    color: var(--hx-bright-gold) !important;
    background: linear-gradient(180deg, rgba(155, 25, 205, 0.95), rgba(64, 0, 90, 0.95)) !important;
    border-color: var(--hx-bright-gold) !important;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.4), 0 0 10px rgba(255, 215, 64, 0.4);
    transform: translateY(-2px);
}

#nav-tab .nav-link.active,
#nav-tab .nav-link[aria-selected="true"] {
    color: #21002c !important;
    font-weight: 800;
    background: linear-gradient(135deg, #fff3a3, #ffd740 35%, #c89100 70%, #ffe978) !important;
    border-color: #fff0a0 !important;
    box-shadow: 0 0 0 1px rgba(79, 0, 105, 0.8), 0 0 14px rgba(255, 215, 64, 0.65);
    text-shadow: none;
}

#nav-tabContent :is(.tab-pane, p, li) {
    color: #fff !important;
    line-height: 1.7;
}

#nav-tabContent strong {
    color: #ffe878 !important;
}

#nav-tabContent a,
#article-content a {
    color: var(--hx-bright-gold) !important;
    font-weight: 700;
    text-decoration: none;
}

#nav-tabContent a:hover,
#article-content a:hover {
    color: #f2a6ff !important;
    text-decoration: underline;
}

#nav-tabContent hr,
.container.mt-3.mb-5 > hr {
    height: 2px;
    margin: 24px 0;
    border: 0;
    opacity: 1;
    background: linear-gradient(90deg, transparent, #a900ff, var(--hx-bright-gold), #a900ff, transparent);
    box-shadow: 0 0 8px rgba(255, 215, 64, 0.5);
}

#nav-tabContent .table {
    color: #fff !important;
    background: rgba(0, 0, 0, 0.45) !important;
    border-color: rgba(255, 215, 64, 0.55) !important;
}

#nav-tabContent .table :is(th, td) {
    color: #fff !important;
    background: rgba(25, 0, 35, 0.72) !important;
    border-color: rgba(255, 215, 64, 0.55) !important;
}

/* ================================================================
   ARTIKEL DAN CARD PROMOSI
================================================================ */

.container.mt-3.mb-5 > h1:first-child {
    margin: 0 !important;
    padding: 18px 22px 10px;
    color: var(--hx-bright-gold) !important;
    font-size: clamp(22px, 3vw, 34px);
    font-weight: 800;
    line-height: 1.3;
    background: var(--hx-overlay);
    border: 1px solid rgba(255, 215, 64, 0.75);
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.35), 0 0 14px rgba(174, 0, 255, 0.2);
    text-shadow: 0 2px 3px #000, 0 0 12px rgba(255, 215, 64, 0.4);
}

#article-content {
    padding: 10px 22px 20px !important;
    color: #fff !important;
    background: var(--hx-overlay) !important;
    border: 1px solid rgba(255, 215, 64, 0.75);
    border-top: 0;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 14px rgba(174, 0, 255, 0.2);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

#article-content :is(p, li, span) {
    color: #fff !important;
    font-size: 15px;
    line-height: 1.75;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
}

#article-content p:last-child {
    margin-bottom: 0;
}

.container.mt-3.mb-5 .row > [class*="col-"] > a {
    display: block;
    height: 100%;
    padding: 5px;
    overflow: hidden;
    background: var(--hx-overlay);
    border: 1px solid rgba(255, 215, 64, 0.65);
    border-radius: 12px;
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.5), 0 0 10px rgba(174, 0, 255, 0.18);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.container.mt-3.mb-5 .row > [class*="col-"] > a:hover {
    border-color: var(--hx-bright-gold);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6), 0 0 16px rgba(255, 215, 64, 0.4);
    transform: translateY(-4px);
}

.container.mt-3.mb-5 .row > [class*="col-"] img {
    display: block;
    width: 100%;
    border-radius: 8px 8px 5px 5px !important;
}

.container.mt-3.mb-5 .row h4.text-white {
    min-height: 52px;
    margin: 0 !important;
    padding: 12px 14px;
    color: #fff !important;
    font-size: 17px;
    font-weight: 750;
    line-height: 1.4;
    background: linear-gradient(135deg, rgba(61, 0, 82, 0.98), rgba(12, 0, 18, 0.98));
    border-top: 1px solid rgba(255, 215, 64, 0.6);
    border-radius: 0 0 8px 8px;
    text-shadow: 0 2px 3px #000;
}

/* ================================================================
   REFERRAL, MARKET, DAN TABEL
================================================================ */

select.form-select[name="m"] {
    width: min(100%, 420px) !important;
    min-height: 48px;
    padding: 10px 42px 10px 15px !important;
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    background-color: rgba(25, 0, 35, 0.96) !important;
    border: 1px solid var(--hx-bright-gold) !important;
    border-radius: 9px !important;
    outline: none !important;
    box-shadow: 0 0 0 1px rgba(174, 0, 255, 0.45), 0 0 12px rgba(255, 215, 64, 0.25) !important;
    cursor: pointer;
}

select.form-select[name="m"]:focus {
    color: #fff !important;
    background-color: #240030 !important;
    border-color: #fff09a !important;
    box-shadow: 0 0 0 3px rgba(174, 0, 255, 0.25), 0 0 15px rgba(255, 215, 64, 0.45) !important;
}

select.form-select[name="m"] option {
    color: #fff;
    font-weight: 600;
    background: #21002d;
}

/* Semua tabel data memakai satu fondasi desain. */
:is(
    div.my-3:has(> h1) > table.table-bordered,
    div.row:has(table.table-bordered) table.table-bordered,
    table.table.table-bordered:has(> thead > tr > th:nth-child(3):last-child)
) {
    width: 100% !important;
    margin: 0 !important;
    color: #fff !important;
    background: rgba(0, 0, 0, 0.55) !important;
    border: 1px solid rgba(255, 215, 64, 0.65) !important;
}

:is(
    div.my-3:has(> h1) > table.table-bordered,
    div.row:has(table.table-bordered) table.table-bordered,
    table.table.table-bordered:has(> thead > tr > th:nth-child(3):last-child)
) thead th {
    padding: 12px 13px !important;
    color: var(--hx-bright-gold) !important;
    font-weight: 800;
    vertical-align: middle;
    white-space: nowrap;
    background: linear-gradient(135deg, rgba(76, 0, 102, 0.98), rgba(17, 0, 25, 0.98)) !important;
    border-color: rgba(255, 215, 64, 0.65) !important;
    text-shadow: 0 1px 2px #000;
}

:is(
    div.my-3:has(> h1) > table.table-bordered,
    div.row:has(table.table-bordered) table.table-bordered,
    table.table.table-bordered:has(> thead > tr > th:nth-child(3):last-child)
) tbody td {
    padding: 11px 13px !important;
    color: #fff !important;
    vertical-align: middle;
    background: rgba(8, 0, 12, 0.8) !important;
    border-color: rgba(255, 215, 64, 0.4) !important;
}

:is(
    div.row:has(table.table-bordered) table.table-bordered,
    table.table.table-bordered:has(> thead > tr > th:nth-child(3):last-child)
) :is(th, td) {
    text-align: center;
}

:is(
    div.row:has(table.table-bordered) table.table-bordered,
    table.table.table-bordered:has(> thead > tr > th:nth-child(3):last-child)
) tbody tr:nth-child(even) td {
    background: rgba(54, 0, 72, 0.82) !important;
}

:is(
    div.row:has(table.table-bordered) table.table-bordered,
    table.table.table-bordered:has(> thead > tr > th:nth-child(3):last-child)
) tbody tr:hover td {
    color: #fff3a3 !important;
    background: rgba(111, 0, 148, 0.9) !important;
}

div.my-3:has(> h1) > table.table-bordered a {
    color: var(--hx-bright-gold) !important;
    font-weight: 700;
}

div.my-3:has(> h1) > table.table-bordered a:hover {
    color: #f1a5ff !important;
}

table.table.table-bordered:has(> thead > tr > th:nth-child(3):last-child) {
    margin: 15px 0 !important;
    overflow: hidden;
    border-color: var(--hx-bright-gold) !important;
    border-collapse: separate !important;
    border-spacing: 0;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.55), 0 0 13px rgba(174, 0, 255, 0.35);
}

table.table.table-bordered:has(> thead > tr > th:nth-child(3):last-child) :is(th, td) {
    width: 33.333%;
}

div.row:has(table.table-bordered) p.text-center {
    margin: 14px 0 0 !important;
    padding: 12px 15px;
    color: #fff !important;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.65);
    border: 1px dashed rgba(255, 215, 64, 0.7);
    border-radius: 8px;
    text-shadow: 0 1px 2px #000;
}

/* Modal jadwal. */
.modal-content:has(table.table-bordered) {
    color: #fff !important;
    background: linear-gradient(145deg, rgba(55, 0, 75, 0.98), rgba(5, 0, 10, 0.99)) !important;
    border: 1px solid var(--hx-bright-gold) !important;
    border-radius: 12px !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.75), 0 0 20px rgba(174, 0, 255, 0.45);
}

.modal-content:has(table.table-bordered) .modal-footer {
    border-top: 1px solid rgba(255, 215, 64, 0.5) !important;
}

.modal-content:has(table.table-bordered) .btn-secondary {
    color: #21002c !important;
    font-weight: 800;
    background: linear-gradient(135deg, #fff3a3, #ffd740 45%, #c89100) !important;
    border: 1px solid #fff09a !important;
    border-radius: 7px;
}

/* ================================================================
   RESPONSIVE CONTENT COMPONENTS
================================================================ */

@media (max-width: 767px) {
    #nav-tab {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 7px;
        padding: 8px;
        overflow-x: auto;
        border-radius: 9px;
        scrollbar-width: thin;
        scrollbar-color: var(--hx-bright-gold) rgba(0, 0, 0, 0.45);
        -webkit-overflow-scrolling: touch;
    }

    #nav-tab .nav-link {
        flex: 0 0 auto;
        min-width: max-content;
        padding: 8px 13px;
        font-size: 12px;
    }

    #nav-tab::-webkit-scrollbar {
        height: 4px;
    }

    #nav-tab::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.45);
        border-radius: 10px;
    }

    #nav-tab::-webkit-scrollbar-thumb {
        background: linear-gradient(90deg, #8f18cf, var(--hx-bright-gold));
        border-radius: 10px;
    }
}

@media (max-width: 575.98px) {
    #nav-tabContent,
    div.mb-3:has(> h1:first-child),
    div.my-3:has(> h1):has(> table.table-bordered),
    div.mb-5:has(select.form-select[name="m"]) {
        padding: 15px !important;
        border-radius: 9px;
    }

    div.row:has(table.table-bordered) {
        padding: 14px 10px !important;
        border-radius: 9px;
    }

    #nav-tabContent {
        font-size: 14px;
    }

    #nav-tabContent h3,
    div.mb-3:has(> h1:first-child) > h1,
    div.my-3:has(> h1):has(> table.table-bordered) > h1 {
        font-size: 20px;
    }

    div.mb-3:has(> h1:first-child) {
        font-size: 14px;
        line-height: 1.65;
    }

    .container.mt-3.mb-5 > h1:first-child {
        padding: 14px 15px 8px;
        font-size: 21px;
        border-radius: 9px 9px 0 0;
    }

    #article-content {
        padding: 8px 15px 16px !important;
        border-radius: 0 0 9px 9px;
    }

    #article-content :is(p, li, span) {
        font-size: 14px;
        line-height: 1.65;
    }

    .container.mt-3.mb-5 .row h4.text-white {
        min-height: auto;
        padding: 10px 11px;
        font-size: 15px;
    }

    select.form-select[name="m"] {
        width: 100% !important;
        min-height: 45px;
        font-size: 14px;
    }

    div.my-3:has(> h1) > table.table-bordered {
        display: block;
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        font-size: 12px;
        -webkit-overflow-scrolling: touch;
    }

    div.my-3:has(> h1) > table.table-bordered :is(th, td) {
        min-width: 125px;
        padding: 9px 10px !important;
    }

    div.row:has(table.table-bordered) .col-lg-6:has(table) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    div.row:has(table.table-bordered) table.table-bordered {
        min-width: 480px;
        font-size: 12px;
    }

    table.table.table-bordered:has(> thead > tr > th:nth-child(3):last-child) {
        min-width: 0;
        font-size: 12px;
        border-radius: 8px;
    }

    table.table.table-bordered:has(> thead > tr > th:nth-child(3):last-child) :is(th, td) {
        padding: 9px 5px !important;
        white-space: normal;
        word-break: break-word;
    }
}

/* ================================================================
   UNIVERSAL PAGINATION
================================================================ */

nav:has(> ul.pagination) {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 18px 0;
    padding: 10px;
    overflow-x: auto;
    background: rgba(5, 0, 10, 0.82);
    border: 1px solid rgba(255, 215, 64, 0.7);
    border-radius: 10px;
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.5), 0 0 12px rgba(174, 0, 255, 0.25);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

nav:has(> ul.pagination) > ul.pagination {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 6px;
    margin: 0 !important;
    padding: 0;
}

nav:has(> ul.pagination) .page-link {
    display: grid;
    place-items: center;
    min-width: 40px;
    min-height: 40px;
    padding: 7px 11px;
    color: #fff !important;
    font-size: 14px;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
    background: linear-gradient(145deg, rgba(92, 17, 126, 0.98), rgba(29, 3, 43, 0.98)) !important;
    border: 1px solid rgba(255, 215, 64, 0.55) !important;
    border-radius: 7px !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 3px 8px rgba(0, 0, 0, 0.35) !important;
    text-shadow: 0 1px 2px #000;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

nav:has(> ul.pagination) .page-item:not(.disabled):not(.active) .page-link:hover {
    color: var(--hx-bright-gold) !important;
    background: linear-gradient(145deg, rgba(146, 32, 190, 0.98), rgba(55, 8, 76, 0.98)) !important;
    border-color: var(--hx-bright-gold) !important;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.45), 0 0 10px rgba(255, 215, 64, 0.45) !important;
    transform: translateY(-2px);
}

nav:has(> ul.pagination) .page-item.active .page-link {
    color: #21002c !important;
    font-weight: 900;
    background: linear-gradient(135deg, #fff3a3, #ffd740 40%, #c89100 75%, #ffe978) !important;
    border-color: #fff0a0 !important;
    box-shadow: 0 0 0 1px rgba(78, 0, 104, 0.8), 0 0 13px rgba(255, 215, 64, 0.65) !important;
    text-shadow: none;
}

nav:has(> ul.pagination) .page-item.disabled .page-link {
    color: rgba(255, 255, 255, 0.72) !important;
    background: rgba(18, 2, 27, 0.94) !important;
    border-color: rgba(255, 215, 64, 0.3) !important;
    box-shadow: none !important;
    cursor: default;
}

nav:has(> ul.pagination) .page-item:first-child .page-link {
    min-width: 58px;
    color: #ffe878 !important;
}

/* ================================================================
   HALAMAN PASARAN: JUDUL, PENCARIAN, DAN DROPDOWN
================================================================ */

#maincontent h1.text-center.my-3 {
    width: fit-content;
    margin: 20px auto !important;
    padding: 10px 38px;
    color: var(--hx-bright-gold) !important;
    font-size: clamp(25px, 4vw, 38px);
    font-weight: 900;
    background: var(--hx-overlay);
    border: 1px solid rgba(255, 215, 64, 0.75);
    clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 16px 100%, 0 50%);
    box-shadow: 0 0 18px rgba(174, 0, 255, 0.25);
    text-shadow: 0 2px 3px #000, 0 0 13px rgba(255, 215, 64, 0.5);
}

#maincontent form:has(select[name="sortBy"]) {
    padding: 15px;
    background: var(--hx-overlay);
    border: 1px solid rgba(255, 215, 64, 0.75);
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55), 0 0 14px rgba(174, 0, 255, 0.28);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

#maincontent input.form-control[name="q"],
#maincontent select.form-select[name="sortBy"] {
    min-height: 48px;
    color: #fff !important;
    border: 1px solid rgba(255, 215, 64, 0.75) !important;
    clip-path: none !important;
}

#maincontent input.form-control[name="q"] {
    padding: 10px 16px !important;
    caret-color: var(--hx-bright-gold);
    background: linear-gradient(145deg, rgba(47, 4, 65, 0.96), rgba(10, 0, 16, 0.98)) !important;
    border-right: 0 !important;
    border-radius: 9px 0 0 9px !important;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.45) !important;
}

#maincontent input.form-control[name="q"]::placeholder {
    color: rgba(255, 255, 255, 0.72) !important;
}

#maincontent input.form-control[name="q"]:focus {
    border-color: var(--hx-bright-gold) !important;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.45), 0 0 12px rgba(174, 0, 255, 0.4) !important;
}

#maincontent form:has(select[name="sortBy"]) .input-group:has(input[name="q"]) .btn-primary {
    min-width: 58px;
    min-height: 48px;
    padding: 0 18px !important;
    color: #21002c !important;
    background: linear-gradient(135deg, #fff3a3, #ffd740 42%, #c89100 78%, #ffe978) !important;
    border: 1px solid #fff0a0 !important;
    border-radius: 0 9px 9px 0 !important;
    clip-path: none !important;
    box-shadow: none !important;
}

#maincontent form:has(select[name="sortBy"]) .btn-primary i {
    font-size: 18px;
    filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.45));
}

#maincontent form:has(select[name="sortBy"]) .btn-primary:hover {
    color: #fff !important;
    background: linear-gradient(135deg, #ba37ef, #72169b 55%, #350647) !important;
    border-color: var(--hx-bright-gold) !important;
    transform: none;
}

#maincontent select.form-select[name="sortBy"] {
    width: 100% !important;
    padding: 10px 44px 10px 16px !important;
    font-size: 15px;
    font-weight: 750;
    background-color: rgba(29, 0, 42, 0.98) !important;
    border-radius: 9px !important;
    outline: none !important;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.42), 0 0 10px rgba(174, 0, 255, 0.2) !important;
    cursor: pointer;
}

#maincontent select.form-select[name="sortBy"]:focus {
    border-color: #fff09a !important;
    box-shadow: 0 0 0 3px rgba(174, 0, 255, 0.22), 0 0 14px rgba(255, 215, 64, 0.35) !important;
}

#maincontent select.form-select[name="sortBy"] option {
    color: #fff;
    font-weight: 600;
    background: #21002d;
}

#maincontent div.mb-3:has(> a[href="/panduan-bermain"]) {
    padding: 14px 18px;
    color: #fff !important;
    line-height: 1.65;
    background: rgba(5, 0, 10, 0.82);
    border: 1px solid rgba(255, 215, 64, 0.65);
    border-left: 4px solid var(--hx-bright-gold);
    border-radius: 9px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45), 0 0 10px rgba(174, 0, 255, 0.2);
    text-shadow: 0 1px 2px #000;
}

#maincontent div.mb-3:has(> a[href="/panduan-bermain"]) a {
    color: var(--hx-bright-gold) !important;
    font-weight: 800;
    text-decoration: none;
}

#maincontent div.mb-3:has(> a[href="/panduan-bermain"]) a:hover {
    color: #f2a6ff !important;
    text-decoration: underline;
}

/* ================================================================
   SHARED CARD PASARAN: DAFTAR DAN CAROUSEL DEPAN
================================================================ */

#maincontent .row.g-3:has(.card.border.rounded-4.border-5.border-primary) > [class*="col-"],
#carousel-togel .owl-item {
    display: flex;
    align-items: stretch;
}

#carousel-togel .owl-stage {
    display: flex;
    align-items: stretch;
    padding: 8px 0 13px;
}

#carousel-togel .owl-item {
    padding: 2px;
}

:is(
    #maincontent .card.border.rounded-4.border-5.border-primary,
    #carousel-togel .card.border.rounded-3.border-primary
) {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 140px;
    padding: 2px !important;
    overflow: hidden;
    background: linear-gradient(135deg, #fff3a3, #ffd740 28%, #9c6207 52%, #ffe978 76%, #c89100) !important;
    border: 0 !important;
    border-radius: 0 !important;
    clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 13px, 100% calc(100% - 13px), calc(100% - 13px) 100%, 13px 100%, 0 calc(100% - 13px), 0 13px);
    box-shadow: 0 9px 20px rgba(0, 0, 0, 0.6), 0 0 13px rgba(174, 0, 255, 0.32) !important;
    filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.48));
    transition: transform 0.25s ease, filter 0.25s ease;
}

#carousel-togel .card.border.rounded-3.border-primary {
    width: 200px !important;
}

:is(
    #maincontent .card.border.rounded-4.border-5.border-primary,
    #carousel-togel .card.border.rounded-3.border-primary
)::after {
    content: "";
    position: absolute;
    top: -65px;
    right: -55px;
    z-index: 0;
    width: 150px;
    height: 150px;
    pointer-events: none;
    background: radial-gradient(circle, rgba(226, 95, 255, 0.38), transparent 70%);
}

:is(
    #maincontent .card.border.rounded-4.border-5.border-primary,
    #carousel-togel .card.border.rounded-3.border-primary
) > .card-body {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 136px;
    padding: 0 !important;
    overflow: hidden;
    background: radial-gradient(circle at 50% 0%, rgba(174, 49, 224, 0.3), transparent 60%), linear-gradient(155deg, #4d126c, #270837 50%, #0d0214) !important;
    clip-path: polygon(11px 0, calc(100% - 11px) 0, 100% 11px, 100% calc(100% - 11px), calc(100% - 11px) 100%, 11px 100%, 0 calc(100% - 11px), 0 11px);
}

:is(
    #maincontent .card.border.rounded-4.border-5.border-primary,
    #carousel-togel .card.border.rounded-3.border-primary
) .text-secondary {
    display: flex;
    flex-direction: column;
    min-height: 136px;
    color: #fff !important;
}

:is(
    #maincontent .card.border.rounded-4.border-5.border-primary,
    #carousel-togel .card.border.rounded-3.border-primary
) .text-secondary > div.my-1:first-child {
    display: grid;
    place-items: center;
    min-height: 42px;
    margin: 0 !important;
    padding: 7px 8px 5px;
    color: #ffe878 !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    line-height: 1.2;
    letter-spacing: 0.4px;
    text-shadow: 0 2px 2px #000, 0 0 8px rgba(255, 215, 64, 0.35);
}

/* Baris tanda minus hanya ada pada carousel depan. */
#carousel-togel .card.border.rounded-3.border-primary .text-secondary > div.my-1:nth-child(2) {
    display: none !important;
}

:is(
    #maincontent .card.border.rounded-4.border-5.border-primary h2.bg-white,
    #carousel-togel .card.border.rounded-3.border-primary h1
) {
    display: grid;
    flex: 1;
    place-items: center;
    min-height: 58px;
    margin: 0 !important;
    padding: 0 !important;
    background: radial-gradient(circle, rgba(126, 25, 165, 0.48), transparent 72%), linear-gradient(180deg, rgba(8, 0, 13, 0.94), rgba(31, 2, 45, 0.98)) !important;
    border-top: 1px solid rgba(255, 215, 64, 0.5);
    border-bottom: 1px solid rgba(255, 215, 64, 0.5);
}

:is(
    #maincontent .card.border.rounded-4.border-5.border-primary h2.bg-white > a,
    #carousel-togel .card.border.rounded-3.border-primary h1 > a
) {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 58px;
    padding: 5px !important;
    color: #fff !important;
    font-size: 42px;
    font-weight: 900;
    line-height: 1 !important;
    letter-spacing: 2px;
    text-shadow: 0 3px 3px #000, 0 0 8px rgba(202, 75, 255, 0.65), 0 0 13px rgba(255, 215, 64, 0.25);
}

#maincontent .card.border.rounded-4.border-5.border-primary h2.bg-white > a {
    font-size: clamp(34px, 3.5vw, 46px);
}

:is(
    #maincontent .card.border.rounded-4.border-5.border-primary,
    #carousel-togel .card.border.rounded-3.border-primary
) .text-secondary > div.my-1:last-child {
    display: grid;
    place-items: center;
    min-height: 34px;
    margin: 0 !important;
    padding: 5px 7px;
    background: linear-gradient(90deg, rgba(48, 5, 66, 0.9), rgba(10, 0, 15, 0.92), rgba(48, 5, 66, 0.9));
}

:is(
    #maincontent .card.border.rounded-4.border-5.border-primary,
    #carousel-togel .card.border.rounded-3.border-primary
) .togel-countdown-timer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    padding: 3px 10px;
    color: var(--hx-bright-gold) !important;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.6px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 215, 64, 0.45);
    border-radius: 20px;
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.55);
    text-shadow: 0 1px 2px #000;
}

@media (hover: hover) and (pointer: fine) {
    :is(
        #maincontent .card.border.rounded-4.border-5.border-primary,
        #carousel-togel .card.border.rounded-3.border-primary
    ):hover {
        z-index: 3;
        filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.58)) drop-shadow(0 0 7px rgba(255, 215, 64, 0.55));
        transform: translateY(-5px) scale(1.025);
    }

    :is(
        #maincontent .card.border.rounded-4.border-5.border-primary:hover h2.bg-white > a,
        #carousel-togel .card.border.rounded-3.border-primary:hover h1 > a
    ) {
        color: #fff3a3 !important;
        text-shadow: 0 3px 3px #000, 0 0 10px rgba(255, 215, 64, 0.75), 0 0 16px rgba(174, 0, 255, 0.65);
    }
}

/* ================================================================
   RESPONSIVE: PAGINATION, FORM, DAN CARD PASARAN
================================================================ */

@media (max-width: 575.98px) {
    nav:has(> ul.pagination) {
        justify-content: flex-start;
        padding: 8px;
        border-radius: 8px;
        scrollbar-width: thin;
        scrollbar-color: var(--hx-bright-gold) rgba(0, 0, 0, 0.45);
        -webkit-overflow-scrolling: touch;
    }

    nav:has(> ul.pagination) > ul.pagination {
        justify-content: flex-start;
        gap: 5px;
        min-width: max-content;
    }

    nav:has(> ul.pagination) .page-link {
        min-width: 35px;
        min-height: 36px;
        padding: 6px 9px;
        font-size: 12px;
    }

    nav:has(> ul.pagination) .page-item:first-child .page-link {
        min-width: 50px;
    }

    #maincontent h1.text-center.my-3 {
        padding: 8px 28px;
        font-size: 24px;
    }

    #maincontent form:has(select[name="sortBy"]) {
        padding: 10px;
        border-radius: 9px;
    }

    #maincontent input.form-control[name="q"],
    #maincontent select.form-select[name="sortBy"] {
        min-height: 44px;
        font-size: 14px;
    }

    #maincontent form:has(select[name="sortBy"]) .input-group:has(input[name="q"]) .btn-primary {
        min-width: 52px;
        min-height: 44px;
        padding: 0 14px !important;
    }

    #maincontent div.mb-3:has(> a[href="/panduan-bermain"]) {
        padding: 12px 13px;
        font-size: 14px;
    }

    :is(
        #maincontent .card.border.rounded-4.border-5.border-primary,
        #carousel-togel .card.border.rounded-3.border-primary
    ) {
        min-height: 132px;
    }

    #carousel-togel .card.border.rounded-3.border-primary {
        width: 170px !important;
        min-height: 130px;
    }

    :is(
        #maincontent .card.border.rounded-4.border-5.border-primary,
        #carousel-togel .card.border.rounded-3.border-primary
    ) > .card-body,
    :is(
        #maincontent .card.border.rounded-4.border-5.border-primary,
        #carousel-togel .card.border.rounded-3.border-primary
    ) .text-secondary {
        min-height: 128px;
    }

    #carousel-togel .card.border.rounded-3.border-primary > .card-body,
    #carousel-togel .card.border.rounded-3.border-primary .text-secondary {
        min-height: 126px;
    }

    :is(
        #maincontent .card.border.rounded-4.border-5.border-primary,
        #carousel-togel .card.border.rounded-3.border-primary
    ) .text-secondary > div.my-1:first-child {
        min-height: 40px;
        padding: 6px 5px 4px;
        font-size: 10px !important;
    }

    :is(
        #maincontent .card.border.rounded-4.border-5.border-primary h2.bg-white,
        #maincontent .card.border.rounded-4.border-5.border-primary h2.bg-white > a,
        #carousel-togel .card.border.rounded-3.border-primary h1,
        #carousel-togel .card.border.rounded-3.border-primary h1 > a
    ) {
        min-height: 54px;
    }

    :is(
        #maincontent .card.border.rounded-4.border-5.border-primary h2.bg-white > a,
        #carousel-togel .card.border.rounded-3.border-primary h1 > a
    ) {
        font-size: 31px;
    }

    :is(
        #maincontent .card.border.rounded-4.border-5.border-primary,
        #carousel-togel .card.border.rounded-3.border-primary
    ) .togel-countdown-timer {
        min-width: 70px;
        padding: 3px 7px;
        font-size: 10px;
    }
}