*{
    box-sizing:border-box;
    font-family: Arial, sans-serif;
}

body{
    margin:0;
    background:#0b0b0b;
    color:#fff;
}

a{
    text-decoration:none; /* hilangkan garis bawah */
    color:inherit;        /* ikuti warna di dalamnya */
}

.container{
    max-width:420px;
    margin:auto;
    padding-top:64px; /* sesuaikan tinggi header */
    background-image:url("/assets/bgrn/Screenshot_20260222-183949.jpg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-attachment:fixed;
}
/* HEADER */
.header{
    position:fixed;
    top:0;
    left:0;
    right:0;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:12px;
    z-index:999;

    /* gradient dasar */
    background:linear-gradient(90deg,#000,#1a1a1a,#000);
    background-size:200% 100%;

    /* animasi denyut */
    animation:headerPulse 4s ease-in-out infinite;
}

@keyframes headerPulse{
    0%{
        background-position:0% 50%;
        filter:brightness(1);
    }
    50%{
        background-position:100% 50%;
        filter:brightness(1.15);
    }
    100%{
        background-position:0% 50%;
        filter:brightness(1);
    }
}

.logo{
    color:#f5c26b;
    font-weight:bold;
    font-size:22px;
}
.livechat{
    padding:6px 12px;
    font-weight:bold;
    font-size:12px;
    border-radius:20px;
    border:3px solid transparent;
    background:
      linear-gradient(#616161,#0F0F0F) padding-box,
      linear-gradient(
        to bottom,
        #F5E973 0%,
        #D29614 50%,
        #D29614 100%
      ) border-box;

    color:#fff;
    font-weight:bold;
}

/* BANNER SLIDER */
.banner-slider{
    overflow:hidden;
    background:
      linear-gradient(#111,#111) padding-box,
      linear-gradient(
        to bottom,
        #757575,
        #000
      ) border-box;
      margin-bottom: 3px;
}

/* SLIDES */
.slides{
    position:relative;
    width:100%;
    
}

/* IMAGE */
.slides img{
    width:100%;
    height:auto;
    display:none;
    transition:opacity .8s ease-in-out;
}

/* IMAGE AKTIF */
.slides img.active{
    display:block;
}

.icon-menu{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:7px;
    padding:5px;
}

.icon{
  
    border-radius:14px;
    display:flex;
    justify-content:center;
    align-items:center;
}

.icon img{
    width:100%;
    height:auto;
    max-width:70px;
    display:block;
}



/* BUTTON */
.btn-gold{
    margin-top:20px;
    margin-left:19px;
    margin-right:19px;
    margin-bottom: 19px;
    padding:14px;
    text-align:center;
    border-radius:30px;
    border:3px solid transparent;
    background:
      linear-gradient(#f7d17b,#c9962e) padding-box,
      linear-gradient(
        to bottom,
        #757575 0%,
        #494949 50%,
        #000 100%
      ) border-box;

    color:#2D2D2D;
    font-weight:bold;
}


.form{
    padding:10px;
}

/* SATU BARIS INPUT */
.input-row{
    position:relative;
    display:flex;
    align-items:center;
    background:#fff;
    border:1px solid #757575;
    border-radius:40px;
    height:40px;
    margin-top: 10px;
    margin-bottom:8px;
    margin-left:10px;
    margin-right:10px;
    overflow:hidden;
}

/* ICON KIRI */
.icon-left{
    width:50px;
    height:40px;
    background:linear-gradient(#5F5F5F,#000);
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius: 30px 0px 0px 30px;
    border-right:3px solid #F6EA74;
    border-top:3px solid #F6EA74;
    border-left:3px solid #D29614;
    border-bottom:3px solid #D29614;
}

.icon-left img{
    width:22px;
    height:22px;
}

/* INPUT */
.input-row input{
    flex:1;
    height:100%;
    border:none;
    outline:none;
    font-size:13px;
    padding:0 16px;
    color:#666;
    background:transparent;
}

/* ICON KANAN */
.icon-right{
    width:56px;
    height:56px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}

.icon-right img{
    width:24px;
    height:24px;
    opacity:.6;
}

.form-links{
    display:flex;
    justify-content:space-between;
    margin-left:21px;
    margin-right:21px;
    margin-top:6px;
    margin-bottom: 20px;
    font-size:14px;
}

.form-links a{
    color:#fff;
    text-decoration:underline;
    font-weight:500;
    text-shadow:
        0 1px 2px #000,
        0 2px 4px rgba(0,0,0,.8);
}

/* OPTIONAL */
.form-links a:hover{
    opacity:.8;
}



/* BUTTONS */
.btn{
    margin:8px 10px;
    margin-left:19px;
    margin-right:19px;
    padding:11px;
    border-radius:30px;
    text-align:center;
    font-weight:bold;
    height: 45px;
}
.btn.login{
   color:#2F2B2A;
   border:3px solid transparent;
    background:
      linear-gradient(#f7d17b,#c9962e) padding-box,
      linear-gradient(
        to bottom,
        #757575 0%,
        #494949 50%,
        #000 100%
      ) border-box;
}
.btn.daftar{
  border:3px solid transparent;
    background:
      linear-gradient(#ff4b4b,#b30000) padding-box,
      linear-gradient(
        to bottom,
        #FFE77B 0%,
        #D6960E 100%
      ) border-box;
  
}
.btn.promosi{
  border:3px solid transparent;
    background:
      linear-gradient(#f7d17b,#c9962e) padding-box,
      linear-gradient(
        to bottom,
        #757575 0%,
        #494949 50%,
        #000 100%
      ) border-box;
  color:#2F2B2A;}
.btn.blue{
  background:linear-gradient(#2bbcff,#0077b6);
   margin:8px 10px;
   margin-left:19px;
   margin-right:19px;
   padding:13px;
   border-radius:30px;
   text-align:center;
   font-weight:bold;
   height: 45px;
}

/* MENU LIST */
.menu-list .btn{
    border:3px solid transparent;
    background:
      linear-gradient(#f7d17b,#c9962e) padding-box,
      linear-gradient(
        to bottom,
        #757575 0%,
        #494949 50%,
        #000 100%
      ) border-box;
    color:#2F2B2A;
}

.marquee-wrap{
    background:#11111150;
    border-top:1px solid #c9962e;
    border-bottom:1px solid #c9962e;
    border-left:none;
    border-right:none;
    border-radius:5px;
    overflow:hidden;
    padding:4px 0;
}

.marquee{
    white-space:nowrap;
    overflow:hidden;
}

.marquee span{
    display:inline-block;
    padding-left:100%;
    color:#fff;
    font-size:12.5px;
    font-weight:bold;
    animation:marquee 18s linear infinite;
}

@keyframes marquee{
    0%{ transform:translateX(0); }
    100%{ transform:translateX(-100%); }
}

.text-shadow{
    text-shadow:
        0 1px 2px #000,
        0 2px 4px rgba(0,0,0,.8);
}


.marquee-continuous{
    overflow:hidden;
    margin:10px 19px;
    margin-top: 30px;
}

/* WRAPPER PANJANG */
.marquee-inner{
    display:flex;
    width:max-content;
    animation:scroll-continuous 18s linear infinite;
}

/* ISI */
.marquee-track{
    display:flex;
    align-items:center;
    gap:0px;
}

/* IMAGE */
.marquee-track img{
    height:100px;
    width:auto;
    display:block;
    margin-left: 8px;
}

/* ANIMASI ASLI (TANPA KELIATAN BALIK) */
@keyframes scroll-continuous{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-50%);
    }
}

/* WRAPPER UTAMA */
.hasil-box{
    margin:11px;
    margin-top: 45px;
    padding:14px;
    border-radius:12px;
    background:rgba(0,0,0,.6);
    border:0.5px solid #d4a640;
    box-shadow:
        0 0 12px rgba(212,166,64,.7),
        0 0 30px rgba(212,166,64,.35);
    color:#fff;
}

/* HEADER */
.hasil-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:14px;
}

.hasil-title{
    font-size:20px;
    font-weight:bold;
}

.hasil-date{
    font-size:14px;
    opacity:.9;
}

/* SEARCH */
.hasil-search{
    display:flex;
    align-items:center;
    padding:10px 14px;
    margin-bottom:16px;
    border-radius:30px;
    background:linear-gradient(#2b2b2b,#000);
    border:2px solid #d4a640;
}

.icon-search{
    margin-right:10px;
    font-size:18px;
}

.hasil-search input{
    flex:1;
    border:none;
    outline:none;
    background:transparent;
    color:#fff;
    font-size:14px;
}

/* GRID */
.hasil-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
}

/* CARD */
.hasil-card{
    background:linear-gradient(180deg,#3a3a3a00,#0000000);
    border:2px solid #d4a640;
    border-radius:9px;
    padding-bottom: 10px;
    text-align:center;
}

.card-header{
    background:linear-gradient(90deg,#444,#777,#444);
    background-size:200% 100%;

    border-radius:7px 7px 0 0;
    border-bottom:2px solid #d4a640;
    padding:6px;
    font-size:11px;
    font-weight:bold;
    margin-bottom:8px;

    animation:pulseGradient 3s ease-in-out infinite;
}

@keyframes pulseGradient{
    0%{
        background-position:0% 50%;
        filter:brightness(1);
    }
    50%{
        background-position:100% 50%;
        filter:brightness(1.25);
    }
    100%{
        background-position:0% 50%;
        filter:brightness(1);
    }
}

.card-date{
    font-size:13px;
    opacity:.85;
    margin-bottom:6px;
}

.card-number{
    font-size:26px;
    font-weight:bold;
    color:#ffd97a;
    letter-spacing:2px;
}

/* WRAPPER */
.bank-box{
    margin:10px;
    padding:14px;
    border-radius:10px;
    background:rgba(0,0,0,.55);
    border:0.5px solid #d4a640;
    box-shadow:
        0 0 12px rgba(212,166,64,.6),
        0 0 28px rgba(212,166,64,.35);
}

/* GRID */
.bank-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:4px;
}

/* ITEM */
.bank-item{
    position:relative;
    background:#fff;
    border-radius:4px;
    padding:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    height:30px;
}

/* LOGO */
.bank-item img{
    margin-left: 5px;
    max-height:15px;
    max-width:80%;
}

/* STATUS DOT */
.status{
    position:absolute;
    left:8px;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#bbb;
}

/* AKTIF (HIJAU DENYUT) */
.status.on{
    background:#7CFC00;
    animation:pulseGreen 1.6s ease-in-out infinite;
}

/* NONAKTIF (MERAH DENYUT) */
.status.off{
    background:#ff4d4d;
    animation:pulseRed 2s ease-in-out infinite;
}

/* ANIMASI HIJAU */
@keyframes pulseGreen{
    0%{
        transform:scale(1);
        opacity:1;
        box-shadow:0 0 4px rgba(124,252,0,.6);
    }
    50%{
        transform:scale(1.4);
        opacity:.7;
        box-shadow:0 0 12px rgba(124,252,0,1);
    }
    100%{
        transform:scale(1);
        opacity:1;
        box-shadow:0 0 4px rgba(124,252,0,.6);
    }
}

/* ANIMASI MERAH */
@keyframes pulseRed{
    0%{
        transform:scale(1);
        opacity:.9;
        box-shadow:0 0 4px rgba(255,77,77,.6);
    }
    50%{
        transform:scale(1.3);
        opacity:.6;
        box-shadow:0 0 10px rgba(255,77,77,1);
    }
    100%{
        transform:scale(1);
        opacity:.9;
        box-shadow:0 0 4px rgba(255,77,77,.6);
    }
}

/* RESPONSIVE */
@media (max-width:480px){
    .bank-grid{
        grid-template-columns:repeat(4,1fr);
    }
}


/* FOOTER COPYRIGHT */
.footer-copy{
    margin-top:20px;
    padding:18px 10px;

    text-align:center;
    font-size:14px;
    color:rgba(255,255,255,.7);

    background:rgba(0,0,0,.6);

    /* garis emas atas */
    border-top: 1px solid #d4a640;

    /* efek glow halus */
    text-shadow:0 0 6px rgba(255,255,255,.25);
}