/* ============================================================
   2026-09 web düzeltmeleri
   - Akış altında sonsuz kaydırma yükleyicisi (iskelet + nokta animasyonu)
   - Keşfet: Trend / Tüm zamanlar / En yeni sıralama anahtarı
   - Ana sayfa "Yakındaki işletmeler": logolu satır küçük görseli
   - Rota detayı: beğenilmiş rota için dolu kırmızı kalp
   ============================================================ */

/* ---------- Sonsuz kaydırma ---------- */
.feed-load-sentinel {
  min-height: 24px; margin: 8px 0 28px;
  /* Eski ".feed-load-more" düğme görünümünden arınmış hâli: boş çerçeve kalmasın. */
  border: 0; background: none; padding: 0;
}
.feed-load-sentinel.is-loading { min-height: 0; }
.feed-skeleton {
  border: 1px solid var(--mg-line); border-radius: 14px; background: var(--mg-surface);
  padding: 16px; display: grid; gap: 10px; margin: 14px 0 12px; overflow: hidden;
  animation: mg-fade-in .25s ease both;
}
.feed-skeleton-head { display: flex; align-items: center; gap: 10px; }
.feed-skeleton .sk-avatar { width: 40px; height: 40px; border-radius: 50%; }
.feed-skeleton .sk-lines { display: grid; gap: 6px; flex: 1; }
.feed-skeleton .sk-lines i { display: block; height: 10px; border-radius: 6px; width: 38%; }
.feed-skeleton .sk-lines i + i { width: 22%; height: 8px; }
.feed-skeleton .sk-text { height: 10px; border-radius: 6px; width: 92%; }
.feed-skeleton .sk-text.short { width: 64%; }
.feed-skeleton .sk-media { height: 200px; border-radius: 12px; margin-top: 4px; }
.feed-skeleton .sk-avatar, .feed-skeleton .sk-lines i, .feed-skeleton .sk-text, .feed-skeleton .sk-media {
  background: linear-gradient(90deg, var(--mg-surface-2) 0%, var(--mg-line-strong) 45%, var(--mg-surface-2) 90%);
  background-size: 220% 100%;
  animation: mg-shimmer 1.25s ease-in-out infinite;
}
.feed-more-loader { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 6px 0 4px; color: var(--mg-muted); font-size: 12px; }
.mg-dots { display: inline-flex; gap: 5px; }
.mg-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--mg-accent); animation: mg-dot 1s ease-in-out infinite; }
.mg-dots i:nth-child(2) { animation-delay: .15s; }
.mg-dots i:nth-child(3) { animation-delay: .3s; }
.feed-more-error {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  border: 1px solid var(--mg-line); border-radius: 12px; padding: 12px; font-size: 13px; color: var(--mg-muted);
  background: var(--mg-surface);
}
.feed-more-error button { border: 0; border-radius: 8px; padding: 7px 12px; background: var(--mg-accent); color: #fff; font-weight: 700; cursor: pointer; }
.feed-end { display: flex; align-items: center; gap: 12px; margin: 18px 0 36px; color: var(--mg-faint); font-size: 12px; }
.feed-end span { flex: 1; height: 1px; background: var(--mg-line); }

@keyframes mg-shimmer { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
@keyframes mg-dot { 0%, 80%, 100% { transform: translateY(0); opacity: .35; } 40% { transform: translateY(-5px); opacity: 1; } }
@keyframes mg-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .feed-skeleton, .feed-skeleton * , .mg-dots i { animation: none !important; }
}

/* ---------- Keşfet sıralama anahtarı ---------- */
.xp-head-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.sort-switch {
  display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px;
  background: var(--mg-surface-2); border: 1px solid var(--mg-line);
}
.sort-switch button {
  display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; cursor: pointer;
  color: var(--mg-muted); border-radius: 7px; padding: 6px 10px; font-size: 12px; font-weight: 700; line-height: 1;
  transition: background .15s ease, color .15s ease;
}
.sort-switch button:hover:not(:disabled) { color: var(--mg-text); }
.sort-switch button.active { background: var(--mg-surface); color: var(--mg-accent-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
.sort-switch button:disabled { cursor: progress; }
.sort-switch button:focus-visible { outline: 2px solid var(--mg-accent); outline-offset: 1px; }
.xp-sort-loading, .xp-sort-empty { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--mg-muted); margin: -4px 0 10px; }
.xp-car-grid.is-busy, .xp-user-grid.is-busy { opacity: .45; pointer-events: none; transition: opacity .2s ease; }
@media (max-width: 720px) {
  .xp-head { flex-wrap: wrap; }
  .sort-switch button span { display: none; }
  .sort-switch button { padding: 7px 9px; }
}

/* ---------- Yakındaki işletmeler: logo küçük görseli ---------- */
.svc-thumb.has-logo { background: #fff; }
.svc-thumb.has-logo img { object-fit: contain; padding: 3px; box-sizing: border-box; }

/* ---------- Rota beğenisi: dolu kırmızı kalp ---------- */
.route-like-button .mg-icon { transition: transform .15s ease, color .15s ease; }
.route-like-button.liked .mg-icon,
.route-page-content footer span.liked .mg-icon { color: #e11d48; }
.route-like-button.liked:active .mg-icon { transform: scale(1.2); }
.route-page-content footer span.liked { color: #e11d48; }