/* V40 | Mobile carousel layout rebuild.
   Scoped exclusively to mobile. Original imagery, copy, desktop layout,
   data model, video, gradients and modal behavior stay unchanged. */
@media (max-width:700px) {
  /* Natural three-row hero composition: content / product / navigation.
     This removes the V39 gap introduced by independent absolute positioning. */
  .site--platonik main > .hero {
    box-sizing:border-box!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    height:auto!important;
    min-height:clamp(665px,90svh,762px)!important;
    max-height:none!important;
    padding:94px 18px 24px!important;
    overflow:hidden!important;
  }
  .site--platonik .hero .hero-copy {
    order:1!important;
    position:relative!important;
    inset:auto!important;
    top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;
    transform:none!important;
    width:100%!important;
    max-width:500px!important;
    flex:0 0 auto!important;
    margin:0 auto!important;
    padding:0!important;
    gap:0!important;
    text-align:left!important;
    align-items:stretch!important;
  }
  .site--platonik .hero .hero-eyebrow {
    margin:0 0 10px!important;
    font-size:10px!important;
    line-height:1.45!important;
    letter-spacing:.11em!important;
    max-width:100%;
  }
  .site--platonik .hero .hero-copy h1 {
    margin:0!important;
    font-size:clamp(33px,9.2vw,45px)!important;
    line-height:1.045!important;
    letter-spacing:-.045em!important;
    gap:5px!important;
    max-width:100%!important;
  }
  .site--platonik .hero .hero-copy h1 em {
    font-size:clamp(16px,4.25vw,21px)!important;
    line-height:1.3!important;
    letter-spacing:-.015em!important;
    max-width:100%!important;
  }
  .site--platonik .hero .hero-subtitle {
    margin:11px 0 0!important;
    font-size:clamp(13px,3.5vw,15px)!important;
    line-height:1.47!important;
    max-width:440px!important;
  }
  .site--platonik .hero .hero-actions {
    margin:16px 0 0!important;
    display:flex!important;
    align-items:center!important;
    flex-wrap:wrap!important;
    gap:12px 16px!important;
    min-width:0!important;
  }
  .site--platonik .hero .hero-cta {
    margin:0!important;
    min-height:44px!important;
    padding:11px 15px!important;
    font-size:11px!important;
    border-radius:7px!important;
    box-sizing:border-box!important;
  }
  .site--platonik .hero .hero-text-link {
    margin:0!important;
    font-size:11px!important;
    padding:9px 0!important;
  }
  .site--platonik .hero .hero-product-scene {
    order:2!important;
    position:relative!important;
    inset:auto!important;
    left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
    width:calc(100% + 30px)!important;
    max-width:none!important;
    min-height:260px!important;
    height:auto!important;
    flex:1 1 288px!important;
    margin:8px -15px 0!important;
    padding:0!important;
    overflow:visible!important;
    transform:none!important;
  }
  .site--platonik .hero .hero-scene-image {
    width:100%!important;
    max-width:100%!important;
    height:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
    object-position:center center!important;
    scale:1.08;
  }
  .site--platonik .hero .hero-orbit,
  .site--platonik .hero .hero-product-scene::before {display:none!important;}
  .site--platonik .hero .hero-bottom {
    position:relative!important;
    order:3!important;
    inset:auto!important;
    left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    display:grid!important;
    grid-template-columns:42px auto minmax(0,1fr) 42px!important;
    align-items:center!important;
    justify-items:stretch!important;
    gap:10px!important;
    flex:0 0 44px!important;
    min-height:44px!important;
    width:100%!important;
    margin:6px auto 0!important;
    padding:0!important;
  }
  .site--platonik .hero .hero-bottom::before,
  .site--platonik .hero .hero-socials {display:none!important;}
  .site--platonik .hero .hero-step {
    width:42px!important;height:42px!important;
    min-width:42px!important;min-height:42px!important;
    max-width:42px!important;max-height:42px!important;
    padding:0!important;border-radius:50%!important;
    box-sizing:border-box!important;
    display:grid!important;place-items:center!important;
    border:1px solid rgba(255,255,255,.7)!important;
    background:rgba(18,65,166,.2)!important;
    transform:none!important;
  }
  .site--platonik .hero .hero-step svg {
    width:18px!important;height:18px!important;
    min-width:18px!important;min-height:18px!important;
    flex:none!important;display:block!important;
  }
  .site--platonik .hero .hero-index {font-size:11px!important;white-space:nowrap!important;}
  .site--platonik .hero .hero-dots {
    display:flex!important;align-items:center!important;justify-content:center!important;
    gap:5px!important;min-width:0!important;width:100%!important;
  }
  .site--platonik .hero .hero-dots button,
  .site--platonik .hero .hero-dots button.active {
    width:auto!important;min-width:0!important;max-width:none!important;
    height:3px!important;flex:1 1 0!important;
    border-radius:999px!important;
  }
  .site--platonik .hero .hero-dots button.active {background:#fff!important;}
  .site--platonik .hero.hero-has-video .hero-product-scene {visibility:hidden!important;opacity:0!important;}
  .site--platonik .hero.hero-has-video .hero-copy {visibility:hidden!important;opacity:0!important;pointer-events:none!important;}

  /* Cards use nearly the whole mobile width. Separate controls below;
     they no longer squeeze the imagery or overlap the card edges. */
  .site--platonik #urunler .product-carousel.slider-zone {
    display:grid!important;
    position:relative!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    grid-template-rows:auto 44px!important;
    align-items:center!important;
    justify-items:center!important;
    column-gap:16px!important;
    row-gap:15px!important;
    width:100%!important;
    max-width:450px!important;
    margin:0 auto!important;
    padding:0!important;
    overflow:visible!important;
  }
  .site--platonik #urunler #productCards.product-list {
    grid-column:1/-1!important;
    grid-row:1!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    justify-items:stretch!important;
    min-width:0!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
  }
  .site--platonik #urunler #productCards .showcase-card {
    box-sizing:border-box!important;
    width:100%!important;
    max-width:none!important;
    height:clamp(360px,54svh,490px)!important;
    min-width:0!important;
    margin:0!important;
  }
  .site--platonik #urunler .product-carousel .slider-arrow {
    position:relative!important;
    inset:auto!important;
    top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;
    display:grid!important;place-items:center!important;
    width:44px!important;height:44px!important;
    min-width:44px!important;min-height:44px!important;
    max-width:44px!important;max-height:44px!important;
    margin:0!important;padding:0!important;
    border-radius:50%!important;
    box-sizing:border-box!important;
    justify-self:center!important;align-self:center!important;
    transform:none!important;
    background:rgba(255,255,255,.13)!important;
    border:1px solid rgba(255,255,255,.7)!important;
  }
  .site--platonik #urunler #productPrev {
    grid-column:1!important;grid-row:2!important;justify-self:end!important;
  }
  .site--platonik #urunler #productNext {
    grid-column:2!important;grid-row:2!important;justify-self:start!important;
  }
  .site--platonik #urunler .product-carousel .slider-arrow svg {
    width:18px!important;height:18px!important;
    min-width:18px!important;min-height:18px!important;
    flex:none!important;display:block!important;
  }
  .site--platonik #urunler .product-actions {margin-top:5px!important;}
  .site--platonik #urunler .products-heading {margin-bottom:2px!important;}
}
@media (max-width:370px) {
  .site--platonik main > .hero {padding:89px 16px 19px!important;min-height:660px!important;}
  .site--platonik .hero .hero-copy h1 {font-size:clamp(30px,9.1vw,34px)!important;}
  .site--platonik .hero .hero-actions {gap:8px!important;}
  .site--platonik .hero .hero-cta {padding:10px 12px!important;font-size:10px!important;}
  .site--platonik .hero .hero-text-link {font-size:10px!important;}
  .site--platonik .hero .hero-bottom {grid-template-columns:40px auto minmax(0,1fr) 40px!important;gap:7px!important;}
  .site--platonik .hero .hero-step {width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;max-width:40px!important;max-height:40px!important;}
  .site--platonik #urunler #productCards .showcase-card {height:clamp(344px,54svh,448px)!important;}
}
@media (prefers-reduced-motion:reduce) {
  .site--platonik .hero .hero-scene-image{scale:1!important;}
}
