/*
 * 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.
 */

.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,
    rgba(241, 245, 249, 1) 25%,
    rgba(226, 232, 240, 1) 50%,
    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 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: rgba(255, 255, 255, 0.55);
  border-radius: 8px;
  margin-bottom: 6px;
}

.mc-card__skeleton-title,
.mc-card__skeleton-meta {
  height: 12px;
  background: 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: 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: #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: #b91c1c;
  font-weight: 500;
}

.mc-grid__retry {
  padding: 8px 24px;
  background: #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: #92400e; transform: translateY(-1px); }
.mc-grid__retry:active { transform: translateY(0); }
.mc-grid__retry:focus-visible {
  outline: 2px solid #c9a24d;
  outline-offset: 2px;
}

/* Dark theme — body[data-theme="dark"] veya .mc-dark hook'ları */
body[data-theme="dark"] .mc-card--skeleton,
.mc-dark .mc-card--skeleton {
  background: linear-gradient(
    90deg,
    rgba(30, 41, 59, 1) 25%,
    rgba(51, 65, 85, 1) 50%,
    rgba(30, 41, 59, 1) 75%
  );
  background-size: 200% 100%;
  border-color: 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: rgba(15, 23, 42, 0.5);
}

body[data-theme="dark"] .mc-grid__end,
.mc-dark .mc-grid__end {
  color: #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: #fca5a5;
}