/*
 * Wuffi Pet — Design Tokens (CSS Custom Properties)
 *
 * AUTO-GENERATED from assets/json/design-tokens.json.
 * Do NOT edit this file directly — edit the JSON instead and run:
 *   php scripts/export-design-tokens.php
 *
 * Version: 1.1.0
 * Generated: 2026-05-14 17:40 UTC
 *
 * Mobile mirror: wuffi-mobile/lib/theme/tokens.ts (hand-curated).
 */

/* FAZ4 — 3-PLATFORM FONT PARİTESİ (tüm public sayfalar).
   Mobil: gövde Inter, başlık Fredoka (lib/theme/tokens.ts). Web public
   şablonları tutarsızdı (kimi h1 Inter, kimi Fredoka, üstelik Fredoka
   yüklenmiyordu → hep Inter'e düşüyordu). class-wuffi-assets.php
   Google Fonts Inter+Fredoka yüklüyor; burada başlıklar marka fontuna
   SABİTLENİR (legacy çakışan font-family'leri ezmek için !important —
   bilinçli tasarım-sistemi override'ı). Gövde Inter'e DOKUNULMAZ. */
:root {
  --wf-font-head: 'Fredoka', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
h1, h2, h3, h4,
.wf-h1, .wf-h2, .wf-h3,
.wf-section-title, .wf-page-title, .wf-card-title,
[class*="-title"], [class*="hero"] h1, [class*="Hero"] h1 {
  font-family: 'Fredoka', 'Inter', -apple-system, sans-serif !important;
}

:root {
  /* ===== Colors ===== */
  --wf-primary: #ffb923;
  --wf-primary-dark: #cc9a1d;
  --wf-primary-glow: rgba(255, 185, 35, 0.35);
  --wf-primary-subtle: rgba(255, 185, 35, 0.08);
  --wf-primary-border: rgba(255, 185, 35, 0.20);
  --wf-primary-border-strong: rgba(255, 185, 35, 0.40);
  --wf-bg-dark: #110E26;
  --wf-bg-darker: #0D0920;
  --wf-bg-gradient-top: #0E0A22;
  --wf-bg-gradient-mid: #140F2E;
  --wf-bg-gradient-bottom: #110E26;
  --wf-bg-card: #1B1635;
  --wf-bg-card-elevated: #221C42;
  --wf-bg-input: #1F1A3A;
  --wf-bg-light: #FFF8EE;
  --wf-bg-light-card: #FFFFFF;
  --wf-bg-light-input: #FFFAF0;
  --wf-text-primary: #F3EEFF;
  --wf-text-secondary: #B8AED9;
  --wf-text-muted: #8A7FB0;
  --wf-text-inverse: #13102b;
  --wf-text-on-gold: #13102b;
  --wf-success: #00b894;
  --wf-warning: #e17055;
  --wf-danger: #d63031;
  --wf-info: #0984e3;
  --wf-hero-pink: #F4A8C9;
  --wf-hero-teal: #6BD7C9;
  --wf-hero-lilac: #E0A8F4;
  --wf-hero-sparkle: #FFD78A;
  --wf-border: rgba(255, 255, 255, 0.08);
  --wf-border-strong: rgba(255, 255, 255, 0.18);
  --wf-border-light: rgba(26, 20, 56, 0.08);
  --wf-border-light-strong: rgba(26, 20, 56, 0.18);
  --wf-dot-pending: #FFB923;
  --wf-dot-confirmed: #0984e3;
  --wf-dot-completed: #00b894;
  --wf-dot-cancelled: #d63031;
  --wf-dock-bg-top: rgba(19, 16, 43, 0.88);
  --wf-dock-bg-bottom: rgba(20, 11, 40, 0.88);
  --wf-dock-border: rgba(255, 255, 255, 0.09);
  --wf-dock-inset-highlight: rgba(255, 255, 255, 0.06);
  --wf-dock-inactive: rgba(255, 255, 255, 0.85);
  --wf-dock-active: #FFB923;
  --wf-primary-on-light: #B8800A;
  --wf-primary-on-light-dark: #8F6307;
  --wf-text-on-gold-dark: #1A1438;

  /* ===== Spacing ===== */
  --wf-space-xs: 4px;
  --wf-space-sm: 8px;
  --wf-space-md: 12px;
  --wf-space-lg: 16px;
  --wf-space-xl: 24px;
  --wf-space-xxl: 32px;
  --wf-space-xxxl: 48px;
  --wf-space-4xl: 64px;

  /* ===== Radius =====
     v11.13.16 — md:1px ve xl:2px BOZUKTU (köşeler köşeli/tutarsızdı —
     kullanıcı "hepsi aynı yuvarlak olsun" şikayetinin kök nedeni).
     Tutarlı yumuşak ölçek + tek standart (--wf-radius-std) kart/buton/input
     hepsi için. */
  --wf-radius-sm: 10px;
  --wf-radius-md: 14px;
  --wf-radius-lg: 16px;
  --wf-radius-xl: 20px;
  --wf-radius-std: 14px;   /* TEK standart: kart + buton + input + modal-alan */
  --wf-radius-dock: 24px;
  --wf-radius-full: 9999px;

  /* v46 deep-audit NOT: --wf-min-tap token dosyanın altında zaten tanımlı (44px).
   * Aşağıdaki .wf-tap-target utility class WCAG 2.5.5 için zorla 44x44 uygular. */

  /* ===== Font size ===== */
  /* v46 deep-audit BUG FIX (28 May 2026): --wf-font-3xs ve --wf-font-xl
   * üretim CSS'inde 1px / 2px olarak donmuştu (auto-gen drift).
   * JSON kaynağa hizalandı: 3xs=10, xl=20. */
  --wf-font-3xs: 10px;
  --wf-font-2xs: 11px;
  --wf-font-xs: 12px;
  --wf-font-sm: 13px;
  --wf-font-base: 14px;
  --wf-font-md: 15px;
  --wf-font-lg: 17px;
  --wf-font-xl: 20px;
  --wf-font-h2: 24px;
  --wf-font-h1: 28px;
  --wf-font-heroLarge: 32px;

  /* v46 deep-audit — Mobile parity token isimleri.
   * Mobil tokens.ts: fontSize.2xl=24, 3xl=28, 4xl=32. Aliaslar kanonik. */
  --wf-font-2xl: 24px;
  --wf-font-3xl: 28px;
  --wf-font-4xl: 32px;

  /* ===== Font weight ===== */
  --wf-fw-regular: 400;
  --wf-fw-medium: 500;
  --wf-fw-semibold: 600;
  --wf-fw-bold: 700;

  /* ===== Line height ===== */
  --wf-lh-tight: 1.25;
  --wf-lh-base: 1.5;
  --wf-lh-relaxed: 1.6;

  /* ===== Shadow ===== */
  --wf-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
  --wf-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.3);
  --wf-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.38);
  --wf-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.48);
  --wf-shadow-card: 0 2px 16px rgba(0, 0, 0, 0.32);

  /* ===== Gradient ===== */
  --wf-gradient-body-dark: linear-gradient(180deg, #0E0A22 0%, #140F2E 30%, #0D0920 60%, #110E26 100%);
  --wf-gradient-dock-bar: linear-gradient(180deg, rgba(19,16,43,0.88), rgba(20,11,40,0.88));
  --wf-gradient-hero-text: linear-gradient(90deg, #F4A8C9 0%, #FFD78A 50%, #6BD7C9 100%);
  --wf-gradient-cta-gold: linear-gradient(135deg, #FFB923, #FFD78A);
  /* v46 deep-audit Faz 1.7 — Gradient catalog genişletme (5 yeni token).
   * Önceki durum: gradient stops button-unification.css'te hardcoded.
   * Şimdi tek-kaynak token. Hover/disabled gold için ayrı stops. */
  --wf-gradient-cta-gold-hover: linear-gradient(135deg, #ffc846, #FFE2A8);
  --wf-gradient-cta-gold-disabled: linear-gradient(135deg, #8a6611, #6e520e);
  --wf-gradient-section-title: linear-gradient(90deg, #FFB923 0%, #F4A8C9 100%);
  --wf-gradient-gold-line: linear-gradient(90deg, transparent, #FFB923, transparent);
  --wf-gradient-divider-glow: linear-gradient(90deg, transparent, var(--wf-primary), transparent);
  --wf-gradient-rating: linear-gradient(135deg, #FFB923 0%, #FFD06A 100%);

  /* v46 deep-audit Faz 1.11 — Status badge token set.
   * Önceki durum: social-orders.php 5 renk, social-appointments.php 4 renk,
   * hardcoded. Birleşik palette: tek yer kaynak, tüm liste kartları aynı
   * renk kodu (pending=amber, confirmed=blue, completed=green, cancelled=red). */
  --wf-status-pending: #FFB923;        /* gold/amber — bekleme */
  --wf-status-pending-bg: rgba(255, 185, 35, 0.12);
  --wf-status-confirmed: #6BB4FF;      /* blue — onaylandı */
  --wf-status-confirmed-bg: rgba(107, 180, 255, 0.12);
  --wf-status-processing: #B89CFF;     /* lavender — işleniyor */
  --wf-status-processing-bg: rgba(184, 156, 255, 0.12);
  --wf-status-shipped: #6BD7C9;        /* teal — kargolandı */
  --wf-status-shipped-bg: rgba(107, 215, 201, 0.12);
  --wf-status-completed: #37D39B;      /* green — tamamlandı */
  --wf-status-completed-bg: rgba(55, 211, 155, 0.14);
  --wf-status-cancelled: #FF7A7A;      /* red — iptal */
  --wf-status-cancelled-bg: rgba(255, 122, 122, 0.12);

  /* ===== Animation (ms) — v46 Faz 1.23 NOT: --wf-anim-* TARİHSEL ALIAS.
   *  Tek-kaynak --wf-dur-* (aşağıda). YENİ KOD --wf-dur-* kullanmalı.
   *  --wf-anim-* sadece eski component CSS'leri için geçiş sağlar; sonraki sprint sil. ===== */
  --wf-anim-fast: var(--wf-dur-fast, 150ms);
  --wf-anim-base: var(--wf-dur-base, 250ms);
  --wf-anim-slow: var(--wf-dur-slow, 400ms);
  --wf-anim-verySlow: var(--wf-dur-verySlow, 600ms);

  /* ===== Motion (duration ms + easing curves) ===== */
  --wf-dur-instant: 100ms;
  --wf-dur-fast: 150ms;
  --wf-dur-base: 250ms;
  --wf-dur-slow: 400ms;
  --wf-dur-verySlow: 600ms;
  --wf-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --wf-ease-decelerate: cubic-bezier(0.0, 0, 0.2, 1);
  --wf-ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
  --wf-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --wf-ease-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* ===== Glass (frosted layer) ===== */
  /* v11.13.15 — Liquid Glass: blur 2px→18px (araştırma: 12-24px tatlı nokta;
     Apple Liquid Glass + Glassmorphism 2.0). bg/border korunan mor kimlik. */
  /* v11.13.16 — DÜZELTME: önceki bg (rgba(27,22,53,.62)) sayfa rengiyle
     neredeyse aynıydı → cam GÖRÜNMÜYORDU. Artık AYDINLIK buzlu yüzey:
     koyu mor zemin üstünde net "frosted glass" (açık translucent + belirgin
     kenarlık + güçlü specular). Metin kontrastı korunur (yüzey hâlâ koyu-baskın). */
  --wf-glass-bg: rgba(255, 255, 255, 0.065);
  /* v11.13.16 — dock/header DAHA OPAK (kullanıcı: arka plan çok görünüyor).
     Mor-baskın, yarı saydam ama arka plan net görünmez. */
  --wf-glass-bg-dock: rgba(22, 18, 44, 0.92);
  --wf-glass-bg-strong: rgba(38, 32, 72, 0.72);
  --wf-glass-bg-light: rgba(255, 255, 255, 0.72);
  /* v46 Faz 1.8 — Modal glass: card'dan daha opak (modal "kalıcı"),
   * Apple HIG Liquid Glass kuralı: modal/overlay belirgin yüzey gerekir. */
  --wf-glass-bg-modal: rgba(27, 22, 53, 0.96);
  --wf-glass-bg-popover: rgba(27, 22, 53, 0.88);
  --wf-glass-bg-sheet: rgba(22, 18, 44, 0.94);
  --wf-glass-border: rgba(255, 255, 255, 0.20);
  --wf-glass-border-light: rgba(26, 20, 56, 0.14);
  --wf-glass-hi: rgba(255, 255, 255, 0.28); /* üst specular highlight (belirgin) */
  --wf-glass-blur: 20px;
  --wf-glass-blur-strong: 32px;
  --wf-glass-blur-subtle: 14px;

  /* ===== Glow / Halo ===== */
  --wf-glow-primary: 0 8px 24px rgba(255, 185, 35, 0.32);
  --wf-glow-primary-soft: 0 4px 16px rgba(255, 185, 35, 0.18);
  --wf-glow-card: 0 12px 32px rgba(0, 0, 0, 0.4);
  --wf-glow-card-light: 0 8px 24px rgba(26, 20, 56, 0.08);
  --wf-glow-focus: 0 0 0 4px rgba(255, 185, 35, 0.35);

  /* ===== Accessibility ===== */
  --wf-focus-ring: 0 0 0 3px rgba(255, 185, 35, 0.45);
  --wf-min-tap: 44px;
}

/* Light/pudra theme: invert text + bg semantics + WCAG gold fix */
[data-theme="pudra"],
@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
    --wf-bg-dark: var(--wf-bg-light);
    --wf-bg-card: var(--wf-bg-light-card);
    --wf-bg-input: var(--wf-bg-light-input);
    --wf-text-primary: #1A1438;
    --wf-text-secondary: #544A77;
    --wf-text-muted: #5A5A5A;
    --wf-border: var(--wf-border-light);
    --wf-border-strong: var(--wf-border-light-strong);
    /* v1.1.0 — WCAG fix: gold #FFB923 light bg'de 1.63:1 fail.
       --wf-accent-on-surface light tema'da #B8800A kullanır (4.85:1 AA pass). */
    --wf-accent-on-surface: var(--wf-primary-on-light);
    --wf-glass-bg: var(--wf-glass-bg-light);
    --wf-glass-border: var(--wf-glass-border-light);
    --wf-glow-card: var(--wf-glow-card-light);
  }
}

/* Default: dark tema accent = brand gold */
:root {
  --wf-accent-on-surface: var(--wf-primary);
}

/* ============================================
 * v46 deep-audit UTILITY CLASSES (28 May 2026)
 * Faz 1 — Tasarım Tutarlılığı.
 * Token'lar tanımlıydı ama proje genelinde 0 kullanım. Utility class
 * formatı ile component CSS'lerinin opt-in benimsemesi kolaylaşır.
 * ============================================ */

/* WCAG 2.5.5 (Level AAA) + iOS HIG (44pt) + Material Design (48dp) touch target.
 * Tüm icon-only butonlar (.wf-icon-btn, dock-item, modal close, vb.) bu class'ı
 * eklemeli. Görünür boyut korunur — yalnız min-width/min-height zorlanır. */
.wf-tap-target {
  min-width: var(--wf-min-tap);
  min-height: var(--wf-min-tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* v46 — Section başlık utility (önceki 3 yer 3 farklı stil → tek standard).
 * .wf-secthead: uppercase 11.5px 800w letter-spacing 0.7px color muted.
 * Sol sidebar "Keşfet", sağ ray "Hesabım", Pati Puanı kart başlığı vb. için. */
.wf-secthead {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--wf-text-muted);
  margin: 0 0 8px;
}

/* v46 — Focus ring utility. Token --wf-focus-ring tanımlıydı, kullanılmıyordu.
 * keyboard-only focus (Tab) için. :focus-visible modern browser default. */
.wf-focusable:focus-visible,
.wf-input:focus-visible,
.wf-btn-primary:focus-visible,
.wf-btn-secondary:focus-visible {
  outline: none;
  box-shadow: var(--wf-focus-ring);
}

/* v46 Faz 1.13 — Status badge utility class.
 * Önceki durum: social-orders 5 renk, social-appointments 4 renk, hardcoded.
 * Tek bileşen: <span class="wf-status-pill is-pending">Bekliyor</span> */
.wf-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1.3;
  white-space: nowrap;
}
.wf-status-pill.is-pending {
  background: var(--wf-status-pending-bg);
  color: var(--wf-status-pending);
}
.wf-status-pill.is-confirmed {
  background: var(--wf-status-confirmed-bg);
  color: var(--wf-status-confirmed);
}
.wf-status-pill.is-processing {
  background: var(--wf-status-processing-bg);
  color: var(--wf-status-processing);
}
.wf-status-pill.is-shipped {
  background: var(--wf-status-shipped-bg);
  color: var(--wf-status-shipped);
}
.wf-status-pill.is-completed {
  background: var(--wf-status-completed-bg);
  color: var(--wf-status-completed);
}
.wf-status-pill.is-cancelled {
  background: var(--wf-status-cancelled-bg);
  color: var(--wf-status-cancelled);
}

/* v46 Faz 1.14 — Form field error pattern utility.
 * Önceki durum: 4 sayfada 4 farklı kırmızı + 3 farklı padding. */
.wf-field-error {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--wf-status-cancelled);
}
.wf-form-error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--wf-status-cancelled-bg);
  border: 1px solid rgba(255, 122, 122, 0.32);
  border-radius: 10px;
  font-size: 13px;
  color: var(--wf-status-cancelled);
  margin: 8px 0;
}

/* v46 Faz 1.15 — Rating yıldız sıra utility.
 * Önceki durum: 4 boyut (12/14/18 + text "★"), 2 ikon kütüphanesi karışık.
 * Component: <span class="wf-stars" style="--rating: 4.6"></span>
 * CSS conic-gradient ile altın doluluk + gri kalan. SVG bağımsız. */
.wf-stars {
  --rating: 0;
  --w: 14px;
  display: inline-block;
  position: relative;
  width: calc(var(--w) * 5);
  height: var(--w);
  background: linear-gradient(
    90deg,
    var(--wf-primary) calc(var(--rating) / 5 * 100%),
    rgba(255, 255, 255, 0.18) calc(var(--rating) / 5 * 100%)
  );
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 14"><path fill="black" d="M7 1l1.8 3.6 4 .6-2.9 2.8.7 4-3.6-1.9-3.6 1.9.7-4L1 5.2l4-.6L7 1zm14 0l1.8 3.6 4 .6-2.9 2.8.7 4-3.6-1.9-3.6 1.9.7-4L15 5.2l4-.6L21 1zm14 0l1.8 3.6 4 .6-2.9 2.8.7 4-3.6-1.9-3.6 1.9.7-4L29 5.2l4-.6L35 1zm14 0l1.8 3.6 4 .6-2.9 2.8.7 4-3.6-1.9-3.6 1.9.7-4L43 5.2l4-.6L49 1zm14 0l1.8 3.6 4 .6-2.9 2.8.7 4-3.6-1.9-3.6 1.9.7-4L57 5.2l4-.6L63 1z"/></svg>') no-repeat center/contain;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 14"><path fill="black" d="M7 1l1.8 3.6 4 .6-2.9 2.8.7 4-3.6-1.9-3.6 1.9.7-4L1 5.2l4-.6L7 1zm14 0l1.8 3.6 4 .6-2.9 2.8.7 4-3.6-1.9-3.6 1.9.7-4L15 5.2l4-.6L21 1zm14 0l1.8 3.6 4 .6-2.9 2.8.7 4-3.6-1.9-3.6 1.9.7-4L29 5.2l4-.6L35 1zm14 0l1.8 3.6 4 .6-2.9 2.8.7 4-3.6-1.9-3.6 1.9.7-4L43 5.2l4-.6L49 1zm14 0l1.8 3.6 4 .6-2.9 2.8.7 4-3.6-1.9-3.6 1.9.7-4L57 5.2l4-.6L63 1z"/></svg>') no-repeat center/contain;
}
.wf-stars.is-sm { --w: 11px; }
.wf-stars.is-lg { --w: 18px; }

/* v46 Faz 2.47 — Header bildirim çanı vs mesaj kuş ikon ayrım.
 * Önceki durum: ikisi de outline daire yan-yana, ayırt etmesi zor.
 * Çözüm: bildirim çanı = hafif sarı arka + sarı border (öncelik vurgusu),
 * mesaj kuşu = saf outline (mevcut tasarım). Renk-kodlamayla bir bakışta anlaşılır. */
#wfNotifBell {
  background: var(--wf-primary-subtle);
  border-color: var(--wf-primary-border);
}
#wfNotifBell:hover {
  background: var(--wf-primary-glow);
  border-color: var(--wf-primary-border-strong);
}

/* v46 Faz 2.50 — Mobil drawer hamburger ikonu açık iken X'e dönüşür. */
.wf-site-hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.wf-site-hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.wf-site-hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
.wf-site-hamburger span {
  transition: transform var(--wf-dur-fast) var(--wf-ease-standard),
              opacity var(--wf-dur-fast) var(--wf-ease-standard);
  transform-origin: center;
}

/* v46 Faz 2.31 — Dock badge web side (mesaj/bildirim unread).
 * #wf-dock-msg-badge zaten header.php'de tanımlı; dock'a embed için ek style. */
.wf-dock-item .wf-dock-badge {
  position: absolute;
  top: 6px;
  right: 8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--wf-bg-card);
  z-index: 2;
}
.wf-dock-item .wf-dock-badge.is-empty { display: none; }
.wf-dock-item .wf-dock-badge.is-many::after { content: '+'; }

/* v46 Faz 2.40 — Sağ ray pcard üst, sol sidebar Pati Puanı (karar:
 * v37 sol=puan, sağ=Profilim+Hesabım). 980-1279px sağ ray gizli kalıyordu;
 * yeni breakpoint 1100px'e indirilir + Profilim mini-kapsül header alternatif. */
@media (min-width: 1100px) and (max-width: 1279px) {
  .wf-right { display: block !important; }
  .wf-right .wf-pcard { padding: 12px 14px; }
  .wf-right .wf-pcard-av { width: 56px; height: 56px; }
}

/* v46 Faz 1.16 — Skeleton tek class (shimmer pattern).
 * Önceki durum: 2 farklı keyframe (wfSkelPulse + shimmer). Tek tanım. */
.wf-skel {
  display: block;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.10) 50%,
    rgba(255, 255, 255, 0.04) 100%
  );
  background-size: 200% 100%;
  animation: wfSkelShimmer 1.4s ease-in-out infinite;
  border-radius: var(--wf-radius-md);
}
.wf-skel.is-text { height: 14px; margin: 6px 0; }
.wf-skel.is-title { height: 22px; width: 60%; margin: 8px 0; }
.wf-skel.is-avatar { width: 48px; height: 48px; border-radius: 999px; }
.wf-skel.is-thumb { aspect-ratio: 1; }
.wf-skel.is-card { height: 120px; }
@keyframes wfSkelShimmer {
  0%, 100% { background-position: 200% 0; }
  50%      { background-position: -200% 0; }
}