/**
 * Verifikasi Sertifikat — Styling
 *
 * CSS untuk templates/page-verify-certificate.php dan modal "Cek Sertifikat"
 * di section sertifikat beranda.
 *
 * DIRANCANG UNTUK PONSEL LEBIH DULU. Halaman ini paling sering dibuka dari
 * memindai QR, artinya dari ponsel — jadi susunan satu kolom adalah rancangan
 * utamanya, bukan penyesuaian belakangan. Layar lebar baru menata ulang.
 *
 * Semua kelas berawalan .la-vc- dan tidak dipakai halaman lain.
 *
 * @package Lisanularab
 * @since 1.0.0
 */

.la-vc-wrap {
	width: 100%;
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
	box-sizing: border-box;
}

/* =====================================================
   HERO
   =====================================================
   Navbar publik melayang di atasnya, jadi padding-top besar itulah yang
   menjaga judul tidak tertutup — pola yang sama dengan hero halaman lain. */

.la-vc-hero {
	background: rgb(9, 26, 220);
	padding: 140px 0 64px;
	text-align: center;
}

.la-vc-hero__judul {
	font-size: var(--font-size-3xl);
	font-weight: 500;
	color: #fff;
	letter-spacing: -0.03em;
	line-height: var(--line-height-vercel);
	margin: 0 0 16px;
}

.la-vc-hero__sub {
	font-size: var(--font-size-md);
	font-weight: 400;
	color: rgba(255, 255, 255, 0.82);
	line-height: 1.6;
	max-width: 560px;
	margin: 0 auto 32px;
}

/* Begitu ada hasil, hero menyusut dan hasilnya yang mengisi layar.
   Pemindai QR datang membawa sertifikat tertentu — mereka tidak sedang
   mencari apa pun, jadi kolom pencarian tidak perlu menghabiskan ruang. */
.la-vc.is-ada .la-vc-hero {
	padding: 120px 0 40px;
}

.la-vc.is-ada .la-vc-hero__judul {
	font-size: var(--font-size-3xl);
	line-height: var(--line-height-vercel);
	letter-spacing: var(--letter-spacing-1);
	margin-bottom: 12px;
}

.la-vc.is-ada .la-vc-hero__sub {
	display: none;
}

/* =====================================================
   KOLOM PENCARIAN
   =====================================================
   Lebarnya dibatasi meski heronya lebar: kolom yang melebar penuh terbaca
   seperti formulir panjang, bukan alat verifikasi. */

.la-vc-cari {
	position: relative;
	max-width: 480px;
	margin: 0 auto;
	text-align: left;
}

/* Diukur dari ATAS sejauh separuh tinggi kolom ketik (52px ÷ 2), BUKAN
   top:50% dari wadahnya.
   Di modal, daftar hasil dibuat mengalir biasa (position:static) sehingga
   ia menempati ruang di dalam .la-vc-cari — wadahnya jadi jauh lebih
   tinggi begitu hasil muncul, dan ikon yang dipatok pada 50% wadah ikut
   melorot ke bawah kolom ketik. Dengan jarak tetap dari atas, ikonnya
   selalu berada di tengah kolom ketik berapa pun tinggi wadahnya. */
.la-vc-cari__ikon {
	position: absolute;
	top: 26px;
	left: 18px;
	transform: translateY(-50%);
	display: flex;
	color: var(--color-text-secondary);
	pointer-events: none;
}

.la-vc-cari__input {
	width: 100%;
	min-height: 52px;
	padding: 4px 18px 4px 48px;
	border: 1px solid transparent;
	border-radius: 10px;
	background: #fff;
	font-family: var(--font-regular);
	font-size: var(--font-size-md);
	color: var(--color-text-1);
	box-sizing: border-box;
	transition: box-shadow 0.15s ease;
}

.la-vc-cari__input::placeholder {
	color: var(--color-text-secondary);
	font-size: 14px;
}

.la-vc-cari__input:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
}

/* --- Daftar hasil --- */

.la-vc-cari__hasil {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 20;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 10px;
	box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.18);
	max-height: 340px;
	overflow-y: auto;
	padding: 6px;
	text-align: left;
}

.la-vc-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px;
	border-radius: 8px;
	text-decoration: none;
	color: var(--color-text-1);
	transition: background-color 0.15s ease;
}

.la-vc-item:hover {
	background: var(--color-bg-secondary);
}

.la-vc-item__foto {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
}

.la-vc-item__isi {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.la-vc-item__nama {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: 14px;
	font-weight: 500;
	color: var(--color-text-1);
}

.la-vc-item__ar {
	font-family: 'Amiri', 'Scheherazade New', serif;
	font-size: 14px;
	color: var(--color-text-2);
}

.la-vc-item__kelas,
.la-vc-item__meta {
	font-size: 12px;
	color: var(--color-text-secondary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.la-vc-kosong {
	padding: 20px;
	text-align: center;
	font-size: 14px;
	color: var(--color-text-secondary);
}

/* Sorotan kata kunci — warna yang sama dengan pencarian panduan, supaya
   dua pencarian di situs ini terasa satu keluarga. */
.la-vc-sorot {
	background: #cef431;
	border-radius: 3px;
	padding: 0 2px;
	color: var(--color-text-1);
}

/* =====================================================
   HASIL VERIFIKASI
   ===================================================== */

.la-vc-hasil {
	padding: 48px 0 80px;
	background: #fff;
}

/* --- Putusan --- */

.la-vc-putusan {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 40px;
}

/* Lencana centang biru sudah berbentuk bulat dan berwarna sendiri, jadi
   tidak diberi lingkaran latar — itu hanya akan jadi cincin di sekelilingnya. */
.la-vc-putusan__ikon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}

/* Keadaan gagal masih memakai ikon garis biasa, jadi lingkaran latarnya
   tetap diperlukan. */
.la-vc-putusan--gagal .la-vc-putusan__ikon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: #fdecec;
	color: #c0392b;
}

.la-vc-putusan__judul {
	font-size: var(--font-size-32);
	font-weight: 600;
	color: var(--color-text-1);
	letter-spacing: var(--letter-spacing-1);
	line-height: 1.25;
	margin: 0 0 10px;
}

.la-vc-putusan__fakta {
	font-size: var(--font-size-md);
	color: var(--color-text-2);
	line-height: 1.6;
	margin: 0;
}

.la-vc-putusan__fakta strong {
	color: var(--color-text-1);
	font-weight: 600;
}

/* --- Unduh (hanya tampil untuk pemilik sertifikat) --- */

/* Sebaris di desktop: dropdown lalu tautan, keduanya di tengah.

   nowrap, BUKAN wrap. Komponen .la-aff-custom-select bawaannya width:100%
   (courses.css baris 71); dengan wrap ia memakan seluruh lebar baris dan
   mendorong tautan turun. Penurunan ke bawah hanya terjadi di layar sempit,
   lewat media query di bawah. */
.la-vc-unduh {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 20px;
}

/* Lebar mengikuti isinya; komponen dropdown bawaannya width:100%, jadi
   perlu dilepas di sini — sama seperti .la-cert-actions__unduh. */
.la-vc-unduh__pilih {
	/* width:auto menimpa width:100% milik komponen; !important tidak
	   diperlukan karena selektor ini ditulis di berkas yang dimuat setelah
	   courses.css. */
	width: auto;
	min-width: 190px;
	flex-shrink: 0;
}

/* UKURAN KOTAK disalin dari .la-cert-actions .la-aff-custom-select__trigger
   di certificate-ui.css supaya tombol di kedua halaman identik.

   height, BUKAN max-height: max-height hanya memotong dari atas sehingga
   teksnya terlihat turun. inline-flex + align-items:center diperlukan karena
   <button> menata teksnya pada garis dasar. justify-content:space-between —
   label di kiri, chevron menempel di kanan. */
.la-vc-unduh .la-aff-custom-select__trigger {
	box-sizing: border-box;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 18px;
	border-width: 1px;
	border-style: solid;
	border-radius: var(--radius-md);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
	cursor: pointer;
}

/* Butir menu unduh: ikon lalu teks, berdampingan.

   Komponen dasarnya memakai justify-content:space-between (courses.css
   baris 146) — masuk akal di sana, tempat ia dipakai filter dengan label
   di kiri dan tanda centang di kanan. Di sini isinya ikon + teks yang
   harus dibaca sebagai satu kesatuan, dan space-between justru melempar
   teksnya ke pojok kanan menjauh dari ikonnya (terlihat 31 Agu 2026).

   flex-start + gap menempatkan keduanya berdampingan dengan jarak tetap,
   berapa pun lebar menunya. */
.la-vc-unduh .la-aff-custom-select__option {
	justify-content: flex-start;
	gap: 10px;
}

/* Ikon tidak ikut menyusut saat teksnya panjang, dan tidak menambah tinggi
   baris — svg bawaannya inline sehingga ikut garis dasar teks. */
.la-vc-unduh .la-aff-custom-select__option svg {
	flex-shrink: 0;
	display: block;
}

/* Tanda centang bawaan komponen dimatikan. Ia menandai "pilihan yang
   sedang aktif" — tepat untuk filter, keliru untuk menu tindakan seperti
   ini: mengunduh JPG tidak membuat JPG jadi pilihan tersimpan. Dengan
   perataan flex-start di atas, centang itu juga akan menempel di sisi
   teks alih-alih di kanan, jadi tampilannya justru mengganggu. */
.la-vc-unduh .la-aff-custom-select__option.is-selected::after {
	content: none;
}

/* Tautan sekunder — garis putus-putus, membedakannya dari tautan biasa. */
.la-vc-unduh__tautan {
	font-size: 13px;
	color: var(--color-text-2);
	text-decoration: underline;
	text-decoration-style: dashed;
	text-underline-offset: 3px;
}

.la-vc-unduh__tautan:hover,
.la-vc-unduh__tautan:focus {
	color: var(--color-text-1);
}

@media (max-width: 480px) {
	/* Menurun di layar sempit, tapi dropdown TIDAK melebar penuh — lebarnya
	   tetap mengikuti isinya, dan justify-content:center pada .la-vc-unduh
	   yang menengahkannya. Versi sebelumnya memasang width:100% di sini
	   (30 Agu 2026); tombol selebar layar terbaca sebagai aksi utama halaman,
	   padahal halaman ini untuk memverifikasi, bukan mengunduh. */
	.la-vc-unduh {
		flex-direction: column;
		flex-wrap: wrap;
		gap: 12px;
	}
}

/* --- Bukti & data --- */

.la-vc-isi {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
}

.la-vc-bukti__tautan {
	display: block;
	border: 1px solid var(--color-border);
	background: var(--color-bg-secondary);
}

.la-vc-bukti__img {
	display: block;
	width: 100%;
	height: auto;
}

.la-vc-bukti__kosong {
	padding: 32px 24px;
	border: 1px dashed var(--color-border);
	border-radius: 12px;
	background: var(--color-bg-secondary);
	text-align: center;
}

.la-vc-bukti__kosong p {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--color-text-secondary);
}

.la-vc-data {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Kartu pemilik berlatar biru muda; kartu program tetap putih supaya
   keduanya terbaca sebagai dua hal berbeda. */
/* .la-vc-data .la-vc-kartu {
	background: #f4f9ff;
} */

.la-vc-kartu {
	padding: 20px;
	border: 1px solid var(--color-border);
	border-radius: 12px;
	background: #fff;
}

.la-vc-kartu__judul {
	font-size: var(--font-size-sm);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-text-secondary);
	margin-bottom: 16px;
}

/* --- Orang (peserta / pemateri) --- */

.la-vc-orang {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--color-border);
}

/* Di kartu pemilik, nama dan daftar rinciannya satu kesatuan — garis di
   antaranya justru memecah sesuatu yang tidak perlu dipisah. Kartu program
   tetap bergaris karena di sana pemateri memang beda dari data programnya. */
.la-vc-data .la-vc-orang {
	padding-bottom: 0;
	border-bottom: 0;
}

.la-vc-orang__foto {
	flex-shrink: 0;
	width: 72px;
	height: 72px;
	border-radius: 6px;
	object-fit: cover;
}

.la-vc-orang__foto--kecil {
	width: 72px;
	height: 72px;
	background: #dbebf5;
}

@media (max-width: 700px) {
	.la-vc-orang__foto, .la-vc-orang__foto--kecil {
		width: 100px;
		height: 100px;
	}

}

/* Dipakai saat kelas belum mengisi foto pemateri. Ukuran dan lengkungnya
   sama persis dengan fotonya, jadi susunan barisnya tidak bergeser. */
.la-vc-orang__inisial {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--color-bg-secondary);
	color: var(--color-text-secondary);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	user-select: none;
}

.la-vc-orang__nama {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.la-vc-orang__peran {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-text-secondary);
}

.la-vc-orang__id {
	font-size: var(--font-size-md);
	font-weight: 600;
	color: var(--color-text-1);
	line-height: 1.35;
}

/* Nama Arab — Amiri, font yang sama dengan yang dipakai di sertifikat,
   supaya nama di layar dan di kertas terbaca serupa. */
/* Keterangan singkat pemateri, mengikuti .la-course-hero__instructor-desc
   di halaman detail kelas. */
.la-vc-orang__ket {
	font-size: var(--font-size-eyebrow);
	line-height: 1.45;
	color: var(--color-text-secondary);
	margin-top: -5px;
}

.la-vc-orang__ar {
	font-family: 'Amiri', 'Scheherazade New', serif;
	font-size: 1.125rem;
	color: var(--color-text-2);
	line-height: 1.5;
}

/* --- Daftar rincian --- */

/* Label di ATAS, isinya di bawah — bukan berjajar kiri-kanan.
   Nomor sertifikat dan judul kelas sama-sama panjang; disandingkan dalam
   satu baris keduanya saling menyempitkan dan terpaksa terpotong. */
.la-vc-rinci {
	margin: 0;
}

.la-vc-rinci__baris {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 10px 0;
}

/* .la-vc-rinci__baris + .la-vc-rinci__baris {
	border-top: 1px solid rgba(0, 0, 0, 0.05);
} */

.la-vc-rinci dt {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--color-text-secondary);
}

.la-vc-rinci dd {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	color: var(--color-text-1);
	line-height: 1.45;
}

/* Nomor sertifikat pakai angka lebar-sama supaya deretannya rapi dibaca. */
.la-vc-rinci__nomor {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
}

/* =====================================================
   PONSEL — BLOK ORANG MENUMPUK & RATA TENGAH
   =====================================================
   Di layar sempit foto dan teks tidak lagi berdampingan. Berdampingan
   memaksa nama panjang membungkus ke kolom sisa yang tinggal ±60% lebar
   layar, dan nama Arab yang rata kanan jadi terlihat seperti tersesat di
   tengah kartu. Ditumpuk dan ditengahkan, keduanya punya lebar penuh.

   Judul kartunya ikut ditengahkan supaya seluruh kartu terbaca sebagai
   satu blok yang rapi, bukan judul rata kiri di atas isi rata tengah. */

@media (max-width: 700px) {
	.la-vc-kartu__judul {
		text-align: center;
	}

	.la-vc-orang {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 10px;
	}

	.la-vc-orang__nama {
		align-items: center;
	}

	/* Nama Arab tetap dibaca kanan-ke-kiri, tapi kotaknya ditengahkan —
	   dir="rtl" mengatur arah bacanya, text-align mengatur letaknya. */
	.la-vc-orang__ar {
		text-align: center;
	}

	.la-vc-orang__ket {
		text-align: center;
	}

	.la-vc-orang__ket {
		margin-top: 0px;
	}
}

/* --- Kartu Rincian Program ---
   Kolom penuh di bawah gambar dan kartu pemilik. */

.la-vc-kartu--program {
	margin-top: 24px;
}

/* Keempat datanya berjajar satu baris di layar lebar. Di ponsel tetap
   bertumpuk seperti daftar biasa. */
@media (min-width: 700px) {
	.la-vc-rinci--baris {
		display: grid;
		grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr));
		gap: 24px;
	}

	/* Garis pemisah antar kolom menggantikan garis antar baris — arah
	   pemisahnya ikut berubah begitu susunannya mendatar. */
	.la-vc-rinci--baris .la-vc-rinci__baris + .la-vc-rinci__baris {
		border-top: 0;
		border-left: 1px solid rgba(0, 0, 0, 0.05);
		padding-left: 24px;
	}
}

/* Judul kelas bisa sangat panjang; dibatasi lebarnya lalu dibiarkan
   membungkus ke baris berikutnya alih-alih memaksa kolom lain menyempit. */
.la-vc-rinci__baris--kelas dd {
	max-width: 320px;
}

/* --- Penerbit --- */

.la-vc-penerbit {
	margin-top: 40px;
	padding-top: 32px;
	text-align: center;
}

.la-vc-penerbit__judul {
	font-size: var(--font-size-eyebrow);
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-text-vercel);
	margin-bottom: 16px;
}

.la-vc-penerbit__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	flex-wrap: nowrap;
}

/* Tinggi dipatok, lebar mengikuti — dua logo dengan rasio berbeda tetap
   terbaca sepadan. Di ponsel keduanya wajib muat satu baris, jadi
   ukurannya diperkecil, bukan dibungkus ke baris berikutnya. */
.la-vc-penerbit__img {
	display: block;
	width: auto;
	object-fit: contain;
}

.la-vc-penerbit__img--la {
	height: 56px;
}

.la-vc-penerbit__img--pt {
	height: 76px;
}

@media (max-width: 600px) {
	.la-vc-penerbit__logo {
		gap: 16px;
	}

	.la-vc-penerbit__img--la {
		height: 48px;
	}

	.la-vc-penerbit__img--pt {
		height: 67px;
	}
}

/* --- Catatan keaslian --- */

.la-vc-catatan {
	max-width: 720px;
	margin: 40px auto 0;
	font-size: 13px;
	line-height: 1.7;
	color: var(--color-text-secondary);
	text-align: center;
}

.la-vc-catatan a {
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* =====================================================
   LAYAR LEBAR
   =====================================================
   Gambar sertifikat berdampingan dengan kartu data. Menaruh gambar DI ANTARA
   dua kartu akan memutus alur bacanya, dan lebar layar jadi terbuang. */

@media (min-width: 900px) {
	/* align-items:stretch (bawaan grid) — BUKAN start. Dengan start, kartu
	   pemilik hanya setinggi isinya dan terlihat menggantung di samping
	   gambar sertifikat yang lebih tinggi. Dibiarkan meregang, keduanya
	   berakhir di garis yang sama. */
	.la-vc-isi {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		gap: 32px;
	}

	/* Kartu ikut meregang setinggi barisnya, lalu isinya disusun vertikal
	   supaya daftar rincian mengisi ruang yang tersisa alih-alih
	   menumpuk di atas dan menyisakan ruang kosong di bawah. */
	.la-vc-data .la-vc-kartu {
		display: flex;
		flex-direction: column;
		height: 100%;
		box-sizing: border-box;
	}

	.la-vc-data .la-vc-rinci {
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		flex: 1 1 auto;
	}

	.la-vc-hero {
		padding: 150px 0 72px;
	}
}

/* =====================================================
   MODAL "CEK SERTIFIKAT" (beranda)
   ===================================================== */

.la-vc-modal {
	position: fixed;
	inset: 0;
	z-index: 1200;
	display: none;
	align-items: flex-start;
	justify-content: center;
	padding: 80px 20px 20px;
	background: rgba(0, 0, 0, 0.5);
	overflow-y: auto;
}

.la-vc-modal.is-buka {
	display: flex;
}

.la-vc-modal__kotak {
	width: 100%;
	max-width: 560px;
	/* Tidak ikut menyusut saat daftar hasil memanjang — tanpa ini kotaknya
	   tergencet oleh lapisan yang bisa digulir di atasnya. */
	flex-shrink: 0;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.3);
	overflow: hidden;
}

.la-vc-modal__kepala {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 20px 0;
}

.la-vc-modal__judul {
	font-size: var(--font-size-20);
	font-weight: 600;
	color: var(--color-text-1);
	margin: 0 0 4px;
}

.la-vc-modal__sub {
	font-size: var(--font-size-eyebrow);
	color: var(--color-text-secondary);
	line-height: 1.3;
	margin: 0;
}

.la-vc-modal__tutup {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 8px;
	background: var(--color-bg-secondary);
	color: var(--color-text-2);
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.la-vc-modal__tutup:hover {
	background: var(--color-border);
}

.la-vc-modal__badan {
	padding: 16px 20px 20px;
}

/* Di dalam modal, daftar hasil mengalir biasa — bukan melayang seperti di
   hero, karena modalnya sendiri sudah jadi wadahnya. */
.la-vc-modal .la-vc-cari {
	max-width: none;
}

.la-vc-modal .la-vc-cari__input {
	border-color: var(--color-border);
}

.la-vc-modal .la-vc-cari__input:focus {
	border-color: var(--color-primary);
	box-shadow: none;
}

.la-vc-modal .la-vc-cari__hasil {
	position: static;
	margin-top: 10px;
	border: 0;
	box-shadow: none;
	padding: 0;
	max-height: 320px;
}

@media (max-width: 600px) {
	.la-vc-modal {
		padding: 60px 12px 12px;
	}
}

/* =====================================================
   TOMBOL PEMICU DI SECTION SERTIFIKAT BERANDA
   =====================================================
   Namanya .la-vc-pemicu, BUKAN .la-home-certs__cek — meski letaknya di
   beranda. Berkas ini dimuat di dua halaman, jadi satu-satunya cara
   memastikan aturannya tidak bocor ke mana-mana adalah menjaga SELURUH
   isinya berawalan .la-vc- tanpa kecuali. Nama berawalan .la-home- akan
   membuat berkas ini ikut mengatur milik beranda, dan itu persis yang
   ingin dihindari. */

/* Bentuknya disamakan PERSIS dengan .la-home-btn--primary di css/home.css —
   tinggi 48px, padding 8px 18px, line-height 24px, letter-spacing -0.28px,
   latar #111. Tombol ini duduk di section yang sama dengan tombol hitam
   beranda lainnya, jadi ukuran yang sedikit berbeda akan langsung terlihat
   sebagai kesalahan. Disalin, bukan memakai kelasnya, agar berkas ini tetap
   berdiri sendiri sesuai permintaan. */
.la-vc-pemicu {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 20px;
	min-height: 48px;
	padding: 8px 18px;
	border: 1px solid transparent;
	border-radius: 50px;
	background: #111;
	font-family: var(--font-regular);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.28px;
	line-height: 24px;
	color: #fff;
	cursor: pointer;
	text-decoration: none;
	box-sizing: border-box;
	transition: all 0.2s cubic-bezier(0, 0, 0.58, 1);
}

.la-vc-pemicu:hover {
	color: #fff;
	opacity: 0.82;
	transform: translateY(-1px);
}