/* Custom CSS untuk Multitalent Project */

.glass { 
    background: rgba(17, 24, 39, 0.8); 
    backdrop-filter: blur(12px); 
}

.hero-bg { 
    background: linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(17,24,39,1)), 
                url(''); 
    background-size: cover; 
}

.card-gradient:hover { 
    background: linear-gradient(135deg, #1e3a8a 0%, #111827 100%); 
    transition: 0.5s; 
}

/* Animasi Marquee Manual (Untuk Logo Klien) */
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.animate-marquee {
    display: flex;
    width: max-content;
    animation: marquee 20s linear infinite;
}

.brand-logo {
    height: 45px;
    width: auto;
    object-fit: contain;
    filter: grayscale(0%) brightness(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.brand-logo:hover {
    filter: grayscale(0%) brightness(100%);
    opacity: 1;
    transform: scale(1.1);
}

/* KUNCI AGAR SWIPER BERGERAK UNLIMITED & MULUS */
.swiper-wrapper {
    /* Ini wajib agar gerakan tidak berhenti tiap ganti slide */
    transition-timing-function: linear !important;
}

.swiper-pagination-bullet {
    background: #3b82f6 !important;
    opacity: 0.5;
}

.swiper-pagination-bullet-active {
    opacity: 1;
    width: 25px !important;
    border-radius: 5px !important;
    transition: all 0.3s;
}

/* Memastikan slide portfolio punya lebar tetap */
.portfolio-card {
    width: 350px !important;
}

@media (max-width: 768px) {
    #home h1 { font-size: 2.5rem !important; line-height: 1.2 !important; }
    #home p { font-size: 1.1rem !important; }
    .brand-logo { height: 35px !important; margin: 0 10px !important; }
    .portfolio-card { width: 280px !important; } /* Lebih kecil di HP */
    section { padding: 4rem 0 !important; }
}

.swiper-pagination {
    position: relative !important;
    margin-top: 2rem !important;
}

/* Pastikan ini ada supaya slider jalan mulus */
.swiper-wrapper {
    transition-timing-function: linear !important;
}

.portfolio-card {
    width: 350px !important;
}

@media (max-width: 768px) {
    .portfolio-card {
        width: 280px !important;
    }
}


/* Tambahkan ini di paling bawah file style.css */
.swiper-wrapper {
    transition-timing-function: linear !important;
}

.portfolio-card {
    width: 320px !important;
}<style>
        /* Mengubah vibe warna dasar dari biru ke ungu gelap */
        :root {
            --deep-purple: #0f0715;
            --mid-purple: #1e0b36;
        }
        body {
            background-color: var(--deep-purple) !important;
        }
        .hero-bg {
            background: radial-gradient(circle at center, #2e1065 0%, #0f0715 100%);
        }
        .glass {
            background: rgba(15, 7, 21, 0.8) !important;
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(139, 92, 246, 0.2) !important;
        }
        .card-gradient {
            background: linear-gradient(145deg, #160a25, #0f0715) !important;
        }
        /* Penyesuaian khusus untuk kalender agar vibe-nya ungu */
        .calendar-wrapper iframe {
            filter: invert(90%) hue-rotate(260deg) brightness(1.2) !important;
        }

        /* ========================================= */
        /* CSS WAJIB SWIPER (TAMBAHKAN INI AGAR GERAK) */
        /* ========================================= */
        
        /* 1. Agar gerakannya linear (tidak putus-putus) */
        .swiper-wrapper {
            transition-timing-function: linear !important;
        }

        /* 2. Memberikan lebar pasti pada kartu agar 'slidesPerView: auto' bekerja */
        .portfolio-card {
            width: 300px !important;  /* Sesuaikan lebar kartu di sini */
            margin-right: 20px;       /* Jarak antar kartu */
        }

        /* Responsif untuk HP (kartu lebih kecil) */
        @media (max-width: 768px) {
            .portfolio-card {
                width: 200px !important;
            }
        }


/* Membatasi lebar maksimal card layanan */
.servicesSwiper .swiper-slide {
    width: 350px !important; /* Sesuaikan lebar ini sesuai seleramu */
    height: auto;
}
    
/* Membuat pergerakan mulus jika ingin gaya marquee, 
   tapi jika ingin geser biasa (per slide) abaikan CSS linear ini */
.servicesSwiper .swiper-wrapper {
    transition-timing-function: linear !important;
}