/* Halaman publik PPDB */
:root { --pp-ink: #0f172a; --pp-soft: #f8fafc; --pp-line: #e2e8f0; --pp-gold: #f59e0b; }
body { background: var(--pp-soft); color: #334155; scroll-behavior: smooth; }
.pp-container { max-width: 1120px; }
.pp-narrow { max-width: 860px; }

.pp-nav { background: rgba(255,255,255,.96); backdrop-filter: blur(8px); box-shadow: 0 1px 0 var(--pp-line); }
.pp-nav .navbar-brand { color: var(--pp-ink); max-width: 70vw; }
.pp-nav-logo { width: 34px; height: 34px; object-fit: contain; }
.pp-nav .nav-link { color: #475569; font-weight: 500; font-size: .93rem; }
.pp-nav .nav-link:hover, .pp-nav .nav-link.active { color: var(--primary); }

.pp-hero { background: radial-gradient(1200px 400px at 85% -10%, rgba(59,130,246,.35), transparent), linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%); color: #fff; padding: 4rem 0 4.5rem; }
.pp-hero-title { font-weight: 800; font-size: clamp(1.8rem, 4.5vw, 2.9rem); line-height: 1.15; margin-bottom: .6rem; }
.pp-pill { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .85rem; border-radius: 999px; font-size: .85rem; font-weight: 600; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); }
.pp-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.25); }
.pp-pill.tutup .dot { background: #f87171; box-shadow: 0 0 0 4px rgba(248,113,113,.25); }
.pp-hero-card { background: #fff; color: #334155; border-radius: 1.1rem; padding: 1.4rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,.35); }
.pp-hero-card .row-info { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px dashed var(--pp-line); font-size: .92rem; }
.pp-hero-card .row-info:last-of-type { border-bottom: 0; }
.pp-hero-card .row-info span:first-child { color: #64748b; }
.pp-hero-card .row-info span:last-child { font-weight: 600; text-align: right; color: var(--pp-ink); }
.pp-count { display: flex; gap: .5rem; margin-top: .75rem; }
.pp-count div { flex: 1; text-align: center; background: #eff6ff; border-radius: .6rem; padding: .45rem 0; }
.pp-count b { display: block; font-size: 1.35rem; color: var(--primary); line-height: 1.1; }
.pp-count small { color: #64748b; font-size: .72rem; }

.pp-h2 { font-size: 1.25rem; font-weight: 700; color: var(--pp-ink); margin-bottom: 1rem; display: flex; align-items: center; gap: .55rem; }
.pp-h2 i { color: var(--primary); width: 34px; height: 34px; border-radius: 10px; background: #dbeafe; display: inline-flex; align-items: center; justify-content: center; font-size: .95rem; }
.pp-card { background: #fff; border: 1px solid var(--pp-line); border-radius: 1rem; padding: 1.25rem; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.pp-check { list-style: none; padding: 0; margin: 0; }
.pp-check li { position: relative; padding: .3rem 0 .3rem 1.7rem; }
.pp-check li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; top: .35rem; color: #16a34a; font-size: .85rem; }
.pp-check li.opsional::before { content: "\f067"; color: #94a3b8; }

.pp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .9rem; counter-reset: langkah; }
.pp-step { background: #fff; border: 1px solid var(--pp-line); border-radius: 1rem; padding: 1.1rem 1rem; position: relative; }
.pp-step::before { counter-increment: langkah; content: counter(langkah); width: 34px; height: 34px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-bottom: .6rem; }
.pp-step p { margin: 0; font-size: .92rem; }

.pp-jalur { background: #fff; border: 1px solid var(--pp-line); border-radius: 1rem; padding: 1.1rem; height: 100%; }
.pp-timeline { list-style: none; padding: 0; margin: 0; }
.pp-timeline li { position: relative; padding: 0 0 1rem 1.6rem; border-left: 2px solid var(--pp-line); margin-left: .45rem; }
.pp-timeline li:last-child { padding-bottom: 0; border-left-color: transparent; }
.pp-timeline li::before { content: ""; position: absolute; left: -7px; top: .2rem; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--primary); }
.pp-timeline li.lewat::before { border-color: #94a3b8; }
.pp-timeline li.kini::before { background: var(--pp-gold); border-color: var(--pp-gold); }
.pp-timeline .t { font-weight: 600; color: var(--pp-ink); }
.pp-timeline .d { font-size: .85rem; color: #64748b; }
.pp-faq .accordion-button { font-weight: 600; }
.pp-cta { background: linear-gradient(135deg, #1e3a8a, #2563eb); color: #fff; border-radius: 1.25rem; padding: 2.5rem 1.25rem; }
.pp-cta .btn-wa { background: #fff; color: #15803d; font-weight: 600; }

.pp-subhero { background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%); color: #fff; padding: 2rem 0 1.6rem; }
.pp-stepper { display: flex; list-style: none; padding: 0; margin: 0 0 1rem; gap: .35rem; counter-reset: s; }
.pp-stepper li { flex: 1; text-align: center; font-size: .75rem; color: #94a3b8; position: relative; }
.pp-stepper li::before { counter-increment: s; content: counter(s); display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: 0 auto .3rem; border-radius: 50%; background: #e2e8f0; color: #64748b; font-weight: 700; font-size: .85rem; }
.pp-stepper li.aktif { color: var(--primary); font-weight: 600; }
.pp-stepper li.aktif::before { background: var(--primary); color: #fff; }
.pp-stepper li.selesai::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; background: #16a34a; color: #fff; }
.pp-stepper li.selesai { color: #16a34a; cursor: pointer; }
@media (max-width: 575px) { .pp-stepper li span { display: none; } }
.pp-form .pp-judul:not(:first-child) h5 { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--pp-line); }
.pp-form h5 { font-size: 1rem; font-weight: 700; color: var(--pp-ink); margin: .25rem 0 .9rem; }
.pp-form .form-label { font-weight: 600; font-size: .85rem; margin-bottom: .3rem; }
.pp-form .wajib::after { content: " *"; color: #dc2626; }
.pp-pilih { display: block; border: 2px solid var(--pp-line); border-radius: .8rem; padding: .8rem 1rem; cursor: pointer; height: 100%; transition: border-color .15s; }
.pp-pilih:hover { border-color: #93c5fd; }
.pp-pilih input { margin-right: .5rem; }
.pp-pilih:has(input:checked) { border-color: var(--primary); background: #eff6ff; }
.pp-pilih.penuh { opacity: .5; cursor: not-allowed; }
.pp-upload { border: 2px dashed #cbd5e1; border-radius: .8rem; padding: .8rem; display: flex; align-items: center; gap: .8rem; background: #fff; }
.pp-upload.ada { border-style: solid; border-color: #86efac; background: #f0fdf4; }
.pp-upload.tolak { border-color: #fca5a5; background: #fef2f2; }
.pp-upload img { width: 56px; height: 56px; object-fit: cover; border-radius: .5rem; background: #f1f5f9; }
.pp-upload .ikon { width: 56px; height: 56px; border-radius: .5rem; background: #f1f5f9; display: flex; align-items: center; justify-content: center; color: #94a3b8; font-size: 1.3rem; flex-shrink: 0; }
.pp-ringkas dt { font-weight: 500; color: #64748b; font-size: .85rem; }
.pp-ringkas dd { margin-bottom: .45rem; color: var(--pp-ink); font-weight: 500; overflow-wrap: anywhere; }

.pp-track { display: flex; gap: .25rem; margin: 1rem 0; }
.pp-track div { flex: 1; text-align: center; font-size: .72rem; color: #94a3b8; }
.pp-track div i { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin: 0 auto .35rem; border-radius: 50%; background: #e2e8f0; color: #94a3b8; }
.pp-track div.ok { color: #15803d; } .pp-track div.ok i { background: #16a34a; color: #fff; }
.pp-track div.kini { color: var(--primary); font-weight: 600; } .pp-track div.kini i { background: var(--primary); color: #fff; box-shadow: 0 0 0 4px #dbeafe; }
.pp-track div.gagal i { background: #dc2626; color: #fff; }
.pp-hasil { border-radius: 1rem; padding: 1.25rem; color: #fff; }
.pp-hasil.lulus { background: linear-gradient(135deg, #15803d, #22c55e); }
.pp-hasil.cadangan { background: linear-gradient(135deg, #b45309, #f59e0b); }
.pp-hasil.gagal { background: linear-gradient(135deg, #7f1d1d, #dc2626); }
footer .dev-credit { color: #64748b; }