/* ==========================================================================
   BM Site - lapisan penyelaras tampilan bautmur.com
   Memakai sistem yang sama dengan panel admin (kartu, lencana, tabel,
   tombol) tetapi tetap memakai font, logo, dan tata letak template asli.
   ========================================================================== */

:root {
  --bm-primary:      #EB2127;
  --bm-primary-dark: #c4161c;
  --bm-primary-deep: #8f1013;
  --bm-primary-soft: rgba(235, 33, 39, .1);
  --bm-accent:       #F9C50B;
  --bm-ink:          #2f2a2a;
  --bm-muted:        #6e6664;
  --bm-faint:        #9a918f;
  --bm-soft:         #fdf6f6;
  --bm-line:         #f0e2e2;
  --bm-surface:      #ffffff;
  --bm-shadow:       0 1px 2px rgba(74, 30, 32, .05), 0 8px 24px rgba(74, 30, 32, .07);
  --bm-shadow-lg:    0 12px 40px rgba(74, 30, 32, .15);
  --bm-radius:       14px;
  --bm-ease:         cubic-bezier(.22, 1, .36, 1);
}

/* ==========================================================================
   1. Kepala halaman (memakai .breadcrumbs bawaan template)
   ========================================================================== */

.breadcrumbs {
  padding: 30px 0 26px;
  background: linear-gradient(120deg, #fdf6f6 0%, #fbeceb 60%, #f8e3e2 100%);
  border-bottom: 1px solid var(--bm-line);
  min-height: 0;
  position: relative;
  overflow: hidden;
}
/* garis aksen merah-emas di tepi bawah */
.breadcrumbs::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--bm-primary), var(--bm-primary-deep) 55%, var(--bm-accent));
}
.breadcrumbs h1 {
  margin: 0;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--bm-ink);
}
.breadcrumbs ol {
  margin: 0;
  font-size: 13px;
  color: var(--bm-muted);
}
.breadcrumbs ol li a { color: var(--bm-muted); text-decoration: none; }
.breadcrumbs ol li a:hover { color: var(--bm-primary); }
.breadcrumbs ol li + li::before { color: var(--bm-faint); }

@media (max-width: 575.98px) {
  .breadcrumbs .d-flex { flex-direction: column; align-items: flex-start !important; gap: 6px; }
  .breadcrumbs h1 { font-size: 20px; }
}

/* ==========================================================================
   2. Wadah halaman akun
   ========================================================================== */

.bm-akun { padding: 30px 0 60px; background: var(--bm-soft); }
.bm-akun + footer, .bm-akun + .bm-akun { margin-top: 0; }

.bm-judul {
  margin: 0 0 16px;
  font-size: 17px;
  font-weight: 600;
  color: var(--bm-ink);
}
.bm-judul span {
  display: block;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--bm-faint);
}

/* ==========================================================================
   3. Kartu
   ========================================================================== */

.bm-card {
  background: var(--bm-surface);
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius);
  box-shadow: var(--bm-shadow);
  overflow: hidden;
}
.bm-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px 0;
}
.bm-card__title {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--bm-ink);
}
.bm-card__sub {
  display: block;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--bm-faint);
}
.bm-card__body { padding: 16px 20px 20px; }

/* ---------------------------- kartu sambutan ---------------------------- */

.bm-sambut {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  padding: 22px 26px;
  margin-bottom: 22px;
  border-radius: var(--bm-radius);
  color: #fff;
  background: linear-gradient(120deg, var(--bm-primary-deep) 0%, #b5141b 52%, var(--bm-primary) 100%);
  box-shadow: var(--bm-shadow);
}
.bm-sambut::after {
  content: '';
  position: absolute;
  right: -70px; top: -90px;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(249, 197, 11, .3), transparent 68%);
}
.bm-sambut > * { position: relative; z-index: 1; }
.bm-sambut__foto {
  width: 72px; height: 72px;
  flex: 0 0 72px;
  border-radius: 16px;
  object-fit: cover;
  background: rgba(255, 255, 255, .15);
  border: 2px solid rgba(255, 255, 255, .3);
}
.bm-sambut__isi { flex: 1 1 260px; min-width: 0; }
.bm-sambut__isi h2 { margin: 0 0 3px; font-size: 20px; font-weight: 600; }
.bm-sambut__isi p { margin: 0; font-size: 13px; color: rgba(255, 255, 255, .82); }
.bm-sambut__aksi { flex: 0 0 auto; }

/* ==========================================================================
   4. Ubin statistik
   ========================================================================== */

.bm-stat {
  display: block;
  height: 100%;
  padding: 16px 18px;
  background: var(--bm-surface);
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius);
  box-shadow: var(--bm-shadow);
  text-decoration: none;
  transition: transform .28s var(--bm-ease), box-shadow .28s var(--bm-ease), border-color .2s;
}
.bm-stat:hover {
  transform: translateY(-4px);
  box-shadow: var(--bm-shadow-lg);
  border-color: rgba(235, 33, 39, .3);
  text-decoration: none;
}
.bm-stat__icon {
  width: 40px; height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  border-radius: 11px;
  font-size: 19px;
  color: var(--bm-stat-color, var(--bm-primary));
  background: var(--bm-stat-bg, var(--bm-primary-soft));
  transition: transform .3s var(--bm-ease);
}
.bm-stat:hover .bm-stat__icon { transform: scale(1.1) rotate(-6deg); }
.bm-stat__value { font-size: 24px; font-weight: 700; line-height: 1.1; color: var(--bm-ink); }
.bm-stat__label { margin-top: 3px; font-size: 12px; color: var(--bm-muted); }

/* ==========================================================================
   5. Lencana status - nama kelas sama dengan panel admin
   ========================================================================== */

.bm-badge {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 99px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.bm-badge--dibuat   { background: rgba(110, 102, 100, .13); color: #635b59; }
.bm-badge--diproses { background: rgba(249, 197, 11, .22);  color: #96730a; }
.bm-badge--dikirim  { background: rgba(196, 22, 28, .13);   color: #c4161c; }
.bm-badge--selesai  { background: rgba(143, 16, 19, .13);   color: #8f1013; }
.bm-badge--cancel   { background: rgba(110, 102, 100, .16); color: #6e6664; }

/* ==========================================================================
   6. Tabel - hanya berlaku pada tabel yang diberi kelas .bm-tabel,
      supaya tabel lain di situs tidak ikut berubah
   ========================================================================== */

.bm-tabel {
  width: 100%;
  margin: 0;
  font-size: 13px;
  color: var(--bm-ink);
  border-collapse: separate;
  border-spacing: 0;
}
.bm-tabel thead th {
  padding: 11px 13px;
  border: 0;
  border-bottom: 2px solid var(--bm-line);
  background: var(--bm-soft);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--bm-muted);
  white-space: nowrap;
}
.bm-tabel tbody td {
  padding: 11px 13px;
  border: 0;
  border-bottom: 1px solid var(--bm-line);
  vertical-align: middle;
  line-height: 1.5;
}
.bm-tabel tbody tr:last-child td { border-bottom: 0; }
.bm-tabel tbody tr { transition: background .16s; }
.bm-tabel tbody tr:hover { background: var(--bm-soft); }
.bm-tabel tfoot td, .bm-tabel tfoot th {
  padding: 12px 13px;
  border: 0;
  border-top: 2px solid var(--bm-line);
  background: var(--bm-soft);
  font-weight: 600;
  color: var(--bm-ink);
}
.bm-tabel td img {
  max-width: 64px;
  max-height: 52px;
  border-radius: 8px;
  border: 1px solid var(--bm-line);
}

.bm-sub {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--bm-faint);
}
.bm-kode {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11.5px;
  color: var(--bm-muted);
}

/* kendali DataTables di halaman akun */
.bm-akun .dataTables_wrapper { padding: 0; }
.bm-akun .dataTables_filter input,
.bm-akun .dataTables_length select {
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--bm-line);
  border-radius: 9px;
  font-size: 13px;
  outline: 0;
}
.bm-akun .dataTables_filter input:focus,
.bm-akun .dataTables_length select:focus {
  border-color: var(--bm-primary);
  box-shadow: 0 0 0 3px var(--bm-primary-soft);
}
.bm-akun .dataTables_info { font-size: 12px; color: var(--bm-faint); }
.bm-akun .pagination .page-link {
  min-width: 32px;
  border: 1px solid var(--bm-line);
  border-radius: 8px !important;
  margin: 2px;
  color: var(--bm-muted);
  font-size: 12.5px;
}
.bm-akun .pagination .page-item.active .page-link {
  background: var(--bm-primary);
  border-color: var(--bm-primary);
  color: #fff;
}

/* ==========================================================================
   7. Keadaan kosong
   ========================================================================== */

.bm-kosong {
  padding: 40px 20px;
  text-align: center;
  color: var(--bm-faint);
  font-size: 13.5px;
}
.bm-kosong i { display: block; font-size: 38px; margin-bottom: 10px; opacity: .45; }
.bm-kosong strong { display: block; margin-bottom: 4px; color: var(--bm-muted); font-size: 14px; }
.bm-kosong .btn { margin-top: 14px; }

/* ==========================================================================
   8. Alur status pesanan
   ========================================================================== */

.bm-langkah {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 18px 20px;
  overflow-x: auto;
}
.bm-langkah__item {
  position: relative;
  flex: 1 1 0;
  min-width: 104px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.bm-langkah__item::before {
  content: '';
  position: absolute;
  top: 19px; left: -50%;
  width: 100%; height: 2px;
  background: var(--bm-line);
}
.bm-langkah__item:first-child::before { display: none; }
.bm-langkah__item.is-lewat::before,
.bm-langkah__item.is-kini::before { background: var(--bm-primary); }

.bm-langkah__bulat {
  position: relative;
  z-index: 1;
  width: 38px; height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 17px;
  background: var(--bm-soft);
  border: 2px solid var(--bm-line);
  color: var(--bm-faint);
}
.bm-langkah__teks { font-size: 11.5px; color: var(--bm-faint); }
.bm-langkah__item.is-lewat .bm-langkah__bulat {
  background: var(--bm-primary-soft);
  border-color: var(--bm-primary);
  color: var(--bm-primary);
}
.bm-langkah__item.is-lewat .bm-langkah__teks { color: var(--bm-muted); }
.bm-langkah__item.is-kini .bm-langkah__bulat {
  background: var(--bm-primary);
  border-color: var(--bm-primary);
  color: #fff;
  box-shadow: 0 0 0 5px var(--bm-primary-soft);
}
.bm-langkah__item.is-kini .bm-langkah__teks { color: var(--bm-ink); font-weight: 600; }

/* ==========================================================================
   9. Daftar keterangan dan panel total
   ========================================================================== */

.bm-info { margin: 0; font-size: 13px; }
.bm-info dt {
  float: left; clear: left;
  width: 98px;
  padding: 7px 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--bm-faint);
}
.bm-info dd {
  margin: 0 0 0 98px;
  padding: 7px 0;
  border-bottom: 1px solid var(--bm-line);
  color: var(--bm-ink);
  min-height: 32px;
}
.bm-info dd:last-child { border-bottom: 0; }

.bm-total {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--bm-line);
  border-top: 1px solid var(--bm-line);
}
.bm-total__item {
  flex: 1 1 150px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 20px;
  background: var(--bm-surface);
}
.bm-total__item span { font-size: 11.5px; color: var(--bm-faint); }
.bm-total__item strong { font-size: 16px; color: var(--bm-ink); }
.bm-total__item--utama { background: var(--bm-soft); }
.bm-total__item--utama strong { font-size: 20px; color: var(--bm-primary); }

/* ==========================================================================
   10. Tombol dan kolom isian
   ========================================================================== */

.btn-utama,
.bm-akun .btn-utama {
  border: 0;
  /* template lama memberi margin-top 30px; di dalam baris flex itu
     mendorong tombol turun dan memendekkan tingginya dibanding tombol
     lain di sampingnya */
  margin-top: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--bm-primary), var(--bm-primary-dark));
  color: #fff;
  font-weight: 500;
  box-shadow: 0 6px 18px rgba(235, 33, 39, .26);
  transition: transform .2s var(--bm-ease), box-shadow .25s, background .25s;
}
.btn-utama:hover {
  background: linear-gradient(135deg, var(--bm-primary-dark), var(--bm-primary-deep));
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(235, 33, 39, .36);
}

.bm-akun .btn { border-radius: 10px; font-size: 13px; font-weight: 500; }
.bm-akun .btn-sm { border-radius: 8px; font-size: 12px; padding: 5px 10px; }

/* tombol garis tepi netral */
.bm-btn-garis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1.5px solid #e7d6d6;
  border-radius: 10px;
  background: #fff;
  color: var(--bm-ink);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color .2s, color .2s, background .2s;
}
.bm-btn-garis:hover { border-color: var(--bm-primary); background: var(--bm-primary-soft); color: var(--bm-primary); text-decoration: none; }

.bm-akun .form-control,
.bm-form .form-control {
  min-height: 42px;
  padding: 9px 13px;
  border: 1px solid var(--bm-line);
  border-radius: 10px;
  font-size: 13.5px;
  color: var(--bm-ink);
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
}
.bm-akun .form-control:focus,
.bm-form .form-control:focus {
  border-color: var(--bm-primary);
  box-shadow: 0 0 0 3px var(--bm-primary-soft);
}
.bm-akun label,
.bm-form label {
  margin-bottom: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--bm-faint);
}

/* ==========================================================================
   11. Kartu produk (kelas .box bawaan template, dirapikan)
   ========================================================================== */

.box {
  background: var(--bm-surface);
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius) !important;
  box-shadow: var(--bm-shadow) !important;
  overflow: hidden;
  transition: transform .28s var(--bm-ease), box-shadow .28s var(--bm-ease), border-color .2s;
}
.box:hover {
  transform: translateY(-5px);
  box-shadow: var(--bm-shadow-lg) !important;
  border-color: rgba(235, 33, 39, .28);
}
.box a { text-decoration: none; display: block; }
.box img { transition: transform .45s var(--bm-ease); }
.box:hover img { transform: scale(1.05); }
.box p {
  padding: 4px 10px 12px;
  margin: 0 !important;
  font-size: 12.5px !important;
  font-weight: 500;
  color: var(--bm-ink);
  line-height: 1.4;
}

/* ==========================================================================
   12. Halaman masuk / daftar
   ========================================================================== */

.bm-masuk {
  min-height: calc(100vh - var(--bm-head-h) - 90px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 16px 60px;
  background:
    radial-gradient(900px 420px at 12% 0%, rgba(235, 33, 39, .07), transparent 62%),
    var(--bm-soft);
}
.bm-masuk__kartu {
  width: 100%;
  max-width: 440px;
  padding: 0 32px 30px;
  background: var(--bm-surface);
  border: 1px solid var(--bm-line);
  border-radius: 20px;
  box-shadow: var(--bm-shadow-lg);
  overflow: hidden;
  animation: bm-naik .6s var(--bm-ease) both;
}
.bm-masuk__kartu--lebar { max-width: 560px; }
.bm-masuk__pita {
  height: 5px;
  margin: 0 -32px 24px;
  background: linear-gradient(90deg,
              var(--bm-primary) 0%, var(--bm-primary) 46%,
              var(--bm-accent) 46%, var(--bm-accent) 54%,
              var(--bm-primary) 54%, var(--bm-primary) 100%);
}
.bm-masuk__logo {
  display: block;
  width: 150px;
  max-width: 60%;
  height: auto;
  margin: 0 auto 16px;
}
.bm-masuk__kepala { text-align: center; margin-bottom: 24px; }
.bm-masuk__kepala h1 {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 700;
  color: var(--bm-ink);
}
.bm-masuk__kepala p { margin: 0; font-size: 13px; color: var(--bm-muted); }
.bm-masuk__lupa {
  display: block;
  margin-top: 8px;
  text-align: right;
  font-size: 12.5px;
  color: var(--bm-muted);
}
.bm-masuk__lupa:hover { color: var(--bm-primary); }
.bm-masuk__kirim {
  width: 100%;
  margin-top: 6px;
  padding: 13px;
  border: 0;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--bm-primary), var(--bm-primary-deep));
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(235, 33, 39, .3);
  transition: transform .2s var(--bm-ease), box-shadow .25s;
}
.bm-masuk__kirim:hover { transform: translateY(-2px); box-shadow: 0 13px 30px rgba(235, 33, 39, .42); }
.bm-masuk__kaki {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--bm-line);
  text-align: center;
  font-size: 12.5px;
  color: var(--bm-muted);
}
.bm-masuk__kaki a { color: var(--bm-primary); font-weight: 500; }

/* ==========================================================================
   13. Animasi
   ========================================================================== */

@keyframes bm-naik {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.bm-reveal { opacity: 0; }
.bm-reveal.is-in { animation: bm-naik .6s var(--bm-ease) forwards; }

@media (prefers-reduced-motion: reduce) {
  .bm-reveal { opacity: 1 !important; animation: none !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   14. Layar kecil
   ========================================================================== */

@media (max-width: 767.98px) {
  .bm-akun { padding: 20px 0 44px; }
  .bm-sambut { padding: 18px; gap: 14px; }
  .bm-sambut__isi h2 { font-size: 17px; }
  .bm-sambut__aksi { width: 100%; }
  .bm-sambut__aksi .btn { width: 100%; }
  .bm-info dt { float: none; width: auto; padding-bottom: 0; }
  .bm-info dd { margin-left: 0; padding-top: 2px; }
  .bm-total__item { flex: 1 1 100%; }
  .bm-langkah__item { min-width: 84px; }
  .bm-langkah__teks { font-size: 10.5px; }
  .bm-masuk { padding: 28px 12px 44px; }
  .bm-masuk__kartu { padding: 0 20px 24px; border-radius: 16px; }
  .bm-masuk__pita { margin: 0 -20px 20px; }
}

/* ==========================================================================
   15. Halaman depan
   ========================================================================== */

.bm-beranda { background: var(--bm-surface); }

/* ------------------------------ sorot utama ----------------------------- */

/* Jarak atas kini diurus lewat padding-body di bagian header, jadi
   sorot utama tidak perlu menyisakan ruang sendiri. */
.bm-hero { position: relative; }
/* Banner adalah karya desain berukuran sekitar 2100x750 piksel. Sebelumnya
   dipaksa setinggi 460px dengan object-fit: cover, sehingga kira-kira
   sepertiga bagian bawahnya - termasuk tombol di dalam banner itu sendiri -
   ikut terpotong. */
.bm-hero .carousel-item img {
  display: block;
  width: 100%;
  height: auto;
}
.bm-hero .carousel-indicators { margin-bottom: 18px; }
.bm-hero .carousel-indicators [data-bs-target] {
  width: 26px;
  height: 4px;
  border-radius: 99px;
  border: 0;
  background: rgba(255, 255, 255, .55);
}
.bm-hero .carousel-indicators .active { background: var(--bm-primary); }

/* Kartu pengantar diletakkan di bawah banner, bukan menumpang di atasnya,
   supaya isi banner tidak tertutup. */
.bm-intro {
  position: relative;
  z-index: 2;
  margin: 26px auto 0;
  padding: 28px 30px 24px;
  background: var(--bm-surface);
  border: 1px solid var(--bm-line);
  border-radius: 18px;
  box-shadow: var(--bm-shadow-lg);
}
.bm-intro__pita {
  height: 4px;
  margin: -28px -30px 22px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg,
              var(--bm-primary) 0%, var(--bm-primary) 46%,
              var(--bm-accent) 46%, var(--bm-accent) 54%,
              var(--bm-primary) 54%, var(--bm-primary) 100%);
}
.bm-intro h1 {
  margin: 0 0 8px;
  font-size: clamp(22px, 3vw, 31px);
  font-weight: 700;
  line-height: 1.22;
  color: var(--bm-ink);
}
.bm-intro h1 em { font-style: normal; color: var(--bm-primary); }
.bm-intro p {
  margin: 0;
  max-width: 62ch;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--bm-muted);
}
.bm-intro__aksi { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* --------------------------- bagian halaman ----------------------------- */

.bm-bagian { padding: 58px 0; }
.bm-bagian--soft { background: var(--bm-soft); }

.bm-bagian__kepala { margin-bottom: 30px; text-align: center; }
.bm-bagian__chip {
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 14px;
  border-radius: 99px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--bm-primary);
  background: var(--bm-primary-soft);
}
.bm-bagian__kepala h2 {
  margin: 0 0 6px;
  font-size: clamp(21px, 2.6vw, 27px);
  font-weight: 700;
  color: var(--bm-ink);
}
.bm-bagian__kepala p {
  margin: 0 auto;
  max-width: 62ch;
  font-size: 14px;
  line-height: 1.7;
  color: var(--bm-muted);
}

/* --------------------------- kartu kategori ----------------------------- */

.bm-kat {
  display: block;
  height: 100%;
  background: var(--bm-surface);
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius);
  box-shadow: var(--bm-shadow);
  overflow: hidden;
  text-decoration: none;
  transition: transform .28s var(--bm-ease), box-shadow .28s var(--bm-ease), border-color .2s;
}
.bm-kat:hover {
  transform: translateY(-5px);
  box-shadow: var(--bm-shadow-lg);
  border-color: rgba(235, 33, 39, .3);
  text-decoration: none;
}
.bm-kat__gambar {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #fff;
}
.bm-kat__gambar img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 16px;
  transition: transform .45s var(--bm-ease);
}
.bm-kat:hover .bm-kat__gambar img { transform: scale(1.07); }
.bm-kat__nama {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
  border-top: 1px solid var(--bm-line);
  font-size: 13px;
  font-weight: 600;
  color: var(--bm-ink);
  line-height: 1.35;
}
.bm-kat__nama i {
  margin-left: auto;
  color: var(--bm-primary);
  font-size: 15px;
  transition: transform .25s var(--bm-ease);
}
.bm-kat:hover .bm-kat__nama i { transform: translateX(3px); }

/* ------------------------------ tentang --------------------------------- */

.bm-tentang__logo { max-width: 240px; width: 70%; height: auto; }
.bm-tentang h2 {
  margin: 18px 0 6px;
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 700;
  color: var(--bm-ink);
}
.bm-tentang h2 + p {
  margin: 0 0 20px;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bm-primary);
  font-weight: 600;
}
.bm-tentang p { font-size: 14.5px; line-height: 1.78; color: var(--bm-muted); }

.bm-spek { margin-top: 22px; }
.bm-spek__judul {
  margin: 0 0 9px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bm-faint);
}
.bm-spek__judul small {
  margin-left: 8px;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bm-primary);
  opacity: .75;
}
.bm-cip { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.bm-cip span,
.bm-cip a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--bm-line);
  border-radius: 99px;
  background: var(--bm-surface);
  font-size: 12px;
  color: var(--bm-muted);
  text-decoration: none;
  transition: border-color .2s, color .2s, background .2s, transform .2s var(--bm-ease);
}
.bm-cip span:hover { border-color: var(--bm-primary); color: var(--bm-primary); }

/* chip yang berupa tautan: bisa diklik menuju katalog yang sudah disaring */
.bm-cip a { color: var(--bm-ink); font-weight: 500; }
.bm-cip a b {
  font-weight: 500;
  font-size: 10.5px;
  color: var(--bm-faint);
  transition: color .2s;
}
.bm-cip a:hover {
  border-color: var(--bm-primary);
  background: var(--bm-primary-soft);
  color: var(--bm-primary);
  transform: translateY(-2px);
  text-decoration: none;
}
.bm-cip a:hover b { color: var(--bm-primary); }
.bm-cip a i { font-size: 13px; color: var(--bm-primary); }

/* ------------------------------ industri -------------------------------- */

.bm-industri {
  position: relative;
  display: block;
  height: 100%;
  background: var(--bm-surface);
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius);
  box-shadow: var(--bm-shadow);
  overflow: hidden;
  text-decoration: none;
  transition: transform .28s var(--bm-ease), box-shadow .28s var(--bm-ease);
}
.bm-industri:hover { transform: translateY(-5px); box-shadow: var(--bm-shadow-lg); text-decoration: none; }
.bm-industri__gambar { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bm-soft); }
.bm-industri__gambar img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .45s var(--bm-ease);
}
.bm-industri:hover .bm-industri__gambar img { transform: scale(1.06); }
.bm-industri__lencana {
  position: absolute;
  top: 10px; left: 10px;
  width: 42px; height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .3));
}
.bm-industri__nama {
  padding: 13px 14px;
  border-top: 1px solid var(--bm-line);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--bm-ink);
  text-align: center;
}
.bm-industri__nama span {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--bm-primary);
}

/* ------------------------------- kontak --------------------------------- */

.bm-kontak {
  position: relative;
  overflow: hidden;
  padding: 44px 0;
  color: #fff;
  background: linear-gradient(120deg, var(--bm-primary-deep) 0%, #b5141b 52%, var(--bm-primary) 100%);
}
.bm-kontak::after {
  content: '';
  position: absolute;
  right: -80px; top: -110px;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(249, 197, 11, .28), transparent 68%);
}
.bm-kontak > .container { position: relative; z-index: 1; }
.bm-kontak h2 { margin: 0 0 6px; font-size: clamp(20px, 2.5vw, 26px); font-weight: 700; }
.bm-kontak p { margin: 0; font-size: 14px; color: rgba(255, 255, 255, .82); }

.bm-cabang {
  height: 100%;
  padding: 18px 20px;
  border-radius: var(--bm-radius);
  background: rgba(255, 255, 255, .11);
  border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.bm-cabang h3 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--bm-accent);
}
.bm-cabang p { margin: 0 0 6px; font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, .86); }
.bm-cabang a { color: #fff; text-decoration: none; }
.bm-cabang a:hover { color: var(--bm-accent); }

.bm-btn-putih {
  display: inline-block;
  padding: 11px 24px;
  border-radius: 11px;
  background: #fff;
  color: var(--bm-primary);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
  transition: transform .2s var(--bm-ease), box-shadow .25s;
}
.bm-btn-putih:hover { transform: translateY(-2px); box-shadow: 0 13px 30px rgba(0, 0, 0, .26); color: var(--bm-primary-deep); }

.bm-btn-tepi {
  display: inline-block;
  padding: 11px 24px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 11px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background .2s, border-color .2s;
}
.bm-btn-tepi:hover { background: rgba(255, 255, 255, .14); border-color: #fff; color: #fff; }

/* ------------------------------ layar kecil ------------------------------ */

@media (max-width: 991.98px) {
  .bm-intro { margin-top: 18px; padding: 22px 20px 20px; border-radius: 15px; }
  .bm-intro__pita { margin: -22px -20px 18px; border-radius: 15px 15px 0 0; }
  .bm-bagian { padding: 40px 0; }
  .bm-tentang { text-align: center; }
  .bm-tentang .bm-cip { justify-content: center; }
  .bm-kontak { padding: 34px 0; }
}

@media (max-width: 575.98px) {
  .bm-intro__aksi .bm-btn-putih,
  .bm-intro__aksi .btn-utama,
  .bm-intro__aksi .bm-btn-garis { width: 100%; text-align: center; }
}

/* ==========================================================================
   16. Slider kategori dan penyesuaian kendali banner
   ========================================================================== */

/* --- tombol dan titik pada banner --- */
.bm-hero .carousel-control-prev,
.bm-hero .carousel-control-next { width: 8%; opacity: 1; }
.bm-hero .carousel-control-prev-icon,
.bm-hero .carousel-control-next-icon {
  width: 42px; height: 42px;
  padding: 11px;
  border-radius: 50%;
  background-color: rgba(30, 18, 18, .38);
  background-size: 42%;
  transition: background-color .2s;
}
.bm-hero .carousel-control-prev:hover .carousel-control-prev-icon,
.bm-hero .carousel-control-next:hover .carousel-control-next-icon {
  background-color: var(--bm-primary);
}
.bm-hero .carousel-indicators [data-bs-target] {
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

/* --- slider kategori (Slick) --- */
.bm-katslide { margin: 0 -10px; }
.bm-katslide__item { padding: 6px 10px 10px; }
.bm-katslide .slick-track { display: flex; }
.bm-katslide .slick-slide { height: auto; }
.bm-katslide .slick-slide > div { height: 100%; }

/* panah dibuat sendiri supaya tidak bergantung font bawaan Slick */
.bm-katslide__panah {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 40px; height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  border: 1px solid var(--bm-line);
  border-radius: 50%;
  background: var(--bm-surface);
  color: var(--bm-primary);
  font-size: 19px;
  cursor: pointer;
  box-shadow: var(--bm-shadow);
  transition: background .2s, color .2s, border-color .2s, transform .2s var(--bm-ease);
}
.bm-katslide__panah:hover {
  background: var(--bm-primary);
  border-color: var(--bm-primary);
  color: #fff;
}
.bm-katslide__panah--kiri  { left: -8px; }
.bm-katslide__panah--kanan { right: -8px; }
.bm-katslide__panah.slick-disabled { opacity: .35; cursor: default; }
.bm-katslide__panah.slick-disabled:hover {
  background: var(--bm-surface);
  color: var(--bm-primary);
  border-color: var(--bm-line);
}

.bm-katslide .slick-dots { position: static; margin-top: 14px; }
.bm-katslide .slick-dots li { width: auto; height: auto; margin: 0 3px; }
.bm-katslide .slick-dots li button { width: 22px; height: 4px; padding: 0; }
.bm-katslide .slick-dots li button::before { display: none; }
.bm-katslide .slick-dots li button {
  border-radius: 99px;
  background: var(--bm-line);
  transition: background .2s, width .25s var(--bm-ease);
}
.bm-katslide .slick-dots li.slick-active button { width: 30px; background: var(--bm-primary); }

/* sebelum Slick jalan, tampilkan beberapa kartu pertama saja
   supaya tidak sempat terlihat sebagai tumpukan panjang */
.bm-katslide:not(.slick-initialized) { display: flex; overflow: hidden; }
.bm-katslide:not(.slick-initialized) .bm-katslide__item { flex: 0 0 20%; }

@media (max-width: 1199.98px) {
  .bm-katslide:not(.slick-initialized) .bm-katslide__item { flex-basis: 25%; }
}
@media (max-width: 991.98px) {
  .bm-katslide:not(.slick-initialized) .bm-katslide__item { flex-basis: 33.333%; }
  .bm-katslide__panah { width: 34px; height: 34px; font-size: 16px; }
  .bm-katslide__panah--kiri  { left: -4px; }
  .bm-katslide__panah--kanan { right: -4px; }
}
@media (max-width: 575.98px) {
  .bm-katslide:not(.slick-initialized) .bm-katslide__item { flex-basis: 50%; }
}

/* --- kartu industri: lencana tidak dipakai lagi karena gambarnya
       sendiri sudah berupa logo, jadi dua lapis logo terasa menumpuk --- */
.bm-industri__gambar { aspect-ratio: 1 / 1; }
.bm-industri__gambar img { object-fit: contain; padding: 12px; background: #fff; }

/* ==========================================================================
   17. Footer
   Dibuat terang karena fixlogo.png berlatar transparan dengan tulisan
   gelap; di atas latar gelap tulisannya nyaris tidak terbaca. Pita
   merah di bagian bawah menjaga tutupan halaman tetap tegas.
   ========================================================================== */

#footer.bm-footer {
  position: relative;
  height: auto;
  padding: 0;
  background: var(--bm-surface);
  border-top: 1px solid var(--bm-line);
  color: var(--bm-muted);
  font-size: 13.5px;
  z-index: 1;
}
/* garis aksen tipis di tepi atas */
#footer.bm-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--bm-primary), var(--bm-primary-deep) 55%, var(--bm-accent));
}

.bm-footer__atas { padding: 46px 0 32px; }

.bm-footer__logo {
  width: 210px;
  max-width: 70%;
  height: auto;
  margin-bottom: 16px;
}
.bm-footer p { margin: 0 0 14px; line-height: 1.75; color: var(--bm-muted); max-width: 42ch; }

.bm-footer h3 {
  margin: 0 0 16px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--bm-line);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bm-primary);
}

/* ------------------------------- menu ----------------------------------- */

.bm-footer__menu { list-style: none; margin: 0; padding: 0; }
.bm-footer__menu li { margin-bottom: 9px; }
.bm-footer__menu a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--bm-muted);
  text-decoration: none;
  transition: color .2s, transform .2s var(--bm-ease);
}
.bm-footer__menu a:hover { color: var(--bm-primary); transform: translateX(4px); }
.bm-footer__menu a i { font-size: 13px; color: var(--bm-primary); opacity: .55; transition: opacity .2s; }
.bm-footer__menu a:hover i { opacity: 1; }

/* ------------------------------ kontak ---------------------------------- */

.bm-footer__baris { display: flex; gap: 11px; margin-bottom: 12px; line-height: 1.65; }
.bm-footer__baris > i {
  flex: 0 0 30px;
  width: 30px; height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: var(--bm-primary-soft);
  color: var(--bm-primary);
  font-size: 15px;
}
.bm-footer__baris span,
.bm-footer__baris a { padding-top: 4px; }
.bm-footer__baris a { color: var(--bm-ink); text-decoration: none; }
.bm-footer__baris a:hover { color: var(--bm-primary); }

/* kartu cabang */
.bm-footer__cabang { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.bm-footer__cabang-item {
  flex: 1 1 220px;
  padding: 12px 14px;
  border: 1px solid var(--bm-line);
  border-left: 3px solid var(--bm-primary);
  border-radius: 11px;
  background: var(--bm-soft);
  line-height: 1.55;
}
.bm-footer__cabang-item strong {
  display: block;
  margin-bottom: 3px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bm-ink);
}
.bm-footer__cabang-item span { display: block; font-size: 12.5px; color: var(--bm-muted); }
.bm-footer__cabang-item a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--bm-primary);
  text-decoration: none;
}
.bm-footer__cabang-item a:hover { text-decoration: underline; }

/* ---------------------------- tombol hubungi ----------------------------- */

.bm-footer__wa {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 22px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--bm-primary), var(--bm-primary-deep));
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(235, 33, 39, .26);
  transition: transform .2s var(--bm-ease), box-shadow .25s;
}
.bm-footer__wa:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(235, 33, 39, .36); color: #fff; }
.bm-footer__wa i { font-size: 16px; }

/* ------------------------------ pita bawah ------------------------------- */

.bm-footer__bawah {
  position: relative;
  overflow: hidden;
  padding: 16px 0;
  background: linear-gradient(120deg, var(--bm-primary-deep) 0%, #b5141b 55%, var(--bm-primary) 100%);
}
.bm-footer__bawah .container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}
.bm-footer__hak { flex: 1 1 auto; font-size: 12.5px; color: rgba(255, 255, 255, .82); }
.bm-footer__hak strong { color: #fff; font-weight: 600; }
.bm-footer__tagline {
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bm-accent);
}
/* motif batik dijadikan putih tipis agar menyatu dengan pita merah */
.bm-footer__batik {
  position: absolute;
  left: -10px; bottom: -10px;
  z-index: 1;
  width: 190px;
  opacity: .16;
  filter: brightness(0) invert(1);
  pointer-events: none;
}

/* ------------------------ tombol WhatsApp melayang ----------------------- */

.bm-wa-apung {
  position: fixed;
  right: 16px;
  bottom: 96px;
  z-index: 998;
  display: block;
  width: 96px;
  text-decoration: none;
  transition: transform .25s var(--bm-ease);
}
.bm-wa-apung:hover { transform: translateY(-5px); }

.bm-wa-apung__maskot {
  display: block;
  width: 96px;
  height: auto;
  filter: drop-shadow(0 8px 16px rgba(43, 35, 35, .3));
}

.bm-wa-apung__ikon {
  position: absolute;
  top: 2px;
  right: -8px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  font-size: 22px;
  box-shadow: 0 6px 16px rgba(37, 211, 102, .45);
}
/* denyut halus supaya tombolnya menarik perhatian */
.bm-wa-apung__ikon::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  border-radius: 50%;
  border: 2px solid #25D366;
  animation: bm-denyut 2.4s ease-out infinite;
}
@keyframes bm-denyut {
  0%   { transform: scale(1);   opacity: .7; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

.bm-wa-apung__balon {
  position: absolute;
  right: calc(100% + 4px);
  top: 12px;
  padding: 8px 13px;
  border-radius: 10px;
  background: var(--bm-ink);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity .25s, transform .25s var(--bm-ease);
  pointer-events: none;
}
.bm-wa-apung__balon::after {
  content: '';
  position: absolute;
  right: -5px; top: 50%;
  width: 10px; height: 10px;
  transform: translateY(-50%) rotate(45deg);
  background: var(--bm-ink);
}
.bm-wa-apung:hover .bm-wa-apung__balon { opacity: 1; transform: none; }

/* banner yang diberi tautan lewat panel admin */
.bm-hero__tautan { display: block; line-height: 0; }

/* ------------------------------ layar kecil ------------------------------ */

@media (max-width: 767.98px) {
  .bm-footer__atas { padding: 32px 0 20px; }
  .bm-footer__logo { width: 180px; }
  .bm-footer p { max-width: none; }
  .bm-footer__bawah .container { justify-content: center; text-align: center; }
  .bm-footer__hak { flex: 1 1 100%; }
  .bm-footer__batik { width: 130px; opacity: .12; }
  .bm-wa-apung { bottom: 84px; right: 10px; width: 76px; }
  .bm-wa-apung__maskot { width: 76px; }
  .bm-wa-apung__ikon { width: 34px; height: 34px; font-size: 18px; right: -6px; }
  .bm-wa-apung__balon { display: none; }
}

/* ==========================================================================
   18. Katalog produk
   ========================================================================== */

.bm-katalog { padding: 30px 0 60px; background: var(--bm-soft); }

/* ----------------------------- panel penyaring --------------------------- */

.bm-panel {
  position: sticky;
  /* menempel tepat di bawah header yang melayang */
  top: calc(var(--bm-head-h) + 16px);
  background: var(--bm-surface);
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius);
  box-shadow: var(--bm-shadow);
  overflow: hidden;
}
.bm-panel__blok { padding: 16px 18px; border-bottom: 1px solid var(--bm-line); }
.bm-panel__blok:last-child { border-bottom: 0; }
.bm-panel__judul {
  margin: 0 0 11px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bm-faint);
}
.bm-panel__reset {
  display: block;
  text-align: center;
  padding: 9px;
  border: 1px solid var(--bm-line);
  border-radius: 10px;
  color: var(--bm-muted);
  font-size: 12.5px;
  text-decoration: none;
  transition: border-color .2s, color .2s;
}
.bm-panel__reset:hover { border-color: var(--bm-primary); color: var(--bm-primary); }
.bm-panel__reset i { transform: rotate(45deg); display: inline-block; }

/* tombol pembuka panel di layar kecil */
.bm-filter-toggle {
  display: none;
  position: relative;
  width: 100%;
  margin-bottom: 14px;
  padding: 11px 16px;
  border: 1px solid var(--bm-line);
  border-radius: 11px;
  background: var(--bm-surface);
  color: var(--bm-ink);
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
  box-shadow: var(--bm-shadow);
}
.bm-filter-toggle i { color: var(--bm-primary); margin-right: 6px; }
.bm-filter-toggle__tanda {
  position: absolute;
  top: 12px; right: 16px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--bm-primary);
}

/* --------------------------------- cari ---------------------------------- */

.bm-cari { position: relative; display: flex; align-items: center; }
.bm-cari > i {
  position: absolute;
  left: 13px;
  font-size: 15px;
  color: var(--bm-faint);
  pointer-events: none;
}
.bm-cari input {
  width: 100%;
  height: 42px;
  padding: 0 44px 0 36px;
  border: 1px solid var(--bm-line);
  border-radius: 11px;
  background: #fff;
  font-size: 13.5px;
  color: var(--bm-ink);
  outline: 0;
  transition: border-color .2s, box-shadow .2s;
}
.bm-cari input:focus { border-color: var(--bm-primary); box-shadow: 0 0 0 3px var(--bm-primary-soft); }
.bm-cari button {
  position: absolute;
  right: 5px;
  width: 34px; height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 9px;
  background: var(--bm-primary);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: background .2s;
}
.bm-cari button:hover { background: var(--bm-primary-deep); }

/* ----------------------------- daftar pilihan ---------------------------- */

.bm-pilih { list-style: none; margin: 0; padding: 0; max-height: 292px; overflow-y: auto; }
.bm-pilih a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  margin-bottom: 2px;
  border-radius: 9px;
  color: var(--bm-muted);
  font-size: 13px;
  text-decoration: none;
  transition: background .18s, color .18s;
}
.bm-pilih a span {
  margin-left: auto;
  padding: 1px 8px;
  border-radius: 99px;
  background: var(--bm-soft);
  font-size: 11px;
  color: var(--bm-faint);
}
.bm-pilih a:hover { background: var(--bm-soft); color: var(--bm-primary); }
.bm-pilih a.is-aktif { background: var(--bm-primary); color: #fff; font-weight: 500; }
.bm-pilih a.is-aktif span { background: rgba(255, 255, 255, .22); color: #fff; }

/* label material dan finishing */
.bm-tag { display: flex; flex-wrap: wrap; gap: 6px; }
.bm-tag a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border: 1px solid var(--bm-line);
  border-radius: 99px;
  color: var(--bm-muted);
  font-size: 12px;
  text-decoration: none;
  transition: border-color .2s, background .2s, color .2s;
}
.bm-tag a b { font-weight: 500; font-size: 10.5px; color: var(--bm-faint); }
.bm-tag a:hover { border-color: var(--bm-primary); color: var(--bm-primary); }
.bm-tag a.is-aktif { background: var(--bm-primary); border-color: var(--bm-primary); color: #fff; }
.bm-tag a.is-aktif b { color: rgba(255, 255, 255, .8); }

/* ------------------------------ baris alat ------------------------------- */

.bm-alat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  margin-bottom: 16px;
  background: var(--bm-surface);
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius);
  box-shadow: var(--bm-shadow);
}
.bm-alat__jumlah { flex: 1 1 auto; font-size: 13px; color: var(--bm-muted); }
.bm-alat__jumlah strong { color: var(--bm-ink); }
.bm-alat__urut { display: flex; align-items: center; gap: 8px; margin: 0; }
.bm-alat__urut span {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--bm-faint);
}
.bm-alat__urut select {
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--bm-line);
  border-radius: 9px;
  background: #fff;
  font-size: 12.5px;
  color: var(--bm-ink);
  outline: 0;
}
.bm-alat__urut select:focus { border-color: var(--bm-primary); box-shadow: 0 0 0 3px var(--bm-primary-soft); }

/* penyaring yang sedang terpasang */
.bm-terpakai { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.bm-terpakai a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 99px;
  background: var(--bm-primary-soft);
  color: var(--bm-primary);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.bm-terpakai a i { transform: rotate(45deg); font-size: 13px; }
.bm-terpakai a:hover { background: var(--bm-primary); color: #fff; }

/* ----------------------------- kartu produk ------------------------------ */

.bm-produk {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bm-surface);
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius);
  box-shadow: var(--bm-shadow);
  overflow: hidden;
  text-decoration: none;
  transition: transform .28s var(--bm-ease), box-shadow .28s var(--bm-ease), border-color .2s;
}
.bm-produk:hover {
  transform: translateY(-5px);
  box-shadow: var(--bm-shadow-lg);
  border-color: rgba(235, 33, 39, .3);
  text-decoration: none;
}
.bm-produk__gambar {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #fff;
  border-bottom: 1px solid var(--bm-line);
}
.bm-produk__gambar img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 16px;
  transition: transform .45s var(--bm-ease);
}
.bm-produk:hover .bm-produk__gambar img { transform: scale(1.07); }
.bm-produk__kosong {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color: #ded2d0;
  background: var(--bm-soft);
}
.bm-produk__kat {
  position: absolute;
  top: 10px; left: 10px;
  padding: 4px 10px;
  border-radius: 99px;
  background: rgba(43, 35, 35, .78);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.bm-produk__isi { display: flex; flex-direction: column; flex: 1 1 auto; padding: 13px 15px 14px; }
.bm-produk__isi h3 {
  margin: 0 0 3px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.38;
  color: var(--bm-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bm-produk__isi p { margin: 0; font-size: 11.5px; color: var(--bm-faint); }
.bm-produk__kaki {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 11px;
  font-size: 11.5px;
  color: var(--bm-muted);
}
.bm-produk__kaki i {
  margin-left: auto;
  font-size: 17px;
  color: var(--bm-primary);
  transition: transform .25s var(--bm-ease);
}
.bm-produk:hover .bm-produk__kaki i { transform: translateX(3px); }

/* ----------------------------- navigasi halaman -------------------------- */

.bm-halaman { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.bm-halaman a {
  min-width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 13px;
  border: 1px solid var(--bm-line);
  border-radius: 10px;
  background: var(--bm-surface);
  color: var(--bm-muted);
  font-size: 13px;
  text-decoration: none;
  transition: border-color .2s, color .2s, background .2s;
}
.bm-halaman a:hover { border-color: var(--bm-primary); color: var(--bm-primary); }
.bm-halaman a.is-aktif {
  background: var(--bm-primary);
  border-color: var(--bm-primary);
  color: #fff;
  font-weight: 600;
}
.bm-halaman a.is-mati { opacity: .4; pointer-events: none; }
/* tautan pertama menunjuk ke belakang, jadi ikonnya diputar */
.bm-halaman a:first-child i { transform: rotate(180deg); }

/* ------------------------------- layar kecil ----------------------------- */

@media (max-width: 991.98px) {
  .bm-katalog { padding: 20px 0 44px; }
  .bm-filter-toggle { display: block; }
  .bm-panel {
    position: static;
    display: none;
    margin-bottom: 18px;
  }
  .bm-panel.is-buka { display: block; animation: bm-naik .35s var(--bm-ease); }
  .bm-pilih { max-height: 240px; }
}

@media (max-width: 575.98px) {
  .bm-alat { padding: 11px 14px; }
  .bm-alat__jumlah { flex: 1 1 100%; font-size: 12.5px; }
  .bm-produk__isi { padding: 11px 12px 12px; }
  .bm-produk__isi h3 { font-size: 12.5px; }
}

/* ==========================================================================
   19. Halaman detail produk
   ========================================================================== */

.bm-detail { padding: 30px 0 60px; background: var(--bm-soft); }

/* ------------------------------- galeri --------------------------------- */

.bm-galeri {
  padding: 14px;
  background: var(--bm-surface);
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius);
  box-shadow: var(--bm-shadow);
}
.bm-galeri__utama img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #fff;
  border-radius: 10px;
}
.bm-galeri__kecil { margin-top: 10px; }
.bm-galeri__kecil div { padding: 0 5px; outline: 0; }
.bm-galeri__kecil img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 5px;
  border: 1px solid var(--bm-line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: border-color .2s;
}
.bm-galeri__kecil .slick-slide.is-active img,
.bm-galeri__kecil img:hover { border-color: var(--bm-primary); }
.bm-galeri__kosong {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  background: var(--bm-soft);
  color: #ded2d0;
  font-size: 54px;
}

/* ---------------------------- keterangan atas --------------------------- */

.bm-detail__label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.bm-detail__label a {
  padding: 4px 12px;
  border-radius: 99px;
  background: var(--bm-primary);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
}
.bm-detail__label a:hover { background: var(--bm-primary-deep); color: #fff; }
.bm-detail__label span {
  padding: 4px 12px;
  border: 1px solid var(--bm-line);
  border-radius: 99px;
  background: var(--bm-surface);
  font-size: 11.5px;
  color: var(--bm-muted);
}

.bm-detail__nama {
  margin: 0 0 16px;
  font-size: clamp(21px, 2.8vw, 29px);
  font-weight: 700;
  line-height: 1.24;
  color: var(--bm-ink);
}

/* ubin ringkasan */
.bm-ringkasan {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  margin-bottom: 20px;
  background: var(--bm-line);
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius);
  overflow: hidden;
}
.bm-ringkasan__item {
  flex: 1 1 130px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  background: var(--bm-surface);
}
.bm-ringkasan__item > i { font-size: 20px; color: var(--bm-primary); }
.bm-ringkasan__item strong { display: block; font-size: 17px; line-height: 1.2; color: var(--bm-ink); }
.bm-ringkasan__item span { font-size: 11px; color: var(--bm-faint); }

.bm-detail__spek { margin-bottom: 16px; }
.bm-detail__spek h3 {
  margin: 0 0 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bm-faint);
}
.bm-detail__spek .bm-cip { margin-bottom: 0; }

.bm-detail__aksi { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }

/* --------------------- keterangan dari panel admin ---------------------- */

/* Isi kolom ini ditulis lewat editor di panel admin, kadang berupa
   gambar tertanam berukuran besar. Dibatasi supaya tidak meluber. */
.bm-isi-html { font-size: 14px; line-height: 1.75; color: var(--bm-muted); overflow-x: auto; }
.bm-isi-html img { max-width: 100%; height: auto; border-radius: 10px; }
.bm-isi-html table { max-width: 100%; }
.bm-isi-html p:last-child { margin-bottom: 0; }

/* ------------------------------- varian --------------------------------- */

.bm-varian__alat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--bm-line);
}
.bm-varian__alat .bm-cari { flex: 1 1 230px; }
.bm-varian__pilih {
  height: 42px;
  padding: 0 11px;
  border: 1px solid var(--bm-line);
  border-radius: 11px;
  background: #fff;
  font-size: 12.5px;
  color: var(--bm-ink);
  outline: 0;
  max-width: 100%;
}
.bm-varian__pilih:focus { border-color: var(--bm-primary); box-shadow: 0 0 0 3px var(--bm-primary-soft); }
.bm-varian__hitung { flex: 1 1 100%; font-size: 12px; color: var(--bm-faint); }

.bm-varian tbody td { padding-top: 8px; padding-bottom: 8px; }
.bm-varian__qty {
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--bm-line);
  border-radius: 9px;
  font-size: 13px;
  text-align: center;
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
}
.bm-varian__qty:focus { border-color: var(--bm-primary); box-shadow: 0 0 0 3px var(--bm-primary-soft); outline: 0; }
.bm-varian__qty:disabled { background: var(--bm-soft); cursor: not-allowed; }

/* batang kirim menempel di bawah kartu */
.bm-batang {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-top: 1px solid var(--bm-line);
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.bm-batang__info { flex: 1 1 auto; font-size: 13px; color: var(--bm-muted); }
.bm-batang__info.is-siap { color: var(--bm-primary); font-weight: 600; }

/* ---------------------------- produk terkait ----------------------------- */

.bm-terkait { margin-top: 40px; }

/* ------------------------------ layar kecil ------------------------------ */

@media (max-width: 991.98px) {
  .bm-detail { padding: 20px 0 44px; }
}

@media (max-width: 575.98px) {
  .bm-galeri { padding: 10px; }
  .bm-ringkasan__item { flex: 1 1 50%; padding: 11px 12px; }
  .bm-ringkasan__item strong { font-size: 15px; }
  .bm-varian__alat { padding: 12px 14px; }
  .bm-varian__pilih { flex: 1 1 100%; }
  .bm-batang { padding: 12px 14px; }
  .bm-batang .btn { width: 100%; }
  .bm-detail__aksi .btn,
  .bm-detail__aksi .bm-btn-garis { width: 100%; text-align: center; }
}

/* catatan saat daftar varian dipotong karena terlalu banyak */
.bm-varian__catatan {
  flex: 1 1 100%;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(249, 197, 11, .14);
  border: 1px solid rgba(249, 197, 11, .34);
  font-size: 12px;
  color: #8a6a05;
}

/* --------------------- pengatur halaman tabel varian -------------------- */

.bm-hal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 13px 0 4px;
  border-top: 1px solid var(--bm-line);
  margin-top: 4px;
}
.bm-hal__perhal { display: flex; align-items: center; gap: 8px; margin: 0; }
.bm-hal__perhal span {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--bm-faint);
}
.bm-hal__perhal select {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--bm-line);
  border-radius: 9px;
  background: #fff;
  font-size: 12.5px;
  color: var(--bm-ink);
  outline: 0;
}
.bm-hal__perhal select:focus { border-color: var(--bm-primary); box-shadow: 0 0 0 3px var(--bm-primary-soft); }

.bm-hal__info { flex: 1 1 auto; font-size: 12px; color: var(--bm-faint); }

.bm-hal__nav { display: flex; flex-wrap: wrap; gap: 4px; }
.bm-hal__nav button {
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--bm-line);
  border-radius: 9px;
  background: #fff;
  color: var(--bm-muted);
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.bm-hal__nav button:hover:not(:disabled) { border-color: var(--bm-primary); color: var(--bm-primary); }
.bm-hal__nav button.is-aktif {
  background: var(--bm-primary);
  border-color: var(--bm-primary);
  color: #fff;
  font-weight: 600;
}
.bm-hal__nav button:disabled { opacity: .4; cursor: default; }

@media (max-width: 575.98px) {
  .bm-hal { gap: 8px; }
  .bm-hal__info { flex: 1 1 100%; order: 3; }
  .bm-hal__nav { flex: 1 1 100%; justify-content: center; order: 4; }
}

/* ==========================================================================
   20. Kaca pembesar dan penampil gambar layar penuh
   ========================================================================== */

.bm-zoom {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  cursor: zoom-in;
  outline: 0;
}
.bm-zoom img { display: block; }

/* lingkaran pembesar yang mengikuti kursor */
.bm-zoom__lensa {
  position: absolute;
  top: 0; left: 0;
  width: 168px; height: 168px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .9);
  box-shadow: 0 0 0 1px rgba(43, 35, 35, .18), 0 10px 30px rgba(43, 35, 35, .32);
  background-repeat: no-repeat;
  background-color: #fff;
  transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s;
  pointer-events: none;
  z-index: 2;
}
.bm-zoom.is-zoom .bm-zoom__lensa { opacity: 1; visibility: visible; }

/* keterangan kecil di sudut gambar */
.bm-zoom__petunjuk {
  position: absolute;
  left: 10px; bottom: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 99px;
  background: rgba(43, 35, 35, .72);
  color: #fff;
  font-size: 11px;
  pointer-events: none;
  transition: opacity .2s;
}
.bm-zoom.is-zoom .bm-zoom__petunjuk { opacity: 0; }
.bm-zoom.is-sentuh .bm-zoom__petunjuk::after { content: ' \2014 ketuk untuk layar penuh'; }

@media (max-width: 575.98px) {
  .bm-zoom__petunjuk { font-size: 10px; padding: 4px 9px; }
  .bm-zoom.is-sentuh .bm-zoom__petunjuk::after { content: ''; }
}

/* ------------------------- penampil layar penuh -------------------------- */

.bm-lampu {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bm-lampu[hidden] { display: none; }
.bm-lampu__latar {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(22, 16, 16, .93);
  animation: bm-lampu-masuk .22s ease;
}
@keyframes bm-lampu-masuk { from { opacity: 0; } to { opacity: 1; } }

.bm-lampu__panggung {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;
}
.bm-lampu__panggung.is-bisa-geser { cursor: grab; }
.bm-lampu__panggung.is-bisa-geser:active { cursor: grabbing; }
.bm-lampu__panggung img {
  max-width: 88vw;
  max-height: 78vh;
  border-radius: 10px;
  background: #fff;
  transform-origin: center center;
  transition: transform .16s ease-out;
  user-select: none;
  -webkit-user-drag: none;
  animation: bm-naik .26s var(--bm-ease);
}

.bm-lampu__tombol {
  position: absolute;
  z-index: 2;
  width: 46px; height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background .2s, border-color .2s;
}
.bm-lampu__tombol:hover { background: var(--bm-primary); border-color: var(--bm-primary); }
.bm-lampu__tutup { top: 18px; right: 18px; }
.bm-lampu__prev  { left: 18px;  top: 50%; transform: translateY(-50%); font-size: 30px; }
.bm-lampu__next  { right: 18px; top: 50%; transform: translateY(-50%); font-size: 30px; }

.bm-lampu__alat {
  position: absolute;
  z-index: 2;
  left: 50%; bottom: 20px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 99px;
  background: rgba(255, 255, 255, .12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-size: 12.5px;
}
.bm-lampu__alat button {
  min-width: 34px; height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 99px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s;
}
.bm-lampu__alat button:hover { background: var(--bm-primary); }
.bm-lampu__alat .bm-lampu__reset { font-size: 12px; }
.bm-lampu__alat > span { min-width: 46px; text-align: center; }
.bm-lampu__urut { padding-left: 8px; border-left: 1px solid rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .75); }

@media (max-width: 767.98px) {
  .bm-lampu__tombol { width: 40px; height: 40px; font-size: 22px; }
  .bm-lampu__tutup { top: 12px; right: 12px; }
  .bm-lampu__prev { left: 8px; }
  .bm-lampu__next { right: 8px; }
  .bm-lampu__panggung img { max-width: 94vw; max-height: 66vh; }
  .bm-lampu__alat { bottom: 14px; font-size: 11.5px; }
  .bm-lampu__alat button { min-width: 30px; height: 30px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .bm-lampu__panggung img { transition: none; animation: none; }
}

/* ==========================================================================
   21. Halaman isi: about, project, technical, kontak, cara pesan, redeem
   ========================================================================== */

.bm-isi { padding: 40px 0 60px; background: var(--bm-soft); }
.bm-isi--putih { background: var(--bm-surface); }

/* ------------------------------- about ---------------------------------- */

.bm-profil { text-align: center; margin-bottom: 34px; }
.bm-profil img { width: 210px; max-width: 62%; height: auto; }
.bm-profil h2 {
  margin: 16px 0 4px;
  font-size: clamp(20px, 2.6vw, 27px);
  font-weight: 700;
  color: var(--bm-ink);
}
.bm-profil p {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bm-primary);
}

/* kartu nilai, dengan aksen warna di tepi kiri */
.bm-nilai {
  height: 100%;
  padding: 20px 22px;
  background: var(--bm-surface);
  border: 1px solid var(--bm-line);
  border-left: 3px solid var(--bm-primary);
  border-radius: var(--bm-radius);
  box-shadow: var(--bm-shadow);
  transition: transform .26s var(--bm-ease), box-shadow .26s var(--bm-ease);
}
.bm-nilai:hover { transform: translateY(-4px); box-shadow: var(--bm-shadow-lg); }
.bm-nilai h3 {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--bm-primary);
}
.bm-nilai .bm-isi-html { font-size: 13.5px; }

/* kartu keunggulan: teks dan gambar bersisian */
.bm-unggul {
  display: flex;
  gap: 16px;
  height: 100%;
  padding: 18px 20px;
  background: var(--bm-surface);
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius);
  box-shadow: var(--bm-shadow);
  transition: transform .26s var(--bm-ease), box-shadow .26s var(--bm-ease);
}
.bm-unggul:hover { transform: translateY(-4px); box-shadow: var(--bm-shadow-lg); }
.bm-unggul__teks { flex: 1 1 auto; min-width: 0; }
.bm-unggul__teks h3 {
  margin: 0 0 8px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--bm-primary);
}
.bm-unggul__teks .bm-isi-html { font-size: 13.5px; }
.bm-unggul__gambar {
  flex: 0 0 104px;
  width: 104px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--bm-line);
}

/* ------------------------- galeri gambar (kotak) ------------------------- */

.bm-kotak-gambar {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--bm-radius);
  border: 1px solid var(--bm-line);
  box-shadow: var(--bm-shadow);
  background: #fff;
  transition: transform .26s var(--bm-ease), box-shadow .26s var(--bm-ease);
}
.bm-kotak-gambar:hover { transform: translateY(-4px); box-shadow: var(--bm-shadow-lg); }
.bm-kotak-gambar img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform .45s var(--bm-ease);
}
.bm-kotak-gambar:hover img { transform: scale(1.05); }
.bm-kotak-gambar__tutup {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(143, 16, 19, .55);
  color: #fff;
  font-size: 26px;
  opacity: 0;
  transition: opacity .25s;
}
.bm-kotak-gambar:hover .bm-kotak-gambar__tutup { opacity: 1; }
.bm-kotak-gambar__nama {
  padding: 11px 14px;
  border-top: 1px solid var(--bm-line);
  font-size: 13px;
  font-weight: 600;
  color: var(--bm-ink);
  text-align: center;
}

/* --------------------------------- video -------------------------------- */

.bm-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--bm-radius);
  overflow: hidden;
  border: 1px solid var(--bm-line);
  box-shadow: var(--bm-shadow);
  background: #000;
}
.bm-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* -------------------------------- kontak -------------------------------- */

.bm-kkontak {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
  padding: 18px 20px;
  background: var(--bm-surface);
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius);
  box-shadow: var(--bm-shadow);
  transition: transform .26s var(--bm-ease), box-shadow .26s var(--bm-ease);
}
.bm-kkontak:hover { transform: translateY(-4px); box-shadow: var(--bm-shadow-lg); }
.bm-kkontak__ikon { flex: 0 0 56px; width: 56px; height: auto; }
.bm-kkontak h3 {
  margin: 0 0 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bm-faint);
}
.bm-kkontak p { margin: 0 0 3px; font-size: 13.5px; line-height: 1.6; color: var(--bm-ink); }
.bm-kkontak a { color: var(--bm-ink); text-decoration: none; }
.bm-kkontak a:hover { color: var(--bm-primary); }

.bm-peta {
  overflow: hidden;
  border-radius: var(--bm-radius);
  border: 1px solid var(--bm-line);
  box-shadow: var(--bm-shadow);
  line-height: 0;
}
.bm-peta iframe { width: 100%; height: 380px; border: 0; }

.bm-wa-kartu { text-align: center; }
.bm-wa-kartu img {
  width: 100%;
  max-width: 190px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius);
}
.bm-wa-kartu strong { display: block; margin-top: 9px; font-size: 13.5px; color: var(--bm-ink); }
.bm-wa-kartu span { font-size: 11.5px; color: var(--bm-faint); }

/* ----------------------------- cara memesan ------------------------------ */

.bm-langkah-pesan { list-style: none; margin: 0 0 26px; padding: 0; counter-reset: langkah; }
.bm-langkah-pesan li {
  position: relative;
  counter-increment: langkah;
  padding: 0 0 22px 56px;
}
.bm-langkah-pesan li::before {
  content: counter(langkah);
  position: absolute;
  left: 0; top: 0;
  width: 38px; height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bm-primary);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}
/* garis penghubung antar langkah */
.bm-langkah-pesan li::after {
  content: '';
  position: absolute;
  left: 18px; top: 42px; bottom: 4px;
  width: 2px;
  background: var(--bm-line);
}
.bm-langkah-pesan li:last-child { padding-bottom: 0; }
.bm-langkah-pesan li:last-child::after { display: none; }
.bm-langkah-pesan h3 { margin: 6px 0 4px; font-size: 14.5px; font-weight: 600; color: var(--bm-ink); }
.bm-langkah-pesan p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--bm-muted); }

/* --------------------------------- hadiah -------------------------------- */

.bm-poin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 22px 26px;
  margin-bottom: 24px;
  border-radius: var(--bm-radius);
  color: #fff;
  background: linear-gradient(120deg, var(--bm-primary-deep) 0%, #b5141b 52%, var(--bm-primary) 100%);
  box-shadow: var(--bm-shadow);
}
.bm-poin__nilai { flex: 0 0 auto; }
.bm-poin__nilai strong { display: block; font-size: 38px; font-weight: 700; line-height: 1; }
.bm-poin__nilai span {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
}
.bm-poin__teks { flex: 1 1 260px; font-size: 13.5px; line-height: 1.7; color: rgba(255, 255, 255, .86); }

.bm-hadiah {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bm-surface);
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius);
  box-shadow: var(--bm-shadow);
  overflow: hidden;
  transition: transform .26s var(--bm-ease), box-shadow .26s var(--bm-ease);
}
.bm-hadiah:hover { transform: translateY(-4px); box-shadow: var(--bm-shadow-lg); }
.bm-hadiah__gambar { aspect-ratio: 1 / 1; background: #fff; border-bottom: 1px solid var(--bm-line); }
.bm-hadiah__gambar img { width: 100%; height: 100%; object-fit: contain; padding: 14px; }
.bm-hadiah__isi { display: flex; flex-direction: column; flex: 1 1 auto; padding: 13px 15px 15px; }
.bm-hadiah__isi h3 { margin: 0 0 8px; font-size: 13.5px; font-weight: 600; color: var(--bm-ink); }
.bm-hadiah__poin {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 12px;
  padding: 3px 11px;
  border-radius: 99px;
  background: var(--bm-primary-soft);
  color: var(--bm-primary);
  font-size: 11.5px;
  font-weight: 600;
}
.bm-hadiah__isi .btn,
.bm-hadiah__isi .bm-btn-garis { margin-top: auto; text-align: center; }

/* ------------------------------ layar kecil ------------------------------ */

@media (max-width: 767.98px) {
  .bm-isi { padding: 26px 0 44px; }
  .bm-unggul { flex-direction: column-reverse; }
  .bm-unggul__gambar { flex: 0 0 auto; width: 100%; aspect-ratio: 16 / 9; }
  .bm-kkontak { flex-direction: column; text-align: center; gap: 10px; }
  .bm-peta iframe { height: 280px; }
  .bm-langkah-pesan li { padding-left: 46px; }
  .bm-langkah-pesan li::before { width: 32px; height: 32px; font-size: 13px; }
  .bm-langkah-pesan li::after { left: 15px; top: 36px; }
  .bm-poin { padding: 18px; }
}

/* ==========================================================================
   22. Baris tombol ajakan
   Tombol merah berasal dari template (.btn-utama) sedangkan tombol
   bergaris dari berkas ini, jadi ukuran huruf dan jarak dalamnya berbeda
   dan tingginya tidak sama saat berdampingan. Aturan di bawah
   menyamakan ketiganya dalam satu baris.
   ========================================================================== */

.bm-intro__aksi,
.bm-detail__aksi,
.bm-aksi {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
}

.bm-intro__aksi > .btn-utama,
.bm-intro__aksi > .bm-btn-garis,
.bm-detail__aksi > .btn-utama,
.bm-detail__aksi > .bm-btn-garis,
.bm-aksi > .btn-utama,
.bm-aksi > .bm-btn-garis,
.bm-aksi > .bm-btn-putih,
.bm-aksi > .bm-btn-tepi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 12px 24px;
  border-width: 1.5px;
  border-style: solid;
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.bm-intro__aksi > * > i,
.bm-intro__aksi > .btn-utama i,
.bm-intro__aksi > .bm-btn-garis i,
.bm-detail__aksi .btn-utama i,
.bm-detail__aksi .bm-btn-garis i,
.bm-aksi .btn-utama i,
.bm-aksi .bm-btn-garis i,
.bm-aksi .bm-btn-putih i,
.bm-aksi .bm-btn-tepi i {
  font-size: 17px;
  line-height: 1;
  flex: 0 0 auto;
}

/* tombol utama: merah penuh */
.bm-intro__aksi > .btn-utama,
.bm-detail__aksi > .btn-utama,
.bm-aksi > .btn-utama {
  border-color: transparent;
  color: #fff;
}

/* tombol kedua: putih bergaris, isian merah lembut saat disentuh */
.bm-btn-garis {
  border: 1.5px solid #e7d6d6;
  background: #fff;
  color: var(--bm-ink);
  font-weight: 600;
}
.bm-btn-garis i { color: var(--bm-primary); }
.bm-btn-garis:hover {
  border-color: var(--bm-primary);
  background: var(--bm-primary-soft);
  color: var(--bm-primary);
  text-decoration: none;
}

/* Tanda fokus bawaan peramban berwarna biru dan bentrok dengan tema.
   Diganti cincin merah lembut, dan hanya muncul saat berpindah dengan
   papan ketik supaya tidak tertinggal setelah diklik. */
.btn-utama:focus,
.bm-btn-garis:focus,
.bm-btn-putih:focus,
.bm-btn-tepi:focus,
.bm-masuk__kirim:focus { outline: 0; box-shadow: none; }

.btn-utama:focus-visible,
.bm-btn-garis:focus-visible,
.bm-btn-putih:focus-visible,
.bm-btn-tepi:focus-visible,
.bm-masuk__kirim:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--bm-primary-soft), 0 0 0 4.5px var(--bm-primary);
}

/* tombol kecil di dalam kartu dan tabel tidak ikut dibesarkan */
.btn-utama.btn-sm,
.bm-btn-garis.bm-btn-garis--kecil {
  min-height: 0;
  padding: 6px 12px;
  font-size: 12px;
  gap: 6px;
  border-radius: 9px;
}
.btn-utama.btn-sm i,
.bm-btn-garis--kecil i { font-size: 14px; }

@media (max-width: 575.98px) {
  .bm-intro__aksi > .btn-utama,
  .bm-intro__aksi > .bm-btn-garis,
  .bm-detail__aksi > .btn-utama,
  .bm-detail__aksi > .bm-btn-garis,
  .bm-aksi > .btn-utama,
  .bm-aksi > .bm-btn-garis,
  .bm-aksi > .bm-btn-putih,
  .bm-aksi > .bm-btn-tepi {
    flex: 1 1 100%;
    padding: 12px 16px;
    white-space: normal;
  }
}

/* ==========================================================================
   23. Header dan navigasi
   Satu susunan untuk semua ukuran layar. Tinggi header diatur lewat
   peubah, dan badan halaman diberi padding sebesar itu, jadi tidak ada
   lagi halaman yang harus menebak sendiri jarak atasnya.
   ========================================================================== */

:root { --bm-head-h: 108px; }

body { padding-top: var(--bm-head-h); }

/* template lama memberi margin-top 72px pada #main, padahal headernya
   lebih tinggi dari itu sehingga bagian atas halaman tertutup */
#main { margin-top: 0; }

.bm-head {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1030;
  height: var(--bm-head-h);
  background: var(--bm-surface);
  transition: box-shadow .25s;
}
.bm-head.is-gulir { box-shadow: 0 2px 18px rgba(74, 30, 32, .12); }

/* ------------------------------ pita merah ------------------------------- */

.bm-head__atas {
  position: relative;
  overflow: hidden;
  height: 36px;
  background: linear-gradient(100deg, var(--bm-primary-deep) 0%, #c4161c 45%, var(--bm-primary) 100%);
}
/* siluet Indonesia sebagai cap air, bukan gambar lepas yang menumpuk */
.bm-head__peta {
  position: absolute;
  left: 50%; top: 50%;
  height: 300%;
  width: auto;
  transform: translate(-50%, -50%);
  opacity: .17;
  filter: brightness(0) invert(1);
  pointer-events: none;
}
.bm-head__atas-isi {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
}

.bm-head__hubungi { display: flex; align-items: center; gap: 18px; }
.bm-head__hubungi a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, .92);
  font-size: 12px;
  text-decoration: none;
  transition: color .2s;
}
.bm-head__hubungi a:hover { color: var(--bm-accent); }
.bm-head__hubungi i { font-size: 13px; }

.bm-head__tagline {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ----------------------------- baris utama ------------------------------- */

.bm-head__utama {
  height: calc(var(--bm-head-h) - 36px);
  border-bottom: 1px solid var(--bm-line);
  background: var(--bm-surface);
}
.bm-head__utama-isi { height: 100%; display: flex; align-items: center; gap: 18px; }

.bm-head__logo { flex: 0 0 auto; line-height: 0; }
.bm-head__logo img { height: 44px; width: auto; }

/* --------------------------------- menu ---------------------------------- */

.bm-nav { flex: 1 1 auto; min-width: 0; }
.bm-nav__daftar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.bm-nav__daftar > li { flex: 0 0 auto; }
.bm-nav__daftar a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 11px;
  border-radius: 9px;
  color: var(--bm-ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .03em;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s, background .2s;
}
.bm-nav__daftar a i { font-size: 15px; color: var(--bm-primary); opacity: .7; transition: opacity .2s; }
.bm-nav__daftar a:hover { color: var(--bm-primary); background: var(--bm-soft); }
.bm-nav__daftar a:hover i { opacity: 1; }

/* penanda halaman yang sedang dibuka */
.bm-nav__daftar a.is-aktif { color: var(--bm-primary); }
.bm-nav__daftar a.is-aktif i { opacity: 1; }
.bm-nav__daftar a.is-aktif::after {
  content: '';
  position: absolute;
  left: 11px; right: 11px; bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--bm-primary);
}

.bm-nav__hanya-kecil { display: none; }

/* ------------------------------ tombol akun ------------------------------ */

.bm-head__aksi { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }

.bm-head__masuk,
.bm-head__daftar {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s, transform .2s var(--bm-ease);
}
.bm-head__masuk {
  border: 1.5px solid #e7d6d6;
  background: #fff;
  color: var(--bm-ink);
}
.bm-head__masuk:hover { border-color: var(--bm-primary); background: var(--bm-primary-soft); color: var(--bm-primary); }
.bm-head__daftar {
  border: 1.5px solid transparent;
  background: linear-gradient(135deg, var(--bm-primary), var(--bm-primary-deep));
  color: #fff;
  box-shadow: 0 5px 14px rgba(235, 33, 39, .26);
}
.bm-head__daftar:hover { transform: translateY(-2px); color: #fff; box-shadow: 0 9px 20px rgba(235, 33, 39, .34); }

/* ikon keranjang dan wishlist */
.bm-head__ikon {
  position: relative;
  width: 40px; height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #e7d6d6;
  border-radius: 10px;
  color: var(--bm-ink);
  font-size: 17px;
  text-decoration: none;
  transition: border-color .2s, color .2s, background .2s;
}
.bm-head__ikon:hover { border-color: var(--bm-primary); background: var(--bm-primary-soft); color: var(--bm-primary); }
.bm-head__hitung {
  position: absolute;
  top: -6px; right: -6px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 99px;
  background: var(--bm-primary);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
}

/* ------------------------------ panel akun ------------------------------- */

.bm-akunmenu { position: relative; }
.bm-akunmenu__tombol {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 5px;
  border: 1.5px solid #e7d6d6;
  border-radius: 99px;
  background: #fff;
  color: var(--bm-ink);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.bm-akunmenu__tombol:hover,
.bm-akunmenu.is-buka .bm-akunmenu__tombol { border-color: var(--bm-primary); background: var(--bm-primary-soft); }
.bm-akunmenu__huruf {
  width: 30px; height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bm-primary), var(--bm-primary-deep));
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.bm-akunmenu__nama { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-akunmenu__tombol > i { font-size: 15px; color: var(--bm-muted); }

.bm-akunmenu__panel {
  position: absolute;
  right: 0; top: calc(100% + 10px);
  width: 268px;
  padding: 8px;
  background: var(--bm-surface);
  border: 1px solid var(--bm-line);
  border-radius: 14px;
  box-shadow: var(--bm-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .2s, transform .22s var(--bm-ease), visibility .2s;
}
.bm-akunmenu.is-buka .bm-akunmenu__panel { opacity: 1; visibility: visible; transform: none; }

.bm-akunmenu__kepala { padding: 8px 12px 12px; border-bottom: 1px solid var(--bm-line); margin-bottom: 6px; }
.bm-akunmenu__kepala strong { display: block; font-size: 13.5px; color: var(--bm-ink); }
.bm-akunmenu__kepala span { font-size: 11.5px; color: var(--bm-faint); word-break: break-all; }

.bm-akunmenu__panel a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 9px;
  color: var(--bm-muted);
  font-size: 13px;
  text-decoration: none;
  transition: background .18s, color .18s;
}
.bm-akunmenu__panel a i { font-size: 15px; color: var(--bm-primary); opacity: .75; }
.bm-akunmenu__panel a b {
  margin-left: auto;
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 99px;
  background: var(--bm-soft);
  color: var(--bm-faint);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}
.bm-akunmenu__panel a:hover { background: var(--bm-soft); color: var(--bm-primary); }
.bm-akunmenu__panel a:hover b { background: var(--bm-primary); color: #fff; }
.bm-akunmenu__pisah { height: 1px; margin: 6px 12px; background: var(--bm-line); }
.bm-akunmenu__keluar { color: var(--bm-primary) !important; font-weight: 600; }

/* ---------------------------- tombol laci ------------------------------- */

.bm-head__toggle {
  display: none;
  width: 42px; height: 42px;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #e7d6d6;
  border-radius: 10px;
  background: #fff;
  color: var(--bm-ink);
  font-size: 20px;
  cursor: pointer;
}
.bm-head__toggle:hover { border-color: var(--bm-primary); color: var(--bm-primary); }

.bm-head__tirai {
  position: fixed;
  top: var(--bm-head-h); right: 0; bottom: 0; left: 0;
  z-index: -1;
  background: rgba(43, 35, 35, .45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s, visibility .25s;
}

/* --------------------------- menengah ke bawah --------------------------- */

@media (max-width: 1199.98px) {
  .bm-nav__daftar a { padding: 9px 8px; font-size: 11.5px; }
  .bm-nav__daftar a i { display: none; }
  .bm-nav__daftar a.is-aktif::after { left: 8px; right: 8px; }
  .bm-akunmenu__nama { display: none; }
  .bm-head__logo img { height: 40px; }
}

@media (max-width: 991.98px) {
  :root { --bm-head-h: 88px; }

  .bm-head__atas { height: 30px; }
  .bm-head__utama { height: 58px; }
  .bm-head__hubungi { display: none; }
  .bm-head__tagline { margin: 0 auto; font-size: 10.5px; }
  .bm-head__logo img { height: 36px; }
  .bm-head__toggle { display: flex; }
  .bm-head__masuk span, .bm-head__daftar { display: none; }
  .bm-head__masuk { padding: 9px 13px; }

  /* menu berubah jadi laci yang turun dari header */
  .bm-nav {
    position: fixed;
    /* Tirai gelapnya memakai z-index 1029 dan letaknya lebih belakang di DOM,
       jadi tanpa z-index di sini laci menunya tertutup tirai dan seluruh
       tautannya tidak bisa diklik walaupun terlihat. */
    z-index: 1031;
    top: var(--bm-head-h); left: 0; right: 0;
    max-height: calc(100vh - var(--bm-head-h));
    overflow-y: auto;
    padding: 10px 14px 18px;
    background: var(--bm-surface);
    border-bottom: 1px solid var(--bm-line);
    box-shadow: 0 16px 34px rgba(74, 30, 32, .16);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity .24s, transform .28s var(--bm-ease), visibility .24s;
  }
  .bm-head.is-buka .bm-nav { opacity: 1; visibility: visible; transform: none; }
  .bm-head.is-buka .bm-head__tirai { opacity: 1; visibility: visible; z-index: 1029; }

  .bm-nav__daftar { flex-direction: column; align-items: stretch; gap: 2px; }
  .bm-nav__daftar a { padding: 12px 14px; font-size: 13px; border-radius: 10px; }
  .bm-nav__daftar a i { display: inline-block; font-size: 16px; }
  .bm-nav__daftar a.is-aktif { background: var(--bm-primary-soft); }
  .bm-nav__daftar a.is-aktif::after { display: none; }
  .bm-nav__hanya-kecil { display: block; }
}

@media (max-width: 575.98px) {
  .bm-head__tagline { font-size: 9.5px; letter-spacing: .05em; }
  .bm-head__utama-isi { gap: 10px; }
  .bm-head__ikon { width: 38px; height: 38px; font-size: 16px; }
  .bm-akunmenu__panel { width: calc(100vw - 28px); right: -6px; }
}

/* ==========================================================================
   24. Kartu produk dengan tombol aksi (dipakai wishlist)
   Kartu di katalog berupa satu tautan utuh. Di wishlist kartunya perlu
   memuat tombol hapus, dan tautan tidak boleh bersarang di dalam
   tautan, jadi bagian yang bisa diklik dipisah ke elemen sendiri.
   ========================================================================== */

.bm-produk__tautan {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  text-decoration: none;
}
.bm-produk__tautan:hover { text-decoration: none; }

.bm-produk__aksi { padding: 0 14px 13px; }
.bm-produk__hapus {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 10px;
  border: 1.5px solid var(--bm-line);
  border-radius: 9px;
  background: #fff;
  color: var(--bm-muted);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color .2s, background .2s, color .2s;
}
.bm-produk__hapus i { font-size: 14px; }
.bm-produk__hapus:hover {
  border-color: var(--bm-primary);
  background: var(--bm-primary-soft);
  color: var(--bm-primary);
  text-decoration: none;
}

/* baris alat di halaman akun ikut menampung tombol di sisi kanan */
.bm-akun .bm-alat { margin-bottom: 18px; }
.bm-akun .bm-alat .bm-btn-garis { flex: 0 0 auto; }

/* ==========================================================================
   25. Kalkulator berat
   ========================================================================== */

.bm-kalk {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 24px;
  padding: 26px;
  margin-bottom: 40px;
  background: var(--bm-surface);
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius);
  box-shadow: var(--bm-shadow);
}

/* ---------------------------- langkah pilihan ---------------------------- */

.bm-kalk__langkah { list-style: none; margin: 0 0 4px; padding: 0; }

.bm-kalk__item {
  position: relative;
  display: flex;
  gap: 14px;
  padding-bottom: 18px;
}
.bm-kalk__item:last-child { padding-bottom: 6px; }

/* garis penghubung antar langkah */
.bm-kalk__item::after {
  content: '';
  position: absolute;
  left: 17px; top: 38px; bottom: 4px;
  width: 2px;
  background: var(--bm-line);
  transition: background .3s;
}
.bm-kalk__item:last-child::after { display: none; }
.bm-kalk__item.is-selesai::after { background: var(--bm-primary); }

.bm-kalk__bulat {
  position: relative;
  z-index: 1;
  flex: 0 0 36px;
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--bm-line);
  background: var(--bm-surface);
  color: var(--bm-faint);
  font-size: 14px;
  font-weight: 700;
  transition: background .3s, border-color .3s, color .3s;
}

.bm-kalk__item.is-selesai .bm-kalk__bulat {
  background: var(--bm-primary);
  border-color: var(--bm-primary);
  color: #fff;
  font-size: 17px;
}
.bm-kalk__item.is-kini .bm-kalk__bulat {
  border-color: var(--bm-primary);
  color: var(--bm-primary);
  box-shadow: 0 0 0 4px var(--bm-primary-soft);
}

.bm-kalk__isi { flex: 1 1 auto; min-width: 0; }
.bm-kalk__isi label {
  display: block;
  margin-bottom: 6px;
  padding-top: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bm-faint);
  transition: color .3s;
}
.bm-kalk__item.is-kini .bm-kalk__isi label,
.bm-kalk__item.is-selesai .bm-kalk__isi label { color: var(--bm-primary); }

.bm-kalk__pilih {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1.5px solid var(--bm-line);
  border-radius: 11px;
  background: #fff;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--bm-ink);
  outline: 0;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.bm-kalk__pilih:focus { border-color: var(--bm-primary); box-shadow: 0 0 0 3px var(--bm-primary-soft); }
.bm-kalk__item.is-kini .bm-kalk__pilih { border-color: rgba(235, 33, 39, .45); }
.bm-kalk__pilih:disabled {
  background: var(--bm-soft);
  border-style: dashed;
  color: var(--bm-faint);
  cursor: not-allowed;
}

/* ------------------------------ panel hasil ------------------------------ */

.bm-kalk__hasil {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 26px 24px;
  border-radius: var(--bm-radius);
  color: #fff;
  background: linear-gradient(140deg, var(--bm-primary-deep) 0%, #a8121a 55%, var(--bm-primary) 100%);
}
/* pendar lembut di sudut */
.bm-kalk__hasil::after {
  content: '';
  position: absolute;
  right: -70px; top: -80px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(249, 197, 11, .26), transparent 68%);
  pointer-events: none;
}
.bm-kalk__hasil > * { position: relative; z-index: 1; }

/* keadaan menunggu */
.bm-kalk__hasil:not(.is-ada) { background: var(--bm-soft); border: 1.5px dashed var(--bm-line); color: var(--bm-muted); }
.bm-kalk__tunggu { text-align: center; }
.bm-kalk__ikon {
  width: 60px; height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--bm-primary-soft);
  color: var(--bm-primary);
  font-size: 26px;
}
.bm-kalk__tunggu strong { display: block; font-size: 15px; color: var(--bm-ink); }
.bm-kalk__tunggu p { margin: 6px auto 0; max-width: 30ch; font-size: 13px; line-height: 1.7; }

/* angka utama */
.bm-kalk__angka { text-align: center; animation: bm-naik .45s var(--bm-ease); }
.bm-kalk__angka span {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
}
.bm-kalk__angka strong {
  display: block;
  margin: 4px 0 2px;
  font-size: clamp(38px, 6vw, 54px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
}
.bm-kalk__angka small { font-size: 13px; color: rgba(255, 255, 255, .82); }

.bm-kalk__kode {
  align-self: center;
  margin-top: 12px;
  padding: 5px 14px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .16);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11.5px;
  letter-spacing: .02em;
}

.bm-kalk__cip { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 12px; }
.bm-kalk__cip span {
  padding: 4px 11px;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 99px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, .92);
}

/* hitung kebutuhan */
.bm-kalk__total {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .2);
}
.bm-kalk__total label {
  display: block;
  margin-bottom: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
}
.bm-kalk__baris { display: flex; align-items: center; gap: 9px; }
.bm-kalk__baris input {
  flex: 1 1 auto;
  min-width: 0;
  height: 42px;
  padding: 0 13px;
  border: 1.5px solid rgba(255, 255, 255, .28);
  border-radius: 10px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  outline: 0;
  transition: border-color .2s, background .2s;
}
.bm-kalk__baris input:focus { border-color: #fff; background: rgba(255, 255, 255, .2); }
.bm-kalk__baris span { font-size: 12.5px; color: rgba(255, 255, 255, .8); }

.bm-kalk__total dl { margin: 14px 0 0; }
.bm-kalk__total dl > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, .18);
}
.bm-kalk__total dl > div:last-child { border-bottom: 0; }
.bm-kalk__total dt { flex: 1 1 auto; font-size: 12.5px; color: rgba(255, 255, 255, .8); font-weight: 400; }
.bm-kalk__total dd { margin: 0; font-size: 15px; font-weight: 700; color: #fff; }

.bm-kalk__tautan {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
  padding: 11px 18px;
  border-radius: 11px;
  background: #fff;
  color: var(--bm-primary);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .2s var(--bm-ease), box-shadow .25s;
}
.bm-kalk__tautan:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0, 0, 0, .2); color: var(--bm-primary-deep); }

/* ------------------------------ layar kecil ------------------------------ */

@media (max-width: 991.98px) {
  .bm-kalk { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
  .bm-kalk__hasil { padding: 22px 18px; }
}

@media (max-width: 575.98px) {
  .bm-kalk { padding: 16px; }
  .bm-kalk__item { gap: 11px; padding-bottom: 14px; }
  .bm-kalk__bulat { flex-basis: 32px; width: 32px; height: 32px; font-size: 13px; }
  .bm-kalk__item::after { left: 15px; top: 34px; }
  .bm-kalk__angka strong { font-size: 40px; }
}

/* ==========================================================================
   26. Panggung gambar tiga dimensi pada kalkulator
   ========================================================================== */

.bm-kalk__pentas {
  --bm-kilau-x: 50%;
  perspective: 900px;
  margin-bottom: 18px;
}

.bm-kalk__panggung {
  position: relative;
  transform-style: preserve-3d;
  transition: transform .4s var(--bm-ease);
  will-change: transform;
}

/* bayangan lonjong di bawah benda, ikut miring bersama panggungnya */
.bm-kalk__alas {
  position: absolute;
  left: 50%; bottom: 2px;
  width: 128px; height: 22px;
  transform: translateX(-50%) rotateX(74deg);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .5), transparent 70%);
  filter: blur(5px);
  pointer-events: none;
}

.bm-kalk__gambar {
  display: block;
  width: 170px;
  height: 170px;
  margin: 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .4));
  animation: bm-melayang 6s ease-in-out infinite;
  user-select: none;
  -webkit-user-drag: none;
}
/* benda diangkat ke depan bidang, itu yang memberi kesan kedalaman */
@keyframes bm-melayang {
  0%, 100% { transform: translateZ(46px) translateY(0); }
  50%      { transform: translateZ(46px) translateY(-11px); }
}

/* Foto produk tersimpan sebagai JPEG berlatar putih, jadi di atas panel
   merah ia diberi alas putih bersudut supaya terbaca sebagai kartu yang
   melayang, bukan kotak putih yang menempel. Maskot berupa PNG
   transparan sehingga dibiarkan mengambang apa adanya. */
.bm-kalk__gambar:not(.bm-kalk__gambar--maskot) {
  background: #fff;
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .12) inset;
}

/* kilau yang mengikuti kursor */
.bm-kalk__kilau {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  transform: translateZ(62px);
  background: radial-gradient(220px circle at var(--bm-kilau-x) 28%, rgba(255, 255, 255, .3), transparent 62%);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.bm-kalk__pentas.is-miring .bm-kalk__kilau { opacity: 1; }

/* ---------------------------- versi maskot ------------------------------- */

.bm-kalk__pentas--maskot { margin-bottom: 14px; }
/* MisterHex berukuran 276x420, jadi proporsinya jangkung */
.bm-kalk__gambar--maskot {
  width: 138px;
  height: 210px;
  filter: drop-shadow(0 14px 22px rgba(143, 16, 19, .26));
  animation-duration: 7s;
}
.bm-kalk__pentas--maskot .bm-kalk__alas {
  width: 104px;
  height: 18px;
  background: radial-gradient(ellipse at center, rgba(143, 16, 19, .26), transparent 70%);
}

/* panel hasil perlu sedikit lebih lapang karena ada gambarnya */
.bm-kalk__hasil { padding-top: 30px; }

@media (max-width: 575.98px) {
  .bm-kalk__gambar { width: 140px; height: 140px; }
  .bm-kalk__gambar--maskot { width: 116px; height: 176px; }
  .bm-kalk__alas { width: 104px; }
  .bm-kalk__pentas--maskot .bm-kalk__alas { width: 86px; }
}

@media (prefers-reduced-motion: reduce) {
  .bm-kalk__gambar { animation: none; transform: translateZ(0); }
  .bm-kalk__panggung { transition: none; }
}

/* ==========================================================================
   27. Label spesifikasi yang berfungsi sebagai penyaring varian
   ========================================================================== */

.bm-detail__spek h3 small {
  margin-left: 8px;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bm-primary);
  opacity: .75;
}

.bm-cip--pilih a {
  cursor: pointer;
  border-color: #e7d6d6;
}
.bm-cip--pilih a.is-pilih {
  background: var(--bm-primary);
  border-color: var(--bm-primary);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 5px 14px rgba(235, 33, 39, .28);
}
.bm-cip--pilih a.is-pilih:hover { background: var(--bm-primary-deep); color: #fff; transform: none; }

/* ukuran diameter dibuat selebar sama supaya berbaris rapi */
.bm-cip--rata a { min-width: 62px; justify-content: center; }

.bm-detail__terpilih {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--bm-muted);
}
.bm-detail__terpilih strong { color: var(--bm-primary); }
.bm-detail__terpilih a {
  margin-left: 6px;
  color: var(--bm-primary);
  text-decoration: underline;
}

/* ======================================================================
   Pelacakan pesanan
   ====================================================================== */

.bm-lacak-wrap {
  border-top: 1px solid var(--bm-line, #efe3e3);
  padding: 20px 0 4px;
}
.bm-lacak-wrap__judul {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--bm-ink, #2b2320);
  margin-bottom: 16px;
}
.bm-lacak-wrap__judul i { color: var(--bm-primary, #EB2127); margin-right: 5px; }

.bm-lacak {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bm-lacak__item {
  position: relative;
  padding: 0 0 20px 40px;
}
.bm-lacak__item::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 28px;
  bottom: -2px;
  width: 2px;
  background: var(--bm-line, #efe3e3);
}
.bm-lacak__item:last-child { padding-bottom: 0; }
.bm-lacak__item:last-child::before { display: none; }

.bm-lacak__titik {
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 2px solid var(--bm-lacak-warna, #d8cccc);
  color: var(--bm-lacak-warna, #d8cccc);
  font-size: 13px;
}
.bm-lacak__item.is-terbaru .bm-lacak__titik {
  background: var(--bm-lacak-warna, #EB2127);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(235, 33, 39, .12);
}

.bm-lacak__kepala {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  min-height: 28px;
}
.bm-lacak__kepala strong { font-size: 14px; }
.bm-lacak__waktu {
  font-size: 12px;
  color: var(--bm-faint, #9a8f8d);
}

.bm-lacak__ket {
  margin-top: 6px;
  padding: 9px 13px;
  background: var(--bm-soft, #faf7f7);
  border-left: 3px solid var(--bm-line, #efe3e3);
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  line-height: 1.65;
}

@media (max-width: 575.98px) {
  .bm-lacak__item { padding-left: 36px; }
  .bm-lacak__kepala { gap: 0; }
  .bm-lacak__waktu { flex: 0 0 100%; }
}

/* tombol salin tautan produk */
#bmBagiTautan { cursor: pointer; }
#bmBagiTautan.is-tersalin {
  border-color: #1f9d55;
  color: #1f9d55;
  background: #f0faf4;
}
#bmBagiTautan.is-tersalin i::before { content: "\f633"; } /* bi-check-lg */

/* ==========================================================================
   Bagian promo di halaman depan
   ========================================================================== */

.bm-promo {
  background:
    radial-gradient(circle at 12% 0%, rgba(249, 197, 11, .13), transparent 46%),
    linear-gradient(180deg, #fff 0%, var(--bm-soft, #faf7f7) 100%);
}
.bm-bagian__chip--promo {
  background: var(--bm-primary, #EB2127);
  color: #fff;
}
.bm-bagian__chip--promo i { margin-right: 4px; }


/* maskot MisterHex di samping logo perusahaan */
.bm-head__logo { display: flex; align-items: center; gap: 9px; }
.bm-head__maskot {
  height: 46px !important;
  width: auto;
  flex: 0 0 auto;
  filter: drop-shadow(0 2px 5px rgba(74, 30, 32, .18));
  transition: transform .25s var(--bm-ease, ease);
}
.bm-head__logo:hover .bm-head__maskot { transform: translateY(-2px) rotate(-3deg); }

@media (max-width: 1199.98px) { .bm-head__maskot { height: 42px !important; } }
@media (max-width: 991.98px)  { .bm-head__maskot { height: 38px !important; } }
@media (max-width: 575.98px)  { .bm-head__maskot { height: 34px !important; } }

/* lencana tahap baru pada alur pesanan: diperiksa, dikonfirmasi, QC */
.bm-badge--dicek        { background: rgba(155, 122, 18, .14); color: #9b7a12; }
.bm-badge--dikonfirmasi { background: rgba(249, 197, 11, .18); color: #9b7a12; }
.bm-badge--diqc         { background: rgba(11, 114, 133, .13); color: #0b7285; }