/* ═══════════════════════════════════════════════════════════════════════════
   Hızlı Erişim Paleti (⌘K) — includes/palette.php · assets/palette.js

   Ayrı dosya: style.css sitenin her sayfasında indiriliyor ve 160 KB'ı geçti.
   Palet her sayfada AÇILABİLİYOR ama çoğu ziyarette hiç açılmıyor; kuralları
   burada tutup ayrı istekle çekmek ana dosyayı şişirmiyor.

   Katman sırası: modal 9000 · palet 9600 · nprogress 10000 · açılış ekranı
   100000. Palet modalın üstünde, çünkü giriş kutusu açıkken de Ctrl+K çalışıyor.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Üst çubuktaki tetik düğmesi ─────────────────────────────────────────── */
.cmdp-trigger {
    display: inline-flex; align-items: center; gap: 9px;
    height: 38px; padding: 0 10px 0 12px;
    border-radius: 999px;
    background: var(--glass-bg-medium);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: .82rem; font-weight: 600;
    transition: border-color .22s, background .22s, color .22s, transform .22s;
}
.cmdp-trigger:hover {
    background: var(--glass-bg-strong);
    border-color: var(--border-color-hover);
    color: var(--text-primary);
    transform: translateY(-1px);
}
.cmdp-trigger i { font-size: 1.15rem; }
.cmdp-trigger kbd {
    font-family: inherit; font-size: .68rem; font-weight: 800; letter-spacing: .4px;
    padding: 3px 7px; border-radius: 6px;
    background: var(--border-subtle);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
}
/* Dar ekranda yalnızca büyüteç kalıyor: kısayol zaten klavyesiz cihazda anlamsız.
   Palet dokunmatikte de tam çalışıyor — tam ekran açılıyor, sonuçlara dokunuluyor. */
@media (max-width: 900px) {
    .cmdp-trigger { padding: 0; width: 38px; justify-content: center; }
    .cmdp-trigger .cmdp-trigger-text, .cmdp-trigger kbd { display: none; }
}
/* Mobil sürümün üst çubuğu 58 piksel; düğme oraya sığacak kadar küçülüyor. */
body.mobile-site .cmdp-trigger { width: 34px; height: 34px; }
body.mobile-site .cmdp-trigger i { font-size: 1.05rem; }

/* ── Katman ──────────────────────────────────────────────────────────────── */
.cmdp {
    position: fixed; inset: 0; z-index: 9600;
    display: flex; align-items: flex-start; justify-content: center;
    padding: clamp(14px, 9vh, 110px) 16px 16px;
}
.cmdp[hidden] { display: none; }

.cmdp-backdrop {
    position: absolute; inset: 0;
    background: rgba(4, 4, 14, .74);
    -webkit-backdrop-filter: blur(9px) saturate(120%);
    backdrop-filter: blur(9px) saturate(120%);
    opacity: 0; transition: opacity .22s ease;
}
.cmdp.open .cmdp-backdrop { opacity: 1; }

/* ── Panel ───────────────────────────────────────────────────────────────── */
.cmdp-panel {
    position: relative; width: 100%; max-width: 660px;
    max-height: min(74vh, 660px);
    display: flex; flex-direction: column; overflow: hidden;
    border-radius: 18px;
    background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-deep) 100%);
    border: 1px solid var(--glass-bg-strong);
    box-shadow:
        0 40px 90px -20px rgba(0, 0, 0, .85),
        0 0 0 1px var(--glass-bg-subtle) inset,
        0 0 70px -30px rgba(var(--secondary-rgb), .8);
    opacity: 0; transform: translateY(-14px) scale(.965);
    transition: opacity .24s ease, transform .34s cubic-bezier(.16, 1, .3, 1);
}
.cmdp.open .cmdp-panel { opacity: 1; transform: none; }

/* Panelin üst kenarında soldan sağa geçen ince ışık — kutunun "canlı" durduğu
   hissini veren tek detay; sürekli döndüğü için CPU'ya yük binmesin diye tek
   bir 1 piksellik çizgi üzerinde çalışıyor. */
/* Şerit `transform` ile kayıyor, `background-position` ile değil: ikincisi bir
   boyama özelliği ve çizgi her karede yeniden çizilirdi. */
.cmdp-panel::before {
    content: ''; position: absolute; top: 0; left: 0; width: 50%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--cyan-rgb), .9), rgba(var(--purple-rgb), .9), transparent);
    animation: cmdpScan 3.4s linear infinite;
}
@keyframes cmdpScan {
    0%   { transform: translate3d(-120%, 0, 0); }
    100% { transform: translate3d(320%, 0, 0); }
}

/* ── Arama satırı ────────────────────────────────────────────────────────── */
.cmdp-search {
    display: flex; align-items: center; gap: 12px;
    padding: 17px 18px;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}
.cmdp-search-ico { font-size: 1.4rem; color: var(--text-muted); flex-shrink: 0; }
.cmdp.open .cmdp-search-ico { animation: cmdpIcoIn .5s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes cmdpIcoIn { from { opacity: 0; transform: scale(.5) rotate(-25deg); } to { opacity: 1; transform: none; } }

.cmdp-input {
    flex: 1; min-width: 0;
    background: none; border: none; outline: none;
    color: var(--text-primary); font-family: inherit; font-size: 1.02rem; font-weight: 600;
}
.cmdp-input::placeholder { color: var(--text-dim); font-weight: 500; }

.cmdp-spin { color: var(--accent-blue); font-size: 1.2rem; display: flex; }
.cmdp-esc {
    flex-shrink: 0;
    font-size: .66rem; font-weight: 800; letter-spacing: .6px;
    padding: 5px 9px; border-radius: 7px;
    background: var(--glass-bg-medium);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    transition: background .2s, color .2s;
}
.cmdp-esc:hover { background: var(--border-strong); color: var(--text-primary); }

/* ── Gövde ───────────────────────────────────────────────────────────────── */
.cmdp-body { overflow-y: auto; overscroll-behavior: contain; padding: 8px 8px 12px; flex: 1; }
.cmdp-body::-webkit-scrollbar { width: 8px; }
.cmdp-body::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; }
.cmdp-body::-webkit-scrollbar-track { background: transparent; }

.cmdp-group { margin-bottom: 6px; }
.cmdp-group[hidden] { display: none; }
.cmdp-group-title {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 11px 12px 7px;
    font-size: .68rem; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase;
    color: var(--text-dim);
}
.cmdp-count { color: var(--accent-blue); font-weight: 800; }
.cmdp-clear {
    font-size: .66rem; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
    color: var(--text-dim); transition: color .2s;
}
.cmdp-clear:hover { color: var(--danger-light); }

.cmdp-rows { display: flex; flex-direction: column; gap: 2px; }

/* ── Satır ───────────────────────────────────────────────────────────────── */
.cmdp-row {
    position: relative; display: flex; align-items: center; gap: 13px;
    padding: 10px 12px; border-radius: 12px;
    color: inherit; text-decoration: none;
    border: 1px solid transparent;
    transition: background .16s, border-color .16s;
}
.cmdp-row[hidden] { display: none; }

/* Seçili satır: fare de klavye de aynı sınıfı kullanıyor, böylece iki ayrı
   "vurgulanmış" görünüm aynı anda ekranda olamıyor. */
.cmdp-row.sel {
    background: linear-gradient(90deg, rgba(var(--secondary-rgb), .22), rgba(var(--secondary-rgb), .05) 70%, transparent);
    border-color: rgba(var(--info-rgb), .35);
}
.cmdp-row.sel::before {
    content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 3px; height: 62%; border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, var(--info), var(--secondary));
    box-shadow: 0 0 12px rgba(var(--cyan-rgb), .9);
    animation: cmdpBar .28s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes cmdpBar { from { height: 0; opacity: 0; } }

.cmdp-ico {
    flex-shrink: 0; display: grid; place-items: center;
    width: 38px; height: 38px; border-radius: 11px;
    font-size: 1.25rem;
    background: var(--glass-bg-medium);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    transition: transform .22s cubic-bezier(.16, 1, .3, 1), color .2s, background .2s;
}
.cmdp-row.sel .cmdp-ico { transform: scale(1.08); }
.cmdp-ico.tone-blue  { color: var(--info-light); background: rgba(var(--secondary-rgb), .14);  border-color: rgba(var(--info-rgb), .26); }
.cmdp-ico.tone-green { color: var(--success-light); background: rgba(var(--success-rgb), .13);  border-color: rgba(var(--success-rgb), .26); }
.cmdp-ico.tone-gold  { color: var(--gold); background: rgba(var(--primary-rgb), .13); border-color: rgba(var(--primary-rgb), .26); }
.cmdp-ico.tone-red   { color: var(--danger-light); background: rgba(var(--danger-rgb), .13);  border-color: rgba(var(--danger-rgb), .26); }

/* Oyun kapağı satırda küçük bir afiş olarak duruyor. */
.cmdp-thumb {
    flex-shrink: 0; width: 38px; height: 46px; border-radius: 9px; overflow: hidden;
    background: var(--glass-bg-subtle); border: 1px solid var(--border-color);
}
.cmdp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cmdp-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cmdp-label {
    font-size: .92rem; font-weight: 700; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Eşleşen harfler kalın+mavi: oyuncu neden bu sonucun geldiğini görüyor. */
.cmdp-label mark { background: none; color: var(--info-light); font-weight: 800; }
.cmdp-hint {
    font-size: .74rem; color: var(--text-dim);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.cmdp-tag {
    flex-shrink: 0; font-size: .6rem; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
    padding: 3px 8px; border-radius: 999px;
    background: var(--glass-bg-medium); color: var(--text-muted);
}
.cmdp-tag.hot { background: linear-gradient(135deg, var(--amber), var(--danger)); color: var(--text-primary); }
.cmdp-tag.new { background: rgba(var(--success-rgb), .18); color: var(--success-light); }
.cmdp-tag.exclusive { background: rgba(var(--purple-rgb), .2); color: var(--purple-light); }

.cmdp-enter { flex-shrink: 0; font-size: 1.05rem; color: var(--text-dim); opacity: 0; transition: opacity .18s; }
.cmdp-row.sel .cmdp-enter { opacity: 1; }

.cmdp-all {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin: 8px 12px 2px; padding: 9px;
    border-radius: 10px; border: 1px dashed var(--glass-border);
    font-size: .78rem; font-weight: 700; color: var(--text-muted);
    transition: color .2s, border-color .2s, background .2s;
}
.cmdp-all:hover { color: var(--text-primary); border-color: rgba(var(--info-rgb), .45); background: rgba(var(--secondary-rgb), .1); }
/* `display: flex` olduğu için `hidden` özniteliği tek başına gizlemiyor. */
.cmdp-all[hidden] { display: none; }

/* ── Boş sonuç ───────────────────────────────────────────────────────────── */
.cmdp-empty { text-align: center; padding: 44px 20px 50px; color: var(--text-dim); }
.cmdp-empty[hidden] { display: none; }
.cmdp-empty i { font-size: 2.6rem; opacity: .45; display: block; margin-bottom: 10px; }
.cmdp-empty p { font-size: .95rem; font-weight: 700; color: var(--text-muted); }
.cmdp-empty small { display: block; margin-top: 5px; font-size: .78rem; }

/* ── Alt bilgi çubuğu ────────────────────────────────────────────────────── */
.cmdp-foot {
    display: flex; align-items: center; gap: 16px; flex-shrink: 0;
    padding: 10px 16px;
    border-top: 1px solid var(--border-subtle);
    background: rgba(0, 0, 0, .25);
    font-size: .7rem; color: var(--text-dim);
}
.cmdp-foot kbd {
    display: inline-block; min-width: 19px; text-align: center;
    font-family: inherit; font-size: .66rem; font-weight: 800;
    padding: 2px 5px; margin-right: 3px; border-radius: 5px;
    background: var(--border-subtle); border: 1px solid var(--border-color); color: var(--text-muted);
}
.cmdp-foot-brand { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-weight: 800; color: var(--text-dim); }
.cmdp-foot-brand i { color: var(--accent-yellow); }
@media (max-width: 560px) {
    /* Telefonda klavye kısayolu yok; ipuçları yerine yalnızca marka kalıyor. */
    .cmdp-foot span:not(.cmdp-foot-brand) { display: none; }
    .cmdp-panel { max-height: 82vh; }
    .cmdp { padding-top: 12px; }
}

/* Açılışta satırların sırayla süzülmesi. Yalnızca ilk sekiz satır gecikmeli —
   devamı anında geliyor, yoksa uzun listede son satır yarım saniye geç kalıyor. */
.cmdp.open .cmdp-rows > * { animation: cmdpRowIn .34s cubic-bezier(.16, 1, .3, 1) both; }
.cmdp.open .cmdp-rows > *:nth-child(1) { animation-delay: .02s; }
.cmdp.open .cmdp-rows > *:nth-child(2) { animation-delay: .045s; }
.cmdp.open .cmdp-rows > *:nth-child(3) { animation-delay: .07s; }
.cmdp.open .cmdp-rows > *:nth-child(4) { animation-delay: .095s; }
.cmdp.open .cmdp-rows > *:nth-child(5) { animation-delay: .12s; }
.cmdp.open .cmdp-rows > *:nth-child(6) { animation-delay: .145s; }
.cmdp.open .cmdp-rows > *:nth-child(7) { animation-delay: .17s; }
.cmdp.open .cmdp-rows > *:nth-child(8) { animation-delay: .195s; }
@keyframes cmdpRowIn { from { opacity: 0; transform: translateY(7px); } }

/* Hareket azaltma tercihi: kutu yine açılıyor, hiçbir şey kaymıyor/parlamıyor. */
@media (prefers-reduced-motion: reduce) {
    .cmdp-backdrop, .cmdp-panel { transition: none; }
    .cmdp-panel::before { animation: none; }
    .cmdp.open .cmdp-rows > *, .cmdp.open .cmdp-search-ico, .cmdp-row.sel::before { animation: none; }
}