/* Bi'Tişört — Ana sayfa “Kategoriler” + “Nasıl Çalışır?” geri yükleme v1
   v7 vitrin diliyle hizalı: tam genişlik bant, iç genişlik v7 .wrap ile aynı (1388px / 26px kenar, mobil 10px), 14px ritim.
   Renk / yazı / kart değerleri admin alanlarından gelen CSS değişkenlerini kullanır (canlı önizleme aynı değişkenleri günceller).
   Geri alma: includes/home-restore-sections-v1.php dosyasını silin; bu CSS de artık yüklenmez. */

/* ---------- ortak bant ---------- */
html body #kategoriler[data-bt-restore]:not([hidden]),
html body #nasil[data-bt-restore]:not([hidden]){
  display:block!important;visibility:visible!important;opacity:1!important;content-visibility:visible!important;
  box-sizing:border-box!important;position:relative!important;width:100%!important;max-width:none!important;
  margin:0!important;padding:56px max(26px,calc((100% - 1388px) / 2))!important;
  border:0!important;border-top:1px solid #efe9e2!important;border-radius:0!important;box-shadow:none!important;
  overflow:hidden!important;clip-path:none!important;transform:none!important;
  font-family:Manrope,Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif!important;
}
html body #kategoriler[data-bt-restore]{background:#fff!important}
html body #nasil[data-bt-restore]{background:#fbf8f5!important}
html body #kategoriler[data-bt-restore]::before,html body #kategoriler[data-bt-restore]::after,
html body #nasil[data-bt-restore]::before,html body #nasil[data-bt-restore]::after{display:none!important;content:none!important}
html body #kategoriler[data-bt-restore] *,html body #nasil[data-bt-restore] *{box-sizing:border-box}
html body #kategoriler[data-bt-restore] + .bt-category-to-products-spacer{display:none!important;height:0!important;margin:0!important}

/* ---------- Kategoriler: başlık ---------- */
html body #kategoriler[data-bt-restore] .bt-category-reference-head-v6698{
  display:flex!important;align-items:flex-end!important;justify-content:space-between!important;gap:14px 28px!important;
  margin:0 0 28px!important;padding:0!important;
}
html body #kategoriler[data-bt-restore] .bt-category-reference-copy-v6698{min-width:0!important;max-width:760px!important}
html body #kategoriler[data-bt-restore] #btCategoryTitle{
  margin:0!important;padding:0!important;color:#172033!important;
  font-family:inherit!important;font-size:clamp(28px,2.7vw,40px)!important;font-weight:600!important;font-style:normal!important;
  line-height:1.08!important;letter-spacing:-.03em!important;text-transform:none!important;text-align:left!important;
}
html body #kategoriler[data-bt-restore] .bt-category-hero-title{color:inherit!important;font:inherit!important;letter-spacing:inherit!important}
html body #kategoriler[data-bt-restore] .bt-category-hero-accent{color:var(--bt-cat-accent,#FF6718)!important;font:inherit!important;font-style:normal!important;letter-spacing:inherit!important}
html body #kategoriler[data-bt-restore] .bt-category-hero-subtitle{
  margin:14px 0 0!important;max-width:56ch!important;color:#6f6a64!important;
  font-family:Inter,ui-sans-serif,system-ui,sans-serif!important;font-size:15px!important;font-weight:400!important;line-height:1.6!important;
}
html body #kategoriler[data-bt-restore] .bt-category-reference-all-v6698{
  display:inline-flex!important;align-items:center!important;gap:8px!important;flex:0 0 auto!important;margin:0 0 4px!important;padding:0 0 4px!important;
  color:#111!important;border-bottom:1px solid #111!important;font-family:Inter,ui-sans-serif,system-ui,sans-serif!important;
  font-size:14px!important;font-weight:600!important;line-height:1.2!important;text-decoration:none!important;white-space:nowrap!important;
  transition:gap .25s,color .25s,border-color .25s!important;
}
html body #kategoriler[data-bt-restore] .bt-category-reference-all-v6698 span{font-size:15px!important;transform:none!important}
html body #kategoriler[data-bt-restore] .bt-category-reference-all-v6698:hover{gap:12px!important;color:var(--bt-cat-accent,#FF6718)!important;border-color:var(--bt-cat-accent,#FF6718)!important;text-decoration:none!important}

/* ---------- Kategoriler: kartlar ---------- */
html body #kategoriler[data-bt-restore] .bt-category-viewport{
  width:100%!important;max-width:none!important;margin:0!important;padding:0!important;overflow:visible!important;
}
html body #kategoriler[data-bt-restore] .bt-category-track{
  display:grid!important;grid-template-columns:repeat(var(--bt-cat-visible,10),minmax(0,1fr))!important;
  gap:var(--bt-cat-gap,14px)!important;width:100%!important;min-width:0!important;margin:0!important;padding:0!important;transform:none!important;
}
html body #kategoriler[data-bt-restore] .bt-category-card{
  position:relative!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;
  width:auto!important;min-width:0!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important;
  background:var(--bt-cat-card-bg,#fff)!important;border:1px solid var(--bt-cat-card-border,#e8e5e0)!important;border-radius:8px!important;
  box-shadow:none!important;overflow:hidden!important;color:var(--bt-cat-card-text,#171717)!important;text-decoration:none!important;text-align:left!important;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease!important;
}
html body #kategoriler[data-bt-restore] .bt-category-card[hidden]{display:none!important}
html body #kategoriler[data-bt-restore] .bt-category-card:hover,
html body #kategoriler[data-bt-restore] .bt-category-card:focus-visible{transform:translateY(-2px)!important;border-color:var(--bt-cat-accent,#FF6718)!important;box-shadow:0 14px 28px rgba(17,17,17,.07)!important}
html body #kategoriler[data-bt-restore] .bt-category-media{
  position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;
  width:100%!important;max-width:none!important;height:auto!important;aspect-ratio:1/1!important;margin:0!important;padding:14%!important;
  background:#f4f1ec!important;border:0!important;border-radius:0!important;overflow:hidden!important;
}
html body #kategoriler[data-bt-restore] .bt-category-media img{
  display:block!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;
  object-fit:contain!important;mix-blend-mode:multiply!important;transition:transform .35s ease!important;
}
html body #kategoriler[data-bt-restore] .bt-category-card:hover .bt-category-media img{transform:scale(1.04)!important}
html body #kategoriler[data-bt-restore] .bt-category-media b{
  display:grid!important;place-items:center!important;width:44px!important;height:44px!important;border-radius:50%!important;
  background:#fff!important;color:var(--bt-cat-accent,#FF6718)!important;font-size:20px!important;line-height:1!important;
}
html body #kategoriler[data-bt-restore] .bt-category-copy{
  display:flex!important;flex-direction:column!important;gap:4px!important;margin:0!important;padding:14px!important;min-width:0!important;text-align:left!important;
}
html body #kategoriler[data-bt-restore] .bt-category-copy strong{
  display:block!important;margin:0!important;color:var(--bt-cat-card-text,#171717)!important;font-family:inherit!important;
  font-size:14px!important;font-weight:600!important;line-height:1.25!important;letter-spacing:-.01em!important;
  white-space:normal!important;overflow-wrap:anywhere!important;
}
html body #kategoriler[data-bt-restore] .bt-category-copy small{
  display:block!important;margin:0!important;color:var(--bt-cat-card-meta,#6f6a64)!important;font-family:Inter,ui-sans-serif,system-ui,sans-serif!important;
  font-size:12px!important;font-weight:400!important;line-height:1.35!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
}
html body #kategoriler[data-bt-restore] .bt-category-copy small:empty{display:none!important}

/* tablet + mobil: yatay kaydırma (görünür kart sayısı admin ayarından) */
@media (max-width:1240px){
  html body #kategoriler[data-bt-restore] .bt-category-viewport{
    overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x mandatory!important;-webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;margin:0 -26px!important;padding:0 26px 4px!important;width:auto!important;scroll-padding:0 26px!important;
  }
  html body #kategoriler[data-bt-restore] .bt-category-viewport::-webkit-scrollbar{display:none!important}
  html body #kategoriler[data-bt-restore] .bt-category-track{
    display:flex!important;grid-template-columns:none!important;width:max-content!important;min-width:100%!important;
  }
  html body #kategoriler[data-bt-restore] .bt-category-card{
    flex:0 0 auto!important;scroll-snap-align:start!important;
    width:calc((100vw - 52px - (var(--bt-cat-visible-tablet,4) - 1) * var(--bt-cat-gap,14px)) / (var(--bt-cat-visible-tablet,4) + .35))!important;
  }
}
@media (max-width:760px){
  html body #kategoriler[data-bt-restore]:not([hidden]),
  html body #nasil[data-bt-restore]:not([hidden]){padding:42px 10px!important}
  html body #kategoriler[data-bt-restore] .bt-category-reference-head-v6698{flex-direction:column!important;align-items:flex-start!important;margin-bottom:22px!important}
  html body #kategoriler[data-bt-restore] #btCategoryTitle{font-size:28px!important}
  html body #kategoriler[data-bt-restore] .bt-category-hero-subtitle{font-size:14px!important;margin-top:10px!important}
  html body #kategoriler[data-bt-restore] .bt-category-viewport{margin:0 -10px!important;padding:0 10px 4px!important;scroll-padding:0 10px!important}
  html body #kategoriler[data-bt-restore] .bt-category-card{
    width:calc((100vw - 20px - (var(--bt-cat-visible-mobile,2) - 1) * var(--bt-cat-gap,14px)) / (var(--bt-cat-visible-mobile,2) + .35))!important;
  }
  html body #kategoriler[data-bt-restore] .bt-category-copy{padding:12px!important}
}

/* ---------- Nasıl Çalışır?: başlık ---------- */
html body #nasil[data-bt-restore] .bt-how-reference-head-v6699{
  display:block!important;margin:0 0 28px!important;padding:0!important;text-align:var(--bt-how-section-title-align,center)!important;
}
html body #nasil[data-bt-restore] #hpHowReferenceTitle{
  margin:0!important;padding:0!important;color:var(--bt-how-section-title-color,#172033)!important;
  font-family:var(--bt-how-section-title-font,inherit)!important;font-size:min(var(--bt-how-section-title-size,36px),8.2vw)!important;
  font-weight:var(--bt-how-section-title-weight,600)!important;font-style:var(--bt-how-section-title-style,normal)!important;
  line-height:1.1!important;letter-spacing:-.03em!important;text-transform:none!important;text-align:inherit!important;
}
html body #nasil[data-bt-restore] #hpHowReferenceTitle > *{font:inherit!important;letter-spacing:inherit!important;color:inherit!important}
html body #nasil[data-bt-restore] #hpHowReferenceTitle > strong,
html body #nasil[data-bt-restore] #hpHowReferenceTitle > em{color:#FF6718!important;font-style:normal!important}
html body #nasil[data-bt-restore] [data-how-heading-description]{
  display:block!important;margin:14px 0 0!important;max-width:none!important;color:#6f6a64!important;
  font-family:Inter,ui-sans-serif,system-ui,sans-serif!important;font-size:15px!important;font-weight:400!important;line-height:1.6!important;text-align:inherit!important;
}
html body #nasil[data-bt-restore] [data-how-heading-description]:empty{display:none!important}

/* ---------- Nasıl Çalışır?: panel + adım kartları ---------- */
html body #nasil[data-bt-restore] .bt-how-reference-grid-v6699{
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important;align-items:stretch!important;justify-items:stretch!important;
  width:100%!important;max-width:none!important;margin:0!important;
  padding:var(--bt-how-panel-pad,14px)!important;background:var(--bt-how-panel-bg,#fff)!important;
  border:var(--bt-how-panel-border-w,1px) solid var(--bt-how-panel-border,#efe9e2)!important;border-radius:var(--bt-how-panel-radius,12px)!important;
  box-shadow:var(--bt-how-panel-shadow,none)!important;overflow:visible!important;
}
html body #nasil[data-bt-restore] .bt-how-reference-grid-v6699::before,html body #nasil[data-bt-restore] .bt-how-reference-grid-v6699::after{display:none!important;content:none!important}
html body #nasil[data-bt-restore] .hp-how-step{
  position:relative!important;grid-column:auto!important;grid-row:auto!important;order:0!important;max-width:none!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;align-self:stretch!important;gap:14px!important;
  width:auto!important;min-width:0!important;height:auto!important;min-height:0!important;margin:0!important;
  padding:var(--bt-how-card-pad-y,14px) var(--bt-how-card-pad-x,14px)!important;
  background:var(--bt-how-card-bg,#fff)!important;border:var(--bt-how-card-border-w,0px) solid var(--bt-how-card-border,#eee8e2)!important;
  border-radius:var(--bt-how-card-radius,12px)!important;box-shadow:var(--bt-how-card-shadow,none)!important;overflow:visible!important;transform:none!important;
}
html body #nasil[data-bt-restore] .hp-how-step::before,html body #nasil[data-bt-restore] .hp-how-step::after{display:none!important;content:none!important}
/* adımlar arası ok (admin › Ok görünümü: göster / renk / boyut / kalınlık) — 14px boşluğun ortasında, kartların üstüne taşmaz */
html body #nasil[data-bt-restore]:not(.is-arrows-hidden) .hp-how-step:not(:last-child)::after{
  content:"\203A"!important;display:block!important;position:absolute!important;z-index:3!important;top:50%!important;right:-7px!important;
  transform:translate(50%,-50%)!important;width:auto!important;height:auto!important;margin:0!important;padding:0!important;background:none!important;border:0!important;
  color:var(--bt-how-arrow-color,#aaa49f)!important;font-family:Inter,ui-sans-serif,system-ui,sans-serif!important;
  font-size:min(var(--bt-how-arrow-size,36px),40px)!important;font-weight:var(--bt-how-arrow-weight,300)!important;line-height:1!important;pointer-events:none!important;
}
html body #nasil[data-bt-restore] .hp-how-number{
  position:absolute!important;z-index:2!important;top:calc(var(--bt-how-card-pad-y,14px) + 14px)!important;left:calc(var(--bt-how-card-pad-x,14px) + 14px)!important;
  display:grid!important;place-items:center!important;width:34px!important;height:34px!important;margin:0!important;padding:0!important;
  background:var(--bt-how-number-bg,#FF6718)!important;color:var(--bt-how-number-color,#fff)!important;border:0!important;
  border-radius:var(--bt-how-number-radius,50%)!important;box-shadow:0 6px 14px rgba(255,103,24,.22)!important;
  font-family:var(--bt-how-number-font,inherit)!important;font-size:var(--bt-how-number-size,14px)!important;
  font-weight:var(--bt-how-number-weight,800)!important;font-style:var(--bt-how-number-style,normal)!important;line-height:1!important;
}
html body #nasil[data-bt-restore] .hp-how-number[hidden],html body #nasil[data-bt-restore] .hp-how-step.is-number-hidden .hp-how-number{display:none!important}
html body #nasil[data-bt-restore] .hp-how-media{
  position:relative!important;inset:auto!important;transform:none!important;grid-column:auto!important;grid-row:auto!important;justify-self:stretch!important;align-self:stretch!important;order:0!important;
  display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;min-width:0!important;max-width:none!important;
  height:auto!important;min-height:0!important;aspect-ratio:auto!important;margin:0!important;padding:14px!important;
  background:#f4f1ec!important;border:0!important;border-radius:8px!important;overflow:hidden!important;
}
html body #nasil[data-bt-restore] .hp-how-media img{
  display:block!important;width:100%!important;height:var(--bt-how-image-height,96px)!important;max-width:var(--bt-how-image-max-width,170px)!important;max-height:none!important;
  object-fit:var(--bt-how-image-fit,contain)!important;border-radius:var(--bt-how-image-radius,0px)!important;mix-blend-mode:multiply!important;margin:0 auto!important;
}
html body #nasil[data-bt-restore] .hp-how-step.is-image-empty .hp-how-media{display:none!important}
html body #nasil[data-bt-restore] .hp-how-step.is-image-empty .hp-how-number{position:static!important;margin:0!important}
html body #nasil[data-bt-restore] .bt-how-reference-copy-v6699{order:1!important;grid-column:auto!important;grid-row:auto!important;align-self:auto!important;padding-left:0!important;padding-right:0!important;position:relative!important;transform:none!important;width:auto!important;max-width:none!important;display:flex!important;flex-direction:column!important;gap:6px!important;margin:0!important;padding:0!important;min-width:0!important}
html body #nasil[data-bt-restore] .bt-how-reference-copy-v6699 h3{
  margin:0!important;color:var(--bt-how-title-color,#171717)!important;font-family:var(--bt-how-title-font,inherit)!important;
  font-size:max(var(--bt-how-title-size,17px),16px)!important;font-weight:var(--bt-how-title-weight,700)!important;font-style:var(--bt-how-title-style,normal)!important;
  line-height:1.25!important;letter-spacing:-.015em!important;text-align:var(--bt-how-title-align,left)!important;max-width:none!important;width:auto!important;
}
html body #nasil[data-bt-restore] .bt-how-reference-copy-v6699 p{
  margin:0!important;color:var(--bt-how-text-color,#6f6a64)!important;font-family:var(--bt-how-text-font,inherit)!important;
  font-size:max(var(--bt-how-text-size,13px),13px)!important;font-weight:var(--bt-how-text-weight,400)!important;font-style:var(--bt-how-text-style,normal)!important;
  line-height:1.55!important;text-align:var(--bt-how-text-align,left)!important;max-width:none!important;width:auto!important;
}
html body #nasil[data-bt-restore] .hp-how-arrow{display:none!important}
@media (max-width:900px){html body #nasil[data-bt-restore]:not(.is-arrows-hidden) .hp-how-step:not(:last-child)::after{display:none!important;content:none!important}}
@media (max-width:900px){
  html body #nasil[data-bt-restore] .bt-how-reference-grid-v6699{grid-template-columns:1fr!important;gap:10px!important}
  html body #nasil[data-bt-restore] .hp-how-step{display:grid!important;grid-template-columns:112px minmax(0,1fr)!important;align-items:center!important;gap:14px!important}
  html body #nasil[data-bt-restore] .hp-how-step.is-image-empty{grid-template-columns:34px minmax(0,1fr)!important}
  html body #nasil[data-bt-restore] .hp-how-media{padding:10px!important;height:100%!important;min-height:96px!important}
  html body #nasil[data-bt-restore] .hp-how-media img{height:min(var(--bt-how-image-height,96px),76px)!important}
  html body #nasil[data-bt-restore] .hp-how-number{width:28px!important;height:28px!important;font-size:13px!important;
    top:calc(var(--bt-how-card-pad-y,14px) - 6px)!important;left:calc(var(--bt-how-card-pad-x,14px) - 6px)!important}
  html body #nasil[data-bt-restore] .bt-how-reference-copy-v6699 h3,
  html body #nasil[data-bt-restore] .bt-how-reference-copy-v6699 p{text-align:left!important}
}
@media (max-width:760px){
  html body #nasil[data-bt-restore] .bt-how-reference-head-v6699{margin-bottom:22px!important}
  html body #nasil[data-bt-restore] [data-how-heading-description]{font-size:14px!important;margin-top:10px!important}
  html body #nasil[data-bt-restore] .bt-how-reference-grid-v6699{padding:min(var(--bt-how-panel-pad,14px),10px)!important}
  html body #nasil[data-bt-restore] .hp-how-step{grid-template-columns:96px minmax(0,1fr)!important;padding:10px!important}
  html body #nasil[data-bt-restore] .hp-how-number{top:4px!important;left:4px!important}
}
@media (prefers-reduced-motion:reduce){
  html body #kategoriler[data-bt-restore] .bt-category-card,html body #kategoriler[data-bt-restore] .bt-category-media img{transition:none!important}
}