/* Zaaf testi: Karakter testiyle aynı serbest soru yerleşimi, ayrı renk ve sahneler. */
.zaaf-page{
  --accent:#e4a96e;
  --accent2:#b18bd7;
  --card:#1d1f2e;
  --card2:#242637;
  --muted:#bab8c9;
  background:
    radial-gradient(circle at 86% 6%,rgba(228,169,110,.16),transparent 30%),
    radial-gradient(circle at 4% 58%,rgba(177,139,215,.14),transparent 34%),
    #11131e;
}
.zaaf-page .wrap{width:min(800px,calc(100% - 32px))}
.zaaf-page .back-link{margin-bottom:24px}
.zaaf-page .start-btn{background:linear-gradient(135deg,#e4a96e,#c78177);color:#211d20;box-shadow:0 12px 30px rgba(228,169,110,.18)}
.zaaf-page .badge{color:#ffe2ba;border-color:rgba(228,169,110,.3);background:rgba(228,169,110,.1)}
.zaaf-page .progress > div{background:linear-gradient(90deg,#e4a96e,#b18bd7)}
.zaaf-page .answer:hover{border-color:rgba(228,169,110,.65);background:#2d2a3c}
.zaaf-page .answer.selected{border-color:#e4a96e;outline-color:rgba(228,169,110,.18);background:#38313e}
.zaaf-page .mode-label{color:#f7d3ab}
.zaaf-page .quick-note{color:#ffe2ba;border-color:rgba(228,169,110,.25);background:rgba(228,169,110,.08)}
.zaaf-page .mystery-note{color:#ebdcfa;border-color:rgba(177,139,215,.25);background:rgba(177,139,215,.08)}

/* Girişte geniş boşluk ve tek bir sembol var; soru ekranında dış kart yok. */
.zaaf-intro{min-height:calc(100vh - 160px);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:24px 0 80px}
.zaaf-kicker{color:#edbc88;font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.zaaf-intro-mark{font-size:80px;line-height:1;margin:26px 0 20px;filter:drop-shadow(0 12px 30px rgba(228,169,110,.25))}
.zaaf-intro h1{font-size:clamp(48px,9vw,86px);line-height:1.02;max-width:760px;margin:0 0 20px}
.zaaf-intro h1 em{font-style:normal;color:#f3c894}
.zaaf-intro p{max-width:650px;margin:0 0 30px;color:var(--muted);font-size:clamp(17px,2.4vw,21px);line-height:1.65}

/* Her soru kendi sahnesi ve dört serbest şık kartıyla gösterilir. */
.zaaf-page #quizScreen .scene{
  min-height:175px;margin:4px 0 26px;padding:16px 0;overflow:visible;border:0;border-radius:0;
  background:
    radial-gradient(ellipse 36% 65% at 45% 40%,rgba(228,169,110,.17),transparent 100%),
    radial-gradient(ellipse 30% 60% at 60% 65%,rgba(177,139,215,.13),transparent 100%);
}
.zaaf-page #quizScreen .scene::before,.zaaf-page #quizScreen .scene::after{display:none}
.zaaf-page .scene-caption{color:#ded4da;font-size:15px}
.zaaf-page .answer{display:flex;align-items:center;gap:15px;min-height:78px}
.zaaf-page .answer-icon{flex:none;font-size:26px;line-height:1}
.zaaf-page .answer-text{font-weight:650}
.zaaf-page .visual-answer{min-height:148px;align-items:flex-start;padding-top:60px}
.zaaf-page .visual-answer .answer-icon{top:17px;left:18px;font-size:32px}
.zaaf-page .answer-detail[hidden]{display:none}

/* 20. soru: dört ayrı kapı. Sayı ve ilerleme çubuğu motor tarafından gizlenir. */
.zaaf-page .doors{grid-template-columns:repeat(2,minmax(0,1fr))}
.zaaf-page .doors .answer{
  position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  min-height:270px;padding:160px 19px 20px;text-align:center;
  background:radial-gradient(circle at 50% 28%,rgba(228,169,110,.16),transparent 52%),var(--card2);
}
.zaaf-page .doors .answer:nth-child(2){background:radial-gradient(circle at 50% 28%,rgba(177,139,215,.18),transparent 52%),var(--card2)}
.zaaf-page .doors .answer:nth-child(3){background:radial-gradient(circle at 50% 28%,rgba(98,187,190,.15),transparent 52%),var(--card2)}
.zaaf-page .doors .answer:nth-child(4){background:radial-gradient(circle at 50% 28%,rgba(224,139,141,.14),transparent 52%),var(--card2)}
.zaaf-page .doors .answer::before{
  content:"";position:absolute;top:20px;left:50%;width:92px;height:122px;transform:translateX(-50%);
  border:2px solid rgba(245,204,155,.52);border-bottom:0;border-radius:48px 48px 0 0;
  background:linear-gradient(160deg,rgba(245,204,155,.12),rgba(245,204,155,.01));
  box-shadow:inset 0 0 22px rgba(245,204,155,.08);
}
.zaaf-page .doors .answer::after{content:"";position:absolute;top:111px;left:calc(50% + 28px);width:7px;height:7px;border-radius:50%;background:#efc38d}
.zaaf-page .doors .answer-icon{position:absolute;top:62px;left:0;right:0;z-index:1;font-size:32px}
.zaaf-page .doors .answer-text{position:relative;z-index:1;font-size:21px;font-weight:800}
.zaaf-page .doors .answer-detail{position:relative;z-index:1;display:block;margin-top:7px;color:#cfc9d6;font-size:13px;line-height:1.4}

/* Sonuçlar ayrı sayfadadır. İki eğilim ve sözler tek dış çerçeveye sıkışmaz. */
.zaaf-result-head{margin:28px 0 30px}
.zaaf-result-head h1{font-size:clamp(38px,6vw,65px);max-width:790px;margin:6px 0 17px}
.zaaf-result-explain{max-width:680px;color:var(--muted);font-size:15px;line-height:1.6}
.zaaf-result-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:28px 0}
.zaaf-result-item{display:flex;flex-direction:column;gap:12px;min-height:185px;padding:23px;background:linear-gradient(145deg,rgba(228,169,110,.1),rgba(177,139,215,.04)),var(--card);border:1px solid rgba(228,169,110,.27);border-radius:19px}
.zaaf-result-item.secondary{background:linear-gradient(145deg,rgba(177,139,215,.1),rgba(228,169,110,.03)),var(--card);border-color:rgba(177,139,215,.25)}
.zaaf-result-item span{color:#efc08c;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.07em}
.zaaf-result-item strong{font-size:clamp(21px,3vw,28px);line-height:1.2}
.zaaf-result-item b{margin-top:auto;color:#f4cea6;font-size:18px}
.zaaf-insights{max-width:760px}
.zaaf-insights > p{color:#d3d0dd;font-size:17px;line-height:1.7;margin:0 0 18px}
.zaaf-insights #primaryContext{color:#f2d6b2}
.zaaf-step,.zaaf-secondary-copy{padding:19px 21px;margin:24px 0;border-left:3px solid #e4a96e;border-radius:0 13px 13px 0;background:rgba(228,169,110,.07)}
.zaaf-secondary-copy{border-color:#b18bd7;background:rgba(177,139,215,.08)}
.zaaf-step strong,.zaaf-secondary-copy strong{display:block;margin-bottom:8px}
.zaaf-step p,.zaaf-secondary-copy p{margin:0;color:#d0cdd8;line-height:1.6}
.zaaf-insights #consistencyNote{color:#b3b1c3;font-size:14px}
.zaaf-page .preview-tools strong{color:#ffe2ba}
.zaaf-page .share-button{border-color:rgba(228,169,110,.45);background:rgba(228,169,110,.14)}
.zaaf-page .share-button.whatsapp{border-color:rgba(48,213,200,.35);background:rgba(48,213,200,.12)}

@media(max-width:680px){
  .zaaf-intro{min-height:calc(100svh - 100px);padding:15px 0 60px}
  .zaaf-intro-mark{font-size:66px;margin:18px 0}
  .zaaf-page #quizScreen .scene{min-height:145px}
  .zaaf-page .doors .answer{min-height:220px;padding:125px 10px 15px}
  .zaaf-page .doors .answer::before{top:18px;width:68px;height:94px;border-radius:38px 38px 0 0}
  .zaaf-page .doors .answer::after{top:92px;left:calc(50% + 20px)}
  .zaaf-page .doors .answer-icon{top:50px;font-size:25px}
  .zaaf-page .doors .answer-text{font-size:17px}
  .zaaf-page .doors .answer-detail{font-size:11px}
  .zaaf-result-pair{grid-template-columns:1fr}
}