@import url('https://fonts.googleapis.com/css2?family=Abel&family=Oswald&family=Ubuntu:wght@400;500;700&display=swap');

    html, body {
      width: 100%;
      background-color: var(--primary-background);
      font-family: 'Ubuntu', sans-serif;
    color: var(--text-color);
    font-size: var(--text-size-default);
    }

    body {
      /* Mobile first */
      max-width: 500px;          /* Batasi lebar maksimal */
      margin: 0 auto;            /* Biar center di desktop */
      overflow-x: hidden;        /* Hindari scroll horizontal */
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Opsional: kasih efek bayangan */
      background-color: #000; /* Latar belakang konten */
     /* min-height:100vh;*/
    }
    .marquee {
    height: 30px;
    color: var(--marquee-color);
    grid-area: marquee;
    display: flex;
    font-size: .8rem;
    width: 100%;
    border-top: 2px solid var(--line-color);
    }
    
    .marquee-content {
        height: 100%;
        display: flex;
    }
    
    
    .running {
        padding: 0px;
        height: 100%;
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
    }
    
    .running>.marquee-shadow {
        position: absolute; 
        background: linear-gradient(90deg, var(--marquee-background) 0%, rgba(0,0,0,0) 10%, rgba(0,0,0,0) 90%, var(--marquee-background) 100%); 
        width: 100%; 
        height: 100%; 
        z-index: 999;
    }
    .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;
        /*box-shadow: rgba(0, 0, 0, 0.35) 0px -50px 36px -28px inset;*/
    }

    .wrapper>*>* {
        margin: auto;
        width: 100%;
        padding: 0 var(--mobile-padding-horizontal);
    }

    .marquee {
        border-top: 3px solid var(--line-color);
    }

    .marquee-content {
        padding: 0px
    }

    .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;
    }
    
    .marquee-content {
        height: 100%;
    }

    .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;
        /*display: grid;*/
        /*place-items: center;*/
        /*grid-template-columns: repeat(7, 1fr);*/
        /* background: linear-gradient(0deg, rgba(0,0,0,0.08) 0%, rgba(255,255,255,0) 100%), var(--primary-color); */
        /*gap: 0px;*/
        /*border-bottom: 3px solid red;*/
    }

    .menu-item {
        height: 100%;
        width: 100%;
        font-size: var(--text-size-default);
        /*display: grid;*/
        /*place-items: center;*/
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 4px;
        padding-top: 4px;
        background: linear-gradient(90deg, rgba(26,26,26,0.3) 0%, rgba(0,0,0,0.3) 10%, rgba(0,0,0,0.3) 100%), var(--primary-color);
        /* border-left: 1px solid #555;
        border-right: 1px solid var(--primary-background); */
    }
    
    
    .menu-item:hover {
        color: var(--text-color);
    }
    
    .menu-item>label {
        white-space: nowrap;
        color: white;
        font-weight: bold;
        /*color: var(--marquee-color);*/
    }

    .menu-item>img {
        height: 30px;
    }
    .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;
        /*padding: 0 calc(var(--mobile-padding-horizontal) * 2)*/
    }
    


    .bantuan-content {
        flex-direction: column;
        list-style: disc;
        gap: 8px;
    }
    
    .footer {
        font-size: 1rem;
        padding-bottom: 96px;
    }

    .footer-group {
        /*justify-content: space-between;*/
        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
    }
        .contentdata {
        background: var(--primary-background);
        padding: 12px 0;
    }

    .banner {
        aspect-ratio: 3;
    }

    .banner>* {
        border-radius: 16px;
        border-collapse: separate;
        border: 2px solid gray;
    }
    
    .btn-footer {
    padding: 0px 8px;
    border: 1px solid var(--reverse-theme-color); 
    border-radius: 4px; 
    height: 32px; 
    padding: 0 16px; 
    display: grid; 
    place-items: center; 
    color: var(--reverse-theme-color);
    }

    .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: 1.2rem;
    }