/* DESKTOP FIX: Mobil app parçaları masaüstünde görünmesin */
.mobile-app-header,
.mobile-search-sheet,
.mobile-bottom-menu,
.mobile-sticky-cart,
.mobile-cat-fab,
.mobile-cat-drawer,
.mobile-cat-backdrop,
.mobile-toast-premium{
  display:none !important;
}

@media (max-width:768px){
  .mobile-app-header{
    display:flex !important;
  }
  .mobile-search-sheet.show{
    display:block !important;
  }
  .mobile-bottom-menu{
    display:grid !important;
  }
  .mobile-cat-fab{
    display:flex !important;
  }
  .mobile-cat-drawer.show,
  .mobile-cat-backdrop.show{
    display:block !important;
  }
  .mobile-sticky-cart{
    display:grid !important;
  }
}


/* PRO MOBILE APP UI */
:root{
  --app-bg:#f4f6f8;
  --app-card:#ffffff;
  --app-text:#0f172a;
  --app-muted:#64748b;
  --app-dark:#111827;
  --app-red:#ef4444;
  --app-radius:22px;
}

@media (max-width:768px){
  html{background:var(--app-bg)!important}
  body{
    background:var(--app-bg)!important;
    color:var(--app-text)!important;
    padding-top:74px!important;
    padding-bottom:92px!important;
    -webkit-tap-highlight-color:transparent;
  }

  .container{
    padding-left:12px!important;
    padding-right:12px!important;
  }

  /* Hide bulky desktop header on mobile where possible */
  header:not(.mobile-app-header),
  .top-header,
  .header-main,
  .desktop-header,
  .main-header{
    display:none!important;
  }

  .mobile-app-header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:64px;
    z-index:99980;
    background:rgba(244,246,248,.88);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(15,23,42,.06);
    display:flex!important;
    align-items:center;
    gap:10px;
    padding:10px 12px;
  }
  .mobile-app-btn{
    width:42px;
    height:42px;
    border:0;
    border-radius:16px;
    background:#fff;
    color:#111827;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    box-shadow:0 8px 22px rgba(15,23,42,.08);
    text-decoration:none;
    flex:0 0 auto;
  }
  .mobile-app-logo{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .mobile-app-logo strong{
    font-size:16px;
    line-height:1.1;
    color:#111827;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .mobile-app-logo small{
    font-size:11px;
    color:#64748b;
    margin-top:2px;
  }

  .mobile-search-sheet{
    display:none;
    position:fixed;
    left:0;
    right:0;
    top:0;
    z-index:99999;
    background:#fff;
    border-radius:0 0 24px 24px;
    padding:14px;
    box-shadow:0 22px 55px rgba(15,23,42,.22);
  }
  .mobile-search-sheet.show{display:block}
  .mobile-search-row{
    display:grid;
    grid-template-columns:1fr 44px;
    gap:10px;
  }
  .mobile-search-row input{
    height:46px;
    border:1px solid #e5e7eb;
    border-radius:16px;
    padding:0 14px;
    font-size:15px;
    outline:none;
    background:#f8fafc;
  }

  .jl-page,
  .page,
  main.content{
    background:transparent!important;
  }

  .jl-card,
  .checkout-card,
  .cart-card,
  .pd-gallery,
  .pd-buybox,
  .pd-box,
  .acc-panel{
    border:0!important;
    border-radius:24px!important;
    box-shadow:0 12px 34px rgba(15,23,42,.07)!important;
    background:#fff!important;
  }

  .jl-hero{
    border-radius:28px!important;
    min-height:330px!important;
    overflow:hidden!important;
    box-shadow:0 18px 45px rgba(15,23,42,.16)!important;
  }
  .jl-hero:before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(15,23,42,.10),rgba(15,23,42,.68));
    pointer-events:none;
  }
  .jl-hero-content{
    position:relative;
    z-index:2;
    justify-content:flex-end!important;
    min-height:330px!important;
    display:flex!important;
    flex-direction:column!important;
  }
  .jl-kicker{
    background:rgba(255,255,255,.14)!important;
    color:#fff!important;
    border:1px solid rgba(255,255,255,.25)!important;
    backdrop-filter:blur(10px);
    width:max-content;
    border-radius:999px!important;
    padding:7px 11px!important;
  }
  .jl-hero h1{
    color:#fff!important;
    font-size:26px!important;
    letter-spacing:-.4px!important;
  }
  .jl-hero p{
    color:rgba(255,255,255,.86)!important;
  }

  .jl-feature{
    border:0!important;
    border-radius:20px!important;
    box-shadow:0 10px 28px rgba(15,23,42,.06)!important;
  }

  .jl-section-head{
    padding:0 2px!important;
  }
  .jl-section-head h2{
    font-size:22px!important;
    letter-spacing:-.3px!important;
  }

  .jl-prod{
    border:0!important;
    border-radius:24px!important;
    overflow:hidden!important;
    background:#fff!important;
    box-shadow:0 12px 32px rgba(15,23,42,.08)!important;
  }
  .jl-prod-image{
    border-radius:0!important;
    background:#f8fafc!important;
  }
  .jl-prod-image img{
    object-fit:contain!important;
    padding:8px!important;
    background:#fff!important;
  }
  .jl-prod-body{
    padding:12px!important;
  }
  .jl-prod-body h3{
    color:#111827!important;
    font-weight:900!important;
    letter-spacing:-.1px!important;
  }
  .jl-price .new{
    color:#ef4444!important;
    font-weight:950!important;
  }
  .jl-prod-actions .jl-btn{
    background:#111827!important;
    color:#fff!important;
    border-radius:16px!important;
    min-height:42px!important;
    box-shadow:0 10px 22px rgba(15,23,42,.18)!important;
  }
  .jl-prod-actions .jl-btn-secondary{
    background:#f1f5f9!important;
    color:#111827!important;
    border-radius:16px!important;
    min-height:42px!important;
  }

  .mobile-bottom-menu{
    left:12px!important;
    right:12px!important;
    bottom:12px!important;
    height:68px!important;
    border-radius:26px!important;
    background:rgba(17,24,39,.94)!important;
    border:1px solid rgba(255,255,255,.08)!important;
    box-shadow:0 24px 55px rgba(15,23,42,.34)!important;
  }
  .mobile-bottom-menu a{
    color:rgba(255,255,255,.78)!important;
  }
  .mobile-bottom-menu a b{
    filter:grayscale(.1);
  }
  .mobile-bottom-menu a.active,
  .mobile-bottom-menu a:hover{
    color:#fff!important;
  }

  .mobile-cat-fab{
    bottom:94px!important;
    background:#ef4444!important;
    border-radius:20px!important;
    box-shadow:0 16px 32px rgba(239,68,68,.28)!important;
  }
  .mobile-cat-drawer{
    border-radius:30px 30px 0 0!important;
    background:#f8fafc!important;
  }
  .mobile-cat-list a{
    background:#fff!important;
    border:0!important;
    border-radius:18px!important;
    box-shadow:0 8px 22px rgba(15,23,42,.05)!important;
  }

  .mobile-sticky-cart{
    bottom:92px!important;
    border-radius:26px!important;
    background:rgba(255,255,255,.98)!important;
    border:0!important;
    box-shadow:0 22px 50px rgba(15,23,42,.24)!important;
  }
  .mobile-sticky-cart button{
    border-radius:20px!important;
    background:linear-gradient(135deg,#ef4444,#dc2626)!important;
  }

  .pd-main{
    border-radius:24px!important;
    background:#fff!important;
  }
  .pd-main img{
    object-fit:contain!important;
    padding:14px!important;
  }
  .pd-title{
    letter-spacing:-.5px!important;
    font-weight:950!important;
  }

  .checkout-card,
  .cart-card{
    border-radius:26px!important;
  }

  .mobile-toast-premium{
    border-radius:20px!important;
    background:#111827!important;
    box-shadow:0 20px 42px rgba(15,23,42,.34)!important;
  }

  /* app-like page animation */
  .jl-page,
  .container > .jl-section,
  .checkout-layout,
  .cart-wrap,
  .pd-wrap{
    animation:appFadeUp .22s ease both;
  }
  @keyframes appFadeUp{
    from{opacity:0;transform:translateY(8px)}
    to{opacity:1;transform:translateY(0)}
  }
}

@media (max-width:390px){
  .mobile-app-header{height:60px;padding:9px 10px}
  body{padding-top:68px!important}
  .mobile-app-btn{width:40px;height:40px}
  .mobile-app-logo strong{font-size:14px}
}


/* MOBILE SLIDER FIX */
@media (max-width:768px){
  .jl-hero,
  .hero,
  .slider,
  .swiper,
  .swiper-container,
  .slick-slider,
  .owl-carousel{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    position:relative!important;
    z-index:1!important;
    pointer-events:auto!important;
    overflow:hidden!important;
  }

  .jl-hero:before{
    pointer-events:none!important;
    z-index:1!important;
  }

  .jl-hero-content{
    pointer-events:auto!important;
    z-index:3!important;
  }

  .swiper-wrapper,
  .slick-track,
  .owl-stage{
    display:flex!important;
  }

  .swiper-slide,
  .slick-slide,
  .owl-item{
    display:block!important;
    height:auto!important;
  }

  .slider img,
  .swiper img,
  .slick-slider img,
  .owl-carousel img,
  .jl-hero img{
    display:block!important;
    max-width:100%!important;
  }

  .swiper-button-next,
  .swiper-button-prev,
  .slick-arrow,
  .owl-nav{
    z-index:5!important;
    pointer-events:auto!important;
  }

  .swiper-pagination,
  .slick-dots,
  .owl-dots{
    z-index:5!important;
    pointer-events:auto!important;
  }

  /* App header slider üstüne binmesin */
  .mobile-app-header{
    z-index:99980!important;
  }

  /* Slayt alanı app header altında düzgün başlasın */
  .jl-home-grid > div:first-child,
  .jl-hero{
    margin-top:0!important;
  }
}