/**
 * FAQ Split — Almira Travel
 *
 * Dua kolom: kolom foto (dengan lencana lingkaran berteks berputar yang
 * menimpa sudut) dan kolom isi (eyebrow, judul, lead, akordeon, penutup).
 *
 * Keputusan yang perlu diingat saat menyunting berkas ini:
 *
 * - Akordeon memakai <details>/<summary> native. Semua penataan panel
 *   bergantung pada pseudo-class :open dan pseudo-element ::details-content,
 *   BUKAN pada kelas yang ditambahkan JS. Jangan mengganti selector ini
 *   dengan sesuatu seperti .is-active, karena tidak ada JS yang memasangnya.
 * - Marker bawaan <summary> harus dimatikan lewat DUA jalur: ::-webkit-details-marker
 *   (Safari lama) dan `display: block` pada summary itu sendiri. Menyetel
 *   list-style:none saja tidak cukup di Safari.
 * - Tema landingpress memasang gaya agresif pada elemen umum (mis.
 *   `blockquote { border: 1px dashed }`), jadi reset eksplisit di bawah
 *   memang perlu dan bukan kelebihan.
 * - Font tidak ditambahkan. Situs men-self-host Plus Jakarta Sans; keluarga
 *   font referensi (Lora/Poppins) sengaja tidak diikuti agar tidak ada dua
 *   permintaan webfont tambahan. Karakter heading didekati lewat
 *   font-weight 800 + letter-spacing negatif.
 */

.alm-faq {
	--alm-faq-navy: #0f2e40;
	--alm-faq-aksen: #c96628;
	--alm-faq-emas: #edaf33;
	--alm-faq-teks: #5b6b76;
	--alm-faq-item-bg: #fff7e7;
	--alm-faq-item-garis: #f0e2c6;
	--alm-faq-item-radius: 14px;
	--alm-faq-item-jarak: 10px;
	--alm-faq-radius: 20px;
	--alm-faq-gap: 60px;
	--alm-faq-kolom: 42;
	--alm-faq-foto-tinggi: 600px;

	display: grid;
	/**
	 * Kolom foto dinyatakan dalam persen, kolom isi mengambil sisanya lewat
	 * 1fr. Sengaja BUKAN calc(var(--x) * 1fr): spesifikasi Grid melarang
	 * calc() pada nilai <flex>, jadi bentuk itu diabaikan browser dan
	 * seluruh grid ambruk jadi satu kolom. Dengan persen + 1fr, lebar gap
	 * otomatis dipotong dari kolom isi.
	 *
	 * minmax(0,…) wajib: tanpa itu jawaban yang panjang memaksa track
	 * melebar sehingga grid meluber keluar container dan memunculkan
	 * scrollbar horizontal di seluruh halaman.
	 */
	grid-template-columns: minmax(0, calc(var(--alm-faq-kolom) * 1%)) minmax(0, 1fr);
	gap: var(--alm-faq-gap);
	/* start, bukan center: daftar 12 pertanyaan jauh lebih tinggi dari foto,
	   dan center akan menggantung foto di tengah dengan ruang kosong besar di
	   atas maupun bawahnya. Dengan start, foto sejajar puncak lalu mengikuti
	   scroll lewat position:sticky di bawah. */
	align-items: start;
	font-family: "Plus Jakarta Sans", sans-serif;
	color: var(--alm-faq-teks);
}

/* Kolom foto di kanan: cukup tukar urutan visual, DOM tetap foto-dulu supaya
   urutan baca di mobile (foto lalu pertanyaan) tidak berubah. */
.alm-faq--foto-kanan .alm-faq__media {
	order: 2;
}

/* ---------- kolom foto ---------- */

/**
 * Kolom foto mengikuti scroll.
 *
 * Daftar 12 pertanyaan jauh lebih tinggi dari foto. Tanpa sticky, foto
 * lewat dari layar setelah beberapa pertanyaan pertama dan sisa section
 * terasa seperti daftar teks biasa.
 *
 * position:sticky di sini bekerja karena TIDAK ada leluhur yang menjadi
 * scroll container — itulah sebabnya .alm-faq__daftar sekarang memakai
 * overflow:visible dan .alm-marquee--penuh memakai overflow-x:clip alih-alih
 * hidden. Menambahkan overflow:hidden/auto/scroll pada leluhur mana pun akan
 * mematikan sticky ini secara diam-diam.
 *
 * 96px memberi ruang untuk header situs yang menempel di atas.
 */
.alm-faq__media {
	position: relative;
	/* Lencana menimpa sudut foto dan sengaja dibiarkan keluar dari kotak
	   foto, jadi media TIDAK boleh overflow:hidden. Radius dipasang pada
	   <figure> di dalamnya. */
	min-width: 0;
	display: flex;
}

/* Sticky hanya bila dinyalakan lewat kontrol, dan hanya pada layar dua
   kolom — di mobile kolom foto berada di atas teks sehingga menempelkannya
   akan menutupi pertanyaan yang sedang dibaca. */
.alm-faq--sticky .alm-faq__media {
	position: sticky;
	top: 96px;
}

.alm-faq__figure {
	position: relative;
	margin: 0;
	flex: 1;
	min-height: var(--alm-faq-foto-tinggi);
	border-radius: var(--alm-faq-radius);
	overflow: hidden;
	background: #e8eef2;
}

.alm-faq__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---------- lencana lingkaran ---------- */

.alm-faq__lencana {
	position: absolute;
	z-index: 2;
	width: 132px;
	height: 132px;
	display: grid;
	place-items: center;
	/* Pointer-events dimatikan: lencana murni dekoratif dan menimpa foto,
	   jadi tidak boleh mencuri klik dari apa pun di bawahnya. */
	pointer-events: none;
	filter: drop-shadow(0 12px 26px rgba(15, 46, 64, 0.28));
}

.alm-faq__lencana--ki-atas {
	top: -22px;
	left: -22px;
}

.alm-faq__lencana--ka-atas {
	top: -22px;
	right: -22px;
}

.alm-faq__lencana--ki-bawah {
	bottom: -22px;
	left: -22px;
}

.alm-faq__lencana--ka-bawah {
	bottom: -22px;
	right: -22px;
}

.alm-faq__lencana-svg {
	width: 100%;
	height: 100%;
	display: block;
	overflow: visible;
}

.alm-faq__lencana-cakram {
	fill: var(--alm-faq-navy);
}

.alm-faq__lencana-cincin {
	fill: none;
	stroke: rgba(237, 175, 51, 0.5);
	stroke-width: 1;
}

/**
 * Teks melingkar.
 *
 * transform-box: fill-box + transform-origin: center membuat rotate()
 * berputar pada pusat lingkaran. Tanpa dua properti ini, SVG memutar
 * relatif terhadap titik asal viewBox (0,0) sehingga teks terbang keluar
 * lingkaran — gejala klasik yang mudah disalahartikan sebagai path salah.
 */
.alm-faq__lencana-teks {
	fill: var(--alm-faq-emas);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	transform-box: fill-box;
	transform-origin: center;
	animation: alm-faq-putar 22s linear infinite;
}

@keyframes alm-faq-putar {
	to {
		transform: rotate(360deg);
	}
}

.alm-faq__lencana-ikon {
	position: absolute;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--alm-faq-emas);
	color: var(--alm-faq-navy);
}

.alm-faq__lencana-ikon .alm-faq__svg {
	width: 20px;
	height: 20px;
	stroke-width: 2.1;
}

/* ---------- kolom isi ---------- */

.alm-faq__isi {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.alm-faq__kepala {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.alm-faq__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	padding: 7px 15px;
	border-radius: 999px;
	background: var(--alm-faq-item-bg);
	color: var(--alm-faq-aksen);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 2.2px;
	text-transform: uppercase;
	line-height: 1;
}

.alm-faq__eyebrow .alm-faq__svg {
	width: 15px;
	height: 15px;
	flex: none;
}

.alm-faq__judul {
	margin: 0;
	color: var(--alm-faq-navy);
	font-size: 36px;
	font-weight: 800;
	line-height: 1.18;
	/* Letter-spacing negatif menirukan ketegasan heading referensi tanpa
	   memuat keluarga font tambahan. */
	letter-spacing: -0.6px;
}

.alm-faq__judul-aksen {
	color: var(--alm-faq-aksen);
}

.alm-faq__lead {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.72;
	max-width: 58ch;
}

/* ---------- akordeon ---------- */

.alm-faq__daftar {
	display: flex;
	flex-direction: column;
	gap: var(--alm-faq-item-jarak);
	/* Ruang untuk bayangan item terbuka agar tidak terpotong ketika daftar
	   dibatasi tingginya dan menjadi area scroll. */
}

/**
 * Daftar TIDAK memakai area scroll sendiri.
 *
 * Versi sebelumnya membatasi tinggi daftar lalu memberinya overflow-y:auto
 * agar tingginya seimbang dengan kolom foto. Hasilnya ditolak, dengan alasan
 * yang tepat: scrollbar di tengah halaman memotong kartu terakhir sehingga
 * tampak seperti konten yang rusak, dan pengunjung harus menyadari bahwa
 * ada area yang bisa digulirkan di dalam halaman yang juga bisa digulirkan.
 *
 * Sekarang seluruh 12 pertanyaan tampil penuh dan kolom foto menyesuaikan
 * diri lewat position:sticky (lihat .alm-faq__media), yang menjaga foto
 * tetap terlihat tanpa perlu memaksa kedua kolom sama tinggi.
 *
 * Kalau kelak batas tinggi dibutuhkan lagi, JANGAN kembalikan overflow di
 * sini tanpa juga menyetel flex-shrink:0 pada .alm-faq__item — tanpa itu
 * flexbox menggencet kartu alih-alih memunculkan scrollbar.
 */
.alm-faq__daftar {
	max-height: none !important;
	overflow: visible !important;
}

.alm-faq__item {
	border: 1px solid var(--alm-faq-item-garis);
	border-radius: var(--alm-faq-item-radius);
	background: var(--alm-faq-item-bg);
	/* Reset agresif: tema memasang margin dan border pada beberapa elemen
	   blok generik. */
	margin: 0;
	overflow: hidden;
	/**
	 * flex-shrink: 0 WAJIB dan bukan sekadar kehati-hatian.
	 *
	 * .alm-faq__daftar adalah kolom flex yang dibatasi max-height. Nilai
	 * bawaan flex-shrink adalah 1, jadi ketika total tinggi 12 item melebihi
	 * batas itu, flexbox MENGGENCET setiap item agar semuanya tetap masuk
	 * alih-alih memunculkan scrollbar. Akibatnya terukur nyata: kartu
	 * menyusut ke ~40px, teks pertanyaan terpotong habis, dan ikon plus
	 * tampak terbelah — sementara scrollHeight tetap sama dengan
	 * clientHeight sehingga area scroll tidak pernah aktif.
	 */
	flex-shrink: 0;
	transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.alm-faq__item:open {
	background: var(--alm-faq-navy);
	border-color: var(--alm-faq-navy);
	box-shadow: 0 16px 34px rgba(15, 46, 64, 0.16);
}

.alm-faq__tanya {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 18px;
	cursor: pointer;
	color: var(--alm-faq-navy);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	/* Marker bawaan dimatikan lewat dua jalur karena Safari lama hanya
	   menghormati ::-webkit-details-marker, sedangkan Chrome/Firefox
	   menghormati list-style pada summary. */
	list-style: none;
	/* Highlight biru saat tap di iOS mengganggu pada kartu besar. */
	-webkit-tap-highlight-color: transparent;
}

.alm-faq__tanya::-webkit-details-marker {
	display: none;
}

.alm-faq__tanya::marker {
	content: "";
}

/* Fokus keyboard harus tetap terlihat: summary adalah kontrol yang bisa
   ditab, dan menghapus outline tanpa pengganti akan merusak aksesibilitas. */
.alm-faq__tanya:focus-visible {
	outline: 2px solid var(--alm-faq-emas);
	outline-offset: -3px;
}

.alm-faq__item:open .alm-faq__tanya {
	color: #fff;
}

.alm-faq__tanya-teks {
	flex: 1;
	min-width: 0;
}

.alm-faq__tanda {
	flex: none;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--alm-faq-emas);
	color: var(--alm-faq-navy);
	transition: transform 0.28s ease, background-color 0.28s ease;
}

.alm-faq__tanda .alm-faq__svg {
	width: 16px;
	height: 16px;
	stroke-width: 2.4;
}

/* Ikon plus diputar 45° menjadi tanda silang saat panel terbuka — satu ikon
   untuk dua keadaan, jadi tidak perlu menukar markup. */
.alm-faq__item:open .alm-faq__tanda {
	transform: rotate(135deg);
}

.alm-faq__jawab {
	padding: 0 18px 18px;
	color: rgba(255, 255, 255, 0.82);
	font-size: 14.8px;
	line-height: 1.75;
}

.alm-faq__jawab-in > :first-child {
	margin-top: 0;
}

.alm-faq__jawab-in > :last-child {
	margin-bottom: 0;
}

.alm-faq__jawab a {
	color: var(--alm-faq-emas);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/**
 * Animasi buka-tutup.
 *
 * Dibungkus @supports karena ::details-content dan transisi height ke
 * content-height baru didukung pada mesin render terbaru. Di browser yang
 * belum mendukung, panel tetap terbuka dan tertutup seperti biasa — hanya
 * tanpa animasi. Ini alasan blok ini TIDAK boleh dipindah keluar @supports:
 * menyetel height:0 tanpa dukungan interpolate-size akan menyembunyikan
 * jawaban secara permanen.
 */
@supports selector(::details-content) and (interpolate-size: allow-keywords) {
	.alm-faq {
		interpolate-size: allow-keywords;
	}

	.alm-faq__item::details-content {
		height: 0;
		overflow: hidden;
		transition: height 0.32s ease, content-visibility 0.32s allow-discrete;
	}

	.alm-faq__item:open::details-content {
		height: auto;
	}
}

/* ---------- penutup ---------- */

.alm-faq__penutup {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 16px;
	padding-top: 4px;
	font-size: 15px;
}

.alm-faq__cta {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	/* Padding asimetris: sisi kanan lebih sempit karena ikon panah bulat
	   menempel di ujung pill, mengikuti irama tombol pada widget lain. */
	padding: 11px 12px 11px 20px;
	border-radius: 999px;
	background: var(--alm-faq-navy);
	color: #fff;
	font-size: 14.5px;
	font-weight: 700;
	text-decoration: none;
	line-height: 1;
	transition: background-color 0.22s ease, transform 0.22s ease;
}

.alm-faq__cta .alm-faq__svg {
	width: 30px;
	height: 30px;
	padding: 7px;
	border-radius: 50%;
	background: var(--alm-faq-emas);
	color: var(--alm-faq-navy);
	box-sizing: border-box;
	stroke-width: 2.2;
}

.alm-faq__cta:hover,
.alm-faq__cta:focus {
	background: #143b52;
	color: #fff;
	transform: translateY(-1px);
}

.alm-faq__cta:focus-visible {
	outline: 2px solid var(--alm-faq-emas);
	outline-offset: 3px;
}

/* ---------- responsif ---------- */

@media (max-width: 1024px) {
	.alm-faq {
		--alm-faq-gap: 40px;
		--alm-faq-foto-tinggi: 460px;
	}

	.alm-faq__judul {
		font-size: 30px;
	}
}

@media (max-width: 880px) {
	/* Satu kolom. Kolom foto dikembalikan ke urutan pertama supaya varian
	   "foto di kanan" tidak menyisakan foto di bawah teks pada mobile. */
	.alm-faq {
		grid-template-columns: minmax(0, 1fr);
		--alm-faq-gap: 30px;
		--alm-faq-foto-tinggi: 380px;
	}

	.alm-faq--foto-kanan .alm-faq__media {
		order: 0;
	}

	.alm-faq__lencana {
		width: 104px;
		height: 104px;
	}

	.alm-faq__lencana-ikon {
		width: 32px;
		height: 32px;
	}

	.alm-faq__lencana-ikon .alm-faq__svg {
		width: 16px;
		height: 16px;
	}

	/* Lencana ditarik ke dalam kotak foto: di layar sempit, offset negatif
	   membuatnya tertimpa tepi viewport dan memicu scroll horizontal. */
	.alm-faq__lencana--ki-atas,
	.alm-faq__lencana--ki-bawah {
		left: 12px;
	}

	.alm-faq__lencana--ka-atas,
	.alm-faq__lencana--ka-bawah {
		right: 12px;
	}

	.alm-faq__lencana--ki-atas,
	.alm-faq__lencana--ka-atas {
		top: 12px;
	}

	.alm-faq__lencana--ki-bawah,
	.alm-faq__lencana--ka-bawah {
		bottom: 12px;
	}

	.alm-faq__judul {
		font-size: 25px;
	}

	/* Sticky dimatikan di satu kolom: foto berada di atas daftar, jadi
	   menempelkannya akan menutupi pertanyaan yang sedang dibaca. */
	.alm-faq--sticky .alm-faq__media {
		position: relative;
		top: auto;
	}
}

/**
 * Hormati preferensi sistem "kurangi gerakan".
 *
 * Lencana berputar terus-menerus, jadi ia termasuk gerakan non-esensial yang
 * wajib dihentikan. Transisi akordeon juga dinolkan agar buka-tutup terasa
 * seketika, bukan sekadar lebih cepat.
 */
@media (prefers-reduced-motion: reduce) {
	.alm-faq__lencana-teks {
		animation: none;
	}

	.alm-faq__item,
	.alm-faq__tanda,
	.alm-faq__cta {
		transition: none;
	}

	.alm-faq__item::details-content {
		transition: none;
	}
}