/* BabyBites App v1.0.0 — layar aplikasi (memakai token warna & huruf dari tema BabyBites). */
.bb-app { padding-bottom: 26px; }
.bb-galat { margin: 10px 16px 0; color: var(--merah); font-size: 13px; font-weight: 600; text-align: center; }
.bb-catatan { margin: 12px 14px 0; padding: 10px 12px; border-radius: 12px; background: #fff6e2; color: #6b4a00; font-size: 12.5px; line-height: 1.4; }
.bb-catatan--kecil { margin: 10px 0 0; font-size: 11.5px; }
.bb-tautan { background: none; border: 0; color: var(--biru); font-size: 14px; text-decoration: underline; cursor: pointer; padding: 6px; }
.bb-kosong { padding: 22px 18px; text-align: center; margin-top: 18px; }
.bb-kosong h2 { font-size: 24px; margin-bottom: 8px; }
.bb-kosong p { color: var(--biru); font-size: 13.5px; margin: 6px 0 14px; }
.bb-nonaktif { opacity: .38; filter: grayscale(.8); pointer-events: none; }
.bb-tombol--garis { background: #fff; color: var(--merah); border: 1.6px solid var(--merah); box-shadow: none; }
.bb-tombol--navy { color: var(--navy); border-color: var(--navy); }
.bb-tombol--besar { min-height: 56px; font-size: 25px; }
.bb-tombol--kecil { min-height: 34px; font-size: 15px; padding: 6px 16px; }
.bb-tombol--kecil svg { width: 16px; height: 16px; }
.bb-tombol--ikon { justify-content: space-between; padding: 10px 20px; }
.bb-tombol--ikon span { flex: 1; text-align: center; }

/* Radio/centang bulat */
.bb-radio { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 1.6px solid #c9c9c9; background: #fff; display: grid; place-items: center; color: transparent; }
input:checked + .bb-radio, input:checked ~ .bb-radio { background: var(--hijau); border-color: var(--hijau); color: #fff; }
.bb-opsi input, .bb-chip input, .bb-kotak__item input, .bb-kirim__opsi input, .bb-paket__item input { position: absolute; opacity: 0; pointer-events: none; }

/* ---------- KUIS ---------- */
.bb-hero--kuis { min-height: 240px; padding-top: 30px; }
.bb-hero--kuis .bb-hero__maskot { width: 50%; top: 0; }
.bb-hero--kuis .bb-hero__judul { font-size: 37px; }
.bb-langkah { list-style: none; display: flex; align-items: center; margin: 14px 0 0; padding: 0; width: 190px; }
.bb-langkah li { width: 26px; height: 26px; flex: none; border-radius: 50%; background: #a9dca9; color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 13px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .85); }
.bb-langkah li + li { margin-left: 34px; position: relative; }
.bb-langkah li + li::before { content: ""; position: absolute; right: 30px; top: 11px; width: 30px; height: 3px; background: #c4e6c2; border-radius: 2px; }
.bb-langkah li.aktif, .bb-langkah li.selesai { background: var(--hijau); }
.bb-langkah li.selesai { background: #a9dca9; }
.bb-langkah__teks { font-size: 12.5px; color: var(--biru); margin: 6px 0 0 34px; }
.bb-kuis { position: relative; z-index: 3; margin-top: -8px; padding: 18px 14px 18px; }
.bb-kuis fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.bb-tanya { display: grid; grid-template-columns: 54px 1fr; gap: 10px; align-items: start; margin-bottom: 14px; }
.bb-tanya__ikon { width: 54px; height: 54px; border-radius: 50%; }
.bb-tanya__judul { font-family: var(--serif); font-size: 24px; line-height: 1.05; padding: 0; color: var(--navy); }
.bb-tanya__sub { margin-top: 6px; color: var(--biru); font-size: 13px; }
.bb-isian { width: 100%; height: 48px; border: 1.4px solid #e5dccd; border-radius: 12px; background: #fff; padding: 0 14px; font: 15px var(--sans); color: var(--navy); }
.bb-isian:focus { outline: 2px solid var(--hijau-garis); border-color: var(--hijau); }
.bb-isian::placeholder { color: #9aa3b1; }
.bb-dua { display: grid; grid-template-columns: 1fr 1.45fr; gap: 10px; margin-top: 18px; }
.bb-dua .bb-tombol { min-height: 46px; font-size: 21px; }
.bb-dua--kecil { display: block; text-align: center; margin-top: 8px; }
.bb-pilihan { display: grid; gap: 8px; }
.bb-opsi { position: relative; display: flex; align-items: center; gap: 12px; padding: 0 14px; min-height: 46px; border: 1.3px solid #ece3d6; border-radius: 12px; background: #fff; font-size: 15px; cursor: pointer; }
.bb-opsi:has(input:checked) { border-color: var(--hijau-garis); background: #f2faef; }
.bb-chip-wadah { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.bb-chip { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 14px; border: 1.3px solid #e6ddd0; border-radius: 999px; background: #fff; font-size: 13.5px; cursor: pointer; }
.bb-chip .bb-radio { display: none; }
.bb-chip:has(input:checked) { border-color: var(--hijau); background: #f0f9ec; color: var(--hijau-tua); }
.bb-chip:has(input:checked) .bb-radio { display: grid; width: 20px; height: 20px; }
.bb-chip--tidak { font-weight: 500; }
.bb-kuis .bb-tombol--penuh { width: 100%; margin: 22px 0 0; }

/* ---------- HASIL ---------- */
.bb-pesta { position: relative; padding: 10px 12px 14px; text-align: center; background:
	radial-gradient(circle at 12% 18%, rgba(255, 215, 90, .5) 0 2px, transparent 3px),
	radial-gradient(circle at 88% 12%, rgba(255, 215, 90, .5) 0 2px, transparent 3px),
	linear-gradient(180deg, rgba(255, 245, 222, .9), rgba(253, 247, 238, 0)); }
.bb-pesta__hiasan { position: absolute; top: 0; width: 26%; z-index: 0; pointer-events: none; }
.bb-pesta__hiasan--kiri { left: 0; }
.bb-pesta__hiasan--kanan { right: 0; }
.bb-pesta > *:not(.bb-pesta__hiasan) { position: relative; z-index: 1; }
.bb-pesta::before, .bb-pesta::after { display: none; content: "★"; position: absolute; color: #f6c330; font-size: 20px; top: 70px; left: 14px; text-shadow: 0 2px 4px rgba(200, 140, 0, .3); }
.bb-pesta::after { left: auto; right: 16px; top: 92px; font-size: 24px; }
.bb-pesta__logo img { width: 104px; margin: 0 auto; }
.bb-pesta__judul { margin-top: 6px; font-size: 31px; color: var(--hijau-tua); line-height: 1.02; }
.bb-pesta__judul span { color: var(--merah); }
.bb-pesta__sub { margin-top: 6px; color: var(--biru); font-size: 13.5px; }
.bb-pesta__sub small { font-size: 11.5px; }
.bb-pesta__isi { display: grid; grid-template-columns: 36% 1fr; align-items: end; gap: 0; margin-top: 8px; text-align: left; }
.bb-pesta__maskot { width: 118%; max-width: none; margin-right: -18%; position: relative; z-index: 0; }
.bb-pesta__isi .bb-gratis { z-index: 1; }
.bb-gratis { position: relative; background: linear-gradient(160deg, #fffaf0, #fff3dc); border: 1.5px solid #f3d27d; border-radius: 16px; padding: 10px 10px 12px; box-shadow: 0 6px 18px rgba(212, 160, 30, .18); min-height: 150px; }
.bb-gratis__lencana { display: inline-block; background: linear-gradient(180deg, #fde27a, #f6b821); color: var(--hijau-tua); font-family: var(--serif); font-size: 13px; padding: 2px 10px 2px 22px; border-radius: 999px; position: relative; }
.bb-gratis__lencana::before { content: ""; position: absolute; left: 7px; top: 6px; width: 11px; height: 11px; background: var(--hijau); border-radius: 0 60% 0 60%; }
.bb-gratis__judul { margin-top: 6px; font-size: 16.5px; max-width: 58%; }
.bb-gratis__menu { margin-top: 4px; font-family: var(--serif); font-size: 13.5px; line-height: 1.1; max-width: 58%; }
.bb-gratis__bahan { margin-top: 4px; font-size: 10.5px; color: var(--navy); max-width: 58%; line-height: 1.3; }
.bb-gratis .bb-tombol--kecil { margin-top: 8px; min-height: 30px; font-size: 13.5px; padding: 4px 12px; }
.bb-gratis__foto { position: absolute; right: 6px; top: 34px; width: 44%; border-radius: 50%; }
.bb-judul-bagian { position: relative; font-size: 24px; text-align: center; }
.bb-judul-bagian .bb-kilau--kiri { left: 34px; top: -4px; }
.bb-judul-bagian .bb-kilau--kanan { position: absolute; right: 34px; bottom: auto; top: -4px; }
.bb-sub-bagian { text-align: center; color: var(--biru); font-size: 13px; margin-top: 2px; }
.bb-paket { padding: 14px 10px 0; scroll-margin-top: 16px; }
.bb-paket__daftar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 16px; }
.bb-paket__item { position: relative; display: flex; align-items: center; gap: 5px; padding: 10px 6px; background: var(--kartu); border: 1.5px solid #f2e9dc; border-radius: 12px; box-shadow: var(--bayang); cursor: pointer; }
.bb-paket__item img { width: 32px; height: 32px; border-radius: 50%; flex: none; }
.bb-paket__teks b { display: block; font-family: var(--serif); font-weight: 400; font-size: 13px; }
.bb-paket__teks strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 16px; color: var(--merah); letter-spacing: -.2px; }
.bb-paket__item:has(input:checked) { border-color: #ef7c84; background: #fff3f1; box-shadow: 0 0 0 2px rgba(239, 124, 132, .25), var(--bayang); }
.bb-paket__item .bb-hemat { right: 6px; top: -13px; font-size: 11px; padding: 1px 8px; }
.bb-contoh { margin-top: 14px; padding: 10px 10px 12px; }
.bb-contoh__judul { display: flex; align-items: center; gap: 8px; font-size: 14.5px; margin-bottom: 8px; }
.bb-contoh__judul img { width: 30px; border-radius: 50%; }
.bb-contoh__gambar { border-radius: 10px; width: 100%; }
.bb-percaya { list-style: none; margin: 16px 10px 0; padding: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.bb-percaya li { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--navy); font-family: var(--serif); line-height: 1.15; }
.bb-percaya li:nth-child(2) { padding: 0 10px; border-left: 1.5px solid #f0c75c; border-right: 1.5px solid #f0c75c; }
.bb-percaya img { width: 38px; border-radius: 50%; }
.bb-percaya li:nth-child(2) img { width: 34px; border-radius: 0; }

/* ---------- RESEP ---------- */
.bb-atas-kembali { display: none; }
.bb-resep-hero { position: relative; padding: 18px 16px 0 18px; min-height: 290px; }
.bb-resep-hero .bb-hero__maskot { width: 42%; top: 4px; }
.bb-lencana--daun { background: #dff1d9; color: var(--hijau-tua); font-family: var(--serif); font-size: 15px; padding: 4px 14px 4px 30px; position: relative; }
.bb-lencana--daun::before { content: ""; position: absolute; left: 10px; top: 8px; width: 13px; height: 13px; background: var(--hijau); border-radius: 0 60% 0 60%; }
.bb-resep-hero .bb-hero__judul { font-size: 32px; max-width: 62%; position: relative; z-index: 2; }
.bb-resep-foto { margin: 8px auto 0; width: 62%; position: relative; z-index: 2; }
.bb-resep-foto img { width: 100%; border-radius: 50%; box-shadow: 0 10px 24px rgba(120, 80, 30, .18); }
.bb-resep-foto figcaption { text-align: center; font-size: 10px; color: #9a8b74; margin-top: 4px; }
.bb-info { list-style: none; display: grid; grid-template-columns: 1fr 1.2fr .95fr; gap: 6px; margin: 10px 10px 0; padding: 0; }
.bb-info li { display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--kartu); border-radius: 999px; padding: 9px 6px; box-shadow: var(--bayang); font-family: var(--serif); font-size: 15px; color: var(--merah); }
.bb-info li b { font-weight: 400; color: var(--navy); }
.bb-info--jam { color: #f0a500 !important; }
.bb-bahan { display: grid; grid-template-columns: 46% 1fr; align-items: center; padding: 10px 14px; margin-top: 10px; }
.bb-bahan__kiri { display: flex; align-items: center; gap: 8px; border-right: 1.5px solid #f2c96a; }
.bb-bahan__kiri img { width: 58px; }
.bb-bahan__kiri h2 { font-size: 23px; }
.bb-bahan__daftar { list-style: none; margin: 0; padding: 0 0 0 14px; font-family: var(--serif); font-size: 14.5px; line-height: 1.25; }
.bb-bahan__daftar li { position: relative; padding-left: 14px; }
.bb-bahan__daftar li::before { content: ""; position: absolute; left: 0; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--merah); }
.bb-cara { padding: 12px 12px 14px; margin-top: 10px; }
.bb-cara__judul { display: flex; align-items: center; gap: 8px; font-size: 24px; margin-bottom: 8px; }
.bb-cara__judul img { width: 56px; }
.bb-cara__daftar { list-style: none; counter-reset: c; margin: 0; padding: 0; display: grid; gap: 6px; }
.bb-cara__daftar li { counter-increment: c; position: relative; padding: 8px 10px 8px 46px; background: #fff6f2; border-radius: 999px; font-family: var(--serif); font-size: 14px; line-height: 1.2; min-height: 36px; display: flex; align-items: center; }
.bb-cara__daftar li::before { content: counter(c); position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; background: #fbd9d0; color: #a3141d; display: grid; place-items: center; font-size: 15px; }
.bb-promo { display: grid; grid-template-columns: 76px 1fr; gap: 10px; align-items: center; padding: 10px 14px; margin-top: 10px; text-decoration: none; }
.bb-promo img { width: 62px; margin-left: 14px; }
.bb-promo span { border-left: 1.5px solid #f2c96a; padding-left: 14px; font-family: var(--serif); }
.bb-promo b { display: block; font-weight: 400; font-size: 17px; }
.bb-promo strong { display: block; font-weight: 400; font-size: 17px; color: var(--merah); }

/* ---------- PEMBAYARAN ---------- */
.bb-hero--bayar { min-height: 176px; }
.bb-hero--bayar .bb-hero__judul { font-size: 37px; }
.bb-ringkas { padding: 10px 10px 12px; position: relative; z-index: 3; }
.bb-ringkas__cek { text-align: center; color: var(--biru); font-size: 12px; margin-bottom: 8px; }
.bb-ringkas__baris { display: grid; grid-template-columns: 82px 1fr auto; gap: 10px; align-items: center; background: #fff; border-radius: 14px; border: 1px solid #f3eadc; padding: 8px 12px 8px 6px; }
.bb-ringkas__baris img { width: 82px; }
.bb-ringkas__teks b { display: block; font-family: var(--serif); font-weight: 400; font-size: 18px; }
.bb-ringkas__teks a { display: block; color: var(--merah); font-family: var(--serif); font-size: 15px; margin: 2px 0; }
.bb-ringkas__teks span { font-size: 13.5px; color: var(--navy); }
.bb-ringkas__teks em { font-style: normal; color: var(--biru); font-weight: 600; }
.bb-ringkas__harga { font-family: var(--serif); font-weight: 400; color: var(--merah); font-size: 23px; }
.bb-kirim { padding: 12px 10px; margin-top: 10px; }
.bb-kirim__judul { display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: center; font-size: 18.5px; margin: 0 4px 12px; }
.bb-kirim__judul img { width: 52px; border-radius: 50%; }
.bb-kirim__judul small { display: block; font-family: var(--sans); font-size: 12.5px; color: var(--biru); margin-top: 4px; }
.bb-kirim__pilihan { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bb-kirim__opsi { position: relative; display: grid; grid-template-columns: 40px 1fr 22px; gap: 6px; align-items: center; padding: 10px 8px; border: 1.3px solid #ece3d6; border-radius: 12px; background: #fff; font-size: 13px; cursor: pointer; min-height: 70px; }
.bb-kirim__opsi img { width: 40px; border-radius: 50%; }
.bb-kirim__opsi:has(input:checked) { border-color: var(--hijau-garis); background: #f2faef; }
.bb-simulasi { padding: 12px; margin-bottom: 10px; border: 2px dashed #f0a500; background: #fffaf0; position: relative; z-index: 3; }
.bb-simulasi p { font-size: 13px; }
.bb-simulasi .bb-tombol--penuh { width: 100%; margin: 10px 0 0; background: linear-gradient(180deg, #ffb933, #f08c00); font-size: 18px; }

/* ---------- SEDIKIT LAGI ---------- */
.bb-hero--sedikit { min-height: 196px; padding-top: 16px; }
.bb-hero--sedikit .bb-hero__judul { font-size: 37px; }
.bb-hero--sedikit .bb-hero__maskot { width: 44%; }
.bb-pilih { padding: 12px 10px; margin-top: 10px; position: relative; z-index: 3; }
.bb-pilih:first-of-type { margin-top: 0; }
.bb-pilih__judul { display: grid; grid-template-columns: 50px 1fr; gap: 8px; align-items: center; font-size: 21px; margin: 0 2px 10px; }
.bb-pilih__judul img { width: 48px; border-radius: 50%; }
.bb-pilih__judul small { display: block; font-family: var(--sans); font-size: 12px; color: var(--biru); margin-top: 3px; }
.bb-kotak { display: grid; gap: 6px; }
.bb-kotak--4 { grid-template-columns: repeat(4, 1fr); }
.bb-kotak__item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 8px; background: #fff; border: 1.3px solid #efe6d9; border-radius: 12px; cursor: pointer; }
.bb-kotak__item .bb-radio { position: absolute; right: 5px; top: 5px; width: 20px; height: 20px; border: 0; background: transparent; }
.bb-kotak__item:has(input:checked) { border-color: var(--hijau); background: #f3faf0; }
.bb-kotak__item:has(input:checked) .bb-radio { background: var(--hijau); }
.bb-kotak__gambar { width: 64px; height: 52px; display: grid; place-items: center; }
.bb-kotak__gambar img { max-height: 52px; width: auto; }
.bb-kotak__gambar--bulat { width: 46px; height: 46px; border-radius: 50%; background: #fbf3e6; }
.bb-kotak__gambar--bulat img { max-height: 36px; max-width: 40px; }
.bb-kotak__label { font-size: 11.5px; font-weight: 600; text-align: center; }

/* ---------- LAPORAN SIAP ---------- */
.bb-hero--sukses { min-height: 250px; padding-top: 18px; }
.bb-hero--sukses .bb-hero__maskot { width: 40%; top: 4px; }
.bb-hero--sukses .bb-hero__judul { font-size: 31px; }
.bb-cek-besar { display: block; width: 66px; height: 66px; margin: 0 0 14px 34px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #4fcb62, #1f9c3b); box-shadow: 0 6px 14px rgba(31, 156, 59, .3); position: relative; }
.bb-cek-besar::after { content: ""; position: absolute; left: 22px; top: 15px; width: 16px; height: 28px; border-right: 6px solid #fff; border-bottom: 6px solid #fff; transform: rotate(45deg); border-radius: 2px; }
.bb-terima { font-family: var(--serif); font-size: 23px; margin-top: 6px; }
.bb-aksi { padding: 0 0 4px; position: relative; z-index: 3; }
.bb-aksi .bb-tombol--penuh { margin-top: 10px; font-size: 19px; }
.bb-aksi .bb-catatan--kecil { margin: 10px 16px 0; }
.bb-sosial { margin-top: 12px; padding: 10px 10px 14px; }
.bb-judul-garis { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 22px; }
.bb-judul-garis::before, .bb-judul-garis::after { content: ""; width: 44px; height: 1.5px; background: var(--emas); }
.bb-sosial__daftar { list-style: none; display: flex; justify-content: center; gap: 22px; margin: 10px 0 0; padding: 0; }
.bb-sosial__daftar--5 { gap: 10px; justify-content: space-between; padding: 0 4px; }
.bb-sosial__daftar a, .bb-sosial__daftar button { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; color: var(--navy); font-size: 11.5px; }
.bb-sosial__daftar svg { width: 46px; height: 46px; }
.bb-salin { text-align: center; color: var(--hijau-tua); font-size: 12.5px; margin-top: 8px; }

/* ---------- LAPORAN ---------- */
.bb-layar-laporan { padding: 10px 0 30px; }
.bb-lp__alat { position: sticky; top: 0; z-index: 30; padding: 0 0 10px; background: linear-gradient(180deg, var(--krem) 70%, rgba(253, 247, 238, 0)); }
.bb-lp__alat .bb-tombol--penuh { margin-top: 6px; }
.bb-lp__status { text-align: center; font-size: 13px; color: var(--biru); margin-top: 6px; }
.bb-lp { display: grid; gap: 14px; justify-content: center; }
.bb-halaman { position: relative; width: 390px; height: 693px; overflow: hidden; background: #fffaf2 url(../img/latar-header.webp) top center / 100% auto no-repeat; box-shadow: 0 6px 22px rgba(0, 0, 0, .1); padding: 14px 16px; }
@media (max-width: 400px) { .bb-lp { transform-origin: top center; } }
.bb-lp__kepala { display: flex; justify-content: center; position: relative; }
.bb-lp__kepala img { width: 132px; }
.bb-lp__no { position: absolute; right: 0; top: 10px; font-size: 11px; color: var(--navy); }
.bb-lp__no--bawah { top: auto; bottom: 14px; right: 18px; }
.bb-lp__judul { text-align: center; font-size: 33px; color: var(--hijau-tua); margin-top: 12px; line-height: 1.02; }
.bb-lp__sub { text-align: center; font-size: 15px; color: var(--hijau-tua); margin-top: 4px; font-family: var(--serif); }
.bb-daun { display: inline-block; width: 12px; height: 12px; margin: 0 6px; background: var(--hijau); border-radius: 0 60% 0 60%; vertical-align: middle; }
.bb-daun--balik { transform: scaleX(-1); }
.bb-lp--sampul { text-align: center; padding-top: 18px; }
.bb-lp__logo-tengah { width: 140px; margin: 0 auto; }
.bb-lp__sampul-judul { font-size: 38px; color: var(--hijau-tua); margin-top: 6px; line-height: .98; }
.bb-lp__sampul-sub { font-size: 14px; margin-top: 6px; color: var(--navy); }
.bb-lp__ilustrasi { width: calc(100% + 32px); max-width: none; margin: 10px -16px 0; height: 250px; object-fit: cover; object-position: center 30%; }
.bb-lp__tiga { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: -6px; position: relative; }
.bb-lp__tiga div { background: #fffdf9; border-radius: 12px; box-shadow: var(--bayang); padding: 10px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--merah); }
.bb-lp__tiga span { color: var(--navy); font-size: 12.5px; }
.bb-lp__tiga b { font-family: var(--serif); font-weight: 400; font-size: 18px; color: var(--merah); line-height: 1.05; }
.bb-lp__halal { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; background: var(--hijau-muda); border-radius: 12px; padding: 8px; font-size: 12px; text-align: left; color: var(--hijau-tua); }
.bb-lp__halal img { width: 30px; border-radius: 50%; }
.bb-lp__ai { width: 52px; margin: 10px auto 0; }
.bb-lp__ai--kecil { width: 40px; position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); }
.bb-lp__profil { margin: 14px 0 0; background: #fffdf9; border-radius: 14px; box-shadow: var(--bayang); padding: 4px 12px; }
.bb-lp__profil div { display: grid; grid-template-columns: 40% 1fr; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid #f3e9dc; }
.bb-lp__profil div:last-child { border-bottom: 0; }
.bb-lp__profil dt { font-size: 13px; font-weight: 600; }
.bb-lp__profil dd { margin: 0; background: #fdebe5; border-radius: 10px; padding: 7px 10px; font-family: var(--serif); font-size: 15px; line-height: 1.15; }
.bb-lp__catatan { margin: 10px 0 0; padding: 0 0 0 16px; font-size: 11px; color: #5b4a2f; line-height: 1.35; }
.bb-lp__catatan li + li { margin-top: 3px; }
.bb-lp__bawah { position: absolute; left: 0; bottom: 0; width: 100%; }
.bb-lp__rencana { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.bb-lp__rencana li { display: grid; grid-template-columns: 62px 70px 1fr auto; gap: 8px; align-items: center; background: #fffdf9; border-radius: 12px; box-shadow: var(--bayang); padding: 4px 8px 4px 6px; min-height: 66px; }
.bb-lp__hari { background: linear-gradient(180deg, #f8434c, #e01f2b); color: #fff; font-family: var(--serif); font-size: 14px; border-radius: 999px; text-align: center; padding: 4px 0; }
.bb-lp__rencana img { width: 70px; height: 56px; object-fit: cover; border-radius: 10px; }
.bb-lp__rencana b { font-family: var(--serif); font-weight: 400; font-size: 14.5px; line-height: 1.1; }
.bb-lp__menit { display: flex; align-items: center; gap: 3px; font-size: 10.5px; background: #fff4e6; border-radius: 8px; padding: 4px 6px; color: var(--navy); white-space: nowrap; }
.bb-lp__menit svg { width: 15px; height: 15px; color: #f0a500; }
.bb-lp__pita { position: absolute; left: 30px; right: 30px; bottom: 16px; text-align: center; background: var(--hijau-muda); border-radius: 10px; padding: 7px; font-size: 11.5px; color: var(--hijau-tua); }
.bb-lp__resep { background: #fffdf9; border-radius: 14px; box-shadow: var(--bayang); padding: 10px 12px; margin-top: 10px; }
.bb-lp__resep h3 { font-size: 18px; color: var(--hijau-tua); }
.bb-lp__resep-hari { font-size: 11px; color: var(--biru); margin-top: 2px; }
.bb-lp__resep-bahan { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px; }
.bb-lp__resep-bahan li { font-size: 11px; background: #fdebe5; border-radius: 999px; padding: 3px 8px; }
.bb-lp__resep-langkah { margin: 8px 0 0; padding-left: 18px; font-size: 11.5px; line-height: 1.35; }
.bb-lp__belanja { list-style: none; margin: 14px 0 0; padding: 6px 14px; background: #fffdf9; border-radius: 14px; box-shadow: var(--bayang); columns: 1; }
.bb-lp__belanja li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px dashed #eadcc7; font-size: 12.5px; }
.bb-lp__belanja--padat { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
.bb-lp__belanja--padat li { font-size: 11.5px; flex-direction: column; gap: 0; }
.bb-lp__belanja li:last-child { border-bottom: 0; }
.bb-lp__belanja b { font-family: var(--serif); font-weight: 400; color: var(--merah); white-space: nowrap; }
.bb-lp--penutup .bb-lp__maskot { width: 130px; margin: 6px auto 0; }
.bb-lp__tips { margin: 8px 0 0; padding: 10px 12px 10px 28px; background: #fffdf9; border-radius: 14px; box-shadow: var(--bayang); font-size: 12px; line-height: 1.4; }
.bb-lp__tips li + li { margin-top: 5px; }
.bb-lp__situs { text-align: center; margin-top: 12px; font-family: var(--serif); font-size: 16px; color: var(--merah); }

/* v1.0.1 — layar terima kasih & menu sedang dibuat */
.bb-terima-kartu { text-align: center; padding: 22px 20px; }
.bb-terima-kartu h2 { font-family: var(--serif); font-size: 24px; color: var(--navy); margin: 8px 0 8px; font-weight: 400; }
.bb-terima-kartu p { margin: 6px 0; color: var(--teks-dukung, #145A32); font-size: 16px; line-height: 24px; font-weight: 600; }
.bb-terima-kartu b { color: var(--navy); }
.bb-terima-kartu .bb-cek-besar { display: block; margin: 0 auto; }
.bb-proses { margin: 14px 14px 0; background: #fff; border-radius: 16px; padding: 14px 16px; box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.bb-proses__batang { height: 12px; border-radius: 99px; background: #f1e6d6; overflow: hidden; }
.bb-proses__batang i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #f8434c, #e01f2b); transition: width .12s linear; }
.bb-proses__teks { margin: 8px 0 0; font-size: 15px; color: var(--teks-sekunder, #4B5D4F); font-weight: 500; }
.bb-proses__persen { font-weight: 700; color: var(--navy); }
.bb-tombol--tunggu { background: #b9b5ae !important; box-shadow: none !important; color: #fff; pointer-events: none; cursor: progress; }
.bb-putar { display: none; width: 20px; height: 20px; border: 3px solid rgba(255,255,255,.35); border-top-color: #fff; border-right-color: #fff; border-radius: 50%; flex: none; animation: bb-putar .8s linear infinite; }
.bb-tombol--tunggu .bb-putar { display: inline-block; }
.bb-tombol--tunggu .bb-putar ~ svg:first-of-type { display: none; }
.bb-putar[hidden] { display: none !important; }
@keyframes bb-putar { to { transform: rotate(360deg); } }
.bb-ubah { text-align: center; margin: 10px 0 0; }
.bb-proses-aktif .bb-sosial { opacity: .55; }

/* ---------- v1.1: 17 pertanyaan setelah bayar ---------- */
.bb-hitung { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + 58px); z-index: 20; display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 8px 14px; background: #fffaf2; border: 1.3px solid #efe6d9; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--navy); box-shadow: 0 4px 10px rgba(30, 40, 70, .06); }
.bb-hitung__batang { flex: 1; height: 8px; border-radius: 99px; background: #efe6d9; overflow: hidden; }
.bb-hitung__batang b { display: block; height: 100%; width: 0; background: var(--hijau); border-radius: 99px; transition: width .25s; }
.bb-pilih__judul--no { grid-template-columns: 44px 1fr; font-size: 19px; line-height: 1.12; }
.bb-no { width: 40px; height: 40px; border-radius: 50%; background: var(--hijau); color: #fff; display: grid; place-items: center; font: 700 16px/1 var(--sans); }
.bb-no small { display: none; }
.bb-pilih__judul--no small { color: #6b7385; font-style: normal; }
.bb-pilih__sub { margin: 12px 2px 6px; font-size: 13px; font-weight: 700; color: var(--navy); }
.bb-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.bb-chip:has(input:focus-visible) { outline: 2px solid var(--hijau-garis); outline-offset: 2px; }
.bb-chips .bb-chip { font-size: 13px; min-height: 36px; padding: 0 12px; }
.bb-isian--bawah { margin-top: 10px; }
.bb-pilih--kurang { box-shadow: 0 0 0 2px var(--merah); }
.bb-lp__profil--rapat { margin-top: 6px; padding: 2px 10px; }
.bb-lp__profil--rapat div { padding: 2px 0; gap: 6px; grid-template-columns: 34% 1fr; }
.bb-lp__profil--rapat dt { font-size: 11px; }
.bb-lp__profil--rapat dd { font-size: 11.5px; padding: 3px 7px; border-radius: 7px; line-height: 1.1; }
.bb-lp__tips-judul { margin: 6px 0 0; font-family: var(--serif); font-size: 15px; color: var(--navy); }
.bb-lp__catatan--tips { margin-top: 2px; font-size: 10px; line-height: 1.28; }
.bb-lp__pastikan { margin: 14px 0 0; padding: 12px 14px 12px 30px; background: #fffdf9; border-radius: 14px; box-shadow: var(--bayang); font-size: 12.5px; line-height: 1.4; color: var(--navy); }
.bb-lp__pastikan li + li { margin-top: 6px; }
.bb-lp__pastikan-kaki { margin: 10px 4px 0; font-size: 11.5px; line-height: 1.4; color: #5b4a2f; }

/* ---------- v1.1 Gaya Teks per halaman (spesifikasi ChatGPT, acuan lebar 390 px) ---------- */
.bb-tautan { color: var(--teks-dukung); font-weight: 600; }
.bb-kosong p { color: var(--teks-sekunder); font-weight: 500; }
[data-layar=kuis] .bb-hero__sub { font-size: 17px; line-height: 24px; }
.bb-tanya__sub { color: var(--teks-dukung); font-size: 15px; line-height: 22px; font-weight: 600; }
.bb-langkah__teks { color: var(--teks-sekunder); font-weight: 600; }
[data-layar=hasil] .bb-hero__sub, .bb-pesta__sub { color: var(--teks-hangat); font-size: 18px; line-height: 25px; font-weight: 700; }
[data-layar=sukses] .bb-hero__sub { font-size: 17px; line-height: 25px; }
.bb-sub-bagian { color: var(--teks-dukung); font-size: 15px; line-height: 23px; font-weight: 600; }
.bb-sub-bagian--hangat { color: var(--teks-hangat); font-size: 16px; line-height: 24px; }
.bb-ringkas__cek, .bb-lp__status { color: var(--teks-sekunder); font-weight: 600; }
.bb-ringkas__teks em { color: var(--teks-hangat); }
.bb-kirim__judul small, .bb-pilih__judul small, .bb-pilih__judul--no small { color: var(--teks-sekunder); font-weight: 500; font-size: 12.5px; }
.bb-lp__resep-hari { color: var(--teks-hangat); font-weight: 600; }

/* ---------- v1.1 Kuis v2 (desain ChatGPT): pita di hero, langkah di tengah, pertanyaan di tengah ---------- */
.bb-hero--kuis { min-height: 0; height: calc(min(100vw, var(--lebar)) * .66); padding-top: 34px; }
.bb-hero--kuis .bb-hero__judul { font-size: 40px; line-height: 1.02; }
.bb-pita-hero { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 14px 8px 10px; border-radius: 16px; background: rgba(255, 249, 226, .95); border: 1.3px solid #f6dc8c; box-shadow: 0 4px 12px rgba(200, 150, 40, .14); color: var(--teks-dukung); font-size: 14px; line-height: 19px; font-weight: 600; position: relative; }
.bb-pita-hero svg { flex: none; }
.bb-pita-hero::after { content: ""; position: absolute; right: -6px; bottom: -6px; width: 16px; height: 16px; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0c.6 4 3.4 7.4 8 8-4.6.6-7.4 4-8 8-.6-4-3.4-7.4-8-8 4.6-.6 7.4-4 8-8z' fill='%23f5b827'/%3E%3C/svg%3E"); }
.bb-langkah-wadah { display: flex; flex-direction: column; align-items: center; margin: 10px 0 12px; }
.bb-langkah-wadah .bb-langkah { margin: 0; width: auto; }
.bb-langkah-wadah .bb-langkah li { width: 32px; height: 32px; font-size: 15px; background: #fff; color: var(--hijau); border: 1.6px solid #9fd69b; box-shadow: none; }
.bb-langkah-wadah .bb-langkah li + li { margin-left: 50px; }
.bb-langkah-wadah .bb-langkah li + li::before { right: 33px; top: 14px; width: 48px; height: 2px; background: #9fd69b; }
.bb-langkah-wadah .bb-langkah li.aktif { background: var(--hijau); color: #fff; border-color: var(--hijau); }
.bb-langkah-wadah .bb-langkah li.selesai { background: #e8f5d8; color: var(--hijau); }
.bb-langkah-wadah .bb-langkah__teks { margin: 6px 0 0; font-size: 14px; color: var(--teks-sekunder); font-weight: 500; }
[data-layar=kuis] .bb-tanya { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
[data-layar=kuis] .bb-tanya__ikon { width: 56px; height: 56px; border-radius: 50%; background: var(--pastel); padding: 6px; }
[data-layar=kuis] .bb-tanya__judul { font-size: 27px; line-height: 1.12; }
[data-layar=kuis] .bb-tanya__sub { color: var(--teks-sekunder); font-weight: 500; font-size: 15px; margin-top: 4px; }
[data-layar=kuis] .bb-opsi { min-height: 50px; font-size: 17px; font-weight: 500; }
.bb-tombol--hijau { color: var(--hijau-tua); border-color: var(--hijau); }

/* ---------- v1.1 Hasil v2 (desain ChatGPT): judul meriah berbingkai, kartu gratis tanpa ruang kosong, lencana seimbang ---------- */
.bb-pesta__bingkai { position: relative; margin: 6px 22px 0; padding: 10px 12px 16px; border-radius: 22px; border: 2px solid #f3c74e; background: linear-gradient(#fffdf5, #fff4d6); box-shadow: 0 6px 18px rgba(212, 160, 30, .25); }
.bb-pesta__bingkai .bb-pesta__judul { margin: 0; font-size: 32px; }
.bb-pita-emas { position: absolute; left: 50%; bottom: -14px; width: 74px; height: 28px; transform: translateX(-50%); background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 28'%3E%3Cpath d='M37 12C28 2 14 0 6 6c6 2 8 8 8 14 8-6 16-8 23-8zM37 12c9-10 23-12 31-6-6 2-8 8-8 14-8-6-16-8-23-8z' fill='%23f5b827' stroke='%23d99a0b' stroke-width='1.5'/%3E%3Cpath d='M30 13l-8 14 7-3 4 4 4-13zM44 13l8 14-7-3-4 4-4-13z' fill='%23e9a514'/%3E%3Ccircle cx='37' cy='12' r='5' fill='%23fcd34d' stroke='%23d99a0b' stroke-width='1.5'/%3E%3C/svg%3E"); }
.bb-pesta__isi { align-items: start; margin-top: 22px; grid-template-columns: 38% 1fr; }
.bb-pesta__maskot { width: 116%; margin-right: -16%; margin-top: 6px; }
.bb-gratis { min-height: 0; padding: 10px 12px 12px; }
.bb-gratis__foto { position: static; float: right; width: 46%; margin: -18px -4px 2px 6px; border-radius: 50%; }
.bb-gratis__judul { max-width: none; font-size: 18px; line-height: 1.08; }
.bb-gratis__menu { display: inline-block; max-width: none; margin-top: 6px; padding: 4px 10px; border-radius: 10px; background: var(--pastel); color: var(--teks-dukung); font-size: 14px; }
.bb-gratis__bahan { clear: both; display: flex; gap: 6px; align-items: flex-start; max-width: none; margin-top: 8px; font-size: 11.5px; line-height: 1.35; color: var(--teks-dukung); }
.bb-gratis__bahan img { width: 26px; flex: none; border-radius: 50%; }
.bb-judul-bagian--daun { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 27px; }
.bb-daun-kecil--balik { transform: scaleX(-1); }
.bb-pita-kuning { text-align: center; margin: 4px 0 10px; }
.bb-pita-kuning span { display: inline-block; padding: 3px 26px; background: linear-gradient(#fde27a, #f5b827); color: var(--hijau-tua); font-size: 15px; font-weight: 700; clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%); }
.bb-percaya--v2 { grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 16px 10px 0; }
.bb-percaya--v2 li { justify-content: center; gap: 6px; min-height: 64px; padding: 8px 6px; border-radius: 18px; border: 2px solid #f6cf6a; background: linear-gradient(#fffdf6, #fff7e2); font-family: var(--sans); font-size: 12px; font-weight: 700; color: var(--teks-dukung); line-height: 1.2; }
.bb-percaya--v2 li:nth-child(2) { padding: 8px 6px; border: 2px solid #a8dc9a; border-left-width: 2px; border-right-width: 2px; background: linear-gradient(#fbfff7, #eef9e6); }
.bb-percaya--v2 li svg { flex: none; }
.bb-percaya--v2 li:nth-child(2) img { width: 34px; }
.bb-sosial-ringkas { display: grid; grid-template-columns: 1fr 1.6fr; margin: 14px 10px 0; padding: 12px 8px; border-radius: 18px; background: var(--kartu); box-shadow: var(--bayang); text-align: center; }
.bb-sosial-ringkas__kol + .bb-sosial-ringkas__kol { border-left: 1.5px solid var(--garis); }
.bb-sosial-ringkas h2 { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 18px; }
.bb-sosial-ringkas h2 svg { width: 16px; height: 14px; }
.bb-sosial-ringkas h2 svg:last-child { transform: scaleX(-1); }
.bb-sosial-ringkas .bb-sub-bagian--hangat { font-size: 12.5px; line-height: 18px; margin: 2px 0 0; }
.bb-sosial-ringkas__ikon { list-style: none; display: flex; justify-content: center; gap: 8px; margin: 8px 0 0; padding: 0; }
.bb-sosial-ringkas__ikon a, .bb-sosial-ringkas__ikon button { display: block; padding: 0; border: 0; background: none; cursor: pointer; }
.bb-sosial-ringkas__ikon svg { width: 32px; height: 32px; } /* warna asli merek (permintaan Pak Mario 8 Nov) */
.bb-sosial-ringkas .bb-salin { font-size: 11.5px; margin-top: 6px; }
.bb-gratis__foto { margin-top: -4px; }
.bb-sosial-ringkas { align-items: start; }

/* ---------- v1.1.1: maskot hero tanpa tepi kotak keras, teks hero tetap di dalam latar (permintaan Pak Mario 8 Nov) ---------- */
.bb-hero__maskot { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%), linear-gradient(to top, transparent 0, #000 20%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 22%), linear-gradient(to top, transparent 0, #000 20%); mask-composite: intersect; }
.bb-hero--sukses .bb-hero__teks { max-width: 64%; }
.bb-hero--sukses .bb-hero__teks .bb-hero__sub { max-width: none; }
.bb-hero--bayar .bb-hero__teks .bb-hero__sub { max-width: none; }
/* v1.1.1: maskot halaman penutup laporan tidak berbentuk kotak terpotong */
.bb-lp--penutup .bb-lp__maskot { width: 170px; height: auto; -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%); }

/* ---------- v1.1.2: halaman laporan Kebiasaan + Pastikan (desain ChatGPT 8 Nov) ---------- */
.bb-lp__profil--ikon { padding: 4px 10px; }
.bb-lp__profil--ikon div { grid-template-columns: 42% 1fr; padding: 3px 0; gap: 6px; }
.bb-lp__profil--ikon dt { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--teks-dukung); }
.bb-lp__profil--ikon dt img { width: 22px; height: 22px; object-fit: contain; flex: none; }
.bb-lp__profil--ikon dd { font-size: 12px; padding: 4px 8px; background: #fdebe5; border-radius: 9px; }
.bb-lp__tips-kotak { margin: 14px 0 0; padding: 0 12px 10px; background: #fffdf5; border: 2px solid #f3c74e; border-radius: 16px; box-shadow: var(--bayang); text-align: left; }
.bb-lp__tips-judul { text-align: center; margin: -13px 0 4px; font-size: 15px; }
.bb-lp__tips-judul span { display: inline-block; padding: 3px 22px; border-radius: 999px; background: linear-gradient(#fde27a, #f5b827); color: var(--hijau-tua); font-family: var(--serif); }
.bb-lp__tips-kotak .bb-lp__catatan--tips { list-style: none; margin: 0; padding: 0; font-size: 11.5px; line-height: 1.35; color: var(--teks-dukung); font-weight: 600; }
.bb-lp__tips-kotak .bb-lp__catatan--tips li { position: relative; padding: 4px 0 4px 22px; border-top: 1px solid #f3e9dc; }
.bb-lp__tips-kotak .bb-lp__catatan--tips li:first-child { border-top: 0; }
.bb-lp__pastikan--cek { list-style: none; margin: 18px 6px 0; padding: 6px 16px; }
.bb-lp__pastikan--cek li { position: relative; padding: 11px 0 11px 38px; font-size: 14px; line-height: 1.35; font-weight: 600; color: var(--teks-dukung); border-top: 1px solid #f0e6d6; }
.bb-lp__pastikan--cek li + li { margin-top: 0; }
.bb-lp__pastikan--cek li:first-child { border-top: 0; }
.bb-lp__pastikan-kaki { text-align: center; margin: 12px 18px 0; color: var(--teks-sekunder); font-weight: 500; }
.bb-lp__khusus { text-align: center; margin: 12px 0 0; font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--teks-dukung); }
.bb-lp__catatan--tips li::before, .bb-lp__pastikan--cek li::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 50%; background: #3aa64c no-repeat center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E"); }
.bb-lp__pastikan--cek li::before { width: 26px; height: 26px; background-size: 15px; }

/* ---------- v1.1.2: Hasil v3 (Hore cetar) + kepala Terima kasih / Laporan siap dengan maskot utuh (desain ChatGPT 8 Nov) ---------- */
.bb-pesta--v3 { padding: 10px 12px 14px; background: url(../img/hasil-hiasan.webp) top center / 100% auto no-repeat; }
.bb-pesta--v3 .bb-pesta__logo img { width: 112px; }
.bb-hore { margin: 4px 0 0; text-align: center; display: flex; flex-direction: column; align-items: center; }
.bb-hore__besar { font-family: var(--serif); font-size: 78px; line-height: .95; color: #e51b2a; -webkit-text-stroke: 7px #145A32; paint-order: stroke fill; text-shadow: 0 5px 0 rgba(20, 90, 50, .35), 0 8px 14px rgba(120, 70, 0, .25); letter-spacing: 1px; transform: rotate(-3deg); }
.bb-hore__pita { position: relative; margin-top: -6px; padding: 7px 38px 8px; font-family: var(--serif); font-size: 21px; line-height: 1.12; color: #145A32; background: linear-gradient(#fde27a, #f5b827 60%, #e9a410); clip-path: polygon(0 12%, 5% 50%, 0 88%, 100% 88%, 95% 50%, 100% 12%); filter: drop-shadow(0 3px 3px rgba(150, 100, 0, .35)); transform: rotate(-2deg); }
.bb-pesta--v3 .bb-pesta__isi { margin-top: 16px; grid-template-columns: 36% 1fr; align-items: end; }
.bb-pesta--v3 .bb-pesta__maskot { width: 128%; margin: 0 -28% 0 -6%; max-width: none; position: relative; z-index: 0; align-self: end; }
.bb-hero--sukses { background: url(../img/terima-latar.webp) top center / cover no-repeat; min-height: 260px; }
.bb-hero--sukses .bb-hero__maskot[src*="terima-maskot"] { -webkit-mask-image: none; mask-image: none; width: 40%; max-width: 170px; top: 8px; right: 4px; }

.bb-lp__profil--ikon div { padding: 2px 0; }
.bb-lp__profil--ikon dd { padding: 3px 8px; line-height: 1.1; }
.bb-lp__tips-kotak { margin-top: 12px; padding-bottom: 6px; }
.bb-lp__tips-kotak .bb-lp__catatan--tips { font-size: 10.5px; line-height: 1.28; }
.bb-lp__tips-kotak .bb-lp__catatan--tips li { padding: 3px 0 3px 22px; }
.bb-lp__pastikan--cek { margin-top: 10px; padding: 2px 16px; }
.bb-lp__pastikan--cek li { padding: 7px 0 7px 38px; font-size: 12.5px; line-height: 1.3; }
.bb-lp__pastikan--cek li::before { width: 22px; height: 22px; background-size: 13px; }
.bb-lp__pastikan-kaki { margin-top: 8px; font-size: 11px; }
.bb-lp__khusus { margin-top: 6px; font-size: 15px; }
.bb-lp--penutup .bb-lp__maskot { -webkit-mask-image: none; mask-image: none; width: 118px; height: auto; margin: 4px auto 0; }

.bb-lp__pastikan--padat { margin-top: 4px; }
.bb-lp__pastikan--padat li { padding: 4px 0 4px 34px; font-size: 11.2px; line-height: 1.25; }
.bb-lp__pastikan--padat li::before { width: 18px; height: 18px; background-size: 11px; }
/* v1.1.3: judul halaman laporan tidak tertimpa kartu di bawahnya (terlihat di PDF) */
.bb-lp__judul { margin-bottom: 12px; padding-bottom: 2px; }
.bb-lp__sub { margin-bottom: 10px; }

/* v1.1.3: tampilan khusus saat membuat PDF (html2canvas menggeser huruf DM Serif ke bawah dan tidak menggambar centang latar-SVG) */
.bb-lp__tips-kotak .bb-lp__catatan--tips li::before, .bb-lp__pastikan--cek li::before { background: #3aa64c; }
.bb-lp__tips-kotak .bb-lp__catatan--tips li::after, .bb-lp__pastikan--cek li::after { content: ""; position: absolute; left: 7px; top: 50%; width: 5px; height: 10px; margin-top: -7px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.bb-lp__pastikan--cek li::after { left: 9px; width: 6px; height: 11px; margin-top: -8px; }
.bb-lp__pastikan--padat li::after { left: 6.5px; width: 4px; height: 8px; margin-top: -6px; }
/* (v1.1.3: posisi huruf di PDF diperbaiki langsung di html2canvas.min.js memakai fontBoundingBoxAscent, tanpa geseran CSS) */
.bb-lp__sampul-sub span { display: block; }
.bb-hero--sukses .bb-kilau, .bb-hero--terima .bb-kilau { display: none; }

/* v1.2.1: header baru dari ChatGPT, maskot utuh (tidak terpotong). A = tinggi, B = pendek. */
.bb-hero--foto-a, .bb-hero--foto-b { isolation: isolate; }
.bb-hero--foto-a::before, .bb-hero--foto-b::before { content: ""; position: absolute; inset: 0; z-index: -1; background: no-repeat right center / cover; -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent); mask-image: linear-gradient(to bottom, #000 82%, transparent); }
.bb-hero--foto-a::before { background-image: url(../img/hero-a.webp); }
.bb-hero--foto-b::before { background-image: url(../img/hero-b.webp); }
.bb-hero--foto-a { min-height: calc(min(100vw, var(--lebar, 430px)) * .56); height: auto; background: none; padding-top: 26px; padding-bottom: 22px; }
.bb-hero--foto-b { min-height: calc(min(100vw, var(--lebar, 430px)) * .40); height: auto; background: none; padding-top: 20px; padding-bottom: 18px; }
.bb-hero--foto-a .bb-hero__maskot, .bb-hero--foto-b .bb-hero__maskot, .bb-hero--foto-a .bb-kilau, .bb-hero--foto-b .bb-kilau { display: none; }
.bb-hero--foto-a .bb-hero__teks, .bb-hero--foto-b .bb-hero__teks { max-width: 56%; }
.bb-hero--foto-a .bb-hero__teks .bb-hero__sub, .bb-hero--foto-b .bb-hero__teks .bb-hero__sub { max-width: none; }
.bb-hero--foto-a .bb-hero__judul { font-size: 34px; line-height: 1.04; }
.bb-hero--foto-b .bb-hero__judul { font-size: 31px; line-height: 1.04; }

/* v1.2.5: Laporan Siap menampilkan dua tombol; pilihan Bunda di atas, yang satunya bergaris */
.bb-aksi .bb-tombol--kedua { background: #fff; color: #145a32; border: 2px solid #2a9d4b; box-shadow: none; }
.bb-aksi .bb-tombol--kedua svg { color: #145a32; }

/* v1.2.9: nama anak panjang tetap dua baris di sampul laporan */
.bb-lp__sampul-judul { overflow-wrap: anywhere; }
.bb-lp__sampul-judul--s1 { font-size: 32px; }
.bb-lp__sampul-judul--s2 { font-size: 26px; }
.bb-lp__sampul-judul--s3 { font-size: 21px; line-height: 1.08; }

/* v1.3.0: latar atas halaman laporan memudar halus (tanpa garis tegas) */
.bb-halaman { background: #fffaf2 url(../img/latar-header-pudar.webp) top center / 390px 196px no-repeat; }

/* v1.3.2: usia pilihan tunggal langsung lanjut, tombol Lanjut tidak perlu */
.bb-kuis__langkah[data-langkah="2"] [data-lanjut] { display: none; }
.bb-kuis__langkah[data-langkah="2"] .bb-dua { display: block; }
.bb-kuis__langkah[data-langkah="2"] .bb-dua .bb-tombol { width: 100%; }

/* v1.3.3: huruf halaman pertanyaan setelah bayar diperbesar agar mudah dibaca */
.bb-pilih .bb-chips .bb-chip, .bb-pilih .bb-chip { font-size: 16px; line-height: 1.25; min-height: 46px; padding: 6px 16px; }
.bb-chips, .bb-pilih .bb-chip-wadah { gap: 9px; }
.bb-pilih__judul--no, .bb-pilih__judul { font-size: 21px; line-height: 1.15; }
.bb-pilih__judul small, .bb-pilih__judul--no small { font-size: 15px; line-height: 1.3; }
.bb-pilih__sub { font-size: 15.5px; }
.bb-pilih .bb-kotak__item span:not(.bb-kotak__gambar) { font-size: 14.5px; }
.bb-pilih input[type="text"], .bb-pilih input:not([type]) { font-size: 16px; }

/* v1.3.3: huruf halaman laporan/PDF diperbesar agar terbaca di HP */
.bb-lp__no { font-size: 12.5px; }
.bb-lp__sub { font-size: 16.5px; }
.bb-lp__sampul-sub { font-size: 15.5px; }
.bb-lp__tiga span { font-size: 13.5px; }
.bb-lp__halal { font-size: 13.5px; }
.bb-lp__profil dt { font-size: 14.5px; }
.bb-lp__profil dd { font-size: 16.5px; }
.bb-lp__profil--ikon dt { font-size: 13px; }
.bb-lp__profil--ikon dd { font-size: 13.5px; }
.bb-lp__tips-kotak .bb-lp__catatan--tips { font-size: 12px; line-height: 1.32; }
.bb-lp__pastikan--cek li { font-size: 15px; }
.bb-lp__pastikan-kaki { font-size: 13px; }
.bb-lp__khusus { font-size: 18px; }
.bb-lp__rencana li { grid-template-columns: 66px 70px 1fr auto; }
.bb-lp__hari { font-size: 15px; }
.bb-lp__rencana b { font-size: 16px; }
.bb-lp__menit { font-size: 12px; }
.bb-lp__pita { font-size: 13px; }
.bb-lp__resep h3 { font-size: 20px; line-height: 1.1; }
.bb-lp__resep-hari { font-size: 13px; }
.bb-lp__resep-bahan li { font-size: 13px; padding: 3px 9px; }
.bb-lp__resep-langkah { font-size: 14px; line-height: 1.38; padding-left: 20px; }
.bb-lp__belanja li { font-size: 14.5px; }
.bb-lp__belanja--padat li { font-size: 13px; }
.bb-lp__tips { font-size: 14px; }
.bb-lp--penutup .bb-lp__tips, .bb-lp--penutup .bb-lp__pastikan { font-size: 14px; }
/* v1.3.3 (rapi): baris rencana mingguan dengan huruf besar: menit di bawah nama */
.bb-lp__rencana { gap: 5px; margin-top: 10px; }
.bb-lp__rencana li { grid-template-columns: 60px 64px 1fr; grid-template-areas: "h i b" "h i m"; column-gap: 8px; row-gap: 2px; align-items: center; padding: 5px 8px 5px 6px; }
.bb-lp__rencana .bb-lp__hari { grid-area: h; font-size: 14.5px; padding: 5px 0; }
.bb-lp__rencana img { grid-area: i; width: 64px; height: 52px; }
.bb-lp__rencana b { grid-area: b; font-size: 15.5px; line-height: 1.08; align-self: end; }
.bb-lp__rencana .bb-lp__menit { grid-area: m; justify-self: start; align-self: start; font-size: 12px; padding: 2px 7px; }
.bb-lp__belanja { padding: 4px 14px; }
.bb-lp__belanja li { font-size: 14px; padding: 4px 0; }
.bb-lp__rencana li { padding: 4px 8px 4px 6px; }
.bb-lp__rencana img { height: 48px; }
.bb-lp__rencana li { min-height: 58px; }
/* v1.3.3: halaman resep: kepala lebih ringkas agar dua resep berhuruf besar muat */
.bb-halaman--resep .bb-lp__judul { font-size: 28px; margin-top: 4px; }
.bb-halaman--resep .bb-lp__sub { font-size: 14.5px; margin-top: 2px; }
.bb-halaman--resep .bb-lp__resep { margin-top: 8px; padding: 9px 12px; }
/* v1.3.3: resep sendirian di satu halaman memakai foto menu agar halaman tidak kosong */
.bb-lp__resep-foto { width: 100%; height: 200px; object-fit: cover; object-position: center 55%; border-radius: 10px; margin: 0 0 8px; display: block; }
.bb-lp__belanja--padat { padding: 2px 14px; }
.bb-lp__belanja--padat li { font-size: 12.5px; padding: 3px 0; line-height: 1.2; }
.bb-lp__belanja--padat li b { font-size: 13px; }