/* ============================================================
   Cloud UI Kit — Mobil Menü Paneli: zemin + açılış/kapanış animasyonu

   Flatsome/Cloud teması mobil menüyü Magnific Popup ile açar:
     .mfp-bg.off-canvas(-right|-left|-center)   → arka perde
     .mfp-wrap.off-canvas… > .mfp-container > .mfp-content  → panel
   Tema panelin açılışını `.mfp-ready`, kapanışını `.mfp-removing`
   sınıfıyla işaretler — biz de animasyonu bu iki duruma bağlıyoruz.
   Böylece JS zamanlaması gerekmez, tema kendi akışını sürdürür.

   TEK KAYNAK KURALI:
   Her stil yalnızca CSS değişkeni tanımlar (--cui-mm-from/to/op/…).
   Uygulama kuralları hem frontend (body.cui-mm) hem admin önizlemesi
   (.cui-mm-preview) için aynı değişkenleri okur; stil tanımı iki yerde
   tekrarlanmaz.
   ============================================================ */

/* ------------------------------------------------------------
   1) STİL TANIMLARI — sadece değişken (her yerde kullanılabilir)
   --cui-mm-sign : panel sağdan mı (1) soldan mı (-1) geliyor
   ------------------------------------------------------------ */
.cui-mm-anim-slide {
  --cui-mm-from: translateX(calc(105% * var(--cui-mm-sign, 1)));
  --cui-mm-op: 1;
  --cui-mm-ease: cubic-bezier(.4, 0, .2, 1);
}
.cui-mm-anim-elastic {
  --cui-mm-from: translateX(calc(105% * var(--cui-mm-sign, 1)));
  --cui-mm-op: 1;
  --cui-mm-ease: cubic-bezier(.16, 1.15, .3, 1);
}
.cui-mm-anim-fade {
  --cui-mm-from: none;
  --cui-mm-op: 0;
  --cui-mm-ease: ease;
}
.cui-mm-anim-scale {
  --cui-mm-from: scale(.86);
  --cui-mm-op: 0;
  --cui-mm-ease: cubic-bezier(.2, .9, .3, 1.15);
}
.cui-mm-anim-slide-up {
  --cui-mm-from: translateY(102%);
  --cui-mm-op: 1;
  --cui-mm-ease: cubic-bezier(.3, 0, .2, 1);
}
.cui-mm-anim-door {
  --cui-mm-from: perspective(1400px) rotateY(calc(-42deg * var(--cui-mm-sign, 1)))
                 translateX(calc(24% * var(--cui-mm-sign, 1)));
  --cui-mm-op: 0;
  --cui-mm-ease: cubic-bezier(.25, .8, .25, 1);
}
.cui-mm-anim-blur {
  --cui-mm-from: scale(1.06);
  --cui-mm-op: 0;
  --cui-mm-filter: blur(16px);
  --cui-mm-ease: ease-out;
}
.cui-mm-anim-skew {
  --cui-mm-from: translateX(calc(70% * var(--cui-mm-sign, 1))) skewY(calc(-4deg * var(--cui-mm-sign, 1)));
  --cui-mm-op: 0;
  --cui-mm-ease: cubic-bezier(.2, .9, .25, 1);
}
.cui-mm-anim-flip {
  --cui-mm-from: perspective(1400px) rotateX(-24deg) translateY(-8%);
  --cui-mm-op: 0;
  --cui-mm-ease: cubic-bezier(.25, .85, .3, 1.1);
}
.cui-mm-anim-zoom-rotate {
  --cui-mm-from: scale(.8) rotate(calc(-6deg * var(--cui-mm-sign, 1)));
  --cui-mm-op: 0;
  --cui-mm-ease: cubic-bezier(.2, .9, .3, 1.12);
}

/* ------------------------------------------------------------
   2) FRONTEND UYGULAMASI
   body.cui-mm : "Mobil Menü Görünümü" özelliği açık
   ------------------------------------------------------------ */
/* Panelin hangi yönden geldiğini işaretle (slide/door/skew için). */
body.cui-mm .off-canvas-right .mfp-content { --cui-mm-sign: 1; }
body.cui-mm .off-canvas-left  .mfp-content { --cui-mm-sign: -1; }
/* Ortadan açılan panelde yön yok → 0 (yalnız ölçek/opaklık kalır). */
body.cui-mm .off-canvas-center .mfp-content { --cui-mm-sign: 0; }

body.cui-mm.cui-mm-anim .off-canvas .mfp-content {
  transform: var(--cui-mm-from, none) !important;
  opacity: var(--cui-mm-op, 1) !important;
  filter: var(--cui-mm-filter, none);
  transform-origin: center center;
  transition: transform var(--cui-mm-dur, 420ms) var(--cui-mm-ease, ease),
              opacity   var(--cui-mm-dur, 420ms) ease,
              filter    var(--cui-mm-dur, 420ms) ease !important;
  will-change: transform, opacity;
}
body.cui-mm.cui-mm-anim .off-canvas.mfp-ready .mfp-content {
  transform: var(--cui-mm-to, none) !important;
  opacity: 1 !important;
  filter: none;
}
body.cui-mm.cui-mm-anim .off-canvas.mfp-removing .mfp-content {
  transform: var(--cui-mm-from, none) !important;
  opacity: var(--cui-mm-op-out, var(--cui-mm-op, 0)) !important;
  filter: var(--cui-mm-filter, none);
}
/* Kapanışta tema `opacity:0 !important` uyguluyor; slide gibi opaklık
   kullanmayan stillerde bunu geri alıyoruz ki hareket görünsün. */
body.cui-mm.cui-mm-anim .off-canvas.mfp-removing .mfp-content { transition-duration: var(--cui-mm-dur, 420ms) !important; }

/* Kapı/flip stillerinde döndürme ekseni panelin kenarı olmalı. */
body.cui-mm.cui-mm-anim .cui-mm-anim-door.off-canvas-right  .mfp-content,
body.cui-mm.cui-mm-anim.cui-mm-anim-door .off-canvas-right  .mfp-content { transform-origin: right center; }
body.cui-mm.cui-mm-anim.cui-mm-anim-door .off-canvas-left   .mfp-content { transform-origin: left center; }
body.cui-mm.cui-mm-anim.cui-mm-anim-flip .off-canvas        .mfp-content { transform-origin: center top; }

/* ------------------------------------------------------------
   3) ZEMİN (renk / gradient) + yazı rengi
   ------------------------------------------------------------ */
body.cui-mm-bg .off-canvas .mfp-content {
  background: var(--cui-mm-bg) !important;
}
/* Arka perde (overlay) rengi — yalnız off-canvas menüde, lightbox'a dokunmaz. */
body.cui-mm-ov .mfp-bg.off-canvas,
body.cui-mm-ov .mfp-bg.off-canvas-left,
body.cui-mm-ov .mfp-bg.off-canvas-right,
body.cui-mm-ov .mfp-bg.off-canvas-center {
  background: var(--cui-mm-overlay) !important;
  background-color: var(--cui-mm-overlay) !important;
}
body.cui-mm-text .off-canvas .mfp-content,
body.cui-mm-text .off-canvas .mfp-content a,
body.cui-mm-text .off-canvas .nav-vertical > li > a,
body.cui-mm-text .off-canvas .nav-vertical li li > a,
body.cui-mm-text .off-canvas .mfp-content .menu-title,
body.cui-mm-text .off-canvas .mfp-content .widget-title {
  color: var(--cui-mm-text) !important;
}
/* Yazı rengi verildiğinde menü ayırıcı çizgileri de uyumlu olsun. */
body.cui-mm-text .off-canvas .nav-vertical > li {
  border-color: color-mix(in srgb, var(--cui-mm-text) 18%, transparent);
}

/* ------------------------------------------------------------
   4) ADMIN ÖNİZLEMESİ — aynı değişkenleri okur
   .cui-mm-preview (kök) / .is-open (açık durum)
   ------------------------------------------------------------ */
.cui-mm-preview__panel {
  transform: var(--cui-mm-from, none);
  opacity: var(--cui-mm-op, 1);
  filter: var(--cui-mm-filter, none);
  transition: transform var(--cui-mm-dur, 420ms) var(--cui-mm-ease, ease),
              opacity   var(--cui-mm-dur, 420ms) ease,
              filter    var(--cui-mm-dur, 420ms) ease;
}
.cui-mm-preview.is-open .cui-mm-preview__panel {
  transform: var(--cui-mm-to, none);
  opacity: 1;
  filter: none;
}
.cui-mm-preview.cui-mm-anim-door .cui-mm-preview__panel { transform-origin: right center; }
.cui-mm-preview.cui-mm-anim-flip .cui-mm-preview__panel { transform-origin: center top; }

@media (prefers-reduced-motion: reduce) {
  body.cui-mm.cui-mm-anim .off-canvas .mfp-content,
  .cui-mm-preview__panel { transition: none !important; }
}