/* Hero arka planı – açık/koyu temayla uyumlu */
.ba-hero{
  background: color-mix(in oklab, var(--bg) 88%, white 12%);
  border-bottom: 1px solid var(--border);
}
.theme-dark .ba-hero{
  background: color-mix(in oklab, var(--bg) 92%, black 8%);
}

.eyebrow{
  font-size:.85rem; letter-spacing:.12em; text-transform:uppercase;
  color: var(--muted); margin-bottom:.4rem; display:block;
}
.ba-title{
  font-size: clamp(1.8rem, 2.6vw, 2.6rem);
  font-weight: 700;
}
.ba-lede{
  margin-top:.5rem; color: var(--muted); max-width: 48ch;
}

/* Grid */
.ba-grid{
  display:grid; gap:1.25rem;
  grid-template-columns: 1fr;
}
@media(min-width:768px){
  .ba-grid{ grid-template-columns: 1fr 1fr; }
}

/* Kart */
.ba-card{
  background: var(--card);
  border:1px solid var(--border);
  border-radius:1rem;
  overflow:hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
.ba-card:hover{
  border-color: color-mix(in oklab, var(--accent) 20%, var(--border) 80%);
  box-shadow: 0 12px 24px rgba(0,0,0,.12);
  transform: translateY(-2px);
}

/* Görsel alanı */
.ba-wrap{
  position:relative;
  width:100%;
  aspect-ratio: 16/10;
  background: #000;
  --pos: 50%;
  overflow: clip;
}
.ba-img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  user-select:none; -webkit-user-drag:none;
}
.ba-before{ z-index:1; }
.ba-after{
  z-index:2;
  /* soldan sağa doğru görünür kısmı ayarla: right inset = 100%-pos */
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

/* Orta çizgi (divider) */
.ba-wrap::before{
  content:"";
  position:absolute; inset:0;
  width:2px; left:var(--pos);
  transform: translateX(-1px);
  background: color-mix(in oklab, var(--accent) 70%, white 30%);
  z-index:3; pointer-events:none;
}

/* Label rozetleri */
.ba-wrap::after,
.ba-wrap .ba-label-before{
  position:absolute; z-index:4; pointer-events:none;
}
.ba-wrap::after{
  content: attr(data-label-after);
  top:.6rem; right:.6rem;
  font-size:.75rem; padding:.25rem .5rem; border-radius:.5rem;
  background: color-mix(in oklab, var(--accent) 22%, var(--card) 78%);
  color: var(--accentText);
  border:1px solid color-mix(in oklab, var(--accent) 40%, var(--border) 60%);
}
.ba-label-before{
  left:.6rem; top:.6rem;
  font-size:.75rem; padding:.25rem .5rem; border-radius:.5rem;
  background: color-mix(in oklab, var(--bg) 75%, white 25%);
  color: var(--text); border:1px solid var(--border);
}
.theme-dark .ba-label-before{
  background: color-mix(in oklab, var(--bg) 85%, black 15%);
}

/* Tutacak (handle) */
.ba-handle{
  position:absolute; top:0; bottom:0;
  left:var(--pos);
  transform: translateX(-50%);
  width:42px; border:0; background: transparent; cursor: ew-resize;
  z-index:5; outline:none;
}
.ba-grip{
  position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);
  width:42px; height:42px; border-radius:999px;
  background: rgba(0,0,0,.15);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border:1px solid rgba(255,255,255,.5);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  display:grid; place-items:center;
}
.ba-grip::before{
  content:"\f337"; /* fa-left-right */
  font: var(--fa-font-solid);
  color:#fff; font-size:16px; opacity:.9;
}
.ba-handle:focus-visible .ba-grip{
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 50%, transparent);
}

/* Altyazı */
.ba-caption{
  padding: .9rem 1rem 1.1rem;
}
.ba-caption h3{
  font-weight:600; font-size:1.05rem; line-height:1.25;
}
.ba-caption p{
  margin-top:.35rem; color: var(--muted);
}

/* “Öncesi” rozeti DOM’a eklemek için küçük yardımcı */
.ba-wrap { position:relative; }
.ba-wrap::marker{ display:none; } /* (no-op; bazı tarayıcılar için güvenli) */