/* ===================================================================
   BİLEŞEN: bolum_bas  (varyantlar: hap · cubuk · sade)
   KURAL: yalnız --em-* tokenı. Tema öneki YASAK.

   BİLEŞEN TOKENLARI — tema bunları ezerek bileşeni kendine uydurur.
   Genel tokenlar (--em-bg-soft, --em-primary) her zaman doğru anlamı
   taşımıyor: hap barın zemini "yumuşak zemin" değil kendine ait bir
   renk, "Tümü" butonu da ana vurgudan farklı bir ton olabiliyor.
   =================================================================== */
:root {
  --em-bolum-bas-bg:  var(--em-bg-soft);   /* hap barın zemini */
  --em-bolum-tumu-bg: var(--em-primary);   /* "Tümü" butonunun zemini */
}

.bs-bolum-bas {
  position: relative;
  display: flex; align-items: center; gap: var(--em-3);
  margin-bottom: var(--em-3);
}
.bs-bolum-kimlik {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: var(--em-2);
  flex: 0 0 auto; min-width: 0;
}
.bs-bolum-kimlik h2 {
  margin: 0; font-size: var(--em-fs-xl); font-weight: 700;
  color: var(--em-text); white-space: nowrap;
}
.bs-bolum-kimlik p {
  margin: 0; font-size: var(--em-fs-xs);
  color: var(--em-text-muted); white-space: nowrap;
}

/* "Tümü" — ortak, varyantlar yalnız biçimini değiştirir */
.bs-bolum-tumu {
  position: relative; z-index: 1;
  flex: 0 0 auto; margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  white-space: nowrap; text-decoration: none;
  transition: background var(--em-hiz) ease-out, color var(--em-hiz) ease-out;
}
.bs-bolum-tumu i { font-size: var(--em-fs-xs); }

/* ------------------------------------------------------------------
   VARYANT: hap — dolu zeminli yuvarlak bar
   ------------------------------------------------------------------ */
.bs-bolum-bas.hap {
  min-height: 60px;
  padding: 6px 6px 6px var(--em-5);
  background: var(--em-bolum-bas-bg);
  border-radius: var(--em-r-pill);
  overflow: hidden;
}
.bs-bolum-bas.hap .bs-bolum-kimlik > i {
  width: 34px; height: 34px; border-radius: var(--em-r-daire);
  display: grid; place-items: center;
  background: rgba(var(--em-primary-rgb), .18);
  color: var(--em-primary); font-size: var(--em-fs-xl);
}
.bs-bolum-bas.hap .bs-bolum-tumu {
  min-height: 45px; padding: 0 var(--em-5);
  background: var(--em-bolum-tumu-bg); color: #fff;
  border-radius: var(--em-r-pill);
  font-size: var(--em-fs-lg); font-weight: 500;
}
.bs-bolum-bas.hap .bs-bolum-tumu:hover { background: var(--em-primary-2); color: #fff; }

/* hap + banner → şeffaf zemin, görsel bara yayılır, 6px daha yüksek */
.bs-bolum-bas.hap.bannerli {
  background: transparent;
  min-height: 66px;
  gap: var(--em-2);
}
.bs-bolum-bas.hap.bannerli .bs-bolum-kimlik h2 { font-size: var(--em-fs-xl); }
.bs-bolum-fon {
  position: absolute; inset: 0 0 0 auto; width: 72%;
  object-fit: cover; opacity: .55;
  border-radius: var(--em-r-pill);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%);
          mask-image: linear-gradient(90deg, transparent, #000 40%);
  pointer-events: none;
}

/* Oyun sekmeleri (yalnız hap varyantında) */
.bs-bolum-sekmeler {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: var(--em-1);
  flex: 1 1 auto; overflow-x: auto; scrollbar-width: none;
  contain: paint;
}
.bs-bolum-sekmeler::-webkit-scrollbar { display: none; }
.bs-bolum-sekme {
  flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: var(--em-r-daire);
  display: grid; place-items: center;
  background: rgba(0, 0, 0, .22);
  border: 2px solid transparent;
  overflow: hidden; cursor: pointer;
  transition: border-color var(--em-hiz) ease-out, transform var(--em-hiz) ease-out;
}
.bs-bolum-sekme img { width: 100%; height: 100%; object-fit: cover; }
.bs-bolum-sekme:hover { transform: translateY(-2px); }
.bs-bolum-sekme.aktif { border-color: var(--em-primary); }

/* ------------------------------------------------------------------
   VARYANT: cubuk — solda dikey renkli çubuk
   ------------------------------------------------------------------ */
.bs-bolum-bas.cubuk { align-items: flex-end; }
.bs-bolum-bas.cubuk .bs-bolum-kimlik h2 {
  display: flex; align-items: center; gap: var(--em-2);
  font-size: var(--em-fs-2xl);
}
.bs-bolum-bas.cubuk .bs-bolum-kimlik h2::before {
  content: ""; flex: 0 0 auto;
  width: 4px; height: 20px; border-radius: 2px;
  background: var(--em-primary);
}
.bs-bolum-bas.cubuk .bs-bolum-kimlik p { margin-left: var(--em-3); }
.bs-bolum-bas.cubuk .bs-bolum-tumu {
  padding: var(--em-2) var(--em-4);
  background: var(--em-primary); color: #fff;
  border-radius: var(--em-r-pill);
  font-size: var(--em-fs-sm); font-weight: 700;
}
.bs-bolum-bas.cubuk .bs-bolum-tumu:hover { background: var(--em-primary-2); color: #fff; }

/* ------------------------------------------------------------------
   VARYANT: sade — süssüz
   ------------------------------------------------------------------ */
.bs-bolum-bas.sade { align-items: baseline; }
.bs-bolum-bas.sade .bs-bolum-kimlik h2 { font-size: var(--em-fs-xl); }
.bs-bolum-bas.sade .bs-bolum-tumu {
  color: var(--em-primary); font-size: var(--em-fs-md); font-weight: 600;
}
.bs-bolum-bas.sade .bs-bolum-tumu:hover { color: var(--em-primary-2); }

@media (max-width: 767px) {
  .bs-bolum-bas.hap {
    padding-left: var(--em-3);
    border-radius: var(--em-r-md);
    min-height: 52px;
  }
  .bs-bolum-kimlik p { display: none; }
  .bs-bolum-kimlik h2 { font-size: var(--em-fs-lg); }
  .bs-bolum-bas.hap .bs-bolum-tumu {
    min-height: 38px; padding: 0 var(--em-3);
    border-radius: var(--em-r-xs); font-size: var(--em-fs-sm);
  }
  .bs-bolum-sekme { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .bs-bolum-tumu, .bs-bolum-sekme { transition: none; }
}

/* Serbest yuva — sayaç, rozet gibi bölüme özel içerik.
   "Tümü" butonunu sağa yaslamayı sürdürsün diye kimlikten sonra,
   butondan önce durur. */
.bs-bolum-ek {
  position: relative; z-index: 1;
  margin-left: auto;
  display: flex; align-items: center; gap: var(--em-1);
}
/* Yuva doluyken "Tümü" kendi auto kenar boşluğunu bırakır */
.bs-bolum-ek + .bs-bolum-tumu { margin-left: var(--em-3); }