/* ============================================================
   CEMAL CEMIL OCA — PREMIUM EFFECTS (pink hierarkis)
   Prinsip: SEMUA teks bernuansa pink; teks BESAR lebih premium
   (foil berkilau + timbul tegas), teks kecil pink halus.
   Non-destruktif: tidak mengubah font/struktur asli.
   Dipanggil SETELAH CSS utama supaya menang di cascade.
   ============================================================ */

/* ------------------------------------------------------------------
   1. JUDUL UTAMA "Cemal Cemil Oca" — foil pink berkilau (paling premium)
   ------------------------------------------------------------------ */
.hero-title {
  background: linear-gradient(
    180deg,
    #FBC7E2 0%,
    #F9A8D4 24%,
    #F472B6 42%,
    #EC4899 60%,
    #DB2777 80%,
    #BE185D 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.85))
          drop-shadow(0 2px 5px rgba(236, 72, 153, 0.38))
          drop-shadow(0 5px 16px rgba(236, 72, 153, 0.24));
}

/* ------------------------------------------------------------------
   2. JUDUL SECTION (teks besar) — foil pink berkilau (premium kelas 2)
   ------------------------------------------------------------------ */
.section-title {
  background: linear-gradient(
    180deg,
    #FBC7E2 0%,
    #F9A8D4 35%,
    #F472B6 60%,
    #BE185D 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.80))
          drop-shadow(0 2px 5px rgba(236, 72, 153, 0.28))
          drop-shadow(0 4px 12px rgba(236, 72, 153, 0.16));
}

/* ------------------------------------------------------------------
   3. SEMUA TEKS = nuansa pink.
      Gunakan filter rona pink agar ikut tema (tidak mengubah font).
      Teks heading kecil (h3+) = timbul pink sedang.
   ------------------------------------------------------------------ */
/* Heading kecil: nama produk, fitur, step, info card, testimoni */
.product-name,
.feature-title,
.step-title,
.info-card h3 {
  color: var(--pink-700, #BE185D);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.80), 0 2px 4px rgba(236, 72, 153, 0.22);
}

/* brand name navbar */
.brand-name {
  color: var(--pink-700, #BE185D);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.70), 0 2px 4px rgba(236, 72, 153, 0.20);
}

/* judul CTA (teks besar di latar pink) */
.cta-copy h2 {
  color: #FFF6FB;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55), 0 2px 8px rgba(131, 24, 67, 0.35);
}

/* ------------------------------------------------------------------
   4. PARAGRAF / TEKS KECIL — pink lembut tapi JELAS terbaca
   (class asli dari JS bundle: hero-desc, product-desc, product-body,
    section-subtitle, feature-desc, step-desc, footer-desc, dll)
   ------------------------------------------------------------------ */
.section-subtitle,
.hero-desc,
.hero-copy,
.product-desc,
.product-body,
.feature-desc,
.step-desc,
.info-card p,
.footer-desc,
.social-card-body,
.testi-channel-desc,
.testi-invite-text {
  color: var(--rose-600, #B23A6B);
}

/* ------------------------------------------------------------------
   5. EYEBROW hero ("DESSERT HOMEMADE") — Kembalikan ke warna matcha ASLI
   Karena span ini ada DI DALAM .hero-title yang kita beri gradient
   foil, kita harus reset background-clip & kembalikan warna aslinya
   supaya tetap hijau matcha (bukan ikut jadi foil pink).
   ------------------------------------------------------------------ */
.hero-title .hero-title-eyebrow {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--matcha-500, #7FA76A);
  filter: none;
}

/* ------------------------------------------------------------------
   6. ANIMASI — kilau lembut badge, reveal sinematik halus
   ------------------------------------------------------------------ */
.section-badge {
  position: relative;
  overflow: hidden;
}
.section-badge::after {
  content: '';
  position: absolute;
  top: 0;
  left: -80%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-20deg);
  animation: premiumShimmer 4.2s ease-in-out infinite;
}
@keyframes premiumShimmer {
  0%   { left: -80%; }
  55%  { left: 130%; }
  100% { left: 130%; }
}

/* Reveal sinematik halus */
.reveal {
  transition:
    opacity 0.75s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
  filter: blur(2px);
}
.reveal.is-visible { filter: blur(0); }

/* Hover kartu produk: angkat halus 4px */
.product-card {
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.product-card:hover { transform: translateY(-4px); }

/* ------------------------------------------------------------------
   7. PERF & AKSESIBILITAS
   ------------------------------------------------------------------ */
@media (max-width: 640px) {
  .reveal { filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .section-badge::after { animation: none !important; }
  .reveal { transition: none !important; filter: none !important; }
  .product-card:hover { transform: none !important; }
}