/* Uzman Akademi Ölçüm — sade, öğrenci dostu, pastel tema */
:root {
  /* Marka paleti: lacivert + turuncu, pastel tonlar */
  --bg: #faf9f6;
  --ink: #1e2a3a;
  --muted: #6b7686;
  --primary: #1f3a5f;          /* lacivert */
  --primary-dark: #162c4a;
  --accent: #f28c38;           /* turuncu */
  --accent-dark: #d9762a;
  --pastel-blue: #e4eaf3;      /* pastel lacivert */
  --pastel-blue-ink: #1f3a5f;
  --pastel-orange: #fde8d6;    /* pastel turuncu */
  --pastel-orange-ink: #9a5116;
  --pastel-green: #e4f3e8;     /* anlamsal: doğru */
  --pastel-green-ink: #2f6b44;
  --pastel-pink: #fbe4e6;      /* anlamsal: yanlış */
  --pastel-pink-ink: #8a3a45;
  --pastel-yellow: var(--pastel-orange);
  --border: #e6e4df;
}

html { font-size: 15px; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body > .container { flex: 1; }

.topbar {
  background: #fff;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
}
.navbar-brand { font-weight: 600; color: var(--primary-dark) !important; }

.page-header { margin-bottom: 1.5rem; }
.page-header h1 { font-size: 1.6rem; font-weight: 600; margin-bottom: .25rem; }

.card { border: 1px solid var(--border); border-radius: .75rem; }
.card-pastel-blue   { background: var(--pastel-blue); }
.card-pastel-green  { background: var(--pastel-green); }
.card-pastel-yellow { background: var(--pastel-orange); }
.card-pastel-orange { background: var(--pastel-orange); }
.card-pastel-pink   { background: var(--pastel-pink); }

.btn-primary { background: var(--primary); border-color: var(--primary); }
.btn-primary:hover, .btn-primary:focus { background: var(--primary-dark); border-color: var(--primary-dark); }
.form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 .2rem rgba(31,58,95,.15); }

.footer {
  border-top: 1px solid var(--border);
  padding: 1rem 0;
  font-size: .85rem;
  background: #fff;
}

/* Giriş ekranı */
.auth-body { background: var(--bg); }
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.auth-card { width: 100%; max-width: 400px; }

/* Rozetler */
.badge-pastel-blue  { background: var(--pastel-blue);  color: var(--pastel-blue-ink); }
.badge-pastel-green { background: var(--pastel-green); color: var(--pastel-green-ink); }

/* Kart-bağlantı */
.card-link { display: block; color: inherit; text-decoration: none; transition: transform .1s; }
.card-link:hover { transform: translateY(-2px); color: inherit; }

/* Formlar */
.narrow-form { max-width: 720px; }
.template-option { cursor: pointer; height: 100%; }
.template-option:has(input:checked) { outline: 2px solid var(--primary); }

/* Görsel düzenleyici (soru editörü) */
.image-editor-frame {
  position: relative; width: 100%; max-width: 560px; margin: 0 auto;
  background: var(--pastel-blue); border: 1px solid var(--border); border-radius: .75rem; overflow: hidden;
  touch-action: none; user-select: none; cursor: grab;
}
.image-editor-frame.dragging { cursor: grabbing; }
.image-editor-frame canvas { display: block; width: 100%; height: auto; }
.image-editor-hint {
  position: absolute; left: 50%; bottom: .5rem; transform: translateX(-50%);
  padding: .2rem .6rem; border-radius: 999px; font-size: .8rem;
  background: rgba(31, 58, 95, .7); color: #fff; pointer-events: none;
}
.image-editor-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .75rem; }
.image-editor-tools .form-range { min-width: 140px; }

/* Soru görselleri */
.question-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: .5rem; border: 1px solid var(--border); }
.question-image-preview, .question-image { max-width: 100%; max-height: 360px; border-radius: .5rem; border: 1px solid var(--border); }

/* Ölçüm noktası seçimi (Teste Başla) */
.point-option { display: inline-flex; align-items: center; cursor: pointer; }
.point-option:has(input:checked) { background: var(--primary); color: #fff; }
.point-option input { margin-top: 0; }
.compare-table th { font-weight: 500; color: var(--muted); }

/* İşlem sorusu: sayılar alt alta (+ − ×) veya bölme düzeni (÷). Kağıttaki görünümün aynısı. */
.op {
  --op-ink: var(--primary-dark);
  --op-line: 3px solid var(--op-ink);
  display: inline-grid;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--op-ink);
  margin: .25rem 0 1rem 1.5rem;
  user-select: none;
}
.op-column { grid-template-columns: auto; justify-items: end; }
.op-column .op-top { padding: 0 .35rem 0 2rem; }
.op-column .op-bottom { padding: 0 .35rem 0 .35rem; border-bottom: var(--op-line); position: relative; }
.op-column .op-sign { position: absolute; left: 0; }
.op-column .op-bottom { padding-left: 2rem; }
.op-column .op-answer { height: 1.4em; min-width: 100%; }

.op-division { grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 0; }
.op-division .op-dividend { grid-column: 1; grid-row: 1; padding: 0 .5rem 0 2rem; border-right: var(--op-line); text-align: right; }
.op-division .op-divisor { grid-column: 2; grid-row: 1; padding: 0 1.25rem 0 .5rem; border-bottom: var(--op-line); min-width: 3.5em; }
.op-division .op-work {
  grid-column: 1; grid-row: 2;
  padding: 0 .5rem 0 0; min-height: 1.4em;
  border-right: var(--op-line); border-bottom: var(--op-line);
  text-align: left; font-weight: 400;
}
.op-division .op-quotient { grid-column: 2; grid-row: 2; min-height: 1.4em; }

@media (max-width: 576px) { .op { font-size: 1.6rem; margin-left: 1rem; } }

/* Test uygulama */
.reading-text {
  font-size: var(--reading-size, 1.25rem);
  line-height: 1.9;
  white-space: pre-wrap;
  padding: 1rem 1.25rem;
  background: #fff;
  border-radius: .75rem;
  border: 1px solid var(--border);
}
.reading-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 1rem; padding: .75rem 1rem;
  background: var(--pastel-blue); border-radius: .75rem;
}

.option-row {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem .9rem; margin-bottom: .5rem;
  background: #fff; border: 1px solid var(--border); border-radius: .5rem; cursor: pointer;
}
.option-row:hover { background: var(--pastel-blue); }
/* Kısa şıklar (sayı vb.): 2×2 büyük kutu */
.options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.options-grid .option-row { margin: 0; justify-content: center; padding: 1rem; font-size: 1.4rem; font-weight: 600; }
.options-grid .option-row input { margin: 0; }

/* Bitirme onayı (öğrenci ekranı) */
.finish-confirm {
  position: fixed; inset: 0; z-index: 1050;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  background: rgba(31, 58, 95, .35);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.finish-confirm-card {
  width: 100%; max-width: 480px; padding: 1.5rem 1.5rem 1.25rem;
  background: #fff; border-radius: 1rem; border: 1px solid var(--border);
  box-shadow: 0 20px 50px rgba(31, 58, 95, .25);
}
.finish-unanswered { padding: .6rem .9rem; border-radius: .5rem; background: var(--pastel-orange); color: var(--pastel-orange-ink); }
@media (prefers-reduced-transparency: reduce) { .finish-confirm { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(31, 58, 95, .6); } }

/* Görsel + yanında yazı */
.question-figure { display: flex; gap: 1.25rem; align-items: flex-start; }
.question-figure .question-image { flex: 0 1 50%; max-width: 50%; }
.question-figure-text { flex: 1 1 0; font-size: 1.15rem; line-height: 1.7; white-space: pre-wrap; }
@media (max-width: 576px) { .question-figure { flex-direction: column; } .question-figure .question-image { max-width: 100%; } }

/* Görselli şıklar: görsel üstte, metin altta, kutu ortalı */
.options-with-images .option-row { flex-direction: column; align-items: center; gap: .5rem; padding: .9rem; }
.options-with-images .option-row input { align-self: flex-start; }
.option-image { max-width: 100%; max-height: 180px; border-radius: .5rem; object-fit: contain; }

/* Editörde şık görseli satırı */
.option-edit-image { display: flex; align-items: center; gap: .6rem; padding: .4rem .6rem; background: var(--pastel-blue); border-radius: 0 0 .5rem .5rem; }
.option-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: .4rem; border: 1px solid var(--border); background: #fff; }

/* Yazı boyutu düğmeleri */
.reading-tools { display: flex; align-items: center; justify-content: flex-end; gap: .4rem; margin-bottom: .5rem; }

/* İlerleme: sayaç değil; kaç soru cevaplandı / kaçıncı bölüm */
.run-progress { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.run-progress-track { flex: 1; height: 8px; background: var(--pastel-blue); border-radius: 4px; overflow: hidden; }
.run-progress-bar { height: 100%; background: var(--accent); border-radius: 4px; transition: width .3s ease; }
.run-progress-text { color: var(--muted); font-size: .9rem; white-space: nowrap; }
.option-row:has(input:checked) { background: var(--pastel-orange); border-color: #f2b27a; }
.result-table th { width: 50%; font-weight: 500; color: var(--muted); }

/* Öğrenci ekranı (menüsüz düzen) */
.run-body { background: var(--bg); }
.run-topbar { background: #fff; border-bottom: 1px solid var(--border); padding: .6rem 0; margin-bottom: 1.25rem; }
.run-container { max-width: 860px; }
.run-title h1 { font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem; }
.preview-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--pastel-orange); border: 1px dashed #f2b27a; border-radius: .75rem;
  padding: .6rem 1rem; margin-bottom: 1rem; font-size: .95rem;
}

/* Şablon menüsü */
.dropdown-menu { border-radius: .75rem; border-color: var(--border); padding: .4rem; min-width: 280px; }
.dropdown-item { border-radius: .5rem; white-space: normal; padding: .5rem .75rem; }
.dropdown-item:hover { background: var(--pastel-blue); }

/* Okuma özeti (Bitir sonrası) */
.reading-summary { display: flex; gap: .75rem; flex-wrap: wrap; }
.reading-stat { flex: 1 1 140px; background: #fff; border: 1px solid var(--border); border-radius: .75rem; padding: .75rem 1rem; text-align: center; }
.reading-stat-primary { background: var(--pastel-orange); border-color: #f2b27a; }
.reading-stat-label { font-size: .85rem; color: var(--muted); }
.reading-stat-value { font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.result-summary { font-size: 1.1rem; line-height: 1.6; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(0,0,0,.08); }
.template-menu { min-width: 320px; }
.template-menu form { margin: 0; }
.template-menu-cta { color: var(--accent-dark); margin-top: .15rem; }

/* Karne (sonuç ekranı) */
.karne { background: #fff; border: 1px solid var(--border); border-radius: 1rem; padding: 1.5rem; }
.karne-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; flex-wrap: wrap; border-bottom: 1px dashed var(--border); padding-bottom: 1rem; }
.karne-label { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.karne-name { font-size: 1.8rem; font-weight: 700; margin: .1rem 0; }
.karne-date { text-align: right; }
.karne-date-value { font-size: 1.4rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.karne-mood { font-size: 1.25rem; font-weight: 600; text-align: center; margin: 1.25rem 0; }
.karne-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem; }
.karne-stat { border-radius: .9rem; padding: 1rem; text-align: center; border: 1px solid rgba(0,0,0,.05); }
.karne-blue   { background: var(--pastel-blue); }
.karne-green  { background: var(--pastel-green); }
.karne-yellow { background: var(--pastel-orange); }
.karne-pink   { background: var(--pastel-pink); }
.karne-stat-label { font-size: .9rem; color: var(--muted); }
.karne-stat-value { font-size: 2.2rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.karne-stat-unit { font-size: .85rem; color: var(--muted); }
.karne-section { font-size: 1.1rem; font-weight: 600; margin: 1.5rem 0 .75rem; }
.karne-table .row-correct td:first-child { border-left: 4px solid #9fd3ad; }
.karne-table .row-wrong td:first-child { border-left: 4px solid #e3a5b4; }

/* İçe aktarma */
.import-example { background: #fff; border: 1px solid var(--border); border-radius: .75rem; padding: .9rem 1rem; font-size: .8rem; max-height: 420px; overflow: auto; white-space: pre-wrap; }

/* ===== Akıcı arayüz (öğrenci ekranları) ===== */
/* Basınca anında tepki: pointerdown'da küçülür (Fluid.press) */
[data-press] { transition: transform 90ms ease-out, filter 90ms ease-out; will-change: transform; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
[data-press].pressed { transform: scale(0.965); filter: brightness(.95); }
.option-row[data-press].pressed { transform: scale(0.985); background: var(--pastel-blue); }

/* Yarı saydam, yapışkan üst çubuk: içerik altından kayar */
.run-topbar {
  position: sticky; top: 0; z-index: 5;
  background: rgba(255,255,255,.66);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}

/* Tipografi: büyük başlıkta sıkı aralık, sayılarda eşit genişlik */
.run-title h1, .karne-name { letter-spacing: -0.02em; }
.karne-stat-value, .karne-date-value { font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.karne { will-change: transform, opacity; }
.karne-stat { will-change: transform, opacity; }

/* Yaylı aşama geçişlerinde ara durum */
#reading-intro, #reading-body, #reading-done, #questions-stage, [data-step], [data-section] { will-change: transform, opacity; }

@media (prefers-reduced-motion: reduce) {
  [data-press] { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .run-topbar { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

.badge-pastel-pink { background: var(--pastel-pink); color: var(--pastel-pink-ink); }
.badge-pastel-orange { background: var(--pastel-orange); color: var(--pastel-orange-ink); }

/* Turuncu vurgu: ana eylem düğmeleri (Başla, Bitir, Testi Bitir) */
.btn-success { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-success:hover, .btn-success:focus { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.btn-outline-primary { color: var(--primary); border-color: var(--primary); }
.btn-outline-primary:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.nav-link.active, .navbar-brand { color: var(--primary) !important; }
a { color: var(--primary); }
.karne-mood { color: var(--accent-dark); }