/* Öncə/sonra müqayisə slayderi — partials/components/compare.html.twig + assets/js/compare.js.
   Port: turkan shafiyeva final_claude public/css/custom.css:546-565 (teal → brend tokenləri, brand.css).
   Siçan: basıb sürüklə. Toxunuş: üfüqi sürükləmə açır, şaquli sürüşdürmə səhifəni aparır (touch-action: pan-y).
   Tutacaq 44px-lik görünməz toxunuş sahəsidir (WCAG 2.5.8), xətt ::before ilə çəkilir. */
.compare-card { margin: 0; }
.compare {
  --pos: 50%;
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius, 20px);
  background: var(--brand-soft, #D4D2F8);
  box-shadow: var(--shadow, 0 10px 30px rgba(30, 29, 92, 0.08));
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: ew-resize;
}
.compare-pane { position: absolute; inset: 0; }
.compare-pane img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; }
.compare-after { z-index: 1; }
.compare-before { z-index: 2; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }

.compare-label {
  position: absolute; top: 12px; z-index: 4;
  padding: 3px 12px; border-radius: var(--radius-pill, 50px);
  font-size: 13px; font-weight: 600; line-height: 1.5; pointer-events: none;
}
.compare-label-left { left: 12px; background: rgba(255, 255, 255, 0.92); color: var(--ink, #1E1D5C); }
.compare-label-right { right: 12px; background: var(--brand, #5352E7); color: #fff; }

.compare-handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 3;
  width: 44px; transform: translateX(-50%);
  cursor: ew-resize; outline: none;
  -webkit-tap-highlight-color: transparent;
}
.compare-handle::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px;
  transform: translateX(-1px); background: #fff; box-shadow: 0 0 0 1px rgba(30, 29, 92, 0.12);
}
.compare-grip {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--brand, #5352E7); color: #fff; border: 2px solid #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(30, 29, 92, 0.3);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.compare-grip .si { width: 20px; height: 20px; }
.compare-handle:hover .compare-grip { transform: translate(-50%, -50%) scale(1.06); }
/* Fokus halqası — yalnız klaviatura ilə (siçan klikində də fokus alır, amma halqa göstərilmir). */
.compare-handle:focus-visible .compare-grip {
  outline: 3px solid var(--accent-2, #FF8A1F);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.85), 0 2px 10px rgba(30, 29, 92, 0.3);
}

/* Klik/klaviatura keçidi (JS `is-animating`); sürükləmə zamanı ani. */
.compare.is-animating .compare-before { transition: clip-path 220ms ease; }
.compare.is-animating .compare-handle { transition: left 220ms ease; }
@media (prefers-reduced-motion: reduce) {
  .compare.is-animating .compare-before,
  .compare.is-animating .compare-handle,
  .compare-grip { transition: none; }
}

.compare-caption { margin-top: 12px; text-align: center; color: var(--ink, #1E1D5C); font-size: 15px; }