/*
 * Armada Core — tampilan depan
 *
 * Arah visualnya diambil dari kartu undangan, bukan dari perangkat jalan.
 * Elemen tanda tangannya adalah bingkai garis ganda: bidang bergaris rangkap
 * yang membingkai kelas kendaraan dan status ketersediaan.
 *
 * Bingkai itu menggantikan plat harga milik plugin mobil. Di layanan ini
 * harga tidak pernah ditampilkan, jadi yang perlu menonjol adalah kesan yang
 * ditawarkan tiap kelas dan apakah tanggalnya masih terbuka.
 *
 * Warna aksen memakai merah tua, bukan hijau rambu. Merah tua lazim pada
 * undangan pernikahan Jawa dan cukup gelap untuk tetap terbaca sebagai warna
 * tombol yang serius, bukan perayaan yang berisik.
 *
 * Tanpa font eksternal, dengan alasan yang sama seperti sebelumnya:
 * ratusan halaman dengan LCP di bawah dua detik pada koneksi seluler.
 */

/*
 * Variabel dipasang di :root, bukan di .arm.
 *
 * Sebagian elemen plugin sengaja dicetak di luar .arm — bilah lengket ada
 * setelah penutup main supaya posisinya tidak terikat wadah mana pun. Selama
 * variabel hanya hidup di dalam .arm, elemen itu kehilangan seluruh warnanya:
 * latar tombol menjadi tidak berwarna sementara teksnya tetap putih, jadi
 * tombol tampak hilang sama sekali.
 */

:root {
	--arm-ink: #16151a;
	--arm-paper: #f7f6f4;
	--arm-card: #ffffff;
	--arm-sign: #6f2733;
	--arm-sign-rgb: 111, 39, 51;
	--arm-sign-deep: #551d27;
	--arm-amber: #b08d57;
	--arm-line: #dedbd6;
	--arm-muted: #5e5b63;

	--arm-max: 1240px;
	--arm-shadow-1: 0 1px 2px rgba(20, 24, 26, 0.05), 0 2px 8px rgba(20, 24, 26, 0.04);
	--arm-shadow-2: 0 2px 4px rgba(20, 24, 26, 0.06), 0 14px 30px rgba(20, 24, 26, 0.10);
	--arm-ease: cubic-bezier(0.22, 0.8, 0.3, 1);

	--arm-radius: 14px;
	--arm-gap: clamp(20px, 4vw, 38px);

	--arm-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
}

.arm {
	background: var(--arm-paper);
	color: var(--arm-ink);
	font-family: var(--arm-sans);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.arm *,
.arm *::before,
.arm *::after {
	box-sizing: border-box;
}

.arm-wrap {
	max-width: var(--arm-max, 1240px);
	margin: 0 auto;
	padding: clamp(20px, 5vw, 52px) 20px 96px;
}

/* Tipografi */

.arm-title {
	margin: 6px 0 12px;
	font-size: clamp(28px, 5vw, 42px);
	font-weight: 750;
	line-height: 1.12;
	letter-spacing: -0.022em;
}

.arm-h2 {
	margin: 0 0 10px;
	font-size: clamp(20px, 2.6vw, 25px);
	font-weight: 700;
	letter-spacing: -0.014em;
}

.arm-h2 a {
	color: inherit;
	text-decoration: none;
}

.arm-h2 a:hover {
	color: var(--arm-sign);
}

.arm-h3 {
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.008em;
}

.arm-h3 a {
	color: inherit;
	text-decoration: none;
}

.arm-eyebrow {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--arm-sign);
}

.arm-eyebrow--link {
	text-decoration: none;
	border-bottom: 1px solid rgba(var(--arm-sign-rgb), 0.3);
}

.arm-lede {
	margin: 0 0 4px;
	max-width: 46ch;
	font-size: clamp(17px, 2vw, 19px);
	color: var(--arm-muted);
}

.arm-sub {
	margin: -4px 0 16px;
	max-width: 60ch;
	font-size: 15px;
	color: var(--arm-muted);
}

.arm-prose {
	max-width: 66ch;
}

.arm-prose a {
	color: var(--arm-sign);
}

/* Remah roti */

.arm-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
	font-size: 13px;
	color: var(--arm-muted);
}

.arm-crumbs li + li::before {
	content: "›";
	margin-right: 6px;
	color: #9aa39c;
}

.arm-crumbs a {
	color: var(--arm-muted);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.arm-crumbs a:hover {
	color: var(--arm-sign);
	border-bottom-color: currentColor;
}

/* Elemen tanda tangan: bingkai undangan */

.arm-bingkai {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 10px 20px;
	background: #fff;
	border: 1px solid var(--arm-ink);
	box-shadow: 0 0 0 1px #fff inset, 0 0 0 4px var(--arm-ink) inset;
	border-radius: 2px;
	text-align: center;
}

.arm-bingkai__utama {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--arm-ink);
}

.arm-bingkai__bawah {
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--arm-muted);
}

.arm-bingkai--besar {
	padding: 14px 28px;
}

.arm-bingkai--besar .arm-bingkai__utama {
	font-size: 16px;
}

.arm-bingkai--kecil {
	padding: 7px 13px;
	box-shadow: 0 0 0 1px #fff inset, 0 0 0 3px var(--arm-ink) inset;
}

.arm-bingkai--kecil .arm-bingkai__utama {
	font-size: 11px;
	letter-spacing: 0.12em;
}


/* Hero */

.arm-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: var(--arm-gap);
	align-items: center;
	margin-bottom: 34px;
}

.arm-hero__media {
	position: relative;
	border-radius: var(--arm-radius);
	overflow: hidden;
	background: #eceae7;
}

.arm-hero__img {
	display: block;
	width: 100%;
	height: auto;
}

.arm-hero__placeholder,
.arm-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 4 / 3;
	color: #bab5ae;
	background:
		radial-gradient(120% 90% at 50% 0%, #f6f4f1 0%, #eae7e3 60%, #e2ded9 100%);
}

.arm-card__placeholder svg,
.arm-hero__placeholder svg {
	width: 34%;
	max-width: 84px;
	height: auto;
	opacity: 0.85;
}

.arm-hero__placeholder svg {
	width: 22%;
}

.arm-hero__panel .arm-bingkai {
	margin: 18px 0 16px;
}

/* Tombol */

.arm-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 15px 26px;
	background: var(--arm-sign);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.005em;
	text-decoration: none;
	border-radius: 10px;
	box-shadow: 0 1px 0 var(--arm-sign-deep), 0 6px 18px rgba(var(--arm-sign-rgb), 0.22);
	transition: background 0.25s var(--arm-ease), transform 0.25s var(--arm-ease),
		box-shadow 0.25s var(--arm-ease);
}

.arm-cta:hover,
.arm-cta:focus-visible {
	background: var(--arm-sign-deep);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 1px 0 var(--arm-sign-deep), 0 10px 26px rgba(var(--arm-sign-rgb), 0.3);
}

.arm-cta--sm {
	padding: 11px 18px;
	font-size: 15px;
}

.arm *:focus-visible {
	outline: 3px solid var(--arm-amber);
	outline-offset: 2px;
}

/* Papan penunjuk */

.arm-sign {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	background: linear-gradient(135deg, var(--arm-sign) 0%, var(--arm-sign-deep) 100%);
	color: #fff;
	border-radius: var(--arm-radius);
	overflow: hidden;
	margin: 0 0 var(--arm-gap);
	box-shadow: var(--arm-shadow-1);
}

.arm-sign__cell {
	padding: 16px 20px;
	border-right: 1px solid rgba(255, 255, 255, 0.16);
}

.arm-sign__cell:last-child {
	border-right: 0;
}

.arm-sign__label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.68);
}

.arm-sign__value {
	display: block;
	margin-top: 3px;
	font-size: 19px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* Panel instrumen */

.arm-cluster {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	margin: 0 0 var(--arm-gap);
	padding: 0;
	background: var(--arm-card);
	border: 1px solid var(--arm-line);
	border-radius: var(--arm-radius);
	overflow: hidden;
}

.arm-cluster__cell {
	padding: 15px 18px;
	border-right: 1px solid var(--arm-line);
}

.arm-cluster__cell:last-child {
	border-right: 0;
}

.arm-cluster dt {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--arm-muted);
}

.arm-cluster dd {
	margin: 4px 0 0;
	font-size: 18px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* Bagian */

.arm-section {
	margin: 0 0 var(--arm-gap);
}

.arm-head {
	margin-bottom: 26px;
}

.arm-two {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: var(--arm-gap);
	margin-bottom: var(--arm-gap);
}

.arm-box {
	padding: 22px;
	background: var(--arm-card);
	border: 1px solid var(--arm-line);
	border-radius: var(--arm-radius);
}

.arm-box + .arm-box {
	margin-top: 16px;
}

.arm-box--quiet {
	background: transparent;
	border-style: dashed;
}

.arm-box__text {
	margin: 0 0 14px;
	font-size: 15px;
	color: var(--arm-muted);
}

.arm-closing {
	padding: 26px;
	background: var(--arm-card);
	border: 1px solid var(--arm-line);
	border-radius: var(--arm-radius);
}

/* Kartu */

.arm-grid {
	display: grid;
	gap: 18px;
}

.arm-grid--3 {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 215px), 1fr));
}

.arm-grid--4 {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 185px), 1fr));
}

.arm-card {
	position: relative;
	background: var(--arm-card);
	border: 1px solid var(--arm-line);
	border-radius: var(--arm-radius);
	overflow: hidden;
	box-shadow: var(--arm-shadow-1);
	transition: transform 0.35s var(--arm-ease), box-shadow 0.35s var(--arm-ease),
		border-color 0.35s var(--arm-ease);
}

.arm-card:hover {
	border-color: transparent;
	transform: translateY(-4px);
	box-shadow: var(--arm-shadow-2);
}

.arm-card--off {
	opacity: 0.62;
}

.arm-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.arm-card__media {
	position: relative;
	overflow: hidden;
	background: #eceae7;
}

/* Bayangan tipis di kaki foto supaya teks di bawahnya tidak terasa melayang. */
.arm-card__media::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 38%;
	background: linear-gradient(to top, rgba(20, 24, 26, 0.16), transparent);
	opacity: 0;
	transition: opacity 0.35s var(--arm-ease);
}

.arm-card:hover .arm-card__media::after {
	opacity: 1;
}

.arm-card__img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.55s var(--arm-ease);
}

.arm-card:hover .arm-card__img {
	transform: scale(1.045);
}

.arm-card__body {
	flex: 1;
	padding: 14px 16px 6px;
}

.arm-card__title {
	margin: 5px 0 3px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.arm-card__spec {
	margin: 0;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	color: var(--arm-muted);
}

.arm-card__foot {
	padding: 0 16px 16px;
}

/* Daftar dan chip */

.arm-list {
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--arm-card);
	border: 1px solid var(--arm-line);
	border-radius: var(--arm-radius);
	overflow: hidden;
}

.arm-list__row + .arm-list__row {
	border-top: 1px solid var(--arm-line);
}

.arm-list__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 15px 20px;
	color: inherit;
	text-decoration: none;
}

.arm-list__link:hover {
	background: #faf9f7;
}

.arm-list__name {
	font-weight: 650;
}

.arm-list__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.arm-list__km {
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	color: var(--arm-muted);
}

.arm-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 var(--arm-gap);
	padding: 0;
	list-style: none;
}

.arm-chips a {
	display: inline-block;
	padding: 7px 14px;
	background: var(--arm-card);
	border: 1px solid var(--arm-line);
	border-radius: 20px;
	font-size: 14px;
	font-weight: 600;
	color: var(--arm-ink);
	text-decoration: none;
}

.arm-chips a:hover {
	border-color: var(--arm-sign);
	color: var(--arm-sign);
}

.arm-tag {
	display: inline-block;
	padding: 3px 9px;
	background: #eeece9;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 700;
	color: var(--arm-muted);
}

.arm-tag--ok {
	background: #f2eaec;
	color: var(--arm-sign);
}

/* Daftar bercentang */

.arm-ticks {
	margin: 0;
	padding: 0;
	list-style: none;
	max-width: 66ch;
}

.arm-ticks li {
	position: relative;
	padding: 6px 0 6px 28px;
}

.arm-ticks li::before {
	content: "";
	position: absolute;
	top: 15px;
	left: 4px;
	width: 9px;
	height: 9px;
	background: var(--arm-amber);
	border-radius: 2px;
	transform: rotate(45deg);
}

/* Tabel */

.arm-table {
	width: 100%;
	max-width: 460px;
	border-collapse: collapse;
	background: var(--arm-card);
	border: 1px solid var(--arm-line);
	border-radius: var(--arm-radius);
	overflow: hidden;
}

.arm-table th,
.arm-table td {
	padding: 13px 18px;
	text-align: left;
	border-bottom: 1px solid var(--arm-line);
}

.arm-table tr:last-child th,
.arm-table tr:last-child td {
	border-bottom: 0;
}

.arm-table th {
	font-weight: 600;
	color: var(--arm-muted);
}

.arm-table td {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

/* Catatan */

.arm-partner {
	margin: 14px 0 0;
	max-width: 52ch;
	font-size: 13px;
	line-height: 1.55;
	color: var(--arm-muted);
}

.arm-notice {
	margin: 14px 0;
	padding: 12px 16px;
	background: #fff8e6;
	border-left: 3px solid var(--arm-amber);
	border-radius: 0 6px 6px 0;
	font-size: 15px;
}

.arm-notice--off {
	background: #f1f3ef;
	border-left-color: #9aa39c;
}

.arm-typeblock {
	margin-bottom: 26px;
}

/* Bilah lengket */

.arm-sticky {
	display: none;
}

@media (max-width: 860px) {
	.arm-hero,
	.arm-two {
		grid-template-columns: 1fr;
	}

	.arm-wrap {
		padding-bottom: 104px;
	}

	.arm-sticky {
		font-family: var(--arm-sans);
		color: var(--arm-ink);
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 90;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 14px;
		padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
		background: rgba(255, 255, 255, 0.97);
		border-top: 1px solid var(--arm-line);
		box-shadow: 0 -2px 14px rgba(20, 24, 26, 0.09);
	}

	.arm-sticky__price span {
		display: block;
		font-size: 10px;
		font-weight: 700;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--arm-muted);
	}

	.arm-sticky__price strong {
		font-size: 19px;
		font-variant-numeric: tabular-nums;
	}

	.arm-sticky .arm-cta {
		flex: 1;
		max-width: 240px;
	}
}

@media (max-width: 520px) {
	.arm-grid--3,
	.arm-grid--4 {
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
	}

	.arm-list__link {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.arm *,
	.arm *::before,
	.arm *::after {
		transition: none !important;
	}
}

/* Mode mandiri, saat header tema dimatikan */

body.arm-standalone {
	margin: 0;
	background: #f3f5f1;
}

/* Kolom grid perlu min-width nol agar isi panjang tidak mendorong kolom. */

.arm-two__main,
.arm-two__side {
	min-width: 0;
}

/* Navigasi lompat di halaman arsip */

.arm-chips--nav {
	padding-bottom: 4px;
	border-bottom: 1px solid var(--arm-line);
}

.arm-chips--nav a {
	border-color: transparent;
	background: transparent;
	padding: 6px 10px;
}

.arm-chips--nav a:hover {
	background: var(--arm-card);
	border-color: var(--arm-line);
}


/*
 * Jumlah kolom mengikuti lebar WADAH, bukan lebar layar.
 *
 * Wadah plugin bisa berada di dalam kolom tema yang sempit, dan kueri media
 * mengukur layar sehingga salah menilai ruang yang benar-benar tersedia.
 * Kueri kontainer mengukur wadahnya sendiri, jadi kartu tetap tersusun
 * beberapa kolom di kolom sempit dan tidak berlebihan di layar lebar.
 *
 * Containment dipasang di .arm-wrap, bukan di grid, supaya bilah lengket
 * yang berada di luar wadah tidak kehilangan acuan posisinya.
 */

.arm-wrap {
	container-type: inline-size;
	container-name: mtrwrap;
}

@container mtrwrap (min-width: 560px) {
	.arm-grid--4 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.arm-grid--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container mtrwrap (min-width: 860px) {
	.arm-grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.arm-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@container mtrwrap (min-width: 1180px) {
	.arm-grid--4 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

/* Kartu mengecil rapi saat kolomnya sempit. */

@container mtrwrap (max-width: 620px) {
	.arm-card__body {
		padding: 11px 12px 4px;
	}

	.arm-card__title {
		font-size: 14px;
	}

	.arm-card__foot {
		padding: 0 12px 12px;
	}

	.arm-bingkai--kecil .arm-bingkai__value {
		font-size: 16px;
	}
}

/*
 * Blok yang disisipkan ke halaman biasa lewat shortcode.
 *
 * Latar dibuat bening supaya menyatu dengan halaman tema, sementara variabel
 * warna dan tipografi tetap berlaku untuk isinya.
 */

.arm-embed {
	background: transparent;
	margin: 24px 0;
}

.arm-embed > .arm-grid {
	margin: 0;
}

.arm-pricegroup {
	margin-bottom: 26px;
}

.arm-pricegroup .arm-h3 {
	margin-bottom: 8px;
}

.arm-pricetable {
	width: 100%;
	border-collapse: collapse;
	background: var(--arm-card);
	border: 1px solid var(--arm-line);
	border-radius: var(--arm-radius);
	overflow: hidden;
	font-size: 15px;
}

.arm-pricetable th,
.arm-pricetable td {
	padding: 11px 16px;
	text-align: right;
	border-bottom: 1px solid var(--arm-line);
}

.arm-pricetable th:first-child,
.arm-pricetable td:first-child {
	text-align: left;
}

.arm-pricetable thead th {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--arm-muted);
	background: #faf9f7;
}

.arm-pricetable tbody tr:last-child th,
.arm-pricetable tbody tr:last-child td {
	border-bottom: 0;
}

.arm-pricetable td {
	font-variant-numeric: tabular-nums;
	font-weight: 650;
}

.arm-pricetable td:first-child {
	font-weight: 500;
}

.arm-pricetable a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--arm-line);
}

.arm-pricetable a:hover {
	color: var(--arm-sign);
	border-bottom-color: currentColor;
}

.arm-row--off td {
	color: var(--arm-muted);
}

.arm-dash {
	color: #a7aaad;
	font-weight: 500;
}

.arm-pricenote {
	margin: -12px 0 0;
	font-size: 13px;
	color: var(--arm-muted);
}

/* Daftar tipe mobil */

.arm-typelist {
	display: grid;
	gap: 10px;
}

.arm-typelist__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 4px 18px;
	align-items: baseline;
	padding: 15px 20px;
	background: var(--arm-card);
	border: 1px solid var(--arm-line);
	border-radius: var(--arm-radius);
	color: inherit;
	text-decoration: none;
}

.arm-typelist__item:hover {
	border-color: var(--arm-sign);
}

.arm-typelist__name {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.arm-typelist__desc {
	grid-column: 1 / -1;
	font-size: 14px;
	color: var(--arm-muted);
}

.arm-typelist__meta {
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	color: var(--arm-sign);
	white-space: nowrap;
}

.arm-ctabox {
	padding: 22px 24px;
	background: var(--arm-card);
	border: 1px solid var(--arm-line);
	border-radius: var(--arm-radius);
}

@media (max-width: 560px) {
	.arm-pricetable {
		font-size: 14px;
	}

	.arm-pricetable th,
	.arm-pricetable td {
		padding: 9px 11px;
	}
}

/* Daftar tanya jawab */

.arm-faq {
	max-width: 68ch;
	border: 1px solid var(--arm-line);
	border-radius: var(--arm-radius);
	background: var(--arm-card);
	overflow: hidden;
}

.arm-faq__item + .arm-faq__item {
	border-top: 1px solid var(--arm-line);
}

.arm-faq__q {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	font-size: 16px;
	font-weight: 650;
	line-height: 1.45;
	cursor: pointer;
	list-style: none;
}

.arm-faq__q::-webkit-details-marker {
	display: none;
}

.arm-faq__q::after {
	content: "+";
	flex-shrink: 0;
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
	color: var(--arm-sign);
}

.arm-faq__item[open] .arm-faq__q::after {
	content: "–";
}

.arm-faq__q:hover {
	color: var(--arm-sign);
}

.arm-faq__a {
	padding: 0 20px 18px;
	color: var(--arm-muted);
}

.arm-faq__a p {
	margin: 0 0 10px;
}

.arm-faq__a p:last-child {
	margin-bottom: 0;
}

/* Tabel harga tersemat */

.arm-table--harga {
	max-width: none;
	width: 100%;
}

.arm-table--harga th[scope="row"] {
	text-align: left;
	font-weight: 650;
	color: var(--arm-ink);
}

.arm-table--harga th[scope="row"] a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--arm-line);
}

.arm-table--harga th[scope="row"] a:hover {
	color: var(--arm-sign);
}

.arm-harga__judul {
	margin: 26px 0 8px;
}

.arm-harga > .arm-harga__judul:first-child {
	margin-top: 0;
}

/* Teks editorial pada halaman daftar */

.arm-editorial {
	max-width: 72ch;
}

.arm-editorial--atas {
	margin-top: -8px;
	margin-bottom: var(--arm-gap);
}

.arm-editorial--bawah {
	margin-top: calc(var(--arm-gap) + 8px);
	padding-top: var(--arm-gap);
	border-top: 1px solid var(--arm-line);
}

.arm-editorial h2 {
	margin: 26px 0 8px;
	font-size: clamp(19px, 2.4vw, 23px);
	font-weight: 700;
	letter-spacing: -0.012em;
}

.arm-editorial h3 {
	margin: 20px 0 6px;
	font-size: 17px;
	font-weight: 700;
}

.arm-editorial > :first-child {
	margin-top: 0;
}

.arm-editorial p {
	margin: 0 0 14px;
}

.arm-editorial ul,
.arm-editorial ol {
	margin: 0 0 14px;
	padding-left: 22px;
}

.arm-editorial li {
	margin-bottom: 5px;
}

/* Daftar chip padat, untuk puluhan nama venue */

.arm-chips--padat a {
	padding: 5px 11px;
	font-size: 13px;
	font-weight: 600;
}

.arm-chips--padat {
	gap: 6px;
}

/*
 * Munculan saat digulir.
 *
 * Elemen terlihat sepenuhnya tanpa JavaScript: kelas penyembunyi baru
 * dipasang oleh skrip, jadi tidak ada isi yang hilang bila skrip gagal
 * dimuat atau diblokir. Gerakannya dimatikan sepenuhnya bila sistem
 * meminta pengurangan animasi.
 */

.arm-js .arm-reveal {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.6s var(--arm-ease), transform 0.6s var(--arm-ease);
}

.arm-js .arm-reveal.is-in {
	opacity: 1;
	transform: none;
}

/* Kartu dalam satu grid muncul beruntun tipis, bukan serempak. */
.arm-js .arm-grid.is-in .arm-card {
	animation: arm-naik 0.5s var(--arm-ease) backwards;
}

.arm-js .arm-grid.is-in .arm-card:nth-child(2) { animation-delay: 0.05s; }
.arm-js .arm-grid.is-in .arm-card:nth-child(3) { animation-delay: 0.10s; }
.arm-js .arm-grid.is-in .arm-card:nth-child(4) { animation-delay: 0.15s; }
.arm-js .arm-grid.is-in .arm-card:nth-child(5) { animation-delay: 0.20s; }

@keyframes arm-naik {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.arm-js .arm-reveal,
	.arm-js .arm-reveal.is-in {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.arm-js .arm-grid.is-in .arm-card {
		animation: none;
	}
}

/*
 * Kerangka situs untuk mode mandiri.
 *
 * Hanya dipakai saat opsi memakai header dan footer tema dimatikan. Bila tema
 * yang memegang kerangka, seluruh bagian ini tidak pernah dicetak.
 */

.arm-skip {
	position: absolute;
	left: -9999px;
	z-index: 200;
	padding: 12px 18px;
	background: var(--arm-sign);
	color: #fff;
	border-radius: 0 0 8px 0;
	text-decoration: none;
	font-weight: 650;
}

.arm-skip:focus {
	left: 0;
	top: 0;
}

.arm-site-header {
	position: sticky;
	top: 0;
	z-index: 80;
	background: rgba(255, 255, 255, 0.9);
	border-bottom: 1px solid var(--arm-line);
	backdrop-filter: saturate(1.6) blur(12px);
	-webkit-backdrop-filter: saturate(1.6) blur(12px);
}

.arm-site-header__bar {
	display: flex;
	align-items: center;
	gap: clamp(16px, 3vw, 34px);
	max-width: var(--arm-max, 1240px);
	margin: 0 auto;
	padding: 12px 20px;
}

.arm-brand {
	flex-shrink: 0;
	color: var(--arm-ink);
	text-decoration: none;
}

.arm-brand__text {
	font-size: 20px;
	font-weight: 750;
	letter-spacing: -0.028em;
}

.arm-brand__logo {
	display: block;
	width: auto;
	height: 34px;
}

.arm-nav {
	flex: 1;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}

.arm-nav::-webkit-scrollbar {
	display: none;
}

.arm-nav__list {
	display: flex;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
	white-space: nowrap;
}

.arm-nav__list a {
	display: inline-block;
	padding: 8px 12px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
	color: var(--arm-muted);
	text-decoration: none;
	transition: background 0.2s var(--arm-ease), color 0.2s var(--arm-ease);
}

.arm-nav__list a:hover,
.arm-nav__list .current-menu-item > a {
	background: rgba(var(--arm-sign-rgb), 0.07);
	color: var(--arm-sign);
}

.arm-site-header__cta {
	flex-shrink: 0;
}

/* Footer */

.arm-site-footer {
	margin-top: 60px;
	background: var(--arm-ink);
	color: rgba(255, 255, 255, 0.72);
}

.arm-site-footer__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 34px;
	max-width: var(--arm-max, 1240px);
	margin: 0 auto;
	padding: 46px 20px 34px;
}

.arm-site-footer__name {
	margin: 0 0 10px;
	font-size: 19px;
	font-weight: 750;
	letter-spacing: -0.02em;
	color: #fff;
}

.arm-site-footer__note {
	margin: 0 0 8px;
	max-width: 52ch;
	font-size: 14px;
	line-height: 1.6;
}

.arm-site-footer__nav .arm-nav__list {
	flex-direction: column;
	gap: 2px;
	white-space: normal;
}

.arm-site-footer__nav a {
	padding: 6px 0;
	color: rgba(255, 255, 255, 0.82);
}

.arm-site-footer__nav a:hover {
	background: transparent;
	color: #fff;
	text-decoration: underline;
}

.arm-site-footer__bawah {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.arm-site-footer__bawah p {
	max-width: var(--arm-max, 1240px);
	margin: 0 auto;
	padding: 18px 20px;
	font-size: 13px;
}

/* Tombol menu, hanya tampil setelah JavaScript menyalakannya. */

.arm-nav-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-left: auto;
	padding: 0;
	background: transparent;
	border: 1px solid var(--arm-line);
	border-radius: 10px;
	cursor: pointer;
	order: 2;
}

.arm-nav-btn[hidden] {
	display: none;
}

.arm-nav-btn__garis,
.arm-nav-btn__garis::before,
.arm-nav-btn__garis::after {
	display: block;
	width: 17px;
	height: 2px;
	background: var(--arm-ink);
	border-radius: 2px;
	transition: transform 0.25s var(--arm-ease), opacity 0.2s var(--arm-ease);
}

.arm-nav-btn__garis::before,
.arm-nav-btn__garis::after {
	content: "";
	position: absolute;
}

.arm-nav-btn__garis::before {
	transform: translateY(-6px);
}

.arm-nav-btn__garis::after {
	transform: translateY(6px);
}

.arm-nav-btn[aria-expanded="true"] .arm-nav-btn__garis {
	background: transparent;
}

.arm-nav-btn[aria-expanded="true"] .arm-nav-btn__garis::before {
	transform: rotate(45deg);
}

.arm-nav-btn[aria-expanded="true"] .arm-nav-btn__garis::after {
	transform: rotate(-45deg);
}

/*
 * Navigasi terlipat.
 *
 * Kelas arm-nav-lipat dipasang JavaScript. Tanpa JavaScript, navigasi tetap
 * tampil sebagai daftar membungkus — bisa dipakai, hanya lebih tinggi.
 */

@media (max-width: 880px) {
	.arm-site-header__bar {
		flex-wrap: wrap;
		gap: 10px 12px;
	}

	.arm-brand {
		margin-right: auto;
	}

	.arm-site-header__cta {
		order: 2;
	}

	.arm-nav {
		order: 3;
		width: 100%;
		overflow: visible;
	}

	.arm-nav__list {
		flex-wrap: wrap;
		white-space: normal;
	}

	.arm-nav-lipat .arm-nav {
		display: none;
	}

	.arm-nav-lipat .arm-nav.is-open {
		display: block;
		margin: 4px -20px 0;
		padding: 8px 12px 12px;
		border-top: 1px solid var(--arm-line);
	}

	.arm-nav-lipat .arm-nav.is-open .arm-nav__list {
		flex-direction: column;
		gap: 0;
	}

	.arm-nav-lipat .arm-nav.is-open .arm-nav__list a {
		display: block;
		padding: 11px 8px;
		font-size: 16px;
		border-radius: 8px;
	}
}

@media (max-width: 700px) {
	.arm-site-footer__inner {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.arm-brand__text {
		font-size: 18px;
	}
}

/*
 * Melonggarkan kontainer tema.
 *
 * Berlaku di semua halaman plugin, tanpa memandang lebar yang dipilih: bila
 * kontainer tema lebih sempit daripada lebar yang disetel, batas milik plugin
 * tidak pernah kebagian giliran.
 *
 * Yang penting, aturan ini TIDAK boleh menyentuh header dan footer. Astra dan
 * banyak tema lain memakai pembungkus bernama sama di ketiga tempat itu, jadi
 * tanpa pengecualian di bawah, melonggarkan isi halaman ikut merusak footer.
 */

body.arm-page :is(
	.ast-container,
	.ast-container-fluid,
	.site-content,
	.site-content > .container,
	.entry-content,
	.page-content,
	#primary,
	#content,
	.content-area,
	.site-main,
	.neve-main,
	.container-fluid
):not( header * ):not( footer * ):not( .site-header * ):not( .site-footer * ) {
	max-width: none;
	width: auto;
	padding-left: 0;
	padding-right: 0;
	margin-left: 0;
	margin-right: 0;
	float: none;
	display: block;
}

/*
 * Bilah sisi yang tidak dipakai.
 *
 * Hanya bilah sisi isi halaman. Area widget di footer memakai kelas yang
 * mirip, dan menyembunyikannya membuat footer hilang seluruhnya.
 */

body.arm-page :is( #secondary, .ast-separate-container #secondary ):not( footer * ):not( .site-footer * ) {
	display: none;
}

/*
 * Mode selebar layar.
 *
 * Margin negatif menembus pembungkus mana pun, termasuk yang nama kelasnya
 * tidak ada di daftar di atas.
 */

body.arm-page--penuh .arm {
	margin-left: calc( 50% - 50vw );
	margin-right: calc( 50% - 50vw );
	max-width: 100vw;
}

body.arm-page--penuh .arm-wrap {
	max-width: none;
	padding-left: clamp( 20px, 4vw, 56px );
	padding-right: clamp( 20px, 4vw, 56px );
}

/*
 * Kotak pesan tanpa kolom pendamping.
 *
 * Dipakai saat data halaman belum lengkap sehingga kolom utama kosong. Kotak
 * melebar dan diberi batas baca, bukan dibiarkan menempel di kanan dengan
 * ruang kosong di sebelahnya.
 */

.arm-two--sendiri {
	grid-template-columns: 1fr;
	max-width: 52ch;
}

.arm-two--sendiri .arm-box__text {
	max-width: none;
}

/* Daftar kelas mobil */

.arm-kelas {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
	gap: 14px;
}

.arm-kelas__item {
	display: block;
	padding: 20px 22px;
	background: var(--arm-card);
	border: 1px solid var(--arm-line);
	border-radius: var(--arm-radius);
	color: inherit;
	text-decoration: none;
	box-shadow: var(--arm-shadow-1);
	transition: transform 0.3s var(--arm-ease), box-shadow 0.3s var(--arm-ease);
}

.arm-kelas__item:hover {
	transform: translateY(-3px);
	box-shadow: var(--arm-shadow-2);
}

.arm-kelas__nama {
	display: block;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.014em;
}

.arm-kelas__jumlah {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--arm-sign);
}

.arm-kelas__ket {
	display: block;
	margin-top: 8px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--arm-muted);
}

/* Ringkasan armada per kelas */

.arm-paket__baris {
	padding-bottom: 22px;
	margin-bottom: 22px;
	border-bottom: 1px solid var(--arm-line);
}

.arm-paket__baris:last-child {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: 0;
}

/*
 * Bagian video.
 *
 * Yang tercetak hanya gambar sampul dan tombol. Pemutar disisipkan setelah
 * tombol ditekan, sehingga skrip pihak ketiga tidak ikut terunduh pada
 * kunjungan yang tidak menonton — dan itu mayoritas kunjungan.
 */

.arm-video__bingkai {
	position: relative;
	aspect-ratio: 16 / 9;
	background-color: var(--arm-ink);
	background-position: center;
	background-size: cover;
	border-radius: var(--arm-radius);
	overflow: hidden;
	box-shadow: var(--arm-shadow-2);
}

.arm-video__bingkai::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(22, 21, 26, 0.45), rgba(22, 21, 26, 0.1));
	pointer-events: none;
	transition: opacity 0.3s var(--arm-ease);
}

.arm-video__bingkai:hover::after {
	opacity: 0.7;
}

.arm-video__putar {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	width: 74px;
	height: 74px;
	padding: 0;
	background: rgba(255, 255, 255, 0.94);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transform: translate(-50%, -50%);
	box-shadow: 0 8px 28px rgba(22, 21, 26, 0.34);
	transition: transform 0.3s var(--arm-ease), background 0.3s var(--arm-ease);
}

.arm-video__putar::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	width: 0;
	height: 0;
	border-top: 11px solid transparent;
	border-bottom: 11px solid transparent;
	border-left: 18px solid var(--arm-sign);
	transform: translate(-50%, -50%);
}

.arm-video__putar:hover {
	background: #fff;
	transform: translate(-50%, -50%) scale(1.07);
}

.arm-video__bingkai iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}