/*
==================================================
Template Name : THEME-PREMIUM-GOTO77

© 2018 THEME-PREMIUM-GOTO77. All Rights Reserved

This stylesheet is part of a licensed product.

Do not redistribute this file.

License ID    : 7d4f57a0-a7d6-4573-933d-ae0b5f7ad82e

==================================================
*/
        :root {
    --primary-color: #27ae60;
    --primary-background: #0b1d12;
    --line-color: #ff8c00;
    --marquee-color: #ffffff;
    --marquee-background: linear-gradient(180deg, #0b5d2a, #1faa59, #1bc335);
    --result-pasaran-color: #FFFFFF;
    --result-tanggal-color: #FFFFFF;
    --result-tanggal-background: #27ae60;
    --result-background: #111111;
    --result-keluaran-color: #ffffff;
    --result-border: 3px solid #e67e22;
    --text-color: #e0e0e0;
    --primary-text-color: #ffffff;
    --reverse-text-color: #000000;
    --secondary-background: #050c07;
    --hover-background: rgba(39, 174, 96, .2);
    --menu-item-color: var(--text-color);
}
:root {
    --text-size-default: .875rem;
    --button-masuk-color: linear-gradient(to bottom, #2ecc71, #27ae60);
    --button-daftar-color: linear-gradient(to bottom, #ff9f43, #ee5a24);
    --menu-background: #08160e;
    --header-background: var(--primary-background); 
    --content-background:  var(--primary-background);
    --togel-background: var(--primary-background);
    --provider-background: var(--secondary-background);
    --transaksi-background: var(--secondary-background);
    --bantuan-background: var(--secondary-background);
    --guidelines-background: var(--secondary-background);
    --footer-background: var(--secondary-background);
    --button-promosi-color: linear-gradient(60deg, #ff9f43, #2ecc71, #ee5a24, #27ae60);
    --content-body-background: linear-gradient(0deg, var(--togel-background) 0%, var(--primary-background) 100%);
    --mobile-padding-horizontal: 32px;
}:root {
    --secondary-background: #050c07;
    --primary-theme-color: black;
    --reverse-theme-color: white;
    --highlight-text-color: #FFD700;
    --page-link-background: linear-gradient(0deg, #0b1d12 0%, #27ae60 100%);
    --page-link-color: var(--primary-text-color);
    --page-link-border: 1px solid #27ae60;
    --page-item-active-color: linear-gradient(0deg, #050c07 0%, #0b1d12 100%);
    --page-item-active-background: var(--primary-color);
    --page-item-active-border: 1px solid var(--primary-color);
    --devider-color: linear-gradient(90deg, #27ae60 0%, #27ae60 50%, #e67e22 50%, #e67e22 100%);
    --prepend-background: linear-gradient(#27ae60, #1e8449);
    --prepend-color: #ffffff;
    --prepend-border: 0px;
    --content-box-background: rgba(11, 29, 18, .5);
    --informasi-menu-background: #1e8449;
    --informasi-content-background: #050c07;
}   

footer.footer {
    border-right: solid 3px;
    border-left: solid 3px;
    border-color: #ffd800;
}

.google {
    display: flex;
    justify-content: center;
}

img.d-block.w-100.banner {
    border-right: solid 6px;
    border-left: solid 2px;
    border-color: #ffd800;
}

.copyright {
    text-align: center;
    
}

.provider-group {
    border-block: solid 2px;
    border-right: solid 2px;
    border-left: solid 2px;
    border-color: #ffd800;
}

.promo-banner{
    padding:10px;
    background:linear-gradient(90deg, #0b5d2a, #1faa59, #ff8c00);
}

/* =========================================
   REVISI POPUP OTOMATIS (AUTO-SHOW)
========================================= */
/* Sembunyikan Checkbox Trigger-nya */
#popup-toggle {
    display: none;
}

/* Overlay tampil otomatis (display: grid) */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85); /* Latar belakang gelap */
    z-index: 99999; /* Z-index sangat tinggi agar menimpa segalanya */
    display: grid; 
    place-items: center;
    backdrop-filter: blur(3px); /* Efek blur estetik */
}

/* JIKA TOMBOL CLOSE DITEKAN -> SEMBUNYIKAN POPUP */
#popup-toggle:checked ~ .popup-overlay {
    display: none !important;
}

/* Kontainer utama popup */
.popup-content {
    background: #0b1d12;
    border: 2px solid #ffd800; /* Border kuning/emas */
    border-radius: 12px;
    width: 90%;
    max-width: 400px;
    color: #ffffff;
    position: relative;
    box-shadow: 0 0 40px rgba(39, 174, 96, 0.6);
    font-family: 'Ubuntu', sans-serif;
    overflow: hidden;
    animation: popup-fade-in 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popup-fade-in {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

/* Bagian Header Popup */
.popup-header {
    background: linear-gradient(180deg, #0b5d2a, #1faa59, #052d0b);
    padding: 12px;
    text-align: center;
    border-bottom: 2px solid #ff8c00;
}

.popup-header h3 {
    margin: 0;
    font-size: 1.2rem;
    color: #ffffff;
    font-weight: bold;
    text-transform: uppercase;
}

/* Tombol silang (Tutup) di pojok kanan atas */
.popup-close {
    position: absolute;
    top: 10px;
    right: 15px;
    color: #ffffff;
    font-size: 24px;
    cursor: pointer;
    font-weight: bold;
    z-index: 10;
    line-height: 1;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

/* Bagian Isi Popup */
.popup-body {
    padding: 15px;
    font-size: 1rem;
    line-height: 1.4;
    text-align: center;
    color: #e0e0e0;
}

.popup-banner {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 12px;
    border: 1px solid #27ae60;
}

/* Bagian Footer Popup */
.popup-footer {
    padding: 15px;
    background: #050c07;
    display: grid;
    place-items: center;
}

.promo-banner amp-img{
    border-radius:14px;
    overflow:hidden;
    border:2px solid #1fd16d;
    box-shadow:
        0 0 12px rgba(34,197,94,.5),
        0 0 25px rgba(255,140,0,.35);
}
            * {
                margin: 0px;
                padding: 0px;
                box-sizing: border-box;
            }
            
            html, body {
                font-family: 'Ubuntu', sans-serif;
                color: var(--text-color);
                font-size: var(--text-size-default);
    background-image:url("https://goto77.id/images/background.webp");
    background-position:center top;
    background-repeat:no-repeat;
    background-size:cover;
    background-attachment:fixed;
            }
            
            input {
                font-family: 'Ubuntu';
            }  
            
            body {
                display: grid;
                place-items: center;
            }
            
            .body-wrapper {
                    width:100%;
    max-width:500px;
    margin:auto;
    position:relative;
    z-index:5;
                overflow: hidden;
            }
            
            #kontak-title{
            	width:189px; 
            	/*margin-top:-7px;*/
            	margin-bottom: 10px; 
            	border-radius:0px 4px 0px 0px; 
            	padding-top:22px; 
            	text-align:center; 
            	height:50px;
            	height: 83px;
            	line-height: 18px;
            	background: #000;
            }
            #kontak-content{
            	width: 190px; 
            	padding:5px 10px 8px 10px; 
            	font-size: 15px;
                background-color:#FFF;
                color: #000; 
            }
            
            .abel {
                font-family: 'Abel', sans-serif;
            }
            
            .btn-black{
            	font-size: .8rem;
            	width:100%;
            	cursor:pointer;
            	font-weight: bold;
            	padding: 10px 8px;
            	color: var(--text-color);
            }
            
            .btn-black:hover {
                color: var(--reverse-text-color);
                background:  var(--primary-color);
            }
            
            .menuleft {
            	margin: 0px auto 0px;
            	display: flex;
            	flex-direction: column;
            }
            	
            .menuleft > ul{
            	padding: 0px;
            	margin: 0px;
            	list-style: none;
            }
            
            
            #informasi-menu{
            	margin:150px auto 0px; 
            	width:714px; 
            	padding: 0px 0px 0px 0px; 
            	box-shadow:rgba(0,0,0,.3) 0px 5px 10px 10px; 
            	border:1px solid #333; 
            	border-radius: 10px;
            	background: var(--informasi-menu-background);
            }
            
            #informasi-content {
                border-radius: 0px 9px 9px 0px;
                padding-left: 20px;
                width: 563px;
                background-color: var(--informasi-content-background);
            }
            
            
            #informasi-content-title {
                width: 240px;
                font-size: 16px;
                font-weight: bold;
                padding-bottom: 12px;
                margin-top: 20px;
                border-bottom: 3px var(--primary-color) solid;
                color: var(--text-primary-color);
            }
            
            #informasi-content-info {
                margin-top: 12px;
                font-weight: 300;
                color: var(--text-primary-color);
            }
            
            
            .closebox {
                position: absolute;
                top: -10px;
                right: 5px;
                font-size: 35px;
                cursor: pointer;
            }
            
            #informasi-logo {
                padding: 24px 0;
                width: 100%;
                display: grid;
                place-items: center;
                
            }
            
            .running-text {
                animation: scroll 10s linear infinite;
            }
            
            @keyframes scroll{
              0% {
               left: 100%;
              }
              100% {
                left: -800px;
              }
            }
            
            table {
                color: var(--text-primary-color);
            }
            
            tr:nth-child(odd) {
                background: linear-gradient(0deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.05) 100%);
            }
            
            tbody, td, tfoot, th, thead, tr {
                border: none;
            }
            
            .table-striped>tbody>tr:nth-of-type(odd)>* {
                color: var(--text-primary-color);
            }
            
            .wrapper {
                display: grid;
                grid-template-columns: 1fr;
                grid-template-areas:
                "header"
                "devider"
                "marquee"
                "contentdata"
                "togel-desktop"
                "provider"
                "transaksi"
                "guidelines"
                "bantuan"
                "footer"
            }
            
            
            a {
                color: inherit; /* blue colors for links too */
                text-decoration: inherit; /* no underline */
            }
            
            ul {
                padding: 0;
            }
            
            .wrapper>*>* {
                margin: auto;
                width: 1000px;
            }
            
            .center {
                display: grid;
                place-items: center;
            }

            .body-wrapper{
    box-shadow:
        0 0 60px rgba(0,0,0,.8),
        0 0 120px rgba(0,0,0,.7);
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    background:
        radial-gradient(circle at center,
        rgba(0,255,80,.12),
        transparent 60%);
    pointer-events:none;
    z-index:0;
}

body::after{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:1;
    background:
        linear-gradient(
            90deg,
            rgba(0,255,80,.20) 0%,
            transparent 22%,
            transparent 78%,
            rgba(255,170,0,.20) 100%
        );
}
            
            .btn {
                height: 30px; 
                border-radius: 3px;
            }
            
            .btn-masuk {
                background: var(--button-masuk-color);
                color: white;
            }
            
            .btn-daftar {
                background: var(--button-daftar-color);
                color: white;
            }
            
            .desktop-only {
                display: block;
            }
            
            
            @keyframes gradient {
                0% {
                    background-position: 0% 50%;
                }
                50% {
                    background-position: 100% 50%;
                }
                100% {
                    background-position: 0% 50%;
                }
            }
            
            
            .header {
                background: var(--header-background);
                grid-area: header;
                height: 102px;
            }
            
            .header-content {
                height: 100%;
                display: grid;
                grid-template-columns: 1fr 1fr auto;
            
                grid-template-areas:
                "logo login login"
                "logo menu promosi"
            }
            
            .logo {
                grid-area: logo;
                display: flex;
                align-items: center;
            }
            
            /* Desktop */
            .logoimg {
                height: 80px;
                width: 200px;
                object-fit: contain;
                object-position: left;
            }
            
            .login {
                grid-area: login;
                display: flex;
                justify-content: end;
                align-items: end;
                
            }
            
            .login-form {
                
                display: flex;
                align-items: center;
                justify-content: end;
                gap: 4px;
            }
            
            .login-field {
                width: 104px; 
                height: 30px; 
                border-radius: 3px;
            }
            
            .login-input-field {
                margin: 0px;
                padding: 0px 8px;
                border-radius: 3px;
            }
            
            
            .promosi {
                grid-area: promosi;
                display: flex; 
                align-items: center;
            }
            
            .menu {
                grid-area: menu;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                gap: 12px;
                font-size: 1.1rem;
            }
            
            .menu-item>label:hover, .bantuan-item:hover {
                color: var(--primary-color);
                cursor: pointer;
            }
            
            .menu-item>label {
                white-space: nowrap;
                color: var(--menu-item-color);
            }
            
            
            .devider {
                grid-area: devider;
                height: 3px;
                width: 100%;
                margin: 8px 0;
            }
.top-action {
    display:flex;
    width:100%;
}

.top-action a{
    width:50%;
    height:42px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:18px;
    font-weight:700;
    color:#fff;
    text-decoration:none;
}

.top-action .btn-daftar{
    background:linear-gradient(90deg,#ff8c00,#ffb300);
}

.top-action .btn-masuk{
    background:linear-gradient(90deg,#0b7d35,#34d399);
}

.top-action a:hover{
    filter:brightness(1.1);
}

            .marquee {
                height: 30px;
                color: var(--marquee-color);
                background: var(--marquee-background);
                grid-area: marquee;
                display: flex;
                font-size: .8rem;
                width: 100%;
                border-top: 2px solid var(--line-color);
            }
            
            .marquee-content {
                display: flex;
                white-space: nowrap;
                padding: 0px 16px; align-items: center; width: 100%;
                margin-bottom: 2px;
            }
            
            
            .contentdata {
                grid-area: contentdata;
                background: var(--primary-background);
            }
            
            .contentdata>* {
                width: 100%;
            }
            
            .content-body {
                overflow: hidden;
            }
            
            .banner {
                aspect-ratio: 1920 / 380;
                background: var(--banner-background);
            }
            
            
            .my-navbar {
                height: 52px; 
                padding: 0px; 
                width: 100%; 
                background: linear-gradient(180deg, #0b5d2a, #1faa59, #052d0b);
                position: fixed; 
                bottom: 0; 
                color: rgb(255, 153, 0); 
                z-index: 1100; 
                display: flex; 
                box-shadow: 0px -4px 3px rgba(0, 0, 0, 0.75);
            }
            
            .navbar-item {
                height: 100%; 
                width: 100%; 
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
            }
            
            .navbar-item-content {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                position: absolute; 
                top: -16px
            }
            
            .navbar-item-content>i {
                 font-size: 20px;
                 line-height: 22px;
                 color: white;
                 padding-bottom: 4px;
            }
            
            .navbar-item-content>img {
                 height: 36px; 
                 width: 36px;
            }
            
            .navbar-item-content>label {
                white-space: nowrap; 
                margin-top: 4px; 
                font-weight: bold; 
                font-size: var(--text-size-default); 
                color: white
            }
            
            
            
            .provider {
                background: var(--provider-background);
                grid-area: provider
            }
            
            .provider-group {
            
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                padding: 24px 0;
            }
            
            .transaksi {
                background: linear-gradient(90deg, #0b5d2a, #1faa59, #ff8c00);
                grid-area: transaksi;
                padding-bottom: 16px;
                
                display: flex;
                justify-content: space-between;
            }
            
            .transaksi-title {
                grid-area: transaksi-title;
                margin-bottom: 8px;
                background: black;
            }
            
            .transaksi-title-group {
                display: flex;
                align-items: end;
                gap: 4px;
            }
            
            .transaksi-kontak {
                display: flex;
            }
            
            .other {
                grid-area: other;
                display: flex;
                flex-direction: column;
                justify-content: end;
                align-self: start;
            }
            
            .other-group {
                display: flex;
                flex-direction: column;
                gap: 8px;
            }
            
            .other-group>div {
                height: 32;
                display: flex;
                justify-content: end;
            }
            
            .guidelines {
                grid-area: guidelines;
                background: var(--guidelines-background);
            }
            
            .guidelines-content {
                padding-top: 48px; 
                padding-bottom: 24px
            }
            
            
            .bantuan {
                padding: 16px;
                background: var(--bantuan-background);
                grid-area: bantuan;
            }
            
            .bantuan-content {
                display: flex;
                list-style-type: none;
            }
            
            
            .bantuan-devider {
                padding: 0 16px;
            }
            
            .footer {
                font-size: .9rem;
                background: var(--footer-background);
                grid-area: footer;
                padding: 16px 0;
                border-top: 2px solid #bdbdbd;
            }
            
            .copyright {
                display: flex;
                gap: 4px;
                text-align: center;
                align-items: center;
            }
            
            .footer-group {
                display: flex;
                align-items: center;
                gap: 32px;
            }
            
            .prepend {
                display: grid;
                place-items: center;
                background: var(--prepend-background); 
                width: 40px;
                border: var(--prepend-border) solid var(--bs-border-color);
               
            }
            
            .prepend-icon {
                font-size: 18px;
                color: var(--prepend-color);
            }
            
            .content-area {
                width: 1000px; 
                margin: auto; 
                padding: 8px 0;
            }
            
            .content-main {
                width: 1000px;
                margin: auto;
            }
            
            .content-box {
                width: 100%; 
                padding: 12px; 
                background: var(--content-box-background); 
                border-radius: 8px
            }
            
            .devider {
                background: var(--devider-color);
            }
            
            .fitur-header {
                font-size: 16px; 
                font-weight: bold; 
                line-height: 1rem
            }
            
            .panel-body, .card-body {
                font-size: 1.1rem;
            }
            
            .contentbox {
                font-size: 1rem;
            }
            
            
    .transaksi-group {
        display: grid;
        grid-template-columns: 380px 1fr;
        justify-content: space-between;
        grid-template-areas:
        "transaksi-bank transaksi-other";
    }
    
    .transaksi-bank {
        grid-area: transaksi-bank;
        display: grid;
        place-items: center
    }
    
    .transaksi-other {
        grid-area: transaksi-other;
        display: flex;
        justify-content: space-evenly;
        width: 100%;
    }
    
    .transaksi-list-bank {
        height: fit-content;
        display: grid;
        grid-template-columns: repeat(4, 82px);
        grid-template-rows: repeat(4, auto);
        gap: 4px;
    }
    
    .transaksi-list-other {
        height: fit-content;
        display: grid;
        grid-template-columns: repeat(3, 82px);
        gap: 4px;
    }
    
    
    .transaksi-item {
        display: flex;
        flex-direction: column;
        /* transform: perspective(10px) rotateX(3deg); */
    }
    
    .transaksi-header {

        height: 30px;
        border-radius: 5px;
        display: grid;
        place-items: center;
        font-weight: bold;
        border: 2px solid rgba(108,108,108,1);
        background: rgba(54,54,54,1);
        color: white;
    }
    
    .transaksi-status {
        margin-left: 3px;
        margin-right: 3px;
        height: 3px;
        border-radius: 0px 0px 4px 4px;
        background: rgb(54,54,54);
        background: linear-gradient(90deg, rgba(54,54,54,1) 0%, rgba(108,108,108,1) 50%, rgba(54,54,54,1) 100%);
    }
    
    .header-green {
        background: rgba(44,121,6,1);
        border-color: rgba(168,255,0,1);
    }
    
    .header-blue {
        background: rgba(0,80,89,1);
        border-color: rgba(0,255,204,1);
    }
    
    .status-green {
        background: rgb(44,121,6);
        background: linear-gradient(90deg, rgba(44,121,6,1) 0%, rgba(168,255,0,1) 50%, rgba(44,121,6,1) 100%);
    }
    
    .status-blue {
        background: rgb(0,80,89);
        background: linear-gradient(90deg, rgba(0,80,89,1) 0%, rgba(0,255,204,1) 50%, rgba(0,80,89,1) 100%);
    }
    
    .transaksi-name {
        font-size: 1.1rem; 
        font-weight: bold; 
        line-height: 1.5rem
    }
    
    .transaksi-wrapper {
        display: flex;
        flex-direction: column;
        gap: .5rem;
    }

        
      
                .desktop-only {
                    display: none;
                }
                
                .mobile-only {
                    display: block;
                }
            
                .wrapper {
                    display: grid;
                    grid-template-columns: 1fr;
                    grid-template-areas:
                    "appbar"
                    "marquee"
                    "header"
                    "contentdata"
                    "togel-mobile"
                    "devider"
                    "provider"
                    "transaksi"
                    "bantuan"
                    "footer"
                    "guidelines"
                }
                
                .appbar {
                    grid-area: appbar;
                    height: 72px;
                    display: grid;
                    place-items: center;
                    border-bottom: solid 5px;
                    border-color: black;
                    background: linear-gradient(180deg, #0b5d2a, #1faa59, #052d0b);
                }

                button.btn.btn-daftar.btn-info.btn-daftar-mobile.fw-bold.p-0.px-2.w-100 {
                border-block: solid 5px;
                border-color: black;
                border-radius: 15px;
                }

                button.btn.btn-masuk.fw-bold.p-0.px-2.submit.w-100 {
                border-block: solid 5px;
                border-color: black;
                border-radius: 15px;
                }

                div#mobilelogin {
    padding-bottom: 10px;
    background: linear-gradient(180deg, #0b5d2a, #1faa59, #1bc335);
}

.menu-mobile {
    padding-bottom: 10px;
}
            
                .wrapper>*>* {
                    margin: auto;
                    width: 100%;
                    padding: 0 var(--mobile-padding-horizontal);
                }
            
                .marquee {
                    border-top: 5px solid #000000;
                }
            
.my-navbar {
    border-top: solid 2px;
    border-left: solid 2px;
    border-right: solid 2px;
    border-color: #ff8c00;
}
            
                .header {
                    height: auto;
                    padding: 0px;
                }
            
                .header-content {
                    padding: 0px;
                    height: 100%;
                    display: grid;
                    grid-template-columns: 1fr;
                    grid-template-areas:
                    "marquee"
                    "mslider"
                    "menu-mobile"
                    "menu-content"
                    "login"
                    "promosi"
                }
                
                .menu-mobile {
                    grid-area: menu-mobile;
                }
                
                .menu-content {
                    grid-area: menu-content;
                }
                
           
            
                .logo {
                    display: none;
                }
                
                /* Mobile */
                .logoimg {
                    height: 64px;
                    width: 230px;
                    margin: 0px;
                    object-position: center;
                }
                
                
                .mslider {
                    grid-area: mslider;
                    aspect-ratio: 600/280;
                    background: var(--primary-theme-color);
                }
                
            
                .menu {
                    display: none;
                }
            
                .menu-item {
                    height: 100%;
                    width: 100%;
                    font-size: var(--text-size-default);
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    text-align: center;
                    gap: 4px;
                    padding-top: 4px;
                    background: linear-gradient(180deg, #0b5d2a, #1faa59, #052d0b);
                }
                
                .menu-item>label {
                    white-space: nowrap;
                    color: rgb(255, 255, 255);
                    font-weight: bold;
                }
            
                .menu-item>img {
                    height: 45px;
                }
            
                .login {
                    flex-direction: column;
                }
            
                .login-form {
                    padding: 32px 0;
                    margin: 0px 80px;
                    display: flex;
                    flex-direction: column;
                }
            
                .login-input-field {
                    border-top-left-radius: 0;
                    border-bottom-left-radius: 0;
                    font-size: 1rem;
                }
            
                .login-field, .login-form>button{
                    height: 44px; 
                    width: 100%;
                    border-radius: 8px;
                    overflow: hidden;
                }
            
                .btn-masuk {
                    font-size: 1.3rem;
                    text-shadow: 1px 1px #000000;
                    height: 44px;
                    border-radius: 8px;
                }
                
                .btn-daftar {
                    font-size: 1.3rem;
                    text-shadow: 1px 1px #000000;
                    height: 48px;
                    border-radius: 8px;
                }
            
            
                .promosi {
                    padding: 0 calc(var(--mobile-padding-horizontal) * 2);
                    gap: 4px;
                    padding-top: 5px;
                    padding-bottom: 5px;
                    border-right: solid 6px;
                    border-left: solid 2px;
                    border-color: #ffd800;
                }
            
                .promosi>* {
                    width: 100%;
                }
            
                .contentdata {
                    background: var(--primary-background);
                    padding: 12px 0;
                }
            
                .banner {
                    aspect-ratio: 3;
                }
            
                .banner>* {
                    border-radius: 16px;
                    border-collapse: separate;
                    border: 2px solid gray;
                }
            
                .content-main {
                    width: 100%;
                    padding: var(--mobile-padding-horizontal);
                    padding-bottom: 0px;
                    font-size: 1rem;
                }
            
            
                .provider-group {
                    padding: var(--mobile-padding-horizontal);
                }
                
                .transaksi-kontak {
                    display: flex;
                    flex-direction: column;
                }
            
            
                .transaksi-content {
                    display: flex;
                    flex-direction: column;
                }
                
            
            
                .bantuan-content {
                    list-style: disc;
                    gap: 25px;
                }
                
                .footer {
                    font-size: 1rem;
                    padding-bottom: 96px;
                }
            
                .footer-group {
                    flex-direction: column;
                    width: 100%;
                }
            
                .copyright {
                    flex-direction: column;
                    font-size: 1rem;
                    width: 100%;
                }
                .content-area {
                    width: 100%;
                }
                
                .content-box {
                    width: 100%; 
                    padding: 0px; 
                    background: transparent; 
                    border-radius: 0px
                }
            
                .guidelines {
                    grid-area: guidelines;
                }
                
                .guidelines-content>img {
                    width: 100%;
                }
            
                .mobile-provider-group {
                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                    gap: 8px;
            
                }
                
                .provider-item {
                    display: grid;
                    place-items: center;
                }
                
                .provider-item>img {
                    width: 100%;
                    object-fit: contain;
                    
                }
                
                .fitur-header {
                    font-size: 1.4rem;
                }
                
                .panel-body, .card-body {
                    font-size: 16px;
                }
            
                #mobileregister {
                    margin: 0px;
                }
                        
                .transaksi-group {
                    display: grid;
                    grid-template-columns: 1fr;
                    grid-template-areas:
                    "transaksi-bank"
                    "transaksi-other";
                    gap: 16px;
                    
                }
                
                .transaksi-header {
                    font-size: 1.1rem;
                    height: 36px;
                }
                
                .transaksi-list-bank {
                    grid-template-columns: repeat(4, 1fr);
                }
                
                .transaksi-list-other {
                    grid-template-columns: repeat(4, 1fr);
                }
                
                .transaksi-list {
                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                }
                
                .transaksi-item {
                    width: 100%;
                }
                
                .transaksi-title-group {
                    justify-content: center;
                    padding: 16px 0;
                }
                
                .transaksi-name {
                    font-size: 1.3rem;
                    text-align: center;    
                }
        
                .transaksi-wrapper {
                    width: 100%;
                    max-width: 100%;
                    gap: 1rem;
                }
                
            
                
                .login-input-field {
                    font-size: 16px;
                }  
            
   
            
            
            .btn-aduan {
                background: linear-gradient(60deg, #b08432, #cfbe87, #b08432);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-size: 300% 300%;
                animation: gradient 2s ease infinite;
            }
            :root {
                --bs-blue: #0d6efd;
                --bs-indigo: #6610f2;
                --bs-purple: #6f42c1;
                --bs-pink: #d63384;
                --bs-red: #dc3545;
                --bs-orange: #fd7e14;
                --bs-yellow: #ffc107;
                --bs-green: #198754;
                --bs-teal: #20c997;
                --bs-cyan: #0dcaf0;
                --bs-black: #000;
                --bs-white: #fff;
                --bs-gray: #6c757d;
                --bs-gray-dark: #343a40;
                --bs-gray-100: #f8f9fa;
                --bs-gray-200: #e9ecef;
                --bs-gray-300: #dee2e6;
                --bs-gray-400: #ced4da;
                --bs-gray-500: #adb5bd;
                --bs-gray-600: #6c757d;
                --bs-gray-700: #495057;
                --bs-gray-800: #343a40;
                --bs-gray-900: #212529;
                --bs-primary: #0d6efd;
                --bs-secondary: #6c757d;
                --bs-success: #198754;
                --bs-info: #0dcaf0;
                --bs-warning: #ffc107;
                --bs-danger: #dc3545;
                --bs-light: #f8f9fa;
                --bs-dark: #212529;
                --bs-primary-rgb: 13,110,253;
                --bs-secondary-rgb: 108,117,125;
                --bs-success-rgb: 25,135,84;
                --bs-info-rgb: 13,202,240;
                --bs-warning-rgb: 255,193,7;
                --bs-danger-rgb: 220,53,69;
                --bs-light-rgb: 248,249,250;
                --bs-dark-rgb: 33,37,41;
                --bs-primary-text-emphasis: #052c65;
                --bs-secondary-text-emphasis: #2b2f32;
                --bs-success-text-emphasis: #0a3622;
                --bs-info-text-emphasis: #055160;
                --bs-warning-text-emphasis: #664d03;
                --bs-danger-text-emphasis: #58151c;
                --bs-light-text-emphasis: #495057;
                --bs-dark-text-emphasis: #495057;
                --bs-primary-bg-subtle: #cfe2ff;
                --bs-secondary-bg-subtle: #e2e3e5;
                --bs-success-bg-subtle: #d1e7dd;
                --bs-info-bg-subtle: #cff4fc;
                --bs-warning-bg-subtle: #fff3cd;
                --bs-danger-bg-subtle: #f8d7da;
                --bs-light-bg-subtle: #fcfcfd;
                --bs-dark-bg-subtle: #ced4da;
                --bs-primary-border-subtle: #9ec5fe;
                --bs-secondary-border-subtle: #c4c8cb;
                --bs-success-border-subtle: #a3cfbb;
                --bs-info-border-subtle: #9eeaf9;
                --bs-warning-border-subtle: #ffe69c;
                --bs-danger-border-subtle: #f1aeb5;
                --bs-light-border-subtle: #e9ecef;
                --bs-dark-border-subtle: #adb5bd;
                --bs-white-rgb: 255,255,255;
                --bs-black-rgb: 0,0,0;
                --bs-font-sans-serif: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
                --bs-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
                --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
                --bs-body-font-family: var(--bs-font-sans-serif);
                --bs-body-font-size: 1rem;
                --bs-body-font-weight: 400;
                --bs-body-line-height: 1.5;
                --bs-body-color: #212529;
                --bs-body-color-rgb: 33,37,41;
                --bs-body-bg: #fff;
                --bs-body-bg-rgb: 255,255,255;
                --bs-emphasis-color: #000;
                --bs-emphasis-color-rgb: 0,0,0;
                --bs-secondary-color: rgba(33, 37, 41, 0.75);
                --bs-secondary-color-rgb: 33,37,41;
                --bs-secondary-bg: #e9ecef;
                --bs-secondary-bg-rgb: 233,236,239;
                --bs-tertiary-color: rgba(33, 37, 41, 0.5);
                --bs-tertiary-color-rgb: 33,37,41;
                --bs-tertiary-bg: #f8f9fa;
                --bs-tertiary-bg-rgb: 248,249,250;
                --bs-link-color: #0d6efd;
                --bs-link-color-rgb: 13,110,253;
                --bs-link-decoration: underline;
                --bs-link-hover-color: #0a58ca;
                --bs-link-hover-color-rgb: 10,88,202;
                --bs-code-color: #d63384;
                --bs-highlight-bg: #fff3cd;
                --bs-border-width: 1px;
                --bs-border-style: solid;
                --bs-border-color: #dee2e6;
                --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
                --bs-border-radius: 3px;
                --bs-border-radius-sm: 0.25rem;
                --bs-border-radius-lg: 0.5rem;
                --bs-border-radius-xl: 1rem;
                --bs-border-radius-xxl: 2rem;
                --bs-border-radius-2xl: var(--bs-border-radius-xxl);
                --bs-border-radius-pill: 50rem;
                --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
                --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
                --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
                --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
                --bs-focus-ring-width: 0.25rem;
                --bs-focus-ring-opacity: 0.25;
                --bs-focus-ring-color: rgba(13, 110, 253, 0.25);
                --bs-form-valid-color: #198754;
                --bs-form-valid-border-color: #198754;
                --bs-form-invalid-color: #dc3545;
                --bs-form-invalid-border-color: #dc3545;
            }
            
            .btn {
                --bs-btn-padding-x: 0.75rem;
                --bs-btn-padding-y: 0.375rem;
                --bs-btn-font-family: 'Ubuntu';
                --bs-btn-font-size: 1rem;
                --bs-btn-font-weight: 400;
                --bs-btn-line-height: 1.5;
                --bs-btn-color: ;
                --bs-btn-bg: transparent;
                --bs-btn-border-width: var(--bs-border-width);
                --bs-btn-border-color: transparent;
                --bs-btn-border-radius: var(--bs-border-radius);
                --bs-btn-hover-border-color: transparent;
                --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),0 1px 1px rgba(0, 0, 0, 0.075);
                --bs-btn-disabled-opacity: 0.65;
                --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
                display: inline-block;
                padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
                font-family: 'Ubuntu';
                font-size: var(--bs-btn-font-size);
                font-weight: var(--bs-btn-font-weight);
                line-height: var(--bs-btn-line-height);
                color: white;
                text-align: center;
                text-decoration: none;
                vertical-align: middle;
                cursor: pointer;
                -webkit-user-select: none;
                -moz-user-select: none;
                user-select: none;
                border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
                border-radius: var(--bs-btn-border-radius);
                background-color: var(--bs-btn-bg);
                transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
            }
            
            .fw-bold {
                font-weight: 700;
            }
            
            .px-2 {
                padding-right: .5rem;
                padding-left: .5rem;
            }
            
            .p-0 {
                padding: 0;
            }
            
            .input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
                margin-left: calc(var(--bs-border-width)* -1);
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
            }
            
            .input-group>.form-control, .input-group>.form-floating, .input-group>.form-select {
                position: relative;
                flex: 1 1 auto;
                width: 1%;
                min-width: 0;
            }

            
            .login-input-field {
                margin: 0px;
                padding: 0px 8px;
                border-radius: 3px;
            }
            
            .form-control {
                display: block;
                width: 100%;
                padding: .375rem .75rem;
                font-weight: 400;
                color: var(--bs-body-color);
                background-color: var(--bs-body-bg);
                background-clip: padding-box;
                border: var(--bs-border-width) solid var(--bs-border-color);
                -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none;
                border-radius: var(--bs-border-radius);
                transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
            }
            
            .d-flex {
                display: flex;
            }
            
            .flex-column {
                flex-direction: column;
            }
            
            .justify-content-center {
                justify-content: center;
            }
            
            .align-items-center {
                align-items: center;
            }
            
            .gap-3 {
                gap: 1rem;
            }
            
            .w-100 {
                width: 100%;
            }
            
            .align-items-start {
                align-items: start;
            }
            #menu-toggle { display: none; }
            .nav-sidebar {
                position: fixed; 
                top: 0; 
                left: -250px; 
                width: 110px; 
                height: 100%;
                background-color: #073106; 
                z-index: 9999; 
                transition: left 0.3s ease;
                box-shadow: 2px 0 10px rgba(0,0,0,0.5);
            }
            .menu-overlay {
position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0 0 0 / 74%);
    z-index: 9998;
    display: none;
            }
            #menu-toggle:checked ~ .nav-sidebar { left: 0; }
            #menu-toggle:checked ~ .menu-overlay { 
                display: block; }
.sidebar-close {
    color: #fff;
    font-size: 20px;
    padding: 15px 20px;
    cursor: pointer;
    text-align: right;
    display: block;
    background: black;
    border-block: solid 2px;
}
            .sidebar-menu { list-style: none; padding: 0; margin: 0; }
            .sidebar-item { border-bottom: 1px solid #0d1f4d; }
            .sidebar-link {
                display: flex; flex-direction: column; align-items: center;
                padding: 15px 10px; color: #fff; text-decoration: none;
                font-size: 11px; font-weight: bold; text-transform: uppercase; text-align: center;
            }
            .sidebar-link span { font-size: 24px; margin-bottom: 5px; }
            .burger-label {
                color: #ffffff; font-size: 35px; cursor: pointer;
                position: absolute; left: 15px; top: 30%; transform: translateY(-50%);
                z-index: 10; user-select: none; line-height: 1;
                background: #00000059;
            }