/* Kisayollar penceresi (⌘/, public/kisayol.js). Yeni kabukta da eski arayuzde de ayni gorunur: yalniz style.css'in ortak
   tokenlari, yeni kabugun tokenlari (--line-2) varsa onlar. Yerlesim pencerenin degil arka planin genisligine bakar
   (container query): genis iki sutun, darda tek sutun, telefonda alttan acilan sayfa. Ornek sayfa bu sayede dar bir
   cerceveyle masaustunde de dar hali gosterebilir (tools/build-gelisim-demo.js ?genislik=). */
.ks-back {
  container: ks / inline-size;
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px;
  background: rgb(8 8 10 / .5);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.ks-sheet {
  --ks-line: var(--line-2, var(--line));
  /* Ikincil yazi: --muted'dan biraz daha acik (koyu panelde ~8:1), bas yaziya yakin boyutta. */
  --ks-sub: color-mix(in srgb, var(--muted) 70%, var(--text));
  width: min(860px, 100%); max-height: calc(100dvh - 32px); min-height: 0; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 12px; outline: 0; color: var(--text); overflow: hidden;
  background: var(--panel);
  box-shadow: var(--shadow), 0 1px 0 rgb(255 255 255 / .04) inset;
  font: 13px/1.45 "Geist", ui-sans-serif, system-ui, sans-serif;
}
.ks-head {
  display: flex; align-items: flex-start; gap: 12px; padding: 16px 16px 12px 20px; flex: none;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel-2) 55%, var(--panel)), var(--panel));
}
.ks-ttl { min-width: 0; flex: 1; }
.ks-head h2 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.ks-mod { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; color: var(--muted); }
.ks-mod i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.ks-sheet[data-mod="eski"] .ks-mod i { background: var(--warn); }
.ks-x { flex: none; display: grid; place-items: center; height: 28px; padding: 0 6px; border: 0; border-radius: 6px; background: transparent; cursor: pointer; }
.ks-x:hover { background: var(--panel-2); }
.ks-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Kendi icinde kayar; baslik ve alt satir yerinde kalir. Ust/alt golge yalniz kaydirilacak icerik varken gorunur. */
.ks-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 4px 20px 0; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 28px;
  background:
    linear-gradient(var(--panel) 30%, transparent) center top / 100% 28px no-repeat local,
    linear-gradient(transparent, var(--panel) 70%) center bottom / 100% 28px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgb(0 0 0 / .22), transparent) center top / 100% 10px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgb(0 0 0 / .22), transparent) center bottom / 100% 10px no-repeat scroll,
    var(--panel);
}
.ks-sec { min-width: 0; padding: 12px 0 6px; }
.ks-sec + .ks-sec { border-top: 1px solid var(--line); }
.ks-sec h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 3px; font-size: 11.5px; font-weight: 600; color: var(--text); letter-spacing: .06em; text-transform: uppercase; }
.ks-sec h3 i { width: 8px; height: 8px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ks-sec[data-grup="eski"] h3 i { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 18%, transparent); }
.ks-note { margin: 0 0 6px; font-size: 13px; color: var(--ks-sub); line-height: 1.4; }
.ks-sec ul { list-style: none; margin: 0; padding: 0; }
.ks-sec li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; padding: 5px 0; }
.ks-sec li + li { border-top: 1px dashed color-mix(in srgb, var(--line) 80%, transparent); }
.ks-t { min-width: 0; overflow-wrap: anywhere; }
.ks-t small { display: block; font-size: 13px; color: var(--ks-sub); line-height: 1.35; margin-top: 1px; }
/* Acik arayuzde calismayan satir: asil isaret basligin altindaki kucuk "yalniz ..." etiketi (sabit bosluk, tus
   sutunu yerinde kalir). Metin ve tuslar --ks-sub (koyu panelde ~8:1, okunur); tuslar kesik cerceveli. */
.ks-sec li[data-yok] .ks-t { color: var(--ks-sub); }
.ks-t small.ks-chip {
  display: block; width: fit-content; margin-top: 3px; padding: 0 7px; font-size: 11.5px; line-height: 18px; white-space: nowrap;
  color: var(--text); border: 1px solid var(--ks-line); border-radius: 999px; background: var(--panel-2);
}
.ks-sec li[data-yok] kbd { color: var(--ks-sub); background: transparent; border-style: dashed; border-color: var(--ks-sub); border-bottom-width: 1px; }
/* Tus hucresi hep sagda. Iki kombinasyonlu satirda (⌘⇧[ ⌘⇧]) aralarinda bosluk; sigmazsa her biri kendi satirinda,
   saga dayali (kombinasyon bolunmez, ayirac yok). */
.ks-k { flex: 0 1 auto; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 4px 10px; max-width: 58%; }
.ks-combo { display: inline-flex; gap: 3px; white-space: nowrap; }
.ks-sheet kbd {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; box-sizing: border-box;
  font: 500 11.5px/1 "Geist Mono", ui-monospace, monospace; color: var(--text);
  border: 1px solid var(--ks-line); border-bottom-width: 2px; border-radius: 5px;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
}
/* ⌘ ⇧ ⌥: Geist Mono'da her biri yok; sistem yazisinda ayni sembol her genislikte ayni gorunsun. */
.ks-sheet kbd.ks-sym { font: 500 13px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Symbol", "DejaVu Sans", "Noto Sans Symbols 2", system-ui, sans-serif; }
.ks-x kbd { min-width: 0; height: 20px; font-size: 11px; color: var(--muted); font-weight: 400; }
/* Listenin sonundaki ince serit: normalde yalniz kucuk bir alt bosluk (alt cizgi icerige yakin kalir).
   Gercekten gorunmeyen satir varken (kisayol.js .ks-more) listenin alt kenarina yapisir, solma ve "↓ asagida daha var". */
.ks-more-hint {
  grid-column: 1 / -1; position: sticky; bottom: 0; height: 10px;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; pointer-events: none;
}
.ks-more-hint span { display: none; font-size: 12px; color: var(--ks-sub); }
.ks-sheet.ks-more .ks-more-hint { height: 30px; margin-top: -20px; background: linear-gradient(transparent, var(--panel) 60%); }
.ks-sheet.ks-more .ks-more-hint span { display: inline; }
.ks-foot { flex: none; padding: 10px 20px 12px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ks-sub); background: var(--panel); }
@container ks (min-width: 720px) {
  .ks-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ks-sec + .ks-sec { border-top: 0; }
  .ks-sec[data-grup="eski"] { border-left: 1px solid var(--line); margin-left: -14px; padding-left: 14px; }
}
/* Telefon: alttan acilan sayfa, ekranin en cok %88'i, sik satirlar. Tuslar her satirda sagda (uzun kombinasyon
   tus hucresinin icinde sarar), metin sutunu daralir. */
@container ks (max-width: 460px) {
  .ks-sheet { align-self: end; max-height: min(88dvh, 100%); border-radius: 14px; }
  .ks-head { padding: 12px 12px 8px 16px; }
  .ks-head h2 { font-size: 15px; }
  .ks-body { padding: 0 16px; }
  .ks-foot { padding: 8px 16px 10px; }
  .ks-sec { padding: 8px 0 4px; }
  .ks-note { margin-bottom: 2px; font-size: 12.5px; }
  .ks-sec li { min-height: 32px; padding: 4px 0; gap: 10px; }
  .ks-t small { font-size: 12.5px; }
  /* Birden cok kombinasyon: alt alta, saga dayali. */
  .ks-k { max-width: 52%; flex-direction: column; align-items: flex-end; gap: 4px; }
  .ks-sheet kbd { min-width: 20px; height: 20px; padding: 0 4px; font-size: 11px; }
  .ks-sheet kbd.ks-sym { font-size: 12px; }
  .ks-t small.ks-chip { font-size: 11px; line-height: 17px; padding: 0 6px; }
}
@media (max-width: 460px) { .ks-back { padding: 8px; } }
@media (prefers-reduced-motion: no-preference) {
  .ks-back { animation: ks-fade .14s ease-out; }
  .ks-sheet { animation: ks-pop .16s cubic-bezier(.2, .8, .3, 1); }
}
@keyframes ks-fade { from { opacity: 0; } }
@keyframes ks-pop { from { opacity: 0; transform: translateY(4px) scale(.985); } }