:root{
  --bg:#0b0e14;
  --card:#111625;
  --muted:#a9b1c3;
  --text:#e9edf5;
  --brand:#2563eb;
  --brand-2:#2563eb;
  --danger:#ef4444;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:18px;
}

*{box-sizing:border-box} html,body{height:100%}
html,body{max-width:100%; overflow-x:hidden}
img,svg,video{max-width:100%; height:auto}

body{
  margin:0; font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(1200px 600px at 10% -10%, color-mix(in oklab, var(--brand) 22%, transparent), transparent),
    radial-gradient(900px 520px at 110% 0%, color-mix(in oklab, var(--brand-2) 18%, transparent), transparent),
    linear-gradient(180deg, #0b1224, #0a1020 40%, #0a1126);
  color:var(--text); line-height:1.6;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.08;
  background-image:
    linear-gradient(transparent 23px, rgba(255,255,255,.12) 24px),
    linear-gradient(90deg, transparent 23px, rgba(255,255,255,.12) 24px);
  background-size:24px 24px;
  mask-image: radial-gradient(1000px 600px at 50% -10%, black, transparent 70%);
}

.container{width:min(1100px, 92vw); margin:0 auto}
.container.narrow{width:min(860px, 92vw)}
.row{display:flex; gap:12px}
.row.center{align-items:center}
.row.between{justify-content:space-between}
.row.gap{gap:8px}
.center{text-align:center}

a{color:#cdd9ff; text-decoration:none}
a:hover{text-decoration:underline}

/* Header */
.site-header{
  -webkit-backdrop-filter: blur(8px); /* eksplisit utk iOS */
  will-change: transform;
  transform: translateZ(0);
  background: rgba(11,14,20,.7); /* sedikit lebih solid mengurangi shimmer */
}
.brand{display:flex; align-items:center; gap:10px; font-weight:700}
.brand-badge{display:inline-grid; place-items:center; width:32px; height:32px; background:linear-gradient(135deg,var(--brand), #3b82f6); color:white; border-radius:10px; font-weight:800}
.main-nav {
  display: flex;
  gap: 12px;
}

.main-nav.hidden {
  display: none; /* dikontrol lewat JS */
}

@media (min-width:900px) {
  .main-nav {
    gap: 18px;
  }
}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid rgba(255,255,255,.12);
  background:#1a2134; padding:10px 14px; border-radius:12px; color:var(--text); font-weight:600; cursor:pointer; text-decoration:none; transition:.2s;}
.btn:hover{transform:translateY(-1px); box-shadow:var(--shadow)}
.btn.primary{background:linear-gradient(135deg,var(--brand), #3b82f6); border-color:transparent}
.btn.ghost{background:transparent}

/* Hero */
.hero{padding:56px 0 28px; border-bottom:1px solid rgba(255,255,255,.06)}
.hero h1{font-size:clamp(26px,4vw,40px); line-height:1.2; margin:0 0 6px}
.hero p{margin:0 0 18px; color:var(--muted)}

.promo-rail{margin:18px 0 10px}
.promo-track{display:grid; grid-auto-flow:column; grid-auto-columns:100%; overflow:hidden; scroll-snap-type:x mandatory; gap:10px; border-radius:16px}
.promo-card{position:relative; border-radius:16px; min-height:300px; padding:22px; display:grid; align-items:end; overflow:hidden;
  background: linear-gradient(135deg,var(--brand), #3b82f6); border:1px solid rgba(255,255,255,.08)}
.promo-card.alt{background: linear-gradient(135deg,#0ea5e9,#040ec3)}
.promo-card.pink{background: linear-gradient(135deg,#8b5cf6,#ec4899)}
.promo-card.dark{background: linear-gradient(135deg,#0b1224,#1e3a8a)}
.promo-copy .pill{display:inline-block; font-size:12px; padding:4px 8px; border-radius:999px; background:rgba(255,255,255,.15)}
.promo-copy h3{margin:.4rem 0 .2rem}
.promo-copy p{margin:0; color:#f3f4f6}
.dots{display:flex; gap:6px; justify-content:center; margin-top:10px}
.dot{width:8px; height:8px; border-radius:999px; background:#324064; border:none; cursor:pointer}
.dot.is-active{background:#8fa6ff}

/* Search */
.searchbar{max-width:560px; margin:12px auto 0; padding:0 6px; display:flex; gap:8px}
.searchbar input{flex:1; padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background:#0f1422; color:var(--text)}

/* Catalog */
.section{padding:36px 0}
.tabs{display:flex; gap:8px; margin:20px 0}
.tab{border:none; background:#141a2a; color:var(--text); padding:10px 12px; border-radius:12px; cursor:pointer}
.tab.is-active,.tab:hover{background:#1b2440; outline:2px solid rgba(255,255,255,.06)}
.grid{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px}
@media(max-width:360px){.grid{grid-template-columns:repeat(1, minmax(0,1fr))}}
@media(min-width:920px){.grid{grid-template-columns:repeat(3, 1fr)}}
@media(min-width:1180px){.grid{grid-template-columns:repeat(4, 1fr)}}

.card{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius); padding:16px; display:flex; gap:14px; align-items:center}
.catalog .card{flex-direction:column; align-items:flex-start; min-height:auto; gap:10px; padding:14px; transition:.2s}
.catalog .card:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
.card .logo{width:52px; height:52px; border-radius:12px; display:grid; place-items:center; font-size:24px}
.card .meta{flex:1}
.card .meta h3{margin:0 0 2px; font-size:16px}
.card .meta p{margin:0; color:var(--muted); font-size:13px}
.price{font-weight:800}
.badge{background:#1a2134; border:1px solid rgba(255,255,255,.12); padding:6px 10px; border-radius:999px}
.tiny{font-size:12px}
.muted{color:var(--muted)}

/* Modal */
.modal{position:fixed; inset:0; display:none; place-items:center}
.modal[aria-hidden="false"]{display:grid}
.modal-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.6);}
.modal-dialog{position:relative; width:min(680px, 92vw); max-height:86vh; background:#0f1422; border:1px solid rgba(255,255,255,.12); border-radius:20px; box-shadow:var(--shadow); display:flex; flex-direction:column}
.modal-close{position:absolute; top:10px; right:10px; background:transparent; border:none; color:var(--text); font-size:22px; cursor:pointer}
.modal-header{padding:16px 18px 0}
.modal-header p{margin:0 0 8px; color:var(--muted)}
.modal-body{padding:8px 18px 0; overflow:auto}
.modal-footer{padding:14px 18px 18px; display:flex; justify-content:flex-end; gap:10px; border-top:1px solid rgba(255,255,255,.06)}

/* Package list (full width manual) */
.package-list{display:grid; grid-template-columns:1fr; gap:10px; padding-bottom:12px}
.package-item{display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px; background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:12px; cursor:pointer; transition:.2s}
.package-item:hover{box-shadow:var(--shadow); transform:translateY(-1px)}
.package-item input{position:absolute; opacity:0; pointer-events:none}
.package-item .left{display:flex; align-items:center; gap:10px}
.package-item .title{font-weight:800}
.package-item .desc{font-size:12px; color:var(--muted)}
.package-item.is-selected{outline:2px solid color-mix(in oklab, var(--brand) 70%, transparent)}

/* Checkout / Pay / Success */
.checkout-card,.pay-box,.success-card{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius); padding:16px; margin:14px 0}
.form label{display:grid; gap:8px; margin:12px 0}
.form input,.form textarea{padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background:#0f1422; color:var(--text)}
.input-error{outline:2px solid var(--danger)}
.qris-box{display:grid; place-items:center; padding:12px; background:#0f1422; border-radius:12px; border:1px dashed rgba(255,255,255,.12); margin-bottom:6px}
.qris-box img{width:min(320px, 80vw); height:auto}
.big-check{font-size:52px; color:var(--brand-2)}
.success-summary{margin:10px 0; background:#0f1422; border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:10px 12px}

/* Footer */
.site-footer{padding:28px 0 40px; border-top:1px solid rgba(255,255,255,.06)}
.footer-grid{display:grid; grid-template-columns:repeat(1, 1fr); gap:18px; column-gap:28px}
@media(min-width:760px){.footer-grid{grid-template-columns:repeat(4, 1fr)}}
.site-footer h3,.site-footer h4{margin:.2rem 0 .8rem}
.site-footer .copyright{text-align:center; margin-top:14px}

/* WA Float */
.wa-float{position:fixed; right:18px; bottom:18px; z-index:60; width:56px; height:56px; border-radius:999px; display:grid; place-items:center; background:#25D366; color:#fff; box-shadow:var(--shadow)}
.wa-float svg{width:28px; height:28px; fill:#fff}

/* ===== Polishing: headings, cards, readability ===== */
h1{font-size:clamp(28px,4.4vw,42px); line-height:1.15; margin:12px 0 18px}
h2{font-size:clamp(22px,3.4vw,28px); margin:14px 0 10px}
h3{font-size:clamp(18px,2.6vw,22px); margin:10px 0 8px}
.section .container > p, .checkout-card p, .pay-box p{color:var(--muted)}

.checkout-card,.pay-box,.success-card{backdrop-filter: blur(6px)}
.checkout-card .row + .tiny, .pay-box .tiny{color:var(--muted)}

.kv{display:grid; grid-template-columns:auto 1fr; gap:6px 12px; align-items:center}
.kv .k{color:var(--muted)}
.kv .v{font-weight:700}

.total-xl{font-size:28px; font-weight:900; padding:8px 14px; border-radius:12px;
  background:#0f1422; border:1px solid rgba(255,255,255,.1); display:inline-block}

/* Pay method header look */
/* Method detail card (biar menonjol di atas) */
.method-detail{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10);
  border-left: 4px solid color-mix(in oklab, var(--brand) 60%, transparent);
  border-radius: var(--radius);
  padding: 14px;
  margin: 12px 0 14px;
  backdrop-filter: blur(6px);
}

/* sudah ada .method-detail h3 / .line / .label di file kamu — biarkan */


/* Success page styling */
.success-card{display:grid; justify-items:center; gap:6px}
.success-card h1{margin:4px 0 4px}
.success-card .total-xl{margin:6px 0 2px}
.success-summary .grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media(max-width:520px){.success-summary .grid{grid-template-columns:1fr}}

/* Payment method cards */
.pay-methods{display:grid; gap:10px; margin:10px 0 14px}
.method-item{display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10); cursor:pointer; transition:.18s}
.method-item:hover{transform:translateY(-1px); box-shadow:var(--shadow)}
.method-item input{appearance:none; width:18px; height:18px; border-radius:999px; border:2px solid #8fa6ff; box-shadow:inset 0 0 0 4px transparent; transition:.15s}
.method-item.is-selected input{box-shadow:inset 0 0 0 4px #8fa6ff}
.method-item.is-selected{outline:2px solid rgba(143,166,255,.45)}
.method-item .name{font-weight:800}
.method-item .meta{font-size:12px; color:var(--muted)}

.summary-top{display:grid; gap:6px}


/* Compact method grid */
.pay-methods{display:grid; gap:10px; margin:10px 0 14px; grid-template-columns:repeat(1, minmax(0,1fr))}
@media(min-width:620px){.pay-methods{grid-template-columns:repeat(2, minmax(0,1fr))}}
@media(min-width:980px){.pay-methods{grid-template-columns:repeat(3, minmax(0,1fr))}}
.method-item{padding:12px 16px; border-radius:14px; background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.10); display:flex; align-items:center; gap:10px}
.method-item .meta{display:none}
.method-item input{appearance:none; width:16px; height:16px; border-radius:999px; border:2px solid #8fa6ff; box-shadow:inset 0 0 0 4px transparent; transition:.15s}
.method-item.is-selected input{box-shadow:inset 0 0 0 4px #8fa6ff}
.method-item.is-selected{outline:2px solid rgba(143,166,255,.45)}

/* Summary card with bill rows inside */
.summary-top .bill-mini{display:grid; grid-template-columns:repeat(3, auto); gap:8px 18px; align-items:center; margin-top:6px}
.summary-top .bill-mini .cell{display:flex; gap:8px; align-items:center}
.summary-top .bill-mini .tag{background:#1a2134; border:1px solid rgba(255,255,255,.12); padding:4px 10px; border-radius:999px; font-size:12px; color:var(--muted)}
@media(max-width:520px){.summary-top .bill-mini{grid-template-columns:1fr; gap:6px}}

/* TAMPILKAN badge (timer) */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.btn.disabled{ opacity:.6; cursor:not-allowed; filter:grayscale(40%); }

.promo-track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:100%;
  overflow:auto;                  /* ← sebelumnya hidden */
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;         /* smooth */
  gap:10px;
  border-radius:16px;
  -webkit-overflow-scrolling:touch;
}
.promo-card{ scroll-snap-align:start; }
.promo-track::-webkit-scrollbar{ display:none; }

.promo-track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:100%;
  overflow:auto;                 /* ← dari hidden ke auto */
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;        /* smooth scroll */
  gap:10px;
  border-radius:16px;
  -webkit-overflow-scrolling:touch;
}
.promo-card{ scroll-snap-align:start; }
.promo-track::-webkit-scrollbar{ display:none; }

/* gambar slide full-bleed */
.promo-card{ position:relative; overflow:hidden; }
.promo-img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:.9;
}
.promo-card .promo-copy{ position:relative; z-index:1; }
.promo-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 40%, rgba(0,0,0,.35));
}

/* track bisa swipe + smooth (override yg lama) */
.promo-track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:100%;
  overflow:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  gap:10px; border-radius:16px;
  -webkit-overflow-scrolling:touch;
}
.promo-card{ scroll-snap-align:start; }
.promo-track::-webkit-scrollbar{ display:none; }

.tabs{
  display:flex;
  gap:8px;
  margin:20px 0;
  justify-content:center;   /* <-- bikin ke tengah */
  flex-wrap:wrap;           /* biar rapi di HP */
}

.card .logo{
  width:52px; height:52px;
  border-radius:12px;
  background:#1b2440;
  display:grid; place-items:center;
  color:#fff; font-weight:700;
  overflow:hidden;       /* penting agar gambar nge-clip rapi */
}

.card .logo img{
  width:100%; height:100%;
  object-fit:cover;      /* gambar memenuhi kotak */
  display:block;
}

/* === POLISHING PACK (tempel di paling bawah styles.css) === */

/* 0) Mesh glow halus di background */
body::after{
  content:""; position:fixed; inset:-20% -10% -10% -10%; pointer-events:none;
  background:
    radial-gradient(60% 35% at 20% -10%, rgba(96,165,250,.22), transparent 60%),
    radial-gradient(45% 30% at 110% 10%,  rgba(34,197,94,.18), transparent 60%),
    radial-gradient(40% 35% at 50% 110%, rgba(236,72,153,.12), transparent 60%);
  filter: blur(32px); opacity:.55; animation: meshShift 18s ease-in-out infinite;
}
@keyframes meshShift{0%,100%{transform:translateY(0)}50%{transform:translateY(-2%)}}

/* 1) Tombol primary: glow saat hover */
.btn.primary{position:relative; isolation:isolate}
.btn.primary::before{
  content:""; position:absolute; inset:-3px; border-radius:inherit;
  background:linear-gradient(120deg,#2563eb,#60a5fa,#8b5cf6,#22d3ee);
  filter:blur(14px); opacity:0; transition:.25s; z-index:-1;
}
.btn.primary:hover::before{opacity:.9}

/* 2) Tabs: center + underline anim */
.tabs{justify-content:center; flex-wrap:wrap}
.tab{position:relative; transition:.2s}
.tab::after{
  content:""; position:absolute; left:12px; right:12px; bottom:-6px; height:3px;
  background:linear-gradient(90deg,#60a5fa,#8b5cf6,#22d3ee);
  border-radius:999px; transform:scaleX(.3); opacity:0; transition:.25s;
}
.tab:hover::after,.tab.is-active::after{transform:scaleX(1); opacity:1}

/* 3) Kartu produk: ring gradasi + hover lift */
.card{position:relative; transition:.22s}
.card:hover{transform:translateY(-3px) scale(1.01); box-shadow:var(--shadow)}
.card::before{
  content:""; position:absolute; inset:0; padding:1px; border-radius:inherit;
  background:linear-gradient(135deg,rgba(143,166,255,.4),rgba(34,197,94,.2));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:exclude; opacity:.6; pointer-events:none;
}
.card:hover::before{opacity:1}

/* Avatar logo produk pakai gambar: glow lembut */
.card .logo{background:#0f1422; border:1px solid rgba(255,255,255,.08); overflow:hidden; position:relative}
.card .logo::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit;
  background:linear-gradient(135deg,#60a5fa,#8b5cf6,#22d3ee);
  filter:blur(8px); opacity:.35; z-index:-1;
}

/* 4) Promo slider: depth + parallax halus */
.promo-card{transition:transform .5s ease, box-shadow .5s ease}
.promo-card:hover{transform:translateY(-4px) scale(1.01); box-shadow:var(--shadow)}
.promo-img{transition:transform .6s ease, opacity .3s ease}
.promo-card:hover .promo-img{transform:scale(1.06)}
.promo-copy{animation:floatIn .6s ease both}
@keyframes floatIn{from{transform:translateY(6px);opacity:0}to{transform:none;opacity:1}}

/* Dots interaktif */
.dot{transition:transform .2s, background-color .2s, box-shadow .2s}
.dot:hover{transform:scale(1.25); box-shadow:0 0 0 6px rgba(143,166,255,.18)}
.dot.is-active{background:#8fa6ff; box-shadow:0 0 0 6px rgba(143,166,255,.16)}

/* 5) Modal: pop-in */
.modal[aria-hidden="false"] .modal-dialog{animation:pop .18s ease-out}
@keyframes pop{from{transform:translateY(12px) scale(.98);opacity:0}to{transform:none;opacity:1}}

/* 6) Timer badge: pulse */
#timer.badge{animation:pulse 2.5s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(96,165,250,0)}50%{box-shadow:0 0 0 8px rgba(96,165,250,.12)}}

/* 7) WA float: bob kecil biar hidup */
.wa-float{animation:bob 6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* === THEME: GOLD (kuning) =================================== */
:root{
  --gold: #fbbf24;            /* amber-400 */
  --gold-2: #fde68a;          /* amber-200 */
  --gold-text: #3d2b00;       /* kontras teks di atas gold */
}

/* Tekan semua garis-bawah link (termasuk hover/active/focus) */
a, a:hover, a:active, a:focus { text-decoration: none; }

/* Aksesibilitas: tetap ada focus ring yang cantik */
a:focus-visible, .btn:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--brand) 60%, white 0%);
  outline-offset: 2px;
}

/* Badges / Pills / Tags varian GOLD (bisa dipakai di mana saja) */
.badge.gold, .pill.gold, .tag.gold{
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: var(--gold-text);
  border: 1px solid color-mix(in oklab, var(--gold) 50%, #000 0%);
  box-shadow: 0 6px 18px rgba(251,191,36,.25);
}

/* Tombol varian GOLD */
.btn.gold{
  background: linear-gradient(135deg, #f59e0b, var(--gold));
  color:#1a1200; border-color: transparent;
}
.btn.gold:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(251,191,36,.35);
}

/* Aksen link/menu tanpa underline (Produk, Cek Transaksi, dll) */
.nav-accent{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  transition:.18s;
}
.nav-accent:hover{
  background: linear-gradient(135deg, rgba(37,99,235,.28), rgba(99,102,241,.22));
  box-shadow: var(--shadow);
}
.nav-accent.gold{
  background: linear-gradient(135deg, rgba(47, 36, 251, 0.25), rgba(59, 49, 244, 0.2));
  border-color: rgba(79, 36, 251, 0.45);
}
.nav-accent.gold:hover{
  background: linear-gradient(135deg, rgba(26, 29, 250, 0.35), rgba(71, 32, 245, 0.28));
  box-shadow: 0 10px 26px rgba(63, 33, 255, 0.28);
}

/* Badge/pill kecil untuk daftar produk (mis. “Termurah”, “Best Seller”) */
.card .pill.gold, .card .badge.gold, .catalog .tag.gold{
  font-size:12px; padding:4px 10px; border-radius:999px;
}

/* Promo slider: tambahkan varian kartu GOLD (opsional) */
.promo-card.gold{
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  color: var(--gold-text);
}
.promo-card.gold .pill{ background: rgba(255,255,255,.25); color: var(--gold-text); }

/* Pastikan link di header/footer juga tak bergaris bawah */
.site-header a, .site-footer a{ text-decoration: none; }
.site-header a:hover, .site-footer a:hover{ text-decoration: none; }

/* (bonus) icon/link halus saat hover tanpa underline */
.main-nav a{ transition: .18s; }
.main-nav a:hover{ filter: brightness(1.08); }

/* pastikan tabs bisa diklik */
.tabs{ position: relative; z-index: 2; pointer-events: auto; }
.tab { pointer-events: auto; }

/* kalau pseudo overlay slider menutupi area di bawahnya */
.promo-card::after{ pointer-events: none; }

/* pastikan tabs bisa diklik */
.tabs{ position: relative; z-index: 3; pointer-events: auto; }
.tab { pointer-events: auto; }
/* overlay slider tidak memblokir klik di bawahnya */
.promo-card::after{ pointer-events: none; }

.hero .container > h1,
.hero .container > p { display:none; }

/* ===================== KEUNGGULAN KAMI ===================== */
.features-block{ padding:14px 0 8px; }
.features-block h2{ margin:4px 0 12px; }

.feature-grid{
  display:grid; gap:12px;
  grid-template-columns:repeat(4,1fr);
}
@media(max-width:1000px){ .feature-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .feature-grid{ grid-template-columns:1fr; } }

.feature-card{
  position:relative; overflow:hidden; transition:.2s;
  display:flex; gap:12px; align-items:flex-start; padding:14px;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
}

/* glow biru lembut di dalam kartu */
.feature-card::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background:
    radial-gradient(600px 180px at -10% -20%, rgba(96,165,250,.25), transparent 60%),
    radial-gradient(420px 160px at 120% 0%, rgba(139,92,246,.22), transparent 60%);
  filter: blur(8px); opacity:.55;
}
.feature-card:hover{ transform:translateY(-3px); }

.fx-icon{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  font-size:22px; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
}

.feature-card h4{ margin:2px 0 2px; }
.feature-card p{ margin:0; color:var(--muted); font-size:14px; }

/* Sembunyikan judul & paragraf di hero (opsional jika tak hapus HTML) */
.hero .container > h1,
.hero .container > p { display:none; }

/* Rapetin area atas tanpa menghapus hero */
.hero{
  padding: 6px 0 0 !important; /* dari 36px jadi 6px */
  margin: 0 !important;
  min-height: 0 !important;
  gap: 8px;
}

/* Sembunyikan judul & paragraf hero saja (bukan hapus section) */
.hero-left, .hero h1, .hero p{ display:none !important; }

/* Naikkan slider promo mepet ke navbar */
.promo-rail{ margin-top: 8px !important; }   /* kalau mau lebih nempel: 0px atau -4px */

/* Rounded & klik aman */
.promo-track{ border-radius:16px; }
.promo-card{ border-radius:16px; }
.promo-card::after{ pointer-events:none; }

/* Pastikan tab kategori di bawahnya tidak ketutupan overlay */
.tabs{ position:relative; z-index:3; }

/* Panjangin bar header ke bawah sedikit */
.site-header{ padding-bottom: 28px; }   /* ubah 20–40px sesuai selera */
@media (max-width: 768px){
  .site-header{ padding-bottom: 18px; }
}

/* Pertahankan slider tetap rapat */
.promo-rail{ margin-top: 8px !important; } /* 0–12px bebas */

/* Turunkan isi header sedikit & tetap center */
:root{
  --header-pt: 10px;    /* jarak atas */
  --header-pb: 14px;    /* jarak bawah, bikin bar terasa lebih tebal */
}

.site-header{                     /* header bar-nya */
  padding-top: var(--header-pt);
  padding-bottom: var(--header-pb);
}

.site-header .container{          /* isi header: brand | nav | tombol */
  display:flex;
  align-items:center;             /* center vertikal */
  min-height:64px;                /* tinggi minimal agar rapi */
}

.site-header .brand,
.site-header .main-nav,
.site-header .btn{ align-self:center; }  /* jaga tetap sejajar */

/* Tampilkan hanya di mobile */
.sm-only{ display:inline-flex; }
@media (min-width:900px){
  .sm-only{ display:none; }
}

/* Stop overscroll/bounce global (atas & bawah) */
html, body{
  height:100%;
  overflow-y:auto;
  overscroll-behavior: none;        /* hentikan overscroll & pull-to-refresh */
  -ms-scroll-chaining: none;        /* legacy Edge */
}

/* Hindari “scroll chaining” dari scroller di dalam halaman */
.promo-track,
.modal .content,
#productGrid,
.footer-grid{
  overscroll-behavior: contain;
}

/* ===================== CARA ORDER ===================== */
.order-steps{ padding:16px 0 8px; }
.order-steps h2{ margin:2px 0 12px; }

.steps-grid{
  display:grid; gap:12px;
  grid-template-columns: repeat(5, 1fr);
}
@media(max-width:1100px){ .steps-grid{ grid-template-columns: repeat(3, 1fr); } }
@media(max-width:680px){ .steps-grid{ grid-template-columns: 1fr; } }

.step-card{
  position:relative; overflow:hidden; padding:14px; border-radius:16px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
  transition: .22s ease;
}
.step-card:hover{ transform: translateY(-3px); }

.step-card::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background:
    radial-gradient(500px 140px at -10% -10%, rgba(96,165,250,.28), transparent 60%),
    radial-gradient(420px 160px at 120% 0%, rgba(139,92,246,.24), transparent 60%);
  filter: blur(10px); opacity:.55;
}

.step-num{
  width:32px; height:32px; border-radius:10px;
  display:grid; place-items:center; font-weight:700;
  background: linear-gradient(135deg, #5b8cff, #7a5cff);
  color:#fff; margin-bottom:8px;
  box-shadow: 0 8px 20px rgba(91,140,255,.35);
}

.step-cta{ gap:10px; margin-top:12px; }
.bullet-notes{ margin:10px 0 0; }
.bullet-notes li{ margin:2px 0; }

/* Link “Cek Transaksi” di langkah 5 tanpa underline dan beraksen */
.order-steps .nav-accent{ padding:2px 8px; border-radius:999px; }

/* Brand dengan logo gambar */
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand-logo{
  height:28px; width:auto; display:block;
  border-radius:8px;           /* bulet halus; hapus jika tak perlu */
}
.brand-name{ font-weight:700; letter-spacing:.2px; }

/* Responsive: kecilkan sedikit di mobile */
@media (max-width:900px){
  .brand-logo{ height:24px; }
}

/* Container kecil untuk ikon + teks */
.fx-item{
  display:flex; align-items:flex-start; gap:12px;
  padding:12px; border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10);
}

/* Kotak ikon dengan glow biru */
.icon{
  width:42px; height:42px; border-radius:12px;
  display:grid; place-items:center; position:relative; overflow:hidden;
  background:#0f1422; border:1px solid rgba(255,255,255,.12);
}
.icon-electric svg{
  width:22px; height:22px; stroke:#60a5fa; fill:none;
  /* glow biru */
  filter: drop-shadow(0 0 6px rgba(96,165,250,.65));
  animation: electricPulse 2.2s ease-in-out infinite;
}
/* cincin RGB halus mengitari ikon (opsional) */
.icon-electric::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit; z-index:-1;
  background: conic-gradient(from 0deg,
    #7dd3fc, #60a5fa, #8b5cf6, #22d3ee, #7dd3fc);
  filter: blur(8px); opacity:.28; animation: spin 8s linear infinite;
}

/* Varian inline (untuk di dalam judul/teks) */
.icon-inline{ display:inline-grid; place-items:center; width:1.05em; height:1.05em; }
.icon-inline svg{ width:1em; height:1em; stroke:#60a5fa; vertical-align:middle;
  filter: drop-shadow(0 0 5px rgba(96,165,250,.55)); }

/* Animasi */
@keyframes electricPulse{
  0%,100%{ filter: drop-shadow(0 0 6px rgba(96,165,250,.55)); }
  50%    { filter: drop-shadow(0 0 12px rgba(96,165,250,.85)); }
}
@keyframes spin{ to{ transform: rotate(360deg); } }

/* Typografi samping ikon */
.fx-copy h4{ margin:.15rem 0 .15rem; }
.fx-copy p{ margin:0; color:var(--muted); font-size:14px; }

/* ===== Header mobile tuning ===== */
@media (max-width: 600px){
  .site-header { padding: 8px 0; }                 /* bar-nya sedikit lebih tebal */
  .site-header .container { 
    padding-inline: 12px;                           /* jarak kiri–kanan */
    gap: 10px;                                      /* jarak antar elemen */
    align-items: center;
  }

  /* Brand (logo + teks) lebih kecil */
  .brand { gap: 6px; }
  .brand-logo { height: 18px; }                     /* semula 24–28px */
  .brand-name { font-size: 14px; line-height: 1.1; }

  /* Tombol/Chip di header diperkecil */
  .nav-accent{                                      /* "Cek Transaksi" mobile */
    padding: 6px 10px; 
    font-size: 12.5px; 
    border-radius: 10px;
  }
  .btn{ padding: 8px 10px; font-size: 13px; border-radius: 12px; line-height: 1.15; }
  .btn.primary{ padding: 10px 12px; font-weight: 600; } /* "Mulai Belanja" */
  .btn svg, .btn i { width: 16px; height: 16px; margin-right: 6px; } /* ikon petir kecil */

  /* Rapikan agar tidak mentok layar dan tidak saling dorong */
  .site-header .container > * { min-width: 0; }
  .brand, .nav-accent, .btn { white-space: nowrap; }
}

/* === Modal paket harus di atas segalanya === */
#packageModal,
.modal{                          /* sesuaikan dgn kelas modal kamu */
  position: fixed;
  inset: 0;
  z-index: 10000;                /* > dari elemen lain (tabs/dots/slider) */
  isolation: isolate;            /* buat stacking context sendiri */
}
.modal .modal-dialog,
#packageModal .modal-dialog{
  position: relative;
  z-index: 10001;                /* konten modal di atas backdrop */
}

/* backdrop opsional (kalau belum ada) */
.modal .backdrop,
#packageModal .backdrop{
  position: absolute; inset: 0;
  background: rgba(8,12,24,.55);
  backdrop-filter: blur(2px);
}

/* Saat modal terbuka: jangan bisa klik yg di belakang */
body.is-modal-open .promo-rail,
body.is-modal-open .tabs,
body.is-modal-open #productGrid{
  pointer-events: none !important;
}

/* Tabs tetap boleh diklik saat tidak ada modal */
.tabs{ position: relative; z-index: 3; }

/* === FIX: Android putih & bounce putih di tepi === */

/* 1) Fallback warna solid untuk html & body (dipakai juga saat bounce) */
html{ background-color:#0b0e14; }   /* root bg saat rubber-band */
body{ background-color:#0b0e14; }   /* fallback kalau color-mix gagal */

/* 2) Kurangi efek bounce putih (Android/Chrome) tanpa matikan pull-to-refresh */
html, body{ overscroll-behavior: contain; } /* atau: overscroll-behavior-y: contain; */

/* 3) Fallback gradient jika browser tidak support color-mix/oklab */
@supports not (background: color-mix(in oklab, #000 10%, #fff)){
  body{
    background: linear-gradient(180deg, #0b1224, #0a1020 40%, #0a1126);
  }
}

/* 4) Di mobile, jangan pakai layer fixed di atas (mengurangi flicker iOS) */
@media (max-width: 820px){
  body::before{ position:absolute; } /* dari fixed -> absolute */
}

/* === Header mobile spacing + blur fix === */
.site-header{
  background: rgba(11,14,20,.65);
  -webkit-backdrop-filter: blur(8px); /* iOS */
  backdrop-filter: blur(8px);
}

@media (max-width: 480px){
  .site-header .container{
    padding-inline: 16px;   /* jarak kiri–kanan biar ga mepet */
    gap: 12px;              /* jarak antar brand, tombol, dsb */
    align-items: center;
  }

  /* Brand sedikit diperkecil supaya muat rapi */
  .brand{ gap: 8px; }
  .brand-logo{ height: 20px; }
  .brand-name{ font-size: 15px; line-height: 1.1; }

  /* Chip "Cek Transaksi" & tombol utama dipadatkan sedikit */
  .nav-accent{ padding: 8px 10px; font-size: 13px; border-radius: 12px; line-height: 1.15; }
  .btn.primary{ padding: 10px 12px; font-weight: 600; }
  .btn svg, .btn i{ width: 16px; height: 16px; margin-right: 6px; } /* ikon petir */
  
  /* Hindari saling dorong saat layar sempit */
  .site-header .container > *{ min-width: 0; }
  .brand, .nav-accent, .btn{ white-space: nowrap; }
}

/* Opsional: layar sangat sempit (<360px), kecilkan lagi sedikit */
@media (max-width: 360px){
  .brand-name{ font-size: 14px; }
  .nav-accent{ padding: 7px 9px; }
  .btn.primary{ padding: 9px 11px; }
}

/* Mobile: sembunyikan desktop-nav + beri jarak header */
@media (max-width: 899.98px){
  .main-nav{ display:none !important; }
  .site-header .container{ display:flex; align-items:center; gap:12px; }
  .site-header .btn.ghost.sm-only{ margin-right:8px; }
}

/* Desktop: tampilkan desktop-nav, sembunyikan tombol mobile */
@media (min-width:900px){
  .main-nav{ display:flex; gap:18px; }
  .site-header .btn.ghost.sm-only{ display:none !important; }
}

/* === HEADER: Mobile hanya 2 tombol (Cek & Belanja) === */
@media (max-width: 899.98px){
  /* Sembunyikan menu desktop (Produk/Cara Order/FAQ) */
  .main-nav{ display:none !important; }

  /* Tata letak header + jarak tombol */
  .site-header .container{ display:flex; align-items:center; gap:12px; }
  .site-header .btn.ghost.sm-only{ margin-right:8px; } /* jarak Cek vs Belanja */
}

/* Desktop normal */
@media (min-width:900px){
  .main-nav{ display:flex; gap:18px; }                 /* tampilkan menu lengkap */
  .site-header .btn.ghost.sm-only{ display:none !important; } /* tombol Cek (mobile) disembunyikan */
}

/* Opsional: layar HP yang sangat kecil agar tidak saling dorong */
@media (max-width: 380px){
  .brand-name{ display:none; }  /* kalau perlu, sembunyikan teks 'NavaDigital', logonya tetap tampil */
}

/* === FIX v2: Mobile spacing, prevent overlap === */
@media (max-width: 899.98px){
  .main-nav{ display:none !important; }                 /* hide menu desktop */
  .site-header .container{ display:flex; align-items:center; gap:8px; }

  /* Bebasin ruang di HP */
  .site-header .brand-name{ display:none; }             /* logo tetap tampil */

  /* Jangan biarkan tombol menyusut/nabrak */
  .site-header .btn{ flex-shrink:0; white-space:nowrap; }

  /* Dorong Cek Transaksi ke kanan + beri jarak dengan Belanja */
  .site-header .btn.ghost.sm-only{ margin-left:auto; margin-right:8px; }
  .site-header .btn.primary{ margin-left:0; }
}

@media (min-width:900px){
  .main-nav{ display:flex; gap:18px; }
  .site-header .btn.ghost.sm-only{ display:none !important; }
}

.card.fullimg {
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow);
}
.card.fullimg img {
  display: block;
  width: 100%;
  height: 240px;       /* sesuaikan tinggi */
  object-fit: cover;   /* biar isi gambar cover */
}

.card.fullimg {
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow);
}

.card.fullimg img {
  display: block;
  width: 100%;
  height: 240px;   /* sesuaikan tinggi */
  object-fit: cover;
}

.card.fullimg .overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 12px;
  background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,0));
  color: #fff;
}

.card.fullimg .overlay h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.card.fullimg .overlay .price {
  font-size: .9rem;
  opacity: .9;
}

/* grid 5 kolom */
.grid-5 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px,1fr));
  gap: 16px;
}

.card.fullimg {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow);
  background: rgba(255,255,255,.02);
  display: flex;
  flex-direction: column;
}

.card.fullimg img {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card.fullimg .overlay {
  padding: 10px;
  background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,0));
  color: #fff;
  position: relative;
  margin-top: -48px; /* naikkan overlay ke atas gambar */
}

.card.fullimg .overlay h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.card.fullimg .info {
  padding: 12px;
  text-align: center;
  display: grid;
  gap: 8px;
}
.card.fullimg .info .price {
  font-weight: 700;
}

.collapse-toggle{
  width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 12px; border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  color:#fff; font-weight:700;
}
.collapse-toggle .chev{ transition:transform .2s ease; }
.collapse-toggle[aria-expanded="true"] .chev{ transform:rotate(180deg); }
.collapsible[hidden]{ display:none; }

/* --- Panel Cek Area: kembali ke lebar normal (ikut .container) --- */
.cek-area .embed-card { border-radius: 18px; }   /* bukan full-width */
.cek-area .embed-wrap { height: 70vh; min-height: 460px; }

/* --- Accordion umum (tetap sama) --- */
.collapse-toggle{
  width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 12px; border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  color:#fff; font-weight:700;
}
.collapse-toggle .chev{ transition:transform .2s ease; opacity:.85; }
.collapse-toggle[aria-expanded="true"] .chev{ transform:rotate(180deg); }
.collapsible[hidden]{ display:none; }

/* --- Gambar panduan (Cara Unreg) --- */
.guide-img{
  width:100%; max-width:920px; height:auto; display:block; margin:12px auto;
  border-radius:14px; border:1px solid rgba(255,255,255,.08);
  background:#0f1422; object-fit:contain;
}
.unreg-buttons{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:12px; }

.collapse-toggle{
  width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 12px; border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  color:#fff; font-weight:700;
}
.collapse-toggle .chev{ transition:transform .2s ease; opacity:.85; }
.collapse-toggle[aria-expanded="true"] .chev{ transform:rotate(180deg); }
.collapsible[hidden]{ display:none; }
.embed-card{ border-radius:18px; }
.embed-wrap{ position:relative; width:100%; height:70vh; min-height:460px; }

.embed-card {
  background: #fff;               /* putih */
  border: 1px solid rgba(0,0,0,.1); /* garis tipis abu */
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.embed-wrap {
  position: relative;
  width: 100%;
  height: 70vh;
  min-height: 460px;
  background: #fff; /* putih */
}

.iframe-fix {
  filter: invert(1) hue-rotate(180deg);
}

/* di styles.css */
.iframe-fix {
  filter: invert(1) hue-rotate(180deg) brightness(1.05) contrast(1.05);
}

/* Rapetin jarak antar section cek-area & unreg */
.cek-area.section,
.unreg.section {
  margin-top: 10px;
  margin-bottom: 10px;
  padding-top: 0;
  padding-bottom: 0;
}

/* Jika .cek-area langsung diikuti .unreg, super rapat */
.cek-area.section + .unreg.section {
  margin-top: 5px;
}

.guide-img {
  width: 100%;
  max-width: 920px;
  height: auto;
  display: block;
  margin: 12px auto;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: #fff;
  object-fit: contain;
}

/* Galeri 2 kolom untuk panduan unreg */
.unreg-gallery{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:16px;
}
@media (max-width: 780px){
  .unreg-gallery{ grid-template-columns: 1fr; } /* jadi 1 kolom di HP */
}
.unreg-gallery figure{
  margin:0;
  background:#fff;               /* putih biar teks/gambar jelas */
  border:1px solid rgba(0,0,0,.12);
  border-radius:14px;
  overflow:hidden;
  box-shadow: var(--shadow);
}
.unreg-gallery img{
  width:100%; height:auto; display:block;
}
.unreg-gallery figcaption{
  padding:10px 12px; text-align:center; font-weight:600; color:#111;
}

/* Grid produk default: 5 kolom (desktop) */
#productGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

/* Responsif untuk mobile: 2 kolom */
@media (max-width: 768px) {
  #productGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Grid katalog 5 kolom di desktop, auto jadi 2 kolom di HP */
.grid-5{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(180px,1fr));
  gap:16px;
}

/* HP/tablet: paksa 2 kolom */
@media (max-width: 768px){
  .grid-5{
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Kartu full image seragam */
.card.fullimg{
  border-radius:16px; overflow:hidden;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;                    /* putih biar teks/harga jelas */
  box-shadow: var(--shadow);
  display:flex; flex-direction:column; height:100%;
}
.card.fullimg img{
  width:100%;
  height:180px;                       /* samakan tinggi gambar */
  object-fit:cover; display:block;
}
.card.fullimg .info{
  padding:12px; display:grid; gap:8px; text-align:center; margin-top:auto;
}
.card.fullimg .price{ font-weight:700; color:#111; }
.card.fullimg .btn{ width:100%; }

/* Desktop: SELALU 5 kolom */
.grid-5{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)); /* fixed 5 */
  gap:20px;
  align-items: stretch;
}

/* Tablet lebar */
@media (max-width: 1200px){
  .grid-5{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
/* Tablet */
@media (max-width: 992px){
  .grid-5{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
/* HP */
@media (max-width: 768px){
  .grid-5{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.card.fullimg{ height:100%; display:flex; flex-direction:column; }
.card.fullimg img{ height:200px; object-fit:cover; width:100%; display:block; }
.card.fullimg .info{ margin-top:auto; padding:12px; text-align:center; display:grid; gap:8px; }

/* Grid katalog 5 kolom */
.grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* selalu 5 kolom di desktop */
  gap: 18px;
  align-items: stretch;
}

/* Responsive turun kolom */
@media (max-width: 1200px) {
  .grid-5 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 992px) {
  .grid-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .grid-5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
  .grid-5 { grid-template-columns: 1fr; }
}

/* Samakan tinggi kartu */
.grid-5 .card.fullimg {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.grid-5 .card.fullimg img {
  width: 100%;
  height: 180px;         /* atur tinggi tetap */
  object-fit: cover;
  display: block;
}
.grid-5 .card.fullimg .info {
  margin-top: auto;
  padding: 12px;
  text-align: center;
}

.card.fullimg .info {
  margin-top: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;   /* <-- biar rata tengah */
  justify-content: center;
  gap: 8px;
  text-align: center;
}

.card.fullimg .price {
  font-weight: 700;
  color: #111;
  text-align: center;    /* pastikan teks harga di tengah */
  width: 100%;           /* biar teks rata tengah penuh */
}

.card.fullimg .btn {
  width: 100%;           /* tombol tetap penuh lebar kartu */
  max-width: 160px;      /* tapi kasih batas biar nggak terlalu panjang di mobile */
}

/* PAKSA RATA TENGAH DI KATALOG PAKETDATA */
.grid-5 .card.fullimg .info{
  display: grid !important;
  gap: 8px;
  padding: 12px;
  text-align: center !important;
  justify-items: center !important;   /* center isi grid */
  align-items: center !important;
}

.grid-5 .card.fullimg .price{
  margin: 0 !important;
  width: 100%;
  text-align: center !important;
}

.grid-5 .card.fullimg .btn{
  justify-self: center !important;    /* tombol ke tengah */
  width: 100%;
  max-width: 180px;                   /* biar proporsional di HP */
}

/* Pastikan gambar dan konten tidak “narik” ke kiri */
.grid-5 .card.fullimg img{
  display: block !important;
  width: 100% !important;
  height: 180px;                      /* sesuaikan kalau perlu */
  object-fit: cover;
}

/* Sedikit penyetelan untuk HP */
@media (max-width: 768px){
  .grid-5{
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-5 .card.fullimg .info{
    padding: 10px 8px !important;
  }
}

/* === PAKETDATA: paksa center === */
.grid-5 .card.fullimg {
  text-align: center !important;
}

.grid-5 .card.fullimg .info {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;      /* center horizontal */
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px !important;
}

/* Beberapa tema lama mendorong ke kiri via "div:last-child" — matikan di sini */
.grid-5 .card.fullimg > div:last-child {
  margin-left: 0 !important;
}

.grid-5 .card.fullimg .price {
  width: 100% !important;
  margin: 0 !important;
  text-align: center !important;
}

.grid-5 .card.fullimg .btn {
  display: inline-block !important;
  width: 100%;
  max-width: 180px;
  margin: 0 auto !important;           /* center tombol */
}

.pkg-name {
  font-weight: 600;
  font-size: 15px;
  text-align: center;
  margin-bottom: 4px;
}

/* Biar nama paket jelas, pakai warna hitam */
.pkg-name {
  font-weight: 600;
  font-size: 15px;
  text-align: center;
  margin-bottom: 4px;
  color: #000;   /* warna hitam */
}

/* ---- Promo banner: tampil utuh di mobile ---- */
@media (max-width: 520px) {
  /* bikin kartu lebih pendek + rasio cocok banner */
  .promo-card{
    min-height: 170px;          /* dulu lumayan tinggi */
    padding: 12px;
    aspect-ratio: 16 / 6;       /* ~baner lebar; aman utk 1599x586 */
  }

  /* tampilkan seluruh gambar (letterbox) */
  .promo-img{
    object-fit: contain;        /* override dari 'cover' */
    background: #0b1224;        /* warna dasar di belakang gambar */
    width: 100%;
    height: 100%;
  }

  /* teks rapih di tengah */
  .promo-card .promo-copy{
    text-align: center;
  }

  /* efek overlay lebih tipis agar gambar jelas */
  .promo-card::after{
    background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.25));
  }
}

/* ---- Promo banner: full box di mobile ---- */
@media (max-width: 520px) {
  .promo-card {
    aspect-ratio: 1599 / 586;   /* rasio asli banner */
    min-height: auto;           /* biar ikut rasio */
    padding: 0;                 /* hapus padding supaya full */
    border-radius: 12px;
    overflow: hidden;
  }

  .promo-img {
    object-fit: cover;          /* isi penuh kotak */
    width: 100%;
    height: 100%;
    display: block;
  }

  /* hilangkan overlay gelap kalau mau gambar jelas */
  .promo-card::after {
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.15));
  }

  /* teks promo di atas gambar tetap bisa */
  .promo-card .promo-copy {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 90%;
    color: #fff;
  }
}

/* Grid 5 kolom responsif untuk kartu Paket Data */
.grid-5 {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 760px) { .grid-5 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px){ .grid-5 { grid-template-columns: repeat(5, 1fr); } }

/* Samakan tampilan card fullimg dengan card produk utama */
.card.fullimg {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.06);  /* border putih transparan */
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--text); /* semua teks putih sesuai theme */
}

.card.fullimg .info {
  padding: 10px; /* kasih jarak biar rapih */
}

.card.fullimg .pkg-name {
  font-weight: 700;
  color: var(--text); /* teks putih */
  margin-bottom: 4px;
}

.card.fullimg .price {
  font-weight: 800;
  color: var(--text); /* harga juga putih */
}

/* Style Paket Data cards agar seragam */
.card.fullimg {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--text);
}

.card.fullimg .info {
  padding: 10px;
}

.card.fullimg .pkg-name {
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.card.fullimg .price {
  font-weight: 800;
  color: var(--text);
}

h2.center {
  text-align: left;
  font-weight: 800;
  color: var(--text); /* putih */
  margin-bottom: 16px;
}

/* === RAPIHKAN KARTU PAKET DATA === */
.card.fullimg{
  /* samakan kulit kartu dengan card produk utama */
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
  overflow:hidden;                 /* gambar & isi nggak keluar box */
  display:flex; flex-direction:column;
  color:var(--text);
}

.card.fullimg img{
  display:block;                   /* hilangkan celah default img */
  width:100%; height:auto;         /* biar full lebar kartu */
}

.card.fullimg .info{
  display:grid;
  gap:8px;
  padding:12px;                    /* ruang seragam sisi kiri/kanan */
}

.card.fullimg .pkg-name{
  margin:0; font-weight:700; color:var(--text);
}

.card.fullimg .price{
  margin:0; font-weight:800; color:var(--text);
}

/* Tombol rapi menyatu dengan lebar konten */
.card.fullimg .btn{
  width:100%;                      /* penuh selebar area .info */
  justify-self:stretch;            /* pastikan melebar di grid */
  text-align:center;
}

/* (opsional) kalau mau tombol tidak full, tapi center & proporsional:
   tinggal comment width:100% di atas dan gunakan ini: */
/*
.card.fullimg .btn{
  width:auto; justify-self:center; padding-inline:18px;
}
*/
/* --- CENTER FIX: tombol "Belanja Sekarang" tepat di tengah --- */
.card.fullimg{
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  overflow: hidden;
  color: var(--text);
}

.card.fullimg img{
  display:block; width:100%; height:auto;
}

/* Konten di-STACK dan di-center */
.card.fullimg .info{
  display: flex;
  flex-direction: column;
  align-items: center;      /* <<< kunci: center horizontal */
  gap: 8px;
  padding: 12px;
  text-align: center;       /* judul & harga ikut center */
}

.card.fullimg .pkg-name{ margin:0; font-weight:700; color:var(--text); }
.card.fullimg .price{    margin:0; font-weight:800; color:var(--text); }

/* Pastikan tombol tidak melebar penuh & tepat di tengah */
.card.fullimg .btn{
  width: auto !important;        /* override kalau ada rule lama width:100% */
  align-self: center;            /* center terhadap kontainer .info */
  margin: 6px auto 0;            /* auto kiri-kanan = center */
  text-align: center;
  padding-inline: 18px;          /* lebar tombol proporsional */
}
/* === FIX tombol Paket Data di mobile: biar nggak mentok kanan === */
@media (max-width: 520px) {
  /* pastikan konten kartu rapi */
  .card.fullimg { display:flex; flex-direction:column; }

  /* konten di-stack & melebar penuh */
  .card.fullimg .info{
    display:flex;
    flex-direction:column;
    align-items:stretch;      /* <<< kunci: jangan center di mobile */
    gap:8px;
    padding:12px;
    text-align:left;          /* nama & harga rata kiri biar konsisten */
  }

  /* tombol full width & benar-benar center secara visual */
  .card.fullimg .btn{
    display:inline-flex;      /* ikut gaya btn global */
    width:100% !important;    /* penuh selebar box info */
    box-sizing:border-box;    /* padding nggak nambah lebar */
    justify-content:center;   /* teks di tengah */
    align-self:stretch;       /* jangan nempel kanan */
    margin:8px 0 0;           /* kasih jarak atas */
  }
}
/* === FIX tombol Paket Data di mobile: biar nggak mentok kanan === */
@media (max-width: 520px) {
  /* pastikan konten kartu rapi */
  .card.fullimg { display:flex; flex-direction:column; }

  /* konten di-stack & melebar penuh */
  .card.fullimg .info{
    display:flex;
    flex-direction:column;
    align-items:stretch;      /* <<< kunci: jangan center di mobile */
    gap:8px;
    padding:12px;
    text-align:left;          /* nama & harga rata kiri biar konsisten */
  }

  /* tombol full width & benar-benar center secara visual */
  .card.fullimg .btn{
    display:inline-flex;      /* ikut gaya btn global */
    width:100% !important;    /* penuh selebar box info */
    box-sizing:border-box;    /* padding nggak nambah lebar */
    justify-content:center;   /* teks di tengah */
    align-self:stretch;       /* jangan nempel kanan */
    margin:8px 0 0;           /* kasih jarak atas */
  }
}
@media (max-width: 520px) {
  .card.fullimg .btn {
    margin-left: 0 !important;   /* netralisir margin auto kanan */
    margin-right: 0 !important;
  }
}

/* === FIX tombol Paket Data di mobile: tidak mentok kanan, full & center === */
@media (max-width: 520px) {
  .card.fullimg{
    display:flex; flex-direction:column; /* pastikan layout vertikal */
  }

  .card.fullimg .info{
    display:flex;
    flex-direction:column;
    align-items:stretch;      /* jangan center di mobile */
    gap:8px;
    padding:12px 12px 14px;   /* ada ruang kiri-kanan */
    text-align:left;
  }

  .card.fullimg .btn{
    display:block !important;     /* block lebih aman di mobile */
    width:100% !important;        /* penuh selebar box info */
    box-sizing:border-box !important;
    justify-content:center !important;
    align-self:stretch !important; /* hindari nempel kanan */
    float:none !important;         /* jaga-jaga kalau ada float */
    margin:8px 0 0 !important;     /* jarak atas */
    text-align:center !important;  /* teks tombol di tengah */
  }
}
/* ==== PAKET DATA: perapihan umum ==== */
.card.fullimg{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--text);
  padding: 0; /* jangan ada padding luar agar isi rapi */
}
.card.fullimg img{
  display:block; width:100%; height:auto;
}
.card.fullimg .info{
  display:block !important;       /* paksa block, netralisir grid/flex lama */
  padding: 12px !important;
  text-align: center;              /* judul & harga center (desktop) */
}
.card.fullimg .pkg-name{margin:0; font-weight:700; color:var(--text)}
.card.fullimg .price{  margin:0; font-weight:800; color:var(--text)}

/* Tombol: desktop tengah proporsional */
.card.fullimg .btn{
  display:inline-flex !important;
  width:auto !important;
  justify-content:center !important;
  align-self:center !important;
  margin:10px auto 0 !important;  /* auto kiri-kanan = center */
  float:none !important;
  box-sizing:border-box !important;
}

/* ==== HP (<=520px): tombol full-width & TIDAK mentok kanan ==== */
@media (max-width: 520px){
  .card.fullimg .info{
    text-align: left !important;   /* teks kiri agar natural di HP */
  }
  .card.fullimg .btn{
    display:block !important;
    width:100% !important;         /* penuhi lebar box info */
    margin:10px 0 0 !important;    /* hilangkan auto yang dorong ke kanan */
    align-self:stretch !important; /* jangan nempel kanan */
    text-align:center !important;
    float:none !important;
  }
}