/* ==========================================================================
   Balcı teması — func/ çıktılarının tema diline giydirilmesi (eklentiler)
   Kapsam: func/mini_sepet.php (mini sepet çekmecesi), func/sanscarki.php (şans çarkı),
           func/musterihizmetleri.php (canlı destek robotu + resim tabanlı 'ari' marka maskotu), func/fonksiyon.php bpLanguageFlag().
   Bu dosyalar kendi <style> bloklarını body içinde basar; func dosyalarına dokunulmaz
   (güncelleme güvenli). Kural: seçiciler kök id ile (#bpmcBg, #bpCarkOverlay, #bpaWrap)
   yazılır → kaynak sırası ne olursa olsun func'ın sınıf seçicilerini ezer; !important
   yalnız func'ın kendi !important'ına karşı. Renk/boşluk/radius token'lardan (balci.css).
   Font Awesome yok: <i class="fa …"> gizlenir, ::before + CSS maske ile ikon çizilir.
   Yükleme: parcalar/head.php, footer.css'ten sonra (her sayfa).
   ========================================================================== */

/* ---------- 0. Dil bayrağı (bpLanguageFlag: inline style yerine sınıf) ---------- */
.bp-lang-flag { display: inline-block; flex: 0 0 auto; vertical-align: middle; border-radius: 2px; }

/* ---------- 1. Mini sepet çekmecesi (#bpmcBg) ---------- */
#bpmcBg.bpmc-bg { background: var(--bpb-overlay); }
#bpmcBg .bpmc-panel {
  font-family: var(--bpb-font); font-size: var(--bpb-fs-md); color: var(--bpb-text-2);
  background: var(--bpb-surface); border-left: 1px solid var(--bpb-border);
}
#bpmcBg .bpmc-head { padding: var(--bpb-s4) var(--bpb-s5); border-bottom: 1px solid var(--bpb-border); }
#bpmcBg .bpmc-head b { font-size: var(--bpb-fs-xl); font-weight: 600; color: var(--bpb-text); }
#bpmcBg .bpmc-head b span { font-size: var(--bpb-fs-md); font-weight: 400; color: var(--bpb-text-3); }
#bpmcBg .bpmc-x {
  width: 32px; height: 32px; border: 1px solid var(--bpb-border); border-radius: var(--bpb-radius);
  background: var(--bpb-surface); color: var(--bpb-text-2); font-size: 20px;
  transition: border-color var(--bpb-dur), color var(--bpb-dur);
}
#bpmcBg .bpmc-x:hover { border-color: var(--bpb-primary); color: var(--bpb-primary); }

/* Ücretsiz kargo şeridi */
#bpmcBg .bpmc-ship { padding: var(--bpb-s3) var(--bpb-s5); background: var(--bpb-bg); border-bottom: 1px solid var(--bpb-border); }
#bpmcBg .bpmc-ship .t { font-size: var(--bpb-fs-sm); color: var(--bpb-text-2); margin-bottom: var(--bpb-s2); gap: var(--bpb-s2); }
#bpmcBg .bpmc-ship .t b { color: var(--bpb-primary); font-weight: 600; }
#bpmcBg .bpmc-ship.free .t, #bpmcBg .bpmc-ship.free .t b { color: var(--bpb-success); }
#bpmcBg .bpmc-bar { height: 4px; border-radius: 0; background: var(--bpb-border); }
#bpmcBg .bpmc-bar span { background: var(--bpb-primary); border-radius: 0; }
#bpmcBg .bpmc-ship.free .bpmc-bar span { background: var(--bpb-success); }

/* Ürün satırları */
#bpmcBg .bpmc-items { padding: 0 var(--bpb-s5); }
#bpmcBg .bpmc-item { gap: var(--bpb-s3); padding: var(--bpb-s3) 0; border-bottom: 1px solid var(--bpb-border); }
#bpmcBg .bpmc-item.yeni { background: var(--bpb-primary-soft); margin: 0 calc(-1 * var(--bpb-s5)); padding: var(--bpb-s3) var(--bpb-s5); }
#bpmcBg .bpmc-img { border-radius: 0; border: 1px solid var(--bpb-border); background: var(--bpb-surface); }
#bpmcBg .bpmc-i b { font-size: var(--bpb-fs-md); font-weight: 600; color: var(--bpb-text); }
#bpmcBg .bpmc-v { font-size: var(--bpb-fs-xs); color: var(--bpb-text-3); }
#bpmcBg .bpmc-new {
  font-size: var(--bpb-fs-xs); font-weight: 600; color: var(--bpb-primary);
  background: var(--bpb-surface); border: 1px solid var(--bpb-primary); border-radius: var(--bpb-radius); padding: 1px var(--bpb-s2);
}
#bpmcBg .bpmc-r { gap: var(--bpb-s2); }
#bpmcBg .bpmc-prc { font-size: var(--bpb-fs-md); font-weight: 600; color: var(--bpb-text); }
#bpmcBg .bpmc-qty { border: 1px solid var(--bpb-border); border-radius: var(--bpb-radius); background: var(--bpb-surface); }
#bpmcBg .bpmc-qty button {
  width: 32px; height: 32px; background: var(--bpb-surface); color: var(--bpb-text-2); font-size: var(--bpb-fs-lg);
  transition: background var(--bpb-dur), color var(--bpb-dur);
}
#bpmcBg .bpmc-qty button:hover { background: var(--bpb-bg); color: var(--bpb-primary); }
#bpmcBg .bpmc-n { min-width: 32px; font-size: var(--bpb-fs-md); font-weight: 600; color: var(--bpb-text); }
#bpmcBg .bpmc-del {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0;
  color: var(--bpb-text-3); transition: color var(--bpb-dur);
}
#bpmcBg .bpmc-del:hover { color: var(--bpb-danger); }
#bpmcBg .bpmc-empty { padding: var(--bpb-s9) var(--bpb-s5); color: var(--bpb-text-3); font-size: var(--bpb-fs-md); }

/* Alt özet + butonlar */
#bpmcBg .bpmc-foot { padding: var(--bpb-s4) var(--bpb-s5); border-top: 1px solid var(--bpb-border); }
#bpmcBg .bpmc-line { font-size: var(--bpb-fs-md); color: var(--bpb-text-2); margin-bottom: var(--bpb-s2); }
#bpmcBg .bpmc-line b { font-weight: 600; color: var(--bpb-text); }
#bpmcBg .bpmc-line.free b { color: var(--bpb-success); }
#bpmcBg .bpmc-tot {
  margin: var(--bpb-s3) 0 var(--bpb-s4); padding-top: var(--bpb-s3);
  border-top: 1px solid var(--bpb-border); font-size: var(--bpb-fs-lg); color: var(--bpb-text);
}
#bpmcBg .bpmc-tot b { font-size: var(--bpb-fs-title); font-weight: 600; color: var(--bpb-primary); }
#bpmcBg .bpmc-btns { gap: var(--bpb-s2); }
#bpmcBg .bpmc-btn {
  height: 40px; border-radius: var(--bpb-radius); font-size: var(--bpb-fs-md); font-weight: 600;
  transition: background var(--bpb-dur), color var(--bpb-dur), border-color var(--bpb-dur);
}
#bpmcBg .bpmc-btn.g { border: 1px solid var(--bpb-border); background: var(--bpb-surface); color: var(--bpb-text); }
#bpmcBg .bpmc-btn.g:hover { border-color: var(--bpb-primary); color: var(--bpb-primary); }
#bpmcBg .bpmc-btn.o { border: 1px solid var(--bpb-button); background: var(--bpb-button); color: #fff; text-transform: uppercase; }
#bpmcBg .bpmc-btn.o:hover { background: var(--bpb-primary-hover); border-color: var(--bpb-primary-hover); color: #fff; }

/* Font Awesome yerine maske ikonlar (kamyon / çöp / sepet) */
#bpmcBg .fa { display: none; }
#bpmcBg .bpmc-ship .t::before, #bpmcBg .bpmc-del::before, #bpmcBg .bpmc-empty::before {
  content: ""; display: block; flex: 0 0 auto; background: currentColor;
}
#bpmcBg .bpmc-ship .t::before {
  width: 16px; height: 16px; color: var(--bpb-primary);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6h11v10H3zM14 10h4l3 3v3h-7z'/><circle cx='7' cy='18' r='2'/><circle cx='17' cy='18' r='2'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6h11v10H3zM14 10h4l3 3v3h-7z'/><circle cx='7' cy='18' r='2'/><circle cx='17' cy='18' r='2'/></svg>") center / contain no-repeat;
}
#bpmcBg .bpmc-ship.free .t::before { color: var(--bpb-success); }
#bpmcBg .bpmc-del::before {
  width: 16px; height: 16px;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3'/></svg>") center / contain no-repeat;
}
#bpmcBg .bpmc-empty::before {
  width: 40px; height: 40px; margin: 0 auto var(--bpb-s3); opacity: .5;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='20' r='1'/><circle cx='18' cy='20' r='1'/><path d='M2 3h3l2.7 12.4a1 1 0 0 0 1 .8h9.7a1 1 0 0 0 1-.8L21 7H6'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='20' r='1'/><circle cx='18' cy='20' r='1'/><path d='M2 3h3l2.7 12.4a1 1 0 0 0 1 .8h9.7a1 1 0 0 0 1-.8L21 7H6'/></svg>") center / contain no-repeat;
}

/* ---------- 2. Şans çarkı (#bpCarkOverlay) — petek/arı teması ---------- */
/* func/sanscarki.php: .bp-cark-ov > .bp-cark-box > .bp-cark-wheelwrap (.bp-cark-pointer svg, svg#bpCarkSvg, .bp-cark-hub).
   Kutu zemini düşük kontrastlı altıgen petek deseni (inline SVG döşeme, 56×100 altıgen kafes), üstte altın şerit;
   çarkın arkasında altıgen altın çerçeve (.bp-cark-wheelwrap::before — dönen svg'ye clip-path uygulanmaz, yuvarlak döner);
   hub'da arı maskotu (resimler/tema/maskot-ari.png; görsel yoksa krem daire kalır). Renk/boşluk token'lardan. */
#bpCarkOverlay.bp-cark-ov { background: var(--bpb-overlay); font-family: var(--bpb-font); overflow-y: auto; }
#bpCarkOverlay .bp-cark-box {
  margin: auto; border-radius: 0; color: var(--bpb-text);
  padding: var(--bpb-s7) var(--bpb-s6) var(--bpb-s6);
  border: 1px solid var(--bpb-border); border-top: 4px solid var(--bpb-primary);
  box-shadow: var(--bpb-shadow-float);
  background-color: var(--bpb-surface);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'><g fill='none' stroke='%23d29614' stroke-opacity='.14' stroke-width='1.5'><path d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100'/></g></svg>");
  background-size: 56px 100px; background-position: center top; background-repeat: repeat;
}
#bpCarkOverlay .bp-cark-x {
  border-radius: 50%; color: var(--bpb-text-2); background: var(--bpb-surface);
  transition: background var(--bpb-dur), color var(--bpb-dur);
}
#bpCarkOverlay .bp-cark-x:hover { background: var(--bpb-primary-soft); color: var(--bpb-brown); }
#bpCarkOverlay .bp-cark-x:focus-visible, #bpCarkOverlay .bp-cark-spin:focus-visible, #bpCarkOverlay .bp-cark-code button:focus-visible {
  outline: 2px solid var(--bpb-brown); outline-offset: 2px;
}

/* Çark kabı + altıgen çerçeve (petek gözü). ::before dönmez; svg üstte (z-index 1), hub 2, gösterge 4 (func). */
#bpCarkOverlay .bp-cark-wheelwrap { margin: var(--bpb-s3) auto var(--bpb-s6); }
#bpCarkOverlay .bp-cark-wheelwrap::before {
  content: ""; position: absolute; inset: -22px; z-index: 0;
  background: linear-gradient(160deg, var(--bpb-hero-btn) 0%, var(--bpb-primary) 48%, var(--bpb-primary-hover) 100%);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
#bpCarkOverlay .bp-cark-svg { position: relative; z-index: 1; }

/* Gösterge: bal damlası (func'taki damla yolu) — kahve gövde, altın çekirdek */
#bpCarkOverlay .bp-cark-pointer svg { fill: var(--bpb-brown); filter: drop-shadow(0 2px 2px rgba(92, 59, 0, .35)); }
#bpCarkOverlay .bp-cark-pointer svg .ic { fill: var(--bpb-hero-btn); }

/* Hub: arı maskotu; görsel yüklenmezse krem daire */
#bpCarkOverlay .bp-cark-hub {
  background: var(--bpb-primary-soft) url("../../../resimler/tema/maskot-ari.png") center / 74% no-repeat;
  border: 3px solid var(--bpb-primary); box-shadow: 0 0 0 4px var(--bpb-surface);
}

/* Dilimler: bal paleti 6'lı döngü — altın / kahve / açık altın / koyu altın / krem / kahve.
   Açık zeminde koyu metin (#212121, ≥4.5:1), kahve zeminde beyaz; krem zeminde kahve metin.
   SVG fill öznitelikleri CSS fill'e yenik düşer; JS'e dokunulmaz. */
#bpCarkSvg > circle:first-of-type { fill: var(--bpb-primary-soft); stroke: var(--bpb-primary); stroke-width: 1.5; }
#bpCarkSvg > circle:not(:first-of-type) { fill: var(--bpb-primary); }  /* dilim sınır noktaları: bal damlacıkları */
#bpCarkSvg path { fill: var(--bpb-primary); }
#bpCarkSvg path:nth-of-type(6n+2), #bpCarkSvg path:nth-of-type(6n+6) { fill: var(--bpb-brown); }
#bpCarkSvg path:nth-of-type(6n+3) { fill: var(--bpb-hero-btn); }
#bpCarkSvg path:nth-of-type(6n+4) { fill: var(--bpb-primary-hover); }
#bpCarkSvg path:nth-of-type(6n+5) { fill: var(--bpb-primary-soft); }
#bpCarkSvg path:nth-of-type(6n+1):not(:first-of-type):last-of-type { fill: var(--bpb-primary-hover); } /* 7/13 dilimde ilkle bitişik aynı renge düşmesin */
#bpCarkSvg text { fill: var(--bpb-text); font-family: var(--bpb-font); }
#bpCarkSvg text:nth-of-type(6n+2), #bpCarkSvg text:nth-of-type(6n+6) { fill: #fff; }
#bpCarkSvg text:nth-of-type(6n+5) { fill: var(--bpb-brown); }

/* Metin + düğme */
#bpCarkOverlay .bp-cark-title {
  font-family: var(--bpb-font-display); font-weight: 400; font-size: 28px; line-height: 1.2; letter-spacing: 0;
  color: var(--bpb-brown); margin-bottom: var(--bpb-s2); max-width: none;
}
#bpCarkOverlay .bp-cark-sub { font-size: var(--bpb-fs-md); color: var(--bpb-text-2); margin-bottom: var(--bpb-s5); }
#bpCarkOverlay .bp-cark-spin {
  height: 48px; padding: 0 var(--bpb-s7); border: 1px solid var(--bpb-primary); border-radius: var(--bpb-radius);
  background: var(--bpb-primary); color: var(--bpb-text); font-size: var(--bpb-fs-lg); font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  transition: background var(--bpb-dur), border-color var(--bpb-dur);
}
#bpCarkOverlay .bp-cark-spin:hover { background: var(--bpb-primary-hover); border-color: var(--bpb-primary-hover); color: var(--bpb-text); opacity: 1; }
#bpCarkOverlay .bp-cark-spin:disabled { background: var(--bpb-primary-soft); border-color: var(--bpb-border); color: var(--bpb-text-3); }
#bpCarkOverlay .bp-cark-result { border-radius: 0; border: 1px solid var(--bpb-hero-btn); background: var(--bpb-primary-soft); font-size: var(--bpb-fs-md); color: var(--bpb-text-2); }
#bpCarkOverlay .bp-cark-result .rw { font-size: var(--bpb-fs-xl); font-weight: 600; color: var(--bpb-brown); }
#bpCarkOverlay .bp-cark-code { border: 1px dashed var(--bpb-primary); border-radius: var(--bpb-radius); background: var(--bpb-surface); color: var(--bpb-text); }
#bpCarkOverlay .bp-cark-code button {
  height: 32px; padding: 0 var(--bpb-s3); border-radius: var(--bpb-radius); background: var(--bpb-brown); color: #fff;
  font-size: var(--bpb-fs-sm); font-weight: 600; letter-spacing: 0; transition: background var(--bpb-dur);
}
#bpCarkOverlay .bp-cark-code button:hover { background: var(--bpb-hero-text); opacity: 1; }

/* Dar ekran: çark 240px, kutu 16px kenar; altıgen çerçeve orantılı küçülür (yatay kaydırma yok) */
@media (max-width: 400px) {
  #bpCarkOverlay .bp-cark-box { padding: var(--bpb-s6) var(--bpb-s4) var(--bpb-s5); }
  #bpCarkOverlay .bp-cark-title { font-size: 24px; }
}
@media (max-width: 360px) {
  #bpCarkOverlay.bp-cark-ov { padding: var(--bpb-s4); }
  #bpCarkOverlay .bp-cark-wheelwrap, #bpCarkOverlay .bp-cark-svg { width: 240px; height: 240px; }
  #bpCarkOverlay .bp-cark-wheelwrap::before { inset: -18px; }
  #bpCarkOverlay .bp-cark-hub { width: 72px; height: 72px; }
}

/* ---------- 3. Canlı destek robotu (#bpaWrap) ---------- */
/* Karakter/renk panelden (--bpa) — özellik kalır; balon, panel, form ve köşeler tema diline çekilir. */
#bpaWrap.bpa-wrap { right: var(--bpb-s4); bottom: var(--bpb-s4); font-family: var(--bpb-font); }
#bpaWrap.bpa-wrap.bpa-sol { right: auto; left: var(--bpb-s4); }
#bpaWrap .bpa-fab .bpa-bot { filter: none; }
#bpaWrap .bpa-golge { background: var(--bpb-overlay); opacity: .3; }
#bpaWrap .bpa-dot { background: var(--bpb-danger); box-shadow: 0 0 0 2px var(--bpb-surface); }
#bpaWrap .bpa-bubble, #bpaWrap.bpa-sol .bpa-bubble {
  border-radius: var(--bpb-radius); border-color: var(--bpb-border); box-shadow: var(--bpb-shadow-menu);
  font-size: var(--bpb-fs-md); color: var(--bpb-text);
}
#bpaWrap .bpa-bubble .x { color: var(--bpb-text-3); }
#bpaWrap .bpa-panel { border-radius: 0; border-color: var(--bpb-border); box-shadow: var(--bpb-shadow-menu); }
#bpaWrap .bpa-head { background: var(--bpa, var(--bpb-brown)); padding: var(--bpb-s3) var(--bpb-s4); }
#bpaWrap .bpa-head .t b { font-size: var(--bpb-fs-lg); font-weight: 600; }
#bpaWrap .bpa-head .t span { font-size: var(--bpb-fs-xs); }
#bpaWrap .bpa-head .t span i { box-shadow: none; }
#bpaWrap .bpa-hbtn { border-radius: var(--bpb-radius); }
#bpaWrap .bpa-noti { background: var(--bpb-surface); border-bottom-color: var(--bpb-border); }
#bpaWrap .bpa-ni { border-bottom-color: var(--bpb-border); }
#bpaWrap .bpa-ni:hover { background: var(--bpb-bg); }
#bpaWrap .bpa-ni b { font-size: var(--bpb-fs-md); color: var(--bpb-text); }
#bpaWrap .bpa-ni span, #bpaWrap .bpa-ni-bos { font-size: var(--bpb-fs-sm); color: var(--bpb-text-2); }
#bpaWrap .bpa-msgs { background: var(--bpb-bg); padding: var(--bpb-s4); gap: var(--bpb-s2); }
#bpaWrap .bpa-m { border-radius: var(--bpb-radius); border-color: var(--bpb-border); font-size: var(--bpb-fs-md); color: var(--bpb-text); }
#bpaWrap .bpa-m.me { border-radius: var(--bpb-radius); }
#bpaWrap .bpa-m .who { font-size: var(--bpb-fs-xs); }
#bpaWrap .bpa-typing { border-radius: var(--bpb-radius); border-color: var(--bpb-border); }
#bpaWrap .bpa-typing i { background: var(--bpb-text-3); }
#bpaWrap .bpa-form { padding: var(--bpb-s3) var(--bpb-s3); border-top-color: var(--bpb-border); gap: var(--bpb-s2); }
#bpaWrap .bpa-form input {
  height: 40px; padding: 0 var(--bpb-s3); border: 1px solid var(--bpb-border); border-radius: var(--bpb-radius);
  font-size: var(--bpb-fs-md); color: var(--bpb-text); background: var(--bpb-surface);
}
#bpaWrap .bpa-form input:focus { border-color: var(--bpb-primary); }
#bpaWrap .bpa-form button { border-radius: var(--bpb-radius); transition: opacity var(--bpb-dur); }
#bpaWrap .bpa-form button:hover { transform: none; opacity: .9; }
#bpaWrap .bpa-alt { font-size: var(--bpb-fs-xs); color: var(--bpb-text-3); padding: var(--bpb-s2) var(--bpb-s3) var(--bpb-s3); }
#bpaWrap .bpa-drag-bubble, #bpaWrap.bpa-sol .bpa-drag-bubble {
  border-radius: var(--bpb-radius); border-color: var(--bpb-border); box-shadow: var(--bpb-shadow-menu);
  font-size: var(--bpb-fs-sm); color: var(--bpb-text);
}

/* 3b. Resim tabanlı marka maskotu — karakter 'ari' (func/asistan_karakterler.php: .bpa-wrap--img kabuk, .bpa-bot--img <img>).
   88px kare, gölge yok, hover'da 4px yukarı; balonlar altın (--bpb-primary) kenar + açık altın zemin + kahve metin,
   dolu yüzeyler (panel başlığı, kullanıcı mesajı, gönder) kahve — beyaz metin kontrastı için altın zemin kullanılmaz.
   Widget JS'in .bpa-bot'a eklediği emo-* sınıfları SVG iç parçalarını (.bpa-body) hedefler; img için kısa zıplama/sallanma. */
#bpaWrap.bpa-wrap--img .bpa-fab { width: 88px; height: 88px; }
#bpaWrap.bpa-wrap--img .bpa-fab .bpa-bot--img {
  display: block; width: 88px; height: 88px; object-fit: contain; filter: none;
  pointer-events: none; -webkit-user-drag: none; user-select: none; /* sürükleme düğmede (pointer events); yerel <img> sürüklemesi pointercancel üretmesin */
  animation: bpb-maskot-ucus 3.8s var(--bpb-ease) infinite; /* boşta: arı gibi hafif süzülme (SVG robotların bpaBreathe karşılığı) */
  transition: filter var(--bpb-dur) var(--bpb-ease);
}
#bpaWrap.bpa-wrap--img .bpa-fab:hover .bpa-bot--img { filter: drop-shadow(0 6px 10px rgba(210, 150, 20, .35)); }
#bpaWrap.bpa-wrap--img.bpa-dragging .bpa-fab .bpa-bot--img { animation-play-state: paused; }
#bpaWrap.bpa-wrap--img .bpa-golge { display: none; }
#bpaWrap .bpa-head .bpa-bot--img.bpa-mini {
  width: 44px; height: 44px; padding: 2px; object-fit: contain;
  background: var(--bpb-surface); border-radius: 50%;
}
#bpaWrap.bpa-wrap--img .bpa-bubble, #bpaWrap.bpa-wrap--img.bpa-sol .bpa-bubble,
#bpaWrap.bpa-wrap--img .bpa-drag-bubble, #bpaWrap.bpa-wrap--img.bpa-sol .bpa-drag-bubble {
  background: var(--bpb-primary-soft); border-color: var(--bpb-primary); color: var(--bpb-brown);
}
#bpaWrap.bpa-wrap--img .bpa-bubble .x { color: var(--bpb-brown); }
#bpaWrap.bpa-wrap--img .bpa-head { background: var(--bpb-brown); }
#bpaWrap.bpa-wrap--img .bpa-m.me { background: var(--bpb-brown); border-color: var(--bpb-brown); }
#bpaWrap.bpa-wrap--img .bpa-m .who { color: var(--bpb-brown); }
#bpaWrap.bpa-wrap--img .bpa-form button { background: var(--bpb-brown); }
#bpaWrap.bpa-wrap--img .bpa-form input:focus { border-color: var(--bpb-primary); }
/* Duygular: JS .bpa-bot'a emo-* ekler; özgüllük boşta-animasyon kuralından yüksek (id + 3 sınıf + sınıf) olmalı */
#bpaWrap.bpa-wrap--img .bpa-fab .bpa-bot--img.emo-wave, #bpaWrap.bpa-wrap--img .bpa-fab .bpa-bot--img.emo-happy,
#bpaWrap.bpa-wrap--img .bpa-fab .bpa-bot--img.emo-excited, #bpaWrap.bpa-wrap--img .bpa-fab .bpa-bot--img.emo-nod { animation: bpb-maskot-zipla .8s var(--bpb-ease); }
#bpaWrap.bpa-wrap--img .bpa-fab .bpa-bot--img.emo-spin, #bpaWrap.bpa-wrap--img .bpa-fab .bpa-bot--img.emo-think,
#bpaWrap.bpa-wrap--img .bpa-fab .bpa-bot--img.emo-sad { animation: bpb-maskot-salla .9s var(--bpb-ease); }
@keyframes bpb-maskot-ucus { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-6px) rotate(-2deg); } 65% { transform: translateY(-2px) rotate(2deg); } }
@keyframes bpb-maskot-zipla { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-10px); } 60% { transform: translateY(-3px); } }
@keyframes bpb-maskot-salla { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } }
@media (max-width: 575px) {
  #bpaWrap.bpa-wrap--img .bpa-fab, #bpaWrap.bpa-wrap--img .bpa-fab .bpa-bot--img { width: 72px; height: 72px; }
}

/* Sabit köşe trafiği: robot sağ altta → "yukarı çık" robotun üstüne; robot soldaysa canlı izleyici hapı yukarı, push kartı sağa. */
body:has(#bpaWrap.bpa-wrap:not(.bpa-sol)) .bpb-totop { bottom: calc(var(--bpb-s5) + 104px + var(--bpb-s3)); }
body:has(#bpaWrap.bpa-wrap--img:not(.bpa-sol)) .bpb-totop { bottom: calc(var(--bpb-s5) + 88px + var(--bpb-s3)); }
body:has(#bpaWrap.bpa-wrap.bpa-sol) .bpb-online { bottom: calc(var(--bpb-s5) + 104px + var(--bpb-s3)); }
body:has(#bpaWrap.bpa-wrap.bpa-sol) .bpb-push { left: auto; right: var(--bpb-s4); }
@media (max-width: 767px) {
  .bpb-footer.has-mobnav ~ #bpaWrap.bpa-wrap { bottom: calc(56px + var(--bpb-s4) + env(safe-area-inset-bottom, 0px)); }
  body:has(#bpaWrap.bpa-wrap:not(.bpa-sol)) .bpb-footer.has-mobnav ~ .bpb-totop { bottom: calc(56px + var(--bpb-s4) + 88px + var(--bpb-s3) + env(safe-area-inset-bottom, 0px)); }
  body:has(#bpaWrap.bpa-wrap.bpa-sol) .bpb-footer.has-mobnav ~ .bpb-online { bottom: calc(56px + var(--bpb-s4) + 88px + var(--bpb-s3) + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- 4. Hareket ---------- */
@media (prefers-reduced-motion: reduce) {
  #bpmcBg.bpmc-bg, #bpmcBg .bpmc-panel, #bpmcBg .bpmc-bar span { transition: none; }
  #bpCarkOverlay.bp-cark-ov.open, #bpaWrap .bpa-panel.open, #bpaWrap .bpa-bubble, #bpaWrap .bpa-m { animation: none; }
  #bpCarkOverlay #bpCarkSvg.bp-cark-svg.spinning { transition: transform .6s ease; } /* çark: uzun dönüş yerine kısa geçiş */
  #bpCarkOverlay .bp-cark-x, #bpCarkOverlay .bp-cark-spin, #bpCarkOverlay .bp-cark-code button { transition: none; }
  #bpaWrap.bpa-wrap--img .bpa-fab .bpa-bot--img, #bpaWrap.bpa-wrap--img .bpa-fab:hover .bpa-bot--img,
  #bpaWrap.bpa-wrap--img .bpa-fab .bpa-bot--img[class*="emo-"] { animation: none; transition: none; transform: none; filter: none; }
}