/* ==========================================================================
   Stage Lazy
   İskelet, mevcut kutunun (görsel / yazı / buton) ölçü, radius ve boşluğunu
   kullanır — tasarımı büyütmez, küçültmez, oranı değiştirmez.
   ========================================================================== */

:root {
  --sl-base: #e8e8e8;
  --sl-shine: #f6f6f6;
}

@keyframes sl-shimmer {
  0%   { background-position: 150% 0; }
  100% { background-position: -50% 0; }
}

@keyframes sl-fade-in {
  from { opacity: 0.001; }
  to   { opacity: 1; }
}

/* ---------- Görsel kutusu: tasarım yüksekliği (650/550/480/420) ---------- */
.sl-media {
  isolation: isolate;
  background-color: var(--sl-base) !important;
  background-image: linear-gradient(105deg,
      transparent 20%, var(--sl-shine) 45%, transparent 70%) !important;
  background-size: 250% 100% !important;
  background-repeat: no-repeat !important;
  animation: sl-shimmer 1.4s ease-in-out infinite;
}

.sl-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  border-radius: inherit;
  pointer-events: none;
  background-color: var(--sl-base);
  background-image: linear-gradient(105deg,
      transparent 20%, var(--sl-shine) 45%, transparent 70%);
  background-size: 250% 100%;
  background-repeat: no-repeat;
  animation: sl-shimmer 1.4s ease-in-out infinite;
}

/* Ham görsel görünmesin; kutu overlay tasarım boyutunu taşır */
img.sl-pending {
  opacity: 0 !important;
  color: transparent;
  font-size: 0;
}

img.sl-loaded {
  animation: sl-fade-in 0.4s ease;
}

/* ---------- Yazı: aynı kutu / punto / satır ---------- */
.sl-text {
  position: relative;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  caret-color: transparent;
  background-color: transparent;
  background-image:
    linear-gradient(105deg, transparent 18%, var(--sl-shine) 48%, transparent 72%),
    repeating-linear-gradient(
      to bottom,
      var(--sl-base) 0,
      var(--sl-base) var(--sl-bar, 0.7em),
      transparent var(--sl-bar, 0.7em),
      transparent var(--sl-lh, 1.2em)
    );
  background-size: 250% 100%, 100% auto;
  background-repeat: no-repeat, repeat-y;
  background-position: 150% 0, 0 var(--sl-pad, 0.14em);
  background-clip: border-box;
  -webkit-background-clip: border-box;
  animation: sl-shimmer 1.4s ease-in-out infinite;
}

.sl-text,
.sl-text *,
.sl-text .char,
.sl-text .tp-title-text {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

.sl-text a,
.sl-text span,
.sl-text em,
.sl-text strong,
.sl-text b,
.sl-text i {
  background: none !important;
  background-image: none !important;
}

/* ---------- Buton / chip: aynı padding, radius, genişlik ---------- */
.sl-chip {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  background-color: var(--sl-base) !important;
  background-image: linear-gradient(105deg,
      transparent 18%, var(--sl-shine) 48%, transparent 72%) !important;
  background-size: 250% 100% !important;
  background-repeat: no-repeat !important;
  animation: sl-shimmer 1.4s ease-in-out infinite;
  pointer-events: none;
}

.sl-chip * {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

.sl-text-in,
.sl-chip-in {
  animation: sl-fade-in 0.35s ease;
}

.sl-media-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-color: var(--sl-base);
  background-image: linear-gradient(105deg,
      transparent 20%, var(--sl-shine) 45%, transparent 70%);
  background-size: 250% 100%;
  background-repeat: no-repeat;
  animation: sl-shimmer 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  img.sl-pending,
  .sl-text,
  .sl-chip,
  .sl-media::before,
  .sl-media-loading::before { animation: none; }
  img.sl-loaded,
  .sl-text-in,
  .sl-chip-in { animation: none; }
}