/* ============================================================
   assessment.css — /panduan form + result page
   Dark Gold Warm theme, mobile-first, 600px max container
   ============================================================ */

/* ---- LAYOUT ---- */
.assessment-main {
  padding: 40px 16px 80px;
  min-height: 70vh;
}
.assessment-container {
  max-width: 600px;
  margin: 0 auto;
}
.assessment-container--result {
  max-width: 640px;
}

/* ---- INTRO ---- */
.assessment-kicker {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: #8a6d1a; margin: 0 0 12px;
}
.assessment-title {
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  font-weight: 700; color: #f0e8d0; line-height: 1.25;
  margin: 0 0 12px; letter-spacing: -0.02em;
}
.assessment-sub {
  color: #999; font-size: 1rem; line-height: 1.7; margin: 0 0 32px;
}

/* ---- PROGRESS ---- */
.assessment-progress {
  margin-bottom: 32px;
  display: flex; align-items: center; gap: 12px;
}
.progress-bar {
  flex: 1; height: 4px; background: #222; border-radius: 2px; overflow: hidden;
}
.progress-fill {
  height: 100%; background: linear-gradient(90deg, #d4af37, #ffd700);
  border-radius: 2px; transition: width 0.3s ease;
}
.progress-label {
  font-size: 12px; color: #666; white-space: nowrap;
}

/* ---- ERROR ---- */
.assessment-error {
  background: #1f0a0a; border: 1px solid #5a1a1a; border-radius: 8px;
  color: #e07070; padding: 12px 16px; margin-bottom: 24px; font-size: 0.93rem;
}

/* ---- FORM ---- */
.assessment-form { display: flex; flex-direction: column; gap: 0; }

/* ---- FIELDSET / QUESTION ---- */
.question-fieldset {
  border: 1px solid #222; border-radius: 12px;
  padding: 24px; margin-bottom: 16px;
  background: #111;
  transition: border-color 0.2s;
}
.question-fieldset:focus-within { border-color: #d4af37; }
.question-legend {
  font-size: 1rem; font-weight: 600; color: #e8dfc8;
  line-height: 1.5; padding: 0; float: left; width: 100%;
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px;
}
.question-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; min-width: 26px;
  background: #1a1600; border: 1px solid #d4af37;
  border-radius: 50%; color: #d4af37;
  font-size: 12px; font-weight: 700; margin-top: 1px;
}

/* ---- OPTIONS ---- */
.options-grid {
  display: flex; flex-direction: column; gap: 10px;
  clear: both;
}
.option-label {
  display: flex; align-items: flex-start; gap: 12px;
  background: #0e0e0e; border: 1px solid #252525; border-radius: 8px;
  padding: 12px 16px; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.option-label:hover { border-color: #4a3a18; background: #131100; }
.option-label input[type=radio] {
  accent-color: #d4af37; width: 16px; height: 16px;
  min-width: 16px; margin-top: 2px; cursor: pointer;
}
.option-label:has(input:checked) {
  border-color: #d4af37; background: #1a1500;
}
.option-text { font-size: 0.93rem; color: #c8c0b0; line-height: 1.5; }

/* ---- OPT-IN FIELDSET ---- */
.optin-fieldset {
  border: 1px solid #1e1e1e; border-radius: 12px;
  padding: 24px; margin-bottom: 28px; background: #0d0d0d;
}
.optin-legend {
  font-size: 0.9rem; color: #888; padding: 0;
  float: left; width: 100%; margin-bottom: 16px;
}
.optin-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; clear: both;
}
.optin-field { display: flex; flex-direction: column; gap: 6px; }
.optin-field--full { grid-column: 1 / -1; }
.optin-field label { font-size: 12px; color: #777; font-weight: 500; }
.optin-field input {
  background: #111; border: 1px solid #252525; border-radius: 7px;
  padding: 10px 13px; color: #e8e8e8; font-size: 0.93rem;
  outline: none; transition: border-color 0.15s;
  font-family: inherit;
}
.optin-field input:focus { border-color: #d4af37; }
.optin-field input::placeholder { color: #444; }

/* ---- SUBMIT ---- */
.assessment-submit-wrap { text-align: center; }
.assessment-submit {
  display: inline-block; width: 100%;
  background: linear-gradient(135deg, #d4af37, #b8962e);
  color: #0a0a0a; font-weight: 700; font-size: 1rem;
  padding: 15px 32px; border-radius: 10px;
  border: none; cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
  font-family: inherit;
}
.assessment-submit:hover { opacity: 0.88; transform: translateY(-1px); }
.submit-note {
  margin: 12px 0 0; font-size: 0.82rem; color: #555; font-style: italic;
}

/* ============================================================
   RESULT PAGE
   ============================================================ */

/* ---- ZONE BADGE ---- */
.result-zone {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 18px; border-radius: 99px;
  font-weight: 700; font-size: 0.95rem;
  margin-bottom: 28px;
}
.result-zone--darurat { background: #1f0808; border: 1px solid #5a1a1a; color: #e07070; }
.result-zone--transisi { background: #1a1200; border: 1px solid #5a4200; color: #e0b040; }
.result-zone--scale    { background: #081a08; border: 1px solid #1a5a1a; color: #60c060; }
.zone-icon { font-size: 1.2rem; }

/* ---- SCORE ---- */
.result-score-wrap { margin-bottom: 36px; }
.result-score-num {
  display: flex; align-items: baseline; gap: 4px; margin-bottom: 12px;
}
.score-value {
  font-size: clamp(3rem, 10vw, 5rem); font-weight: 800;
  color: #d4af37; line-height: 1; letter-spacing: -0.03em;
}
.score-max { font-size: 1.3rem; color: #555; font-weight: 400; }
.result-score-bar {
  height: 8px; background: #1e1e1e; border-radius: 4px;
  overflow: hidden; margin-bottom: 10px;
}
.result-score-fill {
  height: 100%; border-radius: 4px;
  transition: width 1s cubic-bezier(.4,0,.2,1);
}
.result-score-fill--darurat { background: linear-gradient(90deg, #5a1a1a, #e07070); }
.result-score-fill--transisi { background: linear-gradient(90deg, #5a4200, #e0b040); }
.result-score-fill--scale    { background: linear-gradient(90deg, #d4af37, #ffd700); }
.score-zones-legend {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-size: 11px; color: #555;
}
.sz--darurat { color: #a05050; }
.sz--transisi { color: #a08030; }
.sz--scale    { color: #8a6d1a; }

/* ---- DIAGNOSIS ---- */
.result-diagnosis { margin-bottom: 36px; }
.result-title {
  font-size: 1.4rem; font-weight: 700; color: #f0e8d0;
  margin: 0 0 12px; line-height: 1.3;
}
.result-desc { color: #aaa; font-size: 1rem; line-height: 1.75; margin: 0; }

/* ---- RECS ---- */
.result-recs { margin-bottom: 40px; }
.recs-heading {
  font-size: 1rem; font-weight: 700; color: #d4af37;
  margin: 0 0 16px;
}
.recs-list {
  padding-left: 20px; color: #c8c0b0;
  display: flex; flex-direction: column; gap: 12px;
  font-size: 0.95rem; line-height: 1.7;
}
.recs-list a { color: #d4af37; text-underline-offset: 3px; }
.recs-list a:hover { color: #ffd700; }
.recs-list strong { color: #e8dfc8; }

/* ---- HARD CTA BLOCK ---- */
.result-cta-block {
  border-radius: 14px; padding: 32px 28px;
  text-align: center; margin-bottom: 32px;
}
.result-cta-block--scale {
  background: linear-gradient(135deg, #1a1500, #1f1b00);
  border: 1px solid #3a3010;
}
.result-cta-block--learn {
  background: #0e0e0e; border: 1px solid #1e1e1e;
}
.result-cta-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: #8a6d1a; margin: 0 0 10px;
}
.result-cta-heading {
  font-size: 1.25rem; font-weight: 700; color: #f0e8d0;
  margin: 0 0 12px; line-height: 1.3;
}
.result-cta-sub {
  color: #888; font-size: 0.93rem; line-height: 1.7;
  margin: 0 0 22px; font-style: italic;
}
.result-cta-btn {
  display: inline-block;
  background: linear-gradient(135deg, #d4af37, #b8962e);
  color: #0a0a0a; font-weight: 700;
  padding: 13px 32px; border-radius: 10px;
  text-decoration: none; font-size: 1rem;
  transition: opacity 0.2s, transform 0.15s;
}
.result-cta-btn:hover { opacity: 0.88; transform: translateY(-1px); }
.result-cta-btn--secondary {
  background: #1e1e1e; color: #d4af37;
  border: 1px solid #3a3010;
}
.result-cta-btn--secondary:hover { background: #252505; }

/* ---- REPEAT ---- */
.result-repeat {
  text-align: center; display: flex;
  align-items: center; justify-content: center; gap: 12px;
}
.repeat-link { color: #666; font-size: 0.9rem; text-decoration: none; }
.repeat-link:hover { color: #d4af37; }
.repeat-sep { color: #333; }

/* ---- RESPONSIVE ---- */
@media (max-width: 600px) {
  .assessment-main { padding: 24px 16px 60px; }
  .assessment-title { font-size: 1.5rem; }
  .optin-grid { grid-template-columns: 1fr; }
  .optin-field--full { grid-column: auto; }
  .result-cta-block { padding: 24px 18px; }
  .score-zones-legend { flex-direction: column; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .progress-fill { transition: none; }
  .result-score-fill { transition: none; }
  .assessment-submit { transition: none; }
  .result-cta-btn { transition: none; }
}