/* Müfredat ve Kazanım Haritası — v2 "Kareli Defter" (docs/TASARIM_SISTEMI.md) · U29.
   WCAG 2.2 AA: açık zemin, -ink metin renkleri (≥ 4.5:1), v2 odak halkası, 48px hedef, 320px'te sayfa taşmaz
   (geniş tablolar kendi kaydırılabilir bölgesinde). Eski neon tema (koyu zemin, glow, emoji) kaldırıldı.
   Yazdırma stili: mufredat-print.css (media="print"). Dalga 24: ortak site kabuğu (SITE_KABUGU.md), herkese açık harita;
   "Bu cihazdaki ilerleme" (.mf-cihaz) yalnız profil/ilerleme varken görünür. */
#icerik:focus { outline: none; }

.mf-hero { padding-block: var(--v2-space-7) var(--v2-space-6); border-bottom: var(--v2-stroke-soft) solid var(--v2-ink); }
.mf-hero__in { display: grid; gap: var(--v2-space-3); max-width: 860px; min-width: 0; }
.mf-eyebrow { margin: 0; font-size: var(--v2-text-sm); font-weight: var(--v2-weight-heavy); color: var(--v2-blue-ink); letter-spacing: .02em; }
.mf-hero h1 { margin: 0; font-size: var(--v2-text-3xl); line-height: 1.1; overflow-wrap: anywhere; }
.mf-lead { margin: 0; max-width: 72ch; font-size: var(--v2-text-md); line-height: 1.6; color: var(--v2-ink-2); }
.mf-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

.mf-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v2-space-5); padding-block: var(--v2-space-6) var(--v2-space-7); min-width: 0; }
.mf-wrap > * { min-width: 0; }
.mf-status p { margin: 0; }

/* Özet sayılar */
.mf-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 640px) { .mf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mf-stat { display: grid; gap: 4px; text-align: center; padding: 14px 10px; border: var(--v2-stroke-soft) solid var(--v2-ink); border-radius: var(--v2-radius); background: var(--v2-surface); min-width: 0; }
.mf-stat b { font-family: var(--v2-font-mono); font-size: 1.6rem; line-height: 1.1; overflow-wrap: anywhere; }
.mf-stat span { font-size: var(--v2-text-sm); font-weight: var(--v2-weight-strong); color: var(--v2-ink-2); }
.mf-stat--g { background: var(--v2-green-tint); } .mf-stat--g b { color: var(--v2-green-ink); }
.mf-stat--y { background: var(--v2-yellow-tint); } .mf-stat--y b { color: var(--v2-yellow-ink); }
.mf-stat--b { background: var(--v2-blue-tint); } .mf-stat--b b { color: var(--v2-blue-ink); }
.mf-stat--t { background: var(--v2-tomato-tint); } .mf-stat--t b { color: var(--v2-tomato-ink); }

/* Kutular */
.mf-box { border: var(--v2-stroke-soft) solid var(--v2-ink); border-radius: var(--v2-radius); padding: 16px 18px; background: var(--v2-surface); min-width: 0; }
.mf-box > h2 { margin: 0 0 8px; display: flex; align-items: center; gap: 10px; font-family: var(--v2-font-body); font-size: var(--v2-text-lg); font-weight: var(--v2-weight-heavy); overflow-wrap: anywhere; }
.mf-box > h2 .v2-icon { flex: none; }
.mf-sub { margin: 0 0 14px; font-size: var(--v2-text-sm); color: var(--v2-ink-2); line-height: 1.5; }

/* Bu cihazdaki ilerleme (yalnız profil/ilerleme varken) */
.mf-cihaz[hidden] { display: none; }
.mf-cihaz { border-style: dashed; background: var(--v2-sunken); display: grid; gap: 12px; }
.mf-cihaz > h2, .mf-cihaz > .mf-sub { margin: 0; }
.mf-stats--cihaz { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 520px; }
.mf-cihaz-alanlar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px 16px; }
.mf-ca { display: grid; gap: 6px; min-width: 0; }
.mf-ca-ad { font-weight: var(--v2-weight-heavy); overflow-wrap: anywhere; }
.mf-ca-bar { display: block; height: 14px; }
.mf-ca-bar .v2-progress__bar { display: block; }
.mf-ca-meta { font-size: var(--v2-text-sm); color: var(--v2-ink-2); font-weight: var(--v2-weight-strong); }
.mf-ca-meta b { color: var(--v2-green-ink); }

/* Alan kartları (süzgeç düğmeleri) */
.mf-alanlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.mf-ao {
  display: grid; gap: 8px; text-align: left; min-height: var(--v2-tap-min); min-width: 0;
  padding: 14px 16px; border: var(--v2-stroke-soft) solid var(--v2-ink); border-radius: var(--v2-radius);
  background: var(--v2-paper); color: var(--v2-ink); font: inherit; cursor: pointer;
  box-shadow: 0 3px 0 var(--v2-shadow-color); transition: transform var(--v2-dur-fast) var(--v2-ease), background-color var(--v2-dur) var(--v2-ease);
}
.mf-ao:hover { background: var(--v2-yellow-tint); }
.mf-ao:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--v2-shadow-color); }
.mf-ao[aria-pressed="true"] { background: var(--v2-blue-tint); border-width: var(--v2-stroke); box-shadow: inset 0 0 0 2px var(--v2-blue-ink), 0 3px 0 var(--v2-shadow-color); }
.mf-ao-h { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mf-ao-ad { font-weight: var(--v2-weight-heavy); font-size: var(--v2-text-md); line-height: 1.25; overflow-wrap: anywhere; min-width: 0; }
.mf-ao-meta { font-size: var(--v2-text-sm); color: var(--v2-ink-2); font-weight: var(--v2-weight-strong); }
.mf-ao-meta b { color: var(--v2-ink); }
.mf-ao-fw { font-size: var(--v2-text-xs); color: var(--v2-ink-2); overflow-wrap: anywhere; }

/* Sınıf bantları (TASARIM_SISTEMI bant renkleri: data-band) */
.mf-bantlar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 10px; }
.mf-bant { display: grid; gap: 2px; padding: 12px 14px; border: var(--v2-stroke-soft) solid var(--v2-ink); border-left-width: 8px; border-left-color: var(--band, var(--v2-ink)); border-radius: var(--v2-radius-sm); background: var(--band-tint, var(--v2-paper)); min-width: 0; }
.mf-bant b { font-size: var(--v2-text-md); }
.mf-bant span { font-size: var(--v2-text-sm); color: var(--v2-ink-2); }
.mf-bant .mf-bant-n { font-family: var(--v2-font-mono); font-weight: var(--v2-weight-heavy); color: var(--band-ink, var(--v2-ink)); }

/* Süzgeç */
.mf-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 12px; align-items: end; margin: 6px 0 10px; }
.mf-filters select.v2-input { padding-right: 12px; }
.mf-reset { justify-self: start; min-height: var(--v2-tap); }
.mf-count { margin: 0 0 6px; font-size: var(--v2-text-sm); font-weight: var(--v2-weight-strong); color: var(--v2-ink-2); }
.mf-legend { margin: 0 0 12px; font-size: var(--v2-text-sm); color: var(--v2-ink-2); line-height: 1.5; }
.mf-legend b { color: var(--v2-ink); }
.mf-legend-h { font-weight: var(--v2-weight-heavy); color: var(--v2-ink); }

/* Alan bölümleri ve tablolar */
.mf-map { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v2-space-5); }
.mf-alan { min-width: 0; }
.mf-alan-head { margin-bottom: 10px; }
.mf-alan-head h3 { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-family: var(--v2-font-body); font-size: var(--v2-text-lg); font-weight: var(--v2-weight-heavy); overflow-wrap: anywhere; }
.mf-acode { display: inline-grid; place-items: center; min-width: 44px; height: 30px; padding: 0 8px; border-radius: 9px; border: var(--v2-stroke-soft) solid var(--v2-ink); background: var(--v2-yellow); color: #1F1D3D; font-family: var(--v2-font-mono); font-size: var(--v2-text-sm); }
.mf-frames { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 6px 0 0; font-size: var(--v2-text-sm); color: var(--v2-ink-2); }
.mf-frames > div { display: flex; gap: 6px; min-width: 0; }
.mf-frames dt { font-weight: var(--v2-weight-heavy); color: var(--v2-ink); }
.mf-frames dt::after { content: ":"; }
.mf-frames dd { margin: 0; overflow-wrap: anywhere; }

.mf-tablewrap { position: relative; overflow-x: auto; border: var(--v2-stroke-soft) solid var(--v2-line); border-radius: var(--v2-radius-sm); }
.mf-tablewrap:focus-visible { outline: 3px solid var(--v2-focus); outline-offset: 2px; }
.mf-tbl { width: 100%; border-collapse: collapse; font-size: var(--v2-text-sm); min-width: 720px; }
.mf-tbl--map { min-width: 960px; }
.mf-tbl caption { text-align: left; padding: 10px 12px 4px; font-weight: var(--v2-weight-heavy); color: var(--v2-ink-2); font-size: var(--v2-text-xs); }
.mf-tbl th, .mf-tbl td { text-align: left; padding: 10px 12px; border-bottom: 1.5px solid var(--v2-line); vertical-align: top; }
.mf-tbl thead th { background: var(--v2-sunken); font-weight: var(--v2-weight-heavy); }
.mf-tbl tbody tr:last-child > * { border-bottom: 0; }
.mf-kod { font-family: var(--v2-font-mono); font-weight: 700; white-space: nowrap; color: var(--v2-ink); }
.mf-nowrap { white-space: nowrap; }
.mf-mods, .mf-fw { list-style: none; margin: 0; padding: 0; }
.mf-fw { display: grid; gap: 2px; }
.mf-mods { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.mf-mods li { min-width: 0; }
.mf-modcell { min-width: 240px; }
.mf-tbl tbody td:nth-child(2) { min-width: 200px; }
.mf-mods a { display: inline-flex; align-items: center; min-height: 28px; font-weight: var(--v2-weight-heavy); color: var(--v2-blue-ink); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.mf-mods a:hover { text-decoration-thickness: 2px; }
/* D138: ziyaretçiye kilitli oyun — kilit ikonu, düz metin rengi (bağlantı okul girişine gider) */
.mf-mods a.mf-kilitli { gap: 4px; color: var(--v2-ink-2); text-decoration-style: dotted; }
.mf-mods a.mf-kilitli .v2-icon { width: 1em; height: 1em; flex: none; }
.mf-kilit-not { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; }
.mf-kilit-not .v2-icon { width: 1.2em; height: 1.2em; flex: none; margin-top: 2px; }
.mf-none { color: var(--v2-ink-2); }
.mf-fw li { line-height: 1.45; overflow-wrap: anywhere; }
.mf-fw-ad { font-weight: var(--v2-weight-heavy); color: var(--v2-ink); }
.mf-fw-ad::after { content: ":"; }
.mf-rel { font-family: var(--v2-font-mono); font-size: var(--v2-text-xs); color: var(--v2-ink-2); }
.mf-rel--tam { color: var(--v2-ink); font-weight: 800; }
.mf-mapcell { min-width: 220px; }

.mf-lvl { display: inline-block; padding: 2px 10px; border-radius: var(--v2-radius-pill); border: 1.5px solid var(--v2-ink); font-weight: var(--v2-weight-heavy); font-size: var(--v2-text-xs); white-space: nowrap; }
.mf-lvl--1 { background: var(--v2-blue-tint); color: var(--v2-blue-ink); }
.mf-lvl--2 { background: var(--v2-yellow-tint); color: var(--v2-yellow-ink); }
.mf-lvl--3 { background: var(--v2-green-tint); color: var(--v2-green-ink); }

.mf-dz { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--v2-weight-heavy); white-space: nowrap; }
.mf-dz .v2-icon { width: 18px; height: 18px; flex: none; }
.mf-dz--ok { color: var(--v2-green-ink); }
.mf-dz--wait { color: var(--v2-yellow-ink); }
.mf-dz--none { color: var(--v2-ink-2); }
.mf-empty { margin: 0; padding: 24px 8px; text-align: center; color: var(--v2-ink-2); font-weight: var(--v2-weight-strong); }

/* Çerçeve listesi */
.mf-fwlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 10px; }
.mf-fwi { display: grid; gap: 6px; padding: 12px 14px; border: var(--v2-stroke-soft) solid var(--v2-line); border-radius: var(--v2-radius-sm); background: var(--v2-paper); min-width: 0; }
.mf-fwi-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.mf-fwi-h .v2-tag { white-space: normal; }
.mf-fwi p { margin: 0; font-size: var(--v2-text-sm); color: var(--v2-ink-2); line-height: 1.45; overflow-wrap: anywhere; }

.mf-note { margin: 0; font-size: var(--v2-text-sm); color: var(--v2-ink-2); line-height: 1.6; max-width: 90ch; }

/* Okulunuz için */
.mf-okul { display: grid; gap: 12px; background: var(--v2-yellow-tint); }
.mf-okul > h2 { margin: 0; }
.mf-okul p { margin: 0; max-width: 72ch; line-height: 1.6; }
.mf-okul__eylem { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 420px) {
  .mf-box { padding: 14px 12px; }
}