/* Crosshair yap (crosshair.html): solda yapışkan önizleme ve kodlar, sağda ayar grupları */
.cx-izgara { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 20px; align-items: stretch; margin-top: 28px; }
.cx-sol { min-width: 0; }
.cx-sahne { position: sticky; top: 84px; display: grid; gap: 0; overflow: hidden; }
.cx-tuval-kap { position: relative; aspect-ratio: 16 / 9; background: #0a0908; border-bottom: 1px solid var(--cizgi); overflow: hidden; cursor: crosshair; }
.cx-tuval-kap canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.cx-not { position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; background: rgba(7, 7, 7, .78); backdrop-filter: blur(6px);
  font: 600 13px/1.2 var(--f-arayuz); color: var(--sari); }
.cx-not[hidden] { display: none; }
.cx-not svg { width: 16px; height: 16px; }
.cx-ates { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border: 0; border-radius: 6px;
  background: rgba(7, 7, 7, .74); backdrop-filter: blur(6px); color: var(--krem); font: 700 14px/1 var(--f-baslik); text-transform: uppercase; letter-spacing: .03em; box-shadow: inset 0 0 0 1px var(--cizgi-2); transition: background .15s; }
.cx-ates:hover { background: rgba(227, 10, 23, .85); }
.cx-ates svg { width: 16px; height: 16px; color: var(--turuncu-2); transition: color .15s; }
.cx-ates:hover svg { color: #fff; }
html.hareket .cx-ates.vurdu svg { animation: cxTep .4s ease-out; }
@keyframes cxTep { 30% { transform: scale(1.35) rotate(-12deg); } }

.cx-cubuk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--cizgi); }
.cx-zeminler { display: flex; gap: 6px; margin-left: auto; }
.cx-zeminler button { width: 46px; height: 30px; border-radius: 6px; border: 2px solid transparent; background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px var(--cizgi-2); transition: border-color .15s, transform .15s; }
.cx-zeminler button:hover { transform: translateY(-2px); }
.cx-zeminler button[aria-checked="true"] { border-color: var(--krem); }

.cx-kodlar { display: grid; gap: 14px; padding: 16px; }
.cx-kod-satir { display: grid; gap: 7px; min-width: 0; }
.cx-kod-satir > small { font: 500 12.5px/1.4 var(--f-arayuz); color: var(--krem-3); }
.cx-kod-satir > small b { color: var(--krem-2); }
.cx-kod { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 6px 6px 12px; border-radius: 8px; background: rgba(0, 0, 0, .35); border: 1px solid var(--cizgi); }
.cx-kod code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 13px/1.4 ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--krem); transition: opacity .2s; }
.cx-kod code.konsol { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--krem-2); font-size: 12px; overflow-wrap: anywhere; }
.cx-kod code.bekliyor { opacity: .45; }
.cx-kod .dug { flex: none; }
kbd { display: inline-block; padding: 1px 6px; border-radius: 4px; background: rgba(247, 233, 213, .1); font: 600 11.5px/1.5 var(--f-arayuz); color: var(--krem-2); }
.cx-alt-dug { display: flex; gap: 8px; flex-wrap: wrap; }

/* sağ sütun */
.cx-sag { display: grid; gap: 14px; align-content: start; min-width: 0; }
.cx-sag > .kart { padding: 16px; }
.cx-grup-bas { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.cx-grup-bas svg { width: 18px; height: 18px; color: var(--turuncu-2); }
.cx-grup-bas b { font: 700 17px/1 var(--f-baslik); text-transform: uppercase; letter-spacing: .01em; }
.cx-grup-bas small { margin-left: auto; font: 600 11.5px/1 var(--f-arayuz); letter-spacing: .1em; text-transform: uppercase; color: var(--krem-3); }
.cx-yapistir p { margin: 0 0 10px; font-size: 14px; color: var(--krem-2); }
.cx-yapistir code { font: 500 12.5px/1 ui-monospace, Consolas, monospace; color: var(--krem); }
.cx-yapistir-sira { display: flex; gap: 8px; }
.cx-yapistir-sira .girdi { flex: 1; min-width: 0; height: 44px; font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.cx-hata { margin: 10px 0 0 !important; color: var(--kirmizi) !important; font-size: 13px !important; }
.cx-hata[hidden] { display: none; }

.cx-hazir-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cx-hazir-liste button { display: grid; justify-items: center; gap: 6px; padding: 10px 4px 9px; border-radius: 8px; border: 1px solid var(--cizgi); background: radial-gradient(circle at 50% 35%, #2b3a2c, #141912 70%);
  color: var(--krem-2); font: 600 12px/1.15 var(--f-arayuz); text-align: center; transition: border-color .15s, color .15s, transform .15s; }
.cx-hazir-liste button:hover { border-color: var(--krem-3); color: var(--krem); transform: translateY(-2px); }
.cx-hazir-liste canvas { width: 44px; height: 44px; image-rendering: pixelated; }

.cx-satir { display: grid; grid-template-columns: minmax(0, 1fr) 132px 60px; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--cizgi); }
.cx-grup-bas + .cx-satir, .cx-grup-bas + .cx-anahtar { border-top: 0; padding-top: 0; }
.cx-satir label { display: grid; gap: 2px; min-width: 0; }
.cx-satir label b, .cx-anahtar b, .cx-renk-ad b { font: 600 14px/1.2 var(--f-arayuz); }
.cx-satir label small, .cx-anahtar small { font: 500 12px/1.3 var(--f-arayuz); color: var(--krem-3); }
.cx-sayi { grid-column: 3; grid-row: 1; width: 60px; height: 32px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--cizgi-2); background: rgba(0, 0, 0, .3); color: var(--krem);
  font: 600 14px/1 var(--f-arayuz); font-variant-numeric: tabular-nums; text-align: right; }
.cx-sayi:focus { outline: none; border-color: var(--turuncu); }
.cx-kaydir { grid-column: 2; grid-row: 1; width: 100%; height: 22px; margin: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; }
.cx-kaydir::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--turuncu) var(--d, 0%), rgba(247, 233, 213, .12) var(--d, 0%)); }
.cx-kaydir::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--turuncu) var(--d, 0%), rgba(247, 233, 213, .12) var(--d, 0%)); }
.cx-kaydir::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%; background: var(--krem); border: 3px solid #1a1612; box-shadow: 0 2px 6px rgba(0, 0, 0, .5); transition: transform .12s; }
.cx-kaydir::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--krem); border: 3px solid #1a1612; }
.cx-kaydir:hover::-webkit-slider-thumb, .cx-kaydir:focus-visible::-webkit-slider-thumb { transform: scale(1.18); }

.cx-anahtar { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 12px; align-items: center; padding: 10px 0 2px; border-top: 1px solid var(--cizgi); cursor: pointer; }
.cx-anahtar input { position: absolute; opacity: 0; pointer-events: none; }
.cx-anahtar-ic { display: grid; gap: 2px; }
.cx-anahtar i { position: relative; width: 44px; height: 24px; border-radius: 999px; background: rgba(247, 233, 213, .14); transition: background .2s; }
.cx-anahtar i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--krem); transition: transform .2s cubic-bezier(.2, .8, .2, 1); }
.cx-anahtar input:checked + .cx-anahtar-ic + i { background: var(--yesil); }
.cx-anahtar input:checked + .cx-anahtar-ic + i::after { transform: translateX(20px); background: var(--murekkep); }
.cx-anahtar input:focus-visible + .cx-anahtar-ic + i { outline: 2px solid var(--turuncu-2); outline-offset: 2px; }

.cx-renk-satir { display: grid; grid-template-columns: minmax(0, 1fr) 40px 96px; gap: 8px 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--cizgi); }
.cx-grup-bas + .cx-renk-satir { border-top: 0; padding-top: 0; }
.cx-renk-kutu { position: relative; width: 40px; height: 34px; border-radius: 6px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--cizgi-2); }
.cx-renk-kutu input { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); border: 0; padding: 0; background: none; cursor: pointer; }
.cx-hex { height: 34px; padding: 0 8px; font: 600 13px/1 ui-monospace, Consolas, monospace; text-transform: uppercase; }
.cx-paletler { grid-column: 1 / -1; display: flex; gap: 6px; }
.cx-paletler button { width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(0, 0, 0, .5); background: var(--p); box-shadow: 0 0 0 1px var(--cizgi-2); transition: transform .15s, box-shadow .15s; }
.cx-paletler button:hover { transform: scale(1.1); }
.cx-paletler button.secili { box-shadow: 0 0 0 2px var(--krem); }

.cx-birebir-kap { display: grid; place-items: center; padding: 12px; border-radius: 8px; background: repeating-conic-gradient(#3b4a39 0 25%, #334131 0 50%) 0 0 / 16px 16px; }
.cx-birebir-kap img { width: 208px; height: 208px; object-fit: contain; image-rendering: pixelated; transition: opacity .2s; }
.cx-birebir-kap img.bekliyor { opacity: .4; }
.cx-aciklama { margin: 10px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--krem-3); }

@media (max-width: 1100px) {
  .cx-izgara { grid-template-columns: minmax(0, 1fr) 360px; }
}
@media (max-width: 900px) {
  .cx-izgara { grid-template-columns: minmax(0, 1fr); }
  .cx-sahne { position: relative; top: 0; }
  .cx-zeminler { margin-left: 0; }
}
@media (max-width: 520px) {
  .cx-satir { grid-template-columns: minmax(0, 1fr) 60px; gap: 4px 10px; }
  .cx-kaydir { grid-column: 1 / -1; grid-row: 2; }
  .cx-cubuk { padding: 10px 12px; }
  .cx-kodlar { padding: 12px; }
  .cx-kod { flex-wrap: wrap; }
  .cx-kod code { flex-basis: 100%; }
  .cx-hazir-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-renk-satir { grid-template-columns: minmax(0, 1fr) 40px 88px; }
}