/* css/products.css */

/* 1. Isolasi Render Section: Browser hanya merender saat mendekati layar */
#products,
.products-section {
   content-visibility: auto;
   contain-intrinsic-size: auto 650px; /* Estimasi tinggi akurat agar scrollbar tidak melompat */
}

/* 2. Judul Section */
.section-title-red {
   color: var(--color-maroon, #9c0004);
   font-weight: 800;
   font-size: clamp(
      1.8rem,
      4vw,
      2.5rem
   ); /* Responsif otomatis tanpa media query berat */
   text-transform: uppercase;
   letter-spacing: 2px;
   border-top: 2px solid var(--color-lightgrey, #e0e0e0);
   border-bottom: 2px solid var(--color-lightgrey, #e0e0e0);
   display: inline-block;
   padding: 10px 30px;
   margin-bottom: 35px;
}

/* 3. Kartu Produk: Isolasi DOM ketat */
.product-card-modern {
   position: relative;
   display: block;
   overflow: hidden;
   aspect-ratio: 4 / 3;
   border-radius: 6px;
   text-decoration: none !important;
   background-color: #1a1a1a; /* Placeholder warna gelap sebelum gambar termuat */

   /* contain: content mengisolasi layout, paint, dan style secara bersamaan */
   contain: content;
}

/* 4. Gambar: Optimalisasi GPU Layer & Transisi Ringan */
.product-card-modern img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.4, 1);
   /* CATATAN: will-change sengaja TIDAK ditaruh di sini agar tidak membebani VRAM HP secara konstan */
}

/* Promosikan GPU Layer HANYA saat kursor menyentuh kartu (sangat hemat memori) */
.product-card-modern:hover img {
   transform: scale(1.06);
   will-change: transform;
}

/* 5. Gradient Overlay: Minimalis tanpa beban compositing ganda */
.product-card-overlay {
   position: absolute;
   inset: 40% 0 0 0; /* Pengganti bottom/left/width/height (lebih ringkas & cepat diproses browser) */
   background: linear-gradient(
      to top,
      rgba(156, 0, 4, 0.9) 0%,
      rgba(156, 0, 4, 0.4) 60%,
      transparent 100%
   );
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   padding: 18px;
   color: #ffffff;
   pointer-events: none; /* Mencegah overhead perhitungan kursor */
}

/* 6. Detail Tipografi di Dalam Kartu */
.product-number {
   font-size: 2.2rem;
   font-weight: 900;
   line-height: 1;
   margin: 0;
   color: #ffffff;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.product-divider {
   width: 32px;
   height: 2px;
   background-color: rgba(255, 255, 255, 0.85);
   margin: 6px 0 8px 0;
}

.product-name {
   font-size: 1.15rem;
   font-weight: 600;
   margin: 0;
   color: #ffffff;
   line-height: 1.3;
   text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* 7. Matikan efek zoom gambar jika pengunjung mengaktifkan mode hemat daya / 'Reduce Motion' */
@media (prefers-reduced-motion: reduce) {
   .product-card-modern img {
      transition: none;
   }
   .product-card-modern:hover img {
      transform: none;
   }
}