:root{
  --navy: #014860;
  --navy-dark: #013446;
  --sky: #64c1da;
  --sky-light: rgba(100,193,218,0.15);
  --gold: #b1944d;
  --gold-light: #d3b468;
  --green: #69d394;
  --ink: #212934;
  --ink-muted: #6e7a8a;
  --bg: #f8f9fa;
  --bg-alt: #eef4f6;
  --card: #ffffff;
  --border: #e5e7eb;
  --radius-lg: 20px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --shadow: 0 10px 30px rgba(1,72,96,0.08);
  --font-head: 'Rubik', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, sans-serif;
}

*{ box-sizing: border-box; }

html,body{
  margin:0;
  padding:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4{
  font-family: var(--font-head);
  color: var(--navy);
  margin: 0 0 8px;
  line-height: 1.2;
}

p{ margin: 0 0 12px; color: var(--ink-muted); line-height: 1.65; }
.body-text{ font-size:15.5px; max-width: 680px; }

/* ---------- Header ---------- */
.site-header{
  position: sticky;
  top:0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--border);
}
.site-header-inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 24px;
  display:flex;
  align-items:center;
  gap: 14px;
}
.site-logo{ height: 32px; width:auto; display:block; }
.site-header-tag{
  font-family: var(--font-head);
  font-weight:600;
  font-size:14px;
  color: var(--navy);
  padding-left:14px;
  border-left: 1.5px solid var(--border);
}

/* ---------- Layout helpers ---------- */
.section{ padding: 56px 0; position: relative; overflow: hidden; }
.section.bg-alt{ background: var(--bg-alt); }
.section-inner{
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}
.page-shell{
  max-width: 880px;
  margin: 0 auto;
  padding: 28px 20px 60px;
}

.screen{ display:none; animation: fadeIn .35s ease; }
.screen.active{ display:block; }

@keyframes fadeIn{
  from{ opacity:0; transform: translateY(8px); }
  to{ opacity:1; transform: translateY(0); }
}

.eyebrow{
  display:inline-block;
  font-family: var(--font-head);
  font-weight:600;
  font-size:12.5px;
  letter-spacing:.06em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(177,148,77,0.1);
  padding:5px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}

/* ---------- Buttons ---------- */
.btn{
  font-family: var(--font-body);
  font-weight:600;
  font-size:15px;
  border:none;
  border-radius: var(--radius-md);
  padding: 12px 22px;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.3;
  gap: 8px;
}
.btn:disabled{ opacity:.4; cursor:not-allowed; }
.btn-primary{
  background: var(--gold);
  color:#fff;
  box-shadow: 0 8px 20px rgba(177,148,77,0.35);
}
.btn-primary:not(:disabled):hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(177,148,77,0.45); }
.btn-ghost{
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--border);
}
.btn-ghost:hover{ border-color: var(--navy); }
.btn-lg{ padding: 15px 30px; font-size:16px; }
.btn.full{ width:100%; margin-top:10px; }
.btn-whatsapp{
  background: #25d366;
  color:#fff;
  box-shadow: 0 8px 20px rgba(37,211,102,0.35);
}
.btn-whatsapp:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(37,211,102,0.45); }

/* ---------- Hero ---------- */
.hero-section{ padding-top: 64px; padding-bottom: 70px; }
.hero-blob{
  position:absolute;
  border-radius:50%;
  filter: blur(60px);
  opacity:.35;
  z-index:0;
}
.hero-blob-1{ width:360px; height:360px; background: var(--sky); top:-120px; right:-80px; }
.hero-blob-2{ width:280px; height:280px; background: var(--gold-light); bottom:-100px; left:-60px; opacity:.25; }

.hero-inner{ text-align:left; }
.hero-inner h1{ font-size: 42px; font-weight:800; max-width: 640px; }
.lead{ font-size:16px; max-width: 580px; }
.lead.small{ font-size:14.5px; }
.hero-meta{
  margin-top:14px;
  font-size:13px;
  font-weight:600;
  color: var(--navy);
}

.intro-steps{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
  margin: 30px 0 4px;
}
.intro-step{
  background: var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:20px 18px;
  display:flex;
  gap:12px;
  align-items:flex-start;
  box-shadow: var(--shadow);
}
.step-num{
  flex:none;
  width:30px; height:30px;
  border-radius:50%;
  background: var(--navy);
  color:#fff;
  font-family: var(--font-head);
  font-weight:700;
  font-size:14px;
  display:flex; align-items:center; justify-content:center;
}
.intro-step h3{ font-size:15px; margin-bottom:4px; }
.intro-step p{ font-size:13.5px; margin:0; }

/* ---------- RIASEC type grid (landing) ---------- */
.riasec-type-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
  margin-top: 26px;
}
.riasec-type-card{
  background: var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:20px;
  box-shadow: var(--shadow);
}
.riasec-type-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px; height:38px;
  border-radius:50%;
  font-family: var(--font-head);
  font-weight:700;
  color:#fff;
  margin-bottom:12px;
  font-size:16px;
}
.riasec-type-card h3{ font-size:15.5px; margin-bottom:4px; }
.riasec-type-card .type-name{ font-size:12px; color: var(--ink-muted); font-weight:600; margin-bottom:8px; display:block; }
.riasec-type-card p{ font-size:13.5px; margin:0; }

/* ---------- FAQ ---------- */
.faq-list{ margin-top: 24px; display:flex; flex-direction:column; gap:10px; }
.faq-item{
  background: var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius-md);
  overflow:hidden;
}
.faq-question{
  width:100%;
  background:none;
  border:none;
  padding:16px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
  font-family: var(--font-head);
  font-weight:600;
  font-size:14.5px;
  color: var(--ink);
  text-align:left;
}
.faq-icon{
  flex:none;
  font-size:18px;
  color: var(--gold);
  transition: transform .2s ease;
  font-family: var(--font-body);
  font-weight:700;
}
.faq-item.open .faq-icon{ transform: rotate(45deg); }
.faq-answer{
  max-height:0;
  overflow:hidden;
  transition: max-height .25s ease;
  padding: 0 20px;
}
.faq-item.open .faq-answer{ max-height: 240px; padding-bottom: 16px; }
.faq-answer p{ font-size:13.5px; margin:0; }

/* ---------- CTA section ---------- */
.cta-section{
  background: linear-gradient(135deg, var(--navy), #026886);
  text-align:center;
}
.cta-section h2{ color:#fff; }
.cta-section p{ color: rgba(255,255,255,0.85); margin-left:auto; margin-right:auto; }
.cta-section .btn{ margin-top: 10px; }

/* ---------- Footer ---------- */
.site-footer{ padding: 26px 0 40px; }
.site-footer p{ font-size:12.5px; text-align:center; margin:0; }

/* ---------- Card / Form ---------- */
.card-wrap{
  background: var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow);
  margin-top: 20px;
}
.card-wrap.narrow{ max-width: 520px; margin: 20px auto 0; }

.form-grid{ display:flex; flex-direction:column; gap:16px; margin-top:20px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field span{ font-size:13.5px; font-weight:600; color: var(--navy); }
.field input{
  font-family: var(--font-body);
  font-size:15px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  outline:none;
  transition: border-color .15s ease;
  background:#fff;
  color: var(--ink);
}
.field input:focus{ border-color: var(--sky); }
.field input:invalid:not(:placeholder-shown){ border-color: #e0847c; }

.phone-input-wrap{
  display:flex;
  align-items:stretch;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  overflow:hidden;
  background:#fff;
  transition: border-color .15s ease;
}
.phone-input-wrap:focus-within{ border-color: var(--sky); }
.phone-prefix{
  display:flex;
  align-items:center;
  padding: 12px 10px 12px 14px;
  font-family: var(--font-body);
  font-size:15px;
  font-weight:600;
  color: var(--ink-muted);
  background: var(--bg-alt);
  border-right: 1.5px solid var(--border);
}
.phone-input-wrap input{
  flex:1;
  min-width:0;
  border:none;
  outline:none;
  font-family: var(--font-body);
  font-size:15px;
  padding: 12px 14px 12px 8px;
  background:transparent;
  color: var(--ink);
}

/* ---------- Test header ---------- */
.test-header{ padding-top: 4px; }
.test-header-top{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:8px;
}
.test-section-label{
  font-family: var(--font-head);
  font-weight:700;
  color: var(--navy);
  font-size:15px;
}
.test-progress-label{ font-size:13px; color: var(--ink-muted); }
.progress-track{
  width:100%; height:8px;
  background: var(--border);
  border-radius:999px;
  overflow:hidden;
}
.progress-fill{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, var(--sky), var(--navy));
  border-radius:999px;
  transition: width .3s ease;
}

.test-footer{
  display:flex; justify-content:space-between;
  margin-top: 20px;
}

/* ---------- Guide panel (instruksi bagian 1 & 2) ---------- */
.guide-panel{
  background: var(--sky-light);
  border: 1.5px solid var(--sky);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  margin-bottom: 22px;
}
.guide-panel-title{
  font-family: var(--font-head);
  font-weight:700;
  color: var(--navy);
  font-size:14.5px;
  margin-bottom:6px;
  display:flex;
  align-items:center;
  gap:8px;
}
.guide-badge{
  background: var(--navy);
  color:#fff;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:3px 9px;
  border-radius:999px;
}
.guide-panel p{ font-size:13.5px; margin:0 0 10px; color: var(--ink); }
.guide-panel p:last-child{ margin-bottom:0; }
.guide-example{
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--radius-sm);
  padding:12px 14px;
  margin-top:6px;
}
.guide-example-label{ font-size:12px; font-weight:700; color: var(--gold); margin-bottom:8px; text-transform:uppercase; letter-spacing:.04em; }
.guide-example-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.guide-example-text{ font-size:13px; font-weight:600; color: var(--ink); flex:1; min-width: 160px; }
.guide-example-scale{ display:flex; gap:5px; }
.guide-example-pill{
  font-size:10.5px; font-weight:600; padding:5px 8px; border-radius:999px;
  border:1.5px solid var(--border); color: var(--ink-muted);
}
.guide-example-pill.hi{ background: var(--navy); border-color: var(--navy); color:#fff; }
.guide-example-pair{ display:flex; justify-content:center; gap:6px; margin-top:4px; }
.guide-example-pair .pair-opt-demo{
  border:1.5px solid var(--border); border-radius: var(--radius-sm);
  padding:8px 12px; font-family: var(--font-head); font-weight:700; font-size:13px; color: var(--ink-muted);
}
.guide-example-pair .pair-opt-demo.hi{ background: var(--gold); border-color: var(--gold); color:#fff; }

/* ---------- Likert (Minat) ---------- */
.q-block{ padding: 18px 0; border-bottom: 1px solid var(--border); }
.q-block:last-child{ border-bottom:none; padding-bottom:4px; }
.q-block:first-child{ padding-top:0; }
.q-text{ font-size:15.5px; font-weight:600; color: var(--ink); margin-bottom:14px; }

.likert{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:8px;
}
.likert-opt{
  border:1.5px solid var(--border);
  background:#fff;
  border-radius: var(--radius-sm);
  padding:10px 6px;
  text-align:center;
  font-size:12px;
  font-weight:600;
  color: var(--ink-muted);
  cursor:pointer;
  transition: all .15s ease;
  user-select:none;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1.25;
  min-height: 44px;
}
.likert-opt:hover{ border-color: var(--sky); color: var(--navy); }
.likert-opt.selected{
  background: var(--navy);
  border-color: var(--navy);
  color:#fff;
}

/* ---------- Forced choice (Kepribadian) ---------- */
.pair-block{ padding:20px 0; border-bottom:1px solid var(--border); }
.pair-block:last-child{ border-bottom:none; }
.pair-block:first-child{ padding-top:0; }
.pair-labels{
  display:flex; justify-content:space-between; gap:14px;
  margin-bottom:12px;
}
.pair-labels span{
  font-size:14px; font-weight:600; color: var(--ink);
  flex:1;
}
.pair-labels span:last-child{ text-align:right; }
.pair-scale{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:8px;
}
.pair-opt{
  border:1.5px solid var(--border);
  background:#fff;
  border-radius: var(--radius-sm);
  padding:12px 6px;
  text-align:center;
  cursor:pointer;
  font-family: var(--font-head);
  font-weight:700;
  font-size:15px;
  color: var(--ink-muted);
  transition: all .15s ease;
  user-select:none;
  display:flex;
  align-items:center;
  justify-content:center;
}
.pair-opt:hover{ border-color: var(--sky); color: var(--navy); }
.pair-opt.selected{
  background: var(--gold);
  border-color: var(--gold);
  color:#fff;
}

/* ---------- Loading ---------- */
.loading-wrap{
  min-height: 60vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px;
}
.spinner{
  width:48px; height:48px;
  border-radius:50%;
  border:4px solid var(--border);
  border-top-color: var(--navy);
  animation: spin 0.8s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }
.loading-wrap p{ font-weight:600; color: var(--navy); }

/* ---------- Result ---------- */
.hidden{ display:none !important; }

.result-hero{
  background: linear-gradient(135deg, var(--navy), #026886);
  border-radius: var(--radius-lg);
  padding: 34px 30px;
  color:#fff;
  margin-top: 10px;
  overflow: hidden;
}
.result-hero-inner{
  display:flex;
  align-items:center;
  gap: 24px;
}
.result-hero-text{ flex: 1 1 auto; min-width: 0; }
.result-illustration-wrap{
  flex: none;
  width: 190px;
}
.result-illustration{ width:100%; height:auto; display:block; }
.result-hero .eyebrow{ background: rgba(255,255,255,0.15); color:#fff; }
.result-hero h1{ color:#fff; font-size: 34px; margin-bottom:10px; }
.result-hero p{ color: rgba(255,255,255,0.85); max-width:620px; }

.result-status{
  display:flex; align-items:center; gap:10px;
  font-size:13.5px;
  color: rgba(255,255,255,0.9);
  margin-top:16px;
  font-weight:600;
}
.result-status .dot{
  width:8px; height:8px; border-radius:50%;
  background: var(--green);
}

.section-block{ margin-top: 28px; }
.section-block h2{ font-size:20px; }

/* dual bars (kepribadian dimension) */
.dual-bar{ margin-bottom:18px; }
.dual-bar-labels{
  display:flex; justify-content:space-between;
  font-size:13.5px; font-weight:600; color: var(--navy);
  margin-bottom:6px;
}
.dual-bar-track{
  display:flex; height:10px; border-radius:999px; overflow:hidden; background: var(--border);
}
.dual-bar-left{ background: var(--sky); height:100%; }
.dual-bar-right{ background: var(--gold); height:100%; }

/* single bars (RIASEC ranking) */
.riasec-bar{ margin-bottom:20px; }
.riasec-bar-top{
  display:flex; justify-content:space-between;
  font-size:13.5px; margin-bottom:5px;
}
.riasec-bar-top .name{ font-weight:700; color: var(--ink); }
.riasec-bar-top .pct{ color: var(--ink-muted); font-weight:600; }
.riasec-bar-track{ height:10px; background: var(--border); border-radius:999px; overflow:hidden; }
.riasec-bar-fill{ height:100%; border-radius:999px; background: linear-gradient(90deg, var(--sky), var(--navy)); }
.riasec-bar-desc{ font-size:12.5px; margin: 6px 0 0; color: var(--ink-muted); }

.cards-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:14px;
}
.trait-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--radius-md);
  padding:16px 18px;
}
.trait-card.strength{ border-left:4px solid var(--green); }
.trait-card.weakness{ border-left:4px solid var(--gold); }
.trait-card.opportunity{ border-left:4px solid var(--sky); }
.trait-card.threat{ border-left:4px solid #e0847c; }
.trait-card h4{ font-size:14.5px; margin-bottom:4px; color: var(--ink); }
.trait-card p{ font-size:13px; margin:0; }

/* Rekomendasi jurusan */
.major-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--radius-md);
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.major-card h4{ font-size:14px; margin:0; color: var(--ink); }
.major-card a{ font-size:12.5px; font-weight:600; color: var(--navy); text-decoration:none; white-space:nowrap; }
.major-card a:hover{ text-decoration:underline; }

.major-card-featured{
  border: 1.5px solid var(--gold);
  background: linear-gradient(135deg, rgba(177,148,77,0.07), rgba(211,180,104,0.14));
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 20px;
}
.major-card-featured h4{ font-size:17px; }
.major-card-featured p{ font-size:13px; color: var(--ink-muted); margin: 4px 0 0; }
.major-card-featured a{
  background: var(--gold);
  color:#fff;
  padding: 9px 18px;
  border-radius: 999px;
  font-weight:700;
}
.major-card-featured a:hover{ text-decoration:none; opacity:0.9; }
.major-badge{
  display:inline-block;
  background: var(--gold);
  color:#fff;
  font-size:10.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  padding:3px 10px;
  border-radius:999px;
  margin-bottom:8px;
}

.cakrawala-box{
  background: linear-gradient(135deg, rgba(1,72,96,0.06), rgba(100,193,218,0.1));
  border: 1.5px solid var(--sky);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-top: 18px;
}
.cakrawala-box-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom: 14px;
}
.cakrawala-box-head img{ height:22px; width:auto; }
.cakrawala-box-head span{ font-family: var(--font-head); font-weight:700; font-size:13.5px; color: var(--navy); }
.cakrawala-major-list{ display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }

.wa-cta-block{
  margin-top: 18px;
  text-align:center;
  padding: 18px;
  background:#fff;
  border-radius: var(--radius-md);
  border: 1px dashed var(--sky);
}
.wa-cta-block p{ font-size:13.5px; margin-bottom:12px; }

.result-final-cta{
  margin-top: 40px;
  background: linear-gradient(135deg, var(--navy), #026886);
  border-radius: var(--radius-lg);
  padding: 30px;
  text-align:center;
}
.result-final-cta h2{ color:#fff; font-size:20px; }
.result-final-cta p{ color: rgba(255,255,255,0.85); max-width:520px; margin-left:auto; margin-right:auto; }

/* ---------- Locked / Unlock (paywall-style gate) ---------- */
.locked-wrap{ position: relative; margin-top: 28px; }
.locked-content{
  filter: blur(7px);
  user-select: none;
  pointer-events: none;
}
.unlock-overlay{
  position: absolute;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 20px;
  background: linear-gradient(180deg, rgba(248,249,250,0.2), rgba(248,249,250,0.75) 30%);
}
.unlock-card{
  background:#fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(1,72,96,0.22);
  border: 1px solid var(--border);
  padding: 28px 26px;
  max-width: 420px;
  width: 100%;
  text-align:center;
}
.unlock-lock-icon{
  width: 46px; height:46px;
  border-radius:50%;
  background: var(--sky-light);
  color: var(--navy);
  display:flex; align-items:center; justify-content:center;
  margin: 0 auto 14px;
}
.unlock-lock-icon.success{
  background: rgba(105,211,148,0.18);
  color: var(--green);
}
.unlock-card h3{ font-size:18px; margin-bottom:8px; }
.unlock-card p{ font-size:13.5px; margin-bottom:4px; }
.unlock-form{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:16px;
  text-align:left;
}
.unlock-form .btn{ margin-top:4px; }

@media (max-width: 640px){
  .result-hero-inner{ flex-direction:column; text-align:center; }
  .result-illustration-wrap{ width:150px; }
  .unlock-card{ padding:22px 18px; }
}

.result-footer{
  margin-top:28px;
  text-align:center;
}
.result-footer p{ font-size:13px; }

/* ---------- Responsive ---------- */
@media (max-width: 640px){
  .site-header-tag{ display:none; }
  .hero-inner h1{ font-size:30px; }
  .intro-steps{ grid-template-columns: 1fr; }
  .riasec-type-grid{ grid-template-columns: 1fr; }
  .card-wrap{ padding:22px 18px; }
  .likert{ grid-template-columns: repeat(5, 1fr); gap:5px; }
  .likert-opt{ font-size:10px; padding:8px 3px; }
  .pair-scale{ gap:5px; }
  .cards-grid{ grid-template-columns: 1fr; }
  .result-hero{ padding:26px 20px; }
  .result-hero h1{ font-size:26px; }
  .major-card{ flex-direction:column; align-items:flex-start; }
}