/* --- Reset & Base Styles --- */
:root {
    --primary-green: #6BA048;
    --dark-green: #0F4C38;
    --neon-green: #BCF31D; /* Warna teks highlight */
    --text-grey: #AAAEAF;
    --text-dark: #0E4B37;
    --white: #FFFFFF;
    --gradient-bg: linear-gradient(140deg, #000000 0%, #0F4C38 100%);
}

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

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--white);
    overflow-x: hidden; /* Mencegah scroll horizontal */
}

.container {
    max-width: 1440px; /* Lebar max sesuai desain */
    margin: 0 auto;
    padding: 0 50px;
    position: relative;
}

/* --- Navbar --- */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 30px;
    padding-bottom: 30px;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 40px;
}

.nav-links a {
    text-decoration: none;
    font-size: 20px; /* Disesuaikan dari 32px agar lebih proporsional di web */
    color: var(--text-grey);
    font-weight: 400;
}

.nav-links a.active {
    color: var(--neon-green);
    font-weight: 500;
}

/* Tambahkan kode ini di bagian Navbar CSS Anda */
.logo img {
    height: 60px; /* Mengatur tinggi logo agar pas di navbar */
    width: auto;  /* Lebar akan menyesuaikan otomatis agar tidak gepeng */
    display: block;
}

/* Opsional: Jika di HP (layar kecil) ingin lebih kecil lagi */
@media (max-width: 768px) {
    .logo img {
        height: 40px; 
    }
}


/* --- Hero Section --- */
.hero-section {
    background: var(--gradient-bg);
    padding-top: 80px;
    padding-bottom: 150px; /* Ruang extra untuk kartu melayang */
    border-radius: 0 0 50px 50px; /* Opsional: memberikan lengkungan di bawah background */
    position: relative;
    overflow: visible;
}

.hero-content {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}

.hero-text {
    max-width: 55%;
    color: var(--white);
}

.badge-line {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.green-dash {
    width: 65px;
    height: 8px;
    background-color: var(--primary-green);
    border-radius: 9px;
    display: block;
}

.badge-text {
    color: var(--text-grey);
    font-size: 20px;
    font-weight: 500;
}

.main-title {
    font-size: 64px;
    line-height: 1.1;
    font-weight: 500;
    margin-bottom: 30px;
}

.text-highlight {
    color: var(--primary-green);
}

.description {
    color: var(--text-grey);
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 40px;
    max-width: 500px;
}

.btn-primary {
    display: inline-block;
    background-color: var(--primary-green);
    color: var(--white);
    padding: 12px 30px;
    border-radius: 27px;
    border: 1px solid #BBFE02;
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    transition: transform 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(107, 160, 72, 0.4);
}

/* Timmerman Label (Top Right) */
.hero-visuals {
    position: absolute;
    right: 0;
    top: 0;
    text-align: right;
    color: var(--white);
}

.timmerman-label {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    justify-content: flex-end;
}

.label-text h3 {
    font-size: 24px;
    line-height: 1.2;
    margin-bottom: 5px;
}

.label-text .year {
    font-size: 36px;
    display: block;
}

/* --- Floating Cards --- */
.floating-cards-container {
    display: flex;
    justify-content: flex-end; /* Posisi di kanan sesuai desain */
    gap: 40px;
    margin-top: -80px; /* Menarik kartu ke atas agar overlap dengan background */
    margin-bottom: 100px;
    z-index: 10;
    position: relative;
    padding-right: 100px; /* Spacer dari kanan */
}

.card-glass {
    position: relative;
    width: 350px;
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    transition: transform 0.3s;
}

.card-glass:hover {
    transform: translateY(-10px);
}

.card-glass img {
    width: 100%;
    height: auto;
    display: block;
}

.card-info {
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 2;
}

.card-info h4 {
    color: #B9CF78;
    font-size: 22px;
    font-weight: 700;
}

.card-info p {
    color: #FAFFFD;
    font-size: 14px;
}

/* --- Partner Section Fix --- */

.partner-section {
    position: relative;
    /* Margin negatif ini menarik box hijau ke atas agar menimpa
       perbatasan antara background hitam dan putih (overlap) */
    margin-top: -90px; 
    z-index: 20; /* Pastikan dia di atas elemen lain */
    margin-bottom: 100px;
}

.partner-box {
    background-color: var(--primary-green);
    border-radius: 30px;
    padding: 30px 50px; /* Padding atas-bawah dan kiri-kanan */
    
    /* Layout menjadi Kolom (Atas ke Bawah) */
    display: flex;
    flex-direction: column; 
    align-items: center; /* Tengah secara horizontal */
    justify-content: center;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15); /* Sedikit bayangan agar pop-up */
}

.partner-box h2 {
    color: var(--white);
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 30px; /* Jarak antara text dan barisan logo */
    text-align: center;
    width: 100%;
}

.logos-grid {
    display: flex;
    align-items: center; /* Logo rata tengah secara vertikal */
    justify-content: space-between; /* Jarak antar logo merata kiri ke kanan */
    width: 100%; /* Memenuhi lebar container */
    flex-wrap: nowrap; /* PENTING: Mencegah logo turun ke bawah */
    gap: 20px; /* Jarak aman antar logo */
}

.logos-grid img {
    /* PENTING: Mengunci tinggi logo agar seragam dan rapi */
    max-height: 60px; 
    width: auto; /* Lebar menyesuaikan proporsi */
    
    /* Opsional: filter grayscale/brightness jika ingin logo terlihat putih/seragam */
    /* filter: brightness(0) invert(1); */ 
    object-fit: contain;
}

/* Responsiveness untuk layar kecil (HP) */
@media (max-width: 768px) {
    .partner-section {
        margin-top: 30px; /* Di HP tidak perlu overlap */
    }
    
    .logos-grid {
        flex-wrap: wrap; /* Di HP boleh turun ke bawah */
        justify-content: center;
        gap: 30px;
    }
    
    .logos-grid img {
        max-height: 50px;
    }
}

/* --- Feature Section (Bawah) --- */
.features-section {
    padding-bottom: 100px;
}

.feature-layout {
    display: flex;
    align-items: center;
    gap: 60px;
}

.feature-images {
    flex: 1;
    position: relative;
    height: 400px; /* Estimasi tinggi area gambar */
}

.img-landscape {
    width: 80%;
    border-radius: 20px;
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.img-inset-wrapper {
    position: absolute;
    bottom: 0;
    right: 50px; /* Offset dari kanan container gambar */
    padding: 10px;
    background: var(--white);
    border-radius: 26px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.img-inset {
    border-radius: 20px;
    display: block;
    width: 200px;
    height: auto;
    background-color: var(--primary-green); /* Placeholder bg jika transparan */
}

.feature-text {
    flex: 1;
}

.sub-heading {
    color: var(--text-dark);
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}
/* Aksen kuning kecil di atas sub-heading */
.sub-heading::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 25px;
    background-color: #FFD700; /* Warna kuning strip */
    margin-right: 15px;
}

.section-title {
    font-size: 40px;
    color: var(--text-dark);
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 20px;
}

.highlight-green {
    color: var(--neon-green);
    font-style: italic;
    font-weight: 700;
}

/* Responsiveness Simple */
@media (max-width: 1024px) {
    .main-title { font-size: 48px; }
    .floating-cards-container { 
        justify-content: center; 
        padding-right: 0;
        margin-top: -50px;
    }
}

@media (max-width: 768px) {
    .navbar { flex-direction: column; gap: 20px; }
    .hero-content { flex-direction: column; }
    .hero-text { max-width: 100%; text-align: center; }
    .badge-line { justify-content: center; }
    .hero-visuals { position: relative; margin-top: 30px; text-align: center; }
    .timmerman-label { justify-content: center; }
    
    .floating-cards-container { flex-direction: column; align-items: center; }
    
    .partner-box { flex-direction: column; text-align: center; gap: 30px; }
    .partner-box h2 { width: 100%; }
    .logos-grid { width: 100%; justify-content: center; }
    
    .feature-layout { flex-direction: column-reverse; }
}
/* =========================================
   CSS FOR TECH INNOVATION SECTION
========================================= */

/* --- Global Variables & Utilities untuk section ini --- */
:root {
    --neon-yellow: #BBFE02; /* Warna kuning terang */
    --card-gradient: linear-gradient(298deg, #000000 0%, #6BA048 100%); /* Gradien kartu atas */
    --shape-gradient: linear-gradient(180deg, #6BA048 23%, #000000 100%); /* Gradien bentuk di diagram bawah */
    --timeline-grey: #D9D9D9;
    --text-body-grey: #585D60;
}

.relative-z2 {
    position: relative;
    z-index: 2;
}

/* --- PART 1: DARK BACKGROUND SECTION --- */
/* Update bagian ini */
.tech-dark-bg {
    /* PERBAIKAN: Menggunakan background gradient penuh */
    background: linear-gradient(140deg, #0F4C38 0%, #08261C 50%, #0F4C38 100%);
    padding-top: 100px;
    padding-bottom: 300px; 
    position: relative;
    overflow: visible; 
    z-index: 5;
    
   
    background-image: url('assets/daun-bg.png'), linear-gradient(140deg, #0F4C38 0%, #08261C 50%, #0F4C38 100%); 
    background-size: cover; 
    background-blend-mode: overlay; 
}


.tech-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Logo feature di kanan atas sejajar dengan text kiri */
    margin-bottom: 20px;
    position: relative;
    z-index: 10; /* Pastikan text di atas background */
}

.tech-header h2 {
    color: var(--white);
    font-size: 40px;
    font-weight: 500;
    line-height: 1.2;
    max-width: 700px;
}

.text-highlight-neon {
    color: var(--neon-yellow);
    font-weight: 700;
    font-style: italic;
}

/* Label "Technological Feature" dengan garis kuning */
.tech-label-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.tech-label-wrapper.right-label {
     /* Khusus untuk label yang di kanan atas */
     justify-content: flex-end;
}

.neon-dash {
    width: 65px;
    height: 8px;
    background-color: var(--neon-yellow);
    border-radius: 9px;
    display: block;
}

.label-text-neon {
    color: #FFFDDF; /* Warna putih kekuningan dari desain */
    font-size: 25px;
    font-weight: 700;
}

.sub-header-neon {
    color: #FFFDDF;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 60px;
}

/* Grid untuk 4 Kartu Poin */
.tech-points-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 Kolom */
    gap: 40px;
    margin-bottom: -250px; /* PENTING: Menarik kartu ke bawah agar overlap ke section putih */
    position: relative;
    z-index: 10;
}

.tech-card {
    background: var(--card-gradient);
    border-radius: 31px;
    padding: 30px 25px;
    height: 267px; /* Tinggi fix sesuai desain */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    transition: transform 0.3s;
}

.tech-card:hover {
    transform: translateY(-10px);
}

.card-number {
    color: var(--white);
    font-size: 24px;
    font-weight: 300;
    text-align: left;
    display: block;
    margin-bottom: 20px;
}

.card-number.neon-text {
    color: var(--neon-yellow);
}

.tech-card h3 {
    color: var(--white);
    font-size: 24px;
    font-style: italic;
    font-weight: 500;
    line-height: 1.3;
}

.tech-card h3.neon-text {
    color: var(--neon-yellow);
}

/* --- PART 2: WHITE BACKGROUND SECTION (Diagram & Timeline) --- */
.tech-white-bg {
    background-color: var(--white);
    padding-top: 120px;
    padding-bottom: 10px;
    position: relative;
    z-index: 1;
}

/* Wrapper baru untuk Header & Label Kanan */
.diagram-header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 60px; /* Jarak ke diagram */
}

.diagram-title-block {
    max-width: 70%;
}

/* Styling untuk Judul agar sesuai referensi */
.section-title-dark {
    font-size: 40px;
    color: black; /* Warna hitam untuk teks utama */
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 20px;
}

.text-highlight-dark {
    color: var(--text-dark); /* Warna hijau tua untuk highlight */
    font-style: italic;
    font-weight: 700;
}

.section-desc-dark {
    color: var(--text-dark);
    font-size: 20px;
    font-weight: 700;
    max-width: 800px;
}

/* Styling Label Kanan (Garis Kuning + Teks Hijau) */
.right-label-dark {
    justify-content: flex-end;
    margin-top: 10px; /* Sedikit penyesuaian vertikal */
}

.label-text-dark {
    color: var(--text-dark); /* Warna hijau tua */
    font-size: 25px;
    font-weight: 700;
}


/* --- Diagram Flow CSS --- */
.iot-diagram-flow {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Ubah ke flex-start agar label rata atas */
    margin-bottom: 150px;
    position: relative;
    padding-top: 30px; /* Ruang untuk label yang sekarang di atas */
}

.diagram-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 2;
    gap: 15px; /* Jarak antara Label dan Gambar */
}

/* Label di atas gambar */
.step-label {
    color: black;
    font-size: 14px;
    font-style: italic;
    font-weight: 500;
    margin-bottom: 0; /* Reset margin bawah */
}

/* Container Visual (Gambar) */
.step-visual {
    /* ... (properti visual lainnya tetap sama) ... */
    width: 227px;
    height: 280px;
    background: var(--shape-gradient);
    border-radius: 20px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}
.step-visual img {
    width: auto;
    height: 80%; /* Sesuaikan tinggi gambar agar proporsional di dalam container */
    border-radius: 15px;
}

/* Penyesuaian Panah agar sejajar dengan tengah gambar */
.diagram-arrow {
    /* ... */
    align-self: center; /* Panah kembali ke tengah secara vertikal */
    margin-top: 40px; /* Kompensasi karena ada label di atas */
}
.arrow-top-arc { margin-top: -60px; }
.arrow-bottom-arc { margin-top: 140px; transform: scaleY(-1); }

/* --- Timeline Process CSS --- */
.process-timeline-container {
    max-width: 1100px;
    margin: 0 auto; /* Tengah */
    margin-bottom: 70px;
}

.timeline-list {
    list-style: none;
    padding: 0;
    position: relative;
}

.timeline-item {
    display: flex;
    gap: 40px; /* Jarak antara marker dan konten */
    margin-bottom: 60px; /* Jarak antar item timeline */
    position: relative;
}

/* Marker (Lingkaran Hijau Angka) */
.marker {
    flex-shrink: 0; /* Jangan mengecil */
    width: 75px;
    height: 75px;
    background-color: var(--primary-green);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--white);
    font-size: 32px;
    font-weight: 500;
    position: relative;
    z-index: 2; /* Di atas garis putus-putus */
}

/* Garis Putus-putus Penghubung */
.timeline-item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 36px; /* Setengah dari lebar marker (75px / 2) - setengah lebar border */
    top: 75px; /* Mulai dari bawah marker */
    height: calc(100% - 50px); /* Panjang garis sampai marker berikutnya */
    border-left: 3px dashed var(--timeline-grey);
    z-index: 1;
}

.timeline-content h3 {
    color: var(--text-dark);
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 15px;
}

.timeline-content p {
    color: var(--text-body-grey);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
}

/* --- Responsive Adjustments --- */
@media (max-width: 1200px) {
    .tech-points-grid {
        grid-template-columns: repeat(2, 1fr); /* Jadi 2 kolom di layar sedang */
        gap: 30px;
    }
    .iot-diagram-flow {
        flex-wrap: wrap; /* Diagram boleh turun ke bawah */
        justify-content: center;
        gap: 60px;
    }
    .diagram-arrow { display: none; } /* Sembunyikan panah di layar kecil agar tidak berantakan */
}

@media (max-width: 768px) {
    .tech-header { flex-direction: column; gap: 20px; }
    .tech-header h2 { font-size: 32px; }
    .tech-points-grid {
        grid-template-columns: 1fr; /* Jadi 1 kolom di HP */
        margin-bottom: -150px;
    }
    .tech-card { height: auto; padding: 40px; align-items: center; text-align: center;}
    
    .tech-white-bg { padding-top: 200px; }
    .section-title-dark { font-size: 32px; }

    .timeline-item { gap: 20px; }
    .marker { width: 60px; height: 60px; font-size: 24px; }
    .timeline-item:not(:last-child)::after { left: 28.5px; top: 60px; }
    .timeline-content h3 { font-size: 20px; }
}
/* =========================================
   SHOWCASE SECTION STYLES
========================================= */

.showcase-section {
    background: linear-gradient(140deg, #0F4C38 0%, #08261C 50%, #0F4C38 100%);
    padding: 100px 0;
    position: relative;
    overflow: hidden; /* Penting: memotong gambar HP yang keluar jalur */
    min-height: 900px; /* Tinggi minimal agar proporsional */
    display: flex;
    align-items: center;
}

.showcase-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* --- Content Side (Kiri) --- */
.showcase-content {
    flex: 0 0 45%; /* Lebar 45% */
    z-index: 10;
}

.badge-text-showcase {
    color: #AAAEAF;
    font-size: 25px;
    font-weight: 700;
}

.showcase-title {
    color: var(--white);
    font-size: 52px; /* Sesuai raw code Figma */
    line-height: 1.2;
    font-weight: 500;
    margin-bottom: 30px;
}

.showcase-title .highlight-neon {
    color: #BAFD02;
    font-style: italic;
    font-weight: 700;
}

.showcase-desc {
    color: #AAAEAF;
    font-size: 20px;
    line-height: 1.6;
    margin-bottom: 50px;
    max-width: 550px;
}

/* Tombol Next Custom */
.btn-gradient-next {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 218px;
    height: 57px;
    background: linear-gradient(90deg, #000000 0%, #BAFD02 100%);
    border-radius: 30px;
    padding: 0 30px;
    text-decoration: none;
    box-shadow: 3px 13px 4px rgba(0, 0, 0, 0.25);
    transition: transform 0.3s ease;
}

.btn-gradient-next:hover {
    transform: scale(1.05);
}

.btn-gradient-next span {
    color: #FFFDDF;
    font-size: 24px;
    font-weight: 500;
}

.btn-gradient-next svg {
    background: white;
    border-radius: 50%;
    padding: 5px;
    width: 30px;
    height: 30px;
}


/* --- Visual Side (Kanan - Sliding Animation) --- */
.showcase-visuals {
    flex: 0 0 55%;
    height: 800px; /* Area visual */
    position: relative;
    /* Geser sedikit ke kanan agar pas dengan layout */
    margin-right: -100px; 
}

/* Wrapper yang memutar seluruh galeri sebesar 30 derajat */
.rotated-gallery-wrapper {
    display: flex;
    gap: 40px; /* Jarak antar kolom HP */
    transform: rotate(30deg) translateY(-100px); /* Rotasi sesuai desain */
    position: absolute;
    top: -20%;
    left: 10%;
    height: 150%; /* Lebih tinggi dari container agar tidak putus saat scroll */
}

/* Kolom Gambar */
.sliding-column {
    display: flex;
    flex-direction: column;
    gap: 40px; /* Jarak vertikal antar HP */
}

.sliding-column img {
    width: 284px;
    height: auto;
    border-radius: 40px;
    box-shadow: -10px 10px 30px rgba(0,0,0,0.5);
    /* Border tipis hijau/putih agar terlihat lebih pop-up */
    border: 4px solid #0E4B37; 
}

/* --- ANIMASI KEYFRAMES --- */

/* Animasi Bergerak ke Atas */
.col-up {
    animation: scrollUp 20s linear infinite;
}

/* Animasi Bergerak ke Bawah (Opsional: Membuat efek parallax) */
.col-down {
    animation: scrollDown 25s linear infinite;
}

@keyframes scrollUp {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); } 
    /* -50% karena kita menduplikasi gambar. Saat mencapai 50%, 
       gambar duplikat menggantikan posisi gambar asli tanpa jeda. */
}

@keyframes scrollDown {
    0% { transform: translateY(-50%); }
    100% { transform: translateY(0); }
}

/* Overlay Gradient untuk memperhalus ujung atas/bawah slide */
.visual-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #0F4C38 0%, transparent 20%, transparent 80%, #0F4C38 100%);
    pointer-events: none;
    z-index: 5;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .showcase-layout {
        flex-direction: column;
        text-align: center;
    }
    
    .showcase-content {
        margin-bottom: 50px;
        padding: 0 20px;
    }
    
    .badge-line { justify-content: center; }
    .showcase-desc { margin: 0 auto 40px auto; }
    
    .showcase-visuals {
        width: 100%;
        height: 500px;
        margin-right: 0;
        overflow: hidden;
    }
    
    .rotated-gallery-wrapper {
        left: 50%;
        transform: translateX(-50%) rotate(0deg); /* Hilangkan rotasi di tablet agar rapi */
        flex-direction: row;
        top: 0;
    }
    
    .sliding-column img {
        width: 200px; /* Perkecil gambar */
    }
}

@media (max-width: 768px) {
    .showcase-title { font-size: 32px; }
    .rotated-gallery-wrapper { gap: 20px; }
    .sliding-column img { width: 150px; }
}
/* =========================================
   WEB DASHBOARD SECTION STYLES
========================================= */

.dashboard-section {
    padding: 100px 0;
    background-color: var(--white);
    overflow: hidden; /* Mencegah elemen dekorasi keluar layar */
}

.dashboard-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px; /* Jarak antara gambar dan teks */
}

/* --- Visual Side (Kiri) --- */
.dashboard-visual-wrapper {
    position: relative;
    flex: 1.2; /* Mengambil ruang lebih besar (sekitar 60%) */
    min-height: 450px; /* Tinggi minimal agar backdrop tidak terpotong */
    display: flex;
    align-items: center;
}

/* Bentuk Hijau di Belakang */
.green-backdrop-shape {
    position: absolute;
    left: -150px; /* Digeser keluar container agar seperti desain */
    top: 50%;
    transform: translateY(-50%); /* Center vertikal */
    width: 495px;
    height: 436px;
    /* Gradient sesuai raw code */
    background: linear-gradient(45deg, #000000 0%, #6BA048 40%); 
    border-radius: 50px;
    z-index: 0; /* Di belakang gambar */
}

/* Gambar Dashboard */
.dashboard-img {
    position: relative;
    z-index: 2; /* Di depan backdrop */
    width: 100%;
    max-width: 820px; /* Sesuai raw code */
    height: auto;
    border-radius: 10px; /* Sedikit radius biar manis (opsional) */
    box-shadow: 10px 11px 20px rgba(0, 0, 0, 0.25); /* Shadow tebal sesuai desain */
}

/* --- Text Side (Kanan) --- */
.dashboard-text-content {
    flex: 0.8; /* Mengambil ruang sisa (sekitar 40%) */
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Rata Kanan */
    text-align: right;
}

.dashboard-label-group {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-bottom: 20px;
}

.neon-dash-small {
    width: 65px;
    height: 8px;
    background-color: #BBFE02;
    border-radius: 9px;
    margin-bottom: 10px;
    display: block;
}

.label-text-grey {
    color: #AAAEAF;
    font-size: 25px;
    font-weight: 700;
}

.dashboard-title {
    color: #0E4B37;
    font-size: 40px; /* Sesuai raw code */
    font-weight: 500;
    line-height: 1.3;
}

/* Highlight Text (Warna Hijau Neon + Italic) */
.highlight-neon-italic {
    color: #BBFE02; /* Mengikuti style visual gambar, bukan raw code yang hitam */
    font-style: italic;
    font-weight: 700;
}


/* --- Responsive Styles --- */
@media (max-width: 1024px) {
    .dashboard-layout {
        flex-direction: column-reverse; /* Teks di atas, gambar di bawah (atau sebaliknya) */
        gap: 60px;
    }

    .dashboard-visual-wrapper {
        justify-content: center;
        width: 100%;
    }

    .green-backdrop-shape {
        left: -50px; /* Sesuaikan posisi di tablet */
        width: 300px;
        height: 300px;
    }

    .dashboard-text-content {
        align-items: center;
        text-align: center;
        width: 100%;
    }

    .dashboard-label-group {
        align-items: center;
    }
}

@media (max-width: 768px) {
    .dashboard-title {
        font-size: 30px;
    }
    
    .green-backdrop-shape {
        left: -20px;
        opacity: 0.8; /* Sedikit transparan di HP agar tidak terlalu dominan */
    }
}
/* =========================================
   TESTING & STANDARDIZATION SECTION STYLES
========================================= */

.testing-section {
    padding: 100px 0;
    background-color: var(--white);
    color: var(--text-dark);
}

/* --- Header --- */
.testing-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 80px;
}

.header-content h2 {
    font-size: 40px;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 30px;
    max-width: 800px;
}

.highlight-dark-italic {
    font-weight: 700;
    font-style: italic;
    color: black;
}

.header-desc {
    font-size: 20px;
    color: var(--text-dark); /* Menggunakan warna hijau tua #0F4C37 */
    max-width: 900px;
    line-height: 1.6;
}

/* Penyesuaian Label Feature */
.top-align {
    margin-top: 10px; /* Sedikit turun agar sejajar optik dengan Title */
}

/* --- Vertical Timeline --- */
.testing-timeline {
    display: flex;
    flex-direction: column;
    max-width: 1000px;
    /* margin-left: 154px;  Opsional: Jika ingin indentasi manual seperti figma, 
                           tapi lebih baik pakai container center default */
}

.timeline-row {
    display: flex;
    gap: 40px; /* Jarak antara Bulatan dan Teks */
    position: relative;
    padding-bottom: 20px; /* Jarak antar row */
}

/* Kolom Kiri: Marker (Bulatan + Garis) */
.timeline-marker-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80px; /* Lebar area marker */
    flex-shrink: 0;
}

.circle-badge {
    width: 75px;
    height: 75px;
    background-color: var(--primary-green); /* #6BA048 */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--white);
    font-size: 32px;
    font-weight: 500;
    z-index: 2; /* Agar di atas garis */
}

/* Garis Vertikal */
.vertical-line {
    width: 3px;
    background-color: #D9D9D9;
    flex-grow: 1; /* Memanjang ke bawah mengisi ruang kosong */
    min-height: 80px; /* Tinggi minimal garis */
    margin-top: -5px; /* Sedikit overlap agar tidak ada celah putih */
    margin-bottom: -5px;
}

/* Menghilangkan garis pada item terakhir */
.timeline-row:last-child .vertical-line {
    display: none;
}

/* Kolom Kanan: Konten */
.timeline-content-col {
    padding-top: 10px; /* Men sejajarkan judul dengan angka */
    padding-bottom: 40px;
}

.timeline-content-col h3 {
    font-size: 24px;
    font-weight: 500;
    color: black;
    margin-bottom: 15px;
}

.timeline-content-col p {
    font-size: 16px;
    color: #585D60; /* Warna abu-abu teks body */
    line-height: 1.6;
    font-weight: 500;
}

/* Highlight Text dalam paragraf (Bold + Italic + Hijau Tua) */
.text-highlight {
    color: var(--text-dark); /* #0E4B37 */
    font-weight: 700;
    font-style: italic;
}


/* --- Responsive --- */
@media (max-width: 1024px) {
    .testing-header {
        flex-direction: column-reverse;
        gap: 20px;
    }
    
    .right-label-dark {
        justify-content: flex-start; /* Label pindah ke kiri di tablet/hp */
    }
}

@media (max-width: 768px) {
    .header-content h2 {
        font-size: 28px;
    }
    
    .timeline-row {
        gap: 20px;
    }

    .circle-badge {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }
    
    .vertical-line {
        min-height: 50px;
    }
}
/* =========================================
   ACCURACY & VALIDATION SECTION STYLES
========================================= */

.validation-section {
    padding: 100px 0;
    background-color: var(--white);
}

.validation-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 Kolom Seimbang */
    gap: 50px; /* Jarak antar kolom/baris */
    align-items: start;
}

/* --- Text Content Column --- */
.validation-text-content {
    padding-right: 30px;
}

.section-subtitle {
    color: #0E4B37;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
}

.section-title-large {
    font-size: 36px;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 30px;
    color: black;
}

.section-title-large .highlight-neon {
    color: #BBFE02;
    font-style: italic;
    font-weight: 700;
}

.section-description {
    color: #AAAEAF;
    font-size: 18px; /* Disesuaikan agar mudah dibaca */
    line-height: 1.6;
}


/* --- Validation Cards --- */
.validation-card {
    background: linear-gradient(135deg, #0E4B37 0%, #6BA048 100%);
    border-radius: 39px;
    padding: 30px;
    color: var(--white);
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 500px;
}

/* Card Header */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 25px;
    position: relative;
}

.element-name {
    font-size: 30px;
    font-style: italic;
    font-weight: 500;
}

/* Metrics Wrapper (Badge & Percent) */
.metric-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-right: 60px; /* Memberi ruang untuk icon chart di kanan */
}

.badge-error {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.8);
    background-color: rgba(107, 160, 72, 0.5); /* Warna hijau transparan */
    padding: 5px 15px;
    border-radius: 30px;
    font-size: 14px;
    font-style: italic;
    margin-bottom: 5px;
}

.percentage-value {
    font-size: 30px;
    font-weight: 700;
    font-style: italic;
    color: #0F4C38; /* Warna hijau gelap sesuai desain */
    text-shadow: 0 0 2px rgba(255,255,255,0.5); /* Agar terbaca di bg gelap */
}

/* CSS Pure Donut Chart Icon */
.mini-chart {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: conic-gradient(var(--c) calc(var(--p)*1%), rgba(255,255,255,0.2) 0);
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Lubang tengah donut chart */
.mini-chart::before {
    content: "";
    width: 30px;
    height: 30px;
    background-color: #3d754b; /* Warna kira-kira background kartu */
    border-radius: 50%;
}
/* Dot kecil di chart */
.mini-chart::after {
    content: "";
    position: absolute;
    top: 5px;
    width: 8px;
    height: 8px;
    background: #BBFE02;
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}


/* Graph Image Container */
.graph-container {
    background: white;
    border-radius: 30px;
    padding: 20px;
    text-align: center;
    flex-grow: 1; /* Mengisi sisa ruang */
    display: flex;
    flex-direction: column;
}

.graph-container img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin-bottom: 15px;
    object-fit: cover;
}

.graph-caption {
    color: black;
    font-size: 16px;
    font-weight: 600;
    font-family: serif; /* Font serif untuk caption grafik seperti di gambar */
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .validation-grid {
        grid-template-columns: 1fr; /* Jadi 1 kolom di Tablet */
        gap: 60px;
    }

    .validation-text-content {
        padding-right: 0;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .section-title-large {
        font-size: 28px;
    }
    
    .element-name {
        font-size: 24px;
    }
    
    .percentage-value {
        font-size: 24px;
    }
    
    .validation-card {
        padding: 20px;
    }
}
/* =========================================
   SENSOR TESTING SECTIONS STYLES
========================================= */

/* PENTING: Untuk efek slide halus saat klik tombol */
html {
    scroll-behavior: smooth;
}
/* Wadah Utama (Jendela) */
.slider-viewport {
    width: 100vw;       /* Lebar penuh layar */
    overflow: hidden;   /* Sembunyikan slide yang ada di samping */
    background: linear-gradient(180deg, #000000 0%, #0E4B37 100%);
    position: relative;
}

/* Jalur Slide (Track yang bergerak) */
.slider-track {
    display: flex;      /* Menyusun item ke samping */
    width: 300vw;       /* Lebar 3x layar (karena ada 3 slide) */
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); /* Animasi slide halus */
}

/* Item Slide (Masing-masing Section) */
.slide-item {
    width: 100vw;       /* Setiap slide selebar satu layar */
    flex-shrink: 0;     /* Jangan mengecil */
    padding: 100px 0;   /* Padding atas bawah konten */
    min-height: 100vh;
    display: flex;
    align-items: center; /* Konten di tengah vertikal */
}

.test-section {
    /* Background Gradient Gelap sesuai desain */
    background: linear-gradient(180deg, #000000 0%, #0E4B37 100%);
    padding: 100px 0;
    min-height: 100vh; /* Agar setiap section memenuhi layar */
    display: flex;
    align-items: center;
    position: relative;
    border-bottom: 1px solid rgba(255,255,255,0.1); /* Pemisah tipis */
}

/* Header Styles */
.test-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 60px;
}

.test-title {
    color: var(--white);
    font-size: 64px;
    font-weight: 500;
    line-height: 1.1;
}

.right-label-white {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.label-text-white {
    color: var(--white);
    font-size: 25px;
    font-weight: 700;
    margin-top: 10px;
}

/* Timeline Styles */
.test-timeline {
    margin-bottom: 80px;
    max-width: 1200px;
}

.timeline-item {
    display: flex;
    gap: 30px;
    margin-bottom: 10px;
}

.timeline-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 75px;
}

.circle-num {
    width: 75px;
    height: 75px;
    background-color: var(--primary-green);
    border: 1px solid #FFF7F7;
    border-radius: 50%;
    color: var(--white);
    font-size: 32px;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    z-index: 2;
}

.timeline-marker .line {
    width: 3px;
    background-color: #D9D9D9;
    flex-grow: 1;
    min-height: 60px; /* Jarak minimal antar step */
    margin: -5px 0;
}

.timeline-text {
    color: var(--primary-green); /* Warna hijau terang sesuai desain */
    font-size: 24px;
    font-weight: 500;
    padding-top: 15px; /* Sejajar dengan angka */
    line-height: 1.4;
}


/* Footer Area (Result Card & Nav) */
.test-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 50px;
}

/* Result Card (Kartu besar di kiri bawah) */
.result-card {
    background: linear-gradient(45deg, #000000 0%, #6BA048 40%);
    border-radius: 50px;
    padding: 30px;
    width: 100%;
    max-width: 600px;
    position: relative;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

.result-content {
    display: flex;
    align-items: center;
    gap: 20px;
}

.graph-img {
    width: 60%;
    border-radius: 20px;
    border: 2px solid rgba(255,255,255,0.1);
}

.error-stat {
    width: 40%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: var(--white);
}

/* Large Donut Chart */
.donut-chart-lg {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: conic-gradient(var(--c) calc(var(--p)*1%), rgba(255,255,255,0.2) 0);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    box-shadow: 0 0 20px rgba(187, 254, 2, 0.3);
}

.donut-chart-lg::before {
    content: "";
    width: 70px; /* Lubang lebih besar */
    height: 70px;
    background-color: #2a5a41; /* Menyesuaikan warna card */
    border-radius: 50%;
}

.stat-text .value {
    display: block;
    font-size: 48px; /* Ukuran besar sesuai desain */
    font-weight: 500;
    font-style: italic;
    line-height: 1;
    margin-bottom: 10px;
}

.stat-text .label {
    font-size: 18px;
    font-style: italic;
    opacity: 0.8;
}

/* Navigation Buttons (Tombol Lonjong Kanan) */
.test-nav-buttons {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 500px;
}

.nav-btn {
    background-color: #0F4C37;
    border: 3px solid #6BA048;
    border-radius: 30px;
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer; /* Menunjukkan bisa diklik */
    width: 100%;     /* Memastikan lebar tombol konsisten */
    color: inherit;
    font-family: inherit;
}

.nav-btn:hover {
    background-color: #6BA048;
    transform: translateX(10px);
}

.nav-btn span {
    color: #FFFDDF;
    font-size: 20px;
    font-weight: 500;
    font-style: italic;
}

.arrow-icon {
    background: white;
    color: #0F4C37;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}

/* Responsive */
@media (max-width: 1024px) {
    .test-title { font-size: 48px; }
    
    .test-footer {
        flex-direction: column;
        align-items: center;
    }
    
    .result-card { max-width: 100%; }
    .test-nav-buttons { max-width: 100%; }
}

@media (max-width: 768px) {
    .timeline-item { gap: 15px; }
    .circle-num { width: 50px; height: 50px; font-size: 20px; }
    .timeline-marker .line { margin: -2px 0; }
    .timeline-text { font-size: 18px; }
    
    .result-content { flex-direction: column; }
    .graph-img, .error-stat { width: 100%; }
}
/* =========================================
   LAND CHECKING SECTION STYLES
========================================= */

.land-check-section {
    padding: 120px 0;
    background-color: var(--white);
    position: relative;
}

.land-check-layout {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Penting untuk Sticky: item harus align top */
    gap: 60px;
}

/* --- Left Side: Sticky Info --- */
.land-info-sticky {
    flex: 0 0 35%; /* Lebar fix 35% */
    position: sticky; /* Membuat elemen menempel */
    top: 120px;       /* Jarak dari atas layar saat menempel */
    height: fit-content;
}

.land-header-group {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    /* Label di kanan sesuai desain */
}

/* Menggunakan kembali style dash & label dari section sebelumnya */
/* Jika belum ada, pastikan class .neon-dash dan .label-text-dark sudah terdefinisi */

.section-title-medium {
    font-size: 36px;
    font-weight: 500;
    line-height: 1.3;
    color: #0E4B37;
    margin-bottom: 50px;
    text-align: left; /* Teks rata kiri */
}

/* Location List Styling */
.location-list {
    list-style: none;
    padding: 0;
}

.location-list li {
    display: flex;
    align-items: center;
    font-size: 24px;
    font-family: 'Poppins', sans-serif;
    font-style: italic;
    font-weight: 700;
    color: black;
    margin-bottom: 30px;
}

/* Green Dash before List Item */
.location-list li::before {
    content: '';
    display: inline-block;
    width: 37px;
    height: 6px;
    background-color: #6BA048; /* Warna hijau strip */
    margin-right: 20px;
}


/* --- Right Side: Gallery Stack --- */
.land-gallery {
    flex: 1; /* Mengambil sisa ruang */
    display: flex;
    flex-direction: column;
    gap: 50px; /* Jarak antar kartu foto */
}

.land-card {
    position: relative;
    border-radius: 83px; /* Radius besar sesuai raw code */
    overflow: hidden;
    height: 400px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.land-card:hover {
    transform: translateY(-5px); /* Efek hover halus */
}

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

/* Overlay Text di atas gambar */
.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(30, 30, 30, 0.3); /* Gelap transparan */
    backdrop-filter: blur(2px); /* Efek blur kaca */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Teks di bawah */
    padding: 50px;
    color: white;
}

.card-date {
    display: block;
    font-size: 20px; /* Sedikit diperkecil dari raw code agar proporsional */
    font-weight: 700;
    margin-bottom: 10px;
    opacity: 0.9;
}

.card-location {
    font-size: 36px;
    font-weight: 900; /* Font tebal sesuai desain */
    line-height: 1.2;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .land-check-layout {
        flex-direction: column;
    }

    .land-info-sticky {
        position: relative; /* Matikan sticky di layar kecil */
        top: 0;
        width: 100%;
        margin-bottom: 50px;
    }

    .land-header-group {
        justify-content: flex-start; /* Label pindah ke kiri */
    }

    .land-card {
        border-radius: 40px; /* Kurangi radius di layar kecil */
        height: 300px;
    }
    
    .card-location {
        font-size: 28px;
    }
}
/* =========================================
   CREDIBILITY & FEATURES SECTION STYLES
========================================= */

.credibility-section {
    background: linear-gradient(180deg, #000000 0%, #0E4B37 100%);
    padding: 100px 0;
    color: var(--white);
    overflow: hidden;
}

/* --- Header Group --- */
.credibility-header-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60px;
}

.brand-title {
    font-size: 40px;
    font-weight: 500;
}

.text-white { color: var(--white); }
.text-neon-italic { 
    color: #BAFD02; 
    font-style: italic; 
    font-weight: 700; 
}

/* --- News Card --- */
.news-card-wrapper {
    margin-bottom: 100px;
    display: flex;
    justify-content: center;
}

.news-card {
    background-color: var(--white);
    border-radius: 40px;
    overflow: hidden;
    max-width: 1100px;
    width: 100%;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}

.news-image-container img {
    width: 100%;
    height: auto;
    display: block;
    border-bottom: 1px solid #eee;
}

.news-content {
    padding: 40px 60px;
}

.news-excerpt {
    color: #585D60;
    font-size: 18px;
    line-height: 1.8;
    text-align: justify;
    font-family: serif; /* Font serif agar mirip potongan koran */
}

/* --- Tech Highlight Section --- */
.tech-highlight-wrapper {
    margin-bottom: 80px;
}

.section-subtitle-neon {
    color: #0F4C37; /* Warna hijau tua agak terang untuk subtitle di bg gelap */
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 20px;
    background: #BAFD02; /* Highlight background kecil */
    display: inline-block;
    padding: 5px 15px;
    border-radius: 5px;
}

.highlight-title {
    font-size: 40px;
    font-weight: 500;
    margin-bottom: 30px;
}

.text-neon { color: #BAFD02; }

.highlight-desc {
    font-size: 20px;
    line-height: 1.6;
    color: #e0e0e0;
    max-width: 900px;
    margin-bottom: 50px;
}

.meeting-image-container img {
    width: 100%;
    border-radius: 50px;
    border: 4px solid rgba(255,255,255,0.1);
}

/* --- Feature Timeline List --- */
.feature-timeline-list {
    margin-top: 80px;
    max-width: 900px;
}

.ft-item {
    display: flex;
    gap: 30px;
    position: relative;
    padding-bottom: 20px;
}

.ft-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50px;
    flex-shrink: 0;
}

.ft-dot {
    width: 38px;
    height: 38px;
    background-color: #6BA048;
    border-radius: 50%;
    z-index: 2;
}

.ft-line {
    width: 3px;
    background-color: #D9D9D9; /* Garis abu-abu */
    flex-grow: 1;
    min-height: 60px;
    margin: -5px 0; /* Sambungan overlap */
    opacity: 0.3;
}

.ft-content {
    padding-top: 5px;
}

.ft-content h3 {
    color: #BAFD02; /* Judul Hijau Neon */
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 10px;
}

.ft-content p {
    color: #cccccc;
    font-size: 16px;
    line-height: 1.6;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .news-content { padding: 30px; }
    .highlight-title { font-size: 32px; }
    .ft-item { gap: 20px; }
}

@media (max-width: 768px) {
    .credibility-header-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    
    .news-excerpt { font-size: 16px; }
    
    .ft-dot { width: 25px; height: 25px; }
    .ft-marker { width: 30px; }
    .ft-content h3 { font-size: 20px; }
}
/* =========================================
   NEXT FEATURE SECTION STYLES
========================================= */

.next-feature-section {
    padding: 100px 0;
    background-color: var(--white);
    overflow: hidden;
}

.section-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 60px;
}

/* Feature Collage Layout */
.feature-collage {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 50px;
    margin-top: 50px;
}

.collage-row {
    display: flex;
    position: relative;
    width: 100%;
}

.row-top { justify-content: flex-end; } /* Gambar pertama rata kanan */
.row-bottom { justify-content: flex-start; } /* Gambar kedua rata kiri */

.collage-img-wrapper {
    position: relative;
    max-width: 824px;
    width: 100%;
}

.feature-img {
    width: 100%;
    height: auto;
    border-radius: 69px;
    position: relative;
    z-index: 2;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* Background Gradients di belakang gambar (Sesuai Raw Code) */
.bg-shape {
    position: absolute;
    width: 90%;
    height: 100%;
    background: linear-gradient(45deg, #000000 0%, #6BA048 40%);
    border-radius: 50px;
    z-index: 1;
    top: 40px; /* Offset ke bawah */
}

.shape-right { right: -40px; } /* Offset ke kanan */
.shape-left { left: -40px; } /* Offset ke kiri */

/* Pill Labels (Kotak Hijau Teks Putih) */
.pill-label {
    background-color: #0E4B37;
    color: #FFFDDF;
    font-size: 24px; /* Ukuran disesuaikan agar pas di layar laptop */
    font-weight: 500;
    font-style: italic;
    padding: 20px 40px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    position: absolute; /* Absolute relative to .feature-collage */
    z-index: 5;
    white-space: nowrap;
}

/* Posisi Spesifik Label (Menggunakan % agar responsif) */
.label-left-float {
    top: 50px;
    left: 10%;
}

.label-right-float {
    top: 45%;
    right: 5%;
}

.label-center-bottom {
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    max-width: 90%;
}


/* =========================================
   OUR TEAM SECTION STYLES
========================================= */

.team-section {
    padding: 100px 0 150px 0; /* Extra padding bawah untuk nama badge */
    background-color: var(--white);
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 Kolom */
    gap: 30px;
    margin-top: 50px;
}

/* Kartu Intro (Paling Kiri) */
.team-card.intro-card {
    background: linear-gradient(230deg, #0E4B37 0%, #000000 100%);
    border-radius: 30px;
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 444px; /* Samakan tinggi dengan gambar profil */
}

.team-intro-text {
    color: var(--white);
    font-size: 24px;
    font-weight: 500;
    line-height: 1.5;
}

/* Reuse tombol next, tapi ukuran disesuaikan */
.small-btn {
    width: 100%;
    max-width: 220px;
}

/* Kartu Profil Anggota */
.team-card.profile-card {
    position: relative;
    border-radius: 30px;
    height: 444px;
}

.profile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 30px;
}

/* Badge Nama (Putih di bawah) */
.name-badge {
    position: absolute;
    bottom: -30px; /* Keluar sedikit dari kartu */
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    background-color: var(--white);
    padding: 15px 0;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    z-index: 2;
}

.name-badge span {
    color: #0E4B37;
    font-size: 24px;
    font-weight: 600;
}


/* --- Responsive Adjustments --- */
@media (max-width: 1200px) {
    /* Tablet Landscape: Grid jadi 2 baris */
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .pill-label { font-size: 20px; padding: 15px 30px; }
    .label-left-float { position: relative; top: 0; left: 0; margin-bottom: 20px; align-self: flex-start;}
    .label-right-float { position: relative; top: 0; right: 0; margin: 20px auto; }
    .label-center-bottom { position: relative; bottom: 0; margin-top: 20px; }
    
    .feature-collage { align-items: center; }
    .collage-row { flex-direction: column; align-items: center; }
}

@media (max-width: 768px) {
    /* Mobile: Stack semua ke bawah */
    .section-header-row { flex-direction: column; gap: 20px; }
    
    .team-grid {
        grid-template-columns: 1fr; /* 1 Kolom */
    }
    
    .team-card.intro-card { min-height: auto; gap: 30px; }
    .team-card.profile-card { height: auto; aspect-ratio: 3/4; margin-bottom: 50px; }
    
    /* Layout Collage di HP */
    .collage-img-wrapper { max-width: 100%; }
    .bg-shape { top: 20px; right: -10px; left: auto; } /* Simplifikasi background */
    
    .pill-label { font-size: 18px; width: 100%; text-align: center;}
}
/* =========================================
   FOOTER SECTION STYLES
========================================= */

.site-footer {
    background: linear-gradient(180deg, #0E4B37 0%, #000000 100%);
    padding: 80px 0 40px 0;
    color: var(--white);
    font-family: 'Poppins', sans-serif; /* Menggunakan font utama website */
}

.footer-content {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.5fr; /* Pembagian kolom: Kiri & Kanan lebih lebar */
    gap: 50px;
    margin-bottom: 60px;
}

/* --- Column 1: Brand & Address --- */
.footer-logos {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.logo-img {
    height: 40px;
    width: auto;
    object-fit: contain;
}

.footer-address {
    font-size: 18px;
    line-height: 1.6;
    color: #FFFDDF; /* Warna cream sesuai desain */
    opacity: 0.9;
    max-width: 400px;
}

/* --- Column 2: Navigation --- */
.nav-col {
    padding-left: 40px; /* Sedikit indentasi */
}

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

.footer-links {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: 15px;
}

.footer-links a {
    color: #FFFDDF;
    font-size: 18px;
    text-decoration: none;
    font-weight: 400;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: #BBFE02; /* Highlight hijau neon saat hover */
}

/* --- Column 3: Location --- */
.map-wrapper {
    border-radius: 10px;
    overflow: hidden;
    width: 100%;
    max-width: 350px;
}

.footer-map {
    width: 100%;
    height: auto;
    display: block;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

/* --- Footer Bottom --- */
.footer-bottom {
    text-align: center;
    margin-top: 40px;
}

.footer-divider {
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.2); /* Garis pemisah tipis */
    margin-bottom: 30px;
}

.copyright-text {
    color: var(--white);
    font-size: 16px;
    opacity: 0.7;
}

/* --- Responsive Styles --- */
@media (max-width: 1024px) {
    .footer-content {
        grid-template-columns: 1fr 1fr; /* Jadi 2 kolom */
    }
    
    .loc-col {
        grid-column: span 2; /* Peta mengambil lebar penuh baris kedua */
        margin-top: 20px;
    }
}

@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr; /* Stack ke bawah (1 kolom) */
        text-align: center;
        gap: 40px;
    }

    .footer-logos {
        justify-content: center;
    }
    
    .footer-address {
        margin: 0 auto;
    }

    .nav-col {
        padding-left: 0;
    }

    .map-wrapper {
        margin: 0 auto;
    }
}