/* -----------------------------------------------------------
   1. VARIABLES & RESET
----------------------------------------------------------- */
:root {
    /* Color Palette */
    --deep-black: #000000;
    --deep-navy: #04203d;
    --ocean-blue: #1d488e;
    --lime-accent: #d9e150;
    --soft-cream: #f4f4e4;
    --white: #ffffff;
    
    /* Font */
    --font-primary: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    
    /* Spacing */
    --container-width: 1200px;
    --header-height: 80px;
}

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

body {
    font-family: var(--font-primary);
    background-color: #f8f9fa;
    color: var(--deep-navy);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

html, body {
    overflow-x: hidden !important;
}


a { text-decoration: none; color: inherit; transition: all 0.3s ease; }
ul { list-style: none; }

/* -----------------------------------------------------------
   2. UTILITIES & LAYOUT
----------------------------------------------------------- */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}

/* -----------------------------------------------------------
   3. BUTTONS
----------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    font-weight: 600;
    border-radius: 50px; /* Pill shape */
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.3s ease, background-color 0.3s;
    white-space: nowrap;
}

.btn:active { transform: scale(0.98); }

/* Solid Lime Button */
.btn-lime {
    background-color: var(--lime-accent);
    color: var(--deep-navy);
    border: 2px solid var(--lime-accent);
}

.btn-lime:hover {
    background-color: #cdd63e;
    border-color: #cdd63e;
}

/* Outline Lime Button */
.btn-outline-lime {
    background-color: transparent;
    color: var(--white);
    border: 2px solid var(--white);
}

.btn-outline-lime:hover {
    border-color: var(--lime-accent);
    color: var(--lime-accent);
}

.btn-text {
    background: transparent;
    color: var(--white);
    margin-right: 15px;
    padding: 12px 15px;
}

.btn-gradient-primary {
        background: linear-gradient(135deg, var(--ocean-blue), var(--deep-navy));
        color: white;
        border: none;
        box-shadow: 0 2px 4px rgba(29, 72, 142, 0.2);
    }

.btn-text:hover { color: var(--lime-accent); }

.shadow-glow {
    box-shadow: 0 4px 15px rgba(217, 225, 80, 0.4);
}

/* -----------------------------------------------------------
   4. HEADER (Glassmorphism)
----------------------------------------------------------- */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    z-index: 1000;
    background: rgba(4, 32, 61, 0.7); /* Deep navy with opacity */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.nav-link.active {
    color: var(--lime-accent); /* Warna Lime */
    font-weight: 700; /* Opsional: Biar lebih tebal */
    opacity: 1;
}

.brand-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--white);
    z-index: 1002; /* Ensure logo stays on top of mobile menu */
}

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

.nav-menu {
    display: flex;
    align-items: center;
    gap: 40px;
}

.nav-links {
    display: flex;
    gap: 32px;
}

.nav-link {
    font-size: 0.95rem;
    color: var(--white);
    opacity: 0.9;
    font-weight: 500;
}

.nav-link:hover {
    color: var(--lime-accent);
    opacity: 1;
}

.special-link {
    color: var(--lime-accent);
}

/* Hamburger (Hidden on desktop) */
.hamburger {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1002; /* Ensure hamburger stays on top */
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background-color: var(--white);
    transition: all 0.3s ease-in-out;
    border-radius: 2px;
}

/* -----------------------------------------------------------
   5. HERO SECTION (UPDATED)
----------------------------------------------------------- */
.hero-section {
    position: relative;
    width: 100%;
    /* Gunakan min-height 100vh atau sesuaikan pixelnya */
    min-height: 100vh; 
    display: flex;
    align-items: center;
    padding-top: var(--header-height);
    
    /* Background Gradient + Image */
    background-image: 
        url('../images/asset-bg-dt.png');
    
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* PENTING: Agar gambar yang besar tidak membuat scroll horizontal */
    overflow: hidden; 
}

.hero-container {
    position: relative;
    z-index: 2; /* Pastikan teks di atas layer gambar jika layar mengecil */
    height: 100%;
    display: flex;
    align-items: center; /* Vertikal center untuk teks */
}

.hero-content {
    max-width: 600px; 
    width: 100%;
    animation: fadeIn 0.8s ease-out forwards;
}

/* --- Style Baru untuk Gambar Kanan (Absolute Positioning) --- */
.hero-image-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50%; /* Mengambil 50% layar sebelah kanan */
    z-index: 1; /* Di bawah teks */
    
    /* Flex untuk mengatur posisi gambar di dalam wrapper */
    display: flex;
    align-items: flex-end; /* Gambar menempel ke bawah */
    justify-content: flex-end; /* Gambar menempel ke kanan */
    
    animation: slideInRight 1s ease-out forwards;
    pointer-events: none; /* Agar gambar tidak menghalangi klik jika overlap transparan */
}

.hero-img-desktop {
    /* KUNCI AGAR GAMBAR BESAR: */
    height: 90%; /* Mengatur tinggi gambar 90% dari tinggi section */
    width: auto; /* Lebar menyesuaikan proporsi */
    max-width: none; /* Matikan batasan width container */
    
    object-fit: contain;
    margin-bottom: -5px; /* Sedikit fix jika ada celah di bawah */
    
    /* Opsional: Drop shadow agar lebih pop-up */
    filter: drop-shadow(-10px 10px 20px rgba(0,0,0,0.3));
}

/* --- Typography Style --- */
.hero-headline {
    font-size: 3.5rem;
    line-height: 1.1;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 24px;
    letter-spacing: -0.02em;
}

.hero-subtext {
    font-size: 1.125rem;
    color: var(--soft-cream);
    margin-bottom: 30px;
    line-height: 1.6;
    max-width: 90%;
}

.hero-descriptor {
    margin-bottom: 40px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
}

.hero-actions {
    display: flex;
    gap: 20px;
}

/* Keyframes simpel untuk animasi masuk */
@keyframes slideInRight {
    from { transform: translateX(50px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* -----------------------------------------------------------
   6. RESPONSIVE / MOBILE 
----------------------------------------------------------- */
@media (max-width: 992px) {
    .hero-headline { font-size: 2.5rem; }
    
    .hero-content {
        max-width: 100%;
        text-align: center; /* Center teks di mobile */
    }
    
    .hero-subtext {
        margin: 0 auto 30px auto;
    }

    .hero-actions {
        justify-content: center;
    }

    /* PENTING: Sembunyikan gambar besar di Tablet & Mobile */
    .hero-image-wrapper {
        display: none; 
    }
}

/* Opsional: Untuk layar laptop medium (1200px - 1400px) 
   Agar gambar tidak menabrak teks */
@media (min-width: 993px) and (max-width: 1300px) {
    .hero-img-desktop {
        height: 75%; /* Kecilkan sedikit gambarnya */
    }
}


@media (max-width: 768px) {
    /* --- Mobile Navigation --- */
    .hamburger { display: block; }
    
    .hamburger.active .bar:nth-child(2) { opacity: 0; }
    .hamburger.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .hamburger.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    .nav-menu {
        position: fixed;
        left: -100%;
        top: 0;
        flex-direction: column;
        background-color: var(--deep-navy);
        width: 100%;
        height: 100vh;
        justify-content: center;
        transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        padding: 80px 20px 20px; /* Extra top padding for logo space */
        gap: 30px;
    }

    .nav-menu.active { left: 0; }

    .nav-links {
        flex-direction: column;
        align-items: center;
        gap: 25px;
        width: 100%;
    }

    .nav-link { font-size: 1.35rem; }

    .nav-auth {
        flex-direction: column-reverse; /* Put "Try for Free" on top in mobile menu */
        gap: 15px;
        display: flex;
        width: 100%;
        align-items: center;
    }
    
    .btn-text { margin-right: 0; font-size: 1.1rem; padding: 10px; }
    .nav-auth .btn-lime { width: 100%; max-width: 300px; }


    /* --- Mobile Hero Section Updates (Rata Kiri & Lebih Kecil) --- */
    .hero-section {
        /* Darker vertical gradient for better mobile text contrast */
        background-image: 
            linear-gradient(180deg, 
                rgba(4, 32, 61, 0.92) 0%, 
                rgba(4, 32, 61, 0.85) 50%, 
                rgba(29, 72, 142, 0.5) 100%),
            url('../images/asset-bg-dt.png');
        background-position: center center;
        align-items: center; /* Tetap vertikal tengah agar seimbang */
        padding-bottom: 40px;
    }

    .hero-container {
        /* Memastikan container alignment dimulai dari kiri */
        justify-content: flex-start; 
    }

    .hero-content {
        display: flex;
        flex-direction: column;
        /* UPDATE: Mengubah alignment items ke kiri (flex-start) */
        align-items: flex-start; 
        text-align: left; 
        padding-bottom: 40px;
        width: 100%;
    }

    /* UPDATE: Ukuran font lebih kecil untuk mobile */
    .hero-headline {
        font-size: 2.1rem; /* Berkurang dari 2.5rem (sebelumnya) dan 3.5rem (desktop) */
        line-height: 1.2;
        margin-bottom: 16px;
    }

    .hero-subtext {
        font-size: 0.95rem; /* Sedikit lebih kecil dari 1rem */
        max-width: 100%;
        margin-bottom: 24px;
    }

    .hero-descriptor {
        font-size: 0.8rem; /* Lebih kecil dan compact */
        margin-bottom: 32px;
    }

    .hero-actions {
        flex-direction: column;
        width: 100%;
        gap: 16px;
        /* Memastikan tombol juga align kiri secara container, tapi full width */
        align-items: flex-start; 
    }

    .hero-actions .btn {
        /* Membuat tombol selebar layar agar mudah ditekan di mobile */
        width: 100%; 
    }
}

/* Animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}



/* =======================================================
   SECTION: OPERATIONS (Grid Icons)
   ======================================================= */
.operations-section {
    padding-top: 100px;
    padding-bottom: 0; /* Dihapus agar nyambung ke section bawah */
    background-color: #f8f9fa; 
}

/* Header */
.section-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
}

.section-title {
    color: var(--deep-navy);
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 16px;
}

.section-subtitle {
    color: #555;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 24px;
}

.price-badge {
    display: inline-block;
    background-color: var(--lime-accent);
    color: var(--deep-navy);
    padding: 8px 24px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.95rem;
    box-shadow: 0 4px 10px rgba(217, 225, 80, 0.3);
}

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    /* Margin bottom ini memberi jarak ke Section Promo di bawahnya */
    margin-bottom: 80px; 
}

.feature-full-img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    transition: transform 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

.feature-full-img:hover {
    transform: translateY(-5px);
}

/* Mobile Query Khusus Operations Section */
@media (max-width: 768px) {
    .features-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
        margin-bottom: 40px; /* Adjusted gap for mobile */
        padding: 0 15px;
    }
}


/* =======================================================
   SECTION: BANNER PROMO YELLOW (FINAL MIX)
   ======================================================= */
.banner-promo-yellow {
    background-color: #f8f9fa; 
    padding: 80px 0;
    /* Visible agar kepala kurir di desktop bisa nongol keluar */
    overflow: visible; 
}

/* 1. CONTAINER: Desktop normal (ada jarak kiri kanan), Mobile di-reset */
.banner-promo-yellow .container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
}

/* 2. CARD UTAMA (DESKTOP) */
.promo-banner {
    background-image: url('../images/promo-bg-yellow.png');
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    
    border-radius: 30px; /* Lengkungan Desktop */
    
    position: relative;
    width: 100%; 
    min-height: 420px;
    
    display: flex;
    align-items: center;
    
    /* PENTING: Visible agar gambar kurir desktop tidak terpotong */
    overflow: visible; 
    box-shadow: 0 20px 40px rgba(217, 225, 80, 0.15);
    margin-top: 40px; /* Space untuk kepala kurir */
}

.promo-content-wrapper {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0 60px;
    height: 100%;
    position: relative;
}

/* --- GAMBAR KURIR DESKTOP (POP-OUT) --- */
.courier-wrapper {
    flex: 0 0 40%;
    position: relative;
    height: 420px;
    display: flex;
    align-items: flex-end;
}

.courier-img {
    position: absolute;
    bottom: 0;
    left: -20px;
    
    /* Membuat gambar lebih tinggi dari card agar pop-out */
    height: 115%; 
    width: auto;
    max-width: none;
    
    object-fit: contain;
    z-index: 10;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.15));
}

/* --- TEXT AREA DESKTOP --- */
.promo-text {
    flex: 0 0 55%;
    padding: 50px 0;
    z-index: 2;
}

.promo-title {
    color: #1d488e;
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 25px;
    line-height: 1.2;
}

.text-navy { color: var(--deep-navy); }

.promo-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px 30px;
    margin-bottom: 35px;
    list-style: none;
    padding: 0;
}

.promo-features li {
    color: var(--deep-navy);
    font-weight: 600;
    font-size: 1rem;
    display: flex;
    align-items: flex-start;
}

.promo-features li::before {
    content: '✓'; 
    margin-right: 8px;
    color: var(--deep-navy);
    font-weight: 800;
}

.btn-navy {
    display: inline-block;
    background-color: var(--deep-navy);
    color: var(--white);
    padding: 16px 36px;
    border-radius: 50px;
    font-weight: 600;
    box-shadow: 0 5px 15px rgba(4, 32, 61, 0.25);
    transition: transform 0.3s;
}

.btn-navy:hover {
    transform: translateY(-3px);
    background-color: #15365c;
}


/* =======================================================
   MOBILE VERSION (DIKEMBALIKAN KE VERSI COMPACT ROW)
   ======================================================= */
@media (max-width: 768px) {
    
    /* 1. Reset Section Padding & Container Mobile */
    .banner-promo-yellow {
        padding: 0 0 0px 0; /* Kembalikan padding mobile */
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow: hidden; /* Mobile tidak perlu pop-out overflow */
    }

    .banner-promo-yellow .container {
        padding: 0 !important;
        max-width: 100% !important;
    }

    /* 2. Reset Card menjadi COMPACT ROW (Kiri Gambar - Kanan Teks) */
    .promo-banner {
        width: 100% !important;
        margin: 0 !important;
        min-height: auto;
        height: auto;
        border-radius: 0 !important; /* Full width flat */
        box-shadow: none;
        margin-top: 0;
        
        display: flex !important;
        flex-direction: row !important; /* SEBELAHAN */
        align-items: center;
        justify-content: space-between;
        
        padding: 15px 12px;
        background-position: right center;
        overflow: hidden; /* Crop gambar kurir agar rapi di dalam kotak */
    }

    .promo-content-wrapper {
        display: contents; /* Reset wrapper */
    }

    /* 3. Gambar Kurir Mobile (Kecil di kiri) */
    .courier-wrapper {
        flex: 0 0 32%; 
        width: 32%;
        height: auto; 
        margin-right: 10px;
        position: relative;
        display: flex;
        align-items: flex-end; 
        justify-content: center;
    }

    .courier-img {
        /* Reset properti Desktop Pop-out */
        position: static;
        height: auto;
        
        width: 130%; /* Zoom sedikit */
        max-width: none;
        display: block;
        transform: translateX(-10%);
        margin-bottom: -15px; /* Hack agar pas di bawah */
        filter: none; /* Hilangkan shadow drop desktop */
    }

    /* 4. Teks Mobile (Kanan) */
    .promo-text {
        flex: 1;
        padding: 0;
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .promo-title {
        color: #002046;
        font-size: 13px;
        font-weight: 800;
        line-height: 1.2;
        margin-bottom: 8px;
    }

    .promo-features {
        display: flex;
        flex-direction: column;
        gap: 3px;
        margin-bottom: 10px;
        padding: 0;
    }

    .promo-features li {
        color: #333;
        font-size: 9px;
        font-weight: 500;
        line-height: 1.2;
    }
    
    .promo-features li::before {
        font-size: 9px;
        margin-right: 4px;
        color: #333;
    }

    .btn-navy {
        width: 100%; /* Lebar penuh mengikuti kolom teks */
        height: auto;
        min-height: 32px; /* Tinggi minimal agar mudah dipencet */
        
        padding: 6px 10px; /* Padding dalam agar teks tidak mepet pinggir */
        margin-top: 8px;   /* Jarak dari list fitur di atasnya */
        
        background-color: #001f3f;
        color: #ffffff;
        
        font-size: 10px; 
        font-weight: 700;
        text-transform: capitalize;
        text-align: center;
        line-height: 1.2; /* Jarak antar baris jika teks turun ke bawah */
        
        border-radius: 6px;
        border: none;
        box-shadow: none;
        
        /* Flexbox untuk memastikan teks benar-benar di tengah kotak */
        display: flex;
        align-items: center;
        justify-content: center;
    }
}


/* =======================================================
   SECTION: 4 SIMPLE STEPS (GLOBAL)
   ======================================================= */
.steps-section {
    padding: 80px 0;
    background: linear-gradient(to bottom, #ffffff 0%, #e6eff9 100%);
    overflow: hidden; /* Mencegah garis desktop keluar container */
}

.steps-header {
    text-align: center;
    margin-bottom: 50px;
}

.steps-header .section-title {
    font-size: 2.2rem;
    line-height: 1.3;
    color: var(--deep-navy);
}

/* =======================================================
   A. MOBILE VIEW STYLES (DEFAULT)
   ======================================================= */
/* Secara default (mobile first), sembunyikan desktop view */
.view-desktop {
    display: none;
}

.view-mobile {
    display: block;
}

.steps-illustration-wrapper {
    text-align: center;
    margin-bottom: 40px;
}

.steps-illustration-img {
    max-width: 100%;
    height: auto;
}

.steps-list-mobile {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Card Style (Mobile Only) */
.step-card {
    background-color: var(--white);
    border-radius: 4px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: flex-start;
    border: 1px solid rgba(0,0,0,0.03);
}

.step-left {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    margin-right: 15px;
}

.step-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background-color: var(--ocean-blue);
    color: #ffffff;
    border-radius: 50%;
    font-weight: 700;
    font-size: 16px;
    line-height: 0;
    margin-right: 8px;
    margin-top: 5px;
    padding-bottom: 2px;
}

.step-number {
    font-family: var(--font-primary);
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--ocean-blue);
    line-height: 0.9;
}

.step-right { flex: 1; }

.step-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ocean-blue);
    margin-bottom: 5px;
}

.step-desc {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.4;
    margin: 0;
}


/* =======================================================
   B. DESKTOP VIEW STYLES (MIN-WIDTH: 992px) - PERBAIKAN
   ======================================================= */
@media (min-width: 992px) {
    
    /* 1. Toggle View */
    .view-mobile { display: none; }
    .view-desktop { display: block; }

    /* 2. Container Layout - DIPERBESAR */
    .desktop-diagram-container {
        position: relative;
        width: 100%;
        max-width: 1100px; /* Diperbesar dari 1000px agar lebih lega */
        margin: 0 auto;
        height: 600px;     /* Tinggi diperbesar agar gambar muat */
    }

    /* 3. Center Image - DIPERBESAR */
    .center-image {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 780px; /* Ukuran gambar diperbesar dari 450px */
        z-index: 2;
    }
    .main-img { width: 100%; height: auto; }

    /* 4. Common Item Styles (Tidak Berubah) */
    .dt-step-item {
        position: absolute;
        display: flex;
        align-items: flex-start;
        gap: 15px;
        z-index: 3;
        width: 280px; 
    }

    .dt-number {
        font-family: var(--font-primary);
        font-size: 4rem; 
        font-weight: 800;
        color: var(--ocean-blue); 
        line-height: 0.8;
    }

    .dt-content { margin-top: 5px; }

    .dt-title {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--ocean-blue);
        margin-bottom: 5px;
    }

    .dt-desc {
        font-size: 0.9rem;
        color: #555;
        line-height: 1.4;
    }

    /* 5. Positioning & Connector Lines (Logic Siku-Siku) */
    
    /* --- Connector Line Base --- */
    .connector-line {
        position: absolute;
        border: 1px solid #ccc;
        z-index: 1;
        pointer-events: none;
    }

    /* ITEM 1: Top Left (Tidak Berubah) */
    .pos-top-left { top: 0; left: 0; }
    .pos-top-left .connector-line {
        top: 60px;
        right: -60px; 
        width: 220px;  
        height: 80px;
        border-top: none;
        border-left: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        border-right: none;
    }

    /* ITEM 2: Top Right - DIPERBAIKI (Angka Tidak Terbalik) */
    .pos-top-right {
        top: 30px;
        right: 0;
        /* flex-direction: row-reverse;  <-- HAPUS BARIS INI */
        text-align: left;
    }
    
    .pos-top-right .connector-line {
        top: 60px;
        left: -20px;
        width: 80px;
        height: 60px;
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        border-top: none;
        border-left: none;
    }

    /* ITEM 3: Bottom Right (Tidak Berubah) */
    .pos-bottom-right { bottom: 20px; right: 0; }
    .pos-bottom-right .connector-line {
        bottom: 50px;
        left: -80px; 
        width: 180px; 
        height: 80px;
        border-right: 1px solid #ccc;
        border-top: 1px solid #ccc;
        border-left: none;
        border-bottom: none;
    }

    /* ITEM 4: Bottom Left (Tidak Berubah) */
    .pos-bottom-left { bottom: 0; left: 0; }
    .pos-bottom-left .connector-line {
        bottom: 60px;
        right: -70px; 
        width: 200px; 
        height: 80px;
        border-left: 1px solid #ccc;
        border-top: 1px solid #ccc;
        border-right: none;
        border-bottom: none;
    }
    
    /* Fine-tune posisi (Tidak Berubah) */
    .pos-top-left .connector-line { transform: translate(5px, 20px); } 
    .pos-top-right .connector-line { transform: translate(-10px, 60px); } 
    .pos-bottom-right .connector-line { transform: translate(-30px, -50px); } 
    .pos-bottom-left .connector-line { transform: translate(15px, -40px); }
}

/* =======================================================
   SECTION: TRUSTED PARTNER (ANIMATED)
   ======================================================= */
.partner-section {
    padding: 80px 0;
    background-color: var(--white);
    text-align: center;
    border-top: 1px solid rgba(0,0,0,0.03);
    overflow: hidden; /* Mencegah scrollbar horizontal muncul */
}

/* Header Text (Tidak Berubah) */
.partner-header {
    margin-bottom: 50px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
}

.partner-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--ocean-blue);
    line-height: 1.3;
    margin-bottom: 20px;
}

.partner-categories {
    font-size: 1rem;
    color: #666;
    font-weight: 500;
}

.separator {
    margin: 0 10px;
    color: #ccc;
}

/* --- ANIMATED LOGO SLIDER --- */

/* 1. Viewport (Jendela Pembungkus) */
.partner-logos-viewport {
    width: 100%;
    overflow: hidden; /* Menyembunyikan logo yang keluar jalur */
    padding: 20px 0;
    
    /* Opsional: Memberi efek pudar di kiri dan kanan agar lebih halus */
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

/* 2. Track (Jalur yang bergerak) */
.partner-logos-track {
    display: flex;
    align-items: center;
    /* Pastikan width cukup lebar untuk menampung 2 set logo dalam satu baris */
    width: max-content; 
    gap: 80px; /* Jarak antar logo */
    
    /* Terapkan Animasi */
    /* scrollLoop = nama animasi */
    /* 40s = durasi (semakin kecil semakin cepat) */
    /* linear = kecepatan konstan */
    /* infinite = berulang terus */
    animation: scrollLoop 40s linear infinite;
}

/* Definisi Animasi Keyframes */
@keyframes scrollLoop {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Bergerak ke kiri sejauh 50% dari total panjang track */
        /* Karena kita punya 2 set logo, 50% adalah titik di mana set kedua */
        /* Tepat menggantikan posisi awal set pertama */
        transform: translateX(-50%);
    }
}

/* Style Individual Logo */
.partner-logo {
    display: block;
    max-height: 50px;
    width: auto;
    object-fit: contain;
    /* Grayscale agar tidak terlalu mencolok saat bergerak */
    filter: grayscale(100%) opacity(0.7);
    transition: all 0.3s ease;
}


.partner-logo:hover {
    filter: grayscale(0%) opacity(1);
    /* Sebaiknya hindari transform scale saat animasi berjalan agar tidak patah */
    /* transform: scale(1.05); */ 
}


/* =======================================================
   MOBILE QUERY UNTUK PARTNER SECTION
   ======================================================= */
@media (max-width: 768px) {
    .partner-section {
        padding: 50px 0;
    }

    .partner-title {
        font-size: 1.4rem;
        margin-bottom: 15px;
        line-height: 1.3;
    }

    /* PERBAIKAN DI SINI: Tampilkan kembali garis separator */
    .partner-categories {
        font-size: 0.9rem; /* Ukuran font sedikit lebih kecil */
        line-height: 1.8;  /* Jarak antar baris lebih lega agar tidak dempet */
        
        /* Gunakan display block normal agar teks wrap otomatis */
        display: block; 
        text-align: center;
        width: 100%;
        padding: 0 10px;
    }

    .separator {
        display: inline; /* Pastikan MUNCUL */
        margin: 0 4px;   /* Jarak diperkecil sedikit untuk mobile */
        color: #ccc;
    }

    /* Update track animasi mobile */
    .partner-logos-track {
        gap: 40px; 
        animation: scrollLoop 25s linear infinite; 
    }

    .partner-logo {
        max-height: 35px; /* Logo sedikit lebih kecil agar proporsional */
    }
}


/* =======================================================
   SECTION: WHY KIOSK CREW
   ======================================================= */
.why-kiosk-section {
    padding: 100px 0;
    /* Gradasi Biru Gelap sesuai referensi */
    background: linear-gradient(135deg, #021B35 25%, #042E5A 100%);
    color: var(--white);
    position: relative;
    overflow: hidden;
}

.relative-container {
    position: relative; 
}

/* --- Header Layout (Global) --- */
.why-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 60px;
    gap: 40px;
}

.why-title-wrapper { flex: 0 0 30%; }

.why-title {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--lime-accent); 
}

/* List Benefits */
.why-benefits-list {
    flex: 1;
    display: flex;
    justify-content: flex-end; 
    gap: 60px;
}

.benefits-col {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.benefits-col li {
    font-size: 1rem;
    font-weight: 500;
    color: #e0e0e0;
    display: flex;
    align-items: center;
}

.bullet-star {
    color: var(--lime-accent);
    margin-right: 10px;
    font-size: 1.2rem;
    line-height: 0;
}

/* --- LOGIC DISPLAY DESKTOP VS MOBILE --- */
/* Default: Tampilkan Desktop, Sembunyikan Mobile */
.view-desktop { display: block; }
.view-mobile { display: none; }


/* --- DESKTOP STYLES --- */
.why-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 24px;
    position: relative; 
}

.why-card-img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    transition: transform 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.why-card-img:hover { transform: translateY(-5px); }

/* Bintang Desktop */
.star-decoration {
    position: absolute;
    width: 60px;
    height: auto;
    z-index: 10;
    animation: spinSlow 10s linear infinite;
}
.star-top-left { top: -25px; left: 23%; }
.star-bottom-right { width: 100px; bottom: -25px; right: -10px; }

@keyframes spinSlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}


/* =======================================================
   MOBILE QUERY (Max-Width 992px)
   ======================================================= */
@media (max-width: 992px) {
    /* Layout Header Tablet/Mobile */
    .why-header { flex-direction: column; gap: 30px; }
    .why-benefits-list { width: 100%; justify-content: flex-start; gap: 30px; }
    .why-title-wrapper { width: 100%; }
    
    /* Toggle View: Masih pakai grid tapi 2 kolom untuk Tablet */
    .why-cards-grid { grid-template-columns: repeat(2, 1fr); }
    .star-top-left { left: 45%; top: -30px; }
}


/* =======================================================
   MOBILE PHONE QUERY (Max-Width 768px)
   ======================================================= */
@media (max-width: 768px) {
    .why-kiosk-section { padding: 60px 0; }

    /* --- AKTIFKAN MOBILE VIEW --- */
    .view-desktop { display: none; }
    .view-mobile { display: block; }

    /* --- HEADER LAYOUT SIDE-BY-SIDE (SEBELAHAN) --- */
    .why-header {
        display: flex;
        flex-direction: row; /* KUNCI: Tetap baris (sebelahan), bukan kolom */
        align-items: flex-start; /* Rata atas agar rapi */
        justify-content: space-between;
        gap: 15px; /* Jarak antara Judul dan List diperkecil */
        margin-bottom: 30px;
    }

    /* Bagian Kiri: Judul */
    .why-title-wrapper { 
        flex: 0 0 35%; /* Judul mengambil 35% lebar layar */
        width: 35%;
    }

    .why-title { 
        font-size: 1.5rem; /* Ukuran font diperkecil agar muat */
        line-height: 1.2;
        margin-bottom: 0;
        text-align: left;
    }

    /* Bagian Kanan: List Poin */
    .why-benefits-list {
        flex: 1; /* Mengambil sisa ruang (65%) */
        width: auto;
        flex-direction: column; /* Kolom list ditumpuk jadi satu ke bawah */
        gap: 8px; /* Jarak antar grup list */
        margin-bottom: 0;
        justify-content: center;
    }
    
    .benefits-col { 
        gap: 6px; /* Jarak antar butir poin lebih rapat */
    }

    .benefits-col li {
        font-size: 0.7rem; /* Font list diperkecil untuk mobile */
        line-height: 1.4;
        align-items: flex-start; /* Bullet star sejajar dengan baris pertama teks */
    }
    
    .bullet-star {
        font-size: 0.8rem; /* Bintang diperkecil */
        margin-right: 5px;
        margin-top: 2px; /* Sedikit turun biar pas sama teks */
    }


    /* --- MOBILE IMAGE STACK (TETAP SAMA) --- */
    .why-mobile-stack {
        display: flex;
        flex-direction: column;
        gap: 20px; 
        position: relative;
        margin-top: 10px;
    }

    .why-mobile-img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* Posisi Bintang Mobile */
    .star-decoration { width: 40px; }
    
    .star-mobile-top {
        top: -15px;
        right: 0;
        left: auto;
    }

    .star-mobile-bottom {
        bottom: -15px;
        left: 0;
    }
}

/* =======================================================
   SECTION: STATS BAR (THIN SECTION)
   ======================================================= */
.stats-bar-section {
    padding: 30px 0; /* Padding tipis atas bawah */
    background-color: var(--white);
    border-bottom: 1px solid rgba(0,0,0,0.05); /* Garis batas halus di bawah */
}

.stats-bar-wrapper {
    display: flex;
    justify-content: center; /* Posisi di tengah */
    align-items: center;
    flex-wrap: wrap; /* Agar responsif turun ke bawah jika layar sempit */
    gap: 15px; /* Jarak antar elemen jika wrap */
}

/* Item Wrapper */
.stats-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Logo Styles */
.stats-logo {
    height: 35px; /* Tinggi logo disesuaikan */
    width: auto;
    object-fit: contain;
}

.stats-logo-only {
    height: 30px; /* Logo tanpa teks sedikit lebih kecil agar seimbang */
    width: auto;
    object-fit: contain;
    opacity: 0.8; /* Sedikit pudar agar tidak terlalu dominan */
}

/* Text Info Styles */
.stats-info {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    text-align: left;
}

.stats-count {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--deep-navy);
}

.stats-label {
    font-size: 0.75rem;
    color: #888;
    font-weight: 500;
}

/* Separator Line (|) */
.stats-separator {
    width: 1px;
    height: 30px;
    background-color: #e0e0e0;
    margin: 0 20px; /* Jarak kiri kanan separator */
}

/* Last Item Text */
.stats-more {
    font-size: 0.85rem;
    font-weight: 600;
    color: #888;
    line-height: 1.2;
    text-align: left;
}

/* =======================================================
   MOBILE QUERY UNTUK STATS BAR
   ======================================================= */
@media (max-width: 992px) {
    .stats-separator {
        margin: 0 10px; /* Perkecil jarak di layar tablet */
    }
}

@media (max-width: 768px) {
    .stats-bar-section {
        padding: 25px 0;
    }

    /* Di Mobile, kita buat scroll horizontal agar tetap "tipis" satu baris */
    .stats-bar-wrapper {
        justify-content: flex-start; /* Mulai dari kiri */
        flex-wrap: nowrap; /* Jangan turun ke bawah */
        overflow-x: auto; /* Aktifkan scroll horizontal */
        padding-bottom: 10px; /* Ruang untuk scrollbar */
        gap: 0; /* Reset gap, kita atur via margin */
        
        /* Hide scrollbar aesthetics (optional) */
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }
    
    .stats-bar-wrapper::-webkit-scrollbar {
        display: none; /* Hide scrollbar for Chrome/Safari/Opera */
    }

    .stats-item {
        flex: 0 0 auto; /* Item tidak mengecil */
        margin-right: 15px;
    }

    .stats-separator {
        flex: 0 0 auto;
        margin: 0 15px 0 0; /* Margin kanan saja */
        height: 25px;
    }
    
    .stats-count { font-size: 0.85rem; }
    .stats-label { font-size: 0.65rem; }
    .stats-logo { height: 28px; }
}

/* =======================================================
   SECTION: CHANNELS & EXPEDITIONS (TAB TOGGLER)
   ======================================================= */
.channels-expeditions-section {
    padding: 80px 0;
    /* UPDATE: Background Gradient dari Putih ke Biru Muda */
    background: linear-gradient(to bottom, #ffffff 0%, #e6eff9 100%);
    
    text-align: center;
}

/* --- TOGGLE BUTTON STYLE (PILL SHAPE) --- */
.tab-toggle-wrapper {
    margin-bottom: 50px;
    display: flex;
    justify-content: center;
}

/* --- TOGGLE BUTTON STYLE (DARK THEME) --- */
.tab-toggle-wrapper {
    margin-bottom: 50px;
    display: flex;
    justify-content: center;
}

/* Track (Wadah Belakang) - Diubah jadi gelap transparan */
.tab-toggle-group {
    /* background-color: #e9ecef; <-- Warna lama (abu terang) */
    background-color: var(--ocean-blue); /* Warna Navy gelap transparan */
    padding: 5px;
    border-radius: 50px;
    display: inline-flex;
    gap: 5px;
    /* Opsional: border tipis agar lebih tegas */
    border: 1px solid rgba(255, 255, 255, 0.1); 
}

/* Tombol Tidak Aktif */
.tab-toggle {
    background: transparent;
    border: none;
    padding: 12px 35px;
    border-radius: 40px;
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff; /* Warna teks putih */
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0.6; /* Dibuat agak pudar saat tidak aktif */
}

/* Hover State */
.tab-toggle:hover {
    /* color: var(--deep-navy); <-- Hapus ini karena tidak terlihat di background gelap */
    color: var(--deep-navy); /* Ubah jadi warna Lime saat hover agar menyala */
    opacity: 1;
}

/* State Active (Tombol yang sedang dipilih) - Tetap Putih agar kontras */
.tab-toggle.active {
    background-color: var(--white);
    color: var(--deep-navy);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2); /* Shadow sedikit dipertegas */
    opacity: 1;
}

/* --- CONTENT HEADER --- */
.content-header {
    max-width: 700px;
    margin: 0 auto 50px;
    /* Animasi fade in saat ganti tab */
    animation: fadeInTab 0.5s ease;
}

.content-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--deep-navy);
    margin-bottom: 20px;
    line-height: 1.3;
}

.content-desc {
    font-size: 1rem;
    color: #666;
    line-height: 1.6;
}

/* --- LOGO GRID --- */
.logo-grid-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px; /* Jarak antar logo */
    max-width: 900px;
    margin: 0 auto;
    animation: scaleIn 0.4s ease;
}

.logo-box {
    background-color: var(--white);
    border-radius: 12px;
    padding: 20px;
    width: 160px; /* Lebar kotak logo tetap */
    height: 100px; /* Tinggi kotak logo tetap */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.logo-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.logo-box img {
    max-width: 100%;
    max-height: 60px; /* Batasi tinggi logo agar rapi */
    width: auto;
    object-fit: contain;
    /* Opsional: Grayscale default, warna saat hover */
    /* filter: grayscale(100%); */ 
    transition: filter 0.3s;
}

/* .logo-box:hover img { filter: grayscale(0%); } */

/* Animations */
@keyframes fadeInTab {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}


/* =======================================================
   MOBILE QUERY UNTUK CHANNELS SECTION
   ======================================================= */
@media (max-width: 768px) {
    .channels-expeditions-section {
        padding: 50px 0;
    }

    .tab-toggle {
        padding: 10px 25px;
        font-size: 0.9rem;
    }

    .content-title {
        font-size: 1.5rem;
    }

    .logo-grid-container {
        gap: 15px;
    }

    .logo-box {
        width: 130px; /* Logo lebih kecil di mobile */
        height: 80px;
        padding: 15px;
    }
    
    .logo-box img {
        max-height: 40px;
    }
}

/* =======================================================
   SECTION: CTA (BOTTOM)
   ======================================================= */
.cta-section {
    padding: 100px 0;
    
    /* UPDATE: Background Image + Gradient Overlay */
    background-image: 
        linear-gradient(90deg, 
            rgba(4, 32, 61, 0.95) 0%, 
            rgba(4, 32, 61, 0.85) 40%, 
            rgba(29, 72, 142, 0.3) 100%),
        url('../images/asset-bg-dt.png');
    
    /* Pastikan gambar ter-cover dengan rapi */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    text-align: center;
    color: var(--white);
    position: relative;
    overflow: hidden;
}

/* --- Sisanya Tetap Sama --- */
.cta-content {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cta-tagline {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: capitalize; 
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 15px;
    display: block;
}

.cta-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--lime-accent);
    margin-bottom: 24px;
    line-height: 1.2;
}

.cta-desc {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #e0e0e0;
    margin-bottom: 40px;
    max-width: 700px; 
}








/* =======================================================
   HERO TOGGLE SECTION (3 CARDS WHITE BG)
   ======================================================= */

/* 1. Layout Base (Background Navy bawaan hero-section tetap jalan) */
.hero-section.hero-toggle-layout {
    flex-direction: column;
    justify-content: flex-start; /* Konten mulai dari atas */
    padding-top: 140px;
    padding-bottom: 100px;
    height: auto;
    min-height: 100vh;
}

.hero-content-wrapper {
    max-width: 1000px; /* Lebar container diperbesar untuk menampung 3 card */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* Helpers */
.text-center { text-align: center; }
.text-lime { color: var(--lime-accent); }
.hidden { display: none; }

/* 2. TOGGLE BUTTONS (Style Glassmorphism) */
.hero-toggle-container {
    margin-bottom: 40px;
}

.hero-toggle-group-dark {
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    padding: 6px;
    border-radius: 50px;
    display: inline-flex;
    gap: 8px;
}

.hero-toggle-btn {
    background: transparent;
    border: none;
    padding: 12px 30px;
    border-radius: 40px;
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.3s ease;
}

.hero-toggle-btn:hover {
    color: var(--lime-accent);
    background-color: rgba(255, 255, 255, 0.05);
}

.hero-toggle-btn.active {
    background-color: var(--lime-accent);
    color: var(--deep-navy);
    font-weight: 700;
    box-shadow: 0 0 15px rgba(217, 225, 80, 0.4);
    opacity: 1;
}

/* 3. DYNAMIC CONTENT AREA */
.hero-dynamic-display {
    width: 100%;
    position: relative;
    min-height: 400px;
}

.view-item {
    width: 100%;
}

/* === STYLE KHUSUS: WHITE PANEL (PRICE & BENEFIT) === */
.white-content-panel {
    background-color: #ffffff; /* Background Putih */
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); /* Shadow agar pop-up dari background navy */
    text-align: center;
}

/* Grid untuk 3 Card Gambar */
.cards-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Kolom */
    gap: 20px;
    margin-bottom: 30px;
}

.card-img-wrapper {
    width: 100%;
}

.img-fluid-card {
    width: 100%;
    height: auto;
    display: block;
    /* Opsional: Border radius gambar jika gambarnya kotak */
    border-radius: 12px;
    transition: transform 0.3s ease;
}

.img-fluid-card:hover {
    transform: translateY(-5px);
}

.panel-cta {
    margin-top: 10px;
}

/* === STYLE KHUSUS: CS VIEW (SINGLE IMAGE INSIDE WHITE PANEL) === */
.cs-image-wrapper {
    text-align: center;
    margin-bottom: 20px;
}

.img-hero-single {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    
    /* Opsional: Jika gambar CS mau full width mengisi panel putih */
    /* width: 100%; */
    
    /* Atau jika gambar CS lebih kecil/floating di tengah: */
    width: auto;
    max-height: 400px; /* Batasi tinggi agar tidak terlalu panjang ke bawah */
}

/* Update margin CTA agar seimbang */
.panel-cta {
    margin-top: 20px;
}


.hero-cta-group {
    text-align: center;
}


/* Animation */
.fade-in {
    animation: fadeInUp 0.5s ease-out forwards;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =======================================================
   RESPONSIVE IMAGE SWITCHER
   ======================================================= */

/* DEFAULT (DESKTOP): */
/* Tampilkan gambar desktop, Sembunyikan gambar mobile */
.img-desktop {
    display: block;
    width: 100%;
    height: auto;
}

.img-mobile {
    display: none; /* Hidden by default */
}


/* MOBILE QUERY (Max-Width 768px): */
/* Saat di HP, balik kondisinya */
@media (max-width: 768px) {
    .img-desktop {
        display: none !important; /* Hide Desktop Image */
    }

    .img-mobile {
        display: block !important; /* Show Mobile Image */
        width: 100%;
        height: auto;
        /* Opsional: Jika gambar mobile perlu styling khusus */
        border-radius: 12px; 
    }

    .panel-cta {
        text-align: center;
        width: 100%;
    }

    /* 2. Style Tombol */
    .panel-cta .btn {
        width: auto !important;          /* Lebar mengikuti panjang teks */
        display: inline-flex !important; /* Agar padding berfungsi rapi */
        
        padding: 10px 35px !important;   /* Jarak dalam agar tombol terlihat panjang/lonjong */
        border-radius: 50px !important;  /* Bentuk kapsul (Rounded) */
        
        margin-top: 15px;
        
        /* Pastikan teks di tengah */
        justify-content: center;
        align-items: center;
    }
}

/* =======================================================
   MOBILE RESPONSIVE
   ======================================================= */
@media (max-width: 992px) {
    .cards-grid-3 {
        grid-template-columns: repeat(2, 1fr); /* Tablet: 2 kolom */
    }
}

@media (max-width: 768px) {
    .hero-section.hero-toggle-layout {
        padding-top: 110px;
    }

    .white-content-panel {
        padding: 20px; /* Padding panel lebih kecil */
    }

    .cards-grid-3 {
        grid-template-columns: 1fr; /* Mobile: 1 kolom (tumpuk ke bawah) */
        gap: 15px;
    }

    .hero-toggle-btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
}

/* =======================================================
   SECTION: BOTTOM CTA (LIGHT VARIANT)
   ======================================================= */
.cta-bottom-light {
    padding: 100px 0;
    
    /* Background Biru Muda */
    background-color: #e6eff9; 
    
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-bottom-wrapper {
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Judul (Class Beda) */
.cta-bottom-title {
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1.2;
    /* Warna Navy Gelap agar terbaca di background terang */
    color: var(--deep-navy); 
    margin-bottom: 20px;
}

/* Helper color khusus section ini */
.text-ocean { color: var(--ocean-blue); }

/* Deskripsi (Class Beda) */
.cta-bottom-desc {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #555555; /* Abu gelap */
    margin-bottom: 40px;
    max-width: 600px;
}

/* Wrapper Tombol */
.cta-bottom-action {
    margin-top: 10px;
}

/* =======================================================
   MOBILE QUERY FOR BOTTOM CTA
   ======================================================= */
@media (max-width: 768px) {
    .cta-bottom-light {
        padding: 60px 0;
    }

    .cta-bottom-title {
        font-size: 2rem;
        margin-bottom: 15px;
    }

    .cta-bottom-desc {
        font-size: 1rem;
        margin-bottom: 30px;
        padding: 0 15px;
    }

    .cta-bottom-action .btn {
        width: auto;
        padding: 12px 35px;
        border-radius: 50px;
        font-size: 1rem;
        font-weight: 700;
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }
}







/* =======================================================
   15. AUTH PAGE (COMPACT GLASS)
   ======================================================= */
.auth-section {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    
    /* Background Gradient + Image */
    background-image: 
        url('../images/bg-second.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.auth-container {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* --- CARD LOGIN (ULTRA GLASS & COMPACT) --- */
.auth-card {
    /* Glass Effect yang Kuat */
    background: rgba(255, 255, 255, 0.15); /* Sangat transparan */
    backdrop-filter: blur(20px); /* Blur kuat */
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2); /* Border kaca tipis */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3); /* Shadow halus tapi dalam */
    
    width: 100%;
    max-width: 360px; /* Card lebih kecil/ramping */
    border-radius: 20px;
    padding: 30px 25px; /* Padding dalam dikurangi */
    
    text-align: center;
    position: relative;
    overflow: hidden;
    animation: zoomInAuth 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes zoomInAuth {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

/* Header */
.auth-header { margin-bottom: 20px; }
.auth-logo { height: 35px; width: auto; margin-bottom: 15px; } /* Logo lebih kecil */
.auth-title { font-size: 1.4rem; font-weight: 700; color: var(--white); margin-bottom: 5px; }
.auth-subtitle { font-size: 0.85rem; color: rgba(255,255,255,0.8); font-weight: 400; }

/* Form Elements */
.auth-form { text-align: left; }
.form-group { margin-bottom: 15px; }

/* Input Wrapper */
.input-wrapper { position: relative; }
.input-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,0.6); font-size: 0.85rem; pointer-events: none; }

.form-input {
    width: 100%;
    /* Padding kiri disesuaikan, tinggi input dikurangi */
    padding: 10px 35px 10px 40px; 
    border-radius: 50px;
    
    /* Input transparan */
    background: rgba(0, 0, 0, 0.2); 
    border: 1px solid rgba(255, 255, 255, 0.1);
    
    font-family: var(--font-primary);
    font-size: 0.9rem; /* Font input lebih kecil */
    color: var(--white);
    outline: none;
    transition: all 0.3s ease;
}

.form-input::placeholder { color: rgba(255,255,255,0.5); }

.form-input:focus {
    border-color: var(--lime-accent);
    background: rgba(0, 0, 0, 0.4);
}
.form-input:focus + .input-icon { color: var(--lime-accent); }

/* Toggle Password */
.toggle-password {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: rgba(255,255,255,0.6); cursor: pointer; font-size: 0.8rem; padding: 5px;
}
.toggle-password:hover { color: var(--white); }

/* Checkbox & Links */
.form-options { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; font-size: 0.8rem; padding: 0 5px; color: rgba(255,255,255,0.8); }
.forgot-link { color: rgba(255,255,255,0.8); font-weight: 500; transition: color 0.2s; }
.forgot-link:hover { color: var(--lime-accent); text-decoration: none; }

/* Custom Checkbox (Dark theme compatible) */
.checkbox-container { display: flex; align-items: center; cursor: pointer; }
.checkbox-container input { display: none; }
.checkbox-container .checkmark { height: 14px; width: 14px; background-color: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3); border-radius: 3px; margin-right: 6px; position: relative; transition: 0.3s; }
.checkbox-container input:checked ~ .checkmark { background-color: var(--lime-accent); border-color: var(--lime-accent); }
.checkbox-container .checkmark:after { content: ""; position: absolute; display: none; left: 4px; top: 1px; width: 3px; height: 7px; border: solid var(--deep-navy); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.checkbox-container input:checked ~ .checkmark:after { display: block; }

/* Button Full Width */
.btn-full { width: 100%; border-radius: 50px; padding: 10px; font-size: 0.95rem; font-weight: 700; margin-top: 5px; }

/* Footer */
.auth-footer { margin-top: 20px; font-size: 0.8rem; color: rgba(255,255,255,0.7); }
.link-lime { color: var(--lime-accent); font-weight: 600; text-decoration: none; }
.link-lime:hover { text-decoration: underline; color: #fff; }

/* Mobile Adjustment */
@media (max-width: 768px) {
    .auth-card { padding: 25px 20px; max-width: 320px; }
}



/* =======================================================
   REGISTER PAGE (COMPACT & NEAT VERSION)
   ======================================================= */

/* 1. Card Lebih Kecil & Rapi */
.auth-card.glass-compact {
    max-width: 380px; /* Ukuran sangat compact (mirip login mobile app) */
    padding: 30px 25px; /* Padding dalam dikurangi */
    
    /* Tetap Glass Effect */
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

/* 2. Header Lebih Kecil */
.auth-header { margin-bottom: 20px; }
.auth-logo { height: 35px; width: auto; margin-bottom: 10px; }
.auth-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 5px; }
.auth-subtitle { font-size: 0.85rem; }

/* 3. Jarak Antar Input (Rapi, tidak jauh, tidak dekat) */
.form-group {
    margin-bottom: 15px; /* Jarak dibuat rapat tapi aman */
}

/* 4. Input Field (Lebih Pendek & Font Kecil) */
.form-input {
    width: 100%;
    /* Padding atas-bawah dikurangi jadi 10px */
    padding: 10px 35px 10px 40px; 
    border-radius: 50px;
    
    /* Background input */
    background: rgba(0, 0, 0, 0.2); 
    border: 1px solid rgba(255, 255, 255, 0.1);
    
    font-family: var(--font-primary);
    font-size: 0.9rem; /* Ukuran font input pas */
    color: var(--white);
    outline: none;
    transition: all 0.3s ease;
}

.form-input:focus {
    border-color: var(--lime-accent);
    background: rgba(0, 0, 0, 0.4);
}

/* Icon Input */
.input-icon {
    font-size: 0.85rem; /* Icon dikecilkan */
    left: 15px;
}

/* Toggle Password */
.toggle-password {
    font-size: 0.8rem;
    right: 12px;
}

/* 5. Recaptcha Scaled Down (Biar muat di card kecil) */
.captcha-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 5px;
    margin-bottom: 15px;
    
    /* Trik mengecilkan Recaptcha Google */
    transform: scale(0.85); 
    transform-origin: center;
}

/* 6. Terms Text */
.terms-text {
    font-size: 0.75rem; /* Font kecil agar rapi */
    line-height: 1.3;
    color: rgba(255,255,255,0.8);
}
.terms-agreement { margin-bottom: 15px; }

/* 7. Button */
.btn-full {
    padding: 10px; /* Tombol lebih ramping */
    font-size: 0.95rem;
    border-radius: 50px;
    margin-top: 5px;
}

/* 8. Footer Link */
.auth-footer {
    margin-top: 15px;
    font-size: 0.85rem;
}
.auth-footer p { margin: 0; }


@media (max-width: 768px) {
    .auth-card.glass-compact {
        max-width: 100%; /* Full width di HP sangat kecil */
        padding: 25px 20px;
    }
}





/* ===== KIOSKCREW CALCULATOR CSS (UPDATED) ===== */

.kc-calc {
    max-width: 950px;
    
    /* === PERBAIKAN DI SINI === */
    /* Ubah margin-top jadi lebih besar agar turun ke bawah */
    /* Sesuaikan angka 140px ini dengan tinggi header kamu */
    margin: 140px auto 60px auto; 
    
    padding: 0 20px;
    color: #374151;
    box-sizing: border-box;
}

.kc-calc * {
    box-sizing: border-box;
}

.kc-calc-title {
    text-align: center;
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 30px;
    color: #0B2559;
}

.kc-calc-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 25px;
    align-items: start;
}

/* --- Card Styling --- */
.kc-box {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Header Gradasi */
.kc-box-header {
    background: linear-gradient(135deg, #163A78, #0B2559);
    color: white;
    padding: 14px 20px;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.kc-box-body {
    padding: 24px;
}

/* --- Fields --- */
.kc-field {
    margin-bottom: 18px;
}

.kc-field label {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
    display: block;
    color: #4B5563;
}

/* [NEW] Style untuk Bintang Merah */
.kc-req {
    color: #DC2626; /* Merah */
    margin-left: 3px;
    font-weight: bold;
}

.kc-field input[type="text"],
.kc-field input[type="email"],
.kc-field input[type="number"],
.kc-field input[type="tel"],
.kc-field select {
    width: 100%;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid #D1D5DB;
    font-size: 14px;
    color: #1F2937;
    background-color: #ffffff;
    outline: none;
    transition: all 0.2s;
}

.kc-field input:focus,
.kc-field select:focus {
    border-color: #0B2559;
    box-shadow: 0 0 0 3px rgba(11, 37, 89, 0.1);
}

/* --- Size Area --- */
.kc-size-wrapper {
    border: 1px solid #D1D5DB;
    border-radius: 12px;
    padding: 20px;
    background-color: #FAFAFA;
}

.kc-size-wrapper label { margin-bottom: 0; }

.kc-size-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.kc-size-image {
    flex-shrink: 0;
    width: 55%; 
    display: flex;
    justify-content: center;
    align-items: center;
}

.kc-size-image img {
    width: 100%;
    max-width: 240px;
    height: auto;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 8px 12px rgba(0,0,0,0.08)); 
}

.kc-size-options {
    width: 45%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kc-radio-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid #E5E7EB;
    padding: 10px 14px;
    border-radius: 8px;
    background: #fff;
    transition: all 0.2s;
    font-weight: 500;
}

.kc-radio-item:hover {
    background-color: #F3F4F6;
    border-color: #0B2559;
}

.kc-radio-item:has(input:checked) {
    border-color: #0B2559;
    background-color: #F0F4FF;
}

.kc-radio-item input[type="radio"] {
    accent-color: #0B2559;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.kc-size-help {
    font-size: 12px;
    color: #6B7280;
    margin-top: 15px;
    font-style: italic;
}

/* --- Right Side --- */
.right-side-input {
    padding: 14px 16px !important; 
}

/* Security Note */
.kc-security-note {
    font-size: 12px;
    color: #6B7280;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border-top: 1px solid #E5E7EB;
    padding-top: 18px;
    line-height: 1.4;
}

.kc-security-note i {
    color: #9CA3AF;
    font-size: 14px;
    margin-top: 2px;
}

/* --- RECAPTCHA FIXED --- */
.kc-captcha-wrapper {
    margin-bottom: 15px;
    /* Hilangkan scale agar ukuran kembali normal/besar */
    /* transform: scale(0.9); <- HAPUS INI */
    
    /* Jika ingin sedikit lebih besar dari default (304px), gunakan ini: */
    /* transform: scale(1.05); transform-origin: 0 0; */
    
    /* Pastikan tidak overflow */
    overflow: hidden;
    max-width: 100%;
}

/* --- Button Gradasi --- */
.kc-btn {
    width: 100%;
    background: linear-gradient(135deg, #163A78, #0B2559);
    color: #ffffff;
    padding: 14px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.1s, filter 0.2s, box-shadow 0.2s;
    margin-top: 5px;
}

.kc-btn:hover {
    filter: brightness(1.2);
    box-shadow: 0 6px 15px rgba(11, 37, 89, 0.3);
}

.kc-btn:active {
    transform: scale(0.98);
    box-shadow: none;
}

.kc-error {
    font-size: 12px;
    color: #DC2626;
    margin-top: 4px;
}

/* Responsive */
@media (max-width: 900px) {
    .kc-calc-grid {
        grid-template-columns: 1fr;
        max-width: 600px;
        margin: 0 auto;
    }
}



/* --- Modal Success Styles --- */
.kc-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(4, 32, 61, 0.7); /* Deep Navy transparan */
    z-index: 9999;
    display: none; /* Hidden by default */
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.kc-modal-overlay.show {
    display: flex;
    opacity: 1;
}

.kc-modal-box {
    background: white;
    width: 90%;
    max-width: 450px;
    padding: 40px 30px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.kc-modal-overlay.show .kc-modal-box {
    transform: translateY(0);
}

.kc-modal-icon-success {
    font-size: 4rem;
    color: #28a745; /* Green Success */
    margin-bottom: 20px;
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.kc-modal-title {
    font-size: 1.5rem;
    color: var(--deep-navy, #04203d);
    font-weight: 800;
    margin-bottom: 10px;
}

.kc-modal-desc {
    font-size: 1rem;
    color: #666;
    margin-bottom: 30px;
    line-height: 1.5;
}

.kc-btn-modal {
    background: linear-gradient(135deg, var(--ocean-blue, #1d488e), var(--deep-navy, #04203d));
    color: white;
    border: none;
    padding: 12px 40px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s;
}

.kc-btn-modal:hover {
    transform: scale(1.05);
}

@keyframes popIn {
    0% { transform: scale(0); opacity: 0; }
    80% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); }
}






/* =======================================================
   SECTION: FOOTER
   ======================================================= */
.footer {
    background-color: #011324; /* Versi lebih gelap dari Deep Navy agar kontras */
    color: #e0e0e0; /* Putih agak abu agar nyaman dibaca */
    padding: 80px 0 30px;
    font-size: 0.95rem;
}

/* Layout Grid 5 Kolom: Logo | Info | Link | Link | Link */
.footer .container {
    display: grid;
    /* Kolom 1 (Logo) kecil, Kolom 2 (Info) lebar, sisanya rata */
    grid-template-columns: 0.8fr 2fr 1fr 1fr 1fr; 
    gap: 40px;
    align-items: start;
}

/* 1. Logo Section */
.footer-logo {
    width: 100%;
    max-width: 120px; /* Batasi ukuran logo */
    height: auto;
    object-fit: contain;
}

/* 2. Section Titles (H3) */
.footer-section h3 {
    color: var(--white);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
}

/* 3. Company Info (Address, Phone, Email) */
.company-info p {
    margin-bottom: 12px;
    line-height: 1.6;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #ccc;
}

.company-info i {
    color: var(--lime-accent); /* Ikon berwarna Lime */
    margin-top: 5px; /* Sejajarkan ikon dengan baris pertama teks */
}

/* 4. Links Section */
.footer-section ul {
    list-style: none;
    padding: 0;
}

.footer-section ul li {
    margin-bottom: 12px;
}

.footer-section ul li a {
    color: #ccc;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

.footer-section ul li a:hover {
    color: var(--lime-accent); /* Berubah Lime saat hover */
    transform: translateX(5px); /* Efek geser sedikit */
}

/* Divider Line */
.footer-divider {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 50px 0 30px;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    /* FIX: Tambahkan ini agar tidak mepet layar */
    max-width: 1200px; /* Samakan dengan lebar container utama */
    width: 100%;
    margin: 0 auto;    /* Posisi tengah */
    padding: 20px 24px; /* Memberi jarak kiri-kanan (padding) */
}

/* Social Icons Wrapper */
.footer-social {
    display: flex;
    gap: 30px; /* UPDATE: Jarak antar ikon sosmed diperlebar (sebelumnya 20px) */
    align-items: center;
}

.footer-social a {
    color: var(--white);
    font-size: 1.4rem; /* UPDATE: Ikon sedikit diperbesar agar lebih jelas */
    transition: all 0.3s ease;
    display: flex;         /* Memastikan ikon vertikal align rapi */
    align-items: center;
    justify-content: center;
    
    /* Opsional: Memberi area klik lebih luas */
    width: 40px; 
    height: 40px;
    background-color: rgba(255,255,255,0.05); /* Background tipis bulat */
    border-radius: 50%;
}

.footer-social a:hover {
    color: var(--deep-navy);
    background-color: var(--lime-accent); /* Efek hover jadi Lime */
    transform: translateY(-3px);
}

.copyright {
    font-size: 0.85rem;
    color: #888;
}

/* =======================================================
   MOBILE QUERY FOR FOOTER
   ======================================================= */
@media (max-width: 992px) {
    /* Tablet: Ubah jadi 3 kolom (Logo & Info gabung baris atas) */
    .footer .container {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 30px;
    }
    
    /* Logo dan Info mungkin butuh penyesuaian di tablet, 
       tapi grid di atas biasanya sudah cukup aman */
}

@media (max-width: 768px) {
    .footer {
        padding: 50px 0 30px;
    }

    /* Mobile: Stack semua ke bawah (1 kolom) */
    .footer .container {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: left; /* Rata kiri di HP biasanya lebih rapi */
    }

    /* Penyesuaian agar ikon info di tengah */
    .company-info p {
        justify-content: left; 
        text-align: left;
    }

    /* Logo di tengah */
    .logo-section {
        display: flex;
        justify-content: left;
    }

    .footer-bottom {
        flex-direction: column-reverse; /* Sosmed di atas, Copyright di bawah */
        gap: 25px; /* Jarak vertikal antara Sosmed dan Copyright */
        padding-bottom: 20px; /* Tambahan jarak ke pinggir bawah layar */
    }

    .footer-social {
        gap: 20px; /* Jarak antar ikon di mobile */
        margin-bottom: 5px; /* Sedikit margin ekstra jika perlu */
    }
}