/* =============================================================================
   WINNING303 — stylesheet
   -----------------------------------------------------------------------------
   Self-hosted. No external stylesheet, no webfont request, no third-party CSS.
   Replaces the 5 Mothercare bundles + 15 inline <style> blocks of the old page.

   Class names from the old markup (.rb-premium-*, .bt-*, .popup-*, .sendiri,
   .WINNING303-TOTO-SLOT) are kept on purpose so existing content blocks can be
   pasted in unchanged.

   Sections
     1. Tokens
     2. Base
     3. Layout
     4. Topbar
     5. Header + navigation
     6. Hero
     7. Info table          (.rb-premium-*)
     8. SEO section         (.bt-*)
     9. Footer
    10. Bottom nav
    11. Popup
    12. Back to top
    13. Motion + print
   ============================================================================= */


/* =============================================================================
   1. TOKENS
   One gold scale and one red scale. The old page carried six golds and five
   reds used at random, which is what made it read as five brands at once.
   ============================================================================= */

:root {
  /* Surfaces */
  --w3-bg:            #08080b;
  --w3-bg-2:          #0d0d12;
  --w3-surface:       rgba(255, 255, 255, .035);
  --w3-surface-2:     rgba(255, 255, 255, .065);
  --w3-line:          rgba(255, 255, 255, .10);
  --w3-line-gold:     rgba(255, 225, 77, .26);

  /* Text */
  --w3-text:          #f3f3f6;
  --w3-text-2:        #c9c9d2;
  --w3-muted:         #9a9aa6;
  --w3-on-gold:       #1a1200;

  /* Brand */
  --w3-gold:          #ffe14d;
  --w3-gold-2:        #c99b1d;
  --w3-gold-3:        #4a2c00;
  --w3-red:           #e11d2e;
  --w3-red-2:         #7d0a14;

  --w3-grad:          linear-gradient(135deg, #3d0000 0%, #c99b1d 52%, #ffe81d 100%);
  --w3-grad-red:      linear-gradient(135deg, #7d0a14, #e11d2e);

  /* Radii */
  --w3-r-sm:          12px;
  --w3-r:             18px;
  --w3-r-lg:          26px;
  --w3-r-pill:        999px;

  /* Elevation + focus */
  --w3-shadow:        0 18px 44px rgba(0, 0, 0, .55);
  --w3-shadow-gold:   0 10px 30px rgba(201, 155, 29, .22);
  --w3-ring:          0 0 0 3px rgba(255, 225, 77, .5);

  /* Type — system stack. The old page asked for Playfair Display and
     Montserrat without ever loading either, so it silently fell back to a
     mismatched serif. A system stack costs zero requests and zero CLS. */
  --w3-font:          ui-sans-serif, system-ui, -apple-system, "Segoe UI",
                      Roboto, "Helvetica Neue", Arial, sans-serif;
  --w3-measure:       72ch;

  /* Layout */
  --w3-max:           1240px;
  --w3-gutter:        clamp(14px, 4vw, 28px);
  --w3-nav-h:         78px;
  --w3-header-h:      72px;

  /* Stacking */
  --w3-z-header:      80;
  --w3-z-nav:         90;
  --w3-z-drawer:      120;
  --w3-z-popup:       9999;
}


/* =============================================================================
   2. BASE
   ============================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--w3-gold-2) var(--w3-bg);
}

body {
  margin: 0;
  /* Clears the fixed bottom nav, including the iPhone home indicator. */
  padding-bottom: calc(var(--w3-nav-h) + env(safe-area-inset-bottom, 0px));
  background: var(--w3-bg);
  color: var(--w3-text);
  font-family: var(--w3-font);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

img,
svg,
video { max-width: 100%; height: auto; display: block; }

a { color: var(--w3-gold); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font: inherit; color: inherit; }

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.25; text-wrap: balance; }

p { margin: 0 0 1em; }

:focus-visible {
  outline: none;
  box-shadow: var(--w3-ring);
  border-radius: var(--w3-r-sm);
}

.w3-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.w3-skip {
  position: absolute;
  top: -60px; left: 12px;
  z-index: 200;
  padding: 12px 18px;
  border-radius: var(--w3-r-sm);
  background: var(--w3-gold);
  color: var(--w3-on-gold);
  font-weight: 700;
  transition: top .2s ease;
}
.w3-skip:focus { top: 12px; }


/* =============================================================================
   3. LAYOUT
   ============================================================================= */

.w3-container {
  width: 100%;
  max-width: var(--w3-max);
  margin-inline: auto;
  padding-inline: var(--w3-gutter);
}

.w3-section { padding-block: clamp(36px, 6vw, 64px); }


/* =============================================================================
   4. TOPBAR
   ============================================================================= */

.w3-topbar {
  background: var(--w3-grad);
  color: var(--w3-on-gold);
  font-size: 12.5px;
  font-weight: 600;
}

.w3-topbar .w3-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
  padding-block: 6px;
}

.w3-topbar-list {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 22px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.w3-topbar a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  color: var(--w3-on-gold);
  text-decoration: none;
  white-space: nowrap;
}
.w3-topbar a:hover { text-decoration: underline; }
.w3-topbar svg { width: 16px; height: 16px; flex: 0 0 auto; }

.w3-lang {
  display: inline-flex;
  padding: 2px;
  border-radius: var(--w3-r-pill);
  background: rgba(0, 0, 0, .22);
}

.w3-lang a {
  min-height: 24px;
  padding: 2px 11px;
  border-radius: var(--w3-r-pill);
  font-size: 11px;
  letter-spacing: .06em;
}
.w3-lang a[aria-current="true"] { background: rgba(0, 0, 0, .78); color: var(--w3-gold); }

@media (max-width: 760px) {
  .w3-topbar-list.is-secondary { display: none; }
  .w3-topbar .w3-container { justify-content: center; }
}


/* =============================================================================
   5. HEADER + NAVIGATION
   ============================================================================= */

.w3-header {
  position: sticky;
  top: 0;
  z-index: var(--w3-z-header);
  background: rgba(8, 8, 11, .86);
  border-bottom: 1px solid var(--w3-line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: box-shadow .3s ease, background .3s ease;
}

.w3-header.is-stuck {
  background: rgba(8, 8, 11, .97);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .6);
}

.w3-header .w3-container {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 20px);
  min-height: var(--w3-header-h);
}

.w3-logo { flex: 0 0 auto; }
.w3-logo img { width: auto; height: 34px; }

/* --- desktop nav --- */

.w3-nav { margin-left: auto; min-width: 0; }

.w3-nav-list {
  display: flex;
  align-items: center;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.w3-nav-list a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 9px;
  border-radius: var(--w3-r-sm);
  color: var(--w3-text-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  transition: color .2s ease, background .2s ease;
}

.w3-nav-list a:hover,
.w3-nav-list a:focus-visible { color: var(--w3-gold); background: var(--w3-surface); }

.w3-nav-list a.is-cta {
  background: var(--w3-grad-red);
  color: #fff;
  box-shadow: 0 6px 18px rgba(225, 29, 46, .32);
}
.w3-nav-list a.is-cta:hover { color: #fff; filter: brightness(1.12); }

/* Duplicate of the header's Daftar button — drawer only. */
.w3-nav-cta { display: none; }

/* --- header actions --- */

.w3-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.w3-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border: 1px solid var(--w3-line);
  border-radius: var(--w3-r-sm);
  background: var(--w3-surface);
  color: var(--w3-text-2);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.w3-icon-btn:hover { color: var(--w3-gold); border-color: var(--w3-line-gold); }
.w3-icon-btn svg { width: 20px; height: 20px; }

.w3-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--w3-r-pill);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.w3-btn:hover { text-decoration: none; transform: translateY(-2px); }

.w3-btn-primary {
  background: var(--w3-grad);
  color: var(--w3-on-gold);
  box-shadow: var(--w3-shadow-gold);
}
.w3-btn-primary:hover { color: var(--w3-on-gold); box-shadow: 0 14px 30px rgba(201, 155, 29, .38); }

.w3-btn-ghost {
  border: 1px solid var(--w3-line-gold);
  background: transparent;
  color: var(--w3-gold);
}
.w3-btn-ghost:hover { background: rgba(255, 225, 77, .1); color: var(--w3-gold); }

.w3-btn-lg { min-height: 54px; padding: 0 28px; font-size: 14px; }
.w3-btn-block { width: 100%; }

/* --- search row ---
   An inline field in the header cannot fit next to seven nav items plus two
   buttons at the 1240px container cap, so search lives in its own row. */

.w3-searchbar {
  border-top: 1px solid var(--w3-line);
  background: rgba(8, 8, 11, .97);
}
.w3-searchbar[hidden] { display: none; }

.w3-searchbar-form {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-block: 12px;
}

.w3-searchbar-form > svg {
  position: absolute;
  top: 50%; left: 16px;
  width: 17px; height: 17px;
  transform: translateY(-50%);
  color: var(--w3-muted);
  pointer-events: none;
}

.w3-searchbar-form input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 0 16px 0 42px;
  border: 1px solid var(--w3-line);
  border-radius: var(--w3-r-pill);
  background: var(--w3-surface);
  color: var(--w3-text);
  font-size: 14px;
}
.w3-searchbar-form input::placeholder { color: var(--w3-muted); }
.w3-searchbar-form input:focus { border-color: var(--w3-line-gold); outline: none; box-shadow: var(--w3-ring); }
.w3-searchbar-form .w3-btn { flex: 0 0 auto; }

@media (max-width: 520px) {
  .w3-searchbar-form .w3-btn { display: none; }
}

/* --- mobile drawer --- */

.w3-burger { display: none; }

.w3-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--w3-z-drawer) - 1);
  background: rgba(0, 0, 0, .66);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s;
}
.w3-drawer-backdrop.is-open { opacity: 1; visibility: visible; }

@media (max-width: 1080px) {
  .w3-burger { display: inline-flex; order: -1; }

  .w3-nav {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: var(--w3-z-drawer);
    width: min(320px, 86vw);
    margin: 0;
    padding: 22px 18px calc(28px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--w3-bg-2);
    border-right: 1px solid var(--w3-line-gold);
    transform: translateX(-100%);
    transition: transform .32s cubic-bezier(.2, .8, .2, 1);
  }
  .w3-nav.is-open { transform: none; }

  .w3-nav-list { flex-direction: column; align-items: stretch; gap: 4px; }

  .w3-nav-list a {
    min-height: 50px;
    padding: 0 14px;
    border-radius: var(--w3-r-sm);
    font-size: 13px;
  }

  .w3-nav-cta { display: block; }
  .w3-nav-list a.is-cta { margin-top: 10px; justify-content: center; }
}

@media (max-width: 560px) {
  /* "Masuk" collapses to its icon; "Daftar" keeps its label — it is the
     primary action and an unlabelled gold pill reads as a broken image. */
  .w3-header-actions .w3-btn-ghost span { display: none; }
  .w3-header-actions .w3-btn-ghost { padding: 0 13px; }
  .w3-header-actions .w3-btn-primary { padding: 0 16px; font-size: 12px; }
  .w3-logo img { height: 26px; }
  .w3-header .w3-container { gap: 8px; }
}

@media (max-width: 400px) {
  /* "Masuk" also lives in the bottom nav and the popup, so at this width the
     header keeps only burger + logo + the primary action. */
  .w3-header-actions .w3-btn-ghost { display: none; }
  .w3-logo img { height: 22px; max-width: 110px; object-fit: contain; }
  .w3-header-actions .w3-btn-primary { padding: 0 14px; font-size: 11.5px; }
  .w3-icon-btn { width: 38px; height: 38px; }
}


/* =============================================================================
   6. HERO
   ============================================================================= */

.w3-hero {
  padding-block: clamp(26px, 5vw, 48px);
  background:
    radial-gradient(70% 60% at 10% 0%, rgba(201, 155, 29, .12), transparent 60%),
    radial-gradient(70% 60% at 95% 40%, rgba(225, 29, 46, .10), transparent 60%);
}

.w3-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(22px, 4vw, 46px);
  align-items: start;
}

@media (max-width: 900px) {
  .w3-hero-grid { grid-template-columns: minmax(0, 1fr); }
}

/* --- gallery --- */

.w3-gallery-main {
  position: relative;
  border: 1px solid var(--w3-line-gold);
  border-radius: var(--w3-r-lg);
  overflow: hidden;
  background: var(--w3-bg-2);
  box-shadow: var(--w3-shadow);
}

.w3-gallery-main img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.w3-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.w3-thumb {
  padding: 0;
  border: 1px solid var(--w3-line);
  border-radius: var(--w3-r-sm);
  overflow: hidden;
  background: var(--w3-bg-2);
  cursor: pointer;
  transition: border-color .2s ease, transform .2s ease;
}
.w3-thumb img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.w3-thumb:hover { transform: translateY(-2px); }
.w3-thumb[aria-current="true"] { border-color: var(--w3-gold); box-shadow: 0 0 0 1px var(--w3-gold) inset; }

/* --- hero copy --- */

.w3-hero-title {
  margin: 0 0 14px;
  font-size: clamp(24px, 3.4vw, 38px);
  font-weight: 800;
}

.w3-price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.w3-price-label { font-size: 13px; color: var(--w3-muted); }
.w3-price {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  color: var(--w3-gold);
}

.w3-jackpot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid var(--w3-line-gold);
  border-radius: var(--w3-r);
  background: linear-gradient(135deg, rgba(201, 155, 29, .15), rgba(255, 232, 29, .05));
  font-size: clamp(13px, 1.5vw, 15px);
  font-weight: 700;
}
.w3-jackpot svg { width: 26px; height: 26px; flex: 0 0 auto; color: var(--w3-gold); }
.w3-jackpot strong { color: var(--w3-gold); white-space: nowrap; }

.w3-lead {
  max-width: var(--w3-measure);
  color: var(--w3-text-2);
  font-size: clamp(14px, 1.5vw, 15.5px);
  line-height: 1.85;
}

.w3-cta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: clamp(18px, 3vw, 26px);
}
@media (max-width: 420px) { .w3-cta-row { grid-template-columns: 1fr; } }

.w3-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--w3-line);
  font-size: 12.5px;
  color: var(--w3-muted);
}
.w3-trust span { display: inline-flex; align-items: center; gap: 7px; }
.w3-trust svg { width: 16px; height: 16px; color: var(--w3-gold); }


/* =============================================================================
   7. INFO TABLE — .rb-premium-*
   ============================================================================= */

.rb-premium-box {
  position: relative;
  margin: clamp(24px, 5vw, 40px) 0;
  padding: clamp(20px, 4vw, 30px);
  border-radius: var(--w3-r-lg);
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 0% 0%,     rgba(201, 155, 29, .13), transparent 55%),
    radial-gradient(120% 80% at 100% 100%, rgba(225, 29, 46, .10),  transparent 55%),
    linear-gradient(160deg, #0b0b0f, #141419 55%, #0c0c11);
  border: 1px solid var(--w3-line-gold);
  box-shadow: var(--w3-shadow), inset 0 1px 0 rgba(255, 255, 255, .05);
}

.rb-premium-head { text-align: center; margin-bottom: clamp(16px, 3vw, 24px); }

.rb-premium-head h3 {
  margin: 0;
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--w3-gold);
  text-shadow: 0 0 18px rgba(255, 225, 77, .18);
}

.rb-premium-line {
  width: 76px; height: 3px;
  margin: 14px auto 0;
  border-radius: var(--w3-r-pill);
  background: linear-gradient(90deg, var(--w3-gold-2), var(--w3-gold));
  box-shadow: 0 0 14px rgba(255, 225, 77, .45);
}

.rb-premium-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  border-radius: var(--w3-r);
  overflow: hidden;
  border: 1px solid var(--w3-line);
  background: rgba(0, 0, 0, .34);
}

/* transform:scale() on a <tr> is unreliable across engines and caused 1px
   row jitter in the old CSS — background shift only. */
.rb-premium-table tr { transition: background-color .25s ease; }
.rb-premium-table tr:hover { background: rgba(201, 155, 29, .09); }

.rb-premium-table td {
  padding: 15px 14px;
  border-bottom: 1px solid var(--w3-line);
  font-size: clamp(13px, 1.4vw, 14px);
  line-height: 1.55;
  vertical-align: middle;
}
.rb-premium-table tr:last-child td { border-bottom: 0; }

.rb-premium-table td.label {
  width: 38%;
  color: var(--w3-muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.rb-premium-table td.value { color: var(--w3-text); font-weight: 600; }

.rb-badge-gold {
  display: inline-block;
  padding: 6px 13px;
  border-radius: var(--w3-r-pill);
  border: 1px solid rgba(255, 225, 77, .55);
  background: var(--w3-grad);
  color: var(--w3-on-gold);
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: var(--w3-shadow-gold);
}

.rb-rating { color: var(--w3-gold); font-weight: 800; font-size: 17px; }
.rb-premium-box small { display: inline-block; margin-top: 4px; color: var(--w3-muted); font-size: 12px; }

/* Stack label/value on small screens — CSS only, markup stays a real table. */
@media (max-width: 520px) {
  .rb-premium-table,
  .rb-premium-table tbody,
  .rb-premium-table tr,
  .rb-premium-table td { display: block; width: 100%; }

  .rb-premium-table tr { padding: 14px; border-bottom: 1px solid var(--w3-line); }
  .rb-premium-table tr:last-child { border-bottom: 0; }
  .rb-premium-table td { padding: 0; border: 0; }
  .rb-premium-table td.label { width: auto; margin-bottom: 6px; }
}


/* =============================================================================
   8. SEO SECTION — .bt-*
   ============================================================================= */

.bt-seo-section {
  padding: clamp(40px, 7vw, 70px) 0;
  background:
    radial-gradient(60% 50% at 12% 0%,   rgba(201, 155, 29, .10), transparent 60%),
    radial-gradient(60% 50% at 88% 100%, rgba(225, 29, 46, .08),  transparent 60%),
    linear-gradient(180deg, var(--w3-bg), var(--w3-bg-2) 55%, var(--w3-bg));
}

.bt-container {
  max-width: var(--w3-max);
  margin-inline: auto;
  padding-inline: var(--w3-gutter);
}

.bt-heading { text-align: center; margin-bottom: clamp(28px, 5vw, 44px); }

.bt-badge {
  display: inline-block;
  margin-bottom: 16px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 225, 77, .5);
  border-radius: var(--w3-r-pill);
  background: var(--w3-grad);
  color: var(--w3-on-gold);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.bt-heading h2 {
  margin: 0 0 16px;
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 800;
  color: var(--w3-text);
}

/* One measure for the whole article body. Setting max-width per element made
   the headings wider than the paragraphs, because 72ch of a 26px heading is a
   wider box than 72ch of 15px body text — the gold rules ended up hanging out
   to the left of the text they belonged to. */
.bt-prose {
  max-width: var(--w3-measure);
  margin-inline: auto;
  text-align: left;
}

/* Every h2 after the lead is a sub-heading, not a page title. */
.bt-prose h2 {
  margin: clamp(30px, 4vw, 44px) 0 clamp(10px, 2vw, 14px);
  padding-left: 14px;
  border-left: 3px solid var(--w3-gold);
  font-size: clamp(19px, 2.2vw, 26px);
  color: var(--w3-gold);
}

/* Capping the measure is the single biggest readability win here — the old
   rule was max-width:100% !important, giving ~1100px lines on desktop. */
.bt-prose p {
  margin: 0 0 clamp(14px, 2vw, 18px);
  font-size: clamp(14px, 1.4vw, 15.5px);
  line-height: 1.85;
  color: var(--w3-text-2);
  text-wrap: pretty;
}

.bt-prose ul {
  margin: 0 0 clamp(18px, 3vw, 26px);
  padding: 0;
  list-style: none;
}

.bt-prose li {
  position: relative;
  margin-bottom: 10px;
  padding-left: 26px;
  font-size: clamp(14px, 1.4vw, 15.5px);
  line-height: 1.8;
  color: var(--w3-text-2);
}

.bt-prose li::before {
  content: "";
  position: absolute;
  left: 4px; top: .74em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--w3-gold-2), var(--w3-gold));
  box-shadow: 0 0 8px rgba(255, 225, 77, .45);
}

/* auto-fit replaces the old fixed 1fr 1fr + 991px breakpoint. */
.bt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: clamp(18px, 3vw, 26px);
  align-items: start;
}

.bt-box {
  border: 1px solid var(--w3-line);
  border-radius: var(--w3-r-lg);
  background: var(--w3-surface);
  box-shadow: var(--w3-shadow);
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.bt-box-head { padding: clamp(20px, 3vw, 26px) clamp(18px, 3vw, 24px) 10px; }

.bt-box-head h3 {
  margin: 0 0 8px;
  font-size: clamp(18px, 2.2vw, 23px);
  font-weight: 800;
  color: var(--w3-gold);
}

.bt-box-head p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--w3-muted); }

/* --- FAQ --- */

.bt-faq-list { padding: 6px clamp(12px, 2vw, 16px) clamp(16px, 3vw, 22px); }

.bt-faq-item {
  margin: 0 0 10px;
  border: 1px solid var(--w3-line);
  border-radius: var(--w3-r);
  background: var(--w3-surface);
  overflow: hidden;
  transition: border-color .3s ease, background-color .3s ease, box-shadow .3s ease;
}
.bt-faq-item:hover { border-color: var(--w3-line-gold); }
.bt-faq-item.active {
  border-color: rgba(255, 225, 77, .45);
  background: var(--w3-surface-2);
  box-shadow: 0 10px 28px rgba(201, 155, 29, .10);
}

.bt-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-height: 56px;
  padding: 16px 18px;
  border: 0;
  background: none;
  color: var(--w3-text);
  font-size: clamp(14px, 1.5vw, 15px);
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
}
.bt-faq-question:focus-visible { box-shadow: var(--w3-ring); border-radius: var(--w3-r); }

.bt-faq-question i {
  flex: 0 0 auto;
  font-style: normal;
  font-size: 22px;
  line-height: 1;
  color: var(--w3-gold);
  transition: transform .3s ease;
}
.bt-faq-item.active .bt-faq-question i { transform: rotate(45deg); }

.bt-faq-answer { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.bt-faq-answer p {
  margin: 0;
  padding: 0 18px 18px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--w3-text-2);
}

/* --- testimonial slider --- */

.bt-review-slider { padding: 6px clamp(12px, 2vw, 16px) clamp(16px, 3vw, 22px); }

/* Stacking every card in one grid cell makes the track as tall as the tallest
   card. Replaces min-height:240px, which clipped longer quotes on phones. */
.bt-review-track { display: grid; }

.bt-review-card {
  grid-area: 1 / 1;
  padding: 20px;
  border: 1px solid var(--w3-line);
  border-radius: var(--w3-r);
  background: var(--w3-surface);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .4s ease, transform .4s ease, visibility .4s;
}
.bt-review-card.active { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }

.bt-review-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.bt-review-top h4 { margin: 0 0 4px; font-size: 17px; font-weight: 800; color: var(--w3-text); }
.bt-review-top span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--w3-muted);
}

.bt-stars { flex: 0 0 auto; font-size: 15px; letter-spacing: 2px; white-space: nowrap; color: var(--w3-gold); }
.bt-review-card p { margin: 0; font-size: 14px; line-height: 1.9; color: var(--w3-text-2); }

.bt-review-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
}

.bt-nav-btn {
  width: 44px; height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--w3-grad);
  color: var(--w3-on-gold);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--w3-shadow-gold);
  transition: transform .2s ease, box-shadow .2s ease;
}
.bt-nav-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(201, 155, 29, .35); }
.bt-nav-btn:focus-visible { box-shadow: var(--w3-ring); }

.bt-dots { display: flex; gap: 8px; }

.bt-dot {
  width: 10px; height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .25);
  cursor: pointer;
  transition: width .3s ease, background .3s ease, border-radius .3s ease;
}
.bt-dot.active {
  width: 28px;
  border-radius: var(--w3-r-pill);
  background: linear-gradient(90deg, var(--w3-gold-2), var(--w3-gold));
}
.bt-dot:focus-visible { box-shadow: var(--w3-ring); }


/* =============================================================================
   9. FOOTER
   ============================================================================= */

.w3-footer {
  padding-block: clamp(36px, 6vw, 56px) 0;
  border-top: 1px solid var(--w3-line-gold);
  background: linear-gradient(180deg, var(--w3-bg-2), #050507);
}

.w3-footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: clamp(24px, 4vw, 40px);
}

.w3-footer h4 {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--w3-gold);
}

.w3-footer ul { margin: 0; padding: 0; list-style: none; }
.w3-footer li { margin-bottom: 9px; }

.w3-footer li a,
.w3-footer p {
  color: var(--w3-text-2);
  font-size: 13.5px;
  line-height: 1.7;
  text-decoration: none;
}
.w3-footer li a:hover { color: var(--w3-gold); text-decoration: underline; }

.w3-social { display: flex; gap: 12px; margin-top: 14px; }

.w3-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--w3-line);
  border-radius: 50%;
  color: var(--w3-text-2);
  transition: color .2s ease, border-color .2s ease, transform .2s ease;
}
.w3-social a:hover { color: var(--w3-gold); border-color: var(--w3-line-gold); transform: translateY(-2px); }
.w3-social svg { width: 18px; height: 18px; }

.w3-footer-note {
  margin-top: clamp(24px, 4vw, 36px);
  padding: 16px 0 20px;
  border-top: 1px solid var(--w3-line);
  color: var(--w3-muted);
  font-size: 12px;
  line-height: 1.7;
  text-align: center;
}

.w3-footer-bar {
  padding: 14px var(--w3-gutter);
  background: var(--w3-grad);
  color: var(--w3-on-gold);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}


/* =============================================================================
   10. BOTTOM NAV — .WINNING303-TOTO-SLOT
   ============================================================================= */

.WINNING303-TOTO-SLOT {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--w3-z-nav);
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: 4px;
  padding: 10px 8px calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(12, 12, 16, .92), rgba(0, 0, 0, .98));
  border-top: 1px solid var(--w3-line-gold);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -12px 32px rgba(0, 0, 0, .7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.WINNING303-TOTO-SLOT a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 48px;
  padding: 4px 2px;
  color: #b6b6c0;                 /* was #888 — failed contrast on black */
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;          /* "Live Chat" used to wrap and shove the row out of line */
  transition: color .25s ease, transform .25s ease;
}
.WINNING303-TOTO-SLOT a:hover,
.WINNING303-TOTO-SLOT a:focus-visible { color: var(--w3-gold); transform: translateY(-3px); text-decoration: none; }

.WINNING303-TOTO-SLOT svg { width: 23px; height: 23px; flex: 0 0 auto; }

.WINNING303-TOTO-SLOT a.tada {
  position: relative;
  top: -24px;
  flex: 0 0 auto;
  min-width: 64px;
  height: 56px;
  padding: 0 16px;
  border: 4px solid var(--w3-bg);
  border-radius: var(--w3-r-pill);
  background: var(--w3-grad);
  color: var(--w3-on-gold);
  box-shadow: 0 6px 18px rgba(201, 155, 29, .45);
  animation: w3Float 3.2s ease-in-out infinite;
}
.WINNING303-TOTO-SLOT a.tada:hover { color: var(--w3-on-gold); }
.WINNING303-TOTO-SLOT a.tada svg { width: 21px; height: 21px; }

@keyframes w3Float {
  0%, 100% { transform: translateY(0);    box-shadow: 0 6px 18px rgba(201, 155, 29, .40); }
  50%      { transform: translateY(-5px); box-shadow: 0 14px 28px rgba(255, 225, 77, .45); }
}

@media (max-width: 430px) {
  .WINNING303-TOTO-SLOT { gap: 0; padding-inline: 4px; }
  .WINNING303-TOTO-SLOT a { font-size: 9px; letter-spacing: 0; }
  .WINNING303-TOTO-SLOT svg { width: 21px; height: 21px; }
  .WINNING303-TOTO-SLOT a.tada { min-width: 58px; height: 52px; padding: 0 12px; top: -21px; }
}

@media (max-width: 340px) {
  .WINNING303-TOTO-SLOT a { font-size: 8.5px; }
  .WINNING303-TOTO-SLOT a.tada { min-width: 50px; padding: 0 9px; }
}


/* =============================================================================
   11. POPUP
   ============================================================================= */

/* An author `display:flex` beats the UA sheet's [hidden]{display:none}, so the
   hidden state has to be declared explicitly or the popup fires on load. */
.popup-overlay[hidden] { display: none; }

.popup-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--w3-z-popup);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.popup-container {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 420px;
  max-height: 92dvh;
  overflow: hidden;
  border: 1px solid var(--w3-line-gold);
  border-radius: var(--w3-r-lg);
  background: linear-gradient(160deg, #15111a, #0a0709);
  box-shadow: var(--w3-shadow);
  text-align: center;
  animation: w3PopIn .5s cubic-bezier(.2, .8, .2, 1) both,
             w3GoldPulse 4s ease-in-out 1s infinite;
}

.popup-container::before {
  content: "";
  position: absolute;
  inset: -60%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(135deg, transparent 44%, rgba(255, 225, 77, .13) 50%, transparent 56%);
  animation: w3Shine 6s linear infinite;
}

.sendiri {
  position: relative;
  z-index: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.popup-image {
  width: 100%;
  max-height: 38dvh;
  object-fit: cover;
  border-bottom: 1px solid var(--w3-line);
}

.popup-buttons { display: grid; gap: 12px; padding: clamp(18px, 4vw, 24px); }

.popup-buttons a {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  border-radius: var(--w3-r-pill);
  background: var(--w3-grad);
  color: var(--w3-on-gold);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: var(--w3-shadow-gold);
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}

/* LOGIN is secondary, DAFTAR stays primary — the old CSS made both identical
   gold, so they competed instead of guiding. */
.popup-buttons a:first-child {
  background: transparent;
  border: 1px solid var(--w3-line-gold);
  color: var(--w3-gold);
  box-shadow: none;
}
.popup-buttons a:first-child:hover { background: rgba(255, 225, 77, .1); }

.popup-buttons a::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 -100%;
  width: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .38), transparent);
  transition: left .6s ease;     /* the old rule had no transition, so the
                                    sheen jumped instead of sweeping */
}
.popup-buttons a:hover::before { left: 100%; }
.popup-buttons a:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(201, 155, 29, .35); text-decoration: none; }
.popup-buttons a:focus-visible { box-shadow: var(--w3-ring); }

.popup-footer { padding: 0 20px 22px; font-size: 12.5px; line-height: 1.7; color: var(--w3-muted); }
.popup-footer span { color: var(--w3-gold); font-weight: 700; }

.close-btn {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  padding: 0;
  border: 1px solid var(--w3-line-gold);
  border-radius: 50%;
  background: rgba(0, 0, 0, .65);
  color: #fff;
  cursor: pointer;
  transition: background .25s ease, transform .25s ease;
}
.close-btn:hover { background: var(--w3-red); transform: rotate(90deg); }
.close-btn svg { width: 16px; height: 16px; }

.particle {
  position: absolute;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--w3-gold);
  opacity: .5;
  pointer-events: none;
  animation: w3Rise 8s infinite;
}

@keyframes w3Rise {
  0%   { transform: translateY(0);      opacity: 0; }
  20%  { opacity: .7; }
  100% { transform: translateY(-120px); opacity: 0; }
}
@keyframes w3PopIn {
  from { opacity: 0; transform: scale(.9) translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes w3GoldPulse {
  0%, 100% { box-shadow: var(--w3-shadow), 0 0 26px rgba(201, 155, 29, .30); }
  50%      { box-shadow: var(--w3-shadow), 0 0 46px rgba(255, 225, 77, .42); }
}
@keyframes w3Shine {
  0%   { transform: translate(-70%, -70%) rotate(25deg); }
  100% { transform: translate(70%, 70%)   rotate(25deg); }
}


/* =============================================================================
   12. BACK TO TOP
   ============================================================================= */

.w3-top {
  position: fixed;
  right: 16px;
  bottom: calc(var(--w3-nav-h) + 16px + env(safe-area-inset-bottom, 0px));
  z-index: calc(var(--w3-z-nav) - 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--w3-line-gold);
  border-radius: 50%;
  background: rgba(12, 12, 16, .9);
  color: var(--w3-gold);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .3s ease, visibility .3s, transform .3s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.w3-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.w3-top svg { width: 19px; height: 19px; }


/* =============================================================================
   13. MOTION + PRINT
   Six infinite animations used to run unconditionally on the old page. On
   low-end Android that is measurable battery drain, and it is a vestibular
   trigger.
   ============================================================================= */

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

@media print {
  .w3-topbar, .w3-header, .WINNING303-TOTO-SLOT,
  .popup-overlay, .w3-top { display: none !important; }
  body { padding-bottom: 0; background: #fff; color: #000; }
}