:root {
  --bg: #f3f3f3; --bg-panel: #ffffff; --bg-viewer: #e4e4e4; --bg-hover: #e8e8e8; --bg-selected: #d6e6fa;
  --border: #d0d0d0; --fg: #1b1b1b; --fg-muted: #6b6b6b; --accent: #2b6cd9;
  --shadow: rgba(0,0,0,.19); --hl: rgba(255,213,74,.55); --hl-cur: rgba(255,138,61,.65); --sel: rgba(43,108,217,.35);
  --page-filter: none; --diff-del: rgba(255,82,82,.45); --diff-add: rgba(102,187,106,.45);
}
:root[data-theme="dark"] {
  --bg: #202020; --bg-panel: #2a2a2a; --bg-viewer: #161616; --bg-hover: #383838; --bg-selected: #2f4a72;
  --border: #3c3c3c; --fg: #eaeaea; --fg-muted: #9a9a9a; --accent: #5b9bff;
  --shadow: rgba(0,0,0,.5); --hl: rgba(224,176,0,.55); --hl-cur: rgba(255,138,61,.65); --sel: rgba(91,155,255,.4);
}
:root[data-theme="dark"][data-darkpages="1"] { --page-filter: invert(1) hue-rotate(180deg); }

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font: 13px/1.4 "Segoe UI", system-ui, -apple-system, sans-serif; color: var(--fg); background: var(--bg); overflow: hidden; }
button { font: inherit; color: inherit; }
.app { display: flex; flex-direction: column; height: 100%; }
.muted { color: var(--fg-muted); }
.small { font-size: 12px; }
.pad { padding: 12px; margin: 0; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[hidden] { display: none !important; }

/* araç çubuğu */
.toolbar { display: flex; align-items: center; gap: 12px; padding: 4px 8px; border-bottom: 1px solid var(--border); background: var(--bg); flex: none; }
.group { display: flex; align-items: center; gap: 2px; }
.group.right { margin-left: auto; }
.tb { background: transparent; border: 0; border-radius: 4px; min-width: 30px; height: 30px; padding: 4px 8px; font-size: 14px; cursor: pointer; }
.tb:hover { background: var(--bg-hover); }
.tb.active { background: var(--bg-selected); }
.tb.big { font-size: 18px; }
.tb.small { min-width: 24px; height: 24px; padding: 0 4px; font-size: 12px; }
.sep { width: 1px; height: 22px; background: var(--border); margin: 0 6px; }
.pagebox { width: 56px; text-align: center; margin: 0 2px 0 4px; }
.zoom { width: 48px; text-align: center; display: inline-block; }
input[type=text], input[type=password] { background: var(--bg-panel); color: var(--fg); border: 1px solid var(--border); border-radius: 4px; padding: 5px 6px; font: inherit; outline: none; }
input:focus { border-color: var(--accent); }
.search { position: relative; flex: 1; max-width: 420px; }
.search input { width: 100%; padding-left: 28px; padding-right: 28px; }
.search .icon { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--fg-muted); font-size: 12px; }
.search .tb { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); }

/* gövde */
.body { display: flex; flex: 1; min-height: 0; }
.sidebar { width: 240px; min-width: 120px; max-width: 50vw; display: flex; flex-direction: column; background: var(--bg-panel); flex: none; }
.sidebar.collapsed, .sidebar.collapsed + .splitter { display: none; }
.splitter { width: 4px; background: var(--border); cursor: col-resize; flex: none; }
.tabs { display: flex; background: var(--bg); flex: none; }
.tab { flex: 1; background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 7px 4px; color: var(--fg-muted); cursor: pointer; }
.tab:hover { color: var(--fg); }
.tab.active { color: var(--fg); border-bottom-color: var(--accent); }
.panel { display: none; flex: 1; min-height: 0; overflow: auto; }
.panel.active { display: block; }

/* küçük resimler */
.thumbs { padding: 6px 0; }
.thumb { margin: 6px auto; width: 150px; cursor: pointer; text-align: center; }
.thumb .box { position: relative; width: 150px; background: #fff; box-shadow: 2px 2px 0 var(--shadow); border: 2px solid transparent; }
.thumb.current .box { border-color: var(--accent); }
.thumb canvas { display: block; width: 100%; height: 100%; filter: var(--page-filter); }
.thumb .num { font-size: 11px; color: var(--fg-muted); margin-top: 3px; }

/* içindekiler */
.outline { padding: 6px 0; }
.outline .item { display: flex; align-items: flex-start; padding: 3px 8px 3px 0; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.outline .item:hover { background: var(--bg-hover); }
.outline .item .tg { width: 18px; flex: none; text-align: center; color: var(--fg-muted); font-size: 10px; }
.outline .item .tt { overflow: hidden; text-overflow: ellipsis; }
.outline .kids { display: none; }
.outline .open > .kids { display: block; }

/* sonuçlar */
.results .hit { padding: 6px 10px; cursor: pointer; border-bottom: 1px solid transparent; }
.results .hit:hover { background: var(--bg-hover); }
.results .hit.current { background: var(--bg-selected); }
.results .hit .head { display: flex; gap: 8px; align-items: baseline; }
.results .hit .pg { font-weight: 600; }
.results .hit .tier { font-size: 11px; color: var(--fg-muted); }
.results .hit .snip { color: var(--fg-muted); font-size: 12px; margin-top: 2px; }
.results .hit .snip b { color: var(--fg); font-weight: 600; }

/* görüntüleyici */
.viewer { position: relative; flex: 1; overflow: auto; background: var(--bg-viewer); outline: none; }
.pages { position: relative; }
.page { position: absolute; background: #fff; box-shadow: 2px 2px 0 var(--shadow); }
.page canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; filter: var(--page-filter); }
.page .hls { position: absolute; inset: 0; pointer-events: none; }
.page .hl { position: absolute; background: var(--hl); border-radius: 2px; }
.page.curhit .hl { background: var(--hl-cur); }
/* pdf.js 6 metin katmanı (resmi pdf_viewer.css kurallarının gerekli kısmı) */
.textLayer { position: absolute; text-align: initial; inset: 0; overflow: clip; opacity: 1; line-height: 1; letter-spacing: normal; word-spacing: normal; text-size-adjust: none; forced-color-adjust: none; transform-origin: 0 0; caret-color: CanvasText; z-index: 1; color-scheme: only light;
  --min-font-size: 1; --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size)); --min-font-size-inv: calc(1 / var(--min-font-size)); --scale-round-x: 1px; --scale-round-y: 1px; }
.textLayer :is(span, br) { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0% 0%; user-select: text; }
.textLayer > :not(.markedContent), .textLayer .markedContent span:not(.markedContent) { z-index: 1; --font-height: 0; font-size: calc(var(--text-scale-factor) * var(--font-height)); --scale-x: 1; --rotate: 0deg; transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv)); }
.textLayer .markedContent { display: contents; }
.textLayer span[role="img"] { user-select: none; cursor: default; }
.textLayer ::selection { background: var(--sel); color: transparent; }
.textLayer .endOfContent { display: block; position: absolute; inset: 100% 0 0; z-index: 0; cursor: default; user-select: none; }
.textLayer.selecting .endOfContent { top: 0; }
.empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: var(--bg-viewer); }
.empty .logo { width: 96px; height: 96px; border-radius: 22px; box-shadow: 0 8px 24px var(--shadow); }
.empty p { margin: 0; font-size: 15px; color: var(--fg-muted); }
.viewer.drag { outline: 3px dashed var(--accent); outline-offset: -6px; }
.btn { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 4px; padding: 6px 16px; cursor: pointer; }
.btn:hover { background: var(--bg-hover); }
.btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }

/* durum */
.status { display: flex; align-items: center; gap: 8px; padding: 3px 8px; border-top: 1px solid var(--border); flex: none; font-size: 12px; }
.status .right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
progress { width: 140px; height: 6px; }

/* menü ve modal */
.menu { position: fixed; z-index: 20; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 6px 20px var(--shadow); min-width: 200px; padding: 4px; }
.menu .mi { padding: 6px 10px; cursor: pointer; border-radius: 4px; display: flex; gap: 8px; align-items: center; }
.menu .mi:hover { background: var(--bg-hover); }
.menu .mi .chk { width: 14px; color: var(--accent); }
.menu .mh { padding: 6px 10px 2px; font-size: 11px; color: var(--fg-muted); text-transform: uppercase; }
.menu .ms { height: 1px; background: var(--border); margin: 4px 0; }
.modal { position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; }
.dialog { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 16px; width: 360px; max-width: 90vw; box-shadow: 0 10px 30px var(--shadow); }
.dialog p { margin: 0 0 10px; white-space: pre-line; }
.dialog input { width: 100%; margin-bottom: 10px; }
.dialog .buttons { display: flex; justify-content: flex-end; gap: 8px; }

@media (max-width: 720px) {
  .toolbar { flex-wrap: wrap; gap: 6px; }
  .search { order: 3; max-width: none; width: 100%; }
  .sidebar { position: absolute; z-index: 10; height: calc(100% - 80px); box-shadow: 4px 0 12px var(--shadow); }
}

/* yazdırma */
#printArea { display: none; }
.dialog progress { width: 100%; margin-bottom: 10px; }
@media print {
  @page { margin: 0; }
  body { overflow: visible; background: #fff; }
  .app { display: none !important; }
  #printArea { display: block; }
  #printArea .pp { page-break-after: always; break-after: page; display: flex; align-items: center; justify-content: center; width: 100vw; height: 100vh; overflow: hidden; }
  #printArea .pp:last-child { page-break-after: auto; break-after: auto; }
  #printArea canvas { max-width: 100%; max-height: 100%; object-fit: contain; }
}

/* karşılaştırma */
.viewers { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.viewerRow { display: flex; flex: 1; min-height: 0; }
.viewerRow .viewer { flex: 1; min-width: 0; }
.splitter.v { width: 4px; cursor: col-resize; }
.comparebar { display: flex; align-items: center; gap: 6px; padding: 4px 8px; background: var(--bg-panel); border-bottom: 1px solid var(--border); flex: none; }
.comparebar .grow { flex: 1; }
.comparebar progress { width: 140px; height: 6px; }
.page .dl { position: absolute; border-radius: 2px; pointer-events: none; }
.page .dl.del { background: var(--diff-del); }
.page .dl.add { background: var(--diff-add); }