.cta__shape::before {
  content: '';
  width: 150px;
  height: 171px;
  background-color: #60f788;
  position: absolute;
  top: -200px;
  right: 57px;
  border-radius: 10px;
  opacity: .1;
  -webkit-animation-name: float-bob-y;
  animation-name: float-bob-y;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation: float-bob-y 10s linear 0s infinite;
          animation: float-bob-y 10s linear 0s infinite;
}

.cta__shape::after {
  content: '';
  width: 60px;
  height: 60px;
  background-color: #b3bbb7;
  opacity: .1;
  position: absolute;
  top: -60px;
  right: 177px;
  border-radius: 10px;
  -webkit-animation-name: float-bob-y;
  animation-name: float-bob-y;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.services-one__single-imgx {
    padding-bottom: 20px;
}

.sec-title .icon {
    margin-top: 10px;
}

@media screen and (max-width: 480px) {
	.main-slider .image-layer-overlay {
		position: relative;
		top: 95px;
	}

	.blog-one__shape, .cta__shape { display:none; }
}

/* Kontainer Utama (Tetap mengunci tinggi bingkai) */
.projects-one__single .projects-one__single-img {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 320px !important; 
    width: 100% !important;
    background-color: #ffffff !important;
    border-radius: 12px;
    overflow: hidden;
}

/* Default untuk GAMBAR KECIL (Aman di tengah berlatar putih) */
.projects-one__single .projects-one__single-img img {
    width: auto !important;
    height: auto !important;
    max-width: 95% !important;
    max-height: 95% !important;
}

/* KHUSUS GAMBAR BESAR (Otomatis Full Cover sesuai gambar 1 di Screenshot (82)_2.jpg) */
.projects-one__single .projects-one__single-img img.is-large {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important; /* Memotong & memenuhi kontainer dengan rapi */
}

/* Container Utama Kiri */
.product-images-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

/* ==========================================================================
   1. KOTAK GAMBAR UTAMA (SLIDESHOW) - DIBUAT DINAMIS
   ========================================================================== */
#mainProductImage {
    transition: opacity 0.3s ease-in-out;
    opacity: 1;
}

#mainProductImage.fade-out {
    opacity: 0;
}

.main-image-box {
    width: 100%;
    display: flex;
    justify-content: center; /* Memastikan gambar tetap di tengah jika kontainer lebih lebar */
    align-items: center;
    background-color: #f9f9f9;
    overflow: visible;
}

.main-image-box img {
    width: auto;          /* Lebar dinamis sesuai file asli */
    height: auto;         /* Tinggi dinamis sesuai file asli */
    max-width: 100%;      /* Jaga-jaga agar gambar besar tidak meluber keluar layar */
    max-height: 500px;    /* Batasan tinggi maksimal (opsional, sesuaikan dengan estetika webmu agar lemari tidak terlalu tinggi raksasa) */
    display: block;
}

/* ==========================================================================
   2. LAJUR THUMBNAIL (Tetap sama, hanya diganti object-fit agar tidak terpotong)
   ========================================================================== */
.thumbnail-bar {
    display: flex;
    gap: 10px;
    padding: 12px;
    background-color: #eef7ed; 
    border-radius: 4px;
}

.thumb-item {
    width: 70px;
    height: 70px;
    cursor: pointer;
    border: 1px solid #ccc;
    background-color: #fff;
    padding: 2px;
    transition: all 0.2s ease;
}

.thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* OPTIONAL: Thumbnail juga mengecil utuh di dalam kotak 70x70 */
}

.thumb-item.active {
    border: 2px solid #e2a127; 
}

.separator { color: #fff; }

/* ==========================================================================
   3. PRODUCT CARD (PRODUCT LIST / KATALOG GRID) - SERAGAM & UTUH
   ========================================================================== */

/* 1. KOTAK PEMBUNGKUS (Aura luar yang harus seragam dan rounded) */
.product-card {
    width: 100%;          
    height: 250px;             /* Mengunci tinggi kotak katalog agar baris grid lurus simetris */
    background-color: #ffffff; /* Warna latar belakang pembungkus */
    border-radius: 12px;       /* Lengkungan sudut mengunci di luar kotak, silakan sesuaikan ukurannya */
    overflow: hidden;          /* KUNCI: Memotong sisa warna background/gambar agar sudut tetap bulat sempurna */
    position: relative;
    
    /* Memaksa gambar (baik vertikal/horizontal) selalu berada tepat di tengah kotak */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Opsional: Beri sedikit border tipis jika ingin kotaknya lebih tegas */
    border: 1px solid #eaeaea; 
}

/* 2. GAMBAR PRODUK (Hanya fokus mengecil secara proporsional di dalam kotak) */
.product-card img {
    max-width: 100%;
    max-height: 100%;
    width: auto !important;    /* Biarkan lebar dinamis mengikuti bentuk asli gambar */
    height: auto !important;   /* Biarkan tinggi dinamis mengikuti bentuk asli gambar */
    object-fit: contain;       /* KUNCI: Gambar mengecil secara proporsional, UTUH 100% TIDAK terpotong */
    display: block;
    padding: 10px;             /* Memberi jarak aman agar gambar produk tidak menempel ke tepi rounded */
}


/*accordion*/
/* Container Utama Sidebar */
.sidebar-accordion {
    width: 100%;
    max-width: 280px;
    background: #ffffff;
    padding: 15px;
    border-radius: 8px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.sidebar-title {
    font-size: 1.2rem;
    color: #2d4a22; /* Hijau Tua */
    margin-bottom: 20px;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 8px;
    font-weight: bold;
}

/* Reset List */
.accordion-menu, .accordion-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* --- LEVEL 1 (MENU UTAMA) --- */
.lvl1-item {
    margin-bottom: 8px;
    position: relative;
}

.lvl1-link {
    display: block;
    padding: 10px 12px;
    background: #f8f9fa;
    color: #495057;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    border-radius: 4px;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}

.lvl1-link:hover {
    background: #eef5ec;
    color: #2d4a22;
    border-left-color: #5b8c4b;
}

/* --- LEVEL 2 (SUB MENU) --- */
.lvl2-list {
    margin-top: 5px;
    margin-bottom: 5px;
    border-left: 1px dashed #ced4da;
    margin-left: 15px;
    padding-left: 10px;
}

.lvl2-link {
    display: block;
    padding: 6px 10px;
    color: #6c757d;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.lvl2-link:hover {
    color: #2d4a22;
    font-weight: 600;
}

/* --- LEVEL 3 (SUB-SUB MENU) --- */
.lvl3-list {
    margin-left: 12px;
    border-left: 1px dotted #dee2e6;
    padding-left: 10px;
}

.lvl3-link {
    display: block;
    padding: 4px 10px;
    color: #868e96;
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.2s ease;
}

.lvl3-link:hover {
    color: #5b8c4b;
    text-decoration: underline;
}

/* Link Aktif Berdasarkan URL */
.accordion-menu a.active {
    color: #2d4a22 !important;
    background: #eef5ec;
    font-weight: bold;
}

/* --- LOGIC SHOW / HIDE ACCORDION (FIXED) --- */

/* 1. Sembunyikan default semua sub-menu */
.accordion-menu .sub-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

/* 2. JIKA elemen LI induk memiliki class .open (Perbaikan Spasi Selektor) */
.lvl1-item.open > .sub-menu,
.lvl2-item.open > .sub-menu {
    max-height: 1000px; /* Buka menu secara halus */
    transition: max-height 0.5s ease-in;
}

/* Pemanis: Mengubah kursor jadi pointer untuk menu yang punya anak */
.has-children > a {
    cursor: pointer;
    position: relative;
    padding-right: 30px; /* Beri ruang untuk panah */
}

/* BONUS: Efek Panah Indikator Cetakan Menu */
.has-children > a::after {
    content: '▸';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.2s ease;
    font-size: 0.8rem;
}

/* Panah berubah arah ke bawah jika menu terbuka (.open) */
.has-children.open > a::after {
    content: '▾';
}

/* Jika item memiliki class 'has-children', ubah kursornya menjadi pointer bantuan atau biarkan tetap pointer */
.has-children > a {
    cursor: pointer;
}
/* Menargetkan link yang berada di dalam item yang aktif langsung */
.lvl2-item.open > a.lvl2-link,
.lvl3-item a.lvl3-link[style*="font-weight"] { 
    color: #2d4a22 !important; /* Warna hijau khas Indonesia Hijau */
    font-weight: bold !important;
    text-decoration: underline !important;
}

/* --- HIERARKI FONT INDONESIA HIJAU SIDEBAR --- */

/* Level 1: Kategori Utama (Diturunkan sedikit agar tidak terlalu dominan) */
.accordion-menu .lvl1-link {
    font-size: 13px !important;
    text-transform: uppercase; /* Tetap UPPERCASE agar tegas sebagai induk */
    letter-spacing: 0.5px;
}

/* Level 2: Sub-Kategori / Anak */
.accordion-menu .lvl2-link {
    font-size: 14px !important;
    font-weight: normal;
}

/* Level 3: Cucu (Dibuat sedikit lebih kecil dari level 2, tapi tetap sangat terbaca) */
.accordion-menu .lvl3-link {
    font-size: 13px !important;
    font-weight: normal;
    padding-left: 15px; /* Beri sedikit jarak menyorok ke dalam agar estetik */
    opacity: 0.9; /* Bikin warnanya sedikit lebih soft dibanding level 2 */
}

.shop-one__sidebar__item:not(.shop-one__sidebar__search) {
  padding: 20px;
}


.shop-one {
  display: flex;
  align-items: center; /* Membuat konten di dalamnya rata tengah secara vertikal */
  justify-content: space-between; /* Memisah kiri (search) dan kanan (pesan) */
  
  /* Trik utamanya di sini: dorong tinggi konten agar footer turun */
  min-height: 79vh;   
 /* Opsional: jarak aman agar tidak terlalu mepet navbar/footer */
  padding-top:60px;
}
/* Memastikan pesan kosongnya terpusat dengan rapi di area kanan */
.empty-message {
  flex: 1;
  text-align: center;
}



.order-steps-container { padding-bottom:150px; }
.order-steps-container .steps-title { text-align:center; padding:30px 0; }
/* Mengatur 3 Kolom Horizontal */
.steps-grid {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  max-width: 1100px; /* Membatasi lebar agar tidak terlalu melebar ke samping */
  margin: 0 auto;
}

/* Mengubah Item Menjadi Kotak Card yang Lembut */
.step-item {
  flex: 1;
  text-align: center;
  padding: 30px 20px;
  background-color: #fbfdfa; /* Warna dasar putih pudar yang sangat lembut */
  border: 1px solid #edf4ea; /* Border hijau pastel tipis */
  border-radius: 12px; /* Sudut melengkung halus */
  box-shadow: 0 4px 15px rgba(74, 103, 65, 0.04); /* Bayangan super tipis */
  transition: all 0.3s ease; /* Efek animasi halus saat di-hover */
}

.step-title {
    text-align: center;
    padding: 25px;
}
/* Efek Interaktif Saat Kursor Menyentuh Card */
.step-item:hover {
  transform: translateY(-5px); /* Card agak terangkat ke atas sedikit */
  background-color: #ffffff;
  border-color: #cce0bf;
  box-shadow: 0 10px 25px rgba(74, 103, 65, 0.08); /* Bayangan menjadi lebih tegas */
}

/* Lingkaran Angka yang Lebih Tegas dan Manis */
.step-number {
  width: 46px;
  height: 46px;
  background-color: #e2edd9;
  color: #4a6741;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.2rem;
  margin: 0 auto 20px auto;
  border: 2px solid #ffffff; /* Efek cincin putih di luar angka */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* Sentuhan pada Judul Langkah */
.step-item h4 {
  font-size: 1.15rem;
  color: #2c3e25; /* Warna hijau gelap natural */
  margin-bottom: 12px;
  font-weight: 600;
}

/* Sentuhan pada Deskripsi */
.step-item p {
  font-size: 0.9rem;
  color: #777777; /* Warna teks abu-abu yang ramah di mata */
  line-height: 1.6;
}


.pagination-container {
  display: flex;
  justify-content: center;
  margin: 40px 0;
  width: 100%;
}

.pager-list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 8px;
}

.pager-item a, .pager-item span {
  display: block;
  padding: 8px 16px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #4a6741; /* Hijau brand */
  text-decoration: none;
  background-color: #fbfdfa;
  border: 1px solid #edf4ea;
  border-radius: 6px;
  transition: all 0.2s ease;
}

/* Efek saat kursor diarahkan ke nomor */
.pager-item a:hover {
  background-color: #e2edd9;
  border-color: #cce0bf;
  transform: translateY(-1px);
}

/* Tampilan untuk halaman yang sedang aktif */
.pager-item.active span {
  background-color: #4a6741;
  color: #ffffff;
  border-color: #4a6741;
  cursor: default;
}


/* Container Grid Utama */
.footer-product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Membuat 3 kolom sama rata */
    gap: 12px; /* Jarak antar produk */
    margin-top: 20px;
}

/* Item Produk Individual */
.footer-product-item {
    display: block;
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0.05); /* Background tipis agar terlihat rapi */
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.3s ease;
    text-align: center;
}

.footer-product-item:hover {
    transform: translateY(-3px); /* Efek melayang saat di-hover */
    background-color: rgba(255, 255, 255, 0.1);
}

/* Styling Gambar Produk */
.footer-product-item img {
    width: 100%;
    height: 80px; /* Sesuaikan tinggi gambar agar seragam */
    object-fit: cover; /* Agar gambar tidak gepeng */
    display: block;
}

/* Teks Judul Produk Kecil di Bawah Gambar */
.footer-product-item span {
    display: block;
    font-size: 11px;
    color: #ffffff;
    padding: 6px 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Memotong teks jika terlalu panjang */
}

/* Responsive: Jika layar HP/Kecil, ubah jadi 2 kolom agar tidak terlalu sempit */
@media (max-width: 480px) {
    .footer-product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}