.fancybox-margin {
            margin-right: 15px;
        }
        .box--no-padding {
    background-color: #000000;
    color: #000000;
    margin-bottom: 20px;
    border-radius: 4px;
    border: 10px solid #ff0000;
}

        .live-preview-btn--blue .live-preview {
            background-color: #a71313ff;
        }
        
        .live-preview-btn--blue .live-preview:hover,
        .live-preview-btn--blue .live-preview:focus {
            background-color: #292928
        }

                     .button-login-daftar {
                         display: grid;
                         grid-template-columns: repeat(2, 1fr);
                         font-weight: 700;
                     }
                     .button-login-daftar a {
                         text-align: center;
                     }
                     .login,
                     .register {
                         color: #ff0000;
                         padding: 15px 10px;
                         font-size: 15px;
                     }
                     .login,
                     .login-button {
                         background: linear-gradient(to bottom,#ff0000 0,#ff0000 100%);
                         border: 2px solid #000000ff;
                     }
                     .register,
                     .register-button {
                         background: linear-gradient(to bottom,#ff0000 0,#ff0000 100%);
                         border: 2px solid #000000ff;
                     }
                     
                     .situs-demo-section {
  position: relative; /* biar gak numpuk layer lain */
  background: #000;
  color: #fff;
  border: 2px solid #00ffea;
  border-radius: 10px;
  padding: 30px 25px;
  max-width: 900px;
  margin: 50px auto 70px; /* tambahin margin-bottom */
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  z-index: 1; /* pastiin di bawah banner layer lebih tinggi */
}
.banner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.banner img {
  width: 100%;
  height: auto; /* biar gambar ikut skala layar */
  display: block;
  position: relative; /* jangan absolute di HP */
}


.situs-demo-section h2 {
  font-size: 26px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #00ffea;
  text-align: center;
}

.situs-demo-section h3 {
  font-size: 20px;
  color: #00ffea;
  margin-top: 25px;
  margin-bottom: 10px;
}

.situs-demo-section p {
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 15px;
}

.situs-demo-section a {
  color: #00ffea;
  text-decoration: underline;
}

.situs-demo-section a:hover {
  color: #fff;
  text-decoration: none;
}

@media (max-width: 768px) {
  .situs-demo-section {
    padding: 20px 15px;
    margin: 40px auto 100px; /* jarak bawah lebih besar pas di HP */
  }

  .situs-demo-section h2 {
    font-size: 22px;
  }

  .situs-demo-section p {
    font-size: 14.5px;
  }
}
.banner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.banner img {
  width: 100%;
  height: auto; /* biar gambar ikut skala layar */
  display: block;
  position: relative; /* jangan absolute di HP */
}
.page {
    height: 5%;
    position: relative;
}
.content-main {
    min-height: 500px;
    height: 110%;
    padding: 16px 0 32px;
    position: relative;
}
.header-mini {
    background-color: #000000;
    height: 200px;
    position: relative;
    text-align: center;
}

                                .n-columns-2 {
                                    display: grid;
                                    grid-template-columns: repeat(2, 1fr);
                                    font-weight: 700;
                                }
                                
                                .n-columns-2 a {
                                    text-align: center;
                                    margin: 3px;
                                }
                                
                                /* ====== SECTION KONTEN UTAMA ====== */
section {
  padding: 20px 16px;
  margin: 0 auto;
  max-width: 700px;
  background: #fff;
  box-sizing: border-box;
}

/* ====== JARAK & TYPOGRAFI ====== */
h2, h3 {
  color: #07ff00;
  font-weight: 700;
  margin: 20px 0 10px;
  line-height: 1.4;
  word-wrap: break-word;
}


p {
  margin: 0 0 14px;
  font-size: 15.5px;
  color: #ffffffff;
  line-height: 1.7;
  word-wrap: break-word;
}


strong {color: #fd0000ff;
  font-weight: 600;
}

a {
  color: #000000;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ====== RESPONSIVE UNTUK MOBILE ====== */
@media (max-width: 768px) {
  section {
    padding: 16px 12px;
  }
  h2, h3 {
    font-size: 18px;
    margin-top: 16px;
    margin-bottom: 8px;
  }
  p {
    font-size: 14.5px;
    margin-bottom: 12px;
  }
  a {
    word-break: break-word;
  }
}

  :root{
    --ug-deep: #000000;       /* deep purple */
    --ug-deeper: #000000;     /* extra deep (almost black purple) */
    --ug-acc: #ff0000;        /* light purple accent */
    --ug-acc-2: #ff0000;      /* mid accent */
    --line: rgba(244, 246, 92, 0.18);   /* subtle purple line */
    --glass: rgba(237, 225, 58, 0.06);  /* glassy purple tint */
    --txt: #000000ff;          /* pale text */
    --muted: #000000ff;        /* muted purple text */
  }

  .wb-panel{
    width: 340px;
    background: linear-gradient(180deg, var(--ug-deep), var(--ug-deeper));
    border:1px solid var(--line);
    border-radius: 14px;
    color:var(--txt);
    font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    box-shadow: 0 12px 28px rgba(0,0,0,.55), 0 0 28px rgba(139,92,246,.08);
    overflow:hidden;
    position:relative;
  }

  .wb-head{
    display:flex; align-items:center; gap:10px;
    padding:10px 12px;
    border-bottom:1px solid var(--line);
    background:
      radial-gradient(120% 140% at 0% 0%, rgba(140, 232, 255, 0.1), transparent 40%),
      linear-gradient(180deg, rgba(255,255,255,.02), transparent);
  }
  .wb-trophy{
    width:20px; height:20px; flex:0 0 20px;
    color:#081b20;
    background: linear-gradient(135deg, var(--ug-acc), var(--ug-acc-2));
    border-radius:6px; display:grid; place-items:center;
    box-shadow: 0 6px 14px rgba(0,0,0,.35), 0 0 12px rgba(92, 236, 246, 0.18);
  }
  .wb-title{ font:900 13px/1.1 system-ui; letter-spacing:.35px; text-transform:uppercase; }
  .wb-dot{
    margin-left:auto; width:9px; height:9px; border-radius:50%;
    background: radial-gradient(circle,#f1e6ff,#d6c6f5 60%,#5cd2f6);
    box-shadow: 0 0 10px rgba(255, 196, 0, 1);
    animation: wbPing 1.8s ease-in-out infinite;
  }
  @keyframes wbPing{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}

  .wb-list-wrap{
    height: 280px;              /* tinggi viewport daftar */
    overflow:hidden; position:relative;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0,#000 8%,#000 92%,transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0,#000 8%,#000 92%,transparent 100%);
    background: linear-gradient(180deg, var(--glass), transparent);
  }
  .wb-track{
    list-style:none; margin:0; padding:8px 10px 10px;
    display:flex; flex-direction:column; gap:10px;
    will-change: transform;
  }

  .wb-item{
    display:grid; grid-template-columns: 52px 1fr; gap:10px;
    padding:8px; border-radius:12px; position:relative; isolation:isolate;
    border:1px solid var(--line);
    background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
  }
  .wb-thumb{ width:52px; height:52px; border-radius:10px; object-fit:cover; display:block; }
  .wb-name{ font:800 12px/1.1 system-ui; letter-spacing:.2px; margin:0 0 4px; color:var(--txt); }
  .wb-amount{ font:900 13px/1 system-ui; color:var(--ug-acc); text-shadow:0 0 10px rgba(92, 241, 246, 0.18); }
  .wb-game{ font:600 11px/1.2 system-ui; color:var(--muted); margin-top:4px; opacity:.95; }

  /* item yang baru naik (di puncak) */
  .wb-item.is-new{
    box-shadow:
      0 14px 26px rgba(0,0,0,.55),
      0 0 24px rgba(139,92,246,.12),
      inset 0 0 0 1px rgba(255,255,255,.03);
    transform: translateZ(0);
    animation: wbPulse 1.2s ease both;
  }
  @keyframes wbPulse{
    0%{ filter:saturate(1); }
    40%{ filter:saturate(1.12); }
    100%{ filter:saturate(1.05); }
  }

  /* coin sparks — ubah ke ungu kecil */
  .wb-coin{
    position:absolute; width:12px; height:12px; border-radius:50%;
    background: radial-gradient(circle at 30% 30%, #f6eefc, #f5f4c6 50%, #fff89b 70%, #e8d52b 100%);
    box-shadow: 0 0 10px rgba(92, 223, 246, 0.45);
    pointer-events:none; z-index:5;
    animation: coinPop .9s ease-out forwards;
  }
  @keyframes coinPop{
    0%{ transform:translate(var(--sx,0), 14px) scale(.6) rotate(0); opacity:.95; }
    70%{ transform:translate(calc(var(--sx,0)*1.2), -20px) scale(1) rotate(120deg); opacity:1; }
    100%{ transform:translate(calc(var(--sx,0)*2), -36px) scale(.85) rotate(240deg); opacity:0; }
  }

  /* Footer tipis */
  .wb-foot{
    border-top:1px solid var(--line);
    padding:8px 10px; font:600 11px/1.2 system-ui; color:#000000; display:flex; gap:8px; align-items:center;
  }
  .wb-pill{
    margin-left:auto; border:1px solid rgba(246, 244, 92, 0.35); color:#201a08;
    background: linear-gradient(135deg,var(--ug-acc),var(--ug-acc-2));
    border-radius:999px; font:800 10px/1 system-ui; padding:6px 10px;
    box-shadow: 0 6px 14px rgba(0,0,0,.35), 0 0 14px rgba(246, 231, 92, 0.12);
  }

  @media (max-width:480px){
    .wb-panel{ width: 92vw; }
  }

           div.advertisement-placeholder {
             text-align: center;
             padding-bottom: 20px;
             display: flex;
             flex-direction: column;
             justify-content: center;
         }
         div.advertisement-text p {
             margin: 0;
             font-family: Open Sans;
             font-style: normal;
             font-weight: normal;
             font-size: 10px;
             line-height: 20px;
             color: #999999;
         }
         div.advertisement-banner {
             margin: 0px auto;
         }
         div#div-gpt-ad-billboard-placeholder {
             width: 996px;
             margin: 0 auto;
             background: #F5F5F5;
             padding-bottom: unset !important;
             min-height: 200px;
         }
         div#div-gpt-ad-lb-placeholder {
             background: #F5F5F5;
             padding-bottom: unset !important;
             min-height: 280px;
         }
         .faq-section{
             max-width:1200px;
             margin:50px auto;
             padding:40px 20px;
             position:relative;
             background-color: rgba(0, 0, 0, 0.1);
             backdrop-filter: blur(25px);
             border-radius: 20px;
             }
         
         .faq-section::before{
             content:"";
             position:absolute;
             top:0;left:50%;
             transform:translateX(-50%);
             width:80%;
             height:2px;
             background:linear-gradient(90deg,transparent,#b38f00,transparent)
             }
             
         .faq-section h2{
             text-align:center;
             font-size:34px;font-weight:700;
             margin-bottom:50px;
             background: linear-gradient(135deg, #b38f00, #b38f00, #b38f00);
             -webkit-background-clip:text;
             -webkit-text-fill-color:transparent;
             background-clip:text;
             font-family:"Poppins",sans-serif;letter-spacing:1px
         }
         
         .faq-container{
             display:flex;
             flex-direction:column;
             gap:25px
         }
         
         .faq-item{
             background:linear-gradient(145deg,#0a0a0a,#1a1a1a);
             border:2px solid #000000;
             border-radius:20px;overflow:hidden;
             transition:all .4s ease;box-shadow:0 5px 20px rgba(0,0,0,0.5)
         }
         
         .faq-item:hover{
             border-color:#000000;
             transform:translateX(10px);
             box-shadow:0 12px 35px #000000
         }
 
         .faq-question{width:100%;
             padding:28px 35px;background:transparent;
             color:#ffffff;
             font-size:18px;
             font-weight:600;
             text-align:left;
             border:none;cursor:pointer;
             display:flex;
             justify-content:space-between;
             align-items:center;
             font-family:"Poppins",sans-serif;
             transition:all .3s ease
         }
         
         .faq-question:hover{
             color:#b38f00
         }
         
         .faq-question::after{
             content:'+';
             font-size:32px;
             font-weight:300;
             transition:all .4s ease;
             color:#b38f00;
             width:40px;
             height:40px;
             display:flex;
             align-items:center;
             justify-content:center;
             border:2px solid #000000;border-radius:50%;
             background:rgba(0, 0, 0, 0.1)
         }
         
         .faq-item.active .faq-question::after{
             transform:rotate(135deg);
             background:linear-gradient(135deg#997a00#997a00);
             color:#000;border-color:transparent
         }
         
         .faq-answer{
             max-height:0;
             overflow:hidden;
             transition:max-height .5s ease,padding .5s ease;
             background:linear-gradient(180deg,rgba(253,228,4,0.05),transparent);
             padding:0 35px
         }
         
         .faq-item.active .faq-answer{
             max-height:800px;padding:30px 35px;
             border-top:1px solid rgba(253, 4, 4, 0.3)
         }
         
         .faq-answer p{
             color:#e0e0e0;
             font-size:16px;
             line-height:2;
             margin:0;
             font-family:"Poppins",sans-serif
         }
 
         @media
             (max-width:768px)
         {
         
         .faq-section
             {padding:30px 15px}
         
         .faq-section h2
             {font-size:26px}
         
         .faq-question
             {font-size:16px;
             padding:22px 25px}
         
         .faq-question::after
             {width:35px;
             height:35px;
             font-size:28px}
         
         .faq-answer
             {padding:0 25px}
         
         .faq-item.active .faq-answer
             {padding:25px}
         
         .faq-item:hover
             {transform:translateX(5px)}
             }

             /* === TITLE MATCH COLOR WITH FAQ === */
.cok-faq-title {
  text-align: center;
  color: #ff0000;
  font-size: 32px;
  margin-top: 25px;
  margin-bottom: 25px;
  font-weight: 800;
  font-family: "Segoe UI", sans-serif;
  text-shadow: 0 0 12px #000000aa, 0 0 20px #3d3d3d55;
  letter-spacing: 1px;
}

.cok-faq-title2 {
  text-align: center;
  color: #ff0000;
  font-size: 38px;
  margin-top: 25px;
  margin-bottom: 25px;
  font-weight: 800;
  font-family: "Segoe UI", sans-serif;
  text-shadow: 0 0 12px #000000aa, 0 0 20px #3d3d3d55;
  letter-spacing: 1px;
}

.cok-faq-title3 {
  color: #ff0000;
  font-size: 30px;
  margin-top: 15px;
  margin-bottom: 15px;
  font-weight: 800;
  font-family: "Segoe UI", sans-serif;
  text-shadow: 0 0 12px #000000aa, 0 0 20px #3d3d3d55;
  letter-spacing: 1px;
}

/* === FAQ CONTAINER === */
.cok-faq {
  max-width: 1200px;
  margin: 10px auto 40px auto;
  font-family: "Segoe UI", sans-serif;
}

/* === QUESTION BUTTON === */
.cok-faq-q {
    width: 100%;
    padding: 14px;
    background: linear-gradient(270deg, rgb(201, 0, 0) 0%, rgb(253, 35, 35) 21%, rgb(253, 35, 35) 33%, rgb(211, 7, 7) 44%, rgb(215, 9, 9) 60%, rgb(252, 34, 34) 73%, rgb(255, 36, 36) 85%, rrgb(201, 0, 0)100%);
    color: #f90000;
    font-weight: bold;
    border: 1px solid #3d3d3d55;
    border-radius: 20px;
    cursor: pointer;
    text-align: left;
    margin-bottom: 8px;
    transition: .25s ease;
    box-shadow: inset 0 0px 0 rgb(255 202 0);
    font-size: 18px;
}

.cok-faq-q:hover {
  background: #092332;
  box-shadow: 0 0 15px #00000044;
}

/* === ANSWER BOX === */
.cok-faq-a {
  max-height: 0;
  overflow: hidden;
  background: #0f1623;
  color: #e6faff;
  margin-top: -5px;
  border-radius: 0 0 8px 8px;
  padding: 0 14px;
  border-left: 1px solid #00000033;
  border-right: 1px solid #00000033;
  border-bottom: 1px solid #00000033;
  transition: max-height .35s ease, padding .25s ease;
  box-shadow: inset 0 0 10px #00000022;
}

.cok-faq-a.open {
  max-height: 500px;
  padding: 14px;
}

/* === RESPONSIVE === */
@media (max-width: 480px) {
  .cok-faq-title {
    font-size: 26px;
  }
}

            .testimonials {
              background: #201e11;
              color: #eaf2ff;
              font-family: system-ui, -apple-system, Roboto, Arial, sans-serif;
              padding: 32px;
              border-radius: 20px;
            }
            .testimonials h2 {
              text-align: center;
              font-size: 1.8rem;
              margin-bottom: 24px;
              background: linear-gradient(90deg, #c5ad22, #d49d06);
              -webkit-background-clip: text;
              color: transparent;
            }
            .testi-grid {
              display: grid;
              grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
              gap: 20px;
            }
            .testi-card {
              background: #272727;
              border-radius: 16px;
              padding: 20px;
              border: 1px solid #272727;
              transition: 0.3s;
            }
            .testi-card:hover {
              transform: translateY(-4px);
              border-color: #c59a22;
            }
            .testi-head {
              display: flex;
              align-items: center;
              gap: 12px;
              margin-bottom: 10px;
            }
            .avatar {
              width: 50px;
              height: 40px;
              border-radius: 50%;
              background: linear-gradient(135deg, #fd1515, #d40606);
              color: #fff;
              font-weight: 700;
              display: grid;
              place-items: center;
            }
            .name { font-size: 1rem; margin: 0; }
            .meta { font-size: 0.85rem; color: #9ca3af; }
            .quote { font-size: 0.95rem; line-height: 1.6; color: #e5e7eb; }

                .toto80-fixed-footer {
            display: flex;
            justify-content: space-around;
            position: fixed;
            background: linear-gradient(to bottom, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 50%, rgb(0, 0, 0) 100%);
            box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.5), 7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
            outline: none;
            padding: 5px 0;
            box-shadow: 0 0 2px 2px rgb(0, 0, 0);
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 99;
            border-radius: 40px 40px 0px 0px;
            border-style:dashed;
            
        }

        .toto80-fixed-footer a {
            flex-basis: calc((100% - 15px*6)/ 5);
            text-decoration: none;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: #ff0000ff;
            max-width: 75px;
            font-size: 12px;
            font-family: Ubuntu, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        }

        .toto80-fixed-footer a:hover {
            font-weight: bold;
        }

        .toto80-fixed-footer .center {
            transform: scale(1.5) translateY(-5px);
            background: center no-repeat;
            background-size: contain;
            background-color: inherit;
            border-radius: 50%;
        }

        .toto80-fixed-footer img {
            max-width: 20px;
            margin-bottom: 0;
            max-height: 20px;
        }

            .toto80 {
      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, 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, 0.9), rgba(26, 21, 16, 0.85));
      border-radius: 20px;
      overflow: hidden;
      text-align: center;
      animation: rotateScaleIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275), goldPulse 3.5s infinite ease-in-out;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(212, 175, 55, 0.2);
      padding-bottom: 20px;
      border: 1px solid rgba(212, 175, 55, 0.15);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    /* 💛 Emas berdenyut yang mewah */
    @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);
      }
    }

    /* ✨ Shiny diagonal emas yang elegan */
    .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, 0.15);
    }

    .popup-buttons {
      display: flex;
      flex-direction: column;
      gap: 15px;
      padding: 25px 20px;
      position: relative;
      z-index: 3;
    }

    .popup-buttons a {
      width: 100%;
      display: block;
      padding: 18px 0;
      font-size: 16px;
      font-weight: 700;
      border-radius: 50px;
      text-decoration: none;
      text-align: center;
      color: #ffffff;
      background: linear-gradient(135deg, #ff0000, #ff0000);
      box-shadow: 0 10px 20px rgba(162, 55, 212, 0.4);
      transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      position: relative;
      overflow: hidden;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      font-family: 'Montserrat', sans-serif;
    }

    /* Efek hover tombol emas yang mewah */
    .popup-buttons a::before {
      content: "";
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
      );
      transition: left 0.8s;
    }

    .popup-buttons a:hover::before {
      left: 100%;
    }

    .popup-buttons a:hover {
      transform: translateY(-4px);
      box-shadow: 0 15px 25px rgba(128, 55, 212, 0.5);
      background: linear-gradient(135deg, #db9cf4, #a237d4);
    }

    .popup-buttons a:active {
      transform: translateY(1px);
    }

    .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, 0.3);
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    }

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

    .info-table td {
      padding: 12px;
      border-bottom: 1px solid rgba(175, 55, 212, 0.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);
      }
    }

    /* Efek partikel emas */
    .gold-particle {
      position: absolute;
      background: radial-gradient(circle, rgba(183, 0, 255, 0.8) 0%, rgba(175, 55, 212, 0.4) 100%);
      border-radius: 50%;
      pointer-events: none;
      z-index: 1;
      animation: floatGold 10s infinite ease-in-out;
      box-shadow: 0 0 10px rgba(183, 0, 255, 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;
      }
    }

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

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

    .close-btn:hover {
      background: rgb(153, 0, 255);
      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);
    }

    /* Responsif untuk layar kecil */
    @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;
      }
    }