/*
  card-stack.css — "Sahneler": yelpaze biçiminde açılan kart destesi.

  Bir React bileşeninden (framer-motion + Tailwind) PORT EDİLDİ; kütüphane
  kurulmadı, mekanizma saf CSS/JS'e taşındı (bkz. CLAUDE.md → sıfır bağımlılık).
  Karşılıklar:

    framer `motion.div` + spring   →  CSS transition + yay benzeri eğri
    `useReducedMotion()`           →  @media (prefers-reduced-motion)
    Tailwind sınıfları             →  site token'ları (--paper, --sand, --ink…)
    `drag="x"` + dragElastic       →  pointer olayları (bkz. js/card-stack.js)

  Geometri JS'ten CSS değişkenleriyle geliyor: her kart kendi `--x`, `--y`,
  `--rz`, `--rx`, `--z`, `--s` değerini alır. Böylece JS yalnızca SAYI üretir,
  görsel karar burada kalır — değerleri değiştirmek için JS'e dokunmak
  gerekmez.
*/

.fan {
  background: var(--paper);
  padding: var(--section-y) var(--sp-4);
  overflow: hidden;          /* yelpazenin uçları sayfayı yatay kaydırmasın */
}

.fan__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  text-align: center;
}

/* ---------- Başlık: üç satırlık tipografik kompozisyon ----------
   "Sahneler" + iki satır açıklama yerine üç kademe: en büyük söz (ANLAR),
   ortada vurgu (Burada, aynı ailenin italiği — başka aileden vurgu
   amatörlük olurdu) ve en altta fısıltı gibi bir alt metin. Kademeler
   arasında bilinçli nefes var; sıkışık üç satır tek blob gibi okunurdu. */
.fan__head {
  margin-block-end: var(--sp-8);
}

.fan__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  margin: 0;
}

.fan__title-big {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.8rem, 7vw, 4.6rem);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

.fan__title-mid {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  line-height: 1.15;
  color: var(--accent-deep, var(--brass-deep));
}

/* Arapçada büyük harf / harf aralığı / italik diye bir şey yok — üçü de
   Latin'e özgü süsler ve Cairo'da bozuk görünür. */
:lang(ar) .fan__title-big {
  font-family: var(--font-arabic);
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.25;
}

:lang(ar) .fan__title-mid {
  font-family: var(--font-arabic);
  font-style: normal;
}

.fan__sub {
  margin: var(--sp-3) auto 0;
  color: var(--ink-soft);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.6;
}

:lang(ar) .fan__sub {
  letter-spacing: normal;
  text-transform: none;
  font-size: 1rem;
}

/* ---------- Sahne ---------- */
.fan__stage {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* Kart yüksekliği + kalkma payı + gölge alanı */
  height: calc(var(--fan-h) + 90px);
  perspective: 1100px;
  touch-action: pan-y;       /* dikey sayfa kaydırması bizde kalmasın */
}

.fan__stage:focus-visible {
  outline: 2px solid var(--accent, var(--brass));
  outline-offset: 6px;
  border-radius: 12px;
}

/* Zemindeki yumuşak ışık — kartların "havada durduğu" hissini veren tek şey.
   Kartların ARKASINDA, tıklamayı engellemez. */
.fan__stage::after {
  content: "";
  position: absolute;
  inset-inline: 12%;
  inset-block-end: 6px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    color-mix(in srgb, var(--ink) 20%, transparent) 0%, transparent 70%);
  filter: blur(26px);
  pointer-events: none;
  z-index: 0;
}

/* ---------- Kart ---------- */
.fan__card {
  position: absolute;
  inset-block-end: 0;
  width: var(--fan-w);
  height: var(--fan-h);
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--stone);
  border: 1px solid var(--sand);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--ink) 22%, transparent);
  transform-style: preserve-3d;
  will-change: transform;
  cursor: pointer;
  /* Yay benzeri eğri: framer'ın stiffness 280 / damping 28 ayarının görsel
     karşılığı — sonunda hafif bir aşma var, sert değil. */
  transition:
    transform 0.55s cubic-bezier(0.34, 1.28, 0.44, 1),
    opacity 0.35s ease,
    box-shadow 0.4s ease;
  transform:
    translate3d(var(--x, 0px), var(--y, 0px), var(--z, 0px))
    rotateX(var(--rx, 0deg))
    rotate(var(--rz, 0deg))
    scale(var(--s, 1));
}

/* Görünürlük penceresi dışındaki kartlar: DOM'da kalır ama görünmez ve
   tıklanamaz. Kaldırmak yerine soldurmak, dizinin sırasını bozmadan
   yumuşak giriş/çıkış sağlıyor. */
.fan__card[data-uzak="1"] {
  opacity: 0;
  pointer-events: none;
}

.fan__card.is-active {
  cursor: grab;
  box-shadow: 0 30px 60px color-mix(in srgb, var(--ink) 30%, transparent);
}

.fan__card.is-active:active {
  cursor: grabbing;
}

/* Sürükleme sırasında geçiş kapanır, kart parmağa yapışsın. */
.fan__card.is-dragging {
  transition: none;
}

.fan__card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

/* Metnin okunması için alttan yukarı koyu geçiş. */
.fan__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top,
    rgba(18, 17, 15, 0.62) 0%,
    rgba(18, 17, 15, 0.22) 34%,
    rgba(18, 17, 15, 0) 60%);
  pointer-events: none;
}

.fan__body {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 2;
  padding: var(--sp-3);
  /* Tek bir etiket kaldı: sola yaslı dururken sağında geniş bir boşluk
     bırakıyordu. Ortalanınca kartla dengeleniyor. */
  text-align: center;
  /* Fotoğrafın üstünde duruyor: renk temadan bağımsız açık olmalı. */
  color: var(--on-photo);
}

/* Kartın TEK metni. Önce üstte başlık + iki satır açıklama vardı; fotoğrafın
   üstünde üç katman metin hem okunmuyor hem de kartı ağırlaştırıyordu
   (kullanıcı geri bildirimi: "yazılar gereksiz uzun"). Şimdi tek bir
   açıklayıcı isim var, o yüzden etiket küçük bir rozet değil KART BAŞLIĞI:
   büyük harf ve geniş harf aralığı kalktı — "Doğum Günü Kutlaması" versal
   yazıldığında hapa sığmıyordu. */
.fan__tag {
  display: inline-block;
  padding: 0.45em 1em;
  border: 1px solid rgba(251, 248, 243, 0.45);
  border-radius: 999px;
  background: rgba(18, 17, 15, 0.28);
  backdrop-filter: blur(3px);
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.2;
}

:lang(ar) .fan__tag {
  font-family: var(--font-arabic);
  font-size: 1.05rem;
}

/* ---------- Noktalar ---------- */
.fan__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-block-start: var(--sp-6);
}

.fan__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 26%, transparent);
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}

.fan__dot:hover {
  background: color-mix(in srgb, var(--ink) 45%, transparent);
}

.fan__dot[aria-current="true"] {
  background: var(--accent-deep, var(--brass-deep));
  transform: scale(1.35);
}

/* ---------- Ölçüler ----------
   Kart boyutu tek yerden; JS bunu okuyup aralığı hesaplıyor. */
.fan {
  --fan-w: 460px;
  --fan-h: 290px;
}

@media (max-width: 900px) {
  .fan { --fan-w: 380px; --fan-h: 250px; }
}

@media (max-width: 620px) {
  .fan {
    --fan-w: min(78vw, 320px);
    --fan-h: 220px;
  }
  .fan__tag { font-size: 1rem; padding: 0.4em 0.85em; }
}

/* ---------- Azaltılmış hareket ----------
   Yelpaze, derinlik ve otomatik ilerleme tamamen kalkar. Kartlar yan yana
   dizilir ve parmakla kaydırılır — içerik erişilebilir kalır, hareket
   kullanıcının kendi kontrolünde olur. */
@media (prefers-reduced-motion: reduce) {
  .fan__stage {
    height: auto;
    perspective: none;
    display: flex;
    gap: var(--sp-3);
    overflow-x: auto;
    padding-block-end: var(--sp-2);
    scroll-snap-type: x mandatory;
  }

  .fan__stage::after { display: none; }

  .fan__card {
    position: relative;
    inset-block-end: auto;
    flex: none;
    transform: none;
    transition: none;
    opacity: 1;
    scroll-snap-align: center;
  }

  .fan__card[data-uzak="1"] {
    opacity: 1;
    pointer-events: auto;
  }
}