/* ===== Extracted inline style block 1 ===== */
.nv00-gnb-v4__l0-menu-text,
  .nv00-gnb-v4__l1-menu-text,
  .nv00-gnb-v4__l1-featured-link,
  .nv00-gnb-v4__l1-featured-title {
    font-size: 14.5px;
    line-height: 1.4
  }

  @media (max-width:768px) {

    .nv00-gnb-v4__l0-menu-text,
    .nv00-gnb-v4__l1-menu-text,
    .nv00-gnb-v4__l1-featured-link,
    .nv00-gnb-v4__l1-featured-title {
      font-size: 13px
    }
  }


/* ===== Extracted inline style block 2 ===== */
.DemoSlotTerlengkap-card {
                  max-width: 750px;
                  width: 100%;
                  background: #fff;
                  border-radius: 32px;
                  padding: 40px 35px;
                  box-shadow: 0 25px 45px -20px rgba(0, 0, 0, .1);
                  border: 1px solid rgba(212, 175, 55, .25)
                }

                .hero-title {
                  text-align: center;
                  margin-bottom: 30px
                }

                .hero-title h1 {
                  font-size: 34px;
                  font-weight: 700;
                  line-height: 1.4;
                  color: #1a1a1a;
                  margin-bottom: 5px
                }

                .hero-title h1 span {
                  color: #d7a13b;
                  font-weight: 800
                }

                .brand-header {
                  text-align: center;
                  margin-bottom: 25px
                }

                .brand-header h2 {
                  font-size: 2rem;
                  font-weight: 800;
                  color: #1a1a1a;
                  letter-spacing: 1px;
                  margin-bottom: 5px
                }

                .brand-header .sub {
                  font-size: 15px;
                  color: #4a4a4a;
                  font-weight: 500;
                  position: relative;
                  display: inline-block;
                  padding-bottom: 8px
                }

                .brand-header .sub:after {
                  content: '';
                  position: absolute;
                  bottom: 0;
                  left: 50%;
                  transform: translateX(-50%);
                  width: 50px;
                  height: 2px;
                  background: #9f1111
                }

                .info-container {
                  background: #fafafa;
                  border-radius: 20px;
                  border: 1px solid #e0cba0;
                  overflow: hidden;
                  margin-bottom: 30px
                }

                .info-head {
                  padding: 15px 20px;
                  border-bottom: 1px solid #e0cba0;
                  background: #fffbf2
                }

                .info-head h3 {
                  margin: 0;
                  font-size: 16px;
                  color: #d7a13b;
                  font-weight: 700;
                  text-align: center;
                  letter-spacing: .5px
                }

                .info-list {
                  padding: 5px 0
                }

                .info-row {
                  padding: 14px 22px;
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  border-bottom: 1px solid #f0e2c5
                }

                .info-row:last-child {
                  border-bottom: none
                }

                .info-label {
                  display: flex;
                  align-items: center;
                  gap: 12px
                }

                .info-dot {
                  width: 8px;
                  height: 8px;
                  background: #9f1111;
                  border-radius: 50%;
                  display: inline-block
                }

                .info-text {
                  color: #2a2a2a;
                  font-weight: 600;
                  font-size: 15px
                }

                .info-number {
                  color: #1a1a1a;
                  font-size: 15px;
                  font-weight: 600;
                  background: #f0e6d2;
                  padding: 4px 14px;
                  border-radius: 40px;
                  border: 1px solid #9f1111
                }

                .bonus-wrap {
                  background: #fefcf7;
                  border-radius: 20px;
                  padding: 25px 20px;
                  margin: 30px 0 35px;
                  border: 1px solid #e0cba0;
                  text-align: center
                }

                .bonus-head {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  gap: 10px;
                  margin-bottom: 20px
                }

                .bonus-head .gold-icon {
                  width: 8px;
                  height: 8px;
                  background: #9f1111;
                  border-radius: 50%
                }

                .bonus-head h3 {
                  margin: 0;
                  font-size: 16px;
                  color: #d7a13b;
                  font-weight: 700
                }

                .bonus-list {
                  display: flex;
                  flex-direction: column;
                  gap: 12px
                }

                .bonus-item {
                  padding: 12px 15px;
                  background: #fff;
                  border-radius: 14px;
                  border-left: 4px solid #9f1111;
                  box-shadow: 0 2px 8px rgba(212, 175, 55, .05);
                  text-align: left
                }

                .bonus-item p {
                  margin: 0;
                  font-size: 15px;
                  font-weight: 600;
                  color: #1a1a1a
                }

                .bonus-item .highlight-gold {
                  color: #d7a13b;
                  font-weight: 700
                }

                .bonus-item .highlight-black {
                  color: #1a1a1a
                }

                .cta-gold-section {
                  margin-top: 25px;
                  text-align: center
                }

                .cta-buttons-gold {
                  display: flex;
                  gap: 15px;
                  justify-content: center;
                  flex-wrap: wrap
                }

                .btn-gold {
                  display: inline-block;
                  padding: 14px 42px;
                  border-radius: 50px;
                  font-weight: 700;
                  font-size: 16px;
                  letter-spacing: 1px;
                  text-decoration: none;
                  transition: all .2s ease;
                  border: 1px solid;
                  min-width: 140px
                }

                .btn-login-gold {
                  background: transparent;
                  color: #1a1a1a;
                  border-color: #9f1111
                }

                .btn-login-gold:hover {
                  background: #fcf6e8
                }

                .btn-register-gold {
                  background: #9f1111;
                  color: #1a1a1a;
                  border-color: #9f1111
                }

                .btn-register-gold:hover {
                  background: #c6a229
                }


/* ===== Extracted inline style block 3 ===== */
:root {
          --lx-bg: #fff;
          --lx-card: #fff;
          --lx-text: #0f172a;
          --lx-muted: #6b7280;
          --lx-border: #e5e7eb;
          --lx-accent: #9f1111;
          --lx-accent-2: #111827;
          --lx-radius: 16px;
          --lx-shadow: 0 6px 24px rgba(2, 6, 23, .06)
        }

        .lx-wrap {
          background: var(--lx-bg);
          color: var(--lx-text);
          font-family: Inter, system-ui, -apple-system, Segoe\ UI, Roboto, Ubuntu, Arial, sans-serif
        }

        .lx-container {
          max-width: 1425px;
          margin: 0 auto;
          padding: 0 16px 0
        }

        .lx-section {
          background: var(--lx-card);
          border: 1px solid var(--lx-border);
          border-radius: var(--lx-radius);
          box-shadow: var(--lx-shadow);
          padding: 24px;
          margin-bottom: 18px
        }

        .lx-head {
          display: flex;
          align-items: center;
          gap: 12px;
          margin: 0 0 12px 0;
          font-size: 22px;
          line-height: 1.25;
          letter-spacing: .2px
        }

        .lx-head svg {
          width: 22px;
          height: 22px;
          flex: 0 0 auto
        }

        .lx-body {
          color: var(--lx-muted);
          font-size: 15.5px;
          line-height: 1.7
        }

        .lx-body a {
          color: red;
          text-underline-offset: 3px
        }

        .lx-stats {
          display: flex;
          flex-wrap: wrap;
          gap: 10px;
          margin-top: 14px
        }

        .lx-pill {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          border: 1px dashed var(--lx-border);
          padding: 8px 12px;
          border-radius: 999px;
          font-size: 13.5px;
          color: var(--lx-text);
          background: linear-gradient(180deg, rgba(212, 175, 55, .08), rgba(212, 175, 55, 0))
        }

        .lx-pill svg {
          width: 16px;
          height: 16px
        }

        .lx-grid {
          display: grid;
          gap: 12px;
          grid-template-columns: repeat(4, minmax(0, 1fr))
        }

        @media (max-width:980px) {
          .lx-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr))
          }
        }

        @media (max-width:520px) {
          .lx-grid {
            grid-template-columns: 1fr
          }
        }

        .lx-feature {
          padding: 18px;
          border: 1px solid var(--lx-border);
          border-radius: 14px;
          background: var(--lx-card)
        }

        .lx-feature h3 {
          margin: 0 0 6px 0;
          font-size: 16.5px;
          display: flex;
          align-items: center;
          gap: 8px;
          color: var(--lx-text)
        }

        .lx-feature p {
          margin: 0;
          color: var(--lx-muted);
          font-size: 14.5px;
          line-height: 1.65
        }

        .lx-icon {
          width: 18px;
          height: 18px;
          color: var(--lx-accent-2)
        }

        .lx-steps {
          counter-reset: step;
          display: flex;
          flex-direction: column;
          gap: 12px;
          margin: 10px 0 0 0;
          padding: 0;
          list-style: none
        }

        .lx-step {
          display: flex;
          gap: 12px;
          align-items: flex-start;
          border: 1px solid var(--lx-border);
          border-radius: 12px;
          padding: 14px 16px;
          background: var(--lx-card)
        }

        .lx-step::before {
          counter-increment: step;
          content: counter(step);
          flex: 0 0 32px;
          height: 32px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          border-radius: 8px;
          font-weight: 700;
          color: #111;
          background: linear-gradient(180deg, #fff, rgba(212, 175, 55, .75));
          border: 1px solid rgba(17, 24, 39, .12)
        }

        .lx-cta {
          display: flex;
          flex-wrap: wrap;
          gap: 10px;
          margin-top: 14px
        }

        .lx-btn {
          display: inline-block;
          padding: 10px 16px;
          border-radius: 10px;
          text-decoration: none;
          font-weight: 600;
          line-height: 1;
          border: 1px solid var(--lx-border)
        }

        .lx-btn--primary {
          background: var(--lx-accent-2);
          color: #fff;
          border-color: var(--lx-accent-2)
        }

        .lx-btn--outline {
          background: transparent;
          color: var(--lx-text)
        }

        .lx-section+.lx-section {
          margin-top: 14px
        }


/* ===== Extracted inline style block 4 ===== */
h1 {
            font-size: 32px;
            font-weight: 800;
            text-align: center;
            color: #1e1e1e;
            margin-bottom: 10px;
            line-height: 1.4
          }

          h1 span {
            color: #d7a13b
          }

          h2 {
            font-size: 26px;
            font-weight: 700;
            color: #1e1e1e;
            margin: 30px 0 20px 0;
            position: relative;
            padding-left: 15px
          }

          h2::before {
            content: '';
            position: absolute;
            left: 0;
            top: 5px;
            bottom: 5px;
            width: 4px;
            background: #9f1111;
            border-radius: 4px
          }

          h3 {
            font-size: 20px;
            font-weight: 600;
            color: #d7a13b;
            margin: 20px 0 10px 0
          }

          p {
            color: #2e2e2e;
            margin-bottom: 15px;
            font-size: 16px;
            text-align: justify
          }

          a {
            color: #d7a13b;
            text-decoration: none;
            font-weight: 600;
            transition: all .2s ease
          }

          .highlight-box {
            background: #fefcf5;
            border: 1px solid #9f1111;
            border-radius: 16px;
            padding: 25px;
            margin: 30px 0;
            box-shadow: 0 5px 15px rgba(212, 175, 55, .05)
          }

          .info-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
            margin: 25px 0
          }

          .info-card {
            background: #fcfcfc;
            border: 1px solid #e0cba0;
            border-radius: 16px;
            padding: 20px 10px;
            text-align: center
          }

          .info-card .label {
            font-size: 14px;
            color: #d7a13b;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: .5px
          }

          .info-card .value {
            font-size: 18px;
            font-weight: 700;
            color: #1e1e1e;
            margin-top: 8px
          }

          .faq-container {
            margin: 30px 0
          }

          .faq-item {
            margin-bottom: 12px;
            border: 1px solid #e0cba0;
            border-radius: 16px;
            overflow: hidden;
            background: #fff
          }

          .faq-question {
            width: 100%;
            text-align: left;
            padding: 18px 20px;
            background: #fefcf5;
            border: none;
            cursor: pointer;
            font-weight: 600;
            font-size: 16px;
            color: #1e1e1e;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all .2s ease
          }

          .faq-question:hover {
            background: #fcf3e0
          }

          .faq-question .icon {
            color: #9f1111;
            font-size: 22px;
            font-weight: 400
          }

          .faq-answer {
            padding: 0 20px;
            max-height: 0;
            overflow: hidden;
            transition: max-height .3s ease;
            background: #fff
          }

          .faq-answer p {
            margin: 15px 0;
            color: #4a4a4a
          }

          .faq-answer.open {
            max-height: 200px;
            padding: 0 20px
          }

          .reviews-section {
            margin: 40px 0
          }

          .reviews-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-top: 25px
          }

          .review-card {
            background: #fefcf5;
            border: 1px solid #9f1111;
            border-radius: 20px;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, .02)
          }

          .review-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px
          }

          .review-name {
            font-weight: 700;
            color: #1e1e1e
          }

          .review-stars {
            color: #9f1111;
            letter-spacing: 2px
          }

          .review-text {
            color: #4a4a4a;
            font-size: 14px;
            line-height: 1.7;
            margin: 10px 0;
            font-style: italic
          }

          .review-date {
            color: #999;
            font-size: 12px;
            display: block;
            margin-top: 10px
          }

          .cta-section {
            text-align: center;
            margin: 40px 0 20px
          }

          .cta-buttons {
            display: flex;
            gap: 15px;
            justify-content: center;
            flex-wrap: wrap
          }

          .btn {
            display: inline-block;
            padding: 14px 40px;
            border-radius: 50px;
            font-weight: 700;
            font-size: 16px;
            letter-spacing: 1px;
            text-decoration: none;
            transition: all .2s ease;
            border: 1px solid;
            min-width: 150px
          }

          .btn-login {
            background: transparent;
            color: #1e1e1e;
            border-color: #9f1111
          }

          .btn-login:hover {
            background: #fcf3e0;
            border-color: #d7a13b
          }

          .btn-register {
            background: #9f1111;
            color: #1e1e1e;
            border-color: #9f1111
          }

          .btn-register:hover {
            background: #c6a229
          }

          @media (max-width:768px) {
            .container {
              padding: 25px
            }

            .info-grid {
              grid-template-columns: repeat(2, 1fr)
            }

            .reviews-grid {
              grid-template-columns: 1fr
            }

            h1 {
              font-size: 24px
            }
          }


/* ===== Extracted inline style block 5 ===== */
.Demo {
      margin: 0;
      padding: 0;
      font-family: 'Playfair Display', 'Segoe UI', serif;
      background-color: transparent;
      color: #fff;
      overflow: hidden
    }

    .popup-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, .4);
      backdrop-filter: blur(3px);
      -webkit-backdrop-filter: blur(3px);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999
    }

    .popup-container {
      position: relative;
      width: 90%;
      max-width: 420px;
      background: linear-gradient(145deg, rgba(10, 10, 10, .9), rgba(26, 21, 16, .85));
      border-radius: 20px;
      overflow: hidden;
      text-align: center;
      animation: rotateScaleIn .8s cubic-bezier(.175, .885, .32, 1.275), goldPulse 3.5s infinite ease-in-out;
      box-shadow: 0 20px 40px rgba(0, 0, 0, .7), 0 0 0 1px rgba(212, 175, 55, .2);
      padding-bottom: 20px;
      border: 1px solid rgba(212, 175, 55, .15);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px)
    }

    @keyframes goldPulse {

      0%,
      100% {
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7), 0 0 20px rgba(212, 175, 55, 0.3), 0 0 0 1px rgba(212, 175, 55, 0.2);
      }

      50% {
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7), 0 0 30px rgba(212, 175, 55, 0.5), 0 0 0 1px rgba(212, 175, 55, 0.3);
      }
    }

    .popup-container::before {
      content: "";
      position: absolute;
      top: -100%;
      left: -100%;
      width: 200%;
      height: 200%;
      background: linear-gradient(135deg,
          rgba(255, 255, 255, 0) 45%,
          rgba(255, 215, 0, 0.15) 50%,
          rgba(255, 255, 255, 0) 55%);
      animation: shineDiagonal 5s linear infinite;
      z-index: 2;
      pointer-events: none
    }

    @keyframes shineDiagonal {
      0% {
        transform: translate(-100%, -100%) rotate(30deg);
      }

      100% {
        transform: translate(100%, 100%) rotate(30deg);
      }
    }

    .popup-image {
      width: 100%;
      display: block;
      border-bottom: 1px solid rgba(212, 175, 55, .15)
    }

    .clk-btn-sgp {
      width: 97%;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 15px;
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      padding: 20px;
      position: relative;
      overflow: hidden
    }

    .clk-btn-sgp::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: calc(100% - 30px);
      height: 2px;
      background: linear-gradient(90deg, transparent, #9f1111, #51edea, #9f1111, transparent);
      opacity: .4;
      filter: blur(1px)
    }

    .clk-btn-sgp a {
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      padding: 16px 12px;
      margin: 0;
      border-radius: 14px;
      transition: all .4s cubic-bezier(.23, 1, .32, 1);
      position: relative;
      overflow: hidden;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 2px solid transparent;
      box-shadow: 0 8px 0 #000;
      clip-path: polygon(var(--blade-cut) 0%, 100% 0%, 100% calc(100% - var(--blade-cut)), calc(100% - var(--blade-cut)) 100%, 0% 100%, 0% var(--blade-cut));
      z-index: 1
    }

    .clk-btn-sgp a::after {
      content: '';
      position: absolute;
      top: -2px;
      left: -2px;
      right: -2px;
      bottom: -2px;
      background: linear-gradient(45deg, #d7a13b, #9f1111, #51edea, #9f1111, #d7a13b);
      border-radius: 16px;
      z-index: -1;
      opacity: 0;
      transition: opacity .3s ease
    }

    .clk-btn-sgp a:hover::after {
      opacity: 1
    }

    .clk-btn-sgp a:hover {
      transform: translateY(-6px) scale(1.03);
      border-color: #51edea
    }

    .login {
      color: #51edea !important;
      background: linear-gradient(145deg, #9f1111, #313131);
      border: 2px solid #d7a13b;
      text-shadow: 0 2px 4px rgba(0, 0, 0, .5);
      position: relative
    }

    .login::before {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 18px;
      opacity: .7;
      transition: all .3s ease;
      filter: drop-shadow(0 0 3px #51edea)
    }

    .login:hover {
      background: linear-gradient(145deg, #222, #1a1a1a);
      box-shadow: 0 12px 0 #000, 0 20px 40px rgba(212, 175, 55, .4), 0 0 30px rgba(255, 215, 0, .2);
      color: #fff8dc !important;
      border-color: #51edea
    }

    .login:hover::before {
      opacity: 1;
      transform: translateY(-50%) rotate(15deg);
      filter: drop-shadow(0 0 8px #51edea)
    }

    .register {
      color: #000 !important;
      background: linear-gradient(145deg, #9f1111, #d7a13b);
      border: 2px solid #000;
      text-shadow: 0 1px 2px rgba(255, 255, 255, .3);
      position: relative
    }

    .register::before {
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 18px;
      opacity: .7;
      transition: all .3s ease
    }

    .register:hover {
      background: linear-gradient(145deg, #51edea, #9f1111);
      box-shadow: 0 12px 0 #000, 0 20px 40px rgba(212, 175, 55, .5), 0 0 35px rgba(255, 215, 0, .3);
      color: #000 !important;
      border-color: #000
    }

    .register:hover::before {
      opacity: 1;
      transform: translateY(-50%) scale(1.2) rotate(360deg);
      filter: drop-shadow(0 0 5px #fff)
    }

    .clk-btn-sgp a span {
      display: inline-block;
      transition: transform .3s ease
    }

    .clk-btn-sgp a:hover span {
      transform: translateX(3px)
    }

    @media (max-width:768px) {
      .clk-btn-sgp {
        grid-template-columns: 1fr;
        gap: 12px
      }

      .clk-btn-sgp a {
        padding: 18px 12px
      }

      .login::before,
      .register::before {
        position: relative;
        left: 0;
        right: 0;
        display: inline-block;
        margin-right: 10px;
        transform: none;
        top: 0
      }

      .login:hover::before,
      .register:hover::before {
        transform: none
      }
    }

    @keyframes subtleGlow {

      0%,
      100% {
        box-shadow:
          0 15px 35px rgba(0, 0, 0, 0.6),
          inset 0 1px 0 rgba(255, 255, 255, 0.1);
      }

      50% {
        box-shadow:
          0 15px 35px rgba(0, 0, 0, 0.6),
          inset 0 1px 0 rgba(255, 255, 255, 0.1),
          0 0 20px rgba(212, 175, 55, 0.15);
      }
    }

    .info-table {
      width: 90%;
      margin: 20px auto;
      border-collapse: collapse;
      color: #eee;
      font-size: 14px;
      position: relative;
      z-index: 3;
      background: rgba(0, 0, 0, .3);
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 5px 15px rgba(0, 0, 0, .3)
    }

    .info-table th {
      background: linear-gradient(135deg, #9f1111, #b8941f);
      padding: 14px 10px;
      font-size: 15px;
      color: #000;
      border: none;
      font-weight: 700;
      letter-spacing: .8px;
      text-transform: uppercase
    }

    .info-table td {
      padding: 12px;
      border-bottom: 1px solid rgba(212, 175, 55, .1);
      text-align: left
    }

    .info-table tr:last-child td {
      border-bottom: none
    }

    .popup-footer {
      font-size: 13px;
      color: #ccc;
      padding: 20px 10px;
      position: relative;
      z-index: 3;
      line-height: 1.6;
      font-family: 'Playfair Display', serif
    }

    @keyframes rotateScaleIn {
      0% {
        opacity: 0;
        transform: scale(0.3) rotate(-10deg);
      }

      50% {
        transform: scale(1.05) rotate(2deg);
      }

      100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
      }
    }

    .gold-particle {
      position: absolute;
      background: radial-gradient(circle, rgba(255, 215, 0, .8) 0%, rgba(212, 175, 55, .4) 100%);
      border-radius: 50%;
      pointer-events: none;
      z-index: 1;
      animation: floatGold 10s infinite ease-in-out;
      box-shadow: 0 0 10px rgba(255, 215, 0, .6)
    }

    @keyframes floatGold {

      0%,
      100% {
        transform: translateY(0) translateX(0);
        opacity: 0;
      }

      10% {
        opacity: 0.8;
      }

      90% {
        opacity: 0.8;
      }

      100% {
        transform: translateY(-120px) translateX(40px);
        opacity: 0;
      }
    }

    .luxury-border {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border: 1px solid rgba(212, 175, 55, .2);
      border-radius: 20px;
      pointer-events: none;
      z-index: 4;
      background: linear-gradient(135deg, rgba(212, 175, 55, 0) 0%, rgba(212, 175, 55, .1) 50%, rgba(212, 175, 55, 0) 100%)
    }

    .close-btn {
      position: absolute;
      top: 15px;
      right: 15px;
      width: 32px;
      height: 32px;
      background: rgba(0, 0, 0, .5);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      z-index: 10;
      transition: all .3s ease;
      border: 1px solid rgba(212, 175, 55, .3)
    }

    .close-btn:hover {
      background: rgba(212, 175, 55, .8);
      transform: rotate(90deg)
    }

    .close-btn::before,
    .close-btn::after {
      content: '';
      position: absolute;
      width: 16px;
      height: 2px;
      background: #fff
    }

    .close-btn::before {
      transform: rotate(45deg)
    }

    .close-btn::after {
      transform: rotate(-45deg)
    }

    @media (max-width:480px) {
      .popup-container {
        width: 95%;
        max-width: 350px
      }

      .popup-buttons a {
        font-size: 14px;
        padding: 16px 0
      }

      .info-table {
        font-size: 13px
      }

      .popup-footer {
        font-size: 12px
      }

      .close-btn {
        width: 28px;
        height: 28px
      }
    }


/* =========================================================
   YUNITOTO DARK RED & GOLD THEME
   Added after the extracted source CSS so it can safely
   override the Samsung template without changing HTML classes.
   ========================================================= */
:root {
  --yuni-black: #090101;
  --yuni-black-soft: #150403;
  --yuni-card: rgba(20, 4, 3, .94);
  --yuni-card-soft: rgba(35, 6, 5, .92);
  --yuni-red: #8a0d0d;
  --yuni-red-deep: #4d0707;
  --yuni-red-bright: #b51616;
  --yuni-gold: #d7a13b;
  --yuni-gold-light: #ffd36a;
  --yuni-cream: #fff0d0;
  --yuni-muted: #e4cfac;
  --yuni-border: rgba(215, 161, 59, .46);
  --yuni-shadow: 0 16px 38px rgba(0, 0, 0, .48);

  --lx-bg: #090101;
  --lx-card: rgba(20, 4, 3, .94);
  --lx-text: #fff0d0;
  --lx-muted: #e4cfac;
  --lx-border: rgba(215, 161, 59, .42);
  --lx-accent: #9f1111;
  --lx-accent-2: #d7a13b;
  --lx-shadow: 0 14px 32px rgba(0, 0, 0, .46);
}

html,
body {
  background-color: var(--yuni-black) !important;
}

body {
  color: var(--yuni-cream) !important;
  background-image:
    linear-gradient(rgba(9, 1, 1, .88), rgba(28, 4, 3, .92)),
    url("../img/yunitoto-33.png") !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

#wrap,
#content,
.st-page-pd,
.pd-g-product-detail-header-ux2,
.hdd02-pdp-header,
.hdd02-pdp-header__gallery-area,
.hdd02-pdp-header__product-info,
.sg-component,
.component-area {
  background-color: transparent !important;
}

.nv00-gnb-v4,
.nv00-gnb-v4__wrap,
.nv00-gnb-v4__inner,
.nv00-gnb-v4__header,
.nv00-gnb-v4__container {
  background: linear-gradient(135deg, #120202 0%, #5d0908 52%, #120202 100%) !important;
  border-color: var(--yuni-border) !important;
}

.nv00-gnb-v4__l0-menu-text,
.nv00-gnb-v4__l0-menu-btn,
.nv00-gnb-v4__l0-menu-link,
.nv00-gnb-v4__utility,
.nv00-gnb-v4__utility-menu,
.nv00-gnb-v4__featured-title,
.nv00-gnb-v4__featured-item-name,
.nv00-gnb-v4__user-menu {
  color: var(--yuni-cream) !important;
}

.nv00-gnb-v4 svg,
.nv00-gnb-v4 .icon {
  fill: var(--yuni-gold-light) !important;
  color: var(--yuni-gold-light) !important;
}

.nv00-gnb-v4__l0-menu-link:hover,
.nv00-gnb-v4__l0-menu-btn:hover,
.nv00-gnb-v4__utility-menu:hover {
  color: var(--yuni-gold-light) !important;
}

.pdd39-anchor-nav__price,
.pdd39-anchor-nav__menu,
.pdd39-anchor-nav__header-dummy,
.pd-banner,
.hdd02-product-info,
.hdd02-gallery,
.pdd16-step-buying,
.pdd16-step-buying-v2,
.layer-popup,
.srd19-gnb-search__contents {
  background: var(--yuni-card) !important;
  color: var(--yuni-cream) !important;
  border-color: var(--yuni-border) !important;
}

.DemoSlotTerlengkap-card,
.lx-section,
.lx-feature,
.lx-step,
.highlight-box,
.faq-item,
.review-card,
.product-card,
.neon-box,
.article-container {
  background: linear-gradient(145deg, rgba(12, 2, 2, .96), rgba(54, 7, 6, .93)) !important;
  color: var(--yuni-cream) !important;
  border-color: var(--yuni-border) !important;
  box-shadow: var(--yuni-shadow) !important;
}

.DemoSlotTerlengkap-card h1,
.DemoSlotTerlengkap-card h2,
.DemoSlotTerlengkap-card h3,
.lx-head,
.lx-feature h3,
.hero-title h1,
.brand-header h2,
h1,
h2,
h3 {
  color: var(--yuni-cream) !important;
}

.DemoSlotTerlengkap-card h1 span,
.hero-title h1 span,
h1 span,
h2 span,
h3 span,
.brand-header strong,
.lx-body a,
.article-container a,
.highlight,
.accent,
.gold-text {
  color: var(--yuni-gold-light) !important;
}

p,
li,
label,
small,
.pd-buying-price__new-price-inner,
.pd-buying-price__monthly-price,
.pd-banner__desc,
.layer-popup__desc {
  color: var(--yuni-muted);
}

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

.cta--contained,
.cta--emphasis,
.pdd39-anchor-nav__cta .cta,
button.cta--contained,
a.cta--contained,
.btn-primary,
.login-button,
.register-button {
  color: #fff8e8 !important;
  background: linear-gradient(135deg, #5c0807 0%, #ad1514 48%, #5c0807 100%) !important;
  border: 1px solid var(--yuni-gold) !important;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, .42),
    0 0 13px rgba(215, 161, 59, .22) !important;
}

.cta--contained:hover,
.cta--emphasis:hover,
.pdd39-anchor-nav__cta .cta:hover,
.btn-primary:hover,
.login-button:hover,
.register-button:hover {
  filter: brightness(1.12);
  box-shadow:
    0 10px 25px rgba(0, 0, 0, .50),
    0 0 19px rgba(255, 211, 106, .34) !important;
}

.cta--outlined,
.cta--underline,
.tab__item-title,
.menu__select-field,
input,
select,
textarea {
  color: var(--yuni-cream) !important;
  border-color: var(--yuni-border) !important;
}

input,
select,
textarea,
.menu__select-field {
  background-color: rgba(12, 2, 2, .90) !important;
}

.hdd02-gallery__image,
.hdd02-gallery__item,
.image {
  border-color: var(--yuni-border) !important;
}

.hdd02-gallery__image img[data-desktop-src*="yunitoto-33"],
.hdd02-gallery__image img[data-mobile-src*="yunitoto-33"] {
  border-radius: 18px;
  box-shadow:
    0 20px 40px rgba(0, 0, 0, .55),
    0 0 22px rgba(138, 13, 13, .34);
}

.footer,
.footer-column,
.footer-bottom,
footer {
  background: linear-gradient(135deg, #100202, #4b0706, #100202) !important;
  color: var(--yuni-cream) !important;
  border-color: var(--yuni-border) !important;
}

.popup-container {
  background: linear-gradient(145deg, rgba(9, 1, 1, .97), rgba(74, 9, 7, .94)) !important;
  border-color: rgba(215, 161, 59, .50) !important;
}

@media (max-width: 768px) {
  body {
    background-attachment: scroll !important;
  }

  .DemoSlotTerlengkap-card,
  .lx-section,
  .pdd39-anchor-nav__price,
  .hdd02-gallery {
    border-radius: 15px !important;
  }
}