/* ===========================
   ACF Event Now – Carousel CSS (final)
   =========================== */

/* ------- Vars & Layout ------- */
.aenl-carousel{
  --aenl-per: 4;      /* desktop */
  --aenl-gap: 16px;   /* kartlar arası boşluk (desktop) */
  position:relative;
  width:100%;
}

.aenl-viewport{
  overflow-x: hidden;   /* kaydırmada yatay taşmayı gizle */
  overflow-y: visible;  /* gölgeler kesilmesin */
  width:100%;
  padding-bottom:8px;   /* gölge payı */
  padding-left:16px;    /* stage padding */
  padding-right:16px;   /* stage padding */
}

.aenl-track{
  display:flex;
  gap:var(--aenl-gap);
  will-change:transform;
  transform:translateX(0);
  transition:transform 420ms ease;
  align-items:stretch; /* tüm kartlar aynı yükseklikte */
}

/* Kart genişliklerini gap’i hesaba katarak ayarla */
.aenl-card{
  flex:0 0 calc((100% - (var(--aenl-gap) * (var(--aenl-per) - 1))) / var(--aenl-per));
  max-width:calc((100% - (var(--aenl-gap) * (var(--aenl-per) - 1))) / var(--aenl-per));
  box-sizing:border-box;

  display:flex;            /* eşit yükseklik + dikey akış */
  flex-direction:column;

  position:relative;
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(15,23,42,.06);
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.1) blur(2px);
  box-shadow:0 10px 28px rgba(2,6,23,.09);
  transition:box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.aenl-card:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 38px rgba(2,6,23,.14);
  border-color:rgba(15,23,42,.12);
}

/* Canlı rozeti (sağ üst) */
.aenl-card > .aenl-badge{
  position:absolute; top:12px; right:12px; z-index:2;
  padding:7px 12px; border-radius:999px;
  font-weight:800; text-transform:uppercase; font-size:12px; letter-spacing:.2px;
  background:linear-gradient(180deg,#ff3b6b 0%, #ff1654 100%);
  color:#fff; box-shadow:0 8px 18px rgba(255,22,84,.35);
}

/* Görsel */
.aenl-media{
  aspect-ratio:16/9;
  background:rgba(0,0,0,.04);
  overflow:hidden;
}

.aenl-media img {
  width:100%;
  height:auto;
  object-fit:cover;
  display:block;
  border-top-left-radius:inherit;
  border-top-right-radius:inherit;
  object-position: center;
}


/* İçerik */
.aenl-body{ padding:16px 16px 18px; min-height:150px; }
.aenl-topic{
  margin:0 0 8px 0; font-size:20px; line-height:1.25; color:#0f172a;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.aenl-guest{ font-size:15px; color:#334155; margin-bottom:8px; }
.aenl-meta{ font-size:14px; color:#475569; display:flex; align-items:center; gap:10px; }
.aenl-sep{ opacity:.55; }
.aenl-time{ font-variant-numeric:tabular-nums; }

/* Boş durum */
.aenl-empty{
  padding:12px 14px;
  border-radius:12px;
  background:rgba(15,23,42,.06);
  color:#0f172a;
}

/* Koyu tema */
.dark .aenl-card{ background:rgba(15,23,42,.78); border-color:rgba(255,255,255,.08); }
.dark .aenl-topic{ color:#e2e8f0; }
.dark .aenl-guest,.dark .aenl-meta{ color:#cbd5e1; }

/* ------- Arrows ------- */
.aenl-prev, .aenl-next{
  position:absolute; top:calc(50% - 8px); transform:translateY(-50%);
  width:40px; height:40px;
  display:grid; place-items:center;
  background:rgba(15,23,42,.45);
  color:#fff; border:1px solid rgba(255,255,255,.35);
  border-radius:999px;
  cursor:pointer; z-index:20; line-height:1;
  box-shadow:0 8px 22px rgba(2,6,23,.22);
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
  backdrop-filter: blur(6px) saturate(1.1);
}
.aenl-prev{ left:6px; }
.aenl-next{ right:6px; }
.aenl-prev:hover,.aenl-next:hover{
  background:rgba(15,23,42,.65);
  transform:translateY(-50%) scale(1.04);
}

/* ------- Tablet (2 kart görünür) ------- */
@media (max-width: 1024px){
  .aenl-carousel{ --aenl-per: 2; --aenl-gap: 16px; }
  .aenl-viewport{ padding-left:14px; padding-right:14px; }
}

/* ------- Mobile (1 kart) ------- */
@media (max-width: 768px){
  .aenl-carousel{ --aenl-per: 1; --aenl-gap: 12px; }

  .aenl-viewport{
    overflow-x: hidden;
    overflow-y: visible;
    padding: 0 12px 10px; /* kenarlarda hafif stage padding */
  }
  .aenl-card{
    flex:0 0 100%;
    max-width:100%;
  }

  .aenl-topic{ font-size:18px; }
  .aenl-guest,.aenl-meta{ font-size:13px; }

  .aenl-prev{ left:4px; }
  .aenl-next{ right:4px; }
  .aenl-prev, .aenl-next{ width:36px; height:36px; box-shadow:0 4px 14px rgba(2,6,23,.22); }
}