✏️ Editing: index.html

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="theme-color" content="#0A1628">
<title>STAR4Hire — TND Readiness Test</title>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<style>
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;font-family:'Plus Jakarta Sans',sans-serif;background:#0A1628;color:#F0F4F8;overflow-x:hidden}

:root{
  --navy:#0A1628;--navy2:#0E1F3C;--teal:#00C2A8;--teal2:#00A896;
  --gold:#F0B429;--red:#E05252;--green:#2ECC71;--purple:#8B5CF6;
  --muted:#7A9BB5;--white:#F0F4F8;--card:rgba(255,255,255,0.05);
  --border:rgba(255,255,255,0.1);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}

/* ── SCREENS ── */
.screen{display:none;min-height:100dvh;flex-direction:column}
.screen.active{display:flex}

/* ══════════════ INTRO ══════════════ */
#s-intro{
  background:linear-gradient(160deg,#0A1628 0%,#0E2040 50%,#0A1628 100%);
  padding:0;align-items:center;justify-content:center;
  text-align:center;position:relative;overflow:hidden;
}
#s-intro::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 70% 50% at 30% 20%,rgba(0,194,168,.12) 0%,transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 80%,rgba(240,180,41,.07) 0%,transparent 55%);
}
.intro-inner{
  position:relative;z-index:1;
  width:100%;max-width:420px;
  min-height:100dvh;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:48px 24px calc(32px + env(safe-area-inset-bottom,0px));
}
.brand-tag{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(0,194,168,.12);border:1px solid rgba(0,194,168,.3);
  border-radius:100px;padding:6px 16px;font-size:11px;
  color:var(--teal);letter-spacing:.08em;font-weight:700;margin-bottom:20px;
}
.intro-title{font-size:clamp(32px,9vw,52px);font-weight:900;line-height:1.05;margin-bottom:10px}
.intro-title em{color:var(--teal);font-style:normal}
.intro-sub{font-size:14px;color:var(--muted);line-height:1.65;max-width:320px;margin:0 auto 20px}
.pillars-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:20px}
.pillar-chip{
  background:var(--card);border:1px solid var(--border);border-radius:10px;
  padding:9px 11px;font-size:12px;color:var(--muted);text-align:left;
  display:flex;align-items:center;gap:7px;
}
.pillar-chip span{width:5px;height:5px;border-radius:50%;background:var(--teal);flex-shrink:0}
.stats-row{display:flex;justify-content:center;gap:24px;margin-bottom:0}
.stat{text-align:center}
.stat-num{font-size:24px;font-weight:900;color:var(--teal)}
.stat-lbl{font-size:11px;color:var(--muted);margin-top:2px}
.intro-cta{width:100%}
.btn-start{
  width:100%;background:linear-gradient(135deg,var(--teal),#008F7A);
  color:var(--navy);font-weight:800;font-size:17px;border:none;
  border-radius:16px;padding:18px;cursor:pointer;letter-spacing:.01em;
  box-shadow:0 8px 32px rgba(0,194,168,.35);font-family:inherit;
  transition:transform .2s,box-shadow .2s;
}
.btn-start:active{transform:scale(.97)}
.est{color:var(--muted);font-size:12px;margin-top:10px}

/* ══════════════ PROGRESS BAR ══════════════ */
#topbar{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(10,22,40,.92);backdrop-filter:blur(16px);
  padding:12px 20px 10px;display:none;
}
#topbar.show{display:block}
.topbar-row{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.tb-logo{font-size:13px;font-weight:800;color:var(--teal);white-space:nowrap}
.tb-section{font-size:11px;color:var(--muted);margin-left:auto;white-space:nowrap}
.tb-count{font-size:11px;color:var(--white);font-weight:700;white-space:nowrap}
.progress-track{height:3px;background:rgba(255,255,255,.1);border-radius:100px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--teal),var(--gold));border-radius:100px;transition:width .5s ease}

/* ══════════════ QUESTIONS ══════════════ */
#s-q{padding:68px 0 110px;align-items:center;min-height:100dvh}
.q-page{
  width:100%;max-width:560px;padding:0 20px;
  animation:slideIn .3s ease;
}
@keyframes slideIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.sec-badge{
  display:inline-flex;align-items:center;gap:6px;
  border-radius:100px;padding:5px 14px;font-size:11px;
  font-weight:700;letter-spacing:.06em;margin-bottom:14px;
}
.q-num{font-size:12px;color:var(--muted);margin-bottom:8px;font-weight:500}
.q-text{font-size:clamp(17px,4.5vw,22px);font-weight:700;line-height:1.45;margin-bottom:6px}
.q-hint{font-size:13px;color:var(--muted);margin-bottom:24px;line-height:1.6}

/* CHOICE OPTIONS */
.opts{display:flex;flex-direction:column;gap:10px}
.opt{
  background:var(--card);border:1.5px solid var(--border);
  border-radius:14px;padding:14px 16px;cursor:pointer;
  display:flex;align-items:flex-start;gap:12px;
  transition:border-color .2s,background .2s,transform .15s;
  -webkit-user-select:none;user-select:none;
}
.opt:active{transform:scale(.98)}
.opt.sel{border-color:var(--teal);background:rgba(0,194,168,.1)}
.opt-letter{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.15);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:var(--muted);
  transition:all .2s;margin-top:1px;
}
.opt.sel .opt-letter{background:var(--teal);border-color:var(--teal);color:var(--navy)}
.opt-body{flex:1}
.opt-main{font-size:14px;font-weight:600;line-height:1.4;margin-bottom:3px}
.opt-sub{font-size:12px;color:var(--muted);line-height:1.5}

/* SCALE */
.scale-wrap{margin-bottom:8px}
.scale-btns{display:flex;gap:6px}
.scale-btn{
  flex:1;height:48px;border-radius:10px;border:1.5px solid var(--border);
  background:var(--card);color:var(--muted);font-size:15px;font-weight:700;
  cursor:pointer;font-family:inherit;transition:all .2s;
}
.scale-btn:active{transform:scale(.9)}
.scale-btn.sel{border-color:var(--teal);background:rgba(0,194,168,.15);color:var(--teal)}
.scale-labels{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:6px;padding:0 2px}

/* BOTTOM NAV */
.q-bottom{
  position:fixed;bottom:0;left:0;right:0;z-index:90;
  background:rgba(10,22,40,.95);backdrop-filter:blur(16px);
  padding:12px 20px calc(12px + var(--safe-bottom));
  border-top:1px solid var(--border);
  display:none;
}
.q-bottom.show{display:block}
.nav-row{display:flex;gap:10px}
.btn-back{
  flex:0 0 52px;height:52px;border-radius:14px;
  background:var(--card);border:1.5px solid var(--border);
  color:var(--muted);font-size:20px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.btn-back:active{transform:scale(.95)}
.btn-next{
  flex:1;height:52px;border-radius:14px;
  background:linear-gradient(135deg,var(--teal),#008F7A);
  color:var(--navy);font-weight:800;font-size:16px;
  border:none;cursor:pointer;font-family:inherit;
  box-shadow:0 4px 20px rgba(0,194,168,.3);
  transition:opacity .2s,transform .15s;
}
.btn-next:active{transform:scale(.97)}
.btn-next:disabled{opacity:.3;cursor:not-allowed}

/* SECTION INTRO CARD */
.sec-intro-card{
  background:linear-gradient(135deg,rgba(0,194,168,.1),rgba(0,194,168,.04));
  border:1px solid rgba(0,194,168,.25);border-radius:16px;
  padding:20px;margin-bottom:20px;
}
.sec-intro-card h3{font-size:16px;font-weight:700;color:var(--teal);margin-bottom:8px}
.sec-intro-card p{font-size:13px;color:var(--muted);line-height:1.7}

/* ══════════════ LOADING ══════════════ */
#s-load{justify-content:center;align-items:center;text-align:center;padding:40px 24px}
.load-ring{
  width:80px;height:80px;border-radius:50%;margin:0 auto 24px;
  border:3px solid rgba(0,194,168,.2);border-top:3px solid var(--teal);
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.load-title{font-size:22px;font-weight:800;margin-bottom:8px}
.load-sub{font-size:14px;color:var(--muted);margin-bottom:24px}
.load-steps{display:flex;flex-direction:column;gap:8px;max-width:320px;margin:0 auto}
.ls{
  display:flex;align-items:center;gap:10px;padding:10px 14px;
  background:var(--card);border:1px solid var(--border);border-radius:10px;
  font-size:13px;color:var(--muted);
  opacity:0;transform:translateY(6px);transition:all .4s;
}
.ls.show{opacity:1;transform:translateY(0)}
.ls-dot{width:6px;height:6px;border-radius:50%;background:var(--teal);flex-shrink:0}

/* ══════════════ CAPTURE FORM ══════════════ */
#s-cap{padding:40px 20px calc(40px + var(--safe-bottom));align-items:flex-start;justify-content:flex-start;overflow-y:auto}
.cap-wrap{width:100%;max-width:480px}
.cap-icon{font-size:40px;margin-bottom:16px;text-align:center}
.cap-title{font-size:26px;font-weight:900;text-align:center;margin-bottom:8px;line-height:1.2}
.cap-title em{color:var(--teal);font-style:normal}
.cap-sub{font-size:14px;color:var(--muted);text-align:center;line-height:1.7;margin-bottom:28px}
.form-field{margin-bottom:14px}
.field-label{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.05em;margin-bottom:6px;display:block}
.field-label span{color:var(--teal)}
.field-input{
  width:100%;background:rgba(255,255,255,.06);border:1.5px solid var(--border);
  border-radius:12px;padding:14px 16px;color:var(--white);font-size:15px;
  font-family:inherit;outline:none;transition:border-color .2s,background .2s;
  -webkit-appearance:none;
}
.field-input:focus{border-color:var(--teal);background:rgba(0,194,168,.06)}
.field-input::placeholder{color:rgba(255,255,255,.2)}
.field-input.err{border-color:var(--red);background:rgba(224,82,82,.06)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.btn-submit{
  width:100%;background:linear-gradient(135deg,var(--teal),#008F7A);
  color:var(--navy);font-weight:800;font-size:16px;border:none;
  border-radius:16px;padding:18px;cursor:pointer;font-family:inherit;
  box-shadow:0 6px 24px rgba(0,194,168,.35);margin-top:8px;
  transition:transform .2s,opacity .2s;
}
.btn-submit:active{transform:scale(.97)}
.btn-submit:disabled{opacity:.4;cursor:not-allowed}
.cap-privacy{font-size:11px;color:var(--muted);text-align:center;margin-top:14px;line-height:1.6}
.sending-row{display:none;align-items:center;justify-content:center;gap:8px;margin-top:12px;font-size:13px;color:var(--teal)}
.s-dot{width:5px;height:5px;border-radius:50%;background:var(--teal);animation:pulse .8s infinite}
.s-dot:nth-child(2){animation-delay:.15s}.s-dot:nth-child(3){animation-delay:.3s}
@keyframes pulse{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}

/* ══════════════ RESULT ══════════════ */
#s-res{padding:0 0 60px;align-items:center}
.res-wrap{width:100%;max-width:600px;padding:0 16px}

/* RESULT HERO */
.res-hero{
  background:linear-gradient(160deg,var(--navy2),#122040);
  padding:32px 20px 28px;text-align:center;margin-bottom:16px;
  border-bottom:1px solid var(--border);
}
.res-type-badge{
  display:inline-flex;align-items:center;gap:6px;
  border-radius:100px;padding:5px 14px;font-size:11px;
  font-weight:700;letter-spacing:.06em;margin-bottom:14px;
}
.res-name{font-size:clamp(24px,6vw,38px);font-weight:900;line-height:1.1;margin-bottom:4px}
.res-name-en{font-size:13px;color:var(--muted);font-style:italic;margin-bottom:10px}
.res-tagline{font-size:14px;color:rgba(240,244,248,.8);line-height:1.7;margin-bottom:16px;max-width:380px;margin-left:auto;margin-right:auto}
.res-traits{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:16px}
.trait{background:rgba(255,255,255,.08);border:1px solid var(--border);border-radius:100px;padding:5px 12px;font-size:11px}
.overall-badge{
  border-radius:12px;padding:10px 16px;display:inline-flex;
  align-items:center;gap:8px;font-size:13px;font-weight:700;
}

/* SCORE CARDS */
.score-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px;padding:0 16px}
.score-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:14px;padding:14px;text-align:center;
}
.score-num{font-size:28px;font-weight:900;line-height:1}
.score-lbl{font-size:10px;color:var(--muted);margin-top:4px;letter-spacing:.04em;text-transform:uppercase}
.score-bar{height:3px;background:rgba(255,255,255,.1);border-radius:100px;margin-top:10px;overflow:hidden}
.score-fill{height:100%;border-radius:100px}

/* RESULT SECTIONS */
.res-sec{
  background:var(--card);border:1px solid var(--border);
  border-radius:16px;padding:20px;margin:0 16px 12px;
}
.res-sec-hd{font-size:16px;font-weight:800;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.sec-ico{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.res-desc{font-size:14px;color:rgba(240,244,248,.85);line-height:1.8}

/* DEPT CARDS */
.dept-list{display:flex;flex-direction:column;gap:8px}
.dept-item{
  display:flex;align-items:center;gap:12px;
  background:rgba(255,255,255,.03);border:1px solid var(--border);
  border-radius:12px;padding:12px 14px;
}
.dept-item.top{border-color:rgba(0,194,168,.3);background:rgba(0,194,168,.06)}
.dept-emoji{font-size:22px;flex-shrink:0}
.dept-info{flex:1;min-width:0}
.dept-name{font-size:14px;font-weight:700}
.dept-desc{font-size:11px;color:var(--muted);margin-top:2px;line-height:1.4}
.dept-right{text-align:right;flex-shrink:0}
.dept-pct{font-size:20px;font-weight:900}
.dept-bar-wrap{height:3px;background:rgba(255,255,255,.1);border-radius:100px;margin-top:4px;width:56px;overflow:hidden}
.dept-bar-fill{height:100%;border-radius:100px}
.top-tag{font-size:9px;font-weight:700;background:var(--teal);color:var(--navy);border-radius:100px;padding:2px 7px;letter-spacing:.05em}

/* COUNTRY */
.country-list{display:flex;flex-direction:column;gap:8px}
.country-item{
  display:flex;align-items:center;gap:12px;
  background:rgba(255,255,255,.03);border:1px solid var(--border);
  border-radius:12px;padding:12px 14px;
}
.c-rank{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex-shrink:0}
.c-flag{font-size:22px;flex-shrink:0}
.c-info{flex:1;min-width:0}
.c-name{font-size:14px;font-weight:700}
.c-why{font-size:11px;color:var(--muted);margin-top:2px;line-height:1.4}
.c-pct{font-size:20px;font-weight:900;flex-shrink:0}

/* MENTAL GRID */
.mental-list{display:flex;flex-direction:column;gap:8px}
.mental-item{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 12px;background:rgba(255,255,255,.03);
  border-radius:10px;border:1px solid var(--border);
}
.m-dot{width:8px;height:8px;border-radius:50%;margin-top:5px;flex-shrink:0}
.m-body{flex:1}
.m-label{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.03em}
.m-value{font-size:14px;font-weight:800;margin:2px 0}
.m-note{font-size:11px;color:var(--muted);line-height:1.5}

/* WAITING TIMELINE */
.timeline{display:flex;flex-direction:column;gap:0}
.tl-item{display:flex;gap:12px;padding-bottom:16px;position:relative}
.tl-item:not(:last-child)::after{content:'';position:absolute;left:11px;top:24px;bottom:0;width:1px;background:var(--border)}
.tl-dot{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0;border:2px solid;margin-top:2px}
.tl-body{flex:1;padding-top:2px}
.tl-month{font-size:11px;font-weight:700;margin-bottom:3px}
.tl-title{font-size:14px;font-weight:700;margin-bottom:4px}
.tl-desc{font-size:12px;color:var(--muted);line-height:1.6}

/* PARENT */
.parent-card{
  background:rgba(240,180,41,.08);border:1px solid rgba(240,180,41,.2);
  border-radius:14px;padding:16px;margin-bottom:10px;
}
.par-status{font-size:10px;font-weight:700;color:var(--gold);letter-spacing:.08em;margin-bottom:6px}
.par-title{font-size:15px;font-weight:700;margin-bottom:8px}
.par-body{font-size:13px;color:rgba(240,244,248,.8);line-height:1.7}
.msg-box{
  background:rgba(0,194,168,.08);border:1px solid rgba(0,194,168,.2);
  border-radius:14px;padding:16px;margin-bottom:10px;
}
.msg-text{font-size:13px;font-style:italic;line-height:1.8;color:rgba(240,244,248,.9)}
.msg-sig{font-size:12px;color:var(--teal);font-weight:700;font-style:normal;margin-top:8px}
.concern-list{display:flex;flex-direction:column;gap:8px}
.concern{display:flex;gap:10px;align-items:flex-start;padding:10px;background:rgba(255,255,255,.03);border-radius:10px}
.concern-ico{font-size:16px;flex-shrink:0;margin-top:1px}
.concern-title{font-size:13px;font-weight:700;margin-bottom:3px}
.concern-text{font-size:12px;color:var(--muted);line-height:1.5}

/* ALERTS */
.alert{border-radius:12px;padding:12px 14px;margin-bottom:8px;display:flex;gap:10px}
.alert.warn{background:rgba(240,180,41,.1);border:1px solid rgba(240,180,41,.2)}
.alert.good{background:rgba(46,204,113,.1);border:1px solid rgba(46,204,113,.2)}
.alert.info{background:rgba(0,194,168,.1);border:1px solid rgba(0,194,168,.2)}
.alert-ico{font-size:16px;flex-shrink:0}
.alert-txt{font-size:13px;color:rgba(240,244,248,.85);line-height:1.6}

/* CTA */
.res-cta{margin:0 16px;background:linear-gradient(135deg,var(--navy2),#122040);border:1px solid var(--border);border-radius:16px;padding:24px;text-align:center}
.cta-title{font-size:22px;font-weight:900;margin-bottom:8px}
.cta-sub{font-size:13px;color:var(--muted);line-height:1.7;margin-bottom:20px;max-width:360px;margin-left:auto;margin-right:auto}
.btn-wa{
  width:100%;background:linear-gradient(135deg,#25D366,#128C7E);
  color:#fff;font-weight:800;font-size:15px;border:none;
  border-radius:14px;padding:16px;cursor:pointer;font-family:inherit;
  display:flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 4px 20px rgba(37,211,102,.3);margin-bottom:10px;
  transition:transform .2s;
}
.btn-wa:active{transform:scale(.97)}
.btn-restart{
  width:100%;background:transparent;border:1.5px solid var(--border);
  color:var(--muted);border-radius:14px;padding:14px;
  font-size:14px;cursor:pointer;font-family:inherit;
}
.stats-cta{display:flex;justify-content:center;gap:24px;margin-top:16px;flex-wrap:wrap}
.stat-c{text-align:center}
.stat-c-num{font-size:20px;font-weight:900;color:var(--teal)}
.stat-c-lbl{font-size:10px;color:var(--muted);margin-top:2px}

/* TOAST */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(120px);
  background:linear-gradient(135deg,#1A6B3A,#00A896);color:#fff;
  border-radius:100px;padding:12px 24px;font-size:13px;font-weight:700;
  display:flex;align-items:center;gap:8px;z-index:999;
  box-shadow:0 8px 32px rgba(0,194,168,.4);white-space:nowrap;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);
  font-family:inherit;
}
.toast.show{transform:translateX(-50%) translateY(0)}

@media(min-width:481px){
  .score-grid{grid-template-columns:repeat(3,1fr)}
  .form-row{grid-template-columns:1fr 1fr}
  .dept-item{flex-wrap:nowrap}
}
@media(max-width:360px){
  .scale-btn{font-size:13px}
  .intro-title{font-size:28px}
}

select.field-input{
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237A9BB5' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
  padding-right:40px;cursor:pointer;
}
select.field-input option{background:#0E1F3C;color:#F0F4F8}
.elig-wrap{margin:16px 0;display:flex;flex-direction:column;gap:8px}
.elig-card{
  border-radius:12px;padding:12px 14px;
  display:flex;align-items:flex-start;gap:10px;
  animation:fadeIn .3s ease;
}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.elig-card.ok{background:rgba(46,204,113,.1);border:1px solid rgba(46,204,113,.25)}
.elig-card.warn{background:rgba(240,180,41,.1);border:1px solid rgba(240,180,41,.25)}
.elig-card.no{background:rgba(224,82,82,.1);border:1px solid rgba(224,82,82,.25)}
.elig-ico{font-size:16px;flex-shrink:0;margin-top:1px}
.elig-body{flex:1}
.elig-prog{font-size:11px;font-weight:700;letter-spacing:.06em;margin-bottom:3px}
.elig-status{font-size:13px;font-weight:700;margin-bottom:2px}
.elig-note{font-size:11px;color:var(--muted);line-height:1.5}
.elig-title{font-size:13px;font-weight:700;color:var(--white);margin-bottom:8px}

/* ── WA GATE ── */
#s-wa{
  justify-content:center;align-items:center;
  padding:40px 24px calc(40px + var(--safe-bottom));
  background:linear-gradient(160deg,#0A1628 0%,#0E2040 60%,#0A1628 100%);
}
.wa-gate-wrap{width:100%;max-width:440px;text-align:center}
.wa-gate-icon{
  width:80px;height:80px;border-radius:50%;
  background:linear-gradient(135deg,#25D366,#128C7E);
  display:flex;align-items:center;justify-content:center;
  font-size:36px;margin:0 auto 20px;
  box-shadow:0 8px 32px rgba(37,211,102,.4);
}
.wa-gate-title{font-size:26px;font-weight:900;margin-bottom:10px;line-height:1.2}
.wa-gate-title em{color:var(--teal);font-style:normal}
.wa-gate-sub{font-size:14px;color:var(--muted);line-height:1.7;margin-bottom:28px;max-width:360px;margin-left:auto;margin-right:auto}
.wa-preview{
  background:rgba(37,211,102,.08);border:1px solid rgba(37,211,102,.2);
  border-radius:16px;padding:16px;margin-bottom:24px;text-align:left;
}
.wa-preview-title{font-size:11px;font-weight:700;color:#25D366;letter-spacing:.06em;margin-bottom:10px}
.wa-preview-row{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:13px;color:rgba(240,244,248,.8)}
.wa-preview-row:last-child{margin-bottom:0}
.wa-preview-dot{width:5px;height:5px;border-radius:50%;background:#25D366;flex-shrink:0}
.btn-wa-gate{
  width:100%;background:linear-gradient(135deg,#25D366,#128C7E);
  color:#fff;font-weight:900;font-size:18px;border:none;
  border-radius:18px;padding:20px;cursor:pointer;font-family:inherit;
  display:flex;align-items:center;justify-content:center;gap:10px;
  box-shadow:0 8px 32px rgba(37,211,102,.45);margin-bottom:12px;
  transition:transform .2s,box-shadow .2s;
  animation:pulse-wa 2s ease-in-out infinite;
}
@keyframes pulse-wa{
  0%,100%{box-shadow:0 8px 32px rgba(37,211,102,.45)}
  50%{box-shadow:0 12px 48px rgba(37,211,102,.7)}
}
.btn-wa-gate:active{transform:scale(.97);animation:none}
.btn-skip-wa{
  width:100%;background:transparent;border:none;
  color:var(--muted);font-size:13px;cursor:pointer;
  font-family:inherit;padding:10px;text-decoration:underline;
  text-underline-offset:3px;
}
.wa-note{font-size:11px;color:var(--muted);margin-top:8px;line-height:1.6}

</style>
</head>
<body>

<div class="screen active" id="s-intro">
  <div class="intro-inner">
    
    <div>
      <div class="brand-tag">✦ STAR4HIRE GLOBAL CAREER PATHWAYS</div>
      <h1 class="intro-title">Kenali Dirimu<br><em>Sebelum Melangkah</em></h1>
      <p class="intro-sub">Tes kepribadian komprehensif khusus peserta TND — 40 pertanyaan, 12 menit.</p>
      <div class="pillars-grid">
        <div class="pillar-chip"><span></span>Kesiapan Mental</div>
        <div class="pillar-chip"><span></span>Bidang Terbaik</div>
        <div class="pillar-chip"><span></span>Negara Cocok</div>
        <div class="pillar-chip"><span></span>Masa Tunggu</div>
        <div class="pillar-chip"><span></span>Orang Tua</div>
        <div class="pillar-chip"><span></span>Karier Global</div>
      </div>
      <div class="stats-row">
        <div class="stat"><div class="stat-num">40</div><div class="stat-lbl">Pertanyaan</div></div>
        <div class="stat"><div class="stat-num">8</div><div class="stat-lbl">Dimensi</div></div>
        <div class="stat"><div class="stat-num">12'</div><div class="stat-lbl">Estimasi</div></div>
      </div>
    </div>
    
    <div class="intro-cta">
      <button class="btn-start" onclick="startTest()">Mulai Test →</button>
      <p class="est">Tidak ada jawaban benar atau salah</p>
    </div>
  </div>
</div>

<div id="topbar">
  <div class="topbar-row">
    <span class="tb-logo">STAR4Hire</span>
    <span class="tb-section" id="tbSection">Bagian 1</span>
    <span class="tb-count" id="tbCount">0/40</span>
  </div>
  <div class="progress-track"><div class="progress-fill" id="progFill" style="width:0%"></div></div>
</div>

<div class="screen" id="s-q">
  <div class="q-page" id="qPage"></div>
</div>
<div class="q-bottom" id="qBottom">
  <div class="nav-row">
    <button class="btn-back" id="btnBack" onclick="nav(-1)">←</button>
    <button class="btn-next" id="btnNext" disabled onclick="nav(1)">Lanjut →</button>
  </div>
</div>

<div class="screen" id="s-load">
  <div class="load-ring"></div>
  <div class="load-title">Menganalisa…</div>
  <div class="load-sub">Memproses 40 jawabanmu</div>
  <div class="load-steps">
    <div class="ls" id="ls0"><div class="ls-dot"></div>Mengukur ketangguhan mental</div>
    <div class="ls" id="ls1"><div class="ls-dot"></div>Mencocokkan profil departemen</div>
    <div class="ls" id="ls2"><div class="ls-dot"></div>Menganalisa kecocokan negara</div>
    <div class="ls" id="ls3"><div class="ls-dot"></div>Memetakan dinamika keluarga</div>
    <div class="ls" id="ls4"><div class="ls-dot"></div>Menyusun rekomendasi</div>
  </div>
</div>

<div class="screen" id="s-cap">
  <div class="cap-wrap">
    <div class="cap-icon">🎯</div>
    <h2 class="cap-title">Hasil Kamu<br><em>Sudah Siap!</em></h2>
    <p class="cap-sub">Masukkan data diri untuk melihat analisa lengkap. Career Consultant akan menerima rangkuman hasilmu.</p>
    <div class="form-row">
      <div class="form-field">
        <label class="field-label">Nama Lengkap <span>*</span></label>
        <input type="text" id="f-name" class="field-input" placeholder="Nama kamu" autocomplete="name">
      </div>
      <div class="form-field">
        <label class="field-label">Usia</label>
        <input type="number" id="f-age" class="field-input" placeholder="Usia (opsional)" min="16" max="40" inputmode="numeric" oninput="checkEligibility()">
      </div>
    </div>
    <div class="form-field">
      <label class="field-label">Nomor WhatsApp <span>*</span></label>
      <input type="tel" id="f-wa" class="field-input" placeholder="08xx-xxxx-xxxx" inputmode="tel" autocomplete="tel">
    </div>
    <div class="form-field">
      <label class="field-label">Email <span>*</span></label>
      <input type="email" id="f-email" class="field-input" placeholder="email@kamu.com" inputmode="email" autocomplete="email">
    </div>
    <div class="form-row">
      <div class="form-field">
        <label class="field-label">Kota</label>
        <input type="text" id="f-city" class="field-input" placeholder="Kota domisili" autocomplete="address-level2">
      </div>
      <div class="form-field">
        <label class="field-label">Institusi</label>
        <input type="text" id="f-school" class="field-input" placeholder="Kampus/sekolah">
      </div>
    </div>
    <div class="form-field">
      <label class="field-label">Pendidikan Terakhir</label>
      <select id="f-edu" class="field-input" onchange="checkEligibility()">
        <option value="">-- Pilih pendidikan terakhir --</option>
        <option value="SMA">SMA / SMK / Sederajat</option>
        <option value="D1">D1</option>
        <option value="D2">D2</option>
        <option value="D3">D3 (Diploma)</option>
        <option value="S1">S1 (Sarjana)</option>
        <option value="S2">S2 (Magister)</option>
        <option value="S3">S3 (Doktor)</option>
      </select>
    </div>
    <div class="form-field">
      <label class="field-label">Tahun Lulus</label>
      <input type="number" id="f-gradyear" class="field-input" placeholder="Contoh: 2023" min="2000" max="2030" inputmode="numeric" oninput="checkEligibility()">
    </div>
    <button class="btn-submit" id="btnSubmit" onclick="doSubmit()">Lihat Hasil Saya →</button>
    <div class="sending-row" id="sendingRow">
      <div class="s-dot"></div><div class="s-dot"></div><div class="s-dot"></div>
      <span>Memproses…</span>
    </div>
    <div id="eligWrap" class="elig-wrap" style="display:none"></div>
    <p class="cap-privacy">🔒 Data kamu hanya digunakan oleh tim STAR4Hire untuk konsultasi karier.</p>
  </div>
</div>

<div class="screen" id="s-wa">
  <div class="wa-gate-wrap">
    <div class="wa-gate-icon">💬</div>
    <h2 class="wa-gate-title">Hasil Kamu<br><em>Sudah Siap!</em></h2>
    <div class="wa-gate-sub">Sebelum melihat hasil lengkapmu, kirim rangkuman ke Career Consultant STAR4Hire. Mereka akan menghubungimu untuk membantu langkah selanjutnya.</div>
    <div class="wa-preview">
      <div class="wa-preview-title">📋 YANG AKAN DIKIRIM KE CAREER CONSULTANT:</div>
      <div class="wa-preview-row"><div class="wa-preview-dot"></div>Nama, WA, email, usia, pendidikan</div>
      <div class="wa-preview-row"><div class="wa-preview-dot"></div>Tipe kepribadian & status kesiapan</div>
      <div class="wa-preview-row"><div class="wa-preview-dot"></div>Skor 5 dimensi kesiapan</div>
      <div class="wa-preview-row"><div class="wa-preview-dot"></div>Departemen & negara yang paling cocok</div>
      <div class="wa-preview-row"><div class="wa-preview-dot"></div>Kelayakan program per negara</div>
    </div>
    <button class="btn-wa-gate" onclick="sendWAandContinue()">
      <span style="font-size:22px">💬</span>
      Kirim ke Career Consultant & Lihat Hasil
    </button>
    <button class="btn-skip-wa" onclick="skipWAandContinue()">
      Lewati, langsung lihat hasil →
    </button>
    <p class="wa-note">🔒 Pesanmu hanya berisi hasil test. Tidak ada data sensitif yang dikirim tanpa sepengetahuanmu.</p>
  </div>
</div>

<div class="screen" id="s-res">
  <div class="res-wrap" id="resWrap"></div>
</div>

<div class="toast" id="toast">✅ Hasil terkirim ke Career Consultant!</div>

// ═══════════════════════════════════════════════
// STATE
// ═══════════════════════════════════════════════
let currentSection = 0;
let currentQ = 0;
let answers = {};
let scores = {
  resilience:0, adaptability:0, integrity:0, leadership:0,
  service_heart:0, professionalism:0, social:0, self_awareness:0,
  confidence:0, courage:0, cultural_intelligence:0, self_belief:0,
  proactivity:0, self_management:0, financial_prep:0,
  family_support:0, parent_comms:0, independence:0,
  career_vision:0, language_adaptability:0, physical:0,
  FO:0, CUL:0, HK:0, FB:0, SPA:0,
  USA:0, TW:0, AU:0, MY:0, JP:0,
  halal_importance:0, climate_resilience:0,
};
// ═══════════════════════════════════════════════
// SCORE CALCULATION
// ═══════════════════════════════════════════════
function calculateScores() {
  Object.keys(scores).forEach(k => scores[k] = 0);
  flat.forEach(q => {
    const ans = answers[q.id];
    if (ans === undefined) return;
    if (q.type === 'choice') {
      const opt = q.opts[ans];
      if (opt && opt.score) {
        Object.entries(opt.score).forEach(([k,v]) => {
          if (scores[k] !== undefined) scores[k] += v;
        });
      }
    } else if (q.type === 'scale') {
      if (q.key && scores[q.key] !== undefined) scores[q.key] += ans;
    }
  });
}

function getFlatQuestions() {
  let all = [];
  SECTIONS.forEach(s => s.questions.forEach(q => all.push({...q, sectionId:s.id, sectionLabel:s.label, sectionColor:s.color})));
  return all;
}

// ── Global state variables ──
let flat  = getFlatQuestions();
const TOTAL = flat.length;
let qIdx  = 0;
let uData = {};

// ═══════════════════════════════════════════════
// PERSONALITY TYPES
// ═══════════════════════════════════════════════
function getPersonalityType() {
  const r = scores.resilience + scores.adaptability;
  const s = scores.social + scores.confidence + scores.cultural_intelligence;
  const l = scores.leadership + scores.integrity + scores.courage;
  const h = scores.service_heart + scores.professionalism;
  const v = scores.career_vision + scores.self_belief + scores.proactivity;

const maxCat = {r, s, l, h, v};
  const top = Object.entries(maxCat).sort((a,b) => b[1]-a[1])[0][0];

const types = {
    r: {
      name:'The Ritz', nameID:'The Ritz',
      color:'#00C2A8', badge:'💎 The Ritz',
      tagline:'Seperti César Ritz yang membangun empire dari nol — kamu tidak berhenti karena tekanan, kamu tumbuh karenanya.',
      traits:['Ketangguhan mental tinggi','Adaptasi cepat','Tidak mudah menyerah','Tenang di bawah tekanan','Mandiri'],
      description:'César Ritz memulai dari tidak ada apa-apa — anak petani Swiss yang menjadi "King of Hoteliers". Seperti beliau, kepribadianmu didominasi ketangguhan dan kemampuan beradaptasi di kondisi apapun. Di dunia kerja internasional yang keras, karakter seperti ini sangat langka dan sangat dihargai. Kamu bukan orang yang menyerah ketika kondisi sulit — justru tekanan membuatmu semakin fokus dan semakin kuat.',
    },
    s: {
      name:'The Raffles', nameID:'The Raffles',
      color:'#7B61FF', badge:'🌏 The Raffles',
      tagline:'Seperti nama hotel legendaris yang menjadi jembatan budaya Timur dan Barat — kamu adalah magnet yang menyatukan dunia.',
      traits:['Kecerdasan sosial tinggi','Empati kuat','Adaptif lintas budaya','Komunikator natural','Membangun kepercayaan cepat'],
      description:'The Raffles Singapore lahir sebagai titik temu antara dua peradaban berbeda. Seperti semangat itu, kamu memiliki kemampuan luar biasa untuk terhubung dengan orang dari latar belakang manapun. Dalam industri hospitality internasional, kemampuan ini adalah emas murni. Tamu dari seluruh dunia akan merasakan kehangatanmu, dan tim multinasional akan melihat kamu sebagai penyatu yang tidak tergantikan.',
    },
    l: {
      name:'The Schulze', nameID:'The Schulze',
      color:'#F0B429', badge:'👑 The Schulze',
      tagline:'Seperti Horst Schulze yang membangun "Ladies & Gentlemen serving Ladies & Gentlemen" — kamu memimpin bukan dengan jabatan, tapi dengan karakter.',
      traits:['Integritas tinggi','Keberanian berbicara','Visi jangka panjang','Dipercaya orang','Konsisten'],
      description:'Horst Schulze bukan sekadar membangun hotel — ia membangun standar pelayanan yang mengubah industri hospitality dunia selamanya. Seperti beliau, kepribadianmu dipandu oleh prinsip dan nilai yang tidak bisa dikompromikan. Di lingkungan kerja internasional, karakter seperti ini yang akhirnya naik ke posisi kepemimpinan tertinggi — bukan yang paling pintar, tapi yang paling bisa dipercaya.',
    },
    h: {
      name:'The Blanc', nameID:'The Blanc',
      color:'#E05252', badge:'❤️ The Blanc',
      tagline:'Seperti Raymond Blanc yang membuktikan bahwa passion murni bisa mengalahkan semua keterbatasan — hatimu adalah kompasmu.',
      traits:['Service orientation tinggi','Passion yang tulus','Detail-oriented','Konsisten','Penuh perhatian'],
      description:'Raymond Blanc tidak pernah mengenyam pendidikan formal memasak — namun menjadi salah satu chef paling dihormati di dunia, semata karena passion dan dedikasinya yang tak tertandingi. Seperti beliau, kamu memiliki "hospitality DNA" yang sejati. Pelayanan bukan beban bagimu — itu ekspresi dirimu. Ketika tamu tersenyum karena bantuanmu, ada energi dalam dirimu yang terisi kembali.',
    },
    v: {
      name:'The Hilton', nameID:'The Hilton',
      color:'#2ECC71', badge:'🚀 The Hilton',
      tagline:'Seperti Conrad Hilton yang bermimpi membawa Hilton ke seluruh penjuru dunia dari satu hotel kecil di Texas — kamu selalu membangun untuk sesuatu yang jauh lebih besar.',
      traits:['Visi karier jelas','Proaktif','Orientasi tujuan jangka panjang','Mandiri','Ambisius tapi realistis'],
      description:'Conrad Hilton memulai dari satu hotel kecil di Cisco, Texas — dengan mimpi yang dianggap gila oleh semua orang di sekitarnya. Seperti beliau, kepribadianmu selalu berorientasi pada tujuan jangka panjang. Program TND bagimu bukan sekadar kerja di luar negeri — ini adalah batu pertama dari karier internasional besar yang sedang kamu bangun. Setiap langkah hari ini adalah investasi untuk versi terbaikmu 10 tahun ke depan.',
    },
  };
  return types[top] || types.h;
}

// ═══════════════════════════════════════════════
// READINESS SCORES
// ═══════════════════════════════════════════════
function getReadinessScores() {
  const normalize = (val, max) => Math.min(100, Math.round((val / max) * 100));
  return {
    mental: normalize(scores.resilience + scores.adaptability + scores.self_belief, 40),
    professional: normalize(scores.professionalism + scores.integrity + scores.service_heart + scores.cultural_intelligence, 48),
    social: normalize(scores.social + scores.confidence + scores.parent_comms, 36),
    waiting: normalize(scores.proactivity + scores.self_management + scores.financial_prep, 36),
    family: normalize(scores.family_support + scores.parent_comms + scores.independence, 36),
  };
}

// ═══════════════════════════════════════════════
// DEPARTMENT MATCH
// ═══════════════════════════════════════════════
function getDeptMatches() {
  const depts = [
    {
      key:'FO', name:'Front Office', emoji:'🏢',
      desc:'Check-in/out, concierge, guest relations. Butuh energi sosial tinggi dan composure di bawah tekanan.',
      color:'#00C2A8'
    },
    {
      key:'CUL', name:'Culinary', emoji:'👨‍🍳',
      desc:'Dapur berbintang — kreativitas, presisi, dan stamina fisik adalah segalanya.',
      color:'#E05252'
    },
    {
      key:'HK', name:'Housekeeping', emoji:'🛏️',
      desc:'Ketelitian, kecepatan, dan standar sempurna. Kepuasan dari detail yang tidak terlihat tamu.',
      color:'#7B61FF'
    },
    {
      key:'FB', name:'Food & Beverage', emoji:'🍽️',
      desc:'Antara dapur dan tamu — pelayanan makan menjadi pengalaman yang tak terlupakan.',
      color:'#F0B429'
    },
    {
      key:'SPA', name:'Spa & Wellness', emoji:'🧖',
      desc:'Ketenangan, empati, dan sentuhan profesional untuk wellbeing tamu.',
      color:'#2ECC71'
    },
  ];

const maxPossible = { FO:20, CUL:20, HK:16, FB:20, SPA:8 };
  return depts.map(d => ({
    ...d,
    score: Math.min(100, Math.round(((scores[d.key] || 0) / (maxPossible[d.key] || 12)) * 100))
  })).sort((a,b) => b.score - a.score);
}

// ═══════════════════════════════════════════════
// COUNTRY MATCH
// ═══════════════════════════════════════════════
function getEligibility(age, edu, gradyear) {
  const currentYear = new Date().getFullYear();
  const gap = gradyear ? currentYear - gradyear : 0;
  const hasS1 = edu && ['S1','S2','S3'].includes(edu);
  const elig = {};

// Taiwan: daftar 18-20, berangkat maks 22 (asumsi proses ~2 thn)
  if (!age) elig.TW = {ok:true, warn:false, note:''};
  else if (age < 18) elig.TW = {ok:false, warn:false, note:'Minimal usia 18 tahun untuk program Taiwan.'};
  else if (age > 20) elig.TW = {ok:false, warn:false, note:`Usia kamu ${age} tahun. Program Taiwan mensyaratkan pendaftaran maksimal usia 20 tahun agar bisa berangkat sebelum usia 22.`};
  else elig.TW = {ok:true, warn:false, note:`Usia ${age} tahun — eligible untuk program Taiwan ✓`};

// Hong Kong: maks 25
  if (!age) elig.HK = {ok:true, warn:false, note:''};
  else if (age < 18) elig.HK = {ok:false, warn:false, note:'Minimal usia 18 tahun untuk program Hong Kong.'};
  else if (age > 25) elig.HK = {ok:false, warn:false, note:`Usia kamu ${age} tahun. Program Hong Kong mensyaratkan maksimal 25 tahun saat pendaftaran.`};
  else elig.HK = {ok:true, warn:false, note:`Usia ${age} tahun — eligible untuk program Hong Kong ✓`};

// J1 USA: 18-27
  if (!age) elig.USA_J1 = {ok:true, warn:false, note:''};
  else if (age < 18) elig.USA_J1 = {ok:false, warn:false, note:'Minimal usia 18 tahun untuk program J1 USA.'};
  else if (age > 27) elig.USA_J1 = {ok:false, warn:false, note:`Usia kamu ${age} tahun. Program J1 USA mensyaratkan maksimal 27 tahun saat pendaftaran.`};
  else elig.USA_J1 = {ok:true, warn:false, note:`Usia ${age} tahun — eligible untuk J1 USA ✓`};

// F1 USA: harus S1, gap year harus jelas
  if (!edu) elig.USA_F1 = {ok:true, warn:false, note:''};
  else if (!hasS1) elig.USA_F1 = {ok:false, warn:false, note:`Program F1 MBA/Study mensyaratkan minimal S1. Pendidikan terakhirmu: ${edu}.`};
  else if (gap > 3) elig.USA_F1 = {ok:true, warn:true, note:`Gap ${gap} tahun dari kelulusan. F1 memerlukan penjelasan tertulis yang kuat untuk gap year lebih dari 1 tahun. Career Consultant akan membantu menyiapkan dokumen ini.`};
  else if (gap > 1) elig.USA_F1 = {ok:true, warn:true, note:`Gap ${gap} tahun dari kelulusan. Perlu keterangan jelas tentang aktivitas selama gap year untuk aplikasi F1.`};
  else elig.USA_F1 = {ok:true, warn:false, note:`S1 ✓ · Gap ${gap} tahun — eligible untuk F1 USA ✓`};

// PR Pathways Australia: maks 25, gap maks 1 tahun
  if (!age && !gradyear) elig.AU = {ok:true, warn:false, note:''};
  else {
    const ageOk  = !age || age <= 25;
    const gapOk  = !gradyear || gap <= 1;
    if (!ageOk && !gapOk) elig.AU = {ok:false, warn:false, note:`Usia ${age} tahun (maks 25) dan gap ${gap} tahun (maks 1 tahun) — tidak memenuhi syarat PR Pathways Australia.`};
    else if (!ageOk) elig.AU = {ok:false, warn:false, note:`Usia kamu ${age} tahun. PR Pathways Australia mensyaratkan maksimal 25 tahun.`};
    else if (!gapOk) elig.AU = {ok:false, warn:false, note:`Gap ${gap} tahun sejak lulus. PR Pathways mensyaratkan gap maksimal 1 tahun dari kelulusan terakhir.`};
    else elig.AU = {ok:true, warn:false, note:`Usia ${age} thn ✓ · Gap ${gap} thn ✓ — eligible untuk PR Pathways Australia ✓`};
  }

// Malaysia: maks 30
  if (!age) elig.MY = {ok:true, warn:false, note:''};
  else if (age > 30) elig.MY = {ok:false, warn:false, note:`Usia kamu ${age} tahun. Program Malaysia mensyaratkan maksimal 30 tahun.`};
  else elig.MY = {ok:true, warn:false, note:`Usia ${age} tahun — eligible untuk program Malaysia ✓`};

return elig;
}

function getCountryMatches() {
  const countries = [
    {
      key:'TW', flag:'🇹🇼', name:'Taiwan',
      desc:'Hierarki terjaga, kerja keras dihargai, biaya hidup terjangkau, dekat Indonesia.'
    },
    {
      key:'HK', flag:'🇭🇰', name:'Hong Kong',
      desc:'Multikultural ekstrem, standar hospitality dunia kelas pertama, ritme kerja sangat cepat.'
    },
    {
      key:'USA', flag:'🇺🇸', name:'USA (J1/F1)',
      desc:'Direct communication, inisiatif dihargai, exposure paling luas, biaya hidup tinggi.'
    },
    {
      key:'MY', flag:'🇲🇾', name:'Malaysia',
      desc:'Budaya dekat Indonesia, komunitas Muslim kuat, stepping stone sempurna untuk ekspansi.'
    },
    {
      key:'AU', flag:'🇦🇺', name:'Australia',
      desc:'Keseimbangan kerja-hidup, menuju PR pathway, bahasa Inggris murni.'
    },
    {
      key:'JP', flag:'🇯🇵', name:'Jepang',
      desc:'Standar pelayanan tertinggi di dunia, ketelitian dan dedikasi mutlak diperlukan.'
    },
  ];
  const maxPossible = {TW:12,HK:12,USA:12,MY:12,AU:8,JP:8};

// Adjust for halal importance
  if (scores.halal_importance > 5) {
    scores.MY += 6; scores.TW += 2; scores.USA += 2;
    scores.HK -= 2; scores.JP -= 3;
  }

const age      = uData && uData.age ? uData.age : 0;
  const edu      = uData && uData.edu ? uData.edu : '';
  const gradyear = uData && uData.gradyear ? uData.gradyear : 0;
  const elig     = getEligibility(age, edu, gradyear);
  const eligMap  = {TW:'TW', HK:'HK', USA:'USA_J1', AU:'AU', MY:'MY', JP:'JP'};

return countries.map(c => {
    let baseScore = Math.min(100, Math.round(((scores[c.key] || 0) / (maxPossible[c.key] || 8)) * 100));
    const eligKey = eligMap[c.key];
    const e = eligKey ? elig[eligKey] : null;
    if (e && !e.ok) baseScore = 0;
    return {...c, score: baseScore, ineligible: e && !e.ok, eligNote: e ? e.note : ''};
  }).sort((a,b) => b.score - a.score);
}

// ═══════════════════════════════════════════════
// MENTAL READINESS DETAIL
// ═══════════════════════════════════════════════
function getMentalReadiness() {
  const r = getReadinessScores();
  return [
    {
      label:'Toleransi Ambiguitas',
      value: scores.adaptability > 12 ? 'Tinggi ✓' : scores.adaptability > 8 ? 'Sedang' : 'Perlu Dibangun',
      note: scores.adaptability > 12 ? 'Kamu bisa menghadapi ketidakpastian tanpa panik.' : 'Latih kemampuan bersikap tenang saat rencana berubah.',
      color: scores.adaptability > 12 ? '#2ECC71' : scores.adaptability > 8 ? '#F0B429' : '#E05252'
    },
    {
      label:'Kemandirian Emosional',
      value: scores.resilience > 14 ? 'Tinggi ✓' : scores.resilience > 9 ? 'Berkembang' : 'Butuh Perhatian',
      note: scores.resilience > 14 ? 'Kamu bisa menjaga keseimbangan emosi di lingkungan asing.' : 'Kembangkan strategi coping yang tidak bergantung pada orang lain.',
      color: scores.resilience > 14 ? '#2ECC71' : scores.resilience > 9 ? '#F0B429' : '#E05252'
    },
    {
      label:'Kesiapan Finansial',
      value: scores.financial_prep > 8 ? 'Terencana ✓' : scores.financial_prep > 5 ? 'Perlu Detail' : 'Belum Direncanakan',
      note: scores.financial_prep > 8 ? 'Kamu sudah memikirkan aspek finansial dengan serius.' : 'Buat rencana finansial yang konkret sebelum berangkat.',
      color: scores.financial_prep > 8 ? '#2ECC71' : scores.financial_prep > 5 ? '#F0B429' : '#E05252'
    },
    {
      label:'Kekuatan Identitas',
      value: scores.self_belief > 10 ? 'Solid ✓' : scores.self_belief > 6 ? 'Tumbuh' : 'Perlu Dikuatkan',
      note: scores.self_belief > 10 ? 'Kamu tahu siapa kamu dan tidak mudah terpengaruh.' : 'Perkuat keyakinan akan kemampuan dan nilai-nilai dirimu.',
      color: scores.self_belief > 10 ? '#2ECC71' : scores.self_belief > 6 ? '#F0B429' : '#E05252'
    },
    {
      label:'Komunikasi Lintas Budaya',
      value: scores.cultural_intelligence > 8 ? 'Tinggi ✓' : scores.cultural_intelligence > 5 ? 'Berkembang' : 'Perlu Dilatih',
      note: scores.cultural_intelligence > 8 ? 'Kamu bisa beradaptasi dengan norma dan gaya komunikasi berbeda.' : 'Perluas wawasan budaya melalui konten dan interaksi multikultural.',
      color: scores.cultural_intelligence > 8 ? '#2ECC71' : scores.cultural_intelligence > 5 ? '#F0B429' : '#E05252'
    },
    {
      label:'Manajemen Diri',
      value: scores.self_management > 8 ? 'Mandiri ✓' : scores.self_management > 5 ? 'Berkembang' : 'Butuh Struktur',
      note: scores.self_management > 8 ? 'Kamu bisa mengatur diri sendiri tanpa pengawasan eksternal.' : 'Bangun rutinitas harian yang terstruktur mulai dari sekarang.',
      color: scores.self_management > 8 ? '#2ECC71' : scores.self_management > 5 ? '#F0B429' : '#E05252'
    },
  ];
}

// ═══════════════════════════════════════════════
// WAITING PERIOD PLAN
// ═══════════════════════════════════════════════
function getWaitingPlan() {
  const proactive = scores.proactivity > 12;
  const langReady = scores.language_adaptability > 20;
  const financial = scores.financial_prep > 8;

return [
    {
      month:'Bulan 1-2', title:'Persiapan Bahasa & Mental',
      desc: langReady
        ? 'Kamu sudah punya dasar yang baik! Tingkatkan ke level berikutnya — cari tutor online atau language exchange partner dari negara tujuanmu.'
        : 'Mulai kelas bahasa Inggris intensif minimal 5x/minggu. Gunakan aplikasi seperti Duolingo, BBC Learning English, atau ikut kelas GEG STAR4Hire.',
      dot:'#00C2A8', borderColor:'var(--teal3)'
    },
    {
      month:'Bulan 2-3', title:'Upgrade Skill & Portofolio',
      desc: proactive
        ? 'Manfaatkan energi proaktifmu! Cari magang, part-time, atau volunteer di hotel/restoran untuk menambah jam terbang nyata di industri hospitality.'
        : 'Penting: isi masa tunggu dengan aktivitas yang memperkuat CV. Sertifikasi food safety, pelatihan barista, atau workshop hospitality sangat dihargai employer.',
      dot:'#F0B429', borderColor:'rgba(240,180,41,0.3)'
    },
    {
      month:'Bulan 3-4', title:'Kesiapan Finansial',
      desc: financial
        ? 'Bagus — kamu sudah punya rencana finansial. Pastikan tabungan darurat minimal setara 3 bulan biaya hidup di negara tujuan sebelum berangkat.'
        : 'Mulai buat anggaran keberangkatan yang detail: biaya dokumen, perjalanan, akomodasi bulan pertama, dan biaya darurat. Diskusikan dengan Career Consultant.',
      dot:'#7B61FF', borderColor:'rgba(123,97,255,0.3)'
    },
    {
      month:'Bulan 4-5', title:'Persiapan Mental & Keluarga',
      desc:'Lakukan 2 hal kritis: (1) Diskusi terbuka dan detail dengan orang tua tentang ekspektasi komunikasi, finansial, dan dukungan. (2) Ikuti mock interview dan sesi mental readiness dengan tim STAR4Hire.',
      dot:'#2ECC71', borderColor:'rgba(46,204,113,0.3)'
    },
    {
      month:'Sebelum Berangkat', title:'Final Checklist',
      desc:'Dokumen lengkap, kesehatan optimal (MCU clear), tabungan awal siap, orang tua sudah briefed dan tenang, kontak tim STAR4Hire tersimpan, dan mindset sudah di-set: ini bukan liburan, ini karier pertamamu.',
      dot:'#E05252', borderColor:'rgba(224,82,82,0.3)'
    },
  ];
}

// ═══════════════════════════════════════════════
// PARENT SECTION
// ═══════════════════════════════════════════════
function getParentSection() {
  const fs = scores.family_support;
  const pc = scores.parent_comms;
  const ind = scores.independence;

let situation = '';
  let guidance = '';
  let parentMessage = '';
  let concerns = [];

if (fs >= 10 && pc >= 8) {
    situation = 'Dukungan Keluarga: KUAT';
    guidance = 'Kamu beruntung memiliki fondasi keluarga yang solid. Manfaatkan ini — komunikasikan progress programmu secara rutin, jadikan mereka bagian dari perjalananmu, bukan penonton.';
    parentMessage = 'Kepada Orang Tua: Anak Anda memiliki dukungan dari Anda yang menjadi bahan bakar terbesarnya. Teruslah ada — bukan untuk menahan, tapi untuk menguatkan. Setiap video call yang Anda lakukan adalah energi yang dibawa anak Anda ke tempat kerjanya keesokan harinya.';
    concerns = [
      {icon:'✅', title:'Komunikasi', text:'Jadwalkan video call rutin minimal 2x/minggu. Konsistensi lebih penting dari durasi.'},
      {icon:'✅', title:'Keuangan', text:'Bicarakan ekspektasi pengiriman uang dari awal — jangan biarkan menjadi sumber konflik saat sudah di luar negeri.'},
      {icon:'💡', title:'Ketergantungan Emosional', text:'Pastikan kemandirian emosional juga berkembang. Terlalu tergantung pada reaksi orang tua bisa mengganggu pengambilan keputusan di sana.'},
    ];
  } else if (fs >= 6) {
    situation = 'Dukungan Keluarga: SEDANG — Perlu Dibangun';
    guidance = 'Fondasi ada, tapi perlu dikuatkan. Sebelum berangkat, luangkan waktu khusus untuk diskusi mendalam dengan orang tua. Mereka mungkin khawatir karena belum cukup informasi — beri mereka informasi yang mereka butuhkan.';
    parentMessage = 'Kepada Orang Tua: Mungkin masih ada kekhawatiran yang belum terungkap. Kami di STAR4Hire mengundang Anda untuk hadir dalam sesi Parent Briefing — agar kita bisa bersama memastikan perjalanan anak Anda selamat, terencana, dan penuh nilai.';
    concerns = [
      {icon:'⚠️', title:'Keterbukaan Diskusi', text:'Buat jadwal khusus "family meeting" sebelum berangkat. Bahas semua hal — kekhawatiran, ekspektasi, batasan, dan rencana.'},
      {icon:'⚠️', title:'Informasi yang Benar', text:'Pastikan orang tua mendapat informasi yang akurat tentang program — bukan dari gosip atau cerita tidak valid.'},
      {icon:'💡', title:'Dukungan Bertahap', text:'Minta orang tua untuk percaya pada proses. Setiap milestone yang kamu capai adalah bukti yang memperkuat kepercayaan mereka.'},
    ];
  } else {
    situation = 'Dukungan Keluarga: PERLU PERHATIAN SEGERA';
    guidance = 'Ini adalah tantangan nyata yang harus diselesaikan sebelum berangkat. Berangkat dengan konflik keluarga yang belum terselesaikan akan sangat menguras energi mental dan bisa mempengaruhi performa kerjamu secara signifikan.';
    parentMessage = 'Kepada Orang Tua: Kami memahami kekhawatiran Anda sangat wajar. Kami di STAR4Hire memiliki rekam jejak nyata dalam mempersiapkan, mendampingi, dan memulangkan peserta dengan selamat. Izinkan kami bertemu langsung untuk menjawab semua pertanyaan Anda.';
    concerns = [
      {icon:'🚨', title:'Prioritas Utama', text:'Selesaikan konflik atau kesalahpahaman dengan keluarga SEBELUM proses pendaftaran dilanjutkan. Ini bukan pilihan — ini keharusan.'},
      {icon:'⚠️', title:'Mediasi', text:'Jika diperlukan, Career Consultant STAR4Hire dapat membantu memfasilitasi diskusi dengan keluarga. Gunakan layanan ini.'},
      {icon:'💡', title:'Investasi Waktu', text:'Alokasikan minimal 2 minggu khusus untuk membangun kembali kepercayaan dan pemahaman bersama orang tua sebelum proses dilanjutkan.'},
    ];
  }

return { situation, guidance, parentMessage, concerns };
}

// ═══════════════════════════════════════════════
// OVERALL READINESS
// ═══════════════════════════════════════════════
function getOverallReadiness() {
  const r = getReadinessScores();
  const avg = Math.round(Object.values(r).reduce((a,b)=>a+b,0) / Object.values(r).length);
  if (avg >= 75) return {level:'SIAP BERANGKAT', color:'#2ECC71', icon:'🚀', desc:'Profilmu menunjukkan kesiapan yang kuat. Fokus pada eksekusi dan detail persiapan akhir.'};
  if (avg >= 55) return {level:'SIAP DENGAN PERSIAPAN', color:'#F0B429', icon:'⚡', desc:'Ada area yang perlu diperkuat sebelum berangkat. Diskusikan dengan Career Consultant-mu.'};
  return {level:'BUTUH PERSIAPAN LEBIH', color:'#E05252', icon:'🌱', desc:'Beberapa dimensi penting perlu dikembangkan dulu. Ini bukan penolakan — ini roadmap menuju kesiapanmu.'};
}

// ═══════════════════════════
// NAVIGATION & UI
// ═══════════════════════════

// ═══════════════════════════════════════
// NAVIGATION & UI
// ═══════════════════════════════════════

function show(id) {
  document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));
  document.getElementById('s-' + id).classList.add('active');
  window.scrollTo(0, 0);
}

function startTest() {
  document.getElementById('topbar').classList.add('show');
  document.getElementById('qBottom').classList.add('show');
  show('q');
  renderQ(0);
}

function updateProgress(idx) {
  const pct = Math.round((idx / TOTAL) * 100);
  document.getElementById('progFill').style.width = pct + '%';
  document.getElementById('tbCount').textContent = idx + '/' + TOTAL;
  const sec = SECTIONS.find(s => s.id === flat[idx].sectionId);
  document.getElementById('tbSection').textContent = sec ? sec.label : '';
}

function renderQ(idx) {
  const q   = flat[idx];
  const sec = SECTIONS.find(s => s.id === q.sectionId);
  const isFirst = sec.questions[0].id === q.id;
  updateProgress(idx);

if (q.type === 'choice') {
    html += '<div class="opts">';
    q.opts.forEach((o, oi) => {
      const sel = answers[q.id] === oi ? 'sel' : '';
      html += `<div class="opt ${sel}" onclick="pickOpt('${q.id}',${oi},this)">
        <div class="opt-letter">${o.a}</div>
        <div class="opt-body">
          <div class="opt-main">${o.label}</div>
          <div class="opt-sub">${o.sub}</div>
        </div>
      </div>`;
    });
    html += '</div>';
  } else {
    const cur = answers[q.id];
    html += '<div class="scale-wrap"><div class="scale-btns">';
    for (let i = 1; i <= 7; i++) {
      const sel = cur === i ? 'sel' : '';
      html += `<button class="scale-btn ${sel}" onclick="pickScale('${q.id}',${i},this)">${i}</button>`;
    }
    html += `</div><div class="scale-labels"><span>${q.low}</span><span>${q.high}</span></div></div>`;
  }

const page = document.getElementById('qPage');
  page.style.opacity = '0';
  page.style.transform = 'translateY(12px)';
  page.innerHTML = html;
  requestAnimationFrame(() => {
    page.style.transition = 'opacity .25s, transform .25s';
    page.style.opacity = '1';
    page.style.transform = 'translateY(0)';
  });

document.getElementById('btnBack').style.visibility = idx > 0 ? 'visible' : 'hidden';
  document.getElementById('btnNext').disabled = answers[q.id] === undefined;
  document.getElementById('btnNext').textContent = idx === TOTAL - 1 ? 'Selesai ✓' : 'Lanjut →';
}

function pickOpt(qid, oi, el) {
  answers[qid] = oi;
  document.querySelectorAll('.opt').forEach(o => o.classList.remove('sel'));
  el.classList.add('sel');
  document.getElementById('btnNext').disabled = false;
  setTimeout(() => {
    if (qIdx < TOTAL - 1) nav(1);
  }, 380);
}

function pickScale(qid, val, el) {
  answers[qid] = val;
  document.querySelectorAll('.scale-btn').forEach(b => b.classList.remove('sel'));
  el.classList.add('sel');
  document.getElementById('btnNext').disabled = false;
}

function nav(dir) {
  const next = qIdx + dir;
  if (next < 0) return;
  if (next >= TOTAL) { showLoad(); return; }
  qIdx = next;
  renderQ(qIdx);
  window.scrollTo(0, 0);
}

// ═══════════════════════════════════════
// FORM SUBMIT & ELIGIBILITY
// ═══════════════════════════════════════
function checkEligibility() {
  const age      = parseInt(document.getElementById('f-age')?.value)      || 0;
  const edu      = document.getElementById('f-edu')?.value                 || '';
  const gradyear = parseInt(document.getElementById('f-gradyear')?.value)  || 0;
  if (!age && !edu && !gradyear) return;

const elig = getEligibility(age, edu, gradyear);
  const wrap = document.getElementById('eligWrap');
  if (!wrap) return;

const programs = [
    { key:'TW',     label:'Taiwan Internship',    flag:'🇹🇼' },
    { key:'HK',     label:'Hong Kong Internship',  flag:'🇭🇰' },
    { key:'USA_J1', label:'J1 USA Internship',     flag:'🇺🇸' },
    { key:'USA_F1', label:'F1 USA Study/MBA',      flag:'🎓'  },
    { key:'AU',     label:'PR Pathways Australia', flag:'🇦🇺' },
    { key:'MY',     label:'Malaysia Internship',   flag:'🇲🇾' },
  ];

wrap.innerHTML = html;
  wrap.style.display = 'flex';
}

function doSubmit() {
  const name     = document.getElementById('f-name').value.trim();
  const age      = document.getElementById('f-age').value.trim();
  const wa       = document.getElementById('f-wa').value.trim();
  const email    = document.getElementById('f-email').value.trim();
  const city     = document.getElementById('f-city').value.trim();
  const school   = document.getElementById('f-school').value.trim();
  const edu      = document.getElementById('f-edu').value.trim();
  const gradyear = document.getElementById('f-gradyear').value.trim();

// Only validate name, wa, email — make edu and gradyear optional
  let ok = true;
  ['f-name','f-wa','f-email'].forEach(id => {
    const el = document.getElementById(id);
    if (!el || !el.value.trim()) {
      if (el) {
        el.classList.add('err');
        el.addEventListener('input', () => el.classList.remove('err'), { once:true });
      }
      ok = false;
    }
  });
  if (!ok) return;

uData = { name, age: parseInt(age), wa, email, city, school, edu, gradyear: parseInt(gradyear) };

document.getElementById('btnSubmit').disabled = true;
  document.getElementById('btnSubmit').textContent = 'Memproses…';
  document.getElementById('sendingRow').style.display = 'flex';

calculateScores();
  sendToSheets();

setTimeout(() => show('wa'), 500);
}

// ═══════════════════════════════════════
// CONFIG & DATA INTEGRATION
// ═══════════════════════════════════════
const CONFIG = {
  CAREER_CONNECTOR_WA: '6287725650958',
  SHEETS_ENDPOINT: '',  // Isi URL Apps Script setelah setup Google Sheets
};

function skipWAandContinue() {
  renderResult();
}

function manualSendWA() {
  const url = `https://wa.me/${CONFIG.CAREER_CONNECTOR_WA}?text=${encodeURIComponent(buildMsg())}`;
  window.open(url, '_blank');
}

// ═══════════════════════════════════════
// RENDER RESULT
// ═══════════════════════════════════════
function renderResult() {
  const type      = getPersonalityType();
  const readiness = getReadinessScores();
  const overall   = getOverallReadiness();
  const depts     = getDeptMatches();
  const countries = getCountryMatches();
  const mental    = getMentalReadiness();
  const waiting   = getWaitingPlan();
  const parent    = getParentSection();

const rColors = { mental:'#00C2A8', professional:'#F0B429', social:'#8B5CF6', waiting:'#2ECC71', family:'#E05252' };
  const rLabels = { mental:'Mental', professional:'Profesional', social:'Sosial', waiting:'Masa Tunggu', family:'Keluarga' };
  const rankC   = ['#F0B429','#9CA3AF','#CD7F32','#6B7280'];

let html = '';

// HERO
  html += `<div class="res-hero">
    <div class="res-type-badge" style="background:${type.color}22;border:1px solid ${type.color}44;color:${type.color}">${type.badge}</div>
    <div class="res-name">${type.nameID}</div>
    <div class="res-name-en">"${type.name}"</div>
    <div class="res-tagline">${type.tagline}</div>
    <div class="res-traits">${type.traits.map(t => `<span class="trait">${t}</span>`).join('')}</div>
    <div class="overall-badge" style="background:${overall.color}18;border:1px solid ${overall.color}44;color:${overall.color}">
      <span>${overall.icon}</span><span>${overall.level}</span>
    </div>
  </div>`;

// SCORES
  html += '<div class="score-grid">';
  Object.entries(readiness).forEach(([k, v]) => {
    html += `<div class="score-card">
      <div class="score-num" style="color:${rColors[k]}">${v}%</div>
      <div class="score-lbl">${rLabels[k]}</div>
      <div class="score-bar"><div class="score-fill" style="width:${v}%;background:${rColors[k]}"></div></div>
    </div>`;
  });
  html += '</div>';

// PERSONALITY DESC
  html += `<div class="res-sec">
    <div class="res-sec-hd"><div class="sec-ico" style="background:${type.color}22;color:${type.color}">🧬</div>Profil Kepribadianmu</div>
    <div class="res-desc">${type.description}</div>
  </div>`;

// DEPARTMENT
  html += `<div class="res-sec">
    <div class="res-sec-hd"><div class="sec-ico" style="background:#8B5CF622;color:#8B5CF6">🏨</div>Bidang Hospitality Terbaik</div>
    <div class="dept-list">`;
  depts.forEach((d, i) => {
    html += `<div class="dept-item ${i === 0 ? 'top' : ''}">
      <div class="dept-emoji">${d.emoji}</div>
      <div class="dept-info">
        <div class="dept-name">${d.name} ${i === 0 ? '<span class="top-tag">TERBAIK</span>' : ''}</div>
        <div class="dept-desc">${d.desc}</div>
      </div>
      <div class="dept-right">
        <div class="dept-pct" style="color:${d.color}">${d.score}%</div>
        <div class="dept-bar-wrap"><div class="dept-bar-fill" style="width:${d.score}%;background:${d.color}"></div></div>
      </div>
    </div>`;
  });
  html += '</div></div>';

// COUNTRY
  html += `<div class="res-sec">
    <div class="res-sec-hd"><div class="sec-ico" style="background:#E0525222;color:#E05252">🌏</div>Negara Tujuan Paling Cocok</div>
    <div class="country-list">`;
  countries.slice(0, 4).forEach((c, i) => {
    const inelig = c.ineligible;
    html += `<div class="country-item" style="${inelig ? 'opacity:.45' : ''}">
      <div class="c-rank" style="background:${inelig ? '#E0525233' : rankC[i] + '22'};color:${inelig ? 'var(--red)' : rankC[i]};border:1px solid ${inelig ? '#E0525266' : rankC[i] + '44'}">${i + 1}</div>
      <div class="c-flag">${c.flag}</div>
      <div class="c-info">
        <div class="c-name">${c.name} ${inelig ? '<span style="font-size:10px;color:var(--red);font-weight:700;background:rgba(224,82,82,.15);border-radius:100px;padding:2px 7px;margin-left:4px">Tidak Eligible</span>' : ''}</div>
        <div class="c-why">${inelig && c.eligNote ? c.eligNote : c.desc}</div>
      </div>
      <div class="c-pct" style="color:${inelig ? 'var(--red)' : rankC[i]}">${inelig ? '—' : c.score + '%'}</div>
    </div>`;
  });
  html += '</div></div>';

// MENTAL
  html += `<div class="res-sec">
    <div class="res-sec-hd"><div class="sec-ico" style="background:#00C2A822;color:#00C2A8">🧠</div>Peta Kesiapan Mental</div>
    <div class="mental-list">`;
  mental.forEach(m => {
    html += `<div class="mental-item">
      <div class="m-dot" style="background:${m.color}"></div>
      <div class="m-body">
        <div class="m-label">${m.label}</div>
        <div class="m-value" style="color:${m.color}">${m.value}</div>
        <div class="m-note">${m.note}</div>
      </div>
    </div>`;
  });
  html += '</div></div>';

// WAITING
  html += `<div class="res-sec">
    <div class="res-sec-hd"><div class="sec-ico" style="background:#2ECC7122;color:#2ECC71">⏳</div>Rencana Masa Tunggu</div>
    <div class="timeline">`;
  waiting.forEach(w => {
    html += `<div class="tl-item">
      <div class="tl-dot" style="background:${w.dot}22;border-color:${w.dot};color:${w.dot}">●</div>
      <div class="tl-body">
        <div class="tl-month" style="color:${w.dot}">${w.month}</div>
        <div class="tl-title">${w.title}</div>
        <div class="tl-desc">${w.desc}</div>
      </div>
    </div>`;
  });
  html += '</div></div>';

// PARENT
  html += `<div class="res-sec">
    <div class="res-sec-hd"><div class="sec-ico" style="background:#F0B42922;color:#F0B429">👨‍👩‍👦</div>Dinamika Keluarga</div>
    <div class="parent-card">
      <div class="par-status">${parent.situation}</div>
      <div class="par-title">Untuk Kamu:</div>
      <div class="par-body">${parent.guidance}</div>
    </div>
    <div class="msg-box">
      <div class="msg-text">${parent.parentMessage}</div>
      <div class="msg-sig">— Tim STAR4Hire, untuk Orang Tua Peserta TND</div>
    </div>
    <div class="concern-list">`;
  parent.concerns.forEach(c => {
    html += `<div class="concern">
      <div class="concern-ico">${c.icon}</div>
      <div>
        <div class="concern-title">${c.title}</div>
        <div class="concern-text">${c.text}</div>
      </div>
    </div>`;
  });
  html += '</div></div>';

// ALERTS
  const alerts = [];
  if (scores.proactivity < 6) alerts.push({type:'warn', icon:'⚠️', text:'<strong>Masa tunggu kritis:</strong> Skor proaktivitasmu rendah. Masa tunggu yang tidak diisi bisa jadi hambatan serius saat tiba di luar negeri.'});
  if (scores.resilience > 14 && scores.social > 12) alerts.push({type:'good', icon:'✅', text:'<strong>Profil ideal hospitality internasional!</strong> Kombinasi ketangguhan tinggi + kecerdasan sosial kuat adalah yang paling dicari employer.'});
  if (scores.family_support < 5) alerts.push({type:'warn', icon:'🚨', text:'<strong>Perhatian:</strong> Dukungan keluarga rendah adalah faktor utama peserta tidak menyelesaikan program. Selesaikan ini sebelum melanjutkan.'});
  if (alerts.length > 0) {
    html += '<div class="res-sec"><div class="res-sec-hd"><div class="sec-ico" style="background:#F0B42922;color:#F0B429">⚡</div>Catatan Khusus</div>';
    alerts.forEach(a => html += `<div class="alert ${a.type}"><div class="alert-ico">${a.icon}</div><div class="alert-txt">${a.text}</div></div>`);
    html += '</div>';
  }

// CTA
  html += `<div class="res-cta">
    <div class="cta-title">Langkah Selanjutnya</div>
    <div class="cta-sub">Career Consultant STAR4Hire siap membantumu memahami hasil ini dan merancang jalur karier yang tepat.</div>
    <button class="btn-wa" onclick="manualSendWA()">
      <span>💬</span> Kirim Ulang ke Career Consultant
    </button>
    <button class="btn-restart" onclick="restartTest()">↺ Ulangi Test</button>
    <div class="stats-cta">
      <div class="stat-c"><div class="stat-c-num">+2,000</div><div class="stat-c-lbl">Alumni di LN</div></div>
      <div class="stat-c"><div class="stat-c-num">4 Negara</div><div class="stat-c-lbl">Destinasi Aktif</div></div>
      <div class="stat-c"><div class="stat-c-num">100%</div><div class="stat-c-lbl">Legal & Terjamin</div></div>
    </div>
  </div>`;

document.getElementById('resWrap').innerHTML = html;
  show('res');
}

</script>
</body>
</html>

Advanced Web Server Manager