/* === RESET === */
      *,
      :after,
      :before {
        box-sizing: border-box
      }

      html,
      body,
      div,
      a,
      span,
      h1,
      p,
      ul,
      li {
        margin: 0;
        padding: 0;
        border: 0;
        vertical-align: baseline
      }

      ul {
        list-style: none
      }

      a {
        color: inherit;
        text-decoration: none
      }

      body {
        text-size-adjust: none;
        -webkit-text-size-adjust: none;
        line-height: 1
      }

      /* === BASE === */
      html {
        font-size: 16px
      }

      body {
        background: #120000;
        color: #f0e0b0;
        font-family: 'Montserrat', sans-serif;
        overflow-x: hidden;
        overflow-wrap: break-word;
        min-width: 320px;
      }

      /* === FULL PAGE BG (desktop) === */
      body:before {
        content: "";
        position: fixed;
        inset: 0;
        background:
          radial-gradient(ellipse 80% 50% at 50% 0%, rgba(160, 0, 0, 0.24) 0%, transparent 60%),
          radial-gradient(ellipse 60% 40% at 10% 100%, rgba(120, 0, 0, 0.22) 0%, transparent 55%),
          radial-gradient(ellipse 55% 35% at 90% 100%, rgba(80, 0, 0, 0.18) 0%, transparent 55%),
          #120000;
        z-index: 0;
        pointer-events: none;
      }

      /* Gold bar at top */
      body:after {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent 0%, #8b6014 15%, #ffd700 50%, #8b6014 85%, transparent 100%);
        z-index: 100;
        pointer-events: none;
      }

      /* === PAGE WRAPPER — mobile: full width column === */
      #pg {
        position: relative;
        z-index: 1;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: stretch;
      }

      /* Shimmer dots */
      #pg:before {
        content: "";
        position: fixed;
        inset: 0;
        background-image:
          radial-gradient(1px 1px at 8% 12%, rgba(255, 215, 0, 0.45) 0%, transparent 100%),
          radial-gradient(1.5px 1.5px at 25% 35%, rgba(255, 215, 0, 0.28) 0%, transparent 100%),
          radial-gradient(1px 1px at 52% 6%, rgba(255, 215, 0, 0.4) 0%, transparent 100%),
          radial-gradient(1px 1px at 73% 20%, rgba(255, 215, 0, 0.28) 0%, transparent 100%),
          radial-gradient(1.5px 1.5px at 90% 8%, rgba(255, 215, 0, 0.38) 0%, transparent 100%),
          radial-gradient(1px 1px at 18% 78%, rgba(255, 215, 0, 0.22) 0%, transparent 100%),
          radial-gradient(1px 1px at 80% 68%, rgba(255, 215, 0, 0.28) 0%, transparent 100%),
          radial-gradient(1px 1px at 44% 88%, rgba(255, 215, 0, 0.2) 0%, transparent 100%);
        pointer-events: none;
        z-index: 0;
      }

      /* === HEADER / LOGO === */
      #hd {
        position: relative;
        z-index: 2;
        padding: 1rem 1.5rem 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 0 0 auto;
      }

      /* Logo: lebar eksplisit, img intrinsic akan ikut */
      .logo-a {
        display: block;
        width: 240px;
        max-width: calc(100vw - 3rem);
      }

      .logo-a img {
        display: block;
        width: 100%;
      }

      /* Gold ornamental divider */
      .gd {
        width: 85%;
        height: 14px;
        margin-top: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
      }

      .gd:before,
      .gd:after {
        content: "";
        flex: 1;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.5), rgba(255, 215, 0, 0.2));
      }

      .gd:after {
        background: linear-gradient(90deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.5), transparent);
      }

      .gd-gem {
        color: rgba(255, 215, 0, 0.65);
        font-size: 0.4rem;
        letter-spacing: 0.3rem;
      }

      /* === TAGLINE — diperbesar & lebih terang === */
      #tg {
        position: relative;
        z-index: 2;
        font-size: 0.6rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: rgba(255, 210, 80, 0.72);
        text-align: center;
        padding: 0.45rem 1rem 0.3rem;
        flex: 0 0 auto;
        font-weight: 400;
      }

      /* === BANNER === */
      #bn {
        position: relative;
        z-index: 2;
        flex: 1 1 auto;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.3rem 1.5rem;
      }

      .bn-wrap {
        display: inline-block;
        border-radius: 10px;
        box-shadow:
          0 0 0 1px rgba(255, 215, 0, 0.5),
          0 0 18px rgba(255, 215, 0, 0.2),
          0 0 40px rgba(255, 180, 0, 0.08),
          0 10px 30px rgba(0, 0, 0, 0.65);
        line-height: 0;
      }

      .bn-a {
        display: block;
        width: calc(100vw - 3rem);
        max-width: 310px;
        border-radius: 10px;
        overflow: hidden;
      }

      /* === BUTTONS === */
      #bs {
        position: relative;
        z-index: 2;
        width: 100%;
        padding: 0.5rem 1.25rem 1.1rem;
        display: flex;
        flex-direction: column;
        gap: 0.45rem;
        flex: 0 0 auto;
      }

      .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        height: 2.75rem;
        border-radius: 8px;
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;
        font-size: 0.72rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        position: relative;
        overflow: hidden;
      }

      /* BUTTON 1: LOGIN — Gold shimmer */
      .b1 {
        background: linear-gradient(90deg,
            #4a2800 0%, #a06800 15%, #ffd700 30%, #fff5b0 45%,
            #ffd700 55%, #a06800 70%, #4a2800 85%, #a06800 100%);
        background-size: 350% 100%;
        animation: gFlow 2.8s linear infinite;
        color: #1a0800;
        box-shadow:
          0 0 22px rgba(255, 215, 0, 0.28),
          0 4px 12px rgba(0, 0, 0, 0.55),
          inset 0 1px 0 rgba(255, 255, 255, 0.35),
          inset 0 -1px 0 rgba(0, 0, 0, 0.2);
      }

      /* BUTTON 2: DAFTAR — Dark gold border */
      .b2 {
        background: linear-gradient(135deg, #0e0e0e 0%, #1c1c1c 50%, #0e0e0e 100%);
        border: 1px solid rgba(255, 215, 0, 0.5);
        color: #ffd700;
        box-shadow:
          0 0 14px rgba(255, 215, 0, 0.1),
          0 4px 12px rgba(0, 0, 0, 0.55),
          inset 0 0 20px rgba(255, 215, 0, 0.04);
      }

      /* BUTTON 3: REVIEW — Royal deep */
      .b3 {
        background: linear-gradient(135deg, #0b0618 0%, #180b30 50%, #0b0618 100%);
        border: 1px solid rgba(170, 90, 240, 0.38);
        color: #cca8ff;
        box-shadow: 0 0 14px rgba(150, 60, 220, 0.1), 0 4px 12px rgba(0, 0, 0, 0.55);
      }

      @keyframes gFlow {
        0% {
          background-position: 100% 0
        }

        100% {
          background-position: -100% 0
        }
      }

      .bi {
        width: 1rem;
        height: 1rem;
        flex-shrink: 0;
        fill: currentColor
      }

      .b1 .bi {
        fill: #1a0800
      }

      /* ===== DESKTOP — min-width: 640px ===== */
      @media (min-width:640px) {

        /* Body background tetap gelap penuh */
        body {
          background: #0b0000
        }

        /* Card sentral mewah */
        #pg {
          min-height: 100vh;
          max-width: 480px;
          margin: 0 auto;
          align-items: stretch;
          border-left: 1px solid rgba(255, 215, 0, 0.12);
          border-right: 1px solid rgba(255, 215, 0, 0.12);
          box-shadow:
            -20px 0 60px rgba(0, 0, 0, 0.5),
            20px 0 60px rgba(0, 0, 0, 0.5),
            0 0 80px rgba(255, 180, 0, 0.04);
          background:
            radial-gradient(ellipse 120% 50% at 50% 0%, rgba(160, 0, 0, 0.24) 0%, transparent 60%),
            radial-gradient(ellipse 80% 40% at 50% 100%, rgba(120, 0, 0, 0.22) 0%, transparent 55%),
            #160000;
        }

        #hd {
          padding: 1.75rem 2.5rem 0
        }

        .logo-a {
          width: 280px
        }

        .gd {
          width: 80%
        }

        #tg {
          font-size: 0.68rem;
          letter-spacing: 0.2em;
          color: rgba(255, 210, 80, 0.78);
          padding: 0.55rem 1rem 0.4rem;
        }

        #bn {
          padding: 0.4rem 2rem
        }

        .bn-a {
          max-width: 360px;
          width: 100%
        }

        #bs {
          padding: 0.65rem 2rem 2rem;
          gap: 0.6rem
        }

        .btn {
          height: 3.125rem;
          font-size: 0.78rem
        }
      }

      

/* === STANDARD HTML IMAGE FIXES === */
.logo-img {
  display: block;
  width: 100%;
  height: auto;
}

.banner-img {
  display: block;
  width: 100%;
  height: auto;
}