/* ==========================================================================
   Balcı teması — sayaçlar (balci.css'ten SONRA, her sayfada yüklenir; küçük dosya)
   1. Geri sayım: ana sayfa bandı (.bpb-countdown, parcalar/geri-sayim.php) + ürün sayfası fiyat altı mini kutu
      (.bpb-countdown-mini, urundetay.php — eski sayfa: basic.css yüklü, bu kapsamın kuralları kendi başına tam).
      Beyaz yüzey, 1px kenarlık, gölge/gradient yok. Sayı 24px/600 --bpb-text, etiket 11px --bpb-text-2,
      kutu radius 3. Hareket yok (metin değişimi animasyon sayılmaz → prefers-reduced-motion için ek kural gerekmez).
      Süre dolunca geri-sayim.js .is-ended ekler ve kabı hidden yapar.
   2. Canlı izleyici: online ajanı ekler.
   ========================================================================== */

/* ---------- 1. Geri sayım ---------- */
/* Bölüm boşluğu .bpb-section'dan (24px): hero'nun alt kenarı sıfır dolgulu, band ona yapışmaz. */
.bpb-countdown[hidden], .bpb-countdown-mini[hidden] { display: none; }
.bpb-countdown__box {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--bpb-s5) var(--bpb-s6);
  padding: var(--bpb-s5) var(--bpb-s6);
  background: var(--bpb-surface); border: 1px solid var(--bpb-border);
}
.bpb-countdown__info { display: flex; align-items: center; gap: var(--bpb-s3); flex: 1 1 280px; min-width: 0; }
.bpb-countdown__icon {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 40px; height: 40px; border: 1px solid var(--bpb-border); border-radius: 50%;
  color: var(--bpb-primary); background: var(--bpb-surface);
}
.bpb-countdown__text { min-width: 0; }
.bpb-countdown__desc { margin: var(--bpb-s1) 0 0; font-size: var(--bpb-fs-md); line-height: 20px; color: var(--bpb-text-2); }
.bpb-countdown__timer { flex: 0 0 auto; }
.bpb-countdown__units { display: flex; gap: var(--bpb-s2); }
.bpb-countdown__unit {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 64px; padding: var(--bpb-s2) var(--bpb-s2);
  background: var(--bpb-surface); border: 1px solid var(--bpb-border); border-radius: var(--bpb-radius);
}
.bpb-countdown__num {
  font-size: 24px; font-weight: 600; line-height: 28px; color: var(--bpb-text);
  font-variant-numeric: tabular-nums;
}
.bpb-countdown__label {
  margin-top: var(--bpb-s1); font-size: var(--bpb-fs-xs); line-height: 1.2; color: var(--bpb-text-2);
  text-transform: uppercase; letter-spacing: .04em;
}
.bpb-countdown__noscript { margin: var(--bpb-s2) 0 0; font-size: var(--bpb-fs-sm); line-height: 1.4; color: var(--bpb-text-2); text-align: center; }
.bpb-countdown__cta { flex: 0 0 auto; }

@media (max-width: 991px) {
  .bpb-countdown__info { flex-basis: 100%; }
  .bpb-countdown__timer { flex: 1 1 auto; }
}
@media (max-width: 575px) {
  .bpb-countdown__box { flex-direction: column; align-items: stretch; gap: var(--bpb-s4); padding: var(--bpb-s4); }
  .bpb-countdown__info { align-items: flex-start; }
  .bpb-countdown__units { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bpb-countdown__unit { min-width: 0; padding: var(--bpb-s2) var(--bpb-s1); }
  .bpb-countdown__cta { width: 100%; }
}

/* Ürün sayfası — fiyat kutusunun hemen altı (eski sayfa; kapsam kendi başına tam) */
.bpb-countdown-mini {
  box-sizing: border-box;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--bpb-s2);
  margin: 0 0 var(--bpb-s4); padding: var(--bpb-s3) var(--bpb-s4);
  font-family: var(--bpb-font); font-size: var(--bpb-fs-md); font-weight: 400; line-height: 20px; color: var(--bpb-text-2);
  background: var(--bpb-surface); border: 1px solid var(--bpb-border); border-radius: var(--bpb-radius);
}
.bpb-countdown-mini .bpb-ico { flex: 0 0 auto; width: 18px; height: 18px; color: var(--bpb-primary); display: block; }
.bpb-countdown-mini__text { flex: 1 1 auto; min-width: 0; }
.bpb-countdown-mini__value {
  flex: 0 0 auto; font-weight: 600; color: var(--bpb-text);
  font-variant-numeric: tabular-nums; letter-spacing: .02em; white-space: nowrap;
}

/* ---------- 2. Canlı izleyici ---------- */
/* Ana sayfa: sol altta sabit hap (.bpb-totop'un karşısı; parcalar/footer.php). Ürün sayfası: --inline satırı
   (urundetay.php, fiyat kutusunun üstü — eski sayfa: kapsam kendi başına tam). Sayıyı online.js 30 sn'de bir tazeler.
   Beyaz yüzey, 1px kenarlık, radius 3, --bpb-shadow-float, 12px; yeşil nabız noktası (reduced-motion'da sabit). */
.bpb-online {
  position: fixed; left: 20px; bottom: 20px; z-index: 900;
  display: inline-flex; align-items: center; gap: var(--bpb-s2);
  box-sizing: border-box; max-width: calc(100vw - 80px); height: 32px;
  margin: 0; padding: 0 var(--bpb-s3);
  font-family: var(--bpb-font); font-size: var(--bpb-fs-sm); font-weight: 400; line-height: 1; color: var(--bpb-text-2);
  background: var(--bpb-surface); border: 1px solid var(--bpb-border); border-radius: var(--bpb-radius);
  box-shadow: var(--bpb-shadow-float);
  white-space: nowrap;
}
.bpb-online .bpb-ico { flex: 0 0 auto; width: 16px; height: 16px; color: var(--bpb-text-3); display: block; }
.bpb-online__sayi { font-weight: 600; color: var(--bpb-text); font-variant-numeric: tabular-nums; }
.bpb-online__dot {
  position: relative; flex: 0 0 auto;
  width: 8px; height: 8px; border-radius: 50%; background: var(--bpb-success);
}
.bpb-online__dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--bpb-success);
  opacity: .5; animation: bpb-online-pulse 1.8s var(--bpb-ease) infinite;
}
@keyframes bpb-online-pulse {
  0%   { transform: scale(1);   opacity: .5; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* Ürün sayfası — akış içi satır (fiyat kutusunun üstü) */
.bpb-online--inline {
  position: static; z-index: auto;
  height: auto; max-width: none;
  margin: 0 0 var(--bpb-s3); padding: var(--bpb-s1) 0;
  line-height: 20px; box-shadow: none; border: 0; background: transparent;
  white-space: normal;
}

@media (max-width: 767px) {
  .bpb-footer.has-mobnav ~ .bpb-online { bottom: calc(56px + var(--bpb-s4) + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .bpb-online__dot::after { animation: none; display: none; }
}
@media print {
  .bpb-online { display: none !important; }
}