/* =========================================
   1. Fonts Import & Setup
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&display=swap');

@font-face {
    font-family: 'Gibbon Gazette';
    src: url('../assets/fonts/CCGibbonsGazette.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* =========================================
   2. Reset & Variables
   ========================================= */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

:root {
    --cream: #faebd7;
    --dark: #374151;
    --darker: #1f2937;
    --footer: #111827;
    --green: #84cc16;
    --orange: #ff7f50;
    --blue: #3b82f6;
    --white: #ffffff;
    --text-dark: #000000;
    --text-light: #9ca3af;
    
    /* Fallback color untuk Background Services & Materials */
    --bg-services: #4b5a6b; 
    --bg-materials: #344152; 
}

/* =========================================
   3. Base Typography
   ========================================= */
body { 
    font-family: 'Nunito', sans-serif; 
    line-height: 1.6; 
    background-color: var(--white);
}

ul { 
    list-style: none; 
}

a { 
    text-decoration: none; 
}

h1,h2 { 
    font-family: 'Gibbon Gazette', sans-serif;
    font-weight: 900; 
    text-transform: uppercase; 
    line-height: 1.2;
    margin-bottom: 20px;
    letter-spacing: 1.5px;
}
h3,h4,h5,h6 { 
    font-family: 'Nunito', sans-serif; 
    font-weight: 800; 
    line-height: 1.3; 
    margin-bottom: 15px; 
    letter-spacing: 1.5px;
}

h1 { font-size: 56px; }
h2 { font-size: 40px; }
h3 { font-size: 28px; }
h4 { font-size: 24px; }
h5 { font-size: 20px; }
h6 { font-size: 16px; }

/* =========================================
   4. Utilities & Color Classes
   ========================================= */
.container { 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 60px 20px; 
}
.container2 { 
    max-width: 1200px; 
    margin: 0 auto;
    padding-top: 20px;
}

.relative { 
    position: relative; 
}

.text-center { 
    text-align: center; 
}

/* Color Backgrounds */
.bg-cream { background-color: var(--cream); color: var(--text-dark); }
.bg-dark { background-color: var(--dark); color: var(--white); }
.bg-darker { background-color: var(--darker); color: var(--white); }
.bg-green { background-color: var(--green); color: var(--white); }
.bg-footer { background-color: var(--footer); }
.bg-white { background-color: var(--white); }

/* Background Gambar untuk Services & Materials */
.bg-services {
    background-color: var(--bg-services);
    background-image: url('../assets/images/services-intro-bg.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--white);
}

/* services.html punya hero sendiri (beda dari section "KREATORY'S SERVICES" di index.html),
   pakai motif blob yang sama dengan gallery-hero/contact-hero */
.bg-services-hero {
    background-image: url('../assets/images/gallery-hero-bg.svg');
}

.bg-materials {
    background-color: var(--bg-materials);
    background-image: url('../assets/images/cta-bg.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--white);
    padding-bottom: 100px;
}
.bg-about {
    background-color: var(--cream);
    background-image: url('../assets/images/aboutHeroo.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-bottom: 80px;
    background-position: 10%;
}
.bg-about1 {
    background-color: var(--cream);
    background-image: url('../assets/images/about-cream-bg.svg');
    background-size: cover;
    height: auto;
    background-position: center;
    background-repeat: no-repeat;
    padding-top: 20px;
    padding-bottom: 80px;
}

.bg-values { 
    background-image: url('../assets/images/services-intro-bg.svg');
    background-size: cover; 
    background-position: top;
    background-repeat: no-repeat;
}

.bg-values2 {
    background-image: url('../assets/images/why-section-bg.svg');
    background-size: cover; 
    background-position: center;
    background-repeat: no-repeat;
}
.panah-hijau {
  color: var(--green)!important;
  font-weight: 900;
  margin-left: 5px;
}
/* Styling Kotak Teks Bergaris Hijau */
.about-text-box {
    border: 2px solid var(--green);
    border-radius: 15px;
    padding: 30px;
    background-color: var(--white); 
    margin-bottom: 20px;
}

.about-text-box h3 { 
    color: var(--text-dark); 
    font-size: 20px; 
    margin-bottom: 15px; 
}

.about-text-box p { 
    font-size: 14px; 
    color: var(--text-dark); 
    font-weight: 500; 
    margin-bottom: 15px; 
    line-height: 1.6; 
}

.about-text-box p:last-child { 
    margin-bottom: 0; 
}

/* Text Colors */
.text-green { color: var(--green); }
.text-orange { color: var(--orange); }
.text-blue { color: var(--blue); }
.text-blue1 { 
    color: var(--blue); 
    font-family: 'Gibbon Gazette', sans-serif; 
    font-weight: 900; 
    font-size: 28px;
    text-align : left;
}
.text-dark { color: var(--dark); }
.text-darker { color: var(--darker); }
.text-white { 
    color: var(--white); 
}
.text-light { 
    color: var(--white); 
    max-width: 550px;
    line-height: 1.5;
    margin-top: 5px;
}
.text-light1 { 
    color: var(--white); 
    max-width: 650px;
    line-height: 1.5;
    margin-top: 5px;
}
.text-light2 { 
    color: var(--white); 
    max-width: 550px;
    line-height: 1.5;
    margin-top: 5px;
}

/* =========================================
   5. Buttons & Links
   ========================================= */
.btn-orange, 
.btn-blue, 
.btn-green { 
    padding: 10px 25px; 
    border-radius: 8px; 
    font-weight: 800; 
    color: var(--white); 
    display: inline-block; 
    transition: 0.3s; 
    margin-top: 15px; 
    font-family: 'Nunito', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-orange { background-color: var(--orange); }
.btn-blue { background-color: var(--blue); }
.btn-green { 
    background-color: var(--green); 
    padding: 15px 30px; 
    font-size: 18px; 
}

.btn-orange:hover, 
.btn-blue:hover, 
.btn-green:hover { 
    opacity: 0.8; 
}

.link-white { 
    color: var(--white); 
    font-size: 16px; 
    font-weight: 800; 
    font-family: 'Nunito', sans-serif;
    transition: color 0.3s ease;
}

.link-white:hover { 
    color: var(--green); 
}

/* =========================================
   6. Custom Headers (Split Header)
   ========================================= */
.split-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-end; 
    margin-bottom: 40px; 
    border-bottom: 1px solid rgba(255,255,255,0.1); 
    padding-bottom: 20px; 
}

.split-header h2 {
    margin-bottom: 0;
}

.featured-badge-icon {
    height: 220px;
    width: auto;
}
/* =========================================
   KHUSUS LAYOUT SERVICES DI HALAMAN HOME (INDEX)
   ========================================= */
.services .flex-row, 
.services .flex-row-reverse { 
    align-items: center; 
    background: transparent; 
    border: none; 
    border-radius: 0; 
    overflow: visible; 
}

.services .card-img { 
    max-width: 45%; 
    padding: 0; 
    position: relative;
    z-index: 2 !important; 
}
.services .card-img2 {
    max-width: 45%;
    padding: 0;
    position: relative;
    left: -20px;
    z-index: 2 !important;
}

.services .card-img img {
    height: 350px;
    border-radius: 20px;
    border: 2px solid var(--white);
}
.services .card-img2 img {
    /* Bingkai putih & sudut membulat udah ada di dalam SVG-nya sendiri, jadi gak perlu border lagi di sini */
    height: 380px;
    border-radius: 20px;
}


.services .card-content {
    background: var(--white);
    border: 2px solid var(--green);
    border-radius: 20px;
    padding: 40px;
    position: relative;
    z-index: 1;
    color: var(--text-dark);
}

.services .card-content p {
    margin-bottom: 20px;
}

/* Membuat efek overlap untuk layout normal (gambar di kiri) */
.services .flex-row .card-content {
    margin-left: -30px; 
    padding-left: 60px; 
}

/* Membuat efek overlap untuk layout reverse (gambar di kanan) */
.services .flex-row-reverse .card-content {
    margin-right: -60px; /* Tarik lebih jauh ke kanan (awalnya -30px) */
    padding-right: 90px; /* Padding dalam ikut dibesarkan biar teks nggak ketutup gambar */
}

/* List panah hijau khusus Home */
.services .card-content ul li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
    font-weight: 700;
}

.services .card-content ul li::before {
    content: '>';
    color: var(--green);
    position: absolute;
    left: 0;
    font-weight: 900;
}
#materials {
    scroll-margin-top: 100px;
}

/* =========================================
   7. Navbar
   ========================================= */
nav {
    position: fixed;
    width: 100%; 
    top: 0; 
    background: transparent;
    z-index: 1000; 
    padding: 0; 
    transition: background 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}

/* Navbar pas di-scroll untuk SEMUA HALAMAN (Terang / Efek Kaca) */
nav.scrolled {
    background: rgba(255, 255, 255, 0.7); 
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.nav-wrapper { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding-top: 15px; 
    padding-bottom: 15px; 
}

.nav-menu { 
    display: flex; 
    align-items: center; 
    flex: 1; 
}

.nav-links { 
    display: flex; 
    gap: 40px; /* Jarak antar teks menu */
    font-size: 14px; 
    font-weight: 800; 
    font-family: 'Gibbon Gazette', sans-serif; 
    letter-spacing: 1px; 
    white-space: nowrap; 
    margin: 0 auto; /* Kunci ajaibnya di sini: ini otomatis dorong menu persis ke tengah */
}

.nav-links a { 
    color: var(--text-dark); 
    transition: color 0.3s; 
}

.nav-links a.active, 
.nav-links a:hover { 
    color: var(--green); 
    border-bottom: 3px solid var(--green); 
    padding-bottom: 5px; 
}

.nav-actions { 
    display: flex; 
    gap: 15px; 
    align-items: center; 
    flex-shrink: 0; 
}

.nav-actions a { 
    margin-top: 0; 
    white-space: nowrap; 
}

.burger-menu { 
    display: none; 
    cursor: pointer; 
    flex-direction: column; 
    gap: 5px; 
    z-index: 1001; 
}

.burger-menu span { 
    width: 25px; 
    height: 3px; 
    background-color: var(--text-dark); 
    border-radius: 3px; 
    transition: all 0.3s ease; 
}

.logo { 
    flex-shrink: 0; 
}

.logo-img { 
    height: 60px; 
    width: auto; 
    display: block; 
    object-fit: contain; 
}

/* Nav Dark Page Exceptions */
nav.nav-dark-page:not(.scrolled) .nav-links a { 
    color: var(--white); 
}
nav.nav-dark-page:not(.scrolled) .burger-menu span { 
    background-color: var(--white); 
}

/* =========================================
   8. Hero Section
   ========================================= */
.hero {
    background-image: url('../assets/images/hero-bg.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    height: auto;
    padding-bottom: 80px;
}

.hero-wrapper { 
    padding-top: 150px;
    display: grid; 
    grid-template-columns: 2fr 1fr; 
    gap: 50px; 
    align-items: center; 
}

.hero p { 
    font-size: 18px; 
    margin-bottom: 30px; 
    font-weight: 800; 
    max-width: 500px;
}

.hero-content, 
.hero-image { 
    position: relative; 
    z-index: 1;
    padding-top: 60px;
    padding-bottom: 60px; 
}

/* Decorators */
.dec { 
    position: absolute; 
    z-index: 0; 
}

.dec-blue-circle { 
    width: 150px; 
    height: 150px; 
    background: var(--blue); 
    border-radius: 50%; 
    bottom: -50px; 
    left: -50px; 
}

.dec-green-blob { 
    width: 300px; 
    height: 400px; 
    background: var(--green); 
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; 
    top: -100px; 
    right: -50px; 
}

/* Services Hero Layout Additions */
.service-hero-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 20px; 
}

.service-hero-grid img { 
    width: 100%; 
    border-radius: 15px; 
    object-fit: cover; 
    aspect-ratio: 16/9; 
}

/* =========================================
   9. Services Section
   ========================================= */
.service-cards { 
    display: flex; 
    flex-direction: column; 
    gap: 40px; 
    position: relative; 
}

/* 1. Tambahin border hijau di container utama */
.flex-row, 
.flex-row-reverse { 
    display: flex; 
    align-items: stretch; 
    background: var(--white); 
    color: var(--text-dark); 
    border-radius: 20px; 
    border: 2px solid var(--green); /* Garis outline hijau */
    overflow: hidden; 
}

.flex-row-reverse { 
    flex-direction: row-reverse; 
}

/* 2. Tambahin padding biar gambar nggak nempel ke sisi container */
.card-img { 
    flex: 1; 
    max-width: 40%; 
    min-height: 300px; 
    padding: 30px; /* Jarak putih di sekeliling gambar */
    display: flex;
    align-items: center; /* Biar gambar posisinya di tengah secara vertikal */
}

/* 3. Kasih border-radius di gambarnya biar ujungnya melengkung */
.card-img img { 
    width: 100%; 
    height: 100%; /* atau ganti ke auto/maksimal height menyesuaikan isi jika ingin proporsinya lebih pas */
    object-fit: cover; 
    display: block; 
    border-radius: 15px; /* Melengkungkan sudut gambar */
}

.card-content { 
    flex: 1.5; 
    padding: 50px 40px; 
}

/* =========================================
   10. Materials Section
   ========================================= */
.grid-4 { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px; 
    align-items: stretch; /* KUNCI 1: Grid otomatis bikin semua kolom sama tinggi ngikutin teks terpanjang */
}

.material-card { 
    position: relative; 
    margin-top: 130px; 
    background: transparent; 
    display: block; /* Hapus flex yang bikin error melar ke bawah */
}

.spool-icon { 
    position: absolute; 
    top: -180px; 
    left: 50%; 
    transform: translateX(-50%); 
    width: 200px; 
    height: auto; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    z-index: 10;
}

.spool-icon img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain;
    position: static;
    transform: none;
}

/* Koreksi posisi per-icon: keempat file PLA1/PETG1/ABS1/TPU1.svg punya gambar spool
   ukuran sama, tapi diletakkan di posisi beda-beda di dalam canvas-nya masing-masing,
   jadi kelihatan ga sejajar pas di-center bareng. Digeser manual biar rata. */
.grid-4 .material-card:nth-child(1) .spool-icon img { transform: translateY(4px); }
.grid-4 .material-card:nth-child(2) .spool-icon img { transform: translateY(7px); }
.grid-4 .material-card:nth-child(3) .spool-icon img { transform: translateY(11px); }
.grid-4 .material-card:nth-child(4) .spool-icon img { transform: translate(-3px, 2px); }

.material-content { 
    background: var(--white); 
    border-radius: 15px; 
    border: 2px solid var(--green); /* Ketebalan garis disesuaikan */
    padding: 25px 20px 25px 20px; /* Padding distabilin */
    width: 100%; 
    text-align: left; 
    z-index: 1; 
    height: 100%; /* KUNCI 2: Bikin kotak putih nutupin tinggi Grid-nya aja, gak akan bablas */
}

.material-content h4 {
    color: var(--green);
    margin: 0 0 5px 0;
    font-size: 26px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.material-icon-badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.material-content span { 
    font-size: 14px; 
    font-weight: 800; 
    color: var(--text-dark); 
    margin-bottom: 12px; 
    display: block; 
    letter-spacing: 1px; 
}

.material-content p { 
    font-size: 14px; 
    color: var(--text-dark); 
    font-weight: 600; 
    margin: 0; 
    line-height: 1.5; 
}

/* =========================================
   11. About Section
   ========================================= */
.about-wrapper { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 50px; 
    align-items: center; 
}

.about h2 { 
    margin-bottom: 10px; 
}

.about h3 { 
    margin-bottom: 20px; 
}

.about p { 
    font-weight: 500; 
    margin-bottom: 15px; 
    font-size: 16px; 
}

/* =========================================
   12. Gallery Section
   ========================================= */
.gallery-container { 
    padding: 30px; 
    border-radius: 30px; 
}

.gallery-grid { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 15px; 
}

.gallery-img { 
    width: 100%; 
    aspect-ratio: 1 / 1; 
    object-fit: cover; 
    border-radius: 15px; 
    display: block; 
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
    cursor: pointer; 
}

/* =========================================
   Lightbox (klik foto gallery / featured project buat versi lebih gede)
   ========================================= */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 20, 20, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease;
}

.lightbox-overlay.active {
    opacity: 1;
    visibility: visible;
}

.lightbox-overlay img {
    max-width: 90vw;
    max-height: 85vh;
    border-radius: 15px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    transform: scale(0.95);
    transition: transform 0.25s ease;
}

.lightbox-overlay.active img {
    transform: scale(1);
}

.lightbox-close {
    position: absolute;
    top: 25px;
    right: 30px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: var(--white);
    font-size: 22px;
    line-height: 44px;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s ease;
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.bg-gallery-img {
    padding-top: 30px;
    padding-bottom: 30px;
    background-color: var(--darker);
    background-image: url('../assets/images/featured-projects-bg.svg');
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

/* Aksen oranye pojok kanan bawah (dipisah dari background biar posisinya konsisten di semua lebar layar) */
.featured-corner-accent {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 90px;
    height: auto;
    z-index: 0;
}

/* =========================================
   13. CTA (Call To Action) Section
   ========================================= */
.bg-cta-img {
    background-color: var(--darker);
    background-image: url('../assets/images/cta-banner-bg.jpg');
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    color: var(--white); 
    position: relative; 
}

.cta p { 
    color: var(--white); 
    font-size: 18px; 
    font-weight: 600; 
    margin-bottom: 20px; 
}

.cta-wrapper { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

.cta-input-group { 
    display: flex; 
    gap: 10px; 
    align-items: center; 
}

.cta-input-group input { 
    padding: 15px 20px; 
    border-radius: 8px; 
    border: none; 
    width: 400px; 
    font-family: 'Nunito', sans-serif; 
}

/* =========================================
   14. Footer
   ========================================= */
.footer-grid { 
    display: grid; 
    grid-template-columns: 2fr 1fr 1fr 1fr; 
    gap: 30px; 
    padding: 60px 20px; 
}

.footer-grid h3, 
.footer-grid h4 { 
    margin-bottom: 20px; 
    color: var(--white); 
}

.footer-brand h3 { 
    color: var(--orange); 
}

.footer-grid ul li { 
    margin-bottom: 10px; 
    font-size: 16px; 
}

.footer-grid ul li a { 
    color: #9ca3af; 
    transition: color 0.3s; 
}

.footer-grid ul li a:hover { 
    color: var(--white); 
}

.footer-brand p { 
    color: #9ca3af; 
    font-weight: 600; 
}

/* =========================================
   15. Explore Gallery Section 
   ========================================= */
.gallery-hero {
    background-image: url('../assets/images/gallery-hero-bg.svg');
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    padding-top: 150px;
    padding-bottom: 80px;
}

.explore-gallery {
    background-image: url('../assets/images/service-custom-bg.svg');
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    padding-top: 40px; 
    padding-bottom: 50px; 
}

.explore-header { 
    margin-bottom: 40px; 
}

.sub-explore { 
    font-size: 16px; 
    font-weight: 700; 
    letter-spacing: 1.5px; 
    line-height: 1.5; 
    margin-top: 5px; 
}

.filter-container { 
    display: flex; 
    justify-content: center; 
    gap: 15px; 
    margin-bottom: 40px; 
    flex-wrap: wrap; 
}

.filter-btn { 
    padding: 10px 25px; 
    border-radius: 8px; 
    border: none; 
    color: var(--white); 
    font-family: 'Nunito', sans-serif; 
    font-weight: 800; 
    font-size: 16px; 
    cursor: pointer; 
    transition: all 0.3s ease; 
    text-align: center; 
    line-height: 1.3; 
    letter-spacing: 1.5px;
}

.filter-btn span { 
    font-size: 14px; 
    font-weight: 600; 
    letter-spacing: 1.5px;
}

.filter-btn:not(.active) { background-color: var(--green); }
.filter-btn.active { background-color: var(--blue); }

.filter-btn:hover { 
    opacity: 0.8; 
    transform: translateY(-2px); 
}

.explore-box { 
    padding: 20px;
}

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

.explore-item { 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
    animation: fadeIn 0.5s ease forwards; 
}

.explore-item-text2 h4 { 
    color: var(--green); 
    font-family: 'Nunito', sans-serif; 
    font-size: 16px; 
    font-weight: 900; 
    margin-bottom: 2px; 
    padding-top :10px;
    letter-spacing: 0.5px; 
}

.explore-item-text2 p { 
    color: var(--darker); 
    font-size: 14px; 
    font-weight: 800; 
    margin: 0; 
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* =========================================
   16. Gallery Background Decorations
   ========================================= */
.dec-gal-tl { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 15vw; 
    height: 320px; 
    background-color: var(--green); 
    border-bottom-right-radius: 180px; 
    z-index: 0; 
}

.dec-gal-tr { 
    position: absolute; 
    top: 0; 
    right: 0; 
    width: 25vw; 
    height: 420px; 
    background-color: var(--green); 
    border-bottom-left-radius: 220px; 
    z-index: 0; 
}

.dec-gal-sq-or { 
    position: absolute; 
    top: 120px; 
    right: 18vw; 
    width: 35px; 
    height: 35px; 
    background-color: var(--orange); 
    z-index: 0; 
}

.dec-gal-sq-bl { 
    position: absolute; 
    top: 400px; 
    right: 6vw; 
    width: 50px; 
    height: 50px; 
    background-color: var(--blue); 
    z-index: 0; 
}

.dec-gal-dots { 
    position: absolute; 
    top: 420px; 
    left: 3vw; 
    width: 80px; 
    height: 80px; 
    background-image: radial-gradient(#fbbf24 3.5px, transparent 3.5px); 
    background-size: 20px 20px; 
    z-index: 0; 
}

.dec-gal-dots::after { 
    content: ''; 
    position: absolute; 
    bottom: -5px; 
    right: -5px; 
    width: 18px; 
    height: 18px; 
    background-color: #fbbf24; 
    border-radius: 50%; 
}

/* =========================================
   17. About Us Page Styles
   ========================================= */
/* About Hero Grid */
.about-hero-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
}

.about-hero-item {
    border-radius: 30px;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,0.1);
}

.about-hero-grid img {
    display: block;
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    /* Sumber gambarnya udah punya sudut rounded sendiri (di-bake putih ke JPG-nya),
       jadi di-zoom dikit biar sudut putih bawaan itu ke-crop keluar frame oleh
       overflow:hidden di .about-hero-item, dan radius yang keliatan murni dari CSS */
    transform: scale(1.08);
}

/* Values Section (2 Kolom) */
.values-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 60px;
}

.value-card {
    border-radius: 20px;
    padding: 60px 40px 40px;
    text-align: center;
    position: relative;
    border: 3px solid var(--green);
}

.value-card h4 {
    font-size: 22px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.value-card p {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-dark);
    text-align: left;
}

.floating-icon-lg {
    position: absolute;
    top: -70px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: auto;
}

/* Why Section (3 Kolom) */
.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 80px;
}

.why-card {
    border-radius: 20px;
    padding: 60px 25px 30px;
    text-align: left;
    position: relative;
    border: 2px solid var(--green);
}

.why-card h5 {
    font-size: 18px;
    margin-bottom: 10px;
    color: var(--darker);
}

.why-card p {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
}

/* Icon Resets & Specifics */
.floating-icon-sm {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.why-card:nth-child(1) .floating-icon-sm {
    height: 120px;     /* Patok tingginya aja */
    width: auto;      /* Lebarnya ngikutin biar proporsional */
    top: -60px;       /* Atur seberapa melayang dari garis */
    left : 80px;      /* Geser ke kiri biar pas di tengah kotak */
}

.why-card:nth-child(2) .floating-icon-sm {
    height: 120px;     /* Patok tingginya aja */
    width: auto;      /* Lebarnya ngikutin biar proporsional */
    top: -60px;       /* Atur seberapa melayang dari garis */
    left : 80px; 
}

.why-card:nth-child(3) .floating-icon-sm {
    height: 100px;     /* Patok tingginya aja */
    width: auto;      /* Lebarnya ngikutin biar proporsional */
    top: -45px;       /* Atur seberapa melayang dari garis */
    left : 100px; 
}

/* CTA Pill */
.cta-pill {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 50px;
    margin-top: 20px;
}

.cta-pill p {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}

/* Dekorasi Geometris Background About */
.dec-about-blue {
    position: absolute;
    top: 10%;
    left: -5%;
    width: 15vw;
    height: 30vh;
    background-color: var(--blue);
    border-radius: 0 100px 100px 0;
    z-index: 0;
}

.dec-about-orange {
    position: absolute;
    top: 35%;
    left: 8%;
    width: 40px;
    height: 40px;
    background-color: var(--orange);
    z-index: 0;
}

.dec-about-green {
    position: absolute;
    top: -10%;
    right: -10%;
    width: 30vw;
    height: 50vh;
    background-color: var(--green);
    border-radius: 200px 0 0 200px;
    z-index: 0;
}

.dec-about-dots {
    position: absolute;
    top: 40%;
    right: 5%;
    width: 60px;
    height: 100px;
    background-image: radial-gradient(#fbbf24 3px, transparent 3px);
    background-size: 20px 20px;
    z-index: 0;
}

.dec-why-blob {
    position: absolute;
    right: -5%;
    top: 30%;
    width: 250px;
    height: 250px;
    background-color: var(--orange);
    border-radius: 50% 30% 60% 40%;
    opacity: 0.8;
    z-index: 0;
}

/* =========================================
   18. Contact Us Page Styles
   ========================================= */
.contact-hero-section {
    background-color: var(--darker);
    background-image: url('../assets/images/contact-hero-bg.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    padding-top: 150px;
    padding-bottom: 0;
    overflow: hidden;
    color: var(--white);
}

/* 1. Hilangkan padding bawah container biar kotaknya mepet ke bawah */
.contact-hero-section .container {
    padding-bottom: 0 !important;
}

.contact-content { 
    position: relative; 
    z-index: 2; 
    margin-bottom: 40px; 
}

/* 2. Z-index banner diset 4 biar di depan elemen background */
.contact-banner-img { 
    width: 100%; 
    height: 350px; 
    object-fit: cover; 
    border-radius: 25px; 
    display: block; 
    position: relative; 
    z-index: 4; 
}

/* Contact Cards */
.contact-cards-wrapper { 
    display: flex; 
    gap: 20px; 
    margin-top: -30px; 
    padding: 0; 
    position: relative; 
    z-index: 2; 
}

.contact-card { 
    background: var(--white); 
    border-radius: 20px; 
    padding: 80px 30px 25px 30px;
    flex: 1; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.1); 
}

.contact-card-info h4 { 
    margin-bottom: 5px; 
    font-size: 20px; 
    font-family: 'Gibbon Gazette', sans-serif;
    letter-spacing: 0.5px;
}

.contact-card-info p { 
    font-size: 13px; 
    color: var(--text-dark); 
    font-weight: 700; 
    margin-bottom: 25px; 
}

.contact-pill-btn { 
    padding: 10px 20px; 
    border-radius: 50px; 
    color: var(--white); 
    font-weight: 800; 
    font-size: 25px; 
    display: inline-block; 
    font-family: 'Nunito', sans-serif; 
    letter-spacing: 0.5px; 
}

.bg-pill-orange { background-color: var(--orange); }
.bg-pill-blue { background-color: var(--blue); }

.contact-icon-lg { 
    font-size: 70px; 
    margin-left: 10px; 
}

/* Form Section */
.contact-form-section { 
    background-color: var(--darker); 
    background-image: url('../assets/images/services-intro-bg.svg'); /* Ganti nama file-nya */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 80px 0; 
    text-align: center; 
    color: var(--white); 
    position: relative; 
    z-index: 1; 
    margin-top: -50px; 
}

.contact-form-wrapper { 
    max-width: 800px; 
    margin: 0 auto; 
    margin-top: 50px; 
    text-align: left; 
}

.contact-form-wrapper input, 
.contact-form-wrapper textarea { 
    width: 100%; 
    padding: 18px 25px; 
    margin-bottom: 20px; 
    border-radius: 12px; 
    border: none; 
    font-family: 'Nunito', sans-serif; 
    font-size: 15px; 
    background-color: var(--white); 
    color: var(--text-dark); 
    font-weight: 700; 
    outline: none; 
    transition: box-shadow 0.3s; 
}

.contact-form-wrapper input:focus, 
.contact-form-wrapper textarea:focus { 
    box-shadow: 0 0 0 3px rgba(132, 204, 22, 0.3); 
}

.contact-form-wrapper textarea { 
    resize: vertical; 
    min-height: 180px; 
}

/* Custom File Upload */
.contact-file-upload { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 15px; 
    background-color: var(--white); 
    color: #9ca3af; 
    padding: 18px; 
    border-radius: 12px; 
    margin-bottom: 30px; 
    cursor: pointer; 
    font-weight: 700; 
    transition: background 0.3s; 
}

.contact-file-upload:hover { 
    background-color: #f3f4f6; 
}

.contact-file-upload input[type="file"] { 
    display: none; 
}

.contact-file-upload i { 
    font-size: 22px; 
}

/* CTA Section */
.contact-cta { 
    background-color: var(--green); 
    padding: 80px 0; 
    text-align: center; 
    position: relative; 
    overflow: hidden; 
}

.cta-pill-text { 
    background-color: var(--white); 
    color: var(--text-dark); 
    padding: 15px 20px; 
    border-radius: 8px; 
    font-weight: 600; 
    display: inline-block; 
    margin: 20px 0 30px; 
    font-size: 15px; 
    letter-spacing: 0.5px; 
}

/* =========================================
   19. Halaman Services Fixes (Unique Classes Terpisah)
   ========================================= */
/* Background Image untuk Section Custom 3D */
.bg-service-custom {
    background-color: var(--darker); /* Warna dasar kalau gambar gagal load */
    background-image: url('../assets/images/services-intro-bg.svg');
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
}

/* Background Image untuk Section FDM Technology */
.bg-service-fdm {
    background-color: #3B424A; /* Warna dasar kalau gambar gagal load */
}
/* =========================================
   OUR MATERIALS — layout
   ========================================= */
.materials-heading { margin-bottom: 50px; position: relative; z-index: 2; }

.materials-list {
    display: flex;
    flex-direction: column;
    gap: 34px;
}

/* Baris per material: kotak info (kiri) + kartu gambar (kanan) */
.services-material-grid {
    display: grid;
    /* KUNCI 1: Kolom kiri 340px, kolom kanan dibatasi maksimal 750px biar ukurannya ngepas dan gak ketarik lebar */
    grid-template-columns: 340px minmax(auto, 750px); 
    justify-content: space-between; /* Memberikan spasi otomatis di tengah antar 2 kotak */
    align-items: center; /* KUNCI 2: Memaksa kotak teks kiri berada tepat di tengah (center) secara vertikal */
    gap: 40px; /* Jarak aman kalau layarnya agak mengecil */
    position: relative;
    z-index: 2;
    margin-bottom: 80px; /* Memberikan jarak nafas antar baris material (PLA, PETG, dst) */
}

/* Membungkus Kotak Material Info, biar icon spool bisa nempel di atasnya */
.services-material-box {
    position: relative;
}

/* Posisi Icon Spool KHUSUS Halaman Services */
.services-spool-icon {
    position: absolute;
    top: -50px;
    left: 28px;
    width: 100px;
    z-index: 10;
    line-height: 0;
}

.services-spool-icon img {
    width: 100%;
    filter: drop-shadow(0 8px 10px rgba(0,0,0,0.15));
}

/* Kotak Teks Deskripsi Material */
.services-material-content {
    background: var(--white);
    border-radius: 20px;
    border: 2px solid var(--green);
    padding: 44px 26px 26px 26px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.services-material-content h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--darker);
    font-size: 18px;
    font-weight: 900;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.material-icon-badge {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.material-icon-badge i {
    color: var(--darker);
    font-size: 13px;
}

.services-material-content p {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-dark);
    line-height: 1.6;
    margin: 0;
}

/* Kartu putih gabungan berisi 2 contoh produk */
.product-example-wrapper {
    background: var(--white);
    border-radius: 20px;
    padding: 25px; /* Disesuaikan biar lega kayak di mockup */
    display: grid;
    grid-template-columns: 1fr 1fr; /* Belah 2 di dalam kotak putih */
    gap: 20px; /* Jarak antar gambar */
    box-shadow: 0 10px 25px rgba(0,0,0,0.03);
    height: auto; /* KUNCI 1: Jangan dipatok 420px, biarkan auto ngikutin isi */
    position: relative;
    z-index: 2;
}

.product-item {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Jarak antara gambar dan teks di bawahnya */
    height: 100%;
}

.product-item .img-frame {
    width: 100%;
    aspect-ratio: 4 / 4.5; /* KUNCI 2: Bikin proporsi gambar otomatis seragam dan rapi (agak portrait) */
    border-radius: 12px;
    overflow: hidden;
}

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

.explore-item-text2 {
    height: auto; /* KUNCI 3: Hapus fixed height 58px biar teks nggak nabrak */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.explore-item-text2 h4 {
    font-size: 15px;
    font-weight: 900;
    color: var(--green);
    margin-bottom: 2px;
    text-transform: uppercase;
}

.explore-item-text2 p {
    font-size: 13px;
    font-weight: 800;
    color: var(--darker);
    margin: 0;
    text-transform: uppercase;
}

/* Table FDM Rapi & Clean */
.tech-table-clean {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    margin-top: 10px;
}
.tech-table-clean th {
    padding-bottom: 15px;
    color: var(--darker);
    font-size: 14px;
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    border-bottom: 2px solid #e5e7eb;
}
.tech-table-clean td {
    padding: 15px 10px 15px 0;
    font-weight: 700;
    font-size: 13px;
    color: var(--text-dark);
    vertical-align: top;
    border-bottom: 1px solid #f3f4f6;
}
.tech-table-clean tr:last-child td {
    border-bottom: none;
}
.tech-table-clean td:first-child {
    font-weight: 800;
}
/* =========================================
   Hover Effects (Khusus Desktop)
   ========================================= */
/* 4. Update Efek Hover (Pindah ke Gambar & Ubah jadi Zoom In) */
@media screen and (min-width: 993px) {
    /* Set dasar transisi buat gambarnya */
    .product-item img {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    /* Efek Zoom in pas gambarnya di-hover (Mirip Gallery) */
    .product-item img:hover {
        transform: scale(1.05); /* Efek membesar */
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Kasih bayangan biar pop-up */
        z-index: 2; 
        position: relative; 
    }
}
@media screen and (max-width: 768px) {
    .product-example-wrapper {
        grid-template-columns: 1fr;
        padding: 16px;
        gap: 16px;
    }
    .product-example-wrapper { height: auto; }
    .product-item { height: auto; }
    .product-item .img-frame { height: 190px; }
    .explore-item-text2 { height: auto; }

    .services-spool-icon { width: 64px; top: -28px; left: 22px; }
    .services-material-content { padding: 38px 20px 20px 20px; }
    .services-material-content h4 { font-size: 16px; }
}
/* Background Image untuk Section Our Materials */
.bg-materials-section {
    background-color: #fdf1ea; /* Warna dasar */
    background-image: url('../assets/images/about-hero-bg.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-position: 5% ; /* Atur posisi background biar pas di semua resolusi */
}
/* =========================================
   20. Order Process & FAQ Page Styles
   ========================================= */
.process-steps {
    max-width: 850px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.process-step {
    display: flex;
    gap: 30px;
    padding-bottom: 40px;
    position: relative;
}

/* Garis penghubung antar step, berhenti di step terakhir */
.process-step:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 24px;
    top: 50px;
    bottom: 0;
    width: 2px;
    background-color: var(--green);
    opacity: 0.3;
}

.process-step-number {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--green);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Gibbon Gazette', sans-serif;
    font-size: 20px;
    position: relative;
    z-index: 1;
}

.process-step-content {
    background: var(--white);
    border: 2px solid var(--green);
    border-radius: 20px;
    padding: 25px 30px;
    flex: 1;
}

.process-step-content h3 {
    font-size: 18px;
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.process-step-content p {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-dark);
    line-height: 1.6;
}

/* FAQ Accordion */
.faq-list {
    max-width: 850px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.faq-item {
    background: var(--white);
    border: 2px solid var(--green);
    border-radius: 15px;
    padding: 20px 25px;
}

.faq-item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    font-weight: 800;
    font-size: 16px;
    color: var(--text-dark);
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item[open] summary {
    margin-bottom: 12px;
    color: var(--green);
}

.faq-item p {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-dark);
    line-height: 1.6;
}

.faq-icon {
    position: relative;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.faq-icon::before,
.faq-icon::after {
    content: '';
    position: absolute;
    background-color: var(--green);
    border-radius: 2px;
}

.faq-icon::before {
    width: 100%;
    height: 3px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.faq-icon::after {
    width: 3px;
    height: 100%;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    transition: transform 0.25s ease;
}

.faq-item[open] .faq-icon::after {
    transform: translateX(-50%) rotate(90deg);
}

/* =========================================
   21. Responsive & Mobile Queries
   ========================================= */
html, body { overflow-x: hidden; }

/* Desktop Animations */
@media screen and (min-width: 993px) {
    .gallery-img:hover { 
        transform: scale(1.05); 
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); 
        z-index: 2; 
        position: relative; 
    }
}

/* Tablet & Smaller Devices (max-width: 992px) */
@media screen and (max-width: 992px) {
    .burger-menu { display: flex; z-index: 1002; } 
    .nav-menu { 
        position: fixed; top: 0; right: -100%; width: 100%; height: 100vh; 
        background-color: var(--cream); flex-direction: column; align-items: flex-start; 
        padding: 100px 40px 40px; box-shadow: -5px 0 15px rgba(0,0,0,0.1); 
        transition: right 0.4s ease; gap: 30px; z-index: 1001; 
    }
    .nav-menu.active { right: 0; }
    .nav-links { flex-direction: column; width: 100%; gap: 20px; font-size: 16px; margin: 0; }
    .nav-actions { flex-direction: column; width: 100%; align-items: flex-start; }
    .nav-actions a { width: 100%; text-align: center; }
    
    .burger-menu.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .burger-menu.active span:nth-child(2) { opacity: 0; }
    .burger-menu.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
    
    .burger-menu.active span { background-color: var(--text-dark) !important; }
    .nav-menu.active .nav-links a { color: var(--text-dark) !important; }
    
    .grid-4, .service-hero-grid, .values-grid, .why-grid, .about-hero-grid { grid-template-columns: 1fr; }
    /* .gallery-grid (Featured Projects) ikut class .grid-4, tapi harusnya tetap 2 kolom di tablet, bukan ke-collapse jadi 1 */
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }

    /* Split-header (judul + link "LEARN MORE"/"SEE GALLERY") mepet banget kalau dipaksa 1 baris di lebar tablet,
       jadi ditumpuk vertikal aja mulai dari breakpoint ini (sama kayak yang udah dipakai di mobile) */
    .split-header { flex-direction: column; align-items: flex-start; gap: 15px; }
    .explore-grid { grid-template-columns: repeat(2, 1fr); }
    
    /* Layout Material di HP/Tablet */
    .materials-list { gap: 60px; }
    .services-material-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .services-material-content { padding-top: 44px; height: auto; }
    .product-example-wrapper { height: auto; }
    .product-item { height: auto; }
    .product-item .img-frame { height: 300px; } /* Sesuaikan tinggi gambar tablet */
    .explore-item-text2 { height: auto; }

    .filter-container { gap: 10px; }
    .filter-btn { padding: 8px 15px; font-size: 12px; }
    .explore-box { padding: 20px; }
    
    .value-card { margin-top: 80px; }
    .why-card { margin-top: 60px; text-align: center; }
    .floating-icon-sm { left: 50%; transform: translateX(-50%); }
    .cta-pill p { font-size: 14px; }
    
    .contact-cards-wrapper { flex-direction: column; padding: 0; }
    .contact-banner-img { height: 250px; }
}
/* Mobile Devices (max-width: 768px) */
@media screen and (max-width: 768px) {
    h1 { font-size: 38px; }
    h2 { font-size: 30px; }
    h3 { font-size: 24px; }
    .container { padding: 40px 15px; }
    
    nav { padding: 10px 0; }
    .nav-wrapper { padding: 10px 20px; }
    
    .hero-wrapper { grid-template-columns: 1fr; padding-top: 150px; text-align: center; min-height: auto; }
    .hero p { margin-left: auto; margin-right: auto; }
    .split-header { flex-direction: column; align-items: flex-start; gap: 15px; }
    
    .flex-row, .flex-row-reverse { flex-direction: column; }
    .card-img { max-width: 100%; width: 100%; min-height: auto; padding: 20px; }
    .card-img img { width: 100%; height: 250px; object-fit: cover; }
    .card-content { padding: 10px 20px 30px 20px; }
    .gear-icon { top: 0; transform: translate(-50%, -50%); }
    
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .about-wrapper { grid-template-columns: 1fr; text-align: center; }
    .cta-wrapper { flex-direction: column; text-align: center; gap: 20px; }
    .cta-input-group { flex-direction: column; width: 100%; }
    .cta-input-group input { width: 100%; }
    .cta-input-group { 
        align-items: center !important; 
    }
    .footer-grid { grid-template-columns: 1fr !important; text-align: center; gap: 40px; }
    .footer-brand div { justify-content: center !important; }
    .footer-brand p { margin-left: auto !important; margin-right: auto !important; }
    
    .contact-cards-wrapper { margin-top: -40px; }
    .contact-banner-img { height: 180px; }

    .process-step { gap: 15px; }
    .process-step-number { width: 40px; height: 40px; font-size: 16px; }
    .process-step:not(:last-child)::before { left: 19px; top: 40px; }
    .process-step-content { padding: 20px; }
    .faq-item { padding: 15px 18px; }
    .faq-item summary { font-size: 15px; }
    .contact-card { flex-direction: column; text-align: center; gap: 15px; padding: 40px 20px 25px 20px; }
    .contact-icon-lg { margin-left: 0; margin-top: 10px; }
    .cta-pill-text { font-size: 13px; padding: 15px 20px; }
/* Reset overlap horizontal desktop menjadi overlap vertikal di mobile */
    .services .flex-row .card-content, 
    .services .flex-row-reverse .card-content {
        margin-left: 0;       /* Reset tarikan ke kiri */
        margin-right: 0;      /* Reset tarikan ke kanan */
        margin-top: -30px;    /* Tarik kotak teks ke atas biar nyatu dan menyelip di bawah gambar */
        padding: 50px 20px 30px 20px; /* Rapihkan padding agar seimbang di kiri-kanan */
    }

    /* Pastikan pembungkus gambar penuh seukuran layar */
    .services .card-img,
    .services .card-img2 {
        max-width: 100%;
        width: 100%;
        padding: 0 15px;
        left: 0;     /* Reset offset overlap desktop, di mobile gak perlu digeser */
    }

    /* Atur proporsi gambarnya di mobile */
    .services .card-img img, 
    .services .card-img2 img {
        width: 100%;
        height: 250px;
        object-fit: cover;
    }
    .hero, 
    .bg-about1 {
        height: auto;
        padding-bottom: 60px; /* Kasih ruang nafas sedikit di bawah gambar */
    }
}
/* Small Mobile Devices (max-width: 480px) */
@media screen and (max-width: 480px) {
    h1 { font-size: 32px; }
    h2 { font-size: 26px; }
    .btn-green, .btn-orange, .btn-blue { padding: 10px 20px; font-size: 14px; }
    .explore-grid { grid-template-columns: 1fr; }
}

/* =========================================
   Contact form (dirender oleh Grav Form plugin)
   ========================================= */
.contact-form-wrapper .form-field { margin: 0; }

/* Label disembunyikan secara visual (desain memakai placeholder) tapi tetap terbaca screen reader */
.contact-form-wrapper .form-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.contact-form-wrapper .buttons button {
    border: none;
    cursor: pointer;
    padding: 12px 40px;
}

/* Kotak upload file (Dropzone). Selector dibuat lebih spesifik supaya menimpa style bawaan plugin */
.contact-form-wrapper .form-input-file.dropzone {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    min-height: 0;
    padding: 18px;
    margin-bottom: 30px;
    border: none;
    border-radius: 12px;
    background: var(--white);
    color: #9ca3af;
    cursor: pointer;
    transition: background 0.3s;
}

.contact-form-wrapper .form-input-file.dropzone:hover { background: #f3f4f6; }

.contact-form-wrapper .form-input-file .dz-default.dz-message {
    position: static;
    transform: none;
    margin: 0;
}

.contact-form-wrapper .dz-message .dz-button {
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.contact-form-wrapper .dz-message .dz-button::after {
    content: "\f15c";
    font-family: "Font Awesome 6 Free";
    font-weight: 400;
    margin-left: 15px;
}

.contact-form-wrapper .dropzone .dz-preview { margin: 6px; }

.contact-form-wrapper .dropzone input[type="file"] { display: none; }

/* Pesan sukses / gagal setelah kirim */
.contact-form-wrapper .notices {
    margin-bottom: 25px;
    padding: 16px 22px;
    border-radius: 12px;
    font-weight: 700;
    color: var(--white);
}

.contact-form-wrapper .notices p { margin: 0; }
.contact-form-wrapper .notices.green { background: #16a34a; }
.contact-form-wrapper .notices.red { background: #dc2626; }
.contact-form-wrapper .notices.yellow { background: #d97706; }