/* ═══════════════════════════════════════════════════════════════════
   HERO BANNER & PROMO CARDS — EKOMART BİREBİR (v5.3 SIFIRDAN)
   Kaynak: ekomart-html/index-five.html + style.css satır 17565-18313
   KART HOVER ANİMASYONU YOK. Sadece buton bg değişimi.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ ESKİ site.css HOVER KURALLARI OVERRIDE — SIFIRLA ═══
   site.css içinde .sp-hb-box:hover, .sp-hb-ekomart-left:hover, .sp-hb-btn:hover i
   vb. translateY/translateX/rotate/filter kuralları var.
   Hepsini sıfırlıyoruz — ekomart birebir davranış. */
.sp-hb-box:hover,
.sp-hb-ekomart-left:hover,
.sp-hb-ekomart-right-item:hover,
.sp-hb-theme-ekomart .sp-hb-box:hover,
.sp-hb-theme-ekomart .sp-hb-ekomart-left:hover,
.sp-hb-theme-ekomart .sp-hb-ekomart-right-item:hover{
  transform:none!important;
  box-shadow:none!important;
  filter:none!important;
}
.sp-hb-box:hover::after,
.sp-hb-theme-ekomart .sp-hb-box:hover::after,
.sp-hb-theme-ekomart .sp-hb-ekomart-left:hover::after,
.sp-hb-theme-ekomart .sp-hb-ekomart-right-item:hover::after{
  transform:none!important;
}
.sp-hb-btn:hover{
  filter:none!important;
  transform:none!important;
  box-shadow:none!important;
}
.sp-hb-plus-btn:hover i{
  transform:none!important;
}
/* Plus buton icon rotasyon/scale KALDIRILDI */
.sp-hb-plus-btn:hover i{
  transform:none!important;
  scale:none;
}

/* v9.13.38 (refactor): HEMEN ÜYE OL CTA — admin'den shape + fx + color seçilir.
   Renk inline style ile geliyor (en yüksek öncelik). Burada sadece şekil/animasyon overrideları. */

/* Base — admin'den seçilen shape + color uygulanır, efekt yoksa SADECE kare/yuvarlak köşe değişir */
html body .sp-hb-rcta{
  font-weight:900 !important;
  letter-spacing:.5px;
  text-transform:uppercase;
  border:2px solid transparent !important;
  transition:transform .25s ease, filter .25s ease, box-shadow .25s ease, background .25s ease;
  box-shadow:none !important;  /* Default: HİÇ glow/parlaklık YOK */
}
html body .sp-hb-rcta:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:none !important}

/* v9.13.94: Hero banner butonlarında VARSAYILAN gölge/glow YOK — düz buton (kullanıcı isteği)
   Sadece data-btn-style="shadow-lift" veya "glow" seçiliyse gölge gelir. */
html body .sp-hb-btn:not([data-btn-style="shadow-lift"]):not([data-btn-style="glow"]){
  box-shadow:none !important;
}
html body .sp-hb-btn:not([data-btn-style="shadow-lift"]):not([data-btn-style="glow"]):hover{
  box-shadow:none !important;
}
html body .sp-hb-plus-btn:not([data-btn-style="shadow-lift"]):not([data-btn-style="glow"]){
  box-shadow:none !important;
}
html body .sp-hb-plus-btn:not([data-btn-style="shadow-lift"]):not([data-btn-style="glow"]):hover{
  box-shadow:none !important;
}
html body .sp-hb-rcta .sp-hb-btn-text,
html body .sp-hb-rcta .sp-hb-plus-text{font-weight:900 !important;letter-spacing:.5px;color:inherit !important}
html body .sp-hb-rcta .sp-hb-arrow-icon i{color:inherit !important}
html body .sp-hb-rcta .sp-hb-plus-icon{background:rgba(255,255,255,.22) !important}

/* ═══ BOYUT (padding + font-size) — v9.13.39: specificity boost (.sp-hb-rcta chain) ═══
   Eski sürüm site.css'in `.sp-hb-ekomart-left .sp-hb-btn{padding:14px 25px!important}` (0,2,0)
   rule'u tarafından eziliyordu. Şimdi: html body + .sp-hb-rcta.sp-hb-rcta-size-X → (0,2,2) → kazanır. */
html body .sp-hb-rcta.sp-hb-rcta-size-xs{padding:6px 14px !important;font-size:11px !important;gap:5px !important}
html body .sp-hb-rcta.sp-hb-rcta-size-xs .sp-hb-btn-text,
html body .sp-hb-rcta.sp-hb-rcta-size-xs .sp-hb-plus-text{font-size:11px !important}
html body .sp-hb-rcta.sp-hb-rcta-size-xs .sp-hb-arrow-icon i,
html body .sp-hb-rcta.sp-hb-rcta-size-xs .sp-hb-plus-icon{font-size:10px !important}
html body .sp-hb-rcta.sp-hb-rcta-size-xs .sp-hb-plus-icon{width:20px !important;height:20px !important}

html body .sp-hb-rcta.sp-hb-rcta-size-sm{padding:9px 18px !important;font-size:13px !important;gap:7px !important}
html body .sp-hb-rcta.sp-hb-rcta-size-sm .sp-hb-btn-text,
html body .sp-hb-rcta.sp-hb-rcta-size-sm .sp-hb-plus-text{font-size:13px !important}
html body .sp-hb-rcta.sp-hb-rcta-size-sm .sp-hb-arrow-icon i{font-size:12px !important}
html body .sp-hb-rcta.sp-hb-rcta-size-sm .sp-hb-plus-icon{width:24px !important;height:24px !important}

html body .sp-hb-rcta.sp-hb-rcta-size-md{padding:14px 25px !important;font-size:16px !important;gap:10px !important}
html body .sp-hb-rcta.sp-hb-rcta-size-md .sp-hb-btn-text,
html body .sp-hb-rcta.sp-hb-rcta-size-md .sp-hb-plus-text{font-size:16px !important}

html body .sp-hb-rcta.sp-hb-rcta-size-lg{padding:18px 32px !important;font-size:19px !important;gap:12px !important}
html body .sp-hb-rcta.sp-hb-rcta-size-lg .sp-hb-btn-text,
html body .sp-hb-rcta.sp-hb-rcta-size-lg .sp-hb-plus-text{font-size:19px !important}
html body .sp-hb-rcta.sp-hb-rcta-size-lg .sp-hb-arrow-icon i{font-size:15px !important}
html body .sp-hb-rcta.sp-hb-rcta-size-lg .sp-hb-plus-icon{width:36px !important;height:36px !important}

html body .sp-hb-rcta.sp-hb-rcta-size-xl{padding:22px 40px !important;font-size:23px !important;gap:14px !important}
html body .sp-hb-rcta.sp-hb-rcta-size-xl .sp-hb-btn-text,
html body .sp-hb-rcta.sp-hb-rcta-size-xl .sp-hb-plus-text{font-size:23px !important}
html body .sp-hb-rcta.sp-hb-rcta-size-xl .sp-hb-arrow-icon i{font-size:18px !important}
html body .sp-hb-rcta.sp-hb-rcta-size-xl .sp-hb-plus-icon{width:44px !important;height:44px !important}
/* Mobilde xl/lg butonlar fazla büyük olmasın → otomatik bir tık küçült (sadece mobil özel size SET EDİLMEMİŞSE) */
@media(max-width:768px){
  html body .sp-hb-rcta.sp-hb-rcta-size-xl:not([class*="sp-hb-rcta-size-mob-"]){padding:16px 28px !important;font-size:18px !important}
  html body .sp-hb-rcta.sp-hb-rcta-size-xl:not([class*="sp-hb-rcta-size-mob-"]) .sp-hb-btn-text,
  html body .sp-hb-rcta.sp-hb-rcta-size-xl:not([class*="sp-hb-rcta-size-mob-"]) .sp-hb-plus-text{font-size:18px !important}
  html body .sp-hb-rcta.sp-hb-rcta-size-lg:not([class*="sp-hb-rcta-size-mob-"]){padding:13px 22px !important;font-size:15px !important}
  html body .sp-hb-rcta.sp-hb-rcta-size-lg:not([class*="sp-hb-rcta-size-mob-"]) .sp-hb-btn-text,
  html body .sp-hb-rcta.sp-hb-rcta-size-lg:not([class*="sp-hb-rcta-size-mob-"]) .sp-hb-plus-text{font-size:15px !important}
}

/* v9.13.63: MOBİL özel size — admin'den seçildiyse mobilde bu boyutu kullan, masaüstü size'ı override eder */
@media(max-width:768px){
  /* xs */
  html body .sp-hb-rcta.sp-hb-rcta-size-mob-xs{padding:6px 14px !important;font-size:11px !important;gap:5px !important}
  html body .sp-hb-rcta.sp-hb-rcta-size-mob-xs .sp-hb-btn-text,
  html body .sp-hb-rcta.sp-hb-rcta-size-mob-xs .sp-hb-plus-text{font-size:11px !important}
  html body .sp-hb-rcta.sp-hb-rcta-size-mob-xs .sp-hb-arrow-icon i{font-size:10px !important}
  html body .sp-hb-rcta.sp-hb-rcta-size-mob-xs .sp-hb-plus-icon{width:20px !important;height:20px !important}
  /* sm */
  html body .sp-hb-rcta.sp-hb-rcta-size-mob-sm{padding:9px 18px !important;font-size:13px !important;gap:7px !important}
  html body .sp-hb-rcta.sp-hb-rcta-size-mob-sm .sp-hb-btn-text,
  html body .sp-hb-rcta.sp-hb-rcta-size-mob-sm .sp-hb-plus-text{font-size:13px !important}
  html body .sp-hb-rcta.sp-hb-rcta-size-mob-sm .sp-hb-arrow-icon i{font-size:12px !important}
  html body .sp-hb-rcta.sp-hb-rcta-size-mob-sm .sp-hb-plus-icon{width:24px !important;height:24px !important}
  /* md */
  html body .sp-hb-rcta.sp-hb-rcta-size-mob-md{padding:14px 25px !important;font-size:16px !important;gap:10px !important}
  html body .sp-hb-rcta.sp-hb-rcta-size-mob-md .sp-hb-btn-text,
  html body .sp-hb-rcta.sp-hb-rcta-size-mob-md .sp-hb-plus-text{font-size:16px !important}
  html body .sp-hb-rcta.sp-hb-rcta-size-mob-md .sp-hb-arrow-icon i{font-size:14px !important}
  html body .sp-hb-rcta.sp-hb-rcta-size-mob-md .sp-hb-plus-icon{width:30px !important;height:30px !important}
  /* lg */
  html body .sp-hb-rcta.sp-hb-rcta-size-mob-lg{padding:16px 28px !important;font-size:18px !important;gap:12px !important}
  html body .sp-hb-rcta.sp-hb-rcta-size-mob-lg .sp-hb-btn-text,
  html body .sp-hb-rcta.sp-hb-rcta-size-mob-lg .sp-hb-plus-text{font-size:18px !important}
  html body .sp-hb-rcta.sp-hb-rcta-size-mob-lg .sp-hb-arrow-icon i{font-size:14px !important}
  html body .sp-hb-rcta.sp-hb-rcta-size-mob-lg .sp-hb-plus-icon{width:34px !important;height:34px !important}
  /* xl */
  html body .sp-hb-rcta.sp-hb-rcta-size-mob-xl{padding:20px 36px !important;font-size:21px !important;gap:14px !important}
  html body .sp-hb-rcta.sp-hb-rcta-size-mob-xl .sp-hb-btn-text,
  html body .sp-hb-rcta.sp-hb-rcta-size-mob-xl .sp-hb-plus-text{font-size:21px !important}
  html body .sp-hb-rcta.sp-hb-rcta-size-mob-xl .sp-hb-arrow-icon i{font-size:17px !important}
  html body .sp-hb-rcta.sp-hb-rcta-size-mob-xl .sp-hb-plus-icon{width:42px !important;height:42px !important}
}

/* ═══ ŞEKİL (köşe radius) ═══ */
html body .sp-hb-rcta-shape-square  {border-radius:8px !important}
html body .sp-hb-rcta-shape-pill    {border-radius:60px !important}
html body .sp-hb-rcta-shape-rounded {border-radius:14px !important}
html body .sp-hb-rcta-shape-sharp   {border-radius:0 !important}
/* Outline — arka plan transparent, border renkli (renk inline'dan geliyor) */
html body .sp-hb-rcta-shape-outline {
  background:transparent !important;
  border-width:2px !important;
  border-style:solid !important;
  border-radius:8px !important;
  /* Yazı rengini buton renginde göster — inline color override eder ama
     outline modu için border'dan rengi al */
}
html body .sp-hb-rcta-shape-outline:hover{
  /* Hover: dolgu rengi → buton rengi (inline ile gelen) */
  filter:brightness(.95);
}

/* ═══ EFEKTLER (default: none → hiçbir efekt yok) ═══ */
/* Glow */
html body .sp-hb-rcta-fx-glow{animation:spHbRctaGlow 2s ease-in-out infinite}
@keyframes spHbRctaGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(249,115,22,.55),0 6px 18px rgba(249,115,22,.35) !important}
  50%{box-shadow:0 0 0 14px rgba(249,115,22,0),0 10px 28px rgba(249,115,22,.55) !important}
}
/* Pulse */
html body .sp-hb-rcta-fx-pulse{animation:spHbRctaPulse 1.6s ease-in-out infinite}
@keyframes spHbRctaPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.04)}
}
/* Neon — gradient renk değişimi (inline color'ı yener — kasti) */
html body .sp-hb-rcta-fx-neon{
  background:linear-gradient(135deg,#f97316 0%,#ec4899 50%,#a855f7 100%) !important;
  background-size:200% 200% !important;
  animation:spHbRctaNeon 4s ease-in-out infinite;
}
@keyframes spHbRctaNeon{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
/* Shine — buton üzerinde geçen ışık çizgisi */
html body .sp-hb-rcta-fx-shine{position:relative;overflow:hidden}
html body .sp-hb-rcta-fx-shine::after{
  content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  animation:spHbRctaShine 2.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes spHbRctaShine{
  0%{left:-100%}
  60%,100%{left:120%}
}

/* ═══ HERO BANNER ═══ */
/* EKOMART .rts-section-gap = 60px 0 birebir */
.sp-hero-banner{padding:60px 0!important}
@media(max-width:575px){.sp-hero-banner{padding:20px 0 60px!important}}

/* EKOMART row.g-5.g-sm-4 birebir: .g-sm-4 override 1.5rem = 24px (sm ve üstü) */
.sp-hb-ekomart{
  display:grid!important;
  grid-template-columns:minmax(0,3fr) minmax(0,1fr)!important;
  gap:24px!important;
  align-items:stretch;
}
@media(max-width:991px){.sp-hb-ekomart{grid-template-columns:1fr!important;gap:24px!important}}
@media(max-width:575px){.sp-hb-ekomart{gap:16px!important}}

/* SOL BÜYÜK KART — ekomart .banner-left-five-area-start */
.sp-hb-ekomart-left{
  height:550px;
  border-radius:4px;
  display:flex;align-items:center;
  background-size:cover;
  background-position:right center;
  background-repeat:no-repeat;
  position:relative;
  overflow:hidden;
}
@media(max-width:575px){.sp-hb-ekomart-left{height:450px}}

/* EKOMART .inner-content-banner-five birebir — sadece margin-left, max-width YOK */
.sp-hb-ekomart-left .sp-hb-content{
  margin-left:var(--hb-content-margin-left,120px);
  margin-right:30px;
  max-width:none;
}
@media(max-width:991px){.sp-hb-ekomart-left .sp-hb-content{margin-left:30px!important}}

/* v9.13.35/36: KUTU SEVİYESİ FONT-SIZE — admin > Hero Banner > Kutu > "Kutu Yazı Stili"
   Desktop kural: tüm viewport'larda çalışır (mobile media query üstüne yazar).
   Specificity boost (.sp-hb-box.sp-hb-box) ile site.css default'larını yener. */
html body .sp-hb-box.sp-hb-box[style*="--hb-fs-subtitle:"] .sp-hb-subtitle{font-size:var(--hb-fs-subtitle) !important}
html body .sp-hb-box.sp-hb-box[style*="--hb-fs-title:"] .sp-hb-title{font-size:var(--hb-fs-title) !important}
html body .sp-hb-box.sp-hb-box[style*="--hb-fs-desc:"] .sp-hb-desc{font-size:var(--hb-fs-desc) !important}
html body .sp-hb-box.sp-hb-box[style*="--hb-fs-badge:"] .sp-hb-badge{font-size:var(--hb-fs-badge) !important}
html body .sp-hb-box.sp-hb-box[style*="--hb-fs-btn:"] .sp-hb-btn,
html body .sp-hb-box.sp-hb-box[style*="--hb-fs-btn:"] .sp-hb-btn-text,
html body .sp-hb-box.sp-hb-box[style*="--hb-fs-btn:"] .sp-hb-plus-btn,
html body .sp-hb-box.sp-hb-box[style*="--hb-fs-btn:"] .sp-hb-plus-text{font-size:var(--hb-fs-btn) !important}

/* v9.13.32: PER-BOX PADDING SİSTEMİ — kullanıcı admin > Hero Banner > Kutu > "İç Boşluklar"
   alanından girdiği değerler --hb-pad-* CSS değişkenleri olarak inline emit edilir.
   Buradaki kurallar bu değişkenleri padding'e çevirir.
   v9.13.34: Specificity boost (.sp-hb-box.sp-hb-box) — site.css'teki
   "html body .sp-hb-box.sp-hb-ekomart-left{padding:80px 60px 80px 120px!important}" (0,2,2)
   ile bizim eski rule (0,2,2) çakışıyordu, source order'a kalan tie'ı kesinlikle aşar:
   (.sp-hb-box.sp-hb-box[style*=...] + html body) → (0,3,2) > site.css'in (0,2,2) */
html body .sp-hb-box.sp-hb-box[style*="--hb-pad-top"]{padding-top:var(--hb-pad-top) !important}
html body .sp-hb-box.sp-hb-box[style*="--hb-pad-right"]{padding-right:var(--hb-pad-right) !important}
html body .sp-hb-box.sp-hb-box[style*="--hb-pad-bottom"]{padding-bottom:var(--hb-pad-bottom) !important}
html body .sp-hb-box.sp-hb-box[style*="--hb-pad-left"]{padding-left:var(--hb-pad-left) !important}
/* Eğer kullanıcı YALNIZCA bazı yönleri girdiyse → site.css default'u (80px 60px 80px 120px) hala
   diğer yönlerde geçerli kalsın — tek değişken bile varsa shorthand'ı sıfırlamayız. Bu doğru davranış. */

/* v9.13.22: İçerik hizalama — kapsamlı yeniden yazım.
   Sorun: eski CSS sadece flex açıyordu ama mevcut margin-left:120px çakışıyordu, alignment etki etmiyordu.
   Çözüm: alignment seçilince TÜM margin'ları sıfırla, flex container'ı override et, her kombinasyon için kural. */

/* SOL KUTU — flex column container.
   v9.13.30: html body prefix ile site.css'in mobile override'larını da yener (specificity 0,0,3,2 → bizimki 0,1,3,2).
   Desc max-width zorlamasını da reset ediyoruz — yoksa text-align:right olsa bile %80 max-width yüzünden sağa yaslanmaz. */
html body .sp-hb-ekomart-left[style*="--hb-align-x"] .sp-hb-content,
html body .sp-hb-ekomart-left[style*="--hb-align-y"] .sp-hb-content{
  display:flex !important;
  flex-direction:column !important;
  justify-content:var(--hb-align-y,center) !important;
  align-items:var(--hb-align-x,flex-start) !important;
  text-align:var(--hb-text-align,left) !important;
  height:100% !important;
  /* ÖNEMLİ: alignment varsa eski margin-left:120px override edilmeli — yoksa "center" merkezine gelmez */
  margin-left:0 !important;
  margin-right:0 !important;
  width:100% !important;
  max-width:none !important;
}
/* Alignment varken title/subtitle max-width forclanmasın → kutuyu tam kapla, hizalama hissedilsin.
   v9.13.34: .sp-hb-desc bu kural dışında bırakıldı — kullanıcı "İçerik Genişliği" alanından desc
   max-width'ini özgürce ayarlayabilsin. (Desc max-width yukarıdaki [style*="--hb-desc-max-width"]
   rule'undan gelir.) */
html body .sp-hb-ekomart-left[style*="--hb-align-x"] .sp-hb-content .sp-hb-title,
html body .sp-hb-ekomart-left[style*="--hb-align-x"] .sp-hb-content .sp-hb-subtitle,
html body .sp-hb-ekomart-left[style*="--hb-align-y"] .sp-hb-content .sp-hb-title,
html body .sp-hb-ekomart-left[style*="--hb-align-y"] .sp-hb-content .sp-hb-subtitle{
  max-width:100% !important;
  text-align:var(--hb-text-align,left) !important;
}
/* Desc için alignment varken sadece text-align uygula, max-width kullanıcının ayarına bırak */
html body .sp-hb-ekomart-left[style*="--hb-align-x"] .sp-hb-content .sp-hb-desc,
html body .sp-hb-ekomart-left[style*="--hb-align-y"] .sp-hb-content .sp-hb-desc{
  text-align:var(--hb-text-align,left) !important;
}
/* Buton da hizalanmaya saygı duysun (max-content olduğu için margin auto ile center/right'a kayar) */
html body .sp-hb-ekomart-left[style*="--hb-align-x:center"] .sp-hb-content .sp-hb-btn{margin-left:auto !important;margin-right:auto !important}
html body .sp-hb-ekomart-left[style*="--hb-align-x:flex-end"] .sp-hb-content .sp-hb-btn{margin-left:auto !important;margin-right:0 !important}
/* Sol kutuda alignment varken padding (--hb-content-margin-left) override edilir.
   Kullanıcı padding ile margin değil, kutu PADDING'i ile space yaratıyor. */

/* SAĞ KUTU — content position:absolute, top/left ile pozisyonlanır.
   Her X×Y kombinasyonu için açık kural (9 kombinasyon)
   v9.13.30: html body prefix ile site.css'in "text-align:left!important; max-width:100%!important" zorlamasını yener */

/* X = Sol (flex-start) */
html body .sp-hb-ekomart-right-item[style*="--hb-align-x:flex-start"] .sp-hb-content{
  left:var(--hb-right-left,40px) !important;right:auto !important;text-align:left !important;
}
/* X = Orta */
html body .sp-hb-ekomart-right-item[style*="--hb-align-x:center"] .sp-hb-content{
  left:50% !important;right:auto !important;text-align:center !important;
  transform:translateX(-50%);
}
/* X = Sağ */
html body .sp-hb-ekomart-right-item[style*="--hb-align-x:flex-end"] .sp-hb-content{
  left:auto !important;right:var(--hb-right-left,40px) !important;text-align:right !important;
}

/* Y = Üst (flex-start) */
html body .sp-hb-ekomart-right-item[style*="--hb-align-y:flex-start"] .sp-hb-content{
  top:var(--hb-right-top,40px) !important;bottom:auto !important;
}
/* Y = Orta */
html body .sp-hb-ekomart-right-item[style*="--hb-align-y:center"] .sp-hb-content{
  top:50% !important;bottom:auto !important;
  transform:translateY(-50%);
}
/* Y = Alt */
html body .sp-hb-ekomart-right-item[style*="--hb-align-y:flex-end"] .sp-hb-content{
  top:auto !important;bottom:var(--hb-right-top,40px) !important;
}

/* X+Y kombinasyonları — her ikisi center olduğunda transform birleşik */
html body .sp-hb-ekomart-right-item[style*="--hb-align-x:center"][style*="--hb-align-y:center"] .sp-hb-content{
  transform:translate(-50%,-50%);
}
html body .sp-hb-ekomart-right-item[style*="--hb-align-x:center"][style*="--hb-align-y:flex-start"] .sp-hb-content,
html body .sp-hb-ekomart-right-item[style*="--hb-align-x:center"][style*="--hb-align-y:flex-end"] .sp-hb-content{
  transform:translateX(-50%);
}
html body .sp-hb-ekomart-right-item[style*="--hb-align-x:flex-start"][style*="--hb-align-y:center"] .sp-hb-content,
html body .sp-hb-ekomart-right-item[style*="--hb-align-x:flex-end"][style*="--hb-align-y:center"] .sp-hb-content{
  transform:translateY(-50%);
}
/* Sağ kart başlığı/badge'i de hizalama metnine saygılı olsun */
html body .sp-hb-ekomart-right-item[style*="--hb-align-x"] .sp-hb-content .sp-hb-title,
html body .sp-hb-ekomart-right-item[style*="--hb-align-x"] .sp-hb-content .sp-hb-badge{
  text-align:inherit !important;
}

.sp-hb-ekomart-left .sp-hb-subtitle{
  display:block;
  color:var(--ekomart-accent,#629D23);
  font-size:16px;font-weight:600;
  margin:0 0 15px;
  font-family:'Barlow','Inter',system-ui,sans-serif;
}
.sp-hb-ekomart-left .sp-hb-title{
  font-size:48px;font-weight:700;line-height:1.15;
  color:#2C3C28;
  margin:0 0 15px;
  font-family:'Barlow','Inter',system-ui,sans-serif;
}
@media(max-width:575px){.sp-hb-ekomart-left .sp-hb-title{font-size:26px;line-height:1.4}}
@media(max-width:479px){.sp-hb-ekomart-left .sp-hb-title{font-size:24px}}

.sp-hb-ekomart-left .sp-hb-desc{
  max-width:var(--hb-desc-max-width,80%);
  font-size:16px;font-weight:400;line-height:1.4;
  color:#2F422B;
  margin:0 0 25px;
  font-family:'Barlow','Inter',system-ui,sans-serif;
}
/* v9.13.34/36: İçerik Genişliği — TÜM içerik (başlık+subtitle+desc+buton) bu max-width'i alır.
   DESKTOP rule SADECE min-width:769px içinde uygulanır → mobile'a sızmaz; mobile responsive.css'in
   --hb-content-max-width-m kuralını ezmez. */
@media(min-width:769px){
  html body .sp-hb-ekomart-left.sp-hb-ekomart-left[style*="--hb-content-max-width"] .sp-hb-content .sp-hb-title,
  html body .sp-hb-ekomart-left.sp-hb-ekomart-left[style*="--hb-content-max-width"] .sp-hb-content .sp-hb-subtitle,
  html body .sp-hb-ekomart-left.sp-hb-ekomart-left[style*="--hb-content-max-width"] .sp-hb-content .sp-hb-desc,
  html body .sp-hb-ekomart-left.sp-hb-ekomart-left[style*="--hb-content-max-width"] .sp-hb-content .sp-hb-btn{
    max-width:var(--hb-content-max-width,100%) !important;
  }
  html body .sp-hb-ekomart-right-item.sp-hb-ekomart-right-item[style*="--hb-content-max-width"] .sp-hb-content .sp-hb-title,
  html body .sp-hb-ekomart-right-item.sp-hb-ekomart-right-item[style*="--hb-content-max-width"] .sp-hb-content .sp-hb-badge,
  html body .sp-hb-ekomart-right-item.sp-hb-ekomart-right-item[style*="--hb-content-max-width"] .sp-hb-content .sp-hb-plus-btn{
    max-width:var(--hb-content-max-width,100%) !important;
  }
}

/* SAĞ SÜTUN — ekomart g-sm-4 (24px) birebir */
.sp-hb-ekomart-right{
  display:grid!important;
  grid-auto-rows:1fr!important;
  gap:24px!important;
  min-height:100%;
}
@media(max-width:991px){.sp-hb-ekomart-right{grid-auto-rows:auto!important;gap:24px!important}}
@media(max-width:575px){.sp-hb-ekomart-right{gap:16px!important}}

.sp-hb-ekomart-right-item{
  border-radius:4px;
  position:relative;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  overflow:hidden;
  min-height:0;
}
@media(max-width:991px){.sp-hb-ekomart-right-item{min-height:260px}}

.sp-hb-ekomart-right-item .sp-hb-content{
  position:absolute;
  left:var(--hb-right-left,40px);
  top:var(--hb-right-top,40px);
  right:auto;bottom:auto;
  max-width:calc(100% - 80px);
}
@media(max-width:1199px){.sp-hb-ekomart-right-item .sp-hb-content{left:25px;top:25px;max-width:calc(100% - 50px)}}

.sp-hb-ekomart-right-item .sp-hb-badge{
  display:inline-block;
  background:var(--ekomart-accent,#629D23);color:#fff;
  padding:10px 18px;border-radius:6px;
  font-size:14px;font-weight:600;
  margin:0 0 15px;
  font-family:'Barlow','Inter',system-ui,sans-serif;
}
.sp-hb-ekomart-right-item .sp-hb-title{
  font-size:26px;font-weight:700;line-height:38px;
  color:#2C3C28;
  margin:0 0 20px;
  font-family:'Barlow','Inter',system-ui,sans-serif;
}
@media(max-width:1199px){.sp-hb-ekomart-right-item .sp-hb-title{font-size:22px;line-height:30px}}

/* ═══ BUTON — ekomart .rts-btn.btn-primary.radious-sm.with-icon BİREBİR ═══ */
.sp-hero-banner .sp-hb-btn,
.sp-promo-cards .sp-pc-btn{
  display:flex!important;
  align-items:center;
  gap:10px;
  max-width:max-content;
  padding:14px 25px!important;
  border-radius:6px!important;
  font-size:16px!important;
  font-weight:700!important;
  font-family:'Barlow','Inter',system-ui,sans-serif;
  color:#fff!important;
  background:var(--btn-bg,#629D23)!important;
  text-decoration:none;
  border:none;
  cursor:pointer;
  transition:.3s!important;
  overflow:hidden;
}
.sp-hero-banner .sp-hb-btn:hover,
.sp-promo-cards .sp-pc-btn:hover{
  background:var(--btn-hover-bg,#2c3c28)!important;
}
/* Dual arrow-icon animasyonu — ekomart birebir */
.sp-hb-arrow-icon,
.sp-pc-arrow-icon{
  display:inline-block;
  transition:opacity .4s .25s, transform .6s .25s cubic-bezier(.1,.75,.25,1);
}
.sp-hb-btn-text,.sp-pc-btn-text{
  display:inline-block;
  transition:transform .6s .125s cubic-bezier(.1,.75,.25,1);
}
/* İkinci arrow-icon başta gizli */
.sp-hb-arrow-icon + .sp-hb-arrow-icon,
.sp-pc-arrow-icon + .sp-pc-arrow-icon{
  margin-inline-start:0;margin-inline-end:0;
  opacity:0;
  transform:translateX(-10px);
  transition-delay:0s;
  order:-2;
  display:none;
}
/* Hover: ikinci arrow görünür olur (ekomart display:none fakat opacity+transform var) */
.sp-hb-btn:hover .sp-hb-btn-text,
.sp-pc-btn:hover .sp-pc-btn-text{
  transition-delay:.1s;
  transform:translateX(0);
}
.sp-hb-btn:hover .sp-hb-arrow-icon + .sp-hb-arrow-icon,
.sp-pc-btn:hover .sp-pc-arrow-icon + .sp-pc-arrow-icon{
  opacity:1;
  transform:translateX(0);
  transition-delay:.225s;
}
.sp-hb-btn:hover .sp-hb-arrow-icon,
.sp-pc-btn:hover .sp-pc-arrow-icon{
  opacity:1;
  transition-delay:0s;
  transform:translateX(0);
}

/* ═══ PLUS BUTON — ekomart .shop-now-goshop-btn BİREBİR (basitleştirilmiş) ═══ */
.sp-hb-plus-btn{
  display:inline-flex!important;
  align-items:center;
  gap:10px;
  max-width:max-content;
  text-decoration:none;
  transition:.3s;
}
.sp-hb-plus-text{
  display:inline-flex;
  font-weight:700;
  color:#232722;
  font-family:'Barlow','Inter',system-ui,sans-serif;
  font-size:16px;
  transition:color .3s ease;
}
.sp-hb-plus-icon{
  height:30px;width:30px;
  background:var(--ekomart-accent,#629D23);
  border-radius:50%;
  display:inline-flex!important;
  align-items:center;justify-content:center;
  transition:background-color .3s ease;
}
.sp-hb-plus-icon i{color:#fff;font-size:12px;line-height:1}
.sp-hb-plus-btn:hover .sp-hb-plus-icon{background:#2c3c28}

/* ═══ BUTON RENK PRESETLERİ (normal + hover ters) ═══ */
.sp-hero-banner[data-btn-color="site"],
.sp-promo-cards[data-btn-color="site"]
{--btn-bg:var(--p);--btn-color:#fff;--btn-hover-bg:#2c3c28;--btn-hover-color:#fff;--ekomart-accent:var(--p)}
.sp-hero-banner[data-btn-color="ekomart-green"],
.sp-promo-cards[data-btn-color="ekomart-green"]
{--btn-bg:#629D23;--btn-color:#fff;--btn-hover-bg:#2c3c28;--btn-hover-color:#fff;--ekomart-accent:#629D23}
.sp-hero-banner[data-btn-color="dark"],
.sp-promo-cards[data-btn-color="dark"]
{--btn-bg:#2C3C28;--btn-color:#fff;--btn-hover-bg:var(--p);--btn-hover-color:#fff;--ekomart-accent:var(--p)}
.sp-hero-banner[data-btn-color="orange"],
.sp-promo-cards[data-btn-color="orange"]
{--btn-bg:#f97316;--btn-color:#fff;--btn-hover-bg:#2C3C28;--btn-hover-color:#fff;--ekomart-accent:#f97316}
.sp-hero-banner[data-btn-color="invert"] .sp-hb-btn,
.sp-promo-cards[data-btn-color="invert"] .sp-pc-btn{
  background:#fff!important;color:#2C3C28!important;border:1.5px solid #2C3C28;
}
.sp-hero-banner[data-btn-color="invert"] .sp-hb-btn:hover,
.sp-promo-cards[data-btn-color="invert"] .sp-pc-btn:hover{
  background:#2C3C28!important;color:#fff!important;
}
.sp-hero-banner[data-btn-color="invert-site"] .sp-hb-btn,
.sp-promo-cards[data-btn-color="invert-site"] .sp-pc-btn{
  background:#fff!important;color:var(--p)!important;border:1.5px solid var(--p);
}
.sp-hero-banner[data-btn-color="invert-site"] .sp-hb-btn:hover,
.sp-promo-cards[data-btn-color="invert-site"] .sp-pc-btn:hover{
  background:var(--p)!important;color:#fff!important;
}
.sp-hero-banner[data-btn-color="ghost"] .sp-hb-btn,
.sp-promo-cards[data-btn-color="ghost"] .sp-pc-btn{
  background:transparent!important;color:#2C3C28!important;border:1.5px solid #2C3C28;
}
.sp-hero-banner[data-btn-color="ghost"] .sp-hb-btn:hover,
.sp-promo-cards[data-btn-color="ghost"] .sp-pc-btn:hover{
  background:#2C3C28!important;color:#fff!important;
}

/* ═══════════════════════════════════════════════════════════════════
   PROMO CARDS — SIFIRDAN EKOMART
   Her kart: sol body + sağ ürün görseli. KART HOVER YOK.
   ═══════════════════════════════════════════════════════════════════ */
.sp-promo-cards{padding:0 0 60px}

.sp-pc-grid{
  display:grid;
  gap:24px;
}

/* v9.13.99: Dark mode'da promo kart ayraçları sitenin primary (yeşil) rengini kullanır.
   Inline style'larda border-color ayarlandığı için !important gerekir.
   Açık tema'da admin'den seçilen renk korunur (override yok). */
[data-theme="dark"] .sp-pc-vdiv{
  border-left-color:var(--p,#16a34a)!important;
  opacity:.55;
}
[data-theme="dark"] .sp-pc-hdiv{
  border-top-color:var(--p,#16a34a)!important;
  opacity:.55;
}

.sp-pc-card{
  position:relative;
  border-radius:6px;
  overflow:hidden;
  background-color:#ece4d4;
  display:flex;align-items:stretch;
  min-height:305px;
  padding:0;
}
@media(max-width:991px){.sp-pc-card{min-height:260px}}

.sp-pc-card[data-img-pos="left"]{flex-direction:row-reverse}

.sp-pc-body{
  flex:1;min-width:0;
  padding:40px 0 40px 45px;
  display:flex;flex-direction:column;justify-content:center;
  max-width:55%;
}
.sp-pc-card[data-img-pos="left"] .sp-pc-body{padding:40px 45px 40px 0}
@media(max-width:767px){.sp-pc-body{max-width:100%;padding:30px 25px}}

/* v9.13.25: Per-card alignment — content_align_x/y CSS değişkeni varsa devreye girer.
   Sol/Orta/Sağ × Üst/Orta/Alt = 9 kombinasyon, hepsi otomatik flex'le çalışır. */
.sp-pc-card[style*="--pc-align-x"] .sp-pc-body,
.sp-pc-card[style*="--pc-align-y"] .sp-pc-body{
  align-items:var(--pc-align-x,flex-start) !important;
  justify-content:var(--pc-align-y,center) !important;
  text-align:var(--pc-text-align,left) !important;
}
/* Title/desc/badge children'ı için de text-align uygula (başlık ortalansın) */
.sp-pc-card[style*="--pc-text-align"] .sp-pc-title,
.sp-pc-card[style*="--pc-text-align"] .sp-pc-desc{
  text-align:var(--pc-text-align,left) !important;
  width:100%;
}

.sp-pc-badge{
  display:inline-block;
  background:var(--ekomart-accent,#629D23);color:#fff;
  padding:8px 16px;border-radius:4px;
  font-size:13px;font-weight:600;
  margin:0 0 12px;
  max-width:max-content;
  font-family:'Barlow','Inter',system-ui,sans-serif;
}
.sp-pc-title{
  font-size:30px;font-weight:700;line-height:1.2;
  color:#2C3C28;
  margin:0 0 10px;
  font-family:'Barlow','Inter',system-ui,sans-serif;
}
@media(max-width:767px){.sp-pc-title{font-size:22px}}

.sp-pc-desc{
  font-size:15px;font-weight:400;line-height:1.5;
  color:#5a6c55;
  margin:0 0 20px;
  font-family:'Barlow','Inter',system-ui,sans-serif;
}

.sp-pc-image{
  position:absolute;right:0;top:0;bottom:0;
  width:45%;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  pointer-events:none;
}
.sp-pc-card[data-img-pos="left"] .sp-pc-image{right:auto;left:0}
.sp-pc-image img{
  max-width:100%;max-height:100%;
  object-fit:contain;
  display:block;
}
@media(max-width:767px){.sp-pc-image{position:relative;width:100%;padding:0 20px 20px;min-height:140px}}

/* ═══ HERO VARYANTLARI (v5.4 — bg_image VARKEN CSS renk kurallarını ezmez) ═══ */
/* Kural: [data-has-bg="1"] varsa varyant renk/gradient kuralları UYGULANMAZ.
   Sadece overlay/border/text-color kuralları aktif kalır. */
/* classic: default bg_image (kural yok) */

.sp-hero-banner[data-hb-variant="gradient-left"] .sp-hb-ekomart-left:not([data-has-bg]){
  background:linear-gradient(135deg,color-mix(in srgb,var(--p) 85%,#000 15%),var(--p),var(--pd,var(--p)))!important;
}
.sp-hero-banner[data-hb-variant="gradient-left"] .sp-hb-ekomart-left:not([data-has-bg]) .sp-hb-title,
.sp-hero-banner[data-hb-variant="gradient-left"] .sp-hb-ekomart-left:not([data-has-bg]) .sp-hb-subtitle,
.sp-hero-banner[data-hb-variant="gradient-left"] .sp-hb-ekomart-left:not([data-has-bg]) .sp-hb-desc{color:#fff!important}

.sp-hero-banner[data-hb-variant="soft-pastel"] .sp-hb-ekomart-left:not([data-has-bg]){background-color:#e7e7e7!important}
.sp-hero-banner[data-hb-variant="soft-pastel"] .sp-hb-ekomart-right-item:nth-child(1):not([data-has-bg]){background-color:#fee2b3!important}
.sp-hero-banner[data-hb-variant="soft-pastel"] .sp-hb-ekomart-right-item:nth-child(2):not([data-has-bg]){background-color:#d7e9c8!important}
.sp-hero-banner[data-hb-variant="soft-pastel"] .sp-hb-ekomart-right-item:nth-child(3):not([data-has-bg]){background-color:#f4d6e6!important}
.sp-hero-banner[data-hb-variant="soft-pastel"] .sp-hb-ekomart-right-item:nth-child(4):not([data-has-bg]){background-color:#c8e4f4!important}

.sp-hero-banner[data-hb-variant="dark-premium"] .sp-hb-ekomart-left:not([data-has-bg]){
  background:linear-gradient(135deg,#0f172a,#1e293b,#0f172a)!important;
}
.sp-hero-banner[data-hb-variant="dark-premium"] .sp-hb-ekomart-left .sp-hb-title,
.sp-hero-banner[data-hb-variant="dark-premium"] .sp-hb-ekomart-left .sp-hb-subtitle,
.sp-hero-banner[data-hb-variant="dark-premium"] .sp-hb-ekomart-left .sp-hb-desc{color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.sp-hero-banner[data-hb-variant="dark-premium"] .sp-hb-ekomart-right-item:not([data-has-bg]){
  background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.08);
}
.sp-hero-banner[data-hb-variant="dark-premium"] .sp-hb-ekomart-right-item .sp-hb-title{color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.35)}

.sp-hero-banner[data-hb-variant="minimal-line"] .sp-hb-ekomart-left:not([data-has-bg]),
.sp-hero-banner[data-hb-variant="minimal-line"] .sp-hb-ekomart-right-item:not([data-has-bg]){
  background-color:#fff!important;border:1px solid #e5e7eb;
}

.sp-hero-banner[data-hb-variant="showcase"] .sp-hb-ekomart-left:not([data-has-bg]){
  background:linear-gradient(95deg,#e8f5e0,#fff 70%)!important;
}

.sp-hero-banner[data-hb-variant="glass-light"] .sp-hb-ekomart-left:not([data-has-bg]){
  background:linear-gradient(135deg,color-mix(in srgb,var(--p) 18%,#fff),color-mix(in srgb,var(--s,var(--p)) 14%,#fff))!important;
}
.sp-hero-banner[data-hb-variant="glass-light"] .sp-hb-ekomart-right-item:not([data-has-bg]){
  background:rgba(255,255,255,.75)!important;backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.5);
}

/* v5.4: bg_image varken varyant sadece TEXT/OVERLAY uygular → okunurluk için */
.sp-hero-banner[data-hb-variant="dark-premium"] .sp-hb-ekomart-left[data-has-bg]::before,
.sp-hero-banner[data-hb-variant="dark-premium"] .sp-hb-ekomart-right-item[data-has-bg]::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(135deg,rgba(15,23,42,.55),rgba(15,23,42,.25));
  pointer-events:none;z-index:0;
}
.sp-hero-banner[data-hb-variant="dark-premium"] .sp-hb-ekomart-left[data-has-bg],
.sp-hero-banner[data-hb-variant="dark-premium"] .sp-hb-ekomart-right-item[data-has-bg]{position:relative}
.sp-hero-banner[data-hb-variant="dark-premium"] [data-has-bg] .sp-hb-content{position:relative;z-index:1}

/* Slider modundayken: görsel okunurluğu için hafif overlay opsiyonel uygulanır.
   Site genelinde zaten auto-contrast toggle var, ama data-slider-mode="1" → overlay daima açık. */
.sp-hero-banner[data-slider-mode="1"] .sp-hb-box[data-has-bg]{position:relative}
.sp-hero-banner[data-slider-mode="1"] .sp-hb-box[data-has-bg]::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(90deg,rgba(0,0,0,.32) 0%,rgba(0,0,0,.12) 50%,transparent 100%);
  pointer-events:none;z-index:0;
}
.sp-hero-banner[data-slider-mode="1"] .sp-hb-box[data-has-bg] .sp-hb-content{position:relative;z-index:1}
.sp-hero-banner[data-slider-mode="1"] .sp-hb-box[data-has-bg] .sp-hb-title,
.sp-hero-banner[data-slider-mode="1"] .sp-hb-box[data-has-bg] .sp-hb-subtitle,
.sp-hero-banner[data-slider-mode="1"] .sp-hb-box[data-has-bg] .sp-hb-desc,
.sp-hero-banner[data-slider-mode="1"] .sp-hb-box[data-has-bg] .sp-hb-badge{color:#fff!important;text-shadow:0 1px 3px rgba(0,0,0,.45)}

/* ═══ PROMO VARYANTLARI (v5.4) ═══ */
/* ekomart (default, kural yok) */

.sp-promo-cards[data-pc-variant="gradient-premium"] .sp-pc-card:not([data-has-bg]){
  background:linear-gradient(135deg,color-mix(in srgb,var(--p) 85%,#000 10%),var(--p),var(--pd,var(--p)))!important;
}
.sp-promo-cards[data-pc-variant="gradient-premium"] .sp-pc-card:not([data-has-bg]) .sp-pc-title,
.sp-promo-cards[data-pc-variant="gradient-premium"] .sp-pc-card:not([data-has-bg]) .sp-pc-desc{color:#fff!important}

.sp-promo-cards[data-pc-variant="soft-pastel"] .sp-pc-card:nth-child(1):not([data-has-bg]){background-color:#ece4d4!important}
.sp-promo-cards[data-pc-variant="soft-pastel"] .sp-pc-card:nth-child(2):not([data-has-bg]){background-color:#e0ddd6!important}
.sp-promo-cards[data-pc-variant="soft-pastel"] .sp-pc-card:nth-child(3):not([data-has-bg]){background-color:#f4e5d4!important}

.sp-promo-cards[data-pc-variant="minimal-white"] .sp-pc-card:not([data-has-bg]){
  background-color:#fff!important;border:1px solid #e5e7eb;
}

.sp-promo-cards[data-pc-variant="dark-premium"] .sp-pc-card:not([data-has-bg]){
  background:linear-gradient(135deg,#0f172a,#1e293b,#0f172a)!important;
  border:1px solid rgba(255,255,255,.08);
}
.sp-promo-cards[data-pc-variant="dark-premium"] .sp-pc-card .sp-pc-title,
.sp-promo-cards[data-pc-variant="dark-premium"] .sp-pc-card .sp-pc-desc{color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.35)}

.sp-promo-cards[data-pc-variant="gradient-split"] .sp-pc-card:nth-child(1):not([data-has-bg]){
  background:linear-gradient(135deg,color-mix(in srgb,var(--p) 18%,transparent),color-mix(in srgb,var(--p) 8%,#fff))!important
}
.sp-promo-cards[data-pc-variant="gradient-split"] .sp-pc-card:nth-child(2):not([data-has-bg]){
  background:linear-gradient(135deg,color-mix(in srgb,var(--s,var(--p)) 18%,transparent),color-mix(in srgb,var(--s,var(--p)) 8%,#fff))!important
}

.sp-promo-cards[data-pc-variant="glass-aurora"] .sp-pc-card:not([data-has-bg]){
  background:color-mix(in srgb,#fff 65%,transparent)!important;
  backdrop-filter:blur(20px) saturate(160%);
  border:1px solid color-mix(in srgb,var(--p) 18%,rgba(255,255,255,.4));
}

.sp-promo-cards[data-pc-variant="vibrant-outlined"] .sp-pc-card:not([data-has-bg]){
  background-color:#fff!important;border:3px solid var(--p);
}
.sp-promo-cards[data-pc-variant="vibrant-outlined"] .sp-pc-card:nth-child(2):not([data-has-bg]){border-color:var(--s,var(--p))}
.sp-promo-cards[data-pc-variant="vibrant-outlined"] .sp-pc-card:nth-child(3):not([data-has-bg]){border-color:#f59e0b}

/* v5.4: Promo slider modu → görsel üstünde okunurluk overlay */
.sp-promo-cards[data-slider-mode="1"] .sp-pc-card[data-has-bg]{position:relative}
.sp-promo-cards[data-slider-mode="1"] .sp-pc-card[data-has-bg]::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(90deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.10) 60%,transparent 100%);
  pointer-events:none;z-index:0;
}
.sp-promo-cards[data-slider-mode="1"] .sp-pc-card[data-has-bg] .sp-pc-body{position:relative;z-index:1}
.sp-promo-cards[data-slider-mode="1"] .sp-pc-card[data-has-bg] .sp-pc-title,
.sp-promo-cards[data-slider-mode="1"] .sp-pc-card[data-has-bg] .sp-pc-desc,
.sp-promo-cards[data-slider-mode="1"] .sp-pc-card[data-has-bg] .sp-pc-badge{color:#fff!important;text-shadow:0 1px 3px rgba(0,0,0,.45)}

/* ═══════════════════════════════════════════════════════════════════
   BUTON STİL ŞABLONLARI (data-btn-style) — 10 ADET
   v5.5: Selector kutu/buton seviyesinde — her kutu/kart kendi şablonunu
   alabilir. Renkler hep --btn-bg / --btn-hover-bg değişkenlerinden gelir
   → "Buton Renk Şeması" ile birebir uyumlu kalır.
   ═══════════════════════════════════════════════════════════════════ */

/* 1. classic — varsayılan (mevcut hal) — ek kural yok */

/* 2. pill — Tam yuvarlak pill (rounded full) */
.sp-hb-btn[data-btn-style="pill"],
.sp-pc-btn[data-btn-style="pill"]{
  border-radius:999px!important;
  padding:14px 28px!important;
}
.sp-hb-plus-btn[data-btn-style="pill"]{
  background:var(--btn-bg,#629D23);
  padding:6px 22px 6px 6px;
  border-radius:999px;
  transition:background .3s;
}
.sp-hb-plus-btn[data-btn-style="pill"]:hover{background:var(--btn-hover-bg,#2c3c28)}
.sp-hb-plus-btn[data-btn-style="pill"] .sp-hb-plus-text{color:#fff!important;margin-left:8px}
.sp-hb-plus-btn[data-btn-style="pill"] .sp-hb-plus-icon{background:#fff!important}
.sp-hb-plus-btn[data-btn-style="pill"] .sp-hb-plus-icon i{color:var(--btn-bg,#629D23)!important}
.sp-hb-plus-btn[data-btn-style="pill"]:hover .sp-hb-plus-icon{background:#fff!important}
.sp-hb-plus-btn[data-btn-style="pill"]:hover .sp-hb-plus-icon i{color:var(--btn-hover-bg,#2c3c28)!important}

/* 3. square — Sıfır köşe, uppercase */
.sp-hb-btn[data-btn-style="square"],
.sp-pc-btn[data-btn-style="square"]{
  border-radius:0!important;
  padding:16px 30px!important;
  letter-spacing:1.2px;
  text-transform:uppercase;
  font-size:14px!important;
}
.sp-hb-plus-btn[data-btn-style="square"]{
  background:var(--btn-bg,#629D23);
  padding:8px 16px;
  border-radius:0;
  transition:background .3s;
}
.sp-hb-plus-btn[data-btn-style="square"]:hover{background:var(--btn-hover-bg,#2c3c28)}
.sp-hb-plus-btn[data-btn-style="square"] .sp-hb-plus-text{color:#fff!important;text-transform:uppercase;letter-spacing:1px;font-size:13px;margin-right:8px}
.sp-hb-plus-btn[data-btn-style="square"] .sp-hb-plus-icon{background:#fff!important;border-radius:0;width:24px;height:24px}
.sp-hb-plus-btn[data-btn-style="square"] .sp-hb-plus-icon i{color:var(--btn-bg,#629D23)!important}
.sp-hb-plus-btn[data-btn-style="square"]:hover .sp-hb-plus-icon i{color:var(--btn-hover-bg,#2c3c28)!important}

/* 4. pill-plus — Pill + sol başında "+" daire */
.sp-hb-btn[data-btn-style="pill-plus"],
.sp-pc-btn[data-btn-style="pill-plus"]{
  border-radius:999px!important;
  padding:6px 24px 6px 6px!important;
  background:var(--btn-bg,#629D23)!important;
  gap:10px!important;
}
.sp-hb-btn[data-btn-style="pill-plus"]:hover,
.sp-pc-btn[data-btn-style="pill-plus"]:hover{
  background:var(--btn-hover-bg,#2c3c28)!important;
}
.sp-hb-btn[data-btn-style="pill-plus"] .sp-hb-arrow-icon,
.sp-pc-btn[data-btn-style="pill-plus"] .sp-pc-arrow-icon{display:none!important}
.sp-hb-btn[data-btn-style="pill-plus"]::before,
.sp-pc-btn[data-btn-style="pill-plus"]::before{
  content:"+";
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;
  background:#fff;
  color:var(--btn-bg,#629D23);
  border-radius:999px;
  font-size:20px;font-weight:700;line-height:1;
  flex-shrink:0;
  transition:color .3s;
  order:-1;
}
.sp-hb-btn[data-btn-style="pill-plus"]:hover::before,
.sp-pc-btn[data-btn-style="pill-plus"]:hover::before{color:var(--btn-hover-bg,#2c3c28)}
.sp-hb-plus-btn[data-btn-style="pill-plus"]{
  background:var(--btn-bg,#629D23);
  padding:5px 22px 5px 5px;
  border-radius:999px;
  transition:background .3s;
  flex-direction:row;
}
.sp-hb-plus-btn[data-btn-style="pill-plus"]:hover{background:var(--btn-hover-bg,#2c3c28)}
.sp-hb-plus-btn[data-btn-style="pill-plus"] .sp-hb-plus-text{color:#fff!important;order:2;margin-left:6px}
.sp-hb-plus-btn[data-btn-style="pill-plus"] .sp-hb-plus-icon{background:#fff!important;order:1;width:34px;height:34px}
.sp-hb-plus-btn[data-btn-style="pill-plus"] .sp-hb-plus-icon i{color:var(--btn-bg,#629D23)!important;font-size:14px}
.sp-hb-plus-btn[data-btn-style="pill-plus"]:hover .sp-hb-plus-icon{background:#fff!important}
.sp-hb-plus-btn[data-btn-style="pill-plus"]:hover .sp-hb-plus-icon i{color:var(--btn-hover-bg,#2c3c28)!important}

/* 5. outline — Border + transparan, hover'da dolar */
.sp-hb-btn[data-btn-style="outline"],
.sp-pc-btn[data-btn-style="outline"]{
  background:transparent!important;
  color:var(--btn-bg,#629D23)!important;
  border:2px solid var(--btn-bg,#629D23)!important;
  padding:12px 23px!important;
}
.sp-hb-btn[data-btn-style="outline"]:hover,
.sp-pc-btn[data-btn-style="outline"]:hover{
  background:var(--btn-bg,#629D23)!important;
  color:#fff!important;
}
.sp-hb-plus-btn[data-btn-style="outline"] .sp-hb-plus-text{color:var(--btn-bg,#629D23)!important;transition:color .3s}
.sp-hb-plus-btn[data-btn-style="outline"] .sp-hb-plus-icon{background:transparent!important;border:2px solid var(--btn-bg,#629D23)}
.sp-hb-plus-btn[data-btn-style="outline"] .sp-hb-plus-icon i{color:var(--btn-bg,#629D23)!important;transition:color .3s}
.sp-hb-plus-btn[data-btn-style="outline"]:hover .sp-hb-plus-text{color:var(--btn-hover-bg,#2c3c28)!important}
.sp-hb-plus-btn[data-btn-style="outline"]:hover .sp-hb-plus-icon{background:var(--btn-hover-bg,#2c3c28)!important;border-color:var(--btn-hover-bg,#2c3c28)}
.sp-hb-plus-btn[data-btn-style="outline"]:hover .sp-hb-plus-icon i{color:#fff!important}

/* 6. underline — Sadece text + altı çizili */
.sp-hb-btn[data-btn-style="underline"],
.sp-pc-btn[data-btn-style="underline"]{
  background:transparent!important;
  color:var(--btn-bg,#629D23)!important;
  padding:8px 0!important;
  border-radius:0!important;
  border:0!important;
  border-bottom:2px solid var(--btn-bg,#629D23)!important;
  gap:8px;
}
.sp-hb-btn[data-btn-style="underline"]:hover,
.sp-pc-btn[data-btn-style="underline"]:hover{
  background:transparent!important;
  color:var(--btn-hover-bg,#2c3c28)!important;
  border-bottom-color:var(--btn-hover-bg,#2c3c28)!important;
}
.sp-hb-plus-btn[data-btn-style="underline"] .sp-hb-plus-text{
  color:var(--btn-bg,#629D23)!important;
  border-bottom:2px solid var(--btn-bg,#629D23);
  padding-bottom:2px;
  transition:color .3s,border-color .3s;
}
.sp-hb-plus-btn[data-btn-style="underline"] .sp-hb-plus-icon{display:none!important}
.sp-hb-plus-btn[data-btn-style="underline"]:hover .sp-hb-plus-text{
  color:var(--btn-hover-bg,#2c3c28)!important;
  border-bottom-color:var(--btn-hover-bg,#2c3c28);
}

/* 7. gradient — Linear gradient bg, hover'da yön değişir */
.sp-hb-btn[data-btn-style="gradient"],
.sp-pc-btn[data-btn-style="gradient"]{
  background:linear-gradient(135deg,var(--btn-bg,#629D23),var(--btn-hover-bg,#2c3c28))!important;
  border-radius:8px!important;
  background-size:200% 200%;
  background-position:0% 0%;
  transition:background-position .5s,box-shadow .3s!important;
}
.sp-hb-btn[data-btn-style="gradient"]:hover,
.sp-pc-btn[data-btn-style="gradient"]:hover{
  background-position:100% 100%;
}
.sp-hb-plus-btn[data-btn-style="gradient"]{
  background:linear-gradient(135deg,var(--btn-bg,#629D23),var(--btn-hover-bg,#2c3c28));
  padding:6px 18px 6px 6px;
  border-radius:8px;
  background-size:200% 200%;
  transition:background-position .5s;
}
.sp-hb-plus-btn[data-btn-style="gradient"]:hover{background-position:100% 100%}
.sp-hb-plus-btn[data-btn-style="gradient"] .sp-hb-plus-text{color:#fff!important;margin-left:6px}
.sp-hb-plus-btn[data-btn-style="gradient"] .sp-hb-plus-icon{background:rgba(255,255,255,.2)!important;backdrop-filter:blur(4px)}
.sp-hb-plus-btn[data-btn-style="gradient"] .sp-hb-plus-icon i{color:#fff!important}

/* 8. shadow-lift — Box shadow + hover lift */
.sp-hb-btn[data-btn-style="shadow-lift"],
.sp-pc-btn[data-btn-style="shadow-lift"]{
  border-radius:8px!important;
  box-shadow:0 6px 18px -4px color-mix(in srgb,var(--btn-bg,#629D23) 60%,transparent),0 2px 6px rgba(0,0,0,.08)!important;
  transform:translateY(0)!important;
  transition:transform .3s,box-shadow .3s,background .3s!important;
}
.sp-hb-btn[data-btn-style="shadow-lift"]:hover,
.sp-pc-btn[data-btn-style="shadow-lift"]:hover{
  transform:translateY(-3px)!important;
  box-shadow:0 14px 28px -4px color-mix(in srgb,var(--btn-bg,#629D23) 70%,transparent),0 6px 12px rgba(0,0,0,.12)!important;
}
.sp-hb-plus-btn[data-btn-style="shadow-lift"]{
  background:var(--btn-bg,#629D23);
  padding:8px 18px 8px 8px;
  border-radius:8px;
  box-shadow:0 6px 18px -4px color-mix(in srgb,var(--btn-bg,#629D23) 60%,transparent);
  transition:transform .3s,box-shadow .3s,background .3s;
}
.sp-hb-plus-btn[data-btn-style="shadow-lift"]:hover{
  transform:translateY(-3px);
  background:var(--btn-hover-bg,#2c3c28);
  box-shadow:0 14px 28px -4px color-mix(in srgb,var(--btn-bg,#629D23) 70%,transparent);
}
.sp-hb-plus-btn[data-btn-style="shadow-lift"] .sp-hb-plus-text{color:#fff!important;margin-left:8px}
.sp-hb-plus-btn[data-btn-style="shadow-lift"] .sp-hb-plus-icon{background:#fff!important}
.sp-hb-plus-btn[data-btn-style="shadow-lift"] .sp-hb-plus-icon i{color:var(--btn-bg,#629D23)!important}

/* 9. glow — Hover'da neon glow */
.sp-hb-btn[data-btn-style="glow"],
.sp-pc-btn[data-btn-style="glow"]{
  border-radius:8px!important;
  position:relative;
  transition:background .3s,box-shadow .4s!important;
}
.sp-hb-btn[data-btn-style="glow"]:hover,
.sp-pc-btn[data-btn-style="glow"]:hover{
  box-shadow:0 0 0 3px color-mix(in srgb,var(--btn-bg,#629D23) 25%,transparent),0 0 20px var(--btn-bg,#629D23),0 0 40px color-mix(in srgb,var(--btn-bg,#629D23) 50%,transparent)!important;
}
.sp-hb-plus-btn[data-btn-style="glow"]{
  background:var(--btn-bg,#629D23);
  padding:6px 18px 6px 6px;
  border-radius:8px;
  transition:background .3s,box-shadow .4s;
}
.sp-hb-plus-btn[data-btn-style="glow"]:hover{
  background:var(--btn-hover-bg,#2c3c28);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--btn-bg,#629D23) 25%,transparent),0 0 20px var(--btn-bg,#629D23);
}
.sp-hb-plus-btn[data-btn-style="glow"] .sp-hb-plus-text{color:#fff!important;margin-left:8px}
.sp-hb-plus-btn[data-btn-style="glow"] .sp-hb-plus-icon{background:#fff!important}
.sp-hb-plus-btn[data-btn-style="glow"] .sp-hb-plus-icon i{color:var(--btn-bg,#629D23)!important}

/* 10. icon-circle — Yatay text + sağda büyük dairesel ikon */
.sp-hb-btn[data-btn-style="icon-circle"],
.sp-pc-btn[data-btn-style="icon-circle"]{
  background:transparent!important;
  color:var(--btn-bg,#629D23)!important;
  padding:4px 4px 4px 18px!important;
  border-radius:999px!important;
  gap:14px!important;
}
.sp-hb-btn[data-btn-style="icon-circle"]:hover,
.sp-pc-btn[data-btn-style="icon-circle"]:hover{
  background:transparent!important;
  color:var(--btn-hover-bg,#2c3c28)!important;
}
.sp-hb-btn[data-btn-style="icon-circle"] .sp-hb-arrow-icon:nth-of-type(2),
.sp-pc-btn[data-btn-style="icon-circle"] .sp-pc-arrow-icon:nth-of-type(2){display:none!important}
.sp-hb-btn[data-btn-style="icon-circle"] .sp-hb-arrow-icon,
.sp-pc-btn[data-btn-style="icon-circle"] .sp-pc-arrow-icon{
  width:42px;height:42px;
  background:var(--btn-bg,#629D23);
  border-radius:50%;
  display:inline-flex!important;
  align-items:center;justify-content:center;
  color:#fff;
  transition:background .3s,transform .3s;
  opacity:1!important;
  transform:none!important;
}
.sp-hb-btn[data-btn-style="icon-circle"]:hover .sp-hb-arrow-icon,
.sp-pc-btn[data-btn-style="icon-circle"]:hover .sp-pc-arrow-icon{
  background:var(--btn-hover-bg,#2c3c28);
  transform:translateX(3px)!important;
}
.sp-hb-plus-btn[data-btn-style="icon-circle"] .sp-hb-plus-text{color:var(--btn-bg,#629D23)!important;font-weight:700;transition:color .3s}
.sp-hb-plus-btn[data-btn-style="icon-circle"] .sp-hb-plus-icon{width:42px;height:42px;background:var(--btn-bg,#629D23)!important;transition:background .3s,transform .3s}
.sp-hb-plus-btn[data-btn-style="icon-circle"] .sp-hb-plus-icon i{font-size:14px}
.sp-hb-plus-btn[data-btn-style="icon-circle"]:hover .sp-hb-plus-text{color:var(--btn-hover-bg,#2c3c28)!important}
.sp-hb-plus-btn[data-btn-style="icon-circle"]:hover .sp-hb-plus-icon{background:var(--btn-hover-bg,#2c3c28)!important;transform:translateX(3px)}

/* ═══════════════════════════════════════════════════════════════════
   BUTON ANİMASYONLARI (data-btn-anim) — 10 ADET
   Her buton kendi animasyonunu data-btn-anim attribute ile alır.
   "none" varsayılan — animasyon yok.
   ═══════════════════════════════════════════════════════════════════ */

/* none — ek kural yok */

/* pulse — Sürekli scale nabız */
@keyframes sp-btn-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.sp-hb-btn[data-btn-anim="pulse"],
.sp-pc-btn[data-btn-anim="pulse"],
.sp-hb-plus-btn[data-btn-anim="pulse"]{animation:sp-btn-pulse 2s ease-in-out infinite}

/* bounce — Sürekli yukarı zıplama */
@keyframes sp-btn-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.sp-hb-btn[data-btn-anim="bounce"],
.sp-pc-btn[data-btn-anim="bounce"],
.sp-hb-plus-btn[data-btn-anim="bounce"]{animation:sp-btn-bounce 1.6s ease-in-out infinite}

/* shake — Hover'da titreyiş */
@keyframes sp-btn-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.sp-hb-btn[data-btn-anim="shake"]:hover,
.sp-pc-btn[data-btn-anim="shake"]:hover,
.sp-hb-plus-btn[data-btn-anim="shake"]:hover{animation:sp-btn-shake .35s ease-in-out infinite}

/* shine — Sürekli parıltı sweep */
@keyframes sp-btn-shine{0%{background-position:-200% 0}100%{background-position:200% 0}}
.sp-hb-btn[data-btn-anim="shine"],
.sp-pc-btn[data-btn-anim="shine"]{
  position:relative;
  overflow:hidden;
}
.sp-hb-btn[data-btn-anim="shine"]::after,
.sp-pc-btn[data-btn-anim="shine"]::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);
  background-size:200% 100%;
  background-position:-200% 0;
  animation:sp-btn-shine 2.8s linear infinite;
  pointer-events:none;
}

/* wiggle — Hover'da hafif rotate */
@keyframes sp-btn-wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-2.5deg)}75%{transform:rotate(2.5deg)}}
.sp-hb-btn[data-btn-anim="wiggle"]:hover,
.sp-pc-btn[data-btn-anim="wiggle"]:hover,
.sp-hb-plus-btn[data-btn-anim="wiggle"]:hover{animation:sp-btn-wiggle .4s ease-in-out infinite}

/* glow-pulse — Glow nabız (renk şeması rengiyle) */
@keyframes sp-btn-glow-pulse{0%,100%{box-shadow:0 0 0 0 var(--btn-bg,#629D23)}50%{box-shadow:0 0 18px 5px color-mix(in srgb,var(--btn-bg,#629D23) 60%,transparent)}}
.sp-hb-btn[data-btn-anim="glow-pulse"],
.sp-pc-btn[data-btn-anim="glow-pulse"],
.sp-hb-plus-btn[data-btn-anim="glow-pulse"]{animation:sp-btn-glow-pulse 2s ease-in-out infinite}

/* scale-hover — Hover'da büyür */
.sp-hb-btn[data-btn-anim="scale-hover"],
.sp-pc-btn[data-btn-anim="scale-hover"],
.sp-hb-plus-btn[data-btn-anim="scale-hover"]{transition:transform .25s ease,background .3s,box-shadow .3s!important}
.sp-hb-btn[data-btn-anim="scale-hover"]:hover,
.sp-pc-btn[data-btn-anim="scale-hover"]:hover,
.sp-hb-plus-btn[data-btn-anim="scale-hover"]:hover{transform:scale(1.08)!important}

/* breathe — Yavaş opacity nefes */
@keyframes sp-btn-breathe{0%,100%{opacity:1}50%{opacity:.78}}
.sp-hb-btn[data-btn-anim="breathe"],
.sp-pc-btn[data-btn-anim="breathe"],
.sp-hb-plus-btn[data-btn-anim="breathe"]{animation:sp-btn-breathe 3s ease-in-out infinite}

/* float — Yukarı aşağı süzülme */
@keyframes sp-btn-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.sp-hb-btn[data-btn-anim="float"],
.sp-pc-btn[data-btn-anim="float"],
.sp-hb-plus-btn[data-btn-anim="float"]{animation:sp-btn-float 2.4s ease-in-out infinite}

/* tilt-hover — Hover'da hafif eğilme + büyüme */
.sp-hb-btn[data-btn-anim="tilt-hover"],
.sp-pc-btn[data-btn-anim="tilt-hover"],
.sp-hb-plus-btn[data-btn-anim="tilt-hover"]{transition:transform .3s ease,background .3s,box-shadow .3s!important}
.sp-hb-btn[data-btn-anim="tilt-hover"]:hover,
.sp-pc-btn[data-btn-anim="tilt-hover"]:hover,
.sp-hb-plus-btn[data-btn-anim="tilt-hover"]:hover{transform:rotate(-1.5deg) scale(1.05)!important}