/* =========================================================
   TEMA RP5.000 + QRIS + PAHLAWAN INDONESIA
   ========================================================= */

:root{
    --rp-dark:#031b12;
    --rp-green:#06492f;
    --rp-green-2:#087747;
    --rp-green-3:#19bd74;
    --rp-lime:#c7ff79;
    --rp-gold:#f7d66a;
    --rp-white:#f2fff8;
    --rp-muted:#b9dbc9;
    --rp-black:#01130c;
    --qris-line:rgba(207,255,226,.12);
    --qris-glow:rgba(42,255,148,.45);
}

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

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

/* =========================================================
   BACKGROUND SELURUH HALAMAN
   ========================================================= */

body{
    position:relative;
    font-family:'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    color:var(--rp-white);
    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(25,189,116,.35),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(199,255,121,.13),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #01150d 0%,
            #043b27 38%,
            #075f3a 65%,
            #01170e 100%
        );
    background-attachment:fixed;
    overflow-x:hidden;
    isolation:isolate;
}

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

    background-image:
        linear-gradient(
            90deg,
            transparent 48%,
            rgba(165,255,207,.08) 49%,
            rgba(165,255,207,.08) 51%,
            transparent 52%
        ),
        linear-gradient(
            transparent 48%,
            rgba(165,255,207,.08) 49%,
            rgba(165,255,207,.08) 51%,
            transparent 52%
        ),
        repeating-linear-gradient(
            45deg,
            transparent 0 22px,
            rgba(255,255,255,.025) 22px 24px
        );

    background-size:
        42px 42px,
        42px 42px,
        80px 80px;

    mask-image:linear-gradient(
        to bottom,
        rgba(0,0,0,.95),
        rgba(0,0,0,.35)
    );
}

/* SILUET PAHLAWAN INDONESIA */
body::after{
    content:"";
    position:fixed;
    right:-25px;
    bottom:-30px;
    width:min(430px,65vw);
    height:min(620px,75vh);
    pointer-events:none;
    z-index:-2;
    opacity:.15;

    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='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23d9ffe9'/%3E%3Cstop offset='1' stop-color='%235cffae'/%3E%3C/linearGradient%3E%3Cfilter id='glow'%3E%3CfeGaussianBlur stdDeviation='7' result='b'/%3E%3CfeMerge%3E%3CfeMergeNode in='b'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cg fill='url(%23g)' filter='url(%23glow)'%3E%3Cpath d='M108 105c31-48 170-67 215-7l-11 35H119z'/%3E%3Cpath d='M134 116c8-65 44-94 84-94 48 0 85 39 85 94v47c0 72-37 128-85 128-46 0-84-56-84-128z'/%3E%3Cpath d='M105 616c4-112 16-216 55-280 17-27 38-42 58-42 23 0 47 18 66 48 39 64 49 164 53 274z'/%3E%3Cpath d='M82 614c7-124 17-205 65-250l49 38-25 212z'/%3E%3Cpath d='M353 614c-8-124-18-205-67-250l-48 38 25 212z'/%3E%3Cpath d='M173 300h92l-12 90-34 34-35-34z'/%3E%3Cpath d='M154 156c23 13 103 15 133-7-5 48-29 99-69 99-38 0-61-48-64-92z' opacity='.6'/%3E%3C/g%3E%3C/svg%3E");

    filter:
        drop-shadow(0 0 20px rgba(54,255,151,.55))
        drop-shadow(0 0 60px rgba(54,255,151,.25));

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

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

.Mawartoto-Premium-Card,
.Mawartoto-Slot-card{
    position:relative;
    max-width:700px;
    width:calc(100% - 30px);
    margin:35px auto;
    padding:50px 40px;
    border-radius:28px;
    overflow:hidden;

    color:var(--rp-white);

    background:
        linear-gradient(
            135deg,
            rgba(3,46,29,.96),
            rgba(5,93,55,.92) 48%,
            rgba(2,37,24,.96)
        );

    border:1px solid rgba(143,255,197,.48);

    box-shadow:
        0 30px 70px rgba(0,0,0,.65),
        0 0 0 1px rgba(255,255,255,.05) inset,
        0 0 25px rgba(42,255,148,.22),
        0 0 65px rgba(42,255,148,.10);

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    isolation:isolate;
}

/* QRIS GRID PADA CARD UTAMA */
.Mawartoto-Premium-Card::before,
.Mawartoto-Slot-card::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-2;
    pointer-events:none;
    opacity:.35;

    background-image:
        linear-gradient(
            90deg,
            transparent 47%,
            rgba(199,255,226,.12) 48%,
            rgba(199,255,226,.12) 52%,
            transparent 53%
        ),
        linear-gradient(
            transparent 47%,
            rgba(199,255,226,.12) 48%,
            rgba(199,255,226,.12) 52%,
            transparent 53%
        ),
        repeating-linear-gradient(
            135deg,
            transparent 0 16px,
            rgba(255,255,255,.025) 16px 18px
        );

    background-size:
        32px 32px,
        32px 32px,
        48px 48px;
}

/* CAHAYA BERGERAK */
.Mawartoto-Premium-Card::after,
.Mawartoto-Slot-card::after{
    content:"";
    position:absolute;
    top:-40%;
    left:-80%;
    width:50%;
    height:180%;
    z-index:-1;
    pointer-events:none;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(213,255,232,.22),
        transparent
    );

    transform:rotate(20deg);
    filter:blur(10px);
    animation:rupiahLight 6s linear infinite;
}

/* =========================================================
   JUDUL
   ========================================================= */

.hero-title{
    position:relative;
    z-index:2;
    text-align:center;
    margin-bottom:30px;
}

.hero-title h1{
    margin:0 0 8px;
    font-size:34px;
    line-height:1.35;
    font-weight:900;
    letter-spacing:.4px;
    text-transform:uppercase;

    color:#effff6;

    background:linear-gradient(
        180deg,
        #ffffff 10%,
        #c9ffde 50%,
        #70ffb2 100%
    );

    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;

    filter:drop-shadow(0 0 9px rgba(68,255,158,.32));
}

.hero-title h1 span{
    color:var(--rp-gold);
    -webkit-text-fill-color:var(--rp-gold);

    text-shadow:
        0 0 8px rgba(247,214,106,.55),
        0 0 20px rgba(247,214,106,.25);
}

.brand-header{
    position:relative;
    z-index:2;
    text-align:center;
    margin-bottom:25px;
}

.brand-header h2{
    margin:0 0 8px;
    font-size:2rem;
    font-weight:900;
    letter-spacing:1.3px;
    color:#effff5;
    text-transform:uppercase;

    text-shadow:
        0 0 10px rgba(50,255,148,.5),
        0 0 25px rgba(50,255,148,.2);
}

.brand-header .sub{
    position:relative;
    display:inline-block;
    padding:8px 16px 14px;
    font-size:15px;
    font-weight:600;
    color:#c9efda;
    letter-spacing:.4px;
}

.brand-header .sub::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:0;
    width:90px;
    height:3px;
    border-radius:999px;
    transform:translateX(-50%);

    background:linear-gradient(
        90deg,
        transparent,
        #63ffa9,
        #f7d66a,
        #63ffa9,
        transparent
    );

    box-shadow:
        0 0 10px rgba(99,255,169,.7),
        0 0 25px rgba(99,255,169,.3);
}

/* =========================================================
   BACKGROUND QRIS UNTUK SEMUA CARD DAN PADDING
   ========================================================= */

.info-container,
.bonus-wrap,
.bonus-item,
.info-head,
.info-row{
    position:relative;
    isolation:isolate;
}

/* CONTAINER INFORMASI */
.info-container{
    overflow:hidden;
    margin-bottom:30px;
    border-radius:22px;

    background:
        linear-gradient(
            135deg,
            rgba(4,54,34,.96),
            rgba(7,103,61,.88),
            rgba(3,43,28,.96)
        );

    border:1px solid rgba(99,255,169,.32);

    box-shadow:
        0 15px 35px rgba(0,0,0,.35),
        0 0 0 1px rgba(255,255,255,.035) inset,
        0 0 18px rgba(41,255,145,.18),
        0 0 45px rgba(41,255,145,.08);

    backdrop-filter:blur(8px);
}

/* POLA QRIS PADA INFO */
.info-container::before,
.bonus-wrap::before,
.bonus-item::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    opacity:.4;

    background-image:
        linear-gradient(
            90deg,
            transparent 47%,
            var(--qris-line) 48%,
            var(--qris-line) 52%,
            transparent 53%
        ),
        linear-gradient(
            transparent 47%,
            var(--qris-line) 48%,
            var(--qris-line) 52%,
            transparent 53%
        ),
        repeating-linear-gradient(
            45deg,
            transparent 0 13px,
            rgba(255,255,255,.022) 13px 15px
        );

    background-size:
        28px 28px,
        28px 28px,
        46px 46px;
}

/* LABEL QRIS DEKORATIF */
.info-container::after{
    content:"QRIS";
    position:absolute;
    right:18px;
    bottom:8px;
    z-index:0;

    font-size:58px;
    line-height:1;
    font-weight:900;
    letter-spacing:-5px;
    color:rgba(219,255,235,.035);

    transform:rotate(-8deg);
    pointer-events:none;
}

.info-head{
    padding:17px 20px;

    background:
        linear-gradient(
            90deg,
            rgba(18,180,103,.26),
            rgba(199,255,121,.08),
            rgba(18,180,103,.26)
        );

    border-bottom:1px solid rgba(126,255,185,.2);

    box-shadow:
        0 7px 18px rgba(0,0,0,.18),
        0 0 16px rgba(36,255,139,.08) inset;
}

.info-head h2,
.info-head h3{
    margin:0;
    font-size:16px;
    font-weight:800;
    text-align:center;
    letter-spacing:.8px;
    color:#effff5;
    text-transform:uppercase;

    text-shadow:
        0 0 10px rgba(70,255,160,.45);
}

.info-list{
    padding:6px 0;
}

.info-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:14px 22px;

    border-bottom:1px solid rgba(211,255,230,.09);

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.018),
            rgba(99,255,169,.035),
            rgba(255,255,255,.018)
        );

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

.info-row:last-child{
    border-bottom:none;
}

.info-row:hover{
    z-index:2;
    transform:translateX(3px);

    background:
        linear-gradient(
            90deg,
            rgba(70,255,157,.12),
            rgba(199,255,121,.05)
        );

    box-shadow:
        0 0 18px rgba(39,255,144,.12) inset,
        0 0 14px rgba(39,255,144,.09);
}

.info-label{
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--rp-muted);
    font-size:14px;
}

.info-dot{
    width:9px;
    height:9px;
    flex-shrink:0;
    border-radius:50%;

    background:linear-gradient(
        180deg,
        #f7d66a,
        #59ff9f
    );

    box-shadow:
        0 0 7px #5effa6,
        0 0 16px rgba(94,255,166,.55);

    animation:pulseDot 2.2s ease-in-out infinite;
}

.info-text{
    font-size:15px;
    font-weight:600;
    color:#effff5;
}

.info-number{
    padding:7px 15px;
    border-radius:999px;
    white-space:nowrap;

    font-size:14px;
    font-weight:900;
    color:#052619;

    background:
        linear-gradient(
            135deg,
            #f9df79 0%,
            #cfff8c 40%,
            #55f49e 100%
        );

    border:1px solid rgba(255,255,255,.34);

    box-shadow:
        0 5px 15px rgba(0,0,0,.25),
        0 0 16px rgba(103,255,172,.28),
        0 0 0 1px rgba(255,255,255,.2) inset;
}

/* =========================================================
   BONUS CARD QRIS
   ========================================================= */

.bonus-wrap{
    overflow:hidden;
    margin:30px 0 35px;
    padding:25px 20px;
    text-align:center;
    border-radius:22px;

    background:
        linear-gradient(
            145deg,
            rgba(3,53,33,.95),
            rgba(7,105,62,.88),
            rgba(2,39,25,.96)
        );

    border:1px solid rgba(91,255,164,.3);

    box-shadow:
        0 15px 35px rgba(0,0,0,.3),
        0 0 22px rgba(46,255,148,.18),
        0 0 50px rgba(46,255,148,.07),
        0 0 0 1px rgba(255,255,255,.03) inset;
}

.bonus-wrap::after{
    content:"Rp 5.000";
    position:absolute;
    top:12px;
    right:18px;
    z-index:-1;

    font-size:54px;
    line-height:1;
    font-weight:900;
    letter-spacing:-4px;
    color:rgba(232,255,240,.045);

    transform:rotate(-7deg);
    pointer-events:none;
}

.bonus-head{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-bottom:20px;
}

.bonus-head .gold-icon{
    width:10px;
    height:10px;
    border-radius:50%;

    background:linear-gradient(
        180deg,
        #ffe58d,
        #57ffa4
    );

    box-shadow:
        0 0 10px rgba(100,255,174,.7),
        0 0 22px rgba(100,255,174,.35);

    animation:pulseDot 2.2s ease-in-out infinite;
}

.bonus-head h3{
    margin:0;
    font-size:16px;
    font-weight:800;
    color:#f4fff8;
    letter-spacing:.7px;
    text-transform:uppercase;

    text-shadow:
        0 0 10px rgba(61,255,155,.34);
}

.bonus-list{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.bonus-item{
    overflow:hidden;
    padding:15px 16px;
    text-align:left;
    border-radius:16px;

    background:
        linear-gradient(
            135deg,
            rgba(14,123,72,.58),
            rgba(3,49,31,.94)
        );

    border:1px solid rgba(102,255,173,.28);
    border-left:4px solid var(--rp-gold);

    box-shadow:
        0 8px 20px rgba(0,0,0,.24),
        0 0 14px rgba(49,255,150,.12),
        0 0 0 1px rgba(255,255,255,.025) inset;

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

.bonus-item:hover{
    transform:translateY(-3px);
    border-color:rgba(119,255,183,.6);
    border-left-color:#63ffa9;

    box-shadow:
        0 14px 28px rgba(0,0,0,.28),
        0 0 20px rgba(55,255,153,.22),
        0 0 40px rgba(55,255,153,.08);
}

.bonus-item p{
    position:relative;
    z-index:2;
    margin:0;
    font-size:15px;
    font-weight:600;
    line-height:1.65;
    color:#effff5;
}

.highlight-gold,
.bonus-item .highlight-gold{
    color:#ffe385;
    font-weight:900;

    text-shadow:
        0 0 8px rgba(255,227,133,.32);
}

.bonus-item .highlight-black{
    color:#d8ffea;
}

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

.cta-gold-section{
    position:relative;
    z-index:3;
    margin-top:25px;
    text-align:center;
}

.cta-buttons-gold{
    display:flex;
    flex-direction:row;
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;
}

.btn-gold{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:175px;
    padding:15px 38px;
    border-radius:999px;
    overflow:hidden;

    font-size:15px;
    font-weight:900;
    letter-spacing:.8px;
    text-decoration:none;
    text-transform:uppercase;

    border:1px solid rgba(164,255,204,.52);

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

    will-change:transform;
}

.btn-gold::before{
    content:"";
    position:absolute;
    top:-50%;
    left:-110%;
    width:45%;
    height:200%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.55),
        transparent
    );

    transform:rotate(20deg);
    transition:left .6s ease;
}

.btn-gold:hover::before{
    left:150%;
}

.btn-gold:hover{
    transform:translateY(-3px) scale(1.015);
    filter:brightness(1.08);
}

.btn-login-gold{
    color:#eafff2;

    background:
        linear-gradient(
            135deg,
            #06472e,
            #0a8650
        );

    box-shadow:
        0 10px 22px rgba(0,0,0,.25),
        0 0 15px rgba(49,255,150,.18),
        0 0 0 1px rgba(255,255,255,.06) inset;
}

.btn-login-gold:hover{
    box-shadow:
        0 14px 25px rgba(0,0,0,.3),
        0 0 22px rgba(55,255,153,.33),
        0 0 45px rgba(55,255,153,.12);
}

.btn-register-gold{
    color:#052318;

    background:
        linear-gradient(
            135deg,
            #f4cf5e 0%,
            #d8ff86 45%,
            #55f69e 100%
        );

    border-color:rgba(255,245,185,.72);

    box-shadow:
        0 12px 24px rgba(0,0,0,.28),
        0 0 20px rgba(241,216,106,.27),
        0 0 38px rgba(59,255,156,.12);
}

.btn-register-gold:hover{
    box-shadow:
        0 16px 28px rgba(0,0,0,.3),
        0 0 25px rgba(247,214,106,.4),
        0 0 50px rgba(59,255,156,.18);
}

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

@keyframes rupiahLight{
    0%{
        left:-90%;
    }

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

@keyframes pulseDot{
    0%,
    100%{
        transform:scale(1);
        opacity:.85;
    }

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

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

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

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

@media (max-width:768px){

    .Mawartoto-Premium-Card,
    .Mawartoto-Slot-card{
        width:calc(100% - 22px);
        margin:20px auto;
        padding:30px 20px;
        border-radius:24px;
    }

    .hero-title h1{
        font-size:27px;
    }

    .brand-header h2{
        font-size:1.6rem;
    }

    .info-row{
        padding:13px 14px;
        gap:10px;
    }

    .bonus-list{
        grid-template-columns:1fr;
    }

    .bonus-item p,
    .info-text{
        font-size:14px;
    }

    .info-number{
        padding:6px 11px;
        font-size:13px;
    }

    .btn-gold{
        width:100%;
        max-width:280px;
    }

    body::after{
        right:-90px;
        opacity:.1;
    }
}

/* =========================================================
   RESPONSIVE HP KECIL
   ========================================================= */

@media (max-width:480px){

    .Mawartoto-Premium-Card,
    .Mawartoto-Slot-card{
        padding:25px 14px;
        border-radius:20px;
    }

    .hero-title h1{
        font-size:23px;
    }

    .brand-header h2{
        font-size:1.35rem;
    }

    .brand-header .sub{
        font-size:13px;
    }

    .info-row{
        align-items:flex-start;
        flex-direction:column;
    }

    .info-number{
        margin-left:21px;
    }

    .bonus-wrap{
        padding:21px 13px;
    }

    .bonus-wrap::after{
        font-size:38px;
    }

    .cta-buttons-gold{
        flex-direction:column;
        align-items:center;
    }

    body::after{
        width:340px;
        height:500px;
        right:-135px;
        opacity:.08;
    }
}

/* MATIKAN ANIMASI UNTUK PENGGUNA YANG MEMILIH REDUCED MOTION */
@media (prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{
        animation:none !important;
        transition:none !important;
    }
}