:root{
  --bg0:#0b1020;
  --bg1:#0f1733;
  --card:rgba(255,255,255,.06);
  --stroke:rgba(255,255,255,.10);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.68);
  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --r: 22px; /* slightly rounder */
}

*{box-sizing:border-box}
html,body{height:100%}

/* IMPORTANT: prevent unwanted horizontal scrolling */
html, body{
  overflow-x: hidden;
}

body{
  margin:0;
  padding-bottom:72px; /* space for bottom navbar */
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(900px 500px at 20% 10%, rgba(116,122,255,.25), transparent 60%),
    radial-gradient(900px 600px at 90% 30%, rgba(0,255,214,.14), transparent 55%),
    linear-gradient(160deg, var(--bg0), var(--bg1));
}

/* Ensure containers never force horizontal overflow */
.wrap, .grid, .card, .preview{
  min-width: 0;
}

.wrap{
  max-width:1100px;
  margin:0 auto;
 padding: 7px 7px 7px 7px;
}
@media (min-width: 860px){
  .wrap{ padding-top:12px; }
}

/* Topbar / header (PlayStore feel) */
.topbar{
  margin-top: 6px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.header{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--muted);
  background:rgba(255,255,255,.06);
  border:1px solid var(--stroke);
  padding:6px 10px;
  border-radius:999px;
  width:max-content;
}
.badge-dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(0,255,214,.9);
  box-shadow:0 0 0 4px rgba(0,255,214,.12);
}

h1{
  margin:10px 0 6px;
  font-size:28px;
  letter-spacing:.2px;
}
@media (min-width: 860px){
  h1{ font-size:34px; }
}

.sub{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.5;
  max-width:75ch;
}

/* Search pill */
.search-pill{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.78);
  min-width: 240px;
  max-width: 100%;
}
.search-pill span{
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.store-ico{
  width:26px;height:26px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.88);
  flex: 0 0 auto;
}

/* Grid responsive */
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap:18px;
  margin-top:18px;
}

/* Card */
.card{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  position:relative;
  backdrop-filter: blur(10px);

  display:flex;
  flex-direction:column;
  min-height: 190px;

  /* allow internal carousel scrollbar without expanding body */
  overflow: visible;
}

/* optional highlight glow on card corner - comment out if you don’t want it */
.card::before{
  content:"";
  position:absolute;
  inset:-80px -80px auto auto;
  width:220px;height:220px;
  background: radial-gradient(circle at 30% 30%, rgba(116,122,255,.22), transparent 60%);
  pointer-events:none;
  transform: rotate(15deg);
}

.card-head{
  padding:18px 18px 10px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;

  overflow:hidden;
  border-top-left-radius:var(--r);
  border-top-right-radius:var(--r);
}

.card-title{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}
.card-title b{
  font-size:19px;
  letter-spacing:.2px;
}
.card-title small{
  color:var(--muted);
  font-size:13px;
  line-height:1.4;
}

.pill{
  font-size:12px;
  color:rgba(255,255,255,.85);
  border:1px solid var(--stroke);
  background:rgba(0,0,0,.20);
  padding:7px 10px;
  border-radius:999px;
  white-space:nowrap;
  flex: 0 0 auto;
}

/* footer always bottom */
.card-foot{
  margin-top:auto;
  display:flex;
  gap:10px;
  padding:7px 18px 15px;
  align-items:center;
  flex-wrap:wrap;
}

/* buttons */
.btn{
  appearance:none;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);
  color:var(--text);
  padding:11px 14px;
  border-radius:16px;
  font-weight:600;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-decoration:none;
}
.btn:hover{
  transform: translateY(-1px);
  background:rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.24);
}
.btn:active{ transform: translateY(0px) scale(.99); }

.btn.primary{
  background: linear-gradient(135deg, rgba(116,122,255,.85), rgba(0,255,214,.55));
  border-color: rgba(255,255,255,.18);
  color:#071018;
}

/* mobile: buttons full width */
.card-foot .btn{ width:100%; }
@media (min-width: 860px){
  .card-foot .btn{ width:auto; }
}

/* Promo card full width row */
.promo-wide{
  grid-column: 1 / -1;
}

/* Section title inside card */
.section-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.section-title .subtle{
  color: rgba(255,255,255,.58);
  font-size:12px;
}

/* Preview wrapper */
.preview{
  padding:0 18px 14px;
  border-bottom-left-radius:var(--r);
  border-bottom-right-radius:var(--r);

  /* IMPORTANT:
     Do NOT use overflow:hidden here, because it can clip the horizontal scrollbar.
     But still safe because body overflow-x is hidden. */
  overflow: visible;
}

/* Promo carousel (scroll only inside it) */
.promo-carousel{
  display:flex;
  gap:12px;
  overflow-x:auto;
  overflow-y:hidden;
  max-width:100%;
  padding:10px 2px 12px;
  scroll-snap-type:x mandatory;
  scroll-padding-left: 8px;
  -webkit-overflow-scrolling:touch;

  /* prevent forcing page width */
  white-space: nowrap;
}
.promo-carousel::-webkit-scrollbar{height:10px}
.promo-carousel::-webkit-scrollbar-track{background:rgba(255,255,255,.04);border-radius:999px}
.promo-carousel::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:999px}

/* Promo mini cards */
.promo-card{
    flex: 0 0 300px;
  scroll-snap-align:start;

  display:flex;
  flex-direction:column;
  gap:10px;

  padding:14px;
  border-radius:20px;

  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: 0 14px 40px rgba(0,0,0,.28);

  text-decoration:none;
  color: var(--text);

  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  white-space: normal; /* allow text wrap inside card */
}
@media (min-width:860px){
  .promo-card{ flex-basis:320px; }
}
.promo-card:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.22);
}
.promo-card:active{ transform: translateY(0px) scale(.995); }

.promo-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.promo-card b{
  font-size:16px;
  letter-spacing:.2px;
}
.promo-card small{
  color: rgba(255,255,255,.70);
  font-size:13px;
  line-height:1.4;
}

.promo-chip{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.85);
  white-space:nowrap;
}

.promo-cta{
  margin-top:auto;
  display:inline-flex;
  width:max-content;

  padding:10px 12px;
  border-radius:16px;
  font-weight:700;
  color:#071018;

  background: linear-gradient(135deg, rgba(116,122,255,.85), rgba(0,255,214,.55));
  border:1px solid rgba(255,255,255,.18);
}

.promo-more{
  background:
    linear-gradient(135deg, rgba(116,122,255,.18), rgba(0,255,214,.12));
  border-style:dashed;
}
.promo-more .promo-cta{
  background: linear-gradient(135deg,#ffd36a,#ff9f43);
  color:#2a1a00;
}

/* optional hint */
.promo-hint{
  color: rgba(255,255,255,.55);
  font-size:12px;
  margin-top:10px;
}

/* Verified badge (floating 3D) */
.verify-badge{
  position:absolute;
  top:8px;
  right:10px;
  width:32px;
  height:auto;
  z-index:5;
  pointer-events:none;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.35));
  transform-origin: 50% 50%;
  animation: verifyFloat 3.2s ease-in-out infinite;
}
@keyframes verifyFloat{
  0%   { transform: translateY(0px) rotateX(10deg) rotateY(-12deg); }
  50%  { transform: translateY(-8px) rotateX(-8deg) rotateY(14deg); }
  100% { transform: translateY(0px) rotateX(10deg) rotateY(-12deg); }
}
@media (prefers-reduced-motion: reduce){
  .verify-badge{ animation: none; }
}

/* Note + footer */
.note{
  margin-top:18px;
  color:var(--muted);
  font-size:12.5px;
  line-height:1.55;
  border:1px dashed rgba(255,255,255,.18);
  background:rgba(255,255,255,.04);
  padding:12px 14px;
  border-radius:14px;
}


.partners{
  display:flex;
  gap:10px;
  align-items:center;
}

.partner{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.78);
  font-size:12px;
}

.partner .pico{
  width:22px;height:22px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.82);
}

/* Category pages: 2 video previews (mobile + desktop) */
.dual{
  display:grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 14px;
}
@media (min-width: 860px){
  .dual{ grid-template-columns: 1fr 1fr; }
}

.preview-card{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  overflow:hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}
.preview-card .ph{
  padding:16px 16px 10px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.preview-card .ph b{ font-size:16px; }
.preview-card .ph small{
  color: rgba(255,255,255,.68);
  display:block;
  margin-top:4px;
}
.preview-card .pv{
  padding:0 5px 5px;
}
.preview-card video{
  width:100%;
  height:auto;
  display:block;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background:#000;
}
/* mini desktop preview inside main cards */
.card-media{ padding: 0 5px 5px; }
.card-video{
  width:100%;
  height:205px;
  display:block;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:#000;
  object-fit:cover;
}
@media (min-width: 860px){ .card-video{ height:170px; } }
/* =========================================================
   PROMO CARD — RIGHT THUMBNAIL + BLUR BG (PLAY STORE STYLE)
   ========================================================= */

/* Base promo card layer */
.promo-card{
  position: relative;
  overflow: hidden;
}

/* Promo row layout */
.promo-card.promo-row{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

/* KIRI: text + button */
.promo-left{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
  flex:1 1 auto;
}

/* ===== Blurred background from thumbnail ===== */
.promo-bg{
position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; filter: blur(13px); transform: scale(3.2); opacity: 41.55;
}

/* Overlay agar teks kebaca */
.promo-card.promo-row::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background: linear-gradient(
    to right,
    rgba(15,23,51,.88),
    rgba(15,23,51,.55)
  );
}

/* Pastikan konten di atas bg */
.promo-left,
.promo-thumb-wrap{
  position: relative;
  z-index: 2;
}

/* ===== Thumbnail wrapper (drift animation DI SINI) ===== */
.promo-thumb-wrap{
  width: 143px;
  height: 112px;
  flex: 0 0 143px;          /* jangan shrink */
  overflow: hidden;
  animation: promoDrift 7s linear infinite;
  transform-origin: 50% 50%;
  will-change: transform;
}

/* IMG inside wrapper */
.promo-thumb{
width: 91%;
    height: 107%;
    display: block;
}

/* Mobile friendly */
@media (max-width:480px){
  .promo-thumb-wrap{
    width: 108px;
    height: 94px;
    flex: 0 0 108px;
  }
}

/* Floating animation (NO WAVY FEEL) */
@keyframes promoDrift{
  0%   { transform: translate3d(0, 0, 0); }
  25%  { transform: translate3d(0, -1px, 0); }
  50%  { transform: translate3d(0, -2px, 0); }
  75%  { transform: translate3d(0, -1px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* Hover: lebih hidup sedikit (desktop) */
@media (hover:hover){
  .promo-card.promo-row:hover .promo-bg{
    filter: blur(30px);
    opacity: .70;
  }
}

/* Respect user preference */
@media (prefers-reduced-motion: reduce){
  .promo-thumb-wrap{ animation:none; }
  .promo-card.promo-row:hover .promo-bg{
    filter: blur(40px);
    opacity: .55;
  }
}

/* ===== Promo More background (no thumb) ===== */
.promo-card.promo-more{
  position: relative;
  overflow:hidden;
}

.promo-more-bg{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    radial-gradient(circle at 30% 30%, rgba(132,250,176,.18), transparent 60%),
    radial-gradient(circle at 70% 60%, rgba(161,140,209,.14), transparent 60%),
    radial-gradient(circle at 40% 80%, rgba(143,211,244,.12), transparent 60%);
  filter: blur(26px);
  transform: scale(1.2);
  opacity: .75;
}

.promo-card.promo-more::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background: rgba(15,23,51,.55);
}

.promo-card.promo-more > *{
  position: relative;
  z-index: 2;
}

/* ================================
   PARTNERS HEADER (CENTER & CLEAN)
   ================================ */

.partners-wrap{
  max-width: 1100px;
  margin: 0 auto 22px;   /* JARAK KE CARD */
  padding: 0 18px;
  text-align: center;
}

/* LOGO */
.partners-logo{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom: 12px;
}



/* ROW ICON + TEXT */
.partners-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;

}

/* ICON GROUP */
.partners{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
}

/* SLOGAN */
.partners-slogan{
  font-weight: 800;
  letter-spacing: .3px;
  color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  padding: 10px 16px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* ================================
   RESPONSIVE
   ================================ */

/* DESKTOP: slogan di kanan icon */
@media (min-width: 860px){
  .partners-row{
    justify-content: space-between;
  }
  .partners{
    justify-content: flex-start;
  }
  .partners-slogan{
    margin-left: auto;
  }
}

/* MOBILE: slogan di bawah icon, center */
@media (max-width: 859px){
  .partners-row{
    flex-direction: column;
  }
  .partners-slogan{
    margin-top: 10px;
  }
}
/* ===== Mobile tab video: kecilin di layar besar ===== */
#panel-mobile .preview-card{
  max-width: 520px;          /* ukuran card mobile */
  margin: 0 auto;            /* center */
}

/* bikin area video lebih "mobile-ish" dan tidak terlalu tinggi */
#panel-mobile .pv{         /* lebih kecil lagi untuk video */
  margin: 0 auto;
}

/* default video tetap responsif */
#panel-mobile .pv video{
  width: 100%;
  height: auto;
  display:block;
}

/* Kalau kamu mau lebih pendek lagi, pakai crop 16:9 tetap, tapi dibatasi tinggi */
@media (min-width: 900px){
  #panel-mobile .pv{
  }
}


/* footer partners row */
footer{
    margin-top: 18px;
    padding: 18px 12px calc(22px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: rgba(255, 255, 255, .55);
    font-size: 12px;
    text-align: center;
}

.copyright{
  color: rgba(255,255,255,.55);
  font-size:12px;
  text-align:center; /* center text */
}

/* Bottom navbar */
.bottom-nav-bar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:999;
  width:100%;
  overflow:hidden;
  background:rgba(15,23,51,.92);
  backdrop-filter: blur(10px);
  border-top:1px solid rgba(255,255,255,.12);
}

.bottom-nav-bar ul{
  margin:0;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  display:flex;
  justify-content:space-around;
  align-items:center;
  list-style:none;
  max-width:100%;
  gap: 10px;
}

.bottom-nav-bar li{
  flex:1;
  text-align:center;
}

.bottom-nav-bar a{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding: 10px 8px;
  font-size:12px;
  font-weight:700;
  color:rgba(255,255,255,.75);
  text-decoration:none;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
}

.bottom-nav-bar a:hover{
  color:#fff;
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
  transform: translateY(-1px);
}

.bottom-nav-bar a:active{
  transform: translateY(0) scale(.98);
}

.bottom-nav-bar a i{
  font-size:18px;
  line-height:1;
}

/* Optional fallback kalau suatu saat pakai SVG icon */
.bottom-nav-bar a svg{
  width:18px;
  height:18px;
  display:block;
}

/* Home: lebih standout */
.bottom-nav-bar li.home a{
  color:#fff;
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
}

.bottom-nav-bar li.home a i{
  font-size:22px;
}

.bottom-nav-bar li.home a svg{
  width:22px;
  height:22px;
}
/* ===== Partners Logo (Text Gradient) ===== */
.partners-logo-text{
  font-size: 26px;
  font-weight: 900;
  letter-spacing: .5px;
  text-align: center;
  line-height: 1.3;

  /* Gradient ala logo */
background: linear-gradient(135deg, #5b07ff 0%, #4a8aff 25%, #a18cd1 55%, #893fff 100%);


  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  /* sedikit glow biar premium */
  text-shadow:
    0 0 12px rgba(132,250,176,.25),
    0 0 24px rgba(161,140,209,.18);
}

/* responsive tweak */
@media (max-width:480px){
  .partners-logo-text{
    font-size: 22px;
  }
}
/* ===== Before / After ===== */
.ba-wrap{
  margin-top: 14px;
}
.ba-grid{
  display:grid;
  grid-template-columns: 1fr;

}
@media (min-width: 860px){
  .ba-grid{ grid-template-columns: 1fr 1fr; 
          gap: 10px;
          }
}

.ba-card{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 18px;
  overflow:hidden;
  margin: 7px 0px 7px 0px;
}

.ba-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 12px 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.ba-head b{
  display:block;
  color: rgba(255,255,255,.92);
  font-size: 13px;
}
.ba-head small{
  display:block;
  margin-top: 3px;
  color: rgba(255,255,255,.62);
  font-size: 12px;
  line-height: 1.35;
}

.ba-pill{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.88);
  white-space:nowrap;
}

.ba-img{
    width: 100%;
    height: 488px;
    margin: 14px;
    border-radius: 10px;
    object-fit: contain;
    background: rgba(0, 0, 0, .20);
    display: block;
}
@media (max-width:520px){
  .ba-img{
           height: 342px;       /* tinggi seragam mobile */
  }
}
.footer-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  text-align:center;
}

.footer-meta{
  font-size:11px;
  color:rgba(255,255,255,.45);
  letter-spacing:.2px;
}

/* =========================================================
   BEFORE / AFTER — 3D COLOR PACK (match .card vibe)
   Targets: .ba-wrap .ba-card .ba-grid .ba-head .ba-pill .ba-img
   ========================================================= */

.ba-wrap{
  margin-top: 16px;
}

/* grid */
.ba-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 12px;
}

@media (max-width: 820px){
  .ba-grid{ grid-template-columns: 1fr; }
}

/* BA card base: glass + depth */
.ba-card{
    position: relative;
    border-radius: var(--r-xl, 22px);
      background: linear-gradient(180deg, rgb(0 141 255 / 23%), rgb(255 125 221 / 30%));
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .38);
    overflow: hidden;
    transform-style: preserve-3d;
    will-change: transform, box-shadow, filter;
    transition: transform .45s cubic-bezier(.16, 1, .3, 1), box-shadow .45s cubic-bezier(.16, 1, .3, 1), filter .45s cubic-bezier(.16, 1, .3, 1), border-color .45s cubic-bezier(.16, 1, .3, 1);
}

/* top highlight */
.ba-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background:
    radial-gradient(900px 260px at 20% 0%,
      rgba(255,255,255,.14), transparent 60%),
    radial-gradient(800px 340px at 85% 25%,
      rgba(120,174,245,.12), transparent 60%);
  pointer-events:none;
  opacity:.9;
  mix-blend-mode: screen;
}

/* glow aura */
.ba-card::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius: inherit;
  background:
    radial-gradient(circle at 25% 15%, rgba(120,174,245,.40), transparent 55%),
    radial-gradient(circle at 80% 10%, rgba(255,93,177,.28), transparent 60%),
    radial-gradient(circle at 50% 120%, rgba(0,0,0,.35), transparent 60%);
  filter: blur(16px);
  opacity:.35;
  pointer-events:none;
  z-index:-1;
  transition: opacity .45s cubic-bezier(.16,1,.3,1), filter .45s cubic-bezier(.16,1,.3,1);
}

/* hover 3D (desktop only) */
@media (hover:hover) and (pointer:fine){
  .ba-card:hover{
    transform: translateY(-10px) rotateX(6deg) rotateY(-6deg) translateZ(10px);
    box-shadow: 0 24px 60px rgba(0,0,0,.50);
    border-color: rgba(255,255,255,.18);
    filter: saturate(1.05) brightness(1.02);
  }
  .ba-card:hover::after{
    opacity:.75;
    filter: blur(18px);
  }
}

/* header inside card */
.ba-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 14px 10px;
  transform: translateZ(12px);
}

.ba-head b{
  display:block;
  font-size: 14px;
  letter-spacing: .2px;
  color: rgba(255,255,255,.92);
}
.ba-head small{
  display:block;
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255,255,255,.65);
  line-height: 1.35;
}

/* BA pill (Before/After badge) */
.ba-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .3px;
  text-transform: uppercase;

  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);

  box-shadow: 0 10px 20px rgba(0,0,0,.30), 0 1px 0 rgba(255,255,255,.18) inset;
  transform: translateZ(16px);
}

/* give each type different accent */
.ba-card .ba-pill{
  background: linear-gradient(135deg, rgba(120,174,245,.22), rgba(255,255,255,.06));
}
.ba-card:nth-child(2) .ba-pill{ /* BEFORE card inside grid */
  background: linear-gradient(135deg, rgba(255,216,107,.18), rgba(255,255,255,.06));
}
.ba-card:nth-child(3) .ba-pill{ /* AFTER card inside grid */
  background: linear-gradient(135deg, rgba(255,93,177,.16), rgba(255,255,255,.06));
}

/* image frame */
.ba-img{
  display:block;
  width: calc(100% - 28px);
  border-radius: calc(var(--r-xl, 22px) - 8px);

  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  box-shadow: 0 16px 40px rgba(0,0,0,.45);

  transform: translateZ(14px);
  transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s cubic-bezier(.16,1,.3,1);
}

@media (hover:hover) and (pointer:fine){
  .ba-card:hover .ba-img{
    transform: translateZ(18px) scale(1.01);
    box-shadow: 0 22px 56px rgba(0,0,0,.55);
  }
}

/* reduced motion safe */
@media (prefers-reduced-motion: reduce){
  .ba-card, .ba-img{ transition:none !important; }
  .ba-card:hover{ transform:none !important; }
}
.partner{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  box-shadow: 0 10px 22px rgba(0,0,0,.30), 0 1px 0 rgba(255,255,255,.14) inset;
}
/* NEW pill 3D floating */
.pill.pill-new{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;

  /* base style (ikut tema kamu, ini aman) */
  color: #0b1020;
  background: linear-gradient(135deg, #ffd86b, #ff5db1);
  box-shadow:
    0 10px 22px rgba(0,0,0,.25),
    0 2px 0 rgba(255,255,255,.45) inset;

  /* 3D */
  transform-style: preserve-3d;
  will-change: transform, filter;

  animation: pillFloat3d 2.8s ease-in-out infinite;
}

/* glow ring */
.pill.pill-new::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius: inherit;
  background: radial-gradient(circle at 30% 30%,
    rgba(255,216,107,.55),
    rgba(255,93,177,.25),
    transparent 65%);
  filter: blur(6px);
  z-index:-1;
  animation: pillGlow 2.8s ease-in-out infinite;
}

/* tiny sparkle dot */
.pill.pill-new::after{
  content:"";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  box-shadow: 0 0 10px rgba(255,255,255,.8);
  transform: translateZ(12px);
  opacity: .9;
}

/* hover: makin “ngambang” */
.card:hover .pill.pill-new{
  animation-play-state: paused;
  transform: translateY(-6px) rotateX(12deg) rotateY(-10deg) translateZ(10px);
  filter: saturate(1.1) brightness(1.05);
}

@keyframes pillFloat3d{
  0%,100%{
    transform: translateY(0) rotateX(10deg) rotateY(-12deg) translateZ(6px);
  }
  50%{
    transform: translateY(-8px) rotateX(14deg) rotateY(12deg) translateZ(14px);
  }
}

@keyframes pillGlow{
  0%,100%{ opacity:.55; transform: scale(1); }
  50%{ opacity:.9; transform: scale(1.08); }
}

/* optional: respect user reduce motion */
@media (prefers-reduced-motion: reduce){
  .pill.pill-new, .pill.pill-new::before{ animation: none; }
}
/* =========================================================
   3D COLOR PACK — SAFE UI DEPTH (Cards + Promo + Buttons + Pills)
   Works with your existing HTML structure.
   ========================================================= */

/* ---------- Theme Tokens ---------- */
:root{
  --bg: #070a12;
  --panel: rgba(255,255,255,.06);
  --panel-2: rgba(255,255,255,.08);
  --stroke: rgba(255,255,255,.12);
  --stroke-2: rgba(255,255,255,.18);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.68);

  --shadow-1: 0 10px 30px rgba(0,0,0,.35);
  --shadow-2: 0 22px 60px rgba(0,0,0,.45);
  --inset: 0 1px 0 rgba(255,255,255,.18) inset;

  --r-xl: 22px;
  --r-lg: 18px;
  --r-md: 14px;

  --glow-a: rgba(120,174,245,.40);
  --glow-b: rgba(255,93,177,.35);
  --glow-c: rgba(255,216,107,.35);

  --ease: cubic-bezier(.2,.8,.2,1);
  --ease2: cubic-bezier(.16,1,.3,1);
}

/* ---------- Global "3D stage" (only affects elements inside) ---------- */
.grid{
  perspective: 1000px;
}

/* =========================================================
   CARDS: 3D Depth + Hover Tilt + Glow (SAFE)
   ========================================================= */
.card{
  position: relative;
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-1);
  overflow: hidden;

  transform-style: preserve-3d;
  will-change: transform, box-shadow, filter;
  transition: transform .45s var(--ease2), box-shadow .45s var(--ease2), filter .45s var(--ease2), border-color .45s var(--ease2);
}

/* soft highlight line */
.card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background:
    radial-gradient(800px 240px at 15% 0%,
      rgba(255,255,255,.16),
      transparent 55%),
    radial-gradient(700px 260px at 85% 10%,
      rgba(120,174,245,.14),
      transparent 60%);
  pointer-events:none;
  opacity:.9;
  mix-blend-mode: screen;
}

/* glow aura */
.card::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius: inherit;
  background:
    radial-gradient(circle at 25% 15%, var(--glow-a), transparent 55%),
    radial-gradient(circle at 80% 10%, var(--glow-b), transparent 60%),
    radial-gradient(circle at 50% 120%, rgba(0,0,0,.35), transparent 60%);
  filter: blur(14px);
  opacity:.35;
  pointer-events:none;
  z-index:-1;
  transition: opacity .45s var(--ease2), filter .45s var(--ease2);
}

.card:hover{
  transform: translateY(-10px) rotateX(6deg) rotateY(-6deg) translateZ(10px);
  box-shadow: var(--shadow-2);
  border-color: var(--stroke-2);
  filter: saturate(1.06) brightness(1.02);
}
.card:hover::after{
  opacity:.75;
  filter: blur(18px);
}

/* Keep card media "lifted" a bit */
.card .card-media,
.card .card-head,
.card .card-foot{
  transform: translateZ(10px);
}

/* Card title style safe */
.card .card-title b{
  letter-spacing: .2px;
}
.card .card-title small{
  color: var(--muted);
}

/* =========================================================
   VIDEO THUMB: glass frame + hover pop
   ========================================================= */
.card-media{
  border-radius: calc(var(--r-xl) - 6px);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  overflow:hidden;
  margin: 14px;
  background: rgba(0,0,0,.18);
  transition: transform .45s var(--ease2), box-shadow .45s var(--ease2);
}
.card:hover .card-media{
  transform: translateZ(16px) scale(1.01);
  box-shadow: 0 18px 46px rgba(0,0,0,.50);
}
.card-video{
  display:block;
  width:100%;
  height:auto;
}

/* =========================================================
   BUTTONS: 3D press
   ========================================================= */
.btn{
  position: relative;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: 0 12px 24px rgba(0,0,0,.35), var(--inset);
  transform-style: preserve-3d;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease), border-color .25s var(--ease);
}

.btn.primary{
  border-color: rgba(255,255,255,.16);
  background: linear-gradient(135deg, rgba(120,174,245,.9), rgba(255,93,177,.75));
  color: #0b1020;
  font-weight: 800;
}
.btn:hover{
  transform: translateY(-2px) translateZ(8px);
  box-shadow: 0 18px 40px rgba(0,0,0,.45), 0 2px 0 rgba(255,255,255,.45) inset;
  filter: saturate(1.05) brightness(1.03);
}
.btn:active{
  transform: translateY(1px) translateZ(0px) scale(.99);
  box-shadow: 0 10px 22px rgba(0,0,0,.35), var(--inset);
}

/* =========================================================
   PILLS: default + NEW 3D floating (your request)
   ========================================================= */
.pill{
  position: relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .3px;
  text-transform: uppercase;
  font-size: 12px;

  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 20px rgba(0,0,0,.30), 0 1px 0 rgba(255,255,255,.18) inset;

  transform-style: preserve-3d;
  will-change: transform, filter;
}

/* NEW pill 3D floating (enhanced + safe) */
.pill.pill-new{
  color: #0b1020;
  background: linear-gradient(135deg, #ffd86b, #ff5db1);
  border-color: rgba(255,255,255,.20);
  box-shadow:
    0 14px 28px rgba(0,0,0,.35),
    0 2px 0 rgba(255,255,255,.45) inset;
  animation: pillFloat3d 2.8s ease-in-out infinite;
}

/* glow ring */
.pill.pill-new::before{
  content:"";
  position:absolute;
  inset:-7px;
  border-radius: inherit;
  background: radial-gradient(circle at 30% 30%,
    rgba(255,216,107,.55),
    rgba(255,93,177,.25),
    transparent 65%);
  filter: blur(7px);
  z-index:-1;
  opacity:.85;
  animation: pillGlow 2.8s ease-in-out infinite;
}

/* sparkle dot */
.pill.pill-new::after{
  content:"";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  box-shadow: 0 0 10px rgba(255,255,255,.8);
  transform: translateZ(12px);
  opacity: .9;
  margin-left: 6px;
}

.card:hover .pill.pill-new{
  animation-play-state: paused;
  transform: translateY(-6px) rotateX(12deg) rotateY(-10deg) translateZ(12px);
  filter: saturate(1.1) brightness(1.06);
}

@keyframes pillFloat3d{
  0%,100%{
    transform: translateY(0) rotateX(10deg) rotateY(-12deg) translateZ(6px);
  }
  50%{
    transform: translateY(-8px) rotateX(14deg) rotateY(12deg) translateZ(14px);
  }
}
@keyframes pillGlow{
  0%,100%{ opacity:.55; transform: scale(1); }
  50%{ opacity:.95; transform: scale(1.08); }
}

/* =========================================================
   PROMO CARDS: also 3D depth + hover
   ========================================================= */
.promo-card{
  position: relative;
  border-radius: var(--r-xl);
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
  box-shadow: 0 14px 36px rgba(0,0,0,.38);
  overflow:hidden;
  transform-style: preserve-3d;
  transition: transform .45s var(--ease2), box-shadow .45s var(--ease2), border-color .45s var(--ease2), filter .45s var(--ease2);
}

.promo-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 260px at 20% 0%,
      rgba(255,255,255,.14), transparent 60%),
    radial-gradient(800px 340px at 85% 30%,
      rgba(120,174,245,.12), transparent 60%);
  pointer-events:none;
  opacity:.9;
}

.promo-card:hover{
  transform: translateY(-8px) rotateX(5deg) rotateY(-5deg) translateZ(12px);
  box-shadow: 0 24px 60px rgba(0,0,0,.50);
  border-color: rgba(255,255,255,.18);
  filter: saturate(1.05) brightness(1.02);
}

.promo-bg{
  filter: blur(18px) saturate(1.15);
  opacity:.28;
}

/* promo thumb lift */
.promo-thumb-wrap{
  transform: translateZ(18px);
}
.promo-thumb{
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
  transform: translateZ(10px);
  transition: transform .45s var(--ease2);
}
.promo-card:hover .promo-thumb{
  transform: translateZ(16px) scale(1.03);
}

/* chip a bit 3D */
.promo-chip{
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  box-shadow: 0 10px 18px rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.16) inset;
}

/* =========================================================
   PARTNERS: make row look premium (optional)
   ========================================================= */
.partners-wrap{
  border-radius: var(--r-xl);
}
.partners-logo-text{
  letter-spacing: .6px;
  text-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.partner{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  box-shadow: 0 10px 22px rgba(0,0,0,.30), 0 1px 0 rgba(255,255,255,.14) inset;
}

/* =========================================================
   BOTTOM NAV: glass 3D
   ========================================================= */
.bottom-nav-bar{
  border-top: 1px solid rgba(255,255,255,.12);
  background: rgba(8,10,18,.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 -18px 46px rgba(0,0,0,.55);
}
.bottom-nav-bar a{
  border-radius: 14px;
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.bottom-nav-bar a:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.06);
}

/* =========================================================
   SAFETY: Reduce motion
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .card, .promo-card, .btn, .pill{ transition: none !important; }
  .pill.pill-new, .pill.pill-new::before{ animation: none !important; }
  .card:hover, .promo-card:hover, .btn:hover{ transform: none !important; }
}
/* =========================================================
   Center About content vertically (desktop-friendly) — SAFE
   ========================================================= */

/* 1) Jadikan ba-card flex supaya ba-about bisa "ngambil sisa tinggi" */
.ba-card{
  display: flex;
  flex-direction: column;
}

/* Header tidak ikut stretch */
.ba-card .ba-head{
  flex: 0 0 auto;
}

/* About ambil sisa ruang + center vertikal */
.ba-card .ba-about{
  flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 50px 38px 50px 16px;
  transform: translateZ(14px);
}

/* Pastikan ba-card punya tinggi yang seimbang di desktop */
@media (min-width: 1024px){
  .ba-grid{
    align-items: stretch;
  }
}

/* ===== AFTER ABOUT CONTENT (typography & list) ===== */
.ba-about h4{
  margin: 0 0 6px;
  font-size: 15px;
  letter-spacing: .3px;
  color: rgba(255,255,255,.92);
}

.ba-about p{
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255,255,255,.75);
}

.ba-features{
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  display: grid;
  gap: 6px;
}

.ba-features li{
  font-size: 13px;
  color: rgba(255,255,255,.85);
}

.ba-note{
  font-size: 12px;
  color: rgba(255,255,255,.60);
  border-top: 1px dashed rgba(255,255,255,.12);
  padding-top: 8px;
}
/* GLOBAL: animasi text untuk semua page yang pakai .partners-logo-text */
.partners-logo-text{
  display:inline-block;
  text-align:center;

  /* gradient bergerak */
  background: linear-gradient(120deg,
    rgba(132,250,176,.95),
    rgba(143,211,244,.95),
    rgba(161,140,209,.95),
    rgba(132,250,176,.95)
  );
  background-size: 220% 220%;
  background-position: 0% 50%;

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  animation: logoGradientMove 6s ease-in-out infinite;
}

@keyframes logoGradientMove{
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* hormati reduced motion */
@media (prefers-reduced-motion: reduce){
  .partners-logo-text{ animation:none; }
}

.ba-slider{
  position:relative;


}

.ba-track{
  display:flex;
  width:100%;
  transform: translate3d(0,0,0);
  transition: transform .28s ease;
  touch-action: pan-y; /* allow horizontal swipe without blocking scroll */
}

.ba-slide{
  flex: 0 0 100%;
  min-width: 100%;
}

.ba-slide .ba-img{
  display:block;
  width:100%;
  width: calc(100% - 28px);
}

/* arrows */
.ba-nav{
position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    font-weight: 900;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(0, 0, 0, .28);
    color: rgba(255, 255, 255, .92);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    -webkit-tap-highlight-color: transparent;
    transition: transform .12s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
    user-select: none;
}
.ba-nav:hover{
background: rgb(34 34 34 / 80%);
  border-color: rgba(255,255,255,.25);
  transform: translateY(-50%) scale(1.03);
}
.ba-nav:active{
  transform: translateY(-50%) scale(.98);
}
.ba-prev{ left: 10px; }
.ba-next{ right: 10px; }

/* dots */
.ba-dots{
  position:absolute;
  left: 0;
  right: 0;
  bottom: 23px;
  display:flex;
  gap: 7px;
  justify-content:center;
  z-index:2;
  pointer-events:auto;
}
.ba-dot{
  width: 7px;
  height: 7px;
  border-radius: 99px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.18);
  opacity: .7;
  cursor:pointer;
  transition: transform .12s ease, opacity .12s ease, background .12s ease;
}
.ba-dot.is-active{
  opacity: 1;
  background: rgba(255,255,255,.85);
  transform: scale(1.15);
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .ba-track{ transition:none; }
}
/* ===== PILL CTA — GET APPS ===== */
.pill-cta{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2px;
  text-decoration: none;

  color: #fff;
  border-radius: 999px;

  background: linear-gradient(135deg, #7c7cff, #3df0ff);
  box-shadow:
    0 6px 18px rgba(61,240,255,.35),
    inset 0 0 0 1px rgba(255,255,255,.25);

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    filter .25s ease;
}

/* Icon kecil (pure CSS, no SVG) */
.pill-cta::after{
  font-size: 13px;
  opacity: .9;
  transition: transform .25s ease;
}

/* Hover (desktop) */
@media (hover:hover){
  .pill-cta:hover{
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow:
      0 10px 28px rgba(61,240,255,.45),
      inset 0 0 0 1px rgba(255,255,255,.35);
  }
  .pill-cta:hover::after{
    transform: translateX(2px);
  }
}

/* Active (tap mobile) */
.pill-cta:active{
  transform: translateY(0);
  box-shadow:
    0 4px 12px rgba(61,240,255,.35),
    inset 0 0 0 1px rgba(255,255,255,.2);
}