/* ==========================================================================
   Galleon — HALAMAN HOME
   Hanya dimuat saat is_front_page().

   Konvensi file ini:
   - Satu blok bernomor per section, urut sesuai urutan tampil.
   - Media query diletakkan di dalam blok section-nya.
   - Breakpoint hanya dari daftar di base.css: 1200, 1024, 768, 480.
   - Angka yang dipakai berulang dijadikan custom property di awal blok.

   Ritme latar section (bergantian, tanpa garis pemisah):
     Hero krem → Product putih → Proses krem → Client putih →
     Testimoni krem → News putih → Contact krem → Footer gelap

   Urutan section:
     1. Hero (varian video & image)
     2. Product & Service
     3. Cara Kami Bekerja
     4. Client Logos
     5. Testimonials
     6. Latest News
     7. Contact CTA + Follow Us
   ========================================================================== */


/* ==========================================================================
   1. HERO

   Header di front page transparan & fixed (lihat layout.css blok 2),
   jadi padding atas hero menyertakan --header-h.
   ========================================================================== */

/* --- Varian video (dasar) --- */
.hero {
	--hero-overlay-top:    0.72;
	--hero-overlay-mid:    0.48;
	--hero-overlay-bottom: 0.88;

	position: relative;
	isolation: isolate;
	display: grid;
	place-items: center;
	min-height: 100svh;
	padding-block: calc(var(--header-h) + var(--sp-9)) var(--sp-9);
	background: var(--c-ink);
	color: var(--c-on-dark);
	overflow: hidden;
}

.hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.hero__video,
.hero__fallback {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgb(var(--c-ink-rgb) / var(--hero-overlay-top)) 0%,
		rgb(var(--c-ink-rgb) / var(--hero-overlay-mid)) 45%,
		rgb(var(--c-ink-rgb) / var(--hero-overlay-bottom)) 100%
	);
}

.hero__inner {
	position: relative;
	max-width: 84ch;
	margin-inline: auto;
	text-align: center;
}

.hero__spacer { height: var(--sp-7); }

.hero__eyebrow {
	margin-bottom: var(--sp-5);
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	color: var(--c-accent);
}

.hero__title {
	margin-bottom: var(--sp-5);
	font-size: var(--fs-3xl);
	font-weight: var(--fw-black);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	text-transform: uppercase;
	color: var(--c-on-dark);
	text-wrap: balance;
}

.hero__desc {
	max-width: 60ch;
	margin-inline: auto;
	margin-bottom: var(--sp-7);
	font-size: var(--fs-md);
	font-weight: var(--fw-normal);
	line-height: var(--lh-body);
	color: var(--c-on-dark-muted);
}

.hero__actions {
	display: flex;
	justify-content: center;
	gap: var(--sp-3);
	margin: 0;
}

/* Animasi masuk — hero selalu di viewport saat dimuat. */
.hero__eyebrow,
.hero__desc,
.hero__actions {
	animation: galleon-enter var(--dur-reveal) var(--ease-out) both;
}

.hero__title { animation: galleon-unmask 900ms var(--ease-out) both; }

.hero__eyebrow { animation-delay: 100ms; }
.hero__title   { animation-delay: 200ms; }
.hero__desc    { animation-delay: 420ms; }
.hero__actions { animation-delay: 540ms; }

/* Isyarat scroll */
.hero__cue {
	position: absolute;
	bottom: var(--sp-6);
	left: 50%;
	display: grid;
	place-items: center;
	width: 26px;
	height: 42px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: var(--radius-pill);
	translate: -50% 0;
	animation: galleon-enter var(--dur-reveal) var(--ease-out) 900ms both;
}

.hero__cue-line {
	width: 2px;
	height: 8px;
	border-radius: 1px;
	background: var(--c-accent);
	animation: galleon-cue 1.8s var(--ease) infinite;
}

@media (max-width: 1024px) {
	.hero { padding-block: calc(var(--header-h) + var(--sp-8)) var(--sp-9); }
}

@media (max-width: 768px) {
	.hero {
		--hero-overlay-mid: 0.58;

		min-height: 88svh;
	}

	.hero__inner { max-width: none; }
	.hero__cue { display: none; }
}

/* --- Varian image ---
   Setinggi layar. Kolom flex: teks + strip foto sebagai satu kelompok
   di tengah layar (margin-top auto di teks, margin-bottom auto di strip).

   Tinggi foto & jarak vertikal ikut mengecil di layar pendek (svh).
   Kalau layar terlalu pendek, hero boleh lebih tinggi dari layar
   (min-height) daripada teksnya terpotong. */
.hero--image {
	--slide-h:   clamp(140px, min(28vw, 27svh), 340px);
	--slide-gap: clamp(var(--sp-3), 1.6vw, 1.25rem);
	/* Ruang atas-bawah strip untuk foto di tepi yang membesar
	   (scale 1.8 + efek perspektif, lihat curve di home.js).
	   Kalau lengkungnya diubah, angka ini ikut disesuaikan. */
	--slide-pad: calc(var(--slide-h) * 0.56);

	display: flex;
	flex-direction: column;
	min-height: 100vh; /* fallback browser lama */
	min-height: 100svh;
	padding-block: calc(var(--header-h) + clamp(var(--sp-5), 5svh, var(--sp-9))) 0;
	background: var(--c-surface-alt);
	color: var(--c-text);
}

.hero--image .hero__inner {
	z-index: 1;
	margin-top: auto;
	padding-bottom: 0;
}

/* Strip ditarik ke atas sebesar --slide-pad: ruang padding itu hanya
   terpakai foto di tepi kiri-kanan yang membesar, jadi aman menumpuk
   di bawah area teks. z-index di teks menjaga tombol tetap bisa diklik. */
.hero--image .hero-slider {
	--slide-lift: clamp(var(--sp-5), 4svh, var(--sp-8)); /* jarak tombol ke foto tengah */

	margin-top: calc(var(--slide-lift) - var(--slide-pad));
	margin-bottom: auto;
}

/* Eyebrow berbentuk pil — teks kecil sendirian mudah hilang di latar
   terang. Teks pakai accent-text supaya kontras; kuning primary tetap
   muncul di titik dan bingkainya. */
.hero--image .hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	margin-bottom: var(--sp-4);
	padding: var(--sp-1) var(--sp-4);
	border: 1px solid var(--c-accent-border);
	border-radius: var(--radius-pill);
	background: var(--c-accent-soft);
	color: var(--c-accent-text);
}

.hero__eyebrow-dot {
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--c-accent);
}

/* Judul dibatasi lebar DAN tinggi layar (svh) supaya teks + strip foto
   muat satu layar — sengaja tidak memakai token --fs-3xl. */
.hero--image .hero__title {
	max-width: 22ch;
	margin-inline: auto;
	margin-bottom: var(--sp-4);
	font-size: clamp(1.75rem, min(3.4vw, 5.5svh), 3rem); /* 28–48 */
	color: var(--c-text);
}

.hero--image .hero__desc {
	max-width: 62ch;
	margin-bottom: var(--sp-5);
	font-size: var(--fs-base);
	color: var(--c-text-muted);
}

/* --- Strip foto ---
   Lengkung cekung dihitung JS di setiap frame; CSS hanya menyiapkan
   ruang supaya foto yang membesar tidak terpotong overflow hidden. */
.hero-slider {
	position: relative;
	flex: none;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	padding-block: var(--slide-pad) max(var(--slide-pad), var(--sp-5));
	overflow: hidden;
	contain: inline-size; /* ukuran bawaan tidak mengikuti lebar track */
	cursor: grab;
	/* Cegah browser mengambil alih geser mendatar sebagai navigasi. */
	touch-action: pan-y;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}

.hero-slider.is-dragging { cursor: grabbing; }

/* align-items center supaya pembesaran tumbuh merata ke atas & bawah. */
.hero-slider__track {
	display: flex;
	align-items: center;
	gap: var(--slide-gap);
	width: max-content;
	will-change: transform;
}

/* Tinggi seragam — variasi ukuran datang dari lengkungnya. */
.hero-slider__item {
	position: relative;
	flex: 0 0 auto;
	width: calc(var(--slide-h) * 0.72);
	height: var(--slide-h);
	border-radius: var(--radius-lg);
	background: var(--c-line); /* placeholder saat foto belum termuat */
	box-shadow: 0 18px 40px rgb(var(--c-ink-rgb) / 0.18);
	overflow: hidden;
	transform-origin: center center;
	will-change: transform;
	backface-visibility: hidden;
}

.hero-slider__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	user-select: none;
	-webkit-user-drag: none;
	pointer-events: none;
}

@media (max-width: 1024px) {
	.hero--image {
		--slide-h: clamp(140px, min(36vw, 24svh), 260px);

		padding-block: calc(var(--header-h) + clamp(var(--sp-4), 4svh, var(--sp-8))) 0;
	}
}

/* Di ≤768px lengkung lebih landai (home.js), jadi ruang atas-bawah
   strip bisa lebih kecil. Angka 768 harus sama dengan home.js. */
@media (max-width: 768px) {
	.hero--image {
		--slide-h:   clamp(130px, 22svh, 180px);
		--slide-pad: calc(var(--slide-h) * 0.34);
	}
}

@media (prefers-reduced-motion: reduce) {
	/* Gerak otomatis dimatikan di JS; strip tetap bisa digeser. */
	.hero-slider__track { will-change: auto; }
}


/* ==========================================================================
   2. PRODUCT & SERVICE

   Bento 4 kartu dalam grid 3 kolom: baris 1 lebar + sempit, baris 2
   sempit + lebar. Gaya kartu ditentukan posisinya (class
   .product-tile--{variant} dari product-grid.php):

     photo   foto penuh + overlay gelap, teks putih
     soft    kuning muda, foto kecil di pojok kanan atas, teks gelap
     dark    hitam hangat, foto kecil di pojok kanan atas, teks putih
     accent  kuning primary, foto di kanan memudar ke kiri, teks gelap

   Kuning primary hanya dipakai sebagai latar dengan teks gelap — teks
   putih di atasnya tidak cukup kontras.
   ========================================================================== */

.product-section {
	--tile-pad:   clamp(var(--sp-5), 2.4vw, var(--sp-6));
	--tile-min-h: clamp(240px, 22vw, 300px);
	--tile-thumb: clamp(120px, 11vw, 150px);

	background: var(--c-surface);
}

.product-bento {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sp-4);
}

/* Kartu 1 & 4 selebar dua kolom → pola lebar-sempit / sempit-lebar. */
.product-tile:nth-child(4n + 1),
.product-tile:nth-child(4n) { grid-column: span 2; }

.product-tile {
	--tile-text:       var(--c-text);
	--tile-text-muted: var(--c-text-muted);
	--tile-chip-line:  rgb(var(--c-ink-rgb) / 0.25);

	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	min-height: var(--tile-min-h);
	padding: var(--tile-pad);
	border-radius: var(--radius-xl);
	color: var(--tile-text);
	text-decoration: none;
	overflow: hidden;
	transition:
		transform var(--dur) var(--ease-out),
		box-shadow var(--dur) var(--ease-out);
}

@media (hover: hover) {
	.product-tile:hover {
		box-shadow: var(--shadow-lg);
		transform: translateY(-4px);
	}

	.product-tile:hover .product-tile__media img { transform: scale(1.05); }
}

.product-tile:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 3px;
	box-shadow: var(--shadow-lg);
}

/* --- Media (dasar) --- */
.product-tile__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease-out);
}

/* --- Isi --- */
.product-tile__body {
	position: relative;
	z-index: 1;
	max-width: 46ch;
	margin-top: auto;
}

.product-tile__title {
	margin: 0 0 var(--sp-3);
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-snug);
	color: var(--tile-text);
	text-wrap: balance;
}

.product-tile__desc {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	font-size: var(--fs-sm);
	line-height: var(--lh-body);
	color: var(--tile-text-muted);
}

.product-tile__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin-top: var(--sp-4);
}

.product-tile__chip {
	padding: var(--sp-1) var(--sp-3);
	border: 1px solid var(--tile-chip-line);
	border-radius: var(--radius-pill);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
	color: var(--tile-text);
}

/* --- 1. photo: foto penuh, overlay gelap dari bawah --- */
.product-tile--photo {
	--tile-text:       var(--c-on-dark);
	--tile-text-muted: var(--c-on-dark-muted);
	--tile-chip-line:  rgba(255, 255, 255, 0.4);

	background: var(--c-ink);
}

.product-tile--photo .product-tile__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.product-tile--photo .product-tile__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgb(var(--c-ink-rgb) / 0.05) 0%,
		rgb(var(--c-ink-rgb) / 0.35) 45%,
		rgb(var(--c-ink-rgb) / 0.85) 100%
	);
}

/* --- 2 & 3. soft / dark: foto kecil di pojok kanan atas --- */
.product-tile--soft { background: var(--c-accent-soft); }

.product-tile--dark {
	--tile-text:       var(--c-on-dark);
	--tile-text-muted: var(--c-on-dark-muted);
	--tile-chip-line:  rgba(255, 255, 255, 0.35);

	background: var(--c-ink-soft);
}

.product-tile--soft .product-tile__media,
.product-tile--dark .product-tile__media {
	align-self: flex-end;
	width: var(--tile-thumb);
	aspect-ratio: 5 / 4;
	margin-bottom: var(--sp-5);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	overflow: hidden;
}

/* --- 4. accent: kuning primary, foto di kanan memudar ke kiri ---
   Teks redup dibuat lebih gelap dari --c-text-muted supaya kontrasnya
   tetap cukup di atas kuning. */
.product-tile--accent {
	--tile-text-muted: rgb(var(--c-ink-rgb) / 0.8);

	background: var(--c-accent);
}

.product-tile--accent .product-tile__media {
	position: absolute;
	inset: 0 0 0 auto;
	z-index: -1;
	width: 58%;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
}

.product-tile--accent.has-image .product-tile__body { max-width: min(46ch, 52%); }

.product-tile--accent .product-tile__chip { background: rgba(255, 255, 255, 0.35); }

/* --- Responsive ---
   ≤1024px: kartu lebar selebar baris, dua kartu sempit berdampingan.
   ≤768px:  satu kolom; foto accent pindah ke atas teks. */
@media (max-width: 1024px) {
	.product-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
	.product-section { --tile-min-h: 220px; }

	.product-bento { grid-template-columns: 1fr; }

	.product-tile:nth-child(4n + 1),
	.product-tile:nth-child(4n) { grid-column: auto; }

	.product-tile--accent.has-image { padding-top: 0; }

	.product-tile--accent .product-tile__media {
		position: relative;
		inset: auto;
		z-index: 0;
		width: auto;
		aspect-ratio: 16 / 9;
		margin: 0 calc(var(--tile-pad) * -1) var(--sp-5);
		-webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
		mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
	}

	.product-tile--accent.has-image .product-tile__body { max-width: none; }
}


/* ==========================================================================
   3. CARA KAMI BEKERJA

   Desktop: semua langkah sejajar satu baris, jumlah kolom dari
   --step-count (diset inline di process.php). Garis putus-putus
   menghubungkan lingkaran ke lingkaran berikutnya.
   ≤1024px: timeline menurun, lingkaran di kiri, teks di kanan.
   ========================================================================== */

.process-section {
	--step-dot: 64px;
	--step-gap: var(--sp-4);

	background: var(--c-surface-alt);
}

.process-steps {
	display: grid;
	grid-template-columns: repeat(var(--step-count, 7), minmax(0, 1fr));
	gap: var(--step-gap);
}

.process-step {
	position: relative;
	text-align: center;
}

/* Garis ke langkah berikutnya — berhenti 8px sebelum lingkaran. */
.process-step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: calc(var(--step-dot) / 2);
	left: calc(50% + var(--step-dot) / 2 + 8px);
	width: calc(100% + var(--step-gap) - var(--step-dot) - 16px);
	border-top: 1px dashed var(--c-line-strong);
}

.process-step__num {
	display: grid;
	place-items: center;
	width: var(--step-dot);
	height: var(--step-dot);
	margin: 0 auto var(--sp-5);
	border: 1px solid var(--c-line);
	border-radius: 50%;
	background: var(--c-surface);
	font-family: var(--font-display);
	font-size: var(--fs-md);
	font-weight: var(--fw-bold);
	line-height: var(--lh-none);
	color: var(--c-text);
	transition:
		border-color var(--dur-fast) var(--ease),
		background-color var(--dur-fast) var(--ease);
}

@media (hover: hover) {
	.process-step:hover .process-step__num { border-color: var(--c-accent); }
}

/* Langkah terakhir = tujuan akhir proyek. */
.process-step.is-final .process-step__num {
	border-color: var(--c-accent);
	background: var(--c-accent);
	box-shadow: 0 0 0 6px var(--c-accent-soft);
	color: var(--c-ink);
}

.process-step__title {
	margin: 0 0 var(--sp-2);
	font-family: var(--font-display);
	font-size: var(--fs-base);
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
	color: var(--c-text);
}

.process-step__desc {
	margin: 0;
	font-size: var(--fs-sm);
	line-height: var(--lh-body);
	color: var(--c-text-muted);
	text-wrap: pretty;
}

@media (max-width: 1024px) {
	.process-section {
		--step-dot: 52px;
		--step-gap: var(--sp-6);
	}

	.process-steps {
		grid-template-columns: 1fr;
		max-width: 560px;
		margin-inline: auto;
	}

	.process-step {
		display: grid;
		grid-template-columns: var(--step-dot) 1fr;
		align-items: start;
		gap: var(--sp-5);
		text-align: left;
	}

	.process-step__num { margin: 0; }

	.process-step__body { padding-top: calc(var(--step-dot) / 2 - 0.75em); }

	.process-step:not(:last-child)::after {
		top: calc(var(--step-dot) + 8px);
		left: calc(var(--step-dot) / 2);
		width: 0;
		height: calc(100% + var(--step-gap) - var(--step-dot) - 16px);
		border-top: 0;
		border-left: 1px dashed var(--c-line-strong);
	}
}


/* ==========================================================================
   4. CLIENT LOGOS

   Satu baris logo bergerak ke kiri, penuh selebar layar. Logo tampil
   dengan warna aslinya; tinggi logo diturunkan dari --logo-row-h supaya
   tidak melebihi kotaknya. --logo-scale & --marquee-duration diset
   inline dari client-logos.php.
   ========================================================================== */

.client-section {
	--logo-row-h: 140px;
	--logo-max-w: 260px;
	--logo-gap:   var(--sp-5);
	--logo-fade:  10%;

	background: var(--c-surface);
	overflow: hidden;
}

.client-section .section-head { margin-bottom: var(--sp-8); }

.logo-marquee {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--logo-fade), #000 calc(100% - var(--logo-fade)), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 var(--logo-fade), #000 calc(100% - var(--logo-fade)), transparent 100%);
}

.logo-marquee__row { overflow: hidden; }

.logo-marquee__track {
	display: flex;
	align-items: center;
	gap: var(--logo-gap);
	width: max-content;
	padding-block: var(--sp-3);
	animation: logo-marquee var(--marquee-duration, 40s) linear infinite;
	will-change: transform;
}

.logo-marquee:hover .logo-marquee__track,
.logo-marquee:focus-within .logo-marquee__track { animation-play-state: paused; }

.logo-marquee__item {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	min-width: calc(var(--logo-row-h) * 1.4);
	height: var(--logo-row-h);
	padding-inline: var(--sp-5);
}

/* Warna asli dipertahankan; opacity sedikit diturunkan sebagai default
   yang tenang, lalu penuh saat hover. */
.logo-marquee__img {
	width: auto;
	height: auto;
	max-width: calc(var(--logo-max-w) * var(--logo-scale, 1));
	max-height: calc(var(--logo-row-h) * 0.72 * var(--logo-scale, 1));
	object-fit: contain;
	opacity: 0.92;
	transition:
		opacity var(--dur) var(--ease),
		transform var(--dur) var(--ease-out);
}

@media (hover: hover) {
	.logo-marquee__item:hover .logo-marquee__img {
		opacity: 1;
		transform: scale(1.05);
	}
}

@keyframes logo-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

@media (max-width: 1024px) {
	.client-section {
		--logo-row-h: 120px;
		--logo-max-w: 220px;
	}

	.logo-marquee__item { padding-inline: var(--sp-4); }
}

@media (max-width: 480px) {
	.client-section {
		--logo-row-h: 96px;
		--logo-max-w: 170px;
		--logo-gap:   var(--sp-4);
		--logo-fade:  6%;
	}

	.logo-marquee__item { padding-inline: var(--sp-3); }
}

/* Tanpa animasi: baris logo bisa digeser manual. */
@media (prefers-reduced-motion: reduce) {
	.logo-marquee__track {
		animation: none;
		will-change: auto;
	}

	.logo-marquee__row {
		overflow-x: auto;
		scrollbar-width: none;
	}

	.logo-marquee__row::-webkit-scrollbar { display: none; }
}


/* ==========================================================================
   5. TESTIMONIALS

   Semua elemen berpusat: kutipan → avatar + nama sebaris → dot navigasi
   → progress bar auto-slide. Panah prev/next absolute di kiri-kanan
   kutipan supaya tidak menambah tinggi konten saat berpindah slide.
   ========================================================================== */

.testimonial-section { background: var(--c-surface-alt); }

.testimonial-center {
	--arrow-size: 44px;

	position: relative;
	max-width: 100ch;
	margin-inline: auto;
	padding-inline: clamp(var(--sp-5), 9vw, calc(var(--sp-9) * 1.6));
	text-align: center;
}

.testimonial-center__dot-mark {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-inline-end: var(--sp-2);
	border-radius: 2px;
	background: var(--c-accent);
}

/* Tanda kutip dekoratif — ukuran & line-height khusus glyph. */
.testimonial-center__mark {
	display: block;
	margin-bottom: var(--sp-3);
	font-family: var(--font-display);
	font-size: clamp(3rem, 5vw, 4.5rem);
	font-weight: var(--fw-black);
	line-height: 0.7;
	color: var(--c-accent-border);
}

/* --- Panah --- */
.testimonial-center__arrow {
	position: absolute;
	top: clamp(2.5rem, 6vw, 3.5rem);
	left: 0;
	display: grid;
	place-items: center;
	width: var(--arrow-size);
	height: var(--arrow-size);
	padding: 0;
	border: 1px solid var(--c-line-strong);
	border-radius: 50%;
	background: var(--c-surface);
	box-shadow: var(--shadow-sm);
	color: var(--c-ink);
	transition:
		background-color var(--dur-fast) var(--ease),
		border-color var(--dur-fast) var(--ease),
		color var(--dur-fast) var(--ease),
		transform var(--dur-fast) var(--ease);
}

@media (hover: hover) {
	.testimonial-center__arrow:hover {
		border-color: var(--c-accent);
		background: var(--c-accent);
	}
}

.testimonial-center__arrow:active { transform: scale(0.94); }

.testimonial-center__arrow--next {
	right: 0;
	left: auto;
}

/* --- Slide --- */
.testimonial-center__slides {
	position: relative;
	display: grid;
}

.testimonial-center__slide {
	grid-area: 1 / 1;
	margin: 0;
	visibility: hidden;
	pointer-events: none;
}

.testimonial-center__slide.is-active {
	visibility: visible;
	pointer-events: auto;
}

.testimonial-center__slide.is-entering {
	animation: galleon-enter var(--dur-slow) var(--ease-out) both;
}

/* Ukuran kutipan dipilih PHP berdasarkan panjang teks (--md/--sm/--xs). */
.testimonial-center__quote { margin: 0 0 var(--sp-6); }

.testimonial-center__quote p {
	margin: 0;
	font-family: var(--font-quote);
	font-size: var(--fs-xl);
	font-style: italic;
	font-weight: var(--fw-medium);
	line-height: 1.5; /* serif kutipan besar: di antara snug & body */
	color: var(--c-ink);
	text-wrap: pretty;
}

.testimonial-center__quote p + p { margin-top: var(--sp-4); }

.testimonial-center__quote--md p { font-size: var(--fs-lg); }
.testimonial-center__quote--sm p { font-size: var(--fs-md); }

.testimonial-center__quote--xs p {
	font-size: var(--fs-base);
	line-height: var(--lh-body);
}

/* --- Avatar + nama sebaris --- */
.testimonial-center__author {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-3);
	margin: 0;
}

.testimonial-center__avatar {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 2px solid var(--c-surface);
	border-radius: 50%;
	background: var(--c-surface);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}

.testimonial-center__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.testimonial-center__avatar--empty {
	background: var(--c-ink);
	font-family: var(--font-display);
	font-size: var(--fs-md);
	font-weight: var(--fw-black);
	color: var(--c-accent);
}

.testimonial-center__author-text {
	display: flex;
	align-items: baseline;
	gap: var(--sp-2);
	text-align: left;
}

.testimonial-center__name {
	font-family: var(--font-display);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	color: var(--c-ink);
}

.testimonial-center__role {
	font-size: var(--fs-xs);
	color: var(--c-text-muted);
}

/* --- Dots --- */
.testimonial-center__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	margin-top: var(--sp-7);
}

.testimonial-center__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--c-line-strong);
	transition:
		width var(--dur) var(--ease-out),
		background-color var(--dur-fast) var(--ease);
}

.testimonial-center__dot.is-active {
	width: 28px;
	background: var(--c-accent);
}

/* --- Progress bar auto-slide --- */
.testimonial-center__progress {
	width: 160px;
	height: 3px;
	margin: var(--sp-5) auto 0;
	border-radius: var(--radius-pill);
	background: var(--c-line);
	overflow: hidden;
}

.testimonial-center__progress-fill {
	display: block;
	width: 0%;
	height: 100%;
	border-radius: inherit;
	background: var(--c-accent);
}

.testimonial-center__progress-fill.is-animating {
	animation: testimonial-progress var(--testimonial-duration, 6000ms) linear forwards;
}

@keyframes testimonial-progress {
	from { width: 0%; }
	to   { width: 100%; }
}

/* --- Responsive ---
   ≤1024px: panah sedikit lebih kecil.
   ≤768px:  panah disembunyikan (swipe tetap jalan lewat JS).
   ≤480px:  avatar + nama ditumpuk vertikal. */
@media (max-width: 1024px) {
	.testimonial-center { --arrow-size: 40px; }
}

@media (max-width: 768px) {
	.testimonial-center { padding-inline: 0; }

	.testimonial-center__arrow { display: none; }

	.testimonial-center__quote p { font-size: var(--fs-lg); }
	.testimonial-center__quote--md p { font-size: var(--fs-md); }

	.testimonial-center__quote--sm p,
	.testimonial-center__quote--xs p { font-size: var(--fs-sm); }

	.testimonial-center__dots { margin-top: var(--sp-6); }
}

@media (max-width: 480px) {
	.testimonial-center__author {
		flex-direction: column;
		gap: var(--sp-2);
	}

	.testimonial-center__author-text {
		flex-direction: column;
		align-items: center;
		gap: var(--sp-1);
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.testimonial-center__progress-fill.is-animating {
		width: 100%;
		animation: none;
	}
}


/* ==========================================================================
   6. LATEST NEWS
   Kartu memakai komponen .card (components.css).
   ========================================================================== */

.news-section { background: var(--c-surface); }


/* ==========================================================================
   7. CONTACT CTA + FOLLOW US
   ========================================================================== */

.contact-cta-section { background: var(--c-surface-alt); }

.contact-cta {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	align-items: center;
	gap: var(--sp-8);
	margin-bottom: var(--sp-section);
}

.contact-cta__title {
	margin-bottom: var(--sp-5);
	font-size: var(--fs-2xl);
	font-weight: var(--fw-black);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
}

.contact-cta__desc {
	max-width: 44ch;
	margin-bottom: var(--sp-7);
	font-size: var(--fs-md);
	color: var(--c-text-muted);
}

.contact-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
}

.contact-cta__media { justify-self: end; }

.contact-cta__img { width: 100%; }

/* --- Follow us --- */
.follow-band {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-6);
	padding: var(--sp-7) var(--sp-8);
	border-radius: var(--radius-lg);
	background: var(--c-accent);
}

.follow-band__title {
	margin-bottom: var(--sp-2);
	font-size: var(--fs-xl);
	font-weight: var(--fw-black);
	letter-spacing: var(--ls-tight);
	color: var(--c-ink);
}

.follow-band__desc {
	margin: 0;
	font-size: var(--fs-sm);
	color: rgb(var(--c-ink-rgb) / 0.8);
}

.follow-band__list {
	display: flex;
	flex: 0 0 auto;
	gap: var(--sp-3);
}

.follow-band__link {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--c-ink);
	color: var(--c-accent);
	text-decoration: none;
	transition:
		transform var(--dur) var(--ease-out),
		background-color var(--dur-fast) var(--ease);
}

@media (hover: hover) {
	.follow-band__link:hover {
		background: var(--c-ink-soft);
		transform: translateY(-3px);
	}
}

@media (max-width: 768px) {
	.contact-cta {
		grid-template-columns: 1fr;
		gap: var(--sp-7);
	}

	.contact-cta__media {
		order: -1;
		justify-self: stretch;
	}

	.contact-cta__desc { max-width: none; }

	.follow-band {
		flex-direction: column;
		align-items: flex-start;
		padding: var(--sp-6);
	}
}

@media (max-width: 480px) {
	.contact-cta__actions .btn { width: 100%; }
}