/*
 * Makrakanta Fullpage Video Fix
 * Section içindeki video sadece kendi section'ında kalır.
 * Güvenli fallback video ise yalnızca hedef/aktif video section'ında görünür.
 */

.background-page {
    overflow: hidden !important;
    background-size: cover !important;
    background-position: center center !important;
}

.background-page > video,
.background-page video,
#mk-mlc-safe-video-bg video {
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: 100vw !important;
    height: var(--mk-mlc-mobile-vh, 100vh) !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    z-index: 0 !important;
    background-size: cover !important;
    background-position: center center !important;
}

.background-page .bg-overlay {
    pointer-events: none !important;
}

/* Tema tarafından section içine basılan background holder sabit değil, kendi section'ı içinde kalmalı. */
.background-page.mk-mlc-video-bg-ready:not(#mk-mlc-safe-video-bg),
.background-page.mk-mlc-injected-video-bg:not(#mk-mlc-safe-video-bg) {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    background-color: #000 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Güvenli fallback layer body altında durur ama sadece hedef section aktifken görünür. */
#mk-mlc-safe-video-bg {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: var(--mk-mlc-mobile-vh, 100vh) !important;
    z-index: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    background-color: #000 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    display: block !important;
    transition: opacity .18s ease;
}

body.mk-mlc-safe-video-visible #mk-mlc-safe-video-bg {
    opacity: 1 !important;
    visibility: visible !important;
}

.background-page.mk-mlc-injected-video-bg video,
.background-page .mk-mlc-fallback-video,
#mk-mlc-safe-video-bg .mk-mlc-safe-video {
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 100vw !important;
    height: var(--mk-mlc-mobile-vh, 100vh) !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: translate(-50%, -50%) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

body.mk-mlc-fullpage-video-active,
html.mk-mlc-video-root-active body {
    background-color: #000 !important;
}

/* Önceki sürümlerde tüm section'lar şeffaflaştırılıyordu; artık sadece video section aktifken uygulanır. */
body.mk-mlc-safe-video-visible #fullpage-main,
body.mk-mlc-safe-video-visible #fullpage,
body.mk-mlc-safe-video-visible .section.mk-mlc-video-section-active,
body.mk-mlc-safe-video-visible .fp-section.mk-mlc-video-section-active,
body.mk-mlc-safe-video-visible .section.mk-mlc-video-section-active .fp-tableCell,
body.mk-mlc-safe-video-visible .fp-section.mk-mlc-video-section-active .fp-tableCell,
body.mk-mlc-safe-video-visible .section.mk-mlc-video-section-active .section-item,
body.mk-mlc-safe-video-visible .fp-section.mk-mlc-video-section-active .section-item {
    background-color: transparent !important;
}

body.mk-mlc-safe-video-visible #fullpage-main,
body.mk-mlc-safe-video-visible #fullpage,
body.mk-mlc-safe-video-visible .section.mk-mlc-video-section-active > :not(.background-page),
body.mk-mlc-safe-video-visible .fp-section.mk-mlc-video-section-active > :not(.background-page),
body.mk-mlc-safe-video-visible .section.mk-mlc-video-section-active .fp-tableCell > *,
body.mk-mlc-safe-video-visible .fp-section.mk-mlc-video-section-active .fp-tableCell > * {
    position: relative !important;
    z-index: 2 !important;
}

body.mk-mlc-safe-video-visible #mk-mlc-safe-video-bg {
    z-index: 0 !important;
}

/* Makrakanta optimized background video layer */
.background-page .mk-mlc-video-dark-overlay,
.videobox .mk-mlc-video-dark-overlay,
#mk-mlc-safe-video-bg .mk-mlc-video-dark-overlay {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    background: #000 !important;
    pointer-events: none !important;
    z-index: 1 !important;
    visibility: visible !important;
}

.background-page video + .mk-mlc-video-dark-overlay,
.videobox video + .mk-mlc-video-dark-overlay {
    z-index: 1 !important;
}

/* v1.2.11 - Mobile video sizing isolation
   The background video must never define the visual/content width of the section.
   On iPhone/Android portrait we size the video to its own holder, not to 100vw. */
@media (max-width: 991px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body.mk-mobile-section-snap #fullpage,
  body.mk-mobile-section-snap #fullpage-main,
  body.mk-mobile-section-snap .fullpage-wrapper,
  body.mk-mobile-section-snap .fp-section,
  body.mk-mobile-section-snap .section,
  body.mk-mobile-section-snap .fp-tableCell {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  body.mk-mobile-section-snap .background-page,
  body.mk-mobile-section-snap #mk-mlc-safe-video-bg {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    contain: layout paint !important;
    isolation: isolate !important;
  }

  body.mk-mobile-section-snap .background-page > video,
  body.mk-mobile-section-snap .background-page video,
  body.mk-mobile-section-snap #mk-mlc-safe-video-bg video,
  body.mk-mobile-section-snap .background-page.mk-mlc-injected-video-bg video,
  body.mk-mobile-section-snap .background-page .mk-mlc-fallback-video,
  body.mk-mobile-section-snap #mk-mlc-safe-video-bg .mk-mlc-safe-video {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  body.mk-mobile-section-snap .section > .container,
  body.mk-mobile-section-snap .fp-section > .container,
  body.mk-mobile-section-snap .fp-tableCell > .container,
  body.mk-mobile-section-snap .section .container,
  body.mk-mobile-section-snap .fp-section .container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.mk-mobile-section-snap .mk-rollingsoon-kiro,
  body.mk-mobile-section-snap .hc_countdown_cnt {
    max-width: calc(100vw - 32px) !important;
  }
}