/* =========================================================================
   Etinion Exactglobal - gaya utama
   Nilai warna dan ukuran tidak ditulis di sini. Semuanya memakai custom
   property --eeg-* yang dihasilkan dari theme.json oleh inc/class-tokens.php.
   Urutan blok: font, dasar, alat bantu, tombol, global, homepage lama,
   halaman dalam, blog, katalog, layanan, homepage Exact Global, About Us,
   Contact Us, daftar artikel dan artikel tunggal Exact Global.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Font
   Plus Jakarta Sans (isi) dan DM Sans (judul) adalah font variabel, satu
   berkas untuk seluruh bobotnya.
   ------------------------------------------------------------------------- */
@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: 'DM Sans';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/dm-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: 'DM Sans';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/dm-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;
}

/* Tinggi header berbeda di layar sempit dan lebar, jadi semua yang menempel
   di bawah header membaca variabel ini, bukan token tingginya langsung. */
:root {
	--eeg-header-h: var(--eeg-layout-header-height-sm);
}

@media (min-width: 1024px) {
	:root {
		--eeg-header-h: var(--eeg-layout-header-height);
	}
}

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

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

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

h1,
h2,
h3 {
	font-family: var(--eeg-font-head);
}

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(--eeg-c-brand);
}

button {
	font: inherit;
	color: inherit;
}

b,
strong {
	font-weight: 700;
}

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

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

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

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

.eeg-icon--brand {
	color: var(--eeg-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;
}

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

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

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

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

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

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

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

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

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

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

.eeg-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. */
.eeg-crumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	align-items: center;
	font-family: var(--eeg-font-mono);
	font-size: 10.5px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--eeg-c-meta);
}

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

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

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

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

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

/* Versi Exact Global: huruf biasa, bukan mono berhuruf kapital. */
.eeg-crumbs--plain .eeg-crumbs__list,
.eeg-crumbs--plain .eeg-crumbs__item {
	gap: 8px;
}

.eeg-crumbs--plain .eeg-crumbs__list {
	font-family: var(--eeg-font-sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

.eeg-crumbs--plain .eeg-crumbs__sep {
	display: flex;
	color: var(--eeg-c-hint);
}

.eeg-crumbs--plain .eeg-crumbs__sep .eeg-icon {
	font-size: 14px;
}

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

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

/* Penanda konten yang masih menunggu data owner.
   Ukuran font dibatasi supaya tidak ikut membesar di dalam angka besar. */
.eeg-todo {
	display: inline-block;
	max-width: 100%;
	padding: 2px 7px;
	border: 1px dashed currentColor;
	border-radius: 4px;
	font-family: var(--eeg-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. */
.eeg-stat__value .eeg-todo,
.eeg-hero__rating-value .eeg-todo,
.eeg-hero__card--projects b .eeg-todo {
	display: block;
	width: fit-content;
}

/* -------------------------------------------------------------------------
   4. Tombol
   ------------------------------------------------------------------------- */
.eeg-btn {
	display: inline-flex;
	gap: 9px;
	align-items: center;
	justify-content: center;
	padding: 12px 18px;
	border: 1px solid transparent;
	border-radius: var(--eeg-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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* -------------------------------------------------------------------------
   5. Wadah situs, judul section, dan tombol versi Exact Global
   Header, footer, dan halaman depan memakai lebar 1200px dengan gutter 24px
   mengikuti mockup Exact Global Homepage. Halaman lama tetap memakai
   .eeg-container supaya tata letaknya tidak berubah.
   ------------------------------------------------------------------------- */
.eeg-wrap {
	width: 100%;
	max-width: calc(var(--eeg-layout-site) + 2 * var(--eeg-layout-site-gutter));
	margin-inline: auto;
	padding-inline: var(--eeg-layout-site-gutter);
}

.eeg-heading {
	font-size: clamp(26px, 2.8vw, 36px);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.035em;
	color: var(--eeg-c-ink);
	text-wrap: balance;
}

.eeg-btn--solid,
.eeg-btn--line,
.eeg-btn--light {
	padding: 13px 20px;
	border-radius: var(--eeg-radius-lg);
	font-size: 14px;
}

.eeg-btn--solid {
	padding-inline: 22px;
	background: var(--eeg-c-brand);
	color: var(--eeg-c-surface);
	box-shadow: var(--eeg-shadow-btn);
}

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

.eeg-btn--line {
	background: var(--eeg-c-surface);
	border-color: var(--eeg-c-border-strong);
	color: var(--eeg-c-ink);
}

.eeg-btn--line:hover {
	border-color: var(--eeg-c-brand);
	color: var(--eeg-c-brand);
}

.eeg-btn--light {
	background: var(--eeg-c-surface);
	color: var(--eeg-c-brand);
}

.eeg-btn--light:hover {
	background: var(--eeg-c-brand-soft);
	color: var(--eeg-c-brand-dark);
}

.eeg-btn--hero {
	gap: 10px;
	padding: 16px 26px;
	font-size: 15px;
}

.eeg-btn--hero.eeg-btn--solid {
	box-shadow: var(--eeg-shadow-btn-hero);
}

.eeg-btn--soft {
	gap: 8px;
	padding: 14px 24px;
	box-shadow: var(--eeg-shadow-btn-soft);
}

/* -------------------------------------------------------------------------
   6. Header dan menu utama
   ------------------------------------------------------------------------- */
.eeg-header {
	position: sticky;
	top: 0;
	/* Di bawah laci menu mobile (60 dan 61) supaya laci tetap menutupinya,
	   di atas isi halaman. */
	z-index: 50;
	background: var(--eeg-glass-header);
	-webkit-backdrop-filter: saturate(1.4) blur(14px);
	backdrop-filter: saturate(1.4) blur(14px);
	border-bottom: 1px solid var(--eeg-glass-header-line);
}

/* 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 .eeg-header {
	top: 32px;
}

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

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

/* Layar sempit: tombol menu, logo di tengah, tombol kontak. */
.eeg-header__inner {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) 44px;
	gap: 12px;
	align-items: center;
	height: var(--eeg-layout-header-height-sm);
	padding-inline: 16px;
}

.eeg-header__brand {
	justify-self: center;
}

.eeg-brand {
	display: flex;
	align-items: center;
}

.eeg-brand__logo {
	display: block;
	width: auto;
	height: 40px;
}

.eeg-header__icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: var(--eeg-c-surface);
	border: 1px solid var(--eeg-c-border-strong);
	border-radius: var(--eeg-radius-lg);
	color: var(--eeg-c-ink);
	cursor: pointer;
}

.eeg-header__icon .eeg-icon {
	font-size: 20px;
}

.eeg-header__call {
	background: var(--eeg-c-brand);
	border-color: var(--eeg-c-brand);
	color: var(--eeg-c-surface);
}

.eeg-header__call .eeg-icon {
	font-size: 18px;
}

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

.eeg-nav,
.eeg-header__cta {
	display: none;
}

.eeg-nav {
	min-width: 0;
}

.eeg-nav__list {
	display: flex;
	flex-wrap: nowrap;
	gap: clamp(20px, 2.3vw, 30px);
	align-items: center;
}

.eeg-nav__item {
	position: relative;
}

.eeg-nav__link {
	display: flex;
	gap: 4px;
	align-items: center;
	font-size: 15px;
	font-weight: 500;
	color: var(--eeg-c-nav);
	white-space: nowrap;
	transition: color 0.2s ease;
}

.eeg-nav__link:hover {
	color: var(--eeg-c-brand);
}

.eeg-nav__item--current > .eeg-nav__link {
	color: var(--eeg-c-brand);
	font-weight: 700;
}

.eeg-nav__caret {
	font-size: 14px;
}

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

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

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

.eeg-nav__sublink {
	display: block;
	padding: 10px 12px;
	border-radius: var(--eeg-radius-md);
	font-size: 14px;
	font-weight: 500;
	color: var(--eeg-c-nav);
}

.eeg-nav__sublink:hover {
	background: var(--eeg-c-brand-mist);
	color: var(--eeg-c-brand);
}

@media (min-width: 1024px) {
	.eeg-header__inner {
		display: flex;
		gap: 24px;
		justify-content: space-between;
		height: var(--eeg-layout-header-height);
		padding-inline: var(--eeg-layout-site-gutter);
	}

	.eeg-header__menu,
	.eeg-header__call {
		display: none;
	}

	.eeg-nav {
		display: block;
	}

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

	.eeg-header .eeg-brand__logo {
		height: 46px;
	}
}

/* -------------------------------------------------------------------------
   7. Laci menu mobile
   ------------------------------------------------------------------------- */
.eeg-drawer__overlay {
	position: fixed;
	inset: 0;
	z-index: 60;
	background: var(--eeg-overlay-scrim);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

/* Masuk dari kiri, sesuai tombol menu yang ada di kiri header. */
.eeg-drawer {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 61;
	display: flex;
	flex-direction: column;
	width: min(86vw, 340px);
	background: var(--eeg-c-surface);
	box-shadow: var(--eeg-shadow-drawer-left);
	transform: translateX(calc(-100% - 32px));
	transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
	overscroll-behavior: contain;
}

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

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

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

.eeg-drawer__head {
	display: flex;
	flex: none;
	justify-content: space-between;
	align-items: center;
	height: var(--eeg-layout-header-height-sm);
	padding: 0 16px 0 24px;
	border-bottom: 1px solid var(--eeg-c-border-soft);
}

.eeg-drawer__nav {
	flex: 1;
	padding: 8px 24px;
	overflow-y: auto;
}

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

.eeg-drawer__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	border-bottom: 1px solid var(--eeg-c-border-soft);
}

.eeg-drawer__link {
	flex: 1;
	display: flex;
	align-items: center;
	padding-block: 15px;
	font-size: 16px;
	font-weight: 600;
	color: var(--eeg-c-nav);
}

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

.eeg-drawer__toggle {
	display: grid;
	place-items: center;
	align-self: stretch;
	width: 44px;
	background: none;
	border: 0;
	color: var(--eeg-c-meta);
	cursor: pointer;
}

.eeg-drawer__caret {
	font-size: 14px;
	transition: transform 0.2s ease;
}

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

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

.eeg-drawer__sublink {
	display: flex;
	align-items: center;
	min-height: 40px;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--eeg-c-body);
}

.eeg-drawer__foot {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 10px;
	padding: 20px 24px 28px;
	border-top: 1px solid var(--eeg-c-border-soft);
}

.eeg-drawer__foot .eeg-btn {
	padding: 15px;
	box-shadow: none;
}

.eeg-drawer__mail {
	padding: 6px;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	color: var(--eeg-c-body);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.eeg-hero__card--warranty small {
	font-size: 10.5px;
	color: var(--eeg-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. */
.eeg-hero__usp {
	position: relative;
	z-index: 1;
	display: flex;
	background: var(--eeg-c-ink);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

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

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

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

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

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

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

.eeg-hero__usp-item small {
	font-size: 12px;
	color: var(--eeg-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. */
	.eeg-hero__badge {
		gap: 6px;
		padding: 8px 11px;
		font-size: 9px;
		letter-spacing: 0.02em;
		text-align: center;
	}

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

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

	.eeg-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;
	}

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

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

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

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

	.eeg-hero__divider {
		display: none;
	}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* -------------------------------------------------------------------------
   10. Layanan
   ------------------------------------------------------------------------- */
.eeg-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. */
.eeg-rail-nav[hidden] {
	display: none;
}

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

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

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

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

/* Rail layanan berdiri di luar container.
   --eeg-rail-start menyejajarkan kartu pertama dengan judul section, sementara
   ujung kanannya dibiarkan menembus sampai tepi layar.
   --eeg-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. */
.eeg-services__rail {
	--eeg-rail-start: max(var(--eeg-layout-gutter), calc((100% - var(--eeg-layout-content)) / 2));
	--eeg-rail-inner: min(calc(100vw - 2 * var(--eeg-layout-gutter)), var(--eeg-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(--eeg-rail-start);
	scroll-padding-left: var(--eeg-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. */
.eeg-services__rail::after {
	content: '';
	flex: 0 0 calc(var(--eeg-layout-gutter) - 16px);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.eeg-stat__label {
	font-family: var(--eeg-font-mono);
	font-size: 10px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--eeg-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) {
	.eeg-stats__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px 14px;
	}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.eeg-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(--eeg-c-surface-tint);
	color: var(--eeg-c-ink);
	border-radius: var(--eeg-radius-xxxl);
	box-shadow: var(--eeg-shadow-card);
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* -------------------------------------------------------------------------
   14. Portofolio
   ------------------------------------------------------------------------- */
.eeg-portfolio {
	background: var(--eeg-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. */
.eeg-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. */
.eeg-project {
	position: relative;
	flex: 0 1 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--eeg-c-frame);
	border: 1px solid var(--eeg-line-base);
	border-radius: var(--eeg-radius-xl);
}

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

.eeg-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(--eeg-overlay-clear), var(--eeg-overlay-deep));
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--eeg-c-surface);
}

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

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

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

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

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

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

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

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

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

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

/* -------------------------------------------------------------------------
   16. Footer
   ------------------------------------------------------------------------- */
.eeg-footer {
	position: relative;
	overflow: hidden;
	background: var(--eeg-c-ink-deep);
	color: var(--eeg-c-footer-text);
}

/* Garis cahaya tipis di tepi atas dan pendar biru di belakang judul. */
.eeg-footer::before {
	content: '';
	position: absolute;
	inset: 0 0 auto;
	height: 1px;
	background: linear-gradient(90deg, var(--eeg-glow-sky-clear), var(--eeg-glow-rule), var(--eeg-glow-sky-clear));
}

.eeg-footer::after {
	content: '';
	position: absolute;
	top: -340px;
	left: 50%;
	width: 900px;
	height: 500px;
	border-radius: 50%;
	background: radial-gradient(closest-side, var(--eeg-glow-footer), var(--eeg-glow-brand-clear));
	transform: translateX(-50%);
	pointer-events: none;
}

.eeg-footer__inner {
	position: relative;
	z-index: 1;
	padding-top: clamp(56px, 7vw, 96px);
}

.eeg-footer a {
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.eeg-footer__top {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	justify-content: space-between;
	align-items: center;
	padding-bottom: clamp(32px, 4vw, 48px);
	border-bottom: 1px solid var(--eeg-footer-line);
}

.eeg-footer__heading {
	font-size: clamp(20px, 2vw, 26px);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--eeg-c-surface);
}

.eeg-footer__reach {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	min-width: 0;
}

.eeg-footer__card {
	display: flex;
	gap: 12px;
	align-items: center;
	min-width: 0;
	padding: 10px 16px 10px 10px;
	background: var(--eeg-footer-card);
	border: 1px solid var(--eeg-footer-line);
	border-radius: var(--eeg-radius-lg);
	color: var(--eeg-c-surface);
}

.eeg-footer__card:hover {
	background: var(--eeg-footer-card-hover);
	border-color: var(--eeg-footer-card-edge-hover);
	color: var(--eeg-c-surface);
}

.eeg-footer__card-icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 34px;
	height: 34px;
	background: var(--eeg-c-brand);
	border-radius: var(--eeg-radius-md);
}

.eeg-footer__card-icon .eeg-icon,
.eeg-footer__card-arrow {
	font-size: 18px;
}

.eeg-footer__card-text {
	min-width: 0;
}

.eeg-footer__card-label {
	display: block;
	font-size: 11px;
	color: var(--eeg-c-footer-muted);
}

.eeg-footer__card-value {
	display: block;
	margin-top: 1px;
	font-size: 14px;
	font-weight: 700;
	overflow-wrap: anywhere;
}

.eeg-footer__card-arrow {
	color: var(--eeg-c-footer-muted);
}

.eeg-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: 40px;
	padding-block: clamp(40px, 5vw, 64px);
}

.eeg-footer__about,
.eeg-footer__col {
	min-width: 0;
}

.eeg-footer__brand {
	align-self: flex-start;
	width: fit-content;
}

.eeg-footer__brand .eeg-brand__logo {
	height: 46px;
}

.eeg-footer__desc {
	max-width: 340px;
	margin: 18px 0 20px;
	font-size: 14px;
	line-height: 1.75;
}

.eeg-footer__certs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.eeg-footer__cert {
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 10px 14px 10px 10px;
	background: linear-gradient(180deg, var(--eeg-footer-badge-top), var(--eeg-footer-badge-bottom));
	border: 1px solid var(--eeg-footer-badge-edge);
	border-radius: var(--eeg-radius-xl);
}

.eeg-footer__cert-icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 36px;
	height: 36px;
	background: linear-gradient(145deg, var(--eeg-c-accent), var(--eeg-c-brand));
	border-radius: var(--eeg-radius-md);
	color: var(--eeg-c-surface);
}

.eeg-footer__cert-icon .eeg-icon {
	font-size: 18px;
}

.eeg-footer__cert-text {
	line-height: 1.25;
}

.eeg-footer__cert-tag {
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--eeg-c-footer-muted);
}

.eeg-footer__cert-code {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: var(--eeg-c-surface);
}

.eeg-footer__cert-name {
	display: block;
	font-size: 11px;
	color: var(--eeg-c-footer-muted);
}

/* Judul kolom ditulis h2 demi navigasi pembaca layar, tapi tampilannya label
   kecil berhuruf isi seperti di mockup. */
.eeg-footer__title {
	margin-bottom: 18px;
	font-family: var(--eeg-font-sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--eeg-c-surface);
}

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

.eeg-footer__list a:hover {
	color: var(--eeg-c-surface);
}

.eeg-footer__places {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.eeg-footer__place {
	display: flex;
	gap: 12px;
	font-size: 14px;
}

.eeg-footer__place-icon {
	margin-top: 2px;
	font-size: 18px;
	color: var(--eeg-c-accent);
}

.eeg-footer__place-label {
	display: block;
	font-weight: 700;
	color: var(--eeg-c-surface);
}

.eeg-footer__place-value {
	display: block;
	margin-top: 3px;
	line-height: 1.6;
}

.eeg-footer__socials {
	display: flex;
	gap: 8px;
	margin-top: 24px;
}

.eeg-footer__social {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	background: var(--eeg-footer-social);
	border: 1px solid var(--eeg-footer-social-edge);
	border-radius: var(--eeg-radius-lg);
	color: var(--eeg-c-surface);
}

.eeg-footer__social .eeg-icon {
	font-size: 17px;
}

.eeg-footer__social:hover {
	background: var(--eeg-c-brand);
	border-color: var(--eeg-c-brand);
	color: var(--eeg-c-surface);
}

.eeg-footer__bottom {
	padding: 22px 0 28px;
	border-top: 1px solid var(--eeg-footer-line);
	font-size: 13px;
	text-align: center;
}

@media (min-width: 1024px) {
	.eeg-footer__grid {
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(0, 1.4fr);
	}
}

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

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

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

.eeg-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(--eeg-space-hero) var(--eeg-space-hero-bottom);
}

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

.eeg-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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.eeg-story__bg {
	opacity: 0.32;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.eeg-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. */
.eeg-pagehero--plain {
	background: linear-gradient(150deg, var(--eeg-c-ink) 0%, var(--eeg-c-ink-brand) 44%, var(--eeg-c-brand) 100%);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Panah select bawaan berbeda tiap sistem, jadi tingginya disamakan di sini. */
.eeg-field__input--select {
	min-height: 50px;
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--eeg-c-nav) 50%), linear-gradient(135deg, var(--eeg-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. */
.eeg-form .eeg-btn--outline {
	background: var(--eeg-c-surface);
}

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

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

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

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

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

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

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

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

.eeg-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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.eeg-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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.eeg-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(--eeg-line-base);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.eeg-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(--eeg-on-dark-line);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.eeg-entry__meta {
	margin-bottom: 20px;
	font-size: 12.5px;
	color: var(--eeg-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. */
.eeg-entry__content {
	max-width: 72ch;
	font-size: 16px;
	line-height: 1.85;
	color: var(--eeg-c-nav);
}

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

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

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

.eeg-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(--eeg-c-ink);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.eeg-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;
}

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

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

.eeg-search--light .eeg-search__input:focus {
	border-color: var(--eeg-c-brand);
	box-shadow: var(--eeg-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. */
.eeg-katalog-bar {
	position: sticky;
	top: var(--eeg-header-h);
	z-index: 40;
	background: var(--eeg-c-surface);
	border-block: 1px solid var(--eeg-line-soft);
}

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

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

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

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

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

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

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

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

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

.eeg-chip2 {
	display: flex;
	flex: none;
	gap: 8px;
	align-items: center;
	min-height: 38px;
	padding: 0 15px;
	color: var(--eeg-c-muted);
	border-radius: var(--eeg-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;
}

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

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

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

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

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

.eeg-sort__button {
	display: flex;
	gap: 9px;
	align-items: center;
	min-height: 42px;
	padding: 0 16px;
	background: var(--eeg-c-surface);
	color: var(--eeg-c-ink);
	border: 1px solid var(--eeg-line-mid);
	border-radius: var(--eeg-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;
}

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

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

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

.eeg-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(--eeg-c-surface);
	border: 1px solid var(--eeg-line-base);
	border-radius: var(--eeg-radius-xl);
	box-shadow: var(--eeg-shadow-float-small);
}

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

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

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

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

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

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

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

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

.eeg-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. */
.eeg-produk {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--eeg-c-surface);
	border-radius: var(--eeg-radius-hero);
	box-shadow: var(--eeg-shadow-card);
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}

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

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

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

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

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

.eeg-produk__tag {
	position: absolute;
	left: 13px;
	top: 13px;
	padding: 7px 12px;
	background: var(--eeg-c-surface);
	color: var(--eeg-c-brand);
	border-radius: var(--eeg-radius-pill);
	font-family: var(--eeg-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. */
.eeg-produk__flag {
	position: absolute;
	right: 13px;
	top: 13px;
	padding: 7px 12px;
	background: var(--eeg-c-accent);
	color: var(--eeg-c-ink);
	border-radius: var(--eeg-radius-pill);
	font-family: var(--eeg-font-mono);
	font-size: 9px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

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

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

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

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

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

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

.eeg-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(--eeg-line-base);
}

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

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

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

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

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

.eeg-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. */
.eeg-produk__harga-angka--kontak {
	font-size: 16px;
	letter-spacing: -0.015em;
	color: var(--eeg-c-brand);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.eeg-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) {
	.eeg-produk-galeri {
		position: sticky;
		top: calc(var(--eeg-header-h) + 24px);
		align-self: flex-start;
	}
}

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

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

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

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

.eeg-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. */
.eeg-produk-galeri__thumb {
	display: block;
	width: 78px;
	height: 62px;
	overflow: hidden;
	background: var(--eeg-c-frame);
	border-radius: var(--eeg-radius-lg);
	box-shadow: inset 0 0 0 1px var(--eeg-line-base);
	transition: box-shadow 0.2s ease;
}

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

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

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

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

.eeg-produk-panel__kicker {
	display: inline-flex;
	align-items: center;
	padding: 7px 13px;
	background: var(--eeg-c-brand-soft);
	color: var(--eeg-c-brand);
	border-radius: var(--eeg-radius-pill);
	font-family: var(--eeg-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;
}

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

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

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

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

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

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

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

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

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

.eeg-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. */
.eeg-produk-panel__harga-angka--kontak {
	font-size: clamp(22px, 2.3vw, 28px);
	letter-spacing: -0.02em;
	color: var(--eeg-c-brand);
}

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

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

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

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

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

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

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

.eeg-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(--eeg-line-base);
}

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

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

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

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

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

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

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

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

.eeg-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. */
.eeg-terkait__rail {
	--eeg-rail-start: max(var(--eeg-layout-gutter), calc((100% - var(--eeg-layout-content)) / 2));
	--eeg-rail-inner: min(calc(100vw - 2 * var(--eeg-layout-gutter)), var(--eeg-layout-content));

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

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

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

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

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

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

.eeg-produk--rail .eeg-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. */
.eeg-produk__harga-baris {
	margin-bottom: auto;
	font-size: 13px;
	color: var(--eeg-c-muted);
}

.eeg-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. */
.eeg-produk-bar {
	display: none;
}

@media (max-width: 860px) {
	.eeg-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(--eeg-layout-gutter-tight);
		padding-bottom: calc(12px + env(safe-area-inset-bottom));
		background: var(--eeg-c-surface);
		border-top: 1px solid var(--eeg-line-base);
		box-shadow: var(--eeg-shadow-panel);
	}

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

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

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

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

	.eeg-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;
	}

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

	.eeg-produk-bar .eeg-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 .eeg-footer {
		padding-bottom: 76px;
	}
}

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

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

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

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

	.eeg-produk-panel__harga,
	.eeg-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.
   ------------------------------------------------------------------------- */
.eeg-servicehero {
	align-items: center;
}

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

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

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

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

.eeg-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. */
.eeg-servicehero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	overflow: hidden;
	background: var(--eeg-on-dark-line);
	border-radius: var(--eeg-radius-xxl);
}

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

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

.eeg-servicehero__fact small {
	font-family: var(--eeg-font-mono);
	font-size: 9px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--eeg-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. */
.eeg-scopes__rail {
	--eeg-rail-start: max(var(--eeg-layout-gutter), calc((100% - var(--eeg-layout-content)) / 2));
	--eeg-rail-inner: min(calc(100vw - 2 * var(--eeg-layout-gutter)), var(--eeg-layout-content));

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.eeg-other__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.eeg-other__thumb {
	position: absolute;
	inset: 0;
	transition: transform 0.4s ease;
}

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

.eeg-other:hover .eeg-other__thumb {
	transform: scale(1.05);
}

.eeg-other__badge {
	position: absolute;
	left: 12px;
	top: 12px;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	background: var(--eeg-c-surface);
	color: var(--eeg-c-brand);
	border-radius: var(--eeg-radius-md);
}

.eeg-other__badge .eeg-icon {
	font-size: 19px;
}

.eeg-other__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding: 20px 20px 22px;
}

.eeg-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. */
.eeg-other__link::after {
	content: '';
	position: absolute;
	inset: 0;
}

.eeg-other:hover .eeg-other__title {
	color: var(--eeg-c-brand);
}

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

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

.eeg-other__more .eeg-icon {
	font-size: 14px;
}

.eeg-other__more--soon {
	font-family: var(--eeg-font-mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--eeg-c-hint);
}

@media (min-width: 800px) {
	.eeg-scope {
		flex-basis: calc((var(--eeg-rail-inner) - 18px) / 2.5);
	}
}

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

/* -------------------------------------------------------------------------
   35. Halaman depan Exact Global: slider hero
   Teks semua slide ditumpuk di satu sel grid, jadi tinggi hero mengikuti slide
   terpanjang dan tidak melompat saat slide berganti.
   ------------------------------------------------------------------------- */
.eeg-slider {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, var(--eeg-c-surface-blue) 0%, var(--eeg-c-surface) 100%);
}

.eeg-slider__glow {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.eeg-slider__glow--sky {
	top: -260px;
	right: -220px;
	width: 760px;
	height: 760px;
	background: radial-gradient(circle, var(--eeg-glow-sky), var(--eeg-glow-sky-clear) 65%);
}

.eeg-slider__glow--brand {
	right: 24%;
	bottom: -320px;
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, var(--eeg-glow-brand), var(--eeg-glow-brand-clear) 65%);
}

.eeg-slider__dots {
	position: absolute;
	top: 96px;
	left: -24px;
	width: 180px;
	height: 240px;
	background-image: radial-gradient(var(--eeg-c-faint) 1.3px, transparent 1.4px);
	background-size: 14px 14px;
	opacity: 0.8;
	pointer-events: none;
}

.eeg-slider__inner {
	position: relative;
	padding-block: clamp(40px, 6vw, 72px) clamp(32px, 4vw, 48px);
}

.eeg-slider__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
	gap: clamp(48px, 5vw, 72px);
	align-items: center;
}

.eeg-slider__texts {
	display: grid;
}

.eeg-slider__text {
	grid-area: 1 / 1;
	align-self: center;
	opacity: 0;
	transform: translateY(18px);
	pointer-events: none;
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.eeg-slider__text.is-active {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.eeg-slider__title {
	font-size: clamp(38px, 5.4vw, 66px);
	font-weight: 600;
	line-height: 1.04;
	letter-spacing: -0.04em;
	color: var(--eeg-c-ink);
	text-wrap: balance;
}

.eeg-slider__accent {
	background: linear-gradient(90deg, var(--eeg-c-brand), var(--eeg-c-accent));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.eeg-slider__lead {
	max-width: 500px;
	margin: 24px 0 36px;
	font-size: clamp(16px, 1.3vw, 18px);
	line-height: 1.65;
	color: var(--eeg-c-body);
	text-wrap: pretty;
}

.eeg-slider__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.eeg-slider__visual {
	position: relative;
	justify-self: center;
	width: 100%;
	max-width: 540px;
	aspect-ratio: 1 / 1.04;
}

.eeg-slider__circle {
	position: absolute;
	top: -6%;
	right: -8%;
	width: 70%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: linear-gradient(160deg, var(--eeg-c-sky-soft), var(--eeg-glow-sky-soft-clear));
}

.eeg-slider__media {
	position: absolute;
	inset: 0;
	opacity: 0;
	transform: scale(0.97);
	pointer-events: none;
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.eeg-slider__media.is-active {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.eeg-slider__frame {
	position: absolute;
	inset: 0 0 0 14%;
	overflow: hidden;
	background: var(--eeg-c-frame);
	border-radius: var(--eeg-radius-media);
	box-shadow: var(--eeg-shadow-media);
}

.eeg-slider__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.eeg-slider__card {
	position: absolute;
	bottom: 9%;
	left: 0;
	width: min(64%, 252px);
	overflow: hidden;
	background: var(--eeg-c-surface);
	border-radius: var(--eeg-radius-xxxl);
	box-shadow: var(--eeg-shadow-lift);
}

.eeg-slider__card-head {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 14px 16px;
	background: linear-gradient(135deg, var(--eeg-c-brand), var(--eeg-c-accent));
	color: var(--eeg-c-surface);
}

.eeg-slider__card-icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 38px;
	height: 38px;
	background: var(--eeg-glass-bubble);
	border-radius: 50%;
}

.eeg-slider__card-icon .eeg-icon {
	font-size: 18px;
}

.eeg-slider__card-name {
	min-width: 0;
}

.eeg-slider__card-brand {
	display: block;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}

.eeg-slider__card-sub {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	line-height: 1.3;
}

.eeg-slider__card-body {
	padding: 14px 16px 18px;
}

.eeg-slider__card-label {
	margin-bottom: 12px;
	font-size: 12px;
	font-weight: 600;
	color: var(--eeg-c-meta);
}

.eeg-slider__apps {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.eeg-slider__app {
	display: flex;
	gap: 10px;
	align-items: center;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--eeg-c-ink);
}

.eeg-slider__app-icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 26px;
	height: 26px;
	background: var(--eeg-c-brand-soft);
	border-radius: 50%;
	color: var(--eeg-c-brand);
}

.eeg-slider__app-icon .eeg-icon {
	font-size: 13px;
}

.eeg-slider__controls {
	display: flex;
	gap: clamp(20px, 3vw, 40px);
	align-items: center;
	margin-top: clamp(40px, 5vw, 64px);
}

/* Kontrol baru dimunculkan app.js. Tanpa JavaScript tombolnya tidak berguna. */
.eeg-slider__controls[hidden] {
	display: none;
}

.eeg-slider__tabs {
	flex: 1;
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	gap: clamp(12px, 2vw, 24px);
	min-width: 0;
}

.eeg-slider__tab {
	min-width: 0;
	padding: 0;
	background: none;
	border: 0;
	text-align: left;
	cursor: pointer;
}

.eeg-slider__bar {
	position: relative;
	display: block;
	height: 3px;
	overflow: hidden;
	background: var(--eeg-c-border-strong);
	border-radius: 3px;
}

.eeg-slider__fill {
	position: absolute;
	inset: 0;
	background: var(--eeg-c-brand);
	transform: scaleX(0);
	transform-origin: left center;
}

/* Lama animasi ini juga lama tampil tiap slide: app.js pindah ke slide
   berikutnya begitu animasinya selesai. */
.eeg-slider__tab.is-active .eeg-slider__fill {
	animation: eeg-progress 7s linear forwards;
}

.eeg-slider.is-paused .eeg-slider__fill {
	animation-play-state: paused;
}

/* Tanpa putaran otomatis, batang slide aktif langsung penuh sebagai penanda. */
.eeg-slider.is-static .eeg-slider__tab.is-active .eeg-slider__fill {
	animation: none;
	transform: none;
}

.eeg-slider__tab-text {
	display: flex;
	gap: 10px;
	align-items: baseline;
	min-width: 0;
	margin-top: 14px;
}

.eeg-slider__tab-no {
	font-size: 13px;
	font-weight: 700;
	color: var(--eeg-c-meta);
}

.eeg-slider__tab-label {
	overflow: hidden;
	font-size: 14px;
	font-weight: 600;
	color: var(--eeg-c-meta);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.eeg-slider__tab.is-active .eeg-slider__tab-no {
	color: var(--eeg-c-brand);
}

.eeg-slider__tab.is-active .eeg-slider__tab-label {
	color: var(--eeg-c-ink);
}

.eeg-slider__arrows {
	display: flex;
	flex: none;
	gap: 10px;
}

.eeg-slider__arrow {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	background: var(--eeg-c-surface);
	border: 1px solid var(--eeg-c-border-strong);
	border-radius: 50%;
	color: var(--eeg-c-ink);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.eeg-slider__arrow:hover {
	border-color: var(--eeg-c-brand);
}

.eeg-slider__arrow .eeg-icon {
	font-size: 18px;
}

.eeg-slider__arrow--next {
	background: var(--eeg-c-brand);
	border-color: var(--eeg-c-brand);
	color: var(--eeg-c-surface);
}

.eeg-slider__arrow--next:hover {
	background: var(--eeg-c-brand-dark);
	border-color: var(--eeg-c-brand-dark);
}

.eeg-slider__note {
	margin-top: 16px;
	font-size: 13px;
	color: var(--eeg-c-muted);
}

@keyframes eeg-progress {
	from {
		transform: scaleX(0);
	}

	to {
		transform: scaleX(1);
	}
}

/* -------------------------------------------------------------------------
   36. Halaman depan Exact Global: pita logo klien dan merek
   Isi pita dicetak dua kali dan digeser setengah lebarnya, jadi putarannya
   menyambung tanpa jeda.
   ------------------------------------------------------------------------- */
.eeg-marquee {
	position: relative;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, var(--eeg-c-ink) 10%, var(--eeg-c-ink) 90%, transparent);
	mask-image: linear-gradient(90deg, transparent, var(--eeg-c-ink) 10%, var(--eeg-c-ink) 90%, transparent);
}

.eeg-marquee__track {
	display: flex;
	width: max-content;
	animation: eeg-marquee 35s linear infinite;
}

.eeg-marquee:hover .eeg-marquee__track {
	animation-play-state: paused;
}

.eeg-marquee__list {
	display: flex;
	align-items: center;
}

.eeg-marquee__item {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
}

/* picture meneruskan ukuran kotak ke img, karena img memakai ukuran persen. */
.eeg-marquee__item picture {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.eeg-clients {
	padding-top: clamp(48px, 6vw, 72px);
}

.eeg-clients__title {
	margin-bottom: 28px;
	padding-inline: var(--eeg-layout-site-gutter);
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	color: var(--eeg-c-ink);
}

.eeg-marquee--clients .eeg-marquee__item {
	height: clamp(56px, 7vw, 80px);
	padding-inline: clamp(24px, 3.5vw, 48px);
}

.eeg-marquee--clients .eeg-marquee__img {
	display: block;
	width: auto;
	height: 100%;
	max-width: clamp(120px, 14vw, 180px);
	object-fit: contain;
}

.eeg-brands {
	padding-block: clamp(72px, 9vw, 120px);
}

.eeg-brands__title {
	margin: 0 auto clamp(32px, 4vw, 48px);
	padding-inline: var(--eeg-layout-site-gutter);
	text-align: center;
}

.eeg-marquee--brands {
	border-block: 1px solid var(--eeg-c-border);
	-webkit-mask-image: linear-gradient(90deg, transparent, var(--eeg-c-ink) 8%, var(--eeg-c-ink) 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, var(--eeg-c-ink) 8%, var(--eeg-c-ink) 92%, transparent);
}

.eeg-marquee--brands .eeg-marquee__track {
	animation-duration: 40s;
}

.eeg-marquee--brands .eeg-marquee__item {
	width: clamp(150px, 17vw, 230px);
	height: clamp(96px, 10vw, 128px);
	padding: clamp(20px, 2.4vw, 30px) clamp(20px, 2.6vw, 36px);
	border-right: 1px solid var(--eeg-c-border);
}

.eeg-marquee--brands .eeg-marquee__img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.eeg-marquee__item--short .eeg-marquee__img {
	max-height: 70%;
}

@keyframes eeg-marquee {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

/* -------------------------------------------------------------------------
   37. Halaman depan Exact Global: tentang dan tab visi misi
   ------------------------------------------------------------------------- */
.eeg-intro__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
	gap: clamp(48px, 6vw, 88px);
	align-items: center;
	padding-block: clamp(72px, 9vw, 120px);
}

.eeg-intro__visual {
	position: relative;
	justify-self: center;
	width: 100%;
	max-width: 520px;
	aspect-ratio: 1;
}

.eeg-intro__disc {
	position: absolute;
	inset: 6%;
	border-radius: 50%;
	background: linear-gradient(150deg, var(--eeg-c-accent) 0%, var(--eeg-c-brand) 58%, var(--eeg-c-ink-brand) 100%);
}

.eeg-intro__disc::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background-image: radial-gradient(var(--eeg-glass-dots) 1.2px, transparent 1.3px);
	background-size: 16px 16px;
}

.eeg-intro__frame {
	position: absolute;
	top: 0;
	right: 12%;
	bottom: 8%;
	left: 24%;
	overflow: hidden;
	background: var(--eeg-c-frame);
	border: 6px solid var(--eeg-c-surface);
	border-radius: var(--eeg-radius-panel);
	box-shadow: var(--eeg-shadow-lift-wide);
}

.eeg-intro__frame picture {
	display: block;
	height: 100%;
}

.eeg-intro__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.eeg-intro__badge {
	position: absolute;
	bottom: 18%;
	left: 0;
	display: flex;
	gap: 14px;
	align-items: center;
	max-width: 260px;
	padding: 16px 18px;
	background: var(--eeg-c-surface);
	border-radius: var(--eeg-radius-xxxl);
	box-shadow: var(--eeg-shadow-lift);
}

.eeg-intro__badge-icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 42px;
	height: 42px;
	background: var(--eeg-c-brand-soft);
	border-radius: 50%;
	color: var(--eeg-c-brand);
}

.eeg-intro__badge-icon .eeg-icon {
	font-size: 20px;
}

.eeg-intro__badge-title {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: var(--eeg-c-ink);
}

.eeg-intro__badge-text {
	display: block;
	margin-top: 3px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--eeg-c-meta);
}

.eeg-intro__body {
	min-width: 0;
}

.eeg-intro__title {
	margin-bottom: 20px;
}

/* Baris sertifikasi boleh digeser sendiri di layar sempit, jadi melebar
   sampai tepi layar lewat margin negatif setebal gutter. */
.eeg-intro__certs {
	display: flex;
	flex-wrap: nowrap;
	gap: 10px;
	margin: 0 calc(-1 * var(--eeg-layout-site-gutter)) 24px;
	padding: 0 var(--eeg-layout-site-gutter) 2px;
	overflow-x: auto;
	scrollbar-width: none;
}

.eeg-intro__certs::-webkit-scrollbar {
	display: none;
}

.eeg-intro__cert {
	display: flex;
	flex: none;
	gap: 10px;
	align-items: center;
	padding: 8px 14px 8px 8px;
	border: 1px solid var(--eeg-c-border);
	border-radius: var(--eeg-radius-pill);
	font-size: 13px;
	white-space: nowrap;
}

.eeg-intro__cert-icon {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	background: var(--eeg-c-brand-soft);
	border-radius: 50%;
	color: var(--eeg-c-brand);
}

.eeg-intro__cert-icon .eeg-icon {
	font-size: 15px;
}

.eeg-intro__cert-code {
	font-weight: 700;
	color: var(--eeg-c-ink);
}

.eeg-intro__cert-name {
	color: var(--eeg-c-meta);
}

.eeg-intro__lead {
	margin-bottom: 24px;
	font-size: 16px;
	line-height: 1.75;
	color: var(--eeg-c-body);
	text-wrap: pretty;
}

.eeg-intro__lead strong {
	color: var(--eeg-c-ink);
}

.eeg-intro__more {
	margin-bottom: 32px;
}

.eeg-intro__tabs {
	overflow: hidden;
	background: var(--eeg-c-surface);
	border: 1px solid var(--eeg-c-border);
	border-radius: var(--eeg-radius-hero);
}

.eeg-intro__tablist {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border-bottom: 1px solid var(--eeg-c-border-soft);
}

.eeg-intro__tab {
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	padding: 16px 8px;
	background: var(--eeg-c-surface);
	border: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--eeg-c-meta);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.eeg-intro__tab .eeg-icon {
	font-size: 16px;
}

.eeg-intro__tab[aria-selected='true'] {
	background: var(--eeg-c-surface-tint);
	color: var(--eeg-c-brand);
	box-shadow: inset 0 -2px 0 var(--eeg-c-brand);
}

.eeg-intro__panel {
	min-height: 120px;
	padding: 22px 24px 24px;
	font-size: 15px;
	line-height: 1.75;
	color: var(--eeg-c-ink);
	text-wrap: pretty;
}

/* -------------------------------------------------------------------------
   38. Halaman depan Exact Global: panel biru muda dan kartu solusi
   ------------------------------------------------------------------------- */
.eeg-bandwrap {
	padding-inline: clamp(0px, 2vw, 24px);
}

/* --eeg-band-pad dipakai ulang rail kartu solusi untuk menembus tepi panel. */
.eeg-band {
	--eeg-band-pad: clamp(24px, 5vw, 64px);
	position: relative;
	max-width: var(--eeg-layout-band);
	margin-inline: auto;
	padding: clamp(64px, 8vw, 104px) var(--eeg-band-pad);
	background: var(--eeg-c-surface-blue);
	border-radius: var(--eeg-radius-band);
}

.eeg-solutions {
	overflow: hidden;
}

.eeg-band__dots {
	position: absolute;
	top: 40px;
	right: -20px;
	width: 180px;
	height: 200px;
	background-image: radial-gradient(var(--eeg-c-faint) 1.3px, transparent 1.4px);
	background-size: 14px 14px;
	pointer-events: none;
}

.eeg-solutions__title {
	position: relative;
	margin: 0 auto clamp(40px, 5vw, 64px);
	text-align: center;
}

/* Layar sempit: rail geser selebar panel. Ruang di ujung kanan dibuat dari
   ::after, bukan padding-right, karena sebagian browser mengabaikannya. */
.eeg-solutions__grid {
	position: relative;
	display: flex;
	gap: 24px;
	margin-inline: calc(-1 * var(--eeg-band-pad));
	padding: 4px 0 12px var(--eeg-band-pad);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: var(--eeg-band-pad);
	scrollbar-width: none;
}

.eeg-solutions__grid::-webkit-scrollbar {
	display: none;
}

.eeg-solutions__grid::after {
	content: '';
	flex: 0 0 calc(var(--eeg-band-pad) - 24px);
}

.eeg-solution {
	position: relative;
	display: flex;
	flex: none;
	flex-direction: column;
	width: 82%;
	padding: 10px;
	background: var(--eeg-c-surface);
	border: 1px solid var(--eeg-c-border);
	border-radius: var(--eeg-radius-card);
	scroll-snap-align: start;
	transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.eeg-solution--link:hover {
	border-color: var(--eeg-c-border-hover);
	box-shadow: var(--eeg-shadow-card-blue);
	transform: translateY(-4px);
}

.eeg-solution__media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--eeg-c-frame);
	border-radius: var(--eeg-radius-xxl);
}

.eeg-solution__media picture {
	display: block;
	height: 100%;
}

.eeg-solution__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.eeg-solution__chip {
	position: absolute;
	top: 12px;
	left: 12px;
	display: flex;
	gap: 8px;
	align-items: center;
	padding: 6px 12px 6px 6px;
	background: var(--eeg-glass-chip);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border-radius: var(--eeg-radius-pill);
	font-size: 12px;
	font-weight: 700;
	color: var(--eeg-c-ink);
	pointer-events: none;
}

.eeg-solution__chip-icon {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	background: var(--eeg-c-brand);
	border-radius: 50%;
	color: var(--eeg-c-surface);
}

.eeg-solution__chip-icon .eeg-icon {
	font-size: 14px;
}

.eeg-solution__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 20px 14px 14px;
}

.eeg-solution__head {
	display: flex;
	gap: 16px;
	justify-content: space-between;
	align-items: flex-start;
}

.eeg-solution__title {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: var(--eeg-c-ink);
}

/* Tautan judul melebar menutupi kartu, supaya seluruh kartu bisa diklik. */
.eeg-solution__link::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.eeg-solution__arrow {
	display: grid;
	flex: none;
	place-items: center;
	width: 38px;
	height: 38px;
	background: var(--eeg-c-brand-mist);
	border-radius: 50%;
	color: var(--eeg-c-brand);
}

.eeg-solution__arrow .eeg-icon {
	font-size: 16px;
}

.eeg-solution__desc {
	flex: 1;
	margin: 8px 0 18px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--eeg-c-body);
}

.eeg-solution__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding-top: 16px;
	border-top: 1px dashed var(--eeg-c-border);
}

.eeg-solution__tag {
	padding: 6px 10px;
	background: var(--eeg-c-brand-mist);
	border-radius: var(--eeg-radius-sm);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--eeg-c-brand);
}

@media (min-width: 768px) {
	.eeg-solutions__grid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		margin-inline: 0;
		padding: 0;
		overflow: visible;
	}

	.eeg-solutions__grid::after {
		content: none;
	}

	.eeg-solution {
		width: auto;
	}
}

/* -------------------------------------------------------------------------
   39. Halaman depan Exact Global: pertanyaan umum
   ------------------------------------------------------------------------- */
.eeg-ask {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(40px, 5vw, 72px);
	align-items: start;
}

.eeg-ask__card {
	position: relative;
	margin-top: 36px;
	padding: 32px;
	overflow: hidden;
	background: linear-gradient(145deg, var(--eeg-c-brand), var(--eeg-c-ink-brand));
	border-radius: var(--eeg-radius-card);
	color: var(--eeg-c-surface);
}

.eeg-ask__card-dots {
	position: absolute;
	right: -30px;
	bottom: -30px;
	width: 180px;
	height: 180px;
	background-image: radial-gradient(var(--eeg-glass-dots-soft) 1.2px, transparent 1.3px);
	background-size: 14px 14px;
	pointer-events: none;
}

.eeg-ask__card-icon {
	position: relative;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	background: var(--eeg-glass-bubble-soft);
	border-radius: var(--eeg-radius-xl);
}

.eeg-ask__card-icon .eeg-icon {
	font-size: 22px;
}

.eeg-ask__card-title {
	position: relative;
	margin: 20px 0 10px;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--eeg-c-surface);
}

.eeg-ask__card-text {
	position: relative;
	margin-bottom: 24px;
	font-size: 15px;
	line-height: 1.65;
}

.eeg-ask__cta {
	position: relative;
}

.eeg-ask__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.eeg-qa {
	background: var(--eeg-c-surface);
	border: 1px solid var(--eeg-c-border);
	border-radius: var(--eeg-radius-xxxl);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.eeg-qa[open] {
	border-color: var(--eeg-c-border-hover);
	box-shadow: var(--eeg-shadow-faq);
}

.eeg-qa__question {
	display: flex;
	gap: 20px;
	justify-content: space-between;
	align-items: center;
	padding: 22px 24px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--eeg-c-ink);
	list-style: none;
	cursor: pointer;
}

.eeg-qa__question::-webkit-details-marker {
	display: none;
}

.eeg-qa__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 34px;
	height: 34px;
	background: var(--eeg-c-brand-mist);
	border-radius: 50%;
	color: var(--eeg-c-brand);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.eeg-qa__icon .eeg-icon {
	font-size: 16px;
}

.eeg-qa__minus,
.eeg-qa[open] .eeg-qa__plus {
	display: none;
}

.eeg-qa[open] .eeg-qa__minus {
	display: inline-block;
}

.eeg-qa[open] .eeg-qa__icon {
	background: var(--eeg-c-brand);
	color: var(--eeg-c-surface);
}

.eeg-qa__answer {
	max-width: 600px;
	padding: 0 24px 24px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--eeg-c-body);
}

@media (min-width: 1024px) {
	.eeg-ask {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}
}

/* -------------------------------------------------------------------------
   40. Halaman depan Exact Global: lokasi
   ------------------------------------------------------------------------- */
.eeg-findus {
	padding-top: clamp(72px, 9vw, 120px);
}

.eeg-findus__head,
.eeg-news__head {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	justify-content: space-between;
	align-items: flex-end;
}

.eeg-findus__head {
	margin-bottom: 32px;
}

.eeg-findus__directions {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	font-size: 15px;
	font-weight: 700;
	color: var(--eeg-c-brand);
}

.eeg-findus__directions:hover {
	color: var(--eeg-c-brand-dark);
}

.eeg-findus__box {
	position: relative;
	overflow: hidden;
	background: var(--eeg-c-frame);
	border: 1px solid var(--eeg-c-border);
	border-radius: var(--eeg-radius-panel);
}

.eeg-findus__map {
	display: block;
	width: 100%;
	height: clamp(340px, 45vw, 520px);
	border: 0;
}

.eeg-findus__card {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 28px;
	background: var(--eeg-c-surface);
}

.eeg-findus__row {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

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

.eeg-findus__icon .eeg-icon {
	font-size: 18px;
}

.eeg-findus__text {
	min-width: 0;
}

.eeg-findus__label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var(--eeg-c-ink);
}

.eeg-findus__value {
	display: block;
	margin-top: 3px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--eeg-c-body);
}

a.eeg-findus__value:hover {
	color: var(--eeg-c-brand);
}

/* Di layar lebar kartu melayang di atas peta. Tanpa peta kartu tetap di
   alurnya, supaya kotaknya tidak kosong. */
@media (min-width: 1024px) {
	.eeg-findus__box:not(.eeg-findus__box--nomap) .eeg-findus__card {
		position: absolute;
		top: 24px;
		left: 24px;
		width: 380px;
		border-radius: var(--eeg-radius-float);
		box-shadow: var(--eeg-shadow-map-card);
	}
}

/* -------------------------------------------------------------------------
   41. Halaman depan Exact Global: artikel terbaru
   ------------------------------------------------------------------------- */
.eeg-news {
	padding-block: clamp(72px, 9vw, 120px);
}

.eeg-news__head {
	margin-bottom: 40px;
}

.eeg-news__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 28px;
}

.eeg-newscard {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.eeg-newscard__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--eeg-c-brand-mist);
	border-radius: var(--eeg-radius-hero);
}

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

.eeg-newscard__media .eeg-placeholder {
	width: 100%;
	height: 100%;
}

.eeg-newscard__tag {
	position: absolute;
	top: 14px;
	left: 14px;
	padding: 7px 12px;
	background: var(--eeg-c-surface);
	border-radius: var(--eeg-radius-pill);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--eeg-c-brand);
	pointer-events: none;
}

.eeg-newscard__date {
	font-size: 13px;
	font-weight: 500;
	color: var(--eeg-c-meta);
}

.eeg-newscard__title {
	margin-top: -8px;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -0.01em;
	color: var(--eeg-c-ink);
	text-wrap: pretty;
	transition: color 0.2s ease;
}

.eeg-newscard__link::after {
	content: '';
	position: absolute;
	inset: 0;
}

.eeg-newscard:hover .eeg-newscard__title {
	color: var(--eeg-c-brand);
}

/* -------------------------------------------------------------------------
   42. Halaman dalam Exact Global: hero bersama dan hero About Us
   .eeg-subhero adalah latar, pendar, titik, judul, dan kalimat pembuka yang
   sama di hero About Us dan Contact Us. Susunan isinya diatur blok masing
   masing halaman.
   ------------------------------------------------------------------------- */
.eeg-subhero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, var(--eeg-c-surface-blue) 0%, var(--eeg-c-surface) 100%);
}

.eeg-subhero__glow {
	position: absolute;
	top: -280px;
	right: -240px;
	width: 760px;
	height: 760px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--eeg-glow-sky), var(--eeg-glow-sky-clear) 65%);
	pointer-events: none;
}

.eeg-subhero__dots {
	position: absolute;
	top: 96px;
	left: -24px;
	width: 180px;
	height: 240px;
	background-image: radial-gradient(var(--eeg-c-faint) 1.3px, transparent 1.4px);
	background-size: 14px 14px;
	opacity: 0.8;
	pointer-events: none;
}

.eeg-subhero .eeg-crumbs {
	margin-bottom: 20px;
}

.eeg-subhero__title {
	font-size: clamp(34px, 4.4vw, 54px);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.04em;
	color: var(--eeg-c-ink);
	text-wrap: balance;
}

.eeg-subhero__accent {
	background: linear-gradient(90deg, var(--eeg-c-brand), var(--eeg-c-accent));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.eeg-subhero__lead {
	font-size: clamp(15px, 1.2vw, 17px);
	line-height: 1.75;
	color: var(--eeg-c-body);
	text-wrap: pretty;
}

.eeg-abouthero__inner {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
	gap: clamp(48px, 6vw, 80px);
	align-items: center;
	padding-block: clamp(32px, 5vw, 64px) clamp(48px, 6vw, 80px);
}

.eeg-abouthero__body {
	min-width: 0;
}

.eeg-abouthero__lead {
	max-width: 560px;
	margin: 24px 0 28px;
}

.eeg-abouthero__lead strong {
	color: var(--eeg-c-ink);
}

.eeg-abouthero__certs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.eeg-abouthero__cert {
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 8px 14px 8px 8px;
	background: var(--eeg-c-surface);
	border: 1px solid var(--eeg-c-border);
	border-radius: var(--eeg-radius-pill);
	font-size: 13px;
}

.eeg-abouthero__cert-icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 30px;
	height: 30px;
	background: var(--eeg-c-brand-soft);
	border-radius: 50%;
	color: var(--eeg-c-brand);
}

.eeg-abouthero__cert-icon .eeg-icon {
	font-size: 15px;
}

.eeg-abouthero__cert-code {
	font-weight: 700;
	color: var(--eeg-c-ink);
}

.eeg-abouthero__cert-name {
	color: var(--eeg-c-meta);
}

/* Foto dan kartu kota ditumpuk di atas satu kotak 5:4, jadi posisinya
   memakai persen dan ikut mengecil bersama kotaknya. */
.eeg-abouthero__visual {
	position: relative;
	justify-self: center;
	width: 100%;
	max-width: 520px;
	aspect-ratio: 5 / 4;
}

.eeg-abouthero__disc {
	position: absolute;
	top: -6%;
	right: -6%;
	width: 62%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: linear-gradient(160deg, var(--eeg-c-sky-soft), var(--eeg-glow-sky-soft-clear));
}

.eeg-abouthero__photo {
	position: absolute;
	overflow: hidden;
	background: var(--eeg-c-frame);
}

.eeg-abouthero__photo--main {
	top: 0;
	right: 0;
	width: 78%;
	height: 72%;
	border-radius: var(--eeg-radius-panel);
	box-shadow: var(--eeg-shadow-media);
}

.eeg-abouthero__photo--inset {
	bottom: 0;
	left: 0;
	width: 56%;
	height: 52%;
	border: 6px solid var(--eeg-c-surface);
	border-radius: var(--eeg-radius-card);
	box-shadow: var(--eeg-shadow-lift);
}

.eeg-abouthero__photo picture {
	display: block;
	height: 100%;
}

.eeg-abouthero__photo .eeg-placeholder {
	height: 100%;
}

.eeg-abouthero__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.eeg-abouthero__place {
	position: absolute;
	right: 4%;
	bottom: 10%;
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 14px 16px;
	background: var(--eeg-c-surface);
	border-radius: var(--eeg-radius-xxl);
	box-shadow: var(--eeg-shadow-lift);
}

.eeg-abouthero__place-icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 38px;
	height: 38px;
	background: var(--eeg-c-brand-soft);
	border-radius: 50%;
	color: var(--eeg-c-brand);
}

.eeg-abouthero__place-icon .eeg-icon {
	font-size: 18px;
}

.eeg-abouthero__place-title {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var(--eeg-c-ink);
}

.eeg-abouthero__place-text {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: var(--eeg-c-meta);
}

/* -------------------------------------------------------------------------
   43. Halaman About Us: kemampuan, layanan pendukung, visi dan misi
   Section kemampuan memakai panel biru muda milik halaman depan (blok 38),
   dengan jarak atas bawah lebih rapat seperti di mockup.
   ------------------------------------------------------------------------- */
.eeg-capabilities {
	padding-block: clamp(44px, 5vw, 72px);
}

.eeg-capabilities__top {
	display: flex;
	flex-direction: column;
	gap: clamp(24px, 3vw, 36px);
	align-items: center;
}

.eeg-capabilities__head {
	max-width: 560px;
	text-align: center;
}

.eeg-capabilities__lead {
	max-width: 460px;
	margin: 14px auto 0;
	font-size: 15px;
	line-height: 1.75;
	color: var(--eeg-c-body);
	text-wrap: pretty;
}

.eeg-capabilities__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	max-width: 1000px;
}

.eeg-capabilities__chip {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	padding: 9px 14px 9px 10px;
	background: var(--eeg-c-surface);
	border: 1px solid var(--eeg-c-border);
	border-radius: var(--eeg-radius-pill);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--eeg-c-ink);
}

.eeg-capabilities__chip .eeg-icon {
	flex: none;
	font-size: 16px;
	color: var(--eeg-c-brand);
}

.eeg-capabilities__support {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 24px;
	margin-top: clamp(32px, 4vw, 48px);
	padding-top: clamp(24px, 3vw, 32px);
	border-top: 1px solid var(--eeg-c-border-strong);
}

.eeg-support {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.eeg-support__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 38px;
	height: 38px;
	background: var(--eeg-c-brand);
	border-radius: var(--eeg-radius-md);
	color: var(--eeg-c-surface);
}

.eeg-support__icon .eeg-icon {
	font-size: 17px;
}

.eeg-support__title {
	margin-bottom: 4px;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--eeg-c-ink);
}

.eeg-support__text {
	font-size: 14px;
	line-height: 1.6;
	color: var(--eeg-c-body);
}

.eeg-vision {
	padding-top: clamp(16px, 2vw, 24px);
}

.eeg-vision__panel {
	position: relative;
	overflow: hidden;
	max-width: var(--eeg-layout-band);
	margin-inline: auto;
	padding: clamp(44px, 5vw, 72px) clamp(24px, 5vw, 64px);
	background: linear-gradient(145deg, var(--eeg-c-brand) 0%, var(--eeg-c-ink-brand) 70%, var(--eeg-c-brand-deep) 100%);
	border-radius: var(--eeg-radius-band);
	color: var(--eeg-c-surface);
}

.eeg-vision__dots {
	position: absolute;
	top: -30px;
	right: -30px;
	width: 260px;
	height: 260px;
	background-image: radial-gradient(var(--eeg-glass-dots-faint) 1.2px, transparent 1.3px);
	background-size: 16px 16px;
	pointer-events: none;
}

.eeg-vision__glow {
	position: absolute;
	bottom: -320px;
	left: -200px;
	width: 560px;
	height: 560px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--eeg-glow-sky-strong), var(--eeg-glow-sky-clear) 65%);
	pointer-events: none;
}

.eeg-vision__title {
	position: relative;
	margin-bottom: clamp(32px, 4vw, 48px);
	color: var(--eeg-c-surface);
}

.eeg-vision__grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
	gap: 20px;
}

.eeg-vision__card {
	padding: clamp(24px, 3vw, 36px);
	background: var(--eeg-on-brand-card);
	border: 1px solid var(--eeg-on-dark-line);
	border-radius: var(--eeg-radius-card);
}

.eeg-vision__head {
	display: flex;
	gap: 12px;
	align-items: center;
}

.eeg-vision__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 44px;
	height: 44px;
	background: var(--eeg-c-surface);
	border-radius: var(--eeg-radius-lg);
	color: var(--eeg-c-brand);
}

.eeg-vision__icon .eeg-icon {
	font-size: 20px;
}

.eeg-vision__label {
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.eeg-vision__text {
	margin-top: 20px;
	font-size: 16px;
	line-height: 1.75;
	text-wrap: pretty;
}

.eeg-vision__list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 20px;
}

.eeg-vision__item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: 16px;
	line-height: 1.7;
	text-wrap: pretty;
}

.eeg-vision__check {
	display: grid;
	flex: none;
	place-items: center;
	width: 22px;
	height: 22px;
	margin-top: 3px;
	background: var(--eeg-on-brand-fill);
	border-radius: 50%;
}

.eeg-vision__check .eeg-icon {
	font-size: 12px;
}

/* -------------------------------------------------------------------------
   44. Halaman About Us: pita klien dan pengalaman perusahaan
   Pita logo memakai .eeg-marquee--clients dari blok 36. Tabel proyek tetap
   tabel di layar lebar; di bawah 1024px tiap baris ditumpuk jadi kartu.
   ------------------------------------------------------------------------- */
.eeg-ourclients {
	padding-top: clamp(56px, 7vw, 88px);
}

.eeg-ourclients__title {
	margin-bottom: clamp(28px, 4vw, 40px);
	padding-inline: var(--eeg-layout-site-gutter);
	text-align: center;
}

.eeg-experience {
	padding-block: clamp(56px, 7vw, 96px);
}

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

.eeg-experience__intro {
	max-width: 560px;
}

.eeg-experience__lead {
	margin-top: 12px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--eeg-c-body);
	text-wrap: pretty;
}

.eeg-experience__box {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	overflow: hidden;
	background: var(--eeg-c-surface);
	border: 1px solid var(--eeg-c-border);
	border-radius: var(--eeg-radius-card);
}

.eeg-experience__years {
	display: flex;
	gap: 4px;
	padding: 10px;
	overflow-x: auto;
	background: var(--eeg-c-surface-alt);
	border-bottom: 1px solid var(--eeg-c-border);
	scrollbar-width: none;
}

.eeg-experience__years::-webkit-scrollbar {
	display: none;
}

.eeg-experience__year {
	display: flex;
	flex: none;
	gap: 14px;
	align-items: center;
	justify-content: space-between;
	padding: 12px 14px;
	background: transparent;
	border: 0;
	border-radius: var(--eeg-radius-xl);
	color: var(--eeg-c-ink);
	text-align: left;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.eeg-experience__year:hover {
	color: var(--eeg-c-brand);
}

.eeg-experience__year[aria-selected='true'] {
	background: var(--eeg-c-brand);
	color: var(--eeg-c-surface);
}

.eeg-experience__year-label {
	font-family: var(--eeg-font-head);
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

.eeg-experience__year-count {
	font-size: 12px;
	font-weight: 600;
	color: var(--eeg-c-meta);
	white-space: nowrap;
}

.eeg-experience__year[aria-selected='true'] .eeg-experience__year-count {
	color: var(--eeg-on-brand-text);
}

.eeg-experience__panels {
	min-width: 0;
}

.eeg-experience__table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
}

.eeg-experience__table th,
.eeg-experience__table td {
	padding: 0;
	vertical-align: baseline;
}

.eeg-experience__table tbody tr {
	border-bottom: 1px solid var(--eeg-c-border-soft);
	transition: background-color 0.2s ease;
}

.eeg-experience__table tbody tr:last-child {
	border-bottom: 0;
}

.eeg-experience__table tbody tr:hover {
	background: var(--eeg-c-surface-alt);
}

.eeg-experience__client {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.45;
	color: var(--eeg-c-brand);
}

.eeg-experience__work {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--eeg-c-ink);
	text-wrap: pretty;
}

.eeg-experience__loc {
	display: flex;
	gap: 6px;
	align-items: center;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--eeg-c-meta);
}

.eeg-experience__loc .eeg-icon {
	flex: none;
	font-size: 13px;
	color: var(--eeg-c-hint);
}

.eeg-experience__more {
	padding: 14px 24px;
	border-top: 1px solid var(--eeg-c-border-soft);
	font-size: 13px;
	font-weight: 600;
	color: var(--eeg-c-meta);
}

@media (max-width: 1023px) {
	.eeg-experience__table,
	.eeg-experience__table tbody,
	.eeg-experience__table th,
	.eeg-experience__table td {
		display: block;
	}

	.eeg-experience__table thead {
		display: none;
	}

	.eeg-experience__table tbody tr {
		display: grid;
		gap: 4px;
		padding: 16px 18px;
	}

	.eeg-experience__more {
		padding-inline: 18px;
	}
}

@media (min-width: 1024px) {
	.eeg-experience__box {
		grid-template-columns: 220px minmax(0, 1fr);
	}

	.eeg-experience__years {
		flex-direction: column;
		overflow-x: visible;
		border-right: 1px solid var(--eeg-c-border);
		border-bottom: 0;
	}

	/* Lebar kolom mengikuti perbandingan 1.1 : 1.9 : 0.8 di mockup. */
	.eeg-experience__table {
		table-layout: fixed;
	}

	.eeg-experience__table thead th {
		padding: 14px 10px;
		border-bottom: 1px solid var(--eeg-c-border-soft);
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--eeg-c-meta);
	}

	.eeg-experience__table thead th:nth-child(1) {
		width: 29%;
	}

	.eeg-experience__table thead th:nth-child(2) {
		width: 50%;
	}

	.eeg-experience__table tbody th,
	.eeg-experience__table tbody td {
		padding: 16px 10px;
	}

	.eeg-experience__table tr > :first-child {
		padding-left: 24px;
	}

	.eeg-experience__table tr > :last-child {
		padding-right: 24px;
	}
}

/* -------------------------------------------------------------------------
   45. Halaman Contact Us: hero dengan kartu kontak, kartu alamat, dan peta
   Latar, judul, dan kalimat pembuka hero dari .eeg-subhero di blok 42.
   ------------------------------------------------------------------------- */
.eeg-contacthero__inner {
	position: relative;
	display: flex;
	justify-content: center;
	padding-block: clamp(48px, 7vw, 96px) clamp(56px, 7vw, 96px);
}

.eeg-contacthero__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 720px;
	text-align: center;
}

.eeg-contacthero .eeg-crumbs__list {
	justify-content: center;
}

.eeg-contacthero__lead {
	max-width: 520px;
	margin: 20px auto 32px;
}

.eeg-contacthero__reach {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 265px), 1fr));
	gap: 12px;
	width: 100%;
	max-width: 600px;
	text-align: left;
}

.eeg-reach {
	display: flex;
	gap: 14px;
	align-items: center;
	height: 100%;
	padding: 16px 18px;
	border: 1px solid transparent;
	border-radius: var(--eeg-radius-xxl);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.eeg-reach--wa {
	background: var(--eeg-c-brand);
	color: var(--eeg-c-surface);
	box-shadow: var(--eeg-shadow-btn-soft);
}

.eeg-reach--wa:hover {
	background: var(--eeg-c-brand-dark);
	color: var(--eeg-c-surface);
}

.eeg-reach--mail {
	background: var(--eeg-c-surface);
	border-color: var(--eeg-c-border);
	color: var(--eeg-c-ink);
}

.eeg-reach--mail:hover {
	border-color: var(--eeg-c-brand);
	color: var(--eeg-c-ink);
}

.eeg-reach__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var(--eeg-radius-lg);
}

.eeg-reach__icon .eeg-icon {
	font-size: 18px;
}

.eeg-reach--wa .eeg-reach__icon {
	background: var(--eeg-on-brand-fill);
}

.eeg-reach--mail .eeg-reach__icon {
	background: var(--eeg-c-brand-soft);
	color: var(--eeg-c-brand);
}

.eeg-reach__text {
	min-width: 0;
}

.eeg-reach__label {
	display: block;
	font-size: 12px;
}

.eeg-reach--wa .eeg-reach__label {
	color: var(--eeg-on-brand-text);
}

.eeg-reach--mail .eeg-reach__label {
	color: var(--eeg-c-meta);
}

/* Mockup menahan email di satu baris. Di layar 320px baris itu lebih lebar
   dari kartunya, jadi boleh patah di mana saja daripada meluber. */
.eeg-reach__value {
	display: block;
	margin-top: 2px;
	font-size: 15px;
	font-weight: 700;
	overflow-wrap: anywhere;
}

.eeg-reach--wa .eeg-reach__value {
	font-size: 16px;
}

.eeg-visit {
	padding-block: clamp(24px, 4vw, 48px) clamp(64px, 8vw, 104px);
}

.eeg-visit__title {
	margin-bottom: clamp(24px, 3vw, 32px);
}

.eeg-visit__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	align-items: stretch;
}

.eeg-visit__places {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.eeg-place {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 14px;
	padding: 22px;
	background: var(--eeg-c-surface);
	border: 1px solid var(--eeg-c-border);
	border-radius: var(--eeg-radius-hero);
}

.eeg-place__head {
	display: flex;
	gap: 12px;
	align-items: center;
}

.eeg-place__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 40px;
	height: 40px;
	background: var(--eeg-c-brand);
	border-radius: var(--eeg-radius-lg);
	color: var(--eeg-c-surface);
}

.eeg-place__icon .eeg-icon {
	font-size: 18px;
}

.eeg-place__tag {
	display: block;
	font-family: var(--eeg-font-sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--eeg-c-meta);
}

.eeg-place__city {
	display: block;
	margin-top: 2px;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--eeg-c-ink);
}

.eeg-place__addr {
	font-size: 14px;
	line-height: 1.65;
	color: var(--eeg-c-body);
	text-wrap: pretty;
}

.eeg-place__link {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	align-self: flex-start;
	margin-top: auto;
	font-size: 14px;
	font-weight: 700;
	color: var(--eeg-c-brand);
}

.eeg-place__link:hover {
	color: var(--eeg-c-ink-brand);
}

.eeg-place__link .eeg-icon {
	font-size: 15px;
}

.eeg-visit__map {
	position: relative;
	min-height: clamp(320px, 40vw, 440px);
	overflow: hidden;
	background: var(--eeg-c-frame);
	border: 1px solid var(--eeg-c-border);
	border-radius: var(--eeg-radius-hero);
}

.eeg-visit__map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (min-width: 1024px) {
	.eeg-visit__grid {
		grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	}

	.eeg-visit__grid--single {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* -------------------------------------------------------------------------
   46. Daftar artikel Exact Global: hero, kartu baris, dan penomoran halaman
   Mengikuti mockup Exact Global Blog Archive. Latar, judul, dan kalimat
   pembuka hero dari .eeg-subhero di blok 42. Blok 25, 27, dan 28 milik tata
   letak daftar artikel lama dan tidak dipakai lagi; blok 26 masih dipakai
   artikel terkait di halaman artikel tunggal.
   ------------------------------------------------------------------------- */
.eeg-bloghero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 720px;
	padding-block: clamp(48px, 7vw, 88px) clamp(8px, 2vw, 16px);
	text-align: center;
}

.eeg-bloghero .eeg-crumbs {
	margin-bottom: 16px;
}

.eeg-bloghero .eeg-crumbs__list {
	justify-content: center;
}

.eeg-bloghero__title {
	font-size: clamp(32px, 4vw, 48px);
	line-height: 1.1;
}

.eeg-bloghero__lead {
	max-width: 520px;
	margin: 14px 0 28px;
	line-height: 1.7;
}

/* Arsip tanpa deskripsi tidak punya kalimat pembuka, jadi jarak ke kotak cari
   dipasang dari judul. */
.eeg-bloghero__title + .eeg-blogsearch {
	margin-top: 28px;
}

.eeg-blogsearch {
	width: 100%;
	max-width: 480px;
}

.eeg-blogsearch__box {
	display: flex;
	gap: 10px;
	align-items: center;
	height: 52px;
	padding: 0 16px;
	background: var(--eeg-c-surface);
	border: 1px solid var(--eeg-c-border-strong);
	border-radius: var(--eeg-radius-xl);
	cursor: text;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.eeg-blogsearch__box:focus-within {
	border-color: var(--eeg-c-brand);
	box-shadow: var(--eeg-shadow-ring);
}

.eeg-blogsearch__box .eeg-icon {
	flex: none;
	font-size: 18px;
	color: var(--eeg-c-meta);
}

/* Garis fokus dipindah ke kotaknya lewat :focus-within di atas. */
.eeg-blogsearch__input {
	flex: 1;
	min-width: 0;
	height: 100%;
	padding: 0;
	background: transparent;
	border: 0;
	outline: 0;
	font: inherit;
	font-size: 15px;
	color: var(--eeg-c-ink);
}

.eeg-blogsearch__input:focus-visible {
	outline: 0;
}

.eeg-blogsearch__input::placeholder {
	color: var(--eeg-c-meta);
}

.eeg-bloglist {
	padding-block: clamp(40px, 5vw, 64px) clamp(64px, 8vw, 104px);
}

.eeg-bloglist__items {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.eeg-bloglist__empty {
	padding-block: 48px;
	font-size: 15px;
	text-align: center;
	color: var(--eeg-c-meta);
}

.eeg-postrow {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(16px, 3vw, 32px);
	align-items: center;
	padding: clamp(12px, 1.4vw, 16px);
	background: var(--eeg-c-surface);
	border: 1px solid var(--eeg-c-border);
	border-radius: var(--eeg-radius-float);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.eeg-postrow:hover,
.eeg-postrow:focus-within {
	border-color: var(--eeg-c-border-hover);
}

.eeg-postrow:hover {
	box-shadow: var(--eeg-shadow-card-blue);
}

.eeg-postrow__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--eeg-c-frame);
	border-radius: var(--eeg-radius-xl);
}

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

.eeg-postrow__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	padding: 4px 6px 8px;
}

.eeg-postrow__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	font-size: 13px;
	font-weight: 600;
	color: var(--eeg-c-meta);
}

/* Label kategori ditaruh di atas lapisan tautan judul supaya tetap bisa
   diklik sendiri. */
.eeg-postrow__cat {
	position: relative;
	z-index: 1;
	padding: 4px 10px;
	background: var(--eeg-c-brand-mist);
	border-radius: var(--eeg-radius-pill);
	color: var(--eeg-c-brand);
	transition: background-color 0.2s ease;
}

.eeg-postrow__cat:hover {
	background: var(--eeg-c-brand-soft);
	color: var(--eeg-c-brand-dark);
}

.eeg-postrow__title {
	font-size: clamp(19px, 1.8vw, 23px);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: var(--eeg-c-ink);
	text-wrap: pretty;
	transition: color 0.2s ease;
}

.eeg-postrow:hover .eeg-postrow__title {
	color: var(--eeg-c-brand);
}

/* Tautan judul melebar menutupi kartu, supaya seluruh kartu bisa diklik. */
.eeg-postrow__link::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: var(--eeg-radius-float);
}

/* Ringkasan otomatis WordPress bisa sampai 55 kata, jadi dipotong tiga baris
   supaya tinggi kartu tetap rapi. Ringkasan yang ditulis owner tidak diubah. */
.eeg-postrow__excerpt {
	display: -webkit-box;
	overflow: hidden;
	font-size: 15px;
	line-height: 1.65;
	color: var(--eeg-c-body);
	text-wrap: pretty;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.eeg-postrow__more {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	margin-top: 4px;
	font-size: 14px;
	font-weight: 700;
	color: var(--eeg-c-brand);
}

.eeg-postrow__more .eeg-icon {
	font-size: 15px;
}

.eeg-blogpager {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	justify-content: center;
	margin-top: clamp(40px, 5vw, 56px);
}

.eeg-blogpager .page-numbers,
.eeg-blogpager__step {
	display: grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding-inline: 6px;
	border: 1px solid var(--eeg-c-border);
	border-radius: var(--eeg-radius-lg);
	font-size: 14px;
	font-weight: 600;
	color: var(--eeg-c-ink);
	transition: border-color 0.2s ease, color 0.2s ease;
}

.eeg-blogpager a.page-numbers:hover,
a.eeg-blogpager__step:hover {
	border-color: var(--eeg-c-brand);
	color: var(--eeg-c-brand);
}

.eeg-blogpager .page-numbers.current {
	background: var(--eeg-c-brand);
	border-color: var(--eeg-c-brand);
	font-weight: 700;
	color: var(--eeg-c-surface);
}

.eeg-blogpager .page-numbers.dots {
	border-color: transparent;
}

.eeg-blogpager__step .eeg-icon {
	font-size: 16px;
}

.eeg-blogpager__step--off {
	opacity: 0.5;
}

@media (min-width: 720px) {
	.eeg-postrow {
		grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
	}

	.eeg-postrow__body {
		padding: 0 16px 0 0;
	}
}

/* -------------------------------------------------------------------------
   47. Artikel tunggal Exact Global: kepala, sampul, isi, sidebar, dan
   Related articles
   Mengikuti mockup Exact Global Blog Post. Latar kepala dan judul dari
   .eeg-subhero di blok 42. Isi tulisan memakai .eeg-prose, bukan
   .eeg-entry__content di blok 30 yang tetap dipakai halaman biasa. Blok 26
   dan 29 milik artikel tunggal lama dan tidak dipakai lagi.
   ------------------------------------------------------------------------- */
.eeg-singlehero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 880px;
	padding-block: clamp(40px, 6vw, 72px) clamp(28px, 4vw, 40px);
	text-align: center;
}

.eeg-singlehero .eeg-crumbs__list {
	justify-content: center;
}

.eeg-singlehero__title {
	font-size: clamp(30px, 4vw, 48px);
	line-height: 1.12;
}

.eeg-singlehero__lead {
	max-width: 620px;
	margin: 16px 0 24px;
	font-size: clamp(16px, 1.3vw, 18px);
	line-height: 1.7;
}

/* Artikel tanpa ringkasan tidak punya kalimat pembuka, jadi jarak ke baris
   penulis dipasang dari judul. */
.eeg-singlehero__title + .eeg-singlehero__meta {
	margin-top: 24px;
}

.eeg-singlehero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	color: var(--eeg-c-meta);
}

.eeg-singlehero__avatar {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	background: var(--eeg-c-brand);
	border-radius: 50%;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--eeg-c-surface);
}

.eeg-singlehero__author {
	font-weight: 700;
	color: var(--eeg-c-ink);
}

.eeg-singlehero__dot,
.eeg-posttile__dot {
	width: 4px;
	height: 4px;
	background: var(--eeg-c-faint);
	border-radius: 50%;
}

.eeg-single__cover,
.eeg-single__body {
	max-width: 1120px;
}

.eeg-single__cover {
	margin-block: 0;
}

.eeg-single__frame {
	position: relative;
	aspect-ratio: 16 / 8;
	overflow: hidden;
	background: var(--eeg-c-frame);
	border-radius: clamp(16px, 2vw, 28px);
}

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

.eeg-single__caption {
	margin-top: 10px;
	font-size: 14px;
	color: var(--eeg-c-meta);
}

.eeg-single__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
	padding-block: clamp(40px, 5vw, 64px) clamp(64px, 8vw, 96px);
}

.eeg-single__main {
	min-width: 0;
	max-width: 720px;
}

/* Isi tulisan dari editor. Paragraf pertama sedikit lebih besar, seperti
   kalimat pembuka di mockup. */
.eeg-prose {
	font-size: 17px;
	line-height: 1.8;
	color: var(--eeg-c-prose);
}

.eeg-prose > *:first-child {
	margin-top: 0;
}

.eeg-prose p {
	margin: 0 0 20px;
	text-wrap: pretty;
}

.eeg-prose > p:first-child {
	font-size: 19px;
	color: var(--eeg-c-ink);
}

.eeg-prose h2 {
	margin: 44px 0 16px;
	font-size: clamp(22px, 2.2vw, 28px);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.03em;
	color: var(--eeg-c-ink);
	text-wrap: balance;
}

.eeg-prose h3 {
	margin: 32px 0 12px;
	font-size: clamp(19px, 1.7vw, 22px);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: var(--eeg-c-ink);
}

.eeg-prose h4 {
	margin: 24px 0 10px;
	font-size: 17px;
	font-weight: 700;
	color: var(--eeg-c-ink);
}

.eeg-prose ul,
.eeg-prose ol {
	margin: 0 0 20px;
	padding-left: 22px;
}

.eeg-prose ul {
	list-style: disc;
}

.eeg-prose ol {
	list-style: decimal;
}

.eeg-prose li {
	margin-bottom: 8px;
	padding-left: 4px;
}

.eeg-prose li::marker {
	color: var(--eeg-c-brand);
}

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

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

.eeg-prose a:hover {
	color: var(--eeg-c-brand-dark);
	border-bottom-color: currentColor;
}

.eeg-prose img {
	height: auto;
	border-radius: var(--eeg-radius-xxl);
}

.eeg-prose figure {
	margin: 8px 0 28px;
}

.eeg-prose figcaption {
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 1.6;
	text-align: left;
	color: var(--eeg-c-meta);
}

.eeg-prose hr {
	margin: 40px 0;
	border: 0;
	border-top: 1px solid var(--eeg-c-border);
}

/* Blok Kutipan dipakai sebagai kotak catatan bergambar lampu, seperti kotak
   "Rule of thumb" di mockup. Ikonnya glyph lightbulb Phosphor yang dipakai
   sebagai topeng, karena pseudo elemen tidak bisa memanggil sprite. */
.eeg-prose blockquote {
	position: relative;
	margin: 8px 0 28px;
	padding: 20px 22px 20px 56px;
	background: var(--eeg-c-brand-mist);
	border: 0;
	border-radius: var(--eeg-radius-xxl);
	font-size: 16px;
	line-height: 1.7;
	color: var(--eeg-c-ink);
}

.eeg-prose blockquote::before {
	content: '';
	position: absolute;
	top: 23px;
	left: 22px;
	width: 20px;
	height: 20px;
	background: var(--eeg-c-brand);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath transform='matrix%281 0 0 -1 0 960%29' d='M704 32c0-17.673-14.327-32-32-32v0h-320c-17.673 0-32 14.327-32 32s14.327 32 32 32v0h320c17.673 0 32-14.327 32-32v0zM864 544c0.001-0.269 0.001-0.587 0.001-0.905 0-111.733-52.326-211.244-133.811-275.365l-0.75-0.569c-15.431-11.912-25.309-30.369-25.44-51.139v-24.021c0-35.346-28.654-64-64-64v0h-256c-35.346 0-64 28.654-64 64v0 24c-0.014 20.55-9.711 38.832-24.775 50.532l-0.145 0.108c-82.278 64.508-134.745 163.793-135.080 275.344v0.056c-1.040 190.64 153.040 349.4 343.52 353.96 2.525 0.065 5.498 0.102 8.48 0.102 194.404 0 352-157.596 352-352 0-0.036 0-0.072 0-0.108v0.006zM800 544c0 0.025 0 0.055 0 0.084 0 159.058-128.942 288-288 288-2.447 0-4.888-0.031-7.32-0.091l0.36 0.007c-156-3.68-281.88-133.56-281.040-289.56 0.317-91.276 43.253-172.458 109.935-224.728l0.625-0.472c30.207-23.641 49.44-60.103 49.44-101.056 0-0.065 0-0.129 0-0.194v0.010-24h256v24c0.096 41.129 19.485 77.71 49.593 101.185l0.287 0.215c67.299 52.942 110.121 134.38 110.121 225.82 0 0.274 0 0.548-0.001 0.822v-0.042zM735.56 581.36c-17.46 94.991-91.243 168.76-184.824 185.984l-1.416 0.216c-1.599 0.283-3.441 0.445-5.32 0.445-17.676 0-32.005-14.329-32.005-32.005 0-15.797 11.444-28.921 26.494-31.533l0.191-0.027c66.28-11.16 122.52-67.4 133.76-133.8 2.656-15.219 15.768-26.64 31.548-26.64 0.004 0 0.009 0 0.013 0h-0.001c1.916 0.012 3.784 0.171 5.607 0.468l-0.207-0.028c15.206 2.667 26.615 15.773 26.615 31.544 0 1.899-0.165 3.76-0.483 5.568l0.028-0.192z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath transform='matrix%281 0 0 -1 0 960%29' d='M704 32c0-17.673-14.327-32-32-32v0h-320c-17.673 0-32 14.327-32 32s14.327 32 32 32v0h320c17.673 0 32-14.327 32-32v0zM864 544c0.001-0.269 0.001-0.587 0.001-0.905 0-111.733-52.326-211.244-133.811-275.365l-0.75-0.569c-15.431-11.912-25.309-30.369-25.44-51.139v-24.021c0-35.346-28.654-64-64-64v0h-256c-35.346 0-64 28.654-64 64v0 24c-0.014 20.55-9.711 38.832-24.775 50.532l-0.145 0.108c-82.278 64.508-134.745 163.793-135.080 275.344v0.056c-1.040 190.64 153.040 349.4 343.52 353.96 2.525 0.065 5.498 0.102 8.48 0.102 194.404 0 352-157.596 352-352 0-0.036 0-0.072 0-0.108v0.006zM800 544c0 0.025 0 0.055 0 0.084 0 159.058-128.942 288-288 288-2.447 0-4.888-0.031-7.32-0.091l0.36 0.007c-156-3.68-281.88-133.56-281.040-289.56 0.317-91.276 43.253-172.458 109.935-224.728l0.625-0.472c30.207-23.641 49.44-60.103 49.44-101.056 0-0.065 0-0.129 0-0.194v0.010-24h256v24c0.096 41.129 19.485 77.71 49.593 101.185l0.287 0.215c67.299 52.942 110.121 134.38 110.121 225.82 0 0.274 0 0.548-0.001 0.822v-0.042zM735.56 581.36c-17.46 94.991-91.243 168.76-184.824 185.984l-1.416 0.216c-1.599 0.283-3.441 0.445-5.32 0.445-17.676 0-32.005-14.329-32.005-32.005 0-15.797 11.444-28.921 26.494-31.533l0.191-0.027c66.28-11.16 122.52-67.4 133.76-133.8 2.656-15.219 15.768-26.64 31.548-26.64 0.004 0 0.009 0 0.013 0h-0.001c1.916 0.012 3.784 0.171 5.607 0.468l-0.207-0.028c15.206 2.667 26.615 15.773 26.615 31.544 0 1.899-0.165 3.76-0.483 5.568l0.028-0.192z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.eeg-prose blockquote p:last-child,
.eeg-prose blockquote p:last-of-type {
	margin-bottom: 0;
}

.eeg-prose blockquote cite {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	font-weight: 600;
	font-style: normal;
	color: var(--eeg-c-brand);
}

/* Tabel panjang tetap bisa digeser sendiri tanpa menggeser seluruh halaman.
   Garis bawaan blok Tabel WordPress diganti garis tipis seperti mockup. */
.eeg-prose .wp-block-table {
	margin: 0 0 24px;
	overflow-x: auto;
	border: 1px solid var(--eeg-c-border);
	border-radius: var(--eeg-radius-xxl);
}

.eeg-prose table {
	width: 100%;
	min-width: 520px;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.6;
}

.eeg-prose .wp-block-table table {
	margin: 0;
}

.eeg-prose thead,
.eeg-prose tfoot {
	border: 0;
}

.eeg-prose th,
.eeg-prose td {
	padding: 14px 16px;
	border: 0;
	text-align: left;
	vertical-align: top;
}

.eeg-prose th {
	background: var(--eeg-c-surface-tint);
	font-weight: 700;
	color: var(--eeg-c-ink);
}

.eeg-prose td {
	border-top: 1px solid var(--eeg-c-border-soft);
}

/* Kolom pertama berperan sebagai label, jadi tidak dipatah; tabelnya sendiri
   yang digeser di layar sempit, seperti di mockup. */
.eeg-prose td:first-child {
	font-weight: 700;
	white-space: nowrap;
	color: var(--eeg-c-brand);
}

.eeg-prose .wp-block-table figcaption {
	padding: 0 16px 12px;
}

.eeg-prose code {
	padding: 2px 6px;
	background: var(--eeg-c-surface-mute);
	border-radius: var(--eeg-radius-sm);
	font-family: var(--eeg-font-mono);
	font-size: 0.88em;
}

.eeg-prose pre {
	margin: 0 0 24px;
	padding: 16px 18px;
	overflow-x: auto;
	background: var(--eeg-c-surface-mute);
	border-radius: var(--eeg-radius-xxl);
	font-size: 14px;
	line-height: 1.6;
}

.eeg-prose pre code {
	padding: 0;
	background: none;
}

.eeg-prose .aligncenter {
	margin-inline: auto;
}

.eeg-prose__pages {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-top: 28px;
	font-size: 14px;
	font-weight: 600;
}

.eeg-single__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid var(--eeg-c-border);
}

.eeg-single__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.eeg-single__tag {
	display: block;
	padding: 7px 12px;
	border: 1px solid var(--eeg-c-border-strong);
	border-radius: var(--eeg-radius-pill);
	font-size: 13px;
	font-weight: 600;
	color: var(--eeg-c-ink);
	transition: border-color 0.2s ease, color 0.2s ease;
}

.eeg-single__tag:hover {
	border-color: var(--eeg-c-brand);
	color: var(--eeg-c-brand);
}

.eeg-sharebar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.eeg-sharebar__label {
	margin-right: 4px;
	font-size: 13px;
	font-weight: 600;
	color: var(--eeg-c-meta);
}

.eeg-sharebar__button {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	background: var(--eeg-c-surface);
	border: 1px solid var(--eeg-c-border);
	border-radius: var(--eeg-radius-md);
	color: var(--eeg-c-ink);
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.eeg-sharebar__button:hover {
	border-color: var(--eeg-c-brand);
	color: var(--eeg-c-brand);
}

.eeg-sharebar__button[hidden],
.eeg-sharebar__done[hidden] {
	display: none;
}

.eeg-sharebar__button .eeg-icon {
	font-size: 16px;
}

.eeg-sharebar__done {
	font-size: 13px;
	font-weight: 600;
	color: var(--eeg-c-brand);
}

/* Sidebar hanya tampil mulai 1024px, seperti di mockup. */
.eeg-single__aside {
	display: none;
}

.eeg-onpage {
	padding: 22px;
	border: 1px solid var(--eeg-c-border);
	border-radius: var(--eeg-radius-hero);
}

.eeg-onpage__title {
	margin-bottom: 14px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--eeg-c-meta);
}

.eeg-onpage__list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.eeg-onpage__link {
	display: block;
	padding: 8px 0 8px 12px;
	border-left: 2px solid var(--eeg-c-border);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--eeg-c-prose);
	transition: border-color 0.2s ease, color 0.2s ease;
}

.eeg-onpage__link:hover {
	border-left-color: var(--eeg-c-brand);
	color: var(--eeg-c-brand);
}

.eeg-asidecta {
	padding: 22px;
	background: linear-gradient(145deg, var(--eeg-c-brand), var(--eeg-c-ink-brand));
	border-radius: var(--eeg-radius-hero);
	color: var(--eeg-c-surface);
}

.eeg-asidecta__title {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: var(--eeg-c-surface);
}

.eeg-asidecta__text {
	margin: 8px 0 16px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--eeg-on-brand-text);
}

.eeg-asidecta__button {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	padding: 11px 16px;
	background: var(--eeg-c-surface);
	border-radius: var(--eeg-radius-lg);
	font-size: 14px;
	font-weight: 700;
	color: var(--eeg-c-ink-brand);
}

.eeg-asidecta__button:hover {
	color: var(--eeg-c-brand);
}

.eeg-asidecta__button .eeg-icon {
	font-size: 16px;
}

.eeg-relposts {
	background: var(--eeg-c-surface-tint);
}

.eeg-relposts__inner {
	padding-block: clamp(56px, 7vw, 88px);
}

.eeg-relposts__head {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 28px;
}

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

.eeg-relposts__all:hover {
	color: var(--eeg-c-ink-brand);
}

.eeg-relposts__all .eeg-icon {
	font-size: 15px;
}

.eeg-relposts__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: 20px;
}

.eeg-posttile {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 12px 12px 20px;
	background: var(--eeg-c-surface);
	border: 1px solid var(--eeg-c-border);
	border-radius: var(--eeg-radius-hero);
	transition: border-color 0.2s ease;
}

.eeg-posttile:hover,
.eeg-posttile:focus-within {
	border-color: var(--eeg-c-border-hover);
}

.eeg-posttile__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--eeg-c-frame);
	border-radius: var(--eeg-radius-xl);
}

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

.eeg-posttile__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	padding-inline: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--eeg-c-meta);
}

/* Label kategori di atas lapisan tautan judul supaya tetap bisa diklik sendiri. */
.eeg-posttile__cat {
	position: relative;
	z-index: 1;
	color: var(--eeg-c-brand);
}

.eeg-posttile__cat:hover {
	color: var(--eeg-c-brand-dark);
}

.eeg-posttile__title {
	padding-inline: 8px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.015em;
	color: var(--eeg-c-ink);
	text-wrap: pretty;
	transition: color 0.2s ease;
}

.eeg-posttile:hover .eeg-posttile__title {
	color: var(--eeg-c-brand);
}

.eeg-posttile__link::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: var(--eeg-radius-hero);
}

@media (min-width: 1024px) {
	.eeg-single__body {
		grid-template-columns: minmax(0, 1fr) 300px;
	}

	.eeg-single__aside {
		position: sticky;
		top: calc(var(--eeg-header-h) + 34px);
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.admin-bar .eeg-single__aside {
		top: calc(var(--eeg-header-h) + 34px + 32px);
	}
}

/* -------------------------------------------------------------------------
   48. 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;
	}

	.eeg-service:hover,
	.eeg-step:hover,
	.eeg-other:hover,
	.eeg-other:hover .eeg-other__thumb,
	.eeg-value:hover,
	.eeg-post:hover,
	.eeg-produk:hover,
	.eeg-produk:hover .eeg-produk__media img,
	.eeg-produk:hover .eeg-produk__more .eeg-icon,
	.eeg-solution--link:hover {
		transform: none;
	}

	/* Pita logo berhenti di tempat. Aturan global di atas hanya memendekkan
	   animasinya, dan pita yang sudah bergeser setengah tetap terlihat wajar,
	   tapi berhenti total lebih tenang. */
	.eeg-marquee__track {
		animation: none !important;
	}
}