/* LAMARAN KERJA - formulir karir/lamar.php (31-10-2026, revisi PB: tiru layout & desain self_register.php).
   Bagian 1 = salinan VERBATIM CSS self_register.php (tampilan v2); bagian 2 = tambahan untuk isian lamaran. */

/* =====================================================================
   PENDAFTARAN MCU (MANDIRI) — tampilan v2, mengikuti register.php v2
   (gaya health_calculator.php: Orbitron + Space Grotesk, latar titik + bola warna, kartu bagian berwarna)
   ===================================================================== */
:root {
    color-scheme: light;
    --bg-0: #f6f8fd; --bg-1: #ecf1fa;
    --kaca-kuat: rgba(255,255,255,0.95);
    --line: rgba(30,41,59,0.10); --line-2: rgba(30,41,59,0.18);
    --text: #0f172a; --text-2: #334155; --text-3: #4e5b72;
    --indigo: #4f46e5; --indigo-ink: #4338ca; --indigo-tua: #3730a3;
    --hud: 'Orbitron', 'Space Grotesk', system-ui, sans-serif;
    --bayang: 0 18px 44px rgba(30,41,59,0.09), 0 2px 6px rgba(30,41,59,0.05);
    --acc: 99,102,241; --ink: #4338ca;
    /* dipakai modul pilih_tanggal.js / foto_panduan.js (warna disesuaikan ke tampilan baru) */
    --primary: #4338ca; --primary-dark: #3730a3; --primary-light: #a5b4fc;
    --border: rgba(30,41,59,0.18); --text-primary: #0f172a; --text-secondary: #334155;
    --error: #be123c; --shadow-sm: none; --shadow-md: 0 8px 18px rgba(67,56,202,0.12);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { background: var(--bg-0); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; }
body {
    font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--text); line-height: 1.5; min-height: 100vh; overflow-wrap: break-word;
    background: linear-gradient(180deg, #fbfcff 0%, var(--bg-0) 35%, var(--bg-1) 100%);
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Latar: titik halus + cahaya warna-warni ---------- */
.latar { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.latar::before {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(79,70,229,0.15) 1px, transparent 1.3px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 0%, #000 25%, transparent 80%);
    mask-image: radial-gradient(ellipse 85% 70% at 50% 0%, #000 25%, transparent 80%);
}
.orb { position: absolute; border-radius: 50%; }
.orb-1 { width: 760px; height: 760px; left: -240px; top: -320px; background: radial-gradient(circle, rgba(56,189,248,0.42), transparent 66%); }
.orb-2 { width: 700px; height: 700px; right: -260px; top: 20px; background: radial-gradient(circle, rgba(167,139,250,0.40), transparent 66%); }
.orb-3 { width: 800px; height: 800px; left: 20%; bottom: -440px; background: radial-gradient(circle, rgba(52,211,153,0.32), transparent 66%); }
.orb-4 { width: 600px; height: 600px; right: 2%; bottom: 4%; background: radial-gradient(circle, rgba(251,113,133,0.26), transparent 66%); }
.orb-5 { width: 520px; height: 520px; left: 36%; top: 12%; background: radial-gradient(circle, rgba(251,191,36,0.22), transparent 66%); }

.shell {
    position: relative; z-index: 1; max-width: 1400px; margin: 0 auto; min-height: 100vh;
    padding: 0 clamp(16px, 2.5vw, 32px) 24px; display: flex; flex-direction: column;
}

/* ---------- Bilah atas halaman ---------- */
.topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 0; border-bottom: 1px solid var(--line); position: relative;
}
.topbar::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
    background: linear-gradient(90deg, transparent, #6366f1, #0ea5e9, transparent) no-repeat;
    background-size: 28% 100%; background-position: -40% 0;
    animation: sapu 7s ease-in-out infinite;
}
.brand { display: flex; align-items: center; gap: 12px; min-height: 44px; min-width: 0; }
.brand-logo {
    width: 44px; height: 44px; border-radius: 50%; background: #fff; flex-shrink: 0;
    display: grid; place-items: center;
    box-shadow: 0 0 0 2px rgba(79,70,229,0.30), 0 8px 20px rgba(79,70,229,0.20);
}
.brand-logo img { width: 36px; height: 36px; object-fit: contain; }
.brand-logo.tanpa-logo { display: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.brand-text strong {
    font-family: var(--hud); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.14em; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-text > span {
    font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--indigo-tua);
    white-space: nowrap; font-weight: 600; overflow: hidden; text-overflow: ellipsis;
}
.pil-versi {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; flex-shrink: 0;
    border-radius: 999px; font-weight: 600; font-size: 0.85rem; white-space: nowrap;
    background: rgba(255,255,255,0.92); border: 1px solid rgba(16,185,129,0.45); color: #047857;
    box-shadow: 0 6px 16px rgba(16,185,129,0.14);
}
.pil-versi svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ---------- Panel judul (gaya "komando" kalkulator) ---------- */
.komando {
    position: relative; overflow: hidden; border-radius: 26px; padding: 22px 24px 0; margin-top: 16px;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, 340px); column-gap: 28px; align-items: center;
    background: linear-gradient(130deg, rgba(255,255,255,0.97) 0%, rgba(232,236,255,0.96) 40%, rgba(214,238,254,0.95) 72%, rgba(225,250,238,0.94) 100%);
    border: 1px solid rgba(99,102,241,0.26);
    box-shadow: 0 26px 60px rgba(79,70,229,0.12), inset 0 1px 0 #fff;
}
.komando::before, .komando::after {
    content: ""; position: absolute; width: 22px; height: 22px; pointer-events: none;
    border: 2px solid #6366f1; opacity: 0.6;
}
.komando::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; border-top-left-radius: 8px; }
.komando::after { top: 10px; right: 10px; border-left: 0; border-bottom: 0; border-top-right-radius: 8px; }
.alis {
    display: inline-flex; align-items: center; gap: 10px; font-family: var(--hud); font-weight: 600;
    font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--indigo-ink);
}
.titik {
    width: 8px; height: 8px; border-radius: 50%; background: #10b981; flex-shrink: 0;
    animation: denyut 2s ease-out infinite;
}
.judul { margin-top: 12px; line-height: 1.08; }
.judul .j-kecil { display: block; font-size: 1.15rem; font-weight: 600; color: var(--text-2); letter-spacing: 0.04em; }
.judul .j-besar {
    display: block; font-family: var(--hud); font-weight: 800; letter-spacing: 0.05em; margin-top: 4px;
    font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--indigo-ink); text-transform: uppercase;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .judul .j-besar {
        background: linear-gradient(90deg, #4338ca 0%, #0369a1 48%, #0f766e 100%);
        -webkit-background-clip: text; background-clip: text; color: transparent;
    }
}
.lead { margin-top: 10px; font-size: 1rem; color: var(--text-2); max-width: 64ch; }
.langkah { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.langkah li {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px;
    background: rgba(255,255,255,0.92); border: 1px solid var(--line); font-size: 0.88rem; font-weight: 600; color: var(--text-2);
}
.langkah b {
    width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
    font-family: var(--hud); font-size: 0.82rem; color: #fff; background: linear-gradient(135deg, #4338ca, #0369a1);
}
.langkah li.beres b { background: #047857; }
.monitor {
    padding: 12px 16px 14px; border-radius: 18px;
    background: rgba(255,255,255,0.92); border: 1px solid var(--line);
    box-shadow: 0 12px 28px rgba(30,41,59,0.08);
}
.monitor-label {
    display: flex; align-items: center; gap: 8px; white-space: nowrap; font-family: var(--hud); font-weight: 600;
    font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3);
}
.monitor-label b { font-weight: 700; color: var(--indigo-ink); }
.monitor-isi { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.emblem { width: 64px; height: 64px; flex-shrink: 0; overflow: visible; }
.emblem .putar-luar { transform-origin: 60px 60px; animation: putar 26s linear infinite; }
.emblem .putar-dalam { transform-origin: 60px 60px; animation: putar 13s linear infinite reverse; }
.emblem .palang { transform-origin: 60px 60px; animation: napas 3.4s ease-in-out infinite; }
.monitor-waktu { display: flex; flex-direction: column; min-width: 0; }
.jam { font-family: var(--hud); font-weight: 700; font-size: 1.75rem; line-height: 1.15; color: var(--text); white-space: nowrap; }
.jam i { font-style: normal; display: inline-block; width: 0.8em; text-align: center; }
.jam i.c { width: 0.38em; color: var(--indigo); }
.tgl { font-size: 0.9rem; color: var(--text-2); }
.ekg {
    grid-column: 1 / -1; position: relative; min-height: 52px; margin: 16px -24px 0;
    display: flex; align-items: center; border-top: 1px solid rgba(225,29,72,0.16);
}
.ekg::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgba(225,29,72,0.08) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(225,29,72,0.08) 1px, transparent 1px);
    background-size: 16px 16px; background-position: -1px -1px;
    -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent);
    mask-image: linear-gradient(180deg, #000 40%, transparent);
}
.ekg-jejak { position: relative; width: 100%; height: 52px; }
.ekg svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ekg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ekg-dasar path { stroke: rgba(225,29,72,0.28); stroke-width: 1.6; }
.ekg-nyala path { stroke: #e11d48; stroke-width: 2.4; }
.ekg-nyala {
    filter: drop-shadow(0 0 4px rgba(244,63,94,0.55));
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 78%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 78%, transparent 100%);
    -webkit-mask-size: 28% 100%; mask-size: 28% 100%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: -39% 0; mask-position: -39% 0;
    animation: sapu-ekg 3.6s linear infinite;
}

/* ---------- Tata letak: isian (kiri) + progres (kanan) ---------- */
.tata { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 22px; margin-bottom: 22px; align-items: start; }
.kolom-isian { min-width: 0; }
.kepala-bagian { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.kepala-bagian h2 {
    font-family: var(--hud); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--text);
}
.kepala-bagian .garis { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-2), transparent); }
.kepala-bagian .jumlah {
    font-family: var(--hud); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--indigo-tua); white-space: nowrap;
}
.daftar-modul { display: flex; flex-direction: column; gap: 18px; }

/* ---------- Pesan hasil kirim ---------- */
.pesan-hasil { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.alert {
    display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border-radius: 18px; border: 1px solid;
    font-weight: 600; font-size: 0.98rem; line-height: 1.45; box-shadow: var(--bayang); overflow-wrap: anywhere;
    animation: naik 0.45s cubic-bezier(.2,.7,.2,1) backwards;
}
.alert::before { content: ""; width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; margin-top: -2px; }
.alert.success { background: linear-gradient(160deg, rgba(16,185,129,0.20), rgba(255,255,255,0.97) 72%), #fff; border-color: rgba(16,185,129,0.5); color: #065f46; }
.alert.error { background: linear-gradient(160deg, rgba(244,63,94,0.18), rgba(255,255,255,0.97) 72%), #fff; border-color: rgba(225,29,72,0.45); color: #9f1239; }
.alert.success::before { background: #059669 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 16px 16px no-repeat; }
.alert.error::before { background: #e11d48 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") center / 15px 15px no-repeat; }
.alert-ket { display: block; margin-top: 4px; font-weight: 500; font-size: 0.9rem; color: #881337; }

/* ---------- Kartu bagian (gaya "modul" kalkulator, rona dipertegas) ---------- */
.modul {
    position: relative; border-radius: 22px; padding: 20px 20px 22px; min-width: 0;
    background: linear-gradient(165deg, rgba(var(--acc),0.20) 0%, rgba(var(--acc),0.06) 42%, rgba(255,255,255,0.95) 80%), #fff;
    border: 1px solid rgba(var(--acc),0.30);
    box-shadow: var(--bayang);
    animation: naik 0.6s cubic-bezier(.2,.7,.2,1) backwards;
    animation-delay: calc(var(--i, 0) * 70ms + 80ms);
}
.modul::before {
    content: ""; position: absolute; top: 0; left: 20px; right: 20px; height: 2px; border-radius: 2px; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(var(--acc),0.95), transparent);
}
.modul-kepala { display: flex; align-items: flex-start; gap: 14px; }
.ikon {
    width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; flex-shrink: 0;
    color: var(--ink); background: rgba(var(--acc),0.14); border: 1px solid rgba(var(--acc),0.36);
    box-shadow: 0 10px 22px rgba(var(--acc),0.18);
}
.ikon svg { width: 26px; height: 26px; }
.modul-judul { flex: 1; min-width: 0; }
.nomor { font-family: var(--hud); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.16em; color: var(--ink); }
.modul h2 { font-size: 1.18rem; font-weight: 700; color: var(--text); line-height: 1.25; }
.modul-sub { font-size: 0.9rem; color: var(--text-3); margin-top: 2px; }
.tanda {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 11px;
    border-radius: 999px; font-size: 0.82rem; font-weight: 700; white-space: nowrap;
    background: rgba(100,116,139,0.10); color: #475569; border: 1px solid rgba(100,116,139,0.28);
}
.tanda:empty { display: none; }
.tanda[data-st="lengkap"] { background: rgba(16,185,129,0.13); color: #065f46; border-color: rgba(16,185,129,0.45); }
.tanda[data-st="belum"] { background: rgba(245,158,11,0.14); color: #92400e; border-color: rgba(217,119,6,0.45); }
.isi-modul { display: flex; flex-direction: column; gap: 18px; margin-top: 18px; }

/* ---------- Isian ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 18px 22px; align-items: start; }
.field { min-width: 0; }
.field > label, .label-sub {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 8px;
    font-weight: 700; font-size: 0.93rem; line-height: 1.35; color: var(--text); transition: color 0.15s;
}
.label-sub { font-weight: 600; font-size: 0.9rem; color: var(--text-2); }
.field:focus-within > label { color: var(--ink); }
.wajib, .opsi {
    display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 999px;
    font-size: 0.82rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1.2;
}
.wajib { background: rgba(var(--acc),0.14); color: var(--ink); }
.opsi { background: rgba(100,116,139,0.12); color: #475569; }
.ket { font-size: 0.86rem; color: var(--text-3); margin-top: 6px; }
input[type="text"], input[type="date"], input[type="number"], select, textarea {
    display: block; width: 100%; min-width: 0; min-height: 48px; padding: 11px 14px;
    border-radius: 14px; border: 1px solid var(--line-2); background: #fff;
    font-size: 1rem; font-weight: 600; color: var(--text); line-height: 1.35;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
input[type="text"]:hover, input[type="date"]:hover, input[type="number"]:hover, select:hover, textarea:hover { border-color: rgba(var(--acc),0.55); }
input[type="text"]:focus, input[type="date"]:focus, input[type="number"]:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(var(--acc),0.18);
}
input:user-invalid, select:user-invalid, textarea:user-invalid { border-color: #be123c; box-shadow: 0 0 0 3px rgba(225,29,72,0.12); }
input::placeholder, textarea::placeholder { color: #64748b; font-weight: 500; }
textarea { min-height: 96px; resize: vertical; font-weight: 500; line-height: 1.5; }
select {
    cursor: pointer; -webkit-appearance: none; appearance: none; padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234e5b72' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center;
}
/* kursor tanggal TIDAK diatur di sini: pilih_tanggal.js memberi kursor tangan (.ktl-buka-otomatis) pada Tanggal MCU */
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.75; }
.sorot { animation: sorot 1.6s ease-out; border-radius: 16px; }

/* Kotak tanggal lahir 3 langkah (assets/js/pilih_tanggal.js) diselaraskan dengan isian lain */
.field .ktl-kotak {
    min-height: 48px; padding: 11px 14px; border-radius: 14px; border: 1px solid var(--line-2); background: #fff;
    font-size: 1rem; font-weight: 600; color: var(--text); box-shadow: none; line-height: 1.35;
}
.field .ktl-kotak:hover { border-color: rgba(var(--acc),0.55); }
.field .ktl-kotak:focus, .field .ktl-kotak[aria-expanded="true"] { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(var(--acc),0.18); }
.field .ktl-kotak:focus-visible { outline: 3px solid rgba(var(--acc),0.55); outline-offset: 2px; }
.field .ktl-kotak.ktl-galat { border-color: #be123c; box-shadow: 0 0 0 3px rgba(225,29,72,0.12); }
.field .ktl-kosong { color: #64748b; font-weight: 500; }
.field .ktl-umur { color: var(--text-3); font-weight: 500; }
.field .ktl-ikon { color: var(--ink); }
.field .ktl-pesan { color: #be123c; }

/* ---------- Foto wajah (area unggah asli + modul foto_panduan.js) ---------- */
.modul .upload-area {
    position: relative; border: 2px dashed rgba(var(--acc),0.45); border-radius: 18px; padding: 22px; text-align: center;
    background: rgba(255,255,255,0.9); cursor: pointer; transition: border-color 0.2s, background 0.2s;
}
.modul .upload-area:hover { border-color: var(--ink); background: #fff; }
.modul .upload-area.has-file { border-color: #059669; background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(255,255,255,0.95)); }
.modul .upload-area input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.upload-icon { display: grid; place-items: center; margin-bottom: 8px; color: var(--ink); }
.upload-icon svg { width: 40px; height: 40px; }
.upload-text { font-size: 0.98rem; font-weight: 600; color: var(--text-2); margin-bottom: 4px; }
.upload-hint { font-size: 0.86rem; color: var(--text-3); }
.upload-preview { display: none; margin-top: 12px; }
.upload-preview img { max-width: 180px; max-height: 180px; border-radius: 12px; object-fit: cover; box-shadow: 0 8px 18px rgba(30,41,59,0.16); border: 3px solid #fff; }
.upload-preview .file-name { margin-top: 8px; font-size: 0.86rem; color: var(--text-2); font-weight: 600; }
.modul .upload-area.kfp-aktif { cursor: default; padding: 18px; text-align: left; border-style: solid; border-color: rgba(var(--acc),0.35); background: rgba(255,255,255,0.94); }
.modul .upload-area.kfp-aktif:hover { border-color: rgba(var(--acc),0.55); background: #fff; }
.modul .upload-area.kfp-aktif.has-file { border-color: rgba(16,185,129,0.6); background: linear-gradient(135deg, rgba(16,185,129,0.09), rgba(255,255,255,0.96)); }
.modul .upload-area.kfp-aktif.kfp-seret { border-color: var(--ink); background: rgba(var(--acc),0.08); }
.modul .kfp-judul { font-size: 1rem; color: var(--text); }
.modul .kfp-hasil .kfp-judul { color: #047857; }
.modul .kfp-ket { color: var(--text-3); font-size: 0.88rem; }
.modul .kfp-btn { min-height: 44px; border-radius: 12px; font-weight: 700; }
.modul .kfp-btn-utama { background: linear-gradient(135deg, #4338ca, #0369a1); color: #fff; box-shadow: 0 8px 18px rgba(67,56,202,0.28); }
.modul .kfp-btn-kedua { background: #fff; color: var(--indigo-tua); border-color: rgba(99,102,241,0.45); }
.modul .kfp-btn-kedua:hover { background: #eef2ff; }
.modul .kfp-ilus-garis { stroke: #4f46e5; }
.modul .kfp-btn:focus-visible { outline: 3px solid rgba(var(--acc),0.55); outline-offset: 2px; }

/* ---------- Pilihan: radio = pil, checkbox = chip bercentang ---------- */
.checkbox-group { display: flex; flex-wrap: wrap; gap: 8px; }
.checkbox-group.column { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.checkbox-group label {
    position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; min-width: 48px; max-width: 100%;
    padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,0.97);
    font-weight: 600; font-size: 0.92rem; line-height: 1.25; color: var(--text-2); cursor: pointer; margin: 0;
    transition: background 0.18s, color 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.checkbox-group input {
    position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1;
}
.checkbox-group label:has(input[type="radio"]:checked) {
    background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: 0 8px 18px rgba(var(--acc),0.30);
}
.checkbox-group label:has(input[type="checkbox"]) { border-radius: 12px; padding: 8px 14px 8px 12px; }
.checkbox-group label:has(input[type="checkbox"])::before {
    content: ""; width: 18px; height: 18px; border-radius: 6px; flex-shrink: 0; background-color: #fff;
    border: 2px solid rgba(var(--acc),0.65); background-position: center; background-repeat: no-repeat; background-size: 12px 12px;
}
.checkbox-group label:has(input[type="checkbox"]:checked) { background: var(--ink); border-color: var(--ink); color: #fff; }
.checkbox-group label:has(input[type="checkbox"]:checked)::before {
    border-color: #fff; background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.checkbox-group label:has(input:focus-visible) { outline: 3px solid rgba(var(--acc),0.55); outline-offset: 2px; }
.checkbox-group.column label { border-radius: 14px; justify-content: flex-start; text-align: left; }
@media (hover: hover) {
    .checkbox-group label:not(:has(input:checked)):hover { border-color: rgba(var(--acc),0.75); background: #fff; }
}

/* Isian bersyarat (kelas show dari skrip asli) */
.conditional { display: none; }
.conditional.show { display: block; animation: muncul 0.3s cubic-bezier(.16,1,.3,1); }
.field > .sub-isian, .field > .conditional { margin-top: 12px; }
.conditional.show, .sub-isian {
    padding: 14px; border-radius: 16px; background: rgba(var(--acc),0.06); border: 1px dashed rgba(var(--acc),0.4);
}
.grid > .conditional.show { padding: 0; background: none; border: 0; border-radius: 0; }
.kelompok-tanya + .kelompok-tanya { margin-top: 12px; }

/* ---------- Pernyataan + tombol kirim ---------- */
.kirim {
    display: flex; flex-direction: column; gap: 14px; scroll-margin-bottom: 24px;
    padding: 18px; border-radius: 22px; background: rgba(255,255,255,0.96); border: 1px solid rgba(79,70,229,0.24);
    box-shadow: var(--bayang); position: relative;
}
.kirim::before {
    content: ""; position: absolute; top: 0; left: 22px; right: 22px; height: 3px; border-radius: 3px;
    background: linear-gradient(90deg, #6366f1, #0ea5e9, #10b981, #f59e0b, #f43f5e);
}
.disclaimer-text {
    font-size: 0.9rem; color: var(--text-2); text-align: justify; line-height: 1.55; padding: 12px 14px;
    background: rgba(99,102,241,0.06); border-radius: 14px; border: 1px solid var(--line); border-left: 4px solid #4f46e5;
}
.info-wa {
    display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0 12px; align-items: start; padding: 12px 14px;
    border-radius: 14px; background: #ecfdf5; border: 1px solid rgba(16,185,129,0.45); color: #065f46; font-size: 0.9rem; font-weight: 600;
}
.info-wa svg { width: 34px; height: 34px; color: #047857; }
.info-wa b { color: #064e3b; }
.actions { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 12px 16px; }
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 22px;
    border-radius: 14px; border: 1px solid transparent; font-weight: 700; font-size: 1rem; line-height: 1.2;
    cursor: pointer; text-decoration: none; text-align: center; position: relative;
    transition: background 0.2s, box-shadow 0.2s, border-color 0.2s, transform 0.2s, color 0.2s;
}
.btn.secondary { background: #fff; color: var(--text-2); border-color: var(--line-2); }
.btn.secondary:hover { border-color: rgba(79,70,229,0.55); color: var(--indigo-ink); box-shadow: 0 8px 18px rgba(79,70,229,0.14); }
.btn.primary {
    min-height: 54px; padding: 0 28px; color: #fff;
    background: linear-gradient(135deg, #4338ca 0%, #0369a1 62%, #0f766e 100%);
    box-shadow: 0 12px 26px rgba(67,56,202,0.32);
}
.btn.primary::before {
    content: ""; width: 20px; height: 20px; flex-shrink: 0; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4Z'/%3E%3Cpath d='M22 2 11 13'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4Z'/%3E%3Cpath d='M22 2 11 13'/%3E%3C/svg%3E") center / contain no-repeat;
}
.btn.primary:hover { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(67,56,202,0.38); }
.btn.primary:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid rgba(79,70,229,0.55); outline-offset: 3px; }
/* Keterangan saat mengirim (kiriman lewat skrip: unggah foto + data bisa 5–15 detik di jaringan seluler) */
.status-kirim {
    display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin: 0;
    font-weight: 600; font-size: 0.92rem; line-height: 1.4; color: var(--indigo-tua); text-align: right;
}
.status-kirim::before {
    content: ""; width: 16px; height: 16px; flex-shrink: 0; border-radius: 50%;
    border: 2px solid rgba(67,56,202,0.25); border-top-color: #4338ca; animation: putar 0.8s linear infinite;
}
.ket-kosong { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: #f0fdf4; border: 1px solid rgba(16,185,129,0.35); color: #065f46 !important; }
.ket-kosong b { color: #064e3b; }
/* Saat formulir dikirim (cegah klik ganda; dipasang skrip tampilan) */
form.submitting { pointer-events: none; }
form.submitting .btn.primary { background: #475569; box-shadow: none; transform: none; }
form.submitting .btn.primary::before { display: none; }
form.submitting .btn.primary::after {
    content: ""; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;
    border-radius: 50%; animation: putar 0.8s linear infinite;
}

/* ---------- Panel progres (gaya panel hasil kalkulator) ---------- */
.panel-progres {
    position: relative; border-radius: 26px; padding: 22px; min-width: 0; display: none;
    background: var(--kaca-kuat); border: 1px solid rgba(79,70,229,0.22);
    box-shadow: 0 26px 60px rgba(30,41,59,0.12), inset 0 1px 0 #fff;
}
.panel-progres::before {
    content: ""; position: absolute; top: 0; left: 22px; right: 22px; height: 3px; border-radius: 3px;
    background: linear-gradient(90deg, #6366f1, #0ea5e9, #10b981, #f59e0b, #f43f5e);
}
.pp-ringkas { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.cincin { position: relative; width: 84px; height: 84px; flex-shrink: 0; }
.cincin svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.cincin circle { fill: none; stroke-width: 10; }
.cincin-dasar { stroke: rgba(79,70,229,0.12); }
.cincin-isi { stroke: url(#sr-gradasi-cincin); stroke-linecap: round; transition: stroke-dashoffset 0.5s ease; }
.cincin-angka {
    position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--hud); font-weight: 800;
    font-size: 1.2rem; color: var(--text);
}
.pp-teks { min-width: 0; }
.pp-label { font-family: var(--hud); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.pp-nilai { font-size: 1.05rem; font-weight: 700; color: var(--text); line-height: 1.35; margin-top: 2px; font-variant-numeric: tabular-nums; }
.pp-nilai b { font-size: 1.3rem; color: var(--indigo-ink); }
.pp-ket { font-size: 0.86rem; color: var(--text-3); margin-top: 2px; }
.daftar-bagian { list-style: none; display: flex; flex-direction: column; gap: 5px; margin-top: 14px; }
.daftar-bagian button {
    width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px;
    min-height: 44px; padding: 4px 8px; border-radius: 14px; background: #fff; border: 1px solid var(--line);
    cursor: pointer; text-align: left; transition: border-color 0.2s, box-shadow 0.2s;
}
@media (hover: hover) and (pointer: fine) { .daftar-bagian button { min-height: 40px; } }
.daftar-bagian button:hover { border-color: rgba(var(--acc),0.6); box-shadow: 0 8px 18px rgba(var(--acc),0.14); }
.daftar-bagian button:focus-visible { outline: 3px solid rgba(var(--acc),0.55); outline-offset: 2px; }
.daftar-bagian .no {
    width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-family: var(--hud);
    font-size: 0.82rem; font-weight: 700; color: var(--ink); background: rgba(var(--acc),0.14); border: 1px solid rgba(var(--acc),0.34);
}
.daftar-bagian .nm { font-weight: 600; font-size: 0.88rem; color: var(--text); line-height: 1.25; }
.daftar-bagian .tanda { min-height: 26px; padding: 0 9px; font-size: 0.82rem; }
.kurang {
    margin-top: 16px; padding: 14px; border-radius: 16px; background: #fffbeb; border: 1px solid rgba(217,119,6,0.4); color: #78350f;
}
.kurang h3 { font-size: 0.95rem; font-weight: 700; color: #78350f; }
.kurang h3 small { font-size: 0.84rem; font-weight: 600; }
.loncat-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.loncat {
    min-height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 12px;
    background: #fff; border: 1px solid rgba(217,119,6,0.48); color: #78350f; font-weight: 700; font-size: 0.86rem;
    cursor: pointer; text-align: left; line-height: 1.25;
}
.loncat:hover { background: #fef3c7; }
.loncat-lebih { border-style: dashed; }
.loncat:focus-visible { outline: 3px solid rgba(217,119,6,0.5); outline-offset: 2px; }
.siap {
    display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 0 12px; align-items: start; margin-top: 16px; padding: 14px;
    border-radius: 16px; background: #ecfdf5; border: 1px solid rgba(16,185,129,0.45); color: #065f46; font-size: 0.9rem; font-weight: 600;
}
.siap .tombol { grid-column: 2; margin-top: 10px; }
.siap::before {
    content: ""; width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
    background: #059669 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 13px 13px no-repeat;
}
.tombol {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px; margin-top: 16px;
    padding: 0 18px; border-radius: 14px; font-weight: 700; font-size: 0.95rem; cursor: pointer;
    border: 1px solid var(--line-2); background: #fff; color: var(--text-2);
    transition: background 0.2s, box-shadow 0.2s, border-color 0.2s, color 0.2s;
}
.tombol svg { width: 18px; height: 18px; }
.tombol:hover { border-color: rgba(79,70,229,0.55); color: var(--indigo-ink); box-shadow: 0 8px 18px rgba(79,70,229,0.12); }
.tombol:focus-visible { outline: 3px solid rgba(79,70,229,0.5); outline-offset: 2px; }
.catatan-kaki { margin-top: 14px; font-size: 0.84rem; color: var(--text-3); }

/* ---------- Bilah progres melayang (HP & tablet) ---------- */
.bilah {
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 30; display: none; align-items: center; gap: 12px;
    padding: 8px 8px 8px 10px; border-radius: 18px; background: rgba(255,255,255,0.97); border: 1px solid var(--line-2);
    box-shadow: 0 18px 40px rgba(30,41,59,0.22);
    transition: transform 0.3s, opacity 0.3s, visibility 0s linear 0s;
}
.bilah.sembunyi { transform: translateY(140%); opacity: 0; pointer-events: none; visibility: hidden; transition: transform 0.3s, opacity 0.3s, visibility 0s linear 0.3s; }
.bilah .mini {
    width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0; display: grid; place-items: center;
    font-family: var(--hud); font-weight: 800; font-size: 0.82rem; color: #fff; background: linear-gradient(135deg, #4338ca, #0369a1);
}
.bilah-teks { flex: 1; min-width: 0; font-weight: 700; font-size: 0.9rem; line-height: 1.25; color: var(--text); }
.bilah-teks small { display: block; font-weight: 600; font-size: 0.82rem; color: var(--text-3); }
.bilah-lanjut {
    min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 12px; flex-shrink: 0; border: 0;
    background: linear-gradient(135deg, #4338ca, #0369a1); color: #fff; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.bilah-lanjut:focus-visible { outline: 3px solid rgba(79,70,229,0.5); outline-offset: 2px; }

/* ---------- Halaman sukses + konfirmasi WhatsApp ---------- */
.kolom-selesai { width: 100%; max-width: 860px; margin: 0 auto; padding-top: 22px; margin-bottom: 22px; display: flex; flex-direction: column; gap: 18px; }
.kartu {
    position: relative; border-radius: 24px; padding: 22px; background: var(--kaca-kuat); border: 1px solid rgba(var(--acc),0.30);
    box-shadow: var(--bayang); animation: naik 0.5s cubic-bezier(.2,.7,.2,1) backwards;
}
.kartu::before {
    content: ""; position: absolute; top: 0; left: 22px; right: 22px; height: 3px; border-radius: 3px; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(var(--acc),0.95), transparent);
}
.kartu-hasil { --acc: 16,185,129; --ink: #065f46; background: linear-gradient(165deg, rgba(16,185,129,0.18) 0%, rgba(255,255,255,0.96) 62%), #fff; }
.kartu-hasil .pesan-sistem { margin-top: 6px; }
/* panel judul halaman sukses: ringkas (tanpa jam/EKG) supaya kartu WhatsApp langsung terlihat */
.komando-selesai { grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; padding: 20px 24px 22px; }
.komando-selesai .judul { margin-top: 8px; }
.komando-selesai .j-kecil { font-size: 1.1rem; font-weight: 700; color: var(--text); letter-spacing: 0.01em; }
.komando-selesai .j-besar { font-size: clamp(1.35rem, 2.6vw, 2rem); }
.hasil-kepala { display: flex; align-items: center; gap: 16px; }
.cek-besar {
    width: 60px; height: 60px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; color: #fff;
    background: linear-gradient(135deg, #059669, #047857); box-shadow: 0 12px 26px rgba(5,150,105,0.35);
}
.cek-besar svg { width: 30px; height: 30px; }
.label-atas { font-family: var(--hud); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
.kartu h2 { font-size: 1.35rem; font-weight: 700; line-height: 1.25; color: var(--text); }
.pesan-sistem { margin-top: 12px; font-weight: 600; color: #065f46; }
.ringkas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; margin-top: 16px; }
.ringkas div { padding: 10px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--line); min-width: 0; }
.ringkas dt { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.ringkas dd { font-size: 1.02rem; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.kartu-wa { --acc: 4,120,87; --ink: #065f46; border-width: 2px; border-color: rgba(4,120,87,0.42); }
.kartu-wa p { color: var(--text-2); }
.kartu-wa > p + p { margin-top: 8px; }
.btn-wa {
    display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 60px; margin: 16px 0 6px;
    padding: 0 22px; border-radius: 16px; font-weight: 700; font-size: 1.08rem; line-height: 1.25; color: #fff; text-decoration: none;
    background: linear-gradient(135deg, #047857 0%, #065f46 100%); box-shadow: 0 14px 30px rgba(4,120,87,0.35);
    transition: transform 0.2s, box-shadow 0.2s;
}
.btn-wa svg { width: 28px; height: 28px; flex-shrink: 0; }
.btn-wa:hover { transform: translateY(-2px); box-shadow: 0 18px 34px rgba(4,120,87,0.42); }
.btn-wa:focus-visible { outline: 3px solid rgba(4,120,87,0.55); outline-offset: 3px; }
.hitung {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 12px; margin-top: 4px;
    font-weight: 600; color: var(--text-2); text-align: center;
}
.hitung b { font-family: var(--hud); color: #065f46; }
.batal {
    min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2); background: #fff; color: var(--text-2);
    font-weight: 700; cursor: pointer;
}
.batal:hover { border-color: rgba(4,120,87,0.55); color: #065f46; }
.batal:focus-visible { outline: 3px solid rgba(4,120,87,0.5); outline-offset: 2px; }
.ket-wa { margin-top: 12px; font-size: 0.9rem; color: var(--text-3) !important; }
.ket-wa b { color: var(--text); }
.pratinjau { margin-top: 14px; border-radius: 14px; border: 1px solid var(--line); background: #fff; }
.pratinjau summary {
    min-height: 44px; display: flex; align-items: center; padding: 0 14px; cursor: pointer; font-weight: 700; color: var(--text-2);
    list-style-position: inside;
}
.pratinjau summary:focus-visible { outline: 3px solid rgba(4,120,87,0.5); outline-offset: 2px; border-radius: 14px; }
.pratinjau pre {
    margin: 0 14px 14px; padding: 12px 14px; border-radius: 12px; background: #f0fdf4; border: 1px solid rgba(16,185,129,0.35);
    white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; font-size: 0.92rem; color: var(--text); line-height: 1.5;
}
.kartu-alur { --acc: 99,102,241; --ink: #4338ca; }
.alur { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.alur li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; }
.alur .no {
    width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-family: var(--hud); font-weight: 700;
    font-size: 0.9rem; color: var(--indigo-ink); background: rgba(99,102,241,0.12); border: 1px solid rgba(99,102,241,0.35);
}
.alur li.beres .no { background: #047857; border-color: #047857; color: #fff; }
.alur li.aktif .no { background: linear-gradient(135deg, #4338ca, #0369a1); border-color: transparent; color: #fff; }
.alur b { display: block; color: var(--text); }
.alur span { display: block; font-size: 0.9rem; color: var(--text-3); }
.catatan { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: #f8fafc; border: 1px solid var(--line); font-size: 0.9rem; color: var(--text-2); }
.aksi-selesai { display: flex; justify-content: center; }

.kaki {
    margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line);
    text-align: center; font-size: 0.86rem; color: var(--text-3);
}

@keyframes sapu { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@keyframes denyut {
    0% { box-shadow: 0 0 0 0 rgba(16,185,129,0.55); }
    70% { box-shadow: 0 0 0 9px rgba(16,185,129,0); }
    100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}
@keyframes putar { to { transform: rotate(360deg); } }
@keyframes napas { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.92); opacity: 0.85; } }
@keyframes sapu-ekg {
    from { -webkit-mask-position: -39% 0; mask-position: -39% 0; }
    to { -webkit-mask-position: 139% 0; mask-position: 139% 0; }
}
@keyframes naik { from { opacity: 0; transform: translateY(14px); } }
@keyframes muncul { from { opacity: 0; transform: translateY(-6px); } }
@keyframes sorot {
    0% { box-shadow: 0 0 0 0 rgba(245,158,11,0); }
    25% { box-shadow: 0 0 0 6px rgba(245,158,11,0.45); }
    100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); }
}

/* Laptop & tablet mendatar: panel progres menempel di kanan */
@media (min-width: 1025px) {
    .tata { grid-template-columns: minmax(0, 1fr) minmax(300px, 340px); }
    .panel-progres {
        display: block; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto;
        overscroll-behavior: contain; scrollbar-width: thin;
    }
}
@media (min-width: 1200px) {
    .tata { grid-template-columns: minmax(0, 1fr) 370px; gap: 24px; }
}
/* Laptop berlayar pendek (mis. 1280x599 pada skala 150 %): panel dipadatkan */
@media (min-width: 1025px) and (max-height: 720px) and (hover: hover) {
    .panel-progres { padding: 16px 18px 18px; }
    .pp-ringkas { margin-top: 10px; gap: 14px; }
    .cincin { width: 70px; height: 70px; }
    .cincin-angka { font-size: 1.05rem; }
    .pp-ket { display: none; }
    .daftar-bagian { margin-top: 10px; gap: 4px; }
    .daftar-bagian button { min-height: 38px; padding: 3px 8px; }
    .daftar-bagian .no { width: 28px; height: 28px; border-radius: 9px; }
    .kurang, .siap { margin-top: 12px; padding: 12px; }
    .siap .tombol { margin-top: 8px; min-height: 42px; }
}
@media (max-width: 1024px) {
    .mode-isi .bilah { display: flex; }
    .mode-isi .shell { padding-bottom: 100px; }
}
@media (max-width: 760px) {
    .komando { grid-template-columns: 1fr; padding: 22px 20px 0; }
    .komando.komando-selesai { grid-template-columns: auto minmax(0, 1fr); padding: 18px 18px 20px; }
    .monitor { margin-top: 18px; }
    .ekg { margin-left: -20px; margin-right: -20px; }
}
@media (max-width: 640px) {
    .modul { padding: 18px 16px 20px; }
    .modul-kepala { flex-wrap: wrap; }
    .modul-judul { flex-basis: calc(100% - 64px); }
    .modul-kepala .tanda { order: 3; margin-left: 64px; }
    .actions { flex-direction: column-reverse; align-items: stretch; }
    .btn { width: 100%; }
    .status-kirim { justify-content: center; text-align: center; }
    .kartu { padding: 18px 16px; }
    .hasil-kepala { align-items: flex-start; }
    .cek-besar { width: 52px; height: 52px; }
    input[type="text"], input[type="date"], input[type="number"], select, textarea { font-size: 16px; }
}
@media (max-width: 560px) {
    .pil-versi .pil-teks { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .pil-versi { width: 44px; padding: 0; justify-content: center; }
    .brand-text strong { font-size: 0.85rem; letter-spacing: 0.1em; }
    .brand-text span { letter-spacing: 0.12em; }
    .mode-isi .langkah { display: none; }
    .lead { font-size: 0.95rem; }
    .komando { padding: 18px 16px 0; }
    .monitor { margin-top: 14px; padding: 10px 14px 12px; }
    .ekg { margin-left: -16px; margin-right: -16px; margin-top: 14px; }
    .brand-sub-2 { display: none; }
    .kartu h2 { font-size: 1.2rem; }
    .btn-wa { font-size: 1rem; min-height: 58px; padding: 0 16px; }
    .komando.komando-selesai { padding: 16px 16px 18px; column-gap: 14px; }
}
@media (max-width: 400px) {
    .jam { font-size: 1.5rem; }
    .emblem { width: 56px; height: 56px; }
    .monitor-isi { gap: 12px; }
    .monitor-label { letter-spacing: 0.1em; }
    .brand-logo { width: 40px; height: 40px; }
    .brand-logo img { width: 32px; height: 32px; }
    .modul-kepala .tanda { margin-left: 0; }
    .checkbox-group label { padding: 8px 13px; }
    .komando-selesai .cek-besar { width: 44px; height: 44px; }
    .komando-selesai .cek-besar svg { width: 24px; height: 24px; }
    .komando-selesai .j-besar { font-size: 1.15rem; }
    .komando-selesai .j-kecil { font-size: 1rem; }
}
@media (max-width: 359px) {
    .brand { min-width: 44px; }
    .brand-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 1600px) {
    html { font-size: 17px; }
    .shell { max-width: 1480px; }
}
/* Tablet tegak (termasuk mode "Situs desktop" 980 px yang dikecilkan): huruf dasar dinaikkan */
@media (hover: none) and (pointer: coarse) and (orientation: portrait) and (min-width: 700px) {
    html { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .ekg-dasar path { stroke: rgba(225,29,72,0.5); }
}
@media print {
    .latar, .ekg, .bilah, .monitor, .panel-progres, .btn, .btn-wa, .hitung { display: none !important; }
    body { background: #fff; }
    .modul, .komando, .kirim, .alert, .kartu { box-shadow: none; animation: none; }
    .tata { display: block; }
}

/* =====================================================================
   BAGIAN 2 — TAMBAHAN FORMULIR LAMARAN KERJA (31-10-2026)
   ===================================================================== */
input[type="email"], input[type="tel"] {
    display: block; width: 100%; min-width: 0; min-height: 48px; padding: 11px 14px;
    border-radius: 14px; border: 1px solid var(--line-2); background: #fff;
    font-size: 1rem; font-weight: 600; color: var(--text); line-height: 1.35;
    transition: border-color 0.2s, box-shadow 0.2s;
}
input[type="email"]:hover, input[type="tel"]:hover { border-color: rgba(var(--acc),0.55); }
input[type="email"]:focus, input[type="tel"]:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(var(--acc),0.18); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: #be123c !important; box-shadow: 0 0 0 3px rgba(225,29,72,0.12); }
.checkbox-group[aria-invalid="true"] label, .upload-area[aria-invalid="true"], .kamera[aria-invalid="true"] { border-color: #be123c !important; }
.fg-galat {
    display: flex; align-items: flex-start; gap: 6px; margin-top: 7px; font-size: 0.88rem; font-weight: 700; color: #be123c; line-height: 1.4;
}
.fg-galat::before {
    content: "!"; flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; background: #e11d48; color: #fff;
    font-size: 0.75rem; display: grid; place-items: center; margin-top: 1px;
}
.hp-jebakan { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* nominal gaji: awalan Rp */
.rupiah { display: flex; align-items: stretch; }
.rupiah span {
    display: grid; place-items: center; padding: 0 14px; border: 1px solid var(--line-2); border-right: 0; border-radius: 14px 0 0 14px;
    background: rgba(var(--acc),0.10); color: var(--ink); font-weight: 700;
}
.rupiah input { border-radius: 0 14px 14px 0 !important; }

/* kotak unggah berkas (gaya upload-area self_register) */
.modul .upload-area.unggah { padding: 18px; }
.unggah .upload-icon i { font-size: 30px; }
.unggah-nama { margin-top: 8px; font-size: 0.9rem; font-weight: 700; color: #047857; overflow-wrap: anywhere; }

/* ---------- CV diisi langsung ---------- */
.cv-isi { display: flex; flex-direction: column; gap: 18px; }
.cv-grup { padding: 14px; border-radius: 16px; background: rgba(255,255,255,0.88); border: 1px solid rgba(var(--acc),0.28); }
.cv-grup > h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.cv-grup > .ket { margin: 0 0 10px; }
.cv-daftar { display: flex; flex-direction: column; gap: 12px; }
.cv-baris {
    position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 12px 14px;
    padding: 14px; border-radius: 14px; background: rgba(var(--acc),0.05); border: 1px dashed rgba(var(--acc),0.42);
}
.cv-baris .penuh { grid-column: 1 / -1; }
.cv-baris label { display: block; font-size: 0.84rem; font-weight: 700; color: var(--text-2); margin-bottom: 6px; }
.cv-baris .no-baris {
    grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    font-family: var(--hud); font-size: 0.78rem; letter-spacing: 0.14em; color: var(--ink); font-weight: 700;
}
.cv-hapus, .cv-tambah, .btn-kam {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 12px;
    border: 1px solid rgba(var(--acc),0.45); background: #fff; color: var(--ink); font-weight: 700; cursor: pointer;
}
.cv-hapus { min-height: 36px; padding: 0 12px; border-color: rgba(225,29,72,0.4); color: #9f1239; font-family: inherit; letter-spacing: 0; }
.cv-tambah { margin-top: 10px; border-style: dashed; }
.cv-tambah:hover, .btn-kam:hover { background: rgba(var(--acc),0.08); }
.cv-tambah[disabled] { opacity: 0.5; cursor: not-allowed; }
.cv-hapus:focus-visible, .cv-tambah:focus-visible, .btn-kam:focus-visible { outline: 3px solid rgba(var(--acc),0.55); outline-offset: 2px; }

/* ---------- Kamera selfie ---------- */
.kamera {
    display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 18px; align-items: center;
    padding: 16px; border-radius: 18px; border: 2px dashed rgba(var(--acc),0.45); background: rgba(255,255,255,0.92);
}
.kamera.terisi { border-style: solid; border-color: rgba(16,185,129,0.6); background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(255,255,255,0.95)); }
.kamera-layar {
    position: relative; aspect-ratio: 3 / 4; width: 100%; border-radius: 16px; overflow: hidden;
    background: linear-gradient(160deg, rgba(var(--acc),0.16), rgba(var(--acc),0.05)); border: 1px solid rgba(var(--acc),0.3);
    display: grid; place-items: center; color: var(--ink);
}
.kamera-layar video, .kamera-layar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kamera-layar video { transform: scaleX(-1); }
.kamera-layar .kosong { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px; text-align: center; font-weight: 600; font-size: 0.9rem; }
.kamera-layar .kosong i { font-size: 38px; }
.kamera-bingkai {
    position: absolute; inset: 12% 18% 22%; border: 2px dashed rgba(255,255,255,0.85); border-radius: 50% / 45%;
    pointer-events: none; box-shadow: 0 0 0 999px rgba(15,23,42,0.18);
}
.kamera-teks h3 { font-size: 1rem; font-weight: 700; color: var(--text); }
.kamera-teks ul { margin: 8px 0 12px 18px; font-size: 0.9rem; color: var(--text-2); }
.kamera-tombol { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-kam.utama { background: linear-gradient(135deg, #4338ca, #0369a1); color: #fff; border-color: transparent; box-shadow: 0 8px 18px rgba(67,56,202,0.28); }
.btn-kam.utama:hover { background: linear-gradient(135deg, #3730a3, #075985); }
.kamera-pesan { margin-top: 10px; font-size: 0.88rem; font-weight: 600; color: var(--text-2); }
.kamera-pesan.galat { color: #be123c; }
.kamera-pesan.ok { color: #047857; }

/* ---------- Pernyataan + progres unggah ---------- */
.cek-setuju { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; cursor: pointer; font-size: 0.92rem; color: var(--text-2); line-height: 1.55; }
.cek-setuju input { width: 22px; height: 22px; margin-top: 2px; accent-color: #4338ca; cursor: pointer; }
.progres-unggah { display: flex; flex-direction: column; gap: 6px; }
.progres-batang { height: 10px; border-radius: 999px; background: rgba(99,102,241,0.14); overflow: hidden; }
.progres-batang i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #4338ca, #0ea5e9, #10b981); transition: width 0.2s; }
.progres-unggah span { font-size: 0.88rem; font-weight: 700; color: var(--indigo-tua); text-align: right; }
.tutup-info { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: #fff7ed; border: 1px solid rgba(234,88,12,0.4); color: #9a3412; font-weight: 600; font-size: 0.9rem; }
.noscript-info { margin: 18px 0; padding: 16px 18px; border-radius: 16px; background: #fff1f2; border: 1px solid rgba(225,29,72,0.45); color: #9f1239; font-weight: 700; }
.tautan-kembali {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2);
    background: #fff; color: var(--text-2); font-weight: 700; text-decoration: none; font-size: 0.92rem;
}
.tautan-kembali:hover { border-color: rgba(79,70,229,0.55); color: var(--indigo-ink); }

@media (max-width: 640px) {
    .kamera { grid-template-columns: 1fr; }
    .kamera-layar { max-width: 260px; margin: 0 auto; }
    .kamera-tombol .btn-kam { flex: 1 1 auto; }
    input[type="email"], input[type="tel"] { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .progres-batang i { transition: none; } }