/* ==========================================================================
   sajoo.id — gaya situs (SATU-SATUNYA stylesheet, tanpa dependensi luar)
   Syarat: no-JS tetap tampil rapi | cepat | aksesibel | responsif 320px..1440px+
   Konvensi kelas: .saj-*  (tidak bertabrakan dengan halaman pelanggan)
   ========================================================================== */

/* ---------------------------------------------------------------- 1. Token */
:root {
  color-scheme: light;

  --saj-primer: #2e7cf6;
  --saj-primer-gelap: #1b5fd0;
  --saj-primer-lembut: #eaf1fe;
  --saj-aksen: #e07b00;
  --saj-aksen-lembut: #fdf2e3;
  --saj-ungu: #5a2d9c;
  --saj-ungu-lembut: #f1eafb;
  --saj-sukses: #16a34a;
  --saj-wa: #25d366;
  --saj-wa-gelap: #1ea855;

  --saj-teks: #0f172a;
  --saj-teks-2: #64748b;
  --saj-latar: #ffffff;
  --saj-latar-2: #f8fafc;
  --saj-latar-3: #f1f5f9;
  --saj-garis: #e2e8f0;
  --saj-garis-2: #cbd5e1;

  --saj-radius: 16px;
  --saj-radius-besar: 24px;
  --saj-radius-pil: 999px;
  --saj-bayang: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .06);
  --saj-bayang-2: 0 2px 6px rgba(15, 23, 42, .08), 0 18px 40px rgba(15, 23, 42, .1);

  /* jarak bagian: fluid, aman untuk layar kecil */
  --saj-jarak: clamp(40px, 7vw, 84px);
  --saj-pad: clamp(16px, 4vw, 28px);

  --saj-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --saj-font-judul: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* -------- 0. Font (mandiri, tanpa pihak ketiga) -------------------------
   Poppins dibuat lokal dari paket SIL Open Font License (berkas lisensi ada di
   assets/fonts/OFL-Poppins.txt). Hanya 600 & 700, subset latin (cukup untuk
   teks situs). */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/poppins-600.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/poppins-700.woff2") format("woff2");
}

/* ------------------------------------------------------- 2. Dasar & reset */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 84px; /* tinggi navbar sticky */
}

body {
  margin: 0;
  font-family: var(--saj-font);
  font-size: clamp(15.5px, 1.6vw, 17px);
  line-height: 1.6;
  color: var(--saj-teks);
  background: var(--saj-latar);
  overflow-x: clip;              /* anti geser horizontal, tanpa merusak sticky */
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--saj-primer-gelap); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--saj-primer); }
p, li { overflow-wrap: anywhere; }
:focus-visible { outline: 3px solid var(--saj-primer); outline-offset: 2px; border-radius: 6px; }

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.2; letter-spacing: -.01em; font-family: var(--saj-font-judul); }
h1 { font-size: clamp(28px, 5.2vw, 44px); font-weight: 700; }
h2 { font-size: clamp(22px, 3.6vw, 32px); font-weight: 700; }
h3 { font-size: clamp(18px, 2.4vw, 22px); font-weight: 600; }
h4 { font-size: clamp(16px, 2vw, 18px); font-weight: 600; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
li { margin-bottom: .4em; }
strong { font-weight: 700; }

.saj-lompat {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--saj-teks); color: #fff; padding: 10px 16px; border-radius: 0 0 12px 0;
}
.saj-lompat:focus { left: 0; color: #fff; }

.saj-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;
}

/* ------------------------------------------------------------- 3. Tata letak */
.saj-wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--saj-pad); }
.saj-wrap--sempit { max-width: 820px; }

.saj-sec { padding-block: var(--saj-jarak); }
.saj-sec--latar { background: var(--saj-latar-2); }
.saj-sec--terang { background: linear-gradient(180deg, var(--saj-primer-lembut), #fff 60%); }
.saj-sec__kepala { max-width: 760px; margin-bottom: clamp(20px, 3vw, 36px); }
.saj-sec__kepala--tengah { margin-inline: auto; text-align: center; }
.saj-sec__kepala p { color: var(--saj-teks-2); }
.saj-sec__label {
  display: inline-block; font-family: var(--saj-font-judul); font-size: 13px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--saj-primer-gelap); margin-bottom: 10px;
}

.saj-grid { display: grid; gap: clamp(14px, 2.2vw, 24px); }
.saj-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.saj-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.saj-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.saj-grid--paket { grid-template-columns: repeat(auto-fit, minmax(min(232px, 100%), 1fr)); }

/* --------------------------------------------------------------- 4. Tombol */
.saj-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 12px 22px; border: 1px solid transparent; border-radius: var(--saj-radius-pil);
  font: inherit; font-weight: 700; font-family: var(--saj-font-judul); font-size: 15.5px; text-align: center; text-decoration: none;
  cursor: pointer; transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
  max-width: 100%;
}
.saj-btn:hover { transform: translateY(-1px); }
.saj-btn--utama { background: var(--saj-primer); color: #fff; }
.saj-btn--utama:hover { background: var(--saj-primer-gelap); color: #fff; }
.saj-btn--garis { background: #fff; color: var(--saj-teks); border-color: var(--saj-garis-2); }
.saj-btn--garis:hover { border-color: var(--saj-primer); color: var(--saj-primer-gelap); }
.saj-btn--wa { background: var(--saj-wa); color: #06301b; }
.saj-btn--wa:hover { background: var(--saj-wa-gelap); color: #03210f; }
.saj-btn--kecil { min-height: 40px; padding: 8px 16px; font-size: 14.5px; }
.saj-btn--penuh { width: 100%; }
.saj-btn__ikon { width: 18px; height: 18px; flex: 0 0 auto; }

.saj-aksi { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
@media (max-width: 420px) { .saj-aksi .saj-btn { width: 100%; } }

/* ---------------------------------------------------------------- 5. Navigasi */
.saj-bar-promo {
  background: linear-gradient(90deg, #0f766e 0%, #0e7fb8 100%); color: #eaf7ff;
  font-size: 13.5px; padding: 8px var(--saj-pad);
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.saj-bar-promo__teks { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saj-bar-promo a { flex: 0 0 auto; }
.saj-bar-promo a { color: #fff; font-weight: 700; }

.saj-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--saj-garis);
  backdrop-filter: saturate(160%) blur(8px);
}
.saj-nav__dalam {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  padding-block: 10px;
}
.saj-nav__merek { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.saj-nav__merek img { height: clamp(30px, 5vw, 38px); width: auto; }
.saj-nav__tautan {
  display: flex; gap: 4px; align-items: center;
  flex: 1 1 100%; order: 3;
  overflow-x: auto; padding-bottom: 4px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.saj-nav__tautan::-webkit-scrollbar { display: none; }
/* petunjuk bahwa menu bisa digeser di layar sempit */
.saj-nav__tautan { mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); }
.saj-nav__tautan a {
  flex: 0 0 auto; padding: 8px 12px; border-radius: var(--saj-radius-pil);
  color: var(--saj-teks); font-weight: 600; font-size: 14.5px; text-decoration: none; white-space: nowrap;
}
.saj-nav__tautan a:hover, .saj-nav__tautan a[aria-current="page"] {
  background: var(--saj-primer-lembut); color: var(--saj-primer-gelap);
}
.saj-nav__aksi { display: flex; gap: 8px; align-items: center; margin-left: auto; order: 2; }

@media (min-width: 900px) {
  .saj-nav__tautan { flex: 1 1 auto; order: 2; overflow: visible; flex-wrap: wrap; padding-bottom: 0; mask-image: none; -webkit-mask-image: none; }
  .saj-nav__aksi { order: 3; }
}

.saj-progres { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--saj-primer); z-index: 60; }

/* ------------------------------------------------------------------ 6. Hero */
.saj-hero { padding-block: clamp(28px, 6vw, 72px) var(--saj-jarak); }
.saj-hero__grid { display: grid; gap: clamp(24px, 4vw, 48px); align-items: center; }
@media (min-width: 940px) { .saj-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.saj-hero h1 { margin-bottom: 14px; }
.saj-hero__sub { font-size: clamp(16px, 2.1vw, 19px); color: var(--saj-teks-2); max-width: 56ch; }
.saj-hero__catatan { font-size: 13.5px; color: var(--saj-teks-2); margin-top: 10px; }

.saj-chip-baris { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.saj-chip {
  display: inline-block; padding: 6px 12px; border-radius: var(--saj-radius-pil);
  background: var(--saj-latar-3); color: var(--saj-teks); font-size: 13.5px; font-weight: 600;
}

/* Tab segmen: CSS-only (radio) → tetap bekerja tanpa JavaScript */
.saj-tab { position: relative; display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
.saj-tab__bar {
  display: flex; flex-wrap: nowrap; gap: 6px; margin-bottom: 14px;
  overflow-x: auto; padding-bottom: 4px; scrollbar-width: none;
}
.saj-tab__in {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}
.saj-tab__bar::-webkit-scrollbar { display: none; }
.saj-tab__label {
  flex: 0 0 auto; padding: 8px 14px; border: 1px solid var(--saj-garis-2); border-radius: var(--saj-radius-pil);
  font-family: var(--saj-font-judul); font-size: 14px; font-weight: 700; color: var(--saj-teks-2); background: #fff; cursor: pointer; white-space: nowrap;
}
.saj-tab__panel { flex: 1 1 100%; display: block; margin-bottom: 14px; }
.saj-tab__panel p { margin-bottom: .4em; }
.saj-tab__panel .saj-tab__judul { font-family: var(--saj-font-judul); font-weight: 700; }

/* hanya panel aktif yang tampil (tanpa JavaScript; :has() didukung browser modern) */
.saj-tab__panel { display: block; }
.saj-tab:has(.saj-tab__in:checked) .saj-tab__panel { display: none; }
.saj-tab:has(.saj-tab__in:nth-of-type(1):checked) .saj-tab__panel[data-panel="1"],
.saj-tab:has(.saj-tab__in:nth-of-type(2):checked) .saj-tab__panel[data-panel="2"],
.saj-tab:has(.saj-tab__in:nth-of-type(3):checked) .saj-tab__panel[data-panel="3"],
.saj-tab:has(.saj-tab__in:nth-of-type(4):checked) .saj-tab__panel[data-panel="4"] { display: block; }
.saj-tab__in:checked + .saj-tab__label {
  background: var(--saj-primer); border-color: var(--saj-primer); color: #fff;
}
.saj-tab__in:focus-visible + .saj-tab__label { outline: 3px solid var(--saj-primer); outline-offset: 2px; }

/* --------------------------------------------------- 7. Slot gambar (blur) */
.saj-shot {
  position: relative; isolation: isolate; overflow: hidden;
  border: 1px solid var(--saj-garis); border-radius: var(--saj-radius-besar);
  aspect-ratio: 16 / 9; background: #0f172a;
}
.saj-shot::before {
  content: ""; position: absolute; inset: -18%; z-index: 0; filter: blur(30px); transform: scale(1.04);
  background:
    radial-gradient(42% 52% at 22% 26%, var(--g1, #2e7cf6), transparent 72%),
    radial-gradient(46% 56% at 80% 30%, var(--g2, #5a2d9c), transparent 72%),
    radial-gradient(52% 62% at 50% 88%, var(--g3, #e07b00), transparent 72%);
}
.saj-shot::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(15, 23, 42, .04), rgba(15, 23, 42, .34));
}
.saj-shot img { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: cover; }
.saj-shot__ket {
  display: none; position: absolute; z-index: 3; left: 12px; bottom: 10px; max-width: calc(100% - 24px);
  padding: 5px 10px; border-radius: var(--saj-radius-pil);
  background: rgba(15, 23, 42, .62); color: #e2e8f0; font-size: 12px;
}
html[data-pratinjau="1"] .saj-shot__ket { display: block; }
@media (min-width: 720px) { .saj-shot--lebar { aspect-ratio: 4 / 3; } }
.saj-shot--kotak { aspect-ratio: 1 / 1; }
.saj-shot--biru { --g1: #2e7cf6; --g2: #0ea5e9; --g3: #5a2d9c; }
.saj-shot--ungu { --g1: #5a2d9c; --g2: #2e7cf6; --g3: #c084fc; }
.saj-shot--oranye { --g1: #e07b00; --g2: #f59e0b; --g3: #2e7cf6; }
.saj-shot--teal { --g1: #0891b2; --g2: #16a34a; --g3: #2e7cf6; }
.saj-shot--indigo { --g1: #334155; --g2: #2e7cf6; --g3: #5a2d9c; }

/* --- Slot gambar memakai variabel CSS (tanpa <img>, tanpa ikon gambar rusak)
   Pakai: <figure class="saj-shot" style="--gambar:url(''/assets/img/xx.webp'')">
   Bila --gambar belum diisi, latar gradien blur yang tampil. --- */
.saj-shot__img {
  position: absolute; inset: 0; z-index: 1;
  background-image: var(--gambar, none);
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.saj-shot__ket { z-index: 3; }
/* -------------------------------------------------------------- 8. Kartu dll */
.saj-kartu {
  background: #fff; border: 1px solid var(--saj-garis); border-radius: var(--saj-radius-besar);
  padding: clamp(18px, 2.6vw, 28px); box-shadow: var(--saj-bayang); height: 100%;
}
.saj-kartu h3 { margin-bottom: .35em; }
.saj-kartu p:last-child, .saj-kartu ul:last-child { margin-bottom: 0; }

.saj-fitur {
  display: grid; gap: clamp(20px, 3.4vw, 44px); align-items: center;
  padding-block: clamp(22px, 4vw, 40px);
}
@media (min-width: 880px) {
  .saj-fitur { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .saj-fitur--balik .saj-fitur__teks { order: 2; }
}
.saj-fitur__paket {
  display: inline-block; margin-bottom: 8px; padding: 4px 12px;
  border-radius: var(--saj-radius-pil); background: var(--saj-primer-lembut);
  color: var(--saj-primer-gelap); font-size: 13px; font-weight: 700;
}

.saj-tanda { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.saj-tanda--silang { color: var(--saj-teks-2); }
.saj-tanda--ok { color: var(--saj-sukses); }

.saj-lencana {
  display: inline-block; padding: 3px 10px; border-radius: var(--saj-radius-pil);
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.saj-lencana--netral { background: var(--saj-latar-3); color: var(--saj-teks-2); }
.saj-lencana--populer { background: var(--saj-aksen-lembut); color: #8a4a00; }
.saj-lencana--segera { background: var(--saj-latar-3); color: var(--saj-teks-2); border: 1px dashed var(--saj-garis-2); }

.saj-catatan {
  padding: 14px 16px; border-left: 4px solid var(--saj-primer);
  background: var(--saj-primer-lembut); border-radius: 0 var(--saj-radius) var(--saj-radius) 0;
  font-size: 14.5px;
}
.saj-noscript {
  margin: 16px 0; padding: 14px 16px; border: 1px dashed var(--saj-garis-2);
  border-radius: var(--saj-radius); background: var(--saj-latar-2); font-size: 14.5px;
}

/* ---------------------------------------------------------------- 9. Harga */
.saj-paket {
  display: flex; flex-direction: column; gap: 10px;
  background: #fff; border: 1px solid var(--saj-garis); border-top: 4px solid var(--saj-warna, var(--saj-primer));
  border-radius: var(--saj-radius-besar); padding: clamp(18px, 2.4vw, 24px); box-shadow: var(--saj-bayang);
}
.saj-paket--populer { box-shadow: var(--saj-bayang-2); border-color: var(--saj-garis-2); }
.saj-paket__nama { font-size: 19px; font-weight: 800; margin: 0; }
.saj-paket__tag { font-size: 14px; color: var(--saj-teks-2); margin: 0; }
.saj-paket__harga { font-size: clamp(24px, 3.4vw, 30px); font-weight: 800; margin: 6px 0 0; line-height: 1.1; }
.saj-paket__harga small { display: block; font-size: 13.5px; font-weight: 600; color: var(--saj-teks-2); }
.saj-paket__coret { font-size: 13.5px; color: var(--saj-teks-2); text-decoration: line-through; }
.saj-paket ul { padding-left: 1.1em; margin: 6px 0 0; font-size: 14.5px; }
.saj-paket__kaki { margin-top: auto; padding-top: 12px; }

.saj-tabel-bungkus { overflow-x: auto; border: 1px solid var(--saj-garis); border-radius: var(--saj-radius-besar); background: #fff; }
table.saj-tabel { width: 100%; border-collapse: collapse; min-width: 560px; }
table.saj-tabel th, table.saj-tabel td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--saj-garis); font-size: 14.5px; }
table.saj-tabel thead th { background: var(--saj-latar-2); font-size: 13.5px; text-transform: uppercase; letter-spacing: .04em; }
table.saj-tabel tr:last-child td { border-bottom: 0; }

/* di HP: tabel bandingkan berubah menjadi kartu (tanpa geser horizontal) */
@media (max-width: 720px) {
  table.saj-banding, table.saj-banding tbody, table.saj-banding tr, table.saj-banding td { display: block; width: 100%; min-width: 0; }
  table.saj-banding thead { display: none; }
  table.saj-banding tr { border: 1px solid var(--saj-garis); border-radius: var(--saj-radius); margin-bottom: 12px; padding: 6px 4px; background: #fff; }
  table.saj-banding td { border: 0; padding: 8px 12px; }
  table.saj-banding td::before {
    content: attr(data-label) ": "; font-weight: 700; color: var(--saj-teks-2);
  }
  table.saj-banding td:first-child { font-size: 16px; font-weight: 700; }
}

/* ----------------------------------------------------------------- 10. FAQ */
.saj-faq { display: grid; gap: 10px; }
.saj-faq details {
  background: #fff; border: 1px solid var(--saj-garis); border-radius: var(--saj-radius); padding: 0;
  overflow: hidden;
}
.saj-faq summary {
  cursor: pointer; padding: 14px 16px; font-weight: 700; list-style: none;
  display: flex; justify-content: space-between; gap: 12px; align-items: flex-start;
}
.saj-faq summary::-webkit-details-marker { display: none; }
.saj-faq summary::after { content: "+"; font-weight: 800; color: var(--saj-primer-gelap); flex: 0 0 auto; }
.saj-faq details[open] summary::after { content: "–"; }
.saj-faq details > p, .saj-faq details > div { padding: 0 16px 16px; margin: 0; color: #334155; }

/* -------------------------------------------------------------- 11. Footer */
.saj-footer { background: var(--saj-teks); color: #cbd5e1; padding-block: clamp(32px, 5vw, 56px); font-size: 14.5px; }
.saj-footer a { color: #e2e8f0; text-decoration: none; }
.saj-footer a:hover { color: #fff; text-decoration: underline; }
.saj-footer h4 { color: #fff; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .7em; }
.saj-footer__grid { display: grid; gap: clamp(20px, 3vw, 32px); grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
.saj-footer__grid ul { list-style: none; padding: 0; margin: 0; }
.saj-footer__grid li { margin-bottom: .45em; }
.saj-footer__bawah {
  margin-top: clamp(24px, 4vw, 40px); padding-top: 20px; border-top: 1px solid rgba(226, 232, 240, .2);
  display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between; align-items: center;
}
.saj-footer__merek { display: flex; align-items: center; gap: 10px; }
.saj-footer__merek img { height: 36px; width: auto; filter: brightness(0) invert(1); opacity: .95; }

/* ------------------------------------------------------ 12. Mengapung & alat */
.saj-wa-float {
  position: fixed; right: max(14px, env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 70; display: inline-flex; align-items: center; gap: 8px;
  background: var(--saj-wa); color: #06301b; font-weight: 800; text-decoration: none;
  padding: 12px 16px; border-radius: var(--saj-radius-pil); box-shadow: var(--saj-bayang-2);
  min-height: 48px;
}
.saj-wa-float:hover { background: var(--saj-wa-gelap); color: #03210f; }
.saj-wa-float span { display: none; }
@media (min-width: 640px) { .saj-wa-float span { display: inline; } }

.saj-ke-atas {
  position: fixed; right: max(14px, env(safe-area-inset-right));
  bottom: calc(74px + env(safe-area-inset-bottom)); z-index: 69;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--saj-garis-2);
  background: #fff; color: var(--saj-teks); font-size: 18px; font-weight: 800; cursor: pointer;
  box-shadow: var(--saj-bayang); display: none;
}
.saj-ke-atas[data-tampil="1"] { display: block; }

/* --------------------------------------------------------- 13. Bantuan umum */
.saj-daftar-periksa { list-style: none; padding: 0; }
.saj-daftar-periksa li { display: flex; gap: 10px; align-items: flex-start; }
.saj-daftar-periksa li::before { content: "✓"; color: var(--saj-sukses); font-weight: 800; flex: 0 0 auto; }

.saj-langkah { display: grid; gap: clamp(14px, 2.2vw, 22px); counter-reset: langkah; }
.saj-langkah > li {
  list-style: none; background: #fff; border: 1px solid var(--saj-garis); border-radius: var(--saj-radius-besar);
  padding: clamp(16px, 2.4vw, 24px); box-shadow: var(--saj-bayang);
}
.saj-langkah > li::before {
  counter-increment: langkah; content: counter(langkah);
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; background: var(--saj-primer); color: #fff;
  font-weight: 800; margin-bottom: 10px;
}

.saj-legal { font-size: 16px; }
.saj-legal h2 { margin-top: 1.6em; }
.saj-legal h3 { margin-top: 1.2em; }
.saj-legal__tanggal { color: var(--saj-teks-2); font-size: 14px; margin-bottom: 1.6em; }

/* ---------------------------------------------------------- 14. Animasi halus */
.saj-muncul { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .saj-muncul { opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease; }
  .saj-muncul[data-muncul="1"] { opacity: 1; transform: none; }
  .saj-btn, .saj-faq summary { transition: transform .15s ease, background-color .15s ease, color .15s ease; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .saj-btn:hover { transform: none; }
}

/* ------------------------------------------------- 15. Layar sangat kecil */
@media (max-width: 380px) {
  :root { --saj-pad: 14px; }
  .saj-nav__merek img { height: 28px; }
  .saj-nav__tautan a { padding: 8px 10px; font-size: 14px; }
  .saj-chip { font-size: 13px; padding: 5px 10px; }
}

/* ------------------------------------------------------------ 16. Layar besar */
@media (min-width: 1280px) {
  .saj-wrap { max-width: 1220px; }
}
@media (min-width: 1600px) {
  .saj-wrap { max-width: 1280px; }
  :root { --saj-jarak: 96px; }
}

/* ------------------------------------------------------------ 17. Cetak */
@media print {
  .saj-nav, .saj-wa-float, .saj-ke-atas, .saj-progres, .saj-bar-promo { display: none !important; }
  body { background: #fff; }
  a::after { content: " (" attr(href) ")"; font-size: 12px; }
}

/* ------------------------------------------------- 18. Tabel di layar sempit */
/* Tabel lebar (mis. daftar add-on) tetap bisa dibaca: kolom dirapatkan, lalu
   digeser ke samping di dalam kotaknya sendiri — halaman tidak ikut bergeser. */
@media (max-width: 720px) {
  table.saj-tabel { min-width: 480px; }
  table.saj-tabel th,
  table.saj-tabel td { padding: 10px 10px; font-size: 14px; }
  .saj-tabel-bungkus:has(> table.saj-tabel:not(.saj-banding))::before {
    content: "Geser tabel ke samping untuk melihat kolom lainnya";
    display: block;
    padding: 10px 12px 0;
    font-size: 12.5px;
    color: var(--saj-teks-2);
  }
}

/* ==========================================================================
   19. Sentuhan premium (adaptasi pola majoo.id) — 2026-09-25
   Yang diadopsi: chips warna-warni, latar bergradien lembut, tombol bergradien,
   dan kartu bantuan mengapung di kanan bawah (WA). Identitas warna tetap milik
   sajoo (biru/teal/ungu/oranye), bukan meniru warna pihak lain.
   ========================================================================== */

/* --- Chips warna-warni otomatis berdasarkan urutan -----------------------
   Cukup tulis <span class="saj-chip">; warna mengikuti urutan dalam satu baris. */
.saj-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--chip-latar, var(--saj-latar-3));
  color: var(--chip-teks, var(--saj-teks));
  border: 1px solid var(--chip-garis, transparent);
}
.saj-chip::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--chip-titik, currentColor);
}
.saj-chip-baris .saj-chip:nth-child(8n + 1) { --chip-latar:#e8f0fe; --chip-teks:#1b5fd0; --chip-titik:#2e7cf6; --chip-garis:#d3e2fb; }
.saj-chip-baris .saj-chip:nth-child(8n + 2) { --chip-latar:#e4f5f9; --chip-teks:#0b6a80; --chip-titik:#0891b2; --chip-garis:#cbe9f0; }
.saj-chip-baris .saj-chip:nth-child(8n + 3) { --chip-latar:#f1eafb; --chip-teks:#5a2d9c; --chip-titik:#7c3aed; --chip-garis:#e2d4f7; }
.saj-chip-baris .saj-chip:nth-child(8n + 4) { --chip-latar:#fdf2e3; --chip-teks:#8a4a00; --chip-titik:#e07b00; --chip-garis:#f8e0c2; }
.saj-chip-baris .saj-chip:nth-child(8n + 5) { --chip-latar:#e8f7ed; --chip-teks:#14663a; --chip-titik:#16a34a; --chip-garis:#cfead9; }
.saj-chip-baris .saj-chip:nth-child(8n + 6) { --chip-latar:#fdecec; --chip-teks:#a32a2a; --chip-titik:#ef4444; --chip-garis:#f9d6d6; }
.saj-chip-baris .saj-chip:nth-child(8n + 7) { --chip-latar:#fbf3dd; --chip-teks:#7a5a00; --chip-titik:#d0a450; --chip-garis:#f2e4bd; }
.saj-chip-baris .saj-chip:nth-child(8n + 8) { --chip-latar:#eaedf6; --chip-teks:#303f73; --chip-titik:#4f5fa8; --chip-garis:#d8ddee; }

/* varian chip padat (teks putih) untuk lencana kecil dengan warna gelap */
.saj-chip--padat { background: var(--chip-titik, var(--saj-primer)); color: #fff; border-color: transparent; }
.saj-chip--padat::before { background: rgba(255, 255, 255, .8); }

/* --- Latar bergradien lembut (premium) ---------------------------------- */
.saj-hero {
  background:
    radial-gradient(46% 42% at 12% 0%, rgba(46, 124, 246, .13), transparent 66%),
    radial-gradient(38% 38% at 88% 6%, rgba(224, 123, 0, .10), transparent 66%),
    radial-gradient(40% 40% at 60% 100%, rgba(8, 145, 178, .08), transparent 70%);
}
.saj-sec--terang {
  background:
    radial-gradient(58% 48% at 8% 0%, rgba(46, 124, 246, .10), transparent 62%),
    radial-gradient(46% 42% at 92% 8%, rgba(8, 145, 178, .10), transparent 62%),
    radial-gradient(60% 56% at 50% 100%, rgba(90, 45, 156, .08), transparent 64%),
    linear-gradient(180deg, #fbfdff, #ffffff 62%);
}
.saj-sec--latar {
  background:
    radial-gradient(50% 40% at 100% 0%, rgba(46, 124, 246, .07), transparent 60%),
    var(--saj-latar-2);
}

/* --- Tombol utama bergradien (lebih hidup, kontras tetap aman) ---------- */
.saj-btn--utama {
  background: linear-gradient(135deg, #2e7cf6 0%, #0f9bd0 100%);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 6px 16px rgba(46, 124, 246, .22);
}
.saj-btn--utama:hover { background: linear-gradient(135deg, #1b5fd0 0%, #0b7fa8 100%); }

/* --- Kartu bantuan mengapung + tombol WhatsApp -------------------------- */
.saj-bantuan {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
}
.saj-bantuan > * { pointer-events: auto; }

.saj-bantuan__kartu {
  position: relative;
  width: min(292px, calc(100vw - 28px));
  background: #fff;
  border: 1px solid var(--saj-garis);
  border-radius: 18px;
  box-shadow: var(--saj-bayang-2);
  padding: 14px;
  text-align: left;
}
.saj-bantuan__tutup {
  position: absolute;
  top: 4px;
  right: 8px;
  border: 0;
  background: transparent;
  color: var(--saj-teks-2);
  font-size: 22px;
  line-height: 1;
  padding: 4px;
  cursor: pointer;
  border-radius: 8px;
}
.saj-bantuan__tutup:hover { color: var(--saj-teks); background: var(--saj-latar-3); }
.saj-bantuan__judul { font-weight: 700; margin: 0 0 4px; font-size: 15.5px; }
.saj-bantuan__teks { font-size: 13.5px; color: var(--saj-teks-2); margin: 0 0 10px; }
.saj-bantuan__kartu .saj-btn + .saj-btn { margin-top: 8px; }

.saj-wa-float {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 50px;
  padding: 12px 18px;
  background: linear-gradient(135deg, #25d366 0%, #14a94b 100%);
  color: #ffffff;
  box-shadow: 0 8px 22px rgba(20, 169, 75, .32);
}
.saj-wa-float:hover { background: linear-gradient(135deg, #1ea855 0%, #0f8b3c 100%); color: #fff; }
.saj-wa-float__ikon { width: 24px; height: 24px; flex: 0 0 auto; }
.saj-wa-float span { display: inline; font-size: 15px; font-weight: 700; }
@media (max-width: 420px) {
  .saj-wa-float { padding: 12px; }
  .saj-wa-float span { display: none; }
}

/* tombol "ke atas" dipindah ke kiri bawah agar tidak bertabrakan dengan bantuan */
.saj-ke-atas {
  right: auto;
  left: max(14px, env(safe-area-inset-left));
  bottom: calc(14px + env(safe-area-inset-bottom));
}

@media (prefers-reduced-motion: no-preference) {
  .saj-bantuan__kartu { animation: saj-muncul-kartu .3s ease both; }
  @keyframes saj-muncul-kartu {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
  }
}

/* ==========================================================================
   20. Tombol & popup chat (gaya disamakan dengan acuan) + latar biru-hijau
   Catatan: pakai palet biru-hijau milik sajoo (#12A0C9 -> #21C55D), bukan
   menyalin warna pihak lain. Bentuk & susunan mengikuti pola: ikon WhatsApp +
   dua baris teks ("Hubungi Kami" / "Online 24 Jam"); di layar kecil teks
   disembunyikan sehingga hanya ikon bulat yang tampil.
   ========================================================================== */

.saj-wa-float {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 6px 14px;
  background: linear-gradient(26.57deg, #12a0c9 8%, #21c55d 92%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 28px 28px 0 0;
  box-shadow: 0 0 1px 1px rgba(255, 255, 255, .45), 0 4px 10px -2px rgba(16, 24, 40, .18);
}
.saj-wa-float:hover {
  background: linear-gradient(26.57deg, #0f8fb5 8%, #1aad50 92%);
  color: #ffffff;
}
.saj-wa-float__ikon { width: 30px; height: 30px; flex: 0 0 auto; }
.saj-wa-float__label {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.15;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
}
.saj-wa-float__label span { display: block; white-space: nowrap; }

/* layar kecil: hanya ikon bulat, teks hilang agar tidak menutupi layar */
@media (max-width: 480px) {
  .saj-wa-float {
    width: 56px;
    height: 56px;
    min-height: 56px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }
  .saj-wa-float__label { display: none; }
}

.saj-bantuan__kartu { border-radius: 12px; padding: 12px 12px 12px; }
.saj-bantuan__judul { font-size: 15px; }

/* --- Latar biru-hijau (senada permintaan) ------------------------------- */
body {
  background:
    linear-gradient(180deg, #f2f9ff 0%, #f5fbf7 55%, #f3f9ff 100%);
}
.saj-hero {
  background:
    radial-gradient(48% 44% at 10% 0%, rgba(46, 124, 246, .16), transparent 66%),
    radial-gradient(44% 42% at 90% 4%, rgba(34, 197, 94, .14), transparent 66%),
    radial-gradient(40% 40% at 55% 100%, rgba(8, 145, 178, .10), transparent 70%),
    linear-gradient(180deg, #f4faff, rgba(255, 255, 255, 0) 70%);
}
.saj-sec--terang {
  background:
    radial-gradient(52% 46% at 8% 0%, rgba(46, 124, 246, .13), transparent 62%),
    radial-gradient(48% 44% at 92% 6%, rgba(34, 197, 94, .13), transparent 62%),
    linear-gradient(180deg, #f6fbff, #ffffff 66%);
}
.saj-sec--latar {
  background:
    radial-gradient(52% 42% at 100% 0%, rgba(8, 145, 178, .10), transparent 62%),
    linear-gradient(180deg, #f3faf8, #f1f8ff);
}

/* ==========================================================================
   21. Header ramping di layar kecil (mengikuti pola acuan: strip promo tipis +
   satu baris logo & tombol menu). Menu memakai kotak centang + CSS, jadi tetap
   bisa dibuka walaupun JavaScript dimatikan.
   ========================================================================== */

.saj-nav__dalam { position: relative; flex-wrap: nowrap; align-items: center; }

/* kotak centang tersembunyi (pengendali menu) */
.saj-nav__toggle-in {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.saj-nav__toggle {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  border: 1px solid var(--saj-garis);
  border-radius: 12px;
  background: #fff;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
}
.saj-nav__toggle span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--saj-teks);
  transition: transform .18s ease, opacity .18s ease;
}

.saj-nav__panel {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1 1 auto;
}

/* --- layar kecil: satu baris saja, menu dibuka saat tombol ditekan -------- */
@media (max-width: 899px) {
  .saj-nav__toggle { display: inline-flex; }
  .saj-nav__panel { display: none; }

  #saj-menu:checked ~ .saj-nav__panel {
    display: block;
    position: absolute;
    left: calc(var(--saj-pad) * -1);
    right: calc(var(--saj-pad) * -1);
    top: 100%;
    padding: 10px var(--saj-pad) 16px;
    background: #fff;
    border-bottom: 1px solid var(--saj-garis);
    box-shadow: 0 16px 30px rgba(15, 23, 42, .12);
  }

  .saj-nav__tautan {
    flex-direction: column;
    flex: none;
    order: 0;
    gap: 2px;
    overflow: visible;
    padding-bottom: 0;
    mask-image: none;
    -webkit-mask-image: none;
  }
  .saj-nav__tautan a {
    padding: 12px 10px;
    border-radius: 10px;
    font-size: 16px;
    width: 100%;
  }
  .saj-nav__aksi {
    margin: 10px 0 0;
    order: 0;
    flex-wrap: wrap;
  }
  .saj-nav__aksi .saj-btn { flex: 1 1 auto; }

  /* tombol menu berubah menjadi silang saat menu terbuka */
  #saj-menu:checked ~ .saj-nav__toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  #saj-menu:checked ~ .saj-nav__toggle span:nth-child(2) { opacity: 0; }
  #saj-menu:checked ~ .saj-nav__toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}

/* --- layar besar: seperti semula (menu mendatar + tombol) ---------------- */
@media (min-width: 900px) {
  .saj-nav__toggle,
  .saj-nav__toggle-in { display: none; }
  .saj-nav__panel { flex-wrap: wrap; }
}

/* strip promo dibuat tipis & ringkas di HP */
@media (max-width: 899px) {
  .saj-bar-promo {
    font-size: 12.5px;
    line-height: 1.35;
    padding: 7px 14px;
  }
  .saj-nav__dalam { padding-block: 8px; }
  .saj-nav__merek img { height: 30px; }
}

/* strip promo: paksa satu baris (teks dipotong dengan elipsis, tautan tetap tampil) */
.saj-bar-promo { flex-wrap: nowrap; }
.saj-bar-promo__teks { min-width: 0; flex: 0 1 auto; }

/* kartu bantuan dibuat ringkas di HP agar tidak menutupi layar */
@media (max-width: 480px) {
  .saj-bantuan__kartu { width: min(250px, calc(100vw - 28px)); padding: 10px 12px; }
  .saj-bantuan__judul { font-size: 14.5px; padding-right: 18px; }
  .saj-bantuan__teks { display: none; }
  .saj-bantuan__kartu .saj-btn { min-height: 42px; padding: 8px 14px; font-size: 14.5px; }
}

/* strip promo: teks utuh, boleh turun baris (tanpa potongan/elipsis) */
.saj-bar-promo { flex-wrap: wrap; row-gap: 2px; }
.saj-bar-promo__teks { overflow: visible; text-overflow: clip; white-space: normal; }

/* chips hero: lebar sama kiri-kanan, isi di tengah (pola acuan) */
.saj-hero .saj-chip-baris {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
}
@media (min-width: 560px) {
  .saj-hero .saj-chip-baris { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.saj-hero .saj-chip {
  width: 100%;
  justify-content: center;
  text-align: center;
  padding: 8px 12px;
}

/* tab segmen: baris tipis bisa digeser + panel jadi kartu (agar tidak menumpuk di HP) */
.saj-tab__bar {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.saj-tab__bar::-webkit-scrollbar { display: none; }
.saj-tab__label { flex: 0 0 auto; }
@media (max-width: 899px) {
  /* label aktif selalu di tengah, diapit label lain (rasa berputar) */
  .saj-tab__bar::before,
  .saj-tab__bar::after {
    content: "";
    flex: 0 0 calc(50% - 42px);
  }
  .saj-tab__label { font-size: 13px; padding: 7px 12px; }
  .saj-tab__label--bayangan { opacity: .7; }
  .saj-tab__panel {
    background: #fff;
    border: 1px solid var(--saj-garis);
    border-radius: 18px;
    padding: 10px;
    box-shadow: var(--saj-bayang);
  }
  .saj-tab__panel .saj-shot { border-radius: 14px; }
  .saj-tab__panel .saj-tab__judul { margin-top: 10px; }
}
@media (min-width: 900px) {
  .saj-tab__bar { flex-wrap: wrap; overflow: visible; padding-bottom: 0; }
}

/* baris tab: jangan melebar melewati layar (bisa digeser di dalam kotaknya) */
.saj-tab { min-width: 0; }
.saj-tab__bar { min-width: 0; flex: 1 1 100%; width: 100%; }

/* kolom hero: batasi agar isi tidak melebar melewati layar (baris tab digeser di dalam) */
@media (max-width: 939px) {
  .saj-hero__grid { grid-template-columns: minmax(0, 1fr); }
}
.saj-hero__grid > * { min-width: 0; max-width: 100%; }
.saj-tab { max-width: 100%; }
.saj-tab__bar { max-width: 100%; }

/* figure bawaan peramban punya margin 40px kiri-kanan -> gambar jadi mengecil; nolkan */
.saj-shot { margin: 0; }

/* di layar HP gambar dibuat 4/3 (lebih besar & simetris); di tablet ke atas tetap 16/9 */
@media (max-width: 560px) {
  .saj-tab__panel .saj-shot { aspect-ratio: 4 / 3; }
}


/* ------------------------------------- 24. Kartu unggulan QRIS bertagihan */
.saj-qris__kartu {
  position: relative;
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  align-items: center;
  gap: clamp(20px, 4vw, 44px);
  padding: clamp(20px, 3.6vw, 44px);
  border-radius: 24px;
  color: #fff;
  overflow: hidden;
  background:
    radial-gradient(115% 115% at 88% 6%, rgba(240, 180, 41, .24) 0%, rgba(240, 180, 41, 0) 44%),
    linear-gradient(135deg, #0a2650 0%, #15417d 48%, #0c6d7c 100%);
  box-shadow: 0 18px 46px rgba(10, 38, 80, .3);
}
.saj-qris__label {
  display: inline-block;
  margin: 0 0 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.saj-qris__kartu h2 { color: #fff; font-size: clamp(21px, 3vw, 30px); }
.saj-qris__sub { margin: 0 0 18px; color: rgba(255, 255, 255, .87); font-size: clamp(14.5px, 1.4vw, 16.5px); }
.saj-qris__daftar { display: grid; gap: 14px; margin: 0 0 20px; padding: 0; list-style: none; }
.saj-qris__daftar li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; }
.saj-qris__daftar strong { display: block; font-size: 15.5px; }
.saj-qris__daftar li > div > span { color: rgba(255, 255, 255, .82); font-size: 14.5px; line-height: 1.55; }
.saj-qris__tanda {
  position: relative;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  background: rgba(240, 180, 41, .2);
  border: 1px solid rgba(240, 180, 41, .55);
}
.saj-qris__tanda::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 6px;
  height: 11px;
  border-right: 2px solid #f0b429;
  border-bottom: 2px solid #f0b429;
  transform: rotate(42deg);
}
.saj-qris__kaki { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.saj-qris__paket { font-size: 13.5px; color: rgba(255, 255, 255, .84); }
.saj-qris__catatan { margin: 16px 0 0; font-size: 13px; color: rgba(255, 255, 255, .68); }
.saj-btn--emas { background: linear-gradient(135deg, #f7c948, #e0910b); color: #2a1a00; }
.saj-btn--emas:hover { color: #2a1a00; background: linear-gradient(135deg, #ffd35e, #eda211); }

.saj-qris__visual { display: grid; place-items: center; }
.saj-qris__telepon {
  width: 100%;
  max-width: 320px;
  padding: 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
}
.saj-qris__notif {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  background: #fff;
  color: #10233d;
  box-shadow: 0 10px 24px rgba(4, 18, 38, .24);
}
.saj-qris__notif-ikon { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, #12a0c9, #21c55d); }
.saj-qris__notif-judul { margin: 0; font-size: 13px; font-weight: 700; color: #4a5a70; }
.saj-qris__notif-nominal { margin: 2px 0 0; font-family: var(--saj-font-judul); font-size: 22px; font-weight: 700; }
.saj-qris__notif-ket { margin: 2px 0 0; font-size: 12.5px; color: #5c6b80; }
.saj-qris__notif-ket em { font-style: normal; opacity: .7; }
.saj-qris__baris {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .12);
  font-size: 13.5px;
}
.saj-qris__lunas {
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(33, 197, 93, .24);
  border: 1px solid rgba(33, 197, 93, .5);
  font-size: 12px;
  font-weight: 700;
}
@media (max-width: 899px) {
  /* rapatkan agar kartu tidak jadi blok panjang di layar HP */
  .saj-qris__kartu { grid-template-columns: minmax(0, 1fr); padding: 18px; gap: 16px; border-radius: 20px; }
  .saj-qris__label { margin-bottom: 8px; }
  .saj-qris__kartu h2 { font-size: 20px; }
  .saj-qris__sub { margin-bottom: 14px; font-size: 14px; }
  .saj-qris__daftar { gap: 11px; margin-bottom: 16px; }
  .saj-qris__daftar strong { font-size: 14.5px; }
  .saj-qris__daftar li > div > span { font-size: 13.5px; }
  .saj-qris__catatan { margin-top: 12px; font-size: 12.5px; }
  .saj-qris__telepon { max-width: 100%; }
}

/* chip hero di layar sangat kecil (<=345px): kunci 2 kolom sama lebar, teks tengah,
   supaya tidak ada chip yang terlihat tidak rapi/bergantung lebar teks */
@media (max-width: 345px) {
  .saj-chip-baris { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .saj-chip { justify-content: center; text-align: center; height: 60px; }
}

/* ------------------------------------------- 25. Toko online sendiri (Katalog Online) */
.saj-toko {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(20px, 4vw, 44px);
  padding: clamp(20px, 3.6vw, 40px);
  border-radius: 24px;
  border: 1px solid var(--saj-garis);
  background: linear-gradient(135deg, #fff 0%, #f2f8ff 55%, #eefaf7 100%);
  box-shadow: 0 14px 36px rgba(15, 42, 80, .08);
}
.saj-toko__label {
  display: inline-block;
  margin: 0 0 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #e8f0fe;
  color: #1b5fd0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.saj-toko h2 { font-size: clamp(21px, 3vw, 30px); }
.saj-toko__sub { margin: 0 0 18px; color: var(--saj-teks-2); }
.saj-toko__daftar { display: grid; gap: 14px; margin: 0 0 20px; padding: 0; list-style: none; }
.saj-toko__daftar li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; }
.saj-toko__daftar strong { display: block; font-size: 15.5px; }
.saj-toko__daftar li > div > span { color: var(--saj-teks-2); font-size: 14.5px; line-height: 1.55; }
.saj-toko__daftar em { font-style: normal; font-weight: 700; color: var(--saj-primer-gelap); overflow-wrap: anywhere; }
.saj-toko__tanda { position: relative; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: #e8f0fe; border: 1px solid #c9dcfb; }
.saj-toko__tanda::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 6px;
  height: 11px;
  border-right: 2px solid #2e7cf6;
  border-bottom: 2px solid #2e7cf6;
  transform: rotate(42deg);
}
.saj-toko__kaki { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.saj-toko__badge { font-size: 13.5px; color: var(--saj-teks-2); }
.saj-toko__visual { display: grid; gap: 10px; justify-items: center; }
.saj-toko__layar {
  width: 100%;
  max-width: 340px;
  padding: 14px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--saj-garis);
  box-shadow: 0 12px 30px rgba(15, 42, 80, .12);
}
.saj-toko__alamat {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: var(--saj-latar-2);
  font-size: 12.5px;
  color: var(--saj-teks-2);
  overflow-wrap: anywhere;
}
.saj-toko__titik { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(135deg, #12a0c9, #21c55d); }
.saj-toko__produk { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; margin-top: 10px; padding: 10px; border-radius: 12px; background: var(--saj-latar-2); }
.saj-toko__foto { width: 44px; height: 44px; border-radius: 10px; background: linear-gradient(135deg, #dbe8ff, #cdeee4); }
.saj-toko__nama { margin: 0; font-size: 13.5px; font-weight: 700; }
.saj-toko__harga { margin: 2px 0 0; font-family: var(--saj-font-judul); font-size: 13.5px; color: var(--saj-primer-gelap); }
.saj-toko__keranjang {
  margin-top: 12px;
  padding: 11px 12px;
  border-radius: 12px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #2e7cf6, #0c9a9a);
}
.saj-toko__keterangan { margin: 0; font-size: 12px; color: var(--saj-teks-2); }
@media (max-width: 899px) {
  .saj-toko { grid-template-columns: minmax(0, 1fr); padding: 18px; gap: 16px; border-radius: 20px; }
  .saj-toko h2 { font-size: 20px; }
  .saj-toko__sub { margin-bottom: 14px; font-size: 14px; }
  .saj-toko__daftar { gap: 11px; margin-bottom: 16px; }
  .saj-toko__daftar strong { font-size: 14.5px; }
  .saj-toko__daftar li > div > span { font-size: 13.5px; }
  .saj-toko__layar { max-width: 100%; }
}