/* ------------------------------------------------------------------ *
 *  FMU Taktik Testleri
 *
 *  Tema belirteclerini kullaniyor; acik ve koyu temada kendiliginden
 *  uyuyor. FMU kirmizisi yalnizca vurgu sayilarinda.
 * ------------------------------------------------------------------ */

.fmutKap {
  --fmut-kirmizi: #B50024;
  --fmut-zemin: var(--i-background_1, #fff);
  --fmut-cukur: var(--i-background_2, rgba(127,127,127,.07));
  --fmut-cizgi: var(--i-border_soft, rgba(127,127,127,.2));
  --fmut-murekkep: var(--i-color_root, #2a2a2a);
  --fmut-soluk: var(--i-color_soft, #777);

  margin: 18px 0;
  padding: 18px 20px 20px;
  border: 1px solid var(--fmut-cizgi);
  border-radius: 10px;
  background: var(--fmut-zemin);
  color: var(--fmut-murekkep);
}

/* ---------------- baslik ---------------- */
.fmutBaslik { margin-bottom: 14px; }
.fmutBaslik__ad {
  display: block; font-size: 17px; font-weight: 700; line-height: 1.2;
}
.fmutBaslik__alt {
  display: block; margin-top: 3px; font-size: 13px; color: var(--fmut-soluk);
}

/* ---------------- ozet ---------------- */
.fmutOzet {
  margin-bottom: 14px; padding: 14px 16px;
  border: 1px solid var(--fmut-cizgi); border-radius: 8px;
  background: var(--fmut-cukur);
}
.fmutOzet__ust {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.fmutOzet__ad { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.fmutOzet__alt { font-size: 12.5px; color: var(--fmut-soluk); }

.fmutOzet__kutular { display: flex; gap: 10px; flex-wrap: wrap; }
.fmutOzet__kutu {
  flex: 1 1 110px; min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
  padding: 9px 12px; border-radius: 7px;
  background: var(--fmut-zemin); border: 1px solid var(--fmut-cizgi);
}
.fmutOzet__et {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--fmut-soluk);
}
.fmutOzet__deger { font-size: 21px; font-weight: 800; line-height: 1.1; }
.fmutOzet__kutu:first-child .fmutOzet__deger { color: var(--fmut-kirmizi); }

/* ---------------- seviye dagilimi ---------------- */
.fmutSeviye { margin-bottom: 14px; }
.fmutSeviye__baslik {
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--fmut-soluk); margin-bottom: 8px;
}
.fmutSeviye__satir {
  display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 13.5px;
}
.fmutSeviye__ad { flex: none; width: 110px; }
.fmutSeviye__bar {
  flex: 1 1 auto; height: 7px; min-width: 50px; border-radius: 999px;
  background: var(--fmut-cukur); overflow: hidden; display: block;
}
.fmutSeviye__bar i { display: block; height: 100%; background: var(--fmut-kirmizi); border-radius: 999px; }
.fmutSeviye__deger { flex: none; width: 42px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.fmutSeviye__adet { flex: none; width: 58px; text-align: right; font-size: 12px; color: var(--fmut-soluk); }

/* ---------------- tablo ---------------- */
.fmutTabloKap { overflow-x: auto; }

/* Tema tablolara kendi kenarligini veriyor (IPS'inki de verir) ve
   buraya siziyor. Once hepsini sifirlayip sonra kendi ust cizgimizi
   koyuyoruz — sira onemli. */
.fmutKap table.fmutTablo,
.fmutKap .fmutTablo th,
.fmutKap .fmutTablo td {
  border: 0 none;
  background: none;
}

.fmutTablo {
  width: 100%; border-collapse: collapse; border-spacing: 0;
  font-size: 13.5px; margin: 0;
}
.fmutTablo th {
  padding: 0 10px 8px 0; text-align: left; white-space: nowrap;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--fmut-soluk);
}
.fmutKap .fmutTablo td {
  padding: 8px 10px 8px 0; white-space: nowrap;
  border-top: 1px solid var(--fmut-cizgi);
}
.fmutTablo .fmut-sayi { text-align: right; font-variant-numeric: tabular-nums; }
.fmutTablo .fmut-vurgu { font-weight: 800; color: var(--fmut-kirmizi); }
.fmutTablo .fmut-kucuk { font-size: 12.5px; color: var(--fmut-soluk); }
.fmutTablo .fmut-uye { font-weight: 600; }
.fmutTablo .fmut-islem { width: 1%; }

/* Esik altindaki testler gorunuyor ama ortalamaya katilmiyor;
   bunu renkle anlatiyoruz. */
.fmutTablo tr.fmut-sayilmaz td { opacity: .5; }

.fmut-rozet, .fmut-tatil {
  display: inline-block; padding: 1px 6px; border-radius: 4px;
  font-size: 10.5px; font-weight: 700; vertical-align: 1px;
}
.fmut-rozet { background: var(--fmut-kirmizi); color: #fff; }
.fmut-tatil { background: var(--fmut-cukur); color: var(--fmut-soluk); }

.fmutBos {
  padding: 22px; text-align: center; font-size: 14px; color: var(--fmut-soluk);
  border: 1px dashed var(--fmut-cizgi); border-radius: 8px;
}
.fmutNot { margin-top: 8px; font-size: 12px; color: var(--fmut-soluk); }

/* ---------------- form ---------------- */
.fmutFormAc {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px;
}
.fmutFormAc__not { font-size: 12.5px; color: var(--fmut-soluk); }

.fmutForm {
  margin-top: 14px; padding: 14px 16px;
  border: 1px solid var(--fmut-cizgi); border-radius: 8px; background: var(--fmut-cukur);
}
.fmutForm__satir { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }

.fmutAlan { flex: 1 1 90px; min-width: 0; display: flex; flex-direction: column; gap: 4px; margin: 0; }
.fmutAlan--genis { flex: 2 1 180px; }
.fmutAlan--tam { flex: 1 1 100%; }
.fmutAlan > span {
  font-size: 11px; font-weight: 600; color: var(--fmut-soluk);
}
.fmutKap input[type=text],
.fmutKap input[type=number],
.fmutKap select {
  width: 100%; font: inherit; font-size: 13.5px; padding: 7px 9px;
  border-radius: 6px; border: 1px solid var(--fmut-cizgi);
  background: var(--fmut-zemin); color: var(--fmut-murekkep);
}
.fmutKap input:focus, .fmutKap select:focus {
  outline: none; border-color: var(--fmut-kirmizi);
}

.fmutForm__alt {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-top: 4px;
}
.fmutOnay { display: flex; align-items: center; gap: 7px; font-size: 13px; margin: 0; }
.fmutForm__btn { display: flex; gap: 8px; }

.fmutBtn {
  font: inherit; font-size: 13.5px; font-weight: 700; padding: 8px 16px;
  border-radius: 7px; cursor: pointer;
  border: 1px solid var(--fmut-cizgi);
  background: var(--fmut-zemin); color: var(--fmut-murekkep);
}
.fmutBtn--ana { background: var(--fmut-kirmizi); border-color: var(--fmut-kirmizi); color: #fff; }
.fmutBtn--mini { padding: 4px 9px; font-size: 11.5px; }
.fmutBtn[disabled] { opacity: .55; cursor: default; }

.fmutHata:not(:empty) {
  margin-top: 10px; padding: 9px 12px; border-radius: 6px;
  background: rgba(181,0,36,.10); border: 1px solid rgba(181,0,36,.35);
  color: var(--fmut-kirmizi); font-size: 13px; font-weight: 600;
}

@media (max-width: 680px) {
  .fmutKap { padding: 14px; }
  .fmutOzet__kutu { flex: 1 1 calc(50% - 5px); }
  .fmutSeviye__ad { width: 82px; font-size: 12.5px; }
}

/* ---------------- taktik merkezi bandi ---------------- */
/* Renkler tema degiskenlerinden; degisken yoksa (eski tema) parantezdeki
   yedek renk kullanilir. Koyu ve acik temada ikisi de okunur kalir. */
.fmutBant {
  --fmut-b-zemin: var(--i-background_1, #ffffff);
  --fmut-b-cizgi: var(--i-border_soft, rgba(127,127,127,.25));
  --fmut-b-baslik: var(--i-color_root, #2a2a2a);
  --fmut-b-alt: var(--i-color_soft, #6b6b6b);
  --fmut-b-vurgu: var(--i-primary_button, #B50024);
  --fmut-b-vurgu-yazi: var(--i-primary_button_text, #ffffff);

  box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin: 16px 0;
  padding: 12px 14px; border-radius: 8px;
  background: var(--fmut-b-zemin);
  border: 1px solid var(--fmut-b-cizgi);
  color: var(--fmut-b-baslik);
}
.fmutBant__metin { display: flex; flex-direction: column; min-width: 0; flex: 1 1 240px; }
.fmutBant__ad { font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--fmut-b-baslik); }
.fmutBant__alt { margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--fmut-b-alt); }
.fmutBant__buton {
  display: inline-block; padding: 8px 14px; border-radius: 8px;
  background: var(--fmut-b-vurgu); color: var(--fmut-b-vurgu-yazi);
  font-size: 13px; font-weight: 700;
  line-height: 1.2; text-decoration: none; white-space: nowrap;
}
.fmutBant__buton:hover { color: var(--fmut-b-vurgu-yazi); filter: brightness(1.1); }