/* =====================================================
   app-produk.css - halaman App Premium (langkah 2b, 2026-10-18)
   Satu keluarga dengan halaman Akun (akun.css): gelap gaya app BukaOlshop, terang soft clay pastel.
   Dimuat setelah app.css.
   ===================================================== */
.prod { --p-cyan: #00f9ff; --p-border: rgba(144,105,233,.25); }
html[data-tema="terang"] .prod { --p-cyan: #0B5566; --p-border: #eee4ed; }

.skeleton { height: 120px; border-radius: 16px; background: rgba(144,105,233,.1); }
.empty { padding: 22px 16px; text-align: center; color: var(--z-text3); font-size: 12.5px; }
#loadError { display: grid; gap: 10px; justify-items: center; }
.msg { margin: 10px 0 0; font-size: 12.5px; line-height: 1.45; }
.msg.err { color: #ff6b6b; } .msg.ok { color: #00d4aa; }
html[data-tema="terang"] .msg.err { color: #C62828; } html[data-tema="terang"] .msg.ok { color: #0E7A47; }
.msg:empty { display: none; }

/* saldo + level */
.prod-wallet { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 12px; }
.pw-ico { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 12px; background: rgba(144,105,233,.12); border: 1px solid var(--p-border); }
html[data-tema="terang"] .pw-ico { background: linear-gradient(145deg, #fff, #f3eaf9); border: 2px solid #fff; box-shadow: var(--z-clay-s); }
.pw-ico .i3d { width: 26px; height: 26px; }
.pw-mid { flex: 1; min-width: 0; }
.pw-mid small { display: block; font-size: 11px; color: var(--z-text3); }
.pw-mid b { display: block; font-size: 17px; color: var(--z-money); }
.pw-lv { display: block; font-size: 11px; color: var(--z-text2); margin-top: 1px; }
.prod-wallet .z-btn { flex: none; min-height: 40px; padding: 0 14px; font-size: 12px; }

/* kartu produk */
.prod-list { display: grid; gap: 10px; margin-top: 12px; }
.prod-card { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 12px; align-items: center; }
.prod-img { width: 72px; height: 72px; border-radius: 16px; object-fit: cover; background: rgba(144,105,233,.12); border: 1px solid var(--p-border); }
html[data-tema="terang"] .prod-img { border: 2px solid #fff; box-shadow: var(--z-clay-s); background: #f3eaf9; }
.prod-mid { min-width: 0; }
.prod-name { margin: 0; font-size: 15px; font-weight: 700; color: var(--p-cyan); overflow-wrap: anywhere; }
html[data-tema="terang"] .prod-name { color: #4b2f86; }
.prod-desc { margin: 2px 0 0; font-size: 11.5px; color: var(--z-text3); }
/* 2026-10-20: file di server lebih baru dari unduhan terakhir pembeli */
.prod-new { display: inline-flex; align-items: center; height: 20px; margin-top: 4px; padding: 0 8px; border-radius: 99px; font-size: 10.5px; font-weight: 800;
  color: #052e16; background: #4ade80; }
.prod-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 6px; }
.prod-price s { font-size: 11.5px; color: var(--z-text3); }
.prod-price b { font-size: 16px; font-weight: 800; color: var(--z-money); }
.prod-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 99px; font-size: 10.5px; font-weight: 800;
  color: #fff; background: linear-gradient(90deg, #8958e4, #d72fa9); }
.prod-act { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.prod-act .z-btn { min-width: 112px; white-space: nowrap; }
.prod-act .z-btn[disabled] { opacity: .6; cursor: default; transform: none; }
.prod-owned { margin-right: auto; font-size: 11.5px; font-weight: 700; color: #00d4aa; }
html[data-tema="terang"] .prod-owned { color: #0E7A47; }
.prod-note { margin-top: 12px; }
@media (min-width: 420px) {
  .prod-card { grid-template-columns: 72px minmax(0, 1fr) auto; }
  .prod-act { grid-column: auto; flex-direction: column; align-items: flex-end; gap: 6px; }
  .prod-owned { margin-right: 0; }
}

/* lembar konfirmasi (di atas menu bawah) */
.prod-sheet { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(5,5,12,.6); }
html[data-tema="terang"] .prod-sheet { background: rgba(60,40,90,.35); }
.sheet-box { width: 100%; max-width: 460px; padding: 18px 16px 16px; display: grid; gap: 12px; }
.sheet-box h2 { margin: 0; font-size: 17px; color: var(--z-text); overflow-wrap: anywhere; }
.sheet-rows { display: grid; gap: 8px; font-size: 13px; }
.sheet-rows > div { display: flex; justify-content: space-between; gap: 12px; }
.sheet-rows span { color: var(--z-text2); }
.sheet-rows b { color: var(--z-text); white-space: nowrap; }
.sheet-rows .tot { padding-top: 8px; border-top: 1px solid var(--p-border); }
.sheet-rows .tot b { font-size: 16px; color: var(--z-money); }
.sheet-box .btns { display: flex; gap: 8px; }
.sheet-box .btns .z-btn { flex: 1; }
.sheet-box .z-btn[disabled] { opacity: .6; cursor: default; transform: none; }

.z-btn, .prod-card { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.acc-toast { position: fixed; left: 50%; bottom: calc(var(--z-nav-h) + 26px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 60;
  max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 99px; font-size: 12.5px; font-weight: 700; color: #fff; background: #43335f; box-shadow: 0 8px 25px rgba(48,32,74,.4); }
.acc-toast[hidden] { display: none; }

/* =====================================================
   2026-10-21: halaman App gaya DAFTAR aplikasi (pilihan pemilik, contoh gambar daftar unduhan gelap):
   ikon kiri, nama + deskripsi + info, tombol bulat di kanan. Warna mengikuti tema v15 (gelap BukaOlshop / terang clay).
   ===================================================== */
.app-head { display: flex; align-items: center; gap: 10px; margin: 2px 0 4px; }
.app-head h1 { margin: 0; font-size: 18px; }
.app-ico { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 10px; background: rgba(144,105,233,.14); }
html[data-tema="terang"] .app-ico { background: linear-gradient(145deg, #fff, #f3eaf9); border: 2px solid #fff; box-shadow: var(--z-clay-s); }
.app-ico .i3d { width: 20px; height: 20px; }
.app-sub { margin: 0 0 12px; font-size: 11.5px; line-height: 1.5; }
.app-list { display: grid; gap: 12px; margin-top: 4px; }
.app-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) 56px; gap: 14px; align-items: center; padding: 14px; border-radius: 18px; }
html:not([data-tema="terang"]) .app-row { background: #111019; border: 1px solid rgba(144,105,233,.3); box-shadow: none; }
.app-img { width: 76px; height: 76px; border-radius: 16px; object-fit: cover; background: rgba(144,105,233,.12); border: 1px solid rgba(255,255,255,.08); }
html[data-tema="terang"] .app-img { border: 2px solid #fff; box-shadow: var(--z-clay-s); background: #f3eaf9; }
.app-mid { min-width: 0; }
.app-name { margin: 0; font: 800 16px/1.25 "Plus Jakarta Sans", sans-serif; color: #fff; overflow-wrap: anywhere; }
html[data-tema="terang"] .app-name { color: #302343; }
.app-desc { margin: 3px 0 0; font-size: 12.5px; line-height: 1.45; color: #9b98b0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html[data-tema="terang"] .app-desc { color: #594b77; }
.app-info { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 6px; font-size: 12px; }
.app-size { color: #22d3ee; font-weight: 600; white-space: nowrap; }
.app-size .fa-solid { font-size: 11px; }
html[data-tema="terang"] .app-size { color: #0B6B80; }
.app-price { font-size: 14px; font-weight: 800; color: #67e8f9; white-space: nowrap; }
.app-price s { margin-left: 5px; font-size: 11px; font-weight: 600; color: #8a8aa6; }
html[data-tema="terang"] .app-price { color: #0B5566; }
html[data-tema="terang"] .app-price s { color: #74677f; }
.app-owned { font-size: 12px; font-weight: 700; color: #00d4aa; }
.app-owned.off { color: #8a8aa6; }
html[data-tema="terang"] .app-owned { color: #0E7A47; }
html[data-tema="terang"] .app-owned.off { color: #74677f; }
.app-act { width: 56px; height: 56px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; font-size: 20px; color: #fff;
  background: linear-gradient(145deg, #7d5be0, #5b3ba8); box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: transform .15s; }
.app-act:active { transform: scale(.94); }
.app-act:focus-visible { outline: 2px solid #67e8f9; outline-offset: 2px; }
html[data-tema="terang"] .app-act { color: #38205f; background: linear-gradient(145deg, #d9c2ff 0%, #b08bf4 48%, #9165dc 100%); border: 2px solid #f8edff;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.55), inset -2px -3px 0 rgba(91,55,153,.2), 0 4px 0 #7655b6, 0 7px 12px rgba(91,58,136,.13); }
html[data-tema="terang"] .app-act:focus-visible { outline-color: #6744a6; }
.app-act[disabled] { opacity: .45; cursor: default; box-shadow: none; transform: none; }
.app-act[aria-busy="true"] { opacity: .6; cursor: progress; }
@media (prefers-reduced-motion: reduce) { .app-act { transition: none; } .app-act:active { transform: none; } }

/* 2026-10-21 (sore) masukan pemilik: elemen kurang "gendut" & lebih kotak. Ukuran mengikuti kebiasaan app HP:
   tombol 44px (batas nyaman sentuh), ikon 64px, sudut 14px, kaki 3D 3px; catatan aturan diringkas dalam kotak. */
.app-row { grid-template-columns: 64px minmax(0, 1fr) 44px; gap: 12px; padding: 12px; border-radius: 14px; }
html[data-tema="terang"] .app-row { border-radius: 14px; }
.app-img, html[data-tema="terang"] .app-img { width: 64px; height: 64px; border-radius: 12px; }
.app-name { font-size: 15px; }
.app-act { width: 44px; height: 44px; font-size: 17px; box-shadow: inset 0 1px 0 rgba(255,255,255,.22); }
html[data-tema="terang"] .app-act { box-shadow: inset 2px 2px 0 rgba(255,255,255,.55), inset -2px -2px 0 rgba(91,55,153,.18), 0 3px 0 #7655b6, 0 5px 10px rgba(91,58,136,.12); }
.app-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: 14px; }
.app-note .i3d { flex: none; margin-top: 1px; }
.app-note p { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--z-text2); }

/* 2026-10-21 malam pemilik: pesan singkat mode gelap hitam netral (bukan ungu tua) */
html:not([data-tema="terang"]) .acc-toast { background: #27272a; box-shadow: 0 8px 25px rgba(0,0,0,.45); }
/* kotak ikon & gambar: abu netral (bukan ungu) */
html:not([data-tema="terang"]) .pw-ico, html:not([data-tema="terang"]) .app-ico, html:not([data-tema="terang"]) .prod-img, html:not([data-tema="terang"]) .app-img,
html:not([data-tema="terang"]) .skeleton { background: rgba(255,255,255,.06); }
/* 2026-10-22 isi paket di lembar beli: nama aplikasi boleh turun baris */
#sItems { white-space: normal; text-align: right; }

/* ---------- 2026-10-23 pemilik: halaman App = grid 3 kolom (kartu .pcard dari kartu.css, sama dengan Video/Beranda)
   + tampilan detail produk (#produk-ID). Tombol & aturan beli/unduh tetap dari app-produk.js. ---------- */
.app-grid { margin-bottom: 14px; }
.app-grid[hidden], .app-detail[hidden], .app-note[hidden] { display: none; }
.app-card { text-decoration: none; color: inherit; }
.app-card .p-baru { position: absolute; z-index: 2; right: 6px; top: 6px; }
.d-sembunyi { display: none !important; }
/* 2026-10-23 pemilik (revisi ke-2): detail produk meniru halaman produk toko babyflo69.biz.id/?p=... -
   bar atas (kembali bulat + nama), banner gambar + kategori + rating, tab Deskripsi/Tampilan, harga & tombol menempel di bawah. */
.app-detail .d-top { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.app-detail .d-back { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; font-size: 20px;
  color: var(--z-text); text-decoration: none; border: 1px solid rgba(144,105,233,.35); background: rgba(144,105,233,.12); }
html[data-tema="terang"] .app-detail .d-back { background: #fff; border-color: rgba(124,92,191,.25); color: #4a2f80; box-shadow: 0 2px 8px rgba(80,50,140,.12); }
.d-topnama { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700; font-size: 18px; color: #22d3ee; }
html[data-tema="terang"] .d-topnama { color: #6744a6; }
.d-hero { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; max-height: 340px; width: 100%;
  background: rgba(144,105,233,.15); margin-bottom: 12px; }
.d-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.d-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,6,20,0) 35%, rgba(10,6,20,.82) 100%); pointer-events: none; }
.d-heroisi { position: absolute; z-index: 1; left: 14px; right: 14px; bottom: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.d-cat { padding: 4px 12px; border-radius: 99px; font-size: 12px; font-weight: 700; color: #b9f6ff; background: rgba(34,211,238,.18); border: 1px solid rgba(103,232,249,.55); }
.d-cat[hidden], .d-meta[hidden], .d-long[hidden], .d-hlabel[hidden], .d-tab[hidden], .d-panel[hidden] { display: none; }
.app-detail .d-nama { margin: 0; font-family: "Plus Jakarta Sans", sans-serif; font-size: 24px; line-height: 1.15; color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.6); overflow-wrap: anywhere; }
.d-meta { margin: 0; font-size: 13px; color: #f1ecff; text-shadow: 0 1px 4px rgba(0,0,0,.7); }
.d-tabs { display: flex; gap: 4px; padding: 4px; margin-bottom: 12px; border-radius: 16px; border: 1px solid rgba(144,105,233,.35); background: rgba(144,105,233,.08); }
html[data-tema="terang"] .d-tabs { background: #fff; border-color: rgba(124,92,191,.22); }
.d-tab { flex: 1; min-height: 44px; border: 0; border-radius: 12px; background: transparent; cursor: pointer;
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 15px; color: var(--z-text2); }
.d-tab[aria-selected="true"] { color: #fff; background: linear-gradient(180deg, #9a76e6, #7650c9); box-shadow: 0 2px 0 #5b3aa3, 0 4px 10px rgba(118,80,201,.35); }
.d-tab:focus-visible { outline: 2px solid #22d3ee; outline-offset: 2px; }
.d-panel { padding: 14px; margin-bottom: 12px; }
.d-desc { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--z-text); }
.d-desc[hidden] { display: none; }
/* 2026-11-05 pemilik: deskripsi sedikit lebih tebal (500, berat 500 ikut dimuat di app.html) */
.d-long { white-space: pre-line; overflow-wrap: anywhere; font-size: 13px; font-weight: 500; line-height: 1.6; color: var(--z-text2); margin-bottom: 12px; }
.d-spek { margin: 0; border-top: 1px solid rgba(144,105,233,.2); }
.d-spek-row { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(144,105,233,.2); font-size: 13px; }
.d-spek-row:last-child { border-bottom: 0; padding-bottom: 0; }
.d-spek dt { flex: none; color: var(--z-text3); }
.d-spek dd { margin: 0; text-align: right; font-weight: 700; color: var(--z-money); }
.d-galeri { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
.d-shot { flex: none; width: 42%; max-width: 200px; aspect-ratio: 9 / 20; height: auto; object-fit: cover; border-radius: 12px; scroll-snap-align: start;
  background: rgba(144,105,233,.12); }
/* harga + tombol menempel di atas menu bawah selama detail terlihat */
.d-bayar { position: sticky; z-index: 5; bottom: calc(var(--z-nav-h) + 16px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; margin-top: 4px; }
.d-harga { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.d-hlabel { font-size: 11.5px; color: var(--z-text3); }
.d-info { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.d-act { flex: none; width: auto; min-width: 140px; min-height: 46px; } /* tombol utama: area sentuh >= 44px */
.d-act .fa-solid { font-size: 13px; }
@media (max-width: 359px) { .app-detail .d-nama { font-size: 20px; } .d-act { min-width: 118px; padding-left: 10px; padding-right: 10px; } }
/* 2026-11-05 pemilik: tab Ulasan - ulasan pembeli asli (app-produk.js) */
.ul-ringkas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; font-size: 13px; color: var(--z-text2); }
.ul-ringkas b { font-size: 18px; color: var(--z-text); }
.ul-bt { display: inline-flex; gap: 2px; font-size: 11px; color: #f5b301; }
.ul-bt.besar { font-size: 15px; }
.ul-bt .ul-redup { color: rgba(144,105,233,.3); }
.ul-form { margin: 0 0 14px; padding: 12px; border-radius: 14px; border: 1px solid rgba(144,105,233,.35); background: rgba(144,105,233,.07); }
.ul-bintang { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 8px; padding: 0; border: 0; }
.ul-bintang legend { width: 100%; margin: 0 0 6px; padding: 0; font-size: 13px; font-weight: 700; color: var(--z-text); }
.ul-bintang input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ul-bintang label { display: grid; place-items: center; width: 40px; height: 40px; font-size: 22px; color: rgba(144,105,233,.35); cursor: pointer; }
.ul-bintang label.on { color: #f5b301; }
.ul-bintang input:focus-visible + label { outline: 2px solid #22d3ee; outline-offset: 1px; border-radius: 8px; }
.ul-teks { width: 100%; min-height: 76px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(144,105,233,.35); resize: vertical;
  font: 500 14px/1.45 "Plus Jakarta Sans", sans-serif; color: var(--z-text); background: var(--z-panel, rgba(0,0,0,.2)); box-sizing: border-box; }
.ul-catatan { margin: 6px 0 0; font-size: 12px; color: #f59e0b; }
.ul-kirim { width: 100%; margin-top: 8px; }
.ul-info { margin: 0 0 12px; font-size: 12.5px; color: var(--z-text3); }
.ul-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ul-item { padding: 10px 0 0; border-top: 1px solid rgba(144,105,233,.2); }
.ul-item:first-child { border-top: 0; padding-top: 0; }
.ul-atas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--z-text); }
.ul-verif { font-size: 11px; font-weight: 700; color: #16a34a; }
html:not([data-tema="terang"]) .ul-verif { color: #4ade80; }
.ul-baris { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.ul-tgl { font-size: 11.5px; color: var(--z-text3); }
.ul-isi { margin: 6px 0 0; font-size: 13.5px; font-weight: 500; line-height: 1.5; color: var(--z-text2); overflow-wrap: anywhere; white-space: pre-line; }
.d-tabs .d-tab { padding: 0 6px; }
/* 2026-11-05 pemilik (revisi ke-2): kotak pemberitahuan lebih rapi - kotak bergaris tepi + garis aksen di sisi kiri, huruf biasa */
html .acc-toast, html:not([data-tema="terang"]) .acc-toast { width: max-content; max-width: min(calc(100% - 32px), 420px); padding: 12px 16px 12px 14px; border-radius: 14px;
  border: 1px solid rgba(144,105,233,.55); border-left: 4px solid #9069c9; background: #1b1724; color: #f4f2fa;
  font: 600 13.5px/1.45 "Plus Jakarta Sans", sans-serif; letter-spacing: 0; text-transform: none; white-space: normal; text-align: left;
  box-shadow: 0 10px 28px rgba(0,0,0,.45); }
html[data-tema="terang"] .acc-toast { background: #fff; color: #2b2140; border-color: rgba(103,68,166,.35); border-left-color: #6744a6; box-shadow: 0 10px 28px rgba(48,32,74,.18); }