/* ================= VARIABEL WARNA ================= */
        :root {
            --black: #111111;
            --gold: #d4af37;
            --red: #ff0000;
            --white: #ffffff;
            --gray-light: #f4f4f4;
            --text-dark: #706f6f;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
        body { color: var(--text-dark); line-height: 1.6; background-color: var(--white); overflow-x: hidden; }
        a { text-decoration: none; }
        ul { list-style: none; }
        section { padding: 80px 5%; }
        h2.section-title { text-align: center; font-size: 32px; color: var(--black); margin-bottom: 50px; text-transform: uppercase; border-bottom: 3px solid var(--gold); display: inline-block; padding-bottom: 10px; position: relative; left: 50%; transform: translateX(-50%); }

        /* ===================================== */
                 /* MOBILE RESPONSIVE FIX */
        /* ===================================== */
        @media screen and (max-width:768px){ /* Tentang Kami */ .grid-5{display:flex !important;flex-direction:column !important;gap:20px !important;}
        .grid-5 img{width:100% !important;margin-bottom:15px !important;}
        .grid-5 .info-box{padding:20px !important;}
        /* Layanan Utama & Industri */
        #layanan .grid-2{ display:flex !important; flex-direction:column !important; gap:20px !important;}
        .column-layanan,
        .column-industri{ width:100% !important; }
        /* Judul section */
        .section-title{font-size:24px !important;text-align:center !important;margin-bottom:25px !important; }
        /* Box konten */
        .info-box{padding:10px !important; margin-bottom:0 !important; }
        /* Teks paragraf */
        .info-box p{text-align:justify;font-size:14px;line-height:1.8;}
        .info-box ul li{font-size:14px; line-height:1.8;}
        }

        /* ================= 1. HEADER ================= */
        header { background-color: var(--black); padding: 15px 5%; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 1000; box-shadow: 0 4px 6px rgba(0,0,0,0.3); }
        .logo-container { display: flex; align-items: center; gap: 12px; text-decoration: none;}
        .logo-img { height: 50px; /* Anda bisa menyesuaikan ukuran logo di sini */ width: auto; border-radius: 0; /* Opsional: jika logo ingin sedikit membulat */ }
        .logo-text { font-size: 26px; font-weight: bold; text-transform: uppercase; letter-spacing: 2px; }
        .text-weston { color: var(--white); } /* Warna kata pertama */
        .text-textile { color: var(--red); } /* Warna kata kedua */
        #navbar ul{display:flex;flex-direction:row; /* horizontal */ list-style:none; margin:0;padding:0;gap:30px;}
        #navbar ul li{ margin:0;}
        nav ul li a { text-decoration:none; color:#818181; font-weight: 500;}
        nav a { color: var(--white); font-weight: 500; transition: color 0.3s; }
        nav a:hover { color: var(--gold); }
        .btn-cta { background-color: var(--gold); color: var(--black); padding: 5px 24px; border-radius: 25px; font-weight: bold; transition: 0.3s; border: 2px solid var(--gold); cursor: pointer; }
        .btn-cta:hover { background-color: rgba(255, 228, 129, 0.753); color: var(--white); }
             

        /* ================= 2. HERO SECTION ================= */
        .hero-container { position: relative; width: 100%; height: 98vh; display: flex; background: var(--black); }
        /* Area gambar 75% di kiri */
        .hero-images { width: 100%; height: 100%; position: relative; overflow: hidden; }
        .slide-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease-in-out; }
        .slide-bg.active { opacity: 0.6; } /* Opacity diturunkan agar teks terbaca */
        /* Area gradasi 25% di kanan */
        /* Konten Teks di tengah melayang */
        .hero-content { position: absolute; top: 56%; left: 50%; transform: translate(-50%, -50%); width: 80%; text-align: center; color: var(--white); z-index: 10; }
        .slide-text { display: none; animation: fadeIn 1s; }
        .slide-text.active { display: block; }
        .slide-text h1 { font-size: 50px; color: var(--gold); margin-bottom: 15px; text-shadow: 2px 2px 4px rgba(0,0,0,0.8); }
        .slide-text p { font-size: 20px; margin-bottom: 30px; text-shadow: 1px 1px 3px rgba(0,0,0,0.8); }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

        /* ================= KONTEN UTAMA ================= */
        
        /* Mengapa Memilih Kami */
        .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; text-align: center; }
        .why-card i { font-size: 40px; color: var(--gold); margin-bottom: 15px; }
        .why-card h3 { color: var(--black); margin-bottom: 10px; }

        /* Katalog Produk */
        .bg-gray { background-color: var(--gray-light); }
        .catalog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; }
        .product-card { background: var(--white); border-radius: 8px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.1); text-align: center; transition: 0.3s; padding-bottom: 20px; }
        .product-card:hover { transform: translateY(-10px); box-shadow: 0 8px 20px rgba(0,0,0,0.2); }
        .product-img { width: 100%; height: 200px; background-color: #ddd; object-fit: cover; }
        .product-card h3 { margin: 15px 0 5px 0; color: var(--black); }
        .product-card p { padding: 0 15px 15px 15px; font-size: 14px; color: #666; }
        .btn-detail { background: var(--black); color: var(--gold); border: none; padding: 8px 20px; cursor: pointer; font-weight: bold; transition: 0.3s; }
        .btn-detail:hover { background: var(--gold); color: var(--black); }

        /* Kapasitas, Mesin, Industri & Proses */
        .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
        .info-box { background: var(--white); padding: 30px; border-left: 5px solid var(--gold); box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
        .process-steps { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
        .step { flex: 1; min-width: 200px; background: var(--black); color: var(--white); padding: 25px; text-align: center; border-bottom: 4px solid var(--gold); }
        .step h4 { color: var(--gold); margin-bottom: 10px; font-size: 20px; }

         /* Sejarah singkat */
        .grid-5 { display: grid; grid-template-columns: 400px 1fr; gap: 10px; align-items: center; }
        .info-box { background: var(--white); padding: 30px; border-left: 5px solid var(--gold); box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
        .process-steps { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
        .step { flex: 1; min-width: 200px; background: var(--black); color: var(--white); padding: 25px; text-align: center; border-bottom: 4px solid var(--gold); }
        .step h4 { color: var(--gold); margin-bottom: 10px; font-size: 20px; }


        /* Testimoni */
        .testi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
        .testi-card { background: var(--white); padding: 30px; border: 1px solid #eee; font-style: italic; position: relative; }
        .testi-card::before { content: "\201C"; font-size: 60px; color: var(--gold); position: absolute; top: -10px; left: 10px; opacity: 0.3; }

        /* Form & Kontak */
        .contact-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
        .form-group { margin-bottom: 20px; }
        .form-group label { display: block; margin-bottom: 8px; font-weight: bold; }
        .form-control { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; }
        .form-row { display: flex; gap: 20px; }
        .form-row .form-group { flex: 1; }
        
        /* ================= FOOTER ================= */
        footer { background: var(--black); color: #bbb; padding: 60px 5% 20px 5%; }
        .footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-bottom: 40px; }
        footer h4 { color: var(--gold); margin-bottom: 20px; font-size: 18px; }
        footer a { color: #bbb; display: block; margin-bottom: 10px; transition: 0.3s; }
        footer a:hover { color: var(--white); }
        .footer-bottom { text-align: center; border-top: 1px solid #333; padding-top: 20px; font-size: 14px; }

        /* ================= POP-UP MODAL ================= */
        .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); overflow-y: auto; padding-top: 50px; }
        .modal-content { background-color: var(--white); margin: auto; padding: 40px; border-radius: 8px; width: 90%; max-width: 800px; position: relative; }
        .close-btn { position: absolute; top: 15px; right: 25px; color: #aaa; font-size: 35px; font-weight: bold; cursor: pointer; }
        .close-btn:hover { color: var(--black); }
        .modal-img { width: 99%; height: 98%; object-fit: cover; background: #eee; min-height: 300px; }
        .modal-body h2 { color: var(--black); border-bottom: 2px solid var(--gold); padding-bottom: 10px; margin-bottom: 15px; }
        .modal-body h4 { margin-top: 15px; color: var(--black); }
        .modal-body ul { list-style: disc; padding-left: 20px; color: #555; }

        /* Responsive */
        @media (max-width: 900px) {
        .grid-4, .grid-2, .contact-wrap, .modal-content { grid-template-columns: 1fr; }
        .hero-gradient { display: none; }
        .hero-images { width: 100%; }
        .form-row { flex-direction: column; gap: 0; }
        }
        /* ================= FLOATING WHATSAPP ================= */
        .float-wa {position: fixed;bottom: 30px;right: 30px; z-index: 9999;
        
        /* Memanggil animasi bergoyang setiap 2.5 detik */
        animation: goyang 2.5s infinite ease-in-out; }

        .float-wa img {width: 50px; /* Ukuran logo WA */ height: 50px; transition: transform 0.3s;}

        /* Efek sedikit membesar saat disentuh/hover */
        .float-wa:hover img {transform: scale(1.1);        }

        /* Keyframes untuk efek bergoyang (wiggle) */
        @keyframes goyang {
            0% { transform: rotate(0deg); }
            10% { transform: rotate(15deg); }
            20% { transform: rotate(-15deg); }
            30% { transform: rotate(10deg); }
            40% { transform: rotate(-10deg); }
            50% { transform: rotate(0deg); }
            100% { transform: rotate(0deg); }
        }
        
        /* Variabel warna sesuai tema  pop up detail katalog*/
        :root {--white: #ffffff;--black: #111111;--gold: #dab65b; /* Warna emas pastel sesuai tombol di gambar */ --border-gray: #dddddd; }
        .modal {display: none;position: fixed;z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); /* Gelap transparan */ overflow-y: auto; padding: 40px 10px; box-sizing: border-box;}
        .modal-content { background-color: var(--white); margin: auto; padding: 20px; border-radius: 4px; width: 100%; max-width: 650px; /* Lebar proporsional mirip gambar */ position: relative; box-shadow: 0 4px 15px rgba(0,0,0,0.2); box-sizing: border-box;}
        
        /* Tombol silang pojok kanan atas */
        .close-btn { position: absolute; top: 5px; right: 15px; color: #aaa; font-size: 28px; font-weight: bold; cursor: pointer; z-index: 10; }
        .close-btn:hover { color: var(--black); }
        
        /* Frame Gambar Utama */
        .modal-img-container {width: 100%; margin-bottom: 20px; }
        .modal-img { width: 100%; height: auto; max-height: 500px; object-fit: cover; display: block;}
        
        /* Bagian Konten Teks */
        .modal-body {font-family: Arial, sans-serif;}
        .modal-body h2 { color: var(--black); font-size: 1.3rem;line-height: 1.4; margin: 0 0 20px 0;font-weight: bold;}
        
        /* Struktur Tabel Spesifikasi (Sesuai Gambar) */
        .modal-table-container {width: 100%; overflow-x: auto; /* Agar aman di layar HP/mobile */ margin-bottom: 25px;}
        .modal-table {width: 100%;border-collapse: collapse; font-size: 11px; /* Ukuran font teks tabel agak kecil sesuai gambar */text-align: left; }
        .modal-table th, .modal-table td {border: 1px solid var(--border-gray);padding: 8px 6px;vertical-align: top;color: #333;}
        .modal-table th {background-color: #ffffff;font-weight: bold;color: #000;}
        /* Wrapper Tombol Keluar di Bagian Paling Bawah */
        .modal-footer {text-align: center; margin-top: 15px;}
        .btn-close-footer {display: inline-block;background-color: var(--gold);color: #000000;padding: 10px 60px; /* Lebar tombol memanjang ke samping */text-decoration: none;border-radius: 4px;font-size: 14px;font-weight: 500;cursor: pointer;border: none;transition: background 0.2s;}
        .btn-close-footer:hover { filter: brightness(0.9);}



        /* HAMBURGER MENU TOGGLE */
        .menu-toggle{display:none;flex-direction:column;justify-content:space-between; width:30px; height:22px;cursor:pointer;z-index:1001;}
        .menu-toggle span{ width:100%;height:3px; background:#333; border-radius:3px; transition:0.3s;}

        /* Animasi jadi X */
        .menu-toggle.active span:nth-child(1){transform:translateY(9px) rotate(45deg);}
        .menu-toggle.active span:nth-child(2){opacity:0;}
        .menu-toggle.active span:nth-child(3){transform:translateY(-9px) rotate(-45deg);}

        /* MOBILE */
        @media (max-width: 768px){
        header{display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap; /* penting */}
        .menu-toggle{display:flex;}
        .btn-cta{display:none;}
        #navbar{position:absolute;top:100%;left:0;width:100%;background:#fffffff6;max-height:0;overflow:hidden;transition:0.4s ease;box-shadow:0 5px 15px rgba(0,0,0,0.1); }
        #navbar.active{max-height:400px;}
        #navbar ul{flex-direction:column; padding:20px 0; display: flex; list-style: none; margin: 0; }
        #navbar ul li{text-align:center; margin:15px 0;}
}

*{
    box-sizing: border-box;
}

img,
iframe{
    max-width: 100%;
}

/* ================= MOBILE ================= */
@media (max-width: 768px) {

    /* Kontak + Form menjadi 1 kolom */
    .contact-wrap{
        grid-template-columns: 1fr;
        gap: 25px;
    }

    /* Form row menjadi vertikal */
    .form-row{
        flex-direction: column;
        gap: 0;
    }

    /* Input tidak meluber */
    .form-control{
        width: 100%;
        box-sizing: border-box;
    }

    /* Form padding lebih kecil */
    #rfq form{
        width: 100%;
    }

    /* Box form */
    .contact-wrap > div:last-child{
        padding: 20px !important;
    }

    /* Google Maps responsif */
    iframe{
        width: 100% !important;
        height: 250px !important;
    }

    /* Contact item agar teks panjang tidak keluar */
    .contact-item{
        display: flex;
        align-items: flex-start;
        gap: 10px;
        word-break: break-word;
    }

    .contact-label{
        min-width: 90px;
        flex-shrink: 0;
    }
}
/*btn crta kirim penawanra agar tidak hilang*/

@media(max-width:768px){

    form .btn-cta{
        display:block !important;
        width:100%;
    }

}

          .contact-item-flex {
            display: flex;
            align-items: flex-start;
            margin-bottom: 10px;
          }
          .contact-label-flex {
            width: 100px; /* Sesuaikan lebar label */
            display: flex;
            justify-content: space-between;
            font-weight: bold;
          }
          .contact-value-flex {
            flex: 1;
            padding-left: 10px;
          }