/* ========================================= */
/* 1. CORE & GLOBAL TYPOGRAPHY               */
/* ========================================= */
@font-face {
    font-family: 'SK-Modernist';
    src: url('asset/Sk-Modernist-Regular.otf') format('opentype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

:root {
    --accent-red: #E61E2A;
    --dark-studio: #0A0A0A;
    --white-studio: #FFFFFF;
    --transition-smooth: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

h1, h2, h3, h4, .font-heading {
    font-family: 'SK-Modernist', sans-serif !important;
    letter-spacing: -0.05em;
    line-height: 0.9;
}

body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    background-color: var(--white-studio);
    transition: background-color 0.5s ease;
}

body.dark {
    background-color: var(--dark-studio);
}

/* ========================================= */
/* 2. MARQUEE SYSTEM (REVENUEBASE LOOK)      */
/* ========================================= */
.animate-marquee {
    display: flex;
    gap: 0 !important;
    /* Durasi 30s agar lebih elegan/lambat seperti referensi */
    animation: marquee-fix 30s linear infinite;
}

.brand-logo-final {
    /* Karena ada 4 logo, kita beri space 25% */
    flex: 0 0 25%;
    width: 25%;
    /* Tinggi logo dibuat sedikit lebih kecil agar elegan */
    height: 40px; 
    object-fit: contain;
    /* Padding horizontal diperlebar agar tidak terlihat sesak */
    padding: 0 50px; 
    /* Efek logo pudar khas Revenuebase */
    filter: grayscale(1) opacity(0.3);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.dark .brand-logo-final {
    /* Di mode dark, opacity dibuat lebih rendah agar menyatu */
    filter: grayscale(1) opacity(0.4) invert(1);
}

.brand-logo-final:hover {
    filter: grayscale(0) opacity(1);
    transform: scale(1.05);
}

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

/* ========================================= */
/* 3. RESPONSIVE ENGINE                      */
/* ========================================= */

/* TABLET */
@media (max-width: 1024px) {
    .brand-logo-final {
        height: 35px;
        padding: 0 20px;
    }
}

/* MOBILE (HP) */
@media (max-width: 768px) {
    h1, .hero-title {
        font-size: 3.5rem !important;
        line-height: 0.85 !important;
    }
    
    h2 { font-size: 2.3rem !important; }

    @media (max-width: 768px) {
    .brand-logo-final {
        /* Di HP logo lebih rapat */
        flex: 0 0 33.33%; 
        width: 33.33%;
        height: 30px;
        padding: 0 25px;
    }
}
    section {
        padding: 60px 0 !important;
    }

    #produk .grid, #layanan .grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    #custom-cursor { display: none !important; }
}

/* ========================================= */
/* 4. NAVBAR & UI                            */
/* ========================================= */
#navbar {
    transition: var(--transition-smooth);
    z-index: 100;
}

#navbar.nav-scrolled {
    padding: 0.8rem 0 !important;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.dark #navbar.nav-scrolled {
    background-color: rgba(10, 10, 10, 0.85);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
git add .
git commit -m "Fix: test sync automation"
git push origin CTM