/* ==========================================================
   SCI MEDIA — PRODUCT SHOWCASE (VERSI FINAL v2)
   Perbaikan: blob lebih terlihat, scribble posisi tepat,
   checklist minimalis, aspect-ratio gambar lebih tinggi,
   border tipis berwarna pada card.
   ========================================================== */

.products {
  position: relative;
  background-color: #E9F2FC;
  padding-block: var(--space-20);
  overflow: hidden;
}

/* ---------- Dekorasi Background ---------- */
.products__bg-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.products__bg-blob--tl {
  top: -80px;
  left: -80px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(46, 107, 224, 0.12), transparent 70%);
}

.products__bg-blob--br {
  bottom: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.1), transparent 70%);
}

.products__dots {
  position: absolute;
  top: 15%;
  left: 5%;
  width: 60px;
  height: 60px;
  background-image: radial-gradient(circle, rgba(46, 107, 224, 0.35) 1.5px, transparent 1.5px);
  background-size: 12px 12px;
  pointer-events: none;
  z-index: 0;
}

/* ---------- Header ---------- */
.products__header {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: var(--space-16);
}

.products__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  background-color: var(--color-white);
  border: 1px solid rgba(46, 107, 224, 0.15);
  box-shadow: 0 2px 8px rgba(46, 107, 224, 0.08);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-blue-600);
  margin-bottom: var(--space-5);
}

.products__eyebrow svg {
  width: 12px;
  height: 12px;
  color: var(--color-orange-500);
}

.products__header h2 {
  margin-bottom: var(--space-4);
  color: var(--color-navy-900);
  font-size: var(--fs-h2);
  line-height: 1.15;
}

.products__title-accent {
  color: var(--color-blue-500);
}

.products__header p {
  margin-inline: auto;
  color: var(--color-ink-600);
  max-width: 52ch;
}

/* ---------- Grid ---------- */
.products__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

/* ---------- Product Card ---------- */
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}

/* Warna background card per tema */
.product-card--blue {
  background: linear-gradient(180deg, #F0F6FF 0%, #FFFFFF 60%);
  border-color: rgba(46, 107, 224, 0.15);
}

.product-card--orange {
  background: linear-gradient(180deg, #FFF7ED 0%, #FFFFFF 60%);
  border-color: rgba(242, 121, 12, 0.15);
}

.product-card--purple {
  background: linear-gradient(180deg, #F5F0FF 0%, #FFFFFF 60%);
  border-color: rgba(139, 92, 246, 0.15);
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -12px rgba(10, 23, 48, 0.15);
}

/* Blob dekoratif di bawah card */
.product-card::before {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -20%;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.product-card--blue::before {
  background: radial-gradient(circle, rgba(46, 107, 224, 0.12), transparent 70%);
}

.product-card--orange::before {
  background: radial-gradient(circle, rgba(242, 121, 12, 0.12), transparent 70%);
}

.product-card--purple::before {
  background: radial-gradient(circle, rgba(139, 92, 246, 0.12), transparent 70%);
}

/* ---------- Ikon & Scribble ---------- */
.product-card__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  color: var(--color-white);
  margin-bottom: var(--space-6);
  z-index: 1;
}

.product-card--blue .product-card__icon {
  background-color: var(--color-blue-500);
  box-shadow: 0 8px 20px -4px rgba(46, 107, 224, 0.35);
}

.product-card--orange .product-card__icon {
  background-color: var(--color-orange-500);
  box-shadow: 0 8px 20px -4px rgba(242, 121, 12, 0.35);
}

.product-card--purple .product-card__icon {
  background-color: #8B5CF6;
  box-shadow: 0 8px 20px -4px rgba(139, 92, 246, 0.35);
}

.product-card__icon svg {
  width: 22px;
  height: 22px;
  position: relative;
  z-index: 1;
}

/* Scribble dekoratif — diposisikan di kanan ikon dengan aman */
.product-card__icon-scribble {
  position: absolute;
  top: 50%;
  left: calc(100% + 8px);
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background-image:
    linear-gradient(45deg, transparent 44%, currentColor 44%, currentColor 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, currentColor 44%, currentColor 56%, transparent 56%);
  background-size: 12px 12px;
  background-repeat: no-repeat;
  background-position: center;
  color: var(--color-orange-500);
  opacity: 0.8;
  pointer-events: none;
}

.product-card--orange .product-card__icon-scribble {
  color: #8B5CF6;
}

.product-card--purple .product-card__icon-scribble {
  color: var(--color-orange-500);
}

/* ---------- Teks ---------- */
.product-card__title {
  position: relative;
  z-index: 1;
  margin-bottom: var(--space-3);
  color: var(--color-navy-900);
  font-size: 1.25rem; /* Ukuran lebih sedang */
  font-weight: var(--fw-bold);
  line-height: 1.3;
}

.product-card__desc {
  position: relative;
  z-index: 1;
  color: var(--color-ink-600);
  margin-bottom: var(--space-5);
  font-size: var(--fs-small);
  line-height: 1.6;
}

/* ---------- Fitur Checklist ---------- */
.product-card__features {
  position: relative;
  z-index: 1;
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.product-card__features li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-small);
  color: var(--color-ink-600);
  font-weight: var(--fw-medium);
}

.product-card__features svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.product-card--blue .product-card__features svg {
  color: var(--color-blue-500);
}

.product-card--orange .product-card__features svg {
  color: var(--color-orange-500);
}

.product-card--purple .product-card__features svg {
  color: #8B5CF6;
}

/* ---------- CTA Button (Pill) ---------- */
.product-card__cta {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-full);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--color-white);
  align-self: flex-start;
  margin-bottom: var(--space-6);
  transition: transform var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}

.product-card--blue .product-card__cta {
  background-color: var(--color-blue-500);
  box-shadow: 0 6px 16px -4px rgba(46, 107, 224, 0.4);
}

.product-card--orange .product-card__cta {
  background-color: var(--color-orange-500);
  box-shadow: 0 6px 16px -4px rgba(242, 121, 12, 0.4);
}

.product-card--purple .product-card__cta {
  background-color: #8B5CF6;
  box-shadow: 0 6px 16px -4px rgba(139, 92, 246, 0.4);
}

.product-card__cta svg {
  width: 15px;
  height: 15px;
  transition: transform var(--dur-base) var(--ease-standard);
}

.product-card:hover .product-card__cta {
  transform: translateY(-2px);
}

.product-card:hover .product-card__cta svg {
  transform: translateX(3px);
}

/* ---------- Media (Gambar Produk) ---------- */
.product-card__media {
  position: relative;
  z-index: 1;
  aspect-ratio: 16 / 10; /* Lebih lebar agar mockup tidak terpotong */
  margin-top: auto;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  transition: transform var(--dur-slow) var(--ease-standard);
}

.product-card:hover .product-card__media img {
  transform: scale(1.03);
}

.product-card__media.is-missing img {
  display: none;
}

.product-card__media-placeholder {
  display: none;
  position: absolute;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-2);
  padding: var(--space-4);
  color: var(--color-ink-400);
  background: linear-gradient(155deg, var(--color-surface), var(--color-blue-100));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.product-card__media.is-missing .product-card__media-placeholder {
  display: flex;
}

.product-card__media-placeholder small {
  font-size: var(--fs-caption);
  word-break: break-all;
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .product-card,
  .product-card__cta,
  .product-card__media img {
    transition: none;
  }
  .product-card:hover {
    transform: none;
  }
  .product-card:hover .product-card__media img {
    transform: none;
  }
}

/* ---------- Responsive ---------- */
@media (min-width: 768px) {
  .products__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .products__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }

  .product-card {
    padding: var(--space-6);
  }
}

/* ==========================================================
   PRODUCT CARD — FADE IN ANIMATION
   Card muncul dengan fade + slide up saat section masuk viewport.
   ========================================================== */

/* State awal: tersembunyi, sedikit turun */
.product-card {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 700ms var(--ease-standard),
              transform 700ms var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}

/* Staggered delay — card muncul berurutan */
.product-card:nth-child(1) { transition-delay: 0ms; }
.product-card:nth-child(2) { transition-delay: 150ms; }
.product-card:nth-child(3) { transition-delay: 300ms; }

/* State akhir: terlihat */
.product-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hover tetap bekerja setelah animasi selesai */
.product-card.is-visible:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -12px rgba(10, 23, 48, 0.2);
}

/* Aksesibilitas: kalau user prefer reduced motion, langsung tampil */
@media (prefers-reduced-motion: reduce) {
  .product-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .product-card.is-visible:hover {
    transform: none;
  }
}