/* --- Global Variables & Resets --- */
:root {
    --primary-dark: #122b2b;
    --primary-light: #e0f2f0;
    --accent-color: #f7f6f2; /* Off-white background */
    --text-main: #333333;
    --text-muted: #666666;
    
    --font-serif: 'Playfair Display', serif;
    --font-sans: 'Inter', sans-serif;
    --font-fraunces: 'Fraunces', serif;
}

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

.page-id-53092 .content-area,
.page-id-53092 .site-main {
    margin-bottom: 0 !important;
}

.page-id-53092 .woocommerce-breadcrumb {
    display: none!important;
}

body {
    font-family: var(--font-sans);
    color: var(--text-main);
    background-color: #FAFAF6;
    line-height: 1.6;
}

h1, h2, h3 {
    font-family: var(--font-fraunces);
    font-weight: 400;
    line-height: 1.2;
}

a {
    text-decoration: none;
    color: inherit;
}


.subtitle {
    font-size: 20px !important;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--text-muted);
    display: block;
    margin-bottom: 15px;
    font-weight: 500;
}

.dark-section .subtitle {
    color: #ffffff !important;
    font-weight: lighter;
}

/* --- Buttons --- */
.btn {
    display: inline-flex; /* Mengubah dari inline-block menjadi inline-flex */
    align-items: center; /* Menyelaraskan teks dan ikon secara vertikal */
    justify-content: center;
    gap: 10px; /* Memberi jarak antara teks dan ikon */
    padding: 12px 24px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-dark {
    background-color: var(--primary-dark);
    color: #fff;
    border: 1px solid var(--primary-dark);
}

.btn-dark:hover {
    color: #fff;
}

.btn-outline {
    background-color: transparent;
    color: var(--primary-dark);
    border: 1px solid var(--primary-dark);
}

.btn-light {
    background-color: #fff;
    color: var(--primary-dark);
}

.btn-outline-light {
    background-color: transparent;
    color: #fff;
    border: 1px solid #fff;
}

.btn-outline-light:hover {
    color: #fff;
}

/* --- Top Bar --- */
.top-bar {
    background-color: var(--primary-dark);
    color: #d1d9d9; /* Warna teks agak terang agar kontras */
    padding: 10px 0;
}

.top-bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.24px;
}

.promo-text {
    color: #8da4a4; /* Menyesuaikan warna teks abu-kehijauan di desain asli */
}

.top-links {
    display: flex;
    align-items: center;
    gap: 30px; /* Jarak antar elemen di menu kanan */
}

.top-links span, 
.top-links a {
    display: flex;
    align-items: center;
    gap: 8px; /* Jarak antara ikon dan teks di dalamnya */
    transition: color 0.2s ease;
}

.top-links a:hover {
    color: #ffffff; /* Efek menyala saat link di-hover */
}

/* --- Header / Nav --- */
.header {
    border-bottom: 1px solid #eaeaea;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

/* --- Dropdown Menu Styles --- */
.main-nav {
    display: flex;
    align-items: center;
    gap: 25px !important;
}

/* Mengatur container dropdown */
.nav-dropdown {
    position: relative;
    margin-left: 0; /* Menyamakan jarak antar menu seperti link biasa */
    height: 100%;
}

.nav-dropdown > a {
    margin-left: 0 !important; /* Menghapus margin warisan dari CSS sebelumnya */
    display: inline-flex;
    align-items: center;
    gap: 5px; /* Jarak antara teks dan ikon panah */
}

/* Animasi putar ikon panah saat menu di-hover */
.nav-dropdown svg {
    transition: transform 0.3s ease;
    margin-top: 2px;
}

.nav-dropdown:hover svg {
    transform: rotate(180deg);
}

/* Kotak Dropdown (Submenu) */
.dropdown-content {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #ffffff;
    min-width: 220px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* Bayangan lembut */
    border-radius: 6px;
    padding: 10px 0;
    z-index: 9999;
    margin-top: 15px; /* Posisi awal dari bawah (untuk efek slide up) */
    transition: all 0.3s ease;
    border-top: 3px solid var(--primary-dark); /* Garis aksen di bagian atas submenu */
}

/* Menjembatani celah kosong agar hover tidak terputus saat mouse digeser ke bawah */
.nav-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 25px; /* Tinggi celah jembatan */
}

/* Munculkan dropdown saat kontainer di-hover */
.nav-dropdown:hover .dropdown-content {
    visibility: visible;
    opacity: 1;
    margin-top: 10px; /* Efek slide naik ke atas */
}

/* Gaya Link (Submenu) di dalam Dropdown */
.dropdown-content a {
    display: block;
    padding: 10px 25px;
    margin-left: 0 !important;
    font-size: 18px;
    color: #4a5c5c; /* Warna teks agak abu-abu */
    font-weight: 400;
    border-bottom: 1px solid #f5f5f5; /* Garis pemisah antar submenu */
    transition: all 0.2s ease;
}

.dropdown-content a:last-child {
    border-bottom: none;
}

.dropdown-content a:hover {
    background-color: #f7f6f2; /* Latar belakang berubah krem saat di-hover */
    color: var(--primary-dark);
    font-weight: 600;
    padding-left: 30px; /* Efek bergeser (indent) saat di-hover */
}

/* --- Hero Section --- */
.hero {
    padding: 80px 20px;
    gap: 50px;
}

.hero-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.hero-text {
    flex: 0 0 55%; /* Memaksa kolom teks mengambil tepat 55% ruang */
    max-width: 55%;
    padding-right: 20px;
}

.hero-text h1 {
    font-size: 78px;
    margin-bottom: 20px;
    line-height: 80px;
    letter-spacing: 5px;
    width: 597.5px;
}

.hero-text p {
    font-size: 18px;
    color: var(--text-muted);
    margin-bottom: 40px;
    max-width: 68%;
    font-weight: lighter;
}

.hero-buttons {
    display: flex;
    gap: 15px;
}

.hero-buttons .btn {
    width: 262px;
    font-size: 20px;
    font-weight: 500;
    line-height: 31px;
    letter-spacing: 0px;
}

/* --- Hero Image & Badges --- */
.hero-image {
   flex: 0 0 40%; /* Memaksa kolom gambar mengambil maksimal 40% ruang */
    max-width: 40%;
    position: relative; /* Memastikan badge (60.000+ & Endorsed) tidak berantakan */
    display: flex;
    justify-content: center;
}

.hero-image img {
    width: 100%;
    max-width: 520px; /* Membatasi lebar agar proporsional */
    border-radius: 8px;
    display: block;
}

/* Badge 60,000+ (Kanan Atas) */
.badge-top-right {
    position: absolute;
    top: 20px;
    right: -35px; /* Sedikit keluar dari gambar */
    background-color: var(--primary-dark);
    color: white;
    padding: 5px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: left;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.badge-top-right strong {
    font-family: var(--font-fraunces);
    font-size: 32px;
    line-height: 30px;
    font-weight: 400;
    letter-spacing: -0.4px;
}

.badge-top-right span {
    font-family: var(--font-fraunces);
    font-size: 12px;
    letter-spacing: 0px;
    line-height: 20px;
    opacity: 0.8;
    font-weight: 300;
    color: #B5B5B5;
}

/* Badge Endorsed By (Kiri Bawah) */
.badge-bottom-left {
    position: absolute;
    bottom: -20px;
    left: -100px; 
    background-color: #ffffff;
    padding: 5px;
    border-radius: 4px;
    display: flex;
    flex-direction: column; /* Menyusun konten dari atas ke bawah */
    align-items: center; /* Meratakan tulisan "ENDORSED BY" ke tengah */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.badge-label {
    font-size: 12px;
    letter-spacing: 3px;
    color: #323333; /* Warna abu-abu pucat */
    text-transform: uppercase;
    margin-bottom: 0; /* Jarak antara judul dan ikon/teks di bawahnya */
    font-weight: 300;
    line-height: 20px;
}

.badge-content {
    display: flex;
    align-items: center;
    gap: 12px; /* Jarak antara ikon hijau dan tulisan serif */
}

.badge-org {
    font-family: var(--font-fraunces);
    font-size: 22px;
    line-height: 22px;
    font-weight: 500;
    color: #0A1F22;
}

/* Penyesuaian Mobile untuk Badges */
@media (max-width: 900px) {
    .badge-top-right {
        right: 10px;
    }
    .badge-bottom-left {
        left: 10px;
        bottom: 10px;
    }
}

/* --- Features Strip --- */
.features-strip {
    border-top: 1px solid #323333;
    border-bottom: 1px solid #323333;
    background-color: #ffffff;
    padding: 18px 0;
    margin-top: 20px; /* Jarak sedikit dari area hero image */
}

.features-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; 
    gap: 15px; /* Jarak atas-bawah 15px, Kiri-kanan 25px */
    font-size: 18px;
    color: #0A1F22;
    font-weight: 500;
    line-height: 31px;
    letter-spacing: 0px;
}

.features-content .dot {
    font-weight: bold;
    color: #a0aab2; /* Warna titik pemisah dibuat sedikit lebih terang */
}

/* Penyesuaian Mobile */
@media (max-width: 900px) {
    .features-strip {
        padding: 15px;
    }
    .features-content {
        justify-content: center;
        text-align: center;
    }
}

/* --- How You Work (Cards) --- */
.how-you-work {
    padding: 100px 20px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 50px;
}

.header-left h2 {
    font-family: var(--font-fraunces);
    font-size: 60px;
    color: #0A1F22;
    line-height: 67px;
    font-weight: 400;
    letter-spacing: -0.4px;
}

.header-left h2 em {
    font-family: var(--font-fraunces);
    font-style: italic;
    font-family: var(--font-serif);
}

.header-right p {
    color: var(--text-muted);
    line-height: 1.6;
    font-size: 18px;
    font-weight: 300;
    line-height: 31px;
}

.quiz-link {
    color: var(--text-muted);
    text-decoration: underline;
    text-underline-offset: 4px; /* Memberi jarak antara teks dan garis bawah */
    transition: color 0.3s;
}

.quiz-link:hover {
    color: var(--primary-dark);
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.work-card {
    background-color: #cff4ee; /* Warna mint/cyan khas desain baru */
    padding: 30px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
}

.card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-number {
    font-size: 14px;
    letter-spacing: 7%;
    color: var(--text-muted);
    font-weight: 300;
    line-height: 20px;
}

.card-arrow-btn {
    width: 36px;
    height: 36px;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--primary-dark);
    transition: transform 0.3s, box-shadow 0.3s;
}

.card-arrow-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.card-image {
    text-align: center;
    margin: 0;
    min-height: 100px; /* Menjaga konsistensi tinggi jika gambar berbeda ukuran */
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-image img {
    max-width: 100%;
    height: auto;
}

.work-card h3 {
    font-family: var(--font-fraunces);
    font-size: 30px;
    margin-bottom: 12px;
    color: #0A1F22;
    font-weight: 400;
    line-height: 35px;
    letter-spacing: -0.4px;
}

.work-card p {
    font-size: 16px;
    font-weight: 300;
    color: #0A1F22;
    margin-bottom: 30px;
    line-height: 24px;
    letter-spacing: 0px;
    flex-grow: 1; /* Mendorong link ke paling bawah kartu */
}

.card-link {
    font-size: 16px;
    font-weight: 500;
    color: #0A1F22;
    display: inline-flex;
    align-items: center;
    margin-top: auto;
    line-height: 31px;
}

.card-link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* --- Dark Section --- */
.dark-section {
    background-color: var(--primary-dark);
    color: #fff;
    padding: 100px 0;
    position: relative; /* Penting untuk watermark */
    overflow: hidden; /* Mencegah watermark membuat halaman bisa di-scroll ke kanan */
}

/* Efek teks raksasa transparan di background */
.watermark {
    position: absolute;
    right: -2%;
    bottom: 5%;
    font-size: 45rem; /* Ukuran sangat besar */
    font-family: var(--font-serif);
    color: rgba(255, 255, 255, 0.04); /* Sangat transparan */
    line-height: 0.8;
    z-index: 0;
    pointer-events: none; /* Agar tidak bisa di-klik/diblok */
    letter-spacing: -27px;
}

.dark-content {
    display: flex;
    justify-content: space-between;
    gap: 50px;
    position: relative;
    z-index: 1; /* Memastikan konten berada di atas watermark */
}

.dark-text-left {
    flex: 0 0 45%; /* Memaksa kolom kiri mengambil tepat 45% dari lebar container */
    max-width: 45%;
}

.dark-text-left h2 {
    font-size: 70px;
    color: #fff;
    line-height: 1.1;
    margin-top: 15px;
}

.dark-text-left h2 .highlight {
    color: #cff4ee; /* Warna mint muda */
    font-style: italic;
    font-family: var(--font-serif);
}

.dark-text-right {
    flex: 0 0 50%; /* Memaksa kolom kanan mengambil tepat 50% dari lebar container */
    max-width: 50%;
    padding-top: 10px;
}

/* Paragraf pertama lebih tebal dan lebih putih */
.lead-text {
    color: #ffffff;
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 25px;
    line-height: 1.6;
}

/* Paragraf kedua sedikit lebih redup */
.dark-text-right p:not(.lead-text) {
    color: #8da4a4;
    margin-bottom: 35px;
    font-size: 18px;
    line-height: 1.6;
}

.dark-buttons {
    display: flex;
    gap: 15px;
}

.dark-buttons .btn {
    font-size: 18px;
    padding: 14px 38px;
}

/* Penyesuaian Mobile */
@media (max-width: 900px) {
    .dark-content {
        flex-direction: column;
        align-items: flex-start;
    }
    .watermark {
        font-size: 20rem;
        bottom: 0;
        right: -10%;
    }
    .dark-text-left h2 {
        font-size: 2.8rem;
    }
}

/* --- Where It Works Section --- */
.where-it-works {
    padding: 100px 20px 40px; /* Jarak atas tebal, bawah sedang */
}

.works-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
}

.works-title h2 {
    font-family: var(--font-fraunces);
    font-size: 64px;
    color: var(--primary-dark);
}

.works-nav {
    display: flex;
    gap: 15px;
    margin-bottom: 10px;
}

.works-nav button {
    padding: 0;
}

.nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Tombol Kiri (Outline) */
.nav-prev {
    background-color: transparent;
    border: 1px solid #d1d9d9;
    color: var(--primary-dark);
}

.nav-prev:hover {
    border-color: var(--primary-dark);
}

/* Tombol Kanan (Solid) */
.nav-next {
    background-color: var(--primary-dark);
    border: 1px solid var(--primary-dark);
    color: #fff;
}

.nav-next:hover {
    background-color: #1a3c3c;
}

/* Konten Bawah (Gambar & List) */
.works-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: flex-start;
}

.works-image img {
    width: 100%;
    border-radius: 6px;
    display: block;
    object-fit: cover;
}

/* Daftar Akordion Industri */
.works-list {
    border-top: 2px solid #0A1F22; /* Garis paling atas */
}

.works-item {
    padding: 12px 0;
}

.works-item-header {
    display: flex;
    align-items: center;
}

.works-num {
    font-size: 18px;
    color: #a0aab2;
    width: 40px; /* Lebar tetap agar sejajar */
    font-weight: 600;
}

.works-name {
    font-family: var(--font-fraunces);
    font-size: 32px;
    color: var(--primary-dark);
    font-weight: 400;
}

.works-name em {
    font-style: italic; /* Agar logo '&' melengkung estetik */
}

.works-specs {
    margin-left: auto; /* Mendorong teks spesifikasi ke paling kanan */
    font-size: 18px;
    color: #8da4a4;
    font-style: italic;
}

.works-item-body {
    display: none; /* Disembunyikan secara default */
    padding-left: 40px; /* Sejajar dengan teks judul, melewati nomor */
    margin-top: 10px;
}

.works-item-body p {
    font-size: 18px;
    color: var(--text-muted);
}

/* Status Item Aktif */
.works-item.active .works-item-body {
    display: block; /* Menampilkan teks saat aktif */
}

/* --- See It Section --- */
.see-it {
    padding: 60px 20px 80px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.see-it-left h2 {
    font-size: 48px;
    color: var(--primary-dark);
}

.see-it-left h2 em {
    font-family: var(--font-serif);
    font-style: italic;
}

.see-it-right {
    margin-bottom: 10px;
}

.see-it-right p {
    color: var(--text-muted);
    font-size: 20px;
    line-height: 1.6;
}

/* --- Penyesuaian Mobile --- */
@media (max-width: 900px) {
    .works-header, .see-it {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }
    
    .works-content {
        grid-template-columns: 1fr; /* Tumpuk atas-bawah di HP */
        gap: 40px;
    }
}

/* --- Video Banner Section --- */
.video-banner {
    width: 100%;
}

.video-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.video-wrapper img {
    width: 100%;
    display: block;
    object-fit: cover;
    max-height: 600px; /* Mencegah gambar terlalu tinggi di monitor ultra-wide */
}

/* Penyesuaian Mobile */
@media (max-width: 900px) {
    .play-btn {
        width: 60px;
        height: 60px;
    }
    .play-btn svg {
        width: 25px;
        height: 25px;
    }
    .video-banner {
        margin-bottom: 60px;
    }
}

/* --- Why Bambach (Reasons Grid) --- */
.reasons {
    padding: 100px 20px 80px;
    background-color: #F3EFE7;
}

.reasons-header {
    margin-bottom: 50px;
}

.reasons-header h2 {
    font-size: 64px;
    color: var(--primary-dark);
    margin-top: 15px;
    line-height: 1.1;
}

.reasons-header h2 em {
    font-family: var(--font-serif);
    font-style: italic;
}

/* Memanfaatkan background dan gap untuk membuat efek garis border tabel yang mulus */
.reasons-grid-container {
    border: 1px solid #dcdcdc; /* Border luar seluruh tabel */
}

.reasons-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background-color: #dcdcdc; /* Warna garis pemisah (border dalam) */
    gap: 1px; /* Ketebalan garis pemisah antar kolom/baris */
}

.reason-cell {
    background-color: #ffffff; /* Latar cell warna putih untuk menutupi background tabel */
    padding: 30px;
    display: flex;
    flex-direction: column;
}

.reason-num {
    font-size: 16px;
    color: #a0aab2;
    margin-bottom: 15px;
    font-weight: 600;
}

.reason-icon {
    height: 80px;
    margin-bottom: 25px;
    display: flex;
    align-items: flex-start;
}

.reason-icon img {
    max-height: 100%;
    max-width: 100%;
}

.reason-cell h4 {
    font-family: var(--font-fraunces);
    font-size: 26px;
    color: var(--primary-dark);
    margin-bottom: 12px;
    line-height: 1.2;
    font-weight: 500;
}

.reason-cell p {
    font-size: 16px;
    color: var(--text-muted);
    line-height: 1.5;
}

.reason-cell a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- Testimonial Section --- */
.testimonial-section {
    background-color: #edebe2; /* Warna krem/beige */
    padding: 80px 0;
}

.testimonial-content {
    display: flex;
    align-items: center; /* Menyelaraskan gambar dan teks di tengah secara vertikal */
    justify-content: space-between;
    gap: 60px;
    max-width: 960px; /* Membatasi lebar maksimal agar tidak terlalu merenggang */
    margin: 0 auto; /* Menengahkan kotak konten di dalam container */
}

.testimonial-image {
    flex: 0 0 35%; 
    max-width: 35%;
}

.testimonial-image img {
    width: 100%;
    border-radius: 4px;
    display: block;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.testimonial-text {
    flex: 0 0 65%;
    max-width: 65%;
}

.quote-icon {
    margin-bottom: 20px;
}

/* Mengatur ulang gaya blockquote bawaan tema WordPress */
.testimonial-text blockquote {
    font-family: var(--font-serif);
    font-size: 32px; /* Sesuaikan ukuran font dengan Figma */
    font-style: normal !important; /* MEMAKSA teks menjadi tegak (tidak miring) */
    font-weight: 600;
    color: var(--primary-dark);
    line-height: 1.4;
    margin: 0 0 30px 0 !important; /* Menghapus margin bawaan tema */
    padding: 0 !important; /* Menghapus padding bawaan tema */
    border: none !important; /* Menghapus garis tepi bawaan tema jika ada */
    box-shadow: none !important;
}

.author-info {
    display: flex;
    flex-direction: column;
}

.author-info strong {
    color: var(--primary-dark);
    font-size: 18px;
    font-weight: 600;
    font-family: var(--font-sans);
    margin-bottom: 4px;
}

.author-info span {
    color: var(--primary-dark);
    font-size: 15px;
    font-style: italic; /* Hanya title yang miring */
    font-family: var(--font-sans);
}

/* Penyesuaian Mobile */
@media (max-width: 900px) {
    .testimonial-content {
        flex-direction: column;
        gap: 40px;
    }
    .testimonial-image,
    .testimonial-text {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .testimonial-text blockquote {
        font-size: 24px;
    }
}

@media (max-width: 500px) {
    .reasons-grid {
        grid-template-columns: 1fr; /* Menjadi 1 kolom di HP kecil */
    }
}

/* --- Visit Us Section --- */
.visit-us {
    background-color: #0b1a1a; 
    color: #ffffff;
    padding: 80px 0;
}

.visit-us-content {
    display: flex;
    justify-content: space-between;
    align-items: center; /* BERUBAH: dari flex-start menjadi center agar sejajar tengah vertikal */
    gap: 60px;
}

.visit-text {
    flex: 1;
    max-width: 600px;
}

.visit-text h2 {
    font-size: 58px;
    line-height: 1.1;
    margin: 15px 0 20px;
}

.visit-text h2 .highlight {
    color: #8da4a4; 
    font-style: normal; /* BERUBAH: diubah jadi normal agar tegak seperti di Figma */
    font-family: var(--font-serif);
}

.visit-text p {
    color: #a0aab2;
    font-size: 18px;
    line-height: 31px;
    font-weight: 300;
    letter-spacing: 0px;
}

.visit-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 300px; /* BERUBAH: Fix width 300px menyesuaikan ukuran di Figma (295.75px) */
}

.btn-pill {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 25px;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 600;
    width: 100%; /* TAMBAHAN: Memaksa tombol mengisi penuh lebar container 300px */
    box-sizing: border-box;
    text-decoration: none !important; /* TAMBAHAN: Menghilangkan garis bawah default link WordPress */
    transition: all 0.3s ease;
}

.btn-white {
    background-color: #ffffff;
    color: #0b1a1a !important; /* TAMBAHAN: Memaksa warna teks jadi gelap (tidak biru) */
}

.btn-white:hover {
    background-color: #e0dcd3;
}

.btn-outline-white {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #ffffff !important; /* TAMBAHAN: Memaksa warna teks putih */
}

.btn-outline-white:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* --- Footer Section --- */
.footer {
    background-color: var(--primary-dark);
    color: #ffffff;
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Garis pemisah tipis */
}

.footer-top {
    padding: 80px 20px;
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

/* Kolom 1: Brand */
.footer-brand {
    flex: 1.2;
    max-width: 250px;
}

.footer-logo {
    max-width: 140px;
    margin-bottom: 20px;
}

.footer-brand p {
    color: #8da4a4;
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 20px;
    font-weight: 300;
    letter-spacing: 0px;
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-links a {
    color: #ffffff;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.social-links a:hover {
    opacity: 1;
}

/* Kolom 2: Links Area (Home, Industries, Location) */
.footer-links {
    flex: 2;
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.footer-col h4 {
    font-family: var(--font-sans);
    font-size: 16px;
    letter-spacing: 0px;
    color: #98D7D4;
    margin-bottom: 25px;
    line-height: 31px;
}

.footer-col ul {
    list-style: none;
}

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

.footer-col ul li a {
    color: #ffffff;
    font-size: 16px;
    transition: color 0.3s;
}

.footer-col ul li a:hover {
    color: #cff4ee;
}

/* Bullet list khusus untuk Industries dan Location */
.bullet-list li {
    position: relative;
    padding-left: 15px;
}

.bullet-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #ffffff;
}

.bullet-list li a {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(255, 255, 255, 0.3);
}

/* Kolom 3: Newsletter & Contact */
.footer-newsletter {
    flex: 1.5;
    max-width: 320px;
}

.footer-newsletter h4 {
    font-family: var(--font-sans);
    font-size: 16px;
    letter-spacing: 1px;
    color: #8da4a4;
    margin-bottom: 15px;
}

.footer-newsletter p {
    color: #ffffff;
    font-size: 16px;
    margin-bottom: 20px;
    line-height: 1.5;
}

.newsletter-form {
    display: flex;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 30px;
    overflow: hidden;
}

.newsletter-form input {
    flex: 1;
    background-color: transparent;
    border: none;
    padding: 10px 20px;
    color: #fff;
    font-size: 14px;
}

.newsletter-form input:focus {
    outline: none;
}

.newsletter-form button {
    background-color: #ffffff;
    color: var(--primary-dark);
    border: none;
    padding: 10px 25px;
    font-weight: 600;
    font-style: italic;
    cursor: pointer;
    font-size: 14px;
}

.contact-info {
    list-style: none;
}

.contact-info li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #ffffff;
    font-size: 16px;
    margin-bottom: 15px;
}

/* Bottom Bar */
.footer-bottom {
    background-color: #0b1a1a;
    padding: 20px 0;
}

.footer-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    color: #8da4a4;
}

.bottom-links a {
    color: #8da4a4;
    text-decoration: underline;
    text-underline-offset: 3px;
    margin: 0 5px;
}

.top4-link {
    color: #ffaa00 !important; /* Warna kuning khas logo Top4 */
}

/* --- Penyesuaian Mobile (Visit Us & Footer) --- */
@media (max-width: 900px) {
    .visit-us-content {
        flex-direction: column;
        align-items: flex-start; /* Mengembalikan ke rata kiri jika di HP */
    }
    .visit-buttons {
        width: 100%;
    }
    .footer-top {
        flex-direction: column;
        gap: 50px;
    }
    .footer-links {
        flex-wrap: wrap; /* Membungkus kolom link di HP */
    }
    .footer-col {
        min-width: 120px;
    }
    .footer-bottom-content {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
}

/* --- Footer Section --- */
.footer {
    background-color: var(--primary-dark);
    color: #ffffff;
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Garis pemisah tipis */
}

.footer-top {
    padding: 80px 20px;
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

/* Kolom 1: Brand */
.footer-brand {
    flex: 1.2;
    max-width: 250px;
}

.footer-logo {
    max-width: 140px;
    margin-bottom: 20px;
}

.footer-brand p {
    color: #8da4a4;
    line-height: 1.5;
    margin-bottom: 20px;
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-links a {
    color: #ffffff;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.social-links a:hover {
    opacity: 1;
}

/* Kolom 2: Links Area (Home, Industries, Location) */
.footer-links {
    flex: 2;
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.footer-col h4 {
    font-family: var(--font-sans);
    letter-spacing: 1px;
    color: #8da4a4;
    margin-bottom: 25px;
}

.footer-col ul {
    list-style: none;
    margin: 0 !important;
}

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

.footer-col ul li a {
    color: #ffffff;
    transition: color 0.3s;
}

.footer-col ul li a:hover {
    color: #cff4ee;
}

/* Bullet list khusus untuk Industries dan Location */
.bullet-list li {
    position: relative;
    padding-left: 15px;
}

.bullet-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #ffffff;
}

.bullet-list li a {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(255, 255, 255, 0.3);
}

/* Kolom 3: Newsletter & Contact */
.footer-newsletter {
    flex: 1.5;
    max-width: 320px;
}

.footer-newsletter h4 {
    font-family: var(--font-sans);
    letter-spacing: 1px;
    color: #8da4a4;
    margin-bottom: 15px;
}

.footer-newsletter p {
    color: #ffffff;
    margin-bottom: 20px;
    line-height: 1.5;
}

.newsletter-form {
    display: flex;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 30px;
    overflow: hidden;
}

.newsletter-form input {
    flex: 1;
    background-color: transparent;
    border: none;
    padding: 10px 20px;
    color: #fff;
}

.newsletter-form input:focus {
    outline: none;
}

.newsletter-form button {
    background-color: #ffffff;
    color: var(--primary-dark);
    border: none;
    padding: 5px;
    font-weight: 600;
    font-style: italic;
    cursor: pointer;
}

.contact-info {
    list-style: none;
    margin: 0 !important;
}


.contact-info li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #ffffff;
    margin-bottom: 15px;
}

/* Bottom Bar */
.footer-bottom {
    background-color: #0b1a1a;
    padding: 20px 0;
}

.footer-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #8da4a4;
}

.bottom-links a {
    color: #8da4a4;
    text-decoration: underline;
    text-underline-offset: 3px;
    margin: 0 5px;
}

.top4-link {
    color: #ffaa00 !important; /* Warna kuning khas logo Top4 */
}

/* --- Penyesuaian Mobile (Visit Us & Footer) --- */
@media (max-width: 900px) {
    .visit-us-content {
        flex-direction: column;
    }
    .visit-buttons {
        width: 100%;
    }
    .footer-top {
        flex-direction: column;
        gap: 50px;
    }
    .footer-links {
        flex-wrap: wrap; /* Membungkus kolom link di HP */
    }
    .footer-col {
        min-width: 120px;
    }
    .footer-bottom-content {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
}

/* --- Responsive/Mobile adjustments --- */
@media (max-width: 900px) {
    .hero, .dark-content, .section-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .card-grid {
        grid-template-columns: 1fr;
    }
    
    .hero-text h1 {
        font-size: 3rem;
    }
    
    .main-nav {
        display: none; /* Idealnya diganti dengan hamburger menu */
    }
}