/* ── Maç kapak kartı (js/mac-kart.js) — /maclar hero + /mac/{id} tepesi ──
   Mobil: mac/mac_kapak_karti.dart. Kapak fotoğrafı üstü iki modda da KOYU
   (mobil KURAL 2, Renk.gorsel = Palet.gece): renkler rol token'larından
   değil --gorsel-* sabitlerinden ve aşağıdaki --mk-* türevlerinden gelir.
   gece-maci.css'ten SONRA, sayfa css'inden ÖNCE yüklenir.

   YENİ TOKEN (gece-maci.css'e yazılmadı; --sz-gm-* ham tokenlarından türetildi,
   iki modda aynı): fotoğraf üstü perde, hap, gölge, tarih rozeti, ▶ düğmesi. */
:root {
  --mk-gorsel-ink2:    var(--sz-gm-ink2);     /* mobil Renk.gorsel.murekkep2 */
  --mk-gorsel-cizgi2:  var(--sz-gm-cizgi2);   /* Renk.gorsel.cizgi2 */
  --mk-gorsel-soluk:   var(--sz-gm-soluk);    /* Renk.gorsel.soluk */
  /* mobil gradyan 0x33000000 -> 0xCC0B120E */
  --mk-perde: linear-gradient(color-mix(in srgb, var(--sz-gm-zemin) 20%, transparent),
                              color-mix(in srgb, var(--sz-gm-zemin) 80%, transparent));
  --mk-tarih-zemin:    color-mix(in srgb, var(--sz-gm-zemin) 75%, transparent); /* gorsel.zemin %75 */
  --mk-hap-zemin:      color-mix(in srgb, var(--sz-gm-zemin) 45%, transparent); /* 0x73000000 */
  --mk-hap-kenar:      color-mix(in srgb, var(--sz-white) 16%, transparent);    /* 0x29FFFFFF */
  --mk-golge:          color-mix(in srgb, var(--sz-gm-zemin) 55%, transparent); /* gorselGolge 0x8C000000 */
  --mk-oynat-zemin:    color-mix(in srgb, var(--sz-white) 94%, transparent);    /* 0xF0FFFFFF */
  --mk-oynat-ikon:     var(--sz-green-700);   /* mobil 0xFF0F3B28'in kitap karşılığı */
  --mk-kucuk-perde:    color-mix(in srgb, var(--sz-gm-zemin) 20%, transparent); /* liste kapağı ▶ 0x33000000 */
  --mk-kucuk-perde-2:  color-mix(in srgb, var(--sz-gm-zemin) 40%, transparent); /* üstüne gelince */
}

.mk-kapak {
  position: relative; overflow: hidden; aspect-ratio: 16 / 9;
  background: var(--gorsel-yuzey2); color: var(--gorsel-ink);
}
.mk-kapak.mk-oran-16-10 { aspect-ratio: 16 / 10; }
.mk-gorsel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-perde { position: absolute; inset: 0; background: var(--mk-perde); }

/* Sol üst: tarih rozeti (gün büyük, ay altında — tam ad) */
.mk-tarih {
  position: absolute; left: 12px; top: 12px; width: 48px; padding: 6px 2px;
  display: flex; flex-direction: column; align-items: center; line-height: 1.1;
  background: var(--mk-tarih-zemin); border: 1px solid var(--mk-gorsel-cizgi2); border-radius: 10px;
}
.mk-gun { font-size: 18px; color: var(--gorsel-cim); }
.mk-ay { font-size: 9.5px; font-weight: 600; color: var(--mk-gorsel-ink2); white-space: nowrap; max-width: 100%; overflow: hidden; }

/* Sağ üst: skor "4 – 3" + "Siyah · Beyaz" */
.mk-skor { position: absolute; right: 14px; top: 10px; display: flex; flex-direction: column; align-items: flex-end; }
.mk-skor-deger { font-size: 34px; line-height: 1.1; color: var(--gorsel-ink); text-shadow: 0 0 12px var(--mk-golge); }
.mk-skor-alt { font-size: 9px; font-weight: 700; letter-spacing: .14em; color: var(--mk-gorsel-ink2); text-shadow: 0 0 12px var(--mk-golge); }

/* Ortada ▶ (özet) — kart bağlantısının (.mk-kart-link) üstünde */
.mk-oynat {
  position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%);
  width: 58px; height: 58px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--mk-oynat-zemin); color: var(--mk-oynat-ikon);
  box-shadow: 0 6px 18px var(--mk-golge);
}
.mk-oynat svg { width: 36px; height: 36px; display: block; }
.mk-oynat:hover { transform: translate(-50%, -50%) scale(1.06); }
.mk-oynat:focus-visible { outline: 2px solid var(--gorsel-cim); outline-offset: 3px; }

/* Alt: saha adı + alt yazı, sağda süre hapı */
.mk-alt { position: absolute; left: 14px; right: 14px; bottom: 12px; display: flex; align-items: flex-end; gap: 10px; }
.mk-metin { flex: 1; min-width: 0; }
.mk-saha {
  margin: 0; font-family: var(--display); font-size: 22px; font-weight: 800; line-height: 1.15;
  color: var(--gorsel-ink); text-shadow: 0 0 12px var(--mk-golge);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mk-altyazi {
  margin-top: 2px; font-size: 12.5px; color: var(--mk-gorsel-ink2); text-shadow: 0 0 12px var(--mk-golge);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mk-sure {
  flex-shrink: 0; padding: 5px 10px; border-radius: 999px; font-size: 13px; line-height: 1.2;
  color: var(--gorsel-ink); background: var(--mk-hap-zemin); border: 1px solid var(--mk-hap-kenar);
}

/* Kapaklı kart kabı: iç boşluk yok, kapak köşeden kırpılır */
.kart.mk-kart { padding: 0; overflow: hidden; position: relative; }

/* Kartın tamamını tıklanır yapan görünmez bağlantı ("stretched link"):
   iç içe <a> olmasın diye kartın içindeki düğmeler (▶, çipler) z-index 2
   ile bunun ÜSTÜNDE durur. Kart position: relative olmalı. */
.mk-kart-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.mk-kart-link:focus-visible { outline: 2px solid var(--cim); outline-offset: 2px; }

@media (max-width: 420px) {
  .mk-skor-deger { font-size: 30px; }
  .mk-saha { font-size: 20px; }
}