/**
 * mk-marketplace.css — Marketplace Akun & RekBer JAGOTOPUP
 *
 * Sumber tunggal untuk tampilan halaman /akun, /akun/{id}-{slug},
 * /akun/jual-beli/*, /rekber, /rekber/ajukan, /saluranwa.
 *
 * Nilai di sini diambil langsung dari prototipe desain — jangan diubah
 * "supaya lebih bagus". Kalau perlu penyesuaian, ubah variabel di :root
 * supaya seluruh situs ikut, jangan menimpa per halaman.
 *
 * ATURAN KERAS
 * 1. JANGAN pakai class warna Tailwind (bg-red-600, from-blue-600, dst).
 *    assetss/css/custom-styles.css me-remap warna Tailwind di seluruh situs.
 * 2. Muat dengan ?v={filemtime}:
 *      <link rel="stylesheet" href="{{ asset('assetss/css/mk-marketplace.css') }}?v={{ filemtime(public_path('assetss/css/mk-marketplace.css')) }}">
 * 3. Selektor `a` bespesifisitas tinggi di tema bisa mengalahkan warna tombol.
 *    Semua .mk-btn di bawah sudah dipertahankan dengan selektor a.mk-btn.
 *    Ukur kontras di browser, bukan di berkas ini.
 */

/* ══════════════════════════════════════════════════════════════════
   1. Token
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* Dasar & permukaan */
  --mk-bg: #161826;
  --mk-surface: linear-gradient(180deg, #20232f, #181a26);
  --mk-surface-quiet: linear-gradient(180deg, #1e2130, #181a26);
  --mk-surface-control: linear-gradient(180deg, #252838, #1c1f2c);
  --mk-surface-neutral: linear-gradient(180deg, #2a2d3d, #20222f);
  --mk-surface-accent: linear-gradient(180deg, #2a2032, #1b1a27);
  --mk-surface-input: linear-gradient(180deg, #12141f, #191b27);
  --mk-surface-nav: linear-gradient(180deg, #1e2130, #171926);
  --mk-surface-empty: linear-gradient(180deg, #1a1d29, #161826);

  /* Garis */
  --mk-border: 1px solid rgba(233, 233, 237, .14);
  --mk-border-quiet: 1px solid rgba(233, 233, 237, .12);
  --mk-border-control: 1px solid rgba(233, 233, 237, .16);
  --mk-border-accent: 1px solid rgba(247, 148, 29, .35);
  --mk-border-accent-strong: 1px solid rgba(247, 148, 29, .45);
  --mk-rule: 1px solid rgba(233, 233, 237, .08);

  /* Kedalaman */
  --mk-lift: inset 0 1px 0 rgba(255, 255, 255, .06);
  --mk-lift-neutral: inset 0 1px 0 rgba(255, 255, 255, .07);
  --mk-lift-filled: inset 0 1px 0 rgba(255, 255, 255, .45);
  --mk-lift-wa: inset 0 1px 0 rgba(255, 255, 255, .35);
  --mk-inset: inset 0 1px 2px rgba(6, 7, 14, .7);
  --mk-shadow-card: 0 2px 8px rgba(6, 7, 14, .45);
  --mk-shadow-btn: 0 3px 10px rgba(6, 7, 14, .55);

  /* Aksen oranye merek */
  --mk-accent: #F7941D;
  --mk-accent-fill: linear-gradient(180deg, #ffab3f, #e8850f);
  --mk-accent-fill-hover: linear-gradient(180deg, #ffb95c, #f7941d);
  --mk-accent-fill-active: linear-gradient(180deg, #e8850f, #cf7409);
  --mk-accent-border: #ffc07a;
  --mk-on-accent: #241703;
  --mk-accent-text: #ffb95c;
  --mk-accent-text-soft: #ffc978;
  --mk-accent-tint: linear-gradient(180deg, #3d2a10, #2a1e0c);
  --mk-accent-dim: #c79a5e;
  --mk-accent-faint: #a8763a;

  /* Hijau WhatsApp — HANYA untuk tombol & lencana WA */
  --mk-wa-fill: linear-gradient(180deg, #2ee06f, #1fb355);
  --mk-wa-fill-hover: linear-gradient(180deg, #4be887, #25c25f);
  --mk-wa-border: #52e88c;
  --mk-on-wa: #06240f;
  --mk-wa-icon: #2ee06f;
  --mk-wa-text: #7ff0aa;
  --mk-wa-panel: linear-gradient(180deg, #123122, #111f19);

  /* Teks */
  --mk-text-title: #f3f5fe;
  --mk-text-value: #e4e7f5;
  --mk-text: #cfd3e5;
  --mk-text-muted: #9397ab;
  /* Dinaikkan dari #75798c 7 Agu 2026. Token ini dipakai luas di seluruh
     stylesheet, pada ukuran 9,5-13px. Audit peramban 7 Agu 2026 mengukur
     sembilan elemen teks yang gagal ambang WCAG AA 4,5:1 dengan nilai lama.
     Nilai barunya bukan tebakan: warna yang sama DULU dipakai .mk-facts
     sebagai heksadesimal tersendiri dan terukur 5,50:1 di atas dasar
     halaman. Sejak 7 Agu 2026 rule itu ikut dilipat ke token ini, jadi
     angka itu sekarang catatan sejarah — bukan konfirmasi independen yang
     masih berdiri.

     .mk-facts__sep terpisah dulu punya heksadesimalnya sendiri (terukur
     2,78:1 — kegagalan kontras terburuk di situs) dan TIDAK ikut naik
     lewat token ini karena tidak pernah memakainya. Dilipat ke token ini
     di perbaikan yang sama (7 Agu 2026); lihat aturan .mk-facts__sep di
     bawah.

     Batas yang diketahui, dicatat supaya tidak ditabrak nanti:
     - Pemakaian paling mepet: .mk-tier__dari di atas --mk-surface-control,
       4,55:1 — lolos, tapi nyaris tanpa marjin.
     - --mk-surface-neutral pada titik paling terang (#2a2d3d) cuma
       memberi 4,25:1. Belum ada teks pudar yang duduk di situ hari ini,
       jadi belum cacat — tapi menaruh teks pudar di panel
       --mk-surface-neutral akan menciptakan satu. */
  --mk-text-faint: #8b8fa3;

  /* Radius */
  --mk-r-panel: 12px;
  --mk-r-card: 10px;
  --mk-r-input: 9px;
  --mk-r-chip: 8px;
  --mk-r-badge: 6px;
  --mk-r-micro: 5px;

  /* Ruang */
  --mk-pad-page: 14px;
  --mk-gap: 10px;
  --mk-gap-tight: 8px;
  --mk-gap-section: 18px;
  --mk-touch: 44px;
  /* Tinggi bilah nav bawah. Dipakai .mk-actionbar dan padding halaman supaya
     keduanya tidak menempel ke dasar viewport di titik yang sama. Kalau
     tinggi nav berubah, ubah DI SINI — jangan tulis angka di tempat lain. */
  --mk-nav-h: 59px;

  /* Tipografi */
  --mk-font: "Inter", system-ui, -apple-system, sans-serif;
  --mk-mono: ui-monospace, "SF Mono", Menlo, monospace;
}

/* ══════════════════════════════════════════════════════════════════
   2. Dasar
   ══════════════════════════════════════════════════════════════════ */

.mk-page,
.mk-page *,
.mk-page *::before,
.mk-page *::after { box-sizing: border-box; }

/* Wajib. Tanpa ini bidang form meluber keluar 375px. */

.mk-page {
  background: var(--mk-bg);
  color: #e9e9ed;
  font-family: var(--mk-font);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
  /* ruang untuk bilah nav bawah + bar aksi sticky */
  padding-bottom: calc(var(--mk-nav-h) + 64px);
}

.mk-page h1,
.mk-page h2,
.mk-page h3 {
  font-family: var(--mk-font);
  font-weight: 500;          /* judul tidak pernah lebih berat dari 500 */
  color: var(--mk-text-title);
  margin: 0;
}

.mk-page h1 { font-size: 22px; line-height: 1.16; letter-spacing: -.025em; }
.mk-page h2 { font-size: 16px; letter-spacing: -.015em; }
/* Reset paragraf HANYA untuk <p> tanpa kelas — sebab yang sama dengan
   `.mk-page a:not([class])` di bawah: `.mk-page p` (0,1,1) mengalahkan setiap
   kelas komponen (0,1,0), jadi `.mk-hint { margin-top: 5px }` dan
   `.mk-facts { margin-top: 12px }` tidak pernah berlaku ketika dipasang di <p>.
   Gejalanya sunyi — teks menempel, dan yang menambalnya per halaman dengan
   inline hanya menyembunyikan akarnya. Dengan :not([class]), kelas komponen
   selalu memerintah jaraknya sendiri, di elemen apa pun ia dipasang. */
.mk-page p:not([class]) { margin: 0; }

/* Tautan prosa saja. JANGAN pakai `.mk-page a` polos: spesifisitasnya (0,1,1)
   mengalahkan setiap kelas komponen (0,1,0) — .mk-chip, .mk-card, .mk-action,
   .mk-tier, .mk-section__more, .mk-nav-bawah__item semuanya berubah jadi
   oranye kalau dirender sebagai <a>, dan keadaan aktif jadi tak terlihat.
   Itu jebakan yang KAIT-WAJIB §4 catat: selektor `a` bespesifisitas tinggi
   mengalahkan warna tombol. :not([class]) membatasinya ke tautan tanpa kelas,
   sehingga setiap komponen tetap memerintah warnanya sendiri. */
.mk-page a:not([class]) { color: var(--mk-accent-text); text-underline-offset: 3px; }
.mk-page a:not([class]):hover { color: var(--mk-accent-text-soft); }

.mk-page :focus-visible {
  outline: 2px solid var(--mk-accent);
  outline-offset: 2px;
}

.mk-page ::selection { background: rgba(247, 148, 29, .3); }
.mk-page ::placeholder { color: var(--mk-text-faint); }
/* Sama alasannya dengan aturan <p> di atas: elemen tanpa kelas saja, supaya
   kelas komponen tidak pernah dikalahkan selektor dasar. */
.mk-page img { display: block; max-width: 100%; }
.mk-page ul:not([class]), .mk-page ol:not([class]) { margin: 0; padding-left: 18px; }
.mk-page li:not([class]) { margin: 0; }

/* Utilitas teks */
.mk-muted  { color: var(--mk-text-muted); }
/* Hanya varian TAUTAN, bukan `.mk-muted` polos — kelas itu dipakai luas untuk
   teks pudar non-interaktif (<p>, <span>) yang tidak butuh target sentuh.
   Diperiksa 8 Agu 2026: satu-satunya pemakaian sebagai <a> ada di peta situs
   footer (akun/_footer.blade.php), 20 tautan × 228×20px — sudah di bawah
   lantai AA, WCAG SC 2.5.8 Target Size (Minimum, 24px). var(--mk-touch)
   (44px) di sini melewati AA jauh dan sekaligus memenuhi SC 2.5.5 Target
   Size (Enhanced, AAA) — bukan cuma lolos ambang minimum.

   flex + min-height, BUKAN padding tetap: metrik baris sungguhan (13px ×
   line-height 1.5 = 19,5px) + padding genap (12px atas-bawah) berhenti
   SETENGAH pixel di bawah 44 — 43,5px, ditemukan review mutasi 8 Agu 2026
   pada draf pertama perbaikan ini. min-height tidak tunduk pada aritmetika
   tinggi baris teks; align-items menjaga teks tetap di tengah kotaknya. */
a.mk-muted { display: flex; align-items: center; min-height: var(--mk-touch); }
.mk-faint  { color: var(--mk-text-faint); }
.mk-mono   { font-family: var(--mk-mono); }
.mk-kicker {
  font-size: 10px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mk-text-faint);
}
.mk-clamp-2 {
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════════
   3. mk-section
   ══════════════════════════════════════════════════════════════════ */

.mk-section { padding: 0 var(--mk-pad-page) var(--mk-gap-section); }
.mk-section__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--mk-gap); margin-bottom: var(--mk-gap);
}
/* Kepala seksi berikon: ikon lalu judul, rapat di kiri. TANPA modifier ini
   .mk-section__head memakai space-between dan judulnya terlempar ke kanan. */
.mk-section__head--kiri { justify-content: flex-start; align-items: center; gap: var(--mk-gap-tight); }
.mk-section__ikon { flex: none; color: var(--mk-accent); display: flex; }
/* 17px→44px lantai sentuh via padding (bukan min-height): tautan teks satu
   baris di dalam `.mk-section__head` (flex, align-items:baseline) — padding
   simetris menumbuhkan kotak sentuhnya tanpa menggeser baseline teks
   terhadap judul di sampingnya. Diukur 64×17 di produksi, 8 Agu 2026. */
.mk-section__more {
  display: inline-block;
  padding: 13.5px 0;
  font-size: 11.5px; font-weight: 500; color: var(--mk-accent-text); text-decoration: none;
}

/* ══════════════════════════════════════════════════════════════════
   4. mk-hero
   ══════════════════════════════════════════════════════════════════ */

.mk-hero {
  padding: 12px var(--mk-pad-page) 16px;
  background:
    radial-gradient(120% 90% at 88% -10%, rgba(247, 148, 29, .22), rgba(22, 24, 38, 0) 60%),
    linear-gradient(180deg, #1b1e2d, #161826);
}
.mk-hero--wa {
  background:
    radial-gradient(120% 80% at 90% -20%, rgba(37, 211, 102, .16), rgba(22, 24, 38, 0) 60%),
    linear-gradient(180deg, #1a1e2a, #161826);
}

.mk-hero__bar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
/* flex + min-height, bukan padding: 91×23 (header) / 464×23 (footer) di
   produksi, 21px di bawah lantai sentuh 44px. Dipakai HANYA di dalam
   `.mk-hero__bar` (flex) dan `.mk-stack` (grid) — kedua induk itu
   memblokifikasi anchor ini, jadi inline-flex tidak bocor ke konteks lain.
   min-height menumbuhkan kotaknya, align-items menjaga teks tetap di tengah
   secara vertikal alih-alih menempel ke atas. */
.mk-brand {
  display: inline-flex; align-items: center; min-height: var(--mk-touch);
  font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  color: var(--mk-text-title); text-decoration: none;
}
.mk-brand span { color: var(--mk-accent); }
.mk-hero__route {
  font: 500 10.5px var(--mk-mono); letter-spacing: .12em; color: var(--mk-text-faint);
}

/* Maskot WAJIB berdampingan dengan teks, bukan menumpuk di bawahnya. */
.mk-hero__body { display: flex; gap: 12px; align-items: center; }
.mk-hero__copy { min-width: 0; flex: 1; }
.mk-hero__copy h1 { font-size: 25px; line-height: 1.14; margin-bottom: 6px; }
.mk-hero__copy p  { font-size: 12.5px; color: var(--mk-text-muted); }

.mk-maskot {
  width: 132px; flex: none;
  margin: -6px -6px -14px 0;
  filter: drop-shadow(0 6px 14px rgba(6, 7, 14, .55));
}
.mk-maskot--kecil { width: 104px; margin: 0 -6px -16px 0; }

/* Strip fakta bisnis */
.mk-facts {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px;
  font: 500 9.5px var(--mk-mono); letter-spacing: .08em; color: var(--mk-text-faint);
}
.mk-facts__sep { color: var(--mk-text-faint); }

/* ══════════════════════════════════════════════════════════════════
   5. mk-search
   ══════════════════════════════════════════════════════════════════ */

.mk-search {
  display: flex; margin-top: 15px;
  border: var(--mk-border-control); border-radius: var(--mk-r-card);
  overflow: hidden; background: var(--mk-surface-input); box-shadow: var(--mk-inset);
}
.mk-search__input {
  flex: 1; min-width: 0; border: 0; background: transparent;
  font: 13.5px var(--mk-font); color: #e9e9ed;
  padding: 12px; outline: none;
}
.mk-search__btn {
  margin: 3px; min-height: var(--mk-touch);
  border: 1px solid var(--mk-accent-border); border-radius: var(--mk-r-chip);
  background: var(--mk-accent-fill); box-shadow: var(--mk-lift-filled), 0 1px 2px rgba(6, 7, 14, .55);
  color: var(--mk-on-accent); font: 600 13px var(--mk-font);
  display: flex; align-items: center; padding: 0 14px; cursor: pointer;
}
.mk-search__btn:hover { background: var(--mk-accent-fill-hover); }

/* ══════════════════════════════════════════════════════════════════
   6. mk-chip — satu baris yang digeser, TIDAK membungkus
   ══════════════════════════════════════════════════════════════════ */

.mk-chips {
  display: flex; gap: 6px;
  padding: 11px var(--mk-pad-page);
  overflow-x: auto;
  border-top: var(--mk-rule);
  scrollbar-width: none;
}
.mk-chips::-webkit-scrollbar { display: none; }

.mk-chip {
  flex: none; white-space: nowrap; text-decoration: none;
  display: inline-flex; align-items: center; min-height: var(--mk-touch);
  background: var(--mk-surface-control); border: var(--mk-border);
  box-shadow: var(--mk-lift); color: var(--mk-text);
  font: 500 12px var(--mk-font); padding: 0 13px;
  border-radius: var(--mk-r-chip);
}
.mk-chip:hover { color: var(--mk-text-value); }
.mk-chip.is-aktif {
  background: var(--mk-accent-fill); border: 1px solid var(--mk-accent-border);
  box-shadow: var(--mk-lift-filled), 0 1px 2px rgba(6, 7, 14, .5);
  color: var(--mk-on-accent); font-weight: 600;
}

/* Chip yang MEMBUNGKUS — untuk daftar spek di dalam kartu, bukan navigasi.
   .mk-chips adalah strip geser satu baris; jangan dipakai di dalam kartu,
   butir terakhir akan terpotong di tepi kartu. */
.mk-chip-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-chip-wrap .mk-chip {
  min-height: 30px; padding: 0 9px;    /* label pasif, bukan target sentuh */
  border-radius: 7px;
}

/* ══════════════════════════════════════════════════════════════════
   7. mk-action — dua kolom; hanya kartu utama sebaris penuh
   ══════════════════════════════════════════════════════════════════ */

.mk-actions {
  padding: 2px var(--mk-pad-page) var(--mk-pad-page);
  display: grid; grid-template-columns: 1fr 1fr; gap: 9px;
}
.mk-action {
  padding: 11px; border-radius: var(--mk-r-card);
  background: var(--mk-surface); border: var(--mk-border);
  box-shadow: var(--mk-lift), var(--mk-shadow-card);
  text-decoration: none; display: block;
}
.mk-action__title { font: 500 13.5px var(--mk-font); color: var(--mk-text-title); margin-top: 8px; }
.mk-action__sub   { font: 11px var(--mk-font); color: var(--mk-text-muted); }
.mk-action svg { color: var(--mk-accent); }

.mk-action--lebar {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 11px; padding: 12px;
  background: var(--mk-surface-accent); border: var(--mk-border-accent);
  box-shadow: var(--mk-lift-neutral), var(--mk-shadow-card);
}
.mk-action--lebar .mk-action__title { margin-top: 0; font-size: 14.5px; }
.mk-action__ikon {
  flex: none; width: 38px; height: 38px; border-radius: var(--mk-r-input);
  background: var(--mk-accent-fill); border: 1px solid var(--mk-accent-border);
  box-shadow: var(--mk-lift-filled);
  display: flex; align-items: center; justify-content: center;
  color: var(--mk-on-accent);
}
.mk-action__ikon svg { color: inherit; }

/* ══════════════════════════════════════════════════════════════════
   8. mk-btn
   ══════════════════════════════════════════════════════════════════ */

.mk-btn, a.mk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: var(--mk-touch); padding: 0 16px;
  border-radius: var(--mk-r-card); border: var(--mk-border-control);
  background: var(--mk-surface-neutral); box-shadow: var(--mk-lift-neutral);
  color: var(--mk-text-value);
  font: 500 13px var(--mk-font); text-decoration: none; cursor: pointer;
  transition: background .12s ease, box-shadow .12s ease;
}
.mk-btn:hover, a.mk-btn:hover { color: var(--mk-text-title); }
.mk-btn:active, a.mk-btn:active { box-shadow: var(--mk-inset); }
.mk-btn:disabled, .mk-btn[aria-disabled="true"] { opacity: .45; cursor: default; }

.mk-btn--primary, a.mk-btn--primary {
  background: var(--mk-accent-fill);
  border: 1px solid var(--mk-accent-border);
  box-shadow: var(--mk-lift-filled), var(--mk-shadow-btn);
  color: var(--mk-on-accent);
  font-size: 14.5px; font-weight: 600;
}
.mk-btn--primary:hover, a.mk-btn--primary:hover {
  background: var(--mk-accent-fill-hover); color: var(--mk-on-accent);
}
.mk-btn--primary:active, a.mk-btn--primary:active {
  background: var(--mk-accent-fill-active);
  box-shadow: inset 0 1px 3px rgba(6, 7, 14, .4);
}

.mk-btn--wa, a.mk-btn--wa {
  background: var(--mk-wa-fill);
  border: 1px solid var(--mk-wa-border);
  box-shadow: var(--mk-lift-wa), var(--mk-shadow-btn);
  color: var(--mk-on-wa); font-weight: 600; font-size: 14px;
}
.mk-btn--wa:hover, a.mk-btn--wa:hover { background: var(--mk-wa-fill-hover); color: var(--mk-on-wa); }

.mk-btn--ghost, a.mk-btn--ghost {
  background: var(--mk-surface-control); border: var(--mk-border);
  box-shadow: var(--mk-lift); color: var(--mk-text);
}

.mk-btn--kecil, a.mk-btn--kecil {
  min-height: var(--mk-touch); padding: 0 12px;
  border-radius: var(--mk-r-chip); font-size: 11.5px;
}

.mk-btn--blok, a.mk-btn--blok { display: flex; width: 100%; }
.mk-btn--tinggi, a.mk-btn--tinggi { min-height: 50px; font-size: 15px; }

/* Tombol ikon 40px (bar atas: kembali, bagikan) — tingkat sentuh sekunder */
.mk-btn-ikon {
  width: var(--mk-touch); height: var(--mk-touch); flex: none;
  border-radius: var(--mk-r-input);
  background: var(--mk-surface-neutral); border: var(--mk-border-control);
  box-shadow: var(--mk-lift-neutral);
  display: flex; align-items: center; justify-content: center;
  color: var(--mk-text); cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════════
   9. mk-card — kartu listing
   ══════════════════════════════════════════════════════════════════ */

.mk-card {
  border-radius: var(--mk-r-card); overflow: hidden;
  border: var(--mk-border); background: var(--mk-surface);
  box-shadow: var(--mk-lift), var(--mk-shadow-card);
  text-decoration: none; display: block;
}
.mk-card--sorot { border: var(--mk-border-accent); }
.mk-card--panel { border-radius: var(--mk-r-panel); box-shadow: var(--mk-lift), 0 4px 14px rgba(6, 7, 14, .5); }

.mk-card__media { position: relative; }
/* 4:5 — rasio unggahan pemilik (1080×1350), jadi fotonya tampil UTUH dan berkas
   yang sama langsung bisa dipakai di Instagram. Sebelum 2 Agu 2026 kartu 4:3 dan
   galeri 16:10 MEMBUANG sampai 50% tiap foto; yang hilang justru bagian yang
   dijual — judul promo di atas dan daftar skin di bawah.

   Placeholder ikut selektor yang sama, bukan `style` inline. Dua sumber untuk
   satu keputusan berarti penggantian rasio berikutnya meninggalkan halaman
   tanpa foto di rasio lama — itu persis yang terjadi di perpindahan ini.
   Dikunci `AkunDetailKayaTest`. */
/* ⚠ `contain`, BUKAN `cover` — putusan pemilik 3 Agu 2026. Berlaku untuk SETIAP
   tempat foto listing tampil (galeri, kartu, thumbnail, kartu ringkas); satu
   saja tertinggal membuat foto yang sama terpotong di satu halaman dan utuh di
   halaman lain.

   Rasio 4:5 dipilih dari listing DEMO yang fotonya kebetulan 1080×1350. Foto
   listing NYATA di produksi ternyata tangkapan layar 1600×739 memanjang, dan
   `cover` membuang **63%**-nya — panel statistik senjata terpotong di kiri,
   teks di kanan. Bidang kosong masih bisa diperbaiki pemilik dengan mengunggah
   ulang; bagian gambar yang terpotong hilang tanpa ia tahu.

   Wadahnya diberi permukaan supaya bidang kosongnya terbaca sengaja, bukan
   seperti gambar yang gagal dimuat. Dikunci
   `AkunDetailKayaTest::test_foto_listing_tidak_pernah_dipotong`. */
.mk-card__media { background: var(--mk-surface-quiet); }
.mk-card__media img,
.mk-card__media .mk-ph { width: 100%; aspect-ratio: 4 / 5; object-fit: contain; }

.mk-card__body  { padding: 9px 10px 11px; }
.mk-card__title { font: 500 13px/1.32 var(--mk-font); color: var(--mk-text-title); }
.mk-card__spek  { font: 10.5px var(--mk-mono); color: var(--mk-text-muted); margin-top: 4px; }
.mk-card__price { font: 600 15px var(--mk-font); color: var(--mk-text-value); margin-top: 6px; }
.mk-card__price--flash { color: var(--mk-accent-text); }
.mk-card__strike { font: 11px var(--mk-font); color: var(--mk-text-faint); text-decoration: line-through; }
/* Harga listing yang sudah lepas. 12,5px, bukan 11px: pada ukuran di bawah
   18,66px WCAG AA menuntut 4,5:1, dan baris ini harus terbaca sekilas —
   ia satu-satunya jangkar harga di kartu terjual. */
.mk-card__price--lepas { font: 12.5px var(--mk-font); color: var(--mk-text-muted); margin-top: 6px; }
/* Harga lama di baris varian/opsi — kait tes AkunDetailKayaTest. */
.mk-opt__coret { font: 11.5px var(--mk-font); color: var(--mk-text-faint); text-decoration: line-through; }
.mk-card__prices { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; margin-top: 6px; }

/* Kartu besar (flash sale, detail) */
.mk-card--besar .mk-card__body  { padding: 12px; }
.mk-card--besar .mk-card__title { font-size: 16px; line-height: 1.28; letter-spacing: -.01em; }

/* Baris listing 96px | 1fr */
.mk-card--baris {
  display: grid; grid-template-columns: 96px 1fr; gap: 11px; padding: 10px;
}
.mk-card--baris img { width: 96px; height: 96px; border-radius: var(--mk-r-chip); object-fit: contain; background: var(--mk-surface-quiet); }
.mk-card--baris .mk-card__title { font-size: 14px; line-height: 1.3; }

/* Baris kecil 74px (akun serupa) */
.mk-card--mini { display: grid; grid-template-columns: 74px 1fr; gap: var(--mk-gap); padding: 9px; }
.mk-card--mini img { width: 74px; height: 74px; border-radius: var(--mk-r-chip); object-fit: contain; background: var(--mk-surface-quiet); }
.mk-card--mini .mk-card__title { font-size: 13.5px; line-height: 1.3; }

/* Pita tier vertikal + isi */
.mk-card--pita { display: grid; grid-template-columns: 34px 1fr; }
.mk-tier-pita {
  background: linear-gradient(180deg, #3a2a12, #1b1d2b);
  border-right: var(--mk-border-accent);
  display: flex; align-items: center; justify-content: center;
}
.mk-tier-pita span {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font: 600 11.5px var(--mk-font); letter-spacing: .26em;
  color: var(--mk-accent-text);
}

/* ══════════════════════════════════════════════════════════════════
   10. mk-grid / mk-tile
   ══════════════════════════════════════════════════════════════════ */

.mk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.mk-grid--3 { grid-template-columns: repeat(3, 1fr); gap: 7px; }
.mk-stack { display: grid; gap: var(--mk-gap-tight); }

/* ══════════════════════════════════════════════════════════════════
   11. mk-tier — badge tingkat & tarif
   ══════════════════════════════════════════════════════════════════ */

.mk-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font: 600 9px var(--mk-font); letter-spacing: .08em;
  padding: 3px 6px; border-radius: var(--mk-r-micro);
  background: rgba(13, 15, 26, .8); border: 1px solid rgba(233, 233, 237, .2);
  color: var(--mk-text);
}
.mk-badge--accent {
  background: var(--mk-accent-fill); border: 1px solid var(--mk-accent-border);
  box-shadow: var(--mk-lift-filled); color: var(--mk-on-accent);
}
.mk-badge--tint {
  background: var(--mk-accent-tint); border: var(--mk-border-accent);
  box-shadow: none; color: var(--mk-accent-text-soft);
}
.mk-badge--pojok { position: absolute; top: 6px; left: 6px; }
.mk-badge--besar { font-size: 10px; letter-spacing: .1em; padding: 4px 8px; border-radius: var(--mk-r-badge); }

.mk-tier {
  padding: 9px; border-radius: var(--mk-r-input);
  border: var(--mk-border); background: var(--mk-surface-control);
  box-shadow: var(--mk-lift); text-decoration: none; display: block;
}
.mk-tier__nama { font: 500 11.5px var(--mk-font); color: var(--mk-text); }
.mk-tier__dari { font: 10px var(--mk-mono); color: var(--mk-text-faint); margin-top: 2px; }
.mk-tier.is-aktif {
  border: var(--mk-border-accent-strong); background: var(--mk-accent-tint);
  box-shadow: var(--mk-lift-neutral);
}
.mk-tier.is-aktif .mk-tier__nama { color: var(--mk-accent-text-soft); }
.mk-tier.is-aktif .mk-tier__dari { color: var(--mk-accent-dim); }

/* ══════════════════════════════════════════════════════════════════
   12. mk-harga — blok harga halaman detail
   ══════════════════════════════════════════════════════════════════ */

.mk-harga {
  border-radius: var(--mk-r-panel);
  border: var(--mk-border-accent); background: var(--mk-surface-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 3px 12px rgba(6, 7, 14, .5);
  padding: 12px; margin-top: 12px;
}
.mk-harga__head {
  display: flex; justify-content: space-between; align-items: center;
  font: 600 10px var(--mk-font); letter-spacing: .14em; color: var(--mk-accent-text-soft);
}
.mk-harga__clock { font: 600 11.5px var(--mk-mono); color: var(--mk-text-value); letter-spacing: 0; }
.mk-harga__row { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-top: 7px; }
.mk-harga__now {
  font: 600 28px/1 var(--mk-font); letter-spacing: -.03em; color: var(--mk-accent-text);
}
.mk-harga__was { font: 13px var(--mk-font); color: var(--mk-text-faint); text-decoration: line-through; }
.mk-harga__note { font: 11.5px/1.5 var(--mk-font); color: var(--mk-text-muted); margin-top: 7px; }

/* ══════════════════════════════════════════════════════════════════
   13. mk-galeri
   ══════════════════════════════════════════════════════════════════ */

.mk-galeri { position: relative; }
/* `contain` — lihat catatan di §9 (.mk-card__media). Wadahnya diberi permukaan
   supaya bidang kosong foto memanjang terbaca sengaja. */
.mk-galeri { background: var(--mk-surface-quiet); }
.mk-galeri img { width: 100%; aspect-ratio: 4 / 5; object-fit: contain; }
.mk-galeri__badges { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; }
.mk-galeri__count {
  position: absolute; bottom: 10px; right: 10px;
  background: rgba(13, 15, 26, .82); border: var(--mk-border-control);
  color: var(--mk-text); font: 500 10.5px var(--mk-mono);
  padding: 3px 7px; border-radius: var(--mk-r-badge);
}
.mk-galeri__thumbs {
  display: flex; gap: 7px; padding: 9px var(--mk-pad-page);
  overflow-x: auto; scrollbar-width: none;
}
.mk-galeri__thumbs::-webkit-scrollbar { display: none; }
/* Tegak 4:5 mengikuti fotonya. Bujur sangkar 56×56 memotong 20% tiap thumbnail,
   dan yang terpotong di foto listing justru tepi atas/bawah yang membedakan
   satu foto dari lainnya — thumbnail yang tak bisa dibedakan tidak berguna. */
.mk-thumb {
  flex: none; width: 56px; height: 70px; padding: 2px;
  border-radius: var(--mk-r-chip); cursor: pointer;
  border: var(--mk-border); background: var(--mk-surface-control);
  box-shadow: var(--mk-lift);
}
.mk-thumb img { width: 100%; height: 100%; border-radius: var(--mk-r-badge); object-fit: contain; }
.mk-thumb.is-aktif { border: 1px solid var(--mk-accent); background: var(--mk-accent-tint); }

/* ══════════════════════════════════════════════════════════════════
   14. mk-spek — tabel spesifikasi
   ══════════════════════════════════════════════════════════════════ */

.mk-spek, .mk-spek-polos {
  border-radius: var(--mk-r-card); overflow: hidden;
  border: var(--mk-border-quiet); background: var(--mk-surface-quiet);
  box-shadow: var(--mk-lift);
}
.mk-spek__row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 12px; font-size: 13px;
  border-bottom: var(--mk-rule);
}
.mk-spek__row:last-child { border-bottom: 0; }
.mk-spek__row:nth-child(even) { background: rgba(233, 233, 237, .02); }
.mk-spek__row dt, .mk-spek__label { color: var(--mk-text-muted); margin: 0; }
.mk-spek__row dd, .mk-spek__value { color: var(--mk-text-value); margin: 0; text-align: right; }
.mk-spek__value--accent { color: var(--mk-accent-text-soft); }

/* Butir `spesifikasi` tanpa titik dua (format salah, lihat docblock
   SpesifikasiAkun): daftar satu kolom polos, BUKAN baris dt/dd — dt kosong
   mengumumkan "term kosong" ke pembaca layar, dan dd tanpa dt tidak valid
   di dalam <dl>. Sengaja list-item biasa, kiri rata, tanpa em-dash. */
.mk-spek-polos { list-style: none; margin: 0; padding: 0; }
.mk-spek-polos__row {
  padding: 9px 12px; font-size: 13px; text-align: left;
  color: var(--mk-text-value);
  border-bottom: var(--mk-rule);
}
.mk-spek-polos__row:last-child { border-bottom: 0; }
.mk-spek-polos__row:nth-child(even) { background: rgba(233, 233, 237, .02); }
.mk-spek + .mk-spek-polos { margin-top: 10px; }

/* Langkah bernomor ("Cara serah-terimanya", "Cara kerjanya") */.mk-langkah {
  display: flex; gap: 10px; padding: 11px;
  border-radius: var(--mk-r-card); background: var(--mk-surface);
  border: var(--mk-border); box-shadow: var(--mk-lift);
}
.mk-langkah__no { flex: none; font: 600 11px var(--mk-mono); color: var(--mk-accent-text); }
.mk-langkah__title { font: 500 13px var(--mk-font); color: var(--mk-text-title); }
.mk-langkah__body  { font: 11.5px/1.45 var(--mk-font); color: var(--mk-text-muted); margin-top: 2px; }

/* — FAQ / akordion — dibangun di atas <details>/<summary>, tanpa JS.
   Penanda segitiga bawaan peramban dimatikan dan diganti +/− seperti desain. */
.mk-faq { display: grid; gap: 7px; }

.mk-faq__item {
  border-radius: var(--mk-r-card); border: var(--mk-border-quiet);
  background: var(--mk-surface-quiet); box-shadow: var(--mk-lift);
  overflow: hidden;
}

.mk-faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: var(--mk-touch); padding: 11px 12px;
  font: 500 12.5px/1.4 var(--mk-font); color: var(--mk-text-title);
  cursor: pointer; list-style: none;
}
.mk-faq__q::-webkit-details-marker { display: none; }
.mk-faq__q::marker { content: ''; }

/* Penanda +/− dibuat dari konten, bukan gambar — ikut warna teks. */
.mk-faq__q::after {
  content: '+'; flex: none;
  font: 400 16px/1 var(--mk-font); color: var(--mk-text-faint);
}
.mk-faq__item[open] > .mk-faq__q::after { content: '\2212'; }
.mk-faq__item[open] > .mk-faq__q { color: var(--mk-text-title); }
.mk-faq__q:hover::after { color: var(--mk-text); }

.mk-faq__a {
  padding: 0 12px 12px;
  font: 11.5px/1.5 var(--mk-font); color: var(--mk-text-muted);
}
.mk-faq__a p { margin: 0 0 8px; }
.mk-faq__a p:last-child { margin-bottom: 0; }

/* ══════════════════════════════════════════════════════════════════
   15. Form — mk-field / mk-input / mk-select / mk-opt / mk-pilih
   ══════════════════════════════════════════════════════════════════ */

.mk-field-stack { display: grid; gap: var(--mk-gap); }
.mk-field { display: block; }
.mk-field > label {
  display: block; font: 500 11px var(--mk-font); letter-spacing: .04em;
  color: var(--mk-text-muted); margin-bottom: 5px;
}

.mk-input, .mk-select, .mk-page textarea.mk-input {
  width: 100%; min-height: var(--mk-touch);
  border: var(--mk-border-control); border-radius: var(--mk-r-input);
  background: var(--mk-surface-input); box-shadow: var(--mk-inset);
  color: #e9e9ed; font: 13.5px var(--mk-font);
  padding: 11px 12px; outline: none;
}
.mk-page textarea.mk-input { min-height: 0; line-height: 1.5; resize: vertical; }
.mk-select { appearance: none; }
.mk-input:focus, .mk-select:focus { border-color: var(--mk-accent); }

.mk-hint { font: 11px/1.5 var(--mk-font); color: var(--mk-text-faint); margin-top: 5px; }

/* Radio penanggung biaya — 3 kolom */
.mk-pilih { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mk-opt {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 42px; border-radius: var(--mk-r-input);
  border: var(--mk-border-control); background: var(--mk-surface-control);
  box-shadow: var(--mk-lift);
  font: 500 12px var(--mk-font); color: var(--mk-text); cursor: pointer;
}
.mk-opt input { accent-color: var(--mk-accent); width: 14px; height: 14px; margin: 0; }
.mk-opt.is-aktif {
  border: var(--mk-border-accent-strong); background: var(--mk-accent-tint);
  box-shadow: var(--mk-lift-neutral); color: var(--mk-accent-text-soft);
}

/* Drop zone unggahan */
.mk-unggah {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 16px; text-align: center;
  border-radius: var(--mk-r-card); border: 1px dashed rgba(233, 233, 237, .2);
  background: var(--mk-surface-empty); cursor: pointer;
  font: 500 12px var(--mk-font); color: var(--mk-text-muted);
}
.mk-unggah--kecil { min-height: 74px; padding: 10px; gap: 5px; }
.mk-unggah--kecil strong { font: 500 11.5px var(--mk-font); color: var(--mk-text); }
.mk-unggah--kecil span   { font: 10px var(--mk-font); color: var(--mk-text-faint); }
.mk-unggah input[type="file"] { display: none; }

/* Baris setuju / info terkunci */
.mk-setuju {
  display: flex; align-items: flex-start; gap: 9px; padding: 11px;
  border-radius: var(--mk-r-card); background: var(--mk-surface-quiet);
  border: var(--mk-border-quiet); cursor: pointer;
  font: 11.5px/1.5 var(--mk-font); color: var(--mk-text);
}
.mk-setuju input { accent-color: var(--mk-accent); width: 16px; height: 16px; margin: 1px 0 0; flex: none; }

/* ══════════════════════════════════════════════════════════════════
   16. mk-galat — WADAH INI PUNYA RUANG PERMANEN. JANGAN DIHAPUS.
   ══════════════════════════════════════════════════════════════════ */

.mk-galat {
  border: var(--mk-border-accent-strong); border-radius: var(--mk-r-input);
  background: linear-gradient(180deg, #33220f, #241a10);
  box-shadow: var(--mk-lift);
  color: var(--mk-accent-text-soft);
  font: 12px/1.45 var(--mk-font); padding: 10px 11px;
  min-height: 40px;                 /* ruang tetap walau kosong */
}
.mk-galat:empty { visibility: hidden; }
/* visibility, BUKAN display:none — layout tidak boleh melompat saat pesan muncul */

.mk-msg {
  border: var(--mk-border-quiet); border-radius: var(--mk-r-card);
  background: var(--mk-surface-quiet); box-shadow: var(--mk-lift);
  padding: 11px; font: 11.5px/1.5 var(--mk-font); color: var(--mk-text);
}
.mk-msg--peringatan {
  display: flex; gap: 10px;
  border: var(--mk-border-accent); background: var(--mk-surface-accent);
  box-shadow: var(--mk-lift-neutral);
}
.mk-msg--peringatan svg { flex: none; margin-top: 1px; color: var(--mk-accent); }

/* ══════════════════════════════════════════════════════════════════
   17. mk-wizard / mk-steps-bar / mk-tahap
   ══════════════════════════════════════════════════════════════════ */

.mk-wizard { padding: var(--mk-pad-page); }

.mk-steps-bar {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  padding: 12px var(--mk-pad-page) 0;
}
.mk-steps-bar__bar { height: 4px; border-radius: 3px; background: rgba(233, 233, 237, .14); }
.mk-steps-bar__label { font: 500 9.5px var(--mk-font); color: var(--mk-text-faint); margin-top: 5px; }
.mk-steps-bar__step.is-selesai .mk-steps-bar__bar,
.mk-steps-bar__step.is-aktif   .mk-steps-bar__bar { background: var(--mk-accent-fill); }
.mk-steps-bar__step.is-selesai .mk-steps-bar__label,
.mk-steps-bar__step.is-aktif   .mk-steps-bar__label { color: var(--mk-accent-text); }

/* Ringkasan langkah yang sudah lewat — inputnya tetap ada sebagai hidden */
.mk-tahap-ringkas {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 11px; border-radius: var(--mk-r-card);
  background: var(--mk-surface-quiet); border: var(--mk-border-quiet);
}
.mk-tahap-ringkas__label { font: 500 9.5px var(--mk-mono); letter-spacing: .1em; color: var(--mk-text-faint); }
.mk-tahap-ringkas__isi   { font: 500 12.5px var(--mk-font); color: var(--mk-text-value); margin-top: 2px; }
.mk-tahap-ringkas__ubah  { flex: none; font: 500 11px var(--mk-font); color: var(--mk-accent-text); text-decoration: none; }

/* Kalkulator — kait #rekber-kalkulator */
#rekber-kalkulator {
  border-radius: var(--mk-r-panel);
  border: var(--mk-border-accent); background: var(--mk-surface-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 3px 12px rgba(6, 7, 14, .5);
  padding: 12px;
}
#rekber-kalkulator label { color: var(--mk-accent-dim); }
.mk-nominal {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid rgba(233, 233, 237, .18); border-radius: var(--mk-r-input);
  background: var(--mk-surface-input); box-shadow: var(--mk-inset); padding: 0 12px;
}
.mk-nominal__rp { font: 500 13.5px var(--mk-font); color: var(--mk-text-muted); }
/* #nominal WAJIB type="text" — number tidak bisa pemisah ribuan */
#nominal {
  flex: 1; min-width: 0; border: 0; background: transparent;
  color: var(--mk-text-title); font: 600 17px var(--mk-font);
  padding: 11px 0; min-height: var(--mk-touch); outline: none;
}
.mk-kalk-out {
  margin-top: 12px; padding-top: 11px; border-top: var(--mk-border-quiet);
  display: grid; gap: 7px; font-size: 13px;
}
.mk-kalk-out__row { display: flex; justify-content: space-between; }
.mk-kalk-out__row--total {
  padding-top: 7px; border-top: var(--mk-rule); color: var(--mk-text);
}
#kalkulator-biaya, #kalkulator-total { color: var(--mk-text-value); }
#kalkulator-terima { font: 600 15px var(--mk-font); color: var(--mk-accent-text-soft); }

/* ══════════════════════════════════════════════════════════════════
   18. mk-admin / mk-kanal
   ══════════════════════════════════════════════════════════════════ */

.mk-admin {
  display: flex; align-items: center; gap: var(--mk-gap); padding: 10px;
  border-radius: var(--mk-r-card); background: var(--mk-surface);
  border: var(--mk-border); box-shadow: var(--mk-lift);
}
.mk-admin img { width: 38px; height: 38px; border-radius: var(--mk-r-input); flex: none; object-fit: cover; }
.mk-admin__isi  { min-width: 0; flex: 1; }
.mk-admin__nama { font: 500 13px var(--mk-font); color: var(--mk-text-title); }
.mk-admin__jam  { font: 11px var(--mk-font); color: var(--mk-text-muted); }

/* Tombol WA di baris admin memakai tingkat sekunder 40px. Kartu saluran TIDAK:
   "Ikuti saluran" adalah aksi utama halaman itu, jadi 44px. */
.mk-admin .mk-btn, .mk-kanal--kecil .mk-btn { min-height: 40px; }

.mk-kanal {
  border-radius: var(--mk-r-panel); overflow: hidden;
  border: var(--mk-border); background: var(--mk-surface);
  box-shadow: var(--mk-lift), var(--mk-shadow-card);
}
.mk-kanal__poster { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
.mk-kanal--kecil .mk-kanal__poster { aspect-ratio: 4 / 3; }
.mk-kanal__body { padding: 11px 12px 12px; }
.mk-kanal__nama {
  display: flex; align-items: center; gap: 7px;
  font: 500 14px var(--mk-font); color: var(--mk-text-title);
}
.mk-kanal__desc { font: 11.5px/1.45 var(--mk-font); color: var(--mk-text-muted); margin-top: 4px; }
.mk-kanal__aksi { display: flex; align-items: center; gap: var(--mk-gap-tight); margin-top: var(--mk-gap); }
.mk-kanal__aksi .mk-btn { min-height: var(--mk-touch); }

.mk-verified { flex: none; color: var(--mk-wa-icon); }
/* Angka "N Terverifikasi" DIHITUNG dari isi daftar — jangan angka tetap */
.mk-verified-count {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 10px; border-radius: var(--mk-r-chip);
  border: 1px solid rgba(37, 211, 102, .4); background: var(--mk-wa-panel);
  box-shadow: var(--mk-lift); font: 600 11.5px var(--mk-font); color: var(--mk-wa-text);
}

/* ══════════════════════════════════════════════════════════════════
   19. mk-kosong — keadaan kosong & stok habis
   ══════════════════════════════════════════════════════════════════ */

.mk-kosong {
  padding: 16px; text-align: center;
  border-radius: var(--mk-r-card); border: 1px dashed rgba(233, 233, 237, .18);
  background: var(--mk-surface-empty);
}
.mk-kosong__title { font: 500 12.5px var(--mk-font); color: var(--mk-text); }
.mk-kosong__body  { font: 11.5px/1.5 var(--mk-font); color: var(--mk-text-faint); margin-top: 3px; }
.mk-kosong--sel {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}

.mk-habis .mk-card__media img,
.mk-habis .mk-card__media > .mk-ph { opacity: .5; }
.mk-habis__selubung {
  position: absolute; inset: 0; background: rgba(13, 15, 26, .62);
  display: flex; align-items: center; justify-content: center;
}
.mk-habis__label {
  background: var(--mk-surface-neutral); border: 1px solid rgba(233, 233, 237, .26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  color: var(--mk-text-value); font: 600 9.5px var(--mk-font); letter-spacing: .1em;
  padding: 5px 8px; border-radius: var(--mk-r-badge);
}
.mk-habis .mk-card__title { color: #b2b6ca; }
.mk-habis .mk-card__spek  { color: var(--mk-text-faint); }

/* ══════════════════════════════════════════════════════════════════
   20. Bar atas, bar aksi sticky, paginasi
   ══════════════════════════════════════════════════════════════════ */

.mk-topbar { 
  display: flex; align-items: center; gap: var(--mk-gap);
  padding: 10px 12px; border-bottom: var(--mk-border-quiet);
  background: linear-gradient(180deg, #1c1f2e, #171926);
}
/* Judul halaman turunan. Boleh (dan sebaiknya) berupa <h1>: setiap halaman
   butuh satu H1 untuk struktur dokumen — termasuk halaman noindex, karena
   pembaca layar tetap memakainya untuk navigasi. Ukurannya kecil karena
   posisinya di bar, bukan karena tingkatannya rendah. */
.mk-topbar__judul {
  min-width: 0; flex: 1; margin: 0;
  font: 500 13px var(--mk-font); letter-spacing: 0;
  color: var(--mk-text-title);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mk-breadcrumb {
  min-width: 0; flex: 1; font: 11px var(--mk-font); color: var(--mk-text-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Napas di bawah bar. `.mk-section` sengaja `padding-top: 0` supaya seksi bisa
   ditumpuk rapat — tapi seksi PERTAMA sesudah bar atas bukan tumpukan, ia
   kepala halaman, dan tanpa jarak judulnya menempel ke garis bar (diukur: 0px
   di /akun/jual-beli/*, /akun/rental/*; dilaporkan pemilik 2 Agu 2026).

   Selektor saudara-berdampingan, BUKAN aturan di `.mk-topbar` sendiri: yang
   menempel di halaman detail listing adalah galerinya (`.mk-detail-atas`), dan
   di sana rapat itu memang disengaja. Margin di `.mk-topbar` akan mendorong
   galeri itu juga.

   Ini menggantikan tambalan inline `margin-top:8px` di bantuan.blade.php —
   satu tempat memperbaiki tiga halaman sekaligus. */
.mk-topbar + .mk-section { padding-top: var(--mk-gap); }

/* "Detail akun" + "Spesifikasi akun" adalah `<section>` polos anak langsung
   `.mk-detail-atas` (lihat §23) — mereka SENGAJA tidak berkelas `.mk-section`,
   jadi paddingnya harus diberikan di sini. Tanpa ini keduanya rata dengan tepi
   layar di ponsel sementara judul di atasnya masuk 14px; terukur x=0 vs x=14.
   Di ≥1024px padding sisi ini dinolkan lagi karena `.mk-detail-atas` sendiri
   yang memberi jarak tepinya. */
.mk-detail-atas > section { padding: 0 var(--mk-pad-page); }

.mk-breadcrumb a { color: var(--mk-text-muted); text-decoration: none; }
.mk-breadcrumb a:hover { color: var(--mk-text); }
.mk-breadcrumb strong { color: var(--mk-text); font-weight: 400; }

.mk-actionbar {
  /* Bilah nav bawah juga menempel ke dasar viewport — bar aksi harus duduk
     di ATASNYA, bukan di titik yang sama. */
  position: sticky; bottom: var(--mk-nav-h); z-index: 20;
  display: flex; gap: 9px; padding: 10px 12px;
  border-top: var(--mk-border-quiet);
  background: linear-gradient(180deg, #212434, #181a27);
  box-shadow: var(--mk-lift-neutral), 0 -6px 18px rgba(6, 7, 14, .5);
}
.mk-actionbar__harga { min-width: 0; flex: 1; }
.mk-actionbar__label { font: 10px var(--mk-font); letter-spacing: .06em; color: var(--mk-text-faint); }
.mk-actionbar__now {
  font: 600 17px/1.15 var(--mk-font); letter-spacing: -.02em; color: var(--mk-accent-text);
}
.mk-actionbar .mk-btn { padding: 0 14px; font-size: 13px; }

.mk-paginasi { display: flex; justify-content: center; gap: 6px; padding: 0 var(--mk-pad-page) var(--mk-gap-section); }
.mk-paginasi a, .mk-paginasi span {
  min-width: 40px; min-height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--mk-r-chip); border: var(--mk-border-control);
  background: var(--mk-surface-control); color: var(--mk-text);
  font: 500 12px var(--mk-font); text-decoration: none;
}
.mk-paginasi .is-aktif {
  border: 1px solid var(--mk-accent-border); background: var(--mk-accent-fill);
  color: var(--mk-on-accent); font-weight: 600;
}

.mk-sort {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 12px;
  border-radius: var(--mk-r-chip); border: var(--mk-border-control);
  background: var(--mk-surface-control); box-shadow: var(--mk-lift);
  font: 500 11.5px var(--mk-font); color: var(--mk-text); text-decoration: none;
}

/* ══════════════════════════════════════════════════════════════════
   21. mk-nav-bawah — Beranda · Produk · RekBer · Rental · Bantuan
   ══════════════════════════════════════════════════════════════════ */

.mk-nav-bawah {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1200;
  display: grid; grid-template-columns: repeat(5, 1fr);
  border-top: var(--mk-border-quiet);
  background: var(--mk-surface-nav);
  box-shadow: var(--mk-lift);
  padding-bottom: max(4px, env(safe-area-inset-bottom));
}
.mk-nav-bawah__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-height: 54px;
  color: var(--mk-text-muted); text-decoration: none;
  font: 500 9.5px var(--mk-font);
}
.mk-nav-bawah__item.is-aktif { color: var(--mk-accent); font-weight: 600; }
/* Sabuk pengaman: kalau tema induk memasang selektor `a` yang lebih kuat,
   dua kelas ini tetap menang. Jangan dihapus. */
.mk-nav-bawah .mk-nav-bawah__item { color: var(--mk-text-muted); }
.mk-nav-bawah .mk-nav-bawah__item.is-aktif { color: var(--mk-accent); }

/* RekBer diangkat di tengah */
.mk-nav-bawah__pusat { display: flex; justify-content: center; }

/* ⚠ AWALAN `.mk-page` WAJIB — jangan disederhanakan jadi `.mk-nav-bawah__pusat > a`.
   Jangkar tombol ini SENGAJA tanpa kelas (lihat _navbawah.blade.php), jadi ia
   ikut kena `.mk-page a:not([class])` di baris 156 — aturan untuk tautan polos,
   yang mewarnai teks `--mk-accent-text`. Spesifisitasnya 0,2,1 melawan 0,1,1
   milik `.mk-nav-bawah__pusat > a`, jadi tautan-polos MENANG dan tombolnya
   tampil teks oranye di atas latar oranye — nyaris tak terbaca, dan itulah
   satu-satunya item nav yang labelnya hilang. Dilaporkan pemilik 2 Agu 2026.

   Awalan `.mk-page` menyamakan spesifisitas ke 0,2,1; karena blok ini ada
   di bawah baris 156, ia yang menang dan warnanya kembali `--mk-on-accent`.
   Tabrakan gaya semacam ini sudah terjadi lima kali di proyek ini — kalau
   sebuah aturan cuma menyebut sebagian properti, yang lain diisi tema. */
.mk-page .mk-nav-bawah__pusat > a {
  width: 56px; height: 56px; margin-top: -15px;
  border-radius: var(--mk-r-panel);
  background: var(--mk-accent-fill); border: 1px solid var(--mk-accent-border);
  color: var(--mk-on-accent); text-decoration: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font: 600 9px var(--mk-font); letter-spacing: .03em;
  box-shadow: var(--mk-lift-filled), 0 0 0 5px var(--mk-bg), 0 4px 14px rgba(247, 148, 29, .35);
}
.mk-page .mk-nav-bawah__pusat > a:hover { background: var(--mk-accent-fill-hover); color: var(--mk-on-accent); }

/* ══════════════════════════════════════════════════════════════════
   22. Placeholder gambar — HAPUS setelah gambar sungguhan masuk
   ══════════════════════════════════════════════════════════════════ */

.mk-ph {
  background: repeating-linear-gradient(45deg, #232532 0 9px, #282a38 9px 18px);
  display: flex; align-items: center; justify-content: center;
}
.mk-ph span {
  font: 10.5px var(--mk-mono); color: var(--mk-text-muted);
  background: #15171f; padding: 2px 6px; border-radius: 4px;
}

/* ══════════════════════════════════════════════════════════════════
   23. Desktop — mobile-first; di atas 640px cukup dipusatkan & dilebarkan
   ══════════════════════════════════════════════════════════════════ */

@media (min-width: 640px) {
  .mk-page { max-width: 720px; margin: 0 auto; }
  .mk-grid { grid-template-columns: repeat(3, 1fr); }
  .mk-hero__copy h1 { font-size: 30px; }
  .mk-maskot { width: 160px; }
}

@media (min-width: 1024px) {
  .mk-page { max-width: 960px; padding-bottom: 24px; }
  .mk-grid { grid-template-columns: repeat(4, 1fr); }
  .mk-nav-bawah { display: none; }   /* nav bawah khusus ponsel */
  .mk-actionbar { position: static; bottom: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .mk-page * { transition: none !important; animation: none !important; }
}

/* ═════════════════════════════════════════════════════════════════
   24. Penyesuaian situs — SATU-SATUNYA bagian berkas ini yang boleh kamu ubah

   Halaman marketplace memakai bilah nav bawah yang menempati zona bawah layar.
   Elemen melayang bawaan tema (tombol CS/WA mengambang) bertindih dengan zona
   itu dan menutupi item nav.

   Hook-nya sudah ada di main.blade.php: @yield('body_class'). Pasang di view
   marketplace — TANPA menyentuh main.blade.php:

       @section('body_class', 'mk-body')

   Kalau tombol melayangnya memakai selektor lain, TAMBAHKAN selektornya ke
   daftar di bawah. Jangan ubah bagian lain berkas ini, dan jangan bikin berkas
   CSS baru untuk ini.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {
  body.mk-body [class*="float"],
  body.mk-body [id*="float"],
  body.mk-body [class*="mengambang"],
  body.mk-body [class*="whatsapp-btn"] {
    display: none !important;
  }
}
/* Di desktop nav bawah disembunyikan, jadi tombol melayang boleh kembali. */

/* — Footer bawaan situs —
   Footer situs bertema terang: bidang biru penuh, gelombang biru di atasnya,
   judul seksi merah. Di tujuh halaman marketplace yang gelap ia jadi dinding
   biru yang memutus halaman. Ditenangkan DI SINI, dengan dua sifat penting:
   markup footer tidak disentuh, dan halaman lain di situs tidak terpengaruh.

   ⚠ SEMUA aturan di bawah bergantung pada `body.mk-body` yang HANYA dipasang
   di halaman marketplace. Kalau `mk-body` menempel di layout bersama, aturan
   ini bocor ke halaman top up dan footer situs berubah di mana-mana. Sebelum
   menyalahkan CSS ini, pastikan dulu:

       document.body.className   → harus TIDAK memuat mk-body di /, /order,
                                    /pembelian, dan halaman top up lainnya

   Pasang lewat @section('body_class', 'mk-page mk-body') di view marketplace
   masing-masing — jangan di layout, jangan di partial yang di-include halaman
   lain, dan jangan sebagai nilai bawaan @yield.

   Selektornya sengaja tidak memakai pola samar `[class*="footer"]` (radius
   kerusakannya terlalu besar kalau scoping salah), tapi TETAP memakai
   kombinator keturunan — bukan `>`. Footer hampir selalu bersarang di dalam
   wrapper, dan `body.mk-body > footer` meleset total. Kalau footer temamu
   tidak memakai elemen `<footer>`, TAMBAHKAN selektor spesifiknya di sini.

   ⚠ `:not(.mk-footer)` DI SETIAP SELEKTOR — jangan dihapus. Sejak 2 Agu 2026
   halaman mk memakai footernya sendiri (`akun/_footer.blade.php`), dirakit
   dari komponen mk yang sah. Aturan di bawah dibuat untuk MENJINAKKAN footer
   warisan: ia meratakan latar SETIAP keturunan footer dengan `!important` dan
   menyembunyikan setiap `<svg>` di dalamnya. Dikenakan ke footer mk, hasilnya
   komponen tanpa permukaan, ikon sosial hilang, dan plat terang di lencana
   pembayaran ikut dihapus — persis kembali ke logo bank gelap tak terbaca
   yang jadi alasan footer ini diringkas. Dikunci `FooterMkTest`.

   Catatan buat yang membaca aturan `footer svg { display:none }` di bawah dan
   mengira ia berfungsi: di footer warisan ia TIDAK pernah menang. Kelima ikon
   sosialnya membawa `style="… display: inline !important"` inline, dan inline
   `!important` mengalahkan `!important` dari stylesheet. */

body.mk-body footer:not(.mk-footer),
body.mk-body .footer,
body.mk-body .site-footer {
  background: #12141f !important;
  background-image: none !important;
  color: var(--mk-text-muted) !important;
  border-top: var(--mk-border-quiet);
}

/* Bidang biru dan gelombangnya sering dipasang di elemen pembungkus di DALAM
   footer, bukan di footer-nya sendiri — jadi latarnya dinetralkan sampai ke
   dalam. Dibatasi ke dalam footer, tidak menyentuh apa pun di luarnya. */
body.mk-body footer:not(.mk-footer) *,
body.mk-body .footer *,
body.mk-body .site-footer * {
  background-color: transparent !important;
  background-image: none !important;
}

/* Gelombang dekoratif biru di tepi atas footer — tidak ada padanannya di
   sistem ini, dan bentuknya menabrak bilah nav.

   ⚠ Di tema ini gelombangnya BUKAN di dalam <footer>: jalurnya `main > svg.wave`,
   dibuka di footer.blade.php:31 sementara <footer> baru dibuka di :46. Aturan
   apa pun yang menuntut leluhur footer tidak akan pernah mengenainya, sekuat
   apa pun kombinatornya — karena itu ia disebut terpisah di sini. Tetap diikat
   body.mk-body, jadi halaman warisan tidak tersentuh. */
body.mk-body footer:not(.mk-footer) svg,
body.mk-body .footer svg,
body.mk-body .site-footer svg { display: none !important; }
body.mk-body svg.wave { display: none !important; }

body.mk-body footer:not(.mk-footer) h1,
body.mk-body footer:not(.mk-footer) h2,
body.mk-body footer:not(.mk-footer) h3,
body.mk-body footer:not(.mk-footer) h4,
body.mk-body footer:not(.mk-footer) h5,
body.mk-body footer:not(.mk-footer) h6,
body.mk-body footer:not(.mk-footer) strong,
body.mk-body footer:not(.mk-footer) b {
  color: var(--mk-text) !important;
  font-weight: 500 !important;
}

/* Judul seksi footer aslinya merah — dipindahkan ke bentuk kicker sistem ini. */
body.mk-body footer:not(.mk-footer) [class*="title"],
body.mk-body footer:not(.mk-footer) [class*="judul"],
body.mk-body footer:not(.mk-footer) [class*="heading"] {
  color: var(--mk-text-faint) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}
body.mk-body footer:not(.mk-footer) a { color: var(--mk-text-muted) !important; text-decoration: none; }
body.mk-body footer:not(.mk-footer) a:hover { color: var(--mk-accent-text) !important; }
body.mk-body footer:not(.mk-footer) p,
body.mk-body footer:not(.mk-footer) li,
body.mk-body footer:not(.mk-footer) span,
body.mk-body footer:not(.mk-footer) small { color: var(--mk-text-muted) !important; }
body.mk-body footer:not(.mk-footer) hr { border-color: rgba(233, 233, 237, .12) !important; }

/* Lencana pembayaran dicetak di kotak putih — dibuat menyatu, tanpa mengubah
   berkas gambarnya. Ini pengecualian dari reset latar di atas. */
body.mk-body footer:not(.mk-footer) img {
  border-radius: var(--mk-r-badge);
  background-color: #252838 !important;
  border-color: rgba(233, 233, 237, .14) !important;
  opacity: .85;
}
body.mk-body footer:not(.mk-footer) img:hover { opacity: 1; }

/* <marquee> lencana pembayaran menumpuk vertikal di kolom 375px. Perilaku
   footer bawaan, sudah begitu sebelum redesign — tapi di halaman marketplace
   ia jadi footer kita, jadi dirapikan di sini tanpa menyentuh markup. */
body.mk-body footer:not(.mk-footer) marquee {
  display: block; white-space: nowrap;
}
body.mk-body footer:not(.mk-footer) marquee img {
  display: inline-block; vertical-align: middle; margin: 0 5px;
}

/* — Room rekber tiga pihak (/rekber/lacak/{kode}) — */
.mk-room { display: grid; gap: var(--mk-gap-tight); }

.mk-room__pesan {
  border-radius: var(--mk-r-card); border: var(--mk-border-quiet);
  background: var(--mk-surface-quiet); box-shadow: var(--mk-lift);
  padding: 10px 11px;
}
.mk-room__meta {
  display: flex; align-items: center; justify-content: space-between; gap: var(--mk-gap);
  font: 600 9.5px var(--mk-font); letter-spacing: .1em; text-transform: uppercase;
  color: var(--mk-text-faint); margin-bottom: 5px;
}
.mk-room__waktu { font: 400 10px var(--mk-mono); letter-spacing: 0; text-transform: none; }
.mk-room__isi { font: 12.5px/1.5 var(--mk-font); color: var(--mk-text); }

/* Peran menandai pesan dengan garis tepi, bukan gelembung kiri-kanan:
   tiga pihak tidak bisa diwakili dua sisi. */
.mk-room__pesan--admin   { border-left: 2px solid var(--mk-accent); }
.mk-room__pesan--admin   .mk-room__meta { color: var(--mk-accent-text); }
.mk-room__pesan--pembeli { border-left: 2px solid var(--mk-neutral-400, #b2b6ca); }
.mk-room__pesan--penjual { border-left: 2px solid #2ee06f; }
.mk-room__pesan--penjual .mk-room__meta { color: var(--mk-wa-text); }
.mk-room__pesan--sistem {
  background: none; border: 1px dashed rgba(233, 233, 237, .16); box-shadow: none;
}
.mk-room__pesan--sistem .mk-room__isi { color: var(--mk-text-muted); font-size: 11.5px; }

/* — Halaman detail listing: galeri, jarak judul, dua kolom desktop (29 Jul 2026) —

   Temuan pemilik dari halaman hidup: foto memakan hampir seluruh layar pertama
   di ponsel DAN di desktop, dan judulnya menempel ke tepi bawah foto.

   Semua selektor di bawah sengaja MAJEMUK (`.mk-galeri img`, `.mk-galeri +
   .mk-section`) atau di dalam @media. Bentuk sekelas polos akan terbaca
   SelektorDasarMkTest sebagai aturan kelas dan bisa menabrak aturan dasar
   `.mk-page <tag>` — lihat komentar di berkas tes itu. */

/* 4:5 — RASIO UNGGAHAN PEMILIK (1080×1350). Foto listing dibuat sekali lalu
   dipakai dua tempat: halaman ini dan Instagram, jadi situs harus menampilkannya
   UTUH, bukan memotongnya ke rasio lain.

   ⚠ Jangan kembalikan ke 16:10 "supaya judul cepat terlihat". Itu alasan versi
   sebelumnya, dan harganya terlalu mahal: 16:10 membuang **50%** tiap foto
   1080×1350, dan yang terbuang justru bagian yang dijual — judul promo di tepi
   atas dan daftar skin di tepi bawah. Diukur di peramban 2 Agu 2026 pada
   listing 19747. Placeholder ikut selektor yang sama supaya rasionya tidak
   bercabang dua. Dikunci `AkunDetailKayaTest`. */
.mk-galeri img,
.mk-galeri > .mk-ph {
  aspect-ratio: 4 / 5;
}

/* Jarak judul ke galeri, dua keadaan: satu foto (galeri langsung diikuti
   section judul) dan banyak foto (ada baris thumbnail di antaranya, yang
   sudah membawa padding sendiri — jadi jaraknya lebih kecil). */
.mk-galeri + .mk-section { padding-top: 14px; }
.mk-galeri__thumbs + .mk-section { padding-top: 6px; }

/* — Metode pembayaran: panah dropdown & keterbacaan daftarnya —

   `.mk-select` memakai `appearance: none` (:638) tapi tidak menggambar panah
   penggantinya. Akibatnya kotak "Metode pembayaran" terlihat PERSIS sama dengan
   kotak teks "Nomor WhatsApp" di atasnya — tidak ada satu pun tanda bahwa ia
   bisa dibuka. Panahnya digambar sebagai background SVG inline (tanpa berkas
   tambahan, jadi tidak ada risiko cache-busting terlewat), dan padding kanan
   diberi ruang supaya teks panjang tidak menabraknya.

   `<option>` mewarisi warna teks terang dari `.mk-select` tanpa punya latar
   sendiri, jadi keterbacaan daftarnya menumpang tema popup sistem operasi
   pembaca — di tema terang hasilnya teks terang di atas putih. Latarnya
   ditetapkan di sini supaya daftarnya terbaca di mana pun.

   Catatan jujur: di emulasi perangkat DevTools, popup <select> digambar sistem
   operasi dan TIDAK ikut diskalakan bersama halaman, jadi daftarnya terlihat
   kecil di sana. Itu artefak alat, bukan sesuatu yang bisa diperbaiki CSS. */
.mk-select {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='none' stroke='%23b2b6ca' stroke-width='22' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M48 96l80 80 80-80'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #12141f, #191b27);
  background-repeat: no-repeat, repeat;
  background-position: right 12px center, 0 0;
  background-size: 12px 12px, auto;
  padding-right: 34px;
}
/* Daftar opsi dibuat lebih besar dari kotak tertutupnya (13,5px), bukan sama.

   Kotak tertutup dibaca sekali dan berdampingan dengan label yang menjelaskan;
   daftar yang terbuka dibaca sambil MEMILIH, sering sambil berjalan, dan
   isinya singkatan yang mirip satu sama lain — "BRI VA", "BNI VA", "BCA VA"
   beda satu huruf. Pemilik melaporkan daftarnya "kecil banget ga keliatan"
   (3 Agu 2026).

   ⚠ BATAS YANG HARUS DIKETAHUI SEBELUM MENAMBAH ATURAN DI SINI. Popup <select>
   digambar SISTEM OPERASI, bukan halaman. Chrome di macOS/Windows/Android
   menghormati `font-size` pada `option`; iOS Safari TIDAK — ia memakai roda
   pemilih sistem yang ukurannya memang sudah besar. Dan di emulasi perangkat
   DevTools popupnya tidak ikut diskalakan bersama halaman, jadi di sana ia
   akan tetap terlihat kecil berapa pun angkanya. Kalau daftarnya masih terasa
   kecil DI PONSEL SUNGGUHAN, satu-satunya jalan adalah mengganti <select> ini
   dengan daftar sendiri — bukan menaikkan angka di sini lagi. */
.mk-select option {
  background-color: #191b27;
  color: #e9e9ed;
  font-size: 15px;
  padding: 8px 10px;
}

/* — Judul topbar: mengembalikan 13px yang diminta paketnya sendiri —

   Aturan dasar `.mk-page h1 { font-size: 22px }` (0,1,1) mengalahkan
   `.mk-topbar__judul { font: 500 13px … }` (0,1,0), jadi judul di bar dirender
   22px di /akun/bantuan, /rekber/ajukan, dan /rekber/lacak/{kode} — bukan
   ukuran yang paketnya sendiri tulis, dan di layar sempit sampai terpotong.

   Akarnya milik paket: `.mk-page h1` tidak pernah dapat `:not([class])` seperti
   yang sudah didapat p/ul/ol/li di v22 — dan v22 adalah rilis terakhir, karena
   proyek berhenti memakai paket desain (putusan pemilik 29 Jul 2026).

   Aturan di bawah karena itu PERMANEN, bukan jembatan sementara. JANGAN
   dibuang menunggu perbaikan hulu; tidak ada hulu lagi. Bentuk
   `.mk-page .mk-topbar__judul` (0,2,0) menang tanpa !important. */
.mk-page .mk-topbar__judul { font: 500 13px/1.2 var(--mk-font); }

/* — Baris varian harga di form pembelian (/akun/{id}-{slug}) —

   `.mk-opt` lahir sebagai KOTAK pilihan dalam grid tiga kolom (`.mk-pilih`,
   penanggung biaya rekber): isinya dipusatkan, tingginya 42px. Dipakai ulang
   sebagai BARIS harga selebar form, hasilnya nama layanan dan harga sama-sama
   terdorong ke tengah.

   ⚠ LINGKUPNYA ANAK LANGSUNG, dan itu bukan gaya penulisan. Di /rekber/ajukan
   susunannya `.mk-field > .mk-pilih > .mk-opt`; bentuk keturunan
   (`.mk-field .mk-opt`) akan ikut mengenai grid wizard itu dan merusaknya
   tanpa satu pun galat. Dikunci RekberWizardTest. */
/* ⚠ `display`, `font`, `margin-bottom`, dan `color` di bawah BUKAN hiasan —
   keempatnya MEREBUT KEMBALI properti yang dirampas `.mk-field > label` (:623).
   `.mk-opt` adalah <label> anak langsung `.mk-field`, jadi `.mk-field > label`
   (0,1,1) mengalahkan `.mk-opt` (0,1,0) dan `display: flex` milik `.mk-opt`
   TIDAK PERNAH berlaku: barisnya dirender `block`, `.mk-opt__harga` jadi elemen
   blok selebar penuh, dan harganya jatuh ke baris sendiri di bawah nama layanan.

   Gejalanya sunyi: `getComputedStyle` tetap melaporkan `justify-content` walau
   elemennya `display:block`, jadi pengukuran yang tidak ikut memeriksa
   `display` akan mengira barisnya sudah benar. Dikunci
   AkunDetailKayaTest::test_baris_varian_merebut_kembali_properti_dari_aturan_label. */
.mk-field > .mk-opt {
  display: flex; align-items: center;
  justify-content: flex-start; gap: 10px;
  min-height: 48px; padding: 9px 12px; text-align: left;
  font: 500 12px var(--mk-font); letter-spacing: 0;
  color: var(--mk-text); margin-bottom: 0;
}
.mk-field > .mk-opt + .mk-opt { margin-top: 6px; }

/* Harga didorong ke kanan sebagai satu blok, coret di ATAS nilai yang dibayar
   — bukan di sampingnya, supaya nama layanan panjang boleh membungkus tanpa
   mendorong angkanya keluar baris. */
.mk-opt__harga {
  margin-left: auto;
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 1px; line-height: 1.2;
}
.mk-opt__nilai { font: 600 14px var(--mk-font); color: var(--mk-text-value); }

/* Aksi kolom kanan: milik desktop saja. Di ponsel `.mk-actionbar` yang
   bertugas, dan dua kontrol ke tempat yang sama melanggar README §8.2. */
.mk-detail-beli { display: none; }

@media (min-width: 1024px) {
  /* Dua kolom: foto kiri, judul + harga + chip + aksi kanan. Urutan DOM tidak
     berubah sama sekali — yang berubah cuma penempatannya. */
  /* Napas di bawah bar atas — HANYA di sini, bukan di ponsel.
     `.mk-topbar + .mk-section` (§20) tidak mengenai halaman detail: yang
     menyusul bar di sini `.mk-detail-atas`. Di ponsel itu benar, galerinya
     memang penuh-tepi dan menempel ke bar. Begitu jadi dua kolom, judul di
     kanan ikut rata dengan garis bar — 0px, dilaporkan pemilik 3 Agu 2026.

     Dipasang di pembungkusnya supaya KEDUA kolom turun bersamaan. Kalau
     hanya kolom kanan yang diberi padding, judulnya turun sementara fotonya
     tetap di atas dan keduanya berhenti sejajar. */
  .mk-detail-atas {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    padding: var(--mk-gap-section) var(--mk-pad-page) 0;
  }

  /* Halaman katalog lewat jalur lain (§20 memberinya 10px). Cukup di ponsel,
     terlalu rapat di layar lebar — dan dua halaman /akun yang berdampingan
     tidak boleh punya jarak bar yang berbeda. */
  .mk-topbar + .mk-section { padding-top: var(--mk-gap-section); }
  .mk-detail-atas > .mk-galeri {
    grid-column: 1; grid-row: 1;
    border-radius: var(--mk-r-card); overflow: hidden;
  }
  .mk-detail-atas > .mk-galeri__thumbs {
    grid-column: 1; grid-row: 2;
    padding-left: 0; padding-right: 0;
  }
  /* Kolom kanan: baris 1 saja. Dulu `1 / span 2` supaya judul sejajar dengan
     tepi atas foto — sekarang tidak perlu lagi, karena isi panjangnya sudah
     keluar dari kolom (lihat aturan berikutnya) dan baris 2 milik thumbnail. */
  .mk-detail-atas > .mk-section {
    grid-column: 2; grid-row: 1;
    padding-left: 0; padding-right: 0; padding-top: 0;
  }

  /* "Detail akun" + "Spesifikasi akun" — SELEBAR PENUH di bawah kedua kolom.

     Tinggi kolom ditentukan isinya, dan panjang deskripsi diketik pemilik.
     Selama kedua blok itu di dalam kolom, arah timpangnya berubah-ubah:
       deskripsi pendek  → kanan lebih pendek dari foto (2 Agu: 329px kosong di kanan)
       deskripsi panjang → kanan lebih panjang dari foto (3 Agu: 269px kosong di kiri,
                            listing 10117, dilaporkan pemilik)
     Menambal satu arah selalu membuka arah satunya — jadi isinya yang keluar,
     bukan jaraknya yang ditambal.

     Yang tersisa di kolom kanan cuma isi yang panjangnya nyaris tetap: judul,
     harga, tombol, kartu konsultan. Selisih tingginya jadi terbatas dan tidak
     lagi bergantung pada teks yang diketik.

     Selektor `> section` sengaja polos — kedua blok itu memang anak `<section>`
     langsung tanpa kelas. Kalau kelak diberi kelas, PERBARUI selektor ini. */
  .mk-detail-atas > section {
    grid-column: 1 / -1;
    margin-top: 0;
    /* `.mk-detail-atas` sudah memberi jarak tepi di sini — tanpa penolan ini
       paddingnya bertumpuk jadi 28px dan blok penuh masuk lebih dalam
       daripada foto di atasnya. */
    padding-left: 0; padding-right: 0;
  }
  .mk-detail-atas > section + section { margin-top: var(--mk-gap-section); }
  .mk-detail-beli { display: flex; gap: 9px; margin-top: 14px; }
  .mk-detail-beli .mk-btn { flex: 1; }

  /* Bar aksi bawah digantikan kolom kanan. Tanpa ini halaman punya DUA baris
     harga+tombol yang menuju tempat yang sama. */
  .mk-actionbar { display: none; }
}