/* — Bölüm ritmi: alt-padding optik olarak üstten hafif fazla (nefes) — */
  .bb-section {
      padding-bottom: calc(var(--bb-pad-y) + var(--bb-5))
  }

  .bb-section>.bb-container {
      position: relative;
      z-index: 1
  }

  /* Section-head: sade — başlığı tipo/boşluk taşır, dekoratif çizgi yok.
Açıklama satırı kısıtlı genişlikte, sakin tonda. */
  .bb-section-head.center p {
      max-width: 54ch;
      margin-inline: auto;
      color: var(--bb-on-light-dim)
  }

  .hero {
      position: relative;
      background: var(--bb-grad-hero);
      color: var(--bb-on-dark);
      overflow: hidden
  }

  /* Tek, sakin teal ışıltı — derinlik için (ikinci blob kaldırıldı, gürültüyü azalt) */
  .hero::before {
      content: "";
      position: absolute;
      width: 560px;
      height: 560px;
      border-radius: 50%;
      pointer-events: none;
      background: radial-gradient(circle, rgba(63, 180, 180, .16), transparent 70%);
      top: -200px;
      right: -140px;
      filter: blur(30px)
  }

  .hero__grid {
      position: relative;
      display: grid;
      grid-template-columns: 1.08fr .92fr;
      gap: var(--bb-7);
      align-items: center;
      padding-block: clamp(56px, 9vh, 120px)
  }

  .hero h1 {
      font-family: var(--bb-font-display);
      font-size: clamp(32px, 4vw, 54px);
      line-height: 1.08;
      letter-spacing: -.02em;
      margin: var(--bb-4) 0;
      max-width: 16ch;
      text-wrap: balance
  }

  /* Tek aksan rengi (teal) — çok-renkli vurgu yerine sade bir öne çıkarma */
  .hero h1 .teal {
      color: var(--bb-teal-400)
  }

  .hero h1 .gold {
      color: var(--bb-gold-400)
  }

  .hero__sub {
      font-size: var(--bb-text-l);
      color: var(--bb-on-dark-dim);
      max-width: 46ch;
      margin-bottom: var(--bb-6);
      line-height: 1.6
  }

  .hero__cta {
      display: flex;
      flex-wrap: wrap;
      gap: var(--bb-3)
  }

  .hero__art {
      position: relative;
      display: grid;
      place-items: center;
      min-height: 360px
  }

  .hero__art .glow {
      position: absolute;
      width: 74%;
      aspect-ratio: 1;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(63, 180, 180, .26), transparent 66%)
  }

  .hero__art img.main {
      width: min(80%, 380px);
      filter: drop-shadow(0 36px 50px rgba(0, 0, 0, .55));
      animation: bb-float 6s var(--bb-ease-standard) infinite;
      position: relative
  }

  /* Tek, sabit kanıt rozeti (yüzen ikili chip kalabalığı yerine) */
  .hero__chip {
      position: absolute;
      bottom: 8%;
      left: 0;
      max-width: calc(100% - var(--bb-3));
      background: rgba(251, 247, 238, .96);
      color: var(--bb-cacao-800);
      border-radius: var(--bb-r-pill);
      padding: 10px 16px;
      font-weight: 800;
      font-size: var(--bb-text-xs);
      box-shadow: var(--bb-e3);
      display: flex;
      align-items: center;
      gap: 8px;
      border: 1px solid var(--bb-border-gold);
      overflow-wrap: anywhere;
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px)
  }

  .hero__chip .n {
      flex: none;
      font-family: var(--bb-font-display);
      font-size: 20px;
      color: var(--bb-teal-600)
  }

  .hero__stats {
      position: relative;
      padding-block: var(--bb-6) var(--bb-5);
      border-top: 1px solid rgba(255, 255, 255, .10)
  }

  /* Koleksiyon kategori grid */
  .kat-grid {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: var(--bb-4)
  }

  /* Dar kolonlarda başlık taşmasın: link kartları da kilitli kartlarla aynı ölçekte */
  .kat-grid .kat-kart h3 {
      font-size: var(--bb-text-xl);
      line-height: 1.15;
      overflow-wrap: anywhere
  }

  /* Sakin geçiş + dokunsal geri-basış; ağır altın halka/parıltı kaldırıldı */
  .kat-grid .kat-kart {
      border-radius: var(--bb-r-xl);
      transition: transform var(--bb-dur-base) var(--bb-ease-standard), box-shadow var(--bb-dur-base) var(--bb-ease-standard)
  }

  .kat-grid a.kat-kart: active {
      transform: translateY(-4px) scale(.98)
  }

  /* Öne çıkan / en çok satan */
  .prod-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: var(--bb-5)
  }

  /* Optik hizalama: yan yana kartlarda fiyat/CTA aynı Y'de — gövdeyi esnet, butonu alta sabitle */
  .prod-grid .urun-kart {
      height: 100%
  }

  .prod-grid .urun-kart__body {
      flex: 1
  }

  .prod-grid .urun-kart__body .bb-btn {
      margin-top: auto
  }

  .tabs-row {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: var(--bb-3);
      margin-bottom: var(--bb-6)
  }

  /* Videolar */
  .vid-rail {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: minmax(240px, 1fr);
      gap: var(--bb-4);
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      padding-bottom: var(--bb-3);
      scrollbar-width: thin
  }

  .vid-card {
      position: relative;
      border-radius: var(--bb-r-lg);
      overflow: hidden;
      aspect-ratio: 9/16;
      background: var(--bb-cacao-900);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), var(--bb-e2);
      scroll-snap-align: start;
      transition: transform var(--bb-dur-base) var(--bb-ease-standard), box-shadow var(--bb-dur-base) var(--bb-ease-standard)
  }

  .vid-card:hover {
      transform: translateY(-6px);
      box-shadow: inset 0 0 0 1px var(--bb-border-gold), var(--bb-e4)
  }

  .vid-card:active {
      transform: translateY(-3px) scale(.98)
  }

  .vid-card video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block
  }

  .vid-card__ov {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(22, 8, 3, .82), transparent 52%);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: var(--bb-4);
      pointer-events: none
  }

  .vid-card__ov p {
      color: #fff;
      font-weight: 800;
      font-size: var(--bb-text-s);
      line-height: 1.3
  }

  .vid-card__ov .views {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 6px;
      font-size: var(--bb-text-xs);
      color: var(--bb-gold-300);
      font-weight: 800
  }

  .vid-card__tt {
      position: absolute;
      top: 10px;
      left: 10px;
      background: rgba(0, 0, 0, .55);
      color: #fff;
      border-radius: var(--bb-r-pill);
      padding: 4px 10px;
      font-size: 11px;
      font-weight: 800;
      display: flex;
      align-items: center;
      gap: 5px
  }

  .feat-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--bb-5)
  }

  /* Özellik kartı: ikon altına ince ışıltı + tıkanım geri-basışı (hover devralınır) */
  .feat-grid .feat-kart .ic {
      transition: transform var(--bb-dur-base) var(--bb-ease-emphasized), box-shadow var(--bb-dur-base) var(--bb-ease-standard)
  }

  .feat-grid .feat-kart:hover .ic {
      transform: translateY(-2px) scale(1.05);
      box-shadow: var(--bb-glow-gold)
  }

  .rev-badges {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: var(--bb-2);
      margin-bottom: var(--bb-6)
  }

  .reviews-masonry {
      columns: 3;
      column-gap: var(--bb-5)
  }

  .cta-band {
      background: var(--bb-grad-hero);
      color: var(--bb-on-dark);
      border-radius: var(--bb-r-2xl);
      padding: clamp(44px, 6vw, 84px);
      text-align: center;
      position: relative;
      overflow: hidden;
      box-shadow: inset 0 0 0 1px var(--bb-border-gold), var(--bb-e3)
  }

  /* tek, sakin altın taban-ışıltısı — sheen animasyonu kaldırıldı (gösterişi azalt) */
  .cta-band::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: -46%;
      width: 72%;
      height: 84%;
      transform: translateX(-50%);
      pointer-events: none;
      background: radial-gradient(circle, rgba(201, 162, 75, .16), transparent 70%)
  }

  .cta-band>* {
      position: relative;
      z-index: 1
  }

  .cta-band h2 {
      margin: 0 0 var(--bb-3)
  }

  @media (max-width: 980px) {
      .hero__grid {
          grid-template-columns: 1fr;
          gap: var(--bb-5)
      }

      .hero__art {
          order: -1;
          min-height: 280px
      }

      .kat-grid {
          grid-template-columns: repeat(3, minmax(0, 1fr))
      }

      .prod-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr))
      }

      .feat-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr))
      }

      .reviews-masonry {
          columns: 2
      }
  }

  @media (max-width: 768px) {

      /* dekoratif hero ışıltısı küçült → blur taşması/perf */
      .hero::before {
          width: 320px;
          height: 320px;
          top: -130px;
          right: -100px
      }

      .hero__grid {
          padding-block: clamp(36px, 7vh, 72px)
      }

      /* başlık sadeleştir — kullanıcı aşırı büyük tipo sevmiyor */
      .hero h1 {
          font-size: clamp(28px, 7vw, 40px);
          max-width: none
      }

      .hero__sub {
          font-size: var(--bb-text-m)
      }

      .hero__art {
          min-height: 240px
      }

      .hero__art img.main {
          width: min(70%, 280px)
      }

      /* yüzen rozet viewport kenarına taşmasın */
      .hero__chip {
          left: 6px
      }

      .kat-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: var(--bb-3)
      }

      .feat-grid {
          grid-template-columns: 1fr;
          gap: var(--bb-4)
      }

      .reviews-masonry {
          columns: 2;
          column-gap: var(--bb-4)
      }

      /* video rail: dokunmatik kaydırma + ekrana sığan kart genişliği */
      .vid-rail {
          grid-auto-columns: minmax(200px, 72%);
          gap: var(--bb-3);
          -webkit-overflow-scrolling: touch;
          scroll-padding-inline: var(--bb-pad-x)
      }

      /* sekme satırı yatay kaydırılabilir → taşma yok */
      .tabs-row {
          justify-content: flex-start;
          flex-wrap: nowrap;
          overflow-x: auto;
          -webkit-overflow-scrolling: touch;
          scrollbar-width: none
      }

      .tabs-row::-webkit-scrollbar {
          display: none
      }
  }

  @media (max-width: 480px) {
      .hero h1 {
          font-size: clamp(26px, 8vw, 34px)
      }

      .hero__chip {
          font-size: 11px;
          padding: 8px 12px
      }

      .hero__chip .n {
          font-size: 17px
      }

      /* Tap hedefi >=44px: ürün kartı "Sepete Ekle" (bb-btn--sm) mobilde alçaktı */
      .prod-grid .urun-kart__body .bb-btn--sm {
          min-height: 44px
      }

      /* Kullanıcı talebi: küçük telefonda da ürünler 2 sütun (basit kart: görsel+fiyat+buton rahat sığar) */
      .prod-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: var(--bb-3)
      }

      .reviews-masonry {
          columns: 1
      }

      .vid-rail {
          grid-auto-columns: minmax(78%, 82%)
      }

      /* min:0 ezip 6 sütuna sıkıştırıyordu → sabit min ile yatay kaydır */
  }


  /* ---------- Mini hero (sakin, tek kontrollü ışıma) ---------- */
  .kh {
      position: relative;
      background: var(--bb-grad-hero);
      color: var(--bb-on-dark);
      overflow: hidden
  }

  .kh::before {
      content: "";
      position: absolute;
      width: 560px;
      height: 560px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(63, 180, 180, .16), transparent 70%);
      top: -260px;
      right: -160px;
      filter: blur(30px);
      pointer-events: none
  }

  .kh__inner {
      position: relative;
      text-align: center;
      padding-block: clamp(64px, 10vh, 116px);
      max-width: 680px;
      margin-inline: auto
  }

  .kh h1 {
      font-family: var(--bb-font-display);
      font-size: var(--bb-display-l);
      line-height: 1;
      letter-spacing: var(--bb-ls-display);
      margin: 0 0 var(--bb-5)
  }

  .kh h1 .teal {
      color: var(--bb-teal-400)
  }

  .kh__sub {
      font-size: var(--bb-text-l);
      color: var(--bb-on-dark-dim);
      max-width: 50ch;
      margin: 0 auto var(--bb-6);
      line-height: var(--bb-lh-body)
  }

  .kh__trust {
      display: flex;
      flex-wrap: wrap;
      gap: var(--bb-2);
      justify-content: center
  }

  /* ---------- Katalog araç çubuğu: başlık + filtre ---------- */
  .kat-bar {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: var(--bb-5);
      margin-bottom: var(--bb-6)
  }

  .kat-bar__lede {
      max-width: 52ch
  }

  .kat-bar__lede h2 {
      font-family: var(--bb-font-display);
      font-size: var(--bb-display-s);
      letter-spacing: var(--bb-ls-display);
      color: var(--bb-cacao-700);
      line-height: 1.05
  }

  .kat-bar__lede p {
      margin-top: 10px;
      color: var(--bb-on-light-dim);
      font-size: var(--bb-text-m);
      line-height: var(--bb-lh-body)
  }

  .kat-filtre {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: center;
      gap: 12px 16px;
      width: 100%;
      padding: 12px 14px;
      border: 1px solid var(--bb-border);
      border-radius: var(--bb-r-xl);
      background: var(--bb-surface-raised)
  }

  .kat-filtre__all {
      align-self: stretch;
      display: flex;
      align-items: center;
      padding-right: 16px;
      border-right: 1px solid var(--bb-border)
  }

  .kat-filtre__groups {
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-width: 0
  }

  .kat-filtre__row {
      display: grid;
      grid-template-columns: 6.5rem minmax(0, 1fr);
      align-items: center;
      gap: 10px;
      min-width: 0
  }

  .kat-filtre__lbl {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--bb-ink-300);
      line-height: 1
  }

  .kat-filtre .bb-tabs {
      display: flex;
      flex-wrap: nowrap;
      width: max-content;
      max-width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      gap: 4px;
      padding: 4px;
      border-radius: var(--bb-r-pill)
  }

  .kat-filtre .bb-tabs::-webkit-scrollbar {
      display: none
  }

  .kat-filtre .bb-tab {
      flex: 0 0 auto;
      white-space: nowrap;
      padding: 8px 14px;
      min-height: 36px;
      font-size: var(--bb-text-xs)
  }

  /* ---------- Katalog grid ---------- */
  .kat-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: var(--bb-5)
  }

  .kat-grid .urun-kart {
      opacity: 1;
      transition: opacity var(--bb-dur-base) var(--bb-ease-standard), transform var(--bb-dur-base) var(--bb-ease-standard), box-shadow var(--bb-dur-base) var(--bb-ease-standard)
  }

  .kat-grid .urun-kart:hover {
      transform: translateY(-4px);
      box-shadow: var(--bb-e2)
  }

  .kat-grid .urun-kart.gizli {
      display: none
  }

  .kat-urun__media {
      aspect-ratio: 1/1;
      background: var(--bb-grad-ivory);
      display: grid;
      place-items: center;
      overflow: hidden;
      position: relative
  }

  .kat-urun__media img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      filter: drop-shadow(0 14px 22px rgba(46, 20, 6, .22));
      transition: transform var(--bb-dur-slow) var(--bb-ease-standard)
  }

  .urun-kart:hover .kat-urun__media img {
      transform: scale(1.05)
  }

  .kat-urun__body {
      padding: var(--bb-4);
      display: flex;
      flex-direction: column;
      gap: var(--bb-3);
      text-align: left;
      flex: 1
  }

  .kat-urun__title {
      font-family: var(--bb-font-body);
      font-weight: 800;
      font-size: var(--bb-text-m);
      line-height: 1.35;
      color: var(--bb-cacao-700);
      min-height: 2.7em;
      overflow-wrap: anywhere;
      word-break: break-word;
      transition: color var(--bb-dur-fast) var(--bb-ease-standard)
  }

  .kat-urun__title a {
      color: inherit;
      text-decoration: none
  }

  .kat-urun__title a:hover {
      color: var(--bb-teal-700)
  }

  .kat-urun__price {
      display: flex;
      align-items: baseline;
      gap: 6px;
      margin-top: auto;
      padding-top: var(--bb-3);
      border-top: 1px solid var(--bb-border)
  }

  .kat-urun__price .now {
      font-family: var(--bb-font-display);
      font-size: 25px;
      color: var(--bb-cacao-700);
      font-variant-numeric: tabular-nums
  }

  .kat-urun__price .was {
      text-decoration: line-through;
      color: var(--bb-on-light-dim);
      font-size: .8em;
      margin-left: 4px;
      opacity: .65;
      font-variant-numeric: tabular-nums
  }

  .kat-urun__price .unit {
      font-weight: 700;
      font-size: var(--bb-text-xs);
      color: var(--bb-on-light-dim);
      font-variant-numeric: tabular-nums;
      margin-left: auto
  }

  .kat-urun__act {
      display: flex;
      flex-direction: column;
      gap: var(--bb-2);
      margin-top: var(--bb-1)
  }

  .kat-urun__act-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--bb-2)
  }

  .kat-urun__act .bb-btn {
      transition: transform var(--bb-dur-fast) var(--bb-ease-standard), box-shadow var(--bb-dur-base) var(--bb-ease-standard), background var(--bb-dur-fast) var(--bb-ease-standard)
  }

  .kat-urun__act .bb-btn:hover {
      transform: translateY(-2px)
  }

  .kat-urun__act .bb-btn:active {
      transform: scale(.98)
  }

  .kat-urun__wa {
      --_bg: var(--bb-teal-600);
      --_fg: #fff;
      box-shadow: var(--bb-e1)
  }

  .kat-urun__wa:hover {
      --_bg: var(--bb-teal-700);
      box-shadow: var(--bb-e2)
  }

  /* Tükendi — pasif kart */
  .kat-urun__act .bb-btn.is-disabled {
      opacity: .5;
      cursor: not-allowed;
      filter: grayscale(.4);
      pointer-events: none
  }

  .urun-kart.kat-tukendi .kat-urun__media img {
      filter: grayscale(.6) drop-shadow(0 14px 22px rgba(46, 20, 6, .16));
      opacity: .7
  }

  .kat-bos {
      grid-column: 1/-1;
      text-align: center;
      color: var(--bb-on-light-dim);
      padding: var(--bb-8) var(--bb-4)
  }

  /* ---------- Sipariş bandı (sade satır numara) ---------- */
  .siparis-steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--bb-6)
  }

  .siparis-step {
      display: flex;
      gap: var(--bb-4);
      align-items: flex-start
  }

  .siparis-step .num {
      flex: 0 0 auto;
      width: 44px;
      height: 44px;
      border-radius: var(--bb-r-pill);
      border: 1px solid var(--bb-border-gold);
      color: var(--bb-gold-400);
      font-family: var(--bb-font-display);
      font-size: 21px;
      display: grid;
      place-items: center;
      transition: border-color var(--bb-dur-base) var(--bb-ease-standard), color var(--bb-dur-base) var(--bb-ease-standard)
  }

  .siparis-step:hover .num {
      border-color: var(--bb-gold-400);
      color: var(--bb-gold-300)
  }

  .siparis-step h3 {
      font-family: var(--bb-font-display);
      font-size: var(--bb-text-xl);
      letter-spacing: .02em;
      margin: 6px 0 6px;
      color: var(--bb-on-dark)
  }

  .siparis-step p {
      font-size: var(--bb-text-s);
      color: var(--bb-on-dark-dim);
      line-height: var(--bb-lh-body)
  }

  /* ---------- Özellik grid ---------- */
  .kat-promo {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: var(--bb-5)
  }

  @media (max-width:980px) {
      .kat-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr))
      }

      .kat-promo {
          grid-template-columns: repeat(2, minmax(0, 1fr))
      }

      .siparis-steps {
          grid-template-columns: 1fr;
          gap: var(--bb-5)
      }

      .kat-filtre {
          grid-template-columns: 1fr;
          padding: 12px
      }

      .kat-filtre__all {
          padding-right: 0;
          padding-bottom: 10px;
          border-right: 0;
          border-bottom: 1px solid var(--bb-border)
      }

      .kat-filtre__row {
          grid-template-columns: 1fr;
          gap: 8px
      }
  }

  @media (max-width:480px) {
      .kat-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: var(--bb-3)
      }

      .kat-promo {
          grid-template-columns: 1fr
      }

      .kat-urun__body {
          padding: var(--bb-3)
      }

      .kat-urun__act-row {
          grid-template-columns: 1fr
      }

      .kat-urun__title {
          font-size: var(--bb-text-s);
          min-height: auto
      }

      .kat-urun__price .now {
          font-size: 22px
      }

      .kh h1 {
          font-size: clamp(34px, 11vw, 46px)
      }

      /* yorum grid: dar telefonda 260px min taşma yapar → tek sütun */
      #katYorumlar {
          grid-template-columns: 1fr !important
      }
  }