/* Seçim bileşeni — sitenin tema değişkenlerini kullanır, yoksa varsayılanlar. */
.kr-rect-editor {
  --kr-accent: var(--accent, #6366F1);
  position: relative;
  display: inline-block;
  max-width: 100%;
  padding: 12px;            /* Kenardaki tutamaçlar kırpılmasın */
  overflow: hidden;         /* Karartma gölgesi bileşen dışına taşmasın */
  line-height: 0;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.kr-rect-editor__image { display: block; max-width: 100%; max-height: 70vh; width: auto; height: auto; }
.kr-rect-editor__layer { position: absolute; inset: 12px; cursor: crosshair; outline: none; }
.kr-rect-editor__layer:focus-visible { box-shadow: inset 0 0 0 2px var(--kr-accent); }
.kr-rect-editor.has-selection .kr-rect { box-shadow: 0 0 0 100vmax rgba(15, 23, 42, .6); }
.kr-rect {
  position: absolute;
  box-sizing: border-box;
  border: 1.5px solid #fff;
  outline: 1px solid rgba(0, 0, 0, .35);
  cursor: move;
  background:
    linear-gradient(to right, transparent calc(33.33% - .5px), rgba(255,255,255,.35) calc(33.33% - .5px), rgba(255,255,255,.35) calc(33.33% + .5px), transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), rgba(255,255,255,.35) calc(66.66% - .5px), rgba(255,255,255,.35) calc(66.66% + .5px), transparent calc(66.66% + .5px)),
    linear-gradient(to bottom, transparent calc(33.33% - .5px), rgba(255,255,255,.35) calc(33.33% - .5px), rgba(255,255,255,.35) calc(33.33% + .5px), transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), rgba(255,255,255,.35) calc(66.66% - .5px), rgba(255,255,255,.35) calc(66.66% + .5px), transparent calc(66.66% + .5px));
}
.kr-rect-editor[data-mode="multi"] .kr-rect { background: rgba(99, 102, 241, .22); }
.kr-rect.is-active { border-color: var(--kr-accent); outline-color: rgba(255,255,255,.8); }
.kr-rect:focus-visible { outline: 3px solid var(--kr-accent); outline-offset: 2px; }
.kr-rect__handle {
  position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  background: #fff; border: 2px solid var(--kr-accent); border-radius: 50%;
}
.kr-rect__handle--nw { left: 0; top: 0; cursor: nwse-resize; }
.kr-rect__handle--n  { left: 50%; top: 0; cursor: ns-resize; }
.kr-rect__handle--ne { left: 100%; top: 0; cursor: nesw-resize; }
.kr-rect__handle--e  { left: 100%; top: 50%; cursor: ew-resize; }
.kr-rect__handle--se { left: 100%; top: 100%; cursor: nwse-resize; }
.kr-rect__handle--s  { left: 50%; top: 100%; cursor: ns-resize; }
.kr-rect__handle--sw { left: 0; top: 100%; cursor: nesw-resize; }
.kr-rect__handle--w  { left: 0; top: 50%; cursor: ew-resize; }
.kr-rect-editor[data-mode="multi"] .kr-rect:not(.is-active) .kr-rect__handle { display: none; }
.kr-rect__remove {
  position: absolute; right: -10px; top: -10px; width: 22px; height: 22px; line-height: 20px;
  border-radius: 50%; border: 0; background: #F87171; color: #fff; font-size: 16px; cursor: pointer; padding: 0;
}
@media (pointer: coarse) {
  .kr-rect__handle { width: 24px; height: 24px; margin: -12px 0 0 -12px; }
}
.kr-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }