/* ══════════════════════════════════════════════════════════════
   produk.css — tampilan halaman detail produk.
   Dipisah dari produk.html supaya halaman produk STATIS hasil
   scripts/build-kado.js memakai desain yang SAMA PERSIS, bukan
   salinan yang bisa melenceng diam-diam. Ubah di sini sekali,
   26 halaman ikut (produk.html + 24 halaman /kado/* + 404 tidak).
   Warna & spacing mengambil token dari assets/lulu-tokens.css.
   ══════════════════════════════════════════════════════════════ */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root{
    /* Nilai brand datang dari assets/lulu-tokens.css -- satu sumber */
    --pink-accent:var(--lulu-pink-accent); --pink-deep:var(--lulu-pink-deep);
    --pink-hot:#FF69B4; --pink-hotter:#FF1493;
    --cream1:var(--lulu-cream-1); --cream2:var(--lulu-cream-2);
    --text:var(--lulu-ink); --text-muted:var(--lulu-ink-muted);
    --white:#ffffff;
    --radius:20px;
    --shadow:0 10px 30px rgba(232,0,61,.12);
  }
  html{ scroll-behavior:smooth; }
  html,body{ min-height:100%; }
  body{
    font-family:'Poppins',sans-serif; color:var(--text);
    /* fullscreen edge-to-edge di semua lebar layar (mobile & desktop) */
    background:
      radial-gradient(circle at 12% 8%, rgba(255,133,161,.16), transparent 45%),
      radial-gradient(circle at 88% 92%, rgba(255,20,147,.10), transparent 50%),
      linear-gradient(180deg, var(--cream1), var(--cream2) 45%, var(--cream1));
    -webkit-font-smoothing:antialiased;
  }

  a{ color:inherit; text-decoration:none; }
  button{ font-family:inherit; }

  .topbar{
    position:sticky; top:0; z-index:10;
    display:flex; align-items:center; padding:16px 20px;
    backdrop-filter:blur(8px); background:rgba(255,255,255,.55);
  }
  .back-btn{
    display:inline-flex; align-items:center; gap:6px;
    font-size:.88rem; font-weight:600; color:var(--pink-deep);
    padding:8px 14px; border-radius:999px; background:rgba(255,255,255,.7);
    box-shadow:0 2px 10px rgba(0,0,0,.06);
    transition:transform .15s ease;
  }
  .back-btn:active{ transform:scale(.96); }
  /* Logo brand di kanan topbar: identitas ikut terbawa di halaman produk,
     bukan cuma ada di landing. Diberi tap target 44px sebagai tautan. */
  .topbar-brand{ margin-left:auto; display:flex; align-items:center; min-height:44px; padding:4px 6px; }
  .topbar-brand img{ height:22px; width:auto; opacity:.92; }

  .wrap{
    max-width:480px; margin:0 auto; padding:28px 20px 80px;
  }

  /* Desktop: preview besar di kiri, info + tombol di kanan (bukan
     ditumpuk kayak mobile). Di bawah 860px tetap satu kolom. */
  @media (min-width:860px){
    .wrap{
      max-width:1080px; padding:56px 40px 100px;
      display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
      gap:56px; align-items:start;
    }
    .preview-col{ position:sticky; top:96px; }
    .info-col{ padding-top:8px; }
    .info-col .info{ margin-top:0; }
    .info h1{ font-size:2.1rem; }
    .desc{ font-size:1rem; }
  }

  /* ---------- preview ---------- */
  .preview-card{
    position:relative; border-radius:24px; overflow:hidden;
    aspect-ratio:9/16; max-height:64vh;
    box-shadow:var(--shadow);
    animation:fadeUp .6s ease both;
  }
  .preview-card.landscape{ aspect-ratio:16/9; max-height:44vh; }
  @media (min-width:860px){
    .preview-card{ max-height:82vh; width:100%; margin:0 auto; }
    .preview-card.landscape{ max-height:56vh; }
  }
  .preview-frame{
    position:absolute; top:0; left:0; border:none; pointer-events:none;
    background:#fff;
  }
  .live-badge{
    position:absolute; top:14px; left:14px; z-index:2;
    display:inline-flex; align-items:center; gap:5px;
    background:rgba(20,20,20,.55); color:#fff; font-size:.72rem; font-weight:600;
    padding:5px 10px 5px 8px; border-radius:999px; backdrop-filter:blur(4px);
  }
  .live-badge::before{
    content:''; width:6px; height:6px; border-radius:50%; background:#ff4d6d;
    animation:pulse 1.4s ease-in-out infinite;
  }
  @keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
  .preview-open{
    position:absolute; inset:0; z-index:3; display:block;
    background:linear-gradient(180deg, transparent 60%, rgba(0,0,0,.35));
  }
  .preview-open .hint{
    position:absolute; bottom:14px; left:14px; right:14px;
    color:#fff; font-size:.8rem; font-weight:600;
    display:flex; align-items:center; justify-content:space-between;
    background:rgba(20,20,20,.4); padding:9px 14px; border-radius:14px; backdrop-filter:blur(4px);
  }

  /* ---------- info ---------- */
  .info{ margin-top:26px; animation:fadeUp .6s ease .05s both; }
  .info h1{
    font-family:'Playfair Display',serif; font-size:1.7rem; font-weight:700;
    line-height:1.25; margin-bottom:12px;
  }
  .meta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
  .harga{
    font-size:1.15rem; font-weight:700; color:var(--pink-deep);
  }
  .terjual{
    font-size:.8rem; color:var(--text-muted); background:rgba(0,0,0,.05);
    padding:4px 10px; border-radius:999px;
  }

  /* ---------- promo 8.8 (dinyalakan kalau PROMO di produk-data.js berjalan) ---------- */
  .harga-lama{
    font-size:.95rem; font-weight:600; color:var(--text-muted);
    text-decoration:line-through; text-decoration-color:var(--pink-deep);
  }
  .diskon-pil{
    display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border-radius:999px;
    background:linear-gradient(135deg,#D10037,#A8002C); color:#fff;
    font-size:.72rem; font-weight:800; letter-spacing:.03em;
    box-shadow:0 6px 16px rgba(232,0,61,.35);
  }
  .diskon-pil .tgl{ background:#FFD166; color:#7A0022; border-radius:5px; padding:2px 5px; }
  .promo-nota{
    display:flex; align-items:center; gap:9px; margin:0 0 14px;
    padding:11px 13px; border-radius:14px;
    background:linear-gradient(135deg,rgba(255,20,147,.10),rgba(232,0,61,.12));
    border:1px solid rgba(232,0,61,.28);
    font-size:.82rem; font-weight:600; line-height:1.45; color:var(--pink-deep);
  }
  .promo-nota .emo{ font-size:1.15rem; }
  /* ---------- model harga add-on (foto & musik dijual terpisah) ---------- */
  /* Harga yang dipajang adalah harga template POLOS, jadi perlu penanda kecil
     supaya tidak terbaca sebagai harga lengkap. */
  .harga-mulai-nota{
    font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
    color:var(--pink-deep); background:rgba(255,20,147,.12);
    padding:4px 9px; border-radius:999px;
  }
  .addon-nota{
    display:block; margin:0 0 14px; padding:11px 13px; border-radius:14px;
    background:rgba(0,0,0,.035); border:1px solid rgba(0,0,0,.09);
    font-size:.82rem; line-height:1.55; color:var(--text-muted);
  }
  .addon-nota b{ color:var(--pink-deep); }
  /* Harga add-on diberi pil kuning-marun, bukan warna pink situs: di antara
     teks yang sudah serba pink, harga yang ikut pink justru terlewat. */
  .harga-pil{
    display:inline-block; vertical-align:middle;
    background:#FFD166; color:#7A0022;
    font-weight:800; font-size:.8em; letter-spacing:.01em;
    padding:2px 8px; border-radius:999px; white-space:nowrap;
  }

  .desc{ font-size:.95rem; line-height:1.7; color:var(--text-muted); }

  /* ---------- CTA ---------- */
  .cta-group{ margin-top:26px; display:flex; flex-direction:column; gap:12px; animation:fadeUp .6s ease .1s both; }
  .btn{
    display:flex; align-items:center; justify-content:center; gap:8px;
    width:100%; text-align:center; border:none; cursor:pointer;
    padding:15px; border-radius:999px; font-size:.98rem; font-weight:600;
    transition:transform .15s ease, opacity .2s ease, box-shadow .2s ease;
  }
  .btn:active{ transform:scale(.97); }
  .btn-demo-big{
    background:var(--white); color:var(--pink-deep);
    border:1.5px solid var(--pink-accent);
  }
  .btn-demo-big:hover{ background:rgba(255,133,161,.1); }
  .btn-order-big{
    /* Dulu gradien #FF69B4->#FF1493: teks putih di atasnya cuma 2,3:1 --
       gagal WCAG AA padahal ini CTA terpenting. Diganti gradien marun
       brand (5,6:1) yang juga menyamakan tampilannya dengan tombol utama
       di landing. */
    background:linear-gradient(135deg, var(--pink-deep), #A8002C);
    color:#fff; box-shadow:0 10px 26px rgba(209,0,55,.30);
  }
  .btn-order-big:hover{ opacity:.94; }
  .btn-order-big.sent{ background:linear-gradient(135deg,#6bbf7a,#4fae66); box-shadow:none; }

  /* ==========================================================
     LOADING STATE live demo — kartu preview memuat halaman kado
     sungguhan lewat iframe, jadi butuh penanda selama beberapa detik.
     ========================================================== */
  .preview-loading{
    position:absolute; inset:0; z-index:3;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
    background:var(--cream2); transition:opacity .35s ease;
  }
  .preview-card.demo-siap .preview-loading{ opacity:0; pointer-events:none; }
  .preview-loading .pl-spin{
    width:26px; height:26px; border-radius:50%;
    border:3px solid rgba(232,0,61,.2); border-top-color:var(--pink-deep);
    animation:plSpin .8s linear infinite;
  }
  .preview-loading .pl-teks{ font-size:.76rem; font-weight:600; color:var(--text-muted); }
  @keyframes plSpin{ to{ transform:rotate(360deg); } }
  @media (prefers-reduced-motion:reduce){ .preview-loading .pl-spin{ animation-duration:2.4s; } }

  /* ==========================================================
     TRUST MICRO-COPY tepat di bawah CTA (bukan jauh di bawah)
     ========================================================== */
  .cta-trust{
    display:flex; flex-wrap:wrap; justify-content:center; gap:6px 10px; margin-top:12px;
  }
  .cta-trust span{
    display:inline-flex; align-items:center; gap:5px;
    font-size:.72rem; font-weight:600; color:var(--text-muted);
    background:rgba(0,0,0,.04); border-radius:999px; padding:6px 10px; white-space:nowrap;
  }
  .cta-trust b{ color:var(--text); font-weight:700; }

  /* ==========================================================
     STICKY CTA (HP saja) — muncul setelah tombol utama tergulir lewat,
     supaya CTA-nya selalu ada tanpa menutupi tombol aslinya.
     ========================================================== */
  .sticky-cta{
    position:fixed; left:0; right:0; bottom:0; z-index:150;
    display:none; align-items:center; gap:12px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
    background:color-mix(in srgb,var(--white) 92%,transparent);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    border-top:1px solid rgba(232,0,61,.14);
    box-shadow:0 -6px 24px rgba(0,0,0,.10);
    transform:translateY(110%); transition:transform .28s cubic-bezier(.2,.8,.3,1);
  }
  .sticky-cta.tampil{ transform:translateY(0); }
  .sticky-cta-info{ flex:1; min-width:0; }
  .sticky-cta-harga{
    font-size:1.02rem; font-weight:800; color:var(--pink-deep); line-height:1.15;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .sticky-cta-sub{ font-size:.68rem; font-weight:600; color:var(--text-muted); margin-top:2px; }
  .sticky-cta .btn{
    /* tap target: 48px tinggi, lebih dari minimum 44px */
    width:auto; flex:0 0 auto; min-height:48px; padding:13px 22px;
    border-radius:999px; font-size:.95rem; margin:0;
  }
  @media (max-width:768px){
    .sticky-cta{ display:flex; }
    /* ruang di bawah biar isi halaman tidak ketutup bar-nya */
    body.ada-sticky-cta{ padding-bottom:78px; }
    /* tombol CS (kontak-cs.js) diangkat di atas bar — kalau tidak, keduanya
       bertumpuk di sudut yang sama dan CTA-nya jadi ketutup. */
    body.ada-sticky-cta #lulu-cs{ bottom:calc(84px + env(safe-area-inset-bottom,0px)) !important; }
  }

  /* ==========================================================
     FAQ — sama seperti landing: <details> native
     ========================================================== */
  .faq-sec{ margin-top:34px; }
  .faq-sec h2{
    font-family:'Playfair Display',serif; font-size:1.3rem; font-weight:700;
    margin-bottom:4px; color:var(--text);
  }
  .faq-sec .faq-sub{ font-size:.85rem; color:var(--text-muted); margin-bottom:14px; }
  .faq-list{ display:flex; flex-direction:column; gap:9px; }
  .faq-item{
    background:var(--white); border:1px solid rgba(232,0,61,.12);
    border-radius:14px; overflow:hidden;
  }
  .faq-item summary{
    display:flex; align-items:center; gap:10px; min-height:48px;
    padding:12px 14px; cursor:pointer; list-style:none;
    font-size:.9rem; font-weight:600; color:var(--text);
  }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary::after{
    content:'+'; margin-left:auto; flex-shrink:0;
    width:26px; height:26px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:rgba(209,0,55,.09); color:var(--pink-deep);   /* 9% -> ikon +/- lolos AA (4,74:1) */
    font-size:1.1rem; font-weight:700; line-height:1;
  }
  .faq-item[open] summary{ color:var(--pink-deep); }
  .faq-item[open] summary::after{ content:'−'; }
  .faq-item .faq-jawab{
    padding:0 14px 14px; font-size:.86rem; line-height:1.7; color:var(--text-muted);
  }
  .faq-item .faq-jawab b{ color:var(--text); font-weight:600; }

  /* ---------- brand kaki halaman ---------- */
  .produk-footer{
    margin-top:38px; padding-top:22px; border-top:1px solid rgba(232,0,61,.12);
    text-align:center;
  }
  .produk-footer img{ width:64px; height:auto; opacity:.9; margin-bottom:8px; }
  .produk-footer .tagline{
    font-family:'Playfair Display',serif; font-style:italic;
    font-size:.9rem; color:var(--pink-deep);
  }
  .produk-footer .kecil{ font-size:.75rem; color:var(--text-muted); margin-top:5px; }

  /* ---------- trust row ---------- */
  .trust{
    list-style:none; margin-top:28px; display:flex; flex-direction:column; gap:10px;
    animation:fadeUp .6s ease .15s both;
  }
  .trust li{
    display:flex; align-items:center; gap:10px; font-size:.83rem; color:var(--text-muted);
    background:rgba(255,255,255,.6); padding:11px 14px; border-radius:14px;
  }

  /* ---------- tautan panduan ----------
     Sengaja dibuat lebih tenang daripada tombol order di atasnya: ini
     jalan keluar buat pengunjung yang BELUM siap beli. Kalau tampilannya
     seramai CTA, ia bersaing dengan tombol order dan menarik keluar orang
     yang sebenarnya sudah mau bayar. Yang diincar cuma yang sedang ragu. */
  .panduan-tautan{
    margin-top:26px; padding:16px 18px; border-radius:16px;
    background:rgba(255,255,255,.55); border:1px solid rgba(0,0,0,.06);
  }
  .panduan-tautan h2{ margin:0 0 4px; font-size:.98rem; }
  .panduan-tautan > p{ margin:0 0 10px; font-size:.83rem; color:var(--text-muted); }
  .panduan-tautan ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
  .panduan-tautan a{
    display:block; font-size:.88rem; line-height:1.35; text-decoration:none;
    color:var(--text); border-bottom:1px solid transparent;
  }
  .panduan-tautan a:hover{ border-bottom-color:currentColor; }

  /* ---------- not found ---------- */
  .not-found{ text-align:center; padding:60px 20px; grid-column:1 / -1; }
  .not-found p{ font-size:1.05rem; color:var(--text-muted); margin-bottom:22px; }
  .not-found .btn-order-big{ max-width:280px; margin:0 auto; }

  .skeleton{ opacity:.5; }

  @keyframes fadeUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }

  @media (prefers-reduced-motion: reduce){
    .preview-card, .info, .cta-group, .trust{ animation:none; }
  }