/* ==========================================================================
   Galleon — COMPONENTS
   Elemen yang dipakai ulang lintas halaman.
   Dimuat di semua halaman, setelah layout.css.

   Urutan:
      1. Buttons
      2. Eyebrow
      3. Section head
      4. Card & grid
      5. Kartu produk
      6. Filter bar
      7. Prose
      8. CTA band
      9. Gallery grid
     10. Form & pagination
     11. Page hero
     12. Pola latar brand
     13. Utilities
   ========================================================================== */


/* ==========================================================================
   1. BUTTONS
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	min-height: 44px;
	padding: var(--sp-3) var(--sp-6);
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	line-height: 1.2;
	letter-spacing: var(--ls-none);
	text-decoration: none;
	text-align: center;
	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),
		box-shadow var(--dur-fast) var(--ease);
}

.btn:active { transform: translateY(1px); }

.btn--primary {
	background: var(--c-accent);
	color: var(--c-ink);
}

.btn--ghost {
	background: transparent;
	border-color: var(--c-line-strong);
	color: var(--c-ink);
}

/* Ghost di atas latar gelap */
.btn--ghost-light {
	background: transparent;
	border-color: var(--c-ink-line);
	color: var(--c-on-dark);
}

@media (hover: hover) {
	.btn--primary:hover {
		background: var(--c-accent-hover);
		box-shadow: 0 4px 14px rgba(253, 189, 0, 0.35);
	}

	.btn--ghost:hover {
		background: var(--c-surface-alt);
		border-color: var(--c-ink);
	}

	.btn--ghost-light:hover {
		border-color: var(--c-accent);
		color: var(--c-accent);
	}
}

.btn--lg {
	min-height: 52px;
	padding: var(--sp-4) var(--sp-7);
	font-size: var(--fs-base);
}

.btn__icon { flex: 0 0 auto; }


/* ==========================================================================
   2. EYEBROW

   Label kecil di atas judul. Ketiga selector di bawah punya perlakuan
   identik, jadi ditulis sekali — sebelumnya aturan yang sama tersebar
   di tiga tempat dan mudah tidak sinkron.

   Warna diwarisi lewat --eyebrow-color, jadi konteks berlatar gelap
   cukup menyetel satu variabel.
   ========================================================================== */

.eyebrow,
.section-head__eyebrow,
.page-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	margin: 0 0 var(--sp-4);
	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(--eyebrow-color, var(--c-accent-text));
}

.eyebrow--center { justify-content: center; }

.eyebrow--dot::before {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: var(--c-accent);
}

/* Konteks berlatar gelap */
.section--dark { --eyebrow-color: var(--c-on-dark-muted); }
.page-hero     { --eyebrow-color: var(--c-accent); }


/* ==========================================================================
   3. SECTION HEAD
   ========================================================================== */

.section-head {
	max-width: 85ch;
	margin-bottom: var(--sp-block);
}

.section-head--center {
	margin-inline: auto;
	text-align: center;
}

.section-head--center .section-head__eyebrow { justify-content: center; }

.section-head__title {
	margin: 0 0 var(--sp-4);
	font-size: var(--fs-2xl);
	/* font-size: var(--fs-xl); */
	font-weight: var(--fw-black);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
}

.section-head__desc {
	margin: 0;
	font-size: var(--fs-base);
	font-weight: var(--fw-normal);
	line-height: var(--lh-body);
	color: var(--c-text-muted);
}

.section-actions {
	margin-top: var(--sp-block);
	text-align: center;
}


/* ==========================================================================
   4. CARD & GRID

   Kartu katalog, bukan kartu unggulan. Tugasnya dipindai cepat dalam
   grid berisi puluhan item — jadi elemennya sedikit dan sejajar antar
   kartu, bukan menarik perhatian satu per satu.

   Tidak ada tombol terlihat di tiap kartu: seluruh kartu sudah bisa
   diklik, jadi tombol di tiap kartu cuma menambah kebisingan yang
   dikalikan jumlah item. Penanda arahnya berupa panah kecil yang
   menguat saat hover.

   Tautan membungkus judul, bukan seluruh kartu. Pembaca layar jadi
   mendapat teks tautan yang bermakna.

   Gap antar kartu dibuat fluid (24px di layar sempit → 40px di layar
   lebar) dan kolom sedikit dilebarkan — grid yang lebih lega terasa
   lebih premium dibanding katalog yang padat.
   ========================================================================== */

.card-grid {
	--card-title-max:  2;
	--card-text-lines: 2;

	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: stretch;
}

.card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition:
		transform var(--dur) var(--ease-out),
		box-shadow var(--dur) var(--ease-out),
		border-color var(--dur) var(--ease-out);
}

@media (hover: hover) {
	.card:hover {
		transform: translateY(-4px);
		box-shadow: var(--shadow-md);
		border-color: var(--c-line-strong);
	}
}

/* Fokus keyboard jatuh di tautan judul, tapi yang perlu ditandai
   adalah seluruh kartunya. */
.card:focus-within {
	border-color: var(--c-accent);
	box-shadow: 0 0 0 3px var(--c-accent-soft);
}

/* --- Media --- */
.card__media {
	position: relative;
	flex: 0 0 auto;
	aspect-ratio: 4 / 3;
	background: var(--c-surface-alt);
	border-bottom: 1px solid var(--c-line);
	overflow: hidden;
}

.card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease-out);
}

@media (hover: hover) {
	.card:hover .card__img { transform: scale(1.04); }
}

/* Placeholder saat belum ada gambar */
.card__media--empty {
	display: grid;
	place-items: center;
	background: linear-gradient(135deg, #EDEAE4 0%, #F7F6F3 100%);
}

.card__media--empty::before {
	content: "";
	width: 34px;
	height: 26px;
	border: 2px solid var(--c-line-strong);
	border-radius: 4px;
	opacity: 0.7;
}

/* --- Isi --- */
.card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--sp-5);
}

/* Kategori sebagai label kecil, bukan pill. Pola yang sama dengan
   eyebrow di section lain — kotak aksen kecil lalu teks kapital. */
.card__meta {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin: 0 0 var(--sp-3);
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--c-text-muted);
}

.card__meta::before {
	content: "";
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	border-radius: 1px;
	background: var(--c-accent);
}

.card__title {
	display: -webkit-box;
	-webkit-line-clamp: var(--card-title-max);
	line-clamp: var(--card-title-max);
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0 0 var(--sp-3);
	font-family: var(--font-display);
	font-size: var(--fs-md);
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-snug);
	color: var(--c-ink);
	text-wrap: pretty;
}

.card__link {
	color: inherit;
	text-decoration: none;
}

/* Bentangkan area klik ke seluruh kartu */
.card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.card__link:focus-visible { outline: none; }

.card__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: var(--card-text-lines);
	line-clamp: var(--card-text-lines);
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0 0 var(--sp-5);
	font-size: var(--fs-sm);
	line-height: var(--lh-body);
	color: var(--c-text-muted);
}

/* --- Penanda arah (ikon saja) ---
   margin-top auto membuatnya sejajar di dasar semua kartu, apa pun
   panjang judul dan deskripsinya. Sengaja redup: ini afordansi,
   bukan ajakan. */
.card__arrow {
	display: grid;
	place-items: center;
	align-self: flex-start;
	margin-top: auto;
	width: 34px;
	height: 34px;
	border: 1px solid var(--c-line);
	border-radius: 50%;
	color: var(--c-text-muted);
	transition:
		background-color var(--dur) var(--ease),
		border-color var(--dur) var(--ease),
		color var(--dur) var(--ease),
		transform var(--dur) var(--ease-out);
}

@media (hover: hover) {
	.card:hover .card__arrow {
		background: var(--c-accent);
		border-color: var(--c-accent);
		color: var(--c-ink);
		transform: translateX(4px);
	}
}

.card:focus-within .card__arrow {
	background: var(--c-accent);
	border-color: var(--c-accent);
	color: var(--c-ink);
}

/* --- CTA berlabel (teks saja, tanpa border/kotak) ---
   Varian .card__arrow dengan teks eksplisit ("Lihat Detail"). Anchor
   sungguhan terpisah dari .card__link — perlu z-index sendiri supaya
   tidak tertutup overlay klik seluruh kartu (.card__link::after).
   Warna berubah ke --c-accent-text saat kartu di-hover/focus — warna
   yang sama dipakai untuk tautan di .prose, jadi konsisten sebagai
   "warna tautan" situs. */
.card__cta {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	align-self: flex-start;
	margin-top: auto;
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	color: var(--c-ink);
	text-decoration: none;
	transition: color var(--dur) var(--ease);
}

.card__cta svg {
	flex: 0 0 auto;
	transition: transform var(--dur) var(--ease-out);
}

@media (hover: hover) {
	.card:hover .card__cta { color: var(--c-accent-text); }
	.card:hover .card__cta svg { transform: translateX(3px); }
}

.card:focus-within .card__cta { color: var(--c-accent-text); }

/* --- Badge di atas gambar ---
   Warna primary supaya kategori langsung terbaca saat memindai grid.
   Default di kiri atas; kartu produk mengubah posisinya ke kiri bawah
   (lihat bagian 5). */
.card__tag {
	position: absolute;
	left: var(--sp-4);
	top: var(--sp-4);
	z-index: 2;
	max-width: calc(100% - var(--sp-7));
	padding: var(--sp-1) var(--sp-3);
	border-radius: var(--radius-sm);
	background: var(--c-accent);
	color: var(--c-ink);
	font-family: var(--font-display);
	font-size: 0.625rem;
	font-weight: var(--fw-black);
	line-height: 1.5;
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	box-shadow: 0 2px 6px rgba(26, 25, 23, 0.16);
}

/* --- Baris bawah kartu ---
   Dipakai kartu artikel: tanggal di kiri, tombol di kanan.
   Keduanya sejajar di dasar semua kartu. */
.card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	margin-top: auto;
	padding-top: var(--sp-4);
	border-top: 1px solid var(--c-line);
}

.card__foot .card__cta { margin-top: 0; }

.card__date {
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--c-text-muted);
	white-space: nowrap;
}

/* Kartu artikel lebih lebar dari kartu produk — judul artikel
   biasanya panjang, dan tiga baris di kolom sempit sulit dipindai. */
.card-grid--blog {
	--card-title-max: 3;

	grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
}

.card--post .card__media { aspect-ratio: 16 / 9; }


/* ==========================================================================
   5. KARTU PRODUK

   Foto tampil penuh (cover, tanpa padding), memakai rasio bawaan
   4:3 dari .card__media supaya tidak terlalu tinggi di grid.

   Kategori tampil sebagai badge yang menimpa foto di pojok kiri-
   bawah (varian posisi dari .card__tag, yang secara default ada di
   kiri-atas).

   Latar section arsip produk memakai --c-surface-alt (lihat
   archive.css), jadi badan kartu dibiarkan putih (mewarisi .card)
   supaya kartu kontras jelas dengan latar section-nya.

   CTA di bawah judul memakai .card__cta (label "Lihat Detail" saja,
   tanpa kotak/border) — lihat bagian 4.
   ========================================================================== */

.card--product {
	/* Deskripsi 1 baris cukup: kategori sudah terbaca dari badge,
	   judul + 1 baris deskripsi cukup untuk memindai grid produk. */
	--card-text-lines: 2;
}

/* Badge kategori menimpa foto di kiri-BAWAH, bukan kiri-atas seperti
   default .card__tag. */
.card--product .card__tag {
	top: auto;
	bottom: var(--sp-4);
}

.card--product .card__body {
	padding: var(--sp-6);
}

/* ==========================================================================
   5b. KARTU PROJECT (LOGO WALL)

   Hanya logo yang terlihat. Nama klien jadi overlay yang menimpa
   logo saat hover/fokus — bukan teks statis di bawah — supaya grid
   terasa bersih seperti dinding logo, bukan daftar kartu editorial.

   Dua lapis radial shading:
     - .card--project::before   glow samar di seluruh kartu, menguat
                                 saat hover — memberi kedalaman.
     - .card__media::before     glow lebih fokus di belakang logo,
                                 melebar saat hover — kesan logo
                                 "terangkat" dari latar.

   Timing sengaja berlapis (logo & shading duluan, teks menyusul
   dengan delay kecil) supaya transisi tidak terasa serentak/kaku.

   Perangkat tanpa hover (touch) diberi fallback: nama ditampilkan
   statis di bawah logo lewat (hover: none).
   ========================================================================== */

.card--project {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: linear-gradient(135deg, var(--c-surface) 0%, var(--c-surface-alt) 100%);
}

/* Shading level-kartu */
.card--project::before {
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	z-index: -1;
	width: 65%;
	aspect-ratio: 1;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 110'%3E%3Cg fill='%23FDBD00'%3E%3Cpath d='M56 10h18L38 62H20z'/%3E%3Cpath d='M64 28h18L46 80H28z'/%3E%3Cpath d='M72 46h18L54 98H36z'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 90px 90px;
	background-repeat: no-repeat;
	background-position: top right;
	opacity: 0.05;
	-webkit-mask-image: radial-gradient(circle at top right, #000 0%, transparent 70%);
	mask-image: radial-gradient(circle at top right, #000 0%, transparent 70%);
	pointer-events: none;
	transition: opacity 480ms var(--ease-out);
}

.card--project .card__link {
	position: relative;
	display: block;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.card--project .card__media {
	position: relative;
	isolation: isolate;
	aspect-ratio: 1 / 1;
	display: grid;
	place-items: center;
	padding: var(--sp-7);
	background: transparent;
}

/* Shading level-logo */
.card--project .card__media::before {
	content: "";
	position: absolute;
	inset: -15%;
	z-index: -1;
	background: radial-gradient(circle at center, var(--c-surface-alt) 0%, transparent 68%);
	opacity: 0.85;
	transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out);
}

.card--project .card__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	transition: opacity 420ms var(--ease-out), transform 480ms var(--ease-out);
}

.card--project .card__title {
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-align: center;
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	color: var(--c-ink);
}

/* --- Perangkat dengan hover --- */
@media (hover: hover) {
	.card--project:hover::before,
	.card--project:focus-within::before {
		opacity: 0.1;
	}


	.card--project:hover .card__media::before,
	.card--project:focus-within .card__media::before {
		opacity: 1;
		transform: scale(1.2);
	}

	.card--project .card__title {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: var(--sp-5);
		background: rgba(255, 255, 255, 0.94);
		opacity: 0;
		transform: translateY(8px);
		transition:
			opacity 360ms var(--ease-out) 60ms,
			transform 360ms var(--ease-out) 60ms;
	}

	.card--project:hover .card__title,
	.card--project:focus-within .card__title {
		opacity: 1;
		transform: none;
	}

	.card--project:hover .card__img,
	.card--project:focus-within .card__img {
		opacity: 0.1;
		transform: scale(1.05);
		transition:
			opacity 420ms var(--ease-out),
			transform 620ms var(--ease-out);
	}
}

/* --- Perangkat tanpa hover: nama statis di bawah logo --- */
@media (hover: none) {
	.card--project .card__title {
		padding: var(--sp-3) var(--sp-4) var(--sp-4);
		border-top: 1px solid var(--c-line);
		font-size: var(--fs-xs);
		color: var(--c-text-muted);
	}
}


/* 5 kolom di desktop, menyempit bertahap di layar lebih sempit. */
.card-grid.card-grid--project {
	grid-template-columns: repeat(5, 1fr);
	gap: clamp(1rem, 2vw, 1.5rem);
}

@media (max-width: 1100px) {
	.card-grid.card-grid--project { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 700px) {
	.card-grid.card-grid--project { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
	.card-grid.card-grid--project { grid-template-columns: 1fr; }
}

/* ==========================================================================
   6. FILTER BAR

   Dua kolom: daftar kategori di kiri, total produk di kanan, dipisah
   garis vertikal tipis di desktop.

   Daftar kategorinya (bukan seluruh bar) yang bisa digeser mendatar
   di layar sempit — total tetap terlihat penuh tanpa ikut tergeser.
   Gradasi di tepi kanan daftar memberi isyarat bahwa masih ada item
   lain di luar layar, bukan potongan tiba-tiba.
   ========================================================================== */

.filter-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	margin-bottom: var(--sp-7);
	padding-bottom: var(--sp-6);
	border-bottom: 1px solid var(--c-line);
}

.filter-bar__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2);
	min-width: 0;
}

.filter-bar__item {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	min-height: 38px;
	padding: var(--sp-2) var(--sp-4);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-pill);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	text-decoration: none;
	white-space: nowrap;
	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) {
	.filter-bar__item:hover {
		background: var(--c-surface-alt);
		border-color: var(--c-line-strong);
		transform: translateY(-1px);
	}
}

.filter-bar__item.is-active {
	background: var(--c-ink);
	border-color: var(--c-ink);
	color: var(--c-on-dark);
	box-shadow: var(--shadow-sm);
}

@media (hover: hover) {
	.filter-bar__item.is-active:hover { transform: none; }
}

/* Jumlah item per kategori — chip kecil di dalam pill, bukan angka
   polos, supaya terpisah jelas dari label tanpa terlihat seperti
   badge notifikasi. */
.filter-bar__count {
	/* display: inline-flex; */
	display: none;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	padding: 0 var(--sp-2);
	border-radius: var(--radius-pill);
	background: var(--c-surface-alt);
	font-size: 0.75rem;
	font-weight: var(--fw-bold);
	color: var(--c-text-muted);
	transition:
		background-color var(--dur-fast) var(--ease),
		color var(--dur-fast) var(--ease);
}

.filter-bar__item.is-active .filter-bar__count {
	background: rgba(255, 255, 255, 0.14);
	color: var(--c-accent);
}

/* Total produk — statis di kanan, dipisah garis vertikal dari daftar
   kategori supaya terbaca sebagai info berbeda, bukan bagian filter. */
.filter-bar__total {
	display: none;
	flex: 0 0 auto;
	margin: 0;
	padding-left: var(--sp-6);
	border-left: 1px solid var(--c-line);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	color: var(--c-text-muted);
	white-space: nowrap;
}

.filter-bar__total strong {
	font-weight: var(--fw-bold);
	color: var(--c-ink);
}

/* SESUDAH — ganti seluruh @media (max-width: 700px) untuk filter bar */
@media (max-width: 700px) {
	.filter-bar {
		flex-wrap: wrap;
		align-items: flex-start;
		gap: var(--sp-4);
	}

	.filter-bar__total {
		order: -1;
		width: 100%;
		padding-left: 0;
		border-left: none;
	}

	.filter-bar__list {
		display: flex;
		flex-wrap: wrap;
		gap: var(--sp-2);
		width: 100%;
	}

	.filter-bar__item { display: inline-flex; }
}


/* ==========================================================================
   7. PROSE
   ========================================================================== */

.prose {
	max-width: 68ch;
	font-size: var(--fs-md);
}

.prose > * + * { margin-top: var(--sp-5); }

.prose h2 {
	margin-top: var(--sp-8);
	margin-bottom: var(--sp-4);
	font-size: var(--fs-xl);
}

.prose h3 {
	margin-top: var(--sp-7);
	margin-bottom: var(--sp-3);
	font-size: var(--fs-lg);
}

.prose ul,
.prose ol { padding-inline-start: var(--sp-6); }

.prose li { margin-bottom: var(--sp-3); list-style: disc; }
.prose ol li { list-style: decimal; }

.prose img {
	margin-block: var(--sp-7);
	border-radius: var(--radius-lg);
}

.prose a {
	color: var(--c-accent-text);
	font-weight: var(--fw-semibold);
}

.prose blockquote {
	margin-block: var(--sp-7);
	padding-inline-start: var(--sp-6);
	border-inline-start: 3px solid var(--c-accent);
	font-size: var(--fs-lg);
	font-weight: var(--fw-medium);
	color: var(--c-ink);
}

.post-meta {
	margin-top: var(--sp-4);
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
}


/* ==========================================================================
   8. CTA BAND
   ========================================================================== */

.cta-band {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-6);
	margin-block: var(--sp-section);
	padding: var(--sp-8);
	background: var(--c-ink);
	border-radius: var(--radius-lg);
}

.cta-band__text {
	max-width: 36ch;
	margin: 0;
	font-size: var(--fs-xl);
	font-weight: var(--fw-black);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-tight);
	color: var(--c-on-dark);
}


/* ==========================================================================
   9. GALLERY GRID
   ========================================================================== */

.gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
	gap: var(--sp-4);
	margin-block: var(--sp-8);
}

.gallery-grid__item {
	margin: 0;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius);
	overflow: hidden;
}

.gallery-grid__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* ==========================================================================
   10. FORM & PAGINATION
   ========================================================================== */

.search-form {
	display: flex;
	gap: var(--sp-2);
	margin-bottom: var(--sp-7);
}

.search-form__input {
	flex: 1;
	min-height: 44px;
	padding: var(--sp-3) var(--sp-4);
	border: 1px solid var(--c-line-strong);
	border-radius: var(--radius-sm);
	font: inherit;
	transition: border-color var(--dur-fast) var(--ease);
}

.search-form__input:focus { border-color: var(--c-accent); }

.pagination { padding-block: var(--sp-8); }

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-2);
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: var(--sp-2) var(--sp-3);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-sm);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	text-decoration: none;
	transition:
		background-color var(--dur-fast) var(--ease),
		border-color var(--dur-fast) var(--ease);
}

@media (hover: hover) {
	.pagination .page-numbers:hover { background: var(--c-surface-alt); }
}

.pagination .page-numbers.current {
	background: var(--c-ink);
	border-color: var(--c-ink);
	color: var(--c-on-dark);
}


/* ==========================================================================
   11. PAGE HERO

   Hero halaman dalam — dipakai halaman statis dengan Page Template
   maupun halaman arsip.

   Tingginya DIKUNCI, tidak mengikuti panjang konten. Judul dan
   deskripsi punya varian --md dan --sm yang dipilih PHP berdasarkan
   jumlah karakter, jadi teks panjang mengecil alih-alih mendorong
   section jadi lebih tinggi.

   Navbar sengaja TIDAK transparan di sini. Hero halaman dalam terlalu
   pendek — navbar akan berubah jadi solid setelah scroll sedikit saja,
   dan perubahan dalam jarak sependek itu terasa berkedip.
   ========================================================================== */

.page-hero {
	--hero-h: clamp(380px, 46svh, 460px);

	position: relative;
	display: grid;
	align-content: center;
	min-height: var(--hero-h);
	padding-block: calc(var(--header-h) + var(--sp-6)) var(--sp-7);
	background: var(--c-ink);
	color: var(--c-on-dark);
	overflow: hidden;
	isolation: isolate;
}

/* Pola titik di sisi kanan — mengisi ruang yang tersisa setelah
   konten dibatasi ke kiri. */
.page-hero::after {
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 45%;
	background-image: radial-gradient(
		rgba(255, 255, 255, 0.10) 1px,
		transparent 1px
	);
	background-size: 22px 22px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 60%);
	mask-image: linear-gradient(90deg, transparent, #000 60%);
	pointer-events: none;
	z-index: -1;
}

.page-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	overflow: hidden;
}

.page-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 35%;
}

/* Gradien dari kiri: sisi teks digelapkan, sisi kanan dibiarkan
   lebih terang supaya gambar latarnya tetap terbaca. */
.page-hero--media .page-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			90deg,
			rgba(26, 25, 23, 0.92) 0%,
			rgba(26, 25, 23, 0.80) 42%,
			rgba(26, 25, 23, 0.42) 100%
		),
		linear-gradient(
			180deg,
			rgba(26, 25, 23, 0.5) 0%,
			transparent 35%
		);
}

/* Rata kiri, lebar dibatasi supaya tidak melebar ke tengah halaman */
.page-hero__inner {
	position: relative;
	max-width: 48ch;
	padding-left: var(--sp-6);
	text-align: left;
}

/* Garis aksen vertikal — membuat blok teks terasa berjangkar,
   bukan mengambang di ruang gelap. Tumbuh dari atas saat dimuat. */
.page-hero__inner::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	bottom: 4px;
	width: 3px;
	border-radius: 2px;
	background: linear-gradient(180deg, var(--c-accent), transparent);
	transform-origin: top;
	animation: galleon-line 900ms var(--ease-out) 120ms both;
}

@keyframes galleon-line {
	from { transform: scaleY(0); }
	to   { transform: scaleY(1); }
}

/* Eyebrow-nya diatur di blok 2; di sini hanya jarak bawahnya */
.page-hero__eyebrow { margin-bottom: var(--sp-3); }

/* --- Judul ---
   Ukuran dasar sengaja di bawah --fs-2xl. Hero halaman dalam tidak
   perlu sebesar hero homepage, dan judul yang lebih kecil menyisakan
   ruang untuk deskripsi tanpa menambah tinggi section. */
.page-hero__title {
	margin: 0 0 var(--sp-4);
	font-size: clamp(1.75rem, 1.6vw + 1.3rem, 2.5rem);
	font-weight: var(--fw-black);
	line-height: 1.1;
	letter-spacing: var(--ls-tight);
	text-transform: uppercase;
	color: var(--c-on-dark);
	text-wrap: balance;
}

.page-hero__title--md { font-size: clamp(1.5rem, 1.2vw + 1.2rem, 2.125rem); }
.page-hero__title--sm { font-size: clamp(1.375rem, 0.9vw + 1.15rem, 1.75rem); }

/* --- Deskripsi ---
   Dibatasi tiga baris. Bersama varian ukuran di atas, ini yang
   menjamin tinggi hero tidak pernah bertambah. */
.page-hero__desc {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	font-size: var(--fs-base);
	font-weight: var(--fw-normal);
	line-height: var(--lh-body);
	color: var(--c-on-dark-muted);
}

.page-hero__desc--md { font-size: var(--fs-base); }

.page-hero__desc--sm {
	-webkit-line-clamp: 4;
	line-clamp: 4;
	font-size: var(--fs-sm);
	line-height: 1.6;
}

/* --- Tombol --- */
.page-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	margin: var(--sp-6) 0 0;
}

.page-hero__actions .btn svg {
	flex: 0 0 auto;
	transition: transform var(--dur) var(--ease-out);
}

@media (hover: hover) {
	.page-hero__actions .btn:hover svg { transform: translateX(4px); }
}

/* --- Animasi masuk ---
   Elemen di sini selalu berada di viewport saat halaman dimuat,
   jadi memakai animasi masuk, bukan scroll reveal. */
.page-hero__eyebrow,
.page-hero__desc,
.page-hero__actions {
	animation: galleon-enter var(--dur-reveal) var(--ease-out) both;
}

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

.page-hero__eyebrow { animation-delay: 80ms; }
.page-hero__title   { animation-delay: 160ms; }
.page-hero__desc    { animation-delay: 340ms; }
.page-hero__actions { animation-delay: 460ms; }

@media (max-width: 900px) {
	.page-hero {
		--hero-h: clamp(340px, 42svh, 420px);

		padding-block: calc(var(--header-h) + var(--sp-5)) var(--sp-6);
	}

	.page-hero::after { display: none; }
	.page-hero__inner { max-width: 40ch; }
}

@media (max-width: 600px) {
	.page-hero { --hero-h: 320px; }

	.page-hero__inner {
		max-width: none;
		padding-left: var(--sp-5);
	}

	/* Di layar sempit tidak ada ruang untuk gambar terlihat di sisi
	   kanan, jadi digelapkan merata saja. */
	.page-hero--media .page-hero__bg::after {
		background: rgba(26, 25, 23, 0.86);
	}

	.page-hero__actions .btn { width: 100%; }
}


/* ==========================================================================
   12. POLA LATAR BRAND

   Pola dari bentuk logo Galleon — tiga bilah miring bertangga.
   Digambar sebagai SVG data URI, bukan file terpisah: ukurannya kecil,
   tidak menambah permintaan HTTP, dan warnanya bisa disetel per section.

   Pemakaian:
     <section class="section has-pattern">           latar terang
     <section class="section has-pattern is-dark">   latar gelap

   Variabel yang bisa disetel per section:
     --pattern-size     kerapatan pola
     --pattern-opacity  kepekatan
     --pattern-area     lebar area yang ditutupi
   ========================================================================== */

.has-pattern {
	--pattern-size:    110px;
	--pattern-opacity: 0.07;
	--pattern-area:    min(52%, 640px);

	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.has-pattern::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: var(--pattern-area);
	aspect-ratio: 1;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 110'%3E%3Cg fill='%23FDBD00'%3E%3Cpath d='M56 10h18L38 62H20z'/%3E%3Cpath d='M64 28h18L46 80H28z'/%3E%3Cpath d='M72 46h18L54 98H36z'/%3E%3C/g%3E%3C/svg%3E");
	background-size: var(--pattern-size) var(--pattern-size);
	background-repeat: repeat;
	opacity: var(--pattern-opacity);
	/* Memudar ke arah kiri bawah supaya tidak menabrak teks */
	-webkit-mask-image: radial-gradient(
		circle at top right,
		#000 0%,
		rgba(0, 0, 0, 0.4) 45%,
		transparent 75%
	);
	mask-image: radial-gradient(
		circle at top right,
		#000 0%,
		rgba(0, 0, 0, 0.4) 45%,
		transparent 75%
	);
	pointer-events: none;
	z-index: -1;
}

/* Di latar gelap, kuning terlalu menonjol meski opacity-nya rendah —
   diganti putih dengan kepekatan lebih tipis. */
.has-pattern.is-dark { --pattern-opacity: 0.05; }

.has-pattern.is-dark::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 110'%3E%3Cg fill='%23FFFFFF'%3E%3Cpath d='M56 10h18L38 62H20z'/%3E%3Cpath d='M64 28h18L46 80H28z'/%3E%3Cpath d='M72 46h18L54 98H36z'/%3E%3C/g%3E%3C/svg%3E");
}

@media (max-width: 780px) {
	/* Di layar sempit tidak ada ruang kosong untuk pola —
	   dia akan langsung menabrak teks. */
	.has-pattern::before { display: none; }
}


/* ==========================================================================
   13. UTILITIES
   ========================================================================== */

.text-accent { color: var(--c-accent-text); }

@media (max-width: 640px) {
	.cta-band {
		flex-direction: column;
		align-items: flex-start;
		padding: var(--sp-6);
	}

	.cta-band .btn { width: 100%; }
	.section-head { max-width: none; }
}

/* ==========================================================================
   14. FORM

   Menimpa markup Contact Form 7. CSS bawaan plugin sudah dimatikan
   lewat filter wpcf7_load_css di inc/enqueue.php.

   Ditaruh di components karena form dipakai di dua tempat: halaman
   Contact dan modal penawaran di halaman produk.
   ========================================================================== */

.form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-5);
}

.form-field {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	margin: 0;
}

.form-field--full { grid-column: 1 / -1; }

.form-field--hp {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    height: 0;
    overflow: hidden;
}

.form-field label {
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--c-text);
}

.form-field__req { color: var(--c-danger); }

/* Pembungkus bawaan CF7 — perlu jadi block supaya lebarnya penuh */
.form-field .wpcf7-form-control-wrap { display: block; }

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field select,
.form-field textarea {
	width: 100%;
	min-height: 48px;
	padding: var(--sp-3) var(--sp-4);
	background: var(--c-surface);
	border: 1px solid var(--c-line-strong);
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: 1.4;
	color: var(--c-text);
	transition:
		border-color var(--dur-fast) var(--ease),
		box-shadow var(--dur-fast) var(--ease);
}

.form-field textarea {
	min-height: 132px;
	line-height: var(--lh-body);
	resize: vertical;
}

/* Panah dropdown digambar sebagai data URI supaya tidak perlu
   file ikon terpisah. */
.form-field select {
	appearance: none;
	padding-right: var(--sp-8);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236B6659' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--sp-4) center;
	background-size: 18px;
	cursor: pointer;
}

.form-field :is(input, select, textarea):focus {
	outline: none;
	border-color: var(--c-accent);
	box-shadow: 0 0 0 3px var(--c-accent-soft);
}

.form-field ::placeholder {
	color: var(--c-text-muted);
	opacity: 0.65;
}

/* Field yang terisi otomatis — ditampilkan sebagai informasi,
   bukan sesuatu yang perlu diisi pengunjung. */
.form-field input[readonly] {
	background: var(--c-surface-alt);
	border-style: dashed;
	color: var(--c-text-muted);
	cursor: default;
}

.form-field input[readonly]:focus {
	border-color: var(--c-line-strong);
	box-shadow: none;
}

.form-field--submit {
	position: relative;
	flex-direction: row;
	align-items: center;
	gap: var(--sp-3);
	margin-top: var(--sp-2);
}

.form-field--submit input[type="submit"] {
	width: auto;
	min-height: 52px;
	cursor: pointer;
	transition:
		background-color var(--dur-fast) var(--ease),
		opacity var(--dur-fast) var(--ease);
}

/* --- Spinner ---
   CF7 mencetak elemen ini kosong dan selalu ada di DOM; plugin hanya
   menambahkan class .is-active saat pengiriman berjalan. Bentuknya
   digambar sepenuhnya di sini karena CSS bawaan CF7 dimatikan. */
.wpcf7-spinner {
	display: none;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0;
	border: 2px solid var(--c-line-strong);
	border-top-color: var(--c-accent);
	border-radius: 50%;
	background: none;
	animation: galleon-spin 700ms linear infinite;
}

.wpcf7-spinner.is-active,
.wpcf7 form.submitting .wpcf7-spinner {
	display: block;
}

/* Teks pendamping supaya jelas apa yang sedang terjadi — spinner
   sendirian sering terbaca sebagai dekorasi. */
.form-field--submit::after {
	content: attr(data-sending);
	display: none;
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--c-text-muted);
}

.wpcf7 form.submitting .form-field--submit::after { display: block; }

@keyframes galleon-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.wpcf7-spinner { animation-duration: 2s; }
}


/* --- Pesan validasi & status CF7 ---------------------------------------
   CF7 mencetak dua hal: .screen-reader-response berisi ringkasan error
   untuk pembaca layar, dan .wpcf7-response-output berisi pesan yang
   terlihat. Yang pertama disembunyikan secara visual — dihapus dari
   markup akan menghilangkan umpan balik untuk pengguna pembaca layar.
   ----------------------------------------------------------------------- */

.wpcf7 .screen-reader-response {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Pesan per field, di bawah input yang bermasalah */
.wpcf7-not-valid-tip {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin-top: var(--sp-2);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	color: var(--c-danger);
}

.wpcf7-not-valid-tip::before {
	content: "";
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	background: currentColor;
	-webkit-mask: var(--icon-alert) center / contain no-repeat;
	mask: var(--icon-alert) center / contain no-repeat;
}

.wpcf7-form-control.wpcf7-not-valid { border-color: var(--c-danger); }

/* --- Kotak pesan hasil pengiriman ---
   Disembunyikan saat form belum dikirim. Tanpa itu, kotak berbingkai
   kosong muncul di dasar form tanpa punya arti. */
.wpcf7 form .wpcf7-response-output { display: none; }

.wpcf7 form.sent .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	margin: var(--sp-6) 0 0;
	padding: var(--sp-4) var(--sp-5);
	border: 1px solid;
	border-left-width: 3px;
	border-radius: var(--radius-sm);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	line-height: var(--lh-body);
}

/* Ikon digambar dari mask, jadi warnanya ikut warna teks tiap state */
.wpcf7 form .wpcf7-response-output::before {
	content: "";
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	background: currentColor;
	-webkit-mask: var(--icon-alert) center / contain no-repeat;
	mask: var(--icon-alert) center / contain no-repeat;
}

.wpcf7 form.sent .wpcf7-response-output {
	background: #F1F8F4;
	border-color: var(--c-success);
	color: #135C39;
}

.wpcf7 form.sent .wpcf7-response-output::before {
	-webkit-mask-image: var(--icon-check);
	mask-image: var(--icon-check);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
	background: #FFF8E8;
	border-color: var(--c-accent);
	color: #6B4E00;
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
	background: #FDF3F2;
	border-color: var(--c-danger);
	color: #7A1E18;
}

/* Spinner CF7 berada satu baris dengan tombol submit */
.wpcf7-spinner {
	margin: 0;
	vertical-align: middle;
}

/* Field tersembunyi CF7 — nonce, versi, ID form. Wajib ada, tapi
   fieldset bawaan browser punya border sehingga terlihat sebagai
   kotak kosong. */
.wpcf7 .hidden-fields-container { display: none; }

/* ==========================================================================
   CTA PENUTUP

   Latar gelap sebagai penutup halaman, menyambung ke footer yang juga
   gelap. Pemisahnya garis aksen tipis di tepi atas — tanpa itu, dua
   blok gelap berurutan menyatu jadi satu balok panjang.
   ========================================================================== */

.archive-cta {
	position: relative;
	padding-block: var(--sp-section);
	background: var(--c-ink-raised);
	color: var(--c-on-dark-muted);
}

.archive-cta::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 3px;
	background: var(--c-accent);
}

.archive-cta__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-6);
}

.archive-cta__body { max-width: 52ch; }

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

.archive-cta__text {
	margin: 0;
	font-size: var(--fs-base);
	line-height: var(--lh-body);
	color: var(--c-on-dark-muted);
}

.archive-cta__btn { flex: 0 0 auto; }

.archive-cta__btn svg {
	flex: 0 0 auto;
	transition: transform var(--dur) var(--ease-out);
}

@media (hover: hover) {
	.archive-cta__btn:hover svg { transform: translateX(4px); }
}

@media (max-width: 700px) {
	.archive-cta__inner {
		flex-direction: column;
		align-items: stretch;
	}

	.archive-cta__body { max-width: none; }
	.archive-cta__btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.archive-cta__btn svg { transition: none; }
}

/* --- Load more --- */
.archive-more {
	display: grid;
	justify-items: center;
	gap: var(--sp-3);
	margin-top: var(--sp-8);
}

.archive-more .btn { position: relative; }

.archive-more__spinner {
	display: none;
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: galleon-spin 700ms linear infinite;
}

.archive-more.is-loading .archive-more__spinner { display: block; }
.archive-more.is-loading .archive-more__label { opacity: 0.6; }

.archive-more__status {
	margin: 0;
	font-size: var(--fs-xs);
	color: var(--c-text-muted);
}

@keyframes galleon-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.archive-more__spinner { animation-duration: 2s; }
}

.archive-section.has-pattern {
	--pattern-opacity: 0.07; /* naikkan/turunkan sesuai selera, mis. 0.1 lebih terlihat */
	--pattern-area: min(45%, 560px); /* perkecil area kalau menabrak kartu di kolom kanan */
}


/* ==========================================================================
   15. TOMBOL WHATSAPP MELAYANG

   Lingkaran hijau dengan dua gelombang radar yang memancar keluar.
   Gelombangnya diberi jeda setengah siklus, jadi terasa berdenyut
   terus alih-alih berkedip serentak.

   Label muncul di kiri saat hover. Di layar sentuh label
   disembunyikan — di sana tidak ada hover, jadi tidak akan pernah
   terlihat dan cuma memakan ruang.
   ========================================================================== */

.wa-float {
	--wa-size:  56px;
	--wa-green: #25D366;

	position: fixed;
	right: var(--sp-5);
	/* safe-area supaya tidak tertutup home indicator di iPhone */
	bottom: calc(var(--sp-5) + env(safe-area-inset-bottom, 0px));
	z-index: 90;

	display: flex;
	align-items: center;
	gap: var(--sp-3);
	text-decoration: none;
}

/* --- Label ---
   pointer-events none supaya area kosongnya tidak menghalangi klik
   saat label sedang tersembunyi. */
.wa-float__label {
	padding: var(--sp-2) var(--sp-5);
	border-radius: var(--radius-pill);
	background: var(--c-ink);
	color: var(--c-on-dark);
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	white-space: nowrap;
	box-shadow: var(--shadow-md);
	opacity: 0;
	translate: 12px 0;
	pointer-events: none;
	transition:
		opacity var(--dur) var(--ease),
		translate var(--dur) var(--ease-out);
}

@media (hover: hover) {
	.wa-float:hover .wa-float__label,
	.wa-float:focus-visible .wa-float__label {
		opacity: 1;
		translate: 0 0;
	}
}

/* --- Lingkaran ikon --- */
.wa-float__badge {
	position: relative;
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: var(--wa-size);
	height: var(--wa-size);
	border-radius: 50%;
	background: var(--wa-green);
	color: #FFFFFF;
	box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
	transition:
		transform var(--dur) var(--ease-out),
		box-shadow var(--dur) var(--ease);
}

.wa-float__icon {
	position: relative;
	z-index: 1;
}

@media (hover: hover) {
	.wa-float:hover .wa-float__badge,
	.wa-float:focus-visible .wa-float__badge {
		transform: scale(1.08);
		box-shadow: 0 10px 28px rgba(37, 211, 102, 0.52);
	}
}

.wa-float:focus-visible { outline: none; }

.wa-float:focus-visible .wa-float__badge {
	outline: 3px solid var(--c-ink);
	outline-offset: 3px;
}

/* --- Gelombang radar --- */
.wa-float__wave {
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: 50%;
	background: var(--wa-green);
	opacity: 0.5;
	animation: galleon-radar 2.8s var(--ease-out) infinite;
	pointer-events: none;
}

.wa-float__wave:nth-of-type(2) { animation-delay: 1.4s; }

@keyframes galleon-radar {
	0%   { transform: scale(1);   opacity: 0.45; }
	70%  { transform: scale(2);   opacity: 0; }
	100% { transform: scale(2);   opacity: 0; }
}

@media (max-width: 600px) {
	.wa-float {
		--wa-size: 52px;

		right: var(--sp-4);
		bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
	}

	.wa-float__label { display: none; }
}

/* Gerakan berulang tanpa henti adalah yang pertama perlu dimatikan
   untuk pengguna yang sensitif terhadap animasi. */
@media (prefers-reduced-motion: reduce) {
	.wa-float__wave { display: none; }

	.wa-float__label,
	.wa-float__badge { transition: none; }
}