/*
    ----------------------------------------------------------
    FINAL CSS - CV PUTRA MANDIRI (KODE AKHIR & TERSTRUKTUR)
    Status: Semua layout diperbaiki, termasuk Header, Kontak Form, dan Katalog
    ----------------------------------------------------------
*/

/* Global Styles & Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #F8F8F8;
}

a {
    text-decoration: none;
    color: #1F4E79;
    transition: color 0.3s;
}

ul {
    list-style: none;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Header & Navigasi --- */
#main-header{background-color:#1F4E79;color:#FFF;padding:15px 0;position:sticky;top:0;z-index:1000;box-shadow:0 2px 8px rgba(0, 0, 0, 0.1)}
#main-header .container{display:flex;justify-content:space-between;align-items:center}
#main-header .logo{color:#FFF;font-size:28px;font-weight:700;font-family:'Playfair Display',serif}
#main-nav { display: block; flex-grow: 1; text-align: right; }
#main-nav ul{display:flex; justify-content: flex-end}
#main-nav ul li a{color:#FFF;padding:10px 15px;display:block;font-weight:500;opacity:.9;transition:opacity 0.3s ease}
#main-nav ul li a:hover,#main-nav ul li a.active{opacity:1;background-color:rgba(255, 255, 255, 0.1);border-radius:5px}
.menu-toggle{display:none;background:none;border:none;color:#FFF;font-size:28px;cursor:pointer; z-index: 1001;}
#hero{background:url(../img/hero-bg.jpg) no-repeat center center/cover;color:#FFF;text-align:center;padding:150px 0;min-height:60vh;position:relative}
#hero::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(31, 78, 121, 0.75);z-index:1}
#hero .container{position:relative;z-index:2}
#hero h1{font-size:3.5em;margin-bottom:20px;font-weight:700}
#hero p{font-size:1.3em;margin-bottom:40px;font-weight:300}

/* --- Buttons & Section General Styling --- */
.btn{display:inline-block;padding:15px 30px;border-radius:50px;font-weight:600;transition:all 0.3s ease;text-transform:uppercase;letter-spacing:.5px}
.btn-small{padding:10px 20px;font-size:0.9em;text-transform:none}
.btn-primary{background-color:#1F4E79;color:#FFF;border:2px solid #1F4E79}
.btn-primary:hover{background-color:#173b5c;border-color:#173b5c;transform:translateY(-3px);box-shadow:0 8px 15px rgba(31, 78, 121, 0.3)}
.btn-secondary{background-color:transparent;color:#1F4E79;border:2px solid #1F4E79}
.btn-secondary:hover{background-color:#1F4E79;color:#FFF;transform:translateY(-3px);box-shadow:0 8px 15px rgba(31, 78, 121, 0.3)}
.btn-whatsapp{background-color:#25D366;color:#FFF;border:2px solid #25D366;font-size:1.1em}
.btn-whatsapp:hover{background-color:#1da851;border-color:#1da851;transform:translateY(-3px);box-shadow:0 8px 15px rgba(37, 211, 102, 0.4)}
.btn-cta-accent{background-color:gold;color:#1F4E79;border:2px solid gold}
.btn-cta-accent:hover{background-color:#e6c200;border-color:#e6c200;transform:translateY(-3px);box-shadow:0 8px 15px rgba(255, 215, 0, 0.4)}
section{padding:80px 0}
section h2{font-size:3em;text-align:center;margin-bottom:60px;color:#1F4E79;font-family:'Playfair Display',serif;position:relative}
section h2::after{content:'';position:absolute;left:50%;bottom:-15px;transform:translateX(-50%);width:80px;height:4px;background-color:#A6ACAF;border-radius:2px}
.bg-light{background-color:#E0E0E0}
.page-hero{background-color:#1F4E79;color:#fff;padding:80px 0;text-align:center}
.page-hero h1{font-size:3em;margin-bottom:10px;font-family:'Playfair Display',serif}

/* --- About & Services --- */
.about-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:50px;align-items:center}
.about-image img{width:100%;height:400px;object-fit:cover;border-radius:10px;box-shadow:0 10px 30px rgba(0, 0, 0, 0.1)}
.about-content h3{font-size:1.8em;color:#1F4E79;margin-bottom:20px;font-family:'Playfair Display',serif}
.about-content p{margin-bottom:25px}
.about-content ul{margin-bottom:30px}
.about-content ul li{padding:8px 0;font-weight:500}
.about-content ul li i{color:#1F4E79;margin-right:10px;font-size:1.1em}
.service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;text-align:center}
.service-item{background-color:#FFF;padding:30px;border-radius:10px;box-shadow:0 5px 20px rgba(0, 0, 0, 0.05);transition:transform 0.3s ease,box-shadow 0.3s ease}
.service-item:hover{transform:translateY(-10px);box-shadow:0 15px 30px rgba(31, 78, 121, 0.15)}
.service-item img{width:100%;height:200px;object-fit:cover;border-radius:8px;margin-bottom:20px}
.service-item h3{color:#1F4E79;font-size:1.4em;margin-bottom:15px}
.service-item h3 i{margin-right:10px;color:#A6ACAF}
.service-item a{display:block;margin-top:15px;font-weight:600}

/* --- Project Section --- */
.project-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px}
.project-item{background-color:#FFF;border-radius:10px;overflow:hidden;box-shadow:0 5px 20px rgba(0, 0, 0, 0.1);transition:transform 0.3s ease}
.project-item:hover{transform:scale(1.03)}
.project-item img{width:100%;height:250px;object-fit:cover;display:block}
.project-info{padding:20px}
.project-info h4{font-size:1.2em;color:#1F4E79;margin-bottom:5px;font-family:'Playfair Display',serif}
.project-info p{font-size:.9em;color:#A6ACAF}
.cta-section{background-color:#1F4E79;color:#FFF;text-align:center;padding:60px 0}
.cta-section h2{color:#FFF;margin-bottom:15px}
.cta-section h2::after{background-color:#A6ACAF}
.cta-section p{font-size:1.2em;margin-bottom:30px;opacity:.9}

/* --- PRODUK UNGGULAN (index.html) --- */
.products-section {padding: 80px 0;display: flex; flex-direction: column;align-items: center;}
.product-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 30px;justify-content: center; max-width: 1100px;margin: 0 auto !important;}
.product-item {background-color: #FFFFFF;border-radius: 10px;box-shadow:0 5px 20px rgba(0, 0, 0, 0.1);overflow: hidden;transition: transform 0.3s ease;text-align: center;}
.product-item:hover {transform: translateY(-5px);box-shadow: 0 10px 25px rgba(31, 78, 121, 0.2);}
.product-item img {width: 100%;height: 300px;object-fit: contain;display: block;margin-bottom: 10px;padding: 15px;}
.product-info {padding: 0 20px 15px 20px; text-align: center;}
.product-info h4 {font-size: 1.3em;color:#1F4E79;margin-bottom: 10px;}
.product-info .price {font-size: 1em;color: #333333;margin-bottom: 15px;font-weight: 600;}

/* --- KATALOG LENGKAP (semua-produk.html) --- */
#full-catalog {padding: 80px 0;}
#full-catalog .product-grid {grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 40px; max-width: 900px; margin: 0 auto; justify-content: center;}
.product-item {text-align: left; padding: 25px;}
.product-content-wrapper {display: flex; gap: 20px; align-items: center;}
.product-image-col {flex-shrink: 0; flex-basis: 35%; max-width: 150px; padding-top: 10px;}
.product-image-col img {width: 100%;height: 120px;object-fit: contain;border-radius: 6px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);}
.product-details-col {flex-grow: 1;}
.product-details-col h4 {text-align: left; margin-top: 0;margin-bottom: 5px;font-size: 1.2em;}
.product-details-col .product-meta p {margin: 3px 0;text-align: left;font-size: 0.9em;}
.product-details-col .btn {display: inline-block;margin-top: 10px;}

/* --- FIX LAYANAN LENGKAP (service-detail-section) --- */
.service-detail-section {padding: 80px 0;}
.service-detail-item {display: flex; gap: 40px;margin-bottom: 80px;align-items: center;padding: 20px 0;}
.service-image-wrapper {flex: 0 0 45%; max-width: 45%; padding: 10px; background-color: #FFF;border-radius: 12px;box-shadow:0 8px 20px rgba(0, 0, 0, 0.1);}
.service-image-wrapper img {width: 100%;max-height: 350px;height: auto;object-fit: contain;border-radius: 8px;display: block;}
.service-content {flex: 0 0 50%;}
.service-content h3 {font-size: 2.2em;color:#1F4E79;margin-bottom: 10px;font-family:'Playfair Display',serif;}
.service-content h4 {font-size: 1.1em;color:#333;margin-top: 20px;margin-bottom: 5px;font-weight: 600;}
.service-content ul {list-style: none;padding-left: 0;}
.service-content ul li {padding-left: 1.2em; text-indent: -1.2em; margin-bottom: 5px;}
.service-content ul li::before {content: "✓ "; color:#1F4E79; font-weight: bold;margin-right: 5px;}
.service-detail-item:nth-child(even) {flex-direction: row-reverse;}

/* --- FIX NILAI INTI (tentang-kami.html) --- */
.vision-mission-grid {display: grid;grid-template-columns: 1fr 1fr;gap: 40px;padding: 40px 0;justify-content: center;}
.vision-mission-item {padding: 30px;border: 1px solid #A6ACAF;border-radius: 8px;background-color: #FFF;display: flex;flex-direction: column;align-items: center;text-align: center;min-height: 350px;}
.vision-mission-item ul {list-style: none; padding-left: 0;text-align: left; margin-top: 15px;}
.vision-mission-item ul li::before {content: "✓ "; color:#1F4E79; font-weight: bold;margin-right: 5px;}
.core-values-section h2 {color:#FFFFFF!important;margin-bottom: 40px;}
.core-values-section h2::after {background-color:#A6ACAF!important;}
.values-list {display: grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: 30px;margin-top: 40px;justify-content: center;}
.value-item {padding: 30px;border-radius: 10px;box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);transition: transform 0.3s;display: flex;flex-direction: column;align-items: center;text-align: center;min-height: 280px;}
.value-item:hover {transform: translateY(-5px);box-shadow:0 10px 25px rgba(31, 78, 121, 0.3);}
.value-item i{color:#1F4E79;font-size:3em;margin-bottom:15px}
.value-item h4{font-size:1.4em;color:#1F4E79;margin-bottom:15px;font-weight:600}
.value-item p{color:#333;font-size:.95em;line-height:1.5}

/* --- Portofolio Gallery (FIXED) --- */
#full-portfolio {padding: 60px 0;text-align: center;}
.portfolio-grid-full {display: grid;grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));gap: 30px;justify-content: center;max-width: 1100px;margin: 0 auto;}
.portfolio-item {background-color:#FFFFFF;border-radius: 12px;box-shadow:0 8px 20px rgba(0, 0, 0, 0.1);overflow: hidden;height: 100%;transition: transform 0.3s ease;text-align: left;}
.portfolio-item img {width: 100%;height: 250px;object-fit: cover;display: block;}
.portfolio-info {padding: 15px 20px 20px 20px;text-align: left;}

/* --- Kontak & Footer Styling --- */
#main-footer{background-color:#1a446c;color:#FFF;padding:60px 0 20px}
#main-footer h4{color:#FFF;margin-bottom:20px;font-size:1.4em;font-weight:600}
#main-footer p{font-size:.9em;line-height:1.8;opacity:.9}
#main-footer .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;margin-bottom:40px}
#main-footer .footer-links ul li a{color:#FFF;opacity:.8;transition:opacity 0.3s ease}
#main-footer .footer-links ul li a:hover{opacity:1;text-decoration:underline}
#main-footer .social-links a{color:#FFF;font-size:24px;margin-right:15px;transition:color 0.3s ease}
#main-footer .social-links a:hover{color:#A6ACAF}
#main-footer .copyright{text-align:center;border-top:1px solid rgba(255, 255, 255, 0.2);padding-top:20px;margin-top:20px;font-size:.85em;opacity:.7}

/* KUNCI PERBAIKAN: KONTAK FORM (Simetri & Kerapian Input) */
.contact-form{background-color:#FFF;border-radius:12px;box-shadow:0 5px 20px rgba(0, 0, 0, 0.1);padding:40px}
.contact-form h2{text-align:center!important;margin-bottom:30px;font-size:2em!important;font-family:'Playfair Display',serif}
.contact-grid{display:grid;grid-template-columns:1.8fr 1fr;gap:50px;padding:80px 0;align-items:flex-start}
.contact-info-box{background-color:#E0E0E0;padding:40px 30px;border-radius:12px;box-shadow:0 5px 20px rgba(0, 0, 0, 0.1)}
.info-item{display:flex;align-items:flex-start;margin-bottom:25px}
.info-item i{font-size:1.8em;color:#1F4E79;margin-right:15px;margin-top:2px}
.info-item p strong{display:block;margin-bottom:3px;font-size:1.05em;color:#1F4E79}
.map-container{height:400px;overflow:hidden;border-radius:10px;box-shadow:0 5px 20px rgb(0 0 0 / .1)}
.map-container iframe{width:100%;height:100%;border:0}
.page-hero{background-color:#1F4E79;color:#fff;padding:80px 0;text-align:center}

/* INPUT FIXES (Diperlukan pembungkusan form-group di HTML) */
.contact-form form {display: grid;grid-template-columns: 1fr 1fr;gap: 15px 20px;}
.contact-form .form-group {display: block;margin-bottom: 0;grid-column: span 1; text-align: left;}
.contact-form label {display: block;margin-bottom: 5px;font-weight: 600;color: #333;}
.contact-form input[type="text"],.contact-form input[type="email"],.contact-form textarea {width: 100%;padding: 12px;border: 1px solid #ddd; border-radius: 6px;box-sizing: border-box;transition: border-color 0.3s;margin-bottom: 0;grid-column: span 1;}
.contact-form textarea {min-height: 120px;}
.contact-form .full-width-field {grid-column: span 2;text-align: left;}
.contact-form .btn-whatsapp {grid-column: span 2;margin-top: 15px;}
.contact-form p {grid-column: span 2;text-align: center;margin-top: 10px;}


/* --- Media Queries (Responsiveness) --- */
@media (max-width: 992px) {
    .about-grid{grid-template-columns:1fr}
    .about-image img{height:300px}
    .service-detail-item{flex-direction: column !important; text-align: center; margin-bottom: 40px}
    .service-image-wrapper, .service-content {flex: 0 0 100%; max-width: 100%; order: initial !important}
    .service-content h4, .service-content ul {text-align: left; margin: 10px auto;}
    .service-image-wrapper {margin: 0 auto 20px auto; max-width: 80%;}
    .contact-grid{grid-template-columns:1fr}
    .contact-info-box{order:-1}
    .vision-mission-grid{grid-template-columns:1fr}
    .product-content-wrapper {flex-direction: column; text-align: center;}
    .product-details-col {text-align: center;}
    .product-details-col h4, .product-details-col .product-meta p {text-align: center;}
}
@media (max-width: 768px) {
    #main-nav{display:none;position:absolute;top:70px;left:0;width:100%;background-color:#1F4E79;box-shadow:0 5px 10px rgb(0 0 0 / .1)}
    #main-nav.active{display:block}
    .menu-toggle{display:block}
    #hero h1{font-size:2.5em}
    .footer-grid{grid-template-columns:1fr;text-align:center}
    .footer-social{margin-top:20px}
    .footer-social h4{text-align:center}
    .footer-social .social-links{display:flex;justify-content:center}
}
@media (max-width: 650px) {
    .product-grid, #full-catalog .product-grid {grid-template-columns: 1fr}
}

/*
    ----------------------------------------------------------
    FINAL CSS - CV PUTRA MANDIRI (KODE AKHIR & TERSTRUKTUR)
    Fokus: Perbaikan Simetri Katalog dan Tata Letak Filter
    ----------------------------------------------------------
*/

/* Global Styles & Reset (Dipersingkat) */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #F8F8F8;
}

a {
    text-decoration: none;
    color: #1F4E79;
    transition: color 0.3s;
}

ul {
    list-style: none;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Header, Buttons, Sections (Gaya Umum) --- */
/* (Kode Header, Tombol, Hero Section, About, Services, Project, Footer di sini - Tidak Berubah dari versi final sebelumnya) */

/* ... (Kode CSS LENGKAP Anda dari bagian Header hingga Section CTA) ... */

/* --- FIX KRITIS: PAGE HERO KATALOG LENGKAP --- */
.page-hero {
    background-color: #1F4E79;
    color: #fff;
    padding: 100px 0; /* Padding vertikal lebih besar untuk kesan premium */
    text-align: center;
}

.page-hero h1 {
    font-size: 3.5em; /* Ukuran lebih besar */
    margin-bottom: 5px;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    letter-spacing: 2px; /* Jarak huruf untuk kesan elegan */
    line-height: 1.1;
    text-transform: uppercase;
}
.page-hero p {
    font-size: 1.2em;
    margin-top: 15px;
    opacity: 0.9;
}


/* --- FIX KRITIS: FILTER BAR TUMPANG TINDIH & WARNA --- */
#product-filter-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 40px;
    padding: 20px 20px; /* Padding di sekitar tombol filter */
    background-color: #FFFFFF; /* Warna Putih agar menonjol */
    border-top: 5px solid #E0E0E0; /* Garis pemisah halus */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.filter-btn {
    background-color: #FFFFFF;
    color: #1F4E79;
    border: 1px solid #1F4E79;
    padding: 10px 18px; /* Ukuran tombol lebih besar */
    border-radius: 5px; /* Bentuk kotak lebih modern daripada bulat */
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    font-size: 0.95em;
    text-decoration: none; 
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05); /* Sedikit timbul */
}

.filter-btn:hover {
    background-color: #1F4E79; 
    color: #FFF;
}

.filter-btn.active {
    background-color: #1F4E79; 
    color: #FFF;
    border-color: #1F4E79;
}

/* --- FIX: CTA FOOTER TOMBOL WA --- */
#contact-cta .btn-secondary {
    /* MENGUBAH TOMBOL AJUKAN PENAWARAN (SECONDARY) MENJADI HIJAU WA */
    background-color: #25D366;
    color: #FFF;
    border: 2px solid #25D366;
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(37, 211, 102, 0.3);
    text-transform: none; /* Jangan huruf kapital semua */
    font-weight: 700;
}
#contact-cta .btn-secondary:hover {
    background-color: #1da851;
    border-color: #1da851;
}

/* --- FIX PRODUK KATALOG LENGKAP (Struktur Grid, sudah rata tengah) --- */
#full-catalog .product-grid {
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); 
    gap: 40px; 
    max-width: 900px; 
    margin: 30px auto 0 auto; 
    justify-content: center;
}

/* ... (Media Queries) ... */
@media (max-width: 768px) {
    .page-hero h1 {
        font-size: 2.5em; 
    }
    #product-filter-bar {
        /* Filter bar di mobile rata kiri/tengah agar rapi */
        justify-content: flex-start;
        padding: 15px 10px;
    }
}

/* --- FIX: Tampilan Filter Bar & Intro Banner --- */

/* Gaya Filter Bar */
#product-filter-bar {
    /* ... (Gaya lama tetap) ... */
    background-color: #F8F8F8; /* Sedikit lebih terang */
}

.filter-btn {
    /* Mengubah warna font agar lebih hidup */
    color: #007bff; /* Warna biru cerah sebagai aksen */
    border: 1px solid #cce5ff; /* Border lebih terang dan cerah */
    padding: 10px 18px; 
    border-radius: 5px; 
    font-weight: 600;
    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
    background-color: #f7f7f7; /* Latar belakang tombol lebih terang */
}

.filter-btn:hover:not(.active) {
    background-color: #e9ecef; /* Shading halus saat hover */
}

.filter-btn.active {
    background-color: #1F4E79; /* Warna Primer tetap untuk aktif */
    color: #FFF;
    border-color: #1F4E79;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Efek timbul yang jelas */
}

/* GAYA UNTUK INTRO BANNER BARU */
#product-intro-banner {
    padding: 10px 20px;
    margin: 20px auto 40px auto; /* Memberi ruang di atas dan bawah */
    background-color: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    border-left: 5px solid gold; /* Garis vertikal aksen warna emas */
}

.intro-headline {
    font-size: 1.1em;
    color: #333;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.intro-headline i {
    color: #1F4E79; /* Ikon menggunakan warna primer */
    margin-right: 10px;
    font-size: 1.2em;
}

/* FIX: CTA Footer Tombol */
#contact-cta .btn-secondary {
    /* MENETRALKAN STYLE SECONDARY DAN MENGGANTINYA DENGAN STYLE HIJAU WA */
    background-color: #25D366; 
    color: #FFF;
    border: 2px solid #25D366;
    text-transform: none;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(37, 211, 102, 0.4);
}
#contact-cta .btn-secondary:hover {
    background-color: #1da851;
    border-color: #1da851;
}

/* --- FIX KRITIS: PAGE HERO KATALOG LENGKAP --- */
.page-hero {
    /* Padding dihilangkan dari bawah agar Filter Bar menempel */
    background-color: #1F4E79;
    color: #fff;
    padding: 100px 0 0 0; /* Padding bawah di set ke 0 */
    text-align: center;
}

/* FIX TAMPILAN FILTER BAR */
#product-filter-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 0; /* Hapus margin bawah di sini */
    padding: 15px 20px; 
    background-color: #FFFFFF; /* Warna putih agar menonjol */
    border-top: 1px solid #D0D0D0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* FIX: Pastikan section katalog di bawahnya punya margin atas yang cukup */
#full-catalog {
    padding-top: 40px; /* Kurangi padding agar tidak terlalu jauh dari filter */
}

/* Gaya Filter Button Tetap SAMA */
.filter-btn {
    background-color: #FFF;
    color: #1F4E79;
    border: 1px solid #1F4E79;
    padding: 10px 18px; 
    border-radius: 5px; 
    font-weight: 600;
    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
    font-size: 0.95em;
    text-decoration: none;
}
.filter-btn.active {
    background-color: #1F4E79; 
    color: #FFF;
    border-color: #1F4E79;
}

/* --- GAYA UNTUK PESAN STOK KOSONG (Perbaikan Akhir Simetri) --- */

#empty-stock-message {
    /* Default: Sembunyikan, akan dimunculkan oleh JavaScript jika stok 0 */
    display: none; 
    
    /* KUNCI: Flexbox untuk mengatur konten menjadi Ikon + Teks/Tautan */
    display: flex; 
    flex-direction: row; 
    align-items: center; 
    
    padding: 30px; 
    margin-top: 50px;
    max-width: 750px; 
    
    /* FIX KRITIS: Memaksa Blok Rata Tengah Horizontal */
    margin-left: auto; 
    margin-right: auto;
    
    background-color: #FFF3E0; 
    border: 3px solid #FFC107; 
    color: #333333;
    
    font-size: 1.2em; 
    font-weight: 500;
    border-radius: 12px;
    line-height: 1.5;
    
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); 
    text-align: left; /* Teks utama di kolom teks tetap rata kiri */
}

/* Penambahan Ikon Peringatan */
#empty-stock-message::before {
    content: "\f071"; 
    font-family: 'Font Awesome 5 Free'; 
    font-weight: 900;
    font-size: 3em;
    color: #FFC107; 
    margin-right: 25px; 
    flex-shrink: 0; /* Penting: Ikon tidak boleh menyusut */
}

/* Div untuk membungkus teks utama dan tautan */
#empty-stock-message > div {
    display: flex;
    flex-direction: column;
    text-align: left; /* Konten teks di dalam div ini rata kiri */
}

/* Tautan Saran */
#empty-stock-message a {
    color: #1F4E79; 
    font-weight: 700;
    margin-top: 5px; 
    text-decoration: underline;
    display: block; 
}

/* Media Query: Perbaikan Mobile */
@media (max-width: 600px) {
    #empty-stock-message {
        flex-direction: column; /* Tumpuk ikon di atas teks */
        text-align: center;
        padding: 20px;
    }
    #empty-stock-message::before {
        margin-right: 0;
        margin-bottom: 10px;
    }
    #empty-stock-message > div {
        text-align: center; /* Paksa teks rata tengah di mobile */
    }
    #empty-stock-message a {
        text-align: center;
    }
}

/* --- GAYA BARU: CTA INLINE DI DALAM GRID PRODUK --- */

.inline-cta-item {
    background: #FFF;
    border: 2px dashed #1F4E79; /* Border putus-putus biru yang menarik */
    border-radius: 10px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 350px; /* Samakan tinggi dengan item produk agar simetris */
    box-shadow: 0 0 15px rgba(31, 78, 121, 0.1);
}

.inline-cta-item h4 {
    font-size: 1.5em;
    color: #173b5c; /* Biru Gelap */
    margin-bottom: 10px;
}

.inline-cta-item p {
    color: #555;
    margin-bottom: 20px;
    font-size: 0.95em;
}

/* ... (CSS yang sudah ada) ... */

/* NEW: Gaya untuk Search Bar */
.search-bar-container {
    display: flex;
    justify-content: center;
    margin: 30px auto;
    max-width: 600px;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden; /* Memastikan border radius diterapkan ke input dan button */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

#product-search-input {
    flex-grow: 1;
    padding: 12px 15px;
    border: none;
    font-size: 16px;
    outline: none;
}

#product-search-input::placeholder {
    color: #888;
}

#product-search-button {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 12px 20px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

#product-search-button:hover {
    background-color: var(--dark-primary-color);
}

/* NEW: Gaya untuk pesan "Maaf, produk tidak ditemukan" */
#empty-search-message {
    display: flex; /* Menggunakan flexbox untuk alignment */
    flex-direction: column; /* Mengatur item secara vertikal */
    align-items: center; /* Rata tengah horizontal */
    justify-content: center; /* Rata tengah vertikal */
    padding: 40px;
    margin-top: 50px;
    background-color: #fff3cd; /* Warna kuning muda */
    color: #856404; /* Warna teks kuning tua */
    border: 1px solid #ffeeba;
    border-radius: 8px;
    text-align: center;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

#empty-search-message.hidden {
    display: none; /* Sembunyikan secara default */
}

#empty-search-message i {
    font-size: 40px;
    color: #856404;
    margin-bottom: 15px;
}

#empty-search-message p {
    margin-bottom: 5px;
    line-height: 1.5;
}

#empty-search-message a {
    color: #007bff; /* Warna biru standar untuk link */
    text-decoration: underline;
    font-weight: 600;
}

/* Hapus #empty-stock-message lama jika ada di sini karena kita pakai yang baru */
#empty-stock-message {
    display: none !important; /* Pastikan pesan stok kosong lama tidak muncul */
}


/* ... (CSS lainnya) ... */