/* ============================================================================
   Lalin Tasarım Sistemi — lds-skeleton.css  (klinik / KlinikPro)
   Tek kaynak (miras): .kiro/steering/design-system.md  (§8 Skeleton shimmer)
   Yükleme sırası: … → components.css → lds-patterns.css → lds-skeleton.css
   ----------------------------------------------------------------------------
   AMAÇ (tasks.md 1.2): İçerik yüklenirken iskelet (skeleton) shimmer deseni.
   components.css ZATEN `.lds .skeleton` tabanını ve `@keyframes lds-shimmer`
   anahtar karelerini tanımlar; BURADA YENİDEN TANIMLANMAZ. Bu dosya yalnızca
   skeleton ŞEKİL/YERLEŞİM varyantlarını (.skeleton-* yardımcıları) ekler ve
   bağımsız bir `prefers-reduced-motion` koruması sağlar.

   KURALLAR:
   - Tüm seçiciler `.lds` kök kapsamı altında (legacy Bootstrap/nova bozulmaz).
   - Token yoksa ham değer yok; renkler/yarıçaplar/boşluklar tokens.css'ten.
   - Shimmer yalnızca background-position'ı oynatır (compositor dostu); başka
     animasyon yok, `transition: all` YASAK.
   - `prefers-reduced-motion: reduce` → shimmer kapatılır, sade nötr blok kalır.
   ============================================================================ */

/* ============================ ŞEKİL VARYANTLARI =============================
   Hepsi components.css'teki `.lds .skeleton` ile birlikte kullanılır:
     <span class="skeleton skeleton-text"></span>
   `.skeleton` shimmer dolgusunu ve temel yarıçapı taşır; aşağıdakiler ölçü. */

/* Metin satırı: tek satır yüksekliği; son satır kısa (doğal paragraf hissi). */
.lds .skeleton-text{ height:.85em; border-radius:var(--radius-xs); }
.lds .skeleton-text + .skeleton-text{ margin-top:var(--space-2); }
.lds .skeleton-text--sm{ height:.7em; }
.lds .skeleton-text--lg{ height:1.1em; }
.lds .skeleton-text--w75{ width:75%; }
.lds .skeleton-text--w50{ width:50%; }
.lds .skeleton-text--w33{ width:33%; }

/* Başlık bloğu: gövde metninden belirgin daha kalın. */
.lds .skeleton-title{ height:1.4em; width:60%; border-radius:var(--radius-sm); }

/* Daire: avatar / ikon yer tutucu (mono boyut). */
.lds .skeleton-circle{ width:2.5rem; height:2.5rem; border-radius:var(--radius-circle); flex:none; }
.lds .skeleton-circle--sm{ width:1.75rem; height:1.75rem; }
.lds .skeleton-circle--lg{ width:3.5rem; height:3.5rem; }

/* Dikdörtgen/kutu: görsel, grafik veya buton yer tutucusu. */
.lds .skeleton-rect{ width:100%; height:8rem; border-radius:var(--radius-md); }
.lds .skeleton-chip{ width:4rem; height:1.5rem; border-radius:var(--radius-pill); }
.lds .skeleton-btn{ width:7rem; height:2.5rem; border-radius:var(--radius-md); }

/* ============================ YERLEŞİM ŞABLONLARI ==========================
   Hazır iskelet kompozisyonları — yükleme sırasında dengeli ızgara korunur,
   içerik gelince kırılma/zıplama olmaz (lds-patterns ızgara/kart ile uyumlu). */

/* KPI kartı iskeleti: etiket + büyük sayı + trend satırı. */
.lds .skeleton-kpi{ display:flex; flex-direction:column; gap:var(--space-3); }
.lds .skeleton-kpi .skeleton-title{ width:45%; height:1em; }
.lds .skeleton-kpi .skeleton-rect{ height:2rem; width:70%; }

/* İçerik kartı iskeleti: başlık + birkaç metin satırı. */
.lds .skeleton-card{ display:flex; flex-direction:column; gap:var(--space-3); }

/* Liste/medya satırı: daire + iki metin satırı (hasta/randevu liste önizleme). */
.lds .skeleton-media{ display:flex; align-items:center; gap:var(--space-3); }
.lds .skeleton-media__lines{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:var(--space-2); }

/* Tablo iskeleti: tekrarlanan satır şeritleri (yükseklik korunur). */
.lds .skeleton-row{ height:1.25rem; border-radius:var(--radius-xs); }
.lds .skeleton-row + .skeleton-row{ margin-top:var(--space-3); }

/* ============================ ERİŞİLEBİLİRLİK ==============================
   Yükleme bölgesi okuyucuya "yükleniyor" olarak iletilir; iskelet salt
   görseldir. Kullanım: <div class="skeleton-region" aria-busy="true"
   aria-live="polite">…iskelet…</div> */
.lds .skeleton-region[aria-busy="true"]{ cursor:progress; }

/* ============================ REDUCED MOTION (ZORUNLU) ======================
   prefers-reduced-motion: reduce → shimmer durur; nötr sabit blok kalır.
   Bağımsız koruma: bu dosya tek başına dahil edilse de güvenli. */
@media (prefers-reduced-motion:reduce){
  .lds .skeleton{
    animation:none !important;
    background:var(--surface-sunken) !important;
  }
}