/* =========================================================================
   Etinion Catragruputama - gaya utama
   Nilai warna dan ukuran tidak ditulis di sini. Semuanya memakai custom
   property --ecg-* yang dihasilkan dari theme.json oleh inc/class-tokens.php.
   Urutan blok: font, dasar, alat bantu, tombol, global, homepage, blog.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Font
   Plus Jakarta Sans adalah font variabel, satu berkas untuk bobot 400 - 800.
   ------------------------------------------------------------------------- */
@font-face {
	font-family: 'Plus Jakarta Sans';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('../fonts/plus-jakarta-sans-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Plus Jakarta Sans';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('../fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -------------------------------------------------------------------------
   2. Dasar
   ------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	/* Header menempel menutupi bagian atas layar, jadi lompatan ke anchor
	   seperti #ecg-cakupan-title disisakan ruang sebanyak tinggi header. */
	scroll-padding-top: calc(var(--ecg-layout-header-height) + 12px);
}

body {
	margin: 0;
	background: var(--ecg-c-surface);
	color: var(--ecg-c-ink);
	font-family: var(--ecg-font-sans);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote {
	margin: 0;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

img,
svg,
picture,
video {
	max-width: 100%;
}

img {
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

a:hover {
	color: var(--ecg-c-brand);
}

button {
	font: inherit;
	color: inherit;
}

b,
strong {
	font-weight: 700;
}

:focus-visible {
	outline: 2px solid var(--ecg-c-brand);
	outline-offset: 2px;
	border-radius: 3px;
}

/* -------------------------------------------------------------------------
   3. Alat bantu
   ------------------------------------------------------------------------- */
.ecg-sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.ecg-icon {
	display: inline-block;
	flex: none;
	width: 1em;
	height: 1em;
	fill: currentColor;
	vertical-align: -0.125em;
}

.ecg-icon--accent {
	color: var(--ecg-c-accent);
}

.ecg-icon--brand {
	color: var(--ecg-c-brand);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.ecg-skip {
	position: absolute;
	top: -100px;
	left: 12px;
	z-index: 200;
	padding: 12px 18px;
	background: var(--ecg-c-brand);
	color: var(--ecg-c-surface);
	border-radius: var(--ecg-radius-sm);
	font-size: 14px;
	font-weight: 700;
	transition: top 0.2s ease;
}

.ecg-skip:focus {
	top: 12px;
	color: var(--ecg-c-surface);
}

.ecg-container {
	width: 100%;
	max-width: calc(var(--ecg-layout-content) + 2 * var(--ecg-layout-gutter));
	margin-inline: auto;
	padding-inline: var(--ecg-layout-gutter);
}

/* Rail yang sengaja menembus tepi kanan container. */
.ecg-container--bleed-end {
	padding-right: 0;
}

.ecg-container--bleed-end > * {
	padding-right: var(--ecg-layout-gutter);
}

.ecg-section {
	padding-block: var(--ecg-space-section);
}

.ecg-section__head {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 28px;
}

.ecg-section__intro {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ecg-eyebrow {
	font-family: var(--ecg-font-mono);
	font-size: 10px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ecg-c-brand);
}

.ecg-eyebrow--accent {
	color: var(--ecg-c-accent);
}

.ecg-section__title {
	max-width: 680px;
	font-size: clamp(24px, 2.4vw, 34px);
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

/* Remah roti. Dipakai di semua halaman selain halaman depan. */
.ecg-crumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	align-items: center;
	font-family: var(--ecg-font-mono);
	font-size: 10.5px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ecg-c-meta);
}

.ecg-crumbs__item {
	display: flex;
	gap: 9px;
	align-items: center;
}

.ecg-crumbs__sep .ecg-icon {
	font-size: 11px;
}

.ecg-crumbs__link:hover,
.ecg-crumbs__current {
	color: var(--ecg-c-brand);
}

.ecg-crumbs--on-dark .ecg-crumbs__list {
	color: var(--ecg-on-dark-text-soft);
}

.ecg-crumbs--on-dark .ecg-crumbs__link:hover,
.ecg-crumbs--on-dark .ecg-crumbs__current {
	color: var(--ecg-c-accent);
}

/* Blok gambar yang belum ada fotonya. */
.ecg-placeholder {
	display: grid;
	place-items: center;
	padding: 8px;
	background-color: var(--ecg-c-frame);
	background-image: repeating-linear-gradient(135deg, var(--ecg-line-soft) 0 1px, transparent 1px 10px);
	font-family: var(--ecg-font-mono);
	font-size: 9px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: center;
	color: var(--ecg-c-frame-ink);
}

.ecg-placeholder--dark {
	background-color: var(--ecg-on-brand-fill);
	background-image: repeating-linear-gradient(135deg, var(--ecg-on-dark-hairline) 0 1px, transparent 1px 10px);
	color: var(--ecg-on-dark-text-soft);
}

/* Penanda konten yang masih menunggu data owner.
   Ukuran font dibatasi supaya tidak ikut membesar di dalam angka besar. */
.ecg-todo {
	display: inline-block;
	max-width: 100%;
	padding: 2px 7px;
	border: 1px dashed currentColor;
	border-radius: 4px;
	font-family: var(--ecg-font-mono);
	font-size: clamp(10px, 0.58em, 12.5px);
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.02em;
	text-transform: none;
	overflow-wrap: anywhere;
	vertical-align: middle;
	opacity: 0.9;
}

/* Di dalam angka besar, penanda berdiri sendiri sebagai baris. */
.ecg-stat__value .ecg-todo,
.ecg-hero__rating-value .ecg-todo,
.ecg-hero__card--projects b .ecg-todo {
	display: block;
	width: fit-content;
}

/* -------------------------------------------------------------------------
   4. Tombol
   ------------------------------------------------------------------------- */
.ecg-btn {
	display: inline-flex;
	gap: 9px;
	align-items: center;
	justify-content: center;
	padding: 12px 18px;
	border: 1px solid transparent;
	border-radius: var(--ecg-radius-sm);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.25;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ecg-btn .ecg-icon {
	font-size: 16px;
}

.ecg-btn--primary {
	background: var(--ecg-c-brand);
	color: var(--ecg-c-surface);
	box-shadow: var(--ecg-shadow-cta-small);
}

.ecg-btn--primary:hover {
	background: var(--ecg-c-brand-dark);
	color: var(--ecg-c-surface);
}

.ecg-btn--outline {
	border-color: var(--ecg-line-strong);
	font-weight: 600;
}

.ecg-btn--outline:hover {
	border-color: var(--ecg-c-brand);
	color: var(--ecg-c-brand);
}

.ecg-btn--dark {
	background: var(--ecg-c-ink);
	color: var(--ecg-c-surface);
	padding: 14px 20px;
}

.ecg-btn--dark:hover {
	background: var(--ecg-c-brand);
	color: var(--ecg-c-surface);
}

.ecg-btn--accent {
	background: var(--ecg-c-accent);
	color: var(--ecg-c-ink);
}

.ecg-btn--accent:hover {
	background: var(--ecg-c-surface);
	color: var(--ecg-c-brand);
}

.ecg-btn--ghost {
	border-color: var(--ecg-on-brand-line);
	color: var(--ecg-c-surface);
	font-weight: 600;
}

.ecg-btn--ghost:hover {
	background: var(--ecg-on-brand-fill);
	color: var(--ecg-c-surface);
}

.ecg-btn--sm {
	padding: 13px 18px;
}

.ecg-btn--lg {
	padding: 16px 24px;
	border-radius: var(--ecg-radius-md);
	font-size: 14.5px;
}

.ecg-btn--primary.ecg-btn--lg {
	box-shadow: var(--ecg-shadow-cta);
}

.ecg-btn--outline.ecg-btn--lg {
	padding: 15px 22px;
}

.ecg-btn--pill {
	border-radius: var(--ecg-radius-pill);
}

.ecg-btn--block {
	width: 100%;
	min-height: 50px;
	border-radius: var(--ecg-radius-md);
	font-size: 14px;
}

.ecg-btn__play {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--ecg-c-ink);
	color: var(--ecg-c-surface);
}

.ecg-btn__play .ecg-icon {
	font-size: 11px;
}

/* -------------------------------------------------------------------------
   5. Topbar
   ------------------------------------------------------------------------- */
.ecg-topbar {
	display: none;
	padding-block: 9px;
	background: var(--ecg-c-ink);
	color: var(--ecg-on-dark-text);
	font-size: 11.5px;
}

.ecg-topbar__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
	align-items: center;
}

.ecg-topbar__group {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: center;
}

.ecg-topbar__item {
	display: inline-flex;
	gap: 7px;
	align-items: center;
}

.ecg-topbar__item .ecg-icon {
	font-size: 14px;
}

.ecg-topbar__item--phone {
	color: var(--ecg-c-surface);
	font-weight: 600;
}

.ecg-topbar__socials {
	display: inline-flex;
	gap: 12px;
	align-items: center;
}

.ecg-topbar__social .ecg-icon {
	font-size: 14px;
}

.ecg-topbar a:hover {
	color: var(--ecg-c-accent);
}

@media (min-width: 1120px) {
	.ecg-topbar {
		display: block;
	}
}

/* -------------------------------------------------------------------------
   6. Header dan menu utama
   ------------------------------------------------------------------------- */
.ecg-header {
	position: sticky;
	top: 0;
	/* Di bawah laci menu mobile (60 dan 61) supaya laci tetap menutupinya,
	   di atas isi halaman. */
	z-index: 50;
	padding-block: 14px;
	background: var(--ecg-c-surface);
	border-bottom: 1px solid var(--ecg-line-base);
}

/* Batang admin WordPress menempel di atas layar pada layar lebar, jadi header
   diturunkan setinggi batang itu. Di bawah 600px batang admin ikut tergulung,
   jadi header kembali menempel di angka nol. */
.admin-bar .ecg-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .ecg-header {
		top: 46px;
	}
}

@media screen and (max-width: 600px) {
	.admin-bar .ecg-header {
		top: 0;
	}
}

.ecg-header__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: space-between;
	align-items: center;
}

.ecg-brand {
	display: flex;
	gap: 11px;
	align-items: center;
}

.ecg-brand__logo {
	display: block;
	width: auto;
	height: clamp(36px, 3.4vw, 46px);
}

.ecg-nav {
	display: none;
	min-width: 0;
}

.ecg-nav__list {
	display: flex;
	flex-wrap: nowrap;
	gap: clamp(14px, 1.7vw, 24px);
	align-items: center;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ecg-c-nav);
}

.ecg-nav__item {
	position: relative;
}

.ecg-nav__link {
	display: flex;
	gap: 4px;
	align-items: center;
	padding-bottom: 3px;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}

.ecg-nav__item--current > .ecg-nav__link {
	color: var(--ecg-c-brand);
	border-bottom-color: var(--ecg-c-brand);
}

.ecg-nav__caret {
	font-size: 11px;
}

/* Jembatan tak terlihat supaya dropdown tidak menutup saat kursor melewati celah. */
.ecg-nav__item--has-children::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 14px;
}

.ecg-nav__sub {
	position: absolute;
	top: calc(100% + 12px);
	left: -12px;
	z-index: 40;
	min-width: 230px;
	padding: 8px;
	background: var(--ecg-c-surface);
	border: 1px solid var(--ecg-line-base);
	border-radius: var(--ecg-radius-lg);
	box-shadow: var(--ecg-shadow-panel);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.ecg-nav__item--has-children:hover > .ecg-nav__sub,
.ecg-nav__item--has-children:focus-within > .ecg-nav__sub {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.ecg-nav__sublink {
	display: block;
	padding: 9px 12px;
	border-radius: var(--ecg-radius-sm);
	font-size: 13px;
	font-weight: 600;
	color: var(--ecg-c-nav);
}

.ecg-nav__sublink:hover {
	background: var(--ecg-c-brand-soft);
	color: var(--ecg-c-brand);
}

.ecg-header__cta {
	display: none;
}

.ecg-burger {
	display: inline-flex;
	gap: 9px;
	align-items: center;
	min-height: 46px;
	padding: 0 16px;
	background: var(--ecg-c-ink);
	color: var(--ecg-c-surface);
	border: 0;
	border-radius: 9px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	cursor: pointer;
}

.ecg-burger .ecg-icon {
	font-size: 18px;
}

@media (min-width: 1120px) {
	.ecg-nav {
		display: block;
	}

	.ecg-header__cta {
		display: inline-flex;
	}

	.ecg-burger {
		display: none;
	}
}

/* -------------------------------------------------------------------------
   7. Laci menu mobile
   ------------------------------------------------------------------------- */
.ecg-drawer__overlay {
	position: fixed;
	inset: 0;
	z-index: 60;
	background: var(--ecg-overlay-scrim);
	backdrop-filter: blur(2px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.28s ease;
}

.ecg-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 61;
	display: flex;
	flex-direction: column;
	width: min(86vw, 340px);
	padding: 18px 22px 26px;
	background: var(--ecg-c-surface);
	box-shadow: var(--ecg-shadow-drawer);
	transform: translateX(100%);
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.ecg-drawer-open .ecg-drawer__overlay {
	opacity: 1;
	pointer-events: auto;
}

.ecg-drawer-open .ecg-drawer {
	transform: none;
}

html.ecg-drawer-open {
	overflow: hidden;
}

.ecg-drawer__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 14px;
}

.ecg-drawer__brand {
	display: flex;
	align-items: center;
}

.ecg-drawer__brand .ecg-brand__logo {
	height: 34px;
}

.ecg-drawer__close {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	background: var(--ecg-c-surface-mute);
	color: var(--ecg-c-ink);
	border: 0;
	border-radius: var(--ecg-radius-md);
	cursor: pointer;
}

.ecg-drawer__close .ecg-icon {
	font-size: 18px;
}

.ecg-drawer__list {
	display: flex;
	flex-direction: column;
}

.ecg-drawer__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	border-bottom: 1px solid var(--ecg-line-base);
}

.ecg-drawer__link {
	flex: 1;
	display: flex;
	align-items: center;
	min-height: 52px;
	font-size: 15px;
	font-weight: 600;
	color: var(--ecg-c-nav);
}

.ecg-drawer__item--current > .ecg-drawer__link {
	color: var(--ecg-c-brand);
}

.ecg-drawer__toggle {
	display: grid;
	place-items: center;
	width: 44px;
	min-height: 52px;
	background: none;
	border: 0;
	color: var(--ecg-c-meta);
	cursor: pointer;
}

.ecg-drawer__caret {
	font-size: 13px;
	transition: transform 0.2s ease;
}

.ecg-drawer__toggle[aria-expanded='true'] .ecg-drawer__caret {
	transform: rotate(90deg);
}

.ecg-drawer__sub {
	flex: 1 0 100%;
	padding: 2px 0 12px 14px;
}

.ecg-drawer__sublink {
	display: flex;
	align-items: center;
	min-height: 40px;
	font-size: 13.5px;
	color: var(--ecg-c-muted);
}

.ecg-drawer__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 20px;
}

.ecg-drawer__info {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--ecg-line-base);
	font-size: 12.5px;
	color: var(--ecg-c-muted);
}

.ecg-drawer__info-item {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	line-height: 1.6;
}

.ecg-drawer__info-item .ecg-icon {
	font-size: 16px;
	margin-top: 0.15em;
}

@media (min-width: 1120px) {
	.ecg-drawer,
	.ecg-drawer__overlay {
		display: none;
	}
}

/* -------------------------------------------------------------------------
   8. Hero
   ------------------------------------------------------------------------- */
.ecg-hero {
	position: relative;
	background: var(--ecg-c-surface);
	overflow: hidden;
}

.ecg-hero::before,
.ecg-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.ecg-hero::before {
	background: radial-gradient(88% 78% at 6% 0%, var(--ecg-c-brand-soft) 0%, transparent 62%);
}

.ecg-hero::after {
	background-image: linear-gradient(90deg, var(--ecg-line-hair) 1px, transparent 1px);
	background-size: 84px 100%;
}

.ecg-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: clamp(30px, 3.4vw, 56px);
	align-items: center;
	padding-block: var(--ecg-space-hero) var(--ecg-space-hero-bottom);
}

.ecg-hero__content {
	flex: 2 1 min(100%, 580px);
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 780px;
}

.ecg-hero__badge {
	display: inline-flex;
	gap: 9px;
	align-items: center;
	align-self: flex-start;
	padding: 9px 15px;
	background: var(--ecg-c-brand-soft);
	border-radius: var(--ecg-radius-pill);
	font-family: var(--ecg-font-mono);
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--ecg-c-brand);
}

.ecg-hero__badge .ecg-icon {
	font-size: 14px;
}

.ecg-hero__title {
	font-size: clamp(31px, 3.9vw, 54px);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.ecg-hero__mark {
	padding: 0 3px;
	background: linear-gradient(transparent 58%, var(--ecg-c-accent) 58%);
}

.ecg-hero__lead {
	max-width: 560px;
	font-size: 15.5px;
	line-height: 1.78;
	color: var(--ecg-c-body);
}

.ecg-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 2px;
}

.ecg-hero__proof {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: center;
	margin-top: 12px;
	padding-top: 22px;
	border-top: 1px solid var(--ecg-line-mid);
}

.ecg-hero__rating {
	display: flex;
	gap: 11px;
	align-items: center;
}

.ecg-hero__rating-value {
	font-size: 25px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
}

.ecg-hero__rating-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ecg-hero__stars {
	display: flex;
	gap: 2px;
	font-size: 12px;
	color: var(--ecg-c-star);
}

.ecg-hero__rating-note {
	font-size: 11px;
	color: var(--ecg-c-muted-soft);
}

.ecg-hero__divider {
	width: 1px;
	height: 34px;
	background: var(--ecg-line-mid);
}

.ecg-hero__fact {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ecg-hero__fact b {
	font-size: 17px;
}

.ecg-hero__fact small {
	font-size: 11px;
	color: var(--ecg-c-muted-soft);
}

.ecg-hero__media {
	position: relative;
	flex: 1 1 min(100%, 360px);
	align-self: center;
	margin-inline: calc(-1 * var(--ecg-layout-gutter));
}

.ecg-hero__figure {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--ecg-c-frame);
}

.ecg-hero__figure picture {
	display: block;
	width: 100%;
	height: 100%;
}

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

.ecg-hero__card {
	position: absolute;
	display: flex;
}

.ecg-hero__card--projects {
	left: 16px;
	bottom: 38px;
	flex-direction: column;
	gap: 6px;
	padding: 18px 22px;
	background: var(--ecg-c-brand);
	color: var(--ecg-c-surface);
	border-radius: var(--ecg-radius-xxl);
	box-shadow: var(--ecg-shadow-float);
}

.ecg-hero__card--projects b {
	font-size: 30px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
}

.ecg-hero__card--projects small {
	font-family: var(--ecg-font-mono);
	font-size: 9.5px;
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ecg-on-brand-text-soft);
}

.ecg-hero__card--warranty {
	right: 16px;
	top: 28px;
	gap: 11px;
	align-items: center;
	padding: 13px 17px;
	background: var(--ecg-c-surface);
	border-radius: var(--ecg-radius-xl);
	box-shadow: var(--ecg-shadow-float-small);
}

.ecg-hero__card--warranty .ecg-icon {
	font-size: 23px;
}

.ecg-hero__card--warranty span {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ecg-hero__card--warranty b {
	font-size: 12.5px;
}

.ecg-hero__card--warranty small {
	font-size: 10.5px;
	color: var(--ecg-c-muted-soft);
}

/* Pita hitamnya selebar layar, tapi isinya sejajar dengan kolom hero.
   Latar hitam dipindah ke pita ini supaya tetap menutup penuh sampai tepi,
   dan garis pemisah antar item dibuat dari border, bukan dari celah 1px. */
.ecg-hero__usp {
	position: relative;
	z-index: 1;
	display: flex;
	background: var(--ecg-c-ink);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

.ecg-hero__usp::-webkit-scrollbar {
	display: none;
}

.ecg-hero__usp-item {
	flex: 0 0 min(76vw, 340px);
	scroll-snap-align: start;
	display: flex;
	gap: 14px;
	align-items: center;
	padding: 20px var(--ecg-layout-gutter);
}

.ecg-hero__usp-item + .ecg-hero__usp-item {
	border-left: 1px solid var(--ecg-on-dark-line);
}

.ecg-hero__usp-item .ecg-icon {
	font-size: 24px;
}

.ecg-hero__usp-item span {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.ecg-hero__usp-item b {
	font-size: 13.5px;
	color: var(--ecg-c-surface);
}

.ecg-hero__usp-item small {
	font-size: 12px;
	color: var(--ecg-on-dark-text-soft);
}

/* Layar sempit: badge dikecilkan supaya muat satu baris, tombol dibuat selebar
   kolom, dan baris bukti disusun ulang jadi rating penuh di atas lalu dua fakta
   berdampingan di bawahnya. */
@media (max-width: 599px) {
	/* Teksnya 46 karakter. Jarak antar huruf dan padding dirapatkan supaya muat
	   satu baris mulai dari 360px. Di bawah itu memang tidak cukup, jadi
	   dibiarkan turun dua baris dengan rata tengah. */
	.ecg-hero__badge {
		gap: 6px;
		padding: 8px 11px;
		font-size: 9px;
		letter-spacing: 0.02em;
		text-align: center;
	}

	.ecg-hero__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.ecg-hero__actions .ecg-btn {
		width: 100%;
	}

	.ecg-hero__proof {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 18px 14px;
		/* Menimpa align-items: center dari aturan dasar, supaya kedua fakta tetap
		   sejajar di atas walau label salah satunya turun dua baris. */
		align-items: start;
	}

	.ecg-hero__rating {
		grid-column: 1 / -1;
		gap: 14px;
	}

	.ecg-hero__rating-value {
		font-size: 32px;
	}

	.ecg-hero__stars {
		font-size: 15px;
	}

	.ecg-hero__rating-note {
		font-size: 12.5px;
	}

	.ecg-hero__divider {
		display: none;
	}

	.ecg-hero__fact:last-child {
		padding-left: 14px;
		border-left: 1px solid var(--ecg-line-mid);
	}

	.ecg-hero__fact b {
		font-size: 18px;
	}

	.ecg-hero__fact small {
		font-size: 11.5px;
	}
}

@media (min-width: 1020px) {
	.ecg-hero__usp {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		overflow: visible;
		padding-inline: max(var(--ecg-layout-gutter), calc((100% - var(--ecg-layout-content)) / 2));
	}

	.ecg-hero__usp-item:first-child {
		padding-left: 0;
	}

	.ecg-hero__usp-item:last-child {
		padding-right: 0;
	}
}

@media (min-width: 1120px) {
	.ecg-hero__media {
		width: 100%;
		max-width: 500px;
		margin-inline: auto 0;
	}

	.ecg-hero__figure {
		aspect-ratio: 4 / 5;
		border-radius: var(--ecg-radius-hero);
	}

	.ecg-hero__card--projects {
		left: -14px;
	}

	.ecg-hero__card--warranty {
		right: -8px;
	}
}

/* -------------------------------------------------------------------------
   9. Logo pemasok
   ------------------------------------------------------------------------- */
.ecg-partner {
	padding-block: 22px;
	background: var(--ecg-c-surface-alt);
	border-bottom: 1px solid var(--ecg-line-soft);
}

.ecg-partner .ecg-container {
	--ecg-layout-gutter: var(--ecg-layout-gutter-tight);
}

.ecg-partner__rail {
	display: flex;
	gap: 12px;
	padding-block: 2px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

.ecg-partner__rail::-webkit-scrollbar {
	display: none;
}

.ecg-partner__item {
	flex: 1 0 156px;
	scroll-snap-align: start;
	display: grid;
	place-items: center;
	height: 66px;
	padding: 13px 20px;
	background: var(--ecg-c-surface);
	border: 1px solid var(--ecg-line-soft);
	border-radius: var(--ecg-radius-md);
}

.ecg-partner__item img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

/* -------------------------------------------------------------------------
   10. Layanan
   ------------------------------------------------------------------------- */
.ecg-rail-nav {
	display: flex;
	gap: 10px;
}

/* app.js menyembunyikan tombol lewat atribut hidden saat rail tidak bisa digeser.
   Aturan bawaan browser untuk [hidden] kalah spesifik dari display di atas,
   jadi keadaan tersembunyi harus ditulis ulang di sini. */
.ecg-rail-nav[hidden] {
	display: none;
}

.ecg-rail-btn {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	background: var(--ecg-c-surface);
	color: var(--ecg-c-ink);
	border: 1px solid var(--ecg-line-strong);
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ecg-rail-btn:hover:not(:disabled) {
	background: var(--ecg-c-ink);
	color: var(--ecg-c-surface);
	border-color: var(--ecg-c-ink);
}

.ecg-rail-btn:disabled {
	opacity: 0.35;
	cursor: default;
}

.ecg-rail-btn .ecg-icon {
	font-size: 18px;
}

/* Rail layanan berdiri di luar container.
   --ecg-rail-start menyejajarkan kartu pertama dengan judul section, sementara
   ujung kanannya dibiarkan menembus sampai tepi layar.
   --ecg-rail-inner adalah lebar container, dipakai supaya lebar kartu tidak ikut
   melebar mengikuti rail. Nilainya memakai 100vw, bukan 100%, karena custom
   property disubstitusi di elemen anak dan persen akan salah acuan di sana. */
.ecg-services__rail {
	--ecg-rail-start: max(var(--ecg-layout-gutter), calc((100% - var(--ecg-layout-content)) / 2));
	--ecg-rail-inner: min(calc(100vw - 2 * var(--ecg-layout-gutter)), var(--ecg-layout-content));

	display: flex;
	gap: 16px;
	/* Ruang atas, bawah, dan kiri disediakan supaya bayangan kartu tidak terpotong
	   oleh overflow-x, termasuk saat kartu terangkat pada keadaan hover. */
	padding-block: 18px 28px;
	padding-left: var(--ecg-rail-start);
	scroll-padding-left: var(--ecg-rail-start);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

/* Ruang di ujung kanan dibuat dari elemen semu, bukan padding-right, karena
   sebagian browser mengabaikan padding-right pada flex container yang bisa digulir.
   Lebarnya dikurangi satu gap supaya jaraknya persis sama dengan gutter. */
.ecg-services__rail::after {
	content: '';
	flex: 0 0 calc(var(--ecg-layout-gutter) - 16px);
}

.ecg-services .ecg-section__head {
	margin-bottom: 12px;
}

.ecg-services__rail::-webkit-scrollbar {
	display: none;
}

.ecg-service {
	flex: 0 0 calc((var(--ecg-rail-inner) - 16px) / 1.5);
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 22px;
	background: var(--ecg-c-surface);
	border-radius: var(--ecg-radius-xxxl);
	box-shadow: var(--ecg-shadow-card);
	transition: box-shadow 0.22s ease, transform 0.22s ease;
}

.ecg-service:hover {
	transform: translateY(-2px);
	box-shadow: var(--ecg-shadow-card-hover);
}

.ecg-service__head {
	display: flex;
	gap: 14px;
	justify-content: space-between;
	align-items: flex-start;
}

.ecg-service__title {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.015em;
}

.ecg-service__arrow {
	flex: none;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	background: var(--ecg-c-ink);
	color: var(--ecg-c-surface);
	border-radius: 50%;
}

.ecg-service__arrow .ecg-icon {
	font-size: 16px;
}

.ecg-service__media {
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: var(--ecg-radius-lg);
	background: var(--ecg-c-frame);
	overflow: hidden;
}

/* Tinggi diteruskan lewat picture, karena img memakai height 100% sedangkan
   tinggi kotaknya datang dari aspect-ratio, bukan dari isi. */
.ecg-service__media picture {
	display: block;
	height: 100%;
}

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

.ecg-service__desc {
	flex: 1;
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--ecg-c-muted);
}

.ecg-service .ecg-btn {
	align-self: flex-start;
}

@media (min-width: 800px) {
	.ecg-service {
		flex-basis: calc((var(--ecg-rail-inner) - 2 * 16px) / 2.5);
	}
}

@media (min-width: 1120px) {
	.ecg-service {
		flex-basis: calc((var(--ecg-rail-inner) - 3 * 16px) / 3.5);
	}
}

/* -------------------------------------------------------------------------
   11. Statistik
   ------------------------------------------------------------------------- */
.ecg-stats {
	padding-block: var(--ecg-space-section-tight);
	background: var(--ecg-c-ink);
	color: var(--ecg-c-surface);
}

.ecg-stats__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
	gap: 26px;
}

.ecg-stat {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-left: 18px;
	border-left: 2px solid var(--ecg-on-dark-line);
}

.ecg-stat--lead {
	border-left-color: var(--ecg-c-accent);
}

.ecg-stat__value {
	font-size: clamp(30px, 3.4vw, 44px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}

.ecg-stat__label {
	font-family: var(--ecg-font-mono);
	font-size: 10px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--ecg-on-dark-text-faint);
}

/* Di layar sempit empat angka ditumpuk satu kolom oleh auto-fit. Dipaksa dua
   kolom supaya blok ini tidak jadi terlalu panjang. */
@media (max-width: 599px) {
	.ecg-stats__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px 14px;
	}

	.ecg-stat {
		padding-left: 14px;
	}

	.ecg-stat__label {
		letter-spacing: 0.1em;
	}
}

/* -------------------------------------------------------------------------
   12. Tentang
   ------------------------------------------------------------------------- */
.ecg-about {
	background: var(--ecg-c-surface-alt);
}

.ecg-about__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
	gap: clamp(28px, 3.5vw, 56px);
	align-items: center;
}

.ecg-about__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--ecg-c-frame);
	border-radius: var(--ecg-radius-xxl);
}

.ecg-about__media picture {
	display: block;
	width: 100%;
	height: 100%;
}

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

.ecg-about__badge {
	position: absolute;
	right: 18px;
	bottom: 18px;
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 16px 20px;
	background: var(--ecg-c-surface);
	border-radius: var(--ecg-radius-lg);
	box-shadow: var(--ecg-shadow-panel);
}

.ecg-about__badge .ecg-icon {
	font-size: 26px;
}

.ecg-about__badge span {
	display: flex;
	flex-direction: column;
}

.ecg-about__badge b {
	font-size: 14px;
}

.ecg-about__badge small {
	font-size: 11px;
	color: var(--ecg-c-muted);
}

.ecg-about__body {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.ecg-about__body .ecg-section__title {
	max-width: 460px;
}

.ecg-about__text {
	max-width: 520px;
	font-size: 14px;
	line-height: 1.8;
	color: var(--ecg-c-body);
}

.ecg-about__text b {
	color: var(--ecg-c-ink);
}

.ecg-about__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
	gap: 16px;
	margin-top: 6px;
}

.ecg-fact-card {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 16px;
	background: var(--ecg-c-surface);
	border: 1px solid var(--ecg-line-base);
	border-radius: var(--ecg-radius-lg);
}

.ecg-fact-card .ecg-icon {
	font-size: 20px;
	margin-top: 0.1em;
}

.ecg-fact-card span {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ecg-fact-card b {
	font-size: 12.5px;
}

.ecg-fact-card small {
	font-size: 12px;
	line-height: 1.55;
	color: var(--ecg-c-muted);
}

/* -------------------------------------------------------------------------
   13. Alur kerja
   ------------------------------------------------------------------------- */
.ecg-process__rail {
	display: flex;
	gap: 18px;
	padding-bottom: 6px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

.ecg-process__rail::-webkit-scrollbar {
	display: none;
}

.ecg-step {
	flex: 0 0 calc((100% - 18px) / 1.5);
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 26px 24px 24px;
	background: var(--ecg-c-surface-tint);
	color: var(--ecg-c-ink);
	border-radius: var(--ecg-radius-xxxl);
	box-shadow: var(--ecg-shadow-card);
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.ecg-step:hover {
	transform: translateY(-2px);
	box-shadow: var(--ecg-shadow-card-hover);
}

.ecg-step--lead {
	background: var(--ecg-c-brand);
	color: var(--ecg-c-surface);
}

.ecg-step__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.ecg-step__icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	background: var(--ecg-c-brand-soft);
	color: var(--ecg-c-brand);
	border-radius: var(--ecg-radius-xl);
}

.ecg-step__icon .ecg-icon {
	font-size: 24px;
}

.ecg-step--lead .ecg-step__icon {
	background: var(--ecg-on-brand-fill);
	color: var(--ecg-c-accent);
}

.ecg-step__num {
	font-size: 26px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--ecg-line-mid);
}

.ecg-step--lead .ecg-step__num {
	color: var(--ecg-on-brand-number);
}

.ecg-step__title {
	font-size: 16.5px;
	letter-spacing: -0.015em;
}

.ecg-step__desc {
	flex: 1;
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--ecg-c-muted);
}

.ecg-step--lead .ecg-step__desc {
	color: var(--ecg-on-brand-text-soft);
}

.ecg-step__meta {
	display: flex;
	gap: 8px;
	align-items: center;
	padding-top: 14px;
	border-top: 1px solid var(--ecg-line-base);
	font-family: var(--ecg-font-mono);
	font-size: 10px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ecg-c-meta);
}

.ecg-step__meta .ecg-icon {
	font-size: 14px;
}

.ecg-step--lead .ecg-step__meta {
	border-top-color: var(--ecg-on-brand-line);
	color: var(--ecg-on-brand-text);
}

@media (min-width: 800px) {
	.ecg-step {
		flex-basis: calc((100% - 2 * 18px) / 2.5);
	}
}

@media (min-width: 1120px) {
	.ecg-step {
		flex-basis: calc((100% - 3 * 18px) / 4);
	}
}

/* -------------------------------------------------------------------------
   14. Portofolio
   ------------------------------------------------------------------------- */
.ecg-portfolio {
	background: var(--ecg-c-surface-alt);
}

/* Baris terakhir dibiarkan di tengah, karena jumlah proyek tidak selalu habis
   dibagi jumlah kolom. Grid tidak dipakai di sini justru karena tracknya tetap
   ada meski kartunya kurang, jadi kartu sisa akan menempel ke kiri. */
.ecg-portfolio__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 18px;
}

/* flex-grow sengaja nol supaya kartu di baris terakhir tidak melar melebihi
   kartu di baris atasnya. */
.ecg-project {
	position: relative;
	flex: 0 1 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--ecg-c-frame);
	border: 1px solid var(--ecg-line-base);
	border-radius: var(--ecg-radius-xl);
}

.ecg-project picture,
.ecg-project img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ecg-project__title {
	position: relative;
	z-index: 1;
	/* Ruang atas dibuat lebar supaya gradasi punya jarak untuk memudar, bukan
	   supaya judulnya turun. */
	padding: 48px 16px 14px;
	background: linear-gradient(180deg, var(--ecg-overlay-clear), var(--ecg-overlay-deep));
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--ecg-c-surface);
}

@media (min-width: 620px) {
	.ecg-project {
		flex-basis: calc((100% - 18px) / 2);
	}
}

@media (min-width: 940px) {
	.ecg-project {
		flex-basis: calc((100% - 2 * 18px) / 3);
	}
}

/* -------------------------------------------------------------------------
   15. Ajakan hubungi
   ------------------------------------------------------------------------- */
.ecg-cta {
	position: relative;
	padding-block: var(--ecg-space-cta-block);
	background: var(--ecg-c-brand);
	color: var(--ecg-c-surface);
	overflow: hidden;
}

.ecg-cta::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(122deg, var(--ecg-on-brand-pattern) 0 1px, transparent 1px 12px);
	pointer-events: none;
}

.ecg-cta__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	max-width: calc(720px + 2 * var(--ecg-layout-gutter));
	text-align: center;
}

.ecg-cta__badge {
	display: inline-flex;
	gap: 9px;
	align-items: center;
	padding: 8px 15px;
	border: 1px solid var(--ecg-on-brand-line);
	border-radius: var(--ecg-radius-pill);
	font-family: var(--ecg-font-mono);
	font-size: 10px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ecg-on-brand-text);
}

.ecg-cta__badge .ecg-icon {
	font-size: 14px;
}

.ecg-cta__title {
	font-size: clamp(26px, 3vw, 42px);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.ecg-cta__lead {
	max-width: 560px;
	font-size: 15px;
	line-height: 1.75;
	color: var(--ecg-on-brand-text);
}

.ecg-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-top: 6px;
}

/* -------------------------------------------------------------------------
   16. Footer
   ------------------------------------------------------------------------- */
.ecg-footer {
	padding-block: var(--ecg-space-section-tight) 0;
	background: var(--ecg-c-ink-deep);
	color: var(--ecg-on-dark-footer);
}

.ecg-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
	gap: 32px;
	padding-bottom: 36px;
}

.ecg-footer__col {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ecg-footer__col--brand {
	gap: 16px;
	max-width: 300px;
}

.ecg-footer__brand {
	display: inline-flex;
	align-self: flex-start;
	padding: 12px 16px;
	background: var(--ecg-c-surface);
	border-radius: 11px;
}

.ecg-footer__brand .ecg-brand__logo {
	height: 32px;
}

.ecg-footer__desc {
	font-size: 13px;
	line-height: 1.75;
}

.ecg-footer__socials {
	display: flex;
	gap: 10px;
}

.ecg-footer__social {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--ecg-on-dark-line);
	border-radius: var(--ecg-radius-sm);
	color: var(--ecg-c-surface);
}

.ecg-footer__social .ecg-icon {
	font-size: 16px;
}

.ecg-footer__title {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ecg-c-surface);
}

.ecg-footer__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: 13px;
}

.ecg-footer__contact {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ecg-footer__contact-item {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 13px;
	line-height: 1.6;
}

.ecg-footer__contact-item .ecg-icon {
	flex: none;
	font-size: 17px;
	margin-top: 0.1em;
}

.ecg-footer a:hover {
	color: var(--ecg-c-surface);
}

.ecg-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: space-between;
	align-items: center;
	padding-block: 18px;
	border-top: 1px solid var(--ecg-on-dark-hairline);
	font-size: 12px;
}

.ecg-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
}

/* -------------------------------------------------------------------------
   17. Hero halaman dalam
   ------------------------------------------------------------------------- */
.ecg-pagehero {
	position: relative;
	overflow: hidden;
	background: var(--ecg-c-ink-deep);
	color: var(--ecg-c-surface);
}

.ecg-pagehero__bg,
.ecg-pagehero__bg picture,
.ecg-pagehero__bg img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ecg-pagehero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, var(--ecg-overlay-hero-ink) 0%, var(--ecg-overlay-hero-ink-soft) 46%, var(--ecg-overlay-hero-brand) 100%);
}

.ecg-pagehero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: clamp(24px, 3.4vw, 56px);
	align-items: flex-end;
	padding-block: var(--ecg-space-hero) var(--ecg-space-hero-bottom);
}

.ecg-pagehero__content {
	flex: 1.6 1 min(100%, 600px);
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.ecg-pagehero__title {
	max-width: 760px;
	font-size: clamp(30px, 3.9vw, 54px);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.ecg-pagehero__lead {
	max-width: 640px;
	font-size: 15px;
	line-height: 1.75;
	color: var(--ecg-on-dark-text);
}

.ecg-pagehero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 6px;
}

/* Kutipan pelanggan di sisi hero. */
.ecg-quote {
	flex: 1 1 min(100%, 340px);
	max-width: 420px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 24px;
	background: var(--ecg-on-dark-panel);
	border: 1px solid var(--ecg-on-dark-panel-line);
	border-radius: var(--ecg-radius-hero);
	backdrop-filter: blur(8px);
}

.ecg-quote > .ecg-icon {
	font-size: 26px;
}

.ecg-quote__text p {
	font-size: 15px;
	font-style: italic;
	line-height: 1.7;
	color: var(--ecg-on-dark-text-strong);
}

.ecg-quote__source {
	display: flex;
	gap: 12px;
	align-items: center;
	padding-top: 14px;
	border-top: 1px solid var(--ecg-on-dark-panel-line);
}

.ecg-quote__avatar {
	flex: none;
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 50%;
	font-size: 8px;
}

.ecg-quote__person {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.ecg-quote__person b {
	font-size: 13.5px;
}

.ecg-quote__person small {
	font-size: 11.5px;
	color: var(--ecg-on-dark-text-soft);
}

/* -------------------------------------------------------------------------
   18. Profil singkat
   ------------------------------------------------------------------------- */
.ecg-profile__grid {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(28px, 3.6vw, 60px);
	align-items: center;
}

.ecg-profile__body {
	flex: 1 1 min(100%, 440px);
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.ecg-profile__body .ecg-section__title {
	max-width: 520px;
}

.ecg-profile__text {
	max-width: 520px;
	font-size: 14.5px;
	line-height: 1.8;
	color: var(--ecg-c-body);
}

.ecg-profile__mix {
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
	margin-top: 4px;
}

.ecg-mix {
	flex: 1 1 200px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ecg-mix__head {
	display: flex;
	gap: 12px;
	align-items: center;
}

.ecg-mix__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	background: var(--ecg-c-brand-soft);
	color: var(--ecg-c-brand);
	border-radius: var(--ecg-radius-lg);
}

.ecg-mix__icon .ecg-icon {
	font-size: 20px;
}

.ecg-mix--accent .ecg-mix__icon {
	background: var(--ecg-c-accent-soft);
	color: var(--ecg-c-accent-ink);
}

.ecg-mix__value {
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}

.ecg-mix__bar {
	display: block;
	height: 6px;
	background: var(--ecg-c-brand-soft);
	border-radius: var(--ecg-radius-pill);
	overflow: hidden;
}

.ecg-mix--accent .ecg-mix__bar {
	background: var(--ecg-c-accent-soft);
}

/* Lebar isian datang dari PHP lewat --ecg-mix-share, karena angkanya data. */
.ecg-mix__fill {
	display: block;
	width: var(--ecg-mix-share, 0%);
	height: 100%;
	background: var(--ecg-c-brand);
}

.ecg-mix--accent .ecg-mix__fill {
	background: var(--ecg-c-accent);
}

.ecg-mix__label {
	font-size: 12.5px;
	color: var(--ecg-c-muted);
}

.ecg-profile__media {
	flex: 1 1 min(100%, 400px);
	display: flex;
	gap: 14px;
	align-items: stretch;
	min-width: 0;
}

.ecg-profile__shot {
	overflow: hidden;
	background: var(--ecg-c-frame);
	border-radius: var(--ecg-radius-xxxl);
}

.ecg-profile__shot picture,
.ecg-profile__shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ecg-profile__shot--tall {
	flex: 1.35 1 0;
	aspect-ratio: 4 / 5;
}

.ecg-profile__stack {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ecg-profile__stack .ecg-profile__shot {
	flex: 1;
	min-height: 120px;
}

.ecg-profile__count {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px;
	background: var(--ecg-c-ink);
	color: var(--ecg-c-surface);
	border-radius: var(--ecg-radius-xxxl);
}

.ecg-profile__count b {
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -0.03em;
}

.ecg-profile__count small {
	font-size: 11.5px;
	line-height: 1.55;
	color: var(--ecg-on-dark-text);
}

/* -------------------------------------------------------------------------
   19. Siapa kami
   ------------------------------------------------------------------------- */
.ecg-story {
	position: relative;
	overflow: hidden;
	background: var(--ecg-c-ink);
	color: var(--ecg-c-surface);
}

.ecg-story__bg,
.ecg-story__bg picture,
.ecg-story__bg img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ecg-story__bg {
	opacity: 0.32;
}

.ecg-story__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, var(--ecg-overlay-story-top), var(--ecg-overlay-story-bottom));
}

.ecg-story__grid {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: clamp(26px, 3.4vw, 54px);
	padding-block: var(--ecg-space-section);
}

.ecg-story__intro {
	flex: 1 1 min(100%, 380px);
	max-width: 460px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ecg-story__body {
	flex: 1.7 1 min(100%, 460px);
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ecg-story__text {
	font-size: 14.5px;
	line-height: 1.85;
	color: var(--ecg-on-dark-text);
}

.ecg-story__text b {
	color: var(--ecg-c-surface);
}

.ecg-story__text--quiet {
	color: var(--ecg-on-dark-text-soft);
}

/* Sel angka memakai latar penuh, jadi celah 1px di antaranya jadi garis. */
.ecg-story__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	margin-top: 8px;
	background: var(--ecg-on-dark-line);
	border-radius: var(--ecg-radius-xl);
	overflow: hidden;
}

.ecg-story__fact {
	flex: 1 1 150px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 18px 20px;
	background: var(--ecg-c-ink);
}

.ecg-story__fact b {
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.ecg-story__fact small {
	font-family: var(--ecg-font-mono);
	font-size: 9.5px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ecg-on-dark-text-faint);
}

/* -------------------------------------------------------------------------
   20. Nilai kerja
   ------------------------------------------------------------------------- */
.ecg-values {
	background: var(--ecg-c-surface-tint);
}

.ecg-values .ecg-section__head {
	margin-bottom: 12px;
}

/* Pola rail sama dengan rail layanan, lihat catatan di blok 10. */
.ecg-values__rail {
	--ecg-rail-start: max(var(--ecg-layout-gutter), calc((100% - var(--ecg-layout-content)) / 2));
	--ecg-rail-inner: min(calc(100vw - 2 * var(--ecg-layout-gutter)), var(--ecg-layout-content));

	display: flex;
	gap: 16px;
	padding-block: 18px 28px;
	padding-left: var(--ecg-rail-start);
	scroll-padding-left: var(--ecg-rail-start);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.ecg-values__rail::after {
	content: '';
	flex: 0 0 calc(var(--ecg-layout-gutter) - 16px);
}

.ecg-values__rail::-webkit-scrollbar {
	display: none;
}

.ecg-value {
	flex: 0 0 calc((var(--ecg-rail-inner) - 16px) / 1.4);
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: 13px;
	padding: 26px 24px;
	background: var(--ecg-c-surface);
	border-radius: var(--ecg-radius-xxxl);
	box-shadow: var(--ecg-shadow-card);
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.ecg-value:hover {
	transform: translateY(-2px);
	box-shadow: var(--ecg-shadow-card-hover);
}

.ecg-value--lead {
	background: var(--ecg-c-brand);
	color: var(--ecg-c-surface);
}

.ecg-value__icon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	background: var(--ecg-c-brand-soft);
	color: var(--ecg-c-brand);
	border-radius: var(--ecg-radius-xl);
}

.ecg-value__icon .ecg-icon {
	font-size: 23px;
}

.ecg-value--lead .ecg-value__icon {
	background: var(--ecg-on-brand-fill);
	color: var(--ecg-c-accent);
}

.ecg-value__title {
	font-size: 16.5px;
	font-weight: 700;
	letter-spacing: -0.015em;
}

.ecg-value__desc {
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--ecg-c-muted);
}

.ecg-value--lead .ecg-value__desc {
	color: var(--ecg-on-brand-text-soft);
}

@media (min-width: 800px) {
	.ecg-value {
		flex-basis: calc((var(--ecg-rail-inner) - 2 * 16px) / 2.5);
	}
}

@media (min-width: 1120px) {
	.ecg-value {
		flex-basis: calc((var(--ecg-rail-inner) - 3 * 16px) / 4);
	}
}

/* -------------------------------------------------------------------------
   21. Komitmen, visi, dan misi
   ------------------------------------------------------------------------- */
.ecg-pillars__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: stretch;
}

.ecg-pillar {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 30px 28px;
	border-radius: var(--ecg-radius-hero);
}

.ecg-pillar--ink {
	flex: 1 1 min(100%, 300px);
	background: var(--ecg-c-ink);
	color: var(--ecg-c-surface);
}

.ecg-pillar--brand {
	flex: 1 1 min(100%, 300px);
	gap: 18px;
	background: var(--ecg-c-brand);
	color: var(--ecg-c-surface);
}

.ecg-pillar--photo {
	position: relative;
	flex: 1 1 min(100%, 240px);
	min-height: 340px;
	padding: 0;
	overflow: hidden;
	background: var(--ecg-c-frame);
}

.ecg-pillar--photo picture,
.ecg-pillar--photo img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ecg-pillar__caption {
	position: relative;
	z-index: 1;
	margin-top: auto;
	padding: 60px 20px 20px;
	background: linear-gradient(180deg, var(--ecg-overlay-clear), var(--ecg-overlay-deep));
	font-size: 13px;
	font-weight: 600;
	line-height: 1.6;
	color: var(--ecg-c-surface);
}

.ecg-pillar__icon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	color: var(--ecg-c-accent);
	border-radius: var(--ecg-radius-xl);
}

.ecg-pillar__icon .ecg-icon {
	font-size: 23px;
}

.ecg-pillar--ink .ecg-pillar__icon {
	background: var(--ecg-on-dark-hairline);
}

.ecg-pillar--brand .ecg-pillar__icon {
	background: var(--ecg-on-brand-fill);
}

.ecg-pillar__title {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.ecg-pillar__text {
	font-size: 14px;
	line-height: 1.8;
}

.ecg-pillar--ink .ecg-pillar__text {
	flex: 1;
	color: var(--ecg-on-dark-text);
}

.ecg-pillar--brand .ecg-pillar__text {
	color: var(--ecg-on-brand-text);
}

.ecg-pillar__team {
	display: flex;
	gap: 10px;
	align-items: center;
	padding-top: 16px;
	border-top: 1px solid var(--ecg-on-dark-line);
}

.ecg-pillar__faces {
	display: flex;
	flex: none;
}

/* Lingkaran kecil, jadi kata FOTO dipersempit supaya tidak terpotong. */
.ecg-pillar__face {
	width: 32px;
	height: 32px;
	padding: 0;
	border: 2px solid var(--ecg-c-ink);
	border-radius: 50%;
	font-size: 7px;
	letter-spacing: 0.02em;
}

.ecg-pillar__face + .ecg-pillar__face {
	margin-left: -10px;
}

.ecg-pillar__team small {
	font-size: 12px;
	line-height: 1.5;
	color: var(--ecg-on-dark-text-soft);
}

.ecg-pillar__block {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ecg-pillar__block--grow {
	flex: 1;
	gap: 10px;
}

.ecg-pillar__label {
	font-family: var(--ecg-font-mono);
	font-size: 9.5px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ecg-c-accent);
}

.ecg-pillar__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ecg-pillar__list li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--ecg-on-brand-text);
}

.ecg-pillar__list .ecg-icon {
	margin-top: 0.15em;
	font-size: 15px;
}

.ecg-pillar__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* -------------------------------------------------------------------------
   22. Hero kontak dan kartu saluran
   ------------------------------------------------------------------------- */

/* Hero tanpa foto: latarnya gradasi, ditambah cahaya lime dan pola garis. */
.ecg-pagehero--plain {
	background: linear-gradient(150deg, var(--ecg-c-ink) 0%, var(--ecg-c-ink-brand) 44%, var(--ecg-c-brand) 100%);
}

.ecg-pagehero__glow,
.ecg-pagehero__weave {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.ecg-pagehero__glow {
	background: radial-gradient(120% 90% at 82% 8%, var(--ecg-overlay-glow) 0%, var(--ecg-overlay-glow-clear) 58%);
}

.ecg-pagehero__weave {
	background-image: repeating-linear-gradient(122deg, var(--ecg-on-brand-pattern) 0 1px, transparent 1px 13px);
}

.ecg-pagehero__inner--center {
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.ecg-pagehero__content--center {
	flex: 0 1 auto;
	align-items: center;
	text-align: center;
}

.ecg-pagehero__content--center .ecg-pagehero__title {
	max-width: 860px;
	font-size: clamp(29px, 3.7vw, 52px);
	line-height: 1.08;
}

.ecg-pagehero__content--center .ecg-pagehero__lead {
	max-width: 600px;
}

.ecg-channels {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	width: 100%;
	max-width: 1060px;
	margin-top: 14px;
}

.ecg-channel {
	flex: 1 1 min(100%, 260px);
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px;
	background: var(--ecg-on-dark-panel);
	border: 1px solid var(--ecg-on-dark-panel-line);
	border-radius: var(--ecg-radius-xxxl);
	backdrop-filter: blur(8px);
}

.ecg-channel__icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	background: var(--ecg-on-brand-fill);
	color: var(--ecg-c-accent);
	border-radius: var(--ecg-radius-lg);
}

.ecg-channel__icon--lead {
	background: var(--ecg-c-accent);
	color: var(--ecg-c-ink);
}

.ecg-channel__icon .ecg-icon {
	font-size: 21px;
}

.ecg-channel__label {
	font-family: var(--ecg-font-mono);
	font-size: 9.5px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ecg-on-dark-text-soft);
}

.ecg-channel__value {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: -0.01em;
	color: var(--ecg-c-surface);
	overflow-wrap: anywhere;
}

a.ecg-channel__value:hover {
	color: var(--ecg-c-accent);
}

.ecg-channel__note {
	margin-top: auto;
	font-size: 12px;
	line-height: 1.6;
	color: var(--ecg-on-dark-text-soft);
}

/* -------------------------------------------------------------------------
   23. Form permintaan survey
   ------------------------------------------------------------------------- */
.ecg-section__head--center {
	justify-content: center;
	margin-bottom: 30px;
	text-align: center;
}

.ecg-section__head--center .ecg-section__intro {
	align-items: center;
}

.ecg-section__head--center .ecg-section__title {
	max-width: 620px;
}

.ecg-section__lead {
	max-width: 520px;
	font-size: 14px;
	line-height: 1.75;
	color: var(--ecg-c-muted);
}

.ecg-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	max-width: 760px;
	margin-inline: auto;
	padding: clamp(24px, 2.6vw, 34px);
	background: var(--ecg-c-surface-tint);
	border-radius: var(--ecg-radius-hero);
}

.ecg-form__intro {
	max-width: 420px;
	font-size: 19px;
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: -0.02em;
}

.ecg-form__row {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.ecg-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ecg-form__row .ecg-field {
	flex: 1 1 180px;
	min-width: 0;
}

.ecg-field__label {
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.02em;
	color: var(--ecg-c-nav);
}

.ecg-field__input {
	width: 100%;
	padding: 14px 16px;
	background: var(--ecg-c-surface);
	color: var(--ecg-c-ink);
	border: 1px solid var(--ecg-line-strong);
	border-radius: var(--ecg-radius-lg);
	font-family: inherit;
	font-size: 14px;
	line-height: 1.5;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.ecg-field__input::placeholder {
	color: var(--ecg-c-hint);
}

.ecg-field__input:focus {
	outline: none;
	border-color: var(--ecg-c-brand);
	box-shadow: 0 0 0 3px var(--ecg-c-brand-soft);
}

.ecg-field__input--area {
	line-height: 1.6;
	resize: vertical;
}

/* Panah select bawaan berbeda tiap sistem, jadi tingginya disamakan di sini. */
.ecg-field__input--select {
	min-height: 50px;
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--ecg-c-nav) 50%), linear-gradient(135deg, var(--ecg-c-nav) 50%, transparent 50%);
	background-position: calc(100% - 19px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 40px;
}

/* Tombol garis di dalam form berdiri di atas latar abu, jadi isinya dibuat putih. */
.ecg-form .ecg-btn--outline {
	background: var(--ecg-c-surface);
}

.ecg-form__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin-top: 2px;
}

.ecg-form__note {
	font-size: 11.5px;
	line-height: 1.6;
	color: var(--ecg-c-hint);
}

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

/* -------------------------------------------------------------------------
   24. Pertanyaan umum
   ------------------------------------------------------------------------- */
.ecg-faq {
	background: var(--ecg-c-surface-tint);
}

.ecg-faq__head {
	margin-bottom: 26px;
}

.ecg-faq__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 0 40px;
}

.ecg-faq__column {
	flex: 1 1 min(100%, 380px);
	display: flex;
	flex-direction: column;
}

.ecg-faq__item {
	border-bottom: 1px solid var(--ecg-line-mid);
}

.ecg-faq__question {
	display: flex;
	gap: 14px;
	justify-content: space-between;
	align-items: center;
	padding: 20px 2px;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: -0.01em;
	list-style: none;
	cursor: pointer;
}

.ecg-faq__question::-webkit-details-marker {
	display: none;
}

.ecg-faq__question:hover {
	color: var(--ecg-c-brand);
}

.ecg-faq__icon {
	flex: none;
	display: grid;
	place-items: center;
	color: var(--ecg-c-brand);
	transition: transform 0.2s ease;
}

.ecg-faq__icon .ecg-icon {
	font-size: 16px;
}

/* Tanda tambah diputar jadi tanda silang saat jawaban terbuka. */
.ecg-faq__item[open] .ecg-faq__icon {
	transform: rotate(45deg);
}

.ecg-faq__answer {
	max-width: 520px;
	padding: 0 2px 20px;
	font-size: 13.5px;
	line-height: 1.75;
	color: var(--ecg-c-muted);
}

/* -------------------------------------------------------------------------
   25. Hero daftar artikel dan kotak pencarian
   ------------------------------------------------------------------------- */
.ecg-pagehero--blog .ecg-pagehero__content--center {
	max-width: 760px;
}

.ecg-pagehero--blog .ecg-pagehero__title {
	font-size: clamp(28px, 3.6vw, 50px);
	line-height: 1.07;
}

.ecg-search {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 520px;
	margin-top: 6px;
}

.ecg-search__icon {
	position: absolute;
	left: 18px;
	display: grid;
	place-items: center;
	color: var(--ecg-c-hint);
	pointer-events: none;
}

.ecg-search__icon .ecg-icon {
	font-size: 18px;
}

.ecg-search__input {
	width: 100%;
	min-height: 56px;
	padding: 0 56px 0 48px;
	background: var(--ecg-on-dark-field);
	color: var(--ecg-c-ink);
	border: 1px solid var(--ecg-on-dark-panel-line);
	border-radius: var(--ecg-radius-pill);
	font-family: inherit;
	font-size: 14.5px;
}

.ecg-search__input::placeholder {
	color: var(--ecg-c-hint);
}

.ecg-search__input:focus {
	outline: none;
	border-color: var(--ecg-c-accent);
}

/* Tombol kirim tetap ada supaya pencarian jalan tanpa menekan Enter. */
.ecg-search__submit {
	position: absolute;
	right: 7px;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	background: var(--ecg-c-brand);
	color: var(--ecg-c-surface);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.ecg-search__submit:hover {
	background: var(--ecg-c-brand-dark);
}

.ecg-search__submit .ecg-icon {
	font-size: 16px;
}

/* -------------------------------------------------------------------------
   26. Kartu artikel
   ------------------------------------------------------------------------- */
.ecg-post__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	font-family: var(--ecg-font-mono);
	font-size: 9.5px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ecg-c-hint);
}

.ecg-post__meta-item--lead {
	color: var(--ecg-c-brand);
}

.ecg-post__sep {
	color: var(--ecg-c-faint);
}

/* Penanda gambar dipakai kalau artikel belum punya gambar unggulan. */
.ecg-post__fallback {
	position: absolute;
	inset: 0;
	font-size: 9px;
	letter-spacing: 0.13em;
}

.ecg-featured {
	padding-block: var(--ecg-space-section-tight) 0;
}

.ecg-feature {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(20px, 2.6vw, 36px);
	align-items: center;
	padding: clamp(18px, 2vw, 26px);
	background: var(--ecg-c-surface-tint);
	border-radius: var(--ecg-radius-hero);
	box-shadow: var(--ecg-shadow-card);
}

.ecg-feature__media {
	position: relative;
	flex: 1.1 1 min(100%, 320px);
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--ecg-c-frame);
	border-radius: var(--ecg-radius-xxl);
}

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

.ecg-feature__flag {
	position: absolute;
	left: 14px;
	top: 14px;
	padding: 7px 13px;
	background: var(--ecg-c-accent);
	color: var(--ecg-c-ink);
	border-radius: var(--ecg-radius-pill);
	font-family: var(--ecg-font-mono);
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ecg-feature__body {
	flex: 1 1 min(100%, 300px);
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.ecg-feature__title {
	max-width: 520px;
	font-size: clamp(22px, 2.3vw, 32px);
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.ecg-feature__excerpt {
	max-width: 540px;
	font-size: 14.5px;
	line-height: 1.8;
	color: var(--ecg-c-body);
}

.ecg-feature__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
	margin-top: 4px;
}

.ecg-byline {
	display: flex;
	gap: 10px;
	align-items: center;
}

.ecg-byline__avatar {
	flex: none;
	width: 38px;
	height: 38px;
	padding: 0;
	border-radius: 50%;
	font-size: 7px;
	letter-spacing: 0.02em;
}

.ecg-byline__person {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.ecg-byline__person b {
	font-size: 12.5px;
}

.ecg-byline__person small {
	font-size: 11.5px;
	color: var(--ecg-c-hint);
}

/* Grid kartu. Lebar minimum kartu dijaga supaya tidak pernah lebih dari tiga
   kolom, dan tetap satu kolom di layar sempit. */
.ecg-post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(max(min(100%, 270px), calc((100% - 40px) / 3)), 1fr));
	gap: 20px;
}

.ecg-post {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--ecg-c-surface);
	border-radius: var(--ecg-radius-xxxl);
	box-shadow: var(--ecg-shadow-card);
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.ecg-post:hover {
	transform: translateY(-2px);
	box-shadow: var(--ecg-shadow-card-hover);
}

.ecg-post__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--ecg-c-frame);
}

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

.ecg-post__tag {
	position: absolute;
	left: 12px;
	top: 12px;
	padding: 6px 11px;
	background: var(--ecg-on-dark-field);
	color: var(--ecg-c-brand);
	border-radius: var(--ecg-radius-pill);
	font-family: var(--ecg-font-mono);
	font-size: 9.5px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ecg-post__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px 20px 22px;
}

.ecg-post__title {
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.015em;
	text-wrap: pretty;
}

.ecg-post__excerpt {
	flex: 1;
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--ecg-c-muted);
}

.ecg-post__more {
	display: flex;
	gap: 8px;
	align-items: center;
	padding-top: 14px;
	border-top: 1px solid var(--ecg-line-base);
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ecg-c-brand);
}

.ecg-post__more .ecg-icon {
	font-size: 14px;
}

/* -------------------------------------------------------------------------
   27. Daftar artikel: filter, penomoran halaman, keadaan kosong
   ------------------------------------------------------------------------- */
.ecg-blog__grid {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(26px, 3vw, 44px);
	align-items: flex-start;
}

.ecg-blog__main {
	flex: 2.2 1 min(100%, 520px);
	display: flex;
	flex-direction: column;
	gap: 22px;
	min-width: 0;
}

.ecg-blog__aside {
	flex: 1 1 min(100%, 280px);
	max-width: 360px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.ecg-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--ecg-line-base);
}

.ecg-chip {
	display: flex;
	gap: 7px;
	align-items: center;
	min-height: 40px;
	padding: 0 16px;
	background: var(--ecg-c-surface);
	color: var(--ecg-c-nav);
	border: 1px solid var(--ecg-line-mid);
	border-radius: var(--ecg-radius-pill);
	font-size: 12.5px;
	font-weight: 600;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ecg-chip:hover {
	border-color: var(--ecg-c-brand);
	color: var(--ecg-c-brand);
}

.ecg-chip--current,
.ecg-chip--current:hover {
	background: var(--ecg-c-brand);
	color: var(--ecg-c-surface);
	border-color: var(--ecg-c-brand);
}

.ecg-pager {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: space-between;
	align-items: center;
	margin-top: 8px;
	padding-top: 22px;
	border-top: 1px solid var(--ecg-line-base);
}

.ecg-pager__count {
	font-size: 13px;
	color: var(--ecg-c-muted);
}

/* Gaya dasar .ecg-pagination ada di blok 29. Pemilih di sini sengaja dibuat
   lebih spesifik supaya menang tanpa bergantung pada urutan berkas. */
.ecg-pager .ecg-pagination {
	margin-top: 0;
}

.ecg-pager .ecg-pagination .page-numbers {
	min-width: 42px;
	height: 42px;
	border: 1px solid var(--ecg-line-mid);
	border-radius: var(--ecg-radius-lg);
	font-size: 13.5px;
}

.ecg-pager .ecg-pagination .current {
	background: var(--ecg-c-brand);
	color: var(--ecg-c-surface);
	border-color: var(--ecg-c-brand);
}

.ecg-pager .ecg-pagination a.page-numbers:hover {
	border-color: var(--ecg-c-brand);
	color: var(--ecg-c-brand);
}

.ecg-pager .ecg-pagination .page-numbers .ecg-icon {
	font-size: 16px;
}

.ecg-blank {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 52px 24px;
	background: var(--ecg-c-surface-tint);
	border-radius: var(--ecg-radius-xxxl);
	text-align: center;
}

.ecg-blank__icon {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	background: var(--ecg-c-brand-soft);
	color: var(--ecg-c-brand);
	border-radius: var(--ecg-radius-xxl);
}

.ecg-blank__icon .ecg-icon {
	font-size: 26px;
}

.ecg-blank__title {
	font-size: 17px;
	letter-spacing: -0.015em;
}

.ecg-blank__text {
	max-width: 380px;
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--ecg-c-muted);
}

/* -------------------------------------------------------------------------
   28. Sidebar artikel
   ------------------------------------------------------------------------- */
.ecg-panel {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 24px;
	border-radius: var(--ecg-radius-xxxl);
}

.ecg-panel--tint {
	background: var(--ecg-c-surface-tint);
}

.ecg-panel--card {
	gap: 16px;
	background: var(--ecg-c-surface);
	box-shadow: var(--ecg-shadow-card);
}

.ecg-panel--ink {
	gap: 12px;
	padding: 26px 24px;
	background: var(--ecg-c-ink);
	color: var(--ecg-c-surface);
}

.ecg-panel__title {
	font-size: 14.5px;
	letter-spacing: -0.01em;
}

.ecg-panel__icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	background: var(--ecg-on-dark-hairline);
	color: var(--ecg-c-accent);
	border-radius: var(--ecg-radius-xl);
}

.ecg-panel__icon .ecg-icon {
	font-size: 22px;
}

.ecg-panel__heading {
	font-size: 17px;
	letter-spacing: -0.015em;
}

.ecg-panel__text {
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--ecg-on-dark-text);
}

.ecg-panel--ink .ecg-btn {
	margin-top: 4px;
}

.ecg-catlist {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ecg-catlist__row {
	display: flex;
	gap: 12px;
	justify-content: space-between;
	align-items: center;
	min-height: 44px;
	padding: 0 14px;
	background: var(--ecg-c-surface);
	color: var(--ecg-c-nav);
	border-radius: var(--ecg-radius-md);
	font-size: 13px;
	font-weight: 600;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.ecg-catlist__row:hover {
	background: var(--ecg-c-brand-soft);
	color: var(--ecg-c-brand);
}

.ecg-catlist__row--current,
.ecg-catlist__row--current:hover {
	background: var(--ecg-c-brand);
	color: var(--ecg-c-surface);
}

.ecg-catlist__count {
	font-family: var(--ecg-font-mono);
	font-size: 11px;
	font-weight: 500;
	line-height: 1;
}

.ecg-ranklist {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ecg-rank {
	display: flex;
	gap: 13px;
	align-items: flex-start;
}

.ecg-rank__num {
	flex: none;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	background: var(--ecg-c-brand-soft);
	color: var(--ecg-c-brand);
	border-radius: var(--ecg-radius-md);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
}

.ecg-rank__body {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.ecg-rank__title {
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: -0.01em;
	text-wrap: pretty;
}

.ecg-rank__meta {
	font-family: var(--ecg-font-mono);
	font-size: 9.5px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ecg-c-hint);
}

.ecg-taglist {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ecg-taglist__item {
	padding: 9px 14px;
	background: var(--ecg-c-surface);
	color: var(--ecg-c-nav);
	border-radius: var(--ecg-radius-pill);
	font-size: 12.5px;
	font-weight: 600;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.ecg-taglist__item:hover {
	background: var(--ecg-c-brand);
	color: var(--ecg-c-surface);
}

/* -------------------------------------------------------------------------
   29. Artikel tunggal
   ------------------------------------------------------------------------- */
.ecg-pagehero--article .ecg-pagehero__content--center {
	max-width: 900px;
	gap: 18px;
}

.ecg-pagehero--article .ecg-pagehero__title {
	font-size: clamp(27px, 3.5vw, 48px);
	line-height: 1.08;
}

.ecg-pagehero--article .ecg-pagehero__lead {
	max-width: 700px;
	font-size: 15.5px;
}

.ecg-article-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	justify-content: center;
	align-items: center;
	width: 100%;
	max-width: 640px;
	margin-top: 6px;
	padding-top: 20px;
	border-top: 1px solid var(--ecg-on-dark-line);
}

.ecg-article-meta__rule {
	width: 1px;
	height: 32px;
	background: var(--ecg-on-dark-panel-line);
}

.ecg-article-meta__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.ecg-article-meta__fact {
	display: flex;
	gap: 7px;
	align-items: center;
	font-family: var(--ecg-font-mono);
	font-size: 10px;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ecg-on-dark-footer);
}

.ecg-article-meta__fact .ecg-icon {
	font-size: 14px;
}

.ecg-byline--on-dark .ecg-byline__person small {
	color: var(--ecg-on-dark-text-soft);
}

.ecg-byline__avatar--lg {
	width: 44px;
	height: 44px;
	font-size: 8px;
}

/* Gambar sampul */
.ecg-cover {
	padding-block: clamp(24px, 2.6vw, 36px) 0;
}

.ecg-cover__figure {
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.ecg-cover__frame {
	position: relative;
	aspect-ratio: 16 / 7;
	min-height: 200px;
	overflow: hidden;
	background: var(--ecg-c-frame);
	border-radius: var(--ecg-radius-hero);
}

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

.ecg-cover__frame .ecg-post__fallback {
	font-size: 10px;
}

.ecg-cover__caption {
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--ecg-c-hint);
}

/* Dua kolom isi artikel */
.ecg-article__grid {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(26px, 3.2vw, 52px);
	align-items: flex-start;
}

.ecg-article__main {
	flex: 2.3 1 min(100%, 520px);
	min-width: 0;
}

.ecg-article__aside {
	position: sticky;
	top: calc(var(--ecg-layout-header-height) + 24px);
	flex: 1 1 min(100%, 270px);
	max-width: 340px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

/* Daftar isi */
.ecg-toc {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ecg-toc__link {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--ecg-c-nav);
}

.ecg-toc__link:hover {
	color: var(--ecg-c-brand);
}

.ecg-toc__num {
	flex: none;
	font-family: var(--ecg-font-mono);
	font-size: 10px;
	font-weight: 500;
	line-height: 1.6;
	color: var(--ecg-c-hint);
}

/* Bagikan */
.ecg-share {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}

.ecg-share__button {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	background: var(--ecg-c-surface-tint);
	color: var(--ecg-c-ink);
	border: 0;
	border-radius: var(--ecg-radius-lg);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.ecg-share__button:hover {
	background: var(--ecg-c-brand);
	color: var(--ecg-c-surface);
}

.ecg-share__button .ecg-icon {
	font-size: 18px;
}

.ecg-share__done {
	display: flex;
	gap: 8px;
	align-items: center;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ecg-c-brand);
}

.ecg-share__done[hidden] {
	display: none;
}

.ecg-share__done .ecg-icon {
	font-size: 15px;
}

/* Tag, kotak penulis, dan tautan artikel bersebelahan */
.ecg-article__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-top: 14px;
	padding-top: 24px;
	border-top: 1px solid var(--ecg-line-base);
}

.ecg-article__tags-label {
	margin-right: 6px;
	font-family: var(--ecg-font-mono);
	font-size: 10px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--ecg-c-hint);
}

.ecg-article__tags .ecg-taglist__item {
	background: var(--ecg-c-surface-tint);
}

.ecg-authorbox {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: center;
	margin-top: 22px;
	padding: 26px;
	background: var(--ecg-c-surface-tint);
	border-radius: var(--ecg-radius-hero);
}

.ecg-authorbox__avatar {
	flex: none;
	width: 64px;
	height: 64px;
	padding: 0;
	border-radius: 50%;
	font-size: 8.5px;
	letter-spacing: 0.02em;
}

.ecg-authorbox__body {
	flex: 1 1 240px;
	display: flex;
	flex-direction: column;
	gap: 7px;
	min-width: 0;
}

.ecg-authorbox__name {
	font-size: 16px;
	letter-spacing: -0.015em;
}

.ecg-authorbox__text {
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--ecg-c-muted);
}

.ecg-authorbox .ecg-btn {
	flex: none;
}

.ecg-adjacent {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
	margin-top: 16px;
}

.ecg-adjacent__link {
	flex: 1 1 min(100%, 260px);
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 22px;
	background: var(--ecg-c-surface);
	border-radius: var(--ecg-radius-xxxl);
	box-shadow: var(--ecg-shadow-card);
	transition: box-shadow 0.22s ease;
}

.ecg-adjacent__link:hover {
	box-shadow: var(--ecg-shadow-card-hover);
	color: var(--ecg-c-brand);
}

.ecg-adjacent__link--next {
	align-items: flex-end;
	text-align: right;
}

.ecg-adjacent__label {
	display: flex;
	gap: 8px;
	align-items: center;
	font-family: var(--ecg-font-mono);
	font-size: 9.5px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ecg-c-hint);
}

.ecg-adjacent__label .ecg-icon {
	font-size: 13px;
}

.ecg-adjacent__title {
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: -0.01em;
	text-wrap: pretty;
}

/* Artikel terkait */
.ecg-related {
	background: var(--ecg-c-surface-tint);
}

.ecg-related__title {
	font-size: clamp(22px, 2.3vw, 32px);
	line-height: 1.18;
	letter-spacing: -0.025em;
}

.ecg-related .ecg-post {
	background: var(--ecg-c-surface);
}

/* -------------------------------------------------------------------------
   30. Isi tulisan, halaman dalam, dan cadangan index.php
   ------------------------------------------------------------------------- */
.ecg-page__title {
	margin-bottom: 16px;
	font-size: clamp(26px, 3vw, 38px);
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: -0.02em;
}

.ecg-page__lead {
	margin-bottom: 20px;
	font-size: 15px;
	line-height: 1.75;
	color: var(--ecg-c-body);
}

.ecg-entry__meta {
	margin-bottom: 20px;
	font-size: 12.5px;
	color: var(--ecg-c-meta);
}

/* Isi tulisan dari editor. Lebarnya dibatasi supaya barisnya tetap enak dibaca
   di halaman yang tidak punya sidebar; di artikel tunggal batas itu dilepas
   karena kolomnya sudah dipersempit oleh sidebar. */
.ecg-entry__content {
	max-width: 72ch;
	font-size: 16px;
	line-height: 1.85;
	color: var(--ecg-c-nav);
}

.ecg-article__main .ecg-entry__content {
	max-width: none;
}

.ecg-entry__content > *:first-child {
	margin-top: 0;
}

.ecg-entry__content p {
	margin: 0 0 20px;
}

.ecg-entry__content h2 {
	margin: 38px 0 14px;
	font-size: clamp(21px, 2.1vw, 27px);
	font-weight: 800;
	line-height: 1.22;
	letter-spacing: -0.02em;
	text-wrap: balance;
	color: var(--ecg-c-ink);
}

.ecg-entry__content h3 {
	margin: 28px 0 12px;
	font-size: 17.5px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.015em;
	color: var(--ecg-c-ink);
}

.ecg-entry__content h4 {
	margin: 24px 0 10px;
	font-size: 15.5px;
	font-weight: 700;
	color: var(--ecg-c-ink);
}

.ecg-entry__content ul,
.ecg-entry__content ol {
	display: flex;
	flex-direction: column;
	gap: 11px;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
	counter-reset: ecg-entry-item;
}

.ecg-entry__content li {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	font-size: 15.5px;
	line-height: 1.75;
}

.ecg-entry__content ul > li::before {
	content: '';
	flex: none;
	width: 7px;
	height: 7px;
	margin-top: 10px;
	background: var(--ecg-c-accent);
	border-radius: 50%;
	box-shadow: var(--ecg-shadow-ring);
}

.ecg-entry__content ol > li::before {
	counter-increment: ecg-entry-item;
	content: counter(ecg-entry-item, decimal-leading-zero);
	flex: none;
	font-family: var(--ecg-font-mono);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.9;
	color: var(--ecg-c-brand);
}

.ecg-entry__content strong,
.ecg-entry__content b {
	font-weight: 700;
	color: var(--ecg-c-ink);
}

.ecg-entry__content a {
	color: var(--ecg-c-brand);
	font-weight: 600;
	border-bottom: 1px solid var(--ecg-line-brand);
}

.ecg-entry__content img {
	border-radius: var(--ecg-radius-xxl);
}

.ecg-entry__content figure {
	margin: 0 0 24px;
}

.ecg-entry__content figcaption {
	margin-top: 10px;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--ecg-c-hint);
}

/* Blok kutipan dipakai sebagai kotak catatan, seperti di mockup. */
.ecg-entry__content blockquote {
	margin: 30px 0;
	padding: 26px 26px 28px;
	background: var(--ecg-c-surface-tint);
	border-radius: var(--ecg-radius-xxxl);
	font-size: 15.5px;
	line-height: 1.8;
}

.ecg-entry__content blockquote p:last-child {
	margin-bottom: 0;
}

.ecg-entry__content blockquote cite {
	display: block;
	margin-top: 10px;
	font-family: var(--ecg-font-mono);
	font-size: 10px;
	font-weight: 500;
	font-style: normal;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--ecg-c-brand);
}

/* Tabel panjang tetap bisa digeser sendiri tanpa menggeser seluruh halaman. */
.ecg-entry__content .wp-block-table,
.ecg-entry__content figure.wp-block-table {
	overflow-x: auto;
}

.ecg-entry__content table {
	width: 100%;
	margin: 0 0 24px;
	border-collapse: collapse;
	font-size: 14.5px;
}

.ecg-entry__content th {
	padding: 13px 14px;
	background: var(--ecg-c-surface-tint);
	border-bottom: 1px solid var(--ecg-line-base);
	font-family: var(--ecg-font-mono);
	font-size: 10px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	text-align: left;
	color: var(--ecg-c-brand);
}

.ecg-entry__content td {
	padding: 14px;
	border-bottom: 1px solid var(--ecg-line-soft);
	line-height: 1.6;
}

.ecg-entry__content td:last-child {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ecg-entry-list {
	display: grid;
	gap: 20px;
	margin-top: 24px;
}

.ecg-entry-card {
	padding: 22px;
	background: var(--ecg-c-surface-alt);
	border-radius: var(--ecg-radius-xl);
}

.ecg-entry-card__title {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.015em;
}

.ecg-entry-card__meta {
	margin-top: 6px;
	font-size: 12px;
	color: var(--ecg-c-meta);
}

.ecg-entry-card__excerpt {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.7;
	color: var(--ecg-c-muted);
}

.ecg-pagination {
	margin-top: 28px;
}

.ecg-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ecg-pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding: 0 10px;
	border: 1px solid var(--ecg-line-strong);
	border-radius: var(--ecg-radius-sm);
	font-size: 13px;
	font-weight: 600;
}

.ecg-pagination .current {
	background: var(--ecg-c-brand);
	color: var(--ecg-c-surface);
	border-color: var(--ecg-c-brand);
}

/* -------------------------------------------------------------------------
   31. Arsip katalog: hero, batang filter, kartu produk, dan kartu jaminan
   ------------------------------------------------------------------------- */
.ecg-katalog-crumbs {
	padding-block: 14px;
	background: var(--ecg-c-surface-tint);
	border-bottom: 1px solid var(--ecg-line-soft);
}

.ecg-katalog-hero {
	padding-block: var(--ecg-space-hero) clamp(28px, 3.2vw, 44px);
	background: var(--ecg-c-surface);
}

.ecg-katalog-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
}

.ecg-katalog-hero__title {
	max-width: 1000px;
	font-size: clamp(28px, 3.6vw, 48px);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.ecg-katalog-hero__lead {
	max-width: 680px;
	font-size: 15px;
	line-height: 1.78;
	color: var(--ecg-c-body);
}

/* Kotak cari versi terang, untuk hero berlatar putih. Versi bawaannya dipakai
   di hero blog yang latarnya gelap. */
.ecg-search--light .ecg-search__input {
	background: var(--ecg-c-surface);
	border-color: var(--ecg-line-mid);
}

.ecg-search--light .ecg-search__input:focus {
	border-color: var(--ecg-c-brand);
	box-shadow: var(--ecg-shadow-ring);
}

/* Batang filter menempel tepat di bawah header situs, jadi tumpuannya tinggi
   header, dan z-index-nya di bawah header (50) supaya header tetap di atasnya. */
.ecg-katalog-bar {
	position: sticky;
	top: var(--ecg-layout-header-height);
	z-index: 40;
	background: var(--ecg-c-surface);
	border-block: 1px solid var(--ecg-line-soft);
}

/* Batang admin WordPress mendorong header turun, jadi batang ini ikut turun
   dengan angka yang sama seperti .ecg-header. */
.admin-bar .ecg-katalog-bar {
	top: calc(var(--ecg-layout-header-height) + 32px);
}

@media screen and (max-width: 782px) {
	.admin-bar .ecg-katalog-bar {
		top: calc(var(--ecg-layout-header-height) + 46px);
	}
}

@media screen and (max-width: 600px) {
	.admin-bar .ecg-katalog-bar {
		top: var(--ecg-layout-header-height);
	}
}

.ecg-katalog-bar__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
	align-items: center;
	padding-block: 14px;
}

.ecg-katalog-bar__tools {
	display: flex;
	flex: none;
	gap: 14px;
	align-items: center;
}

.ecg-katalog-bar__hitung {
	font-size: 12.5px;
	color: var(--ecg-c-hint);
	white-space: nowrap;
}

.ecg-katalog-bar__pisah {
	width: 1px;
	height: 22px;
	background: var(--ecg-line-mid);
}

/* Rail kategori digulir mendatar kalau kategorinya banyak, bukan membungkus,
   supaya tinggi batang yang menempel tidak berubah ubah. */
.ecg-chiprail {
	display: flex;
	gap: 6px;
	align-items: center;
	min-width: 0;
	padding: 4px;
	background: var(--ecg-c-surface-mute);
	border-radius: var(--ecg-radius-pill);
	overflow-x: auto;
	scrollbar-width: none;
}

.ecg-chiprail::-webkit-scrollbar {
	display: none;
}

.ecg-chip2 {
	display: flex;
	flex: none;
	gap: 8px;
	align-items: center;
	min-height: 38px;
	padding: 0 15px;
	color: var(--ecg-c-muted);
	border-radius: var(--ecg-radius-pill);
	font-size: 12.5px;
	font-weight: 600;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.ecg-chip2:hover {
	color: var(--ecg-c-brand);
}

.ecg-chip2--current,
.ecg-chip2--current:hover {
	background: var(--ecg-c-brand);
	color: var(--ecg-c-surface);
	box-shadow: var(--ecg-shadow-cta-small);
}

.ecg-chip2__count {
	font-family: var(--ecg-font-mono);
	font-size: 10px;
	font-weight: 500;
	color: var(--ecg-c-faint);
}

.ecg-chip2--current .ecg-chip2__count {
	color: var(--ecg-on-brand-text);
}

/* Pemilih urutan memakai details bawaan browser, jadi tetap bisa dibuka tanpa
   JavaScript. Panah bawaan summary dibuang karena tombolnya sudah berikon. */
.ecg-sort {
	position: relative;
}

.ecg-sort__button {
	display: flex;
	gap: 9px;
	align-items: center;
	min-height: 42px;
	padding: 0 16px;
	background: var(--ecg-c-surface);
	color: var(--ecg-c-ink);
	border: 1px solid var(--ecg-line-mid);
	border-radius: var(--ecg-radius-pill);
	font-size: 12.5px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	list-style: none;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.ecg-sort__button::-webkit-details-marker {
	display: none;
}

.ecg-sort__button:hover,
.ecg-sort[open] .ecg-sort__button {
	border-color: var(--ecg-c-brand);
	color: var(--ecg-c-brand);
}

.ecg-sort__button .ecg-icon {
	font-size: 15px;
	color: var(--ecg-c-brand);
}

.ecg-sort__menu {
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	z-index: 1;
	display: flex;
	flex-direction: column;
	min-width: 190px;
	padding: 6px;
	background: var(--ecg-c-surface);
	border: 1px solid var(--ecg-line-base);
	border-radius: var(--ecg-radius-xl);
	box-shadow: var(--ecg-shadow-float-small);
}

.ecg-sort__item {
	padding: 10px 12px;
	border-radius: var(--ecg-radius-md);
	font-size: 13px;
	font-weight: 600;
	color: var(--ecg-c-nav);
	white-space: nowrap;
}

.ecg-sort__item:hover {
	background: var(--ecg-c-surface-tint);
	color: var(--ecg-c-brand);
}

.ecg-sort__item.is-current {
	background: var(--ecg-c-brand-soft);
	color: var(--ecg-c-brand);
}

.ecg-katalog {
	padding-block: clamp(26px, 3.2vw, 44px) clamp(30px, 3.4vw, 48px);
	background: var(--ecg-c-surface-tint);
}

.ecg-katalog__main {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.ecg-chips--sub {
	padding-bottom: 0;
	border-bottom: 0;
}

.ecg-chip--sub {
	min-height: 34px;
	padding: 0 13px;
	background: var(--ecg-c-surface);
	border-color: transparent;
	font-size: 12px;
}

.ecg-blank--katalog {
	background: var(--ecg-c-surface);
	padding-block: 56px;
}

.ecg-produk-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(max(min(100%, 270px), calc((100% - 44px) / 3)), 1fr));
	gap: 22px;
}

/* position: relative wajib. Tanpa itu .screen-reader-text di dalam kartu jatuh
   ke blok penampung terluar, lolos dari kliping rail produk lainnya, dan
   memunculkan scroll horizontal di layar sempit. */
.ecg-produk {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--ecg-c-surface);
	border-radius: var(--ecg-radius-hero);
	box-shadow: var(--ecg-shadow-card);
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.ecg-produk:hover {
	transform: translateY(-3px);
	box-shadow: var(--ecg-shadow-card-hover);
}

.ecg-produk__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--ecg-c-frame);
}

.ecg-produk__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.ecg-produk:hover .ecg-produk__media img {
	transform: scale(1.03);
}

.ecg-produk__fallback {
	position: absolute;
	inset: 0;
}

.ecg-produk__tag {
	position: absolute;
	left: 13px;
	top: 13px;
	padding: 7px 12px;
	background: var(--ecg-c-surface);
	color: var(--ecg-c-brand);
	border-radius: var(--ecg-radius-pill);
	font-family: var(--ecg-font-mono);
	font-size: 9px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Penanda kanan atas diisi tag produk, contoh "Paling dicari". Kosong kalau
   produknya tidak diberi tag. */
.ecg-produk__flag {
	position: absolute;
	right: 13px;
	top: 13px;
	padding: 7px 12px;
	background: var(--ecg-c-accent);
	color: var(--ecg-c-ink);
	border-radius: var(--ecg-radius-pill);
	font-family: var(--ecg-font-mono);
	font-size: 9px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ecg-produk__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 11px;
	padding: 20px 20px 22px;
}

.ecg-produk__title {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.02em;
	text-wrap: pretty;
}

.ecg-produk__title a:hover {
	color: var(--ecg-c-brand);
}

.ecg-produk__excerpt {
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--ecg-c-muted);
}

/* Chip spesifikasi didorong ke bawah supaya baris harga tetap sejajar antar
   kartu meski panjang ringkasannya berbeda. */
.ecg-produk__spek {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin: auto 0 0;
	padding: 0;
	list-style: none;
}

.ecg-produk__spek-item {
	padding: 6px 11px;
	background: var(--ecg-c-surface-mute);
	border-radius: var(--ecg-radius-pill);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--ecg-c-muted);
}

.ecg-produk__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
	align-items: flex-end;
	padding-top: 15px;
	border-top: 1px solid var(--ecg-line-base);
}

/* Kartu tanpa chip spesifikasi tetap menempelkan baris harganya ke bawah. */
.ecg-produk__spek + .ecg-produk__foot {
	margin-top: 0;
}

.ecg-produk__body > .ecg-produk__foot:not(.ecg-produk__foot--rail) {
	margin-top: auto;
}

.ecg-produk__harga {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.ecg-produk__harga-kicker {
	font-family: var(--ecg-font-mono);
	font-size: 8.5px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ecg-c-hint);
}

.ecg-produk__harga-nilai {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	align-items: baseline;
}

.ecg-produk__harga-angka {
	font-size: 19px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.025em;
	font-variant-numeric: tabular-nums;
}

/* Produk tanpa harga memakai baris yang sama, isinya ajakan menghubungi. */
.ecg-produk__harga-angka--kontak {
	font-size: 16px;
	letter-spacing: -0.015em;
	color: var(--ecg-c-brand);
}

.ecg-produk__satuan {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--ecg-c-muted);
}

.ecg-produk__more {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ecg-c-brand);
}

.ecg-produk__more .ecg-icon {
	font-size: 14px;
	transition: transform 0.2s ease;
}

.ecg-produk:hover .ecg-produk__more .ecg-icon {
	transform: translateX(3px);
}

.ecg-katalog-jaminan {
	padding-block: 0 var(--ecg-space-section-tight);
	background: var(--ecg-c-surface-tint);
}

.ecg-katalog-jaminan__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.ecg-jaminan {
	flex: 1 1 min(100%, 240px);
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 24px;
	background: var(--ecg-c-surface);
	border-radius: var(--ecg-radius-xxxl);
}

.ecg-jaminan__icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	background: var(--ecg-c-brand-soft);
	color: var(--ecg-c-brand);
	border-radius: var(--ecg-radius-xl);
}

.ecg-jaminan__icon .ecg-icon {
	font-size: 22px;
}

.ecg-jaminan__body {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.ecg-jaminan__title {
	font-size: 14.5px;
	letter-spacing: -0.01em;
}

.ecg-jaminan__desc {
	font-size: 12.5px;
	line-height: 1.65;
	color: var(--ecg-c-muted);
}

@media (max-width: 860px) {
	.ecg-katalog-bar__inner {
		gap: 12px;
	}

	.ecg-chiprail {
		order: 2;
		width: 100%;
	}

	.ecg-katalog-bar__tools {
		order: 1;
		width: 100%;
		justify-content: space-between;
	}
}

/* -------------------------------------------------------------------------
   32. Halaman produk: galeri, panel harga, dan spesifikasi
   ------------------------------------------------------------------------- */
.ecg-produk-detail__atas {
	padding-block: var(--ecg-space-hero) var(--ecg-space-section-tight);
	background: var(--ecg-c-surface);
}

.ecg-produk-detail__grid {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(24px, 3.2vw, 52px);
	align-items: flex-start;
	margin-top: 22px;
}

.ecg-produk-galeri {
	flex: 1.25 1 min(100%, 420px);
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

/* Foto ikut diam saat panel di sebelahnya digulir, mengikuti mockup. Baru
   berlaku di layar lebar, karena di bawah itu kedua kolom sudah bertumpuk dan
   foto yang menempel malah menutupi isi panel. */
@media (min-width: 1000px) {
	.ecg-produk-galeri {
		position: sticky;
		top: calc(var(--ecg-layout-header-height) + 24px);
		align-self: flex-start;
	}
}

.ecg-produk-galeri__utama {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--ecg-c-frame);
	border-radius: var(--ecg-radius-hero);
}

.ecg-produk-galeri__utama img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ecg-produk-galeri__utama .ecg-placeholder {
	width: 100%;
	height: 100%;
}

.ecg-produk-galeri__hitung {
	position: absolute;
	right: 16px;
	bottom: 16px;
	padding: 7px 12px;
	background: var(--ecg-overlay-deep);
	color: var(--ecg-c-surface);
	border-radius: var(--ecg-radius-pill);
	font-family: var(--ecg-font-mono);
	font-size: 9.5px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.1em;
}

.ecg-produk-galeri__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Penanda terpilih memakai bayangan, bukan garis tepi, supaya ukuran thumbnail
   tidak bergeser saat berpindah foto. */
.ecg-produk-galeri__thumb {
	display: block;
	width: 78px;
	height: 62px;
	overflow: hidden;
	background: var(--ecg-c-frame);
	border-radius: var(--ecg-radius-lg);
	box-shadow: inset 0 0 0 1px var(--ecg-line-base);
	transition: box-shadow 0.2s ease;
}

.ecg-produk-galeri__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ecg-produk-galeri__thumb:hover,
.ecg-produk-galeri__thumb.is-current {
	box-shadow: 0 0 0 2px var(--ecg-c-brand);
}

.ecg-produk-panel {
	flex: 1 1 min(100%, 340px);
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.ecg-produk-panel__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

.ecg-produk-panel__kicker {
	display: inline-flex;
	align-items: center;
	padding: 7px 13px;
	background: var(--ecg-c-brand-soft);
	color: var(--ecg-c-brand);
	border-radius: var(--ecg-radius-pill);
	font-family: var(--ecg-font-mono);
	font-size: 9.5px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.ecg-produk-panel__kicker:hover {
	background: var(--ecg-c-brand);
	color: var(--ecg-c-surface);
}

.ecg-produk-panel__rating {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	font-size: 12.5px;
	color: var(--ecg-c-muted);
}

.ecg-produk-panel__stars {
	display: inline-flex;
	gap: 2px;
	color: var(--ecg-c-star);
}

.ecg-produk-panel__stars .ecg-icon {
	font-size: 12px;
}

.ecg-produk-panel__title {
	font-size: clamp(27px, 3.2vw, 42px);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.ecg-produk-panel__harga {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	justify-content: space-between;
	align-items: flex-end;
	padding: 22px 24px;
	background: var(--ecg-c-surface-tint);
	border-radius: var(--ecg-radius-xxxl);
}

.ecg-produk-panel__harga-info {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.ecg-produk-panel__harga-kicker {
	font-family: var(--ecg-font-mono);
	font-size: 9.5px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--ecg-c-hint);
}

.ecg-produk-panel__harga-nilai {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: baseline;
}

.ecg-produk-panel__harga-angka {
	font-size: clamp(26px, 2.8vw, 34px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}

/* Produk tanpa harga memakai kolom yang sama, isinya ajakan menghubungi.
   Hurufnya sedikit lebih kecil karena berupa kata, bukan angka. */
.ecg-produk-panel__harga-angka--kontak {
	font-size: clamp(22px, 2.3vw, 28px);
	letter-spacing: -0.02em;
	color: var(--ecg-c-brand);
}

.ecg-produk-panel__harga-satuan {
	font-size: 14px;
	font-weight: 600;
	color: var(--ecg-c-muted);
}

/* Di layar sempit tombol ini digantikan batang menempel di bawah layar, jadi
   tidak dicetak dua kali. */
@media (max-width: 860px) {
	.ecg-produk-panel__cta {
		display: none;
	}
}

.ecg-produk-panel__lead {
	max-width: 560px;
	font-size: 15px;
	line-height: 1.78;
	color: var(--ecg-c-body);
}

.ecg-produk-panel__catatan {
	display: flex;
	gap: 9px;
	align-items: center;
	font-size: 12.5px;
	color: var(--ecg-c-hint);
}

.ecg-produk-panel__catatan .ecg-icon {
	flex: none;
	font-size: 15px;
	color: var(--ecg-c-accent);
}

.ecg-produk-spek {
	display: flex;
	flex-direction: column;
	padding: 20px 22px;
	background: var(--ecg-c-surface-tint);
	border-radius: var(--ecg-radius-xxxl);
}

.ecg-produk-spek__title {
	padding-bottom: 12px;
	font-family: var(--ecg-font-mono);
	font-size: 9.5px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--ecg-c-hint);
}

.ecg-produk-spek__row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: space-between;
	align-items: baseline;
	padding: 14px 2px;
	border-top: 1px solid var(--ecg-line-base);
}

.ecg-produk-spek__row:first-child {
	border-top: 0;
}

.ecg-produk-spek__label {
	font-size: 13px;
	line-height: 1.6;
	color: var(--ecg-c-hint);
}

.ecg-produk-spek__nilai {
	margin: 0;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.6;
	text-align: right;
	color: var(--ecg-c-ink);
}

/* -------------------------------------------------------------------------
   33. Deskripsi produk, rail produk lainnya, dan batang menempel
   ------------------------------------------------------------------------- */
.ecg-produk-isi {
	padding-block: 0 var(--ecg-space-section);
	background: var(--ecg-c-surface);
}

/* Ukuran hurufnya datang dari .ecg-section__title supaya judul section tetap
   satu tingkat di atas h2 yang diketik owner di dalam isi produk. */
.ecg-produk-isi__title {
	margin-bottom: 14px;
}

.ecg-produk-isi__teks {
	max-width: 760px;
}

.ecg-terkait {
	background: var(--ecg-c-surface-tint);
}

.ecg-terkait .ecg-section__head {
	margin-bottom: 12px;
}

.ecg-terkait__tools {
	display: flex;
	gap: 12px;
	align-items: center;
}

/* Rail memakai pola yang sama dengan rail cakupan layanan: berdiri di luar
   container supaya kartunya bisa menembus sampai tepi kanan layar. */
.ecg-terkait__rail {
	--ecg-rail-start: max(var(--ecg-layout-gutter), calc((100% - var(--ecg-layout-content)) / 2));
	--ecg-rail-inner: min(calc(100vw - 2 * var(--ecg-layout-gutter)), var(--ecg-layout-content));

	display: flex;
	gap: 20px;
	padding-block: 18px 10px;
	padding-left: var(--ecg-rail-start);
	scroll-padding-left: var(--ecg-rail-start);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.ecg-terkait__rail::after {
	content: '';
	flex: 0 0 calc(var(--ecg-layout-gutter) - 20px);
}

.ecg-terkait__rail::-webkit-scrollbar {
	display: none;
}

/* Tiga kartu sejajar selama muat, di bawah itu kartunya melebar dan railnya
   digeser. */
.ecg-produk--rail {
	flex: 0 0 max(calc((var(--ecg-rail-inner) - 40px) / 3), min(76vw, 280px));
	scroll-snap-align: start;
	border-radius: var(--ecg-radius-xxxl);
}

.ecg-produk--rail .ecg-produk__media {
	aspect-ratio: 16 / 10;
}

.ecg-produk--rail .ecg-produk__body {
	gap: 9px;
}

.ecg-produk--rail .ecg-produk__title {
	font-size: 16px;
	line-height: 1.32;
	letter-spacing: -0.015em;
}

/* Di rail harganya cuma satu baris keterangan, bukan blok bertingkat seperti
   di kartu arsip, karena kartunya lebih ringkas. */
.ecg-produk__harga-baris {
	margin-bottom: auto;
	font-size: 13px;
	color: var(--ecg-c-muted);
}

.ecg-produk__foot--rail {
	justify-content: flex-start;
	padding-top: 14px;
}

/* Batang menempel hanya untuk layar sempit. Di layar lebar tombol di kotak
   harga hampir selalu masih terlihat, jadi batang ini cuma menutupi konten. */
.ecg-produk-bar {
	display: none;
}

@media (max-width: 860px) {
	.ecg-produk-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 90;
		display: flex;
		gap: 12px;
		align-items: center;
		justify-content: space-between;
		padding: 12px var(--ecg-layout-gutter-tight);
		padding-bottom: calc(12px + env(safe-area-inset-bottom));
		background: var(--ecg-c-surface);
		border-top: 1px solid var(--ecg-line-base);
		box-shadow: var(--ecg-shadow-panel);
	}

	.ecg-produk-bar[hidden] {
		display: none;
	}

	.ecg-produk-bar__info {
		display: flex;
		flex-direction: column;
		gap: 3px;
		min-width: 0;
	}

	.ecg-produk-bar__kicker {
		font-family: var(--ecg-font-mono);
		font-size: 8.5px;
		font-weight: 500;
		line-height: 1;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--ecg-c-hint);
	}

	.ecg-produk-bar__nilai {
		display: flex;
		gap: 5px;
		align-items: baseline;
		min-width: 0;
	}

	.ecg-produk-bar__angka {
		overflow: hidden;
		font-size: 18px;
		font-weight: 800;
		line-height: 1.2;
		letter-spacing: -0.025em;
		font-variant-numeric: tabular-nums;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.ecg-produk-bar__satuan {
		font-size: 11.5px;
		font-weight: 600;
		color: var(--ecg-c-muted);
	}

	.ecg-produk-bar .ecg-btn {
		flex: none;
	}

	/* Batang menempel di atas isi halaman, jadi kaki footer diberi ruang supaya
	   baris hak cipta tidak tertutup saat halaman digulir sampai habis. */
	.single-katalog .ecg-footer {
		padding-bottom: 76px;
	}
}

@media (max-width: 640px) {
	.ecg-produk-grid {
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
		gap: 16px;
	}

	.ecg-produk__body {
		padding: 16px 16px 18px;
	}

	.ecg-produk__foot {
		justify-content: flex-start;
	}

	.ecg-produk-galeri__thumb {
		width: 64px;
		height: 52px;
	}

	.ecg-produk-panel__harga,
	.ecg-produk-spek {
		padding: 18px;
	}
}

/* -------------------------------------------------------------------------
   34. Halaman layanan
   Dipakai bersama halaman Jasa Baja Ringan dan Jasa Kanopi. Hero, panel
   ajakan hubungi, dan rail alur kerja memakai gaya yang sudah ada di atas.
   ------------------------------------------------------------------------- */
.ecg-servicehero {
	align-items: center;
}

.ecg-servicehero .ecg-pagehero__content {
	flex: 1.35 1 min(100%, 480px);
}

.ecg-servicehero__aside {
	flex: 1 1 min(100%, 340px);
	max-width: 520px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ecg-servicehero__media {
	aspect-ratio: 5 / 4;
	min-height: 260px;
	overflow: hidden;
	border: 1px solid var(--ecg-on-dark-panel-line);
	border-radius: var(--ecg-radius-hero);
}

/* Tinggi diteruskan lewat picture, karena img memakai height 100% sedangkan
   tinggi kotaknya datang dari aspect-ratio, bukan dari isi. */
.ecg-servicehero__media picture {
	display: block;
	height: 100%;
}

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

/* Garis pemisah antar angka dibuat dari jarak 1px di atas latar pembungkusnya,
   supaya ketiganya tetap rapat saat membungkus ke baris berikutnya. */
.ecg-servicehero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	overflow: hidden;
	background: var(--ecg-on-dark-line);
	border-radius: var(--ecg-radius-xxl);
}

.ecg-servicehero__fact {
	flex: 1 1 100px;
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 18px 16px;
	background: var(--ecg-overlay-hero-brand);
}

.ecg-servicehero__fact b {
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.ecg-servicehero__fact small {
	font-family: var(--ecg-font-mono);
	font-size: 9px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--ecg-on-dark-footer);
}

/* Cakupan layanan. Rail-nya memakai pola yang sama dengan rail layanan di
   halaman depan: berdiri di luar container supaya bisa menembus tepi layar. */
.ecg-scopes__rail {
	--ecg-rail-start: max(var(--ecg-layout-gutter), calc((100% - var(--ecg-layout-content)) / 2));
	--ecg-rail-inner: min(calc(100vw - 2 * var(--ecg-layout-gutter)), var(--ecg-layout-content));

	display: flex;
	gap: 18px;
	padding-block: 18px 28px;
	padding-left: var(--ecg-rail-start);
	scroll-padding-left: var(--ecg-rail-start);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.ecg-scopes__rail::after {
	content: '';
	flex: 0 0 calc(var(--ecg-layout-gutter) - 18px);
}

.ecg-scopes__rail::-webkit-scrollbar {
	display: none;
}

.ecg-scopes .ecg-section__head {
	margin-bottom: 12px;
}

.ecg-scope {
	flex: 0 0 min(calc(var(--ecg-rail-inner) / 1.15), 320px);
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 26px 24px;
	background: var(--ecg-c-surface);
	border-radius: var(--ecg-radius-xxxl);
	box-shadow: var(--ecg-shadow-card);
}

.ecg-scope--lead {
	background: var(--ecg-c-brand);
	color: var(--ecg-c-surface);
}

.ecg-scope__icon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	background: var(--ecg-c-brand-soft);
	color: var(--ecg-c-brand);
	border-radius: var(--ecg-radius-lg);
}

.ecg-scope__icon .ecg-icon {
	font-size: 23px;
}

.ecg-scope--lead .ecg-scope__icon {
	background: var(--ecg-on-brand-fill);
	color: var(--ecg-c-accent);
}

.ecg-scope__title {
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.015em;
	text-wrap: pretty;
}

.ecg-scope__desc {
	flex: 1;
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--ecg-c-muted);
}

.ecg-scope--lead .ecg-scope__desc {
	color: var(--ecg-on-brand-text-soft);
}

.ecg-scope__points {
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding-top: 14px;
	border-top: 1px solid var(--ecg-line-base);
}

.ecg-scope--lead .ecg-scope__points {
	border-top-color: var(--ecg-on-dark-panel-line);
}

.ecg-scope__point {
	display: flex;
	gap: 9px;
	align-items: center;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ecg-c-nav);
}

.ecg-scope__point .ecg-icon {
	font-size: 14px;
	color: var(--ecg-c-brand);
}

.ecg-scope--lead .ecg-scope__point {
	color: var(--ecg-on-dark-text-strong);
}

.ecg-scope--lead .ecg-scope__point .ecg-icon {
	color: var(--ecg-c-accent);
}

/* Tombol geser berikutnya sengaja terisi penuh, mengikuti mockup. */
.ecg-rail-btn--solid {
	background: var(--ecg-c-brand);
	color: var(--ecg-c-surface);
	border-color: var(--ecg-c-brand);
}

/* Alasan memilih kami, di atas latar gelap. */
.ecg-reasons {
	position: relative;
	overflow: hidden;
	background: var(--ecg-c-ink);
	color: var(--ecg-c-surface);
}

.ecg-reasons__weave {
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(122deg, var(--ecg-on-brand-pattern) 0 1px, transparent 1px 13px);
	pointer-events: none;
}

.ecg-reasons > .ecg-container {
	position: relative;
	z-index: 1;
}

.ecg-reasons__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.ecg-reason {
	flex: 1 1 min(100%, 240px);
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 26px 24px;
	background: var(--ecg-on-dark-panel-soft);
	border: 1px solid var(--ecg-on-dark-panel-edge);
	border-radius: var(--ecg-radius-xxxl);
}

.ecg-reason__icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	background: var(--ecg-on-dark-panel);
	color: var(--ecg-c-accent);
	border-radius: var(--ecg-radius-lg);
}

.ecg-reason__icon .ecg-icon {
	font-size: 22px;
}

.ecg-reason__title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.015em;
	text-wrap: pretty;
}

.ecg-reason__desc {
	font-size: 13.5px;
	line-height: 1.72;
	color: var(--ecg-on-dark-text);
}

/* Pertanyaan umum halaman layanan, dengan dua kartu keterangan di sisinya. */
.ecg-servicefaq {
	background: var(--ecg-c-surface-tint);
}

.ecg-servicefaq__inner {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(26px, 3.2vw, 52px);
	align-items: flex-start;
}

.ecg-servicefaq__main {
	flex: 1.5 1 min(100%, 440px);
	min-width: 0;
}

.ecg-servicefaq__head {
	margin-bottom: 18px;
}

.ecg-servicefaq__aside {
	flex: 1 1 min(100%, 280px);
	max-width: 360px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ecg-notecard {
	display: flex;
	flex-direction: column;
	gap: 13px;
	padding: 26px 24px;
	background: var(--ecg-c-surface);
	border-radius: var(--ecg-radius-xxxl);
	box-shadow: var(--ecg-shadow-card);
}

.ecg-notecard--dark {
	background: var(--ecg-c-ink);
	color: var(--ecg-c-surface);
	box-shadow: none;
}

.ecg-notecard__icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	background: var(--ecg-c-brand-soft);
	color: var(--ecg-c-brand);
	border-radius: var(--ecg-radius-lg);
}

.ecg-notecard__icon .ecg-icon {
	font-size: 22px;
}

.ecg-notecard--dark .ecg-notecard__icon {
	background: var(--ecg-on-dark-panel);
	color: var(--ecg-c-accent);
}

.ecg-notecard__title {
	font-size: 16.5px;
	font-weight: 700;
	letter-spacing: -0.015em;
}

.ecg-notecard__desc {
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--ecg-c-muted);
}

.ecg-notecard--dark .ecg-notecard__desc {
	color: var(--ecg-on-brand-text-soft);
}

.ecg-notecard__meta {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	padding-top: 14px;
	border-top: 1px solid var(--ecg-line-base);
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--ecg-c-nav);
}

.ecg-notecard__meta .ecg-icon {
	font-size: 15px;
}

/* --block ditulis setelah --pill di blok tombol, jadi bentuk pil pada tombol
   selebar kartu perlu ditegaskan lagi di sini. */
.ecg-notecard .ecg-btn--pill.ecg-btn--block {
	margin-top: 4px;
	border-radius: var(--ecg-radius-pill);
}

/* Layanan lainnya. */
.ecg-others__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(max(min(100%, 260px), calc((100% - 40px) / 3)), 1fr));
	gap: 20px;
}

.ecg-other {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--ecg-c-surface);
	border-radius: var(--ecg-radius-xxxl);
	box-shadow: var(--ecg-shadow-card);
	transition: box-shadow 0.22s ease, transform 0.22s ease;
}

.ecg-other:hover {
	transform: translateY(-2px);
	box-shadow: var(--ecg-shadow-card-hover);
}

.ecg-other__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.ecg-other__thumb {
	position: absolute;
	inset: 0;
	transition: transform 0.4s ease;
}

.ecg-other__thumb picture,
.ecg-other__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ecg-other:hover .ecg-other__thumb {
	transform: scale(1.05);
}

.ecg-other__badge {
	position: absolute;
	left: 12px;
	top: 12px;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	background: var(--ecg-c-surface);
	color: var(--ecg-c-brand);
	border-radius: var(--ecg-radius-md);
}

.ecg-other__badge .ecg-icon {
	font-size: 19px;
}

.ecg-other__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding: 20px 20px 22px;
}

.ecg-other__title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.32;
	letter-spacing: -0.015em;
	text-wrap: pretty;
}

/* Tautan judul melebar menutupi kartu, supaya seluruh kartu bisa diklik
   tanpa membungkus isinya di dalam satu tag a. */
.ecg-other__link::after {
	content: '';
	position: absolute;
	inset: 0;
}

.ecg-other:hover .ecg-other__title {
	color: var(--ecg-c-brand);
}

.ecg-other__desc {
	flex: 1;
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--ecg-c-muted);
}

.ecg-other__more {
	display: flex;
	gap: 8px;
	align-items: center;
	padding-top: 14px;
	border-top: 1px solid var(--ecg-line-base);
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ecg-c-brand);
}

.ecg-other__more .ecg-icon {
	font-size: 14px;
}

.ecg-other__more--soon {
	font-family: var(--ecg-font-mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ecg-c-hint);
}

@media (min-width: 800px) {
	.ecg-scope {
		flex-basis: calc((var(--ecg-rail-inner) - 18px) / 2.5);
	}
}

@media (min-width: 1120px) {
	.ecg-scope {
		flex-basis: calc((var(--ecg-rail-inner) - 3 * 18px) / 4);
	}
}

/* -------------------------------------------------------------------------
   35. Preferensi gerak
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.ecg-service:hover,
	.ecg-step:hover,
	.ecg-other:hover,
	.ecg-other:hover .ecg-other__thumb,
	.ecg-value:hover,
	.ecg-post:hover,
	.ecg-produk:hover,
	.ecg-produk:hover .ecg-produk__media img,
	.ecg-produk:hover .ecg-produk__more .ecg-icon {
		transform: none;
	}
}