/* ============================================================================
   Lalin Tasarım Sistemi — components.css
   Tek kaynak: .kiro/steering/design-system.md  (§6 Bileşen Kütüphanesi)
   Gereksinim: aynı dizindeki tokens.css ÖNCE yüklenmeli.
   ----------------------------------------------------------------------------
   Tüm seçiciler `.lds` kök kapsamı altındadır; legacy Bootstrap/nova
   stilleriyle (.btn, .card, .table, .badge ...) ÇAKIŞMAZ. Bir sayfa/bölüm
   tasarım sistemini `class="lds"` ekleyerek opt-in eder.
   Animasyonlar yalnızca transform/opacity; `transition: all` kullanılmaz.
   ============================================================================ */

/* ---- Kök / temel tipografi (yalnızca .lds alt ağacında) ---- */
.lds{
  font-family:var(--font-sans);
  font-size:var(--text-base);
  line-height:var(--leading-normal);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.lds :where(h1,h2,h3){
  font-family:var(--font-display);
  line-height:var(--leading-tight);
  letter-spacing:var(--tracking-tight);
  text-wrap:balance;
  color:var(--text);
  margin:0 0 var(--space-3);
}
.lds h1{ font-size:var(--text-3xl); }
.lds h2{ font-size:var(--text-2xl); }
.lds h3{ font-size:var(--text-xl); }
.lds :where(h4,h5){ font-family:var(--font-sans); font-weight:var(--weight-semibold); line-height:var(--leading-snug); margin:0 0 var(--space-2); }
.lds p{ text-wrap:pretty; max-width:68ch; margin:0 0 var(--space-4); }
.lds a{ color:var(--accent); text-underline-offset:.2em; }
.lds a:hover{ color:var(--accent-hover); }
.lds :where(a,button,input,select,textarea):focus-visible{ outline:none; box-shadow:var(--shadow-focus); border-radius:var(--radius-sm); }
.lds .num,.lds .metric,.lds td.num{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

/* ---- Eyaletli yardımcı: ekran-okuyucu / odak halkası temizliği ---- */
.lds .visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ============================ 6.1 BUTON ============================ */
.lds .btn{
  --_bg:var(--surface); --_fg:var(--text); --_bd:var(--border);
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  font:var(--weight-semibold) var(--text-sm)/1 var(--font-sans);
  padding:.625rem 1rem; border-radius:var(--radius-md);
  background:var(--_bg); color:var(--_fg); border:1px solid var(--_bd);
  cursor:pointer; user-select:none; text-decoration:none;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  transition:background-color var(--dur-fast) var(--ease-standard),
             border-color var(--dur-fast) var(--ease-standard),
             color var(--dur-fast) var(--ease-standard),
             transform var(--dur-fast) var(--ease-standard),
             box-shadow var(--dur-fast) var(--ease-standard);
}
.lds .btn:hover{ transform:translateY(-1px); }
.lds .btn:active{ transform:translateY(0) scale(.99); }
.lds .btn:focus-visible{ outline:none; box-shadow:var(--shadow-focus); }
.lds .btn[disabled],.lds .btn.is-loading{ opacity:.55; cursor:not-allowed; transform:none; }
.lds .btn--primary{ --_bg:var(--accent); --_fg:var(--accent-contrast); --_bd:transparent; box-shadow:var(--shadow-sm); }
.lds .btn--primary:hover{ --_bg:var(--accent-hover); box-shadow:var(--shadow-md); }
.lds .btn--secondary:hover{ --_bd:var(--border-strong); background:var(--surface-sunken); }
.lds .btn--ghost{ --_bg:transparent; --_bd:transparent; }
.lds .btn--ghost:hover{ background:var(--surface-sunken); }
.lds .btn--danger{ --_bg:var(--danger); --_fg:#fff; --_bd:transparent; }
.lds .btn--danger:hover{ --_bg:color-mix(in oklab, var(--danger) 86%, black); }
.lds .btn--icon{ padding:.5rem; }
.lds .btn--lg{ padding:.8rem 1.25rem; font-size:var(--text-base); }
.lds .btn--sm{ padding:.45rem .75rem; font-size:var(--text-xs); }
.lds .btn.is-loading{ position:relative; color:transparent !important; }
.lds .btn.is-loading::after{ content:""; position:absolute; width:1em; height:1em;
  border-radius:50%; border:2px solid var(--accent-contrast); border-top-color:transparent;
  animation:lds-spin .7s linear infinite; }
@keyframes lds-spin{ to{ transform:rotate(360deg); } }

/* ============================ 6.2 KART ============================ */
.lds .card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:var(--space-5);
  transition:box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.lds .card:hover{ box-shadow:var(--shadow-md); }
.lds .card--interactive{ cursor:pointer; }
.lds .card--interactive:hover{ transform:translateY(-2px); }
.lds .card__head{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); margin-bottom:var(--space-4); }
.lds .card__title{ font-family:var(--font-display); font-size:var(--text-md); margin:0; }
.lds .card__body{ color:var(--text-secondary); }

/* ============================ 6.3 MODAL ============================ */
.lds.modal,.lds .modal{
  border:none; padding:0; background:transparent;
  max-width:min(92vw,480px); overscroll-behavior:contain; color:var(--text);
}
.lds.modal::backdrop,.lds .modal::backdrop{ background:var(--overlay); backdrop-filter:blur(2px); }
.lds .modal__panel{
  background:var(--surface-raised); border:1px solid var(--border);
  border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); padding:var(--space-6);
  animation:lds-modal-in var(--dur-base) var(--ease-standard);
}
.lds .modal__title{ font-family:var(--font-display); font-size:var(--text-xl); margin:0 0 var(--space-3); }
.lds .modal__actions{ display:flex; gap:var(--space-3); justify-content:flex-end; margin-top:var(--space-5); }
@keyframes lds-modal-in{ from{ opacity:0; transform:translateY(8px) scale(.98); } to{ opacity:1; transform:none; } }

/* ============================ 6.4 NAVBAR / SIDEBAR ============================ */
.lds .navbar{
  position:sticky; top:0; z-index:var(--z-sticky);
  display:flex; align-items:center; gap:var(--space-5);
  padding:var(--space-3) var(--gutter);
  background:color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid var(--border);
}
.lds .navbar__brand{ font:var(--weight-bold) var(--text-lg)/1 var(--font-display); color:var(--text); margin-right:auto; text-decoration:none; }
.lds .navbar__nav{ display:flex; gap:var(--space-4); }
.lds .navbar__nav a{ color:var(--text-secondary); text-decoration:none; }
.lds .navbar__nav a:hover{ color:var(--text); }

.lds .sidebar{
  position:sticky; top:0; z-index:var(--z-sidebar); height:100dvh; width:248px;
  display:flex; flex-direction:column; gap:2px; padding:var(--space-4);
  background:var(--surface); border-right:1px solid var(--border); overflow-y:auto;
}
.lds .sidebar__item{
  display:flex; align-items:center; gap:var(--space-3);
  padding:.625rem .75rem; border-radius:var(--radius-md);
  color:var(--text-secondary); text-decoration:none;
  transition:background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.lds .sidebar__item:hover{ background:var(--surface-sunken); color:var(--text); }
.lds .sidebar__item.is-active{ background:var(--accent-soft); color:var(--accent); font-weight:var(--weight-semibold); }
.lds .sidebar__item.is-active svg{ color:var(--accent); }
.lds .sidebar__item svg{ width:1.25rem; height:1.25rem; flex:none; }

/* ============================ 6.5 TABLO ============================ */
.lds .table-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-lg); }
.lds .table{ width:100%; border-collapse:collapse; font-size:var(--text-sm); color:var(--text); }
.lds .table th{
  position:sticky; top:0; background:var(--surface-sunken); text-align:left;
  font-weight:var(--weight-semibold); color:var(--text-secondary);
  padding:.75rem 1rem; border-bottom:1px solid var(--border); white-space:nowrap;
}
.lds .table td{ padding:.75rem 1rem; border-bottom:1px solid var(--border); }
.lds .table tbody tr{ transition:background-color var(--dur-fast) var(--ease-standard); }
.lds .table tbody tr:hover{ background:var(--surface-sunken); }
.lds .table .num{ text-align:right; font-variant-numeric:tabular-nums; font-family:var(--font-mono); }

/* ============================ 6.6 FORM ============================ */
.lds .field{ display:flex; flex-direction:column; gap:var(--space-2); margin-bottom:var(--space-4); }
.lds .field__label{ font-size:var(--text-sm); font-weight:var(--weight-medium); color:var(--text-secondary); }
.lds .input,.lds .select,.lds .textarea{
  font:var(--text-base)/1.4 var(--font-sans);
  background:var(--surface); color:var(--text);
  border:1px solid var(--border-strong); border-radius:var(--radius-md);
  padding:.625rem .75rem; width:100%;
  transition:border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.lds .input::placeholder,.lds .textarea::placeholder{ color:var(--text-muted); }
.lds .input:focus-visible,.lds .select:focus-visible,.lds .textarea:focus-visible{
  outline:none; border-color:var(--accent); box-shadow:var(--shadow-focus);
}
.lds .field--invalid .input,.lds .field--invalid .select,.lds .field--invalid .textarea{ border-color:var(--danger); }
.lds .field__error{ color:var(--danger); font-size:var(--text-sm); }
.lds .select{ background-color:var(--surface); color:var(--text); appearance:auto; }

/* ============================ 6.7 BADGE / TOAST ============================ */
.lds .badge{
  display:inline-flex; align-items:center; gap:.35em; padding:.2rem .55rem;
  font:var(--weight-semibold) var(--text-xs)/1 var(--font-sans); border-radius:var(--radius-pill);
  background:var(--surface-sunken); color:var(--text-secondary);
}
.lds .badge--accent{ background:var(--accent-soft); color:var(--accent); }
.lds .badge--success{ background:var(--success-bg); color:var(--success); }
.lds .badge--warning{ background:var(--warning-bg); color:var(--warning); }
.lds .badge--danger{ background:var(--danger-bg); color:var(--danger); }
.lds .badge--info{ background:var(--info-bg); color:var(--info); }

.lds .toast{
  position:fixed; inset-block-end:max(var(--space-5), env(safe-area-inset-bottom));
  inset-inline-end:var(--space-5); z-index:var(--z-toast);
  display:flex; align-items:center; gap:var(--space-3);
  background:var(--surface-raised); border:1px solid var(--border); border-left:3px solid var(--success);
  border-radius:var(--radius-md); box-shadow:var(--shadow-lg); padding:.75rem 1rem; color:var(--text);
  animation:lds-toast-in var(--dur-base) var(--ease-out);
}
.lds .toast--warning{ border-left-color:var(--warning); }
.lds .toast--danger{ border-left-color:var(--danger); }
.lds .toast--info{ border-left-color:var(--info); }
@keyframes lds-toast-in{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }

/* ============================ LAYOUT / GRID ============================ */
.lds .container{ width:100%; max-width:1280px; margin-inline:auto; padding-inline:var(--gutter); }
.lds .grid{ display:grid; gap:var(--space-5); grid-template-columns:1fr; }
@media (min-width:768px){
  .lds .grid--2{ grid-template-columns:repeat(2,1fr); }
  .lds .grid--3{ grid-template-columns:repeat(3,1fr); }
}
@media (min-width:1024px){ .lds .grid--4{ grid-template-columns:repeat(4,1fr); } }

.lds .app-shell{ display:grid; grid-template-columns:1fr; min-height:100dvh; }
@media (min-width:1024px){ .lds .app-shell{ grid-template-columns:248px 1fr; } }
@media (max-width:1023px){
  .lds .sidebar{ position:fixed; inset-block:0; inset-inline-start:0;
    transform:translateX(-100%); transition:transform var(--dur-base) var(--ease-standard); }
  .lds .sidebar.is-open{ transform:none; }
}

/* ============================ MİKRO-ANİMASYON ============================ */
.lds .reveal{ opacity:0; transform:translateY(12px); animation:lds-reveal var(--dur-slow) var(--ease-standard) forwards; }
.lds .reveal:nth-child(1){ animation-delay:40ms } .lds .reveal:nth-child(2){ animation-delay:90ms }
.lds .reveal:nth-child(3){ animation-delay:140ms } .lds .reveal:nth-child(4){ animation-delay:190ms }
.lds .reveal:nth-child(5){ animation-delay:240ms } .lds .reveal:nth-child(6){ animation-delay:290ms }
@keyframes lds-reveal{ to{ opacity:1; transform:none; } }

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

/* ============================ REDUCED MOTION ============================ */
@media (prefers-reduced-motion:reduce){
  .lds *,.lds *::before,.lds *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .lds .reveal{ opacity:1; transform:none; }
}

/* ============================================================================
   JS-HOOK BİLEŞENLERİ (canonical kütüphane genişletmesi)
   lds-table.js / lds-reveal.js / lds-modal.js'in uyguladığı sınıf/attribute'lar
   için eksik, `.lds`-kapsamlı, token-tabanlı kurallar. Yalnızca EKLENİR; üstteki
   mevcut kurallar değiştirilmez. (Gereksinim 2.4 → destek 5.5 / 5.1 / 9.2 / 6.5)
   ============================================================================ */

/* ---- 6.5+ Tablo: sıralama göstergesi (Req 5.1) ----
   lds-table.js sıralanabilir başlıklara aria-sort + is-sortable/is-sorted ekler. */
.lds th[aria-sort].is-sortable{ cursor:pointer; user-select:none; padding-inline-end:1.5rem; position:relative; }
.lds th[aria-sort].is-sortable:hover{ color:var(--text); }
.lds th[aria-sort]::after{
  content:""; position:absolute; inset-inline-end:.6rem; top:50%;
  width:0; height:0; opacity:0;
  border-inline:.32em solid transparent;
  transition:opacity var(--dur-fast) var(--ease-standard);
}
.lds th[aria-sort="ascending"]::after{
  opacity:1; transform:translateY(-50%);
  border-block-end:.4em solid var(--text-secondary);
}
.lds th[aria-sort="descending"]::after{
  opacity:1; transform:translateY(-50%);
  border-block-start:.4em solid var(--text-secondary);
}

/* ---- 6.5+ Mobil tablo kartları (Req 5.5) ----
   lds-table.js dar görünümde <table>'a `table--cards`, .table-wrap'e `is-cards`
   ekler ve her <td>'ye data-label="<başlık>" yazar; her satır kart olur. */
.lds .table-wrap.is-cards{ overflow-x:hidden; border:none; border-radius:0; }
.lds .table--cards{ display:block; }
.lds .table--cards thead{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.lds .table--cards tbody{ display:flex; flex-direction:column; gap:var(--space-3); }
.lds .table--cards tr{
  display:flex; flex-direction:column; gap:var(--space-2);
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  padding:var(--space-4);
}
.lds .table--cards td{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--space-4); padding:0; border:none; text-align:right;
}
.lds .table--cards td::before{
  content:attr(data-label); flex:none; text-align:left;
  font-weight:var(--weight-semibold); color:var(--text-secondary);
  font-size:var(--text-xs);
}
.lds .table--cards td:empty{ display:none; }

/* ---- 6.x+ Reveal viewport-gating işareti (Req 9.2) ----
   Opt-in elemanlar (lds-reveal.js: [data-lds-reveal]/.lds-reveal) JS `reveal`/
   `is-revealed` ekleyene dek gizli kalır. Mevcut `.lds .reveal` kuralı ile çakışmaz. */
.lds [data-lds-reveal]:not(.reveal):not(.is-revealed),
.lds .lds-reveal:not(.reveal):not(.is-revealed){ opacity:0; }
@media (prefers-reduced-motion:reduce){
  .lds [data-lds-reveal]:not(.reveal):not(.is-revealed),
  .lds .lds-reveal:not(.reveal):not(.is-revealed){ opacity:1; }
}

/* ---- 6.3+ Modal çekmece (drawer) geometrisi (Req 6.5) ----
   lds-modal.js drawer varyantında <dialog>'a `modal--drawer` ekler; tam yükseklikte
   sağ kenara sabitlenmiş panel. Base `.lds .modal` kuralı bozulmaz. */
.lds.modal--drawer,.lds .modal--drawer{
  max-width:min(92vw,420px);
  margin-inline-start:auto; margin-inline-end:0; margin-block:0;
  block-size:100%; max-block-size:100dvh;
  overscroll-behavior:contain;
}
.lds.modal--drawer .modal__panel,.lds .modal--drawer .modal__panel{
  block-size:100%; border-radius:0; overflow-y:auto;
  animation:lds-drawer-in var(--dur-base) var(--ease-standard);
}
@keyframes lds-drawer-in{ from{ opacity:0; transform:translateX(16px); } to{ opacity:1; transform:none; } }