/* =====================================================================
   PPMB — Penyegaran tampilan (versi AMAN)
   Hanya mengubah WARNA, SUDUT, dan efek. Tidak menyentuh tata letak
   (grid, float, posisi, padding kolom) agar susunan asli tidak bergeser.
   Berkas ini hanya dimuat di halaman PPMB.
   ===================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap");

body{
	background:#eef3f1;
	font-family:"Space Grotesk",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
.fa,[class^="fa-"],[class*=" fa-"]{ font-family:FontAwesome !important; }

/* ---------- Kepala halaman ---------- */
main > .bg-success{
	background:linear-gradient(120deg,#0891b2,#15a34a 55%,#7cb305) !important;
}
main > .bg-success h1{ font-weight:800; letter-spacing:-.01em; }
main > .bg-success h4{ font-weight:500; }

/* ---------- Penanda langkah (hanya warna & bentuk) ---------- */
.f1-progress-line{ background:linear-gradient(120deg,#0891b2,#15a34a 55%,#7cb305) !important; }
.f1-step-icon{ background:#dbe6e2; color:#7e968c; transition:background .3s ease,color .3s ease; }
.f1-step.activated .f1-step-icon{ border-color:#15a34a; color:#15a34a; }
.f1-step.active .f1-step-icon{
	background:linear-gradient(120deg,#0891b2,#15a34a 55%,#7cb305);
	box-shadow:0 10px 22px -12px rgba(21,163,74,.9);
}
.f1-step p{ color:#93a8a0; font-weight:600; }
.f1-step.activated p{ color:#15a34a; }
.f1-step.active p{ color:#12241f; font-weight:700; }

/* ---------- Isian ---------- */
.form-control,.form-control-lg,select.form-control{
	border-radius:10px !important; border-color:#dde7e3; box-shadow:none;
}
.form-control:focus,.form-control-lg:focus,select.form-control:focus{
	border-color:#15a34a; box-shadow:0 0 0 3px rgba(21,163,74,.14);
}
.f1 .input-error{ border-color:#ef4444 !important; box-shadow:0 0 0 3px rgba(239,68,68,.12); }
label,.control-label{ color:#3c534b; font-weight:600; }

/* ---------- Tombol ---------- */
.btn.btn-flat{ border-radius:10px !important; }
.btn-next,.btn-submit,.f1-buttons .btn-success{
	background:linear-gradient(120deg,#0891b2,#15a34a 55%,#7cb305) !important;
	border:0 !important; color:#fff !important; font-weight:700;
	box-shadow:0 12px 26px -14px rgba(21,163,74,.9);
	transition:filter .18s ease, box-shadow .18s ease;
}
.btn-next:hover,.btn-submit:hover{ filter:brightness(1.07); color:#fff !important; }
.btn-previous,.f1-buttons .btn-warning{
	background:#fff !important; color:#4a635a !important;
	border:1px solid rgba(15,90,74,.16) !important; font-weight:600;
	box-shadow:none !important;
}
.btn-previous:hover{ background:#f6faf9 !important; color:#15a34a !important; }

/* ---------- Pesan ---------- */
.alert{ border-radius:12px; }
.alert-success{ background:rgba(21,163,74,.10); border-color:rgba(21,163,74,.28); color:#0f6a35; }
.alert-danger{ background:rgba(239,68,68,.10); border-color:rgba(239,68,68,.28); color:#8f2b22; }

/* ---------- Layar kecil: tombol lebih mudah dijangkau ---------- */
@media (max-width:767px){
	.f1-buttons .btn{ width:100%; margin-bottom:8px; }
	.f1-step p{ font-size:11px; }
	main > .bg-success h1{ font-size:22px !important; }
	main > .bg-success h4{ font-size:14px !important; }
}

@media (prefers-reduced-motion:reduce){
	*{ animation:none !important; transition:none !important; }
}

/* =====================================================================
   ONBOARDING v2 — memakai wadah sendiri (.ppmb-hero / .ppmb-card)
   sehingga tidak bergantung pada kelas Bootstrap halaman.
   ===================================================================== */
.ppmb-hero{
	position:relative; overflow:hidden;
	border-radius:0 0 28px 28px;
	padding:30px 20px 26px !important;
	box-shadow:0 18px 42px -30px rgba(21,163,74,.95);
}
.ppmb-hero:before,.ppmb-hero:after{
	content:""; position:absolute; border-radius:50%; filter:blur(60px); opacity:.32; pointer-events:none;
}
.ppmb-hero:before{ width:300px; height:300px; top:-150px; left:-80px; background:#a3e635; }
.ppmb-hero:after{ width:320px; height:320px; bottom:-190px; right:-90px; background:#22d3ee; }
.ppmb-hero > *{ position:relative; z-index:1; }
.ppmb-hero h1{ font-size:clamp(21px,4vw,31px) !important; text-shadow:0 4px 18px rgba(0,0,0,.2); }

/* kartu formulir */
.ppmb-card{
	background:#fff;
	border:1px solid rgba(15,90,74,.13);
	border-radius:22px;
	padding:24px 22px 20px;
	margin-top:-14px;
	box-shadow:0 26px 60px -42px rgba(10,60,50,.65);
	animation:ppmbRise .55s cubic-bezier(.16,.84,.44,1) both;
}
@keyframes ppmbRise{ from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none} }

/* langkah: lingkaran lebih besar & jelas (ukuran tetap dlm alur asli) */
.ppmb-card .f1-steps{ margin-top:6px; margin-bottom:22px; }
.ppmb-card .f1-step-icon{ width:46px; height:46px; line-height:46px; font-size:18px; }
.ppmb-card .f1-step.activated .f1-step-icon{ line-height:44px; }
.ppmb-card .f1-step.active .f1-step-icon{ width:52px; height:52px; line-height:52px; font-size:20px; }
.ppmb-card .f1-progress{ top:26px; }
.ppmb-card .f1-progress-line{ transition:width .45s cubic-bezier(.16,.84,.44,1); }
.ppmb-card .f1-step p{ font-size:12.5px; margin-top:8px; }

/* pergantian langkah lembut */
.ppmb-card fieldset{ animation:ppmbFade .4s cubic-bezier(.16,.84,.44,1) both; }
@keyframes ppmbFade{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }

/* isian lebih lega */
.ppmb-card .form-control,
.ppmb-card .form-control-lg,
.ppmb-card select.form-control{ min-height:46px; background:#fbfdfc; }
.ppmb-card .form-control:focus{ background:#fff; }

/* tombol */
.ppmb-card .f1-buttons{ margin-top:20px; }
.ppmb-card .f1-buttons .btn{ min-height:48px; padding-left:22px; padding-right:22px; }

/* layar kecil */
@media (max-width:767px){
	.ppmb-hero{ border-radius:0 0 20px 20px; padding:22px 14px 20px !important; }
	.ppmb-card{ margin:-10px 10px 0; padding:16px 14px 14px; border-radius:18px; }
	.ppmb-card .f1-step-icon{ width:38px; height:38px; line-height:38px; font-size:14px; }
	.ppmb-card .f1-step.activated .f1-step-icon{ line-height:36px; }
	.ppmb-card .f1-step.active .f1-step-icon{ width:42px; height:42px; line-height:42px; font-size:16px; }
	.ppmb-card .f1-progress{ top:20px; }
	.ppmb-card .f1-step p{ font-size:10.5px; margin-top:6px; }
	.ppmb-card .f1-step .fa-2x{ font-size:1.35em !important; }
}
@media (max-width:380px){
	.ppmb-card .f1-step p{ font-size:9.5px; }
	.ppmb-card .f1-step-icon{ width:34px; height:34px; line-height:34px; font-size:13px; }
	.ppmb-card .f1-step.active .f1-step-icon{ width:38px; height:38px; line-height:38px; }
}

/* =====================================================================
   ONBOARDING v3 — tanpa header besar, penanda langkah berupa ANGKA
   ===================================================================== */
.ppmb-card{ margin-top:26px; }

/* kepala di dalam kartu */
.ppmb-head{ display:flex; align-items:center; justify-content:space-between; gap:14px;
	flex-wrap:wrap; padding-bottom:16px; border-bottom:1px solid rgba(15,90,74,.10); margin-bottom:20px; }
.ppmb-brand{ display:flex; align-items:center; gap:12px; }
.ppmb-brand img{ width:44px; height:44px; object-fit:contain;
	filter:drop-shadow(0 8px 16px rgba(21,163,74,.35)); }
.ppmb-brand h1{ margin:0; font-size:20px; font-weight:800; letter-spacing:-.02em; color:#12241f; }
.ppmb-brand p{ margin:2px 0 0; font-size:12.5px; color:#64796f; }
.ppmb-meta{ display:flex; align-items:center; gap:10px; }
.ppmb-metanum{ font-size:12.5px; color:#64796f; font-weight:600; }
.ppmb-metanum b{ color:#12241f; }
.ppmb-metapct{ font-size:12px; font-weight:800; color:#fff; padding:5px 12px; border-radius:999px;
	background:linear-gradient(120deg,#0891b2,#15a34a 55%,#7cb305);
	box-shadow:0 8px 18px -10px rgba(21,163,74,.9); }

/* ---- penanda langkah ---- */
.ppmb-steps{ position:relative; overflow:visible; margin:0 0 24px; }
.ppmb-track{ position:absolute; top:19px; left:12.5%; right:12.5%; height:4px;
	background:#e6eeeb; border-radius:99px; overflow:hidden; }
.ppmb-steps .f1-progress{ position:static !important; width:100% !important; height:4px !important;
	background:transparent !important; }
.ppmb-steps .f1-progress-line{ position:relative !important; top:0 !important; height:4px !important;
	background:linear-gradient(120deg,#0891b2,#15a34a 55%,#7cb305) !important; border-radius:99px;
	transition:width .5s cubic-bezier(.16,.84,.44,1); }

.ppmb-stepwrap{ position:relative; display:flex; }
.ppmb-steps .f1-step{ position:relative; float:none !important; width:25%; padding:0 4px !important;
	text-align:center; }
.ppmb-num{
	display:inline-flex; align-items:center; justify-content:center;
	width:42px; height:42px; border-radius:50%;
	background:#fff; border:2px solid #dfe9e5; color:#93a8a0;
	font-weight:800; font-size:15px; line-height:1;
	transition:all .35s cubic-bezier(.16,.84,.44,1);
}
.ppmb-steps .f1-step p{ margin:9px 0 0 !important; font-size:12.5px; font-weight:600; color:#93a8a0 !important;
	transition:color .3s ease; }

/* langkah SELESAI -> centang hijau */
.ppmb-steps .f1-step.activated .ppmb-num{
	background:#eaf7f0; border-color:#15a34a; color:#15a34a; font-size:0;
}
.ppmb-steps .f1-step.activated .ppmb-num:after{
	content:"\f00c"; font-family:FontAwesome; font-size:15px; line-height:1;
}
.ppmb-steps .f1-step.activated p{ color:#15a34a !important; }

/* langkah AKTIF -> bulat gradasi bercahaya */
.ppmb-steps .f1-step.active .ppmb-num{
	background:linear-gradient(120deg,#0891b2,#15a34a 55%,#7cb305);
	border-color:transparent; color:#fff; transform:scale(1.14);
	box-shadow:0 12px 24px -12px rgba(21,163,74,.95), 0 0 0 6px rgba(21,163,74,.12);
}
.ppmb-steps .f1-step.active p{ color:#12241f !important; font-weight:700; }

/* ---- layar kecil ---- */
@media (max-width:767px){
	.ppmb-card{ margin-top:14px; }
	.ppmb-head{ padding-bottom:12px; margin-bottom:16px; }
	.ppmb-brand img{ width:38px; height:38px; }
	.ppmb-brand h1{ font-size:16.5px; }
	.ppmb-brand p{ font-size:11px; }
	.ppmb-meta{ width:100%; justify-content:space-between; }
	.ppmb-track{ top:16px; left:12.5%; right:12.5%; }
	.ppmb-num{ width:36px; height:36px; font-size:13px; }
	.ppmb-steps .f1-step.activated .ppmb-num:after{ font-size:13px; }
	.ppmb-steps .f1-step p{ font-size:10.5px; margin-top:7px !important; }
}
@media (max-width:380px){
	.ppmb-num{ width:32px; height:32px; font-size:12px; }
	.ppmb-track{ top:14px; }
	.ppmb-steps .f1-step p{ font-size:9.5px; }
}