/* Önce/sonra karşılaştırma bileşeni. Tema değişkenleri yoksa nötr varsayılanlar. */
.apc { --apc-ink: var(--ink, #142338); --apc-muted: var(--muted, #5d6c82); --apc-line: var(--line, #dce5f0); --apc-surface: var(--surface, #fff); --apc-accent: var(--brand, #1b5faa); --apc-warn-bg: #fff4e0; --apc-warn: #8a5300;
  color: var(--apc-ink); display: flex; flex-direction: column; gap: 10px; }
html[data-theme="dark"] .apc { --apc-warn-bg: rgba(255,190,90,.14); --apc-warn: #ffcf8f; }
.apc-bar { display: flex; flex-wrap: wrap; gap: 6px; }
.apc-bar button, .apc-fade-ctl button, .apc-align button, .apc-assess button { min-height: 44px; padding: 0 14px; border: 1px solid var(--apc-line); border-radius: 10px; background: var(--apc-surface); color: var(--apc-ink); font: inherit; font-weight: 600; cursor: pointer; }
.apc-bar button.on, .apc-bar button[aria-pressed="true"], .apc-fade-ctl button[aria-pressed="true"] { border-color: var(--apc-accent); color: var(--apc-accent); box-shadow: inset 0 0 0 1px var(--apc-accent); }
.apc button:focus-visible, .apc input:focus-visible, .apc select:focus-visible, .apc-handle:focus-visible { outline: 3px solid var(--apc-accent); outline-offset: 2px; }
.apc-fs { margin-left: auto; }
.apc-warn { margin: 0; padding: 8px 12px 8px 28px; border-radius: 10px; background: var(--apc-warn-bg); color: var(--apc-warn); font-size: 13.5px; }
/* Sahne: iki görüntü aynı kutu, aynı ölçü → sürgü sırasında zıplama yok. */
.apc-stage { position: relative; width: 100%; aspect-ratio: 4 / 5; max-height: 72vh; overflow: hidden; border-radius: 12px; background: #0f1419; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.apc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform-origin: 50% 50%; pointer-events: none; }
.apc-clip { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.apc-handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 44px; margin-left: -22px; display: flex; align-items: center; justify-content: center; cursor: ew-resize; touch-action: none; }
.apc-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.35); }
.apc-handle span { position: relative; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: #142338; display: flex; align-items: center; justify-content: center; font-weight: 700; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.apc-tag { position: absolute; top: 10px; padding: 4px 9px; border-radius: 8px; background: rgba(15,20,25,.72); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .04em; line-height: 1.25; }
.apc-tag small { display: block; font-weight: 500; letter-spacing: 0; opacity: .9; }
.apc-tag.l { left: 10px; } .apc-tag.r { right: 10px; text-align: right; }
.apc-metas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.apc-meta { font-size: 13px; color: var(--apc-muted); }
.apc-meta b { color: var(--apc-ink); }
.apc-side { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.apc-side figure { margin: 0; }
@media (max-width: 640px) { .apc-side { grid-template-columns: 1fr; } }
.apc-fade-top { position: absolute; inset: 0; transition: opacity .32s ease; }
.apc-fade.nomotion .apc-fade-top { transition: none; }
@media (prefers-reduced-motion: reduce) { .apc-fade-top { transition: none; } }
.apc-fade-ctl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.apc-fade-ctl label { flex: 1 1 160px; display: flex; }
.apc-fade-ctl input[type=range] { width: 100%; min-height: 44px; }
.apc-strip { list-style: none; margin: 0; padding: 0 0 6px; display: flex; gap: 8px; overflow-x: auto; }
.apc-strip button { position: relative; width: 104px; min-height: 44px; padding: 4px; border: 2px solid var(--apc-line); border-radius: 10px; background: var(--apc-surface); color: var(--apc-ink); cursor: pointer; font: inherit; font-size: 11.5px; text-align: left; }
.apc-strip button.a { border-color: var(--apc-accent); } .apc-strip button.b { border-color: #1f8a4c; }
.apc-strip img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; display: block; }
.apc-strip i { position: absolute; top: 6px; left: 6px; font-style: normal; font-weight: 700; background: #fff; color: #142338; border-radius: 6px; padding: 1px 6px; }
.apc-hint { margin: 0; font-size: 13px; color: var(--apc-muted); }
.apc-empty { padding: 30px 12px; text-align: center; color: var(--apc-muted); border: 1px dashed var(--apc-line); border-radius: 12px; }
.apc-align summary { cursor: pointer; font-weight: 600; min-height: 32px; }
.apc-align-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px 14px; align-items: end; margin-top: 8px; }
.apc-align-g label, .apc-assess label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--apc-muted); }
.apc-assess { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.apc-assess label { flex: 1 1 200px; }
.apc-assess select, .apc-assess input, .apc-align select { min-height: 40px; }
.apc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.apc:fullscreen, .apc.apc-full { background: var(--apc-surface); padding: 16px; overflow: auto; }
.apc.apc-full { position: fixed; inset: 0; z-index: 3000; }
.apc:fullscreen .apc-stage, .apc.apc-full .apc-stage { max-height: 80vh; }