:root{
    --rupiah-dark:#02170e;
    --rupiah-green:#064b2e;
    --rupiah-green-light:#19ba70;
    --rupiah-lime:#bfff78;
    --rupiah-gold:#f4d66c;
    --rupiah-white:#f1fff7;
    --rupiah-muted:#b9ddca;
    --qris-border:rgba(108,255,179,.35);
    --qris-glow:rgba(46,255,148,.25);
}

/* RESET DASAR */
*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    padding:0;
    min-height:100%;
}

body{
    position:relative;
    color:var(--rupiah-white);
    font-family:'Segoe UI',Arial,Helvetica,sans-serif;

    background:
        radial-gradient(
            circle at 12% 15%,
            rgba(25,186,112,.38),
            transparent 30%
        ),
        radial-gradient(
            circle at 88% 80%,
            rgba(191,255,120,.16),
            transparent 32%
        ),
        linear-gradient(
            140deg,
            #011209 0%,
            #043620 35%,
            #087044 65%,
            #01170d 100%
        );

    background-attachment:fixed;
    overflow-x:hidden;
    isolation:isolate;
}

/* POLA QRIS DI SELURUH BACKGROUND */
body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-3;
    pointer-events:none;
    opacity:.38;

    background-image:
        linear-gradient(
            90deg,
            transparent 46%,
            rgba(180,255,216,.09) 47%,
            rgba(180,255,216,.09) 53%,
            transparent 54%
        ),
        linear-gradient(
            transparent 46%,
            rgba(180,255,216,.09) 47%,
            rgba(180,255,216,.09) 53%,
            transparent 54%
        ),
        repeating-linear-gradient(
            45deg,
            transparent 0 25px,
            rgba(255,255,255,.025) 25px 27px
        );

    background-size:
        44px 44px,
        44px 44px,
        90px 90px;
}

/* SILUET PAHLAWAN INDONESIA */
body::after{
    content:"";
    position:fixed;
    right:-35px;
    bottom:-45px;
    width:min(430px,68vw);
    height:min(630px,78vh);
    z-index:-2;
    pointer-events:none;
    opacity:.17;

    background-repeat:no-repeat;
    background-position:right bottom;
    background-size:contain;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 620'%3E%3Cdefs%3E%3ClinearGradient id='hero' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23effff6'/%3E%3Cstop offset='1' stop-color='%235cffaa'/%3E%3C/linearGradient%3E%3Cfilter id='glow'%3E%3CfeGaussianBlur stdDeviation='6' result='blur'/%3E%3CfeMerge%3E%3CfeMergeNode in='blur'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cg fill='url(%23hero)' filter='url(%23glow)'%3E%3Cpath d='M105 112c27-53 165-73 215-12l-10 36H116z'/%3E%3Cpath d='M132 119c8-66 44-96 86-96 48 0 85 39 85 96v48c0 73-37 129-85 129-47 0-86-56-86-129z'/%3E%3Cpath d='M103 618c5-113 18-217 57-281 17-28 38-43 59-43 23 0 47 19 67 49 39 65 49 164 53 275z'/%3E%3Cpath d='M80 616c8-125 18-206 67-251l49 39-25 212z'/%3E%3Cpath d='M356 616c-8-125-18-206-68-251l-49 39 26 212z'/%3E%3Cpath d='M172 301h94l-13 91-34 35-36-35z'/%3E%3Cpath d='M153 160c24 13 105 15 135-7-5 49-30 100-70 100-39 0-62-49-65-93z' opacity='.55'/%3E%3C/g%3E%3C/svg%3E");

    filter:
        drop-shadow(0 0 18px rgba(74,255,162,.52))
        drop-shadow(0 0 55px rgba(74,255,162,.22));

    animation:pahlawanFloat 5s ease-in-out infinite;
}

/* =========================================================
   SEMUA CARD, BOX, PANEL, CONTAINER DAN AREA PADDING
   ========================================================= */

.card,
.box,
.panel,
.container,
.wrapper,
.content-box,
.menu-card,
.nav-card,
.feature-card,
.product-card,
.promo-card,
.info-card,
.section-card,
[class*="card"],
[class*="panel"],
[class*="container"],
[class*="wrapper"],
[class*="content"],
[class*="padding"]{
    position:relative;
    isolation:isolate;

    background:
        linear-gradient(
            135deg,
            rgba(3,53,33,.96),
            rgba(7,108,63,.9) 50%,
            rgba(2,39,25,.97)
        ) !important;

    border:1px solid var(--qris-border) !important;

    box-shadow:
        0 15px 35px rgba(0,0,0,.35),
        0 0 0 1px rgba(255,255,255,.035) inset,
        0 0 18px var(--qris-glow),
        0 0 45px rgba(46,255,148,.09) !important;

    color:var(--rupiah-white);
}

/* POLA QRIS DI DALAM SEMUA CARD */
.card::before,
.box::before,
.panel::before,
.container::before,
.wrapper::before,
.content-box::before,
.menu-card::before,
.nav-card::before,
.feature-card::before,
.product-card::before,
.promo-card::before,
.info-card::before,
.section-card::before,
[class*="card"]::before,
[class*="panel"]::before,
[class*="container"]::before,
[class*="wrapper"]::before,
[class*="content"]::before,
[class*="padding"]::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    border-radius:inherit;
    opacity:.38;

    background-image:
        linear-gradient(
            90deg,
            transparent 46%,
            rgba(198,255,225,.12) 47%,
            rgba(198,255,225,.12) 53%,
            transparent 54%
        ),
        linear-gradient(
            transparent 46%,
            rgba(198,255,225,.12) 47%,
            rgba(198,255,225,.12) 53%,
            transparent 54%
        ),
        repeating-linear-gradient(
            45deg,
            transparent 0 14px,
            rgba(255,255,255,.025) 14px 16px
        );

    background-size:
        30px 30px,
        30px 30px,
        52px 52px;
}

/* EFEK CAHAYA LEWAT PADA CARD */
.card::after,
.box::after,
.panel::after,
.menu-card::after,
.nav-card::after,
.feature-card::after,
.product-card::after,
.promo-card::after,
.info-card::after,
.section-card::after{
    content:"";
    position:absolute;
    top:-55%;
    left:-90%;
    width:38%;
    height:210%;
    z-index:0;
    pointer-events:none;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(226,255,239,.2),
        transparent
    );

    transform:rotate(20deg);
    filter:blur(8px);
    animation:qrisLightMove 7s linear infinite;
}

/* SEMUA ISI CARD BERADA DI ATAS EFEK */
.card > *,
.box > *,
.panel > *,
.container > *,
.wrapper > *,
.content-box > *,
.menu-card > *,
.nav-card > *,
.feature-card > *,
.product-card > *,
.promo-card > *,
.info-card > *,
.section-card > *{
    position:relative;
    z-index:2;
}

/* JUDUL */
h1,
h2,
h3,
h4,
h5,
h6{
    color:#f3fff8;
    text-shadow:
        0 0 8px rgba(84,255,165,.38),
        0 0 18px rgba(84,255,165,.16);
}

/* PARAGRAF DAN TEKS */
p,
span,
li,
label{
    color:inherit;
}

/* LINK */
a{
    color:#d8ffe8;
    transition:
        color .25s ease,
        text-shadow .25s ease;
}

a:hover{
    color:var(--rupiah-gold);
    text-shadow:
        0 0 8px rgba(244,214,108,.55);
}

/* BUTTON */
button,
.button,
.btn,
input[type="submit"],
input[type="button"]{
    position:relative;
    overflow:hidden;
    color:#042519 !important;
    font-weight:800;

    background:
        linear-gradient(
            135deg,
            #f5d76d 0%,
            #d2ff8d 45%,
            #55f49e 100%
        ) !important;

    border:1px solid rgba(255,247,190,.65) !important;
    border-radius:10px;

    box-shadow:
        0 8px 20px rgba(0,0,0,.25),
        0 0 17px rgba(86,255,165,.25),
        0 0 35px rgba(244,214,108,.1) !important;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        filter .25s ease;
}

button:hover,
.button:hover,
.btn:hover,
input[type="submit"]:hover,
input[type="button"]:hover{
    transform:translateY(-2px);
    filter:brightness(1.08);

    box-shadow:
        0 12px 25px rgba(0,0,0,.3),
        0 0 22px rgba(86,255,165,.38),
        0 0 45px rgba(244,214,108,.16) !important;
}

/* INPUT DAN FORM */
input,
select,
textarea{
    color:#effff6;
    background:rgba(2,39,25,.9) !important;
    border:1px solid rgba(101,255,175,.32) !important;

    box-shadow:
        0 0 12px rgba(45,255,146,.1) inset,
        0 0 12px rgba(45,255,146,.08);
}

input::placeholder,
textarea::placeholder{
    color:#afd5c0;
}

/* HEADER DAN NAVIGASI */
header,
nav,
[class*="header"],
[class*="navbar"],
[class*="navigation"],
[class*="gnb"]{
    position:relative;

    background:
        linear-gradient(
            90deg,
            rgba(2,33,21,.98),
            rgba(7,97,58,.94),
            rgba(2,33,21,.98)
        ) !important;

    border-color:rgba(93,255,169,.24) !important;

    box-shadow:
        0 8px 25px rgba(0,0,0,.32),
        0 0 20px rgba(46,255,148,.12) !important;
}

/* CLASS ASLI TETAP DIPERTAHANKAN */
.nv00-gnb-v4__l0-menu-text,
.nv00-gnb-v4__l1-featured-link,
.nv00-gnb-v4__l1-featured-title,
.nv00-gnb-v4__l1-menu-text{
    font-size:14.5px;
    line-height:1.4;
    color:#effff6 !important;

    text-shadow:
        0 0 7px rgba(74,255,160,.22);

    transition:
        color .25s ease,
        text-shadow .25s ease;
}

.nv00-gnb-v4__l0-menu-text:hover,
.nv00-gnb-v4__l1-featured-link:hover,
.nv00-gnb-v4__l1-featured-title:hover,
.nv00-gnb-v4__l1-menu-text:hover{
    color:var(--rupiah-gold) !important;

    text-shadow:
        0 0 9px rgba(244,214,108,.5);
}

/* GARIS PEMBATAS */
hr{
    border:0;
    height:1px;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(110,255,180,.65),
        transparent
    );

    box-shadow:
        0 0 9px rgba(68,255,159,.28);
}

/* SCROLLBAR */
::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#01170e;
}

::-webkit-scrollbar-thumb{
    border-radius:999px;
    background:
        linear-gradient(
            180deg,
            #f1d46d,
            #1bc276,
            #075c39
        );

    box-shadow:
        0 0 10px rgba(52,255,151,.38);
}

/* ANIMASI */
@keyframes qrisLightMove{
    0%{
        left:-90%;
    }

    45%,
    100%{
        left:155%;
    }
}

@keyframes pahlawanFloat{
    0%,
    100%{
        transform:translateY(0) scale(1);
        opacity:.14;
    }

    50%{
        transform:translateY(-9px) scale(1.015);
        opacity:.2;
    }
}

/* TABLET DAN HP */
@media (max-width:768px){
    .nv00-gnb-v4__l0-menu-text,
    .nv00-gnb-v4__l1-featured-link,
    .nv00-gnb-v4__l1-featured-title,
    .nv00-gnb-v4__l1-menu-text{
        font-size:13px;
    }

    body::after{
        right:-100px;
        width:380px;
        height:540px;
        opacity:.1;
    }

    .card,
    .box,
    .panel,
    .container,
    .wrapper,
    .content-box,
    [class*="card"],
    [class*="panel"],
    [class*="container"]{
        box-shadow:
            0 12px 28px rgba(0,0,0,.34),
            0 0 15px rgba(46,255,148,.17) !important;
    }
}

@media (max-width:480px){
    body::after{
        right:-145px;
        bottom:-20px;
        width:340px;
        height:480px;
        opacity:.08;
    }

    h1{
        font-size:25px;
    }

    h2{
        font-size:21px;
    }

    h3{
        font-size:18px;
    }
}

/* NONAKTIFKAN ANIMASI JIKA PENGGUNA MEMILIH REDUCED MOTION */
@media (prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        animation:none !important;
        transition:none !important;
    }
}