body {
    background: #000000 url(https://imgstorage.site/view/plotwis/dptoto-bg-3000x1688.jpg) center center no-repeat !important;
    background-attachment: fixed !important;
    background-position: center -45px !important;
    background-size: cover !important;
}
.header-before {
    z-index: 99999 !important;
    max-width: 1170px !important;
    margin: auto !important;
}   
.categorylist__item, .beforesidebar__menu-overlay {
    background: linear-gradient(to bottom, #05143d 0%, #05143d 100%);
}
.depositpage__method {
    background-color: rgba(29, 138, 231, 1) !important;
}
.depositpage__method--active {
    border: 3px solid var(--border-active) !important;
    border-radius: 12px !important;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.18),
        0 0 10px rgba(255, 215, 0, 0.65),
        inset 0 0 8px rgba(255, 255, 255, 0.10) !important;
}
.beforesidebar__menu-item {
    position: relative !important;
    overflow: hidden !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: calc(var(--spacing) * 2.5) !important;
    width: 100% !important;

    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 20px !important;

    padding: 10px 12px !important;
    margin-bottom: 6px !important;

    border-radius: 35px !important;
    border-top: 1px solid rgba(95, 230, 255, 0.95) !important;
    border-bottom: 1px solid rgba(0, 120, 255, 0.9) !important;
    border-left: 4px solid #00eaff !important;
    border-right: 6px solid #008cff !important;

    background:
    linear-gradient(
        180deg,
        rgba(160, 250, 255, 0.65) 0%,
        rgba(0, 180, 255, 0.98) 34%,
        rgba(0, 105, 220, 1) 68%,
        rgba(4, 45, 135, 1) 100%
    ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.493),
        inset 0 -10px 18px rgba(0, 0, 0, 0.42),
        0 0 8px rgba(0, 234, 255, 0.42),
        0 0 18px rgba(0, 120, 255, 0.34) !important;

    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.95),
        0 0 8px rgba(0, 234, 255, 0.72) !important;

    z-index: 2 !important;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease !important;
}

/* Efek glossy kaca bagian atas */
.beforesidebar__menu-item::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 10px;
    right: 10px;
    height: 42%;
    border-radius: 35px 35px 14px 14px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.46) 0%,
            rgba(255, 255, 255, 0.18) 48%,
            rgba(255, 255, 255, 0.02) 100%
        );

    pointer-events: none;
    z-index: 0;
}

/* Efek cahaya jalan */
.beforesidebar__menu-item::after {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 46%;
    height: 100%;

    background:
        linear-gradient(
            120deg,
            transparent 0%,
            rgba(255, 255, 255, 0.12) 35%,
            rgba(255, 255, 255, 0.55) 50%,
            rgba(0, 255, 255, 0.42) 60%,
            transparent 100%
        );

    transform: skewX(-24deg);
    animation: glossyBlueMove 3.4s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

/* Biar icon dan text tetap di atas efek glossy */
.beforesidebar__menu-item > * {
    position: relative;
    z-index: 2;
}

.beforesidebar__menu-item:hover {
    transform: translateX(4px);

    border-left-color: #7af7ff !important;
    border-right-color: #00f0ff !important;
    border-top-color: rgba(160, 250, 255, 1) !important;

    background:
        linear-gradient(
            180deg,
            rgba(120, 245, 255, 0.5) 0%,
            rgba(0, 130, 255, 0.98) 42%,
            rgba(0, 45, 135, 1) 72%,
            rgba(0, 10, 55, 1) 100%
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -10px 20px rgba(0, 0, 0, 0.45),
        0 0 12px rgba(0, 240, 255, 0.8),
        0 0 26px rgba(0, 130, 255, 0.58),
        0 0 38px rgba(0, 65, 255, 0.35) !important;
}

@keyframes glossyBlueMove {
    0% {
        left: -75%;
        opacity: 0;
    }

    18% {
        opacity: 1;
    }

    55% {
        opacity: 0.9;
    }

    100% {
        left: 130%;
        opacity: 0;
    }
}

/* Bikin icon sidebar lebih kelihatan */
.beforesidebar__menu-item svg,
.beforesidebar__menu-item i,
.beforesidebar__menu-item .icon,
.beforesidebar__menu-item [class*="icon"] {
    position: relative !important;
    z-index: 3 !important;
    color: #ffffff !important;
    fill: #ffffff !important;
    opacity: 1 !important;

    filter:
        drop-shadow(0 0 4px rgba(255,255,255,0.9))
        drop-shadow(0 0 8px rgba(0,234,255,0.85));
}

/* Area kiri icon dibikin lebih gelap sedikit biar icon putih muncul */
.beforesidebar__menu-item {
    background:
        linear-gradient(
            90deg,
            rgba(0, 20, 75, 1) 0%,
            rgba(0, 72, 175, 0.98) 23%,
            rgba(0, 150, 255, 0.98) 58%,
            rgba(40, 225, 255, 0.75) 100%
        ) !important;
}

/* Glossy atas jangan terlalu nutup icon */
.beforesidebar__menu-item::before {
    left: 54px !important;
    right: 10px !important;
}

.bukumimpi__select,
.bukumimpi__input,
.changepasswordpage__input,
.registerpage__input,
.resetpasswordpage__input,
.banktransfer__input,
.ewallet__input,
.qris__input,
.virtualaccount__input,
.withdrawpage__input,
.header-before__input,
.gamelistpage__search-input {
    color: #eaffff !important;

    background:
        linear-gradient(
            180deg,
            rgba(107, 228, 255, 0.34) 0%,
            rgba(105, 195, 252, 0.24) 45%,
            rgba(93, 146, 245, 0.42) 100%
        ) !important;

    border: 1px solid rgba(54, 248, 255, 0.85) !important;
    border-radius: 8px !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.38),
        inset 0 -8px 16px rgba(0, 20, 60, 0.35),
        0 0 8px rgba(0, 210, 255, 0.35),
        0 0 16px rgba(0, 110, 255, 0.22) !important;

    text-shadow:
        0 0 4px rgb(255, 255, 255),
        0 0 8px rgba(0, 220, 255, 0.55) !important;

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    outline: none !important;
}

/* Placeholder biar ikut glossy putih biru */
.bukumimpi__select::placeholder,
.bukumimpi__input::placeholder,
.changepasswordpage__input::placeholder,
.registerpage__input::placeholder,
.resetpasswordpage__input::placeholder,
.banktransfer__input::placeholder,
.ewallet__input::placeholder,
.qris__input::placeholder,
.virtualaccount__input::placeholder,
.withdrawpage__input::placeholder,
.header-before__input::placeholder,
.gamelistpage__search-input::placeholder {
    color: rgba(235, 255, 255, 0.82) !important;
    text-shadow:
        0 0 4px rgba(255, 255, 255, 0.35),
        0 0 8px rgba(0, 220, 255, 0.45) !important;
}

/* Saat diklik / focus */
.bukumimpi__select:focus,
.bukumimpi__input:focus,
.changepasswordpage__input:focus,
.registerpage__input:focus,
.resetpasswordpage__input:focus,
.banktransfer__input:focus,
.ewallet__input:focus,
.qris__input:focus,
.virtualaccount__input:focus,
.withdrawpage__input:focus,
.header-before__input:focus,
.gamelistpage__search-input:focus {
    background:
        linear-gradient(
            180deg,
            rgba(160, 245, 255, 0.42) 0%,
            rgba(35, 170, 255, 0.32) 45%,
            rgba(5, 60, 150, 0.52) 100%
        ) !important;

    border-color: #8af7ff !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.48),
        inset 0 -8px 16px rgba(0, 20, 60, 0.35),
        0 0 10px rgba(0, 240, 255, 0.65),
        0 0 22px rgba(0, 120, 255, 0.42) !important;
}

.btn__inner--info,
.btn__inner--warning {
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            rgba(110, 235, 255, 0.95) 0%,
            rgba(27, 155, 220, 1) 42%,
            rgba(8, 92, 175, 1) 72%,
            rgba(4, 52, 125, 1) 100%
        ) !important;

    color: #ffffff !important;

    border: 1px solid rgba(120, 240, 255, 0.9) !important;
    border-radius: 8px !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -8px 16px rgba(0, 20, 70, 0.38),
        0 0 8px rgba(0, 220, 255, 0.42),
        0 0 16px rgba(0, 110, 255, 0.28) !important;

    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.8),
        0 0 6px rgba(0, 220, 255, 0.6) !important;

    transition: all 0.25s ease;
}

/* efek glossy kaca */
.btn__inner--info::before,
.btn__inner--warning::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 6px;
    right: 6px;
    height: 45%;

    border-radius: 8px 8px 4px 4px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.48) 0%,
            rgba(255, 255, 255, 0.18) 55%,
            rgba(255, 255, 255, 0.02) 100%
        );

    pointer-events: none;
}

/* hover biar nyala dikit */
.btn__inner--info:hover,
.btn__inner--warning:hover {
    background:
        linear-gradient(
            180deg,
            rgba(150, 245, 255, 1) 0%,
            rgba(35, 175, 240, 1) 42%,
            rgba(0, 115, 215, 1) 72%,
            rgba(5, 65, 150, 1) 100%
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        inset 0 -8px 18px rgba(0, 20, 70, 0.42),
        0 0 12px rgba(0, 235, 255, 0.7),
        0 0 24px rgba(0, 120, 255, 0.45) !important;

    transform: translateY(-1px);
}

.box-middle {
    padding: 0;
    border: 2px groove #dbaf4c;
    margin: 0 5px 10px;
    text-align: center;
    margin-top: 25px;
    margin-bottom: 15px;
}

.post-card3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    transition: all .3s ease;
    border-radius: 10px
}

.post-card3:hover {
    transform: scale(1.05);
    z-index: 10
}

.post-card3 img {
    border-radius: 10px;
    max-width: 100%;
    height: auto
}

.post-card3 a,
.post-card3 a:hover {
    text-decoration: none;
    color: #f1f1f1
}

.post-card3 .post-overlay {
    position: absolute;
    background-color: transparent;
    width: 100%;
    height: 100%;
    z-index: 5
}

.post-card3-link {
    position: absolute;
    bottom: 0;
    background: #000;
    background: rgba(0, 0, 0, .5);
    color: #f1f1f1;
    width: 100%;
    transition: .5s ease;
    opacity: 0;
    color: #fff;
    font-size: 17px;
    padding: 10px;
    text-align: center;
    border-radius: 0 0 10px 10px;
    font-family: Helvetica, sans-serif
}

.post-card3:hover .post-card3-link {
    opacity: 1
}.box-middle {
    padding: 0;
    border: 2px groove #dbaf4c;
    margin: 0 5px 10px;
    text-align: center;
    margin-top: 25px;
    margin-bottom: 15px;
}

.post-card3:hover {
    transform: scale(1.05);
    z-index: 10
}

.post-card3 img {
    border-radius: 10px;
    max-width: 100%;
    height: auto
}

.post-card3 a,
.post-card3 a:hover {
    text-decoration: none;
    color: #f1f1f1
}

.post-card3 .post-overlay {
    position: absolute;
    background-color: transparent;
    width: 100%;
    height: 100%;
    z-index: 5
}

.post-card3-link {
    position: absolute;
    bottom: 0;
    background: #000;
    background: rgba(0, 0, 0, .5);
    color: #f1f1f1;
    width: 100%;
    transition: .5s ease;
    opacity: 0;
    color: #fff;
    font-size: 17px;
    padding: 10px;
    text-align: center;
    border-radius: 0 0 10px 10px;
    font-family: Helvetica, sans-serif
}

.post-card3:hover .post-card3-link {
    opacity: 1
}

.custom-game-slider {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 30px auto;
    padding: 0 50px;
    box-sizing: border-box;
}

.slider-grid-wrapper {
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.slider-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.slider-slide {
    flex: 0 0 100%;
}

.grid-4col {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    padding: 15px;
    background: #f8f9fa;
}

.grid-item {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    aspect-ratio: 1 / 1;
}

.grid-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
}

.grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
.grid-item:hover img {
    transform: scale(1.1);
 }

 .slider-nav {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 40px;
     height: 40px;
     background: white;
     border: 2px solid #333;
     border-radius: 50%;
     cursor: pointer;
     font-size: 20px;
     font-weight: bold;
     color: #333;
     transition: all 0.3s ease;
     z-index: 10;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .slider-nav:hover {
     background: #333;
     color: white;
     border-color: white;
 }

 .slider-nav.prev {
     left: 0;
 }

 .slider-nav.next {
     right: 0;
 }

 .slider-dots {
     display: flex;
     justify-content: center;
     margin-top: 20px;
     gap: 10px;
 }

 .slider-dot {
     width: 12px;
     height: 12px;
     border-radius: 50%;
     background: #ccc;
     cursor: pointer;
     transition: all 0.3s ease;
 }

 .slider-dot.active {
     background: #333;
     transform: scale(1.2);
 }

 .slider-dot:hover {
     background: #666;
 }

 @media (max-width: 768px) {
     .custom-game-slider {
         padding: 0 40px;
     }
     
     .grid-4col {
         grid-template-columns: repeat(4, 1fr);
         gap: 10px;
         padding: 10px;
     }
     
     .slider-nav {
         width: 35px;
         height: 35px;
         font-size: 18px;
     }
 }

 @media (max-width: 480px) {
     .custom-game-slider {
         padding: 0 35px;
     }
     
     .grid-4col {
         grid-template-columns: repeat(4, 1fr);
         gap: 5px;
         padding: 5px;
     }
     
     .slider-nav {
         width: 30px;
         height: 30px;
         font-size: 16px;
     }
 }

/* INPUT LOGIN DESKTOP: BACKGROUND PUTIH, TEKS HITAM */
@media screen and (min-width: 769px) {
    .header-before__input {
        background: #ffffff !important;
        color: #000000 !important;
        -webkit-text-fill-color: #000000 !important;
        caret-color: #000000 !important;
        text-shadow: none !important;
    }

    .header-before__input::placeholder {
        color: #777777 !important;
        -webkit-text-fill-color: #777777 !important;
        opacity: 1 !important;
        text-shadow: none !important;
    }

    .header-before__input:focus {
        background: #ffffff !important;
        color: #000000 !important;
        -webkit-text-fill-color: #000000 !important;
        caret-color: #000000 !important;
        text-shadow: none !important;
    }
}