/* Hormati pengguna yang memilih mengurangi animasi */
        @media (prefers-reduced-motion: reduce) {
            .reveal, .reveal-left, .reveal-right, .reveal-scale, .reveal-stagger > * {
                transition: none !important;
                opacity: 1 !important;
                transform: none !important;
            }
        }

        /* Base state: elemen belum terlihat */
        .reveal,
        .reveal-left,
        .reveal-right,
        .reveal-scale {
            opacity: 0;
            will-change: transform, opacity;
            transition: opacity 0.9s cubic-bezier(.22,.68,0,1.01), transform 0.9s cubic-bezier(.22,.68,0,1.01);
        }
        .reveal { transform: translateY(48px); }
        .reveal-left { transform: translateX(-56px); }
        .reveal-right { transform: translateX(56px); }
        .reveal-scale { transform: scale(0.9); }

        /* State setelah masuk viewport */
        .reveal.in-view,
        .reveal-left.in-view,
        .reveal-right.in-view,
        .reveal-scale.in-view {
            opacity: 1;
            transform: none;
        }

        /* Stagger untuk grid/kartu di dalam sebuah section */
        .reveal-stagger > * {
            opacity: 0;
            transform: translateY(36px);
            transition: opacity 0.7s cubic-bezier(.22,.68,0,1.01), transform 0.7s cubic-bezier(.22,.68,0,1.01);
        }
        .reveal-stagger.in-view > * {
            opacity: 1;
            transform: none;
        }
        .reveal-stagger.in-view > *:nth-child(1) { transition-delay: 0.05s; }
        .reveal-stagger.in-view > *:nth-child(2) { transition-delay: 0.15s; }
        .reveal-stagger.in-view > *:nth-child(3) { transition-delay: 0.25s; }
        .reveal-stagger.in-view > *:nth-child(4) { transition-delay: 0.35s; }
        .reveal-stagger.in-view > *:nth-child(5) { transition-delay: 0.45s; }
        .reveal-stagger.in-view > *:nth-child(6) { transition-delay: 0.55s; }
        .reveal-stagger.in-view > *:nth-child(n+7) { transition-delay: 0.6s; }

        /* Transisi halus untuk interaksi hover pada kartu produk, berita, promo, benefit, galeri */
        .product-card,
        .card-news,
        .card-promo,
        .item-benefit,
        .section-11 .gallery .img-box,
        .section-11 .img-box img {
            transition: transform 0.45s cubic-bezier(.22,.68,0,1.01), box-shadow 0.45s ease;
        }
        .product-card:hover,
        .card-news:hover,
        .card-promo:hover {
            transform: translateY(-8px);
            box-shadow: 0 18px 40px rgba(0,0,0,0.12);
        }

        .card-news:hover .news-title,
        .card-news:hover .news-desc,
        .card-news:hover .readmore {
            padding-right: 16px;
            padding-left: 16px;
        }
        .product-card:hover .product-img img,
        .card-news:hover .img-box img {
            transform: scale(1.06);
        }
        .product-img img,
        .card-news .img-box img {
            transition: transform 0.6s cubic-bezier(.22,.68,0,1.01);
        }
        .item-benefit:hover {
            transform: translateY(-6px);
        }
        .item-benefit img {
            transition: transform 0.5s ease;
        }
        .item-benefit:hover img {
            transform: rotate(-6deg) scale(1.08);
        }
        .section-11 .gallery .img-box {
            overflow: hidden;
        }
        .section-11 .gallery:hover .img-box img {
            transform: scale(1.12);
        }
        .btn {
            transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease;
        }
        .btn:hover {
            transform: translateY(-3px);
        }

        .section-hero .subheading,
        .section-hero h1 {
            opacity: 0;
            animation: heroFadeUp 1s ease-out forwards;
        }
        .section-hero .subheading { animation-delay: 0.2s; }
        .section-hero h1 { animation-delay: 0.4s; }

        @keyframes heroZoom {
            0% { transform: scale(1.08); }
            100% { transform: scale(1); }
        }
        @keyframes heroFadeUp {
            0% { opacity: 0; transform: translateY(24px); }
            100% { opacity: 1; transform: translateY(0); }
        }
        

        .product-thumb {
    width: 70px;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
}
.product-thumb.active {
    border-color: #ffc107; /* samain sama text-warning */
}
.product-thumb img {
    display: block;
}