:root  {

  --container-max: 1200px;

  --radius-sm: 6px;

  --radius-md: 10px;

  --radius-lg: 14px;

  --radius-xl: 18px;

  --radius-pill: 999px;

  --color-body-bg: radial-gradient(circle at top, #1a2d4a 0%, #0b1220 45%, #000 100%);
  --color-text: #ffffff;
  --color-text-soft: #e8f3ff;
  --color-article-text: #dbeaff;

  /* === PRIMARY BLUE SYSTEM === */
  --color-primary: #0b3a6e;              /* biru tua */
  --color-primary-alt: #39b8ff;          /* biru muda cerah */
  --color-primary-soft: #a9deff;

  --color-primary-grad: linear-gradient(
    135deg,
    var(--color-primary),
    var(--color-primary-alt)
  );

  --color-primary-grad-horizontal: linear-gradient(
    90deg,
    #072a52,
    #39b8ff
  );

  --color-accent-grad: linear-gradient(
    135deg,
    #39b8ff,
    #072a52
  );

  /* === BORDER & SURFACE === */
  --color-border-soft: rgba(57, 184, 255, 0.18);
  --color-border-strong: #39b8ff;

  --color-surface-dark: rgba(0, 0, 0, 0.92);
  --color-surface-soft: radial-gradient(
    circle at top,
    rgba(57, 184, 255, 0.07),
    rgba(0, 0, 0, 0.92)
  );

  --color-surface-card: radial-gradient(
    circle at top,
    #072a52,
    #0b3a6e
  );

  /* === DARK BACKGROUND LAYERS === */
  --color-bg-dark-1: #060a12;
  --color-bg-dark-2: #0b1322;
  --color-bg-dark-2-hover: #111f36;

  /* === EFFECT & DECORATION === */
  --color-flame-grad: linear-gradient(
    135deg,
    #7bd7ff,
    #1a66ff
  );

  --color-divider-red: linear-gradient(
    90deg,
    #39b8ff,
    #0b3a6e
  );

  /* === SCROLLBAR === */
  --color-scrollbar-track: #07111d;
  --color-scrollbar-thumb: linear-gradient(
    90deg,
    #39b8ff,
    #0b3a6e
  );
  --color-scrollbar-shadow: linear-gradient(
    90deg,
    #7bd7ff,
    #1a66ff
  );

  /* === BADGE SYSTEM === */
  --badge-viral-bg: #7bd7ff;
  --badge-viral-text: #05213a;

  --badge-new-bg: #1a66ff;
  --badge-new-text: #ffffff;

  --badge-provider-bg: #39b8ff;
  --badge-provider-text: #05213a;

  --badge-ft-bg: #0b3a6e;
  --badge-ft-text: #e6f4ff;

  /* === SHADOW & GLOW === */
  --shadow-soft: 0 0 12px rgba(0, 0, 0, 0.75);
  --shadow-strong: 0 0 20px rgba(57, 184, 255, 0.35);
  --shadow-thumb: 0 0 12px rgba(0, 0, 0, 0.95);
  --shadow-hero: 0 0 18px rgba(0, 0, 0, 0.75);

  --shadow-btn-primary: 0 0 14px rgba(57, 184, 255, 0.60);
  --shadow-btn-cta: 0 0 12px rgba(57, 184, 255, 0.70);
  --shadow-btn-play: 0 0 14px rgba(57, 184, 255, 0.80);
  --shadow-step-number: 0 0 10px rgba(123, 215, 255, 0.80);

  /* === HEADER & SECTION === */
  --color-header-bg: rgba(0, 0, 0, 0.35);

  --section-bg-game-grad: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(7, 42, 82, 0.55) 40%,
    rgba(0, 0, 0, 0.95) 100%
  );

  --hero-content-bg: rgba(0, 0, 0, 0.60);
  --cta-bg: radial-gradient(
    circle at top,
    rgba(57, 184, 255, 0.09),
    rgba(0, 0, 0, 0.92)
  );

  /* === HERO & SEO === */
  --section-bg-game-image: url("https://pixel.gambar-lp.com/leoslot88/background-leoslot88-new.webp");

  --hero-overlay-grad: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(0, 0, 0, 0.75) 35%,
    rgba(57, 184, 255, 0.18) 65%,
    rgba(0, 0, 0, 0) 100%
  );

  --seo-link: #7bd7ff;
  --seo-link-border: rgba(123, 215, 255, 0.45);

  --footer-link: #bfe9ff;

  --font-family-sans: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --font-size-xs: 12px;

  --font-size-sm: 13px;

  --font-size-md: 14px;

  --font-size-lg: 18px;

  --font-size-xl: 22px;

  --font-size-2xl: 32px
  }

*  {

  box-sizing: border-box;

  margin: 0;

  padding: 0
  }

body  {

  font-family: var(--font-family-sans);

  background: var(--color-body-bg);

  color: var(--color-text);

  min-height: 100vh
  }

a  {

  color: inherit;

  text-decoration: none
  }

button  {

  font: inherit
  }

img  {

  max-width: 100%;

  display: block;

  }

.main-header  {

  width: 100%;

  padding: 5px 0;

  background: var(--color-header-bg);

  backdrop-filter: blur(6px);

  border-bottom: 1px solid var(--color-border-soft)
  }

.header-inner  {

  max-width: var(--container-max);

  margin: 0 auto;

  padding: 0 20px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  position: relative
  }

.header-logo img  {

  display: block
  }

.hamburger-btn  {

  font-size: 28px;

  background: 0 0;

  border: none;

  color: var(--color-text);

  cursor: pointer;

  padding: 6px 10px;

  border-radius: var(--radius-md)
  }

.hamburger-btn:hover  {

  background: rgba(255, 255, 255, .12)
  }

.header-quick-links  {

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  display: flex;

  gap: 20px;

  font-size: 16px
  }

.header-quick-links a  {

  color: rgba(255, 255, 255, .82);

  position: relative;

  padding-bottom: 2px
  }

.header-quick-links a::after  {

  content: "";

  position: absolute;

  left: 0;

  bottom: 0;

  width: 0;

  height: 2px;

  border-radius: var(--radius-pill);

  background: var(--color-primary-grad-horizontal);

  transition: width .18s ease-out
  }

.header-quick-links a:hover::after  {

  width: 100%
  }

.header-quick-links a:hover  {

  color: var(--color-text)
  }

.menu-list  {

  display: flex;

  flex-direction: column;

  gap: 14px
  }

.menu-item  {

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 12px 14px;

  background: var(--color-bg-dark-2);

  border-radius: var(--radius-md);

  color: var(--color-text);

  font-size: 15px;

  font-weight: 500;

  transition: background .15s
  }

.menu-item:hover  {

  background: var(--color-bg-dark-2-hover)
  }

.menu-item .menu-icon  {

  display: block;

  flex-shrink: 0;

  margin-right: 4px;

  border-radius: var(--radius-sm)
  }

.hero-banner  {

  position: relative;

  width: 100%;

  max-width: none;

  margin: 0;

  border-radius: 0;

  overflow: hidden;

  box-shadow: none
  }

.hero-img img  {

  width: 100%;

  height: auto;

  display: block;

  object-fit: cover;

  object-position: center top
  }

.hero-overlay  {

  position: absolute;

  inset: 0;

  background: var(--hero-overlay-grad)
  }

.hero-content  {

  position: absolute;

  top: 50%;

  left: 40px;

  transform: translateY(-50%);

  color: var(--color-text);

  max-width: 380px;

  padding: 16px 18px;

  border-radius: 16px;

  background: var(--hero-content-bg);

  backdrop-filter: blur(4px);

  box-shadow: var(--shadow-hero)
  }

.hero-title  {

  font-size: var(--font-size-2xl);

  font-weight: 700;

  margin-bottom: 6px;

  text-shadow: 0 2px 6px rgba(0, 0, 0, .8)
  }

.hero-subtitle  {

  font-size: 16px;

  opacity: .95;

  margin-bottom: 14px;

  text-shadow: 0 1px 4px rgba(0, 0, 0, .8)
  }

.hero-btn  {

  display: inline-block;

  padding: 10px 22px;

  border-radius: var(--radius-md);

  background: var(--color-primary-grad);

  color: var(--color-text);

  font-weight: 600;

  box-shadow: var(--shadow-btn-primary)
  }

.cta-auth  {

  padding: 14px 18px;

  background: var(--cta-bg);

  border: 1px solid var(--color-border-soft);

  box-shadow: var(--shadow-soft);

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 18px
  }

.cta-inner  {

  max-width: var(--container-max);

  margin: 0 auto;

  padding: 0 20px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 18px
  }

.cta-text  {

  flex: 1 1 auto
  }

.cta-title  {

  font-size: var(--font-size-lg);

  font-weight: 600;

  margin-bottom: 4px
  }

.cta-subtitle  {

  font-size: var(--font-size-sm);

  opacity: .9
  }

.cta-actions  {

  display: flex;

  align-items: center;

  gap: 7px
  }

.btn-cta  {

  display: inline-block;

  padding: 5px 18px;

  font-size: 14px;

  font-weight: 600;

  border-radius: var(--radius-md);

  border: 1px solid transparent;

  cursor: pointer;

  white-space: nowrap
  }

.btn-cta-login  {

  background: 0 0;

  border-color: var(--color-primary-alt);

  color: var(--color-primary-soft)
  }

.btn-cta-daftar  {

  background: var(--color-primary-grad);

  color: var(--color-text);

  box-shadow: var(--shadow-btn-cta)
  }

.section-bg-game  {

  position: relative;

  padding: 3px 0;

  background: var(--section-bg-game-grad), var(--section-bg-game-image) center/cover no-repeat
  }

.page-wrapper  {

  max-width: var(--container-max);

  margin: 0 auto;

  padding: 20px 20px 40px
  }

.game-block  {

  background: radial-gradient(circle at top, rgba(255, 255, 255, .05), rgba(0, 0, 0, .85));

  border: 2px solid var(--color-border-strong);

  border-radius: var(--radius-md);

  padding: 10px 18px 22px;

  box-shadow: var(--shadow-strong);

  margin-bottom: 1px
  }

.top-head  {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 10px
  }

.left-head  {

  display: flex;

  align-items: center;

  gap: 12px;

  flex: 1 1 auto
  }

.flame-icon  {

  width: 45px;

  height: 25px;

  border-radius: 5px;

  background: var(--color-flame-grad);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  font-size: 16px
  }

.section-title  {

  font-size: 15px;

  font-weight: 600;

  white-space: nowrap
  }

.red-divider  {

  flex: 1 1 auto;

  height: 2px;

  background: var(--color-divider-red);

  margin-left: 10px;

  border-radius: var(--radius-pill)
  }

.btn-more  {

  padding: 10px 22px;

  border-radius: var(--radius-md);

  border: none;

  background: var(--color-accent-grad);

  color: var(--color-text);

  font-size: 14px;

  font-weight: 600;

  box-shadow: var(--shadow-btn-cta);

  white-space: nowrap
  }

.btn-more:hover  {

  opacity: .95
  }

.game-section  {

  margin: 10px 0 14px;

  }

.games-viewport  {

  overflow-x: auto;

  overflow-y: visible;

  scroll-snap-type: x mandatory;

  padding: 2px 14px 14px 2px;

  scroll-padding-left: 14px;

  -webkit-overflow-scrolling: touch;

  box-sizing: border-box;

  }

.game-card.is-active {

  outline: none !important;

  box-shadow: 0 0 0 2px #006eff;

  border-color: #0013c0;

}

.games-grid  {

  display: grid;

  grid-auto-flow: column;

  grid-auto-columns: 128px;

  justify-content: center;

  padding-top: 10px;

  grid-template-rows: 1fr;

  gap: 7px 5px
  }

.game-card  {

  background: radial-gradient(circle at top, rgba(255, 255, 255, .05), rgba(0, 0, 0, .55));

  border: 1px solid rgba(255, 255, 255, .12);

  border-radius: var(--radius-md);

  padding: 6px;

  display: flex;

  flex-direction: column;

  align-items: center;

  position: relative;

  width: 128px;

  scroll-snap-align: start;

  cursor: pointer
  }

.game-thumb  {

  position: relative;

  width: 116px;

  aspect-ratio: 1 / 1;

  height: auto;

  border-radius: var(--radius-md);

  overflow: hidden;

  box-shadow: var(--shadow-thumb)
  }

.game-thumb img  {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center
  }

.badge  {

  position: absolute;

  top: 6px;

  left: 6px;

  background: var(--color-primary-alt);

  padding: 2px 8px;

  font-size: 9px;

  text-transform: uppercase;

  border-radius: var(--radius-pill);

  font-weight: 700;

  letter-spacing: .3px
  }

.badge-provider  {

  background: var(--badge-provider-bg);

  color: var(--badge-provider-text)
  }

.games-viewport::-webkit-scrollbar  {

  height: 6px
  }

.games-viewport::-webkit-scrollbar-track  {

  background: var(--color-scrollbar-track);

  border-radius: var(--radius-pill)
  }

.games-viewport::-webkit-scrollbar-thumb  {

  background: var(--color-scrollbar-thumb);

  border-radius: var(--radius-pill)
  }

.play-overlay  {

  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  background: rgba(0, 0, 0, .55);

  opacity: 0;

  pointer-events: none;

  transition: opacity .2s ease
  }

.play-button  {

  display: inline-block;

  padding: 6px 10px;

  border-radius: 7px;

  background: var(--color-primary-grad);

  color: var(--color-text);

  font-size: 13px;

  font-weight: 600;

  text-transform: uppercase;

  text-decoration: none;

  box-shadow: var(--shadow-btn-play)
  }

.game-card:hover .play-overlay,
.game-card:focus-within .play-overlay  {

  opacity: 1;

  pointer-events: auto;

  }

.rtp  {

  width: 100%;

  margin-top: 6px;

  border-radius: 8px;

  overflow: hidden;

  background: rgba(0, 0, 0, .35);

  border: 1px solid rgba(255, 255, 255, .10);

  position: relative;

  }

.rtp-wrap  {

  width: 100%;

  max-width: 160px;

  margin: 0 auto;

  }

.rtp .rtp-text  {

  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 12px;

  font-weight: 800;

  letter-spacing: .2px;

  text-shadow: 0 1px 3px rgba(0, 0, 0, .85);

  color: #fff;

  z-index: 2;

  }

.rtp .rtp-fill  {

  height: 22px;

  width: 0;

  transition: width .35s ease;

  border-radius: 8px;

  position: relative;

  z-index: 1;

  }

.rtp .rtp-fill.low  {

  background: linear-gradient(90deg, #ff3b3b, #b80f0f);

  }

.rtp .rtp-fill.mid  {

  background: linear-gradient(90deg, #ffcc4a, #ff8a00);

  }

.rtp .rtp-fill.high  {

  background: linear-gradient(90deg, #2ee37a, #0fb85b);

  }

/* Sidebar (non-AMP) */
.menu-sidebar  {

  position: fixed;

  top: 0;

  left: -280px;

  height: 100vh;

  width: 260px;

  background: var(--color-bg-dark-1);

  padding: 20px 14px;

  overflow: auto;

  box-shadow: 4px 0 12px rgba(0, 0, 0, .4);

  transition: left .2s ease;

  z-index: 10000;

  }

.menu-sidebar.is-open  {

  left: 0;

  }

.menu-backdrop  {

  position: fixed;

  inset: 0;

  background: rgba(0, 0, 0, .55);

  backdrop-filter: blur(2px);

  display: none;

  z-index: 9999;

  }

.menu-backdrop.is-open  {

  display: block;

  }

.games-grid-lainnya  {

  display: grid;

  grid-template-columns: repeat(6, minmax(0, 1fr));

  gap: 10px;

  align-items: stretch;

  }

@media (max-width: 1024px)  {

  .games-grid-lainnya  {

    grid-template-columns: repeat(4, minmax(0, 1fr));

      }

  }

@media (max-width: 820px)  {

  .games-grid-lainnya  {

    grid-template-columns: repeat(3, minmax(0, 1fr));

      }

  }

.game-card-lainnya  {

  background: radial-gradient(circle at top, rgba(255, 255, 255, .05), rgba(0, 0, 0, .55));

  border: 1px solid rgba(255, 255, 255, .12);

  border-radius: var(--radius-md);

  padding: 8px;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 6px;

  position: relative;

  }

.game-thumb-lainnya  {

  width: 100%;

  aspect-ratio: 1 / 1;

  border-radius: var(--radius-md);

  overflow: hidden;

  box-shadow: var(--shadow-thumb);

  position: relative;

  }

.game-thumb-lainnya img  {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

  }

.play-overlay-lainnya  {

  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  background: rgba(0, 0, 0, .55);

  opacity: 0;

  pointer-events: none;

  transition: opacity .2s ease;

  }

.play-button-lainnya  {

  display: inline-block;

  padding: 6px 10px;

  border-radius: 7px;

  background: var(--color-primary-grad);

  color: var(--color-text);

  font-size: 13px;

  font-weight: 600;

  text-transform: uppercase;

  text-decoration: none;

  box-shadow: var(--shadow-btn-play);

  }

.game-card-lainnya:hover .play-overlay-lainnya,
.game-card-lainnya:focus-within .play-overlay-lainnya  {

  opacity: 1;

  pointer-events: auto;

  }

.game-title-lainnya  {

  font-size: 12px;

  text-align: center;

  color: var(--color-text-soft);

  line-height: 1.3;

  width: 100%;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  }

.bottom-menu  {

  padding: 0
  }

.bottom-menu .bottom-item  {

  flex: 1;

  text-align: center;

  display: flex;

  flex-direction: column;

  gap: 4px;

  color: var(--color-text);

  font-size: 11px
  }

.bottom-menu .bottom-item .icon  {

  display: block;

  margin: 0 auto
  }

.only-mobile  {

  display: none
  }

@media (max-width:768px)  {

  .only-mobile  {

    display: block
      }

  body  {

    padding-bottom: 56px
      }

  .main-header  {

    padding: 1px 0
      }

  .header-inner  {

    padding: 0 10px
      }

  .hero-content,
  .hero-overlay  {

    display: none
      }

  .cta-actions  {

    flex-direction: column
      }

  .cta-subtitle  {

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden
      }

  .cta-inner  {

    padding: 0
      }

  .btn-cta  {

    width: 100%;

    text-align: center
      }

  .page-wrapper  {

    max-width: 100%;

    padding: 12px 10px 10px
      }

  .red-divider  {

    display: none
      }

  .btn-more  {

    display: none
      }

  .game-block  {

    background: 0 0;

    border: none;

    border-radius: 0;

    padding: 0;

    box-shadow: none;

    margin-bottom: 22px
      }

  .header-quick-links  {

    display: none
      }


  .game-card  {

    width: 112px;

    padding: 5px
      }

  .game-thumb  {

    width: 102px;

    aspect-ratio: 1 / 1;

    height: auto
      }

  .games-grid  {

    grid-auto-flow: column;

    grid-auto-columns: 112px;

    grid-template-rows: auto;

    grid-auto-rows: auto;

    justify-content: start;

    gap: 7px 4px;

    padding-top: 5px
      }

  .games-grid-lainnya  {

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 6px;

      }

  .game-card-lainnya  {

    padding: 6px;

      }

  .game-title-lainnya  {

    font-size: 11px;

      }

  .bottom-menu  {

    position: fixed;

    bottom: 0;

    left: 0;

    right: 0;

    display: flex;

    justify-content: space-around;

    align-items: center;

    padding: 0;

    background: rgba(0, 0, 0, .55);

    backdrop-filter: blur(6px);

    border-top: 1px solid rgba(255, 255, 255, .08);

    z-index: 9999
      }

  .bottom-menu a  {

    flex: 1;

    text-align: center;

    color: var(--footer-link);

    font-size: 12px;

    text-decoration: none;

    padding: 6px 0;

    transition: .2s ease;

    border-radius: 6px
      }

  }

.main-footer  {

  padding: 20px 20px 26px;

  border-top: 1px solid var(--color-border-soft);

  background: radial-gradient(circle at top, rgba(255, 255, 255, .02), #000)
  }

.footer-inner  {

  max-width: var(--container-max);

  margin: 0 auto;

  padding: 0 20px;

  font-size: 12px;

  opacity: .85;

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  gap: 8px
  }

.footer-links  {

  display: flex;

  gap: 12px 18px;

  flex-wrap: wrap;

  justify-content: center
  }

.footer-links a  {

  color: var(--color-primary-soft);

  font-size: 12px;

  text-decoration: none
  }

.footer-links a:hover  {

  text-decoration: underline
  }