/* ============================================================
   PALET-SATIS — COMPONENT KATMANI
   Tekrarlayan UI desenleri. Tümü tokens.css değişkenlerini kullanır.
   Bu dosyada hardcode renk/boşluk YOKTUR.
   Tasarım dili: Kömür siyahı + canlı turuncu koyu tema (K53).
   ============================================================ */

/* ============================================================
   1. SAYFA İSKELETİ
   ============================================================ */
.app{ display:flex; min-height:100vh; min-width:0 }

/* Özgüllük bilerek .topbar ile artırıldı: düz `.menu-toggle{display:none}`
   ile `.btn{display:inline-flex}` aynı ağırlıkta ve `.btn` dosyada SONRA
   geldiği için kazanıyordu — düğme masaüstünde de görünüyor ama orada
   menüyü açan bir kural olmadığı için ölü duruyordu. */
.topbar .menu-toggle{ display:none }
.sidebar-scrim{ display:none }

.sidebar{
  width:var(--w-sidebar); flex:none;
  background:var(--color-surface);
  border-right:1px solid var(--color-border-soft);
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
/* Marka bloğu alt alta: "Depo Yönetimi" ve "Tek depo · Euro" yan yana
   sıkıştığında ikinci satır kırılıp menünün üstünü şişiriyordu. */
.sidebar-head{ padding:var(--sp-5) var(--sp-4) }
.sidebar-head .brand-sub,
.sidebar-head small{ display:block; margin-top:2px }
.sidebar-nav{ padding:var(--sp-4) var(--sp-3); flex:1 }
.sidebar-foot{ padding:var(--sp-4); border-top:1px solid var(--color-border-soft); background:var(--color-surface-2) }

.nav-group{ margin-bottom:var(--sp-6) }
.nav-group-title{
  padding:0 var(--sp-3) var(--sp-2); margin-bottom:var(--sp-1);
  font-size:var(--fs-xs); font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-wide); text-transform:uppercase;
  color:var(--color-muted);
}
/* Menü satırları kenarlıksız ve gölgesiz: her satıra çerçeve + gölge vermek
   listeyi kutu yığınına çevirip sert gösteriyordu. Seçili satır tek bir
   yumuşak turuncu zeminle ayrılır, ayrıca sol kenarına ince bir işaret alır —
   renk körü bir kullanıcı için renk tek başına yeterli ayrım değildir. */
.nav-item{
  position:relative;
  display:flex; align-items:center; gap:var(--sp-3);
  min-height:42px; padding:var(--sp-2) var(--sp-3); margin-bottom:2px;
  border:0; border-radius:var(--r-lg);
  color:var(--color-text-soft);
  font-size:var(--fs-md); font-weight:var(--fw-medium);
  cursor:pointer; transition:background var(--tr-fast), color var(--tr-fast);
}
.nav-item:hover{ background:var(--color-surface-2); color:var(--color-text); text-decoration:none }
.nav-item.is-active{
  background:var(--color-primary-light);
  color:var(--color-primary);
  font-weight:var(--fw-semibold);
}
.nav-item.is-active::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:18px; border-radius:0 3px 3px 0; background:var(--color-primary);
}
.nav-item-icon{ width:20px; height:20px; display:grid; place-items:center; text-align:center; flex:none; font-size:var(--fs-md); line-height:1; color:var(--color-muted) }
.nav-item:hover .nav-item-icon{ color:var(--color-text-soft) }
.nav-item.is-active .nav-item-icon{ color:var(--color-primary) }
.nav-item-badge{ margin-left:auto }

.main{ flex:1; min-width:0; display:flex; flex-direction:column }

.topbar{
  position:sticky; top:0; z-index:var(--z-sticky);
  height:var(--h-topbar); flex:none;
  display:flex; align-items:center; gap:var(--sp-4);
  padding:0 var(--sp-6);
  background:var(--color-surface);
  border-bottom:1px solid var(--color-border-soft);
}
/* Üst bardaki konum yazısı: bulunduğun ekranın adı (shell.js doldurur).
   Geniş ekranda GİZLİ — sol menü hangi ekranda olduğunu zaten işaretliyor,
   üst barda tekrar etmek aynı kelimeyi iki kez yazmak olurdu. Dar ekranda
   menü kapalı olduğu için görünür: orada sayfa başlığı kaydırılıp gider,
   üst bar sabit kalır ve tek bağlam odur. */
.topbar-location{ display:none; font-weight:var(--fw-semibold); color:var(--color-text) }
[data-user-name]{
  max-width:180px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  display:inline-block;
  vertical-align:middle;
}
.view{ padding:var(--sp-8); max-width:var(--container-max); width:100%; margin:0 auto }

.brand{ display:flex; align-items:center; gap:var(--sp-3); color:inherit }
.brand:hover{ text-decoration:none }
.brand-mark{
  width:36px; height:36px; flex:none; border-radius:var(--r-md);
  background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));
  color:var(--color-on-primary); display:flex; align-items:center; justify-content:center;
  font-size:var(--fs-lg); font-weight:var(--fw-bold);
}
.brand-name{ font-size:var(--fs-md); font-weight:var(--fw-bold); line-height:1.2 }
.brand-sub{ font-size:var(--fs-xs); color:var(--color-muted) }

/* Misafir / Giriş Kabuğu */
body.is-guest .sidebar,
body.is-guest .topbar,
body.is-guest .sidebar-scrim{ display:none }
body.is-guest .app{ min-height:100vh }
body.is-guest .main{ min-height:100vh; display:flex; align-items:center; justify-content:center; width:100% }
body.is-guest .view{ max-width:none; width:100%; margin:0; padding:0 }

.login-page{ min-height:100vh; display:grid; place-items:center; padding:var(--sp-6); background:var(--color-bg) }
.login-stage{ width:min(940px,100%); min-height:560px; display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,.9fr); overflow:hidden; background:var(--color-surface); border:1px solid var(--color-border-soft); border-radius:var(--r-2xl); box-shadow:var(--shadow-xl) }
.login-form-side{ padding:var(--sp-10); display:flex; flex-direction:column; justify-content:center }
.login-brand{ display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-10) }
.login-brand strong,.login-brand small{ display:block }
.login-brand strong{ font-size:var(--fs-lg) }
.login-brand small{ margin-top:var(--sp-1); color:var(--color-muted); font-size:var(--fs-xs) }
.login-heading{ margin-bottom:var(--sp-6) }
.login-heading h1{ font-size:var(--fs-3xl) }
.login-heading p{ margin-top:var(--sp-2); color:var(--color-muted) }
.login-form-side .card{ border:0; box-shadow:none; padding:0 }
.login-form-side .card-head,.login-form-side .card-body,.login-form-side .card-foot{ padding-left:0; padding-right:0 }
.login-form-side .card-foot{ background:transparent }
.login-help{ margin-top:var(--sp-5); color:var(--color-muted); font-size:var(--fs-xs); text-align:center }
.login-art{ position:relative; overflow:hidden; display:flex; align-items:flex-end; padding:var(--sp-10); color:var(--color-inverse); background:linear-gradient(145deg,var(--color-primary),var(--color-primary-dark)) }
.login-art::before{ content:""; position:absolute; inset:10% -20% auto 18%; height:58%; border:24px solid var(--color-surface); border-bottom:0; opacity:.42; transform:skewY(-7deg) }
/* Fotoğraf: dosya projeye gömülür, dışarıdan çekilmez (§5 CDN yasağı).
   Fotoğrafın üstüne yazı geldiği için alt yarıya koyu perde çekilir — perdesiz
   fotoğrafta metnin okunacağı GARANTİ EDİLEMEZ, fotoğrafın açık bir bölgesi
   yazıyı yutar. Perde tokenlıdır, ekrana renk gömülmez. */
.login-art-photo{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; display:block }
.login-art.has-photo::before{ display:none }
.login-art.has-photo .warehouse-lines{ display:none }
.login-art.has-photo::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,
    rgba(var(--color-text-rgb),.10) 0%,
    rgba(var(--color-text-rgb),.30) 45%,
    rgba(var(--color-text-rgb),.82) 100%);
}
.login-art-copy{ position:relative; z-index:2; max-width:300px }
.login-art-copy span{ display:block; margin-bottom:var(--sp-3); font-size:var(--fs-xs); font-weight:var(--fw-bold); letter-spacing:var(--ls-wide) }
.login-art-copy strong{ display:block; font-size:var(--fs-2xl); line-height:var(--lh-snug) }
.warehouse-lines{ position:absolute; inset:22% 10% 26%; display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-4); opacity:.45 }
.warehouse-lines i{ display:block; border:6px solid var(--color-surface); border-top-width:14px; border-bottom-width:14px }

/* ============================================================
   2. SAYFA BAŞLIĞI
   ============================================================ */
.page-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--sp-4); flex-wrap:wrap; margin-bottom:var(--sp-6);
}
.page-title{ font-size:var(--fs-2xl); font-weight:var(--fw-bold); letter-spacing:var(--ls-tight) }
.page-sub{ font-size:var(--fs-md); color:var(--color-muted); margin-top:var(--sp-1) }
.page-actions{ display:flex; gap:var(--sp-2); flex-wrap:wrap }

.section-title{
  font-size:var(--fs-xs); font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-wide); text-transform:uppercase;
  color:var(--color-muted);
  margin:var(--sp-6) 0 var(--sp-3);
}
.section-title:first-child{ margin-top:0 }

/* ============================================================
   3. KART
   ============================================================ */
.card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--r-lg);
  padding:var(--sp-6);
  box-shadow:var(--shadow-sm);
}
.card-sm{ padding:var(--sp-4) }
.card-flush{ padding:0; overflow:hidden }

/* Tıklanabilir kart — hover'da hafif yükselir */
.card-clickable{ cursor:pointer; transition:box-shadow var(--tr-spring), transform var(--tr-spring), border-color var(--tr-fast) }
.card-clickable:hover{ box-shadow:var(--shadow-lg); transform:translateY(-2px); border-color:var(--color-primary-border) }
.card-clickable:active{ transform:translateY(0) }
.card-clickable.is-selected{ border-color:var(--color-primary); box-shadow:var(--shadow-focus) }

/* Öne çıkan kart — daha yumuşak, daha büyük köşe */
.card-premium{
  background:var(--color-surface);
  border:1px solid var(--color-border-soft);
  border-radius:var(--r-2xl);
  padding:var(--sp-6);
  box-shadow:var(--shadow-md);
  transition:box-shadow var(--tr-spring);
}
.card-premium:hover{ box-shadow:var(--shadow-xl) }

/* Renkli üst şeritli kart */
.card-accent{ position:relative; overflow:hidden }
.card-accent::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:var(--color-primary);
}
.card-accent-success::before{ background:var(--color-success) }
.card-accent-warning::before{ background:var(--color-warning) }
.card-accent-danger::before{ background:var(--color-danger) }

.card-head{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-6);
  border-bottom:1px solid var(--color-border-soft);
}
.card-title{ font-size:var(--fs-lg); font-weight:var(--fw-semibold) }
.card-body{ padding:var(--sp-6) }
.card-foot{
  padding:var(--sp-4) var(--sp-6);
  border-top:1px solid var(--color-border-soft);
  background:var(--color-surface-2);
  display:flex; justify-content:flex-end; gap:var(--sp-2);
}

/* ============================================================
   4. KPI / İSTATİSTİK
   ============================================================ */
.kpi{
  background:var(--color-surface);
  border:1px solid var(--color-border-soft);
  border-radius:var(--r-xl);
  padding:var(--sp-5);
  box-shadow:var(--shadow-xs);
  display:flex; align-items:center; gap:var(--sp-4);
}
.kpi-icon{
  width:46px; height:46px; flex:none; border-radius:var(--r-lg);
  background:var(--color-primary-light); color:var(--color-primary);
  display:flex; align-items:center; justify-content:center;
  font-size:var(--fs-xl);
}
.kpi-icon-success{ background:var(--color-success-light); color:var(--color-success-text) }
.kpi-icon-warning{ background:var(--color-warning-light); color:var(--color-warning-text) }
.kpi-icon-danger{ background:var(--color-danger-light);  color:var(--color-danger-text) }
.kpi-icon-info{ background:var(--color-info-light);    color:var(--color-info-text) }
.kpi-icon-neutral{ background:var(--color-neutral-light); color:var(--color-neutral-text) }

.kpi-body{ min-width:0; flex:1 }
.kpi-label{ font-size:var(--fs-sm); color:var(--color-muted); line-height:1.3 }
.kpi-value{
  font-size:var(--fs-xl); font-weight:var(--fw-bold); color:var(--color-text);
  line-height:1.2; font-variant-numeric:tabular-nums; margin-top:2px;
}
.kpi-sub{ font-size:var(--fs-xs); color:var(--color-muted); margin-top:2px }

/* Dikey KPI — durum ekranı için büyük rakam */
.kpi-stack{ display:block; text-align:left }
.kpi-stack .kpi-label{
  font-size:var(--fs-xs); font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-wide); text-transform:uppercase;
}
.kpi-stack .kpi-value{ font-size:var(--fs-3xl); margin-top:var(--sp-2) }

.kpi-delta{ font-size:var(--fs-xs); font-weight:var(--fw-semibold); margin-left:var(--sp-2) }
.kpi-delta-up{ color:var(--color-success-text) }
.kpi-delta-down{ color:var(--color-danger-text) }

/* Basit rapor grafiği — değer her satırda açıkça yazılır, eksen çözmek gerekmez. */
.simple-chart{ display:grid; gap:var(--sp-4) }
.simple-chart-row{ display:grid; gap:var(--sp-2) }
.simple-chart-head{ display:flex; justify-content:space-between; gap:var(--sp-4); color:var(--color-text-soft) }
.simple-chart-head span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.simple-chart-head strong{ flex:none; color:var(--color-text); font-variant-numeric:tabular-nums }
.simple-chart-bar{ width:100%; height:10px; border:0; overflow:hidden; border-radius:var(--r-full); background:var(--color-surface-3); accent-color:var(--color-primary) }
.simple-chart-bar::-webkit-progress-bar{ background:var(--color-surface-3); border-radius:var(--r-full) }
.simple-chart-bar::-webkit-progress-value{ background:var(--color-primary); border-radius:var(--r-full) }
.simple-chart-bar::-moz-progress-bar{ background:var(--color-primary); border-radius:var(--r-full) }
.simple-chart-success{ accent-color:var(--color-success) }
.simple-chart-warning{ accent-color:var(--color-warning) }
.simple-chart-danger{ accent-color:var(--color-danger) }
.simple-chart-info{ accent-color:var(--color-info) }
.simple-chart-success::-webkit-progress-value{ background:var(--color-success) }
.simple-chart-warning::-webkit-progress-value{ background:var(--color-warning) }
.simple-chart-danger::-webkit-progress-value{ background:var(--color-danger) }
.simple-chart-info::-webkit-progress-value{ background:var(--color-info) }
.simple-chart-success::-moz-progress-bar{ background:var(--color-success) }
.simple-chart-warning::-moz-progress-bar{ background:var(--color-warning) }
.simple-chart-danger::-moz-progress-bar{ background:var(--color-danger) }
.simple-chart-info::-moz-progress-bar{ background:var(--color-info) }

/* ============================================================
   5. FORM
   ============================================================ */
.form-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-4) }
@media (max-width:768px){ .form-grid{ grid-template-columns:1fr } }
.field{ min-width:0 }
.field-full{ grid-column:1 / -1 }

.label{
  display:block; margin-bottom:var(--sp-2);
  font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--color-text-soft);
}
.label .req{ color:var(--color-danger-text); margin-left:2px }
.label-hint{ font-weight:var(--fw-regular); color:var(--color-muted); margin-left:var(--sp-2) }

.input,.select,.textarea{
  width:100%; height:var(--h-control);
  padding:0 var(--sp-3);
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--r-md);
  font-family:inherit; font-size:var(--fs-md); color:var(--color-text);
  transition:border-color var(--tr-fast), box-shadow var(--tr-fast);
}
.textarea{ height:auto; min-height:84px; padding:var(--sp-3); line-height:var(--lh-snug); resize:vertical }
.select{ appearance:none; cursor:pointer; padding-right:var(--sp-8) }

.input:hover,.select:hover,.textarea:hover{ border-color:var(--color-muted) }
.input:focus,.select:focus,.textarea:focus{
  outline:none; border-color:var(--color-primary); box-shadow:var(--shadow-focus);
}
.input:disabled,.select:disabled,.textarea:disabled,
.input[readonly]{
  background:var(--color-surface-2); color:var(--color-muted); cursor:not-allowed;
}
.input::placeholder,.textarea::placeholder{ color:var(--color-muted) }

.input.is-invalid,.select.is-invalid,.textarea.is-invalid{
  border-color:var(--color-danger);
}
.input.is-invalid:focus{ box-shadow:0 0 0 3px rgba(var(--color-danger-rgb),.16) }
.input.is-valid{ border-color:var(--color-success) }

/* Para girişi — sağa hizalı, tabular, ön ek */
.input-money{ text-align:right; font-variant-numeric:tabular-nums; font-weight:var(--fw-semibold) }
/* İkonlu / göz düğmeli girdi.
   Girdiye ikon "eklemek" için soluna span koymak yetmez: metin ikonun altına
   girer. Bu yüzden ikon konumlandırılır ve girdiye o kadar iç boşluk verilir. */
.input-shell{ position:relative; display:block }
.input-shell .input-icon,
.input-shell .input-reveal{
  position:absolute; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; justify-content:center;
  color:var(--color-muted); pointer-events:none;
}
.input-shell .input-icon{ left:var(--sp-3); width:20px; height:20px }
.input-shell .input-reveal{
  right:var(--sp-1); width:40px; height:40px; pointer-events:auto;
  background:none; border:0; border-radius:var(--r-md); cursor:pointer;
  transition:color var(--tr-fast), background var(--tr-fast);
}
.input-shell .input-reveal:hover{ color:var(--color-text); background:var(--color-surface-2) }
.input-shell .input-reveal:focus-visible{ outline:0; box-shadow:var(--shadow-focus); color:var(--color-text) }
.input-shell .input-reveal[aria-pressed="true"]{ color:var(--color-primary) }
.input-has-icon{ padding-left:calc(var(--sp-3) + 20px + var(--sp-2)) }
.input-has-reveal{ padding-right:44px }
.icon{ width:100%; height:100%; display:block }

.input-group{ display:flex; align-items:stretch }
.input-group .input-shell{ flex:1 1 auto; min-width:0 }
.input-group .input{ border-radius:var(--r-md) 0 0 var(--r-md) }
.input-addon{
  display:flex; align-items:center; padding:0 var(--sp-3);
  background:var(--color-surface-2);
  border:1px solid var(--color-border); border-left:0;
  border-radius:0 var(--r-md) var(--r-md) 0;
  font-size:var(--fs-md); color:var(--color-muted); white-space:nowrap;
}

.field-hint{ margin-top:var(--sp-2); font-size:var(--fs-xs); color:var(--color-muted) }
.field-error{
  margin-top:var(--sp-2); font-size:var(--fs-xs);
  color:var(--color-danger-text); font-weight:var(--fw-medium);
}

.check{ display:inline-flex; align-items:center; gap:var(--sp-2); cursor:pointer; font-size:var(--fs-md) }
.check input{ width:16px; height:16px; accent-color:var(--color-primary); cursor:pointer; flex:none }

/* Segment seçici — nakit / havale / veresiye gibi */
.segment{
  display:inline-flex; padding:3px; gap:2px;
  background:var(--color-surface-2);
  border:1px solid var(--color-border);
  border-radius:var(--r-md);
}
.segment-item{
  padding:var(--sp-2) var(--sp-4);
  border:0; background:transparent; border-radius:var(--r-sm);
  font-family:inherit; font-size:var(--fs-sm); font-weight:var(--fw-medium);
  color:var(--color-text-soft); cursor:pointer;
  transition:background var(--tr-fast), color var(--tr-fast);
}
.segment-item:hover{ color:var(--color-text) }
.segment-item.is-active{
  background:var(--color-surface); color:var(--color-primary-dark);
  font-weight:var(--fw-semibold); box-shadow:var(--shadow-xs);
}

/* ============================================================
   6. BUTON
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  height:var(--h-control); padding:0 var(--sp-4);
  border:1px solid transparent; border-radius:var(--r-md);
  font-family:inherit; font-size:var(--fs-md); font-weight:var(--fw-semibold);
  line-height:1; white-space:nowrap; cursor:pointer;
  transition:background var(--tr-fast), border-color var(--tr-fast),
             color var(--tr-fast), box-shadow var(--tr-fast);
}
.btn:disabled,.btn.is-disabled{ opacity:.5; cursor:not-allowed; pointer-events:none }
.btn.is-loading{ pointer-events:none; opacity:.75 }

.btn-primary{
  background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));
  color:var(--color-on-primary);
  box-shadow:0 4px 10px -2px rgba(var(--color-primary-rgb),.35);
}
.btn-primary:hover{ box-shadow:0 6px 16px -3px rgba(var(--color-primary-rgb),.45) }

.btn-secondary{ background:var(--color-surface); color:var(--color-text); border-color:var(--color-border) }
.btn-secondary:hover{ background:var(--color-surface-2); border-color:var(--color-muted) }

.btn-ghost{ background:transparent; color:var(--color-text-soft) }
.btn-ghost:hover{ background:var(--color-surface-2); color:var(--color-text) }

.btn-success{ background:var(--color-success); color:var(--color-inverse) }
.btn-danger{ background:var(--color-danger); color:var(--color-inverse) }
.btn-danger-soft{
  background:var(--color-danger-light); color:var(--color-danger-text);
  border-color:var(--color-danger-border);
}
.btn-danger-soft:hover{ background:var(--color-danger); color:var(--color-inverse) }

.btn-sm{ height:var(--h-control-sm); padding:0 var(--sp-3); font-size:var(--fs-sm) }
.btn-lg{ height:var(--h-control-lg); padding:0 var(--sp-6); font-size:var(--fs-lg) }
.btn-block{ width:100% }
.btn-icon{ width:var(--h-control); padding:0 }
.btn-icon.btn-sm{ width:var(--h-control-sm) }

/* ============================================================
   7. TABLO
   ============================================================ */
.table-wrap{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch }
.table{ width:100%; border-collapse:collapse; font-size:var(--fs-md) }
.table th{
  text-align:left; padding:var(--sp-3) var(--sp-4);
  background:var(--color-surface-2); color:var(--color-text-soft);
  font-size:var(--fs-xs); font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-wide); text-transform:uppercase;
  border-bottom:1px solid var(--color-border); white-space:nowrap;
  position:sticky; top:0; z-index:var(--z-base);
}
.table td{
  padding:var(--sp-3) var(--sp-4);
  border-bottom:1px solid var(--color-border-soft);
  color:var(--color-text-soft); vertical-align:middle;
}
.table tbody tr:last-child td{ border-bottom:0 }
.table tbody tr{ transition:background var(--tr-fast) }
.table tbody tr:hover{ background:var(--color-surface-2) }
.table .num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap }
.table .strong{ color:var(--color-text); font-weight:var(--fw-semibold) }

.table-row-clickable{ cursor:pointer }
.table tr.is-selected{ background:var(--color-primary-light) }
.table tr.is-reversed td{ color:var(--color-reversed); text-decoration:line-through }
.table tr.is-flagged{ background:var(--color-warning-light) }
.table-compact td,.table-compact th{ padding:var(--sp-2) var(--sp-3) }

.table-foot{
  padding:var(--sp-3) var(--sp-4);
  border-top:1px solid var(--color-border);
  background:var(--color-surface-2);
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  font-size:var(--fs-sm); color:var(--color-muted);
}

/* ============================================================
   8. ROZET
   ============================================================ */
.badge{
  display:inline-flex; align-items:center; gap:var(--sp-1);
  padding:3px var(--sp-2);
  border:1px solid transparent; border-radius:var(--r-sm);
  font-size:var(--fs-xs); font-weight:var(--fw-semibold);
  line-height:1.4; white-space:nowrap;
}
.badge-neutral{ background:var(--color-neutral-light); color:var(--color-neutral-text); border-color:var(--color-neutral-border) }
.badge-primary{ background:var(--color-primary-light); color:var(--color-primary-dark); border-color:var(--color-primary-border) }
.badge-success{ background:var(--color-success-light); color:var(--color-success-text); border-color:var(--color-success-border) }
.badge-warning{ background:var(--color-warning-light); color:var(--color-warning-text); border-color:var(--color-warning-border) }
.badge-danger{ background:var(--color-danger-light); color:var(--color-danger-text); border-color:var(--color-danger-border) }
.badge-info{ background:var(--color-info-light); color:var(--color-info-text); border-color:var(--color-info-border) }
.badge-dot::before{ content:""; width:6px; height:6px; border-radius:var(--r-full); background:currentColor }

/* ============================================================
   9. GERİ BİLDİRİM
   ============================================================ */
.alert{
  display:flex; align-items:center; gap:var(--sp-3);
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-left:3px solid var(--color-warning);
  border-radius:var(--r-lg);
  padding:var(--sp-3) var(--sp-4);
  margin-bottom:var(--sp-2);
  box-shadow:var(--shadow-xs);
}
.alert-danger{ border-left-color:var(--color-danger) }
.alert-success{ border-left-color:var(--color-success) }
.alert-info{ border-left-color:var(--color-info) }
.alert-icon{ font-size:var(--fs-lg); line-height:1; flex:none }
.alert-text{ flex:1; font-size:var(--fs-md); color:var(--color-text-soft); min-width:0 }
.alert-text b{ color:var(--color-text); font-weight:var(--fw-semibold) }
.alert-action{ flex:none }

.note{
  display:flex; gap:var(--sp-3); align-items:flex-start;
  padding:var(--sp-3) var(--sp-4);
  border:1px solid; border-radius:var(--r-md);
  font-size:var(--fs-md); line-height:var(--lh-snug);
}
.note-info{ background:var(--color-info-light); border-color:var(--color-info-border); color:var(--color-info-text) }
.note-success{ background:var(--color-success-light); border-color:var(--color-success-border); color:var(--color-success-text) }
.note-warning{ background:var(--color-warning-light); border-color:var(--color-warning-border); color:var(--color-warning-text) }
.note-danger{ background:var(--color-danger-light); border-color:var(--color-danger-border); color:var(--color-danger-text) }

.toast-area{
  position:fixed; right:var(--sp-6); bottom:var(--sp-6); z-index:var(--z-toast);
  display:flex; flex-direction:column; gap:var(--sp-2);
}
.toast{
  display:flex; align-items:center; gap:var(--sp-3);
  min-width:260px; max-width:400px;
  padding:var(--sp-3) var(--sp-4);
  background:var(--color-text); color:var(--color-inverse);
  border-radius:var(--r-md); box-shadow:var(--shadow-lg);
  font-size:var(--fs-md);
  animation:toast-in var(--tr-normal);
}
.toast-success{ background:var(--color-success-text) }
.toast-danger{ background:var(--color-danger-text) }
@keyframes toast-in{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }

/* ============================================================
   10. BOŞ DURUM & YÜKLENİYOR
   ============================================================ */
.empty{ text-align:center; padding:var(--sp-12) var(--sp-6); color:var(--color-muted) }
.empty-icon{ font-size:var(--fs-4xl); opacity:.35; margin-bottom:var(--sp-3) }
.empty-title{ font-size:var(--fs-lg); font-weight:var(--fw-semibold); color:var(--color-text); margin-bottom:var(--sp-2) }
.empty-text{ font-size:var(--fs-md); margin-bottom:var(--sp-4) }

.skeleton{
  background:linear-gradient(90deg,
    var(--color-surface-2) 25%, var(--color-surface-3) 50%, var(--color-surface-2) 75%);
  background-size:200% 100%;
  animation:skeleton 1.4s ease-in-out infinite;
  border-radius:var(--r-sm);
}
@keyframes skeleton{ from{ background-position:200% 0 } to{ background-position:-200% 0 } }
.skeleton-line{ height:12px; margin-bottom:var(--sp-2) }
.skeleton-row{ height:44px; margin-bottom:var(--sp-1); border-radius:var(--r-md) }
.skeleton-row:nth-child(1){ opacity:1 }
.skeleton-row:nth-child(2){ opacity:.88 }
.skeleton-row:nth-child(3){ opacity:.76 }
.skeleton-row:nth-child(4){ opacity:.64 }
.skeleton-row:nth-child(5){ opacity:.52 }
.skeleton-row:nth-child(n+6){ opacity:.40 }

.spinner{
  width:20px; height:20px; flex:none;
  border:2px solid rgba(var(--color-primary-rgb),.18);
  border-top-color:var(--color-primary);
  border-radius:var(--r-full);
  animation:spin .8s linear infinite;
}
.spinner-sm{ width:14px; height:14px; border-width:2px }
.spinner-lg{ width:36px; height:36px; border-width:3px }
@keyframes spin{ to{ transform:rotate(360deg) } }

/* Kısmi yenilemede içeriğin "nefes alması" — ekran ZIPLAMAZ */
.is-refreshing{ position:relative; opacity:.55; transition:opacity var(--tr-fast); pointer-events:none }

/* ============================================================
   11. MODAL & DRAWER
   ============================================================ */
.overlay{
  position:fixed; inset:0; z-index:var(--z-overlay);
  background:var(--color-overlay);
  display:flex; align-items:center; justify-content:center;
  padding:var(--sp-4);
  animation:fade-in var(--tr-fast);
}
.overlay-drawer{ justify-content:flex-end; padding:0 }
@keyframes fade-in{ from{ opacity:0 } to{ opacity:1 } }

.modal{
  position:relative; z-index:var(--z-modal);
  width:100%; max-width:520px; max-height:calc(100vh - var(--sp-16));
  background:var(--color-surface);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-xl);
  display:flex; flex-direction:column; overflow:hidden;
  animation:modal-in var(--tr-normal);
}
@keyframes modal-in{ from{ opacity:0; transform:translateY(12px) scale(.98) } to{ opacity:1; transform:none } }
.modal-lg{ max-width:820px }
.modal-head{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-6);
  border-bottom:1px solid var(--color-border-soft);
}
.modal-title{ font-size:var(--fs-lg); font-weight:var(--fw-semibold) }
.modal-body{ padding:var(--sp-6); overflow-y:auto }
.modal-foot{
  display:flex; justify-content:flex-end; gap:var(--sp-2);
  padding:var(--sp-4) var(--sp-6);
  border-top:1px solid var(--color-border-soft);
  background:var(--color-surface-2);
}

/* Yan panel — detay göstermek için. Liste ekranı YERİNDE KALIR. */
.drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:var(--z-modal);
  width:min(480px,100vw);
  background:var(--color-surface);
  border-left:1px solid var(--color-border);
  box-shadow:var(--shadow-xl);
  display:flex; flex-direction:column;
  animation:drawer-in var(--tr-normal);
}
@keyframes drawer-in{ from{ transform:translateX(100%) } to{ transform:none } }

/* ============================================================
   12. SEKME
   ============================================================ */
.tabs{ display:flex; gap:var(--sp-1); border-bottom:1px solid var(--color-border); margin-bottom:var(--sp-5) }
.tab{
  padding:var(--sp-3) var(--sp-4);
  border:0; background:transparent;
  border-bottom:2px solid transparent; margin-bottom:-1px;
  font-family:inherit; font-size:var(--fs-md); font-weight:var(--fw-medium);
  color:var(--color-muted); cursor:pointer;
  transition:color var(--tr-fast), border-color var(--tr-fast);
}
.tab:hover{ color:var(--color-text) }
.tab.is-active{ color:var(--color-primary-dark); border-bottom-color:var(--color-primary); font-weight:var(--fw-semibold) }

/* ============================================================
   13. FİLTRE ÇUBUĞU
   ============================================================ */
.filter-bar{
  display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap;
  padding:var(--sp-3) var(--sp-4);
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--r-lg);
  margin-bottom:var(--sp-4);
}
.filter-bar .input,.filter-bar .select{ height:var(--h-control-sm); width:auto; min-width:150px; font-size:var(--fs-sm) }

/* ============================================================
   14. AYIRAÇ & YARDIMCI
   ============================================================ */
.divider{ height:1px; background:var(--color-border-soft); border:0; margin:var(--sp-5) 0 }
.avatar{
  width:32px; height:32px; flex:none; border-radius:var(--r-full);
  background:var(--color-primary-light); color:var(--color-primary-dark);
  display:flex; align-items:center; justify-content:center;
  font-size:var(--fs-sm); font-weight:var(--fw-semibold);
}
.kv{ display:flex; justify-content:space-between; gap:var(--sp-4); padding:var(--sp-2) 0; font-size:var(--fs-md) }
.kv + .kv{ border-top:1px solid var(--color-border-soft) }
.kv-key{ color:var(--color-muted) }
.kv-val{ font-weight:var(--fw-semibold); font-variant-numeric:tabular-nums }

/* ============================================================
   15. MOBİL
   ============================================================ */
@media (max-width:1024px){
  body.menu-open{ overflow:hidden }

  :root{
    --h-control-sm: 44px;
    --h-control:    44px;
  }

  .sidebar{
    position:fixed; left:0; top:0; bottom:0;
    z-index:var(--z-modal);
    width:min(var(--w-sidebar), calc(100vw - 48px));
    max-width:100vw;
    transform:translateX(-100%);
    transition:transform var(--tr-normal), box-shadow var(--tr-normal);
    box-shadow:none;
  }
  .sidebar.is-open{
    transform:translateX(0);
    box-shadow:var(--shadow-xl);
  }

  .sidebar-scrim{
    display:block;
    position:fixed; inset:0;
    z-index:calc(var(--z-modal) - 1);
    background:var(--color-overlay);
    opacity:0; pointer-events:none;
    transition:opacity var(--tr-normal);
  }
  .sidebar-scrim.is-open{
    opacity:1; pointer-events:auto;
  }

  .topbar .menu-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; min-width:44px; min-height:44px;
    padding:0; font-size:var(--fs-xl); line-height:1; flex:none;
  }

  .topbar{
    padding:0 var(--sp-3);
    gap:var(--sp-2);
  }
  .topbar-location{ display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

  [data-user-name]{
    max-width:110px;
  }

  .view{
    padding:var(--sp-3);
  }

  /* Etkileşim hedefleri en az 44px */
  .btn, .btn-sm{ min-height:44px; min-width:44px }
  .btn-icon, .btn-icon.btn-sm{ min-width:44px; min-height:44px }
  .nav-item{ min-height:44px }
  .tab{ min-height:44px }
  .dropdown-trigger{ min-height:44px }
  .pager-btn{ min-width:44px; min-height:44px }
  .segment-item{ min-height:44px }
}

@media (max-width:640px){
  .page-head{ flex-direction:column; align-items:stretch; gap:var(--sp-3) }
  .page-actions{ width:100% }
  .page-actions .btn{ flex:1 }
  .filter-bar .input, .filter-bar .select{ width:100%; min-width:0 }
  .hero{ padding:var(--sp-4); gap:var(--sp-4) }
  .hero-stats{ width:100%; justify-content:space-between; gap:var(--sp-3) }
  .modal{ max-height:calc(100vh - var(--sp-6)); margin:var(--sp-2) }
  .modal-head, .modal-foot{ padding:var(--sp-3) var(--sp-4) }
  .modal-body{ padding:var(--sp-4) }
  .login-page{ padding:var(--sp-3) }
  .login-stage{ min-height:0; grid-template-columns:1fr }
  .login-form-side{ padding:var(--sp-6) }
  .login-art{ display:none }
}

@media (max-width:480px){
  .topbar-location{ display:none }
}

@media print{
  .sidebar,.topbar,.page-actions,.filter-bar,.toast-area,.sidebar-scrim,.menu-toggle,.no-print{ display:none !important }
  .card,.kpi,.table-wrap{ box-shadow:none; break-inside:avoid }
  .table-scroll{ overflow:visible }
}

/* ============================================================
   16. HERO — sayfa üstü özet bloğu
   ============================================================ */
.hero{
  background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));
  color:var(--color-on-primary);
  border-radius:var(--r-xl);
  padding:var(--sp-6);
  margin-bottom:var(--sp-6);
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-6); flex-wrap:wrap;
}
.hero-plain{
  background:var(--color-surface); color:var(--color-text);
  border:1px solid var(--color-border); box-shadow:var(--shadow-sm);
}
.hero-title{ font-size:var(--fs-2xl); font-weight:var(--fw-bold); letter-spacing:var(--ls-tight) }
.hero-sub{ font-size:var(--fs-md); opacity:.82; margin-top:var(--sp-1) }
.hero-plain .hero-sub{ opacity:1; color:var(--color-muted) }
.hero-stats{ display:flex; gap:var(--sp-6); flex-wrap:wrap }
.hero-stat-label{ font-size:var(--fs-xs); font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-wide); text-transform:uppercase; opacity:.75 }
.hero-plain .hero-stat-label{ opacity:1; color:var(--color-muted) }
.hero-stat-value{ font-size:var(--fs-xl); font-weight:var(--fw-bold);
  font-variant-numeric:tabular-nums; margin-top:2px }

/* ============================================================
   17. FOOTER
   ============================================================ */
.footer{
  margin-top:auto;
  padding:var(--sp-4) var(--sp-6);
  border-top:1px solid var(--color-border);
  background:var(--color-surface);
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-4); flex-wrap:wrap;
  font-size:var(--fs-sm); color:var(--color-muted);
}
.footer-links{ display:flex; gap:var(--sp-4) }

/* ============================================================
   18. FİYAT / TUTAR GÖSTERİMİ
   Para HER YERDE bu sınıflarla yazılır. Elle renk verilmez.
   ============================================================ */
.money{
  font-variant-numeric:tabular-nums; font-weight:var(--fw-semibold);
  white-space:nowrap; color:var(--color-text);
}
.money-in{ color:var(--color-money-in) }
.money-out{ color:var(--color-money-out) }
.money-profit{ color:var(--color-profit) }
.money-loss{ color:var(--color-loss) }
.money-receivable{ color:var(--color-receivable) }
.money-payable{ color:var(--color-payable) }
.money-zero{ color:var(--color-muted); font-weight:var(--fw-regular) }
.money-sm{ font-size:var(--fs-sm) }
.money-lg{ font-size:var(--fs-lg); font-weight:var(--fw-bold) }
.money-xl{ font-size:var(--fs-2xl); font-weight:var(--fw-bold); letter-spacing:var(--ls-tight) }
.money-cur{ font-weight:var(--fw-regular); opacity:.7; margin-left:2px }

.qty{ font-variant-numeric:tabular-nums; font-weight:var(--fw-semibold); white-space:nowrap }
.qty-unit{ font-weight:var(--fw-regular); color:var(--color-muted); margin-left:3px; font-size:.88em }

/* ============================================================
   19. CHECKBOX · RADIO · SWITCH
   ============================================================ */
.ctl{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  cursor:pointer; font-size:var(--fs-md); color:var(--color-text-soft);
  user-select:none;
}
.ctl input{ position:absolute; opacity:0; width:0; height:0 }
.ctl-box{
  width:18px; height:18px; flex:none;
  border:1.5px solid var(--color-border); border-radius:var(--r-sm);
  background:var(--color-surface);
  display:grid; place-items:center;
  transition:background var(--tr-fast), border-color var(--tr-fast);
}
.ctl-box::after{
  content:""; width:9px; height:5px;
  border-left:2px solid var(--color-on-primary); border-bottom:2px solid var(--color-on-primary);
  transform:rotate(-45deg) scale(0); transition:transform var(--tr-fast); margin-top:-2px;
}
.ctl:hover .ctl-box{ border-color:var(--color-primary) }
.ctl input:checked + .ctl-box{ background:var(--color-primary); border-color:var(--color-primary) }
.ctl input:checked + .ctl-box::after{ transform:rotate(-45deg) scale(1) }
.ctl input:focus-visible + .ctl-box{ box-shadow:var(--shadow-focus) }
.ctl input:disabled + .ctl-box{ background:var(--color-surface-2); border-color:var(--color-border) }
.ctl input:disabled ~ .ctl-label{ color:var(--color-muted) }
.ctl input:disabled{ cursor:not-allowed }

/* Radio — aynı yapı, yuvarlak */
.ctl-radio .ctl-box{ border-radius:var(--r-full) }
.ctl-radio .ctl-box::after{
  width:8px; height:8px; border:0; border-radius:var(--r-full);
  background:var(--color-on-primary); transform:scale(0); margin:0;
}
.ctl-radio input:checked + .ctl-box::after{ transform:scale(1) }

/* Switch */
.ctl-switch .ctl-box{
  width:36px; height:20px; border-radius:var(--r-full);
  background:var(--color-surface-3); border-color:var(--color-surface-3);
  justify-items:start; padding:2px;
}
.ctl-switch .ctl-box::after{
  content:""; width:14px; height:14px; border:0; border-radius:var(--r-full);
  background:var(--color-surface); box-shadow:var(--shadow-xs);
  transform:translateX(0); margin:0; transition:transform var(--tr-fast);
}
.ctl-switch input:checked + .ctl-box{ background:var(--color-primary); border-color:var(--color-primary) }
.ctl-switch input:checked + .ctl-box::after{ transform:translateX(16px) }

/* ============================================================
   20. TOOLTIP — CSS-only, data-tip ile
   ============================================================ */
[data-tip]{ position:relative }
[data-tip]::after{
  content:attr(data-tip);
  position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(4px);
  z-index:var(--z-dropdown);
  padding:var(--sp-2) var(--sp-3);
  background:var(--color-text); color:var(--color-inverse);
  border-radius:var(--r-md); box-shadow:var(--shadow-lg);
  font-size:var(--fs-xs); font-weight:var(--fw-medium); line-height:1.4;
  white-space:normal; width:max-content; max-width:240px; text-align:left;
  opacity:0; pointer-events:none;
  transition:opacity var(--tr-fast), transform var(--tr-fast);
}
[data-tip]::before{
  content:""; position:absolute; bottom:calc(100% + 3px); left:50%;
  transform:translateX(-50%) translateY(4px);
  border:5px solid transparent; border-top-color:var(--color-text);
  z-index:var(--z-dropdown); opacity:0; pointer-events:none;
  transition:opacity var(--tr-fast), transform var(--tr-fast);
}
[data-tip]:hover::after,[data-tip]:focus-visible::after,
[data-tip]:hover::before,[data-tip]:focus-visible::before{
  opacity:1; transform:translateX(-50%) translateY(0);
}
[data-tip-pos="bottom"]::after{ bottom:auto; top:calc(100% + 8px) }
[data-tip-pos="bottom"]::before{ bottom:auto; top:calc(100% + 3px); border-top-color:transparent; border-bottom-color:var(--color-text) }

/* Yardım ikonu — etiket yanında */
.help{
  display:inline-grid; place-items:center;
  width:15px; height:15px; margin-left:var(--sp-1);
  border-radius:var(--r-full);
  background:var(--color-surface-3); color:var(--color-muted);
  font-size:10px; font-weight:var(--fw-bold); cursor:help; vertical-align:middle;
}
.help:hover{ background:var(--color-primary-light); color:var(--color-primary-dark) }

/* ============================================================
   21. DROPDOWN / FİLTRE MENÜSÜ
   ============================================================ */
.dropdown{ position:relative; display:inline-block }
.dropdown-trigger{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  height:var(--h-control-sm); padding:0 var(--sp-3);
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--r-md);
  font-family:inherit; font-size:var(--fs-sm); font-weight:var(--fw-medium);
  color:var(--color-text-soft); cursor:pointer; white-space:nowrap;
  transition:border-color var(--tr-fast), background var(--tr-fast);
}
.dropdown-trigger:hover{ border-color:var(--color-muted) }
.dropdown-trigger.is-active{
  border-color:var(--color-primary); background:var(--color-primary-light);
  color:var(--color-primary-dark);
}
.dropdown-trigger::after{
  content:""; width:0; height:0; margin-left:var(--sp-1);
  border:4px solid transparent; border-top-color:currentColor; margin-top:3px;
}
.dropdown-menu{
  position:absolute; top:calc(100% + 4px); left:0; z-index:var(--z-dropdown);
  min-width:200px; max-height:320px; overflow-y:auto;
  background:var(--color-surface);
  border:1px solid var(--color-border); border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);
  padding:var(--sp-1);
  display:none;
}
.dropdown.is-open .dropdown-menu{ display:block }
.dropdown-menu-right{ left:auto; right:0 }
.dropdown-search{ padding:var(--sp-1) }
.dropdown-search .input{ height:var(--h-control-sm); font-size:var(--fs-sm) }
.dropdown-item{
  display:flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-3); border-radius:var(--r-sm);
  font-size:var(--fs-md); color:var(--color-text-soft); cursor:pointer;
  transition:background var(--tr-fast);
}
.dropdown-item:hover{ background:var(--color-surface-2); color:var(--color-text) }
.dropdown-item.is-selected{ background:var(--color-primary-light); color:var(--color-primary-dark); font-weight:var(--fw-semibold) }
.dropdown-sep{ height:1px; background:var(--color-border-soft); margin:var(--sp-1) 0 }
.dropdown-empty{ padding:var(--sp-4); text-align:center; color:var(--color-muted); font-size:var(--fs-sm) }

/* ============================================================
   PICKER — aranabilir seçim
   Düz <select> yalnız KISA ve SABİT listeler içindir (ölçü birimi, rol).
   Tedarikçi, müşteri ve ürün listeleri büyür; binlerce kayıtta düz liste
   kullanılamaz hâle gelir. Picker arayışı SUNUCUYA yaptırır ve sonucu sınırlar.
   ============================================================ */
.picker{ position:relative; display:block; flex:1; min-width:0 }
.picker-menu{
  position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:var(--z-dropdown);
  max-height:280px; overflow-y:auto;
  background:var(--color-surface);
  border:1px solid var(--color-border); border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);
  padding:var(--sp-1);
  display:none;
}
.picker.is-open .picker-menu{ display:block }
.picker-opt{
  display:block; width:100%; text-align:left;
  padding:var(--sp-2) var(--sp-3); border:0; border-radius:var(--r-sm);
  background:transparent; color:var(--color-text-soft);
  font-family:inherit; font-size:var(--fs-md); cursor:pointer;
  transition:background var(--tr-fast);
  /* Dokunma hedefi en az 44px (§7.2) */
  min-height:44px;
}
.picker-opt:hover,
.picker-opt.is-active{ background:var(--color-surface-2); color:var(--color-text) }
.picker-opt-sub{ display:block; font-size:var(--fs-xs); color:var(--color-muted); margin-top:2px }
.picker-empty{ padding:var(--sp-4); text-align:center; color:var(--color-muted); font-size:var(--fs-sm) }
.picker-hint{ padding:var(--sp-3); text-align:center; color:var(--color-muted); font-size:var(--fs-sm) }
.picker-clear{
  position:absolute; top:50%; right:var(--sp-2); transform:translateY(-50%);
  display:grid; place-items:center; width:28px; height:28px;
  border:0; border-radius:var(--r-full); background:transparent;
  color:var(--color-muted); font-family:inherit; font-size:var(--fs-lg);
  line-height:1; cursor:pointer;
}
.picker-clear:hover{ background:var(--color-surface-2); color:var(--color-text) }

/* Seçili filtre etiketi */
.chip{
  display:inline-flex; align-items:center; gap:var(--sp-1);
  padding:3px var(--sp-2) 3px var(--sp-3);
  background:var(--color-primary-light); color:var(--color-primary-dark);
  border:1px solid var(--color-primary-border); border-radius:var(--r-full);
  font-size:var(--fs-sm); font-weight:var(--fw-medium); white-space:nowrap;
}
.chip-x{
  display:grid; place-items:center; width:16px; height:16px;
  border:0; border-radius:var(--r-full); background:transparent;
  color:inherit; font-family:inherit; font-size:13px; line-height:1; cursor:pointer;
}
.chip-x:hover{ background:var(--color-primary-border) }

/* ============================================================
   22. SAYFALAMA
   ============================================================ */
.pager{ display:flex; align-items:center; gap:var(--sp-1) }
.pager-btn{
  min-width:var(--h-control-sm); height:var(--h-control-sm); padding:0 var(--sp-2);
  border:1px solid var(--color-border); border-radius:var(--r-md);
  background:var(--color-surface); color:var(--color-text-soft);
  font-family:inherit; font-size:var(--fs-sm); font-weight:var(--fw-medium); cursor:pointer;
}
.pager-btn:hover:not(:disabled){ background:var(--color-surface-2) }
.pager-btn.is-active{ background:var(--color-primary); border-color:var(--color-primary); color:var(--color-on-primary) }
.pager-btn:disabled{ opacity:.4; cursor:not-allowed }