/* ===== adapter-tests.css =====
   Light AI look for start, loader, test, result screens
   Works with class names used in your pages & lt-core.v1.js
*/

/* ---------- tokens ---------- */
:root{
  --brand:#2b77ff;
  --bg:#f7f9ff;
  --panel:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;
  --accent:#cdd6f4;
  --radius:16px;
  --shadow:0 8px 24px rgba(0,0,0,.06);
}

/* ---------- base ---------- */
.leveltest-wrapper{
  background:var(--bg);
  color:var(--text);
  padding:24px 12px 56px;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
}
.lt-header{max-width:760px;margin:0 auto 16px}
.lt-title{margin:0 0 6px;font-weight:800;font-size:28px;line-height:1.25;color:#0f172a}
.lt-desc{margin:0 0 16px;color:var(--muted)}
.lt-card-area{max-width:760px;margin:0 auto}

/* ---------- buttons ---------- */
.lt-primary-btn{
  appearance:none;outline:0;cursor:pointer;
  padding:12px 18px;border:0;border-radius:14px;
  background:var(--brand);color:#fff;font-weight:800;
  box-shadow:var(--shadow);transition:transform .06s ease,opacity .15s ease;
}
.lt-primary-btn:hover{opacity:.95}
.lt-primary-btn:active{transform:translateY(1px)}

.lt-secondary-btn{
  appearance:none;outline:0;cursor:pointer;
  padding:10px 14px;border:1px solid var(--border);border-radius:12px;
  background:#fff;color:#111827;font-weight:700;
}
.lt-secondary-btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- select / filters ---------- */
.filter-item{display:flex;flex-direction:column;gap:6px;margin:0 0 12px}
.filter-label{font-weight:700;color:#0f172a}
.filter-select{
  width:260px;max-width:100%;
  padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:#fff;
}

/* ---------- loader (AI light) ---------- */
.lt-loader{display:flex;flex-direction:column;align-items:center;gap:12px;padding:28px 0}
.lt-loader-ring{
  width:64px;height:64px;border-radius:999px;
  border:4px solid #e9eefb;border-top-color:var(--brand);
  animation:spin 1s linear infinite;
  box-shadow:0 0 0 6px rgba(43,119,255,.06), 0 0 30px rgba(43,119,255,.12) inset;
}
@keyframes spin{to{transform:rotate(360deg)}}
.lt-loader-lines{min-height:22px}
.lt-loader-lines p{margin:0;font-size:14px;color:var(--muted)}

/* ---------- question ---------- */
.lt-question-text{
  font-size:18px;line-height:1.45;
  background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow);
}
.lt-figure{margin:0 0 10px;text-align:center}
.lt-figure img{max-width:100%;height:auto;border-radius:12px;border:1px solid var(--border);background:#fff}

/* ---------- options ---------- */
.lt-options{
  display:grid;gap:10px;margin-top:12px;
  grid-template-columns:repeat(1,minmax(0,1fr));
}
.lt-option{
  display:block;width:100%;text-align:left;cursor:pointer;
  background:#fff;border:1.5px solid var(--border);border-radius:14px;
  padding:12px 14px;font-weight:700;
  transition:border-color .15s ease, box-shadow .15s ease, transform .06s ease, background .15s ease;
}
.lt-option:hover{border-color:var(--accent);box-shadow:0 4px 14px rgba(0,0,0,.05)}
.lt-option:active{transform:translateY(1px)}
.lt-option.is-selected{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(43,119,255,.12);
  background:linear-gradient(0deg,#ffffff, #fbfdff);
}

/* ---------- nav row ---------- */
.lt-nav-row{max-width:760px;margin:12px auto 0;display:flex;gap:8px;align-items:center}

/* ---------- result ---------- */
.lt-result-area .fancy-card{
  background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:var(--shadow)
}
.lt-result-area .subcard{
  background:#fff;border:1px solid #eef2ff;border-radius:12px;padding:10px
}

/* ---------- grade pills (if used on /tests) ---------- */
.grade-bar{max-width:760px;margin:8px auto 16px;display:flex;gap:8px;flex-wrap:wrap}
.grade-pill{
  padding:8px 14px;border:1px solid var(--border);border-radius:999px;background:#fff;cursor:pointer;font-weight:700
}
.grade-pill.is-active{border-color:var(--accent);box-shadow:0 2px 6px rgba(0,0,0,.05)}

/* ---------- responsive ---------- */
@media (max-width:640px){
  .lt-title{font-size:24px}
  .lt-question-text{font-size:17px}
  .lt-options{gap:8px}
  .lt-primary-btn{width:100%}
  .filter-select{width:100%}
}
.lt-option.selected {
  color: #fff; /* Seçili şıkta yazılar beyaz görünsün */
  background: linear-gradient(90deg,#5a27ff,#a832ff); /* Hover ile aynı renk tonu */
}
/* ---- OPTION FIX: görünür metin + doğru hizalama ---- */
.lt-options{display:grid;gap:12px}

.lt-option{
  display:flex; align-items:center; gap:12px;
  background:#fff; border:1px solid #dfe3eb; border-radius:12px;
  padding:14px 16px; line-height:1.45;
  color:#111 !important;           /* metin görünür olsun */
}

.lt-option div{color:#111 !important}  /* bazı temalar label içi rengi override ediyor */

.lt-option input[type="radio"]{
  flex-shrink:0; margin-top:2px; accent-color:#5a27ff;
}

/* seçilince mor degrade + metin beyaz */
.lt-option.selected{
  background:linear-gradient(90deg,#5a27ff,#a832ff);
  border-color:#5a27ff; box-shadow:0 0 0 3px rgba(90,39,255,.12);
  color:#fff !important;
}
.lt-option.selected div{color:#fff !important}

/* === Start Hero (AI vibe) === */
.start-hero{
  position:relative;
  padding:56px 16px 64px;
  background: radial-gradient(1200px 600px at 10% 0%, #e9f0ff 0%, #fafbff 45%, #ffffff 100%);
  border-radius: 20px;
  overflow:hidden;
  box-shadow: 0 12px 40px rgba(31, 41, 55, 0.06);
}
.start-head{max-width:920px;margin:0 auto 20px;text-align:left}
.start-title{margin:0 0 6px;font-size:42px;line-height:1.1;font-weight:900;letter-spacing:-0.02em}
.start-sub{margin:0;color:#6b7280;font-size:18px}

/* Soft moving aurora */
.start-aurora{
  position:absolute; inset:-20%;
  background: conic-gradient(from 180deg, rgba(99,102,241,.18), rgba(168,85,247,.12), rgba(56,189,248,.12), rgba(99,102,241,.18));
  filter: blur(60px);
  animation: auroraMove 16s linear infinite;
  pointer-events:none;
}
.start-aurora-2{animation-duration:22s;opacity:.7}
@keyframes auroraMove{
  0%{transform:translate3d(-2%, -2%, 0) rotate(0deg)}
  50%{transform:translate3d(2%, 3%, 0) rotate(180deg)}
  100%{transform:translate3d(-2%, -2%, 0) rotate(360deg)}
}

/* Glass card */
.start-card{
  position:relative; z-index:1;
  max-width:780px; margin:12px auto 0;
  background:rgba(255,255,255,.65);
  border:1px solid rgba(148,163,184,.22);
  border-radius:20px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .08);
  backdrop-filter: blur(10px);
  padding:22px;
}
.start-fields{display:flex; gap:16px; align-items:flex-end; flex-wrap:wrap}
.start-field{display:flex;flex-direction:column;gap:8px;min-width:220px}
.start-label{font-weight:700;color:#111827}
.start-select{
  padding:12px 14px;border:1px solid var(--border);border-radius:12px;
  background:#fff; font-size:16px; outline: none;
}
.start-select:focus{border-color:#a78bfa; box-shadow:0 0 0 4px rgba(167,139,250,.15)}

/* Fancy Start button */
.start-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  margin-top:16px; gap:10px; width:100%;
  background:linear-gradient(90deg,#6366f1, #8b5cf6, #3b82f6);
  color:#fff; font-weight:800; font-size:16px;
  padding:14px 18px; border:0; border-radius:14px; cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 12px 30px rgba(59,130,246,.25);
}
.start-btn:hover{transform: translateY(-1px); box-shadow: 0 16px 34px rgba(59,130,246,.32)}
.start-btn:active{transform: translateY(0)}
.start-btn .spark{
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: radial-gradient(200px 60px at 20% 50%, rgba(255,255,255,.35), transparent 65%),
              radial-gradient(200px 60px at 80% 50%, rgba(255,255,255,.25), transparent 65%);
  mix-blend-mode: overlay;
  animation: sparkPulse 2.6s ease-in-out infinite;
}
@keyframes sparkPulse{0%,100%{opacity:.75}50%{opacity:1}}
.btn-text{position:relative; z-index:1}

.start-hint{margin-top:10px; color:#6b7280; font-size:14px; display:flex; align-items:center; gap:8px}
.start-hint .dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 10px #22c55e}

/* Mobile tweaks */
@media (max-width:640px){
  .start-hero{padding:36px 14px 46px;border-radius:16px}
  .start-title{font-size:28px}
  .start-sub{font-size:16px}
  .start-card{padding:16px;border-radius:16px}
}

/* Test header (sabit başlık) */
.lt-test-header{max-width:760px;margin:8px auto 10px}
.lt-test-title{margin:0;font-size:28px;font-weight:800}
.lt-test-sub{margin:4px 0 0;opacity:.85}

/* Finish overlay (AI evaluating) */
#lt-finish-overlay{position:fixed;inset:0;backdrop-filter:blur(4px);background:rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center;z-index:9999}
.lt-ai-overlay{display:flex;flex-direction:column;align-items:center;gap:12px;padding:22px 26px;border-radius:16px;background:#fff;box-shadow:0 8px 30px rgba(0,0,0,.12)}

/* === Modern AI Start Screen Upgrade === */
.lt-start-screen.start-hero {
  position: relative;
  padding: 64px 20px 72px;
  background: radial-gradient(1000px 600px at 10% 0%, #e9f0ff 0%, #fafbff 45%, #ffffff 100%);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(31, 41, 55, 0.06);
}

/* Aurora animasyonu */
.start-aurora {
  position: absolute;
  inset: -20%;
  background: conic-gradient(from 180deg, rgba(99,102,241,.18), rgba(168,85,247,.12), rgba(56,189,248,.12), rgba(99,102,241,.18));
  filter: blur(60px);
  animation: auroraMove 16s linear infinite;
  pointer-events: none;
}
.start-aurora-2 { animation-duration: 22s; opacity: .7; }
@keyframes auroraMove {
  0% { transform: translate3d(-2%, -2%, 0) rotate(0deg); }
  50% { transform: translate3d(2%, 3%, 0) rotate(180deg); }
  100% { transform: translate3d(-2%, -2%, 0) rotate(360deg); }
}

/* Başlık kısmı */
.start-head {
  max-width: 760px;
  margin: 0 auto 20px;
  text-align: left;
  position: relative;
  z-index: 2;
}
.start-title {
  margin: 0 0 6px;
  font-size: 42px;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -0.02em;
  background: linear-gradient(90deg, #5b21b6, #2563eb);
  -webkit-background-clip: text;
  color: transparent;
}
.start-sub {
  margin: 0;
  color: var(--muted);
  font-size: 18px;
}

/* Card alanı */
.start-card {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 20px auto 0;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(148,163,184,.22);
  border-radius: 20px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .08);
  backdrop-filter: blur(12px);
  padding: 28px;
}

/* Grade butonları */
.grade-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.grade-pill {
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
  font-weight: 700;
  color: #1a1a1a;
  transition: all .15s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,.03);
}
.grade-pill:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
}
.grade-pill.is-active {
  background: linear-gradient(90deg,#5a27ff,#a832ff);
  color: #fff;
  border-color: #5a27ff;
  box-shadow: 0 6px 20px rgba(90,39,255,.25);
}

/* Start butonu */
.start-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  gap: 10px;
  width: 100%;
  background: linear-gradient(90deg,#6366f1,#8b5cf6,#3b82f6);
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  padding: 14px 18px;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 12px 30px rgba(59,130,246,.25);
}
.start-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(59,130,246,.32);
}
.start-btn:active {
  transform: translateY(0);
  opacity: .9;
}
.start-btn .spark {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(200px 60px at 20% 50%, rgba(255,255,255,.35), transparent 65%),
              radial-gradient(200px 60px at 80% 50%, rgba(255,255,255,.25), transparent 65%);
  mix-blend-mode: overlay;
  animation: sparkPulse 2.6s ease-in-out infinite;
}
@keyframes sparkPulse {
  0%,100% { opacity: .75; }
  50% { opacity: 1; }
}
.btn-text { position: relative; z-index: 1; }

/* Hint kısmı */
.start-hint {
  margin-top: 10px;
  color: #6b7280;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.start-hint .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 10px #22c55e;
}

/* Responsive */
@media (max-width: 640px){
  .start-hero { padding: 42px 14px 52px; border-radius: 16px; }
  .start-title { font-size: 30px; }
  .start-sub { font-size: 16px; }
  .start-card { padding: 18px; border-radius: 16px; }
  .grade-pill { flex: 1 1 45%; text-align: center; }
}

/* Field’ları aynı satıra düzgün dizer, Start’ı sağa yaslar */
.start-fields{display:flex; gap:16px; align-items:flex-end; flex-wrap:wrap; justify-content:space-between}
.start-field{display:flex; flex-direction:column; gap:8px; min-width:220px}
.start-field:nth-child(1){flex:1 1 520px}    /* grade grubu genişler */
.start-field:nth-child(2){flex:0 0 300px}    /* start butonu kutusu sabit */

/* Pill’lerde yükseklik/spacing ve aktif gölge */
.grade-pill{min-width:140px; text-align:center; padding:12px 20px; border-radius:999px}
.grade-pill.is-active{box-shadow:0 12px 30px rgba(90,39,255,.25)}

/* Mobilde alt alta diz */
@media (max-width: 640px){
  .start-field:nth-child(1), .start-field:nth-child(2){flex:1 1 100%}
  .grade-pill{flex:1 1 calc(50% - 10px)}
}