/* Bili maskotunun YERLEŞİMİ ve sohbet penceresi (iş emri 2026-09-26-1920 + EK). Maskotun kendisi
   public/assets/maskot/ (maskot.css/.js — Maskot hattının teslimi, DOKUNULMAZ); işaretleme
   app/views/_bili.php, davranış bili.js. Renkler renkler.css'ten.
   - Panel, tanıtım sitesi, anlatım ve test: sağ alt köşede SABİT, 180px, kenarlardan 25px (proje sahibi 2026-09-28/29; önce 224px, 50px).
   - Çalışma ve test ekranları (EK 2): aynı köşe, aynı boyut; sayfa altına boşluk bırakılır. */

.bili { z-index: 55; font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif; }
.bili-dugme {
  display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 24px;
  background: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.bili-dugme > [data-maskot] { display: block; width: 100%; height: 100%; }
/* Önce PNG sonra 3B görünmesin (proje sahibi): PNG yalnız yedek durumunda (bili.js .bili-yedek). */
.bili [data-maskot]:not(.bili-yedek) .maskot__png { visibility: hidden; }
.bili-dugme:focus-visible { outline: 3px solid var(--renk-mor); outline-offset: 2px; }
@media (hover: hover) { .bili-dugme:hover > [data-maskot] { transform: translateY(-2px); transition: transform .18s ease; } }
.bili-gizli { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Hız çizgileri Bili'nin gövde rengine yakın mor (proje sahibi, 2026-09-29: "mavi azcık mora kaysın").
   maskot.css (Maskot hattı) dokunulmadan burada ezilir; ton marka moru + mavi karışımı. */
.bili .maskot__hiz-cizgi { background: color-mix(in srgb, var(--renk-mor) 65%, var(--renk-mavi)); }

/* ---- Sabit köşe (panel, site) ---- */
/* 2026-09-28 proje sahibi: "%20 kadar daha küçült, sağ alta iyice yaklaştır, alttan ve sağdan 50px".
   224px → 180px; kenar uzaklığı 2026-09-29 "%50 azalt": 50 → 25px. Hız çizgileri ve uçuş kutuya oranlı (maskot.js kuruluşta kutu boyunu okur). */
.bili--sabit { position: fixed; right: 25px; bottom: 25px; width: 180px; height: 180px; }
/* Panel: "Kaldığın yer" bandı ortada ve en az 600px; ekran daraldıkça bandın sağ ucu maskotun altına
   girer (~1100px altı). Orada maskot bandın (76px) üstüne çıkar, bandın düğmesini örtmez. */
@media (max-width: 1100px) { .ogrenci-panel .bili--sabit { bottom: calc(var(--op-bosluk, 20px) + 96px); } }
@media (max-width: 600px) { .bili--sabit { width: 134px; height: 134px; right: 10px; bottom: 10px; } .ogrenci-panel .bili--sabit { bottom: 100px; } }

/* ---- Çalışma ve test ekranları (EK 2): panel/site gibi sağ altta sabit. Sayfanın sonunda düğmeler
   (Önceki/Sonraki/Testi bitir) maskotun altında kalmasın diye alta boşluk. Metin sütunu ortalı,
   şıklar solda; maskot kaydırma sırasında kartın sağdaki boş kenarına denk gelir. ---- */
.soru-ekrani:has(> .bili--sabit), .konu-akisi:has(> .bili--sabit), .sonuc-ekrani:has(> .bili--sabit) { padding-bottom: 260px; }

/* ---- Sohbet penceresi: maskotun hemen üstünde, sağa hizalı ---- */
.bili-pencere {
  position: absolute; right: 0; bottom: calc(100% + 10px); width: 320px; max-width: calc(100vw - 32px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--renk-beyaz); border: 1px solid rgba(var(--renk-lacivert-rgb), .10); border-radius: 18px;
  box-shadow: 0 18px 44px rgba(var(--renk-lacivert-rgb), .18); color: var(--renk-lacivert); text-align: left;
}
.bili-pencere[hidden] { display: none; }
.bili-pencere-ust { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 12px 12px 16px; border-bottom: 1px solid rgba(var(--renk-lacivert-rgb), .08); }
.bili-pencere-ust strong { font: 600 15px/1.2 'Outfit', 'Helvetica Neue', Arial, sans-serif; }
.bili-kapat { width: 32px; height: 32px; border: 0; border-radius: 10px; background: none; color: rgba(var(--renk-lacivert-rgb), .6); font-size: 22px; line-height: 1; cursor: pointer; }
.bili-kapat:hover { background: var(--renk-mor-acik); color: var(--renk-mor); }
.bili-kapat:focus-visible { outline: 2px solid var(--renk-mor); outline-offset: 1px; }
.bili-mesajlar { list-style: none; margin: 0; padding: 14px; max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.bili-mesaj { max-width: 85%; padding: 9px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
.bili-mesaj--bili { align-self: flex-start; background: var(--renk-mor-yumusak); color: var(--renk-lacivert); border-bottom-left-radius: 4px; }
.bili-mesaj--sen { align-self: flex-end; background: var(--renk-mor); color: var(--renk-beyaz); border-bottom-right-radius: 4px; }
.bili-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid rgba(var(--renk-lacivert-rgb), .08); margin: 0; }
.bili-form input {
  flex: 1; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid rgba(var(--renk-lacivert-rgb), .16); border-radius: 12px;
  background: var(--renk-beyaz); color: var(--renk-lacivert); font: inherit; font-size: 13.5px;
}
.bili-form input:focus { outline: none; border-color: var(--renk-mor); box-shadow: 0 0 0 3px rgba(var(--renk-mor-rgb), .15); }
.bili-form button {
  flex: none; height: 40px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--renk-mor); color: var(--renk-beyaz);
  font: 600 13.5px 'Inter', sans-serif; cursor: pointer;
}
.bili-form button:hover { background: var(--renk-mor-koyu); }
.bili-form button:focus-visible { outline: 2px solid var(--renk-mor); outline-offset: 2px; }