/* ═══════════════════════════════════════════════════════════════
   PSİKOTEST — Öğrenci Test Çözme Ekranı (Standalone, herkese açık)
   ═══════════════════════════════════════════════════════════════ */

* { box-sizing:border-box; }
body {
    margin:0; font-family:'Plus Jakarta Sans', -apple-system, sans-serif;
    background:#f4f5fb; color:#1e293b; min-height:100vh; display:flex; flex-direction:column;
}

.pk-header { background:#fff; border-bottom:1px solid #e5e7eb; padding:14px 0; position:sticky; top:0; z-index:30; }
.pk-header-inner { max-width:720px; margin:0 auto; padding:0 20px; }
.pk-logo { height:38px; object-fit:contain; display:block; }

.pk-main { flex:1; display:flex; align-items:flex-start; justify-content:center; padding:30px 16px 60px; }
.pk-container { max-width:640px; width:100%; }

.pk-screen { background:#fff; border-radius:20px; padding:40px 32px; box-shadow:0 10px 30px rgba(15,23,42,.06); text-align:center; }
.pk-spinner { font-size:2rem; color:#6366f1; margin-bottom:14px; }

.pk-error-icon { font-size:2.6rem; color:#dc2626; margin-bottom:14px; }

/* Veli testi rozeti */
.pk-audience-badge {
    display:flex; align-items:center; justify-content:center; gap:8px; text-align:center;
    background:#334155; color:#fff; font-size:.78rem; font-weight:700; border-radius:12px;
    padding:10px 16px; margin-bottom:20px; line-height:1.4;
}

/* Giriş ekranı */
.pk-intro-icon { width:72px; height:72px; border-radius:20px; background:var(--pk-color,#6366f1); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.9rem; margin:0 auto 18px; }
.pk-intro-greet { color:#6366f1; font-weight:700; font-size:.9rem; margin-bottom:6px; }
.pk-intro h1 { font-size:1.5rem; font-weight:800; margin:0 0 12px; }
.pk-intro-exam-title { display:inline-block; background:#eef2ff; color:#4338ca; font-weight:700; font-size:.78rem; border-radius:20px; padding:5px 14px; margin:-6px auto 16px; }
.pk-intro-desc { color:#64748b; font-size:.95rem; line-height:1.6; margin-bottom:20px; }
.pk-intro-meta { display:flex; justify-content:center; gap:20px; margin-bottom:20px; font-size:.85rem; color:#475569; font-weight:600; }
.pk-intro-meta span { display:flex; align-items:center; gap:6px; }
.pk-name-field { text-align:left; margin-bottom:18px; }
.pk-name-field label { display:flex; align-items:center; gap:6px; font-size:.83rem; font-weight:700; color:#334155; margin-bottom:6px; }
.pk-name-input {
    width:100%; border:1.5px solid #e2e8f0; border-radius:12px; padding:12px 14px; font-size:.95rem;
    font-family:inherit; color:#1e293b; transition:border-color .15s;
}
.pk-name-input:focus { outline:none; border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.12); }
.pk-intro-note { background:#eef2ff; color:#4338ca; border-radius:12px; padding:12px 16px; font-size:.83rem; margin-bottom:24px; text-align:left; }
.pk-btn-start, .pk-btn-submit {
    background:linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff; border:none; border-radius:14px;
    padding:14px 32px; font-size:1rem; font-weight:700; cursor:pointer; transition:transform .15s, box-shadow .15s;
    box-shadow:0 8px 20px rgba(99,102,241,.3);
}
.pk-btn-start:hover:not(:disabled), .pk-btn-submit:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 12px 26px rgba(99,102,241,.4); }
.pk-btn-start:disabled { opacity:.4; cursor:not-allowed; box-shadow:none; }
.pk-btn-submit { width:100%; margin-top:10px; }
.pk-btn-submit:disabled { opacity:.4; cursor:not-allowed; box-shadow:none; }

/* Sorular ekranı */
#screenQuestions { text-align:left; padding:28px 24px; }
.pk-progress-wrap { margin-bottom:24px; }
.pk-progress-track { height:8px; border-radius:6px; background:#e5e7eb; overflow:hidden; }
.pk-progress-fill { height:100%; background:linear-gradient(90deg,#6366f1,#8b5cf6); width:0%; transition:width .3s; }
.pk-progress-text { font-size:.78rem; color:#64748b; margin-top:6px; text-align:right; }

.pk-q { border-bottom:1px solid #eef0f5; padding:20px 0; }
.pk-q:first-child { padding-top:0; }
.pk-q-num { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:#eef2ff; color:#6366f1; font-size:.78rem; font-weight:700; margin-right:8px; }
.pk-q-text { font-weight:700; font-size:.97rem; color:#1e293b; margin-bottom:14px; line-height:1.5; }

.pk-likert { display:flex; gap:6px; flex-wrap:wrap; }
.pk-likert-opt {
    flex:1; min-width:60px; text-align:center; border:1.5px solid #e2e8f0; border-radius:10px; padding:10px 4px;
    cursor:pointer; font-size:.72rem; color:#475569; font-weight:600; transition:all .15s; user-select:none;
}
.pk-likert-opt .num { display:block; font-size:1rem; font-weight:800; margin-bottom:3px; color:#94a3b8; }
.pk-likert-opt:hover { border-color:#a5b4fc; background:#f5f5ff; }
.pk-likert-opt.selected { background:#6366f1; border-color:#6366f1; color:#fff; }
.pk-likert-opt.selected .num { color:#fff; }

.pk-choice { display:flex; flex-direction:column; gap:8px; }
.pk-choice-opt { border:1.5px solid #e2e8f0; border-radius:12px; padding:12px 16px; cursor:pointer; font-size:.88rem; color:#334155; transition:all .15s; }
.pk-choice-opt:hover { border-color:#a5b4fc; background:#f5f5ff; }
.pk-choice-opt.selected { background:#eef2ff; border-color:#6366f1; color:#4338ca; font-weight:700; }

/* Sonuç ekranı */
.pk-result-icon { font-size:2.8rem; color:#16a34a; margin-bottom:10px; }
#screenResult h2 { font-weight:800; margin-bottom:20px; }
.pk-res-level { font-size:1.2rem; font-weight:800; margin-bottom:4px; }
.pk-res-percent { font-size:2.4rem; font-weight:800; margin-bottom:14px; }
.pk-res-summary { background:#f8fafc; border-radius:14px; padding:16px 18px; font-size:.9rem; line-height:1.6; color:#475569; text-align:left; margin-bottom:20px; }
.pk-res-bar-row { margin-bottom:14px; text-align:left; }
.pk-res-bar-label { display:flex; justify-content:space-between; font-size:.85rem; font-weight:700; color:#334155; margin-bottom:6px; }
.pk-res-bar-track { height:10px; border-radius:6px; background:#e5e7eb; overflow:hidden; }
.pk-res-bar-fill { height:100%; border-radius:6px; transition:width .5s; }
.pk-res-tips { text-align:left; margin-top:22px; background:#fff7ed; border-radius:14px; padding:16px 18px; }
.pk-res-tips h6 { font-weight:800; color:#c2410c; margin-bottom:8px; font-size:.9rem; }
.pk-res-tips ul { margin:0; padding-left:18px; }
.pk-res-tips li { font-size:.86rem; color:#78350f; margin-bottom:6px; line-height:1.5; }
.pk-career-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; margin-top:16px; text-align:left; }
.pk-career-card { border:1px solid #e2e8f0; border-radius:12px; padding:12px 14px; }
.pk-career-card .name { font-weight:800; font-size:.87rem; color:#1e293b; margin-bottom:4px; }
.pk-career-card ul { padding-left:16px; margin:0; font-size:.8rem; color:#64748b; }

.pk-footer { text-align:center; color:#94a3b8; font-size:.78rem; padding:18px; }

/* ═══════════════════════════════════════════════════════════════
   MOBİL UYUMLULUK
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:640px) {
    .pk-header { padding:10px 0; }
    .pk-header-inner { padding:0 16px; }
    .pk-logo { height:30px; }

    .pk-main { padding:14px 8px 24px; align-items:stretch; }
    .pk-container { max-width:100%; }

    .pk-screen { padding:22px 16px; border-radius:14px; }

    .pk-intro-icon { width:60px; height:60px; font-size:1.6rem; border-radius:16px; margin-bottom:14px; }
    .pk-intro-greet { font-size:.85rem; }
    .pk-intro h1 { font-size:1.22rem; line-height:1.35; }
    .pk-intro-desc { font-size:.88rem; }
    .pk-intro-meta { gap:12px; flex-wrap:wrap; font-size:.8rem; }
    .pk-intro-note { padding:10px 12px; font-size:.8rem; }
    .pk-audience-badge { font-size:.72rem; padding:9px 12px; text-align:left; }
    .pk-name-input { padding:11px 12px; font-size:.9rem; }

    .pk-btn-start { width:100%; padding:14px 18px; }

    /* Soru ekranı: ilerleme çubuğu üstte sabit kalır */
    #screenQuestions { padding:16px 14px 90px; }
    .pk-progress-wrap {
        position:sticky; top:51px; z-index:20; background:#fff;
        margin:-16px -14px 16px; padding:12px 14px 10px; box-shadow:0 4px 10px rgba(15,23,42,.05);
    }

    .pk-q { padding:16px 0; }
    .pk-q-text { font-size:.9rem; }

    .pk-likert { gap:5px; }
    .pk-likert-opt { min-width:0; flex:1 1 18%; font-size:.62rem; padding:9px 2px; border-radius:9px; }
    .pk-likert-opt .num { font-size:.92rem; }

    /* Testi Tamamla butonu ekranın altında sabit kalır, her zaman erişilebilir */
    .pk-btn-submit {
        position:fixed; left:0; right:0; bottom:0; z-index:25; margin:0;
        border-radius:0; padding:15px 16px calc(15px + env(safe-area-inset-bottom));
        box-shadow:0 -6px 18px rgba(15,23,42,.12);
    }

    /* Sonuç ekranı */
    .pk-result-icon { font-size:2.3rem; }
    #screenResult h2 { font-size:1.15rem; margin-bottom:14px; }
    .pk-res-percent { font-size:2rem; }
    .pk-res-summary, .pk-res-tips { padding:13px 14px; }
    .pk-career-grid { grid-template-columns:1fr; }
}

@media (max-width:380px) {
    .pk-likert-opt { font-size:.58rem; padding:7px 1px; }
    .pk-likert-opt .num { font-size:.82rem; }
}