/* Reset dasar untuk memastikan konsistensi tampilan */
/* Spacing fix for tukang taman jakarta hero */
.hero-ttj .container h1 {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

.hero-ttj .container p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* Spacing fix for tukang-taman-jakarta hero */
.container h1 {
    margin-bottom: 12px !important;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    size-adjust: 105%;
    /* Sesuaikan ukuran font untuk menghindari perbedaan */
}
@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    size-adjust: 98%;
    /* Sesuaikan ukuran agar proporsional */
}
body {
    background-color: #FAF5F2;
    color: #FFFFFF;
    /* Warna teks utama */
    line-height: 1.6;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
}
/* Responsive Design */
@media (max-width: 768px) {
    #hero h2 {
        font-size: 2rem;
    }
    #hero p {
        font-size: 1rem;
    }
    /* Fix hero-cta buttons stacking on mobile */
    .hero-cta {
        display: flex;
        flex-direction: column;
        gap: 16px;
        align-items: center;
        margin-top: 10px;
    }
    .hero-cta .btn {
        width: 100%;
        max-width: 280px;
        padding: 14px 20px;
        text-align: center;
        margin: 0;
    }
}
/* layanan kami */
#layanan {
    padding: 2rem 0;
}
/* style untuk product pada home/index */
#produk {
    padding: 2rem 0;
}
/* style tombol lihat seluruh produk */
.lihat-semua {
    text-align: center;
    /* Pusatkan tombol */
    margin-top: 2rem;
    /* Jarak dari daftar produk */
}
/* style untuk list artikel di home */
#artikel {
    padding: 2rem 0;
}
/* CSS untuk halaman produk.php */
/* Tambahan CSS khusus untuk halaman produk */
.product-page {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
}
/* Section Header Styling */
.section-header {
    text-align: center;
    margin-bottom: 50px;
    padding: 50px 30px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.25);
    position: relative;
    overflow: hidden;
}
/* Responsive Styles */
@media (max-width: 768px) {
    .product-page {
        flex-direction: column;
    }
    .filter-sidebar {
        order: 2;
    }
    .product-controls {
        flex-direction: column;
        align-items: stretch;
    }
    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 20px;
        padding: 20px 0;
    }
    .product-card {
        border-radius: 12px;
    }
    .product-image {
        height: 200px;
    }
    .product-image-container {
        border-radius: 12px 12px 0 0;
    }
    .product-info {
        padding: 20px;
    }
    .product-info h3 {
        font-size: 1.1em;
        min-height: 50px;
    }
    .product-price {
        font-size: 1.2em;
    }
    .detail-button {
        margin: 16px 20px 20px 20px;
        padding: 12px 20px;
        font-size: 0.85em;
        border-radius: 8px;
    }
}
/* WhatsApp Button */
.whatsapp-btn {
    display: inline-flex;
    align-items: center;
    background: #25D366;
    color: white;
    padding: 12px 20px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    transition: background 0.3s;
}
/* Materials and Plants Grid */
.materials-grid,
.plants-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 20px;
    margin-top: 20px;
}
/* end of CSS for detail-produk.php */
/* start of CSS for detail-artikel.php */
.article-detail-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}
/* Article Layout with Sidebar */
.article-layout {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 40px;
    margin-top: 20px;
}
/* Breadcrumb Navigation */
.breadcrumb {
    margin-bottom: 30px;
    padding: 20px;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
/* Article Container */
.article-detail-container {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin-bottom: 40px;
    overflow: hidden;
}
/* Article Header */
.article-header {
    padding: 40px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-align: center;
}
/* Article Content */
.article-content {
    padding: 40px;
    font-size: 1.1rem;
    line-height: 1.8;
    color: #2c3e50;
}
/* Article Footer */
.article-footer {
    padding: 40px;
    background: #f8f9fa;
    border-top: 1px solid #eee;
}
/* Share Buttons */
.article-share h4 {
    margin: 0 0 15px 0;
    color: #2c3e50;
    font-size: 1.1rem;
}
/* Related Articles */
.related-articles {
    margin-bottom: 40px;
}
/* Sidebar Related Articles */
.related-articles-sidebar {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    padding: 30px;
    margin-bottom: 30px;
}
/* Reset dasar untuk memastikan konsistensi tampilan */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    size-adjust: 105%;
    /* Sesuaikan ukuran font untuk menghindari perbedaan */
}

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    size-adjust: 98%;
    /* Sesuaikan ukuran agar proporsional */
}


body {
    background-color: #FAF5F2;
    color: #FFFFFF;
    /* Warna teks utama */
    line-height: 1.6;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
}

p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    /* Regular */
    font-size: 16px;
    /* Ukuran default */
    color: #2E2E2E;
    /* Warna teks lebih gelap */
    line-height: 1.8;
    /* Jarak antar baris lebih nyaman */
    margin-bottom: 15px;
    /* Jarak antar paragraf */

}

header {
    background: #FFFFFF;
    color: #1b6a19;
    padding: 20px;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 700;
}

header img {
    display: block;
    margin: 0 auto 10px;
    max-width: 100px;
}

h1 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    min-height: 2.5em;
    /* Pastikan ukuran tetap */
}

h2,
h3 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}

/* Tombol Hamburger */
.menu-toggle {
    display: none;
    font-size: 24px;
    background: rgba(255, 255, 255, 0.8);
    /* Warna putih transparan */
    border: none;
    color: #1b6a19;
    /* Hijau Tua */
    cursor: pointer;
    padding: 10px;
    border-radius: 5px;
    transition: background 0.3s, transform 0.3s;
    margin-top: 10px;
}

/* Hover Effect */
.menu-toggle:hover {
    background: rgba(255, 255, 255, 1);
    /* Warna lebih terang saat hover */
    transform: scale(1.1);
    /* Sedikit membesar */
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 10px 0;
}

nav ul li {
    display: inline;
}

nav ul li a {
    color: #4D4D4D;
    /* Warna Font Nav Default */
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    padding: 10px 15px;
    transition: background 0.3s, color 0.3s;
}

nav ul li a:hover,
nav ul li a:focus {
    background: #1b6a19;
    color: white;
    border-radius: 5px;
}

nav ul li a.active {
    background: #1b6a19;
    color: #FFFFFF;
    border-radius: 5px;
    font-weight: bold;
}

main {
    padding: 20px;
    text-align: center;
}

section {
    margin-bottom: 40px;
    padding: 20px;
    background: #FFFFFF;
    /* Latar belakang putih */
    color: #2E2E2E;
    /* Warna teks utama */
    border-radius: 8px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

#hero {
    position: relative;
    height: 100vh;
    min-height: 600px;
    background: url('../img/hero-background.jpg') no-repeat center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    padding: 0 20px;
}

.hero-content p {
    font-size: 1.2rem;
    color: #ffffff;
    margin-bottom: 30px;
    /* Efek background modern */
    background: rgba(4, 4, 4, 0.124);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    padding: 12px 24px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.073);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: inline-block;
    margin: 0 auto 30px;
}

#hero h2 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    line-height: 1.2;
}

#hero p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.btn {
    display: inline-block;
    background: #4CAF50;
    /* Hijau Cerah */
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background 0.3s;
    font-family: 'Poppins', sans-serif;
}

.btn:hover {
    background: #1b6a19;
    color: white;
}

/* Responsive Design */
@media (max-width: 768px) {
    #hero h2 {
        font-size: 2rem;
    }

    #hero p {
        font-size: 1rem;
    }

    /* Fix hero-cta buttons stacking on mobile */
    .hero-cta {
        display: flex;
        flex-direction: column;
        gap: 16px;
        align-items: center;
        margin-top: 10px;
    }

    .hero-cta .btn {
        width: 100%;
        max-width: 280px;
        padding: 14px 20px;
        text-align: center;
        margin: 0;
    }
}



.gallery {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.gallery img {
    width: 100%;
    max-width: 300px;
    border-radius: 5px;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.gallery img:hover {
    transform: scale(1.05);
}

footer {
    background: #1b6a19;
    /* Hijau Tua */
    color: #FFFFFF;
    /* Warna teks putih */
    text-align: center;
    padding: 15px;
}

footer p {
    color: #FFFFFF;
    /* Warna teks putih khusus untuk footer */
}

/* Responsive Design */
@media (max-width: 768px) {
    .menu-toggle {
        display: block;
        /* Tampilkan di layar kecil */
    }

    nav ul {
        display: none;
        flex-direction: column;
        text-align: center;
        background: #1b6a19;
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        z-index: 1000;
        padding: 10px 0;
    }

    nav ul.active {
        display: flex;
        /* Tampilkan menu saat hamburger diklik */
    }

    nav ul li {
        padding: 15px 0;
    }

    nav ul li a {
        color: #FFFFFF;
        /* Warna teks putih */
        font-size: 18px;
        text-decoration: none;
        transition: color 0.3s;
    }

    nav ul li a:hover {
        color: #FFD700;
        /* Warna kuning emas saat hover */
    }
}

/* layanan kami */
#layanan {
    padding: 2rem 0;
}

.layanan-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    padding: 1rem;
    max-width: 1200px;
    margin: 0 auto;
}

.layanan-card {
    background: #fff;
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.layanan-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.layanan-card img {
    width: 100%;
    /* Lebar gambar mengisi container */
    height: 200px;
    /* Tinggi gambar tetap */
    object-fit: cover;
    /* Memastikan gambar tidak terdistorsi */
    border-radius: 10px;
    /* Memberikan sudut melengkung */
}

.layanan-card h3 {
    font-size: 1.5rem;
    margin: 1rem 0;
    color: #2c3e50;
}

.layanan-card p {
    font-size: 1rem;
    margin-bottom: 1.5rem;
    color: #555;
}

.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background-color: #4CAF50;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background: #1b6a19;
    color: white;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .layanan-card {
        width: calc(50% - 20px);
        /* 2 card per baris di tablet */
    }
}

@media (max-width: 480px) {
    .layanan-card {
        width: 100%;
        /* 1 card per baris di mobile */
    }

    .layanan-card img {
        height: 150px;
        /* Tinggi gambar lebih kecil di mobile */
    }
}


/* style untuk product pada home/index */
#produk {
    padding: 2rem 0;
}

.product-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    /* Untuk membuat produk berada di tengah */
}

.product-item {
    background: #fff;
    padding: 1rem;
    /* Padding yang lebih kecil */
    border-radius: 10px;
    /* Sudut melengkung */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Shadow yang lebih ringan */
    text-align: left;
    /* Teks rata kiri */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: calc(33.333% - 20px);
    /* 3 card per baris di desktop */
    box-sizing: border-box;
    position: relative;
    /* Wajib untuk posisi absolut label */
    overflow: hidden;
    /* Pastikan gambar tidak keluar dari card */
}

.product-item:hover {
    transform: translateY(-5px);
    /* Efek hover: naik sedikit */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    /* Efek shadow lebih besar saat hover */
}

.product-item img {
    width: 100%;
    /* Gambar mengisi lebar card */
    height: 200px;
    /* Tinggi gambar tetap */
    object-fit: cover;
    /* Pastikan gambar tidak terdistorsi */
    border-radius: 10px 10px 0 0;
    /* Sudut melengkung hanya di bagian atas */
    margin-bottom: 1rem;
    /* Jarak antara gambar dan teks */
}

.product-item h3 {
    font-size: 1.25rem;
    margin: 1rem 1rem 0.5rem;
    /* Padding atas, kanan, bawah, kiri */
    color: #333;
    /* Warna teks judul */
}

.product-item p {
    font-size: 0.9rem;
    color: #666;
    /* Warna teks deskripsi */
    line-height: 1.5;
    margin: 0 1rem 1rem;
    /* Padding atas, kanan, bawah, kiri */
}

.category-label {
    background: #4CAF50;
    /* Warna latar belakang */
    color: #fff;
    /* Warna teks */
    padding: 0.5rem 1rem;
    /* Padding */
    border-radius: 5px;
    /* Sudut melengkung */
    font-size: 0.9rem;
    /* Ukuran font */
    font-weight: bold;
    /* Tebal font */
    position: absolute;
    /* Posisi absolut */
    top: 1rem;
    /* Jarak dari atas */
    left: 1rem;
    /* Jarak dari kiri */
    z-index: 1;
    /* Pastikan label di atas elemen lain */
}

/* Responsive Styles */
@media (max-width: 768px) {
    .product-item {
        width: calc(50% - 20px);
        /* 2 card per baris di tablet */
    }
}

@media (max-width: 480px) {
    .product-item {
        width: 100%;
        /* 1 card per baris di mobile */
    }

    .product-item img {
        height: 150px;
        /* Tinggi gambar lebih kecil di mobile */
    }
}

/* style tombol lihat seluruh produk */
.lihat-semua {
    text-align: center;
    /* Pusatkan tombol */
    margin-top: 2rem;
    /* Jarak dari daftar produk */
}

.btn-lihat-semua {
    background: #4CAF50;
    /* Warna latar belakang */
    color: #fff;
    /* Warna teks */
    padding: 0.75rem 1.5rem;
    /* Padding */
    border-radius: 5px;
    /* Sudut melengkung */
    font-size: 1rem;
    /* Ukuran font */
    font-weight: bold;
    /* Tebal font */
    text-decoration: none;
    /* Hilangkan garis bawah default */
    transition: background 0.3s ease, transform 0.3s ease;
    /* Animasi transisi */
    display: inline-block;
    /* Agar padding dan margin bekerja */
}

.btn-lihat-semua:hover {
    background: #1b6a19;
    color: white;
}

.btn-lihat-semua:active {
    transform: translateY(0);
    /* Kembalikan ke posisi semula saat diklik */
}

/* style untuk list artikel di home */
#artikel {
    padding: 2rem 0;
}

.article-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    /* Jarak antar card */
    justify-content: center;
    /* Pusatkan card */
}

.article-list article {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    /* Pastikan gambar tidak keluar dari card */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: calc(33.333% - 20px);
    /* 3 card per baris di desktop */
    max-width: 400px;
    /* Lebar maksimum card */
    box-sizing: border-box;
}

.article-list article:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.article-list article img.article-image {
    width: 100%;
    /* Gambar mengisi lebar card */
    height: 200px;
    /* Tinggi gambar tetap */
    object-fit: cover;
    /* Pastikan gambar tidak terdistorsi */
    border-radius: 10px 10px 0 0;
    /* Sudut melengkung hanya di bagian atas */
}

/* Label kategori artikel */
.article-category {
    display: inline-block;
    background: #00b98e;
    color: white;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: 600;
    margin: 1rem 1rem 0.5rem;
    text-transform: uppercase;
}

/* Tanggal artikel */
.article-date {
    font-size: 0.85rem;
    color: #888;
    margin: 0 1rem 0.5rem;
}

.article-date small {
    font-weight: 400;
}

.article-list article h3 {
    font-size: 1.25rem;
    margin: 0.5rem 1rem 0.5rem;
    /* Padding atas, kanan, bawah, kiri */
    color: #333;
}

.article-list article h3 a {
    color: inherit;
    text-decoration: none;
}

.article-list article h3 a:hover {
    color: #4CAF50;
}

.article-list article p {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.5;
    margin: 0 1rem 1rem;
    /* Padding atas, kanan, bawah, kiri */
}

@media (max-width: 768px) {
    .article-list article {
        width: calc(50% - 20px);
        /* 2 card per baris di tablet */
    }
}

@media (max-width: 480px) {
    .article-list article {
        width: 100%;
        /* 1 card per baris di mobile */
    }

    .article-list article img.article-image {
        height: 150px;
        /* Tinggi gambar lebih kecil di mobile */
    }
}

/* CSS untuk halaman produk.php */
/* Tambahan CSS khusus untuk halaman produk */
.product-page {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
}

.filter-sidebar {
    flex: 0 0 250px;
    background: #f5f5f5;
    padding: 20px;
    border-radius: 8px;
}

.product-main-content {
    flex: 1;
    min-width: 300px;
}

.product-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 20px;
    align-items: center;
}

.search-box {
    flex: 1;
    min-width: 200px;
    position: relative;
}

.search-box input {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.sorting-options {
    display: flex;
    gap: 10px;
    align-items: center;
}

.sorting-options select {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* Section Header Styling */
.section-header {
    text-align: center;
    margin-bottom: 50px;
    padding: 50px 30px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.25);
    position: relative;
    overflow: hidden;
}

.section-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255,255,255,0.1) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.1) 75%);
    background-size: 20px 20px;
    animation: slide 20s linear infinite;
}

@keyframes slide {
    0% {
        transform: translateX(-20px);
    }
    100% {
        transform: translateX(0);
    }
}

.section-header h1 {
    font-size: 2.8rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 20px 0;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 1;
}

.section-subtitle {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.8;
    position: relative;
    z-index: 1;
    font-weight: 400;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    padding: 30px 0;
    margin-top: 20px;
}

.product-card {
    background: #ffffff;
    border: none;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.product-link {
    text-decoration: none;
    color: inherit;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.product-image-container {
    position: relative;
    overflow: hidden;
    background: linear-gradient(45deg, #f8f9fa, #e9ecef);
    border-radius: 16px 16px 0 0;
}

.product-image {
    width: 100%;
    height: 240px;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s ease;
    border-radius: 16px 16px 0 0;
    opacity: 0;
}

.product-image.loaded {
    opacity: 1;
}

.product-image.error {
    opacity: 0.7;
    filter: grayscale(100%);
}

.product-card:hover .product-image {
    transform: scale(1.08);
}

.product-info {
    padding: 24px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    background: #ffffff;
}

.product-category {
    display: inline-block;
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    color: white;
    padding: 8px 16px;
    border-radius: 25px;
    font-size: 0.75em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
    align-self: flex-start;
    box-shadow: 0 4px 12px rgba(46, 204, 113, 0.25);
}

.product-info h3 {
    font-size: 1.25em;
/* ===============
   Decorative Frames
   Reusable wood frame + optional roots overlay
   Usage:
   <div class="frame-wood">
     <img src="..." alt="...">
     <svg class="roots-overlay" viewBox="0 0 1000 600" preserveAspectRatio="none" aria-hidden="true">
       <!-- optional root strokes -->
       <path d="M40 520 C140 500, 160 460, 220 430 C260 410, 320 400, 360 360 C400 320, 420 280, 470 260 C520 240, 560 260, 600 240 C650 215, 700 170, 760 180" />
       <path d="M960 90 C900 120, 860 160, 830 210 C800 260, 770 300, 700 320 C640 335, 600 360, 560 400 C520 440, 470 470, 420 490" />
       <path d="M120 80 C180 120, 220 160, 260 210 C300 260, 340 280, 400 300 C460 320, 520 340, 560 380 C600 420, 640 460, 720 500" />
     </svg>
   </div>
================ */

.frame-wood {
    position: relative;
    display: inline-block;
    padding: 18px; /* frame width */
    border-radius: 12px;
    background: linear-gradient(135deg, #7b4b27 0%, #a26d39 52%, #6a3f1e 100%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.frame-wood::before {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 8px;
    pointer-events: none;
    background:
        repeating-linear-gradient(22deg, rgba(255, 255, 255, 0.05) 0 9px, rgba(0, 0, 0, 0.06) 9px 18px);
    mix-blend-mode: overlay;
    opacity: 0.35; /* subtle wood grain */
}

.frame-wood > img,
.frame-wood > picture,
.frame-wood > .frame-content {
    display: block;
    border-radius: 8px;
}

.roots-overlay {
    position: absolute;
    inset: 18px; /* align with inner edge of frame */
    pointer-events: none;
    mix-blend-mode: multiply;
    opacity: 0.18;
}

.roots-overlay path {
    fill: none;
    stroke: #184e28; /* dark mossy green */
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 640px) {
    .frame-wood { padding: 12px; }
    .roots-overlay { inset: 12px; }
}
    font-weight: 700;
    margin: 0 0 12px 0;
    color: #2c3e50;
    line-height: 1.4;
    min-height: 60px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.3s ease;
}

.product-card:hover .product-info h3 {
    color: #3498db;
}

.product-info p {
    font-size: 0.9em;
    color: #7f8c8d;
    line-height: 1.5;
    margin: 0 0 12px 0;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-description {
    font-size: 0.95em;
    color: #6c757d;
    line-height: 1.6;
    margin: 0 0 16px 0;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 400;
}

.product-price {
    font-weight: 800;
    color: #e74c3c;
    font-size: 1.35em;
    margin: 12px 0 0 0;
    text-shadow: 0 1px 2px rgba(231, 76, 60, 0.1);
}

.detail-button {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    border: none;
    padding: 14px 24px;
    margin: 20px 24px 24px 24px;
    border-radius: 12px;
    text-decoration: none;
    text-align: center;
    font-weight: 700;
    font-size: 0.9em;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 16px rgba(52, 152, 219, 0.25);
}

.detail-button:hover {
    background: linear-gradient(135deg, #2980b9, #1f5a7a);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(52, 152, 219, 0.35);
}

/* Loading animation untuk gambar */
.product-image {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
}

.product-image[src] {
    background: none;
}

/* Badge untuk produk baru */
.product-card[data-new="true"]::before {
    content: 'BARU';
    position: absolute;
    top: 16px;
    right: 16px;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 0.7em;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 3;
    box-shadow: 0 4px 16px rgba(231, 76, 60, 0.35);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* Skeleton loading untuk card */
.product-card.loading {
    pointer-events: none;
    animation: cardPulse 1.5s ease-in-out infinite;
}

.product-card.loading .product-image {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

.product-card.loading .product-info h3,
.product-card.loading .product-info .product-description,
.product-card.loading .product-price {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    color: transparent;
    border-radius: 6px;
}

@keyframes cardPulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Efek loading untuk gambar yang belum dimuat */
.product-image[src=""] {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

.filter-group {
    margin-bottom: 20px;
}

.filter-group h3 {
    margin-bottom: 10px;
    color: #2c3e50;
}

.filter-option {
    margin-bottom: 8px;
}

.filter-option label {
    margin-left: 5px;
    cursor: pointer;
}

.pagination {
    display: flex;
    justify-content: center;
    margin-top: 40px;
    gap: 8px;
    flex-wrap: wrap;
}

.pagination a,
.pagination span {
    padding: 12px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    text-decoration: none;
    color: #666;
    font-weight: 500;
    transition: all 0.3s ease;
    min-width: 44px;
    text-align: center;
}

.pagination a:hover {
    background: #f8f9fa;
    border-color: #2ecc71;
    color: #2ecc71;
    transform: translateY(-2px);
}

.pagination .current {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    color: white;
    border-color: #2ecc71;
    box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
}

.pagination span:not(.current) {
    background: #f8f9fa;
    color: #ccc;
    cursor: not-allowed;
}

.no-products {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 40px;
    color: #6c757d;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    font-size: 1.1em;
    font-weight: 500;
}

@media (max-width: 768px) {
    .product-page {
        flex-direction: column;
    }

    .filter-sidebar {
        order: 2;
    }

    .product-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 20px;
        padding: 20px 0;
    }

    .product-card {
        border-radius: 12px;
    }

    .product-image {
        height: 200px;
    }

    .product-image-container {
        border-radius: 12px 12px 0 0;
    }

    .product-info {
        padding: 20px;
    }

    .product-info h3 {
        font-size: 1.1em;
        min-height: 50px;
    }

    .product-price {
        font-size: 1.2em;
    }

    .detail-button {
        margin: 16px 20px 20px 20px;
        padding: 12px 20px;
        font-size: 0.85em;
        border-radius: 8px;
    }

    .section-header {
        padding: 40px 20px;
        margin-bottom: 35px;
        border-radius: 16px;
    }

    .section-header h1 {
        font-size: 2.2rem;
    }

    .section-subtitle {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .product-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .product-card {
        margin: 0 4px;
    }

    .product-image {
        height: 200px;
    }

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

    .section-subtitle {
        font-size: 0.95rem;
    }
}

.reset-btn {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    background-color: #e74c3c;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s;
}

.reset-btn:hover {
    background-color: #c0392b;
}

/* end of CSS for produk.php */


/* start of CSS for detail-produk.php */
/* WhatsApp Button */
.whatsapp-btn {
    display: inline-flex;
    align-items: center;
    background: #25D366;
    color: white;
    padding: 12px 20px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    transition: background 0.3s;
}

.whatsapp-btn:hover {
    background: #128C7E;
}

.whatsapp-btn img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

/* Materials and Plants Grid */
.materials-grid,
.plants-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.material-item,
.plant-item {
    border: 1px solid #eee;
    padding: 15px;
    text-align: center;
    border-radius: 4px;
}

.material-item img,
.plant-item img {
    max-width: 100%;
    height: 100px;
    object-fit: contain;
    margin-bottom: 10px;
}

.material-item h5,
.plant-item h5 {
    margin: 10px 0 5px;
    font-size: 16px;
}

.material-item p,
.plant-item p {
    color: #2e8b57;
    font-weight: bold;
    margin: 0;
    font-size: 14px;
}

/* end of CSS for detail-produk.php */

/* start of CSS for detail-artikel.php */
.article-detail-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Article Layout with Sidebar */
.article-layout {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 40px;
    margin-top: 20px;
}

.article-main {
    min-width: 0; /* Prevents grid overflow */
}

.article-sidebar {
    position: sticky;
    top: 20px;
    height: fit-content;
}

/* Breadcrumb Navigation */
.breadcrumb {
    margin-bottom: 30px;
    padding: 20px;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.breadcrumb ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    gap: 12px;
}

.breadcrumb li {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
}

.breadcrumb li:not(:last-child)::after {
    content: '›';
    margin-left: 12px;
    color: #6c757d;
    font-weight: 600;
    font-size: 1.2em;
}

.breadcrumb a {
    color: #3498db;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    padding: 6px 12px;
    border-radius: 6px;
    background: rgba(52, 152, 219, 0.1);
}

.breadcrumb a:hover {
    color: #2980b9;
    background: rgba(52, 152, 219, 0.2);
    transform: translateY(-1px);
}

.breadcrumb span {
    color: #495057;
    font-weight: 600;
    padding: 6px 12px;
    background: rgba(73, 80, 87, 0.1);
    border-radius: 6px;
}

/* Article Container */
.article-detail-container {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin-bottom: 40px;
    overflow: hidden;
}

/* Article Header */
.article-header {
    padding: 40px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-align: center;
}

.article-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.article-date {
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

.article-category {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.article-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin: 0 0 20px 0;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    color: white;
}

.article-excerpt {
    font-size: 1.2rem;
    line-height: 1.6;
    margin: 0;
    color: rgba(255, 255, 255, 0.95);
    max-width: 800px;
    margin: 0 auto;
}

/* Featured Image */
.article-featured-image {
    position: relative;
    overflow: hidden;
    max-height: 400px;
}

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

/* Article Content */
.article-content {
    padding: 40px;
    font-size: 1.1rem;
    line-height: 1.8;
    color: #2c3e50;
}

.article-content h2,
.article-content h3,
.article-content h4 {
    color: #2c3e50;
    margin-top: 2em;
    margin-bottom: 1em;
    font-weight: 700;
}

.article-content h2 {
    font-size: 1.8rem;
    border-bottom: 3px solid #3498db;
    padding-bottom: 10px;
}

.article-content h3 {
    font-size: 1.5rem;
    color: #3498db;
}

.article-content h4 {
    font-size: 1.3rem;
}

.article-content p {
    margin-bottom: 1.5em;
}

.article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 20px 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.article-content blockquote {
    border-left: 4px solid #3498db;
    margin: 2em 0;
    padding: 1em 2em;
    background: #f8f9fa;
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: #6c757d;
}

.article-content ul,
.article-content ol {
    margin: 1.5em 0;
    padding-left: 2em;
}

.article-content li {
    margin-bottom: 0.5em;
}

/* Article Footer */
.article-footer {
    padding: 40px;
    background: #f8f9fa;
    border-top: 1px solid #eee;
}

.article-tags {
    margin-bottom: 30px;
}

.article-tags h4 {
    margin: 0 0 15px 0;
    color: #2c3e50;
    font-size: 1.1rem;
}

.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag {
    background: #e3f2fd;
    color: #1976d2;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid #bbdefb;
}

/* Share Buttons */
.article-share h4 {
    margin: 0 0 15px 0;
    color: #2c3e50;
    font-size: 1.1rem;
}

.share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    min-width: 120px;
}

.share-btn::before {
    font-size: 1.1em;
    font-weight: 900;
}

.share-btn.facebook {
    background: #1877f2;
    color: white;
}

.share-btn.facebook::before {
    content: '📘';
}

.share-btn.facebook:hover {
    background: #166fe5;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(24, 119, 242, 0.3);
}

.share-btn.twitter {
    background: #1da1f2;
    color: white;
}

.share-btn.twitter::before {
    content: '🐦';
}

.share-btn.twitter:hover {
    background: #0d8bd9;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(29, 161, 242, 0.3);
}

.share-btn.whatsapp {
    background: #25d366;
    color: white;
}

.share-btn.whatsapp::before {
    content: '💬';
}

.share-btn.whatsapp:hover {
    background: #20bd5a;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}

.share-btn.copy {
    background: #6c757d;
    color: white;
}

.share-btn.copy::before {
    content: '📋';
}

.share-btn.copy:hover {
    background: #5a6268;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
}

/* Related Articles */
.related-articles {
    margin-bottom: 40px;
}

.related-articles h2 {
    text-align: center;
    margin-bottom: 30px;
    color: #2c3e50;
    font-size: 2rem;
    font-weight: 700;
}

.related-articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.related-article-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.related-article-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.related-article-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.related-article-image {
    height: 180px;
    overflow: hidden;
}

.related-article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.related-article-card:hover .related-article-image img {
    transform: scale(1.05);
}

.related-article-content {
    padding: 20px;
}

.related-article-content h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 10px 0;
    color: #2c3e50;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-article-content p {
    font-size: 0.9rem;
    color: #6c757d;
    line-height: 1.5;
    margin: 0 0 10px 0;
}

.related-article-content time {
    font-size: 0.8rem;
    color: #8a8a8a;
    font-weight: 500;
}

/* Sidebar Related Articles */
.related-articles-sidebar {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    padding: 30px;
    margin-bottom: 30px;
}

.related-articles-sidebar h3 {
    color: #2c3e50;
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 25px 0;
    text-align: center;
    border-bottom: 3px solid #3498db;
    padding-bottom: 10px;
}

.related-articles-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.related-article-item {
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 20px;
}

.related-article-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.related-article-item .related-article-link {
    display: flex;
    gap: 15px;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

.related-article-item:hover .related-article-link {
    transform: translateX(5px);
}

.related-article-thumb {
    width: 80px;
    height: 60px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: #f8f9fa;
}

.related-article-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.related-article-item:hover .related-article-thumb img {
    transform: scale(1.1);
}

.related-article-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.related-article-info h4 {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: #2c3e50;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.3s ease;
}

.related-article-item:hover .related-article-info h4 {
    color: #3498db;
}

.related-article-info time {
    font-size: 0.8rem;
    color: #8a8a8a;
    font-weight: 500;
}

/* Sidebar CTA Widget */
.sidebar-cta {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.cta-widget {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    padding: 30px;
    text-align: center;
    color: white;
}

.cta-widget h3 {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 15px 0;
    color: white;
}

.cta-widget p {
    font-size: 0.95rem;
    margin: 0 0 20px 0;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.5;
}

.cta-widget .cta-btn {
    background: transparent;
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    display: inline-block;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.9);
}

.cta-widget .cta-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

/* Call to Action */
.article-cta {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    padding: 60px 40px;
    border-radius: 16px;
    text-align: center;
    color: white;
    margin-bottom: 40px;
}

.cta-content h2 {
    font-size: 2.2rem;
    font-weight: 700;
    margin: 0 0 15px 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.cta-content p {
    font-size: 1.2rem;
    margin: 0 0 25px 0;
    opacity: 0.9;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta-btn {
    background: white;
    color: #2ecc71;
    padding: 15px 30px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    display: inline-block;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.cta-btn:hover {
    background: #f8f9fa;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

/* Bottom CTA with Multiple Buttons */
.article-bottom-cta {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 60px 40px;
    border-radius: 16px;
    text-align: center;
    color: white;
    margin-bottom: 40px;
}

.article-bottom-cta .cta-content h2 {
    font-size: 2.2rem;
    font-weight: 700;
    margin: 0 0 15px 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    color: white;
}

.article-bottom-cta .cta-content p {
    font-size: 1.2rem;
    margin: 0 0 30px 0;
    color: rgba(255, 255, 255, 0.95);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-buttons .cta-btn {
    padding: 15px 30px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    transition: all 0.3s ease;
    min-width: 160px;
    text-align: center;
}

.cta-buttons .cta-btn.primary {
    background: transparent;
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.85);
    box-shadow: none;
}

.cta-buttons .cta-btn.primary:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-3px);
    box-shadow: none;
}

.cta-buttons .cta-btn.secondary {
    background: transparent;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.8);
    box-shadow: none;
}

.cta-buttons .cta-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: white;
    transform: translateY(-3px);
}

/* Responsive Design */
@media (max-width: 768px) {
    .article-detail-main {
        padding: 15px;
    }

    .article-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .article-sidebar {
        position: static;
        order: 2;
    }

    .article-header {
        padding: 30px 20px;
    }

    .article-title {
        font-size: 2rem;
    }

    .article-excerpt {
        font-size: 1.1rem;
    }

    .article-content {
        padding: 30px 20px;
        font-size: 1rem;
    }

    .article-footer {
        padding: 30px 20px;
    }

    .breadcrumb {
        padding: 15px;
    }

    .breadcrumb ol {
        font-size: 0.85rem;
    }

    .share-buttons {
        justify-content: center;
        flex-wrap: wrap;
    }

    .share-btn {
        min-width: 100px;
        font-size: 0.8rem;
        padding: 10px 14px;
    }

    .related-articles-sidebar {
        padding: 25px 20px;
    }

    .related-articles-sidebar h3 {
        font-size: 1.2rem;
    }

    .related-article-thumb {
        width: 70px;
        height: 50px;
    }

    .related-article-info h4 {
        font-size: 0.9rem;
    }

    .cta-widget {
        padding: 25px 20px;
    }

    .article-bottom-cta {
        padding: 40px 20px;
    }

    .article-bottom-cta .cta-content h2 {
        font-size: 1.8rem;
    }

    .article-bottom-cta .cta-content p {
        font-size: 1.1rem;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .cta-buttons .cta-btn {
        width: 100%;
        max-width: 280px;
    }
}

@media (max-width: 480px) {
    .article-title {
        font-size: 1.8rem;
    }

    .article-meta {
        flex-direction: column;
        gap: 10px;
    }

    .article-content h2 {
        font-size: 1.5rem;
    }

    .article-content h3 {
        font-size: 1.3rem;
    }

    .share-buttons {
        flex-direction: column;
    }

    .share-btn {
        justify-content: center;
        width: 100%;
    }

    .related-articles-list {
        gap: 15px;
    }

    .related-article-item .related-article-link {
        flex-direction: column;
        gap: 10px;
    }

    .related-article-thumb {
        width: 100%;
        height: 120px;
    }

    .breadcrumb {
        padding: 12px;
    }

    .breadcrumb li {
        font-size: 0.8rem;
    }
}
/* end of CSS for detail-artikel.php */

/* start of CSS for artikel.php */
.article-page {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 30px;
}

.article-main-content {
    flex: 1;
    min-width: 300px;
}

.article-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px;
    align-items: center;
}

.article-count {
    font-weight: 600;
    color: #6c757d;
    font-size: 0.95rem;
}

/* Article Grid */
.article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.article-card {
    background: #ffffff;
    border: none;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.article-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.article-link {
    text-decoration: none;
    color: inherit;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* Article Image */
.article-image-container {
    position: relative;
    overflow: hidden;
    background: linear-gradient(45deg, #f8f9fa, #e9ecef);
    height: 220px;
}

.article-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.article-card:hover .article-image {
    transform: scale(1.08);
}

.article-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
}

.article-placeholder svg {
    width: 80px;
    height: 60px;
    opacity: 0.5;
}

/* Article Info */
.article-info {
    padding: 24px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.article-category {
    display: inline-block;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 8px 16px;
    border-radius: 25px;
    font-size: 0.75em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
    align-self: flex-start;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.25);
}

.article-info h3 {
    font-size: 1.25em;
    font-weight: 700;
    margin: 0 0 12px 0;
    color: #2c3e50;
    line-height: 1.4;
    min-height: 60px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.3s ease;
}

.article-card:hover .article-info h3 {
    color: #667eea;
}

.article-description {
    font-size: 0.95em;
    color: #6c757d;
    line-height: 1.6;
    margin: 0 0 16px 0;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.article-date {
    font-size: 0.85em;
    color: #8a8a8a;
    font-weight: 500;
    margin-top: auto;
}

/* Read More Button */
.read-more-button {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    padding: 14px 24px;
    margin: 20px 24px 24px 24px;
    border-radius: 12px;
    text-decoration: none;
    text-align: center;
    font-weight: 700;
    font-size: 0.9em;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.25);
}

.read-more-button:hover {
    background: linear-gradient(135deg, #5a67d8, #6b46c1);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.35);
}

/* No Articles */
.no-articles {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 40px;
    color: #6c757d;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    font-size: 1.1em;
    font-weight: 500;
}

/* Responsive Design */
@media (max-width: 768px) {
    .article-page {
        flex-direction: column;
        gap: 20px;
    }

    .filter-sidebar {
        order: 2;
    }

    .article-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .article-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 20px;
    }

    .article-card {
        border-radius: 12px;
    }

    .article-image-container {
        height: 200px;
    }

    .article-info {
        padding: 20px;
    }

    .article-info h3 {
        font-size: 1.1em;
        min-height: 50px;
    }

    .read-more-button {
        margin: 16px 20px 20px 20px;
        padding: 12px 20px;
        font-size: 0.85em;
        border-radius: 8px;
    }
}

@media (max-width: 480px) {
    .article-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .article-card {
        margin: 0 4px;
    }

    /* On small screens keep a consistent 16:9 media area and crop via object-fit */
    .article-image-container {
        height: auto;
        aspect-ratio: 16 / 9;
        max-height: none;
    }

    .article-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        max-width: 100%;
    }
}
/* end of CSS for artikel.php */

/*CSS Back to TOP Start*/
#backToTop {
  display: none; /* Awalnya tersembunyi */
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 99;
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  background-color: #1b6a19; /* Warna hijau sesuai tema */
  color: white;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  transition: all 0.3s;
}

#backToTop:hover {
  background-color: #0f4d0c; /* Warna lebih gelap saat hover */
  transform: translateY(-3px);
}
/*CSS Back to TOP End*/

/*WA Button Start*/
#whatsappButton {
  position: fixed;
  bottom: 100px; /* Sesuaikan jarak dari tombol back-to-top */
  right: 30px;
  z-index: 99;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #25D366; /* Warna hijau WhatsApp */
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

#whatsappButton:hover {
  background: #128C7E; /* Warna hover WhatsApp */
  transform: scale(1.1);
}

#whatsappButton img {
  width: 30px;
  height: 30px;
}
/*WA Button End*/

@media (max-width: 768px) {
  /* WhatsApp Button */
  #whatsappButton {
    width: 48px;
    height: 48px;
    bottom: 20px;
    right: 20px;
  }

  #whatsappButton img {
    width: 26px;
    height: 26px;
  }

  /* Back to Top Button */
  #backToTop {
    width: 45px;
    height: 45px;
    bottom: 80px; /* Jarak 60px dari WhatsApp button */
    right: 20px;
    font-size: 18px;
  }

  /* Efek hover yang lebih kecil di mobile */
  #whatsappButton:hover,
  #backToTop:hover {
    transform: scale(1.05); /* Efek lebih subtle di mobile */
  }
}

/* ===== CSS KHUSUS HALAMAN TAMAN (taman.css) ===== */

/* 1. HERO SECTION KHUSUS TAMAN */
#hero-taman {
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), 
              url('../img/taman-tropis.webp') center/cover no-repeat;
  min-height: 80vh;
  display: flex;
  align-items: center;
  text-align: center;
  color: white;
  position: relative;
}

#hero-taman .hero-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
}

#hero-taman h1 {
  font-size: 2.8rem;
  margin-bottom: 1.5rem;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  line-height: 1.2;
}

#hero-taman p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

/* ===== CSS KHUSUS HALAMAN VERTICAL GARDEN ===== */

/* 1. HERO SECTION VERTICAL GARDEN */
#hero-vertical {
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), 
              url('../img/hero-vertical-garden.jpg') center/cover no-repeat;
  min-height: 80vh;
  display: flex;
  align-items: center;
  text-align: center;
  color: white;
  position: relative;
}

#hero-vertical .hero-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
}

#hero-vertical h1 {
  font-size: 2.8rem;
  margin-bottom: 1.5rem;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  line-height: 1.2;
}

#hero-vertical p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

/* 2. BENEFIT ICONS KHUSUS TAMAN */
.benefit-card {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  padding: 2rem;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.benefit-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

/* 3. PORTFOLIO TAMAN */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 kolom */
    grid-template-rows: repeat(5, 1fr); /* 5 baris */
    gap: 15px;
    margin-bottom: 2rem;
}

.portfolio-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 1/1; /* Ubah menjadi persegi */
    transition: transform 0.3s ease;
}

.portfolio-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.portfolio-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.portfolio-item:hover::before {
    opacity: 1;
}

.portfolio-item:hover {
    transform: scale(1.03);
}

.portfolio-overlay {
    position: absolute;
    bottom: -100%;
    left: 0;
    width: 100%;
    padding: 1rem;
    color: white;
    transition: bottom 0.3s ease;
    z-index: 2;
}

.portfolio-item:hover .portfolio-overlay {
    bottom: 0;
}

.portfolio-overlay h3 {
    font-size: 1rem;
    margin-bottom: 0.3rem;
}

.portfolio-overlay p {
    color: white;
    font-size: 0.8rem;
    margin: 0;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .portfolio-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .portfolio-grid {
        grid-template-columns: 1fr;
    }
}

/* === Global Image Lightbox (shared) === */
.img-lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.9);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}
.img-lightbox-overlay.active { display: flex; }
.img-lightbox-content {
    width: auto;
    height: auto;
    max-width: 92vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    user-select: none;
}
.img-lightbox-close {
    position: absolute;
    top: 18px;
    right: 22px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    cursor: pointer;
    transition: background 0.2s ease;
}
.img-lightbox-close:hover { background: rgba(255,255,255,0.3); }

@media (max-width: 768px) {
    .img-lightbox-content { max-width: 96vw; max-height: 80vh; }
}

@media (max-width: 576px) {
    .img-lightbox-overlay {
        padding: calc(env(safe-area-inset-top, 0px) + 12px)
                 calc(env(safe-area-inset-right, 0px) + 12px)
                 calc(env(safe-area-inset-bottom, 0px) + 12px)
                 calc(env(safe-area-inset-left, 0px) + 12px);
    }
    .img-lightbox-content {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
    }
    @supports (height: 100svh) {
      .img-lightbox-content { max-height: 100svh; }
    }
    .img-lightbox-close {
        top: calc(env(safe-area-inset-top, 0px) + 10px);
        right: calc(env(safe-area-inset-right, 0px) + 10px);
        width: 40px;
        height: 40px;
        font-size: 24px;
    }
}

/* 4. PROSES PEMBUATAN TAMAN */
/* Container utama proses */
.process-timeline {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px;
  margin-top: 40px;
}

/* Setiap langkah */
.process-step {
  position: relative;
  flex: 1 1 200px;
  background: var(--bg-light);
  padding: 80px 20px 20px;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

/* Bulatan angka menggunakan pseudo-element */
.process-step::before {
  content: attr(data-step);
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 50px;
  background: #5C99EE;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(92, 153, 238, 0.4), 0 2px 6px rgba(0, 0, 0, 0.1);
  
  /* Center angka di dalam bulatan */
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Hapus/sembunyikan .step-number (tidak digunakan lagi) */
.step-number {
  display: none;
}

.process-step:hover {
  transform: translateY(-5px);
}

/* Judul */
.process-step h3 {
  margin-top: 10px;
  font-size: 18px;
  color: var(--text-dark);
}

/* Deskripsi */
.process-step p {
  font-size: 14px;
  color: var(--text-light);
  margin-top: 8px;
}

/* Responsive */
@media (max-width: 768px) {
  .process-timeline {
    flex-direction: column;
    align-items: center;
  }

  .process-step {
    width: 90%;
  }

  /* Pastikan bulatan tetap di tengah di mobile */
  .process-step::before {
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
  }
}



/* 5. PAKET HARGA TAMAN */
.package-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Grid otomatis dengan minimal lebar 280px */
  gap: 2rem;
  justify-content: center;
  align-items: start;
}

/* Style kartu paket */
.package-card {
  border-radius: 15px;
  padding: 1.5rem;
  background-color: #fff;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
}

.package-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
  border-color: var(--primary);
}

/* Badge "Paling Diminati" */
.package-card.featured {
  border: 2px solid var(--primary);
  position: relative;
}

.popular-badge {
  position: absolute;
  top: -12px;
  right: 20px;
  background: var(--primary);
  color: white;
  padding: 0.3rem 1.5rem;
  border-radius: 20px;
  font-size: 0.9rem;
  z-index: 2;
}

/* Tata letak konten dalam card */
.package-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
}

/* Gambar paket */
.package-image img {
  width: 100%;
  max-width: 280px;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
}

/* Detail paket */
.package-details {
  width: 100%;
}

.package-details h3 {
  margin: 0;
  font-size: 1.5rem;
  color: #333;
}

.package-details ul {
  list-style: disc;
  margin: 1rem 0;
  padding-left: 1.2rem;
  color: #555;
  text-align: left;
}

.package-details .btn {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.6rem 1.2rem;
  
  color: white;
  text-decoration: none;
  border-radius: 8px;
  transition: background 0.3s ease;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.package-details .btn:hover {
  background: #5C99EE;
}

.price {
  font-size: 1.8rem;
  color: var(--primary);
  font-weight: bold;
  margin-top: 0.5rem;
}

/* Responsive */
@media (max-width: 768px) {
  .package-grid {
    grid-template-columns: 1fr; /* Di mobile, jadi satu kolom */
  }

  .package-content {
    flex-direction: column;
    text-align: center;
  }

  .package-image img {
    max-width: 300px;
  }

  .package-details ul {
    text-align: center;
    padding-left: 0;
  }
}



/* 6. FORM KONSULTASI TAMAN */
.consult-form {
  background: white;
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-family: inherit;
}

.btn-submit {
  width: 100%;
  display: inline-block;
  margin-top: 1rem;
  padding: 0.6rem 1.2rem;
  color: white;
  text-decoration: none;
  border-radius: 8px;
  transition: background 0.3s ease;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.btn-submit .btn:hover {
    background: #5C99EE;
}

/* ===== RESPONSIVE KHUSUS HALAMAN TAMAN ===== */
@media (max-width: 768px) {
  #hero-taman {
    min-height: 60vh;
  }
  
  #hero-taman h1 {
    font-size: 2rem;
  }
  
  .process-step {
    text-align: center;
    padding: 80px 20px 20px;
    margin-bottom: 2rem;
  }
  
  .package-card {
    margin-bottom: 2rem;
  }
}

@media (max-width: 576px) {
  #hero-taman h1 {
    font-size: 1.8rem;
  }
  
  .consult-form {
    padding: 1.5rem;
  }
}



/* ===== FILTER BUTTON ===== */
.portfolio-filter {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 30px;
  flex-wrap: wrap;
  padding: 0 15px;
}

.filter-btn {
  padding: 8px 20px;
  border: 2px solid var(--primary);
  background: transparent;
  color: var(--primary);
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 600;
}

.filter-btn:hover {
  background: rgba(var(--primary-rgb), 0.1);
}

.filter-btn.active {
  background-color: #1b6a19;
  color: white;
  box-shadow: 0 3px 10px rgba(27, 106, 25, 0.3); /* versi rgb dari #1b6a19 */
}


/* ===== FORM CONTAINER ===== */
.form-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: flex-start;
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.form-info {
  color: black;
  padding: 40px;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

.form-info h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: #1b6a19; /* Green color */
  position: relative;
  padding-bottom: 15px;
}

.form-info h2:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background-color: #1b6a19;
}

.form-info ul {
  padding-left: 0;
  margin-bottom: 2rem;
  list-style: none;
}

.form-info li {
  margin-bottom: 20px;
  position: relative;
  line-height: 1.6;
  padding-left: 40px;
  font-size: 1.1rem;
  color: #333;
}

.form-info li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 24px;
  height: 24px;
  background-color: #1b6a19; /* Green color */
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>');
  mask-repeat: no-repeat;
  mask-position: center;
  border-radius: 50%;
}

.contact-info {
  background: rgba(27, 106, 25, 0.08); /* Light green background */
  padding: 20px;
  border-radius: 8px;
  margin-top: 30px;
  border-left: 4px solid #1b6a19;
  font-size: 14px;
}

.contact-info a {
  color: #1b6a19;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s;
  font-size: 14px;
}

.contact-info a:hover {
  color: #134611;
  text-decoration: underline;
}

/* Responsive Form */
@media (max-width: 992px) {
  .form-container {
    grid-template-columns: 1fr;
  }
  
  .form-info {
    margin-bottom: 0;
    padding: 30px;
  }
}

@media (max-width: 768px) {
  .form-info {
    padding: 20px;
    overflow-x: hidden;
    max-width: 100%;
  }

  .form-info h2 {
    font-size: 1.5rem;
    word-wrap: break-word;
  }

  .form-info li {
    font-size: 1rem;
    padding-left: 35px;
  }

  .form-info li:before {
    width: 20px;
    height: 20px;
  }

  .contact-info {
    padding: 15px;
    word-wrap: break-word;
  }
}

/* ===== PORTFOLIO LIGHTBOX ===== */
.lightbox-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 20px;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.lightbox-content {
  max-width: 90%;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
  animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 40px;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10000;
  user-select: none;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(90deg);
}

.lightbox-caption {
  color: #fff;
  text-align: center;
  padding: 15px 20px;
  margin-top: 15px;
  font-size: 16px;
  max-width: 90%;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 8px;
}

/* Mobile responsive for lightbox */
@media (max-width: 768px) {
  .lightbox-content {
    max-width: 95%;
    max-height: 80vh;
  }

  .lightbox-close {
    top: 10px;
    right: 10px;
    font-size: 32px;
    width: 40px;
    height: 40px;
  }

  .lightbox-caption {
    font-size: 14px;
    padding: 10px 15px;
  }
}