/* gorsel.css (W2, sig_png + img_fit): the two on-device image editors in the chosen-file state and their side options.
   İmza / logo → PNG: before / after canvas with a comparison line, rotate / crop bar, the result on a checkerboard.
   Kırpmadan sığdır: photo strip, the frame canvas (drag / zoom, WhatsApp circle), ratio / fill / margin / format.
   Builds on tool.css + local.css (seg, lfield, lcheck, lnote, lfacts). Radius 0–6 px, the site's tokens only. */

/* ---------- shared: the transparency checkerboard (fixed light squares: a dark signature must stay visible) ---------- */
.sg__res, .fit__res { margin: 0 0 14px; background: #fff; box-shadow: 5px 5px 0 var(--ink); }
.sg__res { max-width: 320px; padding: 10px;
  background-color: #fff; background-image: linear-gradient(45deg, #e3e3df 25%, transparent 25%, transparent 75%, #e3e3df 75%), linear-gradient(45deg, #e3e3df 25%, transparent 25%, transparent 75%, #e3e3df 75%);
  background-size: 16px 16px; background-position: 0 0, 8px 8px; }
[dir="rtl"] .sg__res, [dir="rtl"] .fit__res { box-shadow: -5px 5px 0 var(--ink); }
.sg__res img, .fit__res img { display: block; width: 100%; height: auto; }
.fit__res { max-width: 240px; }
.sg__also { margin-top: 12px; }
.sg__also a { color: var(--ink); font-weight: 600; }

/* ---------- İmza / logo editor ---------- */
.sg { display: grid; gap: 12px; min-width: 0; border: 1px solid var(--ink); background: var(--paper); padding-bottom: 12px; }
.sg__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--ink); min-width: 0; }
[dir="rtl"] .sg__bar { padding: 8px 14px 8px 8px; }
.sg__fn { font-size: var(--t-meta); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sg__acts { display: flex; gap: 6px; flex: none; }
.sg__b { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 1px solid var(--ink); border-radius: var(--r-1); font-size: 14px; font-weight: 560; background: var(--paper); color: var(--ink); transition: background-color .3s var(--e-out), color .3s var(--e-out); }
.sg__b:hover:not([disabled]), .sg__b[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.sg__b[hidden] { display: none; }
.sg__x { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--rule); border-radius: var(--r-1); }
.sg__x:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.sg__x .ico { width: 16px; height: 16px; }
.sg__x span:empty { display: none; }
.sg__view { position: relative; margin: 0 12px; min-height: 180px; background: var(--paper-3); overflow: hidden; }
.sg__cv { display: block; width: 100%; touch-action: none; cursor: ew-resize; }
.sg[data-crop] .sg__cv { cursor: move; }
.sg__cv:focus-visible { outline: 2px solid var(--signal-strong); outline-offset: -2px; }
.sg__tag { position: absolute; top: 8px; padding: 3px 7px; font: 600 11.5px/1.2 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; background: var(--ink); color: var(--paper); pointer-events: none; }
html[lang="ar"] .sg__tag, html[lang="ja"] .sg__tag { text-transform: none; letter-spacing: 0; }
.sg__tag--a { left: 8px; }
.sg__tag--b { right: 8px; background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.sg[data-crop] .sg__tag, .sg:not([data-st="ok"]) .sg__tag { display: none; }
.sg__view[data-busy]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--ok); }
.motion .sg__view[data-busy]::after { animation: sgBusy .9s var(--e-io) infinite alternate; transform-origin: left; }
@keyframes sgBusy { from { transform: scaleX(.15); } to { transform: scaleX(1); } }
.sg__st, .fit__st { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; text-align: center; font-size: 15px; font-weight: 560; background: var(--paper-2); }
.sg[data-st="err"] .sg__st, .fit[data-st="err"] .fit__st { color: var(--signal-ink); }
.sg__st a, .fit__st a { color: var(--ink); font-weight: 600; }
.motion .sg[data-st="busy"] .sg__st, .motion .fit[data-st="busy"] .fit__st { animation: sgPulse 1.2s var(--e-io) infinite alternate; }
@keyframes sgPulse { to { background: var(--paper-3); } }
.sg__split { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; margin: 0 12px; }
.sg__split input { width: 100%; min-height: 44px; accent-color: var(--ink); }
.sg[data-crop] .sg__split { visibility: hidden; }
.sg__stat, .sg__hint { margin: 0 12px; }
.sg__stat:empty { display: none; }
.sg__stat + .sg__hint[hidden] { display: none; }

/* side options */
.gs__grp { display: grid; gap: 10px; min-width: 0; }
.gs__grp[hidden] { display: none; }
.gs__rng { gap: 4px; }
.gs__rng .lfield__l { display: flex; justify-content: space-between; gap: 8px; }
.gs__rng input { width: 100%; min-height: 36px; accent-color: var(--ink); }
.gs__ends { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--ink-3); }
.gs__ink .seg__row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gs__ink .seg__o { gap: 5px; }
.gs__dot { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 1px var(--paper), 0 0 0 2px var(--rule); }
.gs__dot--orig { background: linear-gradient(135deg, #1a46c4 50%, #b8342a 50%); }   /* the photo's own ink colour */
.gs__dot--black { background: #141416; } .gs__dot--navy { background: #16245e; } .gs__dot--blue { background: #1a46c4; }
.gs__ink .seg__n { font-size: 13.5px; }
.gs__bg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.gs__sw { width: 22px; height: 22px; border: 1px solid var(--ink); border-radius: var(--r-1); background: #fff; }
.gs__bgr { font-size: 14px; }
.gs__legal { margin: 4px 0 0; border-inline-start-color: var(--ink); }

/* ---------- Kırpmadan sığdır editor ---------- */
.fit { display: grid; gap: 12px; min-width: 0; border: 1px solid var(--ink); background: var(--paper); padding-bottom: 12px; }
.fit__strip { display: flex; gap: 8px; padding: 8px; margin: 0; list-style: none; overflow-x: auto; border-bottom: 1px solid var(--ink); scrollbar-width: thin; }
.fit__li { position: relative; flex: none; }
.fit__th { display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 1px solid var(--rule); border-radius: var(--r-1); background: var(--paper-2); overflow: hidden; }
.fit__th canvas { display: block; max-width: 44px; max-height: 44px; }
.fit__th[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.fit__li[data-st="err"] .fit__th { border-color: var(--signal-strong); }
.fit__li[data-st="busy"] .fit__th { opacity: .5; }
.fit__x { position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 50%; background: var(--paper); }
[dir="rtl"] .fit__x { right: auto; left: -6px; }
.fit__x .ico { width: 12px; height: 12px; }
.fit__x::before { content: ""; position: absolute; inset: -10px; }   /* 44 px touch target */
.fit__x:hover { background: var(--ink); color: var(--paper); }
.fit__add { width: 56px; height: 56px; display: grid; place-items: center; border: 1px dashed var(--ink); border-radius: var(--r-1); background: var(--paper); }
.fit__add:hover { background: var(--ink); color: var(--paper); border-style: solid; }
.fit__add .ico { width: 18px; height: 18px; }
.fit__view { position: relative; margin: 0 12px; min-height: 200px; background: var(--paper-3); overflow: hidden; }
.fit__cv { display: block; width: 100%; touch-action: none; cursor: grab; }
.fit__cv:active { cursor: grabbing; }
.fit__cv:focus-visible { outline: 2px solid var(--signal-strong); outline-offset: -2px; }
.fit__ctl { display: flex; align-items: center; gap: 12px; margin: 0 12px; }
.fit__zoom { flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-width: 0; }
.fit__zoom input { width: 100%; min-height: 44px; accent-color: var(--ink); }
.fit__zoom output { min-width: 5ch; text-align: end; }
.fit__hint { margin: 0 12px; }

.gf__ratio .seg__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gf__ratio .seg__o:nth-child(n+4) { border-top: 1px solid var(--ink); }
.gf__ratio .seg__o:nth-child(4) { border-inline-start: 0; }
.gf__bg .seg__row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gf__bg .seg__n { font-size: 13.5px; }
.gf__custom { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 8px; }
.gf__custom[hidden], .gf__color[hidden], .gf__sug[hidden] { display: none; }
.gf__x { padding-bottom: 12px; font: 600 18px/1 var(--f-mono); }
.gf__color { display: grid; gap: 10px; }
.gf__pick { grid-template-columns: minmax(0, 1fr) 64px; align-items: center; }
.gf__ci { width: 64px; height: 44px; padding: 2px; border: 1px solid var(--ink); border-radius: var(--r-1); background: var(--paper); }
.gf__sug { display: grid; gap: 6px; }
.fit__sws { display: flex; flex-wrap: wrap; gap: 8px; }
.fit__sw { width: 44px; height: 44px; border: 1px solid var(--ink); border-radius: var(--r-1); transition: transform .3s var(--e-out); }
.fit__sw:hover { transform: translateY(-2px); box-shadow: 0 2px 0 var(--ink); }

@media (max-width: 719.98px) {
  .sg__bar { padding-inline-start: 10px; }
  .sg__b { padding: 0 10px; }
  .sg__view, .fit__view, .sg__split, .sg__stat, .sg__hint, .fit__ctl, .fit__hint { margin-inline: 10px; }
  .gf__bg .seg__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gf__bg .seg__o:nth-child(n+3) { border-top: 1px solid var(--ink); }
  .gf__bg .seg__o:nth-child(3) { border-inline-start: 0; }
  .gs__ink .seg__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gs__ink .seg__o:nth-child(n+3) { border-top: 1px solid var(--ink); }
  .gs__ink .seg__o:nth-child(3) { border-inline-start: 0; }
  .sg__res { max-width: 220px; }
  .fit__res { max-width: 180px; }
}