/* Form lamaran jalur Management (www/lamaran-management.html).
   Mengikuti design "Jobs Management" bagian Form Lamaran di Claude Design.
   Warna, huruf, dan pembersihan kerangka Frappe ada di publik-dasar.css. */

.fl-halaman {
	font-family: var(--lp-huruf);
	-webkit-font-smoothing: antialiased;
	color: var(--lp-teks);
	background: var(--lp-bg);
	min-height: 100vh;
}

.fl-kolom {
	max-width: 780px;
	margin: 0 auto;
	padding: 32px 24px 60px;
}

.fl-kembali {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--lp-maroon);
	text-decoration: none;
	margin-bottom: 18px;
}

.fl-kembali:hover {
	color: var(--lp-maroon-dark);
	text-decoration: none;
}

.fl-judul {
	font-size: clamp(26px, 5vw, 36px);
	font-weight: 800;
	color: var(--lp-maroon);
	line-height: 1.15;
	margin: 0;
}

/* ---------- Posisi yang dilamar ---------- */

.fl-posisi {
	margin-top: 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.fl-posisi-nama {
	font-size: 14px;
	font-weight: 800;
	color: #211d1c;
	background: #f6f2f0;
	border-radius: 999px;
	padding: 6px 14px;
	text-align: center;
}

.fl-posisi-chip {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: center;
}

.fl-chip {
	font-size: 11.5px;
	font-weight: 700;
	color: var(--lp-teks-lembut);
	background: #f6f2f0;
	border-radius: 999px;
	padding: 5px 11px;
}

/* ---------- Penanda langkah ---------- */

.fl-langkah {
	display: flex;
	align-items: flex-start;
	margin: 24px 0 8px;
	padding: 0;
	list-style: none;
}

.fl-langkah-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	width: 110px;
}

.fl-langkah-garis {
	flex: 1;
	height: 2px;
	background: var(--lp-garis);
	margin-top: 15px;
}

.fl-langkah.is-langkah2 .fl-langkah-garis {
	background: var(--lp-oranye);
}

.fl-langkah-angka {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 800;
	background: var(--lp-garis);
	color: var(--lp-abu);
}

.fl-langkah-teks {
	font-size: 11.5px;
	font-weight: 700;
	text-align: center;
	color: var(--lp-abu-muda);
}

.fl-langkah-item.is-aktif .fl-langkah-angka {
	background: var(--lp-maroon);
	color: #fff;
}

.fl-langkah-item.is-aktif .fl-langkah-teks {
	color: var(--lp-maroon);
}

/* Langkah yang sudah dilewati ditandai centang oranye */
.fl-langkah-item.is-selesai .fl-langkah-angka {
	background: var(--lp-oranye);
	color: #fff;
}

.fl-langkah-item.is-selesai .fl-langkah-teks {
	color: var(--lp-teks-lembut);
}

/* ---------- Isian ---------- */

.fl-form {
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.fl-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px 20px;
}

.fl-isian label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var(--lp-maroon);
	margin-bottom: 6px;
}

.fl-wajib {
	color: var(--lp-merah);
}

.fl-isian input[type="text"],
.fl-isian input[type="email"],
.fl-isian input[type="tel"],
.fl-isian input[type="date"],
.fl-isian input[type="number"],
.fl-isian textarea,
.fl-isian select {
	width: 100%;
	box-sizing: border-box;
	padding: 11px 12px;
	border: 1px solid var(--lp-garis);
	border-radius: 8px;
	background: var(--lp-isian-bg);
	font-family: var(--lp-huruf);
	font-size: 13.5px;
	color: var(--lp-teks);
}

.fl-isian input:focus,
.fl-isian textarea:focus,
.fl-isian select:focus {
	outline: none;
	border-color: var(--lp-maroon);
	background: #fff;
}

.fl-bantuan {
	font-size: 11.5px;
	color: var(--lp-abu-muda);
	margin: 4px 0 0;
}

/* Isian berkas: tombol + nama berkas, input aslinya disembunyikan di atasnya */
.fl-berkas {
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px solid var(--lp-garis);
	border-radius: 8px;
	background: #fff;
	padding: 8px 8px 8px 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	margin-bottom: 0;
}

.fl-berkas-tombol {
	background: var(--lp-maroon);
	color: #fff;
	font-size: 11.5px;
	font-weight: 700;
	padding: 8px 14px;
	border-radius: 6px;
	flex-shrink: 0;
	white-space: nowrap;
}

.fl-berkas-nama {
	font-size: 12px;
	color: var(--lp-abu);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fl-berkas input[type="file"] {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
	width: 100%;
}

.fl-foto-pratinjau {
	margin-top: 8px;
	max-height: 140px;
	border-radius: 8px;
	display: block;
}

.fl-foto-pratinjau[hidden] {
	display: none;
}

/* ---------- Pengalaman kerja ---------- */

.fl-pengalaman-kepala {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
	gap: 10px;
}

.fl-pengalaman-judul {
	font-size: 14px;
	font-weight: 800;
	color: var(--lp-maroon);
}

.fl-tambah {
	font-family: var(--lp-huruf);
	font-size: 12px;
	font-weight: 700;
	color: var(--lp-maroon);
	background: #fdece9;
	border: none;
	border-radius: 999px;
	padding: 8px 14px;
	cursor: pointer;
}

.fl-pengalaman-baris {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid var(--lp-garis);
	border-radius: 10px;
	padding: 12px;
	margin-bottom: 10px;
}

.fl-pengalaman-isian {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 10px;
	flex: 1;
}

.fl-pengalaman-isian input {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid var(--lp-garis);
	border-radius: 8px;
	background: var(--lp-isian-bg);
	font-family: var(--lp-huruf);
	font-size: 13px;
	color: var(--lp-teks);
}

.fl-hapus {
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border-radius: 8px;
	border: 1px solid #f0d3d3;
	background: #fdece9;
	color: var(--lp-maroon);
	font-size: 15px;
	cursor: pointer;
}

/* ---------- Tombol ---------- */

.fl-aksi {
	display: flex;
	margin-top: 6px;
}

.fl-aksi--kanan {
	justify-content: flex-end;
}

.fl-aksi--dua {
	justify-content: space-between;
	gap: 12px;
}

.fl-tombol {
	font-family: var(--lp-huruf);
	font-size: 14px;
	font-weight: 700;
	border: none;
	border-radius: 10px;
	padding: 13px 28px;
	cursor: pointer;
	transition: background 0.15s ease;
}

.fl-tombol--maroon {
	background: var(--lp-maroon);
	color: #fff;
}

.fl-tombol--maroon:hover:not(:disabled) {
	background: var(--lp-maroon-dark);
}

.fl-tombol--oranye {
	background: var(--lp-oranye);
	color: #fff;
}

.fl-tombol--oranye:hover:not(:disabled) {
	background: var(--lp-oranye-deep);
}

.fl-tombol--putih {
	background: #fff;
	color: var(--lp-maroon);
	border: 1px solid var(--lp-garis);
	padding: 13px 24px;
}

.fl-tombol--maroon:disabled {
	background: #c7bdba;
	cursor: not-allowed;
}

.fl-tombol--oranye:disabled {
	background: #e8d4ae;
	cursor: not-allowed;
}

/* ---------- Pesan ---------- */

.fl-pesan {
	border-radius: 12px;
	padding: 14px 16px;
	font-size: 13.5px;
	line-height: 1.6;
	margin: 16px 0;
}

.fl-pesan--peringatan {
	background: #fdf4e3;
	color: #8a5a00;
	border: 1px solid #f3dcae;
}

.fl-pesan--gagal {
	background: #fdece9;
	color: #96271c;
	border: 1px solid #f3c9c2;
}

.fl-pesan--sukses {
	background: #e9f6ec;
	color: #1e6b34;
	border: 1px solid #c2e2cb;
}

/* ---------- Layar sempit ---------- */

@media (max-width: 600px) {
	.fl-kolom {
		padding: 24px 16px 48px;
	}

	.fl-langkah-item {
		width: 90px;
	}

	.fl-aksi--dua {
		flex-direction: column-reverse;
	}

	.fl-aksi--dua .fl-tombol {
		width: 100%;
	}
}

/* Isian wajib yang masih kosong saat pelamar menekan Lanjut / Kirim Lamaran.
   Dulu tombolnya yang dimatikan, dan tidak ada satu pun petunjuk isian mana
   yang kurang - pelamar cuma melihat tombol yang tidak bisa ditekan. */
.fl-isian.is-kurang > label {
	color: #b3261e;
}

.fl-isian.is-kurang input,
.fl-isian.is-kurang textarea,
.fl-isian.is-kurang select,
.fl-isian.is-kurang .fl-berkas {
	border-color: #b3261e;
	background: #fff7f6;
}

/* ---------- Pertanyaan pra interview (langkah 2 form Pro Hire) ---------- */

/* Satu pertanyaan per baris penuh, bukan di dalam .fl-grid: teks pertanyaannya
   panjang dan dua kolom membuatnya terbaca seperti dua paragraf terpisah. */
.fl-tanya + .fl-tanya {
	margin-top: 18px;
}

.fl-tanya-teks {
	font-size: 13px;
	line-height: 1.6;
	color: var(--lp-teks-lembut);
	margin: 0 0 8px;
	/* Butir keterangan memuat daftar bernomor yang dipisah baris baru di
	   sumbernya; tanpa ini semuanya menyatu jadi satu paragraf. */
	white-space: pre-line;
}

.fl-tanya textarea {
	resize: vertical;
	line-height: 1.6;
}

/* Butir yang cuma keterangan - tidak ada yang perlu dijawab, jadi dibedakan
   dari pertanyaan supaya pelamar tidak mencari kolom isiannya. */
.fl-tanya--info {
	background: var(--lp-isian-bg);
	border-radius: 10px;
	padding: 14px 16px;
}

.fl-tanya--info .fl-tanya-teks {
	margin-bottom: 0;
}

.fl-tanya-judul {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var(--lp-maroon);
	margin-bottom: 6px;
}

.fl-bantuan--atas {
	margin: 0 0 18px;
	font-size: 12.5px;
	color: var(--lp-abu);
}