:root{
  --brand:#0d6efd;
  --brand2:#3b82f6;
  /* gunakan untuk menyamakan warna elemen dengan header (bisa dioverride per tema) */
  --header-grad: linear-gradient(135deg, var(--brand), var(--brand2));
  /* offset konten dari header fixed (dipakai juga oleh sticky search Home) */
  --header-offset: calc(86px + env(safe-area-inset-top));
  /* tinggi area search bar Home (agar konten tidak ketutup) */
  --home-search-offset: 74px;

  /* ===== Bottom nav spacing =====
     Pastikan konten (terutama tombol aksi di bagian bawah) tidak ketutup
     oleh footer menu fixed di mobile.
  */
  --bottom-nav-height: 70px; /* tinggi visual bottom-nav (tanpa safe-area) */
  --bottom-nav-gap: 40px;    /* napas ekstra agar tombol tidak mepet */
}

/* ==============================
   MINI UTILITIES (FALLBACK)
   Dipakai kalau Bootstrap/Bootstrap-lite gagal ter-load.
   Aman walau Bootstrap ada (nilai sama).
   ============================== */
html, body{height:100%;}
/*
  NOTE:
  - File ini di-load SETELAH Bootstrap CDN, jadi aturan `.container` di sini
    akan menimpa Bootstrap.
  - Sebelumnya max-width hanya sampai 720px, akibatnya tampilan desktop terlihat
    "kecil" (seperti tablet) termasuk di halaman Akun.
  - Maka breakpoint container disamakan dengan Bootstrap 5 agar konsisten.
*/
.container{width:100%;margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px;}
@media (min-width:576px){.container{max-width:540px;}}
@media (min-width:768px){.container{max-width:720px;}}
@media (min-width:992px){.container{max-width:960px;}}
@media (min-width:1200px){.container{max-width:1140px;}}
@media (min-width:1400px){.container{max-width:1320px;}}
.d-flex{display:flex;}
.align-items-center{align-items:center;}
.justify-content-between{justify-content:space-between;}
.justify-content-center{justify-content:center;}
.gap-1{gap:.25rem;}
.gap-2{gap:.5rem;}
.min-w-0{min-width:0;}
.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.input-group{display:flex;align-items:stretch;width:100%;}
.input-group-text{display:flex;align-items:center;padding:.45rem .75rem;border:1px solid #e5e7eb;background:#fff;}

/*
  IMPORTANT:
  `.form-control` dipakai di banyak halaman (login/register, checkout, dll).
  Versi sebelumnya dibuat untuk input-group tapi akhirnya bikin input biasa mengecil
  (karena width: 1%).
*/
.form-control{display:block;width:100%;min-width:0;padding:.55rem .75rem;border:1px solid #e5e7eb;outline:0;background:#fff;}
.input-group .form-control{flex:1 1 auto;width:1%;border-left:0;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;padding:.45rem .85rem;border-radius:.5rem;border:1px solid transparent;background:transparent;cursor:pointer;user-select:none;text-decoration:none;font-weight:600;line-height:1;}
.btn-light{background:#fff;border-color:#e5e7eb;color:#0f172a;}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff;}
.rounded-pill{border-radius:999px;}
.border{border:1px solid #e5e7eb;}
.py-2{padding-top:.5rem;padding-bottom:.5rem;}
.py-4{padding-top:1.5rem;padding-bottom:1.5rem;}
.mt-2{margin-top:.5rem;}
.pb-5{padding-bottom:3rem;}
.px-3{padding-left:1rem;padding-right:1rem;}
.w-100{width:100%;}

/* ===== FIXED/STICKY UTIL (fallback kalau Bootstrap tidak ke-load) ===== */
.fixed-top{position:fixed;top:0;right:0;left:0;z-index:1030;}
.sticky-top{position:sticky;top:0;z-index:1020;}


.bottom-nav{
  position:fixed;
  left:0; right:0; bottom:0;
  height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background:#fff;
  display:flex;
  justify-content:space-around;
  align-items:center;
  border-top:1px solid #eee;
  z-index:9999;
  box-sizing: border-box;
}


/* ===========================================================
   FIX: Modal harus di atas bottom-nav (Android Chrome)
   Bottom-nav memakai z-index:9999, sedangkan Bootstrap modal default ~1055.
   =========================================================== */
.modal{ z-index: 10050 !important; }
.modal-backdrop{ z-index: 10040 !important; }
.bottom-nav .nav-item{
  position:relative;
  text-decoration:none;
  color:#7a7a7a;
  width:20%;
  text-align:center;
  font-size:12px;
  padding-top:6px;
}

.bottom-nav .nav-item i{
  display:block;
  font-size:20px;
  margin-bottom:4px;
}

/* Badge angka untuk menu Keranjang */
.bottom-nav .nav-icon{
  position: relative;
  display: block;
  width: fit-content;
  margin: 0 auto;
}
.bottom-nav .nav-badge{
  position: absolute;
  top: -8px;
  right: -12px;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
}

@media (min-width: 992px){
  /* Desktop navbar: icon & teks sejajar */
  .bottom-nav .nav-icon{
    display: inline-flex;
    width: auto;
    margin: 0;
    align-items: center;
    justify-content: center;
  }
}

.bottom-nav .nav-item.active{
  color:var(--brand);
}

.bottom-nav .nav-item.active i{
  background: linear-gradient(135deg,var(--brand),var(--brand2));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.badge-dot{
  position:absolute;
  top:4px;
  right:22%;
  background:var(--brand);
  color:#fff;
  border-radius:999px;
  padding:2px 6px;
  font-size:11px;
}

.btn-brand{
  background: linear-gradient(135deg,var(--brand),var(--brand2));
  /* pastikan teks tetap putih (termasuk saat link sudah diklik/visited) */
  color:#fff !important;
  border:none;
}
/* cover semua state link + semua child (ikon/fontawesome) */
.btn-brand:link,
.btn-brand:visited,
.btn-brand:hover,
.btn-brand:active,
.btn-brand:focus{
  color:#fff !important;
}
.btn-brand *{ color:#fff !important; }

.btn-brand:hover{ filter:brightness(.95); }

/* Tombol yang warnanya mengikuti header */
.btn-header{
  background: var(--header-grad);
  color:#fff !important;
  border:none;
  text-decoration:none !important;
}
.btn-header:link,
.btn-header:visited,
.btn-header:hover,
.btn-header:active,
.btn-header:focus{
  color:#fff !important;
  text-decoration:none !important;
}
.btn-header *{ color:#fff !important; }
.btn-header:hover{ filter:brightness(.95); }

/* Fallback utility (kalau Bootstrap tidak ter-load) */
.text-decoration-none{ text-decoration:none !important; }

.rounded-4{ border-radius: 1rem !important; }

/* ==============================
   AUTH (LOGIN / REGISTER)
   ============================== */
.auth-wrap{
  display:flex;
  justify-content:center;
  padding: 18px 0 30px;
}
.auth-card{
  width:100%;
  max-width: 480px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 14px 40px rgba(2, 6, 23, .10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.auth-title{margin:0 0 6px;font-weight:800;font-size:22px;color:#0f172a;}
.auth-subtitle{margin:0 0 16px;color:rgba(15,23,42,.72);font-size:13px;}
.auth-alert{margin: 0 0 14px;border-radius: 14px;}
.auth-field{margin-bottom: 14px;}
.auth-label{display:block;margin:0 0 6px;font-size:13px;font-weight:700;color:#0f172a;}
.input-icon{position:relative;}
.input-icon i{position:absolute;left:12px;top:50%;transform:translateY(-50%);opacity:.65;}
.input-icon .form-control{height:46px;border-radius: 14px;padding-left: 38px;border-color:#dbe7ff;background: rgba(255,255,255,.92);}
.input-icon .form-control:focus{border-color:#2f7bff;box-shadow: 0 0 0 4px rgba(47,123,255,.16);}
.toggle-pass{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  border:0;
  background:transparent;
  padding: 6px;
  cursor:pointer;
  opacity:.7;
}
.toggle-pass:hover{opacity:1;}
.auth-submit{height:46px;border-radius: 14px;font-weight:800;}
.auth-footer{
  margin-top: 14px;
  text-align:center;
  font-size:13px;
  /* diminta: teks "Belum punya akun?" dibuat hitam & jelas */
  color:#000;
}
.auth-footer a{font-weight:800;}

.product-card{
  border:0;
  overflow:hidden;
  border-radius:1rem;
  background:#fff;
}
.product-thumb{
  width:100%;
  aspect-ratio: 1 / 1;
  object-fit:cover;
  background:#f3f3f3;
}
.stars{
  color:#ffb300;
  font-size:12px;
  line-height:1;
}

/* ==============================
   MENU / DAFTAR PAKET - CATEGORY STRIP
   - Tampil 3 kategori terlihat (tidak mepet)
   - Kategori lain bisa digeser (scroll horizontal)
   ============================== */
.category-strip{
  display:flex;
  flex-wrap: nowrap;
  gap: .5rem;
  overflow-x:auto;
  padding-bottom: .5rem;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}

/* Opsional: scrollbar tipis */
.category-strip::-webkit-scrollbar{ height:6px; }
.category-strip::-webkit-scrollbar-thumb{ background: rgba(15,23,42,.18); border-radius: 999px; }

.category-strip .category-chip{
  /* 3 item terlihat dalam lebar layar (2 gap @0.5rem) */
  flex: 0 0 calc((100% - 1rem) / 3);
  display:flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  scroll-snap-align:start;
}

/* Desktop: biarkan kategori auto (tidak dipaksa 3) */
@media (min-width: 992px){
  .category-strip .category-chip{
    flex: 0 0 auto;
  }
}
.price{
  font-weight:800;
  letter-spacing:.2px;
}
.badge-discount{
  font-size:11px;
  background: rgba(147,197,253,.26);
  color: rgba(124,58,237,.95);
  border: 1px solid rgba(124,58,237,.22);
  border-radius:999px;
  padding:2px 8px;
  display:inline-block;
}
.product-meta{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.divider-soft{ height:1px; background:#eee; margin:12px 0; }

.carousel-indicators [data-bs-target]{
  width:8px;height:8px;border-radius:999px;
}

.stars{color:#f6b100;}
/* Header brand (user) */
.brand-logo{
  width:44px;height:44px;border-radius:999px;
  overflow:hidden; flex:0 0 auto;
  box-shadow: 0 6px 18px rgba(16,24,40,.10);
}
.brand-logo img{ width:100%; height:100%; object-fit:cover; }
.brand-title{ font-weight:800; font-size:16px; line-height:1.1; }
.brand-sub{ font-size:12px; color:#6b7280; line-height:1.1; }
@media (max-width: 360px){
  .brand-title{ font-size:15px; }
  .brand-sub{ display:none; }
}

/* === HEADER USER (BLUE) + WAVES === */
.user-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;

  background-color: #0d6efd;
  background-image:
    url("../img/header-wave.svg"),
    linear-gradient(135deg, #0d6efd, #3b82f6);
  background-repeat: no-repeat, no-repeat;
  background-position: bottom center, center;
  background-size: 130% 64px, cover;
  color:#fff;
  border-bottom:none;
  /* iOS safe area (notch) */
  padding-top: env(safe-area-inset-top);
  padding-bottom: 12px;
}
.user-header .brand-title,
.user-header .brand-sub{
  color:#fff;
}
.user-header .input-group-text{
  background:#fff;
}
.user-header input.form-control{
  border:none;
}
.user-header .btn-brand{
  background: linear-gradient(135deg, rgba(124,58,237,.96), rgba(147,197,253,.92) 55%, rgba(79,70,229,.92));
  border:none;
  color:#fff;
}
.user-header .btn{
  background: rgba(255,255,255,.2);
  border:none;
  color:#fff;
}

/*
  Karena header user diposisikan `fixed-top`, konten perlu diberi
  jarak di atas supaya tidak tertutup header.
*/
.user-content{
  padding-top: var(--header-offset);
}
.user-content{
  padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + var(--bottom-nav-gap)) !important;
}

/* === HOME: SEARCH BAR NEMPEL DI BAWAH HEADER (HANYA HOME) === */
.page-home .home-search-bar{
  position: fixed;
  top: var(--header-offset);
  left: 0;
  right: 0;
  z-index: 1025;
  padding: 10px 0 12px;
  background: rgba(248, 251, 255, .92);
  border-bottom: 1px solid rgba(15, 23, 42, .06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}



/* Home: susun search di atas saldo */
.page-home .home-search-form{
  margin-bottom: 10px;
}
/* === HOME: RINGKASAN PEMBELIAN (DI BAWAH SALDO) === */
.page-home .home-subs-grid{
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.page-home .home-subs-card{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 18px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, .10);
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, box-shadow .15s ease;
}
.page-home .home-subs-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(15, 23, 42, .14);
}
.page-home .home-subs-card:active{
  transform: translateY(0);
}
.page-home .hsc-ico{
  width: 36px;
  height: 36px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(13,110,253,.12);
  color: var(--brand);
  flex: 0 0 auto;
}
.page-home .hsc-label{
  display: block;
  font-size: 12px;
  color: rgba(15, 23, 42, .65);
  line-height: 1.1;

  /* Pastikan teks "Domain/Hosting" tidak pecah jadi 2 baris */
  white-space: nowrap;
  word-break: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-home .hsc-value{
  display: block;
  font-weight: 800;
  font-size: 18px;
  color: #0f172a;
  line-height: 1.1;
}
@media (max-width: 576px){
  .page-home .home-subs-grid{ gap: 8px; }
  .page-home .home-subs-card{ padding: 9px 10px; border-radius: 16px; }
  .page-home .hsc-ico{ width: 34px; height: 34px; border-radius: 13px; }
  .page-home .hsc-value{ font-size: 16px; }
}

/* Home stats: pada layar sangat kecil, ubah layout jadi vertikal agar label tidak pecah */
@media (max-width: 420px){
  .page-home .home-subs-card{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 10px 8px;
  }
  .page-home .min-w-0{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .page-home .hsc-label{ font-size: 11px; }
}


/* Home: search menyatu dengan header, jadi cukup pakai offset header */
.page-home .user-content{
  padding-top: var(--header-offset);
}

/* === HOME: BANNER (lebih kecil & rapih di desktop) === */
#bannerCarousel .banner-img{
  display:block;
  width:100%;
  /* default (mobile) */
  height: 220px;
  object-fit: cover;
}
@media (min-width: 768px){
  #bannerCarousel .banner-img{ height: 280px; }
}
@media (min-width: 992px){
  /* desktop: jangan ikut membesar sesuai lebar layar */
  #bannerCarousel .banner-img{ height: 340px; }
}
@media (min-width: 1400px){
  #bannerCarousel .banner-img{ height: 380px; }
}

#bannerCarousel .carousel-inner{
  border-radius: 1.25rem;
  overflow: hidden;
}

@media (max-width: 360px){
  :root{ --home-search-offset: 78px; }
}

/* === HIDE SCROLLBAR (HOME & MENU) === */
html, body {
  scrollbar-width: none; /* Firefox */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none; /* Chrome, Safari */
}

/* === FORCE HIDE SCROLLBAR (ANDROID / WEBVIEW / DESKTOP) === */
body, html {
  overflow-y: auto;
  -ms-overflow-style: none;  /* IE 10+ */
  scrollbar-width: none;     /* Firefox */
}

body::-webkit-scrollbar,
html::-webkit-scrollbar,
*::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent !important;
}

/* prevent white scrollbar gutter */
body {
  overscroll-behavior: none;
}

/* === OJI UI POLISH === */
.product-card{ display:flex; flex-direction:column; height:100%; box-shadow:0 10px 30px rgba(13,110,253,.12); }
.product-card .card-body{ display:flex; flex-direction:column; gap:6px; flex:1; }
.product-card .btn{ margin-top:auto; border-radius:999px; }
.product-thumb{ aspect-ratio: 4 / 3; height:auto; }
.product-card .card-title{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:40px; }
.bottom-nav a.active, .bottom-nav a:hover{ color: var(--brand); }

/* footer greeting */
.bottom-nav .nav-item.greeting{flex:1.4;justify-content:center;}
.bottom-nav .nav-item.greeting .greet-text{font-size:12px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}

/* ==============================
   COOL BACKGROUND SHAPES (GLOBAL)
   ============================== */
/*
  Cara pakai: tambahkan class `has-bg-shapes` di <body>.
  Sudah diaktifkan di header public & desktop.
*/
body.has-bg-shapes{
  background-color: #f8fbff;
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  isolation: isolate; /* supaya dekor di belakang konten */
}

/* Dekor: blobs + waves (tetap tampil walau halaman panjang) */
body.has-bg-shapes::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background-image:
    radial-gradient(circle at 10% 12%, rgba(13,110,253,.22) 0, rgba(13,110,253,0) 55%),
    radial-gradient(circle at 92% 8%, rgba(59,130,246,.18) 0, rgba(59,130,246,0) 55%),
    radial-gradient(circle at 92% 92%, rgba(255,106,0,.16) 0, rgba(255,106,0,0) 55%),
    radial-gradient(circle at 18% 85%, rgba(16,185,129,.12) 0, rgba(16,185,129,0) 60%);
  background-repeat: no-repeat;
  background-position: 10% 12%, 92% 8%, 92% 92%, 18% 85%;
}

body.has-bg-shapes::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;

  /* Curves (biru+putih) + waves (atas & bawah) */
  background-image:
    url("../img/bg-curves-blue-white.svg"),
    url("../img/bg-waves-top.svg"),
    url("../img/bg-waves.svg");
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: top right, top center, bottom center;
  background-size: 920px auto, 200% 220px, 220% 240px;
  opacity: .95;
  transform: translateZ(0);
}

@media (max-width: 576px){
  body.has-bg-shapes::after{
    background-size: 540px auto, 210% 200px, 190% 260px;
  }
}

/* Header: tambah "shape" transparan biar lebih premium */
.user-header{
  overflow: hidden;
  isolation: isolate; /* pastikan pseudo-element aman */
}
.user-header::before,
.user-header::after{
  content:"";
  position:absolute;
  border-radius: 999px;
  pointer-events:none;
  z-index: 0;
}
.user-header::before{
  width: 220px;
  height: 220px;
  top: -120px;
  right: -110px;
  background: rgba(255,255,255,.18);
}
.user-header::after{
  width: 320px;
  height: 320px;
  bottom: -190px;
  left: -180px;
  background: rgba(255,255,255,.10);
}
.user-header .container,
.user-header .container-fluid{
  position: relative;
  z-index: 1;
}

/* Pastikan layout header tetap flex walau Bootstrap CDN tidak kebaca */
.user-header-row{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.user-header-action{ margin-left: auto; }


/* ===== Small public UI fixes (works with/without Bootstrap) ===== */
.user-header a{ text-decoration: none; }
.user-header .btn.btn-light{
  background: rgba(255,255,255,.92) !important;
  color: #0f172a !important;
  border-color: rgba(255,255,255,.55) !important;
}
.user-header .btn.btn-light:hover{ filter: brightness(.98); }

/* sedikit tambah spacer karena header punya wave
   (tingginya dihitung via CSS var --header-offset, di-update JS) */
.user-content{
  padding-top: var(--header-offset);
}

/* Carousel controls biar keliatan saat Bootstrap tidak kebaca */
.carousel-control-prev, .carousel-control-next{
  background: rgba(15,23,42,.12);
  border-radius: 999px;
}

/* ==========================================================
   DESKTOP: Footer menu berubah jadi NAVBAR (hanya desktop)
   - Mobile tetap bottom nav
   - Desktop: nav pindah ke bawah header (fixed)
   ========================================================== */
:root{
  --desktop-nav-height: 56px;
}

/* default (mobile/tablet): kasih ruang biar konten tidak ketutup bottom-nav */
.user-content{
  padding-bottom: calc(
    var(--bottom-nav-height)
    + env(safe-area-inset-bottom)
    + var(--bottom-nav-gap)
  ) !important;
}

/* Desktop navbar */
@media (min-width: 992px){
  /* bottom-nav pindah ke atas (jadi navbar) */
  .bottom-nav{
    position: fixed;
    top: var(--header-offset);
    bottom: auto;
    left: 0;
    right: 0;
    height: var(--desktop-nav-height);
    padding: 0 12px;
    border-top: none;
    border-bottom: 1px solid rgba(15, 23, 42, .08);
    justify-content: center;
    gap: 18px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1040; /* pastikan muncul */
  }

  .bottom-nav .nav-item{
    width: auto;
    min-width: unset;
    padding: 10px 14px;
    border-radius: 999px;
    display: inline-flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
  }

  .bottom-nav .nav-item i{
    font-size: 16px;
    margin: 0;
  }

  .bottom-nav .nav-item span{
    margin: 0;
    font-size: 14px;
  }

  /* aktif: kasih pill background halus */
  .bottom-nav .nav-item.active{
    background: rgba(13,110,253,.10);
    color: var(--brand);
  }

  /* Desktop: konten jangan ketutup navbar (header + nav) */
  .user-content{
    padding-top: calc(var(--header-offset) + var(--desktop-nav-height) + 14px);
    padding-bottom: 24px; /* ga perlu space bottom nav lagi */
  }

  /* Home: search bar ikut turun di bawah navbar */
  .page-home .home-search-bar{
    top: calc(var(--header-offset) + var(--desktop-nav-height));
  }
  
  /* Desktop: rapatkan jarak search ke navbar (legacy home-search-bar) */
  .page-home .home-search-bar{
    padding: 4px 0 6px;
  }
}


/* Desktop: header content full-width so the action button (Masuk / Halo, Admin) benar-benar ke pojok kanan */
.user-header > .container,
.user-header > .container-fluid{
  max-width: 100% !important;
  padding-left: 16px;
  padding-right: 16px;
}
@media (min-width: 992px){
  .user-header > .container,
  .user-header > .container-fluid{
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* ==============================
   HOME: PROMO COUNTDOWN BANNER (FIXED)
   ============================== */
.page-home .promo-wrap{
  position: relative;
}

.page-home .promo-card{
  position: relative !important;
  overflow: hidden;
  border-radius: 22px;
  padding: 18px 16px;
  color: #fff;
  border: 1px solid rgba(124,58,237,.18);
  background: linear-gradient(135deg, rgba(124,58,237,.96), rgba(147,197,253,.92) 52%, rgba(79,70,229,.92)) !important;
  box-shadow:
    0 18px 45px rgba(2, 6, 23, .18),
    0 6px 18px rgba(13,110,253,.18);
}

.page-home .promo-card::before,
.page-home .promo-card::after{
  content:"";
  position:absolute;
  width: 320px;
  height: 320px;
  border-radius: 999px;
  filter: blur(36px);
  opacity: .35;
  pointer-events:none;
}

.page-home .promo-card::before{
  right: -140px;
  top: -120px;
  background: radial-gradient(circle at 30% 30%, #ffffff, rgba(255,255,255,0) 60%);
}

.page-home .promo-card::after{
  left: -160px;
  bottom: -160px;
  background: radial-gradient(circle at 30% 30%, rgba(147,197,253,.95), rgba(147,197,253,0) 60%);
}

.page-home .promo-close{
  position:absolute !important;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  display:flex !important;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(15, 23, 42, .12);
  color:#fff;
  cursor:pointer;
  z-index: 2;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  appearance: none;
  -webkit-appearance: none;
  outline: none;
}
.page-home .promo-close:hover{ background: rgba(15, 23, 42, .20); }

.page-home .promo-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .2px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
  z-index: 1;
}

.page-home .promo-body{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 12px;
}

.page-home .promo-title{
  font-size: 18px;
  font-weight: 900;
  line-height: 1.15;
}

.page-home .promo-desc{
  margin-top: 6px;
  font-size: 13px;
  color: rgba(255,255,255,.90);
  max-width: 52ch;
}

.page-home .promo-actions{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

/* scoped bootstrap tweaks */
.page-home .promo-card .btn-outline-light{
  border-color: rgba(255,255,255,.55) !important;
  color: #fff !important;
}
.page-home .promo-card .btn-outline-light:hover{
  background: rgba(255,255,255,.12) !important;
}

.page-home .promo-right{
  display:flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

/* NOTE di atas countdown biar rapi di HP */
.page-home .promo-note{
  font-size: 12px;
  opacity: .95;
  order: -1;
}

.page-home .promo-countdown{
  /* 1 baris (jangan turun jadi 2x2) */
  display: flex !important;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: stretch;
  justify-content: flex-start;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding-bottom: 2px; /* ruang buat scrollbar di beberapa device */
  scrollbar-width: none; /* Firefox: sembunyikan scrollbar */
}

.page-home .promo-countdown::-webkit-scrollbar{ height: 0; }

.page-home .cd-item{
  flex: 0 0 auto;
  min-width: 70px;
  padding: 10px 10px;
  border-radius: 16px;
  text-align:center;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 12px 24px rgba(2,6,23,.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  scroll-snap-align: start;
}

.page-home .cd-num{
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.page-home .cd-label{
  font-size: 11px;
  margin-top: 4px;
  opacity: .92;
}

.page-home .promo-ended .promo-card{
  opacity: .92;
}

@keyframes promoPulse{
  0%, 100% { transform: translateZ(0) scale(1); }
  50% { transform: translateZ(0) scale(1.03); }
}

.page-home .promo-urgent .cd-item{
  animation: promoPulse 1.3s ease-in-out infinite;
}

@media (max-width: 480px){
  .page-home .promo-countdown{ gap: 8px; }
  .page-home .cd-item{ min-width: 64px; padding: 9px 8px; border-radius: 14px; }
  .page-home .cd-num{ font-size: 16px; }
  .page-home .cd-label{ font-size: 10px; }
}

@media (min-width: 768px){
  .page-home .promo-card{ padding: 20px 20px; }
  .page-home .promo-body{ flex-direction: row; align-items: center; justify-content: space-between; }
  .page-home .promo-right{ align-items: flex-end; }
  .page-home .promo-note{ order: 1; }
  .page-home .promo-countdown{ justify-content: flex-end; }
}

@media (max-width: 360px){
  .page-home .promo-countdown{ gap: 8px; }
  .page-home .cd-item{ padding: 9px 8px; }
}


/* ==========================================================
   

/* ==========================================
   TRUST / TESTIMONI (Home - bawah banner)
   NOTE:
   - Background dibuat TRANSPARENT supaya menyatu dengan background home
     (curves/waves) dan tidak berubah jadi putih/abu pada beberapa theme.
   ========================================== */
.trust-wrap{ position:relative; background: transparent; }
/* pastikan tidak ketimpa util bg-white/bootstrap di dalam section */
.trust-wrap .container{ background: transparent !important; }
.theme-gaming .trust-title{ color: var(--text); }
.trust-head{ text-align:center; margin-bottom:14px; }
.trust-title{
  margin:0 0 6px;
  font-weight:900;
  letter-spacing:.2px;
  font-size: clamp(22px, 4.6vw, 36px);
}
.trust-sub{
  margin:0 auto;
  max-width: 780px;
  color: var(--muted, rgba(51,65,85,.78));
  line-height:1.55;
}
.trust-cards{
  display:grid;
  gap:14px;
  grid-template-columns: repeat(3, minmax(0,1fr));
  margin-top: 14px;
}
.trust-card{
  position:relative;
  overflow:hidden;
  border-radius: 18px;
  padding: 16px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 16px 42px rgba(2,6,23,.12);
  transform: translateZ(0);
}
.trust-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(120deg,
    transparent 0%,
    rgba(255,255,255,.14) 46%,
    transparent 68%);
  transform: translateX(-120%);
  animation: ojiLightSweep 6.2s linear infinite;
  opacity:.55;
  pointer-events:none;
}
.trust-card-top{
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom: 10px;
}
.trust-avatar{
  width:42px;
  height:42px;
  border-radius:999px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  background: radial-gradient(circle at 30% 28%,
    rgba(139,92,246,.72) 0%,
    rgba(139,92,246,.18) 55%,
    rgba(0,0,0,.18) 100%);
  border: 1px solid rgba(124,58,237,.18);
  box-shadow: 0 10px 24px rgba(139,92,246,.18);
}
.trust-avatar i{
  color:#fff;
  font-size: 16px;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.38));
}
.trust-name{ font-weight: 900; font-size: 15px; line-height:1.1; }
.trust-role{ font-size: 12px; color: var(--muted, rgba(51,65,85,.78)); margin-top: 2px; }
.trust-text{ margin:0; line-height:1.55; color: rgba(15,23,42,.82); }

.trust-cta{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top: 14px;
}

/* Ensure CTA buttons text is always readable */
.trust-cta .btn{
  font-weight:700;
  letter-spacing:.2px;
}
.trust-cta .btn-brand,
.trust-cta .btn-brand *{
  color:#fff !important;
}
.trust-cta .btn-brand{
  box-shadow: 0 12px 26px rgba(37,99,235,.22);
}
.trust-cta .btn-outline-light,
.trust-cta .btn-outline-light *{
  color:#0f172a !important;
}
.trust-cta .btn-outline-light{
  background:#fff !important;
  border-color: rgba(99,102,241,.35) !important;
}
.trust-cta .btn-outline-light:hover{
  background:#f8fafc !important;
}


@media (max-width: 992px){
  .trust-cards{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 576px){
  .trust-head{ text-align:left; }
  .trust-cards{
    display:flex;
    overflow:auto;
    padding-bottom: 10px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .trust-card{ min-width: 86%; scroll-snap-align: start; }
}

GAMING THEME (BLACK/RED) + LIGHT EFFECT
   - Aktif jika <body> punya class `theme-gaming`
   ========================================================== */

/* override brand colors (dipakai di seluruh komponen) */
:root{
  /* OZI WEB THEME: PURPLE • WHITE • PALE BLUE */
  --brand:#7c3aed;      /* purple */
  --brand2:#93c5fd;     /* pale blue */
  --bg0:#ffffff;        /* white base */
  --bg1:#eff6ff;        /* pale blue tint */
  --panel: rgba(255,255,255,.82);
  --panel2: rgba(255,255,255,.72);

  /* teks utama (gelap) */
  --text:#0f172a;
  --muted:rgba(51,65,85,.78);

  --border-dark: rgba(15,23,42,.12);
  --glow: rgba(124,58,237,.24);
  --glow-strong: rgba(147,197,253,.45);
}

@keyframes ojiLightSweep{
  0%{ transform: translateX(-55%) skewX(-18deg); opacity: 0; }
  16%{ opacity: .55; }
  45%{ transform: translateX(185%) skewX(-18deg); opacity: 0; }
  100%{ transform: translateX(185%) skewX(-18deg); opacity: 0; }
}

@keyframes ojiNeonPulse{
  0%, 100%{ filter: drop-shadow(0 0 0 rgba(139,92,246,0)); }
  50%{ filter: drop-shadow(0 0 14px rgba(139,92,246,.20)); }
}

@keyframes ojiBgDrift{
  0%, 100%{ transform: translate3d(0,0,0); }
  50%{ transform: translate3d(0,-14px,0); }
}
/* base */
.theme-gaming{
  background: radial-gradient(circle at 18% 10%, rgba(139,92,246,.14) 0, rgba(139,92,246,0) 48%),
              radial-gradient(circle at 90% 88%, rgba(124,58,237,.08) 0, rgba(139,92,246,0) 52%),
              linear-gradient(180deg, var(--bg1), var(--bg0));
  color: var(--text);
}
.theme-gaming .text-muted{ color: var(--muted) !important; }

/* background shapes (override versi biru) */
.theme-gaming.has-bg-shapes{ background-color: var(--bg0) !important; }
.theme-gaming.has-bg-shapes::before{
  background-image:
    radial-gradient(circle at 14% 14%, rgba(139,92,246,.22) 0, rgba(139,92,246,0) 55%),
    radial-gradient(circle at 92% 10%, rgba(139,92,246,.14) 0, rgba(139,92,246,0) 58%),
    radial-gradient(circle at 88% 92%, rgba(124,58,237,.08) 0, rgba(139,92,246,0) 60%),
    radial-gradient(circle at 18% 86%, rgba(255,255,255,.06) 0, rgba(255,255,255,0) 60%);
}
.theme-gaming.has-bg-shapes::after{
  /* Curves ungu + ilustrasi vektor (orang main komputer) + grid halus + vignette */
  background-image:
    url("../img/bg-curves-purple-computer.svg"),
    radial-gradient(1200px 520px at 50% 0%, rgba(255,255,255,.10), rgba(255,255,255,0) 60%),
    radial-gradient(1200px 620px at 50% 100%, rgba(147,197,253,.16), rgba(147,197,253,0) 62%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.030) 0, rgba(255,255,255,.030) 1px, transparent 1px, transparent 96px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.026) 0, rgba(255,255,255,.026) 1px, transparent 1px, transparent 96px);
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat;
  background-position: center top, top center, bottom center, center, center;
  background-size: cover, 120% 520px, 120% 620px, auto, auto;
  opacity: .94;
  filter: saturate(1.06);
  animation: ojiBgDrift 18s ease-in-out infinite;
  will-change: transform;
}

@media (max-width: 576px){
  .theme-gaming.has-bg-shapes::after{
  /* Curves ungu + ilustrasi vektor (orang main komputer) + grid halus + vignette */
  background-image:
    url("../img/bg-curves-purple-computer.svg"),
    radial-gradient(1200px 520px at 50% 0%, rgba(255,255,255,.10), rgba(255,255,255,0) 60%),
    radial-gradient(1200px 620px at 50% 100%, rgba(147,197,253,.16), rgba(147,197,253,0) 62%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.030) 0, rgba(255,255,255,.030) 1px, transparent 1px, transparent 96px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.026) 0, rgba(255,255,255,.026) 1px, transparent 1px, transparent 96px);
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat;
  background-position: center top, top center, bottom center, center, center;
  background-size: cover, 120% 520px, 120% 620px, auto, auto;
  opacity: .94;
  filter: saturate(1.06);
  animation: ojiBgDrift 18s ease-in-out infinite;
  will-change: transform;
  }
}

/* header gaming */
.theme-gaming{
  /* samakan tombol (btn-header) dengan warna header gaming */
  --header-grad: linear-gradient(135deg, #07071a 0%, #2a0b5a 52%, #0b2450 100%);
}

.theme-gaming .user-header{
  background-image:
    radial-gradient(circle at 18% 18%, rgba(139,92,246,.34), rgba(139,92,246,0) 58%),
    radial-gradient(circle at 92% 10%, rgba(147,197,253,.22), rgba(147,197,253,0) 60%),
    linear-gradient(135deg, #07071a 0%, #2a0b5a 52%, #0b2450 100%) !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* glow blob */
.theme-gaming .user-header::before{
  width: 260px;
  height: 260px;
  top: -150px;
  right: -140px;
  background: rgba(139,92,246,.22);
  box-shadow: 0 0 60px rgba(139,92,246,.16);
}

/* light sweep */
.theme-gaming .user-header::after{
  width: 180px;
  height: 160%;
  top: -30%;
  left: -35%;
  border-radius: 22px;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.28) 50%, transparent 100%);
  opacity: 0;
  filter: none;
  animation: ojiLightSweep 3.4s ease-in-out infinite;
}

.theme-gaming .brand-logo{
  box-shadow: 0 10px 26px rgba(0,0,0,.45), 0 0 0 1px rgba(139,92,246,.18);
}

.theme-gaming .user-header .btn.btn-light{
  background: rgba(0,0,0,.28) !important;
  color: #fff !important;
  border-color: rgba(139,92,246,.35) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.35), 0 0 0 1px rgba(124,58,237,.08);
}
.theme-gaming .user-header .btn.btn-light:hover{
  box-shadow: 0 10px 26px rgba(0,0,0,.35), 0 0 18px rgba(139,92,246,.22);
}

/* search bar home jadi gelap */
.theme-gaming.page-home .home-search-bar{
  background: rgba(10,10,14,.78);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.theme-gaming .input-group-text,
.theme-gaming .form-control{
  background: rgba(10,10,14,.55);
  border-color: rgba(255,255,255,.10);
  color: var(--text);
}
.theme-gaming .form-control::placeholder{ color: rgba(229,231,235,.58); }
.theme-gaming .form-control:focus{
  border-color: rgba(139,92,246,.45);
  box-shadow: 0 0 0 4px rgba(139,92,246,.14);
}

/* cards/panels */
.theme-gaming .card,
.theme-gaming .product-card,
.theme-gaming .auth-card{
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text);
  box-shadow: 0 16px 44px rgba(0,0,0,.45);
}

/* buttons */
.theme-gaming .btn-primary,
.theme-gaming .btn-brand{
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  border-color: rgba(139,92,246,.55);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}
.theme-gaming .btn-primary:hover,
.theme-gaming .btn-brand:hover{
  filter: brightness(1.04);
  box-shadow: 0 10px 26px rgba(0,0,0,.35), 0 0 18px rgba(139,92,246,.22);
}

/* bootstrap utility override yang sering kepakai di halaman */
.theme-gaming .bg-white{ background-color: rgba(14,14,20,.92) !important; }
.theme-gaming .bg-light{ background-color: rgba(10,10,14,.92) !important; }
.theme-gaming .border{ border-color: rgba(255,255,255,.10) !important; }
.theme-gaming .divider-soft{ background: rgba(255,255,255,.08); }
.theme-gaming .text-dark{ color: var(--text) !important; }

/* auth pages (light glass theme): pastikan teks gelap agar terbaca */
.theme-gaming .auth-title,
.theme-gaming .auth-label{ color: rgba(15,23,42,.95) !important; }
.theme-gaming .auth-subtitle{ color: rgba(51,65,85,.78) !important; }
.theme-gaming .auth-footer{ color: #000 !important; }
.theme-gaming .input-icon .form-control{
  background: rgba(10,10,14,.55);
  border-color: rgba(255,255,255,.10);
}

/* bottom nav */
.theme-gaming .bottom-nav{
  background: rgba(8,8,11,.86);
  border-top: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.theme-gaming .bottom-nav .nav-item{ color: rgba(229,231,235,.70); }
.theme-gaming .bottom-nav .nav-item.active{ color: #fff; }
.theme-gaming .bottom-nav .nav-item.active i{
  background: linear-gradient(135deg, #fff, var(--brand));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  animation: ojiNeonPulse 4.6s ease-in-out infinite;
}

/* promo banner: hitam-merah + light sweep */
.theme-gaming.page-home .promo-card{
  border: 1px solid rgba(139,92,246,.30) !important;
  background:
    url('../img/bg-curves-purple.svg') right top / cover no-repeat,
    radial-gradient(circle at 18% 8%, rgba(139,92,246,.34), rgba(139,92,246,0) 58%),
    radial-gradient(circle at 92% 88%, rgba(139,92,246,.18), rgba(139,92,246,0) 62%),
    linear-gradient(135deg, rgba(10,10,22,.98), rgba(35,12,70,.92) 55%, rgba(10,16,42,.96)) !important;
  background-blend-mode: soft-light, normal, normal, normal;
  box-shadow:
    0 20px 50px rgba(0,0,0,.55),
    0 0 0 1px rgba(139,92,246,.12),
    0 0 26px rgba(139,92,246,.18);
}

.theme-gaming.page-home .promo-card::before{
  width: 360px;
  height: 360px;
  right: -160px;
  top: -170px;
  opacity: .55;
  background: radial-gradient(circle at 30% 30%, rgba(139,92,246,.75), rgba(139,92,246,0) 60%);
}

.theme-gaming.page-home .promo-card::after{
  width: 180px;
  height: 160%;
  left: -35%;
  top: -30%;
  border-radius: 22px;
  filter: none;
  opacity: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.30) 50%, transparent 100%);
  transform: skewX(-18deg);
  animation: ojiLightSweep 3.0s ease-in-out infinite;
}

.theme-gaming.page-home .promo-badge{
  background: rgba(0,0,0,.22);
  border-color: rgba(139,92,246,.25);
}

.theme-gaming.page-home .promo-close{
  background: rgba(0,0,0,.28);
  border-color: rgba(139,92,246,.25);
}
.theme-gaming.page-home .promo-close:hover{
  background: rgba(139,92,246,.16);
}

.theme-gaming.page-home .cd-item{
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(139,92,246,.18);
  box-shadow: 0 14px 28px rgba(0,0,0,.35);
}
.theme-gaming.page-home .promo-urgent .cd-item{
  border-color: rgba(139,92,246,.42);
  box-shadow: 0 14px 28px rgba(0,0,0,.35), 0 0 18px rgba(139,92,246,.22);
}





/* ==========================================================
   3D DEPTH UPGRADE (GAMING)
   - bikin elemen terasa "naik" dengan highlight + shadow bertingkat
   ========================================================== */

@keyframes ojiBtnShine{
  0%{ transform: translateX(-140%) skewX(-18deg); opacity: 0; }
  18%{ opacity: .55; }
  45%{ transform: translateX(180%) skewX(-18deg); opacity: 0; }
  100%{ transform: translateX(180%) skewX(-18deg); opacity: 0; }
}

.theme-gaming .card,
.theme-gaming .product-card,
.theme-gaming .auth-card{
  border-radius: 18px;
  border-color: rgba(255,255,255,.10);
  box-shadow:
    0 22px 60px rgba(0,0,0,.62),
    0 1px 0 rgba(255,255,255,.06) inset,
    0 -1px 0 rgba(0,0,0,.55) inset;
  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow: hidden;
}

.theme-gaming .card > *,
.theme-gaming .product-card > *,
.theme-gaming .auth-card > *{
  position: relative;
  z-index: 1;
}

.theme-gaming .card::before,
.theme-gaming .product-card::before,
.theme-gaming .auth-card::before{
  content:"";
  position:absolute;
  inset: 0;
  z-index: 0;
  pointer-events:none;
  background:
    radial-gradient(800px 240px at 20% 0%, rgba(255,255,255,.08), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 45%);
  opacity: .85;
}

@media (hover:hover){
  .theme-gaming .card:hover,
  .theme-gaming .product-card:hover,
  .theme-gaming .auth-card:hover{
    transform: translateY(-3px);
    border-color: rgba(139,92,246,.28);
    box-shadow:
      0 26px 70px rgba(0,0,0,.70),
      0 1px 0 rgba(255,255,255,.07) inset,
      0 -1px 0 rgba(0,0,0,.55) inset,
      0 0 22px rgba(139,92,246,.14);
  }
}

/* tombol lebih "3D" */
.theme-gaming .btn-primary,
.theme-gaming .btn-brand{
  position: relative;
  overflow: hidden;
  box-shadow:
    0 14px 28px rgba(0,0,0,.45),
    0 1px 0 rgba(255,255,255,.08) inset;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

@media (hover:hover){
  .theme-gaming .btn-primary:hover,
  .theme-gaming .btn-brand:hover{
    transform: translateY(-1px);
    box-shadow:
      0 18px 34px rgba(0,0,0,.55),
      0 1px 0 rgba(255,255,255,.10) inset,
      0 0 22px rgba(139,92,246,.20);
  }
}

.theme-gaming .btn-primary::after,
.theme-gaming .btn-brand::after{
  content:"";
  position:absolute;
  inset: -2px -45%;
  transform: translateX(-140%) skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.26), transparent);
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference){
  .theme-gaming .btn-primary::after,
  .theme-gaming .btn-brand::after{
    animation: ojiBtnShine 4.8s ease-in-out infinite;
  }
}

/* bottom nav: tambah depth + garis neon tipis */
.theme-gaming .bottom-nav{
  box-shadow: 0 -18px 40px rgba(0,0,0,.65);
  position: fixed;
}

.theme-gaming .bottom-nav::before{
  content:"";
  position:absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139,92,246,.55), transparent);
  opacity: .75;
  pointer-events:none;
}


/* =========================
   PROFILE (AKUN) - GAMING UI
   ========================= */
.user-avatar-mini{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  object-fit: cover;
  margin-right: 10px;
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 0 0 2px rgba(255,0,80,.08), 0 10px 18px rgba(0,0,0,.35);
  flex: 0 0 auto;
}
.user-avatar-mini.icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.9);
}
.user-hello{ white-space: nowrap; }

.profile-panel{
  position: relative;
  padding: 16px;
  border-radius: 18px;
  /* Panel dibuat lebih gelap agar teks tidak "beradu" dengan background shapes yang terang. */
  background: linear-gradient(180deg, rgba(0,0,0,.70), rgba(0,0,0,.56));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    0 18px 40px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  overflow: hidden;
}
.profile-panel::before{
  content:"";
  position:absolute;
  inset:-2px;
  /* Glow ungu-biru agar nyatu dengan tema (lebih soft daripada merah-oranye). */
  background: radial-gradient(640px 300px at 18% 0%, rgba(139,92,246,.28), transparent 60%),
              radial-gradient(520px 260px at 92% 20%, rgba(59,130,246,.18), transparent 62%);
  pointer-events:none;
  opacity:.65;
}
.profile-panel > *{ position: relative; z-index: 1; }

.profile-head{
  display:flex;
  align-items:center;
  gap: 12px;
}
.profile-avatar{
  width: 58px;
  height: 58px;
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 12px 24px rgba(0,0,0,.45), 0 0 0 3px rgba(255,0,80,.10);
  background: rgba(0,0,0,.35);
  flex: 0 0 auto;
}
.profile-avatar img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.profile-avatar-fallback{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 22px;
  color: rgba(255,255,255,.9);
  background: radial-gradient(80px 60px at 30% 20%, rgba(255,0,80,.25), transparent 60%),
              rgba(0,0,0,.35);
}
.profile-name{
  font-weight: 800;
  letter-spacing: .2px;
  font-size: 18px;
  line-height: 1.1;
}
.profile-email{
  font-size: 12px;
  opacity: .8;
  margin-top: 2px;
}

.profile-fields{
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.profile-field{
  border-radius: 14px;
  padding: 12px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
.profile-label{
  font-size: 12px;
  opacity: .75;
  margin-bottom: 4px;
}
.profile-value{
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

.profile-avatar-edit{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(15,23,42,.10);
}
.profile-avatar-edit .form-control{
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(124,58,237,.18);
  color: rgba(255,255,255,.92);
}
.profile-avatar-edit .form-text{
  opacity: .75;
}



/* =========================
   PROFILE LAYOUT UPGRADES
   (lebih rapi + responsive)
   ========================= */

/* Guest (belum login) */
.profile-guest-wrap{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding: 18px 0 34px;
  /* bikin area guest lebih terasa seperti layout mobile (card di tengah) */
  min-height: calc(100vh - var(--header-offset) - 84px);
}
.profile-guest-card{
  width: 100%;
  /* desktop juga dibuat "seukuran mobile" supaya rapi */
  max-width: 560px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 24px 70px rgba(2,6,23,.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
}
.profile-guest-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    url("../img/bg-waves-top.svg"),
    url("../img/bg-curves-purple.svg");
  background-repeat: no-repeat, no-repeat;
  background-position: top center, top right;
  background-size: 220% 190px, 720px auto;
  opacity: .42;
}
.profile-guest-card > *{ position: relative; z-index: 1; }
.profile-guest-title{ font-weight: 900; letter-spacing: .2px; }

.profile-guest-alert{
  padding: 14px 16px;
  border-radius: 18px !important;
  font-weight: 700;
}
.profile-guest-chip{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2px;
  background: rgba(15,23,42,.06);
  border: 1px solid rgba(15,23,42,.10);
  color: rgba(15,23,42,.78);
}
.profile-guest-actions{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
  width: 100%;
}
.profile-guest-actions .btn{
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px;
  border-radius: 9999px !important;
}
@media (min-width: 576px){
  /* tetap 2 baris (stack) di desktop */
  .profile-guest-actions{ flex-direction: column; }
  .profile-guest-actions .btn{ flex: 0 0 auto; }
}
.btn-guest-login,
.btn-guest-register{
  height: 52px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .2px;
  box-shadow: 0 10px 26px rgba(2,6,23,.14);
}
.btn-guest-login{
  background: #2563eb !important;
  border: 1px solid #2563eb !important;
  color:#fff !important;
}
.btn-guest-login:hover{ filter: brightness(.95); color:#fff !important; }

/* paksa teks & ikon putih (override .text-primary, dll) */
.profile-guest-actions .btn-guest-login,
.profile-guest-actions .btn-guest-login *{
  color:#fff !important;
}
.profile-guest-actions .btn-guest-register,
.profile-guest-actions .btn-guest-register *{
  color:#fff !important;
}


.btn-guest-login i,
.btn-guest-login span,
.btn-guest-register i,
.btn-guest-register span{ color: inherit !important; }
.btn-guest-register{
  background: #16a34a;
  border: 1px solid #16a34a;
  color: #fff !important;
}
.btn-guest-register:hover{ filter: brightness(.95); color:#fff !important; }

/* Logged-in (info akun) - desktop dibuat lebih rapi & tidak terlalu melebar */
.profile-page-wrap{
  display: flex;
  justify-content: center;
}
.profile-page-inner{
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}
@media (min-width: 992px){
  .profile-page-wrap{ padding: 6px 0 24px; }
  .profile-page-inner{ max-width: 1060px; }
  /* panel terasa lebih lega di desktop */
  .profile-page-inner .profile-panel{ padding: 18px; border-radius: 22px; }
  .profile-page-inner .profile-info-grid{ gap: 14px; }
}
@media (min-width: 1200px){
  .profile-page-inner{ max-width: 1120px; }
}

.profile-layout{
  display: grid;
  gap: 14px;
}
@media (min-width: 992px){
  .profile-layout{
    grid-template-columns: 360px 1fr;
    align-items: start;
  }

  /*
    Desktop: kolom kiri (profil/actions) lebih "nempel" dan rapi.
    - sticky supaya panel profil tetap terlihat saat scroll.
    - tombol actions ditumpuk agar tidak sempit di kolom 360px.
  */
  .profile-card--hero,
  .profile-card--avatar{
    position: sticky;
    top: calc(var(--header-offset) + var(--desktop-nav-height, 56px) + 18px);
  }

  .profile-actions{ grid-template-columns: 1fr; }
  .profile-actions .btn:nth-child(3){ grid-column: auto; }
}

@media (min-width: 1200px){
  /* layar besar: sedikit lebarkan kolom kiri + ruang antar panel */
  .profile-layout{ grid-template-columns: 380px 1fr; gap: 18px; }
  .profile-form-grid{ grid-template-columns: 380px 1fr; gap: 18px; }
  .profile-name{ font-size: 20px; }
  .profile-email{ font-size: 13px; }
}

/* Topbar di halaman edit */
.profile-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 2px 4px;
}

/* Avatar size XL + efek glossy */
.profile-avatar{ position: relative; }
.profile-avatar::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(120deg, rgba(255,255,255,.22), transparent 55%);
  opacity: .22;
  pointer-events:none;
}
.profile-avatar--xl{
  width: 76px;
  height: 76px;
  border-radius: 22px;
}
.profile-avatar--center{ margin-left:auto; margin-right:auto; }

/* Hero block */
.profile-hero{
  display:flex;
  align-items:center;
  gap: 12px;
}
.profile-meta{ margin-top: 8px; }
.profile-badge{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2px;
  background: rgba(0,0,0,.32);
  border: 1px solid rgba(139,92,246,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* Actions: tombol rapi & responsive */
.profile-actions{
  display:grid;
  gap: 10px;
}
.profile-actions .btn{
  width: 100%;
  justify-content: center;
}
@media (min-width: 576px){
  .profile-actions{
    grid-template-columns: 1fr 1fr;
  }
  .profile-actions .btn:nth-child(3){
    grid-column: 1 / -1; /* tombol admin lebar penuh */
  }
}

/* Grid detail akun */
.profile-section-title{
  font-weight: 900;
  letter-spacing: .2px;
  margin-bottom: 10px;
  display:flex;
  align-items:center;
  color: rgba(255,255,255,.98);
  font-size: 1.02rem;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.profile-info-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 576px){
  .profile-info-grid{
    grid-template-columns: 1fr 1fr;
  }
}
.profile-info-item{
  display:flex;
  align-items:flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(0,0,0,.56);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.profile-info-item--wide{
  grid-column: 1 / -1;
}
.pi-icon{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
  background: radial-gradient(70px 60px at 30% 20%, rgba(139,92,246,.26), transparent 60%),
              rgba(0,0,0,.38);
  border: 1px solid rgba(139,92,246,.22);
  box-shadow: 0 14px 24px rgba(0,0,0,.35);
  color: rgba(255,255,255,.92);
}
.pi-label{
  font-size: 12px;
  opacity: .72;
  margin-bottom: 4px;
}
.pi-value{
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
}
.pi-value--wrap{
  white-space: normal;
  word-break: break-word;
}

/* Edit page: form grid */
.profile-form-grid{
  display: grid;
  gap: 14px;
}
@media (min-width: 992px){
  .profile-form-grid{
    grid-template-columns: 360px 1fr;
    align-items: start;
  }
}

/* textarea */
.profile-textarea{ resize: none; }

/* hint */
.profile-edit-hint{
  font-size: 12px;
  opacity: .75;
  text-align:center;
}

/* Header: lebih aman di layar kecil */
@media (max-width: 360px){
  .user-header-action .user-hello{ display:none; }
  .user-avatar-mini{ margin-right: 0; }
}

/* ==========================================================
   HOME: TRUST SECTION BACKGROUND (FIX)
   - Memaksa background trust section tetap dark & menyatu dengan
     theme gaming (hitam-merah) + curves/waves.
   - Semi-transparan supaya background global masih kelihatan.
   ========================================================== */

/* Safety: kalau ada style lain yg bikin wrapper putih */
.theme-gaming .user-content{ background: transparent !important; }

/* Trust panel background */
.theme-gaming .trust-wrap{
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 18px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(239,246,255,.70)) !important;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 18px 46px rgba(2,6,23,.10);
}

/* Curves/Waves overlay (biar "seperti sebelumnya") */
.theme-gaming .trust-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background-image:
    url("../img/bg-waves-top.svg"),
    url("../img/bg-curves-purple.svg");
  background-repeat: no-repeat, no-repeat;
  background-position: top center, top right;
  background-size: 220% 190px, 720px auto;
  opacity: .58;
  filter: saturate(1.05);
}

/* Grid halus biar lebih 3D */
.theme-gaming .trust-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background-image:
    radial-gradient(900px 360px at 50% 0%, rgba(15,23,42,.06), rgba(255,255,255,0) 60%),
    radial-gradient(900px 480px at 50% 100%, rgba(124,58,237,.08), rgba(139,92,246,0) 62%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.040) 0, rgba(255,255,255,.040) 1px, transparent 1px, transparent 110px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.032) 0, rgba(255,255,255,.032) 1px, transparent 1px, transparent 110px);
  opacity: .55;
  mix-blend-mode: screen;
}

/* Pastikan isi di atas overlay */
.theme-gaming .trust-wrap > .container,
.theme-gaming .trust-wrap .trust-head,
.theme-gaming .trust-wrap .trust-cards,
.theme-gaming .trust-wrap .trust-cta{
  position: relative;
  z-index: 1;
}

/* Mobile tuning */
@media (max-width: 576px){
  .theme-gaming .trust-wrap{
    padding: 16px 12px;
    border-radius: 18px;
  }
  .theme-gaming .trust-wrap::before{
    background-size: 230% 170px, 560px auto;
    opacity: .74;
  }
}


/* ==========================================================
   PATCH: Promo tidak bisa ditutup + Trust slider geser (touch)
   ========================================================== */

/* Pastikan tombol close promo tidak tampil (promo selalu muncul) */
.promo-close{ display:none !important; }

/* Trust cards: bisa digeser dengan layar sentuh di tablet & mobile */
.trust-wrap{ overflow: visible !important; }
.trust-cards{
  scrollbar-width:none;
}
.trust-cards::-webkit-scrollbar{ display:none; }

@media (max-width: 992px){
  .trust-cards{
    display:flex !important;
    overflow-x:auto !important;
    overflow-y:visible;
    gap:14px;
    padding-bottom: 10px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
  }
  .trust-card{
    flex:0 0 86%;
    min-width: 280px;
    max-width: 460px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
}

@media (min-width: 993px){
  .trust-cards{
    display:grid !important;
    overflow:visible !important;
  }
  .trust-card{ flex:unset; min-width: unset; max-width:none; }
}



/* ==========================================================
   FIX ANDROID: TRUST/CLIENT CARD TIDAK TERPOTONG + TETAP SWIPE
   - Card dibuat lebih lebar (hampir full) agar tidak terlihat "kepotong"
   - Tambah padding kiri/kanan agar shadow tidak ter-clip
   - Tetap scroll-snap & touch swipe
   ========================================================== */
@media (max-width: 720px){
  /* biar shadow card tidak kepotong oleh wrapper rounded */
  .theme-gaming .trust-wrap{ overflow: visible !important; }
  .theme-gaming .trust-wrap::before,
  .theme-gaming .trust-wrap::after{ border-radius: 22px; }

  .page-home .trust-cards{
    display:flex !important;
    overflow-x:auto !important;
    overflow-y:visible !important;
    gap:14px !important;
    padding: 6px 16px 14px !important; /* ruang untuk shadow */
    scroll-padding-left: 16px;
    scroll-padding-right: 16px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    touch-action: pan-x;
    scrollbar-width: none;
  }
  .page-home .trust-cards::-webkit-scrollbar{ height: 0; }

  .page-home .trust-card{
    flex: 0 0 92% !important;
    min-width: 92% !important;
    max-width: 520px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
}
@media (max-width: 420px){
  .page-home .trust-card{ flex-basis: 94% !important; min-width: 94% !important; }
}



/* TRUST LIGHT THEME OVERRIDES */
.theme-gaming .trust-card{ color: var(--text); }
.theme-gaming .trust-name{ color: var(--text); }
.theme-gaming .trust-role{ color: var(--muted); }
.theme-gaming .trust-text{ color: rgba(15,23,42,.82); }


/* =========================
   DESKTOP: tombol guest login/daftar tetap terlihat seperti button
   (fallback jika markup masih link biasa)
   ========================= */
@media (min-width: 992px){
  /* fallback untuk versi markup lama: link biasa tanpa class btn */
  .profile-guest-wrap a[href$="login.php"],
  .profile-guest-wrap a[href$="register.php"],
  .py-4 a[href$="login.php"],
  .py-4 a[href$="register.php"]{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px;
    width: 100% !important;
    max-width: 520px;
    margin-left: auto !important;
    margin-right: auto !important;
    height: 52px;
    border-radius: 9999px !important;
    text-decoration: none !important;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: .2px;
    box-shadow: 0 10px 26px rgba(2,6,23,.14);
  }
  .profile-guest-wrap a[href$="login.php"],
  .py-4 a[href$="login.php"]{
    background:#2563eb !important;
    border:1px solid #2563eb !important;
    color:#fff !important;
  }
  .profile-guest-wrap a[href$="register.php"],
  .py-4 a[href$="register.php"]{
    background:#16a34a !important;
    border:1px solid #16a34a !important;
    color:#fff !important;
  }

  .profile-guest-wrap a[href$="login.php"] *,
  .profile-guest-wrap a[href$="register.php"] *,
  .py-4 a[href$="login.php"] *,
  .py-4 a[href$="register.php"] *{
    color:#fff !important;
  }
}



/* =========================
   PROFILE: Pembelian (Domain/Hosting/Paket) + Countdown Paket
   ========================= */
.profile-stats-grid{
  display:grid;
  gap:12px;
  grid-template-columns: 1fr;
  margin-top: 10px;
}
@media (min-width: 576px){
  .profile-stats-grid{ grid-template-columns: repeat(3, 1fr); }
}

.profile-stat-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 12px 14px;
  border-radius: 16px;
  /* Kontras dinaikkan lagi agar teks selalu jelas terbaca di background purple yg cukup terang. */
  background: rgba(0,0,0,.62);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    0 10px 24px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.08);
  min-height: 66px;
}
.profile-stat-card .psc-icon{
  width:40px;
  height:40px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(59,130,246,.22);
  border: 1px solid rgba(59,130,246,.30);
  color: #fff;
  flex: 0 0 40px;
}
.profile-stat-card:nth-child(2) .psc-icon{
  background: rgba(34,197,94,.22);
  border-color: rgba(34,197,94,.30);
}
.profile-stat-card:nth-child(3) .psc-icon{
  background: rgba(168,85,247,.22);
  border-color: rgba(168,85,247,.30);
}

.profile-stat-card .psc-label{
  font-size: .84rem;
  color: rgba(255,255,255,.92);
  font-weight: 800;
  line-height: 1.1;

  white-space: nowrap;
  word-break: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-stat-card .psc-value{
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  margin-top: 2px;
}
.profile-stat-card .psc-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size: .78rem;
  margin-top: 4px;
  /* paksa warna agar tidak tertimpa aturan global: body.theme-gaming a{... !important} */
  color: rgba(255,255,255,.98) !important;
  font-weight: 800;
  text-decoration: none;
}
.profile-stat-card .psc-link:hover{
  text-decoration: underline;
  color: #fff !important;
}

.profile-divider{
  border: 0;
  height: 1px;
  background: rgba(255,255,255,.10);
}

.subs-list{
  display:flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}
.subs-item{
  display:flex;
  gap: 12px;
  align-items: stretch;
  justify-content: space-between;
  padding: 12px;
  border-radius: 16px;
  background: rgba(0,0,0,.52);
  border: 1px solid rgba(255,255,255,.14);
}
@media (max-width: 575.98px){
  .subs-item{ flex-direction: column; }
}
.subs-item.is-expired{
  border-color: rgba(239,68,68,.30);
  background: rgba(239,68,68,.10);
}
.subs-title{
  font-weight: 800;
  color:#fff;
}
.subs-meta{
  display:flex;
  align-items:center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
  color: rgba(255,255,255,.78);
  font-size: .85rem;
}
.subs-ends{
  opacity: .9;
}
.subs-countdown{
  margin-top: 8px;
  font-weight: 700;
  color: rgba(255,255,255,.95);
}
.subs-item.is-expired .subs-countdown{
  color: rgba(239,68,68,.95);
}

.subs-actions{
  flex: 0 0 180px;
  display:flex;
  align-items:flex-start;
}
@media (max-width: 575.98px){
  .subs-actions{ flex: 1 1 auto; }
}


.subs-price{opacity:.85;}


/* WhatsApp button (detail produk) */
.btn-wa{background:#25D366;border:none;color:#fff;}
.btn-wa:hover{background:#1ebe5d;color:#fff;}
.btn-wa:focus{box-shadow:0 0 0 .25rem rgba(37,211,102,.25);color:#fff;}
.btn-wa i,.btn-wa span{color:#fff !important;}


/* Space untuk elemen terakhir agar tidak mepet/ketutup bottom-nav */
/* Extra spacing above the fixed bottom nav (70px) + safe area */
.mb-bottom-nav{
  margin-bottom: calc(
    var(--bottom-nav-height)
    + env(safe-area-inset-bottom)
    + var(--bottom-nav-gap)
    + 16px
  ) !important;
}

/* Override Bootstrap padding utilities (pb-*) when used on .user-content */
.container.user-content,
.container.pb-5.user-content{
  padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + var(--bottom-nav-gap)) !important;
}


/* =========================
   PRICING (Home) - 4 paket
   ========================= */
.pricing-wrap{max-width:1100px;margin-left:auto;margin-right:auto;}
.pricing-head{padding: 0 .25rem;}
.pricing-title{
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  font-weight: 800;
  letter-spacing: .2px;
  margin: 0 0 .25rem 0;
}
.pricing-sub{margin: 0; opacity:.85;}

.pricing-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}
@media (max-width: 991.98px){
  .pricing-grid{grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 575.98px){
  .pricing-grid{grid-template-columns: 1fr;}
}

.pricing-card{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}
.pricing-card-head{
  background: linear-gradient(135deg, rgba(168,85,247,.95), rgba(124,58,237,.92));
  padding: 18px 16px;
}
.pricing-name{color:#fff;font-weight: 900;font-size: 1.6rem; line-height:1.05;}
.pricing-desc{color: rgba(255,255,255,.85); font-size:.9rem; margin-top:.25rem;}

.pricing-badge{
  margin-top: .55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.28);
  color: #fff;
  font-weight: 900;
  font-size: .82rem;
  letter-spacing: .2px;
  width: fit-content;
}

.pricing-card-body{padding: 16px;}
.pricing-prices{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:4px;}
.pricing-original{
  color: rgba(255,0,0,.9);
  font-weight: 900;
  font-size: 1.6rem;
  text-decoration: line-through;
}
.pricing-final{font-weight: 900; font-size: 2.1rem;}
.pricing-renew{margin-top: 8px; text-align:center; opacity:.75;}

.pricing-features{
  list-style:none;
  padding: 10px 0 0 0;
  margin: 8px 0 0 0;
  border-top: 1px solid rgba(255,255,255,.12);
}
.pricing-features li{
  padding: 10px 0;
  text-align:center;
  border-bottom: 1px solid rgba(255,255,255,.08);
  opacity: .9;
}
.pricing-features li:last-child{border-bottom:0;}

.pricing-order{
  margin-top: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 14px;
  border-radius: 14px;
  text-decoration:none;
  font-weight: 900;
  letter-spacing:.4px;
  background: #22c55e;
  color: #fff;
}
.pricing-order:hover{filter: brightness(0.95); color:#fff;}
.pricing-order i{font-size: 1.15rem;}