.logo-wrap{
  position:relative; display:inline-block; line-height:0; overflow:visible;
}
.logo-base{
  height:44px;
  display:block;
}

/* SHINE DARI KIRI KE KANAN NONSTOP */
.logo-shine{
  position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    linear-gradient(115deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.9) 50%, rgba(255,255,255,0) 80%),
    radial-gradient(100% 60% at 20% 50%, rgba(255,154,0,.3), transparent 70%),
    radial-gradient(100% 60% at 80% 50%, rgba(0,128,255,.3), transparent 70%);
  background-size: 300% 100%, 100% 100%, 100% 100%;
  background-position: 300% 0, 0 0, 0 0; /* start dari kiri */
  mix-blend-mode: screen;
  animation: shineSweep 10s linear infinite;
  will-change: background-position;

  -webkit-mask: url("https://res.cloudinary.com/dfksbifh5/image/upload/v1761115202/logo_viralsatu_new_obkyb0.png") no-repeat center / 100% 100%;
          mask: url("https://res.cloudinary.com/dfksbifh5/image/upload/v1761115202/logo_viralsatu_new_obkyb0.png") no-repeat center / 100% 100%;
}

@keyframes shineSweep {
  0%   { background-position: 300% 0, 0 0, 0 0; }   /* mulai dari kiri */
  100% { background-position: -300% 0, 0 0, 0 0; }  /* geser ke kanan */
}

  .topbar {
    margin-bottom: 10px;
    margin-top: 5px;
    overflow: visible;
  }
  .topbar-auth {
    margin-top: -5px; /* hanya aktif kalau login */
  }
  
/* izinkan wrap khusus kotak info akun (topbarss kamu biasanya no-wrap) */
.topbar[aria-label="Info akun"] .topbarss {
  white-space: normal !important;
}

/* Sisakan ruang wajib untuk saldo kanan */
:root { --saldo-space: 160px; }           /* desktop/tablet */
@media (max-width:420px){ :root { --saldo-space: 140px; } } /* mobile 400px-an */

/* Struktur bar */
.ub-row{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:10px;width:100%;min-height:32px;
}
.ub-left{ flex:1; min-width:0; max-width:calc(100% - var(--saldo-space)); }
.ub-right{ flex:0 0 auto; }

/* Chip username + teks di dalamnya */
.tag-user{
  font-size:8px;               /* sesuai request */
  display:block; max-width:100%; box-sizing:border-box;
}
.tag-user .uname{
  display:block;
  white-space: normal !important;   /* boleh multi-baris */
  overflow-wrap: anywhere !important; /* ada spasi / gak ada spasi: tetap bisa patah */
  word-break: break-all !important;   /* paksa pecah di karakter kalau perlu */
  line-height:1.25;
}

/* sembunyikan tombol refresh bawaan widget saldo (biar gak dobel) */
.balance-slot button,
.balance-slot .fa-sync,
.balance-slot .fa-sync-alt,
.balance-slot .fa-redo { display: block !important; }


  
.from-\[\#001843\] {
    --tw-gradient-from: #790000;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

/* =====================================================
   VIRALSATU — GLOBAL STYLESHEET (FINAL)
   ===================================================== */

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 900;
    letter-spacing: .6px;
    text-transform: uppercase;
}
html,body{height:100%;}


/* ---- Global Variables ---- */
:root {
    --bg: #081735;
    --panel: #0c1e44;
    --panel-2: #0f2a5a;
    --text: #ffff;
    --muted: #9fb6dd;
    --primary: #3f8cff;
    --accent: #5be0ff;
    --ring: 1px solid rgba(255, 255, 255, 0.10);
    --radius: 18px;
    --radius-lg: 22px;
    --shadow: 0 10px 30px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .03);
}

/* ---- Layout Dasar ---- */
.containeres {
    width: min(1120px, 92vw);
    margin: 0 auto;
}

/* =====================================================
   KOMPONEN GLOBAL UNIK
   ===================================================== */

/* ===== Mobile Bottom Tabbar ===== */
.mobile-tabbar {
    position: fixed;
    inset: auto 0 0 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    padding: 8px clamp(8px, 4vw, 16px) calc(8px + env(safe-area-inset-bottom));
    background: rgba(0, 46, 102, .72);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
    border-top: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, .25);
    z-index: 1000;
}
@media (min-width: 768px) {
    .mobile-tabbar { display: none; }
}
.mobile-tabbar__item {
    color: #fff; text-decoration: none; display: flex; flex-direction: column; align-items: center;
    gap: 4px; padding: 6px 4px; min-width: 56px; font-size: 11px; line-height: 1;
    opacity: .85; transition: transform .18s ease, opacity .18s ease;
}
.mobile-tabbar__item i { font-size: 20px; }
.mobile-tabbar__item:active { transform: translateY(1px) scale(.98); }
.mobile-tabbar__item.is-active { opacity: 1; }
.mobile-tabbar__item.is-active i { color: #ffd84d; }
.mobile-tabbar__fab {
    position: relative; place-self: center; width: 50px; height: 50px; display: grid; place-items: center;
    color: #fff; text-decoration: none; background: linear-gradient(180deg, #0aa0ff, #005491);
    border-radius: 18px; border: 2px solid rgba(255, 255, 255, .85);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
    transform: translateY(-18px);
}
.mobile-tabbar__fab i { font-size: 22px; }
.mobile-tabbar__fab:active { transform: translateY(-16px) scale(.98); }
.mobile-tabbar__fab-label {
    position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%);
    font-size: 10px; color: #fff; opacity: .9; pointer-events: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.mobile-tabbar__item .badge {
    position: absolute; top: -2px; right: 14%; background: #ff4757; color: #fff;
    border-radius: 999px; padding: 2px 6px; font-size: 10px; line-height: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}

/* ===== Notifikasi Order Kiri Bawah ===== */
.notif-order {
    position: fixed; bottom: 60px; left: 0; background: #fff; color: #000;
    padding: 10px 15px; border-radius: 0 20px 20px 0; box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    font-size: 14px; z-index: 9999; width: 260px; text-align: left; word-wrap: break-word;
    display: flex; align-items: center; gap: 8px; opacity: 0; pointer-events: none;
    transition: transform 0.5s ease, opacity 0.5s ease; transform: translateX(-100%); overflow: hidden;
}
.notif-order img { width: 20px; height: 20px; }
@media (max-width: 480px) {
    .notif-order { width: 200px; font-size: 12px; }
}

/* =====================================================
   STYLE UTAMA (HEADER, KONTEN, FOOTER, DLL)
   ===================================================== */

/* ===== Header ===== */
header.vs-head {
    position: sticky; top: 0; z-index: 50;
    backdrop-filter: saturate(130%) blur(10px);
    background: rgba(8, 23, 53, .78);
    border-bottom: var(--ring);
}
.nav {
    display: grid; grid-template-columns: auto 1fr auto;
    align-items: center; gap: 8px; padding: 10px 0;
}
.brand {
    display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
}
.brand img {
    height: 40px; width: auto; border-radius: 6px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35));
}
.viral {
    background: linear-gradient(to bottom, #fdb813, #e57a00); -webkit-background-clip: text; background-clip: text;
    color: transparent; font-style: italic; margin-left: -9px;
}
.satu {
    background: linear-gradient(to bottom, #00a9e0, #0033a0); -webkit-background-clip: text; background-clip: text;
    color: transparent; font-style: italic; margin-left: -11px;
}

/* ===== Menu Dropdown ===== */
.menu-wrap { position: relative; }
.hamb { display: inline-flex; cursor: pointer; padding: 8px; border-radius: 10px; }
.hamb:hover { background: rgba(255, 255, 255, .08); }
.menu-wrap input[type="checkbox"] { display: none; }
.menu-wrap input:checked+label+.menu-panel { display: block; }
.menu-panel {
    position: absolute; right: 0; top: calc(100% + 8px); display: none; width: 220px;
    padding: 8px; background: rgba(8, 23, 53, .98); border: var(--ring);
    border-radius: 12px; box-shadow: var(--shadow); z-index: 9999;
}
.menu-panel a {
    display: block; padding: 10px 12px; margin: 6px 0; text-decoration: none;
    color: var(--text); font-weight: 700; background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08); border-radius: 8px;
}
.menu-panel a:hover { background: rgba(255, 255, 255, .10); }
.menu-panel .account {
    display: block; padding: 10px 12px; margin-bottom: 8px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .04); border-radius: 10px;
}
/* Aturan .name ini lebih spesifik dan aman */
.menu-panel .account .name { font-weight: 800; letter-spacing: .2px; color: yellow; }
.menu-panel .saldo-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; }
.menu-panel .saldo-row .saldo { font-size: 13px; color: #ffff; white-space: nowrap; }
.hamb.avatar { padding: 4px; }
.hamb.avatar img {
    width: 38px; height: 38px; object-fit: cover; border-radius: 9999px;
    border: 2px solid #f9cf25; box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}

/* ===== Topbar (Marquee) ===== */
.topbar { overflow: visible; }
.topbarss {
    background: rgb(0 75 167 / 32%); border: 1px solid #ffffff47; border-radius: 12px;
    box-shadow: var(--shadow); overflow: hidden; position: relative;
    height: 40px; display: flex; align-items: center; padding: 0 12px;
}
.marq { display: block; width: 100%; line-height: 1; color: #facc15; padding: 0; }
.marq .track { display: inline-block; white-space: nowrap; padding-left: 100%; animation: vs-move 24s linear infinite;font-weight: 600; }
@keyframes vs-move { to { transform: translateX(-100%); } }

/* ===== Shell & Subhead ===== */
.shell {
    background: rgba(255, 255, 255, .04); border: 1px solid #ffffff47;
    border-radius: var(--radius-lg); padding: clamp(10px, 2vw, 16px); box-shadow: var(--shadow);
}
.subhead { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 10px; }
.subhead h2 { margin: 0; font-size: 16px; letter-spacing: .3px; color: #eaf2ff; }
.subhead small { color: var(--muted); }

/* ===== Banner Slider ===== */
.slider {
    position: relative; border-radius: var(--radius-lg); overflow: hidden;
    background: #061126; aspect-ratio: 575/197; height: auto;
}
@supports not (aspect-ratio:1/1) {
    .slider { height: 0; }
    .slider::before { content: ""; display: block; padding-top: calc(197/575 * 100%); }
    .slides { position: absolute; inset: 0; }
}
.slides { display: flex; width: 100%; height: 100%; animation: vs-slideX 18s linear infinite; }
.slide {
    flex: 1 0 100%; background-position: center center; background-size: contain; background-repeat: no-repeat;
}
.slide:nth-child(1) { background-image: url('https://viralsatu.b-cdn.net/banner-baru.jpg'); }
.slide:nth-child(2) { background-image: url('https://viralsatu.b-cdn.net/banner-baru.jpg'); }
.slide:nth-child(3) { background-image: url('https://viralsatu.b-cdn.net/banner-baru.jpg'); }
@keyframes vs-slideX {
    0% { transform: translateX(0) } 27% { transform: translateX(0) }
    33% { transform: translateX(-100%) } 60% { transform: translateX(-100%) }
    66% { transform: translateX(-200%) } 94% { transform: translateX(-200%) }
    100% { transform: translateX(0) }
}
.bullets { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 6px; }
.bullets i { width: 8px; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .55); box-shadow: 0 0 0 2px rgba(0, 0, 0, .25) inset; }

/* ===== Grid Layanan ===== */
.grid { display: grid; gap: 12px; }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.tile {
    aspect-ratio: 1/1; border-radius: 16px; background: #fff; border: var(--ring);
    box-shadow: var(--shadow); display: grid; place-items: center; position: relative; overflow: hidden;
}
.tile img.icon-img { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .45)); }
@media (min-width:640px) {
    .tile img.icon-img { width: 80px; height: 80px; }
    .tile { aspect-ratio: 2/1; }
}

/* ===== Metode Pembayaran ===== */
.pay { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
@media (max-width:820px) { .pay { grid-template-columns: repeat(4, 1fr); } }
@media (max-width:560px) { .pay { grid-template-columns: repeat(3, 1fr); } }
.pbox { height: 52px; border-radius: 12px; border: var(--ring); background: #fff; display: grid; place-items: center; box-shadow: var(--shadow); }
.pbox img { max-height: 100%; width: 50%; display: block; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35)); }

/* ===== Footer ===== */
.footwrap { margin-top: 20px; border: none; height: .1px; background: #cccccc6b; }
footer.vs-foot { font-size: 12px; padding: 26px 0; color: var(--muted);     background: radial-gradient(#001949, #000000ab);}
.foot { display: grid; grid-template-columns: 1fr; gap: 12px; text-align: center; }
.foot .links { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.foot .links a {
    color: var(--text); text-decoration: none; font-weight: 700;
    background: rgba(255, 255, 255, .06); border: var(--ring); padding: 6px 8px; border-radius: 10px; font-size: 12px;
}
.foot .links a:hover { background: rgba(255, 255, 255, .10); }




/* ===== ADMIN CLAIM (prefix: clma-) ===== */
.clma-tablewrap{overflow:auto;border:1px solid #e5e7eb;border-radius:12px;background:#fff}
.clma-table{width:100%;border-collapse:collapse;font-size:13px;color:#0f172a}
.clma-table th,.clma-table td{padding:10px;border:1px solid #e5e7eb;text-align:left;vertical-align:top}
.clma-table thead th{background:#f1f5f9;color:#334155;font-weight:700}
.clma-table tbody tr:nth-child(even){background:#f8fafc}

/* Badges */
.clma-badge{display:inline-block;font-size:11px;padding:3px 8px;border-radius:999px;font-weight:700;white-space:nowrap}
.clma-badge--green{background:#dcfce7;color:#166534}
.clma-badge--blue{background:#dbeafe;color:#1d4ed8}
.clma-badge--red{background:#fee2e2;color:#b91c1c}
.clma-badge--gray{background:#e5e7eb;color:#374151}

/* Select coloring (server-side, update terlihat setelah submit) */
.clma-select{border:1px solid #d1d5db;border-radius:8px;padding:6px 8px;min-width:160px;background:#fff}
.clma-select--green{border-color:#86efac;background:#f0fdf4}
.clma-select--blue{border-color:#bfdbfe;background:#eff6ff}
.clma-select--red{border-color:#fecaca;background:#fef2f2}

/* Refund note kecil */
.clma-note{font-size:11px;color:#166534;margin-top:4px}

/* Target panjang: bisa di-swipe kanan */
.clma-scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch}
.clma-nowrap{white-space:nowrap}

/* ========== Narrow columns ========== */
.clma-w-target { width: 200px; max-width: 200px; }
.clma-w-refund { width: 140px; max-width: 140px; }
.clma-w-ket    { width: 200px; max-width: 200px; }

/* Biar isi kolom ga maksa melebar */
.clma-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Target: wrap ke bawah, putus kata panjang (URL) rapi */
.clma-target-box{
  white-space: normal;        /* boleh patah ke baris berikutnya */
  overflow-wrap: anywhere;    /* paksa patah kalau kata kepanjangan */
  word-break: break-word;     /* jaga-jaga untuk string tanpa spasi */
  max-width: 100%;
}



/* ====== CLAIM (prefix: clm-) ====== */
.clm-wrap{max-width:1200px;margin:0 auto;padding:16px}

/* Card */
.clm-card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;box-shadow:0 6px 24px rgba(0,0,0,.06)}
.clm-card__body{padding:16px}

/* Text */
.clm-title{font-size:20px;font-weight:700;margin:0 0 12px;color:#0f172a}
.clm-label{font-weight:600;color:#0f172a;margin-bottom:6px;display:block}
.clm-help{font-size:12px;color:#64748b;margin-top:6px}

/* Form */
.clm-input{width:100%;padding:10px;border:1px solid #d1d5db;border-radius:8px;background:#fff;color:#0f172a}
.clm-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:none;border-radius:8px;cursor:pointer;font-weight:700}
.clm-btn--primary{background:#0b63c7;color:#fff}
.clm-btn--primary:hover{background:#0a57ad}

/* Mobile cards (default) */
.clm-cards{display:grid;gap:12px}
.clm-kv{display:grid;grid-template-columns:120px 1fr;gap:8px;font-size:13px}
.clm-k{color:#64748b}
.clm-v{color:#0f172a}

/* Table */
.clm-tablewrap{display:none;overflow:auto}
.clm-table{width:100%;border-collapse:collapse;font-size:13px;color:#0f172a;background:#fff}
.clm-table th,.clm-table td{padding:10px;border:1px solid #e5e7eb;text-align:left}
.clm-table thead th{background:#f1f5f9;color:#334155;font-weight:700}
.clm-table tbody tr:nth-child(even){background:#f8fafc}

/* Badges */
.clm-badge{display:inline-block;font-size:11px;padding:3px 8px;border-radius:999px;font-weight:700}
.clm-badge--green{background:#dcfce7;color:#166534}
.clm-badge--blue{background:#dbeafe;color:#1d4ed8}
.clm-badge--red{background:#fee2e2;color:#b91c1c}
.clm-badge--gray{background:#e5e7eb;color:#374151}

/* Alerts (opsional) */
.clm-alert{border-radius:12px}
.clm-alert--err{border:1px solid #fecaca;background:#fef2f2;color:#991b1b}
.clm-alert--ok{border:1px solid #bbf7d0;background:#f0fdf4;color:#166534}

/* Switch to table on desktop (>=768px) */
@media (min-width:768px){
  .clm-cards{display:none}
  .clm-tablewrap{display:block}
}
.vs-marquee {
    background-color: #001435;
    padding: 10px 15px;
    overflow: hidden;
  }

  .vs-marquee-text {
    color: #facc15; /* Tailwind yellow-400 setara */
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    border: none;
    outline: none;
  }

  .vs-marquee-text i {
    margin-right: 6px;
  }

    .vs-marquee-inner {
      display: inline-block;
      padding-left: 100%;
      animation: vs-marquee-scroll 12s linear infinite;
    }

    .vs-balance-container {
      background: linear-gradient(to bottom, #3b5b91, #001231);
      padding: 10px 15px;
      display: block;
    }

    .vs-balance-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .vs-username {
      font-weight: bold;
      color: #fff;
      font-size: 14px;
    }

    @media (min-width: 768px) {
      .vs-balance-container {
        display: none;
      }
    }


ul.space-y-2 > li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    background-color: #f3f4f6;
    border-radius: 0.5rem;
}


.vs-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;          /* dari 90% jadi 80% */
  max-width: 320px;    /* dari 400px jadi 320px */
  max-height: 80vh;    /* batasi tinggi popup */
  background: #ffffff;
  border: 4px solid #ffffff;
  border-radius: 16px;      /* kecilin sedikit rounding */
  box-shadow: 0 0 16px rgba(0,0,0,0.5);
  z-index: 9999;
  overflow: auto;      /* scroll kalau konten kelewat tinggi */
  animation: vs-popupIn 0.3s ease-out;
}

    @keyframes vs-popupIn {
      from { transform: scale(0.5) translate(-50%, -50%); opacity: 0; }
      to   { transform: scale(1) translate(-50%, -50%); opacity: 1; }
    }

    .vs-popup-header img {
      width: 100%;
      height: auto;
      display: block;
    }

    .vs-popup-content {
      padding: 20px;
      text-align: center;
    }

    .vs-popup-content h2 {
      font-size: 22px;
      margin-bottom: 8px;
      font-weight: 600;
    }

    .vs-popup-content h3 {
      font-size: 16px;
      color: #cc0000;
      margin-bottom: 10px;
    }

    .vs-popup-content p {
      font-size: 14px;
      margin-bottom: 20px;
      color: #333;
    }

    .vs-action-btn {
      background: gold;
      border: 2px solid #cc9900;
      border-radius: 10px;
      padding: 12px 30px;
      font-size: 18px;
      font-weight: bold;
      color: #000;
      cursor: pointer;
      transition: 0.2s;
      text-decoration: none;
    }

    .vs-action-btn:hover {
      background: orange;
    }

    .vs-close-btn {
      position: absolute;
      top: 8px;
      right: 8px;
      background: red;
      color: white;
      border: none;
      border-radius: 50%;
      font-size: 18px;
      cursor: pointer;
      width: 30px;
      height: 30px;
    }

html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* ✅ Tambahan anti geser kanan */
  }

    .rocket-wrapper {
      position: absolute;
      width: 100px;
      height: 100px;
      animation: moveRocket 40s ease-in-out infinite;
      z-index: 2;
    }

    @keyframes moveRocket {
      0%   { top: 90%; left: -10%; }
      10%  { top: 10%; left: 80%; }
      20%  { top: 10%; left: 80%; }  /* delay muter */
      30%  { top: 90%; left: 80%; }
      40%  { top: 90%; left: 80%; }
      50%  { top: 10%; left: 10%; }
      60%  { top: 10%; left: 10%; }
      70%  { top: 80%; left: 20%; }
      80%  { top: 80%; left: 20%; }
      90%  { top: 80%; left: 5%; }
      100% { top: 90%; left: -10%; }
    }

    .rocket {
      width: 50px;
      animation: rotateRocket 40s ease-in-out infinite;
    }

    @keyframes rotateRocket {
      0%   { transform: rotate(22deg); }
      10%  { transform: rotate(22deg); }
      20%  { transform: rotate(135deg); }
      30%  { transform: rotate(135deg); }
      40%  { transform: rotate(-90deg); }
      50%  { transform: rotate(-90deg); }
      60%  { transform: rotate(120deg); }
      70%  { transform: rotate(120deg); }
      80%  { transform: rotate(200deg); }
      90%  { transform: rotate(200deg); }
      100% { transform: rotate(22deg); }
    }


/* APK Banner Container */
#apkBanner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #3a3a3a;
  color: white;
  padding: 5px 10px;
  z-index: 9999;
  display: none; /* Hidden by default, JS/CSS controls visibility */
  box-shadow: 0 4px 12px rgb(0 61 124);
  box-sizing: border-box;
  font-family: 'Segoe UI', sans-serif;
}

/* Inner content of the banner (flex container) */
.banner-inner2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  max-width: 1200px; /* Max width for content on large screens */
  margin: 0 auto; /* Center the content */
}

/* Left section: icon and app name/subtext */
.banner-left2 {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-grow: 1; /* Allows this section to take available space */
  flex-shrink: 1; /* Allows shrinking if needed */
  min-width: 0; /* Important for text truncation in flex items */
}

.banner-left2 img {
  width: 48px;
  height: 48px;
  flex-shrink: 0; /* Prevents image from shrinking */
}

.banner-text2 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow: hidden; /* Hide overflow text */
}

.banner-title2 {
  font-weight: bold;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.banner-subtext2 {
  font-size: 13px;
  color: #ccc;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Download Button */
.btn-unduh {
  background: linear-gradient(to bottom, #ff4444, #aa0000);
  font-weight: bold;
  border: none;
  border-radius: 18px;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 14px;
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
  flex-shrink: 0; /* Prevent button from shrinking */
  transition: background-color 0.3s ease;
  color: white;
}

.btn-unduh:hover {
  filter: brightness(1.1);
}

/* Close Button (X) */
.close-btn {
  color: var(--banner-text-color);
    background: red;
    border-radius: 10%;
    font-size: 17px;
  font-weight: bold;
  border: none;
  cursor: pointer;
  padding: 5px;
  line-height: 1;
  margin-left: 10px; /* Space between button and 'X' */
  flex-shrink: 0; /* Prevent the close button from shrinking */
}

.close-btn:hover {
  color: var(--banner-subtext-color);
}

/* Media Query for Desktop: Hide banner on larger screens */
@media (min-width: 769px) { /* Adjust breakpoint as needed */
  #apkBanner {
    display: none !important; /* Force hide on desktop */
  }
}

.notif-order {
    position: fixed;
    bottom: 60px;
    left: 0;
    background: #fff;
    color: #000;
    padding: 10px 15px;
    border-radius: 0 20px 20px 0;
    box-shadow: 0 8px 15px rgba(0,0,0,0.2);
    font-size: 14px;
    z-index: 9999;
    width: 260px;
    text-align: left;
    word-wrap: break-word;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.5s ease, opacity 0.5s ease;
    transform: translateX(-100%);
    overflow: hidden;
}
.notif-order img {
    width: 20px;
    height: 20px;
}
@media (max-width: 480px) {
    .notif-order {
        width: 200px;
        font-size: 12px;
    }
}
.border-gray-300 {
    border: 1px solid #003c7aa3;
}
.versi-tag {
    display: inline-block;
    background: #e0f0ff;
    color: #06498e;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid #b3d7f5;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    font-family: 'Segoe UI', Arial, sans-serif;
}
.text-forgot-yellow-400 {
        color: yellow;
    font-style: italic;
    font-size: 14px;
    margin-top: 10px;
}
.note {
    font-size: 14px;
    color: #28a745;
    margin-top: 10px;
}
.accordionsa {
    background-color: #cae4ff;
    cursor: pointer;
    padding: 12px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    border-radius: 4px;
}
.warning {
    font-size: 13px;
    color: #555;
    margin-top: 8px;
}
.separator {
    background: #fff;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 6px;
    border: 1px solid #ddd;
}
.va-box {
    background: #f9f9f9;
    padding: 15px;
    padding-right: 60px; /* Tambahin ruang kanan buat tombol copy */
    border: 1px dashed #ccc;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #e74c3c;
    letter-spacing: 2px;
    position: relative;
    word-break: break-all; /* Jaga-jaga biar no VA gak keluar kotak */
}

.copy-btn {
    position: absolute;
    right: 10px;
    top: 10px;
    background: #007bff;
    color: #fff;
    border: none;
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
    border-radius: 4px;
}

.bgviralsatu {
    background: #00295e;
}
.text-white-800 {
    color: white;
}
.text-blue-200 {
    color: #eda619;
}
.modiflogoutcyan {
    color: #000000;
    background: #f4b51c;
    border-radius: 8px;
    padding: 8px 20px;
    margin-top: 10px;
}
.bottom-nav .nav-item.pesan-highlight {
    position: relative;
    font-weight: bold;
    border: 2px solid #fff;
    border-radius: 30%;
    width: 58px;
    height: 58px;
    justify-content: center;
    align-items: center;
    transform: translateY(-15px);
    background-color: #005491;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    margin-bottom: -24px;
}
.bottom-nav .nav-item.pesan-highlight i {
    font-size: 1.4em;
}
.bottom-nav .nav-item.pesan-highlight span {
    font-size: 0.75em;
}
.bottom-menu .pesan-action {
    background-color: #005491;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 2px solid #fff;
    justify-content: center;
    align-items: center;
    transform: translateY(-20px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
}
.bottom-menu .pesan-action i {
    font-size: 1.4em;
}
.bottom-menu .pesan-action span {
    font-size: 0.75em;
}


.bg-\[\#009595\] {
    background: #009595;
}
@media (min-width: 768px) {.space-starlink {
     height: 600px;
}}

.pt-15 {
    padding-top: calc(var(--spacing) * 15);
}

.vs404-body {
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', sans-serif;
            background-color: #001843;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
        }

        .vs404-box {
    background: white;
    padding: 40px 30px;
    border-radius: 16px;
    max-width: 480px;
    width: 100%;
    margin-left: 20px;
    margin-right: 20px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

        .vs404-illustration {
            max-width: 100%;
            height: auto;
            margin-bottom: 30px;
        }

        .vs404-title {
            font-size: 1.75rem;
            font-weight: 700;
            color: #1e40af;
            margin-bottom: 10px;
        }

        .vs404-message {
            font-size: 1rem;
            color: #475569;
            margin-bottom: 24px;
        }

        .vs404-buttons {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .vs404-buttons a {
            text-decoration: none;
            padding: 12px 24px;
            border-radius: 8px;
            font-weight: 600;
            font-size: 0.95rem;
            transition: 0.2s all ease-in-out;
            display: inline-block;
        }

        .vs404-primary {
    background-color: #1e40af;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.95rem;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease-in-out;
}

.vs404-primary:hover {
    background-color: #1c3aa9;
}
.red {
    color: red;
}

        .vs404-secondary {
            background-color: white;
            color: #1e40af;
            border: 2px solid #1e40af;
        }

        .vs404-secondary:hover {
            background-color: #f0f4ff;
        }

        .vs404-footer {
            font-size: 0.8rem;
            margin-top: 30px;
            color: #94a3b8;
        }
  .amount-text {
    font-size: 30px;
    margin-top: 10px;
  }
  .ft-22 {
      font-size: 22px;
  }

  @media (min-width: 768px) {
    .amount-text {
      font-size: 35px;
    }
  }
  .qris-warning {
  background-color: #fef3c7; /* Tailwind orange-100 */
    color: #b45309; /* Tailwind orange-800 */
    border: 1px solid #fcd34d; /* Tailwind orange-300 */
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 30px;
    margin-bottom: 20px;
    font-size: 15px;
    font-weight: 600; /* Semi-bold */
    text-align: center;
  }
.marginleft15 {
    margin-left: 15px;
}

/* Tombol Accordion Video Tutorial */
.video-tutorial-btn {
  background-color: #670202; /* Warna Background Merah */
  color: #ffffff;           /* Teks Putih */
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 8px;
  transition: background-color 0.3s ease;
  cursor: pointer;
  border: none;
  width: 100%;
}

.video-tutorial-btn:hover {
  background-color: #a32020;
  opacity: 0.9;
}

.video-tutorial-btn svg {
  transition: transform 0.3s ease;
}

.video-tutorial-btn[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* Video Container */
.video-tutorial-container {
  margin-top: 10px;
  overflow: hidden;
  border-radius: 15px;
  background: #ffffff;
  padding: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.video-tutorial-container iframe {
  width: 100%;
  height: 315px;
  border: none;
  border-radius: 15px;
}

/* Transition untuk Accordion */
.video-tutorial-accordion {
  width: 100%;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.video-tutorial-accordion.open {
  max-height: 500px; /* Sesuaikan dengan tinggi maksimal konten video */
}

/* Untuk Responsive */
@media (min-width: 768px) {
  .video-tutorial-container iframe {
    height: 400px;
  }
}



.custom-header-z {
    z-index: 9999 !important;
}
.minhg-605 {
    min-height: 605px;
}
.drogod {
    margin-top: -15px;
}
.bg-\[\#fb6514\] {
background: #fb6514;
}
.pdgil-20 {
    padding-inline: 20px;
}
.pdgil-10 {
    padding-inline: 10px;
}
.grid.grid-cols-3.gap-3.sm\:grid-cols-3.md\:grid-cols-4.lg\:grid-cols-4 {
    margin-top: 10px;
    padding-top: 10px;
}
.py-6 {
    padding-top: 0px;
    padding-bottom: 10px;
}
.pr-2 {
    padding-right: 10rem;
}
.max-h-6 {
    max-height: 40px;
}
@media (min-width: 1024px) {
    .max-h-6 {
        max-height: 60px;
    }
}
.shadow {
    box-shadow: 0 0 10px rgb(0 0 0);
    border-radius: 8px;
}

.sm\:flex-row {
    flex-direction: column-reverse !important; /* Default untuk Semua Ukuran */
}

/* Media Query untuk Layar di Atas 767px */
@media (min-width: 767px) {
    .sm\:flex-row {
        flex-direction: row !important;
    }
}

.shadow-2xl {
    box-shadow: 0 0 10px rgb(0 0 0);
    border-radius: 8px;
}
.grid-stack-item {
    margin-top: 5px;
}
.max-w-\(--breakpoint-2xl\) {
    max-width: var(--breakpoint-2xl);
    margin: auto;
}


@media (max-width: 768px) {
    .max-h-\[45px\] {
    max-height: 45px;
}
}
 /* additional-menu-buttom */

        .bottom-menu {
            position: fixed; /* Fixed to avoid overlapping */
            bottom: 0; /* Sticky pada bagian bawah */
            left: 0;
            right: 0;
            background-color: #005491; /* Background Menu */
            border-top: 2px solid #00468A;
            display: flex;
            justify-content: space-around;
            padding: 10px 0;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            width: 100%; /* Full Width */
            max-width: 100%;
            gap: 15px; /* Jarak antar menu */
            visibility: visible;
        }
        .bottom-menu a {
            text-decoration: none;
            color: #FFFFFF;
            text-align: center;
            font-size: 12px;
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px; /* Jarak ikon dan teks */
            transition: color 0.3s;
        }
        .bottom-menu a:hover {
            color: #00A3FF;
        }
        .bottom-menu a i {
            font-size: 20px;
        }

        /* Hanya untuk Mobile dan Tablet */
        @media (min-width: 768px) {
            .bottom-menu { display: none; visibility: hidden; height: 0; }
        }

        /* Mobile Fix Alignment */
        @media (max-width: 767px) {
            .bottom-menu {
                visibility: visible;
            }
            .foot {
    margin-bottom: 60px;
}
            footer {
    padding-bottom: 60px;
}
        }