/* ==========================================================================
   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){
  .pd-wrap{
    max-width:1240px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 366px;
    /* 4 baris EKSPLISIT: crumb / hero / deskripsi / form. Ini yang bikin
       `grid-row: 2 / -1` di bawah punya titik akhir pasti = ujung baris form,
       jadi panel Insight MUSTAHIL memanjang melewati kolom kiri.
       Versi awal pakai `span 99` (biar muat isi setinggi apa pun) — itu bikin
       99 BARIS IMPLISIT, tiap baris kena row-gap: 99 x 16px = 1.584px ruang
       hantu di bawah form (bug 2026-07-17: kolom kiri 1559px, grid 3106px),
       dan sticky-nya ikut meluncur ke ruang kosong itu.
       row-gap tetap 0: jarak antar blok sudah dari margin-bottom bawaan
       .of-svc-card/.pd-desc/form — kalau dikasih gap lagi jadi dobel. */
    grid-template-rows:auto auto auto auto;
    gap:0 1.35rem;
    align-items:start;
  }
  /* breadcrumb membentang penuh di atas dua kolom */
  .pd-wrap > .pd-crumb{ grid-column:1 / -1; grid-row:1; }
  /* Insight: kolom kanan, mulai sebaris hero, ikut nempel saat scroll.
     span 99 = ikut setinggi apa pun isi kolom kiri (jumlah blok kiri bisa
     beda-beda: form Default / Custom Comments / Poll / Drip). */
  .pd-wrap > .svc-insight{
    grid-column:2;
    grid-row:2 / -1;
    position:sticky;
    top:1rem;
    align-self:start;
    margin:0;
    max-height:calc(100vh - 2rem);
    overflow-y:auto;
  }
  /* sisanya (hero, deskripsi, form) numpuk di kolom kiri */
  .pd-wrap > *:not(.pd-crumb):not(.svc-insight){ grid-column:1; }
  /* margin bawah blok terakhir bikin baris form lebih tinggi dari form-nya ->
     dasar panel jadi ~24px lebih rendah dari dasar form. Di 1 kolom margin ini
     berguna (jarak ke footer), di grid ditangani padding .pd-wrap. */
  .pd-wrap > form:last-of-type,
  .pd-wrap > #orderForm{ margin-bottom:0; }
}

/* ==========================================================================
   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; }
}