/* ============================================================
   Çekirdek: Komut Paleti (Ctrl/Cmd + K)
   Katman: --z-popover (150) → modalın (100) ÜSTÜNDE, toast'ın (200) ALTINDA.
   Modal açıkken de çağrılabilir olmalı; toast ise her şeyin üstünde kalmalı.
   ============================================================ */
.kp-backdrop {
  position: fixed; inset: 0; z-index: var(--z-popover);
  display: none; justify-content: center; align-items: flex-start;
  padding: 10vh var(--space-4) var(--space-4);
  background: rgba(0, 0, 0, .45);
}
.kp-backdrop.is-open { display: flex; }

.kp {
  width: 100%; max-width: 640px; max-height: 76vh;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-lg, 12px);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .28);
}

.kp-head {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  color: var(--text-muted); flex-shrink: 0;
}
.kp-head svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; flex-shrink: 0; }
.kp-input {
  flex: 1; border: none; background: none; outline: none;
  font-size: var(--fs-lg); color: var(--text); min-width: 0;
}
.kp-kbd, .kp-foot kbd {
  font: 600 11px/1 inherit; letter-spacing: .04em; color: var(--text-muted);
  background: var(--bg); border: 1px solid var(--border); border-bottom-width: 2px;
  border-radius: 5px; padding: 3px 6px; white-space: nowrap;
}

.kp-list { overflow-y: auto; padding: var(--space-2) 0; flex: 1; }

.kp-grup {
  padding: var(--space-2) var(--space-4) 4px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted);
}

.kp-item {
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%; text-align: left; border: none; background: none;
  padding: 8px var(--space-4); color: var(--text); cursor: pointer;
  border-left: 3px solid transparent;
}
/* Seçili satır KLAVYE ile gezildiğinden yalnız :hover yetmez — `is-on` tek
   gerçek kaynaktır (fare ile klavye aynı anda farklı satır gösteremez). */
.kp-item.is-on { background: var(--bg); border-left-color: var(--brand); }
.kp-ico { display: grid; place-items: center; width: 20px; height: 20px; flex-shrink: 0; color: var(--text-muted); }
.kp-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kp-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.kp-ad { font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kp-alt { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kp-rozet { font-size: 12px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; font-variant-numeric: tabular-nums; }

.kp-bos, .kp-durum { padding: var(--space-4); font-size: var(--fs-sm); color: var(--text-muted); text-align: center; }
.kp-durum { padding: var(--space-2) var(--space-4); }

.kp-foot {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--border); background: var(--bg);
  font-size: 11px; color: var(--text-muted); flex-shrink: 0;
}
.kp-foot span { display: inline-flex; align-items: center; gap: 4px; }

/* Dar ekranda palet tam yükseklik: 10vh boşluk küçük ekranda listeyi yutuyor. */
@media (max-width: 640px) {
  .kp-backdrop { padding: 0; }
  .kp { max-width: none; max-height: 100vh; height: 100%; border: none; border-radius: 0; }
}