:root {
        --primary-color: #8f1f00;
        --tertiary-color: #dd1e81;
        --dark-color: #000;
        --darkest-color: #bfbfbf;
        --jackpot-light-color: #bfbfbf;
        --jackpot-number-color: #eaffdf;
        --mitragame-bg-color: transparent;
        --text-common-color: #ffffff;
        --navbar-bg-color: #ffffff;
        --text-nav: #0e0e0e;
        --text-common-inverse-color: #0e0e0e;
        --text-highlight-color: #e3ebdd;
        --primary-shadow-color-normal: rgba(216, 145, 39, 0.3);
        --primary-shadow-color-small: rgba(216, 157, 39, 0.19);
        --primary-shadow-color-large: rgba(216, 133, 39, 0.4);
        --primary-shadow-color-medium: rgba(216, 172, 39, 0.25);
        --infobar-linear-gradient-color: linear-gradient(to top, #8d0000, #ff8c45, #8d003b);
        --infobar-linear-gradient-color-alpha: linear-gradient(#9f9a9a, #9f9a9a);
        --infobar-linear-gradient-dark-color-alpha: linear-gradient(0deg, #121800, rgba(34, 43, 18, 0.3));
        --infobar-linear-gradient-semi-dark-color-alpha: linear-gradient(0deg, #121f33, rgba(34, 43, 18, 0.2));
        --bg-dark-color: #c92f00;
        --bg-darker-color: #000000;
        --text-btn-primary-color: #0e0e0e;
        --card-header-primary-text-color: #0e0e0e;
        --bg-promo-btn: #8f1300;
        --text-color-promo-btn: #0e0e0e;
        --bg-info-content: #000;
        --bg-accent-color: #8f1800;
        --bg-secondary-color: #6c757d;
        --bg-success-color: #a73b28;
        --bg-danger-color: #dc3540;
        --bg-warning-color: #8f1800;
        --bg-info-color: #b81717;
        --border-primary: #8f1d00;
        --bg-light-color: #ffbd38
      }
      @font-face {
        font-family: "Advanced Dot Digital-7";
        font-style: normal;
        font-weight: 400;
        src: local("Advanced Dot Digital-7"), url("https://fonts.cdnfonts.com/s/26574/advanced_dot_digital-7.woff")format("woff")
      }
      *,
      :after,
      :before {
        box-sizing: border-box
      }
      html {
        font-family: sans-serif;
        line-height: 1.15;
        text-size-adjust: 100%;
        height: 100%;
        font-size: 0.9rem;
        -webkit-tap-highlight-color: var(--mitragame-bg-color)
      }
      body {
        position: relative;
        min-height: 100%;
        margin: 0;
        font-family: "Exo 2", sans-serif;
        font-size: 1.05rem;
        font-weight: 400;
        line-height: 1.5;
        text-align: left;
        background-color: var(--bg-darker-color);
        color: var(--text-common-color)
      }
      iframe,
      img,
      object,
      svg,
      video {
        vertical-align: middle
      }
      .custom-background {
        background-image: url(https://usahaprediksi-sgp.org/img/background.webp);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed
      }
      img {
        max-width: 100%;
        height: auto
      }
      .size-width {
        width: 900px;
        max-width: 100%
      }
      .ff {
        margin: 0 auto;
        box-shadow: 0 0 10px -1px var(--primary-color);
        background-color: var(--bg-dark-color);
        padding-top: 63px;
        padding-bottom: 90px
      }
      .ff .te {
        width: 900px;
        max-width: 100%;
        margin: 0 auto;
        z-index: 1031
      }
      .te {
        background: linear-gradient(to top, #8d4200, #ff6145, #8d3400);
        box-shadow: 0 0 10px -4px var(--primary-color);
        max-width: 100%;
        margin: 0 auto;
      }
      hr {
        box-sizing: content-box;
        height: 0;
        overflow: visible;
        margin-top: 1rem;
        margin-bottom: 1rem;
        border-width: 0;
        border-style: none;
        border-color: initial;
        border-image: initial;
        border-top: 1px solid rgba(0, 0, 0, 0.1)
      }
      dt {
        margin-bottom: 0.5rem
      }
      dd {
        margin-inline-start: 20px
      }
      h1,
      h2,
      h3,
      h4 {
        margin-top: 0rem;
        margin-bottom: 1rem;
        font-weight: 500;
        line-height: 1.2
      }
      h1 {
        font-size: 1rem
      }
      h4 {
        font-size: 1.2rem
      }
      p,
      ul {
        margin-top: 0;
        margin-bottom: 1rem
      }
      a {
        color: var(--primary-color);
        text-decoration: none
      }
      a:hover {
        color: var(--tertiary-color)
      }
      .text-common {
        color: var(--text-common-color)
      }
      .px-0 {
        padding-left: 0;
        padding-right: 0
      }
      .py-025 {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem
      }
      .px-025 {
        padding-left: 0.25rem;
        padding-right: 0.25rem
      }
      .px-05 {
        padding-left: 0.5rem;
        padding-right: 0.5rem
      }
      .p-025 {
        padding: 0.25rem
      }
      .p-05 {
        padding: 0.5rem
      }
      .p-1 {
        padding: 1rem
      }
      .m-0 {
        margin: 0
      }
      .m-025 {
        margin: 0.25rem
      }
      .m-05 {
        margin: 0.5rem
      }
      .mt-05 {
        margin-top: 0.5rem
      }
      .mx-auto {
        margin-right: auto;
        margin-left: auto
      }
      .mt-05 {
        margin-top: 0.5rem
      }
      .rounded-md {
        border-radius: 0.25rem
      }
      .rounded-lg {
        border-radius: 0.5rem
      }
      .text-center {
        text-align: center
      }
      .items-center {
        align-items: center
      }
      .text-highlight {
        color: var(--text-highlight-color)
      }
      .text-lg {
        font-size: 1.4rem;
        line-height: 2rem
      }
      .w-full {
        width: 100%
      }
      .flex {
        display: flex
      }
      .flex-row {
        flex-direction: row
      }
      .flex-col {
        flex-direction: column
      }
      .justify-center {
        justify-content: center
      }
      nav img {
        max-width: 100%;
        width: 100%
      }
      .y {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        padding: 0.64rem 1rem
      }
      .ec {
        top: 0;
        position: fixed;
        right: 0;
        left: 0;
        z-index: 1030
      }
      .vb {
        display: block
      }
      .bb {
        padding: 0.5rem 0.75rem;
        font-size: 1rem;
        line-height: 1;
        font-weight: 600;
        background-color: var(--primary-color);
        background: linear-gradient(to bottom, #8f1702 0%, #27053d 100%);
        border: 1px solid transparent;
        border-radius: 0.25rem;
        color: #fff;
        border-color: hsla(0, 99%, 44%, 0.1)
      }
      .bb:focus,
      .bb:hover {
        background: var(--tertiary-color)
      }
      .marquee-container {
        margin: 0;
        margin-top: 4px
      }
      .info-area {
        position: relative;
        width: 100%;
        background-image: var(--infobar-linear-gradient-color)
      }
      .info-area:before {
        content: "";
        position: absolute;
        top: 0;
        border-top: 2px solid var(--border-primary);
        border-bottom: 1px solid var(--border-primary);
        left: 0;
        width: calc(100% - 35px);
        height: 100%;
        background-color: var(--bg-info-content);
        transform: skew(-35deg, 0deg);
        transform-origin: bottom left
      }
      .marquee-item {
        display: none
      }
      .info-bar {
        position: relative;
        font-size: 1.1rem;
        color: var(--text-common-color);
        background-image: var(--infobar-linear-gradient-color);
        margin-right: 35px
      }
      .info-bar:after,
      .info-bar:before {
        content: "";
        position: absolute;
        top: 0;
        height: 100%;
        background-image: var(--infobar-linear-gradient-color);
        transform: skew(-35deg, 0deg);
        transform-origin: bottom left
      }
      .info-bar:before {
        left: 0;
        width: 100%
      }
      .info-bar:after {
        right: -15px;
        width: 10px
      }
      .info-bar .info-bar-text {
        position: relative
      }
      .info-text {
        white-space: nowrap;
        overflow: hidden;
        box-sizing: border-box;
        flex: 0 0 calc(100% - 100px);
        max-width: 100%;
        z-index: 1
      }
      .marquee {
        flex: 0 0 auto;
        min-width: 100%;
        z-index: 1;
        display: flex;
        flex-direction: row;
        align-items: center;
        animation: marquee 15s linear infinite
      }
      @keyframes marquee {
        0% {
          transform: translateX(100%)
        }
        100% {
          transform: translateX(-100%)
        }
      }
      .lb {
        position: relative;
        width: 100%;
        overflow: hidden
      }
      .lb:after {
        display: block;
        clear: both;
        content: ""
      }
      .lb img {
        display: block;
        padding: 0.5rem;
        border-radius: 1rem;
        width: 100%
      }
      .l>.m {
        padding-right: 0;
        padding-left: 0
      }
      .m,
      .n,
      .m {
        flex-basis: 0px;
        flex-grow: 1;
        max-width: 100%
      }
      .mb {
        position: relative;
        display: block;
        float: left;
        width: 100%;
        margin-right: -100%;
        backface-visibility: hidden;
        transition: transform 0.6s ease-in-out 0s;
        transition: none 0s ease 0s
      }
      .mb img {
        border: 7px solid transparent
      }
      .s {
        display: block;
        width: 100%
      }
      .buttom {
        display: inline-block;
        font-weight: 400;
        color: var(--text-btn-primary-color);
        text-align: center;
        vertical-align: middle;
        user-select: none;
        padding: 0.45rem 0.75rem;
        font-size: 1.25rem;
        line-height: 1.5;
        border-radius: 0;
        transition: all 0.15s ease-in-out;
        border-width: 0;
        border-style: none;
        position: relative;
        cursor: pointer;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
        box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2),
          inset 0 1px 1px rgba(255, 255, 255, 0.3);
      }
      .masuk {
        color: black;
        background: linear-gradient(#fd838f, #6c2912);
        border-bottom: 4px solid #701b15;
      }
      .daftar {
        color: white;
        background: linear-gradient(to bottom, #ba4801 0%, #ff9c07 100%);
        border-bottom: 4px solid #590142;
      }
      .livechat {
        color: white;
        background: linear-gradient(to bottom, #ba6d01 0%, #ff3907 100%);
        border-bottom: 4px solid #000;
      }
      .masuk:active,
      .daftar:active {
        transform: translateY(4px);
        border-bottom-width: 0;
        box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
      }
      .masuk:active,
      .masuk:focus,
      .masuk:hover,
      .daftar:active,
      .daftar:focus,
      .daftar:hover {
        font-weight: 600;
        color: white;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
      }
      .masuk:hover {
        background: linear-gradient(to bottom, #ffb44a 0%, #e76f3c 100%);
      }
      .daftar:hover {
        background: linear-gradient(to bottom, #ff1a2d 0%, #e6222f 100%);
      }
      .rd {
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        line-height: 1
      }
      .ae:before {
        content: ""
      }
      @font-face {
        font-family: Font Awesome\5 Free;
        font-style: normal;
        font-weight: 400;
        font-display: auto;
        src: url(https://m-g.io/istanacasino.com/38b05dab.eot)format("embedded-opentype"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/webfonts/fa-brands-400.woff2)format("woff2"), url(https://m-g.io/istanacasino.com/82875b3e.woff) format("woff"), url(https://m-g.io/istanacasino.com/2833f486.ttf) format("truetype"), url(https://m-g.io/istanacasino.com/ab32d5ac.svg) format("svg")
      }
      @font-face {
        font-family: Font Awesome\5 Free;
        font-style: normal;
        font-weight: 900;
        font-display: auto;
        src: url(https://m-g.io/istanacasino.com/acee4f1e.eot)format("embedded-opentype"), url(https://m-g.io/istanacasino.com/07bed153.woff2) format("woff2"), url(https://m-g.io/istanacasino.com/0f6fcbf4.woff) format("woff"), url(https://m-g.io/istanacasino.com/b7f728ec.ttf) format("truetype"), url(https://m-g.io/istanacasino.com/c3b7af3b.svg) format("svg")
      }
      .rd {
        font-family: Font Awesome\5 Free
      }
      @font-face {
        font-family: Games Icon;
        font-style: normal;
        font-weight: 900;
        font-display: auto;
        src: url(https://m-g.io/istanacasino.com/f4966828.eot)format("embedded-opentype"), url(https://m-g.io/istanacasino.com/75c41c48.woff) format("woff"), url(https://m-g.io/istanacasino.com/cfac6de2.ttf) format("truetype"), url(https://m-g.io/istanacasino.com/2a0f42b6.svg) format("svg")
      }
      .rd {
        font-weight: 900
      }
      .jacpot {
        background-color: #85222a;
        border: 1px solid var(--border-primary);
        padding: 0.5rem 1rem;
        border-radius: 0.5rem
      }
      .id {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
      }
      .ie {
        background-color: transparent;
        background: linear-gradient(to right, transparent, var(--primary-color) 50%, transparent);
        border-color: var(--tertiary-color)
      }
      .je {
        width: 100%;
        letter-spacing: 5px;
        padding: 16px
      }
      .je>div {
        background-color: var(--text-nav);
        box-shadow: inset 0 0 2px 1px var(--darkest-color);
        font-family: "Advanced Dot Digital-7", sans-serif
      }
      .jp-size {
        color: var(--jackpot-number-color);
        font-size: 2.1rem;
        line-height: 2.5rem;
        letter-spacing: 1px
      }
      .me {
        width: 100%;
        height: 10px;
        padding: 0 3px;
        left: 0
      }
      .me.ne {
        top: 3px
      }
      .me.oe {
        bottom: 3px
      }
      .ke,
      .le {
        background-color: var(--tertiary-color);
        border-radius: 50%
      }
      .ke {
        width: 10px;
        height: 10px;
        animation: a 1s ease 0s infinite normal none running
      }
      .le {
        width: 5px;
        height: 5px;
        animation: a 1s steps(1) 0s infinite normal none running
      }
      @keyframes a {
        50% {
          background-color: var(--text-common-color)
        }
      }
      table {
        width: 100%;
        border-radius: 12px
      }
      td {
        background: var(--darkest-color);
        border-color: #0e0e0e;
        border-radius: 12px;
        padding: 10px
      }
      td:first-child {
        width: 35%
      }
      .pools {
        flex: 0 0 16.66%;
        max-width: 16.66%
      }
      .pools img {
        width: 75px
      }
      .if {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        position: absolute;
        top: 6px;
        right: 6px;
        box-shadow: 0 0 2px 2px var(--bg-success-color);
        background-color: var(--bg-success-color)
      }
      .nav-bottom {
        position: fixed;
        margin: 0 auto;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--infobar-linear-gradient-color);
        z-index: 40;
        border-top-width: 1px;
        border-top-left-radius: 0.5rem;
        border-top-right-radius: 0.5rem
      }
      .nav-bottom>ul {
        list-style-type: none
      }
      .nav-bottom>ul>li {
        flex-basis: 0px;
        flex-grow: 1;
        font-size: 0.75rem;
        line-height: 1rem
      }
      .nav-bottom>ul>li>a {
        color: #fff;
        white-space: nowrap;
        font-size: 0.75rem;
        line-height: 1rem;
        font-weight: 600;
        text-transform: uppercase
      }
      .nav-bottom>ul>li>a:hover {
        color: var(--text-common-color);
        background-color: var(--darkest-color);
        border-color: var(--dark-color);
        border-top-left-radius: 0.375rem;
        border-top-right-radius: 0.375rem
      }
      .blink {
        animation: blink 1.2s linear infinite
      }
      @keyframes blink {
        0% {
          opacity: 0
        }
        50% {
          opacity: 0.8
        }
        100% {
          opacity: 2.5
        }
        50% {
          opacity: 0.8
        }
      }
      .navbar {
        width: 100%;
        margin: auto;
        float: left;
        background: linear-gradient(270deg,
            #dd0055,
            #dd0063,
            #fe834f,
            #ffae00,
            #fe4fb8,
            #dd0025,
            #dd0000);
        background-size: 400% 400%;
        animation: blueShimmer 8s ease infinite;
        box-shadow:
          inset 0 0 0 1px rgba(255, 0, 47, 0.8),
          inset 0 2px 4px rgba(255, 0, 43, 0.5),
          inset 0 -2px 4px rgba(200, 0, 0, 0.6),
          3px 3px 5px rgba(0, 0, 0, 0.3);
        border: 1px solid #721e25;
        position: relative;
        overflow: hidden;
      }
      @keyframes blueShimmer {
        0% {
          background-position: 0% 50%;
        }
        50% {
          background-position: 100% 50%;
        }
        100% {
          background-position: 0% 50%;
        }
      }
      .navbar::before {
        content: "";
        position: absolute;
        top: 0;
        left: -150%;
        width: 50%;
        height: 100%;
        background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, 0.6),
            transparent);
        animation: lightShine 3s infinite;
      }
      @keyframes lightShine {
        0% {
          left: -150%;
        }
        50% {
          left: 150%;
        }
        100% {
          left: 150%;
        }
      }
      .navbar a {
        font-weight: bold;
        margin: auto;
        text-align: center;
        text-decoration: none;
        font-family: 'Roboto Condensed', Sans-serif;
        color: white;
      }
      .navbar a:hover,
      .dropdown:hover .dropbtn {
        cursor: pointer;
        background-color: #ddd;
        color: black;
      }
      .navbar {
        width: 100%;
      }
      .containerheader {
        text-align: center;
        width: 100%;
        margin: auto;
      }
      .containerheader {
        width: 100%;
      }
      .dropdown {
        text-align: center;
        float: left;
        overflow: hidden;
        border: 1px solid #8b0d52;
      }
      .dropdown .dropbtn {
        font-size: 12px;
        font-weight: bold;
        color: rgb(0, 0, 0);
        font-family: 'Roboto Condensed', Sans-serif;
        padding: 12px 16px;
        display: block;
      }
      .navbar a:hover,
      .dropdown:hover .dropbtn {
        cursor: pointer;
        background-color: #ddd;
        color: black;
      }
      .dropdown-content {
        display: none;
        position: absolute;
        width: 60%;
        color: white;
        z-index: 1;
      }
      .dropdown-content a {
        background-color: #2B2B2B;
        color: #fff;
        padding: 12px 16px;
        border: 1px solid #830347;
      }
      .dropdown-content a:hover {
        cursor: pointer;
        background-color: #ddd;
        color: black;
      }
      .dropdown:hover .dropdown-content {
        display: block;
      }
      .dropdown .dropbtn {
        padding: 10px 12px;
      }
      .dropdown {
        width: 100%;
        float: none;
        border-bottom: 1px solid #97000d;
      }
      .dropdown-content {
        position: relative;
        width: 100%;
        left: 0;
        right: 0;
      }
    /* Penyesuaian HTML biasa, tabel dinamis, dan perangkat kecil. */
.responsive{display:block;width:100%;height:auto}
.site-logo{display:block;width:128px;height:41px;object-fit:contain}
.navbar{float:none}.navbar::before{pointer-events:none}
.navbar .dropbtn.active{background:#f76aa5;color:#111}
.prediction-table{border-collapse:collapse;width:100%;background:#fde5ff;color:#172129;table-layout:fixed}
.prediction-table thead th{background:#f76a92;color:#111;text-align:center;font-size:20px;line-height:1.5;padding:14px}
.prediction-table tbody th,.prediction-table td{padding:10px 14px;border:1px solid #dfbcda;text-align:left;overflow-wrap:anywhere}
.prediction-table tbody th{width:35%;font-weight:600}
.prediction-note{white-space:normal;overflow-wrap:anywhere;background:#ffe5ff;color:#172129;padding:16px;margin-top:0}
.schedule-info{font-size:12px;color:#172129;margin:10px 0 16px}
.empty-prediction{padding:24px;background:#ffe5fe;color:#172129;text-align:center}
.article-header{text-align:justify;color:#172129;margin-top:24px}
.article-header p{overflow-wrap:anywhere}
.text-highlight{color:#112d40;font-weight:700}
.floating-chat{position:fixed;bottom:74px;right:5px;z-index:999;text-align:center}
.floating-chat a{display:inline-block}.floating-chat img{height:116px;max-width:150px;display:block;object-fit:contain}
.nav-bottom{left:50%;transform:translateX(-50%)}
@media(max-width:600px){.floating-chat{display:none}.prediction-table tbody th,.prediction-table td{padding:9px;font-size:13px}.nav-bottom>ul>li>a{font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}/* Kartu homepage. Logo diatur dari admin/markets.php. */
.home-main{background:#fbf3fb;color:#481725;padding:30px 24px}.home-intro{margin-bottom:26px}.home-eyebrow{font-size:11px;font-weight:700;letter-spacing:.16em;color:#006b99;margin-bottom:10px}.home-intro h1{font-size:30px;font-weight:700;letter-spacing:-.03em;margin-bottom:12px}.home-intro>p:last-child{font-size:14px;color:#526c7e;max-width:540px}.market-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.market-card{background:#fff;border:1px solid #d4e1ec;border-radius:12px;padding:19px;display:flex;flex-direction:column;align-items:center;color:#18394f;box-shadow:0 4px 14px #004e8d08;transition:transform .15s,border-color .15s;overflow:hidden}.market-card:hover{transform:translateY(-3px);border-color:#1583c0;color:#00528f}.market-card:focus-visible{outline:3px solid #1583c0;outline-offset:3px}.market-card-top{width:100%;display:flex;justify-content:space-between;align-items:center}.market-code{font-size:10px;font-weight:700;letter-spacing:.12em;color:#835873}.market-arrow{color:#00528f;font-size:20px}.market-logo{width:88px;height:88px;margin:18px 0;display:grid;place-items:center}.market-logo img{width:88px;height:88px;object-fit:contain}.logo-placeholder{width:88px;height:88px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(140deg,#ffe1fa,#f6d6ec);border:1px solid #f3c9e4;font-size:23px;letter-spacing:-.02em;font-weight:700;color:#00649c}.market-card h2{font-size:17px;line-height:1.4;font-weight:700;margin:0 0 8px;text-align:center;overflow-wrap:anywhere;max-width:100%}.card-date{font-size:12px;color:#526c7e;text-align:center}.card-status{font-size:10px;border-radius:20px;background:#e9f6ee;color:#752633;padding:4px 9px;margin:13px 0 21px}.card-status.pending{background:#f0f3f7;color:#886781}.card-cta{display:flex;justify-content:space-between;width:100%;padding-top:13px;border-top:1px solid #e5edf4;font-size:12px;font-weight:700;margin-top:auto}@media(max-width:640px){.home-main{padding:24px 14px}.market-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.market-card{padding:12px}.market-card h2{font-size:15px}.market-logo,.market-logo img,.logo-placeholder{width:72px;height:72px}.home-intro h1{font-size:26px}}@media(max-width:340px){.market-grid{grid-template-columns:1fr}}