nav.navbar {
    background:
        radial-gradient(circle at 10% 20%, rgba(0, 195, 255, 0.45) 0%, transparent 45%),
        radial-gradient(circle at 80% 15%, rgba(0, 240, 255, 0.40) 0%, transparent 50%),
        radial-gradient(circle at 50% 130%, rgba(0, 180, 255, 0.35) 0%, transparent 65%),
        linear-gradient(135deg, #1DC9FF 0%, #0A6FB8 100%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 2px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 25px rgba(0, 100, 180, 0.55);
    padding: 12px 0;
    position: relative;
    overflow: hidden;
}

/* LINE GLOW ANIMATED */
nav.navbar::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(
        90deg,
        rgba(0,255,255,0) 0%,
        rgba(0,255,255,0.9) 50%,
        rgba(0,255,255,0) 100%
    );
    animation: oceanGlow 3.8s linear infinite;
}

/* POLYGON LIGHT TEXTURE */
nav.navbar::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.15);
    clip-path: polygon(12% 18%, 35% 6%, 65% 18%, 82% 42%, 68% 78%, 38% 92%, 18% 58%);
    filter: blur(14px);
    opacity: 0.22;
    pointer-events: none;
}

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

/* MENU TEXT + ICON */
nav.navbar .nav-link {
    color: rgba(255, 255, 255, 0.95) !important;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.5px;
    text-shadow: 0 0 10px rgba(0, 225, 255, 0.65);
    transition: 0.25s ease;
}

nav.navbar .nav-link i,
nav.navbar svg {
    opacity: 0.9;
    filter: drop-shadow(0 0 8px rgba(0, 255, 255, 0.75));
    transition: 0.25s ease;
}

nav.navbar .nav-link:hover {
    color: #d8f8ff !important;
    text-shadow: 0 0 14px rgba(0, 255, 255, 1);
}

nav.navbar .nav-link:hover i,
nav.navbar .nav-link:hover svg {
    opacity: 1;
    transform: translateY(-2px);
    filter: drop-shadow(0 0 12px rgba(0, 255, 255, 1));
}

/* ==============================
   GLASSMORPHISM BESAR (PANEL)
   ============================== */
.p-3.rounded-3.glassmorphism {
    background:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.28) 0%,
            rgba(255, 255, 255, 0.15) 35%,
            rgba(255, 255, 255, 0.10) 100%
        ),
        linear-gradient(
            135deg,
            rgba(0, 190, 255, 0.85),
            rgba(0, 135, 220, 0.85)
        );
    padding: 26px;
    border-radius: 16px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.38);
    box-shadow:
        inset 0 0 14px rgba(255, 255, 255, 0.20),
        0 6px 26px rgba(0, 120, 200, 0.45);
    position: relative;
    overflow: hidden;
}

/* Glow detail */
.p-3.rounded-3.glassmorphism::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at 25% 22%,
        rgba(255, 255, 255, 0.22),
        transparent 60%
    );
    opacity: 0.30;
    pointer-events: none;
}

/* ==============================
   GLASSMORPHISM KECIL (TILE)
   ============================== */
.py-3.rounded-3.glassmorphism {
    background:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.30) 0%,
            rgba(255, 255, 255, 0.14) 40%,
            rgba(255, 255, 255, 0.08) 100%
        ),
        linear-gradient(
            135deg,
            rgba(0, 195, 255, 0.85),
            rgba(0, 145, 220, 0.85)
        );
    border-radius: 14px;
    padding: 14px 0;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.40);
    box-shadow:
        inset 0 0 12px rgba(255, 255, 255, 0.18),
        0 4px 22px rgba(0, 135, 210, 0.45);
    position: relative;
    overflow: hidden;
    transition: 0.25s ease;
}

/* Glow logo */
.py-3.rounded-3.glassmorphism img {
    transition: 0.25s ease;
    filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.8));
}

.py-3.rounded-3.glassmorphism:hover {
    transform: translateY(-4px);
    box-shadow:
        inset 0 0 14px rgba(255, 255, 255, 0.22),
        0 6px 26px rgba(0, 210, 255, 0.60);
    border-color: rgba(255, 255, 255, 0.55);
}

.py-3.rounded-3.glassmorphism:hover img {
    filter: drop-shadow(0 0 26px rgba(255, 255, 255, 1));
    transform: scale(1.05);
}

/* ==================================
   PROGRESS BAR (DEPOSIT/WITHDRAW)
   ================================== */
.progress {
    height: 12px !important;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.30) !important;
    overflow: hidden;
}

.progress-bar {
    background: linear-gradient(
        90deg,
        rgba(160, 235, 255, 1),
        rgba(210, 255, 255, 1)
    ) !important;
    border-radius: 50px;
    box-shadow: 0 0 8px rgba(180, 255, 255, 0.9);
}

/* ==============================
   GLOBAL CARD – STYLE A
   ============================== */
.card {
    background:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.30) 0%,
            rgba(255, 255, 255, 0.15) 40%,
            rgba(255, 255, 255, 0.10) 100%
        ),
        linear-gradient(
            135deg,
            rgba(0, 195, 255, 0.85),
            rgba(0, 140, 220, 0.85)
        );
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.38) !important;
    box-shadow:
        inset 0 0 12px rgba(255, 255, 255, 0.18),
        0 6px 28px rgba(0, 150, 255, 0.45);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: #eaffff !important;
    position: relative;
    overflow: hidden;
    transition: 0.25s ease;
}

#member-status-panel {
    background:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.30) 0%,
            rgba(255, 255, 255, 0.15) 40%,
            rgba(255, 255, 255, 0.10) 100%
        ),
        linear-gradient(
            135deg,
            rgba(0, 195, 255, 0.85),
            rgba(0, 140, 220, 0.85)
        );
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.38) !important;
    box-shadow:
        inset 0 0 12px rgba(255, 255, 255, 0.18),
        0 6px 28px rgba(0, 150, 255, 0.45);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: #eaffff !important;
    position: relative;
    overflow: hidden;
    transition: 0.25s ease;
}

#member-status-panel .text-gradient {
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: rgb(255 248 59) !important; /* warna neon biru */
    color: rgb(255 248 59) !important;
    text-shadow:
        0 0 10px rgba(0, 255, 255, 0.9),
        0 0 20px rgba(0, 210, 255, 0.9),
        0 0 35px rgba(0, 180, 255, 0.8) !important;
    font-weight: 900 !important;
}

#member-status-panel a span {
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: rgb(255 248 59) !important; /* biru neon */
    color: rgb(255 248 59) !important;
    font-weight: 900 !important;
    text-shadow:
        0 0 10px rgba(0, 255, 255, 0.9),
        0 0 20px rgba(0, 210, 255, 0.9),
        0 0 35px rgba(0, 180, 255, 0.8) !important;
}

#category-navbar-desktop a {
    color: rgb(255, 255, 255) !important;
}

.d-flex.w-100 a {
    color: rgb(255, 255, 255) !important;
}

.card.p-3.my-3 a {
    color: #e22b2b !important; /* ungu neon contoh */
    font-weight: 600;
    text-decoration: none;
}

.card.p-3.my-3 a:hover {
    color: #ff7d7d !important; /* hover lebih terang */
}

.container.my-3 > .row {
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 0 20px rgba(0, 150, 255, 0.25);
}

#selectProvider {
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 0 20px rgba(0, 150, 255, 0.25);
}

.table.table-bordered {
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 0 20px rgba(0, 150, 255, 0.25);
}

.tab-content {
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 0 20px rgba(0, 150, 255, 0.25);
}

.nav-pills {
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 0 20px rgba(0, 150, 255, 0.25);
}

.nav-pills a {
    color: #ffffff;
}

.nav-link.active {
    background: linear-gradient(
        90deg,
        rgba(160, 235, 255, 1),
        rgba(210, 255, 255, 1)
    ) !important;
    border-radius: 50px;
    box-shadow: 0 0 8px rgba(180, 255, 255, 0.9);
}

/* Nominal warna MERAH untuk text-danger */
.text-danger {
    color: #ff3b3b !important; /* merah terang */
    font-weight: 600;
}

/* Nominal warna BIRU NEON untuk text-success */
.text-success {
    color: #00e0ff !important; /* biru neon ala theme kamu */
    font-weight: 600;
    text-shadow: 0 0 6px rgba(0, 224, 255, 0.6); /* efek glow tipis biar mewah */
}

/* Opsional: rapihin angka biar lebih rapi */
.table .text-end span {
    font-size: 1.05em;
    letter-spacing: 0.5px;
}

.nav.nav-tabs {
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    border-radius: 14px;
    padding: 5px;
    box-shadow: 0 0 20px rgba(0, 150, 255, 0.25);
}

/* =========================================
   TAB TIDAK AKTIF
========================================= */
.nav.nav-tabs .nav-link {
    color: #1DC9FF !important;    /* warna biru */
    font-weight: 700 !important;  /* bold */
    border: none !important;      /* bersih */
}

/* HOVER — optional biar smooth */
.nav.nav-tabs .nav-link:hover {
    color: #1DC9FF !important;
    opacity: 0.8;
}

/* =========================================
   TAB AKTIF
========================================= */
.nav.nav-tabs .nav-link.active {
    background-color: #1DC9FF !important; /* tombol jadi biru */
    color: #000 !important;               /* teks jadi hitam */
    font-weight: 700 !important;          /* tetap bold */
    border: none !important;
    border-radius: 12px !important;       /* biar sama kayak screenshot */
}

/* HAPUS GARIS TAB BAWAH DEFAULT BOOTSTRAP */
.nav.nav-tabs {
    border-bottom: none !important;
}

#agentmemberbankid {
    border-color: #00a2e6 !important;
    color: #00bfff !important;
}


.border.border-top-0 {
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    border-radius: 14px;
    padding: 5px;
    box-shadow: 0 0 20px rgba(0, 150, 255, 0.25);
}



#select-market {
    border-color: #00bfff;
}

#info-website {
    border-color: #00bfff;
}

.btn.btn-outline-primary.rounded-3 {
    border-color: #00bfff;
    color: #00bfff;
}

.btn.btn-outline-primary.rounded-3:hover {
    background-color: #ffe100;
}

/* ================================
   PANEL 4D – WARNA BORDER & TEKS
================================ */

/* BORDER TABLE */
table.table,
table.table th,
table.table td {
    border-color: #00bfff !important;
}

/* TEKS TABLE */
table.table,
table.table td,
table.table strong,
table.table small,
table.table .text-end {
    color: #00bfff !important;
}

/* BORDER INPUT */
input.form-control {
    border-color: #00bfff !important;
    color: #00bfff !important;
}

/* INPUT PLACEHOLDER */
input.form-control::placeholder {
    color: #00bfff !important;
    opacity: 0.6;
}

/* CHECKBOX BORDER */
input.form-check-input {
    border-color: #00bfff !important;
}

input.form-check-input:checked {
    background-color: #00bfff !important;
    border-color: #00bfff !important;
}


/* GARIS PEMBATAS TABEL */
.table-bordered > :not(caption) > * {
    border-width: 1px !important;
    border-color: #00bfff !important;
}

/* SEMUA LABEL RADIO 4D */
.btn-group .btn {
    border-color: #1DC9FF !important;
    color: #1DC9FF !important;
}

/* KETIKA DI-HOVER */
.btn-group .btn:hover {
    background-color: rgba(29, 201, 255, 0.15) !important;
    border-color: #1DC9FF !important;
    color: #1DC9FF !important;
}

/* TOMBOL AKTIF (CHECKED) */
.btn-check:checked + .btn {
    background-color: #1DC9FF !important;
    border-color: #1DC9FF !important;
    color: #000 !important; /* teks biar jelas saat aktif */
}

.btn.btn-outline-primary.btn-sm {
    border-color: #1DC9FF !important;
    color: #1DC9FF !important;
}

.btn.btn-outline-primary.btn-sm:hover {
    border-color: #1DC9FF !important;
    color: #ffffff !important;
    background-color: #1DC9FF;
}

.btn.btn-sm.btn-outline-primary.py-2:hover {
    border-color: #1DC9FF !important;
    color: #ffffff !important;
    background-color: #1DC9FF;
}

/* ============================
   DESKTOP (Default)
============================ */
.row.g-2.mb-3 .promo-button {
    width: 100%;
    min-height: 180px;            /* tinggi fix biar rapi */
    display: flex;
    flex-direction: column;
    justify-content: center;      /* teks center vertikal */
    align-items: center;
    text-align: center;
    padding: 18px;
    border-radius: 12px;
}

/* ============================
   2 COLUMN — LAPTOP & TABLET
============================ */
@media (min-width: 768px) and (max-width: 1199px) {
    .row.g-2.mb-3 .promo-button {
        min-height: 170px;
        padding: 16px;
    }
}

/* ============================
   MOBILE — 1 COLUMN RAPAT RAPI
============================ */
@media (max-width: 767px) {
    .row.g-2.mb-3 .promo-button {
        width: 100%;
        min-height: 150px;
        padding: 15px;
        margin-bottom: 10px;
    }
}

/* ============================
   VERY SMALL MOBILE (≤ 420px)
============================ */
@media (max-width: 420px) {
    .row.g-2.mb-3 .promo-button {
        min-height: 140px;
        padding: 12px;
        font-size: 0.9em;
    }
}



/* === AREA PROMO ONLY === */
.row.g-2.mb-3 .promo-button {
    background:
        radial-gradient(circle at 10% 20%, rgba(0, 195, 255, 0.45) 0%, transparent 45%),
        radial-gradient(circle at 80% 15%, rgba(0, 240, 255, 0.40) 0%, transparent 50%),
        radial-gradient(circle at 50% 130%, rgba(0, 180, 255, 0.35) 0%, transparent 65%),
        linear-gradient(135deg, #1DC9FF 0%, #0A6FB8 100%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 2px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 25px rgba(0, 100, 180, 0.55);
    padding: 12px 0;
    position: relative;
    overflow: hidden;
}

/* Hover efek glowing mewah */
.row.g-2.mb-3 .promo-button:hover {
    border-color: #00e4ff;
    box-shadow: 0 0 18px rgba(0, 220, 255, 0.45);
    transform: translateY(-2px);
}

/* STYLE UNTUK PROVIDER YANG AKTIF */
#selectProvider a.btn.active {
    background-color: #1DC9FF !important;
    border-color: #1DC9FF !important;
    color: #000 !important; /* biar teks/icon kebaca */
}

/* ICON / GAMBAR DI DALAM TOMBOL AKTIF */
#selectProvider a.btn.active img {
    filter: brightness(0) invert(0); /* tetap natural, tidak kebalik warnanya */
}

/* BORDER NORMAL TETAP PRIMARY (BIAR KOLOM RAPI) */
#selectProvider a.btn.btn-outline-primary {
    border-color: #1DC9FF;
    color: #1DC9FF;
}

/* HOVER EFEK */
#selectProvider a.btn.btn-outline-primary:hover {
    background-color: rgba(29, 201, 255, 0.15);
    border-color: #1DC9FF;
    color: #1DC9FF;
}

/* =======================================
   PAGINATION – BIRU & CLEAN
   ======================================= */

/* ITEM PAGINATION NORMAL */
ul.pagination li a,
ul.pagination li span {
    border: 1px solid #1DC9FF !important;
    color: #1DC9FF !important;
    background-color: #000 !important; /* tetap hitam */
}

/* HOVER (opsional, tetap biru tapi soft) */
ul.pagination li a:hover {
    background-color: rgba(29, 201, 255, 0.15) !important;
    color: #1DC9FF !important;
    border-color: #1DC9FF !important;
}

/* ITEM AKTIF */
ul.pagination .active a,
ul.pagination .active span {
    background-color: #1DC9FF !important;
    border-color: #1DC9FF !important;
    color: #000 !important;   /* teks hitam */
}

/* HILANGKAN SHADOW BOOTSTRAP KALAU ADA */
ul.pagination li a:focus {
    box-shadow: none !important;
}

/* SEMUA TEKS DI DALAM SIDEBAR */
#sidebar,
#sidebar a,
#sidebar span,
#sidebar strong,
#sidebar .nav-link,
#sidebar .nav-link i {
    color: #8beaff !important;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-shadow: 0 0 10px rgba(0, 200, 255, 0.8);
    transition: 0.25s ease;
}

/* HR (garis pemisah) juga ikut biru */
#sidebar hr {
    border-color: #1EDAFF !important;
}


/* Judul promo (h5) biar super jelas */
.row.g-2.mb-3 .promo-button h5 {
    color: #ffffff !important;       /* biru neon */
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 6px 0;
    text-shadow: 0 0 6px rgba(0, 114, 122, 0.45);
}

/* Text kecil (small) biar lebih readable */
.row.g-2.mb-3 .promo-button small,
.row.g-2.mb-3 .promo-button i {
    color: #d8faff !important;
    font-size: 0.85rem;
    line-height: 1.3rem;
    font-weight: 500;
}

/* Highlight angka penting (100%, Min Deposit, dll) */
.row.g-2.mb-3 .promo-button small i {
    color: #ffffff !important;
    font-style: normal;
    font-weight: 700;
}

/* Beda antara purple-moon & pink-moon (warna border glow beda dikit) */
.row.g-2.mb-3 .btn-purple-moon {
    border-color: rgba(120, 0, 255, 0.45);
    box-shadow: 0 0 12px rgba(120, 0, 255, 0.25);
}
.row.g-2.mb-3 .btn-purple-moon:hover {
    border-color: #b56aff;
    box-shadow: 0 0 20px rgba(180, 100, 255, 0.55);
}

.row.g-2.mb-3 .btn-pink-moon {
    border-color: rgba(255, 0, 150, 0.35);
    box-shadow: 0 0 12px rgba(255, 0, 170, 0.25);
}
.row.g-2.mb-3 .btn-pink-moon:hover {
    border-color: #ff6ecf;
    box-shadow: 0 0 20px rgba(255, 100, 200, 0.55);
}


/* Polygon glow signature */
.card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at 26% 18%,
        rgba(255, 255, 255, 0.25),
        transparent 65%
    );
    opacity: 0.28;
    pointer-events: none;
}

/* Hover */
.card:hover {
    transform: translateY(-4px);
    box-shadow:
        inset 0 0 14px rgba(255, 255, 255, 0.20),
        0 8px 32px rgba(0, 210, 255, 0.60);
    border-color: rgba(255, 255, 255, 0.55) !important;
}

/* Text dalam card */
.card .card-body {
    text-align: center;
    color: #e9fdff !important;
}

/* Nama pasaran (uppercase) */
.card .card-body div[style*="text-transform:uppercase"] {
    color: #ffffff !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.65);
}

/* Tanggal / sub text line kedua */
.card .card-body .my-1:nth-child(2) {
    color: #c7f5ff !important;
    font-weight: 600;
    text-shadow: 0 0 4px rgba(0, 200, 255, 0.6);
}

/* Countdown */
.card .togel-countdown-timer {
    color: #d8faff !important;
    font-weight: 700;
    text-shadow: 0 0 6px rgba(0, 255, 255, 0.7);
    font-size: 0.85em !important;
}

/* ==============================
   RESULT DI GRID (h2) – BOX PUTIH
   ============================== */
.card .card-body h2,
.card .card-body h2 a {
    background: #ffffff !important;
    color: #000000 !important;
    display: block;
    font-weight: 900 !important;
    margin: 0;
    padding: 10px 0;
    border-radius: 8px;
    text-shadow: none !important;
    box-shadow:
        0 0 10px rgba(255,255,255,0.85),
        0 0 20px rgba(255,255,255,0.65);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
}

/* ==============================
   RESULT DI CAROUSEL (h1)
   ============================== */
#carousel-togel .card h1 a c
#carousel-togel .card h1 a:hover {
    color: #d2faff !important;
    text-shadow:
        0 0 20px rgba(255, 255, 255, 1),
        0 0 30px rgba(0, 255, 255, 1);
}

#carousel-togel .card-body div[style*="font-size:0.8em"][style*="font-weight:bold"] {
    color: rgb(255, 255, 255) !important; /* warna biru neon kamu */
    font-weight: 700 !important;
}


/* =================================
   FORM SEARCH & SORT – GLASS NEON
   ================================= */
.form-control.px-3,
.form-select.px-3 {
    background:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.18) 0%,
            rgba(255, 255, 255, 0.10) 35%,
            rgba(255, 255, 255, 0.06) 100%
        ),
        linear-gradient(
            135deg,
            rgba(0,195,255,0.60),
            rgba(0,120,190,0.60)
        );
    border: 1px solid rgba(255,255,255,0.35) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    color: #ffffff !important;
    font-weight: 600;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        inset 0 0 10px rgba(255,255,255,0.16),
        0 4px 18px rgba(0,165,255,0.35);
    text-shadow: 0 0 4px rgba(255,255,255,0.4);
}

.form-control.px-3::placeholder {
    color: #daf2ff !important;
}

/* focus */
.form-control.px-3:focus,
.form-select.px-3:focus {
    border-color: rgba(170,240,255,0.9) !important;
    box-shadow:
        inset 0 0 14px rgba(255,255,255,0.25),
        0 0 22px rgba(0,255,255,0.75);
}

/* tombol search */
.input-group.rounded-5 .btn.btn-primary {
    background: linear-gradient(135deg, #00bfff, #0088cc);
    border: none;
    font-weight: 700;
    padding: 0 20px;
    box-shadow:
        0 0 10px rgba(0,230,255,0.65),
        0 0 16px rgba(0,200,255,0.50);
}

.input-group.rounded-5 .btn.btn-primary:hover {
    background: linear-gradient(135deg, #2fd8ff, #00a2e6);
    box-shadow:
        0 0 16px rgba(0,255,255,0.9),
        0 0 26px rgba(0,255,255,0.65);
}


/* FIX LEBAR & TINGGI CARD PASARAN */
.card.border.rounded-3.border-primary {
    width: 200px !important;       /* sesuai yang kamu pakai */
    height: 200px;                 /* biar semua card tinggi sama */
    display: flex;
    flex-direction: column;
    justify-content: center;       /* konten tetap center */
}

/* FIX BAGIAN CARD-BODY */
.card.border.rounded-3.border-primary .card-body {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

/* FIX WRAPPER DALAMNYA */
.card.border.rounded-3.border-primary .card-body > .text-center {
    width: 100%;
}

/* JARAK ANTAR CARD (kalau perlu) */
.card.border.rounded-3.border-primary {
    margin: 8px;
}


/* =================================
   LINK "Lihat lebih banyak"
   ================================= */
.my-3 a.text-decoration-none {
    color: #a6ecff !important;
    font-weight: 600;
    text-shadow: 0 0 8px rgba(0, 200, 255, 0.65);
    transition: 0.25s ease;
}

.my-3 a.text-decoration-none:hover {
    color: #ffffff !important;
    text-shadow: 0 0 12px rgba(0, 255, 255, 1);
}

.my-3 i.fa-angles-right {
    margin-left: 3px;
}


/* =================================
   RESPONSIVE MERGED
   ================================= */
@media (max-width: 768px) {
    nav.navbar .nav-link {
        font-size: 11px;
    }
    nav.navbar .nav-link i,
    nav.navbar svg {
        width: 20px;
        height: 20px;
    }

    .py-3.rounded-3.glassmorphism {
        padding: 12px 0;
    }
    .py-3.rounded-3.glassmorphism img {
        height: 26px !important;
    }

    #carousel-togel .card {
        width: 180px !important;
    }
    #carousel-togel .card h1 {
        font-size: 2.4em !important;
    }
}

@media (max-width: 480px) {
    .py-3.rounded-3.glassmorphism {
        padding: 10px 0;
    }
    .py-3.rounded-3.glassmorphism img {
        height: 24px !important;
    }

    #carousel-togel .card {
        width: 160px !important;
    }
    #carousel-togel .card h1 {
        font-size: 2.2em !important;
    }
        .card.border.rounded-3.border-primary {
        width: 46% !important;     /* 2 card sejajar */
        height: 200px;             /* sedikit lebih pendek */
        margin: 6px 2%;
    }

    .card.border.rounded-3.border-primary .card-body {
        padding: 10px;
    }

    /* Ukuran teks disesuaikan */
    .card.border.rounded-3.border-primary h1 {
        font-size: 2.2em !important;
    }

    .card.border.rounded-3.border-primary div[style*="font-size:0.8em"] {
        font-size: 0.75em !important;
    }

    .card.border.rounded-3.border-primary div[style*="font-size:0.7em"] {
        font-size: 0.65em !important;
    }

    .card.border.rounded-3.border-primary .togel-countdown-timer {
        font-size: 0.75em !important;
    }
}
@media (max-width: 380px) {

    .card.border.rounded-3.border-primary {
        width: 48% !important;
        height: 190px;
    }

    .card.border.rounded-3.border-primary h1 {
        font-size: 2em !important;
    }
}
/* ============================================
   FIX KHUSUS CARD GRID (yang ada border-primary)
   ============================================ */
.card.border.border-primary,
.card.border.border-primary * {
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Ambil alih latar belakangnya full */
.card.border.border-primary {
    background:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.30) 0%,
            rgba(255, 255, 255, 0.15) 40%,
            rgba(255, 255, 255, 0.10) 100%
        ),
        linear-gradient(
            135deg,
            rgba(0, 195, 255, 0.85),
            rgba(0, 145, 220, 0.85)
        ) !important;

    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.38) !important;

    box-shadow:
        inset 0 0 12px rgba(255, 255, 255, 0.18),
        0 6px 28px rgba(0, 150, 255, 0.45) !important;

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

    overflow: hidden;
    position: relative;
}

/* Polygon glow */
.card.border.border-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at 26% 18%,
        rgba(255, 255, 255, 0.25),
        transparent 65%
    );
    opacity: 0.28;
    pointer-events: none;
    z-index: 1;
}

/* Angka RESULT (h2) – tetap putih solid) */
.card.border.border-primary h2,
.card.border.border-primary h2 a {
    color: #ffffff !important;
    text-shadow:
        0 0 10px rgba(255, 255, 255, 0.9),
        0 0 18px rgba(0, 200, 255, 0.9);
    font-weight: 900 !important;
    letter-spacing: 1px;
    transition: 0.25s ease;
}

/* Nama pasaran & teks */
.card.border.border-primary .text-secondary {
    color: #e9fdff !important;
    text-shadow: 0 0 6px rgba(0, 200, 255, 0.7);
    z-index: 3;
    position: relative;
}

/* Countdown */
.card.border.border-primary .togel-countdown-timer {
    color: #d8faff !important;
    font-weight: 700;
    text-shadow: 0 0 6px rgba(0, 255, 255, 0.7);
    z-index: 3;
    position: relative;
}

.p-0.m-0.bg-white.text-black,
.p-0.m-0.bg-white.text-black a {
    background-color: transparent !important;
}

.btn-block-custom {   
    color: #000000;
    border-color: #ffe400;
    background: linear-gradient(270deg, rgba(201, 138, 0, 1) 0%, rgba(255, 248, 59, 1) 21%, rgba(255, 245, 59, 1) 33%, rgba(211, 158, 7, 1) 44%, rgba(215, 166, 9, 1) 60%, rgb(255 245 59) 73%, rgb(255 248 59) 85%, rgba(201, 138, 0, 1) 100%);
    background-size: 400% 400%;
    animation: gradient 5s ease infinite;
    box-shadow: inset 0 0 5px 3px #ffe100, inset 0 2px 0 0 #000000, inset 0 0 0 2px #ffe100, 3px 3px 3px 1px rgba(0, 0, 0, 1); 
}

.btn-half {
    color: #000000;
    border-color: rgba(29, 201, 255, 0.25);

    background: linear-gradient(
        270deg,
        #0A6FB8 0%,     /* biru tua elegan */
        #1DC9FF 20%,    /* neon bright */
        #00BFFF 35%,    /* biru langit neon */
        #1DC9FF 55%,    /* bright lagi */
        #0A6FB8 75%,    /* kembali deep blue */
        #1DC9FF 100%    /* neon smooth */
    );

    background-size: 400% 400%;
    animation: gradient 5s ease infinite;

    box-shadow:
        inset 0 0 5px 3px rgba(29, 201, 255, 0.65),
        inset 0 2px 0 0 #ffffff,
        inset 0 0 0 2px #0A6FB8,
        3px 3px 3px 1px rgba(0, 0, 0, 1);
}


.btn-primary {   
    color: #000000;
    border-color: rgba(29, 201, 255, 0.25);
    background: linear-gradient(270deg, #0A6FB8 0%, /* biru tua elegan */ #1DC9FF 20%, /* neon bright */ #00BFFF 35%, /* biru langit neon */ #1DC9FF 55%, /* bright lagi */ #0A6FB8 75%, /* kembali deep blue */ #1DC9FF 100% /* neon smooth */);
    background-size: 400% 400%;
    animation: gradient 5s 
ease infinite;
    box-shadow: inset 0 0 5px 3px rgba(29, 201, 255, 0.65), inset 0 2px 0 0 #ffffff, inset 0 0 0 2px #0A6FB8, 3px 3px 3px 1px rgba(0, 0, 0, 1);
}

.btn-danger {
    color: #000000;
    border-color: rgba(29, 201, 255, 0.25);

    background: linear-gradient(
        270deg,
        #0A6FB8 0%,     /* biru tua elegan */
        #1DC9FF 20%,    /* neon bright */
        #00BFFF 35%,    /* biru langit neon */
        #1DC9FF 55%,    /* bright lagi */
        #0A6FB8 75%,    /* kembali deep blue */
        #1DC9FF 100%    /* neon smooth */
    );

    background-size: 400% 400%;
    animation: gradient 5s ease infinite;

    box-shadow:
        inset 0 0 5px 3px rgba(29, 201, 255, 0.65),
        inset 0 2px 0 0 #ffffff,
        inset 0 0 0 2px #0A6FB8,
        3px 3px 3px 1px rgba(0, 0, 0, 1);
}





.btn-secondary {   
    color: #000000;
    border-color: #ffe400;
    background: linear-gradient(270deg, rgba(201, 138, 0, 1) 0%, rgba(255, 248, 59, 1) 21%, rgba(255, 245, 59, 1) 33%, rgba(211, 158, 7, 1) 44%, rgba(215, 166, 9, 1) 60%, rgb(255 245 59) 73%, rgb(255 248 59) 85%, rgba(201, 138, 0, 1) 100%);
    background-size: 400% 400%;
    animation: gradient 5s ease infinite;
    box-shadow: inset 0 0 5px 3px #ffe100, inset 0 2px 0 0 #000000, inset 0 0 0 2px #ffe100, 3px 3px 3px 1px rgba(0, 0, 0, 1); 
}
@keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes borderPulse{
    0% { box-shadow: 0px 0px 0px 5px rgba(255, 255, 255, 0.4), 0px 0px 0px 0px rgb(255, 255, 255); }
    100% { box-shadow: 0px 0px 0px 3px rgba(255, 117, 117, 0), 0px 0px 0px 10px rgba(255, 0, 0, 0); }
}
 
#sidebarCollapse {
    background: linear-gradient(135deg,
        #E8FFFB 0%,     /* putih kebiruan - foam */
        #b6eeff 20%,    /* light aqua */
        #4ebdd9 50%,    /* aqua/sea water */
        #1CA7A4 75%,    /* deep sea teal */
        #5acff2 100%    /* bright ocean highlight */
    ) !important;

    border: 2px solid #a8dfff !important;
    border-radius: 12px;

    box-shadow:
        0 0 10px rgba(90, 192, 240, 0.6),
        0 0 20px rgba(70, 170, 210, 0.4),
        inset 0 0 12px rgba(255, 255, 255, 0.35);

    color: #003B3A !important; /* deep ocean text/icon */
    padding: 8px 14px;
}

#sidebarCollapse .bi-list {
    color: #00283b !important;  /* warna icon ocean dark */
    /* Mau icon putih juga bisa: color: #FFFFFF !important; */
}



/* ============================================
   FIX NAVBAR BAWAH (AGAR TIDAK IKUT TER-OVERRIDE)
   ============================================ */
.menubar.navbar.fixed-bottom.navbar-dark.bg-dark {
    position: fixed !important;
    bottom: 0 !important;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9999 !important;
}

.menubar.navbar.fixed-bottom.navbar-dark.bg-dark .nav-link,
.menubar.navbar.fixed-bottom.navbar-dark.bg-dark i,
.menubar.navbar.fixed-bottom.navbar-dark.bg-dark svg {
    color: #fff !important;
    text-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
}
/* Semua h3 Section Title */
h3.my-2,
.my-3 h3,
section h3,
div h3 {
    color: #a8f6ff !important;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-shadow:
        0 0 8px rgba(0, 220, 255, 0.9),
        0 0 14px rgba(0, 180, 255, 0.7);
    font-size: 1.45rem;
    margin: 0;
    transition: 0.25s ease;
}

h3:hover {
    color: #d2ffff !important;
    text-shadow:
        0 0 16px rgba(0, 255, 255, 1),
        0 0 22px rgba(0, 255, 255, 1);
    transform: translateY(-1px);
}

/* Semua link lihat lebih banyak */
a.text-decoration-none {
    color: #8beaff !important;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-shadow: 0 0 10px rgba(0, 200, 255, 0.8);
    transition: 0.25s ease;
    position: relative;
}

a.text-decoration-none i {
    margin-left: 5px;
    transition: 0.25s ease;
    text-shadow:
        0 0 8px rgba(0, 255, 255, 0.8),
        0 0 14px rgba(0, 150, 255, 0.7);
}

a.text-decoration-none:hover {
    color: #ffffff !important;
    text-shadow:
        0 0 16px rgba(255, 255, 255, 1),
        0 0 30px rgba(0, 255, 255, 1);
}

/* Icon animasi geser */
a.text-decoration-none:hover i {
    transform: translateX(4px);
    text-shadow:
        0 0 20px rgba(255, 255, 255, 1),
        0 0 28px rgba(0, 255, 255, 1);
}


.fa-whatsapp {
    color: #25D366; 
    filter: none;  
}

.fa-whatsapp:hover {
    color: #128C7E; 
}

.fa-telegram {
    color: #0088cc; 
    filter: none;  
}

.fa-telegram:hover {
    color: #0077b5; 
}

.fa-instagram {
    color: #833AB4; 
    filter: none;  
}

.fa-instagram:hover {
    color: #d72d4d; 
}


.fa-youtube{
    color: #FF0000; 
    filter: none;  
}

.fa-youtube:hover {
    color: #cc0000; 
}

.fa-facebook{
    color: #1877F2; 
    filter: none;  
}

.fa-facebook:hover {
    color: #145dbf; 
}

.fa-tiktok {
    color: #010101; 
    filter: none;  
}

.fa-tiktok:hover {
    color: #1c1c1c; 
}

.fa-twitter {
    color: #1DA1F2; 
    filter: none;  
}

.fa-twitter:hover {
    color: #0d8ddf; 
}

/* QR image */
/* Hapus putih & padding Bootstrap thumbnail */
#deposit-form #receiver-qrcode.img-thumbnail,
#deposit-form #receiver-qrcode.bg-white{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* QR tampil rapi + frame neon */
#deposit-form #receiver-qrcode{
  display: block;
  margin-inline: auto;
  max-width: 90%;
  border-radius: 14px;

  /* border neon (inner) + glow halus */
  box-shadow:
    inset 0 0 0 2px rgba(20, 255, 243, 0.55),     /* garis hijau di dalam */
    0 0 0 4px rgba(20, 255, 255, 0.18),           /* ring luar tipis */
    0 12px 24px rgba(0,0,0,.55);             /* drop shadow */
  filter: drop-shadow(0 0 12px rgba(20, 255, 235, 0.25)); /* glow lembut */
}



.menubar a div{
  font-size:.70rem !important;
  line-height:1;
}

.menubar a:hover,
.menubar a:focus{
  color:#f5ffba !important;
  text-shadow:0 0 8px rgba(220, 255, 20, 0.35);
  transform:translateY(-1px);
}

.menubar a:hover img,
.menubar a:focus img{
  filter:grayscale(0%) brightness(1.05)
         drop-shadow(0 0 8px rgba(212, 255, 20, 0.45));
  transform:translateY(-1px) scale(1.03);
}

.menubar a.active,
.menubar a[aria-current="page"]{
  color:#adff14 !important;
  text-shadow:0 0 10px rgba(165, 255, 20, 0.6);
}

.menubar a.active img,
.menubar a[aria-current="page"] img{
  filter:grayscale(0%) brightness(1.15)
         drop-shadow(0 0 10px rgba(192, 255, 20, 0.6));
}

/* === FIX: Lampu garis bawah jadi CENTER === */
.menubar a::after{
  content:"";
  position:absolute;
  left:28%;                 /* posisi tengah */
  transform:translateX(-50%) translateY(4px); /* center alignment */
  bottom:-6px;
  width:60%;                /* atur panjang garis biar proporsional */
  height:3px;
  border-radius:6px;
  background:linear-gradient(
     45deg,
     transparent,
     rgba(200, 255, 0, 0.8),
     transparent
  );
  opacity:0;
  transition:opacity .2s, transform .2s;
}

.menubar a:hover::after,
.menubar a.active::after,
.menubar a[aria-current="page"]::after{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

#content {
  position: relative !important;
  z-index: 1 !important;     /* kasih minimal 1 */
  isolation: isolate !important;
}

/* GIF BUBBLE KIRI */
#content::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 170px;
  height: 100vh;
  background: url("https://pixnlink.com/u/img/slf5AmLIdrSb.gif") center/cover no-repeat;
  opacity: 0.7;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: -1 !important;     /* TURUNKAN */
}

/* GIF BUBBLE KANAN */
#content::after {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  width: 170px;
  height: 100vh;
  background: url("https://pixnlink.com/u/img/slf5AmLIdrSb.gif") center/cover no-repeat;
  opacity: 0.7;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: -1 !important;     /* TURUNKAN */
}