/* ===================================================================
   BİLEŞEN: hero  (varyantlar: sahne · genis)
   KURAL: yalnız --em-* tokenı. Tema öneki YASAK.
   =================================================================== */

/* Bileşen tokenı: slider yarıçapı temaya göre değişir (20 vs 8). */
:root { --em-hero-r: 20px; }

/* --- ORTAK slider gövdesi --- */
.bs-hero-slider {
  position: relative;
  border-radius: var(--em-hero-r);
  overflow: hidden;
  background: var(--em-bg-card);
  aspect-ratio: 1152 / 354;
}
.bs-hero-slayt {
  position: absolute; inset: 0;
  display: block; opacity: 0; visibility: hidden;
  transition: opacity 420ms ease;
  text-decoration: none;
}
.bs-hero-slayt.aktif { opacity: 1; visibility: visible; }
.bs-hero-slayt img { width: 100%; height: 100%; object-fit: cover; }

.bs-hero-metin {
  position: absolute; inset: auto 0 0 0;
  padding: var(--em-6) var(--em-5) var(--em-4);
  background: linear-gradient(transparent, rgba(0, 0, 0, .82));
  display: flex; flex-direction: column; gap: 2px;
}
.bs-hero-metin b { color: #fff; font-size: var(--em-fs-3xl); font-weight: 700; }
.bs-hero-metin span { color: rgba(255, 255, 255, .82); font-size: var(--em-fs-md); }

/* Oklar */
.bs-hero-ok {
  position: absolute; z-index: 3; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: var(--em-r-daire);
  background: var(--em-primary); border: 0; color: #fff;
  display: grid; place-items: center; cursor: pointer;
  opacity: .85; transition: opacity var(--em-hiz) ease-out;
}
.bs-hero-ok:hover { opacity: 1; }
.bs-hero-ok.sol { left: var(--em-3); }
.bs-hero-ok.sag { right: var(--em-3); }

/* --- VARYANT: sahne --- */
.bs-hero-sahne {
  position: relative;
  /* Blok .container içinde basıldığı için kapsayıcıdan taşırılır.
     100vw yerine calc(50% - 50vw): kaydırma çubuğu hesaba katılmayınca
     sağda ince bir yatay taşma oluşuyordu. */
  margin-inline: calc(50% - 50vw);
  padding: 48px calc(50vw - 50%) 0;
  border-radius: 0 0 30px 30px;
  overflow: hidden;
  background: var(--em-bg-soft);
  transition: background-image .5s ease-in-out;
}
.bs-hero-fon {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: .35; pointer-events: none;
}
.bs-hero-ic { position: relative; }

/* =====================================================================
   Logo şeridi (slider altındaki küçük görseller) — soyut nokta değil,
   kampanya logosu.

   YENİLENDİ. Eski hâli 2019 hissi veriyordu ve nedeni ölçülebilir:
     · gap: 0 → kartlar birbirine yapışık, tek bir gri blok gibi
     · aktif durum yalnızca rgba(255,255,255,.13) üst çizgi → hangi
       slayttayız belli olmuyordu
     · yalnız opaklık değişimi → tıklanabilir olduğu hissi zayıf
   Şimdi: ayrık kartlar, gerçek yüzey, aktifte AKSAN şeridi + hafif
   yükselme, hover'da ışık süpürmesi (shine).

   NOT: Burası MÜŞTERİ TARAFI temasıdır; panelde geçerli olan
   "sıfır gradient" kuralı buraya uygulanmaz — vitrinin canlı durması
   isteniyor. Panel için bkz. epin/panel.css.
   ===================================================================== */
.bs-hero-logolar {
  display: flex; gap: 8px;
  padding: 10px 2px 2px;
  overflow-x: auto; scrollbar-width: none;
  contain: paint;
}
.bs-hero-logolar::-webkit-scrollbar { display: none; }
.bs-hero-logo {
  position: relative; overflow: hidden;
  flex: 0 0 auto; width: 84px; height: 106px;
  display: grid; place-items: center; gap: 4px;
  padding: 10px 8px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 12px;
  background: rgba(255, 255, 255, .035);
  cursor: pointer; opacity: .68;
  transition: opacity var(--em-hiz) ease-out, transform var(--em-hiz) ease-out,
              border-color var(--em-hiz) ease-out, background var(--em-hiz) ease-out;
}
.bs-hero-logo:hover {
  opacity: 1; transform: translateY(-3px);
  border-color: rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .07);
}
/* Işık süpürmesi: yalnız hover'da bir kez soldan sağa geçer. */
.bs-hero-logo::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent);
  transform: skewX(-18deg); opacity: 0; pointer-events: none;
}
.bs-hero-logo:hover::after { animation: bsParilti .62s ease-out; }
@keyframes bsParilti {
  from { left: -60%; opacity: 1; }
  to   { left: 115%; opacity: 0; }
}
/* Aktif slayt: üstte kalın aksan şeridi — nokta saymaya gerek kalmıyor. */
.bs-hero-logo.aktif {
  opacity: 1;
  border-color: color-mix(in srgb, var(--em-accent, var(--em-primary)) 55%, transparent);
  background: color-mix(in srgb, var(--em-accent, var(--em-primary)) 12%, rgba(255, 255, 255, .05));
}
.bs-hero-logo.aktif::before {
  content: ''; position: absolute; top: 0; left: 12px; right: 12px; height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--em-accent, var(--em-primary));
}
.bs-hero-logo:focus-visible {
  outline: 2px solid var(--em-accent, var(--em-primary)); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .bs-hero-logo { transition: none; }
  .bs-hero-logo:hover { transform: none; }
  .bs-hero-logo:hover::after { animation: none; }
}
.bs-hero-logo img { max-width: 100%; max-height: 58px; object-fit: contain; }
.bs-hero-logo span {
  font-size: var(--em-fs-xs); font-weight: 600; color: var(--em-text-muted);
  text-align: center; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.bs-hero-logo img + span { display: none; }

/* Yan banner satırı */
.bs-hero-bannerlar {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--em-3);
  margin-top: var(--em-5);
}
@media (max-width: 991px) { .bs-hero-bannerlar { grid-template-columns: repeat(2, 1fr); } }
.bs-hero-banner {
  position: relative; display: block;
  border-radius: var(--em-r-md); overflow: hidden;
  aspect-ratio: 16 / 7; background: var(--em-bg-card);
  text-decoration: none;
}
.bs-hero-banner img { width: 100%; height: 100%; object-fit: cover; }
.bs-hero-banner span {
  position: absolute; inset: auto 0 0 0;
  padding: var(--em-3) var(--em-2) var(--em-2);
  background: linear-gradient(transparent, rgba(0, 0, 0, .85));
  color: #fff; font-size: var(--em-fs-sm); font-weight: 600;
}

/* --- VARYANT: genis --- */
.bs-hero-genis { margin: var(--em-4) 0 var(--em-5); }
.bs-hero-noktalar {
  display: flex; justify-content: center; gap: var(--em-2);
  margin-top: var(--em-3);
}
.bs-hero-nokta {
  width: 8px; height: 8px; padding: 0;
  border: 0; border-radius: var(--em-r-daire);
  background: var(--em-border); cursor: pointer;
  transition: background var(--em-hiz) ease-out, width var(--em-hiz) ease-out;
}
.bs-hero-nokta.aktif { background: var(--em-primary); width: 22px; }

@media (max-width: 640px) {
  .bs-hero-slider { aspect-ratio: 16 / 10; }
  .bs-hero-metin b { font-size: var(--em-fs-xl); }
  .bs-hero-sahne { padding-top: var(--em-5); border-radius: 0 0 20px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .bs-hero-slayt, .bs-hero-ok, .bs-hero-logo, .bs-hero-nokta { transition: none; }
}

/* --- VARYANT: yanli — solda slider, sağda iki sabit banner ---
   (atespin düzeni: ~2/1 oran, banner yükseklikleri sliderı ortalar) */
.bs-hero-yanli {
  display: grid; grid-template-columns: 2fr 1fr; gap: var(--em-3);
  margin: var(--em-4) 0 var(--em-5);
}
.bs-hero-yanli.tek { grid-template-columns: 1fr; }
.bs-hero-yanli .bs-hero-slider { aspect-ratio: auto; min-height: 300px; height: 100%; }
.bs-hero-yan { display: grid; grid-template-rows: 1fr 1fr; gap: var(--em-3); }
.bs-hero-yan-kart {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--em-hero-r);
  background: var(--em-bg-card);
}
.bs-hero-yan-kart img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.bs-hero-yan-kart span {
  position: absolute; inset: auto 0 0 0;
  padding: var(--em-3) var(--em-3) var(--em-2);
  background: linear-gradient(transparent, rgba(0, 0, 0, .8));
  color: #fff; font-size: var(--em-fs-md); font-weight: 600;
}
/* Noktalar slider İÇİNDE (atespin: alt orta) */
.bs-hero-noktalar.ic {
  position: absolute; z-index: 3; inset: auto 0 10px 0;
  margin: 0; justify-content: center;
}
@media (max-width: 991px) {
  .bs-hero-yanli { grid-template-columns: 1fr; }
  .bs-hero-yanli .bs-hero-slider { aspect-ratio: 16 / 9; min-height: 0; }
  .bs-hero-yan { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .bs-hero-yan-kart { aspect-ratio: 16 / 7; }
}