/* Jatim Utama · arah desain di DESIGN.md (palet logo, Barlow, motif stempel + nota timbang). */

@font-face { font-family: "Barlow"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/barlow-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/barlow-condensed-700.woff2") format("woff2"); }

:root {
	--ink: #16171B;
	--ink-2: #22242A;
	--ink-line: #3A3C43;
	--concrete: #F3F1EC;
	--concrete-2: #E7E3DA;
	--paper: #FFFFFF;
	--signal: #F58220;
	--signal-deep: #A84F0A;
	--steel: #5C5A57;
	--dust: #A8A49C;

	--font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
	--font-body: "Barlow", "Segoe UI", Arial, sans-serif;

	--ju-max: 1200px;
	--ju-gutter: clamp(16px, 4vw, 40px);
	--sec-y: clamp(48px, 6.5vw, 88px);
	--radius: 4px;
	--ease-out: cubic-bezier(.2, .7, .2, 1);

	/* Warna yang berubah per section (terang/gelap). */
	--fg: var(--ink);
	--fg-soft: var(--steel);
	--focus: var(--ink);
	--accent-text: var(--signal-deep);
}

/* ---------- Dasar ---------- */

/* Astra memasang html { font-size: 112.5% } sehingga 1rem = 18px dan semua ukuran membengkak 12,5%.
   Basis dikembalikan ke 16px agar skala di file ini sesuai yang ditulis. */
:root { font-size: 100%; }

body.ju-site {
	background: var(--concrete);
	color: var(--fg);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.ju-site h1, .ju-site h2, .ju-site h3, .ju-site h4,
.ju-site .elementor-widget-heading .elementor-heading-title {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.005em;
	color: inherit;
	text-wrap: balance;
}

.ju-site p { text-wrap: pretty; }
.ju-site a { color: var(--accent-text); text-underline-offset: 3px; }
.ju-site a:hover { color: var(--fg); }

/* Satu tempat untuk kursor dan fokus semua kontrol. */
.ju-site a[href], .ju-site button, .ju-site summary, .ju-site select, .ju-site label[for],
.ju-site [role="button"], .ju-site input[type="checkbox"], .ju-site input[type="radio"],
.ju-site input[type="file"], .ju-site input[type="submit"] { cursor: pointer; }
.ju-site :disabled, .ju-site [aria-disabled="true"] { cursor: not-allowed; }

.ju-site :focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 3px;
	border-radius: 2px;
}

.ju-site .skip-link:focus {
	background: var(--signal);
	color: var(--ink);
	font-weight: 600;
	padding: 12px 18px;
	z-index: 100000;
	clip: auto;
	clip-path: none;
	width: auto;
	height: auto;
	top: 8px;
	left: 8px;
}

.ju-site img { max-width: 100%; height: auto; }

/* Seleksi teks: bawaan Astra hampir sama dengan latar gelap (#191a1f vs #16171B), jadi tidak terlihat.
   Oranye logo dengan teks hitam terlihat di latar terang maupun gelap (teks 6.91:1). */
.ju-site ::selection { background: var(--signal); color: var(--ink); }

/* Elementor: kontainer tanpa padding bawaan, spasi diatur per section. */
.ju-site .e-con {
	--container-default-padding-top: 0px;
	--container-default-padding-right: 0px;
	--container-default-padding-bottom: 0px;
	--container-default-padding-left: 0px;
}
.ju-site .elementor-widget:not(:last-child) { margin-block-end: 0; }
.ju-site .elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* Astra: halaman Elementor tidak perlu judul dan jarak bawaan. */
.ju-site.elementor-page .site-content > .ast-container { max-width: none; padding: 0; display: block; }
.ju-site.elementor-page #primary { margin: 0; padding: 0; }
.ju-site .ast-scroll-top-icon { background: var(--ink); color: var(--concrete); border-radius: var(--radius); }

/* ---------- Section ---------- */

#content .e-con.ju-sec {
	--padding-top: var(--sec-y);
	--padding-bottom: var(--sec-y);
	color: var(--fg);
	position: relative;
}
#content .e-con.ju-sec--ink {
	--fg: var(--concrete);
	--fg-soft: var(--dust);
	--focus: var(--signal);
	--accent-text: var(--signal);
	background: var(--ink);
}
#content .e-con.ju-sec--paper { background: var(--paper); }
#content .e-con.ju-sec--tight { --padding-top: clamp(40px, 6vw, 72px); --padding-bottom: clamp(40px, 6vw, 72px); }

#content .e-con.ju-wrap {
	--width: 100%;
	max-width: calc(var(--ju-max) + 2 * var(--ju-gutter));
	margin-inline: auto;
	--padding-left: var(--ju-gutter);
	--padding-right: var(--ju-gutter);
	--gap: clamp(20px, 3vw, 32px);
}

#content .ju-split.e-con {
	--display: grid;
	grid-template-columns: 1fr;
	--gap: clamp(28px, 5vw, 64px);
	align-items: start;
}
@media (min-width: 900px) {
	#content .ju-split.e-con { grid-template-columns: 5fr 7fr; }
	#content .ju-split--even.e-con { grid-template-columns: 1fr 1fr; }
	#content .ju-split--wide-left.e-con { grid-template-columns: 7fr 5fr; }
	#content .ju-split--center.e-con { align-items: center; }
	.ju-sticky { position: sticky; top: 120px; }
}

/* ---------- Tipografi komponen ---------- */

.ju-kicker, .ju-site .ju-kicker .elementor-heading-title,
.ju-kicker p {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.05rem;
	letter-spacing: 0.04em;
	color: var(--accent-text);
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
}
.ju-kicker .elementor-heading-title::before,
.ju-kicker p::before {
	content: "";
	width: 28px;
	height: 3px;
	background: var(--signal);
	flex: none;
}

.ju-site .ju-h1 .elementor-heading-title { font-size: clamp(2.25rem, 4.6vw, 3.5rem); }
.ju-site .ju-h2 .elementor-heading-title { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.ju-site .ju-h3 .elementor-heading-title { font-size: clamp(1.25rem, 1.6vw, 1.45rem); }
.ju-site .ju-h1 .elementor-heading-title em,
.ju-site .ju-h2 .elementor-heading-title em { font-style: normal; color: var(--accent-text); }

/* Teks widget Elementor memakai ukuran dasar situs, bukan ukuran kit. */
.ju-site .elementor-widget-text-editor { font-size: 1.0625rem; line-height: 1.6; color: var(--fg-soft); }
.ju-site .ju-lead, .ju-site .ju-lead p {
	font-size: clamp(1.05rem, 0.3vw + 0.98rem, 1.2rem);
	line-height: 1.55;
	color: var(--fg-soft);
	max-width: 60ch;
}
.ju-site .ju-sec--ink .ju-lead, .ju-site .ju-sec--ink .ju-lead p { color: #D6D2C9; }
.ju-site .ju-body, .ju-site .ju-body p { color: var(--fg-soft); max-width: 62ch; }
.ju-site .ju-sec--ink .ju-body p { color: #CFCBC2; }

/* ---------- Tombol ---------- */

.ju-site .ju-btn, .ju-site .ju-btnw .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 12px 22px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.08rem;
	letter-spacing: 0.01em;
	line-height: 1.1;
	text-decoration: none;
	border: 2px solid var(--ink);
	border-radius: var(--radius);
	background: var(--signal);
	color: var(--ink);
	box-shadow: 3px 3px 0 var(--ink);
	transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out), background-color .15s;
}
.ju-btn .ju-icon { width: 22px; height: 22px; flex: none; }
.ju-site .ju-btn:hover, .ju-site .ju-btnw .elementor-button:hover {
	color: var(--ink);
	background: #FF9440;
	transform: translate(-2px, -2px);
	box-shadow: 5px 5px 0 var(--ink);
}
.ju-site .ju-btn:active, .ju-site .ju-btnw .elementor-button:active {
	transform: translate(3px, 3px);
	box-shadow: 0 0 0 var(--ink);
}
.ju-sec--ink .ju-btn--primary, .ju-sec--ink .ju-btnw--primary .elementor-button,
.ju-footer .ju-btn--primary { box-shadow: 4px 4px 0 var(--concrete); }
.ju-sec--ink .ju-btn--primary:hover, .ju-sec--ink .ju-btnw--primary .elementor-button:hover,
.ju-footer .ju-btn--primary:hover { box-shadow: 6px 6px 0 var(--concrete); }

.ju-site .ju-btn--ghost, .ju-site .ju-btnw--ghost .elementor-button {
	background: transparent;
	color: var(--fg);
	border-color: currentColor;
	box-shadow: none;
}
.ju-site .ju-btn--ghost:hover, .ju-site .ju-btnw--ghost .elementor-button:hover {
	background: var(--fg);
	color: var(--ink);
	box-shadow: none;
	transform: none;
}
.ju-sec:not(.ju-sec--ink) .ju-btnw--ghost .elementor-button:hover, .ju-sec:not(.ju-sec--ink) .ju-btn--ghost:hover { color: var(--concrete); }
.ju-site .ju-btnw .elementor-button-content-wrapper { gap: 10px; }

#content .ju-actions.e-con { --flex-direction: row; --flex-wrap: wrap; --gap: 16px 20px; --align-items: center; }

.ju-site .ju-textlink a, .ju-site a.ju-textlink {
	background: none;
	border: 0;
	border-radius: 0;
	padding-inline: 0;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.15rem;
	color: var(--fg);
	text-decoration: underline;
	text-decoration-color: var(--signal);
	text-decoration-thickness: 3px;
	text-underline-offset: 6px;
	display: inline-block;
	padding-block: 10px;
}
.ju-site .ju-textlink a:hover, .ju-site a.ju-textlink:hover { background: none; text-decoration-thickness: 6px; color: var(--fg); }

/* ---------- Header ---------- */

.ju-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--ink);
	color: var(--concrete);
	--focus: var(--signal);
	border-bottom: 1px solid var(--ink-line);
	transition: box-shadow .2s;
}
.admin-bar .ju-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .ju-header { top: 0; } }

.ju-header__bar {
	max-width: calc(var(--ju-max) + 2 * var(--ju-gutter));
	margin-inline: auto;
	padding: 12px var(--ju-gutter);
	display: flex;
	align-items: center;
	gap: 24px;
	transition: padding .2s var(--ease-out);
}
.ju-header.is-compact .ju-header__bar { padding-block: 6px; }
.ju-header.is-compact { box-shadow: 0 6px 18px rgb(0 0 0 / .25); }

.ju-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: inherit;
	margin-right: auto;
	min-height: 44px;
}
.ju-site .ju-brand, .ju-site .ju-brand:hover { color: var(--concrete); }
.ju-brand__logo {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--concrete);
	transition: width .2s, height .2s;
}
.ju-header.is-compact .ju-brand__logo { width: 40px; height: 40px; }
.ju-brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.ju-brand__name { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; letter-spacing: .01em; }
.ju-brand__tag { font-size: .82rem; color: var(--dust); }

.ju-nav__list, .ju-mobile-nav__list, .ju-footer__list { list-style: none; margin: 0; padding: 0; }
.ju-nav__list { display: flex; gap: 4px; }
.ju-nav__list a {
	display: block;
	padding: 10px 14px;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.15rem;
	color: var(--concrete);
	text-decoration: none;
	position: relative;
}
.ju-nav__list a::after {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 4px;
	height: 3px;
	background: var(--signal);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .25s var(--ease-out);
}
.ju-nav__list a:hover, .ju-nav__list .current-menu-item > a { color: var(--concrete); }
.ju-nav__list a:hover::after, .ju-nav__list .current-menu-item > a::after { transform: scaleX(1); }

.ju-header__cta { min-height: 46px; padding: 8px 16px; font-size: 1.05rem; box-shadow: 3px 3px 0 var(--concrete); }
.ju-header__cta:hover { box-shadow: 5px 5px 0 var(--concrete); }

.ju-menu-toggle {
	display: none;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 8px 14px;
	background: transparent;
	color: var(--concrete);
	border: 2px solid var(--ink-line);
	border-radius: var(--radius);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.1rem;
}
.ju-menu-toggle:hover { border-color: var(--concrete); background: transparent; color: var(--concrete); }
.ju-menu-toggle .ju-icon { width: 22px; height: 22px; }
.ju-menu-toggle__close, .ju-menu-toggle[aria-expanded="true"] .ju-menu-toggle__open { display: none; }
.ju-menu-toggle[aria-expanded="true"] .ju-menu-toggle__close { display: block; }

.ju-mobile-nav {
	border-top: 1px solid var(--ink-line);
	padding: 8px var(--ju-gutter) 24px;
	max-height: calc(100dvh - 72px);
	overflow-y: auto;
}
.ju-mobile-nav__list a {
	display: block;
	padding: 14px 0;
	border-bottom: 1px solid var(--ink-line);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.35rem;
	color: var(--concrete);
	text-decoration: none;
}
.ju-mobile-nav__list .current-menu-item > a { color: var(--signal); }
.ju-mobile-nav__contact { display: grid; gap: 16px; padding-top: 24px; }
.ju-mobile-nav__contact .ju-btn { box-shadow: 4px 4px 0 var(--concrete); }
.ju-mobile-nav__phone { color: var(--concrete); font-weight: 600; padding: 10px 0; }

@media (max-width: 1023px) {
	.ju-header .ju-nav, .ju-site .ju-header .ju-header__cta { display: none; }
	.ju-menu-toggle { display: inline-flex; }
}
@media (max-width: 420px) {
	.ju-brand__tag { display: none; }
	.ju-brand__name { font-size: 1.2rem; }
	.ju-menu-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.ju-menu-toggle { width: 48px; justify-content: center; padding: 8px; }
}

/* ---------- Hero ---------- */

/* Hero dan kepala halaman setinggi 75% layar. svh dipakai agar bilah alamat browser HP tidak ikut dihitung. */
#content .e-con.ju-hero {
	--padding-top: clamp(40px, 7vw, 96px);
	--padding-bottom: 0px;
	min-height: 75vh;
	min-height: 75svh;
	overflow: hidden;
}
#content .e-con.ju-hero > .e-con.ju-wrap { flex: 1 1 auto; }
#content .ju-hero .ju-split.e-con { flex: 1 1 auto; align-items: center; }
#content .ju-hero__art.e-con { align-self: end; }
@media (min-width: 900px) { #content .ju-hero .ju-split.e-con { grid-template-columns: 6fr 6fr; } }
#content .ju-hero__copy.e-con { --gap: 22px; padding-bottom: clamp(32px, 6vw, 88px); }
#content .ju-hero__art.e-con { position: relative; }

.ju-ill-wrap { position: relative; color: var(--concrete); }
.ju-ill { display: block; width: 100%; height: auto; overflow: visible; }
.ju-ill .ill-fill-signal { fill: var(--signal); stroke: var(--ink); }
.ju-ill .ill-fill-dark { fill: var(--ink-2); }
.ju-sec:not(.ju-sec--ink) .ju-ill-wrap { color: var(--ink); }
.ju-sec:not(.ju-sec--ink) .ju-ill .ill-fill-dark { fill: #3A3C42; }
.ju-ill .ill-wheel circle:first-child { fill: var(--ink); }
.ju-ill .ill-wheel circle:last-child { fill: var(--concrete); }

#content .ju-hero__art > .ju-hero__stamp {
	position: absolute;
	width: clamp(92px, 11vw, 128px);
	top: 2%;
	right: 0;
}
.ju-hero__stamp .ju-stamp { width: 100%; }

/* Ilustrasi interaktif: ilustrasinya sendiri yang diklik (maksimal 3 kali per kunjungan). */
.ju-ill-wrap.is-interactive { position: relative; }
.ju-ill__stage { border-radius: var(--radius); }
.ju-ill-wrap.is-interactive .ju-ill__stage { cursor: pointer; }
.ju-ill-wrap.is-interactive .ju-ill__stage[aria-disabled="true"] { cursor: progress; }
.ju-ill-wrap.is-interactive .ju-ill__stage:focus-visible { outline: 3px solid var(--focus); outline-offset: 6px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.ju-ill-wrap.is-interactive .ju-ill__stage .ju-ill { transition: transform .3s var(--ease-out); }
	.ju-ill-wrap.is-interactive .ju-ill__stage:hover .ju-ill { transform: translateY(-4px); }
}

.ju-ill .ill-sway { transform-box: view-box; transform-origin: 152px 66px; transform: rotate(var(--sway, 0deg)); }
.ju-ill .ill-cable { transform-box: view-box; transform-origin: 152px 72px; }
.ju-ill .ill-magnet, .ju-ill .ill-held { transform-box: view-box; }
@media (prefers-reduced-motion: no-preference) {
	.ju-ill .ill-sway { transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
}

/* ---------- Stempel ---------- */

.ju-stamp { color: var(--signal); width: 160px; aspect-ratio: 1; transform: rotate(-12deg); }
.ju-stamp svg { width: 100%; height: 100%; overflow: visible; }
.ju-stamp__ring { fill: none; stroke: currentColor; stroke-width: 4; }
.ju-stamp__text { fill: currentColor; font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: .5px; }
.ju-stamp__center { fill: currentColor; font-family: var(--font-display); font-weight: 700; font-size: 24px; }
.ju-sec:not(.ju-sec--ink) .ju-stamp { color: var(--signal-deep); }

/* ---------- Marquee material ---------- */

/* Pita tipis gelap yang menyambung dari hero: cukup untuk menyebut material, tidak berebut perhatian dengan judul. */
#content .e-con.ju-band {
	background: var(--ink);
	color: #D6D2C9;
	--focus: var(--signal);
	border-top: 1px solid var(--ink-line);
	border-bottom: 3px solid var(--signal);
}
.ju-marquee { display: flex; align-items: center; }
.ju-marquee__viewport { overflow: hidden; flex: 1; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ju-marquee__track {
	display: flex;
	width: max-content;
	margin: 0;
	padding: 9px 0;
	list-style: none;
	gap: 0;
}
.ju-marquee__track li {
	display: flex;
	align-items: center;
	gap: 18px;
	padding-right: 18px;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1rem;
	letter-spacing: .02em;
	white-space: nowrap;
}
.ju-marquee__star { width: 9px; height: 9px; color: var(--signal); }
.ju-marquee__toggle {
	flex: none;
	min-height: 32px;
	min-width: 56px;
	margin-right: var(--ju-gutter);
	padding: 4px 10px;
	background: transparent;
	color: var(--dust);
	border: 1px solid var(--ink-line);
	border-radius: var(--radius);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: .9rem;
}
.ju-marquee__toggle:hover { background: transparent; border-color: var(--dust); color: var(--concrete); }
.ju-marquee__play, .ju-marquee.is-paused .ju-marquee__pause { display: none; }
.ju-marquee.is-paused .ju-marquee__play { display: inline; }

/* ---------- Barang yang dibeli ---------- */

.ju-checklist ul, ul.ju-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ju-checklist li {
	display: grid;
	grid-template-columns: 24px 1fr;
	gap: 14px;
	align-items: start;
	padding: 13px 0;
	border-bottom: 2px dashed #CFCAC0;
	font-weight: 500;
	font-size: 1rem;
	color: var(--ink);
}
/* Penanda daftar: penampang besi profil (I-beam), motif barang yang dibeli. */
.ju-checklist li::before {
	content: "";
	width: 22px;
	height: 22px;
	margin-top: 2px;
	background: var(--signal-deep);
	-webkit-mask: url("../icons/ibeam.svg") center / contain no-repeat;
	mask: url("../icons/ibeam.svg") center / contain no-repeat;
}

#content .ju-mosaic.e-con {
	--display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	--gap: 14px;
}
.ju-mosaic .elementor-widget-image:nth-child(1) { grid-row: span 2; }
.ju-mosaic .elementor-widget-image:nth-child(4) { grid-column: span 2; }
.ju-mosaic .elementor-widget-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 2px solid var(--ink);
	border-radius: var(--radius);
	aspect-ratio: 4 / 3;
}
.ju-mosaic .elementor-widget-image:nth-child(1) img { aspect-ratio: 3 / 4.4; }
.ju-mosaic .elementor-widget-image:nth-child(4) img { aspect-ratio: 16 / 7; }
.ju-mosaic figure { margin: 0; position: relative; height: 100%; }
#content .ju-mosaic .widget-image-caption {
	position: absolute;
	left: 10px;
	bottom: 10px;
	margin: 0;
	padding: 4px 10px;
	background: var(--ink);
	color: var(--concrete);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1rem;
	border-radius: 2px;
}

/* ---------- Daftar layanan (ledger) ----------
   Nomor dipasang di judul, karena ::before pada container dipakai Elementor untuk overlay latar. */

#content .ju-ledger.e-con { --gap: 0px; counter-reset: ledger; border-top: 2px solid var(--ink); }
#content .ju-ledger__row.e-con {
	counter-increment: ledger;
	--display: grid;
	grid-template-columns: 1fr;
	--gap: 6px 32px;
	padding-block: 22px;
	border-bottom: 2px solid var(--ink);
	transition: background-color .2s;
}
.ju-ledger__row .ju-h3 .elementor-heading-title { display: flex; align-items: baseline; gap: 16px; }
.ju-ledger__row .ju-h3 .elementor-heading-title::before {
	content: counter(ledger, decimal-leading-zero);
	min-width: 2.1ch;
	font-size: 1.35em;
	line-height: .8;
	color: var(--signal-deep);
}
.ju-ledger__row .ju-body { padding-left: calc(2.1ch * 1.6 + 16px); }
@media (min-width: 900px) {
	#content .ju-ledger__row.e-con { grid-template-columns: 5fr 6fr; align-items: center; padding-block: 26px; }
	.ju-ledger__row .ju-body { padding-left: 0; }
}
.ju-ledger__row:hover { background: linear-gradient(90deg, rgb(245 130 32 / .12), transparent 70%); }

/* ---------- Nota timbang (proses) ---------- */

#content .ju-nota.e-con {
	--gap: 0px;
	background: var(--paper);
	color: var(--ink);
	--fg: var(--ink);
	--fg-soft: var(--steel);
	--focus: var(--ink);
	--accent-text: var(--signal-deep);
	padding: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 48px);
	position: relative;
	counter-reset: nota;
	transform: rotate(-0.6deg);
	/* tepi sobekan kertas nota */
	-webkit-mask: radial-gradient(circle 7px at 50% 0, #0000 98%, #000) top / 22px 51% repeat-x,
		radial-gradient(circle 7px at 50% 100%, #0000 98%, #000) bottom / 22px 51% repeat-x;
	mask: radial-gradient(circle 7px at 50% 0, #0000 98%, #000) top / 22px 51% repeat-x,
		radial-gradient(circle 7px at 50% 100%, #0000 98%, #000) bottom / 22px 51% repeat-x;
}
#content .ju-nota__head.e-con {
	--flex-direction: row;
	--justify-content: space-between;
	--align-items: flex-end;
	--flex-wrap: wrap;
	--gap: 8px 24px;
	padding-bottom: 18px;
	border-bottom: 3px double var(--ink);
}
.ju-site .ju-nota__head .ju-h2 .elementor-heading-title { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.ju-nota__meta p { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--steel); }

#content .ju-nota__row.e-con {
	counter-increment: nota;
	--display: grid;
	grid-template-columns: 1fr;
	--gap: 6px 24px;
	padding-block: 18px;
	position: relative;
}
.ju-nota__row .ju-h3 .elementor-heading-title { display: flex; align-items: center; gap: 14px; }
.ju-site .ju-nota__row .ju-h3 .elementor-heading-title { font-size: 1.2rem; }
.ju-nota__row .ju-h3 .elementor-heading-title::before {
	content: counter(nota);
	flex: none;
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	border: 2px solid var(--ink);
	border-radius: 50%;
	font-size: 1.05rem;
	box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 5px var(--ink);
}
.ju-nota__row .ju-body { padding-left: 56px; }
.ju-site .ju-sec--ink .ju-nota__row .ju-body p { color: var(--steel); }
#content .ju-nota__row.e-con::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	border-bottom: 2px dashed #B9B4AA;
	transform-origin: left;
}
@media (min-width: 760px) {
	#content .ju-nota__row.e-con { grid-template-columns: 300px 1fr; align-items: center; }
	.ju-nota__row .ju-body { padding-left: 0; }
}
#content .ju-nota__foot.e-con {
	--flex-direction: row;
	--justify-content: space-between;
	--align-items: center;
	--flex-wrap: wrap;
	--gap: 16px;
	padding-top: 22px;
}
.ju-site .ju-sec--ink .ju-nota__foot .ju-body p { font-weight: 600; color: var(--ink); }
.ju-nota .ju-stamp { width: 132px; color: var(--signal-deep); }

/* ---------- Alasan (why) ---------- */

#content .ju-reasons.e-con {
	--display: grid;
	grid-template-columns: 1fr;
	--gap: 0px 40px;
	counter-reset: reason;
}
@media (min-width: 700px) { #content .ju-reasons.e-con { grid-template-columns: 1fr 1fr; } }
#content .ju-reason.e-con {
	counter-increment: reason;
	--gap: 6px;
	padding: 22px 0 22px 0;
	border-top: 2px solid var(--ink);
}
.ju-reason .ju-h3 .elementor-heading-title::before {
	content: counter(reason, decimal-leading-zero) "  ";
	color: var(--signal-deep);
}

/* ---------- Ikon di widget (mask, mengikuti warna teks) ---------- */

.ju-i .elementor-heading-title::before,
.ju-i > .elementor-widget-container > .elementor-heading-title::before {
	content: "";
	display: block;
	width: 34px;
	height: 34px;
	margin-bottom: 14px;
	background: currentColor;
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}
.ju-i--truck { --icon: url("../icons/truck.svg"); }
.ju-i--crane { --icon: url("../icons/crane.svg"); }
.ju-i--building { --icon: url("../icons/building.svg"); }
.ju-i--motor { --icon: url("../icons/motor.svg"); }
.ju-i--scale { --icon: url("../icons/scale.svg"); }
.ju-i--clipboard { --icon: url("../icons/clipboard.svg"); }
.ju-i--cash { --icon: url("../icons/cash.svg"); }
.ju-i--tag { --icon: url("../icons/tag.svg"); }
.ju-i--helmet { --icon: url("../icons/helmet.svg"); }
.ju-i--ibeam { --icon: url("../icons/ibeam.svg"); }
.ju-i--trafo { --icon: url("../icons/trafo.svg"); }
.ju-i--genset { --icon: url("../icons/genset.svg"); }
.ju-i--panel { --icon: url("../icons/panel.svg"); }
.ju-i--pipe { --icon: url("../icons/pipe.svg"); }
.ju-i--coil { --icon: url("../icons/coil.svg"); }
.ju-i--plate { --icon: url("../icons/plate.svg"); }
.ju-i--bars { --icon: url("../icons/bars.svg"); }
.ju-i--search { --icon: url("../icons/search.svg"); }
.ju-i--whatsapp { --icon: url("../icons/whatsapp.svg"); }
.ju-i--accent .elementor-heading-title::before { background: var(--signal); }

/* ---------- Kepala halaman dalam ---------- */

#content .e-con.ju-pagehead {
	--padding-top: clamp(48px, 8vw, 104px);
	--padding-bottom: clamp(40px, 6vw, 80px);
	--justify-content: center;
	min-height: 75vh;
	min-height: 75svh;
	overflow: hidden;
	border-bottom: 6px solid var(--signal);
}
#content .ju-pagehead .ju-wrap.e-con { --gap: 18px; }
/* Ilustrasi diposisikan terhadap section (bukan blok teks), teks selalu di atas ilustrasi. */
#content .ju-pagehead > .ju-wrap.e-con { position: static; }
#content .ju-pagehead .ju-wrap > .elementor-element:not(.ju-pagehead__art):not(.ju-pagehead__bg) { position: relative; z-index: 1; }
.ju-site .ju-pagehead .ju-h1 .elementor-heading-title { max-width: 16ch; }
/* Latar ilustrasi kepala halaman, samar dan tidak bisa diklik:
   gantry crane menggantung dari atas, crane/truk berdiri di garis oranye bawah. Keduanya mengisi sisi kanan. */
#content .ju-pagehead .ju-pagehead__bg,
#content .ju-pagehead .ju-pagehead__art {
	position: absolute;
	pointer-events: none;
	color: var(--concrete);
}
#content .ju-pagehead .ju-pagehead__bg { top: 0; right: 0; width: min(760px, 56vw); opacity: .16; }
#content .ju-pagehead .ju-pagehead__art { right: var(--ju-gutter); bottom: 0; width: min(400px, 30vw); opacity: .26; }
@media (max-width: 899px) {
	/* Di HP teks memenuhi lebar layar: gantry dibuat lebih samar agar teks di atasnya tetap terbaca. */
	#content .ju-pagehead .ju-pagehead__bg { width: 120vw; right: -30vw; opacity: .08; }
	#content .ju-pagehead .ju-pagehead__art { width: min(320px, 70vw); opacity: .18; }
}
.ju-pagehead .ju-lead p { max-width: 54ch; }

/* ---------- Layanan detail ---------- */

#content .ju-service.e-con {
	--display: grid;
	grid-template-columns: 1fr;
	--gap: 16px 48px;
	padding-block: clamp(32px, 5vw, 56px);
	border-top: 2px solid var(--ink);
}
@media (min-width: 900px) { #content .ju-service.e-con { grid-template-columns: 5fr 4fr; } }
#content .ju-service__main.e-con { --gap: 14px; }
#content .ju-service__aside.e-con {
	--gap: 12px;
	background: var(--paper);
	border: 2px solid var(--ink);
	border-radius: var(--radius);
	padding: 22px 24px;
}
.ju-site .ju-service .ju-h2 .elementor-heading-title { font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
.ju-service__aside .ju-h4 .elementor-heading-title { font-size: 1.1rem; }
.ju-service .elementor-icon-list-items { margin: 0; padding: 0; }
.ju-service .elementor-icon-list-item {
	padding: 9px 0 !important;
	border-bottom: 1px dashed #C9C4BA;
	font-weight: 500;
	align-items: flex-start !important;
}
.ju-service .elementor-icon-list-item:last-child { border-bottom: 0; }
.ju-service .elementor-icon-list-icon { padding-top: 4px; }
.ju-service .elementor-icon-list-icon svg { fill: var(--signal-deep); width: 14px; height: 14px; }

/* Tabel UAEL: tampil seperti tabel nota. */
.ju-table .uael-table {
	border-collapse: collapse;
	width: 100%;
	background: var(--paper);
	border: 2px solid var(--ink);
	font-size: 1rem;
}
.ju-table .uael-table thead th, .ju-table .uael-table-col {
	padding: 14px 16px !important;
	text-align: left !important;
	vertical-align: top;
}
.ju-table .uael-table thead th {
	background: var(--ink) !important;
	color: var(--concrete) !important;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.15rem;
}
.ju-table .uael-table thead th * { color: inherit !important; font: inherit !important; }
.ju-table .uael-table tbody td, .ju-table .uael-table tbody td * { color: var(--steel) !important; }
.ju-table .uael-table tbody tr { border-top: 1px dashed #B9B4AA; background: var(--paper) !important; }
.ju-table .uael-table tbody tr:nth-child(even) { background: #F8F6F1 !important; }
.ju-table .uael-table tbody td:first-child, .ju-table .uael-table tbody td:first-child * { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--ink) !important; }
.ju-table .uael-table-wrap, .ju-table .uael-table-wrapper { overflow-x: auto; }
/* Di HP tabel menjadi kartu per jenis besi; label kolom diambil dari data-title UAEL. */
@media (max-width: 699px) {
	#content .ju-table .uael-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	#content .ju-table .uael-table, #content .ju-table .uael-table tbody,
	#content .ju-table .uael-table tr, #content .ju-table .uael-table td { display: block; width: 100%; border: 0; }
	#content .ju-table .uael-table tbody tr { padding: 12px 0; border-top: 2px solid var(--ink); }
	#content .ju-table .uael-table tbody tr:first-child { border-top: 0; }
	#content .ju-table .uael-table-col { padding: 4px 16px !important; }
	#content .ju-table .uael-table tbody td:not(:first-child)::before {
		content: attr(data-title);
		display: block;
		font-family: var(--font-display);
		font-weight: 600;
		font-size: .95rem;
		color: var(--signal-deep);
	}
}

/* ---------- Visi misi & nilai ---------- */

#content .ju-vm.e-con { --display: grid; grid-template-columns: 1fr; --gap: 20px; }
@media (min-width: 800px) { #content .ju-vm.e-con { grid-template-columns: 1fr 1fr; } }
#content .ju-vm__card.e-con {
	--gap: 12px;
	padding: clamp(24px, 3vw, 40px);
	border: 2px solid var(--ink-line);
	border-radius: var(--radius);
}
.ju-vm__card:first-child { border-color: var(--signal); }
.ju-vm__card .ju-body p { font-size: 1.15rem; color: #D6D2C9; }

#content .ju-values.e-con { --display: grid; grid-template-columns: 1fr; --gap: 0 40px; }
@media (min-width: 700px) { #content .ju-values.e-con { grid-template-columns: 1fr 1fr; } }
#content .ju-value.e-con { --gap: 6px; padding-block: 24px; border-top: 2px solid var(--ink); }

/* ---------- Kontak ---------- */

#content .ju-contact-panel.e-con {
	--gap: 18px;
	background: var(--ink);
	color: var(--concrete);
	--fg: var(--concrete);
	--fg-soft: var(--dust);
	--focus: var(--signal);
	--accent-text: var(--signal);
	padding: clamp(24px, 3.5vw, 40px);
	border-radius: var(--radius);
}
.ju-contact-list { margin: 0; display: grid; gap: 0; }
.ju-contact-list__row {
	display: grid;
	grid-template-columns: 32px 1fr;
	gap: 2px 14px;
	padding: 16px 0;
	border-bottom: 1px solid var(--ink-line);
}
.ju-contact-list__row:last-child { border-bottom: 0; }
.ju-contact-list .ju-icon { width: 26px; height: 26px; grid-row: span 2; color: var(--signal); }
.ju-contact-list dt { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--dust); }
.ju-contact-list dd { margin: 0; color: var(--concrete); font-weight: 500; }
.ju-contact-list a { color: var(--concrete); text-decoration-color: var(--signal); }
.ju-contact-list a:hover { color: var(--signal); }

#content .ju-form-panel.e-con {
	--gap: 16px;
	background: var(--paper);
	border: 2px solid var(--ink);
	border-radius: var(--radius);
	padding: clamp(24px, 3.5vw, 40px);
}

.ju-map .elementor-custom-embed iframe, .ju-map iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 7;
	min-height: 320px;
	border: 2px solid var(--ink) !important;
	border-radius: var(--radius);
	filter: grayscale(.6) contrast(1.05);
}

/* ---------- Contact Form 7 ---------- */

.ju-form { display: grid; gap: 18px; }
.ju-form__row { display: grid; gap: 18px; }
@media (min-width: 640px) { .ju-form__row--2 { grid-template-columns: 1fr 1fr; } }
.ju-field { display: grid; gap: 6px; }
.ju-field__label { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--ink); }
.ju-field__hint { font-size: .92rem; color: var(--steel); }
.ju-field__req { color: var(--signal-deep); }
.ju-form input[type="text"], .ju-form input[type="tel"], .ju-form input[type="email"],
.ju-form select, .ju-form textarea {
	width: 100%;
	min-height: 50px;
	padding: 12px 14px;
	font: inherit;
	font-size: 1rem;
	color: var(--ink);
	background: var(--concrete);
	border: 2px solid #8A867E;
	border-radius: var(--radius);
	transition: border-color .15s, background-color .15s;
}
.ju-form textarea { min-height: 130px; resize: vertical; }
.ju-form input:hover, .ju-form select:hover, .ju-form textarea:hover { border-color: var(--ink); }
.ju-form input:focus-visible, .ju-form select:focus-visible, .ju-form textarea:focus-visible {
	background: var(--paper);
	border-color: var(--ink);
	outline: 3px solid var(--signal);
	outline-offset: 1px;
}
.ju-form input[type="file"] { font: inherit; font-size: .95rem; padding: 10px 0; }
.ju-form input[type="file"]::file-selector-button {
	margin-right: 12px;
	padding: 10px 16px;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1rem;
	background: var(--ink);
	color: var(--concrete);
	border: 0;
	border-radius: var(--radius);
	cursor: pointer;
}
.ju-form .wpcf7-form-control-wrap { display: block; }
.ju-form .wpcf7-not-valid { border-color: #B42318 !important; background: #FFF4F2; }
.ju-form .wpcf7-not-valid-tip { color: #B42318; font-size: .95rem; font-weight: 500; margin-top: 6px; }
.ju-form .wpcf7-submit { width: 100%; }
@media (min-width: 640px) { .ju-form .wpcf7-submit { width: auto; } }
.ju-form .wpcf7-spinner { margin: 0 0 0 12px; vertical-align: middle; }
.ju-site .wpcf7 form .wpcf7-response-output {
	margin: 18px 0 0;
	padding: 14px 16px;
	border: 2px solid var(--ink);
	border-radius: var(--radius);
	font-weight: 500;
}
.ju-site .wpcf7 form.sent .wpcf7-response-output { background: #EAF6EC; border-color: #1E7A34; color: #14532D; }
.ju-site .wpcf7 form.invalid .wpcf7-response-output,
.ju-site .wpcf7 form.failed .wpcf7-response-output,
.ju-site .wpcf7 form.spam .wpcf7-response-output { background: #FFF4F2; border-color: #B42318; color: #7A1A12; }
.ju-site .wpcf7 form.submitting .wpcf7-submit { opacity: .7; }

/* ---------- CTA pita hazard (sekali per halaman) ---------- */

#content .e-con.ju-cta {
	--padding-top: clamp(64px, 9vw, 112px);
	--padding-bottom: clamp(64px, 9vw, 112px);
	overflow: hidden;
}
#content .e-con.ju-cta::before, #content .e-con.ju-cta::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 18px;
	background: repeating-linear-gradient(-45deg, var(--signal) 0 18px, var(--ink) 18px 36px);
}
#content .e-con.ju-cta::before { top: 0; }
#content .e-con.ju-cta::after { bottom: 0; }
#content .ju-cta .ju-split.e-con { align-items: center; }
.ju-cta .ju-h2 .elementor-heading-title { font-size: clamp(1.9rem, 3.4vw, 2.75rem); }
.ju-cta__phone p { margin: 0; color: var(--dust); }
.ju-cta__phone a { color: var(--concrete); font-weight: 600; }

/* ---------- Galeri ---------- */

.ju-gallery__filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.ju-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 8px 16px;
	background: transparent;
	color: var(--ink);
	border: 2px solid var(--ink);
	border-radius: var(--radius);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.1rem;
	transition: background-color .15s, color .15s;
}
.ju-chip:hover { background: var(--concrete-2); color: var(--ink); }
.ju-chip[aria-pressed="true"] { background: var(--ink); color: var(--concrete); }
.ju-chip__count {
	min-width: 26px;
	padding: 0 6px;
	border-radius: 2px;
	background: var(--signal);
	color: var(--ink);
	font-size: .95rem;
	text-align: center;
}

.ju-gallery__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
	gap: 20px;
}
.ju-gallery__item { display: flex; flex-direction: column; background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius); overflow: hidden; }
.ju-gallery__item[hidden] { display: none; }
.ju-gallery__open {
	display: block;
	padding: 0;
	border: 0;
	background: var(--ink);
	aspect-ratio: 4 / 3;
	overflow: hidden;
	position: relative;
}
.ju-site .ju-gallery__open img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out), opacity .2s; }
.ju-gallery__open:hover img { transform: scale(1.05); opacity: .85; }
.ju-gallery__open::after {
	content: "Perbesar";
	position: absolute;
	right: 10px;
	bottom: 10px;
	padding: 4px 10px;
	background: var(--signal);
	color: var(--ink);
	font-family: var(--font-display);
	font-weight: 700;
	border-radius: 2px;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .2s, transform .2s;
}
.ju-gallery__open:hover::after, .ju-gallery__open:focus-visible::after { opacity: 1; transform: none; }
.ju-gallery__open:focus-visible { outline-offset: -5px; outline-color: var(--signal); }
.ju-gallery__caption { padding: 14px 16px 16px; border-top: 2px solid var(--ink); }
.ju-gallery__caption h3 { font-size: 1.3rem; margin: 0 0 4px; }
.ju-gallery__caption p { margin: 0; font-size: .95rem; color: var(--steel); }

.ju-lightbox {
	width: min(1100px, 94vw);
	max-height: 94dvh;
	padding: 0;
	border: 2px solid var(--signal);
	border-radius: var(--radius);
	background: var(--ink);
	color: var(--concrete);
	--focus: var(--signal);
	overflow: hidden;
}
.ju-lightbox::backdrop { background: rgb(10 10 12 / .86); }
.ju-lightbox__figure { margin: 0; }
.ju-lightbox__img { display: block; width: 100%; max-height: calc(94dvh - 130px); object-fit: contain; background: #000; }
.ju-lightbox__caption { padding: 14px 64px 4px 20px; font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; }
.ju-lightbox__controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 20px 16px; }
.ju-lightbox__count { color: var(--dust); font-weight: 500; }
.ju-lightbox__btn, .ju-lightbox__close {
	min-height: 44px;
	padding: 8px 16px;
	background: transparent;
	color: var(--concrete);
	border: 2px solid var(--ink-line);
	border-radius: var(--radius);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.05rem;
}
.ju-site .ju-lightbox__btn:hover, .ju-site .ju-lightbox__btn:focus, .ju-site .ju-lightbox__close:hover, .ju-site .ju-lightbox__close:focus { border-color: var(--signal); background: var(--ink); color: var(--concrete); }
.ju-lightbox__close { position: absolute; top: 10px; right: 10px; width: 48px; padding: 8px; background: var(--ink); }
.ju-lightbox__close .ju-icon { width: 24px; height: 24px; }
.ju-gallery-empty, .ju-empty { display: grid; gap: 16px; justify-items: start; padding: 32px; border: 2px dashed var(--steel); border-radius: var(--radius); }

/* ---------- Footer ---------- */

.ju-footer {
	background: var(--ink);
	color: var(--concrete);
	--focus: var(--signal);
	--accent-text: var(--signal);
	border-top: 6px solid var(--signal);
}
.ju-footer__inner {
	max-width: calc(var(--ju-max) + 2 * var(--ju-gutter));
	margin-inline: auto;
	padding: clamp(48px, 7vw, 88px) var(--ju-gutter) 40px;
	display: grid;
	gap: 40px;
	grid-template-columns: 1fr;
}
@media (min-width: 760px) { .ju-footer__inner { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .ju-footer__inner { grid-template-columns: 5fr 4fr 2fr; gap: 56px; } }
.ju-footer__lead { display: grid; gap: 22px; justify-items: start; align-content: start; }
.ju-footer .ju-brand { margin: 0; }
.ju-footer__pitch { margin: 0; color: #D6D2C9; max-width: 44ch; }
.ju-footer__title { font-size: 1.1rem; letter-spacing: .04em; color: var(--dust); margin: 0 0 6px; }
.ju-footer__list a {
	display: block;
	padding: 9px 0;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.1rem;
	color: var(--concrete);
	text-decoration: none;
}
.ju-footer__list a:hover { color: var(--signal); }
.ju-footer__base {
	max-width: calc(var(--ju-max) + 2 * var(--ju-gutter));
	margin-inline: auto;
	padding: 20px var(--ju-gutter) 28px;
	border-top: 1px solid var(--ink-line);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	font-size: .92rem;
	color: var(--dust);
}
.ju-footer__base p { margin: 0; }
.ju-footer__base a { color: var(--concrete); }

/* ---------- Artikel (Astra) ---------- */

.ju-site:not(.elementor-page) .site-content { padding-block: clamp(32px, 5vw, 64px); }
.ju-site .ast-archive-description, .ju-site.blog .ast-archive-description { background: var(--ink); color: var(--concrete); border-radius: var(--radius); }
.ju-site .ast-archive-description .ast-archive-title { color: var(--concrete); font-size: clamp(2.2rem, 5vw, 3.6rem); }
.ju-site.archive .ast-article-post, .ju-site.blog .ast-article-post, .ju-site.search .ast-article-post { background: transparent; }
.ju-site.blog .ast-article-inner, .ju-site.archive .ast-article-inner {
	background: var(--paper);
	border: 2px solid var(--ink);
	border-radius: var(--radius);
	overflow: hidden;
	height: 100%;
}
.ju-site .entry-title a { color: var(--ink); text-decoration: none; }
.ju-site .entry-title a:hover { color: var(--signal-deep); text-decoration: underline; }
.ju-site.single-post .entry-title { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.ju-site.single-post .entry-content { font-size: 1.1rem; }
.ju-site.single-post .entry-content > * { max-width: 70ch; }
.ju-site.single-post .entry-content h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-top: 1.6em; }
.ju-site.single-post .entry-content h3 { font-size: 1.5rem; margin-top: 1.4em; }
.ju-site .ast-single-post-order .entry-meta, .ju-site .entry-meta { color: var(--steel); }
.ju-site .ast-read-more-container a, .ju-site .read-more a { font-family: var(--font-display); font-weight: 600; color: var(--signal-deep); }
.ju-post-cta {
	margin-top: 48px;
	padding: 28px;
	background: var(--ink);
	color: var(--concrete);
	--focus: var(--signal);
	border-radius: var(--radius);
	display: grid;
	gap: 12px;
	justify-items: start;
	max-width: 70ch;
}
.ju-post-cta p { margin: 0; color: #D6D2C9; }
.ju-post-cta .ju-post-cta__title { font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; color: var(--concrete); }
.ju-post-cta .ju-btn { box-shadow: 4px 4px 0 var(--concrete); }

/* ---------- Joinchat ---------- */

.ju-site .joinchat { --color: 22, 23, 27; --s: 60px; --bottom: 20px; --right: 20px; }
.ju-site .joinchat__button { border: 2px solid var(--signal); }
.ju-site .joinchat__box { border-radius: var(--radius); }
.ju-site .joinchat__header { font-family: var(--font-display); }

/* ---------- Gerak (MOTION 2) ----------
   Hanya aktif saat JS memasang .ju-motion dan pengguna tidak meminta gerak dikurangi. */

@media (prefers-reduced-motion: no-preference) {
	.ju-motion .ju-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
	.ju-motion .ju-reveal.is-in { opacity: 1; transform: none; }

	.ju-motion .ju-stagger > * { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
	.ju-motion .ju-stagger.is-in > * { opacity: 1; transform: none; }

	/* Crane: magnet mengayun lalu diam, seperti beban yang baru diangkat. */
	.ju-ill--crane .ill-load { transform-box: view-box; transform-origin: 152px 66px; }
	.ju-motion .ju-ill--crane.is-in .ill-load { animation: ju-swing 2.6s var(--ease-out) both; }
	.ju-ill--crane .ill-held { transform-box: view-box; }
	.ju-motion .ju-ill--crane.is-in .ill-held { animation: ju-lift 1.1s var(--ease-out) both; }

	/* Truk: masuk dari kiri, roda berputar selama bergerak. */
	.ju-motion .ju-ill--truck .ill-truck { transform: translateX(-70%); }
	.ju-motion .ju-ill--truck.is-in .ill-truck { animation: ju-drive 1.6s var(--ease-out) both; }
	.ju-ill--truck .ill-wheel { transform-box: fill-box; transform-origin: center; }
	.ju-motion .ju-ill--truck.is-in .ill-wheel { animation: ju-roll 1.6s var(--ease-out) both; }

	/* Nota: garis putus-putus tergambar baris demi baris, stempel jatuh terakhir. */
	.ju-motion .ju-nota .ju-nota__row::after { transform: scaleX(0); transition: transform .6s var(--ease-out); transition-delay: calc(var(--i, 0) * 160ms + 200ms); }
	.ju-motion .ju-nota.is-in .ju-nota__row::after { transform: scaleX(1); }
	.ju-motion .ju-nota .ju-stamp { opacity: 0; transform: rotate(-12deg) scale(1.6); }
	.ju-motion .ju-nota.is-in .ju-stamp { animation: ju-stamp .45s cubic-bezier(.3, 1.4, .5, 1) 1.3s both; }
	.ju-motion .ju-hero .ju-stamp { opacity: 0; }
	.ju-motion .ju-hero .ju-ill--crane.is-in ~ .ju-stamp,
	.ju-motion .ju-hero .is-in .ju-stamp { animation: ju-stamp .45s cubic-bezier(.3, 1.4, .5, 1) 1.6s both; }

	.ju-marquee__track { animation: ju-marquee 95s linear infinite; }
	.ju-marquee:hover .ju-marquee__track,
	.ju-marquee:focus-within .ju-marquee__track,
	.ju-marquee.is-paused .ju-marquee__track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
	.ju-marquee__toggle { display: none; }
	.ju-marquee__viewport { mask-image: none; }
	.ju-marquee__track { flex-wrap: wrap; width: auto; padding-inline: var(--ju-gutter); }
	.ju-marquee__track li:nth-child(n + 14) { display: none; }
	*, *::before, *::after { scroll-behavior: auto !important; }
}

@keyframes ju-swing {
	0% { transform: rotate(9deg); }
	30% { transform: rotate(-5deg); }
	55% { transform: rotate(2.5deg); }
	78% { transform: rotate(-1deg); }
	100% { transform: rotate(0); }
}
@keyframes ju-lift { from { transform: translateY(26px); } to { transform: none; } }
@keyframes ju-drive { from { transform: translateX(-70%); } to { transform: none; } }
@keyframes ju-roll { from { transform: rotate(-540deg); } to { transform: none; } }
@keyframes ju-stamp {
	0% { opacity: 0; transform: rotate(-12deg) scale(1.6); }
	100% { opacity: 1; transform: rotate(-12deg) scale(1); }
}
@keyframes ju-marquee { to { transform: translateX(-50%); } }

/* Astra: latar halaman artikel dan tombol di dalam konten. */
.ju-site.ast-separate-container, .ju-site.ast-plain-container, .ju-site .site-content { background-color: var(--concrete); }
.ju-site .ju-post-cta .ju-btn, .ju-site .entry-content .ju-btn { text-decoration: none; }
.ju-site .ast-post-nav, .ju-site .post-navigation .nav-links a { color: var(--steel); }

/* Arsip/pencarian kosong (template-parts/content-none.php). */
.ju-site .ju-empty { text-align: left; }
.ju-empty p { margin: 0; }
.ju-search { display: grid; gap: 6px; width: 100%; max-width: 520px; }
.ju-search__row { display: flex; gap: 10px; }
.ju-search input[type="search"] {
	flex: 1;
	min-width: 0;
	min-height: 50px;
	padding: 10px 14px;
	font: inherit;
	color: var(--ink);
	background: var(--paper);
	border: 2px solid #8A867E;
	border-radius: var(--radius);
}
.ju-search input[type="search"]:hover { border-color: var(--ink); }
.ju-search input[type="search"]:focus-visible { border-color: var(--ink); outline: 3px solid var(--signal); outline-offset: 1px; }

/* Editor Elementor: semua elemen yang biasanya menunggu reveal langsung terlihat. */
.elementor-editor-active .ju-reveal,
.elementor-editor-active .ju-stagger > *,
.elementor-editor-active .ju-stamp,
.elementor-editor-active .ju-ill--truck .ill-truck { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
.elementor-editor-active .ju-stamp { transform: rotate(-12deg) !important; }
.elementor-editor-active .ju-nota .ju-nota__row::after { transform: none !important; }

/* ---------- Katalog barang (tile) ----------
   Ukuran seragam disengaja: ini daftar kategori setara, bukan fitur dengan bobot berbeda. */
#content .ju-tiles.e-con {
	--display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
	--gap: 0px;
	border-top: 2px solid currentColor;
}
#content .ju-tiles--2.e-con { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
#content .ju-tile.e-con {
	--gap: 6px;
	padding: 20px 16px 22px 0;
	border-bottom: 1px solid var(--ink-line);
}
.ju-sec:not(.ju-sec--ink) .ju-tile.e-con { border-bottom-color: #CFCAC0; }
.ju-site .ju-h4 .elementor-heading-title { font-size: 1.2rem; }
.ju-tile .ju-i .elementor-heading-title::before { width: 30px; height: 30px; margin-bottom: 10px; }
.ju-site .ju-tile .elementor-widget-text-editor { font-size: .98rem; }

/* ---------- Strip foto ---------- */
#content .ju-strip.e-con {
	--display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	--gap: 14px;
}
@media (min-width: 800px) { #content .ju-strip.e-con { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ju-strip figure { margin: 0; position: relative; }
.ju-strip img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 2px solid var(--ink); border-radius: var(--radius); }
#content .ju-strip .widget-image-caption {
	position: absolute;
	left: 8px;
	right: 8px;
	bottom: 8px;
	margin: 0;
	padding: 4px 8px;
	background: var(--ink);
	color: var(--concrete);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: .95rem;
	border-radius: 2px;
	width: fit-content;
}

/* ---------- FAQ (widget Accordion Elementor) ---------- */
.ju-faq .elementor-accordion { border-top: 2px solid var(--ink); }
.ju-site .ju-faq .elementor-accordion-item { border: 0; border-bottom: 1px solid #CFCAC0; }
.ju-site .ju-faq .elementor-tab-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 0;
	border: 0;
	cursor: pointer;
}
.ju-site .ju-faq .elementor-tab-title .elementor-accordion-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.2rem;
	line-height: 1.2;
	color: var(--ink);
	text-decoration: none;
}
.ju-site .ju-faq .elementor-tab-title::after {
	content: "";
	flex: none;
	width: 14px;
	height: 14px;
	background:
		linear-gradient(var(--signal-deep) 0 0) center / 14px 3px no-repeat,
		linear-gradient(var(--signal-deep) 0 0) center / 3px 14px no-repeat;
	transition: transform .2s;
}
.ju-site .ju-faq .elementor-tab-title.elementor-active::after { transform: rotate(45deg); }
.ju-site .ju-faq .elementor-tab-title:hover .elementor-accordion-title { text-decoration: underline; text-decoration-color: var(--signal); text-underline-offset: 4px; }
.ju-site .ju-faq .elementor-tab-title:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.ju-site .ju-faq .elementor-accordion-icon { display: none; }
.ju-site .ju-faq .elementor-tab-content { padding: 0 32px 20px 0; border: 0; color: var(--steel); font-size: 1.02rem; }

/* ---------- Kebal terhadap gaya default per-elemen Elementor ----------
   Editor (dan CSS halaman setelah klien menyimpan) menulis warna global ke setiap widget dengan
   spesifisitas .elementor-12 .elementor-element.elementor-element-xxx (0,4,0). Warna yang bergantung
   pada section terang/gelap dipasang ulang dengan #content agar selalu menang. */
#content .elementor-widget-heading .elementor-heading-title { color: inherit; }
#content .ju-kicker .elementor-heading-title { color: var(--accent-text); }
#content .ju-h1 .elementor-heading-title em, #content .ju-h2 .elementor-heading-title em { color: var(--accent-text); }
#content .elementor-widget-text-editor { color: var(--fg-soft); }
#content .ju-faq .elementor-tab-title .elementor-accordion-title { color: var(--ink); }
#content .ju-faq .elementor-tab-content { color: var(--steel); }

#content .ju-btnw .elementor-button { background: var(--signal); color: var(--ink); border-color: var(--ink); }
#content .ju-btnw .elementor-button:hover { background: #FF9440; color: var(--ink); }
#content .ju-btnw--ghost .elementor-button { background: transparent; color: var(--fg); border-color: currentColor; }
#content .ju-btnw--ghost .elementor-button:hover { background: var(--fg); color: var(--ink); }
#content .ju-sec:not(.ju-sec--ink) .ju-btnw--ghost .elementor-button:hover { color: var(--concrete); }
#content .ju-textlink .elementor-button,
#content .ju-textlink .elementor-button:hover { background: none; color: var(--fg); }
#content .elementor-widget-image .widget-image-caption { color: var(--concrete); }

/* ---------- Kontak: kolom kiri (panel + peta) setinggi form agar tidak ada ruang kosong ---------- */
#content .ju-split--stretch.e-con { align-items: stretch; }
#content .ju-contact-col.e-con { --gap: 20px; }
#content .ju-map-card.e-con {
	--gap: 10px;
	flex: 1 1 auto;
	background: var(--paper);
	border: 2px solid var(--ink);
	border-radius: var(--radius);
	padding: 20px 20px 0;
	overflow: hidden;
}
#content .ju-map-card .ju-map { flex: 1 1 auto; display: flex; flex-direction: column; margin: 8px -20px 0; }
#content .ju-map-card .elementor-custom-embed { flex: 1 1 auto; display: flex; }
#content .ju-map-card .ju-map iframe {
	flex: 1 1 auto;
	height: 100%;
	min-height: 260px;
	aspect-ratio: auto;
	border: 0 !important;
	border-top: 2px solid var(--ink) !important;
	border-radius: 0;
}

.ju-service { scroll-margin-top: 110px; }