/* === Amare Kategori Grid – Front styles === */
.acg-grid{
  /* Masaüstü varsayılan */
  --acg-cols: 3;
  --acg-gap: 16px;
  --acg-radius: 12px;
  --acg-ratio: 16/9;

  display: grid;
  grid-template-columns: repeat(var(--acg-cols), minmax(0,1fr));
  gap: var(--acg-gap);
}

/* Tablet ve küçük dizüstü: 2 sütun */
@media (max-width: 1024px){
  .acg-grid{ --acg-cols: 2; }
}

/* MOBİL: TEK SÜTUN (ALT ALTA) — kesin uygula */
@media (max-width: 768px){
  .acg-grid{
    --acg-cols: 1;
    /* Bazı temalarda attribute ile gelen columns değerini ezmek için: */
    grid-template-columns: 1fr !important;
  }
}

/* Kart */
.acg-card{
  position: relative;
  display: block;
  border-radius: var(--acg-radius);
  overflow: hidden;
  background: #111;
  text-decoration: none;
  color: #fff;
  isolation: isolate;
  min-height: 300px;
}

/* Arka plan görseli */
.acg-bg{ position:absolute; inset:0; z-index:0; }
.acg-bg img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* Oranı sabitle */
  aspect-ratio: var(--acg-ratio);
}

/* Alt karartma */
.acg-overlay{
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.0) 40%, rgba(0,0,0,.65) 85%);
}

/* Metinler */
.acg-bottom{
  position: absolute; left: 18px; right: 72px; bottom: 16px; z-index: 2;
  display: flex; flex-direction: column; gap: 6px;
}
.acg-title{
  font-family: var(--e-global-typography-primary-font-family, inherit);
  font-weight: 800;
  font-size: clamp(16px, .6vw + 16px, 22px);
  text-transform: uppercase;
  letter-spacing: .3px;
}
.acg-count{
  color: #f1c40f;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .3px;
}

/* Sağ alttaki buton */
.acg-cta{
  position: absolute; right: 16px; bottom: 12px; z-index: 2;
  width: 48px; height: 48px; border-radius: 999px;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(255,255,255,.25);
  transition: transform .15s ease, background .15s ease;
}
.acg-cta i{ font-size: 18px; }
.acg-card:hover .acg-cta{ transform: translateY(-2px); background: rgba(255,255,255,.2); }
.acg-card:active .acg-cta{ transform: translateY(0); }

/* Fallback mesaj */
.acg-empty{ color:#666; padding:12px; }