/* ==========================================
           1. LAYOUT HALAMAN
           ========================================== */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        /*body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: #f0f2f5;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
        }*/

        .card-container {
            background-color: #ffffff;
            width: 100%;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
        }

        .title {
            font-size: 24px;
            font-weight: 700;
            color: #111827;
            margin-bottom: 24px;
        }

        .description {
            margin-top: 24px;
            color: #4b5563;
            font-size: 15px;
            line-height: 1.6;
        }

        /* ==========================================
           2. CAROUSEL ANIMATION CSS
           ========================================== */
        .carousel-viewport {
            background-color: #e5e7eb;
            overflow: hidden;
            position: relative;
            /* Efek pudar di tepi kiri & kanan */
            mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
            -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
        }

        .carousel-track {
            display: flex;
            width:auto;
            animation: infinite-scroll 20s linear infinite;
        }

        /* Paus animasi saat kursor diarahkan ke carousel */
        .carousel-viewport:hover .carousel-track {
            animation-play-state: paused;
        }

        .logo-strip {
            display: flex;
            align-items: center;
            justify-content: space-around;
            background-color: #ffffff;
            padding: 15px 0;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
            flex-shrink: 0;
            min-width: 100%;
        }

        .logo-item {
            padding: 0 30px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .logo-item img {
            height: 40px; /* Ukuran tinggi logo */
            width: auto;
            object-fit: contain;
            opacity: 0.85;
            transition: opacity 0.2s ease, transform 0.2s ease;
        }

        .logo-item img:hover {
            opacity: 1;
            transform: scale(1.08);
        }

        /* Keyframes untuk Infinite Loop */
        @keyframes infinite-scroll {
            0% {
                transform: translateX(0);
            }
            100% {
                /* Bergeser sejauh 1 grup logo (50% dari total track) */
                transform: translateX(-50%);
            }
        }