/* a4-routes — bu dosya tek bir ajana ait. polish.css'e dokunulmuyor.
   Kapsam: rota listesi kartları, rota detay kenar çubuğu ve profil
   "Rotalar" sekmesinin aydınlık tema düzeltmeleri.
   Kural: renkler yalnız var(--mg-*) token'ları (ve color-mix türevleri)
   üzerinden; sabit hex kullanılmıyor, aksi halde aydınlık tema bozuluyor. */

/* ============================================================
   1) HARİTA DOKUSU  (kapak görseli olmayan rota yüzeyleri)
   NEDEN CSS deseni: liste her satır için Leaflet başlatmak ağır olurdu
   (30 kart = 30 harita örneği + tile isteği). Onun yerine token'lı
   degradelerden şehir planı hissi veren bir doku üretiliyor; rotanın
   gerçek izi bunun ÜSTÜNE tek bir satır içi SVG olarak çiziliyor.
   Doku her koşulda var, iz gelmese bile boş gri kutu kalmıyor.
   ============================================================ */
.mg-map-canvas,
.route-img,                                /* profil sekmesindeki rota kartı — Profile.razor'a dokunulamıyor */
html[data-theme="light"] .mg-map-canvas {  /* polish.css'teki .route-page-art aydınlık kuralını eşit özgüllükle ez */
  /* Ölçü ayrı bir --mm-unit ile veriliyor: bu blok aydınlık temada daha
     özgül bir seçiciyle de eşleştiği için ölçüyü doğrudan burada yazsaydık
     yüzeye özel değerleri (aşağıdaki 12/8/15px) ezerdi. */
  --mm-u: var(--mm-unit, 17px);                                     /* sokak ızgarası aralığı */
  --mm-grid: color-mix(in srgb, var(--mg-text) 9%, transparent);
  --mm-road: color-mix(in srgb, var(--mg-text) 17%, transparent);
  --mm-green: color-mix(in srgb, var(--mg-accent) 9%, transparent); /* park/yeşil alan lekesi */
  --mm-water: color-mix(in srgb, var(--mg-text) 7%, transparent);   /* su/açık alan lekesi */
  position: relative;
  overflow: hidden;
  background-color: var(--mg-surface-2);
  background-image:
    /* kenarları koyulaştıran hafif vinyet — iz ortada daha okunur olsun */
    radial-gradient(120% 100% at 50% 45%, transparent 44%, color-mix(in srgb, var(--mg-bg) 42%, transparent)),
    radial-gradient(78% 62% at 16% 86%, var(--mm-water), transparent 64%),
    radial-gradient(64% 56% at 86% 16%, var(--mm-green), transparent 62%),
    /* iki ana arter */
    repeating-linear-gradient(64deg, transparent 0, transparent calc(var(--mm-u) * 3.2 - 3px),
      var(--mm-road) calc(var(--mm-u) * 3.2 - 3px), var(--mm-road) calc(var(--mm-u) * 3.2)),
    repeating-linear-gradient(-27deg, transparent 0, transparent calc(var(--mm-u) * 4.6 - 2px),
      var(--mm-road) calc(var(--mm-u) * 4.6 - 2px), var(--mm-road) calc(var(--mm-u) * 4.6)),
    /* sokak ızgarası */
    repeating-linear-gradient(0deg, transparent 0, transparent calc(var(--mm-u) - 1px),
      var(--mm-grid) calc(var(--mm-u) - 1px), var(--mm-grid) var(--mm-u)),
    repeating-linear-gradient(90deg, transparent 0, transparent calc(var(--mm-u) - 1px),
      var(--mm-grid) calc(var(--mm-u) - 1px), var(--mm-grid) var(--mm-u));
}

/* Doku, yüzeyin boyutuna göre sıklaşır: 58px'lik rayda 17px'lik ızgara
   tek çizgiye düşüyor, harita gibi durmuyordu. */
.route-img { --mm-unit: 12px; }
.real-route-thumb.mg-map-canvas { --mm-unit: 8px; }
.route-cover-mini.mg-map-canvas { --mm-unit: 15px; }

/* ---------- Rotanın gerçek izi (satır içi SVG) ---------- */
.mg-mini-map {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; fill: none; pointer-events: none;
}
/* Hale: iz, altındaki yol çizgilerinden ayrışsın */
.mg-mini-map .mm-halo {
  stroke: color-mix(in srgb, var(--mg-surface-2) 78%, transparent);
  stroke-width: 9.5; stroke-linecap: round; stroke-linejoin: round;
}
.mg-mini-map .mm-line {
  stroke: var(--mg-accent); stroke-width: 4.2;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Başlangıç açık halka, bitiş dolu marka noktası — maps.js'teki
   yeşil/kırmızı ayrımının token'lı karşılığı. */
.mg-mini-map .mm-start { fill: var(--mg-surface); stroke: var(--mg-text); stroke-width: 2.4; }
.mg-mini-map .mm-end { fill: var(--mg-accent); stroke: var(--mg-surface); stroke-width: 2.4; }

/* İz gelmeden önceki (ya da izi olmayan rotanın) yedek ikonu */
.route-page-art.mg-map-canvas > .mg-icon { opacity: .55; }

/* route-pro.css'teki ::after karartması FOTOĞRAF için var (rozet okunsun diye).
   Çizilmiş haritanın üstünde işe yaramıyor: dokuyu ve izi soluklaştırıyor,
   aydınlık temada açık haritayı gri bir kutuya çeviriyordu. */
.route-page-media.is-drawn::after { display: none; }

/* ============================================================
   2) LİSTE KARTI: kapak üstü yol tarifi eylemi
   Kart artık <a> değil <article>; gezinme .route-page-link kaplamasıyla
   sürüyor. NEDEN: yol tarifi bağlantısı başka bir <a>'nın içine
   konulamaz (geçersiz HTML, tarayıcı iç bağlantıyı yutar).
   Yığın düzeni: içerik (auto) < kart kaplaması (1) < eylemler (2-3).
   ============================================================ */
.route-page-card { position: relative; }
.route-page-link {
  position: absolute; inset: 0; z-index: 1;
  text-decoration: none; border-radius: inherit;
}
.route-page-link:focus-visible { outline: 2px solid var(--mg-accent); outline-offset: -3px; }

/* Kaplamanın altında kalmaması gereken tıklanabilir öğeler */
.route-page-card .user-avatar,
.route-page-card .user-identity-text { position: relative; z-index: 2; }
/* Rozet yalnız süs; kaplamanın üstünde ölü alan oluşturmasın */
.route-page-media > span { pointer-events: none; }

.route-nav-cta {
  position: absolute; z-index: 3; top: 11px; right: 11px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px; border-radius: 999px; line-height: 1;
  border: 1px solid color-mix(in srgb, var(--mg-text) 18%, transparent);
  background: color-mix(in srgb, var(--mg-surface) 86%, transparent);
  backdrop-filter: blur(7px);
  color: var(--mg-text); font-size: 11.5px; font-weight: 700; letter-spacing: -.1px;
  text-decoration: none;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--mg-bg) 45%, transparent);
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.route-nav-cta .mg-icon { color: var(--mg-accent-ink); }
.route-nav-cta:hover {
  background: var(--mg-surface); border-color: var(--mg-accent);
  color: var(--mg-accent-ink); transform: translateY(-1px);
}
.route-nav-cta:focus-visible { outline: 2px solid var(--mg-accent); outline-offset: 2px; }

@media (max-width: 520px) {
  /* Dar ekranda rozet ve eylem çakışmasın diye eylem küçülüyor */
  .route-nav-cta { top: 9px; right: 9px; padding: 6px 9px; font-size: 11px; }
}

/* ============================================================
   3) PROFİL → "ROTALAR" SEKMESİ, AYDINLIK TEMA
   Sorun: social.css'teki .route-card/.route-img/.route-body sabit koyu
   renkler taşıyor; theme.css bunları yalnız ".social-app .route-card"
   olarak ele almış. Profil sayfasının kabuğu ise .forum-app-shell —
   yani kural hiç tutmuyor ve aydınlık temada koyu kart üstünde koyu
   yazı çıkıyordu. Kaynak dosyalar değiştirilmeden burada eziliyor.
   ============================================================ */
html[data-theme="light"] .route-card {
  background: var(--mg-surface); border-color: var(--mg-line); color: var(--mg-text);
}
html[data-theme="light"] .route-card:hover { border-color: var(--mg-line-strong); }
html[data-theme="light"] .route-body b { color: var(--mg-text); }
html[data-theme="light"] .route-body p { color: var(--mg-muted); }

/* Üçüncül metin ve ikonlar --mg-faint yerine --mg-muted:
   beyaz üstünde --mg-faint (#8a94a1) yalnız 3.07:1 veriyor, WCAG AA 4.5:1
   istiyor. --mg-muted (#5d6774) 5.74:1'e çıkarıyor. Koyu temada aynı metin
   zaten 4.74:1 olduğu için orası değiştirilmiyor. */
html[data-theme="light"] .route-body small,
html[data-theme="light"] .route-body small .mg-icon,
html[data-theme="light"] .route-img,                       /* boş kartın rota ikonu */
html[data-theme="light"] .route-page-author small,         /* liste kartında paylaşım tarihi */
html[data-theme="light"] .forum-right .real-route > b > small {
  color: var(--mg-muted);
}

/* Aynı sekmedeki liste kabuğu ve boş durum kutusu da token'lara bağlansın */
html[data-theme="light"] .profile-main .forum-empty { background: var(--mg-surface); border-color: var(--mg-line); }
html[data-theme="light"] .profile-main .forum-empty b { color: var(--mg-text); }
html[data-theme="light"] .profile-main .forum-empty small { color: var(--mg-muted); }

/* ============================================================
   4) ROTA DETAYI — kenar çubuğundaki kapak
   Kapak yoksa .route-cover-mini sabit koyu bir kutuydu (route-pro.css).
   Artık harita dokusu + rotanın kendi izi çiziliyor.
   ============================================================ */
.route-cover-mini.mg-map-canvas { border: 1px solid var(--mg-line); }
html[data-theme="light"] .route-cover-mini.mg-map-canvas { border-color: var(--mg-line); }