/* =========================================================
   MASTER PONDASI - MAIN STYLESHEET
   Warna primer: Oren | Mobile-first & responsif
   ========================================================= */

:root{
	--mp-primary: #EA6A12;
	--mp-primary-dark: #C6550C;
	--mp-dark: #1E2430;
	--mp-gray: #5B6472;
	--mp-light: #F6F7F9;
	--mp-border: #E6E8EC;
	--mp-white: #FFFFFF;
	--mp-radius: 14px;
	--mp-font-heading: 'Poppins', sans-serif;
	--mp-font-body: 'Plus Jakarta Sans', sans-serif;
	--mp-shadow: 0 10px 30px rgba(30,36,48,.08);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; font-size:100%; }
body{
	margin:0;
	font-family:var(--mp-font-body);
	color:var(--mp-dark);
	font-size:17px;
	line-height:1.75;
	background:var(--mp-white);
	overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5{ font-family:var(--mp-font-heading); font-weight:700; line-height:1.3; margin:0 0 .5em; color:var(--mp-dark); }
h1{ font-size:30px; }
p{ margin:0 0 1em; color:var(--mp-gray); font-size:1rem; line-height:1.75; }
.mp-container{ max-width:1200px; margin:0 auto; padding:0 20px; }

.mp-skip-link{ position:absolute; left:-999px; top:0; background:var(--mp-primary); color:#fff; padding:10px 16px; z-index:9999; }
.mp-skip-link:focus{ left:10px; top:10px; }

/* ---------- Buttons ---------- */
.mp-btn{
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	padding:15px 28px; border-radius:999px; font-weight:700; font-size:16px;
	border:2px solid transparent; cursor:pointer; transition:.25s ease;
}
.mp-btn-primary{ background:var(--mp-primary); color:#fff; }
.mp-btn-primary:hover{ background:var(--mp-primary-dark); transform:translateY(-2px); }
.mp-btn-outline{ background:transparent; border-color:var(--mp-white); color:var(--mp-white); }
.mp-btn-outline:hover{ background:var(--mp-white); color:var(--mp-primary); }
.mp-btn-dark{ background:var(--mp-dark); color:#fff; }
.mp-btn-dark:hover{ background:#000; }

/* ---------- Topbar ---------- */
.mp-topbar{ background:var(--mp-dark); color:#cfd3da; font-size:14px; }
.mp-topbar-mobile-date{ display:none; }
.mp-topbar-inner{ display:flex; justify-content:space-between; align-items:center; padding:6px 20px; flex-wrap:wrap; gap:6px; }
.mp-topbar-left span{ margin-right:18px; }
.mp-topbar-right a{ color:#fff; font-weight:600; }

/* ---------- Header / Nav ---------- */
.mp-header{ position:sticky; top:0; z-index:999; }
.mp-nav-wrap{ background:#fff; box-shadow:0 2px 12px rgba(0,0,0,.06); }
.mp-nav-inner{ display:flex; align-items:center; justify-content:space-between; padding:9px 20px; gap:20px; }
.mp-logo{ display:flex; align-items:center; gap:10px; }
.mp-logo img{ max-height:42px; width:auto; object-fit:contain; }
.mp-logo-textwrap-link{ display:flex; align-items:center; }
.mp-logo-icon-box{
	width:38px; height:38px; border-radius:10px; background:rgba(242,101,15,.12); color:var(--mp-primary);
	display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.mp-logo-textwrap{ display:flex; flex-direction:column; line-height:1.15; }
.mp-logo-text-main{ font-family:var(--mp-font-heading); font-weight:800; font-size:18px; color:var(--mp-dark); }
.mp-logo-accent{ color:var(--mp-primary); }
.mp-logo-tagline{ font-size:9.5px; color:var(--mp-gray); text-transform:uppercase; letter-spacing:.4px; font-weight:700; margin-top:2px; white-space:nowrap; }
.mp-primary-nav{ flex:1; display:flex; justify-content:center; }

/* Elemen khusus panel menu mobile: disembunyikan di desktop, hanya tampil di breakpoint mobile */
.mp-mobile-menu-topbar,
.mp-mobile-menu-header,
.mp-mobile-menu-cta{ display:none; }
.mp-menu{ display:flex; gap:28px; align-items:center; }
.mp-menu li{ position:relative; }
.mp-menu a{ font-weight:700; font-size:15px; color:var(--mp-dark); padding:6px 0; position:relative; }
.mp-menu a::after{ content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--mp-primary); transition:.25s; }
.mp-menu a:hover::after, .mp-menu li.current-menu-item a::after{ width:100%; }

/* Dropdown submenu desktop (mis. "Layanan" -> daftar sub-halaman), muncul saat hover/fokus */
.mp-submenu-toggle{ display:none; }
.mp-menu .sub-menu{
	display:none; position:absolute; top:100%; left:0; min-width:240px;
	background:#fff; border-radius:12px; box-shadow:0 16px 34px rgba(0,0,0,.14); padding:10px;
	flex-direction:column; gap:2px; z-index:60;
}
.mp-menu li.menu-item-has-children:hover > .sub-menu,
.mp-menu li.menu-item-has-children:focus-within > .sub-menu{ display:flex; }
.mp-menu .sub-menu li{ width:100%; }
.mp-menu .sub-menu a{ display:block; padding:10px 14px; font-size:14.5px; font-weight:600; color:var(--mp-dark); border-radius:8px; white-space:nowrap; }
.mp-menu .sub-menu a::after{ display:none; }
.mp-menu .sub-menu a:hover{ background:var(--mp-light); color:var(--mp-primary); }
.mp-nav-cta{ white-space:nowrap; padding:10px 20px !important; font-size:14px !important; }
.mp-menu-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px; }
.mp-menu-toggle span{ width:26px; height:3px; background:var(--mp-dark); border-radius:3px; }

/* ---------- Breadcrumb ---------- */
.mp-breadcrumb{ background:var(--mp-light); font-size:14px; padding:10px 0; color:var(--mp-gray); }
.mp-breadcrumb a{ color:var(--mp-primary); font-weight:600; }
.mp-breadcrumb span{ color:var(--mp-dark); }

/* ---------- HERO ---------- */
.mp-hero{ position:relative; background:linear-gradient(120deg, var(--mp-dark) 55%, #2b3345 100%); color:#fff; overflow:hidden; }
.mp-hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; padding:80px 20px; }
.mp-hero-badge{ display:inline-block; background:rgba(234,106,18,.15); border:1px solid var(--mp-primary); color:#ffb27a; padding:6px 16px; border-radius:999px; font-size:13px; font-weight:600; margin-bottom:18px; }
.mp-hero h1{ color:#fff; font-size:46px; margin-bottom:18px; letter-spacing:-.5px; }
.mp-hero p.mp-hero-sub{ color:#dfe2e8; font-size:18px; max-width:540px; line-height:1.7; }
.mp-hero-actions{ display:flex; gap:14px; margin-top:28px; flex-wrap:wrap; }
.mp-hero-image{ position:relative; }
.mp-hero-image img{ border-radius:var(--mp-radius); box-shadow:var(--mp-shadow); }
.mp-hero-stats{ display:flex; gap:0; margin-top:50px; border-top:1px solid rgba(255,255,255,.15); padding-top:26px; flex-wrap:wrap; }
.mp-hero-stat{ flex:1; min-width:120px; }
.mp-hero-stat strong{ display:block; font-family:var(--mp-font-heading); font-size:32px; color:var(--mp-primary); }
.mp-hero-stat span{ font-size:14px; color:#dfe2e8; font-weight:500; }

/* ---------- Section generic ---------- */
.mp-section{ padding:80px 0; }
.mp-section-alt{ background:var(--mp-light); }
.mp-section-head{ text-align:center; max-width:680px; margin:0 auto 50px; }
.mp-section-head h2{ font-size:34px; }
.mp-section-head p{ font-size:16.5px; }
.mp-eyebrow{ color:var(--mp-primary); font-weight:700; letter-spacing:1px; text-transform:uppercase; font-size:14px; }

/* ---------- Kenapa Pilih Kami ---------- */
.mp-grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.mp-feature-card{ background:#fff; border:1px solid var(--mp-border); border-radius:var(--mp-radius); padding:30px 24px; transition:.25s; }
.mp-feature-card:hover{ box-shadow:var(--mp-shadow); transform:translateY(-4px); border-color:var(--mp-primary); }
.mp-feature-icon{ width:54px; height:54px; border-radius:14px; background:rgba(234,106,18,.12); display:flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:16px; color:var(--mp-primary); }
.mp-feature-card h3{ font-size:19px; }

/* ---------- Layanan cards ---------- */
.mp-grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.mp-service-card{ background:#fff; border-radius:var(--mp-radius); overflow:hidden; box-shadow:var(--mp-shadow); border:1px solid var(--mp-border); }
.mp-service-card img{ height:210px; width:100%; object-fit:cover; }
.mp-service-card-body{ padding:24px; }
.mp-service-card h3{ font-size:20px; }
.mp-service-link{ font-weight:700; font-size:15px; color:var(--mp-primary); display:inline-flex; align-items:center; gap:6px; margin-top:8px; }

/* ---------- Detail layanan (page Layanan) ---------- */
.mp-service-detail{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; padding:60px 0; border-bottom:1px solid var(--mp-border); }
.mp-service-detail:last-child{ border-bottom:0; }
.mp-service-detail.mp-reverse .mp-service-detail-media{ order:2; }
.mp-service-detail-media img{ border-radius:var(--mp-radius); box-shadow:var(--mp-shadow); }
.mp-service-detail-content ul{ margin-top:16px; }
.mp-service-detail-content li{ padding:10px 0 10px 30px; position:relative; border-bottom:1px dashed var(--mp-border); color:var(--mp-dark); font-weight:500; }
.mp-service-detail-content li::before{ content:"✓"; position:absolute; left:0; top:10px; color:var(--mp-primary); font-weight:800; }

/* ---------- Area layanan ---------- */
.mp-area-chips{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.mp-area-chip{ background:#fff; border:2px solid var(--mp-border); padding:11px 24px; border-radius:999px; font-weight:700; font-size:15.5px; }
.mp-area-chip:hover{ border-color:var(--mp-primary); color:var(--mp-primary); }

/* ---------- Testimoni ---------- */
.mp-testi-card{ background:#fff; border:1px solid var(--mp-border); border-radius:var(--mp-radius); padding:28px; height:100%; }
.mp-testi-stars{ color:var(--mp-primary); margin-bottom:12px; letter-spacing:2px; }
.mp-testi-name{ font-weight:700; margin-top:16px; }
.mp-testi-role{ font-size:14px; color:var(--mp-gray); }

/* ---------- CTA ---------- */
.mp-cta{ background:linear-gradient(120deg, var(--mp-primary), var(--mp-primary-dark)); color:#fff; border-radius:24px; padding:60px 40px; text-align:center; }
.mp-cta h2{ color:#fff; font-size:30px; }
.mp-cta p{ color:rgba(255,255,255,.9); max-width:560px; margin:0 auto 24px; }

/* ---------- Tentang ---------- */
.mp-about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
.mp-about-media img{ border-radius:var(--mp-radius); box-shadow:var(--mp-shadow); }
.mp-vm-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:20px; }
.mp-vm-card{ background:#fff; border:1px solid var(--mp-border); border-radius:var(--mp-radius); padding:24px; }
.mp-misi-list li{ padding:8px 0 8px 26px; position:relative; }
.mp-misi-list li::before{ content:"→"; position:absolute; left:0; color:var(--mp-primary); font-weight:800; }
.mp-alat-item{ text-align:center; }
.mp-alat-item img{ border-radius:var(--mp-radius); margin-bottom:12px; height:160px; width:100%; object-fit:cover; }

/* ---------- Galeri Proyek ---------- */
.mp-gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.mp-gallery-item{ border-radius:var(--mp-radius); overflow:hidden; box-shadow:var(--mp-shadow); background:#fff; border:1px solid var(--mp-border); }
.mp-gallery-item img{ height:220px; width:100%; object-fit:cover; transition:.4s; }
.mp-gallery-item:hover img{ transform:scale(1.06); }
.mp-gallery-item-body{ padding:18px; }
.mp-gallery-item-body h3{ font-size:16px; margin-bottom:4px; }
.mp-gallery-item-body .mp-meta{ font-size:13px; color:var(--mp-gray); }
.mp-gallery-filter{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:36px; }
.mp-gallery-filter a{ padding:8px 18px; border-radius:999px; border:1px solid var(--mp-border); font-size:14px; font-weight:600; }
.mp-gallery-filter a.active, .mp-gallery-filter a:hover{ background:var(--mp-primary); color:#fff; border-color:var(--mp-primary); }

/* ---------- Kontak ---------- */
.mp-contact-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:40px; }
.mp-contact-info-card{ background:var(--mp-dark); color:#fff; border-radius:var(--mp-radius); padding:34px; }
.mp-contact-info-card h3{ color:#fff; }
.mp-contact-info-list li{ padding:14px 0; border-bottom:1px solid rgba(255,255,255,.12); display:flex; gap:12px; }
.mp-contact-info-list li:last-child{ border-bottom:0; }
.mp-contact-form{ background:#fff; border:1px solid var(--mp-border); border-radius:var(--mp-radius); padding:34px; box-shadow:var(--mp-shadow); }
.mp-form-row{ margin-bottom:18px; }
.mp-form-row label{ display:block; font-weight:700; margin-bottom:7px; font-size:15px; }
.mp-form-row input, .mp-form-row textarea{
	width:100%; padding:14px 16px; border:1.5px solid var(--mp-border); border-radius:10px; font-family:inherit; font-size:16px; background:var(--mp-light);
}
.mp-form-row input:focus, .mp-form-row textarea:focus{ outline:none; border-color:var(--mp-primary); background:#fff; }
.mp-map-embed{ border-radius:var(--mp-radius); overflow:hidden; margin-top:24px; }
.mp-map-embed iframe{ width:100%; height:320px; border:0; }
.mp-alert{ padding:14px 18px; border-radius:10px; margin-bottom:20px; font-weight:600; }
.mp-alert-success{ background:#e5f7ec; color:#177245; }
.mp-alert-error{ background:#fdeaea; color:#b3261e; }

/* ---------- Blog ---------- */
.mp-blog-layout{ display:grid; grid-template-columns:2fr 1fr; gap:44px; }
.mp-post-card{ background:#fff; border:1px solid var(--mp-border); border-radius:var(--mp-radius); overflow:hidden; margin-bottom:28px; box-shadow:var(--mp-shadow); }
.mp-post-card img{ height:260px; width:100%; object-fit:cover; }
.mp-post-card-body{ padding:26px; }
.mp-post-meta{ font-size:14px; color:var(--mp-gray); margin-bottom:8px; }
.mp-post-card h2{ font-size:23px; }
.mp-post-card h2 a:hover{ color:var(--mp-primary); }
.mp-read-more{ color:var(--mp-primary); font-weight:700; font-size:15px; }
.mp-sidebar .mp-widget{ background:#fff; border:1px solid var(--mp-border); border-radius:var(--mp-radius); padding:22px; margin-bottom:22px; }
.mp-widget-title{ font-size:17px; border-bottom:2px solid var(--mp-primary); padding-bottom:10px; margin-bottom:14px; display:inline-block; }
.mp-recent-post{ display:flex; gap:12px; margin-bottom:14px; align-items:flex-start; }
.mp-recent-post img{ width:70px; height:70px; object-fit:cover; border-radius:10px; flex-shrink:0; }
.mp-recent-post a{ font-weight:700; font-size:15px; line-height:1.4; }
.mp-single-content{ font-size:17px; line-height:1.85; }
.mp-single-content h2, .mp-single-content h3{ margin-top:1.4em; }
.mp-single-content img{ border-radius:var(--mp-radius); margin:20px 0; }
.mp-single-content ul, .mp-single-content ol{ padding-left:22px; margin-bottom:1em; }
.mp-single-content li{ list-style:disc; margin-bottom:6px; color:var(--mp-dark); }
.mp-tags{ margin-top:30px; display:flex; gap:10px; flex-wrap:wrap; }
.mp-tags a{ background:var(--mp-light); padding:6px 14px; border-radius:999px; font-size:13px; font-weight:600; }

.mp-pagination{ display:flex; gap:8px; justify-content:center; margin-top:20px; flex-wrap:wrap; }
.mp-pagination .page-numbers{ padding:9px 15px; border:1px solid var(--mp-border); border-radius:8px; font-weight:600; }
.mp-pagination .page-numbers.current{ background:var(--mp-primary); color:#fff; border-color:var(--mp-primary); }

/* ---------- Floating buttons ---------- */
.mp-wa-float{
	position:fixed; right:22px; bottom:92px; width:60px; height:60px; border-radius:50%;
	background:#25D366; display:flex; align-items:center; justify-content:center;
	box-shadow:0 8px 24px rgba(37,211,102,.45); z-index:998; animation:mp-pulse 2.4s infinite;
}
@keyframes mp-pulse{ 0%{ box-shadow:0 0 0 0 rgba(37,211,102,.5);} 70%{ box-shadow:0 0 0 14px rgba(37,211,102,0);} 100%{ box-shadow:0 0 0 0 rgba(37,211,102,0);} }
.mp-back-to-top{
	position:fixed; right:22px; bottom:22px; width:44px; height:44px; border-radius:50%;
	background:var(--mp-dark); color:#fff; border:0; font-size:18px; cursor:pointer;
	display:none; align-items:center; justify-content:center; z-index:998; box-shadow:var(--mp-shadow);
}
.mp-back-to-top.mp-show{ display:flex; }

/* ---------- Footer ---------- */
.mp-footer{ background:var(--mp-dark); color:#cfd3da; padding-top:60px; }
.mp-footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; padding-bottom:40px; }
.mp-footer h3, .mp-footer h4{ color:#fff; }
.mp-footer-brand img{ max-height:50px; width:auto; max-width:170px; object-fit:contain; margin-bottom:14px; }
.mp-social-links{ display:flex; gap:12px; margin-top:14px; }
.mp-social-links a{ background:rgba(255,255,255,.08); padding:9px 15px; border-radius:8px; font-size:14px; font-weight:600; }
.mp-social-links a:hover{ background:var(--mp-primary); }
.mp-footer-menu li, .mp-footer-contact li{ margin-bottom:11px; font-size:15px; }
.mp-footer-menu a:hover{ color:var(--mp-primary); }
.mp-footer-bottom{ border-top:1px solid rgba(255,255,255,.1); padding:20px 0; text-align:center; font-size:14px; }
.mp-footer-bottom-inner{ display:flex; justify-content:center; align-items:center; gap:20px; flex-wrap:wrap; }
.mp-footer-legal-link{ color:#cfd3da; text-decoration:underline; }
.mp-footer-legal-link:hover{ color:var(--mp-primary); }

/* ---------- 404 & search ---------- */
.mp-404{ text-align:center; padding:100px 0; }
.mp-404 h1{ font-size:90px; color:var(--mp-primary); margin-bottom:0; }
.mp-search-form{ display:flex; gap:10px; }
.mp-search-form input{ flex:1; padding:12px 16px; border-radius:8px; border:1.5px solid var(--mp-border); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 991px){
	.mp-hero-grid{ grid-template-columns:1fr; padding:60px 20px; text-align:center; }
	.mp-hero-actions{ justify-content:center; }
	.mp-hero-stats{ justify-content:center; text-align:center; }
	.mp-hero-image{ order:-1; }
	.mp-grid-4{ grid-template-columns:repeat(2,1fr); }
	.mp-grid-3{ grid-template-columns:repeat(2,1fr); }
	.mp-gallery-grid{ grid-template-columns:repeat(2,1fr); }
	.mp-about-grid, .mp-contact-grid, .mp-blog-layout{ grid-template-columns:1fr; }
	.mp-service-detail{ grid-template-columns:1fr; gap:26px; }
	.mp-service-detail.mp-reverse .mp-service-detail-media{ order:0; }
	.mp-footer-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width: 767px){
	body{ font-size:16px; }
	.mp-hero-image{ order:0; }
	.mp-hero-actions .mp-btn{ padding:12px 18px; font-size:13.5px; gap:6px; }
	.mp-topbar-left, .mp-topbar-right{ display:none; }
	.mp-topbar-inner{ justify-content:center; text-align:center; }
	.mp-topbar-mobile-date{ display:flex; align-items:center; justify-content:center; gap:6px; padding:6px 0; font-weight:700; font-size:12.5px; }

	/* ---- Panel menu mobile: full-screen, geser dari ATAS ---- */
	.mp-primary-nav{
		position:fixed; top:0; left:0; width:100%; height:100vh; height:100dvh;
		background:#fff; display:flex; flex-direction:column;
		transform:translateY(-100%); transition:transform .35s ease;
		z-index:1100; box-shadow:0 10px 30px rgba(0,0,0,.2);
	}
	.mp-primary-nav.mp-open{ transform:translateY(0); }
	body.mp-menu-open{ overflow:hidden; }

	.mp-mobile-menu-topbar{
		background:var(--mp-dark); color:#fff; font-weight:700; font-size:14px;
		padding:12px 20px; display:flex; align-items:center; gap:8px; flex-shrink:0;
	}

	.mp-mobile-menu-header{
		display:flex; align-items:center; justify-content:space-between; gap:14px;
		padding:18px 20px; border-bottom:1px solid var(--mp-border); flex-shrink:0;
	}
	.mp-mobile-menu-brand{ display:flex; align-items:center; gap:12px; }
	.mp-mobile-menu-brand img{ max-height:46px; width:auto; }
	.mp-mobile-menu-icon{
		width:46px; height:46px; border-radius:12px; background:rgba(242,101,15,.12); color:var(--mp-primary);
		display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0;
	}
	.mp-mobile-menu-brandtext strong{ display:block; font-family:var(--mp-font-heading); font-size:19px; color:var(--mp-dark); font-weight:800; line-height:1.2; }
	.mp-mobile-menu-brandtext strong span{ color:var(--mp-primary); }
	.mp-mobile-menu-tagline{ display:block; font-size:11.5px; color:var(--mp-gray); text-transform:uppercase; letter-spacing:.5px; font-weight:600; margin-top:2px; }
	.mp-menu-close{
		width:42px; height:42px; border-radius:10px; border:1.5px solid var(--mp-border); background:#fff;
		display:flex; align-items:center; justify-content:center; font-size:18px; color:var(--mp-dark);
		cursor:pointer; flex-shrink:0;
	}

	.mp-mobile-menu-list-wrap{ flex:1; min-height:0; overflow-y:auto; padding:14px 14px 6px; }
	.mp-menu{ display:flex; flex-direction:column; gap:4px; width:100%; align-items:stretch; }
	.mp-menu li{ position:relative; }
	.mp-menu a{
		display:block; padding:11px 14px; font-size:15px; font-weight:700; color:var(--mp-dark);
		border-radius:12px;
	}
	.mp-menu a::after{ display:none; }
	.mp-menu li.current-menu-item > a{ background:#FDF0E2; color:var(--mp-primary); }
	.mp-menu li.menu-item-has-children > a{ padding-right:40px; }
	.mp-submenu-toggle{
		position:absolute; right:4px; top:2px; width:32px; height:32px; border:0; background:none;
		display:flex; align-items:center; justify-content:center; color:var(--mp-dark); font-size:14px; cursor:pointer;
		transition:transform .25s ease;
	}
	.mp-menu li.mp-sub-open > .mp-submenu-toggle{ transform:rotate(180deg); color:var(--mp-primary); }
	.mp-menu .sub-menu{ display:none; padding-left:12px; margin-top:2px; margin-bottom:6px; }
	.mp-menu li.mp-sub-open > .sub-menu{ display:flex; flex-direction:column; gap:2px; }
	.mp-menu .sub-menu a{ font-size:14px; font-weight:600; padding:9px 14px; color:var(--mp-gray); }

	.mp-mobile-menu-cta{ display:block; padding:14px 16px calc(env(safe-area-inset-bottom,0px) + 14px); border-top:1px solid var(--mp-border); flex-shrink:0; }
	.mp-mobile-menu-wa-btn{
		display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
		background:var(--mp-primary); color:#fff; font-weight:700; font-size:15.5px;
		padding:17px; border-radius:14px;
	}

	.mp-menu-toggle{ display:flex; }
	.mp-logo-icon-box{ width:34px; height:34px; }
	.mp-logo-text-main{ font-size:16px; }
	.mp-logo-tagline{ font-size:8.5px; }
	.mp-nav-cta{ display:none; }
	.mp-hero h1{ font-size:32px; line-height:1.25; }
	h1{ font-size:23px; line-height:1.35; }
	.mp-hero p.mp-hero-sub{ font-size:16.5px; }
	.mp-hero-grid{ text-align:left; }
	.mp-hero-badge, .mp-hero-pills{ justify-content:flex-start; }
	.mp-hero-actions{ justify-content:flex-start; }
	.mp-hero-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px 8px; text-align:left; justify-content:flex-start; margin-top:32px; padding-top:20px; }
	.mp-hero-stat{ flex:none; min-width:0; }
	.mp-hero-stat strong{ font-size:21px; }
	.mp-hero-stat span{ font-size:11.5px; line-height:1.3; }
	.mp-section{ padding:56px 0; }
	.mp-section-head h2{ font-size:27px; }
	.mp-section-head p{ font-size:16px; }
	.mp-grid-4, .mp-grid-3, .mp-gallery-grid{ grid-template-columns:1fr; }
	.mp-footer-grid{ grid-template-columns:1fr; text-align:left; }
	.mp-footer{ padding-top:44px; }
	.mp-footer-brand img{ max-height:38px; max-width:140px; }
	.mp-footer p{ font-size:13.5px; line-height:1.6; }
	.mp-footer h3, .mp-footer h4{ font-size:15px; }
	.mp-social-links a{ padding:7px 12px; font-size:12.5px; }
	.mp-footer-menu li, .mp-footer-contact li{ font-size:13.5px; margin-bottom:8px; }
	.mp-footer-bottom{ font-size:12.5px; padding:16px 0; }
	.mp-social-links{ justify-content:flex-start; }
	.mp-cta{ padding:44px 22px; }
	.mp-cta h2{ font-size:24px; }
	.mp-vm-grid{ grid-template-columns:1fr; }
	.mp-wa-float{ width:54px; height:54px; right:16px; bottom:82px; }
	.mp-back-to-top{ right:16px; bottom:16px; }
	.mp-btn{ font-size:16px; padding:15px 24px; }
}

/* =========================================================
   TAMBAHAN: Redesign Beranda ala referensi (hero foto, badge,
   galeri preview berlabel, form survey, FAQ, CTA gelap-oren)
   ========================================================= */

:root{
	--mp-primary: #F2650F;
	--mp-primary-dark: #D4560A;
	--mp-dark: #15171C;
}

/* ---- Hero versi baru (dengan foto latar) ---- */
.mp-hero{ background-color: var(--mp-dark); }
.mp-hero-pills{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.mp-hero-pill{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:#e8eaf0; font-size:14px; font-weight:600; padding:9px 15px; border-radius:999px; }
.mp-hero-image{ position:relative; }
.mp-hero-caption-card{
	position:absolute; left:-18px; bottom:-18px; background:#fff; color:var(--mp-dark);
	border-radius:14px; padding:16px 20px; display:flex; align-items:center; gap:12px;
	box-shadow:0 14px 30px rgba(0,0,0,.25); max-width:78%;
}
.mp-hero-caption-icon{ font-size:22px; background:rgba(242,101,15,.12); color:var(--mp-primary); width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.mp-hero-caption-card strong{ display:block; font-size:21px; font-family:var(--mp-font-heading); color:var(--mp-primary); line-height:1.1; }
.mp-hero-caption-card span{ font-size:13px; color:var(--mp-gray); }

/* ---- Section head dengan link di kanan (Layanan) ---- */
.mp-section-head-split{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:40px; flex-wrap:wrap; }
.mp-section-head-split h2{ font-size:30px; margin:0; }
.mp-section-head-split .mp-service-link{ font-weight:700; color:var(--mp-primary); white-space:nowrap; }

/* ---- Galeri preview dengan badge kategori + caption overlay ---- */
.mp-gallery-grid-preview{ grid-template-columns:repeat(3,1fr); }
.mp-gallery-item-overlay{ position:relative; display:block; }
.mp-gallery-item-overlay img{ height:230px; }
.mp-gallery-noimg{ height:230px; background:linear-gradient(135deg,#e7e9ed,#f4f5f7); }
.mp-gallery-badge{
	position:absolute; top:14px; left:14px; background:var(--mp-primary); color:#fff; font-size:12px; font-weight:700;
	padding:6px 13px; border-radius:999px; text-transform:uppercase; letter-spacing:.4px; z-index:2;
}
.mp-gallery-caption{
	position:absolute; left:0; right:0; bottom:0; padding:16px 14px;
	background:linear-gradient(0deg, rgba(0,0,0,.75), rgba(0,0,0,0)); color:#fff; z-index:2;
	display:flex; flex-direction:column; gap:2px;
}
.mp-gallery-caption strong{ font-size:15px; }
.mp-gallery-caption span{ font-size:13px; color:#e2e4ea; }
.mp-gallery-item-overlay .mp-gallery-item-body{ display:none; }

/* ---- Tombol layanan versi outline ---- */
.mp-btn-service-outline{ border:2px solid var(--mp-border); color:var(--mp-dark); background:transparent; width:100%; padding:12px; margin-top:14px; border-radius:10px; }
.mp-btn-service-outline:hover{ border-color:var(--mp-primary); color:var(--mp-primary); }

/* ---- Kartu Form Survey Gratis ---- */
.mp-survey-card{ max-width:640px; margin:0 auto; background:#fff; border-radius:var(--mp-radius); overflow:hidden; box-shadow:var(--mp-shadow); border:1px solid var(--mp-border); }
.mp-survey-head{ background:linear-gradient(120deg, var(--mp-primary), var(--mp-primary-dark)); color:#fff; padding:26px 30px; display:flex; gap:16px; align-items:flex-start; }
.mp-survey-icon{ font-size:26px; background:rgba(255,255,255,.18); width:52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.mp-survey-head h3{ color:#fff; margin-bottom:4px; font-size:19px; }
.mp-survey-head p{ color:rgba(255,255,255,.9); margin:0; font-size:13px; }
.mp-survey-body{ padding:30px; }
.mp-form-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.mp-form-row select{ width:100%; padding:14px 16px; border:1.5px solid var(--mp-border); border-radius:10px; background:var(--mp-light); font-family:inherit; font-size:16px; }
.mp-form-row select:focus{ outline:none; border-color:var(--mp-primary); background:#fff; }

/* ---- Area chip dengan angka ---- */
.mp-area-chip em{ font-style:normal; color:var(--mp-primary); font-weight:700; margin-left:4px; }

/* ---- FAQ Accordion (native <details>) ---- */
.mp-faq-list{ max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.mp-faq-item{ background:#fff; border:1.5px solid var(--mp-border); border-radius:12px; padding:18px 22px; }
.mp-faq-item summary{ cursor:pointer; list-style:none; font-weight:700; font-size:16.5px; color:var(--mp-dark); display:flex; justify-content:space-between; align-items:center; gap:16px; }
.mp-faq-item summary::-webkit-details-marker{ display:none; }
.mp-faq-icon{ flex-shrink:0; width:26px; height:26px; border-radius:50%; background:var(--mp-light); color:var(--mp-primary); display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; transition:.25s; }
.mp-faq-item[open] .mp-faq-icon{ background:var(--mp-primary); color:#fff; transform:rotate(45deg); }
.mp-faq-item p{ margin:14px 0 0; color:var(--mp-gray); font-size:15.5px; }

/* ---- CTA versi gelap dengan tombol di kanan ---- */
.mp-cta-dark{ background:linear-gradient(120deg, var(--mp-primary), var(--mp-primary-dark)); display:flex; align-items:center; justify-content:space-between; gap:30px; text-align:left; flex-wrap:wrap; }
.mp-cta-dark h2{ font-size:26px; margin-bottom:8px; }
.mp-cta-dark p{ margin:0; max-width:520px; }
.mp-cta-dark .mp-btn-dark{ white-space:nowrap; flex-shrink:0; }

@media (max-width: 991px){
	.mp-gallery-grid-preview{ grid-template-columns:repeat(2,1fr); }
	.mp-hero-caption-card{ position:static; margin-top:16px; max-width:100%; }
	.mp-cta-dark{ text-align:center; justify-content:center; }
	.mp-cta-dark p{ margin:0 auto; }
}
@media (max-width: 767px){
	.mp-gallery-grid-preview{ grid-template-columns:1fr; }
	.mp-form-grid-2{ grid-template-columns:1fr; }
	.mp-section-head-split{ flex-direction:column; align-items:flex-start; }
	.mp-survey-head{ flex-direction:column; }
	.mp-cta-dark{ padding:30px 22px; gap:18px; border-radius:18px; }
	.mp-cta-dark h2{ font-size:19px; margin-bottom:6px; }
	.mp-cta-dark p{ font-size:14px; }
	.mp-cta-dark .mp-btn-dark{
		white-space:normal; width:100%; font-size:13px; padding:13px 16px; line-height:1.4;
	}
}

/* ---- Badge kategori & related posts di single post ---- */
.mp-post-cat-badge{
	display:inline-block; background:rgba(242,101,15,.12); color:var(--mp-primary); font-size:12.5px; font-weight:700;
	padding:6px 14px; border-radius:999px; text-transform:uppercase; letter-spacing:.4px; margin-bottom:14px;
}
.mp-related-posts{ margin-top:50px; border-top:1px solid var(--mp-border); padding-top:40px; }
.mp-related-posts h2{ font-size:22px; margin-bottom:24px; }
.mp-related-card{ display:block; }
.mp-related-card h3{ font-size:16px; margin-bottom:0; }
.mp-related-card .mp-post-meta{ margin-bottom:6px; }

/* ---- Bubble chat melayang (muncul otomatis tiap halaman dibuka) ---- */
.mp-chat-bubble{
	position:fixed; right:22px; bottom:172px; width:290px; max-width:calc(100vw - 40px);
	background:#fff; border-radius:16px; box-shadow:0 14px 34px rgba(0,0,0,.22);
	z-index:996; opacity:0; transform:translateY(16px) scale(.96); pointer-events:none;
	transition:opacity .3s ease, transform .3s ease;
}
.mp-chat-bubble.mp-show{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.mp-chat-bubble::after{
	content:""; position:absolute; right:26px; bottom:-9px; width:16px; height:16px;
	background:#fff; transform:rotate(45deg); box-shadow:4px 4px 8px rgba(0,0,0,.04);
}
.mp-chat-bubble-close{
	position:absolute; top:-10px; right:-10px; width:26px; height:26px; border-radius:50%;
	background:var(--mp-dark); color:#fff; border:2px solid #fff; font-size:12px; cursor:pointer;
	display:flex; align-items:center; justify-content:center; z-index:2;
}
.mp-chat-bubble-inner{ display:flex; gap:12px; padding:16px; align-items:flex-start; }
.mp-chat-bubble-avatar{
	width:40px; height:40px; border-radius:50%; background:#25D366; color:#fff; font-size:19px;
	display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.mp-chat-bubble-text{ font-size:13.5px; line-height:1.5; color:var(--mp-dark); }
.mp-chat-bubble-text strong{ display:block; font-size:13.5px; color:var(--mp-primary); margin-bottom:3px; }

@media (max-width: 767px){
	.mp-chat-bubble{ display:none !important; }
}

/* ---- Sticky bottom bar 2 tombol (khusus mobile) ---- */
.mp-mobile-cta-bar{ display:none; }
@media (max-width: 767px){
	body{ padding-bottom:52px; }
	.mp-wa-float{ display:none; }
	.mp-back-to-top{ bottom:68px; }
	.mp-mobile-cta-bar{
		display:flex; position:fixed; left:0; right:0; bottom:0; z-index:1001;
		box-shadow:0 -6px 20px rgba(0,0,0,.18);
	}
	.mp-mobile-cta-btn{
		flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
		padding:12px 6px; font-weight:700; font-size:12.5px; color:#fff;
		white-space:nowrap; overflow:hidden;
	}
	.mp-mobile-cta-btn svg{ width:15px; height:15px; flex-shrink:0; }
	.mp-mobile-cta-call{ background:var(--mp-dark); }
	.mp-mobile-cta-wa{ background:#25D366; }
}

@media (max-width: 360px){
	.mp-mobile-cta-btn{ font-size:11.5px; gap:4px; padding:11px 4px; }
	.mp-mobile-cta-btn svg{ width:13px; height:13px; }
}