/*
 * Motoran Core — tampilan depan
 *
 * Arah visual diambil dari perangkat jalan Indonesia: papan penunjuk arah
 * berwarna hijau, plat nomor putih bergaris tebal, dan lampu sein amber.
 * Elemen tanda tangannya adalah plat harga — harga selalu muncul dalam
 * bidang berbentuk plat nomor, sehingga halaman langsung terbaca sebagai
 * halaman sewa, bukan katalog produk.
 *
 * Tanpa font eksternal. Situs ini menargetkan 850 halaman dengan LCP di
 * bawah dua detik pada koneksi seluler, jadi tipografi memakai tumpukan
 * sistem yang disetel lewat skala, tebal, dan spasi.
 */

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

:root {
	--mtr-ink: #14181a;
	--mtr-paper: #f3f5f1;
	--mtr-card: #ffffff;
	--mtr-sign: #0e5b3a;
	--mtr-sign-deep: #0a4429;
	--mtr-amber: #f2a81d;
	--mtr-line: #dde1d9;
	--mtr-muted: #5c6560;

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

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

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

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

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

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

/* Tipografi */

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

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

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

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

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

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

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

.mtr-eyebrow--link {
	text-decoration: none;
	border-bottom: 1px solid rgba(14, 91, 58, 0.3);
}

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

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

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

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

/* Remah roti */

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

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

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

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

/* Elemen tanda tangan: plat harga */

.mtr-plate {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	background: #fff;
	border: 3px solid var(--mtr-ink);
	border-radius: 7px;
	padding: 9px 16px 8px;
	line-height: 1.05;
}

.mtr-plate__region {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.3em;
	color: #9aa39c;
}

.mtr-plate__value {
	margin-top: 3px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.03em;
}

.mtr-plate__note {
	margin-top: 4px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mtr-muted);
}

.mtr-plate--besar .mtr-plate__value {
	font-size: clamp(30px, 5vw, 38px);
}

.mtr-plate--kecil {
	border-width: 2px;
	padding: 6px 11px 5px;
	border-radius: 5px;
}

.mtr-plate--kecil .mtr-plate__region {
	font-size: 8px;
}

.mtr-plate--kecil .mtr-plate__value {
	font-size: 19px;
}

.mtr-plate--kecil .mtr-plate__note {
	font-size: 9px;
	margin-top: 2px;
}

/* Hero */

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

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

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

.mtr-hero__placeholder,
.mtr-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 4 / 3;
	color: #b3bcb2;
	background:
		radial-gradient(120% 90% at 50% 0%, #f2f4ef 0%, #e4e8e0 60%, #dde2d8 100%);
}

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

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

.mtr-hero__panel .mtr-plate {
	margin: 18px 0 16px;
}

/* Tombol */

.mtr-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 15px 26px;
	background: var(--mtr-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(--mtr-sign-deep), 0 6px 18px rgba(14, 91, 58, 0.22);
	transition: background 0.25s var(--mtr-ease), transform 0.25s var(--mtr-ease),
		box-shadow 0.25s var(--mtr-ease);
}

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

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

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

/* Papan penunjuk */

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

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

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

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

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

/* Panel instrumen */

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

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

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

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

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

/* Bagian */

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

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

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

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

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

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

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

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

/* Kartu */

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

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

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

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

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

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

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

.mtr-card__media {
	position: relative;
	overflow: hidden;
	background: #e7eae4;
}

/* Bayangan tipis di kaki foto supaya teks di bawahnya tidak terasa melayang. */
.mtr-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(--mtr-ease);
}

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

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

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

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

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

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

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

/* Daftar dan chip */

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

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

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

.mtr-list__link:hover {
	background: #f7f9f5;
}

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

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

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

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

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

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

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

.mtr-tag--ok {
	background: #e6f2ea;
	color: var(--mtr-sign);
}

/* Daftar bercentang */

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

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

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

/* Tabel */

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

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

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

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

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

/* Catatan */

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

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

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

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

/* Bilah lengket */

.mtr-sticky {
	display: none;
}

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

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

	.mtr-sticky {
		font-family: var(--mtr-sans);
		color: var(--mtr-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(--mtr-line);
		box-shadow: 0 -2px 14px rgba(20, 24, 26, 0.09);
	}

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

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

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

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

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

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

/* Mode mandiri, saat header tema dimatikan */

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

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

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

/* Navigasi lompat di halaman arsip */

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

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

.mtr-chips--nav a:hover {
	background: var(--mtr-card);
	border-color: var(--mtr-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 .mtr-wrap, bukan di grid, supaya bilah lengket
 * yang berada di luar wadah tidak kehilangan acuan posisinya.
 */

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

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

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

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

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

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

/* Kartu mengecil rapi saat kolomnya sempit. */

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

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

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

	.mtr-plate--kecil .mtr-plate__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.
 */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Daftar tipe motor */

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

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

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

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

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

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

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

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

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

/* Daftar tanya jawab */

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

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

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

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

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

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

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

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

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

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

/* Tabel harga tersemat */

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

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

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

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

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

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

/* Teks editorial pada halaman daftar */

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

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

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

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

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

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

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

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

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

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

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

.mtr-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.
 */

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

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

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

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

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

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

	.mtr-js .mtr-grid.is-in .mtr-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.
 */

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

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

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

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

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

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

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

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

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

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

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

.mtr-nav__list a:hover,
.mtr-nav__list .current-menu-item > a {
	background: rgba(14, 91, 58, 0.07);
	color: var(--mtr-sign);
}

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

/* Footer */

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

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

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

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

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

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

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

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

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

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

.mtr-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(--mtr-line);
	border-radius: 10px;
	cursor: pointer;
	order: 2;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	.mtr-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.mtr-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.mtr-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.mtr-page--penuh .mtr {
	margin-left: calc( 50% - 50vw );
	margin-right: calc( 50% - 50vw );
	max-width: 100vw;
}

body.mtr-page--penuh .mtr-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.
 */

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

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