/* ══════════════════════════════════════════════════════════════════════
   JRM Katalog — gaya hadapan
   Semua pemilih bermula dengan .jrm-katalog supaya tidak melanggar tema.
   Tukar warna di blok pertama sahaja.
   ══════════════════════════════════════════════════════════════════════ */

.jrm-katalog{
  --brand:#5C1226;
  --brand-hover:#8A2440;
  --brand-ink:#2C0A14;
  --gold:#A9843F;
  --gold-soft:#D8BC85;
  --rose:#C9A6AF;
  --ivory:#F6F1E7;
  --ink:#221E1C;
  --body:#4E4744;
  --muted:#665C56;
  --line:#EBE4DA;
  --line-2:#C9BFB2;
  --wa:#1F8F4E;

  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);
  font-size:16px;
  line-height:1.6;
}
.jrm-katalog *,.jrm-katalog *::before,.jrm-katalog *::after{box-sizing:border-box}
.jrm-katalog img{max-width:100%;height:auto;display:block}
.jrm-katalog a{text-decoration:none;color:inherit}
.jrm-katalog :focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* Templat penuh (single / arkib) diberi lebar dan ruang sendiri */
.jrmk-single,.jrmk-arkib{
  max-width:1240px;margin:0 auto;background:#fff;
  padding:clamp(28px,5vw,64px) clamp(20px,4vw,32px) clamp(48px,7vw,88px);
}

/* ── Tipografi ──────────────────────────────────────────────────────── */
.jrm-katalog h1,.jrm-katalog h2,.jrm-katalog h3{margin:0;font-weight:600;color:var(--brand-ink);letter-spacing:-.03em;line-height:1.14}
.jrmk-single-tajuk,.jrmk-arkib-tajuk{font-size:clamp(28px,4vw,44px)}
.jrmk-tajuk{font-size:clamp(22px,2.8vw,32px)}
.jrmk-eyebrow{
  margin:0 0 12px;font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brand);
}
.jrmk-arkib-teks{margin:16px 0 0;max-width:56ch;font-size:16px;color:var(--body)}
.jrmk-kosong{margin:0;padding:28px;background:var(--ivory);color:var(--body);font-size:15px}
.jrmk-kosong a{color:var(--brand);font-weight:600;border-bottom:1px solid var(--rose)}

/* ── Butang ─────────────────────────────────────────────────────────── */
.jrm-katalog .jrmk-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;border:0;border-radius:2px;cursor:pointer;
  font-size:14px;font-weight:600;letter-spacing:.03em;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
.jrm-katalog .jrmk-btn:hover{transform:translateY(-2px)}
.jrm-katalog .jrmk-btn-brand{background:var(--brand);color:#fff}
.jrm-katalog .jrmk-btn-brand:hover{background:var(--brand-hover);color:#fff}
.jrm-katalog .jrmk-btn-line{border:1px solid var(--line-2);color:var(--ink);background:transparent}
.jrm-katalog .jrmk-btn-line:hover{border-color:var(--brand);color:var(--brand)}
.jrm-katalog .jrmk-btn-wa{background:var(--wa);color:#fff}
.jrm-katalog .jrmk-btn-wa:hover{background:#186F3D;color:#fff}
.jrmk-pautan{
  font-size:13px;font-weight:600;letter-spacing:.05em;color:var(--brand);
  border-bottom:1px solid var(--rose);padding-bottom:3px;
}
.jrmk-pautan:hover{border-bottom-color:var(--brand)}
.jrmk-lagi{margin:36px 0 0}

/* ── Kepala seksyen + navigasi karusel ──────────────────────────────── */
.jrmk-kepala{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:28px}
.jrmk-rail-nav{display:flex;gap:10px;margin-left:auto}
.jrmk-rail-nav button{
  width:48px;height:48px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-2);background:#fff;color:var(--ink);cursor:pointer;border-radius:2px;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease;
}
.jrmk-rail-nav button:hover{background:var(--brand);border-color:var(--brand);color:#fff}

/* ── Rail & grid ────────────────────────────────────────────────────── */
.jrmk-rail{
  display:flex;align-items:stretch;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 2px 10px;scrollbar-width:none;-ms-overflow-style:none;
}
/* JANGAN tetapkan height pada kad di sini. Dalam flexbox, height yang
   eksplisit membatalkan align-self:stretch dan kad berhenti sama tinggi. */
.jrmk-rail::-webkit-scrollbar{display:none}
.jrmk-rail>*{flex:none;width:320px;max-width:calc(100vw - 72px);scroll-snap-align:start}
.jrmk-grid{display:grid;align-items:stretch;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:24px}
.jrmk-grid-dealer{grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}
.jrmk-blok{margin-top:clamp(48px,7vw,80px)}

/* ── Ruang gambar gantian ───────────────────────────────────────────── */
.jrmk-slot{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--ivory);color:#736758;font-size:12px;letter-spacing:.06em;text-align:center;padding:16px;
}
.jrmk-slot::after{content:"";position:absolute;inset:10px;border:1px dashed var(--rose);opacity:.7}

/* ── Kad produk ─────────────────────────────────────────────────────── */
.jrmk-kad{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease;
}
.jrmk-kad:hover{border-color:var(--brand);box-shadow:0 26px 46px -30px rgba(44,10,20,.5);transform:translateY(-4px)}
.jrmk-kad-vis{position:relative;display:block;background:var(--ivory);overflow:hidden}
.jrmk-pita{
  position:absolute;top:0;left:0;z-index:2;background:var(--brand);color:var(--ivory);
  font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;padding:8px 12px;
}
.jrmk-kad-isi{flex:1;display:flex;flex-direction:column;gap:8px;padding:22px 20px}
/* Tajuk dikunci pada 2 baris dan teks pada 3 baris, supaya blok teks setiap
   kad sama tinggi walaupun panjang nama dan keterangan produk berbeza. */
.jrmk-kad-tajuk{
  font-size:19px;letter-spacing:-.02em;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.6em;
}
.jrmk-kad-tajuk a:hover{color:var(--brand)}
.jrmk-kad-teks{
  margin:0;font-size:14.5px;font-weight:300;line-height:1.7;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;min-height:5.1em;
}
.jrmk-harga{margin:auto 0 0;padding-top:14px;display:flex;align-items:baseline;gap:10px}
.jrmk-harga b{font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--muted)}
.jrmk-harga s{font-size:13px;color:var(--muted);opacity:.8}
.jrmk-harga-besar b{font-size:30px}
.jrmk-kad-cta{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-top:1px solid var(--line);padding:15px 20px;
  font-size:13px;font-weight:600;letter-spacing:.05em;color:var(--brand);
  transition:background-color .2s ease,color .2s ease;
}
.jrmk-kad-cta:hover{background:var(--brand);color:#fff}

/* ── Kad dealer ─────────────────────────────────────────────────────── */
.jrmk-dealer{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  transition:border-color .25s ease,box-shadow .25s ease;
}
.jrmk-dealer:hover{border-color:var(--brand);box-shadow:0 26px 46px -30px rgba(44,10,20,.4)}
.jrmk-dealer-vis{position:relative;display:block;width:100%;background:#fff;overflow:hidden}

/* ── Kotak gambar persegi ────────────────────────────────────────────
   Kotak dipaksa persegi melalui DUA cara sekali gus: aspect-ratio, dan
   ::before berpadding 100% sebagai sandaran. Gambar pula dipaksa mengisi
   kotak dengan !important, kerana kebanyakan tema WordPress menetapkan
   img{height:auto} atau img{max-width:100%} dengan keutamaan yang
   mengatasi peraturan plugin — itulah punca gambar tidak selari.
   ─────────────────────────────────────────────────────────────────── */
.jrmk-kad-vis,.jrmk-dealer-vis{aspect-ratio:1/1}
.jrmk-kad-vis::before,.jrmk-dealer-vis::before{content:"";display:block;padding-top:100%}
.jrmk-kad-vis .jrmk-img,.jrmk-dealer-vis .jrmk-img,
.jrmk-kad-vis img,.jrmk-dealer-vis img{
  position:absolute!important;top:0!important;left:0!important;
  width:100%!important;height:100%!important;
  max-width:none!important;max-height:none!important;min-height:0!important;
  margin:0!important;padding:0!important;border-radius:0!important;
  object-fit:cover!important;object-position:center!important;
  display:block!important;
}

.jrmk-dealer-isi{flex:1;display:flex;flex-direction:column;gap:10px;padding:24px 22px}
.jrmk-peranan{margin:0;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.jrmk-dealer-tajuk{
  font-size:20px;letter-spacing:-.02em;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.6em;
}
.jrmk-dealer-tajuk a:hover{color:var(--brand)}
.jrmk-baris{margin:0;display:flex;gap:10px;font-size:14.5px;line-height:1.7;color:var(--body)}
.jrmk-baris svg{flex:none;margin-top:4px;color:var(--rose)}
.jrmk-baris a:hover{color:var(--brand)}
.jrmk-dealer-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:auto;padding-top:16px}
.jrmk-dealer-cta .jrmk-btn{padding:13px 22px}

/* ── Halaman single ─────────────────────────────────────────────────── */
.jrmk-breadcrumb{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--muted);margin-bottom:28px}
.jrmk-breadcrumb a:hover{color:var(--brand)}
.jrmk-single-atas{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:start}
/* Halaman dealer: kandungan kanan dipusatkan menegak dengan gambar */
.jrmk-single.is-dealer .jrmk-single-atas{align-items:center}
.jrmk-single.is-dealer .jrmk-single-vis{max-height:560px}
.jrmk-single-vis{position:relative;aspect-ratio:4/5;background:#fff;overflow:hidden;border-radius:0}
.jrmk-single-vis .jrmk-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.jrmk-single-isi{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.jrmk-teks{font-size:16px;line-height:1.8;color:var(--body)}
.jrmk-teks p{margin:0 0 1em}
.jrmk-teks p:last-child{margin-bottom:0}
.jrmk-single-nota{
  margin:0;padding:16px 18px;background:var(--ivory);border-left:2px solid var(--gold);
  font-size:14.5px;line-height:1.7;color:var(--body);
}
.jrmk-butiran{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.jrmk-butiran li{display:flex;gap:10px;font-size:15px;line-height:1.7;color:var(--body)}
.jrmk-butiran svg{flex:none;margin-top:5px;color:var(--rose)}
@media (max-width:820px){
  .jrmk-single-atas{grid-template-columns:1fr}
  .jrmk-single-vis{max-width:400px}
}

/* ── Arkib ──────────────────────────────────────────────────────────── */
.jrmk-arkib-kepala{margin-bottom:32px}
.jrmk-tapis{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px}
.jrmk-cip{
  padding:9px 18px;border:1px solid var(--line-2);border-radius:40px;
  font-size:13px;font-weight:500;color:var(--body);
  transition:background-color .2s ease,border-color .2s ease,color .2s ease;
}
.jrmk-cip:hover{border-color:var(--brand);color:var(--brand)}
.jrmk-cip.is-aktif{background:var(--brand);border-color:var(--brand);color:#fff}
.jrmk-pagination{display:flex;justify-content:center;gap:8px;margin-top:44px;font-size:14px}
.jrmk-pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;
  padding:0 12px;border:1px solid var(--line);color:var(--body);
}
.jrmk-pagination .page-numbers:hover{border-color:var(--brand);color:var(--brand)}
.jrmk-pagination .page-numbers.current{background:var(--brand);border-color:var(--brand);color:#fff}

/* ── Halaman produk: bilangan pada cip + jalur CTA ──────────────────── */
.jrmk-halaman{width:100%}
.jrmk-halaman-isi{padding-bottom:0}
.jrmk-bil{
  margin-left:7px;font-size:11px;font-weight:600;color:var(--muted);
  border:1px solid var(--line);border-radius:20px;padding:1px 7px;
}
.jrmk-cip.is-aktif .jrmk-bil{color:#fff;border-color:rgba(255,255,255,.45)}
.jrmk-cta{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;
  margin-top:clamp(48px,7vw,80px);padding:clamp(28px,4vw,44px);
  background:var(--ivory);border-left:2px solid var(--gold);
}
.jrmk-cta p{margin:12px 0 0;font-size:15.5px;font-weight:300;line-height:1.7;color:var(--body);max-width:48ch}
.jrmk-cta-butang{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:560px){.jrmk-cta .jrmk-btn{width:100%}}

/* ── Aktiviti (daripada Pos WordPress) ──────────────────────────────── */
.jrmk-grid-akt{grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:36px 28px}
.jrmk-rail-akt>*{width:340px}
.jrmk-akt{display:flex;flex-direction:column}
.jrmk-akt-vis{
  position:relative;display:block;aspect-ratio:3/2;background:var(--ivory);overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease;
}
.jrmk-akt:hover .jrmk-akt-vis{transform:translateY(-4px);box-shadow:0 26px 44px -30px rgba(44,10,20,.5)}
.jrmk-akt-vis .jrmk-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.jrmk-tarikh{
  position:absolute;top:0;left:0;z-index:2;background:var(--brand);color:var(--ivory);
  padding:12px 14px;text-align:center;line-height:1;
}
.jrmk-tarikh b{display:block;font-size:22px;font-weight:700;letter-spacing:-.02em}
.jrmk-tarikh span{display:block;margin-top:5px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.9}
.jrmk-akt-isi{display:flex;flex-direction:column;gap:8px;padding-top:18px}
.jrmk-jenis{margin:0;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.jrmk-akt-tajuk{font-size:19px;letter-spacing:-.02em}
.jrmk-akt-tajuk a:hover{color:var(--brand)}
.jrmk-akt-teks{margin:0;font-size:14.5px;font-weight:300;line-height:1.75;color:var(--body)}
.jrmk-akt .jrmk-pautan{align-self:flex-start;margin-top:4px}

/* ── Harga ahli / bukan ahli ────────────────────────────────────────── */
.jrmk-harga em{font-style:normal;font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
/* Harga ahli ialah angka utama pada kad — lebih besar daripada harga bukan ahli */
.jrmk-harga-ahli{
  margin:8px 0 0;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;
  padding-top:10px;border-top:1px dashed var(--line);
}
.jrmk-harga-ahli span{
  width:100%;font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);
}
.jrmk-harga-ahli b{font-size:28px;font-weight:700;letter-spacing:-.03em;line-height:1.1;color:var(--brand)}

.jrmk-harga-dua{display:flex;flex-wrap:wrap;gap:12px;width:100%}
.jrmk-harga-kotak{
  flex:1 1 150px;display:flex;flex-direction:column;gap:6px;
  padding:16px 18px;background:var(--ivory);border-top:2px solid var(--line-2);
}
.jrmk-harga-kotak span{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.jrmk-harga-kotak b{font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--muted);line-height:1}
.jrmk-harga-kotak s{font-size:13px;color:var(--muted);opacity:.85}
/* Kotak harga ahli — lebih lebar, angka lebih besar, warna penuh */
.jrmk-harga-kotak.is-ahli{
  flex:1.4 1 210px;padding:22px 24px;
  background:var(--brand);border-top-color:var(--gold);
}
.jrmk-harga-kotak.is-ahli span{font-size:11.5px;color:var(--gold-soft)}
.jrmk-harga-kotak.is-ahli b{font-size:clamp(34px,4.4vw,44px);font-weight:700;letter-spacing:-.035em;color:#fff}
.jrmk-harga-nota{margin:0;font-size:13.5px;line-height:1.7;color:var(--muted)}

/* ── Anchor ke senarai dealer pada halaman produk ───────────────────── */
#jrmk-dealer-produk{scroll-margin-top:100px}

/* Pada telefon, senarai dealer di halaman produk dipaparkan dua lajur
   supaya halaman tidak menjadi terlalu panjang bila dealer ramai.
   Diskop kepada #jrmk-dealer-produk sahaja — arkib dealer dan
   shortcode [jrm_dealer] kekal satu lajur yang lebih lapang. */
@media (max-width:600px){
  #jrmk-dealer-produk .jrmk-grid-dealer{grid-template-columns:1fr 1fr;gap:14px}
  #jrmk-dealer-produk .jrmk-dealer-isi{padding:15px 13px;gap:7px}
  #jrmk-dealer-produk .jrmk-peranan{font-size:9.5px;letter-spacing:.12em}
  #jrmk-dealer-produk .jrmk-dealer-tajuk{font-size:15.5px;line-height:1.25}
  #jrmk-dealer-produk .jrmk-baris{font-size:12.5px;line-height:1.55;gap:7px}
  #jrmk-dealer-produk .jrmk-baris svg{width:12px;height:12px;margin-top:3px}
  #jrmk-dealer-produk .jrmk-dealer-cta{gap:9px;padding-top:12px}
  #jrmk-dealer-produk .jrmk-dealer-cta .jrmk-btn{
    width:100%;padding:11px 8px;font-size:11.5px;gap:6px;letter-spacing:.02em;
  }
  #jrmk-dealer-produk .jrmk-pautan{font-size:12px}
}
.jrmk-bilangan{margin:0;margin-left:auto;font-size:13px;color:var(--muted)}
@media (max-width:520px){.jrmk-bilangan{margin-left:0}}

/* Latar putih penuh untuk halaman tunggal, mengatasi latar tema */
.jrmk-halaman,.jrmk-single,.jrmk-arkib{background:#fff}

/* ── Pastikan kandungan plugin guna lebar penuh, bukan lebar tema ───── */
.jrm-katalog{width:100%}
.jrmk-single,.jrmk-arkib,.jrmk-halaman{width:100%;max-width:1240px;margin-inline:auto}

/* ── Testimoni ───────────────────────────────────────────────────────
   Susunan "masonry" guna CSS columns: setiap kad ikut tinggi asli
   kandungannya, jadi gambar apa-apa saiz (screenshot panjang, foto
   melintang) dipaparkan PENUH tanpa dipotong dan tanpa ruang kosong.
   ─────────────────────────────────────────────────────────────────── */
.jrmk-testi-grid{column-width:300px;column-count:3;column-gap:24px}
.jrmk-testi-grid>.jrmk-testi{display:inline-flex;width:100%;margin:0 0 24px;break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid}
@media (max-width:640px){.jrmk-testi-grid{column-count:1}}

.jrmk-testi{
  flex-direction:column;background:#fff;border:1px solid var(--line);
  transition:border-color .25s ease,box-shadow .25s ease;
}
.jrmk-testi:hover{border-color:var(--line-2);box-shadow:0 22px 40px -30px rgba(44,10,20,.45)}
.jrmk-testi-media{display:flex;flex-direction:column;gap:2px;background:var(--ivory)}
.jrmk-testi-media+.jrmk-testi-media{margin-top:2px}

/* Gambar: lebar penuh kad, tinggi ikut nisbah asal. !important kerana
   banyak tema memaksa height/object-fit pada img. */
.jrmk-testi-img{display:block;cursor:zoom-in;line-height:0}
.jrm-katalog .jrmk-testi-img img{
  width:100%!important;height:auto!important;max-width:100%!important;max-height:none!important;
  object-fit:contain!important;
  position:static!important;margin:0!important;border-radius:0!important;display:block!important;
  /* WordPress 6.7+ memberi gambar lazy-load sizes="auto" dan
     contain-intrinsic-size:3000px 1500px — tanpa ini semua gambar
     tersekat pada tinggi 1500px dan nisbahnya rosak. */
  contain:none!important;contain-intrinsic-size:none!important;
}

/* Video YouTube: setiap video kotak 16:9 yang sama saiz */
.jrmk-yt{position:relative;width:100%;aspect-ratio:16/9;background:#000;overflow:hidden}
.jrmk-yt::before{content:"";display:block;padding-top:56.25%}
@supports (aspect-ratio:16/9){.jrmk-yt::before{display:none}}
.jrmk-yt-main,.jrmk-yt iframe{position:absolute!important;inset:0;width:100%!important;height:100%!important;border:0;display:block}
.jrm-katalog .jrmk-yt-main img{
  position:absolute!important;inset:0;width:100%!important;height:100%!important;max-width:none!important;
  object-fit:cover!important;margin:0!important;transition:transform .4s ease,opacity .25s ease;
}
.jrmk-yt-main:hover img{transform:scale(1.03);opacity:.9}
.jrmk-yt-butang{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);line-height:0;filter:drop-shadow(0 4px 12px rgba(0,0,0,.35));transition:transform .2s ease}
.jrmk-yt-main:hover .jrmk-yt-butang{transform:translate(-50%,-50%) scale(1.08)}

.jrmk-testi-isi{display:flex;flex-direction:column;gap:12px;padding:22px 22px 20px}
.jrmk-testi-teks{position:relative;font-size:15px;font-weight:300;line-height:1.75;color:var(--body)}
.jrmk-testi-teks p{margin:0 0 .8em}
.jrmk-testi-teks p:last-child{margin-bottom:0}
.jrmk-testi-teks::before{
  content:"\201C";display:block;height:.42em;margin-bottom:6px;
  font-family:Georgia,serif;font-size:52px;line-height:1;color:var(--gold-soft);
}
.jrmk-testi-orang{display:flex;align-items:center;gap:12px;padding-top:4px}
.jrmk-testi-avatar{
  flex:none;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--brand);color:var(--ivory);font-size:15px;font-weight:600;text-transform:uppercase;
}
.jrmk-testi-orang b{display:block;font-size:15px;font-weight:600;color:var(--brand-ink);line-height:1.3}
.jrmk-testi-orang small{display:block;font-size:12.5px;color:var(--muted);line-height:1.4}

/* Rail testimoni: kad tidak diregang sama tinggi */
.jrmk-rail-testi{align-items:flex-start}
.jrmk-rail-testi>*{width:340px}
.jrmk-rail-testi>.jrmk-testi{display:flex}

/* ── Lightbox gambar testimoni ──────────────────────────────────────── */
.jrmk-lb{
  position:fixed;inset:0;z-index:999999;display:flex;align-items:center;justify-content:center;
  padding:56px 16px 24px;background:rgba(20,8,12,.92);opacity:0;transition:opacity .2s ease;
}
.jrmk-lb.is-buka{opacity:1}
.jrmk-lb img{max-width:min(100%,1100px)!important;max-height:100%!important;width:auto!important;height:auto!important;object-fit:contain;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.jrmk-lb-tutup,.jrmk-lb-nav{
  position:absolute;display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;
  font-size:26px;line-height:1;cursor:pointer;transition:background-color .2s ease;
}
.jrmk-lb-tutup:hover,.jrmk-lb-nav:hover{background:rgba(255,255,255,.25)}
.jrmk-lb-tutup{top:12px;right:12px}
.jrmk-lb-nav{top:50%;transform:translateY(-50%)}
.jrmk-lb-nav.is-prev{left:12px}
.jrmk-lb-nav.is-next{right:12px}
.jrmk-lb-bil{position:absolute;top:24px;left:20px;font:500 13px/1 Inter,system-ui,sans-serif;color:rgba(255,255,255,.75)}
@media (max-width:640px){.jrmk-lb-nav{top:auto;bottom:16px;transform:none}}

/* ── Video YouTube di halaman produk ────────────────────────────────── */
.jrmk-video .jrmk-video-bingkai{width:100%;max-width:1200px;box-shadow:0 30px 60px -40px rgba(44,10,20,.55)}
.jrmk-video .jrmk-yt-butang svg{width:84px;height:59px}
/* Shorts: bingkai menegak 9:16, tidak terlalu tinggi pada desktop */
.jrmk-video.is-shorts .jrmk-video-bingkai{max-width:min(380px,100%)}
.jrmk-video.is-shorts .jrmk-yt{aspect-ratio:9/16}
.jrmk-video.is-shorts .jrmk-yt::before{padding-top:177.78%}
@media (max-width:600px){.jrmk-video .jrmk-yt-butang svg{width:68px;height:48px}}
/* Video halaman utama: tiada jarak atas berlebihan, pilihan di tengah */
.jrm-katalog>.jrmk-video-utama{margin-top:0}
.jrmk-video.is-tengah .jrmk-kepala{justify-content:center;text-align:center}
.jrmk-video.is-tengah .jrmk-arkib-teks{margin-inline:auto}
.jrmk-video.is-tengah .jrmk-video-bingkai{margin-inline:auto}