/* =========================================================
   FlipCarousel — aktif kart büyük + ortada, GSAP Flip geçişli
   ========================================================= */

.fcarousel {
  position: relative;
  width: 100%;
}

/* ---- Stage: sahne kapsayıcısı (overflow:clip = no page scroll) ---- */
.fcarousel__stage {
  position: relative;
  overflow: clip;
  width: 100%;
  /* Yüksekliği en büyük karta göre otomatik; gerekirse sabit verilebilir */
  min-height: var(--fc-stage-h, 360px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Kart sarmalayıcı (Flip için konumlandırma) ---- */
.fcarousel__item-wrap {
  position: absolute;
  transition: none; /* GSAP Flip halleder */
  transform-origin: center center;
}

/* ---- Aktif / pasif görsel durum ---- */
.fcarousel__item-wrap[data-fc-active='true'] {
  z-index: 3;
}
.fcarousel__item-wrap[data-fc-active='false'] {
  z-index: 1;
}

/* İçerik scale görünümü CSS'te değil, GSAP'ta yapılır.
   Yalnızca opacity için CSS yardımcı kullan */
.fcarousel__item-wrap[data-fc-active='false'] {
  opacity: 0.5;
  filter: blur(1px);
}
.fcarousel__item-wrap[data-fc-active='true'] {
  opacity: 1;
  filter: none;
}

/* ---- Kontroller ---- */
.fcarousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4, 1rem);
  margin-top: var(--space-5, 1.5rem);
}

.fcarousel__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--color-line, #dfe6d8);
  background: var(--surface, #fff);
  color: var(--color-text, #16261b);
  cursor: pointer;
  transition: background var(--t-fast, 0.25s), border-color var(--t-fast, 0.25s),
    transform var(--t-fast, 0.25s);
  flex-shrink: 0;
}
.fcarousel__btn:hover {
  background: var(--color-blue, #2f7a3b);
  border-color: var(--color-blue, #2f7a3b);
  color: #fff;
  transform: scale(1.08);
}
.fcarousel__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}
.fcarousel__btn svg {
  width: 18px;
  height: 18px;
  pointer-events: none;
}

/* Dot göstergeler */
.fcarousel__dots {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fcarousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: var(--color-line, #dfe6d8);
  cursor: pointer;
  transition: background var(--t-fast, 0.25s), transform var(--t-fast, 0.25s),
    width var(--t-fast, 0.25s);
  padding: 0;
}
.fcarousel__dot--active {
  background: var(--color-blue, #2f7a3b);
  width: 22px;
  border-radius: 4px;
  transform: none;
}

/* ---- Mobil: tek kart + scroll-snap ---- */
.fcarousel--mobile .fcarousel__stage {
  overflow-x: auto;
  overflow-y: clip;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--space-4, 1rem);
  min-height: unset;
  padding: 0 var(--gutter, 1.1rem) var(--space-2, 0.5rem);
}
.fcarousel--mobile .fcarousel__stage::-webkit-scrollbar {
  display: none;
}
.fcarousel--mobile .fcarousel__item-wrap {
  position: relative;
  flex: 0 0 85vw;
  max-width: 360px;
  scroll-snap-align: center;
  opacity: 1;
  filter: none;
  z-index: auto;
  transform: none !important; /* GSAP transform'u sıfırla */
}

/* Reduced motion: geçişler olmadan */
@media (prefers-reduced-motion: reduce) {
  .fcarousel__item-wrap {
    transition: none !important;
    filter: none !important;
  }
  .fcarousel__btn {
    transition: none !important;
  }
}