/* =========================================================
   WIDYA CAHAYA THEME - MAIN STYLESHEET
   Palet warna diambil dari logo resmi:
   Hijau utama : #00A651   | Hijau tua (footer) : #0B4C24
   Emas/Kuning : #F2C41A   | Teks gelap : #222222
========================================================= */
:root{
	--wc-green: #00A651;
	--wc-green-dark: #0B4C24;
	--wc-green-darker: #073318;
	--wc-gold: #F2C41A;
	--wc-gold-dark: #D9A600;
	--wc-text: #232323;
	--wc-muted: #6b6b6b;
	--wc-border: #e5e5e5;
	--font-heading: 'Poppins', sans-serif;
	--font-body: 'Nunito Sans', sans-serif;
}

*{ box-sizing: border-box; }
body{
	font-family: var(--font-body);
	color: var(--wc-text);
	margin: 0;
	line-height: 1.6;
	background:#fff;
	text-align: justify;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family: var(--font-heading); font-weight:700; margin:0 0 .5em; text-align:left; }
.container{ max-width:1180px; margin:0 auto; padding:0 20px; }
.text-center{ text-align:center; }

/* ---------- Buttons ---------- */
.btn-gold{
	display:inline-block; background: var(--wc-gold); color:#1a1a1a; font-weight:700;
	padding:12px 28px; border-radius:6px; border:none; cursor:pointer; font-family:var(--font-heading);
	transition:.2s;
}
.btn-gold:hover{ background: var(--wc-gold-dark); }
.btn-green{
	display:inline-block; background: var(--wc-green); color:#fff; font-weight:700;
	padding:12px 32px; border-radius:6px; border:none; cursor:pointer; font-family:var(--font-heading);
	transition:.2s;
}
.btn-green:hover{ background:#008a43; }
.btn-gold-outline{
	display:inline-block; background:var(--wc-gold); color:#1a1a1a; font-weight:700;
	padding:10px 22px; border-radius:6px; margin-top:14px;
}
.btn-submit-green{
	background: var(--wc-green); color:#fff; font-weight:700; border:none; padding:14px 30px;
	border-radius:8px; cursor:pointer; font-size:16px; width:100%; max-width:320px;
}
.btn-submit-green:hover{ background:#008a43; }
.btn-selesaikan{
	background: var(--wc-green); color:#fff; font-weight:700; border:none; padding:14px 20px;
	border-radius:8px; cursor:pointer; font-size:16px; width:100%; margin-top:10px;
}
.btn-selesaikan:disabled{ background:#9bd6b4; cursor:not-allowed; }
.btn-selengkapnya{
	display:inline-block; background: var(--wc-green); color:#fff; padding:8px 20px;
	border-radius:6px; font-weight:700; margin-top:10px;
}

/* ---------- Header ---------- */
.site-header{ border-bottom:1px solid var(--wc-border); position:sticky; top:0; background:#fff; z-index:200; }
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 20px; gap:20px; }
.site-logo img{ height:42px; width:auto; max-width:220px; }
.main-nav{ flex:1; }
.wcahaya-menu{ list-style:none; display:flex; gap:28px; margin:0; padding:0; justify-content:center; }
.wcahaya-menu > .menu-item{ position:relative; }
.wcahaya-menu > .menu-item > a{ font-weight:600; padding:8px 0; display:inline-block; }
.wcahaya-menu > .menu-item > a:hover{ color: var(--wc-green); }
.dropdown-caret{ font-size:11px; }
.wcahaya-submenu{
	list-style:none; margin:0; padding:8px 0; position:absolute; top:100%; left:0;
	background: var(--wc-gold); min-width:220px; box-shadow:0 8px 20px rgba(0,0,0,.15);
	opacity:0; visibility:hidden; transform:translateY(8px); transition:.2s; border-radius:0 0 6px 6px;
}
.has-dropdown:hover .wcahaya-submenu{ opacity:1; visibility:visible; transform:translateY(0); }
.wcahaya-submenu li a{ display:block; padding:10px 18px; color:#1a1a1a; font-weight:600; text-align:left; }
.wcahaya-submenu li a:hover{ background: var(--wc-green); color:#fff; }
.lang-switch{ position:relative; white-space:nowrap; }
.lang-switch-btn{
	display:flex; align-items:center; gap:6px; border:1px solid var(--wc-border); border-radius:6px;
	padding:7px 12px; font-size:14px; background:#fff; cursor:pointer; font-family:var(--font-body); color:var(--wc-text);
}
.lang-switch-btn:hover{ border-color: var(--wc-green); }
.lang-switch .caret{ font-size:11px; transition:.2s; }
.lang-switch.open .caret{ transform:rotate(180deg); }
.lang-switch-menu{
	list-style:none; margin:0; padding:6px 0; position:absolute; top:calc(100% + 6px); right:0;
	background:#fff; border:1px solid var(--wc-border); border-radius:8px; min-width:170px;
	box-shadow:0 10px 24px rgba(0,0,0,.12); opacity:0; visibility:hidden; transform:translateY(6px);
	transition:.2s; z-index:250;
}
.lang-switch.open .lang-switch-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.lang-switch-menu a{ display:flex; align-items:center; gap:8px; padding:9px 16px; font-size:14px; color:var(--wc-text); }
.lang-switch-menu a:hover, .lang-switch-menu a.active{ background:#f5f5f5; color: var(--wc-green); font-weight:700; }
.lang-notice{
	background:#FFF8E1; border-bottom:1px solid var(--wc-gold); color:#6b5900; text-align:center;
	font-size:13.5px; padding:10px 16px;
}
.lang-notice a{ color: var(--wc-green); font-weight:700; text-decoration:underline; }

/* ---------- Sembunyikan tampilan bawaan Google Translate; pakai dropdown custom kita ---------- */
#google_translate_element{ display:none !important; }
.goog-te-banner-frame.skiptranslate,
.goog-te-balloon-frame,
.goog-tooltip, .goog-tooltip:hover,
.goog-text-highlight{ display:none !important; background:none !important; box-shadow:none !important; }
body{ top:0 !important; position:static !important; }
.skiptranslate iframe{ visibility:hidden !important; height:0 !important; }
.menu-toggle{ display:none; background:none; border:none; cursor:pointer; flex-direction:column; gap:5px; }
.menu-toggle span{ width:26px; height:3px; background:var(--wc-text); display:block; }

/* ---------- Breadcrumb ---------- */
.wcahaya-breadcrumb{ background:#fafafa; border-bottom:1px solid var(--wc-border); padding:10px 0; font-size:14px; color:var(--wc-muted); }
.wcahaya-breadcrumb a{ color: var(--wc-muted); }
.wcahaya-breadcrumb span{ color: var(--wc-text); font-weight:600; }

/* ---------- WA Floating Button ---------- */
.wcahaya-wa-float{ position:fixed; right:20px; bottom:20px; z-index:300; }
.wcahaya-wa-float a{ display:flex; align-items:center; gap:10px; background:#fff; border-radius:30px; box-shadow:0 6px 20px rgba(0,0,0,.2); padding:6px 6px 6px 16px; }
.wa-bubble{ font-size:12px; color:var(--wc-muted); line-height:1.3; }
.wa-bubble strong{ color:var(--wc-green); }
.wa-icon{ background: var(--wc-green); color:#fff; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:18px; }

/* ---------- Hero / Home ---------- */
.hero-section{ padding:0; }
.hero-image{ width:100%; display:block; }
.hero-placeholder{ background:#f3f3f3; color:#999; text-align:center; padding:80px 20px; border-radius:10px; margin:24px 0; }

/* ---------- Hero slideshow (banner Home berganti otomatis tiap 3 detik) ---------- */
.hero-slideshow{ position:relative; width:100%; overflow:hidden; aspect-ratio:16/6; background:#eee; }
.hero-slideshow .hero-slide{
	position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
	opacity:0; transition:opacity 1s ease-in-out; z-index:1;
}
.hero-slideshow .hero-slide.is-active{ opacity:1; z-index:2; }
@media(max-width:700px){
	.hero-slideshow{ aspect-ratio:4/3; }
}

.section-title-center{ text-align:center; color: var(--wc-green); font-size:28px; }
.section-title-center.light{ color:#fff; }
.section-subtitle-center{ text-align:center; color: var(--wc-muted); margin-bottom:30px; }
.section-subtitle-center.light{ color:#e5f5ea; }

.produk-unggulan-section{ padding:60px 0; }
.produk-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:30px; }
.produk-card{ border:none; border-radius:14px; padding:20px; text-align:center; transition:.2s; display:block; box-shadow:0 10px 28px rgba(0,0,0,.09); background:#fff; }
.produk-card:hover{ box-shadow:0 14px 34px rgba(0,0,0,.14); transform:translateY(-3px); }
.produk-thumb img{ max-height:180px; margin:0 auto 14px; object-fit:contain; }
.produk-card h3{ font-size:15px; margin:0; text-align:center; }
.produk-harga{ color: var(--wc-green); font-weight:800; margin-top:8px; }
.harga-regular-kecil{ color:#E53935; text-decoration:line-through; font-weight:600; font-size:13px; margin-right:6px; }
.harga-sale-kecil{ color: var(--wc-green); font-weight:800; }

.promo-banner-section{ padding:0; }
.promo-banner-section img{ width:100%; display:block; }

.mitra-section{ background: var(--wc-green-dark); padding:60px 0; }
.mitra-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:20px; }
.mitra-card{ background: #1B7A42; color:#fff; padding:30px; border-radius:12px; }
.mitra-card h3{ color:#fff; }
.mitra-card p{ color:#eafbf0; }
.mitra-icon{ width:56px; height:56px; margin-bottom:16px; }
.mitra-icon svg{ width:100%; height:100%; }

.official-store-section{ padding:60px 0; }
.store-icons-large{ display:flex; gap:48px; justify-content:center; align-items:center; margin-top:20px; flex-wrap:wrap; }
.store-icons-large a{ background:none; padding:0; border-radius:0; display:flex; align-items:center; justify-content:center; }

.testimoni-section{ background:#f7f7f7; padding:60px 0; }
.testimoni-slider-wrap{ display:flex; align-items:center; gap:8px; max-width:1100px; margin:0 auto; }
.testimoni-slider{ flex:1; display:flex; gap:24px; overflow-x:auto; scroll-behavior:smooth; scroll-snap-type:x mandatory; padding-bottom:4px; }
.testimoni-card{
	background:#fff; border-radius:16px; box-shadow:0 6px 20px rgba(0,0,0,.08); overflow:hidden;
	display:flex; flex-direction:column; flex:0 0 calc(33.333% - 16px); scroll-snap-align:start; min-width:240px;
}
.testimoni-photo{ width:100%; aspect-ratio:1/1; overflow:hidden; background:#eee; }
.testimoni-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.testimoni-avatar-placeholder{
	width:100%; height:100%; background: var(--wc-green);
	color:#fff; display:flex; align-items:center; justify-content:center; font-size:48px; font-weight:800;
}
.testimoni-body{ padding:20px 22px 26px; text-align:center; }
.stars{ color:#F2B705; letter-spacing:3px; margin-bottom:14px; font-size:22px; }
.testimoni-quote-open, .testimoni-quote-close{
	display:block; font-size:32px; color:#1a1a1a; font-family:Georgia,serif; line-height:.4; font-weight:700;
}
.testimoni-quote-open{ text-align:left; margin-bottom:8px; }
.testimoni-quote-close{ text-align:right; margin-top:4px; }
.testimoni-body p{ color:#222; font-size:15px; line-height:1.6; margin:0; }
.testimoni-prev, .testimoni-next{
	background:none; border:none; color:#9a9a9a; font-size:38px; line-height:1; cursor:pointer;
	flex-shrink:0; padding:0 6px; font-weight:700;
}
.testimoni-prev:hover, .testimoni-next:hover{ color: var(--wc-green); }
@media(max-width:900px){
	.testimoni-card{ flex-basis:85%; }
}

.partners-section{ padding:60px 0; }
.partners-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:32px 20px; align-items:center; justify-items:center; margin-top:30px; }
.partner-logo{ display:flex; align-items:center; justify-content:center; width:100%; height:78px; }
.partner-logo img{ max-height:74px; max-width:100%; width:auto; margin:0 auto; object-fit:contain; }
.partner-logo-placeholder{ font-size:11px; color:#999; text-align:center; line-height:1.3; }

/* ---------- Banner opsional di halaman lain ---------- */
.page-banner{ margin:20px 0 30px; border-radius:10px; overflow:hidden; }
.page-banner img{ width:100%; }

/* ---------- Badge Marketplace (logo upload atau fallback) ---------- */
.marketplace-logo-img{ max-height:36px; width:auto; object-fit:contain; }
.marketplace-badge{ display:inline-flex; align-items:center; gap:8px; color:#fff; font-weight:700; padding:10px 18px; border-radius:8px; font-size:14px; }
.store-icons .marketplace-badge{ transform:scale(.85); }
.store-icons-large a{ background:none; padding:0; border-radius:0; }
.store-icons-large .marketplace-badge{ padding:14px 28px; font-size:16px; }
.store-icons-large .marketplace-logo-img{ max-height: var(--mp-logo-size, 90px); }

/* ---------- Halaman Tentang Kami / generic page ---------- */
.tentang-content-wrap, .page-content-wrap, .katalog-wrap, .kontak-wrap, .mitra-form-wrap{ padding:40px 0 80px; }

/* ---------- Halaman Download e-Katalog ---------- */
.page-title-badge{
	display:inline-block; background: var(--wc-gold); color:#1a1a1a; font-size:24px;
	padding:14px 28px; border-radius:8px; margin-bottom:24px;
}
.katalog-list{ list-style:none; margin:20px 0 0; padding:0; max-width:800px; }
.katalog-item{
	display:flex; align-items:center; justify-content:space-between; gap:20px;
	padding:16px 0; border-bottom:2px solid var(--wc-green);
}
.katalog-title{ font-size:17px; font-weight:600; }
.katalog-download-btn{
	display:inline-flex; align-items:center; gap:8px; background: var(--wc-green); color:#fff;
	font-weight:700; font-size:14px; padding:10px 18px; border-radius:6px; white-space:nowrap; flex-shrink:0;
}
.katalog-download-btn:hover{ background:#008a43; }
.katalog-download-icon{ font-size:16px; }
.tentang-featured-image, .page-featured-image{ border-radius:10px; overflow:hidden; margin-bottom:24px; }
.tentang-featured-image img, .page-featured-image img{ width:100%; display:block; object-fit:cover; }
.tentang-title, .page-title{ font-size:26px; margin-bottom:16px; }
.tentang-body, .page-body{ color:#333; }
.tentang-body p, .page-body p{ margin-bottom:1em; }

/* ---------- Kontak ---------- */
.kontak-map{ border-radius:10px; overflow:hidden; margin-bottom:30px; }
.kontak-info-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.kontak-col h3{ margin-bottom:16px; }
.kontak-col p{ border-bottom:1px solid var(--wc-border); padding-bottom:10px; margin-bottom:10px; }
.rekening-row{ display:flex; align-items:center; gap:10px; }
.rekening-brand{ display:inline-flex; align-items:center; gap:8px; min-width:130px; font-weight:700; flex-shrink:0; }
.rekening-logo-img{ height:22px; width:auto; max-width:90px; object-fit:contain; }
.rekening-logo-fallback{ font-size:16px; }
.rekening-colon{ flex-shrink:0; }
.rekening-value{ font-weight:600; }

/* ---------- Form (order/reseller/agen) ---------- */
.wcahaya-form{ max-width:640px; }
.form-section-title{ margin-top:20px; }
.form-row{ margin-bottom:18px; }
.form-row label{ display:block; font-weight:700; margin-bottom:6px; }
.form-row .req{ color:#d33; }
.form-row input[type=text], .form-row input[type=email], .form-row input[type=number],
.form-row textarea, .form-row select{
	width:100%; padding:12px 14px; border:1px solid var(--wc-border); border-radius:6px; font-family:var(--font-body); font-size:15px;
}
.notice-box{ background:#fff8e1; border:1px solid var(--wc-gold); padding:18px; border-radius:8px; }

/* ---------- Form Order khusus ---------- */
.order-form-wrap{ padding:40px 0 80px; }
.order-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:start; }
.order-summary-box{ background:#f7f7f7; border-radius:10px; padding:24px; position:sticky; top:100px; }
.order-summary-product{ display:flex; gap:12px; align-items:center; margin-bottom:16px; }
.order-summary-product img{ width:60px; height:60px; object-fit:cover; border-radius:6px; }
.summary-table{ width:100%; border-collapse:collapse; }
.summary-table td{ padding:8px 0; border-bottom:1px solid var(--wc-border); }
.summary-table td:last-child{ text-align:right; font-weight:700; }
.summary-table .total-row td{ font-size:18px; color:var(--wc-green); border-bottom:none; padding-top:14px; }

/* ---------- Pilihan kurir/layanan pengiriman (form order) ---------- */
.kurir-options{ display:flex; flex-direction:column; gap:8px; margin:14px 0; }
.kurir-option{
	display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--wc-border);
	border-radius:8px; cursor:pointer; font-size:13px; background:#fff; transition:.15s;
}
.kurir-option:has(input:checked){ border-color: var(--wc-green); background:#f0fbf5; }
.kurir-option.is-selected{ border-color: var(--wc-green); background:#f0fbf5; }
.kurir-option input[type="radio"]{ flex-shrink:0; }
.kurir-option-name{ flex:1; font-weight:600; }
.kurir-option-etd{ color:#777; font-size:12px; white-space:nowrap; }
.kurir-option-cost{ font-weight:700; color:var(--wc-green); white-space:nowrap; }
.order-note{ font-size:12px; color:var(--wc-muted); margin-top:10px; }
.autocomplete-results{ border:1px solid var(--wc-border); border-radius:6px; margin-top:4px; max-height:220px; overflow-y:auto; display:none; background:#fff; position:relative; z-index:20; }
.autocomplete-results div{ padding:10px 14px; cursor:pointer; border-bottom:1px solid #f0f0f0; font-size:14px; }
.autocomplete-results div:hover{ background: var(--wc-gold); }
.kecamatan-selected{ margin-top:8px; font-size:13px; color: var(--wc-green); font-weight:700; }

/* ---------- Produk single ---------- */
.single-product-wrap{ padding:40px 0 60px; }
.single-product-grid{ display:grid; grid-template-columns:1fr 1fr; gap:50px; }
.product-info h1{ font-size:26px; }
.product-price{ color: var(--wc-green); font-size:22px; font-weight:800; margin:10px 0 20px; }
.product-price .price-regular{ color:#E53935; text-decoration:line-through; font-size:16px; font-weight:600; margin-right:12px; }
.product-price .price-sale{ color: var(--wc-green); font-size:22px; font-weight:800; }
.product-buttons{ display:flex; gap:14px; margin-bottom:24px; }
.product-buttons button{ font-size:15px; }
.product-desc{ color:#333; margin-bottom:20px; }
.product-spek-table td{ padding:4px 10px 4px 0; }
.wcahaya-tabel-cicilan{ margin-top:40px; border-top:1px solid var(--wc-border); padding-top:24px; }
.cicilan-grid{ display:grid; gap:24px; }
.cicilan-col h4{ border-bottom:2px solid var(--wc-green); padding-bottom:8px; margin-bottom:10px; }
.cicilan-col p{ display:flex; justify-content:space-between; margin:6px 0; font-size:14px; }
.product-extra-gallery{ margin-top:40px; display:flex; flex-direction:column; gap:24px; }
.extra-gallery-item img{ width:100%; display:block; border-radius:6px; }

/* ---------- Shop / Archive ---------- */
.shop-wrap{ padding:40px 0 80px; }
.produk-grid-archive{ grid-template-columns:repeat(4,1fr); }
.shop-pagination{ text-align:center; margin-top:30px; }
.shop-pagination .page-numbers{ display:inline-block; padding:8px 14px; margin:0 3px; border:1px solid var(--wc-border); border-radius:4px; }
.shop-pagination .current{ background: var(--wc-green); color:#fff; border-color: var(--wc-green); }

/* ---------- Artikel ---------- */
.artikel-wrap{ padding:40px 0 80px; max-width:820px; }
.artikel-item{ border-bottom:1px solid var(--wc-gold); padding-bottom:24px; margin-bottom:24px; }
.artikel-thumb{ display:block; width:100%; aspect-ratio:16/9; overflow:hidden; border-radius:8px; margin-bottom:16px; background:#f2f2f2; }
.artikel-thumb img{ width:100%; height:100%; object-fit:cover; display:block; margin-bottom:0; }
.artikel-item h2{ font-size:20px; margin-bottom:6px; }
.artikel-date{ color: var(--wc-green); font-weight:700; margin-bottom:10px; }
.artikel-pagination{ text-align:center; margin-top:20px; }
.pagination-count{ color: var(--wc-muted); margin-top:8px; }
.artikel-single-wrap{ padding:40px 0 80px; max-width:820px; }
.artikel-single-thumb{ margin:20px 0; border-radius:10px; overflow:hidden; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--wc-green-dark); color:#e5f5ea; margin-top:40px; border-top:5px solid var(--wc-gold); }
.footer-top{ display:grid; grid-template-columns:1.5fr 1.1fr 1fr 0.8fr; gap:0; padding:44px 20px; font-size:14px; }
.footer-col{ padding:0 24px; border-left:1px solid rgba(242,196,26,.55); }
.footer-col:first-child{ border-left:none; padding-left:0; }
.footer-logo{ height:36px; width:auto; max-width:160px; margin-bottom:14px; background:#fff; padding:6px; border-radius:6px; }
.site-footer .footer-logo{ height:36px !important; width:auto !important; max-width:160px !important; }
.footer-col h4{ color:#fff; margin-bottom:14px; font-size:15px; }
.footer-col p{ font-size:13.5px; line-height:1.7; }
.footer-links{ display:flex; gap:30px; }
.footer-links ul{ list-style:none; margin:0; padding:0; }
.footer-links li{ margin-bottom:10px; font-size:13.5px; position:relative; padding-left:14px; }
.footer-links li::before{ content:"•"; color: var(--wc-gold); position:absolute; left:0; }
.footer-links a:hover{ color: var(--wc-gold); }
.store-icons{ display:flex; flex-direction:row; align-items:center; gap:18px; flex-wrap:wrap; }
.store-icons a{ display:flex; align-items:center; }
.store-icons .marketplace-logo-img{ max-height:40px; }
.store-icons .marketplace-badge{ padding:10px 18px; font-size:15px; transform:none; }
.social-icons{ display:flex; gap:14px; flex-wrap:wrap; }
.social-icon-circle{
	width:48px; height:48px; border-radius:50%; background:#fff; display:flex; align-items:center;
	justify-content:center; transition:.2s;
}
.social-icon-circle svg{ width:28px; height:28px; }
.social-icons a:hover .social-icon-circle{ transform:scale(1.08); }
.footer-bottom{ text-align:center; background: var(--wc-green-darker); padding:14px; font-size:13px; }
@media(max-width:900px){
	.footer-col{ border-left:none; padding:0; border-top:1px solid rgba(242,196,26,.4); padding-top:20px; margin-top:20px; }
	.footer-col:first-child{ border-top:none; margin-top:0; padding-top:0; }
}

/* ---------- Modal Marketplace ---------- */
.wcahaya-modal{ position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; }
.wcahaya-modal.active{ display:flex; }
.wcahaya-modal-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.5); }
.wcahaya-modal-box{ position:relative; background:#fff; border-radius:12px; padding:30px; max-width:480px; width:90%; text-align:center; z-index:2; }
.wcahaya-modal-box h3{ text-align:center; }
.wcahaya-modal-close{ position:absolute; top:10px; right:14px; background:none; border:none; font-size:22px; cursor:pointer; }
.marketplace-options{ display:flex; flex-direction:row; align-items:center; justify-content:center; gap:36px; margin-top:24px; flex-wrap:wrap; }
.marketplace-logo-link{ display:flex; align-items:center; justify-content:center; transition:.2s; }
.marketplace-logo-link:hover{ transform:scale(1.08); }
.marketplace-logo-link .marketplace-logo-img{ max-height:56px; width:auto; }
.marketplace-logo-link .marketplace-badge{ padding:12px 18px; }
@media(max-width:480px){
	.marketplace-options{ flex-direction:column; gap:22px; }
}

/* ---------- Halaman Kata Pengantar (foto + jabatan kiri, teks kanan) ---------- */
.kp-wrap{ padding:40px 0 80px; }
.kp-grid{ display:flex; gap:50px; align-items:flex-start; }
.kp-photo-col{ flex:0 0 280px; }
.kp-photo-frame{ border:2px solid var(--wc-green); border-radius:6px; overflow:hidden; }
.kp-photo-frame img{ width:100%; display:block; }
.kp-photo-placeholder{ background:#f3f3f3; color:#999; text-align:center; padding:60px 16px; font-size:13px; }
.kp-jabatan{ background: var(--wc-green); color:#fff; text-align:center; font-weight:700; padding:12px; }
.kp-content-col{ flex:1; min-width:0; }

/* ---------- Halaman Split (teks kiri, foto kanan) - Visi Misi, Value Perusahaan ---------- */
.split-wrap{ padding:40px 0 80px; }
.split-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.split-content-body h2, .split-content-body h3{ margin-top:0; }
.split-content-body hr{ border:none; border-top:3px solid var(--wc-gold); margin:24px 0; width:100%; }
.split-photo-col img{ width:100%; display:block; border-radius:4px; }

/* ---------- Halaman Segmen Pasar (galeri mosaik 3 kolom) ---------- */
.mosaic-wrap{ padding:40px 0 80px; }
.mosaic-grid{ display:grid; grid-template-columns:1fr 1.15fr 1fr; gap:16px; margin-bottom:36px; }
.mosaic-col{ display:flex; flex-direction:column; gap:16px; }
.mosaic-item{ border-radius:4px; overflow:hidden; }
/* Tinggi foto ditentukan dari rasio (bukan tinggi tetap dalam px), jadi tidak akan pernah
   ketimpa/tabrakan sama teks di bawahnya - otomatis menyesuaikan lebar kolom di semua ukuran layar. */
.mosaic-item img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; display:block; }
.mosaic-item-tall img{ aspect-ratio:3/4; } /* foto tengah dibuat lebih "tinggi" rasionya supaya total tingginya setara 2 foto kiri/kanan + jarak antar foto */
.mosaic-content{ max-width:1000px; }

/* ---------- Bullet titik hijau konsisten di semua halaman Tentang Kami ---------- */
.tentang-body ul, .split-content-body ul, .mosaic-content ul{ list-style:none; margin:0 0 1em; padding:0; }
.tentang-body ul li, .split-content-body ul li, .mosaic-content ul li{
	position:relative; padding-left:26px; margin-bottom:14px; line-height:1.6;
}
.tentang-body ul li::before, .split-content-body ul li::before, .mosaic-content ul li::before{
	content:""; position:absolute; left:0; top:8px; width:9px; height:9px; border-radius:50%; background: var(--wc-green);
}

/* =========================================================
   RESPONSIVE - PC / Laptop / Tablet / HP
   Breakpoint: 1200 (desktop besar), 1024 (tablet lanskap/laptop kecil),
   768 (tablet potret), 600 (HP besar), 420 (HP kecil)
========================================================= */

@media(max-width:1200px){
	.container{ padding:0 24px; }
}

@media(max-width:1024px){
	.wcahaya-menu{ gap:18px; }
	.single-product-grid{ gap:32px; }
	.produk-grid-archive{ grid-template-columns:repeat(3,1fr); }
	.partners-grid{ grid-template-columns:repeat(5,1fr); }
	.mosaic-grid{ grid-template-columns:1fr 1fr; }
	.mosaic-col-mid{ grid-column:1 / -1; order:-1; }
	.mosaic-item-tall img{ aspect-ratio:21/9; min-height:220px; }
}

@media(max-width:900px){
	.single-product-grid, .order-grid, .kontak-info-grid, .mitra-grid, .footer-top,
	.split-grid, .kp-grid{ grid-template-columns:1fr; }
	.kp-grid{ display:flex; flex-direction:column; }
	.kp-photo-col{ flex:0 0 auto; max-width:280px; }
	.split-photo-col{ order:-1; }
	.produk-grid, .produk-grid-archive{ grid-template-columns:repeat(2,1fr); }
	.partners-grid{ grid-template-columns:repeat(4,1fr); }
	.main-nav{ display:none; position:absolute; top:100%; left:0; right:0; background:#fff; padding:10px 20px; box-shadow:0 8px 16px rgba(0,0,0,.1); max-height:80vh; overflow-y:auto; }
	.main-nav.open{ display:block; }
	.wcahaya-menu{ flex-direction:column; gap:0; }
	.wcahaya-menu > .menu-item > a{ display:block; padding:12px 0; border-bottom:1px solid var(--wc-border); }
	.wcahaya-submenu{ position:static; background:#fafafa; box-shadow:none; opacity:1; visibility:visible; transform:none; display:none; }
	.has-dropdown.open .wcahaya-submenu{ display:block; }
	.menu-toggle{ display:flex; }
	.order-summary-box{ position:static; }
	.header-inner{ flex-wrap:wrap; }
}

@media(max-width:768px){
	.container{ padding:0 18px; }
	h1, .page-title, .tentang-title{ font-size:24px; }
	.section-title-center{ font-size:24px; }
	.hero-placeholder{ padding:50px 16px; }
	.single-product-grid{ gap:24px; }
	.produk-unggulan-section, .mitra-section, .official-store-section, .testimoni-section, .partners-section{ padding:44px 0; }
	.mosaic-grid{ grid-template-columns:1fr; }
	.mosaic-col-mid{ order:0; }
	.mosaic-item-tall img{ aspect-ratio:16/9; min-height:220px; }
	.footer-top{ padding:36px 18px; }
}

@media(max-width:600px){
	.katalog-item{ flex-direction:column; align-items:flex-start; gap:10px; }
	.katalog-download-btn{ width:100%; justify-content:center; }
	.wa-bubble{ display:none; }
	.wcahaya-wa-float{ right:14px; bottom:14px; }
	.wa-icon{ width:46px; height:46px; font-size:20px; }
	.site-logo img{ height:34px; }
	.lang-switch-btn .lang-switch-label{ display:none; }
	.lang-switch-btn{ padding:7px 9px; }
	.produk-grid, .produk-grid-archive{ grid-template-columns:1fr; }
	.partners-grid{ grid-template-columns:repeat(3,1fr); gap:20px 12px; }
	.partner-logo{ height:56px; }
	.partner-logo img{ max-height:52px; }
	.testimoni-card{ flex-basis:88%; }
	.testimoni-body{ padding:16px 16px 20px; }
	.stars{ font-size:18px; }
	.mitra-card{ padding:22px; }
	.product-buttons{ flex-direction:column; }
	.product-buttons a, .product-buttons button{ width:100%; text-align:center; }
	.order-grid{ gap:24px; }
	.summary-table td{ font-size:14px; }
	.cicilan-grid{ grid-template-columns:1fr !important; }
	.extra-gallery-item img{ border-radius:4px; }
	.kp-photo-col{ max-width:100%; }
	.footer-top{ padding:28px 16px; }
	.footer-col{ padding:0; }
	.footer-links{ flex-direction:column; gap:6px; }
	.store-icons{ gap:12px; }
	.store-icons-large{ gap:24px; }
	.artikel-thumb img{ border-radius:6px; }
	.kontak-map iframe{ height:260px; }
}

@media(max-width:420px){
	.container{ padding:0 14px; }
	h1, .page-title, .tentang-title{ font-size:21px; }
	.section-title-center{ font-size:21px; }
	.btn-gold, .btn-green, .btn-gold-outline{ padding:11px 20px; font-size:14px; }
	.produk-thumb img{ max-height:150px; }
	.kp-jabatan{ padding:10px; font-size:14px; }
	.testimoni-quote-open, .testimoni-quote-close{ font-size:26px; }
	.store-icons-large{ gap:16px; }
}