/*
 * MXonnowell v0.1.57 — Mobile First Public QA Lock
 * Amaç: mobilde tam ekran yatay video, postersiz video-first açılış, doğru medya geometrisi,
 * iki kolon / iki sıra footer, kompakt tipografi ve dock/footer çakışma kilidi.
 */

:root{
  --mx57-blue:#064b82;
  --mx57-blue-deep:#04345f;
  --mx57-green:#3f8f1b;
  --mx57-line:#dfe9e4;
  --mx57-ink:#10263a;
  --mx57-muted:#667786;
}

/* Hero videos fade in only after actual video data is ready. No unrelated poster flash. */
.mx-film-stage,
.mxon50-video-hero,
.mxon50-template-video{background:var(--mx57-blue-deep)!important}
.mx-film-slide video,
.mxon50-video-hero video,
.mxon50-template-video>video{opacity:0!important;transition:opacity .58s cubic-bezier(.22,.61,.36,1)!important}
.mx-film-slide.is-active.is-video-ready video,
.mxon50-video-hero.is-video-ready video,
.mxon50-template-video.is-video-ready>video{opacity:1!important}
.mx-film-stage.is-initializing .mx-film-slide video{opacity:0!important}
.mx-film-slide{transition:opacity .68s cubic-bezier(.22,.61,.36,1),visibility .68s linear!important}

/* Card images always respect the component geometry. */
.mx49-brand-card figure,
.mx49-opportunity-panel figure,
.mxon54-brand-split figure,
.mxon51-apex-visual,
.mxon53-resource-grid figure{overflow:hidden!important;background:#fff!important}
.mx49-brand-card figure img,
.mx49-opportunity-panel figure img,
.mxon54-brand-split figure img,
.mxon51-apex-visual img,
.mxon53-resource-grid figure img{display:block!important;width:100%!important;height:100%!important}

/* Media library cards: don't force every orientation into the same rectangle. */
.mxon48-media-card.is-landscape img{aspect-ratio:16/9!important;height:auto!important;object-fit:cover!important}
.mxon48-media-card.is-square img{aspect-ratio:1/1!important;height:auto!important;object-fit:cover!important}
.mxon48-media-card.is-portrait img{aspect-ratio:4/5!important;height:auto!important;object-fit:cover!important}
.mxon45-media-card.is-landscape>img{aspect-ratio:16/9!important;height:auto!important;object-fit:cover!important}
.mxon45-media-card.is-square>img{aspect-ratio:1/1!important;height:auto!important;object-fit:cover!important}
.mxon45-media-card.is-portrait>img{aspect-ratio:4/5!important;height:auto!important;object-fit:cover!important}

@media(max-width:767px){
  :root{--mx57-header-h:60px;--mx57-dock-h:72px}
  body{overflow-x:hidden!important}
  main{overflow-x:clip!important}

  /* MOBILE HERO: full usable viewport, always horizontal HD source, cinematic cover. */
  .mx49-film{height:calc(100svh - var(--mx57-header-h))!important;min-height:560px!important;max-height:none!important;background:var(--mx57-blue-deep)!important;overflow:hidden!important}
  .mx49-film .mx-film-shell,
  .mx49-film .mx-film-stage{position:relative!important;width:100%!important;height:100%!important;min-height:100%!important;max-height:none!important;aspect-ratio:auto!important;overflow:hidden!important}
  .mx49-film .mx-film-slide{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
  .mx49-film .mx-film-slide video,
  .mx49-film .mx-film-fallback,
  .mx49-film .mx-film-stage--image img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center center!important;background:var(--mx57-blue-deep)!important;transform:none!important}

  /* Film controls: floating glass strip, no extra blue block under video. */
  .mx49-film .mx-film-toolbar{position:absolute!important;left:50%!important;right:auto!important;bottom:calc(var(--mx57-dock-h) + 12px)!important;transform:translateX(-50%)!important;width:auto!important;min-width:154px!important;height:38px!important;padding:5px 9px!important;gap:7px!important;display:flex!important;align-items:center!important;justify-content:center!important;border:1px solid rgba(255,255,255,.28)!important;border-radius:999px!important;background:rgba(2,36,67,.58)!important;background-image:none!important;box-shadow:0 8px 24px rgba(0,25,48,.22)!important;backdrop-filter:blur(12px)!important}
  .mx49-film .mx-film-toolbar button{width:28px!important;height:28px!important;min-width:28px!important;border-color:rgba(255,255,255,.28)!important;background:rgba(255,255,255,.08)!important}
  .mx49-film .mx-film-prev,.mx49-film .mx-film-next{display:none!important}
  .mx49-film .mx-film-dots{gap:5px!important}
  .mx49-film .mx-film-dots button{width:15px!important;height:3px!important;min-width:15px!important;border:0!important;border-radius:999px!important;background:rgba(255,255,255,.42)!important;padding:0!important}
  .mx49-film .mx-film-dots button.is-active{width:28px!important;background:#fff!important}

  /* Every public page starts with a full-screen horizontal video as well. */
  .mxon50-video-hero,
  .mxon50-template-video{position:relative!important;width:100%!important;height:calc(100svh - var(--mx57-header-h))!important;min-height:540px!important;max-height:none!important;margin:0!important;padding:0!important;overflow:hidden!important;background:var(--mx57-blue-deep)!important}
  .mxon50-video-hero__frame{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:100%!important;max-height:none!important;aspect-ratio:auto!important;overflow:hidden!important}
  .mxon50-video-hero__frame>video,
  .mxon50-template-video>video{display:block!important;width:100%!important;height:100%!important;min-height:100%!important;max-height:none!important;aspect-ratio:auto!important;object-fit:cover!important;object-position:center center!important;background:var(--mx57-blue-deep)!important;background-image:none!important}

  /* Main heading rhythm: compact, readable, no giant title block. */
  .mx49-bridge{padding:26px 0 12px!important}
  .mx49-bridge__head{margin-bottom:15px!important}
  .mx49-bridge__head h1{font-size:clamp(26px,7.7vw,31px)!important;line-height:1.06!important;letter-spacing:-.025em!important;font-weight:500!important;text-wrap:balance!important}
  .mx49-bridge__head p{margin-top:9px!important;font-size:13px!important;line-height:1.58!important;color:var(--mx57-muted)!important}
  .mxon50-page-title>.mx-wrap,.mxon50-template-title>.mx-wrap{padding:20px 0 22px!important}
  .mxon50-page-title h1,.mxon50-template-title h1{font-size:clamp(27px,8vw,34px)!important;line-height:1.06!important;letter-spacing:-.025em!important;font-weight:500!important}
  .mxon50-page-title p,.mxon50-template-title p{font-size:13px!important;line-height:1.58!important}

  /* Brand cards: correct landscape image slot first, then compact copy. */
  .mx49-brand-grid{gap:10px!important}
  .mx49-brand-card{display:flex!important;flex-direction:column!important;border-radius:14px!important;overflow:hidden!important}
  .mx49-brand-card figure{order:-1!important;width:100%!important;aspect-ratio:16/9!important;min-height:0!important}
  .mx49-brand-card figure img{width:100%!important;height:100%!important;min-height:0!important;padding:0!important;object-fit:contain!important;object-position:center!important;background:#fff!important}
  .mx49-brand-card__copy{padding:15px 16px 17px!important}
  .mx49-brand-card__copy strong{font-size:19px!important;line-height:1.12!important}
  .mx49-brand-card__copy>span{font-size:11.5px!important;margin-top:4px!important}
  .mx49-brand-card__copy p{font-size:11.5px!important;line-height:1.52!important;margin-top:8px!important}
  .mx49-brand-card__copy b{font-size:11.5px!important;margin-top:11px!important}

  /* Opportunity card: never use a portrait poster in a landscape media slot. */
  .mx49-opportunity{padding:0 0 28px!important}
  .mx49-opportunity-panel{display:flex!important;flex-direction:column!important;border-radius:14px!important;overflow:hidden!important}
  .mx49-opportunity-panel figure{order:-1!important;width:100%!important;aspect-ratio:16/9!important;min-height:0!important}
  .mx49-opportunity-panel figure picture{display:block!important;width:100%!important;height:100%!important}
  .mx49-opportunity-panel figure img{width:100%!important;height:100%!important;min-height:0!important;padding:0!important;object-fit:cover!important;object-position:center!important;background:#fff!important}
  .mx49-opportunity-panel>div{padding:20px 17px 22px!important}
  .mx49-opportunity-panel h2{font-size:clamp(27px,8vw,34px)!important;line-height:1.06!important}
  .mx49-opportunity-panel p{font-size:12.5px!important;line-height:1.58!important}
  .mx49-actions{grid-template-columns:1fr!important;gap:8px!important}
  .mx49-btn{min-height:46px!important;font-size:11.5px!important}

  /* General mobile cards: no stretched media, predictable aspect classes. */
  .mxon48-media-card img{height:auto!important}
  .mxon48-media-card.is-landscape img{aspect-ratio:16/9!important;object-fit:cover!important}
  .mxon48-media-card.is-square img{aspect-ratio:1/1!important;object-fit:cover!important}
  .mxon48-media-card.is-portrait img{aspect-ratio:4/5!important;object-fit:cover!important}
  .mxon53-category-card figure{overflow:hidden!important;background:#fff!important}
  .mxon53-category-card figure img{width:100%!important;height:100%!important;max-height:none!important;object-fit:contain!important;padding:5px!important}
  .mxon53-resource-grid figure{aspect-ratio:16/9!important}
  .mxon53-resource-grid figure img{width:100%!important;height:100%!important;object-fit:cover!important}

  /* Sections breathe less on phones. */
  .mxon48-section,.mx-section{padding:30px 0!important}
  .mx49-products,.mx49-media,.mx49-final{padding-top:28px!important;padding-bottom:28px!important}
  .mxon48-head h2,.mx-section-heading h2,.mx-section-title,.mx-feature-copy h2,.mx-video-copy h2,.mx-contact-card h2{font-size:clamp(24px,7vw,30px)!important;line-height:1.08!important}

  /* Footer: brand full width + 4 groups in a true 2 x 2 grid (two rows). */
  .mx-footer-v0141{padding:34px 0 calc(108px + env(safe-area-inset-bottom))!important;overflow:hidden!important}
  .mx-footer-v0141 .mx-wrap{width:calc(100% - 24px)!important}
  .mx-footer-grid-v0145,.mx-footer-v0141 .mx-footer-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:24px 18px!important;align-items:start!important}
  .mx-footer-grid-v0145 .mx-footer-brand,.mx-footer-v0141 .mx-footer-brand{grid-column:1/-1!important;margin:0!important;padding:0 0 4px!important}
  .mx-footer-brand p{margin-top:10px!important;font-size:11.5px!important;line-height:1.55!important;max-width:100%!important}
  .mx-footer-grid-v0145>div:not(.mx-footer-brand),.mx-footer-v0141 .mx-footer-grid>div:not(.mx-footer-brand){min-width:0!important;gap:0!important}
  .mx-footer-grid-v0145>div>strong,.mx-footer-v0141 .mx-footer-grid>div>strong{margin:0 0 9px!important;font-size:12px!important;line-height:1.3!important}
  .mx-footer-grid-v0145>div>a,.mx-footer-v0141 .mx-footer-grid>div>a{margin:0 0 7px!important;font-size:11.5px!important;line-height:1.38!important;overflow-wrap:anywhere!important}
  .mx-footer-bottom{display:flex!important;flex-direction:column!important;gap:10px!important;margin-top:24px!important;padding-top:16px!important;font-size:10.5px!important;line-height:1.45!important}
  .mx-footer-legal{display:flex!important;flex-wrap:wrap!important;gap:8px 12px!important;margin:0!important}

  /* Floating bottom dock: separated from footer/legal content and safe-area aware. */
  .mx-mobile-dock{left:8px!important;right:8px!important;bottom:calc(8px + env(safe-area-inset-bottom))!important;min-height:60px!important;border-radius:16px!important;border:1px solid rgba(255,255,255,.25)!important;box-shadow:0 10px 28px rgba(0,25,50,.22)!important}
  .mx-mobile-dock a{min-height:50px!important}
  .mx-mobile-dock em{font-size:9.5px!important}
}

/* Keep the footer 2-column / 2-row even on narrow phones. */
@media(max-width:430px){
  .mx-footer-grid-v0145,.mx-footer-v0141 .mx-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:22px 14px!important}
  .mx-footer-grid-v0145 .mx-footer-brand,.mx-footer-v0141 .mx-footer-brand{grid-column:1/-1!important}
  .mx49-brand-card figure{aspect-ratio:16/9!important}
}

@media(max-width:360px){
  .mx-footer-grid-v0145,.mx-footer-v0141 .mx-footer-grid{gap:20px 10px!important}
  .mx-footer-grid-v0145>div>a,.mx-footer-v0141 .mx-footer-grid>div>a{font-size:10.8px!important}
  .mx49-bridge__head h1{font-size:26px!important}
}

@media(orientation:landscape) and (max-height:560px) and (max-width:1024px){
  .mx49-film,.mxon50-video-hero,.mxon50-template-video{height:calc(100svh - 58px)!important;min-height:360px!important}
  .mx49-film .mx-film-toolbar{bottom:14px!important}
}

@media(prefers-reduced-motion:reduce){
  .mx-film-slide video,.mxon50-video-hero video,.mxon50-template-video>video{transition:none!important}
}