#hebohwin-popup,
#hebohwin-popup * {
    box-sizing: border-box;
}

#hebohwin-popup {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    font-family: Arial, Helvetica, sans-serif;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}

#hebohwin-popup.show {
    opacity: 1;
    visibility: visible;
}

#hebohwin-popup .hw-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at center,
            rgba(212, 175, 55, .14),
            rgba(0, 0, 0, .76) 45%,
            rgba(0, 0, 0, .94) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

#hebohwin-popup .hw-popup-wrap {
    position: relative;
    width: 100%;
    max-width: 430px;
    z-index: 20;
}

/* AURA */
#hebohwin-popup .hw-electric-aura {
    position: absolute;
    z-index: -5;
    top: -65px;
    right: -65px;
    bottom: -65px;
    left: -65px;
    border-radius: 50px;
    background:
        radial-gradient(ellipse at center,
            rgba(255, 226, 70, .30) 0%,
            rgba(212, 175, 55, .16) 38%,
            rgba(212, 175, 55, .06) 58%,
            transparent 75%);
    filter: blur(25px);
    animation: hwAuraPulse 1.5s ease-in-out infinite;
}

@keyframes hwAuraPulse {

    0%,
    100% {
        opacity: .55;
        transform: scale(.97);
    }

    50% {
        opacity: 1;
        transform: scale(1.06);
    }
}

/* ELECTRIC BORDER */
#hebohwin-popup .hw-electric-border {
    position: absolute;
    z-index: -3;
    inset: -12px;
    border-radius: 32px;
    border: 2px solid rgba(255, 219, 55, .5);
    box-shadow:
        0 0 10px rgba(255, 255, 255, .65),
        0 0 22px rgba(255, 220, 55, .65),
        0 0 40px rgba(212, 175, 55, .5),
        inset 0 0 15px rgba(255, 225, 80, .12);
    animation: hwBorderPulse 1.2s infinite;
}

@keyframes hwBorderPulse {

    0%,
    100% {
        opacity: .45;
    }

    30% {
        opacity: 1;
    }

    55% {
        opacity: .6;
    }

    75% {
        opacity: .95;
    }
}

/* PETIR DASAR */
#hebohwin-popup .hw-lightning {
    position: absolute;
    z-index: -2;
    width: 20px;
    height: 190px;
    pointer-events: none;
    opacity: 0;
    background:
        linear-gradient(to bottom,
            transparent 0%,
            #fff 8%,
            #fff4a5 18%,
            #ffd51f 31%,
            #fff 44%,
            #ffc400 58%,
            #fff 72%,
            #d4af37 88%,
            transparent 100%);
    clip-path: polygon(45% 0%,
            100% 0%,
            65% 24%,
            100% 25%,
            48% 51%,
            86% 53%,
            3% 100%,
            35% 63%,
            0% 63%,
            38% 38%,
            5% 37%);
    filter:
        drop-shadow(0 0 4px #fff) drop-shadow(0 0 8px #fff) drop-shadow(0 0 16px #ffd800) drop-shadow(0 0 28px #ffb700) drop-shadow(0 0 50px rgba(212, 175, 55, .95));
    transform-origin: top center;
}

/* POSISI PETIR */
#hebohwin-popup .hw-l1 {
    top: 25px;
    left: -78px;
    height: 230px;
    transform: rotate(-53deg);
    animation: boltA 2.1s infinite;
}

#hebohwin-popup .hw-l2 {
    top: 30px;
    right: -78px;
    height: 230px;
    transform: rotate(53deg);
    animation: boltB 2.5s .2s infinite;
}

#hebohwin-popup .hw-l3 {
    top: 230px;
    left: -105px;
    height: 220px;
    transform: rotate(-88deg);
    animation: boltC 2.7s .35s infinite;
}

#hebohwin-popup .hw-l4 {
    top: 250px;
    right: -105px;
    height: 220px;
    transform: rotate(88deg);
    animation: boltD 2.4s .5s infinite;
}

#hebohwin-popup .hw-l5 {
    bottom: 20px;
    left: -70px;
    height: 215px;
    transform: rotate(-138deg);
    animation: boltE 2.6s .3s infinite;
}

#hebohwin-popup .hw-l6 {
    bottom: 20px;
    right: -70px;
    height: 215px;
    transform: rotate(138deg);
    animation: boltF 2.3s .45s infinite;
}

#hebohwin-popup .hw-l7 {
    top: -80px;
    left: 27%;
    height: 165px;
    width: 15px;
    transform: rotate(-12deg);
    animation: boltG 2.2s .15s infinite;
}

#hebohwin-popup .hw-l8 {
    top: -80px;
    right: 25%;
    height: 165px;
    width: 15px;
    transform: rotate(12deg);
    animation: boltH 2.8s .55s infinite;
}

/* ANIMASI PETIR */
@keyframes boltA {

    0%,
    8%,
    15%,
    100% {
        opacity: 0;
    }

    9% {
        opacity: 1;
    }

    10% {
        opacity: .2;
    }

    11% {
        opacity: 1;
    }

    12% {
        opacity: .2;
    }

    14% {
        opacity: 1;
    }
}

@keyframes boltB {

    0%,
    22%,
    31%,
    100% {
        opacity: 0;
    }

    23% {
        opacity: 1;
    }

    24% {
        opacity: .15;
    }

    26% {
        opacity: 1;
    }

    28% {
        opacity: .3;
    }

    30% {
        opacity: 1;
    }
}

@keyframes boltC {

    0%,
    38%,
    47%,
    100% {
        opacity: 0;
    }

    39% {
        opacity: 1;
    }

    40% {
        opacity: .2;
    }

    42% {
        opacity: 1;
    }

    44% {
        opacity: .25;
    }

    46% {
        opacity: 1;
    }
}

@keyframes boltD {

    0%,
    52%,
    61%,
    100% {
        opacity: 0;
    }

    53% {
        opacity: 1;
    }

    54% {
        opacity: .2;
    }

    56% {
        opacity: 1;
    }

    58% {
        opacity: .3;
    }

    60% {
        opacity: 1;
    }
}

@keyframes boltE {

    0%,
    67%,
    77%,
    100% {
        opacity: 0;
    }

    68% {
        opacity: 1;
    }

    69% {
        opacity: .15;
    }

    71% {
        opacity: 1;
    }

    74% {
        opacity: .25;
    }

    76% {
        opacity: 1;
    }
}

@keyframes boltF {

    0%,
    81%,
    92%,
    100% {
        opacity: 0;
    }

    82% {
        opacity: 1;
    }

    84% {
        opacity: .2;
    }

    86% {
        opacity: 1;
    }

    88% {
        opacity: .2;
    }

    91% {
        opacity: 1;
    }
}

@keyframes boltG {

    0%,
    30%,
    39%,
    100% {
        opacity: 0;
    }

    31% {
        opacity: 1;
    }

    33% {
        opacity: .2;
    }

    35% {
        opacity: 1;
    }

    38% {
        opacity: .4;
    }
}

@keyframes boltH {

    0%,
    60%,
    70%,
    100% {
        opacity: 0;
    }

    61% {
        opacity: 1;
    }

    63% {
        opacity: .2;
    }

    65% {
        opacity: 1;
    }

    69% {
        opacity: .4;
    }
}

/* CARD */
#hebohwin-popup .hw-card {
    position: relative;
    width: 100%;
    padding: 10px;
    border-radius: 22px;
    background:
        linear-gradient(145deg,
            rgba(28, 28, 28, .99),
            rgba(5, 5, 5, .995));
    border: 1px solid rgba(212, 175, 55, .65);
    box-shadow:
        0 35px 90px rgba(0, 0, 0, .95),
        0 0 15px rgba(255, 225, 80, .35),
        0 0 38px rgba(212, 175, 55, .3),
        inset 0 1px 0 rgba(255, 255, 255, .08);
    opacity: 0;
    transform: translateY(-100px) scale(.4);
}

#hebohwin-popup.show .hw-card {
    animation:
        hwEntrance .9s cubic-bezier(.18, .89, .32, 1.25) forwards;
}

@keyframes hwEntrance {
    0% {
        opacity: 0;
        transform: translateY(-130px) scale(.35);
        filter: brightness(3);
    }

    45% {
        opacity: 1;
        transform: translateY(8px) scale(1.05);
        filter: brightness(1.5);
    }

    70% {
        transform: translateY(-3px) scale(.985);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: brightness(1);
    }
}

/* BORDER GOLD */
#hebohwin-popup .hw-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    padding: 1px;
    border-radius: 23px;
    background:
        linear-gradient(135deg,
            #fff7b0,
            #ffd42f,
            #d4af37,
            #654300,
            #ffd94f,
            #fff4ad);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* CLOSE */
#hebohwin-popup .hw-close {
    position: absolute;
    top: -14px;
    right: -14px;
    z-index: 100;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 50%;
    background:
        linear-gradient(145deg,
            #fff17f,
            #d4af37 48%,
            #725000);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    box-shadow:
        0 8px 25px rgba(0, 0, 0, .65),
        0 0 12px #ffd633,
        0 0 25px rgba(212, 175, 55, .7);
    transition: .25s ease;
}

#hebohwin-popup .hw-close:hover {
    transform: rotate(90deg) scale(1.1);
}

/* IMAGE */
#hebohwin-popup .hw-image-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 15px;
    background: #111;
}

#hebohwin-popup .hw-image {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

#hebohwin-popup .hw-image-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 80px;
    background: linear-gradient(to top, rgba(6, 6, 6, 1), transparent);
    pointer-events: none;
}

#hebohwin-popup .hw-image-shine {
    position: absolute;
    top: 0;
    left: -150%;
    width: 60%;
    height: 100%;
    background:
        linear-gradient(110deg,
            transparent,
            rgba(255, 255, 255, .25),
            transparent);
    transform: skewX(-20deg);
    animation: hwImageShine 4.5s infinite;
    pointer-events: none;
}

@keyframes hwImageShine {

    0%,
    55% {
        left: -150%;
    }

    80% {
        left: 160%;
    }

    100% {
        left: 160%;
    }
}

/* CONTENT */
#hebohwin-popup .hw-content {
    padding: 10px 14px 16px;
    text-align: center;
}

#hebohwin-popup .hw-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    padding: 6px 14px;
    border-radius: 50px;
    border: 1px solid rgba(212, 175, 55, .48);
    background: rgba(212, 175, 55, .09);
    color: #f0cf57;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

#hebohwin-popup .hw-title {
    margin: 2px 0 6px;
    font-size: 28px;
    font-weight: 900;
    letter-spacing: .6px;
    background:
        linear-gradient(180deg,
            #fffbd3,
            #f5d65b 35%,
            #d4af37 65%,
            #815800);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

#hebohwin-popup .hw-description {
    max-width: 350px;
    margin: 0 auto 14px;
    color: #e4e4e4;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}

/* BUTTON */
#hebohwin-popup .hw-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
}

#hebohwin-popup .hw-btn {
    position: relative;
    height: 49px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 11px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .7px;
    transition: .25s ease;
}

#hebohwin-popup .hw-btn:hover {
    transform: translateY(-2px);
}

#hebohwin-popup .hw-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-120%);
    background:
        linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, .3),
            transparent);
    transition: transform .55s ease;
}

#hebohwin-popup .hw-btn:hover::before {
    transform: translateX(120%);
}

#hebohwin-popup .hw-btn span {
    position: relative;
    z-index: 2;
}

#hebohwin-popup .hw-daftar {
    color: #111;
    background:
        linear-gradient(135deg,
            #fff294,
            #e4be38 35%,
            #9c6f05 70%,
            #f1d05a);
    box-shadow: 0 8px 22px rgba(212, 175, 55, .25);
}

#hebohwin-popup .hw-login {
    color: #efd05b;
    border: 1px solid rgba(212, 175, 55, .62);
    background:
        linear-gradient(135deg,
            #1d1d1d,
            #070707);
}

/* INFO */
#hebohwin-popup .hw-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    color: #999;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

#hebohwin-popup .hw-status {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #48e17e;
    box-shadow: 0 0 10px rgba(72, 225, 126, .9);
    animation: hwServerPulse 1.4s infinite;
}

@keyframes hwServerPulse {
    50% {
        opacity: .35;
        transform: scale(.75);
    }
}

#hebohwin-popup .hw-divider {
    width: 1px;
    height: 11px;
    background: rgba(255, 255, 255, .18);
}

#hebohwin-popup .hw-footer {
    margin-top: 11px;
    padding-top: 11px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    color: #737373;
    font-size: 9px;
    font-weight: 700;
}

#hebohwin-popup .hw-footer strong {
    color: #d7b64a;
}

/* MOBILE */
@media (max-width: 600px) {
    #hebohwin-popup {
        padding: 28px;
    }

    #hebohwin-popup .hw-popup-wrap {
        max-width: 390px;
    }

    #hebohwin-popup .hw-lightning {
        width: 14px;
        height: 145px;
    }

    #hebohwin-popup .hw-l1 {
        left: -45px;
    }

    #hebohwin-popup .hw-l2 {
        right: -45px;
    }

    #hebohwin-popup .hw-l3 {
        left: -62px;
    }

    #hebohwin-popup .hw-l4 {
        right: -62px;
    }

    #hebohwin-popup .hw-l5 {
        left: -37px;
    }

    #hebohwin-popup .hw-l6 {
        right: -37px;
    }

    #hebohwin-popup .hw-title {
        font-size: 24px;
    }

    #hebohwin-popup .hw-description {
        font-size: 12px;
    }
}

@media (max-width: 430px) {
    #hebohwin-popup {
        padding: 35px 27px;
    }

    #hebohwin-popup .hw-electric-aura {
        top: -40px;
        right: -40px;
        bottom: -40px;
        left: -40px;
    }

    #hebohwin-popup .hw-electric-border {
        inset: -8px;
    }

    #hebohwin-popup .hw-lightning {
        width: 11px;
        height: 115px;
    }

    #hebohwin-popup .hw-l1 {
        left: -28px;
        top: 30px;
    }

    #hebohwin-popup .hw-l2 {
        right: -28px;
        top: 30px;
    }

    #hebohwin-popup .hw-l3 {
        left: -40px;
        top: 205px;
    }

    #hebohwin-popup .hw-l4 {
        right: -40px;
        top: 215px;
    }

    #hebohwin-popup .hw-l5 {
        left: -23px;
        bottom: 25px;
    }

    #hebohwin-popup .hw-l6 {
        right: -23px;
        bottom: 25px;
    }

    #hebohwin-popup .hw-l7,
    #hebohwin-popup .hw-l8 {
        height: 95px;
    }

    #hebohwin-popup .hw-card {
        padding: 7px;
    }

    #hebohwin-popup .hw-close {
        width: 38px;
        height: 38px;
        top: -9px;
        right: -7px;
        font-size: 23px;
    }

    #hebohwin-popup .hw-btn {
        height: 44px;
        font-size: 12px;
    }
}

.faq-box {
    padding: 22px 0;
    border-bottom: 1px solid rgba(212, 175, 55, 0.35);
    transition: all .35s ease;
    position: relative;
}

.faq-box::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 20px;
    width: 4px;
    height: 0%;
    /* Gradasi emas terang ke emas gelap/redup */
    background: linear-gradient(to bottom, #FFD700, #B8860B);
    border-radius: 10px;
    transition: all .35s ease;
    /* Efek cahaya emas */
    box-shadow: 0 0 15px #D4AF37;
}

.faq-box:hover {
    transform: translateX(6px);
}

.faq-box:hover::before {
    height: 70%;
}

.faq-box strong {
    display: block;
    margin-bottom: 12px;
    font-size: 18px;
    font-weight: 800;
    color: #D4AF37;
    letter-spacing: .3px;
    text-shadow: 0 0 12px rgba(212, 175, 55, 0.6);
}

.faq-box p {
    margin: 0;
    font-size: 15.8px;
    line-height: 1.9;
    color: #e5d39d;
}

/* Kilauan emas menyapu area FAQ */
.faq-gold-wrap>section::after {
    content: "";
    position: absolute;
    top: -40%;
    left: -35%;
    width: 22%;
    height: 180%;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, .08), rgba(255, 246, 180, .9), rgba(255, 215, 0, .18), transparent);
    transform: rotate(18deg);
    filter: blur(1px);
    pointer-events: none;
    animation: faqGoldSweep 4.8s linear infinite;
    z-index: 3;
}

.faq-gold-wrap>section>* {
    position: relative;
    z-index: 4;
}

.faq-box::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 0%, transparent 42%, rgba(255, 236, 140, .12) 48%, rgba(255, 255, 220, .55) 50%, rgba(255, 236, 140, .12) 52%, transparent 58%, transparent 100%);
    background-size: 220% 100%;
    opacity: 0;
    pointer-events: none;
}

.faq-box:hover::after {
    opacity: 1;
    animation: faqBoxShine 1.15s ease;
}

.faq-box strong {
    background: linear-gradient(90deg, #9b6b00 0%, #d7a514 24%, #fff0a1 48%, #ffd700 65%, #a86f00 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

@keyframes faqGoldSweep {
    0% {
        left: -35%;
        opacity: 0;
    }

    12% {
        opacity: .95;
    }

    55% {
        opacity: .95;
    }

    100% {
        left: 120%;
        opacity: 0;
    }
}

@keyframes faqBoxShine {
    from {
        background-position: 150% 0;
    }

    to {
        background-position: -80% 0;
    }
}

@media(max-width:768px) {
    section {
        padding: 22px !important;
    }

    h2 {
        font-size: 24px !important;
    }

    .faq-box strong {
        font-size: 16px;
    }

    .faq-box p {
        font-size: 14.5px;
        line-height: 1.8;
    }
}

.goto77-gold-particles{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:1;
}
.goto77-gold-particle{
  position:absolute;
  top:-14px;
  width:var(--size);
  height:var(--size);
  border-radius:50%;
  opacity:0;
  background:radial-gradient(circle at 35% 35%,#fffbd1 0 16%,#ffe76b 25%,#ffd700 48%,#b8860b 76%,transparent 78%);
  box-shadow:0 0 5px #ffd700,0 0 11px rgba(255,215,0,.75);
  animation:goto77GoldFall var(--duration) linear var(--delay) infinite;
}
.goto77-gold-particle:nth-child(3n){
  border-radius:2px;
  transform:rotate(45deg);
}
.goto77-gold-particle:nth-child(4n){
  filter:blur(.35px);
}
@keyframes goto77GoldFall{
  0%{transform:translate3d(0,-20px,0) rotate(0deg) scale(.55);opacity:0}
  8%{opacity:.95}
  45%{transform:translate3d(var(--drift),45vh,0) rotate(190deg) scale(1)}
  90%{opacity:.8}
  100%{transform:translate3d(calc(var(--drift) * -0.35),105vh,0) rotate(390deg) scale(.65);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .goto77-gold-particle{animation:none;display:none}
}