/* =====================================================================
   Kartu Rating E-Commerce
   Dipakai bersama oleh halaman Tentang Kami dan preview di admin
   (admin/pages/rating_manager.php) supaya hasilnya identik.
   ===================================================================== */
.rating-marquee {
    position: relative; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.45) 0, #000 3%, #000 97%, rgba(0,0,0,0.45) 100%);
            mask-image: linear-gradient(90deg, rgba(0,0,0,0.45) 0, #000 3%, #000 97%, rgba(0,0,0,0.45) 100%);
}
.rating-track {
    display: flex; gap: 1.5rem; width: max-content;
    animation: ratingScroll var(--rating-duration, 40s) linear infinite;
}
.rating-marquee:hover .rating-track { animation-play-state: paused; }
@keyframes ratingScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-50% - 0.75rem)); }
}

.rating-card {
    position: relative; flex: 0 0 auto;
    width: 420px; aspect-ratio: 16 / 9;
    background: #fff; border: 1px solid rgba(212,175,55,0.15);
    overflow: hidden; transition: border-color .3s ease, transform .3s ease;
}
.rating-marquee .rating-card:hover { border-color: rgba(212,175,55,0.5); transform: translateY(-4px); }

/* Potongan foto: zoom + titik fokus (persen), diatur dari admin */
.rating-card img {
    width: 100%; height: 100%; display: block;
    object-fit: cover;
    object-position: var(--x, 50%) var(--y, 50%);
    transform: scale(var(--z, 1));
    transform-origin: var(--x, 50%) var(--y, 50%);
    user-select: none; -webkit-user-drag: none;
}

.rating-badge {
    position: absolute; left: 0.75rem; top: 0.75rem;
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.3rem 0.7rem; background: rgba(10,10,10,0.82);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    font-family: 'DM Sans', sans-serif; font-size: 0.7rem; letter-spacing: 0.08em;
    text-transform: uppercase; color: #F5F0E8; line-height: 1.3;
}
.rating-badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--mp-color); }

.rating-score {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; align-items: center; gap: 0.6rem;
    padding: 1.6rem 0.9rem 0.7rem;
    background: linear-gradient(180deg, transparent, rgba(10,10,10,0.88));
    font-family: 'DM Sans', sans-serif; color: #F5F0E8; line-height: 1.2;
}
.rating-score-num { font-family: 'Playfair Display', serif; font-size: 1.35rem; font-weight: 700; color: #D4AF37; }
.rating-stars { position: relative; display: inline-block; font-size: 0.85rem; letter-spacing: 2px; color: rgba(245,240,232,0.25); }
.rating-stars span { position: absolute; left: 0; top: 0; width: var(--fill, 100%); overflow: hidden; white-space: nowrap; color: #D4AF37; }
.rating-score-note { margin-left: auto; font-size: 0.72rem; color: rgba(245,240,232,0.75); text-align: right; }

@media (max-width: 767px) {
    .rating-marquee .rating-card { width: 300px; }
    .rating-track { gap: 1rem; }
    @keyframes ratingScroll { to { transform: translateX(calc(-50% - 0.5rem)); } }
}
@media (prefers-reduced-motion: reduce) {
    .rating-track { animation-duration: 120s; }
}