/* ==========================================================================
   FUA Coverflow — ters perspektifli katalog rafı
   --------------------------------------------------------------------------
   Referans: 21st.dev/@ruixen.ui/coverflow-carousel.
   Klasik coverflow kartları arkaya katlar; buradaki raf İZLEYİCİYE AÇILIR:
   ortadaki kart düz durur, yanındakiler DIŞ kenarlarını öne sallar.
   rotateY işareti bu yüzden ofsetin tersi (-offset).

   Renkler index.html'deki token setinden gelir; burada hex yoktur.
   ========================================================================== */

.fua-cf {
  --cf-w: 300px;          /* kart genişliği */
  --cf-gap: 58%;          /* komşu kartın yatay ötelemesi */
  --cf-angle: 38deg;      /* dış kenar açısı */
  --cf-depth: 90px;       /* uzaklaşma */
  --cf-scale: .12;        /* her adımda küçülme */
  --cf-dur: 520ms;
  --cf-ease: cubic-bezier(.22, 1, .3, 1);

  position: relative;
  /* perspektif küçüldükçe efekt sertleşir; 1200px raf hissi verir */
  perspective: 1200px;
  perspective-origin: 50% 46%;
  padding-block: var(--space-4, 16px);
}

/* Raf: kartlar üst üste, transform ile dağılıyor. Grid/flex akışı yok —
   bu yüzden container'ın eski grid sınıfları JS tarafından kaldırılır. */
.fua-cf-track {
  position: relative;
  height: 340px;
  transform-style: preserve-3d;
  touch-action: pan-y;      /* dikey kaydırma sayfada kalsın */
  cursor: grab;
}

.fua-cf-track.is-dragging { cursor: grabbing; }

.fua-cf-track > * {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--cf-w);
  max-width: 78vw;
  margin: 0;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  will-change: transform, opacity;
  transition:
    transform var(--cf-dur) var(--cf-ease),
    opacity var(--cf-dur) var(--cf-ease),
    filter var(--cf-dur) var(--cf-ease);
}

/* Sürüklerken geçiş kapanır ki kart parmağa yapışsın. */
.fua-cf-track.is-dragging > * { transition: none; }

/* Merkezden uzaklaşan kartlar karartılır: derinlik hissi ışıkla verilir,
   gölgeyle değil. */
.fua-cf-track > [data-cf-off]:not([data-cf-off="0"]) {
  filter: brightness(.62) saturate(.85);
}

.fua-cf-track > [data-cf-off="0"] {
  filter: none;
}

/* Merkez dışındaki kartlar tıklanınca öne gelir; içindeki link tetiklenmez
   (JS tarafında engelleniyor), bu yüzden imleç işaret parmağı kalır. */
.fua-cf-track > *:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- Kontroller ---------------------------------------------- */

.fua-cf-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3, 12px);
  margin-top: var(--space-4, 16px);
}

.fua-cf-btn {
  position: relative;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--text);
  background: var(--accent-soft);
  border: 1px solid var(--border2);
  border-radius: var(--r-full, 999px);
  cursor: pointer;
  transition: background-color 140ms var(--ease, ease), border-color 140ms var(--ease, ease);
}

/* Görsel 40px, dokunma hedefi 44px+ */
.fua-cf-btn::after { content: ""; position: absolute; inset: -4px; }

.fua-cf-btn:hover:not(:disabled) {
  background: var(--bg3);
  border-color: var(--border-control);
}

.fua-cf-btn:disabled { opacity: .35; cursor: not-allowed; }

/* Nokta göstergeleri */
.fua-cf-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.fua-cf-dot {
  position: relative;
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--border2);
  cursor: pointer;
  transition: background-color 200ms var(--ease, ease), width 200ms var(--ease, ease);
}

.fua-cf-dot::after { content: ""; position: absolute; inset: -12px -4px; }

.fua-cf-dot[aria-current="true"] {
  width: 20px;
  background: var(--accent);
}

/* ---------- Altyazı: aktif kartla birlikte değişir ------------------- */

.fua-cf-caption {
  margin-top: var(--space-3, 12px);
  text-align: center;
  min-height: 2.6em;   /* değişince zıplamasın (CLS) */
}

.fua-cf-caption b {
  display: block;
  font-size: var(--fs-lg, 1.125rem);
  font-weight: 500;
  color: var(--text);
  letter-spacing: -.02em;
}

.fua-cf-caption span {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs, .75rem);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- Dar ekran ------------------------------------------------ */

@media (max-width: 640px) {
  .fua-cf { --cf-w: 258px; --cf-gap: 52%; --cf-angle: 32deg; }
  .fua-cf-track { height: 360px; }
}

/* ---------- Hareket azaltma ------------------------------------------
   3B dönüş vestibüler rahatsızlık yapabilir. Tercih varsa raf düz bir
   yatay listeye döner: efekt yok, işlev aynı. */
@media (prefers-reduced-motion: reduce) {
  .fua-cf { perspective: none; }
  .fua-cf-track { height: auto; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; }
  .fua-cf-track > * {
    position: static;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    transition: none;
    flex: 0 0 var(--cf-w);
    scroll-snap-align: center;
  }
}