/* ==========================================================================
   BILAH PRATINJAU ASLI — gaya MANDIRI khusus pembungkus pratinjau-asli.php
   (perbaikan visual 2 Nov 2026). style.css bersama dirujuk pembungkus tanpa
   penanda versi sehingga peramban menyajikan salinan cache lama (bilah bawah
   pra-Gelombang A menumpuk dua tombol di bawah). Berkas ini URL baru +
   ?v=, mendefinisikan ulang SELURUH properti bilah, dan dimuat sesudah
   style.css dengan spesifisitas lebih tinggi (awalan body) — menang tanpa
   mengubah style.css bersama. Warna tetap dari variabel --bar-* tema.
   Penyempurnaan kaca 2 Nov 2026 (permintaan pemilik — "sedikit transparan,
   jangan slop"): wadah color-mix 84% dari --bar-bg + blur(10px) saturate(1.2),
   hairline aksen 35%, garis tombol Katalog aksen 45%, Pesan TETAP SOLID
   (teksnya putih #FFFFFF di atas emas — alpha akan menurunkan kontras).
   ========================================================================== */

/* Di layar lebar bilah mobile tetap tersembunyi (kartu samping yang tampil),
   sama seperti perilaku pratinjau lain. */
body .mobile-preview-sticky-bar {
  display: none;
}

@media (max-width: 1099px) {
  body .mobile-preview-sticky-bar {
    position: fixed;
    top: calc(10px + env(safe-area-inset-top));
    bottom: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: max-content;
    max-width: min(430px, calc(100vw - 20px));
    z-index: 200;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    padding: 6px;
    border-radius: 999px;
    background: var(--bar-bg, #1c1b19);
    background: color-mix(in srgb, var(--bar-bg, #1c1b19) 84%, transparent);
    color: var(--bar-teks, #ffffff);
    border: 1px solid var(--bar-aksen, #c9a227);
    border: 1px solid color-mix(in srgb, var(--bar-aksen, #c9a227) 35%, transparent);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    backdrop-filter: blur(10px) saturate(1.2);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.18);
    font-family: var(--font-sans, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
    font-size: 0.85rem;
    line-height: 1;
  }

  body .mobile-preview-sticky-bar .ptb-back {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid var(--bar-aksen, #c9a227);
    border: 1px solid color-mix(in srgb, var(--bar-aksen, #c9a227) 45%, transparent);
    background: transparent;
    color: var(--bar-teks, #ffffff);
    text-decoration: none;
    font-weight: 700;
    white-space: nowrap;
    line-height: 1;
    transition: background-color 150ms ease;
  }

  body .mobile-preview-sticky-bar .ptb-back:hover,
  body .mobile-preview-sticky-bar .ptb-back:active {
    background: color-mix(in srgb, var(--bar-aksen, #c9a227) 15%, transparent);
  }

  body .mobile-preview-sticky-bar .ptb-btns {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
  }

  body .mobile-preview-sticky-bar .ptb-order {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: var(--bar-pesan-bg, #c9a227);
    color: var(--bar-pesan-teks, #111111);
    text-decoration: none;
    font-weight: 800;
    white-space: nowrap;
    line-height: 1;
    transition: background-color 150ms ease;
  }

  body .mobile-preview-sticky-bar .ptb-order:active {
    background: color-mix(in srgb, var(--bar-pesan-bg, #c9a227) 94%, #000000);
  }
}

@media (max-width: 400px) {
  body .mobile-preview-sticky-bar .ptb-back,
  body .mobile-preview-sticky-bar .ptb-order {
    padding: 0 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body .mobile-preview-sticky-bar .ptb-back,
  body .mobile-preview-sticky-bar .ptb-order {
    transition: none;
  }
}