/* =======================================================================
 * ids-v19.css — Animasi halus + halaman produk per-URL + kotak rekomendasi
 *                + ulasan customer di bawah bintang.
 *
 * Prinsip animasi: pelan, pendek, sekali jalan, mengikuti tema merah/gelap
 * toko. Semua transisi < 600ms, easing khas produk (bukan bounce lebay),
 * dan semuanya mati sendiri kalau pengguna memilih "reduce motion".
 * ===================================================================== */

:root {
  --v19-merah: #E21D38;
  --v19-merah-terang: #FF4256;
  --v19-garis: rgba(255, 255, 255, .10);
  --v19-kartu: rgba(255, 255, 255, .035);
  --v19-halus: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------- *
 * 1. Muncul saat discroll (dipasang JS: .v19-reveal -> .tampil)
 * --------------------------------------------------------------------- */
.v19-reveal {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity .5s var(--v19-halus), transform .55s var(--v19-halus);
  will-change: opacity, transform;
}
.v19-reveal.tampil { opacity: 1; transform: none; }
.v19-reveal.d1 { transition-delay: .06s }
.v19-reveal.d2 { transition-delay: .12s }
.v19-reveal.d3 { transition-delay: .18s }
.v19-reveal.d4 { transition-delay: .24s }

/* --------------------------------------------------------------------- *
 * 2. Halaman produk (SSR dari web/seo.js) — tema toko, bukan template AI
 * --------------------------------------------------------------------- */
.p19 {
  max-width: 1120px;
  margin: 0 auto;
  padding: 26px 18px 40px;
}
.p19-crumb {
  display: flex; flex-wrap: wrap; gap: 6px;
  font-size: 12.5px; color: rgba(255,255,255,.52);
  margin-bottom: 16px;
}
.p19-crumb a { color: rgba(255,255,255,.62); text-decoration: none }
.p19-crumb a:hover { color: var(--v19-merah-terang) }
.p19-crumb span { opacity: .45 }

.p19-atas {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}
@media (max-width: 820px) { .p19-atas { grid-template-columns: 1fr } }

.p19-gbr {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--v19-garis);
  background: linear-gradient(160deg, rgba(226,29,56,.14), rgba(255,255,255,.02));
  aspect-ratio: 1 / 1;
}
.p19-gbr img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.001);
  transition: transform .7s var(--v19-halus);
}
.p19-gbr:hover img { transform: scale(1.045) }
/* Kilau tipis yang lewat sekali saat halaman dibuka — terasa "dibuat tangan". */
.p19-gbr::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.16) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: v19-kilau 1.4s .35s var(--v19-halus) 1 forwards;
}
@keyframes v19-kilau { to { transform: translateX(120%) } }

.p19-judul {
  font-size: clamp(23px, 3.4vw, 33px);
  line-height: 1.18;
  margin: 0 0 10px;
  letter-spacing: -.4px;
}
.p19-sub { color: rgba(255,255,255,.62); margin: 0 0 16px; font-size: 14.5px; line-height: 1.65 }

.p19-harga {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 0 0 16px;
}
.p19-harga b {
  font-size: clamp(24px, 3.2vw, 31px);
  color: var(--v19-merah-terang);
  letter-spacing: -.5px;
}
.p19-harga i { font-style: normal; color: rgba(255,255,255,.5); font-size: 13px }

.p19-tag { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px }
.p19-tag span {
  font-size: 12px; padding: 6px 11px; border-radius: 999px;
  border: 1px solid var(--v19-garis); background: var(--v19-kartu);
  color: rgba(255,255,255,.76);
}

.p19-aksi { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 22px }
.p19-btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: 12px;
  font-weight: 600; font-size: 14.5px; text-decoration: none;
  border: 1px solid var(--v19-garis); color: #fff;
  background: var(--v19-kartu);
  transition: transform .18s var(--v19-halus), border-color .18s, background .18s;
}
.p19-btn:hover { transform: translateY(-1.5px); border-color: rgba(255,255,255,.24) }
.p19-btn:active { transform: translateY(0) }
.p19-btn.utama {
  background: linear-gradient(135deg, var(--v19-merah), #8E0F22);
  border-color: transparent;
  box-shadow: 0 8px 24px -10px rgba(226,29,56,.85);
}
/* Sapuan cahaya saat hover pada tombol utama. */
.p19-btn.utama::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.28) 50%, transparent 60%);
  transform: translateX(-130%);
  transition: transform .65s var(--v19-halus);
}
.p19-btn.utama:hover::after { transform: translateX(130%) }

.p19-varian { display: grid; gap: 8px; margin: 0 0 8px }
.p19-varian a {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: 12px;
  border: 1px solid var(--v19-garis); background: var(--v19-kartu);
  color: #fff; text-decoration: none; font-size: 14px;
  transition: border-color .2s, transform .2s var(--v19-halus), background .2s;
}
.p19-varian a:hover {
  border-color: rgba(226,29,56,.55);
  background: rgba(226,29,56,.08);
  transform: translateX(3px);
}
.p19-varian a b { color: var(--v19-merah-terang); font-size: 14.5px; white-space: nowrap }

.p19-blok { margin-top: 34px }
.p19-blok > h2 {
  font-size: 17px; margin: 0 0 14px;
  display: flex; align-items: center; gap: 10px;
}
.p19-blok > h2::before {
  content: ""; width: 3px; height: 17px; border-radius: 2px;
  background: linear-gradient(180deg, var(--v19-merah-terang), transparent);
}
.p19-teks { color: rgba(255,255,255,.72); font-size: 14.5px; line-height: 1.75; white-space: pre-line }

/* --------------------------------------------------------------------- *
 * 3. Rating + KESAN customer (tepat di bawah bintang)
 * --------------------------------------------------------------------- */
.p19-rate {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px; border-radius: 14px;
  border: 1px solid var(--v19-garis); background: var(--v19-kartu);
}
.p19-rate .angka { font-size: 27px; font-weight: 700; letter-spacing: -.5px }
.p19-rate .bintang { color: #FFC53D; letter-spacing: 2px; font-size: 16px }
.p19-rate .jml { color: rgba(255,255,255,.55); font-size: 13px }

.p19-ulasan { display: grid; gap: 10px; margin-top: 12px }
.p19-ulasan .u {
  padding: 13px 15px; border-radius: 13px;
  border: 1px solid var(--v19-garis);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  transition: border-color .25s, transform .25s var(--v19-halus);
}
.p19-ulasan .u:hover { border-color: rgba(255,255,255,.2); transform: translateY(-2px) }
.p19-ulasan .u .kepala {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-bottom: 7px; font-size: 13px;
}
.p19-ulasan .u .nama { font-weight: 600 }
.p19-ulasan .u .bintang { color: #FFC53D; letter-spacing: 1.5px }
.p19-ulasan .u .tgl { color: rgba(255,255,255,.42); font-size: 12px; margin-left: auto }
.p19-ulasan .u p {
  margin: 0; font-size: 14px; line-height: 1.66;
  color: rgba(255,255,255,.8);
}
.p19-ulasan .u .produk { display: block; margin-top: 7px; font-size: 12px; color: rgba(255,255,255,.45) }

/* --------------------------------------------------------------------- *
 * 4. KOTAK REKOMENDASI — muncul saat discroll di bawah halaman produk
 *    ("setipe" + "lagi hot"), kartu kecil, bisa digeser di HP.
 * --------------------------------------------------------------------- */
.rk19 { margin-top: 38px }
.rk19-kepala {
  display: flex; align-items: center; gap: 10px; margin-bottom: 13px;
}
.rk19-kepala h2 { font-size: 16.5px; margin: 0 }
.rk19-kepala .lencana {
  font-size: 11px; letter-spacing: .3px; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px;
  border: 1px solid rgba(226,29,56,.5);
  color: var(--v19-merah-terang);
  background: rgba(226,29,56,.09);
}
.rk19-kepala .api { animation: v19-nyala 2.4s ease-in-out infinite }
@keyframes v19-nyala {
  0%, 100% { opacity: .75; transform: scale(1) }
  50%      { opacity: 1;   transform: scale(1.08) }
}

.rk19-baris {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(158px, 1fr);
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 2px 2px 10px;
  scrollbar-width: thin;
}
.rk19-baris::-webkit-scrollbar { height: 6px }
.rk19-baris::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 9px }
@media (min-width: 860px) {
  .rk19-baris {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    grid-auto-columns: auto;
    overflow: visible;
  }
}

.rk19-kartu {
  scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 9px;
  padding: 11px; border-radius: 15px;
  border: 1px solid var(--v19-garis);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
  color: #fff; text-decoration: none;
  transition: transform .28s var(--v19-halus), border-color .28s, box-shadow .28s;
}
.rk19-kartu:hover {
  transform: translateY(-4px);
  border-color: rgba(226,29,56,.5);
  box-shadow: 0 14px 30px -18px rgba(226,29,56,.9);
}
.rk19-kartu .gbr {
  position: relative;
  border-radius: 11px; overflow: hidden;
  aspect-ratio: 1 / 1;
  background: rgba(255,255,255,.05);
}
.rk19-kartu .gbr img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--v19-halus);
}
.rk19-kartu:hover .gbr img { transform: scale(1.07) }
.rk19-kartu .gbr .hot {
  position: absolute; top: 7px; left: 7px;
  font-size: 10px; font-weight: 700; letter-spacing: .3px;
  padding: 3px 7px; border-radius: 999px;
  background: linear-gradient(135deg, var(--v19-merah), #8E0F22);
}
.rk19-kartu .nm {
  font-size: 13.2px; font-weight: 600; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.rk19-kartu .hg { font-size: 13px; color: var(--v19-merah-terang); font-weight: 700 }
.rk19-kartu .bt { font-size: 11.5px; color: #FFC53D; letter-spacing: 1px }

/* Kotak rekomendasi "nempel" kecil yang muncul saat sudah discroll jauh. */
.rk19-tempel {
  position: fixed; right: 16px; bottom: 90px; z-index: 60;
  width: 262px; max-width: calc(100vw - 32px);
  border-radius: 16px; padding: 13px;
  border: 1px solid var(--v19-garis);
  background: rgba(14, 14, 17, .93);
  backdrop-filter: blur(14px);
  box-shadow: 0 22px 50px -22px rgba(0,0,0,.95);
  opacity: 0; transform: translateY(14px) scale(.97);
  pointer-events: none;
  transition: opacity .38s var(--v19-halus), transform .38s var(--v19-halus);
}
.rk19-tempel.tampil { opacity: 1; transform: none; pointer-events: auto }
.rk19-tempel .tutup {
  position: absolute; top: 8px; right: 9px;
  width: 22px; height: 22px; border-radius: 7px;
  border: 0; cursor: pointer;
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.66);
  font-size: 12px; line-height: 1;
}
.rk19-tempel .tutup:hover { background: rgba(255,255,255,.16); color: #fff }
.rk19-tempel h3 {
  margin: 0 0 9px; font-size: 12.5px; letter-spacing: .2px;
  color: rgba(255,255,255,.68); text-transform: uppercase; font-weight: 600;
}
.rk19-tempel a.item {
  display: flex; gap: 10px; align-items: center;
  padding: 7px; border-radius: 11px;
  color: #fff; text-decoration: none;
  transition: background .2s;
}
.rk19-tempel a.item:hover { background: rgba(255,255,255,.06) }
.rk19-tempel a.item img {
  width: 40px; height: 40px; border-radius: 9px; object-fit: cover;
  background: rgba(255,255,255,.05); flex: none;
}
.rk19-tempel a.item .t { min-width: 0 }
.rk19-tempel a.item .t b {
  display: block; font-size: 12.8px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rk19-tempel a.item .t s {
  text-decoration: none; display: block;
  font-size: 12px; color: var(--v19-merah-terang);
}
@media (max-width: 620px) { .rk19-tempel { display: none } }

/* --------------------------------------------------------------------- *
 * 5. Lonceng izin notifikasi (dipasang assets/notif.js)
 * --------------------------------------------------------------------- */
.n19-ajak {
  position: fixed; left: 16px; bottom: 18px; z-index: 70;
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px; border-radius: 14px;
  border: 1px solid var(--v19-garis);
  background: rgba(14,14,17,.94);
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 44px -24px rgba(0,0,0,.95);
  max-width: calc(100vw - 32px);
  opacity: 0; transform: translateY(12px);
  transition: opacity .35s var(--v19-halus), transform .35s var(--v19-halus);
}
.n19-ajak.tampil { opacity: 1; transform: none }
.n19-ajak p { margin: 0; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.8) }
.n19-ajak b { display: block; font-size: 13.5px; color: #fff; margin-bottom: 2px }
.n19-ajak button {
  border: 0; cursor: pointer; border-radius: 10px;
  padding: 8px 13px; font-size: 12.8px; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, var(--v19-merah), #8E0F22);
  white-space: nowrap;
}
.n19-ajak .nanti {
  background: rgba(255,255,255,.08); font-weight: 500;
}
.n19-lonceng { animation: v19-goyang 2.6s var(--v19-halus) infinite }
@keyframes v19-goyang {
  0%, 72%, 100% { transform: rotate(0) }
  76% { transform: rotate(11deg) }
  80% { transform: rotate(-9deg) }
  84% { transform: rotate(6deg) }
  88% { transform: rotate(-4deg) }
}

/* --------------------------------------------------------------------- *
 * 6. Blok tautan SEO: tetap terlihat rapi, bukan "hidden text"
 * --------------------------------------------------------------------- */
.seo-wrap { max-width: 1120px; margin: 26px auto 40px; padding: 0 18px }
.seo-tautan { margin-bottom: 22px }
.seo-tautan h2 {
  font-size: 13px; text-transform: uppercase; letter-spacing: .4px;
  color: rgba(255,255,255,.5); margin: 0 0 10px;
}
.seo-tautan ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 7px;
}
.seo-tautan a {
  display: inline-block; font-size: 12.3px;
  padding: 6px 11px; border-radius: 999px;
  border: 1px solid var(--v19-garis); background: var(--v19-kartu);
  color: rgba(255,255,255,.62); text-decoration: none;
  transition: color .2s, border-color .2s;
}
.seo-tautan a:hover { color: #fff; border-color: rgba(226,29,56,.55) }

/* --------------------------------------------------------------------- *
 * 7. Hormati pengguna yang mematikan animasi
 * --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .v19-reveal, .v19-reveal.tampil,
  .p19-gbr img, .p19-btn, .rk19-kartu, .rk19-tempel, .n19-ajak {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .p19-gbr::after { display: none }
}