/* =======================================================================
   KANO — Home HERO overrides (Spreadshirt-like) — v6 CLEAN
   - Short Turkish headline (HTML): "Tarzını yarat"
   - No text-shadow (flat like Spreadshirt)
   - CTA buttons: sharper corners, slightly bigger, rectangle
   Place next to style.css: assets/css/kano_home_hero_overrides_spreadshirt.css
   Load AFTER style.css (and remove/stop loading older hero override files).
   ======================================================================= */
/* FULL-BLEED helper: if body/html are constrained, slider cannot escape */
html, body{
  width: 100% !important;
  max-width: none !important;
  overflow-x: visible !important;
}

/* If there is a layout wrapper that clips overflow, release it (safe for X only) */
body, main, .site, .page, .wrapper, .layout, .app, #app, #root{
  overflow-x: visible !important;
}


/* If any layout wrapper clips overflow, let the hero escape */
.site, .page, .layout, .wrapper, main{
  overflow-x: visible !important;
}

/* --- HERO sizing: close to Spreadshirt (not too tall) --- */
.hero-slider{
  /* FULL-BLEED (tam boy en) — container/max-width kısıtını kır */
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: #fff !important;
}

.hero-slider .hero-slider-inner{
  width: 100% !important;
  max-width: 100% !important;
  position: relative !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: clamp(380px, 44vw, 540px) !important;
  max-height: 580px !important;
  overflow: hidden !important;
}

/* image fill */
.hero-slider .hero-slide,
.hero-slider .hero-slide img{
  width: 100% !important;
  height: 100% !important;
}
.hero-slider .hero-slide img{
  object-fit: cover !important;
  object-position: center 35% !important;
  display: block !important;
}

/* light global dim */
.hero-slider .hero-slide::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,.07) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* copy block (no panel) */
.hero-slider .hero-overlay{
  position: absolute !important;
  left: clamp(26px, 6vw, 92px) !important;
  top: calc(50% + 22px) !important;
  transform: translateY(-50%) !important;
  z-index: 3 !important;

  padding: 0 !important;
  background: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  max-width: 640px !important;
  text-align: left !important;

  color: #fff !important;
  text-shadow: none !important; /* IMPORTANT: flat like Spreadshirt */
}

/* left gradient behind copy (NOT a box) */
.hero-slider .hero-overlay::before{
  content: "" !important;
  position: absolute !important;
  top: -140px !important;
  bottom: -140px !important;
  left: -190px !important;
  width: min(840px, 76vw) !important;

  background: linear-gradient(
    90deg,
    rgba(0,0,0,.34) 0%,
    rgba(0,0,0,.16) 55%,
    rgba(0,0,0,0) 100%
  ) !important;

  z-index: -1 !important;
  pointer-events: none !important;
}

/* force white */
.hero-slider .hero-overlay,
.hero-slider .hero-overlay h1,
.hero-slider .hero-overlay h1::before,
.hero-slider .hero-overlay p{
  color: #fff !important;
}

/* eyebrow like Spreadshirt "Quick & Easy" */
.hero-slider .hero-overlay h1::before{
  content: "Hızlı & Kolay" !important;
  display: block !important;
  margin: 0 0 14px !important;

  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  opacity: .92 !important;
  text-shadow: none !important;
}

/* headline */
.hero-slider .hero-overlay h1{
  margin: 0 0 14px !important;
  max-width: 720px !important;

  font-size: clamp(48px, 5.2vw, 86px) !important;
  line-height: .92 !important;
  font-weight: 900 !important;
  letter-spacing: -.02em !important;
  text-transform: uppercase !important;

  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none !important;

  text-shadow: none !important;
}

/* body line */
.hero-slider .hero-overlay p{
  margin: 0 0 22px !important;
  max-width: 520px !important;

  font-size: 15px !important;
  line-height: 1.5 !important;
  opacity: .92 !important;

  text-shadow: none !important;
}

/* CTA buttons: sharper + slightly bigger */
.hero-slider .hero-buttons{
  display: flex !important;
  gap: 20px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

.hero-slider .hero-buttons .btn,
.hero-slider .hero-buttons .btn *{
  color: #111 !important;
  text-shadow: none !important;
}

.hero-slider .hero-buttons .btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  height: 56px !important;
  min-width: 160px !important;
  padding: 0 28px !important;
  border-radius: 3px !important; /* more square */

  font-size: 16px !important;
  font-weight: 700 !important;

  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(0,0,0,.14) !important;
  box-shadow: none !important; /* Spreadshirt-like flat */
}

.hero-slider .hero-buttons .btn:hover{
  background: rgba(255,255,255,1) !important;
  border-color: rgba(0,0,0,.20) !important;
}

/* Arrows: bottom-right */
.hero-slider .hero-nav{
  position: absolute !important;
  top: auto !important;
  bottom: 18px !important;

  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;

  background: rgba(255,255,255,.78) !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.14) !important;

  color: #111 !important;
  z-index: 4 !important;
}
.hero-slider .hero-prev{ right: 72px !important; left: auto !important; }
.hero-slider .hero-next{ right: 18px !important; left: auto !important; }

/* Dots: bottom-center, never inside the copy */
.hero-slider .hero-overlay [class*="dots"],
.hero-slider .hero-overlay [class*="pagination"],
.hero-slider .hero-overlay .hero-dots,
.hero-slider .hero-overlay .hero-dot,
.hero-slider .hero-overlay .slick-dots,
.hero-slider .hero-overlay .swiper-pagination,
.hero-slider .hero-overlay .owl-dots{
  display: none !important;
}

.hero-slider .hero-dots,
.hero-slider .slick-dots,
.hero-slider .swiper-pagination,
.hero-slider .owl-dots,
.hero-slider [class*="dots"],
.hero-slider [class*="pagination"]{
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: 18px !important;
  top: auto !important;
  right: auto !important;
  margin: 0 !important;
  z-index: 2 !important; /* below overlay text */
}

/* Mobile tune */
@media (max-width: 820px){
  .hero-slider .hero-slider-inner{
    height: 520px !important;
  }
  .hero-slider .hero-overlay{
    left: 18px !important;
    right: 18px !important;
    top: auto !important;
    bottom: 110px !important;
    transform: none !important;
  }
  .hero-slider .hero-overlay::before{
    top: -200px !important;
    bottom: -140px !important;
    left: -140px !important;
    width: min(900px, 94vw) !important;
    background: linear-gradient(
      180deg,
      rgba(0,0,0,.36) 0%,
      rgba(0,0,0,.16) 70%,
      rgba(0,0,0,0) 100%
    ) !important;
  }
  .hero-slider .hero-overlay h1{
    font-size: 44px !important;
    line-height: .95 !important;
    max-width: 680px !important;
  }
  .hero-slider .hero-buttons .btn{
    height: 54px !important;
    min-width: 150px !important;
    padding: 0 22px !important;
  }
}



/* =======================================================================
   HOME — Category pills bar (banner’a yapışık + ortalı, Spreadshirt-like)
   - Büyük boşlukları kapatır
   - Label + pill’leri tek grup gibi ortalar
   ======================================================================= */

.home-categories-products{
  padding-top: 0 !important;
  margin-top: -18px !important; /* hero’ya yaklaş */
  background: #fff !important;
}

.home-categories-products > .container{
  padding-top: 0 !important;
  padding-bottom: 10px !important;
}

/* "Şimdi Tasarla" + pill’ler tek sırada, ortalı */
.home-category-bar{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;

  gap: 18px !important;          /* label <-> pills arası */
  padding: 12px 0 8px !important; /* üst/alt sıkı */
  margin: 0 auto !important;
}

/* Spreadshirt “Create” hissi */
.home-category-label{
  margin: 0 !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  color: #111 !important;
  white-space: nowrap !important;
}

/* Pill grubu */
.home-category-pills{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;

  gap: 12px !important; /* pill arası */
  margin: 0 !important;
}

/* Pill’ler: daha “kutulu”, daha sıkı */
.home-category-pills .cat-pill{
  border-radius: 4px !important;
  padding: 10px 18px !important;
  min-height: 40px !important;

  background: #fff !important;
  color: #111 !important;

  border: 1px solid rgba(0,0,0,.18) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}

/* Aktif pill: daha belirgin */
.home-category-pills .cat-pill.active{
  border-color: rgba(0,0,0,.75) !important;
}

/* Bestsellers başlığıyla arayı Spreadshirt’e yaklaştır */
.home-products-header{
  margin-top: 34px !important;
}

/* Mobile */
@media (max-width: 820px){
  .home-categories-products{
    margin-top: -10px !important;
  }
  .home-category-bar{
    gap: 12px !important;
    padding: 10px 0 6px !important;
  }
  .home-category-label{
    font-size: 18px !important;
  }
  .home-category-pills .cat-pill{
    padding: 9px 14px !important;
    min-height: 38px !important;
  }
}



/* =======================================================================
   PATCH v8 — Category bar: banner’a daha yapışık + hafif sola kayık (Spreadshirt)
   Notlar:
   - Negatif margin artırıldı (hero ile boşluk kapansın)
   - İçerik tam ortadan biraz sola (justify start + padding-left)
   - Pill border “üstü kaybolma” için padding/height/box-sizing düzeltildi
   ======================================================================= */

.hero-slider{
  margin-bottom: -18px !important; /* banner alt boşluğu kapat */
}

.home-categories-products{
  padding-top: 0 !important;
  margin-top: -48px !important;    /* banner’a yaklaştır */
  background: #fff !important;
  position: relative !important;
  z-index: 5 !important;
}

.home-categories-products > .container{
  padding-top: 0 !important;
  padding-bottom: 8px !important;
}

/* Bar: “ortanın biraz solu” */
.home-category-bar{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;

  width: 100% !important;
  max-width: 1000px !important;   /* devtools’ta gördüğün genişlik */
  margin: 0 auto !important;

  gap: 14px !important;
  padding: 14px 0 8px 120px !important; /* sola kaydır */
  overflow: visible !important;
}

/* Label */
.home-category-label{
  margin: 0 !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  color: #111 !important;
  white-space: nowrap !important;
}

/* Pills */
.home-category-pills{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;

  gap: 10px !important;
  margin: 0 !important;
}

/* Pill buton: üst kenar kaybolmasın */
.home-category-pills .cat-pill{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  box-sizing: border-box !important;
  border-radius: 4px !important;

  padding: 10px 18px !important;
  min-height: 42px !important;
  line-height: 1 !important;

  background: #fff !important;
  color: #111 !important;

  border: 1px solid rgba(0,0,0,.28) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}

/* Aktif */
.home-category-pills .cat-pill.active{
  border-color: rgba(0,0,0,.75) !important;
}

/* Bestsellers başlığı: bar ile arayı çok açma */
.home-products-header{
  margin-top: 28px !important;
}

/* Responsive: sola kaydırma azalt */
@media (max-width: 1100px){
  .home-category-bar{
    padding-left: 70px !important;
  }
}
@media (max-width: 820px){
  .hero-slider{ margin-bottom: -10px !important; }
  .home-categories-products{ margin-top: -28px !important; }
  .home-category-bar{
    padding: 10px 0 6px 18px !important;
    gap: 12px !important;
  }
  .home-category-label{
    font-size: 18px !important;
  }
  .home-category-pills .cat-pill{
    padding: 9px 14px !important;
    min-height: 38px !important;
  }
}

/* =======================================================================
   PATCH v9 — HOME category bar: daha yukarı + Spreadshirt hizası
   - "Şimdi Tasarla" daha ince
   - Bar hero'ya daha yapışık
   - Başlangıç: "En Çok Satanlar" başlığındaki "Ç" noktasına yakın (soldan offset)
   ======================================================================= */

/* Barı bannera yaklaştır (boşluğu öldür) */
.home-categories-products{
  margin-top: -96px !important; /* daha da yukarı istiyorsan: -110px */
  padding-top: 0 !important;
}

/* Container üst boşlukları sıfırla */
.home-categories-products > .container{
  padding-top: 0 !important;
}

/* Bar: ortanın biraz solu (Spreadshirt gibi) */
.home-category-bar{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important; /* TAM orta değil */
  flex-wrap: wrap !important;

  /* "Ç" hizası için soldan offset */
  padding-left: 64px !important; /* daha sağa: 64px | daha sola: 48px */
  gap: 14px !important;

  padding-top: 8px !important;
  padding-bottom: 6px !important;
  margin: 0 !important;
}

/* "Şimdi Tasarla" kalınlığını indir */
.home-category-label{
  font-weight: 600 !important; /* 800 yerine */
  font-size: 22px !important;
  line-height: 1.1 !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

/* Pill grubu */
.home-category-pills{
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin: 0 !important;
}

/* Pill üst çizgisi kaybolmasın diye net kutu */
.home-category-pills .cat-pill{
  border-radius: 4px !important;
  padding: 10px 18px !important;
  min-height: 40px !important;
  border: 1px solid rgba(0,0,0,.22) !important;
  box-shadow: none !important;
  background: #fff !important;
}

/* Responsive: mobilde soldan offset’i azalt */
@media (max-width: 820px){
  .home-categories-products{ margin-top: -60px !important; }
  .home-category-bar{ padding-left: 18px !important; }
  .home-category-label{ font-size: 18px !important; }
}


/* =======================================================================
   PATCH v12 — Home Bestsellers: sol hizayı tek noktadan kilitle + gap küçült
   Hedef:
   - "Şimdi Tasarla" label'i ile "En Çok Satanlar" aynı X'ten başlasın
   - Ürün satırı da aynı X'ten başlasın
   - Space-between/center kaynaklı dev boşlukları öldür
   - Görseli kartın içinde daha "dolgun" göster (Spreadshirt hissi)
   Not: style.css'e dokunmadan, sadece override.
   ======================================================================= */

.home-categories-products{
  --home-left: 120px;   /* Şimdi Tasarla'nın başladığı X (v8'deki offset ile aynı) */
  --home-right: 64px;
}

/* Tek kaynak: container padding */
.home-categories-products .container{
  padding-left: var(--home-left) !important;
  padding-right: var(--home-right) !important;
  max-width: none !important;
}

/* Category bar: artık kendi içinde ekstra sola kaydırma yapmasın */
.home-category-bar{
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;                 /* auto-center iptal */
  justify-content: flex-start !important;
  padding-left: 0 !important;           /* v8'deki 120px iç padding iptal */
  padding-right: 0 !important;
}

/* Header: container ile aynı hizada, space-between stabil */
.home-products-header{
  padding-left: 0 !important;
  padding-right: 0 !important;
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  margin-top: 26px !important;
  margin-bottom: 12px !important;
}

/* Başlık/Link tipografi (naif) */
.home-products-title{
  font-size: 30px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}
.home-products-all, .home-products-all a{
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: underline !important;
}

/* Row: soldan başla, gap küçült, "space-between" gibi dağıtmayı engelle */
#bestsellers-row{
  display: flex !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  gap: 22px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  scroll-snap-type: x mandatory !important;
}

/* Kart boyutu: ekranı doldursun ama aralık şişmesin */
#bestsellers-row .product-card--home{
  flex: 0 0 340px !important;
  width: 340px !important;
  scroll-snap-align: start !important;
}

/* Görsel alanı: büyük, ürün daha dolu, gölge/çerçeve minimal */
#bestsellers-row .product-image-wrap{
  height: 340px !important;
  background: #efefef !important;
  border-radius: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: grid !important;
  place-items: center !important;
}
#bestsellers-row .product-image-wrap img{
  width: 92% !important;
  height: 92% !important;
  object-fit: contain !important;
  filter: none !important;
  box-shadow: none !important;
  transform: translateZ(0) !important;
}

/* Metin: sola hizalı ve daha naif */
#bestsellers-row .product-info{
  text-align: left !important;
  padding-top: 10px !important;
}
#bestsellers-row .product-name{
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  margin: 0 0 6px 0 !important;
}
#bestsellers-row .product-price{
  font-size: 18px !important;
  font-weight: 700 !important;
  margin: 0 !important;
}

/* Ok butonu: track'in yanında dursun */
.home-products-carousel{
  position: relative !important;
}
.home-products-next{
  right: 22px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* Mobile: padding'i düşür */
@media (max-width: 820px){
  .home-categories-products{ --home-left: 18px; --home-right: 18px; }
  #bestsellers-row .product-card--home{ flex-basis: 280px !important; width: 280px !important; }
  #bestsellers-row .product-image-wrap{ height: 280px !important; }
}


/* =======================================================================
   PATCH v13 — Bestsellers: header/row same X + tighter gaps + naive type
   Only override (do not touch style.css)
   ======================================================================= */

/* Ensure carousel wrapper itself doesn't introduce extra inner padding/margin */
.home-products-carousel{
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}

/* H2 default margins can shift baseline/left feel */
.home-products-header h2{
  margin: 0 !important;
  padding: 0 !important;
}

/* Row must start exactly where header starts (same container padding) */
#bestsellers-row{
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  justify-content: flex-start !important;
  gap: 18px !important;                /* tighter like Spreadshirt */
}

/* Sometimes cards inherit auto margins → creates huge empty gaps */
#bestsellers-row .product-card--home{
  margin: 0 !important;
  flex: 0 0 320px !important;
  width: 320px !important;
}

/* Image box: slightly bigger fill, consistent look */
#bestsellers-row .product-image-wrap{
  height: 320px !important;
}

/* Make product fill the box more (gift-card still keeps ratio) */
#bestsellers-row .product-image-wrap img{
  width: 96% !important;
  height: 96% !important;
  object-fit: contain !important;
}

/* Typography closer to Spreadshirt: left, lighter name, compact spacing */
#bestsellers-row .product-info{
  text-align: left !important;
}
#bestsellers-row .product-name{
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  margin: 10px 0 4px 0 !important;
}
#bestsellers-row .product-price{
  font-size: 18px !important;
  font-weight: 700 !important;
  margin: 0 0 6px 0 !important;
}

/* If your base CSS centers product cards, force left align block flow */
#bestsellers-row .product-card--home *{
  box-sizing: border-box !important;
}

/* Mobile tune: keep tight, avoid oversized boxes */
@media (max-width: 820px){
  #bestsellers-row{ gap: 14px !important; }
  #bestsellers-row .product-card--home{ flex-basis: 260px !important; width: 260px !important; }
  #bestsellers-row .product-image-wrap{ height: 260px !important; }
}

/* =======================================================================
   PATCH v14 — Home Bestsellers: 3-card Spreadshirt look (cards bigger,
   left-aligned typography, tighter gaps, arrow overlay)
   - Goal: Make "En Çok Satanlar" look/feel closer to Spreadshirt
   - Safe: appended override, does not require touching style.css
   ======================================================================= */

:root{
  /* Tune once: keeps headings + carousel aligned */
  --home-wrap-max: 1320px;
  --home-wrap-pad: 28px;
  --home-card-w: 380px;
  --home-card-gap: 24px;
  --home-img-h: 360px;
}

/* A resilient wrapper: applies if any of these IDs/classes exist */
:is(#home-bestsellers, .home-bestsellers, section.home-bestsellers, section#home-bestsellers){
  max-width: var(--home-wrap-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--home-wrap-pad) !important;
  padding-right: var(--home-wrap-pad) !important;
}

/* Title row: "En Çok Satanlar" + "Hepsini Göster" */
:is(#home-bestsellers, .home-bestsellers, section.home-bestsellers, section#home-bestsellers)
  :is(.bestsellers-header, .home-section-header, .section-header, .bestsellers-title-row){
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  margin-bottom: 16px !important;
}

:is(#home-bestsellers, .home-bestsellers, section.home-bestsellers, section#home-bestsellers)
  :is(h2, .section-title, .bestsellers-title){
  font-size: 32px !important;
  line-height: 1.12 !important;
  letter-spacing: -0.02em !important;
  font-weight: 800 !important;
  margin: 0 !important;
}

:is(#home-bestsellers, .home-bestsellers, section.home-bestsellers, section#home-bestsellers)
  :is(a.browse-all, a.view-all, a.hepsini-goster, .browse-all, .view-all, .hepsini-goster){
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  white-space: nowrap !important;
}

/* Track: force "3 cards visible" feel */
:is(#home-bestsellers, .home-bestsellers, section.home-bestsellers, section#home-bestsellers)
  :is(.bestsellers-track, .products-track, .carousel-track, #bestsellers-row){
  /* Keep the whole block readable and prevent 4 cards squeezing in */
  max-width: calc((var(--home-card-w) * 3) + (var(--home-card-gap) * 2) + 2px) !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Layout for cards inside the track */
:is(#home-bestsellers, .home-bestsellers, section.home-bestsellers, section#home-bestsellers)
  :is(.bestsellers-track, .products-track, .carousel-track, #bestsellers-row)
  :is(.track-inner, .track, .swiper-wrapper, .carousel-inner){
  display: flex !important;
  gap: var(--home-card-gap) !important;
  align-items: flex-start !important;
  padding-bottom: 6px !important;
}

/* Card sizing */
#bestsellers-row .product-card--home,
:is(#home-bestsellers, .home-bestsellers, section.home-bestsellers, section#home-bestsellers)
  .product-card--home{
  width: var(--home-card-w) !important;
  min-width: var(--home-card-w) !important;
  max-width: var(--home-card-w) !important;
}

/* Image area: bigger, cleaner, square */
#bestsellers-row .product-image-wrap,
:is(#home-bestsellers, .home-bestsellers, section.home-bestsellers, section#home-bestsellers)
  .product-image-wrap{
  height: var(--home-img-h) !important;
  aspect-ratio: 1 / 1 !important;
  background: #f2f2f2 !important;
  border-radius: 0 !important;
  padding: 10px !important;         /* less padding => product fills more */
  display: grid !important;
  place-items: center !important;
}

#bestsellers-row .product-image-wrap img,
:is(#home-bestsellers, .home-bestsellers, section.home-bestsellers, section#home-bestsellers)
  .product-image-wrap img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  /* Slight fill without distortion */
  transform: scale(1.04) !important;
  transform-origin: center !important;
}

/* Typography: left aligned like Spreadshirt */
#bestsellers-row .product-info,
:is(#home-bestsellers, .home-bestsellers, section.home-bestsellers, section#home-bestsellers)
  .product-info{
  text-align: left !important;
  padding-left: 2px !important;
  padding-right: 2px !important;
}

#bestsellers-row .product-name,
:is(#home-bestsellers, .home-bestsellers, section.home-bestsellers, section#home-bestsellers)
  .product-name{
  font-size: 16px !important;
  line-height: 1.25 !important;
  font-weight: 500 !important; /* softer */
  color: #111 !important;
  margin-top: 14px !important;
  margin-bottom: 6px !important;
}

/* Optional subtitle line (if you add it in JS later) */
#bestsellers-row .product-subtitle,
:is(#home-bestsellers, .home-bestsellers, section.home-bestsellers, section#home-bestsellers)
  .product-subtitle{
  font-size: 14px !important;
  line-height: 1.25 !important;
  font-weight: 400 !important;
  color: #333 !important;
  margin: 0 0 10px 0 !important;
}

#bestsellers-row .product-price,
:is(#home-bestsellers, .home-bestsellers, section.home-bestsellers, section#home-bestsellers)
  .product-price{
  font-size: 16px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  color: #111 !important;
  margin-top: 0 !important;
}

/* Arrow: overlay on the right edge (Spreadshirt-ish) */
:is(#home-bestsellers, .home-bestsellers, section.home-bestsellers, section#home-bestsellers)
  :is(.carousel-next, .bestsellers-next, .swiper-button-next, button.next, .next-btn){
  position: absolute !important;
  right: -18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 999px !important;
  background: #fff !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  z-index: 5 !important;
}

/* Responsive: reduce card width gently so still feels like 3-up */
@media (max-width: 1350px){
  :root{ --home-card-w: 360px; --home-img-h: 340px; }
}
@media (max-width: 1200px){
  :root{ --home-card-w: 340px; --home-img-h: 320px; }
}
@media (max-width: 1020px){
  :root{ --home-wrap-pad: 18px; --home-card-w: 320px; --home-img-h: 300px; }
}
@media (max-width: 860px){
  /* On small screens it's fine to show 2-up feel */
  :root{ --home-card-w: 300px; --home-img-h: 280px; }
  :is(#home-bestsellers, .home-bestsellers, section.home-bestsellers, section#home-bestsellers)
    :is(.bestsellers-track, .products-track, .carousel-track, #bestsellers-row){
    max-width: 100% !important;
  }
}

/* =======================================================================
   PATCH v15 — Bestsellers spacing + typography (closer to Spreadshirt)
   - Tighter card gaps
   - Text block spacing matches reference (name + optional subtitle + price)
   - Forces LEFT alignment even if base CSS centers text
   ======================================================================= */

:root{
  --home-card-gap: 18px;     /* was 24 */
  --home-text-gap-1: 4px;    /* name -> subtitle */
  --home-text-gap-2: 6px;    /* subtitle -> price */
}

/* Card gap: override any track-level gap */
#bestsellers-row{
  gap: var(--home-card-gap) !important;
}

/* Hard-force left alignment + remove centering margins */
#bestsellers-row .product-card--home .product-info{
  width: 100% !important;
  display: block !important;
  text-align: left !important;
  margin: 0 !important;
  padding: 0 2px !important;
}

#bestsellers-row .product-card--home .product-name{
  display: block !important;
  text-align: left !important;
  font-size: 18px !important;
  line-height: 1.25 !important;
  font-weight: 500 !important;   /* Spreadshirt-like: not too bold */
  letter-spacing: -0.01em !important;
  margin: 14px 0 var(--home-text-gap-1) 0 !important;
}

#bestsellers-row .product-card--home .product-subtitle{
  display: block !important;
  text-align: left !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
  font-weight: 400 !important;
  color: rgba(17,17,17,.80) !important;
  margin: 0 0 var(--home-text-gap-2) 0 !important;
}

#bestsellers-row .product-card--home .product-price{
  display: block !important;
  text-align: left !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;   /* strong but not shouting */
  margin: 0 0 2px 0 !important;
}

/* Spreadshirt cards feel a bit more "airy" below text, not centered */
#bestsellers-row .product-card--home{
  padding-bottom: 10px !important;
}

/* If some themes center via flex on the card, neutralize */
#bestsellers-row .product-card--home{
  align-items: stretch !important;
}
#bestsellers-row .product-card--home *{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Mobile: keep tight */
@media (max-width: 820px){
  :root{ --home-card-gap: 14px; }
  #bestsellers-row .product-card--home .product-name{ font-size: 16px !important; margin-top: 12px !important; }
  #bestsellers-row .product-card--home .product-subtitle{ font-size: 14px !important; }
  #bestsellers-row .product-card--home .product-price{ font-size: 16px !important; }
}

/* =======================================================================
   PATCH v16 — Bestsellers text = Spreadshirt-ish (font stack + weights + spacing)
   - Gap: slightly tighter (18 -> 16)
   - Text: name softer, price calmer, spacing + line-heights refined
   - Font stack: closer to Spreadshirt default UI feel
   ======================================================================= */

:root{
  --home-card-gap: 16px;
  --home-name-size: 16px;
  --home-sub-size: 16px;
  --home-price-size: 16px;
}

/* micro gap tighten */
#bestsellers-row{ gap: var(--home-card-gap) !important; }

/* Spreadshirt-ish font + smoothing */
#bestsellers-row .product-card--home .product-info,
#bestsellers-row .product-card--home .product-info *{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji" !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Bring text block slightly closer to image */
#bestsellers-row .product-card--home .product-name{
  font-size: var(--home-name-size) !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  margin: 10px 0 2px 0 !important;
}

#bestsellers-row .product-card--home .product-subtitle{
  font-size: var(--home-sub-size) !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  color: rgba(17,17,17,.78) !important;
  margin: 0 0 8px 0 !important;
}

#bestsellers-row .product-card--home .product-price{
  font-size: var(--home-price-size) !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  margin: 0 !important;
}

/* Less bottom padding (Spreadshirt is tight) */
#bestsellers-row .product-card--home{ padding-bottom: 6px !important; }

/* Mobile: keep same look, just scale slightly */
@media (max-width: 820px){
  :root{
    --home-card-gap: 14px;
    --home-name-size: 15px;
    --home-sub-size: 14px;
    --home-price-size: 15px;
  }
}


/* =======================================================================
   PATCH v16 — HOME BENEFITS: Bestsellers ile hizala + kart eni aynı olsun
   Hedef:
   - Benefits bloğunun SOL başlangıcı = "En Çok Satanlar" bloğu ile birebir
   - Kart eni = bestseller ürün kart eni (var(--home-card-w))
   - Gap = bestseller gap (var(--home-card-gap))
   Not: style.css dokunmadan, sadece bu override dosyasıyla çözer.
   ======================================================================= */

/* Benefits section spacing (çok aşağı düşmesin, temiz dursun) */
.kano-benefits{
  background: #fff !important;
  padding: 44px 0 54px !important;
}

/* Hizalama: home-categories-products .container ile aynı sol/sağ padding */
.kano-benefits-inner{
  max-width: none !important;            /* 1200px limitini kaldır -> aynı hat */
  margin: 0 auto !important;

  padding-left: var(--home-left, 120px) !important;
  padding-right: var(--home-right, 64px) !important;

  gap: var(--home-card-gap, 24px) !important;
  scroll-padding-left: var(--home-left, 120px) !important;
  scroll-padding-right: var(--home-right, 64px) !important;

  justify-content: flex-start !important;
}

/* Scrollbar'ı Spreadshirt gibi görünmez yap */
.kano-benefits-inner{
  scrollbar-width: none !important;      /* Firefox */
}
.kano-benefits-inner::-webkit-scrollbar{
  height: 0 !important;
}

/* Kart eni: bestseller product-card ile aynı */
.kano-benefit-item{
  flex: 0 0 var(--home-card-w, 380px) !important;
  min-width: var(--home-card-w, 380px) !important;
  max-width: var(--home-card-w, 380px) !important;
}

/* İkonlar biraz daha "Spreadshirt" hissi (daha büyük, daha okunur) */
.kano-benefit-icon{
  width: 120px !important;
  height: 120px !important;
  margin: 0 auto 16px !important;
}
.kano-benefit-icon img{
  width: 92px !important;
  height: 92px !important;
}

/* Metin: daha temiz, ürün kart tipografisine yakın */
.kano-benefit-text{
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.15 !important;
}

/* Responsive: soldaki padding'i bestseller ile birlikte yumuşat */
@media (max-width: 1100px){
  .kano-benefits-inner{
    padding-left: 24px !important;
    padding-right: 24px !important;
    scroll-padding-left: 24px !important;
    scroll-padding-right: 24px !important;
  }
}
@media (max-width: 820px){
  .kano-benefits{
    padding: 34px 0 44px !important;
  }
  .kano-benefits-inner{
    padding-left: 16px !important;
    padding-right: 16px !important;
    scroll-padding-left: 16px !important;
    scroll-padding-right: 16px !important;
  }
}


/* =======================================================================
   PATCH v20 — HOME BENEFITS: Spreadshirt card mantığı (dikdörtgen panel)
   İstekler:
   - Bestsellers ile birebir SOL hiza (aynı --home-left / --home-right)
   - Ekranda ~3 kart + 1 kartın yarısı görünsün (Spreadshirt hissi)
   - İkonlar BÜYÜK, arkalarında kare/kutu yok
   - Dış çerçeve/hover yok (kart çevresi çizilmesin)
   - Panel: beyazdan griye yumuşak degrade
   - Tek ok: SAĞDA ve carousel'in içinde
   ======================================================================= */

.kano-benefits{
  background: #fff !important;
  padding: 46px 0 58px !important;
}

/* Bestsellers ile aynı container geometry */
.kano-benefits > .container{
  max-width: none !important;
  padding-left: var(--home-left, 120px) !important;
  padding-right: var(--home-right, 64px) !important;
}

/* Görünen alan: çok geniş ekranda bile 3.5 kart hissi */
.kano-benefits-viewport{
  position: relative !important;
  width: 100% !important;
  max-width: 1360px !important; /* ≈ 3.5 kart */
}

/* Slider track */
.kano-benefits-inner{
  --benefit-card-w: 360px;
  --benefit-gap: 32px;

  display: flex !important;
  flex-wrap: nowrap !important;
  gap: var(--benefit-gap) !important;

  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;

  scroll-snap-type: x mandatory !important;
  scroll-padding-left: 0 !important;
  padding: 0 0 14px 0 !important;
  margin: 0 !important;

  scrollbar-width: none !important;
}
.kano-benefits-inner::-webkit-scrollbar{ height: 0 !important; }

/* Kart: dış çerçeve/hover yok */
.kano-benefit-item{
  flex: 0 0 var(--benefit-card-w) !important;
  width: var(--benefit-card-w) !important;
  scroll-snap-align: start !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: auto !important;

  text-align: center !important;
}

/* Herhangi bir önceki "süs" pseudo element varsa kapat */
.kano-benefit-item::before,
.kano-benefit-item::after{ display:none !important; }

/* İkon alanı: büyük ve temiz (kutu yok) */
.kano-benefit-visual{
  height: 190px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.kano-benefit-visual img{
  width: auto !important;
  height: 150px !important;
  max-width: 92% !important;
  object-fit: contain !important;
  filter: none !important;
  box-shadow: none !important;
}

/* Alt panel: dikdörtgen + yumuşak degrade */
.kano-benefit-panel{
  background: linear-gradient(
    180deg,
    #f9f9f9 0%,
    #efefef 28%,
    #e2e2e2 62%,
    #d2d2d2 100%
  ) !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 26px 26px 30px !important;
  margin: 0 !important;
}

.kano-benefit-title{
  margin: 0 0 10px 0 !important;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial !important;
  font-weight: 900 !important;
  font-size: 30px !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  color: #111 !important;
}

.kano-benefit-desc{
  margin: 0 !important;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  color: rgba(17,17,17,.82) !important;
}

/* Eski tek satır metni varsa görünmesin (geriye dönük) */
.kano-benefit-text{ display:none !important; }

/* Ok: sadece sağda, container içinde */
.kano-benefits-next{
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.14) !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  z-index: 5 !important;
}
.kano-benefits-next span{
  font-size: 32px !important;
  line-height: 1 !important;
  transform: translateX(1px) !important;
}

/* Hover kapalı (Spreadshirt gibi nötr) */
@media (hover:hover){
  .kano-benefit-item:hover{ transform:none !important; box-shadow:none !important; }
}

@media (max-width: 1100px){
  .kano-benefits-viewport{ max-width: 100% !important; }
  .kano-benefits-inner{ --benefit-card-w: 320px; --benefit-gap: 22px; }
  .kano-benefit-visual{ height: 170px !important; }
  .kano-benefit-visual img{ height: 130px !important; }
  .kano-benefit-title{ font-size: 26px !important; }
}

@media (max-width: 820px){
  .kano-benefits > .container{
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .kano-benefits-inner{ --benefit-card-w: 280px; --benefit-gap: 18px; }
  .kano-benefits-next{ right: 8px !important; width: 50px !important; height: 50px !important; }
}

/* =======================================================================
   PATCH v21 — Micro fixes
   1) Benefits: "Güvenli ödeme" ikon/panel aynı çizgi (3. kartı optik hizala)
   2) Gift voucher: container genişliği + sol/sağ hizası = Bestsellers/Benefits
   ======================================================================= */

/* 1) Optik hizalama: 3. kartın ikonu (GÜVENLİ ÖDEME) bazen SVG boşluklarından
      dolayı diğerlerinden farklı oturuyor. 3. kartı çok az aşağı kaydır. */
.kano-benefits .kano-benefit-item:nth-child(3) .kano-benefit-visual img{
  transform: translateY(10px) !important;
}

/* 2) Gift voucher bölümünü Bestsellers/Benefits ile aynı sol/sağ hatta kilitle */
.gift-voucher-section > .container{
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--home-left, 120px) !important;
  padding-right: var(--home-right, 64px) !important;
}

@media (max-width: 820px){
  .gift-voucher-section > .container{
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

/* =======================================================================
   PATCH v22 — Gift voucher hizasını kesin kilitle (Benefits/Bestseller ile aynı)
   Not: Bu blok v21'deki gift-voucher container ayarını geçersiz kılar.
   ======================================================================= */
.gift-voucher-section > .container{
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--home-left, 120px) !important;
  padding-right: var(--home-right, 64px) !important;
}
@media (max-width: 820px){
  .gift-voucher-section > .container{
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

/* =======================================================================
   PATCH v22 — Gift voucher hizasını kesin kilitle (Benefits/Bestseller ile aynı)
   (v21'deki gift-voucher container ayarını override eder)
   ======================================================================= */

.gift-voucher-section > .container{
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--home-left, 120px) !important;
  padding-right: var(--home-right, 64px) !important;
}

@media (max-width: 820px){
  .gift-voucher-section > .container{
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

/* =======================================================================
   PATCH v22 — Trend Koleksiyonlar (align + make bigger, like Spreadshirt)
   - Align section with Bestsellers/Benefits (same left/right geometry)
   - Make title + cards noticeably bigger
   ======================================================================= */

.trending-carousel-section{
  padding: 56px 0 52px !important;
}

/* Lock container geometry to the same "home" rails */
.trending-carousel-section > .container{
  max-width: var(--home-wrap-max, 1240px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--home-left, 40px) !important;
  padding-right: var(--home-right, 12px) !important;
}

/* Bigger header */
.trending-carousel-section .section-head{
  margin-bottom: 18px !important;
  align-items: flex-end !important;
}
.trending-carousel-section .section-title{
  font-size: 32px !important;
  font-weight: 900 !important;
  letter-spacing: -0.3px !important;
  line-height: 1.05 !important;
}

/* Buttons: slightly larger & keep inside container */
.trending-carousel-section .carousel-btn{
  width: 46px !important;
  height: 46px !important;
  font-size: 24px !important;
}

/* Carousel track: remove inner padding so cards start exactly under title */
.trending-carousel-section .trend-carousel{
  gap: 22px !important;
  padding: 6px 0 12px !important;
  margin: 0 !important;
  scroll-padding-left: 0 !important;
  scroll-padding-right: 0 !important;
}

/* Cards: bigger by width (NOT taller) */
.trending-carousel-section .trend-card{
  flex: 0 0 320px !important;
  width: 320px !important;
  border-radius: 18px !important;
}

/* Keep hero + body proportions (a bit bigger, not stretched) */
.trending-carousel-section .trend-card-hero{
  height: 168px !important;
}

.trending-carousel-section .trend-card-body{
  padding: 18px 18px 16px !important;
}

.trending-carousel-section .trend-card-body h3{
  font-size: 21px !important;
  font-weight: 900 !important;
  margin: 0 0 7px !important;
}

.trending-carousel-section .trend-card-body p{
  font-size: 15px !important;
  line-height: 1.35 !important;
}

/* Responsive */
@media (max-width: 820px){
  .trending-carousel-section > .container{
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .trending-carousel-section .section-title{ font-size: 26px !important; }
  .trending-carousel-section .trend-card{
    flex: 0 0 280px !important;
    width: 280px !important;
  }
  .trending-carousel-section .trend-card-hero{ height: 150px !important; }
}


/* =======================================================================
   PATCH v3b — HERO copy: force it a bit LOWER (desktop)
   Reason: some layouts make small shifts imperceptible; this forces a clear drop.
   ======================================================================= */

/* Desktop/tablet: push overlay down clearly */
@media (min-width: 821px){
  .hero-slider .hero-slider-inner .hero-overlay{
    top: 50% !important;
    transform: translateY(-50%) translateY(112px) !important; /* increase/decrease here */
  }
}


/* =======================================================================
   PATCH v23 — HERO gradient: left->right yerine bottom->top, soft fade (Spreadshirt-like)
   - Edge/bitiş belli olmasın diye radial + linear kombosu
   - Sadece desktop/tablet (min-width: 821px)
   ======================================================================= */
@media (min-width: 821px){
  .hero-slider .hero-overlay::before{
    /* geometry: daha aşağıdan başlayıp yukarıya doğru yumuşakça sönsün */
    top: auto !important;
    bottom: -220px !important;
    left: -220px !important;
    width: min(980px, 86vw) !important;
    height: 620px !important;

    /* soft fade: bitiş görünmez */
    background:
      radial-gradient(120% 95% at 18% 92%,
        rgba(0,0,0,.52) 0%,
        rgba(0,0,0,.28) 38%,
        rgba(0,0,0,.12) 58%,
        rgba(0,0,0,0) 78%
      ),
      linear-gradient(0deg,
        rgba(0,0,0,.18) 0%,
        rgba(0,0,0,0) 72%
      ) !important;

    filter: blur(1px) !important;
    opacity: .98 !important;
  }
}

/* =======================================================================
   PATCH v10 — HERO degrade (full width) | based on your stable v8
   Goal:
   - Keep layout exactly like v8 (no width/full-bleed experiments here)
   - Make the dark "degrade" span the FULL slide width
   - Direction: bottom -> top, super soft (no visible end) like Spreadshirt
   ======================================================================= */

/* 1) Use the slide overlay layer (covers the whole slide) */
.hero-slider .hero-slide::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 1 !important;

  /* Full-width, soft bottom->top fade + a subtle left focus to keep text readable */
  background:
    radial-gradient(80% 65% at 18% 70%,
      rgba(0,0,0,.26) 0%,
      rgba(0,0,0,0) 70%
    ),
    linear-gradient(to top,
      rgba(0,0,0,.42) 0%,
      rgba(0,0,0,.18) 32%,
      rgba(0,0,0,.06) 55%,
      rgba(0,0,0,0) 85%
    ) !important;
}

/* 2) Disable the old left-side overlay gradient so we don’t “double” it */
.hero-slider .hero-overlay::before{
  display: none !important;
}
/* =======================================================================
   PATCH v24 — Trend Koleksiyonlar: Emoji + Kano Style görsel
   İstek:
   - Kano Style kartında (tc7) hem hero görseli hem de sağ üst rozet = kano.jpg
   - Araba kartında (tc4) gülen yüz emoji yerine araba emojisi
   Not: Base style.css içindeki rozet pseudo-element'i büyük ihtimalle ::after.
   ======================================================================= */

/* Kano Style: hero görseli */
.trending-carousel-section .trend-card-hero.tc7{
  background-image: url("assets/img/kano.jpg") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Kano Style: rozet (emoji alanı) -> kano.jpg */
.trending-carousel-section .trend-card-hero.tc7::after{
  content: "" !important;
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 999px !important;
  background: #fff url("assets/img/kano.jpg") center/cover no-repeat !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.08) !important;
  display: grid !important;
  place-items: center !important;
  z-index: 2 !important;
}

/* Araba: gülen yüz yerine 🚗 */
.trending-carousel-section .trend-card-hero.tc4::after{
  content: "🚗" !important;
}

/* Eğer rozet ::before ile çiziliyorsa (bazı eski sürümler), aynı override'ı uygula */
.trending-carousel-section .trend-card-hero.tc7::before{
  content: "" !important;
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 999px !important;
  background: #fff url("assets/img/kano.jpg") center/cover no-repeat !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.08) !important;
  display: grid !important;
  place-items: center !important;
  z-index: 2 !important;
}
/* =======================================================================
   PATCH v25 — Trend Koleksiyonlar düzeltme
   - Araba kartında sol alttaki (başlık yanındaki) emoji: 😀 -> 🚗
   - Kano Style görsel path düzelt: assets/img/trends/kano.jpg
   ======================================================================= */

/* Kano Style: path düzelt */
.trending-carousel-section .trend-card-hero.tc7{
  background-image: url("assets/img/trends/kano.jpg") !important;
}
.trending-carousel-section .trend-card-hero.tc7::after{
  background: #fff url("assets/img/trends/kano.jpg") center/cover no-repeat !important;
}
.trending-carousel-section .trend-card-hero.tc7::before{
  background: #fff url("assets/img/trends/kano.jpg") center/cover no-repeat !important;
}

/* Araba: başlığın solundaki emoji (muhtemelen h3::before) */
.trending-carousel-section .trend-card-hero.tc4 + .trend-card-body h3::before{
  content: "🚗" !important;
}

/* Bazı sürümlerde icon h3::after olabilir, onu da güvene al */
.trending-carousel-section .trend-card-hero.tc4 + .trend-card-body h3::after{
  content: "🚗" !important;
}
/* =======================================================================
   PATCH v26 — Araba sağdaki emoji kaldır + Kano Style ikon/görsel düzelt
   İstek:
   - "Araba" başlığının SAĞINDA çıkan emoji fazlalık -> kaldır
   - Soldaki (başlık önündeki) ikon 🚗 kalsın
   - Kano Style: hem görsel (hero) hem başlık ikonu = kano.jpg
   Path: assets/img/trends/kano.jpg
   ======================================================================= */

/* --- Araba: sağdaki (h3::after) fazlalığı kaldır --- */
.trending-carousel-section .trend-card-hero.tc4 + .trend-card-body h3::after{
  content: "" !important;
  display: none !important;
}

/* --- Kano Style: hero görseli (fallback'lı) --- */
.trending-carousel-section .trend-card-hero.tc7{
  background-image:
    url("/assets/img/trends/kano.jpg"),
    url("assets/img/trends/kano.jpg"),
    url("/assets/img/trends/kano.png"),
    url("assets/img/trends/kano.png") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* --- Kano Style: başlığın solundaki ikon (emoji alanı) --- */
.trending-carousel-section .trend-card-hero.tc7 + .trend-card-body h3::before{
  content: "" !important;
  background-image:
    url("/assets/img/trends/kano.jpg"),
    url("assets/img/trends/kano.jpg"),
    url("/assets/img/trends/kano.png"),
    url("assets/img/trends/kano.png") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Eğer başlık ikonu h3::after ile basılıyorsa, onu da temizle (Kano Style) */
.trending-carousel-section .trend-card-hero.tc7 + .trend-card-body h3::after{
  content: "" !important;
  display: none !important;
}
/* =======================================================================
   PATCH v27 — Kano Style fix
   Sorun:
   - Hero üstünde 2 boş rozet görünüyor (sol+sağ)
   - Kano görseli "cover" gibi büyüyüp sola kaçıyor (logo canvas'ı yüzünden)
   Çözüm:
   - tc7 hero: background-size CONTAIN + daha Spreadshirt benzeri konum
   - tc7 rozet: SADECE sağ üst (::after) ve içine kano.jpg
   - tc7 ::before kapat (sol boş rozet gitsin)
   ======================================================================= */

/* Kano Style: hero görselini daha "ürün gibi" göster */
.trending-carousel-section .trend-card-hero.tc7{
  background-image:
    url("/assets/img/trends/kano.jpg"),
    url("assets/img/trends/kano.jpg") !important;
  background-repeat: no-repeat !important;
  background-size: 78% auto !important;      /* cover değil: daha kontrollü */
  background-position: 44% 42% !important;  /* diğer kartlarla benzer denge */
}

/* Kano Style: soldaki boş rozet (varsa) kapat */
.trending-carousel-section .trend-card-hero.tc7::before{
  content: none !important;
  display: none !important;
}

/* Kano Style: sağ üst rozet = kano.jpg */
.trending-carousel-section .trend-card-hero.tc7::after{
  content: "" !important;
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 999px !important;
  background:
    #fff url("/assets/img/trends/kano.jpg") center/contain no-repeat !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.08) !important;
  z-index: 2 !important;
}

/* Kano Style: başlık solundaki ikon da kano.jpg (biraz daha net) */
.trending-carousel-section .trend-card-hero.tc7 + .trend-card-body h3::before{
  content: "" !important;
  background:
    #fff url("/assets/img/trends/kano.jpg") center/contain no-repeat !important;
}
/* =======================================================================
   PATCH v28 — Kano Style rozet + başlık ikonu header logo ile aynı olsun
   İstek:
   - Kano Style sağ üst rozet ve sol alttaki küçük ikon, header logo dosyasını kullansın
   Header logo: assets/img/KANOlogo.png  (index.html)
   ======================================================================= */

:root{
  --kano-header-logo: url("/assets/img/KANOlogo.png");
}

/* Kano Style: sağ üst rozet = header logo */
.trending-carousel-section .trend-card-hero.tc7::after{
  background: #fff var(--kano-header-logo) center/contain no-repeat !important;
}

/* Kano Style: başlık solundaki ikon = header logo */
.trending-carousel-section .trend-card-hero.tc7 + .trend-card-body h3::before{
  background: #fff var(--kano-header-logo) center/contain no-repeat !important;
}

/* Gift custom buttons — %10 bigger */
.gift-custom-content .gift-custom-btn{
  font-size: 1.1em !important;      /* yazı %10 */
  padding: 12px 28px !important;     /* iç boşluk büyüsün */
  min-height: 46px !important;       /* ~41.6px → ~46px */
  min-width: 155px !important;       /* biraz daha “spreadshirt” gibi */
}

/* =======================================================================
   PATCH v22 — Benefits: 3. kart panelini diğerleriyle alt hizaya getir
   (GÜVENLİ ÖDEME)
   ======================================================================= */

/* Kartları kolon akışına al (panel yüksekliği daha stabil) */
.kano-benefits .kano-benefit-item{
  display: flex !important;
  flex-direction: column !important;
}

/* 3. kartın panelini biraz daha uzat */
.kano-benefits .kano-benefit-item:nth-child(3) .kano-benefit-panel{
  /* “alta biraz uzasın” */
  padding-bottom: 53px !important;

  /* alt hizayı garantiye al (gerekirse 120-150 arası oynarsın) */
  min-height: 140px !important;
}

/* =======================================================================
   PATCH — Benefits panel gradient: daha yumuşak, profesyonel geçiş
   ======================================================================= */

.kano-benefits .kano-benefit-panel{
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.98) 0%,
    rgba(250,250,250,0.98) 28%,
    rgba(242,242,242,0.98) 62%,
    rgba(232,232,232,0.98) 100%
  ) !important;

  /* geçiş hissi daha smooth */
  transition: background 220ms ease !important;
}