/* ======================================================================
   KANO — iPhone Mobile Overrides (HOME)
   Target: iPhone widths (<= 430px). Load AFTER existing CSS files.
   Goals:
   - Promo bar stays usable
   - Menu links stay visible
   - Carousels become swipe (hide arrow buttons)
   - Prevent horizontal overflow
   ====================================================================== */

@media (max-width: 430px){

  /* ---------- GLOBAL: overflow + spacing ---------- */
  html, body{
    overflow-x: hidden;
  }
  .container{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ---------- PROMO BAR (kalsın, sığsın) ---------- */
  .promo-bar .promo-inner{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }
  .promo-bar .promo-left{
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px 10px !important;
    min-width: 0 !important;
  }
  .promo-bar .promo-text,
  .promo-bar .promo-timer{
    font-size: 12.5px !important;
    line-height: 1.2 !important;
  }
  .promo-bar .promo-cta{
    padding: 8px 10px !important;
    font-size: 12.5px !important;
    white-space: nowrap !important;
  }
  .promo-bar .promo-close{
    width: 34px !important;
    height: 34px !important;
    line-height: 34px !important;
  }

  /* ---------- UTILITY BAR (tek satır, taşarsa scroll) ---------- */
  .utility-bar .utility-inner{
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none;
  }
  .utility-bar .utility-inner::-webkit-scrollbar{ display:none; }
  .utility-bar .utility-link{
    font-size: 12.5px !important;
    white-space: nowrap !important;
  }
  .utility-bar .ui-ico{
    width: 16px !important;
    height: 16px !important;
  }

  /* ---------- HEADER LAYOUT (logo + icons, nav visible, search full width) ---------- */
  .nav-search-inner{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
  }

  /* logo */
  .header-logo{
    flex: 0 0 auto !important;
    max-width: 52% !important;
  }
  .header-logo img{
    height: 26px !important;
    width: auto !important;
  }

  /* right actions container (fav + cart top row, search below) */
  .header-actions.header-right{
    flex: 1 1 auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
  }

  /* icons on top row */
  .header-actions .header-fav,
  .header-actions .header-cart{
    order: 1 !important;
  }
  .header-actions .ui-ico{
    width: 22px !important;
    height: 22px !important;
  }

  /* nav links MUST be visible: put on its own row */
  .nav-center{
    order: 2 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
  }
  .nav-links{
    display: flex !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none;
    padding-bottom: 2px !important;
  }
  .nav-links::-webkit-scrollbar{ display:none; }
  .nav-link{
    font-size: 14px !important;
    white-space: nowrap !important;
    padding: 8px 10px !important;
  }
  .nav-b2b-badge{
    font-size: 11px !important;
    padding: 2px 6px !important;
  }

  /* search full width on its own row */
  .header-search-main{
    order: 3 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    margin-top: 8px !important;
  }
  .header-search-main input{
    width: 100% !important;
    height: 40px !important;
    font-size: 14px !important;
  }
  .header-search-main button{
    width: 44px !important;
    height: 40px !important;
  }
  .search-suggestions{
    max-height: 42vh !important;
    overflow: auto !important;
  }
  .search-suggestion{
    padding: 12px 12px !important;
    font-size: 14px !important;
  }

  /* submenu hover menüler mobilde problem çıkarır: dokunmada açılmıyor, kazara taşır */
  .nav-submenu{
    display: none !important;
  }

  /* ---------- HERO (çakışma azalt) ---------- */
  .hero-slider{
    overflow: hidden !important;
  }
  .hero-overlay{
    left: 16px !important;
    right: 16px !important;
    max-width: none !important;
  }
  .hero-overlay h1{
    font-size: 28px !important;
    line-height: 1.05 !important;
  }
  .hero-overlay p{
    font-size: 14px !important;
    line-height: 1.35 !important;
  }
  .hero-buttons{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .hero-buttons .btn{
    width: 100% !important;
    justify-content: center !important;
  }
  /* Hero oklarını mobilde gizle (görüntü çakışmasın) */
  .hero-nav{
    display: none !important;
  }

  /* ---------- BESTSELLERS: ok gizle, swipe ---------- */
  .home-products-carousel{
    position: relative !important;
  }
  .home-products-next{
    display: none !important;
  }
  .home-products-row{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    gap: 14px !important;
    padding-bottom: 6px !important;
    scrollbar-width: none;
  }
  .home-products-row::-webkit-scrollbar{ display:none; }
  .home-products-row > *{
    scroll-snap-align: start !important;
  }

  /* ---------- BENEFITS: ok gizle, swipe ---------- */
  .kano-benefits-next{
    display: none !important;
  }
  .kano-benefits-viewport{
    overflow: hidden !important;
  }
  #kanoBenefitsRow{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    gap: 14px !important;
    padding-bottom: 6px !important;
    scrollbar-width: none;
  }
  #kanoBenefitsRow::-webkit-scrollbar{ display:none; }
  #kanoBenefitsRow .kano-benefit-item{
    scroll-snap-align: start !important;
  }

  /* ---------- TREND: ok gizle, swipe ---------- */
  .trending-carousel-section .section-actions{
    display: none !important;
  }
  .trend-carousel{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    gap: 14px !important;
    padding-bottom: 6px !important;
    scrollbar-width: none;
  }
  .trend-carousel::-webkit-scrollbar{ display:none; }
  .trend-card{
    scroll-snap-align: start !important;
  }

  /* ---------- TRUST: ok gizle, swipe ---------- */
  .trust-nav{
    display: none !important;
  }
  .trust-row{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    gap: 14px !important;
    padding-bottom: 8px !important;
    scrollbar-width: none;
  }
  .trust-row::-webkit-scrollbar{ display:none; }
  .trust-card{
    scroll-snap-align: start !important;
  }

  /* ---------- GIFT VOUCHER: stack ---------- */
  .gift-voucher-card{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .gift-voucher-actions{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .gift-voucher-actions .btn{
    width: 100% !important;
    justify-content: center !important;
  }

  /* ---------- GIFT CUSTOM: stack + buttons full ---------- */
  .gift-custom-inner{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .gift-custom-image img{
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
  .gift-custom-content h2{
    font-size: 26px !important;
    line-height: 1.1 !important;
  }
  .gift-custom-btn{
    width: 100% !important;
  }

  /* ---------- BULK / PLANET: padding küçült ---------- */
  .bulk-top-block{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .bulk-top-layout{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .bulk-top-features{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .bulk-top-contact-row{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Planet section inline CSS var; burada ekstra sıkılaştır */
  .page-section{
    padding: 36px 0 !important;
  }
  .sustain-split-image img{
    border-radius: 16px !important;
  }

}
/* =========================================================
   KANO — iPhone Mobile Fix Pack (HOME)
   Target: iPhone widths (<= 430px)
   ========================================================= */

@media (max-width: 430px){

  /* 0) Genel: yatay kaymaları bitir */
  html, body{ overflow-x: hidden; }

  /* 1) Kupon / Kampanya barı MOBİLDE HİÇ ÇIKMASIN */
  #promoBar{ display: none !important; }

  /* 2) HERO: banner küçük kalmasın + butonlar büyük/tıklanabilir olsun */
  .hero-slider{
    /* slider alanı daha “hero” gibi dursun */
    min-height: 48vh !important;
  }

  .hero-slider .hero-slide img{
    /* görsel küçük kalmasın */
    width: 100% !important;
    height: 48vh !important;
    min-height: 320px !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }

  .hero-overlay{
    /* yazı/butonlar tam ortalı ve dengeli */
    left: 16px !important;
    right: 16px !important;
    top: 55% !important;
    transform: translateY(-50%) !important;
    text-align: center !important;
  }

  .hero-overlay h1{
    font-size: 30px !important;
    line-height: 1.05 !important;
    margin-bottom: 8px !important;
  }
  .hero-overlay p{
    font-size: 15px !important;
    line-height: 1.35 !important;
    margin-bottom: 14px !important;
  }

  .hero-buttons{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    justify-items: center !important;
  }

  .hero-buttons .btn{
    width: 100% !important;
    max-width: 360px !important;
    min-height: 48px !important;     /* tap-friendly */
    font-size: 16px !important;
    border-radius: 12px !important;
  }

  /* okları mobilde gizle (swipe ile ilerlesin) */
  .hero-nav{ display: none !important; }

  /* 3) “Şimdi Tasarla” pill bar: ortala + taşmayı düzelt */
  .home-category-bar{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    text-align: center !important;
  }

  .home-category-label{
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin: 0 !important;
  }

  .home-category-pills{
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
  }

  .home-category-pills .cat-pill{
    min-height: 46px !important;
    padding: 10px 16px !important;
    font-size: 16px !important;
  }

  /* Bestsellers okunu gizle + swipe */
  .home-products-next{ display: none !important; }
  .home-products-row{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    gap: 14px !important;
    padding-bottom: 8px !important;
    scrollbar-width: none;
  }
  .home-products-row::-webkit-scrollbar{ display:none; }
  .home-products-row > *{ scroll-snap-align: start !important; }

  /* Benefits okunu gizle + swipe */
  .kano-benefits-next{ display: none !important; }
  #kanoBenefitsRow{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    gap: 14px !important;
    padding-bottom: 8px !important;
    scrollbar-width: none;
  }
  #kanoBenefitsRow::-webkit-scrollbar{ display:none; }
  #kanoBenefitsRow .kano-benefit-item{ scroll-snap-align: start !important; }

  /* Trend okları gizle + swipe */
  .trending-carousel-section .section-actions{ display: none !important; }
  .trend-carousel{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    gap: 14px !important;
    padding-bottom: 8px !important;
    scrollbar-width: none;
  }
  .trend-carousel::-webkit-scrollbar{ display:none; }
  .trend-card{ scroll-snap-align: start !important; }

  /* Yorum okları gizle + swipe */
  .trust-nav{ display: none !important; }
  .trust-row{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    gap: 14px !important;
    padding-bottom: 10px !important;
    scrollbar-width: none;
  }
  .trust-row::-webkit-scrollbar{ display:none; }
  .trust-card{ scroll-snap-align: start !important; }

  /* 4) HAKKIMIZDA: görsel üstte olsun (şu an altta kalıyor) */
  .about-inner{
    display: flex !important;
    flex-direction: column-reverse !important; /* image -> content */
    gap: 16px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .about-image img{
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    object-fit: contain !important;
  }

  .about-buttons{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  .about-btn{
    min-height: 48px !important;
    font-size: 16px !important;
  }

  /* 5) TOPTAN ALIŞVERİŞ: görsel ortala + kayıklığı düzelt */
  .bulk-top-layout{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .bulk-top-image-wrap{
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .bulk-top-image-wrap img{
    width: 100% !important;
    max-width: 420px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    object-fit: cover !important;
    object-position: center !important;
  }

}
/* =========================================================
   KANO — iPhone Mobile Header Layout (<=430px)
   Top row: Logo + Search
   Second row: Nav links + (right) Fav + Cart
   + Promo bar mobile hide
   ========================================================= */

@media (max-width: 430px){

  /* 0) Mobilde kupon/promo bar görünmesin */
  #promoBar{ display: none !important; }

  /* 1) Header ana grid */
  .site-header .nav-search-bar .nav-search-inner{
    display: grid !important;
    grid-template-columns: auto 1fr auto auto !important;
    grid-template-areas:
      "logo  search search search"
      "nav   nav    fav    cart" !important;
    align-items: center !important;
    gap: 10px 10px !important;
  }

  /* 2) .header-actions içindekileri grid item yap (form + fav + cart) */
  .site-header .nav-search-bar .header-actions.header-right{
    display: contents !important;
  }

  /* 3) Grid alanları */
  .site-header .header-logo{ grid-area: logo !important; }
  .site-header form.header-search-main{ grid-area: search !important; }
  .site-header .nav-center{ grid-area: nav !important; min-width: 0 !important; }
  .site-header a.header-fav{ grid-area: fav !important; justify-self: end !important; }
  .site-header button.header-cart{ grid-area: cart !important; justify-self: end !important; }

  /* 4) Logo */
  .site-header .header-logo img{
    height: 26px !important;
    width: auto !important;
    display: block !important;
  }

  /* 5) Search tek satır, usable size */
  .site-header form.header-search-main{
    width: 100% !important;
    margin: 0 !important;
  }
  .site-header form.header-search-main input{
    height: 40px !important;
    font-size: 14px !important;
    padding: 0 44px 0 14px !important;
  }
  .site-header form.header-search-main button{
    width: 44px !important;
    height: 40px !important;
  }

  /* 6) Nav linkleri: tek satır + swipe (taşarsa yatay kaydır) */
  .site-header .nav-links{
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none;
    min-width: 0 !important;
  }
  .site-header .nav-links::-webkit-scrollbar{ display:none; }

  /* Mobilde hover submenu’lar sorun çıkarır; kapatıyoruz */
  .site-header .nav-submenu{ display: none !important; }

  /* 7) Kalp + sepet dokunulabilir alan */
  .site-header .header-icon,
  .site-header .header-cart{
    width: 40px !important;
    height: 40px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 10px !important;
  }
  .site-header .header-icon .ui-ico,
  .site-header .header-cart .ui-ico{
    width: 22px !important;
    height: 22px !important;
  }
}
/* =========================================================
   HERO / BANNER — iPhone'da daha büyük (<= 430px)
   ========================================================= */
@media (max-width: 430px){

  /* Slider alanını büyüt */
  .hero-slider{
    min-height: 62vh !important;      /* 48-52 küçük kalmıştı */
  }

  /* Her slide görseli: yüksekliği doldursun */
  .hero-slider .hero-slide{
    min-height: 62vh !important;
  }

  .hero-slider .hero-slide img{
    width: 100% !important;
    height: 62vh !important;
    min-height: 420px !important;     /* iPhone’da “hero” hissi */
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }

  /* Overlay: ortada ve okunaklı */
  .hero-overlay{
    left: 16px !important;
    right: 16px !important;
    top: 58% !important;
    transform: translateY(-50%) !important;
    text-align: center !important;
    max-width: none !important;
  }

  /* Başlık/alt metin biraz daha “hero” olsun */
  .hero-overlay h1{
    font-size: 34px !important;
    line-height: 1.04 !important;
    margin-bottom: 10px !important;
  }
  .hero-overlay p{
    font-size: 16px !important;
    line-height: 1.35 !important;
    margin-bottom: 16px !important;
  }

  /* Butonlar: tap-friendly */
  .hero-buttons{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    justify-items: center !important;
  }
  .hero-buttons .btn{
    width: 100% !important;
    max-width: 380px !important;
    min-height: 52px !important;
    font-size: 17px !important;
    border-radius: 12px !important;
  }

  /* Mobilde oklar kapalı kalsın (swipe) */
  .hero-nav{ display:none !important; }
}
/* =========================================================
   HERO / BANNER — daha da büyük (override) (<= 430px)
   ========================================================= */
@media (max-width: 430px){

  .hero-slider{
    min-height: 72vh !important;
  }

  .hero-slider .hero-slide{
    min-height: 72vh !important;
  }

  .hero-slider .hero-slide img{
    height: 72vh !important;
    min-height: 500px !important;   /* iPhone’da ciddi hero hissi */
    object-fit: cover !important;
    object-position: center !important;
  }

  /* Overlay’i biraz yukarı al ki yazı/buton “fold”da kalsın */
  .hero-overlay{
    top: 54% !important;
  }

  /* Yazıları da büyütelim */
  .hero-overlay h1{
    font-size: 38px !important;
    line-height: 1.02 !important;
  }

  .hero-overlay p{
    font-size: 17px !important;
    line-height: 1.35 !important;
  }

  /* Butonlar biraz daha büyük */
  .hero-buttons .btn{
    min-height: 56px !important;
    font-size: 18px !important;
    max-width: 390px !important;
  }
}
/* =========================================================
   HERO BUTTONS — Spreadshirt gibi yan yana + daha kompakt
   ========================================================= */
@media (max-width: 430px){

  /* Butonları alt alta değil, yan yana yap */
  .hero-buttons{
    display: flex !important;
    flex-direction: row !important;
    gap: 14px !important;
    justify-content: flex-start !important;
    align-items: center !important;

    /* Spreadshirt gibi: tam genişlik değil, daha kontrollü */
    max-width: 360px !important;
    margin: 14px 0 0 0 !important;
  }

  .hero-buttons .btn{
    flex: 1 1 0 !important;          /* iki buton eşit pay */
    width: auto !important;
    max-width: none !important;

    /* Bizdekiler dev gibi; küçült */
    min-height: 48px !important;     /* tap-friendly ama şişkin değil */
    padding: 12px 14px !important;
    font-size: 16px !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
  }

  /* Çok dar ekran olursa (SE gibi) sığmazsa: 2 satıra düşsün */
  @media (max-width: 360px){
    .hero-buttons{
      flex-wrap: wrap !important;
      max-width: 100% !important;
    }
    .hero-buttons .btn{
      flex: 1 1 100% !important;
    }
  }
}
/* =========================================================
   HERO ALIGNMENT — Spreadshirt gibi sola hizalı (iPhone)
   ========================================================= */
@media (max-width: 430px){

  /* Overlay’i ortadan sola al */
  .hero-overlay{
    text-align: left !important;
    left: 18px !important;
    right: 18px !important;
    top: 58% !important; /* butonlar görünsün */
    transform: translateY(-50%) !important;
  }

  /* Başlık ve alt metin sola yaslansın */
  .hero-overlay h1,
  .hero-overlay p{
    text-align: left !important;
  }

  /* Buton grubu da sola yaslı + yan yana (önceki patch ile uyumlu) */
  .hero-buttons{
    justify-content: flex-start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
/* =========================================================
   HERO — Spreadshirt layout: sol-altta overlay + yan yana buton
   (bu patch, önceki hero-align/hero-buttons ayarlarını ezer)
   ========================================================= */
@media (max-width: 430px){

  /* Slider konteynerleri pozisyon referansı olsun */
  .hero-slider,
  .hero-slider .hero-slider-inner{
    position: relative !important;
  }

  /* Slide görseli büyük kalsın */
  .hero-slider .hero-slide img{
    width: 100% !important;
    height: 72vh !important;
    min-height: 500px !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }

  /* Overlay’i tam slide üstüne yay, içeriği sol-alt’a yerleştir */
  .hero-slider .hero-overlay{
    position: absolute !important;
    inset: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;  /* aşağı */
    align-items: flex-start !important;    /* sola */

    padding: 0 18px 22px 18px !important;
    text-align: left !important;

    /* overlay tıklamayı engellemesin */
    pointer-events: none !important;
  }
  .hero-slider .hero-overlay *{
    pointer-events: auto !important;
  }

  /* Tipografi: solda, daha “hero” */
  .hero-slider .hero-overlay h1{
    font-size: 40px !important;
    line-height: 1.02 !important;
    margin: 6px 0 10px 0 !important;
    text-align: left !important;
  }
  .hero-slider .hero-overlay p{
    font-size: 16px !important;
    line-height: 1.35 !important;
    margin: 0 0 16px 0 !important;
    text-align: left !important;
  }

  /* Butonlar: Spreadshirt gibi yan yana ve kompakt (full-width değil) */
  .hero-slider .hero-overlay .hero-buttons{
    display: flex !important;
    flex-direction: row !important;
    gap: 14px !important;

    width: 100% !important;
    max-width: 360px !important;
    margin: 0 !important;
  }

  .hero-slider .hero-overlay .hero-buttons .btn{
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;

    min-height: 52px !important;     /* tap-friendly ama dev değil */
    padding: 12px 16px !important;
    font-size: 16px !important;
    border-radius: 10px !important;
    white-space: nowrap !important;

    /* Spreadshirt hissi: beyaz kart buton */
    background: rgba(255,255,255,0.92) !important;
    border: 1px solid rgba(0,0,0,0.16) !important;
  }

  /* Buton hover/active hissi mobilde daha temiz */
  .hero-slider .hero-overlay .hero-buttons .btn:active{
    transform: translateY(1px) !important;
  }

  /* Çok dar ekranda (SE) alt alta düşsün */
  @media (max-width: 360px){
    .hero-slider .hero-overlay .hero-buttons{
      flex-wrap: wrap !important;
      max-width: 100% !important;
    }
    .hero-slider .hero-overlay .hero-buttons .btn{
      flex: 1 1 100% !important;
    }
  }

  /* Mobilde oklar kapalı kalsın (swipe) */
  .hero-slider .hero-nav{ display:none !important; }
}
/* =========================================================
   HERO FIX — butonlar kaybolmasın: overlay yukarı + safe-area
   ========================================================= */
@media (max-width: 430px){

  /* Overlay'i yukarı al + alt safe-area boşluğu bırak */
  .hero-slider .hero-overlay{
    justify-content: flex-end !important;
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    /* 96px: Safari alt bar + dot alanı için güvenli pay */
  }

  /* Butonları da biraz kompaktlaştır (daha rahat sığsın) */
  .hero-slider .hero-overlay .hero-buttons{
    max-width: 340px !important;
  }

  .hero-slider .hero-overlay .hero-buttons .btn{
    min-height: 48px !important;
    padding: 11px 14px !important;
    font-size: 15.5px !important;
  }
}
/* =========================================================
   HERO TUNING — butonlar biraz daha yukarı + daha nazik
   ========================================================= */
@media (max-width: 430px){

  /* 1) Overlay'i 1 tık yukarı al */
  .hero-slider .hero-overlay{
    padding-bottom: calc(128px + env(safe-area-inset-bottom, 0px)) !important;
    /* önceki 96px/120px ayarını ezer -> butonları yukarı taşır */
  }

  /* 2) Buton grubu: biraz daha kompakt ve Spreadshirt gibi */
  .hero-slider .hero-overlay .hero-buttons{
    max-width: 332px !important;  /* çok geniş olmasın */
    gap: 12px !important;
    margin-top: 10px !important;
  }

  .hero-slider .hero-overlay .hero-buttons .btn{
    min-height: 48px !important;
    padding: 10px 14px !important;
    font-size: 15px !important;

    border-radius: 8px !important;                 /* daha “nazik” */
    background: rgba(255,255,255,0.88) !important; /* daha hafif */
    border: 1px solid rgba(0,0,0,0.14) !important; /* daha ince */
    box-shadow: 0 6px 18px rgba(0,0,0,0.12) !important; /* soft */
    backdrop-filter: saturate(120%) blur(4px);
    -webkit-backdrop-filter: saturate(120%) blur(4px);
  }

  /* Buton içindeki yazı biraz daha sakin */
  .hero-slider .hero-overlay .hero-buttons .btn span,
  .hero-slider .hero-overlay .hero-buttons .btn{
    font-weight: 600 !important; /* çok kalınsa 500'e çekebiliriz */
    letter-spacing: 0.1px !important;
  }
}

/* =========================================================
   PATCH — Mobile alignment fix for OUR PLANET (image) + overflow guard
   ========================================================= */
@media (max-width: 430px){
  /* 1) OUR PLANET: image block full width on column layout */
  .sustain-split{
    align-items: stretch !important; /* instead of flex-start */
    gap: 18px !important;
  }
  .sustain-split-image{
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;
  }
  .sustain-split-image img{
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
  }

  /* 2) BENEFITS: stop any element from widening the page */
  .kano-benefits .container,
  .kano-benefits-viewport{
    overflow: hidden !important;
  }
  #kanoBenefitsRow{
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    gap: 14px !important;
  }
  #kanoBenefitsRow .kano-benefit-item{
    flex: 0 0 86% !important; /* one card + a small peek */
    max-width: 86% !important;
  }
  .kano-benefits-next{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* 3) extra guard */
  .page-section--split,
  .page-section--narrow{
    overflow-x: hidden !important;
  }
}
/* =========================================================
   PATCH — Mobile hero CTA daha aşağı insin (yazı + butonlar)
   ========================================================= */
@media (max-width: 430px){

  /* hero yüksekliği stabil kalsın */
  .hero-slider,
  .hero-slide{
    min-height: 520px !important; /* çok küçükse boşluk artar */
  }

  /* Overlay’i aşağıya sabitle (top yerine bottom) */
  .hero-slider .hero-overlay{
    top: auto !important;
    bottom: 34px !important;     /* İstersen 26-46 arası oynayabilirsin */
    transform: none !important;  /* center translate varsa iptal */
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    box-sizing: border-box !important;
  }

  /* CTA grubunu biraz daha aşağı yaklaştır */
  .hero-slider .hero-cta,
  .hero-slider .hero-buttons,
  .hero-slider .hero-cta-buttons{
    margin-top: 12px !important;
  }

  /* Butonlar alt kısma daha “otursun” */
  .hero-slider .hero-overlay .btn,
  .hero-slider .hero-overlay a.btn,
  .hero-slider .hero-overlay button{
    height: 54px !important;
  }
}
/* =========================================================
   PATCH — Hero CTA (yazı+butonlar) daha aşağı insin (iPhone)
   Not: önceki padding-bottom=96/128px patch’lerini ezer.
   ========================================================= */
@media (max-width: 430px){

  /* Overlay’i aşağı indir */
  .hero-slider .hero-overlay,
  .hero-overlay{
    top: 62% !important;                  /* 62-70 arası oynayabilirsin */
    transform: translateY(-50%) !important;

    /* Daha önceki "butonları yukarı iten" paddingleri sıfırla */
    padding-bottom: 0 !important;
    justify-content: flex-start !important; /* flex-end ise yukarı itiyordu */
  }

  /* Buton grubunu da biraz aşağı yaklaştır */
  .hero-slider .hero-overlay .hero-buttons,
  .hero-overlay .hero-buttons{
    margin-top: 16px !important;
  }
}

/* =========================================================
   iPhone 15 — BENEFITS kart yüksekliklerini eşitle
   ========================================================= */
@media (max-width: 450px){

  /* Row içindeki kartlar aynı yükseklikte uzasın */
  .kano-benefits #kanoBenefitsRow{
    align-items: stretch !important;
  }

  /* Kart container: flex-column ile içerik düzeni */
  .kano-benefits #kanoBenefitsRow .kano-benefit-item{
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
  }

  /* Kartın iç paneli (senin gri panel) eşit yükselsin */
  .kano-benefits #kanoBenefitsRow .kano-benefit-item .kano-benefit-card,
  .kano-benefits #kanoBenefitsRow .kano-benefit-item .benefit-card,
  .kano-benefits #kanoBenefitsRow .kano-benefit-item .card{
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    height: 100% !important;
    min-height: 190px !important;   /* asıl eşitleme */
    box-sizing: border-box !important;
  }

  /* İkon alanını sabitle (ikon farklıysa boy uzatmasın) */
  .kano-benefits #kanoBenefitsRow .kano-benefit-icon,
  .kano-benefits #kanoBenefitsRow .kano-benefit-icon img,
  .kano-benefits #kanoBenefitsRow .kano-benefit-icon svg{
    height: 60px !important;
    width: auto !important;
  }

  /* Başlık + açıklama bloklarına min alan ver */
  .kano-benefits #kanoBenefitsRow .kano-benefit-title{
    min-height: 44px !important;    /* 1-2 satır dengeleme */
  }
  .kano-benefits #kanoBenefitsRow .kano-benefit-desc,
  .kano-benefits #kanoBenefitsRow .kano-benefit-text{
    min-height: 54px !important;    /* açıklama dengeleme */
  }
}
/* =========================================================
   iPhone 15 — BENEFITS kart yüksekliklerini eşitle (visual + panel)
   HTML: #kanoBenefitsRow > article.kano-benefit-item
         > .kano-benefit-visual + .kano-benefit-panel
   ========================================================= */
@media (max-width: 450px){

  /* Row: tüm kartlar aynı yükseklikte stretch */
  .kano-benefits #kanoBenefitsRow{
    align-items: stretch !important;
  }

  /* Kart: column layout */
  .kano-benefits #kanoBenefitsRow .kano-benefit-item{
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
  }

  /* Üst görsel/ikon alanı sabit yükseklik (ikon büyüklüğü kartı uzatmasın) */
  .kano-benefits #kanoBenefitsRow .kano-benefit-visual{
    flex: 0 0 92px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Asıl gri panel: hepsine aynı min yükseklik + içerik ortalı */
  .kano-benefits #kanoBenefitsRow .kano-benefit-panel{
    flex: 1 1 auto !important;
    min-height: 160px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
}
@media (max-width: 450px){
  .kano-benefits #kanoBenefitsRow .kano-benefit-panel p{
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
}
/* =========================================================
   PATCH — iPhone 15 BENEFITS: 3. item alt satıra düşmesin + yazılar ortalı
   En alta ekle (mobile_overrides_iphone.css)
   ========================================================= */

@media (max-width: 450px){

  /* Viewport: yatay kaydırma + taşmayı gizleme */
  .kano-benefits .kano-benefits-viewport{
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Row: WRAP KAPALI -> asla alt satıra düşmez */
  .kano-benefits #kanoBenefitsRow,
  #kanoBenefitsRow.kano-benefits-inner{
    display: flex !important;
    flex-wrap: nowrap !important;          /* <<< kritik */
    align-items: flex-start !important;    /* center/baseline olmasın */
    justify-content: flex-start !important;

    gap: 12px !important;                 /* arada “çıtır” boşluk */
    padding: 0 18px 6px !important;        /* soldan/sağdan nefes */
    margin: 0 !important;

    scroll-snap-type: x mandatory !important;
  }

  /* Her kart: sabit genişlik, snap, asla büyüyüp wrap yaptırmasın */
  .kano-benefits #kanoBenefitsRow > .kano-benefit-item,
  #kanoBenefitsRow > article.kano-benefit-item{
    flex: 0 0 260px !important;            /* iPhone 15 için sweet spot */
    width: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;

    margin: 0 !important;
    align-self: flex-start !important;
    scroll-snap-align: start !important;
  }

  /* İkon daima ortada */
  .kano-benefits #kanoBenefitsRow .kano-benefit-visual{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 10px !important;
  }

  /* Başlık + açıklama: ikonun TAM altına ortalı (sağa kaymayı keser) */
  .kano-benefits #kanoBenefitsRow .kano-benefit-panel{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;        /* <<< sağa kayma biter */
    justify-content: flex-start !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .kano-benefits #kanoBenefitsRow .kano-benefit-title{
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;

    text-align: center !important;
    line-height: 1.15 !important;

    /* İstersen wrap kalsın; kayma olmasın diye alanı sabitliyoruz */
    min-height: 2.3em !important;          /* 2 satıra kadar aynı blok yüksekliği */
  }

  .kano-benefits #kanoBenefitsRow .kano-benefit-desc{
    width: 100% !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
    text-align: center !important;

    /* açıklama farklı uzunlukta olsa da hizayı bozmasın */
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    min-height: 2.6em !important;
  }

  /* Nükleer: 3. item’e özel bir margin/transform basılmışsa sıfırla */
  #kanoBenefitsRow > :nth-child(3){
    margin-top: 0 !important;
    top: auto !important;
    transform: none !important;
  }
}