/* ==========================================================================
   GOREEL — ANA SAYFA
   ==========================================================================
   Tasarım sistemi token'larını kullanır (goreel.css). Yalnızca ana sayfaya
   özgü düzen kuralları burada.
   ========================================================================== */

.bh-home { background: var(--c-surface-sunken); }


/* ==========================================================================
   HERO
   --------------------------------------------------------------------------
   Video tam kanama (full-bleed), içerik container'da hizalı.
   Yükseklik dvh ile: mobil tarayıcılarda adres çubuğu kayarken vh zıplar,
   dvh zıplamaz. Desteklenmeyen tarayıcı vh'ye düşer.
   ========================================================================== */

.bh-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 62vh;
  min-height: 62dvh;
  overflow: hidden;
  background: var(--c-brand-deep);   /* video yüklenene kadar marka zemini */
}

.bh-hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Metnin okunabilirliği için alttan yukarı koyulaşan perde.
   Düz siyah yerine markanın koyu tonu: video sıcak renkli, nötr
   siyah perde griye çalıp görüntüyü ölü gösteriyor. */
/*
  Perde iki katmanlı:
  1) alttan yukarı koyulaşan dikey geçiş — metnin okunabilirliği
  2) soldan sağa hafif geçiş — videodaki logo sağda nefes alsın

  Mevcut hero videosu markanın kendi logo animasyonu olduğu için başlık
  onunla çarpışıyordu. Soldaki geçiş metin sütununu ayırıyor.
  Düz siyah değil markanın koyu tonu: video sıcak renkli, nötr siyah
  perde onu griye çekip ölü gösteriyor.
*/
.bh-hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      to right,
      rgba(var(--c-scrim-rgb), .72) 0%,
      rgba(var(--c-scrim-rgb), .42) 42%,
      rgba(var(--c-scrim-rgb), .05) 72%,
      rgba(var(--c-scrim-rgb), 0) 100%
    ),
    linear-gradient(
      to top,
      rgba(var(--c-scrim-rgb), .68) 0%,
      rgba(var(--c-scrim-rgb), .30) 42%,
      rgba(var(--c-scrim-rgb), 0) 78%
    );
}

.bh-hero-inner {
  position: relative;
  z-index: 2;
  padding-block: var(--s-12);
  /* Çentikli cihazda yatay güvenli alan */
  padding-left: max(var(--s-5), var(--safe-left));
  padding-right: max(var(--s-5), var(--safe-right));
}

.bh-hero-title {
  color: #fff;
  font-size: clamp(28px, 5.2vw, 56px);
  text-wrap: balance;
  max-width: 16ch;
  margin-bottom: var(--s-3);
  text-shadow: 0 2px 24px rgba(var(--c-scrim-rgb), .5);
}

.bh-hero-sub {
  color: rgba(255, 255, 255, .92);
  font-size: clamp(15px, 1.8vw, 19px);
  max-width: 42ch;
  margin: 0 0 var(--s-6);
  text-shadow: 0 1px 12px rgba(var(--c-scrim-rgb), .5);
}


/* ==========================================================================
   KATEGORİ IZGARASI
   ========================================================================== */

/*
  Varsayılan: KOMPAKT KUTUCUK. Kare görsel + ad. 27 kategoriyi iki-üç
  ekranda taratır; eski 463x332 kartlar aynı içeriği altı ekrana yayıyordu.
  Görsele yazı gömülü kategori görselleri (.bh-cats--baked) eski geniş
  kart düzenini koruyor — o görseller küçükte okunmaz.
*/
.bh-cats {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* Masaüstünde 4, tablette 3 sütun: kart büyük, görsel ve ad rahat okunur
   (5 sütunda kartlar küçük kalıyor, "bölüm" olduğu anlaşılmıyordu) */
@media (min-width: 768px) {
  .bh-cats:not(.bh-cats--baked) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
}

@media (min-width: 1100px) {
  .bh-cats:not(.bh-cats--baked) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.bh-cats-more { display: none; }

.bh-cats--baked {
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.bh-cat {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  transition: border-color var(--d-base) var(--e-out),
              box-shadow var(--d-base) var(--e-out),
              transform var(--d-base) var(--e-out);
}

.bh-cat:hover {
  border-color: var(--c-brand-a32);
  box-shadow: var(--sh-lg);
  transform: translateY(-3px);
}

.bh-cat:focus-visible { outline: none; box-shadow: var(--sh-focus); }

.bh-cat-media {
  aspect-ratio: 1 / 1;
  padding: 0;            /* ürün fotoğraflarının kendi beyaz payı var */
  background: var(--c-surface);
  overflow: hidden;
}

/* Gömülü yazılı görsellerin kendi oranı: kırpılmasın */
.bh-cats--baked .bh-cat-media { aspect-ratio: 463 / 332; padding: 0; }

.bh-cat-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--e-out);
}

.bh-cat:hover .bh-cat-media img { transform: scale(1.05); }

.bh-cat-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin-top: auto;
  padding: var(--s-3) var(--s-4) var(--s-4);
  border-top: 1px solid var(--c-line);
}

/* Metin sütunu: ad + "128 ürün" */
.bh-cat-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* Ok HER ZAMAN görünür (önceden yalnızca hover'da çıkıyordu): kartın bir
   bölüme götürdüğü ilk bakışta anlaşılsın. Hover'da marka rengiyle dolar. */
.bh-cat-go {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--c-brand-deep);
  background: var(--c-brand-a08);
  border: 1px solid var(--c-brand-a16);
  border-radius: var(--r-full);
  transition: background var(--d-base) var(--e-out), color var(--d-base) var(--e-out),
              border-color var(--d-base) var(--e-out), transform var(--d-base) var(--e-out);
}

.bh-cat-go svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bh-cat:hover .bh-cat-go {
  color: #fff;
  background: var(--c-brand);
  border-color: var(--c-brand);
  transform: translateX(2px);
}

.bh-cat-title {
  font-size: var(--t-base);
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: -.01em;
  line-height: 1.3;
}

.bh-cat-sub {
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--c-ink-muted);
}


/* ==========================================================================
   ÜRÜN RAYI
   --------------------------------------------------------------------------
   Masaüstünde ızgara, mobilde yatay kaydırmalı ray.
   Aynı markup, düzen kararını CSS veriyor.
   ========================================================================== */

.bh-pgrid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* Sabit sütun + gizlenen fazlalık: ray her genişlikte TAM satırlarla biter.
   Yarım kalan son satır vitrini dağınık gösteriyordu. */
@media (min-width: 768px) and (max-width: 1199px) {
  .bh-pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bh-pgrid > :nth-child(n+9) { display: none; }
}

/* Kart: bağlantı (görsel + ad + fiyat) üstte, hızlı ekleme altta */
.bh-product { display: flex; flex-direction: column; }

.bh-product-buy {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: 0 var(--s-4) var(--s-4);
}

.bh-product-link {
  display: flex;
  flex-direction: column;
  flex: 1;
  color: inherit;
  text-decoration: none;
}

.bh-product-link:hover { color: inherit; }

.bh-product-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  margin-top: auto;   /* fiyat kartın altına yaslanır, başlık uzunluğu fark etmez */
}


/* ==========================================================================
   MOBİL
   ========================================================================== */

@media (max-width: 767px) {

  .bh-hero {
    /* Dikey video portre; hero daha yüksek olmalı ki kadraj bozulmasın */
    min-height: 78vh;
    min-height: 78dvh;
  }

  .bh-hero-inner { padding-block: var(--s-8); }

  .bh-hero-title { max-width: 100%; }


  /*
    GEÇİCİ — yazı hâlâ görsele gömülüyken.
    İki sütunda kart 166px'e iniyor; 463px için tasarlanmış yazı %36 ölçekte
    okunmuyor. Tek sütunda kart ~343px, yani %74 ölçek — okunur.
    Temiz görseller gelip text_in_image false olunca bu sınıf hiç basılmaz
    ve yukarıdaki iki sütunlu düzen devreye girer.
  */
  .bh-cats--baked {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-4);
  }

  .bh-cat { border-radius: var(--r-md); }

  /* Kategori adları uzun ("HAVA NEMLENDİRİCİ ÇEŞİTLERİ" gibi) ve iki
     sütunda 3 satıra taşıyor. Mobilde punto ve dolgu daralıyor. */
  .bh-cat-body { padding: var(--s-2) var(--s-2) var(--s-3); border-top: 0; }

  .bh-cat-body::after { display: none; }

  .bh-cat-title {
    font-size: 12px;
    line-height: 1.25;
  }

  /* Ürünler mobilde yatay ray: dikey alan pahalı, kaydırma ucuz */
  .bh-pgrid {
    display: flex;
    gap: var(--s-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;

    /* Kenardan kenara kaysın ama ilk kart container'la hizalı kalsın */
    margin-inline: calc(var(--s-4) * -1);
    padding-inline: var(--s-4);
    padding-bottom: var(--s-1);
  }

  .bh-pgrid::-webkit-scrollbar { display: none; }

  .bh-product {
    flex: none;
    width: 46vw;
    max-width: 190px;
    scroll-snap-align: start;
  }

  /* Dokunmatikte hover yok; yükselme efekti burada anlamsız */
  .bh-cat:hover,
  .b-card--interactive:hover { transform: none; }
}

/* Çok dar ekranlarda (SE gibi) kategori kartı iki sütunda sıkışıyor */
@media (max-width: 359px) {
  .bh-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bh-cats--baked { grid-template-columns: minmax(0, 1fr); }
}


/* ==========================================================================
   VİTRİN — videosuz hero
   --------------------------------------------------------------------------
   Açık zemin + markanın turkuazından yumuşak ışık lekeleri. Koyu, video
   tabanlı hero'ya göre daha hızlı (LCP: yalnızca 2 küçük görsel) ve ürünü
   ilk ekranda gösteriyor — toptancı için asıl vaat ürün çeşitliliği.
   ========================================================================== */

.bh-show {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1200px 520px at 85% 10%, rgba(88, 216, 232, .22), transparent 60%),
    radial-gradient(700px 420px at 0% 100%, var(--c-brand-a08), transparent 70%),
    var(--c-surface);
  border-bottom: 1px solid var(--c-line);
}

/* Logodaki yaprak motifinin soyut izi: ince halkalar */
.bh-show-deco {
  position: absolute;
  right: -160px;
  top: -200px;
  width: 640px;
  height: 640px;
  border-radius: 50%;
  border: 1px solid rgba(var(--c-brand-rgb), .10);
  box-shadow: 0 0 0 60px rgba(var(--c-brand-rgb), .03), 0 0 0 140px rgba(var(--c-brand-rgb), .025);
  pointer-events: none;
}

.bh-show-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--s-12);
  padding-block: var(--s-16) var(--s-16);
}

.bh-show-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-5);
  padding: 6px 14px 6px 10px;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--c-brand-deep);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-full);
  box-shadow: var(--sh-sm);
}

.bh-show-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-brand-bright);
  box-shadow: 0 0 0 4px rgba(88, 216, 232, .25);
}

.bh-show-title {
  margin: 0;
  font-size: clamp(34px, 4.6vw, 58px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.02em;
  word-spacing: .04em;
  color: var(--c-ink);
  text-wrap: balance;
}

.bh-show-sub {
  margin: var(--s-5) 0 0;
  max-width: 52ch;
  font-size: var(--t-md);
  line-height: 1.6;
  color: var(--c-ink-muted);
  text-wrap: pretty;
}

.bh-show-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-8);
}

.bh-show-actions .b-btn { gap: var(--s-2); }

.bh-show-cta2,
.bh-show-cta2:visited {
  color: var(--c-ink);
  background: var(--c-surface);
  border: 1px solid var(--c-line-strong);
  box-shadow: var(--sh-sm);
}

.bh-show-cta2:hover { color: var(--c-ink); border-color: var(--c-ink); }
.bh-show-cta2 svg { color: #1FA855; }
.bh-show-actions .b-btn svg { transition: transform var(--d-base) var(--e-out); }
.bh-show-actions .b-btn:hover svg { transform: translateX(3px); }

.bh-show-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8);
  margin: var(--s-10) 0 0;
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-line);
}

.bh-show-stats div { min-width: 0; }

.bh-show-stats dt {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}

.bh-show-stats dd {
  margin: 6px 0 0;
  font-size: var(--t-sm);
  color: var(--c-ink-muted);
}

/* Kolaj: 2x2, çapraz kaydırmalı — duvar gibi değil, raf gibi */
.bh-show-art {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
  padding-block: var(--s-6);
}

.bh-show-tile {
  display: block;
  aspect-ratio: 1 / 1;
  padding: var(--s-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
  overflow: hidden;
  transition: transform var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
}

.bh-show-tile--2,
.bh-show-tile--4 { transform: translateY(var(--s-8)); }

.bh-show-tile:hover { box-shadow: var(--sh-lg); transform: translateY(-4px); }
.bh-show-tile--2:hover,
.bh-show-tile--4:hover { transform: translateY(calc(var(--s-8) - 4px)); }

.bh-show-tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}


/* ==========================================================================
   AVANTAJ ŞERİDİ
   ========================================================================== */

.bh-usp {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
}

.bh-usp-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.bh-usp-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-6) var(--s-5);
}

.bh-usp-item + .bh-usp-item { border-left: 1px solid var(--c-line); }

.bh-usp-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  color: var(--c-brand);
  background: var(--c-brand-a08);
}

.bh-usp-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.35;
}

.bh-usp-text strong {
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--c-ink);
}

.bh-usp-text span {
  font-size: var(--t-xs);
  color: var(--c-ink-muted);
}


/* ==========================================================================
   ÇAĞRI BANDI
   ========================================================================== */

.bh-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-8);
  padding: var(--s-12);
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(600px 300px at 100% 0%, rgba(88, 216, 232, .35), transparent 60%),
    linear-gradient(135deg, var(--c-brand-deep), var(--c-ink-strong) 70%);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
}

.bh-cta-deco {
  position: absolute;
  right: 18%;
  bottom: -120px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 0 0 40px rgba(255, 255, 255, .03);
  pointer-events: none;
}

.bh-cta-copy { position: relative; max-width: 60ch; }

.bh-cta-title {
  margin: 0;
  font-size: var(--t-2xl);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.15;
  color: #fff;
}

.bh-cta-sub {
  margin: var(--s-3) 0 0;
  font-size: var(--t-base);
  color: rgba(255, 255, 255, .78);
}

.bh-cta-actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  flex: none;
}

.bh-cta-btn,
.bh-cta-btn:visited {
  color: var(--c-ink-strong);
  background: var(--c-brand-bright);
  border-color: var(--c-brand-bright);
  font-weight: 700;
}

.bh-cta-btn:hover { color: var(--c-ink-strong); background: #7FE3EF; border-color: #7FE3EF; }

.bh-cta-btn2,
.bh-cta-btn2:visited {
  color: #fff;
  background: transparent;
  border-color: rgba(255, 255, 255, .35);
}

.bh-cta-btn2:hover { color: #fff; background: rgba(255, 255, 255, .08); border-color: #fff; }


/* Bölüm başlığındaki "Tümünü gör" */
.bh-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--c-brand);
  text-decoration: none;
  white-space: nowrap;
}

.bh-more:hover { color: var(--c-brand-deep); }
.bh-more svg { transition: transform var(--d-base) var(--e-out); }
.bh-more:hover svg { transform: translateX(3px); }


/* ==========================================================================
   YENİ BLOKLAR — TABLET / MOBİL
   ========================================================================== */

@media (max-width: 991px) {
  .bh-show-inner { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); padding-block: var(--s-12) var(--s-10); }
  .bh-show-art { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); padding-block: 0; }
  .bh-show-tile { padding: var(--s-2); border-radius: var(--r-lg); }
  .bh-show-tile--2, .bh-show-tile--4 { transform: none; }
  .bh-show-tile--2:hover, .bh-show-tile--4:hover { transform: translateY(-4px); }

  .bh-usp-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bh-usp-item:nth-child(3) { border-left: 0; }
  .bh-usp-item:nth-child(n+3) { border-top: 1px solid var(--c-line); }

  .bh-cta { flex-direction: column; align-items: flex-start; padding: var(--s-8); }
}

@media (max-width: 767px) {
  .bh-show-inner { padding-block: var(--s-8); }
  .bh-show-eyebrow { margin-bottom: var(--s-4); }
  .bh-show-sub { font-size: var(--t-base); }
  .bh-show-actions { margin-top: var(--s-6); }
  .bh-show-actions .b-btn { flex: 1 1 auto; }
  .bh-show-stats { gap: var(--s-6); margin-top: var(--s-8); padding-top: var(--s-5); }
  .bh-show-stats dt { font-size: 24px; }
  .bh-show-art { gap: var(--s-2); }
  .bh-show-deco { display: none; }

  /* Avantajlar mobilde yatay şerit: 2x2 ızgara ilk ekranın yarısını yiyordu */
  .bh-usp-list {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(var(--s-4) * -1);
    padding-inline: var(--s-4);
  }
  .bh-usp-list::-webkit-scrollbar { display: none; }
  .bh-usp-item,
  .bh-usp-item:nth-child(n) { flex: none; width: 72%; max-width: 260px; scroll-snap-align: start; border-top: 0; }
  .bh-usp-item + .bh-usp-item { border-left: 1px solid var(--c-line); }
  .bh-usp-item { padding: var(--s-4) var(--s-3); gap: var(--s-2); }

  /* Başlık + "Tümünü gör" aynı satırda: bağlantı başlığın altına düşünce
     bölümler arası ritim bozuluyordu */
  .b-section-head:has(.bh-more) { flex-direction: row; align-items: flex-end; }
  .bh-more { padding-bottom: 4px; }
  .bh-usp-ico { width: 36px; height: 36px; }
  .bh-usp-ico svg { width: 18px; height: 18px; }

  .bh-cta { padding: var(--s-6); border-radius: var(--r-lg); }
  .bh-cta-title { font-size: var(--t-xl); }
  .bh-cta-actions, .bh-cta-actions .b-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .bh-cat, .bh-cat-media img, .bh-show-tile, .bh-cat-body::after { transition: none; }
}

/* ==========================================================================
   Özel gün / kampanya rafı (panel: raf stili accent | warm | rose)
   Renkli zemin rafı sayfanın geri kalanından ayırıyor; kartlar beyaz kalıyor
   ki ürün fotoğrafları zeminle karışmasın.
   ========================================================================== */
.bh-rail-x {
  --rx-bg:   linear-gradient(135deg, #E3F6F8 0%, #F2FBFC 60%, #E8F5F7 100%);
  --rx-ink:  var(--c-brand-deep);
  --rx-chip: var(--c-brand);
  background: var(--rx-bg);
  position: relative;
  overflow: hidden;
}
.bh-rail-x--warm { --rx-bg: linear-gradient(135deg, #FFF1E2 0%, #FFF8F0 60%, #FDEEDF 100%); --rx-ink: #9A4A06; --rx-chip: #D9690B; }
.bh-rail-x--rose { --rx-bg: linear-gradient(135deg, #FDE8EF 0%, #FFF5F8 60%, #FBE6EE 100%); --rx-ink: #9C2350; --rx-chip: #C93770; }
.bh-rail-x::before {
  /* hafif dekor: sağ üstte büyük yumuşak daire */
  content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%;
  right: -140px; top: -220px; background: var(--rx-chip); opacity: .07; pointer-events: none;
}
.bh-rail-x .b-container { position: relative; }
.bh-rail-x .b-h2 { color: var(--rx-ink); }
.bh-rail-x .bh-more { color: var(--rx-ink); }

.bh-rail-eyebrow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 6px; font-size: var(--t-xs); font-weight: 700;
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--c-brand);
}
.bh-rail-x .bh-rail-eyebrow { color: var(--rx-chip); }
.bh-rail-deadline {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px;
  background: var(--rx-chip, var(--c-brand)); color: #fff;
  letter-spacing: 0; text-transform: none; font-size: 12px;
}

/* ==========================================================================
   Görsel banner (1-3 görsel)
   ========================================================================== */
.bh-banners { padding: var(--s-6) 0; }
.bh-banners-grid { display: grid; gap: var(--s-4); }
.bh-banners--2 .bh-banners-grid { grid-template-columns: 1fr 1fr; }
.bh-banners--3 .bh-banners-grid { grid-template-columns: repeat(3, 1fr); }
.bh-banner {
  display: block; border-radius: 16px; overflow: hidden;
  background: var(--c-surface-warm);
  box-shadow: 0 1px 2px rgba(var(--c-shadow-rgb), .06);
  transition: transform .2s ease, box-shadow .2s ease;
}
a.bh-banner:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(var(--c-shadow-rgb), .12); }
.bh-banner img { display: block; width: 100%; height: auto; }
@media (max-width: 767px) {
  .bh-banners { padding: var(--s-4) 0; }
  .bh-banners--2 .bh-banners-grid,
  .bh-banners--3 .bh-banners-grid { grid-template-columns: 1fr; gap: var(--s-3); }
  .bh-banner { border-radius: 14px; }
}