/* MXonnowell v0.3.12 — 8 ana sayfa 360° responsive akış / mobil video dengesi / final yerleşim QA. */
:root{--mx312-wrap:1180px;--mx312-navy:#0c356f;--mx312-green:#43a914;--mx312-line:#e0e9f1}

/* Sayfalar arası ortak dikey ritim: referans omurgayı korur, gereksiz boşluğu azaltır. */
.mx302-section{padding-top:40px!important;padding-bottom:40px!important}
.mx302-heading{margin-bottom:22px!important}
.mx302-heading h2{font-size:clamp(25px,2.35vw,34px)!important;line-height:1.12!important;letter-spacing:-.028em!important}
.mx302-heading p{font-size:12.5px!important;line-height:1.58!important}
.mx302-cta{padding-top:24px!important;padding-bottom:24px!important}
.mx302-btn{min-height:42px;display:inline-flex;align-items:center;justify-content:center}

/* İlk video ile hero arasında net ama sıkı bir geçiş. */
.mx302-video-first{padding-top:10px!important;padding-bottom:12px!important}
.mx302-video-first>.mx-wrap{width:min(var(--mx312-wrap),calc(100% - 40px))!important}
.mx302-video-first__frame{border-radius:18px!important;overflow:hidden}
.mx302-video-first__frame video,.mx302-video-first__frame img{width:100%;height:100%;object-position:center center}

/* Video altındaki medya kartları daha küçük ve standardize. */
.mx302-media-grid{max-width:1000px!important}
.mx302-video-card-grid{max-width:960px!important}
.mx302-media-card figure,.mx302-video-card__frame{aspect-ratio:16/9!important}
.mx302-media-card h3,.mx302-video-card h3{font-size:13.5px!important;line-height:1.3!important}
.mx302-media-card p,.mx302-video-card p{font-size:10.5px!important;line-height:1.5!important}

/* Hero / split bloklarda görsel ve metin kolonları aynı ritimde. */
.mx302-hero__grid,.mx302-split__grid{max-width:var(--mx312-wrap);margin-left:auto;margin-right:auto}
.mx302-hero__copy,.mx302-split__copy{min-width:0}
.mx302-hero__copy h1{font-size:clamp(42px,4.7vw,68px)!important;line-height:.99!important;letter-spacing:-.045em!important}
.mx302-hero__copy p{max-width:610px}
.mx302-hero__media img,.mx302-split__media img{object-position:center center}

/* Kart sıraları: masaüstünde eş yükseklik, dar ekranlarda içerik ezilmez. */
.mx302-feature-grid,.mx302-steps,.mx302-explore-grid,.mx302-story-grid,.mx302-product-grid{align-items:stretch}
.mx302-feature-card,.mx302-steps article,.mx302-explore-card,.mx302-story-card,.mx302-product-card{min-width:0}
.mx302-feature-card h3,.mx302-steps h3,.mx302-explore-card h3{line-height:1.25!important}

/* Yönetici Düzenle butonu referans tasarımın üstünü daha az örtsün. */
.mx302-video-first.mx109-has-entry>.mx109-section-edit,
.mx302-hero.mx109-has-entry>.mx109-section-edit,
.mx302-section.mx109-has-entry>.mx109-section-edit,
.mx302-cta.mx109-has-entry>.mx109-section-edit,
.mx309-flow.mx109-has-entry>.mx109-section-edit{
  top:8px!important;right:8px!important;min-height:30px!important;padding:0 9px!important;border-radius:8px!important;font-size:9.5px!important;line-height:1!important;box-shadow:0 4px 12px rgba(10,48,82,.09)!important
}

/* Tablet yatay / küçük masaüstü */
@media(max-width:1100px){
  .mx302-section{padding-top:34px!important;padding-bottom:34px!important}
  .mx302-video-first>.mx-wrap,.mx302-hero>.mx-wrap,.mx302-section>.mx-wrap,.mx302-cta>.mx-wrap,.mx309-flow>.mx-wrap{width:min(100% - 28px,var(--mx312-wrap))!important}
  .mx302-heading h2{font-size:29px!important}
  .mx302-hero__copy h1{font-size:clamp(40px,5.7vw,58px)!important}
  .mx302-feature-grid.mx302-cols-6{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .mx302-product-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}

/* Tablet dikey */
@media(max-width:900px){
  .mx302-hero__grid,.mx302-split__grid{grid-template-columns:1fr!important}
  .mx302-hero__copy,.mx302-split__copy{padding:28px 22px!important}
  .mx302-hero__media,.mx302-split__media{min-height:0!important;aspect-ratio:16/8.8!important}
  .mx302-hero__media img,.mx302-split__media img{width:100%;height:100%;object-fit:cover!important}
  .mx302-cols-5,.mx302-cols-6{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  [data-mx-builder-key="explore-grid"] .mx302-explore-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  [data-mx-builder-key="stories-list"] .mx302-story-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  [data-mx-builder-key="products-grid"] .mx302-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* Mobil — ana video büyütülür, alt medya kartları küçültülür. */
@media(max-width:767px){
  .mx302-video-first{padding-top:4px!important;padding-bottom:9px!important}
  .mx302-video-first>.mx-wrap{width:calc(100% - 12px)!important}
  .mx302-video-first__frame{aspect-ratio:16/10!important;border-radius:14px!important}
  .mx302-video-first__frame video,.mx302-video-first__frame img{object-fit:cover!important}

  .mx302-section{padding-top:28px!important;padding-bottom:28px!important}
  .mx302-section>.mx-wrap,.mx302-hero>.mx-wrap,.mx302-cta>.mx-wrap,.mx309-flow>.mx-wrap{width:calc(100% - 20px)!important}
  .mx302-heading{margin-bottom:16px!important}
  .mx302-heading h2{font-size:24px!important}
  .mx302-heading p{font-size:11.5px!important;line-height:1.5!important}

  .mx302-hero__copy,.mx302-split__copy{padding:23px 14px!important}
  .mx302-hero__copy h1{font-size:clamp(38px,11vw,50px)!important;line-height:1.01!important}
  .mx302-hero__copy p{font-size:13px!important;line-height:1.55!important}
  .mx302-hero__media,.mx302-split__media{aspect-ratio:16/10!important;border-radius:0 0 22px 22px!important}

  /* Video altı görsel/video kartları önceki büyük görünümden daha küçük. */
  .mx302-media-grid.mx302-cols-2,.mx302-media-grid.mx302-cols-3,.mx302-media-grid.mx302-cols-4,
  .mx302-video-card-grid{gap:10px!important;padding-bottom:5px!important;scroll-padding-left:2px}
  .mx302-media-card{flex:0 0 min(74vw,285px)!important}
  .mx302-video-card{flex:0 0 min(76vw,295px)!important}
  .mx302-media-card figure,.mx302-video-card__frame{aspect-ratio:16/9!important}
  .mx302-media-card h3,.mx302-video-card h3{font-size:12.5px!important;margin-top:9px!important}
  .mx302-media-card p,.mx302-video-card p{font-size:10px!important;margin-top:4px!important}

  .mx302-feature-grid,.mx302-steps{gap:10px!important}
  .mx302-feature-card,.mx302-steps article{padding:14px 11px!important;min-height:0!important}
  .mx302-feature-card .mx302-icon{width:44px!important;height:44px!important;padding:11px!important}
  .mx302-btn{min-height:40px;padding-left:15px!important;padding-right:15px!important;font-size:11px!important}

  [data-mx-builder-key="products-grid"] .mx302-product-grid{grid-template-columns:1fr 1fr!important;gap:10px!important}
  [data-mx-builder-key="products-grid"] .mx302-product-card__body{padding:10px!important}
  [data-mx-builder-key="products-grid"] .mx302-product-card h3{font-size:11px!important}
  [data-mx-builder-key="stories-list"] .mx302-story-grid{grid-template-columns:1fr!important;max-width:330px;margin-left:auto;margin-right:auto}

  .mx302-video-first.mx109-has-entry>.mx109-section-edit,
  .mx302-hero.mx109-has-entry>.mx109-section-edit,
  .mx302-section.mx109-has-entry>.mx109-section-edit,
  .mx302-cta.mx109-has-entry>.mx109-section-edit,
  .mx309-flow.mx109-has-entry>.mx109-section-edit{top:6px!important;right:6px!important;min-height:29px!important;font-size:9px!important}
}

/* Çok dar telefon — 320–350 px güvenli alan */
@media(max-width:350px){
  .mx302-video-first>.mx-wrap{width:calc(100% - 8px)!important}
  .mx302-section>.mx-wrap,.mx302-hero>.mx-wrap,.mx302-cta>.mx-wrap,.mx309-flow>.mx-wrap{width:calc(100% - 16px)!important}
  .mx302-hero__copy{padding:20px 11px!important}
  .mx302-hero__copy h1{font-size:36px!important}
  .mx302-heading h2{font-size:22px!important}
  .mx302-media-card{flex-basis:min(78vw,265px)!important}
  .mx302-video-card{flex-basis:min(80vw,275px)!important}
  .mx302-feature-grid.mx302-cols-4,.mx302-feature-grid.mx302-cols-5,.mx302-feature-grid.mx302-cols-6{grid-template-columns:1fr 1fr!important}
  [data-mx-builder-key="products-grid"] .mx302-product-grid{grid-template-columns:1fr!important;max-width:280px;margin-left:auto;margin-right:auto}
  .mx302-btn{width:100%;max-width:280px}
}

/* Kısa yatay ekranlar: gereksiz dikey şişme yok. */
@media(max-height:540px) and (orientation:landscape){
  .mx302-video-first__frame{max-height:72vh;aspect-ratio:16/8.5!important}
  .mx302-section{padding-top:24px!important;padding-bottom:24px!important}
  .mx302-hero__grid{min-height:0!important}
}

/* Genel yatay taşma güvenliği yalnız referans sayfa bileşenleri içinde. */
.mx302-video-first,.mx302-hero,.mx302-section,.mx302-cta,.mx309-flow{max-width:100%;overflow-x:clip}
.mx302-media-grid,.mx302-video-card-grid,.mx302-steps,.mx302-feature-grid,.mx302-product-grid,.mx302-story-grid,.mx302-explore-grid{min-width:0}


/* v0.3.12 — Sonsuz video akışı geçişi: kaynak değişirken siyah flaş yerine poster/görsel görünür. */
.mx302-video-first__frame .mx302-video-el{transition:opacity .18s ease!important}
.mx302-video-first__frame.is-mx312-switching .mx302-video-el{opacity:0!important}
.mx302-video-card-grid[data-mx312-video-sequence="1"] .mx302-video-card video{transition:opacity .16s ease}