/* mark.css (2026-09-26): PDF İmzala / PDF Karartma — the page stage (js/pdf-mark.js), its boxes and the signature
   dialog. Linked only on pdf_mark.html; checkboxes / text field reuse pdf-pass.css (.ck, .pw). */
@font-face { font-family: "Caveat"; font-weight: 500; font-display: swap; src: url("../fonts/caveat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Caveat"; font-weight: 500; font-display: swap; src: url("../fonts/caveat-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Great Vibes"; font-display: swap; src: url("../fonts/greatvibes-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Great Vibes"; font-display: swap; src: url("../fonts/greatvibes-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }

/* ---------------- side panel ---------------- */
.mk-side { display: grid; gap: 12px; }
.mk-prev { display: grid; place-items: center; min-height: 84px; padding: 10px; border: 1px solid var(--rule);
  background: #fff linear-gradient(transparent calc(100% - 22px), var(--rule) calc(100% - 22px), var(--rule) calc(100% - 21px), transparent calc(100% - 21px)); }
.mk-prev img { max-width: 100%; max-height: 72px; object-fit: contain; }
.mk-auto .ck__o { min-height: 40px; }
.mk-err { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 12px; background: var(--ink); color: var(--paper); font-size: 15px; font-weight: 520; line-height: 1.4; }
.mk-err::before { content: ""; width: 8px; height: 8px; flex: none; margin-top: 6px; background: var(--signal-lt); }

/* ---------------- page stage ---------------- */
.mk { display: grid; gap: 10px; margin-top: 14px; }
.mk-hint { margin: 0; font-size: var(--t-meta); line-height: 1.45; color: var(--ink-2); }
.mk-bar { display: flex; align-items: center; gap: 8px; }
.mk-nav { width: 36px; height: 32px; display: grid; place-items: center; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); font: inherit; font-size: 18px; line-height: 1; cursor: pointer; }
.mk-nav:hover:not(:disabled) { border-color: var(--ink); }
.mk-nav:focus-visible { outline: 2px solid var(--signal-strong); outline-offset: 1px; }
.mk-nav:disabled { opacity: .35; cursor: default; }
.mk-pn { margin: 0; min-width: 7ch; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; }
.mk-cnt { margin: 0 0 0 auto; font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.mk-load, .mk-note { margin: 0; font-size: var(--t-meta); color: var(--ink-2); }
.mk-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.mk-stage { display: flex; justify-content: center; padding: 14px; background: var(--paper-2); border: 1px solid var(--rule); }
.mk-page { position: relative; max-width: 100%; background: #fff; box-shadow: 0 1px 0 var(--rule), 0 8px 24px -14px rgba(0, 0, 0, .35); }
.mk-page canvas { display: block; width: 100%; height: 100%; }
.mk-ov { position: absolute; inset: 0; cursor: crosshair; touch-action: none; }
.mk-ov:focus-visible { outline: 2px solid var(--signal-strong); outline-offset: 3px; }
[data-mode="sign"] .mk-ov, .mk-ov:has(.mk-b--sig) { cursor: copy; touch-action: manipulation; }

/* a box: black = what will be removed (redact), the signature image (sign) */
.mk-b { position: absolute; box-sizing: border-box; cursor: move; touch-action: none; user-select: none; -webkit-user-select: none;
  background: rgba(10, 10, 10, .86); outline: 1px solid rgba(255, 255, 255, .5); outline-offset: -2px; }
.mk-b.is-new { background: rgba(10, 10, 10, .55); outline: 1px dashed #fff; }
.mk-b:focus-visible, .mk-b:hover { outline: 2px solid var(--signal-strong); outline-offset: 1px; }
.mk-b--sig { background: transparent; outline: 1px dashed rgba(31, 79, 214, .55); outline-offset: 0; }
.mk-b--sig img { display: block; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.mk-b__x { position: absolute; top: -11px; right: -11px; width: 22px; height: 22px; display: grid; place-items: center; padding: 0; border: 0;
  background: var(--ink); color: var(--paper); font: 600 15px/1 var(--f-mono); cursor: pointer; opacity: 0; transition: opacity .2s var(--e-out); }
.mk-b__h { position: absolute; right: -6px; bottom: -6px; width: 12px; height: 12px; background: var(--paper); border: 2px solid var(--signal-strong); cursor: nwse-resize; opacity: 0; transition: opacity .2s var(--e-out); }
.mk-b:hover .mk-b__x, .mk-b:focus-within .mk-b__x, .mk-b:hover .mk-b__h, .mk-b:focus-within .mk-b__h { opacity: 1; }
.mk-b__x:focus-visible { outline: 2px solid var(--signal-strong); outline-offset: 1px; opacity: 1; }
@media (hover: none) { .mk-b__x, .mk-b__h { opacity: 1; } .mk-b__h { width: 18px; height: 18px; right: -9px; bottom: -9px; } .mk-b__x { width: 26px; height: 26px; top: -13px; right: -13px; } }
.mk-g { position: absolute; pointer-events: none; outline: 1px dashed rgba(31, 79, 214, .5); opacity: .45; }
.mk-g img { display: block; width: 100%; height: 100%; }

/* ---------------- signature dialog ---------------- */
.sg-open { overflow: hidden; }
.sg { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(12, 12, 14, .55); --sg-ink: #111; }
.sg__card { width: min(640px, 100%); max-height: calc(100dvh - 32px); overflow: auto; display: grid; gap: 14px; padding: 18px 20px 20px; background: var(--paper); color: var(--ink); border: 1px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); }
[dir="rtl"] .sg__card { box-shadow: -8px 8px 0 var(--ink); }
.sg__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sg__h { margin: 0; font-size: 20px; font-weight: 640; letter-spacing: -.01em; }
.sg__x { width: 36px; height: 36px; border: 1px solid var(--rule); background: transparent; color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; }
.sg__x:hover { border-color: var(--ink); }
.sg__tabs { display: flex; border-bottom: 1px solid var(--rule); }
.sg__tab { flex: 1; min-height: 42px; padding: 0 10px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; color: var(--ink-2);
  font: 500 12.5px/1.2 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.sg__tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.sg__tab:focus-visible, .sg__x:focus-visible, .sg__clear:focus-visible { outline: 2px solid var(--signal-strong); outline-offset: -2px; }
.sg__p { display: grid; gap: 8px; }
.sg__pad { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; max-width: 100%; touch-action: none; cursor: crosshair; border: 1px solid var(--rule);
  background: #fff linear-gradient(transparent 72%, #d9dbe2 72%, #d9dbe2 calc(72% + 1px), transparent calc(72% + 1px)); }
.sg__pad--img { aspect-ratio: auto; max-height: 220px; object-fit: contain; cursor: default;
  background: repeating-conic-gradient(#eceef2 0 25%, #fff 0 50%) 0 0 / 16px 16px; }
.sg__hint { margin: 0; font-size: var(--t-meta); color: var(--ink-2); }
.sg__name { width: 100%; min-height: 50px; padding: 10px 14px; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); font-size: 18px; box-sizing: border-box; }
.sg__name:focus { outline: none; box-shadow: 4px 4px 0 var(--ink); }
.sg__fonts { display: grid; gap: 6px; }
.sg__font { position: relative; display: flex; align-items: center; min-height: 64px; padding: 4px 16px; border: 1px solid var(--rule); background: #fff; color: var(--sg-ink); cursor: pointer; overflow: hidden; }
.sg__font input { position: absolute; opacity: 0; }
.sg__font span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
.sg__font:has(input:checked) { border-color: var(--ink); box-shadow: inset 3px 0 0 var(--ink); }
[dir="rtl"] .sg__font:has(input:checked) { box-shadow: inset -3px 0 0 var(--ink); }
.sg__font:has(input:focus-visible) { outline: 2px solid var(--signal-strong); outline-offset: 1px; }
.sg__font--a span { font: 500 36px Caveat, "Segoe Script", cursive; }
.sg__font--b span { font: 400 36px "Great Vibes", "Brush Script MT", cursive; }
.sg__font--c span { font: italic 400 30px Georgia, "Times New Roman", serif; }
.sg__up { justify-self: start; cursor: pointer; }
.sg__up:has(input:focus-visible) { outline: 2px solid var(--signal-strong); outline-offset: 2px; }
.sg__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sg__colors { display: flex; gap: 8px; }
.sg__c { position: relative; cursor: pointer; }
.sg__c input { position: absolute; opacity: 0; }
.sg__sw { display: block; width: 26px; height: 26px; border: 2px solid var(--paper); outline: 1px solid var(--rule); }
.sg__sw--black { background: #111; } .sg__sw--navy { background: #1b2a6b; } .sg__sw--blue { background: #1f4fd6; }
.sg__c input:checked + .sg__sw { outline: 2px solid var(--ink); }
.sg__c input:focus-visible + .sg__sw { outline: 2px solid var(--signal-strong); outline-offset: 2px; }
.sg__clear { border: 0; background: none; padding: 6px 0; color: var(--ink-2); font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sg__clear:hover { color: var(--ink); }
.sg__err { margin: 0; padding: 8px 12px; background: var(--ink); color: var(--paper); font-size: 14.5px; font-weight: 520; }
.sg__act { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
@media (max-width: 719.98px) {
  .mk-stage { padding: 8px; }
  .sg { padding: 0; place-items: end stretch; }
  .sg__card { width: 100%; max-height: 94dvh; box-shadow: none; border-width: 1px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
  .sg__act .btn { flex: 1; }
}
.still .mk-b__x, .reduce .mk-b__x, .still .mk-b__h, .reduce .mk-b__h { transition: none; }