/*
 * MXonnowell v0.1.63 — Mobil/Tablet Video Safe Frame + Akıcı Geçiş
 * Amaç: videonun kendi içindeki yazı/logo/ürün/kenar öğelerini kırpmadan tam göstermek.
 * Mobil <=767, tablet 768-1279. Masaüstü görsel dili korunur.
 */
:root{
  --mx63-video-bg:#04345f;
  --mx63-video-bg-deep:#022a4e;
  --mx63-safe-gap:8px;
  --mx63-toolbar-h:48px;
}

/* Video sahnesi çizim/blur katmanı üretmez; videonun authored içeriği tek görsel kaynaktır. */
.mx-public-safe-video-v0163,
.mx49-film .mx-film-slide video{
  image-rendering:auto;
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
  backface-visibility:hidden;
}
.mxon62-public-video-shell,
.mx49-film .mx-film-stage{
  background:linear-gradient(180deg,var(--mx63-video-bg-deep),var(--mx63-video-bg))!important;
}

/* Kaynağın gerçek yönü JS tarafından host/video üzerine yazılır; layout zıplaması olmadan oran kilidi. */
.mxon62-public-video-shell--inline.is-source-landscape-v0163{aspect-ratio:16/9!important}
.mxon62-public-video-shell--inline.is-source-portrait-v0163{aspect-ratio:9/16!important}
.mxon62-public-video-shell--inline.is-source-square-v0163{aspect-ratio:1/1!important}
.mxon62-public-video-shell--inline>video{width:100%!important;height:100%!important;max-height:none!important;object-fit:contain!important;object-position:center center!important;background:var(--mx63-video-bg-deep)!important}

/* Home slider: yeni slayt ilk frame hazır olana kadar eski slayt görünür kalır. */
.mx49-film .mx-film-slide{
  will-change:opacity;
  transition:opacity .34s cubic-bezier(.22,.61,.36,1),visibility 0s linear .34s!important;
}
.mx49-film .mx-film-slide.is-active,
.mx49-film .mx-film-slide.is-preparing-v0163{
  visibility:visible!important;
}
.mx49-film .mx-film-slide.is-preparing-v0163{opacity:0!important;pointer-events:none!important;z-index:2!important}
.mx49-film .mx-film-slide.is-active{opacity:1!important;z-index:3!important;transition-delay:0s!important}
.mx49-film .mx-film-slide.is-retiring-v0163{visibility:visible!important;opacity:1!important;z-index:1!important}

@media (max-width:767px){
  :root{--mx63-safe-gap:6px;--mx63-toolbar-h:46px}

  /* ANA SAYFA: toolbar video yazı/logo alanının üstüne binmez; alt bant ayrı kalır. */
  body.home .mx49-film .mx-film-stage{padding:0!important;background:var(--mx63-video-bg-deep)!important}
  body.home .mx49-film .mx-film-slide{
    inset:var(--mx63-safe-gap) var(--mx63-safe-gap) calc(var(--mx63-toolbar-h) + var(--mx63-safe-gap)) var(--mx63-safe-gap)!important;
    width:auto!important;height:auto!important;min-height:0!important;
    background:var(--mx63-video-bg-deep)!important;
  }
  body.home .mx49-film .mx-film-slide video{
    width:100%!important;height:100%!important;min-height:0!important;max-height:100%!important;
    object-fit:contain!important;object-position:center center!important;
    background:var(--mx63-video-bg-deep)!important;
  }
  body.home .mx49-film .mx-film-toolbar{
    left:0!important;right:0!important;bottom:0!important;transform:none!important;
    width:100%!important;min-width:0!important;height:var(--mx63-toolbar-h)!important;
    border:0!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important;
    background:var(--mx63-video-bg-deep)!important;
  }

  /* PUBLIC HERO: tam viewport kalıbı korunur ama video cover ile kırpılmaz. */
  html body .mxon50-video-hero,
  html body .mxon50-template-video{
    background:var(--mx63-video-bg-deep)!important;
    padding:var(--mx63-safe-gap)!important;
  }
  html body .mxon50-video-hero__frame{
    inset:var(--mx63-safe-gap)!important;
    width:auto!important;height:auto!important;min-height:0!important;
    background:var(--mx63-video-bg-deep)!important;
  }
  html body .mxon50-video-hero video,
  html body .mxon50-template-video>video,
  html body video.mx-public-safe-video-v0163{
    width:100%!important;height:100%!important;min-height:0!important;max-height:100%!important;
    object-fit:contain!important;object-position:center center!important;
    background:var(--mx63-video-bg-deep)!important;
  }

  /* Ara videoda 16:9 / 9:16 kalıbı kaynağın gerçek yönüne göre belirlenir. */
  html body .mxon62-public-video-shell--inline{
    width:100%!important;height:auto!important;max-height:76svh!important;
    margin:20px auto!important;padding:var(--mx63-safe-gap)!important;
    background:var(--mx63-video-bg-deep)!important;
    contain:layout paint;
  }
  html body .mxon62-public-video-shell--inline.is-source-portrait-v0163{width:min(100%,430px)!important;aspect-ratio:9/16!important}
  html body .mxon62-public-video-shell--inline.is-source-landscape-v0163{aspect-ratio:16/9!important;max-height:none!important}
  html body .mxon62-public-video-shell--inline video{aspect-ratio:auto!important;object-fit:contain!important}

  /* Video kütüphanesi de tam kareyi korur; başlık/logo kırpılmaz. */
  html body .mx-video-library-card__media{background:var(--mx63-video-bg-deep)!important;overflow:hidden!important}
  html body .mx-video-library-card__media video{height:auto!important;max-height:72svh!important;object-fit:contain!important;object-position:center!important;background:var(--mx63-video-bg-deep)!important}
}

@media (min-width:768px) and (max-width:1279px){
  :root{--mx63-safe-gap:8px}

  body.home .mx49-film .mx-film-slide{
    inset:var(--mx63-safe-gap) var(--mx63-safe-gap) calc(48px + var(--mx63-safe-gap)) var(--mx63-safe-gap)!important;
    width:auto!important;height:auto!important;min-height:0!important;
    background:var(--mx63-video-bg-deep)!important;
  }
  body.home .mx49-film .mx-film-slide video{
    width:100%!important;height:100%!important;min-height:0!important;max-height:100%!important;
    object-fit:contain!important;object-position:center center!important;background:var(--mx63-video-bg-deep)!important;
  }
  body.home .mx49-film .mx-film-toolbar{background:var(--mx63-video-bg-deep)!important;backdrop-filter:none!important}

  html body .mxon50-video-hero,
  html body .mxon50-template-video{
    padding:var(--mx63-safe-gap)!important;background:var(--mx63-video-bg-deep)!important;
  }
  html body .mxon50-video-hero__frame{inset:var(--mx63-safe-gap)!important;width:auto!important;height:auto!important;min-height:0!important}
  html body .mxon50-video-hero video,
  html body .mxon50-template-video>video,
  html body video.mx-public-safe-video-v0163{
    width:100%!important;height:100%!important;min-height:0!important;max-height:100%!important;
    object-fit:contain!important;object-position:center center!important;background:var(--mx63-video-bg-deep)!important;
  }

  html body .mxon62-public-video-shell--inline{
    margin:26px auto!important;padding:var(--mx63-safe-gap)!important;max-height:680px!important;
    background:var(--mx63-video-bg-deep)!important;contain:layout paint;
  }
  html body .mxon62-public-video-shell--inline.is-source-landscape-v0163{aspect-ratio:16/9!important;width:100%!important}
  html body .mxon62-public-video-shell--inline.is-source-portrait-v0163{aspect-ratio:9/16!important;width:min(100%,430px)!important}
  html body .mxon62-public-video-shell--inline video{aspect-ratio:auto!important;object-fit:contain!important}
}

/* Hareket azalt tercihi geçiş efektini kaldırır; video çerçevesi ve görünürlük korunur. */
@media (prefers-reduced-motion:reduce){
  .mx49-film .mx-film-slide{transition:none!important}
}

/* Ana sayfa alt video vitrini: authored yazı/logo varsa kırpma yapılmaz. */
.mx49-media-video .mx-device-video{overflow:hidden!important;background:var(--mx63-video-bg-deep)!important}
.mx49-media-video .mx-device-video video{width:100%!important;height:auto!important;aspect-ratio:16/9!important;object-fit:contain!important;object-position:center center!important;background:var(--mx63-video-bg-deep)!important}
@media (max-width:767px){
  .mx49-media-video .mx-device-video video{max-height:72svh!important;aspect-ratio:auto!important}
}

/* Diğer responsive device-video alanlarında da küçük ekranda authored frame korunur. */
@media (max-width:1279px){
  main .mx-device-video{background:var(--mx63-video-bg-deep)!important;overflow:hidden!important}
  main .mx-device-video video{object-fit:contain!important;object-position:center center!important;background:var(--mx63-video-bg-deep)!important}
}