/* ==========================================================================
   Bin Waris Books — storefront publik
   Template acuan dari Abi: krem hangat + navy + oranye terakota, judul serif,
   kartu bersudut bulat, bilah cari melayang di batas hero.

   Aturan yang dipegang:
   - TIDAK ada ilustrasi buatan. Sampul yang belum punya foto digambar sebagai
     sampul tipografis (judul + penulis di atas warna), bukan gambar vektor.
   - Huruf diambil dari Google Fonts di toko.php; fallback sistem tetap aman
     kalau font gagal dimuat.
   ========================================================================== */

:root {
  --krem:      #FBF6EF;
  --krem-tua:  #F2E9DC;
  --putih:     #FFFFFF;
  --navy:      #0B203E;
  --navy-muda: #17304F;
  --oranye:    #E65A24;
  --oranye-tua:#C8481A;
  --coklat:    #7A4A2B;
  --tinta:     #1D2530;
  --redup:     #6B7280;
  --garis:     #E4D9C8;
  --hijau:     #1F7A4D;
  --merah:     #B42318;

  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:  'Plus Jakarta Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;

  --radius:   14px;
  --radius-k: 999px;
  --bayang:   0 2px 4px rgba(11, 32, 62, .04), 0 12px 28px rgba(11, 32, 62, .07);
  --bayang-h: 0 4px 8px rgba(11, 32, 62, .06), 0 20px 44px rgba(11, 32, 62, .12);
  --wadah:    1180px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--krem);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 0; }

.wadah { width: 100%; max-width: var(--wadah); margin: 0 auto; padding: 0 24px; }

/* ── Kepala ──────────────────────────────────────────────────────────────── */

.kepala {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(251, 246, 239, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--garis);
}

.kepala-isi {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 72px;
}

.merek { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* Tanda merek: dua balok menyilang seperti punggung buku — bentuk geometris,
   bukan ilustrasi. */
.merek-tanda {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--navy);
  position: relative;
  flex-shrink: 0;
}
.merek-tanda::after {
  content: '';
  position: absolute;
  inset: 6px 6px 6px 11px;
  border-radius: 2px;
  background: var(--oranye);
}

/* Logo ikon merek (gambar dari toko asal). Tinggi dikunci, lebar mengikuti
   rasio gambar supaya ikon tidak gepeng; `contain` menjaga bentuknya utuh. */
.merek-logo {
  height: 26px;
  width: auto;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}

.merek-teks {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--navy);
}

.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }

.nav a {
  padding: 8px 14px;
  border-radius: var(--radius-k);
  font-size: 14px;
  font-weight: 500;
  color: var(--navy);
  transition: background .16s ease, color .16s ease;
}
.nav a:hover { background: var(--krem-tua); }
.nav a.on { background: var(--navy); color: #fff; }

.keranjang-tombol {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-k);
  background: var(--oranye);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  transition: background .16s ease, transform .16s ease;
  flex-shrink: 0;
}
.keranjang-tombol:hover { background: var(--oranye-tua); transform: translateY(-1px); }

.lencana {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-k);
  background: #fff;
  color: var(--oranye);
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Pesan ───────────────────────────────────────────────────────────────── */

.pesan {
  margin: 18px 0 0;
  padding: 12px 18px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
}
.pesan-ok  { background: #E8F5EC; color: var(--hijau); border: 1px solid #BFE3CC; }
.pesan-err { background: #FDECEA; color: var(--merah); border: 1px solid #F5C9C4; }

/* ── Tombol ──────────────────────────────────────────────────────────────── */

.tombol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 26px;
  border: 1px solid transparent;
  border-radius: var(--radius-k);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.tombol-utama { background: var(--oranye); color: #fff; }
.tombol-utama:hover { background: var(--oranye-tua); transform: translateY(-1px); }
.tombol-utama:disabled { background: #D8CFC2; color: #8A8175; cursor: not-allowed; transform: none; }
.tombol-garis { background: transparent; color: var(--navy); border-color: var(--navy); }
.tombol-garis:hover { background: var(--navy); color: #fff; }
.tombol-lebar { width: 100%; }

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  background: var(--krem-tua);
  padding: 64px 0 120px;
  overflow: hidden;
}

/* ── Banner gambar di sambutan beranda ─────────────────────────────────────
   Latar memakai warna kepala supaya banner bergaya gelap (seperti banner
   toko asal yang teksnya putih transparan) tetap terbaca. Gambar tidak
   dipotong: lebar mengikuti kolom, tinggi otomatis. */
.hero-banner {
  background: var(--kepala-latar, var(--navy));
  padding: 28px 16px;
  text-align: center;
}

.hero-banner-tautan { display: block; }

.hero-banner-gambar {
  width: 100%;
  height: auto;
  display: inline-block;
  vertical-align: middle;
  border: 0;
}

@media (max-width: 640px) {
  .hero-banner { padding: 16px 10px; }
}

/* Pembatas melengkung: transisi hero → krem, bukan garis lurus. */
.hero::after {
  content: '';
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: -70px;
  height: 140px;
  background: var(--krem);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.hero-isi {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 56px;
  align-items: center;
}

.hero-cap {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--coklat);
}

.hero-judul {
  font-size: clamp(34px, 4.6vw, 56px);
  color: var(--navy);
  letter-spacing: -.02em;
}

.hero-teks {
  margin: 20px 0 0;
  max-width: 44ch;
  font-size: 16px;
  color: #4A5361;
}

.hero-aksi { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* Tumpukan tiga sampul — dibuat dari div, bukan gambar. */
.hero-kanan { display: flex; flex-direction: column; align-items: center; gap: 22px; }

.hero-tumpuk {
  position: relative;
  width: 100%;
  max-width: 300px;
  height: 350px;
}

/* Dua sampul di belakang = kesan tumpukan buku. Bisa diisi sampul asli
   pilihan tim, atau dibiarkan polos (panel warna). Sampul utama ditaruh
   paling depan dan selalu terbaca utuh. */
.tumpuk-belakang {
  position: absolute;
  left: 50%;
  width: 186px;
  height: 310px;
  margin-left: -93px;
  border-radius: 8px 14px 14px 8px;
  background: linear-gradient(145deg, #14304F 0%, #1D3E60 100%);
  box-shadow: var(--bayang);
  overflow: hidden;
}
.tumpuk-belakang .sampul-foto,
.tumpuk-belakang .sampul-tiruan { width: 100%; height: 100%; }
.tumpuk-belakang .sampul-tiruan { padding: 14px 12px 14px 18px; gap: 5px; }
.tumpuk-belakang .sampul-judul { font-size: 12px; -webkit-line-clamp: 3; }
.tumpuk-belakang .sampul-penulis { font-size: 8px; -webkit-line-clamp: 1; }
.tumpuk-belakang .sampul-tiruan::before { width: 4px; }
.tumpuk-b1 { top: 14px; transform: rotate(-6deg) translateX(-14px); }
.tumpuk-b2 { top: 26px; transform: rotate(6deg) translateX(14px); opacity: .8; }

.tumpuk-utama {
  position: absolute;
  top: 0;
  left: 50%;
  /* 3:5 — nisbah sampul buku. Dulu 190×280 (0,68) sehingga sampul 2:3
     terpotong sedikit di atas-bawah. */
  width: 186px;
  height: 310px;
  margin-left: -93px;
  border-radius: 8px 14px 14px 8px;
  overflow: hidden;
  box-shadow: var(--bayang-h);
  z-index: 3;
}

.tumpuk-utama .sampul-tiruan,
.tumpuk-utama .sampul-foto {
  width: 100%;
  height: 100%;
}

.tumpuk-utama .sampul-tiruan {
  padding: 22px 16px 22px 24px;
  gap: 10px;
}

.tumpuk-utama .sampul-judul {
  font-size: 19px;
  line-height: 1.22;
  -webkit-line-clamp: 5;
}

.hero-catatan {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--coklat);
}

/* ── Bilah cari melayang ─────────────────────────────────────────────────── */

.cari-melayang {
  position: relative;
  z-index: 5;
  margin-top: -46px;
  background: var(--putih);
  border-radius: 18px;
  box-shadow: var(--bayang-h);
  padding: 20px;
}

.cari-baris {
  display: grid;
  grid-template-columns: 1.6fr 1fr auto;
  gap: 14px;
  align-items: end;
}

.cari-field { display: flex; flex-direction: column; gap: 6px; }

.cari-field > span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--redup);
}

.cari-field input,
.cari-field select {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--garis);
  border-radius: 10px;
  background: var(--krem);
  font-family: var(--sans);
  font-size: 14px;
  color: var(--tinta);
}
.cari-field input:focus,
.cari-field select:focus {
  outline: 2px solid var(--oranye);
  outline-offset: 1px;
  background: #fff;
}

.cari-tombol { height: 44px; }

/* ── Bagian umum ─────────────────────────────────────────────────────────── */

/* Dua kelas (`.wadah.bagian`), bukan satu: `.wadah` mendefinisikan padding
   sendiri dan muncul lebih akhir di media query HP sempit — dengan satu kelas,
   padding seksi jadi 0 dan blok saling menempel (laporan Abi Fitrah, 4 Nov 2026). */
/* PENTING: padding ditulis LENGKAP (atas-bawah KIRI-KANAN), bukan `56px 0`.
   `.wadah.bagian` mengalahkan `.wadah` (dua kelas vs satu), jadi angka 0 di
   sisi kiri-kanan ikut menghapus jarak tepi — judul seksi dan kartu produk
   menempel ke tepi layar (laporan Abi Fitrah, 4 Nov 2026).
   Angkanya harus sama dengan `.wadah` di tiap breakpoint: 24 / 20 / 18 px. */
.wadah.bagian { padding: 40px 24px; }
.wadah.bagian.atas { padding-top: 32px; }

.bagian-kepala {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
}

/* Jarak judul → paragraf. Dulu `.bagian-teks` diberi margin-top NEGATIF (-14px)
   untuk merapat, padahal `.bagian-judul` tidak punya margin bawah sama sekali
   (margin h1 sudah direset) — akibatnya teks paragraf menumpuk di bawah judul
   pada halaman Masuk & Lacak. Diperbaiki Dewi, 28 Okt 2026. */
.bagian-judul { font-size: clamp(24px, 2.8vw, 32px); color: var(--navy); margin: 0 0 8px; }

.bagian-tautan {
  font-size: 14px;
  font-weight: 600;
  color: var(--oranye);
  white-space: nowrap;
}
.bagian-tautan:hover { color: var(--oranye-tua); }

.bagian-hitung { font-size: 14px; color: var(--redup); }
.bagian-teks { margin: 0 0 24px; color: var(--redup); font-size: 14px; }

/* ── Kategori ────────────────────────────────────────────────────────────── */

.kategori-baris { display: flex; flex-wrap: wrap; gap: 12px; }

.kategori-chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 22px;
  border-radius: var(--radius);
  background: var(--navy);
  color: #fff;
  transition: background .16s ease, transform .16s ease;
}
.kategori-chip:hover { background: var(--navy-muda); transform: translateY(-2px); }
.kategori-chip b { font-size: 15px; font-weight: 600; }
.kategori-chip span { font-size: 12px; color: #A9BDD4; }

/* ── Grid & kartu buku ───────────────────────────────────────────────────── */

.grid-buku {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.kartu-buku {
  background: var(--putih);
  border-radius: var(--radius);
  box-shadow: var(--bayang);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s ease, transform .2s ease;
}
.kartu-buku:hover { box-shadow: var(--bayang-h); transform: translateY(-3px); }

.kartu-sampul {
  position: relative;
  display: block;
  /* 1:1 — bukan 3:5. Bingkai 3:5 (padding-bottom 167% seperti binwarisbooks.id)
     hanya cocok untuk sampul buku. Foto produk BWB kebanyakan persegi
     (1200x1200), jadi di bingkai 3:5 gambar hanya terisi di tengah dan
     menyisakan ±92 px kosong di atas & bawah — terlihat seperti jeda antara
     foto dan judul (laporan Abi Fitrah, 4 Nov 2026). Dengan 1:1 foto persegi
     mengisi penuh, dan gambar tetap tidak dipotong (object-fit: contain). */
  aspect-ratio: 1 / 1;
  background: var(--krem-tua);
  overflow: hidden;
}

.kartu-sampul .sampul-foto,
.kartu-sampul .sampul-tiruan { width: 100%; height: 100%; }

/* `contain`, bukan `cover`: sampul tidak boleh terpotong. Sisa ruang diisi
   latar bingkai (krem), bukan dengan memotong judul atau pinggir buku. */
.sampul-foto {
  object-fit: contain;
  object-position: center;
  background: var(--krem-tua);
}

/* Sampul tipografis: warna navy + judul serif. Bukan ilustrasi. */
.sampul-tiruan {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 18px 16px 18px 22px;
  background: linear-gradient(145deg, var(--navy) 0%, #14304F 62%, #1D3E60 100%);
  color: #fff;
  position: relative;
}
/* Punggung buku: garis vertikal tipis di kiri. */
.sampul-tiruan::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: var(--oranye);
}

.sampul-judul {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -.01em;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sampul-penulis {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #E9A98C;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kartu-lencana {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 12px;
  border-radius: var(--radius-k);
  background: var(--merah);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
}

.kartu-isi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px 16px;
  flex: 1;
}

.kartu-judul {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--navy);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kartu-judul:hover { color: var(--oranye); }

.kartu-penulis { font-size: 12px; color: var(--redup); }

.kartu-bawah {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  /* Di kartu 2 kolom HP, harga + tombol tidak muat sebaris. Dulu tombolnya
     meluber keluar kartu dan terpotong; sekarang boleh turun baris. */
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 12px;
}

.kartu-bawah form { flex: 0 0 auto; max-width: 100%; }

.kartu-harga { font-size: 15px; font-weight: 700; color: var(--navy); white-space: nowrap; }

.kartu-tombol {
  padding: 7px 14px;
  max-width: 100%;
  border: 0;
  border-radius: var(--radius-k);
  background: var(--oranye);
  color: #fff;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .16s ease;
}
.kartu-tombol:hover { background: var(--oranye-tua); }
.kartu-tombol.mati { background: #E5DED3; color: #8A8175; cursor: not-allowed; }

/* ── Kosong ──────────────────────────────────────────────────────────────── */

.kosong {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 64px 24px;
  border-radius: var(--radius);
  background: var(--putih);
  box-shadow: var(--bayang);
  text-align: center;
}
.kosong b { font-family: var(--serif); font-size: 20px; color: var(--navy); }
.kosong span { font-size: 14px; color: var(--redup); max-width: 42ch; }
.kosong .tombol { margin-top: 8px; }

/* ── Saring (katalog) ────────────────────────────────────────────────────── */

.saring {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto;
  gap: 12px;
  margin-bottom: 28px;
}

.saring input,
.saring select {
  padding: 11px 14px;
  border: 1px solid var(--garis);
  border-radius: 10px;
  background: var(--putih);
  font-family: var(--sans);
  font-size: 14px;
  color: var(--tinta);
}
.saring input:focus,
.saring select:focus { outline: 2px solid var(--oranye); outline-offset: 1px; }

/* ── Detail buku ─────────────────────────────────────────────────────────── */

.remah {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 26px;
  font-size: 13px;
  color: var(--redup);
}
.remah a:hover { color: var(--oranye); }
.remah b { color: var(--navy); font-weight: 600; }

.detail {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 48px;
  align-items: start;
  padding-bottom: 24px;
}

.detail-kiri {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--bayang-h);
  aspect-ratio: 3 / 5;
  background: var(--krem-tua);
}
.detail-kiri .sampul-foto,
.detail-kiri .sampul-tiruan { width: 100%; height: 100%; }
.detail-kiri .sampul-judul { font-size: 26px; }
.detail-kiri .sampul-penulis { font-size: 12px; }
.detail-kiri .sampul-tiruan { padding: 30px 26px 30px 34px; gap: 14px; }

.detail-kategori {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--coklat);
}

.detail-judul { font-size: clamp(28px, 3.4vw, 40px); color: var(--navy); letter-spacing: -.02em; }

.detail-penulis { margin: 10px 0 0; font-size: 15px; color: var(--redup); }

.detail-harga {
  margin: 22px 0 0;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 700;
  color: var(--oranye);
}

.detail-atribut {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 14px;
  margin: 26px 0 0;
  padding: 18px 0;
  border-top: 1px solid var(--garis);
  border-bottom: 1px solid var(--garis);
}
.detail-atribut div { display: flex; flex-direction: column; gap: 3px; }
.detail-atribut dt { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--redup); }
.detail-atribut dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--navy); }

.detail-sinopsis { margin-top: 26px; }
.detail-sinopsis h2 { font-size: 19px; color: var(--navy); margin-bottom: 10px; }
.detail-sinopsis p { margin: 0; font-size: 15px; line-height: 1.75; color: #414B58; max-width: 68ch; }

.detail-beli {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  margin-top: 30px;
  padding: 20px;
  border-radius: var(--radius);
  background: var(--putih);
  box-shadow: var(--bayang);
}

.qty-field { display: flex; flex-direction: column; gap: 6px; }
.qty-field span { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--redup); }
.qty-field input {
  width: 84px;
  padding: 11px 12px;
  border: 1px solid var(--garis);
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 14px;
  text-align: center;
  background: var(--krem);
}

.detail-habis {
  margin-top: 28px;
  padding: 16px 20px;
  border-radius: 12px;
  background: #FDECEA;
  color: var(--merah);
  font-size: 14px;
  font-weight: 500;
}

/* ── Keranjang ───────────────────────────────────────────────────────────── */

.keranjang {
  display: grid;
  grid-template-columns: 1fr 330px;
  gap: 28px;
  align-items: start;
}

.keranjang-daftar {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.keranjang-baris {
  display: grid;
  grid-template-columns: 68px 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  border-radius: var(--radius);
  background: var(--putih);
  box-shadow: var(--bayang);
}
.keranjang-baris.bermasalah { border: 1px solid #F5C9C4; background: #FFFAF9; }

.keranjang-sampul {
  /* 3:5 juga — dulu 68×88 (0,77) memotong sampul buku. */
  width: 60px;
  height: 100px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--krem-tua);
}
.keranjang-sampul .sampul-foto,
.keranjang-sampul .sampul-tiruan { width: 100%; height: 100%; }
.keranjang-sampul .sampul-tiruan { padding: 8px 8px 8px 12px; gap: 4px; }
.keranjang-sampul .sampul-judul { font-size: 9px; -webkit-line-clamp: 3; }
.keranjang-sampul .sampul-penulis { font-size: 6px; -webkit-line-clamp: 1; }
.keranjang-sampul .sampul-tiruan::before { width: 3px; }

.keranjang-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.keranjang-info b { font-size: 14px; color: var(--navy); }
.keranjang-sku { font-size: 12px; color: var(--redup); }
.keranjang-harga { font-size: 13px; color: #414B58; }
.keranjang-masalah { font-size: 12px; font-weight: 600; color: var(--merah); }

.keranjang-atur { display: flex; align-items: center; gap: 10px; }
.keranjang-atur form { display: flex; align-items: center; gap: 6px; margin: 0; }
.keranjang-atur input[type="number"] {
  width: 62px;
  padding: 7px 8px;
  border: 1px solid var(--garis);
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 13px;
  text-align: center;
  background: var(--krem);
}

.tombol-kecil {
  padding: 7px 12px;
  border: 1px solid var(--garis);
  border-radius: 8px;
  background: var(--putih);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
}
.tombol-kecil:hover { border-color: var(--navy); }

.tautan-hapus {
  padding: 7px 4px;
  border: 0;
  background: none;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--merah);
  cursor: pointer;
}
.tautan-hapus:hover { text-decoration: underline; }

.keranjang-subtotal { font-size: 14px; font-weight: 700; color: var(--navy); white-space: nowrap; }

.keranjang-ringkas,
.checkout-ringkas {
  padding: 22px;
  border-radius: var(--radius);
  background: var(--putih);
  box-shadow: var(--bayang);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.keranjang-ringkas h2,
.checkout-ringkas h2 { font-size: 18px; color: var(--navy); margin-bottom: 6px; }

/* Baris ringkasan: irama tetap 6px, label boleh membungkus, angka rata kanan
   dengan digit sejajar (tabular). Dirapikan Dewi 27 Okt 2026 setelah baris
   ongkir meluber keluar kartu di layar HP. */
/* ── Kupon di ringkasan pesanan (Dewi, 28 Okt 2026) ──────────────────────── */
.kupon-kotak {
  margin: 14px 0 10px;
  padding: 12px;
  border: 1px solid #e3e6ec;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.kupon-judul {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: #5a6573;
}
.kupon-baris {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.kupon-baris input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid #d8dbe2;
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.kupon-baris .tombol {
  flex: 0 0 auto;
  padding: 8px 14px;
  font-size: 13px;
}
.kupon-terpasang {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  color: #2b6b3f;
}
.kupon-terpasang b { letter-spacing: .5px; }
.kupon-hapus {
  border: 0;
  background: none;
  color: #98a1ae;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.kupon-hapus:hover { color: #b3261e; }
.kupon-pesan {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.45;
}
.kupon-pesan.is-ok  { color: #2b6b3f; }
.kupon-pesan.is-err { color: #b3261e; }

/* ── Kupon di ringkasan pesanan (Dewi, 28 Okt 2026) ──────────────────────── */
.kupon-baris { display: flex; gap: 8px; align-items: stretch; }
.kupon-baris input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid #d8dbe2;
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.kupon-baris .tombol { flex: 0 0 auto; padding: 8px 14px; font-size: 13px; }
.kupon-terpasang {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  color: #2b6b3f;
}
.kupon-terpasang b { letter-spacing: .5px; }
.kupon-hapus {
  border: 0;
  background: none;
  color: #98a1ae;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.kupon-hapus:hover { color: #b3261e; }
.kupon-pesan { margin: 8px 0 0; font-size: 12px; line-height: 1.45; }
.kupon-pesan.is-ok  { color: #2b6b3f; }
.kupon-pesan.is-err { color: #b3261e; }

/* Metode pembayaran DI DALAM panel ringkasan: dipisah garis, bukan kartu
   bertumpuk, supaya tetap satu kesatuan dengan rincian biaya. */
.ringkas-metode {
  margin: 16px 0 14px;
  padding-top: 14px;
  border-top: 1px solid var(--garis, #e3e6ec);
}
.ringkas-metode-judul {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: #5a6573;
}
/* Di dalam panel ringkasan ruangnya sempit — kartu pilihan dibuat lebih padat */
.ringkas-metode .daftar-metode { gap: 8px; }
.ringkas-metode .metode-item { padding: 10px 12px; border-radius: 10px; }
.ringkas-metode .metode-teks b { font-size: 13.5px; }
.ringkas-metode .metode-teks small { font-size: 12px; }

/* ── Login agen/pelanggan di header + halaman masuk (Dewi, 28 Okt 2026) ── */
.kepala-aksi { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.masuk-tombol {
  display: inline-flex; align-items: center; height: 36px; padding: 0 16px;
  border: 1px solid rgba(255,255,255,.42); border-radius: 999px;
  color: #fff; font-size: 13px; font-weight: 600; text-decoration: none;
  white-space: nowrap; transition: background .15s ease, border-color .15s ease;
}
.masuk-tombol:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.7); }

.akun-kotak {
  display: inline-flex; align-items: center; gap: 8px; height: 36px;
  padding: 0 6px 0 4px; border-radius: 999px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
  max-width: 260px;
}
.akun-lencana {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px;
  border-radius: 999px; background: #E6A33C; color: #402a06;
  font-size: 10.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
  white-space: nowrap;
}
.akun-lencana-pelanggan { background: #7fd1a8; color: #0d3b23; }
.akun-nama {
  color: #fff; font-size: 13px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px;
}
.akun-keluar {
  color: rgba(255,255,255,.82); font-size: 11.5px; text-decoration: none;
  padding: 0 8px; white-space: nowrap;
}
.akun-keluar:hover { color: #fff; text-decoration: underline; }

/* Lencana harga agen pada kartu & halaman buku */
.kartu-agen {
  display: inline-block; margin-top: 4px; padding: 1px 7px; border-radius: 999px;
  background: #fff3dd; color: #8a5a10; font-size: 10px; font-weight: 800;
  letter-spacing: .3px; text-transform: uppercase;
}
/* Harga khusus member (10 Nov 2026) — warna beda dari harga agen supaya
   pembeli tidak tertukar antara dua jenis harga khusus. */
.kartu-member { background: #e7f4ec; color: #1f6b40; }
.detail-lencana-agen {
  display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px;
  background: #fff3dd; color: #8a5a10; font-size: 10.5px; font-weight: 800;
  letter-spacing: .3px; text-transform: uppercase; vertical-align: middle;
}

/* Halaman masuk / daftar — satu form, tanpa pemisah peran */
.masuk-sempit { max-width: 420px; }
.masuk-kaki {
  margin: 14px 0 0; font-size: 13px; color: #4a5462; text-align: center;
}
.masuk-kaki a { color: #002A54; font-weight: 700; text-decoration: none; }
.masuk-kaki a:hover { text-decoration: underline; }
.masuk-kaki-redup { margin-top: 6px; font-size: 12px; color: #8b95a3; }

.masuk-kartu {
  background: #fff; border: 1px solid #e6e9ef; border-radius: 14px;
  padding: 18px; margin-bottom: 14px;
}
.masuk-judul { margin: 0 0 6px; font-size: 16px; color: #002A54; }
.masuk-catatan { margin: 0 0 14px; font-size: 12.5px; color: #6b7686; line-height: 1.55; }
.masuk-form { display: grid; gap: 12px; }
.masuk-form label { display: grid; gap: 5px; }
.masuk-form label > span { font-size: 12px; font-weight: 700; color: #3c4655; }
.masuk-form label > span i { font-style: normal; font-weight: 500; color: #8b95a3; }
.masuk-form input {
  height: 42px; padding: 0 12px; border: 1px solid #d8dde6; border-radius: 10px;
  font-size: 14px; background: #fff;
}
.masuk-form input:focus { outline: none; border-color: #002A54; box-shadow: 0 0 0 3px rgba(0,42,84,.08); }

@media (max-width: 640px) {
  .akun-nama { max-width: 74px; }
  .kepala-aksi { gap: 7px; }
  .masuk-tombol { padding: 0 12px; }
}

/* ── Metode pembayaran di checkout (Dewi, 28 Okt 2026) ──────────────────── */
.daftar-metode { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.metode-item {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 14px;
  border: 1.5px solid var(--garis, #e3e6ec);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.metode-item:hover { border-color: #c9d2de; }
.metode-item.is-pilih { border-color: #002A54; background: #f6f9fd; }
/* Metode yang belum disiapkan toko: tetap terlihat, tapi jelas tidak bisa dipilih */
.metode-item.is-mati { background: #fafbfc; border-style: dashed; cursor: not-allowed; opacity: .78; }
.metode-item.is-mati b { color: #6b7686; }
.metode-kurang { display: block; font-style: normal; font-size: 11.5px; color: #a3541f; margin-top: 4px; }
/* Aturan global `input { width: 100% }` membuat radio ikut melebar selebar
   kartu — akibatnya tombolnya tampak di tengah, bukan di kiri. Dikunci di sini. */
.metode-item input[type="radio"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 3px 0 0;
  accent-color: #002A54;
}
.metode-teks b { display: block; font-size: 14px; color: #16202b; }
.metode-teks small { display: block; font-size: 12.5px; color: #6b7686; line-height: 1.5; margin-top: 2px; }
.metode-lencana {
  margin-left: auto; flex: 0 0 auto;
  font-size: 10.5px; font-weight: 700; letter-spacing: .4px;
  padding: 3px 8px; border-radius: 999px;
  background: #fdeee6; color: #a3541f;
}

/* ── QRIS di halaman pembayaran ─────────────────────────────────────────── */
.bayar-qris .qris-kotak {
  margin: 14px 0 12px;
  padding: 14px;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 14px;
  text-align: center;
}
.qris-gambar {
  width: 100%;
  max-width: 260px;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 8px;
  background: #fff;
}
.qris-nama { margin: 10px 0 0; font-size: 13px; font-weight: 600; color: #414B58; }
.qris-aksi { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.qris-aksi .tombol { flex: 1 1 150px; text-align: center; }
/* Tombol "Unduh QRIS" berada di atas latar navy — gaya .tombol-garis bawaan
   (teks & garis navy) jadi tidak terbaca. Di sini dibalik jadi putih. */
.bayar-qris .tombol-garis {
  background: #fff;
  color: var(--navy);
  border-color: #fff;
  font-weight: 600;
}
.bayar-qris .tombol-garis:hover { background: #e8eef6; color: var(--navy); }
.salin-tombol-gelap { border-color: rgba(255, 255, 255, .45); }

/* Berat menyatu dengan baris ongkir (arahan Abi Fitrah, 28 Okt 2026) */
.ringkas-berat {
  font-size: 11.5px;
  font-weight: 400;
  color: #8b95a3;
  white-space: nowrap;
}

/* ── Salin rekening/nominal + unggah bukti (Dewi, 28 Okt 2026) ───────────── */
.salin-baris {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.salin-baris .bayar-rek,
.salin-baris .bayar-total { margin: 0; }
.salin-tombol {
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .10);
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.salin-tombol:hover { background: rgba(255, 255, 255, .22); }
.salin-tombol.is-ok { background: #2f9e5b; border-color: #2f9e5b; }

.status-pesanan {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  margin: 18px 0 4px;
  padding: 12px 14px;
  border: 1px solid var(--garis, #e3e6ec);
  border-radius: 12px;
  background: #fbfbfd;
}
.status-lencana {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eef1f5;
  color: #414B58;
}
.status-lencana.is-ok   { background: #e5f6ec; color: #1f7a45; }
.status-lencana.is-info { background: #e8f0fb; color: #1f4f8f; }
.status-lencana.is-warn { background: #fdf3e0; color: #8a5a12; }
.status-lencana.is-bad  { background: #fdeaea; color: #a3282a; }
.status-teks { font-size: 13px; line-height: 1.5; color: #5a6573; }

.unggah-bukti,
.bukti-pembeli {
  margin-top: 22px;
  padding: 16px;
  border: 1px solid var(--garis, #e3e6ec);
  border-radius: 14px;
  background: #fff;
}
.unggah-catatan { font-size: 13px; color: #5a6573; margin: 0 0 14px; line-height: 1.5; }
.unggah-form label { display: block; margin-bottom: 12px; }
.unggah-form label > span {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #414B58;
  margin-bottom: 6px;
}
.unggah-form input[type="tel"],
.unggah-form input[type="file"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--garis, #e3e6ec);
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  background: #fbfbfd;
}
.unggah-form input[type="file"] { padding: 8px 10px; background: #fff; }
.bukti-baris {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 0;
  border-bottom: 1px dashed var(--garis, #e3e6ec);
  font-size: 13px;
}
.bukti-baris:last-of-type { border-bottom: 0; }
.bukti-waktu { color: #8b95a3; font-size: 12px; }
.bukti-catatan { font-size: 12.5px; color: #a3282a; margin: 4px 0 8px; }

.ringkas-baris {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  font-size: 14px;
  color: #414B58;
  padding: 6px 0;
}
.ringkas-baris > span { min-width: 0; overflow-wrap: anywhere; }
.ringkas-baris b {
  color: var(--navy);
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.ringkas-baris.total {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--garis);
  font-size: 15px;
}
.ringkas-baris.total b { font-family: var(--serif); font-size: 21px; color: var(--oranye); }

/* Rincian kecil di bawah baris ongkir: nama kurir + estimasi. Dulu menempel
   di baris yang sama sehingga teksnya meluber keluar kartu. */
.ringkas-rinci {
  margin: -2px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--redup);
  text-align: right;
  overflow-wrap: anywhere;
}

.ringkas-item { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 0; }
.ringkas-item li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: #414B58;
  padding: 8px 0;
  border-bottom: 1px dashed var(--garis);
}
.ringkas-item li:first-child { padding-top: 0; }
.ringkas-item li:last-child { border-bottom: 0; padding-bottom: 2px; }
.ringkas-item li > span { min-width: 0; overflow-wrap: anywhere; }
.ringkas-item li b {
  color: var(--navy);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ringkas-catatan { margin: 4px 0 0; font-size: 12px; line-height: 1.55; color: var(--redup); }
.ringkas-catatan.kecil { font-size: 11px; }
.ringkas-masalah { margin: 4px 0 0; font-size: 13px; font-weight: 600; color: var(--merah); }

/* ── Checkout ────────────────────────────────────────────────────────────── */

.checkout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 28px;
  align-items: start;
}

.checkout-utama { display: flex; flex-direction: column; gap: 18px; }

.kartu-form {
  padding: 24px;
  border-radius: var(--radius);
  background: var(--putih);
  box-shadow: var(--bayang);
}
.kartu-form h2 { font-size: 18px; color: var(--navy); margin-bottom: 16px; }

.form-baris { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }
.form-baris:last-child { margin-bottom: 0; }
.form-baris.dua { flex-direction: row; gap: 14px; }
.form-baris.dua > label { flex: 1; }

.kartu-form label { display: flex; flex-direction: column; gap: 6px; }
.kartu-form label > span { font-size: 13px; font-weight: 600; color: #414B58; }
.kartu-form label i { color: var(--oranye); font-style: normal; }

.kartu-form input,
.kartu-form select,
.kartu-form textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--garis);
  border-radius: 10px;
  background: var(--krem);
  font-family: var(--sans);
  font-size: 14px;
  color: var(--tinta);
  resize: vertical;
}
.kartu-form input:focus,
.kartu-form select:focus,
.kartu-form textarea:focus { outline: 2px solid var(--oranye); outline-offset: 1px; background: #fff; }

.checkout-ringkas { position: sticky; top: 92px; }

/* ── Sukses & bayar ──────────────────────────────────────────────────────── */

.sukses {
  max-width: 680px;
  margin: 0 auto;
  padding: 36px 32px;
  border-radius: 20px;
  background: var(--putih);
  box-shadow: var(--bayang);
}

.sukses-cap {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hijau);
}

.sukses-nomor {
  font-family: var(--serif);
  font-size: clamp(26px, 4vw, 36px);
  color: var(--navy);
  letter-spacing: .01em;
}

.sukses-teks { margin: 16px 0 0; font-size: 14px; line-height: 1.7; color: #414B58; }

.bayar {
  margin-top: 26px;
  padding: 22px;
  border-radius: var(--radius);
  background: var(--navy);
  color: #fff;
}
.bayar h2 { font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #A9BDD4; margin-bottom: 12px; }
.bayar-bank { margin: 0; font-size: 15px; font-weight: 600; color: #fff; }
.bayar-rek { margin: 6px 0 0; font-family: var(--serif); font-size: 30px; font-weight: 700; letter-spacing: .02em; color: #fff; }
.bayar-nama { margin: 4px 0 0; font-size: 13px; color: #A9BDD4; }
.bayar-total { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.16); font-size: 14px; color: #D6E1EC; }
.bayar-total b { font-family: var(--serif); font-size: 24px; color: #fff; }
.bayar-catatan { margin: 10px 0 0; font-size: 12px; line-height: 1.6; color: #A9BDD4; }
.bayar-catatan b { color: var(--oranye); }

.sukses-sub { margin: 28px 0 12px; font-size: 18px; color: var(--navy); }

.sukses-aksi { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* ── Lacak ───────────────────────────────────────────────────────────────── */

.lacak-form {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 14px;
  align-items: end;
  padding: 22px;
  border-radius: var(--radius);
  background: var(--putih);
  box-shadow: var(--bayang);
  margin-bottom: 24px;
}
.lacak-form label { display: flex; flex-direction: column; gap: 6px; }
.lacak-form label > span { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--redup); }
.lacak-form input {
  padding: 11px 14px;
  border: 1px solid var(--garis);
  border-radius: 10px;
  background: var(--krem);
  font-family: var(--sans);
  font-size: 14px;
}
.lacak-form input:focus { outline: 2px solid var(--oranye); outline-offset: 1px; background: #fff; }

.lacak-hasil {
  padding: 24px;
  border-radius: var(--radius);
  background: var(--putih);
  box-shadow: var(--bayang);
}

.lacak-kepala {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--garis);
}
.lacak-kepala div { display: flex; flex-direction: column; gap: 3px; }
.lacak-kepala b { font-family: var(--serif); font-size: 20px; color: var(--navy); }
.lacak-kepala span { font-size: 12px; color: var(--redup); }

.status {
  padding: 6px 16px;
  border-radius: var(--radius-k);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.status-menunggu { background: #FDF0DC; color: #9A6410; }
.status-dibayar  { background: #E8F0FB; color: #1B4F8F; }
.status-dikirim  { background: #E8F5EC; color: var(--hijau); }
.status-selesai  { background: #E3F0E8; color: #14603A; }
.status-batal    { background: #FDECEA; color: var(--merah); }

/* ── Kaki ────────────────────────────────────────────────────────────────── */

.kaki {
  margin-top: 64px;
  background: var(--navy);
  color: #C6D4E2;
  padding: 52px 0 0;
}

.kaki-isi {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
}

.kaki-kolom { display: flex; flex-direction: column; gap: 6px; }
.kaki-kolom b { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; margin-bottom: 4px; }
.kaki-merek { font-family: var(--serif); font-size: 21px; letter-spacing: -.01em; text-transform: none; }
.kaki-kolom p { margin: 0; font-size: 13px; line-height: 1.65; max-width: 34ch; }
.kaki-kolom a:hover { color: var(--oranye); }

.kaki-bawah {
  padding: 18px 24px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: 12px;
  color: #8FA5BC;
}

/* ── Layar sedang & HP ───────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .grid-buku { grid-template-columns: repeat(3, 1fr); }
  .hero-isi { grid-template-columns: 1fr; gap: 36px; }
  .hero-kanan { order: -1; }
  .hero-tumpuk { height: 330px; max-width: 260px; }
  .tumpuk-belakang, .tumpuk-utama { width: 162px; height: 270px; margin-left: -81px; }
  .tumpuk-utama .sampul-judul { font-size: 17px; }
  .detail { grid-template-columns: 260px 1fr; gap: 32px; }
  .keranjang, .checkout { grid-template-columns: 1fr; }
  .checkout-ringkas { position: static; }
}

@media (max-width: 860px) {
  /* Jarak tepi kiri-kanan. Tanpa ini kartu paling kiri/kanan menempel ke
     tepi layar HP (laporan Abi Fitrah, 4 Nov 2026). */
  .wadah { padding: 0 20px; }
  .kepala-isi { height: 64px; gap: 12px; }
  .nav { display: none; }
  .keranjang-tombol { margin-left: auto; padding: 9px 16px; }
  .merek-teks { font-size: 17px; }
  .merek-logo { height: 23px; }

  .hero { padding: 40px 0 96px; }
  .hero-judul { font-size: clamp(30px, 8vw, 40px); }

  .cari-melayang { margin-top: -40px; padding: 16px; border-radius: 14px; }
  .cari-baris { grid-template-columns: 1fr; gap: 12px; }

  .grid-buku { grid-template-columns: repeat(2, 1fr); gap: 14px; }

  /* Kartu 2 kolom: harga di atas, tombol selebar kartu di bawahnya —
     tombol tidak lagi mepet/terpotong di tepi kanan. */
  .kartu-isi { padding: 12px 12px 14px; }
  .kartu-bawah { flex-direction: column; align-items: stretch; gap: 8px; }
  .kartu-bawah form { width: 100%; }
  .kartu-tombol { width: 100%; padding: 9px 10px; font-size: 12px; }
  /* Jeda dipadatkan (Abi: "kebanyakan paddingnya") tapi jarak tepi tetap. */
  .wadah.bagian { padding: 28px 20px; }
  .wadah.bagian.atas { padding-top: 22px; }

  .saring { grid-template-columns: 1fr; }

  .detail { grid-template-columns: 1fr; gap: 24px; }
  .detail-kiri { max-width: 240px; margin: 0 auto; }
  .detail-beli { flex-direction: column; align-items: stretch; }
  .qty-field input { width: 100%; }

  .keranjang-baris { grid-template-columns: 56px 1fr; gap: 12px; padding: 12px; }
  .keranjang-sampul { width: 54px; height: 90px; }
  .keranjang-atur { grid-column: 1 / -1; justify-content: space-between; }
  .keranjang-subtotal { grid-column: 1 / -1; text-align: right; font-size: 15px; }

  .lacak-form { grid-template-columns: 1fr; }
  .form-baris.dua { flex-direction: column; }

  .kaki-isi { grid-template-columns: 1fr; gap: 28px; }
  .sukses { padding: 24px 20px; }
}

@media (max-width: 420px) {
  /* HP sempit: 16px terasa mepet, dinaikkan sedikit. */
  .wadah { padding: 0 18px; }
  .wadah.bagian { padding: 26px 18px; }
  .wadah.bagian.atas { padding-top: 20px; }
  /* Dulu 1 kolom + sampul 16:10 (mendatar) — sampul buku jadi terpotong
     parah. Sekarang 2 kolom dengan bingkai 1:1, sampul tampil utuh. */
  .grid-buku { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}


/* ── Tema dari panel Data Toko ─────────────────────────────────────────────
   Warna & huruf datang dari `:root` yang disuntik toko.php. Aturan di bawah
   hanya memastikan elemen yang dulu mengunci warna sendiri ikut berubah. */

.kepala { background: var(--kepala-isi, rgba(251, 246, 239, .92)); }

.kepala .merek-teks,
.kepala .nav a { color: var(--kepala-teks, var(--navy)); }
.kepala .nav a:hover { background: rgba(0, 0, 0, .06); }
.kepala .nav a.on {
  background: var(--kepala-teks, var(--navy));
  color: var(--kepala-latar, var(--krem));
}
.kepala .merek-tanda { background: var(--kepala-teks, var(--navy)); }

/* ── Harga coret ─────────────────────────────────────────────────────────── */

.kartu-harga-kotak { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }

.kartu-coret {
  font-size: 12.5px;
  color: var(--redup);
  text-decoration: line-through;
}

.detail-harga .harga-coret {
  font-size: 16px;
  font-weight: 500;
  color: var(--redup);
  text-decoration: line-through;
  margin-left: 8px;
}
.detail-harga .harga-hemat {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: var(--radius-k);
  background: var(--oranye);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  vertical-align: 2px;
}

/* ── Sinopsis berformat (dari editor Data Toko) ──────────────────────────── */

.sinopsis-isi { font-size: 15px; line-height: 1.75; color: var(--tinta); }
.sinopsis-isi p { margin: 0 0 13px; }
.sinopsis-isi h2 { font-family: var(--serif); font-size: 19px; margin: 20px 0 8px; }
.sinopsis-isi h3 { font-family: var(--serif); font-size: 16.5px; margin: 18px 0 6px; }
.sinopsis-isi ul, .sinopsis-isi ol { margin: 0 0 13px; padding-left: 22px; }
.sinopsis-isi li { margin-bottom: 5px; }
.sinopsis-isi blockquote {
  margin: 0 0 13px;
  padding: 10px 16px;
  border-left: 3px solid var(--oranye);
  background: var(--krem-tua);
  color: var(--tinta);
  font-style: italic;
}
.sinopsis-isi a { color: var(--oranye-tua); text-decoration: underline; }
.sinopsis-isi strong, .sinopsis-isi b { font-weight: 700; }

/* ── Cari daerah & pilih kurir (checkout Biteship) ─────────────────────────
   Daftar hasil tampil sebagai baris yang bisa diklik — bukan datalist bawaan
   browser yang tidak kelihatan di HP. */
.bantuan-kecil {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--redup);
}

.label-kurir {
  display: block;
  font-weight: 700;
  font-size: 13px;
  color: var(--tinta);
  margin-bottom: 8px;
}
.label-kurir i { color: var(--oranye); font-style: normal; }

.daftar-daerah {
  list-style: none;
  margin: 8px 0 0;
  padding: 6px;
  border: 1px solid var(--garis);
  border-radius: 12px;
  background: var(--putih);
  max-height: 268px;
  overflow-y: auto;
  box-shadow: 0 10px 26px rgba(11, 32, 62, .08);
}

.daftar-daerah li {
  padding: 9px 11px;
  border-radius: 9px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.daftar-daerah li b {
  font-size: 14px;
  font-weight: 600;
  color: var(--tinta);
  line-height: 1.35;
}
.daftar-daerah li span { font-size: 12px; color: var(--redup); }
.daftar-daerah li:hover,
.daftar-daerah li:focus-visible {
  background: var(--krem-tua);
  outline: none;
}

.daftar-kurir {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Kelompok kurir (Dewi 27 Okt 2026) ───────────────────────────────────────
   Satu kurir = satu kartu, layanannya jadi sub di dalamnya. Daftar 20 baris
   jadi 4 baris kurir yang bisa dibuka — layar HP tidak lagi kepanjangan. */
.kurir-grup {
  border: 1.5px solid var(--garis);
  border-radius: 12px;
  background: var(--putih);
  overflow: hidden;
  transition: border-color .15s, background .15s;
}
.kurir-grup.terbuka { border-color: #d9e0e8; }
.kurir-grup.dipilih-grup {
  border-color: var(--oranye);
  background: #FFFBF8;
}

.kurir-kepala {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.kurir-kepala:hover { background: #FAFBFC; }
.kurir-kepala:focus-visible { outline: 2px solid var(--oranye); outline-offset: -2px; }

.kurir-kepala-teks { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.kurir-kepala-teks b { font-size: 14px; color: var(--tinta); }
.kurir-kepala-teks i {
  font-style: normal;
  font-size: 12px;
  color: var(--redup);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kurir-kepala-harga {
  font-weight: 700;
  color: var(--navy);
  font-size: 14px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.kurir-grup.dipilih-grup .kurir-kepala-harga { color: var(--oranye); }
.kurir-kepala-panah {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: var(--redup);
  transition: transform .2s ease;
}
.kurir-kepala-panah svg { width: 16px; height: 16px; }
.kurir-grup.terbuka .kurir-kepala-panah { transform: rotate(180deg); }

.kurir-layanan {
  list-style: none;
  margin: 0;
  padding: 0 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--garis);
  padding-top: 10px;
}

/* WAJIB: `display: flex` di atas mengalahkan aturan bawaan [hidden], sehingga
   sub-layanan yang seharusnya tertutup tetap tampil — daftar jadi 20 baris
   panjang. Aturan ini mengembalikan fungsi buka/tutup (Dewi, 27 Okt 2026). */
.kurir-layanan[hidden] { display: none; }

.kurir-baris {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "nama harga" "estimasi estimasi";
  gap: 2px 10px;
  padding: 12px 14px;
  border: 1.5px solid var(--garis);
  border-radius: 12px;
  background: var(--putih);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.kurir-baris:hover { border-color: var(--oranye); }
.kurir-baris.dipilih {
  border-color: var(--oranye);
  background: #FFF6F0;
  box-shadow: 0 0 0 1px var(--oranye) inset;
}
.kurir-nama { grid-area: nama; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.kurir-nama b { font-size: 14px; color: var(--tinta); }
.kurir-nama i { font-style: normal; font-size: 12.5px; color: var(--redup); }
.kurir-harga { grid-area: harga; font-weight: 700; color: var(--navy); font-size: 14.5px; }
.kurir-estimasi { grid-area: estimasi; font-size: 12px; color: var(--redup); }

.kurir-kosong {
  padding: 12px 14px;
  border: 1px dashed var(--garis);
  border-radius: 12px;
  font-size: 13px;
  color: var(--redup);
  background: var(--krem);
}

@media (max-width: 560px) {
  .kurir-baris { padding: 11px 12px; }
  .daftar-daerah { max-height: 232px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   LANDING PAGE PROMOSI  (menu Landing Page, alamat /<slug>)
   Susunan: gambar kiri, penawaran kanan. Di HP jadi satu kolom dengan gambar
   di atas. Tombol beli sengaja besar dan menempel di kanan — pembaca harus
   langsung tahu ke mana harus menekan.
   ══════════════════════════════════════════════════════════════════════════ */

.lp {
  padding: 40px 0 56px;
  background: var(--putih);
}

.lp-dalam {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}

.lp-kiri { position: relative; }

.lp-foto {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(20, 40, 60, .16);
}

.lp-kanan { min-width: 0; }

/* Tanpa gambar sampul: satu kolom TERPUSAT, selebar kolom baca. Kalau
   dibiarkan rata kiri selebar 720px di layar 1280px, separuh kanan halaman
   kosong menganggur dan halaman terlihat belum jadi. Terpusat terbaca sebagai
   pilihan desain, bukan kekurangan. */
.lp.lp-tanpa-foto .lp-dalam {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  justify-items: center;
}
.lp.lp-tanpa-foto .lp-kanan { max-width: 720px; width: 100%; }
.lp.lp-tanpa-foto .lp-isi > * { margin-left: auto; margin-right: auto; }

.lp-judul {
  font-family: var(--serif);
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.18;
  color: var(--navy);
  margin: 0 0 12px;
}

.lp-sub {
  font-size: 16px;
  line-height: 1.6;
  color: var(--redup);
  margin: 0 0 20px;
}

.lp-harga {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 22px;
}

.lp-harga-utama {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

.lp-harga-coret {
  font-size: 17px;
  color: var(--redup);
}

.lp-harga-hemat {
  font-size: 12px;
  font-weight: 700;
  color: #0F7B4F;
  background: #E7F6EE;
  border-radius: 999px;
  padding: 4px 10px;
}

/* Tombol beli: satu baris, boleh membungkus di layar sempit. */
.lp-tombol {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 24px;
}

.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 12px 22px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  border: 1.5px solid var(--navy);
  color: var(--navy);
  background: transparent;
  transition: transform .12s ease, filter .15s ease, background .15s ease;
}

.lp-btn:hover { transform: translateY(-1px); }

/* Tombol utama: warna kepala toko (navy) — paling menonjol. */
.lp-btn-utama {
  background: var(--navy);
  color: #fff;
}

.lp-btn-shopee { border-color: #EE4D2D; color: #EE4D2D; }
.lp-btn-shopee.lp-btn-utama { background: #EE4D2D; border-color: #EE4D2D; color: #fff; }

.lp-btn-tokopedia { border-color: #42B549; color: #2F8F36; }
.lp-btn-tokopedia.lp-btn-utama { background: #42B549; border-color: #42B549; color: #fff; }

.lp-btn-wa { border-color: #25D366; color: #128C7E; }
.lp-btn-wa.lp-btn-utama { background: #25D366; border-color: #25D366; color: #0B3B33; }

/* Poin keunggulan: centang hijau, bukan bullet biasa. */
.lp-poin {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.lp-poin li {
  position: relative;
  padding-left: 30px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--tinta);
}

.lp-poin li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #E7F6EE;
}

.lp-poin li::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 8px;
  width: 6px;
  height: 10px;
  border-right: 2px solid #0F7B4F;
  border-bottom: 2px solid #0F7B4F;
  transform: rotate(45deg);
}

/* Isi panjang: nyaman dibaca, maksimal selebar kolom baca. */
.lp-isi {
  margin-top: 44px;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--tinta);
}

/* Lebar baca dibatasi di isinya, BUKAN di wadahnya — kalau di wadah, seluruh
   blok terpusat dan tepi kirinya lepas dari judul di atasnya. */
.lp-isi > * { max-width: 720px; }

.lp-isi p { margin: 0 0 16px; }
.lp-isi h3, .lp-isi h4 { color: var(--navy); margin: 26px 0 10px; }
.lp-isi ul, .lp-isi ol { margin: 0 0 16px; padding-left: 22px; }
.lp-isi li { margin-bottom: 6px; }

/* Ajakan terakhir — untuk pembaca yang menggulir sampai bawah. */
.lp-ajakan {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--garis);
  text-align: center;
}

.lp-ajakan-teks {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--navy);
  margin: 0 0 16px;
}

.lp-ajakan .lp-tombol { justify-content: center; margin-bottom: 0; }

@media (max-width: 860px) {
  .lp { padding: 26px 0 40px; }
  .lp-dalam {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .lp-kiri { max-width: 300px; margin: 0 auto; }
  .lp-judul { font-size: clamp(24px, 6.4vw, 30px); }
  .lp-sub { font-size: 14.5px; margin-bottom: 16px; }
  .lp-harga { margin-bottom: 18px; }
  .lp-tombol { flex-direction: column; }
  .lp-btn { width: 100%; }
  .lp-isi { margin-top: 30px; font-size: 15px; }
  .lp-ajakan { margin-top: 30px; padding-top: 24px; }
}

/* ── Kepala toko di HP sempit (≤ 480px) ────────────────────────────────────
   Saat pembeli sudah masuk, kepala memuat: logo + lencana + nama + "Keluar"
   + tombol Keranjang. Di 390px deretan itu melebihi layar dan seluruh halaman
   ikut melebar (terukur 10 Nov 2026: scrollWidth 520 vs 390). Yang dipangkas
   hanya LENCANA level — ada penggantinya di kartu member. Nama dan "Keluar"
   TETAP tampil (arahan Abi Fitrah, 10 Nov 2026). */
@media (max-width: 480px) {
  .kepala-aksi { min-width: 0; }
  .akun-kotak { max-width: none; min-width: 0; }
  .akun-lencana { display: none; }
  .akun-nama { max-width: 84px; }
  .akun-keluar { flex: 0 0 auto; }
  .keranjang-tombol { flex-shrink: 0; }
}

/* ── Checkout: identitas dari akun member (10 Nov 2026) ────────────────── */
.penerima-akun {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--garis, #E4E7EC);
  border-radius: 10px;
  background: #FAFAF8;
}
.penerima-akun div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.penerima-akun b { font-size: 14.5px; }
.penerima-akun span { font-size: 12.5px; color: #667085; overflow-wrap: anywhere; }
.penerima-akun a {
  flex: 0 0 auto;
  font-size: 12.5px;
  font-weight: 600;
  color: #0B203E;
  text-decoration: none;
  white-space: nowrap;
}

/* Harga 0 ditulis "Gratis", bukan "Rp 0" (arahan Abi Fitrah, 10 Nov 2026). */
.detail-gratis {
  color: #067647;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.2px;
}