/* ============================================================================
   Lalin Tasarım Sistemi — lds-patterns.css  (klinik / KlinikPro)
   Tek kaynak (miras): .kiro/steering/design-system.md  (§5, §6, §9)
   Yükleme sırası: nova → design-system/tokens.css → design-system/components.css
                   → lds-patterns.css → (modül-lds.css) → layout/view
   ----------------------------------------------------------------------------
   AMAÇ (tasks.md 1.2): Ortak `.lds` yerleşim/yoğunluk/beyaz-alan, KPI/içerik
   kart düzeni ve boş-durum desenleri. components.css'teki `.grid`, `.grid--N`,
   `.container`, `.card`, `.num/.metric` SEÇİCİLERİ YENİDEN TANIMLANMAZ; burada
   yalnızca onları TAMAMLAYAN yeni desen sınıfları eklenir.

   KURALLAR:
   - Tüm seçiciler `.lds` kök kapsamı altında (legacy Bootstrap/nova bozulmaz).
   - Token yoksa ham değer yok; her değer tokens.css'ten okunur.
   - Yalnızca transform/opacity animasyonu; `transition: all` YASAK.
   - `prefers-reduced-motion: reduce`'a saygı (en altta).
   ============================================================================ */

/* ============================ HİZALI IZGARA (genişletme) ====================
   components.css `.grid` (tek kolon, gap=--space-5) ve `.grid--2/3/4` sağlar.
   Buradaki ekler: otomatik-akışkan ızgara, satır hizalama ve hücre dikey
   hizalama yardımcıları (dağınık yerleşimi dengeli ızgaraya çevirmek için). */

/* Otomatik akışkan ızgara: medya sorgusu olmadan minmax ile dengeli kolonlar.
   KPI rozet şeritleri / kart galerileri için "scattered → balanced" deseni. */
.lds .grid--auto{
  display:grid;
  gap:var(--space-5);
  grid-template-columns:repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}
.lds .grid--auto-sm{
  display:grid;
  gap:var(--space-4);
  grid-template-columns:repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
}

/* Izgara yoğunluk/boşluk ayarı — kontrollü beyaz alan (steering §5 spacing). */
.lds .grid--tight{ gap:var(--space-3); }
.lds .grid--loose{ gap:var(--space-6); }

/* Tüm ızgara hücrelerini üst kenardan hizala (farklı yükseklikte kart hizası). */
.lds .grid--align-start{ align-items:start; }
/* Hücreleri eşit yükseklikte ger (kart alt eylem çubukları aynı hizada). */
.lds .grid--stretch{ align-items:stretch; }

/* Bir hücrenin birden çok kolon kaplaması (öne çıkan KPI / geniş grafik). */
@media (min-width:768px){
  .lds .col-span-2{ grid-column:span 2; }
}
@media (min-width:1024px){
  .lds .col-span-3{ grid-column:span 3; }
  .lds .col-span-full{ grid-column:1 / -1; }
}

/* ============================ DENGELİ YOĞUNLUK ==============================
   Dikey ritim için tutarlı stack; "section" düzeyinde kontrollü beyaz alan. */

/* Dikey yığın: alt öğeler arası tutarlı boşluk (margin çakışması olmadan). */
.lds .stack{ display:flex; flex-direction:column; gap:var(--space-4); }
.lds .stack--tight{ gap:var(--space-2); }
.lds .stack--loose{ gap:var(--space-6); }

/* Yatay küme: rozet/eylem grupları; mobilde sarar, dokunma hedefi korunur. */
.lds .cluster{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); }
.lds .cluster--between{ justify-content:space-between; }
.lds .cluster--end{ justify-content:flex-end; }

/* Bölüm bloğu: sayfa içi dengeli dikey ritim (üst başlık + ızgara/içerik). */
.lds .section{ display:flex; flex-direction:column; gap:var(--space-5); }
.lds .section + .section{ margin-top:var(--space-8); }
.lds .section__head{
  display:flex; align-items:flex-end; justify-content:space-between;
  flex-wrap:wrap; gap:var(--space-3);
}
.lds .section__title{ font-family:var(--font-display); font-size:var(--text-xl); margin:0; }
.lds .section__desc{ color:var(--text-secondary); margin:0; max-width:60ch; }

/* Yoğunluk varyantları: bir bölgenin sıkı/ferah yoğunluğunu açıkça belirtir. */
.lds .density-comfortable{ --lds-pad:var(--space-5); }
.lds .density-compact{ --lds-pad:var(--space-3); }

/* ============================ KPI / İÇERİK KART DÜZENİ ======================
   components.css `.card` (yüzey + kenarlık + yumuşak gölge) tabanını sağlar.
   KPI deseni .card üstüne bina edilir; rakamlar mono + tabular-nums. */

/* KPI kartı: etiket → büyük sayı → yardımcı trend satırı dikey düzeni. */
.lds .kpi{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
}
.lds .kpi__label{
  font-size:var(--text-sm);
  font-weight:var(--weight-medium);
  color:var(--text-secondary);
  text-wrap:balance;
}
/* KPI rakamı: MONO + tabular-nums — kolonlar arası dikey hizalama (steering §3). */
.lds .kpi__value{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-weight:var(--weight-semibold);
  font-size:var(--text-2xl);
  line-height:var(--leading-tight);
  letter-spacing:var(--tracking-normal);
  color:var(--text);
}
.lds .kpi__value--lg{ font-size:var(--text-3xl); }
.lds .kpi__value--sm{ font-size:var(--text-xl); }
/* Para/birim eki: ana rakamdan daha hafif, üst hizalı. */
.lds .kpi__unit{
  font-family:var(--font-mono);
  font-size:var(--text-md);
  font-weight:var(--weight-medium);
  color:var(--text-secondary);
}
/* Trend satırı: yön ikonu + yüzde (tabular-nums) + kıyas etiketi. */
.lds .kpi__trend{
  display:inline-flex; align-items:center; gap:var(--space-1);
  font-size:var(--text-sm);
  font-variant-numeric:tabular-nums;
  color:var(--text-secondary);
}
.lds .kpi__trend--up{ color:var(--success); }
.lds .kpi__trend--down{ color:var(--danger); }
.lds .kpi__trend svg{ width:1em; height:1em; flex:none; }
/* KPI başlığı yanına ikon/aksesuar (üst sağ köşe). */
.lds .kpi__head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-3);
}
.lds .kpi__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.25rem; height:2.25rem; flex:none;
  border-radius:var(--radius-md);
  background:var(--accent-soft); color:var(--accent);
}
.lds .kpi__icon svg{ width:1.25rem; height:1.25rem; }

/* İçerik kartı: başlık + esnek gövde + alt eylem çubuğu (ızgarada eşit yükseklik). */
.lds .content-card{ display:flex; flex-direction:column; gap:var(--space-4); height:100%; }
.lds .content-card__body{ flex:1 1 auto; min-width:0; color:var(--text-secondary); }
.lds .content-card__foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-3); flex-wrap:wrap;
  padding-top:var(--space-3); border-top:1px solid var(--border);
}
/* İstatistik satırı: etiket solda, mono değer sağda hizalı (mini tablo hissi). */
.lds .stat-row{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--space-4); padding-block:var(--space-2);
}
.lds .stat-row + .stat-row{ border-top:1px solid var(--border); }
.lds .stat-row__label{ color:var(--text-secondary); font-size:var(--text-sm); }
.lds .stat-row__value{
  font-family:var(--font-mono); font-variant-numeric:tabular-nums;
  font-weight:var(--weight-medium); color:var(--text); white-space:nowrap;
}

/* ============================ BOŞ DURUM (EMPTY STATE) =======================
   İçerik yokken kırık/boşlukta yerleşim bırakmaz: ortalanmış ikon + başlık +
   açıklama + birincil eylem yuvası (steering §6.5 "boş durum ayrı tasarlanır"). */
.lds .empty-state{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:var(--space-3);
  padding:var(--space-8) var(--space-5);
  max-width:32rem; margin-inline:auto;
}
/* Kart içine yerleştirilen boş-durum için daha ölçülü dikey alan. */
.lds .card .empty-state,
.lds .empty-state--compact{ padding-block:var(--space-6); }
.lds .empty-state__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:3.5rem; height:3.5rem;
  border-radius:var(--radius-circle);
  background:var(--surface-sunken); color:var(--text-muted);
  margin-bottom:var(--space-1);
}
.lds .empty-state__icon svg{ width:1.75rem; height:1.75rem; }
.lds .empty-state__title{
  font-family:var(--font-display); font-size:var(--text-lg);
  color:var(--text); margin:0; text-wrap:balance;
}
.lds .empty-state__desc{
  color:var(--text-secondary); font-size:var(--text-sm);
  margin:0; max-width:46ch; text-wrap:pretty;
}
/* Birincil eylem yuvası: bir veya iki `.btn` (örn. "Hasta Ekle"). */
.lds .empty-state__actions{
  display:flex; flex-wrap:wrap; gap:var(--space-3); justify-content:center;
  margin-top:var(--space-2);
}