/* ==========================================================================
   BAHO — ANA SAYFA
   ==========================================================================
   Tasarım sistemi token'larını kullanır (baho.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(60, 28, 14, .72) 0%,
      rgba(60, 28, 14, .42) 42%,
      rgba(60, 28, 14, .05) 72%,
      rgba(60, 28, 14, 0) 100%
    ),
    linear-gradient(
      to top,
      rgba(60, 28, 14, .68) 0%,
      rgba(60, 28, 14, .30) 42%,
      rgba(60, 28, 14, 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(60, 28, 14, .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(60, 28, 14, .5);
}


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

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

.bh-cat {
  display: block;
  background: var(--c-surface);
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  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);
}

/*
  Kaynak görsellerin oranı 463x332 = 1.394.
  Kutuyu TAM bu orana sabitliyoruz ve object-fit: contain kullanıyoruz —
  böylece görsel asla kırpılmaz. Mevcut sitedeki metin/ürün çakışmasının
  sebebi buydu: kart farklı bir orana zorlanıp kırpılıyordu.
*/
.bh-cat-media {
  aspect-ratio: 463 / 332;
  background: #E08260;   /* kartların kendi zemin rengi — kenarda bant oluşmaz */
  overflow: hidden;
}

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

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

/* Görsellerdeki yazı temizlenince devreye girecek başlık alanı */
.bh-cat-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-4);
}

.bh-cat-title {
  font-size: var(--t-base);
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
}

.bh-cat-sub {
  font-size: var(--t-sm);
  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(auto-fill, minmax(210px, 1fr));
}

.bh-product-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  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%; }

  .bh-cats {
    /* Dar ekranda iki sütun: kartlar landscape olduğu için
       tek sütun gereksiz yer kaplıyor, üç sütun okunmuyor. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-3);
  }

  /*
    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-3); }

  .bh-cat-title {
    font-size: var(--t-sm);
    line-height: 1.3;
  }

  /* Ü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: minmax(0, 1fr); }
}