*{box-sizing:border-box}
:root{--bg:#06111d;--bg2:#091827;--panel:#0b1b2b;--panel2:#10273d;--line:rgba(111,218,255,.16);--text:#f6fbff;--muted:#8fa8ba;--cyan:#55d9ff;--cyan2:#9beaff;--blue:#6286ff;--green:#2fe17d;--gold:#f4c965;--red:#ff7180;--shadow:0 20px 55px rgba(0,0,0,.30)}
html,body{margin:0;min-height:100%;background:radial-gradient(circle at 100% -10%,rgba(85,217,255,.16),transparent 28rem),radial-gradient(circle at -10% 42%,rgba(98,134,255,.10),transparent 28rem),linear-gradient(180deg,var(--bg),#040a10);color:var(--text);font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
body{padding:0}body.modal-open{overflow:hidden}button,input,select{font:inherit}button{cursor:pointer}.hidden{display:none!important}.app-shell{width:min(100%,580px);margin:0 auto;min-height:100vh;padding-bottom:94px}
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;padding:12px 14px;background:rgba(5,14,23,.88);backdrop-filter:blur(20px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;min-width:0;flex:1;background:none;border:0;color:inherit;text-align:left;padding:0}.brand-logo{width:46px;height:46px;flex:0 0 46px;border-radius:15px;padding:1px;background:linear-gradient(145deg,var(--cyan),var(--blue));box-shadow:0 0 30px rgba(85,217,255,.24)}.brand-logo span{width:100%;height:100%;display:grid;place-items:center;border-radius:14px;background:#081522;font-weight:1000;letter-spacing:-2.4px;font-size:18px}.brand-copy{min-width:0}.brand-name{font-weight:1000;letter-spacing:-.7px;font-size:17px;white-space:nowrap}.brand-tag{font-size:7.5px;letter-spacing:1.65px;color:var(--muted);font-weight:900;margin-top:2px}
.online-badge{display:flex;align-items:center;gap:6px;padding:7px 9px;border-radius:999px;border:1px solid rgba(47,225,125,.26);background:rgba(47,225,125,.10);font-size:9px;font-weight:1000;color:#8df4b9}.online-badge i,.live-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px rgba(47,225,125,.08);display:inline-block}.round-btn{width:42px;height:42px;flex:0 0 42px;border-radius:14px;border:1px solid var(--line);background:var(--panel);color:#fff;font-size:20px}
main{padding:14px 14px 25px}.hero{position:relative;min-height:340px;border-radius:30px;overflow:hidden;border:1px solid var(--line);background:radial-gradient(circle at 65% 30%,rgba(85,217,255,.23),transparent 18rem),linear-gradient(145deg,#112941,#07121d);box-shadow:var(--shadow)}.hero-fallback{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 32%,rgba(85,217,255,.15),transparent 17rem)}.hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}.hero-shade{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(3,8,13,.05) 0%,rgba(3,8,13,.10) 34%,rgba(3,8,13,.94) 100%)}.hero-topline{position:absolute;z-index:3;top:16px;right:16px;display:flex;align-items:center;gap:7px;padding:8px 10px;border:1px solid rgba(47,225,125,.28);background:rgba(4,18,16,.66);backdrop-filter:blur(12px);border-radius:999px;color:#a6f7c8;font-size:9px;font-weight:1000}.robot-mark{position:relative;width:148px;height:148px;border:1px solid rgba(85,217,255,.24);border-radius:47px;background:linear-gradient(145deg,#0e2032,#143451);box-shadow:inset 0 0 45px rgba(85,217,255,.07),0 22px 50px rgba(0,0,0,.35)}.robot-mark:before,.robot-mark:after{content:"";position:absolute;top:54px;width:22px;height:10px;border-radius:99px;background:var(--cyan);box-shadow:0 0 22px rgba(85,217,255,.72)}.robot-mark:before{left:34px}.robot-mark:after{right:34px}.robot-rg{position:absolute;bottom:28px;left:0;right:0;text-align:center;font-size:28px;font-weight:1000;letter-spacing:-3px;color:#dff9ff}.hero-content{position:absolute;z-index:4;left:20px;right:20px;bottom:20px}.kicker{font-size:9px;letter-spacing:1.8px;text-transform:uppercase;font-weight:1000;color:var(--cyan)}.hero h1{margin:7px 0 7px;font-size:31px;line-height:1.01;letter-spacing:-1.45px}.hero h1 span{color:var(--cyan2)}.hero p{margin:0 0 15px;color:#c2d2dd;font-size:11px;line-height:1.55;max-width:92%}.hero-actions{display:flex;gap:9px;flex-wrap:wrap}.shop-btn,.ghost-btn,.primary-btn,.secondary-btn{border-radius:15px;padding:13px 15px;font-weight:1000;border:0}.shop-btn,.primary-btn{background:linear-gradient(135deg,var(--cyan),var(--cyan2));color:#041018;box-shadow:0 10px 26px rgba(85,217,255,.19)}.shop-btn,.ghost-btn{display:inline-flex;align-items:center;gap:8px}.ghost-btn,.secondary-btn{background:rgba(7,20,32,.80);color:#fff;border:1px solid var(--line)}.full{width:100%}.primary-btn:disabled{opacity:.38;cursor:not-allowed}
.section-title{display:flex;align-items:end;justify-content:space-between;margin:23px 2px 11px;gap:12px}.section-title.compact{margin-top:17px}.section-title h2{font-size:16px;margin:2px 0 0}.section-title>span{font-size:8px;letter-spacing:.7px;color:var(--muted);text-align:right}.service-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.service-card{min-height:151px;padding:15px;border:1px solid var(--line);border-radius:23px;text-align:left;color:#fff;background:linear-gradient(145deg,var(--panel2),var(--panel));box-shadow:0 12px 28px rgba(0,0,0,.17);position:relative;overflow:hidden;transition:.18s ease}.service-card:active{transform:scale(.98)}.service-card:after{content:"";position:absolute;width:110px;height:110px;border-radius:50%;right:-42px;top:-34px;background:rgba(85,217,255,.055)}.service-card strong{font-size:13px;display:block;position:relative;z-index:1}.service-card small{display:block;color:var(--muted);font-size:9.5px;line-height:1.38;margin-top:5px;position:relative;z-index:1}.service-arrow{position:absolute;right:14px;bottom:13px;color:var(--cyan);font-size:15px}.logo-shell{position:relative;background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible!important;display:grid;place-items:center}.logo-shell:before{content:"";position:absolute;inset:7px;border-radius:18px;background:radial-gradient(circle,rgba(85,217,255,.12),rgba(85,217,255,0) 68%);filter:blur(3px);z-index:0}.logo-shell img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 15px rgba(0,0,0,.30));border-radius:18%;background:transparent}.service-icon{width:66px;height:66px;margin-bottom:13px}.list-logo{width:58px;height:58px;flex:0 0 58px}.pop-logo{width:56px;height:56px;margin-bottom:11px}.shop-mini-icon{width:47px;height:47px;margin-bottom:9px}.product-icon{width:41px;height:41px;flex:0 0 41px}.payment-icon{width:39px;height:39px;flex:0 0 39px}
.popular-row{display:grid;grid-auto-flow:column;grid-auto-columns:43%;gap:10px;overflow-x:auto;padding:1px 0 4px;scrollbar-width:none}.popular-row::-webkit-scrollbar{display:none}.popular-card{border:1px solid var(--line);background:linear-gradient(145deg,var(--panel2),var(--panel));border-radius:21px;padding:13px;color:#fff;text-align:left;min-height:145px}.popular-card strong{display:block;font-size:12px}.popular-card small{display:block;color:var(--muted);font-size:9px;margin-top:3px}.pop-action{display:block;margin-top:10px;color:var(--cyan);font-size:8px;font-weight:1000;letter-spacing:.5px}.contact-card{border:1px solid var(--line);border-radius:22px;padding:16px;background:linear-gradient(145deg,#0d2133,#091723);display:flex;align-items:center;gap:13px}.contact-icon{width:48px;height:48px;flex:0 0 48px;border-radius:15px;background:rgba(85,217,255,.09);display:grid;place-items:center;font-size:23px}.contact-copy{flex:1;min-width:0}.contact-copy strong{font-size:13px;display:block}.contact-copy small{font-size:9px;color:var(--muted);display:block;margin-top:4px}.contact-btn{border:0;border-radius:13px;padding:10px 12px;background:rgba(85,217,255,.10);color:var(--cyan);font-weight:1000;font-size:9px}
.page-head{margin:4px 1px 17px}.page-head h1{font-size:25px;letter-spacing:-.85px;margin:5px 0 4px}.page-head p{font-size:11px;color:var(--muted);margin:0;line-height:1.55}.list{display:grid;gap:9px}.list-card{width:100%;display:flex;align-items:center;gap:12px;padding:12px;border-radius:20px;border:1px solid var(--line);background:linear-gradient(145deg,var(--panel2),var(--panel));color:#fff;text-align:left}.list-meta{flex:1;min-width:0}.list-meta strong{font-size:13px;display:block}.list-meta small{font-size:9.5px;color:var(--muted);display:block;margin-top:4px}.chev{font-size:22px;color:var(--cyan)}.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.choice-card{min-height:132px;border:1px solid var(--line);background:linear-gradient(145deg,var(--panel2),var(--panel));color:#fff;border-radius:21px;padding:15px;text-align:left}.choice-icon{width:50px;height:50px;border-radius:16px;display:grid;place-items:center;background:rgba(85,217,255,.08);color:var(--cyan2);font-size:18px;font-weight:1000;margin-bottom:13px}.choice-card strong{display:block;font-size:12px}.choice-card small{display:block;font-size:9px;color:var(--muted);margin-top:4px}.product-list{display:grid;gap:8px}.product-card{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px;border-radius:19px;border:1px solid var(--line);background:var(--panel);color:#fff;text-align:left}.product-left{display:flex;align-items:center;gap:11px;min-width:0}.product-card strong{font-size:12px;display:block}.product-card small{font-size:8.5px;color:var(--muted);display:block;margin-top:4px}.price{font-weight:1000;font-size:11px;white-space:nowrap;color:#dff8ff}
.form-card,.summary-card,.status-card,.story-card,.empty-card{border:1px solid var(--line);background:linear-gradient(145deg,var(--panel2),var(--panel));border-radius:22px;padding:16px;box-shadow:var(--shadow)}.field{margin-bottom:13px}.field label{display:block;font-size:10.5px;font-weight:900;color:#d9eef8;margin-bottom:7px}.field input,.field select{width:100%;padding:13px;border-radius:14px;border:1px solid var(--line);background:#07131f;color:#fff;outline:none}.field input:focus,.field select:focus{border-color:rgba(85,217,255,.58);box-shadow:0 0 0 3px rgba(85,217,255,.07)}.hint{font-size:9px;color:var(--muted);line-height:1.5;margin:-2px 0 14px}.summary-row{display:flex;justify-content:space-between;gap:15px;padding:10px 0;border-bottom:1px dashed var(--line);font-size:10.5px}.summary-row:last-child{border-bottom:0}.summary-row span{color:var(--muted)}.summary-row strong{text-align:right}.total{font-size:13px;padding-top:13px}.payment-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:11px 0}.payment-card{border:1px solid var(--line);border-radius:18px;background:var(--panel);color:#fff;padding:12px;text-align:left;display:flex;align-items:center;gap:10px}.payment-card.selected{border-color:rgba(85,217,255,.62);background:rgba(85,217,255,.09)}.payment-card strong{display:block;font-size:10.5px}.payment-card small{display:block;color:var(--muted);font-size:8.5px;margin-top:3px}.auto-flow{margin:12px 0;padding:12px;border-radius:16px;border:1px solid rgba(47,225,125,.18);background:rgba(47,225,125,.06);display:flex;align-items:flex-start;gap:10px}.auto-flow>span{font-size:20px}.auto-flow strong{font-size:10px;display:block;color:#a7f6c8}.auto-flow small{font-size:8.7px;line-height:1.45;color:var(--muted);display:block;margin-top:3px}.notice{margin:12px 0;padding:11px 12px;border-radius:14px;border:1px solid rgba(244,201,101,.20);background:rgba(244,201,101,.07);color:#f8dfa7;font-size:9px;line-height:1.5}.notice.error{border-color:rgba(255,113,128,.25);background:rgba(255,113,128,.07);color:#ffb8c0}.status-card{text-align:center}.status-ring{width:82px;height:82px;border-radius:50%;margin:2px auto 13px;display:grid;place-items:center;background:rgba(47,225,125,.08);border:1px solid rgba(47,225,125,.25);font-size:33px}.status-card h2{margin:5px 0}.status-card p{font-size:10.5px;color:var(--muted);line-height:1.6}.lookup-row{display:flex;gap:8px}.lookup-row input{flex:1}.lookup-row button{width:auto}.order-result{margin-top:8px}.order-item{padding:12px 0;border-bottom:1px solid var(--line)}.order-item:last-child{border-bottom:0}.order-top{display:flex;justify-content:space-between;gap:10px}.order-id{font-size:10.5px;font-weight:1000}.order-date{font-size:8.5px;color:var(--muted)}.order-name{font-size:10.5px;margin-top:4px}.badge{display:inline-flex;margin-top:6px;padding:5px 8px;border-radius:999px;font-size:8.5px;font-weight:1000}.badge.pending{background:rgba(244,201,101,.09);color:var(--gold)}.badge.success{background:rgba(47,225,125,.09);color:#8ff2bc}.flat{box-shadow:none;border:0;background:transparent;padding:8px;color:var(--muted);text-align:center;font-size:10px}
.story-hero{height:265px;border-radius:24px;overflow:hidden;border:1px solid var(--line);background:radial-gradient(circle at 50% 35%,rgba(85,217,255,.14),transparent 17rem),linear-gradient(145deg,#152d48,#07111c);position:relative;margin-bottom:13px}.story-fallback{position:absolute;inset:0;display:grid;place-items:center}.story-fallback span{font-size:67px;font-weight:1000;letter-spacing:-9px;color:rgba(223,249,255,.86)}.story-hero .hero-image{z-index:1}.story-shade{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,transparent 36%,rgba(3,8,14,.92) 100%)}.story-title{position:absolute;left:18px;right:18px;bottom:16px;z-index:3}.story-title h1{margin:5px 0 0;font-size:25px;letter-spacing:-1px}.story-card p{font-size:10.7px;color:#c3d2dc;line-height:1.78;margin:0 0 12px}.story-quote{padding:12px;border-left:3px solid var(--cyan);background:rgba(85,217,255,.05);border-radius:0 12px 12px 0;color:#dff8ff;font-size:10.5px;line-height:1.6}
.bottom-nav{position:fixed;z-index:35;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,580px);display:grid;grid-template-columns:repeat(4,1fr);padding:8px 8px max(8px,env(safe-area-inset-bottom));background:rgba(5,14,23,.94);backdrop-filter:blur(20px);border-top:1px solid var(--line)}.bottom-nav button{border:0;background:transparent;color:var(--muted);padding:4px 2px;display:flex;flex-direction:column;align-items:center;gap:2px}.bottom-nav .nav-icon{font-size:18px;font-weight:1000}.bottom-nav .nav-rg{font-size:13px;margin-top:2px;margin-bottom:3px}.bottom-nav small{font-size:7px;white-space:nowrap;font-weight:900}.bottom-nav button.active{color:var(--cyan)}
.modal{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;justify-content:center}.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.68);backdrop-filter:blur(5px)}.modal-sheet{position:relative;z-index:1;width:min(100%,580px);max-height:82vh;overflow-y:auto;border-radius:28px 28px 0 0;border:1px solid var(--line);border-bottom:0;background:#081522;padding:10px 14px 22px;box-shadow:0 -25px 65px rgba(0,0,0,.48)}.sheet-handle{width:44px;height:4px;border-radius:99px;background:rgba(255,255,255,.14);margin:2px auto 11px}.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}.modal-head h2{font-size:18px;margin:4px 0 0}.shop-menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.shop-menu-card{border:1px solid var(--line);background:linear-gradient(145deg,var(--panel2),var(--panel));border-radius:19px;padding:12px;color:#fff;text-align:left;min-height:123px}.shop-menu-card strong{font-size:11px;display:block}.shop-menu-card small{font-size:8.5px;color:var(--muted);display:block;margin-top:4px;line-height:1.35}
@media(max-width:390px){.brand-name{font-size:15px}.brand-tag{font-size:7px}.online-badge{padding:7px}.online-badge span{display:none}.popular-row{grid-auto-columns:49%}.hero h1{font-size:28px}.service-card{min-height:145px}.bottom-nav small{font-size:6.5px}}

/* v17 production compatibility */
.product-card:disabled{opacity:.46;cursor:not-allowed;filter:saturate(.65)}
.product-card:disabled .price{color:var(--muted)}
.payment-grid.single{grid-template-columns:1fr}
.form-divider{height:1px;background:var(--line);margin:4px 0 14px}
.order-link{display:block;width:100%;border:0;background:transparent;color:inherit;text-align:left;padding:0;cursor:pointer}
.order-link:hover .order-item{background:rgba(85,217,255,.025)}
.secondary-btn.full{margin-top:9px}
.hero .rg-slider-dots{display:none!important;}

/* RG TOP UP HEADER LOGO */
.brand-logo{
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

.brand-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.brand-name{
  font-weight:900;
  letter-spacing:-0.5px;
  white-space:nowrap;
}

/* Header logo tanpa kotak/background */
.brand-logo{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.brand-logo img{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  object-fit: contain !important;
}

/* ===== RG NEON STABILO V1 ===== */
:root{
  --rg-neon:#c8ff00;
  --rg-neon-soft:rgba(200,255,0,.28);
  --rg-neon-glow:rgba(200,255,0,.18);
}

.service-card,
.product-card,
.provider-card,
.category-card,
.popular-card,
.order-card,
.story-card,
.contact-card,
.menu-card,
.card{
  border-color:var(--rg-neon-soft) !important;
  box-shadow:
    0 0 0 1px rgba(200,255,0,.08),
    0 0 9px var(--rg-neon-glow),
    inset 0 0 8px rgba(200,255,0,.035) !important;
  transition:
    box-shadow .22s ease,
    border-color .22s ease,
    transform .22s ease !important;
}

.service-card:hover,
.product-card:hover,
.provider-card:hover,
.category-card:hover,
.popular-card:hover,
.menu-card:hover,
.service-card:active,
.product-card:active,
.provider-card:active,
.category-card:active,
.popular-card:active,
.menu-card:active{
  border-color:rgba(200,255,0,.70) !important;
  box-shadow:
    0 0 0 1px rgba(200,255,0,.22),
    0 0 14px rgba(200,255,0,.38),
    0 0 25px rgba(200,255,0,.15),
    inset 0 0 10px rgba(200,255,0,.06) !important;
}


/* ===== RG NEON STABILO - GLOBAL ===== */

:is(
  .card,
  .service-card,
  .product-card,
  .provider-card,
  .category-card,
  .popular-card,
  .order-card,
  .story-card,
  .contact-card,
  .menu-card,
  .panel,
  .box,
  .modal,
  .modal-content,
  .sheet,
  .dialog,
  .checkout,
  .checkout-card,
  .payment-card,
  .payment-option,
  .payment-method,
  .order-summary,
  .order-detail,
  .status-card,
  .form-card,
  .form-group,
  .input-box,
  .receipt,
  .invoice,
  .payout,
  .payout-card
){
  border-color:rgba(200,255,0,.34) !important;

  box-shadow:
    0 0 0 1px rgba(200,255,0,.07),
    0 0 9px rgba(200,255,0,.16),
    inset 0 0 8px rgba(200,255,0,.025) !important;

  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease !important;
}


/* INPUT / FORM */
input,
select,
textarea{
  border-color:rgba(200,255,0,.30) !important;

  box-shadow:
    inset 0 0 8px rgba(200,255,0,.025),
    0 0 6px rgba(200,255,0,.09) !important;
}

input:focus,
select:focus,
textarea:focus{
  outline:none !important;

  border-color:rgba(200,255,0,.80) !important;

  box-shadow:
    0 0 0 1px rgba(200,255,0,.18),
    0 0 12px rgba(200,255,0,.30),
    inset 0 0 8px rgba(200,255,0,.04) !important;
}


/* ITEM YANG DIPILIH */
:is(
  .selected,
  .active,
  .payment-option:active,
  .payment-method:active,
  .product-card:active,
  .provider-card:active,
  .service-card:active
){
  border-color:rgba(200,255,0,.90) !important;

  box-shadow:
    0 0 0 1px rgba(200,255,0,.24),
    0 0 14px rgba(200,255,0,.42),
    0 0 26px rgba(200,255,0,.15),
    inset 0 0 10px rgba(200,255,0,.06) !important;
}


/* BUTTON UTAMA */
button.primary,
.btn-primary,
.pay-btn,
.checkout-btn,
.confirm-btn{
  box-shadow:
    0 0 8px rgba(200,255,0,.16),
    0 0 16px rgba(200,255,0,.08) !important;
}


/* MODAL / POPUP */
.modal,
.dialog,
.sheet{
  border-color:rgba(200,255,0,.28) !important;
}


/* ===== TEXT STABILO ===== */
:root{
  --stabilo: #d9ff00;
  --stabilo-glow: rgba(217,255,0,.45);
}

/* label / kicker */
.kicker,
.section-title span,
.story-title .kicker,
.story-quote,
.brand-tag,
.bottom-nav small,
.bottom-nav .active small,
.menu-card small,
.category-card small,
.order-card small,
.status-card small,
.contact-card small,
.notice small,
.chip,
.badge {
  color: var(--stabilo) !important;
  text-shadow:
    0 0 6px var(--stabilo-glow),
    0 0 12px rgba(217,255,0,.22) !important;
}

/* icon panah/menu agar serasi */
.category-card .arrow,
.menu-card .arrow,
.order-card .arrow,
.status-card .arrow {
  color: var(--stabilo) !important;
}

/* optional: tombol aktif/label aktif */
.bottom-nav .active,
.bottom-nav .active small {
  color: var(--stabilo) !important;
}

/* ===== BOTTOM NAV CLEAN + STABILO ACTIVE ===== */

.bottom-nav{
  display:flex !important;
  align-items:center !important;
  justify-content:space-around !important;
  gap:0 !important;
}

.bottom-nav button,
.bottom-nav a,
.bottom-nav .nav-item{
  flex:1 1 25% !important;
  width:25% !important;
  min-width:0 !important;

  background:transparent !important;
  border:none !important;
  outline:none !important;
  box-shadow:none !important;
  border-radius:0 !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;

  color:#7f95a5 !important;
  transition:color .2s ease, text-shadow .2s ease !important;
}

/* HAPUS KOTAK SAAT ACTIVE */
.bottom-nav .active{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}

/* MENU YANG SEDANG DIPILIH */
.bottom-nav .active,
.bottom-nav .active small,
.bottom-nav .active span,
.bottom-nav .active svg{
  color:#d9ff00 !important;
  fill:currentColor;
  text-shadow:
    0 0 5px rgba(217,255,0,.85),
    0 0 12px rgba(217,255,0,.55),
    0 0 20px rgba(217,255,0,.25) !important;
}

/* TEKS SEMUA MENU SAMA RATA */
.bottom-nav small{
  margin-top:4px !important;
  text-align:center !important;
  white-space:nowrap !important;
}


/* =========================================
   RG TOP UP - MULTICOLOR NEON THEME
   ========================================= */

:root{
  --rg-cyan:#39f3ff;
  --rg-blue:#3f7cff;
  --rg-purple:#a855ff;
  --rg-pink:#ff3bd4;
  --rg-lime:#d9ff00;
}

/* Semua kotak utama dan halaman terdalam */
:is(
  .service-card,
  .category-card,
  .provider-card,
  .product-card,
  .popular-card,
  .menu-card,
  .order-card,
  .status-card,
  .story-card,
  .contact-card,
  .form-card,
  .checkout-card,
  .payment-card,
  .payment-option,
  .payment-method,
  .order-summary,
  .order-detail,
  .receipt,
  .invoice,
  .payout-card,
  .modal-content,
  .dialog,
  .sheet,
  .panel,
  .box
){
  border:1px solid rgba(57,243,255,.32) !important;

  box-shadow:
    0 0 7px rgba(57,243,255,.16),
    0 0 12px rgba(63,124,255,.10),
    0 0 17px rgba(168,85,255,.08),
    0 0 21px rgba(255,59,212,.06),
    inset 0 0 8px rgba(217,255,0,.025) !important;

  transition:
    border-color .20s ease,
    box-shadow .20s ease,
    transform .20s ease !important;
}

/* Saat disentuh / dipilih */
:is(
  .service-card,
  .category-card,
  .provider-card,
  .product-card,
  .popular-card,
  .menu-card,
  .payment-option,
  .payment-method
):active,
:is(
  .service-card,
  .category-card,
  .provider-card,
  .product-card,
  .popular-card,
  .menu-card,
  .payment-option,
  .payment-method
).active,
:is(
  .service-card,
  .category-card,
  .provider-card,
  .product-card,
  .popular-card,
  .menu-card,
  .payment-option,
  .payment-method
).selected{
  border-color:var(--rg-lime) !important;

  box-shadow:
    0 0 8px rgba(217,255,0,.45),
    0 0 16px rgba(57,243,255,.30),
    0 0 24px rgba(168,85,255,.20),
    0 0 30px rgba(255,59,212,.13) !important;
}

/* Form sampai checkout */
input,
select,
textarea{
  border-color:rgba(57,243,255,.30) !important;
  box-shadow:
    0 0 7px rgba(57,243,255,.08),
    inset 0 0 7px rgba(168,85,255,.025) !important;
}

input:focus,
select:focus,
textarea:focus{
  outline:none !important;
  border-color:var(--rg-lime) !important;
  box-shadow:
    0 0 8px rgba(217,255,0,.30),
    0 0 14px rgba(57,243,255,.20),
    0 0 20px rgba(255,59,212,.10) !important;
}

/* Tombol utama */
.shop-btn,
.btn-primary,
.primary-btn,
.pay-btn,
.checkout-btn,
.confirm-btn{
  border:1px solid rgba(217,255,0,.55) !important;
  box-shadow:
    0 0 9px rgba(217,255,0,.20),
    0 0 15px rgba(57,243,255,.12),
    0 0 20px rgba(255,59,212,.08) !important;
}

/* Jangan beri kotak pada menu navigasi bawah */
.bottom-nav button,
.bottom-nav a,
.bottom-nav .nav-item{
  border:none !important;
  box-shadow:none !important;
  background:transparent !important;
}


/* =========================================
   RG TOP UP - NEON TEXT SYSTEM
   ========================================= */

/* Label kecil / section */
.kicker,
.section-kicker,
.section-label,
.eyebrow,
.brand-tag{
  color:#d9ff00 !important;
  text-shadow:
    0 0 5px rgba(217,255,0,.55),
    0 0 12px rgba(217,255,0,.25) !important;
  font-weight:800;
  letter-spacing:.8px;
}

/* Judul utama */
.section-title,
.hero-title,
.page-title,
.modal-title,
.checkout-title,
.order-title{
  background:linear-gradient(
    90deg,
    #39f3ff 0%,
    #4d8cff 25%,
    #a855ff 50%,
    #ff3bd4 72%,
    #d9ff00 100%
  ) !important;

  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;

  filter:
    drop-shadow(0 0 5px rgba(57,243,255,.20))
    drop-shadow(0 0 8px rgba(255,59,212,.10));
}

/* Harga */
.price,
.product-price,
.amount,
.total-price,
.grand-total{
  color:#d9ff00 !important;
  text-shadow:0 0 8px rgba(217,255,0,.24);
}

/* Status aktif / sukses */
.status-success,
.success,
.available,
.online{
  color:#d9ff00 !important;
  text-shadow:0 0 7px rgba(217,255,0,.30);
}

/* Link penting */
a:not(.bottom-nav a){
  text-decoration-color:rgba(57,243,255,.45);
}

/* Navigasi bawah:
   hanya menu aktif yang menyala */
.bottom-nav .active,
.bottom-nav .active svg,
.bottom-nav .active i,
.bottom-nav .active span{
  color:#d9ff00 !important;
  fill:currentColor;
  filter:
    drop-shadow(0 0 4px rgba(217,255,0,.65))
    drop-shadow(0 0 8px rgba(57,243,255,.28));
}

.bottom-nav button:not(.active),
.bottom-nav a:not(.active),
.bottom-nav .nav-item:not(.active){
  box-shadow:none !important;
  border:none !important;
}

/* Teks biasa tetap nyaman dibaca */
p,
.description,
.subtitle,
.product-desc,
.helper-text{
  text-shadow:none;
}


/* =========================================
   RG TOP UP - MAIN BRAND HEADER
   ========================================= */

.brand-logo{
  width:54px !important;
  height:54px !important;
  min-width:54px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  margin:0 !important;

  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  overflow:visible !important;
}

.brand-logo img{
  width:54px !important;
  height:54px !important;
  object-fit:contain !important;
  display:block !important;

  background:transparent !important;
  border:none !important;
  box-shadow:none !important;

  filter:
    drop-shadow(0 0 5px rgba(57,243,255,.30))
    drop-shadow(0 0 8px rgba(168,85,255,.18))
    drop-shadow(0 0 10px rgba(255,59,212,.12));
}

.brand{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}

.brand-name{
  color:#ffffff !important;
  font-weight:900 !important;
  letter-spacing:-.3px !important;
  text-shadow:
    0 0 7px rgba(57,243,255,.18),
    0 0 12px rgba(168,85,255,.10) !important;
}

.brand-tag{
  color:#d9ff00 !important;
  text-shadow:0 0 8px rgba(217,255,0,.35) !important;
}


/* =========================================
   RG TOP UP - BLUE NEON OVERRIDE
   ========================================= */

:root{
  --rg-lime:#4de8ff !important;
  --stabilo:#4de8ff !important;
}

/* COMING SOON + judul utama */
.hero-title,
.hero h1,
.coming-soon{
  color:#6eeaff !important;
  -webkit-text-fill-color:#6eeaff !important;
  background:none !important;
  text-shadow:
    0 0 5px rgba(78,232,255,.75),
    0 0 12px rgba(78,232,255,.45),
    0 0 20px rgba(0,153,255,.30) !important;
}

/* Semua yang sebelumnya warna stabilo */
.kicker,
.section-kicker,
.section-label,
.eyebrow,
.brand-tag,
.price,
.product-price,
.amount,
.total-price,
.grand-total,
.status-success,
.success,
.available,
.online{
  color:#4de8ff !important;
  -webkit-text-fill-color:#4de8ff !important;
  text-shadow:
    0 0 5px rgba(77,232,255,.75),
    0 0 12px rgba(77,232,255,.40) !important;
}

/* SERVICE dan label section */
.kicker,
.section-label,
.section-kicker{
  color:#62edff !important;
}

/* Menu bawah yang aktif */
.bottom-nav .active,
.bottom-nav .active span,
.bottom-nav .active i,
.bottom-nav .active svg{
  color:#4de8ff !important;
  fill:currentColor !important;
  filter:
    drop-shadow(0 0 4px rgba(77,232,255,.80))
    drop-shadow(0 0 9px rgba(0,153,255,.45)) !important;
}

/* Border aktif */
:is(
  .service-card,
  .category-card,
  .provider-card,
  .product-card,
  .popular-card,
  .menu-card,
  .payment-option,
  .payment-method
).active,
:is(
  .service-card,
  .category-card,
  .provider-card,
  .product-card,
  .popular-card,
  .menu-card,
  .payment-option,
  .payment-method
).selected{
  border-color:#4de8ff !important;
  box-shadow:
    0 0 8px rgba(77,232,255,.50),
    0 0 18px rgba(0,153,255,.30) !important;
}

/* Input fokus */
input:focus,
select:focus,
textarea:focus{
  border-color:#4de8ff !important;
  box-shadow:
    0 0 8px rgba(77,232,255,.35),
    0 0 16px rgba(0,153,255,.20) !important;
}


/* Logo header tanpa background hitam */
.brand-logo{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.brand-logo img{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  object-fit: contain !important;
}

/* WARNA BIRU untuk judul besar seperti RG COMING SOON */
.hero h1,
.hero-title,
.coming-soon,
.section-title h2,
.story-title h1,
.contact h2,
.checkout h2,
.order-detail h2,
.status-card h3,
.modal h2,
.sheet h2{
  color: #6eeaff !important;
  -webkit-text-fill-color: #6eeaff !important;
  background: none !important;
  text-shadow:
    0 0 6px rgba(110,234,255,.85),
    0 0 16px rgba(110,234,255,.45),
    0 0 28px rgba(0,153,255,.28) !important;
}

/* WARNA STABILO untuk SERVICE dan label kecil lainnya */
.kicker,
.section-kicker,
.section-label,
.eyebrow,
.brand-tag,
.story-title .kicker,
.section-title span,
.bottom-nav small,
.bottom-nav .label,
.menu-note,
.price,
.product-price,
.amount,
.total-price,
.grand-total,
.status-success,
.success{
  color: #dfff00 !important;
  -webkit-text-fill-color: #dfff00 !important;
  text-shadow:
    0 0 6px rgba(223,255,0,.95),
    0 0 14px rgba(223,255,0,.55),
    0 0 24px rgba(180,255,0,.32) !important;
}

/* ===== RG FINAL TEXT COLOR FIX ===== */

/* RG COMING SOON = BIRU NEON */
.hero h1,
.hero h1 *,
.hero-title,
.hero-title *,
.hero-copy h1,
.hero-copy h1 *,
[class*="hero"] h1,
[class*="hero"] h1 *{
  background:none !important;
  background-image:none !important;
  color:#6eeaff !important;
  -webkit-text-fill-color:#6eeaff !important;
  text-shadow:
    0 0 5px rgba(110,234,255,.95),
    0 0 12px rgba(110,234,255,.55),
    0 0 22px rgba(0,153,255,.35) !important;
}

/* SERVICE + label kecil lainnya = STABILO */
.kicker,
.kicker *,
.section-kicker,
.section-kicker *,
.section-label,
.section-label *,
.eyebrow,
.eyebrow *,
.brand-tag,
.brand-tag *,
[class*="kicker"],
[class*="section-label"]{
  background:none !important;
  color:#dfff00 !important;
  -webkit-text-fill-color:#dfff00 !important;
  text-shadow:
    0 0 5px rgba(223,255,0,.95),
    0 0 12px rgba(223,255,0,.55),
    0 0 20px rgba(180,255,0,.30) !important;
}

/* Logo benar-benar tanpa kotak */
.brand-logo,
.brand-logo img{
  background:transparent !important;
  background-color:transparent !important;
  border:none !important;
  box-shadow:none !important;
}


/* RG COMING SOON = STABILO NEON */
.hero h1,
.hero h1 *,
.hero-title,
.hero-title *,
.hero-copy h1,
.hero-copy h1 *,
[class*="hero"] h1,
[class*="hero"] h1 *{
  background:none !important;
  background-image:none !important;
  color:#dfff00 !important;
  -webkit-text-fill-color:#dfff00 !important;
  text-shadow:
    0 0 5px rgba(223,255,0,.95),
    0 0 12px rgba(223,255,0,.60),
    0 0 22px rgba(180,255,0,.35) !important;
}


/* =========================================
   RG TOP UP - BODY TEXT WHITE
   ========================================= */

/* Semua teks penjelasan di bawah judul/label */
.hero p,
.hero-copy p,
.section-content p,
.section-description,
.description,
.subtitle,
.sub-title,
.card-description,
.card-desc,
.product-desc,
.product-description,
.service-desc,
.story-text,
.contact-text,
.helper-text,
.note,
small{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  text-shadow:none !important;
}

/* Teks normal di dalam card */
.service-card p,
.category-card p,
.provider-card p,
.product-card p,
.popular-card p,
.menu-card p,
.order-card p,
.story-card p,
.contact-card p{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  text-shadow:none !important;
}

/* Jangan ubah label stabilo */
.kicker,
.section-kicker,
.section-label,
.eyebrow,
.brand-tag,
.hero h1,
.hero-title{
  color:#dfff00 !important;
  -webkit-text-fill-color:#dfff00 !important;
}


/* ===== RG FINAL TITLE COLOR ===== */

/* Judul besar di bawah label stabilo = PUTIH */
.section-title h1,
.section-title h2,
.section-title h3,
.section-header h1,
.section-header h2,
.section-header h3,
.story-title h1,
.story-title h2,
.story-title h3,
.story-card h1,
.story-card h2,
.story-card h3{
  background:none !important;
  background-image:none !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  text-shadow:none !important;
  filter:none !important;
}

/* Label kecil tetap STABILO */
.kicker,
.section-kicker,
.section-label,
.eyebrow,
.brand-tag{
  color:#dfff00 !important;
  -webkit-text-fill-color:#dfff00 !important;
  text-shadow:
    0 0 5px rgba(223,255,0,.95),
    0 0 12px rgba(223,255,0,.55) !important;
}


.section-title h1,
.section-title h2,
.section-title h3,
.section-header h1,
.section-header h2,
.section-header h3,
.story-title h1,
.story-title h2,
.story-title h3,
.story-card h1,
.story-card h2,
.story-card h3{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  background:none !important;
  background-image:none !important;
  text-shadow:none !important;
  filter:none !important;
  box-shadow:none !important;
}


/* =====================================================
   RG HERO - RUNNING NEON PERIMETER
   ===================================================== */

@property --rg-hero-angle{
  syntax:"<angle>";
  initial-value:0deg;
  inherits:false;
}

@keyframes rgHeroNeonRun{
  from{ --rg-hero-angle:0deg; }
  to{ --rg-hero-angle:360deg; }
}

/* Kotak banner utama */
.hero{
  position:relative !important;
  isolation:isolate !important;
}

/* Jalur cahaya yang berkeliling */
.hero > .rg-hero-neon-track{
  position:absolute;
  inset:0;
  z-index:20;

  border-radius:inherit;

  padding:2px;

  pointer-events:none;

  background:
    conic-gradient(
      from var(--rg-hero-angle),

      transparent 0deg,
      transparent 282deg,

      #42efff 300deg,
      #4287ff 314deg,
      #a94cff 326deg,
      #ff42d0 338deg,
      #ffae32 348deg,
      #dfff00 357deg,

      transparent 360deg
    );

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);

  -webkit-mask-composite:xor;
  mask-composite:exclude;

  filter:
    drop-shadow(0 0 4px rgba(66,239,255,.85))
    drop-shadow(0 0 7px rgba(255,66,208,.45))
    drop-shadow(0 0 9px rgba(223,255,0,.38));

  animation:
    rgHeroNeonRun 3.6s linear infinite;
}

/* Glow lembut, tidak menutupi gambar */
.hero > .rg-hero-neon-track::after{
  content:"";

  position:absolute;
  inset:-2px;

  border-radius:inherit;

  background:inherit;

  filter:blur(7px);

  opacity:.32;

  pointer-events:none;
}


/* ==============================================
   RG HERO - NEON RUNNER KEDUA, JARAK 180 DERAJAT
   ============================================== */

.hero > .rg-hero-neon-track-2{
  animation-delay:-1.8s !important;
}


/* ==========================================
   FINAL: 2 NEON RUNNER - JARAK 50/50
   ========================================== */

/* Runner pertama */
.hero > .rg-hero-neon-track:not(.rg-hero-neon-track-2){
  animation-delay:0s !important;
}

/* Runner kedua tepat setengah putaran */
.hero > .rg-hero-neon-track-2{
  animation-delay:-1.8s !important;
}

/* Pastikan runner ketiga tidak pernah terlihat */
.hero > .rg-hero-neon-track-3{
  display:none !important;
}


/* ====================================================
   FINAL RG HERO:
   2 NEON PANJANG - POSISI BERLAWANAN 50/50
   ==================================================== */

.hero > .rg-hero-neon-track{
  position:absolute !important;
  inset:0 !important;
  z-index:20 !important;

  border-radius:inherit !important;
  padding:2px !important;

  pointer-events:none !important;

  /*
   * Dua cahaya panjang:
   * Runner A = sekitar 70 derajat
   * Runner B = tepat 180 derajat di belakang
   */
  background:
    conic-gradient(
      from var(--rg-hero-angle),

      /* RUNNER 1 */
      transparent 0deg,
      #49eaff 8deg,
      #4d8cff 22deg,
      #bb4cff 38deg,
      #ff43cc 52deg,
      #ffc43c 63deg,
      #dfff00 70deg,
      transparent 78deg,

      /* GAP */
      transparent 180deg,

      /* RUNNER 2 - tepat berlawanan */
      #49eaff 188deg,
      #4d8cff 202deg,
      #bb4cff 218deg,
      #ff43cc 232deg,
      #ffc43c 243deg,
      #dfff00 250deg,
      transparent 258deg,

      transparent 360deg
    ) !important;

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0) !important;

  -webkit-mask-composite:xor !important;
  mask-composite:exclude !important;

  filter:
    drop-shadow(0 0 4px rgba(73,234,255,.90))
    drop-shadow(0 0 7px rgba(255,67,204,.42))
    drop-shadow(0 0 9px rgba(223,255,0,.40)) !important;

  animation:
    rgHeroNeonRun 4s linear infinite !important;
}

/* Jangan tampilkan clone runner lama */
.hero > .rg-hero-neon-track-2,
.hero > .rg-hero-neon-track-3{
  display:none !important;
}


/* ==========================================
   FIX FOTO HERO + NEON TETAP AKTIF
   ========================================== */

.hero{
  position:relative !important;
  isolation:auto !important;
}

/* Layer slider/gambar tetap terlihat */
.hero img,
.hero .rg-slider,
.hero .rg-slider-stage,
.hero .rg-slider-track,
.hero .rg-slider-image,
.hero .hero-slider{
  visibility:visible !important;
}

/* Neon hanya berada di pinggir dan tidak menutupi foto */
.hero > .rg-hero-neon-track{
  z-index:50 !important;
  pointer-events:none !important;
}

/* Konten teks/tombol tetap di atas foto */
.hero-content,
.hero-copy,
.hero-inner{
  position:relative !important;
  z-index:10 !important;
}


/* ==========================================
   RG STORY - 2 NEON RUNNER 50/50
   ========================================== */

.story-card,
.story-hero,
.story-banner{
  position:relative !important;
}

.story-card > .rg-story-neon-track,
.story-hero > .rg-story-neon-track,
.story-banner > .rg-story-neon-track{
  position:absolute;
  inset:0;
  z-index:50;

  border-radius:inherit;

  padding:2px;

  pointer-events:none;

  background:
    conic-gradient(
      from var(--rg-story-angle),

      transparent 0deg,

      #49eaff 8deg,
      #4d8cff 22deg,
      #bb4cff 38deg,
      #ff43cc 52deg,
      #ffc43c 63deg,
      #dfff00 70deg,

      transparent 78deg,
      transparent 180deg,

      #49eaff 188deg,
      #4d8cff 202deg,
      #bb4cff 218deg,
      #ff43cc 232deg,
      #ffc43c 243deg,
      #dfff00 250deg,

      transparent 258deg,
      transparent 360deg
    );

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);

  -webkit-mask-composite:xor;
  mask-composite:exclude;

  filter:
    drop-shadow(0 0 4px rgba(73,234,255,.85))
    drop-shadow(0 0 7px rgba(255,67,204,.38))
    drop-shadow(0 0 9px rgba(223,255,0,.35));

  animation:
    rgStoryNeonRun 4s linear infinite;
}

@property --rg-story-angle{
  syntax:"<angle>";
  initial-value:0deg;
  inherits:false;
}

@keyframes rgStoryNeonRun{
  from{--rg-story-angle:0deg}
  to{--rg-story-angle:360deg}
}


/* ==========================================
   FIX POSISI ISI HERO
   ========================================== */

.hero{
  position:relative !important;
}

/* Kembalikan tulisan + tombol ke bawah banner */
.hero .hero-content,
.hero .hero-copy,
.hero .hero-inner{
  position:absolute !important;

  left:22px !important;
  right:22px !important;

  top:auto !important;
  bottom:24px !important;

  z-index:30 !important;

  margin:0 !important;
}

/* Jarak judul dan tombol */
.hero .hero-title,
.hero h1{
  margin-top:0 !important;
  margin-bottom:7px !important;
}

.hero .hero-actions,
.hero .actions,
.hero .hero-buttons{
  margin-top:14px !important;
}

@media(max-width:600px){
  .hero .hero-content,
  .hero .hero-copy,
  .hero .hero-inner{
    left:20px !important;
    right:20px !important;
    bottom:22px !important;
  }
}


/* ==========================================
   BOTTOM NAV - TEXT ONLY
   Tidak mengubah layout / posisi
   ========================================== */

.bottom-nav small,
.bottom-nav .label,
.bottom-nav .nav-label,
.bottom-nav span:last-child{
  font-size:12px !important;
  line-height:1.05 !important;
  font-weight:900 !important;
  letter-spacing:.15px !important;
  white-space:nowrap !important;
}

/* Menu aktif tetap stabilo */
.bottom-nav .active small,
.bottom-nav .active .label,
.bottom-nav .active .nav-label,
.bottom-nav .active span:last-child{
  color:#dfff00 !important;
  text-shadow:
    0 0 5px rgba(223,255,0,.70),
    0 0 9px rgba(223,255,0,.30) !important;
}


/* ==========================================
   BOTTOM NAV - FONT LEBIH BESAR
   ========================================== */

.bottom-nav small,
.bottom-nav .label,
.bottom-nav .nav-label,
.bottom-nav span:last-child{
  font-size:14px !important;
  line-height:1.1 !important;
  font-weight:900 !important;
  letter-spacing:.2px !important;
}

/* Mobile kecil sedikit diturunkan agar tetap muat */
@media(max-width:380px){
  .bottom-nav small,
  .bottom-nav .label,
  .bottom-nav .nav-label,
  .bottom-nav span:last-child{
    font-size:13px !important;
  }
}


/* =========================================
   BOTTOM NAV FINAL - TEXT ONLY
   ========================================= */

/* Hapus semua icon navigasi */
.bottom-nav svg,
.bottom-nav i,
.bottom-nav img,
.bottom-nav .icon,
.bottom-nav .rg-nav-icon{
  display:none !important;
}

/* Tombol hanya teks */
.bottom-nav > *{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  gap:0 !important;
  text-align:center !important;
}

/* Teks utama */
.bottom-nav small,
.bottom-nav .label,
.bottom-nav .nav-label,
.bottom-nav .rg-nav-label,
.bottom-nav span:last-child{
  margin:0 !important;
  padding:0 !important;

  font-size:15px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:.35px !important;

  color:#d4e0e7 !important;

  text-align:center !important;
  white-space:nowrap !important;

  text-shadow:none !important;
  filter:none !important;
}

/* Menu aktif - neon tajam, tidak kabur */
.bottom-nav > *.active small,
.bottom-nav > *.active .label,
.bottom-nav > *.active .nav-label,
.bottom-nav > *.active .rg-nav-label,
.bottom-nav > *.active span:last-child,
.bottom-nav > *[aria-current="page"] small,
.bottom-nav > *[aria-current="page"] .label,
.bottom-nav > *[aria-current="page"] .nav-label,
.bottom-nav > *[aria-current="page"] .rg-nav-label{
  color:#dfff00 !important;

  text-shadow:
    0 0 1px #dfff00,
    0 0 3px rgba(223,255,0,.85),
    0 0 5px rgba(223,255,0,.45) !important;

  filter:none !important;
}

/* Garis neon tajam di bawah menu aktif */
.bottom-nav > *.active::after,
.bottom-nav > *[aria-current="page"]::after{
  content:"" !important;

  position:absolute !important;

  left:28% !important;
  right:28% !important;
  bottom:5px !important;

  height:2px !important;

  border-radius:2px !important;

  background:#dfff00 !important;

  box-shadow:
    0 0 2px #dfff00,
    0 0 4px rgba(223,255,0,.65) !important;
}

/* Hilangkan glow kabur lama */
.bottom-nav > *.active,
.bottom-nav > *[aria-current="page"]{
  box-shadow:none !important;
  filter:none !important;
}

/* HP kecil */
@media(max-width:380px){
  .bottom-nav small,
  .bottom-nav .label,
  .bottom-nav .nav-label,
  .bottom-nav .rg-nav-label,
  .bottom-nav span:last-child{
    font-size:14px !important;
  }
}


/* =========================================
   PROFILE / RG STORY - NEON SAFE FIX
   ========================================= */

/* Header selalu berada di lapisan paling atas */
header,
.header,
.site-header,
.app-header,
.top-header{
  position:relative;
  z-index:99999 !important;
  isolation:isolate;
}

/* Neon foto tetap berjalan tetapi tidak boleh keluar dari bingkai */
.story-card,
.story-hero,
.story-banner,
.profile-photo,
.story-photo{
  overflow:hidden !important;
}

/* Neon foto berada di bawah header */
.rg-story-neon-track,
.rg-hero-neon-track,
.rg-hero-neon-track-2{
  z-index:20 !important;
  pointer-events:none !important;
}

/* =========================================
   HAPUS NEON PADA BINGKAI TEKS
   ========================================= */

.story-content::before,
.story-content::after,
.story-copy::before,
.story-copy::after,
.story-text::before,
.story-text::after,
.profile-content::before,
.profile-content::after,
.profile-text::before,
.profile-text::after{
  content:none !important;
  display:none !important;
  animation:none !important;
  box-shadow:none !important;
  filter:none !important;
  background:none !important;
}

/* Bingkai teks normal, tanpa lampu berjalan */
.story-content,
.story-copy,
.story-text,
.profile-content,
.profile-text{
  animation:none !important;
  filter:none !important;
}

/* Neon tidak pernah menutupi header saat scroll */
header .rg-story-neon-track,
header .rg-hero-neon-track,
.header .rg-story-neon-track,
.header .rg-hero-neon-track{
  display:none !important;
}


/* =========================================
   HAPUS NEON KOTAK TEKS RG STORY SAJA
   ========================================= */

.rg-story-text-no-neon{
  animation:none !important;
  filter:none !important;
  box-shadow:none !important;

  /* tetap ada bingkai tipis biasa */
  border:1px solid rgba(80,170,200,.28) !important;
  border-image:none !important;

  background:#0c2537 !important;
}

/* Matikan efek neon pseudo-element hanya di kotak teks */
.rg-story-text-no-neon::before,
.rg-story-text-no-neon::after{
  content:none !important;
  display:none !important;
  animation:none !important;
  background:none !important;
  box-shadow:none !important;
  filter:none !important;
}

/* Kalau ada track neon yang tertanam di kotak teks */
.rg-story-text-no-neon > .rg-hero-neon-track,
.rg-story-text-no-neon > .rg-hero-neon-track-2,
.rg-story-text-no-neon > .rg-story-neon-track,
.rg-story-text-no-neon > .rg-story-neon-track-2{
  display:none !important;
}


/* FINAL: MATIKAN NEON KOTAK TEKS RG STORY */
.rg-story-no-light{
  animation:none !important;
  box-shadow:none !important;
  filter:none !important;
  outline:none !important;

  border:1px solid rgba(80,150,175,.22) !important;
  border-image:none !important;

  background-image:none !important;
}

.rg-story-no-light::before,
.rg-story-no-light::after{
  content:none !important;
  display:none !important;

  animation:none !important;
  background:none !important;
  background-image:none !important;

  border:none !important;
  box-shadow:none !important;
  filter:none !important;
  outline:none !important;
}

/* Track neon yang berada DI DALAM kotak teks saja */
.rg-story-no-light > [class*="neon"],
.rg-story-no-light > [class*="track"]{
  display:none !important;
}


/* ==========================================
   RG STORY RUNNER - STABILO ONLY
   ========================================== */

.story-hero > .rg-story-neon-track,
.story-banner > .rg-story-neon-track{
  background:
    conic-gradient(
      from var(--rg-story-angle),

      transparent 0deg,
      transparent 8deg,

      #dfff00 8deg,
      #dfff00 70deg,

      transparent 70deg,
      transparent 188deg,

      #dfff00 188deg,
      #dfff00 250deg,

      transparent 250deg,
      transparent 360deg
    ) !important;

  filter:
    drop-shadow(0 0 2px #dfff00)
    drop-shadow(0 0 4px rgba(223,255,0,.55))
    !important;
}


/* ==================================================
   FINAL FORCE - NEON FOTO RG STORY = STABILO
   ================================================== */

html body .story-hero > .rg-story-neon-track,
html body .story-hero > .rg-hero-neon-track,
html body .story-banner > .rg-story-neon-track,
html body .story-banner > .rg-hero-neon-track{

  background:none !important;

  background-image:
    conic-gradient(
      from var(--rg-story-angle, 0deg),

      transparent 0deg,
      transparent 10deg,

      #dfff00 10deg,
      #efff39 35deg,
      #dfff00 68deg,

      transparent 68deg,
      transparent 190deg,

      #dfff00 190deg,
      #efff39 215deg,
      #dfff00 248deg,

      transparent 248deg,
      transparent 360deg
    ) !important;

  border-image:none !important;

  filter:
    drop-shadow(0 0 1px #dfff00)
    drop-shadow(0 0 3px rgba(223,255,0,.75))
    !important;

  box-shadow:none !important;
}


/* kalau warna lama dibuat lewat pseudo element */
html body .story-hero > .rg-story-neon-track::before,
html body .story-hero > .rg-story-neon-track::after,
html body .story-hero > .rg-hero-neon-track::before,
html body .story-hero > .rg-hero-neon-track::after,
html body .story-banner > .rg-story-neon-track::before,
html body .story-banner > .rg-story-neon-track::after,
html body .story-banner > .rg-hero-neon-track::before,
html body .story-banner > .rg-hero-neon-track::after{
  background:none !important;
  background-image:none !important;
  border-image:none !important;
  box-shadow:none !important;
}


/* pastikan kotak teks tetap tanpa runner */
.story-card > .rg-story-neon-track,
.story-card > .rg-hero-neon-track{
  display:none !important;
}


img[src*="assets/icons/games.webp"]{
  width:68px !important;
  height:68px !important;
  object-fit:cover !important;
  object-position:center !important;
  border-radius:16px !important;
  display:block !important;
}


/* Ikon kartu Top Up Tagihan */
img[src*="icon-tagihan.png"]{
  width:96px !important;
  height:96px !important;
  object-fit:cover !important;
  border-radius:18px !important;
  display:block !important;
}

/* TOP UP TAGIHAN - IMAGE ICON */
img[src*="assets/icons/bills.webp"]{
  width:68px !important;
  height:68px !important;
  object-fit:cover !important;
  object-position:center !important;
  border-radius:16px !important;
  display:block !important;
}


img[src*="telegram-main.png"]{
  width:96px !important;
  height:96px !important;
  object-fit:contain !important;
  background:transparent !important;
  border-radius:16px !important;
  box-shadow:none !important;
}


/* ==================================================
   HERO BERANDA - 2 RUNNER STABILO, BORDER ONLY
   STORY / PROFILE TIDAK DISENTUH
   ================================================== */

.hero{
  position:relative !important;
}

/* Neon utama Beranda */
html body .hero > .rg-hero-neon-track{
  display:block !important;

  position:absolute !important;
  inset:0 !important;

  width:auto !important;
  height:auto !important;

  padding:2px !important;

  border-radius:inherit !important;

  pointer-events:none !important;
  z-index:40 !important;

  /* 2 runner stabilo berlawanan 180 derajat */
  background:
    conic-gradient(
      from var(--rg-hero-angle, 0deg),

      transparent 0deg,
      transparent 8deg,

      #dfff00 8deg,
      #efff3a 30deg,
      #dfff00 64deg,
      transparent 76deg,

      transparent 76deg,
      transparent 188deg,

      #dfff00 188deg,
      #efff3a 210deg,
      #dfff00 244deg,
      transparent 256deg,

      transparent 256deg,
      transparent 360deg
    ) !important;

  /* PENTING: hanya garis bingkai, tengah transparan */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0) !important;

  -webkit-mask-composite:xor !important;

  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0) !important;

  mask-composite:exclude !important;

  /* cahaya stabilo tajam */
  filter:
    drop-shadow(0 0 1px #dfff00)
    drop-shadow(0 0 3px rgba(223,255,0,.75))
    !important;

  box-shadow:none !important;

  animation:
    rgHeroNeonRun 4s linear infinite !important;
}

/* Runner tambahan lama dimatikan */
html body .hero > .rg-hero-neon-track-2,
html body .hero > .rg-hero-neon-track-3{
  display:none !important;
}

/* Foto Hero selalu terlihat */
.hero img,
.hero .rg-slider,
.hero .rg-slider-stage,
.hero .rg-slider-track,
.hero .rg-slider-image,
.hero .hero-slider{
  visibility:visible !important;
  opacity:1 !important;
}

/* Jangan sentuh Story */
.story-hero > .rg-story-neon-track,
.story-banner > .rg-story-neon-track{
  /* tetap menggunakan konfigurasi Story yang sekarang */
}


/* ==================================================
   FINAL FIX - HERO NEON + BOTTOM NAV
   ================================================== */

/* Hero menjadi area tertutup:
   neon tidak boleh keluar ke navigasi */
.hero{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;
}

/* Neon tetap di dalam bingkai Hero */
.hero > .rg-hero-neon-track{
  z-index:5 !important;
  pointer-events:none !important;
}

/* Isi Hero tetap di atas foto/neon */
.hero-content,
.hero-copy,
.hero-inner{
  z-index:10 !important;
}


/* ==================================================
   BOTTOM NAV - SELALU DI ATAS HERO
   ================================================== */

.bottom-nav{
  z-index:99999 !important;
  isolation:isolate !important;

  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;

  align-items:center !important;
  gap:0 !important;

  background:#03111c !important;
}

/* 4 tombol sama lebar dan simetris */
.bottom-nav > *{
  width:100% !important;
  min-width:0 !important;

  margin:0 !important;
  padding:12px 2px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  position:relative !important;

  text-align:center !important;

  transform:none !important;
  box-shadow:none !important;
  filter:none !important;
}

/* Hilangkan semua icon navigasi */
.bottom-nav > * svg,
.bottom-nav > * img,
.bottom-nav > * i,
.bottom-nav .icon,
.bottom-nav .rg-nav-icon{
  display:none !important;
}

/* Teks navigasi */
.bottom-nav small,
.bottom-nav .label,
.bottom-nav .nav-label,
.bottom-nav .rg-nav-label,
.bottom-nav span:last-child{
  width:100% !important;

  margin:0 !important;
  padding:0 !important;

  font-size:13px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:.15px !important;

  text-align:center !important;
  white-space:nowrap !important;

  color:#dfff00 !important;

  text-shadow:
    0 0 1px #dfff00,
    0 0 3px rgba(223,255,0,.45)
    !important;

  filter:none !important;
}

/* HAPUS GARIS BAWAH / ACTIVE BAR */
.bottom-nav > *::before,
.bottom-nav > *::after,
.bottom-nav > *.active::before,
.bottom-nav > *.active::after,
.bottom-nav > *.selected::before,
.bottom-nav > *.selected::after,
.bottom-nav > *[aria-current="page"]::before,
.bottom-nav > *[aria-current="page"]::after{
  content:none !important;
  display:none !important;

  width:0 !important;
  height:0 !important;

  background:none !important;
  border:none !important;
  box-shadow:none !important;
}

/* Tidak ada glow kotak yang mengganggu */
.bottom-nav > *.active,
.bottom-nav > *.selected,
.bottom-nav > *[aria-current="page"]{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  filter:none !important;
}

/* Mobile sangat kecil */
@media(max-width:360px){
  .bottom-nav small,
  .bottom-nav .label,
  .bottom-nav .nav-label,
  .bottom-nav .rg-nav-label,
  .bottom-nav span:last-child{
    font-size:12px !important;
  }
}


/* ==========================================
   BOTTOM NAV - 4 KOLOM SIMETRIS
   Tidak mengubah posisi container
   ========================================== */

.bottom-nav{
  display:flex !important;
  align-items:stretch !important;
  justify-content:flex-start !important;

  gap:0 !important;
  column-gap:0 !important;

  padding-left:0 !important;
  padding-right:0 !important;

  box-sizing:border-box !important;
}

/* Setiap tombol persis 25% */
.bottom-nav > *{
  flex:0 0 25% !important;

  width:25% !important;
  max-width:25% !important;
  min-width:0 !important;

  box-sizing:border-box !important;

  margin:0 !important;
  padding:10px 0 !important;

  left:auto !important;
  right:auto !important;

  transform:none !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;

  text-align:center !important;
}

/* Icon tepat di tengah kolom */
.bottom-nav > * svg,
.bottom-nav > * img,
.bottom-nav > * i,
.bottom-nav > * .icon,
.bottom-nav > * .rg-nav-icon{
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Tulisan tepat di tengah */
.bottom-nav small,
.bottom-nav .label,
.bottom-nav .nav-label,
.bottom-nav .rg-nav-label,
.bottom-nav span:last-child{
  width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;

  text-align:center !important;
}

/* Tetap tanpa garis bawah */
.bottom-nav > *::before,
.bottom-nav > *::after{
  content:none !important;
  display:none !important;
}


/* TOP UP TAGIHAN - ICON NOTA */
img[src*="bills-main.png"]{
  width:76px !important;
  height:76px !important;
  object-fit:contain !important;
  object-position:center !important;

  background:transparent !important;
  border:none !important;
  border-radius:14px !important;

  box-shadow:none !important;
  filter:none !important;

  display:block !important;
}


/* ==========================================
   KONTAK TELEGRAM TAMBAHAN
   ========================================== */

.rg-telegram-contact{
  margin-top:10px !important;
}

.rg-telegram-contact .contact-copy strong{
  font-weight:900 !important;
}

.rg-telegram-contact .contact-copy small{
  opacity:.85 !important;
}

.rg-telegram-contact .contact-btn{
  min-width:82px !important;
  font-weight:900 !important;
}


/* ==================================================
   RG TOP UP - CONTACT & SOCIAL PAGE
   ================================================== */

.rg-contact-hub{
  margin-top:12px !important;
}

.rg-contact-main-icon,
.rg-social-code{
  font-size:12px !important;
  font-weight:950 !important;
  letter-spacing:.4px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  color:#dfff00 !important;

  text-shadow:
    0 0 2px rgba(223,255,0,.8) !important;
}

.rg-contact-page{
  display:flex;
  flex-direction:column;
  gap:11px;
  padding-bottom:28px;
}

.rg-contact-page .contact-card{
  margin:0 !important;
}

.rg-social-title{
  margin:15px 3px 1px;

  font-size:11px;
  font-weight:950;
  letter-spacing:.7px;

  color:#dfff00;

  text-shadow:
    0 0 4px rgba(223,255,0,.45);
}

.rg-social-pending{
  opacity:.62;
}

.rg-social-pending .contact-btn{
  cursor:default !important;
  opacity:.65 !important;
}


/* LOGO RG - KONTAK & SOSIAL MEDIA */
.rg-contact-main-icon{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  background:transparent !important;
  box-shadow:none !important;
}

.rg-contact-main-icon img{
  width:48px !important;
  height:48px !important;

  object-fit:contain !important;

  display:block !important;

  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}


.rg-contact-main-icon,
.rg-contact-main-icon img{
  background:transparent !important;
  box-shadow:none !important;
  border:none !important;
}

.rg-contact-main-icon img{
  width:52px !important;
  height:52px !important;
  object-fit:contain !important;
}


/* =========================================================
   RG TOP UP - PRODUCT CARD SQUARE 1:1
   ========================================================= */

.grid2{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:12px !important;
  align-items:stretch !important;
}

.grid2 .card2{
  width:100% !important;
  aspect-ratio:1 / 1 !important;
  min-height:0 !important;
  height:auto !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:space-between !important;

  padding:12px !important;
  border-radius:18px !important;
  overflow:hidden !important;

  text-align:left !important;
  position:relative !important;
}

.grid2 .card2 img{
  width:42px !important;
  height:42px !important;
  object-fit:contain !important;
  flex:0 0 auto !important;
}

.grid2 .card2 b{
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:3 !important;
  overflow:hidden !important;

  font-size:13px !important;
  line-height:1.25 !important;
  margin-top:6px !important;
}

.grid2 .card2 small{
  display:block !important;
  width:100% !important;

  font-size:12px !important;
  line-height:1.2 !important;
  margin-top:auto !important;
}

/* Harga lebih menonjol di bawah */
.grid2 .card2 .price,
.grid2 .card2 [class*="price"]{
  margin-top:auto !important;
  font-size:13px !important;
  font-weight:800 !important;
}

/* Tablet */
@media (min-width:700px){
  .grid2{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}

/* Desktop */
@media (min-width:1100px){
  .grid2{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }
}


/* =========================================================
   RG TOP UP - PRODUCT CARD SQUARE 1:1
   ========================================================= */

.grid2{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:12px !important;
  align-items:stretch !important;
}

.grid2 .card2{
  width:100% !important;
  aspect-ratio:1 / 1 !important;
  min-height:0 !important;
  height:auto !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:space-between !important;

  padding:12px !important;
  border-radius:18px !important;
  overflow:hidden !important;

  text-align:left !important;
  position:relative !important;
}

.grid2 .card2 img{
  width:42px !important;
  height:42px !important;
  object-fit:contain !important;
  flex:0 0 auto !important;
}

.grid2 .card2 b{
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:3 !important;
  overflow:hidden !important;

  font-size:13px !important;
  line-height:1.25 !important;
  margin-top:6px !important;
}

.grid2 .card2 small{
  display:block !important;
  width:100% !important;

  font-size:12px !important;
  line-height:1.2 !important;
  margin-top:auto !important;
}

/* Harga lebih menonjol di bawah */
.grid2 .card2 .price,
.grid2 .card2 [class*="price"]{
  margin-top:auto !important;
  font-size:13px !important;
  font-weight:800 !important;
}

/* Tablet */
@media (min-width:700px){
  .grid2{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}

/* Desktop */
@media (min-width:1100px){
  .grid2{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }
}


/* ==========================================
   RG TOP UP - NOMINAL GRID COMPACT
   HALAMAN UTAMA
   ========================================== */

/* container daftar produk */
.product-list,
.products-list,
.package-list,
.nominal-list,
.product-grid,
.packages-grid,
[data-product-list],
[data-products]{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:10px !important;
}

/* kartu nominal */
.product-card,
.package-card,
.nominal-card,
.product-item,
.package-item,
[data-product],
[data-package],
[data-sku]{
  box-sizing:border-box !important;
}

/* hanya button/link kartu di dalam daftar */
.product-list > *,
.products-list > *,
.package-list > *,
.nominal-list > *,
.product-grid > *,
.packages-grid > *{
  width:100% !important;
  aspect-ratio:1 / 1 !important;
  min-width:0 !important;
  min-height:0 !important;
  height:auto !important;

  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
  align-items:flex-start !important;

  padding:12px !important;
  border-radius:18px !important;
  overflow:hidden !important;
}

/* judul nominal */
.product-list b,
.products-list b,
.package-list b,
.nominal-list b,
.product-grid b,
.packages-grid b{
  font-size:12px !important;
  line-height:1.2 !important;
  text-align:left !important;

  display:-webkit-box !important;
  -webkit-line-clamp:3 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
}

/* SKU kecil */
.product-list small,
.products-list small,
.package-list small,
.nominal-list small,
.product-grid small,
.packages-grid small{
  font-size:9px !important;
}

/* icon */
.product-list img,
.products-list img,
.package-list img,
.nominal-list img,
.product-grid img,
.packages-grid img{
  width:42px !important;
  height:42px !important;
  object-fit:contain !important;
}

/* HP sangat kecil */
@media (max-width:390px){
  .product-list,
  .products-list,
  .package-list,
  .nominal-list,
  .product-grid,
  .packages-grid,
  [data-product-list],
  [data-products]{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }
}

/* tablet */
@media (min-width:700px){
  .product-list,
  .products-list,
  .package-list,
  .nominal-list,
  .product-grid,
  .packages-grid,
  [data-product-list],
  [data-products]{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}


/* =========================================================
   RG TOPUP - PRODUCT GRID FINAL
   Mobile: 3 kolom
   ========================================================= */

.product-list,
.products-list,
.package-list,
.nominal-list,
.product-grid,
.packages-grid,
[data-product-list],
[data-products],
.grid2{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:8px !important;
  align-items:stretch !important;
}

/* KARTU */
.product-list > *,
.products-list > *,
.package-list > *,
.nominal-list > *,
.product-grid > *,
.packages-grid > *,
.grid2 > .card2{
  width:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  height:auto !important;
  aspect-ratio:1 / 1 !important;

  box-sizing:border-box !important;
  padding:8px !important;
  border-radius:14px !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;

  text-align:center !important;
  overflow:hidden !important;
}

/* LOGO PRODUK TEPAT DI TENGAH */
.product-list img,
.products-list img,
.package-list img,
.nominal-list img,
.product-grid img,
.packages-grid img,
.grid2 .card2 img{
  display:block !important;

  width:42px !important;
  height:42px !important;

  margin:2px auto 7px auto !important;

  object-fit:contain !important;
  object-position:center !important;

  align-self:center !important;
  flex-shrink:0 !important;
}

/* NAMA PRODUK */
.product-list b,
.products-list b,
.package-list b,
.nominal-list b,
.product-grid b,
.packages-grid b,
.grid2 .card2 b{
  width:100% !important;

  margin:0 auto 3px !important;

  font-size:10px !important;
  line-height:1.15 !important;
  font-weight:800 !important;

  text-align:center !important;

  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:3 !important;
  overflow:hidden !important;
}

/* SKU */
.product-list small,
.products-list small,
.package-list small,
.nominal-list small,
.product-grid small,
.packages-grid small,
.grid2 .card2 small{
  width:100% !important;
  text-align:center !important;
  font-size:8px !important;
  line-height:1.1 !important;
}

/* HARGA - BESAR DAN DI BAWAH */
.product-list .price,
.products-list .price,
.package-list .price,
.nominal-list .price,
.product-grid .price,
.packages-grid .price,
.grid2 .price,
[data-price]{
  width:100% !important;

  margin-top:auto !important;

  text-align:center !important;

  font-size:16px !important;
  line-height:1 !important;
  font-weight:900 !important;
}

/* Jika harga aplikasi berada di SMALL terakhir */
.product-list > * small:last-child,
.products-list > * small:last-child,
.package-list > * small:last-child,
.nominal-list > * small:last-child,
.product-grid > * small:last-child,
.packages-grid > * small:last-child,
.grid2 .card2 small:last-child{
  margin-top:auto !important;

  font-size:16px !important;
  line-height:1 !important;
  font-weight:900 !important;

  text-align:center !important;
}

/* HP kecil tetap 3 kolom */
@media (max-width:480px){
  .product-list,
  .products-list,
  .package-list,
  .nominal-list,
  .product-grid,
  .packages-grid,
  [data-product-list],
  [data-products],
  .grid2{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:6px !important;
  }

  .product-list > *,
  .products-list > *,
  .package-list > *,
  .nominal-list > *,
  .product-grid > *,
  .packages-grid > *,
  .grid2 > .card2{
    padding:6px !important;
  }

  .product-list img,
  .products-list img,
  .package-list img,
  .nominal-list img,
  .product-grid img,
  .packages-grid img,
  .grid2 .card2 img{
    width:38px !important;
    height:38px !important;
  }
}

/* Tablet */
@media (min-width:700px){
  .product-list,
  .products-list,
  .package-list,
  .nominal-list,
  .product-grid,
  .packages-grid,
  [data-product-list],
  [data-products],
  .grid2{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }
}



/* =========================================================
   RG TOPUP - CLEAN MOBILE PRODUCT GRID V1
   3 kartu per baris
   ========================================================= */

@media (max-width:480px){

  /* ---------- GRID ---------- */

  .daftar-produk,
  .daftar-paket,
  .daftar-nominal,
  .product-grid,
  .packages-grid,
  [daftar-produk-data],
  [produk-data],
  .grid2{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:7px !important;
    align-items:stretch !important;
    width:100% !important;
  }


  /* ---------- KARTU ---------- */

  .daftar-produk > *,
  .daftar-paket > *,
  .daftar-nominal > *,
  .product-grid > *,
  .packages-grid > *,
  [daftar-produk-data] > *,
  [produk-data] > *,
  .grid2 > .card2{
    box-sizing:border-box !important;

    width:100% !important;
    min-width:0 !important;

    min-height:154px !important;
    height:154px !important;

    margin:0 !important;
    padding:9px 5px 8px !important;

    border-radius:13px !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;

    overflow:hidden !important;

    text-align:center !important;

    position:relative !important;
  }


  /* ---------- LOGO PRODUK ---------- */

  .daftar-produk img,
  .daftar-paket img,
  .daftar-nominal img,
  .product-grid img,
  .packages-grid img,
  [daftar-produk-data] img,
  [produk-data] img,
  .grid2 .card2 img{
    width:40px !important;
    height:40px !important;

    min-width:40px !important;
    min-height:40px !important;

    max-width:40px !important;
    max-height:40px !important;

    object-fit:contain !important;

    flex:0 0 40px !important;

    margin:0 auto 5px !important;

    border-radius:9px !important;
  }


  /* ---------- SEMUA TEKS KARTU ---------- */

  .daftar-produk > * *,
  .daftar-paket > * *,
  .daftar-nominal > * *,
  .product-grid > * *,
  .packages-grid > * *,
  [daftar-produk-data] > * *,
  [produk-data] > * *,
  .grid2 > .card2 *{
    box-sizing:border-box !important;
    max-width:100% !important;
  }


  /* ---------- NAMA PRODUK ---------- */

  .product-name,
  .product-title,
  .nominal-name,
  .package-name,
  .item-name,
  .card-title,
  .nama-produk,
  .nama-paket,
  .nama-nominal{
    width:100% !important;

    margin:0 auto !important;

    font-size:11px !important;
    line-height:1.12 !important;
    font-weight:800 !important;

    text-align:center !important;

    overflow:hidden !important;

    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:3 !important;

    word-break:normal !important;
    overflow-wrap:break-word !important;
  }


  /* ---------- SKU ---------- */

  .sku,
  .product-sku,
  .buyer-sku,
  .kode,
  .product-code,
  .kode-produk{
    width:100% !important;

    margin:2px 0 0 !important;

    font-size:9px !important;
    line-height:1.05 !important;

    font-weight:700 !important;

    opacity:.78 !important;

    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }


  /* ---------- HARGA ---------- */

  .price,
  .harga,
  .product-price,
  .nominal-price,
  .package-price,
  .item-price,
  .price-tag,
  .harga-produk{
    margin-top:auto !important;
    margin-bottom:0 !important;

    width:100% !important;

    display:block !important;

    font-size:13px !important;
    line-height:1.1 !important;
    font-weight:900 !important;

    text-align:center !important;

    white-space:nowrap !important;

    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }


  /* ---------- PARAGRAF / LABEL DALAM CARD ---------- */

  .product-grid p,
  .packages-grid p,
  .daftar-produk p,
  .daftar-paket p,
  .daftar-nominal p,
  [produk-data] p,
  [daftar-produk-data] p,
  .grid2 .card2 p{
    margin:1px 0 !important;

    font-size:10px !important;
    line-height:1.08 !important;

    text-align:center !important;
  }


  /* ---------- HEADER RG ---------- */

  .brand{
    display:flex !important;
    align-items:center !important;
    min-width:0 !important;
    gap:7px !important;
  }

  .brand-logo{
    flex:0 0 auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  .brand-logo img{
    width:48px !important;
    height:48px !important;

    object-fit:contain !important;

    margin:0 !important;
    padding:0 !important;
  }

  .brand-name{
    margin:0 !important;

    font-size:17px !important;
    line-height:1 !important;
    font-weight:900 !important;

    white-space:nowrap !important;
  }

  .brand-tag{
    margin:0 !important;
    padding:0 !important;

    font-size:9px !important;
    line-height:1 !important;
  }

  .online{
    flex:0 0 auto !important;
    white-space:nowrap !important;
  }


  /* ---------- BUTTON / CARD TAP ---------- */

  .product-grid > *,
  .packages-grid > *,
  [produk-data] > *,
  [daftar-produk-data] > *,
  .grid2 > .card2{
    -webkit-tap-highlight-color:transparent !important;
  }


  /* ---------- JANGAN ADA TEKS KELUAR CARD ---------- */

  .product-grid > *,
  .packages-grid > *,
  [produk-data] > *,
  [daftar-produk-data] > *,
  .grid2 > .card2{
    overflow-wrap:anywhere !important;
  }

}


/* layar HP sangat kecil */
@media (max-width:360px){

  .daftar-produk,
  .daftar-paket,
  .daftar-nominal,
  .product-grid,
  .packages-grid,
  [daftar-produk-data],
  [produk-data],
  .grid2{
    gap:5px !important;
  }

  .daftar-produk > *,
  .daftar-paket > *,
  .daftar-nominal > *,
  .product-grid > *,
  .packages-grid > *,
  [daftar-produk-data] > *,
  [produk-data] > *,
  .grid2 > .card2{
    min-height:150px !important;
    height:150px !important;

    padding-left:4px !important;
    padding-right:4px !important;
  }

  .product-name,
  .product-title,
  .nominal-name,
  .package-name,
  .item-name,
  .card-title,
  .nama-produk,
  .nama-paket,
  .nama-nominal{
    font-size:10px !important;
  }

  .price,
  .harga,
  .product-price,
  .nominal-price,
  .package-price,
  .item-price,
  .price-tag,
  .harga-produk{
    font-size:12px !important;
  }
}

/* =========================================================
   END RG TOPUP CLEAN MOBILE
   ========================================================= */



/* RG-MOBILE-PRO-CLEANUP-START */

/* Logo game */
.rg-game-logo-auto,
.rg-game-logo-fixed {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 12px !important;
}

/* Semua tombol dibuat konsisten */
button,
.btn,
[role="button"] {
  font-family: inherit !important;
  line-height: 1.15 !important;
  text-align: center !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

/* Jangan biarkan teks card keluar */
.product-card,
.menu-card,
.service-card,
.category-card,
.provider-card,
.popular-card {
  min-width: 0 !important;
  overflow: hidden !important;
}

.product-card * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Mobile */
@media (max-width: 700px) {

  /* Parent yang langsung berisi product-card dibuat 2 kolom */
  div:has(> .product-card),
  section:has(> .product-card),
  .product-grid,
  .products-grid,
  #productGrid,
  #productsGrid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  .product-card {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 150px !important;
    padding: 11px 9px !important;
    margin: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

    font-size: 11px !important;
    line-height: 1.22 !important;
    text-align: center !important;
  }

  .product-card img {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    object-fit: contain !important;
    margin: 2px auto 7px !important;
  }

  .product-card h1,
  .product-card h2,
  .product-card h3,
  .product-card h4,
  .product-card strong,
  .product-card b {
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .product-card p,
  .product-card span,
  .product-card small {
    font-size: 10.5px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .product-card button,
  .product-card .btn {
    width: 100% !important;
    min-height: 34px !important;
    margin-top: auto !important;
    padding: 7px 6px !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
  }

  .menu-card,
  .service-card,
  .category-card,
  .popular-card {
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  .menu-card small,
  .service-card small,
  .category-card small,
  .popular-card small {
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  .menu-card button,
  .service-card button,
  .category-card button,
  .provider-card button,
  .popular-card button {
    font-size: 11px !important;
    line-height: 1.15 !important;
  }
}

/* RG-MOBILE-PRO-CLEANUP-END */


/* RG-PRO-PRICE-CSS-START */

.product-card .rg-price-pro {
  display: block !important;

  width: 100% !important;
  margin-top: auto !important;
  padding-top: 7px !important;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif !important;

  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.1px !important;

  text-align: center !important;
  white-space: nowrap !important;

  text-shadow: none !important;
  filter: none !important;

  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Rp sedikit lebih clean pada mobile */
@media (max-width: 700px) {

  .product-card .rg-price-pro {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;

    margin-top: auto !important;
    padding-top: 6px !important;
  }

}

/* layar HP sangat kecil */
@media (max-width: 380px) {

  .product-card .rg-price-pro {
    font-size: 12px !important;
    letter-spacing: 0 !important;
  }

}

/* RG-PRO-PRICE-CSS-END */


/* RG-PRICE-ONLY-START */

.product-card.rg-compact-price-card {
  min-width: 0 !important;
  min-height: 145px !important;

  padding: 12px 8px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 5px !important;

  text-align: center !important;
  overflow: hidden !important;
}

/* Sembunyikan isi lama tapi jangan hapus dari DOM */


/* Logo */
.rg-card-display-logo {
  display: block !important;

  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;

  object-fit: contain !important;

  margin: 0 auto 4px !important;

  border-radius: 10px !important;
}

/* 84 Diamond */
.rg-card-short-title {
  display: block !important;

  width: 100% !important;

  color: #ffffff !important;

  font-size: 12px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;

  text-align: center !important;

  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;

  margin: 0 !important;
}

/* Rp 2.240 */
.rg-card-short-price {
  display: block !important;

  width: 100% !important;

  color: #d7ff00 !important;

  font-size: 13px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;

  text-align: center !important;

  margin-top: 3px !important;

  text-shadow:
    0 0 6px rgba(215,255,0,.45) !important;
}


/* Detail lengkap di Data Tujuan */
.rg-selected-product-detail {
  margin: 10px 0 16px !important;
  padding: 11px 13px !important;

  border: 1px solid rgba(56,213,255,.35) !important;
  border-radius: 12px !important;

  background: rgba(5,24,36,.72) !important;
}

.rg-selected-product-detail-label {
  color: #d7ff00 !important;
  font-size: 9px !important;
  font-weight: 900 !important;

  margin-bottom: 5px !important;
}

.rg-selected-product-detail-value {
  color: #ffffff !important;

  font-size: 11px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

/* RG-PRICE-ONLY-END */

/* ===== RESTORE GAME PRICE ===== */
.rg-card-short-price {
  display: block !important;
}
/* ===== END RESTORE GAME PRICE ===== */

/* ===== RG TELCO TELEGRAM FINAL ===== */

/* Pulsa + Kuota: harga disembunyikan dari kartu pilihan */
.rg-telco-short-price {
  display: none !important;
}

/* Game tetap menampilkan harga */
.rg-card-short-price {
  display: block !important;
}

/* Pulsa + Kuota dibuat ringkas */
.rg-telco-compact-card {
  min-height: 125px !important;
  justify-content: center !important;
  gap: 8px !important;
}

/* ===== END RG TELCO TELEGRAM FINAL ===== */

/* ===== RG FIX DOUBLE GAME LOGO ===== */

/* Pada kartu game compact, sembunyikan semua gambar lama */
.product-card.rg-compact-price-card img {
  display: none !important;
}

/* Sisakan hanya satu logo utama */
.product-card.rg-compact-price-card img.rg-card-display-logo {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;

  object-fit: contain !important;
  margin: 0 auto 8px !important;
  border-radius: 10px !important;

  order: 1 !important;
}

/* Susunan kartu */
.product-card.rg-compact-price-card .rg-card-short-title {
  order: 2 !important;
  margin: 0 !important;
}

.product-card.rg-compact-price-card .rg-card-short-price {
  order: 3 !important;
  margin-top: 5px !important;
}

/* ===== END RG FIX DOUBLE GAME LOGO ===== */



/* ===== RG PRODUCT TEXT CLEAN FINAL ===== */

/* Tombol/kartu utama tetap bisa ditekan */
.product-card.rg-compact-price-card {
  position: relative !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation !important;

  min-height: 145px !important;
  padding: 12px 8px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 6px !important;
  overflow: hidden !important;
}

/*
 * Sembunyikan teks/logo bawaan lama.
 * TIDAK menyembunyikan button product-card itu sendiri,
 * jadi klik tetap bekerja.
 */
.product-card.rg-compact-price-card
> *:not(.rg-card-display-logo):not(.rg-card-short-title):not(.rg-card-short-price) {
  display: none !important;
}


/* LOGO */
.product-card.rg-compact-price-card
.rg-card-display-logo {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;

  object-fit: contain !important;
  object-position: center !important;

  margin: 0 auto 6px !important;
  border-radius: 10px !important;

  pointer-events: none !important;
}


/* CONTOH: 60 Delta Coins */
.product-card.rg-compact-price-card
.rg-card-short-title {
  display: block !important;

  width: 100% !important;
  margin: 0 !important;

  color: #fff !important;

  font-size: 11px !important;
  line-height: 1.18 !important;
  font-weight: 800 !important;

  text-align: center !important;

  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;

  pointer-events: none !important;
}


/* CONTOH: Rp 15.945 */
.product-card.rg-compact-price-card
.rg-card-short-price {
  display: block !important;

  width: 100% !important;
  margin-top: 4px !important;

  color: #d7ff00 !important;

  font-size: 12px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;

  text-align: center !important;
  white-space: nowrap !important;

  text-shadow: 0 0 6px rgba(215,255,0,.45) !important;

  pointer-events: none !important;
}


/* Mobile */
@media (max-width: 700px) {

  .product-card.rg-compact-price-card {
    min-height: 138px !important;
    padding: 10px 6px !important;
  }

  .product-card.rg-compact-price-card
  .rg-card-display-logo {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
  }

  .product-card.rg-compact-price-card
  .rg-card-short-title {
    font-size: 10.5px !important;
  }

  .product-card.rg-compact-price-card
  .rg-card-short-price {
    font-size: 11.5px !important;
  }
}

/* ===== END RG PRODUCT TEXT CLEAN FINAL ===== */

/* ===== RG PRODUCT TEXT CLEAN FINAL ===== */

/* Tombol/kartu utama tetap bisa ditekan */
.product-card.rg-compact-price-card {
  position: relative !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation !important;

  min-height: 145px !important;
  padding: 12px 8px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 6px !important;
  overflow: hidden !important;
}

/*
 * Sembunyikan teks/logo bawaan lama.
 * TIDAK menyembunyikan button product-card itu sendiri,
 * jadi klik tetap bekerja.
 */
.product-card.rg-compact-price-card
> *:not(.rg-card-display-logo):not(.rg-card-short-title):not(.rg-card-short-price) {
  display: none !important;
}


/* LOGO */
.product-card.rg-compact-price-card
.rg-card-display-logo {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;

  object-fit: contain !important;
  object-position: center !important;

  margin: 0 auto 6px !important;
  border-radius: 10px !important;

  pointer-events: none !important;
}


/* CONTOH: 60 Delta Coins */
.product-card.rg-compact-price-card
.rg-card-short-title {
  display: block !important;

  width: 100% !important;
  margin: 0 !important;

  color: #fff !important;

  font-size: 11px !important;
  line-height: 1.18 !important;
  font-weight: 800 !important;

  text-align: center !important;

  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;

  pointer-events: none !important;
}


/* CONTOH: Rp 15.945 */
.product-card.rg-compact-price-card
.rg-card-short-price {
  display: block !important;

  width: 100% !important;
  margin-top: 4px !important;

  color: #d7ff00 !important;

  font-size: 12px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;

  text-align: center !important;
  white-space: nowrap !important;

  text-shadow: 0 0 6px rgba(215,255,0,.45) !important;

  pointer-events: none !important;
}


/* Mobile */
@media (max-width: 700px) {

  .product-card.rg-compact-price-card {
    min-height: 138px !important;
    padding: 10px 6px !important;
  }

  .product-card.rg-compact-price-card
  .rg-card-display-logo {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
  }

  .product-card.rg-compact-price-card
  .rg-card-short-title {
    font-size: 10.5px !important;
  }

  .product-card.rg-compact-price-card
  .rg-card-short-price {
    font-size: 11.5px !important;
  }
}

/* ===== END RG PRODUCT TEXT CLEAN FINAL ===== */

/* ===== RG PRODUCT TEXT CLEAN FINAL ===== */

/* Tombol/kartu utama tetap bisa ditekan */
.product-card.rg-compact-price-card {
  position: relative !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation !important;

  min-height: 145px !important;
  padding: 12px 8px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 6px !important;
  overflow: hidden !important;
}

/*
 * Sembunyikan teks/logo bawaan lama.
 * TIDAK menyembunyikan button product-card itu sendiri,
 * jadi klik tetap bekerja.
 */
.product-card.rg-compact-price-card
> *:not(.rg-card-display-logo):not(.rg-card-short-title):not(.rg-card-short-price) {
  display: none !important;
}


/* LOGO */
.product-card.rg-compact-price-card
.rg-card-display-logo {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;

  object-fit: contain !important;
  object-position: center !important;

  margin: 0 auto 6px !important;
  border-radius: 10px !important;

  pointer-events: none !important;
}


/* CONTOH: 60 Delta Coins */
.product-card.rg-compact-price-card
.rg-card-short-title {
  display: block !important;

  width: 100% !important;
  margin: 0 !important;

  color: #fff !important;

  font-size: 11px !important;
  line-height: 1.18 !important;
  font-weight: 800 !important;

  text-align: center !important;

  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;

  pointer-events: none !important;
}


/* CONTOH: Rp 15.945 */
.product-card.rg-compact-price-card
.rg-card-short-price {
  display: block !important;

  width: 100% !important;
  margin-top: 4px !important;

  color: #d7ff00 !important;

  font-size: 12px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;

  text-align: center !important;
  white-space: nowrap !important;

  text-shadow: 0 0 6px rgba(215,255,0,.45) !important;

  pointer-events: none !important;
}


/* Mobile */
@media (max-width: 700px) {

  .product-card.rg-compact-price-card {
    min-height: 138px !important;
    padding: 10px 6px !important;
  }

  .product-card.rg-compact-price-card
  .rg-card-display-logo {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
  }

  .product-card.rg-compact-price-card
  .rg-card-short-title {
    font-size: 10.5px !important;
  }

  .product-card.rg-compact-price-card
  .rg-card-short-price {
    font-size: 11.5px !important;
  }
}

/* ===== END RG PRODUCT TEXT CLEAN FINAL ===== */

/* ===== RG DELTA CLEAN FINAL ===== */

.product-card.rg-delta-final-card {
  position: relative !important;

  min-height: 145px !important;
  padding: 12px 7px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 6px !important;

  overflow: hidden !important;
  cursor: pointer !important;
}

/*
 * Sembunyikan isi lama di dalam tombol.
 * Tombol .product-card sendiri tetap hidup dan tetap onclick.
 */
.product-card.rg-delta-final-card
> *:not(.rg-card-display-logo):not(.rg-card-short-title):not(.rg-card-short-price) {
  display: none !important;
}

/* LOGO */
.product-card.rg-delta-final-card .rg-card-display-logo {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  min-height: 54px !important;

  object-fit: contain !important;

  margin: 0 auto 7px !important;

  pointer-events: none !important;
}

/* DELTA COIN */
.product-card.rg-delta-final-card .rg-card-short-title {
  display: block !important;

  width: 100% !important;

  margin: 0 !important;

  color: #ffffff !important;
  font-size: 12px !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;

  text-align: center !important;
  white-space: nowrap !important;

  pointer-events: none !important;
}

/* HARGA */
.product-card.rg-delta-final-card .rg-card-short-price {
  display: block !important;

  width: 100% !important;

  margin-top: 4px !important;

  color: #d7ff00 !important;
  font-size: 12px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;

  text-align: center !important;
  white-space: nowrap !important;

  pointer-events: none !important;
}

/* ===== END RG DELTA CLEAN FINAL ===== */





/* ===== RG PAGE SCROLL FIX ===== */

html {
  height: auto !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body {
  position: relative !important;
  height: auto !important;
  min-height: 100vh !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;

  overscroll-behavior-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Container utama RG TopUp */
#app {
  position: relative !important;

  height: auto !important;
  min-height: 100vh !important;
  max-height: none !important;

  overflow: visible !important;

  /* ruang untuk bottom navigation */
  padding-bottom: 90px !important;
  box-sizing: border-box !important;
}

/* Daftar produk harus ikut tinggi isi */
.product-list {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Section negara MLBB */
.mlbb-region-section {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Bottom menu tetap menempel di bawah layar */
.bottom-nav {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 1000 !important;
}

/* ===== END RG PAGE SCROLL FIX ===== */







/* ===== RG BOTTOM NAV POSITION FIX ===== */

.bottom-nav {
  position: fixed !important;

  left: 50% !important;
  right: auto !important;
  bottom: 0 !important;

  transform: translateX(-50%) !important;

  width: min(100%, 580px) !important;
  max-width: 580px !important;

  margin: 0 !important;

  z-index: 9999 !important;

  box-sizing: border-box !important;
}

/* Pastikan konten tidak tertutup navigation */
#app {
  padding-bottom: 90px !important;
}

/* ===== END RG BOTTOM NAV POSITION FIX ===== */




/* ==================================================
   RG PERSISTENT HEADER FINAL
   Header selalu terlihat di semua halaman/menu
   ================================================== */

.topbar {
  position: fixed !important;

  top: 0 !important;
  left: 50% !important;
  right: auto !important;

  transform: translateX(-50%) !important;

  width: min(100%, 580px) !important;
  max-width: 580px !important;

  min-height: 68px !important;

  margin: 0 !important;
  padding-left: 12px !important;
  padding-right: 12px !important;

  box-sizing: border-box !important;

  z-index: 10000 !important;

  background: rgba(3, 16, 27, .98) !important;

  border-bottom:
    1px solid rgba(45, 200, 240, .18) !important;

  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

/* Jangan biarkan halaman masuk ke belakang header */
#app {
  padding-top: 82px !important;
}

/* Brand RG tetap normal */
.topbar .brand {
  position: relative !important;
  z-index: 3 !important;
}

/* ONLINE tetap di kanan */
.topbar .online-badge {
  position: relative !important;
  z-index: 3 !important;
  margin-left: auto !important;
}

/* Tombol kembali selalu berada di header */
#backBtn {
  position: relative !important;
  z-index: 4 !important;
  flex: 0 0 auto !important;
}

/*
 * Kalau class hidden dilepas oleh setBack(true),
 * tombol langsung tampil.
 */
#backBtn:not(.hidden) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Saat benar-benar hidden tetap disembunyikan */
#backBtn.hidden {
  display: none !important;
}

/* Bottom navigation tetap pada posisinya */
.bottom-nav {
  z-index: 9999 !important;
}

/* Ruang bawah agar produk terakhir tidak tertutup nav */
#app {
  padding-bottom: 100px !important;
}

/* iPhone / Telegram Mini App */
@supports (padding-top: env(safe-area-inset-top)) {
  .topbar {
    padding-top:
      max(8px, env(safe-area-inset-top)) !important;
  }

  #app {
    padding-top:
      calc(82px + env(safe-area-inset-top)) !important;
  }
}

/* ==================================================
   END RG PERSISTENT HEADER FINAL
   ================================================== */

/* ===== RG PROFILE STORY STABILLO ===== */

.story-card {
  background:
    linear-gradient(
      180deg,
      rgba(12,35,50,.98),
      rgba(5,24,38,.98)
    ) !important;

  border: 2px solid #dfff00 !important;

  box-shadow:
    0 0 8px rgba(223,255,0,.35),
    0 0 18px rgba(223,255,0,.16),
    inset 0 0 18px rgba(223,255,0,.035) !important;

  border-radius: 16px !important;
}

/* Teks utama tetap putih */
.story-card p {
  color: #ffffff !important;
}

/* Quote bawah dibuat lebih hidup */
.story-card .story-quote {
  border-left: 3px solid #dfff00 !important;

  background:
    linear-gradient(
      90deg,
      rgba(223,255,0,.08),
      rgba(0,220,255,.035)
    ) !important;

  color: #dfff00 !important;

  box-shadow:
    inset 0 0 18px rgba(223,255,0,.04) !important;
}

/* ===== END RG PROFILE STORY STABILLO ===== */



/* ===== RG PREMIUM APP ICON ===== */

.service-card img[src*="premium-apps.png"] {
  width: 72px !important;
  height: 72px !important;
  object-fit: contain !important;
  display: block !important;
}

/* ===== END RG PREMIUM APP ICON ===== */

/* PREMIUM DIRECT ICON */
.premium-direct-icon {
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:76px !important;
  height:76px !important;
  background:transparent !important;
  overflow:visible !important;
}

.premium-direct-icon img {
  display:block !important;
  width:72px !important;
  height:72px !important;
  object-fit:contain !important;
  opacity:1 !important;
  visibility:visible !important;
  background:transparent !important;
}

.premium-direct-icon,
.premium-direct-icon img {
  filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

.premium-direct-icon img {
  display:block !important;
  width:74px !important;
  height:74px !important;
  object-fit:contain !important;
  opacity:1 !important;
  visibility:visible !important;
}

/* ===== PREMIUM ICON DIRECT CSS FINAL ===== */

/* Kartu Aplikasi Premium */
.service-card[onclick*="premium"] .service-icon {
  display: none !important;
}

/* Logo dipasang langsung tanpa visual() */
.service-card[onclick*="premium"]::before {
  content:none !important;
  display:none !important;
  visibility:hidden !important;
  width:0 !important;
  height:0 !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:0 !important;
  max-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:none !important;
  background-image:none !important;
  box-shadow:none !important;
  filter:none !important;
  opacity:0 !important;
  pointer-events:none !important;
}


/* ===== END PREMIUM ICON DIRECT CSS FINAL ===== */


/* ===== PREMIUM ICON FINAL ===== */

.premium-icon-final {
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  width:74px !important;
  height:74px !important;

  margin:0 auto 8px !important;

  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;

  overflow:visible !important;
}

.premium-icon-final img {
  display:block !important;

  width:72px !important;
  height:72px !important;

  max-width:72px !important;
  max-height:72px !important;

  object-fit:contain !important;

  opacity:1 !important;
  visibility:visible !important;

  filter:none !important;
  transform:none !important;

  background:transparent !important;
}

/* Matikan percobaan pseudo-element sebelumnya */
.service-card[onclick*="premium"]::before {
  content:none !important;
  display:none !important;
  visibility:hidden !important;
  width:0 !important;
  height:0 !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:0 !important;
  max-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:none !important;
  background-image:none !important;
  box-shadow:none !important;
  filter:none !important;
  opacity:0 !important;
  pointer-events:none !important;
}


/* ===== END PREMIUM ICON FINAL ===== */

/* ==================================================
   APLIKASI PREMIUM - CSS ICON FINAL
   Tidak memakai PNG/JPG
   ================================================== */

.premium-css-icon {
  position: relative !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 66px !important;
  height: 66px !important;

  min-width: 66px !important;
  min-height: 66px !important;

  border-radius: 17px !important;

  background:
    linear-gradient(
      145deg,
      #102c42 0%,
      #071b2c 55%,
      #06111d 100%
    ) !important;

  border: 1px solid rgba(70,225,255,.70) !important;

  box-shadow:
    0 0 8px rgba(50,220,255,.30),
    inset 0 0 15px rgba(50,220,255,.08) !important;

  overflow: visible !important;

  opacity: 1 !important;
  visibility: visible !important;
}


/* 4 kotak aplikasi */
.premium-css-grid {
  display: grid !important;

  grid-template-columns: repeat(2, 13px) !important;
  grid-template-rows: repeat(2, 13px) !important;

  gap: 5px !important;
}

.premium-css-grid > span {
  display: block !important;

  width: 13px !important;
  height: 13px !important;

  border-radius: 4px !important;

  background: #dfff00 !important;

  box-shadow:
    0 0 7px rgba(223,255,0,.55) !important;
}

.premium-css-grid > span:nth-child(2),
.premium-css-grid > span:nth-child(3) {
  background: #44ddff !important;

  box-shadow:
    0 0 7px rgba(68,221,255,.55) !important;
}


/* Badge Premium */
.premium-css-star {
  position: absolute !important;

  top: -7px !important;
  right: -7px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 25px !important;
  height: 25px !important;

  border-radius: 50% !important;

  background: #dfff00 !important;
  color: #06111d !important;

  font-size: 15px !important;
  font-weight: 900 !important;

  border: 2px solid #071927 !important;

  box-shadow:
    0 0 10px rgba(223,255,0,.75) !important;
}


/* Matikan semua percobaan logo premium lama */
.service-card[onclick*="premium"]::before {
  content:none !important;
  display:none !important;
  visibility:hidden !important;
  width:0 !important;
  height:0 !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:0 !important;
  max-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:none !important;
  background-image:none !important;
  box-shadow:none !important;
  filter:none !important;
  opacity:0 !important;
  pointer-events:none !important;
}


.service-card[onclick*="premium"] .premium-direct-icon {
  display: none !important;
}

/* ==================================================
   END APLIKASI PREMIUM CSS ICON
   ================================================== */

/* ==================================================
   RG PREMIUM COMBO ICON
   Gabungan beberapa aplikasi tanpa file gambar
   ================================================== */

.premium-combo-icon{
  position:relative !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  width:72px !important;
  height:72px !important;
  min-width:72px !important;
  min-height:72px !important;

  margin:0 auto 8px !important;

  border-radius:19px !important;

  background:
    linear-gradient(145deg,#102b43,#061728 72%) !important;

  border:1px solid rgba(65,220,255,.65) !important;

  box-shadow:
    0 0 10px rgba(45,220,255,.28),
    inset 0 0 18px rgba(50,220,255,.07) !important;

  overflow:visible !important;
}


/* Grid aplikasi */
.premium-app-grid{
  position:relative !important;
  z-index:3 !important;

  display:grid !important;
  grid-template-columns:repeat(2,25px) !important;
  grid-template-rows:repeat(2,25px) !important;

  gap:5px !important;
}


/* Semua mini app */
.premium-app{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  width:25px !important;
  height:25px !important;

  border-radius:7px !important;

  color:#fff !important;

  font-size:13px !important;
  line-height:1 !important;
  font-weight:1000 !important;

  border:1px solid rgba(255,255,255,.18) !important;

  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.25),
    0 2px 6px rgba(0,0,0,.30) !important;
}


/* Netflix */
.p-netflix{
  background:
    linear-gradient(145deg,#ff1744,#9b0019) !important;
}


/* Spotify */
.p-spotify{
  background:
    linear-gradient(145deg,#38ef7d,#0b8c42) !important;
}


/* Video / streaming */
.p-video{
  background:
    linear-gradient(145deg,#28caff,#1262df) !important;

  font-size:11px !important;
}


/* Canva / design */
.p-canva{
  background:
    linear-gradient(145deg,#00d7ff,#8e42ff) !important;
}


/* Glow pusat */
.premium-combo-glow{
  position:absolute !important;

  width:55px !important;
  height:55px !important;

  border-radius:50% !important;

  background:
    radial-gradient(
      circle,
      rgba(223,255,0,.12),
      transparent 70%
    ) !important;

  pointer-events:none !important;
}


/* Badge Premium */
.premium-combo-badge{
  position:absolute !important;

  right:-7px !important;
  top:-7px !important;

  z-index:5 !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  width:24px !important;
  height:24px !important;

  border-radius:50% !important;

  background:#dfff00 !important;
  color:#061420 !important;

  border:2px solid #061420 !important;

  font-size:14px !important;
  font-weight:1000 !important;

  box-shadow:
    0 0 10px rgba(223,255,0,.80) !important;
}


/* Matikan logo Premium versi eksperimen sebelumnya */
.premium-css-icon,
.premium-direct-icon,
.premium-icon-final{
  display:none !important;
}

.service-card[onclick*="premium"]::before{
  content:none !important;
  display:none !important;
  visibility:hidden !important;
  width:0 !important;
  height:0 !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:0 !important;
  max-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:none !important;
  background-image:none !important;
  box-shadow:none !important;
  filter:none !important;
  opacity:0 !important;
  pointer-events:none !important;
}


/* ==================================================
   END RG PREMIUM COMBO ICON
   ================================================== */

/* ==================================================
   PREMIUM CARD LOGO - FORCE FINAL
   ================================================== */

/* Paksa kartu premium menyediakan ruang untuk logo */
.service-card[onclick*="premium"] {
  position: relative !important;
  padding-top: 94px !important;
}

/* Logo utama */
.service-card[onclick*="premium"]::before {
  content:none !important;
  display:none !important;
  visibility:hidden !important;
  width:0 !important;
  height:0 !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:0 !important;
  max-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:none !important;
  background-image:none !important;
  box-shadow:none !important;
  filter:none !important;
  opacity:0 !important;
  pointer-events:none !important;
}


/* Kotak gelap kecil di tengah agar tampak premium */
.service-card[onclick*="premium"]::after {
  content:none !important;
  display:none !important;
  visibility:hidden !important;
  width:0 !important;
  height:0 !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:0 !important;
  max-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:none !important;
  background-image:none !important;
  box-shadow:none !important;
  filter:none !important;
  opacity:0 !important;
  pointer-events:none !important;
}


/* Bawa bintang ke atas kotak tengah */
.service-card[onclick*="premium"]::before {
  content:none !important;
  display:none !important;
  visibility:hidden !important;
  width:0 !important;
  height:0 !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:0 !important;
  max-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:none !important;
  background-image:none !important;
  box-shadow:none !important;
  filter:none !important;
  opacity:0 !important;
  pointer-events:none !important;
}


/* Hilangkan eksperimen icon lama agar tidak bentrok */
.service-card[onclick*="premium"] .premium-css-icon,
.service-card[onclick*="premium"] .premium-combo-icon,
.service-card[onclick*="premium"] .premium-direct-icon,
.service-card[onclick*="premium"] .premium-icon-final {
  display: none !important;
}

/* ==================================================
   END PREMIUM CARD LOGO
   ================================================== */

/* PREMIUM LOGO SAFETY */
.service-card[onclick*="premium"]::after {
  content:none !important;
  display:none !important;
  visibility:hidden !important;
  width:0 !important;
  height:0 !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:0 !important;
  max-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:none !important;
  background-image:none !important;
  box-shadow:none !important;
  filter:none !important;
  opacity:0 !important;
  pointer-events:none !important;
}


/* ==================================================
   SERVICE CARD - SEMUA LOGO TENGAH
   ================================================== */

.service-grid .service-card {
  position: relative !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;

  text-align: center !important;

  min-height: 150px !important;

  padding:
    92px
    12px
    16px !important;

  box-sizing: border-box !important;
}


/* Semua container logo layanan */
.service-grid .service-card > .service-icon {
  position: absolute !important;

  top: 20px !important;
  left: 50% !important;
  right: auto !important;

  transform: translateX(-50%) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 66px !important;
  height: 66px !important;

  margin: 0 !important;

  background: transparent !important;

  z-index: 5 !important;
}


/* Semua gambar di dalam logo */
.service-grid .service-card > .service-icon img {
  display: block !important;

  width: 64px !important;
  height: 64px !important;

  max-width: 64px !important;
  max-height: 64px !important;

  margin: 0 auto !important;

  object-fit: contain !important;

  transform: none !important;

  opacity: 1 !important;
  visibility: visible !important;
}


/* Nama layanan */
.service-grid .service-card > strong {
  display: block !important;

  width: 100% !important;

  margin: 0 !important;

  text-align: center !important;
}


/* Keterangan */
.service-grid .service-card > small {
  display: block !important;

  width: 100% !important;

  margin-top: 4px !important;

  text-align: center !important;
}


/* Kalau ada arrow lama, jangan mengganggu posisi */
.service-grid .service-card > .service-arrow {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;

  transform: translateY(-50%) !important;
}


/* Premium tetap memakai logo CSS yang sekarang */
.service-grid
.service-card[onclick*="premium"] {
  padding-top: 92px !important;
}


/* ==================================================
   END SERVICE CARD CENTER
   ================================================== */


/* ===== RG ROBOT ALWAYS VISIBLE V1 ===== */

.hero{
  position:relative !important;
  overflow:hidden !important;
}

.hero > img,
.hero .hero-image,
.hero .rg-hero-image{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;

  position:absolute !important;
  inset:0 !important;

  width:100% !important;
  height:100% !important;

  object-fit:contain !important;
  object-position:center center !important;

  z-index:1 !important;

  pointer-events:none !important;

  filter:
    drop-shadow(0 0 18px rgba(180,255,0,.20))
    drop-shadow(0 0 34px rgba(0,210,255,.10)) !important;
}

.hero-fallback{
  z-index:0 !important;
}

.hero-shade{
  z-index:2 !important;
  pointer-events:none !important;
  background:
    linear-gradient(
      to top,
      rgba(2,12,22,.88) 0%,
      rgba(2,12,22,.28) 38%,
      rgba(2,12,22,.04) 72%
    ) !important;
}

.hero-content,
.hero-actions,
.hero-topline{
  position:relative !important;
  z-index:3 !important;
}

/* HP */
@media(max-width:600px){
  .hero > img,
  .hero .hero-image,
  .hero .rg-hero-image{
    object-fit:contain !important;
    object-position:center 40% !important;
    padding:10px 10px 58px !important;
    box-sizing:border-box !important;
  }
}

/* ===== END RG ROBOT ALWAYS VISIBLE V1 ===== */

/* =========================================
   RG SUPPLIER RESULT
   ========================================= */

.rg-result-box{
  margin:18px 0;
  padding:16px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background:rgba(0,0,0,.28);
}

.rg-result-title{
  font-size:11px;
  font-weight:800;
  letter-spacing:1.6px;
  opacity:.68;
  margin-bottom:10px;
}

.rg-result-content{
  padding:14px;
  margin-bottom:12px;
  border-radius:14px;
  background:rgba(255,255,255,.06);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px;
  line-height:1.65;
  overflow-wrap:anywhere;
  white-space:normal;
}

.rg-supplier-info{
  margin:16px 0;
  padding:14px;
  border-radius:14px;
  background:rgba(255,255,255,.05);
  display:flex;
  flex-direction:column;
  gap:6px;
}

.rg-supplier-info span{
  font-size:11px;
  opacity:.6;
}

.rg-supplier-info strong{
  font-size:13px;
}








/* ===== RGX MLBB STACK FINAL V2 START ===== */


/*
 * ==========================================================
 * PRODUCT-LIST
 *
 * Sekarang product-list hanya mempunyai SATU child:
 * .rgx-mlbb-stack
 *
 * Jadi layout lama tidak bisa lagi menyebarkan
 * masing-masing negara ke seluruh tinggi layar.
 * ==========================================================
 */

html body
.product-list:has(> .rgx-mlbb-stack){

  display:block !important;

  width:100% !important;

  height:auto !important;
  min-height:0 !important;
  max-height:none !important;

  margin:0 !important;

  padding:
    0 0
    94px !important;

  overflow:visible !important;

  align-content:initial !important;
  justify-content:initial !important;
}


/*
 * ==========================================================
 * STACK SEMUA REGION
 * ==========================================================
 */

html body
.rgx-mlbb-stack{

  display:flex !important;

  flex-direction:column !important;

  align-items:stretch !important;
  justify-content:flex-start !important;

  gap:4px !important;

  width:100% !important;

  height:auto !important;
  min-height:0 !important;
  max-height:none !important;

  margin:0 !important;
  padding:0 !important;

  overflow:visible !important;

  box-sizing:border-box !important;
}


/*
 * ==========================================================
 * REGION
 * ==========================================================
 */

html body
.rgx-mlbb-stack
> .rgx-mlbb-region{

  display:block !important;

  position:relative !important;

  flex:none !important;

  width:100% !important;

  height:auto !important;
  min-height:0 !important;
  max-height:none !important;

  margin:0 !important;
  padding:0 !important;

  border:
    1px solid
    rgba(54,205,255,.16) !important;

  border-radius:
    13px !important;

  background:
    linear-gradient(
      135deg,
      rgba(4,18,28,.99),
      rgba(3,12,19,.99)
    ) !important;

  box-sizing:border-box !important;

  overflow:hidden !important;

  transform:none !important;

  inset:auto !important;
}


/*
 * REGION TERTUTUP
 * Harus selalu hanya satu baris.
 */

html body
.rgx-mlbb-stack
> .rgx-mlbb-region:not(.is-open){

  flex:
    0 0
    52px !important;

  height:
    52px !important;

  min-height:
    52px !important;

  max-height:
    52px !important;

  overflow:hidden !important;
}


/*
 * REGION TERBUKA
 */

html body
.rgx-mlbb-stack
> .rgx-mlbb-region.is-open{

  flex:none !important;

  height:auto !important;
  min-height:52px !important;
  max-height:none !important;

  overflow:hidden !important;

  border-color:
    rgba(216,255,0,.34) !important;
}


/*
 * ==========================================================
 * HEADER
 * ==========================================================
 */

html body
.rgx-mlbb-stack
.rgx-mlbb-head{

  display:flex !important;

  align-items:center !important;

  width:100% !important;

  height:52px !important;
  min-height:52px !important;
  max-height:52px !important;

  margin:0 !important;

  padding:
    5px 7px !important;

  border:0 !important;

  background:transparent !important;

  color:#fff !important;

  box-sizing:border-box !important;

  overflow:hidden !important;

  text-align:left !important;
}


/*
 * ==========================================================
 * BENDERA
 * ==========================================================
 */

.rgx-mlbb-stack
.rgx-mlbb-flag{

  display:flex !important;

  align-items:center !important;
  justify-content:center !important;

  flex:
    0 0
    38px !important;

  width:38px !important;
  height:34px !important;

  margin-right:
    6px !important;

  padding:
    3px !important;

  border:
    1px solid
    rgba(65,214,255,.20) !important;

  border-radius:
    9px !important;

  background:
    rgba(6,31,44,.70) !important;

  box-sizing:border-box !important;

  overflow:hidden !important;
}


.rgx-mlbb-stack
.rgx-mlbb-flag img{

  display:block !important;

  width:100% !important;
  height:100% !important;

  margin:0 !important;

  object-fit:cover !important;

  border-radius:
    5px !important;
}


.rgx-mlbb-stack
.rgx-mlbb-dual{

  gap:2px !important;
}


.rgx-mlbb-stack
.rgx-mlbb-dual img{

  width:
    calc(50% - 1px) !important;
}


/*
 * ==========================================================
 * KODE NEGARA
 * ==========================================================
 */

.rgx-mlbb-stack
.rgx-mlbb-code{

  display:flex !important;

  align-items:center !important;
  justify-content:center !important;

  flex:
    0 0 auto !important;

  min-width:
    28px !important;

  height:
    20px !important;

  margin-right:
    7px !important;

  padding:
    0 5px !important;

  border:
    1px solid
    rgba(59,211,255,.20) !important;

  border-radius:
    6px !important;

  background:
    rgba(38,195,245,.045) !important;

  color:
    #5fe3ff !important;

  font-size:
    6.5px !important;

  font-weight:
    1000 !important;

  line-height:
    1 !important;
}


/*
 * ==========================================================
 * NAMA REGION
 * ==========================================================
 */

.rgx-mlbb-stack
.rgx-mlbb-name{

  display:flex !important;

  flex-direction:column !important;

  justify-content:center !important;

  flex:
    1 1 auto !important;

  min-width:0 !important;
}


.rgx-mlbb-stack
.rgx-mlbb-name strong{

  display:block !important;

  margin:0 !important;

  color:#fff !important;

  font-size:
    10.5px !important;

  font-weight:
    950 !important;

  line-height:
    1.05 !important;

  overflow:hidden !important;

  white-space:
    nowrap !important;

  text-overflow:
    ellipsis !important;
}


.rgx-mlbb-stack
.rgx-mlbb-name small{

  display:block !important;

  margin:
    3px 0 0 !important;

  color:
    #6a8292 !important;

  font-size:
    6.3px !important;

  line-height:
    1 !important;

  white-space:
    nowrap !important;
}


/*
 * ==========================================================
 * COUNT
 * ==========================================================
 */

.rgx-mlbb-stack
.rgx-mlbb-count{

  display:flex !important;

  flex-direction:column !important;

  align-items:center !important;
  justify-content:center !important;

  flex:
    0 0
    48px !important;

  width:
    48px !important;

  height:
    33px !important;

  margin-left:
    5px !important;

  border:
    1px solid
    rgba(255,255,255,.045) !important;

  border-radius:
    8px !important;

  background:
    rgba(255,255,255,.015) !important;
}


.rgx-mlbb-stack
.rgx-mlbb-count b{

  color:#fff !important;

  font-size:
    9px !important;

  font-weight:
    1000 !important;

  line-height:
    1 !important;
}


.rgx-mlbb-stack
.rgx-mlbb-count small{

  margin-top:
    2px !important;

  color:
    #6e8491 !important;

  font-size:
    5px !important;

  font-weight:
    900 !important;

  letter-spacing:
    .45px !important;
}


/*
 * ==========================================================
 * PLUS / MINUS
 * ==========================================================
 */

.rgx-mlbb-stack
.rgx-mlbb-toggle{

  display:flex !important;

  align-items:center !important;
  justify-content:center !important;

  flex:
    0 0
    25px !important;

  width:
    25px !important;

  height:
    25px !important;

  margin-left:
    5px !important;

  border:
    1px solid
    rgba(59,211,255,.36) !important;

  border-radius:
    7px !important;

  background:
    rgba(5,34,47,.67) !important;

  color:
    #d9ff00 !important;

  font-size:
    14px !important;

  font-weight:
    1000 !important;

  line-height:
    1 !important;
}


/*
 * ==========================================================
 * PRODUK TERTUTUP
 * ==========================================================
 */

.rgx-mlbb-stack
.rgx-mlbb-products[hidden]{

  display:none !important;

  width:0 !important;

  height:0 !important;
  min-height:0 !important;
  max-height:0 !important;

  margin:0 !important;
  padding:0 !important;

  overflow:hidden !important;
}


/*
 * ==========================================================
 * PRODUK TERBUKA
 * ==========================================================
 */

.rgx-mlbb-stack
.rgx-mlbb-region.is-open
> .rgx-mlbb-products:not([hidden]){

  display:grid !important;

  position:relative !important;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    ) !important;

  grid-auto-rows:auto !important;

  gap:
    6px !important;

  width:100% !important;

  height:auto !important;
  min-height:0 !important;
  max-height:none !important;

  margin:0 !important;

  padding:
    7px !important;

  border-top:
    1px solid
    rgba(255,255,255,.04) !important;

  overflow:visible !important;

  box-sizing:border-box !important;

  background:
    rgba(0,0,0,.05) !important;
}


/*
 * ==========================================================
 * PRODUCT CARD
 * ==========================================================
 */

.rgx-mlbb-stack
.rgx-mlbb-products
.product-card{

  position:relative !important;

  min-width:0 !important;

  min-height:
    64px !important;

  margin:0 !important;

  z-index:auto !important;

  transform:none !important;
}


/* ===== RGX MLBB STACK FINAL V2 END ===== */



/* ===== RG MLBB REAL 3 COLUMN FINAL START ===== */

/*
 * Container produk region MLBB yang sebenarnya.
 */
.rgx-mlbb-region.is-open
> .rgx-mlbb-products:not([hidden]){

  display:grid !important;

  grid-template-columns:
    repeat(3,minmax(0,1fr)) !important;

  grid-auto-rows:auto !important;

  gap:7px !important;

  width:100% !important;

  margin:0 !important;

  padding:7px !important;

  box-sizing:border-box !important;
}


/*
 * Kartu produk.
 */
.rgx-mlbb-products
> .product-card{

  display:flex !important;

  flex-direction:column !important;

  align-items:center !important;
  justify-content:center !important;

  width:100% !important;

  min-width:0 !important;
  min-height:138px !important;

  margin:0 !important;

  padding:10px 5px !important;

  gap:5px !important;

  text-align:center !important;

  box-sizing:border-box !important;

  border-radius:15px !important;
}


/*
 * Isi kartu vertikal.
 */
.rgx-mlbb-products
.product-left{

  display:flex !important;

  flex-direction:column !important;

  align-items:center !important;
  justify-content:center !important;

  width:100% !important;

  min-width:0 !important;

  gap:7px !important;

  text-align:center !important;
}


/*
 * Icon.
 */
.rgx-mlbb-products
.product-icon{

  width:48px !important;
  height:48px !important;

  flex:0 0 48px !important;

  margin:0 auto !important;
}


.rgx-mlbb-products
.product-icon img{

  width:100% !important;
  height:100% !important;

  object-fit:contain !important;
}


/*
 * Nama produk.
 */
.rgx-mlbb-products
.product-card strong{

  display:block !important;

  width:100% !important;

  margin:0 !important;

  font-size:9.5px !important;

  line-height:1.2 !important;

  text-align:center !important;

  white-space:normal !important;

  overflow-wrap:anywhere !important;
}


/*
 * Keterangan kecil.
 */
.rgx-mlbb-products
.product-card small{

  display:block !important;

  width:100% !important;

  margin-top:2px !important;

  font-size:7px !important;

  line-height:1.15 !important;

  text-align:center !important;

  white-space:normal !important;
}


/*
 * Harga.
 */
.rgx-mlbb-products
.product-card
.price{

  display:block !important;

  width:100% !important;

  margin:
    4px 0
    0 !important;

  color:#d9ff00 !important;

  font-size:10px !important;

  font-weight:1000 !important;

  line-height:1.1 !important;

  text-align:center !important;

  white-space:nowrap !important;
}


/*
 * Mobile kecil tetap 3 kartu per baris.
 */
@media(max-width:390px){

  .rgx-mlbb-region.is-open
  > .rgx-mlbb-products:not([hidden]){

    grid-template-columns:
      repeat(3,minmax(0,1fr)) !important;

    gap:5px !important;

    padding:5px !important;
  }


  .rgx-mlbb-products
  > .product-card{

    min-height:128px !important;

    padding:8px 3px !important;
  }


  .rgx-mlbb-products
  .product-icon{

    width:43px !important;
    height:43px !important;

    flex-basis:43px !important;
  }


  .rgx-mlbb-products
  .product-card strong{

    font-size:8.5px !important;
  }


  .rgx-mlbb-products
  .product-card
  .price{

    font-size:9px !important;
  }

}

/* ===== RG MLBB REAL 3 COLUMN FINAL END ===== */



/* ===== RG HERO 16X9 HORIZONTAL SLIDER V1 START ===== */


/* =========================================================
   HERO HOME = 16:9
   ========================================================= */

html body
.app-shell main
> .hero{

  position:relative !important;

  width:100% !important;

  height:auto !important;

  min-height:0 !important;
  max-height:none !important;

  aspect-ratio:16 / 9 !important;

  margin:0 !important;

  border-radius:22px !important;

  overflow:hidden !important;

  isolation:isolate !important;
}


/*
 * Gambar fallback asli juga wajib memenuhi 16:9.
 */
html body
.hero > .hero-image{

  position:absolute !important;

  inset:0 !important;

  width:100% !important;
  height:100% !important;

  object-fit:cover !important;

  object-position:center !important;
}


/* =========================================================
   HORIZONTAL SLIDER STAGE
   ========================================================= */

html body
.hero
> .rg-slider-stage-horizontal{

  position:absolute !important;

  inset:0 !important;

  z-index:1 !important;

  width:100% !important;
  height:100% !important;

  overflow:hidden !important;

  border-radius:inherit !important;

  background:#04101a !important;

  pointer-events:none !important;

  transform:translateZ(0) !important;
}


/*
 * Dua frame digunakan bergantian.
 * Satu keluar ke kiri, berikutnya masuk dari kanan.
 */
html body
.hero
.rg-slider-image-horizontal{

  position:absolute !important;

  inset:0 !important;

  display:block !important;

  width:100% !important;
  height:100% !important;

  max-width:none !important;
  max-height:none !important;

  margin:0 !important;
  padding:0 !important;

  border:0 !important;
  border-radius:0 !important;

  object-fit:cover !important;

  object-position:center !important;

  opacity:1 !important;

  visibility:visible !important;

  backface-visibility:hidden !important;

  will-change:transform !important;

  transform:translate3d(0,0,0);
}


/*
 * Shade tetap di atas gambar.
 */
html body
.hero > .hero-shade{

  z-index:2 !important;
}


/*
 * Tombol / tulisan tetap di atas slider.
 */
html body
.hero > .hero-content{

  z-index:30 !important;
}


/*
 * Neon border harus paling atas,
 * tetapi tidak menghalangi swipe.
 */
html body
.hero > .rg-hero-neon-track{

  z-index:50 !important;

  pointer-events:none !important;
}


/* =========================================================
   HERO CONTENT RESPONSIVE 16:9
   ========================================================= */

html body
.hero .hero-content{

  left:16px !important;
  right:16px !important;

  bottom:14px !important;
}


html body
.hero .hero-actions{

  margin-top:8px !important;

  gap:7px !important;
}


html body
.hero .shop-btn,
html body
.hero .ghost-btn{

  min-height:38px !important;

  padding:9px 12px !important;

  border-radius:12px !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:520px){

  html body
  .app-shell main
  > .hero{

    width:100% !important;

    aspect-ratio:16 / 9 !important;

    min-height:0 !important;

    border-radius:18px !important;
  }


  html body
  .hero .hero-content{

    left:13px !important;
    right:13px !important;

    bottom:12px !important;
  }


  html body
  .hero .shop-btn,
  html body
  .hero .ghost-btn{

    min-height:34px !important;

    padding:7px 10px !important;
  }

}


/* ===== RG HERO 16X9 HORIZONTAL SLIDER V1 END ===== */



/* ==========================================================
   RG DUITKU HOMEPAGE VERIFICATION V1
   Produk + harga + informasi usaha
   ========================================================== */

.rg-public-product-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.rg-public-product{
  min-width:0;
  padding:14px;
  border:1px solid var(--line);
  border-radius:20px;
  background:
    linear-gradient(
      145deg,
      var(--panel2),
      var(--panel)
    );
  box-shadow:
    0 12px 28px rgba(0,0,0,.16);
}

.rg-public-product-category{
  margin-bottom:7px;
  color:var(--cyan);
  font-size:8px;
  line-height:1.35;
  font-weight:1000;
  letter-spacing:1px;
  text-transform:uppercase;
}

.rg-public-product h3{
  margin:0 0 5px;
  font-size:14px;
  line-height:1.3;
}

.rg-public-product-name{
  display:block;
  min-height:28px;
  color:#dcebf4;
  font-size:10px;
  line-height:1.4;
}

.rg-public-product p{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;

  min-height:47px;
  margin:9px 0;

  color:var(--muted);
  font-size:9px;
  line-height:1.55;
}

.rg-public-product-price{
  padding-top:8px;
  border-top:1px solid var(--line);

  color:#dffaff;
  font-size:13px;
  font-weight:1000;
}

.rg-public-shop-btn{
  margin-top:11px;
}


.rg-business-information{
  padding:16px;
  border:1px solid var(--line);
  border-radius:22px;
  background:
    linear-gradient(
      145deg,
      #0d2133,
      #091723
    );
  box-shadow:var(--shadow);
}

.rg-business-name{
  margin-bottom:13px;
  padding-bottom:12px;
  border-bottom:1px solid var(--line);

  color:#f5fbff;
  font-size:14px;
  font-weight:1000;
  line-height:1.4;
}

.rg-business-row{
  display:grid;
  grid-template-columns:125px minmax(0,1fr);
  gap:10px;

  padding:8px 0;
  border-bottom:1px dashed var(--line);

  font-size:10px;
  line-height:1.55;
}

.rg-business-row:last-child{
  border-bottom:0;
}

.rg-business-row > span{
  color:var(--muted);
}

.rg-business-row a,
.rg-business-row strong{
  min-width:0;

  color:#e4f8ff;
  font-weight:800;
  text-decoration:none;
  overflow-wrap:anywhere;
}

.rg-business-address strong{
  font-weight:700;
}


@media(max-width:420px){

  .rg-public-product-grid{
    grid-template-columns:1fr;
  }

  .rg-public-product-name,
  .rg-public-product p{
    min-height:0;
  }

  .rg-business-row{
    grid-template-columns:1fr;
    gap:3px;
  }
}

/* END RG DUITKU HOMEPAGE VERIFICATION V1 */



/* ==========================================================
   RG BUSINESS CONTACT IN SOCIAL V1
   ========================================================== */

.rg-business-mini{
  display:flex;
  align-items:center;
  gap:12px;

  margin-top:9px;
  padding:10px 12px;

  border:1px solid rgba(85,217,255,.12);
  border-radius:15px;

  background:
    rgba(8,23,36,.58);

  cursor:pointer;
}

.rg-business-mini-copy{
  min-width:0;
  flex:1;

  display:flex;
  flex-direction:column;
  gap:3px;
}

.rg-business-mini-copy strong{
  font-size:9px;
  line-height:1.35;
  color:#dff8ff;
}

.rg-business-mini-copy small{
  display:block;

  font-size:7.5px;
  line-height:1.4;

  color:var(--muted);

  overflow-wrap:anywhere;
}

.rg-business-mini-address{
  opacity:.72;
}

.rg-business-mini-open{
  flex:0 0 auto;

  color:var(--cyan);
  font-size:8px;
  font-weight:1000;
  letter-spacing:.4px;
}


.rg-business-information-contact{
  margin-bottom:18px;
}

.rg-social-section-title{
  margin-top:18px !important;
}


@media(max-width:420px){

  .rg-business-mini{
    padding:9px 10px;
  }

  .rg-business-mini-address{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:1;
    overflow:hidden;
  }
}

/* END RG BUSINESS CONTACT IN SOCIAL V1 */



/* ==========================================================
   RG COMPACT PRODUCT PRICE V1
   ========================================================== */

.service-card .rg-service-price{
  display:block;
  position:absolute;

  left:15px;
  bottom:13px;

  z-index:2;

  color:var(--cyan);
  font-size:9px;
  font-weight:1000;
  line-height:1.2;
}


/*
 * Beri ruang agar harga tidak bertabrakan
 * dengan deskripsi service.
 */
.service-card small{
  padding-bottom:17px;
}


.rg-premium-list-card{
  align-items:flex-start;
}


.rg-premium-list-card .list-meta small{
  display:-webkit-box;

  margin-top:5px;

  color:var(--muted);

  font-size:9px;
  line-height:1.45;

  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;

  overflow:hidden;
}


.rg-item-price{
  display:block;

  margin-top:7px;

  color:var(--cyan);
  font-size:9px;
  font-weight:1000;
}


/*
 * Section besar lama disembunyikan juga sebagai
 * pengaman bila masih tersisa dari cache/render lama.
 */
.rg-public-product-title,
.rg-public-product-grid,
.rg-public-shop-btn{
  display:none !important;
}

/* END RG COMPACT PRODUCT PRICE V1 */



/* ===== RG ROBOT SVG FINAL ===== */

.hero {
  position: relative !important;
  overflow: hidden !important;
}

.hero .hero-image,
.hero > img.hero-image {
  display: block !important;

  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;
  object-position: center center !important;

  opacity: 1 !important;
  visibility: visible !important;

  z-index: 1 !important;

  pointer-events: none !important;
}

.hero .hero-fallback {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
}

.hero .hero-shade {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

.hero .hero-content {
  position: relative !important;
  z-index: 5 !important;
}

/* Profil juga memakai robot SVG yang sama */
.story-hero .hero-image,
.story-hero > img.hero-image {
  display: block !important;

  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;
  object-position: center !important;

  opacity: 1 !important;
  visibility: visible !important;

  z-index: 1 !important;
}

/* ===== END RG ROBOT SVG FINAL ===== */


/* ===== HERO BUTTON POSITION FIX ===== */

.hero {
  position: relative !important;
}

.hero .hero-content {
  position: absolute !important;

  left: 20px !important;
  right: 20px !important;
  bottom: 18px !important;
  top: auto !important;

  z-index: 10 !important;

  margin: 0 !important;
  padding: 0 !important;

  pointer-events: none !important;
}

.hero .hero-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;

  pointer-events: auto !important;
}

.hero .hero-actions button {
  pointer-events: auto !important;
}

/* ===== END HERO BUTTON POSITION FIX ===== */

/* HAPUS ONLINE DI HERO/BANNER SAJA */
.hero .hero-actions .ghost-btn {
  display: none !important;
}



/* ===== SAMAKU HEADER FONT ===== */
.brand-name{
  font-family: 'Audiowide', sans-serif !important;
  font-size: 30px !important;
  font-weight: 400 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-shadow:
    0 0 3px rgba(255,255,255,.22),
    0 0 8px rgba(0,180,255,.16),
    0 0 14px rgba(120,255,180,.08);
}



/* ===== SAMAKU AMAKU BRAND FINAL ===== */

.brand {
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}

.brand-copy {
  display:flex !important;
  align-items:center !important;
}

.brand-name {
  display:inline-block !important;

  font-family:'Orbitron', 'Audiowide', sans-serif !important;
  font-size:28px !important;
  font-weight:800 !important;
  letter-spacing:1px !important;
  line-height:1 !important;

  background:linear-gradient(
    90deg,
    #ffe735 0%,
    #baff25 27%,
    #37e9ff 62%,
    #247cff 100%
  ) !important;

  -webkit-background-clip:text !important;
  background-clip:text !important;

  -webkit-text-fill-color:transparent !important;
  color:transparent !important;

  white-space:nowrap !important;

  text-shadow:
    0 0 5px rgba(255,235,53,.10),
    0 0 9px rgba(186,255,37,.12),
    0 0 13px rgba(55,233,255,.10) !important;
}

.brand-logo img {
  filter:
    drop-shadow(0 0 5px rgba(186,255,37,.18))
    drop-shadow(0 0 9px rgba(55,233,255,.14)) !important;
}

/* ===== END SAMAKU AMAKU BRAND FINAL ===== */


/* ===== RAPATKAN LOGO + AMAKU ===== */

.brand{
  gap:3px !important;
}

.brand-logo{
  margin-right:0 !important;
}

.brand-copy{
  margin-left:0 !important;
}

/* ===== END RAPATKAN LOGO + AMAKU ===== */

/* ===== SAMAKU LETTER LOOP ===== */

.samaku-animated-name .brand-letter {
  animation-duration: 3.8s !important;
  animation-timing-function: ease-in-out !important;
  animation-iteration-count: infinite !important;
  animation-fill-mode: both !important;
}

/* Urutan A M A K U */
.samaku-animated-name .letter-a1 {
  animation-name: samakuLoopA1 !important;
}

.samaku-animated-name .letter-m {
  animation-name: samakuLoopM !important;
}

.samaku-animated-name .letter-a2 {
  animation-name: samakuLoopA2 !important;
}

.samaku-animated-name .letter-k {
  animation-name: samakuLoopK !important;
}

.samaku-animated-name .letter-u {
  animation-name: samakuLoopU !important;
}


/* A pertama */
@keyframes samakuLoopA1 {
  0%, 5% {
    opacity: 0;
    transform: translateX(-16px) scale(.82);
    filter: blur(4px) brightness(1.5);
  }

  12%, 72% {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0) brightness(1);
  }

  84%, 100% {
    opacity: 0;
    transform: translateX(-10px) scale(.90);
    filter: blur(3px);
  }
}


/* M keluar setelah A */
@keyframes samakuLoopM {
  0%, 14% {
    opacity: 0;
    transform: translateX(-16px) scale(.82);
    filter: blur(4px) brightness(1.5);
  }

  22%, 72% {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0) brightness(1);
  }

  84%, 100% {
    opacity: 0;
    transform: translateX(-10px) scale(.90);
    filter: blur(3px);
  }
}


/* A kedua */
@keyframes samakuLoopA2 {
  0%, 24% {
    opacity: 0;
    transform: translateX(-16px) scale(.82);
    filter: blur(4px) brightness(1.5);
  }

  32%, 72% {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0) brightness(1);
  }

  84%, 100% {
    opacity: 0;
    transform: translateX(-10px) scale(.90);
    filter: blur(3px);
  }
}


/* K */
@keyframes samakuLoopK {
  0%, 34% {
    opacity: 0;
    transform: translateX(-16px) scale(.82);
    filter: blur(4px) brightness(1.5);
  }

  42%, 72% {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0) brightness(1);
  }

  84%, 100% {
    opacity: 0;
    transform: translateX(-10px) scale(.90);
    filter: blur(3px);
  }
}


/* U terakhir */
@keyframes samakuLoopU {
  0%, 44% {
    opacity: 0;
    transform: translateX(-16px) scale(.82);
    filter: blur(4px) brightness(1.5);
  }

  52%, 72% {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0) brightness(1);
  }

  84%, 100% {
    opacity: 0;
    transform: translateX(-10px) scale(.90);
    filter: blur(3px);
  }
}


/* Logo S ikut pulse pelan */
.brand-logo {
  animation:
    samakuLogoLoop 3.8s ease-in-out infinite !important;
}

@keyframes samakuLogoLoop {
  0%, 100% {
    transform: scale(1);
    filter:
      brightness(1)
      drop-shadow(0 0 4px rgba(60,220,255,.16));
  }

  8% {
    transform: scale(1.06);
    filter:
      brightness(1.22)
      drop-shadow(0 0 8px rgba(190,255,40,.30))
      drop-shadow(0 0 12px rgba(50,220,255,.26));
  }

  18%, 72% {
    transform: scale(1);
    filter:
      brightness(1)
      drop-shadow(0 0 5px rgba(60,220,255,.14));
  }

  84% {
    transform: scale(.98);
  }
}

/* ===== END SAMAKU LETTER LOOP ===== */

/* RG-BILL-UI-CSS-V1 */
.rg-bill-panel{padding:10px 14px 100px}
.rg-bill-card,.rg-bill-summary{background:#0e2638;border:1px solid rgba(39,207,255,.28);border-radius:18px;padding:16px;margin:0 0 12px;box-shadow:0 10px 34px rgba(0,0,0,.18)}
.rg-bill-label{display:block;font-size:11px;font-weight:800;margin:10px 0 6px;color:#dff7ff}
.rg-bill-input{width:100%;box-sizing:border-box;border:1px solid rgba(68,201,255,.30);border-radius:12px;background:#071723;color:#fff;padding:12px;font-size:13px;outline:none}
.rg-bill-input:focus{border-color:#36d7ff;box-shadow:0 0 0 3px rgba(54,215,255,.08)}
.rg-bill-primary{width:100%;margin-top:14px;border:0;border-radius:12px;padding:13px 14px;font-size:12px;font-weight:900;background:#caff00;color:#07120b;box-shadow:0 0 18px rgba(202,255,0,.22);cursor:pointer}
.rg-bill-message{min-height:17px;margin-top:10px;font-size:11px;color:#ffcc6b;text-align:center}
.rg-bill-loading,.empty-card{padding:22px;text-align:center}.rg-bill-summary-title{font-size:15px;font-weight:900;margin-bottom:10px}
.rg-bill-summary>div:not(.rg-bill-summary-title){display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:11px}
.rg-bill-summary span{opacity:.72}.rg-bill-summary strong{text-align:right}.rg-bill-summary .rg-bill-total{margin-top:4px;padding-top:10px!important;border-bottom:0!important;font-size:14px!important;color:#d8ff1f}
@media(max-width:480px){.rg-bill-panel{padding:8px 10px 92px}.rg-bill-card,.rg-bill-summary{border-radius:15px;padding:13px}.rg-bill-input{font-size:12px;padding:11px}}

/* RG-PAY-VIA-APPS-STYLE-V1 */
.rg-pay-via-app{
  margin-top:10px;
  opacity:.92;
}


/* RG-MINIAPP-GRID-FINAL-V1 START */

@media (max-width:820px){

  .service-grid{
    display:grid !important;
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
    width:100% !important;
  }

  .service-grid > .service-card{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;

    height:138px !important;
    min-height:138px !important;

    box-sizing:border-box !important;

    padding:10px 7px 8px !important;
  }

  .service-grid > .service-card strong{
    font-size:11px !important;
    line-height:1.15 !important;
  }

  .service-grid > .service-card small{
    font-size:7.5px !important;
    line-height:1.25 !important;
  }

  /*
   * Premium tetap 2x2 di dalam kartunya,
   * bukan mengubah grid layanan utama.
   */
  .service-grid
  > .service-card[data-service="premium"]
  .rg-premium-logo-grid{
    left:50% !important;
    top:52% !important;
    transform:translate(-50%,-50%) !important;
  }

  .service-grid
  > .service-card[data-service="premium"]
  > .rg-service-title{
    left:4px !important;
    right:4px !important;
    top:12px !important;

    text-align:center !important;
  }

  .service-grid
  > .service-card[data-service="premium"]
  > .rg-service-desc{
    left:5px !important;
    right:5px !important;
    bottom:8px !important;

    text-align:center !important;
  }

}

/* RG-MINIAPP-GRID-FINAL-V1 END */















/* =========================================================
   SAMAKU CUSTOMER SERVICE STYLE V1
   ========================================================= */

.samaku-support-card textarea{
  width:100%;
  min-height:130px;
  resize:vertical;
  padding:13px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#07131f;
  color:#fff;
  outline:none;
  font:inherit;
  line-height:1.55;
  box-sizing:border-box;
}

.samaku-support-card textarea:focus{
  border-color:rgba(85,217,255,.58);
  box-shadow:0 0 0 3px rgba(85,217,255,.07);
}

.samaku-support-card textarea::placeholder{
  color:var(--muted);
}

.rg-customer-service-card{
  border-color:rgba(85,217,255,.24);
}

.rg-customer-service-card .contact-icon{
  font-weight:1000;
  font-size:12px;
  color:var(--cyan);
}

.samaku-support-success .summary-row{
  text-align:left;
}



/* =========================================================
   SAMAKU LIVE PRODUCTS STYLE V1
   ========================================================= */

.rg-live-info{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 13px;
  padding:10px 12px;
  border:1px solid rgba(47,225,125,.20);
  border-radius:15px;
  background:rgba(47,225,125,.055);
}

.rg-live-info>div{
  display:flex;
  align-items:center;
  gap:7px;
  color:#8ff2bc;
  font-size:9px;
  font-weight:1000;
  letter-spacing:.8px;
}

.rg-live-info small{
  color:var(--muted);
  font-size:8.5px;
}

.rg-live-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#2fe17d;
  box-shadow:0 0 12px rgba(47,225,125,.85);
}

.rg-live-products{
  display:grid;
  grid-template-columns:
    repeat(2,minmax(0,1fr));
  gap:10px;
}

.rg-live-product-card{
  min-width:0;
  padding:13px;
  border:1px solid var(--line);
  border-radius:19px;
  background:
    linear-gradient(
      145deg,
      var(--panel2),
      var(--panel)
    );
  box-shadow:var(--shadow);
}

.rg-live-product-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:7px;
  margin-bottom:11px;
}

.rg-live-type{
  min-width:0;
  padding:4px 7px;
  border-radius:999px;
  background:rgba(85,217,255,.08);
  color:var(--cyan);
  font-size:7.5px;
  font-weight:1000;
  letter-spacing:.5px;
}

.rg-live-status{
  flex:0 0 auto;
  font-size:7.5px;
  font-weight:1000;
}

.rg-live-status.available{
  color:#8ff2bc;
}

.rg-live-status.sold{
  color:#ffb8c0;
}

.rg-live-product-name{
  min-height:30px;
  overflow-wrap:anywhere;
  color:#fff;
  font-size:11.5px;
  line-height:1.35;
  font-weight:1000;
}

.rg-live-product-user{
  margin-top:4px;
  color:var(--muted);
  font-size:8.5px;
  overflow-wrap:anywhere;
}

.rg-live-product-price{
  margin-top:10px;
  color:var(--cyan2);
  font-size:12px;
  font-weight:1000;
}

.rg-live-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:11px;
}

.rg-live-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:29px;
  padding:7px 9px;
  border:1px solid rgba(85,217,255,.18);
  border-radius:10px;
  background:rgba(85,217,255,.07);
  color:var(--cyan);
  text-decoration:none;
  font-size:7.5px;
  font-weight:1000;
}

@media(max-width:420px){

  .rg-live-products{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}



/* =========================================================
   SAMAKU NFT ORDER STYLE V1
   ========================================================= */

.rg-nft-image-wrap{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  margin-bottom:11px;
  overflow:hidden;
  border-radius:15px;
  background:
    linear-gradient(
      145deg,
      rgba(85,217,255,.06),
      rgba(255,255,255,.025)
    );
}

.rg-nft-image{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  opacity:0;
}

.rg-nft-image.loaded{
  opacity:1;
}

.rg-live-margin-note{
  margin-top:3px;
  margin-bottom:10px;
  color:var(--muted);
  font-size:7.5px;
}

.rg-nft-order-btn{
  margin-top:8px;
}

.rg-nft-invoice{
  padding:15px;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--panel);
}

.rg-nft-invoice-status{
  margin-bottom:14px;
  padding:10px;
  border-radius:12px;
  background:rgba(47,225,125,.08);
  color:#8ff2bc;
  text-align:center;
  font-size:9px;
  font-weight:1000;
  letter-spacing:.6px;
}

.rg-nft-payment-copy{
  margin:14px 0;
  padding:14px;
  border:1px solid rgba(85,217,255,.16);
  border-radius:15px;
  background:rgba(85,217,255,.045);
  color:#d9e5ee;
  font-size:11px;
  line-height:1.7;
}

.rg-nft-payment-copy p{
  margin:0 0 12px;
}

.rg-nft-payment-copy p:last-child{
  margin-bottom:0;
}

.rg-nft-link{
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  margin-bottom:9px;
}