/* ==========================================================================
   KISILIK TESTI — "Ruhunun Estiği Yere Git" (.tst)
   --------------------------------------------------------------------------
   Kampanya sayfasi: site menusu yok, ekranin ortasinda tek kart. Uc asama
   (giris / sorular / iletisim) ve ayri sonuc sayfasi. Prototipte bu sayfa
   bos iskelet oldugu icin tasarim tema bilesenleriyle kuruldu
   (bt, onk, alan, kart izgarasi).
   ========================================================================== */

.sf-test { --hd-yer: 0px; background: var(--g-koyu); min-height: 100vh; }

.tst { max-width: 760px; margin: 0 auto; padding: var(--s6) var(--gut) var(--s9); }

/* Ust serit: site logosu + test logosu */
.tst__ust { display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
            margin-bottom: var(--s5); }
.tst__ust img { display: block; height: 40px; width: auto; }
.tst__ust .tst__lg { filter: brightness(0) invert(1); }
.tst__ust .tst__lg2 { height: 48px; }

/* Kart */
.tst__k { background: var(--white); border-radius: var(--r5); box-shadow: var(--sh4);
          padding: var(--s8) var(--s7); }
@media (max-width: 620px) { .tst__k { padding: var(--s6) var(--s4); border-radius: var(--r4); } }

/* 1) Giris */
.tst__giris { text-align: center; }
.tst__gorsel { display: block; max-width: 280px; width: 70%; height: auto; margin: 0 auto var(--s6); }
.tst__metin { font-size: var(--fs-lead); line-height: 1.7; color: var(--tx-soft); }
.tst__metin p { margin: 0 0 var(--s3); }
.tst__metin h1, .tst__metin h2 { font-size: var(--fs-h2); letter-spacing: var(--ls-t); color: var(--tx); margin: 0 0 var(--s4); }
.tst__basla { margin-top: var(--s6); min-width: 240px; }

/* 2) Sorular */
.tst__ilr { margin-bottom: var(--s6); }
.tst__ilr-s { display: flex; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s2);
              font-size: var(--fs-2xs); font-weight: var(--fw-700); color: var(--tx-mute); }
.tst__ilr-c { height: 8px; background: var(--mist-2); border-radius: var(--rp); overflow: hidden; }
.tst__ilr-c > div { height: 100%; width: 0; background: var(--g-brand); border-radius: var(--rp); }

.tst__soru { margin: 0 0 var(--s5); font-size: var(--fs-h3); font-weight: var(--fw-800);
             line-height: 1.35; letter-spacing: var(--ls-t); color: var(--tx); }
.tst__soru b { display: block; margin-bottom: var(--s2); font-size: var(--fs-2xs); letter-spacing: var(--ls-cap);
               text-transform: uppercase; color: var(--brand); }

.tst__cvp { display: grid; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.tst__cvp .answer { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4);
                    font-size: var(--fs-s); font-weight: var(--fw-600); color: var(--tx);
                    background: var(--white); border: 1.5px solid var(--line); border-radius: var(--r3);
                    cursor: pointer; transition: all var(--t1); }
.tst__cvp .answer:hover { border-color: var(--brand-200); background: var(--brand-50); }
.tst__no { flex: none; display: inline-flex; align-items: center; justify-content: center;
           width: 30px; height: 30px; font-size: var(--fs-2xs); font-weight: var(--fw-800);
           color: var(--tx-mute); background: var(--mist); border-radius: var(--rp); }
.tst__cvp .answer > span:nth-child(2) { flex: 1; }
.tst__tik { flex: none; color: var(--brand); opacity: 0; transition: opacity var(--t1); }
.tst__cvp .answer.secili { border-color: var(--brand); background: var(--brand-50); box-shadow: 0 0 0 3px var(--brand-50); }
.tst__cvp .answer.secili .tst__no { color: var(--white); background: var(--brand); }
.tst__cvp .answer.secili .tst__tik { opacity: 1; }

.tst__ey { display: flex; justify-content: space-between; gap: var(--s3); margin-top: var(--s6); }
.tst__ey .bt { flex: 1; justify-content: center; }
.tst__ipucu { margin-top: var(--s4); text-align: center; font-size: var(--fs-3xs); color: var(--tx-faint); }
@media (max-width: 620px) { .tst__ipucu { display: none; } }

/* 3) Iletisim */
.tst__ok { display: flex; gap: var(--s3); align-items: flex-start; margin-bottom: var(--s6);
           padding: var(--s4); font-size: var(--fs-s); line-height: 1.6; color: #12654A;
           background: var(--ok-bg); border: 1px solid #BFE6D4; border-radius: var(--r3); }
.tst__ok svg { flex: none; margin-top: 2px; color: var(--ok); }
.tst__frm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.tst__frm .alan--tam { grid-column: 1 / -1; }
@media (max-width: 620px) { .tst__frm { grid-template-columns: minmax(0, 1fr); } }
.tst__frm .onk__ls { grid-column: 1 / -1; }
.tst__frm .bt { grid-column: 1 / -1; justify-content: center; }

/* Sonuc sayfasi */
.tst--genis { max-width: var(--w); }
.tst__sonuc { font-size: var(--fs-lead); line-height: 1.75; color: var(--tx-soft); }
.tst__sonuc h1, .tst__sonuc h2, .tst__sonuc h3 { color: var(--tx); letter-spacing: var(--ls-t); }
.tst__turlar { margin-top: var(--s7); }
.tst__turlar-b { margin: 0 0 var(--s5); font-size: var(--fs-h2); letter-spacing: var(--ls-t); color: var(--white); text-align: center; }
.tst__tekrar { margin-top: var(--s6); text-align: center; }