/* ======================================================= */
    /* --- KEYFRAMES ANIMATION --- */
    /* ======================================================= */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes fadeInScale {
        from {
            opacity: 0;
            transform: scale(0.8);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    @keyframes pulseBorder {
        0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(74, 143, 240, 0.4); }
        70% { transform: scale(1.1); box-shadow: 0 0 0 10px rgba(74, 143, 240, 0); }
        100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(74, 143, 240, 0); }
    }

    @keyframes starSpin {
        0% { transform: rotate(0deg) translateY(0px) translateX(0px); opacity: 0; }
        50% { opacity: 1; }
        100% { transform: rotate(360deg) translateY(-10px) translateX(10px); opacity: 1; }
    }

    @keyframes backgroundShapeIn {
        0% { transform: translate(-100px, -100px) scale(0.5) rotate(45deg); opacity: 0; }
        100% { transform: translate(-10px, -10px) scale(1) rotate(0deg); opacity: 1; }
    }

    @keyframes pulse {
            0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(74, 143, 240, 0.4); }
            70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(74, 143, 240, 0); }
            100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(74, 143, 240, 0); }
        }


        /* ======================================================= */
        /* --- CSS GLOBAL & LAYOUT DASAR --- */
        /* ======================================================= */
        body {
            font-family: 'Poppins', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #ffffff;
            color: #333;
            overflow-x: hidden;
        }

        .container {
            max-width: 1300px;
            margin: 0 auto;
            padding: 0 50px;
        }

        .blue-text {
            color: #4a8ff0;
        }

        /* ======================================================= */
        /* --- 1. HEADER & NAVIGATION --- */
        /* ======================================================= */
        .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 50px;
        background-color: #0b1a3d;
        
        /* PROPERTI UNTUK STICKY HEADER */
        position: sticky; /* Menetapkan posisi sticky */
        top: 0;          /* Mengunci elemen di bagian atas (0 piksel dari atas viewport) */
        z-index: 1000;   /* Memastikan header selalu di atas konten lain */
    }
        .logo {
            font-size: 24px;
            font-weight: 800;
            color: white;
            display: flex;
            align-items: center;
        }

        .logo-img {
        width: 15%; /* Style asli Anda */
        min-width: 150px; /* Mencegah logo terlalu kecil */
        height: auto;
        transition: width 0.3s;
    }

    .nav-menu {
        display: flex;
        align-items: center;
        gap: 30px; /* Jarak antara nav dan tombol */
    }

    /* Tombol Hamburger */
    .hamburger-menu {
        display: none; /* Sembunyi di desktop */
        flex-direction: column;
        justify-content: space-around;
        width: 2rem;
        height: 2rem;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 10;
    }

    .hamburger-menu .bar {
        display: block;
        width: 2rem;
        height: 3px;
        background-color: white;
        border-radius: 10px;
        transition: all 0.3s ease-in-out;
    }

        .logo span {
            margin-right: 5px;
            color: #4a8ff0;
        }
        .nav-links a {
            color: white;
            text-decoration: none;
            margin-left: 30px;
            font-size: 15px;
            opacity: 0.8;
            padding-bottom: 5px;
            transition: opacity 0.3s, border-bottom 0.3s;
        }
        .nav-links a:hover {
            opacity: 1;
        }
        .nav-links a.active {
            font-weight: 600;
            opacity: 1;
            border-bottom: 3px solid white; 
        }
        .cta-button {
            background-color: #4a8ff0;
            color: white;
            padding: 10px 20px;
            text-decoration: none;
            border-radius: 5px;
            font-weight: 600;
            transition: transform 0.2s ease, background-color 0.3s; /* Tambahkan transform untuk hover */
        }
        .cta-button:hover {
            background-color: #0056b3;
            transform: translateY(-2px); /* Efek mengangkat saat hover */
        }

        /* ======================================================= */
        /* --- 2. HERO SECTION (Tampilan Utama) --- */
        /* ======================================================= */
        .hero-section {
            padding: 100px 50px 150px 50px;
            background-color: #0b1a3d;
            position: relative;
            overflow: hidden;
            color: white;
            display: flex;
            align-items: center;
        }
        .hero-inner {
            display: flex;
            width: 100%;
            z-index: 2;
        }
        .hero-content {
            max-width: 55%;
        }
        /* Animasi pada konten Hero */
        .hero-content > * {
            opacity: 0;
            animation: fadeInUp 1s forwards;
        }
        .hero-content .subtitle { animation-delay: 0.2s; }
        .hero-content .hero-title { animation-delay: 0.4s; }
        .hero-content .hero-description { animation-delay: 0.6s; }
        .hero-content .hero-actions { animation-delay: 0.8s; }

        .subtitle {
            font-size: 16px;
            color: #4a8ff0;
            margin-bottom: 10px;
        }
        .subtitle::before {
            content: '//';
            font-weight: bold;
            margin-right: 8px;
        }
        .hero-title {
            font-size: 64px;
            line-height: 1.1;
            margin-top: 0;
            margin-bottom: 20px;
            font-weight: 900;
        }
        .hero-description {
            font-size: 18px;
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 40px;
            line-height: 1.6;
            max-width: 85%;
        }
        .hero-actions a {
            margin-right: 15px;
            padding: 12px 25px;
            text-decoration: none;
            border-radius: 5px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            transition: all 0.3s;
        }
        .btn-primary {
            background-color: #4a8ff0;
            color: white;
        }
        .btn-primary:hover {
            background-color: #0056b3;
        }
        .btn-secondary {
            background-color: transparent;
            color: white;
            border: 2px solid rgba(255, 255, 255, 0.5);
        }
        .btn-secondary:hover {
            border-color: white;
        }
        .arrow {
            margin-left: 10px;
            font-size: 1.1em;
        }
        .hero-image-overlay {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            width: 50%;
            background-image: url('https://accurate.id/wp-content/uploads/2024/05/accurate.id-Mockup.webp');
            background-size: cover;
            background-position: center;
            opacity: 0.6;
            z-index: 1;
        }
        .hero-image-overlay::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(to left, rgba(11, 26, 61, 0.2) 0%, #0b1a3d 100%);
        }

        /* ======================================================= */
    /* --- 3. ABOUT US SECTION (SCROLL TRIGGERED) --- */
    /* ======================================================= */
    .about-section {
        display: flex;
        align-items: center;
        margin: 120px auto;
        gap: 80px;
        padding: 0 50px;
        overflow: hidden;
    }

    /* --- KIRI: IMAGE GALLERY --- */
    .image-gallery {
        flex: 1;
        gap: 15px;
        position: relative;
        z-index: 2;
    }

    .image-gallery img {
        width: 100%;
    }

    /* Animasi Background Shape 
    .image-gallery::before {
        content: '';
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background: linear-gradient(135deg, #4a8ff0, #0056b3); 
        border-top-left-radius: 80px; border-bottom-left-radius: 80px;
        border-top-right-radius: 10px; border-bottom-right-radius: 100px;
        z-index: 1;
        transform: translate(-10px, -10px);
        
        /* STATE AWAL: Sembunyi 
        opacity: 0; 
        transition: opacity 0.5s;
    } */

    /* Animasi Kotak Gambar */
    .image-box {
        overflow: hidden;
        border-radius: 15px;
        z-index: 5;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        height: 280px;
        transition: transform 0.5s ease;
        
        /* STATE AWAL: Sembunyi */
        opacity: 0;
    }
    .image-box:hover { transform: scale(1.05); }

    .image-box img { width: 100%; height: 100%; display: block; object-fit: cover; }

    /* STATE AKTIF: Jalankan animasi satu per satu */
    .image-box.active {
        animation: fadeInUp 0.8s ease-out forwards;
    }
    /* Delay diatur di sini agar berurutan */
    .image-gallery .box-1.active { animation-delay: 0.2s; }
    .image-gallery .box-2.active { animation-delay: 0.4s; }
    .image-gallery .box-3.active { animation-delay: 0.6s; }
    .image-gallery .box-4.active { animation-delay: 0.8s; }

    /* Badge Hire Us */
    .hire-us-badge {
        position: absolute; bottom: 30%; right: 30%;
        transform: translate(50%, 50%);
        width: 100px; height: 100px;
        background-color: white;
        border-radius: 50%; border: 4px solid #4a8ff0;
        z-index: 10;
        display: flex; align-items: center; justify-content: center;
        font-size: 10px; color: #4a8ff0; font-weight: bold;
        text-transform: uppercase;
        box-shadow: 0 0 0 8px rgba(74, 143, 240, 0.3);
        
        /* STATE AWAL */
        opacity: 0;
    }
    .hire-us-badge.active {
        animation: pulseBorder 2s infinite cubic-bezier(0.66, 0, 0, 1), fadeInScale 1s ease-out forwards;
        animation-delay: 1s; /* Muncul terakhir */
    }

    /* Dekorasi Bintang */
    .star-decoration {
        position: absolute; top:20%; left: 20%;
        font-size: 40px; color: #4a8ff0;
        transform: rotate(15deg); z-index: 1;
        
        /* STATE AWAL */
        opacity: 0;
    }



    .star-decoration.active {
        animation: starSpin 3s ease-in-out infinite alternate;
        animation-delay: 1.2s;
    }


    /* --- KANAN: KONTEN TEKS --- */
    .content-right { flex: 1.2; }

    /* Target semua elemen anak langsung di kanan */
    .content-right .pre-heading,
    .content-right .main-title,
    .content-right p,
    .content-right .stats-grid,
    .content-right .signature-area {
        /* STATE AWAL */
        opacity: 0;
    }

    /* STATE AKTIF */
    .content-right .pre-heading.active,
    .content-right .main-title.active,
    .content-right p.active,
    .content-right .stats-grid.active,
    .content-right .signature-area.active {
        animation: fadeInUp 1s ease-out forwards;
    }

    /* Urutan Delay */
    .content-right .pre-heading.active { animation-delay: 0.1s; }
    .content-right .main-title.active { animation-delay: 0.3s; }
    .content-right p.active { animation-delay: 0.5s; }
    .content-right .stats-grid.active { animation-delay: 0.7s; }
    .content-right .signature-area.active { animation-delay: 0.9s; }

    /* ... (Sisa style teks sama seperti sebelumnya) ... */
    .stats-grid {
        display: flex;
        gap: 50px;
        margin-bottom: 40px;
    }
    .stat-number {
        font-size: 36px;
        color: #4a8ff0;
        font-weight: 900;
        margin-bottom: 5px;
        /* Opacity akan diatur oleh JS agar terlihat setelah delay */
    }
    .stat-label {
        font-size: 14px;
        color: #666;
    }
    .signature-area {
        padding-top: 20px;
        border-top: 1px solid #eee;
    }
    .signature-area .signature-img {
        font-family: 'Brush Script MT', cursive;
        font-size: 52px;
        color: #333;
        line-height: 1;
        margin-bottom: 5px;
    }
    .signature-area .signer-info {
        font-size: 15px;
        color: #333;
        font-weight: 500;
    }

        /* ======================================================= */
        /* --- 4. SERVICES SECTION --- */
        /* ======================================================= */
        .services-section {
            padding: 80px 50px;
            background-color: #f7f9fc;
            text-align: center;
            position: relative;
        }
        .services-section::before {
            content: 'SERVICES';
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 150px;
            font-weight: 900;
            color: rgba(0, 0, 0, 0.03);
            pointer-events: none;
            z-index: 1;
        }
        .services-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1200px;
            margin: 0 auto 50px auto;
            text-align: left;
            z-index: 2;
            position: relative;
        }
        .services-heading-group {
            max-width: 600px;
        }
        .services-header .subtitle {
            font-size: 16px;
            color: #4a8ff0;
            margin-bottom: 10px;
        }
        .services-header .subtitle::before {
            content: '//';
            font-weight: bold;
            margin-right: 8px;
        }
        .services-header .main-title {
            font-size: 40px;
            font-weight: 800;
            line-height: 1.2;
            margin: 0;
            color: #333;
        }
        .services-header .blue-button {
            background-color: #4a8ff0;
            color: white;
            padding: 10px 20px;
            text-decoration: none;
            border-radius: 8px;
            font-weight: 600;
            transition: background-color 0.3s;
        }
        .services-header .blue-button:hover {
            background-color: #0056b3;
        }
        .services-cards-grid {
            display: flex;
            justify-content: center;
            gap: 30px;
            max-width: 1200px;
            margin: 0 auto;
            z-index: 2;
            position: relative;
        }

        .service-card {
            background-color: white;
            padding: 40px;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); /* Shadow lebih halus */
            flex: 1;
            text-align: left;
            border: 2px solid transparent;
            transition: border-color 0.3s, transform 0.3s ease, box-shadow 0.3s ease; /* Tambahkan transisi */
        }

        .service-card:hover {
            transform: translateY(-5px); /* Efek mengangkat saat hover */
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }

        .service-card:first-child {
            border-color: #4a8ff0;
        }

        .service-card .icon-box {
            width: 60px;
            height: 60px;
            background-color: #4a8ff0;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            margin-bottom: 20px;
            font-size: 28px;
            color: white;
        }
        
        .service-card h3 {
            font-size: 20px;
            font-weight: 700;
            margin-top: 0;
            margin-bottom: 15px;
        }

        .service-card p {
            font-size: 15px;
            color: #666;
            line-height: 1.6;
            margin-bottom: 25px;
        }

        .service-card .learn-more {
            text-decoration: none;
            color: #333;
            font-weight: 600;
            display: flex;
            align-items: center;
            transition: color 0.3s;
        }

        .service-card .learn-more:hover {
            color: #4a8ff0;
        }
        
        .service-card .learn-more .arrow {
            margin-left: 8px;
            transition: margin-left 0.3s;
        }
        .service-card .learn-more:hover .arrow {
            margin-left: 12px;
        }

        /* ======================================================= */
        /* --- 5. WORK PROCESS SECTION --- */
        /* ======================================================= */
        .work-process-section {
            padding: 80px 50px;
            background-color: white;
            text-align: center;
            position: relative;
        }
        .work-process-section::before {
            content: 'WORK PROCESS';
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 150px;
            font-weight: 900;
            color: rgba(0, 0, 0, 0.03);
            pointer-events: none;
            z-index: 1;
        }
        .process-header {
            margin-bottom: 60px;
            z-index: 2;
            position: relative;
        }
        .process-header .subtitle {
            font-size: 16px;
            color: #4a8ff0;
            margin-bottom: 5px;
        }
        .process-header .subtitle::before {
            content: '//';
            font-weight: bold;
            margin-right: 8px;
        }
        .process-header .main-title {
            font-size: 40px;
            font-weight: 800;
            line-height: 1.2;
            margin: 0;
            color: #333;
        }
        .process-steps {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            max-width: 1100px;
            margin: 0 auto;
            z-index: 2;
            position: relative;
        }
        .process-step-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            padding: 0 15px;
        }
        .process-step-item:not(:last-child)::after {
            content: '';
            position: absolute;
            top: 30px;
            right: 0;
            width: calc(100% - 100px);
            height: 2px;
            background-color: #ddd;
            z-index: 1;
            transform: translateX(50%);
        }

        .icon-container {
            width: 70px;
            height: 70px;
            background-color: #4a8ff0;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            position: relative;
            z-index: 5;
            box-shadow: 0 0 0 10px rgba(74, 143, 240, 0.1);
            transition: transform 0.3s ease;
            animation: pulse 2s infinite cubic-bezier(0.66, 0, 0, 1); /* Tambahkan animasi pulse */
        }
        
        .icon-container .icon {
            color: white;
            font-size: 30px;
        }

        .icon-container .number-badge {
            position: absolute;
            top: 0;
            right: -10px;
            width: 30px;
            height: 30px;
            background-color: #333;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 600;
            border: 3px solid white;
        }

        .process-step-item h3 {
            font-size: 20px;
            font-weight: 700;
            margin-top: 0;
            margin-bottom: 15px;
            color: #333;
        }

        .process-step-item p {
            font-size: 15px;
            color: #666;
            line-height: 1.6;
        }

        /* ======================================================= */
        /* --- 6. LATEST PROJECTS SECTION --- */
        /* ======================================================= */
        .projects-section {
            padding: 80px 50px;
            background-color: #f7f9fc;
            text-align: center;
            position: relative;
            animation: fadeInUp 1s forwards;
        }
        .projects-section::before {
            content: 'LATEST PROJECTS';
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 150px;
            font-weight: 900;
            color: rgba(0, 0, 0, 0.03);
            pointer-events: none;
            z-index: 1;
        }
        .projects-header {
            margin-bottom: 60px;
            z-index: 2;
            position: relative;
        }
        .projects-header .subtitle {
            font-size: 16px;
            color: #4a8ff0;
            margin-bottom: 5px;
        }
        .projects-header .subtitle::before {
            content: '//';
            font-weight: bold;
            margin-right: 8px;
        }
        .projects-header .main-title {
            font-size: 40px;
            font-weight: 800;
            line-height: 1.2;
            margin: 0;
            color: #333;
        }
        .projects-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            max-width: 1200px;
            margin: 0 auto 40px auto;
            z-index: 2;
            position: relative;
        }
        .project-card {
            background-color: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
            position: relative;
            cursor: pointer;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        

        .project-card:hover {
            transform: translateY(-8px); /* Efek mengangkat lebih kuat */
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
        }
        .project-image-container {
            width: 100%;
            height: 350px;
            overflow: hidden;
            position: relative;
        }
        .project-image-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .project-info {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 20px 25px;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.1));
            color: white;
            text-align: left;
        }
        .project-info h3 {
            font-size: 20px;
            font-weight: 700;
            margin: 0 100px 10px 0;
            line-height: 1.3;
            color: white;
            text-decoration: none;
        }
        .project-tags {
            display: flex;
            gap: 10px;
            margin-bottom: 10px;
        }
        .project-tag {
            background-color: rgba(255, 255, 255, 0.2);
            color: white;
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 12px;
            font-weight: 500;
        }
        .project-card .view-icon {
            position: absolute;
            bottom: 25px;
            right: 25px;
            width: 40px;
            height: 40px;
            background-color: #4a8ff0;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: white;
            transition: transform 0.3s ease;
        }
        .project-card:hover .view-icon {
            transform: rotate(360deg); /* Efek putar saat hover */
        }
        
        .view-all-button {
            background-color: #4a8ff0;
            color: white;
            padding: 12px 25px;
            text-decoration: none;
            border-radius: 8px;
            font-weight: 600;
            transition: background-color 0.3s;
        }
        .view-all-button:hover {
            background-color: #0056b3;
        }

        

        /* ======================================================= */
        /* --- 7. NEWS & BLOGS SECTION --- */
        /* ======================================================= */
        .blogs-section {
            padding: 80px 50px;
            background-color: white;
            text-align: center;
            position: relative;
        }
        .blogs-section::before {
            content: 'NEWS & BLOGS';
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 150px;
            font-weight: 900;
            color: rgba(0, 0, 0, 0.03);
            pointer-events: none;
            z-index: 1;
        }
        .blogs-header {
            margin-bottom: 60px;
            z-index: 2;
            position: relative;
        }
        .blogs-header .subtitle {
            font-size: 16px;
            color: #4a8ff0;
            margin-bottom: 5px;
        }
        .blogs-header .subtitle::before {
            content: '//';
            font-weight: bold;
            margin-right: 8px;
        }
        .blogs-header .main-title {
            font-size: 40px;
            font-weight: 800;
            line-height: 1.2;
            margin: 0;
            color: #333;
        }
        .blogs-grid {
            display: flex;
            justify-content: center;
            gap: 30px;
            max-width: 1200px;
            margin: 0 auto 40px auto;
            z-index: 2;
            position: relative;
        }
        .blog-card {
            background-color: white;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            flex: 1;
            text-align: left;
            overflow: hidden;
            border: 2px solid transparent; 
            transition: border-color 0.3s, transform 0.3s ease, box-shadow 0.3s ease;
        }

        .blog-card:hover {
            transform: translateY(-5px); /* Efek mengangkat saat hover */
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }

        .blog-card:first-child {
            border-color: #4a8ff0;
        }
        .blog-image-container {
            position: relative;
            height: 200px;
            overflow: hidden;
        }
        .blog-image-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.5s ease;
        }
        .blog-card:hover .blog-image-container img {
            transform: scale(1.1); /* Zoom in effect on hover */
        }
        .blog-category-tag {
            position: absolute;
            bottom: 15px;
            left: 15px;
            background-color: #4a8ff0;
            color: white;
            padding: 5px 12px;
            border-radius: 5px;
            font-size: 13px;
            font-weight: 600;
        }
        .blog-content {
            padding: 25px;
        }
        .blog-meta {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            color: #666;
            margin-bottom: 15px;
        }
        .blog-meta .icon {
            color: #4a8ff0;
            font-size: 16px;
        }
        .blog-card h3 {
            font-size: 20px;
            font-weight: 700;
            margin: 0 0 15px 0;
            line-height: 1.3;
        }
        .blog-card p {
            font-size: 15px;
            color: #666;
            line-height: 1.6;
            margin-bottom: 25px;
        }
        .blog-card .read-more {
            text-decoration: none;
            color: #4a8ff0;
            font-weight: 600;
            display: flex;
            align-items: center;
            transition: color 0.3s;
        }
        .blog-card .read-more:hover {
            color: #0056b3;
        }
        
        .blog-card .read-more .arrow {
            margin-left: 8px;
            transition: margin-left 0.3s;
        }
        .blog-card .read-more:hover .arrow {
            margin-left: 12px;
        }

        /* ======================================================= */
        /* --- 8. FAQ & CONTACT SECTION --- */
        /* ======================================================= */
        .faq-section {
            padding: 80px 50px;
            background-color: #f7f9fc;
            position: relative;
        }
        .faq-section::before {
            content: 'FAQS';
            position: absolute;
            top: 20px;
            left: 50px;
            font-size: 150px;
            font-weight: 900;
            color: rgba(0, 0, 0, 0.03);
            pointer-events: none;
            z-index: 1;
        }
        .faq-layout-grid {
            display: flex;
            gap: 40px;
            max-width: 1200px;
            margin: 0 auto;
            z-index: 2;
            position: relative;
        }
        .faq-content {
            flex: 2;
            text-align: left;
        }
        .faq-header {
            margin-bottom: 40px;
        }
        .faq-header .subtitle {
            font-size: 16px;
            color: #4a8ff0;
            margin-bottom: 5px;
        }
        .faq-header .subtitle::before {
            content: '//';
            font-weight: bold;
            margin-right: 8px;
        }
        .faq-header .main-title {
            font-size: 40px;
            font-weight: 800;
            line-height: 1.2;
            margin: 0;
            color: #333;
        }
        .faq-header .main-title span {
            color: #4a8ff0;
        }
        .accordion-item {
            margin-bottom: 10px;
            border-radius: 10px;
            background-color: white;
            overflow: hidden;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
            border: 1px solid #eee;
            transition: border-color 0.3s, box-shadow 0.3s;
        }
        
        .accordion-item.active {
            border-color: #4a8ff0;
            box-shadow: 0 4px 15px rgba(74, 143, 240, 0.2);
        }

        .accordion-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 18px 25px;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            color: #333;
            transition: color 0.3s, background-color 0.3s;
        }
        
        .accordion-item.active .accordion-header {
            color: white;
            background-color: #4a8ff0;
        }
        
        .accordion-header .toggle-icon {
            font-size: 24px;
            line-height: 1;
            font-weight: 300;
            transition: transform 0.3s;
        }
        
        .accordion-item.active .accordion-header .toggle-icon {
            transform: rotate(180deg); /* Animasi panah */
        }

        .accordion-content {
            padding: 0 25px;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease-out, padding 0.4s ease-out;
            color: #666;
            background-color: #fcfdff;
        }
        
        .accordion-item.active .accordion-content {
            max-height: 200px;
            padding: 15px 25px 25px 25px;
        }

        .faq-sidebar {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 20px;
        }
        .sidebar-card-1 {
            background-color: #0b1a3d;
            color: white;
            padding: 30px;
            border-radius: 15px;
            text-align: center;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
        .sidebar-card-1 .icon-chat {
            font-size: 36px;
            margin-bottom: 15px;
            color: #4a8ff0;
        }
        .sidebar-card-1 h4 {
            font-size: 20px;
            font-weight: 700;
            margin: 0 0 10px 0;
        }
        .sidebar-card-1 p {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 20px;
            line-height: 1.5;
        }
        .sidebar-card-1 .contact-button {
            background-color: #4a8ff0;
            color: white;
            padding: 10px 25px;
            text-decoration: none;
            border-radius: 8px;
            font-weight: 600;
            display: inline-block;
            transition: background-color 0.3s, transform 0.2s;
        }
        .sidebar-card-1 .contact-button:hover {
            background-color: #0056b3;
            transform: translateY(-1px);
        }
        
        .sidebar-card-2 {
            background-color: white;
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            display: flex;
            align-items: center;
            gap: 15px;
            text-align: left;
            transition: transform 0.3s ease;
        }
        .sidebar-card-2:hover {
            transform: scale(1.02); /* Sedikit membesar saat hover */
        }
        
        .sidebar-card-2 .icon-phone {
            font-size: 36px;
            color: #4a8ff0;
        }
        
        .sidebar-card-2 .info-text small {
            font-size: 12px;
            color: #666;
            display: block;
            margin-bottom: 5px;
        }
        
        .sidebar-card-2 .info-text h5 {
            font-size: 18px;
            font-weight: 700;
            margin: 0;
        }
        
        .sidebar-card-2 .info-text .phone-number {
            font-size: 16px;
            color: #333;
            font-weight: 600;
            margin-top: 5px;
        }

        /* ======================================================= */
        /* --- 9. FOOTER SECTION --- */
        /* ======================================================= */
        .footer-top {
            background-color: #0b1a3d;
            padding: 80px 50px 50px 50px;
            color: white;
        }
        .footer-cta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 40px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            margin-bottom: 40px;
        }
        .footer-cta h2 {
            font-size: 36px;
            font-weight: 800;
            margin: 0;
        }
        .footer-cta .contact-btn {
            background-color: #4a8ff0;
            color: white;
            padding: 12px 30px;
            text-decoration: none;
            border-radius: 8px;
            font-weight: 600;
            transition: background-color 0.3s, transform 0.2s;
        }
        .footer-cta .contact-btn:hover {
            background-color: #0056b3;
            transform: scale(1.05); /* Sedikit membesar saat hover */
        }

        .footer-main-content {
            display: flex;
            justify-content: space-between;
            gap: 40px;
        }
        .footer-col {
            padding-right: 20px;
        }
        .col-about {
            flex: 2.5;
            max-width: 350px;
        }
        .footer-logo {
            font-size: 24px;
            font-weight: 800;
            color: white;
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        .footer-logo .logo-icon {
            width: 30px;
            height: 30px;
            background-color: #4a8ff0;
            border-radius: 50%;
            display: inline-block;
            margin-right: 10px;
        }
        .footer-col p {
            font-size: 15px;
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.6;
            margin-bottom: 25px;
        }
        .social-icons a {
            display: inline-flex;
            width: 40px;
            height: 40px;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            align-items: center;
            justify-content: center;
            color: white;
            margin-right: 10px;
            font-size: 18px;
            transition: background-color 0.3s, transform 0.3s;
        }
        .social-icons a:hover {
            background-color: #4a8ff0;
            transform: translateY(-3px) rotate(5deg); /* Efek mengangkat dan berputar */
        }
        .col-nav, .col-contact {
            flex: 1.5;
        }
        .footer-col h4 {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 20px;
        }
        .footer-col ul {
            list-style: none;
            padding: 0;
        }
        .footer-col ul li {
            margin-bottom: 12px;
        }
        .footer-col ul li a, .footer-col .contact-item {
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
            font-size: 15px;
            transition: color 0.3s;
        }
        .footer-col ul li a:hover {
            color: #4a8ff0;
        }
        .footer-col .contact-item {
            display: block;
        }
        
        .col-newsletter {
            flex: 2;
        }
        .newsletter-form {
            display: flex;
            margin-top: 20px;
            overflow: hidden;
            border-radius: 8px;
        }
        .newsletter-form input[type="email"] {
            flex-grow: 1;
            padding: 12px 15px;
            border: none;
            background-color: rgba(255, 255, 255, 0.1);
            color: white;
            font-size: 15px;
        }
        .newsletter-form input[type="email"]::placeholder {
            color: rgba(255, 255, 255, 0.5);
        }
        .newsletter-form button {
            background-color: #4a8ff0;
            border: none;
            padding: 12px 15px;
            color: white;
            cursor: pointer;
            font-size: 18px;
            transition: background-color 0.3s;
        }
        .newsletter-form button:hover {
            background-color: #0056b3;
        }

        .footer-bottom {
            background-color: #4a8ff0;
            padding: 15px 50px;
            color: white;
            font-size: 14px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .footer-bottom-links a {
            color: white;
            text-decoration: none;
            margin-left: 20px;
            transition: opacity 0.3s;
        }
        .footer-bottom-links a:hover {
            opacity: 0.8;
        }


    /* FILTER CONTAINER */
    .filter-container {
    background: #0d1a2f; /* Warna biru gelap pada container luar */
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }

    .filter-bar {
        display: flex;
        gap: 15px; /* Jarak antar elemen filter */
        align-items: center;
        justify-content: space-evenly;
    }

    /* Gaya untuk Grup Input (pencarian dan dropdown) */
    .input-group {
        background-color: #ffffff; /* Latar belakang input putih */
        border-radius: 8px;
        display: flex;
        align-items: center;
        flex-grow: 1; /* Agar input mengisi ruang yang tersedia */
        max-width: 300px; /* Batasan lebar */
        height: 50px;
    }

    /* Gaya Input Pencarian */
    .search-input {
        min-width: 300px; /* Agar input pencarian lebih panjang */
    }

    .search-input input[type="text"] {
        border: none;
        outline: none;
        font-size: 16px;
        flex-grow: 1;
        margin-left: 10px;
    }

    .search-input .fa-search {
        color: #6c757d; /* Warna ikon */
        font-size: 18px;
    }

    /* Gaya Dropdown (Select) */
    .dropdown-input {
        position: relative;
        padding: 0;
    }

    .dropdown-input select {
        appearance: none; /* Menyembunyikan tampilan default dropdown */
        -webkit-appearance: none;
        -moz-appearance: none;
        border: none;
        outline: none;
        background: transparent;
        font-size: 16px;
        color: #333;
        padding: 10px 40px 10px 15px; /* Padding untuk teks dan ruang untuk ikon */
        width: 100%;
        cursor: pointer;
        height: 50px;
        border-radius: 8px; /* Pastikan select mewarisi border-radius */
    }

    .dropdown-input .fa-chevron-down {
        position: absolute;
        right: 15px;
        color: #6c757d;
        font-size: 14px;
        pointer-events: none; /* Agar klik tetap tembus ke elemen select */
    }

    /* Gaya Tombol Hapus Filter */
    .clear-button {
        background-color: #1a2a47; /* Warna latar belakang biru/gelap yang lebih terang dari container */
        color: #ffffff; /* Teks putih */
        border: none;
        border-radius: 8px;
        padding: 10px 15px;
        font-size: 16px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 8px;
        height: 50px;
        transition: background-color 0.2s;
    }

    .clear-button .fa-sun {
        color: #f7b731; /* Warna ikon kuning/emas */
    }

    .clear-button:hover {
        background-color: #263e63;
    }

        /* ======================================================= */
    /* --- 10. RESPONSIVE MEDIA QUERIES --- */
    /* ======================================================= */

    /* --- TABLET (Layar sedang, misal: iPad) --- */
    @media (max-width: 1024px) {
        .container, .header {
            padding-left: 30px;
            padding-right: 30px;
        }

        /* Ubah layout 2-kolom (About, FAQ) jadi 1-kolom */
        .about-section,
        .faq-layout-grid {
            flex-direction: column;
            gap: 40px;
        }
        
        .content-right {
            flex: 1; /* Reset basis */
        }

        /* Ubah layout 3 & 4 kolom menjadi 2-kolom */
        .services-cards-grid,
        .blogs-grid,
        .process-steps {
            flex-wrap: wrap; /* Izinkan item turun baris */
            justify-content: center;
            gap: 20px;
        }
        .service-card,
        .blog-card,
        .process-step-item {
            flex-basis: 45%; /* Jadi 2-kolom */
            flex-grow: 1;
            margin-bottom: 20px;
        }

        /* Sembunyikan garis proses di tablet */
        .process-step-item:not(:last-child)::after {
            display: none;
        }
        
        /* Ubah grid proyek 2-kolom jadi 1-kolom */
        .projects-grid {
            grid-template-columns: 1fr;
        }

        /* Ubah footer 4-kolom jadi 2-kolom */
        .footer-main-content {
            flex-wrap: wrap;
        }
        .footer-col {
            flex-basis: 45%; /* Jadi 2-kolom */
            min-width: 250px;
            margin-bottom: 30px;
        }

        /* Kurangi ukuran font besar */
        .hero-title {
            font-size: 52px;
        }
        .services-header .main-title {
            font-size: 36px;
            text-align: center;
        }
        
        /* Sesuaikan header */
        .header .logo img {
            width: 150px; /* Atur lebar logo di tablet */
        }
        .nav-links a {
            margin-left: 20px;
            font-size: 14px;
        }
    }


    /* --- MOBILE (Layar kecil, misal: iPhone, Samsung) --- */
    @media (max-width: 768px) {
        /* Kurangi padding global */
        .container, .header {
            padding-left: 20px;
            padding-right: 20px;
            flex-direction: column;
            gap: 25px;
        }

        .stat-number {
            font-size: 20px;
        }
        
        /* Kurangi padding section */
        section {
            padding-top: 60px;
            padding-bottom: 60px;
        }
        
        .services-section,
        .work-process-section,
        .projects-section,
        .blogs-section,
        .faq-section {
            padding-left: 20px;
            padding-right: 20px;
        }

        /* --- Header --- */
        .header {
            flex-direction: row; /* PAKSA jadi baris, bukan kolom */
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px; /* Padding mobile */
        }
        
        .logo-img {
            width: 180px; /* Ukuran logo di mobile */
        }

        /* Sembunyikan menu desktop */
        .nav-menu {
            display: none; /* Sembunyikan menu utama */
            flex-direction: column;
            align-items: center;
            gap: 20px;
            
            /* Ini adalah menu dropdown full-screen */
            position: absolute;
            top: 80px; /* Sesuaikan dengan tinggi header Anda */
            left: 0;
            width: 100%;
            background-color: #0b1a3d; /* Latar belakang menu dropdown */
            padding: 20px 0;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }
        
        /* Tampilkan menu saat .active */
        .nav-menu.active {
            display: flex;
        }

        /* Tampilkan tombol hamburger di mobile */
        .hamburger-menu {
            display: flex;
        }

        /* Sembunyikan .nav-links lama di mobile (sudah dibungkus) */
        .nav-links {
            flex-direction: column;
            align-items: center;
            gap: 15px;
            width: 100%;
            padding-top: 0;
            border-top: none;
        }
        
        /* --- Animasi Hamburger Menjadi 'X' --- */
        .hamburger-menu.active .bar:nth-child(1) {
            transform: translateY(11px) rotate(45deg);
        }
        .hamburger-menu.active .bar:nth-child(2) {
            opacity: 0;
        }
        .hamburger-menu.active .bar:nth-child(3) {
            transform: translateY(-11px) rotate(-45deg);
        }

        /* --- Hero --- */
        .hero-section {
            padding: 60px 0 60px 0;
            text-align: center;
        }

        .hero-actions a{
            margin-bottom: 10px;
        }
        .hero-inner {
            flex-direction: column;
        }
        .hero-content {
            max-width: 100%; /* Gunakan lebar penuh */
        }
        .hero-title {
            font-size: 36px; /* Lebih kecil lagi */
        }
        .hero-description {
            font-size: 16px;
            max-width: 100%;
        }
        .hero-actions {
            justify-content: center;
            flex-direction: column; /* Tumpuk tombol */
            gap: 15px;
        }
        .hero-image-overlay {
            display: block; /* Sembunyikan gambar latar di mobile agar hemat tempat */
        }

        /* --- Layout 1-Kolom --- */
        /* Semua yang 2-kolom di tablet, jadi 1-kolom di mobile */
        .service-card,
        .blog-card,
        .process-step-item,
        .footer-col {
            flex-basis: 100%; /* Semua jadi 1-kolom */
        }

        /* Sembunyikan teks latar belakang dekoratif */
        .services-section::before,
        .work-process-section::before,
        .projects-section::before,
        .blogs-section::before,
        .faq-section::before {
            display: none;
        }
        
        /* Sesuaikan ukuran font heading utama */
        .main-title {
            font-size: 32px;
        }

        /* --- Footer --- */
        .footer-cta {
            flex-direction: column;
            gap: 20px;
            text-align: center;
        }
        .footer-main-content {
            text-align: center;
        }
        .social-icons {
            justify-content: center;
        }
        .footer-bottom {
            flex-direction: column-reverse; /* Copyright di bawah */
            gap: 10px;
            text-align: center;
            padding: 1px;
        }
        .footer-bottom-links a {
            margin: 0 10px;
        }
    }