/*
  SİNEMATİK KATMAN — sekiz demonun ortak hareket dili.

  ⚠️ NEDEN AYRI DOSYA: demo.css yapıyı kuruyor, burası yalnız zamanı kuruyor.
  Ayrı durunca hareket tek satırla kapatılabiliyor (link'i sil) ve bir demoda
  düzen bozulursa suçlunun hangisi olduğu belli oluyor.

  ⚠️ HER ŞEY prefers-reduced-motion İLE KAPANIR. Dosyanın en altındaki blok
  bütün animasyonları iptal ediyor ve son durumu (görünür hâli) veriyor —
  "hareketi kapat" demek "içeriği gizle" demek değildir.

  ⚠️ BAŞLANGIÇ DURUMU JS'E BAĞLI: gövdeye .mv sınıfı eklenmeden hiçbir şey
  gizlenmiyor. JS çalışmazsa sayfa hareketsiz ama TAM görünür kalır; aksi
  hâlde betik hata verse içerik ekranda hiç belirmezdi.
*/

/* ── Açılış perdesi ─────────────────────────────────────────────── */
.mv-perde {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  background: var(--bg);
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.05s cubic-bezier(0.76, 0, 0.24, 1);
  pointer-events: none;
}
.mv-perde b {
  font: 900 clamp(28px, 6vw, 64px) / 1 Arial, Helvetica, sans-serif;
  letter-spacing: 0.22em;
  color: var(--ink);
  opacity: 0;
  transform: translateY(14px);
  animation: mv-marka 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}
@keyframes mv-marka { to { opacity: 1; transform: none; } }
.mv-perde.mv-ac { clip-path: inset(0 0 100% 0); }

/* ── İlerleme çizgisi ───────────────────────────────────────────── */
.mv-ilerleme {
  position: fixed;
  left: 0; top: 0;
  z-index: 120;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--accent);
  will-change: transform;
}

/* ── İmleç halkası (yalnız hassas işaretleyicide) ───────────────── */
.mv-imlec {
  position: fixed;
  left: 0; top: 0;
  z-index: 200;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: difference;
  transition: width .28s, height .28s, margin .28s, opacity .3s, background-color .28s;
  will-change: transform;
}
.mv-imlec.mv-var { opacity: .55; }
.mv-imlec.mv-buyu {
  width: 64px; height: 64px; margin: -32px 0 0 -32px;
  background: var(--ink); opacity: .18;
}

/* ── Satır maskesi: başlıklar aşağıdan yükselir ─────────────────── */
.mv .mv-satir { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.mv .mv-satir > i {
  display: block;
  font-style: inherit;
  transform: translateY(112%);
  transition: transform 1.05s cubic-bezier(0.16, 1, 0.3, 1);
}
.mv .gorunur > .mv-satir > i,
.mv .mv-satir.gorunur > i { transform: none; }

/* ── Genel beliriş ──────────────────────────────────────────────── */
.mv [data-mv] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .85s cubic-bezier(0.16, 1, 0.3, 1), transform .85s cubic-bezier(0.16, 1, 0.3, 1);
}
.mv [data-mv].gorunur { opacity: 1; transform: none; }

/* Kartlar: perde açılır gibi kırpılarak gelir */
.mv [data-mv="kart"] {
  clip-path: inset(0 0 14% 0 round 2px);
  transition: opacity .9s cubic-bezier(0.16, 1, 0.3, 1), transform .9s cubic-bezier(0.16, 1, 0.3, 1), clip-path .9s cubic-bezier(0.16, 1, 0.3, 1);
}
.mv [data-mv="kart"].gorunur { clip-path: inset(0 0 0 0 round 2px); }

/* Kart görseli: kırpma açılırken hafifçe geri çekilir — sinematik an */
.mv .product-visual img,
.mv .feature-media img { transform: scale(1.14); transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1); }
.mv .gorunur .product-visual img,
.mv .gorunur img,
.mv .product-card.gorunur .product-visual img { transform: scale(1); }

/* Öne çıkan bölüm görseli: soldan sağa silinerek açılır.

   ⚠️ PERDE `clip-path` DEĞİL, KAYAN BİR `::after` KATMANI. Öğenin kendi
   clip-path'i IntersectionObserver'ın kesişim hesabına giriyor: sıfır
   genişliğe kırpılan öğe hiç "görünür" sayılmıyor → gözlemci tetiklenmiyor
   → `gorunur` eklenmiyor → kırpma hiç açılmıyor. Kendi kendini kilitleyen
   döngü. Sekiz demoda da bu bölüm bomboş kalmıştı ve fark edilmemişti,
   çünkü hiçbir yerde hata çıkmıyor. Bir daha gözlenen öğenin KENDİSİNİ
   sıfıra kırpma; perdeyi ayrı bir katmana ver.                          */
.mv .feature-media { position: relative; overflow: hidden; }
.mv .feature-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--stage);
  pointer-events: none; /* altındaki kaydırıcı sürüklenebilir kalsın */
  transition: transform 1.25s cubic-bezier(0.76, 0, 0.24, 1);
}
.mv .feature-media.gorunur::after { transform: translateX(101%); }

/* ── Düğme mıknatısı ────────────────────────────────────────────── */
.mv .button { transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1), background-color .2s, color .2s, border-color .2s; }

/* ── Ürün kartı eğilmesi ──────────────────────────────────────────
   ⚠️ `pointer: fine` ŞART. Eğilmenin kendisi zaten yalnız farede çalışıyor
   (motion.js), ama bu iki özellik her cihazda uygulanıyordu: telefonda her
   ürün kartı kalıcı bir GPU katmanına çıkıyor, hiç kullanılmayacak bir
   efekt için bellek ve bileşikleme maliyeti ödeniyordu. Kataloğunda on iki
   kart olan demoda on iki katman. */
@media (pointer: fine) {
  .mv .product-card { transform-style: preserve-3d; will-change: transform; }
}

/* ── Hero: görsel yavaşça yerleşir, içerik kademeli girer ───────── */
/* ⚠️ Kalıcı katman yalnız farede: telefonda hero görseli artık yalnız
   kaydırırken hareket ediyor, sürekli promosyon boşa bellek. */
@media (pointer: fine) {
  .mv .hero-visual > img { will-change: transform; }
}
.mv .hero-copy > * { opacity: 0; transform: translateY(22px); }
.mv .hero-copy > *.gorunur { opacity: 1; transform: none; transition: opacity .9s cubic-bezier(0.16, 1, 0.3, 1), transform .9s cubic-bezier(0.16, 1, 0.3, 1); }
.mv .hero-copy > h1 { opacity: 1; transform: none; }

.mv .visual-card { opacity: 0; transform: translateY(24px) scale(.98); transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) .5s, transform 1s cubic-bezier(0.16, 1, 0.3, 1) .5s; }
.mv .visual-card.gorunur { opacity: 1; transform: none; }

/* ── Sayaç: güven şeridi rakamları ──────────────────────────────── */
.mv .trust-item { opacity: 0; transform: translateY(18px); transition: opacity .8s cubic-bezier(0.16, 1, 0.3, 1), transform .8s cubic-bezier(0.16, 1, 0.3, 1); }
.mv .trust-item.gorunur { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .mv-perde, .mv-imlec, .mv-ilerleme { display: none !important; }
  .mv .mv-satir > i,
  .mv [data-mv],
  .mv .hero-copy > *,
  .mv .visual-card,
  .mv .trust-item,
  .mv .product-visual img,
  .mv .feature-media img {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .mv .feature-media { clip-path: none !important; }
  .mv .feature-media::after { display: none !important; }
}

/* ═══ İMZA ANLARI (imza.js) ═══════════════════════════════════════
   ⚠️ Bu blok prefers-reduced-motion'ın ÜSTÜNDE değil ALTINDA: yukarıdaki
   iptal kuralları yalnız hareketi kapatıyor, buradaki düzen her hâlükârda
   gerekli — kısık kipte de yakın plan açılır, kaydırıcı çalışır.        */

/* Yakın plan */
body.im-acik { overflow: hidden; }
.im-kapak {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: clamp(14px, 4vw, 54px);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
}
.im-cerceve {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(14px, 3vw, 34px);
  align-items: center;
  width: min(1180px, 100%);
  max-height: 100%;
}
.im-cerceve > img {
  width: 100%;
  max-height: min(76vh, 720px);
  object-fit: cover;
  border-radius: 4px;
  box-shadow: var(--shadow);
}
.im-bilgi { min-width: 0; }
.im-bilgi small { font: 750 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.im-bilgi strong { display: block; margin-top: 12px; font-family: Georgia, serif; font-weight: 400; font-size: clamp(28px, 4.4vw, 52px); line-height: 1.02; }
.im-bilgi b { display: block; margin-top: 14px; font-size: 20px; color: var(--accent); }
.im-bilgi p { margin: 16px 0 0; color: var(--muted); line-height: 1.65; font-size: 15px; }
.im-kapat {
  position: absolute;
  right: clamp(10px, 3vw, 26px);
  top: clamp(10px, 3vw, 26px);
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
/* Pencere açılınca odak buraya taşınıyor (klavye ve ekran okuyucu için
   şart). Tarayıcının mavi halkası markanın dışında kalıyordu; halka
   duruyor ama demonun kendi rengiyle. */
.im-kapat:focus { outline: none; }
.im-kapat:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.mv [data-card] .product-visual { cursor: zoom-in; }

/* Önce / sonra kaydırıcısı */
.im-karsilastir {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  border: 1px solid var(--line);
  touch-action: pan-y;
  cursor: ew-resize;
  user-select: none;
}
.im-karsilastir img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; }
.im-karsilastir .im-ust { position: absolute; inset: 0; }
.im-karsilastir .im-tutamak {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--accent);
  cursor: ew-resize;
}
.im-karsilastir .im-tutamak::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 52px; height: 52px;
  margin: -26px 0 0 -26px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow);
}
/* Odak göstergesi ince 2px çubuğun değil, tutamak halkasının etrafında:
   tarayıcının kendi çerçevesi tam boy dikey bir kutu çiziyordu. */
.im-karsilastir .im-tutamak:focus { outline: none; }
.im-karsilastir .im-tutamak:focus-visible::after { outline: 3px solid var(--ink); outline-offset: 3px; }
.im-etiket {
  position: absolute;
  bottom: 14px;
  z-index: 2;
  padding: 7px 13px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  font: 750 10px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
}
.im-etiket.sol { left: 14px; }
.im-etiket.sag { right: 14px; }

/* Karşılaştırma etiketleri de mikro etiket ailesinden: dokunmatikte 11px. */
@media (pointer: coarse) {
  .im-etiket { font-size: 11px; }
}

@media (max-width: 860px) {
  .im-cerceve { grid-template-columns: 1fr; align-content: start; overflow-y: auto; gap: 18px; }
  .im-cerceve > img { max-height: 46vh; }
  .im-kapat { width: 46px; height: 46px; }
}