/* ekran-kisayol.css — klavye kısayolları penceresi (Plan 3 Task 4; design/web_ayarlar-showcase wy7 + ayarlar.css).
   `.ky-*` sınıflarının TEK sahibi bu dosyadır (Ayarlar → Kısayollar satırı da aynı pencereyi açar). Renk yalnız takma adlardan. */

/* Renkli simge kutusu (emoji yer tutucu; seçilen varyantta Fluent 3D'ye çevrilecek) */
.ay-ik { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: var(--r-sm);
  font-size: 19px; line-height: 1; box-shadow: var(--shadow-ic);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.ay-ik--buyuk { width: 48px; height: 48px; border-radius: var(--r-md); font-size: 25px; }
.ay-ik--kucuk { width: 28px; height: 28px; border-radius: 8px; font-size: 15px; }
.ton-yesil { background: var(--primary-soft); }   .ton-mercan { background: var(--accent-soft); }
.ton-altin { background: var(--gold-soft); }      .ton-mor { background: var(--note-soft); }
.ton-kirmizi { background: var(--danger-soft); }  .ton-gri { background: var(--presence-invisible-soft); }
.ton-turuncu { background: var(--presence-away-soft); }

/* Kısayol tablosu */
.ky-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--ky-min, 330px), 1fr)); gap: 16px; }
.ky-grup { background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); overflow: hidden; align-self: start; }
.ky-grup h4 { margin: 0; display: flex; align-items: center; gap: 10px; padding: 12px 14px; font-size: var(--fs-sub); font-weight: var(--fw-x); border-bottom: 1px solid var(--line-soft); }
.ky-satir { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 6px 14px; font-size: var(--fs-sub); }
.ky-satir + .ky-satir { border-top: 1px solid var(--line-soft); }
.ky-satir .ne { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ky-satir .kbd-grup { flex: none; }

/* Pencere (wy7) */
.ky-modal { width: min(1040px, calc(100% - 48px)); max-height: min(740px, calc(100% - 48px)); display: flex; flex-direction: column; overflow: hidden;
  background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); --ky-min: 300px; }
.ky-bas { display: flex; align-items: center; gap: 14px; padding: 18px 18px 18px 24px; border-bottom: 1px solid var(--line); }
.ky-bas h2 { margin: 0; font-size: var(--fs-h2); font-weight: var(--fw-x); }
.ky-bas p { margin: 0; font-size: var(--fs-cap); color: var(--sub); }
.ky-bas .bos-alan { flex: 1; }
.ky-govde { padding: 18px 24px; background: var(--app-bg); overflow: auto; }
.ky-alt { display: flex; align-items: center; gap: 10px; padding: 12px 24px; border-top: 1px solid var(--line); font-size: var(--fs-cap); color: var(--sub); }
.ky-alt .sag { margin-left: auto; }
.secici > span { cursor: pointer; }
.secici > span:focus-visible, .ky-bas .ikon-btn:focus-visible { outline: 3px solid var(--primary-tint); outline-offset: 2px; }