/* =====================================================================
   LAPTOP PURWOKERTO, tema publik "mkomputer"
   Palet dan tipografi disamakan dengan service.laptoppurwokerto.com:
            Biru Brand   #0B63C4 (utama)
            Biru Dalam   #0B2B57 (judul, panel gelap, hover)
            Langit       #F5FAFF (kartu)
            Teal         #0EA88A (aksen)
            Tinta        #1E2733 (teks)
            Abu Baja     #5B6B7D (teks sekunder)
            Garis Langit #DCE8F7 (garis)
            Merah Tawakal #B4573E (aksen sekunder)
   Type:    Poppins (display, 700)
            Nunito Sans (body & UI)

   Nama variabel lama (--pasir, --kabah, --emas, --kurma, --wudhu) dipertahankan
   supaya override tema dari Settings tetap bekerja; nilainya mengikuti palet di atas.
   Signature: sinar Quạh, 8 sinar emas di atas Kubah hitam (logo),
            dan daftar "pintu Ka'bah" berurutan di hero.
   ===================================================================== */

:root {
  --pasir: #ffffff;
  --kabah: #0b63c4;
  --kabah-tua: #0b2b57;
  --emas: #0ea88a;
  --emas-tua: #07705c;
  --kurma: #1e2733;
  --kurma-muda: #5b6b7d;
  --wudhu: #f5faff;
  --tawakal: #b4573e;
  --garis: #dce8f7;
  --pub-display: "Poppins", system-ui, sans-serif;
  --pub-body: "Nunito Sans", system-ui, sans-serif;
}

/* Halaman publik tidak memuat app.css, jadi reset-nya ditulis di sini.
   Tanpa border-box, elemen berlebar 100% + padding (input, tombol) meluber
   dari kontainernya, dan ukuran eksplisit seperti chip avatar jadi melar. */
*, *::before, *::after { box-sizing: border-box; }

body.pub {
  margin: 0;
  background: var(--pasir);
  color: var(--kurma);
  font-family: var(--pub-body);
  line-height: 1.6;
  font-size: 16px;
}
.pub a { color: var(--kabah); text-decoration: none; }
/* Link di dalam teks bacaan tetap bergaris bawah agar terbaca sebagai tautan. */
.post-body a, .lp-text a { text-decoration: underline; }

/* ---------- Topbar publik ---------- */
.pub-top {
  border-bottom: 1px solid var(--garis);
  background: color-mix(in srgb, var(--pasir) 88%, white);
  position: sticky;
  top: 0;
  z-index: 20;
}
.pub-top-in {
  max-width: 1080px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.pub-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--pub-display);
  font-size: 19px;
  color: var(--kurma);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.pub-logo strong { color: var(--kabah); font-weight: 700; }
.pub-logo .qah { width: 34px; height: 34px; flex-shrink: 0; }
/* Logo gambar milik admin menggantikan motif sinar Qah + tagline teks (lockup
   sudah memuat wordmark); tinggi sama supaya header tidak meloncat saat
   logo dipasang/dilepas. */
.pub-logo .pub-logo-img { width: auto; max-width: 230px; height: 34px; object-fit: contain; flex-shrink: 0; border-radius: 6px; }
.pub-logo:has(.pub-logo-img) span { display: none; }
.qah-rays path {
  stroke: var(--emas);
  stroke-width: 2.4;
  stroke-linecap: round;
}
.qah circle {
  fill: var(--kabah);
  stroke: var(--emas);
  stroke-width: 2;
}
/* Nav desktop berdampingan dengan logo; di layar sempit ia jadi panel yang
   dibuka tombol "Menu" (lihat @media max-width:860px). */
.pub-top-in { position: relative; }
.pub-top-actions { display: flex; align-items: center; gap: 10px; }
.pub-nav { display: flex; align-items: center; gap: 18px; }
.pub-top nav a { color: var(--kurma-muda); text-decoration: none; font-size: 15px; font-weight: 500; }
.pub-top nav a:hover { color: var(--kabah); }
.pub-nav-out { display: inline; margin: 0; }
/* Hanya relevan di panel HP (lihat media query 860px). Selektor sengaja lebih
   kuat dari body.pub .btn (display:inline-flex, spesifisitas 0,2,1): tanpa ini
   tombol panel bocor ke header desktop sebagai "Daftar Gratis" kedua. */
body.pub .pub-nav .pub-nav-dash, body.pub .pub-nav .pub-nav-reg { display: none; }
.pub-avatar {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.24); font: 700 11.5px var(--pub-body); overflow: hidden; flex-shrink: 0;
}
/* Foto profil di chip header: tanpa ini <img> tampil seukuran aslinya
   (ratusan piksel) dan mendorong header. */
.pub-avatar img, .pub-avatar .avatar-photo { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.pub-dash-short { display: none; }
.pub-menu-btn {
  display: none; align-items: center; gap: 7px;
  min-height: 44px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--garis); background: var(--wudhu); color: var(--kurma);
  font: 600 14px var(--pub-body); cursor: pointer;
}
.pub-menu-btn:hover { border-color: color-mix(in srgb, var(--kabah) 45%, var(--garis)); }

/* Panel menu publik: paling lambat di 860px karena nav mulai berdesakan. */
@media (max-width: 860px) {
  .pub-top-in { padding: 10px 14px; gap: 10px; flex-wrap: wrap; }
  /* Logo tetap satu-satunya jalan pulang ke beranda: beri tinggi 44px supaya
     area ketuknya nyaman (R-03), bukan sekadar setinggi tulisannya. */
  .pub-logo { font-size: 17px; gap: 9px; min-height: 44px; }
  .pub-logo .qah { width: 30px; height: 30px; }
  .pub-logo .pub-logo-img { width: auto; max-width: 190px; height: 30px; }
  .pub-top-actions { margin-left: auto; gap: 8px; }
  .pub-menu-btn { display: inline-flex; }
  /* Header tetap satu baris: CTA jadi chip avatar saja, label ke panel Menu. */
  .pub-dash-label { display: none; }
  .pub-dash-short { display: inline; }
  .pub-top-dash { padding: 0 16px; }
  /* Spesifisitas lebih tinggi dari body.pub .btn.small supaya chip benar-benar
     jadi lingkaran 44px (padding dari aturan .btn tidak boleh menambah lebar). */
  body.pub .pub-top-dash:has(.pub-avatar) { padding: 0; width: 44px; height: 44px; }
  .pub-nav {
    display: none; width: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    margin-top: 4px; padding-top: 6px;
    border-top: 1px solid var(--garis);
  }
  .pub-nav.is-open { display: flex; }
  .pub-top .pub-nav a {
    display: flex; align-items: center; min-height: 48px;
    font-size: 16px; font-weight: 600;
    border-bottom: 1px dashed var(--garis);
  }
  /* Tombol panel HP dimunculkan lagi di sini (aturan sembunyi desktop di atas
     lebih kuat dari .pub-top .pub-nav a, jadi perlu penegasan eksplisit). */
  .pub-top .pub-nav a.pub-nav-dash, .pub-top .pub-nav a.pub-nav-reg { display: flex; }
  .pub-nav form { margin: 12px 0 6px; }
  .pub-nav .pub-nav-out .btn { min-height: 46px; }
  .pub-nav .btn { width: 100%; }
  .pub-nav a.btn { border-bottom: 0; justify-content: center; }
}
body.pub .btn.primary { background: var(--kabah); color: #ffffff; }
body.pub .btn.primary:hover { background: var(--kabah-tua); }
body.pub .btn { border-radius: 999px; }
body.pub .btn.wa { background: var(--kabah); color: #ffffff; border-radius: 999px; }
body.pub .btn.wa:hover { background: var(--kabah-tua); }

.pub-main { min-height: 60vh; }

/* ---------- HERO beranda: panel gradien biru brand ----------
   Gradien sengaja berhenti di --kabah-tua (#0B2B57) supaya seluruh teks putih
   di atasnya tetap lolos WCAG AA (putih di #0B63C4 sudah 5.8:1, di #0B2B57 14:1).
   Titik tergelap ditaruh di kanan bawah, tempat teks paling sedikit. */
.kabah-hero {
  background: linear-gradient(160deg, var(--kabah) 0%, var(--kabah-tua) 100%);
  color: #ffffff;
  padding: 64px 20px 56px;
}
.hero-in {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 44px;
  align-items: start;
}
.kabah-hero .eyebrow {
  font-size: 12.5px;
  font-weight: 800;
  /* Tracking 0.22em + huruf kapital pada label kecil adalah pola template;
     0.08em cukup menandai label tanpa terlihat seperti cap mesin. */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7cd9c4;
  margin: 0 0 14px;
}
.kabah-hero h1 {
  font-family: var(--pub-display);
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  font-weight: 700;
  margin: 0 0 16px;
  color: #ffffff;
}
.kabah-hero h1 em { font-style: normal; color: #d7f0e6; }
.kabah-hero .lede {
  font-size: 17px;
  line-height: 1.65;
  color: #eaf3ff;
  max-width: 46ch;
  margin: 0 0 26px;
}
.kabah-hero .hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
/* Di atas panel gelap, tombol utama jadi putih solid dan tombol kedua jadi
   garis tepi (pola yang sama dengan situs referensi).
   Selektor sengaja berawalan body.pub: tanpa itu aturan body.pub .btn.primary
   (0,3,1) menang, sehingga tombol utama menyatu dengan latar biru. */
body.pub .kabah-hero .btn {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.7);
  color: #ffffff;
}
body.pub .kabah-hero .btn:hover { background: rgba(255, 255, 255, 0.14); border-color: #ffffff; }
body.pub .kabah-hero .btn.primary {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--kabah-tua);
  font-weight: 700;
}
body.pub .kabah-hero .btn.primary:hover { background: #eaf3ff; border-color: #eaf3ff; color: var(--kabah-tua); }

.kabah-hero .hero-note {
  font-size: 13px;
  color: rgba(234, 243, 255, 0.88);
  max-width: 52ch;
  margin: 16px 0 0;
}

/* Sorotan jenis laptop: daftar kategori yang langsung membuka katalog terfilter.
   Kartu putih di atas panel gelap supaya teksnya tetap gelap di latar terang. */
.laptop-types {
  background: #ffffff;
  border-radius: 16px;
  padding: 24px 24px 10px;
  box-shadow: 0 18px 40px -24px rgba(11, 43, 87, 0.55);
}
.laptop-types h2 {
  font-family: var(--pub-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kabah);
  margin: 0 0 6px;
}
.laptop-types ul { list-style: none; margin: 0; padding: 0; }
.laptop-types li { border-bottom: 1px solid var(--garis); }
.laptop-types li:last-child { border-bottom: 0; }
.laptop-types a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 48px;
  padding: 12px 0;
  color: inherit;
  text-decoration: none;
}
.laptop-types a:hover strong { color: var(--kabah); }
.laptop-types strong { font-size: 15.5px; color: var(--kurma); }
.laptop-types span { color: var(--kurma-muda); font-size: 13px; }

/* ---------- Halaman katalog ---------- */
.pub-catalog { padding-top: 36px; }
.catalog-lead {
  color: var(--kurma-muda);
  font-size: 15.5px;
  line-height: 1.65;
  max-width: 58ch;
  margin: -6px 0 24px;
}
.catalog-empty {
  background: var(--wudhu);
  border: 1px solid var(--garis);
  border-radius: 14px;
  padding: 18px 20px;
  color: var(--kurma-muda);
  font-size: 14.5px;
}
.catalog-empty a { font-weight: 700; }

/* ---------- Filter katalog laptop ----------
   Lima pilihan + baris aksi. Desktop: satu baris grid. Layar sempit: dua kolom
   agar label tetap sejajar, dengan tombol selebar penuh di baris terakhir. */
.laptop-filter {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px 14px;
  align-items: end;
  margin: 0 0 24px;
}
.laptop-filter label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--kurma-muda);
}
.laptop-filter select { min-width: 0; }
.laptop-filter-aksi {
  grid-column: 1 / -1;
  display: flex;
  gap: 10px;
}
.laptop-filter-aksi .btn { flex: 1 1 0; }
@media (min-width: 861px) {
  .laptop-filter { grid-template-columns: repeat(5, minmax(0, 1fr)) auto auto; }
  .laptop-filter-aksi { grid-column: auto; flex: 0 0 auto; }
  .laptop-filter-aksi .btn { flex: 0 0 auto; }
}

/* ---------- Section dasar ---------- */
.pub-section { max-width: 1080px; margin: 0 auto; padding: 26px 20px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.section-head h2 {
  font-family: var(--pub-display);
  font-size: clamp(21px, 2.6vw, 25px);
  font-weight: 600;
  margin: 0;
}
.section-head .rail {
  flex: 1;
  height: 1px;
  background: var(--garis);
  min-width: 40px;
}
.section-head a.ke-laman { font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }

/* ---------- Kartu produk ---------- */
.produk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.produk-card {
  background: var(--wudhu);
  border: 1px solid var(--garis);
  border-radius: 16px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.produk-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(11, 43, 87, 0.08); }
.produk-jenis {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
}
.produk-jenis.digital { background: color-mix(in srgb, var(--kabah) 12%, white); color: var(--kabah); }
.produk-jenis.physical { background: color-mix(in srgb, var(--emas) 20%, white); color: var(--emas-tua); }
.produk-jenis.consultation { background: color-mix(in srgb, var(--tawakal) 12%, white); color: var(--tawakal); }
/* Sampul kartu produk: hanya dirender kalau admin mengunggah gambar mockup.
   aspect-ratio menjaga tinggi kartu tetap seragam walau rasio gambarnya beda. */
.produk-cover {
  display: block;
  margin: -22px -22px 6px;
  border-bottom: 1px solid var(--garis);
  overflow: hidden;
  border-radius: 16px 16px 0 0;
  background: var(--pasir);
}
/* height: auto wajib: atribut width/height di <img> menjadi petunjuk ukuran
   bawaan, jadi tanpa ini tinggi aslinya dipakai (kartu jadi 500px tinggi) dan
   aspect-ratio diabaikan. */
.produk-cover img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.produk-card h3 { font-family: var(--pub-display); font-size: 18px; font-weight: 600; margin: 4px 0 0; color: var(--kurma); }
.produk-card p { margin: 0; color: var(--kurma-muda); font-size: 14.5px; flex: 1; }

/* Kartu yang seluruh bidangnya bisa diklik: judul membentangkan tautan absolut
   menutupi kartu (pola stretched-link). Tombol di dalam kartu diberi position
   dan z-index supaya tetap bisa diklik sendiri, tidak tertelan tautan judul. */
.produk-card.is-link { position: relative; }
.produk-card.is-link .card-link { color: inherit; text-decoration: none; }
.produk-card.is-link .card-link::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.produk-card.is-link .card-aksi { position: relative; z-index: 1; }
.produk-harga { font-family: var(--pub-display); font-size: 17px; font-weight: 700; color: var(--kabah); }
.produk-harga small { font-family: var(--pub-body); font-weight: 500; color: var(--kurma-muda); font-size: 12px; margin-left: 6px; }

/* ---------- Detail produk ---------- */
.produk-detail { max-width: 860px; margin: 0 auto; padding: 48px 20px; }
.produk-detail .back { font-size: 14px; text-decoration: none; display: inline-block; margin-bottom: 20px; }
.produk-detail h1 { font-family: var(--pub-display); font-size: clamp(27px, 4.2vw, 34px); font-weight: 600; margin: 6px 0 10px; }
.produk-detail .desc { font-size: 16.5px; color: var(--kurma-muda); max-width: 58ch; }
/* Deskripsi produk kaya format (editor sama dengan artikel): blok jangan
   dibatasi 58ch; gaya heading/tabel/daftar mengikuti .post-body blog. */
.prod-desc { max-width: 70ch; color: var(--kurma); margin-top: 6px; }
.produk-buy {
  background: var(--wudhu);
  border: 1px solid var(--garis);
  border-radius: 18px;
  padding: 26px;
  margin-top: 30px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
}
.produk-buy .harga { font-family: var(--pub-display); font-size: 24px; font-weight: 700; color: var(--kabah); }
.produk-buy .harga small { display: block; font-family: var(--pub-body); font-size: 13px; font-weight: 500; color: var(--kurma-muda); }
/* CTA berdampingan ala mockup (Beli di kiri, Tanya di kanan); menyusut ke satu kolom di layar sempit. */
.produk-buy .aksi { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; min-width: 220px; }
@media (max-width: 560px) {
  .produk-buy .aksi { flex-direction: column; }
  .produk-buy .aksi .btn { width: 100%; }
}

/* ---------- Form tanya dulu (/p/:slug/tanya) ---------- */
.lead-form { display: grid; gap: 14px; max-width: 460px; margin-top: 22px; }
.lead-form label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.lead-form input,
.lead-form textarea {
  font: inherit;
  font-weight: 400;
  padding: 11px 14px;
  border: 1px solid var(--garis);
  border-radius: 12px;
  background: #fff;
  width: 100%;
}
.lead-form textarea { resize: vertical; }
.lead-form .btn { justify-content: center; display: inline-flex; align-items: center; gap: 8px; }
.lead-form [role="status"] { font-size: 14px; color: var(--kurma-muda); min-height: 1em; }
.btn .wa-icon { flex: none; }

/* ---------- Galeri gambar produk (mockup, opsional) ---------- */
.pd-galeri { margin: 22px 0 4px; }
.pd-stage {
  position: relative;
  border: 1px solid var(--garis);
  border-radius: 16px;
  overflow: hidden;
  background: var(--pasir);
  cursor: zoom-in;
}
.pd-stage img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.pd-count {
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
  background: rgba(11, 43, 87, 0.62);
  border-radius: 999px;
  padding: 3px 9px;
}
.pd-thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 10px 2px 4px; scrollbar-width: thin; }
.pd-thumb {
  flex: none;
  width: 84px;
  height: 84px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 12px;
  overflow: hidden;
  background: var(--pasir);
  cursor: pointer;
  opacity: 0.7;
}
.pd-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pd-thumb:hover { opacity: 1; }
.pd-thumb.is-active { border-color: var(--kabah); opacity: 1; }
.pd-light {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(12, 20, 18, 0.88);
  display: grid;
  place-items: center;
  padding: 18px;
  cursor: zoom-out;
}
.pd-light[hidden] { display: none; }
.pd-light img { max-width: 100%; max-height: 88vh; border-radius: 12px; object-fit: contain; }
.pd-light-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  font-size: 26px;
  line-height: 1;
  color: #fff;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  cursor: pointer;
}

/* ---------- Landing page (smart LP) ---------- */
.lp-hero {
  background:
    radial-gradient(1200px 340px at 50% -60px, color-mix(in srgb, var(--emas) 16%, var(--pasir)), transparent 70%),
    var(--pasir);
  border-bottom: 1px solid var(--garis);
  text-align: center;
  padding: 84px 20px 64px;
}
.lp-hero h1 {
  font-family: var(--pub-display);
  font-size: clamp(31px, 4.6vw, 40px);
  font-weight: 600;
  line-height: 1.12;
  margin: 0 auto 14px;
  max-width: 22ch;
}
.lp-hero p { color: var(--kurma-muda); font-size: 17px; max-width: 52ch; margin: 0 auto 26px; }
.lp-text {
  max-width: 720px;
  margin: 0 auto;
  padding: 34px 20px;
  white-space: pre-wrap;
  font-size: 16.5px;
  color: var(--kurma);
}
.lp-card {
  background: var(--wudhu);
  border: 1px solid var(--garis);
  border-radius: 18px;
  max-width: 560px;
  margin: 0 auto 34px;
  padding: 28px;
}
.lp-card h3 { font-family: var(--pub-display); font-size: 19px; font-weight: 600; margin: 0 0 14px; text-align: center; }
.lp-card.cta { text-align: center; }
.lp-card.cta .sub { color: var(--kurma-muda); margin: 0 0 18px; }
.lp-label { display: block; font-size: 13px; font-weight: 600; color: var(--kurma-muda); margin: 14px 0 5px; }
body.pub input, body.pub select, body.pub textarea {
  width: 100%;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--garis);
  background: white;
  color: var(--kurma);
  font-size: 15px;
  font-family: var(--pub-body);
}
body.pub input:focus, body.pub select:focus, body.pub textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--kabah) 35%, white);
  border-color: var(--kabah);
}

/* ---------- Checkout (gaya Sejoli: form di kiri, ringkasan pesanan di kanan) ---------- */
/* Tombol dasar tema publik: app.css tidak dimuat di halaman publik, jadi
   tombol perlu gaya sendiri agar pill-nya tidak gepeng. */
body.pub .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid var(--garis);
  background: var(--wudhu);
  color: var(--kurma);
  font: 600 14.5px/1.35 var(--pub-body);
  text-decoration: none;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
body.pub .btn:hover { border-color: color-mix(in srgb, var(--kabah) 45%, var(--garis)); text-decoration: none; }
body.pub .btn:active { transform: translateY(1px); }
body.pub .btn.small { padding: 8px 16px; font-size: 13.5px; }
body.pub .btn.block { display: flex; width: 100%; }

/* Tombol Google & pemisah "atau": app.css tidak dimuat di halaman publik,
   jadi gaya tema pandu perlu ditulis ulang di sini. */
body.pub .google-btn { background: #fff; border-color: var(--garis); font-weight: 600; }
body.pub .google-btn:hover { background: color-mix(in srgb, var(--emas) 13%, #fff); border-color: var(--emas-tua); }
body.pub .google-btn svg { flex: 0 0 auto; }
.co-google { margin-bottom: 18px; }
body.pub .divider-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 0;
  color: var(--kurma-muda);
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
body.pub .divider-or::before,
body.pub .divider-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--garis);
}

/* ---------- Checkout: hero gelap + ringkasan sticky ---------- */
.co-hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(130% 150% at 86% 0%, #3b93e8 0%, var(--kabah) 45%, var(--kabah-tua) 100%);
  color: #f5f0e3;
}
/* Halaman fokus (checkout): tanpa header, jadi konten diberi napas lebih di atas */
.pub-bare .co-wrap { padding-top: 40px; }
.co-hero::before {
  content: "";
  position: absolute;
  inset: auto -10% -60% 45%;
  height: 320px;
  background: radial-gradient(closest-side, rgba(124, 217, 196, 0.30), transparent 70%);
  pointer-events: none;
}
.co-hero-in {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding: 34px 20px 38px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 26px;
  align-items: center;
}
.co-steps { list-style: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; padding: 0; }
.co-steps li { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: rgba(234, 243, 255, 0.8); }
.co-steps li + li::before { content: "\203A"; margin-right: 4px; font-size: 15px; opacity: 0.55; }
.co-steps li span {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 700 11.5px var(--pub-body);
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.co-steps li.on { color: #fff; }
.co-steps li.on span { background: var(--emas); border-color: var(--emas); color: #3d2f0a; }
.co-eyebrow {
  margin: 0 0 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #7cd9c4;
}
.co-hero h1 { font-family: var(--pub-display); font-size: clamp(23px, 3vw, 30px); font-weight: 600; line-height: 1.18; margin: 0 0 10px; }
.co-lead { margin: 0; max-width: 54ch; font-size: 14.5px; color: rgba(234, 243, 255, 0.88); }
.co-hero-side { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; text-align: right; }
.co-price-tag { font-family: var(--pub-display); font-size: clamp(24px, 3.2vw, 30px); font-weight: 700; line-height: 1; color: #fff; }
.co-price-tag small {
  display: block;
  margin-top: 7px;
  font-family: var(--pub-body);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7cd9c4;
}
.co-flash {
  max-width: 1040px;
  margin: 20px auto -4px;
  padding: 13px 18px;
  border-radius: 14px;
  background: #fdf1ec;
  border: 1px solid #eccbbf;
  color: #98442c;
  font-size: 14.5px;
}
.co-flash strong { font-weight: 700; }

.co-wrap { max-width: 1080px; margin: 0 auto; padding: 26px 20px 56px; }
.co-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.9fr);
  gap: 26px;
  align-items: start;
}
.co-form { display: flex; flex-direction: column; gap: 18px; }
.co-card {
  background: var(--wudhu);
  border: 1px solid var(--garis);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 16px 34px -30px rgba(11, 43, 87, 0.55);
}
.co-chead { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 18px; }
.co-num {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: linear-gradient(150deg, #3b93e8, var(--kabah-tua));
  color: #fff;
  display: grid;
  place-items: center;
  font: 700 14px var(--pub-body);
  flex: none;
  box-shadow: 0 8px 16px -10px rgba(11, 43, 87, 0.9);
}
.co-h { font-family: var(--pub-display); font-size: 17px; font-weight: 600; margin: 0; }
.co-hsub { margin: 3px 0 0; font-size: 13px; color: var(--kurma-muda); }
.co-fields { display: flex; flex-direction: column; gap: 15px; }
.co-field { display: block; }
.co-label { display: block; font-size: 13px; font-weight: 700; color: var(--kurma); margin: 0 0 6px; }
.co-label .co-opt { font-style: normal; font-weight: 500; font-size: 11.5px; color: var(--kurma-muda); }
.co-help { display: block; margin-top: 6px; font-size: 12px; color: var(--kurma-muda); }
body.pub .co-field input,
body.pub .co-field textarea {
  padding: 13px 15px;
  border-radius: 12px;
  border: 1.5px solid #dce8f7;
  background: #ffffff;
  font-size: 15px;
  transition: border-color 130ms ease, box-shadow 130ms ease, background 130ms ease;
}
body.pub .co-field input::placeholder,
body.pub .co-field textarea::placeholder {  color: #7c7466; /* 4.62:1 di atas putih; #a89f8f (2.62:1) gagal WCAG AA (R-25) */ }
body.pub .co-field input:hover,
body.pub .co-field textarea:hover { border-color: color-mix(in srgb, var(--kabah) 40%, #dce8f7); }
body.pub .co-field input:focus,
body.pub .co-field textarea:focus {
  outline: none;
  border-color: var(--kabah);
  background: #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--kabah) 14%, transparent);
}
.co-hint { margin: 0 0 16px; color: var(--kurma-muda); font-size: 14px; }
.co-note { margin: 10px 0 0; color: var(--kurma-muda); font-size: 12.5px; }
.co-paynote { margin-top: 14px; padding: 11px 14px; border-radius: 12px; background: #f5faff; }
.co-footnote { margin: 0; text-align: center; font-size: 12.5px; color: var(--kurma-muda); }
.co-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  background: #eaf3ff;
  border: 1px solid var(--garis);
  border-radius: 14px;
  padding: 5px;
  margin-bottom: 18px;
}
.co-tab {
  text-align: center;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--kurma-muda);
  text-decoration: none;
  transition: background 130ms ease, color 130ms ease;
}
.co-tab:hover { color: var(--kabah); }
.co-tab.active { background: #fff; color: var(--kabah); box-shadow: 0 6px 14px -10px rgba(11, 43, 87, 0.8); }
.co-panel[hidden] { display: none; }
.co-free {
  margin: 0;
  color: var(--kabah);
  background: color-mix(in srgb, var(--kabah) 8%, white);
  border-radius: 14px;
  padding: 15px 17px;
  font-size: 14.5px;
}

/* Metode pembayaran sebagai kartu radio */
.pay-opts { display: flex; flex-direction: column; gap: 10px; }
.pay-opt {
  position: relative;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border: 1.5px solid #dce8f7;
  border-radius: 16px;
  padding: 15px 16px;
  background: #ffffff;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}
.pay-opt:hover { border-color: color-mix(in srgb, var(--kabah) 45%, #dce8f7); background: #fff; }
.pay-opt:has(input:checked) {
  border-color: var(--kabah);
  background: linear-gradient(180deg, color-mix(in srgb, var(--kabah) 7%, #fff), color-mix(in srgb, var(--kabah) 3%, #fff));
  box-shadow: 0 14px 28px -24px rgba(11, 43, 87, 0.95);
}
/* radio asli disembunyikan: aturan global body.pub input melebarkan input */
body.pub .pay-opt input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; padding: 0; }
.pay-opt:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--kabah) 40%, white); outline-offset: 2px; }
.pay-ico {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #f2ebdd;
  color: var(--kabah);
  display: grid;
  place-items: center;
  flex: none;
  transition: background 140ms ease, color 140ms ease;
}
.pay-ico svg { width: 21px; height: 21px; }
.pay-opt:has(input:checked) .pay-ico { background: var(--kabah); color: #fff; }
.pay-body { flex: 1; min-width: 0; }
.pay-body strong { display: block; font-size: 15px; font-weight: 700; }
.pay-body em { display: block; margin-top: 3px; font-style: normal; color: var(--kurma-muda); font-size: 13px; }
.pay-tag {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--emas) 20%, #fff);
  color: var(--emas-tua);
}
.pay-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid #d9d0ba;
  flex: none;
  margin-top: 10px;
  display: grid;
  place-items: center;
  transition: background 140ms ease, border-color 140ms ease;
}
.pay-opt:has(input:checked) .pay-check { border-color: var(--kabah); background: var(--kabah); }
.pay-opt:has(input:checked) .pay-check::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; }

/* ---------- Ringkasan pesanan ---------- */
.co-side { position: sticky; top: 84px; }
.co-sum-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.co-sum-tag {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kabah);
  background: color-mix(in srgb, var(--kabah) 10%, #fff);
  border-radius: 999px;
  padding: 4px 10px;
}
.co-prod { display: flex; gap: 14px; align-items: center; padding-bottom: 16px; border-bottom: 1px dashed var(--garis); }
.co-thumb {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  flex: none;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(150deg, #3b93e8, var(--kabah-tua));
}
.co-thumb svg { width: 26px; height: 26px; }
/* Gambar diisi dengan position:absolute, bukan height:100%: tinggi baris grid
   bersifat auto (bergantung isi), jadi persentase pada gambar dianggap "auto",
   gambar memakai rasio aslinya, dan meluber keluar kotak 56px. */
.co-thumb-img { padding: 0; overflow: hidden; background: var(--pasir); position: relative; display: block; }
.co-thumb-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.co-thumb-physical { background: linear-gradient(150deg, #d9ac52, var(--emas-tua)); }
.co-thumb-consultation { background: linear-gradient(150deg, #c8764f, var(--tawakal)); }
.co-prod strong { display: block; font-size: 15px; font-weight: 700; line-height: 1.35; }
.co-prod-note { display: block; margin-top: 4px; font-size: 12px; color: var(--kurma-muda); }
.co-proof {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  padding: 9px 12px;
  border-radius: 12px;
  background: #f5faff;
  font-size: 12.5px;
  color: var(--kurma-muda);
}
.co-proof strong { color: var(--kabah); }
.co-proof-dots { display: inline-flex; }
.co-proof-dots i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin-left: -5px;
  border: 1.5px solid var(--wudhu);
  background: var(--kabah);
}
.co-proof-dots i:nth-child(2) { background: var(--emas); }
.co-proof-dots i:nth-child(3) { background: var(--tawakal); }
.co-lines { display: flex; flex-direction: column; gap: 7px; margin-top: 14px; }
.co-line { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--kurma-muda); }
.co-line em { font-style: normal; color: var(--kurma); font-weight: 600; }
.co-line.co-total {
  border-top: 1px solid var(--garis);
  margin-top: 9px;
  padding-top: 13px;
  align-items: baseline;
  font-family: var(--pub-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--kurma);
}
.co-line.co-total span:last-child { font-size: 24px; font-weight: 700; color: var(--kabah); }
.co-cta { width: 100%; margin-top: 18px; padding: 15px 20px; font-size: 16px; box-shadow: 0 18px 30px -20px rgba(11, 43, 87, 0.95); }
.co-secure { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 12px 0 0; font-size: 12px; color: var(--kurma-muda); }
.co-secure svg { width: 14px; height: 14px; color: var(--kabah); }
.co-trust {
  list-style: none;
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px dashed var(--garis);
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--kurma-muda);
  font-size: 13.5px;
}
.co-trust li { display: flex; gap: 9px; }
.co-trust li::before { content: "\2713"; color: var(--kabah); font-weight: 700; }
.co-help-link { display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 600; text-decoration: none; }
.co-help-link:hover { text-decoration: underline; }
.co-mbar { display: none; }
.co-obar { display: none; }
.co-mbar-note { display: none; }

/* Saat bar mobile aktif, sembunyikan tombol CTA di dalam kartu ringkasan
   (desktop tetap menampilkan keduanya; HP cukup satu pintu bayar). */
@media (max-width: 780px) {
  body.pub .co-cta { display: none; }
}

/* Keyboard iOS yang sopan di form checkout */
.co-field input[inputmode="tel"], .co-field input[inputmode="email"] { -webkit-appearance: none; }

/* ---------- Halaman pembayaran order (/order/:orderNo) ---------- */
.pay-hero .co-hero-side { justify-content: center; }
.pay-status {
  display: inline-block;
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pay-status.green { background: #cdeadd; color: #12513f; }
.pay-status.yellow { background: #f7e2b8; color: #7a5410; }
.pay-status.red { background: #f6d3c9; color: #8f3a23; }
.pay-status.gray { background: rgba(255, 255, 255, 0.18); color: #f2ecdd; }

.pay-total {
  position: relative;
  background: color-mix(in srgb, var(--kabah) 7%, white);
  border: 1px solid color-mix(in srgb, var(--kabah) 18%, white);
  border-radius: 16px;
  padding: 18px 20px;
}
.pay-total > span { display: block; font-size: 12.5px; font-weight: 600; color: var(--kurma-muda); }
.pay-total > strong {
  display: block;
  margin: 4px 0 6px;
  font-family: var(--pub-display);
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--kabah);
}
.pay-total > small { display: block; font-size: 12.5px; color: var(--kurma-muda); }
.pay-copy {
  border: 1px solid var(--garis);
  background: #fff;
  color: var(--kurma);
  border-radius: 999px;
  padding: 7px 14px;
  font: 600 12.5px var(--pub-body);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 130ms ease, background 130ms ease, color 130ms ease;
}
.pay-total .pay-copy { margin-top: 12px; }
.pay-copy:hover { border-color: var(--kabah); color: var(--kabah); }
.pay-copy.ok { background: var(--kabah); border-color: var(--kabah); color: #fff; }

.pay-banks { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.pay-bank {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1.5px solid #dce8f7;
  border-radius: 16px;
  padding: 14px 16px;
  background: #ffffff;
}
.pay-bank-name {
  flex: none;
  min-width: 78px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kabah);
}
.pay-bank-no { flex: 1; min-width: 0; }
.pay-bank-digit { display: block; font-family: var(--pub-body); font-size: 17px; font-weight: 700; letter-spacing: 0.04em; }
.pay-bank-holder { display: block; font-size: 12px; color: var(--kurma-muda); }

.pay-code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px dashed color-mix(in srgb, var(--kabah) 35%, white);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  word-break: break-all;
}
.pay-qr { display: block; margin: 14px 0 0; border-radius: 12px; border: 1px solid var(--garis); background: #fff; padding: 8px; }
.pay-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.pay-countdown { margin: 14px 0 0; font-size: 13.5px; color: var(--kurma-muda); }
.pay-countdown strong { font-variant-numeric: tabular-nums; font-size: 15px; color: var(--tawakal); }
.pay-upload { margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--garis); }
body.pub .pay-upload input[type="file"] {
  width: 100%;
  padding: 13px 15px;
  border-radius: 12px;
  border: 1.5px dashed #d6ccb6;
  background: #ffffff;
  font-size: 14px;
  cursor: pointer;
}
body.pub .pay-upload input[type="file"]:hover { border-color: var(--kabah); }

/* Form unggah bukti transfer di HP: kartu kecil di atas bar aksi */
@media (max-width: 780px) {
  .pay-upload { background: #ffffff; border: 1px solid var(--garis); border-radius: 16px; padding: 16px; }
  .pay-upload .btn { display: none; }
  .co-hero-main .co-steps { margin-bottom: 12px; }
}

/* ---------- Footer ---------- */
.pub-foot { border-top: 1px solid var(--garis); margin-top: 40px; background: color-mix(in srgb, var(--pasir) 92%, white); }
.pub-foot .pub-top-in { padding: 26px 20px; display: block; }
.pub-foot p { margin: 0 0 4px; font-size: 14px; }
.pub-foot .pub-foot-meta { color: var(--kurma-muda); font-size: 12.5px; }
/* Versi mobile: seluruh isi footer (teks kustom editor + baris copyright
   "Dikelola dengan MemberHub") rata tengah. */
@media (max-width: 780px) {
  .pub-foot .pub-top-in { text-align: center; }
}

/* ---------- Gerak yang disiplin ---------- */
@media (prefers-reduced-motion: no-preference) {
  .kabah-hero .kabah-copy { animation: naik 520ms ease both; }
  .kabah-hero .laptop-types { animation: naik 520ms 120ms ease both; }
  @keyframes naik {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
  }
}

/* ---------- Responsif ---------- */
@media (max-width: 780px) {
  .kabah-hero { grid-template-columns: 1fr; padding: 48px 20px 40px; gap: 30px; }
  .produk-buy { grid-template-columns: 1fr; }
  .produk-buy .aksi { min-width: 0; }
  .co-hero-in { grid-template-columns: 1fr; gap: 18px; padding: 26px 20px 30px; }
  .co-hero-side { align-items: flex-start; text-align: left; }
  .co-lead { font-size: 14px; }
  .co-grid { grid-template-columns: 1fr; gap: 18px; }
  .co-wrap { padding: 20px 16px 100px; }
  .co-card { padding: 20px 18px; border-radius: 18px; }
  .co-side { position: static; }
  .co-flash { margin: 16px 16px -4px; }
  /* Bilah total menempel di bawah layar (gaya checkout mobile) */
  .co-mbar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid var(--garis);
    box-shadow: 0 -10px 24px -18px rgba(11, 43, 87, 0.6);
  }
  .co-mbar-total { display: flex; flex-direction: column; line-height: 1.25; }
  .co-mbar-total span { font-size: 11px; color: var(--kurma-muda); }
  .co-mbar-total strong { font-family: var(--pub-display); font-size: 19px; color: var(--kabah); }
  .co-mbar .btn { padding: 12px 20px; font-size: 14.5px; }
  .co-mbar-note { display: block; font-size: 10.5px; color: var(--kurma-muda); }
  /* Bar aksi halaman pesanan (HP): total + tombol utama selalu terlihat.
     JS kecil menyembunyikannya saat tombol di kartu sudah terlihat di layar. */
  .co-obar { display: flex; align-items: center; justify-content: space-between; gap: 14px;
    position: fixed; inset: auto 0 0 0; z-index: 30;
    padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.97); border-top: 1px solid var(--garis);
    box-shadow: 0 -10px 24px -18px rgba(11, 43, 87, 0.6); }
  .co-obar .co-mbar-total { display: flex; flex-direction: column; line-height: 1.25; }
  .co-obar .co-mbar-total span { font-size: 11px; color: var(--kurma-muda); }
  .co-obar .co-mbar-total strong { font-family: var(--pub-display); font-size: 19px; color: var(--kabah); }
  .co-obar .btn { padding: 12px 20px; font-size: 14.5px; }
  .co-obar form { margin: 0; }
  /* Form unggah bukti transfer di HP: kartu kecil di atas bar aksi */
  .pay-upload { background: #ffffff; border: 1px solid var(--garis); border-radius: 16px; padding: 16px; }
  .pay-upload .btn { display: none; }
  .co-hero-main .co-steps { margin-bottom: 12px; }
  /* Form pembeli satu kolom penuh: netralkan grid bersarang yang menyusutkan lebar kolom */
  .co-form [class*="grid"],
  .co-form [style*="grid-template-columns"],
  .co-form [style*="display:grid"] { display: block; }
  .co-form [class*="grid"] > *,
  .co-form [style*="grid-template-columns"] > *,
  .co-form [style*="display:grid"] > * { width: 100%; }
  .co-form [class*="col-span"],
  .co-form [style*="grid-column"] { grid-column: auto; width: 100%; }
  .co-form .co-google .google-btn { width: 100%; justify-content: center; }
  .co-tabs { grid-template-columns: 1fr; }
  .co-tab { min-height: 44px; }

  /* --- Ergonomi sentuh ---
     Tombol & kolom minimal 46px, dan semua input 16px supaya iOS tidak
     meng-zoom otomatis begitu kolom fokus (penyebab utama tampilan "lompat"). */
  body.pub .btn { min-height: 46px; padding: 13px 22px; font-size: 15.5px; }
  body.pub .btn.small { min-height: 42px; padding: 10px 16px; font-size: 14px; }
  body.pub input, body.pub select, body.pub textarea { font-size: 16px; min-height: 48px; padding: 12px 14px; }
  body.pub textarea { min-height: 120px; }
  .co-field input, .co-field textarea { font-size: 16px; }
  .blog-chip { min-height: 40px; padding: 9px 15px; }
  .blog-page { min-width: 44px; height: 44px; }

  /* --- Jarak & ukuran untuk layar sempit ---
     Register layar sempit: judul turun satu tingkat, jarak antar bagian lebih
     rapat, dan hero tidak lagi dua kolom. */
  .kabah-hero { padding: 40px 18px 36px; }
  .hero-in { grid-template-columns: 1fr; gap: 28px; }
  .kabah-hero h1 { font-size: clamp(27px, 7.6vw, 34px); line-height: 1.16; }
  .kabah-hero .lede { font-size: 15.5px; margin-bottom: 22px; }
  .kabah-hero .hero-cta { flex-direction: column; gap: 10px; }
  .kabah-hero .hero-cta .btn { flex: 1 1 100%; width: 100%; }
  .kabah-hero .hero-note { font-size: 12.5px; }
  .laptop-types { padding: 18px 18px 6px; }
  .laptop-types strong { font-size: 15px; }
  .pub-section { padding: 28px 18px; }
  .pub-catalog { padding-top: 26px; }
  .catalog-lead { font-size: 15px; margin-bottom: 20px; }
  .section-head { margin-bottom: 14px; }
  .section-head h2 { font-size: 20px; }
  .laptop-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .laptop-filter label { font-size: 12px; }
  .laptop-filter-aksi { gap: 8px; margin-top: 2px; }
  .produk-grid { gap: 14px; }
  .produk-card h3 { font-size: 17px; }
  /* Teks bacaan di HP: 16.5px dengan tinggi baris lega, bukan 17px desktop. */
  .post-body { font-size: 16.5px; line-height: 1.75; }
  .post-body h2 { font-size: 22px; }
  .post-body h3 { font-size: 19px; }
  .blog-head h1 { font-size: clamp(26px, 7.4vw, 32px); }
  .post-body, .lp-text, .co-lead { overflow-wrap: anywhere; }
  .lp-hero { padding: 48px 16px 40px; }
  .lp-card { padding: 22px 18px; margin-bottom: 24px; }
  .produk-card { padding: 18px; }
  .produk-detail { padding: 28px 16px; }
  .produk-buy { padding: 20px 18px; }
  .co-card { padding: 20px 16px; }
  .post-author { padding: 16px; }
  .post-nav-item { padding: 14px 16px; }
  .reader-cta { padding: 18px 16px; }
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--kabah) 45%, white);
  outline-offset: 2px;
}

/* ===================== BLOG (arsip + artikel) ===================== */
.blog-section { padding-top: 44px; }
.blog-head { max-width: 720px; margin-bottom: 20px; }
.blog-head h1 { font-family: var(--pub-display); font-size: clamp(30px, 5vw, 44px); font-weight: 600; line-height: 1.1; margin: 6px 0 8px; }
.blog-sub { margin: 0; color: var(--kurma-muda); font-size: 15px; }
.blog-sub a { font-weight: 600; }

/* Chip kategori */
.blog-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.blog-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--garis); background: var(--wudhu);
  color: var(--kurma-muda); font-size: 13.5px; font-weight: 600; text-decoration: none;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.blog-chip small { font-size: 11.5px; opacity: 0.7; }
.blog-chip:hover { border-color: var(--emas-tua); color: var(--kabah); text-decoration: none; }
.blog-chip.active { background: var(--kabah); border-color: var(--kabah); color: #ffffff; }
.blog-chip.active small { opacity: 0.85; }

/* Kartu arsip */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); gap: 22px; }
.blog-card {
  display: flex; flex-direction: column;
  background: var(--wudhu); border: 1px solid var(--garis); border-radius: 20px;
  overflow: hidden; text-decoration: none; color: inherit;
  box-shadow: 0 16px 34px -32px rgba(11, 43, 87, 0.6);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.blog-card:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -24px rgba(11, 43, 87, 0.35); border-color: color-mix(in srgb, var(--emas) 45%, var(--garis)); text-decoration: none; }
.blog-thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, #3b93e8, var(--kabah-tua)); }
.blog-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-thumb-brand { display: grid; place-items: center; width: 100%; height: 100%; }
.blog-thumb-brand svg { width: 42%; height: auto; aspect-ratio: 1; opacity: 0.55; }
.blog-thumb-brand svg path { stroke: var(--emas); stroke-width: 3.4; }
.blog-thumb-brand svg circle { fill: var(--emas); }
.blog-body { display: flex; flex-direction: column; gap: 7px; padding: 18px 20px 22px; }
.blog-badge {
  align-self: flex-start;
  padding: 4px 11px; border-radius: 999px;
  background: color-mix(in srgb, var(--emas) 20%, var(--wudhu));
  color: var(--emas-tua); font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.blog-card h2 { font-family: var(--pub-display); font-size: 21px; font-weight: 600; line-height: 1.25; margin: 2px 0 0; }
.blog-meta { color: var(--kurma-muda); font-size: 12.5px; font-weight: 600; }
.blog-body p {
  margin: 4px 0 0; color: var(--kurma-muda); font-size: 14.5px; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-empty { color: var(--kurma-muda); }

/* Paginasi */
.blog-pag { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 34px 0 0; }
.blog-page {
  display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 12px;
  border: 1px solid var(--garis); border-radius: 999px; background: var(--wudhu);
  color: var(--kurma-muda); font-size: 13.5px; font-weight: 600; text-decoration: none;
}
.blog-page.nav { padding: 0 16px; }
.blog-page:hover { border-color: var(--emas-tua); color: var(--kabah); text-decoration: none; }
.blog-page.is-current { background: var(--kabah); border-color: var(--kabah); color: #ffffff; }
.blog-gap { color: var(--kurma-muda); padding: 0 2px; }

/* Artikel tunggal */
.blog-post { max-width: 760px; margin: 0 auto; padding: 44px 20px 10px; }
.post-head h1 { font-family: var(--pub-display); font-size: clamp(28px, 4.2vw, 36px); font-weight: 600; line-height: 1.15; margin: 8px 0 16px; }
.post-head .eyebrow a { color: inherit; text-decoration: none; }
.post-head .eyebrow a:hover { text-decoration: underline; }
.post-meta { display: flex; align-items: center; gap: 11px; margin: 0 0 26px; color: var(--kurma-muda); font-size: 13.5px; line-height: 1.45; }
.post-meta strong { color: var(--kurma); }
.post-avatar {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--kabah); color: #ffffff; font: 700 15px var(--pub-body);
}
.post-avatar.big { width: 52px; height: 52px; font-size: 20px; }
.post-hero { margin: 0 0 30px; }
.post-hero img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 20px; display: block; }
.post-body { font-size: 17px; line-height: 1.78; color: var(--kurma); }
.post-body p { margin: 0 0 20px; }
.post-body h1 { font-family: var(--pub-display); font-size: clamp(26px, 3.4vw, 32px); font-weight: 600; line-height: 1.25; margin: 36px 0 12px; }
.post-body h2 { font-family: var(--pub-display); font-size: clamp(23px, 3vw, 28px); font-weight: 600; line-height: 1.25; margin: 36px 0 12px; }
.post-body h3 { font-family: var(--pub-display); font-size: 20.5px; font-weight: 600; margin: 28px 0 10px; }
.post-body h4 { font-size: 17px; font-weight: 700; margin: 22px 0 8px; }
.post-body ul, .post-body ol { margin: 0 0 20px; padding-left: 22px; }
.post-body li { margin-bottom: 8px; }
.post-body a { color: var(--kabah); font-weight: 600; }
.post-body strong { font-weight: 700; }

/* Blok gambar & tabel ala WordPress Gutenberg */
.wp-block-image { margin: 26px auto; text-align: center; }
.wp-block-image img { max-width: 100%; height: auto; border-radius: 12px; display: inline-block; }
.wp-block-image figcaption { font-size: 13px; color: var(--kurma-muda); margin-top: 8px; }
.wp-block-table { margin: 26px 0; overflow-x: auto; }
.wp-block-table table { width: 100%; border-collapse: collapse; font-size: 15px; }
.wp-block-table th { background: var(--wudhu); text-align: left; }
.wp-block-table th, .wp-block-table td { border: 1px solid var(--garis); padding: 9px 12px; vertical-align: top; }
.wp-block-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--wudhu) 45%, transparent); }
.lp-text .wp-block-image { margin: 26px auto; }
.lp-text .wp-block-table { margin: 26px 0; }
.post-body code { background: #eaf3ff; border: 1px solid var(--garis); border-radius: 6px; padding: 1px 6px; font-size: 14.5px; }
.post-body blockquote {
  margin: 0 0 22px; padding: 4px 0 4px 18px;
  border-left: 3px solid var(--emas); color: var(--kurma-muda); font-style: italic;
}
/* Media konten impor (terutama WordPress): jangan pernah keluar kolom bacaan.
   Gambar WP sering membawa lebar asli ribuan piksel tanpa atribut pembatas,
   jadi max-width:100% + height:auto wajib di sini (bukan di tiap template). */
.post-body img, .lp-text img { max-width: 100%; height: auto; border-radius: 14px; }
.post-body figure, .lp-text figure { max-width: 100%; margin-left: 0; margin-right: 0; }
.post-body iframe, .post-body video, .post-body embed, .lp-text iframe { max-width: 100%; }
.post-body table, .lp-text table { display: block; max-width: 100%; overflow-x: auto; }
.post-body pre, .lp-text pre { max-width: 100%; overflow-x: auto; }
.post-body, .lp-text { overflow-wrap: break-word; }
.post-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 30px 0 0; padding: 0; }
/* Slot iklan AdSense (artikel, arsip, halaman statis): margin vertikal saja,
   ukuran mengikuti unit responsif Google. */
.ads-slot { margin: 24px 0; overflow: hidden; }
.blog-grid .ads-slot { margin: 0; align-self: stretch; }
.post-tags a {
  display: inline-block; padding: 6px 13px; border-radius: 999px;
  background: #eaf3ff; border: 1px solid var(--garis);
  color: var(--kurma-muda); font-size: 13px; font-weight: 600; text-decoration: none;
}
.post-tags a:hover { border-color: var(--emas-tua); color: var(--kabah); text-decoration: none; }
.post-author {
  display: flex; align-items: center; gap: 14px; margin: 30px 0 0;
  padding: 18px 20px; border: 1px solid var(--garis); border-radius: 18px; background: var(--wudhu);
}
.post-author div { display: flex; flex-direction: column; gap: 3px; }
.post-author strong { font-family: var(--pub-display); font-size: 17px; }
.post-author span { color: var(--kurma-muda); font-size: 13.5px; line-height: 1.5; }
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 26px 0 0; }
.post-nav-item {
  display: flex; flex-direction: column; gap: 5px;
  padding: 16px 18px; border: 1px solid var(--garis); border-radius: 16px;
  background: var(--wudhu); text-decoration: none; color: inherit;
}
.post-nav-item:hover { border-color: var(--emas-tua); text-decoration: none; }
.post-nav-item.next { text-align: right; }
.post-nav-item small { color: var(--kurma-muda); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.post-nav-item strong { font-family: var(--pub-display); font-size: 16.5px; font-weight: 600; line-height: 1.3; }
.post-back { margin: 24px 0 0; }

/* Baca juga */
.blog-related { padding-top: 34px; }
.blog-mini-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.blog-mini {
  display: flex; gap: 13px; align-items: center;
  padding: 12px; border: 1px solid var(--garis); border-radius: 16px;
  background: var(--wudhu); text-decoration: none; color: inherit;
  transition: transform 150ms ease, border-color 150ms ease;
}
.blog-mini:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--emas) 45%, var(--garis)); text-decoration: none; }
.blog-mini .blog-thumb { flex: 0 0 84px; width: 84px; border-radius: 12px; aspect-ratio: 4 / 3; }
.blog-mini-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.blog-mini-body strong { font-family: var(--pub-display); font-size: 15.5px; font-weight: 600; line-height: 1.3; }

/* ---------- Ajakan di akhir bacaan (beda untuk tamu vs yang sudah login) ---------- */
.reader-cta {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  margin: 28px 0 0; padding: 22px;
  border: 1px solid var(--garis); border-radius: 20px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--emas) 16%, var(--wudhu)), var(--wudhu));
}
.reader-cta h3 { font-family: var(--pub-display); font-size: 18.5px; font-weight: 600; margin: 0; line-height: 1.25; }
.reader-cta p { margin: 0; color: var(--kurma-muda); font-size: 14.5px; }
.reader-cta .aksi { display: flex; gap: 10px; flex-wrap: wrap; }
.reader-cta.member { background: linear-gradient(135deg, color-mix(in srgb, var(--kabah) 12%, var(--wudhu)), var(--wudhu)); }
.reader-cta.member h3 { color: var(--kabah-tua); }
@media (max-width: 780px) {
  .reader-cta .aksi { width: 100%; }
  .reader-cta .aksi .btn { flex: 1 1 100%; }
}

@media (max-width: 780px) {
  .blog-section { padding-top: 30px; }
  .post-head h1 { font-size: 26px; }
  .blog-post { padding-top: 30px; }
  .post-body { font-size: 16.5px; }
  .post-nav { grid-template-columns: 1fr; }
  .post-nav-item.next { text-align: left; }
  /* Tombol "Sebelumnya/Berikutnya" tetap tampil di HP. Sebelumnya disembunyikan,
     padahal itu satu-satunya jalan ke halaman berikutnya. */
  .blog-pag { gap: 8px; }
}

/* Pengiriman Mengantar (checkout produk fisik) */
.ship-results { display: grid; gap: 6px; margin-top: 8px; }
.ship-results:empty { display: none; }
.ship-opt { display: block; width: 100%; text-align: left; padding: 9px 12px; border: 1px solid var(--border, #dce8f7); border-radius: 10px; background: #ffffff; cursor: pointer; font-size: 13.5px; }
.ship-opt:hover { border-color: var(--emas-tua, #07705c); }
.ship-opt small { color: var(--kurma-muda, #5b6b7d); }

/* ---------- Popup bukti sosial (sales proof) ---------- */
/* Kartu kecil di kiri bawah: foto/inisial + kalimat aktivitas + waktu relatif.
   Ditempatkan di atas bar bayar halaman checkout (body.pub-bare) supaya tidak
   pernah menutup tombol "Buat Pesanan". */
.sp-wrap { position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 70; max-width: min(340px, calc(100vw - 32px)); pointer-events: none; }
body.pub-bare .sp-wrap { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
.sp-toast {
  display: flex; align-items: center; gap: 11px; pointer-events: auto;
  padding: 11px 12px; border: 1px solid var(--garis, #dce8f7); border-radius: 16px;
  background: #ffffff; box-shadow: 0 14px 34px rgb(43 32 12 / 0.18);
  opacity: 0; transform: translateY(12px) scale(0.98);
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.sp-toast.is-on { opacity: 1; transform: none; }
.sp-ava {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  background: color-mix(in srgb, var(--kabah, #0b63c4) 14%, #fff);
  color: var(--kabah-tua, #14453c); font-weight: 800; font-size: 16px;
}
.sp-ava.has-photo { background: #f1ece0; }
.sp-ava img { width: 40px; height: 40px; object-fit: cover; display: block; }
.sp-text { font-size: 13.5px; line-height: 1.4; color: var(--kurma, #40371f); min-width: 0; }
.sp-text strong { font-weight: 700; }
.sp-text small { display: block; color: var(--kurma-muda, #5b6b7d); font-size: 11.5px; margin-top: 2px; }
/* Gambar produk pada toast pembelian: kotak membulat, ukuran avatar. */
.sp-prod { flex: 0 0 40px; width: 40px; height: 40px; object-fit: cover; border-radius: 10px; border: 1px solid var(--garis, #dce8f7); display: block; }
/* Toast pembelian bisa diklik: link membalut isi, tanpa dekor bawaan. */
.sp-link { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.sp-clickable { cursor: pointer; }
.sp-clickable:hover { border-color: color-mix(in srgb, var(--kabah, #0b63c4) 45%, var(--garis, #dce8f7)); }
.sp-see { display: inline-block; margin-top: 3px; font-size: 11.5px; font-weight: 700; color: var(--kabah, #0b63c4); }
.sp-clickable:hover .sp-see { text-decoration: underline; }
/* Nama produk pada toast yang bisa diklik tampil seperti tautan: jelas bisa
   ditekan, hover mempertebal garis bawahnya. Toast tanpa slug tetap polos. */
.sp-link .sp-prod-name { color: var(--kabah, #0b63c4); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--kabah, #0b63c4) 45%, transparent); text-underline-offset: 2px; }
.sp-link:hover .sp-prod-name { text-decoration-color: var(--kabah, #0b63c4); }
.sp-close { margin-left: auto; flex: 0 0 auto; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--kurma-muda, #5b6b7d); font-size: 18px; line-height: 1; cursor: pointer; }
.sp-close:hover { background: color-mix(in srgb, var(--kurma-muda, #5b6b7d) 12%, transparent); }
@media (max-width: 780px) {
  .sp-wrap { left: 10px; right: 10px; max-width: none; }
  .sp-toast { border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-toast { transition: none; }
}

/* =====================================================================
   Seksi beranda dari mockup: grid kartu umum, badge, strip affiliate.
   Dipakai seksi Tutorial populer, Artikel terbaru, dan strip kecil di bawah.
   Nama kelas mengikuti mockup (.grid, .card, .badge, .strip), tidak dipakai
   di tempat lain di public.css, jadi aman didefinisikan di sini.
   ===================================================================== */
.grid { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .grid, .produk-grid, .laptop-grid { grid-template-columns: 1fr; }
}
.card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--wudhu);
  border: 1px solid var(--garis);
  border-radius: 16px;
  padding: 22px;
  transition: transform 160ms, box-shadow 160ms;
  color: var(--kurma);
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(11, 43, 87, 0.08);
  text-decoration: none;
}
.card h3 {
  font-family: var(--pub-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  margin: 0;
}
.card .specs {
  font-size: 13.5px;
  color: var(--kurma-muda);
}
.badge {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 4px 10px;
  border-radius: 999px;
}
/* Badge biru: tutorial & artikel tanpa kategori. */
.badge.b-dig { background: rgba(11, 99, 196, 0.12); color: var(--kabah); }
.badge.b-baru { background: rgba(11, 99, 196, 0.12); color: var(--kabah); }
.strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--wudhu);
  border: 1px solid var(--garis);
  border-radius: 16px;
  padding: 18px 22px;
}
.strip h3 {
  font-family: var(--pub-display);
  font-size: 18px;
  margin: 0;
  color: var(--kurma);
}
.strip .muted { margin: 4px 0 0; }

/* Badge stok unit fisik ala mockup (kartu katalog): merah tawakal kecil. */
.stok {
  font-size: 13px;
  font-weight: 600;
  color: var(--tawakal);
}
.stok.habis { opacity: 0.75; }