/* /mac/{id} — maç raporu (Tur 2, 2026-09-26; mobil mac/mac_rapor_ekrani.dart).
     Renkler yalnız rol token'larından (iki mod); kapak kartı css/mac-kart.css. */
  .icerik { display: flex; flex-direction: column; gap: 14px; padding: 24px 0; }
  .rapor-ust { margin-bottom: -6px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  /* Detaylı analiz bağlantısı (Tur 3: /analiz/{id}) */
  .rapor-analiz { color: var(--cim); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
  .rapor-analiz:hover { text-decoration: underline; }
  .rapor-analiz:focus-visible { outline: 2px solid var(--cim); outline-offset: 2px; border-radius: 4px; }

  /* Kapak kartı: mobil oran 16:10; dar ekranda saha adı biraz büyük kalsın */
  .rapor-kapak .mk-saha { font-size: clamp(22px, 3.4vw, 30px); }
  .rapor-kapak .mk-skor-deger { font-size: clamp(34px, 5vw, 44px); }

  /* Renk sınıfları (yalnız bu sayfanın değer hücrelerinde) */
  .ist-deger.amber, .enler-deger.amber, .enler-satir-deger.amber { color: var(--amber); }
  .ist-deger.cim, .enler-deger.cim, .enler-satir-deger.cim { color: var(--cim); }
  .ist-deger.hata, .enler-deger.hata, .enler-satir-deger.hata { color: var(--hata); }
  .ist-deger.ink { color: var(--ink); }

  /* ---- Maç istatistikleri (mobil _MacIstatistikKarti) ---- */
  .ist-ust { display: flex; align-items: center; gap: 4px; margin-bottom: 10px; }
  .ist-ust .mikro { margin-right: auto; }
  .ist-lejant { display: inline-flex; align-items: center; gap: 4px; color: var(--soluk); }
  .ist-yelek { width: 20px; height: 20px; font-size: 9px; border-radius: 6px; }
  .ist-grup + .ist-grup { border-top: 1px solid var(--cizgi); margin-top: 12px; padding-top: 12px; }
  .ist-satir { display: grid; grid-template-columns: 96px auto 1fr auto; align-items: center; gap: 8px; }
  .ist-satir + .ist-satir { margin-top: 8px; }
  .ist-etiket { font-size: 10.5px; font-weight: 600; letter-spacing: .1em; color: var(--soluk); }
  .ist-deger { font-size: 13px; min-width: 16px; }
  .ist-deger:last-child { text-align: right; }
  .ist-bar i { flex: 1 1 0%; min-width: 0; }
  .ist-tek { display: flex; align-items: center; gap: 8px; }
  .ist-tek + .ist-tek { margin-top: 6px; }

  /* ---- Maçın enleri (mobil IstatistikKarti + RozetYigini) — "enler-" öneki:
     oyuncu sayfasının kendi rozet bileşeniyle çakışmasın ---- */
  .enler { display: flex; flex-direction: column; gap: 8px; }
  .enler-ust { padding: 0 2px; }
  .enler-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .enler-kart {
    position: relative; display: flex; flex-direction: column; min-width: 0;
    background: var(--kart); border: 1px solid var(--cizgi); border-radius: 14px; padding: 10px 12px;
    box-shadow: var(--kart-golge);
  }
  .enler-etiket { font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--soluk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .enler-deger { font-size: 20px; margin: 4px 0 8px; line-height: 1.1; white-space: nowrap; }
  .enler-deger small { font-size: 11px; font-weight: 500; color: var(--soluk); letter-spacing: 0; }
  .enler-kim { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: auto; text-decoration: none; color: var(--ink2); }
  .enler-kim:hover .enler-ad { color: var(--ink); }
  .enler-ad { font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .enler-yelek { width: 20px; height: 20px; font-size: 8.5px; border-radius: 6px; }

  /* Beraberlik yığını = ortak GMRozet.yigin (js/rozet.js + css/rozet.css; en çok 4 + "+N",
     kart renginde 1,5 px halka, 7 px bindirme). Burada yalnız kart içindeki yeri. */
  .enler-kart > .rozet-yigin { margin-top: auto; align-self: flex-start; }
  .enler-tumu {
    display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 5px; padding: 0;
    background: none; border: 0; font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; text-align: left;
  }
  .enler-tumu .enler-sayi { flex: 1; min-width: 0; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .enler-tumu .enler-git { color: var(--cim); white-space: nowrap; }
  .enler-tumu[aria-expanded="true"] .enler-git { text-decoration: underline; }
  .enler-tumu::after { content: ''; position: absolute; inset: 0; border-radius: 14px; }   /* kartın tamamı tıklanır */
  .enler-tumu:focus-visible { outline: none; }
  .enler-tumu:focus-visible::after { outline: 2px solid var(--cim); outline-offset: 2px; }
  .enler-kart:has(.enler-tumu):hover { border-color: var(--cizgi2); background: var(--kart-hover); }

  /* Beraberlik listesi (mobil _krallariGoster alt sayfası) */
  .enler-panel { padding: 14px 16px 6px; }
  .enler-panel-ust { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 6px; }
  .enler-panel-ust > div { flex: 1; min-width: 0; }
  .enler-panel-baslik { font-size: 24px; }
  .enler-panel-alt { font-size: 12.5px; color: var(--soluk); margin-top: 4px; }
  .enler-kapat { background: none; border: 1px solid var(--cizgi2); color: var(--ink2); width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 13px; flex-shrink: 0; }
  .enler-kapat:hover { color: var(--ink); border-color: var(--ink2); }
  .enler-satir { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--cizgi); color: var(--ink); text-decoration: none; }
  .enler-satir:hover .enler-satir-ad { color: var(--cim); }
  .enler-satir-ad { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .enler-satir-deger { font-size: 16px; }
  .enler-satir-ok { color: var(--soluk); font-size: 18px; line-height: 1; }

  /* ---- Kadro (mobil _KadroKarti, 1.1.0+11): 7 sütun, HIZ yok (maks hız
     oyuncu kartında ve "En hızlı"da). Başlıklar tam kelime, gerekirse 2 satır. ---- */
  .kd-kart { padding: 8px 0; }
  .kd-tablo { width: 100%; border-collapse: collapse; table-layout: fixed; }
  .kd-c-mes { width: 64px; } .kd-c-spr { width: 50px; } .kd-c-pas { width: 42px; }
  .kd-c-kyp { width: 46px; } .kd-c-gol { width: 38px; } .kd-c-ast { width: 44px; }
  .kd-tablo th {
    text-align: left; vertical-align: bottom; font-size: 9.5px; font-weight: 600; line-height: 1.15;
    letter-spacing: 0; color: var(--soluk); padding: 6px 4px 8px; border-bottom: 1px solid var(--cizgi2);
  }
  .kd-tablo th:first-child, .kd-tablo td:first-child { padding-left: 16px; }
  .kd-tablo th:last-child, .kd-tablo td:last-child { padding-right: 16px; }
  .kd-tablo .sag { text-align: right; }
  .kd-tablo td { padding: 9px 4px; border-bottom: 1px solid var(--cizgi); font-size: 13px; vertical-align: middle; }
  .kd-tablo tr:last-child td { border-bottom: none; }
  .kd-satir { cursor: pointer; }
  .kd-satir:hover td { background: var(--hover-zemin); }
  .kd-oyuncu { overflow: hidden; }
  .kd-link { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink); text-decoration: none; }
  .kd-link:focus-visible { outline: 2px solid var(--cim); outline-offset: 2px; border-radius: 6px; }
  .kd-yelek { width: 30px; height: 30px; font-size: 11px; border-radius: 9px; }
  /* Yelek köşesi = boyut × oran (mobil yelekYaricapOran: gece .3, gündüz .4) */
  :root[data-theme="light"] .kd-yelek { border-radius: 12px; }
  :root[data-theme="light"] .enler-yelek, :root[data-theme="light"] .ist-yelek { border-radius: 8px; }
  .kd-ad { flex: 0 1 auto; min-width: 0; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kd-ad-bos { display: none; }
  .kd-kaleci {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 15px; height: 15px; border-radius: 4px; border: 1px solid var(--soluk); color: var(--soluk);
    font-size: 9px; font-weight: 700; line-height: 1;
  }
  .kd-klip { display: inline-flex; color: var(--cim); flex-shrink: 0; }
  .kd-klip svg { width: 14px; height: 14px; display: block; }
  .kd-soluk { color: var(--ink2); }
  .kd-cim { color: var(--cim); }
  .kd-hata { color: var(--hata); }
  .kd-amber { color: var(--amber); }
  .kadro-avatar {
    width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
    border: 1.5px solid var(--cizgi2); flex: none;
  }
  td .mes-bar { height: 3px; border-radius: 3px; background: var(--yuzey2); margin-top: 3px; overflow: hidden; }
  td .mes-bar i { display: block; height: 100%; background: var(--veri); border-radius: 3px; }

  /* ---- Maç medyası ---- */
  .medya-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 10px; }
  /* Kapakli medya karti (goc 08-14): arka plan = KapakUrl, tiklaninca oynar.
     Kapak/video ustu: --gorsel-* / --mk-* sabitleri (iki modda koyu, mobil Renk.gorsel). */
  .medya {
    position: relative; overflow: hidden; min-height: 110px;
    display: flex; flex-direction: column; justify-content: space-between;
    background: var(--gorsel-yuzey2) center/cover no-repeat;
    border: 1px solid var(--cizgi); border-radius: 12px; padding: 12px; cursor: pointer;
  }
  .medya::before { content: ''; position: absolute; inset: 0; background: var(--mk-perde); }
  .medya:hover { border-color: var(--cim); }
  .medya:focus-visible { outline: 2px solid var(--cim); outline-offset: 2px; }
  .medya .ust, .medya .ad { position: relative; }
  .medya .ust { display: flex; align-items: center; justify-content: space-between; }
  .medya .oynat { width: 28px; height: 28px; border-radius: 50%; background: var(--mk-hap-zemin); display: flex; align-items: center; justify-content: center; color: var(--gorsel-cim); font-size: 12px; }
  .medya .ad { font-size: 12.5px; font-weight: 600; color: var(--gorsel-ink); margin-top: 10px; text-shadow: 0 1px 4px var(--mk-golge); }
  .isi-gorsel { width: 100%; border-radius: 10px; border: 1px solid var(--cizgi2); display: block; margin-top: 10px; }

  /* ---- Takım ısı haritası: iki saha (geniş ekranda yan yana, darda alt alta) ---- */
  .isi-ust { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .isi-ust .soluk { color: var(--soluk); }
  .takim-isi { margin-top: 10px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
  .takim-isi-baslik { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
  .takim-isi-baslik .yelek { width: 24px; height: 24px; font-size: 10px; border-radius: 7px; }
  .takim-isi .saha { position: relative; aspect-ratio: 2; border-radius: 8px; background: var(--saha-zemin); overflow: hidden; }
  .takim-isi .isi-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

  @media (max-width: 640px) {
    .enler-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kd-c-mes { width: 54px; } .kd-c-spr { width: 40px; } .kd-c-pas { width: 30px; }
    .kd-c-kyp { width: 36px; } .kd-c-gol { width: 30px; } .kd-c-ast { width: 34px; }
    .kd-tablo th:first-child, .kd-tablo td:first-child { padding-left: 12px; }
    .kd-tablo th:last-child, .kd-tablo td:last-child { padding-right: 12px; }
  }
  @media (max-width: 420px) {
    /* Dar telefonda önce fotoğraf düşer (mobil öncelik: klip > foto > kaleci > ad) */
    .kd-tablo .kadro-avatar { display: none; }
    .kd-tablo td { font-size: 12.5px; }
    .ist-satir { grid-template-columns: 84px auto 1fr auto; }
  }