/**
 * fmipa-prospek — styling khusus form. Reuse token/class tema (--fmipa-green,
 * --fmipa-red, .fmipa-btn, .fmipa-section, .fmipa-container) — TIDAK
 * meredefinisikannya di sini.
 */

.fmipa-prospek-form {
	max-width: 42rem;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

.fmipa-prospek-form__title {
	margin-bottom: 0.25rem;
}

.fmipa-prospek-field {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	margin: 0;
}

.fmipa-prospek-field label {
	font-weight: 600;
}

.fmipa-prospek-field input[type='text'],
.fmipa-prospek-field input[type='email'],
.fmipa-prospek-field textarea {
	padding: 0.6rem 0.75rem;
	/* gray-500, bukan gray-300. Token --fmipa-gray-300 TIDAK PERNAH ADA di
	   tema (palet abu-abunya cuma 50/200/500/600), jadi baris ini selama ini
	   jatuh ke nilai cadangan #ccc — dan #ccc di atas putih cuma 1,61:1,
	   sementara batas kolom isian termasuk komponen UI yang WCAG 1.4.11
	   minta 3:1. Praktisnya: kotak isiannya nyaris tak terlihat. Terbaca
	   paling jelas sejak formulir CTA pindah ke kartu putih, karena di sana
	   garis itulah satu-satunya yang menandai "ini bisa diketik".
	   --fmipa-gray-500 #6B7280 di atas putih = 4,83:1. */
	border: 1px solid var(--fmipa-gray-500, #6B7280);
	border-radius: var(--fmipa-radius, 0.5rem);
	font: inherit;
}

.fmipa-prospek-field--submit {
	margin-top: 0.4rem;
}

/* Mode ringkas — "Hubungi Kami" (pola Connect With Us), field sejajar
   horizontal di desktop supaya terasa ringan dibanding form penuh. */
.fmipa-prospek-form--ringkas {
	max-width: 34rem;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.75rem;
}
.fmipa-prospek-form--ringkas .fmipa-prospek-form__title,
.fmipa-prospek-form--ringkas .fmipa-prospek-form__message {
	flex-basis: 100%;
}
.fmipa-prospek-form--ringkas .fmipa-prospek-field {
	flex: 1 1 180px;
}
.fmipa-prospek-form--ringkas .fmipa-prospek-field--submit {
	flex: 0 0 auto;
	margin-top: 0;
}
/* --------------------------------------------------------------------------
   CTA penutup beranda — ajakan di atas pita merah, maskot opsional di kanan.

   SATU KOLOM SECARA BAWAAN. Kolom kedua section ini dulu diisi facade video
   profil Unpad; sejak video itu pindah ke section "Kenali FMIPA dan Unpad",
   yang tersisa cuma maskot — dan maskot itu opsional penuh (bawaannya mati).
   Grid dua kolom yang cuma punya satu anak akan menyisakan separuh section
   kosong, jadi kolom keduanya baru dibuka lewat kelas --maskot yang dipasang
   renderer saat maskotnya memang ada.
   -------------------------------------------------------------------------- */
.fmipa-section-cta {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

/* Kolom maskot dibuat `auto`, bukan pecahan fr: lebar maskot sudah dipatok
   clamp() di bloknya sendiri, dan kolom fr yang lebih lebar dari gambarnya
   cuma memindahkan ruang kosong ke dalam kolom.

   Ambangnya 60rem, sama seperti waktu kolom ini masih berisi video — di bawah
   itu judul h2 dan maskot berdampingan sama-sama terlalu sempit, dan lebih
   baik menumpuk penuh. */
@media (min-width: 60rem) {
	.fmipa-section-cta--maskot {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: clamp(2.5rem, 6vw, 5rem);
		align-items: center;
	}
}

/* Jarak bawaan .fmipa-section__header dirancang memisahkan judul dari GRID
   kartu selebar section — di sini yang menyusul cuma sebaris tombol, dan
   celah 2–3,5rem membuat tombolnya terbaca sebagai blok lain yang kebetulan
   lewat, bukan sebagai lanjutan kalimat ajakannya. Jaraknya diambil alih
   .fmipa-section-cta__actions di bawah. */
.fmipa-section-cta__lead .fmipa-section__header {
	margin-bottom: 0;
	/* Lebar dibiarkan mengikuti kolomnya. Sempat dipatok 18ch dan judulnya
	   pecah jadi lima baris satu-dua kata — pada ukuran h2 44px, pembatas
	   berbasis karakter jauh lebih sempit daripada dugaan. */
}

/* Dua tombol ajakan penutup. `gap` beda antara baris dan kolom: saat keduanya
   masih sebaris, 1rem menjaga keduanya terbaca sebagai satu pasangan pilihan;
   saat menumpuk di layar sempit, 0,75rem sudah cukup karena pemisahnya
   sekarang seluruh lebar tombol, bukan cuma celah horizontal. */
.fmipa-section-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
	margin-top: var(--fmipa-space-md, 1.5rem);
}

/* Aturan .fmipa-section-cta__video* dihapus dari sini — bingkai video pindah
   ke section "Kenali FMIPA dan Unpad" milik fmipa-beranda, berikut markup dan
   JS facade-nya. Riwayat lengkap ada di git. */

.fmipa-prospek-form__message {
	padding: 0.6rem 0.9rem;
	border-radius: var(--fmipa-radius, 0.5rem);
	background: var(--fmipa-gray-50, #f5f5f5);
	color: #333;
}

.fmipa-prospek-form__message--error {
	background: #fdecea;
	color: var(--fmipa-red-dark, #d91820);
}

/* --------------------------------------------------------------------------
   Maskot dekoratif di kolom ajakan CTA (opsional, lihat
   fmipa_prospek_render_maskot()).

   CAKRAM PUTIH DI BELAKANGNYA BUKAN HIASAN TAMBAHAN — ia yang membuat maskot
   terbaca sama sekali. Pita section ini MERAH (inc/section-bands.php,
   'cta' => 'merah'), sedangkan maskot Tura sepenuhnya oranye-kuning: dua
   warna hangat jenuh yang bertumpuk langsung akan saling melumerkan tepi.
   Cakramnya juga bukan bentuk baru di halaman ini — kartu putih formulir di
   kolom sebelah sudah memakai bahasa yang sama.

   Kepala dan tangan yang melambai sengaja MELEWATI batas cakram (maskot
   dipasang di atasnya, bukan di-clip): siluetnya utuh, dan gerak melambainya
   tidak terpotong jadi setengah lingkaran.
   -------------------------------------------------------------------------- */
.fmipa-section-cta__maskot {
	position: relative;
	/* margin-top DIHAPUS: maskot kini anak grid section, bukan elemen yang
	   ditumpuk di bawah judul dalam satu kolom. Jaraknya sudah datang dari
	   `gap` grid-nya, dan margin tambahan cuma menggandakannya di layar
	   sempit sekaligus menggeser maskot turun dari garis tengah di desktop. */
	/* Rata kiri, ikut satu garis mulai dengan judul di atasnya — bukan
	   margin-inline:auto. Section ini pernah punya tiga titik mulai sekaligus
	   (lihat catatan .fmipa-section-cta__link); menaruh maskot di tengah
	   kolom akan mengembalikan persoalan yang sama. */
	width: clamp(7rem, 30vw, 10rem);
}

.fmipa-section-cta__maskot::before {
	content: '';
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	/* Lingkaran setinggi lebarnya, duduk di kaki maskot — proporsi tinggi
	   gambar sengaja tidak dipakai supaya cakram tetap bulat berapa pun
	   rasio berkas yang diunggah admin. */
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--fmipa-card-bg, #fff);
	/* Opasitas penuh akan membuat cakram membaca sebagai kartu kedua yang
	   bersaing dengan kartu formulir. Sedikit tembus pandang menahannya di
	   lapisan latar. */
	opacity: 0.92;
}

.fmipa-section-cta__maskot-img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: auto;
}

@media (min-width: 60rem) {
	.fmipa-section-cta__maskot {
		width: clamp(10rem, 15vw, 14rem);
	}
}

/* Layar pendek DAN sempit (ponsel dipegang lanskap): di sana section ini masih
   satu tumpukan, jadi maskot berdiri tepat di antara tautan dan formulir dan
   mendorong formulirnya keluar layar. Menukar aksi utama dengan hiasan adalah
   pertukaran yang salah arah — di ukuran itu maskot dilepas saja. */
@media (max-height: 32rem) and (max-width: 60rem) {
	.fmipa-section-cta__maskot {
		display: none;
	}
}

/* Honeypot — disembunyikan di luar viewport, BUKAN display:none, supaya
   tetap "terlihat" oleh bot sederhana yang mengabaikan display:none. */
.fmipa-prospek-hp {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	margin: 0;
}