/**
 * Ana sayfa hero (media-grid) — şeffaf header altında tam yükseklik
 * kn-mirror-embed: iframe auto-height svh'yi şişirir; sabit satır yüksekliği kullan
 */

:root {
  --kn-mirror-vh-cap: 960px;
}

@media (min-width: 768px) {
  #MainContent > .section-media-grid:first-of-type {
    --kn-hero-stack: calc(
      var(--dynamic_announcement_height, var(--announcement_height, 0px)) +
        var(--dynamic_header_height, var(--header_height, 80px))
    );
    --desktop_height: max(
      300px,
      calc((min(100svh, var(--kn-mirror-vh-cap)) - var(--kn-hero-stack)) / 3)
    );
  }
}

@media (max-width: 767px) {
  #MainContent > .section-media-grid:first-of-type {
    --kn-hero-stack: calc(
      var(--dynamic_announcement_height, var(--announcement_height, 0px)) +
        var(--dynamic_header_height, var(--header_height, 72px))
    );
    --mobile_height: max(
      200px,
      calc((min(100svh, var(--kn-mirror-vh-cap)) - var(--kn-hero-stack)) / 2)
    );
  }
}

html.kn-mirror-embed #MainContent > .section-media-grid:first-of-type {
  --desktop_height: 300px !important;
  --mobile_height: 200px !important;
}

html.kn-mirror-embed .section-media-grid:first-of-type .media-grid--image {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

html.kn-mirror-embed .section-media-grid:first-of-type .media-grid--image .media,
html.kn-mirror-embed .section-media-grid:first-of-type .media-grid--image .media-fixed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

html.kn-mirror-embed .section-media-grid:first-of-type img.media_image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
}

/* Tema kabuğu ana sayfa — hero grid (iframe kn-mirror-embed eşdeğeri) */
.kn-theme-shell-home .section-media-grid:first-of-type .media-grid--image {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.kn-theme-shell-home .section-media-grid:first-of-type .media-grid--image .media,
.kn-theme-shell-home .section-media-grid:first-of-type .media-grid--image .media-fixed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.kn-theme-shell-home .section-media-grid:first-of-type img.media_image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
}

/* CLS — hero grid yüksekliği CSS yüklenmeden rezerve et */
.kn-theme-shell-home #MainContent > .section-media-grid:first-of-type {
  min-height: max(300px, var(--desktop_height, 300px));
}

@media (max-width: 767px) {
  .kn-theme-shell-home #MainContent > .section-media-grid:first-of-type {
    min-height: max(200px, var(--mobile_height, 200px));
  }
}

/* Metin bloğu — grid hücresi boyutlanana kadar kaymayı azalt */
.kn-theme-shell-home #MainContent > .section-media-grid:first-of-type .media-content.large {
  contain: layout style;
}