/*
Theme Name: SAI - Sumber Alam Indolestari
Theme URI: https://indorepair.com/
Author: PT. Sumber Alam Indolestari
Description: Tema company profile PT. Sumber Alam Indolestari. Bersih, responsif, ramah SEO, efek kaca buram, dan selaras dengan brosur perusahaan.
Version: 1.3.41
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: sai
*/

/* ==========================================================================
   DAFTAR ISI (cari dengan "===== N." atau judul bagian)
   --------------------------------------------------------------------------
   Inti tema (bagian bernomor)
    1. Token desain (warna, kaca, radius, bayangan, font)   8. Kartu & komponen
    2. Dasar (reset, tipografi, fokus, container)           9. Halaman dalam
    3. Kaca buram (.glass, .glass-dark)                    10. Footer netral
    4. Tombol (.btn, .link-arrow)                          11. Lightbox foto
    5. Header kaca (pil melayang) dan menu                 12. Gerak halus
    6. Judul bagian (.eyebrow, .section)                   13. Responsif
    7. Beranda: hero dan statistik
   Lapisan berikutnya (tidak bernomor, berurutan menurut versi)
    Tombol tema terang/gelap -> Mode gelap -> Komponen isi halaman dalam
    -> Versi 1.3: media sosial, artikel, filter tab, gerak halaman
    -> Tambalan per versi (1.3.6 dst.): CTA footer, sosial, sertifikasi ISO,
       daftar proyek, aplikator, pita klien, WhatsApp, dropdown kustom
   Aturan: nilai warna/ukuran baru memakai variabel di bagian 1; tambalan
   baru ditaruh di paling bawah dengan judul "=== ... (versi) ===".
   ========================================================================== */

/* ===== 1. Token desain ===== */
:root {
	/* Biru dan kuning hanya untuk aksen & dekorasi */
	--navy-900: #1b2a56;
	--navy: #283b73;
	--navy-600: #3b4e88;
	--yellow: #ffe600;
	--yellow-600: #f2d800;
	/* Warna dasar netral */
	--ink: #1b2130;
	--muted: #5d6678;
	--line: #e6e9f0;
	--soft: #f5f6fa;
	--white: #fff;
	--graphite: #12151c;
	--graphite-2: #1b1f29;
	/* Kaca buram (liquid glass) */
	--glass: rgba(255, 255, 255, calc(.58 * var(--gk, 1)));
	--glass-strong: rgba(255, 255, 255, calc(.8 * var(--gk, 1)));
	--glass-border: rgba(255, 255, 255, .72);
	--glass-shadow: 0 10px 34px rgba(20, 23, 31, .09), inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 -1px 0 rgba(255, 255, 255, .25);
	--blur: blur(calc(20px * var(--bk, 1))) saturate(180%);

	--radius: 18px;
	--radius-sm: 12px;
	--shadow: 0 16px 40px rgba(20, 23, 31, .12);
	--shadow-sm: 0 2px 10px rgba(20, 23, 31, .07);
	--font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--container: 1160px;
	--header-space: 86px;
	--ease: cubic-bezier(.22, .8, .24, 1);
}

/* ===== 2. Dasar ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-space) + 8px); }
body {
	margin: 0; overflow-x: clip;
	font-family: var(--font); font-size: 1rem; line-height: 1.7; color: var(--ink); background: var(--white);
	-webkit-font-smoothing: antialiased;
}
body.lb-open, body.nav-open { overflow: hidden; }
img, svg, iframe { max-width: 100%; }
img { height: auto; display: block; }
a { color: var(--navy); text-underline-offset: 3px; }
a:hover { color: var(--navy-600); }
h1, h2, h3, h4 { font-family: var(--font); color: var(--navy); line-height: 1.25; margin: 0 0 .6em; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(1.9rem, 4.2vw, 3rem); }
h2 { font-size: clamp(1.45rem, 2.6vw, 2.05rem); }
h3 { font-size: 1.15rem; font-weight: 600; }
p { margin: 0 0 1em; }
.icon { flex: none; vertical-align: middle; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--yellow); color: var(--navy-900); padding: 10px 16px; border-radius: 8px; z-index: 400; font-weight: 600; }
.skip-link:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--navy-600); outline-offset: 3px; border-radius: 6px; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 20px; }

.scroll-progress { position: fixed; z-index: 250; top: 0; left: 0; width: 100%; height: 3px; transform-origin: left; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, rgba(59, 78, 136, .5), rgba(255, 230, 0, .55)); opacity: .55; pointer-events: none; }

/* ===== 3. Kaca buram ===== */
.glass, .glass-dark { -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.glass { background: var(--glass); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); }
.glass-dark {
	background: rgba(14, 17, 25, calc(.45 * var(--gk, 1))); color: #fff; border: 1px solid rgba(255, 255, 255, .2);
	box-shadow: 0 14px 40px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .22);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.glass { background: rgba(255, 255, 255, .92); }
	.glass-dark { background: rgba(14, 17, 25, .85); }
}

/* sorotan lembut yang mengikuti kursor (diatur main.js) */
.spot { position: relative; overflow: hidden; }
.spot::after {
	content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s ease;
	background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 230, 0, .20), transparent 62%);
}
.spot:hover::after { opacity: 1; }

/* ===== 4. Tombol ===== */
.btn {
	position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 13px 24px; border-radius: 999px; border: 1.5px solid transparent;
	font: 600 .95rem/1.2 var(--font); text-decoration: none; cursor: pointer;
	transition: transform .25s var(--ease), background-color .2s ease, color .2s ease, box-shadow .25s ease, border-color .2s ease;
}
.btn::after { /* kilau halus saat hover */
	content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; transform: skewX(-20deg);
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); transition: left .6s ease; pointer-events: none;
}
.btn:hover::after { left: 130%; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn .icon { transition: transform .25s var(--ease); }
.btn:hover .icon { transform: translateX(3px); }
.btn--yellow { background: var(--yellow); color: var(--navy-900); box-shadow: 0 8px 22px rgba(255, 230, 0, .38); }
.btn--yellow:hover { background: var(--yellow-600); color: var(--navy-900); box-shadow: 0 12px 28px rgba(242, 216, 0, .5); }
.btn--navy { background: var(--navy); color: #fff; box-shadow: 0 8px 20px rgba(40, 59, 115, .25); }
.btn--navy:hover { background: var(--navy-900); color: #fff; }
.btn--glass { color: var(--navy); background: var(--glass); border-color: var(--glass-border); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--glass-shadow); }
.btn--glass:hover { background: var(--glass-strong); color: var(--navy-900); }
.btn--outline { color: var(--navy); border-color: rgba(40, 59, 115, .45); background: transparent; }
.btn--outline:hover { background: var(--navy); border-color: var(--navy); color: #fff; }

.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; }
.link-arrow .icon { transition: transform .25s var(--ease); }
.link-arrow:hover .icon { transform: translateX(5px); }

/* ===== 5. Header kaca (pil melayang) ===== */
.header-wrap { position: sticky; top: 0; z-index: 200; height: var(--header-space); padding: 11px 12px 0; pointer-events: none; }
.site-header { position: relative; isolation: isolate; pointer-events: auto; max-width: 1180px; height: 64px; margin-inline: auto; border-radius: 22px; }
.site-header::before {
	content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
	background: rgba(255, 255, 255, calc(.56 * var(--gk, 1))); border: 1px solid var(--glass-border);
	-webkit-backdrop-filter: blur(calc(24px * var(--bk, 1))) saturate(190%); backdrop-filter: blur(calc(24px * var(--bk, 1))) saturate(190%);
	box-shadow: 0 8px 30px rgba(20, 23, 31, .10), inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(255, 255, 255, .3);
	transition: background-color .3s ease, box-shadow .3s ease;
}
.site-header.is-scrolled::before { background: rgba(255, 255, 255, calc(.8 * var(--gk, 1))); box-shadow: 0 12px 36px rgba(20, 23, 31, .16), inset 0 1px 0 rgba(255, 255, 255, .95); }
.header-bar { display: flex; align-items: center; gap: 12px; height: 100%; padding: 0 10px 0 14px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--navy); min-width: 0; }
.brand__logo { width: 44px; height: 44px; object-fit: contain; flex: none; transition: transform .5s var(--ease); }
.brand:hover .brand__logo { transform: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.brand__text strong { font-size: .98rem; font-weight: 700; color: var(--navy); white-space: nowrap; }
.brand__text small { font-size: .68rem; color: var(--muted); font-weight: 500; white-space: nowrap; }

.site-nav { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.site-nav .menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.site-nav .menu li { position: relative; }
.site-nav .menu a {
	position: relative; display: flex; align-items: center; gap: 6px; padding: 9px 13px; border-radius: 999px;
	color: var(--ink); text-decoration: none; font-weight: 500; font-size: .9rem; transition: background-color .25s ease, color .25s ease;
}
.site-nav .menu > li > a::after { /* garis kuning meluncur */
	content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--yellow-600);
	transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.site-nav .menu > li > a:hover { background: rgba(40, 59, 115, .07); color: var(--navy); }
.site-nav .menu > li > a:hover::after, .site-nav .menu .current-menu-item > a::after, .site-nav .menu .current-menu-ancestor > a::after { transform: scaleX(1); }
.site-nav .menu .current-menu-item > a, .site-nav .menu .current-menu-ancestor > a { color: var(--navy); font-weight: 600; }
.caret { width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .65; transition: transform .25s ease; }
li:hover > a > .caret { transform: rotate(225deg) translate(-1px, -1px); }

.site-nav .sub-menu {
	list-style: none; margin: 0; padding: 8px; position: absolute; left: 0; top: calc(100% + 12px); min-width: 280px;
	background: rgba(255, 255, 255, calc(.72 * var(--gk, 1))); border: 1px solid var(--glass-border); border-radius: 18px;
	-webkit-backdrop-filter: blur(calc(26px * var(--bk, 1))) saturate(190%); backdrop-filter: blur(calc(26px * var(--bk, 1))) saturate(190%);
	box-shadow: 0 18px 44px rgba(20, 23, 31, .16), inset 0 1px 0 rgba(255, 255, 255, .9);
	opacity: 0; visibility: hidden; transform: translateY(8px) scale(.98); transform-origin: top left;
	transition: opacity .2s ease, transform .25s var(--ease), visibility .2s;
}
.site-nav .sub-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.site-nav .menu li:hover > .sub-menu, .site-nav .menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.site-nav .sub-menu a { border-radius: 12px; font-size: .88rem; padding: 9px 12px; }
.site-nav .sub-menu a:hover { background: rgba(40, 59, 115, .08); transform: translateX(3px); }
.nav-cta { padding: 10px 18px; font-size: .86rem; white-space: nowrap; }

.nav-toggle { display: none; margin-left: auto; width: 44px; height: 44px; place-items: center; border-radius: 14px; border: 1px solid var(--glass-border); background: rgba(255, 255, 255, .6); color: var(--navy); cursor: pointer; }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: inline; }

/* ===== 6. Judul bagian ===== */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--navy-600); font-weight: 600; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow::before { content: ''; width: 28px; height: 4px; border-radius: 2px; background: var(--yellow-600); }
.section { padding: clamp(56px, 8vw, 96px) 0; }
.section--tight { padding: 28px 0 56px; }
.section--soft { background: var(--soft); }
.section--mesh { position: relative; overflow: hidden; }
.section--mesh::before {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(520px 340px at 8% 12%, rgba(255, 230, 0, .22), transparent 70%),
		radial-gradient(560px 380px at 95% 88%, rgba(40, 59, 115, .14), transparent 70%);
}
.section--mesh > .container { position: relative; }
.section--page { padding: clamp(36px, 6vw, 72px) 0; }
.section__head { max-width: 680px; margin: 0 auto clamp(28px, 4vw, 48px); text-align: center; }
.section__head .eyebrow { justify-content: center; }
.section__head p { color: var(--muted); margin: 0; }
.section__more { text-align: center; margin: 34px 0 0; }

/* ===== 7. Beranda: hero ===== */
.hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #eff2f9 0%, #fbfcfe 100%); }
.hero__bg { position: absolute; inset: 0; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(70px); animation: drift 22s ease-in-out infinite alternate; }
.blob--1 { width: 480px; height: 480px; left: -140px; top: -120px; background: rgba(59, 78, 136, .30); }
.blob--2 { width: 420px; height: 420px; right: -80px; top: 20px; background: rgba(255, 230, 0, .50); animation-duration: 26s; }
.blob--3 { width: 420px; height: 420px; right: 22%; bottom: -220px; background: rgba(40, 59, 115, .20); animation-duration: 30s; }
@keyframes drift { to { transform: translate3d(40px, 30px, 0) scale(1.08); } }
.hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(40, 59, 115, .16) 1.2px, transparent 1.4px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(115deg, #000, transparent 45%); mask-image: linear-gradient(115deg, #000, transparent 45%); }
.hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.hero { margin-top: calc(-1 * var(--header-space)); padding: calc(var(--header-space) + clamp(34px, 6vw, 70px)) 0 clamp(70px, 9vw, 110px); }
.hero h1 { margin-bottom: .5em; }
.mark { background: linear-gradient(transparent 64%, rgba(255, 230, 0, .9) 64%); padding: 0 .08em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hero .lead { font-size: 1.08rem; color: var(--muted); max-width: 56ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 22px; }
.hero__slogan { margin: 0; padding-left: 14px; border-left: 4px solid var(--yellow-600); color: var(--navy); font-weight: 600; }

.hero__media { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.frame { margin: 0; padding: 8px; border-radius: 26px; }
.frame img { width: 100%; height: 100%; object-fit: cover; border-radius: 19px; }
.hero__photo { transition: transform .35s ease-out; will-change: transform; }
.hero__photo--a { grid-column: 1 / 3; aspect-ratio: 16 / 9.4; }
.hero__photo--b, .hero__photo--c { aspect-ratio: 4 / 3; }
.chip { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 10px; border-radius: 18px; color: var(--navy); transition: transform .35s ease-out; }
.chip .icon { width: 34px; height: 34px; padding: 7px; border-radius: 12px; background: var(--yellow); color: var(--navy-900); }
.chip span { display: flex; flex-direction: column; line-height: 1.25; font-size: .74rem; color: var(--muted); }
.chip strong { font-size: .88rem; color: var(--navy); }
.chip--year { left: -22px; bottom: 26%; }
.chip--iso { right: -12px; top: -16px; }

/* statistik */
.stats { position: relative; z-index: 2; margin-top: -48px; }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); border-radius: 24px; overflow: hidden; }
.stat { padding: 22px 18px; text-align: center; border-right: 1px solid rgba(40, 59, 115, .08); transition: background-color .3s ease; }
.stat:hover { background: rgba(255, 255, 255, .5); }
.stat:last-child { border-right: 0; }
.stat strong { display: block; font-size: clamp(2.1rem, 3.6vw, 2.8rem); line-height: 1.1; margin-bottom: 4px; color: var(--navy); font-weight: 700; letter-spacing: -.02em; }
.stat > span { font-size: .92rem; color: var(--muted); }

/* ===== 8. Kartu & komponen ===== */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.card {
	display: flex; flex-direction: column; gap: 6px; padding: 26px; border-radius: var(--radius);
	background: #fff; border: 1px solid var(--line); text-decoration: none; color: var(--ink);
	transition: transform .35s var(--ease), box-shadow .35s ease, border-color .3s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; color: var(--ink); }
.card > * { position: relative; z-index: 1; }
.card h3 { margin: 10px 0 4px; transition: color .2s ease; }
.card:hover h3 { color: var(--navy-600); }
.card p { margin: 0 0 8px; color: var(--muted); font-size: .94rem; }
.card__icon { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; background: rgba(40, 59, 115, .07); color: var(--navy); transition: background-color .3s ease, color .3s ease, transform .4s var(--ease); }
.card:hover .card__icon { background: var(--navy); color: var(--yellow); transform: rotate(-6deg) scale(1.06); }
.card__more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .9rem; color: var(--navy); }
.card__more .icon { transition: transform .25s var(--ease); }
.card:hover .card__more .icon { transform: translateX(5px); }

.about { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.about__media { position: relative; }
.about__media .frame { padding: 10px; border-radius: 28px; }
.about__media img { aspect-ratio: 4 / 3.1; border-radius: 20px; }
.about__badge { position: absolute; right: -14px; bottom: -20px; padding: 14px 20px; border-radius: 20px; text-align: center; line-height: 1.15; color: var(--navy); }
.about__badge strong { display: block; font-size: 1.9rem; }
.about__badge span { font-size: .78rem; font-weight: 600; color: var(--muted); }
.about__text > p { color: var(--muted); }
.pillars { list-style: none; margin: 24px 0 28px; padding: 0; display: grid; gap: 12px; }
.pillars li { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 18px; transition: transform .3s var(--ease); }
.pillars li:hover { transform: translateX(6px); }
.pillars__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: rgba(255, 230, 0, .75); color: var(--navy-900); flex: none; }
.pillars strong { display: block; color: var(--navy); }
.pillars span { color: var(--muted); font-size: .9rem; line-height: 1.5; display: block; }

/* galeri */
.gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gallery__item { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; cursor: zoom-in; background: var(--soft); box-shadow: var(--shadow-sm); transition: box-shadow .35s ease, transform .35s var(--ease); }
.gallery__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease), filter .4s ease; }
.gallery__item:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.gallery__item:hover img { transform: scale(1.07); filter: saturate(1.08); }
.gallery__cap { position: absolute; left: 12px; bottom: 12px; padding: 6px 13px; border-radius: 999px; font-size: .8rem; font-weight: 600; transition: transform .35s var(--ease); }
.gallery__item:hover .gallery__cap { transform: translateY(-2px); }
.gallery__zoom { position: absolute; right: 12px; top: 12px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: var(--navy); opacity: 0; transform: scale(.7); transition: opacity .3s ease, transform .35s var(--ease); }
.gallery__item:hover .gallery__zoom, .gallery__item:focus-visible .gallery__zoom { opacity: 1; transform: none; }
@media (hover: none) { .gallery__zoom { opacity: 1; transform: none; } }

/* proyek */
.projects { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.project-col { border-radius: 22px; padding: 22px; transition: transform .35s var(--ease), box-shadow .3s ease; }
.project-col:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.project-col h3 { display: flex; align-items: center; gap: 10px; font-size: 1rem; margin-bottom: 12px; }
.project-col h3 .icon { width: 34px; height: 34px; padding: 7px; border-radius: 11px; background: rgba(255, 230, 0, .75); color: var(--navy-900); }
.project-col ul { list-style: none; margin: 0; padding: 0; position: relative; z-index: 1; }
.project-col h3 { position: relative; z-index: 1; }
.project-col li { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 9px 0; border-top: 1px solid rgba(40, 59, 115, .1); font-size: .86rem; line-height: 1.4; }
.project-col li em { font-style: normal; font-size: .74rem; font-weight: 600; color: var(--navy); background: rgba(255, 230, 0, .6); padding: 2px 9px; border-radius: 999px; white-space: nowrap; }

.trust { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 30px; border-radius: 24px; }
.trust h2 { font-size: 1.3rem; margin-bottom: .25em; }
.trust p { margin: 0; color: var(--muted); }
.trust > * { position: relative; z-index: 1; }

/* ajakan bertindak: kartu kaca di atas foto */
.cta-band { position: relative; padding: clamp(48px, 7vw, 84px) 0; background: linear-gradient(rgba(14, 17, 25, .6), rgba(14, 17, 25, .74)), var(--cta-bg) center / cover no-repeat, var(--graphite); }
.cta-card { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(24px, 4vw, 40px); border-radius: 28px; }
.cta-card h2 { color: #fff; font-size: clamp(1.25rem, 2.4vw, 1.75rem); margin-bottom: .25em; }
.cta-card p { margin: 0; color: rgba(255, 255, 255, .85); }

/* ===== 9. Halaman dalam ===== */
.page-hero {
	position: relative; color: #fff; margin-top: calc(-1 * var(--header-space));
	padding: calc(var(--header-space) + clamp(26px, 5vw, 52px)) 0 clamp(36px, 6vw, 64px);
	background: linear-gradient(rgba(14, 17, 25, .56), rgba(14, 17, 25, .8)), var(--hero) center / cover no-repeat, var(--graphite);
}
.page-hero h1 { color: #fff; margin-bottom: .3em; }
.page-hero .lead { max-width: 62ch; margin: 0; color: rgba(255, 255, 255, .88); font-size: 1.05rem; }
.breadcrumb { display: inline-flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; padding: 6px 15px; border-radius: 999px; font-size: .82rem; color: var(--muted); }
.breadcrumb a { color: var(--navy); text-decoration: none; font-weight: 500; }
.breadcrumb a:hover { color: var(--navy-600); text-decoration: underline; }
.breadcrumb .sep { opacity: .45; }

.prose { max-width: 820px; }
.prose h2 { margin-top: 1.8em; padding-left: 14px; border-left: 5px solid var(--yellow-600); }
.prose h2:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.prose li { margin-bottom: .45em; }
.prose li::marker { color: var(--navy-600); font-weight: 700; }
.prose .cards { margin: 8px 0 28px; grid-template-columns: repeat(2, 1fr); }
.prose .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }
.prose .wp-block-button__link {
	display: inline-flex; padding: 13px 24px; border-radius: 999px; background: var(--navy); color: #fff; text-decoration: none;
	font-weight: 600; font-size: .95rem; border: 1.5px solid var(--navy); transition: background-color .2s ease, transform .25s var(--ease), box-shadow .25s ease;
}
.prose .wp-block-button__link:hover { background: var(--navy-900); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(40, 59, 115, .25); }
.prose .is-style-outline .wp-block-button__link { background: transparent; color: var(--navy); }
.prose .is-style-outline .wp-block-button__link:hover { background: var(--navy); color: #fff; }
.prose .wp-block-table { margin: 0 0 1.6em; overflow-x: auto; }
.prose table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .95rem; }
.prose th { text-align: left; background: #eef0f6; color: var(--navy); padding: 11px 14px; font-weight: 600; border-bottom: 3px solid var(--yellow-600); }
.prose th:first-child { border-radius: 12px 0 0 0; }
.prose th:last-child { border-radius: 0 12px 0 0; text-align: right; width: 1%; white-space: nowrap; }
.prose td { padding: 11px 14px; border-bottom: 1px solid var(--line); transition: background-color .2s ease; }
.prose td:last-child { text-align: right; white-space: nowrap; color: var(--navy); font-weight: 500; }
.prose tbody tr:hover td { background: var(--soft); }
.prose img { border-radius: var(--radius); }
.map-embed { position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); background: var(--soft); box-shadow: var(--shadow-sm); }
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pagination { margin-top: 32px; }

/* ===== 10. Footer netral ===== */
.site-footer { background: var(--graphite); color: rgba(255, 255, 255, .7); font-size: .92rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr .8fr 1.3fr .8fr; gap: 36px; padding-block: 56px 40px; }
.site-footer h2 { color: #fff; font-size: .95rem; margin-bottom: 14px; letter-spacing: .02em; }
.site-footer h2::after { content: ''; display: block; width: 24px; height: 2px; background: rgba(255, 255, 255, .28); margin-top: 8px; border-radius: 2px; transition: width .35s var(--ease), background-color .3s ease; }
.footer-col:hover h2::after { width: 40px; background: var(--yellow-600); }
.site-footer a { color: rgba(255, 255, 255, .78); text-decoration: none; transition: color .2s ease; }
.site-footer a:hover { color: #fff; }
.brand--footer { margin-bottom: 14px; }
.brand--footer .brand__text strong { color: #fff; }
.brand--footer .brand__text small { color: rgba(255, 255, 255, .55); }
.footer-menu, .contact-list, .badges { list-style: none; margin: 0; padding: 0; }
.footer-menu li { margin-bottom: 8px; }
.footer-menu a { display: inline-block; transition: color .2s ease, transform .25s var(--ease); }
.footer-menu a:hover { transform: translateX(4px); }
.contact-list li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.contact-list .icon { color: rgba(255, 255, 255, .55); margin-top: 3px; }
.badges li { display: inline-block; margin: 0 6px 8px 0; padding: 5px 12px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; font-size: .78rem; color: rgba(255, 255, 255, .75); }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); padding: 18px 0; }
.footer-bottom .container { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: rgba(255, 255, 255, .5); }

/* tombol melayang */
.fab { position: fixed; right: 18px; bottom: 18px; z-index: 150; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fab__btn { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; border: 0; cursor: pointer; transition: transform .3s var(--ease), opacity .3s ease, box-shadow .3s ease; }
.fab__wa { background: #25d366; color: #fff; box-shadow: 0 10px 26px rgba(37, 211, 102, .4); }
.fab__wa:hover { transform: translateY(-3px) scale(1.06); color: #fff; box-shadow: 0 14px 32px rgba(37, 211, 102, .5); }
.fab__top { width: 46px; height: 46px; color: var(--navy); opacity: 0; transform: translateY(10px) scale(.8); pointer-events: none; }
.fab__top .icon { transform: rotate(-90deg); }
.fab__top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.fab__top:hover { transform: translateY(-3px); }

/* ===== 11. Pratinjau foto (lightbox) ===== */
.lightbox {
	position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 20px;
	background: rgba(10, 12, 18, .7); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
	opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__figure { margin: 0; max-width: min(980px, 92vw); text-align: center; transform: scale(.94); transition: transform .4s var(--ease); }
.lightbox.is-open .lightbox__figure { transform: none; }
.lightbox__img { max-width: 100%; max-height: 74vh; width: auto; margin-inline: auto; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .3); box-shadow: 0 30px 90px rgba(0, 0, 0, .55); transition: opacity .2s ease; }
.lightbox__img.is-loading { opacity: .25; }
.lightbox__cap { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; padding: 8px 16px; border-radius: 999px; font-size: .88rem; font-weight: 500; }
.lightbox__count { opacity: .7; font-size: .78rem; }
.lb-btn { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; transition: transform .25s var(--ease), background-color .2s ease; padding: 0; }
.lb-btn:hover { background: rgba(255, 255, 255, .22); transform: scale(1.08); }
.lb-btn--close { top: 18px; right: 18px; }
.lb-btn--prev { left: 18px; top: 50%; margin-top: -24px; }
.lb-btn--next { right: 18px; top: 50%; margin-top: -24px; }
.lb-btn--prev .icon { transform: rotate(180deg); }
.lb-btn:focus-visible { outline: 3px solid var(--yellow); }

/* ===== 12. Gerak halus ===== */
.js-reveal .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js-reveal .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
	.js-reveal .reveal { opacity: 1; transform: none; }
}

/* ===== 13. Responsif ===== */
@media (max-width: 1100px) {
	.brand__text small { display: none; }
	.site-nav .menu a { padding: 9px 10px; font-size: .86rem; }
}
@media (max-width: 1024px) {
	.cards { grid-template-columns: repeat(2, 1fr); }
	.projects { grid-template-columns: repeat(2, 1fr); }
	.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
	:root { --header-space: 78px; }
	.header-wrap { padding-top: 9px; }
	.site-header { height: 58px; border-radius: 20px; }
	.nav-toggle { display: inline-grid; }
	.site-nav {
		position: absolute; left: 0; right: 0; top: calc(100% + 8px); margin: 0; flex-direction: column; align-items: stretch; gap: 10px; padding: 12px;
		max-height: calc(100vh - 100px); overflow-y: auto; border-radius: 22px;
		background: rgba(255, 255, 255, calc(.8 * var(--gk, 1))); border: 1px solid var(--glass-border);
		-webkit-backdrop-filter: blur(calc(26px * var(--bk, 1))) saturate(190%); backdrop-filter: blur(calc(26px * var(--bk, 1))) saturate(190%);
		box-shadow: 0 22px 50px rgba(20, 23, 31, .22), inset 0 1px 0 rgba(255, 255, 255, .9);
		opacity: 0; visibility: hidden; transform: translateY(-10px) scale(.98); transform-origin: top right;
		transition: opacity .25s ease, transform .3s var(--ease), visibility .25s;
	}
	.site-nav.is-open { opacity: 1; visibility: visible; transform: none; }
	.site-nav .menu { flex-direction: column; align-items: stretch; gap: 2px; }
	.site-nav .menu a { padding: 12px 14px; font-size: .98rem; border-radius: 14px; }
	.site-nav .menu > li > a::after { display: none; }
	.site-nav .menu .current-menu-item > a, .site-nav .menu .current-menu-ancestor > a { background: rgba(255, 230, 0, .45); }
	.site-nav .sub-menu { position: static; display: none; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 6px 12px; min-width: 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
	.site-nav .menu li.is-expanded > .sub-menu { display: block; }
	.site-nav .sub-menu::before { display: none; }
	.site-nav .menu-item-has-children > a { display: flex; align-items: center; justify-content: space-between; }
	.caret { display: block; position: relative; flex: none; width: 6px; height: 6px; margin: 0 6px 3px 8px; opacity: .7; }
	.caret::before { content: ""; position: absolute; inset: -16px; }
	.site-nav .menu li.is-expanded > a > .caret { transform: rotate(225deg) translate(-2px, -2px); }
	.nav-cta { width: 100%; padding: 14px; }

	.hero__grid { grid-template-columns: 1fr; }
	.hero__media { max-width: 560px; }
	.chip--year { left: 8px; bottom: auto; top: -14px; }
	.chip--iso { right: 8px; top: auto; bottom: 22%; }
	.stats__grid { grid-template-columns: repeat(2, 1fr); }
	.stat:nth-child(2) { border-right: 0; }
	.stat:nth-child(-n+2) { border-bottom: 1px solid rgba(40, 59, 115, .08); }
	.about { grid-template-columns: 1fr; }
	.about__badge { right: 10px; }
	.gallery { grid-template-columns: repeat(2, 1fr); }
	.trust, .cta-card { flex-direction: column; align-items: flex-start; }
	.cta-card .btn { width: 100%; }
	.lb-btn--prev { left: 8px; }
	.lb-btn--next { right: 8px; }
}
@media (max-width: 600px) {
	.brand__logo { width: 40px; height: 40px; }
	.brand__text strong { font-size: .8rem; white-space: normal; line-height: 1.2; }
	.brand { flex: 1 1 auto; gap: 9px; }
	.header-bar { gap: 8px; padding: 0 8px 0 10px; }
	.theme-toggle, .nav-toggle { width: 40px; height: 40px; border-radius: 12px; }
	.cards, .prose .cards { grid-template-columns: 1fr; }
	.projects { grid-template-columns: 1fr; }
	.footer-grid { grid-template-columns: 1fr; gap: 28px; padding-block: 40px 28px; }
	.hero__actions .btn { width: 100%; }
	.gallery { gap: 10px; }
	.gallery__cap { left: 8px; bottom: 8px; font-size: .7rem; padding: 4px 10px; }
	.gallery__zoom { display: none; }
	.stat { padding: 16px 10px; }
	.stat strong { font-size: 2rem; }
	.stat > span { font-size: .8rem; }
	.trust { padding: 22px; }
	.prose table { font-size: .88rem; }
	.prose td, .prose th { padding: 9px 10px; }
	.fab { right: 12px; bottom: 12px; }
	.lightbox__img { max-height: 66vh; }
	.lb-btn { width: 42px; height: 42px; }
}

/* ===== Tombol tema (terang / gelap) ===== */
.theme-toggle {
	flex: none; width: 42px; height: 42px; display: inline-grid; place-items: center; border-radius: 14px; cursor: pointer;
	border: 1px solid var(--glass-border); background: rgba(255, 255, 255, calc(.55 * var(--gk, 1))); color: var(--navy);
	transition: transform .3s var(--ease), background-color .25s ease;
}
.theme-toggle:hover { background: var(--glass-strong); box-shadow: 0 6px 18px rgba(20, 23, 31, .12); }
.theme-toggle .icon { transition: transform .4s var(--ease), opacity .25s ease; }
.theme-toggle__sun { display: none; }
[data-theme="dark"] .theme-toggle__sun { display: inline; }
[data-theme="dark"] .theme-toggle__moon { display: none; }
@media (max-width: 900px) { .brand { margin-right: auto; } .theme-toggle + .nav-toggle { margin-left: 0; } .nav-toggle { margin-left: 0; } }

/* ===== Mode gelap ===== */
html { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }
[data-theme="dark"] {
	/* biru jadi lebih terang agar terbaca; kuning tetap sebagai aksen */
	--navy: #c3d0ff;
	--navy-600: #9fb2f0;
	--ink: #e7eaf2;
	--muted: #a2abbd;
	--line: rgba(255, 255, 255, .10);
	--soft: #151925;
	--white: #0e1118;
	--glass: rgba(26, 31, 44, calc(.56 * var(--gk, 1)));
	--glass-strong: rgba(34, 40, 56, calc(.82 * var(--gk, 1)));
	--glass-border: rgba(255, 255, 255, .13);
	--glass-shadow: 0 10px 34px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .10), inset 0 -1px 0 rgba(255, 255, 255, .03);
	--shadow: 0 16px 40px rgba(0, 0, 0, .5);
	--shadow-sm: 0 2px 10px rgba(0, 0, 0, .4);
}
[data-theme="dark"] body { background: var(--white); }
[data-theme="dark"] .site-header::before { background: rgba(20, 24, 34, calc(.55 * var(--gk, 1))); box-shadow: 0 8px 30px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .1); }
[data-theme="dark"] .site-header.is-scrolled::before { background: rgba(18, 21, 30, calc(.82 * var(--gk, 1))); box-shadow: 0 12px 36px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .12); }
[data-theme="dark"] .site-nav .sub-menu { background: rgba(22, 26, 38, calc(.8 * var(--gk, 1))); box-shadow: 0 18px 44px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .1); }
[data-theme="dark"] .site-nav .menu > li > a:hover, [data-theme="dark"] .site-nav .sub-menu a:hover { background: rgba(255, 255, 255, .08); }
[data-theme="dark"] .nav-toggle, [data-theme="dark"] .theme-toggle { background: rgba(255, 255, 255, .08); }
[data-theme="dark"] .theme-toggle:hover { background: rgba(255, 255, 255, .16); }
[data-theme="dark"] .hero { background: linear-gradient(180deg, #121624 0%, #0e1118 100%); }
[data-theme="dark"] .hero::after { background-image: radial-gradient(rgba(195, 208, 255, .12) 1.2px, transparent 1.4px); }
[data-theme="dark"] .blob--1 { background: rgba(59, 78, 136, .55); }
[data-theme="dark"] .blob--2 { background: rgba(255, 230, 0, .18); }
[data-theme="dark"] .blob--3 { background: rgba(59, 78, 136, .35); }
[data-theme="dark"] .section--mesh::before {
	background: radial-gradient(520px 340px at 8% 12%, rgba(255, 230, 0, .07), transparent 70%), radial-gradient(560px 380px at 95% 88%, rgba(95, 120, 220, .16), transparent 70%);
}
[data-theme="dark"] .stat { border-right-color: rgba(255, 255, 255, .08); }
[data-theme="dark"] .stat:hover { background: rgba(255, 255, 255, .05); }
[data-theme="dark"] .card { background: #161a26; }
[data-theme="dark"] .card:hover { border-color: rgba(255, 230, 0, .35); }
[data-theme="dark"] .card__icon { background: rgba(195, 208, 255, .10); }
[data-theme="dark"] .card:hover .card__icon { background: var(--yellow); color: var(--navy-900); }
[data-theme="dark"] .spot::after { background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 230, 0, .10), transparent 62%); }
[data-theme="dark"] .btn--navy, [data-theme="dark"] .prose .wp-block-button__link { background: var(--yellow); border-color: var(--yellow); color: var(--navy-900); box-shadow: 0 8px 22px rgba(255, 230, 0, .22); }
[data-theme="dark"] .btn--navy:hover, [data-theme="dark"] .prose .wp-block-button__link:hover { background: var(--yellow-600); border-color: var(--yellow-600); color: var(--navy-900); }
[data-theme="dark"] .btn--outline { border-color: rgba(195, 208, 255, .45); }
[data-theme="dark"] .btn--outline:hover, [data-theme="dark"] .prose .is-style-outline .wp-block-button__link:hover { background: var(--navy); border-color: var(--navy); color: var(--navy-900); }
[data-theme="dark"] .prose .is-style-outline .wp-block-button__link { background: transparent; color: var(--navy); border-color: rgba(195, 208, 255, .45); }
[data-theme="dark"] .prose th { background: #1b2030; }
[data-theme="dark"] .prose tbody tr:hover td { background: rgba(255, 255, 255, .04); }
[data-theme="dark"] .gallery__zoom { background: rgba(20, 24, 34, .7); }
[data-theme="dark"] .project-col li em, [data-theme="dark"] .pillars__icon, [data-theme="dark"] .project-col h3 .icon { background: rgba(255, 230, 0, .85); color: var(--navy-900); }
[data-theme="dark"] .mark { background: linear-gradient(transparent 64%, rgba(255, 230, 0, .38) 64%); }
[data-theme="dark"] .map-embed iframe { filter: invert(.9) hue-rotate(180deg) saturate(.8); }
[data-theme="dark"] .site-footer { background: #090b10; }
[data-theme="dark"] img { filter: brightness(.94); }
[data-theme="dark"] .brand__logo, [data-theme="dark"] .lightbox__img { filter: none; }
@media (max-width: 900px) {
	[data-theme="dark"] .site-nav { background: rgba(18, 21, 30, calc(.88 * var(--gk, 1))); box-shadow: 0 22px 50px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .1); }
	[data-theme="dark"] .site-nav .menu .current-menu-item > a, [data-theme="dark"] .site-nav .menu .current-menu-ancestor > a { background: rgba(255, 230, 0, .18); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	[data-theme="dark"] .glass { background: rgba(26, 31, 44, .94); }
}
body, .card, .site-header::before { transition-property: background-color, color, border-color, box-shadow; }

/* ===== Halaman dalam: komponen isi ===== */
.prose--wide { max-width: 980px; margin-inline: auto; }
.page-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(28px, 4vw, 52px); align-items: start; }
.page-grid .prose { max-width: none; }
.prose h3 { color: var(--navy); }
.prose p { margin: 0 0 1.1em; }

.feat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 0 0 28px; }
.feat-grid--3 { grid-template-columns: repeat(3, 1fr); }
.feat { display: flex; gap: 14px; align-items: flex-start; padding: 20px; border-radius: var(--radius); transition: transform .35s var(--ease), box-shadow .35s ease; }
.feat:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.feat__icon { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: rgba(255, 230, 0, .75); color: var(--navy-900); transition: transform .35s var(--ease); }
.feat:hover .feat__icon { transform: scale(1.08); }
.feat h3 { margin: 2px 0 4px; font-size: 1rem; }
.feat p { margin: 0; font-size: .9rem; color: var(--muted); }
.feat a { font-weight: 600; overflow-wrap: anywhere; }

.num-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 8px 0 30px; }
.num { padding: 20px 14px; text-align: center; border-radius: var(--radius); }
.num strong { display: block; font-size: clamp(2rem, 4vw, 2.7rem); line-height: 1.1; color: var(--navy); font-weight: 700; letter-spacing: -.02em; }
.num span { font-size: .9rem; color: var(--muted); }

.timeline { list-style: none; counter-reset: step; margin: 0 0 28px !important; padding: 0 !important; position: relative; }
.timeline::before { content: ''; position: absolute; left: 19px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--yellow-600), rgba(40, 59, 115, .15)); }
.timeline li { counter-increment: step; position: relative; display: flex; flex-direction: column; gap: 2px; padding: 0 0 20px 58px; margin: 0; }
.timeline li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--yellow); color: var(--navy-900); font-weight: 700; box-shadow: 0 0 0 5px var(--white); }
.timeline strong { color: var(--navy); font-size: 1.02rem; }
.timeline span { color: var(--muted); font-size: .93rem; }

.faq { display: grid; gap: 10px; margin: 0 0 28px; }
.faq details { border-radius: 16px; padding: 0 18px; transition: box-shadow .3s ease; }
.faq details[open] { box-shadow: var(--shadow-sm); }
.faq summary { cursor: pointer; list-style: none; padding: 15px 28px 15px 0; font-weight: 600; color: var(--navy); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; position: absolute; right: 4px; top: 50%; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-70%) rotate(45deg); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq p { margin: 0 0 16px; color: var(--muted); }

.callout { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin: 28px 0 8px; padding: 26px 28px; border-radius: 24px; background: linear-gradient(135deg, var(--navy-900), #2a3d77); border-color: rgba(255, 255, 255, .15); }
.callout h3 { color: #fff; margin: 0 0 6px; }
.callout p { margin: 0; color: rgba(255, 255, 255, .82); }
.gallery--page { margin: 0 0 28px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.side { position: sticky; top: calc(var(--header-space) + 16px); display: grid; gap: 16px; }
.side__card { padding: 22px; border-radius: 22px; }
.side__card h2 { font-size: 1.05rem; margin-bottom: 8px; }
.side__card p { margin: 0 0 14px; font-size: .92rem; color: var(--muted); }
.side__card .btn { width: 100%; }
.side__tel { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; font-weight: 600; text-decoration: none; }
.side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.side li a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; text-decoration: none; color: var(--ink); font-size: .92rem; transition: background-color .2s ease, transform .25s var(--ease); }
.side li a:hover { background: rgba(40, 59, 115, .08); transform: translateX(3px); }
.side li.is-current a { background: rgba(255, 230, 0, .5); font-weight: 600; }
.side li .icon { color: var(--navy); flex: none; }

.wa-form { display: grid; gap: 14px; padding: 24px; border-radius: 24px; margin: 0 0 28px; }
.wa-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wa-form label { display: grid; gap: 6px; font-size: .86rem; font-weight: 600; color: var(--navy); }
.wa-form input, .wa-form select, .wa-form textarea {
	font: inherit; font-weight: 400; color: var(--ink); width: 100%; padding: 11px 14px; border-radius: 12px;
	border: 1px solid var(--line); background: rgba(255, 255, 255, .7); transition: border-color .2s ease, box-shadow .2s ease;
}
.wa-form input:focus, .wa-form select:focus, .wa-form textarea:focus { outline: none; border-color: var(--navy-600); box-shadow: 0 0 0 4px rgba(59, 78, 136, .15); }
.wa-form .btn { justify-self: start; }
.wa-form__note { margin: 0; font-size: .8rem; color: var(--muted); }

[data-theme="dark"] .wa-form input, [data-theme="dark"] .wa-form select, [data-theme="dark"] .wa-form textarea { background: rgba(255, 255, 255, .06); }
[data-theme="dark"] .feat__icon { color: var(--navy-900); }
[data-theme="dark"] .timeline li::before { box-shadow: 0 0 0 5px var(--white); }
[data-theme="dark"] .side li a:hover { background: rgba(255, 255, 255, .08); }
[data-theme="dark"] .side li.is-current a { background: rgba(255, 230, 0, .18); }
[data-theme="dark"] .callout { background: linear-gradient(135deg, #1b2a56, #222f5c); }

@media (max-width: 1024px) {
	.page-grid { grid-template-columns: minmax(0, 1fr); }
	.side { position: static; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
	.feat-grid, .feat-grid--3, .wa-form__row, .side { grid-template-columns: 1fr; }
	.callout { padding: 22px; }
}

/* breadcrumb di atas foto */
.page-hero .breadcrumb { color: rgba(255, 255, 255, .8); background: rgba(14, 17, 25, .38); border-color: rgba(255, 255, 255, .2); box-shadow: none; }
.page-hero .breadcrumb a { color: #fff; }
.page-hero .breadcrumb a:hover { color: var(--yellow); }

/* ===== Versi 1.3: media sosial, artikel, filter, gerak halaman ===== */
.social { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.social a {
	display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; text-decoration: none;
	border: 1px solid rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .06);
	transition: transform .3s var(--ease), background-color .25s ease, color .25s ease, border-color .25s ease;
}
.social a:hover { transform: translateY(-3px); background: var(--yellow); border-color: var(--yellow); color: var(--navy-900); }
.feat--link { text-decoration: none; color: inherit; }
.feat--link:hover h3 { color: var(--navy-600); }
.map-address { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 6px; color: var(--muted); font-size: .95rem; }
.map-address .icon { flex: none; margin-top: 4px; color: var(--navy); }

/* artikel */
.blog-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 28px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips__item { padding: 8px 16px; border-radius: 999px; font-size: .88rem; font-weight: 600; text-decoration: none; color: var(--navy); border: 1px solid var(--line); background: var(--glass); transition: transform .25s var(--ease), background-color .25s ease, color .25s ease; }
.chips__item:hover { transform: translateY(-2px); background: var(--glass-strong); }
.chips__item.is-active { background: var(--yellow); border-color: var(--yellow); color: var(--navy-900); }
form.search { display: flex; align-items: center; border-radius: 999px; padding: 4px 4px 4px 16px; min-width: 240px; }
form.search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; color: var(--ink); padding: 8px 6px; outline: none; }
form.search button { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer; background: var(--yellow); color: var(--navy-900); display: grid; place-items: center; transition: transform .25s var(--ease); }
form.search button:hover { transform: scale(1.08); }
form.search:focus-within { box-shadow: 0 0 0 4px rgba(59, 78, 136, .15); }
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.post-card { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--ink); transition: transform .35s var(--ease), box-shadow .35s ease; }
.post-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.post-card__img { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--soft); }
.post-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.post-card:hover .post-card__img img { transform: scale(1.06); }
.post-card__cat { position: absolute; left: 12px; top: 12px; padding: 5px 12px; border-radius: 999px; font-size: .74rem; font-weight: 600; }
.post-card__body { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; flex: 1; }
.post-card__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: .78rem; color: var(--muted); }
.post-card__meta .icon, .post-hero__meta .icon { vertical-align: -2px; }
.post-card__title { font-size: 1.08rem; line-height: 1.35; color: var(--navy); font-weight: 700; }
.post-card__excerpt { font-size: .9rem; color: var(--muted); }
.post-card .card__more { margin-top: auto; padding-top: 6px; }
.dot { opacity: .5; }
.post-hero__cat { display: inline-block; margin-bottom: 12px; padding: 5px 14px; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.post-hero__meta { margin: 6px 0 0; color: rgba(255, 255, 255, .85); font-size: .9rem; }
.prose--article { font-size: 1.04rem; line-height: 1.85; }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); font-size: .9rem; }
.share span { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--navy); }
.share a, .share button { font: inherit; font-size: .84rem; font-weight: 600; padding: 7px 15px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass); color: var(--navy); text-decoration: none; cursor: pointer; transition: transform .25s var(--ease), background-color .25s ease; }
.share a:hover, .share button:hover { transform: translateY(-2px); background: var(--yellow); border-color: var(--yellow); color: var(--navy-900); }
.pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 34px; }
.pagination .page-numbers { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; color: var(--navy); font-weight: 600; background: var(--glass); transition: transform .25s var(--ease), background-color .25s ease; }
.pagination .page-numbers:hover { transform: translateY(-2px); }
.pagination .page-numbers.current { background: var(--yellow); border-color: var(--yellow); color: var(--navy-900); }
.empty { padding: 36px; border-radius: 24px; text-align: center; }
.section--404 { padding-block: clamp(80px, 12vw, 140px); }

/* filter bergaya tab */
.filter-tabs { position: relative; display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 5px; margin: 0 0 26px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-border); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--glass-shadow); }
.filter-tabs button { position: relative; z-index: 1; font: inherit; font-size: .88rem; font-weight: 600; padding: 9px 18px; border: 0; border-radius: 999px; cursor: pointer; background: transparent; color: var(--muted); transition: color .25s ease; }
.filter-tabs button:hover { color: var(--navy); }
.filter-tabs button[aria-selected="true"] { color: var(--navy-900); }
.filter-tabs__pill { position: absolute; left: 0; top: 0; z-index: 0; width: 0; height: 0; border-radius: 999px; background: var(--yellow); box-shadow: 0 6px 16px rgba(255, 230, 0, .35); transition: transform .4s var(--ease), width .4s var(--ease), height .4s var(--ease), top .4s var(--ease); }
.filter-tabs.is-ready .filter-tabs__pill { opacity: 1; }
.filter-item { transition: opacity .25s ease, transform .35s var(--ease); }
.filter-item.is-out { opacity: 0 !important; transform: scale(.96) translateY(8px) !important; }
.filter-item[hidden] { display: none !important; }
.proj-group h2 { margin-top: 0; }
.proj-group { margin-bottom: 8px; }

/* gerak antar halaman dan elemen */
@keyframes pageIn { from { opacity: 0; transform: translateY(10px); } }
#konten { animation: pageIn .55s var(--ease) backwards; }
.site-footer { animation: pageIn .7s var(--ease) .1s backwards; }
html.is-leaving #konten, html.is-leaving .site-footer { opacity: 0; transform: translateY(-6px); transition: opacity .22s ease, transform .22s ease; }
@keyframes faqIn { from { opacity: 0; transform: translateY(-4px); } }
.faq details[open] > p { animation: faqIn .35s var(--ease); }
@keyframes pop { 50% { transform: scale(1.06); } }
.num strong.is-done, .stat strong.is-done { animation: pop .45s var(--ease); }

/* menu lebih rapat bila item banyak */
@media (min-width: 901px) and (max-width: 1280px) {
	.nav-cta { display: none; }
	.site-nav .menu a { padding: 9px 11px; }
}

[data-theme="dark"] .chips__item, [data-theme="dark"] .share a, [data-theme="dark"] .share button, [data-theme="dark"] .pagination .page-numbers { background: rgba(255, 255, 255, .06); }
[data-theme="dark"] .chips__item.is-active, [data-theme="dark"] .pagination .page-numbers.current { background: var(--yellow); }
[data-theme="dark"] .share a:hover, [data-theme="dark"] .share button:hover { background: var(--yellow); }
[data-theme="dark"] form.search input { color: var(--ink); }
[data-theme="dark"] .filter-tabs button[aria-selected="true"] { color: var(--navy-900); }

@media (max-width: 1024px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
	.post-grid { grid-template-columns: 1fr; }
	.blog-tools { flex-direction: column; align-items: stretch; }
	form.search { min-width: 0; }
	.filter-tabs button { padding: 8px 14px; font-size: .84rem; }
}

.callout__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .08); }
.btn--ghost:hover { background: rgba(255, 255, 255, .2); color: #fff; }
@media (max-width: 700px) { .callout__actions .btn { width: 100%; } }

/* === Perbaikan tab filter (Seila, 12 Okt 2026) ===
   Lima label panjang tidak muat satu baris di wadah 1160px dengan ukuran
   tombol bawaan, jadi tombol terakhir menggantung ke baris kedua. Kini
   tombol lebih ramping agar tetap satu baris, dan hanya membungkus
   (terpusat, sudut wajar) di layar kecil. */
.filter-tabs button { white-space: nowrap; padding: 8px 13px; font-size: .83rem; }
/* Desktop: satu baris penuh, tombol berbagi lebar merata. */
@media (min-width: 901px) {
  .filter-tabs { display: flex; flex-wrap: nowrap; width: 100%; }
  .filter-tabs button { flex: 1 1 auto; text-align: center; }
}
/* Tablet/ponsel: baris bisa digeser ke samping, tanpa membungkus. */
@media (max-width: 900px) {
  .filter-tabs { display: flex; flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .filter-tabs::-webkit-scrollbar { display: none; }
  .filter-tabs button { flex: 0 0 auto; }
}
/* Ponsel: kisi 2 kolom rapi, "Semua" selebar penuh, label panjang boleh turun baris. */
@media (max-width: 640px) {
  .filter-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; padding: 6px; border-radius: 22px; overflow: visible; }
  .filter-tabs button { white-space: normal; line-height: 1.25; padding: 10px 8px; font-size: .8rem; display: flex; align-items: center; justify-content: center; text-align: center; min-height: 44px; }
  .filter-tabs button:first-of-type { grid-column: 1 / -1; }
}

/* === Pita CTA footer: tombol sejajar, selebar sama, nomor tidak turun baris (1.3.6) === */
.cta-card .callout__actions { flex: 0 0 auto; flex-direction: column; flex-wrap: nowrap; align-items: stretch; width: 250px; }
.cta-card .callout__actions .btn { width: 100%; white-space: nowrap; }
@media (max-width: 900px) {
  .cta-card .callout__actions { width: 100%; }
}

/* === Ikon sosial footer: tanpa lingkaran, seukuran ikon kontak, sejajar kolom ikon (1.3.7) === */
.social--footer { margin: 14px 0 0; gap: 12px; }
.social--footer a { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 0; border-radius: 0; background: none; color: rgba(255, 255, 255, .55); }
.social--footer a:hover { transform: translateY(-2px); background: none; border: 0; color: var(--yellow); }
.social--footer a .icon { display: block; }

/* === Sertifikasi ISO: kartu di halaman Legalitas + logo di footer (1.3.8) === */
.cert-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0 0 20px; }
.cert { display: flex; flex-direction: column; padding: 20px; border-radius: var(--radius); }
.cert__logo { display: grid; place-items: center; padding: 12px; margin-bottom: 14px; border-radius: 16px; background: #fff; }
.cert__logo img { display: block; width: auto; max-width: 100%; height: 110px; object-fit: contain; }
.cert h3 { margin: 0; font-size: 1.1rem; }
.cert__sub { margin: 2px 0 14px; color: var(--muted); font-size: .9rem; }
.cert__data { display: grid; gap: 8px; margin: auto 0 0; }
.cert__data div { display: flex; justify-content: space-between; gap: 12px; padding-top: 8px; border-top: 1px solid rgba(128, 128, 128, .22); font-size: .86rem; }
.cert__data dt { color: var(--muted); }
.cert__data dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.cert-body { display: flex; align-items: center; gap: 22px; padding: 18px 22px; margin: 0 0 16px; border-radius: var(--radius); }
.cert-body__logos { display: flex; align-items: center; gap: 12px; flex: none; padding: 10px 14px; border-radius: 16px; background: #fff; }
.cert-body__logos img { display: block; width: auto; height: 62px; }
.cert-body p { margin: 0; font-size: .92rem; }
.cert-scope { padding: 16px 22px; margin: 0 0 28px; border-radius: var(--radius); }
.cert-scope summary { cursor: pointer; font-weight: 600; }
.cert-scope p { margin: 12px 0 0; font-size: .86rem; color: var(--muted); }
@media (max-width: 900px) { .cert-grid { grid-template-columns: 1fr; } .cert__logo img { height: 96px; } }
@media (max-width: 640px) { .cert-body { flex-direction: column; align-items: flex-start; } }
.badges--logo { display: flex; flex-wrap: wrap; gap: 8px; }
.badges--logo li { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.badges--logo a { display: grid; place-items: center; width: 74px; height: 56px; padding: 4px; border-radius: 12px; background: #fff; transition: transform .25s var(--ease), box-shadow .25s ease; }
.badges--logo a:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, .3); }
.badges--logo img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; }
.badges__note { margin: 10px 0 0; font-size: .78rem; color: rgba(255, 255, 255, .55); }

/* === Daftar proyek: mode ringkas + filter lengkap (1.3.9) === */
.proj-filters { display: grid; grid-template-columns: 2fr 1fr 1fr 1.3fr auto; gap: 12px; align-items: end; padding: 16px 18px; margin: 0 0 12px; border-radius: 22px; }
.proj-filters label { display: grid; gap: 6px; min-width: 0; }
.proj-filters label span { font-size: .78rem; font-weight: 600; color: var(--muted); }
.proj-filters input, .proj-filters select {
	width: 100%; font: inherit; font-size: .92rem; padding: 10px 14px; border-radius: 14px; color: var(--ink);
	border: 1px solid var(--line); background: rgba(255, 255, 255, .85); transition: border-color .2s ease, box-shadow .2s ease;
}
.proj-filters input:focus, .proj-filters select:focus { outline: none; border-color: var(--navy-600); box-shadow: 0 0 0 4px rgba(59, 78, 136, .15); }
.proj-filters__reset { color: var(--navy); border-color: rgba(40, 59, 115, .35); background: transparent; padding: 10px 18px; }
.proj-filters__reset:hover { background: rgba(40, 59, 115, .08); color: var(--navy); }
[data-theme="dark"] .proj-filters input, [data-theme="dark"] .proj-filters select { background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .18); }
[data-theme="dark"] .proj-filters__reset { color: #fff; border-color: rgba(255, 255, 255, .35); }
[data-theme="dark"] .proj-filters__reset:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.proj-count { margin: 0 0 18px; font-size: .84rem; color: var(--muted); }
.proj-empty { padding: 22px; margin: 0 0 18px; border-radius: 18px; text-align: center; color: var(--muted); }
.proj-empty[hidden], .proj-group tbody tr[hidden] { display: none; }
.proj-group.is-nomatch { display: none; }
.proj-recent .wp-block-table { margin-bottom: 18px; }
.proj-cat, .svc-method { display: block; margin-top: 2px; font-size: .74rem; font-weight: 500; color: var(--muted); }
.proj-more { margin: 0 0 8px; }
@media (max-width: 1000px) { .proj-filters { grid-template-columns: 1fr 1fr; } .proj-filters__q { grid-column: 1 / -1; } .proj-filters__reset { justify-self: start; } }
@media (max-width: 560px) { .proj-filters { grid-template-columns: 1fr; padding: 14px; } .proj-filters__reset { width: 100%; } .proj-more .btn { width: 100%; } }

/* Sub-teks metode pada tabel gejala di halaman Layanan (1.3.10) */
.svc-method { margin-top: 3px; }


/* === Kartu proyek beranda: matikan ikon tiruan dari plugin SAI Editor Kit (kotak biru ganda) (1.3.13) === */
.projects .project-col h3::before, .projects .project-col h3::after { content: none; display: none; }
.projects .project-col h3 { padding-left: 0; min-height: 0; }

/* === Baris hak cipta footer: ikon hati (1.3.14) === */
.footer-sep { margin: 0 .35em; opacity: .5; }
.icon--heart { color: #ff5a7a; vertical-align: -2px; margin: 0 1px; }

/* === Mode ringkas halaman Proyek berbentuk tab: jarak tab ke tabel dan tombol (1.3.15) === */
.proj-recent .filter-tabs { margin-bottom: 20px; }
.proj-recent .proj-group:last-child { margin-bottom: 8px; }

/* === Halaman Proyek: "Semua proyek" satu baris di dalam kapsul tab (1.3.17) === */
.filter-tabs .proj-all { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 0 0 auto; padding: 8px 13px; margin-right: 6px; font-size: .83rem; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; color: var(--navy); border-radius: 999px; transition: transform .25s var(--ease); }
.filter-tabs .proj-all::after { content: ''; position: absolute; right: -4px; top: 22%; bottom: 22%; width: 1px; background: currentColor; opacity: .25; }
.filter-tabs .proj-all .icon { transition: transform .25s var(--ease); }
.filter-tabs .proj-all:hover .icon { transform: translate(2px, -2px); }
[data-theme="dark"] .filter-tabs .proj-all { color: #fff; }
@media (max-width: 640px) { .filter-tabs .proj-all { grid-column: 1 / -1; margin: 0; padding: 10px 8px; min-height: 44px; } .filter-tabs .proj-all::after { display: none; } }

/* === Aplikator Resmi: panel mengikuti tema, logo dalam kartu putih, kilau saat hover (1.3.21) === */
.apl { padding: 8px 0 40px; }
.prose .apl--inline { padding: 0; margin: 1.8em 0 1.6em; }
.apl__panel { background: var(--glass); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); border-radius: 20px; padding: 26px 28px 28px; text-align: center; }
[data-theme="dark"] .apl__panel { background: rgba(26, 31, 44, .94); border-color: rgba(255, 255, 255, .08); }
.apl__panel h2 { font-size: 1.35rem; margin: 0 0 20px; color: var(--navy); }
.prose .apl--inline h2 { margin: 0 0 20px; padding-left: 0; border-left: 0; }
.apl__list, .prose .apl__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.apl__list li, .prose .apl__list li { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; height: 76px; margin: 0; padding: 10px 16px; background: transparent; border: 0; border-radius: 14px; }
.apl__list li::marker { content: none; }
.apl__list img, .prose .apl__list img { filter: grayscale(1); opacity: .55; transition: filter .3s ease, opacity .3s ease; }
[data-theme="dark"] .apl__list img, [data-theme="dark"] .prose .apl__list img { filter: grayscale(1) invert(1); opacity: .7; }
.apl__list li:hover img, .apl__list li:focus-within img, .prose .apl__list li:hover img, [data-theme="dark"] .apl__list li:hover img, [data-theme="dark"] .prose .apl__list li:hover img { filter: none; opacity: 1; }
.apl__list img, .prose .apl__list img { display: block; width: auto; height: auto; max-width: 100%; max-height: 42px; object-fit: contain; border-radius: 0; margin: 0; }
@media (max-width: 560px) { .apl__panel { padding: 22px 14px 22px; } .apl__list, .prose .apl__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .apl__list li, .prose .apl__list li { height: 68px; padding: 8px 12px; } .apl__list img, .prose .apl__list img { max-height: 36px; } }
@media (prefers-reduced-motion: reduce) { .apl__list img { transition: none; } }

/* === Logo klien: pita berjalan; terang tanpa kartu, gelap kartu putih, tanpa kilau (1.3.22) === */
.klien { padding-bottom: 36px; }
.klien .section__head { margin-bottom: 18px; }
.klien__marquee { --kw: min(calc((100vw - 32px) / 5), 232px); position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .55) 6%, #000 16%, #000 84%, rgba(0, 0, 0, .55) 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .55) 6%, #000 16%, #000 84%, rgba(0, 0, 0, .55) 94%, transparent 100%); }
.klien__track { display: flex; width: max-content; animation: klien-scroll 85s linear infinite; will-change: transform; }
.klien__marquee:hover .klien__track, .klien__marquee:focus-within .klien__track { animation-play-state: paused; }
.klien__list { display: flex; list-style: none; margin: 0; padding: 0; }
.klien__item { flex: 0 0 var(--kw); display: flex; padding: 8px 10px; margin: 0; }
.klien__logo { flex: 1; display: flex; align-items: center; justify-content: center; height: 84px; padding: 10px 18px; border-radius: 16px; background: transparent; transition: transform .45s ease, box-shadow .45s ease, background-color .45s ease; }
.klien__logo img { display: block; width: auto; height: auto; max-width: 100%; max-height: 46px; object-fit: contain; transition: transform .45s ease; }
.klien__item:hover .klien__logo img { transform: scale(1.06); }
[data-theme="dark"] .klien__logo { background: #fff; }
[data-theme="dark"] .klien__item:hover .klien__logo { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, .45); }
@keyframes klien-scroll { to { transform: translateX(-50%); } }
@media (max-width: 900px) { .klien__marquee { --kw: calc((100vw - 32px) / 3); } }
@media (max-width: 560px) { .klien__marquee { --kw: calc((100vw - 32px) / 2.5); } .klien__logo { height: 72px; padding: 8px 12px; } .klien__logo img { max-height: 38px; } }
@media (prefers-reduced-motion: reduce) { .klien__track { animation: none; } .klien__marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; } .klien__list[aria-hidden="true"] { display: none; } }

/* === Pita klien bisa ditarik (drag/geser); JS mengambil alih animasi (1.3.23) === */
.klien__marquee { cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.klien__marquee.is-dragging { cursor: grabbing; }
.klien__marquee.is-js .klien__track { animation: none; }
.klien__logo img { pointer-events: none; -webkit-user-drag: none; user-drag: none; }

/* === Logo klien dan aplikator di dalam kolom teks halaman (Proyek, Layanan); lebar logo mengikuti lebar wadah (1.3.24) === */
.klien__marquee { container-type: inline-size; }
@supports (width: 1cqw) {
	.klien__marquee { --kw: calc(100cqw / 5); }
	@media (max-width: 900px) { .klien__marquee { --kw: calc(100cqw / 3); } }
	@media (max-width: 560px) { .klien__marquee { --kw: calc(100cqw / 2.5); } }
}
.prose .klien__marquee { margin: 1.4em 0 1.8em; }
.prose .klien__list { list-style: none; margin: 0; padding: 0; }
.prose .klien__item { margin: 0; }
.prose .klien__item::marker { content: none; }
.prose .klien__logo img { border-radius: 0; margin: 0; }

.cert-scope h3 { margin: 0 0 .4em; font-size: 1.05rem; }
.feat .tel-wa { display: inline-flex; vertical-align: middle; margin-right: 8px; color: #25d366; transition: transform .2s ease; }
.feat .tel-wa:hover { transform: scale(1.15); }
.side li a small { color: var(--muted); }

/* === Pilihan nomor WhatsApp (1.3.30) === */
.wa-picker { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(14, 20, 40, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .25s ease; }
.wa-picker[hidden] { display: none; }
.wa-picker.is-open { opacity: 1; }
.wa-picker__card { position: relative; width: 100%; max-width: 380px; padding: 28px 24px 24px; border-radius: 22px; text-align: center; background: var(--glass-strong, #fff); transform: translateY(12px) scale(.97); transition: transform .3s var(--ease); }
.wa-picker.is-open .wa-picker__card { transform: none; }
.wa-picker__card h2 { font-size: 1.2rem; margin: 0 0 6px; }
.wa-picker__card p { margin: 0 0 18px; color: var(--muted); font-size: .92rem; }
.wa-picker__list { display: grid; gap: 10px; }
.wa-picker__list .btn { width: 100%; justify-content: center; }
.wa-picker__close { position: absolute; top: 8px; right: 12px; width: 36px; height: 36px; border: 0; background: transparent; font-size: 1.6rem; line-height: 1; color: var(--muted); cursor: pointer; border-radius: 50%; }
.wa-picker__close:hover { background: rgba(40, 59, 115, .08); color: var(--navy); }
[data-theme="dark"] .wa-picker__card { background: rgba(26, 31, 44, .97); }
@media (prefers-reduced-motion: reduce) { .wa-picker, .wa-picker__card { transition: none; } }
.wa-picker__list .btn { flex-direction: column; gap: 0; padding-block: 12px; }
.wa-picker__list .btn .icon { display: none; }
.wa-picker__label { display: flex; flex-direction: column; align-items: center; line-height: 1.25; font-weight: 700; }
.wa-picker__label small { font-size: .78rem; font-weight: 500; opacity: .8; }
.feat .tel-role, .contact-list small { margin-left: 4px; font-size: .78rem; color: var(--muted); }

/* === Perbaikan 1.3.33: tombol kaca di mode gelap dan breadcrumb panjang di HP === */
[data-theme="dark"] .btn--glass { color: #fff; }
[data-theme="dark"] .btn--glass:hover { background: rgba(255, 255, 255, .16); color: var(--yellow); border-color: rgba(255, 230, 0, .45); }
@media (max-width: 700px) {
	.breadcrumb { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; max-width: 100%; width: fit-content; padding: 6px 14px; font-size: .8rem; }
	.breadcrumb > a, .breadcrumb > .sep { flex: none; white-space: nowrap; }
	.breadcrumb > [aria-current="page"] { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* === Dropdown kustom (1.3.34): pengganti daftar bawaan browser pada filter proyek dan formulir kontak === */
.csel { position: relative; min-width: 0; }
.csel__native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden; clip: rect(0 0 0 0); }
.csel__btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; font: inherit; font-size: .92rem; font-weight: 400; text-align: left; padding: 10px 14px; border-radius: 14px; color: var(--ink); cursor: pointer; border: 1px solid var(--line); background: rgba(255, 255, 255, .85); transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
.wa-form .csel__btn { padding: 11px 14px; border-radius: 12px; background: rgba(255, 255, 255, .7); }
.csel__btn:hover { border-color: var(--navy-600); }
.csel__btn:focus-visible, .csel.is-open .csel__btn { outline: none; border-color: var(--navy-600); box-shadow: 0 0 0 4px rgba(59, 78, 136, .15); }
.csel__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csel__btn.is-placeholder .csel__label { color: var(--muted); }
.csel__chev { flex: none; color: var(--navy); transition: transform .25s var(--ease); }
.csel.is-open .csel__chev { transform: rotate(180deg); }
.csel__list { position: absolute; z-index: 60; left: 0; top: calc(100% + 8px); min-width: 100%; width: max-content; max-width: min(340px, 86vw); max-height: 288px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 44px rgba(20, 23, 31, .22); animation: cselIn .18s var(--ease); scrollbar-width: thin; }
.csel__list[hidden] { display: none; }
.csel.is-up .csel__list { top: auto; bottom: calc(100% + 8px); }
.csel__opt { position: relative; padding: 9px 34px 9px 12px; border-radius: 10px; font-size: .9rem; line-height: 1.35; color: var(--ink); cursor: pointer; }
.csel__opt.is-active { background: rgba(40, 59, 115, .08); }
.csel__opt[aria-selected="true"] { font-weight: 600; background: rgba(255, 230, 0, .38); color: var(--navy-900); }
.csel__opt[aria-selected="true"]::after { content: ''; position: absolute; right: 13px; top: 50%; width: 6px; height: 11px; border: solid var(--navy-900); border-width: 0 2px 2px 0; transform: translateY(-62%) rotate(45deg); }
.proj-filters, .wa-form { position: relative; z-index: 20; }
@keyframes cselIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
[data-theme="dark"] .csel__btn { background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .18); }
[data-theme="dark"] .csel__btn:hover { border-color: rgba(255, 255, 255, .4); }
[data-theme="dark"] .csel__btn:focus-visible, [data-theme="dark"] .csel.is-open .csel__btn { border-color: var(--yellow); box-shadow: 0 0 0 4px rgba(255, 230, 0, .15); }
[data-theme="dark"] .csel__btn.is-placeholder .csel__label { color: rgba(255, 255, 255, .72); }
[data-theme="dark"] .csel__chev { color: rgba(255, 255, 255, .8); }
[data-theme="dark"] .csel__list { background: #1a1f2c; border-color: rgba(255, 255, 255, .12); box-shadow: 0 18px 44px rgba(0, 0, 0, .55); }
[data-theme="dark"] .csel__opt { color: #e7eaf2; }
[data-theme="dark"] .csel__opt.is-active { background: rgba(255, 255, 255, .08); }
[data-theme="dark"] .csel__opt[aria-selected="true"] { background: rgba(255, 230, 0, .16); color: var(--yellow); }
[data-theme="dark"] .csel__opt[aria-selected="true"]::after { border-color: var(--yellow); }
@media (prefers-reduced-motion: reduce) { .csel__list { animation: none; } .csel__chev { transition: none; } }

/* === 1.3.35: halaman artikel di HP tidak boleh melebar; animasi lembut saat filter proyek berganti === */
.page-grid > * { min-width: 0; }
.prose { overflow-wrap: anywhere; }
.prose img, .prose figure, .prose video, .prose iframe, .prose table { max-width: 100%; }
.prose--article pre, .prose--article table { display: block; overflow-x: auto; }
.filter-items { transition: opacity .14s ease, transform .14s ease; }
.filter-items.is-out { opacity: 0; transform: translateY(4px); }
.proj-group tbody tr.is-in { animation: rowIn .42s var(--ease) both; animation-delay: var(--d, 0ms); }
@keyframes rowIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .filter-items { transition: none; } .proj-group tbody tr.is-in { animation: none; } }

/* === Pita CTA: lapisan gelap kedua dikembalikan (dulu dari CSS modul Editor yang kini mati) (1.3.39) === */
.cta-band { overflow: hidden; }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(rgba(14, 17, 25, .6), rgba(14, 17, 25, .74)); }
.cta-band > .container { position: relative; z-index: 2; }