/* ===========================
   APOCALYPSE / KIAMAT THEME
=========================== */

/* Background halaman */
body{
    background:
    radial-gradient(circle at top,rgba(255,50,0,.18),transparent 35%),
    radial-gradient(circle at bottom,rgba(120,0,0,.25),transparent 55%),
    linear-gradient(180deg,#040404 0%,#130000 35%,#230000 65%,#060606 100%);
    color:#f5f5f5;
    overflow-x:hidden;
}

/* Bara api di background */
body:before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-2;

    background:
    radial-gradient(circle at 15% 20%,rgba(255,60,0,.18),transparent 20%),
    radial-gradient(circle at 85% 75%,rgba(255,120,0,.12),transparent 24%),
    radial-gradient(circle at 60% 15%,rgba(255,0,0,.12),transparent 18%);

    animation:lavaGlow 8s ease-in-out infinite alternate;
}

/* Asap tipis */
body:after{
    content:"";
    position:fixed;
    inset:-20%;
    pointer-events:none;
    z-index:-1;

    background:
    repeating-radial-gradient(circle at center,
    rgba(255,255,255,.015) 0 3px,
    transparent 3px 18px);

    opacity:.35;
    animation:smokeMove 40s linear infinite;
}

/* ===========================
   MENU
=========================== */

.nv00-gnb-v4__l0-menu-text,
.nv00-gnb-v4__l1-menu-text,
.nv00-gnb-v4__l1-featured-link,
.nv00-gnb-v4__l1-featured-title{

    color:#fff;

    font-size:14.5px;

    line-height:1.45;

    font-weight:700;

    letter-spacing:.4px;

    text-shadow:
    0 0 5px rgba(255,80,0,.8),
    0 0 12px rgba(255,0,0,.6),
    0 0 25px rgba(255,30,0,.35);

    transition:.35s;
}

/* Hover seperti bara api */
.nv00-gnb-v4__l0-menu-text:hover,
.nv00-gnb-v4__l1-menu-text:hover,
.nv00-gnb-v4__l1-featured-link:hover,
.nv00-gnb-v4__l1-featured-title:hover{

    color:#ffd38a;

    text-shadow:
    0 0 8px #ff9900,
    0 0 20px #ff3c00,
    0 0 40px #ff0000;

    transform:translateY(-1px);
}

/* Card menu */
.nv00-gnb-v4__menu,
.nv00-gnb-v4__submenu,
.nv00-gnb-v4__drawer{

    background:
    linear-gradient(180deg,
    rgba(12,12,12,.98),
    rgba(35,0,0,.96));

    border:1px solid rgba(255,70,0,.35);

    box-shadow:
    0 0 18px rgba(255,40,0,.18),
    inset 0 0 18px rgba(255,80,0,.06);
}

/* ===========================
   MOBILE
=========================== */

@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;

}

}

/* ===========================
   ANIMATION
=========================== */

@keyframes lavaGlow{

0%{
filter:brightness(.9);
transform:scale(1);
}

50%{
filter:brightness(1.12);
}

100%{
filter:brightness(.95);
transform:scale(1.03);
}

}

@keyframes smokeMove{

0%{
transform:translateY(0) rotate(0deg);
}

100%{
transform:translateY(-120px) rotate(360deg);
}

}


/* ==========================================
   APOCALYPSE / KIAMAT BREADCRUMB STYLE
========================================== */

.breadcrumb{

    position:relative;
    overflow:hidden;

    width:100%;
    margin:25px auto;
    padding:14px 20px;

    border-radius:16px;

    background:
    radial-gradient(circle at 20% 15%,rgba(255,70,0,.22),transparent 30%),
    radial-gradient(circle at 85% 0%,rgba(255,0,0,.18),transparent 38%),
    radial-gradient(circle at 50% 100%,rgba(120,20,0,.35),transparent 65%),
    linear-gradient(
        160deg,
        #040404 0%,
        #170000 30%,
        #2b0500 65%,
        #060606 100%
    );

    border:1px solid rgba(255,80,0,.35);

    box-shadow:
    0 12px 35px rgba(0,0,0,.85),
    0 0 25px rgba(255,60,0,.22),
    inset 0 0 30px rgba(255,80,0,.08);

}

/* Cahaya Lava */

.breadcrumb::before{

    content:"";
    position:absolute;
    inset:-30%;

    background:
    linear-gradient(
        120deg,
        transparent 35%,
        rgba(255,120,0,.22) 48%,
        rgba(255,40,0,.3) 52%,
        transparent 65%
    );

    transform:translateX(-180%) skewX(-25deg);

    animation:lavaFlow 9s linear infinite;

}

/* Asap & Bara */

.breadcrumb::after{

    content:"";
    position:absolute;
    inset:0;

    background:
    radial-gradient(circle at 20% 35%,rgba(255,120,40,.08),transparent 22%),
    radial-gradient(circle at 65% 70%,rgba(255,60,0,.10),transparent 28%),
    radial-gradient(circle at 90% 20%,rgba(255,180,120,.05),transparent 20%);

    opacity:.9;

    animation:ashMove 10s ease-in-out infinite alternate;

}

@keyframes lavaFlow{

0%{
transform:translateX(-180%) skewX(-25deg);
}

100%{
transform:translateX(180%) skewX(-25deg);
}

}

@keyframes ashMove{

0%{
transform:translate(-12px,-6px) scale(1);
opacity:.45;
filter:blur(2px);
}

100%{
transform:translate(12px,6px) scale(1.08);
opacity:.95;
filter:blur(4px);
}

}

/* INNER */

.breadcrumb__inner{

    position:relative;
    z-index:2;

}

/* LIST */

.breadcrumb__path{

    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px;

    margin:0;
    padding:0;
    list-style:none;

}

/* ITEM */

.breadcrumb__path li{

    display:flex;
    align-items:center;
    gap:8px;

}

/* LINK */

.breadcrumb__path a{

    color:#ffffff;

    font-size:14px;
    font-weight:800;

    text-decoration:none;
    letter-spacing:.35px;

    transition:.35s;

    text-shadow:
    0 0 6px rgba(255,90,0,.9),
    0 0 15px rgba(255,40,0,.65),
    0 0 28px rgba(255,0,0,.35);

}

/* Hover */

.breadcrumb__path a:hover{

    color:#ffd48c;

    text-shadow:
    0 0 8px #ffb347,
    0 0 18px #ff6600,
    0 0 34px #ff2200;

}

/* Separator */

.breadcrumb__path span{

    color:#ffae73;

    text-shadow:
    0 0 8px rgba(255,80,0,.6);

}

/* Icon */

.breadcrumb .icon{

    width:14px;
    height:14px;

    fill:#ff7a1a;

    filter:
    drop-shadow(0 0 6px #ff4500)
    drop-shadow(0 0 12px #ff2200);

}

/* Last Text */

.breadcrumb__path li:last-child a{

    color:#ffffff;
    font-weight:900;

    text-shadow:
    0 0 10px rgba(255,180,80,.95),
    0 0 22px rgba(255,80,0,.7),
    0 0 38px rgba(255,0,0,.45);

}

/* Mobile */

@media(max-width:640px){

.breadcrumb{

    padding:12px 10px;

}

.breadcrumb__path{

    justify-content:flex-start;

}

.breadcrumb__path a{

    font-size:12px;

}

}

/* Semua Tulisan Putih */

.breadcrumb,
.breadcrumb *,
.breadcrumb__path a,
.breadcrumb__path span{

    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;

}

.breadcrumb__path li:last-child a{

    color:#ffffff !important;
    background:none !important;
    -webkit-text-fill-color:#ffffff !important;

}



/* =====================================================
   APOCALYPSE PREMIUM FOOTER — LAVA, API, ASAP
===================================================== */


/* FOOTER WRAPPER UTAMA */

footer.footer,
footer.footer > .footer,
.footer .footer-column,
.footer .footer-bottom{

    position:relative !important;
    overflow:hidden !important;

    background:

    radial-gradient(
        circle at 18% 10%,
        rgba(255,80,0,.22),
        transparent 34%
    ),

    radial-gradient(
        circle at 82% 20%,
        rgba(170,0,0,.26),
        transparent 42%
    ),

    radial-gradient(
        circle at 50% 100%,
        rgba(255,40,0,.18),
        transparent 48%
    ),

    linear-gradient(
        145deg,
        #020202 0%,
        #160000 30%,
        #3a0800 60%,
        #070000 100%
    ) !important;

    color:#ffffff !important;

    border-color:
    rgba(255,80,0,.48) !important;

    box-shadow:

    inset 0 0 55px rgba(255,40,0,.15),

    inset 0 -20px 40px rgba(255,120,0,.08),

    0 0 38px rgba(255,35,0,.3) !important;

}


/* =====================================================
   CAHAYA LAVA MELINTAS
===================================================== */

footer.footer::before,
.footer-bottom::before{

    content:"";

    position:absolute;

    top:0;
    left:-170%;

    width:95%;
    height:100%;

    background:

    linear-gradient(
        120deg,
        transparent 20%,
        rgba(255,80,0,.08) 38%,
        rgba(255,190,80,.38) 50%,
        rgba(255,35,0,.2) 60%,
        transparent 78%
    );

    transform:skewX(-25deg);

    animation:
    apocalypseLight 8s linear infinite;

    z-index:5;
    pointer-events:none;

}


@keyframes apocalypseLight{

    0%{
        left:-170%;
        opacity:0;
    }

    15%{
        opacity:.8;
    }

    55%{
        opacity:1;
    }

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

}


/* =====================================================
   ASAP, ABU DAN CAHAYA PANAS
===================================================== */

footer.footer::after{

    content:"";

    position:absolute;

    inset:-10%;

    background:

    radial-gradient(
        circle at 20% 70%,
        rgba(255,80,0,.14),
        transparent 25%
    ),

    radial-gradient(
        circle at 70% 30%,
        rgba(130,0,0,.18),
        transparent 35%
    ),

    radial-gradient(
        circle at 85% 80%,
        rgba(255,160,60,.09),
        transparent 24%
    ),

    repeating-radial-gradient(
        circle,
        rgba(255,130,50,.08) 0 1px,
        transparent 1px 18px
    );

    animation:
    apocalypseSmoke 14s ease-in-out infinite alternate;

    pointer-events:none;

    opacity:.85;

}


@keyframes apocalypseSmoke{

    from{
        transform:
        translateX(-24px)
        translateY(12px)
        scale(1);

        opacity:.45;

        filter:blur(1px);
    }

    to{
        transform:
        translateX(24px)
        translateY(-12px)
        scale(1.08);

        opacity:.9;

        filter:blur(4px);
    }

}


/* =====================================================
   SEMUA TEKS FOOTER
===================================================== */

footer.footer p,
footer.footer span,
footer.footer li,
footer.footer a,
footer.footer div{

    color:#ffffff !important;

}


/* JUDUL MENU */

footer.footer .footer-category__title{

    color:#ffffff !important;

    font-weight:900 !important;

    text-transform:uppercase;

    letter-spacing:.6px;

    text-shadow:

    0 0 6px rgba(255,190,100,.9),

    0 0 14px rgba(255,70,0,.95),

    0 0 28px rgba(255,0,0,.6) !important;

}


/* LINK FOOTER */

footer.footer .footer-category__link,
footer.footer .footer-language__anchor,
footer.footer .footer-terms__link{

    color:#ffffff !important;

    font-weight:700 !important;

    transition:
    color .3s ease,
    text-shadow .3s ease,
    transform .3s ease;

    text-shadow:

    0 0 7px rgba(255,75,0,.78),

    0 0 15px rgba(130,0,0,.45) !important;

}


footer.footer .footer-category__link:hover,
footer.footer a:hover{

    color:#ffd194 !important;

    transform:translateX(3px);

    text-shadow:

    0 0 8px #ffc06a,

    0 0 18px #ff6500,

    0 0 34px #ff2100 !important;

}


/* LIST ITEM */

footer.footer li{

    border-color:

    rgba(255,75,0,.32) !important;

}


/* ICON */

footer.footer svg,
footer.footer .icon{

    fill:#ffffff !important;

    color:#ffffff !important;

    filter:

    drop-shadow(0 0 5px #ffb05c)

    drop-shadow(0 0 10px #ff3c00) !important;

}


/* COPYRIGHT */

footer.footer .footer-copyright{

    color:#ffffff !important;

    font-weight:900 !important;

    text-shadow:

    0 0 7px #ffb05c,

    0 0 15px #ff4800,

    0 0 25px rgba(255,0,0,.65) !important;

}


/* =====================================================
   SOCIAL BUTTON TEMA KIAMAT
===================================================== */

footer.footer .footer-sns__link{

    position:relative;

    overflow:hidden;

    background:

    radial-gradient(
        circle at 30% 20%,
        rgba(255,120,30,.22),
        transparent 38%
    ),

    linear-gradient(
        145deg,
        #050000,
        #370800
    ) !important;

    border:

    1px solid rgba(255,85,0,.8) !important;

    box-shadow:

    inset 0 0 12px rgba(255,100,0,.12),

    0 0 18px rgba(255,55,0,.55) !important;

    transition:
    transform .35s ease,
    box-shadow .35s ease,
    background .35s ease;

}


footer.footer .footer-sns__link:hover{

    background:

    linear-gradient(
        145deg,
        #681000,
        #ff4200
    ) !important;

    transform:
    translateY(-3px)
    scale(1.05);

    box-shadow:

    0 0 12px #ffb05c,

    0 0 25px #ff5100,

    0 0 42px rgba(255,0,0,.8) !important;

}


/* =====================================================
   GARIS FOOTER CAHAYA LAVA
===================================================== */

footer.footer .footer-bottom::after,
footer.footer::marker{

    display:none;

}


footer.footer .footer-bottom{

    border-top:

    2px solid rgba(255,75,0,.55) !important;

    box-shadow:

    inset 0 2px 10px rgba(255,50,0,.14) !important;

}


/* =====================================================
   EFEK DENYUT PANAS
===================================================== */

footer.footer{

    animation:
    apocalypseHeat 5s ease-in-out infinite alternate;

}


@keyframes apocalypseHeat{

    0%{

        box-shadow:

        inset 0 0 45px rgba(255,40,0,.1),

        0 0 25px rgba(255,35,0,.2);

    }

    100%{

        box-shadow:

        inset 0 0 70px rgba(255,65,0,.18),

        0 0 48px rgba(255,35,0,.38);

    }

}


/* =====================================================
   RESPONSIVE MOBILE
===================================================== */

@media(max-width:768px){

    footer.footer,
    footer.footer > .footer,
    .footer .footer-column,
    .footer .footer-bottom{

        background:

        radial-gradient(
            circle at 50% 0%,
            rgba(255,70,0,.2),
            transparent 38%
        ),

        linear-gradient(
            160deg,
            #030303 0%,
            #220000 55%,
            #080000 100%
        ) !important;

    }

    footer.footer .footer-category__title{

        text-shadow:

        0 0 5px rgba(255,150,70,.9),

        0 0 12px rgba(255,50,0,.8) !important;

    }

    footer.footer::after{

        opacity:.65;

    }

}


/* =====================================================
   PASTIKAN KONTEN BERADA DI ATAS EFEK
===================================================== */

footer.footer > *,
footer.footer .footer-column > *,
footer.footer .footer-bottom > *{

    position:relative;

    z-index:6;

}



/* =====================================================
   REALISTIC APOCALYPSE / KIAMAT BACKGROUND
===================================================== */


/* ROOT */

html{

    background:#020000 !important;

}


/* =====================================================
   BACKGROUND UTAMA KIAMAT
===================================================== */

body{

    position:relative;

    min-height:100vh;

    overflow-x:hidden;

    isolation:isolate;

    background:

    /* cahaya matahari merah kiamat */
    radial-gradient(
        circle at 50% 0%,
        rgba(255,80,0,.42),
        transparent 28%
    ),

    /* cahaya kebakaran kiri */
    radial-gradient(
        circle at 15% 38%,
        rgba(255,40,0,.30),
        transparent 38%
    ),

    /* cahaya lava kanan */
    radial-gradient(
        circle at 88% 48%,
        rgba(180,15,0,.32),
        transparent 38%
    ),

    /* cahaya lava dari bawah */
    radial-gradient(
        ellipse at 50% 110%,
        rgba(255,75,0,.35),
        transparent 48%
    ),

    /* langit kiamat */
    linear-gradient(
        180deg,
        #030000 0%,
        #210000 25%,
        #3a0800 50%,
        #130000 75%,
        #020000 100%
    ) !important;

}


/* =====================================================
   BAYANGAN GEDUNG HANCUR DAN LANGIT GELAP
===================================================== */

body::before{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:0;

    background:

    /* sisi kiri gelap */
    linear-gradient(
        90deg,
        rgba(0,0,0,.98) 0%,
        rgba(15,0,0,.82) 8%,
        transparent 20%
    ),

    /* sisi kanan gelap */
    linear-gradient(
        -90deg,
        rgba(0,0,0,.98) 0%,
        rgba(15,0,0,.82) 8%,
        transparent 20%
    ),

    /* awan hitam kiri atas */
    radial-gradient(
        ellipse at 8% -10%,
        rgba(0,0,0,.98),
        transparent 38%
    ),

    /* awan hitam kanan atas */
    radial-gradient(
        ellipse at 92% -10%,
        rgba(0,0,0,.98),
        transparent 38%
    ),

    /* asap hitam tengah */
    radial-gradient(
        ellipse at 50% 20%,
        rgba(10,0,0,.76),
        transparent 50%
    ),

    /* bayangan kehancuran bawah */
    linear-gradient(
        0deg,
        rgba(0,0,0,.92) 0%,
        rgba(30,0,0,.38) 22%,
        transparent 45%
    );

}


/* =====================================================
   ASAP, ABU DAN CAHAYA MERAH BERGERAK
===================================================== */

body::after{

    content:"";

    position:fixed;

    inset:-15%;

    pointer-events:none;

    z-index:1;

    background:

    radial-gradient(
        circle at 20% 35%,
        rgba(255,80,0,.12),
        transparent 24%
    ),

    radial-gradient(
        circle at 72% 58%,
        rgba(255,30,0,.10),
        transparent 30%
    ),

    radial-gradient(
        circle at 85% 18%,
        rgba(255,150,60,.07),
        transparent 20%
    ),

    repeating-radial-gradient(
        circle,
        rgba(255,100,40,.055) 0 1px,
        transparent 1px 20px
    ),

    linear-gradient(
        120deg,
        transparent 25%,
        rgba(255,75,0,.08) 50%,
        transparent 75%
    );

    animation:
    apocalypseMist 18s ease-in-out infinite;

}


/* GERAK ASAP KIAMAT */

@keyframes apocalypseMist{

    0%{

        transform:
        translateX(-5%)
        translateY(2%)
        scale(1);

        opacity:.38;

        filter:blur(1px);

    }

    50%{

        transform:
        translateX(5%)
        translateY(-2%)
        scale(1.06);

        opacity:.78;

        filter:blur(4px);

    }

    100%{

        transform:
        translateX(-5%)
        translateY(2%)
        scale(1);

        opacity:.38;

        filter:blur(1px);

    }

}


/* =====================================================
   SEMUA KONTEN DI ATAS BACKGROUND
===================================================== */

body > *{

    position:relative;

    z-index:2;

}


/* =====================================================
   WRAPPER UTAMA TRANSPARAN
===================================================== */

.wrapper,
.container,
.main,
.content,
.page,
.page-wrapper,
#content{

    background:transparent !important;

}


/* =====================================================
   HEADER PREMIUM TEMA KIAMAT
===================================================== */

header,
.header,
.site-header,
.navbar,
.top-header{

    position:relative;

    overflow:hidden;

    background:

    radial-gradient(
        circle at 50% 120%,
        rgba(255,60,0,.22),
        transparent 45%
    ),

    linear-gradient(
        145deg,
        rgba(2,0,0,.98),
        rgba(48,5,0,.97),
        rgba(12,0,0,.98)
    ) !important;

    border-bottom:

    1px solid rgba(255,80,0,.85);

    box-shadow:

    0 15px 42px rgba(0,0,0,.92),

    0 0 25px rgba(255,45,0,.25),

    inset 0 -15px 32px rgba(255,55,0,.17);

}


/* =====================================================
   CAHAYA LAVA MELINTAS HEADER
===================================================== */

header::before,
.header::before,
.site-header::before,
.navbar::before{

    content:"";

    position:absolute;

    top:0;

    left:-130%;

    width:75%;

    height:100%;

    background:

    linear-gradient(
        120deg,
        transparent 20%,
        rgba(255,60,0,.10) 38%,
        rgba(255,190,90,.42) 50%,
        rgba(255,35,0,.18) 62%,
        transparent 80%
    );

    transform:skewX(-25deg);

    animation:
    headerApocalypseLight 7s linear infinite;

    pointer-events:none;

    z-index:1;

}


/* GERAK CAHAYA HEADER */

@keyframes headerApocalypseLight{

    0%{

        left:-130%;
        opacity:0;

    }

    20%{

        opacity:.85;

    }

    55%{

        opacity:1;

    }

    100%{

        left:150%;
        opacity:0;

    }

}


/* =====================================================
   ASAP TIPIS DI HEADER
===================================================== */

header::after,
.header::after,
.site-header::after,
.navbar::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(
        circle at 15% 50%,
        rgba(255,70,0,.12),
        transparent 26%
    ),

    radial-gradient(
        circle at 80% 35%,
        rgba(120,0,0,.16),
        transparent 32%
    );

    animation:
    headerSmoke 10s ease-in-out infinite alternate;

    pointer-events:none;

    z-index:0;

}


@keyframes headerSmoke{

    from{

        transform:translateX(-15px);

        opacity:.35;

        filter:blur(1px);

    }

    to{

        transform:translateX(15px);

        opacity:.8;

        filter:blur(4px);

    }

}


/* PASTIKAN ISI HEADER DI ATAS EFEK */

header > *,
.header > *,
.site-header > *,
.navbar > *{

    position:relative;

    z-index:3;

}


/* =====================================================
   HEADER TEXT
===================================================== */

header *,
.header *,
.site-header *,
.navbar *{

    color:#ffffff !important;

    text-shadow:

    0 0 6px rgba(255,190,100,.75),

    0 0 14px rgba(255,55,0,.65),

    0 0 25px rgba(150,0,0,.4);

}


/* =====================================================
   MENU HOVER API
===================================================== */

header a,
.header a,
.site-header a,
.navbar a{

    transition:

    color .3s ease,

    text-shadow .3s ease,

    transform .3s ease;

}


header a:hover,
.header a:hover,
.site-header a:hover,
.navbar a:hover{

    color:#ffd08a !important;

    transform:translateY(-2px);

    text-shadow:

    0 0 8px #ffc46d,

    0 0 18px #ff6200,

    0 0 35px #ff1e00 !important;

}


/* =====================================================
   AURA LAVA GLOBAL
===================================================== */

.lion-aura{

    position:fixed;

    width:430px;

    height:430px;

    border-radius:50%;

    background:

    radial-gradient(
        circle,
        rgba(255,65,0,.30),
        rgba(180,0,0,.15) 38%,
        transparent 72%
    );

    filter:blur(42px);

    pointer-events:none;

    z-index:0;

    animation:
    apocalypseAura 5s ease-in-out infinite alternate;

}


@keyframes apocalypseAura{

    from{

        transform:scale(.92);

        opacity:.45;

    }

    to{

        transform:scale(1.1);

        opacity:.9;

    }

}


/* =====================================================
   EFEK DENYUT CAHAYA KIAMAT
===================================================== */

body{

    animation:
    apocalypseSkyGlow 8s ease-in-out infinite alternate;

}


@keyframes apocalypseSkyGlow{

    0%{

        background-position:center center;

        filter:brightness(.88);

    }

    100%{

        background-position:center 10px;

        filter:brightness(1.07);

    }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:768px){

    body{

        background:

        radial-gradient(
            circle at 50% 0%,
            rgba(255,70,0,.30),
            transparent 30%
        ),

        radial-gradient(
            ellipse at 50% 105%,
            rgba(255,50,0,.22),
            transparent 42%
        ),

        linear-gradient(
            180deg,
            #020000 0%,
            #270200 48%,
            #050000 100%
        ) !important;

    }

    body::before{

        opacity:.65;

    }

    body::after{

        opacity:.72;

    }

    header,
    .header,
    .site-header{

        box-shadow:

        0 10px 28px rgba(0,0,0,.9),

        0 0 20px rgba(255,40,0,.22);

    }

    .lion-aura{

        width:280px;

        height:280px;

    }

}


/* =====================================================
   AKSESIBILITAS — KURANGI ANIMASI
===================================================== */

@media(prefers-reduced-motion:reduce){

    body,
    body::after,
    header::before,
    .header::before,
    .site-header::before,
    .navbar::before,
    header::after,
    .header::after,
    .site-header::after,
    .navbar::after,
    .lion-aura{

        animation:none !important;

    }

}



/* =====================================================
   MAWARTOTO APOCALYPSE VOLCANIC ROCK STYLE
   BATU VULKANIK, RETAKAN LAVA, ASAP & BARA
   BUTTON DAN LAYOUT TETAP DIPERTAHANKAN
===================================================== */


/* =====================================================
   CARD UTAMA BATU VULKANIK
===================================================== */

.MAWARTOTOng-card{

    max-width:750px;
    width:100%;

    position:relative;
    isolation:isolate;
    overflow:hidden;

    padding:40px 35px;

    /*
       Bentuk card dibuat agak tidak beraturan
       agar menyerupai lempengan batu.
    */
    border-radius:
    28px 34px 25px 38px /
    32px 24px 40px 27px;

    background:

    /* Noda lava samar */
    radial-gradient(
        circle at 12% 18%,
        rgba(255,92,0,.16) 0 2%,
        transparent 18%
    ),

    radial-gradient(
        circle at 84% 78%,
        rgba(255,55,0,.12) 0 3%,
        transparent 24%
    ),

    /* Tonjolan batu */
    radial-gradient(
        ellipse at 22% 28%,
        rgba(125,125,125,.22),
        transparent 30%
    ),

    radial-gradient(
        ellipse at 75% 24%,
        rgba(105,105,105,.16),
        transparent 28%
    ),

    radial-gradient(
        ellipse at 48% 85%,
        rgba(90,90,90,.18),
        transparent 32%
    ),

    /* Serat kasar batu */
    repeating-linear-gradient(
        128deg,
        rgba(255,255,255,.025) 0 2px,
        transparent 2px 17px
    ),

    repeating-linear-gradient(
        42deg,
        rgba(0,0,0,.16) 0 3px,
        transparent 3px 29px
    ),

    /* Dasar batu basalt */
    linear-gradient(
        145deg,
        #5a5a5a 0%,
        #353535 18%,
        #202020 42%,
        #111111 68%,
        #292929 86%,
        #090909 100%
    );

    border:
    2px solid rgba(116,116,116,.9);

    outline:
    1px solid rgba(20,20,20,.95);

    outline-offset:-6px;

    box-shadow:

    /* Sisi batu terang */
    inset 7px 8px 14px rgba(255,255,255,.06),

    /* Sisi bawah batu gelap */
    inset -12px -16px 24px rgba(0,0,0,.72),

    /* Cahaya lava dari dalam batu */
    inset 0 0 55px rgba(255,62,0,.10),

    /* Bayangan berat */
    0 28px 65px rgba(0,0,0,.95),

    /* Glow lava luar */
    0 0 20px rgba(255,65,0,.22),

    0 0 48px rgba(255,30,0,.13);

    animation:
    volcanicRockHeat 5s ease-in-out infinite alternate;

}


/* =====================================================
   RETAKAN LAVA PADA CARD UTAMA
===================================================== */

.MAWARTOTOng-card::before{

    content:"";

    position:absolute;
    inset:-5%;

    pointer-events:none;

    z-index:0;

    background:

    /*
       Retakan utama diagonal.
       Garis gelap di luar membuatnya tampak
       seperti batu benar-benar terbelah.
    */
    linear-gradient(
        133deg,
        transparent 0 20%,
        rgba(0,0,0,.88) 20.3% 20.9%,
        rgba(255,48,0,.55) 21%,
        rgba(255,190,65,.95) 21.35%,
        rgba(255,71,0,.7) 21.7%,
        rgba(0,0,0,.85) 22% 22.6%,
        transparent 22.9% 100%
    ),

    linear-gradient(
        57deg,
        transparent 0 44%,
        rgba(0,0,0,.82) 44.2% 44.8%,
        rgba(255,55,0,.5) 44.9%,
        rgba(255,205,85,.92) 45.2%,
        rgba(255,60,0,.65) 45.5%,
        rgba(0,0,0,.86) 45.8% 46.4%,
        transparent 46.7% 100%
    ),

    linear-gradient(
        108deg,
        transparent 0 69%,
        rgba(0,0,0,.82) 69.2% 69.7%,
        rgba(255,65,0,.48) 69.8%,
        rgba(255,220,110,.88) 70.05%,
        rgba(255,55,0,.60) 70.3%,
        rgba(0,0,0,.84) 70.5% 71%,
        transparent 71.2% 100%
    ),

    /*
       Cabang retakan kecil
    */
    repeating-linear-gradient(
        148deg,
        transparent 0 88px,
        rgba(0,0,0,.45) 89px,
        rgba(255,78,0,.34) 90px,
        rgba(255,185,65,.52) 91px,
        rgba(0,0,0,.45) 92px,
        transparent 94px 185px
    );

    opacity:.55;

    filter:
    drop-shadow(0 0 3px rgba(255,90,0,.8))
    drop-shadow(0 0 9px rgba(255,35,0,.6));

    animation:
    lavaCracksPulse 4s ease-in-out infinite alternate;

}


/* =====================================================
   TEKSTUR DEBU, LUBANG DAN BATU KASAR
===================================================== */

.MAWARTOTOng-card::after{

    content:"";

    position:absolute;
    inset:0;

    pointer-events:none;

    z-index:0;

    background:

    /* Lubang kecil di permukaan batu */
    radial-gradient(
        circle at 13% 16%,
        rgba(0,0,0,.65) 0 2px,
        rgba(110,110,110,.18) 3px,
        transparent 7px
    ),

    radial-gradient(
        circle at 72% 12%,
        rgba(0,0,0,.7) 0 3px,
        rgba(120,120,120,.15) 4px,
        transparent 9px
    ),

    radial-gradient(
        circle at 87% 58%,
        rgba(0,0,0,.72) 0 2px,
        transparent 8px
    ),

    radial-gradient(
        circle at 28% 82%,
        rgba(0,0,0,.65) 0 4px,
        rgba(100,100,100,.15) 5px,
        transparent 11px
    ),

    /* Butiran kasar */
    radial-gradient(
        circle,
        rgba(255,255,255,.07) 0 1px,
        transparent 1.5px
    ),

    radial-gradient(
        circle,
        rgba(0,0,0,.35) 0 1.5px,
        transparent 2px
    );

    background-size:
    auto,
    auto,
    auto,
    auto,
    31px 33px,
    47px 43px;

    background-position:
    center,
    center,
    center,
    center,
    3px 5px,
    14px 18px;

    opacity:.62;

    mix-blend-mode:overlay;

}


/* ISI CARD TETAP DI ATAS TEKSTUR */

.MAWARTOTOng-card > *{

    position:relative;

    z-index:3;

}


/* =====================================================
   HERO TITLE
===================================================== */

.hero-title{

    text-align:center;

    margin-bottom:30px;

}


.hero-title h1{

    margin-top:0;

    font-size:34px;

    font-weight:900;

    line-height:1.4;

    color:#ffffff;

    text-shadow:

    0 2px 2px rgba(0,0,0,.95),

    0 0 8px rgba(255,190,95,.92),

    0 0 18px rgba(255,72,0,.84),

    0 0 34px rgba(255,20,0,.52);

}


.hero-title h1 span{

    color:#ffb15c;

    font-weight:900;

    text-shadow:

    0 0 8px #ffe0ad,

    0 0 17px #ff7b19,

    0 0 30px #ff2100;

}


/* =====================================================
   BRAND HEADER
===================================================== */

.brand-header{

    text-align:center;

    margin-bottom:25px;

}


.brand-header h2{

    font-size:2rem;

    font-weight:900;

    color:#ffffff;

    letter-spacing:2px;

    text-shadow:

    0 2px 2px rgba(0,0,0,.9),

    0 0 10px rgba(255,193,105,.9),

    0 0 22px rgba(255,71,0,.76);

}


.brand-header .sub{

    font-size:15px;

    color:#ffffff;

    font-weight:600;

    text-shadow:

    0 2px 3px rgba(0,0,0,.95),

    0 0 7px rgba(255,80,0,.55);

}


.brand-header .sub::after{

    content:"";

    display:block;

    width:95px;
    height:5px;

    margin:10px auto 0;

    border-radius:
    40% 60% 30% 70% /
    60% 35% 65% 40%;

    background:

    linear-gradient(
        90deg,
        #181818 0%,
        #ff4800 14%,
        #ffd074 50%,
        #ff4800 86%,
        #181818 100%
    );

    box-shadow:

    0 0 6px #ffb35f,

    0 0 15px #ff4d00,

    0 3px 6px rgba(0,0,0,.8);

}


/* =====================================================
   INFO CONTAINER — LEMPENGAN BATU
===================================================== */

.info-container{

    position:relative;
    overflow:hidden;

    margin-bottom:30px;

    border-radius:
    18px 23px 16px 25px /
    22px 15px 26px 18px;

    background:

    radial-gradient(
        ellipse at 20% 20%,
        rgba(140,140,140,.18),
        transparent 34%
    ),

    radial-gradient(
        ellipse at 80% 90%,
        rgba(255,64,0,.08),
        transparent 32%
    ),

    repeating-linear-gradient(
        125deg,
        rgba(255,255,255,.022) 0 2px,
        transparent 2px 18px
    ),

    repeating-linear-gradient(
        40deg,
        rgba(0,0,0,.16) 0 2px,
        transparent 2px 26px
    ),

    linear-gradient(
        145deg,
        #4c4c4c 0%,
        #2e2e2e 28%,
        #171717 68%,
        #080808 100%
    );

    border:
    2px solid rgba(100,100,100,.9);

    outline:
    1px solid rgba(5,5,5,.9);

    outline-offset:-5px;

    box-shadow:

    inset 6px 7px 12px rgba(255,255,255,.045),

    inset -10px -12px 18px rgba(0,0,0,.7),

    inset 0 0 30px rgba(255,55,0,.07),

    0 13px 24px rgba(0,0,0,.76),

    0 0 18px rgba(255,55,0,.16);

}


/* Retakan tipis di info container */

.info-container::before{

    content:"";

    position:absolute;
    inset:0;

    pointer-events:none;

    background:

    linear-gradient(
        118deg,
        transparent 0 36%,
        rgba(0,0,0,.7) 36.2% 36.8%,
        rgba(255,65,0,.42) 36.9%,
        rgba(255,198,75,.66) 37.15%,
        rgba(0,0,0,.7) 37.5% 38%,
        transparent 38.2% 100%
    ),

    linear-gradient(
        62deg,
        transparent 0 74%,
        rgba(0,0,0,.7) 74.2% 74.8%,
        rgba(255,80,0,.38) 74.9%,
        rgba(255,192,75,.55) 75.2%,
        rgba(0,0,0,.7) 75.5% 76%,
        transparent 76.2% 100%
    );

    opacity:.38;

    filter:
    drop-shadow(0 0 4px rgba(255,55,0,.65));

}


/* =====================================================
   INFO HEAD — BATU MENONJOL
===================================================== */

.info-head{

    position:relative;

    padding:15px 20px;

    background:

    radial-gradient(
        ellipse at 50% 0%,
        rgba(145,145,145,.15),
        transparent 48%
    ),

    repeating-linear-gradient(
        135deg,
        rgba(255,255,255,.02) 0 2px,
        transparent 2px 20px
    ),

    linear-gradient(
        90deg,
        #151515 0%,
        #454545 22%,
        #262626 50%,
        #454545 78%,
        #151515 100%
    );

    border-bottom:
    2px solid rgba(255,75,0,.55);

    box-shadow:

    inset 0 -8px 12px rgba(0,0,0,.62),

    0 4px 10px rgba(0,0,0,.6),

    0 1px 7px rgba(255,65,0,.28);

}


.info-head h2,
.info-head h3{

    position:relative;

    z-index:2;

    margin:0;

    color:#ffffff !important;

    font-size:16px;

    font-weight:900;

    text-align:center;

    background:transparent !important;

    text-shadow:

    0 2px 3px rgba(0,0,0,.95),

    0 0 7px #ffc078,

    0 0 16px #ff5700;

}


/* =====================================================
   INFO ROW
===================================================== */

.info-row{

    position:relative;

    padding:14px 22px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    border-bottom:
    1px solid rgba(130,130,130,.24);

    background:

    linear-gradient(
        90deg,
        rgba(255,255,255,.018),
        transparent 28%,
        rgba(0,0,0,.08)
    );

    transition:
    transform .3s ease,
    background .3s ease,
    box-shadow .3s ease;

}


.info-row:last-child{

    border-bottom:none;

}


.info-row:hover{

    background:

    radial-gradient(
        ellipse at left,
        rgba(255,76,0,.12),
        transparent 45%
    ),

    rgba(255,255,255,.025);

    box-shadow:

    inset 5px 0 12px rgba(255,61,0,.11);

    transform:translateX(3px);

}


.info-label{

    display:flex;

    align-items:center;

    gap:12px;

}


/* Batu bara kecil menyala */

.info-dot{

    width:10px;
    height:10px;

    flex-shrink:0;

    border-radius:
    45% 55% 38% 62% /
    57% 40% 60% 43%;

    background:

    radial-gradient(
        circle at 35% 30%,
        #fff1c7 0 8%,
        #ffb13b 16%,
        #ff4c00 48%,
        #5b0800 72%,
        #140000 100%
    );

    box-shadow:

    0 0 5px #ffd48e,

    0 0 12px #ff6a00,

    0 0 21px rgba(255,25,0,.8);

    animation:
    emberPulse 1.7s ease-in-out infinite alternate;

}


/* =====================================================
   TEXT INFORMASI
===================================================== */

.info-text{

    color:#ffffff !important;

    font-size:15px;

    font-weight:700;

    text-shadow:

    0 2px 3px rgba(0,0,0,.95),

    0 0 6px rgba(255,79,0,.35);

}


.info-number{

    color:#1a0900 !important;

    flex-shrink:0;

    padding:6px 15px;

    border-radius:
    18px 24px 17px 22px /
    21px 17px 23px 18px;

    font-size:15px;

    font-weight:900;

    background:

    repeating-linear-gradient(
        125deg,
        rgba(255,255,255,.10) 0 2px,
        transparent 2px 12px
    ),

    linear-gradient(
        145deg,
        #fff0b0 0%,
        #ffb547 27%,
        #f05b00 64%,
        #8f1700 100%
    );

    border:
    1px solid rgba(255,226,155,.85);

    box-shadow:

    inset 2px 3px 5px rgba(255,255,255,.26),

    inset -4px -5px 7px rgba(90,10,0,.34),

    0 0 9px #ff9b38,

    0 0 19px rgba(255,49,0,.64);

}


/* =====================================================
   BONUS WRAP — BATU BESAR TERBELAH
===================================================== */

.bonus-wrap{

    position:relative;
    overflow:hidden;

    padding:25px 20px;

    margin:30px 0 35px;

    text-align:center;

    border-radius:
    23px 16px 28px 18px /
    17px 28px 19px 25px;

    background:

    radial-gradient(
        ellipse at 22% 15%,
        rgba(135,135,135,.17),
        transparent 32%
    ),

    radial-gradient(
        ellipse at 75% 90%,
        rgba(255,58,0,.10),
        transparent 34%
    ),

    repeating-linear-gradient(
        138deg,
        rgba(255,255,255,.022) 0 2px,
        transparent 2px 21px
    ),

    repeating-linear-gradient(
        48deg,
        rgba(0,0,0,.17) 0 3px,
        transparent 3px 31px
    ),

    linear-gradient(
        148deg,
        #555555 0%,
        #303030 24%,
        #171717 58%,
        #080808 100%
    );

    border:
    2px solid rgba(105,105,105,.9);

    outline:
    1px solid #050505;

    outline-offset:-6px;

    box-shadow:

    inset 7px 8px 14px rgba(255,255,255,.045),

    inset -12px -15px 22px rgba(0,0,0,.72),

    inset 0 0 30px rgba(255,62,0,.08),

    0 16px 30px rgba(0,0,0,.78),

    0 0 22px rgba(255,55,0,.18);

}


/* Retakan lava bonus wrap */

.bonus-wrap::before{

    content:"";

    position:absolute;
    inset:0;

    pointer-events:none;

    background:

    linear-gradient(
        128deg,
        transparent 0 58%,
        rgba(0,0,0,.78) 58.3% 58.9%,
        rgba(255,58,0,.46) 59%,
        rgba(255,210,90,.75) 59.25%,
        rgba(255,57,0,.5) 59.5%,
        rgba(0,0,0,.78) 59.8% 60.4%,
        transparent 60.7% 100%
    ),

    linear-gradient(
        48deg,
        transparent 0 23%,
        rgba(0,0,0,.7) 23.2% 23.8%,
        rgba(255,70,0,.35) 23.9%,
        rgba(255,191,67,.6) 24.2%,
        rgba(0,0,0,.7) 24.6% 25.1%,
        transparent 25.4% 100%
    );

    opacity:.44;

    filter:
    drop-shadow(0 0 4px rgba(255,60,0,.7));

    animation:
    lavaCracksPulse 4.5s ease-in-out infinite alternate;

}


.bonus-wrap > *{

    position:relative;

    z-index:2;

}


/* =====================================================
   BONUS HEAD
===================================================== */

.bonus-head{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    margin-bottom:20px;

}


.bonus-head .gold-icon{

    width:11px;
    height:11px;

    border-radius:
    35% 65% 46% 54% /
    61% 38% 62% 39%;

    background:

    radial-gradient(
        circle at 35% 28%,
        #fff3ce,
        #ffbe4f 20%,
        #ff5100 55%,
        #5a0700 100%
    );

    box-shadow:

    0 0 6px #ffd59a,

    0 0 15px #ff6100,

    0 0 27px rgba(255,20,0,.82);

    animation:
    fireDot 1.4s ease-in-out infinite alternate;

}


.bonus-head h3{

    margin:0;

    color:#ffffff;

    font-size:16px;

    font-weight:900;

    text-shadow:

    0 2px 3px rgba(0,0,0,.95),

    0 0 8px #ffc37d,

    0 0 17px #ff5600;

}


/* =====================================================
   BONUS ITEM — BATU KECIL
===================================================== */

.bonus-item{

    position:relative;
    overflow:hidden;

    padding:14px 16px;

    text-align:left;

    border-radius:
    13px 18px 11px 20px /
    18px 11px 20px 13px;

    background:

    radial-gradient(
        ellipse at 18% 10%,
        rgba(125,125,125,.17),
        transparent 36%
    ),

    repeating-linear-gradient(
        130deg,
        rgba(255,255,255,.02) 0 2px,
        transparent 2px 17px
    ),

    linear-gradient(
        145deg,
        #484848 0%,
        #262626 35%,
        #111111 72%,
        #080808 100%
    );

    border:
    1px solid rgba(100,100,100,.85);

    border-left:
    6px solid #ff5d00;

    box-shadow:

    inset 5px 6px 10px rgba(255,255,255,.035),

    inset -8px -10px 14px rgba(0,0,0,.66),

    0 8px 16px rgba(0,0,0,.65),

    0 0 14px rgba(255,54,0,.18);

}


.bonus-item::before{

    content:"";

    position:absolute;

    top:0;
    bottom:0;
    left:-3px;

    width:7px;

    background:

    linear-gradient(
        180deg,
        #ffcf76,
        #ff5b00 35%,
        #d51b00 68%,
        #ff8a1d
    );

    box-shadow:

    0 0 8px #ff9d38,

    0 0 17px #ff3500;

    animation:
    lavaEdge 2.2s ease-in-out infinite alternate;

}


.bonus-item p{

    position:relative;

    z-index:2;

    margin:0;

    color:#ffffff !important;

    font-size:15px;

    font-weight:700;

    text-shadow:

    0 2px 3px rgba(0,0,0,.95),

    0 0 6px rgba(255,72,0,.36);

}


.bonus-item .highlight-gold{

    color:#ffbd68 !important;

    font-weight:900;

    text-shadow:

    0 0 7px #ffe0af,

    0 0 15px #ff6200;

}


.bonus-item .highlight-black{

    color:#ffffff !important;

    font-weight:700;

}


/* =====================================================
   BUTTON SECTION
===================================================== */

.cta-gold-section{

    margin-top:25px;

    text-align:center;

}


.cta-buttons-gold{

    display:flex;

    gap:15px;

    justify-content:center;

    flex-wrap:wrap;

}


.btn-gold{

    position:relative;
    overflow:hidden;

    padding:14px 42px;

    border-radius:
    24px 31px 22px 29px /
    29px 22px 31px 24px;

    font-weight:900;

    font-size:16px;

    letter-spacing:1px;

    text-decoration:none;

    transition:
    transform .3s ease,
    box-shadow .3s ease,
    background .3s ease;

}


/* =====================================================
   LOGIN — BATU PUTIH
===================================================== */

.btn-login-gold{

    color:#161616 !important;

    background:

    repeating-linear-gradient(
        130deg,
        rgba(255,255,255,.18) 0 2px,
        transparent 2px 13px
    ),

    linear-gradient(
        145deg,
        #ffffff 0%,
        #d8d8d8 45%,
        #9c9c9c 100%
    ) !important;

    border:
    2px solid #ff6a00;

    box-shadow:

    inset 3px 4px 6px rgba(255,255,255,.6),

    inset -5px -7px 9px rgba(0,0,0,.25),

    0 7px 13px rgba(0,0,0,.65),

    0 0 12px rgba(255,190,100,.9),

    0 0 24px rgba(255,55,0,.62);

}


.btn-login-gold:hover{

    color:#170700 !important;

    transform:
    translateY(-3px)
    scale(1.03);

    background:

    repeating-linear-gradient(
        130deg,
        rgba(255,255,255,.13) 0 2px,
        transparent 2px 13px
    ),

    linear-gradient(
        145deg,
        #ffd08b,
        #ff8a2a 55%,
        #d83400
    ) !important;

    box-shadow:

    inset 3px 4px 6px rgba(255,255,255,.25),

    inset -5px -7px 9px rgba(90,10,0,.32),

    0 10px 17px rgba(0,0,0,.7),

    0 0 15px #ffc578,

    0 0 30px #ff5700;

}


/* =====================================================
   REGISTER — BATU LAVA MERAH
===================================================== */

.btn-register-gold{

    color:#ffffff !important;

    background:

    repeating-linear-gradient(
        130deg,
        rgba(255,255,255,.055) 0 2px,
        transparent 2px 13px
    ),

    linear-gradient(
        145deg,
        #ff3a18 0%,
        #b60800 42%,
        #530000 100%
    ) !important;

    border:
    2px solid #ff7554;

    box-shadow:

    inset 3px 4px 6px rgba(255,255,255,.12),

    inset -6px -8px 10px rgba(40,0,0,.55),

    0 7px 13px rgba(0,0,0,.7),

    0 0 13px rgba(255,80,35,.85),

    0 0 27px rgba(255,0,0,.62);

}


.btn-register-gold:hover{

    color:#ff1600 !important;

    transform:
    translateY(-3px)
    scale(1.03);

    background:

    repeating-linear-gradient(
        130deg,
        rgba(0,0,0,.045) 0 2px,
        transparent 2px 13px
    ),

    linear-gradient(
        145deg,
        #ffffff,
        #dedede 55%,
        #a8a8a8
    ) !important;

    box-shadow:

    inset 3px 4px 6px rgba(255,255,255,.45),

    inset -5px -7px 9px rgba(0,0,0,.22),

    0 10px 17px rgba(0,0,0,.72),

    0 0 14px #ffffff,

    0 0 29px #ff3c00;

}


/* =====================================================
   VISIBILITY FIX
===================================================== */

.info-container,
.info-container *,
.info-row,
.info-row *,
.info-label,
.info-text{

    color:#ffffff !important;

}


.info-number,
.info-number *{

    color:#1a0900 !important;

}


.bonus-item,
.bonus-item *,
.bonus-item p{

    color:#ffffff !important;

}


.bonus-item .highlight-gold{

    color:#ffbd68 !important;

}


.info-head h2::selection,
.info-head h3::selection,
.info-container *::selection{

    color:#ffffff;

    background:#ff5b00;

}


/* Tidak mengganggu elemen global */

span,
p,
strong,
b{

    color:inherit;

}


/* =====================================================
   ANIMASI
===================================================== */

@keyframes volcanicRockHeat{

    0%{

        box-shadow:

        inset 7px 8px 14px rgba(255,255,255,.05),

        inset -12px -16px 24px rgba(0,0,0,.72),

        inset 0 0 45px rgba(255,55,0,.07),

        0 28px 65px rgba(0,0,0,.95),

        0 0 18px rgba(255,55,0,.17);

    }

    100%{

        box-shadow:

        inset 7px 8px 14px rgba(255,255,255,.06),

        inset -12px -16px 24px rgba(0,0,0,.72),

        inset 0 0 68px rgba(255,70,0,.14),

        0 28px 65px rgba(0,0,0,.95),

        0 0 31px rgba(255,60,0,.34),

        0 0 55px rgba(255,25,0,.14);

    }

}


@keyframes lavaCracksPulse{

    0%{

        opacity:.32;

        filter:

        brightness(.82)

        drop-shadow(0 0 2px rgba(255,55,0,.65))

        drop-shadow(0 0 6px rgba(255,25,0,.45));

    }

    100%{

        opacity:.68;

        filter:

        brightness(1.35)

        drop-shadow(0 0 5px rgba(255,125,20,.9))

        drop-shadow(0 0 13px rgba(255,35,0,.72));

    }

}


@keyframes emberPulse{

    0%{

        transform:
        scale(.84)
        rotate(-5deg);

        filter:brightness(.78);

    }

    100%{

        transform:
        scale(1.25)
        rotate(7deg);

        filter:brightness(1.45);

    }

}


@keyframes fireDot{

    0%{

        transform:
        scale(.82)
        rotate(-8deg);

        opacity:.65;

    }

    100%{

        transform:
        scale(1.26)
        rotate(8deg);

        opacity:1;

    }

}


@keyframes lavaEdge{

    0%{

        filter:brightness(.72);

        box-shadow:

        0 0 5px #ff7c1d,

        0 0 11px #ff2800;

    }

    100%{

        filter:brightness(1.4);

        box-shadow:

        0 0 10px #ffd080,

        0 0 22px #ff4600;

    }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:640px){

    .MAWARTOTOng-card{

        padding:30px 20px;

        border-radius:
        22px 28px 20px 30px /
        27px 20px 31px 23px;

    }

    .hero-title h1{

        font-size:26px;

    }

    .brand-header h2{

        font-size:1.5rem;

    }

    .info-row{

        padding:12px 15px;

        gap:10px;

    }

    .info-number{

        padding:5px 10px;

        font-size:13px;

    }

    .btn-gold{

        width:100%;

        padding-left:20px;
        padding-right:20px;

    }

    .MAWARTOTOng-card::before{

        opacity:.44;

    }

}


/* =====================================================
   REDUCE MOTION
===================================================== */

@media(prefers-reduced-motion:reduce){

    .MAWARTOTOng-card,
    .MAWARTOTOng-card::before,
    .bonus-wrap::before,
    .info-dot,
    .bonus-head .gold-icon,
    .bonus-item::before{

        animation:none !important;

    }

}


/* =====================================================
   APOCALYPSE VOLCANIC ROCK OVERRIDE
   CARD BATU VULKANIK + RETAKAN LAVA
   BINGKAI GAMBAR PRODUK BATU LAVA
   TEMPEL PALING BAWAH SETELAH CSS LAMA
===================================================== */


/* =====================================================
   CONTAINER
===================================================== */

.lx-container{

    position:relative;

}


/* =====================================================
   MAIN BOX — BATU VULKANIK BESAR
===================================================== */

.lx-mainbox{

    position:relative !important;

    isolation:isolate !important;

    overflow:hidden !important;

    padding:38px !important;

    border-radius:
    34px 25px 39px 28px /
    27px 38px 24px 35px !important;

    background:

    /* Noda bara di permukaan batu */
    radial-gradient(
        circle at 12% 15%,
        rgba(255,108,0,.17),
        transparent 21%
    ),

    radial-gradient(
        circle at 86% 82%,
        rgba(255,45,0,.14),
        transparent 24%
    ),

    radial-gradient(
        circle at 75% 15%,
        rgba(160,160,160,.13),
        transparent 26%
    ),

    /* Tonjolan batu */
    radial-gradient(
        ellipse at 18% 28%,
        rgba(155,155,155,.17),
        transparent 32%
    ),

    radial-gradient(
        ellipse at 82% 58%,
        rgba(125,125,125,.14),
        transparent 30%
    ),

    radial-gradient(
        ellipse at 42% 90%,
        rgba(90,90,90,.17),
        transparent 34%
    ),

    /* Serat dan goresan batu */
    repeating-linear-gradient(
        132deg,
        rgba(255,255,255,.026) 0 2px,
        transparent 2px 19px
    ),

    repeating-linear-gradient(
        44deg,
        rgba(0,0,0,.18) 0 3px,
        transparent 3px 33px
    ),

    /* Dasar batu basalt */
    linear-gradient(
        148deg,
        #626262 0%,
        #414141 14%,
        #292929 33%,
        #151515 57%,
        #080808 76%,
        #292929 91%,
        #090909 100%
    ) !important;

    border:
    3px solid rgba(112,112,112,.94) !important;

    outline:
    2px solid rgba(10,10,10,.98) !important;

    outline-offset:-8px !important;

    box-shadow:

    inset 9px 10px 16px rgba(255,255,255,.055),

    inset -14px -18px 28px rgba(0,0,0,.82),

    inset 0 0 75px rgba(255,56,0,.10),

    0 30px 75px rgba(0,0,0,.95),

    0 0 24px rgba(255,70,0,.24),

    0 0 55px rgba(255,25,0,.13) !important;

    color:#ffffff !important;

    animation:
    volcanicMainHeat 5s ease-in-out infinite alternate;

}


/* =====================================================
   RETAKAN LAVA MAIN BOX
===================================================== */

.lx-mainbox::before{

    content:"" !important;

    position:absolute !important;

    inset:-4% !important;

    width:auto !important;
    height:auto !important;

    left:-4% !important;
    top:-4% !important;

    z-index:0 !important;

    pointer-events:none !important;

    transform:none !important;

    background:

    /* Retakan besar kiri */
    linear-gradient(
        137deg,
        transparent 0 16%,
        rgba(0,0,0,.92) 16.2% 16.9%,
        rgba(255,45,0,.56) 17%,
        rgba(255,205,80,.98) 17.35%,
        rgba(255,78,0,.72) 17.7%,
        rgba(0,0,0,.92) 17.9% 18.6%,
        transparent 18.9% 100%
    ),

    /* Retakan tengah */
    linear-gradient(
        62deg,
        transparent 0 46%,
        rgba(0,0,0,.88) 46.2% 46.8%,
        rgba(255,55,0,.53) 46.9%,
        rgba(255,222,110,.95) 47.2%,
        rgba(255,67,0,.68) 47.5%,
        rgba(0,0,0,.9) 47.8% 48.4%,
        transparent 48.7% 100%
    ),

    /* Retakan kanan */
    linear-gradient(
        112deg,
        transparent 0 73%,
        rgba(0,0,0,.88) 73.2% 73.8%,
        rgba(255,62,0,.48) 73.9%,
        rgba(255,213,95,.9) 74.2%,
        rgba(255,58,0,.63) 74.5%,
        rgba(0,0,0,.88) 74.8% 75.4%,
        transparent 75.7% 100%
    ),

    /* Cabang retakan kecil */
    repeating-linear-gradient(
        151deg,
        transparent 0 105px,
        rgba(0,0,0,.62) 106px,
        rgba(255,67,0,.38) 107px,
        rgba(255,192,70,.58) 108px,
        rgba(0,0,0,.62) 109px,
        transparent 111px 245px
    ) !important;

    opacity:.48 !important;

    filter:

    drop-shadow(0 0 3px rgba(255,105,0,.85))

    drop-shadow(0 0 11px rgba(255,35,0,.62)) !important;

    animation:
    lavaCrackPulse 4s ease-in-out infinite alternate !important;

}


/* =====================================================
   TEKSTUR LUBANG, DEBU DAN BATU KASAR
===================================================== */

.lx-mainbox::after{

    content:"" !important;

    position:absolute !important;

    inset:0 !important;

    top:0 !important;
    right:0 !important;

    width:auto !important;
    height:auto !important;

    border-radius:inherit !important;

    z-index:0 !important;

    pointer-events:none !important;

    filter:none !important;

    background:

    radial-gradient(
        circle at 9% 13%,
        rgba(0,0,0,.76) 0 3px,
        rgba(135,135,135,.17) 4px,
        transparent 11px
    ),

    radial-gradient(
        circle at 78% 11%,
        rgba(0,0,0,.72) 0 4px,
        rgba(130,130,130,.13) 5px,
        transparent 13px
    ),

    radial-gradient(
        circle at 91% 63%,
        rgba(0,0,0,.78) 0 3px,
        transparent 10px
    ),

    radial-gradient(
        circle at 24% 89%,
        rgba(0,0,0,.75) 0 5px,
        rgba(120,120,120,.13) 6px,
        transparent 14px
    ),

    radial-gradient(
        circle,
        rgba(255,255,255,.07) 0 1px,
        transparent 1.7px
    ),

    radial-gradient(
        circle,
        rgba(0,0,0,.42) 0 1.6px,
        transparent 2.3px
    ) !important;

    background-size:

    auto,
    auto,
    auto,
    auto,
    32px 35px,
    49px 45px !important;

    background-position:

    center,
    center,
    center,
    center,
    4px 7px,
    17px 21px !important;

    opacity:.63 !important;

    mix-blend-mode:overlay !important;

    animation:none !important;

}


/* Konten selalu berada di atas tekstur */

.lx-mainbox > *{

    position:relative !important;

    z-index:3 !important;

}


/* =====================================================
   HERO GRID
===================================================== */

.lx-hero{

    position:relative !important;

    z-index:3 !important;

    align-items:stretch !important;

}


/* =====================================================
   TITLE CARD — LEMPENGAN BATU PECAH
===================================================== */

.lx-title-card{

    position:relative !important;

    overflow:hidden !important;

    padding:32px !important;

    border-radius:
    22px 31px 20px 28px /
    29px 21px 32px 23px !important;

    background:

    radial-gradient(
        ellipse at 17% 12%,
        rgba(150,150,150,.19),
        transparent 34%
    ),

    radial-gradient(
        ellipse at 86% 90%,
        rgba(255,61,0,.09),
        transparent 34%
    ),

    repeating-linear-gradient(
        134deg,
        rgba(255,255,255,.025) 0 2px,
        transparent 2px 18px
    ),

    repeating-linear-gradient(
        45deg,
        rgba(0,0,0,.17) 0 3px,
        transparent 3px 29px
    ),

    linear-gradient(
        148deg,
        #555555 0%,
        #363636 22%,
        #202020 49%,
        #0b0b0b 78%,
        #242424 100%
    ) !important;

    border:
    2px solid rgba(110,110,110,.92) !important;

    outline:
    1px solid #080808 !important;

    outline-offset:-6px !important;

    box-shadow:

    inset 7px 8px 13px rgba(255,255,255,.05),

    inset -11px -14px 21px rgba(0,0,0,.75),

    inset 0 0 35px rgba(255,56,0,.08),

    0 17px 35px rgba(0,0,0,.78),

    0 0 20px rgba(255,55,0,.16) !important;

}


/* Retakan title card */

.lx-title-card::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    z-index:0;

    background:

    linear-gradient(
        128deg,
        transparent 0 63%,
        rgba(0,0,0,.78) 63.2% 63.8%,
        rgba(255,60,0,.45) 63.9%,
        rgba(255,206,85,.72) 64.2%,
        rgba(255,65,0,.49) 64.5%,
        rgba(0,0,0,.8) 64.8% 65.4%,
        transparent 65.7% 100%
    ),

    linear-gradient(
        48deg,
        transparent 0 18%,
        rgba(0,0,0,.7) 18.2% 18.8%,
        rgba(255,65,0,.35) 18.9%,
        rgba(255,190,70,.56) 19.2%,
        rgba(0,0,0,.72) 19.6% 20.1%,
        transparent 20.4% 100%
    );

    opacity:.4;

    filter:
    drop-shadow(0 0 5px rgba(255,60,0,.7));

}


.lx-title-card > *{

    position:relative;

    z-index:2;

}


/* =====================================================
   BADGE BATU BARA
===================================================== */

.lx-badge{

    border-radius:
    16px 22px 15px 20px /
    21px 15px 22px 17px !important;

    padding:9px 15px !important;

    color:#ffffff !important;

    background:

    repeating-linear-gradient(
        130deg,
        rgba(255,255,255,.035) 0 2px,
        transparent 2px 13px
    ),

    linear-gradient(
        145deg,
        #454545,
        #1d1d1d 58%,
        #090909
    ) !important;

    border:
    1px solid rgba(255,104,0,.75) !important;

    box-shadow:

    inset 3px 4px 6px rgba(255,255,255,.04),

    inset -5px -6px 8px rgba(0,0,0,.6),

    0 0 10px rgba(255,104,0,.55),

    0 0 20px rgba(255,43,0,.32) !important;

}


.lx-badge::before{

    width:10px !important;
    height:10px !important;

    border-radius:
    40% 60% 34% 66% /
    59% 39% 61% 41% !important;

    background:

    radial-gradient(
        circle at 35% 28%,
        #fff1c8 0 8%,
        #ffc55e 18%,
        #ff5500 52%,
        #6b0b00 78%,
        #160000 100%
    ) !important;

    box-shadow:

    0 0 6px #ffd08c,

    0 0 14px #ff6200,

    0 0 24px rgba(255,20,0,.78) !important;

    animation:
    emberRockPulse 1.6s ease-in-out infinite alternate;

}


/* =====================================================
   JUDUL DAN DIVIDER
===================================================== */

.lx-container h1{

    color:#ffffff !important;

    text-shadow:

    0 3px 3px rgba(0,0,0,.95),

    0 0 8px rgba(255,204,120,.9),

    0 0 19px rgba(255,72,0,.8),

    0 0 34px rgba(255,24,0,.48) !important;

}


.lx-divider{

    width:125px !important;

    height:6px !important;

    border-radius:
    45% 55% 38% 62% /
    65% 33% 67% 35% !important;

    background:

    linear-gradient(
        90deg,
        #181818 0%,
        #ff3b00 12%,
        #ffc25f 32%,
        #fff2c9 50%,
        #ffc25f 68%,
        #ff3b00 88%,
        #181818 100%
    ) !important;

    box-shadow:

    0 0 7px #ffd08a,

    0 0 17px #ff5500,

    0 0 29px rgba(255,24,0,.62) !important;

}


/* =====================================================
   BINGKAI GAMBAR PRODUK — BATU LAVA
===================================================== */

/*
   Selector dibuat luas agar tetap bekerja walaupun
   nama class gambar produk berbeda.
*/

.lx-hero figure,
.lx-mainbox .product-image,
.lx-mainbox .product-img,
.lx-mainbox .produk-image,
.lx-mainbox .produk-img,
.lx-mainbox .image-product,
.lx-mainbox .image-produk,
.lx-mainbox .lx-image,
.lx-mainbox .lx-product-image,
.lx-mainbox .product-picture,
.lx-mainbox .image-wrapper,
.lx-mainbox .img-wrapper{

    position:relative !important;

    isolation:isolate !important;

    overflow:visible !important;

    margin:0 !important;

    padding:12px !important;

    border-radius:
    25px 34px 22px 31px /
    32px 23px 35px 25px !important;

    background:

    radial-gradient(
        ellipse at 18% 13%,
        rgba(155,155,155,.19),
        transparent 32%
    ),

    repeating-linear-gradient(
        132deg,
        rgba(255,255,255,.027) 0 2px,
        transparent 2px 16px
    ),

    repeating-linear-gradient(
        43deg,
        rgba(0,0,0,.18) 0 3px,
        transparent 3px 27px
    ),

    linear-gradient(
        145deg,
        #626262 0%,
        #343434 25%,
        #171717 60%,
        #070707 100%
    ) !important;

    border:
    3px solid rgba(115,115,115,.95) !important;

    outline:
    2px solid rgba(9,9,9,.98) !important;

    outline-offset:-7px !important;

    box-shadow:

    inset 7px 8px 12px rgba(255,255,255,.055),

    inset -10px -13px 18px rgba(0,0,0,.76),

    inset 0 0 30px rgba(255,55,0,.09),

    0 18px 35px rgba(0,0,0,.82),

    0 0 14px rgba(255,96,0,.52),

    0 0 30px rgba(255,32,0,.32) !important;

}


/* Retakan bingkai gambar */

.lx-hero figure::before,
.lx-mainbox .product-image::before,
.lx-mainbox .product-img::before,
.lx-mainbox .produk-image::before,
.lx-mainbox .produk-img::before,
.lx-mainbox .image-product::before,
.lx-mainbox .image-produk::before,
.lx-mainbox .lx-image::before,
.lx-mainbox .lx-product-image::before,
.lx-mainbox .product-picture::before,
.lx-mainbox .image-wrapper::before,
.lx-mainbox .img-wrapper::before{

    content:"";

    position:absolute;

    inset:-3px;

    z-index:1;

    pointer-events:none;

    border-radius:inherit;

    background:

    linear-gradient(
        135deg,
        transparent 0 18%,
        rgba(0,0,0,.95) 18.2% 18.9%,
        rgba(255,48,0,.66) 19%,
        rgba(255,220,105,.98) 19.35%,
        rgba(255,68,0,.78) 19.7%,
        rgba(0,0,0,.95) 19.9% 20.6%,
        transparent 20.9% 100%
    ),

    linear-gradient(
        48deg,
        transparent 0 71%,
        rgba(0,0,0,.9) 71.2% 71.9%,
        rgba(255,55,0,.62) 72%,
        rgba(255,211,90,.96) 72.35%,
        rgba(255,62,0,.74) 72.7%,
        rgba(0,0,0,.92) 72.9% 73.6%,
        transparent 73.9% 100%
    ),

    linear-gradient(
        108deg,
        transparent 0 48%,
        rgba(255,75,0,.22) 48.2%,
        rgba(255,200,80,.52) 48.5%,
        transparent 48.8% 100%
    );

    opacity:.66;

    filter:

    drop-shadow(0 0 4px #ff7a00)

    drop-shadow(0 0 11px rgba(255,35,0,.8));

    animation:
    imageFrameLava 3.6s ease-in-out infinite alternate;

}


/* Cahaya lava di bawah bingkai */

.lx-hero figure::after,
.lx-mainbox .product-image::after,
.lx-mainbox .product-img::after,
.lx-mainbox .produk-image::after,
.lx-mainbox .produk-img::after,
.lx-mainbox .image-product::after,
.lx-mainbox .image-produk::after,
.lx-mainbox .lx-image::after,
.lx-mainbox .lx-product-image::after,
.lx-mainbox .product-picture::after,
.lx-mainbox .image-wrapper::after,
.lx-mainbox .img-wrapper::after{

    content:"";

    position:absolute;

    left:12%;
    right:12%;
    bottom:-13px;

    height:24px;

    z-index:-1;

    pointer-events:none;

    border-radius:50%;

    background:

    radial-gradient(
        ellipse,
        rgba(255,113,0,.72),
        rgba(255,36,0,.38) 42%,
        transparent 72%
    );

    filter:blur(8px);

    animation:
    imageLavaFloor 2.8s ease-in-out infinite alternate;

}


/* Gambar di dalam bingkai */

.lx-hero figure img,
.lx-mainbox .product-image img,
.lx-mainbox .product-img img,
.lx-mainbox .produk-image img,
.lx-mainbox .produk-img img,
.lx-mainbox .image-product img,
.lx-mainbox .image-produk img,
.lx-mainbox .lx-image img,
.lx-mainbox .lx-product-image img,
.lx-mainbox .product-picture img,
.lx-mainbox .image-wrapper img,
.lx-mainbox .img-wrapper img{

    position:relative !important;

    z-index:2 !important;

    display:block !important;

    width:100% !important;
    height:auto !important;

    border-radius:
    17px 25px 15px 22px /
    24px 16px 26px 18px !important;

    border:
    2px solid rgba(255,101,0,.58) !important;

    box-shadow:

    inset 0 0 20px rgba(0,0,0,.45),

    0 0 9px rgba(255,125,20,.66),

    0 0 22px rgba(255,39,0,.45) !important;

}


/*
   Fallback apabila gambar produk langsung berada
   di dalam hero tanpa wrapper.
*/

.lx-hero > img,
.lx-title-card > img,
.lx-info-panel > img{

    display:block !important;

    width:100% !important;
    height:auto !important;

    padding:11px !important;

    border-radius:
    25px 34px 22px 31px /
    32px 23px 35px 25px !important;

    background:

    repeating-linear-gradient(
        132deg,
        rgba(255,255,255,.025) 0 2px,
        transparent 2px 16px
    ),

    linear-gradient(
        145deg,
        #595959,
        #292929 42%,
        #080808
    ) !important;

    border:
    3px solid rgba(112,112,112,.94) !important;

    outline:
    2px solid #080808 !important;

    outline-offset:-7px !important;

    box-shadow:

    inset 6px 7px 11px rgba(255,255,255,.05),

    inset -9px -12px 17px rgba(0,0,0,.72),

    0 17px 34px rgba(0,0,0,.8),

    0 0 12px #ff7200,

    0 0 28px rgba(255,35,0,.48) !important;

}


/* =====================================================
   INFO PANEL — BATU BASALT
===================================================== */

.lx-info-panel{

    position:relative !important;

    overflow:hidden !important;

    padding:24px !important;

    border-radius:
    23px 17px 28px 20px /
    18px 29px 21px 26px !important;

    background:

    radial-gradient(
        ellipse at 15% 12%,
        rgba(145,145,145,.16),
        transparent 34%
    ),

    repeating-linear-gradient(
        133deg,
        rgba(255,255,255,.022) 0 2px,
        transparent 2px 18px
    ),

    repeating-linear-gradient(
        45deg,
        rgba(0,0,0,.16) 0 3px,
        transparent 3px 28px
    ),

    linear-gradient(
        145deg,
        #4f4f4f 0%,
        #303030 28%,
        #171717 64%,
        #070707 100%
    ) !important;

    border:
    2px solid rgba(105,105,105,.9) !important;

    outline:
    1px solid #080808 !important;

    outline-offset:-6px !important;

    box-shadow:

    inset 7px 8px 13px rgba(255,255,255,.045),

    inset -11px -14px 20px rgba(0,0,0,.74),

    inset 0 0 30px rgba(255,58,0,.07),

    0 15px 30px rgba(0,0,0,.73),

    0 0 19px rgba(255,56,0,.15) !important;

}


/* =====================================================
   INFO CARD — BATU KECIL
===================================================== */

.info-card{

    position:relative !important;

    overflow:hidden !important;

    min-height:112px !important;

    padding:19px 15px !important;

    border-radius:
    16px 23px 14px 21px /
    22px 15px 24px 17px !important;

    background:

    radial-gradient(
        ellipse at 18% 12%,
        rgba(145,145,145,.16),
        transparent 36%
    ),

    repeating-linear-gradient(
        132deg,
        rgba(255,255,255,.021) 0 2px,
        transparent 2px 17px
    ),

    linear-gradient(
        145deg,
        #494949 0%,
        #282828 38%,
        #111111 72%,
        #070707 100%
    ) !important;

    border:
    1px solid rgba(105,105,105,.87) !important;

    box-shadow:

    inset 5px 6px 9px rgba(255,255,255,.04),

    inset -8px -10px 14px rgba(0,0,0,.68),

    0 9px 18px rgba(0,0,0,.67),

    0 0 12px rgba(255,55,0,.13) !important;

}


.info-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;
    bottom:0;

    width:5px;

    background:

    linear-gradient(
        180deg,
        #ffd080,
        #ff6500 35%,
        #d91a00 67%,
        #ff8c20
    );

    box-shadow:

    0 0 7px #ff9b35,

    0 0 15px #ff3500;

    animation:
    lavaStoneEdge 2s ease-in-out infinite alternate;

}


.info-card:hover{

    transform:
    translateY(-6px)
    rotate(-.3deg) !important;

    border-color:
    rgba(255,106,0,.8) !important;

    box-shadow:

    inset 5px 6px 9px rgba(255,255,255,.045),

    inset -8px -10px 14px rgba(0,0,0,.68),

    0 16px 27px rgba(0,0,0,.76),

    0 0 16px rgba(255,113,0,.58),

    0 0 31px rgba(255,32,0,.3) !important;

}


.info-card .label{

    color:#ffbd72 !important;

    text-shadow:

    0 0 6px rgba(255,95,0,.66) !important;

}


.info-card .value{

    color:#ffffff !important;

    text-shadow:

    0 2px 3px rgba(0,0,0,.95),

    0 0 8px rgba(255,72,0,.55) !important;

}


/* =====================================================
   HIGHLIGHT BOX — BATU ABU TERANG
===================================================== */

.highlight-box{

    position:relative !important;

    overflow:hidden !important;

    padding:29px 31px !important;

    border-radius:
    22px 29px 19px 27px /
    28px 20px 31px 22px !important;

    background:

    radial-gradient(
        ellipse at 17% 10%,
        rgba(255,255,255,.19),
        transparent 34%
    ),

    repeating-linear-gradient(
        132deg,
        rgba(255,255,255,.045) 0 2px,
        transparent 2px 17px
    ),

    repeating-linear-gradient(
        44deg,
        rgba(0,0,0,.09) 0 3px,
        transparent 3px 28px
    ),

    linear-gradient(
        145deg,
        #b8b8b8 0%,
        #888888 26%,
        #545454 58%,
        #303030 100%
    ) !important;

    border:
    2px solid rgba(190,190,190,.68) !important;

    outline:
    1px solid rgba(25,25,25,.9) !important;

    outline-offset:-6px !important;

    box-shadow:

    inset 7px 8px 13px rgba(255,255,255,.13),

    inset -10px -13px 19px rgba(0,0,0,.42),

    0 17px 35px rgba(0,0,0,.72),

    0 0 18px rgba(255,68,0,.16) !important;

}


.highlight-box::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

    linear-gradient(
        126deg,
        transparent 0 68%,
        rgba(30,30,30,.78) 68.2% 68.8%,
        rgba(255,63,0,.42) 68.9%,
        rgba(255,203,80,.69) 69.2%,
        rgba(30,30,30,.78) 69.6% 70.2%,
        transparent 70.5% 100%
    );

    opacity:.48;

    filter:
    drop-shadow(0 0 5px rgba(255,64,0,.55));

}


.highlight-box p{

    position:relative;

    z-index:2;

    color:#ffffff !important;

    text-shadow:

    0 2px 3px rgba(0,0,0,.95),

    0 0 6px rgba(255,72,0,.25) !important;

}


/* =====================================================
   HEADING SECTION
===================================================== */

.lx-container h2{

    color:#ffffff !important;

    text-shadow:

    0 3px 3px rgba(0,0,0,.95),

    0 0 8px #ffc77e,

    0 0 18px #ff5c00,

    0 0 30px rgba(255,20,0,.48) !important;

}


.lx-container h2::after{

    width:135px !important;

    height:6px !important;

    border-radius:
    40% 60% 35% 65% /
    62% 37% 63% 38% !important;

    background:

    linear-gradient(
        90deg,
        transparent,
        #25110a,
        #ff4300,
        #ffc568,
        #fff2cf,
        #ffc568,
        #ff4300,
        #25110a,
        transparent
    ) !important;

    box-shadow:

    0 0 7px #ffd08d,

    0 0 17px #ff5700,

    0 0 28px rgba(255,26,0,.58) !important;

}


/* =====================================================
   REVIEW CARD — BATU VULKANIK
===================================================== */

.review-card{

    position:relative !important;

    overflow:hidden !important;

    min-height:210px !important;

    padding:23px !important;

    border-radius:
    19px 27px 17px 24px /
    26px 18px 29px 20px !important;

    background:

    radial-gradient(
        ellipse at 15% 10%,
        rgba(145,145,145,.17),
        transparent 34%
    ),

    repeating-linear-gradient(
        134deg,
        rgba(255,255,255,.022) 0 2px,
        transparent 2px 18px
    ),

    repeating-linear-gradient(
        46deg,
        rgba(0,0,0,.17) 0 3px,
        transparent 3px 29px
    ),

    linear-gradient(
        145deg,
        #4b4b4b 0%,
        #2b2b2b 32%,
        #141414 66%,
        #070707 100%
    ) !important;

    border:
    1px solid rgba(103,103,103,.9) !important;

    box-shadow:

    inset 6px 7px 11px rgba(255,255,255,.04),

    inset -9px -12px 17px rgba(0,0,0,.7),

    0 14px 28px rgba(0,0,0,.72),

    0 0 14px rgba(255,58,0,.14) !important;

}


/* Garis lava atas review */

.review-card::before{

    content:"" !important;

    position:absolute !important;

    top:0 !important;
    left:0 !important;

    width:100% !important;
    height:6px !important;

    background:

    linear-gradient(
        90deg,
        #160000,
        #ff3c00,
        #ffc05c,
        #fff0c6,
        #ffc05c,
        #ff3c00,
        #160000
    ) !important;

    box-shadow:

    0 0 7px #ffad45,

    0 0 16px #ff3900 !important;

    animation:
    lavaReviewLine 2.4s ease-in-out infinite alternate;

}


.review-card::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

    linear-gradient(
        127deg,
        transparent 0 72%,
        rgba(0,0,0,.74) 72.2% 72.8%,
        rgba(255,60,0,.38) 72.9%,
        rgba(255,196,70,.58) 73.2%,
        rgba(0,0,0,.74) 73.6% 74.2%,
        transparent 74.5% 100%
    );

    opacity:.35;

}


.review-card > *{

    position:relative;

    z-index:2;

}


.review-card:hover{

    transform:
    translateY(-8px)
    rotate(.25deg) !important;

    border-color:
    rgba(255,100,0,.76) !important;

    box-shadow:

    inset 6px 7px 11px rgba(255,255,255,.045),

    inset -9px -12px 17px rgba(0,0,0,.7),

    0 20px 36px rgba(0,0,0,.8),

    0 0 17px rgba(255,105,0,.58),

    0 0 33px rgba(255,32,0,.28) !important;

}


.review-stars{

    color:#ffad46 !important;

    text-shadow:

    0 0 7px #ffd090,

    0 0 16px #ff5b00 !important;

}


.review-date{

    border-radius:
    15px 21px 14px 19px /
    20px 14px 22px 16px !important;

    background:

    repeating-linear-gradient(
        130deg,
        rgba(255,255,255,.03) 0 2px,
        transparent 2px 12px
    ),

    linear-gradient(
        145deg,
        #3f3f3f,
        #171717
    ) !important;

    border:
    1px solid rgba(255,98,0,.72) !important;

    box-shadow:

    inset 3px 4px 6px rgba(255,255,255,.035),

    0 0 10px rgba(255,72,0,.38) !important;

}


/* =====================================================
   FINAL TEXT VISIBILITY
===================================================== */

.lx-mainbox,
.lx-mainbox *{

    color:#ffffff;

}


.review-text{

    color:#eeeeee !important;

}


.review-name{

    color:#ffffff !important;

}


.review-date{

    color:#ffffff !important;

}


.lx-mainbox *::selection{

    background:#ff5b00 !important;

    color:#ffffff !important;

}


/* =====================================================
   ANIMASI
===================================================== */

@keyframes volcanicMainHeat{

    0%{

        box-shadow:

        inset 9px 10px 16px rgba(255,255,255,.05),

        inset -14px -18px 28px rgba(0,0,0,.82),

        inset 0 0 55px rgba(255,55,0,.07),

        0 30px 75px rgba(0,0,0,.95),

        0 0 18px rgba(255,55,0,.17);

    }

    100%{

        box-shadow:

        inset 9px 10px 16px rgba(255,255,255,.06),

        inset -14px -18px 28px rgba(0,0,0,.82),

        inset 0 0 83px rgba(255,72,0,.14),

        0 30px 75px rgba(0,0,0,.95),

        0 0 32px rgba(255,70,0,.34),

        0 0 58px rgba(255,26,0,.15);

    }

}


@keyframes lavaCrackPulse{

    0%{

        opacity:.30;

        filter:

        brightness(.8)

        drop-shadow(0 0 2px rgba(255,60,0,.65))

        drop-shadow(0 0 7px rgba(255,24,0,.45));

    }

    100%{

        opacity:.66;

        filter:

        brightness(1.38)

        drop-shadow(0 0 5px rgba(255,130,25,.94))

        drop-shadow(0 0 14px rgba(255,34,0,.75));

    }

}


@keyframes imageFrameLava{

    0%{

        opacity:.42;

        filter:

        brightness(.82)

        drop-shadow(0 0 3px #ff5b00)

        drop-shadow(0 0 7px rgba(255,25,0,.55));

    }

    100%{

        opacity:.82;

        filter:

        brightness(1.4)

        drop-shadow(0 0 6px #ffc169)

        drop-shadow(0 0 16px rgba(255,42,0,.88));

    }

}


@keyframes imageLavaFloor{

    from{

        opacity:.45;

        transform:scaleX(.88);

    }

    to{

        opacity:.95;

        transform:scaleX(1.08);

    }

}


@keyframes emberRockPulse{

    from{

        transform:
        scale(.82)
        rotate(-7deg);

        filter:brightness(.75);

    }

    to{

        transform:
        scale(1.25)
        rotate(8deg);

        filter:brightness(1.45);

    }

}


@keyframes lavaStoneEdge{

    from{

        filter:brightness(.72);

        box-shadow:

        0 0 5px #ff7600,

        0 0 11px #ff2800;

    }

    to{

        filter:brightness(1.42);

        box-shadow:

        0 0 10px #ffd080,

        0 0 23px #ff4700;

    }

}


@keyframes lavaReviewLine{

    from{

        filter:brightness(.78);

    }

    to{

        filter:brightness(1.4);

    }

}


/* =====================================================
   RESPONSIVE TABLET
===================================================== */

@media(max-width:980px){

    .lx-mainbox{

        padding:30px !important;

    }

    .lx-hero{

        grid-template-columns:1fr !important;

    }

}


/* =====================================================
   RESPONSIVE MOBILE
===================================================== */

@media(max-width:640px){

    .lx-container{

        padding:0 10px !important;

    }

    .lx-mainbox{

        padding:22px 17px !important;

        border-radius:
        25px 19px 28px 21px /
        20px 29px 18px 26px !important;

    }

    .lx-title-card{

        padding:23px 19px !important;

    }

    .lx-info-panel{

        padding:18px !important;

    }

    .info-card{

        padding:17px 13px !important;

    }

    .highlight-box{

        padding:23px 19px !important;

    }

    .review-card{

        padding:21px 18px !important;

    }

    .lx-hero figure,
    .lx-mainbox .product-image,
    .lx-mainbox .product-img,
    .lx-mainbox .produk-image,
    .lx-mainbox .produk-img,
    .lx-mainbox .image-product,
    .lx-mainbox .image-produk,
    .lx-mainbox .lx-image,
    .lx-mainbox .lx-product-image,
    .lx-mainbox .product-picture,
    .lx-mainbox .image-wrapper,
    .lx-mainbox .img-wrapper{

        padding:9px !important;

    }

}


/* =====================================================
   REDUCE MOTION
===================================================== */

@media(prefers-reduced-motion:reduce){

    .lx-mainbox,
    .lx-mainbox::before,
    .lx-badge::before,
    .info-card::before,
    .review-card::before,
    .lx-hero figure::before,
    .lx-hero figure::after,
    .lx-mainbox .product-image::before,
    .lx-mainbox .product-image::after,
    .lx-mainbox .product-img::before,
    .lx-mainbox .product-img::after,
    .lx-mainbox .produk-image::before,
    .lx-mainbox .produk-image::after,
    .lx-mainbox .produk-img::before,
    .lx-mainbox .produk-img::after,
    .lx-mainbox .image-product::before,
    .lx-mainbox .image-product::after,
    .lx-mainbox .image-produk::before,
    .lx-mainbox .image-produk::after,
    .lx-mainbox .lx-image::before,
    .lx-mainbox .lx-image::after,
    .lx-mainbox .lx-product-image::before,
    .lx-mainbox .lx-product-image::after{

        animation:none !important;

    }

}




/* =====================================================
   FAQ APOCALYPSE VOLCANIC ROCK STYLE
   BATU VULKANIK + RETAKAN LAVA
   POSISI DAN LEBAR TETAP
===================================================== */


/* =====================================================
   CONTAINER FAQ
===================================================== */

#faq-table{

    max-width:900px;

    margin:30px auto;

    font-family:Arial,Helvetica,sans-serif;

}


/* =====================================================
   ITEM FAQ — LEMPENGAN BATU VULKANIK
===================================================== */

.faq-item{

    position:relative;

    isolation:isolate;

    margin-bottom:15px;

    border-radius:14px;

    overflow:hidden;

    border:

    1px solid rgba(105,105,105,.9);

    background:

    radial-gradient(
        ellipse at 15% 10%,
        rgba(145,145,145,.17),
        transparent 34%
    ),

    radial-gradient(
        ellipse at 88% 92%,
        rgba(255,58,0,.09),
        transparent 34%
    ),

    repeating-linear-gradient(
        133deg,
        rgba(255,255,255,.022) 0 2px,
        transparent 2px 18px
    ),

    repeating-linear-gradient(
        45deg,
        rgba(0,0,0,.17) 0 3px,
        transparent 3px 29px
    ),

    linear-gradient(
        145deg,
        #4b4b4b 0%,
        #2c2c2c 30%,
        #151515 68%,
        #070707 100%
    );

    box-shadow:

    inset 6px 7px 11px rgba(255,255,255,.04),

    inset -9px -12px 17px rgba(0,0,0,.7),

    inset 0 0 26px rgba(255,55,0,.06),

    0 8px 25px rgba(0,0,0,.58),

    0 0 13px rgba(255,58,0,.12);

    transition:

    border-color .3s ease,

    box-shadow .3s ease;

}


/* =====================================================
   RETAKAN LAVA PADA ITEM
===================================================== */

.faq-item::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    z-index:0;

    background:

    linear-gradient(
        128deg,
        transparent 0 68%,
        rgba(0,0,0,.76) 68.2% 68.7%,
        rgba(255,60,0,.38) 68.8%,
        rgba(255,202,80,.62) 69.05%,
        rgba(255,62,0,.42) 69.3%,
        rgba(0,0,0,.77) 69.5% 70%,
        transparent 70.2% 100%
    ),

    linear-gradient(
        48deg,
        transparent 0 19%,
        rgba(0,0,0,.68) 19.2% 19.7%,
        rgba(255,65,0,.3) 19.8%,
        rgba(255,185,70,.48) 20.05%,
        rgba(0,0,0,.7) 20.4% 20.9%,
        transparent 21.1% 100%
    );

    opacity:.35;

    filter:

    drop-shadow(0 0 3px rgba(255,75,0,.6))

    drop-shadow(0 0 8px rgba(255,25,0,.38));

    transition:.3s;

}


/* TEKSTUR LUBANG BATU */

.faq-item::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    z-index:0;

    background:

    radial-gradient(
        circle at 12% 25%,
        rgba(0,0,0,.7) 0 2px,
        transparent 7px
    ),

    radial-gradient(
        circle at 84% 70%,
        rgba(0,0,0,.72) 0 3px,
        transparent 9px
    ),

    radial-gradient(
        circle,
        rgba(255,255,255,.055) 0 1px,
        transparent 1.6px
    ),

    radial-gradient(
        circle,
        rgba(0,0,0,.34) 0 1.5px,
        transparent 2px
    );

    background-size:

    auto,
    auto,
    32px 34px,
    47px 43px;

    background-position:

    center,
    center,
    4px 6px,
    15px 19px;

    opacity:.48;

    mix-blend-mode:overlay;

}


.faq-item:hover{

    border-color:

    rgba(255,94,0,.72);

    box-shadow:

    inset 6px 7px 11px rgba(255,255,255,.045),

    inset -9px -12px 17px rgba(0,0,0,.7),

    inset 0 0 32px rgba(255,55,0,.09),

    0 12px 35px rgba(0,0,0,.7),

    0 0 17px rgba(255,104,0,.34),

    0 0 30px rgba(255,32,0,.18);

}


.faq-item:hover::before{

    opacity:.55;

}


/* =====================================================
   PERTANYAAN — BATU BASALT
===================================================== */

.faq-question{

    width:100%;

    padding:18px 55px 18px 20px;

    background:

    radial-gradient(
        ellipse at 15% 0%,
        rgba(145,145,145,.16),
        transparent 40%
    ),

    repeating-linear-gradient(
        132deg,
        rgba(255,255,255,.022) 0 2px,
        transparent 2px 17px
    ),

    linear-gradient(
        145deg,
        #4d4d4d 0%,
        #292929 38%,
        #111111 76%,
        #070707 100%
    );

    color:#ffffff;

    border:none;

    cursor:pointer;

    font-size:16px;

    font-weight:700;

    text-align:left;

    position:relative;

    z-index:2;

    text-shadow:

    0 2px 3px rgba(0,0,0,.95),

    0 0 6px rgba(255,72,0,.3);

    transition:

    background .3s ease,

    box-shadow .3s ease;

}


.faq-question:hover{

    background:

    radial-gradient(
        ellipse at 15% 0%,
        rgba(175,175,175,.18),
        transparent 42%
    ),

    repeating-linear-gradient(
        132deg,
        rgba(255,255,255,.026) 0 2px,
        transparent 2px 17px
    ),

    linear-gradient(
        145deg,
        #585858 0%,
        #303030 38%,
        #171717 76%,
        #090909 100%
    );

    box-shadow:

    inset 0 0 22px rgba(255,62,0,.07);

}


/* =====================================================
   ICON PLUS — BATU LAVA
===================================================== */

.faq-question::after{

    content:"+";

    position:absolute;

    right:20px;

    top:50%;

    transform:translateY(-50%);

    width:30px;

    height:30px;

    border-radius:

    45% 55% 38% 62% /
    60% 40% 60% 40%;

    background:

    radial-gradient(
        circle at 35% 28%,
        #fff0c5 0 8%,
        #ffc252 20%,
        #ff5a00 52%,
        #7b0d00 78%,
        #180000 100%
    );

    color:#ffffff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    font-weight:900;

    border:

    1px solid rgba(255,190,100,.75);

    box-shadow:

    inset 2px 3px 4px rgba(255,255,255,.18),

    inset -3px -4px 6px rgba(80,0,0,.55),

    0 0 7px #ffd08c,

    0 0 15px #ff6000,

    0 0 25px rgba(255,25,0,.65);

    text-shadow:

    0 1px 2px rgba(0,0,0,.85);

    transition:

    transform .3s ease,

    filter .3s ease,

    box-shadow .3s ease;

    animation:

    faqEmberPulse 1.8s ease-in-out infinite alternate;

}


/* =====================================================
   ACTIVE ICON
===================================================== */

.faq-item.active .faq-question::after{

    content:"−";

    transform:

    translateY(-50%)
    rotate(180deg);

    background:

    radial-gradient(
        circle at 35% 28%,
        #ffffff 0 8%,
        #ffd990 20%,
        #ff7300 52%,
        #9e1600 78%,
        #210000 100%
    );

    box-shadow:

    inset 2px 3px 4px rgba(255,255,255,.22),

    inset -3px -4px 6px rgba(80,0,0,.5),

    0 0 9px #ffe1a5,

    0 0 20px #ff6500,

    0 0 32px rgba(255,25,0,.72);

}


/* =====================================================
   JAWABAN — RUANG BATU GELAP
===================================================== */

.faq-answer{

    position:relative;

    z-index:2;

    max-height:0;

    overflow:hidden;

    transition:

    max-height .4s ease,

    padding .3s ease;

    background:

    radial-gradient(
        ellipse at 85% 100%,
        rgba(255,58,0,.07),
        transparent 40%
    ),

    repeating-linear-gradient(
        132deg,
        rgba(255,255,255,.014) 0 2px,
        transparent 2px 21px
    ),

    linear-gradient(
        145deg,
        #1f1f1f 0%,
        #101010 52%,
        #050505 100%
    );

    color:#eeeeee;

    line-height:1.8;

    padding:0 20px;

    border-top:

    1px solid rgba(255,78,0,.22);

    box-shadow:

    inset 0 8px 14px rgba(0,0,0,.48),

    inset 0 0 20px rgba(255,55,0,.035);

}


.faq-item.active .faq-answer{

    padding:18px 20px;

    max-height:500px;

}


/* =====================================================
   TEXT JAWABAN
===================================================== */

.faq-answer p{

    position:relative;

    z-index:2;

    color:#eeeeee;

    text-shadow:

    0 2px 3px rgba(0,0,0,.92),

    0 0 5px rgba(255,72,0,.2);

}


/* =====================================================
   ITEM ACTIVE — LAVA MENYALA
===================================================== */

.faq-item.active{

    border-color:

    rgba(255,105,0,.82);

    box-shadow:

    inset 6px 7px 11px rgba(255,255,255,.045),

    inset -9px -12px 17px rgba(0,0,0,.7),

    inset 0 0 35px rgba(255,60,0,.11),

    0 0 16px rgba(255,120,25,.45),

    0 0 32px rgba(255,42,0,.28),

    0 13px 35px rgba(0,0,0,.72);

}


.faq-item.active::before{

    opacity:.72;

    filter:

    brightness(1.35)

    drop-shadow(0 0 5px rgba(255,130,25,.9))

    drop-shadow(0 0 14px rgba(255,34,0,.7));

    animation:

    faqLavaCrackPulse 2.6s ease-in-out infinite alternate;

}


/* =====================================================
   FINAL TEXT VISIBILITY
===================================================== */

.faq-question,
.faq-question *{

    color:#ffffff !important;

}


.faq-answer,
.faq-answer *{

    color:#eeeeee !important;

}


.faq-question::selection,
.faq-answer *::selection{

    background:#ff5b00;

    color:#ffffff;

}


/* =====================================================
   ANIMASI
===================================================== */

@keyframes faqEmberPulse{

    0%{

        filter:brightness(.82);

        box-shadow:

        inset 2px 3px 4px rgba(255,255,255,.16),

        inset -3px -4px 6px rgba(80,0,0,.55),

        0 0 5px #ffb55c,

        0 0 11px #ff4900,

        0 0 18px rgba(255,25,0,.55);

    }

    100%{

        filter:brightness(1.35);

        box-shadow:

        inset 2px 3px 4px rgba(255,255,255,.22),

        inset -3px -4px 6px rgba(80,0,0,.5),

        0 0 9px #ffe0a1,

        0 0 20px #ff6800,

        0 0 30px rgba(255,25,0,.72);

    }

}


@keyframes faqLavaCrackPulse{

    0%{

        opacity:.45;

        filter:

        brightness(.85)

        drop-shadow(0 0 3px rgba(255,65,0,.62))

        drop-shadow(0 0 8px rgba(255,25,0,.42));

    }

    100%{

        opacity:.78;

        filter:

        brightness(1.4)

        drop-shadow(0 0 6px rgba(255,135,25,.9))

        drop-shadow(0 0 15px rgba(255,35,0,.72));

    }

}


/* =====================================================
   MOBILE — UKURAN ASLI DIPERTAHANKAN
===================================================== */

@media(max-width:768px){

    .faq-question{

        font-size:15px;

        padding:16px 50px 16px 15px;

    }

    .faq-answer{

        font-size:14px;

    }

}


/* =====================================================
   REDUCE MOTION
===================================================== */

@media(prefers-reduced-motion:reduce){

    .faq-question::after,
    .faq-item.active::before{

        animation:none !important;

    }

}




/* ==========================================
   FOOTER APOCALYPSE VOLCANIC ROCK STYLE
   BATU VULKANIK + RETAKAN LAVA
   POSISI, LEBAR DAN PADDING TETAP
========================================== */


.mw-footer{

    position:relative;

    isolation:isolate;

    overflow:hidden;

    margin-top:30px;

    padding:20px 15px;

    text-align:center;

    background:

    /* Cahaya lava dari bagian atas */
    radial-gradient(
        circle at top center,
        rgba(255,92,0,.16),
        transparent 38%
    ),

    /* Bara lava bagian bawah */
    radial-gradient(
        circle at bottom left,
        rgba(255,42,0,.13),
        transparent 46%
    ),

    radial-gradient(
        circle at bottom right,
        rgba(255,110,0,.09),
        transparent 42%
    ),

    /* Tonjolan permukaan batu */
    radial-gradient(
        ellipse at 18% 22%,
        rgba(145,145,145,.16),
        transparent 32%
    ),

    radial-gradient(
        ellipse at 82% 70%,
        rgba(110,110,110,.13),
        transparent 30%
    ),

    /* Serat batu kasar */
    repeating-linear-gradient(
        132deg,
        rgba(255,255,255,.022) 0 2px,
        transparent 2px 18px
    ),

    repeating-linear-gradient(
        44deg,
        rgba(0,0,0,.17) 0 3px,
        transparent 3px 30px
    ),

    /* Dasar batu basalt */
    linear-gradient(
        145deg,
        #4e4e4e 0%,
        #2d2d2d 25%,
        #171717 55%,
        #080808 78%,
        #252525 100%
    );

    border-top:

    1px solid rgba(255,89,0,.72);

    color:#ffffff;

    font-size:12px;

    font-weight:700;

    border-radius:14px;

    box-shadow:

    inset 6px 7px 11px rgba(255,255,255,.04),

    inset -9px -11px 17px rgba(0,0,0,.7),

    inset 0 0 28px rgba(255,55,0,.07),

    0 -5px 30px rgba(255,55,0,.18),

    0 8px 25px rgba(0,0,0,.58),

    0 0 15px rgba(255,72,0,.13);

}


/* ==========================================
   RETAKAN LAVA FOOTER
========================================== */

.mw-footer::before{

    content:"";

    position:absolute;

    inset:0;

    width:auto;
    height:auto;

    top:0;
    left:0;

    pointer-events:none;

    z-index:0;

    transform:none;

    background:

    /* Retakan kiri */
    linear-gradient(
        134deg,
        transparent 0 18%,
        rgba(0,0,0,.85) 18.2% 18.7%,
        rgba(255,51,0,.46) 18.8%,
        rgba(255,205,80,.8) 19.05%,
        rgba(255,66,0,.53) 19.3%,
        rgba(0,0,0,.87) 19.5% 20%,
        transparent 20.2% 100%
    ),

    /* Retakan tengah */
    linear-gradient(
        58deg,
        transparent 0 52%,
        rgba(0,0,0,.83) 52.2% 52.7%,
        rgba(255,58,0,.42) 52.8%,
        rgba(255,214,95,.76) 53.05%,
        rgba(255,60,0,.49) 53.3%,
        rgba(0,0,0,.84) 53.5% 54%,
        transparent 54.2% 100%
    ),

    /* Retakan kanan */
    linear-gradient(
        112deg,
        transparent 0 79%,
        rgba(0,0,0,.82) 79.2% 79.7%,
        rgba(255,55,0,.38) 79.8%,
        rgba(255,195,75,.69) 80.05%,
        rgba(255,55,0,.44) 80.3%,
        rgba(0,0,0,.84) 80.5% 81%,
        transparent 81.2% 100%
    ),

    /* Cabang retakan kecil */
    repeating-linear-gradient(
        151deg,
        transparent 0 105px,
        rgba(0,0,0,.42) 106px,
        rgba(255,62,0,.25) 107px,
        rgba(255,185,65,.38) 108px,
        rgba(0,0,0,.42) 109px,
        transparent 111px 245px
    );

    opacity:.43;

    filter:

    drop-shadow(0 0 3px rgba(255,92,0,.72))

    drop-shadow(0 0 9px rgba(255,28,0,.48));

    animation:

    footerLavaCrack 4s ease-in-out infinite alternate;

}


/* ==========================================
   GARIS LAVA BAGIAN BAWAH
========================================== */

.mw-footer::after{

    content:"";

    position:absolute;

    bottom:0;

    left:15%;

    width:70%;

    height:2px;

    z-index:1;

    background:

    linear-gradient(
        90deg,
        transparent,
        #481000,
        #ff3d00,
        #ff9b32,
        #ffe0a0,
        #ff9b32,
        #ff3d00,
        #481000,
        transparent
    );

    box-shadow:

    0 0 6px #ffc267,

    0 0 14px #ff5a00,

    0 0 24px rgba(255,30,0,.6);

    animation:

    footerLavaLine 2.5s ease-in-out infinite alternate;

}


/* ==========================================
   TEXT FOOTER
========================================== */

.mw-footer span{

    position:relative;

    z-index:2;

    color:#ffffff;

    text-shadow:

    0 2px 3px rgba(0,0,0,.95),

    0 0 7px rgba(255,200,110,.82),

    0 0 15px rgba(255,72,0,.62),

    0 0 24px rgba(255,28,0,.32);

}


/* LINK FOOTER JIKA ADA */

.mw-footer a{

    position:relative;

    z-index:2;

    color:#ffb866;

    text-decoration:none;

    text-shadow:

    0 0 6px rgba(255,198,100,.8),

    0 0 14px rgba(255,75,0,.52);

    transition:

    color .3s ease,

    text-shadow .3s ease;

}


.mw-footer a:hover{

    color:#ffffff;

    text-shadow:

    0 0 7px #ffffff,

    0 0 16px #ff7500,

    0 0 25px rgba(255,30,0,.65);

}


/* ==========================================
   FINAL TEXT VISIBILITY
========================================== */

.mw-footer,
.mw-footer *{

    color:#ffffff;

}


.mw-footer a{

    color:#ffb866;

}


.mw-footer *::selection{

    background:#ff5b00;

    color:#ffffff;

}


/* ==========================================
   ANIMASI RETAKAN LAVA
========================================== */

@keyframes footerLavaCrack{

    0%{

        opacity:.28;

        filter:

        brightness(.8)

        drop-shadow(0 0 2px rgba(255,62,0,.58))

        drop-shadow(0 0 6px rgba(255,25,0,.38));

    }

    100%{

        opacity:.63;

        filter:

        brightness(1.38)

        drop-shadow(0 0 5px rgba(255,130,25,.88))

        drop-shadow(0 0 13px rgba(255,35,0,.68));

    }

}


/* ==========================================
   ANIMASI GARIS LAVA
========================================== */

@keyframes footerLavaLine{

    0%{

        opacity:.55;

        filter:brightness(.8);

        box-shadow:

        0 0 4px #ff9c32,

        0 0 10px #ff4600,

        0 0 17px rgba(255,25,0,.42);

    }

    100%{

        opacity:1;

        filter:brightness(1.4);

        box-shadow:

        0 0 8px #ffe0a0,

        0 0 18px #ff6800,

        0 0 29px rgba(255,30,0,.68);

    }

}


/* ==========================================
   REDUCE MOTION
========================================== */

@media(prefers-reduced-motion:reduce){

    .mw-footer::before,
    .mw-footer::after{

        animation:none !important;

    }

}



/* =====================================================
   MAWARTOTO POPUP APOCALYPSE VOLCANIC ROCK
   BATU VULKANIK + RETAKAN LAVA
   POSISI DAN UKURAN TETAP
===================================================== */


/* =====================================================
   GLOBAL
===================================================== */

.login-slot-gacor{

    margin:0;

    padding:0;

    font-family:
    "Poppins",
    "Segoe UI",
    Arial,
    sans-serif;

    background:transparent;

    color:#ffffff;

}


/* =====================================================
   OVERLAY KIAMAT
===================================================== */

.popup-overlay{

    position:fixed;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:18px;

    background:

    radial-gradient(
        circle at top left,
        rgba(255,70,0,.22),
        transparent 35%
    ),

    radial-gradient(
        circle at bottom right,
        rgba(170,0,0,.28),
        transparent 38%
    ),

    radial-gradient(
        circle at center,
        rgba(255,115,0,.08),
        transparent 48%
    ),

    repeating-linear-gradient(
        125deg,
        rgba(255,255,255,.012) 0 2px,
        transparent 2px 24px
    ),

    rgba(5,0,0,.91);

    backdrop-filter:blur(8px);

    z-index:9999;

}


/* =====================================================
   POPUP CONTAINER BATU VULKANIK
===================================================== */

.popup-container{

    position:relative;

    width:min(92vw,430px);

    overflow:hidden;

    border-radius:28px;

    text-align:center;

    isolation:isolate;

    background:

    radial-gradient(
        circle at top center,
        rgba(255,105,0,.18),
        transparent 34%
    ),

    radial-gradient(
        circle at bottom left,
        rgba(255,42,0,.12),
        transparent 42%
    ),

    radial-gradient(
        ellipse at 18% 20%,
        rgba(155,155,155,.18),
        transparent 30%
    ),

    radial-gradient(
        ellipse at 82% 75%,
        rgba(115,115,115,.14),
        transparent 31%
    ),

    repeating-linear-gradient(
        132deg,
        rgba(255,255,255,.024) 0 2px,
        transparent 2px 18px
    ),

    repeating-linear-gradient(
        45deg,
        rgba(0,0,0,.18) 0 3px,
        transparent 3px 31px
    ),

    linear-gradient(
        145deg,
        #5a5a5a 0%,
        #383838 18%,
        #202020 44%,
        #0d0d0d 72%,
        #282828 92%,
        #080808 100%
    );

    border:

    1px solid rgba(135,135,135,.92);

    box-shadow:

    inset 8px 9px 15px rgba(255,255,255,.05),

    inset -13px -17px 25px rgba(0,0,0,.8),

    inset 0 0 55px rgba(255,55,0,.1),

    0 30px 80px rgba(0,0,0,.92),

    0 0 28px rgba(255,90,0,.35),

    0 0 55px rgba(255,25,0,.2);

    animation:

    popupRise .65s ease both,

    popupLavaGlow 4s infinite;

}


/* =====================================================
   ANIMASI MASUK
===================================================== */

@keyframes popupRise{

    0%{

        opacity:0;

        transform:translateY(40px) scale(.9);

    }

    100%{

        opacity:1;

        transform:none;

    }

}


/* =====================================================
   GLOW LAVA POPUP
===================================================== */

@keyframes popupLavaGlow{

    0%,100%{

        box-shadow:

        inset 8px 9px 15px rgba(255,255,255,.05),

        inset -13px -17px 25px rgba(0,0,0,.8),

        inset 0 0 42px rgba(255,55,0,.08),

        0 30px 80px rgba(0,0,0,.9),

        0 0 25px rgba(255,72,0,.28),

        0 0 45px rgba(255,25,0,.15);

    }

    50%{

        box-shadow:

        inset 8px 9px 15px rgba(255,255,255,.06),

        inset -13px -17px 25px rgba(0,0,0,.8),

        inset 0 0 68px rgba(255,70,0,.16),

        0 30px 80px rgba(0,0,0,.9),

        0 0 42px rgba(255,105,0,.48),

        0 0 75px rgba(255,30,0,.28);

    }

}


/* =====================================================
   RETAKAN LAVA POPUP
===================================================== */

.popup-container::before{

    content:"";

    position:absolute;

    inset:12px;

    border-radius:22px;

    border:

    1px solid rgba(255,95,0,.25);

    z-index:2;

    pointer-events:none;

    background:

    linear-gradient(
        136deg,
        transparent 0 17%,
        rgba(0,0,0,.88) 17.2% 17.8%,
        rgba(255,45,0,.58) 17.9%,
        rgba(255,218,110,.92) 18.2%,
        rgba(255,62,0,.68) 18.5%,
        rgba(0,0,0,.9) 18.7% 19.3%,
        transparent 19.5% 100%
    ),

    linear-gradient(
        58deg,
        transparent 0 54%,
        rgba(0,0,0,.87) 54.2% 54.8%,
        rgba(255,55,0,.52) 54.9%,
        rgba(255,208,90,.85) 55.2%,
        rgba(255,62,0,.61) 55.5%,
        rgba(0,0,0,.88) 55.7% 56.3%,
        transparent 56.5% 100%
    ),

    linear-gradient(
        112deg,
        transparent 0 78%,
        rgba(0,0,0,.85) 78.2% 78.8%,
        rgba(255,58,0,.48) 78.9%,
        rgba(255,195,75,.8) 79.2%,
        rgba(255,55,0,.57) 79.5%,
        rgba(0,0,0,.87) 79.7% 80.3%,
        transparent 80.5% 100%
    );

    opacity:.58;

    filter:

    drop-shadow(0 0 4px rgba(255,105,0,.8))

    drop-shadow(0 0 12px rgba(255,30,0,.62));

    animation:

    popupCrackPulse 3.8s ease-in-out infinite alternate;

}


/* =====================================================
   EFEK CAHAYA LAVA BERJALAN
===================================================== */

.popup-container::after{

    content:"";

    position:absolute;

    top:-60%;

    left:-100%;

    width:80%;

    height:220%;

    background:

    linear-gradient(
        120deg,
        transparent,
        rgba(255,115,25,.0),
        rgba(255,180,80,.24),
        rgba(255,60,0,.2),
        transparent
    );

    transform:rotate(10deg);

    animation:

    popupLavaLight 7s infinite;

    z-index:5;

    pointer-events:none;

}


@keyframes popupLavaLight{

    0%{

        left:-120%;

    }

    45%,100%{

        left:130%;

    }

}


@keyframes popupCrackPulse{

    0%{

        opacity:.35;

        filter:

        brightness(.8)

        drop-shadow(0 0 3px rgba(255,62,0,.55))

        drop-shadow(0 0 8px rgba(255,25,0,.38));

    }

    100%{

        opacity:.72;

        filter:

        brightness(1.42)

        drop-shadow(0 0 6px rgba(255,135,25,.92))

        drop-shadow(0 0 15px rgba(255,35,0,.74));

    }

}


/* =====================================================
   CLOSE BUTTON BATU LAVA
===================================================== */

.close-btn{

    position:absolute;

    top:14px;

    right:14px;

    width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:

    radial-gradient(
        circle at 35% 28%,
        #666666 0 8%,
        #343434 35%,
        #171717 66%,
        #050505 100%
    ) !important;

    border:

    1px solid rgba(255,95,0,.85) !important;

    box-shadow:

    inset 3px 4px 6px rgba(255,255,255,.08),

    inset -5px -6px 8px rgba(0,0,0,.72),

    0 0 8px #ff9a35,

    0 0 20px rgba(255,55,0,.75);

    cursor:pointer;

    z-index:99999;

    transition:.3s;

}


/* GARIS X */

.close-btn::before,
.close-btn::after{

    content:"";

    position:absolute;

    width:18px;

    height:3px;

    border-radius:50px;

    background:#ffffff !important;

    box-shadow:

    0 0 7px #ffffff,

    0 0 14px #ff6200;

}


.close-btn::before{

    transform:rotate(45deg);

}


.close-btn::after{

    transform:rotate(-45deg);

}


/* HOVER CLOSE */

.close-btn:hover{

    background:

    radial-gradient(
        circle at 35% 28%,
        #fff0c5 0 7%,
        #ff9c32 22%,
        #ff3e00 55%,
        #5f0800 82%,
        #140000 100%
    ) !important;

    transform:rotate(90deg);

    box-shadow:

    inset 3px 4px 6px rgba(255,255,255,.12),

    inset -5px -6px 8px rgba(90,0,0,.6),

    0 0 11px #ffd18d,

    0 0 27px #ff5700,

    0 0 40px rgba(255,25,0,.62);

}


/* =====================================================
   BUTTON AREA
===================================================== */

.clk-btn-sgp{

    position:relative;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:12px;

    padding:18px;

    z-index:10;

}


/* =====================================================
   BUTTON UMUM
===================================================== */

.clk-btn-sgp a{

    overflow:hidden;

    position:relative;

    min-height:55px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:16px;

    font-weight:900;

    letter-spacing:1px;

    text-transform:uppercase;

    transition:.3s;

}


.clk-btn-sgp a::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

    linear-gradient(
        132deg,
        transparent 0 28%,
        rgba(0,0,0,.7) 28.2% 28.8%,
        rgba(255,70,0,.38) 28.9%,
        rgba(255,195,75,.64) 29.2%,
        rgba(0,0,0,.7) 29.6% 30.2%,
        transparent 30.4% 100%
    );

    opacity:.48;

}


.clk-btn-sgp a:hover{

    transform:translateY(-5px);

}


/* =====================================================
   LOGIN BUTTON BATU HITAM
===================================================== */

.login{

    color:#ffffff !important;

    background:

    radial-gradient(
        ellipse at 18% 12%,
        rgba(140,140,140,.16),
        transparent 38%
    ),

    repeating-linear-gradient(
        132deg,
        rgba(255,255,255,.022) 0 2px,
        transparent 2px 15px
    ),

    linear-gradient(
        145deg,
        #4c4c4c 0%,
        #252525 42%,
        #0c0c0c 100%
    );

    border:

    1px solid rgba(255,90,0,.76);

    text-shadow:

    0 2px 3px rgba(0,0,0,.95),

    0 0 8px #ff7000;

    box-shadow:

    inset 5px 6px 8px rgba(255,255,255,.04),

    inset -7px -9px 12px rgba(0,0,0,.7),

    0 0 16px rgba(255,85,0,.35);

}


.login:hover{

    background:

    radial-gradient(
        ellipse at 18% 12%,
        rgba(175,175,175,.18),
        transparent 38%
    ),

    repeating-linear-gradient(
        132deg,
        rgba(255,255,255,.028) 0 2px,
        transparent 2px 15px
    ),

    linear-gradient(
        145deg,
        #616161 0%,
        #333333 42%,
        #111111 100%
    );

    box-shadow:

    inset 5px 6px 8px rgba(255,255,255,.05),

    inset -7px -9px 12px rgba(0,0,0,.7),

    0 0 17px #ff8c22,

    0 0 32px rgba(255,45,0,.48);

}


/* =====================================================
   REGISTER BUTTON LAVA CAIR
===================================================== */

.register{

    color:#ffffff !important;

    background:

    radial-gradient(
        circle at 30% 20%,
        rgba(255,245,205,.8),
        transparent 12%
    ),

    radial-gradient(
        circle at 70% 80%,
        rgba(120,0,0,.55),
        transparent 34%
    ),

    linear-gradient(
        145deg,
        #fff0b8 0%,
        #ffb23d 18%,
        #ff5a00 45%,
        #c91a00 72%,
        #500500 100%
    );

    border:

    1px solid rgba(255,225,160,.9);

    text-shadow:

    0 2px 3px rgba(90,0,0,.9),

    0 0 8px rgba(255,255,255,.65);

    box-shadow:

    inset 4px 5px 8px rgba(255,255,255,.2),

    inset -7px -9px 13px rgba(100,0,0,.52),

    0 0 18px rgba(255,105,0,.72),

    0 0 32px rgba(255,30,0,.43);

    animation:

    registerLavaPulse 2.2s ease-in-out infinite alternate;

}


.register:hover{

    color:#ffffff !important;

    background:

    radial-gradient(
        circle at 30% 20%,
        rgba(255,255,255,.94),
        transparent 15%
    ),

    linear-gradient(
        145deg,
        #ffffff 0%,
        #ffd68b 18%,
        #ff7b00 48%,
        #e12600 75%,
        #650700 100%
    );

    box-shadow:

    inset 4px 5px 8px rgba(255,255,255,.26),

    inset -7px -9px 13px rgba(100,0,0,.5),

    0 0 22px #ffc164,

    0 0 42px #ff4a00,

    0 0 58px rgba(255,20,0,.5);

}


@keyframes registerLavaPulse{

    from{

        filter:brightness(.9);

    }

    to{

        filter:brightness(1.25);

    }

}


/* =====================================================
   POPUP FOOTER BATU
===================================================== */

.popup-footer{

    margin:10px 18px 20px;

    padding:16px;

    border-radius:18px;

    color:#ffffff;

    background:

    radial-gradient(
        ellipse at 15% 10%,
        rgba(145,145,145,.16),
        transparent 35%
    ),

    repeating-linear-gradient(
        133deg,
        rgba(255,255,255,.021) 0 2px,
        transparent 2px 17px
    ),

    linear-gradient(
        145deg,
        #464646 0%,
        #282828 40%,
        #101010 78%,
        #060606 100%
    );

    border:

    1px solid rgba(255,85,0,.45);

    box-shadow:

    inset 5px 6px 9px rgba(255,255,255,.04),

    inset -8px -10px 14px rgba(0,0,0,.67),

    inset 0 0 20px rgba(255,55,0,.06),

    0 0 17px rgba(255,70,0,.22);

    text-shadow:

    0 2px 3px rgba(0,0,0,.95),

    0 0 7px rgba(255,102,0,.55);

}


.popup-footer span{

    color:#ffb35b !important;

    text-shadow:

    0 0 7px #ffd08a,

    0 0 14px #ff5700 !important;

}


/* =====================================================
   IMAGE POPUP — BINGKAI BATU LAVA
===================================================== */

.popup-image{

    width:100%;

    display:block;

    position:relative;

    z-index:4;

    border-bottom:

    4px solid #252525;

    outline:

    1px solid rgba(255,85,0,.5);

    outline-offset:-5px;

    box-shadow:

    inset 0 -12px 20px rgba(0,0,0,.55),

    0 5px 0 #101010,

    0 7px 0 rgba(255,62,0,.42),

    0 9px 17px rgba(255,45,0,.45);

    filter:

    saturate(1.12)
    contrast(1.04);

}


/* Bingkai lava khusus area gambar */

.popup-container > img.popup-image{

    background:

    repeating-linear-gradient(
        132deg,
        rgba(255,255,255,.025) 0 2px,
        transparent 2px 14px
    ),

    linear-gradient(
        145deg,
        #5b5b5b,
        #292929 45%,
        #080808
    );

}


/* =====================================================
   TEKSTUR BINGKAI GAMBAR TAMBAHAN
===================================================== */

.popup-container .popup-image{

    clip-path:

    polygon(
        0 0,
        100% 0,
        100% 96%,
        97% 97%,
        94% 96%,
        90% 98%,
        85% 96%,
        80% 98%,
        75% 96%,
        70% 98%,
        65% 96%,
        60% 98%,
        55% 96%,
        50% 98%,
        45% 96%,
        40% 98%,
        35% 96%,
        30% 98%,
        25% 96%,
        20% 98%,
        15% 96%,
        10% 98%,
        5% 96%,
        0 98%
    );

}


/* =====================================================
   KONTEN DI ATAS EFEK
===================================================== */

.popup-container > *{

    position:relative;

    z-index:10;

}


/* =====================================================
   MOBILE RESPONSIVE — UKURAN ASLI
===================================================== */

@media(max-width:480px){

    .clk-btn-sgp{

        grid-template-columns:1fr;

    }

    .popup-container{

        width:95vw;

    }

    .close-btn{

        width:35px;

        height:35px;

    }

}


/* =====================================================
   FINAL TEXT VISIBILITY
===================================================== */

.popup-container,
.popup-container *{

    color:#ffffff;

}


.login,
.register{

    color:#ffffff !important;

}


.popup-footer span{

    color:#ffb35b !important;

}


.close-btn::before,
.close-btn::after{

    background:#ffffff !important;

}


.popup-container *::selection{

    background:#ff5600;

    color:#ffffff;

}


/* =====================================================
   REDUCE MOTION
===================================================== */

@media(prefers-reduced-motion:reduce){

    .popup-container,
    .popup-container::before,
    .popup-container::after,
    .register{

        animation:none !important;

    }

}


/* =====================================================
   FINAL POPUP FIX — TANPA SCROLL
   POPUP TETAP DI TENGAH DAN SELURUH ISI TERLIHAT
===================================================== */

/* Reset dasar halaman */
html,
body{
    margin:0 !important;
    padding:0 !important;
    width:100% !important;
    min-height:100% !important;
}

body{
    filter:none !important;
    transform:none !important;
    animation:none !important;
    overflow-x:hidden !important;
}

/* Efek background tidak boleh membuat area halaman melebar */
body::before,
body::after{
    pointer-events:none !important;
    max-width:100vw !important;
}

/* =====================================================
   HAPUS SPASI KOSONG DI BAWAH FOOTER
===================================================== */

footer,
footer.footer,
.mw-footer{
    margin-bottom:0 !important;
}

footer > :last-child,
footer.footer > :last-child,
.mw-footer > :last-child,
.footer-bottom > :last-child{
    margin-bottom:0 !important;
}

footer.footer::before,
footer.footer::after,
.footer-bottom::before,
.footer-bottom::after,
.mw-footer::before,
.mw-footer::after{
    pointer-events:none !important;
}

/* =====================================================
   OVERLAY POPUP — SELALU TEPAT DI TENGAH
===================================================== */

.popup-overlay{
    position:fixed !important;
    inset:0 !important;

    width:100vw !important;
    height:100vh !important;
    height:100dvh !important;

    margin:0 !important;
    padding:18px !important;

    box-sizing:border-box !important;

    align-items:center !important;
    justify-content:center !important;

    overflow:hidden !important;
    overscroll-behavior:none !important;

    transform:none !important;
    filter:none !important;

    z-index:2147483646 !important;
}

/*
   Tidak mengubah sistem tampil/sembunyi popup.
   Ketika popup aktif dan memakai flex, posisinya tetap di tengah.
*/
.popup-overlay:not([hidden]){
    align-items:center !important;
    justify-content:center !important;
}

/* =====================================================
   BOX POPUP — TANPA SCROLLBAR
===================================================== */

.popup-container{
    position:relative !important;

    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;

    flex:0 0 auto !important;

    margin:0 auto !important;

    max-width:430px !important;

    overflow:hidden !important;
    overscroll-behavior:none !important;

    transform-origin:center center !important;

    opacity:1;
    visibility:visible;

    z-index:1 !important;

    scrollbar-width:none !important;

    animation:
    popupStableEntrance .45s ease-out both,
    popupLavaGlow 4s ease-in-out 1s infinite !important;
}

.popup-container::-webkit-scrollbar,
.popup-overlay::-webkit-scrollbar{
    display:none !important;
    width:0 !important;
    height:0 !important;
}

@keyframes popupStableEntrance{
    from{
        opacity:0;
        transform:translate3d(0,20px,0) scale(.97);
    }

    to{
        opacity:1;
        transform:translate3d(0,0,0) scale(1);
    }
}

/* Lapisan dekorasi tidak menghalangi tombol */
.popup-container::before,
.popup-container::after{
    pointer-events:none !important;
}

.popup-container > *{
    position:relative;
    z-index:10;
}

.close-btn{
    position:absolute !important;
    z-index:2147483647 !important;
}

/* =====================================================
   DESKTOP DENGAN LAYAR PENDEK
   UKURAN DIRINGKAS, BUKAN DISCROLL
===================================================== */

@media(max-height:760px){

    .popup-overlay{
        padding:10px !important;
    }

    .popup-container{
        transform:scale(.90) !important;
    }

    .popup-image{
        max-height:270px !important;
        object-fit:cover !important;
        object-position:center !important;
    }

    .clk-btn-sgp{
        padding:12px !important;
        gap:9px !important;
    }

    .clk-btn-sgp a{
        min-height:48px !important;
    }

    .popup-footer{
        margin-top:7px !important;
        margin-bottom:12px !important;
        padding:11px !important;
    }

}

@media(max-height:650px){

    .popup-container{
        transform:scale(.80) !important;
    }

    .popup-image{
        max-height:230px !important;
    }

    .clk-btn-sgp{
        padding:10px !important;
        gap:8px !important;
    }

    .clk-btn-sgp a{
        min-height:44px !important;
    }

    .popup-footer{
        margin-top:5px !important;
        margin-bottom:9px !important;
        padding:9px !important;
    }

}

@media(max-height:560px){

    .popup-container{
        transform:scale(.70) !important;
    }

}

/* =====================================================
   MOBILE — TANPA SCROLL
===================================================== */

@media(max-width:480px){

    .popup-overlay{
        padding:
        max(10px, env(safe-area-inset-top))
        max(10px, env(safe-area-inset-right))
        max(10px, env(safe-area-inset-bottom))
        max(10px, env(safe-area-inset-left)) !important;
    }

    .popup-container{
        width:95vw !important;
        overflow:hidden !important;
    }

    .popup-image{
        max-height:42dvh !important;
        object-fit:cover !important;
        object-position:center !important;
    }

    .clk-btn-sgp{
        grid-template-columns:repeat(2,1fr) !important;
        padding:11px !important;
        gap:8px !important;
    }

    .clk-btn-sgp a{
        min-height:46px !important;
        font-size:13px !important;
    }

    .popup-footer{
        margin:7px 12px 11px !important;
        padding:10px !important;
        font-size:11px !important;
    }

    .close-btn{
        width:35px !important;
        height:35px !important;
    }

}

/* HP kecil dan pendek */
@media(max-width:480px) and (max-height:700px){

    .popup-container{
        transform:scale(.88) !important;
    }

    .popup-image{
        max-height:230px !important;
    }

}

@media(max-width:480px) and (max-height:600px){

    .popup-container{
        transform:scale(.76) !important;
    }

    .popup-image{
        max-height:200px !important;
    }

}

/* =====================================================
   REDUCE MOTION
===================================================== */

@media(prefers-reduced-motion:reduce){

    .popup-container{
        animation:none !important;
        opacity:1 !important;
    }

}

.lx-info-panel{
    position:relative;
    width:100%;
    padding:28px;
    border:1px solid rgba(255,215,0,.28);
    border-radius:22px;
    background:
        radial-gradient(circle at top right,rgba(255,215,0,.13),transparent 35%),
        linear-gradient(145deg,#171717 0%,#080808 100%);
    box-shadow:
        0 18px 45px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.06);
    overflow:hidden;
}

.lx-info-panel::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;
    background:linear-gradient(
        90deg,
        transparent,
        #ffb300,
        #fff176,
        #ffb300,
        transparent
    );
    animation:rtpLight 4s linear infinite;
}

@keyframes rtpLight{
    0%{
        transform:translateX(-100%);
    }
    100%{
        transform:translateX(100%);
    }
}

.rtp-title{
    position:relative;
    margin:0 0 24px;
    padding-bottom:16px;
    color:#fff;
    text-align:left;
    font-size:24px;
    font-weight:800;
    letter-spacing:.5px;
    text-transform:uppercase;
}

.rtp-title::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:80px;
    height:4px;
    border-radius:20px;
    background:linear-gradient(90deg,#ffb300,#fff176);
    box-shadow:0 0 14px rgba(255,193,7,.8);
}

.rtp-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
}

.rtp-item{
    position:relative;
    min-width:0;
    margin:0;
    padding:20px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:18px;
    background:
        linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.015)),
        #111;
    box-shadow:
        0 10px 25px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.05);
    overflow:hidden;
    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.rtp-item::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:5px;
    height:100%;
    background:linear-gradient(
        180deg,
        #fff176,
        #ffb300,
        #ff6f00
    );
    box-shadow:0 0 15px rgba(255,179,0,.7);
}

.rtp-item::after{
    content:"RTP LIVE";
    position:absolute;
    right:15px;
    bottom:12px;
    color:rgba(255,255,255,.035);
    font-size:28px;
    font-weight:900;
    letter-spacing:2px;
    pointer-events:none;
}

.rtp-item:hover{
    transform:translateY(-5px);
    border-color:rgba(255,193,7,.45);
    box-shadow:
        0 16px 35px rgba(0,0,0,.40),
        0 0 22px rgba(255,193,7,.15);
}

.rtp-top{
    position:relative;
    z-index:2;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:18px;
}

.game{
    min-width:0;
    color:#fff;
    font-size:17px;
    font-weight:750;
    line-height:1.35;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.status{
    flex-shrink:0;
    padding:6px 12px;
    border:1px solid transparent;
    border-radius:50px;
    font-size:11px;
    font-weight:800;
    letter-spacing:.8px;
    text-transform:uppercase;
}

.gacor{
    color:#72ffac;
    border-color:rgba(0,230,118,.30);
    background:rgba(0,230,118,.12);
    box-shadow:0 0 12px rgba(0,230,118,.15);
}

.hot{
    color:#ff8a80;
    border-color:rgba(255,61,61,.30);
    background:rgba(255,61,61,.12);
    box-shadow:0 0 12px rgba(255,61,61,.15);
}

.lucky{
    color:#ffd180;
    border-color:rgba(255,152,0,.30);
    background:rgba(255,152,0,.12);
    box-shadow:0 0 12px rgba(255,152,0,.15);
}

.progress{
    position:relative;
    z-index:2;
    width:calc(100% - 88px);
    height:11px;
    margin-top:7px;
    border:1px solid rgba(255,255,255,.06);
    border-radius:50px;
    background:#252525;
    box-shadow:inset 0 2px 5px rgba(0,0,0,.55);
    overflow:hidden;
}

.bar{
    position:relative;
    width:0;
    height:100%;
    border-radius:50px;
    background:linear-gradient(
        90deg,
        #00c853 0%,
        #64dd17 35%,
        #ffd600 70%,
        #ff9100 100%
    );
    box-shadow:
        0 0 8px rgba(255,214,0,.6),
        0 0 15px rgba(0,200,83,.25);
    transition:width .9s cubic-bezier(.4,0,.2,1);
    overflow:hidden;
}

.bar::after{
    content:"";
    position:absolute;
    top:0;
    left:-60%;
    width:45%;
    height:100%;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.65),
        transparent
    );
    animation:barShine 2.2s linear infinite;
}

@keyframes barShine{
    0%{
        left:-60%;
    }
    100%{
        left:130%;
    }
}

.percent{
    position:absolute;
    right:18px;
    bottom:21px;
    z-index:3;
    min-width:68px;
    color:#ffd54f;
    text-align:right;
    font-size:21px;
    font-weight:900;
    line-height:1;
    text-shadow:0 0 12px rgba(255,193,7,.38);
}

/* Titik indikator live */

.rtp-title::before{
    content:"";
    display:inline-block;
    width:10px;
    height:10px;
    margin-right:10px;
    border-radius:50%;
    background:#00e676;
    box-shadow:0 0 0 5px rgba(0,230,118,.10),0 0 14px #00e676;
    animation:livePulse 1.5s ease-in-out infinite;
}

@keyframes livePulse{
    0%,100%{
        opacity:1;
        transform:scale(1);
    }
    50%{
        opacity:.55;
        transform:scale(.75);
    }
}

/* Tablet */

@media screen and (max-width:768px){
    .lx-info-panel{
        padding:20px;
        border-radius:18px;
    }

    .rtp-title{
        font-size:20px;
    }

    .rtp-list{
        grid-template-columns:1fr;
        gap:14px;
    }

    .rtp-item{
        padding:18px;
    }
}

/* Mobile */

@media screen and (max-width:480px){
    .lx-info-panel{
        padding:16px;
    }

    .rtp-title{
        font-size:17px;
        line-height:1.45;
    }

    .rtp-top{
        align-items:flex-start;
    }

    .game{
        font-size:15px;
    }

    .status{
        padding:5px 9px;
        font-size:9px;
    }

    .progress{
        width:calc(100% - 72px);
        height:10px;
    }

    .percent{
        right:15px;
        bottom:20px;
        min-width:58px;
        font-size:17px;
    }

    .rtp-item::after{
        font-size:22px;
    }
}

/* ================================
   ARTIKEL SLOT GACOR & SLOT777
================================ */

.highlight-box{
    position:relative;
    width:100%;
    max-width:1100px;
    margin:30px auto;
    padding:38px 42px;
    color:#ededed;
    background:
        radial-gradient(circle at top right,rgba(255,196,0,.10),transparent 30%),
        linear-gradient(145deg,#151515 0%,#080808 100%);
    border:1px solid rgba(255,196,0,.25);
    border-radius:22px;
    box-shadow:
        0 20px 50px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.05);
    line-height:1.85;
    overflow:hidden;
}

/* GARIS CAHAYA DI ATAS */

.highlight-box::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;
    background:linear-gradient(
        90deg,
        transparent,
        #ff9800,
        #ffe082,
        #ff9800,
        transparent
    );
    box-shadow:0 0 18px rgba(255,193,7,.65);
}

/* EFEK CAHAYA LATAR */

.highlight-box::after{
    content:"";
    position:absolute;
    right:-120px;
    top:-120px;
    width:280px;
    height:280px;
    border-radius:50%;
    background:rgba(255,193,7,.07);
    filter:blur(45px);
    pointer-events:none;
}

/* JUDUL BAGIAN */

.highlight-box h2{
    position:relative;
    z-index:1;
    margin:42px 0 20px;
    padding:15px 18px 15px 24px;
    color:#fff;
    font-size:25px;
    font-weight:800;
    line-height:1.4;
    letter-spacing:.2px;
    text-align:left;
    text-transform:none;
    background:
        linear-gradient(
            90deg,
            rgba(255,193,7,.14),
            rgba(255,193,7,.03),
            transparent
        );
    border-left:5px solid #ffc107;
    border-radius:0 12px 12px 0;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

/* JUDUL PERTAMA TIDAK TERLALU JAUH */

.highlight-box h2:first-child{
    margin-top:0;
}

/* GARIS KECIL DI BAWAH JUDUL */

.highlight-box h2::after{
    content:"";
    position:absolute;
    left:24px;
    bottom:7px;
    width:70px;
    height:2px;
    border-radius:20px;
    background:linear-gradient(90deg,#ffc107,transparent);
    box-shadow:0 0 8px rgba(255,193,7,.5);
}

/* PARAGRAF ARTIKEL */

.highlight-box p{
    position:relative;
    z-index:1;
    margin:0 0 19px;
    color:#dedede;
    font-size:16px;
    font-weight:400;
    line-height:1.9;
    letter-spacing:.15px;
    text-align:justify;
    text-justify:inter-word;
}

/* PARAGRAF PERTAMA SETELAH JUDUL */

.highlight-box h2 + p{
    margin-top:4px;
}

/* PARAGRAF PEMBUKA */

.highlight-box > p:first-of-type{
    padding:20px 22px;
    color:#f5f5f5;
    font-size:17px;
    line-height:1.9;
    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.07);
    border-radius:14px;
}

/* DROP CAP DI PARAGRAF PEMBUKA */

.highlight-box > p:first-of-type::first-letter{
    float:left;
    margin:7px 9px 0 0;
    color:#ffc107;
    font-size:45px;
    font-weight:900;
    line-height:.8;
    text-shadow:0 0 12px rgba(255,193,7,.35);
}

/* LINK */

.highlight-box a{
    color:#ffd54f;
    font-weight:700;
    text-decoration:none;
    border-bottom:1px dashed rgba(255,213,79,.55);
    transition:
        color .25s ease,
        border-color .25s ease,
        text-shadow .25s ease;
}

.highlight-box a:hover{
    color:#fff3b0;
    border-bottom-color:#fff3b0;
    text-shadow:0 0 10px rgba(255,193,7,.5);
}

/* TEKS TEBAL */

.highlight-box strong{
    color:#ffd54f;
    font-weight:800;
}

/* STRONG DI DALAM LINK */

.highlight-box a strong{
    color:inherit;
}

/* PEMBATAS ANTAR BAGIAN */

.highlight-box h2:not(:first-child)::before{
    content:"";
    position:absolute;
    top:-22px;
    left:0;
    width:100%;
    height:1px;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.10),
        transparent
    );
}

/* PARAGRAF KESIMPULAN */

.highlight-box h2:last-of-type ~ p{
    padding-left:17px;
    border-left:3px solid rgba(255,193,7,.38);
}

/* SELEKSI TEKS */

.highlight-box ::selection{
    color:#111;
    background:#ffd54f;
}

/* TABLET */

@media screen and (max-width:768px){

    .highlight-box{
        margin:22px auto;
        padding:28px 25px;
        border-radius:18px;
    }

    .highlight-box h2{
        margin:34px 0 17px;
        padding:13px 15px 13px 19px;
        font-size:21px;
        line-height:1.45;
    }

    .highlight-box h2::after{
        left:19px;
        width:55px;
    }

    .highlight-box p{
        margin-bottom:17px;
        font-size:15.5px;
        line-height:1.85;
        text-align:left;
    }

    .highlight-box > p:first-of-type{
        padding:17px 18px;
        font-size:16px;
    }
}

/* MOBILE */

@media screen and (max-width:480px){

    .highlight-box{
        width:100%;
        margin:18px auto;
        padding:22px 17px;
        border-radius:15px;
    }

    .highlight-box h2{
        margin:30px 0 15px;
        padding:12px 13px 12px 16px;
        font-size:18px;
        line-height:1.45;
        border-left-width:4px;
        border-radius:0 9px 9px 0;
    }

    .highlight-box h2::after{
        left:16px;
        bottom:6px;
        width:45px;
    }

    .highlight-box p{
        margin-bottom:16px;
        font-size:15px;
        line-height:1.8;
        letter-spacing:0;
        text-align:left;
    }

    .highlight-box > p:first-of-type{
        padding:15px;
        font-size:15px;
        line-height:1.8;
    }

    .highlight-box > p:first-of-type::first-letter{
        margin:6px 7px 0 0;
        font-size:38px;
    }

    .highlight-box h2:last-of-type ~ p{
        padding-left:12px;
        border-left-width:2px;
    }
}

/*=====================================
        REVIEW MEMBER SLOT GACOR
======================================*/

.reviews-section{
    width:100%;
    max-width:1200px;
    margin:45px auto;
    padding:35px 25px;
    position:relative;
}

.reviews-section h2{
    margin:0 0 35px;
    text-align:center;
    font-size:34px;
    line-height:1.4;
    color:#fff;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:1px;
    text-shadow:
    0 0 12px rgba(255,193,7,.35),
    0 0 25px rgba(255,152,0,.2);
}

.reviews-section h2:after{

    content:"";

    display:block;

    width:120px;
    height:4px;

    margin:15px auto 0;

    border-radius:50px;

    background:linear-gradient(90deg,#ff9800,#ffd54f,#ff9800);

    box-shadow:0 0 15px rgba(255,193,7,.5);

}

/* GRID */

.reviews-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:26px;

}

/* CARD */

.review-card{

    position:relative;

    padding:28px;

    border-radius:22px;

    overflow:hidden;

    background:
    linear-gradient(145deg,#1b1b1b,#0a0a0a);

    border:1px solid rgba(255,193,7,.18);

    box-shadow:
    0 15px 35px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.05);

    transition:.35s;

}

.review-card:hover{

    transform:translateY(-8px);

    border-color:#ffc107;

    box-shadow:
    0 20px 45px rgba(0,0,0,.6),
    0 0 20px rgba(255,193,7,.2);

}

.review-card:before{

    content:"★★★★★";

    position:absolute;

    right:-18px;

    top:-18px;

    font-size:90px;

    font-weight:900;

    color:rgba(255,193,7,.04);

    transform:rotate(18deg);

    pointer-events:none;

}

.review-card:after{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:4px;

    background:linear-gradient(90deg,#ff9800,#ffd54f,#ff9800);

    box-shadow:0 0 15px rgba(255,193,7,.5);

}

/* HEADER */

.review-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:10px;

    margin-bottom:18px;

}

.review-name{

    font-size:18px;

    font-weight:700;

    color:#fff;

}

.review-stars{

    color:#ffd54f;

    font-size:20px;

    letter-spacing:2px;

    text-shadow:0 0 8px rgba(255,193,7,.45);

}

/* TEXT */

.review-text{

    margin:0;

    color:#d8d8d8;

    font-size:15.8px;

    line-height:1.9;

    text-align:justify;

    position:relative;

    padding-left:22px;

}

.review-text:before{

    content:"❝";

    position:absolute;

    left:0;
    top:-10px;

    font-size:42px;

    color:#ffc107;

    opacity:.75;

}

/* DATE */

.review-date{

    display:inline-flex;

    align-items:center;

    margin-top:22px;

    padding:8px 16px;

    border-radius:50px;

    background:rgba(255,193,7,.09);

    border:1px solid rgba(255,193,7,.15);

    color:#ffd54f;

    font-size:13px;

    font-weight:700;

    letter-spacing:.4px;

}

.review-date:before{

    content:"🕒";

    margin-right:8px;

}

/* RESPONSIVE */

@media(max-width:992px){

.reviews-section h2{

    font-size:28px;

}

}

@media(max-width:768px){

.reviews-grid{

    grid-template-columns:1fr;

}

.review-card{

    padding:24px;

}

.review-header{

    flex-direction:column;

    align-items:flex-start;

    gap:8px;

}

.review-name{

    font-size:17px;

}

.review-stars{

    font-size:18px;

}

.review-text{

    font-size:15px;

    line-height:1.8;

}

}

@media(max-width:480px){

.reviews-section{

    padding:25px 15px;

}

.reviews-section h2{

    font-size:22px;

}

.review-card{

    padding:20px;

    border-radius:16px;

}

.review-name{

    font-size:16px;

}

.review-stars{

    font-size:17px;

}

.review-text{

    padding-left:18px;

    font-size:14px;

}

.review-text:before{

    font-size:34px;

}

.review-date{

    font-size:12px;

    padding:7px 13px;

}

}