/* ═══════════════════════════════════════════════════════════════
   Monchiero — karşılaştırma sürgüsü (before/after slider)
   /assets/js/before-after.js ile birlikte çalışır.
   Kullanan sayfalar: index.php, hasat-karsilastirma.php
   ═══════════════════════════════════════════════════════════════ */

.ba-slider{
  position:relative;width:100%;aspect-ratio:16/9;
  overflow:hidden;border-radius:var(--r-lg);
  background:var(--c-bg-deep);
  box-shadow:var(--shadow-md);
  user-select:none;-webkit-user-select:none;
  touch-action:pan-y;                  /* dikey kaydırma sayfada kalsın */
  cursor:ew-resize;
  --ba-pos:50%;                        /* JS sürükledikçe günceller */
}
/* <picture> sarmalayıcısı yerleşimi etkilemesin */
.ba-slider picture{display:contents}
.ba-slider img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
  pointer-events:none;-webkit-user-drag:none;
}
/* Görsel yoksa gösterilen placeholder SVG kırpılmasın */
.ba-slider img.is-placeholder{object-fit:contain;background:#E8E4DA}

/* ── Etiketler ──
   Her etiket kendi tarafına kırpılmış bir katmanın içinde durur.
   Sürgü etiketin üzerinden geçtiğinde etiket resmin altında kalır;
   sürgü tamamen bir kenara götürüldüğünde yalnızca görünen resmin
   etiketi ekranda kalır. */
.ba-labels{position:absolute;inset:0;z-index:3;pointer-events:none}
.ba-labels--before{clip-path:inset(0 calc(100% - var(--ba-pos)) 0 0)}
.ba-labels--after {clip-path:inset(0 0 0 var(--ba-pos))}

.ba-label{
  position:absolute;top:14px;
  padding:.38em .8em;
  font-size:.72rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;
  background:rgba(10,75,47,.78);
  border-radius:999px;
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  white-space:nowrap;
}
.ba-label--before{left:14px}
.ba-label--after{right:14px}

.ba-line{
  position:absolute;top:0;bottom:0;left:50%;
  width:2px;margin-left:-1px;z-index:4;
  background:#fff;pointer-events:none;
  box-shadow:0 0 12px rgba(0,0,0,.4);
}
.ba-handle{
  position:absolute;top:50%;left:50%;z-index:5;
  width:52px;height:52px;margin:-26px 0 0 -26px;
  padding:0;border:0;border-radius:50%;
  background:#fff;color:var(--c-green-dk);
  display:grid;place-items:center;cursor:ew-resize;
  box-shadow:0 4px 18px rgba(10,75,47,.35);
  transition:transform .15s ease;
}
.ba-handle:hover{transform:scale(1.06)}
.ba-handle:focus-visible{outline:3px solid var(--c-yellow);outline-offset:3px}
.ba-handle svg{width:24px;height:24px;display:block}
.ba-slider.is-dragging .ba-handle{transform:scale(.96)}
.ba-slider.is-dragging{cursor:grabbing}

/* ── Başlık + açıklama bloğu ──
   Solda tek satır başlık, sağda kalan genişlikte açıklama. */
.ba-head{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(20px,3vw,44px);
  align-items:center;
  margin:0 0 clamp(14px,2vw,22px);
}
.ba-head h2{
  margin:0;
  font-size:clamp(1.3rem,2vw,1.75rem);
  line-height:1.2;
  white-space:nowrap;
}
.ba-head .ba-intro{
  max-width:none;margin:0;
  color:var(--c-text-soft);
  font-size:clamp(.92rem,1.1vw,1.02rem);
  line-height:1.55;
  text-wrap:pretty;
}
/* Gövde metni soft renkte; kalın vurgular tam kontrastta dursun. */
.ba-head .ba-intro strong{color:var(--c-text);font-weight:700}

/* ── Sürgü altı satırı ── */
.ba-caption{
  margin:.9em 0 0;font-size:.88rem;color:var(--c-muted);
  display:flex;flex-wrap:wrap;gap:.4em 1.2em;align-items:center;
}
.ba-caption .ba-hint{
  display:inline-flex;align-items:center;gap:.4em;
  font-weight:600;color:var(--c-green);
}

/* ── Alt alta gelen karşılaştırma blokları ── */
.ba-item + .ba-item{
  margin-top:clamp(44px,6vw,80px);
  padding-top:clamp(44px,6vw,80px);
  border-top:1px solid var(--c-line);
}

/* ── Yöntem karşılaştırma kutuları ── */
.ba-compare{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.5vw,28px);
  margin-top:clamp(28px,4vw,44px);
}
.ba-compare > div{
  background:#fff;border:1px solid var(--c-line);
  border-radius:var(--r-md);padding:clamp(18px,2.4vw,26px);
}
.ba-compare h3{margin:0 0 .6em;font-size:1.05rem}
.ba-compare ul{margin:0;padding-left:1.1em;color:var(--c-text-soft)}
.ba-compare li{margin-bottom:.45em}
.ba-compare li:last-child{margin-bottom:0}

@media (max-width:820px){
  .ba-head{grid-template-columns:1fr;gap:.7em;align-items:start}
  .ba-head h2{white-space:normal}
}
@media (max-width:760px){
  .ba-slider{aspect-ratio:4/3;border-radius:var(--r-md)}
  .ba-handle{width:44px;height:44px;margin:-22px 0 0 -22px}
  .ba-label{font-size:.64rem;top:10px}
  .ba-label--before{left:10px}
  .ba-label--after{right:10px}
}
@media (max-width:700px){
  .ba-compare{grid-template-columns:1fr}
}
@media print{
  .ba-handle,.ba-line{display:none}
}