/***************************************************
 * TMY PANEL TASARIM SİSTEMİ
 * Tek kaynak: renk/tipografi/bileşen tokenleri.
 * Gerçek turkiyematematikyarismasi.com paletinden
 * türetildi (tmy-site.css: #1e4356 / #68a4c4).
 * Teacher/Student/KMAdmin/Unauthorized/Embedded
 * layout'larının hepsinde, diğer panel CSS
 * dosyalarından ÖNCE yüklenir.
 ***************************************************/
:root {
  --tmy-navy: #1e4356;
  --tmy-navy-deep: #122834;
  --tmy-steel: #68a4c4;
  --tmy-accent: #3f7fa3;
  --tmy-accent-tint: #e7f1f6;
  --tmy-bg: #f2f5f7;
  --tmy-surface: #ffffff;
  --tmy-surface-2: #f7fafb;
  --tmy-border: #dfe6ea;
  --tmy-border-soft: #e9eef1;
  --tmy-ink: #16232b;
  --tmy-ink-soft: #55707c;
  --tmy-ink-faint: #8ea0a8;
  --tmy-good: #2f8f5b;
  --tmy-good-tint: #e4f4ea;
  --tmy-warn: #b8842a;
  --tmy-warn-tint: #faf1de;
  --tmy-critical: #c1503f;
  --tmy-critical-tint: #fbe9e6;
  --tmy-radius-pill: 999px;
  --tmy-radius-card: 14px;
  --tmy-radius-tile: 12px;
  --tmy-shadow-sm: 0 1px 2px rgba(22, 35, 43, .06);
  --tmy-shadow-md: 0 12px 28px -14px rgba(22, 50, 63, .18);
  --tmy-shadow-lg: 0 24px 60px -20px rgba(22, 50, 63, .28);
}

.tabular, .tmy-tabular { font-variant-numeric: tabular-nums; }

/* ---------- durum rozetleri (badge) ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-radius: var(--tmy-radius-pill);
  padding: .32rem .75rem;
  font: 700 .72rem/1 "Open Sans", sans-serif;
  white-space: nowrap;
}
.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.badge-warn { background: var(--tmy-warn-tint); color: var(--tmy-warn); }
.badge-accent { background: var(--tmy-accent-tint); color: var(--tmy-accent); }
.badge-good { background: var(--tmy-good-tint); color: var(--tmy-good); }
.badge-critical { background: var(--tmy-critical-tint); color: var(--tmy-critical); }
.badge-neutral { background: var(--tmy-surface-2); color: var(--tmy-ink-faint); }

/* ---------- filtre çipleri ---------- */
.chip-row { display: flex; gap: .4rem; flex-wrap: wrap; }
.chip {
  background: var(--tmy-surface);
  border: 1px solid var(--tmy-border);
  border-radius: var(--tmy-radius-pill);
  padding: .42rem .85rem;
  font: 600 .76rem "Open Sans", sans-serif;
  color: var(--tmy-ink-soft);
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.chip:hover { border-color: var(--tmy-steel); }
.chip.active { background: var(--tmy-accent-tint); border-color: transparent; color: var(--tmy-accent); }

/* ---------- avatar (tek, kanonik tanım) ---------- */
.avatar-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--tmy-accent-tint);
  color: var(--tmy-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 700 .74rem "Roboto", sans-serif;
  flex-shrink: 0;
}

/* ---------- ikon karo (icon tile) ---------- */
.icon-tile {
  width: 48px;
  height: 48px;
  border-radius: var(--tmy-radius-tile);
  background: var(--tmy-accent-tint);
  color: var(--tmy-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon-tile svg, .icon-tile i { width: 22px; height: 22px; font-size: 1.1rem; }
.icon-tile.solid {
  background: linear-gradient(135deg, var(--tmy-steel), var(--tmy-navy));
  color: #fff;
}

/* ---------- KPI kartları ---------- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .9rem;
}
.kpi-card {
  background: var(--tmy-surface);
  border: 1px solid var(--tmy-border-soft);
  border-radius: var(--tmy-radius-card);
  padding: 1rem 1.1rem;
  display: flex;
  align-items: center;
  gap: .8rem;
  box-shadow: var(--tmy-shadow-sm);
}
.kpi-num { font: 400 1.5rem/1 "Roboto", sans-serif; color: var(--tmy-ink); }
.kpi-label { font: 600 .74rem "Open Sans", sans-serif; color: var(--tmy-ink-soft); margin-top: .2rem; }

/* ---------- gradient banner (dashboard/detay üst şerit) ---------- */
.season-strip, .detail-hero {
  background: linear-gradient(120deg, var(--tmy-navy), var(--tmy-navy-deep));
  color: #fff;
  border-radius: var(--tmy-radius-card);
  padding: 1.1rem 1.4rem;
  box-shadow: var(--tmy-shadow-md);
}
.season-strip { display: flex; align-items: center; justify-content: space-between; }
.season-strip .label, .detail-hero .label {
  font: 700 .66rem/1 "Open Sans", sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #a9c9db;
  margin-bottom: .35rem;
}
.season-strip .title, .detail-hero .title { font: 400 1.15rem "Roboto", sans-serif; }
.season-strip .meta { font: 400 .8rem "Open Sans", sans-serif; color: #bcd6e4; margin-top: .25rem; }
.season-strip .date { text-align: right; font: 300 1.6rem "Roboto", sans-serif; }
.season-strip .date small { display: block; font: 700 .62rem "Open Sans", sans-serif; letter-spacing: .08em; color: #a9c9db; }
.detail-hero { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.detail-hero .title { font-size: 1.5rem; margin-bottom: .6rem; }
.detail-hero .quickfacts { display: flex; flex-wrap: wrap; gap: .5rem; font: 600 .78rem "Open Sans", sans-serif; color: #cfe3ee; }
.detail-hero .badge { background: rgba(255, 255, 255, .16); color: #fff; }

/* ---------- persona / bağlam rozeti ---------- */
.persona-chip {
  display: inline-block;
  font: 700 .66rem/1 "Open Sans", sans-serif;
  letter-spacing: .1em;
  color: var(--tmy-accent);
  background: var(--tmy-accent-tint);
  padding: .35rem .7rem;
  border-radius: var(--tmy-radius-pill);
}

/* ---------- aşama göstergesi (stepper) ---------- */
.stepper { display: flex; justify-content: space-between; position: relative; margin: .3rem 0 1.3rem; }
.stepper::before { content: ""; position: absolute; top: 13px; left: 13px; right: 13px; height: 2px; background: var(--tmy-border); }
.step { position: relative; display: flex; flex-direction: column; align-items: center; gap: .4rem; flex: 1; }
.step .dot {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--tmy-surface); border: 2px solid var(--tmy-border);
  display: flex; align-items: center; justify-content: center;
  font: 700 .68rem "Open Sans", sans-serif; color: var(--tmy-ink-faint);
  z-index: 1;
}
.step .dot svg { width: 13px; height: 13px; }
.step span { font: 600 .64rem "Open Sans", sans-serif; color: var(--tmy-ink-faint); text-align: center; }
.step.done .dot { background: var(--tmy-good); border-color: var(--tmy-good); color: #fff; }
.step.done span { color: var(--tmy-ink-soft); }
.step.current .dot { background: var(--tmy-steel); border-color: var(--tmy-steel); color: #fff; box-shadow: 0 0 0 4px var(--tmy-accent-tint); }
.step.current span { color: var(--tmy-ink); font-weight: 700; }

/* ---------- yarışma kartı (comp-card) ---------- */
.comp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.comp-card {
  background: var(--tmy-surface); border: 1px solid var(--tmy-border-soft);
  border-radius: var(--tmy-radius-card); padding: 1.25rem;
  display: flex; flex-direction: column; gap: .9rem;
  box-shadow: var(--tmy-shadow-sm);
}
.comp-card.muted { opacity: .72; }
.comp-card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.comp-card .icon-tile { width: 46px; height: 46px; }
.comp-card .icon-tile svg { width: 21px; height: 21px; }
.comp-card h3 { font: 500 1.08rem "Roboto", sans-serif; margin: 0; }
.comp-meta { display: flex; flex-direction: column; gap: .45rem; font-size: .79rem; color: var(--tmy-ink-soft); }
.comp-meta-row { display: flex; align-items: center; gap: .5rem; }
.comp-meta-row svg { width: 15px; height: 15px; color: var(--tmy-ink-faint); flex-shrink: 0; }
.comp-card .cta {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between;
  font: 700 .8rem "Open Sans", sans-serif; color: var(--tmy-accent);
  padding-top: .75rem; border-top: 1px solid var(--tmy-border-soft);
  text-decoration: none;
}
.comp-card .cta svg { width: 15px; height: 15px; }

/* ---------- konu/karşılaştırma barları (karne) ---------- */
.topic-bar { margin-bottom: .85rem; }
.topic-bar:last-child { margin-bottom: 0; }
.topic-bar .row { display: flex; justify-content: space-between; font: 600 .78rem "Open Sans", sans-serif; margin-bottom: .35rem; }
.topic-bar .row .pct { color: var(--tmy-ink-soft); }
.track { height: 8px; border-radius: 99px; background: var(--tmy-surface-2); overflow: hidden; }
.fill { height: 100%; border-radius: 99px; }
.fill.good { background: var(--tmy-good); }
.fill.warn { background: var(--tmy-warn); }
.fill.critical { background: var(--tmy-critical); }

/* ---------- belge satırı ---------- */
.doc-row {
  display: flex; align-items: center; gap: .6rem;
  padding: .65rem .1rem; border-bottom: 1px solid var(--tmy-border-soft);
  font: 600 .84rem "Open Sans", sans-serif; color: var(--tmy-ink);
  text-decoration: none;
}
.doc-row:last-child { border-bottom: none; }
.doc-row svg { width: 17px; height: 17px; color: var(--tmy-accent); flex-shrink: 0; }

@media (max-width: 720px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}