/*
Theme Name: Hijra Manasik
Theme URI: https://example.com/hijra-manasik
Author: Hijra Manasik
Author URI: https://example.com
Description: Tema premium luxury untuk pakej umrah Hijra Manasik (Langkah Hijrah, Manasik Sempurna). Soft-luxury, editorial, CMS-ready & booking-ready dengan gambar trip sebenar & badge lesen rasmi. Palet cream/ivory + nude kemerahan + gold + dark brown. Playfair Display + Inter.
Version: 3.22.3
Requires at least: 5.5
Tested up to: 6.5
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hijra-manasik
Tags: landing-page, custom-colors, responsive, one-page, travel, luxury
*/

/* ============================================================
   1. Tokens — palet premium (tukar di sini)
   ============================================================ */
:root {
	--hm-cream: #FAF3EA;
	--hm-ivory: #FFFBF5;
	--hm-nude: #C98F7A;
	--hm-rose: #B97768;
	--hm-gold: #C8A24A;
	--hm-soft-gold: #E8D6A3;
	--hm-brown: #3A2418;
	--hm-dark: #1F1510;
	--hm-muted: #7B6658;
	--hm-white: #FFFFFF;
	--hm-wa: #1F8A5B;

	--font-head: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--radius: 24px;
	--radius-sm: 14px;
	--shadow: 0 24px 60px rgba(58, 36, 24, .12);
	--shadow-sm: 0 10px 30px rgba(58, 36, 24, .08);
	--shadow-lift: 0 32px 70px rgba(58, 36, 24, .18);
	--container: 1200px;
	--header-h: 84px;
	--ease: cubic-bezier(.22, .61, .36, 1);
}

/* ============================================================
   2. Base
   ============================================================ */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.75;
	color: var(--hm-brown);
	background: var(--hm-ivory);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--hm-rose); text-decoration: none; transition: color .25s var(--ease); }
a:hover { color: var(--hm-gold); }

h1, h2, h3, h4 {
	font-family: var(--font-head);
	font-weight: 600;
	line-height: 1.18;
	color: var(--hm-brown);
	margin: 0 0 .5em;
	letter-spacing: -.01em;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }

p { margin: 0 0 1rem; }

.container {
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 24px;
}

.narrow { max-width: 760px; margin-left: auto; margin-right: auto; }
.container--narrow { max-width: 860px; }

/* ============================================================
   3. Sections
   ============================================================ */
.section { padding: clamp(64px, 9vw, 120px) 0; position: relative; }
.section--ivory { background: var(--hm-ivory); }
.section--cream { background: var(--hm-cream); }
.section--alt { background: var(--hm-cream); }
.section--dark,
.section--maroon {
	background: linear-gradient(155deg, var(--hm-brown) 0%, var(--hm-dark) 100%);
	color: var(--hm-cream);
}
.section--dark h1, .section--dark h2, .section--dark h3,
.section--maroon h1, .section--maroon h2, .section--maroon h3 { color: var(--hm-ivory); }

.section__head { max-width: 720px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }
.section__head .lead { margin-top: .5rem; }

.eyebrow {
	display: inline-block;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--hm-gold);
	margin-bottom: 14px;
}
.section--dark .eyebrow, .section--maroon .eyebrow { color: var(--hm-soft-gold); }

.lead {
	font-size: clamp(1.05rem, 1.6vw, 1.22rem);
	line-height: 1.8;
	color: var(--hm-muted);
}
.section--dark .lead, .section--maroon .lead { color: rgba(250, 243, 234, .82); }

.prose { line-height: 1.85; color: var(--hm-muted); }
.prose h2, .prose h3 { color: var(--hm-brown); margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose p { margin: 0 0 1em; }

/* Islamic pattern overlay */
.pattern-bg::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url('assets/images/pattern-islamic.svg');
	background-size: 320px;
	opacity: .06;
	pointer-events: none;
	z-index: 0;
}
.pattern-bg > * { position: relative; z-index: 1; }
.section--dark.pattern-bg::before, .section--maroon.pattern-bg::before { opacity: .08; }

/* ============================================================
   4. Buttons
   ============================================================ */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	padding: 15px 28px;
	border-radius: 999px;
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
	text-align: center;
}
.btn:hover { transform: translateY(-2px); }
.btn--lg { padding: 17px 34px; font-size: 16px; }
.btn--sm { padding: 10px 20px; font-size: 14px; }

.btn--primary,
.btn--gold {
	background: linear-gradient(135deg, var(--hm-gold), #b8923f);
	color: #fff;
	box-shadow: 0 12px 28px rgba(200, 162, 74, .32);
}
.btn--primary:hover, .btn--gold:hover { color: #fff; box-shadow: 0 18px 38px rgba(200, 162, 74, .42); }

.btn--ghost {
	background: transparent;
	border-color: rgba(58, 36, 24, .25);
	color: var(--hm-brown);
}
.btn--ghost:hover { border-color: var(--hm-gold); color: var(--hm-gold); }
.section--dark .btn--ghost, .section--maroon .btn--ghost { color: var(--hm-ivory); border-color: rgba(250, 243, 234, .4); }
.section--dark .btn--ghost:hover, .section--maroon .btn--ghost:hover { border-color: var(--hm-soft-gold); color: var(--hm-soft-gold); }

.btn--wa {
	background: var(--hm-wa);
	color: #fff;
	box-shadow: 0 12px 28px rgba(31, 138, 91, .28);
}
.btn--wa:hover { background: #1a7a50; color: #fff; box-shadow: 0 18px 38px rgba(31, 138, 91, .38); }

/* ============================================================
   5. Grid helpers
   ============================================================ */
.grid { display: grid; gap: 28px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
	background: var(--hm-white);
	border: 1px solid rgba(58, 36, 24, .07);
	border-radius: var(--radius);
	padding: 32px;
	box-shadow: var(--shadow-sm);
	transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }

.pill {
	display: inline-block;
	padding: 5px 14px;
	border-radius: 999px;
	background: rgba(200, 162, 74, .16);
	color: #9a7416;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .02em;
}

/* ============================================================
   6. Reveal animation
   ============================================================ */
.reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .8s var(--ease), transform .8s var(--ease);
	will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .1s; }
.reveal[data-delay="2"] { transition-delay: .2s; }
.reveal[data-delay="3"] { transition-delay: .3s; }
.reveal[data-delay="4"] { transition-delay: .4s; }
@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1; transform: none; transition: none; }
	html { scroll-behavior: auto; }
}

/* ============================================================
   7. Header (sticky, transparent-on-hero)
   ============================================================ */
.site-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 100;
	height: var(--header-h);
	display: flex;
	align-items: center;
	background: linear-gradient(180deg, #251812 0%, #1F1510 100%);
	box-shadow: 0 4px 24px rgba(15, 9, 6, .28);
	border-bottom: 1px solid rgba(200, 162, 74, .14);
	transition: background .35s var(--ease), box-shadow .35s var(--ease), height .35s var(--ease);
}
.site-header--transparent {
	background: linear-gradient(180deg, rgba(20, 13, 9, .55) 0%, rgba(20, 13, 9, 0) 100%);
	box-shadow: none;
	border-bottom-color: transparent;
}
.site-header--transparent.is-scrolled {
	background: linear-gradient(180deg, #251812 0%, #1F1510 100%);
	box-shadow: 0 4px 24px rgba(15, 9, 6, .28);
	border-bottom-color: rgba(200, 162, 74, .14);
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	max-width: 1320px; /* sedikit lebih lebar dari kandungan supaya menu penuh muat */
}
.site-logo img { height: 46px; width: auto; display: block; }

.nav { display: flex; align-items: center; gap: 16px; }
.nav__links {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 14px;
	list-style: none;
	margin: 0; padding: 0;
}
.nav__links li { flex: 0 0 auto; }
.nav__links a {
	color: var(--hm-cream);
	font-weight: 500;
	font-size: 14px;
	white-space: nowrap;
	position: relative;
}
.nav__links a::after {
	content: '';
	position: absolute; left: 0; bottom: -6px;
	width: 0; height: 2px;
	background: var(--hm-gold);
	transition: width .3s var(--ease);
}
.nav__links a:hover { color: var(--hm-gold); }
.nav__links a:hover::after { width: 100%; }

.nav .btn--ghost { color: var(--hm-cream); border-color: rgba(250, 243, 234, .5); }

.nav__actions { display: flex; align-items: center; gap: 10px; }
.nav__actions .btn--gold {
	box-shadow: 0 6px 18px rgba(15, 9, 6, .3);
}

.nav-toggle {
	display: none;
	width: 44px; height: 44px;
	background: transparent;
	border: 0;
	cursor: pointer;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	padding: 0;
}
.nav-toggle span {
	display: block;
	width: 26px; height: 2px;
	background: var(--hm-cream);
	margin: 0 auto;
	transition: transform .3s var(--ease), opacity .3s var(--ease);
}

.site-content { overflow-x: clip; }

/* ============================================================
   8. Hero (luxury, layered)
   ============================================================ */
.hero {
	position: relative;
	padding: calc(var(--header-h) + 70px) 0 100px;
	background:
		radial-gradient(620px 440px at 90% 6%, rgba(200, 162, 74, .16), transparent 62%),
		radial-gradient(560px 420px at 2% 94%, rgba(201, 143, 122, .18), transparent 60%),
		linear-gradient(160deg, var(--hm-cream) 0%, var(--hm-ivory) 58%, #fff 100%);
	overflow: hidden;
}
/* Neutralkan reveal dalam hero — guna animasi masuk khas (heroIn) */
.hero .reveal { opacity: 1; transform: none; }
.hero__grid {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 56px;
	align-items: center;
}
.hero__title { margin: 14px 0 18px; }
.hero__sub { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--hm-muted); max-width: 540px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px 0 26px; }
.hero__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	padding-top: 22px;
	border-top: 1px solid rgba(58, 36, 24, .1);
}
.hero__trust span {
	font-size: 14px;
	font-weight: 500;
	color: var(--hm-brown);
	display: inline-flex;
	align-items: center;
	gap: 7px;
}
.hero__trust span::before { content: '✦'; color: var(--hm-gold); }

/* Layered media + floating cards */
.hero__media { position: relative; }
.hero__frame {
	position: relative;
	border-radius: 36px;
	overflow: hidden;
	box-shadow: var(--shadow), 0 28px 70px -28px rgba(200, 162, 74, .5);
	aspect-ratio: 4 / 5;
	background: linear-gradient(135deg, var(--hm-nude), var(--hm-rose));
	will-change: transform;
}
.hero__frame img { width: 100%; height: 100%; object-fit: cover; }
.hero__frame::after {
	content: '';
	position: absolute; inset: 0;
	border: 1.5px solid rgba(200, 162, 74, .55);
	border-radius: 36px;
	box-shadow: inset 0 0 0 4px rgba(255, 251, 245, .35);
	pointer-events: none;
}
.float-card {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 12px;
	background: rgba(255, 251, 245, .92);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, .6);
	border-radius: 16px;
	padding: 14px 18px;
	box-shadow: var(--shadow-sm);
	font-weight: 600;
	font-size: 14px;
	color: var(--hm-brown);
}
.float-card__icon {
	width: 38px; height: 38px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: rgba(200, 162, 74, .18);
	color: var(--hm-gold);
	font-size: 18px;
}
.float-card--tl { top: 22px; left: -26px; }
.float-card--br { bottom: 26px; right: -26px; }

/* Strip statistik hero */
.hero__stats { display: flex; flex-wrap: wrap; gap: 0 26px; margin-top: 26px; }
.hero__stat { display: flex; flex-direction: column; padding: 4px 0; }
.hero__stat + .hero__stat { padding-left: 26px; border-left: 1px solid rgba(58, 36, 24, .12); }
.hero__stat strong {
	font-family: var(--font-head);
	font-size: 1.5rem; line-height: 1; color: var(--hm-gold);
}
.hero__stat span { font-size: 12.5px; color: var(--hm-muted); margin-top: 5px; }

/* Scroll cue */
.hero__scroll {
	position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
	display: inline-flex; flex-direction: column; align-items: center; gap: 5px;
	text-decoration: none; color: var(--hm-muted);
	font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.hero__scroll svg { color: var(--hm-gold); animation: heroBounce 1.8s ease-in-out infinite; }
@keyframes heroBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* Animasi masuk hero (stagger) */
@keyframes heroIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.hero__content > * { opacity: 0; animation: heroIn .7s var(--ease) forwards; }
.hero__content > *:nth-child(1) { animation-delay: .05s; }
.hero__content > *:nth-child(2) { animation-delay: .14s; }
.hero__content > *:nth-child(3) { animation-delay: .23s; }
.hero__content > *:nth-child(4) { animation-delay: .32s; }
.hero__content > *:nth-child(5) { animation-delay: .41s; }
.hero__content > *:nth-child(6) { animation-delay: .50s; }
.hero__media { opacity: 0; animation: heroIn .85s var(--ease) .28s forwards; }

@media (prefers-reduced-motion: reduce) {
	.hero__content > *, .hero__media { animation: none; opacity: 1; }
	.hero__scroll svg { animation: none; }
}

/* ============================================================
   9. Pain (soft problem)
   ============================================================ */
.pain__cards { margin-top: 12px; }
.pain__card { text-align: left; }
.pain__card .pain__ic {
	width: 46px; height: 46px;
	display: grid; place-items: center;
	border-radius: 14px;
	background: rgba(201, 143, 122, .16);
	color: var(--hm-rose);
	font-size: 20px;
	margin-bottom: 16px;
}
.pain__card h3 { font-size: 1.18rem; }
.pain__card p { color: var(--hm-muted); margin: 0; font-size: 15px; }
.pain__close {
	max-width: 720px;
	margin: 48px auto 0;
	text-align: center;
	font-family: var(--font-head);
	font-size: clamp(1.2rem, 2.2vw, 1.6rem);
	font-style: italic;
	color: var(--hm-brown);
}

/* ============================================================
   10. Signature Experience (3 large cards)
   ============================================================ */
.exp-card { display: flex; flex-direction: column; padding: 38px 34px; }
.exp-card__step {
	font-family: var(--font-head);
	font-size: 14px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--hm-gold);
	margin-bottom: 10px;
}
.exp-card h3 { font-size: 1.55rem; margin-bottom: 18px; }
.exp-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.exp-card li {
	position: relative; padding-left: 28px; color: var(--hm-muted); font-size: 15.5px;
}
.exp-card li::before {
	content: '✓';
	position: absolute; left: 0; top: 1px;
	width: 20px; height: 20px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: rgba(200, 162, 74, .16);
	color: var(--hm-gold);
	font-size: 12px; font-weight: 700;
}

/* ============================================================
   11. Packages (luxury cards)
   ============================================================ */
.pkg {
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
}
.pkg__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.pkg__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.pkg:hover .pkg__media img { transform: scale(1.05); }
.pkg__body { padding: 26px 28px 30px; display: flex; flex-direction: column; flex: 1; }
.pkg--featured { outline: 2px solid var(--hm-gold); outline-offset: -2px; }

/* Poster pakej (boleh klik → lightbox) */
.pkg__poster {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--hm-dark);
	cursor: zoom-in;
}
.pkg__poster img {
	width: 100%; height: 100%;
	object-fit: cover; object-position: top center;
	transition: transform .6s var(--ease);
}
.pkg__poster:hover img { transform: scale(1.04); }
.pkg__poster-zoom {
	position: absolute;
	left: 50%; bottom: 16px;
	transform: translate(-50%, 8px);
	display: inline-flex; align-items: center; gap: 7px;
	padding: 9px 18px;
	border-radius: 999px;
	font-size: 13px; font-weight: 600;
	color: var(--hm-brown);
	background: rgba(250, 243, 234, .94);
	box-shadow: var(--shadow-sm);
	opacity: 0; pointer-events: none;
	transition: opacity .35s var(--ease), transform .35s var(--ease);
	z-index: 2;
}
.pkg__poster:hover .pkg__poster-zoom,
.pkg__poster:focus-visible .pkg__poster-zoom {
	opacity: 1; transform: translate(-50%, 0);
}

/* Logo airline pada kad pakej */
.pkg__airlines {
	display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
	margin: 0 0 16px;
}
.pkg__airlines-label {
	font-size: 11.5px; font-weight: 600;
	text-transform: uppercase; letter-spacing: .08em;
	color: var(--hm-muted);
}
.pkg__airlines-logos { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pkg__airlines-logos img { height: 22px; width: auto; object-fit: contain; }
.pkg__airline-text {
	font-size: 13px; font-weight: 600; color: var(--hm-brown);
	padding: 3px 10px; border-radius: 999px;
	background: rgba(0, 0, 0, .05);
}

.pkg__badge {
	position: absolute;
	top: 16px; left: 16px;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #fff;
	background: var(--hm-rose);
	box-shadow: var(--shadow-sm);
	z-index: 2;
}
.pkg__badge--popular { background: linear-gradient(135deg, var(--hm-gold), #b8923f); }
.pkg__badge--value { background: var(--hm-wa); }
.pkg__badge--comfort { background: var(--hm-rose); }
.pkg__badge--near { background: var(--hm-brown); }

.pkg__name { font-size: 1.4rem; margin: 0 0 6px; }
.pkg__summary { color: var(--hm-muted); font-size: 15px; margin: 0 0 16px; font-style: italic; }
.pkg__price-label { font-size: 12.5px; color: var(--hm-muted); text-transform: uppercase; letter-spacing: .08em; }
.pkg__price { font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; color: var(--hm-gold); margin: 2px 0 16px; }
.pkg__list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 9px; }
.pkg__list li { position: relative; padding-left: 26px; color: var(--hm-muted); font-size: 14.5px; }
.pkg__list li::before {
	content: '✓'; position: absolute; left: 0; top: 0;
	color: var(--hm-gold); font-weight: 700;
}
.pkg__note { color: var(--hm-muted); font-size: 14px; }
.pkg__actions { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }

.pkg__type {
	display: inline-block;
	font-size: 11.5px; font-weight: 600;
	text-transform: uppercase; letter-spacing: .1em;
	color: var(--hm-gold); margin-bottom: 4px;
}
.pkg__tiers {
	margin: 0 0 16px;
	border: 1px solid rgba(0, 0, 0, .06);
	border-radius: var(--radius-sm, 14px);
	overflow: hidden;
}
.pkg__tier-row {
	display: flex; justify-content: space-between; align-items: center;
	padding: 8px 14px; font-size: 14px;
	border-bottom: 1px solid rgba(0, 0, 0, .05);
}
.pkg__tier-row:last-child { border-bottom: 0; }
.pkg__tier-row:nth-child(odd) { background: rgba(0, 0, 0, .02); }
.pkg__tier-label { color: var(--hm-muted); }
.pkg__tier-price { font-weight: 700; color: var(--hm-brown); }
.pkg__meta {
	font-size: 13px; color: var(--hm-muted);
	margin: 0 0 14px; line-height: 1.5;
}
.pkg__peak-note {
	font-size: 12.5px; color: var(--hm-muted);
	margin: 0 0 18px; line-height: 1.5; font-style: italic;
}

.packages__more { text-align: center; margin-top: 48px; }
.packages__peak {
	text-align: center; margin-top: 28px;
	font-size: 14px; color: var(--hm-muted);
}

/* ============================================================
   12. Value Stack (horizontal premium cards)
   ============================================================ */
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.value-card {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 24px 26px;
}
.value-card__icon {
	flex: 0 0 auto;
	width: 58px; height: 58px;
	display: grid; place-items: center;
	border-radius: 16px;
	background: linear-gradient(135deg, rgba(200,162,74,.18), rgba(201,143,122,.18));
	overflow: hidden;
}
.value-card__icon img { width: 32px; height: 32px; }
.value-card h3 { font-size: 1.12rem; margin: 0 0 4px; }
.value-card p { margin: 0; color: var(--hm-muted); font-size: 14px; }

/* ============================================================
   13. Trust builder
   ============================================================ */
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.trust-item {
	display: flex; align-items: flex-start; gap: 14px;
	padding: 22px 24px;
	background: var(--hm-white);
	border-radius: var(--radius-sm);
	border: 1px solid rgba(58, 36, 24, .07);
}
.trust-item__ic {
	flex: 0 0 auto;
	width: 40px; height: 40px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: rgba(200, 162, 74, .16);
	color: var(--hm-gold);
	font-size: 18px;
}
.trust-item h3 { font-size: 1.05rem; margin: 2px 0 4px; }
.trust-item p { margin: 0; color: var(--hm-muted); font-size: 14px; }

/* ============================================================
   14. Timeline (process)
   ============================================================ */
.timeline {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 24px;
	counter-reset: step;
	position: relative;
}
.timeline::before {
	content: '';
	position: absolute;
	top: 27px; left: 8%; right: 8%;
	height: 2px;
	background: linear-gradient(90deg, transparent, rgba(200,162,74,.5), transparent);
	z-index: 0;
}
.timeline__item { text-align: center; position: relative; z-index: 1; }
.timeline__num {
	width: 56px; height: 56px;
	margin: 0 auto 16px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--hm-ivory);
	border: 2px solid var(--hm-gold);
	color: var(--hm-gold);
	font-family: var(--font-head);
	font-size: 1.3rem;
	font-weight: 700;
	box-shadow: 0 0 0 6px var(--hm-ivory);
}
.section--cream .timeline__num, .section--cream .timeline::before { }
.timeline__item h3 { font-size: 1.02rem; margin: 0 0 4px; }
.timeline__item p { margin: 0; color: var(--hm-muted); font-size: 13.5px; }

/* ============================================================
   15. Testimonials (carousel)
   ============================================================ */
.carousel { position: relative; max-width: 920px; margin: 0 auto; }
.carousel__viewport { overflow: hidden; }
.carousel__track { display: flex; transition: transform .6s var(--ease); }
.carousel__slide { min-width: 100%; padding: 8px; }

.quote {
	background: var(--hm-white);
	border: 1px solid rgba(58, 36, 24, .07);
	border-radius: var(--radius);
	padding: 44px 48px;
	box-shadow: var(--shadow-sm);
	text-align: center;
	margin: 0;
}
.quote__stars { color: var(--hm-gold); font-size: 20px; letter-spacing: 3px; margin-bottom: 18px; }
.quote__text {
	font-family: var(--font-head);
	font-size: clamp(1.15rem, 2vw, 1.5rem);
	font-style: italic;
	line-height: 1.6;
	color: var(--hm-brown);
	margin: 0 0 22px;
}
.quote__author { font-weight: 600; color: var(--hm-rose); font-style: normal; }

.carousel__nav { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 28px; }
.carousel__btn {
	width: 48px; height: 48px;
	border-radius: 50%;
	border: 1.5px solid rgba(58, 36, 24, .18);
	background: var(--hm-white);
	color: var(--hm-brown);
	font-size: 18px;
	cursor: pointer;
	display: grid; place-items: center;
	transition: all .25s var(--ease);
}
.carousel__btn:hover { border-color: var(--hm-gold); color: var(--hm-gold); }
.carousel__dots { display: flex; gap: 8px; }
.carousel__dot {
	width: 9px; height: 9px; border-radius: 50%;
	border: 0; padding: 0;
	background: rgba(58, 36, 24, .2);
	cursor: pointer; transition: all .25s var(--ease);
}
.carousel__dot.is-active { background: var(--hm-gold); width: 26px; border-radius: 999px; }

/* ============================================================
   16. FAQ (premium accordion)
   ============================================================ */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 14px; }
.faq__item {
	background: var(--hm-white);
	border: 1px solid rgba(58, 36, 24, .08);
	border-radius: var(--radius-sm);
	overflow: hidden;
	transition: box-shadow .3s var(--ease);
}
.faq__item.is-open { box-shadow: var(--shadow-sm); }
.faq__q {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 26px;
	background: transparent;
	border: 0;
	cursor: pointer;
	text-align: left;
	font-family: var(--font-head);
	font-size: 1.12rem;
	font-weight: 600;
	color: var(--hm-brown);
}
.faq__icon {
	flex: 0 0 auto;
	width: 30px; height: 30px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: rgba(200, 162, 74, .16);
	color: var(--hm-gold);
	font-size: 20px;
	transition: transform .3s var(--ease);
}
.faq__item.is-open .faq__icon { transform: rotate(45deg); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.faq__a-inner { padding: 0 26px 24px; color: var(--hm-muted); }

/* ============================================================
   17. Lead form (split premium)
   ============================================================ */
.lead-split { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.lead-split__copy h2 { margin-bottom: 14px; }
.lead-split__reassure { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.lead-split__reassure li { position: relative; padding-left: 30px; color: var(--hm-muted); }
.lead-split__reassure li::before {
	content: '✦'; position: absolute; left: 0; top: 0; color: var(--hm-gold);
}

.lead-form {
	background: var(--hm-white);
	border: 1px solid rgba(58, 36, 24, .08);
	border-radius: var(--radius);
	padding: 40px;
	box-shadow: var(--shadow);
}
.form-row { margin-bottom: 18px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.lead-form label, .booking-form label {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--hm-brown);
	margin-bottom: 7px;
}
.lead-form input, .lead-form select,
.lead-form textarea,
.lead-form .input,
input[type="text"].input { width: 100%; }
.lead-form input,
.lead-form select,
.lead-form textarea {
	width: 100%;
	padding: 14px 16px;
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--hm-brown);
	background: var(--hm-cream);
	border: 1.5px solid rgba(58, 36, 24, .12);
	border-radius: 12px;
	transition: border-color .25s var(--ease), background .25s var(--ease);
}
.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus {
	outline: none;
	border-color: var(--hm-gold);
	background: var(--hm-white);
}
.lead-form .btn { width: 100%; margin-top: 6px; }
.form-note { margin-top: 14px; font-size: 13.5px; color: var(--hm-muted); text-align: center; }

/* ============================================================
   18. Final CTA
   ============================================================ */
.final-cta { text-align: center; }
.final-cta h2 { max-width: 760px; margin-left: auto; margin-right: auto; }
.final-cta .lead { max-width: 620px; margin: 0 auto 30px; }
.final-cta__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   19. Footer
   ============================================================ */
.site-footer {
	background: linear-gradient(160deg, var(--hm-brown), var(--hm-dark));
	color: rgba(250, 243, 234, .78);
	padding: 72px 0 36px;
}
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1.1fr 1.1fr; gap: 40px; }
.footer__brand img { margin-bottom: 18px; filter: brightness(0) invert(1); opacity: .92; }
.footer__brand p { color: rgba(250, 243, 234, .7); max-width: 360px; }
.footer__col h4 { color: var(--hm-soft-gold); font-size: 1.05rem; margin-bottom: 16px; }
.footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer__links a { color: rgba(250, 243, 234, .78); font-size: 15px; }
.footer__links a:hover { color: var(--hm-soft-gold); }
.footer__address { margin: 16px 0 0; color: rgba(250, 243, 234, .6); font-size: 13px; line-height: 1.7; max-width: 260px; }
.footer__licence li { color: rgba(250, 243, 234, .78); font-size: 14px; }
.footer__legal { color: rgba(250, 243, 234, .7); }
.footer__payment { margin-top: 22px; }
.footer__payment h4 { margin-bottom: 8px; }
.footer__bank { color: rgba(250, 243, 234, .82); font-size: 14px; margin: 0 0 12px; line-height: 1.6; }
.footer__bank span { color: rgba(250, 243, 234, .6); font-size: 12.5px; }
.footer__disclaimer {
	margin: 48px 0 0;
	padding-top: 24px;
	border-top: 1px solid rgba(250, 243, 234, .14);
	font-size: 13px;
	color: rgba(250, 243, 234, .55);
	text-align: center;
}

/* ============================================================
   20. Floating WhatsApp
   ============================================================ */
.wa-float {
	position: fixed;
	right: 22px; bottom: 22px;
	z-index: 200;
	width: 58px; height: 58px;
	border-radius: 50%;
	background: var(--hm-wa);
	color: #fff;
	display: grid; place-items: center;
	box-shadow: 0 10px 30px rgba(31, 138, 91, .4);
	animation: wa-pulse 3s infinite;
	transition: transform .25s var(--ease);
}
.wa-float:hover { transform: scale(1.08); color: #fff; }
.wa-float svg { width: 30px; height: 30px; }
@keyframes wa-pulse {
	0% { box-shadow: 0 0 0 0 rgba(31, 138, 91, .45); }
	70% { box-shadow: 0 0 0 14px rgba(31, 138, 91, 0); }
	100% { box-shadow: 0 0 0 0 rgba(31, 138, 91, 0); }
}

/* ============================================================
   21. CMS templates — archive / single / booking
   ============================================================ */
.page-hero { padding: calc(var(--header-h) + 60px) 0 70px; text-align: center; }
.page-hero--maroon,
.page-hero--dark {
	background: linear-gradient(155deg, var(--hm-brown), var(--hm-dark));
	color: var(--hm-cream);
}
.page-hero--maroon h1, .page-hero--dark h1 { color: var(--hm-ivory); }
.page-hero .lead { max-width: 640px; margin-left: auto; margin-right: auto; }

/* Single package hero */
.pkg-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; text-align: left; }
.pkg-hero__media img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); }
.pkg-hero__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 18px 0 26px; }
.pkg-hero__price { font-family: var(--font-head); font-size: 1.8rem; font-weight: 700; color: var(--hm-soft-gold); }
.page-hero--maroon .pill, .page-hero--dark .pill { background: rgba(250,243,234,.16); color: var(--hm-ivory); }

/* Check / cross lists */
.check-list, .cross-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.check-list li, .cross-list li { position: relative; padding-left: 32px; color: var(--hm-muted); }
.check-list li::before {
	content: '✓'; position: absolute; left: 0; top: 0;
	width: 22px; height: 22px; display: grid; place-items: center;
	border-radius: 50%; background: rgba(31,138,91,.14); color: var(--hm-wa);
	font-size: 13px; font-weight: 700;
}
.cross-list li::before {
	content: '×'; position: absolute; left: 0; top: 0;
	width: 22px; height: 22px; display: grid; place-items: center;
	border-radius: 50%; background: rgba(185,119,104,.16); color: var(--hm-rose);
	font-size: 15px; font-weight: 700;
}

/* Departures */
.departures { display: grid; gap: 14px; }
.departure {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1.2fr auto;
	gap: 18px; align-items: center;
	padding: 20px 24px;
	background: var(--hm-white);
	border: 1px solid rgba(58, 36, 24, .08);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-sm);
}
.departure__date strong { display: block; color: var(--hm-brown); font-size: 16px; }
.departure__date span { display: block; color: var(--hm-muted); font-size: 14px; }
.departure__hotel { display: block; margin-top: 3px; color: var(--hm-muted); font-size: 12.5px; line-height: 1.4; }
.departure__price { font-weight: 700; color: var(--hm-rose); }
.departure__seat { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.departure__seat small { color: var(--hm-muted); }

/* Badge musim (Low / Mid / Peak) */
.season-badge {
	display: inline-block; padding: 5px 14px;
	border-radius: 999px; font-size: 12px; font-weight: 700;
	letter-spacing: .03em; text-transform: uppercase;
}
.season--low { background: rgba(31, 138, 91, .14); color: var(--hm-wa); }
.season--mid { background: rgba(200, 162, 74, .2); color: #9a7416; }
.season--peak { background: rgba(196, 96, 96, .16); color: var(--hm-rose); }

/* Toggle "lihat semua tarikh" */
.departure--extra.is-hidden { display: none; }
.departures__toggle-wrap { text-align: center; margin-top: 22px; }

/* Tarikh disusun ikut bulan — carousel slide premium */
.dep2--slider { position: relative; }
.dep2__viewport { overflow: hidden; padding: 6px; margin: -6px; }
.dep2__track { display: flex; gap: 20px; transition: transform .6s cubic-bezier(.2, .7, .2, 1); will-change: transform; }
.dep2__month {
	position: relative;
	flex: 0 0 calc((100% - 40px) / 3);
	background: linear-gradient(180deg, #fffdfa, #faf3ea);
	border: 1px solid rgba(58, 36, 24, .08);
	border-radius: 20px;
	box-shadow: 0 22px 48px -26px rgba(58, 36, 24, .4);
	padding: 24px 22px 18px;
	overflow: hidden;
	transition: transform .4s var(--ease), box-shadow .4s ease;
}
/* Garis aksen emas atas */
.dep2__month::before {
	content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
	background: linear-gradient(90deg, var(--hm-gold), var(--hm-soft-gold, #e7c277), var(--hm-gold));
}
.dep2__month:hover { transform: translateY(-6px); box-shadow: 0 32px 64px -28px rgba(58, 36, 24, .5); }
.dep2__month-head {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding-bottom: 14px; margin-bottom: 14px;
	border-bottom: 1px solid rgba(58, 36, 24, .08);
}
.dep2__month-name { font-family: var(--font-head); font-size: 1.25rem; color: var(--hm-brown); }
.dep2__dates { display: grid; gap: 8px; }
.dep2__date {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	padding: 10px 14px; border-radius: 11px;
	background: var(--hm-cream);
	border: 1px solid rgba(58, 36, 24, .06);
	color: var(--hm-brown); text-decoration: none;
	font-size: 14px; font-weight: 600;
	transition: all .25s var(--ease);
}
.dep2__date svg { color: var(--hm-gold); opacity: .6; transition: transform .25s var(--ease), opacity .25s ease; }
.dep2__date:hover {
	background: var(--hm-dark); color: #fff;
	border-color: var(--hm-dark);
	transform: translateX(2px); box-shadow: var(--shadow-sm);
}
.dep2__date:hover svg { color: var(--hm-soft-gold); opacity: 1; transform: translateX(3px); }

/* Kawalan slider */
.dep2__controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 26px; }
.dep2__dots { display: flex; gap: 8px; flex-wrap: wrap; }
.dep2__dot {
	width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
	background: rgba(58, 36, 24, .2); transition: all .25s ease;
}
.dep2__dot.is-active { background: var(--hm-gold); width: 26px; border-radius: 999px; }
.dep2__nav { display: flex; gap: 10px; }
.dep2__arrow {
	width: 46px; height: 46px; display: grid; place-items: center;
	border-radius: 50%; cursor: pointer;
	border: 1px solid rgba(58, 36, 24, .18);
	background: var(--hm-white); color: var(--hm-brown);
	box-shadow: 0 6px 16px -8px rgba(58, 36, 24, .4);
	transition: all .25s var(--ease);
}
.dep2__arrow:hover { background: var(--hm-dark); color: #fff; border-color: var(--hm-dark); transform: translateY(-2px); }
.dep2__arrow:disabled { opacity: .35; cursor: default; transform: none; }

.dep2__footer {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 16px; margin-top: 30px;
}
.dep2__footer .departures__note { margin: 0; max-width: 640px; }

@media (max-width: 900px) {
	.dep2__month { flex-basis: calc((100% - 20px) / 2); }
}
@media (max-width: 560px) {
	.dep2__month { flex-basis: 100%; }
	.dep2__footer { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
	.dep2__track, .dep2__month, .dep2__date, .dep2__arrow { transition: none !important; }
	.dep2__month:hover { transform: none; }
}

/* ============================================================
   Galeri Jemaah (grid + lightbox)
   ============================================================ */
.gallery-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}
.gallery-item {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--radius-sm);
	background: var(--hm-dark);
	cursor: zoom-in;
	box-shadow: var(--shadow-sm);
}
.gallery-item:nth-child(1),
.gallery-item:nth-child(8) { grid-column: span 2; grid-row: span 2; aspect-ratio: 1 / 1; }
.gallery-item img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .6s var(--ease);
}
.gallery-item:hover img { transform: scale(1.07); }
.gallery-item__overlay {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	color: #fff;
	background: linear-gradient(0deg, rgba(31, 21, 16, .45), rgba(31, 21, 16, .05));
	opacity: 0;
	transition: opacity .35s var(--ease);
}
.gallery-item:hover .gallery-item__overlay,
.gallery-item:focus-visible .gallery-item__overlay { opacity: 1; }
.gallery-note {
	text-align: center; margin-top: 26px;
	color: var(--hm-muted); font-size: 14px;
}
@media (max-width: 860px) {
	.gallery-grid { grid-template-columns: repeat(3, 1fr); }
	.gallery-item:nth-child(1),
	.gallery-item:nth-child(8) { grid-column: span 2; grid-row: span 2; }
}
@media (max-width: 560px) {
	.gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.gallery-item:nth-child(1),
	.gallery-item:nth-child(8) { grid-column: span 2; grid-row: auto; }
}

/* ============================================================
   Lightbox (vanilla, dikongsi galeri + poster pakej + bukti testimoni)
   ============================================================ */
.hm-lightbox {
	position: fixed; inset: 0; z-index: 9999;
	display: flex; align-items: center; justify-content: center;
	padding: 4vh 4vw;
	background: rgba(20, 13, 9, .92);
	opacity: 0; visibility: hidden;
	transition: opacity .3s var(--ease), visibility .3s var(--ease);
}
.hm-lightbox.is-open { opacity: 1; visibility: visible; }
.hm-lightbox__figure {
	margin: 0; max-width: 100%; max-height: 100%;
	display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.hm-lightbox__img {
	max-width: 100%; max-height: 82vh;
	border-radius: 8px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
	background: #fff;
	transform: scale(.96); transition: transform .3s var(--ease);
}
.hm-lightbox.is-open .hm-lightbox__img { transform: scale(1); }
.hm-lightbox__caption {
	color: var(--hm-cream); font-size: 14px; text-align: center;
	max-width: 640px;
}
.hm-lightbox__btn {
	position: absolute;
	display: flex; align-items: center; justify-content: center;
	width: 48px; height: 48px;
	border: 0; border-radius: 999px;
	background: rgba(250, 243, 234, .12);
	color: var(--hm-cream);
	font-size: 26px; line-height: 1;
	cursor: pointer;
	transition: background .25s var(--ease);
	-webkit-tap-highlight-color: transparent;
}
.hm-lightbox__btn:hover { background: rgba(250, 243, 234, .26); }
.hm-lightbox__close { top: 18px; right: 18px; }
.hm-lightbox__nav--prev { left: 18px; top: 50%; transform: translateY(-50%); }
.hm-lightbox__nav--next { right: 18px; top: 50%; transform: translateY(-50%); }
.hm-lightbox--single .hm-lightbox__nav { display: none; }

/* Strip bukti testimoni */
.proof { margin-top: 56px; text-align: center; }
.proof__title {
	font-size: 1.25rem; margin: 0 0 22px; color: var(--hm-brown);
}
.proof__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}
.proof__item {
	display: block; aspect-ratio: 3 / 4; overflow: hidden;
	border-radius: var(--radius-sm); background: var(--hm-dark);
	box-shadow: var(--shadow-sm); cursor: zoom-in;
}
.proof__item img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform .5s var(--ease);
}
.proof__item:hover img { transform: scale(1.06); }
@media (max-width: 860px) { .proof__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .proof__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
	.hm-lightbox__btn { width: 42px; height: 42px; font-size: 22px; }
	.hm-lightbox__nav--prev { left: 8px; }
	.hm-lightbox__nav--next { right: 8px; }
	.hm-lightbox__img { max-height: 74vh; }
}

.badge { display: inline-block; padding: 5px 13px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.badge--available { background: rgba(31,138,91,.14); color: var(--hm-wa); }
.badge--limited { background: rgba(200,162,74,.2); color: #9a7416; }
.badge--full { background: rgba(185,119,104,.16); color: var(--hm-rose); }

/* Hotel cards */
.hotel-card__img { width: 100%; height: 190px; object-fit: cover; border-radius: 14px; margin-bottom: 16px; }
.hotel-card h3 { margin: 10px 0 6px; }

/* Itinerary */
.itinerary { list-style: none; padding: 0; margin: 0; }
.itinerary__item {
	display: grid; grid-template-columns: 130px 1fr; gap: 28px;
	padding: 26px 0; border-bottom: 1px solid rgba(58, 36, 24, .1);
}
.itinerary__item:last-child { border-bottom: 0; }
.itinerary__day { font-family: var(--font-head); font-weight: 700; color: var(--hm-gold); font-size: 1.15rem; }
.itinerary__body h3 { margin: 0 0 8px; }
.itinerary__body h3 span { color: var(--hm-muted); font-weight: 400; font-size: .8em; }

/* ============================================================
   21b. About + milestones
   ============================================================ */
.about__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center; }
.about__media { position: relative; padding-bottom: 30px; padding-right: 30px; }
.about__img { border-radius: var(--radius); box-shadow: var(--shadow); display: block; object-fit: cover; }
.about__img--main { width: 100%; aspect-ratio: 4 / 3; }
.about__img--accent {
	position: absolute; right: 0; bottom: 0;
	width: 52%; aspect-ratio: 4 / 3;
	border: 5px solid var(--hm-ivory);
}
.about__badge {
	position: absolute; top: 22px; left: -10px;
	background: var(--hm-brown); color: var(--hm-ivory);
	padding: 14px 20px; border-radius: var(--radius-sm);
	box-shadow: var(--shadow-sm); text-align: center;
}
.about__badge strong { display: block; font-family: var(--font-head); font-size: 1.25rem; color: var(--hm-soft-gold); }
.about__badge small { color: rgba(255, 251, 245, .8); font-size: 12px; }
.about__promise { list-style: none; padding: 0; margin: 24px 0 32px; display: grid; gap: 12px; }
.about__promise li { position: relative; padding-left: 32px; color: var(--hm-muted); }
.about__promise li::before {
	content: '✦'; position: absolute; left: 0; top: 1px;
	color: var(--hm-gold); font-size: 15px;
}
.milestones { border-top: 1px solid rgba(58, 36, 24, .12); padding-top: 22px; }
.milestones__title {
	display: block; text-transform: uppercase; letter-spacing: .14em;
	font-size: 12px; font-weight: 700; color: var(--hm-gold); margin-bottom: 14px;
}
.milestones ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.milestones li { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: baseline; }
.milestones__year { font-family: var(--font-head); font-weight: 700; color: var(--hm-rose); font-size: 1.1rem; }
.milestones__label { color: var(--hm-brown); }

/* Departures section helpers (front page) */
.departure__cta { white-space: nowrap; }
.departures__note { margin-top: 18px; color: var(--hm-muted); font-size: 14px; }
.departure__head { display: none; }

/* Trust / licence badge strip */
.licence-strip {
	display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
	margin-top: 40px;
}
.licence-badge {
	display: flex; align-items: center; gap: 12px;
	background: var(--hm-white); border: 1px solid rgba(58, 36, 24, .1);
	border-radius: 999px; padding: 12px 22px; box-shadow: var(--shadow-sm);
}
.licence-badge span { font-size: 22px; }
.licence-badge strong { display: block; color: var(--hm-brown); font-size: 14px; }
.licence-badge small { color: var(--hm-muted); font-size: 12px; }

/* ============================================================
   22. Responsive
   ============================================================ */
@media (max-width: 992px) {
	.hero__grid { grid-template-columns: 1fr; gap: 40px; }
	.hero__media { order: -1; max-width: 460px; margin: 0 auto; }
	.about__grid { grid-template-columns: 1fr; gap: 44px; }
	.about__media { order: -1; max-width: 520px; }
	.value-grid { grid-template-columns: repeat(2, 1fr); }
	.trust-grid { grid-template-columns: repeat(2, 1fr); }
	.grid--4 { grid-template-columns: repeat(2, 1fr); }
	.timeline { grid-template-columns: repeat(3, 1fr); row-gap: 36px; }
	.timeline::before { display: none; }
	.footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
	.lead-split { grid-template-columns: 1fr; gap: 36px; }
	.pkg-hero { grid-template-columns: 1fr; }
	.pkg-hero__media { order: -1; }
}

@media (max-width: 768px) {
	body { font-size: 16px; }
	.nav__links {
		position: fixed;
		top: var(--header-h); left: 0; right: 0;
		background: linear-gradient(180deg, #251812 0%, #1F1510 100%);
		flex-direction: column;
		align-items: flex-start;
		padding: 20px 24px;
		gap: 4px;
		box-shadow: 0 16px 40px rgba(15, 9, 6, .4);
		border-bottom: 1px solid rgba(200, 162, 74, .14);
		transform: translateY(-150%);
		transition: transform .35s var(--ease);
	}
	.nav__links li { width: 100%; }
	.nav__links a { display: block; padding: 12px 0; width: 100%; color: var(--hm-cream); border-bottom: 1px solid rgba(250, 243, 234, .1); }
	.nav.is-open .nav__links { transform: translateY(0); }
	.nav-toggle { display: flex; }
	.nav .btn--ghost { display: none; }
	.nav__actions { display: none; }
	.grid--3, .grid--4 { grid-template-columns: 1fr; }
	.float-card--tl { left: 8px; }
	.float-card--br { right: 8px; }
	.departure { grid-template-columns: 1fr 1fr; }
	.departure a.btn { grid-column: 1 / -1; }
	.itinerary__item { grid-template-columns: 1fr; gap: 8px; }
	.quote { padding: 32px 26px; }
}

@media (max-width: 560px) {
	.grid--2, .value-grid, .trust-grid, .form-grid, .footer__grid { grid-template-columns: 1fr; }
	.timeline { grid-template-columns: repeat(2, 1fr); }
	.lead-form { padding: 28px 22px; }
	.float-card { font-size: 12.5px; padding: 10px 13px; }
	.float-card__icon { width: 32px; height: 32px; font-size: 15px; }
}

/* ============================================================
   23. SECTION PAKEJ — Premium "luxury gem" (berskop .hmlux)
   Latar gelap + glassmorphism + gem kristal CSS. Tidak mengubah
   warna/pemboleh ubah global; semua kelas berprefiks .hmlux.
   ============================================================ */
.hmlux {
	position: relative;
	padding: 110px 0 120px;
	overflow: hidden;
	background:
		radial-gradient(1100px 600px at 50% -8%, rgba(120, 80, 170, .22), transparent 60%),
		radial-gradient(700px 460px at 12% 108%, rgba(200, 162, 74, .12), transparent 60%),
		linear-gradient(180deg, #160f1e 0%, #120c18 45%, #0d0911 100%);
	color: #efe9f5;
	isolation: isolate;
}
.hmlux::before {
	/* tekstur titik halus + vignette atas-bawah */
	content: '';
	position: absolute; inset: 0;
	background:
		radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .04) 1px, transparent 0) 0 0 / 26px 26px,
		linear-gradient(180deg, rgba(0, 0, 0, .35), transparent 18%, transparent 82%, rgba(0, 0, 0, .35));
	pointer-events: none;
	z-index: 0;
}
.hmlux__container {
	position: relative;
	z-index: 1;
	width: min(1180px, 92vw);
	margin: 0 auto;
}

/* Kepala seksyen */
.hmlux__head { text-align: center; max-width: 720px; margin: 0 auto 64px; }
.hmlux__eyebrow {
	display: inline-block;
	font-size: 12px; font-weight: 700; letter-spacing: .22em;
	text-transform: uppercase;
	color: rgba(216, 184, 120, .9);
	margin-bottom: 16px;
}
.hmlux__title {
	font-family: var(--font-head, 'Playfair Display', serif);
	font-size: clamp(2rem, 4.4vw, 3.1rem);
	line-height: 1.08;
	margin: 0 0 16px;
	color: #fbf7ff;
	letter-spacing: -.01em;
}
.hmlux__sub {
	margin: 0;
	font-size: clamp(15px, 1.6vw, 17px);
	line-height: 1.7;
	color: rgba(231, 224, 240, .72);
}

/* Grid kad */
.hmlux__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	align-items: stretch;
}

/* Kad glassmorphism */
.hmlux-card {
	--gem: #8aa6d8;
	--gem-soft: rgba(138, 166, 216, .55);
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 30px 26px 30px;
	border-radius: 26px;
	background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02));
	border: 1px solid rgba(255, 255, 255, .08);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
	transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s var(--ease, ease), border-color .5s ease;
	transform-style: preserve-3d;
	will-change: transform;
	overflow: hidden;
}
.hmlux-card::before {
	/* glow border halus (cincin warna gem) */
	content: '';
	position: absolute; inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(160deg, var(--gem-soft), transparent 42%, transparent 60%, var(--gem-soft));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: .5;
	transition: opacity .5s ease;
	pointer-events: none;
}
.hmlux-card:hover {
	transform: translateY(-10px);
	border-color: rgba(255, 255, 255, .16);
	box-shadow: 0 36px 90px rgba(0, 0, 0, .55), 0 0 40px -8px var(--gem-soft);
}
.hmlux-card:hover::before { opacity: 1; }

/* Tone warna gem */
.hmlux-card--blue   { --gem: #8aa6d8; --gem-soft: rgba(138, 166, 216, .55); }
.hmlux-card--gold   { --gem: #e7c277; --gem-soft: rgba(231, 194, 119, .5); }
.hmlux-card--violet { --gem: #b18cf0; --gem-soft: rgba(177, 140, 240, .5); }
.hmlux-card--rose   { --gem: #e79bb6; --gem-soft: rgba(231, 155, 182, .5); }

/* Kad featured */
.hmlux-card.is-featured {
	background: linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .03));
	border-color: rgba(231, 194, 119, .35);
}
.hmlux-card.is-featured::before { opacity: .9; }
.hmlux-card__ribbon {
	position: absolute;
	top: 16px; right: 16px;
	z-index: 3;
	font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	color: #2a1d0a;
	background: linear-gradient(135deg, #f0d89a, #d6a93f);
	padding: 6px 12px;
	border-radius: 999px;
	box-shadow: 0 8px 18px rgba(214, 169, 63, .35);
}

/* Visual gem */
.hmlux-card__visual {
	position: relative;
	height: 168px;
	margin-bottom: 18px;
	display: grid;
	place-items: center;
}
/* Visual guna Featured Image (poster) dari CMS */
.hmlux-card__visual--photo { height: 200px; }
.hmlux-card__photo {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, .12);
	box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .65);
	transition: transform .6s var(--ease, ease);
}
.hmlux-card:hover .hmlux-card__photo { transform: scale(1.04); }
.hmlux-card__glow {
	position: absolute;
	width: 180px; height: 180px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--gem-soft), transparent 62%);
	filter: blur(22px);
	opacity: .8;
	transition: opacity .5s ease, transform .6s ease;
	z-index: 0;
}
.hmlux-card:hover .hmlux-card__glow { opacity: 1; transform: scale(1.12); }

.hmlux-gem {
	position: relative;
	width: 86px; height: 124px;
	z-index: 1;
	transition: transform .6s cubic-bezier(.2, .7, .2, 1);
	filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .5));
}
.hmlux-card:hover .hmlux-gem { transform: translateY(-4px) rotate(-3deg) scale(1.05); }
.hmlux-gem__top, .hmlux-gem__bottom { position: absolute; left: 0; right: 0; }
.hmlux-gem__top {
	top: 0; height: 70px;
	clip-path: polygon(50% 0, 100% 42%, 50% 100%, 0 42%);
	background:
		linear-gradient(135deg, color-mix(in srgb, var(--gem) 92%, #fff) 0%, var(--gem) 45%, color-mix(in srgb, var(--gem) 60%, #000) 100%);
}
.hmlux-gem__bottom {
	top: 56px; height: 68px;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--gem) 70%, #000) 0%, color-mix(in srgb, var(--gem) 35%, #000) 100%);
	opacity: .92;
}
.hmlux-gem__shine {
	position: absolute; top: 6px; left: 30%;
	width: 26%; height: 40px;
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
	background: linear-gradient(135deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0));
	mix-blend-mode: screen;
	opacity: .65;
}

/* Body */
.hmlux-card__body { display: flex; flex-direction: column; flex: 1; text-align: center; }
.hmlux-card__tag {
	display: inline-block;
	align-self: center;
	font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	color: var(--gem);
	background: color-mix(in srgb, var(--gem) 16%, transparent);
	padding: 5px 12px; border-radius: 999px;
	margin-bottom: 14px;
}
.hmlux-card__name {
	font-family: var(--font-head, 'Playfair Display', serif);
	font-size: 1.5rem; margin: 0 0 14px; color: #fbf7ff;
}
.hmlux-card__price-label {
	display: block;
	font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
	color: rgba(231, 224, 240, .55);
	margin-bottom: 4px;
}
.hmlux-card__price {
	font-family: var(--font-head, 'Playfair Display', serif);
	font-size: 1.9rem; font-weight: 700; line-height: 1;
	margin: 0 0 16px;
	background: linear-gradient(135deg, #fff, var(--gem));
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: var(--gem);
}
.hmlux-card__desc {
	font-size: 13.5px; line-height: 1.6;
	color: rgba(231, 224, 240, .72);
	margin: 0 0 20px;
}

/* Room options */
/* Subline tempoh bawah harga */
.hmlux-card__nights {
	display: block;
	font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
	color: rgba(231, 224, 240, .7);
	margin: -8px 0 16px;
}

/* Point Hotel Mekah & Madinah */
.hmlux-card__hotels {
	list-style: none; margin: 0 0 18px; padding: 0;
	display: grid; gap: 8px; text-align: left;
}
.hmlux-card__hotels li {
	display: flex; flex-direction: column; gap: 1px;
	padding: 9px 12px;
	border-radius: 12px;
	background: rgba(255, 255, 255, .045);
	border: 1px solid rgba(255, 255, 255, .08);
}
.hmlux-card__hotel-lbl {
	font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	color: var(--gem);
}
.hmlux-card__hotel-val {
	font-size: 13px; font-weight: 600; color: #fbf7ff; line-height: 1.35;
}

/* Strip Penerbangan (airline) */
.hmlux-card__air {
	display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
	gap: 10px; margin-bottom: 18px;
}
.hmlux-card__air-label {
	font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	color: rgba(231, 224, 240, .5);
}
.hmlux-card__air-items { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hmlux-card__air-items img {
	height: 20px; width: auto; object-fit: contain;
	filter: brightness(0) invert(1); opacity: .92;
}
.hmlux-card__air-text {
	font-size: 12px; font-weight: 600; color: #efe9f5;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .12);
	padding: 3px 10px; border-radius: 999px;
}

/* Spec ringkas (Jenis Hotel) */
.hmlux-card__spec {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	margin-bottom: 16px;
}
.hmlux-card__spec-label {
	font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
	color: rgba(231, 224, 240, .5);
}
.hmlux-card__spec-val {
	font-size: 12.5px; font-weight: 700;
	color: var(--gem);
	background: color-mix(in srgb, var(--gem) 14%, transparent);
	border: 1px solid color-mix(in srgb, var(--gem) 36%, transparent);
	padding: 4px 12px; border-radius: 999px;
}

.hmlux-card__rooms { margin-bottom: 20px; }
.hmlux-card__rooms-label {
	display: block;
	font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
	color: rgba(231, 224, 240, .5);
	margin-bottom: 10px;
}
.hmlux-card__pax { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
.hmlux-card__pax-item {
	font-size: 12px; font-weight: 600;
	color: #efe9f5;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .1);
	padding: 5px 11px; border-radius: 9px;
}

/* Bullet list */
.hmlux-card__list {
	list-style: none; margin: 0 0 24px; padding: 0;
	display: grid; gap: 9px; text-align: left;
}
.hmlux-card__list li {
	position: relative; padding-left: 26px;
	font-size: 13px; line-height: 1.5;
	color: rgba(231, 224, 240, .82);
}
.hmlux-card__list li::before {
	content: '✓';
	position: absolute; left: 0; top: 0;
	color: var(--gem); font-weight: 700;
}

/* CTA kad */
.hmlux-card__cta {
	margin-top: auto;
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 13px 18px;
	border-radius: 14px;
	font-size: 14px; font-weight: 600; text-decoration: none;
	color: #fbf7ff;
	background: linear-gradient(135deg, color-mix(in srgb, var(--gem) 40%, transparent), color-mix(in srgb, var(--gem) 14%, transparent));
	border: 1px solid color-mix(in srgb, var(--gem) 50%, transparent);
	transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.hmlux-card__cta svg { transition: transform .3s ease; }
.hmlux-card__cta:hover {
	background: linear-gradient(135deg, color-mix(in srgb, var(--gem) 62%, transparent), color-mix(in srgb, var(--gem) 26%, transparent));
	box-shadow: 0 12px 26px -8px var(--gem-soft);
}
.hmlux-card__cta:hover svg { transform: translate(2px, -2px); }

/* CTA utama bawah seksyen */
.hmlux__cta { text-align: center; margin-top: 56px; }
.hmlux__cta-btn {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 16px 32px;
	border-radius: 999px;
	font-size: 15px; font-weight: 700; text-decoration: none;
	color: #2a1d0a;
	background: linear-gradient(135deg, #f0d89a, #d6a93f);
	box-shadow: 0 16px 40px -10px rgba(214, 169, 63, .55);
	transition: transform .3s ease, box-shadow .3s ease;
}
.hmlux__cta-btn svg { transition: transform .3s ease; }
.hmlux__cta-btn:hover { transform: translateY(-3px); box-shadow: 0 22px 52px -10px rgba(214, 169, 63, .7); }
.hmlux__cta-btn:hover svg { transform: translateX(3px); }

/* Responsive */
@media (max-width: 980px) {
	.hmlux { padding: 84px 0 92px; }
	.hmlux__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
	.hmlux__head { margin-bottom: 48px; }
}
@media (max-width: 600px) {
	.hmlux__grid { grid-template-columns: 1fr; gap: 18px; max-width: 420px; margin: 0 auto; }
	.hmlux-card { padding: 28px 22px; }
}

/* Hormat reduced-motion */
@media (prefers-reduced-motion: reduce) {
	.hmlux-card, .hmlux-gem, .hmlux-card__glow, .hmlux-card__cta, .hmlux__cta-btn { transition: none !important; }
	.hmlux-card:hover { transform: none; }
}

/* ============================================================
   24. SECTION GALERI — Coverflow carousel premium (berskop .hmgal)
   Bingkai putih bulat atas latar gradien lembut. Semua kelas
   berprefiks .hmgal; tidak mengubah warna/pemboleh ubah global.
   ============================================================ */
.hmgal {
	position: relative;
	padding: 80px 0 96px;
	overflow: hidden;
	background:
		radial-gradient(680px 420px at 12% 6%, rgba(201, 143, 122, .18), transparent 60%),
		radial-gradient(720px 460px at 92% 96%, rgba(200, 162, 74, .16), transparent 60%),
		linear-gradient(180deg, #efe3d6 0%, #e7d8c8 100%);
}
.hmgal__frame {
	position: relative;
	z-index: 1;
	width: min(1080px, 92vw);
	margin: 0 auto;
	padding: 48px 40px 44px;
	background: linear-gradient(180deg, #fffdfa, #fcf7f0);
	border: 1px solid rgba(255, 255, 255, .7);
	border-radius: 34px;
	box-shadow: 0 40px 90px -30px rgba(58, 36, 24, .35), 0 2px 0 rgba(255, 255, 255, .6) inset;
}

/* Kepala */
.hmgal__head { text-align: center; margin-bottom: 28px; }
.hmgal__eyebrow {
	display: inline-block;
	font-size: 11.5px; font-weight: 700; letter-spacing: .24em;
	color: var(--hm-gold, #c8a24a);
	margin-bottom: 10px;
}
.hmgal__title {
	font-family: var(--font-head, 'Playfair Display', serif);
	font-size: clamp(1.7rem, 3.4vw, 2.5rem);
	margin: 0 0 10px; color: var(--hm-brown, #3a2418);
}
.hmgal__sub {
	margin: 0 auto; max-width: 520px;
	font-size: 14.5px; line-height: 1.6;
	color: var(--hm-muted, #7b6658);
}

/* Chip kategori */
.hmgal__filters {
	display: flex; flex-wrap: wrap; gap: 9px;
	justify-content: center;
	margin-bottom: 38px;
}
.hmgal__chip {
	font-family: inherit;
	font-size: 13px; font-weight: 600;
	color: var(--hm-brown, #3a2418);
	background: transparent;
	border: 1px solid rgba(58, 36, 24, .18);
	border-radius: 999px;
	padding: 9px 18px;
	cursor: pointer;
	transition: all .25s var(--ease, ease);
	display: inline-flex; align-items: center; gap: 6px;
	text-decoration: none;
	line-height: 1;
}
.hmgal__chip:hover { border-color: var(--hm-brown, #3a2418); transform: translateY(-1px); }
.hmgal__chip.is-active {
	background: var(--hm-dark, #1f1510);
	border-color: var(--hm-dark, #1f1510);
	color: #fff;
}
.hmgal__chip--more {
	border-color: rgba(58, 36, 24, .3);
	font-weight: 700;
}
.hmgal__chip--more:hover { background: rgba(58, 36, 24, .05); }

/* Stage coverflow */
.hmgal__stage {
	position: relative;
	height: 420px;
	perspective: 1600px;
	margin-bottom: 10px;
}
.hmgal__track {
	position: relative;
	width: 100%; height: 100%;
	transform-style: preserve-3d;
}
.hmgal__slide {
	position: absolute;
	top: 50%; left: 50%;
	width: 320px; height: 400px;
	margin: -200px 0 0 -160px; /* center anchor */
	border-radius: 22px;
	overflow: hidden;
	box-shadow: 0 30px 60px -22px rgba(31, 21, 16, .55);
	opacity: 0;
	pointer-events: none;
	transform: translateX(0) scale(.6);
	transition: transform .6s cubic-bezier(.2, .7, .2, 1), opacity .6s ease, box-shadow .4s ease;
	will-change: transform, opacity;
	z-index: 0;
	cursor: zoom-in;
	background: #d9cdbf;
}
.hmgal__slide img {
	width: 100%; height: 100%;
	object-fit: cover; display: block;
}
.hmgal__slide-cap {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: 26px 18px 16px;
	font-size: 13px; font-weight: 600; color: #fff;
	background: linear-gradient(0deg, rgba(20, 13, 9, .8), transparent);
	opacity: 0; transform: translateY(8px);
	transition: opacity .4s ease, transform .4s ease;
}

/* State coverflow (ditetapkan oleh JS) */
.hmgal__slide.is-center {
	opacity: 1; pointer-events: auto; z-index: 5;
	transform: translateX(0) scale(1);
	box-shadow: 0 44px 80px -26px rgba(31, 21, 16, .6);
}
.hmgal__slide.is-center .hmgal__slide-cap { opacity: 1; transform: translateY(0); }
.hmgal__slide.is-center:hover { transform: translateX(0) scale(1.02); }

.hmgal__slide.is-left-1  { opacity: 1; z-index: 4; transform: translateX(-232px) scale(.82) rotateY(6deg); }
.hmgal__slide.is-right-1 { opacity: 1; z-index: 4; transform: translateX(232px)  scale(.82) rotateY(-6deg); }
.hmgal__slide.is-left-2  { opacity: .7; z-index: 3; transform: translateX(-410px) scale(.66) rotateY(9deg); }
.hmgal__slide.is-right-2 { opacity: .7; z-index: 3; transform: translateX(410px)  scale(.66) rotateY(-9deg); }
.hmgal__slide.is-hidden  { opacity: 0; z-index: 0; transform: translateX(0) scale(.5); }

/* Nav arrow */
.hmgal__nav { display: flex; justify-content: center; gap: 16px; margin-top: 22px; }
.hmgal__arrow {
	width: 48px; height: 48px;
	display: grid; place-items: center;
	border-radius: 50%;
	border: 1px solid rgba(58, 36, 24, .22);
	background: #fff;
	color: var(--hm-brown, #3a2418);
	cursor: pointer;
	transition: all .25s var(--ease, ease);
	box-shadow: 0 6px 16px -8px rgba(58, 36, 24, .4);
}
.hmgal__arrow:hover {
	background: var(--hm-dark, #1f1510); color: #fff;
	border-color: var(--hm-dark, #1f1510);
	transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 900px) {
	.hmgal__frame { padding: 40px 24px 36px; }
	.hmgal__stage { height: 380px; }
	.hmgal__slide { width: 280px; height: 360px; margin: -180px 0 0 -140px; }
	.hmgal__slide.is-left-1  { transform: translateX(-188px) scale(.8) rotateY(6deg); }
	.hmgal__slide.is-right-1 { transform: translateX(188px)  scale(.8) rotateY(-6deg); }
	/* Sembunyikan lapisan kedua pada tablet */
	.hmgal__slide.is-left-2, .hmgal__slide.is-right-2 { opacity: 0; pointer-events: none; transform: translateX(0) scale(.5); }
}
@media (max-width: 600px) {
	.hmgal { padding: 60px 0 72px; }
	.hmgal__stage { height: 430px; }
	.hmgal__slide { width: min(82vw, 320px); height: 400px; margin: -200px 0 0 0; left: 50%; transform: translateX(-50%) scale(.6); }
	/* Mobile: 1 fokus penuh; jiran disembunyikan (swipe) */
	.hmgal__slide.is-center { transform: translateX(-50%) scale(1); }
	.hmgal__slide.is-center:hover { transform: translateX(-50%) scale(1); }
	.hmgal__slide.is-left-1, .hmgal__slide.is-right-1,
	.hmgal__slide.is-left-2, .hmgal__slide.is-right-2 { opacity: 0; pointer-events: none; }
}

/* Hormat reduced-motion */
@media (prefers-reduced-motion: reduce) {
	.hmgal__slide, .hmgal__arrow, .hmgal__chip { transition: none !important; }
}

/* ============================================================
   25. SECTION VIDEO — Media showcase (featured player + playlist)
   Berskop .hmvid; latar gelap setempat, tidak ubah warna global.
   ============================================================ */
.hmvid {
	position: relative;
	padding: 96px 0 104px;
	overflow: hidden;
	background:
		radial-gradient(900px 520px at 80% -6%, rgba(120, 80, 170, .22), transparent 60%),
		radial-gradient(620px 420px at 6% 104%, rgba(200, 162, 74, .12), transparent 60%),
		linear-gradient(180deg, #150e1d 0%, #110b17 50%, #0c0810 100%);
	color: #efe9f5;
}
.hmvid__inner { width: min(1180px, 92vw); margin: 0 auto; }

.hmvid__head { text-align: center; max-width: 680px; margin: 0 auto 50px; }
.hmvid__eyebrow {
	display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .24em;
	color: rgba(216, 184, 120, .9); margin-bottom: 12px;
}
.hmvid__title {
	font-family: var(--font-head, 'Playfair Display', serif);
	font-size: clamp(1.8rem, 3.8vw, 2.7rem); margin: 0 0 14px; color: #fbf7ff;
}
.hmvid__sub { margin: 0; font-size: clamp(14.5px, 1.5vw, 16.5px); line-height: 1.7; color: rgba(231, 224, 240, .72); }

/* Layout */
.hmvid__layout {
	display: grid;
	grid-template-columns: 1.7fr 1fr;
	gap: 22px;
	align-items: start;
}

/* Featured player (facade) */
.hmvid__featured { min-width: 0; }
.hmvid__player {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 22px;
	overflow: hidden;
	background: #0a070e;
	border: 1px solid rgba(255, 255, 255, .08);
	box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .7);
	cursor: pointer;
}
.hmvid__poster {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .6s var(--ease, ease), opacity .4s ease;
}
.hmvid__player:hover .hmvid__poster { transform: scale(1.04); }
.hmvid__scrim {
	position: absolute; inset: 0;
	background: linear-gradient(0deg, rgba(12, 8, 16, .82) 0%, rgba(12, 8, 16, .15) 45%, rgba(12, 8, 16, .35) 100%);
}
.hmvid__play {
	position: absolute; top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 78px; height: 78px;
	display: grid; place-items: center;
	border: 0; border-radius: 50%;
	color: #1a1207;
	background: linear-gradient(135deg, #f3dca0, #d6a93f);
	box-shadow: 0 0 0 10px rgba(214, 169, 63, .18), 0 14px 34px -8px rgba(214, 169, 63, .6);
	cursor: pointer;
	transition: transform .3s var(--ease, ease), box-shadow .3s ease;
	padding-left: 4px;
}
.hmvid__play:hover { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 0 0 14px rgba(214, 169, 63, .22), 0 18px 40px -8px rgba(214, 169, 63, .7); }
.hmvid__badge {
	position: absolute; top: 16px; left: 16px;
	font-size: 10.5px; font-weight: 700; letter-spacing: .16em;
	color: #fbf7ff; background: rgba(255, 255, 255, .14);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	padding: 6px 12px; border-radius: 999px;
}
.hmvid__now { position: absolute; left: 22px; right: 22px; bottom: 20px; }
.hmvid__now-cat {
	display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	color: #f0d89a; margin-bottom: 8px;
}
.hmvid__now-title { font-family: var(--font-head, 'Playfair Display', serif); font-size: clamp(1.2rem, 2.4vw, 1.7rem); margin: 0 0 6px; color: #fff; }
.hmvid__now-desc { margin: 0; font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .8); max-width: 560px; }
/* Bila iframe dimuat, sembunyikan overlay */
.hmvid__player.is-playing .hmvid__poster,
.hmvid__player.is-playing .hmvid__scrim,
.hmvid__player.is-playing .hmvid__play,
.hmvid__player.is-playing .hmvid__now,
.hmvid__player.is-playing .hmvid__badge { opacity: 0; visibility: hidden; }
.hmvid__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 4; }

/* Playlist */
.hmvid__playlist {
	display: flex; flex-direction: column; gap: 10px;
	max-height: 0; /* JS/CSS akan padankan tinggi pada desktop */
	overflow-y: auto;
	padding-right: 4px;
}
@media (min-width: 901px) {
	.hmvid__playlist { max-height: none; height: 100%; }
}
.hmvid__item {
	display: flex; gap: 13px; align-items: center;
	text-align: left;
	padding: 10px;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, .07);
	background: rgba(255, 255, 255, .035);
	cursor: pointer;
	transition: transform .3s var(--ease, ease), background .3s ease, border-color .3s ease;
	font-family: inherit;
	color: inherit;
}
.hmvid__item:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .14); }
.hmvid__item.is-active {
	background: linear-gradient(135deg, rgba(231, 194, 119, .18), rgba(231, 194, 119, .06));
	border-color: rgba(231, 194, 119, .4);
}
.hmvid__thumb {
	position: relative; flex: 0 0 96px;
	width: 96px; height: 64px;
	border-radius: 11px; overflow: hidden;
	background: #0a070e;
}
.hmvid__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease, ease); }
.hmvid__item:hover .hmvid__thumb img { transform: scale(1.08); }
.hmvid__thumb-play {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 28px; height: 28px; display: grid; place-items: center;
	border-radius: 50%; color: #1a1207;
	background: rgba(243, 220, 160, .92);
	padding-left: 2px;
}
.hmvid__item-body { display: flex; flex-direction: column; min-width: 0; }
.hmvid__item-cat { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #d8b878; margin-bottom: 3px; }
.hmvid__item-title { font-size: 14px; font-weight: 600; color: #fbf7ff; line-height: 1.25; margin-bottom: 3px; }
.hmvid__item-desc {
	font-size: 12px; line-height: 1.4; color: rgba(231, 224, 240, .62);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Responsive */
@media (max-width: 900px) {
	.hmvid { padding: 72px 0 80px; }
	.hmvid__layout { grid-template-columns: 1fr; gap: 18px; }
	.hmvid__playlist { max-height: 420px; }
}
@media (max-width: 600px) {
	.hmvid__play { width: 64px; height: 64px; }
	.hmvid__thumb { flex-basis: 84px; width: 84px; height: 56px; }
	.hmvid__now-desc { display: none; }
}

/* Hormat reduced-motion */
@media (prefers-reduced-motion: reduce) {
	.hmvid__poster, .hmvid__play, .hmvid__item, .hmvid__thumb img { transition: none !important; }
}

/* ============================================================
   26. SECTION TESTIMONI — Jemaah Experience (berskop .hmtes)
   Dark elegan jenama + intro kiri + carousel kanan. Tidak ubah global.
   ============================================================ */
.hmtes {
	position: relative;
	padding: 96px 0 100px;
	overflow: hidden;
	background:
		radial-gradient(760px 480px at 84% 4%, rgba(120, 80, 170, .24), transparent 60%),
		radial-gradient(620px 440px at 6% 100%, rgba(200, 162, 74, .14), transparent 60%),
		linear-gradient(180deg, #1b1018 0%, #150d18 50%, #0e0810 100%);
	color: #efe7f2;
}
.hmtes__bg {
	position: absolute; inset: 0;
	background-size: cover; background-position: center;
	opacity: .10; filter: blur(6px) grayscale(.2);
	transform: scale(1.06);
	pointer-events: none; z-index: 0;
}
.hmtes__inner {
	position: relative; z-index: 1;
	width: min(1180px, 92vw); margin: 0 auto;
	display: grid; grid-template-columns: .82fr 1.18fr; gap: 50px; align-items: center;
}

/* Intro kiri */
.hmtes__intro { position: relative; }
.hmtes__quoteicon {
	display: inline-grid; place-items: center;
	width: 88px; height: 88px; border-radius: 50%;
	color: #1a1207;
	background: linear-gradient(135deg, #f3dca0, #d6a93f);
	box-shadow: 0 18px 40px -12px rgba(214, 169, 63, .6);
	margin-bottom: 22px;
}
.hmtes__eyebrow {
	display: block; font-size: 12px; font-weight: 700; letter-spacing: .24em;
	color: rgba(216, 184, 120, .9); margin-bottom: 12px;
}
.hmtes__title {
	font-family: var(--font-head, 'Playfair Display', serif);
	font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin: 0 0 16px; color: #fbf7ff; line-height: 1.12;
}
.hmtes__sub { margin: 0 0 26px; font-size: 15px; line-height: 1.7; color: rgba(231, 224, 240, .72); max-width: 420px; }
.hmtes__cta {
	display: inline-flex; align-items: center; gap: 9px;
	padding: 13px 24px; border-radius: 999px;
	font-size: 14px; font-weight: 700; text-decoration: none;
	color: #2a1d0a; background: linear-gradient(135deg, #f0d89a, #d6a93f);
	box-shadow: 0 14px 34px -12px rgba(214, 169, 63, .6);
	transition: transform .3s var(--ease, ease), box-shadow .3s ease;
}
.hmtes__cta:hover { transform: translateY(-3px); box-shadow: 0 20px 44px -12px rgba(214, 169, 63, .75); }

/* Carousel kanan */
.hmtes__carousel { position: relative; min-width: 0; }
.hmtes__viewport { overflow: hidden; }
.hmtes__track { display: flex; gap: 22px; transition: transform .6s cubic-bezier(.2, .7, .2, 1); will-change: transform; }
.hmtes__card {
	flex: 0 0 calc((100% - 44px) / 3);
	display: flex; flex-direction: column;
	padding: 26px 24px;
	border-radius: 22px;
	background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025));
	border: 1px solid rgba(255, 255, 255, .1);
	-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
	box-shadow: 0 24px 60px -28px rgba(0, 0, 0, .6);
	transition: transform .4s var(--ease, ease), box-shadow .4s ease, border-color .4s ease;
	position: relative;
}
.hmtes__card:hover {
	transform: translateY(-8px);
	border-color: rgba(231, 194, 119, .4);
	box-shadow: 0 34px 80px -28px rgba(0, 0, 0, .7), 0 0 30px -10px rgba(231, 194, 119, .4);
}
.hmtes__stars { color: #f0d89a; font-size: 15px; letter-spacing: 2px; margin-bottom: 12px; }
.hmtes__cardquote { color: rgba(231, 194, 119, .5); display: block; margin-bottom: 6px; }
.hmtes__text { margin: 0 0 20px; font-size: 14.5px; line-height: 1.65; color: rgba(245, 240, 250, .9); font-style: italic; }
.hmtes__person { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.hmtes__avatar {
	flex: 0 0 44px; width: 44px; height: 44px;
	display: grid; place-items: center; border-radius: 50%;
	font-family: var(--font-head, serif); font-weight: 700; font-size: 1.05rem;
	color: #2a1d0a; background: linear-gradient(135deg, #f3dca0, #d6a93f);
}
.hmtes__meta { display: flex; flex-direction: column; min-width: 0; }
.hmtes__name { font-size: 14.5px; color: #fbf7ff; line-height: 1.2; }
.hmtes__sub-meta { font-size: 12px; color: rgba(216, 184, 120, .85); margin-top: 2px; }

/* Controls */
.hmtes__controls { display: flex; align-items: center; justify-content: space-between; margin-top: 26px; gap: 16px; }
.hmtes__dots { display: flex; gap: 8px; flex-wrap: wrap; }
.hmtes__dot {
	width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
	background: rgba(255, 255, 255, .22); transition: all .25s ease;
}
.hmtes__dot.is-active { background: #e7c277; width: 26px; border-radius: 999px; }
.hmtes__nav { display: flex; gap: 10px; }
.hmtes__arrow {
	width: 46px; height: 46px; display: grid; place-items: center;
	border-radius: 50%; cursor: pointer;
	border: 1px solid rgba(255, 255, 255, .2);
	background: rgba(255, 255, 255, .06); color: #fbf7ff;
	transition: all .25s var(--ease, ease);
}
.hmtes__arrow:hover { background: linear-gradient(135deg, #f0d89a, #d6a93f); color: #2a1d0a; border-color: transparent; transform: translateY(-2px); }
.hmtes__arrow:disabled { opacity: .35; cursor: default; transform: none; }

/* Baris thumbnail Bukti Sebenar (dalam intro) */
.hmtes__bukti { margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .12); }
.hmtes__bukti-label {
	display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	color: rgba(216, 184, 120, .85); margin-bottom: 12px;
}
.hmtes__bukti-row { display: flex; flex-wrap: wrap; gap: 10px; }
.hmtes__bukti-thumb {
	display: block; width: 54px; height: 54px; flex: 0 0 54px;
	border-radius: 12px; overflow: hidden; cursor: zoom-in;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .14);
	box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .6);
	transition: transform .3s var(--ease, ease), border-color .3s ease, box-shadow .3s ease;
}
.hmtes__bukti-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.hmtes__bukti-thumb:hover {
	transform: translateY(-3px);
	border-color: rgba(231, 194, 119, .6);
	box-shadow: 0 12px 26px -10px rgba(231, 194, 119, .45);
}

/* Responsive */
@media (max-width: 980px) {
	.hmtes__inner { grid-template-columns: 1fr; gap: 36px; }
	.hmtes__card { flex-basis: calc((100% - 22px) / 2); }
	.hmtes__sub { max-width: none; }
}
@media (max-width: 600px) {
	.hmtes { padding: 72px 0 80px; }
	.hmtes__card { flex-basis: 100%; }
	.hmtes__controls { justify-content: center; }
	.hmtes__proof-grid { grid-template-columns: repeat(2, 1fr); }
	.hmtes__quoteicon { width: 70px; height: 70px; }
}

@media (prefers-reduced-motion: reduce) {
	.hmtes__track, .hmtes__card, .hmtes__arrow, .hmtes__cta, .hmtes__proof-item img { transition: none !important; }
	.hmtes__card:hover { transform: none; }
}

/* ============================================================
   27. SECTION FAQ — Split premium (collage Umrah + accordion)
   Berskop .hmfaq. Latar krim jenama + kad putih bulat.
   ============================================================ */
.hmfaq {
	position: relative;
	padding: 90px 0 96px;
	overflow: hidden;
	background:
		radial-gradient(640px 440px at 88% 4%, rgba(200, 162, 74, .16), transparent 60%),
		radial-gradient(560px 420px at 4% 100%, rgba(201, 143, 122, .16), transparent 60%),
		linear-gradient(180deg, var(--hm-cream), var(--hm-ivory));
}
.hmfaq__frame {
	position: relative; z-index: 1;
	width: min(1180px, 92vw); margin: 0 auto;
	display: grid; grid-template-columns: .92fr 1.08fr; gap: 44px; align-items: center;
	background: linear-gradient(180deg, #fffdfa, #fcf7f0);
	border: 1px solid rgba(255, 255, 255, .7);
	border-radius: 32px;
	box-shadow: 0 40px 90px -34px rgba(58, 36, 24, .35);
	padding: 40px;
}

/* Collage kiri */
.hmfaq__collage {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	grid-template-rows: 1fr 1fr;
	gap: 14px;
	height: 460px;
}
.hmfaq__img {
	display: block; border-radius: 20px;
	background-size: cover; background-position: center;
	box-shadow: 0 18px 40px -20px rgba(58, 36, 24, .45);
}
.hmfaq__img--tall { grid-row: 1 / span 2; }

/* FAQ kanan */
.hmfaq__main { min-width: 0; }
.hmfaq__chip {
	display: inline-block;
	font-size: 11.5px; font-weight: 700; letter-spacing: .14em;
	color: #fff; background: linear-gradient(135deg, var(--hm-gold), #b8923f);
	padding: 6px 14px; border-radius: 999px; margin-bottom: 16px;
}
.hmfaq__title {
	font-family: var(--font-head);
	font-size: clamp(1.8rem, 3.4vw, 2.5rem); line-height: 1.1;
	margin: 0 0 12px; color: var(--hm-brown);
}
.hmfaq__sub { margin: 0 0 24px; font-size: 15px; line-height: 1.7; color: var(--hm-muted); max-width: 480px; }

/* Accordion premium (scoped — guna initFaq sedia ada) */
.hmfaq__faq { display: grid; gap: 12px; }
.hmfaq .faq__item {
	background: var(--hm-white);
	border: 1px solid rgba(58, 36, 24, .1);
	border-radius: 14px;
	overflow: hidden;
	transition: border-color .3s var(--ease), box-shadow .3s ease, transform .3s ease;
}
.hmfaq .faq__item:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(58, 36, 24, .4); }
.hmfaq .faq__item.is-open { border-color: rgba(200, 162, 74, .55); box-shadow: 0 14px 34px -18px rgba(200, 162, 74, .4); }
.hmfaq .faq__q {
	width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px;
	padding: 16px 20px; cursor: pointer;
	background: transparent; border: 0; text-align: left;
	font-family: inherit; font-size: 15px; font-weight: 600; color: var(--hm-brown);
}
.hmfaq .faq__icon {
	flex: 0 0 28px; width: 28px; height: 28px;
	display: grid; place-items: center; border-radius: 50%;
	background: var(--hm-cream); color: var(--hm-gold);
	font-size: 18px; line-height: 1; font-weight: 400;
	transition: transform .3s var(--ease), background .3s ease, color .3s ease;
}
.hmfaq .faq__item.is-open .faq__icon { transform: rotate(45deg); background: var(--hm-gold); color: #fff; }
.hmfaq .faq__a { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.hmfaq .faq__a-inner { padding: 0 20px 18px; color: var(--hm-muted); font-size: 14.5px; line-height: 1.65; }

/* Responsive */
@media (max-width: 900px) {
	.hmfaq__frame { grid-template-columns: 1fr; gap: 30px; padding: 28px; }
	.hmfaq__collage { height: 300px; }
	.hmfaq__sub { max-width: none; }
}
@media (max-width: 560px) {
	.hmfaq { padding: 64px 0 72px; }
	.hmfaq__collage { height: 240px; gap: 10px; }
	.hmfaq__frame { padding: 22px; border-radius: 24px; }
}
@media (prefers-reduced-motion: reduce) {
	.hmfaq .faq__item, .hmfaq .faq__icon { transition: none !important; }
	.hmfaq .faq__item:hover { transform: none; }
}

/* ============================================================
   28. HERO — Dark luxury split (visual Umrah melengkung + highlight)
   Berskop .herox. Latar gelap jenama; tidak ubah pemboleh ubah global.
   ============================================================ */
.herox {
	position: relative;
	padding: calc(var(--header-h) + 56px) 0 76px;
	overflow: hidden;
	color: #efe7f2;
	background:
		radial-gradient(720px 520px at 96% 0%, rgba(200, 162, 74, .18), transparent 58%),
		radial-gradient(560px 460px at 0% 100%, rgba(201, 143, 122, .14), transparent 60%),
		linear-gradient(165deg, #241620 0%, #1a1018 45%, #120c14 100%);
}
/* Aurora glow beranimasi + corak halus */
.herox::before {
	content: ''; position: absolute; inset: -25%;
	z-index: 0; pointer-events: none;
	background:
		radial-gradient(420px 320px at 30% 28%, rgba(200, 162, 74, .22), transparent 60%),
		radial-gradient(460px 360px at 72% 64%, rgba(150, 90, 170, .2), transparent 62%);
	filter: blur(36px);
	animation: heroxAurora 20s ease-in-out infinite alternate;
}
.herox::after {
	content: ''; position: absolute; inset: 0;
	z-index: 0; pointer-events: none; opacity: .5;
	background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .05) 1px, transparent 0);
	background-size: 26px 26px;
	-webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
	mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
@keyframes heroxAurora {
	0%   { transform: translate(0, 0) scale(1); }
	50%  { transform: translate(3%, -2%) scale(1.06); }
	100% { transform: translate(-2%, 3%) scale(1.02); }
}

.herox__inner {
	position: relative; z-index: 1;
	width: min(1200px, 92vw); margin: 0 auto;
	display: grid; grid-template-columns: 1.02fr .98fr; gap: 50px; align-items: center;
}

/* Kandungan kiri */
.herox__content { min-width: 0; }
.herox__eyebrow {
	display: inline-flex; align-items: center; gap: 9px;
	font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
	color: rgba(216, 184, 120, .96); margin-bottom: 18px;
	padding: 8px 15px 8px 13px; border-radius: 999px;
	border: 1px solid rgba(216, 184, 120, .34);
	background: linear-gradient(135deg, rgba(216, 184, 120, .12), rgba(150, 90, 170, .08));
	backdrop-filter: blur(6px);
}
.herox__eyebrow::before {
	content: ''; width: 8px; height: 8px; border-radius: 50%;
	background: var(--hm-gold, #c8a24a);
	box-shadow: 0 0 0 0 rgba(200, 162, 74, .55);
	animation: heroxPulse 2.4s ease-in-out infinite;
}
@keyframes heroxPulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(200, 162, 74, .55); }
	50%      { box-shadow: 0 0 0 7px rgba(200, 162, 74, 0); }
}
.herox__title {
	font-family: var(--font-head);
	font-size: clamp(2.3rem, 5vw, 3.6rem); line-height: 1.04; font-weight: 700;
	margin: 0 0 18px; color: #fbf7ff; letter-spacing: -.01em;
}
.herox__title-sub {
	display: block; margin-top: 12px;
	font-size: clamp(1.05rem, 2vw, 1.5rem); font-weight: 600; line-height: 1.3;
	color: rgba(231, 224, 240, .82);
	font-family: var(--font-body, 'Inter', sans-serif);
}
.herox__desc { margin: 0 0 30px; font-size: clamp(15px, 1.6vw, 17px); line-height: 1.7; color: rgba(231, 224, 240, .72); max-width: 520px; }

.herox__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 38px; }
.herox__btn {
	display: inline-flex; align-items: center; gap: 9px;
	padding: 15px 28px; border-radius: 999px;
	font-size: 15px; font-weight: 700; text-decoration: none;
	transition: transform .3s var(--ease), box-shadow .3s ease, background .3s ease;
}
.herox__btn--gold {
	position: relative; overflow: hidden;
	color: #241620; background: linear-gradient(135deg, #f3dca0, #d6a93f);
	box-shadow: 0 16px 40px -12px rgba(214, 169, 63, .6);
}
.herox__btn--gold > * { position: relative; z-index: 1; }
.herox__btn--gold::before {
	content: ''; position: absolute; top: 0; left: -120%; z-index: 0;
	width: 70%; height: 100%;
	background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .65), transparent);
	transform: skewX(-18deg);
	transition: left .6s var(--ease);
}
.herox__btn--gold:hover::before { left: 130%; }
.herox__btn--gold:hover { transform: translateY(-3px); box-shadow: 0 22px 52px -12px rgba(214, 169, 63, .75); }
.herox__btn--ghost {
	color: #fbf7ff; background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .25);
}
.herox__btn--ghost:hover { background: rgba(255, 255, 255, .12); transform: translateY(-3px); }

/* Chip kepercayaan (bintang) */
.herox__rating {
	display: inline-flex; align-items: center; gap: 11px;
	margin: -14px 0 34px;
	padding: 9px 16px; border-radius: 999px;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .12);
	font-size: 12.5px; color: rgba(231, 224, 240, .78);
}
.herox__stars { color: #f3cf7a; letter-spacing: 2px; font-size: 14px; text-shadow: 0 0 12px rgba(243, 207, 122, .45); }

/* 3 feature highlight */
.herox__features {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
	padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .12);
}
.herox__feature { position: relative; padding-left: 16px; }
.herox__feature-dot { position: absolute; left: 0; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--hm-gold, #c8a24a); box-shadow: 0 0 0 4px rgba(200, 162, 74, .18); }
.herox__feature strong { display: block; font-size: 14.5px; color: #fbf7ff; margin-bottom: 5px; }
.herox__feature span { font-size: 12.5px; line-height: 1.5; color: rgba(231, 224, 240, .62); }

/* Visual kanan — panel melengkung + apung */
.herox__visual { position: relative; }
.herox__halo {
	position: absolute; z-index: 0; pointer-events: none;
	inset: -12% -10% -12% 2%;
	background: radial-gradient(closest-side, rgba(200, 162, 74, .42), rgba(150, 90, 170, .16) 55%, transparent 75%);
	filter: blur(34px);
	animation: heroxHalo 9s ease-in-out infinite;
}
@keyframes heroxHalo { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }
.herox__panel {
	position: relative; z-index: 1;
	aspect-ratio: 5 / 6;
	border-radius: 260px 26px 26px 260px;
	overflow: hidden;
	background: #efe9f5;
	box-shadow: 0 40px 90px -34px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .06) inset;
	animation: heroxFloat 6s ease-in-out infinite;
}
.herox__panel::after {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	border-radius: inherit;
	padding: 3px;
	background: linear-gradient(140deg, rgba(243, 220, 160, .95), rgba(214, 169, 63, .35) 40%, transparent 65%, rgba(243, 220, 160, .6));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
}
.herox__panel img { width: 100%; height: 100%; object-fit: cover; }
@keyframes heroxFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.herox__badge {
	position: absolute; z-index: 2; left: -14px; bottom: 26px;
	display: flex; align-items: center; gap: 11px;
	background: rgba(255, 251, 245, .96);
	border: 1px solid rgba(255, 255, 255, .7);
	border-radius: 14px; padding: 12px 16px;
	box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .55);
	animation: heroxFloat 6s ease-in-out infinite .5s;
}
.herox__badge-ic { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: rgba(200, 162, 74, .18); }
.herox__badge strong { display: block; font-size: 13.5px; color: var(--hm-brown, #3a2418); }
.herox__badge small { font-size: 11.5px; color: var(--hm-muted, #7b6658); }

/* Animasi masuk */
@keyframes heroxIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.herox__content > * { opacity: 0; animation: heroxIn .7s var(--ease) forwards; }
.herox__content > *:nth-child(1) { animation-delay: .05s; }
.herox__content > *:nth-child(2) { animation-delay: .14s; }
.herox__content > *:nth-child(3) { animation-delay: .23s; }
.herox__content > *:nth-child(4) { animation-delay: .32s; }
.herox__content > *:nth-child(5) { animation-delay: .41s; }
.herox__content > *:nth-child(6) { animation-delay: .50s; }
.herox__visual { opacity: 0; animation: heroxIn .85s var(--ease) .3s forwards; }

/* Responsive */
@media (max-width: 980px) {
	.herox__inner { grid-template-columns: 1fr; gap: 40px; }
	.herox__visual { order: 2; max-width: 460px; margin: 0 auto; width: 100%; }
	.herox__panel { aspect-ratio: 16 / 12; border-radius: 160px 22px 22px 160px; }
}
@media (max-width: 560px) {
	.herox { padding: calc(var(--header-h) + 36px) 0 60px; }
	.herox__features { grid-template-columns: 1fr; gap: 16px; }
	.herox__panel { aspect-ratio: 4 / 3; border-radius: 90px 18px 18px 90px; }
	.herox__badge { left: 8px; }
}
@media (prefers-reduced-motion: reduce) {
	.herox__content > *, .herox__visual { animation: none; opacity: 1; }
	.herox__panel, .herox__badge, .herox__halo, .herox__eyebrow::before { animation: none; }
	.herox::before { animation: none; }
	.herox__btn:hover { transform: none; }
	.herox__btn--gold::before { display: none; }
}

/* ============================================================
   29. Admin eUmrah — chip portal staff/admin (header nav)
   Additif sahaja: tidak ubah warna/spacing/typografi nav sedia ada.
   ============================================================ */
.nav__links li.eumrah { margin-left: 4px; }
.nav__links li.eumrah > a {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 7px 13px; border-radius: 999px; line-height: 1;
	font-size: 13px; font-weight: 600;
	color: var(--hm-gold);
	background: rgba(200, 162, 74, .10);
	border: 1px solid rgba(200, 162, 74, .42);
	transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.nav__links li.eumrah > a::before {
	content: ''; width: 16px; height: 16px; flex: 0 0 16px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23C8A24A' d='M12 2 4 5v6c0 5 3.4 8.5 8 11 4.6-2.5 8-6 8-11V5z'/%3E%3Cpath fill='none' stroke='%231F1510' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M8.4 12.2l2.4 2.4 4.6-4.9'/%3E%3C/svg%3E");
	background-size: contain; background-repeat: no-repeat; background-position: center;
}
/* Chip portal tidak guna underline animasi nav biasa. */
.nav__links li.eumrah > a::after { display: none; }
.nav__links li.eumrah > a:hover {
	color: #2a1c12;
	background: var(--hm-gold);
	border-color: var(--hm-gold);
	transform: translateY(-1px);
	box-shadow: 0 8px 20px -8px rgba(200, 162, 74, .7);
}
.nav__links li.eumrah > a:hover::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231F1510' d='M12 2 4 5v6c0 5 3.4 8.5 8 11 4.6-2.5 8-6 8-11V5z'/%3E%3Cpath fill='none' stroke='%23F3DCA0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M8.4 12.2l2.4 2.4 4.6-4.9'/%3E%3C/svg%3E");
}
/* ------------------------------------------------------------
   Kolaps menu ke hamburger lebih awal (≤1279px) supaya menu penuh
   10 item tidak melimpah pada laptop/skrin sederhana. Sama gaya
   dengan menu mobile sedia ada (≤768px) — cuma dipanjangkan julat.
   ------------------------------------------------------------ */
@media (max-width: 1279px) {
	.nav-toggle { display: flex; }
	.nav .btn--ghost { display: none; }
	.nav__actions { display: none; }
	.nav__links {
		position: fixed;
		top: var(--header-h); left: 0; right: 0;
		flex-direction: column;
		align-items: flex-start;
		flex-wrap: nowrap;
		gap: 4px;
		padding: 20px 24px;
		background: linear-gradient(180deg, #251812 0%, #1F1510 100%);
		box-shadow: 0 16px 40px rgba(15, 9, 6, .4);
		border-bottom: 1px solid rgba(200, 162, 74, .14);
		transform: translateY(-150%);
		transition: transform .35s var(--ease);
	}
	.nav__links li { width: 100%; }
	.nav__links a {
		display: block; width: 100%; padding: 12px 0;
		color: var(--hm-cream);
		border-bottom: 1px solid rgba(250, 243, 234, .1);
		white-space: normal;
	}
	.nav.is-open .nav__links { transform: translateY(0); }
	/* Chip eUmrah kekal sebagai chip dalam menu lungsur. */
	.nav__links li.eumrah { margin: 12px 0 4px; }
	.nav__links li.eumrah > a {
		display: inline-flex; width: auto; padding: 10px 16px; border-bottom: 0;
	}
}