:root{
  --primary:#7c3aed;
  --primary-dark:#6d28d9;
}
a{color:var(--primary)}
.btn-primary{background:var(--primary);border-color:var(--primary)}
.btn-primary:hover{background:var(--primary-dark);border-color:var(--primary-dark)}
.user-header .btn{background:rgba(255,255,255,.18); color:#fff}

/* Header search (Home): search menyatu dengan header */
.user-header .header-search-wrap{
  margin-top: 10px;
  padding-bottom: 4px;
}
.user-header .header-search-form{ width: 100%; }
.user-header .header-search-form .input-group{
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 12px 26px rgba(15,23,42,.16);
}
.user-header .header-search-form .input-group-text,
.user-header .header-search-form .form-control{
  background: rgba(255,255,255,.94) !important;
  border-color: rgba(255,255,255,.55) !important;
}
.user-header .header-search-form .form-control::placeholder{
  color: rgba(100,116,139,.85) !important;
}

/* Ikon search di header: pastikan kontras (tidak ikut warna putih dari header) */
.user-header .header-search-form .input-group-text{
  color: #111827 !important;
}
.user-header .header-search-form .input-group-text i{
  color: rgba(17,24,39,.70) !important;
}

/* Harga asli (dicoret) + harga setelah diskon */
.price-original{
  text-decoration: line-through;
  color: rgba(100,116,139,.85);
  font-weight: 600;
  font-size: 12px;
}
.price-final{
  font-weight: 800;
}

/* Pastikan header utama (user-header) tetap FIXED di desktop
   (ada rule global `header{position: sticky}` di file ini untuk template lain). */
@media (min-width: 992px){
  header.user-header{
    position: fixed !important;
    top: 0; left: 0; right: 0;
    z-index: 1030;
  }
}


/* ==============================
   DESKTOP RESPONSIVE IMPROVEMENTS
   ============================== */

/* Better container width on larger screens */
@media (min-width: 992px){
  .container{
    max-width: 1140px;
  }
}
@media (min-width: 1200px){
  .container{
    max-width: 1240px;
  }
}

/* Top header layout (logo + search + actions) */
@media (min-width: 992px){
  .topbar, .top-header, .header, header{
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(10px);
  }

  .top-header .container,
  .topbar .container,
  header .container{
    display: flex;
    align-items: center;
    gap: 14px;
  }

  /* Search bar grows */
  .search-wrap,
  .search,
  .header-search,
  .top-search{
    flex: 1 1 auto;
    max-width: 680px;
    margin: 0 auto;
  }

  .search-wrap input,
  .search input,
  .header-search input,
  .top-search input{
    height: 44px;
    border-radius: 999px;
    padding-left: 16px;
  }

  /* Header action icons align right */
  .header-actions,
  .top-actions,
  .nav-actions{
    margin-left: auto;
    display: flex;
    gap: 10px;
    align-items: center;
  }
}

/* Card grid: 1 col mobile (existing), 2 col small, 3 col desktop, 4 col wide */
.products-grid,
.paket-grid,
.product-grid,
.grid-products{
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 18px;
}
@media (min-width: 576px){
  .products-grid,
  .paket-grid,
  .product-grid,
  .grid-products{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 992px){
  .products-grid,
  .paket-grid,
  .product-grid,
  .grid-products{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1400px){
  .products-grid,
  .paket-grid,
  .product-grid,
  .grid-products{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* If the project uses Bootstrap rows/cols for cards, make them prettier on desktop */
@media (min-width: 992px){
  .row.g-3,
  .row.g-4{
    --bs-gutter-x: 1.25rem;
    --bs-gutter-y: 1.25rem;
  }
}

/* Card: better typography & spacing for desktop */
@media (min-width: 992px){
  .card-body{
    padding: 14px 16px;
  }
  .card-title{
    font-size: 16px;
    line-height: 1.35;
    min-height: 44px; /* keep height consistent when title wraps */
  }
  .price{
    font-size: 16px;
  }
}

/* Section headings */
@media (min-width: 992px){
  h1, .h1{font-size: 32px;}
  h2, .h2{font-size: 24px;}
  h3, .h3{font-size: 18px;}
}

/* Desktop: ubah menu footer jadi navbar (tampil di atas) */
@media (min-width: 992px){
  .bottom-nav{
    position: fixed !important;
    top: var(--header-offset);
    bottom: auto !important;
    left: 0;
    right: 0;
    height: var(--desktop-nav-height, 56px);
    padding: 0 12px;
    border-top: 0;
    border-bottom: 1px solid rgba(15, 23, 42, .08);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .08);
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    gap: 18px;
    z-index: 1040; /* pastikan muncul di atas dekor header */
  }

  /* Desktop: tidak butuh padding bawah (karena nav pindah ke atas) */
  body{
    padding-bottom: 0 !important;
  }
}
/* Footer spacing on desktop */
@media (min-width: 992px){
  footer{
    border-radius: 18px 18px 0 0;
    margin-top: 24px;
  }
}

/* Prevent horizontal overflow caused by long text */
*{word-wrap: break-word;}
img{max-width:100%; height:auto;}



/* ==============================
   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(255,255,255,.14);
  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{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(56px, 1fr));
  gap: 10px;
  align-items: stretch;
}

.page-home .cd-item{
  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);
}

.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{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@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{ grid-template-columns: repeat(4, minmax(62px, 1fr)); }
}

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

/* ==========================================================
   PROMO COUNTDOWN (FORCE 1 ROW)
   Karena file ini di-load SETELAH style.css, aturan di bawah ini
   mengunci hitungan mundur agar selalu berjejer 1 baris.
   Jika layar terlalu sempit, tetap 1 baris dan bisa di-swipe.
   ========================================================== */
.page-home .promo-countdown{
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 10px;
  align-items: stretch;
  justify-content: flex-start;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.page-home .promo-countdown::-webkit-scrollbar{ height: 0; }

.page-home .promo-countdown .cd-item{
  flex: 1 1 0;
  min-width: 62px;
  scroll-snap-align: start;
}

@media (max-width: 480px){
  .page-home .promo-countdown{ gap: 8px; }
  .page-home .promo-countdown .cd-item{ min-width: 58px; }
}

@media (max-width: 360px){
  .page-home .promo-countdown .cd-item{ min-width: 54px; }
  .page-home .cd-num{ font-size: 16px; }
  .page-home .cd-label{ font-size: 10px; }
}

/* ==========================================================
   OZI WEB THEME: LIGHT PURPLE • WHITE • PALE BLUE
   - Background lebih terang (putih/pucat) agar teks lebih jelas
   - Surface/card jadi glass putih (bukan gelap)
   ========================================================== */

body.theme-gaming.has-bg-shapes::after{
  opacity: .96 !important;
  filter: none !important;
}

body.theme-gaming{
  color: var(--text) !important;
  --primary: var(--brand);
  --primary-dark: #6d28d9;
}

/* Links */
body.theme-gaming a{ color: rgba(79,70,229,.92) !important; }
body.theme-gaming a:hover{ color: rgba(124,58,237,.95) !important; }

/* Utility backgrounds */
body.theme-gaming .bg-white,
body.theme-gaming .bg-light{
  background: rgba(255,255,255,.78) !important;
}

/* Card/surface */
body.theme-gaming .card,
body.theme-gaming .list-group-item,
body.theme-gaming .dropdown-menu,
body.theme-gaming .modal-content,
body.theme-gaming .toast,
body.theme-gaming .table{
  background: rgba(255,255,255,.82) !important;
  color: rgba(15,23,42,.95) !important;
  border-color: rgba(15,23,42,.10) !important;
}

/* Forms */
body.theme-gaming .form-control,
body.theme-gaming .form-select{
  background: rgba(255,255,255,.84) !important;
  color: rgba(15,23,42,.95) !important;
  border-color: rgba(15,23,42,.14) !important;
}
body.theme-gaming .form-control::placeholder{ color: rgba(51,65,85,.55) !important; }
body.theme-gaming .form-control:focus,
body.theme-gaming .form-select:focus{
  border-color: rgba(124,58,237,.35) !important;
  box-shadow: 0 0 0 4px rgba(124,58,237,.14) !important;
}

/* Trust CTA buttons: outline-light jadi outline ungu */
.page-home .trust-cta .btn-outline-light{
  color: rgba(15,23,42,.92) !important;
  border-color: rgba(124,58,237,.35) !important;
  background: rgba(255,255,255,.62) !important;
}
.page-home .trust-cta .btn-outline-light:hover,
.page-home .trust-cta .btn-outline-light:focus{
  color: rgba(15,23,42,.95) !important;
  border-color: rgba(124,58,237,.55) !important;
  background: rgba(124,58,237,.10) !important;
}

/* ==========================================================
   THEME TEXT DEFAULTS (LIGHT)
   - Tidak memaksa semua teks putih (biar kontras di background putih)
   - Header/promo tetap punya warna sendiri (aman)
   ========================================================== */

body.theme-gaming .user-content,
body.theme-gaming .container.py-4{
  color: rgba(15,23,42,.95) !important;
}

body.theme-gaming .user-content .text-muted,
body.theme-gaming .container.py-4 .text-muted{
  color: rgba(51,65,85,.78) !important;
}

/* Link di konten (bukan tombol) */
body.theme-gaming .user-content a:not(.btn),
body.theme-gaming .container.py-4 a:not(.btn){
  color: rgba(79,70,229,.92) !important;
}
body.theme-gaming .user-content a:not(.btn):hover,
body.theme-gaming .container.py-4 a:not(.btn):hover{
  color: rgba(124,58,237,.95) !important;
}

/* ==========================================================
   HOME: IKLAN / KATA-KATA (di atas Tim Kami)
   - 1 baris (horizontal) + bisa digeser (touch swipe)
   ========================================================== */
.page-home .home-ads{ position: relative; }

.page-home .ads-strip{
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  overflow-x: auto;
  overflow-y: visible;
  padding: 2px 14px 12px;
  margin-left: -14px;
  margin-right: -14px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 14px;
  scroll-padding-right: 14px;
  touch-action: pan-x;
  scrollbar-width: none;
}
.page-home .ads-strip::-webkit-scrollbar{ height: 0; }

.page-home .ad-card{
  flex: 0 0 auto;
  min-width: 240px;
  max-width: 300px;
  padding: 12px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(124,58,237,.18);
  box-shadow: 0 12px 30px rgba(15, 23, 42, .08);
  display: flex;
  align-items: center;
  gap: 10px;
  scroll-snap-align: start;
}

.page-home .ad-ico{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--header-grad);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
  flex: 0 0 auto;
}
.page-home .ad-ico i{ font-size: 18px; }

.page-home .ad-copy{ min-width: 0; }
.page-home .ad-title{
  font-weight: 900;
  font-size: .98rem;
  line-height: 1.1;
  color: rgba(15,23,42,.95);
}
.page-home .ad-sub{
  margin-top: 3px;
  font-size: .82rem;
  line-height: 1.25;
  color: rgba(51,65,85,.85);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

@media (max-width: 420px){
  .page-home .ad-card{ min-width: 220px; }
}

/* Mobile (Android/iOS): tampil 4 baris (tanpa geser) */
@media (max-width: 768px){
  .page-home .ads-strip{
    flex-direction: column;
    overflow-x: visible;
    scroll-snap-type: none;
    touch-action: pan-y;
    padding: 0 0 12px;
    margin-left: 0;
    margin-right: 0;
  }

  .page-home .ad-card{
    width: 100%;
    min-width: 0;
    max-width: none;
  }
}

/* ==========================================================
   MY TEAM (Home)
   ========================================================== */
.page-home .team-wrap{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
}

/* overlay curves halus biar nyatu sama theme */
.page-home .team-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 380px at 20% 10%, rgba(124,58,237,.16), transparent 55%),
    radial-gradient(700px 320px at 85% 65%, rgba(147,197,253,.18), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.62));
  pointer-events:none;
}

.page-home .team-wrap .container{ position: relative; }

.page-home .team-head{ text-align: center; margin-bottom: 14px; }
.page-home .team-title{ font-size: 1.25rem; font-weight: 800; letter-spacing: .2px; margin: 0; }
.page-home .team-sub{ margin: 6px auto 0; max-width: 680px; opacity: .88; }

.page-home .team-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-width: 760px;
  margin: 0 auto;
}

.page-home .team-card{
  position: relative;
  padding: 16px 14px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(14,14,18,.76), rgba(6,6,10,.88));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 12px 30px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.06);
  text-align: center;
}

.page-home .team-card::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 20px;
  background: radial-gradient(600px 220px at 40% 0%, rgba(255,64,64,.18), transparent 55%);
  opacity: .6;
  pointer-events:none;
}

.page-home .team-avatar{
  width: 82px;
  height: 82px;
  margin: 2px auto 10px;
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid rgba(255,80,80,.55);
  box-shadow: 0 10px 22px rgba(0,0,0,.55), 0 0 0 6px rgba(255,60,60,.10);
}
.page-home .team-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

.page-home .team-name{ font-weight: 900; margin-top: 2px; font-size: 1.02rem; letter-spacing: .2px; }
.page-home .team-edu{ font-size: .84rem; opacity: .92; margin-top: 3px; line-height: 1.2; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 2.4em; }
.page-home .team-role{
  margin-top: 8px;
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,60,60,.12);
  border: 1px solid rgba(255,80,80,.28);
  font-size: .82rem;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* Mobile: 2 kolom biar rapi (karena tim = 2 orang), kecilin spacing & font */
@media (max-width: 520px){
  .page-home .team-grid{ gap: 10px; }
  .page-home .team-card{ padding: 14px 10px; border-radius: 16px; }
  .page-home .team-avatar{ width: 62px; height: 62px; margin-bottom: 8px; }
  .page-home .team-name{ font-weight: 900; margin-top: 2px; font-size: 1.02rem; letter-spacing: .2px; }
  .page-home .team-edu{ font-size: .84rem; opacity: .92; margin-top: 3px; line-height: 1.2; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 2.4em; }
  .page-home .team-role{ font-size: .78rem; padding: 5px 8px; }
}

@media (max-width: 380px){
  .page-home .team-grid{ gap: 8px; }
  .page-home .team-card{ padding: 12px 8px; }
  .page-home .team-avatar{ width: 56px; height: 56px; }
  .page-home .team-edu{ font-size: .84rem; opacity: .92; margin-top: 3px; line-height: 1.2; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 2.4em; }
}




/* ==========================================================
   TEAM (extra sizing polish for longer education text)
   ========================================================== */
@media (max-width: 520px){
  .page-home .team-avatar{ width: 64px; height: 64px; }
  .page-home .team-name{ font-size: .92rem; }
  .page-home .team-edu{ font-size: .76rem; -webkit-line-clamp: 3; min-height: 3.6em; }
  .page-home .team-role{ font-size: .74rem; padding: 5px 8px; }
}
@media (max-width: 380px){
  .page-home .team-avatar{ width: 58px; height: 58px; }
  .page-home .team-edu{ font-size: .74rem; }
}

/* ==========================================================
   WALLET / SALDO
   ========================================================== */
.page-home .home-wallet{ margin-bottom: 10px; }
.page-home .wallet-pill{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  text-decoration:none;
  color: #fff !important;
  background: linear-gradient(135deg, rgba(255,40,40,.18), rgba(5,5,8,.85));
  border: 1px solid rgba(255,80,80,.22);
  box-shadow: 0 14px 34px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  position: relative;
  overflow: hidden;
}
.page-home .wallet-pill::before{
  content: '';
  position: absolute;
  inset: -40% -60%;
  background: radial-gradient(circle at 25% 30%, rgba(255,90,90,.35), transparent 45%),
              radial-gradient(circle at 75% 70%, rgba(255,40,40,.22), transparent 55%);
  transform: rotate(-8deg);
  pointer-events:none;
}
.page-home .wallet-pill::after{
  content: '';
  position: absolute;
  top: -60%;
  left: -20%;
  width: 70%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transform: rotate(20deg);
  animation: ojiWalletSweep 6.8s linear infinite;
  pointer-events:none;
}
@keyframes ojiWalletSweep{
  0%{ transform: translateX(-80%) rotate(20deg); opacity:.0; }
  8%{ opacity: .55; }
  35%{ opacity: .0; }
  100%{ transform: translateX(220%) rotate(20deg); opacity: 0; }
}
.page-home .wallet-left{ display:flex; align-items:center; gap:8px; font-weight: 800; letter-spacing: .2px; position:relative; z-index:1; }
.page-home .wallet-left i{ color: rgba(255,120,120,.95); }
.page-home .wallet-amount{ font-weight: 900; white-space: nowrap; position:relative; z-index:1; }
.page-home .wallet-cta{ font-weight: 800; font-size: .86rem; opacity: .95; white-space: nowrap; position:relative; z-index:1; }

@media (max-width: 420px){
  .page-home .wallet-cta{ display:none; }
  .page-home .wallet-pill{ padding: 10px 10px; }
  .page-home .wallet-amount{ font-size: .92rem; }
}

/* Saldo page */
.saldo-wrap{ padding: 14px 0 70px; }
.saldo-card{
  background: rgba(10,10,16,.72);
  border: 1px solid rgba(255,80,80,.18);
  box-shadow: 0 18px 44px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  border-radius: 20px;
  padding: 16px;
}
.saldo-balance{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,80,80,.14);
}
.saldo-balance .label{ font-weight: 800; opacity: .95; }
.saldo-balance .amount{ font-weight: 900; font-size: 1.2rem; }
.pay-grid{ display:grid; grid-template-columns: 1fr; gap: 12px; margin-top: 14px; }
@media (min-width: 768px){ .pay-grid{ grid-template-columns: 1fr 1fr; } }
.pay-box{
  border-radius: 18px;
  background: rgba(0,0,0,.32);
  border: 1px solid rgba(255,80,80,.14);
  padding: 14px;
  position:relative;
}
.pay-top{ display:flex; align-items:center; gap:10px; }
.pay-logo{ width: 44px; height:44px; border-radius: 12px; display:grid; place-items:center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); }
.pay-logo img{ width: 30px; height: 30px; object-fit: contain; }
.pay-title{ font-weight: 900; }
.pay-number{ font-weight: 900; font-size: 1.05rem; margin-top: 10px; letter-spacing: .4px; }
.pay-sub{ font-size: .88rem; opacity: .92; }
.btn-wa-confirm{ width: 100%; border-radius: 16px; padding: 12px 14px; font-weight: 900; }

/* Topup list */
.topup-list{ display: grid; gap: 10px; }
.topup-item{
  border-radius: 18px;
  background: rgba(0,0,0,.32);
  border: 1px solid rgba(255,80,80,.14);
  padding: 12px 14px;
}



/* === Wallet / Topup: alert text readability (make text dark on light alerts) === */
.theme-gaming .alert.alert-success,
.theme-gaming .alert.alert-warning,
.theme-gaming .alert.alert-danger,
.theme-gaming .alert.alert-info{
  color: #111 !important;
}
.theme-gaming .alert.alert-success *,
.theme-gaming .alert.alert-warning *,
.theme-gaming .alert.alert-danger *,
.theme-gaming .alert.alert-info *{
  color: #111 !important;
}

/* === Wallet: copy buttons for payment numbers === */
.pay-number-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
}
.pay-number-row .pay-number{
  margin-top:0; /* moved to row */
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.pay-copy{
  white-space:nowrap;
  border-radius: 12px !important;
  padding: 6px 10px !important;
  color: #000 !important; /* teks Salin hitam */
}
.pay-copy:hover,
.pay-copy:focus{
  color: #000 !important;
}
@media (max-width: 420px){
  .pay-number-row{ gap:8px; }
  .pay-number-row .pay-number{ font-size: 1rem; }
  .pay-copy{ padding: 6px 9px !important; }
}


/* ==========================================================
   THEME CLARITY PATCH (Blue/Purple Light)
   Fix bentrok warna pada section Tim Kami + Wallet/Saldo
   ========================================================== */

.page-home .team-wrap{
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(239,246,255,.92)) !important;
  border: 1px solid rgba(124,58,237,.10);
  box-shadow: 0 18px 44px rgba(15,23,42,.08);
}

.page-home .team-wrap::before{
  background:
    radial-gradient(900px 380px at 20% 10%, rgba(124,58,237,.10), transparent 55%),
    radial-gradient(700px 320px at 85% 65%, rgba(147,197,253,.16), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.60), rgba(255,255,255,.92)) !important;
}

.page-home .team-card{
  background: rgba(255,255,255,.86) !important;
  color: rgba(15,23,42,.96) !important;
  border: 1px solid rgba(124,58,237,.14) !important;
  box-shadow: 0 14px 34px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.90) !important;
}

.page-home .team-card::after{
  background: radial-gradient(600px 220px at 40% 0%, rgba(124,58,237,.14), transparent 60%) !important;
  opacity: .85 !important;
}

.page-home .team-name{ color: rgba(15,23,42,.98) !important; }
.page-home .team-edu{ color: rgba(51,65,85,.92) !important; opacity: 1 !important; }

.page-home .team-role{
  background: rgba(124,58,237,.10) !important;
  border: 1px solid rgba(124,58,237,.22) !important;
  color: rgba(79,70,229,.95) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.90) !important;
}

.page-home .team-avatar{
  border-color: rgba(124,58,237,.35) !important;
  box-shadow: 0 12px 24px rgba(15,23,42,.12), 0 0 0 6px rgba(124,58,237,.08) !important;
  background: rgba(255,255,255,.92);
}

/* Wallet pill (Home) -> ikut tema biru/ungu & teks jelas */
.page-home .wallet-pill{
  color: rgba(15,23,42,.96) !important;
  background: linear-gradient(135deg, rgba(124,58,237,.14), rgba(147,197,253,.22) 52%, rgba(79,70,229,.14)) !important;
  border: 1px solid rgba(124,58,237,.16) !important;
  box-shadow: 0 12px 30px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.85) !important;
}

.page-home .wallet-pill::before{
  background: radial-gradient(circle at 25% 30%, rgba(124,58,237,.20), transparent 45%),
              radial-gradient(circle at 75% 70%, rgba(147,197,253,.22), transparent 55%) !important;
}

.page-home .wallet-left,
.page-home .wallet-amt,
.page-home .wallet-amount{
  color: rgba(15,23,42,.92) !important;
}

.page-home .wallet-left i{
  color: rgba(124,58,237,.95) !important;
}

.page-home .wallet-cta{
  padding: 6px 10px !important;
  border-radius: 999px !important;
  background: rgba(79,70,229,.10) !important;
  border: 1px solid rgba(79,70,229,.16) !important;
  color: rgba(79,70,229,.95) !important;
}

/* Desktop: sembunyikan CTA "Isi saldo" supaya angka saldo pindah ke kanan (tidak di tengah) */
@media (min-width: 992px){
  .page-home .wallet-cta{ display:none !important; }
  .page-home .wallet-pill{ justify-content: space-between !important; }
  .page-home .wallet-amt,
  .page-home .wallet-amount{ margin-left:auto !important; }
}

/* Saldo page cards -> light */
.saldo-card,
.pay-box,
.topup-item{
  background: rgba(255,255,255,.88) !important;
  color: rgba(15,23,42,.96) !important;
  border: 1px solid rgba(124,58,237,.14) !important;
  box-shadow: 0 14px 34px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.85) !important;
}

.saldo-balance{
  background: rgba(124,58,237,.08) !important;
  border: 1px solid rgba(124,58,237,.12) !important;
}

.pay-logo{
  background: rgba(124,58,237,.08) !important;
  border: 1px solid rgba(124,58,237,.12) !important;
}

/* ==========================================================
   FORCE LIGHT SURFACES (White)
   Request: ganti area berwarna hitam/dark jadi putih,
   TANPA mengubah warna teks.
   ========================================================== */

/* Team cards: pastikan tidak ada background gelap */
.theme-gaming.page-home .team-wrap::before{
  background:
    radial-gradient(900px 380px at 20% 10%, rgba(124,58,237,.10), transparent 55%),
    radial-gradient(700px 320px at 85% 65%, rgba(147,197,253,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.96)) !important;
}

.theme-gaming.page-home .team-card{
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(124,58,237,.14) !important;
  box-shadow: 0 14px 34px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.92) !important;
}

.theme-gaming.page-home .team-card::after{
  background: radial-gradient(600px 220px at 40% 0%, rgba(124,58,237,.16), transparent 62%) !important;
  opacity: .9 !important;
}

.theme-gaming.page-home .team-avatar{
  border-color: rgba(124,58,237,.30) !important;
  box-shadow: 0 12px 24px rgba(15,23,42,.12), 0 0 0 6px rgba(124,58,237,.08) !important;
}

.theme-gaming.page-home .team-role{
  background: rgba(124,58,237,.10) !important;
  border-color: rgba(124,58,237,.22) !important;
}

/* Home search bar: hilangkan panel gelap */
.theme-gaming.page-home .home-search-bar{
  background: rgba(255,255,255,.92) !important;
  border-bottom: 1px solid rgba(124,58,237,.10) !important;
  box-shadow: 0 10px 24px rgba(15,23,42,.06) !important;
}

/* Panel umum yang sebelumnya dark (jaga kompatibilitas) */
.theme-gaming .card,
.theme-gaming .panel,
.theme-gaming .glass,
.theme-gaming .saldo-card,
.theme-gaming .pay-box,
.theme-gaming .topup-item{
  background: rgba(255,255,255,.92) !important;
}

/* ==========================================================
   PROFILE / AKUN (PUBLIC) - LIGHT SURFACES + HIGH CONTRAST
   Tujuan: background akun tidak gelap dan teks terbaca jelas
   (footer/bottom-nav tidak diubah)
   ========================================================== */

.theme-gaming .profile-panel{
  /* Putih solid + shadow agar teks selalu jelas */
  background: #ffffff !important;
  color: rgba(15,23,42,.96) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  box-shadow: 0 18px 55px rgba(2,6,23,.12) !important;
  backdrop-filter: none !important;
}
.theme-gaming .profile-panel::before{
  /* matikan glow/shape agar tidak bentrok */
  display: none !important;
}

.theme-gaming .profile-badge{
  background: rgba(124,58,237,.10) !important;
  border-color: rgba(124,58,237,.18) !important;
  color: rgba(15,23,42,.92) !important;
}

/* Avatar card */
.theme-gaming .profile-avatar,
.theme-gaming .profile-avatar--xl{
  background: rgba(255,255,255,.86) !important;
  border-color: rgba(124,58,237,.22) !important;
  box-shadow: 0 14px 28px rgba(15,23,42,.10), 0 0 0 5px rgba(124,58,237,.06) !important;
}
.theme-gaming .profile-avatar-fallback{
  color: rgba(79,70,229,.95) !important;
  background:
    radial-gradient(110px 80px at 30% 20%, rgba(124,58,237,.16), transparent 60%),
    rgba(255,255,255,.90) !important;
}

/* Info blocks */
.theme-gaming .profile-info-item,
.theme-gaming .profile-field,
.theme-gaming .profile-avatar-edit{
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(124,58,237,.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95) !important;
}

.theme-gaming .pi-icon{
  background:
    radial-gradient(70px 60px at 30% 20%, rgba(124,58,237,.18), transparent 60%),
    rgba(255,255,255,.92) !important;
  border-color: rgba(124,58,237,.18) !important;
  box-shadow: 0 10px 20px rgba(15,23,42,.10) !important;
  color: rgba(79,70,229,.95) !important;
}

/* Pastikan teks kecil tetap terbaca */
.theme-gaming .profile-email,
.theme-gaming .pi-label{
  color: rgba(51,65,85,.85) !important;
  opacity: 1 !important;
}

/* ==========================================================
   PROFILE / AKUN - WHITE CARDS + BLACK TEXT (EXTRA CONTRAST)
   Request: bg shape putih + shadow, teks hitam agar tidak bentrok
   ========================================================== */

/* Judul section jangan putih (biar kebaca di panel putih) */
.theme-gaming .profile-section-title{
  color: rgba(15,23,42,.92) !important;
  border-bottom: 1px solid rgba(15,23,42,.10) !important;
}

.theme-gaming .profile-divider{
  background: rgba(15,23,42,.10) !important;
}

/* Kartu "Pembelian Saya" (Domain/Hosting/Paket) */
.theme-gaming .profile-stat-card{
  background: rgba(255,255,255,.98) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  box-shadow: 0 14px 34px rgba(2,6,23,.12) !important;
}
.theme-gaming .profile-stat-card .psc-label{
  color: rgba(15,23,42,.78) !important;
}
.theme-gaming .profile-stat-card .psc-value{
  color: rgba(15,23,42,.96) !important;
}
/* Link biru yang jelas di permukaan putih */
.theme-gaming .profile-stat-card .psc-link{
  color: rgba(37,99,235,.98) !important;
}
.theme-gaming .profile-stat-card .psc-link:hover{
  color: rgba(29,78,216,.98) !important;
}

/* List paket (masa berlaku) dibuat putih & teks hitam */
.theme-gaming .subs-item{
  background: rgba(255,255,255,.98) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  box-shadow: 0 12px 28px rgba(2,6,23,.10) !important;
}
.theme-gaming .subs-item.is-expired{
  background: rgba(254,242,242,.98) !important;
  border-color: rgba(239,68,68,.25) !important;
}
.theme-gaming .subs-title{
  color: rgba(15,23,42,.96) !important;
}
.theme-gaming .subs-meta{
  color: rgba(51,65,85,.84) !important;
}
.theme-gaming .subs-countdown{
  color: rgba(15,23,42,.90) !important;
}
.theme-gaming .subs-item.is-expired .subs-countdown{
  color: rgba(185,28,28,.92) !important;
}


/* Tombol actions (akun): pastikan tetap kontras di panel putih */
.theme-gaming .profile-actions .btn-brand{ color: #fff !important; }
.theme-gaming .profile-actions .btn-outline-light{
  background: rgba(255,255,255,.96) !important;
  border-color: rgba(59,130,246,.22) !important;
  color: rgba(29,78,216,.95) !important;
}
.theme-gaming .profile-actions .btn-outline-light:hover{
  background: rgba(59,130,246,.08) !important;
}

/* Edit profil: input avatar & form jangan gelap */
.theme-gaming .profile-avatar-edit .form-control,
.theme-gaming .profile-card--form .form-control{
  background: rgba(255,255,255,.98) !important;
  border: 1px solid rgba(15,23,42,.12) !important;
  color: rgba(15,23,42,.96) !important;
}
.theme-gaming .profile-avatar-edit .form-control::placeholder,
.theme-gaming .profile-card--form .form-control::placeholder{
  color: rgba(100,116,139,.90) !important;
}
.theme-gaming .profile-avatar-edit .form-text{
  color: rgba(71,85,105,.86) !important;
  opacity: 1 !important;
}
/* =========================================
   HOME: SEARCH + SALDO IKUT SCROLL (TIDAK FIXED)
   - Search & saldo tidak lagi nempel (fixed) di bawah header
   - Saat scroll, elemen ini ikut terbawa ke atas dan hilang
   ========================================= */
.page-home .home-search-bar{
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: 2 !important;
  margin: 10px 0 12px !important;
}

/* Hapus kompensasi padding yang dulu dipakai untuk search bar fixed */
.page-home .user-content{
  padding-top: var(--header-offset) !important;
}
.page-home .user-content{
  padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important;
}


@media (min-width: 992px){
  .page-home .user-content{
    padding-top: calc(var(--header-offset) + var(--desktop-nav-height) + 14px) !important;
  }
}

/* =========================================
   HOME: PAKET TERBARU
   - Hanya 4 paket terbaru (server-side LIMIT 4)
   - Mobile/Android: berjejer kesamping + bisa digeser (touch swipe)
   ========================================= */
.page-home .latest-products{
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  overflow: visible;
}
.page-home .latest-item{ min-width: 0; }

/* tombol detail di kartu paket terbaru: pastikan teks putih */
.page-home .latest-products .btn-brand{
  color: #fff !important;
}

/* gambar paket terbaru bisa diklik (link) */
.page-home .product-thumb-link{
  display: block;
  text-decoration: none;
}

/* Alamat bisnis di bawah "Paket Terbaru" */
.page-home .biz-address{
  margin-top: 14px;
  margin-bottom: 14px; /* kasih jarak dari footer/bottom-nav */
}
.page-home .biz-address-card{
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(124,58,237,.18);
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .08);
}
.page-home .biz-address-title{
  font-weight: 800;
  font-size: 13px;
  margin-bottom: 6px;
  color: rgba(15,23,42,.9);
  display: flex;
  align-items: center;
  gap: 8px;
}
.page-home .biz-address-text{
  font-size: 13px;
  line-height: 1.35;
  color: rgba(15,23,42,.85);
}

.page-home .biz-address-ico{
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(99,102,241,.95); /* biru-ungu */
}
.page-home .biz-address-ico svg{ width: 18px; height: 18px; display:block; }

/* Video strip di bawah Alamat Bisnis (geser horizontal) */
.page-home .home-videos{
  margin-top: 12px;
  margin-bottom: 14px;
}
.page-home .home-videos-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 8px;
}
.page-home .home-videos-title{
  font-weight: 800;
  font-size: 14px;
  color: rgba(15,23,42,.92);
}
.page-home .home-videos-sub{
  font-size: 12px;
  color: rgba(15,23,42,.55);
}
.page-home .home-videos-row{
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 14px 12px;
  margin-left: -14px;
  margin-right: -14px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 14px;
  scroll-padding-right: 14px;
  touch-action: pan-x;
  scrollbar-width: none;
}
.page-home .home-videos-row::-webkit-scrollbar{ display:none; }
.page-home .home-video-item{
  flex: 0 0 auto;
  width: 280px;
  scroll-snap-align: start;
}
.page-home .home-video-card{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(124,58,237,.18);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .08);
  overflow: hidden;
}
.page-home .home-video-iframe{
  width: 100%;
  height: 100%;
  border: 0;
}
.page-home .home-video-media{
  width: 100%;
  display: block;
}
.page-home .home-video-cap{
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(15,23,42,.85);
}

@media (max-width: 991.98px){
  .page-home .latest-products{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-home .home-video-item{ width: 260px; }
}

@media (max-width: 575.98px){
  .page-home .latest-products{
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    overflow-x: auto;
    overflow-y: visible;
    padding: 2px 14px 12px;
    margin-left: -14px;
    margin-right: -14px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 14px;
    scroll-padding-right: 14px;
    touch-action: pan-x;
    scrollbar-width: none;
  }
  .page-home .latest-products::-webkit-scrollbar{ height: 0; }

  .page-home .latest-item{
    flex: 0 0 78%;
    min-width: 78%;
    max-width: 340px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
}


/* =========================
   TECH LOGOS (HOME)
   ========================= */
.page-home .tech-logos{
  margin-top: 12px;
  margin-bottom: 14px;
}
.page-home .tech-logos-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 8px;
}
.page-home .tech-logos-title{
  font-weight: 800;
  font-size: 14px;
  color: rgba(15,23,42,.92);
}
.page-home .tech-logos-sub{
  font-size: 12px;
  color: rgba(15,23,42,.55);
  margin-top: 2px;
}

.page-home .tech-logos-row{
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 14px 10px;
  margin-left: -14px;
  margin-right: -14px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 14px;
  scroll-padding-right: 14px;
  touch-action: pan-x;
  scrollbar-width: none;
}
.page-home .tech-logos-row::-webkit-scrollbar{ display:none; }

.page-home .tech-logo-item{
  flex: 0 0 auto;
  width: 112px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.page-home .tech-logo-card{
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(124,58,237,.16);
  border-radius: 18px;
  padding: 12px 10px;
  text-align: center;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
}
.page-home .tech-logo-ico{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(99,102,241,.10);
  color: var(--c, rgba(99,102,241,.95));
  font-size: 26px;
  line-height: 1;
}
.page-home .tech-logo-name{
  margin-top: 8px;
  font-weight: 800;
  font-size: 12px;
  color: rgba(15,23,42,.82);
  line-height: 1.15;
}

@media (max-width: 420px){
  .page-home .tech-logo-item{ width: 104px; }
}

/* ==========================================================
   PERF: Fix scroll jank on Android (mobile)

   Keluhan: scroll "macet" / patah-patah saat swipe di Android.
   Penyebab paling umum di CSS: background fixed besar +
   backdrop-filter (blur) + animasi yang jalan terus.
   Override di bawah ini hanya aktif di layar kecil / reduce-motion.
   ========================================================== */

@media (max-width: 768px), (prefers-reduced-motion: reduce) {
  /* Background shapes full-screen (fixed) sangat mahal saat scroll */
  body.has-bg-shapes::before,
  body.has-bg-shapes::after,
  body.theme-gaming.has-bg-shapes::before,
  body.theme-gaming.has-bg-shapes::after{
    content: none !important;
  }

  /* Matikan blur kaca (backdrop-filter) di komponen utama */
  .auth-card,
  .page-home .home-search-bar,
  .theme-gaming .bottom-nav,
  .page-home .cd-item,
  .page-home .promo-badge,
  .page-home .promo-close,
  .profile-panel,
  .profile-guest-card{
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* Stop animasi yang jalan terus (mengurangi repaint saat scroll) */
  .trust-card::before,
  .page-home .promo-urgent .cd-item,
  .theme-gaming .bottom-nav .nav-item.active i{
    animation: none !important;
  }

  /* Kurangi bayangan berat (lebih ringan untuk paint/composite) */
  .product-card,
  .trust-card,
  .page-home .cd-item,
  .page-home .tech-logo-card{
    box-shadow: 0 6px 14px rgba(2,6,23,.10) !important;
  }

  /* Filter drop-shadow kadang mahal di device low-end */
  .trust-avatar i{ filter: none !important; }
}

/* Optional: render offscreen cards lebih irit (Chrome/Android) */
@supports (content-visibility: auto) {
  .product-card,
  .trust-card{
    content-visibility: auto;
    contain-intrinsic-size: 320px 220px;
  }
}



/* ==========================================================
   PERF: Android scroll terasa "macet" saat swipe di area carousel
   Penyebab umum: `touch-action: pan-x;` di elemen overflow-x (carousel)
   -> Ini MEMBLOK vertical scroll kalau gesture dimulai di elemen tsb.
   Solusi: kembalikan ke default (auto) di perangkat sentuh / mobile.
   ========================================================== */
@media (hover: none) and (pointer: coarse) {
  .page-home .ads-strip,
  .page-home .home-videos-row,
  .page-home .latest-products,
  .page-home .tech-logos-row{
    touch-action: auto !important;
  }
  /* Scroll-snap mandatory kadang bikin terasa "nyangkut" di Android */
  .page-home .ads-strip,
  .page-home .home-videos-row,
  .page-home .latest-products,
  .page-home .tech-logos-row{
    scroll-snap-type: x proximity !important;
  }
  .page-home .latest-item,
  .page-home .tech-logo-item,
  .page-home .home-video-item{
    scroll-snap-stop: normal !important;
  }

  /* Filter blur besar pada promo card bisa bikin jank saat scroll */
  .page-home .promo-card::before,
  .page-home .promo-card::after{
    filter: none !important;
    opacity: .18 !important;
  }
}