/* --- Global & Font Setup --- */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body,
html {
    width: 100%;
    overflow-x: hidden;
    font-family: "Inter", sans-serif;
    background-color: #0b0a1d; /* Fallback background */
    /* WARNA FONT BARU: Teks isi utama (putih redup) */
    color: #e0e0e0;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* --- Hero Section --- */
.hero-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    padding-top: 10rem;
    max-width: 650px;

    /* --- TAMBAHKAN BARIS INI UNTUK RATA KIRI --- */
    margin-left: 6rem;
}

.hero-video-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(11, 10, 29, 0.8), rgba(11, 10, 29, 0.8));
    z-index: 2;
}

/* --- Navbar --- */
#header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    background: transparent !important;
    border-bottom: none !important;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

/* --- TAMBAHKAN BLOK BARU INI --- */
#header .logo img {
    max-height: 200px !important; /* Coba 45px dan tambahkan !important */
    width: auto !important;
    height: auto; /* Memastikan style bootstrap tertimpa */
}

.nav-menu {
    display: flex;
    list-style: none;
}

.nav-menu li {
    margin-left: 2rem;
}

.nav-menu a {
    color: #e0e0e0;
    text-decoration: none;
    font-size: 1rem;
    transition: color 0.2s;
    position: relative; /* <-- TAMBAHKAN INI (Wajib untuk garis bawah) */
    padding-bottom: 10px; /* Beri sedikit ruang untuk garis bawah */
}

/* --- TAMBAHKAN BLOK BARU INI --- */

/* Style untuk garis bawah (dimulai dari 0) */
.nav-menu a::after {
    content: "";
    position: absolute;
    bottom: 0; /* Posisikan di bagian bawah padding */
    left: 0;
    width: 0; /* Mulai dengan lebar 0 */
    height: 2px;
    background-color: #e95d5e; /* Warna aksen merah */
    transition: width 0.3s ease-in-out; /* Animasi */
}

/* Style saat link di-hover ATAU aktif */
.nav-menu a:hover::after,
.nav-menu a.is-active::after {
    width: 100%; /* Lebarkan garisnya menjadi 100% */
}

/* Style untuk teks link yang aktif */
.nav-menu a.is-active {
    color: #ffffff; /* Buat lebih cerah */
    font-weight: 700; /* Buat lebih tebal */
}

.nav-menu a:hover {
    color: #ffffff;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.login-icon {
    color: #e0e0e0;
    text-decoration: none;
}
.login-icon svg {
    width: 24px;
    height: 24px;
}
.login-icon:hover {
    color: #ffffff;
}

/* --- Tombol (Button) --- */
.btn {
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    transition: all 0.2s ease-in-out;
}

.btn-primary {
    background-color: #ffffff;
    color: #0b0a1d;
    border: 1px solid #ffffff;
}

.btn-primary:hover {
    background-color: transparent;
    color: #ffffff;
}

.btn-cta {
    background-color: #e95d5e; /* Aksen Merah */
    color: #ffffff;
    display: inline-block;
    width: fit-content;
}

.btn-cta:hover {
    background-color: #d94c4d;
    transform: translateY(-2px);
}

/* --- Hero Content --- */
.hero-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    padding-top: 8rem;
    max-width: 650px;
}

.hero-content h1 {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: #ffffff; /* Judul selalu putih cerah */
}

.hero-content p {
    font-size: 1.25rem;
    color: #e0e0e0; /* WARNA FONT BARU */
    margin-bottom: 2rem;
    max-width: 500px;
}

/* --- Features Section --- */
.features-section {
    background-color: #0b0a1d;
    padding-top: 6rem;
    padding-bottom: 14rem;
    position: relative;
}

.features-section::before {
    content: "";
    position: absolute;
    top: -150px;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(
            rgba(11, 10, 29, 0.8),
            rgba(11, 10, 29, 0.8)
        ),
        url("/img/bg4.avif");
    background-size: cover;
    background-position: center top;
    opacity: 1; /* OPACITY BARU: 1 */
    z-index: 0;
    pointer-events: none;
    transform: translateY(var(--bg-scroll-y, 0px));
    transition: transform 0.1s linear;
    -webkit-mask-image: linear-gradient(to bottom, white 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, white 60%, transparent 100%);
}

.features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
    position: relative;
    /* 1. Tarik grid (konten) ke atas agar overlap */
    margin-top: -8rem; /* Anda bisa sesuaikan nilai -8rem ini */
    /* 2. Pastikan grid ini ada di atas overlay hero (z-index: 2) */
    z-index: 5;
}

@media (min-width: 992px) {
    .features-grid {
        grid-template-columns: 2fr 3fr;
    }
}

.features-text {
    /* Mengatur posisi/layout internal */
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* Jarak antara judul (h2) dan paragraf (p) */

    /* Batasi lebar teks agar rapi */
    max-width: 450px;
}

.features-text h2 {
    /* Mengatur style judul */
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.3;
    color: #ffffff; /* Warna judul (Putih cerah) */
}

.features-text p {
    /* Mengatur style paragraf */
    font-size: 1.1rem;
    line-height: 1.7;
    color: #e0e0e0; /* Warna teks (Putih redup, sesuai standar baru kita) */
}

.feature-card h3 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #8a9cff; /* WARNA FONT BARU */
    margin-bottom: 0.25rem;
}

.feature-card p {
    font-size: 1rem;
    color: #e0e0e0; /* WARNA FONT BARU */
    line-height: 1.5;
}

.features-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .features-list {
        display: flex;
        flex-direction: row;
        gap: 1.5rem;
    }
}

.feature-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    background-color: #1a1a1e;
    padding: 3.5rem;
    border-radius: 8px;
    border: 1px solid #2a2a30;
    /* --- TAMBAHKAN 3 BARIS INI --- */
    /* 1. Kondisi awal: tidak terlihat dan sedikit di bawah */
    opacity: 0;
    transform: translateY(20px);
    /* 2. Tentukan transisi spesifik untuk opacity dan transform */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* KELAS BARU: Untuk memicu animasi fade-in */
.feature-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.feature-card:hover {
    transform: translateY(-5px);
    border-color: #4a4a50;
}

.feature-icon {
    color: #e95d5e; /* Aksen Merah */
    flex-shrink: 0;
}

.feature-icon svg {
    width: 28px;
    height: 28px;
}

.feature-divider {
    border: none;
    height: 3px;
    background-color: #2a2a30;
    width: 100%;
    margin-top: 0.5rem;
}

.features-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .features-column-offset {
        margin-top: 4rem;
    }
}

/* --- Stats Section --- */
.stats-section {
    background-color: #0b0a1d;
    padding: 10rem 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* GANTI ruleset .stats-section::before Anda */

.stats-section::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70%; /* Tinggi container background */
    z-index: 0;
    pointer-events: none;

    /* Semua properti background dipindahkan ke sini */
    background-image: linear-gradient(
            rgba(11, 10, 29, 0.8),
            rgba(11, 10, 29, 0.8)
        ),
        url("/img/bg5.avif");
    background-size: 100% auto;
    background-position: center bottom;
    background-repeat: no-repeat;
    opacity: 1;

    /* Properti Parallax (membutuhkan variabel JS) */
    transform: translateY(var(--stats-scroll-y, 0px));
    transition: transform 0.1s linear;

    /* --- INI ADALAH PERBAIKAN ANDA --- */
    /* Mask ini memudarkan 20% atas DAN 20% bawah gambar */
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        white 10%,
        white 80%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        white 10%,
        white 80%,
        transparent 100%
    );
}

.stats-section h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 4rem;
    position: relative;
    z-index: 1;
    color: #ffffff; /* Judul putih */
}

.stats-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    position: relative;
    z-index: 1;
}

@media (min-width: 576px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (min-width: 992px) {
    .stats-grid {
        /* 1. Ubah dari 5 kolom menjadi 3 kolom */
        grid-template-columns: repeat(3, 1fr);

        /* 2. Batasi lebar grid agar tidak terlalu renggang (misal 70%) */
        max-width: 70%;

        /* 3. Ratakan grid-nya ke tengah container */
        margin-left: auto;
        margin-right: auto;
    }
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-number-wrapper {
    display: flex;
    justify-content: center;
    align-items: baseline;
    line-height: 1;
}

.stat-number {
    font-size: 4rem;
    font-weight: 800;
    color: #e95d5e; /* Aksen Merah */
}

.stat-suffix {
    font-size: 2rem;
    font-weight: 800;
    color: #e95d5e; /* Aksen Merah */
    margin-left: 0.25rem;
}

.stat-divider {
    border: none;
    height: 2px;
    background-color: #2a2a30;
    width: 40px;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.stat-item p {
    font-size: 0.9rem;
    color: #c0c0c0; /* Teks Sekunder (Abu-abu) */
    max-width: 150px;
}

/* --- Partners Section --- */
.partners-section {
    background-color: #191823;
    padding: 3rem 0;
    border-top: 1px solid #2a2a30;
    border-bottom: 1px solid #2a2a30;
    overflow: hidden;
}

.partners-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

@media (min-width: 768px) {
    .partners-content {
        flex-direction: row;
        justify-content: space-between;
    }
}

.partners-header {
    flex-basis: 20%;
    text-align: center;
}

.partners-header h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff; /* WARNA FONT BARU */
}

/* --- Logo Scroller (Carousel) --- */
.logo-scroller {
    flex-basis: 80%;
    max-width: 100%;
    overflow: hidden;
    -webkit-mask: linear-gradient(
        90deg,
        transparent,
        white 20%,
        white 80%,
        transparent
    );
    mask: linear-gradient(
        90deg,
        transparent,
        white 20%,
        white 80%,
        transparent
    );
}

.logo-scroller-inner {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    gap: 3rem;
    --_animation-duration: 40s;
}

.logo-scroller[data-animated="true"] .logo-scroller-inner {
    animation: scroll var(--_animation-duration) linear infinite;
}

.logo-scroller-inner li {
    list-style: none;
    /* Pusatkan gambar di dalam LI jika perlu */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Style untuk GAMBAR di dalam LI */
.logo-scroller-inner img {
    height: 100px;
    /* KUNCI: Atur 'height', 'width' akan otomatis menyesuaikan */
    width: auto; /* Mempertahankan rasio aspek */

    /* Efek profesional (hitam-putih & sedikit pudar) */
    filter: grayscale(1);
    opacity: 0.7;
    transition: all 0.3s ease;
}

/* Efek hover: Gambar menjadi berwarna & jelas */
.logo-scroller-inner li:hover img {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.1);
}

@keyframes scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* --- Testimonials Section --- */
.testimonials-section {
    background-color: #0b0a1d;
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
}

.testimonials-section::before {
    content: "";
    position: absolute;
    top: -50px;
    left: 0;
    width: 100%;
    height: 100%; /* Biarkan 100% untuk menutupi seluruh section */

    /* Menyamakan gambar & overlay (opacity 50%) */
    background-image: linear-gradient(
            rgba(11, 10, 29, 0.5),
            rgba(11, 10, 29, 0.5)
        ),
        url("/img/bg6.png"); /* Menyamakan gambar */

    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    opacity: 1;
    z-index: 0; /* Di belakang konten */
    pointer-events: none;

    /* Gunakan variabel CSS baru: --testimonial-scroll-y */
    transform: translateY(var(--testimonial-scroll-y, 0px));
    transition: transform 0.1s linear;

    /* Menyamakan efek fade di bawah */
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        white 20%,
        white 80%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        white 20%,
        white 80%,
        transparent 100%
    );
}

.testimonials-section .container {
    position: relative;
    z-index: 1;
}

.testimonial-card {
    background-color: #1a1a1e;
    padding: 2.5rem;
    border-radius: 8px;
    border: 1px solid #2a2a30;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.testimonial-icon {
    margin-bottom: 1.5rem;
    color: #e95d5e; /* Aksen Merah */
}

.testimonial-text {
    font-size: 1.1rem;
    font-style: italic;
    color: #e0e0e0; /* WARNA FONT BARU */
    line-height: 1.6;
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

.testimonial-author {
    font-size: 0.9rem;
    font-weight: 700;
    color: #c0c0c0; /* Teks Sekunder (Abu-abu) */
}

/* --- Splide Nav Dots --- */
.splide__pagination {
    bottom: -2rem;
}
.splide__pagination__page {
    background: #4a4a50;
    width: 10px;
    height: 10px;
    opacity: 0.6;
}
.splide__pagination__page.is-active {
    background: #ffffff;
    opacity: 1;
    transform: scale(1.2);
}

/* --- Services Section --- */
.services-section {
    background-color: #0b0a1d;
    padding: 16rem 0;
    position: relative;
    overflow: hidden;
}

.services-section::before {
    content: "";
    position: absolute;
    top: -50px;
    left: 0;
    width: 100%;
    height: 500px;
    /* BACKGROUND BARU: Solid + Overlay */
    background-image: linear-gradient(
            rgba(11, 10, 29, 0.5),
            /* Opacity 50% - Coba ini dulu */ rgba(11, 10, 29, 0.5)
                /* Opacity 50% */
        ),
        url("/img/bg4.avif");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    opacity: 120; /* OPACITY BARU: 1 (memperbaiki typo 120) */
    z-index: 0;
    pointer-events: none;
    transform: translateY(var(--bg-scroll-y, 0px));
    transition: transform 0.1s linear;
    -webkit-mask-image: linear-gradient(to bottom, white 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, white 60%, transparent 100%);
}

.services-header {
    margin-bottom: 4rem;
    position: relative;
    z-index: 1;
}

.services-header h2 {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 1.5rem;
    max-width: 600px;
    color: #ffffff; /* Judul Putih */
}

.services-header h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #ffffff; /* WARNA FONT BARU */
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.services-list {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
    max-width: 900px;
}

.service-card {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 2rem 0;
    border-bottom: 1px solid #2a2a30;
}
.service-card:first-child {
    border-top: 1px solid #2a2a30;
}

.service-icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.service-icon svg {
    width: 28px;
    height: 28px;
    color: #ffffff;
}
.service-icon.icon-blue {
    background-color: #4a89ff;
}
.service-icon.icon-red {
    background-color: #e95d5e;
}

.service-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.service-content h4 {
    font-size: 2.2rem;
    font-weight: 700;
    color: #ffffff; /* Judul Putih */
}

.service-content p {
    font-size: 1.2rem;
    color: #e0e0e0; /* WARNA FONT BARU */
    line-height: 1.6;
}

.service-content li {
    font-size: 1.2rem;
    color: #e0e0e0; /* WARNA FONT BARU */
    line-height: 1.6;
}

/* --- Benefits Section --- */
.benefits-section {
    background-color: #0b0a1d;
    padding: 16rem 0;
    border-top: 1px solid #2a2a30;
    /* --- TAMBAHKAN DUA BARIS INI --- */
    position: relative; /* Wajib untuk background */
    overflow: hidden; /* Wajib untuk background */
}

/* --- TAMBAHKAN BLOK BARU INI --- */
.benefits-section::before {
    content: "";
    position: absolute;
    top: -50px;
    left: 0;
    width: 100%;
    height: 100%; /* Biarkan 100% untuk menutupi seluruh section */

    /* Menyamakan gambar & overlay (opacity 50%) */
    background-image: linear-gradient(
            rgba(11, 10, 29, 0.5),
            rgba(11, 10, 29, 0.5)
        ),
        url("/img/bg4.avif"); /* Menyamakan gambar */

    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    opacity: 1;
    z-index: 0; /* Di belakang konten */
    pointer-events: none;

    /* Gunakan variabel CSS baru: --benefits-scroll-y */
    transform: translateY(var(--benefits-scroll-y, 0px));
    transition: transform 0.1s linear;

    /* Menyamakan efek fade di bawah */
    -webkit-mask-image: linear-gradient(to bottom, white 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, white 60%, transparent 100%);
}

.benefits-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

@media (min-width: 992px) {
    .benefits-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.benefits-image {
    position: relative;
    min-height: 400px;
    border-radius: 8px;
    overflow: hidden;
    background-image: linear-gradient(
            rgba(11, 10, 29, 0.5),
            rgba(11, 10, 29, 0.5)
        ),
        url("/img/bg3.avif");
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
}

.benefits-image h2 {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.3;
    color: #ffffff; /* Judul Putih */
    max-width: 350px;
    position: relative;
    z-index: 2;
}

.benefits-content p {
    font-size: 1.1rem;
    color: #e0e0e0; /* WARNA FONT BARU */
    line-height: 1.7;
    max-width: 500px;
}

/* --- Vision Section --- */
.vision-section {
    background-color: #0b0a1d;
    padding: 16rem 0;
    position: relative;
    overflow: hidden;
    border-top: 1px solid #2a2a30;
}

.vision-section::before {
    content: "";
    position: absolute;
    top: -50px;
    left: 0;
    width: 100%;
    height: 500px; /* Menyamakan tinggi background */

    /* Menyamakan gambar & overlay (opacity 50%) */
    background-image: linear-gradient(
            rgba(11, 10, 29, 0.5),
            rgba(11, 10, 29, 0.5)
        ),
        url("/img/bg4.avif"); /* Menyamakan gambar */

    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    opacity: 1;
    z-index: 0;
    pointer-events: none;

    /* Tetap gunakan variabel --vision-scroll-y */
    transform: translateY(var(--vision-scroll-y, 0px));
    transition: transform 0.1s linear;

    /* Menyamakan efek fade di bawah */
    -webkit-mask-image: linear-gradient(to bottom, white 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, white 60%, transparent 100%);
}

.vision-header,
.vision-grid {
    position: relative;
    z-index: 1;
}

.vision-header {
    margin-bottom: 4rem;
    max-width: 700px;
}

.vision-header h2 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: #ffffff; /* Judul Putih */
}

.vision-header p {
    font-size: 1.1rem;
    color: #e0e0e0; /* WARNA FONT BARU */
    line-height: 1.7;
}

/* --- Vision Grid 2x2 --- */
.vision-grid {
    display: grid;
    grid-template-columns: 1fr;
    position: relative;
    z-index: 1;
    gap: 1px;
    background-color: #2a2a30;
    border: 1px solid #2a2a30;
}

@media (min-width: 992px) {
    .vision-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto auto;
    }
    .vision-item.image-story {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }
    .vision-grid > div:nth-child(2) {
        grid-column: 2 / 4;
        grid-row: 1 / 2;
    }
    .vision-grid > div:nth-child(3) {
        grid-column: 1 / 3;
        grid-row: 2 / 3;
    }
    .vision-item.image-leadership {
        grid-column: 3 / 4;
        grid-row: 2 / 3;
    }
}

.vision-item {
    background-color: #1a1a1e;
    padding: 2.5rem;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.vision-text p {
    font-size: 1.4rem;
    color: #e0e0e0; /* WARNA FONT BARU */
    line-height: 1.7;
}
.vision-text p + p {
    margin-top: 1.5rem;
}

.vision-text li {
    font-size: 1.4rem;
    color: #e0e0e0; /* WARNA FONT BARU */
    line-height: 1.7;
}

.vision-image {
    padding: 2rem;
    position: relative;
    overflow: hidden;
    text-align: center;
}
.vision-image h3 {
    font-size: 2rem;
    font-weight: 800;
    color: #ffffff; /* Judul Putih */
    position: relative;
    z-index: 2;
}

.vision-image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 0;
}
.vision-image::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(11, 10, 29, 0.6), rgba(11, 10, 29, 0.6));
    z-index: 1;
}

.image-story::before {
    background-image: url("/img/bg3.avif");
}
.image-leadership::before {
    background-image: url("/img/bg.jpg");
}

/* 1. Atur kondisi awal (tak terlihat) */
.vision-header h2,
.vision-header p,
.vision-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* 2. Atur kondisi akhir (terlihat) saat .is-visible ditambahkan */
.vision-header h2.is-visible,
.vision-header p.is-visible,
.vision-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 3. Atur penundaan (delay) agar muncul satu per satu (staggered) */
.vision-header h2.is-visible {
    transition-delay: 0.1s; /* Judul */
}
.vision-header p.is-visible {
    transition-delay: 0.3s; /* Paragraf */
}
.vision-item.is-visible:nth-child(1) {
    transition-delay: 0.1s; /* Kartu 1 */
}
.vision-item.is-visible:nth-child(2) {
    transition-delay: 0.1s; /* Kartu 2 */
}
.vision-item.is-visible:nth-child(3) {
    transition-delay: 0.1s; /* Kartu 3 */
}
.vision-item.is-visible:nth-child(4) {
    transition-delay: 0.1s; /* Kartu 4 */
}

/* --- Contact Section --- */
.contact-section {
    background-color: #0b0a1d;
    padding: 16rem 0 0 0;
    border-top: 1px solid #2a2a30;

    position: relative; /* Wajib untuk background */
    overflow: hidden; /* Wajib untuk background */
}

.contact-section::before {
    content: "";
    position: absolute;
    top: -50px;
    left: 0;
    width: 100%;
    height: 500px;

    /* Menyamakan gambar & overlay (opacity 50%) */
    background-image: linear-gradient(
            rgba(11, 10, 29, 0.5),
            rgba(11, 10, 29, 0.5)
        ),
        url("/img/bg4.avif"); /* Menyamakan gambar */

    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    opacity: 1;
    z-index: 0; /* Di belakang konten */
    pointer-events: none;

    /* Gunakan variabel CSS baru: --contact-scroll-y */
    transform: translateY(var(--contact-scroll-y, 0px));
    transition: transform 0.1s linear;

    /* Menyamakan efek fade di bawah */
    -webkit-mask-image: linear-gradient(to bottom, white 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, white 60%, transparent 100%);
}

.contact-details h2 {
    font-size: 2.5rem;
    font-weight: 800;
    color: #ffffff; /* Judul Putih */
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    padding-bottom: 6rem;
    align-items: start;

    position: relative; /* Pastikan ini ada */
    z-index: 1; /* Pastikan ini ada */
}

@media (min-width: 992px) {
    .contact-grid {
        grid-template-columns: 1fr 1.5fr;
    }
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.info-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.info-list li {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    font-size: 1rem;
    color: #c0c0c0; /* Teks Sekunder (Abu-abu) */
    line-height: 1.6;
}

.info-list li i {
    font-size: 1.2rem;
    color: #ffffff;
    margin-top: 5px;
}

.social-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 1.5rem;
}

.social-list a {
    color: #ffffff;
    font-size: 1.2rem;
    transition: color 0.2s;
}
.social-list a:hover {
    color: #e95d5e;
}

/* --- Contact Form --- */
.contact-form-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-size: 0.9rem;
    color: #c0c0c0; /* Teks Sekunder (Abu-abu) */
    margin-bottom: 0.5rem;
}

.form-group input,
.form-group textarea {
    background: transparent;
    border: none;
    border-bottom: 1px solid #4a4a50;
    padding: 0.75rem 0;
    color: #ffffff;
    font-size: 1rem;
    transition: border-color 0.2s;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-bottom-color: #e95d5e;
}

.form-group textarea {
    resize: vertical;
}

.form-submit {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
}

.form-submit span {
    font-size: 0.9rem;
    color: #c0c0c0; /* Teks Sekunder (Abu-abu) */
    font-style: italic;
}

.form-submit .btn-cta {
    background-color: #e95d5e;
    color: #ffffff;
}

/* --- Map Section --- */
.map-section {
    width: 100%;
    height: 450px;
    filter: grayscale(1);
}

.map-section iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* --- Portfolio/Gallery Section --- */
.portfolio {
    background-color: #0b0a1d;
    padding: 16rem 0;
    border-top: 1px solid #2a2a30;
    position: relative;
    overflow: hidden;
}

.portfolio::before {
    content: "";
    position: absolute;
    top: -50px; /* Menyamakan posisi */
    left: 0;
    width: 100%;
    height: 100%; /* Biarkan 100% agar menutupi galeri masonry */

    /* Menyamakan gambar & overlay (opacity 50%) */
    background-image: linear-gradient(
            rgba(11, 10, 29, 0.5),
            rgba(11, 10, 29, 0.5)
        ),
        url("/img/bg4.avif"); /* Menyamakan gambar */

    background-size: cover;
    background-position: center top; /* Menyamakan posisi */
    background-repeat: no-repeat;
    opacity: 1;
    z-index: 0;
    pointer-events: none;

    /* Variabel JS-nya (--portfolio-scroll-y) sudah benar */
    transform: translateY(var(--portfolio-scroll-y, 0px));
    transition: transform 0.1s linear;

    /* Menyamakan efek fade di bawah */
    -webkit-mask-image: linear-gradient(to bottom, white 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, white 60%, transparent 100%);
}

/* Perbaikan untuk Header Galeri (Tengah & Putih) */
.portfolio .services-header {
    text-align: center;
}
.portfolio .services-header h2 {
    color: #ffffff;
    max-width: none;
}
.portfolio .services-header p {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    color: #e0e0e0; /* WARNA FONT BARU */
}

.portfolio-grid {
    /* Gunakan column-count untuk layout masonry */
    column-count: 1; /* 1 kolom di mobile */
    column-gap: 1.5rem; /* Jarak antar kolom */

    position: relative;
    z-index: 1;
}

@media (min-width: 768px) {
    .portfolio-grid {
        column-count: 2; /* 2 kolom di tablet */
    }
}
@media (min-width: 992px) {
    .portfolio-grid {
        column-count: 3; /* 3 kolom di desktop */
    }
}

.portfolio-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: #1a1a1e;
    border: 1px solid #2a2a30;
}

.portfolio-wrap img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.4s ease;
}

.portfolio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to top,
        rgba(11, 10, 29, 0.9) 0%,
        rgba(11, 10, 29, 0.3) 50%,
        rgba(11, 10, 29, 0.9) 100%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.5rem;
}

.portfolio-info {
    transform: translateY(20px);
    transition: transform 0.3s ease 0.1s;
}

.portfolio-info h4 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #ffffff; /* Judul Putih */
}
.portfolio-info p {
    font-size: 0.9rem;
    color: #e0e0e0; /* WARNA FONT BARU */
    margin: 0;
}

.portfolio-links {
    text-align: right;
    transform: translateY(-20px);
    transition: transform 0.3s ease 0.1s;
}

.portfolio-links a {
    display: inline-block;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    border-radius: 50%;
    background-color: rgba(233, 93, 94, 0.8);
    color: #ffffff;
    margin-left: 6px;
    transition: all 0.2s;
    font-size: 0.9rem;
}
.portfolio-links a:hover {
    background-color: #e95d5e;
    transform: scale(1.1);
}

.portfolio-wrap:hover .portfolio-overlay {
    opacity: 1;
}
.portfolio-wrap:hover img {
    transform: scale(1.1);
}
.portfolio-wrap:hover .portfolio-info,
.portfolio-wrap:hover .portfolio-links {
    transform: translateY(0);
}

/* --- TAMBAHKAN BLOK BARU INI --- */

/* Atur kondisi awal untuk .portfolio-item (tak terlihat) */
.portfolio-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;

    /* (Kita gabungkan style .portfolio-item Anda yang sudah ada) */
    display: inline-block;
    width: 100%;
    break-inside: avoid;
    margin-bottom: 1.5rem;
}

/* Atur kondisi akhir (terlihat) saat .is-visible ditambahkan */
.portfolio-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* public/css/hero.css */
/* ... (kode dari section sebelumnya) ... */

/* --- Career Section --- */
.career-section {
    background-color: #0b0a1d;
    padding: 16rem 0;
    border-top: 1px solid #2a2a30;
    position: relative;
    overflow: hidden;
    text-align: center; /* Ini bisa dihapus jika .section-header-center sudah center */
}

.career-section::before {
    content: "";
    position: absolute;
    top: -50px;
    left: 0;
    width: 100%;
    height: 100%; /* Biarkan 100% */

    /* Menyamakan gambar & overlay (opacity 50%) */
    background-image: linear-gradient(
            rgba(11, 10, 29, 0.5),
            rgba(11, 10, 29, 0.5)
        ),
        url("/img/bg4.avif"); /* Menyamakan gambar */

    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    opacity: 1;
    z-index: 0; /* Di belakang konten */
    pointer-events: none;

    /* Gunakan variabel CSS baru: --career-scroll-y */
    transform: translateY(var(--career-scroll-y, 0px));
    transition: transform 0.1s linear;

    /* Menyamakan efek fade di bawah */
    -webkit-mask-image: linear-gradient(to bottom, white 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, white 60%, transparent 100%);
}

.section-header-center {
    position: relative;
    z-index: 1;
    margin-bottom: 4rem;
    text-align: center; /* Kunci utamanya */
}

.section-header-center h2 {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 1.5rem;
    color: #ffffff;
}

.section-header-center p {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    color: #e0e0e0;
    line-height: 1.7;
}

.section-header-center p strong {
    color: #e95d5e;
    font-weight: 700;
}

.career-grid {
    display: grid;
    grid-template-columns: 1fr; /* 1 kolom di mobile */
    gap: 2rem;
    margin-top: 4rem; /* Jarak dari header */
    position: relative;
    z-index: 1;
}

/* 3 kolom di desktop */
@media (min-width: 992px) {
    .career-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.career-card {
    background-color: #0b0a1d; /* Background lebih gelap */
    padding: 2.5rem 2rem;
    border-radius: 8px;
    border: 1px solid #2a2a30;
    text-align: center; /* Konten kartu di tengah */
    transition: all 0.3s ease;
}

.career-card:hover {
    transform: translateY(-5px); /* Efek mengangkat */
    border-color: #4a4a50;
}

.career-icon {
    display: inline-flex; /* Agar bisa di-center */
    align-items: center;
    justify-content: center;
    width: 70px; /* Ukuran lingkaran ikon */
    height: 70px;
    border-radius: 50%; /* Bulat */
    margin-bottom: 1.5rem;
    font-size: 2rem; /* Ukuran ikon di dalam */
    color: #ffffff;
}

/* Kita pinjam style warna dari .service-icon (sudah ada di CSS Anda) */
.career-icon.icon-red {
    background-color: #e95d5e;
}

.career-icon.icon-blue {
    background-color: #4a89ff;
}

.career-card h4 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1rem;
}

.career-card p {
    font-size: 0.9rem;
    color: #c0c0c0;
    line-height: 1.6;
}

/* --- Footer Section --- */
.site-footer {
    background-color: #1a1a1e;
    color: #c0c0c0; /* Teks Sekunder (Abu-abu) */
    padding: 6rem 0;
    font-size: 0.9rem;
    line-height: 1.6;
    position: relative;
    overflow: hidden;
}

.site-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* Menggunakan background yang konsisten */
    background-image: linear-gradient(
            rgba(11, 10, 29, 0.5),
            rgba(11, 10, 29, 0.5)
        ),
        url("/img/footer-Ba6pSaaj.png"); /* Ganti jika Anda ingin gambar lain */

    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 1;

    /* Kunci: Letakkan di BELAKANG konten footer */
    z-index: 0;
    pointer-events: none;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;

    position: relative;
    z-index: 1;
}

@media (min-width: 640px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 992px) {
    .footer-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
@media (min-width: 1200px) {
    .footer-grid {
        grid-template-columns: 1.5fr 1fr 1.5fr 1fr;
    }
}

.footer-column {
    display: flex;
    flex-direction: column;
}

/* Style untuk <a> pembungkus logo */
.footer-logo {
    display: block; /* Penting agar margin berfungsi */
    text-decoration: none;
    margin-bottom: 1.5rem; /* Memberi jarak ke contact-info */
    max-width: 180px;
}

/* Style untuk <img> di dalam logo footer */
.footer-logo img {
    width: 100%;
    max-width: 180px; /* Sesuaikan lebar maksimum agar tidak terlalu besar */
    height: auto;
    display: block; /* Penting untuk menghilangkan spasi bawah gambar */
}

.contact-info {
    list-style: none;
    padding: 0;
    margin: 0;
}
.contact-info li {
    margin-bottom: 0.5rem;
}

.footer-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-nav li {
    margin-bottom: 1rem;
}
.footer-nav a {
    color: #c0c0c0; /* Teks Sekunder (Abu-abu) */
    text-decoration: none;
    transition: color 0.2s;
}
.footer-nav a:hover {
    color: #ffffff;
}

.footer-cta {
    margin-top: 2rem;
    width: fit-content;
}

.footer-column h5 {
    color: #ffffff; /* Judul Putih */
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.newsletter-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
    color: #c0c0c0; /* Teks Sekunder (Abu-abu) */
}

.newsletter-form input[type="email"] {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid #4a4a50;
    padding: 0.5rem 0;
    color: #ffffff;
    font-size: 1rem;
    margin-bottom: 1.5rem;
}
.newsletter-form input[type="email"]:focus {
    outline: none;
    border-bottom-color: #e95d5e;
}

.checkbox-group {
    flex: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.checkbox-group label {
    color: #c0c0c0; /* Teks Sekunder (Abu-abu) */
    margin-bottom: 0;
    font-size: 0.8rem;
}

.btn-submit {
    background: transparent;
    border: 1px solid #ffffff;
    color: #ffffff;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-submit:hover {
    background-color: #ffffff;
    color: #1a1a1e;
}

.social-links {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
    display: flex;
    gap: 1rem;
}
.social-links a {
    color: #ffffff;
    text-decoration: none;
    font-size: 1.2rem;
    transition: color 0.2s;
}
.social-links a:hover {
    color: #e95d5e;
}

.copyright {
    font-size: 0.8rem;
    line-height: 1.5;
    color: #c0c0c0; /* Teks Sekunder (Abu-abu) */
}

/* --- TAMBAHKAN DI AKHIR FILE CSS ANDA --- */

/* 1. Definisikan animasinya (Fade In + Slide Up) */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 2. Atur kondisi awal & panggil animasi untuk elemen di dalam hero */
.hero-content h1,
.hero-content p,
.hero-content .btn-cta {
    /* Mulai dalam keadaan tidak terlihat */
    opacity: 0;

    /* Terapkan animasi */
    animation-name: fadeInUp;
    animation-duration: 0.8s; /* Durasi animasi */
    animation-fill-mode: forwards; /* Tetap terlihat setelah selesai */
    animation-timing-function: ease-out;
}

/* 3. Atur penundaan (delay) agar muncul satu per satu */
.hero-content h1 {
    animation-delay: 0.2s; /* Judul muncul pertama */
}

.hero-content p {
    animation-delay: 0.5s; /* Paragraf muncul kedua */
}

.hero-content .btn-cta {
    animation-delay: 0.8s; /* Tombol muncul terakhir */
}

/* --- TAMBAHKAN BLOK BARU INI --- */

/* Atur kondisi awal untuk .features-text (tak terlihat) */
.features-text h2,
.features-text p {
    opacity: 0;
    transform: translateY(20px);
    /* Atur transisi yang sama */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* Atur kondisi akhir (terlihat) saat class .is-visible ditambahkan */
.features-text h2.is-visible,
.features-text p.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Atur penundaan (delay) agar muncul satu per satu */
.features-text h2.is-visible {
    transition-delay: 0.2s; /* Judul muncul pertama */
}

.features-text p.is-visible {
    transition-delay: 0.4s; /* Paragraf muncul kedua */
}

/* --- BARU: Solution Features Section --- */
.solution-features-section {
    padding: 16rem 0 2rem 0; /* Padding atas besar, bawah kecil */
    border-top: 1px solid #2a2a30;
    position: relative; /* <--- TAMBAHKAN INI */
    overflow: hidden; /* <--- TAMBAHKAN INI */
}

/* --- BARU: Background untuk Solution Features Section --- */
.solution-features-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Menutupi seluruh section */

    background-image: linear-gradient(
            rgba(11, 10, 29, 0.5),
            rgba(11, 10, 29, 0.5)
        ),
        url("/img/bg4.avif"); /* Ganti dengan gambar yang Anda inginkan */

    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    opacity: 1; /* Pastikan terlihat */
    z-index: 0; /* Di belakang konten */
    pointer-events: none;

    /* Efek fade di bagian bawah (jika diinginkan) */
    -webkit-mask-image: linear-gradient(to bottom, white 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, white 70%, transparent 100%);

    /* Variabel untuk Parallax (akan diisi oleh JS) */
    transform: translateY(var(--solution-features-scroll-y, 0px));
    transition: transform 0.1s linear; /* Smooth transition untuk parallax */
}

/* --- Pastikan Konten di atas Background --- */
.solution-features-section .container {
    position: relative;
    z-index: 1; /* Konten di atas background */
}

/* Style untuk setiap baris */
.solution-feature-row {
    display: grid;
    grid-template-columns: 1fr; /* 1 kolom di mobile */
    gap: 1.5rem;
    align-items: center;
    margin-bottom: 4rem; /* Jarak antar baris */
}

@media (min-width: 992px) {
    .solution-feature-row {
        /* 2 kolom di desktop (40% / 60%) */
        grid-template-columns: 2fr 3fr;
    }
}

/* Kartu Gambar (Kiri) */
/* --- GANTI DENGAN BLOK INI --- */
.solution-image-card {
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    border: 1px solid #2a2a30;
    min-height: 350px;

    /* --- STYLE BARU UNTUK BACKGROUND --- */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Kartu Teks (Kanan) */
.solution-text-card {
    background-color: #1a1a1e; /* Warna card gelap */
    border-radius: 8px;
    border: 1px solid #2a2a30;
    padding: 2.5rem;
    position: relative;
    z-index: 2; /* Teks di atas */
}

/* Efek Overlap (Hanya di Desktop) */
@media (min-width: 992px) {
    .solution-text-card {
        /* Tarik kartu teks ke kiri agar menimpa gambar */
        margin-left: -100px;
    }
}

/* Styling Teks di dalam Kartu */
.solution-text-card h3 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
}

.solution-text-card p {
    font-size: 1rem;
    color: #e0e0e0;
    line-height: 1.7;
    margin-bottom: 1rem;
}

.solution-text-card ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 1.5rem;
}

.solution-text-card li {
    color: #e0e0e0;
    font-size: 1rem;
    position: relative;
    padding-left: 20px; /* Jarak untuk bullet */
    margin-bottom: 0.5rem;
}

/* Buat bullet custom */
.solution-text-card li::before {
    content: "■"; /* Anda bisa ganti dengan '•' */
    position: absolute;
    left: 0;
    top: 0;
    color: #e95d5e; /* Warna aksen merah */
    font-size: 0.8rem;
    line-height: 1.7;
}

/* Link "Selengkapnya" */
.text-link {
    color: #e95d5e;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
}
.text-link:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* --- Animasi Fade-in untuk Section Baru --- */
.solution-image-card,
.solution-text-card {
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.solution-image-card.is-visible,
.solution-text-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Atur penundaan agar muncul bergantian */
.solution-feature-row .solution-image-card.is-visible {
    transition-delay: 0.1s;
}
.solution-feature-row .solution-text-card.is-visible {
    transition-delay: 0.3s;
}

/* --- TAMBAHKAN BLOK BARU INI --- */

/* Path untuk gambar baris 1 */
.image-card-1 {
    background-image: linear-gradient(
            rgba(11, 10, 29, 0.3),
            rgba(11, 10, 29, 0.3)
        ),
        url("/img/about.jpg");
}

/* Path untuk gambar baris 2 */
.image-card-2 {
    background-image: linear-gradient(
            rgba(11, 10, 29, 0.3),
            rgba(11, 10, 29, 0.3)
        ),
        url("/img/placeholder-orange-shape.jpg");
}
/* --- TAMBAHKAN RULES BARU INI --- */

/* Path untuk gambar Robotic Electronic */
.image-card-3 {
    background-image: linear-gradient(
            rgba(11, 10, 29, 0.3),
            rgba(11, 10, 29, 0.3)
        ),
        url("/img/program/arduino-breadboard.jpg"); /* <-- Ganti path ini jika perlu */
}

/* Path untuk gambar Web Lvl 1 */
.image-card-5 {
    background-image: linear-gradient(
            rgba(11, 10, 29, 0.3),
            rgba(11, 10, 29, 0.3)
        ),
        url("/img/program/web-programming.jpg"); /* <-- Ganti path ini jika perlu */
}

/* Path untuk gambar Web Lvl 2 */
.image-card-6 {
    background-image: linear-gradient(
            rgba(11, 10, 29, 0.3),
            rgba(11, 10, 29, 0.3)
        ),
        url("/img/program/laravel-code.jpg"); /* <-- Ganti path ini jika perlu */
}

/* Path untuk gambar Web Lvl 3 (Mobile) */
.image-card-7 {
    background-image: linear-gradient(
            rgba(11, 10, 29, 0.3),
            rgba(11, 10, 29, 0.3)
        ),
        url("/img/program/mobile-flutter.jpg"); /* <-- Ganti path ini jika perlu */
}

/* --- TAMBAHKAN RULES BARU INI --- */

/* Path untuk gambar Project Traffic Light */
.image-card-electronic-1 {
    background-image: linear-gradient(
            rgba(11, 10, 29, 0.3),
            rgba(11, 10, 29, 0.3)
        ),
        url("/img/program/project-traffic-light.jpg"); /* <-- Ganti path ini jika perlu */
}

/* Path untuk gambar Project Line Follower */
.image-card-electronic-2 {
    background-image: linear-gradient(
            rgba(11, 10, 29, 0.3),
            rgba(11, 10, 29, 0.3)
        ),
        url("/img/program/project-line-follower.jpg"); /* <-- Ganti path ini jika perlu */
}

/* Path untuk gambar Project Smarthome */
.image-card-electronic-3 {
    background-image: linear-gradient(
            rgba(11, 10, 29, 0.3),
            rgba(11, 10, 29, 0.3)
        ),
        url("/img/program/project-smarthome.jpg"); /* <-- Ganti path ini jika perlu */
}

/* --- TAMBAHKAN RULES BARU INI --- */

/* Path untuk gambar Modular Level 1 */
.image-card-mod-1 {
    background-image: linear-gradient(
            rgba(11, 10, 29, 0.3),
            rgba(11, 10, 29, 0.3)
        ),
        url("/img/program/level-1-beginner.jpg"); /* <-- Ganti path ini jika perlu */
}

/* Path untuk gambar Modular Level 2 */
.image-card-mod-2 {
    background-image: linear-gradient(
            rgba(11, 10, 29, 0.3),
            rgba(11, 10, 29, 0.3)
        ),
        url("/img/program/level-2-intermediate.jpg"); /* <-- Ganti path ini jika perlu */
}

/* Path untuk gambar Modular Level 3 */
.image-card-mod-3 {
    background-image: linear-gradient(
            rgba(11, 10, 29, 0.3),
            rgba(11, 10, 29, 0.3)
        ),
        url("/img/program/level-3-advanced.jpg"); /* <-- Ganti path ini jika perlu */
}

/* Beri warna latar belakang selang-seling */
.solution-features-section.section-bg {
    background-color: #1a1a1e;
}

/* --- BARU: REVERSE ROW UNTUK SOLUTION FEATURES --- */

.solution-feature-row.reverse-row {
    /* Untuk mobile, balik urutan flex */
    display: flex; /* Aktifkan flexbox */
    flex-direction: column-reverse; /* Balik urutan kolom */
}

@media (min-width: 992px) {
    .solution-feature-row.reverse-row {
        /* Untuk desktop, gunakan grid normal tapi balik urutan item */
        display: grid; /* Kembali ke grid */
        grid-template-areas: "text-area image-area"; /* Tentukan area terbalik */
        flex-direction: unset; /* Nonaktifkan flex-direction untuk desktop */
    }

    .solution-feature-row.reverse-row .solution-image-card {
        grid-area: image-area; /* Tempatkan gambar di area gambar */
    }

    .solution-feature-row.reverse-row .solution-text-card {
        grid-area: text-area; /* Tempatkan teks di area teks */
        /* Tarik kartu teks ke kanan agar menimpa gambar */
        margin-left: 0; /* Hapus margin kiri negatif default */
        margin-right: -100px; /* Tambahkan margin kanan negatif */
    }
}

/* --- BARU: Levels Section --- */
.levels-section {
    background-color: #1a1a1e; /* Warna background sedikit beda */
    padding: 6rem 0;
    border-top: 1px solid #2a2a30;
    position: relative;
    overflow: hidden;
}

/* Kita gunakan .section-header-center yang sudah ada */

.levels-grid {
    display: grid;
    grid-template-columns: 1fr; /* 1 kolom di mobile */
    gap: 2rem;
    margin-top: 4rem; /* Jarak dari header */
    position: relative;
    z-index: 1;
}

@media (min-width: 992px) {
    .levels-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 kolom di desktop */
    }
}

.level-card {
    text-align: center; /* Konten di tengah */
}

.level-icon {
    width: 150px; /* Ukuran lingkaran */
    height: 150px;
    border-radius: 50%; /* Membuatnya bulat */
    overflow: hidden; /* Memotong gambar agar bulat */
    margin: 0 auto 1.5rem auto; /* Posisikan di tengah */
    border: 3px solid #2a2a30; /* Garis tepi tipis */
    background-color: #0b0a1d; /* Fallback jika gambar rusak */
}

.level-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Pastikan gambar mengisi lingkaran */
}

.level-card h4 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.25rem;
}

.level-card span {
    font-size: 0.9rem;
    font-weight: 700;
    color: #c0c0c0; /* Warna abu-abu */
    margin-bottom: 1rem;
    display: block; /* Agar margin bottom berfungsi */
}

.level-card p {
    font-size: 0.9rem;
    color: #e0e0e0;
    line-height: 1.6;
}

/* --- Animasi Fade-in untuk Level Card --- */
.level-card {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.level-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Atur penundaan agar muncul bergantian */
.levels-grid .level-card.is-visible:nth-child(1) {
    transition-delay: 0.1s;
}
.levels-grid .level-card.is-visible:nth-child(2) {
    transition-delay: 0.3s;
}
.levels-grid .level-card.is-visible:nth-child(3) {
    transition-delay: 0.5s;
}

/* --- BARU: Section Tombol Kembali --- */
.back-button-section {
    /* Gunakan warna background yang sama dengan section di atasnya */
    background-color: #1a1a1e;
    padding: 0 0 6rem 0; /* Jarak ke footer */
    text-align: center; /* Posisikan tombol di tengah */
    position: relative;
    z-index: 1;
}

/* Atur agar ikon dan teks sejajar */
.back-button-section .btn-submit {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem; /* Jarak antara ikon dan teks */
}

/* --- BARU: Style untuk Tombol Upload File --- */
.custom-file-input {
    display: block;
    width: 100%;
    padding: 0.75rem 0;
    font-size: 1rem;
    color: #c0c0c0; /* Warna teks "no file chosen" */
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #4a4a50; /* Garis bawah yang sama */
}

/* Style untuk tombol "Browse..." (di Chrome/Edge) */
.custom-file-input::file-selector-button {
    background-color: #e95d5e; /* Warna tombol merah */
    color: #ffffff;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 1rem;
    transition: background-color 0.2s;
}

.custom-file-input::file-selector-button:hover {
    background-color: #d94c4d;
}

/* Style untuk Firefox (butuh prefix) */
@-moz-document url-prefix() {
    .form-group input[type="file"] {
        color: #c0c0c0;
    }
}

/* --- PERBAIKAN TOTAL FORMULIR (KONTAK & KARIR) --- */
/* Menggunakan selector spesifik untuk 'memaksa' style */

/* Mengatur header "Kirim Lamaran Anda" */
.career-section .section-header-center h3 {
    color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    font-size: 2.2rem !important;
}

/* Wrapper utama (berlaku di hal. Kontak & Karir) */
.contact-form-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
    max-width: 800px; /* Batasi lebar form */
    margin: 0 auto; /* Posisikan di tengah */
    position: relative; /* Pastikan z-index bekerja */
    z-index: 10; /* Bawa ke depan background */
}

/* Baris 2-kolom */
.contact-form-wrapper .form-row {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 1.5rem !important;
}
@media (min-width: 768px) {
    .contact-form-wrapper .form-row {
        grid-template-columns: 1fr 1fr !important;
    }
}

.contact-form-wrapper .form-group {
    display: flex !important;
    flex-direction: column !important;
}

/* Label (Nama Depan, Email, dll) */
.contact-form-wrapper .form-group label {
    font-size: 0.9rem !important;
    color: #e0e0e0 !important;
    margin-bottom: 0.5rem !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    position: static !important; /* Batalkan float label */
    height: auto !important; /* Batalkan height aneh */
    font-weight: 400 !important; /* Pastikan font tidak tebal */
    text-align: left; /* Pastikan rata kiri */
}

/* Input Teks, Email, Telepon, dan Textarea */
.contact-form-wrapper .form-group input[type="text"],
.contact-form-wrapper .form-group input[type="email"],
.contact-form-wrapper .form-group input[type="tel"],
.contact-form-wrapper .form-group textarea {
    background-color: #0b0a1d !important; /* Background input gelap */
    border: 1px solid #4a4a50 !important; /* Border abu-abu tipis */
    border-radius: 6px !important;
    padding: 0.75rem 1rem !important;
    color: #ffffff !important;
    font-size: 1rem !important;
    transition: border-color 0.2s;

    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    position: static !important;
    width: 100% !important;
    height: auto !important; /* Reset height */
}

.contact-form-wrapper .form-group input:focus,
.contact-form-wrapper .form-group textarea:focus {
    outline: none !important;
    border-color: #e95d5e !important;
}

.contact-form-wrapper .form-group textarea {
    resize: vertical;
    min-height: 150px !important;
}

/* Input File (Upload CV) */
.contact-form-wrapper .custom-file-input {
    display: block !important;
    width: 100% !important;
    padding: 0.5rem 0 !important;
    font-size: 1rem !important;
    color: #c0c0c0 !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #4a4a50 !important; /* Samakan dengan input lama */
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}
.contact-form-wrapper .custom-file-input::file-selector-button {
    background-color: #e95d5e;
    color: #ffffff;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 1rem;
    transition: background-color 0.2s;
}
.contact-form-wrapper .custom-file-input::file-selector-button:hover {
    background-color: #d94c4d;
}

/* Tombol Submit */
.contact-form-wrapper .form-submit {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    margin-top: 1rem !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.contact-form-wrapper .form-submit span {
    display: none; /* Sembunyikan span kosong */
}

.contact-form-wrapper .btn-cta {
    opacity: 1 !important;
    visibility: visible !important;
}

/* --- Team Section --- */
.team-section {
    background-color: #0b0a1d;
    padding: 16rem 0;
    border-top: 1px solid #2a2a30;

    /* --- TAMBAHKAN 2 BARIS INI (Wajib untuk background) --- */
    position: relative;
    overflow: hidden;
}

.team-section::before {
    content: "";
    position: absolute;
    top: -50px; /* Sedikit offset untuk parallax */
    left: 0;
    width: 100%;
    height: 100%;

    /* Background Image + Overlay Gelap (Sama dengan section lain) */
    background-image: linear-gradient(
            rgba(11, 10, 29, 0.5),
            rgba(11, 10, 29, 0.5)
        ),
        url("/img/bg4.avif"); /* Pastikan path gambar ini benar */

    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    opacity: 1;
    z-index: 0; /* Di belakang konten */
    pointer-events: none;

    /* Efek Parallax (Variabel akan diisi oleh JS) */
    transform: translateY(var(--team-scroll-y, 0px));
    transition: transform 0.1s linear;

    /* Efek Fade di bagian bawah */
    -webkit-mask-image: linear-gradient(to bottom, white 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, white 60%, transparent 100%);
}

/* --- PENTING: Pastikan Konten di atas Background --- */
.team-section .container {
    position: relative;
    z-index: 1;
}

.team-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 4rem;
    position: relative; /* Tambahan aman */
    z-index: 1;         /* Tambahan aman */
}

@media (min-width: 768px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 992px) {
    .team-grid {
        /* 4 kolom di layar besar agar mirip galeri, atau ganti 3 jika ingin lebih besar */
        grid-template-columns: repeat(4, 1fr);
    }
}

.team-card {
    background-color: #1a1a1e;
    border: 1px solid #2a2a30;
    border-radius: 8px; /* Radius melengkung sedikit */
    overflow: hidden; /* Agar gambar mengikuti radius card */
    transition: transform 0.3s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;

    /* Animasi Fade In (reuse logic dari custom.css Anda) */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.team-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.team-card:hover {
    transform: translateY(-10px);
    border-color: #4a4a50;
}

/* Bagian Gambar */
.team-image {
    width: 100%;
    height: 300px; /* Tinggi tetap agar seragam */
    overflow: hidden;
    background-color: #2a2a30;
}

.team-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Memastikan gambar proporsional & memenuhi kotak */
    object-position: center top; /* Fokus ke wajah bagian atas */
    transition: transform 0.5s ease;
}

.team-card:hover .team-image img {
    transform: scale(1.1); /* Efek zoom saat hover */
}

/* Bagian Konten Teks */
.team-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.team-role {
    display: block;
    font-size: 0.85rem;
    color: #8a8a90; /* Warna abu-abu agak gelap untuk role */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.team-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1rem;
}

.team-desc {
    font-size: 0.95rem;
    color: #c0c0c0;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    flex-grow: 1; /* Mendorong sosmed ke bawah agar rata */
}

/* Social Icons */
.team-social {
    display: flex;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #2a2a30;
}

.team-social a {
    color: #8a8a90;
    font-size: 1.1rem;
    transition: color 0.2s;
}

.team-social a:hover {
    color: #e95d5e; /* Warna aksen merah saat hover */
}

/* Staggered Animation Delay */
.team-card.is-visible:nth-child(1) {
    transition-delay: 0.1s;
}
.team-card.is-visible:nth-child(2) {
    transition-delay: 0.2s;
}
.team-card.is-visible:nth-child(3) {
    transition-delay: 0.3s;
}
.team-card.is-visible:nth-child(4) {
    transition-delay: 0.4s;
}

/* --- Animasi untuk Service Card (Program Kami) --- */

/* 1. Set kondisi awal (Invisible & Turun sedikit) */
.service-card {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* 2. Set kondisi akhir (Visible & Posisi normal) */
.service-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 3. Staggered Delay (Muncul berurutan) */
/* Kartu ke-1 muncul setelah 0.1 detik */
.service-card.is-visible:nth-child(1) {
    transition-delay: 0.1s;
}

/* Kartu ke-2 muncul setelah 0.3 detik */
.service-card.is-visible:nth-child(2) {
    transition-delay: 0.3s;
}

/* Kartu ke-3 muncul setelah 0.5 detik */
.service-card.is-visible:nth-child(3) {
    transition-delay: 0.5s;
}

/* --- Animasi Staggered untuk Halaman Kontak --- */

/* 1. Set kondisi awal (Invisible & Turun sedikit) */
.contact-details,
.contact-form-wrapper,
.map-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* 2. Set kondisi akhir (Visible & Posisi normal) */
.contact-details.is-visible,
.contact-form-wrapper.is-visible,
.map-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 3. Atur Delay Berurutan */

/* Elemen 1: Info Kontak (Kiri) - Muncul Cepat */
.contact-details.is-visible {
    transition-delay: 0.1s;
}

/* Elemen 2: Formulir (Kanan) - Muncul Sedikit Lebih Lambat */
.contact-form-wrapper.is-visible {
    transition-delay: 0.3s;
}

/* Elemen 3: Peta (Bawah) - Muncul Terakhir */
.map-section.is-visible {
    transition-delay: 0.5s;
}

/* --- Animasi Halaman Karir --- */

/* 1. Animasi Header di halaman karir (agar tidak kaku) */
.career-section .section-header-center {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.career-section .section-header-center.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 2. Animasi Kartu Karir (Initial State) */
.career-card {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    /* (Transition lain seperti hover tetap aman karena kita spesifik di property ini) */
}

/* 3. Animasi Kartu Karir (Final State) */
.career-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 4. Staggered Delay (Muncul Berurutan) */
.career-card.is-visible:nth-child(1) {
    transition-delay: 0.1s;
}
.career-card.is-visible:nth-child(2) {
    transition-delay: 0.3s;
}
.career-card.is-visible:nth-child(3) {
    transition-delay: 0.5s;
}

/* --- HALAMAN LOGIN ADMIN --- */

.login-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh; /* Tinggi penuh layar */
    padding: 16rem;

    /* Setup untuk Background */
    position: relative;
    overflow: hidden;
}

/* Background Image dengan Overlay */
.login-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* Gambar Background & Overlay Gelap */
    background-image: linear-gradient(
            rgba(11, 10, 29, 0.6),
            rgba(11, 10, 29, 0.6)
        ),
        url("/img/bg4.avif"); /* Pastikan path gambar ini benar */

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    z-index: 0; /* Di belakang form */
    pointer-events: none;
}

/* Kotak Form Login */
.login-form {
    width: 100%;
    max-width: 400px; /* Lebar maksimal agar rapi */
    background-color: #1a1a1e; /* Warna kartu gelap */
    border: 1px solid #2a2a30; /* Border tipis */
    padding: 2.8rem;
    border-radius: 8px;

    /* Agar tampil di atas background */
    position: relative;
    z-index: 1;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* Bayangan agar timbul */
}

/* Logo & Judul */
.login-logo {
    text-align: center;
    margin-bottom: 1.5rem;
}

.login-logo img {
    max-height: 80px; /* Ukuran logo */
    width: auto;
}

.login-form h2 {
    text-align: center;
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 2rem;
    font-size: 1.5rem;
}

/* Input Group */
.login-form .form-group {
    margin-bottom: 1.5rem;
}

.login-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: #e0e0e0; /* Teks label terang */
}

/* Styling Input Field */
.login-form .form-control {
    display: block;
    width: 100%;
    background-color: #0b0a1d; /* Input lebih gelap dari kartu */
    border: 1px solid #4a4a50;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    color: #ffffff;
    font-size: 1rem;
    transition: border-color 0.2s;
}

.login-form .form-control:focus {
    outline: none;
    border-color: #e95d5e; /* Border merah saat aktif */
}

/* Checkbox "Ingat Saya" */
.login-form .form-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #c0c0c0;
    margin-bottom: 1.5rem;
}

/* Tombol Login */
.login-form .btn-login {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 6px;
    background-color: #e95d5e; /* Warna Merah Utama */
    color: #ffffff;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
}

.login-form .btn-login:hover {
    background-color: #d94c4d; /* Merah lebih gelap saat hover */
    transform: translateY(-2px);
}

/* --- Animasi untuk Project Program (Dynamic List) --- */

/* 1. Kondisi Awal (Tersembunyi & Turun Sedikit) */
.solution-image-card,
.solution-text-card {
    opacity: 0;
    transform: translateY(30px);
    /* Transisi halus */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* 2. Kondisi Akhir (Muncul saat class 'is-visible' ditambahkan JS) */
.solution-image-card.is-visible,
.solution-text-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 3. Efek "Staggered" Sederhana (Text muncul sedikit setelah Gambar) */
.solution-text-card.is-visible {
    transition-delay: 0.2s;
}

/* --- Tombol Kembali di Halaman Program --- */
.btn-back-program {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 2rem;
    background-color: transparent;
    border: 2px solid #4a4a50;
    color: #e0e0e0;
    border-radius: 50px; /* Bentuk kapsul */
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-back-program i {
    transition: transform 0.3s ease;
}

.btn-back-program:hover {
    background-color: #E95D5E; /* Merah saat hover */
    border-color: #E95D5E;
    color: #FFFFFF;
    transform: translateY(-3px); /* Efek naik sedikit */
    box-shadow: 0 4px 15px rgba(233, 93, 94, 0.4); /* Glow merah */
}

.btn-back-program:hover i {
    transform: translateX(-5px); /* Panah bergerak ke kiri */
}

/* ==========================================================================
   MOBILE RESPONSIVENESS (FRONTEND)
   ========================================================================== */

/* Tablet & Mobile (Layar < 992px) */
@media (max-width: 991px) {

    /* 1. Reset Container */
    .container {
        width: 90%;
        padding: 0;
    }

    /* 2. Navbar Mobile (Agar Rapi) */
    #header {
        position: fixed !important; /* Paksa navbar nempel di atas */
        top: 0;
        left: 0;
        width: 100%;
        background-color: rgba(11, 10, 29, 0.95) !important; /* Background gelap pekat */
        box-shadow: 0 2px 10px rgba(0,0,0,0.3);
        padding: 1rem 0;
        height: auto; /* Tinggi otomatis */
    }

    .navbar {
        padding: 0;
        justify-content: space-between; /* Logo kiri, Toggle kanan */
    }

    /* Logo di HP */
    #header .logo img {
        max-height: 40px !important; /* Ukuran logo pas di HP */
    }

    /* Sembunyikan Menu Asli (Akan diganti Mobile Nav oleh JS) */
    /* Ini kunci agar menu tidak menumpuk "berantakan" */
    .nav-menu {
        display: none;
    }

    /* Tombol Toggle (Hamburger) - Jika JS berjalan, ini akan muncul */
    .mobile-nav-toggle {
        display: block; /* Pastikan tombol muncul */
        color: #fff;
        font-size: 28px;
        cursor: pointer;
        border: none;
        background: none;
        padding-right: 0;
    }

    /* 3. Perbaikan Hero Section (Agar tidak ketimpa Navbar) */
    .hero-section {
        margin-top: 0;
        padding-top: 80px; /* Kompensasi tinggi navbar fixed */
        min-height: 100vh; /* Tinggi penuh layar */
        display: flex;
        align-items: center; /* Tengahkan vertikal */
    }

    .hero-content {
        margin-left: 0 !important; /* Reset margin desktop */
        padding-top: 2rem; /* Jarak tambahan dari navbar */
        padding-left: 1rem; /* Jarak dari pinggir layar */
        padding-right: 1rem;
        text-align: center; /* Teks rata tengah */
        width: 100%;
        max-width: 100%;
    }

    .hero-content h1 {
        font-size: 2rem; /* Judul lebih kecil agar muat */
        line-height: 1.3;
        margin-bottom: 1rem;
    }

    .hero-content p {
        font-size: 1rem;
        margin-bottom: 2rem;
    }

    /* 4. Reset Section Padding Lainnya */
    .services-section, .benefits-section, .vision-section,
    .contact-section, .career-section, .solution-features-section,
    .team-section, .portfolio {
        padding: 4rem 0;
    }

    /* 5. Form & Grid Mobile */
    .features-grid, .stats-grid, .contact-grid, .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .features-grid {
        margin-top: 0;
    }

    .contact-form-wrapper .form-row {
        grid-template-columns: 1fr !important;
    }

    /* Login Form Mobile */
    .login-container {
        padding: 6rem 1rem 2rem 1rem; /* Padding atas besar utk hindari navbar */
    }
}

/* Mobile Kecil (Layar < 576px) */
@media (max-width: 576px) {
    .hero-content h1 {
        font-size: 1.8rem;
    }

    .stat-number {
        font-size: 2.5rem;
    }

    .section-header-center h2 {
        font-size: 1.8rem;
    }

    .portfolio-grid {
        column-count: 1; /* 1 kolom galeri */
    }

    /* Form Kontak jadi 1 kolom */
    .contact-form-wrapper .form-row {
        grid-template-columns: 1fr !important;
    }
}