/* === GLOBAL & ROOT VARIABLES === */
:root {
    --primary-color: #1a1a1a;
    --secondary-color: #f7f7f7;
    --accent-color: #d4af37;
    --text-color: #333;
    --light-text-color: #fff;
    --background-color: #ffffff;
    --container-width: 1140px;
    --font-family: 'EB Garamond', serif;
    --border-radius: 8px;
}

/* === RESET & BASE STYLES === */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font-family); background-color: var(--background-color); color: var(--text-color); line-height: 1.7; font-size: 16px; }
body.mobile-menu-active { overflow: hidden; }
.container { max-width: var(--container-width); margin: 0 auto; padding: 0 20px; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--primary-color); text-decoration: none; transition: color 0.3s ease; }
a:hover { color: var(--accent-color); }
.section-title { font-size: 2.4rem; margin-bottom: 40px; font-weight: 700; }
.text-center { text-align: center; }

/* === UTILITIES === */
.section-padding { padding: 80px 0; }
.section-padding-alt { padding: 80px 0; background-color: var(--secondary-color); }
.section-intro { max-width: 800px; margin: 0 auto 50px auto; font-size: 1.4rem; line-height: 1.8; color: #555; }

/* === BUTTONS === */
.btn { display: inline-block; padding: 14px 32px; border-radius: var(--border-radius); font-weight: 600; text-align: center; transition: all 0.3s ease; border: 2px solid transparent; cursor: pointer; }
.btn-primary { background-color: var(--primary-color); color: var(--light-text-color); }
.btn-primary:hover { background-color: #000; color: var(--light-text-color); transform: translateY(-3px); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.btn-secondary { background-color: transparent; color: var(--primary-color); border-color: var(--primary-color); }
.btn-secondary:hover { background-color: var(--primary-color); color: var(--light-text-color); }

/* === HEADER & NAVIGATION === */
.header { background-color: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 1002; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.header-wrapper { display: flex; justify-content: space-between; align-items: center; height: 80px; }
.header-logo { display: flex; align-items: center; gap: 15px; }
.logo-img { width: 60px; height: auto; }
.header-text h1 { font-size: 1.4rem; margin: 0; font-weight: 700; }
.header-text .subheading { font-size: 0.7rem; color: #666; margin: 0; letter-spacing: 0.5px; }
.nav-links { list-style: none; display: flex; gap: 30px; }
.nav-links a { font-weight: 600; font-size: 0.95rem; padding: 5px 0; position: relative; color: #555; }
.nav-links a::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -2px; left: 0; background-color: var(--primary-color); transition: width 0.3s ease; }
.nav-links a.active, .nav-links a:hover { color: var(--primary-color); }
.nav-links a.active::after, .nav-links a:hover::after { width: 100%; }
.hamburger { display: none; background: none; border: none; cursor: pointer; flex-direction: column; gap: 5px; z-index: 1005; }
.hamburger span { display: block; width: 25px; height: 3px; background-color: var(--primary-color); border-radius: 3px; transition: all 0.3s ease-in-out; }
.mobile-menu { display: block; position: fixed; top: 0; right: -100%; width: 80%; max-width: 320px; height: 100vh; background: #fff; padding: 100px 40px 40px; transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); box-shadow: -4px 0 15px rgba(0,0,0,0.1); z-index: 1001; }
.mobile-menu.open { right: 0; }
.mobile-menu ul { list-style: none; display: flex; flex-direction: column; gap: 25px; }
.mobile-menu a { font-size: 1.3rem; font-weight: 600; }

/* === HERO & PAGE HERO === */
.hero { height: 85vh; position: relative; background-size: cover; background-position: center; display: flex; align-items: center; color: var(--light-text-color); text-align: center; }
.hero-overlay, .page-hero .hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; }
.hero-content { max-width: 800px; animation: fadeInHero 1.5s ease-out; }
@keyframes fadeInHero { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.hero-title { font-size: 2.5rem; }
.hero-text { font-size: 1.5rem; }
/* Assuming page-hero uses inline style for background-image, updated in HTML */
.page-hero { height: 50vh; position: relative; background-size: cover; background-position: center; color: var(--light-text-color); text-align: center; }

/* Tombol "Hubungi Kami" pada Hero */
.hero-btn { /* Asumsi Anda menambahkan class hero-btn pada tombol di hero section */
    margin-top: 30px; /* Jarak dari teks di atasnya */
}

/* === FORMULIR KONTAK (UMUM) === */
.client-form .form-group { margin-bottom: 20px; }
.client-form label { display: block; margin-bottom: 8px; font-weight: 600; font-size: 0.9rem; }
.client-form input, .client-form textarea { width: 100%; padding: 14px; border: 1px solid #ccc; border-radius: var(--border-radius); font-family: inherit; font-size: 1rem; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.client-form input:focus, .client-form textarea:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.1); }
.client-form .btn-primary { width: 100%; }

/* === FOOTER, PRELOAD-ER, WA FLOAT === */
.footer { background-color: var(--primary-color); color: #a0a0a0; padding-top: 60px; }
.footer-wrapper { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px; padding-bottom: 40px; }
.footer h4 { color: #fff; margin-bottom: 15px; }
.footer-kontak-list { list-style: none; font-size: 0.95rem; }
.footer-kontak-list li { 
    margin-bottom: 10px; 
    display: flex; 
    align-items: center; 
    /* gap: 10px; -> Properti ini dihapus */
}

/* PERBAIKAN UNTUK SAFARI: 
  Pastikan semua link di dalam daftar kontak footer memiliki warna yang terlihat.
*/
.footer-kontak-list li a, 
.footer-kontak-list li {
    color: #a0a0a0; /* Menggunakan warna teks footer yang sudah ada */
    text-decoration: none; /* Menghilangkan garis bawah jika ada */
}

.footer-kontak-list li img { 
    width: 20px; 
    height: 20px; 
    margin-right: 10px;
}

/* Ikon footer baru */
.footer-kontak-list img { 
    width: 20px; 
    height: 20px; 
    margin-right: 10px; /* Ditambahkan untuk menggantikan 'gap' */
}

.wa-float { 
    position: fixed; 
    bottom: 25px; 
    right: 25px; 
    width: 60px; 
    height: 60px; 
    background-color: #25d366; 
    border-radius: 50%;
    /* Tambahkan tiga baris ini untuk menengahkan ikon */
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2); /* Opsional: untuk bayangan */
    z-index: 999; /* Opsional: agar selalu di atas */
}
/* Icon float WA baru */
.wa-float img { width: 40px; height: 40px; }

#preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; display: flex; justify-content: center; align-items: center; z-index: 9999; }
#preloader.fade-out { opacity: 0; visibility: hidden; }

/* Image src in HTML */
.preloader-logo {
    animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
}

/* === ANIMATIONS === */
.fade-in { opacity: 0; transform: translateY(40px); transition: opacity 0.8s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1); }
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* ==============================================
   PAGE SPECIFIC STYLES
   ============================================== */

/* --- Homepage (Beranda) --- */
.stats-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; text-align: center; }
.stat-card {
    background-color: #fff;
    padding: 25px;
    border-radius: var(--border-radius);
    border: 1px solid #e9e9e9;
    display: flex; /* Menggunakan flexbox untuk penataan ikon dan teks */
    flex-direction: column; /* Susun vertikal */
    align-items: center; /* Pusatkan item secara horizontal */
    justify-content: center; /* Pusatkan item secara vertikal jika ada ruang */
    max-width: 280px; /* Lebar maksimum card agar tidak terlalu gepeng */
    justify-self: center; /* Pusatkan card dalam sel grid */
}
/* Ikon pada Card Statistik - Ukuran dan terpusat */
.stat-card img { /* HTML punya width/height 50px */
    width: 50px;
    height: 50px;
    margin: 0 auto 15px auto; /* Pusatkan gambar dan tambahkan jarak bawah */
}

.about-container { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: center; }
.about-image img {
    border-radius: var(--border-radius);
    width: 100%;
    height: auto; /* Ubah dari 100% menjadi auto agar menjaga rasio aspek */
    object-fit: cover; /* Pertahankan object-fit cover */
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.about-container .btn {
    margin-top: 30px; /* Margin atas tombol "Baca Selengkapnya" */
}

.services-section .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-bottom: 50px; }
.services-section .service-card {
    padding: 30px; border: 1px solid #eee; border-radius: var(--border-radius); transition: all 0.3s ease;
    max-width: 320px; /* Lebar maksimum card agar tidak terlalu gepeng */
    justify-self: center; /* Pusatkan card dalam sel grid */
}
.services-section .service-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.08); }
.services-section .service-card h3 { font-size: 1.4rem; margin-bottom: 15px; }
.artikel-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.artikel-card {
    background-color: #fff; border-radius: var(--border-radius); overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.07); display: flex; flex-direction: column;
    max-width: 380px; /* Lebar maksimum card agar tidak terlalu gepeng */
    justify-self: center; /* Pusatkan card dalam sel grid */
}
/* Gambar pada Card Artikel Hukum - Samakan ukuran dan terpusat */
.artikel-card img { /* HTML punya width 300px, height 200px */
    width: 100%; /* Pastikan mengisi lebar container */
    height: 180px; /* Tinggi gambar sedikit dikurangi (dari 200px) */
    object-fit: cover; /* Pastikan gambar mengisi area tanpa distorsi, terpusat */
}
.artikel-content { padding: 25px; flex-grow: 1; display: flex; flex-direction: column; }
.artikel-content h3 { font-size: 1.25rem; margin-bottom: 10px; }
.artikel-content p { flex-grow: 1; margin-bottom: 20px; }
.link-selengkapnya { font-weight: 600; font-size: 0.9rem; }
/* kontak-section classes are defined below in contact-page-wrapper */

/* --- Halaman Tentang Kami --- */
.about-description-wrapper { display: grid; grid-template-columns: 1fr 1.2fr; gap: 50px; align-items: center; }
/* Image src in HTML */
.visi-misi-container { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 1000px; margin: 0 auto; }
.visi-misi-card { background-color: var(--secondary-color); padding: 40px; border-radius: var(--border-radius); text-align: center; border: 1px solid #e9e9e9; }
.visi-misi-card h3 { font-size: 1.8rem; margin-bottom: 20px; }
.visi-misi-card ul { list-style: none; padding: 0; text-align: left; }
.visi-misi-card ul li {
    position: relative; /* Agar ::before diposisikan relatif terhadap li */
    padding-left: 30px; /* Berikan ruang untuk ikon centang */
    margin-bottom: 10px; /* Tambahkan sedikit jarak antar item list */
}
.visi-misi-card ul li::before {
    content: '✓';
    color: var(--primary-color);
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 2px; /* Sesuaikan vertikal posisi centang jika perlu */
}

/* --- Halaman Layanan --- */
.detailed-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.detailed-services-grid .service-card {
    text-align: center; border: 1px solid #eee; background-color: #fff; border-radius: var(--border-radius); overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    padding: 10px; /* Kurangi padding keseluruhan card untuk desktop (dari 15px) */
    max-width: 280px !important; /* Lebar maksimum card dikurangi sangat signifikan (dari 300px) */
    justify-self: center; /* Pusatkan card dalam sel grid */
    min-height: 280px; /* Ditambah: Tinggi minimum untuk card desktop agar tidak gepeng (disesuaikan dengan lebar baru) */
    display: flex; /* Tambah: Gunakan flex untuk isi card */
    flex-direction: column; /* Tambah: Susun vertikal */
    justify-content: space-between; /* Tambah: Rata atas dan bawah */
}
.service-card-image {
    width: 100%;
    height: 120px; /* Tinggi gambar sedikit dikurangi lagi (dari 150px) */
    object-fit: cover;
}
.service-card-content { padding: 10px; flex-grow: 1; display: flex; flex-direction: column; justify-content: center; }
.service-card-content h3 { font-size: 1.4rem; margin-bottom: 8px; }
.detailed-services-grid .service-card .service-card-content p { font-size: 0.95rem; line-height: 1.5; }

/* Aturan untuk pemusatan kartu terakhir di halaman layanan sudah dihapus karena ada 9 kartu */
/* Grid 3x3 akan terisi penuh secara otomatis */


/* --- Halaman Tim --- */
.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Kembali ke 3 kolom horizontal untuk desktop */
    gap: 30px;
    margin-top: 50px;
}
.team-card {
    text-align: center;
    overflow: hidden;
    border-radius: var(--border-radius);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    background-color: var(--background-color); /* Pastikan background kartu putih */
    padding: 30px 20px; /* Padding untuk seluruh kartu, disesuaikan agar rapi tanpa foto */
    /* min-height: 180px;  Opsional: uncomment dan sesuaikan jika ingin tinggi kartu seragam */
    max-width: 300px; /* Lebar maksimum card agar tidak terlalu gepeng */
    justify-self: center; /* Pusatkan card dalam sel grid */
}

/* Sembunyikan div .team-image karena sudah tidak berisi gambar di HTML */
.team-image {
    display: none;
}

.team-info {
    padding: 0; /* Hapus padding dari .team-info karena padding sudah di .team-card */
}
.team-info h4 { /* Menargetkan nama anggota tim (h4 di HTML) */
    font-size: 1.6rem;
    margin-bottom: 8px;
    font-weight: 700;
    color: var(--primary-color);
}
.team-info p.team-title { /* Menargetkan posisi anggota tim (p dengan class team-title) */
    font-size: 1rem;
    margin-bottom: 15px; /* Spasi setelah posisi sebelum keahlian */
    color: #555;
    font-weight: 600;
}
.team-expertise { /* Menargetkan container keahlian khusus */
    margin-top: 15px; /* Spasi di atas keahlian */
    border-top: 1px solid #eee; /* Garis pemisah visual */
    padding-top: 15px; /* Padding di atas teks keahlian */
}
.team-expertise h5 { /* Menargetkan judul "Keahlian Khusus" (h5 di HTML) */
    font-size: 0.95rem;
    margin-bottom: 8px;
    color: #666;
    font-weight: 600;
}
.team-expertise p { /* Menargetkan teks keahlian */
    font-size: 0.95rem;
    line-height: 1.6;
    color: #777;
}


/* --- Halaman Testimoni --- */
/* Assuming page-hero uses inline style for background-image, updated in HTML */
.testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 30px; min-height: 500px; }
.testimonial-card {
    background-color: var(--secondary-color);
    padding: 35px;
    border-radius: var(--border-radius);
    border: 1px solid #e9e9e9;
    display: flex; /* Changed from 'none' to 'flex' */
    flex-direction: column;
    justify-content: space-between;
    opacity: 0; /* Still used for fade-in */
    transform: translateY(15px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    max-width: 400px; /* Lebar maksimum card agar tidak terlalu gepeng */
    justify-self: center; /* Pusatkan card dalam sel grid */
}
.testimonial-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.testimonial-quote { font-size: 1.1rem; margin-bottom: 25px; flex-grow: 1; position: relative; padding-left: 45px; }
.testimonial-quote::before { content: '“'; font-family: 'Times New Roman', Times, serif; font-size: 5rem; color: var(--primary-color); opacity: 0.1; position: absolute; left: -10px; top: -20px; }
.testimonial-author { border-top: 1px solid #ddd; padding-top: 15px; text-align: right; }

/* --- Halaman Artikel (Daftar & Detail) --- */
.article-list-container { display: grid; grid-template-columns: 1fr; gap: 50px; }
.article-list-card { display: grid; grid-template-columns: 300px 1fr; gap: 30px; align-items: center; }
/* Image src in JS generated HTML */
.article-list-image { display: block; border-radius: var(--border-radius); overflow: hidden; box-shadow: 0 8px 20px rgba(0,0,0,0.1); }
/* Image src in JS generated HTML */
.article-list-meta, .article-detail-meta { font-size: 0.9rem; font-weight: 600; color: #555; margin-bottom: 10px; }
.article-detail-title { font-size: 2.5rem; }
.article-detail-meta { margin-bottom: 30px; }
/* Image src in HTML */
.article-detail-body h4 { font-size: 1.4rem; margin-top: 30px; }
.article-detail-body ul { list-style-position: outside; padding-left: 20px; }

/* --- Halaman Kontak --- */
.contact-page-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: flex-start; margin-bottom: 60px; }
.contact-info-list { list-style: none; padding: 0; margin-top: 30px; }
.contact-info-list li strong { display: block; margin-bottom: 5px; }
.contact-form-container { background-color: var(--secondary-color); padding: 40px; border-radius: var(--border-radius); }
.form-title { font-size: 1.8rem; margin-bottom: 30px; text-align: center; }
.contact-map-wrapper { border-radius: var(--border-radius); overflow: hidden; box-shadow: 0 8px 25px rgba(0,0,0,0.1); }
/* Iframe src in HTML */

/* --- Pagination --- */
#pagination-container { display: flex; justify-content: center; align-items: center; margin-top: 50px; gap: 8px; }
.pagination-btn { border: 1px solid #ddd; background-color: #fff; padding: 10px 15px; border-radius: 5px; cursor: pointer; font-weight: 600; }
.pagination-btn.active, .pagination-btn:hover { background-color: var(--primary-color); color: var(--light-text-color); border-color: var(--primary-color); }

/* ==============================================
   RESPONSIVE STYLES
   ============================================== */
@media (max-width: 992px) {
    .about-container, .kontak-wrapper, .about-description-wrapper, .contact-page-wrapper { grid-template-columns: 1fr; }
    .about-text, .about-description-text { order: 2; text-align: center; }
    .about-image, .about-description-image { order: 1; }
    .team-grid, .detailed-services-grid { grid-template-columns: repeat(2, 1fr); }
    /* Aturan untuk pemusatan kartu terakhir pada 2 kolom jika hanya ada satu card di baris */
    .detailed-services-grid .service-card:last-child:nth-child(2n + 1) { grid-column: 1 / -1; justify-self: center; max-width: 400px; }
}

@media (max-width: 768px) {
    body { font-size: 15px; }

    /* Header Mobile (OK) */
    .header-wrapper {
        height: auto;
        min-height: 60px;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        padding: 5px 10px; /* Logo/text lebih ke kiri, dan juga burger lebih ke kanan */
        position: relative;
    }
    .header-logo {
        flex-grow: 1;
        flex-shrink: 1;
        justify-content: flex-start; /* Pastikan rata kiri */
        margin-bottom: 0;
        padding-right: 10px; /* Jarak sebelum hamburger */
        max-width: calc(100% - 40px); /* Beri ruang cukup untuk hamburger */
    }
    .header-text h1 {
        font-size: 1rem;
        white-space: normal;
        line-height: 1.1;
        margin-bottom: 2px;
    }
    .header-text .subheading {
        font-size: 0.5rem;
        white-space: normal;
        line-height: 1.1;
    }
    .hamburger {
        position: absolute;
        right: 10px; /* Burger lebih ke kanan */
        top: 50%;
        transform: translateY(-50%);
        margin-bottom: 0;
        display: flex;
    }
    
    /* Perbaikan Posisi Main Content (untuk hero tidak tertimpa header) */
    main {
        margin-top: -80px; /* Tarik konten main ke atas sebesar tinggi header */
        padding-top: 80px; /* Dorong konten di dalam main ke bawah sejauh tinggi header */
        box-sizing: border-box; /* Pastikan padding tidak menambah tinggi main */
    }
    /* Pastikan hero-overlay menutupi seluruh area hero, bahkan di bawah header */
    .hero-overlay {
        height: 100%; /* Memastikan overlay mencakup seluruh tinggi hero */
        top: 0; /* Mulai dari atas kontainer hero */
        left: 0;
        width: 100%;
        position: absolute; /* Penting untuk tumpang tindih */
    }

    /* Hero Section Display (Revisi Lagi untuk Proporsionalitas & Keterbacaan) */
    .hero {
        height: 42.5vh; /* Tinggi hero (homepage) dikurangi */
        padding: 40px 0; /* Tambahkan padding vertikal untuk konten */
        min-height: 250px; /* Tinggi minimal agar hero tidak terlalu kecil */
    }
    .hero-content {
        padding: 15px; /* Padding internal untuk konten hero */
    }
    .hero-title {
        font-size: 1.4rem; /* Ukuran font judul hero di mobile */
        line-height: 1.3;
        margin-bottom: 15px;
    }
    .hero-text {
        font-size: 0.9rem; /* Ukuran font teks hero di mobile */
        line-height: 1.4;
    }
    
    /* Perkecil Kotak Tombol "Hubungi Kami" */
    .hero-btn {
        margin-top: 30px; /* Jarak tombol dari teks hero */
        padding: 8px 18px; /* Padding tombol lebih kecil */
        font-size: 0.8rem; /* Font tombol lebih kecil */
    }

    /* General Mobile Tidiness */
    .section-padding, .section-padding-alt { padding: 30px 0; }
    .section-title { font-size: 1.6rem; margin-bottom: 20px; }
    .section-intro { font-size: 0.9rem; margin-bottom: 20px; }
    .page-hero { height: 35vh; /* Tinggi page-hero (halaman lain) disamakan dengan .hero mobile */
        padding: 40px 0; /* Padding vertikal untuk konten */
        min-height: 250px; /* Tambahkan min-height agar gambar dan teks tetap terbaca */
    }

    /* Pengurangan Gap Grid untuk Mobile */
    .stats-container, .services-section .services-grid, .artikel-container,
    .visi-misi-container, .team-grid, .detailed-services-grid,
    .article-list-container, .contact-page-wrapper, .kontak-section .kontak-wrapper {
        gap: 10px; /* Gap lebih kecil untuk kerapatan di mobile */
    }

    /* Penyesuaian Padding di dalam Kartu untuk Mobile */
    .stat-card { padding: 15px; }
    .service-card-content { padding: 15px; }
    .artikel-content { padding: 15px; }
    .team-card { padding: 15px 10px; }
    .contact-form-container { padding: 20px; }

    .nav-links { display: none; }
    .footer-wrapper { flex-direction: column; text-align: center; }
    .visi-misi-container, .team-grid, .detailed-services-grid, .article-list-card, .kontak-wrapper, .contact-page-wrapper { grid-template-columns: 1fr; }
    /* Pastikan tidak ada aturan pemusatan dua kolom di mobile, kembali ke 1 kolom */
    .detailed-services-grid .service-card:last-child:nth-child(2n + 1) { grid-column: auto; max-width: none; }
    .kontak-section .kontak-info,
    .kontak-section .maps-embed {
        text-align: left;
    }
}