/*

File: components.css

Deskripsi: Komponen UI spesifik (Slider, Marquee, Hover Effects, Background).
*/

/* STREAMING_CHUNK:Latar belakang Hero dengan overlay gradient... */
.hero-bg {
background-image: linear-gradient(135deg, rgba(2, 6, 23, 0.92) 0%, rgba(30, 41, 59, 0.8) 100%), url('https://images.unsplash.com/photo-1541882672323-95b86ea61439?q=80&w=2000&auto=format&fit=crop');
background-size: cover;
background-position: center;
background-attachment: fixed;
}

/* STREAMING_CHUNK:Kustomisasi tombol navigasi Swiper.js... */
.swiper-pagination-bullet {
background: #64748b;
opacity: 0.5;
transition: all 0.3s ease;
}
.swiper-pagination-bullet-active {
background: #38bdf8;
width: 24px;
border-radius: 4px;
opacity: 1;
}

/* STREAMING_CHUNK:Animasi Marquee (Berjalan) untuk logo klien/brand... */
.marquee-container {
display: flex;
overflow-x: hidden;
width: 100%;
}

.marquee-content {
display: flex;
animation: marquee 25s linear infinite;
}

/* Berhenti saat disorot mouse */
.marquee-content:hover {
animation-play-state: paused;
}

@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}

/* STREAMING_CHUNK:Efek perbesar gambar saat hover (Kartu Portofolio)... */
.img-zoom-container {
overflow: hidden;
}

.img-zoom-container img {
transition: transform 0.7s ease;
will-change: transform;
}

.img-zoom-container:hover img {
transform: scale(1.08);
}