/*!
 * Djuragan Sosmed — "Rekomendasi Berbasis Data" v3.6.0
 * Halaman rekomendasi layanan. Semua selector ber-prefix .djx (tidak bertabrakan dengan
 * Bootstrap 3 theme maupun bundle v1.x ber-prefix .djsw).
 *
 * v3.0.0 memperbaiki tiga temuan produksi:
 *
 * 1) UKURAN TEKS. Theme memakai Bootstrap 3 yang menyetel html{font-size:10px}, sehingga
 *    seluruh ukuran rem widget menyusut jadi 62.5% (nama layanan 1rem -> 10px, label
 *    0.82rem -> 8.2px). Semua font-size kini memakai px supaya kebal terhadap font-size
 *    root milik host, dengan skala: judul 24-32, nama 16-18, harga 22, isi 14-15,
 *    label 12-13, badge/tombol >= 12-14. Tidak ada teks informatif di bawah 12px.
 *
 * 2) LIGHT/DARK MODE. Sebelumnya palet navy dipatok mati sehingga area rekomendasi tetap
 *    gelap saat panel dialihkan ke light mode. Kini seluruh warna memakai design token
 *    yang mengikuti kelas theme PerfectPanel: body.daymode/.nightmode (juga .lightmode/
 *    .darkmode dan prefers-color-scheme sebagai cadangan). Tidak ada warna latar/teks
 *    yang ditulis langsung berulang.
 *
 * 3) TARGET SENTUH & JARAK AMAN. Kontrol >= 44px dan sticky action menyisakan ruang
 *    supaya tidak tertutup tombol WhatsApp mengambang.
 *
 * Kontras diuji WCAG AA pada kedua tema (teks biasa >= 4.5:1, teks besar >= 3:1).
 */

/* ====================== Design tokens ====================== */
/* Default = LIGHT. Dipakai saat panel memakai daymode/lightmode atau tidak menyatakan apa pun. */
/* v3.7.0 — kecerahan light mode diturunkan (silau) TANPA mengorbankan keterbacaan.
   Sumber silau adalah dua bidang terbesar di layar: latar halaman dan permukaan kartu
   yang sebelumnya putih murni (#ffffff, L* 100). Keduanya diturunkan; input tetap
   nyaris putih karena bidangnya kecil dan perlu terbaca sebagai kolom isian.

       latar halaman  L* 97.5 -> 93.5
       kartu          L* 100.0 -> 97.0     (kartu tetap lebih terang dari halaman)

   Menurunkan latar menurunkan pula kontras semua tinta di atasnya, jadi seluruh tinta
   ikut digelapkan. Hasil pemeriksaan (9 tinta x 4 alas + teks tombol):

       sebelum : 12 pasangan GAGAL AA — termasuk success 4.39 dan warning 4.16 di atas
                 kartu, dan teks putih tombol primer hanya 3.45
       sesudah : 0 gagal; tombol primer 4.59

   Jadi versi ini bukan cuma lebih adem, tapi juga memperbaiki kontras yang sudah gagal
   sejak sebelumnya. Nilai nightmode di blok bawah TIDAK disentuh. */
.djx {
  --djx-bg: #e7edf5;
  --djx-surface: #f2f7fb;
  --djx-surface-2: #e6edf6;
  --djx-raise: #d9e4f1;
  --djx-input: #fbfdfe;
  --djx-border: #c6d4e6;
  --djx-border-soft: rgba(14, 30, 53, 0.12);
  --djx-text: #0e1e35;
  --djx-muted: #4a5c74;
  --djx-faint: #53657d; /* 5.52:1 di atas kartu — AA untuk label 12px */
  --djx-primary: #1079c6;
  --djx-primary-2: #0a6cae;
  --djx-primary-fg: #ffffff;
  --djx-primary-soft: rgba(16, 121, 198, 0.12);
  --djx-cyan: #0b6478;
  --djx-orange: #9a4708;
  --djx-orange-soft: rgba(154, 71, 8, 0.12);
  --djx-success: #0f7346;
  --djx-success-soft: rgba(15, 115, 70, 0.12);
  --djx-warning: #8f5600;
  --djx-warning-soft: rgba(143, 86, 0, 0.14);
  --djx-danger: #c02637;
  --djx-danger-soft: rgba(192, 38, 55, 0.12);
  --djx-ring: rgba(16, 121, 198, 0.55);
  --djx-radius: 16px;
  --djx-radius-sm: 12px;
  --djx-radius-xs: 10px;
  --djx-shadow: 0 8px 24px rgba(14, 30, 53, 0.08);
  --djx-shadow-lg: 0 16px 40px rgba(14, 30, 53, 0.14);

  box-sizing: border-box;
  display: block;
  color: var(--djx-text);
  background: var(--djx-bg);
  border: 1px solid var(--djx-border);
  border-radius: var(--djx-radius);
  padding: 24px;
  font-family: "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* DARK — mengikuti kelas theme PerfectPanel. .nightmode adalah kelas yang benar-benar
   dipakai theme djuragansosmed (di-toggle oleh toggleMode()); sisanya cadangan. Widget
   juga menyetel data-djx-theme pada dirinya sendiri lewat JS ketika kelas itu terpasang
   di elemen PEMBUNGKUS (bukan body), sehingga perpindahan tema tetap tertangkap. */
body.nightmode .djx,
body.darkmode .djx,
body.dark-mode .djx,
html.nightmode .djx,
.nightmode .djx,
.djx[data-djx-theme="dark"] {
  --djx-bg: #061731;
  --djx-surface: #102c59;
  --djx-surface-2: #12356b;
  --djx-raise: #17407e;
  --djx-input: #0b2247;
  --djx-border: #244a80;
  --djx-border-soft: rgba(180, 200, 230, 0.16);
  --djx-text: #ffffff;
  --djx-muted: #c4d1e1;
  --djx-faint: #91a5bf;
  --djx-primary: #1da8f5;
  --djx-primary-2: #3bb8ff;
  --djx-primary-fg: #04203a;
  --djx-primary-soft: rgba(29, 168, 245, 0.18);
  --djx-cyan: #38d6e6;
  --djx-orange: #ff9d4d;
  --djx-orange-soft: rgba(255, 157, 77, 0.18);
  --djx-success: #31d98b;
  --djx-success-soft: rgba(49, 217, 139, 0.18);
  --djx-warning: #f5b942;
  --djx-warning-soft: rgba(245, 185, 66, 0.18);
  --djx-danger: #ff6471;
  --djx-danger-soft: rgba(255, 100, 113, 0.18);
  --djx-ring: rgba(59, 184, 255, 0.6);
  --djx-shadow: 0 10px 28px rgba(0, 0, 0, 0.26);
  --djx-shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.42);
}
/* Panel tidak menyatakan tema sama sekali -> ikuti preferensi sistem. */
@media (prefers-color-scheme: dark) {
  body:not(.daymode):not(.lightmode) .djx:not([data-djx-theme="light"]) {
    --djx-bg: #061731;
    --djx-surface: #102c59;
    --djx-surface-2: #12356b;
    --djx-raise: #17407e;
    --djx-input: #0b2247;
    --djx-border: #244a80;
    --djx-border-soft: rgba(180, 200, 230, 0.16);
    --djx-text: #ffffff;
    --djx-muted: #c4d1e1;
    --djx-faint: #91a5bf;
    --djx-primary: #1da8f5;
    --djx-primary-2: #3bb8ff;
    --djx-primary-fg: #04203a;
    --djx-primary-soft: rgba(29, 168, 245, 0.18);
    --djx-cyan: #38d6e6;
    --djx-orange: #ff9d4d;
    --djx-orange-soft: rgba(255, 157, 77, 0.18);
    --djx-success: #31d98b;
    --djx-success-soft: rgba(49, 217, 139, 0.18);
    --djx-warning: #f5b942;
    --djx-warning-soft: rgba(245, 185, 66, 0.18);
    --djx-danger: #ff6471;
    --djx-danger-soft: rgba(255, 100, 113, 0.18);
    --djx-ring: rgba(59, 184, 255, 0.6);
    --djx-shadow: 0 10px 28px rgba(0, 0, 0, 0.26);
    --djx-shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.42);
  }
}

.djx *, .djx *::before, .djx *::after { box-sizing: inherit; }
.djx :focus-visible {
  outline: 3px solid var(--djx-ring);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ====================== Header ====================== */
.djx-head { margin-bottom: 20px; }
.djx-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.12em;
  color: var(--djx-cyan); text-transform: uppercase; margin: 0 0 8px;
}
.djx-eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--djx-cyan); }
.djx-h1 { margin: 0 0 8px; font-size: clamp(24px, 18px + 1.9vw, 32px); font-weight: 800; letter-spacing: -0.02em; color: var(--djx-text); }
.djx-sub { margin: 0; color: var(--djx-muted); max-width: 62ch; font-size: 15px; }
.djx-head-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-top: 14px; }
.djx-updated {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--djx-muted);
  background: var(--djx-surface); border: 1px solid var(--djx-border); border-radius: 999px; padding: 6px 12px;
}
.djx-updated .djx-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--djx-success); box-shadow: 0 0 0 4px var(--djx-success-soft); }
.djx-how {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 12px;
  background: transparent; color: var(--djx-cyan); border: 1px solid var(--djx-border); border-radius: 999px;
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.djx-how:hover { background: var(--djx-surface); }

/* ====================== Quick picks (tabs) ====================== */
.djx-tabs {
  display: flex; gap: 6px; flex-wrap: wrap;
  background: var(--djx-surface); border: 1px solid var(--djx-border);
  border-radius: 999px; padding: 5px; margin-bottom: 16px; width: fit-content; max-width: 100%;
}
.djx-tab {
  appearance: none; border: 0; background: transparent; color: var(--djx-muted);
  font: inherit; font-weight: 700; font-size: 14px; cursor: pointer;
  padding: 9px 16px; min-height: 40px; border-radius: 999px; white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease;
}
.djx-tab:hover { color: var(--djx-text); }
.djx-tab[aria-selected="true"] {
  color: var(--djx-primary-fg); background: linear-gradient(135deg, var(--djx-primary), var(--djx-primary-2));
  box-shadow: 0 4px 12px var(--djx-primary-soft);
}

/* ====================== Layout: filter DI ATAS hasil ====================== */
/* v2.1: satu kolom penuh — filter jadi bar horizontal di atas daftar hasil supaya
   kartu lebih lega dan alurnya menurun: filter -> jumlah hasil -> kartu. */
.djx-main { display: block; }
.djx-main > * { min-width: 0; }

/* ---- Bar filter ---- */
.djx-filters {
  background: var(--djx-surface); border: 1px solid var(--djx-border);
  border-radius: var(--djx-radius); padding: 14px 16px; margin-bottom: 16px;
  position: sticky; top: 8px; z-index: 20;
  backdrop-filter: blur(6px);
}
@media (max-width: 900px) { .djx-filters { position: static; } }
.djx-fgroup { margin-bottom: 12px; }
.djx-fgroup:last-child { margin-bottom: 0; }
.djx-flabel { display: block; font-size: 12px; font-weight: 800; letter-spacing: 0.03em; color: var(--djx-faint); text-transform: uppercase; margin-bottom: 7px; }

/* Baris kontrol: rapi & responsif tanpa media query bertingkat. */
.djx-fgrid {
  display: grid; gap: 10px 12px; align-items: end;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
/* Label satu baris + tinggi seragam -> dasar kontrol sejajar rapi. */
.djx-fgrid .djx-flabel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.djx-fgrid > .djx-fgroup { margin-bottom: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.djx-fgrid .djx-factions { grid-column: 1 / -1; }
@media (min-width: 1080px) {
  .djx-fgrid { grid-template-columns: 1.15fr 1.15fr 1.4fr 0.85fr 1.35fr auto; }
  .djx-fgrid .djx-factions { grid-column: auto; margin-top: 0; }
}

/* Platform icon chips — digulir horizontal saat sempit, tidak pernah meluber. */
.djx-fgroup-plat { border-bottom: 1px solid var(--djx-border-soft); padding-bottom: 12px; }
.djx-plat {
  display: flex; gap: 8px; flex-wrap: wrap;
}
@media (max-width: 720px) {
  .djx-plat { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .djx-plat::-webkit-scrollbar { display: none; }
  .djx-plat-chip { flex: 0 0 auto; }
}
.djx-plat-chip {
  appearance: none; cursor: pointer; font: inherit;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 6px; min-height: 44px;
  background: var(--djx-input); color: var(--djx-muted);
  border: 1px solid var(--djx-border); border-radius: 999px; font-size: 14px; font-weight: 700;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}
.djx-plat-chip:hover { color: var(--djx-text); border-color: var(--djx-primary); transform: translateY(-1px); }
.djx-plat-chip[aria-pressed="true"] { color: var(--djx-text); border-color: var(--djx-primary); background: var(--djx-primary-soft); }

/* ---- Ubin ikon platform bergaya 3D (gradien brand + kilau + bayangan berwarna) ---- */
.djx-pic {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  color: #fff; border-radius: 11px; position: relative; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -3px 8px rgba(0, 0, 0, 0.28),
              0 4px 10px var(--djx-glow, rgba(0, 0, 0, 0.3));
}
/* Kilau lembut di sudut atas — memberi kesan permukaan cembung. */
.djx-pic::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.06) 42%, rgba(255, 255, 255, 0) 62%);
  pointer-events: none;
}
.djx-pic svg { width: 62%; height: 62%; display: block; position: relative; z-index: 1; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25)); }
.djx-pic-sm { width: 32px; height: 32px; border-radius: 9px; }
.djx-pic-md { width: 46px; height: 46px; border-radius: 13px; }
.djx-plat-chip:hover .djx-pic, .djx-card:hover .djx-pic { box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -3px 8px rgba(0,0,0,0.28), 0 6px 16px var(--djx-glow, rgba(0,0,0,0.35)); }

/* Segmented control (refill / goal-compact) */
.djx-seg { display: flex; gap: 4px; background: var(--djx-input); border: 1px solid var(--djx-border); border-radius: var(--djx-radius-xs); padding: 4px; }
.djx-seg button {
  flex: 1 1 0; appearance: none; border: 0; background: transparent; color: var(--djx-muted);
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; min-height: 38px; border-radius: 8px;
  padding: 6px 6px; white-space: nowrap;
}
.djx-seg button[aria-pressed="true"] { color: var(--djx-text); background: var(--djx-raise); }
.djx-seg button:hover { color: var(--djx-text); }

/* Inputs / selects */
.djx-input, .djx-select {
  width: 100%; min-height: 44px; padding: 10px 12px;
  background: var(--djx-input); color: var(--djx-text); border: 1px solid var(--djx-border);
  border-radius: var(--djx-radius-xs); font: inherit;
}
.djx-input::placeholder { color: var(--djx-faint); }
.djx-select { cursor: pointer; }
.djx-input:focus, .djx-select:focus { outline: none; border-color: var(--djx-primary); box-shadow: 0 0 0 3px var(--djx-ring); }
.djx-search-wrap { position: relative; }
.djx-search-wrap .djx-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--djx-faint); pointer-events: none; }
.djx-search-wrap .djx-input { padding-left: 38px; }

.djx-price-row { display: flex; align-items: center; gap: 8px; }
.djx-price-row .djx-pfx { color: var(--djx-faint); font-size: 14px; }

.djx-factions { display: flex; gap: 8px; margin-top: 2px; }
.djx-btn {
  appearance: none; cursor: pointer; font: inherit; font-weight: 800;
  min-height: 44px; padding: 11px 16px; border-radius: var(--djx-radius-xs); border: 1px solid transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  /* Tautan order memakai kelas ini juga — theme (Bootstrap 3) memberi underline pada <a>. */
  text-decoration: none; white-space: nowrap;
  transition: filter 0.15s ease, transform 0.1s ease, background 0.15s ease, border-color 0.15s ease;
}
.djx-btn:hover, .djx-btn:focus { text-decoration: none; }
.djx-btn:active { transform: translateY(1px); }
.djx-btn-primary { flex: 1 1 auto; background: linear-gradient(135deg, var(--djx-primary), var(--djx-primary-2)); color: var(--djx-primary-fg); box-shadow: 0 6px 16px var(--djx-primary-soft); }
.djx-btn-primary:hover { filter: brightness(1.07); }
.djx-btn-ghost { background: transparent; color: var(--djx-muted); border-color: var(--djx-border); }
.djx-btn-ghost:hover { color: var(--djx-text); border-color: var(--djx-primary); }
.djx-btn:disabled { opacity: 0.5; cursor: not-allowed; filter: none; transform: none; }

/* ====================== Results column ====================== */
.djx-resbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.djx-count { font-size: 15px; color: var(--djx-muted); font-weight: 600; }
.djx-count strong { color: var(--djx-text); font-weight: 800; }
.djx-active-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.djx-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700;
  background: var(--djx-surface); color: var(--djx-muted); border: 1px solid var(--djx-border);
  border-radius: 999px; padding: 5px 6px 5px 12px;
}
.djx-chip button { appearance: none; border: 0; background: transparent; color: var(--djx-faint); cursor: pointer; line-height: 1; padding: 3px; border-radius: 999px; display: inline-flex; }
.djx-chip button:hover { color: var(--djx-danger); }

.djx-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 1199px) { .djx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .djx-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; } }

/* ---- Card ---- */
.djx-card {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  background: var(--djx-surface); border: 1px solid var(--djx-border);
  border-radius: var(--djx-radius); padding: 16px 16px 14px;
  box-shadow: var(--djx-shadow);
  transition: border-color 0.16s ease, transform 0.16s ease;
}
.djx-card:hover { border-color: var(--djx-primary); transform: translateY(-2px); }
.djx-card-top { display: flex; align-items: flex-start; gap: 12px; }
.djx-rank {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 15px; color: #1a1200;
  background: linear-gradient(135deg, #ffb75e, var(--djx-orange));
  box-shadow: 0 4px 12px var(--djx-orange-soft);
}
.djx-rank.djx-rank-plain { background: var(--djx-input); color: var(--djx-muted); box-shadow: none; border: 1px solid var(--djx-border); }
.djx-card-id { min-width: 0; flex: 1 1 auto; }
.djx-name { margin: 0; font-size: 16px; font-weight: 800; color: var(--djx-text); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.djx-meta { margin: 4px 0 0; font-size: 12px; color: var(--djx-faint); }
/* Target sentuh >=40px meski ikonnya kecil (brief: kontrol mudah ditekan di ponsel). */
.djx-fav { flex: 0 0 auto; appearance: none; border: 0; background: transparent; color: var(--djx-faint); cursor: pointer; padding: 8px; margin: -8px -8px 0 0; border-radius: 10px; min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
.djx-fav svg { width: 20px; height: 20px; display: block; }
.djx-fav:hover { color: var(--djx-orange); }
.djx-fav[aria-pressed="true"] { color: var(--djx-orange); }

.djx-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.djx-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; border-radius: 999px; padding: 3px 9px; }
.djx-badge svg { width: 12px; height: 12px; }
.djx-badge-primary { background: var(--djx-primary-soft); color: #7ecbff; }
.djx-badge-success { background: var(--djx-success-soft); color: var(--djx-success); }
.djx-badge-orange { background: var(--djx-orange-soft); color: var(--djx-orange); }
.djx-badge-cyan { background: rgba(56, 214, 230, 0.16); color: var(--djx-cyan); }
.djx-badge-muted { background: var(--djx-input); color: var(--djx-muted); border: 1px solid var(--djx-border); }
.djx-badge-warning { background: var(--djx-warning-soft); color: var(--djx-warning); }

/* Price hero + facts */
.djx-price { display: flex; align-items: baseline; gap: 8px; }
.djx-price .djx-amount { font-size: 26px; font-weight: 900; color: var(--djx-text); letter-spacing: -0.02em; }
.djx-price .djx-per { font-size: 13px; color: var(--djx-muted); }
.djx-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.djx-fact { display: flex; flex-direction: column; gap: 1px; }
.djx-fact dt { font-size: 12px; color: var(--djx-faint); }
.djx-fact dd { margin: 0; font-size: 15px; font-weight: 700; color: var(--djx-text); }
.djx-fact dd.djx-up { color: var(--djx-success); }
.djx-fact dd.djx-down { color: var(--djx-danger); }

.djx-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.djx-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--djx-muted); background: var(--djx-input); border: 1px solid var(--djx-border); border-radius: 8px; padding: 4px 8px; }
.djx-tag svg { width: 13px; height: 13px; }
.djx-tag.djx-yes { color: var(--djx-success); border-color: rgba(52,211,153,0.4); }
.djx-tag.djx-no { color: var(--djx-warning); border-color: rgba(251,191,36,0.4); }

.djx-reason { margin: 0; font-size: 14px; color: var(--djx-muted); background: var(--djx-input); border-left: 3px solid var(--djx-primary); border-radius: 8px; padding: 8px 10px; }

.djx-conf { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--djx-faint); }
.djx-conf-bar { flex: 1 1 auto; height: 5px; border-radius: 999px; background: var(--djx-input); overflow: hidden; }
.djx-conf-bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--djx-primary), var(--djx-cyan)); }

.djx-card-actions { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.djx-card-actions .djx-btn-primary { flex: 1 1 auto; }
/* Label = target sentuh sesungguhnya untuk checkbox (input-nya sendiri 18px). */
.djx-cmp { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--djx-muted); cursor: pointer; user-select: none; padding: 8px 10px; min-height: 44px; border-radius: 10px; }
.djx-cmp:hover { color: var(--djx-text); background: var(--djx-input); }
.djx-cmp input { width: 18px; height: 18px; accent-color: var(--djx-primary); cursor: pointer; }

/* Expandable detail + calculator */
.djx-detail { border-top: 1px dashed var(--djx-border); margin-top: 2px; padding-top: 12px; display: grid; gap: 12px; }
.djx-detail[hidden] { display: none; }
.djx-calc { background: var(--djx-input); border: 1px solid var(--djx-border); border-radius: var(--djx-radius-sm); padding: 12px; }
.djx-calc-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.djx-calc-field { flex: 1 1 140px; }
.djx-calc-out { text-align: right; }
.djx-calc-out .djx-est { font-size: 22px; font-weight: 900; color: var(--djx-text); }
.djx-calc-note { margin: 8px 0 0; font-size: 12px; color: var(--djx-faint); }
.djx-calc-err { color: var(--djx-warning); font-size: 13px; margin: 6px 0 0; display: flex; align-items: center; gap: 6px; }
.djx-calc-err[hidden] { display: none; }
.djx-calc-err svg { flex: 0 0 auto; width: 14px; height: 14px; }
.djx-warn-refill { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--djx-warning); background: var(--djx-warning-soft); border: 1px solid rgba(251,191,36,0.35); border-radius: 10px; padding: 9px 11px; }
.djx-warn-refill svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; }

/* ====================== States ====================== */
.djx-state { text-align: center; padding: 36px 20px; background: var(--djx-surface); border: 1px solid var(--djx-border); border-radius: var(--djx-radius); }
.djx-state svg { width: 40px; height: 40px; color: var(--djx-faint); margin-bottom: 12px; }
.djx-state h3 { margin: 0 0 6px; font-size: 17px; color: var(--djx-text); }
.djx-state p { margin: 0 auto 16px; color: var(--djx-muted); max-width: 44ch; font-size: 15px; }
.djx-state-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.djx-state.djx-error svg { color: var(--djx-danger); }

.djx-stale {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 9px 12px;
  font-size: 14px; color: var(--djx-warning); background: var(--djx-warning-soft);
  border: 1px solid rgba(251,191,36,0.35); border-radius: 10px;
}
/* WAJIB: display:flex di atas mengalahkan [hidden] bawaan browser — tanpa aturan ini
   bilah peringatan tetap tampil (kosong) walau di-set hidden. Sama untuk .djx-calc-err. */
.djx-stale[hidden] { display: none; }
.djx-stale svg { flex: 0 0 auto; width: 16px; height: 16px; }

/* Skeleton */
.djx-skel-card { background: var(--djx-surface); border: 1px solid var(--djx-border); border-radius: var(--djx-radius); padding: 16px; display: grid; gap: 12px; }
.djx-skel { position: relative; overflow: hidden; background: var(--djx-input); border-radius: 8px; }
.djx-skel.l { height: 18px; width: 65%; }
.djx-skel.m { height: 14px; width: 90%; }
.djx-skel.s { height: 14px; width: 40%; }
.djx-skel.hero { height: 30px; width: 50%; }
.djx-skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent); transform: translateX(-100%); animation: djx-shimmer 1.25s infinite; }
@keyframes djx-shimmer { 100% { transform: translateX(100%); } }

/* ====================== Compare drawer ====================== */
.djx-cmp-dock {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  z-index: 40; display: flex; align-items: center; gap: 12px;
  background: var(--djx-surface); border: 1px solid var(--djx-primary); border-radius: 999px;
  padding: 8px 8px 8px 16px; box-shadow: var(--djx-shadow-lg); max-width: calc(100vw - 24px);
}
.djx-cmp-dock[hidden] { display: none; }
.djx-cmp-dock .djx-cmp-count { font-size: 14px; font-weight: 700; color: var(--djx-muted); }
.djx-cmp-dock .djx-cmp-count strong { color: var(--djx-text); }

.djx-drawer-back { position: fixed; inset: 0; z-index: 50; background: rgba(2, 8, 22, 0.7); display: flex; align-items: flex-end; justify-content: center; }
.djx-drawer-back[hidden] { display: none; }
.djx-drawer {
  width: min(920px, 100%); max-height: 86vh; overflow: auto;
  background: var(--djx-bg); border: 1px solid var(--djx-border);
  border-radius: 18px 18px 0 0; padding: 20px;
}
@media (min-width: 720px) { .djx-drawer-back { align-items: center; } .djx-drawer { border-radius: 18px; } }
.djx-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.djx-drawer-head h2 { margin: 0; font-size: 18px; }
.djx-x { appearance: none; border: 1px solid var(--djx-border); background: var(--djx-surface); color: var(--djx-muted); width: 40px; height: 40px; border-radius: 10px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.djx-x:hover { color: var(--djx-text); border-color: var(--djx-primary); }
.djx-cmp-table-wrap { overflow-x: auto; border: 1px solid var(--djx-border); border-radius: var(--djx-radius); }
.djx-cmp-table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 14px; }
.djx-cmp-table th, .djx-cmp-table td { padding: 11px 12px; border-bottom: 1px solid var(--djx-border); text-align: left; vertical-align: top; }
.djx-cmp-table thead th { background: var(--djx-surface-2); position: sticky; top: 0; }
.djx-cmp-table .djx-metric { color: var(--djx-muted); font-weight: 700; white-space: nowrap; }
/* dihapus di v3.3.0: display:block di sini membatalkan line-clamp pada nama layanan */
.djx-cmp-table .djx-svc-meta { display: block; font-size: 12px; color: var(--djx-faint); }
.djx-cmp-table tbody tr:last-child th, .djx-cmp-table tbody tr:last-child td { border-bottom: 0; }

/* ====================== Mobile sticky CTA (in detail) ====================== */
.djx-sticky-cta { display: none; }
@media (max-width: 620px) {
  .djx { padding: 16px; }
  .djx-facts { grid-template-columns: 1fr 1fr; }
  /* Tab tidak dipaksa wrap: digulir horizontal agar tidak meluber di 360px. */
  .djx-tabs { width: 100%; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .djx-tabs::-webkit-scrollbar { display: none; }
  .djx-card-actions { flex-wrap: wrap; }
  .djx-cmp-dock { left: 12px; right: 12px; transform: none; justify-content: space-between; }
  .djx-card.djx-open .djx-sticky-cta {
    display: flex; position: sticky; bottom: 0; margin: 4px -16px -14px; padding: 10px 16px;
    background: linear-gradient(180deg, rgba(15,41,84,0), var(--djx-surface) 30%);
  }
  .djx-card.djx-open .djx-sticky-cta .djx-btn-primary { width: 100%; }
}

.djx-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  .djx *, .djx *::after { transition: none !important; animation: none !important; }
  .djx-card:hover { transform: none; }
}

/* ====================== Perbaikan v3.0.0 ====================== */

/* Tombol order dinonaktifkan (ID layanan tidak valid): terlihat mati, tidak bisa
   diklik/di-fokus, dan tidak menyamar sebagai tautan yang berfungsi. */
.djx-btn-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
  background: var(--djx-surface-2) !important;
  color: var(--djx-muted) !important;
  box-shadow: none !important;
}

/* Jarak aman dari tombol WhatsApp mengambang: sticky action diberi ruang di kanan
   supaya Reset/CTA tidak pernah tertutup, dan menghormati safe-area iOS. */
.djx-cmp-dock {
  padding-right: max(88px, calc(72px + env(safe-area-inset-right, 0px)));
  padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
}
@media (max-width: 767px) {
  .djx-factions { padding-right: max(0px, env(safe-area-inset-right, 0px)); }
  /* Tombol utama full width di ponsel (brief), Reset tetap terjangkau. */
  .djx-factions { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
  .djx-factions > .djx-btn-primary, .djx-factions > button:first-child { width: 100%; }
}

/* Target sentuh minimal 44x44 (WCAG / brief). */
.djx-btn, .djx-tab, .djx-plat-chip, .djx-seg button, .djx-x, .djx-cmp { min-height: 44px; }
.djx-x { min-width: 44px; }

/* Input tidak boleh memicu zoom otomatis iOS -> minimal 16px di layar sentuh. */
@media (max-width: 767px) {
  .djx input, .djx select, .djx textarea { font-size: 16px; }
}

/* Nama layanan panjang tidak boleh merusak layout. */
.djx-name, .djx-svc-name { overflow-wrap: anywhere; }

/* Tidak ada horizontal scroll yang berasal dari widget. */
.djx { max-width: 100%; overflow-x: clip; }
@media (max-width: 767px) { .djx { padding: 16px; } }

/* ====================== v3.1.0 — kartu ringkas 3 kolom ====================== */
/* Kartu lama menumpuk 8 blok vertikal (badge, harga, 6 baris fakta, tag, alasan,
   bar keyakinan, aksi) sehingga tinggi dan berongga. Kini 5 bagian rapat:
   header -> harga+skor -> matriks 2x2 -> chip fitur -> aksi. */

.djx-grid > * { min-width: 0; }

.djx-card {
  padding: 16px;
  border-radius: 16px;
  gap: 10px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* --- 1. Header --- */
.djx-card-top { align-items: flex-start; gap: 10px; }
.djx-card-id { min-width: 0; flex: 1 1 auto; }
.djx-name {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere;
  font-size: 15px; line-height: 1.35; font-weight: 700; margin: 0;
}
.djx-meta { font-size: 12px; margin: 3px 0 0; overflow-wrap: anywhere; }
/* Metadata: satu baris di layar cukup (brief), boleh dua baris di layar kecil. */
@media (min-width: 768px) {
  .djx-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 767px) {
  .djx-meta { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
}
.djx-fav { flex: 0 0 auto; }

/* --- 2. Harga + skor sebaris --- */
.djx-priceline {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin: 0;
}
.djx-price { display: flex; align-items: baseline; gap: 6px; margin: 0; }
.djx-amount { font-size: 23px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.djx-per { font-size: 12px; color: var(--djx-muted); }
.djx-score {
  display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap;
  font-size: 13px; padding: 3px 10px; border-radius: 999px;
  background: var(--djx-primary-soft); color: var(--djx-primary);
  border: 1px solid var(--djx-border);
}
.djx-score-k { font-weight: 600; }
.djx-score-v { font-weight: 800; font-variant-numeric: tabular-nums; }

/* --- 3. Matriks performa 2x2 --- */
.djx-mx {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px; margin: 0;
  padding: 10px 0; border-top: 1px solid var(--djx-border-soft); border-bottom: 1px solid var(--djx-border-soft);
}
.djx-m { min-width: 0; }
.djx-m dt { font-size: 12px; line-height: 1.25; color: var(--djx-faint); margin-bottom: 1px; }
.djx-m-v {
  margin: 0; font-size: 15px; font-weight: 700; color: var(--djx-text);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere; line-height: 1.25;
}
.djx-m-v.djx-up { color: var(--djx-success); }
.djx-m-v.djx-down { color: var(--djx-danger); }
.djx-m-v.djx-dim { color: var(--djx-muted); font-weight: 600; }

/* --- 4. Chip fitur (menggantikan kotak alasan + bar keyakinan) --- */
.djx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.djx-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; line-height: 1.2;
  padding: 5px 10px; border-radius: 999px; border: 1px solid transparent;
}
.djx-chip svg { width: 13px; height: 13px; flex: 0 0 auto; }
.djx-c-green { background: var(--djx-success-soft); color: var(--djx-success); border-color: var(--djx-success-soft); }
.djx-c-amber { background: var(--djx-warning-soft); color: var(--djx-warning); border-color: var(--djx-warning-soft); }
.djx-c-cyan  { background: var(--djx-primary-soft); color: var(--djx-primary); border-color: var(--djx-primary-soft); }
.djx-c-grey  { background: var(--djx-surface-2); color: var(--djx-muted); border-color: var(--djx-border); }

/* --- 5. Aksi: [Pilih layanan fleksibel][Detail], lalu Bandingkan --- */
.djx-card-actions {
  margin-top: auto; padding-top: 10px; display: flex; flex-direction: column;
  gap: 6px; align-items: stretch; border-top: 1px solid var(--djx-border-soft);
}
.djx-actions-main { display: flex; gap: 8px; align-items: stretch; }
.djx-actions-main .djx-btn-primary { flex: 1 1 auto; justify-content: center; font-size: 14px; }
.djx-actions-main .djx-btn-ghost { flex: 0 0 auto; font-size: 13px; padding-left: 12px; padding-right: 10px; }
.djx-card-actions .djx-cmp { align-self: flex-start; font-size: 13px; }

/* Alasan rekomendasi kini di panel Detail, bukan kotak selebar kartu. */
.djx-detail-reason {
  margin: 0 0 10px; font-size: 14px; color: var(--djx-muted);
  border-left: 3px solid var(--djx-primary); padding-left: 10px;
}

/* Tiga kolom butuh ruang: lebarkan kontainer halaman. */
.djx { max-width: 1520px; margin-inline: auto; }

@media (max-width: 767px) {
  .djx-card { padding: 14px; }
  .djx-amount { font-size: 22px; }
  .djx-actions-main { flex-direction: column; }
  .djx-actions-main .djx-btn-ghost { width: 100%; justify-content: center; }
}

/* Kontrol "Bandingkan" ringkas. 44px tetap dijaga pada perangkat sentuh (pointer kasar);
   pada mouse 36px sudah memenuhi WCAG 2.5.8 dan menghemat tinggi kartu. */
.djx-card-actions .djx-cmp { min-height: 32px; padding: 2px; }
@media (pointer: coarse) { .djx-card-actions .djx-cmp { min-height: 44px; } }

/* ====================== v3.2.0 ====================== */

/* (1) Nomor peringkat dihapus dari kartu — header jadi lebih lega. */
.djx-rank, .djx-rank-plain { display: none !important; }

/* (3) Chip platform = ikon saja. Nama tetap ada di aria-label + title, jadi pembaca
   layar dan tooltip mouse tetap menjelaskannya (bukan ikon tanpa nama). */
.djx-plat-icon {
  width: 48px; min-width: 48px; height: 48px;
  padding: 0; justify-content: center; gap: 0;
  border-radius: 14px;
}
.djx-plat-icon .djx-pic { width: 30px; height: 30px; border-radius: 9px; }
.djx-plat-icon[aria-pressed="true"] {
  border-color: var(--djx-primary);
  box-shadow: 0 0 0 2px var(--djx-primary-soft);
}
/* "Semua" bukan nama platform dan tidak punya logo -> tetap teks. */
.djx-plat-all { padding: 6px 16px; font-weight: 700; }

@media (max-width: 767px) {
  /* (2) Di ponsel ikon dirapatkan supaya lebih banyak platform terlihat sekaligus. */
  .djx-plat { gap: 8px; }
  .djx-plat-icon { width: 46px; min-width: 46px; height: 46px; }
}

/* (4) Tombol saring "Favorit saya" — membuat bintang favorit benar-benar berguna. */
.djx-favfilter {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 6px 14px; border-radius: 999px;
  background: var(--djx-surface); color: var(--djx-muted);
  border: 1px solid var(--djx-border);
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.djx-favfilter svg { width: 15px; height: 15px; }
.djx-favfilter:hover { color: var(--djx-text); border-color: var(--djx-primary); }
.djx-favfilter[aria-pressed="true"] {
  color: var(--djx-warning); border-color: var(--djx-warning);
  background: var(--djx-warning-soft);
}
.djx-favfilter[hidden] { display: none; }
@media (pointer: coarse) { .djx-favfilter { min-height: 44px; } }

/* ============ v3.3.0 — modal perbandingan sebagai alat keputusan ============ */

/* AKAR MASALAH "tombol tutup terlihat kotak kosong": SVG ikon hanya punya viewBox,
   tanpa width/height, dan tidak ada aturan CSS yang memberinya ukuran -> di dalam
   flex container ia runtuh jadi 0px. Aturan cadangan ini memberi ukuran ke SETIAP
   ikon inline yang belum diatur khusus, jadi kejadian serupa tidak terulang. */
.djx svg { width: 16px; height: 16px; display: block; }
.djx-x svg { width: 20px; height: 20px; }

/* Kunci scroll halaman saat modal terbuka -> tidak ada scrollbar ganda.
   position:fixed + top negatif menjaga posisi baca; dipulihkan saat modal ditutup. */
body.djx-locked { position: fixed; width: 100%; overflow: hidden; }

.djx-drawer-back {
  position: fixed; inset: 0; z-index: 50;
  background: var(--djx-overlay, rgba(2, 8, 22, 0.7));
  display: grid; place-items: center; padding: 24px;
}
.djx[data-djx-theme="dark"] .djx-drawer-back, .nightmode .djx-drawer-back { --djx-overlay: rgba(0, 5, 18, 0.78); }
.djx-drawer {
  width: min(1400px, calc(100vw - 48px));
  max-height: calc(100dvh - 48px);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--djx-bg); border: 1px solid var(--djx-border);
  border-radius: 20px; box-shadow: var(--djx-shadow-lg); overflow: hidden;
}
/* Header sticky */
.djx-mhead {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 18px 20px; border-bottom: 1px solid var(--djx-border);
  background: var(--djx-surface);
}
.djx-mhead-text { min-width: 0; flex: 1 1 auto; }
.djx-mhead h2 { margin: 0; font-size: 19px; font-weight: 800; color: var(--djx-text); }
.djx-mhead-sub { margin: 4px 0 0; font-size: 13px; color: var(--djx-muted); overflow-wrap: anywhere; }
.djx-x {
  flex: 0 0 auto; width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  border-radius: 12px; border: 1px solid var(--djx-border);
  background: var(--djx-bg); color: var(--djx-text);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.djx-x:hover { border-color: var(--djx-primary); color: var(--djx-primary); }

/* HANYA area isi yang bergulir */
.djx-mbody { min-height: 0; overflow: auto; padding: 18px 20px; }

/* Footer sticky */
.djx-mfoot {
  display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
  padding: 14px 20px; border-top: 1px solid var(--djx-border); background: var(--djx-surface);
  padding-bottom: max(14px, env(safe-area-inset-bottom, 0px));
}

/* ---- Tabel perbandingan (desktop) ---- */
.djx-cmp-table-wrap { overflow-x: auto; }
.djx-cmp-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.djx-cmp-table th, .djx-cmp-table td {
  padding: 12px 14px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--djx-border-soft); font-size: 14px;
}
.djx-cmp-table thead th { background: var(--djx-surface-2); }
/* Kolom metrik kiri tetap terlihat saat digulir mendatar */
.djx-metric {
  position: sticky; left: 0; z-index: 2;
  background: var(--djx-surface-2); color: var(--djx-muted);
  font-weight: 700; font-size: 13px; white-space: nowrap; min-width: 150px;
}
.djx-cmp-col { min-width: 220px; }
.djx-cmp-colhead { display: flex; gap: 10px; align-items: flex-start; }
.djx-cmp-colname { min-width: 0; }
.djx-cmp-table .djx-svc-name, .djx-svc-name {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere;
  font-size: 15px; line-height: 1.4; font-weight: 700; color: var(--djx-text);
}
.djx-svc-meta { display: block; font-size: 12px; color: var(--djx-muted); margin-top: 2px; }
.djx-cmp-remove {
  margin-top: 8px; display: inline-flex; align-items: center; gap: 5px;
  min-height: 32px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--djx-border); background: transparent; color: var(--djx-muted);
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.djx-cmp-remove:hover { color: var(--djx-danger); border-color: var(--djx-danger); }
.djx-cmp-remove svg { width: 12px; height: 12px; }
.djx-cmp-val { font-weight: 700; color: var(--djx-text); overflow-wrap: anywhere; }
.djx-cmp-val.djx-up { color: var(--djx-success); }
.djx-cmp-val.djx-down { color: var(--djx-danger); }
.djx-cmp-val.djx-dim { color: var(--djx-muted); }
/* Nilai terbaik: latar aksen TIPIS + ikon + TEKS (tidak mengandalkan warna saja) */
/* v3.5.0: sel TIDAK lagi diwarnai penuh — keunggulan cukup lewat badge kecil. */
.djx-bestmark {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 4px;
  font-size: 12px; font-weight: 700; color: var(--djx-success);
}
.djx-bestmark svg { width: 12px; height: 12px; }
.djx-cmp-note { display: block; margin-top: 6px; font-size: 12px; color: var(--djx-muted); line-height: 1.4; }
.djx-cmp-pick { display: inline-flex; justify-content: center; font-size: 14px; }

/* ---- Ringkasan ---- */
.djx-cmp-summary { margin-top: 20px; padding: 16px; border: 1px solid var(--djx-border); border-radius: 14px; background: var(--djx-surface); }
.djx-cmp-summary h3 { margin: 0 0 12px; font-size: 16px; font-weight: 800; color: var(--djx-text); }
.djx-cmp-sumgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.djx-cmp-sumcard { padding: 12px; border-radius: 12px; background: var(--djx-bg); border: 1px solid var(--djx-border-soft); min-width: 0; }
.djx-cmp-sumk { display: block; font-size: 12px; font-weight: 800; color: var(--djx-primary); text-transform: uppercase; letter-spacing: .03em; }
.djx-cmp-sumv { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; margin: 4px 0 2px; font-size: 14px; font-weight: 700; color: var(--djx-text); }
.djx-cmp-sumwhy { display: block; font-size: 12px; color: var(--djx-muted); line-height: 1.45; }
.djx-cmp-sumnote { margin: 12px 0 0; font-size: 13px; color: var(--djx-muted); line-height: 1.5; }
.djx-cmp-sumwarn { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; font-size: 13px; color: var(--djx-warning); line-height: 1.5; }
.djx-cmp-sumwarn svg { flex: 0 0 auto; margin-top: 2px; }
.djx-cmp-disclaimer { margin: 12px 0 0; font-size: 12px; color: var(--djx-faint); line-height: 1.5; }

/* ---- Skeleton ---- */
.djx-cmp-skel { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.djx-skelbar { display: block; height: 14px; border-radius: 7px; background: var(--djx-surface-2); margin-bottom: 10px; }

/* ---- Mobile: per METRIK, bukan tabel desktop yang diperkecil ---- */
.djx-cmp-mobile { display: none; }
@media (max-width: 767px) {
  .djx-drawer-back { padding: 0; place-items: stretch; }
  .djx-drawer { width: 100%; height: 100dvh; max-height: none; border-radius: 0; border: 0; }
  .djx-mbody { padding: 14px 16px; }
  .djx-mfoot { padding: 12px 16px; padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
  .djx-mfoot .djx-btn { flex: 1 1 auto; justify-content: center; }
  .djx-cmp-table-wrap { display: none; }   /* tabel desktop disembunyikan */
  .djx-cmp-mobile { display: block; }
  .djx-cmp-msec { margin-bottom: 14px; padding: 12px; border: 1px solid var(--djx-border); border-radius: 14px; background: var(--djx-surface); }
  .djx-cmp-msec h3 { margin: 0 0 8px; font-size: 14px; font-weight: 800; color: var(--djx-text); }
  .djx-cmp-mrow {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
    padding: 8px; border-radius: 10px;
  }
  .djx-cmp-mname { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--djx-muted);
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
  .djx-cmp-mval { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; font-size: 14px; }
  .djx-cmp-msec .djx-cmp-pick { width: 100%; margin-top: 8px; }
}

/* ================== v3.4.0 — header sebagai banner ================== */
/* Banner dibangun HTML/CSS, bukan gambar jadi: teks tetap tajam di resolusi apa pun,
   warnanya ikut token light/dark otomatis, dan tidak ada dua berkas gambar yang harus
   dibuat ulang setiap teksnya berubah. Maskot = satu <img> transparan (opsional). */
.djx-banner {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 28px;
  margin: -24px -24px 20px;           /* melebar penuh ke tepi widget */
  padding: 28px 24px;
  border-radius: var(--djx-radius) var(--djx-radius) 0 0;
  background:
    radial-gradient(900px 460px at 88% 26%, var(--djx-primary-soft) 0%, transparent 62%),
    linear-gradient(120deg, var(--djx-surface) 0%, var(--djx-bg) 58%, var(--djx-surface-2) 100%);
  border-bottom: 1px solid var(--djx-border);
}
/* Motif garis halus, memudar ke kiri supaya teks tetap terbaca */
.djx-banner::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image:
    linear-gradient(to right, var(--djx-border-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--djx-border-soft) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,.85), transparent 58%);
          mask-image: linear-gradient(to left, rgba(0,0,0,.85), transparent 58%);
}
.djx-banner-text { position: relative; z-index: 2; flex: 1 1 auto; min-width: 0; }
.djx-banner .djx-h1 { max-width: 26ch; }

/* Panggung maskot */
.djx-banner-stage {
  position: relative; z-index: 2; flex: 0 0 auto;
  width: 260px; align-self: stretch; min-height: 190px;
  display: flex; align-items: flex-end; justify-content: center;
}
.djx-banner-halo {
  position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%);
  width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, var(--djx-primary-soft) 0%, transparent 68%);
}
/* height:100% + width:auto menjaga rasio asli logo/maskot (tidak pernah gepeng). */
.djx-mascot {
  position: relative; display: block;
  height: 250px; width: auto; max-width: 100%;
  object-fit: contain; margin-bottom: -28px;
  filter: drop-shadow(0 12px 22px rgba(0, 20, 50, .28));
}

@media (max-width: 1023px) {
  .djx-banner-stage { width: 190px; }
  .djx-mascot { height: 196px; }
}
/* Di ponsel maskot disembunyikan: ruang layar lebih berharga untuk filter & kartu. */
@media (max-width: 767px) {
  .djx-banner {
    margin: -16px -16px 16px; padding: 20px 16px;
    gap: 0;
  }
  .djx-banner-stage { display: none; }
  .djx-banner .djx-h1 { max-width: none; }
}

/* ==================== v3.5.0 ==================== */

/* ---- BAGIAN F: banner light/dark ---- */
.djx-hero {
  display: block; width: 100%; max-width: none; margin: 0 0 18px; padding: 0;
  overflow: hidden;
  border-radius: var(--djx-radius); border: 1px solid var(--djx-border);
  /* Latar sementara sebelum gambar termuat — ikut tema, jadi tidak ada kedip putih. */
  background: var(--djx-surface);
}
/* v3.8.0 — TIDAK ADA aspect-ratio dan TIDAK ADA object-fit di sini. Lihat catatan
   panjang di bawah; dua properti itulah yang membuat banner ber-letterbox. Rasio
   sekarang datang dari atribut width/height yang diisi JS dengan naturalWidth/
   naturalHeight berkasnya sendiri, jadi berkas apa pun yang diunggah owner selalu
   memenuhi 100% lebar tanpa celah dan tanpa teregang. */
.djx-hero-img {
  display: block; width: 100%; max-width: none; height: auto; margin: 0; padding: 0;
}
@media (max-width: 767px) { .djx-hero { margin: 0 0 14px; border-radius: var(--djx-radius-sm); } }

/* ==================== v3.7.0 ==================== */

/* ---- Banner gambar vs judul teks: tepat SATU yang tampil ----
   Banner Djuragan memuat judul yang tercetak di dalam berkas gambarnya, sama persis
   dengan <h1> di header. Menampilkan keduanya membuat judul tampil dua kali.

   Layar >= 768px  -> gambar yang bicara; salinan judul disembunyikan SECARA VISUAL saja
                      (clip, bukan display:none) supaya <h1> tetap ada di pohon
                      aksesibilitas dan struktur heading halaman tidak bolong.
   Layar <  768px  -> gambar 1600x420 menyusut sampai teks di dalamnya ~7px dan tidak
                      terbaca, jadi gambarnya yang disembunyikan dan judul teks kembali
                      tampil dengan ukuran yang benar.

   Baris "Diperbarui …" + tombol "Cara kerja rekomendasi" berada di LUAR djx-banner-copy,
   jadi tidak pernah ikut tersembunyi. */
.djx-has-hero .djx-banner-copy {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* Banner gambar sudah membawa latar + judulnya sendiri, jadi latar gradien header
   tidak lagi punya isi untuk dibingkai — kalau dibiarkan, ia menyisakan pita berwarna
   setipis baris "Diperbarui …" yang terlihat seperti sambungan salah potong. Header
   dijadikan wadah polos: hanya baris meta yang tampil, tanpa latar dan tanpa garis. */
.djx-has-hero .djx-head {
  margin: 0 0 20px; padding: 0; background: none; border-bottom: 0; border-radius: 0;
}
.djx-has-hero .djx-head::before { content: none; }
.djx-has-hero .djx-head-meta { margin-top: 0; }
@media (max-width: 767px) {
  .djx-has-hero .djx-banner-copy {
    position: static; width: auto; height: auto; padding: 0; margin: 0;
    overflow: visible; clip: auto; clip-path: none; white-space: normal;
  }
  /* Gambar disembunyikan -> header kembali jadi banner utuh seperti tanpa hero. */
  .djx-has-hero .djx-head {
    margin: -24px -24px 20px; padding: 28px 24px;
    border-radius: var(--djx-radius) var(--djx-radius) 0 0;
    border-bottom: 1px solid var(--djx-border);
    background:
      radial-gradient(900px 460px at 88% 26%, var(--djx-primary-soft) 0%, transparent 62%),
      linear-gradient(120deg, var(--djx-surface) 0%, var(--djx-bg) 58%, var(--djx-surface-2) 100%);
  }
  .djx-has-hero .djx-head-meta { margin-top: 14px; }
  .djx-has-hero .djx-hero { display: none; }
}

/* ---- Baris filter: label DAN dasar kontrol sejajar ----
   Sebelumnya segmented control "Refill" ~10px lebih tinggi dari select (padding 4px +
   tombol 44px + border). Karena baris ini rata-bawah, satu kontrol yang lebih tinggi
   menaikkan labelnya sendirian — itulah "REFILL" yang melayang di atas label lain.
   Diperbaiki dengan menyamakan TINGGI seluruh kontrol; rata-bawah lalu otomatis
   membuat label sejajar juga, tanpa perlu mengatur posisi label satu per satu. */
.djx-fgrid .djx-select,
.djx-fgrid .djx-input,
.djx-fgrid .djx-seg,
.djx-fgrid .djx-btn { height: 46px; min-height: 0; }
.djx-fgrid .djx-seg { padding: 3px; align-items: stretch; }
.djx-fgrid .djx-seg button { height: 100%; min-height: 0; padding: 0 10px; }
.djx-fgrid .djx-price-row { align-items: stretch; }
.djx-fgrid .djx-price-row .djx-pfx { display: flex; align-items: center; }
/* Perangkat sentuh: target sentuh tetap >= 44px, jadi seluruh barisnya yang naik
   (46 - padding 6 - border 2 = 38px terlalu kecil untuk jari, cukup untuk kursor). */
@media (pointer: coarse) {
  .djx-fgrid .djx-select,
  .djx-fgrid .djx-input,
  .djx-fgrid .djx-seg,
  .djx-fgrid .djx-btn { height: 54px; }
}

/* ---- BAGIAN A: penjelas jumlah hasil ---- */
.djx-why {
  appearance: none; border: 1px solid var(--djx-border); background: transparent;
  color: var(--djx-primary); font: inherit; font-size: 13px; font-weight: 700;
  padding: 5px 12px; border-radius: 999px; cursor: pointer; min-height: 32px;
}
.djx-why:hover { background: var(--djx-primary-soft); }
.djx-why[hidden] { display: none; }
.djx-whybox {
  margin: 0 0 14px; padding: 12px 14px; border-radius: var(--djx-radius-sm);
  background: var(--djx-surface); border: 1px solid var(--djx-border);
  color: var(--djx-muted); font-size: 14px; line-height: 1.55;
}
.djx-whybox[hidden] { display: none; }
@media (pointer: coarse) { .djx-why { min-height: 44px; } }

/* ---- BAGIAN B: skala z-index + sidebar/WA tidak boleh menembus modal ---- */
.djx { --z-compare-overlay: 2000; --z-compare-modal: 2010; }
.djx-drawer-back { z-index: var(--z-compare-overlay); isolation: isolate; }
.djx-drawer { position: relative; z-index: var(--z-compare-modal); }
/* Saat modal terbuka: sidebar, header, dan tombol mengambang milik theme ditekan ke
   bawah overlay dan dimatikan interaksinya. Selektor sengaja luas (beberapa nama dipakai
   theme PerfectPanel) tapi HANYA aktif ketika body membawa kelas penanda. */
body.djx-compare-open .sidebar-wrap,
body.djx-compare-open .sidebar-menu,
body.djx-compare-open .navbar,
body.djx-compare-open .navbar-default,
body.djx-compare-open .top-bar,
body.djx-compare-open .body-overlay,
body.djx-compare-open [class*="whatsapp"],
body.djx-compare-open [class*="floating"],
body.djx-compare-open [id*="whatsapp"] {
  z-index: 1 !important;
  pointer-events: none !important;
}
/* Hamburger tidak boleh membuka sidebar selagi modal terbuka. */
body.djx-compare-open .navbar-toggle,
body.djx-compare-open [data-toggle="collapse"] { pointer-events: none !important; }

/* ---- BAGIAN D: badge keunggulan (menggantikan blok hijau penuh) ---- */
.djx-bestmark {
  display: inline-flex; align-items: center; gap: 4px;
  margin-inline-start: 6px; padding: 3px 8px;
  border: 1px solid var(--djx-success-soft); border-radius: 999px;
  color: var(--djx-success); background: var(--djx-success-soft);
  font-size: 12px; line-height: 1.2; font-weight: 700; vertical-align: middle;
  white-space: nowrap;
}

/* ---- BAGIAN E: kartu ringkasan lengkap ---- */
.djx-cmp-sumgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1199px) { .djx-cmp-sumgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .djx-cmp-sumgrid { grid-template-columns: 1fr; } }
.djx-cmp-sumcard { display: flex; flex-direction: column; gap: 4px; }
.djx-cmp-summeta { font-size: 12px; color: var(--djx-muted); overflow-wrap: anywhere; }
.djx-cmp-sumprice { margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.djx-cmp-sumprice strong { font-size: 19px; font-weight: 800; color: var(--djx-text); }
.djx-cmp-sumprice span { font-size: 12px; color: var(--djx-muted); }
.djx-cmp-sumact { margin-top: auto; padding-top: 10px; display: flex; gap: 8px; }
.djx-cmp-sumact .djx-btn { flex: 1 1 auto; justify-content: center; font-size: 13px; min-height: 40px; }
@media (pointer: coarse) { .djx-cmp-sumact .djx-btn { min-height: 44px; } }