/* ============================================================================
   Lalin Tasarım Sistemi — lds-patterns.css
   Tek kaynak (token/kural): .kiro/steering/design-system.md
   Yükleme sırası: tokens.css → components.css → lds-patterns.css (BU dosya).
   ----------------------------------------------------------------------------
   Bu dosya ORTAK yerleşim / yoğunluk / desen yardımcıları sağlar; mevcut
   bileşenleri (btn, card, table, badge, form ...) YENİDEN TANIMLAMAZ. Yalnızca
   token'lardan (tokens.css) türetilmiş düzen/grid/yoğunluk/boş-durum/skeleton
   desenleri ekler. Ham hex / ham px (token varken) kullanılmaz.

   Tüm seçiciler `.lds` kök kapsamı altındadır; legacy deznav/Bootstrap shell'i
   (style.css/plugins.css/switcher.css) ASLA ezilmez. Sayfa/bölüm `class="lds"`
   ile opt-in eder. Mobil-öncelikli: temel kurallar tek sütun, büyütme yalnızca
   `min-width` ile yapılır (Req 10.1).

   Kapsam (Req): 2.1, 2.3, 2.5, 7.1, 7.2, 7.3, 7.4, 9.1, 10.1, 10.3
   ============================================================================ */

/* ============================================================================
   1) SAYFA / BÖLÜM YERLEŞİMİ — dengeli yoğunluk ve kontrollü beyaz alan
      (Req 2.1, 7.2, 10.1, 10.3)
   ============================================================================ */

/* Sayfa gövdesi: bölümler arası tutarlı dikey ritim. */
.lds .page{
  display:flex;
  flex-direction:column;
  gap:var(--space-6);
  padding-block:var(--space-5);
}

/* Sayfa başlığı bandı: başlık + açıklama solda, eylemler sağda; mobilde sarar. */
.lds .page-head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--space-4);
}
.lds .page-head__titles{
  display:flex;
  flex-direction:column;
  gap:var(--space-1);
  min-width:0;
}
.lds .page-head__subtitle{
  color:var(--text-secondary);
  font-size:var(--text-sm);
  margin:0;
  max-width:68ch;
}
.lds .page-head__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-3);
}

/* Genel bölüm: başlık + içerik arası ölçülü boşluk; awkward boşluğu önler. */
.lds .section{
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
}
.lds .section__head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--space-3);
}
.lds .section__title{
  font-family:var(--font-display);
  font-size:var(--text-lg);
  line-height:var(--leading-tight);
  margin:0;
}
.lds .section__hint{
  color:var(--text-muted);
  font-size:var(--text-sm);
  margin:0;
}

/* İnce ayırıcı — bölümleri görsel olarak dengeler. */
.lds .divider{
  height:1px;
  border:0;
  background:var(--border);
  margin-block:var(--space-2);
}

/* ============================================================================
   2) GRID DESENLERİ — hizalı ızgara, otomatik denge (Req 7.1, 7.2, 10.1, 10.3)
      components.css'teki `.grid--2/3/4` sabit sütunları tamamlar; bunlar
      auto-fit "akışkan" varyantlardır (içeriğe göre kendiliğinden dengelenir).
   ============================================================================ */

/* Akışkan kart ızgarası: kartlar min genişliği koruyarak satıra sığar. */
.lds .auto-grid{
  display:grid;
  gap:var(--space-5);
  grid-template-columns:1fr;
}
@media (min-width:480px){
  .lds .auto-grid{
    grid-template-columns:repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  }
}
/* Yoğunluk varyantları — boş alanı dengelemek için min izi ayarlar. */
@media (min-width:480px){
  .lds .auto-grid--narrow{
    grid-template-columns:repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  }
  .lds .auto-grid--wide{
    grid-template-columns:repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  }
}

/* KPI ızgarası — özet metrik kartları için sıkı, hizalı yerleşim. */
.lds .kpi-grid{
  display:grid;
  gap:var(--space-4);
  grid-template-columns:1fr;
}
@media (min-width:560px){
  .lds .kpi-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (min-width:900px){
  .lds .kpi-grid{
    grid-template-columns:repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  }
}

/* İçerik + yan panel düzeni (ör. ana içerik + özet sütunu). */
.lds .split{
  display:grid;
  gap:var(--space-5);
  grid-template-columns:1fr;
}
@media (min-width:1024px){
  .lds .split{ grid-template-columns:minmax(0, 1fr) minmax(0, 20rem); }
  .lds .split--aside-start{ grid-template-columns:minmax(0, 20rem) minmax(0, 1fr); }
}

/* Tek bir grid hücresinin tüm satırı kaplaması (dengeli kapanış için). */
.lds .col-span-full{ grid-column:1 / -1; }

/* ============================================================================
   3) KPI / İSTATİSTİK SAYI YERLEŞİMİ — mono / tabular-nums (Req 7.3)
      components.css'teki `.num`/`.metric` mono+tabular kuralını kullanır;
      buradaki sınıflar yalnızca yerleşim/ölçek/hizalama ekler.
   ============================================================================ */

.lds .kpi{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  min-width:0;
}
.lds .kpi__label{
  font-size:var(--text-sm);
  font-weight:var(--weight-medium);
  color:var(--text-secondary);
  margin:0;
}
.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-tight);
  color:var(--text);
  margin:0;
}
.lds .kpi__value--lg{ font-size:var(--text-3xl); }
.lds .kpi__value--sm{ font-size:var(--text-xl); }
/* Birim/sembol metni — sayıyla aynı satırda, daha sönük. */
.lds .kpi__unit{
  font-family:var(--font-sans);
  font-size:var(--text-sm);
  font-weight:var(--weight-medium);
  color:var(--text-muted);
}
/* Trend/karşılaştırma satırı (mono değer + etiket). */
.lds .kpi__meta{
  display:inline-flex;
  align-items:center;
  gap:var(--space-1);
  font-size:var(--text-sm);
  color:var(--text-secondary);
}
.lds .kpi__delta{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-weight:var(--weight-semibold);
}
.lds .kpi__delta--up{ color:var(--success); }
.lds .kpi__delta--down{ color:var(--danger); }
.lds .kpi__delta--flat{ color:var(--text-muted); }

/* Genel sayı/ölçü hizalama yardımcısı (tablo dışı yerlerde). */
.lds .tnum{ font-variant-numeric:tabular-nums; font-family:var(--font-mono); }
.lds .text-end{ text-align:right; }

/* ============================================================================
   4) BOŞ DURUM YERLEŞİMİ — merkezli ikon + başlık + açıklama + eylem (Req 7.4)
      lds-empty.js ve components/empty-state bunu kullanır.
   ============================================================================ */

.lds .empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:var(--space-3);
  padding:var(--space-8) var(--space-5);
  min-height:14rem;
  color:var(--text-secondary);
}
.lds .empty--inline{ min-height:auto; padding:var(--space-6) var(--space-4); }
.lds .empty__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);
}
.lds .empty__icon svg{ width:1.75rem; height:1.75rem; }
.lds .empty__title{
  font-family:var(--font-display);
  font-size:var(--text-lg);
  line-height:var(--leading-tight);
  color:var(--text);
  margin:0;
}
.lds .empty__desc{
  font-size:var(--text-sm);
  color:var(--text-secondary);
  max-width:42ch;
  margin:0;
}
.lds .empty__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:var(--space-3);
  margin-top:var(--space-2);
}

/* ============================================================================
   5) SKELETON SHIMMER DESENİ — yer tutucu bloklar + shimmer (Req 7.4 loading)
      lds-skeleton.js bunu kullanır. components.css'te genel `.skeleton` zaten
      var; burada YENİDEN KULLANILABİLİR yapı taşları (satır/daire/blok) ve
      bağımsız shimmer keyframe'i tanımlanır. Animasyon yalnızca background-pos
      (transform/opacity disiplinine uyumlu, layout tetiklemez).
   ============================================================================ */

.lds .skel{
  display:block;
  border-radius:var(--radius-sm);
  background:linear-gradient(
    90deg,
    var(--surface-sunken) 25%,
    color-mix(in oklab, var(--surface-sunken) 55%, var(--surface)) 37%,
    var(--surface-sunken) 63%
  );
  background-size:400% 100%;
  animation:lds-skel-shimmer 1.4s ease infinite;
}
@keyframes lds-skel-shimmer{ to{ background-position:-135% 0; } }

/* Yapı taşları. */
.lds .skel-line{ height:.75rem; width:100%; }
.lds .skel-line--sm{ height:.625rem; }
.lds .skel-line--lg{ height:1rem; }
.lds .skel-line--60{ width:60%; }
.lds .skel-line--80{ width:80%; }
.lds .skel-line--40{ width:40%; }
.lds .skel-title{ height:1.25rem; width:45%; border-radius:var(--radius-sm); }
.lds .skel-circle{ width:2.75rem; height:2.75rem; border-radius:var(--radius-circle); }
.lds .skel-block{ height:8rem; width:100%; border-radius:var(--radius-md); }
.lds .skel-btn{ height:2.25rem; width:7rem; border-radius:var(--radius-md); }

/* Çok satırlı metin yer tutucusu: ardışık satırlar arası ölçülü boşluk. */
.lds .skel-lines{ display:flex; flex-direction:column; gap:var(--space-2); }

/* Kart yer tutucusu: gerçek `.card` yoğunluğunu taklit eder. */
.lds .skel-card{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:var(--space-5);
}

/* ============================================================================
   6) YOĞUNLUK / DOLGU YARDIMCILARI — boş/awkward alanı dengeler (Req 2.1, 7.2)
   ============================================================================ */

/* Yatay küme: etiket/rozet/eylem gruplarını dengeli sarar. */
.lds .cluster{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-3);
}
.lds .cluster--tight{ gap:var(--space-2); }
.lds .cluster--end{ justify-content:flex-end; }
.lds .cluster--between{ justify-content:space-between; }

/* Dikey yığın: ölçülü dikey ritim (yoğunluk varyantlarıyla). */
.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); }

/* Esnek itici — bir öğeyi satırın sonuna iter (boşluğu doldurur). */
.lds .push-end{ margin-inline-start:auto; }

/* Merkezleme kabı — dar içerikleri (formlar, boş durumlar) yatay ortalar. */
.lds .center-col{
  width:100%;
  max-width:42rem;
  margin-inline:auto;
}
.lds .center-col--sm{ max-width:30rem; }
.lds .center-col--lg{ max-width:60rem; }

/* Görsel oran/min-yükseklik kabı — grafik/medya boş alanını dengeler. */
.lds .media-frame{
  position:relative;
  width:100%;
  min-height:12rem;
  border-radius:var(--radius-lg);
  background:var(--surface-sunken);
  overflow:hidden;
}

/* ============================================================================
   7) HAREKET ERİŞİLEBİLİRLİĞİ — shimmer/animasyon reduced-motion'da kapanır
      (Req 9.1 disiplinine uyum; bu dosyadaki shimmer'lar burada da güvenceye
      alınır — components.css'teki global blok ayrıca geçerlidir.)
   ============================================================================ */
@media (prefers-reduced-motion:reduce){
  .lds .skel,
  .lds .skel-line,
  .lds .skel-title,
  .lds .skel-circle,
  .lds .skel-block,
  .lds .skel-btn{
    animation:none !important;
    background:var(--surface-sunken);
  }
}