/* ===== ProviderSMM.id - CSS gabungan | GANTI semua CSS lama dari saya (style.css), Save ===== */

/* ============================================================================
   ProviderSMM.id — Electric Blue Redesign  (Light + Dark)
   Brand: #00B4E4 (logo electric blue) · #1884C0 (wordmark) · #001824 (navy)
   Tempel SELURUH isi file ini ke:  Admin > Code Editor > style.css
   (atau Settings > Preferences > Custom CSS)
   Aman ditempel: hanya menimpa style, tidak mengubah struktur Twig.
   ========================================================================== */


/* ----------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand scale — electric blue dari logo */
  --brand-50:  #E8F9FE;
  --brand-100: #C7F0FC;
  --brand-200: #93E3F9;
  --brand-300: #54D2F2;
  --brand-400: #1FC1EA;
  --brand-500: #00B4E4;   /* logo electric blue */
  --brand-600: #0399C4;
  --brand-700: #0A7CA0;   /* wordmark biru */
  --brand-800: #0C5E78;
  --brand-900: #0A3F52;

  /* Status */
  --success: #16B981;
  --warning: #F2A93B;
  --danger:  #EF5A5A;
  --info:    var(--brand-500);

  /* Electric gold — aksen "pemanis" biar nggak monoton cyan (selaras pill 99K/bln & tombol Pesan) */
  --gold:        #FFB300;
  --gold-ink:    #9A6700;                  /* teks gold yang kebaca di LIGHT */
  --gold-soft:   rgba(245,163,0,.14);
  --gold-border: rgba(245,163,0,.34);
  --grad-gold:   linear-gradient(135deg, #FFD24A, #FF9D00);

  /* Radii */
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* Font */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', SFMono-Regular, Menlo, Consolas, monospace;

  /* Layout */
  --nav-h: 64px;
  --container-max: 1200px;

  /* Type scale — standar UI/UX, rasio ~1.2–1.25, root 17px */
  --fs-caption: 0.8rem;    /* ~13.6px — badge, eyebrow, helper text (jangan < 12px) */
  --fs-sm:      0.875rem;  /* ~15px   — label, tabel, teks sekunder */
  --fs-body:    1rem;      /* 17px    — paragraf & input (standar body ≥16px) */
  --fs-lead:    1.15rem;   /* ~19.5px — paragraf intro */
  --fs-h4:      1.25rem;   /* ~21px   — sub-judul / judul kartu */
  --fs-h3:      1.5rem;    /* ~25.5px */
  --fs-h2:      clamp(1.75rem, 1.2rem + 2.2vw, 2.25rem);   /* ~30–38px */
  --fs-h1:      clamp(2.25rem, 1.5rem + 3.2vw, 3.25rem);   /* ~38–55px */

  /* ---- LIGHT MODE (default) ---- */
  --bg:        #F4FAFD;
  --bg-2:      #E9F4FA;
  --surface:   #FFFFFF;
  --surface-2: #F1F8FC;
  --surface-3: #E5F1F9;
  --border:    #DBE8F0;
  --border-2:  #C7DCE8;
  --text:      #0B2330;
  --text-2:    #38566A;
  --text-muted:#6E8A99;

  --primary:          var(--brand-500);
  --primary-strong:   var(--brand-600);
  --primary-soft:     var(--brand-50);
  --primary-contrast: #FFFFFF;
  --link:             var(--brand-700);

  --ring:    rgba(0,180,228,.32);
  --shadow-sm: 0 1px 2px rgba(11,35,48,.06), 0 1px 3px rgba(11,35,48,.07);
  --shadow:    0 6px 22px rgba(11,35,48,.09);
  --shadow-lg: 0 16px 40px rgba(11,35,48,.14);
  --glow:      0 8px 24px rgba(0,180,228,.30);

  --grad-primary: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-500) 55%, var(--brand-400) 100%);
  --grad-hero:    linear-gradient(135deg, #013A4E 0%, #036B8D 45%, #00B4E4 100%);

  /* ---- Remap warna lama Visual Editor ke brand baru (aman) ---- */
  --color-id-59: var(--brand-700);   /* link lama #036B8D */
  --link-old:    var(--brand-700);

  color-scheme: light;
}

/* ---- DARK MODE ---- */
[data-theme="dark"] {
  --bg:        #06141E;
  --bg-2:      #0A1C28;
  --surface:   #0E2230;
  --surface-2: #13303F;
  --surface-3: #1A3C4D;
  --border:    #182A37;   /* soft: garis lebih lembut & menyatu di dark mode */
  --border-2:  #243B4B;
  --text:      #E6F3FA;
  --text-2:    #B6CEDB;
  --text-muted:#7E9DAD;

  --primary:          var(--brand-500);
  --primary-strong:   var(--brand-400);
  --primary-soft:     rgba(0,180,228,.12);
  --primary-contrast: #04222F;        /* teks gelap di atas cyan terang = sangat "electric" */
  --link:             var(--brand-300);

  --gold-ink:    #FFC74D;                  /* teks gold lebih terang di DARK */
  --gold-soft:   rgba(255,194,71,.13);
  --gold-border: rgba(255,194,71,.30);

  --ring:    rgba(0,180,228,.45);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.45);
  --shadow:    0 8px 26px rgba(0,0,0,.50);
  --shadow-lg: 0 20px 48px rgba(0,0,0,.60);
  --glow:      0 8px 28px rgba(0,180,228,.45);

  --grad-primary: linear-gradient(135deg, var(--brand-400) 0%, var(--brand-500) 60%, #25D2F5 100%);
  --grad-hero:    linear-gradient(135deg, #04222F 0%, #0A7CA0 50%, #00B4E4 120%);

  --color-id-59: var(--brand-300);

  color-scheme: dark;
}

/* ----------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; font-size: 17px; }   /* skala global (naik dari 16px) — semua rem ikut membesar */
/* Matiin smooth di HP (cegah native scroll-into-view mis-target pas fokus input). CATATAN: bug "scroll mental ke ATAS pas refresh + scroll cepat" DIFIX di JS pakai history.scrollRestoration='manual' (sebab aslinya = browser nge-restore posisi scroll pas reload, nabrak scroll user) — BUKAN overflow-anchor (udah dicoba, bukan itu). */
@media (max-width: 991px) { html { scroll-behavior: auto; } }

body, .body, .body-public {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  transition: background-color .35s ease, color .35s ease;
}

a { color: var(--link); text-decoration: none; transition: color .2s; }
a:hover { color: var(--primary); }

h1,h2,h3,h4,h5,h6 { color: var(--text); font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
h1 { font-size: var(--fs-h1); font-weight: 800; line-height: 1.1; }
h2 { font-size: var(--fs-h2); line-height: 1.15; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-body); }
h6 { font-size: var(--fs-sm); }
small, .text-muted { color: var(--text-muted) !important; }

code, kbd, pre, .mono, .apikey { font-family: var(--font-mono); }

hr { border-color: var(--border); opacity: 1; }

::selection { background: var(--brand-500); color: #04222F; }

/* Scrollbar */
* { scrollbar-color: var(--border-2) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-500); }

:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); border-radius: var(--radius-sm); }

/* ============ GLOBAL UI/UX (audit) — NOL underline saat hover + NOL "stroke" outline saat di-KLIK ============
   Sumber underline = Bootstrap `a:hover{text-decoration:underline}`. Sumber stroke putih = outline fokus bawaan
   (webkit-focus-ring) saat elemen di-KLIK pakai mouse. Dimatiin SEKALI di sini untuk SEMUA halaman & komponen
   (header landing, sidebar, tab bar, dropdown, tombol, dll). Navigasi KEYBOARD tetap dapat ring tema lewat
   :focus-visible (box-shadow di atas) -> aksesibilitas aman. !important supaya tidak kambuh lagi di mana pun. */
a, a:hover, a:focus, a:active, a:visited { text-decoration: none !important; }
:focus:not(:focus-visible) { outline: none !important; }
a:focus, button:focus, summary:focus, label:focus, input:focus, select:focus, textarea:focus, [tabindex]:focus, .btn:focus { outline: none !important; }

/* ----------------------------------------------------------------------------
   3. NAVBAR
   -------------------------------------------------------------------------- */
.navbar, .navbar-light {
  background: color-mix(in srgb, var(--surface) 86%, transparent) !important;
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
  min-height: var(--nav-h);
  box-shadow: var(--shadow-sm);
  transition: background-color .35s ease, border-color .35s ease;
}
.navbar-brand { font-weight: 800; color: var(--text) !important; letter-spacing: -.02em; }
.navbar .nav-link {
  color: var(--text-2) !important;
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: .5rem .85rem !important;
  transition: color .2s, background-color .2s;
}
.navbar .nav-link:hover,
.navbar .nav-link.active { color: var(--primary) !important; background: var(--primary-soft); }
.navbar-toggler { border-color: var(--border-2); }

/* ----------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  font-family: var(--font-sans);
  font-weight: 700;
  border-radius: var(--radius-pill);
  padding: .62rem 1.35rem;
  border: 1px solid transparent;
  transition: transform .12s ease, box-shadow .2s ease, background-color .2s, color .2s, border-color .2s;
  letter-spacing: .01em;
}
.btn:active { transform: translateY(1px); }

.btn-primary, .btn-info, .btn-submit {
  background: var(--grad-primary);
  color: var(--primary-contrast) !important;
  box-shadow: var(--glow);
  border: none;
}
.btn-primary:hover, .btn-info:hover, .btn-submit:hover {
  filter: brightness(1.06);
  box-shadow: 0 10px 30px rgba(0,180,228,.42);
  color: var(--primary-contrast) !important;
}

.btn-outline-primary {
  background: transparent;
  color: var(--primary) !important;
  border: 1.5px solid var(--primary);
}
.btn-outline-primary:hover { background: var(--primary); color: var(--primary-contrast) !important; }

.btn-secondary, .btn-light, .btn-default {
  background: var(--surface-2);
  color: var(--text) !important;
  border: 1px solid var(--border);
}
.btn-secondary:hover, .btn-light:hover, .btn-default:hover { background: var(--surface-3); border-color: var(--border-2); }

.btn-success { background: var(--success); color:#fff !important; border:none; }
.btn-danger  { background: var(--danger);  color:#fff !important; border:none; }
.btn-warning { background: var(--warning); color:#3a2600 !important; border:none; }
.btn-link    { color: var(--link) !important; }

.btn-lg { padding: .85rem 1.8rem; font-size: 1.02rem; }
.btn-sm { padding: .4rem .9rem; font-size: .82rem; }
.btn-block, .w-100.btn { width: 100%; }

/* ----------------------------------------------------------------------------
   5. FORMS
   -------------------------------------------------------------------------- */
label, .form-label, .control-label { color: var(--text-2); font-weight: 600; font-size: var(--fs-sm); margin-bottom: .4rem; }

.form-control, .form-select, select, textarea, input[type="text"],
input[type="email"], input[type="password"], input[type="number"], input[type="search"] {
  background: var(--surface);
  color: var(--text);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: .65rem .9rem;
  font-family: var(--font-sans);
  font-size: .95rem;
  transition: border-color .18s, box-shadow .18s, background-color .35s;
}
.form-control::placeholder, input::placeholder { color: var(--text-muted); }
.form-control:focus, .form-select:focus, select:focus, textarea:focus,
input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
  background: var(--surface);
  outline: none;
}
.form-control:disabled, .form-control[readonly] { background: var(--surface-2); color: var(--text-muted); }

.input-group-text, .input-group-prepend .input-group-text {
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  color: var(--text-2);
  border-radius: var(--radius);
}

.form-group { margin-bottom: 1.1rem; }
.custom-control-label::before { background: var(--surface-2); border-color: var(--border-2); }
.custom-control-input:checked ~ .custom-control-label::before { background: var(--primary); border-color: var(--primary); }

/* ----------------------------------------------------------------------------
   6. CARDS
   -------------------------------------------------------------------------- */
.card, .w-100.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .25s ease, border-color .25s, background-color .35s;
}
.card:hover { box-shadow: var(--shadow); }
.card-header { background: transparent; border-bottom: 1px solid var(--border); font-weight: 700; color: var(--text); }
.card-footer { background: transparent; border-top: 1px solid var(--border); }
.card-title { color: var(--text); font-weight: 700; }

/* Kartu balance/statistik */
.balance-card, .stat-card, .widget {
  background: var(--grad-primary);
  color: var(--primary-contrast);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--glow);
}

/* ----------------------------------------------------------------------------
   7. TABLES (services, orders, dst.)
   -------------------------------------------------------------------------- */
.table {
  color: var(--text);
  border-color: var(--border);
  /* override variabel tabel Bootstrap agar ikut dark mode */
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  --bs-table-striped-bg: var(--surface-2);
  --bs-table-striped-color: var(--text);
  --bs-table-hover-bg: var(--surface-2);
  --bs-table-hover-color: var(--text);
  --bs-table-border-color: var(--border);
}
.table thead th {
  background: var(--surface-2);
  color: var(--text-2);
  font-weight: 700;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  border-bottom: 1px solid var(--border) !important;
  border-top: none;
}
.table td, .table th { border-top: 1px solid var(--border); padding: .8rem 1rem; vertical-align: middle; }
.table-hover tbody tr:hover { background: var(--surface-2); }
.table-striped tbody tr:nth-of-type(odd) { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.table .rate, .table .price, td.mono, .id-cell { font-family: var(--font-mono); color: var(--primary-strong); font-weight: 600; }

/* ----------------------------------------------------------------------------
   8. ALERTS
   -------------------------------------------------------------------------- */
.alert { border-radius: var(--radius); border: 1px solid transparent; padding: .9rem 1.1rem; font-weight: 500; }
.alert-success { background: color-mix(in srgb, var(--success) 14%, var(--surface)); border-color: color-mix(in srgb, var(--success) 40%, transparent); color: var(--text); }
.alert-danger, .alert-error { background: color-mix(in srgb, var(--danger) 14%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 40%, transparent); color: var(--text); }
.alert-warning { background: color-mix(in srgb, var(--warning) 16%, var(--surface)); border-color: color-mix(in srgb, var(--warning) 45%, transparent); color: var(--text); }
.alert-info { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 35%, transparent); color: var(--text); }

/* ----------------------------------------------------------------------------
   9. BADGES / STATUS PILLS
   -------------------------------------------------------------------------- */
.badge { border-radius: var(--radius-pill); font-weight: 700; padding: .35em .7em; font-size: .74rem; }
.badge-primary, .badge-info { background: var(--primary-soft); color: var(--primary-strong); }
.badge-success, .status-completed, .label-success { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); }
.badge-danger, .status-canceled, .label-danger { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
.badge-warning, .status-pending, .status-processing, .label-warning { background: color-mix(in srgb, var(--warning) 20%, transparent); color: #b9791a; }
[data-theme="dark"] .badge-warning, [data-theme="dark"] .status-pending { color: var(--warning); }

/* ----------------------------------------------------------------------------
   10. PAGINATION / DROPDOWN / MODAL
   -------------------------------------------------------------------------- */
.pagination .page-link {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-2);
  border-radius: var(--radius-sm) !important;
  margin: 0 3px;
  font-weight: 600;
}
.pagination .page-item.active .page-link { background: var(--primary); border-color: var(--primary); color: var(--primary-contrast); }
.pagination .page-link:hover { background: var(--surface-2); color: var(--primary); }
/* PerfectPanel pakai Bootstrap 3 (.pagination > li > a) -> default bg PUTIH, ga ke-tema di dark (mis. Orders). Tema-in global di sini. */
.pagination { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .25rem; padding-left: 0; }
.pagination > li { display: block; float: none; margin: 0; }
.pagination > li > a, .pagination > li > span { display: block; float: none; background: var(--surface); border: 1px solid var(--border); color: var(--text-2); border-radius: var(--radius-sm) !important; margin: 0; padding: .45rem .8rem; min-width: 40px; text-align: center; font-weight: 600; line-height: 1.4; transition: background .15s, color .15s, border-color .15s; }
.pagination > li > a:hover, .pagination > li > a:focus { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
.pagination > li.active > a, .pagination > li.active > a:hover, .pagination > li.active > a:focus, .pagination > li.active > span { background: var(--primary); border-color: var(--primary); color: var(--primary-contrast); }
.pagination > li.disabled > a, .pagination > li.disabled > span { color: var(--text-muted); opacity: .55; cursor: not-allowed; }

.dropdown-menu { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
/* PerfectPanel render item dropdown sbg <li><a> — specificity .dropdown-menu>li>a ngalahin .dropdown-item kita, makanya teks pudar di dark. Target dua-duanya + !important + --text biar PASTI kebaca. */
.dropdown-item, .dropdown-menu > li > a { color: var(--text) !important; }
.dropdown-item:hover, .dropdown-item:focus, .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background: var(--primary-soft) !important; color: var(--primary) !important; }
.dropdown-divider { border-color: var(--border); }

.modal-content { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--text); box-shadow: var(--shadow-lg); }
.modal-header, .modal-footer { border-color: var(--border); }
.close, .btn-close { color: var(--text); }

/* ----------------------------------------------------------------------------
   11. SIDEBAR (halaman panel setelah login) — defensif
   -------------------------------------------------------------------------- */
.sidebar, .side-menu, .dashboard-sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
}
.sidebar a, .side-menu a { color: var(--text-2); border-radius: var(--radius-sm); }
.sidebar a:hover, .sidebar a.active, .side-menu a.active { background: var(--primary-soft); color: var(--primary); }

/* ----------------------------------------------------------------------------
   12. VISUAL EDITOR BLOCKS (landing page)
   -------------------------------------------------------------------------- */
.block-bg { background: var(--bg); transition: background-color .35s; }
.style-bg-light, .style-bg-white { background: var(--surface) !important; }
.style-text-dark { color: var(--text) !important; }
.style-text-white { color: #fff !important; }
.style-box-shadow-default { box-shadow: var(--shadow) !important; }
.style-border-radius-50 { border-radius: var(--radius-pill) !important; }

.text-block__title, .features-block__header-title, .how-it-works-title,
.faq-block__header-title { color: var(--text); }
.text-block__description, .features-block__body-description,
.how-it-works-description, .faq-block__body-description { color: var(--text-2); }

.features-block, .how-it-works-card, .faq-block, .features-card__preview {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: background-color .35s, border-color .35s, transform .18s, box-shadow .25s;
}
.how-it-works-card:hover, .features-block:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.how-it-works-number, .style-card-number { background: var(--grad-primary) !important; color: var(--primary-contrast) !important; }

.faq-block__header { color: var(--text); font-weight: 700; }
.faq-block__icon, .faq-block__header-icon { color: var(--primary); }

/* hero / header dengan background gambar di dark mode -> scrim gelap */
[data-theme="dark"] .bg-image { position: relative; }
[data-theme="dark"] .bg-image::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(rgba(6,20,30,.55), rgba(6,20,30,.72));
  pointer-events: none; z-index: 0;
}
[data-theme="dark"] .bg-image > * { position: relative; z-index: 1; }

/* review cards */
.style-review-card-desc, .item__desc { color: var(--text-2); }
.style-review-card-author, .item__author { color: var(--text); font-weight: 700; }

/* ----------------------------------------------------------------------------
   13. THEME TOGGLE BUTTON  (di-inject oleh theme-toggle.js)
   -------------------------------------------------------------------------- */
.psmm-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  margin-left: .5rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  transition: background-color .2s, border-color .2s, transform .15s, color .2s;
}
.psmm-theme-toggle:hover { border-color: var(--primary); color: var(--primary); transform: rotate(-12deg); }
.psmm-theme-toggle svg { width: 20px; height: 20px; }
.psmm-theme-toggle .icon-sun  { display: none; }
.psmm-theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .psmm-theme-toggle .icon-sun  { display: block; }
[data-theme="dark"] .psmm-theme-toggle .icon-moon { display: none; }
/* versi fixed kalau navbar tidak ketemu */
.psmm-theme-toggle.is-floating {
  position: fixed; right: 18px; bottom: 18px; z-index: 9999;
  width: 48px; height: 48px; box-shadow: var(--shadow-lg);
}

/* ----------------------------------------------------------------------------
   14. FOOTER
   -------------------------------------------------------------------------- */
footer, .footer, .site-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  color: var(--text-2);
  transition: background-color .35s, border-color .35s;
}
footer a, .footer a { color: var(--text-2); }
footer a:hover, .footer a:hover { color: var(--primary); }

/* ----------------------------------------------------------------------------
   15. UTIL
   -------------------------------------------------------------------------- */
.container, .container-fluid { max-width: var(--container-max); }
.container-fluid.full { max-width: none; }
.text-primary { color: var(--primary) !important; }
.bg-primary { background: var(--primary) !important; color: var(--primary-contrast) !important; }
.shadow, .shadow-sm, .shadow-lg { box-shadow: var(--shadow) !important; }

/* animasi halus saat ganti mode */
@media (prefers-reduced-motion: no-preference) {
  .card, .navbar, .btn, .form-control, .features-block, .how-it-works-card, footer {
    transition-duration: .3s;
  }
}

/* ############ home.css ############ */
/* ============================================================================
   ProviderSMM.id — HALAMAN UTAMA (layout redesign)
   Dipakai bersama style.css (token & komponen global).
   Tempel ke style.css / Custom CSS SETELAH isi style.css.
   ========================================================================== */

.home { padding-top: var(--nav-h); }
.home section { scroll-margin-top: calc(var(--nav-h) + 12px); }
.wrap { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 20px; }

/* Eyebrow + judul section ----------------------------------------------------*/
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font: 800 .76rem/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-ink); background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--gold-border);
  padding: .45rem .8rem; border-radius: var(--radius-pill); margin-bottom: 1rem;
}
.sec-title { font-size: var(--fs-h2); font-weight: 800; line-height: 1.15; margin: 0 0 .8rem; }
.sec-lead { color: var(--text-2); font-size: 1.05rem; max-width: 720px; margin: 0 0 2.2rem; }
.sec-pad { padding: clamp(3rem, 6vw, 5.5rem) 0; }
.center { text-align: center; }
.center .sec-lead { margin-left: auto; margin-right: auto; }

/* ============ HERO ============ */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(2.5rem, 4vw, 3.5rem);
}
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto auto; width: 720px; height: 720px;
  background: radial-gradient(circle at 70% 30%, rgba(0,180,228,.22), transparent 60%);
  pointer-events: none; z-index: 0;
}
[data-theme="dark"] .hero::before { background: radial-gradient(circle at 70% 30%, rgba(0,180,228,.30), transparent 60%); }
.hero .wrap { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: stretch; }
.hero-side { display: flex; flex-direction: column; gap: 1rem; }
.hero-side .hero-badges { margin-bottom: 0; }
.hero-side .hero-trust { margin-top: auto; }   /* dorong trust ke bawah → sejajar dasar kolom kiri, ruang kosong hilang */
.hero h1 {
  font-size: clamp(2rem, 1.2rem + 3.4vw, 3.4rem); font-weight: 800; line-height: 1.08;
  letter-spacing: -.02em; margin: 1rem 0 1.1rem;
}
.hero h1 .grad { background: var(--grad-primary); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-lead { font-size: 1.08rem; color: var(--text-2); margin-bottom: 1.5rem; max-width: 560px; }
.hero-badges { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.6rem; }
.chip {
  display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .85rem;
  color: var(--text-2); background: var(--surface); border: 1px solid var(--border);
  padding: .45rem .8rem; border-radius: var(--radius-pill); box-shadow: var(--shadow-sm);
}
.chip svg { width: 16px; height: 16px; color: var(--primary); }

/* Login card di hero */
.login-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: var(--shadow-lg); position: relative;
}
.login-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(140deg, rgba(0,180,228,.5), transparent 50%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.login-card h2 { font-size: 1.25rem; margin: 0 0 .3rem; }
.login-card .muted { color: var(--text-muted); font-size: .9rem; margin-bottom: 1.2rem; }
.login-card .row-between { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; font-size: .9rem; }
/* pemisah "atau" + tombol Google */
.login-divider { display: flex; align-items: center; gap: .8rem; color: var(--text-muted); font-size: .8rem; margin: 1.3rem 0 1rem; }
.login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.g_id_signin { display: flex; justify-content: center; }
.g_id_signin > div, .g_id_signin iframe { margin: 0 auto !important; }

/* ============ STATS BAND ============ */
/* "Dark Glass" (varian A, dipilih user 2026-07-15) — band MENYATU sama halaman, bukan slab cyan menyala.
   Bug lama: ikon dikasih warna --primary-contrast (#04222F, navy GELAP) di atas gradient cyan TERANG + tile putih transparan
   -> garis ikon tipis jadi kusam/nabrak. Sekarang dibalik: ikon BIRU TERANG di atas permukaan GELAP (kontras tinggi). */
.stats-band { position: relative; overflow: hidden; border-radius: var(--radius-xl); margin: 1rem 0;
  background: linear-gradient(160deg, #FFFFFF 0%, #F4FAFD 100%); border: 1px solid #CFE3EE; box-shadow: 0 14px 34px rgba(11,45,64,.09); }
[data-theme="dark"] .stats-band { background: linear-gradient(160deg, #122E41 0%, #0E2434 100%); border-color: #23516B; box-shadow: 0 18px 44px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.07); }
/* garis grafik SVG tipis di belakang angka — kesan "data". Pakai currentColor biar bisa diwarnai per tema. */
.stats-band__bg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; color: #0B2130; opacity: .10; }
[data-theme="dark"] .stats-band__bg { color: #8FD8F5; opacity: .16; }
.stats-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 1.75rem 1rem; text-align: center; position: relative; }
/* pemisah antar kolom */
.stat + .stat::before { content: ""; position: absolute; left: 0; top: 18%; height: 64%; width: 1px; background: linear-gradient(to bottom, transparent, #D6E5EF, transparent); }
[data-theme="dark"] .stat + .stat::before { background: linear-gradient(to bottom, transparent, rgba(120,190,220,.28), transparent); }
/* ikon SVG dalam tile membulat — jangkar visual tiap statistik */
.stat__ic { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 auto .7rem; border-radius: 13px;
  background: rgba(0,180,228,.10); border: 1px solid rgba(0,144,186,.35); color: #0090BA; }
[data-theme="dark"] .stat__ic { background: rgba(0,180,228,.13); border-color: rgba(0,180,228,.42); color: #3FD0F5; box-shadow: 0 0 18px rgba(0,180,228,.14); }
.stat__ic > svg { width: 22px; height: 22px; display: block; }
.stat b { display: block; font: 800 clamp(1.7rem,1rem+2.2vw,2.6rem)/1 var(--font-mono); letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: #0B2130; }
[data-theme="dark"] .stat b { color: #F2FAFE; }
.stat b::after { content: ""; display: block; width: 26px; height: 2px; margin: .55rem auto 0; border-radius: 2px; background: var(--gold); }
/* :not(.stat__ic) WAJIB — tanpa itu rule ini nimpa .stat__ic (ikonnya juga <span>) dan bikin display:inline-flex-nya batal (spesifisitas .stat span > .stat__ic) */
.stat > span:not(.stat__ic) { display: block; margin-top: .5rem; font-weight: 700; font-size: .74rem; text-transform: uppercase; letter-spacing: .09em; color: #5E7A8A; }
[data-theme="dark"] .stat > span:not(.stat__ic) { color: #9BBBCC; }

/* ============ GRID KARTU GENERIK ============ */
.card-grid { display: grid; gap: 1.2rem; }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }

.feature {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 1.6rem; box-shadow: var(--shadow-sm); transition: transform .18s, box-shadow .25s, border-color .2s;
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--border-2); }
.feature .ico {
  display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px;
  border-radius: 14px; background: var(--primary-soft); color: var(--primary); margin-bottom: 1rem;
}
.feature .ico svg { width: 26px; height: 26px; }
.feature h3 { font-size: 1.1rem; font-weight: 700; margin: 0 0 .5rem; }
.feature p { color: var(--text-2); font-size: .95rem; margin: 0; }
.feature.flag { border-color: var(--primary); box-shadow: var(--glow); }

/* ============ DROP RATE MONITOR (flagship) ============ */
.monitor { background: var(--surface-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.monitor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,4vw,3rem); align-items: start; }
.monitor-visual {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); overflow: hidden; position: sticky; top: calc(var(--nav-h) + 16px);
}
.monitor-visual .bar { display: flex; align-items: center; gap: .4rem; padding: .8rem 1rem; border-bottom: 1px solid var(--border); }
.monitor-visual .dot { width: 10px; height: 10px; border-radius: 50%; }
.monitor-visual .live { margin-left: auto; font: 700 .72rem var(--font-mono); color: var(--success); display: flex; align-items: center; gap: .35rem; }
.monitor-visual .live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0 rgba(22,185,129,.6); animation: pulse 1.8s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 7px rgba(22,185,129,0); } 100% { box-shadow: 0 0 0 0 rgba(22,185,129,0); } }
.monitor-row { display: grid; grid-template-columns: 1.4fr .8fr .8fr 1fr; gap: .5rem; padding: .75rem 1rem; border-bottom: 1px solid var(--border); align-items: center; font-size: .85rem; }
.monitor-row.head { background: var(--surface-2); font-weight: 700; color: var(--text-2); text-transform: uppercase; font-size: .7rem; letter-spacing: .04em; }
.monitor-row .svc { font-weight: 600; }
.monitor-row .num { font-family: var(--font-mono); color: var(--primary-strong); }
.stars { color: #F2A93B; letter-spacing: 1px; }
/* live-stat line (di section Drop-Rate Monitor) */
.mon-livestat { text-align: center; margin: .9rem auto 1.6rem; max-width: 660px; font-size: .92rem; line-height: 1.55; color: var(--text-2); }
.mon-livestat[hidden] { display: none; }
.mon-livestat b { color: var(--text); font-family: var(--font-mono); font-weight: 800; }
/* panel monitor kanan jadi accordion (default tertutup, klik buka deskripsi) */
.mon-acc { padding: 0; }
.mon-acc > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .7rem; padding: 1.15rem 1.4rem; font-size: 1.05rem; font-weight: 700; color: var(--text); }
.mon-acc > summary::-webkit-details-marker { display: none; }
.mon-acc > summary::after { content: "\25BE"; margin-left: auto; font-size: 1rem; color: var(--text-2); transition: transform .2s ease; }
.mon-acc[open] > summary::after { transform: rotate(180deg); }
.mon-acc > summary:hover { color: var(--primary-strong); }
.mon-acc__body { padding: 0 1.4rem 1.3rem; }
.mon-acc__body > :first-child { margin-top: 0; }
/* modal gate login (klik kartu layanan terlaris saat belum login) */
.psmm-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.psmm-modal[hidden] { display: none; }
.psmm-modal__backdrop { position: absolute; inset: 0; background: rgba(4,12,20,.58); }
.psmm-modal__box { position: relative; z-index: 1; width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 1.7rem 1.5rem 1.5rem; text-align: center; animation: psmmModalIn .2s ease; }
@keyframes psmmModalIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.psmm-modal__x { position: absolute; top: .5rem; right: .65rem; background: none; border: 0; font-size: 1.5rem; line-height: 1; color: var(--text-2); cursor: pointer; padding: .2rem .45rem; }
.psmm-modal__x:hover { color: var(--text); }
.psmm-modal__ic { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-strong); font-size: 1.15rem; }
.psmm-modal__box h3 { margin: .7rem 0 .4rem; font-size: 1.2rem; }
.psmm-modal__box p { color: var(--text-2); font-size: .92rem; margin: 0 0 1.15rem; line-height: 1.5; }
.psmm-modal__svc { color: var(--text); }
.psmm-modal__actions { display: flex; gap: .6rem; }
.psmm-modal__actions .btn { flex: 1; }
/* upsell "rak kasir" di modal konfirmasi order — token tema biar OKE di light & dark */
.psmm-up { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); text-align: left; }
.psmm-up__head { display: flex; align-items: center; gap: .45rem; font-weight: 800; font-size: .98rem; color: var(--text); }
.psmm-up__head i { color: var(--primary-strong); }
.psmm-up__lead { margin: .3rem 0 .8rem; font-size: .86rem; line-height: 1.5; color: var(--text-2); }
.psmm-up__cards { display: flex; flex-direction: column; gap: .55rem; }
.psmm-up__card { display: flex; align-items: center; gap: .75rem; width: 100%; text-align: left; padding: .7rem .85rem; border: 1px solid var(--border); border-radius: 12px; background: rgba(0,0,0,.035); cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
[data-theme="dark"] .psmm-up__card { background: rgba(255,255,255,.06); }
.psmm-up__card:hover, .psmm-up__card:focus { border-color: var(--primary); background: var(--primary-soft); }
.psmm-up__ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; background: var(--primary-soft); color: var(--primary-strong); display: flex; align-items: center; justify-content: center; font-size: .95rem; }
.psmm-up__b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.psmm-up__name { font-weight: 700; font-size: .9rem; color: var(--text); line-height: 1.25; }
.psmm-up__meta { font-size: .76rem; color: var(--text-2); font-family: var(--font-mono); display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.psmm-up__meta .svc-id { margin: 0; }
.psmm-up__add { flex: 0 0 auto; font-weight: 800; font-size: .8rem; color: var(--primary-contrast, #062B38); background: var(--primary); padding: .42rem .8rem; border-radius: 8px; white-space: nowrap; }
.psmm-up__old { text-decoration: line-through; opacity: .55; font-weight: 500; margin-right: .12rem; }
.psmm-up__card.is-active { border-color: var(--primary); box-shadow: inset 0 0 0 1.5px var(--primary); background: var(--primary-soft); }
.psmm-up__status { margin: .75rem 0 0; font-size: .82rem; line-height: 1.45; color: var(--success); display: flex; align-items: flex-start; gap: .35rem; }
.psmm-up__status[hidden] { display: none; }
.psmm-up__status i { margin-top: .15rem; flex: 0 0 auto; }
.psmm-up__status b { color: var(--text); }
/* Pesanan Massal: upsell komentar dikasih kartu surface sendiri (di BAWAH alert sukses hijau) biar kontras & rapi */
.psmm-up-mo { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: .15rem 1.15rem 1.15rem; margin: .9rem 0 0; box-shadow: var(--shadow-sm); }
.psmm-up-mo .psmm-up { border-top: 0; margin-top: 0; padding-top: .9rem; }
/* makeover kotak konfirmasi order (.alert-success) → header hijau + body gelap rapi (kayak mockup). SCOPED via .psmm-order-done → alert lain aman */
.alert-success.psmm-order-done, .psmm-order-done { background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--border) !important; border-radius: 14px !important; padding: 0 !important; overflow: hidden; box-shadow: var(--shadow-md); }
.psmm-done-head { display: flex; align-items: center; gap: .5rem; background: var(--success); color: #fff; padding: .8rem 1.1rem; font-weight: 800; }
.psmm-done-head > i { font-size: 1.15rem; flex: 0 0 auto; }
.psmm-done-title { flex: 1 1 auto; font-size: 1.05rem; min-width: 0; }
.psmm-order-done .psmm-done-head .close { position: static; float: none; margin: 0; padding: 0 .1rem; opacity: .92; color: #fff; text-shadow: none; font-size: 1.5rem; line-height: 1; font-weight: 400; }
.psmm-order-done .psmm-done-head .close:hover { opacity: 1; color: #fff; }
.psmm-done-body { padding: 1rem 1.15rem 1.15rem; color: var(--text-2); font-size: .92rem; line-height: 1.7; }
/* marquee "Lagi ramai diorder" di atas form order (Opsi A) */
.psmm-mq { display: flex; align-items: center; gap: .45rem; margin: 0 0 .8rem; padding: .38rem .45rem .38rem .55rem; border: 1px solid var(--border); border-radius: var(--radius-pill, 999px); background: var(--surface); overflow: hidden; }
.psmm-mq__tag { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 800; color: #C67A0E; background: color-mix(in srgb, var(--warning) 18%, transparent); padding: .28rem .55rem; border-radius: 999px; white-space: nowrap; }
[data-theme="dark"] .psmm-mq__tag { color: var(--warning); }
.psmm-mq__view { flex: 1 1 auto; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.psmm-mq__track { display: inline-flex; align-items: center; white-space: nowrap; animation: psmm-mq-scroll 30s linear infinite; will-change: transform; }
.psmm-mq:hover .psmm-mq__track, .psmm-mq__track:focus-within { animation-play-state: paused; }
@keyframes psmm-mq-scroll { to { transform: translateX(-50%); } }
.psmm-mq__item { flex: 0 0 auto; margin-right: .5rem; font-size: .78rem; font-weight: 600; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: .3rem .7rem; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.psmm-mq__item:hover, .psmm-mq__item:focus { border-color: var(--primary); color: var(--primary-strong); background: var(--primary-soft); }
.psmm-mq__item i { color: var(--warning); margin-right: .3rem; }
.psmm-mq__id { font-family: var(--font-mono); opacity: .75; }
.psmm-mq__x { flex: 0 0 auto; background: none; border: 0; color: var(--text-2); font-size: 1.1rem; line-height: 1; cursor: pointer; padding: .1rem .35rem; }
.psmm-mq__x:hover { color: var(--text); }
@media (prefers-reduced-motion: reduce) { .psmm-mq__track { animation: none; } .psmm-mq__view { overflow-x: auto; } }
.mon-live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0 rgba(22,185,129,.6); animation: pulse 1.8s infinite; vertical-align: middle; margin-right: .35rem; }
/* ===== Section "Layanan Terlaris & Rekomendasi" (landing, diisi JS live) ===== */
.top-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 1rem; margin-top: 1.6rem; }
.top-loading { grid-column: 1 / -1; text-align: center; color: var(--text-2); padding: 1.6rem; font-size: .95rem; }
.top-card { display: flex; flex-direction: column; gap: .42rem; padding: 1.05rem 1.1rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); text-decoration: none; transition: transform .16s ease, border-color .16s, box-shadow .16s; }
.top-card:hover, .top-card:focus { transform: translateY(-3px); border-color: var(--primary); box-shadow: var(--shadow-md); }
.top-card__rank { align-self: flex-start; display: inline-flex; align-items: center; gap: .3rem; font-size: .7rem; font-weight: 800; color: #C67A0E; background: color-mix(in srgb, var(--warning) 20%, transparent); padding: .16rem .55rem; border-radius: 999px; }
[data-theme="dark"] .top-card__rank { color: var(--warning); }
.top-card__name { font-weight: 700; font-size: .96rem; color: var(--text); line-height: 1.32; }
.top-card__meta { font-size: .78rem; color: var(--text-2); display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.top-card__meta .svc-id { margin-right: 0; }
.top-prov { color: var(--primary-strong); font-weight: 700; }
.top-card__row { display: flex; align-items: center; gap: .8rem; margin-top: .1rem; font-size: .83rem; font-weight: 700; }
.top-star { color: #F2A93B; }
.top-ord { color: #C67A0E; }
[data-theme="dark"] .top-ord { color: var(--warning); }
.top-price { margin-top: .15rem; font-family: var(--font-mono); font-weight: 800; color: var(--success); font-size: 1rem; }
.top-price small { font-weight: 500; color: var(--text-2); }
/* showcase best-seller di ATAS tabel /services (reuse .top-grid/.top-card + tombol Order) */
.svc-top { margin: 0 0 1.2rem; }
.svc-top__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem .5rem; margin-bottom: .8rem; }
.svc-top__head > i { color: var(--warning); font-size: 1.05rem; align-self: center; }
.svc-top__head b { font-size: 1.05rem; font-weight: 800; }
.svc-top__head span { font-size: .85rem; color: var(--text-2); }
.svc-top-card { cursor: pointer; }
.svc-top-card__foot { margin-top: .1rem; padding-top: .5rem; border-top: 1px solid var(--border); }
.svc-top-card__foot .top-price { margin: 0; }
.psmm-row-hl > td { animation: psmmRowHl 2.2s ease; }
@keyframes psmmRowHl { 0%, 100% { background-color: transparent; } 12%, 55% { background-color: color-mix(in srgb, var(--primary) 15%, transparent); } }
/* /services — banner CTA WhatsApp (diskon API Users) + catatan layanan Provider */
.svc-wa-cta { display: flex; align-items: center; gap: .75rem; margin: 0 0 .9rem; padding: .7rem .95rem; border-radius: var(--radius-lg, 12px); text-decoration: none; background: color-mix(in srgb, #25D366 12%, var(--surface)); border: 1px solid color-mix(in srgb, #25D366 34%, transparent); color: var(--text); transition: border-color .15s ease, background .15s ease, transform .12s ease; }
.svc-wa-cta:hover, .svc-wa-cta:focus { border-color: #25D366; background: color-mix(in srgb, #25D366 18%, var(--surface)); text-decoration: none; color: var(--text); }
.svc-wa-cta:active { transform: translateY(1px); }
.svc-wa-cta__ic { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; box-shadow: 0 2px 6px rgba(37,211,102,.35); }
.svc-wa-cta__txt { flex: 1 1 auto; font-size: .9rem; line-height: 1.4; color: var(--text-2); }
.svc-wa-cta__txt b { color: var(--text); font-weight: 700; }
.svc-wa-cta__arr { flex: 0 0 auto; color: #25D366; font-size: .85rem; }
.svc-provnote { display: flex; align-items: flex-start; gap: .6rem; margin: 0 0 .9rem; padding: .7rem .9rem; border-radius: var(--radius-md, 10px); background: var(--primary-soft); border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border)); font-size: .875rem; line-height: 1.5; color: var(--text-2); }
.svc-provnote__ic { flex: 0 0 auto; color: var(--primary-strong); font-size: 1.02rem; margin-top: .1rem; }
.svc-provnote__txt b { color: var(--text); font-weight: 700; }
.svc-prov-tag { display: inline-block; padding: .04rem .34rem; border-radius: 5px; background: var(--primary); color: var(--primary-contrast) !important; font-size: .82em; line-height: 1.3; white-space: nowrap; }
@media (max-width: 480px) { .svc-wa-cta { padding: .6rem .7rem; gap: .55rem; } .svc-wa-cta__txt, .svc-provnote { font-size: .82rem; } }
/* /services — urut ulang kolom: baris filter+pencarian pindah ke bawah, tepat di atas tabel (visual via flex order; DOM & JS filter tetap) */
.services-page > .row > .col-lg-12 { display: flex; flex-direction: column; }
.services-page > .row > .col-lg-12 > .svc-wa-cta { order: 1; }
.services-page > .row > .col-lg-12 > #psmmSvcTop { order: 2; }
.services-page > .row > .col-lg-12 > .svc-provnote { order: 3; }
.services-page > .row > .col-lg-12 > .nav-pills { order: 4; margin-bottom: .85rem; }
.services-page > .row > .col-lg-12 > .well { order: 5; }
/* /services — blok teks SEO di paling bawah (target: smm panel indonesia, provider smm panel) */
.svc-seo { margin: 1.4rem 0 .3rem; padding: 1.1rem 1.2rem; border-radius: var(--radius-lg, 12px); background: var(--surface-2); border: 1px solid var(--border); }
.svc-seo__title { margin: 0 0 .55rem; font-size: 1.05rem; font-weight: 800; color: var(--text); line-height: 1.35; }
.svc-seo p { margin: 0; font-size: .875rem; line-height: 1.75; color: var(--text-2); }
.svc-seo strong { color: var(--text); font-weight: 700; }
@media (max-width: 480px) { .svc-seo { padding: .9rem 1rem; } .svc-seo__title { font-size: .98rem; } .svc-seo p { font-size: .84rem; } }
/* skeleton shimmer (tampil sebelum data best-seller masuk; JS timpa innerHTML saat siap) */
.top-grid[aria-busy="true"] .top-loading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.top-grid:not([aria-busy="true"]) .top-skel { display: none; }
.top-skel { height: 168px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: linear-gradient(100deg, var(--surface) 28%, var(--surface-2) 50%, var(--surface) 72%); background-size: 220% 100%; animation: topShimmer 1.25s ease-in-out infinite; }
@keyframes topShimmer { 0% { background-position: 220% 0; } 100% { background-position: -220% 0; } }
/* hero trust bar (metode bayar + garansi) */
.hero-trust { display: flex; align-items: center; gap: .38rem; flex-wrap: wrap; margin-top: 1rem; }
.hero-trust .ht-lbl { font-size: .78rem; color: var(--text-2); font-weight: 600; }
.hero-trust .ht-pay { font: 700 .72rem/1 var(--font-mono); color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .22rem .5rem; }
.hero-trust .ht-item { font-size: .78rem; font-weight: 700; color: var(--success); display: inline-flex; align-items: center; gap: .3rem; margin-left: .25rem; }
/* sticky CTA mobile (guest only; di-toggle .is-on oleh JS setelah scroll lewat hero) */
.psmm-mcta { display: none; }
@media (max-width: 720px) {
  .psmm-mcta { display: flex; align-items: center; gap: .7rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200; padding: .58rem .85rem calc(.58rem + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -6px 20px rgba(0,0,0,.16); transform: translateY(115%); transition: transform .28s ease; }
  .psmm-mcta.is-on { transform: none; }
  .psmm-mcta__txt { display: flex; flex-direction: column; line-height: 1.16; }
  .psmm-mcta__txt b { font-size: .92rem; color: var(--text); }
  .psmm-mcta__txt span { font-size: .72rem; color: var(--text-2); }
  .psmm-mcta .btn { margin-left: auto; white-space: nowrap; padding: .55rem 1rem; }
}
.monitor-panels { display: flex; flex-direction: column; gap: 1rem; }
.panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.4rem 1.5rem;
}
.panel h4 { font-size: 1.05rem; margin: 0 0 .8rem; }
.check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.check-list li { position: relative; padding-left: 1.7rem; color: var(--text-2); font-size: .93rem; }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: .15em; width: 18px; height: 18px; border-radius: 50%;
  background: var(--primary-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2300B4E4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* Panel Drop Rate Monitor jadi accordion (klik judul -> isi muncul; biar gak kebuka semua, lebih interaktif) */
.panel > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 1rem; font-size: 1.05rem; font-weight: 700; color: var(--text); }
.panel > summary::-webkit-details-marker { display: none; }
.panel > summary::after { content: "+"; margin-left: auto; font-size: 1.4rem; line-height: 1; color: var(--primary); font-weight: 400; transition: transform .2s; flex: none; }
.panel[open] > summary::after { transform: rotate(45deg); }
.panel[open] { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.panel > .panel-body { padding-top: 1rem; }

/* ============ STEPS ============ */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; counter-reset: step; }
.step { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.6rem; box-shadow: var(--shadow-sm); }
.step .n { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; background: var(--grad-primary); color: var(--primary-contrast); font: 800 1.1rem var(--font-mono); box-shadow: var(--glow); margin-bottom: 1rem; }
.step h3 { font-size: 1.02rem; margin: 0 0 .5rem; }
.step p { color: var(--text-2); font-size: .92rem; margin: 0; }

/* ============ REVIEWS ============ */
.review { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.6rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 1rem; }
.review .stars { font-size: 1.1rem; }
.review blockquote { margin: 0; color: var(--text); font-size: .98rem; line-height: 1.6; }
.review .who { display: flex; align-items: center; gap: .8rem; margin-top: auto; }
.review .ava { width: 42px; height: 42px; border-radius: 50%; background: var(--grad-primary); color: var(--primary-contrast); display: flex; align-items: center; justify-content: center; font-weight: 800; }
.review .who b { display: block; font-size: .92rem; }
.review .who span { color: var(--text-muted); font-size: .82rem; }

/* ============ FAQ (accordion native) ============ */
.faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: .7rem; }
.faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: border-color .2s; }
.faq-item[open] { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.faq-item summary { cursor: pointer; list-style: none; padding: 1.1rem 1.3rem; font-weight: 700; display: flex; align-items: center; gap: 1rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; margin-left: auto; font-size: 1.4rem; color: var(--primary); font-weight: 400; transition: transform .2s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .ans { padding: 0 1.3rem 1.2rem; color: var(--text-2); line-height: 1.65; }

/* ============ ABOUT + MEDIA ============ */
.about-text p { color: var(--text-2); font-size: 1.02rem; line-height: 1.7; max-width: 820px; margin: 0 auto 1rem; text-align: center; }
.media-logos { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: center; align-items: center; margin-top: 2.2rem; }
.media-logos img { height: 30px; width: auto; max-width: 150px; object-fit: contain; filter: grayscale(1); opacity: .65; transition: filter .2s, opacity .2s; }
.media-logos img:hover { filter: grayscale(0); opacity: 1; }
.media-logos a { display: inline-flex; align-items: center; }
/* logo media biasanya berwarna gelap -> di dark mode dibuat putih biar terbaca */
[data-theme="dark"] .media-logos img { filter: brightness(0) invert(1); opacity: .6; }
[data-theme="dark"] .media-logos img:hover { filter: brightness(0) invert(1); opacity: 1; }
.media-logos span { font-weight: 700; color: var(--text-muted); padding: .5rem 1rem; border: 1px dashed var(--border-2); border-radius: var(--radius); }

/* ============ CTA FINAL ============ */
.cta-final { position: relative; overflow: hidden; background: var(--grad-hero); border-radius: var(--radius-xl); padding: clamp(2.5rem,5vw,4rem) 1.5rem; text-align: center; box-shadow: var(--glow); }
.cta-final h2 { color: #fff; font-size: clamp(1.6rem,1rem+2.4vw,2.5rem); margin: 0 0 1rem; }
.cta-final p { color: rgba(255,255,255,.92); max-width: 640px; margin: 0 auto 1.8rem; font-size: 1.08rem; }

/* ============ FOOTER ============ */
.foot { background: var(--surface); border-top: 1px solid var(--border); padding: 3rem 0 1.5rem; margin-top: 0; }
.foot-brand { display: inline-block; }
.foot-logo { height: 40px; width: auto; max-width: 230px; border-radius: 10px; display: block; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; }
.foot h5 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin: 0 0 1rem; }
.foot a { display: block; color: var(--text-2); padding: .3rem 0; text-decoration: none; }
.foot a:hover, .foot a:focus { color: var(--primary); text-decoration: none; }
.foot .desc { color: var(--text-2); max-width: 420px; line-height: 1.6; font-size: .92rem; margin: .8rem 0 0; }
.foot-bottom { border-top: 1px solid var(--border); margin-top: 2rem; padding-top: 1.2rem; color: var(--text-muted); font-size: .85rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
/* Footer: pil "Komunitas WA" kedip-kedip (WhatsApp) di kolom Lainnya — kompak biar muat kolom (user 2026-07-13) */
.foot a.foot-wa-community { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .35rem; margin: .7rem 0 0; padding: .42rem .7rem; border-radius: var(--radius-pill); background: #25D366; color: #04240F; font-weight: 800; font-size: .82rem; line-height: 1.1; text-decoration: none; box-shadow: 0 0 0 0 rgba(37,211,102,.5); animation: footWaPulse 1.5s ease-in-out infinite; }
.foot a.foot-wa-community:hover, .foot a.foot-wa-community:focus { background: #20c05d; color: #04240F; text-decoration: none; }
.foot a.foot-wa-community > i { font-size: 1.05em; }
.foot-wa-community__dot { width: 7px; height: 7px; border-radius: 50%; background: #04240F; flex-shrink: 0; animation: psmm-menu-blink 1s ease-in-out infinite; }
.foot-wa-community__sub { font-weight: 800; font-size: .58rem; letter-spacing: .02em; text-transform: uppercase; background: rgba(255,255,255,.4); color: #04240F; padding: .1rem .38rem; border-radius: var(--radius-pill); }
@keyframes footWaPulse { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.5); } 70% { box-shadow: 0 0 0 11px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } }
/* Sidebar: item "Join WA Community" pakai desain tombol WA hijau kedip (sama kaya footer) */
.app-menu-item.psmm-wa-menu { background: #25D366; color: #04240F; flex-wrap: nowrap; white-space: nowrap; gap: .5rem; padding: .55rem .8rem; font-size: .88rem; box-shadow: 0 0 0 0 rgba(37,211,102,.5); animation: footWaPulse 1.6s ease-in-out infinite; }
.app-menu-item.psmm-wa-menu:hover, .app-menu-item.psmm-wa-menu:focus { background: #20c05d; color: #04240F; }
.app-menu-item.psmm-wa-menu .menu-svg { opacity: 1; width: 18px; height: 18px; }
.psmm-wa-menu__dot { width: 7px; height: 7px; border-radius: 50%; background: #04240F; flex-shrink: 0; animation: psmm-menu-blink 1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .foot a.foot-wa-community, .app-menu-item.psmm-wa-menu { animation: none; } .foot-wa-community__dot, .psmm-wa-menu__dot { animation: none; } }

/* ============ BRAND: LOGO MARK ============ */
.brand-mark { width: 34px; height: 34px; border-radius: 9px; display: block; box-shadow: var(--shadow-sm); }
[data-theme="dark"] .brand-mark { box-shadow: 0 0 0 1px var(--border-2), var(--glow); }
.navbar-brand, .foot .navbar-brand { font-weight: 800; letter-spacing: -.02em; color: var(--text) !important; }

/* ============ BRAND: PLATFORM ICONS ============ */
.platforms { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; }
.plat {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 11px;
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: 1.05rem; line-height: 1; transition: transform .16s, box-shadow .2s, border-color .2s;
}
.plat:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: currentColor; }
.plat i { display: block; }
/* warna brand tiap platform (chip bg menjaga keterbacaan di kedua mode) */
.plat.ig { color: #E1306C; } .plat.tt { color: var(--text); } .plat.yt { color: #FF0000; }
.plat.fb { color: #1877F2; } .plat.x { color: var(--text); } .plat.tg { color: #229ED9; }
.plat.th { color: var(--text); } .plat.sv { color: #F5B400; }
/* versi mono di hero */
.platforms.mono { gap: .35rem; }
.platforms.mono .plat { width: 34px; height: 34px; font-size: .92rem; background: transparent; border-color: transparent; color: var(--text-muted); }
.platforms.mono .plat:hover { color: var(--primary); transform: translateY(-2px); box-shadow: none; }
.platforms-label { font-size: .8rem; font-weight: 600; color: var(--text-muted); margin-right: .2rem; }
/* baris platform di dalam kartu "Terlengkap" */
.feature .platforms { margin-top: 1.1rem; }

/* ============ POLISH: SCROLL REVEAL ============ */
/* Hanya aktif jika JS hidup (html.reveal-on). Tanpa JS: konten tampil normal. */
.reveal-on .reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
.reveal-on .reveal.in { opacity: 1; transform: none; }
/* stagger antar kartu dalam satu grid */
.card-grid .reveal:nth-child(2) { --d: .08s; }
.card-grid .reveal:nth-child(3) { --d: .16s; }
.card-grid .reveal:nth-child(4) { --d: .24s; }
.card-grid .reveal:nth-child(5) { --d: .32s; }
.card-grid .reveal:nth-child(6) { --d: .40s; }
@media (prefers-reduced-motion: reduce) { .reveal-on .reveal { opacity: 1 !important; transform: none !important; } }

/* ============ POLISH: HERO BACKGROUND DEPTH ============ */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(40% 50% at 85% 12%, rgba(0,180,228,.10), transparent 70%),
    radial-gradient(45% 60% at 8% 92%, rgba(10,124,160,.08), transparent 70%);
}
[data-theme="dark"] .hero::after {
  background:
    radial-gradient(40% 50% at 85% 12%, rgba(0,180,228,.20), transparent 70%),
    radial-gradient(45% 60% at 8% 92%, rgba(10,124,160,.16), transparent 70%);
}

/* ============ POLISH: BUTTON SHINE ============ */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-18deg); transition: left .6s ease;
}
.btn-primary:hover::after { left: 140%; }

/* eyebrow halus berdenyut */
.eyebrow { transition: transform .2s; }

/* ============ KOMPAT BOOTSTRAP 3 (panel pakai BS3) ============ */
.navbar-default { background: color-mix(in srgb, var(--surface) 88%, transparent) !important; -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); border: none !important; border-bottom: 1px solid var(--border) !important; box-shadow: var(--shadow-sm); }
.navbar-default .navbar-nav > li > a { color: var(--text-2) !important; font-weight: 600; transition: color .2s, background-color .2s; border-radius: var(--radius-sm); }
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li.active > a { color: var(--primary) !important; background: var(--primary-soft) !important; }
.navbar-default .navbar-brand { color: var(--text) !important; display: flex; align-items: center; padding-top: 10px; padding-bottom: 10px; }
.navbar-default .navbar-brand img { max-height: 36px; width: auto; border-radius: 8px; }
.navbar-default .navbar-toggle { border-color: var(--border-2); }
.navbar-default .navbar-toggle .icon-bar { background: var(--text-2); }
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background: var(--surface-2); }
.navbar-default .dropdown-menu { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.navbar-default .dropdown-menu > li > a { color: var(--text-2); }
.navbar-default .dropdown-menu > li > a:hover { background: var(--primary-soft); color: var(--primary); }
.navbar-nav .badge { background: var(--primary-soft); color: var(--primary-strong); }
.well { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
/* tombol toggle tema di dalam navbar BS3 */
.psmm-toggle-li { display: flex; align-items: center; float: left; }
.navbar-default .psmm-theme-toggle { margin: 7px 0 7px 8px; }
.pull-right-middle { color: var(--text-muted); font-size: .9rem; }
/* util shim (BS3 tak punya kelas flex/gap/spacing baru) */
.d-flex { display: flex !important; }
.flex-wrap { flex-wrap: wrap !important; }
.align-items-center { align-items: center !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.gap-2 { gap: .5rem !important; }
.w-100 { width: 100% !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }

/* ============ HALAMAN AUTH (signup, dll standalone) ============ */
.auth-page { display: flex; justify-content: center; padding: clamp(2rem, 6vw, 4.5rem) 16px; min-height: 70vh; }
.auth-page .auth-card { width: 100%; max-width: 460px; }
.auth-card h2 { margin-bottom: .3rem; }
.auth-card .checkbox label { color: var(--text-2); font-size: .9rem; font-weight: 500; }
.auth-card .terms-accept-checkbox { margin-right: .45rem; }

/* ============ FIX DARK MODE: KOMPONEN PANEL ============ */
/* Kolom "Keterangan" = #service_description .panel-body (BS3) */
#service_description .panel-body,
.panel-body.border-rounded,
textarea, textarea.form-control,
.form-control[readonly], .form-control[disabled] {
  background-color: var(--surface-2) !important;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  border-color: var(--border) !important;
  border-radius: var(--radius) !important;
}
/* samakan ukuran teks Keterangan dengan field (lebih kecil/padat) */
#service_description .panel-body { font-size: .82rem; line-height: 1.6; padding: .95rem 1.1rem; }
#service_description .panel-body * {
  background-color: transparent !important;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  font-size: inherit !important;
}
#service_description .panel-body a { color: var(--link) !important; -webkit-text-fill-color: var(--link) !important; }

/* Dropdown Select2 (pilih Kategori/Layanan) — option default #333 jadi pudar di gelap */
.select2-dropdown { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow-lg); }
.select2-results__option, .select2-results__option a { color: var(--text) !important; }
.select2-results__option--highlighted, .select2-results__option[aria-selected="true"] { background: var(--primary-soft) !important; }
.select2-results__option--highlighted, .select2-results__option--highlighted a,
.select2-results__option[aria-selected="true"], .select2-results__option[aria-selected="true"] a { color: var(--text) !important; }
/* opsi terpilih: garis aksen kiri biar tetap kelihatan "aktif" tanpa cyan keras */
.select2-results__option[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--primary); }
.select2-search__field { background: var(--surface-2) !important; color: var(--text) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important; }
.select2-selection--single { background: var(--surface) !important; border: 1.5px solid var(--border) !important; border-radius: var(--radius) !important; color: var(--text); }
.select2-selection__rendered, .select2-selection__id { color: var(--text) !important; }
.select2-selection__placeholder { color: var(--text-muted) !important; }
.select2-selection--single .select2-selection__arrow b { border-top-color: var(--text-muted) !important; }

/* Native <select> (mis. "Metode" di Tambah dana) — teks kebaca + TIDAK kepotong */
select, select.form-control {
  color: var(--text) !important;
  background-color: var(--surface) !important;
  color-scheme: light dark;
  height: auto !important;        /* batalkan height 34px Bootstrap 3 yg bikin teks kepotong */
  min-height: 46px;
  padding-top: .55rem;
  padding-bottom: .55rem;
  line-height: 1.5;
}
[data-theme="dark"] select, [data-theme="dark"] select.form-control { color-scheme: dark; }
select option, select optgroup {
  background-color: var(--surface) !important;
  color: var(--text) !important;
}

/* Dropdown saldo (topbar) */
.balance-dropdown, .balance-dropdown__container { background: var(--surface) !important; border-color: var(--border) !important; }
.balance-dropdown__item, .balance-dropdown__link, .balance-dropdown__name { color: var(--text) !important; }
.balance-dropdown__item:hover, .balance-dropdown__link:hover { background: var(--primary-soft) !important; color: var(--primary) !important; }

/* ============ UKURAN FONT LANDING (mengikuti type scale) ============ */
.navbar-default .navbar-nav > li > a { font-size: var(--fs-sm); }
.hero-lead { font-size: var(--fs-lead); line-height: 1.75; }
.sec-lead { font-size: var(--fs-lead); line-height: 1.7; }
.feature h3 { font-size: var(--fs-h4); }
.feature p { font-size: 1.0625rem; line-height: 1.7; }        /* body landing ~18px */
.step h3 { font-size: var(--fs-h4); }
.step p { font-size: 1.0625rem; }
.panel h4 { font-size: var(--fs-h4); }
.panel p { font-size: 1.0625rem !important; }
.check-list li { font-size: 1.0625rem; }
.review blockquote { font-size: 1.0625rem; line-height: 1.7; }
.review .who span { font-size: var(--fs-sm); }
.faq-item summary { font-size: var(--fs-lead); }
.faq-item .ans { font-size: 1.0625rem; line-height: 1.72; }
.chip { font-size: var(--fs-sm); }
.about-text p { font-size: var(--fs-lead); }
.eyebrow { font-size: var(--fs-caption); }
/* dashboard: sedikit lebih besar dari sebelumnya tapi tetap padat */
.app-content { font-size: .95rem; }

/* ============ TABEL DATA (daftar Layanan, Pesanan, dll) — padat & proporsional ============ */
.table { font-size: .82rem; }                             /* ~14px (dipertahankan padat) */
.table thead th { font-size: .72rem; letter-spacing: .05em; padding: .7rem 1rem; }
.table td, .table th { vertical-align: top; padding: .8rem 1rem; }
.table td { line-height: 1.55; }
/* PENTING: framework panel set border tabel #dee2e6 (specificity sama, load belakangan -> menang).
   Paksa pakai token kita SUPAYA soften dark mode benar2 kepakai. Light dibiarkan (sudah pas). */
[data-theme="dark"] .table th, [data-theme="dark"] .table td,
[data-theme="dark"] .table > thead > tr > th, [data-theme="dark"] .table > thead > tr > td,
[data-theme="dark"] .table > tbody > tr > th, [data-theme="dark"] .table > tbody > tr > td,
[data-theme="dark"] .table > tfoot > tr > th, [data-theme="dark"] .table > tfoot > tr > td,
[data-theme="dark"] .table tbody + tbody { border-color: var(--border) !important; }
/* kolom Keterangan/deskripsi panjang: sedikit lebih kecil + warna sekunder biar enak dipindai */
.table td.description, .table td.note, .table td:last-child { font-size: .84rem; color: var(--text-2); line-height: 1.5; }
/* ID & angka biar rapi */
.table td:first-child { font-family: var(--font-mono); color: var(--text-muted); font-size: .82rem; }
/* baris judul kategori grup layanan */
.services-list-category-title, .services-list-category-title td, .services-category,
.services-list__category, tr.category-title, tr.category-title td {
  background: var(--surface-2) !important; color: var(--text) !important; font-weight: 800 !important; font-size: .95rem !important;
}
/* tombol filter & currency di atas tabel */
.services-filter__active-category { color: var(--text-2); }
/* kolom Layanan lebih lebar; kolom tombol Detail dibikin sempit (pas tombol) */
.width-service-name, td.service-name { min-width: 340px; }
.service-description__th, .service-description-cell { width: 1px; white-space: nowrap; }

/* ===== Services page: bar atas (flex + info), header kategori, search proporsional ===== */
.services-page .nav-pills { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; list-style: none; padding-left: 0; margin: 0 0 1rem; }
.services-page .nav-pills > li { float: none; margin: 0; }
.services-page .svc-bar-note { display: inline-flex; align-items: center; gap: .5rem; color: var(--text-2); font-size: var(--fs-sm); white-space: nowrap; }
.services-page .svc-bar-note i { color: var(--primary); }
.services-page .svc-bar-note b { color: var(--text); font-weight: 700; }
/* Lebar 300px dipatok di li (flex-basis), bukan di .input-group. Sebelumnya li dibiarkan
   menghitung lebarnya sendiri dan hasilnya cuma 250px, sementara .input-group di dalamnya
   tetap 300px -> tombol cari menonjol 50px keluar dari slotnya. Dulu tidak kelihatan karena
   container masih 1170px (jauh dari tepi layar); begitu container dilebarkan sampai tepi
   viewport, tonjolan itu jadi scrollbar horizontal di SELURUH halaman. */
.services-page .nav-pills > li.search { margin-left: auto; flex: 0 0 300px; }
.services-page .search .input-group { display: flex; width: 100%; max-width: none; }
.services-page .search .input-group .form-control { flex: 1; min-width: 0; border-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.services-page .search .input-group-btn { display: flex; width: auto; }
.services-page .search .input-group-btn .btn { display: inline-flex; align-items: center; border-radius: 0 var(--radius) var(--radius) 0; border: 1px solid var(--border); border-left: 0; background: var(--surface-2); color: var(--text-2); padding: 0 1rem; }
.services-page .search .input-group-btn .btn:hover { color: var(--primary-contrast); background: var(--primary); border-color: var(--primary); }
@media (max-width: 640px) { .services-page .nav-pills > li.search { margin-left: 0; width: 100%; } .services-page .search .input-group { width: 100%; max-width: none; } .services-page .svc-bar-note { display: none; } }
/* PC: tabel FULL-BLEED (tanpa padding kiri-kanan well) -> tepi tabel = tepi kartu = tepi bar filter.
   Jadi kotak Cari (di bar filter) PASTI sejajar tepi kanan tabel, apapun gutter/padding Bootstrap-nya.
   Napas konten dikasih lewat padding sel tepi tabel (bukan padding well). */
@media (min-width: 769px) {
  .services-page .well-float { padding-left: 0 !important; padding-right: 0 !important; }
  .services-page .nav-pills { padding-left: 0; padding-right: 0; }
  #service-table > thead > tr > th:first-child, #service-table > tbody > tr > td:first-child { padding-left: 1rem; }
  #service-table > thead > tr > th:last-child, #service-table > tbody > tr > td:last-child { padding-right: 1rem; }
  .services-page .svc-cat-row > td { padding-left: 1rem !important; }
}
/* dropdown FILTER kategori (ikon corong): scrollable + rapi + ada kotak Cari kategori di atasnya */
.services-page .dropdown-menu { max-height: 72vh; overflow-y: auto; }
.services-page .dropdown-menu[data-cat-search] { min-width: 300px; max-width: 380px; padding: 0 .3rem .3rem; }
.services-page .dropdown-menu[data-cat-search] > li > a.dropdown-item { display: flex; align-items: center; gap: .5rem; padding: .5rem .6rem; border-radius: var(--radius-sm); white-space: normal; line-height: 1.35; }
.svc-catsearch { position: sticky; top: 0; background: var(--surface); padding: .45rem .3rem; margin: 0 0 .2rem; border-bottom: 1px solid var(--border); z-index: 2; list-style: none; }
.svc-catsearch__input { width: 100%; height: 38px; padding: 0 .75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); font-size: var(--fs-sm); }
.svc-catsearch__input:focus { outline: none; border-color: var(--primary); background: var(--surface); }
.svc-catsearch-none { padding: .7rem .6rem; color: var(--text-muted); font-size: var(--fs-sm); font-style: italic; list-style: none; }
/* header kategori: bar pembeda + accent biru + badge jumlah layanan */
.svc-cat-row td { background: var(--surface-2) !important; border-top: 1px solid var(--border); box-shadow: inset 3px 0 0 var(--primary); padding: .65rem .9rem !important; }
.svc-cat-row strong { font-size: var(--fs-lead); color: var(--text); vertical-align: middle; }
.svc-cat-count { display: inline-block; margin-left: .55rem; font-size: var(--fs-caption); font-weight: 700; color: var(--primary); background: var(--primary-soft); padding: .08rem .55rem; border-radius: var(--radius-pill); vertical-align: middle; }
[data-theme="light"] .svc-cat-row td { background: color-mix(in srgb, var(--primary) 7%, #fff) !important; }
[data-theme="light"] .svc-cat-count { color: var(--primary-strong); }

/* ===== Orders page: tab status (flex pill) + tabel anti-overflow (scroll DALAM card) ===== */
.psmm-filterbar { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; list-style: none; padding-left: 0; margin: 0 0 1rem; }
.psmm-filterbar > li { float: none; margin: 0; }
.psmm-filterbar > li > a { display: block; padding: .5rem .95rem; border-radius: var(--radius-pill); border: 1px solid var(--border); color: var(--text-2); font-weight: 600; font-size: var(--fs-sm); text-decoration: none; transition: border-color .15s, color .15s, background .15s; }
.psmm-filterbar > li > a:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.psmm-filterbar > li.active > a { background: var(--primary); border-color: var(--primary); color: var(--primary-contrast); box-shadow: var(--glow); }
.psmm-filterbar > li.search { margin-left: auto; }
.psmm-filterbar > li.search .input-group { width: 240px; max-width: 46vw; }
/* kunci utama "keluar frame": tabel lebar -> scroll horizontal di dalam card, bukan jebol layout */
.well-float { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.orders-page .table { min-width: 880px; }
.orders-page td.width-40, .orders-page th.width-40 { max-width: 300px; min-width: 190px; word-break: break-word; white-space: normal; }
@media (max-width: 600px) { .psmm-filterbar > li.search { margin-left: 0; flex: 1 1 auto; width: auto; min-width: 0; } .psmm-filterbar > li.search .input-group { width: 100%; max-width: none; } }   /* search SEBARIS di samping dropdown filter (hemat space), bukan turun ke baris bawah */

/* ===== Mobile bottom tab bar (tampil <=992px, samain dgn chrome mobile lain) ===== */
.mobile-tabbar { display: none; }
/* hilangkan garis outline + flash tap + GARIS BAWAH (underline) saat menu bawah di-tap (semua item, termasuk tombol +).
   Underline-nya dari Bootstrap `a:hover{text-decoration:underline}` (spesifisitas ngalahin .mtab) -> override pakai !important. */
.mobile-tabbar .mtab, .mobile-tabbar .mtab:hover, .mobile-tabbar .mtab:focus, .mobile-tabbar .mtab:active, .mobile-tabbar .mtab:focus-visible,
.mobile-tabbar .mtab:link, .mobile-tabbar .mtab:visited { outline: 0 !important; -webkit-tap-highlight-color: transparent; box-shadow: none; text-decoration: none !important; }
/* tap feedback halus: pencet -> mengecil dikit + warna primary (smooth), bukan underline kaku */
.mobile-tabbar .mtab { transition: color .18s ease, transform .12s ease; }
.mobile-tabbar .mtab:active { transform: scale(.92); color: var(--primary); }
.mobile-tabbar .mtab__ic, .mobile-tabbar .menu-svg { transition: transform .12s ease; }
.mobile-tabbar .mtab--center:focus .mtab__ic, .mobile-tabbar .mtab--center:active .mtab__ic { box-shadow: 0 7px 18px color-mix(in srgb, var(--primary) 50%, transparent); }
/* tabel data lebar: scroll horizontal di dalam frame (dipakai semua halaman: orders/affiliates/api/dll) */
.psmm-tscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.psmm-tscroll > table { margin-bottom: 0; }
/* tabel mode-kartu (services/updates/generic) di HP: jangan di-scroll/clip -> biar simetris kiri-kanan */
@media (max-width: 768px) { .psmm-tscroll--card { overflow-x: visible; } }
/* ===== Tabel data -> kartu "label : nilai" di HP (≤768px). Tiap baris jadi 1 kartu, ga perlu scroll samping ===== */
@media (max-width: 768px) {
  table.psmm-cardtable { width: 100%; border: 0; }
  .psmm-cardtable thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }   /* sembunyikan header (a11y-safe) */
  .psmm-cardtable tbody, .psmm-cardtable tr, .psmm-cardtable td { display: block; width: auto; }
  .psmm-cardtable tr { margin: 0 0 .7rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; }
  .psmm-cardtable tr:last-child { margin-bottom: 0; }
  .psmm-cardtable td { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .5rem .85rem; border: 0; border-bottom: 1px solid var(--border); text-align: right; white-space: normal; word-break: break-word; min-width: 0; }
  .psmm-cardtable td:last-child { border-bottom: 0; }
  .psmm-cardtable td::before { content: attr(data-label); font-weight: 700; color: var(--text-2); text-align: left; flex: 0 0 38%; white-space: nowrap; }
  .psmm-cardtable td:not([data-label])::before, .psmm-cardtable td[data-label=""]::before { content: ""; }
  .psmm-cardtable td:empty { display: none; }   /* sel kosong (mis. kolom aksi) disembunyikan */
  .psmm-cardtable td.link, .psmm-cardtable td a { word-break: break-all; }
}

/* ===== Katalog layanan (#service-table) ===== */
#service-table { width: 100%; }   /* isi penuh lebar kartu -> kolom "Cari" ga "melebihi" tabel lagi */
/* tombol "Pesan" -> pill biru. Tampil di PC (di bawah Detail) & mobile (kartu). */
.svc-order { display: inline-flex; align-items: center; gap: .3rem; background: linear-gradient(135deg, #FFD24A, #FF9D00); color: #3d2a00; border-radius: var(--radius-pill); padding: .28rem .8rem; font-weight: 800; font-size: var(--fs-sm); text-decoration: none; white-space: nowrap; transition: filter .15s, box-shadow .15s; }
.svc-order:hover, .svc-order:focus { filter: brightness(1.06); color: #3d2a00; box-shadow: 0 3px 10px color-mix(in srgb, #FF9D00 45%, transparent); }
@media (min-width: 769px) {
  /* PC: kolom KETERANGAN -> Detail di atas, Pesan di bawah (ditumpuk). display:flex+fit-content biar tiap
     tombol 1 baris sendiri & tetap selebar isinya, tanpa ngerusak layout sel tabel. */
  #service-table td.service-description-cell { white-space: normal; vertical-align: middle; padding-right: .5rem; }
  #service-table td.service-description-cell > .btn-desc,
  #service-table td.service-description-cell > .svc-order {
    display: flex; align-items: center; justify-content: center; gap: .25rem;
    min-width: 84px; width: -moz-fit-content; width: fit-content; padding: .3rem .55rem; font-size: .8em;   /* lebih kecil & seragam -> ga sumpek / kepotong */
  }
  #service-table td.service-description-cell > .btn-desc { margin: 0 0 .35rem; }
}
@media (max-width: 768px) {
  #service-table { width: 100%; border: 0; }
  #service-table thead { display: none; }
  #service-table, #service-table > tbody, #service-table > tbody > tr { display: block; width: auto; }
  /* header kategori = banner pemisah */
  #service-table > tbody > tr.svc-cat-row { margin: .5rem 0 .55rem; }
  #service-table > tbody > tr.svc-cat-row > td { display: block; padding: .45rem .7rem; }
  /* tiap layanan = kartu */
  #service-table > tbody > tr:not(.svc-cat-row) {
    display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem;
    border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface);
    box-shadow: var(--shadow-sm); margin: 0 0 .6rem; padding: .65rem .8rem; cursor: pointer;
  }
  #service-table > tbody > tr:not(.svc-cat-row) > td { display: block; border: 0 !important; padding: 0; min-width: 0; overflow-wrap: anywhere; }
  #service-table > tbody > tr:not(.svc-cat-row) { max-width: 100%; }
  #service-table td[data-filter-table-service-id] { order: 2; flex: 0 0 auto; font-family: var(--font-mono); font-weight: 700; color: var(--primary); font-size: var(--fs-sm); }
  #service-table td[data-filter-table-service-id]::before { content: "#"; opacity: .55; }
  #service-table td.service-name { order: 3; flex: 1 1 100%; font-weight: 600; line-height: 1.45; }
  #service-table td.svc-c { order: 4; flex: 0 0 auto; font-size: var(--fs-caption); background: var(--surface-2); border-radius: var(--radius-pill); padding: .18rem .58rem; white-space: nowrap; }
  #service-table td.svc-c::before { content: attr(data-l) " "; color: var(--text-muted); font-weight: 600; }
  #service-table td.svc-c--rate { color: var(--primary); font-weight: 700; }
  #service-table td.svc-c--hide { display: none !important; }   /* "Waktu rata-rata" disembunyikan di HP */
  #service-table td.service-description-cell { order: 5; flex: 1 1 100%; display: flex; align-items: center; gap: .5rem; margin-top: .2rem; }
  .svc-order { display: inline-flex; align-items: center; gap: .3rem; margin-left: auto; background: linear-gradient(135deg, #FFD24A, #FF9D00); color: #3d2a00; border-radius: var(--radius-pill); padding: .42rem .95rem; font-weight: 800; font-size: var(--fs-sm); text-decoration: none; white-space: nowrap; }
  .svc-order:hover, .svc-order:focus { filter: brightness(1.06); color: #3d2a00; }
}

/* Harga normal dicoret saat user dapat diskon/special price (tabel services + form order) */
.svc-rate-old { font-size: .8em; color: var(--text-muted); text-decoration: line-through; opacity: .85; font-weight: 500; margin-right: .35em; }
.svc-rate-now { color: var(--primary); font-weight: 700; }
@media (min-width: 769px) { .svc-c--rate .svc-rate-old, .svc-c--rate .svc-rate-now { display: block; margin-right: 0; line-height: 1.25; } }   /* PC AJA: tumpuk (normal dicoret di atas, harga diskon di bawah) biar "Rp" ga kepotong. Mobile tetap inline (sesuai permintaan). */
.charge-disc { margin-top: .55rem; font-size: .87rem; color: var(--text-2); display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .4rem; line-height: 1.5; }
.charge-disc s { color: var(--text-muted); }
.charge-disc b { color: var(--text); font-weight: 700; }
.charge-disc__pct { padding: .08rem .44rem; border-radius: var(--radius-pill); background: var(--gold-soft); color: var(--gold-ink); border: 1px solid var(--gold-border); font-weight: 800; font-size: .9em; }

/* harga lama (sebelum perubahan) dicoret — berlaku di HP & PC */
.upd-old { text-decoration: line-through; color: var(--text-muted); opacity: .85; }
/* ===== Halaman Pembaruan (/news) -> kartu ringkas di HP: nama (judul) + perubahan + tanggal, tanpa label ===== */
@media (max-width: 768px) {
  .psmm-updcard, .psmm-updcard > tbody, .psmm-updcard > tbody > tr, .psmm-updcard > tbody > tr > td { display: block; width: auto; }
  .psmm-updcard thead { display: none; }
  .psmm-updcard > tbody > tr { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); margin: 0 0 .6rem; padding: .7rem .85rem; }
  .psmm-updcard > tbody > tr > td { border: 0 !important; padding: 0; }
  .psmm-updcard td.upd-hide { display: none !important; }
  .psmm-updcard td.upd-name { font-weight: 600; line-height: 1.42; margin-bottom: .3rem; }
  /* tanggal + keterangan (naik/turun/baru) jadi 1 baris, ukuran font disamain */
  .psmm-updcard td.upd-date { display: inline; font-size: var(--fs-caption); color: var(--text-muted); font-family: var(--font-mono); }
  .psmm-updcard td.upd-date::after { content: "  ·  "; color: var(--text-muted); }
  .psmm-updcard td.upd-chg { display: inline; font-size: var(--fs-caption); }
}

/* ===== Halaman Orders/Drip-feed -> kartu order ringkas di HP ===== */
@media (max-width: 768px) {
  table.psmm-ordcard { width: 100%; min-width: 0 !important; border: 0; }   /* batalkan min-width:880px desktop yg bikin kartu jebol */
  .psmm-ordcard thead { display: none; }
  .psmm-ordcard, .psmm-ordcard > tbody, .psmm-ordcard > tbody > tr { display: block; }
  .psmm-ordcard > tbody > tr { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); margin: 0 0 .6rem; padding: .65rem .8rem; }
  .psmm-ordcard > tbody > tr > td { display: block; border: 0 !important; padding: 0; min-width: 0 !important; max-width: 100% !important; overflow-wrap: anywhere; }
  .psmm-ordcard td:empty { display: none; }
  .psmm-ordcard td.ord-hide { display: none !important; }
  .psmm-ordcard td.ord-id { order: 1; font-family: var(--font-mono); font-weight: 700; color: var(--primary); }
  .psmm-ordcard td.ord-id::before { content: "#"; opacity: .55; }
  .psmm-ordcard td.ord-date { order: 2; flex: 0 0 auto; font-size: var(--fs-caption); color: var(--text-muted); font-family: var(--font-mono); }
  .psmm-ordcard td.ord-status { order: 3; margin-left: auto; white-space: nowrap; background: none; padding: 0; }
  .psmm-ordcard td.ord-link { order: 4; flex: 1 1 100% !important; display: block !important; width: auto !important; max-width: 100% !important; font-size: var(--fs-sm); word-break: break-all; }
  .psmm-ordcard td.ord-svc { order: 5; flex: 1 1 100%; font-weight: 600; line-height: 1.4; white-space: normal !important; overflow-wrap: anywhere; }
  .psmm-ordcard td.ord-svc .svc-id { font-family: var(--font-mono); background: var(--surface-2); border-radius: var(--radius-pill); padding: 0 .4rem; margin-right: .3rem; font-size: .85em; }
  .psmm-ordcard td.ord-m { order: 6; flex: 0 0 auto; font-size: var(--fs-caption); background: var(--surface-2); border-radius: var(--radius-pill); padding: .16rem .55rem; white-space: nowrap; }
  .psmm-ordcard td.ord-m::before { content: attr(data-l) " "; color: var(--text-muted); font-weight: 600; }
  .psmm-ordcard td.ord-act { order: 7; flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .2rem; }
}
/* pill status order berwarna — berlaku di HP (kartu) & PC (tabel) */
.ord-st-pill { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; font-size: .82em; padding: .14rem .6rem; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text-2); white-space: nowrap; line-height: 1.4; }
.ord-st-pill.ord-st--ok   { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
.ord-st-pill.ord-st--run  { background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary); }
.ord-st-pill.ord-st--wait { background: color-mix(in srgb, #f5b400 22%, transparent); color: #b07d00; }
.ord-st-pill.ord-st--warn { background: color-mix(in srgb, var(--warning) 20%, transparent); color: var(--warning); }
.ord-st-pill.ord-st--bad  { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
[data-theme="dark"] .ord-st-pill.ord-st--wait { color: #f5c542; }
/* tombol aksi order (Isi ulang / Batalkan / Download report) -> seukuran pill status, ga kegedean (HP + PC) */
.order-actions .btn, .psmm-ordcard td.ord-act .btn {
  font-size: .82em; font-weight: 700; line-height: 1.4;
  padding: .16rem .7rem; border-radius: var(--radius-pill);
  min-height: 0; height: auto;
}
.order-actions .btn i, .psmm-ordcard td.ord-act .btn i { font-size: .9em; }

/* ===== Riwayat Deposit -> kartu ringkas (langsung info, tanpa label) ===== */
@media (max-width: 768px) {
  table.psmm-depcard { width: 100%; border: 0; }
  .psmm-depcard thead { display: none; }
  .psmm-depcard, .psmm-depcard > tbody, .psmm-depcard > tbody > tr { display: block; }
  .psmm-depcard > tbody > tr { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); margin: 0 0 .6rem; padding: .65rem .8rem; }
  .psmm-depcard > tbody > tr > td { display: block; border: 0 !important; padding: 0; min-width: 0; overflow-wrap: anywhere; }
  .psmm-depcard td:empty { display: none; }
  .psmm-depcard td.dep-hide { display: none !important; }
  .psmm-depcard td.dep-id { order: 1; font-family: var(--font-mono); font-weight: 700; color: var(--primary); }
  .psmm-depcard td.dep-date { order: 2; margin-left: auto; font-size: var(--fs-caption); color: var(--text-muted); font-family: var(--font-mono); }
  .psmm-depcard td.dep-method { order: 3; flex: 1 1 100%; font-size: var(--fs-sm); color: var(--text-2); }
  .psmm-depcard td.dep-amount { order: 4; flex: 0 1 auto; font-weight: 700; font-size: var(--fs-lead); }
  .psmm-depcard td.dep-act { order: 5; flex: 0 0 auto; margin-left: auto; }   /* sebaris dgn nominal, pojok kanan */
}
/* pill "Unduh faktur" (HP + PC) biar jelas bisa diklik */
.dep-invoice { display: inline-flex; align-items: center; gap: .25rem; font-size: .8em; font-weight: 700; line-height: 1; color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); border-radius: var(--radius-pill); padding: .3rem .55rem; text-decoration: none; }   /* seragam dgn pill Detail/Pesan di services */
.dep-invoice i { font-size: .9em; }
.dep-invoice:hover, .dep-invoice:focus { background: color-mix(in srgb, var(--primary) 20%, transparent); color: var(--primary); }

/* ===== Riwayat Refund -> kartu ringkas di HP ===== */
table.psmm-refcard { min-width: 0 !important; }
@media (max-width: 768px) {
  table.psmm-refcard { width: 100%; border: 0; }
  .psmm-refcard thead { display: none; }
  .psmm-refcard, .psmm-refcard > tbody, .psmm-refcard > tbody > tr { display: block; }
  .psmm-refcard > tbody > tr { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); margin: 0 0 .6rem; padding: .65rem .8rem; }
  .psmm-refcard > tbody > tr > td { display: block; border: 0 !important; padding: 0; min-width: 0; max-width: 100%; }
  .psmm-refcard td:empty { display: none; }
  .psmm-refcard td.ref-id { order: 1; font-family: var(--font-mono); font-weight: 700; }
  .psmm-refcard td.ref-id::before { content: "#"; opacity: .55; }
  .psmm-refcard td.ref-id a { color: var(--primary); text-decoration: none; }
  .psmm-refcard td.ref-status { order: 2; margin-left: auto; }
  .psmm-refcard td.ref-amount { order: 3; flex: 1 1 100%; font-weight: 700; font-size: var(--fs-lead); color: var(--success); }
  .psmm-refcard td.ref-date { order: 4; flex: 1 1 100%; font-size: var(--fs-caption); color: var(--text-muted); font-family: var(--font-mono); }
}
/* ===== Halaman API: tabel & konten muat di layar mobile (jangan jebol) ===== */
@media (max-width: 768px) {
  .well.api { padding-left: 8px !important; padding-right: 8px !important; min-width: 0 !important; max-width: 100% !important; }
  .api .center-big-content-block { max-width: 100% !important; min-width: 0 !important; width: auto !important; overflow-x: hidden; }
  .api table { min-width: 0 !important; max-width: 100% !important; }
  .api table:not(.psmm-cardtable) { width: 100% !important; table-layout: fixed; }
  .api table:not(.psmm-cardtable) td, .api table:not(.psmm-cardtable) th { white-space: normal !important; word-break: break-word; overflow-wrap: anywhere; }
  .api .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 992px) {
  .mobile-tabbar { display: flex; align-items: flex-end; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1090; background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -4px 18px rgba(0,0,0,.14); padding: .3rem .2rem calc(.3rem + env(safe-area-inset-bottom)); }
  .mtab { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; padding: .35rem .1rem; background: none; border: 0; color: var(--text-2); text-decoration: none; font-size: 10px; font-weight: 600; line-height: 1; cursor: pointer; }
  .mtab .menu-svg { width: 22px; height: 22px; opacity: .75; }
  .mtab.is-active { color: var(--primary); }
  .mtab.is-active .menu-svg { opacity: 1; }
  .mtab__lbl { white-space: nowrap; }
  /* Order = tombol ➕ FAB tengah yang menonjol (tanpa label) */
  .mtab--center { flex: 0 0 auto; justify-content: center; }
  .mtab--center .mtab__ic { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; margin: -26px 6px 0; border-radius: 50%; background: var(--primary); color: #fff; box-shadow: 0 7px 18px color-mix(in srgb, var(--primary) 50%, transparent); border: 4px solid var(--surface); }
  .mtab--center .menu-svg { opacity: 1; width: 26px; height: 26px; }
  body { padding-bottom: 74px !important; }
  /* guard overflow horizontal di .app-main DAN .app-content. clip = ga bikin scroll-container -> dokumen tetap scroll & sticky topbar TETAP nempel (diverifikasi live: topbar top=0 pas scroll).
     BUGFIX AKAR "scroll mental ke ATAS" (user 2026-07-14, dibuktikan diagnostik on-device): pas LOAD, kartu stat topbar (.topbar-stats) sempet TAMPIL sebelum topbar-fit sembunyiin -> topbar jadi lebih lebar dari layar -> HORIZONTAL OVERFLOW -> Chrome HP "shrink-to-fit" (zoom out ke ~1284px, render layout DESKTOP, docH ~2394) -> pas topbar-fit sembunyiin kartu, overflow ilang -> zoom balik ke mobile (394px) -> docH ambruk (2394->1018) -> browser nge-RESET scroll ke atas. Dulu clip cuma di .app-content (BUKAN ancestor topbar), jadi topbar bebas overflow. Sekarang .app-main (ancestor topbar) ikut clip -> ga ada overflow -> ga ada shrink-to-fit -> ga ada flip -> scroll aman. (BUKAN scroll anchoring / restoration / script kita — semua udah dibuktikan lewat.) */
  .app-main { overflow-x: clip; }
  .app-content { overflow-x: clip; }
  .app-main, .app-content, .app-content .container, .app-content .container-fluid, .app-content .row { max-width: 100%; }
  .app-content .row { margin-left: 0; margin-right: 0; }   /* hindari overflow 15px dari negative-margin Bootstrap */
  /* TG/WA takeover -> aturan global (di luar media query) biar tampil di PC & mobile, di KANAN atas Crisp. Lihat blok #psmmFloatbar di bawah. */
  /* saldo mini dipindah ke rule top-level + ditampilin via @container (biar ga dobel sama kartu Sisa Saldo di lebar sedang) */
  /* COMPACT: rapatkan padding samping biar konten mepet ke layar (preferensi user: padat, tanpa space kosong) */
  .app-content { padding-left: 6px !important; padding-right: 6px !important; }
  .app-content .container, .app-content .container-fluid { padding-left: 0 !important; padding-right: 0 !important; width: 100%; }
  .app-content .row { margin-left: 0 !important; margin-right: 0 !important; }
  .app-content .row > [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; }
  .app-content .well, .app-content .well-float { padding-left: 6px !important; padding-right: 6px !important; }
  /* tabel PerfectPanel yg sudah dibungkus .table-responsive juga dipaksa scroll, bukan jebol frame */
  .app-content .table-responsive { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .app-content pre { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }   /* blok kode (mis. contoh respons API) ikut scroll, jangan jebol frame */
}
/* badge "Rekomendasi" (layanan Provider) di services & insight */
.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; }
/* badge "Baru" (layanan aktif < 7 hari, dari feed updates) — beda warna dari Rekomendasi */
.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); }
.svc-opt-metrics .opt-new { color: var(--primary); font-weight: 700; }
.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); }

/* baris metrik monitoring (disuntik JS) di bawah nama layanan — services.twig */
.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; }

/* ===== Kolom Kecepatan & Drop (#service-table) =====
   DESKTOP: kolom sendiri di sebelah "Waktu rata-rata" (layar lebar, muat).
   MOBILE : layout kartu yang lama DIPERTAHANKAN -> kolom disembunyikan, info tetap
            tampil sebagai chip di dalam kolom layanan seperti sebelumnya.
   Keduanya dirender bersamaan oleh JS; yang memilih mana yang tampil murni CSS,
   jadi tidak ada logika breakpoint di JS dan rotasi layar tetap benar. */
.svc-cell-speed, .svc-cell-drop { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-caption); }
.svc-cell-speed { color: var(--text-2); }
.svc-cell-speed small { font-weight: 500; opacity: .7; }
.svc-cell-speed i, .svc-cell-drop i { font-size: .85em; }
.svc-cell-empty { color: var(--text-muted); opacity: .6; }

@media (min-width: 769px) {
  /* chip kecepatan & drop di kolom layanan -> pindah ke kolomnya sendiri */
  #service-table .svc-metrics .svc-m-speed,
  #service-table .svc-metrics .svc-m-drop { display: none; }
  /* kalau chip yang tersisa HANYA kecepatan/drop, wadahnya ikut hilang supaya
     tidak menyisakan margin-top kosong di bawah nama layanan */
  #service-table .svc-metrics:not(:has(> :not(.svc-m-speed):not(.svc-m-drop))) { display: none; }
}

@media (max-width: 768px) {
  #service-table td.svc-speed-cell,
  #service-table td.svc-drop-cell { display: none !important; }
}

/* Ikon "i" di header tabel -> tooltip bawaan browser (atribut title, tanpa data-toggle).
   cursor:help supaya jelas bisa di-hover. */
.svc-th-info { cursor: help; opacity: .55; font-size: .9em; }
.svc-th-info:hover { opacity: 1; color: var(--primary); }

/* PerfectPanel menandai kolom dengan class .nowrap, tapi tema ini tidak pernah
   mendefinisikannya (Bootstrap 3 memakai .text-nowrap), jadi selama ini class itu tidak
   berefek — nilai seperti "20 000" (pemisah ribuan berupa spasi) patah jadi dua baris.
   Sengaja HANYA td: header dibiarkan boleh membungkus karena judul dua baris justru
   memakan lebih sedikit lebar horizontal. */
#service-table td.nowrap { white-space: nowrap; }

/* ===== Insight monitoring di dalam modal "Detail" (/services) =====
   Isinya markup si-* yang sama dengan panel /neworder — 124 dari 125 selector si-*
   bersifat global sehingga langsung tergaya di sini tanpa CSS tambahan. Yang perlu
   diatur cuma pemisah dari blok keterangan penjual di bawahnya. */
.desc-insight { margin: 0 0 1rem; }
.desc-insight + .desc-text { border-top: 1px solid var(--border); padding-top: 1rem; }
.desc-insight__load { display: flex; align-items: center; gap: .5rem; padding: .9rem 0; color: var(--text-muted); font-size: var(--fs-sm); }
/* di modal, panel insight tidak pernah dalam mode kolaps -> pastikan blok apa pun tampil */
.desc-insight .si-detail { display: block !important; }

/* --- PC: dua kolom, keterangan KIRI + insight KANAN ---
   Grid hanya aktif kalau KEDUANYA ada (:has). Kalau layanan tanpa keterangan, atau insight
   gagal dimuat lalu dilepas, otomatis balik satu kolom penuh tanpa menyisakan kolom kosong.
   Placeholder .desc-insight__load sudah ada sejak klik, jadi lebar modal tidak melompat
   saat data monitoring selesai dimuat.
   Urutan MOBILE sengaja dibiarkan insight dulu baru keterangan: keterangan penjual bisa
   sangat panjang dan akan mengubur data yang justru jadi alasan modal ini dibuka. */
@media (min-width: 992px) {
  .desc-modal__box:has(.desc-text):has(.desc-insight) { max-width: 1060px; }
  .desc-modal__body:has(> .desc-text):has(> .desc-insight) {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 430px);
    gap: 1.6rem; align-items: start;
  }
  .desc-modal__body > .desc-text { order: 1; border-top: 0; padding-top: 0; }
  .desc-modal__body > .desc-insight { order: 2; margin: 0; border-left: 1px solid var(--border); padding-left: 1.6rem; }
}

/* Katalog layanan punya 9-10 kolom, jauh lebih banyak dari halaman lain, sehingga
   --container-max (1200px) memaksa geser horizontal di layar lebar. Hanya container
   .services-page yang dilebarkan; blok teks SEO di bawahnya memakai .container biasa
   sehingga baris teksnya tetap pendek dan nyaman dibaca.

   PENTING — kenapa `width`, bukan cuma `max-width`: Bootstrap 3 memberi .container
   `width: 1170px` (bukan max-width). Nilai max-width yang lebih besar TIDAK pernah
   melebarkan elemen yang lebarnya sudah dipatok, jadi aturan lama tidak berefek sama
   sekali — container tetap 1170px di layar selebar apa pun. `width: auto` membuatnya
   mengikuti lebar induk, lalu max-width yang membatasi di layar sangat lebar.
   `width: auto` (bukan 100vw) juga menghindari lebar 100vw yang sudah termasuk scrollbar. */
@media (min-width: 992px) {
  .container.services-page { width: auto; max-width: 1800px; padding-left: 1rem; padding-right: 1rem; }
  /* min-width 340px pada kolom nama menaikkan lebar minimum tabel jadi ~1180px sehingga di
     layar 1200-1280px tetap harus digeser. 250px cukup untuk 2 baris nama dan menurunkan
     lebar minimum ke ~1090px; ini cuma MINIMUM — di layar lebar kolom nama tetap kebagian
     sisa ruang paling banyak karena isinya yang paling panjang. */
  #service-table .width-service-name,
  #service-table td.service-name { min-width: 250px; }
}

/* ===== Header tabel menempel (sticky) saat digulir =====
   Syaratnya tabel TIDAK boleh berada di dalam elemen ber-overflow: kalau ada, sticky
   mengacu ke kotak scroll itu (yang tidak pernah menggulir vertikal) sehingga header
   diam saja. Ada DUA pembungkus seperti itu: .well-float (dari tema) dan .psmm-tscroll
   (disuntik JS untuk semua tabel di area login). Keduanya dimatikan di sini — TAPI hanya
   kalau tabelnya memang sudah muat, karena tanpa pembungkus itu tabel yang kelebaran akan
   menjebol kartu dan berubah jadi scrollbar horizontal SEHALAMAN (lebih buruk).

   Kenapa @container, bukan @media: lebar yang menentukan muat/tidak BUKAN lebar layar.
   Setelah login ada sidebar 260px yang bisa di-collapse, jadi di layar 1280px area konten
   bisa 1220px ATAU 960px tergantung state sidebar — ambang berbasis lebar layar pasti salah
   di salah satu keadaan. Container query mengukur .row (induk kartu) secara langsung.
   Browser tanpa dukungan container query tidak pernah mencocokkan blok ini, jadi perilakunya
   kembali ke geser-di-dalam-kartu seperti sebelumnya — turun kelas dengan aman.

   Ambang 1180px = lebar minimum tabel (~1090px dgn kolom nama 250px, ~1140px pada data
   terpanjang yang pernah diukur) + ruang aman. .row sekitar 32px lebih lebar dari area
   tabel karena margin negatif Bootstrap dan padding container. */
@media (min-width: 992px) {
  .services-page .row { container-type: inline-size; container-name: svccat; }
}
@container svccat (min-width: 1180px) {
  .services-page .well-float,
  .services-page .psmm-tscroll { overflow: visible; }
  #service-table > thead > tr > th {
    position: sticky; top: var(--svc-th-top, 0px); z-index: 4;
    background: var(--surface-2);
    /* border-bottom ikut hilang saat sel menempel (border tabel milik <table>, bukan sel),
       jadi garis pemisahnya digambar ulang sebagai inset shadow. */
    box-shadow: inset 0 -1px 0 var(--border);
  }
}
/* setelah login ada .app-topbar (sticky, setinggi --nav-h) di atas konten -> header tabel
   harus berhenti di bawahnya, bukan di tepi viewport. Halaman tamu tidak punya .app-main
   sehingga fallback 0px yang dipakai (navbar tamu memang ikut tergulir naik). */
.app-main { --svc-th-top: var(--nav-h); }
/* Best Seller (fire, amber) + Baru — badge terlaris & label baru di katalog + tab Rekomendasi */
.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; }
.opt-rec.opt-best { background: color-mix(in srgb, var(--warning) 20%, transparent); color: var(--warning); }
.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; }

/* metrik di tiap opsi dropdown Layanan (Select2) — neworder */
.svc-opt-metrics { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .7rem; margin-top: .3rem; padding-left: 2.4rem; font-size: .72rem; line-height: 1.45; pointer-events: none; }
.svc-opt-metrics .opt-rec { color: var(--success); font-weight: 700; }
.svc-opt-metrics .opt-drop { font-weight: 700; font-family: var(--font-mono); }
.svc-opt-metrics .opt-drop i { font-size: .85em; }
.svc-opt-metrics .opt-speed { color: var(--text-2); font-family: var(--font-mono); }
.svc-opt-metrics .opt-speed i { font-size: .85em; opacity: .8; }
/* "Pilihan Terbaik": pick terbaik per format di-highlight di dropdown Pesan Baru (window.PSMMRecPick) */
.svc-opt-metrics .opt-toppick-badge { color: var(--gold-ink); background: var(--gold-soft); border: 1px solid var(--gold-border); border-radius: var(--radius-pill); padding: .04rem .5rem; }
.select2-results__option.opt-toppick { box-shadow: inset 3px 0 0 var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); }
.select2-results__option.opt-toppick.select2-results__option--highlighted { background: color-mix(in srgb, var(--primary) 16%, transparent); }

/* badge ID layanan di kolom Layanan (orders) */
.svc-id { display: inline-block; font: 700 .72rem/1.4 var(--font-mono); color: var(--primary-strong); background: var(--primary-soft); padding: .12rem .42rem; border-radius: 6px; margin-right: .4rem; vertical-align: middle; }
/* light mode: id layanan lebih kontras (teks gelap + bg lebih tegas) biar ga nyaru */
[data-theme="light"] .svc-id { color: #07485e; background: color-mix(in srgb, var(--primary) 17%, #fff); }
/* Badge ID layanan: PerfectPanel render pakai class .select2-selection__id (+ Bootstrap .badge-secondary abu).
   Target class LANGSUNG -> warna benar SEJAK render (anti-kelip) di search + dropdown + kotak terpilih.
   Cuma RECOLOR (bentuk pill dibiarkan bawaan). .opt-id-hl = jalur JS lama, dipertahankan sbg cadangan. */
.opt-id-hl, .select2-selection__id,
.select2-results__option .badge-secondary, #new-order-search .badge-secondary, .search-dropdown .badge-secondary {
  background: var(--primary-soft) !important; color: var(--primary) !important; border-color: transparent !important;
}
[data-theme="light"] .opt-id-hl, [data-theme="light"] .select2-selection__id,
[data-theme="light"] .select2-results__option .badge-secondary,
[data-theme="light"] #new-order-search .badge-secondary,
[data-theme="light"] .search-dropdown .badge-secondary {
  background: color-mix(in srgb, var(--primary) 26%, #fff) !important; color: #06465c !important;
}
/* highlight pencarian DI DALAM pill ID (mis. "31" pd "231"): samakan warna, buang pill/padding sendiri -> anti "spasi" */
.opt-id-hl-in, .select2-selection__id .text__highlight, .badge-secondary .text__highlight {
  background: transparent !important; color: inherit !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}
/* tombol Download Report (buzzer) di kolom aksi orders */
.btn-report { display: inline-flex !important; align-items: center; gap: .35rem; background: var(--success) !important; color: #fff !important; border: none !important; font-weight: 600; white-space: nowrap; }
.btn-report:hover, .btn-report:focus { filter: brightness(1.08); color: #fff !important; box-shadow: 0 4px 14px rgba(22,185,129,.35); }
.order-actions { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }

/* ============ updates.twig (Pembaruan): ikon + warna per jenis ============ */
.upd-cell--marked { display: flex; align-items: center; gap: .55rem; }
.upd-ic { flex-shrink: 0; display: inline-flex; }
.upd-txt { min-width: 0; color: var(--text-2); }
.upd--down .upd-ic { color: var(--success); }   /* tarif turun (lebih murah) */
.upd--up   .upd-ic { color: var(--warning); }   /* tarif naik */
.upd--new  .upd-ic { color: var(--primary); }   /* layanan baru */
.upd--on   .upd-ic { color: var(--success); }   /* diaktifkan */
.upd--off  .upd-ic { color: var(--text-muted); }/* dinonaktifkan */
.upd--info .upd-ic { color: var(--text-2); }
.updates-page .upd-date { color: var(--text-muted); font-family: var(--font-mono); white-space: nowrap; }

/* filter jadi pill row (semua opsi tampil, isi area atas; tak bergantung bootstrap float) */
.updates-page .nav-pills { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; list-style: none; padding-left: 0; margin: 0 0 1rem; }
.updates-page .nav-pills > li { float: none; margin: 0; }
.updates-page .nav-pills > li > a { display: block; padding: .5rem .9rem; border-radius: var(--radius-pill); border: 1px solid var(--border); color: var(--text-2); font-weight: 600; font-size: var(--fs-sm); text-decoration: none; transition: border-color .15s, color .15s, background .15s; }
.updates-page .nav-pills > li > a:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.updates-page .nav-pills > li.active > a { background: var(--primary); border-color: var(--primary); color: var(--primary-contrast); }
.updates-page .nav-pills > li.search { margin-left: auto; }
.updates-page .nav-pills > li.search .input-group { margin: 0; width: 240px; max-width: 46vw; }
@media (max-width: 600px) { .updates-page .nav-pills > li.search { margin-left: 0; width: 100%; } .updates-page .nav-pills > li.search .input-group { width: 100%; max-width: none; } }

/* ============ MODAL REPORT PENGERJAAN BUZZER (orders) ============ */
.rpt-modal { position: fixed; inset: 0; z-index: 1090; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.rpt-modal[hidden] { display: none; }
.rpt-modal__overlay { position: absolute; inset: 0; background: rgba(3,16,26,.66); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.rpt-modal__box { position: relative; width: 100%; max-width: 720px; max-height: 88vh; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; animation: descPop .18s ease; }
.rpt-modal__head { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.3rem; border-bottom: 1px solid var(--border); }
.rpt-modal__title { margin: 0; font-size: var(--fs-h4); flex: 1; min-width: 0; }
.rpt-modal__title span { color: var(--primary); }
.rpt-modal__actions { display: flex; align-items: center; gap: .4rem; }
.rpt-modal__close { background: none; border: none; font-size: 1.7rem; line-height: 1; color: var(--text-muted); cursor: pointer; padding: 0 .2rem; }
.rpt-modal__close:hover { color: var(--danger); }
.rpt-modal__body { padding: 1.2rem 1.3rem; overflow-y: auto; color: var(--text); }
.rpt-summary { display: grid; gap: .1rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: .8rem 1rem; }
.rpt-row { display: flex; gap: .8rem; font-size: .92rem; padding: .25rem 0; }
.rpt-row > span { min-width: 92px; color: var(--text-muted); }
.rpt-row > b { color: var(--text); word-break: break-word; }
.rpt-row a { color: var(--link); }
.rpt-target { color: var(--text); word-break: break-all; }   /* target = teks biasa, BUKAN link (ga bisa diklik) */
.rpt-noname { color: var(--text-muted); font-style: italic; font-weight: 500; }   /* akun tanpa handle dari report */
.rpt-h { font-size: 1rem; margin: 1.3rem 0 .7rem; color: var(--text); }
.rpt-timeline { display: flex; flex-direction: column; gap: .35rem; }
.rpt-bar-row { display: flex; align-items: center; gap: .7rem; font-size: .82rem; }
.rpt-bar-date { min-width: 92px; color: var(--text-2); font-family: var(--font-mono); }
.rpt-bar { flex: 1; height: 9px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.rpt-bar-fill { display: block; height: 100%; background: var(--grad-primary); border-radius: 999px; }
.rpt-bar-val { min-width: 48px; text-align: right; font-family: var(--font-mono); color: var(--primary-strong); }
.rpt-proofs { display: flex; flex-direction: column; gap: .6rem; }
.rpt-proof { border: 1px solid var(--border); border-radius: var(--radius); padding: .7rem .85rem; }
.rpt-proof-head { display: flex; align-items: center; gap: .5rem; font-size: .92rem; flex-wrap: wrap; }
.rpt-proof-head small { color: var(--text-muted); }
.rpt-thumbs { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .55rem; }
.rpt-thumbs img { width: 76px; height: 76px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); transition: transform .15s, border-color .15s; background: var(--surface-2); }
.rpt-thumbs a:hover img { transform: scale(1.05); border-color: var(--primary); }
.rpt-proof-link { display: inline-block; margin-top: .5rem; font-size: .85rem; color: var(--link); }
.rpt-badge { font-size: .72rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px; text-transform: capitalize; background: var(--primary-soft); color: var(--primary-strong); }
.rpt-badge--completed, .rpt-badge--verified { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); }
.rpt-badge--pending, .rpt-badge--processing { background: color-mix(in srgb, var(--warning) 20%, transparent); color: #b9791a; }
[data-theme="dark"] .rpt-badge--pending, [data-theme="dark"] .rpt-badge--processing { color: var(--warning); }
.rpt-badge--failed, .rpt-badge--rejected, .rpt-badge--canceled { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
.rpt-loading { display: flex; align-items: center; gap: .6rem; justify-content: center; padding: 2.5rem 1rem; color: var(--text-2); }
.rpt-spin { width: 20px; height: 20px; border: 2.5px solid var(--border-2); border-top-color: var(--primary); border-radius: 50%; animation: rptspin .7s linear infinite; }
@keyframes rptspin { to { transform: rotate(360deg); } }
.rpt-error { padding: 2rem 1rem; text-align: center; color: var(--danger); }
.rpt-empty { padding: 1.5rem 1rem; text-align: center; color: var(--text-muted); }
@media (max-width: 620px) { .rpt-row { flex-direction: column; gap: .05rem; } .rpt-row > span { min-width: 0; } .rpt-modal__title { font-size: 1rem; } }

/* ============ TOMBOL + POPUP KETERANGAN (halaman Layanan) ============ */
.service-description-cell { white-space: nowrap; }
.btn-desc {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .85rem; font: 600 var(--fs-sm)/1 var(--font-sans);
  color: var(--primary); background: var(--primary-soft);
  border: 1px solid transparent; border-radius: var(--radius-pill);
  cursor: pointer; white-space: nowrap; transition: background-color .15s, color .15s;
}
.btn-desc:hover { background: var(--primary); color: var(--primary-contrast); }
.desc-modal { position: fixed; inset: 0; z-index: 1080; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.desc-modal[hidden] { display: none; }
.desc-modal__overlay { position: absolute; inset: 0; background: rgba(3,16,26,.62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.desc-modal__box {
  position: relative; width: 100%; max-width: 560px; max-height: 82vh;
  display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); overflow: hidden; animation: descPop .18s ease;
}
@keyframes descPop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.desc-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.3rem; border-bottom: 1px solid var(--border); }
.desc-modal__title { margin: 0; font-size: var(--fs-h4); color: var(--text); line-height: 1.3; }
.desc-modal__close { background: none; border: none; font-size: 1.7rem; line-height: 1; color: var(--text-muted); cursor: pointer; padding: 0 .2rem; }
.desc-modal__close:hover { color: var(--danger); }
.desc-modal__body { padding: 1.1rem 1.25rem; overflow-y: auto; color: var(--text); line-height: 1.5; font-size: var(--fs-body); white-space: normal; word-break: break-word; }
.desc-modal__body p { margin: 0 0 .5rem; }
.desc-modal__body p:last-child { margin-bottom: 0; }
.desc-modal__body ul, .desc-modal__body ol { margin: .25rem 0 .5rem; padding-left: 1.2rem; }
.desc-modal__body li { margin: 0 0 .15rem; }
.desc-modal__body br { line-height: 1; }
/* render rapi popup Keterangan: baris biasa rapat, baris kosong yg disengaja = jarak, bullet = list hanging (kaya MS Word) */
.desc-modal__body .desc-ln { margin: 0; }
.desc-modal__body .desc-gap { height: .6rem; }
.desc-modal__body .desc-ul { margin: .2rem 0 .35rem; padding-left: 1.45em; list-style: disc; }
.desc-modal__body .desc-ul li { margin: 0 0 .28rem; padding-left: .15em; }
.desc-modal__body .desc-ul li::marker { color: var(--primary); }
/* Normalisasi HTML keterangan yang di-paste penjual (sering bawa warna/background inline dari
   copy-paste Word/web). DIPERSEMPIT ke .desc-text (2026-07-28): dulu `.desc-modal__body *`
   sehingga ikut mematikan warna & background blok insight monitoring yang kini ada di modal
   yang sama — batang sparkline, warna drop, dan bintang rating semuanya jadi transparan.
   Insight dirender tema kita sendiri, jadi tidak perlu dinormalkan. */
.desc-modal__body .desc-text * { color: var(--text) !important; -webkit-text-fill-color: var(--text) !important; background: transparent !important; }
.desc-modal__body .desc-text a { color: var(--link) !important; -webkit-text-fill-color: var(--link) !important; }

/* ============ DASHBOARD SIDEBAR (tampilan setelah login) ============ */
.app-shell { display: flex; min-height: 100vh; }
.app-sidebar a, .app-topbar a, .app-sidebar a:hover, .app-topbar a:hover { text-decoration: none; }  /* nav dashboard: jangan ada underline saat hover */
/* GLOBAL: di area panel, link JANGAN underline pas hover (ini app, bukan dokumen) -> ngalahin Bootstrap a:hover. Biar ga keulang2 masalah underline. */
.app-content a:hover, .app-content a:focus, .app-content a.dropdown-item:hover, .svc-order:hover, .svc-order:focus { text-decoration: none; }
.app-sidebar {
  position: fixed; top: 0; left: 0; width: 260px; height: 100vh; z-index: 1040;
  background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; padding: 1rem .8rem; overflow: hidden;
  transition: transform .25s ease;
}
.app-brand { display: block; padding: .4rem .6rem 1.1rem; flex-shrink: 0; }
.app-brand img { max-height: 38px; width: auto; border-radius: 8px; }
/* header sidebar: logo + tombol collapse sebaris */
.app-sb-head { display: flex; align-items: center; gap: .4rem; padding: 0 .2rem .8rem 0; }
.app-sb-head .app-brand { padding: .4rem .6rem; flex: 1 1 auto; min-width: 0; }
.app-sb-toggle { display: none; flex: 0 0 auto; width: 34px; height: 34px; align-items: center; justify-content: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-2); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.app-sb-toggle:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); }
.app-menu { display: flex; flex-direction: column; gap: .2rem; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-bottom: 130px; }  /* menu = area scroll; padding bawah biar item terbawah (Blog) lolos dari tombol WA/Telegram melayang */
.app-menu-item {
  display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; row-gap: .3rem; padding: .72rem .9rem;
  border-radius: var(--radius); color: var(--text-2); font-weight: 600; font-size: .94rem;
  text-decoration: none; transition: background-color .15s, color .15s;
}
.app-menu-item:hover, .app-menu-item:focus { background: var(--surface-2); color: var(--primary); text-decoration: none; }
.app-menu-item.active { background: var(--grad-primary); color: var(--primary-contrast); box-shadow: var(--glow); }
.app-menu-item .navbar-icon { width: 20px; text-align: center; }
.app-menu-item .menu-svg { flex-shrink: 0; opacity: .72; transition: opacity .15s; }
.app-menu-item:hover .menu-svg, .app-menu-item.active .menu-svg { opacity: 1; }
/* Sidebar: matikan "stroke putih" (outline + ring fokus bawaan) saat menu & logo di-KLIK. Keyboard tetap dapat ring tema (:focus-visible global), item aktif tetap punya glow. */
.app-sidebar a, .app-sidebar button, .app-sb-toggle, .app-brand, .topbar-logo { -webkit-tap-highlight-color: transparent; }
.app-sidebar a:focus, .app-sidebar button:focus, .app-sb-toggle:focus, .app-brand:focus, .topbar-logo:focus { outline: none; }
.app-brand:focus:not(:focus-visible), .app-sb-toggle:focus:not(:focus-visible), .topbar-logo:focus:not(:focus-visible), .app-menu-item:focus:not(:focus-visible):not(.active) { box-shadow: none; }
/* label kedip di sidebar (promo Sewa Panel / sorotan Monitoring) */
.menu-badge { margin-left: auto; font-size: 10px; line-height: 1.5; font-weight: 800; padding: .12rem .45rem; border-radius: var(--radius-pill); white-space: nowrap; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.menu-badge--price { background: linear-gradient(135deg, #FFD24A, #FF9D00); color: #3d2a00; }
.menu-badge--first { background: var(--grad-primary); color: #fff; }
.menu-badge--blink { animation: psmm-menu-blink 1.1s ease-in-out infinite; }
@keyframes psmm-menu-blink { 0%, 100% { opacity: 1; } 50% { opacity: .42; } }
@media (prefers-reduced-motion: reduce) { .menu-badge--blink { animation: none; } }
.app-main { flex: 1; margin-left: 260px; min-width: 0; display: flex; flex-direction: column; }
.app-topbar {
  position: sticky; top: 0; z-index: 1030; display: flex; align-items: center; gap: .6rem;
  min-height: var(--nav-h); padding: .5rem 1.2rem;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.app-topbar-spacer { flex: 1; }

/* ---- kartu info user di topbar (nama / total pesanan / saldo) ---- */
.topbar-stats { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.tb-card { display: flex; align-items: center; gap: .55rem; padding: .38rem .75rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.tb-card__ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--primary-soft); color: var(--primary); flex-shrink: 0; }
.tb-card--balance .tb-card__ic, .tb-card--spent .tb-card__ic { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
.tb-card__meta { display: flex; flex-direction: column; line-height: 1.18; min-width: 0; }
.tb-card__label { font-size: .68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.tb-card__val { font-size: .92rem; font-weight: 700; color: var(--text); white-space: nowrap; }
.tb-card:not(.tb-card--balance):not(.tb-card--spent) .tb-card__val { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.tb-card--balance .tb-card__val, .tb-card--spent .tb-card__val { font-family: var(--font-mono); color: var(--success); }
/* chip Level & Diskon akun -> aksen GOLD (perk akun) biar beda & nonjol dari chip lain */
.tb-card--level .tb-card__ic, .tb-card--discount .tb-card__ic { background: var(--gold-soft); color: var(--gold-ink); }
.tb-card--level .tb-card__val, .tb-card--discount .tb-card__val { color: var(--gold-ink); font-weight: 800; }
/* kartu topbar yang bisa diklik (navigasi cepat / popup level) */
.tb-card--link { cursor: pointer; text-decoration: none; transition: border-color .15s ease, background .15s ease, transform .1s ease; }
.tb-card--link:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); background: var(--surface); }
.tb-card--link:active { transform: translateY(1px); }
.tb-card--link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* ===== Popup Level & Diskon (klik kartu Level) ===== */
.psmm-lvl-modal[hidden] { display: none; }
.psmm-lvl-modal { position: fixed; inset: 0; z-index: 1080; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.psmm-lvl-modal__overlay { position: absolute; inset: 0; background: rgba(6, 18, 26, .58); }
.psmm-lvl-modal__box { position: relative; width: 100%; max-width: 440px; max-height: 90vh; overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); padding: 1.1rem 1.2rem 1.2rem; }
.psmm-lvl-modal__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.psmm-lvl-modal__head h4 { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--text); display: flex; align-items: center; gap: .45rem; }
.psmm-lvl-modal__head h4 i { color: var(--gold-ink, #C68A00); }
.psmm-lvl-modal__close { border: 0; background: none; font-size: 1.5rem; line-height: 1; color: var(--text-2); cursor: pointer; padding: 0 .2rem; }
.psmm-lvl-modal__close:hover { color: var(--text); }
.psmm-lvl-modal__sub { margin: .35rem 0 .9rem; font-size: .86rem; color: var(--text-2); line-height: 1.45; }
.psmm-lvl-modal__sub b, .psmm-lvl-prog__top b { color: var(--text); }
.psmm-lvl-list { display: flex; flex-direction: column; gap: .4rem; }
.psmm-lvl-row { display: flex; align-items: center; gap: .65rem; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.psmm-lvl-row__ic { flex: 0 0 auto; width: 24px; text-align: center; font-size: 1rem; color: var(--text-2); }
.psmm-lvl-row.is-done .psmm-lvl-row__ic { color: var(--success); }
.psmm-lvl-row.is-current { border-color: var(--primary); background: var(--primary-soft); }
.psmm-lvl-row.is-current .psmm-lvl-row__ic { color: var(--gold-ink, #C68A00); }
.psmm-lvl-row.is-locked { opacity: .6; }
.psmm-lvl-row__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.psmm-lvl-row__name { font-weight: 700; color: var(--text); font-size: .92rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.psmm-lvl-row__badge { font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--primary-contrast); background: var(--primary); padding: .12rem .42rem; border-radius: 999px; }
.psmm-lvl-row__min { font-size: .76rem; color: var(--text-2); }
.psmm-lvl-row__disc { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; font-size: .62rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-2); line-height: 1.15; }
.psmm-lvl-row__disc b { font-size: 1.05rem; font-weight: 800; color: var(--success); font-family: var(--font-mono); }
.psmm-lvl-prog { margin: 0 0 .9rem; padding: .6rem .75rem; border: 1px dashed color-mix(in srgb, var(--primary) 40%, var(--border)); border-radius: 10px; background: var(--primary-soft); }
.psmm-lvl-prog__top { display: flex; justify-content: space-between; gap: .5rem; font-size: .8rem; color: var(--text-2); margin-bottom: .45rem; }
.psmm-lvl-prog__bar { height: 7px; border-radius: 999px; background: color-mix(in srgb, var(--primary) 18%, transparent); overflow: hidden; }
.psmm-lvl-prog__bar span { display: block; height: 100%; background: var(--primary); border-radius: 999px; }
.psmm-lvl-modal__note { margin: .9rem 0 0; font-size: .74rem; color: var(--text-2); line-height: 1.45; }
body.psmm-lvl-open { overflow: hidden; }
/* ===== Drip-feed — UI "batch" rich (mirip mockup): header+toggle, langkah, contoh, chip, timeline ===== */
.psmm-drip { border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); padding: .9rem; margin-bottom: 1rem; }
.psmm-drip.is-on { border-color: color-mix(in srgb, var(--primary) 38%, var(--border)); }
/* sembunyikan kontrol bawaan PP (diganti header toggle + chip) — input tetap ada & submit */
.psmm-drip #order_check > .form-group__checkbox, .psmm-drip #order_check > .form-group__label-title, .psmm-drip #dripfeed-options > .form-group { display: none; }
.psmm-drip__head { display: flex; align-items: center; gap: .6rem; }
.psmm-drip__head-ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; font-size: 1.05rem; }
.psmm-drip__head-txt { flex: 1 1 auto; min-width: 0; }
.psmm-drip__head-title { font-size: .98rem; font-weight: 800; color: var(--text); display: flex; align-items: center; gap: .4rem; }
.psmm-drip__pro { font-size: .58rem; font-weight: 800; letter-spacing: .05em; color: var(--primary-contrast); background: var(--primary); padding: .1rem .38rem; border-radius: 5px; }
.psmm-drip__head-sub { font-size: .76rem; color: var(--text-2); line-height: 1.35; margin-top: .1rem; }
.psmm-drip__toggle { position: relative; flex: 0 0 auto; width: 46px; height: 26px; border: none; border-radius: 999px; background: var(--border); cursor: pointer; padding: 0; transition: background .18s ease; }
.psmm-drip__toggle.is-on { background: var(--primary); }
.psmm-drip__toggle-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .18s ease; }
.psmm-drip__toggle.is-on .psmm-drip__toggle-knob { transform: translateX(20px); }
.psmm-drip #dripfeed-options { margin-top: .85rem; }
.psmm-drip__steps { display: flex; gap: .4rem; margin-bottom: .85rem; }
.psmm-drip__step { flex: 1 1 0; display: flex; gap: .45rem; align-items: flex-start; padding: .5rem .55rem; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); min-width: 0; }
.psmm-drip__step-n { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: var(--primary); color: var(--primary-contrast); font-size: .72rem; font-weight: 800; display: grid; place-items: center; }
.psmm-drip__step-b { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.psmm-drip__step-b b { font-size: .77rem; color: var(--text); font-weight: 700; }
.psmm-drip__step-b small { font-size: .67rem; color: var(--text-2); }
.psmm-drip__learn { margin-bottom: .3rem; }
.psmm-drip__learn-btn { width: 100%; text-align: left; border: 1px solid var(--border); background: var(--surface); color: var(--primary); border-radius: 9px; padding: .5rem .7rem; font-size: .82rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: .45rem; }
.psmm-drip__learn-btn i { font-size: .72rem; transition: transform .2s ease; }
.psmm-drip__learn-btn.is-open i { transform: rotate(180deg); }
.psmm-drip__learn-body { padding: .6rem .15rem .1rem; }
.psmm-drip__sec-lbl { font-size: .67rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--primary); margin: .75rem 0 .4rem; }
.psmm-drip__sec-lbl:first-child { margin-top: 0; }
.psmm-drip__ex-chips { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; margin-bottom: .55rem; }
.psmm-drip__ex-chips span { font-size: .73rem; font-weight: 700; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: .2rem .45rem; }
.psmm-drip__ex-chips span.is-hl { color: #C67A0E; background: color-mix(in srgb, var(--warning) 16%, transparent); border-color: transparent; }
.psmm-drip__ex-chips i { color: var(--text-2); font-size: .58rem; }
.psmm-drip__ex-sum { font-size: .8rem; color: var(--text); background: color-mix(in srgb, var(--success) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--success) 28%, transparent); border-radius: 8px; padding: .5rem .65rem; margin-bottom: .6rem; }
.psmm-drip__ex-sum b, .psmm-drip__sum b, .psmm-drip__ul li b { color: var(--text); font-weight: 800; }
.psmm-drip__ul { margin: 0; padding-left: 1.1rem; }
.psmm-drip__ul li { font-size: .78rem; line-height: 1.5; color: var(--text-2); margin-bottom: .22rem; }
.psmm-drip__ul--warn li::marker { color: var(--warning); }
.psmm-drip__field { margin-top: .85rem; }
.psmm-drip__field-lbl { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--text-2); margin-bottom: .45rem; }
.psmm-drip__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.psmm-drip__chip { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 8px; padding: .42rem .72rem; font-size: .82rem; font-weight: 700; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.psmm-drip__chip:hover { border-color: var(--primary); }
.psmm-drip__chip.is-active { border-color: var(--primary); background: var(--primary); color: var(--primary-contrast); }
.psmm-drip__custom { width: 88px; border: 1px solid var(--border); border-radius: 8px; padding: .42rem .6rem; font-size: .82rem; background: var(--surface); color: var(--text); }
.psmm-drip__custom:focus { outline: none; border-color: var(--primary); }
.psmm-drip__live { margin-top: .85rem; }
.psmm-drip__sum { padding: .55rem .7rem; border-radius: 9px; background: color-mix(in srgb, var(--success) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--success) 30%, transparent); font-size: .82rem; color: var(--text); margin-bottom: .55rem; }
.psmm-drip__hint2 { padding: .6rem .7rem; border-radius: 9px; background: var(--primary-soft); border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border)); font-size: .8rem; color: var(--text-2); display: flex; align-items: center; gap: .4rem; }
.psmm-drip__hint2 i { color: var(--primary-strong); }
.psmm-drip__tl { border: 1px solid var(--border); border-radius: 9px; overflow: hidden; background: var(--surface); }
.psmm-drip__tl-row { display: flex; align-items: center; gap: .6rem; padding: .42rem .6rem; font-size: .8rem; color: var(--text); border-top: 1px solid var(--border); }
.psmm-drip__tl-row:first-child { border-top: none; }
.psmm-drip__tl-off { flex: 0 0 auto; min-width: 60px; text-align: center; font-size: .68rem; font-weight: 800; color: var(--primary); background: var(--primary-soft); border-radius: 6px; padding: .2rem .3rem; }
.psmm-drip__tl-q { color: var(--text-2); font-weight: 600; }
.psmm-drip__tl-more { color: var(--text-2); font-style: italic; }
@media (max-width: 560px) { .psmm-drip__steps { flex-direction: column; } }

.app-account { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.app-account > li { position: relative; }
.app-account > li > a { display: inline-block; padding: .5rem .8rem; color: var(--text-2); font-weight: 600; border-radius: var(--radius-sm); cursor: pointer; text-decoration: none; }
.app-account > li > a:hover, .app-account > li.active > a { color: var(--primary); background: var(--primary-soft); text-decoration: none; }
.app-account .badge { background: var(--primary-soft); color: var(--primary-strong); font-family: var(--font-mono); font-size: .85rem; }

/* ===== Avatar dropdown akun (saldo + tema + sub-menu) ===== */
.account-dd { position: relative; }
.account-dd__btn { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .3rem; background: none; border: 0; cursor: pointer; border-radius: var(--radius-pill); }
.account-dd__btn:hover { background: var(--surface-2); }
.account-dd__btn .caret { color: var(--text-muted); }
.account-dd__avatar { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--grad-primary); color: #fff; font-weight: 800; font-size: .95rem; flex: 0 0 auto; }
.account-dd__menu { min-width: 256px; padding: 0; margin-top: .55rem; overflow: hidden; }
.account-dd__head { display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem; border-bottom: 1px solid var(--border); }
/* Level + Diskon di dropdown akun — pill kecil & proporsional di bawah username (krn chip header kesembunyi di mobile) */
.account-dd__perks { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: 2px; }   /* di dalam kolom username (.account-dd__id), jarak rapat ke nama */
.account-dd__id b { line-height: 1.15; }
.add-perk { display: inline-flex; align-items: center; gap: .22rem; font-size: .64rem; font-weight: 800; line-height: 1; color: var(--gold-ink); background: var(--gold-soft); border: 1px solid var(--gold-border); border-radius: var(--radius-pill); padding: .22rem .48rem; white-space: nowrap; }
.add-perk svg { width: 11px; height: 11px; flex-shrink: 0; }
.add-perk__sep { opacity: .5; font-weight: 600; }   /* pemisah "·" antara level & diskon dalam 1 pill */
@media (min-width: 993px) { .account-dd__perks { display: none; } }   /* di PC chip Level/Diskon udah tampil di header -> ga usah dobel di dropdown */
.account-dd__avatar--lg { width: 44px; height: 44px; font-size: 1.15rem; }
.account-dd__id { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.account-dd__id b { color: var(--text); font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-dd__bal { color: var(--success); font-family: var(--font-mono); font-weight: 700; font-size: .9rem; }
.account-dd__theme { margin-left: auto; flex: 0 0 auto; display: inline-flex; }
.account-dd__theme .psmm-theme-toggle { position: static; margin: 0; }
.account-dd__menu > li > a.account-dd__link { display: flex !important; align-items: center; gap: .65rem; padding: .62rem 1rem !important; color: var(--text-2) !important; font-weight: 600; }
.account-dd__link:hover, .account-dd__menu > li.active > .account-dd__link { background: var(--primary-soft) !important; color: var(--primary) !important; }
.account-dd__link .menu-svg { opacity: .8; flex: 0 0 auto; }
.account-dd__logout { color: var(--danger) !important; border-top: 1px solid var(--border); }
.account-dd__logout:hover { background: color-mix(in srgb, var(--danger) 12%, transparent) !important; color: var(--danger) !important; }
/* menu sidebar yang dipindah ke dropdown (mobile only) + logo pengganti hamburger */
.account-dd__navitem { display: none; }
.account-dd__navsep { display: none; height: 1px; background: var(--border); margin: .35rem 0; padding: 0 !important; }
.topbar-logo { display: none; align-items: center; }
.topbar-logo img { height: 28px; width: auto; display: block; }
.account-dd__bal { display: none; }   /* saldo di sub-menu dihapus biar ga double (saldo udah di header) */
/* saldo mini (pill sebelah avatar) — default hidden, MUNCUL lewat @container pas kartu Sisa Saldo disembunyiin */
.app-topbar .topbar-saldo { display: none; align-items: center; font-weight: 700; font-size: var(--fs-sm); color: var(--success); background: color-mix(in srgb, var(--success) 14%, transparent); padding: .28rem .7rem; border-radius: var(--radius-pill); white-space: nowrap; text-decoration: none; margin-right: .45rem; }
.app-topbar .topbar-saldo:hover, .app-topbar .topbar-saldo:focus { color: var(--success); background: color-mix(in srgb, var(--success) 22%, transparent); }
/* Header responsif: JS (_PASTE-ke-script.js modul topbar-fit) yg sembunyiin kartu bertahap sesuai ruang topbar
   (prioritas: Level -> Diskon+Sisa Saldo -> Username -> Total Pesanan+Belanja). Saldo tetap kebaca via pill sebelah avatar.
   flex-shrink:0 -> kartu & akun GA menciut, jadi kelebihan lebar kebaca jelas (scrollWidth) + JS bisa ukur akurat. */
.topbar-stats { flex-shrink: 0; }
.app-topbar .app-account { flex-shrink: 0; }
/* ===== PC (area kanan-atas luas): Akun + Keluar + toggle tema tampil LANGSUNG, tanpa dropdown.
   Username dihapus (udah ada "HALO ..." di header). Mobile tetap pakai dropdown avatar. ===== */
@media (min-width: 993px) {
  .app-account .account-dd { position: static; display: flex; align-items: center; gap: .35rem; }
  .app-account .account-dd__btn { display: none !important; }            /* sembunyikan avatar + caret (ga perlu toggle) */
  .app-account .account-dd__menu {
    position: static; display: flex !important; flex-direction: row; align-items: center; gap: .35rem;
    min-width: 0; margin: 0; padding: 0; overflow: visible; background: none; border: 0; box-shadow: none; float: none;
  }
  .app-account .account-dd__menu > li { position: static; float: none; margin: 0; }
  .app-account .account-dd__head { order: 9; padding: 0; border: 0; gap: 0; }   /* head -> cuma toggle tema, taruh paling kanan */
  .app-account .account-dd__head .account-dd__avatar,
  .app-account .account-dd__head .account-dd__id { display: none; }            /* buang avatar besar + username (redundan) */
  .app-account .account-dd__theme { margin: 0 0 0 .15rem; }
  .app-account .account-dd__menu > li > a.account-dd__link {
    padding: .42rem .85rem !important; border-radius: var(--radius-pill); border: 1px solid var(--border);
    white-space: nowrap; color: var(--text-2) !important;
  }
  .app-account .account-dd__menu > li > a.account-dd__link:hover { border-color: var(--primary); background: var(--primary-soft) !important; color: var(--primary) !important; }
  .app-account .account-dd__navitem, .app-account .account-dd__navsep { display: none !important; }   /* clone sidebar tetap sembunyi di PC */
  /* Sidebar collapse (PC). EXPANDED: tombol collapse ada di sidebar (sebelah logo); burger topbar disembunyikan.
     COLLAPSED: sidebar nyembunyi -> logo + burger topbar MUNCUL (biar bisa dibuka lagi & logo providersmm tetap tampil). */
  .app-sb-toggle { display: inline-flex; }
  .app-sidebar { transform: translateX(0); }                 /* expanded eksplisit -> transisi collapse mulus (hindari quirk transisi dari `none`) */
  .app-shell.is-sb-collapsed .app-main { margin-left: 0; }
  .app-shell.is-sb-collapsed .app-topbar .app-burger { display: inline-flex; }
  .app-shell.is-sb-collapsed .topbar-logo { display: inline-flex; }
}
/* state collapse sidebar + transisi halus (global) */
.app-main { transition: margin-left .25s ease; }
.app-shell.is-sb-collapsed .app-sidebar { transform: translateX(-100%); }
/* COMPACT services: kolom pencarian sebaris dgn filter (hemat tempat) */
@media (max-width: 768px) {
  .services-page .nav-pills { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .6rem; }
  .services-page .nav-pills > li { margin: 0; float: none !important; }
  .services-page .nav-pills > li.search { flex: 1 1 auto; min-width: 130px; }
  .services-page .nav-pills > li.search .input-group { width: 100%; max-width: none; }
  .services-page .svc-bar-note { display: none; }
}
/* Orders/Refunds: SELALU pakai dropdown status di SEMUA layar (PC pun). Pills jejer DIHILANGKAN total -> ga ada lagi dobel/bingung. */
.ord-statusdd-li { display: block; }
.psmm-filterbar { display: flex; flex-wrap: nowrap; align-items: center; gap: .4rem; margin-bottom: .6rem; }
.psmm-filterbar::before, .psmm-filterbar::after, .services-page .nav-pills::before, .services-page .nav-pills::after { content: none !important; display: none !important; }
.psmm-filterbar > li { margin: 0; float: none !important; }
.psmm-filterbar > .ord-pill-hidden { display: none !important; }   /* pills jejer SELALU disembunyikan */
.psmm-filterbar > .ord-statusdd-li { display: block; flex: 0 0 auto; }
.psmm-filterbar > li.search { flex: 1 1 auto; min-width: 100px; }
.psmm-filterbar > li.search .input-group { width: 100%; max-width: 420px; margin-left: auto; }   /* Cari di kanan, ga kelebaran di PC */
/* dropdown status CUSTOM (tombol + daftar opsi ber-tema, ga pakai <select> native yg listnya polos) */
.ord-dd { position: relative; }
.ord-dd-btn { display: inline-flex; align-items: center; gap: .4rem; height: 40px; max-width: 200px; padding: 0 .55rem 0 .9rem; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); color: var(--text); font-weight: 600; font-size: var(--fs-sm); line-height: 1; cursor: pointer; white-space: nowrap; transition: border-color .15s, background .15s, box-shadow .15s; }
.ord-dd-btn:hover, .ord-dd.is-open .ord-dd-btn { border-color: var(--primary); background: var(--primary-soft); }
.ord-dd-cur { overflow: hidden; text-overflow: ellipsis; }
.ord-dd-caret { flex: 0 0 auto; color: var(--text-muted); transition: transform .18s ease, color .15s; }
.ord-dd.is-open .ord-dd-caret { transform: rotate(180deg); color: var(--primary); }
.ord-dd-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 1060; min-width: max(100%, 190px); margin: 0; padding: .3rem; list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); max-height: 60vh; overflow-y: auto; animation: psmm-dd-in .14s ease; }
.ord-dd-menu[hidden] { display: none; }
@keyframes psmm-dd-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.ord-dd-opt { padding: .5rem .7rem; border-radius: var(--radius-sm); color: var(--text-2); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .12s, color .12s; }
.ord-dd-opt:hover { background: var(--primary-soft); color: var(--primary); }
.ord-dd-opt.is-active { background: var(--primary); color: var(--primary-contrast); }
.psmm-filterbar li.search { align-self: center; }
.psmm-filterbar li.search form { margin: 0; }
/* Search box di filterbar (Orders/Refunds/Updates): kaca pembesar PROPORSIONAL -> tinggi 40px sejajar dropdown, bentuk pill senada, ikon ketengah */
.psmm-filterbar > li.search .input-group { display: flex; align-items: stretch; }
.psmm-filterbar > li.search .input-group .form-control { height: 40px; min-width: 0; border: 1px solid var(--border); border-right: 0; border-radius: var(--radius-pill) 0 0 var(--radius-pill); padding-left: 1rem; box-shadow: none; }
.psmm-filterbar > li.search .input-group-btn { display: flex; width: auto; }
.psmm-filterbar > li.search .input-group-btn .btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; min-width: 46px; padding: 0 1rem; border: 1px solid var(--border); border-left: 0; border-radius: 0 var(--radius-pill) var(--radius-pill) 0; background: var(--surface-2); color: var(--text-2); font-size: .95rem; line-height: 1; }
.psmm-filterbar > li.search .input-group-btn .btn svg, .psmm-filterbar > li.search .input-group-btn .btn i { width: 16px; height: 16px; font-size: .95rem; }
.psmm-filterbar > li.search .input-group-btn .btn:hover, .psmm-filterbar > li.search .input-group-btn .btn:focus { background: var(--primary); border-color: var(--primary); color: var(--primary-contrast); outline: none; }
/* buang "stroke putih" (outline browser bawaan) pas tombol filter dropdown di-klik; keyboard tetap dpt ring tema via :focus-visible global */
.ord-dd-btn:focus { outline: none; }
/* Filter dropdown + search SEBARIS (1 baris) biar hemat space. Pakai [data-ord-dd] (cuma pas udah jadi dropdown) + specificity tinggi -> menang dari rule lama yg bikin search turun ke baris bawah. */
.psmm-filterbar[data-ord-dd] { flex-wrap: nowrap; }
.psmm-filterbar[data-ord-dd] > li.search { flex: 1 1 0%; min-width: 0; width: auto; margin-left: 0; }
.psmm-filterbar[data-ord-dd] > li.search .input-group { width: 100%; max-width: none; min-width: 0; }
.psmm-filterbar[data-ord-dd] > li.search .form-control { flex: 1 1 0%; min-width: 0; }
@media (max-width: 600px) { .psmm-filterbar[data-ord-dd] .ord-dd-btn { max-width: 170px; } }
.psmm-filterbar li.search .form-control, .psmm-filterbar li.search .input-group-btn > .btn { height: 40px; }
/* tombol Cari (kaca pembesar) proporsional di semua bar */
.nav-pills > li.search .input-group-btn .btn { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; }
.nav-pills > li.search .input-group-btn .btn i { font-size: 1rem; line-height: 1; }

/* ---- pemilih mata uang (toggle + dropdown, fix dark mode) ---- */
.dropdown-currencies > .dropdown-toggle { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .7rem; border: 1px solid var(--border); border-radius: var(--radius-pill); }
.dropdown-currencies > .dropdown-toggle:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.dropdown-currencies .cur-ic { opacity: .85; }
.dropdown-currencies .cur-label { font-family: var(--font-mono); font-size: .85rem; }
.dropdown-currencies .dropdown-menu { min-width: 150px; padding: .35rem; margin-top: .45rem; }
.dropdown-currencies .dropdown-menu > li > a { display: block; padding: .5rem .7rem; color: var(--text-2); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: .9rem; }
.dropdown-currencies .dropdown-menu > li > a:hover, .dropdown-currencies .dropdown-menu > li > a:focus { background: var(--primary-soft); color: var(--primary); }
.app-content { padding: clamp(1rem, 3vw, 2rem); flex: 1; }
.app-burger { display: none; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; padding: 8px; border-radius: var(--radius-sm); }
.app-burger span { width: 22px; height: 2px; background: var(--text); border-radius: 2px; }
.app-burger:hover { background: var(--surface-2); }
.app-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1035; }
.app-backdrop.show { display: block; }
/* Tombol melayang "tampilkan menu" — JS munculin saat sidebar ketutup & burger topbar ga keliatan (mis. halaman /monitor). Di atas konten/iframe. */
.psmm-sb-show { display: none; position: fixed; top: 14px; left: 14px; z-index: 1045; width: 44px; height: 44px; align-items: center; justify-content: center; padding: 0; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.psmm-sb-show:hover, .psmm-sb-show:focus { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); outline: none; }
@media (max-width: 992px) {
  .app-sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
  .app-sidebar.open { transform: translateX(0); }
  .app-main { margin-left: 0; }
  .app-burger { display: none; }                  /* hamburger dihapus di mobile -> menu pindah ke dropdown avatar */
  .topbar-logo { display: inline-flex; }
  .account-dd__navitem, .account-dd__navsep { display: block; }
  .tb-card--hide-sm { display: none; }            /* sembunyikan kartu Total Pesanan di layar kecil */
}
@media (max-width: 640px) {
  .app-topbar { padding: .5rem .7rem; gap: .4rem; }
  /* kartu topbar disembunyiin bertahap via @container di atas (bukan lagi blanket di sini) */
  .dropdown-currencies .cur-label { display: none; }                /* tinggal ikon koin */
  .dropdown-currencies > .dropdown-toggle { padding: .4rem .55rem; }
  .account-dd__menu { min-width: 268px; }   /* dilebarin biar username ga kepotong + perks lega */
}
@media (max-width: 430px) { .app-topbar { gap: .25rem; } }

/* ============ RESPONSIVE ============ */
@media (max-width: 980px) {
  .hero-grid, .monitor-grid { grid-template-columns: 1fr; }
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .monitor-visual { position: static; }
}
@media (max-width: 620px) {
  .cols-4, .cols-3, .cols-2, .steps, .foot-grid { grid-template-columns: 1fr; }
  .monitor-row { grid-template-columns: 1.4fr .8fr 1fr; }
  .monitor-row .hide-sm { display: none; }
}
/* 4 statistik -> 2x2 mulai dari tablet. JANGAN 1 kolom di HP: band jadi kepanjangan & banyak ruang kosong. */
@media (max-width: 860px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat { padding: 1.45rem .6rem; }
  .stat + .stat::before { display: none; }                             /* divider vertikal desktop dimatiin */
  .stat:nth-child(2n) { border-left: 1px solid rgba(1,34,47,.26); }    /* pemisah antar kolom */
  .stat:nth-child(n+3) { border-top: 1px solid rgba(1,34,47,.20); }    /* pemisah antar baris */
}
@media (max-width: 430px) {
  .stat { padding: 1.2rem .45rem; }
  .stat__ic { width: 38px; height: 38px; border-radius: 11px; margin-bottom: .5rem; }
  .stat__ic > svg { width: 19px; height: 19px; }
  .stat > span:not(.stat__ic) { font-size: .66rem; letter-spacing: .06em; }
}

/* ============================================================================
   neworder.twig — layout 2 kolom + social chooser + Service Insight panel
   (flex hanya di >=992px supaya stacking mobile BS3 tetap normal)
   ========================================================================== */
@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; }
}

/* --- Social network chooser --- */
.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; }
/* Tab "Rekomendasi" di form order (in-place) */
.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); }
/* Rekomendasi = tab PREMIUM gold: nyorot + glow + kedip terus (kaya menu promo sidebar) sampai lagi aktif */
.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; }
@keyframes recGoldPulse { 0% { box-shadow: 0 0 0 0 rgba(255, 179, 0, .5); } 70%, 100% { box-shadow: 0 0 0 8px rgba(255, 179, 0, 0); } }
.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; } }
/* langkah-1 hybrid: platform picker = 1 BARIS strip yg bisa di-geser (nowrap + scroll), hemat ruang vertikal */
#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); }   /* fade kanan cuma kalau strip kepanjangan (di-toggle JS) biar user tau bisa di-geser */
#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; }   /* "Semua" disembunyiin di mode Rekomendasi -> user pilih platform spesifik */
#order-form.psmm-rec #snChooser .sn-chip:hover { transform: none; }
/* Opsi C (user 2026-07-10): ikon di dalam BADGE kotak-membulat (radius, BUKAN pill/bulat), monokrom seragam; yg keisi warna pas aktif = BADGE-nya aja, bukan seluruh tile (fix: dulu tile-nya pill kepenuhan) */
#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; }
/* hint: list disembunyiin sampai user milih platform */
.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; }
/* langkah-2 hybrid: chip JENIS layanan (filter tingkat-2) */
.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; }
/* Mode Rekomendasi dikunci via class .psmm-rec di #order-form (STABIL -> tahan re-render PerfectPanel; CSS auto ke-apply lagi ke elemen yg di-render ulang) */
#psmmRecPanel { display: none; }
#order-form.psmm-rec #psmmRecPanel { display: block; }
#order-form.psmm-rec .form-group:has(#orderform-category),
#order-form.psmm-rec .form-group:has(#orderform-service),
#order-form.psmm-rec .form-group:has(#new-order-search),
#order-form.psmm-rec .form-group:has(.search-dropdown) { display: none !important; }
/* backup: sembunyiin kotak cari bawaan LANGSUNG (kalau strukturnya beda / ga kebungkus .form-group) */
#order-form.psmm-rec #new-order-search,
#order-form.psmm-rec .search-dropdown { display: none !important; }
.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; }   /* ID layanan: spasi diatur gap flex biar rata */
.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 format-first: judul(format) + ID sebaris, subtitle pembeda, badge drop/order */
.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); }
/* mobile: chooser jadi 1 baris yg bisa digeser (hemat ruang vertikal, ga numpuk ke bawah) */
@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; }
}

/* --- Service Insight panel (kanan) --- */
.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; }
/* blok RATING di-highlight (skor besar + stars + label kualitas + penjelasan) — isi ruang kosong + informatif */
.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; }
/* banner Best Seller di panel Insight (dari data monitoring orders_index) — melengkapi drop rate */
.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; }
/* Kecepatan proses (recent_completed) — meter Lambat/Normal/Cepat + tabel Jumlah/Proses/Diorder + terakhir diorder */
.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); }   /* muncul cuma kalau recent_completed telat sinkron (> 15 mnt) — normalnya ga ada */
.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; }

/* sparkline tren drop multi-window (1/7/30/60/90 hari) */
.si-drop--spark .si-drop__top { margin-bottom: .5rem; }
/* tren = NETRAL (drop = retention horizon; naiknya drop seiring usia order itu wajar, bukan sinyal buruk) */
.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; }  /* rata-rata drop gabungan (avg_drop) = headline */
.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; }
/* bungkus drop rate + atribut (Stabilitas/Kecepatan/Dipantau) dalam 1 kartu abu2 -> konsisten dgn rating & kecepatan proses */
.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; }

/* info-tooltip (ⓘ) di label atribut insight — Stabilitas/Kecepatan/Dipantau */
.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; }

/* ============================================================================
   addfunds.twig — Deposit Saldo
   ========================================================================== */
.addfunds-page { max-width: 1180px; margin: 0 auto; }
.af-head h2 { font-size: var(--fs-h3); font-weight: 800; margin: 0 0 .15rem; }
.af-head p { color: var(--text-2); margin: 0 0 1.2rem; }
@media (min-width: 992px) { .af-layout { display: flex; flex-wrap: wrap; align-items: flex-start; } .af-col-main { width: 58.333%; padding-right: 1rem; } .af-col-side { width: 41.666%; } .af-col-side .af-history { position: sticky; top: 80px; } }

.af-balance { background: var(--grad-primary, var(--primary)); color: var(--primary-contrast); border-radius: var(--radius-lg); padding: 1.1rem 1.3rem; display: flex; flex-direction: column; gap: .2rem; margin-bottom: 1.1rem; box-shadow: var(--glow, 0 8px 24px rgba(0,180,228,.25)); }
.af-balance__label { font-size: var(--fs-sm); opacity: .85; }
.af-balance__val { font-size: var(--fs-h2); font-weight: 800; font-family: var(--font-mono); line-height: 1.1; }

.af-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.1rem 1.15rem; margin-bottom: 1.1rem; }
.af-block__title { font-weight: 700; font-size: var(--fs-lead); margin-bottom: .8rem; display: block; }

.af-methods { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
@media (max-width: 900px) { .af-methods { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .af-methods { grid-template-columns: 1fr; } }
.af-method { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; text-align: left; padding: .85rem; border: 1.5px solid var(--border); border-radius: var(--radius); background: var(--surface-2); cursor: pointer; transition: border-color .15s, background .15s; position: relative; }
.af-method:hover { border-color: color-mix(in srgb, var(--primary) 50%, var(--border)); }
.af-method.is-active { border-color: var(--primary); background: var(--primary-soft); }
.af-method__badge { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; color: #fff; font-size: 1.1rem; flex-shrink: 0; overflow: hidden; }
.af-method__badge--img { background: #fff; padding: 6px; }
.af-method__badge--img img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.af-method__badge--txt { font-size: .82rem; font-weight: 800; letter-spacing: .3px; }
.af-method__body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; width: 100%; }
.af-method__name { font-weight: 700; color: var(--text); font-size: .9rem; line-height: 1.3; }
.af-method__sub { font-size: var(--fs-caption); color: var(--success); display: inline-flex; align-items: center; gap: .3rem; }
.af-method__bonus { position: absolute; top: .7rem; right: .7rem; background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); font-weight: 800; font-size: var(--fs-caption); padding: .12rem .5rem; border-radius: var(--radius-pill); }
.af-method__radio { display: none; }
.af-method.is-active .af-method__radio { border-color: var(--primary); }
.af-method.is-active .af-method__radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--primary); }
.af-select--hidden { display: none; }

.af-bonus { background: color-mix(in srgb, var(--success) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--success) 30%, var(--border)); border-radius: var(--radius-lg); padding: 1rem 1.15rem; margin-bottom: 1.1rem; }
.af-bonus__title { font-weight: 700; color: var(--success); display: flex; align-items: center; gap: .45rem; margin-bottom: .65rem; }
.af-bonus__tiers { display: flex; flex-direction: column; gap: .4rem; }
.af-bonus__tier { display: flex; justify-content: space-between; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .5rem .8rem; font-size: var(--fs-sm); }
.af-bonus__tier b { color: var(--success); }

.af-quick { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .7rem; }
.af-quick button { flex: 1; min-width: 60px; padding: .55rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); color: var(--text); font-weight: 700; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.af-quick button:hover { border-color: var(--primary); color: var(--primary); }
.af-quick button.is-active { background: var(--primary); border-color: var(--primary); color: var(--primary-contrast); }
/* wadah jumlah: 1 input (IDR) ATAU konversi bawaan PerfectPanel (IDR + ⇄ + USD) -> sejajarkan rapi */
#amount-fields { display: flex; align-items: flex-end; gap: .55rem; flex-wrap: wrap; }
#amount-fields > * { margin: 0; min-width: 0; }
#amount-fields > div { flex: 1 1 150px; }
#amount-fields > *:not(div) { flex: 0 0 auto; align-self: center; color: var(--text-muted); }   /* panah tukar (i/span) */
#amount-fields > div:not(:first-child):not(:last-child) { flex: 0 0 auto; align-self: center; } /* atau panah berupa div di tengah */
#amount-fields input, #amount-fields .form-control { width: 100%; }
#amount-fields label, #amount-fields .control-label { display: block; font-size: var(--fs-caption); color: var(--text-2); font-weight: 600; margin: 0 0 .3rem; }
.af-est { margin-top: .65rem; display: flex; flex-direction: column; gap: .2rem; background: var(--surface-2); border-radius: var(--radius); padding: .6rem .8rem; font-size: var(--fs-sm); }
.af-est__b { color: var(--success); font-weight: 700; display: inline-flex; align-items: center; gap: .35rem; }
.af-est__t b { font-family: var(--font-mono); }
.af-est__none { color: var(--text-muted); }
.af-submit { margin-top: .3rem; font-size: var(--fs-lead); padding: .75rem; }

.af-petunjuk__title { font-weight: 700; margin-bottom: .5rem; color: var(--text); }

.af-history { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.1rem 1.15rem; }
.af-history__title { font-weight: 700; font-size: var(--fs-lead); margin-bottom: .8rem; }
.af-history__scroll { overflow-x: auto; }
.af-history__table { margin: 0; }
.af-history__table th { font-size: var(--fs-caption); color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.af-h-id { font-family: var(--font-mono); color: var(--text-2); }
.af-h-amt { font-weight: 700; }
.af-h-method { display: block; font-size: var(--fs-caption); color: var(--text-muted); font-weight: 500; text-transform: uppercase; }
.af-h-date { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--fs-caption); }
.af-h-inv { font-size: var(--fs-sm); }
.af-status { font-size: var(--fs-caption); font-weight: 700; padding: .15rem .55rem; border-radius: var(--radius-pill); white-space: nowrap; background: var(--surface-2); color: var(--text-2); }
.af-status[data-status*="setuj"], .af-status[data-status*="approv"], .af-status[data-status*="success"], .af-status[data-status*="paid"] { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
.af-status[data-status*="nunggu"], .af-status[data-status*="pending"], .af-status[data-status*="proses"] { background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning); }
.af-status[data-status*="tolak"], .af-status[data-status*="reject"], .af-status[data-status*="gagal"], .af-status[data-status*="fail"], .af-status[data-status*="batal"], .af-status[data-status*="cancel"] { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }

/* ============ Mass Order (tab Simple / Classic) ============ */
.massorder-page { max-width: 760px; margin: 0 auto; }
/* paksa atribut [hidden] menang atas .form-control{display:block} bawaan Bootstrap
   (kalau tidak, input ID fallback & pane Classic bisa bocor tampil) */
.massorder-page [hidden] { display: none !important; }
.mo-head h2 { font-size: var(--fs-h2); font-weight: 800; margin: 0 0 .15rem; }
.mo-head p { color: var(--text-2); margin: 0 0 1.1rem; }
.mo-tabs { display: inline-flex; gap: .25rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: .25rem; margin-bottom: 1.1rem; }
.mo-tab { border: 0; background: transparent; color: var(--text-2); font-weight: 700; font-size: var(--fs-sm); padding: .5rem 1.2rem; border-radius: var(--radius-pill); cursor: pointer; display: inline-flex; align-items: center; gap: .45rem; transition: background .15s, color .15s; }
.mo-tab:hover { color: var(--text); }
.mo-tab.is-active { background: var(--primary); color: var(--primary-contrast); box-shadow: var(--glow); }
/* langkah bernomor */
.mo-step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.05rem 1.15rem; margin-bottom: 1rem; }
.mo-step__h { display: flex; align-items: center; gap: .6rem; font-weight: 700; margin-bottom: .7rem; }
.mo-step__n { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--primary); color: var(--primary-contrast); font-size: var(--fs-caption); font-weight: 800; flex: 0 0 auto; }
.mo-step .form-control { width: 100%; }
.mo-step textarea { resize: vertical; font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 1.6; }
.mo-step code { background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: .1rem .4rem; font-family: var(--font-mono); color: var(--primary); }
.mo-hint { color: var(--text-muted); font-weight: 400; font-size: var(--fs-caption); }
/* combobox custom (Kategori / Layanan) dengan search */
.mo-combo { position: relative; }
.mo-combo__btn { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; text-align: left; cursor: pointer; }
.mo-combo__btn[disabled] { opacity: .6; cursor: not-allowed; }
.mo-combo__btn > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mo-combo__caret { color: var(--text-muted); flex: 0 0 auto; transition: transform .15s; }
.mo-combo__btn[aria-expanded="true"] .mo-combo__caret { transform: rotate(180deg); }
.mo-combo__pop { position: absolute; left: 0; right: 0; top: calc(100% + 5px); z-index: 60; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; }
.mo-combo__searchwrap { display: flex; align-items: center; gap: .5rem; padding: .55rem .75rem; border-bottom: 1px solid var(--border); color: var(--text-muted); }
.mo-combo__search { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); outline: none; font-size: var(--fs-sm); }
.mo-combo__list { list-style: none; margin: 0; padding: .3rem; max-height: 260px; overflow-y: auto; }
.mo-combo__opt { padding: .5rem .6rem; border-radius: var(--radius); cursor: pointer; font-size: var(--fs-sm); line-height: 1.4; }
.mo-combo__opt:hover { background: var(--primary-soft); }
.mo-combo__opt b { color: var(--primary); font-family: var(--font-mono); margin-right: .1rem; }
[data-theme="light"] .mo-combo__opt b { color: var(--primary-strong); }
.mo-opt-price { color: var(--text-muted); white-space: nowrap; }
.mo-combo__empty { padding: .8rem; text-align: center; color: var(--text-muted); font-size: var(--fs-sm); }
/* kotak Cari layanan global (standalone, seperti single order) */
.mo-search { position: relative; display: flex; align-items: center; gap: .6rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0 .9rem; margin-bottom: 1rem; box-shadow: var(--shadow-sm); }
.mo-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.mo-search > .fa-search { color: var(--text-muted); flex: 0 0 auto; }
.mo-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); outline: none; padding: .85rem 0; font-size: var(--fs-body); }
.mo-search input:disabled { cursor: not-allowed; }
.mo-search__results { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); max-height: 320px; overflow-y: auto; padding: .3rem; }
.mo-opt-cat { color: var(--text-muted); font-size: var(--fs-caption); }
.mo-minmax { font-size: var(--fs-caption); color: var(--text-muted); margin-top: .45rem; }
.mo-minmax b { color: var(--text-2); }
.mo-count { margin-left: auto; font-size: var(--fs-caption); font-weight: 700; color: var(--primary); background: var(--primary-soft); padding: .15rem .6rem; border-radius: var(--radius-pill); }
.mo-manual-note { font-size: var(--fs-caption); color: var(--warning); margin-top: .5rem; }
/* kartu total */
.mo-total { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: .25rem 1.15rem; margin-bottom: 1rem; }
.mo-total__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .65rem 0; font-size: var(--fs-sm); border-bottom: 1px solid var(--border); }
.mo-total__row:last-child { border-bottom: 0; }
.mo-total__row span { color: var(--text-2); }
.mo-total__row small { color: var(--text-muted); }
.mo-total__row b { font-weight: 700; text-align: right; word-break: break-word; }
.mo-total__row--pay span { color: var(--text); font-weight: 700; }
.mo-total__row--pay b { color: var(--warning); font-size: var(--fs-h4); font-weight: 800; }
/* align-items:flex-start (dulu center): isinya kini bisa beberapa baris + tombol, ikonnya harus
   tetap sejajar baris pertama, bukan melayang di tengah blok. */
.mo-err { display: flex; align-items: flex-start; gap: .45rem; background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); border-radius: var(--radius); padding: .6rem .85rem; font-size: var(--fs-sm); font-weight: 600; line-height: 1.5; margin-bottom: .8rem; }
.mo-err > i { flex: 0 0 auto; margin-top: .2rem; }
.mo-err > span { min-width: 0; font-weight: 500; }
.mo-err > span b { font-weight: 800; }
/* varian PERINGATAN (duplikat): kuning, bukan merah — ordernya belum gagal, masih bisa dibetulkan */
.mo-err--warn { background: color-mix(in srgb, var(--warning) 14%, transparent); color: var(--warning); }
[data-theme="light"] .mo-err--warn { color: #9A6100; }
.mo-err__fix { display: inline-flex; align-items: center; gap: .35rem; margin-left: .45rem; padding: .18rem .6rem; border: 1px solid currentColor; border-radius: var(--radius-pill); background: transparent; color: inherit; font: inherit; font-weight: 700; cursor: pointer; transition: background .15s, color .15s; }
/* JANGAN `background: currentColor` + `color: ...` di aturan yang sama: currentColor memakai
   nilai color yang BARU, jadi latar dan teks jadi warna yang sama alias tombolnya hilang. */
.mo-err__fix:hover { background: color-mix(in srgb, currentColor 20%, transparent); }
.mo-err__note { display: block; margin-top: .3rem; font-style: normal; font-weight: 600; opacity: .85; }
/* daftar "kenapa gagal" di dalam alert bawaan panel (mass-order.twig) */
.mo-alert-why { margin-top: .5rem; padding-top: .5rem; border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent); font-weight: 500; font-size: var(--fs-sm); line-height: 1.55; }
.mo-alert-why > b { display: block; margin-bottom: .25rem; font-weight: 700; }
.mo-alert-why ul { margin: 0; padding-left: 1.15rem; }
.mo-alert-why li { margin: .12rem 0; }
.mo-alert-why code { font-family: var(--font-mono); font-size: .92em; padding: .05rem .3rem; border-radius: 4px; background: color-mix(in srgb, currentColor 12%, transparent); }
.mo-submit { width: 100%; font-size: var(--fs-lead); padding: .8rem; display: flex; align-items: center; justify-content: center; gap: .5rem; }

/* ===================================================================
   Blog: grid kartu responsif (PC 3 / tablet 2 / HP 1). Semua warna pakai
   CSS var -> otomatis ngikut light & dark mode.
   =================================================================== */
.psmm-blog-wrap { max-width: 1180px; margin: 0 auto; }
.psmm-blog-wrap + .psmm-blog-wrap { margin-top: 1.25rem; }
.psmm-blog-intro { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 1.1rem 1.25rem; color: var(--text-2); }
.psmm-blog-intro h1, .psmm-blog-intro h2, .psmm-blog-intro h3, .psmm-blog-intro h4 { color: var(--text); margin-top: 0; }
.psmm-blog-intro a { color: var(--primary); }

/* flex (bukan grid) + justify-center -> baris terakhir yg ga penuh (mis. 10 post = 3+3+3+1) kartunya KE-TENGAH, ga lonjong ke kiri */
/* Post PINNED — kartu full-width (gambar kiri + teks kanan) di paling atas blog, semua halaman */
.psmm-blog-featured { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1rem, 3vw, 2.2rem); align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(1rem, 2.4vw, 1.5rem); margin-bottom: 1.4rem; box-shadow: var(--shadow-sm); }
.psmm-blog-featured__thumb { display: block; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); }
.psmm-blog-featured__thumb img { width: 100%; height: auto; display: block; }
.psmm-blog-featured__body { min-width: 0; }
.psmm-blog-featured__badge { display: inline-flex; align-items: center; gap: .35rem; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--gold-ink); background: var(--gold-soft); border: 1px solid var(--gold-border); border-radius: var(--radius-pill); padding: .26rem .6rem; margin-bottom: .75rem; }
.psmm-blog-featured__title { font-size: clamp(1.3rem, 1rem + 1.5vw, 1.95rem); font-weight: 800; line-height: 1.2; margin: 0 0 .7rem; }
.psmm-blog-featured__title a { color: var(--text); text-decoration: none; }
.psmm-blog-featured__title a:hover { color: var(--primary); }
.psmm-blog-featured__excerpt { color: var(--text-2); font-size: 1rem; line-height: 1.6; margin: 0 0 1.15rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.psmm-blog-featured__more { display: inline-flex; align-items: center; gap: .45rem; background: var(--primary); color: var(--primary-contrast); font-weight: 700; padding: .6rem 1.3rem; border-radius: var(--radius-pill); text-decoration: none; box-shadow: var(--glow); transition: filter .15s; }
.psmm-blog-featured__more:hover { filter: brightness(1.07); color: var(--primary-contrast); }
@media (max-width: 768px) { .psmm-blog-featured { grid-template-columns: 1fr; gap: 1rem; } }

.psmm-blog-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.1rem; }
.psmm-blog-grid > .psmm-blog-card { flex: 0 1 calc((100% - 2.2rem) / 3); }   /* 3 kolom di PC (featured ambil 1 slot -> grid 9 = 3x3 rapi) */
@media (max-width: 992px) { .psmm-blog-grid > .psmm-blog-card { flex-basis: calc((100% - 1.1rem) / 2); } }
@media (max-width: 640px)  { .psmm-blog-grid > .psmm-blog-card { flex-basis: 100%; } }

.psmm-blog-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.psmm-blog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.psmm-blog-card__thumb { display: block; aspect-ratio: 16 / 9; background: var(--surface-2); overflow: hidden; }
.psmm-blog-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.psmm-blog-card:hover .psmm-blog-card__thumb img { transform: scale(1.045); }
.psmm-blog-card__ph { display: grid; place-items: center; width: 100%; height: 100%; color: var(--text-muted); font-size: 2rem; }
.psmm-blog-card__body { display: flex; flex-direction: column; gap: .5rem; padding: .9rem 1rem 1rem; flex: 1; }
.psmm-blog-card__title { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.psmm-blog-card__title a { color: var(--text); text-decoration: none; }
.psmm-blog-card__title a:hover { color: var(--primary); }
.psmm-blog-card__excerpt { margin: 0; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.55; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.psmm-blog-card__more { align-self: flex-start; margin-top: .4rem; display: inline-flex; align-items: center; gap: .4rem; padding: .42rem .9rem; border-radius: var(--radius-pill); background: var(--primary); color: var(--primary-contrast); font-weight: 700; font-size: var(--fs-sm); text-decoration: none; transition: background .15s ease, transform .12s ease, box-shadow .15s ease; }
.psmm-blog-card__more:hover { background: var(--primary-strong); color: var(--primary-contrast); transform: translateX(2px); box-shadow: var(--glow); }
.psmm-blog-card__more i { font-size: .85em; }

/* pagination blog -> ikut tema (light & dark) + selalu di tengah */
.psmm-blog-pagination { display: flex; justify-content: center; margin-top: 1.6rem; }
.psmm-blog-pagination .pagination { margin: 0; display: inline-flex; flex-wrap: wrap; justify-content: center; gap: .3rem; }
.psmm-blog-pagination .pagination > li > a, .psmm-blog-pagination .pagination > li > span { color: var(--text-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .45rem .8rem; min-width: 40px; text-align: center; }
.psmm-blog-pagination .pagination > li > a:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); }
.psmm-blog-pagination .pagination > li.active > a, .psmm-blog-pagination .pagination > li.active > span { background: var(--primary); border-color: var(--primary); color: var(--primary-contrast); }

/* ===== TG/WA float: ambil alih widget asli -> container sendiri di KANAN, persis di atas Crisp (PC & mobile) ===== */
[class*="integration-fixed"], .bottom-left, .bottom-right { display: none !important; }   /* widget TG/WA asli (semua posisi/variasi class) disembunyiin -> diganti #psmmFloatbar. Clone-nya (.telegram-button/.whatsapp-button di #psmmFloatbar) ga kena krn ga ber-class integration-fixed */
/* PC: posisi FIXED & cukup tinggi biar JELAS di atas tombol Crisp (stabil, ga ngikut Crisp). */
#psmmFloatbar { position: fixed; right: 22px; bottom: 104px; display: none; flex-direction: column; gap: 10px; z-index: 1080; }
@media (max-width: 992px) { #psmmFloatbar { right: 16px; bottom: calc(var(--nav-h, 64px) + 84px + env(safe-area-inset-bottom, 0px)); } }   /* fallback DINAIKIN -> clear Crisp meski JS belum ketemu launcher-nya */
/* tombol TG/WA dibangun sendiri (BUKAN clone widget) -> ga ada kotak putih / numpuk; warna, ukuran & jarak full kendali kita */
.psmm-float { width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.28); transition: transform .15s ease, box-shadow .15s ease; -webkit-tap-highlight-color: transparent; }
.psmm-float svg { width: 54%; height: 54%; fill: #fff; display: block; }
.psmm-float--tg { background: #229ED9; }   /* telegram blue */
.psmm-float--wa { background: #25D366; }   /* whatsapp green */
.psmm-float:hover, .psmm-float:focus { transform: scale(1.08); box-shadow: 0 6px 18px rgba(0,0,0,.34); color: #fff; }
.psmm-float:active { transform: scale(.96); }

/* ============================================================================
   MONITOR EMBED — halaman /monitor: tampilin monitoring.providersmm.id LIVE
   di dalam iframe full-tinggi (tinggi presisi diatur JS monitor-embed).
   ========================================================================== */
.psmm-monitor-embed { margin: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm); }
.psmm-monitor-embed iframe { display: block; width: 100%; height: calc(100vh - 220px); min-height: 420px; border: 0; }

/* ==========================================================================
   /sewa — landing pre-sell "Sewa Panel" (custom page). Konten = _PASTE-ke-sewa.html.
   CTA utama = WhatsApp; sekunder = bisnissmm. Pakai token brand (auto light/dark).
   ========================================================================== */
.sewa-page { max-width: 980px; margin: 0 auto; padding: 1rem .25rem 2.5rem; display: flex; flex-direction: column; gap: 2.4rem; color: var(--text); }
.sewa-page *, .sewa-page *::before, .sewa-page *::after { box-sizing: border-box; }
/* hero */
.sewa-hero { background: var(--primary-soft); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 2rem 1.25rem; display: grid; gap: 1.6rem; align-items: center; }
.sewa-hero__copy { text-align: center; }
.sewa-hero__visual { display: flex; flex-direction: column; align-items: center; gap: .75rem; min-width: 0; }   /* mock + pill demo di bawahnya (kolom kanan) — biar kolom kiri ga numpuk */
a.sewa-mock-link { display: block; width: 100%; max-width: 400px; text-decoration: none; color: inherit; }
a.sewa-mock-link:hover .sewa-mock, a.sewa-mock-link:focus .sewa-mock { border-color: var(--primary); }
.sewa-hero > .sewa-stats { grid-column: 1 / -1; justify-content: center; margin-top: .2rem; padding-top: 1.25rem; border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent); }   /* stats FULL-WIDTH di bawah 2 kolom (proporsional kiri-kanan) */
@media (min-width: 780px) {
  .sewa-hero { grid-template-columns: 1.05fr .95fr; padding: 2.6rem 2.2rem; gap: 2rem; }
  .sewa-hero__copy { text-align: left; }
  .sewa-hero__copy .sewa-hero__sub { margin-left: 0; margin-right: 0; }
  .sewa-hero__copy .sewa-cta { justify-content: flex-start; }
}
.sewa-eyebrow { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-caption); font-weight: 700; color: var(--gold-ink); background: var(--gold-soft); border: 1px solid var(--gold-border); padding: .3rem .8rem; border-radius: var(--radius-pill); margin-bottom: 1rem; }
.sewa-hero__title { font-size: var(--fs-h1); font-weight: 800; line-height: 1.08; letter-spacing: -.01em; margin: 0 0 .8rem; }
.sewa-hl { color: var(--primary); }
.sewa-hero__sub { font-size: var(--fs-lead); line-height: 1.55; color: var(--text-2); max-width: 620px; margin: 0 auto 1.4rem; }
.sewa-cta { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }
.sewa-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .82rem 1.4rem; border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: 700; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform .12s ease, background .15s ease, box-shadow .15s ease, color .15s ease; white-space: nowrap; }
.sewa-btn:hover { transform: translateY(-2px); }
.sewa-btn--wa { background: #25D366; color: #04240F; box-shadow: 0 6px 18px rgba(37,211,102,.32); }
.sewa-btn--wa:hover { background: #21c15e; }
.sewa-btn--ghost { background: transparent; border-color: var(--primary); color: var(--primary); }
.sewa-btn--ghost:hover { background: var(--primary); color: var(--primary-contrast); }
.sewa-chips { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 1.3rem; }
.sewa-chip { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-caption); font-weight: 600; color: var(--text-2); background: var(--surface); border: 1px solid var(--border); padding: .34rem .7rem; border-radius: var(--radius-pill); }
.sewa-chip > i { color: var(--success); }
/* section */
.sewa-sec { text-align: center; }
.sewa-h2 { font-size: var(--fs-h2); font-weight: 800; line-height: 1.15; margin: 0 0 .5rem; }
.sewa-lead { font-size: var(--fs-body); color: var(--text-2); max-width: 560px; margin: 0 auto 1.5rem; line-height: 1.55; }
.sewa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .9rem; margin-top: 1.2rem; }
/* benefit cards */
.sewa-card { text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem 1.2rem; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.sewa-card:hover { transform: translateY(-3px); border-color: var(--primary); box-shadow: var(--shadow-md); }
.sewa-card__ic { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 13px; background: var(--primary-soft); color: var(--primary); font-size: 1.25rem; margin-bottom: .8rem; }
.sewa-card__t { font-size: var(--fs-h4); font-weight: 700; margin: 0 0 .35rem; }
.sewa-card__d { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.55; margin: 0; }
/* steps — kartu ala "how it works" bisnissmm: ikon tile warna + NOMOR GHOST gede pojok kanan (user 2026-07-10) */
.sewa-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .9rem; margin-top: 1.2rem; text-align: left; }
.sewa-step { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.15rem 1.1rem 1.2rem; overflow: hidden; }
.sewa-step__n { position: absolute; top: .3rem; right: .75rem; font-size: 2.7rem; font-weight: 800; line-height: 1; color: var(--text-muted); opacity: .22; }
.sewa-step__ic { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; font-size: 1.05rem; background: var(--primary-soft); color: var(--primary); }
.sewa-step:nth-child(2) .sewa-step__ic { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.sewa-step:nth-child(3) .sewa-step__ic { background: color-mix(in srgb, #8B7CF0 16%, transparent); color: #8B7CF0; }
.sewa-step:nth-child(4) .sewa-step__ic { background: var(--gold-soft); color: var(--gold-ink); }
.sewa-step__t { font-size: var(--fs-sm); font-weight: 800; margin: .1rem 0 0; }
.sewa-step__d { font-size: var(--fs-caption); color: var(--text-2); line-height: 1.55; margin: 0; }
/* header section rata kiri (Cara Kerja — niru layout bisnissmm) */
.sewa-sec--left { text-align: left; }
.sewa-sec--left .sewa-lead { margin: 0 0 .4rem; max-width: 600px; }
.sewa-sec-eyebrow { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-caption); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); margin-bottom: .4rem; }
/* paket (tanpa harga) */
.sewa-grid--pkg { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); align-items: stretch; }
.sewa-pkg { position: relative; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.4rem 1.2rem 1.3rem; display: flex; flex-direction: column; }
.sewa-pkg--pop { border: 2px solid var(--primary); background: var(--primary-soft); }
.sewa-pkg__badge { position: absolute; top: -.7rem; left: 1.2rem; background: var(--gold); color: #3d2600; font-size: var(--fs-caption); font-weight: 800; padding: .2rem .7rem; border-radius: var(--radius-pill); }
.sewa-pkg__name { font-size: 1.35rem; font-weight: 800; }
.sewa-pkg__tag { font-size: var(--fs-caption); color: var(--text-2); margin: .1rem 0 .85rem; }
.sewa-pkg__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.sewa-pkg__list li { display: flex; align-items: flex-start; gap: .5rem; font-size: var(--fs-sm); color: var(--text); }
.sewa-pkg__list li > i { color: var(--primary); margin-top: .25rem; flex: 0 0 auto; font-size: .78rem; }
.sewa-note { font-size: var(--fs-sm); color: var(--text-2); margin-top: 1.1rem; display: inline-flex; align-items: center; gap: .4rem; }
.sewa-note > i { color: var(--primary); }
/* faq (CSS-only) */
.sewa-faq { text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-top: .6rem; overflow: hidden; }
.sewa-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .95rem 1.1rem; font-weight: 700; font-size: var(--fs-sm); }
.sewa-faq summary::-webkit-details-marker { display: none; }
.sewa-faq summary > i { color: var(--primary); transition: transform .2s ease; flex: 0 0 auto; }
.sewa-faq[open] summary > i { transform: rotate(180deg); }
.sewa-faq > p { margin: 0; padding: 0 1.1rem 1rem; font-size: var(--fs-sm); color: var(--text-2); line-height: 1.6; }
/* closing CTA */
.sewa-final { text-align: center; background: var(--primary); color: #052a38; border-radius: var(--radius-xl); padding: 2.3rem 1.25rem; }
.sewa-final__t { font-size: var(--fs-h2); font-weight: 800; margin: 0 0 .5rem; color: #052a38; }
.sewa-final__d { font-size: var(--fs-body); line-height: 1.55; margin: 0 auto 1.4rem; max-width: 540px; color: #063445; }
.sewa-final .sewa-btn--ghost { background: #fff; border-color: #fff; color: var(--primary-strong); }
.sewa-final .sewa-btn--ghost:hover { background: rgba(255,255,255,.88); color: var(--primary-strong); }
/* --- /sewa v2: stat row hero, Sebelum-vs-Sesudah, satu paket, trust --- */
.sewa-stats{ display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem 1.4rem; margin-top:1.6rem; }
.sewa-stat{ display:flex; flex-direction:column; align-items:center; line-height:1.15; }
.sewa-stat b{ font-size:1.35rem; font-weight:800; color:var(--primary); }
.sewa-stat span{ font-size:var(--fs-caption); color:var(--text-2); margin-top:.15rem; }
/* sebelum vs sesudah */
.sewa-vs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem; margin-top:1.3rem; text-align:left; }
.sewa-vs__col{ border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.25rem 1.25rem 1.35rem; background:var(--surface); }
.sewa-vs__col--bad{ background:color-mix(in srgb, var(--danger, #E5484D) 6%, var(--surface)); border-color:color-mix(in srgb, var(--danger, #E5484D) 26%, var(--border)); }
.sewa-vs__col--good{ background:var(--primary-soft); border-color:color-mix(in srgb, var(--primary) 34%, var(--border)); }
.sewa-vs__head{ display:flex; align-items:center; gap:.5rem; font-size:var(--fs-h4); font-weight:800; margin-bottom:.9rem; }
.sewa-vs__col--bad .sewa-vs__head{ color:var(--danger, #E5484D); }
.sewa-vs__col--good .sewa-vs__head{ color:var(--primary-strong); }
.sewa-vs__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.sewa-vs__list li{ position:relative; padding-left:1.6rem; font-size:var(--fs-sm); line-height:1.5; color:var(--text); }
.sewa-vs__list li::before{ position:absolute; left:0; top:0; font-weight:800; }
.sewa-vs__col--bad .sewa-vs__list li::before{ content:"\00D7"; color:var(--danger, #E5484D); font-size:1.1rem; line-height:1.35; }
.sewa-vs__col--good .sewa-vs__list li::before{ content:"\2713"; color:var(--success); }
/* satu paket */
.sewa-plan{ max-width:620px; margin:0 auto; text-align:center; background:var(--surface); border:2px solid var(--primary); border-radius:var(--radius-xl); padding:2.1rem 1.5rem 1.8rem; box-shadow:var(--shadow-md); }
.sewa-plan__badge{ display:inline-flex; align-items:center; gap:.35rem; font-size:var(--fs-caption); font-weight:800; color:var(--primary-contrast); background:var(--primary); padding:.3rem .85rem; border-radius:var(--pill,999px); margin-bottom:1rem; }
.sewa-plan__title{ font-size:var(--fs-h3); font-weight:800; margin:0 0 .4rem; }
.sewa-plan__sub{ font-size:var(--fs-sm); color:var(--text-2); margin:0 auto 1.3rem; max-width:440px; line-height:1.55; }
.sewa-plan__list{ list-style:none; margin:0 auto 1.5rem; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:.6rem .9rem; text-align:left; max-width:520px; }
.sewa-plan__list li{ display:flex; align-items:flex-start; gap:.5rem; font-size:var(--fs-sm); color:var(--text); }
.sewa-plan__list li > i{ color:var(--primary); margin-top:.25rem; flex:0 0 auto; font-size:.78rem; }
.sewa-plan__note{ font-size:var(--fs-caption); color:var(--text-2); margin:1rem auto 0; max-width:420px; line-height:1.5; }
/* trust (horizontal card) */
.sewa-grid--trust{ grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.sewa-trust{ display:flex; align-items:flex-start; gap:.8rem; text-align:left; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.2rem 1.15rem; }
.sewa-trust__ic{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:12px; background:var(--gold-soft); color:var(--gold-ink); font-size:1.15rem; }
.sewa-trust__t{ font-size:var(--fs-sm); font-weight:800; margin:.1rem 0 .25rem; }
.sewa-trust__d{ font-size:var(--fs-caption); color:var(--text-2); line-height:1.55; margin:0; }
/* --- /sewa v3: mockup dashboard, spotlight fitur unik (monitor + bukti pengerjaan) --- */
/* hero dashboard mockup */
.sewa-mock { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; }
.sewa-mock__bar { display: flex; align-items: center; gap: .4rem; padding: .55rem .8rem; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.sewa-mock__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-2, var(--border)); }
.sewa-mock__dot:nth-child(1){ background: #f6685e; } .sewa-mock__dot:nth-child(2){ background: #f9bd2e; } .sewa-mock__dot:nth-child(3){ background: #61c554; }
.sewa-mock__url { margin-left: .3rem; font-family: var(--font-mono, monospace); font-size: var(--fs-caption); color: var(--text-muted); display: inline-flex; align-items: center; gap: .3rem; }
.sewa-mock__body { padding: .85rem; }
.sewa-mock__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.sewa-mock__tile { background: var(--primary-soft); border-radius: var(--radius); padding: .6rem .7rem; }
.sewa-mock__tile span { display: block; font-size: var(--fs-caption); color: var(--text-2); }
.sewa-mock__tile b { display: block; font-size: 1.02rem; font-weight: 800; color: var(--text); margin-top: .1rem; }
.sewa-mock__chart { color: var(--primary); margin-top: .7rem; height: 78px; }
.sewa-mock__chart svg { width: 100%; height: 100%; display: block; }
/* spotlight (2 kolom copy + visual, alternating) */
.sewa-spot { display: grid; gap: 1.4rem; align-items: center; }
.sewa-spot__copy { text-align: left; }
.sewa-spot__visual { display: flex; justify-content: center; min-width: 0; }
.sewa-badge-uniq { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-caption); font-weight: 800; color: var(--gold-ink); background: var(--gold-soft); border: 1px solid var(--gold-border); padding: .32rem .85rem; border-radius: var(--radius-pill); margin-bottom: .9rem; }
.sewa-spot__t { font-size: var(--fs-h2); font-weight: 800; line-height: 1.15; margin: 0 0 .6rem; }
.sewa-spot__d { font-size: var(--fs-body); color: var(--text-2); line-height: 1.6; margin: 0 0 1rem; }
.sewa-spot__d b { color: var(--text); font-weight: 700; }
.sewa-spot__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.sewa-spot__list li { display: flex; align-items: flex-start; gap: .5rem; font-size: var(--fs-sm); color: var(--text); }
.sewa-spot__list li > i { color: var(--success); margin-top: .2rem; flex: 0 0 auto; font-size: .82rem; }
@media (min-width: 780px) {
  .sewa-spot { grid-template-columns: 1fr 1fr; gap: 2.3rem; }
  .sewa-spot--rev .sewa-spot__copy { order: 2; } .sewa-spot--rev .sewa-spot__visual { order: 1; }
}
/* monitor mockup (drop rate) */
.sewa-monitor { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 1.15rem 1.2rem 1.25rem; }
.sewa-monitor__top { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; }
.sewa-monitor__pct { font-size: 2.2rem; font-weight: 800; color: var(--success); line-height: 1; }
.sewa-monitor__tag { font-size: var(--fs-caption); font-weight: 800; color: var(--success); background: color-mix(in srgb, var(--success) 15%, transparent); padding: .18rem .6rem; border-radius: var(--radius-pill); }
.sewa-monitor__cap { margin-left: auto; font-size: var(--fs-caption); color: var(--text-muted); }
.sewa-monitor__bar { height: 10px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--danger, #E5484D) 32%, var(--surface-2)); overflow: hidden; margin: .9rem 0 1rem; }
.sewa-monitor__bar > span { display: block; height: 100%; background: var(--success); border-radius: var(--radius-pill); }
.sewa-monitor__tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.sewa-mt { background: var(--surface-2); border-radius: var(--radius); padding: .55rem .3rem; text-align: center; }
.sewa-mt b { display: block; font-size: 1.02rem; font-weight: 800; line-height: 1.1; }
.sewa-mt span { display: block; font-size: .68rem; color: var(--text-2); margin-top: .15rem; }
.sewa-mt--good b { color: var(--success); } .sewa-mt--warn b { color: var(--warning, #E0A00E); } .sewa-mt--info b { color: var(--primary); } .sewa-mt--bad b { color: var(--danger, #E5484D); }
/* proof-of-work mockup */
.sewa-proof { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: .7rem; }
.sewa-proof__row { display: flex; align-items: center; justify-content: space-between; gap: .7rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: .85rem 1rem; }
.sewa-proof__svc { min-width: 0; }
.sewa-proof__svc b { display: block; font-size: var(--fs-sm); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sewa-proof__done { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--fs-caption); font-weight: 700; color: var(--success); margin-top: .2rem; }
.sewa-proof__btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-caption); font-weight: 800; color: var(--primary-contrast); background: var(--primary); padding: .5rem .8rem; border-radius: var(--radius-pill); }
.sewa-proof__pop { background: var(--surface); border: 1px solid var(--primary); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: .9rem 1rem; margin-left: 1.4rem; position: relative; }
.sewa-proof__pop::before { content: ""; position: absolute; top: -7px; right: 26px; width: 12px; height: 12px; background: var(--surface); border-left: 1px solid var(--primary); border-top: 1px solid var(--primary); transform: rotate(45deg); }
.sewa-proof__pop-h { display: flex; align-items: center; gap: .45rem; font-size: var(--fs-sm); font-weight: 800; color: var(--text); }
.sewa-proof__pop-h > i { color: var(--primary); }
.sewa-proof__lines { display: flex; flex-direction: column; gap: .4rem; margin: .7rem 0; }
.sewa-proof__lines span { height: 8px; border-radius: 4px; background: var(--surface-3, var(--surface-2)); }
.sewa-proof__lines span:nth-child(1){ width: 90%; } .sewa-proof__lines span:nth-child(2){ width: 100%; } .sewa-proof__lines span:nth-child(3){ width: 65%; }
.sewa-proof__fmt { display: flex; gap: .5rem; }
.sewa-proof__fmt span { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--fs-caption); font-weight: 700; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); padding: .25rem .6rem; border-radius: var(--radius-pill); }
/* --- /sewa v4: hover fix, grid 3 kolom, demo live, strip demo di mockup (user 2026-07-10) --- */
/* FIX hover tombol: rule global `a:hover` (Bootstrap/panel) menang dari .sewa-btn -> teks tombol hijau jadi biru ga kebaca. Kunci warna eksplisit dgn selektor a.* (specificity menang). */
a.sewa-btn, a.sewa-btn:hover, a.sewa-btn:focus { text-decoration: none; }
a.sewa-btn--wa, a.sewa-btn--wa:hover, a.sewa-btn--wa:focus { color: #04240F; }
a.sewa-btn--ghost:hover, a.sewa-btn--ghost:focus { background: var(--primary); color: var(--primary-contrast); }
.sewa-final a.sewa-btn--ghost, .sewa-final a.sewa-btn--ghost:hover, .sewa-final a.sewa-btn--ghost:focus { color: var(--primary-strong); }
/* fitur "Plus, Semua Fitur Lengkapnya": 3 kolom rapi di layar lebar (6 kartu = 3x2, jangan 4+2) */
@media (min-width: 900px) { .sewa-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* pill link DEMO live (customer & admin) di hero */
.sewa-demos { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: .8rem; }
.sewa-demo { display: inline-flex; align-items: center; gap: .45rem; font-size: var(--fs-caption); font-weight: 700; color: var(--text-2); background: var(--surface); border: 1px solid var(--border); padding: .42rem .85rem; border-radius: var(--radius-pill); text-decoration: none; transition: border-color .15s ease, color .15s ease; }
.sewa-demo > i { color: var(--primary); }
.sewa-demo b { font-weight: 800; color: var(--text); }
a.sewa-demo:hover, a.sewa-demo:focus { border-color: var(--primary); color: var(--primary); text-decoration: none; }
a.sewa-demo:hover b, a.sewa-demo:focus b { color: var(--primary); }
@media (min-width: 780px) { .sewa-hero__copy .sewa-demos { justify-content: flex-start; } }
/* mockup hero jadi LINK ke demo + strip "Demo LIVE" di bawahnya */
a.sewa-hero__visual, a.sewa-hero__visual:hover, a.sewa-hero__visual:focus { text-decoration: none; color: inherit; }
a.sewa-hero__visual:hover .sewa-mock, a.sewa-hero__visual:focus .sewa-mock { border-color: var(--primary); }
.sewa-mock__live { display: flex; align-items: center; justify-content: center; gap: .45rem; padding: .55rem .8rem; font-size: var(--fs-caption); font-weight: 800; color: var(--primary-strong); background: var(--primary-soft); border-top: 1px solid var(--border); }
.sewa-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger, #E5484D); animation: psmm-menu-blink 1.1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .sewa-live-dot { animation: none; } }
/* --- /sewa v6: 3 paket + harga. MOBILE = geser horizontal (snap+peek) biar ga scroll ke bawah; DESKTOP = 3 kolom (user 2026-07-10) --- */
.sewa-tiers { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: .85rem; margin: 1.2rem -.25rem .2rem; padding: .95rem .25rem .55rem; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; align-items: stretch; }
.sewa-tiers::-webkit-scrollbar { display: none; }
.sewa-tier { flex: 0 0 85%; scroll-snap-align: center; position: relative; display: flex; flex-direction: column; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem 1.25rem 1.3rem; }
.sewa-tier--pop { border: 2px solid var(--primary); background: var(--primary-soft); box-shadow: 0 10px 26px color-mix(in srgb, var(--primary) 18%, transparent); }
.sewa-tier--hemat { border: 1.5px solid color-mix(in srgb, var(--success) 55%, var(--border)); }
.sewa-tier--best { border: 1.5px solid color-mix(in srgb, var(--gold) 60%, var(--border)); }
.sewa-tier__badge { position: absolute; top: -.72rem; left: 1.25rem; display: inline-flex; align-items: center; gap: .3rem; background: var(--gold); color: #3d2600; font-size: var(--fs-caption); font-weight: 800; padding: .22rem .72rem; border-radius: var(--radius-pill); box-shadow: 0 3px 10px rgba(0,0,0,.14); }
.sewa-tier__badge--hemat { background: var(--success); color: #053423; }
.sewa-tier__badge--rec { background: var(--primary); color: #04222F; }
.sewa-tier__badge--best { background: var(--gold); color: #3d2600; }
.sewa-tier__name { font-size: 1.55rem; font-weight: 800; line-height: 1.05; margin-bottom: .9rem; letter-spacing: -.01em; }
.sewa-tier--hemat .sewa-tier__name { color: var(--success); }
.sewa-tier--pop .sewa-tier__name { color: var(--primary-strong); }
.sewa-tier--best .sewa-tier__name { color: var(--gold-ink); }
.sewa-tier__tag { font-size: var(--fs-caption); color: var(--text-2); margin: .25rem 0 .8rem; }
.sewa-tier__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .35rem; margin: 0 0 1.4rem; }
.sewa-tier__price s { font-size: var(--fs-sm); color: var(--text-muted); font-weight: 500; }
.sewa-tier__price b { font-size: 1.8rem; font-weight: 800; color: var(--text); line-height: 1.05; letter-spacing: -.02em; white-space: nowrap; }
.sewa-tier__price span { font-size: var(--fs-sm); color: var(--text-2); font-weight: 600; }
.sewa-tier__permo { font-size: var(--fs-caption); color: var(--text-2); margin: .4rem 0 1rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.sewa-tier__save { font-weight: 800; color: var(--success); background: color-mix(in srgb, var(--success) 15%, transparent); padding: .1rem .5rem; border-radius: var(--radius-pill); }
/* Mandiri promo price (coret Rp200rb -> Rp100rb -50% + per hari), fitur highlight (mengikuti bisnissmm) */
.sewa-tier__price { min-height: 5.6rem; }   /* semua blok harga tinggi sama -> keterangan mulai di garis yg sama */
.sewa-tier__price--onlyyr { align-items: center; justify-content: center; text-align: center; margin-bottom: 1.5rem; }
.sewa-tier__locked { display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left; padding: .7rem .8rem; border: 1px dashed var(--border); border-radius: var(--radius); background: color-mix(in srgb, var(--text) 4%, transparent); }
.sewa-tier__locked-ic { flex: 0 0 auto; color: var(--text-muted); font-size: 1.1rem; }
.sewa-tier__locked-txt { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.sewa-tier__locked-txt b { font-size: var(--fs-sm); font-weight: 800; color: var(--text); line-height: 1.2; }
.sewa-tier__locked-txt small { font-size: var(--fs-caption); color: var(--text-muted); line-height: 1.35; font-weight: 500; }
@media (max-width: 779px) { .sewa-tier__price { min-height: 6.4rem; } }   /* mobile: subtext locked-box bisa 3 baris -> reserve lebih tinggi biar list tetep sejajar */
.sewa-tier__price--promo .sewa-tier__wasrow { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.sewa-tier__price--promo { flex-direction: column; align-items: flex-start; gap: .32rem; margin-bottom: 1.5rem; }
.sewa-tier__price--promo > s { font-size: var(--fs-sm); line-height: 1; }
.sewa-tier__price--promo .sewa-tier__nowrow { display: flex; align-items: center; gap: .55rem; }
.sewa-tier__price--promo .sewa-tier__off { font-size: .78rem; font-weight: 800; color: #fff; background: var(--danger, #E5484D); padding: .16rem .52rem; border-radius: var(--radius-pill); }
.sewa-tier__price--promo .sewa-tier__hemat { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 800; color: #04240f; background: var(--success); padding: .16rem .6rem; border-radius: var(--radius-pill); }
.sewa-tier__price--promo .sewa-tier__per { font-size: var(--fs-caption); color: var(--text-2); font-weight: 600; margin-top: .05rem; }
.sewa-tier__list b { color: var(--primary-strong); font-weight: 800; }
.sewa-tier__list li.sewa-tier__hl { font-weight: 800; color: var(--gold-ink); }
.sewa-tier__list li.sewa-tier__hl > i { color: var(--gold); }
.sewa-tier__list li.sewa-tier__inc { font-weight: 800; }
.sewa-tier__note { color: var(--text-muted); font-weight: 500; }
.sewa-tier__list { list-style: none; margin: 0 0 1.2rem; padding: 0; display: flex; flex-direction: column; gap: .5rem; flex: 1 1 auto; }
.sewa-tier__list li { display: flex; align-items: flex-start; gap: .5rem; font-size: var(--fs-sm); color: var(--text); line-height: 1.4; }
.sewa-tier__list li > i { color: var(--primary); margin-top: .2rem; flex: 0 0 auto; font-size: .78rem; }
/* Tooltip ⓘ di item paket — pakai pola .si-help yg udah ada (HOVER di desktop, TAP di HP via tabindex + :focus/:focus-within).
   Bubble dijangkar ke <li> (bukan ke ikon) biar lebarnya persis ngikut kartu: di HP `.sewa-tiers` itu carousel `overflow-x:auto`,
   yg bakal MOTONG bubble kalau dia jebol lebar kartu. Dijangkar ke li = mustahil kepotong / jebol. */
.sewa-tier__list li { position: relative; }
.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; }   /* JANGAN primary-strong: di light mode itu biru gelap di atas bubble gelap = ga kebaca */
.sewa-tier .sewa-btn { width: 100%; justify-content: center; margin-top: auto; }
.sewa-btn--soft { background: var(--surface); border-color: var(--border); color: var(--text); }
a.sewa-btn--soft, a.sewa-btn--soft:hover, a.sewa-btn--soft:focus { color: var(--text); }
a.sewa-btn--soft:hover, a.sewa-btn--soft:focus { background: var(--surface); border-color: var(--primary); color: var(--primary); }
.sewa-tiers__hint { display: flex; align-items: center; justify-content: center; gap: .4rem; font-size: var(--fs-caption); color: var(--text-muted); margin: .3rem 0 0; }
.sewa-tiers__hint > i { color: var(--primary); }
@media (min-width: 780px) {
  .sewa-tiers { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; gap: 1rem; margin: 1.6rem 0 .2rem; padding: .9rem 0 .3rem; align-items: stretch; }
  .sewa-tier { flex: none; }
  .sewa-tier--pop { transform: translateY(-6px); }
  .sewa-tiers__hint { display: none; }
}
/* --- /sewa v7: toggle harga Bulanan/Tahunan (user 2026-07-10). Mandiri ada bulanan; Cuan/Cuan Max tahunan aja. Toggle di-drive JS (class .is-monthly/.is-yearly di .sewa-tiers). --- */
.sewa-billing { display: inline-flex; gap: .2rem; padding: .28rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-pill); margin: 1.1rem 0 .2rem; }
.sewa-billing__opt { display: inline-flex; align-items: center; gap: .4rem; border: 0; background: transparent; color: var(--text-2); font-size: var(--fs-sm); font-weight: 700; padding: .45rem 1rem; border-radius: var(--radius-pill); cursor: pointer; transition: background .15s ease, color .15s ease; font-family: inherit; }
.sewa-billing__opt:hover { color: var(--text); }
.sewa-billing__opt.is-active { background: var(--primary); color: var(--primary-contrast); }
.sewa-billing__opt.is-active:hover { color: var(--primary-contrast); }
.sewa-billing__save { font-size: .66rem; font-weight: 800; color: var(--success); background: color-mix(in srgb, var(--success) 16%, transparent); padding: .06rem .42rem; border-radius: var(--radius-pill); }
.sewa-billing__opt.is-active .sewa-billing__save { color: #fff; background: rgba(255,255,255,.24); }
/* Default view = Bulanan (.is-monthly diset di HTML). Tanpa class = tampil /thn. */
.sewa-tier .sewa-bill-mo { display: none; }
.sewa-tiers.is-monthly .sewa-tier .sewa-bill-yr { display: none; }
.sewa-tiers.is-monthly .sewa-tier .sewa-bill-mo { display: flex; }
.sewa-tier__onlyyr { color: var(--text-muted); font-size: var(--fs-sm); font-weight: 600; font-style: italic; }
/* --- /sewa v8 (user 2026-07-10): CTA hero = tombol solid biru scroll ke #sewa-harga; WA cuma di tabel harga. --- */
.sewa-btn--primary { background: var(--primary); border-color: var(--primary); color: var(--primary-contrast); box-shadow: 0 10px 22px -12px var(--primary); }
a.sewa-btn--primary, a.sewa-btn--primary:hover, a.sewa-btn--primary:focus { color: var(--primary-contrast); }
a.sewa-btn--primary:hover, a.sewa-btn--primary:focus { background: var(--primary-strong); border-color: var(--primary-strong); }
/* Smooth-scroll + offset biar topbar sticky ga nutupin heading harga saat di-anchor */
html:has(.sewa-page), html:has(.sewa-page) .app-main, html:has(.sewa-page) .app-content { scroll-behavior: smooth; }
#sewa-harga { scroll-margin-top: 84px; }

/* ============================================================================
   Service Insight (mobile): peek chips + collapsible detail + freshness split;
   Keterangan collapsible. (user 2026-07-10) Desktop >=992px = tampil penuh spt biasa.
   ========================================================================== */
.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; } }
@keyframes svcChevBlink { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }   /* KEDIP chevron = tanda bisa diklik (gantiin teks "Ketuk buat lihat detail" biar hemat space, user 2026-07-14) */
@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; }   /* pas ketutup: chevron BIRU + KEDIP -> undang ditekan buat lihat detail */
  .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; }   /* footer "data terakhir update" cuma tampil pas detail dibuka (user 2026-07-13) */
}
@media (prefers-reduced-motion: reduce) { .svc-insight__chev { animation: none !important; } }
/* peek chips: bg netral + teks adaptif (aman light/dark), warna dibawa ikon/teks status */
.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); }   /* rata-rata waktu proses/order */
.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); }
/* freshness tag (harian / live) */
.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); }
/* footer 2 baris (kadensi dipisah biar ga rancu) */
.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); }

/* Keterangan collapsible (mobile) */
.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; }
}