/* =========================================================
   HOT128 — Tema Oriental EMAS TERANG (gold luxury)
   Background: istana emas · kartu bingkai emas tebal membulat
   ========================================================= */
:root{
    --gold-1:#fff3c4; --gold-2:#ffd54a; --gold-3:#f0a81e; --gold-4:#b9700c;
    --red-1:#7a1220; --red-2:#9c1a2b; --red-3:#5c0d18;
    --cream:#fff6df; --txt:#fff6df; --mut:#f0d9a6;
    --ink:#2a0a06;
    --line:rgba(255,213,74,.55); --panel:rgba(70,12,14,.72);
    --green:#3fd08a;
    --serif:'Georgia','Times New Roman',serif;
    --sans:'Segoe UI',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{font-family:var(--sans);color:var(--txt);min-height:100vh;display:flex;justify-content:center;background:#160604}
/* Backdrop desktop: background yang sama (istana emas) di sisi kiri-kanan */
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
    background:linear-gradient(rgba(22,6,4,.62),rgba(22,6,4,.78)),url('../games/bg.webp') center center / cover no-repeat;
    filter:blur(7px);transform:scale(1.08)}
img{display:block}
a{color:inherit}

.stage{
    width:100%;max-width:440px;min-height:100vh;position:relative;overflow:hidden;
    display:flex;flex-direction:column;
    background:
        linear-gradient(180deg, rgba(50,10,8,.72) 0%, rgba(50,10,8,.12) 20%, rgba(40,8,6,.12) 76%, rgba(40,8,6,.82) 100%),
        url('../games/bg.webp') center top / cover no-repeat;
    background-attachment:scroll, fixed;
    box-shadow:0 0 90px rgba(0,0,0,.7), inset 0 0 0 2px rgba(255,213,74,.4);
}

/* Lampion menggantung */
.lanterns{position:absolute;top:0;left:0;right:0;height:0;z-index:2;pointer-events:none}
.lantern{position:absolute;top:-4px;font-size:28px;filter:drop-shadow(0 4px 10px rgba(255,60,40,.55));
    transform-origin:top center;animation:sway 3.6s ease-in-out infinite}
.lantern::before{content:'';position:absolute;top:-12px;left:50%;width:1px;height:12px;background:linear-gradient(var(--gold-3),transparent)}
.lantern.l1{left:18px;animation-delay:.2s}
.lantern.l2{right:18px;top:0;font-size:23px;animation-delay:.9s}
.lantern.l3{left:52%;top:-2px;font-size:19px;opacity:.85;animation-delay:1.4s}
@keyframes sway{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}

/* ---------------- HEADER ---------------- */
.hd{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 12px;position:sticky;top:0;z-index:30;
    background:linear-gradient(180deg, rgba(92,13,24,.96), rgba(92,13,24,.35) 82%, transparent);backdrop-filter:blur(5px)}
.brand{text-decoration:none;display:flex;align-items:center;gap:9px}
.brand-logo{width:34px;height:34px;border-radius:9px;object-fit:cover;border:1.5px solid var(--gold-2);
    box-shadow:0 2px 8px rgba(0,0,0,.45)}
.logo{font-family:var(--serif);font-size:25px;font-weight:900;font-style:italic;letter-spacing:.5px;
    background:linear-gradient(180deg,#fff6df,var(--gold-3));-webkit-background-clip:text;background-clip:text;color:transparent;
    filter:drop-shadow(0 1px 0 #6a1012) drop-shadow(0 2px 8px rgba(240,168,30,.55))}
.logo span{color:#ffcf3f;-webkit-text-fill-color:#ffcf3f}
.hd-right{display:flex;align-items:center;gap:8px}
.hd-cs,.hd-login{text-decoration:none;font-size:12.5px;font-weight:800;padding:8px 15px;border-radius:20px}
.hd-cs{color:var(--gold-1);background:rgba(0,0,0,.32);border:1px solid var(--line)}
.hd-login{color:#7a1220;background:linear-gradient(180deg,var(--gold-1),var(--gold-3));border:1px solid #fff3c4;
    box-shadow:0 3px 10px rgba(0,0,0,.35)}

/* ---------------- MARQUEE ---------------- */
.marquee{display:flex;align-items:center;gap:10px;margin:0 12px;padding:8px 12px;overflow:hidden;position:relative;z-index:5;
    background:linear-gradient(180deg,rgba(156,26,43,.9),rgba(92,13,24,.9));border:1.5px solid var(--gold-3);border-radius:22px;
    box-shadow:0 4px 14px rgba(0,0,0,.35)}
.mq-ic{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;
    background:radial-gradient(circle at 35% 28%,rgba(255,236,150,.28),rgba(0,0,0,.25));border:1.5px solid var(--gold-2)}
.mq-ic .ico{width:16px;height:16px;color:var(--gold-2)}
.mq-track{display:flex;gap:34px;white-space:nowrap;animation:scroll 24s linear infinite}
.mq-item{font-size:12px;color:var(--mut)}
.mq-item b{color:var(--gold-1)}.mq-item em{color:#ffcf3f;font-style:normal;font-weight:800}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------------- SCROLL AREA ---------------- */
.scroll{flex:1;overflow-y:auto;padding:16px 12px 96px;position:relative;z-index:4}
.scroll::-webkit-scrollbar{width:0}

/* ---------------- HERO ---------------- */
.hero{position:relative;border-radius:18px;overflow:hidden;margin-bottom:20px;min-height:204px;display:flex;align-items:center;
    background:linear-gradient(135deg,#8a1216 0%,#5c0d10 60%,#360708 100%);
    border:3px solid var(--gold-2);box-shadow:0 12px 30px rgba(0,0,0,.5), inset 0 0 0 1.5px rgba(255,243,196,.35)}
.hero::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
    background:linear-gradient(100deg, rgba(45,6,8,.96) 0 26%, rgba(45,6,8,.7) 44%, rgba(45,6,8,.22) 62%, rgba(45,6,8,0) 82%)}
/* Lebur area biru kosong di kanan & bawah ke tema merah-emas */
.hero::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
    background:
        linear-gradient(90deg, transparent 40%, rgba(58,7,8,.5) 72%, rgba(74,10,12,.92) 100%),
        linear-gradient(0deg, rgba(45,6,8,.8) 0%, transparent 34%),
        radial-gradient(90% 120% at 100% 30%, rgba(255,150,40,.28), transparent 55%)}
.hero-art{position:absolute;inset:0;z-index:1}
.hero-art img{width:100%;height:100%;object-fit:cover;object-position:58% 22%;
    -webkit-mask-image:linear-gradient(90deg, #000 0 82%, transparent 100%);
    mask-image:linear-gradient(90deg, #000 0 82%, transparent 100%)}
.hero-body{position:relative;z-index:3;max-width:62%;padding:18px 16px}
.hero-tag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.4px;color:#7a1220;margin-bottom:11px;
    padding:4px 11px;border-radius:14px;background:linear-gradient(180deg,var(--gold-1),var(--gold-3));box-shadow:0 2px 8px rgba(0,0,0,.35)}
.hero h1,.hero .hero-title{font-family:var(--serif);font-size:28px;line-height:1.02;font-weight:900;font-style:italic;color:#fff;margin:0;
    text-shadow:0 2px 0 #5c0d10,0 3px 10px rgba(0,0,0,.6)}
.hero h1 span,.hero .hero-title span{display:block;color:#ffdd57;text-shadow:0 2px 0 #6a0e12,0 0 12px rgba(255,205,60,.45),0 3px 8px rgba(0,0,0,.5)}
/* Heading khusus screen-reader (aksesibilitas + SEO) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hero-jp{margin:13px 0 15px;display:flex;flex-direction:column;line-height:1}
.hero-jp small{font-size:9px;letter-spacing:2px;color:var(--gold-1)}
.hero-jp b{font-family:'Consolas',monospace;font-size:20px;font-weight:800;color:#fff3c4;text-shadow:0 0 18px rgba(255,207,63,.7);margin-top:4px}
.hero-cta{display:flex;gap:8px;flex-wrap:wrap}
.hero-shine{display:none}

/* ---------------- BUTTONS ---------------- */
.btn{text-decoration:none;cursor:pointer;border:none;font-weight:900;font-size:12.5px;letter-spacing:.3px;
    padding:11px 17px;border-radius:22px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:.18s}
.btn-gold{color:#7a1220;background:linear-gradient(180deg,#fff3c4,#f0a81e);border:1.5px solid #fff3c4;
    box-shadow:0 5px 16px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.6);animation:pulse 2.2s ease-in-out infinite}
.btn-gold:hover{filter:brightness(1.06)}
.btn-line{color:var(--gold-1);background:rgba(0,0,0,.3);border:1.5px solid var(--gold-3)}
.btn-line:hover{background:rgba(240,168,30,.16)}
.btn-sm{padding:8px 14px;font-size:12px;animation:none}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}

/* ---------------- SECTION HEAD ---------------- */
.sec-head{display:flex;align-items:center;justify-content:space-between;margin:26px 0 13px}
.sec-head h2{font-family:var(--serif);font-size:18px;font-weight:800;color:#fff3c4;display:flex;align-items:center;gap:8px;
    text-shadow:0 1px 0 #5c0d10,0 2px 8px rgba(0,0,0,.6)}
.sec-ic{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.sec-ic .ico{width:20px;height:20px;color:var(--gold-2);filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.see-all{font-size:12px;color:var(--gold-1);cursor:pointer;text-decoration:none;border-bottom:1px solid var(--line);
    text-shadow:0 1px 4px rgba(0,0,0,.6)}

/* ---------------- GRID GAME (bingkai emas tebal, nama di atas gambar) ---------------- */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.card{position:relative;border-radius:16px;overflow:hidden;cursor:pointer;background:#5c0d10;
    border:3px solid var(--gold-2);box-shadow:0 6px 16px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,243,196,.35);
    transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s, border-color .22s;animation:rise .5s both}
.card.hide{display:none}
.card:hover{transform:translateY(-6px);border-color:#fff3c4;box-shadow:0 16px 32px rgba(0,0,0,.55),0 0 24px rgba(255,207,63,.55)}
.card-art{position:relative;aspect-ratio:218/361;overflow:hidden}
.card-art img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.card:hover .card-art img{transform:scale(1.07)}
.card-glow{display:none}
.card-art::after{content:'';position:absolute;top:0;left:-70%;width:50%;height:100%;pointer-events:none;
    background:linear-gradient(105deg,transparent,rgba(255,245,205,.45),transparent);transform:skewX(-18deg)}
.card:hover .card-art::after{animation:sweep .7s ease}
@keyframes sweep{to{left:130%}}
.badge{position:absolute;top:0;left:0;font-size:11px;font-weight:900;letter-spacing:.5px;padding:4px 12px;color:#fff;z-index:4;
    border-bottom-right-radius:12px;background:linear-gradient(135deg,#ff5e34,#c1160f);box-shadow:0 2px 8px rgba(0,0,0,.4)}
.badge-new{background:linear-gradient(135deg,#37e0a0,#12a877);color:#053}
/* nama + jackpot menumpuk di bawah gambar */
.card-info{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:16px 10px 9px;
    background:linear-gradient(180deg,transparent,rgba(28,4,5,.5) 40%,rgba(28,4,5,.92))}
.card-name{font-family:var(--serif);font-size:15px;font-weight:900;color:#fff3c4;line-height:1.05;
    text-shadow:0 2px 0 #7a1220,0 3px 8px rgba(0,0,0,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-jp{display:flex;align-items:center;gap:5px;margin-top:4px}
.card-jp i{color:#ffcf3f;font-style:normal;font-size:11px}
.card-jp span{font-family:'Consolas',monospace;font-size:11.5px;font-weight:700;color:#ffe9a8;text-shadow:0 1px 3px rgba(0,0,0,.8)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.card:nth-child(2){animation-delay:.05s}.card:nth-child(3){animation-delay:.1s}
.card:nth-child(4){animation-delay:.15s}.card:nth-child(5){animation-delay:.2s}.card:nth-child(6){animation-delay:.25s}

/* ---------------- PROMO GRID ---------------- */
.promo-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.promo-card{text-align:center;padding:18px 10px 15px;border-radius:16px;
    background:linear-gradient(180deg,rgba(156,26,43,.85),rgba(92,13,24,.9));border:2.5px solid var(--gold-2);
    box-shadow:0 5px 14px rgba(0,0,0,.4)}
.ico{width:24px;height:24px;display:block}
.promo-ic{width:52px;height:52px;margin:0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#ffe08a;
    background:radial-gradient(circle at 35% 28%,rgba(255,236,150,.28),rgba(0,0,0,.28));border:2px solid var(--gold-2);
    box-shadow:inset 0 0 10px rgba(0,0,0,.4),0 3px 8px rgba(0,0,0,.35)}
.promo-ic .ico{width:26px;height:26px}
.promo-val{font-family:var(--serif);font-size:24px;font-weight:900;margin:8px 0 2px;
    background:linear-gradient(180deg,var(--gold-1),var(--gold-3));-webkit-background-clip:text;background-clip:text;color:transparent}
.promo-card .promo-title{font-size:12px;font-weight:700;color:var(--cream)}

/* ---------------- STEPS ---------------- */
.steps{display:flex;flex-direction:column;gap:10px}
.step{display:flex;align-items:center;gap:14px;padding:13px 14px;border-radius:14px;
    background:linear-gradient(180deg,rgba(156,26,43,.72),rgba(92,13,24,.8));border:2px solid var(--gold-3)}
.step-no{position:relative;flex:0 0 auto;width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;
    color:#7a1220;border:2px solid #fff3c4;
    background:linear-gradient(180deg,var(--gold-1),var(--gold-3));box-shadow:0 4px 12px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.5)}
.step-no .ico{width:24px;height:24px}
.step-num{position:absolute;top:-7px;left:-7px;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-family:var(--serif);font-weight:900;font-size:12px;color:#fff;background:linear-gradient(180deg,#c1160f,#8a0f0a);
    border:1.5px solid #fff3c4;box-shadow:0 2px 6px rgba(0,0,0,.5)}
.step-title{font-family:var(--serif);font-size:14px;font-weight:800;color:#fff3c4}
.step-desc{font-size:12px;color:var(--mut);margin-top:2px}

/* ---------------- SLIDER ---------------- */
.slider{position:relative}
.slider-track{scroll-behavior:smooth;scroll-snap-type:x mandatory}
.slider-track>*{scroll-snap-align:start}
.sl-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:6;cursor:pointer;
    width:32px;height:32px;border-radius:50%;border:1.5px solid #fff3c4;color:#7a1220;font-size:19px;font-weight:900;line-height:1;
    display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,var(--gold-1),var(--gold-3));
    box-shadow:0 4px 12px rgba(0,0,0,.55);opacity:.97}
.sl-arrow:active{transform:translateY(-50%) scale(.92)}
.sl-prev{left:-6px}.sl-next{right:-6px}
.slider-dots{display:flex;justify-content:center;gap:6px;margin-top:11px}
.slider-dots .dot{width:7px;height:7px;padding:0;border:none;border-radius:50%;cursor:pointer;background:rgba(255,213,74,.35);transition:.2s}
.slider-dots .dot.on{width:20px;border-radius:4px;background:linear-gradient(90deg,var(--gold-1),var(--gold-3))}

/* ---------------- TESTIMONI ---------------- */
.testi-row{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px}
.testi-row::-webkit-scrollbar{height:0}
.testi{flex:0 0 78%;padding:15px;border-radius:14px;
    background:linear-gradient(180deg,rgba(156,26,43,.78),rgba(92,13,24,.85));border:2px solid var(--gold-3)}
.testi-top{display:flex;align-items:center;gap:9px}
.testi-av{width:37px;height:37px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;color:#7a1220;
    background:linear-gradient(135deg,var(--gold-1),var(--gold-3));border:2px solid #fff3c4}
.testi-name{font-size:13px;font-weight:800;color:#fff3c4}
.testi-city{font-size:10px;color:var(--mut)}
.testi-stars{margin-left:auto;color:#ffcf3f;font-size:12px;letter-spacing:1px}
.testi-text{font-size:12.5px;color:var(--cream);line-height:1.5;margin:11px 0}
.testi-win{display:inline-block;font-size:11px;font-weight:800;color:var(--green);
    background:rgba(63,208,138,.14);border:1px solid rgba(63,208,138,.4);padding:3px 10px;border-radius:12px}

/* ---------------- ABOUT MINI ---------------- */
.about-mini{padding:17px;border-radius:14px;background:linear-gradient(180deg,rgba(156,26,43,.7),rgba(92,13,24,.8));border:2px solid var(--gold-3)}
.about-mini p{font-size:13px;color:var(--cream);line-height:1.55}
.about-points{display:flex;gap:8px;margin-top:13px;flex-wrap:wrap}
.ap{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:#fff3c4;
    background:rgba(0,0,0,.26);border:1px solid var(--line);padding:7px 11px;border-radius:12px}
.ap .ico{width:17px;height:17px;color:#ffd54a;flex:0 0 auto}

/* ---------------- NEWS STRIP ---------------- */
.news-strip{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px}
.news-strip::-webkit-scrollbar{height:0}
.news-mini{flex:0 0 66%;text-decoration:none;color:var(--txt);border-radius:14px;overflow:hidden;background:#5c0d10;border:2.5px solid var(--gold-2)}
.news-mini-img{position:relative;aspect-ratio:16/9;overflow:hidden}
.news-mini-img img{width:100%;height:100%;object-fit:cover}
.news-mini-body{padding:9px 11px}
.news-mini-title{font-size:12.5px;font-weight:700;color:var(--cream);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.news-mini-date{font-size:10px;color:var(--mut);margin-top:5px}
.news-tag{position:absolute;top:0;left:0;font-size:10px;font-weight:800;color:#7a1220;padding:3px 10px;border-bottom-right-radius:10px;
    background:linear-gradient(135deg,var(--gold-1),var(--gold-3))}

/* ---------------- FOOTER ---------------- */
.footer{margin-top:30px;padding:24px 8px 8px;text-align:center;border-top:1.5px solid var(--gold-3);position:relative}
.footer::before{content:'❁';position:absolute;top:-13px;left:50%;transform:translateX(-50%);color:var(--gold-2);background:#3a0a08;padding:0 10px;font-size:15px}
.ft-desc{font-size:11.5px;color:var(--mut);margin:10px 0 13px;line-height:1.5}
.ft-links{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.ft-links a{color:var(--gold-1);text-decoration:none;font-size:12.5px;font-weight:600}
.ft-cs a{text-decoration:none;color:var(--green);font-size:12px;font-weight:700}
.ft-age{margin:12px 0 6px;font-size:11px;color:#ff9a6b;font-weight:700}
.ft-copy{font-size:10.5px;color:#c99}

/* ---------------- FLOATING WA ---------------- */
.wa-float{position:fixed;right:14px;bottom:82px;width:52px;height:52px;border-radius:50%;z-index:40;
    display:flex;align-items:center;justify-content:center;font-size:24px;text-decoration:none;
    background:linear-gradient(180deg,#37d94a,#1fa32f);box-shadow:0 6px 20px rgba(31,163,47,.55);border:2px solid #b6ffc4;
    animation:waBounce 2.4s ease-in-out infinite}
@media(min-width:441px){.wa-float{right:calc(50% - 220px + 14px)}}
@keyframes waBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* ---------------- BOTTOM NAV ---------------- */
.tabbar{position:sticky;bottom:0;display:flex;align-items:flex-end;justify-content:space-around;padding:8px 10px 12px;z-index:30;
    background:linear-gradient(0deg,#5c0d18,rgba(92,13,24,.92) 70%,transparent);border-top:2.5px solid var(--gold-2);box-shadow:0 -6px 20px rgba(0,0,0,.45)}
.nav{background:none;border:none;cursor:pointer;color:var(--mut);font-size:10px;font-weight:600;text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:4px}
.nav-ic{display:flex;align-items:center;justify-content:center}
.nav-ic .ico{width:23px;height:23px;color:#ffcf3f}
.nav.active{color:#fff3c4}
.nav.active .nav-ic .ico{color:#fff3c4;filter:drop-shadow(0 0 6px rgba(255,207,63,.7))}
.nav-mid{margin-top:-24px}
.mid-ic{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:50%;color:#7a1220;
    background:linear-gradient(180deg,var(--gold-1),var(--gold-3));border:3px solid #9c1a2b;box-shadow:0 6px 20px rgba(240,168,30,.6),inset 0 2px 4px rgba(255,255,255,.5)}
.mid-ic .ico{width:27px;height:27px;color:#7a1220}

/* ================= HALAMAN DALAM ================= */
.page-hero{text-align:center;padding:20px 10px 22px;position:relative}
.page-hero h1{font-family:var(--serif);font-size:25px;font-weight:900;color:#fff3c4;text-shadow:0 2px 8px rgba(0,0,0,.6);
    display:flex;align-items:center;justify-content:center;gap:9px}
.page-ic{display:inline-flex}.page-ic .ico{width:26px;height:26px;color:var(--gold-2);filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
.page-hero p{font-size:13px;color:var(--mut);margin-top:7px}
.page-hero::after{content:'❖ ❖ ❖';display:block;margin-top:12px;color:var(--gold-2);font-size:11px;letter-spacing:6px}
.back-link{display:inline-block;margin:4px 0 14px;color:#fff3c4;text-decoration:none;font-size:13px;font-weight:700}

.promo-list{display:flex;flex-direction:column;gap:12px}
.promo-long{display:flex;gap:14px;padding:15px;border-radius:14px;
    background:linear-gradient(180deg,rgba(156,26,43,.82),rgba(92,13,24,.88));border:2.5px solid var(--gold-2);box-shadow:0 5px 14px rgba(0,0,0,.4)}
.promo-long-ic{flex:0 0 auto;width:54px;height:54px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#ffe08a;
    background:radial-gradient(circle at 35% 28%,rgba(255,236,150,.25),rgba(0,0,0,.3));border:1.5px solid var(--gold-2)}
.promo-long-ic .ico{width:28px;height:28px}
.promo-long-body{flex:1}
.promo-long-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.promo-long-title{font-family:var(--serif);font-size:15px;font-weight:800;color:#fff3c4}
.promo-long-val{font-family:var(--serif);font-size:21px;font-weight:900;color:#ffcf3f}
.promo-long-desc{font-size:12px;color:var(--mut);line-height:1.45;margin:6px 0 10px}

.news-list{display:flex;flex-direction:column;gap:14px}
.news-card{display:flex;gap:12px;text-decoration:none;color:var(--txt);padding:10px;border-radius:14px;
    background:linear-gradient(180deg,rgba(156,26,43,.7),rgba(92,13,24,.8));border:2.5px solid var(--gold-2);transition:.2s}
.news-card:hover{border-color:#fff3c4;box-shadow:0 0 18px rgba(255,207,63,.4)}
.news-card-img{position:relative;flex:0 0 112px;height:88px;border-radius:10px;overflow:hidden;border:1.5px solid var(--gold-3)}
.news-card-img img{width:100%;height:100%;object-fit:cover}
.news-card-body{flex:1;min-width:0}
.news-card-date{font-size:10px;color:var(--mut)}
.news-card-title{font-family:var(--serif);font-size:14px;font-weight:800;color:#fff3c4;line-height:1.3;margin:3px 0 4px}
.news-card-exc{font-size:11.5px;color:var(--mut);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.news-card-more{display:inline-block;margin-top:6px;font-size:11px;font-weight:700;color:#ffcf3f}

.article{background:linear-gradient(180deg,rgba(58,10,12,.78),rgba(40,6,8,.85));border:1px solid var(--line);
    border-radius:16px;padding:12px 14px 20px;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.article-img{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:16/9;margin-bottom:14px;border:3px solid var(--gold-2)}
.article-img img{width:100%;height:100%;object-fit:cover}
.article-title{font-family:var(--serif);font-size:23px;font-weight:900;color:#fff3c4;line-height:1.25;margin:4px 0 10px}
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:11.5px;color:var(--mut);
    padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.article-body p{font-size:14px;color:var(--cream);line-height:1.75;margin-bottom:14px}
.article-h{font-family:var(--serif);font-size:17px;font-weight:800;color:#ffd54a;margin:22px 0 10px;
    padding-left:12px;border-left:3px solid var(--gold-3);text-shadow:0 1px 4px rgba(0,0,0,.5)}
.article-list{margin:0 0 16px;padding-left:4px;list-style:none;display:flex;flex-direction:column;gap:9px;counter-reset:li}
.article-list li{position:relative;padding-left:28px;font-size:13.5px;color:var(--cream);line-height:1.55}
.article-list li::before{content:'◆';position:absolute;left:4px;top:1px;color:var(--gold-2);font-size:11px}
.article-ol{counter-reset:li}
.article-ol li::before{content:counter(li);counter-increment:li;left:0;top:0;width:20px;height:20px;font-size:11px;font-weight:800;color:#7a1220;
    display:flex;align-items:center;justify-content:center;border-radius:50%;background:linear-gradient(180deg,var(--gold-1),var(--gold-3))}
.article-ol li{padding-left:30px}
.article-note{margin:18px 0 8px;padding:13px 15px 13px 16px;border-radius:10px;font-size:12.5px;line-height:1.55;color:var(--cream);
    background:linear-gradient(180deg,rgba(156,26,43,.5),rgba(92,13,24,.6));border:1px solid var(--gold-3);border-left:4px solid var(--gold-2)}
.article-note::before{content:'⚠ ';color:var(--gold-2);font-weight:800}

.about-full .about-intro{font-size:14px;color:var(--cream);line-height:1.6;text-align:center;margin-bottom:18px}
.about-cards{display:flex;flex-direction:column;gap:12px}
.about-card{text-align:center;padding:19px 14px;border-radius:14px;background:linear-gradient(180deg,rgba(156,26,43,.72),rgba(92,13,24,.82));border:2.5px solid var(--gold-2)}
.about-card-ic{width:58px;height:58px;margin:0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#ffe08a;
    background:radial-gradient(circle at 35% 28%,rgba(255,236,150,.28),rgba(0,0,0,.28));border:2px solid var(--gold-2);
    box-shadow:inset 0 0 10px rgba(0,0,0,.4),0 3px 8px rgba(0,0,0,.35)}
.about-card-ic .ico{width:29px;height:29px}
.about-card-title{font-family:var(--serif);font-size:15px;font-weight:800;color:#fff3c4;margin:8px 0 4px}
.about-card-desc{font-size:12.5px;color:var(--mut);line-height:1.45}
.about-cta{text-align:center;margin-top:22px;padding:22px;border-radius:16px;
    background:radial-gradient(80% 120% at 50% 0%,rgba(255,160,40,.35),transparent 60%),linear-gradient(135deg,#b8321a,#5c0d10);border:3px solid var(--gold-2)}
.about-cta h2{font-family:var(--serif);font-size:19px;font-weight:900;color:#fff3c4;margin-bottom:14px}
.about-cta .hero-cta{justify-content:center}

@media(min-width:441px){.stage{margin:0 auto}}
/* Perbesar tampilan di layar lebar (mobile tetap apa adanya) */
@media(min-width:768px) and (max-width:1199px){.stage{zoom:1.22;min-height:0}}
@media(min-width:1200px){.stage{zoom:1.45;min-height:0}}

/* ================= TOMBOL GIFT MELAYANG ================= */
.gift-float{position:fixed;right:14px;bottom:144px;width:50px;height:50px;border-radius:50%;z-index:40;cursor:pointer;border:2px solid #fff3c4;
    display:flex;align-items:center;justify-content:center;font-size:23px;color:#7a1220;
    background:linear-gradient(180deg,#ff9de0,#c81e8f);box-shadow:0 6px 18px rgba(200,30,143,.55);animation:waBounce 2.4s ease-in-out infinite .4s}
.gift-float span{filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
@media(min-width:441px){.gift-float{right:calc(50% - 220px + 14px)}}

/* ================= POP-UP WELCOME BONUS ================= */
.wb-overlay{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;
    background:rgba(10,2,6,.72);backdrop-filter:blur(3px);opacity:0;transition:opacity .25s}
.wb-overlay.show{opacity:1}
.wb-overlay[hidden]{display:none}
.wb-img{position:relative;width:100%;max-width:360px;transform:translateY(18px) scale(.96);transition:transform .28s cubic-bezier(.2,.9,.3,1.2)}
.wb-overlay.show .wb-img{transform:translateY(0) scale(1)}
.wb-imglink{display:block}
.wb-imglink img{width:100%;height:auto;max-height:84vh;object-fit:contain;border-radius:18px;
    filter:drop-shadow(0 18px 48px rgba(0,0,0,.6))}
.wb-title{text-align:center;font-family:var(--serif);font-size:34px;font-weight:900;font-style:italic;color:#ffd54a;
    letter-spacing:.5px;text-shadow:0 2px 0 #a8145f,0 4px 0 #7a0e46,0 6px 14px rgba(0,0,0,.6);margin-bottom:-6px;position:relative;z-index:2}
.wb-close{position:absolute;top:-6px;right:-6px;z-index:5;width:38px;height:38px;border-radius:50%;cursor:pointer;
    border:2px solid #fff;background:radial-gradient(circle at 35% 30%,#ff6a6a,#d61f2b);color:#fff;font-size:18px;font-weight:900;
    box-shadow:0 4px 12px rgba(0,0,0,.5)}
.wb-card{position:relative;margin-top:14px;padding:22px 20px 24px;border-radius:26px;overflow:hidden;
    background:radial-gradient(120% 90% at 50% 0%,#ff5fc4,#c81e8f 55%,#8a0f63 100%);
    border:3px solid #ffd54a;box-shadow:0 18px 48px rgba(0,0,0,.6),inset 0 0 0 2px rgba(255,255,255,.15),inset 0 0 40px rgba(0,0,0,.25)}
.wb-timer{display:flex;align-items:center;justify-content:center;gap:6px;margin:0 auto 12px;width:max-content;
    background:rgba(0,0,0,.32);border:1.5px solid rgba(255,255,255,.35);border-radius:20px;padding:6px 15px;font-size:13px;font-weight:700;color:#fff}
.wb-timer-ic{display:flex}.wb-timer-ic .ico{width:15px;height:15px;color:#8ff0ff}
.wb-timer b{color:#8ff0ff;font-family:'Consolas',monospace;letter-spacing:.5px}
.wb-amountwrap{position:relative;display:flex;align-items:center;justify-content:center;min-height:64px}
.wb-rays{position:absolute;inset:-30px 0;z-index:0;pointer-events:none;opacity:.5;
    background:repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,240,180,.55) 0deg 8deg, transparent 8deg 20deg);
    -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 0%, transparent 68%);
    mask-image:radial-gradient(circle at 50% 50%, #000 0%, transparent 68%);animation:spin 18s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.wb-amountrow{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:10px}
.wb-badge{flex:0 0 auto;font-size:14px;font-weight:900;color:#fff;padding:5px 12px 5px 8px;position:relative;
    background:linear-gradient(180deg,#a24bff,#6a1fd0);border-radius:6px;box-shadow:0 3px 8px rgba(0,0,0,.4)}
.wb-badge::after{content:'';position:absolute;left:-9px;top:50%;transform:translateY(-50%);border:9px solid transparent;border-right-color:#8a34e6}
.wb-total{font-family:var(--serif);font-size:40px;font-weight:900;line-height:1;color:#ffe24a;white-space:nowrap;
    text-shadow:0 2px 0 #a8145f,0 4px 0 #7a0e46,0 6px 16px rgba(0,0,0,.5)}
.wb-split{text-align:center;font-size:19px;font-weight:800;color:#fff;margin-top:8px;
    padding-top:8px;border-top:1px solid rgba(255,255,255,.3);text-shadow:0 2px 5px rgba(0,0,0,.4)}
.wb-coins{position:relative;margin:8px 0 18px;display:flex;align-items:center;justify-content:center}
.wb-coinart{width:88%;height:auto;filter:drop-shadow(0 8px 12px rgba(0,0,0,.45))}
.wb-coinart .spk{transform-box:fill-box;transform-origin:center;animation:twinkle 1.6s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.1)}}
.wb-claim{display:block;text-align:center;text-decoration:none;font-size:20px;font-weight:900;letter-spacing:.5px;color:#0a5c33;
    padding:14px;border-radius:14px;background:linear-gradient(180deg,#7dffb0,#22c46e);border:2px solid #d6ffe6;
    box-shadow:0 6px 16px rgba(34,196,110,.5),inset 0 1px 0 rgba(255,255,255,.6);animation:pulse 1.8s ease-in-out infinite;
    text-shadow:0 1px 0 rgba(255,255,255,.4)}
.wb-claim:hover{filter:brightness(1.05)}