/* YÖKDİL modu — renkler styles.css'teki tema değişkenlerinden gelir. */

/* Moda özel parçalar. Özgüllük, exam.css'teki "body.has-exams ... !important" kurallarını geçecek kadar yüksek. */
html body.mode-yokdil .yds-only.yds-only { display: none !important; }
html body:not(.mode-yokdil) .yokdil-only.yokdil-only { display: none !important; }
html body:not(.has-yokdil) .yokdil-ui.yokdil-ui { display: none !important; }

/* ---------- ana sayfa: sınav değiştirme ---------- */

.yk-switch {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
}

.yk-seg {
  display: inline-flex;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 10px 24px -22px rgba(20, 57, 91, 0.45);
}

.yk-seg button {
  min-height: 40px;
  padding: 6px 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-subtle);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.yk-seg button:hover { color: var(--primary-text); }
.yk-seg button[aria-pressed="true"] { background: var(--cobalt); color: var(--side-text); }

.yk-field-btn {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-height: 44px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.yk-field-btn:hover { border-color: var(--primary); }
.yk-field-name { font-size: 0.9rem; font-weight: 700; color: var(--heading); }
.yk-field-change { font-size: 0.78rem; font-weight: 600; color: var(--primary-text); }
.yk-switch-hint { font-size: 0.8rem; color: var(--text-subtle); }

/* ---------- ana sayfa: konu haritası ---------- */

.yk-map-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; }
.yk-map-head h3 { margin: 0; font-size: 1.1rem; color: var(--heading); }
.yk-map-total { font-size: 0.8rem; font-weight: 600; color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.yk-map-sub { margin: 4px 0 14px; font-size: 0.85rem; color: var(--text-subtle); }

.yk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }

.yk-topic {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 118px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}

.yk-topic:hover { border-color: var(--primary); }
.yk-topic:active { transform: scale(0.98); }
.yk-topic.is-done { border-color: var(--gold); }

.yk-topic-ring { position: relative; flex-shrink: 0; display: block; width: 48px; height: 48px; }
.yk-topic-ring .stats-ring-svg { display: block; width: 48px; height: 48px; }
.yk-topic-ring .stats-ring-track { fill: none; stroke: var(--border); }
.yk-topic-ring .stats-ring-bar { fill: none; stroke: var(--primary); stroke-linecap: round; }
.yk-topic-ring .stats-ring-bar.is-complete { stroke: var(--gold); }

.yk-topic-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--heading);
  font-variant-numeric: tabular-nums;
}

.yk-topic-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; width: 100%; margin-bottom: 4px; }
.yk-topic-name { font-size: 0.9rem; font-weight: 700; line-height: 1.25; color: var(--heading); overflow-wrap: break-word; }
.yk-topic-count { font-size: 0.76rem; color: var(--text-subtle); font-variant-numeric: tabular-nums; white-space: nowrap; }

.yk-topic-tag,
.yk-seen-badge {
  padding: 1px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 16%, var(--surface));
  color: var(--gold-text);
  font-size: 0.68rem;
  font-weight: 700;
}

.word-badge.yk-seen-badge { padding: 3px 10px; border-color: color-mix(in srgb, var(--gold) 45%, var(--border)); font-size: 0.72rem; }

/* ---------- konu sayfası ---------- */

#view-topic.active { display: flex; flex-direction: column; gap: 14px; }
.yk-back { align-self: flex-start; }
.yk-word { padding-bottom: 12px; }

.yk-know-btn {
  align-self: flex-start;
  min-height: 36px;
  margin-top: 8px;
  padding: 4px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.yk-know-btn:hover { border-color: var(--primary); }

.yk-know-btn.is-known {
  border-color: color-mix(in srgb, var(--success) 45%, var(--border));
  background: color-mix(in srgb, var(--success) 10%, var(--surface));
  color: var(--success-text);
}

/* ---------- ilerleme: konu çubukları ---------- */

.yk-bars .profile-bar-row { grid-template-columns: minmax(0, 11.5em) minmax(0, 1fr) 4.2em; }
.yk-bars .profile-bar-level { font-weight: 600; font-size: 0.8rem; line-height: 1.2; overflow-wrap: anywhere; }

@media (max-width: 480px) {
  .yk-bars .profile-bar-row { grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr) 3.8em; gap: 8px; }
}

/* ---------- sınav rehberi: YÖKDİL soru dağılımı ---------- */

.yk-guide-table td:last-child, .yk-guide-table th:last-child { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- karşılama ekranı ---------- */

body.yk-welcome-open { overflow: hidden; }

.yk-welcome {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  padding-top: calc(20px + env(safe-area-inset-top));
  background: linear-gradient(135deg, var(--cobalt), #0F4C5C);
  overflow-y: auto;
}

.yk-welcome-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 440px;
  margin: auto;
  padding: 28px 22px 24px;
  border: 1px solid var(--gold);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
}

.yk-welcome-logo { width: 56px; height: 56px; border-radius: 22%; object-fit: cover; }
.yk-welcome-kicker { margin: 4px 0 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-text); }
.yk-welcome-card h2 { margin: 0; font-size: 1.5rem; line-height: 1.2; color: var(--heading); padding-right: 28px; }
.yk-welcome-desc { margin: 0 0 6px; font-size: 0.9rem; color: var(--text-subtle); }

.yk-choices { display: flex; flex-direction: column; gap: 10px; }

.yk-choice {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 40px 14px 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}

.yk-choice:hover { border-color: var(--primary); }
.yk-choice:active { transform: scale(0.99); }
.yk-choice.is-current { border-color: var(--gold); }

.yk-choice-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.yk-choice-head strong { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--heading); }
.yk-choice-tag { padding: 1px 8px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-text); font-size: 0.7rem; font-weight: 700; }
.yk-choice-desc { font-size: 0.85rem; line-height: 1.4; color: var(--text-subtle); }

.yk-choice-arrow {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--primary-text);
}

.yk-welcome-back { align-self: flex-start; margin-top: 2px; }

@media (prefers-reduced-motion: reduce) {
  .yk-seg button, .yk-topic, .yk-choice { transition: none; }
}

/* karşılama ekranı: Android uygulaması seçeneği */
.yk-choice-app { text-decoration: none; border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, var(--bg)); }
.yk-choice-app:hover { border-color: var(--gold); }
.yk-choice-icon { width: 32px; height: 32px; border-radius: 22%; object-fit: cover; }
.yk-choice-sep { align-self: center; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); }