/* Halaman produk Termaflex — tambahan kecil di atas CSS landing.
   CSS utama disalin otomatis dari landing-v2/index.html oleh tools/build_produk.py. */

/* intro hero pakai CSS murni: langsung jalan saat first paint, nggak nunggu GSAP (LCP).
   fill "backwards" biar setelah selesai, parallax GSAP (inline style) tetap jalan. */
.js .hero-in .wrap > * { animation:heroIn .8s var(--ease) backwards; }
.js .hero-in .wrap > *:nth-child(2) { animation-delay:.08s; }
.js .hero-in .wrap > *:nth-child(3) { animation-delay:.16s; }
@keyframes heroIn { from { opacity:0; transform:translateY(24px); } }

/* produk aktif di menu */
.hdr nav a[aria-current] { color:var(--or-t); }
.hdr nav a[aria-current]::after { transform:scaleX(1); }
.menu a.big[aria-current] { color:var(--or); }

/* breadcrumb di baris koordinat hero */
.hero .coord { flex-wrap:wrap; }
.hero .coord a:hover { color:#fff; }
.hero .coord [aria-current] { color:#fff; }
.hero .coord .pos { margin-left:auto; }

/* fakta berupa teks, bukan angka */
.stat b.txt { font-size:clamp(22px, 2.6vw, 36px); letter-spacing:-.02em; line-height:1.15; margin-bottom:8px; }

/* jenis: pakai baris area landing, deskripsi tetap kelihatan di HP */
.tlist .area { flex-direction:column; align-items:flex-start; gap:8px; cursor:default; }
.tlist .area .meta { text-align:left; }
.tlist .area .meta span { display:inline; max-width:520px; color:var(--ink-2); font-size:15px; }
@media (min-width:720px) {
  .tlist .area { flex-direction:row; align-items:center; }
  .tlist .area .meta { text-align:right; }
}

/* produk berikutnya */
.next { height:auto; min-height:88svh; }
.next .next-link { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.next h2 { font-size:clamp(68px, 16vw, 240px); max-width:none; margin:0; transition:color .3s; }
.next .next-link i { flex:none; width:64px; height:64px; margin-bottom:12px; border-radius:100px; background:var(--or); color:#fff; display:grid; place-items:center; transition:transform .4s var(--ease); }
.next .next-link i svg { width:24px; height:24px; }
.next .next-link:hover h2 { color:var(--or); }
.next .next-link:hover i { transform:translateX(8px); }
.next .next-sub { margin:16px 0 32px; max-width:440px; color:rgba(255,255,255,.82); font-size:17px; }
.seri { display:flex; gap:8px; flex-wrap:wrap; padding-top:24px; border-top:1px solid var(--line-l); }
.seri .chip { display:inline-flex; align-items:center; }
.seri .chip:hover { border-color:#fff; }
.seri .chip[aria-current] { background:#fff; color:var(--ink); border-color:#fff; }
@media (max-width:719px) {
  .next .next-link { gap:16px; }
  .next h2 { font-size:14vw; }
  .next .next-link i { width:52px; height:52px; }
}