/*
 * Motta — Storefront Catalog Lazy-Load Pagination
 * v2800 Faz 3 Agent M3
 *
 * Skeleton card + sentinel + end-of-list + retry stilleri. Tüm sınıflar
 * .mc-grid__* veya .mc-card--skeleton namespace'i altındadır; mevcut
 * .mc-grid / .mc-card stilleriyle çakışmaz.
 *
 * IntersectionObserver hedef sentinel'i .mc-grid__cards grid container'ının
 * son child'ıdır; grid-column: 1 / -1 ile satır boyunca uzanır.
 */

:root {
  /* Renk SSOT — degerler birebir korunur (gorsel regresyon yok), tema override
   * sadece bu degiskenleri yeniden tanimlar. */
  --mc-pg-text-muted: #64748b;
  --mc-pg-danger-text: #b91c1c;
  --mc-pg-accent: #b45309;
  --mc-pg-accent-hover: #92400e;
  --mc-pg-skeleton-base: rgba(241, 245, 249, 1);
  --mc-pg-skeleton-shine: rgba(226, 232, 240, 1);
  --mc-pg-skeleton-border: rgba(226, 232, 240, 0.6);
  --mc-pg-skeleton-fill: rgba(255, 255, 255, 0.55);
}

.mc-grid__sentinel {
  grid-column: 1 / -1;
  height: 24px;
  width: 100%;
  pointer-events: none;
  visibility: hidden; /* görünmez ama observer için ölçülebilir */
}

/* Skeleton sarmalayıcı: display: contents ile grid item olmaktan çıkıp
 * iç skeleton kartlarını doğrudan grid'e dağıtır */
.mc-grid__skeleton-wrap {
  display: contents;
}

/* Skeleton kartı — gerçek .mc-card iskeletiyle aynı boyut/ölçü */
.mc-card--skeleton {
  background: linear-gradient(
    90deg,
    var(--mc-pg-skeleton-base, rgba(241, 245, 249, 1)) 25%,
    var(--mc-pg-skeleton-shine, rgba(226, 232, 240, 1)) 50%,
    var(--mc-pg-skeleton-base, rgba(241, 245, 249, 1)) 75%
  );
  background-size: 200% 100%;
  animation: mc-skeleton-pulse 1.6s ease-in-out infinite;
  border-radius: 10px;
  padding: 14px;
  min-height: 280px;
  border: 1px solid var(--mc-pg-skeleton-border, rgba(226, 232, 240, 0.6));
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.mc-card__skeleton-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--mc-pg-skeleton-fill, rgba(255, 255, 255, 0.55));
  border-radius: 8px;
  margin-bottom: 6px;
}

.mc-card__skeleton-title,
.mc-card__skeleton-meta {
  height: 12px;
  background: var(--mc-pg-skeleton-fill, rgba(255, 255, 255, 0.55));
  border-radius: 4px;
}

.mc-card__skeleton-title { width: 75%; }
.mc-card__skeleton-meta  { width: 45%; height: 10px; }

@keyframes mc-skeleton-pulse {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mc-card--skeleton { animation: none; background: var(--mc-pg-skeleton-base, rgba(241, 245, 249, 1)); }
}

/* End-of-list rozeti */
.mc-grid__end {
  grid-column: 1 / -1;
  text-align: center;
  padding: 22px 16px 6px;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--mc-pg-text-muted, #64748b);
  font-style: italic;
  opacity: 0.85;
}

/* Hata kutusu + tekrar dene butonu */
.mc-grid__error {
  grid-column: 1 / -1;
  text-align: center;
  padding: 22px 16px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.18);
  border-radius: 10px;
  margin: 12px 0;
}

.mc-grid__error-text {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--mc-pg-danger-text, #b91c1c);
  font-weight: 500;
}

.mc-grid__retry {
  padding: 8px 24px;
  min-height: 44px; /* WCAG AA dokunmatik hedef */
  background: var(--mc-pg-accent, #b45309);
  color: #ffffff;
  border: none;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.12s ease;
}

.mc-grid__retry:hover  { background: var(--mc-pg-accent-hover, #92400e); transform: translateY(-1px); }
.mc-grid__retry:active { transform: translateY(0); }
.mc-grid__retry:focus-visible {
  outline: 2px solid var(--mc-pg-accent, #b45309);
  outline-offset: 2px;
}

/* Dark theme — body[data-theme="dark"] veya .mc-dark hook'ları.
 * Sadece token degerleri override edilir; degerler birebir korunur. */
body[data-theme="dark"],
.mc-dark {
  --mc-pg-text-muted: #94a3b8;
  --mc-pg-danger-text: #fca5a5;
  --mc-pg-skeleton-base: rgba(30, 41, 59, 1);
  --mc-pg-skeleton-shine: rgba(51, 65, 85, 1);
  --mc-pg-skeleton-border: rgba(51, 65, 85, 0.6);
  --mc-pg-skeleton-fill: rgba(15, 23, 42, 0.5);
}

body[data-theme="dark"] .mc-card--skeleton,
.mc-dark .mc-card--skeleton {
  background: linear-gradient(
    90deg,
    var(--mc-pg-skeleton-base, rgba(30, 41, 59, 1)) 25%,
    var(--mc-pg-skeleton-shine, rgba(51, 65, 85, 1)) 50%,
    var(--mc-pg-skeleton-base, rgba(30, 41, 59, 1)) 75%
  );
  background-size: 200% 100%;
  border-color: var(--mc-pg-skeleton-border, rgba(51, 65, 85, 0.6));
}

body[data-theme="dark"] .mc-card__skeleton-thumb,
body[data-theme="dark"] .mc-card__skeleton-title,
body[data-theme="dark"] .mc-card__skeleton-meta,
.mc-dark .mc-card__skeleton-thumb,
.mc-dark .mc-card__skeleton-title,
.mc-dark .mc-card__skeleton-meta {
  background: var(--mc-pg-skeleton-fill, rgba(15, 23, 42, 0.5));
}

body[data-theme="dark"] .mc-grid__end,
.mc-dark .mc-grid__end {
  color: var(--mc-pg-text-muted, #94a3b8);
}

body[data-theme="dark"] .mc-grid__error,
.mc-dark .mc-grid__error {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.28);
}

body[data-theme="dark"] .mc-grid__error-text,
.mc-dark .mc-grid__error-text {
  color: var(--mc-pg-danger-text, #fca5a5);
}