/* ==========================================================================
   MyDigitaloka v90 — TEMA APLIKASI MOBILE-FIRST
   Portal transaksi digital yang terasa seperti aplikasi Android.
   Biru = warna utama, Orange = aksen. File ini dimuat PALING AKHIR
   sehingga menimpa gaya lama tanpa mengubah file CSS versi sebelumnya.
   ========================================================================== */

:root{
  --mdl-bg:#0b1526;
  --mdl-surface:#12203a;
  --mdl-surface-2:#182a49;
  --mdl-line:#24385c;
  --mdl-text:#eef4ff;
  --mdl-muted:#93a7c9;
  --mdl-primary:#3b82f6;
  --mdl-primary-2:#2563eb;
  --mdl-primary-deep:#1d4ed8;
  --mdl-accent:#fb923c;
  --mdl-accent-2:#f97316;
  --mdl-success:#34d399;
  --mdl-danger:#f87171;
  --mdl-grad:linear-gradient(135deg,#1d4ed8 0%,#2563eb 55%,#0ea5e9 100%);
  --mdl-grad-accent:linear-gradient(135deg,#f97316,#fb923c);
  --mdl-shadow:0 14px 34px rgba(2,6,23,.35);
  --mdl-shadow-soft:0 8px 22px rgba(2,6,23,.22);
}
[data-theme="light"],
html[data-v87-theme="light"],
html[data-v87-theme="light"] body{
  --mdl-bg:#f2f6ff;
  --mdl-surface:#ffffff;
  --mdl-surface-2:#f6f9ff;
  --mdl-line:#dbe7fb;
  --mdl-text:#0f172a;
  --mdl-muted:#5b6b85;
  --mdl-primary:#2563eb;
  --mdl-primary-2:#1d4ed8;
  --mdl-primary-deep:#1e40af;
  --mdl-accent:#f97316;
  --mdl-accent-2:#ea580c;
  --mdl-success:#059669;
  --mdl-danger:#dc2626;
  --mdl-shadow:0 14px 34px rgba(15,23,42,.10);
  --mdl-shadow-soft:0 8px 22px rgba(15,23,42,.07);
}

html,body{overflow-x:hidden}
body{padding-top:0!important;font-family:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif}

.mdl-wrap{max-width:1180px;margin:0 auto;padding:0 14px}
@media(min-width:760px){.mdl-wrap{padding:0 20px}}

/* ---------------------------------------------------------------- TOP BAR */
.mdl-topbar{
  position:sticky;top:0;z-index:900;
  background:color-mix(in srgb,var(--mdl-surface) 94%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--mdl-line);
}
.mdl-topbar-inner{
  max-width:1180px;margin:0 auto;padding:9px 14px;
  display:flex;align-items:center;gap:10px;
}
.mdl-burger{
  width:40px;height:40px;flex:0 0 auto;border-radius:13px;border:1px solid var(--mdl-line);
  background:var(--mdl-surface-2);color:var(--mdl-text);cursor:pointer;
  display:grid;place-items:center;font-size:1.25rem;transition:.18s;
}
.mdl-burger:hover{border-color:var(--mdl-primary);color:var(--mdl-primary)}
.mdl-brand{
  display:flex;align-items:center;gap:9px;min-width:0;flex:1 1 auto;
  text-decoration:none;color:var(--mdl-text);
}
.mdl-brand img{height:32px;width:auto;max-width:120px;object-fit:contain;flex:0 0 auto}
.mdl-brand b{
  font-size:1.02rem;font-weight:900;letter-spacing:.2px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.mdl-brand b em{font-style:normal;color:var(--mdl-primary)}
.mdl-top-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.mdl-icon-btn{
  width:40px;height:40px;border-radius:13px;border:1px solid var(--mdl-line);
  background:var(--mdl-surface-2);color:var(--mdl-text);cursor:pointer;
  display:grid;place-items:center;font-size:1.1rem;transition:.18s;text-decoration:none;
}
.mdl-icon-btn:hover{border-color:var(--mdl-primary);color:var(--mdl-primary)}
.mdl-saldo-chip{
  display:flex;align-items:center;gap:8px;padding:5px 10px 5px 5px;border-radius:999px;
  text-decoration:none;border:1px solid color-mix(in srgb,var(--mdl-primary) 42%,transparent);
  background:linear-gradient(135deg,color-mix(in srgb,var(--mdl-primary) 16%,transparent),color-mix(in srgb,var(--mdl-success) 13%,transparent));
  transition:.18s;
}
.mdl-saldo-chip:hover{transform:translateY(-1px);box-shadow:var(--mdl-shadow-soft)}
.mdl-saldo-chip .ic{
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:var(--mdl-primary);color:#fff;font-size:.9rem;
}
.mdl-saldo-chip .tx{display:flex;flex-direction:column;line-height:1.12}
.mdl-saldo-chip .tx b{font-size:.82rem;font-weight:900;color:var(--mdl-text);white-space:nowrap}
.mdl-saldo-chip .tx small{font-size:.6rem;font-weight:800;letter-spacing:.4px;color:var(--mdl-muted);text-transform:uppercase}
.mdl-ava{
  position:relative;display:block;width:38px;height:38px;border-radius:50%;padding:2px;flex:0 0 auto;
  background:linear-gradient(135deg,var(--mdl-primary),var(--mdl-accent));
}
.mdl-ava img{width:100%;height:100%;border-radius:50%;object-fit:cover;background:var(--mdl-surface);display:block}
.mdl-ava i{position:absolute;right:0;bottom:0;width:10px;height:10px;border-radius:50%;background:var(--mdl-success);border:2px solid var(--mdl-surface)}
.mdl-btn-masuk,.mdl-btn-daftar{
  padding:9px 14px;border-radius:999px;text-decoration:none;font-weight:800;font-size:.82rem;white-space:nowrap;
}
.mdl-btn-masuk{color:var(--mdl-primary);border:1px solid var(--mdl-primary)}
.mdl-btn-daftar{color:#fff;background:linear-gradient(135deg,var(--mdl-primary),var(--mdl-primary-deep));box-shadow:0 8px 18px color-mix(in srgb,var(--mdl-primary) 30%,transparent)}
@media(max-width:620px){
  .mdl-saldo-chip .tx small{display:none}
  .mdl-saldo-chip{padding:4px 9px 4px 4px}
  .mdl-saldo-chip .tx b{font-size:.76rem}
  .mdl-btn-masuk{display:none}
  .mdl-brand b{display:none}
  .mdl-brand img{height:30px;max-width:104px}
  .mdl-topbar-inner{gap:7px;padding:8px 11px}
  .mdl-icon-btn,.mdl-burger{width:36px;height:36px;border-radius:11px;font-size:1.05rem}
  .mdl-ava{width:34px;height:34px}
}
@media(max-width:360px){
  .mdl-brand img{max-width:80px}
  .mdl-saldo-chip .ic{display:none}
}

/* ------------------------------------------------- NAV HORIZONTAL (CHIPS) */
.mdl-hnav{
  position:sticky;top:53px;
z-index:890;
  background:color-mix(in srgb,var(--mdl-surface) 94%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--mdl-line);
}
.mdl-hnav-track{
  max-width:1180px;margin:0 auto;padding:8px 14px;
  display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
}
.mdl-hnav-track::-webkit-scrollbar{display:none}
.mdl-hnav a,.mdl-hnav button{
  display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:999px;
  border:1px solid var(--mdl-line);background:var(--mdl-surface-2);color:var(--mdl-muted);
  font:inherit;font-weight:800;font-size:.8rem;white-space:nowrap;text-decoration:none;cursor:pointer;
  transition:.18s;flex:0 0 auto;
}
.mdl-hnav a i,.mdl-hnav button i{font-size:.95rem}
.mdl-hnav a:hover,.mdl-hnav button:hover{border-color:var(--mdl-primary);color:var(--mdl-primary)}
.mdl-hnav a.is-active,.mdl-hnav button.is-active{
  background:var(--mdl-primary);border-color:var(--mdl-primary);color:#fff;
  box-shadow:0 8px 18px color-mix(in srgb,var(--mdl-primary) 32%,transparent);
}

@media(min-width:621px){.mdl-hnav{top:59px}}

/* ------------------------------------------------------------- DRAWER ---- */
.mdl-overlay{
  position:fixed;inset:0;background:rgba(2,6,23,.55);z-index:950;
  opacity:0;pointer-events:none;transition:.25s;
}
body.mobile-open .mdl-overlay{opacity:1;pointer-events:auto}
/* Drawer memakai id #mobileMenu lama supaya JS toggleMobileMenu() tetap jalan */
.mobile-menu.mdl-drawer{
  position:fixed;top:0;left:-330px;width:300px;max-width:88vw;height:100dvh;z-index:960;
  background:var(--mdl-surface);border-right:1px solid var(--mdl-line);
  padding:16px;overflow-y:auto;transition:left .3s ease;
  display:flex;flex-direction:column;gap:8px;
}
.mobile-menu.mdl-drawer.active{left:0}
.mdl-drawer-head{
  display:flex;align-items:center;gap:11px;padding-bottom:14px;
  border-bottom:1px solid var(--mdl-line);margin-bottom:6px;
}
.mdl-drawer-head img{width:46px;height:46px;border-radius:50%;object-fit:cover;background:var(--mdl-surface-2);flex:0 0 auto}
.mdl-drawer-head .who{min-width:0;flex:1 1 auto}
.mdl-drawer-head .who b{display:block;font-size:.95rem;color:var(--mdl-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mdl-drawer-head .who span{font-size:.78rem;color:var(--mdl-muted);font-weight:700}
.mdl-drawer-close{
  margin-left:auto;width:36px;height:36px;border-radius:11px;border:1px solid var(--mdl-line);
  background:var(--mdl-surface-2);color:var(--mdl-text);cursor:pointer;display:grid;place-items:center;font-size:1.1rem;
}
.mdl-drawer-wallet{
  border-radius:16px;padding:13px 14px;margin-bottom:6px;color:#fff;
  background:var(--mdl-grad);box-shadow:var(--mdl-shadow-soft);
  display:flex;align-items:center;gap:10px;text-decoration:none;
}
.mdl-drawer-wallet i{font-size:1.4rem}
.mdl-drawer-wallet small{display:block;font-size:.62rem;font-weight:800;letter-spacing:.6px;opacity:.85;text-transform:uppercase}
.mdl-drawer-wallet b{font-size:1.02rem;font-weight:900}
.mdl-drawer-link{
  display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:13px;
  text-decoration:none;color:var(--mdl-text);font-weight:700;font-size:.9rem;
  background:var(--mdl-surface-2);border:1px solid transparent;transition:.15s;
}
.mdl-drawer-link i{color:var(--mdl-primary);font-size:1.1rem}
.mdl-drawer-link:hover{border-color:var(--mdl-primary)}
.mdl-drawer-link.is-active{border-color:var(--mdl-primary);background:color-mix(in srgb,var(--mdl-primary) 12%,transparent);color:var(--mdl-primary)}
.mdl-drawer-link.is-accent i{color:var(--mdl-accent)}
.mdl-drawer-label{
  font-size:.66rem;font-weight:900;letter-spacing:1px;text-transform:uppercase;
  color:var(--mdl-muted);padding:10px 6px 4px;
}

/* ---------------------------------------------------------- WALLET CARD -- */
.mdl-wallet{
  position:relative;overflow:hidden;border-radius:24px;padding:18px;color:#fff;
  background:var(--mdl-grad);box-shadow:0 20px 44px color-mix(in srgb,var(--mdl-primary-deep) 34%,transparent);
}
.mdl-wallet::after{
  content:"";position:absolute;right:-70px;top:-90px;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.22),transparent 65%);pointer-events:none;
}
.mdl-wallet-top{display:flex;align-items:center;gap:11px;position:relative;z-index:1}
.mdl-wallet-top img{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.5);background:rgba(255,255,255,.15);flex:0 0 auto}
.mdl-wallet-top .who{min-width:0;flex:1 1 auto}
.mdl-wallet-top .who small{display:block;font-size:.64rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;opacity:.85}
.mdl-wallet-top .who b{display:block;font-size:1.05rem;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mdl-verified{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border-radius:999px;
  background:rgba(255,255,255,.16);font-size:.68rem;font-weight:800;
}
.mdl-wallet-amount{position:relative;z-index:1;margin-top:14px}
.mdl-wallet-amount small{display:block;font-size:.66rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;opacity:.85}
.mdl-wallet-amount b{display:block;font-size:1.9rem;font-weight:900;letter-spacing:.3px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(min-width:760px){.mdl-wallet-amount b{font-size:2.3rem}}
.mdl-wallet-actions{position:relative;z-index:1;margin-top:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mdl-wallet-actions a{
  display:flex;align-items:center;justify-content:center;gap:7px;padding:11px 8px;border-radius:14px;
  background:rgba(255,255,255,.16);color:#fff;text-decoration:none;font-weight:800;font-size:.8rem;
  border:1px solid rgba(255,255,255,.22);transition:.18s;
}
.mdl-wallet-actions a:hover{transform:translateY(-2px);background:rgba(255,255,255,.24)}
.mdl-wallet-actions a.is-primary{background:#fff;color:var(--mdl-primary-deep);border-color:#fff}
.mdl-wallet-actions a i{font-size:1rem}
@media(max-width:400px){.mdl-wallet-actions a{font-size:.72rem;gap:5px}}

/* -------------------------------------------------------- SHORTCUT GRID -- */
.mdl-shortcuts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(min-width:900px){.mdl-shortcuts{grid-template-columns:repeat(8,1fr)}}
.mdl-sc{
  display:flex;flex-direction:column;align-items:center;gap:8px;padding:13px 6px 11px;
  border-radius:16px;background:var(--mdl-surface);border:1px solid var(--mdl-line);
  text-decoration:none;color:var(--mdl-text);cursor:pointer;font:inherit;text-align:center;
  transition:.18s;box-shadow:var(--mdl-shadow-soft);
}
.mdl-sc:hover{transform:translateY(-3px);border-color:var(--mdl-primary)}
.mdl-sc .ic{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:1.25rem;
  background:color-mix(in srgb,var(--mdl-primary) 12%,transparent);color:var(--mdl-primary);
}
.mdl-sc:nth-child(4n+2) .ic{background:color-mix(in srgb,var(--mdl-accent) 14%,transparent);color:var(--mdl-accent)}
.mdl-sc:nth-child(4n+3) .ic{background:color-mix(in srgb,var(--mdl-success) 13%,transparent);color:var(--mdl-success)}
.mdl-sc span{font-size:.7rem;font-weight:800;line-height:1.2}

/* -------------------------------------------------------- BANNER CAROUSEL */
.mdl-banner{position:relative}
.mdl-banner-track{
  display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding:2px;border-radius:20px;
}
.mdl-banner-track::-webkit-scrollbar{display:none}
.mdl-banner-card{
  flex:0 0 88%;max-width:520px;scroll-snap-align:start;border-radius:20px;overflow:hidden;
  border:1px solid var(--mdl-line);background:var(--mdl-surface);box-shadow:var(--mdl-shadow-soft);
  display:flex;flex-direction:column;
}
@media(min-width:760px){.mdl-banner-card{flex-basis:46%}}
.mdl-banner-card img{width:100%;aspect-ratio:21/9;object-fit:cover;display:block;background:var(--mdl-surface-2)}
.mdl-banner-body{padding:13px 15px 15px}
.mdl-banner-tag{
  display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;
  background:color-mix(in srgb,var(--mdl-accent) 14%,transparent);color:var(--mdl-accent);
  font-size:.64rem;font-weight:900;letter-spacing:.8px;text-transform:uppercase;
}
.mdl-banner-body h3{margin:8px 0 4px;font-size:.98rem;font-weight:900;color:var(--mdl-text);line-height:1.3}
.mdl-banner-body p{margin:0;font-size:.8rem;color:var(--mdl-muted);line-height:1.5}
.mdl-banner-body a{
  display:inline-flex;align-items:center;gap:6px;margin-top:9px;
  color:var(--mdl-primary);font-weight:800;font-size:.8rem;text-decoration:none;
}
.mdl-banner-static{
  flex:0 0 88%;max-width:520px;scroll-snap-align:start;border-radius:20px;padding:20px;color:#fff;
  background:var(--mdl-grad);box-shadow:var(--mdl-shadow-soft);min-height:130px;
  display:flex;flex-direction:column;justify-content:center;gap:6px;position:relative;overflow:hidden;
}
.mdl-banner-static.alt{background:var(--mdl-grad-accent)}
.mdl-banner-static::after{content:"";position:absolute;right:-50px;bottom:-70px;width:190px;height:190px;border-radius:50%;background:rgba(255,255,255,.14)}
.mdl-banner-static b{font-size:1.05rem;font-weight:900;position:relative;z-index:1}
.mdl-banner-static span{font-size:.8rem;opacity:.92;position:relative;z-index:1;line-height:1.45}
.mdl-banner-nav{position:absolute;right:8px;top:-38px;display:flex;gap:6px}
.mdl-banner-nav button{
  width:32px;height:32px;border-radius:10px;border:1px solid var(--mdl-line);cursor:pointer;
  background:var(--mdl-surface);color:var(--mdl-text);display:grid;place-items:center;font-size:1rem;
}

/* ----------------------------------------------------------- SECTION HEAD */
.mdl-sec{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:26px 0 12px}
.mdl-sec h2{
  margin:0;font-size:1.02rem;font-weight:900;color:var(--mdl-text);
  display:flex;align-items:center;gap:8px;letter-spacing:.2px;
}
.mdl-sec h2 i{color:var(--mdl-primary);font-size:1.15rem}
.mdl-sec a{font-size:.76rem;font-weight:800;color:var(--mdl-primary);text-decoration:none;white-space:nowrap}

/* --------------------------------------------------------- PROVIDER STRIP */
.mdl-providers{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:none}
.mdl-providers::-webkit-scrollbar{display:none}
.mdl-provider{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:7px;
  text-decoration:none;color:var(--mdl-text);width:74px;
}
.mdl-provider .lg{
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:1.4rem;
  background:var(--mdl-surface);border:1px solid var(--mdl-line);color:var(--mdl-primary);
  box-shadow:var(--mdl-shadow-soft);transition:.18s;
}
.mdl-provider:hover .lg{transform:translateY(-3px);border-color:var(--mdl-primary)}
.mdl-provider span{font-size:.66rem;font-weight:800;text-align:center;line-height:1.2;color:var(--mdl-muted)}

/* -------------------------------------------------------------- BILLS ---- */
.mdl-bills{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:760px){.mdl-bills{grid-template-columns:repeat(4,1fr)}}
.mdl-bill{
  display:flex;align-items:center;gap:11px;padding:13px 14px;border-radius:16px;
  background:var(--mdl-surface);border:1px solid var(--mdl-line);text-decoration:none;
  color:var(--mdl-text);box-shadow:var(--mdl-shadow-soft);transition:.18s;
}
.mdl-bill:hover{transform:translateY(-2px);border-color:var(--mdl-primary)}
.mdl-bill .ic{
  width:40px;height:40px;flex:0 0 auto;border-radius:12px;display:grid;place-items:center;font-size:1.15rem;
  background:color-mix(in srgb,var(--mdl-primary) 12%,transparent);color:var(--mdl-primary);
}
.mdl-bill b{display:block;font-size:.82rem;font-weight:800;line-height:1.25}
.mdl-bill small{display:block;font-size:.66rem;color:var(--mdl-muted);font-weight:700;margin-top:2px}

/* --------------------------------------------------------------- PROMO --- */
.mdl-promos{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:none}
.mdl-promos::-webkit-scrollbar{display:none}
.mdl-promo{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:11px 15px;border-radius:15px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--mdl-accent) 15%,var(--mdl-surface)),var(--mdl-surface));
  border:1px dashed color-mix(in srgb,var(--mdl-accent) 55%,transparent);
}
.mdl-promo i{color:var(--mdl-accent);font-size:1.25rem}
.mdl-promo b{display:block;font-size:.82rem;font-weight:900;color:var(--mdl-text);letter-spacing:.5px}
.mdl-promo small{display:block;font-size:.68rem;color:var(--mdl-muted);font-weight:700}

/* ------------------------------------------------------- BOTTOM TABBAR --- */
.mdl-tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:920;
  background:color-mix(in srgb,var(--mdl-surface) 96%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--mdl-line);
  display:flex;padding:6px 8px calc(8px + env(safe-area-inset-bottom));
}
.mdl-tabbar a{
  flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;
  text-decoration:none;color:var(--mdl-muted);font-size:.62rem;font-weight:800;border-radius:12px;
  transition:.15s;
}
.mdl-tabbar a i{font-size:1.3rem}
.mdl-tabbar a.is-active{color:var(--mdl-primary)}
.mdl-tabbar a.is-active i{
  background:color-mix(in srgb,var(--mdl-primary) 14%,transparent);
  padding:3px 16px;border-radius:999px;margin:-3px 0;
}
@media(min-width:900px){.mdl-tabbar{display:none}}
body.mdl-has-tabbar{padding-bottom:78px}

/* ---------------------------------------------------- POLISH HALAMAN V87 - */
.v87-prod-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))!important;gap:10px!important}
@media(max-width:560px){.v87-prod-grid{grid-template-columns:repeat(2,1fr)!important}}
.v87-prod{border-radius:16px!important;transition:.18s!important}
.v87-prod:hover{box-shadow:var(--mdl-shadow-soft)}
.v87-tabbar{
  background:color-mix(in srgb,var(--mdl-surface) 96%,transparent)!important;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.mdl-search{display:flex;gap:8px;margin:12px 0 16px}
.mdl-search input{
  flex:1 1 auto;min-width:0;padding:12px 16px;border-radius:999px;font:inherit;font-size:.88rem;
  border:1px solid var(--mdl-line);background:var(--mdl-surface);color:var(--mdl-text);outline:none;
}
.mdl-search input:focus{border-color:var(--mdl-primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--mdl-primary) 16%,transparent)}
.mdl-search button{
  flex:0 0 auto;padding:12px 20px;border-radius:999px;border:0;cursor:pointer;font:inherit;
  font-weight:800;font-size:.85rem;color:#fff;background:linear-gradient(135deg,var(--mdl-primary),var(--mdl-primary-deep));
  display:inline-flex;align-items:center;gap:6px;
}

/* -------------------------------------------------- KATALOG PROVIDER LIVE  */
.mdl-live-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:10px}
@media(max-width:560px){.mdl-live-grid{grid-template-columns:repeat(2,1fr)}}
.mdl-live{
  display:flex;flex-direction:column;gap:6px;padding:13px;border-radius:16px;
  background:var(--mdl-surface);border:1px solid var(--mdl-line);box-shadow:var(--mdl-shadow-soft);
}
.mdl-live .src{
  align-self:flex-start;display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;
  font-size:.6rem;font-weight:900;letter-spacing:.6px;text-transform:uppercase;
  background:color-mix(in srgb,var(--mdl-accent) 14%,transparent);color:var(--mdl-accent);
}
.mdl-live b{font-size:.84rem;font-weight:800;color:var(--mdl-text);line-height:1.3}
.mdl-live .varian{font-size:.72rem;color:var(--mdl-muted);font-weight:700}
.mdl-live .harga{font-size:.92rem;font-weight:900;color:var(--mdl-primary)}
.mdl-live a{
  margin-top:auto;display:flex;align-items:center;justify-content:center;gap:6px;padding:9px;border-radius:11px;
  background:var(--mdl-surface-2);border:1px solid var(--mdl-line);color:var(--mdl-text);
  font-weight:800;font-size:.76rem;text-decoration:none;transition:.15s;
}
.mdl-live a:hover{background:var(--mdl-primary);border-color:var(--mdl-primary);color:#fff}
.mdl-live-note{
  margin:10px 0 16px;padding:11px 14px;border-radius:13px;font-size:.78rem;line-height:1.5;
  background:color-mix(in srgb,var(--mdl-primary) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--mdl-primary) 25%,transparent);color:var(--mdl-muted);
}
.mdl-live-note b{color:var(--mdl-text)}

/* -------------------------------------------------- INFO BAR / RUNNING TXT */
.mdl-infobar{
  display:flex;align-items:center;gap:9px;padding:10px 14px;border-radius:14px;
  background:color-mix(in srgb,var(--mdl-primary) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--mdl-primary) 22%,transparent);
  color:var(--mdl-text);font-size:.78rem;font-weight:700;
}
.mdl-infobar i{color:var(--mdl-primary);font-size:1rem;flex:0 0 auto}
.mdl-infobar span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.mdl-mt{margin-top:14px}