/* ==========================================================================
   Insight Layanan + Tab Rekomendasi — shim design token
   Port dari providersmm.id. CSS aslinya pakai token --primary/--surface/dst;
   bisnissmm punya nama sendiri. Shim ini yg menjembatani.

   KENAPA var() ke var(), bukan hex: --v2-acc = warna aksen MITRA (beda-beda),
   dan --surface/--text/--border sudah di-override html[data-theme="dark"].
   Dengan var(), Insight otomatis ikut brand mitra + dark mode tanpa kode lagi.
   ========================================================================== */
:root{
  /* aksen = warna brand mitra */
  --primary: var(--v2-acc);
  --primary-strong: var(--v2-acc);                                  /* fallback browser lama */
  --primary-soft: var(--v2-acc-08);
  --primary-contrast: #fff;

  /* teks: providersmm punya 3 tingkat, bisnissmm 4 -> --text-2 = --text-soft */
  --text-2: var(--text-soft);

  /* status */
  --success: var(--success-fg);
  --danger: var(--danger-fg);
  --warning: #d97706;                                               /* bisnissmm ga punya -> disediakan */

  /* gold (badge Best Seller) — ga ada padanan di bisnissmm */
  --gold: #b45309;
  --gold-ink: #78350f;
  --gold-soft: #fef3c7;
  --gold-border: #fde68a;

  /* bentuk */
  --radius: 12px;
  --radius-lg: var(--v2-radius);
  --radius-pill: 999px;

  /* tipografi */
  --fs-caption: .72rem;
  --fs-sm: .82rem;
  --fs-lead: 1rem;
  --fs-h4: 1.05rem;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
@supports (color: color-mix(in srgb, red 50%, blue)){
  :root{ --primary-strong: color-mix(in srgb, var(--v2-acc) 82%, #000); }
}
html[data-theme="dark"]{
  --warning: #fbbf24;
  --gold: #fbbf24;
  --gold-ink: #fde68a;
  --gold-soft: rgba(251,191,36,.12);
  --gold-border: rgba(251,191,36,.3);
  --primary-contrast: #06121f;
}
@supports (color: color-mix(in srgb, red 50%, blue)){
  html[data-theme="dark"]{ --primary-strong: color-mix(in srgb, var(--v2-acc) 78%, #fff); }
}

/* Anti shrink-to-fit: overflow horizontal sekecil apapun bikin HP zoom-out
   -> layout & scroll kacau (gotcha dari tim providersmm). */
.svc-insight, .rec-panel, .si-metrics, .si-best{ max-width:100%; min-width:0; }
.si-spark, .rec-panel__list{ overflow-x:auto; }


/* ===== CSS hasil ekstrak dari _PASTE-ke-style.css (apa adanya) ===== */
.rec-badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .7rem; font-weight: 700; padding: .14rem .5rem; border-radius: 999px; background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); white-space: nowrap; vertical-align: middle; margin-left: .35rem; }
.rec-badge i { font-size: .9em; }
.rec-badge--new { background: color-mix(in srgb, var(--primary) 18%, transparent); color: var(--primary); }
[data-theme="light"] .rec-badge--new { color: var(--primary-strong); }
.si-new { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-caption); font-weight: 700; color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, transparent); padding: .2rem .55rem; border-radius: var(--radius-pill); margin: 0 0 .8rem .4rem; }
[data-theme="light"] .si-new { color: var(--primary-strong); }
.svc-metrics { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .7rem; margin-top: .4rem; font-size: var(--fs-caption); line-height: 1.5; }
.svc-metrics > span { display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; }
.svc-m-stars { color: #f5b400; font-family: var(--font-mono); letter-spacing: .5px; }
.svc-m-drop  { font-weight: 700; font-family: var(--font-mono); }
.svc-m-drop i { font-size: .85em; }
.svc-bestseller { display: inline-flex; align-items: center; gap: .3rem; font-size: .7rem; font-weight: 700; padding: .14rem .5rem; border-radius: 999px; background: color-mix(in srgb, var(--warning) 20%, transparent); color: var(--warning); white-space: nowrap; vertical-align: middle; margin-left: .35rem; }
.svc-m-best { font-weight: 700; color: var(--warning); }
.svc-m-best i, .svc-bestseller i { font-size: .9em; }
.rec-item__badge--best { background: color-mix(in srgb, var(--warning) 20%, transparent); color: var(--warning); }
.rec-item__badge--new { background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary); }
[data-theme="light"] .svc-bestseller, [data-theme="light"] .svc-m-best, [data-theme="light"] .opt-rec.opt-best, [data-theme="light"] .rec-item__badge--best { color: #C67A0E; }
.svc-m-stab  { color: var(--text-2); text-transform: capitalize; }
.svc-m-stab--flux { color: var(--warning); }
.svc-m-samp  { color: var(--text-muted); }
.svc-m-speed { color: var(--text-2); font-family: var(--font-mono); }
.svc-m-speed i { font-size: .85em; opacity: .8; }
.svc-m-pending { display: inline-flex; align-items: center; gap: .3rem; color: var(--text-muted); font-style: italic; }
.svc-m-pending i { font-style: normal; opacity: .8; }
@media (min-width: 992px) {
  .order-layout { display: flex; flex-wrap: wrap; }
  .svc-insight { position: sticky; top: 80px; }
}
@media (max-width: 991px) {
  .svc-insight { margin-top: 1.2rem; }
}
.sn-chooser { margin-bottom: 1.1rem; }
.sn-chooser__label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); margin-bottom: .45rem; }
.sn-chooser__grid { display: flex; flex-wrap: wrap; gap: .5rem; }
.rec-tabs { display: flex; gap: .4rem; margin-bottom: .9rem; }
.rec-tab { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .6rem .8rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text-2); font-weight: 700; font-size: var(--fs-sm); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.rec-tab:hover { border-color: var(--primary); color: var(--primary); }
.rec-tab.is-active { background: var(--primary); border-color: var(--primary); color: var(--primary-contrast); }
.rec-tabs .rec-tab { position: relative; }
.rec-tab[data-mode="rec"] { color: var(--gold-ink); border-color: var(--gold-border); }
.rec-tab[data-mode="rec"] > i { color: var(--gold-ink); }
.rec-tab[data-mode="rec"].is-active { background: var(--gold); border-color: var(--gold); color: #3d2600; box-shadow: 0 6px 18px var(--gold-soft); }
.rec-tab[data-mode="rec"].is-active > i { color: #3d2600; }
.rec-tab[data-mode="rec"]:not(.is-active) { animation: recGoldPulse 1.7s ease-out infinite; }
.rec-tab[data-mode="rec"]:not(.is-active)::after { content: ""; position: absolute; top: 6px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 7px var(--gold); animation: psmm-menu-blink 1.1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .rec-tab[data-mode="rec"]:not(.is-active) { animation: none; }
  .rec-tab[data-mode="rec"]:not(.is-active)::after { animation: none; }
}
#order-form.psmm-rec #snChooser .sn-chooser__grid { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: .4rem; padding-bottom: 3px; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x proximity; }
#order-form.psmm-rec #snChooser .sn-chooser__grid::-webkit-scrollbar { display: none; }
#order-form.psmm-rec #snChooser .sn-chooser__grid.is-scrollable { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
#order-form.psmm-rec #snChooser .sn-chip { display: flex; flex-direction: column; align-items: center; gap: .4rem; height: auto; padding: 0; border: 0; background: transparent; box-shadow: none; flex: 0 0 auto; width: 60px; scroll-snap-align: start; }
#order-form.psmm-rec #snChooser .sn-chip[data-platform="all"] { display: none; }
#order-form.psmm-rec #snChooser .sn-chip:hover { transform: none; }
#order-form.psmm-rec #snChooser .sn-chip > i, #order-form.psmm-rec #snChooser .sn-chip > svg { box-sizing: border-box; width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; margin: 0; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); transition: background .15s ease, color .15s ease, border-color .15s ease; }
#order-form.psmm-rec #snChooser .sn-chip:hover > i, #order-form.psmm-rec #snChooser .sn-chip:hover > svg { border-color: var(--primary); color: var(--primary); }
#order-form.psmm-rec #snChooser .sn-chip.is-active { background: transparent; box-shadow: none; }
#order-form.psmm-rec #snChooser .sn-chip.is-active > i, #order-form.psmm-rec #snChooser .sn-chip.is-active > svg { background: var(--primary); border-color: var(--primary); color: var(--primary-contrast); }
#order-form.psmm-rec #snChooser .sn-chip > span { font-size: .66rem; line-height: 1.15; color: var(--text-2); white-space: nowrap; }
#order-form.psmm-rec #snChooser .sn-chip.is-active > span { color: var(--primary); font-weight: 700; }
.rec-panel__hint { padding: 1.5rem 1rem; text-align: center; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.5; }
.rec-panel__hint > i { display: block; font-size: 1.7rem; color: var(--gold-ink); margin-bottom: .55rem; }
.rec-panel__jenis { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .7rem; }
.rec-panel__jenis[hidden] { display: none; }
.rec-jenis { border: 1px solid var(--border); background: var(--surface); color: var(--text-2); border-radius: var(--radius-pill); padding: .3rem .75rem; font-size: var(--fs-caption); font-weight: 700; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; white-space: nowrap; }
.rec-jenis:hover { border-color: var(--primary); color: var(--primary); }
.rec-jenis.is-active { background: var(--primary); border-color: var(--primary); color: var(--primary-contrast); }
.rec-panel.is-picked .rec-panel__jenis { display: none; }
.rec-panel { margin-bottom: 1rem; }
.rec-panel__search { display: flex; align-items: center; gap: .55rem; height: 44px; padding: 0 1rem; margin-bottom: .6rem; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); }
.rec-panel__search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.rec-panel__search > i, .rec-panel__search > svg { flex: 0 0 auto; width: 1em; color: var(--text-muted); }
.rec-panel__input { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; border: 0; background: none; color: var(--text); font-size: var(--fs-sm); }
.rec-panel__input:focus { outline: none; }
.rec-panel__picked { display: none; align-items: center; gap: .55rem; padding: .7rem .9rem; margin-bottom: .3rem; border: 1px solid var(--primary); border-radius: var(--radius); background: var(--primary-soft); color: var(--text); }
.rec-panel__picked > i { flex: 0 0 auto; color: var(--primary); }
.rec-panel__picked-name { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.rec-panel__change { flex: 0 0 auto; padding: .35rem .75rem; border: 1px solid var(--primary); border-radius: var(--radius-pill); background: var(--surface); color: var(--primary); font-weight: 700; font-size: var(--fs-caption); cursor: pointer; white-space: nowrap; }
.rec-panel__change:hover { background: var(--primary); color: var(--primary-contrast); }
.rec-panel.is-picked .rec-panel__search, .rec-panel.is-picked .rec-panel__list { display: none; }
.rec-panel.is-picked .rec-panel__picked { display: flex; }
.rec-panel__list { max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: .4rem; }
.rec-panel__loading, .rec-panel__empty { padding: 1.1rem; text-align: center; color: var(--text-muted); font-size: var(--fs-sm); }
.rec-item { display: flex; flex-direction: column; gap: .22rem; text-align: left; padding: .6rem .8rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); cursor: pointer; transition: border-color .12s, background .12s; }
.rec-item:hover, .rec-item:focus { border-color: var(--primary); background: var(--primary-soft); outline: none; }
.rec-item__name { font-weight: 600; font-size: var(--fs-sm); line-height: 1.35; overflow-wrap: anywhere; }
.rec-item__meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: var(--fs-caption); color: var(--text-muted); }
.rec-item__meta .svc-id { margin: 0; }
.rec-item__badge { display: inline-flex; align-items: center; gap: .25rem; padding: .1rem .48rem; border-radius: var(--radius-pill); background: var(--primary-soft); color: var(--primary); font-weight: 700; white-space: nowrap; }
.rec-item__badge--star { background: var(--gold-soft); color: var(--gold-ink); border: 1px solid var(--gold-border); }
.rec-item__title { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.rec-item__title .rec-item__name { overflow-wrap: anywhere; }
.rec-item__id { margin: 0; flex: 0 0 auto; }
.rec-item__svc { display: block; font-size: var(--fs-caption); color: var(--text-2); margin: .12rem 0 .1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-item__badge--drop { background: color-mix(in srgb, var(--warning) 16%, transparent); color: #b9791a; }
[data-theme="dark"] .rec-item__badge--drop { color: var(--warning); }
.rec-item__badge--drop.is-good { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }
.rec-item__badge--ord { background: var(--surface-2); color: var(--text-2); }
.sn-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .85rem; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); color: var(--text-2); font-size: var(--fs-sm); font-weight: 600; line-height: 1; cursor: pointer; transition: border-color .15s, color .15s, background .15s, transform .15s, box-shadow .15s; }
.sn-chip i { font-size: 1.05em; }
.sn-chip:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); }
.sn-chip.is-active { background: var(--primary); border-color: var(--primary); color: var(--primary-contrast); box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 35%, transparent); }
@media (max-width: 640px) {
  .sn-chooser { margin-bottom: .85rem; }
  .sn-chooser__grid { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: .4rem; padding-bottom: 3px; scroll-snap-type: x proximity; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); }
  .sn-chooser__grid::-webkit-scrollbar { display: none; }
  .sn-chip { flex: 0 0 auto; padding: .48rem .78rem; scroll-snap-align: start; }
}
.svc-insight { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.1rem 1.15rem .9rem; box-shadow: var(--shadow-sm); }
.svc-insight__head { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; padding-bottom: .75rem; border-bottom: 1px solid var(--border); margin-bottom: .9rem; }
.svc-insight__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 22%, transparent); animation: si-pulse 2s infinite; }
@keyframes si-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.svc-insight__title { font-weight: 700; font-size: var(--fs-lead); }
.svc-insight__updated { font-family: var(--font-mono); }
.svc-insight__empty { text-align: center; color: var(--text-muted); padding: 1.4rem .5rem; }
.svc-insight__empty i { font-size: 1.9rem; color: var(--primary); opacity: .7; margin-bottom: .6rem; display: block; }
.svc-insight__empty p { font-size: var(--fs-sm); line-height: 1.55; margin: 0; }
.svc-insight__foot { margin-top: .9rem; padding: .6rem 0 .2rem; border-top: 1px solid var(--border); font-size: var(--fs-caption); color: var(--text-muted); display: flex; align-items: flex-start; gap: .4rem; line-height: 1.5; }
.svc-insight__foot i { color: var(--success); margin-top: .15rem; flex-shrink: 0; }
.si-verdict { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; font-size: var(--fs-lead); padding: .3rem .7rem; border-radius: var(--radius-pill); margin-bottom: .7rem; }
.si-verdict i { font-size: .95em; }
.si-verdict--good  { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.si-verdict--warn  { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--warning); }
.si-verdict--bad   { background: color-mix(in srgb, var(--danger) 14%, transparent);  color: var(--danger); }
.si-verdict--muted { background: var(--surface-2); color: var(--text-2); }
.si-stars { font-family: var(--font-mono); color: #f5b400; font-size: 1.15rem; letter-spacing: 1px; margin-bottom: .9rem; }
.si-stars span { color: var(--text-2); font-size: .85rem; margin-left: .3rem; }
.si-rating { display: flex; align-items: center; gap: .8rem; margin-bottom: .9rem; padding: .65rem .8rem; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }
.si-rating__num { flex: 0 0 auto; display: flex; align-items: baseline; gap: .15rem; }
.si-rating__num b { font-family: var(--font-mono); font-weight: 800; font-size: 1.75rem; line-height: 1; color: #C68A00; }
[data-theme="dark"] .si-rating__num b { color: #F5C542; }
.si-rating__num small { font-size: .72rem; color: var(--text-2); }
.si-rating__b { flex: 1 1 auto; min-width: 0; }
.si-rating__stars { display: flex; align-items: center; gap: .45rem; font-family: var(--font-mono); color: #f5b400; font-size: 1.05rem; letter-spacing: 1px; }
.si-rating__tag { font-size: .68rem; font-weight: 800; letter-spacing: .02em; padding: .12rem .5rem; border-radius: 999px; background: color-mix(in srgb, #f5b400 22%, transparent); color: #8a6300; }
[data-theme="dark"] .si-rating__tag { color: #f5c542; }
.si-rating__desc { font-size: .74rem; color: var(--text-2); line-height: 1.4; margin-top: .25rem; }
.si-best { margin: 0 0 .9rem; padding: .6rem .75rem; border-radius: 10px; background: color-mix(in srgb, var(--warning) 15%, transparent); border: 1px solid color-mix(in srgb, var(--warning) 38%, transparent); }
.si-best__head { display: flex; align-items: center; gap: .4rem; font-weight: 800; font-size: .9rem; color: #C67A0E; margin-bottom: .45rem; }
[data-theme="dark"] .si-best__head { color: var(--warning); }
.si-best__head > i { color: var(--warning); }
.si-best__tier { margin-left: auto; font-size: .72rem; font-weight: 800; padding: .12rem .5rem; border-radius: 999px; background: var(--warning); color: #3a2600; }
.si-best__rows { display: flex; flex-direction: column; gap: .22rem; }
.si-best__row { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; font-size: .82rem; }
.si-best__row > span:first-child { color: var(--text-2); }
.si-best__val { color: var(--text-2); text-align: right; }
.si-best__val b { color: var(--text); font-family: var(--font-mono); font-weight: 800; }
.si-speed { margin: 0 0 .9rem; padding: .65rem .75rem; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }
.si-speed__head { display: flex; align-items: center; gap: .4rem; font-weight: 800; font-size: .9rem; color: var(--text); margin-bottom: .55rem; }
.si-speed__head > i { color: var(--primary); }
.si-speed__cat { margin-left: auto; font-size: .68rem; font-weight: 800; padding: .12rem .5rem; border-radius: 999px; }
.si-speed__cat--fast { color: #0a7a4f; background: color-mix(in srgb, var(--success) 20%, transparent); }
.si-speed__cat--norm { color: var(--primary-strong); background: var(--primary-soft); }
.si-speed__cat--slow { color: #b9791a; background: color-mix(in srgb, var(--warning) 20%, transparent); }
[data-theme="dark"] .si-speed__cat--fast { color: var(--success); }
.si-speed__meter { display: flex; gap: 4px; margin-bottom: .3rem; }
.si-speed__seg { flex: 1; height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--text-2) 14%, transparent); }
.si-speed__meter--slow .s-slow { background: var(--warning); }
.si-speed__meter--norm .s-norm { background: var(--primary); }
.si-speed__meter--fast .s-fast { background: var(--success); }
.si-speed__scale { display: flex; margin-bottom: .55rem; }
.si-speed__scale span { flex: 1; font-size: .6rem; color: var(--text-2); text-align: center; }
.si-speed__scale span:first-child { text-align: left; }
.si-speed__scale span:last-child { text-align: right; }
.si-speed__avg { font-size: .8rem; color: var(--text-2); margin-bottom: .5rem; }
.si-speed__avg b { color: var(--text); font-weight: 800; }
.si-speed__stale { display: flex; align-items: center; gap: .35rem; margin: -.15rem 0 .5rem; font-size: .72rem; line-height: 1.35; color: var(--warning); }
.si-speed__stale i { flex: 0 0 auto; }
.si-speed__tbl { display: flex; flex-direction: column; gap: .3rem; }
.si-speed__tr { display: flex; align-items: baseline; gap: .5rem; font-size: .8rem; }
.si-speed__tr--h { font-size: .63rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-2); font-weight: 700; border-bottom: 1px solid var(--border); padding-bottom: .3rem; }
.si-speed__tr > span:nth-child(1) { flex: 0 0 auto; min-width: 50px; }
.si-speed__tr > span:nth-child(2) { flex: 1 1 auto; }
.si-speed__tr > span:nth-child(3) { flex: 0 0 auto; text-align: right; white-space: nowrap; }
.si-speed__qty { font-family: var(--font-mono); font-weight: 700; color: var(--text); }
.si-speed__proc { color: var(--text-2); font-weight: 700; }
.si-speed__proc.is-fast { color: var(--success); }
.si-speed__ago { color: var(--text-2); }
.si-speed__empty { font-size: .8rem; color: var(--text-2); font-style: italic; }
.si-speed__last { display: flex; align-items: center; gap: .4rem; margin-top: .6rem; padding-top: .5rem; border-top: 1px solid var(--border); font-size: .82rem; color: var(--text-2); }
.si-speed__last > i { color: var(--primary); }
.si-speed__last b { color: var(--text); font-weight: 700; }
.si-drop { margin-bottom: 1rem; }
.si-drop__top { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-sm); color: var(--text-2); margin-bottom: .35rem; }
.si-drop__top b { font-family: var(--font-mono); font-size: var(--fs-h4); }
.si-drop__bar { height: 8px; border-radius: var(--radius-pill); background: var(--surface-2); overflow: hidden; }
.si-drop__bar span { display: block; height: 100%; border-radius: inherit; transition: width .4s ease; }
.si-drop--spark .si-drop__top { margin-bottom: .5rem; }
.si-trend { font-size: var(--fs-caption); font-weight: 700; color: var(--text-2); }
.si-trend--up, .si-trend--down, .si-trend--flat { color: var(--text-2); }
.si-drop-right { display: inline-flex; align-items: baseline; gap: .5rem; }
.si-drop-avg { font-family: var(--font-mono); font-size: var(--fs-h4); font-weight: 700; }
.si-spark { display: flex; align-items: flex-end; gap: 6px; height: 42px; margin-bottom: .35rem; }
.si-spark-bar { flex: 1; height: 100%; display: flex; align-items: flex-end; background: var(--surface-2); border-radius: 5px; overflow: hidden; cursor: default; }
.si-spark-bar > span { display: block; width: 100%; border-radius: 5px 5px 0 0; transition: height .4s ease; }
.si-spark-bar--na { opacity: .45; }
.si-spark-x { display: flex; gap: 6px; }
.si-spark-x span { flex: 1; text-align: center; display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.si-spark-x b { font-size: .68rem; font-weight: 700; color: var(--text); font-family: var(--font-mono); }
.si-spark-x i { font-size: .62rem; font-style: normal; color: var(--text-muted); font-family: var(--font-mono); }
.si-attrs { display: flex; flex-direction: column; }
.si-attr { display: flex; justify-content: space-between; align-items: center; padding: .5rem 0; border-bottom: 1px dashed var(--border); font-size: var(--fs-sm); }
.si-attr:last-child { border-bottom: none; }
.si-attr > span { color: var(--text-2); }
.si-attr b { font-weight: 700; }
.si-metrics { margin: 0 0 .9rem; padding: .6rem .75rem; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }
.si-metrics > :last-child { margin-bottom: 0; }
.si-metrics .si-drop { margin-bottom: .35rem; }
.si-metrics .si-note { margin: .35rem 0 0; }
.si-flux { color: var(--warning); }
.si-note { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.5; margin: .4rem 0 .2rem; }
.si-help { position: relative; display: inline-flex; align-items: center; margin-left: .3rem; color: var(--text-muted); cursor: help; vertical-align: middle; }
.si-help > i { font-size: .82em; opacity: .8; }
.si-help:hover > i, .si-help:focus > i { opacity: 1; color: var(--primary); }
.si-help__bubble { position: absolute; bottom: calc(100% + 9px); left: -6px; width: max-content; max-width: 230px; background: var(--text); color: var(--surface); font-size: .76rem; font-weight: 500; line-height: 1.45; text-align: left; padding: .5rem .65rem; border-radius: 9px; box-shadow: 0 8px 24px rgba(0,0,0,.22); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease; z-index: 60; pointer-events: none; white-space: normal; }
.si-help__bubble::after { content: ''; position: absolute; top: 100%; left: 12px; border: 6px solid transparent; border-top-color: var(--text); }
.si-help:hover .si-help__bubble, .si-help:focus .si-help__bubble, .si-help:focus-within .si-help__bubble { opacity: 1; visibility: visible; transform: translateY(0); }
.si-pending { display: flex; align-items: flex-start; gap: .5rem; font-size: var(--fs-sm); color: var(--text-2); line-height: 1.5; background: var(--surface-2); border: 1px dashed var(--border); border-radius: var(--radius); padding: .65rem .75rem; margin-bottom: .9rem; }
.si-pending i { color: var(--primary); margin-top: .15rem; flex-shrink: 0; }
.sewa-tier__list .si-help { position: static; }
.sewa-tier__list .si-help__bubble { left: 0; right: 0; width: auto; max-width: none; bottom: calc(100% + 8px); }
.sewa-tier__list .si-help__bubble::after { left: 18px; }
.sewa-tier__list .si-help__bubble b { color: inherit; font-weight: 800; }
.svc-insight__chev { margin-left: auto; color: var(--text-muted); transition: transform .22s ease; display: none; }
.si-peek { display: none; }
@media (min-width: 992px) {
  .si-detail { display: block; }
}
@media (max-width: 991px) {
  .svc-insight__head { cursor: pointer; }
  .svc-insight__chev { display: inline-block; }
  .svc-insight.is-open .svc-insight__chev { transform: rotate(180deg); }
  .svc-insight:not(.is-open) .svc-insight__chev { color: var(--primary); animation: svcChevBlink 1.15s ease-in-out infinite; }
  .si-peek { display: flex; flex-wrap: wrap; gap: .4rem; }
  .si-detail { display: none; margin-top: .9rem; }
  .svc-insight.is-open .si-detail { display: block; }
  .svc-insight:not(.is-open) .svc-insight__foot { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-insight__chev { animation: none !important; }
}
.si-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--fs-caption); font-weight: 700; padding: .26rem .62rem; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); }
.si-chip > i { font-size: .82em; }
.si-chip--rate > i { color: var(--gold); }
.si-chip--best > i { color: #F0541F; }
.si-chip--speed > i { color: var(--primary); }
.si-chip--time > i { color: var(--text-2); }
.si-chip--v-good, .si-chip--v-good > i { color: var(--success); border-color: transparent; }
.si-chip--v-warn, .si-chip--v-warn > i { color: var(--gold-ink); }
.si-chip--v-bad, .si-chip--v-bad > i, .si-chip--drop-bad { color: var(--danger, #E5484D); }
.si-chip--v-muted, .si-chip--v-muted > i { color: var(--text-muted); }
.si-chip--drop-good { color: var(--success); }
.si-chip--drop-warn { color: var(--gold-ink); }
.si-fresh { display: inline-flex; align-items: center; gap: .25rem; font-size: .68rem; font-weight: 700; padding: .08rem .44rem; border-radius: var(--radius-pill); margin-left: .45rem; }
.si-fresh--live { color: var(--success); background: color-mix(in srgb, var(--success) 14%, transparent); }
.si-fresh--day { color: var(--text-muted); background: var(--surface-2); }
.svc-insight__foot { flex-direction: column; gap: .3rem; }
.svc-insight__fresh { display: flex; align-items: flex-start; gap: .4rem; }
.svc-insight__fresh > i { margin-top: .15rem; flex-shrink: 0; }
.svc-insight__fresh:nth-child(1) > i { color: var(--text-muted); }
.svc-insight__live { color: var(--success); }
.svc-insight__src { display: inline-flex; align-items: center; gap: .3rem; color: var(--text-muted); text-decoration: none; margin-top: .05rem; }
.svc-insight__src:hover { color: var(--primary); }
.psmm-ket__head { display: none; }
@media (min-width: 992px) {
  .psmm-ket > label { display: block; }
}
@media (max-width: 991px) {
  .psmm-ket > label { display: none; }
  .psmm-ket__head { width: 100%; display: flex; align-items: center; gap: .6rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .7rem .8rem; cursor: pointer; text-align: left; font-family: inherit; color: var(--text); }
  .psmm-ket__head > i:first-child { color: var(--text-2); font-size: 1rem; flex-shrink: 0; }
  .psmm-ket__t { display: flex; flex-direction: column; line-height: 1.25; font-weight: 700; font-size: var(--fs-sm); }
  .psmm-ket__t small { font-weight: 500; font-size: var(--fs-caption); color: var(--text-muted); margin-top: .1rem; }
  .psmm-ket__chev { margin-left: auto; color: var(--text-muted); transition: transform .22s ease; flex-shrink: 0; }
  .psmm-ket.is-open .psmm-ket__chev { transform: rotate(180deg); }
  .psmm-ket .panel-body { display: none; margin-top: .5rem; }
  .psmm-ket.is-open .panel-body { display: block; }
}
/* ==========================================================================
   Layout 2 kolom halaman layanan (desktop) — meniru providersmm.id
   Form di kiri, Insight nempel di kanan.

   PENTING: dikerjakan pakai CSS Grid, BUKAN relokasi JS seperti sumbernya.
   Sumber mindahin node via placeInsight() + handler resize, dan itu yang bikin
   mereka kena gotcha "address bar HP memicu resize tinggi terus-menerus".
   Dengan grid, mobile = urutan DOM apa adanya (breadcrumb → hero → deskripsi →
   Insight → form), desktop = 2 kolom. Tanpa JS, tanpa handler resize, tanpa
   node yang pindah-pindah.
   ========================================================================== */
@media (min-width: 992px){
  /* Kolom kiri dibungkus SATU elemen (.pd-main) -> grid cuma punya 2 baris:
     crumb, lalu [pd-main | insight]. Tidak ada item yang membentang banyak
     baris, jadi MUSTAHIL ada slack yang diselipkan antar kartu — berapa pun
     jumlah kartu di kolom kiri (guest 4, member bisa lebih).
     Versi sebelumnya: tiap kartu = grid item sendiri + insight span 2/-1;
     kalau panel lebih tinggi dari baris yang dilewatinya, selisihnya dibagi
     ke baris-baris itu -> celah menganga (bug 2026-07-17/18, 3x iterasi). */
  .pd-wrap{
    max-width:1240px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 366px;
    grid-template-rows:auto auto;
    gap:0 1.35rem;
    align-items:start;
  }
  .pd-wrap > .pd-crumb{ grid-column:1 / -1; grid-row:1; }
  .pd-wrap > .pd-main{ grid-column:1; grid-row:2; min-width:0; }
  .pd-wrap > .svc-insight{
    grid-column:2;
    grid-row:2;
    align-self:start;
    margin:0;
    /* rule dasar .svc-insight set position:sticky; panel bisa ~916px sedangkan
       viewport laptop 900px -> kalau ter-pin, footer kejepit di luar layar. */
    position:static;
  }
}
@media (max-width: 991px){
  /* Mobile: .pd-main "transparan" (display:contents) supaya kartunya jadi
     anak langsung .pd-wrap, lalu urutannya diatur `order` — Insight tetap
     tampil di antara hero dan deskripsi seperti providersmm. */
  .pd-wrap{ display:flex; flex-direction:column; }
  .pd-main{ display:contents; }
  .pd-wrap > .pd-crumb{ order:1 }
  .pd-main > .of-svc-card,
  .pd-main > .pd-hero{ order:2 }
  .pd-wrap > .svc-insight{ order:3 }
  .pd-main > .pd-desc{ order:4 }
  .pd-main > form,
  .pd-main > #orderForm{ order:5 }
}

/* ==========================================================================
   FIX 2026-07-17 — ikon SVG (.si-i)
   Sumbernya pakai FontAwesome (<i class="fas fa-star">) yang ukurannya datang
   dari font. bisnissmm TIDAK muat FA, jadi ikonnya diganti SVG inline. TAPI
   <svg> tanpa width/height = 0x0 -> SELURUH ikon panel tak terlihat (chip
   rating cuma nampil "3.5" tanpa bintang, jadi ga jelas artinya angka apa).
   1em = ikut ukuran font sekitarnya, persis kelakuan icon-font.
   ========================================================================== */
.si-i{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:1em;
  height:1em;
  vertical-align:-.125em;
  line-height:1;
}
.si-i > svg{ width:100%; height:100%; display:block; }
.svc-insight__chev.si-i{ width:.85em; height:.85em; margin-left:auto; }
.svc-insight__empty .si-i{ width:1.6em; height:1.6em; }

/* ==========================================================================
   FIX 2026-07-17 — "Deskripsi & Ketentuan" kolaps di mobile
   Setara wrapKet() (script.js:3145) di sumber. Di HP, deskripsi bisa 20+ baris
   dan mendorong form order jauh ke bawah — persis yang dikeluhkan user.
   Desktop: selalu terbuka (ruang cukup, tidak perlu diklik).
   ========================================================================== */
.pd-desc--acc > h3{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin-bottom:0;
}
.pd-desc--acc .pd-desc__sub{
  font-weight:500;
  text-transform:none;
  letter-spacing:0;
  color:var(--text-faint);
  font-size:.92em;
}
.pd-desc--acc .pd-desc__chev{ transition:transform .18s ease; }
@media (max-width: 991px){
  .pd-desc--acc > h3{ cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .pd-desc--acc .pd-desc__body{ display:none; }
  .pd-desc--acc.is-open .pd-desc__body{ display:block; margin-top:.7rem; }
  .pd-desc--acc.is-open .pd-desc__chev{ transform:rotate(180deg); }
}
@media (min-width: 992px){
  /* desktop: buka permanen, header balik jadi judul biasa */
  .pd-desc--acc .pd-desc__body{ display:block; margin-top:.7rem; }
  .pd-desc--acc .pd-desc__chev{ display:none; }
}

/* ==========================================================================
   Badge "Layanan Terbaik" — Tampilan Standar (kartu di /order/<pf>/<kategori>)
   Padanan window.PSMMRecPick di sumber (di sana buat highlight opsi dropdown).
   Pakai token gold yang sama dgn badge Best Seller di panel Insight.
   ========================================================================== */
.sc-best-badge{
  display:inline-flex;
  align-items:center;
  gap:.28rem;
  font-size:.63rem;
  font-weight:800;
  letter-spacing:.02em;
  padding:.2rem .5rem;
  border-radius:var(--radius-pill);
  background:var(--gold-soft);
  color:var(--gold-ink);
  border:1px solid var(--gold-border);
  white-space:nowrap;
  line-height:1.3;
}
.sc-best-badge .si-i{ color:var(--gold); }
/* kartu terpilih: garis aksen tipis biar kebaca sekilas tanpa norak */
.sc-card--best{ border-color:var(--gold-border) !important; }

/* ==========================================================================
   Suplemen tab Rekomendasi (halaman Dropdown) — kelas yang tidak ada padanan
   persisnya di CSS sumber: strip platform (sumber pakai grid sn-chooser yang
   terikat markup Twig) + state loading.
   ========================================================================== */
.rec-panel__plats{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  margin:.15rem 0 .65rem;
}
.rec-panel__loading{
  padding:1.4rem 1rem;
  text-align:center;
  color:var(--text-muted);
  font-size:.9rem;
}

/* ==========================================================================
   REKOMENDASI PANEL v2 — layout mengikuti providersmm.id
   (tile platform ber-ikon, chip jenis, search ber-ikon, kartu item dgn judul
   format + chip ID + subtitle qualifier + baris badge). Semua warna via token
   -> dark mode & aksen brand mitra otomatis.
   ========================================================================== */
.rec-panel--v2{margin-top:.9rem}
.rec-panel--v2 .rec-panel__hint{
  text-align:center;color:var(--text-muted);font-size:.84rem;
  margin:0 auto 1rem;max-width:34rem;line-height:1.55;
}
.rec-panel--v2 .rec-panel__hint b{color:var(--text)}

/* --- tile platform --- */
.rec-plats{display:flex;flex-wrap:wrap;gap:.55rem .7rem;justify-content:flex-start;margin-bottom:.85rem}
.rec-plat{
  display:flex;flex-direction:column;align-items:center;gap:.3rem;
  background:none;border:0;padding:0;cursor:pointer;min-width:3.2rem;
  color:var(--text-soft);font:inherit;
}
.rec-plat__ic{
  display:flex;align-items:center;justify-content:center;
  width:3rem;height:3rem;border-radius:1rem;
  background:var(--surface);border:1.5px solid var(--border);
  color:var(--text-soft);transition:all .15s ease;
}
/* ikon ~57% tile — sebelumnya 1.35em (~47%) kekecilan dibanding providersmm */
.rec-plat__ic .si-i{width:1.7rem;height:1.7rem}
.rec-plat__lb{font-size:.7rem;font-weight:600;color:var(--text-muted);line-height:1}
.rec-plat:hover .rec-plat__ic{border-color:var(--primary);color:var(--primary)}
.rec-plat.is-active .rec-plat__ic{
  background:var(--primary-soft);border-color:var(--primary);color:var(--primary);
  box-shadow:0 2px 8px var(--shadow-md);
}
.rec-plat.is-active .rec-plat__lb{color:var(--primary);font-weight:800}

/* --- chip jenis --- */
.rec-panel--v2 .rec-panel__jenis{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:.8rem}
.rec-panel--v2 .rec-jenis{
  border:1px solid var(--border);background:var(--surface);color:var(--text-soft);
  font-size:.8rem;font-weight:700;padding:.42rem .95rem;border-radius:var(--radius-pill);
  cursor:pointer;transition:all .13s ease;font-family:inherit;
}
.rec-panel--v2 .rec-jenis:hover{border-color:var(--primary);color:var(--primary)}
.rec-panel--v2 .rec-jenis.is-active{
  background:var(--primary);border-color:var(--primary);color:var(--primary-contrast);
}

/* --- search --- */
.rec-search{
  display:flex;align-items:center;gap:.55rem;
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:var(--radius-pill);padding:.55rem 1rem;margin-bottom:.9rem;
  color:var(--text-faint);
}
.rec-search:focus-within{border-color:var(--primary)}
.rec-search__input{
  flex:1;border:0;outline:0;background:none;color:var(--text);
  font-size:.88rem;font-family:inherit;min-width:0;
}
.rec-search__input::placeholder{color:var(--text-faint)}

/* --- kartu item --- */
.rec-panel--v2 .rec-panel__list{display:flex;flex-direction:column;gap:.65rem;max-height:30rem;overflow-y:auto;padding-right:.15rem}
.rec-card{
  display:flex;flex-direction:column;gap:.4rem;text-align:left;width:100%;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:.85rem 1rem;cursor:pointer;transition:all .14s ease;font-family:inherit;
}
.rec-card:hover{border-color:var(--primary);box-shadow:0 3px 12px var(--shadow-md);transform:translateY(-1px)}
.rec-card__top{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
.rec-card__title{font-size:.94rem;font-weight:800;color:var(--text);letter-spacing:-.01em}
.rec-card__id{
  font-size:.66rem;font-weight:700;color:var(--text-muted);
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:.45rem;padding:.14rem .45rem;font-family:var(--font-mono);
}
.rec-card__sub{font-size:.78rem;color:var(--text-muted);line-height:1.45}
.rec-card__badges{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.1rem}

/* --- badge --- */
.rcb{
  display:inline-flex;align-items:center;gap:.28rem;
  font-size:.7rem;font-weight:800;line-height:1.25;
  padding:.22rem .55rem;border-radius:var(--radius-pill);
  border:1px solid var(--border);background:var(--surface-2);color:var(--text-soft);
  white-space:nowrap;
}
.rcb--star{background:var(--gold-soft);border-color:var(--gold-border);color:var(--gold-ink)}
.rcb--star .si-i{color:var(--gold)}
.rcb--prov{background:var(--primary-soft);border-color:var(--primary);color:var(--primary)}
.rcb--best{background:var(--gold-soft);border-color:var(--gold-border);color:var(--gold-ink)}
.rcb--best .si-i{color:var(--gold)}
.rcb--dropgood{background:var(--success-bg);border-color:var(--success-border);color:var(--success-fg)}
.rcb--dropwarn{background:#fef3c7;border-color:#fde68a;color:#92400e}
html[data-theme="dark"] .rcb--dropwarn{background:rgba(251,191,36,.12);border-color:rgba(251,191,36,.3);color:#fbbf24}
.rcb--new{background:var(--accent-bg,#eff6ff);border-color:var(--accent-border,#dbeafe);color:#2563eb}
html[data-theme="dark"] .rcb--new{background:rgba(59,130,246,.14);border-color:rgba(59,130,246,.35);color:#93c5fd}

@media (max-width:560px){
  .rec-plat{min-width:2.9rem}
  .rec-plat__ic{width:2.7rem;height:2.7rem;border-radius:.85rem}
  .rec-plat__ic .si-i{width:1.5rem;height:1.5rem}
  .rec-plat__lb{font-size:.63rem}
  .rec-card{padding:.75rem .85rem}
  .rec-card__title{font-size:.88rem}
}

/* ==========================================================================
   Halaman Dropdown ("Buat Pesanan") — 2 kolom desktop, meniru providersmm.id:
   kiri = tab + select + form, kanan = Insight sticky. Mobile: satu kolom,
   Insight di antara select dan form (kolaps + peek chips, warisan CSS mobile
   .svc-insight yang sudah ada).
   row-gap WAJIB 0 + span besar tanpa gap -> tidak ada ruang hantu (pelajaran
   bug pd-wrap: 99 baris implisit x 16px = 1.584px).
   ========================================================================== */
@media (min-width: 992px){
  .ofd-wrap{
    max-width:1240px;
    margin-left:auto;
    margin-right:auto;
    display:grid;
    grid-template-columns:minmax(0,1fr) 380px;
    /* 5 baris kolom kiri (head, tabs, sel-card, rec-panel, mount); yang
       terakhir 1fr = penampung slack — alasan sama dgn .pd-wrap. */
    grid-template-rows:auto auto auto auto 1fr;
    gap:0 1.35rem;
    align-items:start;
  }
  .ofd-wrap > *{ grid-column:1; min-width:0; }
  .ofd-wrap > .svc-insight{
    grid-column:2;
    grid-row:1 / -1;
    align-self:start;
    margin:0;
    position:static;   /* alasan sama dgn .pd-wrap di atas */
  }
}

/* CATATAN (2026-07-17) — panel Insight SENGAJA tanpa position:sticky dan tanpa
   max-height/overflow-y. Versi awal pakai sticky + max-height:100vh +
   overflow-y:auto: begitu isi panel lebih tinggi dari layar muncul SCROLLBAR
   DALAM, dan roda mouse di atas panel menggulir panel (bukan halaman) — user
   melaporkan ini mengganggu. Tanpa max-height panel tumbuh sesuai isinya dan
   ikut scroll halaman: nol scrollbar dalam, nol konten kepotong.
   JANGAN kembalikan sticky tanpa max-height: isi panel (~800-950px) sering
   LEBIH TINGGI dari viewport laptop, jadi footer timestamp bakal kejepit di
   luar layar selama panel ter-pin — lebih buruk dari scrollbar. */