/* ==========================================================================
   SİNEMATİK AURORA — Foto Katmanı (Faz 41.0)
   --------------------------------------------------------------------------
   Gerçek fotoğraflar (Pexels CDN) üzerine token-tabanlı derinlik: scrim
   (okunabilirlik karartması), tint (marka rengiyle tonlama), parallax,
   ken-burns hover-zoom, cursor-tilt. SABİT HEX YOK — hepsi var() üzerinden
   --primary-rgb'den türer → white-label + dark/light otomatik korunur.
   Yükleme sırası: tokens → style → components → components-v2 → BU DOSYA EN SON
   (tenant theme.css'ten önce).
   ========================================================================== */

/* ---- Medya kapsayıcı: her sinematik görsel bu sarmalda ---- */
.cine-media {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--surface-2);
  background-image: var(--aurora-mesh);
}
.cine-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--dur-slower, 520ms) var(--ease-out);
}
/* Görsel yüklenemezse (network/404) kırık-ikon yerine token gradient'e düş */
.cine-media img.cine-broken { display: none; }

/* ---- Scrim: fotoğraf üzerine okunabilirlik karartması (alttan yukarı) ---- */
.cine-scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--cinematic-scrim);
}
body.light-theme .cine-scrim::after { background: var(--cinematic-scrim-light); }

/* ---- Tint: marka rengiyle fotoğrafı tonlama (white-label uyumlu) ---- */
.cine-tint::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--aurora-soft);
  mix-blend-mode: overlay;
  opacity: .55;
}
body:not(.light-theme) .cine-tint::before { mix-blend-mode: soft-light; opacity: .7; }

/* İçerik scrim/tint'in üstünde kalsın. :where() ile SIFIR özgüllük — sayfa-özel
   .position/.z-index kuralları (örn. .stats-bubble{position:absolute}) HER ZAMAN
   kazanır, biz yalnız "hiç ayarlanmamışsa" devreye giren bir varsayılan sağlarız. */
.cine-media > :where(:not(img)) { position: relative; z-index: 2; }

/* ---- Ken Burns: hover'da yavaş zoom (yalnız transform, GPU-dostu) ----
   .cine-media gerekmez — herhangi bir img içeren karta bağımsız uygulanabilir. */
.cine-ken-burns { overflow: hidden; }
.cine-ken-burns img { transition: transform var(--dur-slower, 520ms) var(--ease-out); }
.cine-ken-burns:hover img,
.cine-ken-burns:focus-within img { transform: scale(1.08); }

/* ---- Parallax: scroll ile yavaş kayma (JS tarafından transform set edilir) ---- */
.cine-parallax img { will-change: transform; }

/* ---- Cursor-tilt: yalnız gerçek hover cihazlarda (JS tarafından class eklenir) ---- */
@media (hover: hover) and (pointer: fine) {
  .cine-tilt {
    transform-style: preserve-3d;
    transition: transform var(--dur-base) var(--ease-out);
  }
}

/* ---- Scroll-reveal (genişletilmiş stagger) ---- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slower, 520ms) var(--ease-emphasized-decel, var(--ease-out)),
              transform var(--dur-slower, 520ms) var(--ease-emphasized-decel, var(--ease-out));
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-stagger > * { transition-delay: calc(var(--reveal-i, 0) * 70ms); }

/* ---- Hover-depth: fotoğraflı kartlarda kaldırma + gölge büyütme ---- */
.cine-card {
  border-radius: var(--radius-lg, 1rem);
  box-shadow: var(--elev-card);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.cine-card:hover { transform: translateY(-4px); box-shadow: var(--elev-3); }

/* ---- Erişilebilirlik: hareket azaltma tercihi tüm sinematik efektleri kapatır ---- */
@media (prefers-reduced-motion: reduce) {
  .cine-media img,
  .cine-card,
  .reveal,
  .cine-tilt {
    transition: none !important;
    transform: none !important;
  }
  .cine-ken-burns:hover img,
  .cine-ken-burns:focus-within img { transform: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   AURORA SPECTRUM — uygulama (Faz 41.0 renk paleti güçlendirme)
   ========================================================================== */
.spectrum-gold   { color: var(--spectrum-gold-fg); background: var(--spectrum-gold-bg); border-color: var(--spectrum-gold-border); }
.spectrum-violet { color: var(--spectrum-violet-fg); background: var(--spectrum-violet-bg); border-color: var(--spectrum-violet-border); }
.spectrum-rose   { color: var(--spectrum-rose-fg); background: var(--spectrum-rose-bg); border-color: var(--spectrum-rose-border); }

.spectrum-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .7rem; border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: var(--weight-bold);
  border: 1px solid; letter-spacing: .01em;
}

/* ---- Display tipografi yardımcı sınıfı (Faz 41.0 logo↔tip uyumu) ---- */
.font-display {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  font-variation-settings: 'opsz' 36;
}
.text-display { font-size: var(--text-display); line-height: 1.02; font-weight: var(--weight-extra); }

/* ---- Mobil menü sinematik derinlik (Faz 41.0 — drawer/dock/tab-bar paylaşılan) ---- */
.cine-nav-glow {
  position: relative;
}
.cine-nav-glow::before {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  background: var(--aurora-gradient);
  opacity: 0; z-index: -1;
  filter: blur(10px);
  transition: opacity var(--dur-base) var(--ease-out);
}
.cine-nav-glow.is-active::before,
.cine-nav-glow:active::before { opacity: .5; }