/* feraiz-bot.css — Ferâiz asistanı. Yalnız /feraiz sayfasında yüklenir.
   Site paleti (sabit hex; global --text/--bg KULLANILMAZ: site daima açık temalı). */

#fb-kok, #fb-panel { box-sizing: border-box; }
#fb-kok *, #fb-panel * { box-sizing: border-box; font-family: 'Source Sans 3', 'Segoe UI', sans-serif; }

/* ⚠️ Site geneli mobile.css panelin İÇİNDEKİ düğmeleri de eziyordu:
     @media (max-width:480px)                  → .btn, button { width: 100% }
     @media (hover:none) and (pointer:coarse)  → button { min-width:44px; padding:.625rem 1rem }
   Sonuç (2026-07-26, kullanıcı bildirdi): hızlı-cevap çipleri tam genişliğe gerilip
   6 tanesi panelin yarısını yedi ve mesaj akışına 145px kaldı; başlık/gönder düğmeleri
   32-40px yerine 48px oldu, başlık şişti. Panel içinde tabanı sıfırla — ölçüler
   aşağıdaki kendi kurallarından gelsin. */
#fb-panel button { min-width: 0; min-height: 0; }
/* #fb-panel öneki şart: gönder düğmesi <button type="submit"> ve site genelindeki
   `button[type="submit"]{padding:10px 24px}` (0-0-1-1) düz `.fb-gonder`'den (0-0-1-0)
   daha spesifik — border-box'ta 48px padding, 40px genişliği 48'e şişiriyordu. */
#fb-panel .fb-yeni, #fb-panel .fb-kapat, #fb-panel .fb-gonder { padding: 0; }

/* ── Yüzen düğme ──
   width/height AÇIKÇA verilir. Sebep: site geneli mobile.css'te
   `@media (max-width:480px){ .btn, button { width:100% } }` var ve #fb-balon bir
   <button> olduğu için tam genişliğe geriliyordu (ekranın altını kaplayıp hesap
   formunu örtüyordu). ID seçici element seçiciden spesifik → !important gerekmez. */
#fb-balon {
  position: fixed; right: 22px; z-index: 2147483000;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  width: auto; max-width: none;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 18px 11px 14px; border: 0; border-radius: 999px;
  background: linear-gradient(135deg, #C27C36, #B87333 55%, #7C4A22);
  color: #fdf8f0; font: 600 14.5px/1 'Source Sans 3', sans-serif; cursor: pointer;
  box-shadow: 0 10px 28px -10px rgba(90, 60, 20, .55);
}
#fb-balon:hover { filter: brightness(1.05); }
#fb-balon svg { width: 20px; height: 20px; }

/* ── Panel ── */
#fb-panel {
  position: fixed; right: 22px; bottom: 22px; z-index: 2147483001;
  width: 392px; max-width: calc(100vw - 32px);
  height: 620px; max-height: calc(100dvh - 44px);
  display: none; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid #e8dfd2; border-radius: 18px;
  box-shadow: 0 24px 70px -12px rgba(58, 40, 20, .3), 0 8px 24px -8px rgba(58, 40, 20, .16);
  animation: fb-ac .24s cubic-bezier(.2, .9, .25, 1);
}
#fb-panel.fb-acik { display: flex; }
@keyframes fb-ac { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #fb-panel { animation: none; } }

.fb-bas {
  display: flex; align-items: center; gap: 11px; padding: 13px 14px; flex: 0 0 auto;
  background: linear-gradient(135deg, #C27C36, #B87333 55%, #7C4A22); color: #fdf8f0;
}
.fb-bas-ikon { width: 31px; height: 31px; flex: 0 0 auto; display: grid; place-items: center;
  background: rgba(46, 26, 10, .22); border-radius: 10px; }
.fb-bas-ikon svg { width: 19px; height: 19px; }
.fb-bas-metin { flex: 1 1 auto; min-width: 0; }
.fb-bas-ad { font-weight: 700; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-bas-alt { font-size: 11.5px; opacity: .88; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-yeni, .fb-kapat {
  width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center;
  border: 0; border-radius: 9px; background: rgba(255, 255, 255, .14);
  color: #fdf8f0; cursor: pointer;
}
.fb-yeni:hover, .fb-kapat:hover { background: rgba(255, 255, 255, .26); }
.fb-yeni svg, .fb-kapat svg { width: 16px; height: 16px; }

/* ── Akış ── */
.fb-akis { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
  padding: 14px 13px; background: #fdfaf4; }
.fb-mesaj { margin-bottom: 11px; max-width: 92%; }
.fb-kul { margin-left: auto; background: #B87333; color: #fdf8f0;
  padding: 9px 13px; border-radius: 14px 14px 4px 14px; font-size: 14px; line-height: 1.55; width: fit-content; }
.fb-bot { background: #fff; border: 1px solid #ece2d2; border-radius: 14px 14px 14px 4px; padding: 11px 13px; }
.fb-metin { font-size: 14px; line-height: 1.65; color: #33291e; }
/* Uzun kesintisiz metin (URL, uzun terim) baloncuğu yırtmasın */
.fb-metin, .fb-kul { overflow-wrap: anywhere; }

.fb-bekle { display: flex; gap: 5px; padding: 3px 0; }
.fb-bekle span { width: 7px; height: 7px; border-radius: 50%; background: #d9b98c; animation: fb-zipla 1s infinite; }
.fb-bekle span:nth-child(2) { animation-delay: .15s; }
.fb-bekle span:nth-child(3) { animation-delay: .3s; }
@keyframes fb-zipla { 0%, 60%, 100% { transform: none; opacity: .55; } 30% { transform: translateY(-5px); opacity: 1; } }

/* ── Pay tablosu ── */
.fb-tablo-sar { overflow-x: auto; margin: 10px 0 4px; }
.fb-tablo { width: 100%; border-collapse: collapse; font-size: 13px; }
.fb-tablo th { text-align: left; font-weight: 700; color: #8a6414; font-size: 11.5px;
  letter-spacing: .04em; text-transform: uppercase; padding: 0 8px 6px 0; border-bottom: 1px solid #ece2d2; }
.fb-tablo td { padding: 7px 8px 7px 0; border-bottom: 1px solid #f4ece0; color: #43372a; }
.fb-tablo tr:last-child td { border-bottom: 0; }
.fb-adet { color: #a2937e; font-size: 12px; }
.fb-tashih { font-size: 12px; color: #8a7a66; margin-top: 4px; }

/* ── Çözüm akordeonu (sayfayla ortak HTML) ── */
.fb-cozum { margin-top: 10px; border: 1px solid #ece2d2; border-radius: 10px; background: #fdfaf4; }
.fb-cozum > summary { cursor: pointer; padding: 9px 12px; font-size: 13px; font-weight: 600; color: #7C4A22; }
.fb-cozum[open] > summary { border-bottom: 1px solid #ece2d2; }
.fb-cozum-govde { padding: 10px 12px; font-size: 13px; line-height: 1.7; color: #43372a; overflow-x: auto; }
.fb-cozum-govde table { border-collapse: collapse; font-size: 12.5px; }
.fb-cozum-govde td, .fb-cozum-govde th { border: 1px solid #ece2d2; padding: 4px 7px; }

.fb-ihtar { margin-top: 9px; font-size: 11.5px; line-height: 1.5; color: #8a7a66;
  border-top: 1px dashed #ece2d2; padding-top: 7px; }

.fb-eylemler { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.fb-eylem { display: inline-flex; align-items: center; text-decoration: none; min-height: 40px;
  background: #B87333; color: #fdf8f0; border-radius: 9px; padding: 9px 14px; font-size: 13px; font-weight: 600; }
.fb-eylem:hover { background: #7C4A22; }
.fb-ikincil { background: #fff; color: #7C4A22; border: 1px solid #e0d3bd; }
.fb-ikincil:hover { background: #faf6ee; color: #7C4A22; }

/* ── Hızlı cevaplar ── */
/* ── Öneri akordeonu (2026) ──
   Eskiden sabit yükseklikli ve KENDİ İÇİNDE kayan bir şeritti; kullanıcı mesaj
   akışıyla birlikte iki ayrı yeri kaydırmak zorunda kalıyordu (2026-07-26 geri
   bildirimi). Artık tek kaydırma alanı var: mesaj akışı. Açılış-kapanış animasyonu
   modern `interpolate-size` + `::details-content` ile; desteklemeyen tarayıcıda
   animasyonsuz ama tam işlevli. */
.fb-oneri { flex: 0 0 auto; background: linear-gradient(180deg, #fdfaf4, #faf5ec);
  border-top: 1px solid #f0e6d6; interpolate-size: allow-keywords; }
.fb-oneri[hidden] { display: none; }
.fb-oneri > summary {
  display: flex; align-items: center; gap: 9px; cursor: pointer; user-select: none;
  padding: 10px 14px; list-style: none; -webkit-tap-highlight-color: transparent;
}
.fb-oneri > summary::-webkit-details-marker { display: none; }
.fb-oneri-ikon {
  width: 25px; height: 25px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: 8px; background: linear-gradient(135deg, #C27C36, #7C4A22);
  color: #fdf8f0; box-shadow: 0 2px 6px -2px rgba(124, 74, 34, .45);
}
.fb-oneri-ikon svg { width: 14px; height: 14px; }
.fb-oneri-ad { font-size: 12px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: #7C4A22; }
.fb-oneri-sayi {
  min-width: 19px; height: 19px; padding: 0 6px; display: inline-grid; place-items: center;
  background: #fff; border: 1px solid #e6d8c3; color: #B87333;
  border-radius: 999px; font-size: 11px; font-weight: 700;
}
.fb-oneri-ok {
  margin-left: auto; width: 26px; height: 26px; flex: 0 0 auto;
  display: grid; place-items: center; border-radius: 50%;
  border: 1px solid #e6d8c3; background: #fff; color: #8a7a66;
  transition: transform .25s cubic-bezier(.3, .8, .3, 1.1), color .15s, border-color .15s;
}
.fb-oneri-ok svg { width: 12px; height: 12px; }
.fb-oneri[open] .fb-oneri-ok { transform: rotate(180deg); color: #7C4A22; }
.fb-oneri > summary:hover .fb-oneri-ok { border-color: #d2b892; color: #7C4A22; }
.fb-oneri::details-content {
  height: 0; overflow: clip;
  transition: height .28s cubic-bezier(.25, .8, .35, 1), content-visibility .28s allow-discrete;
}
.fb-oneri[open]::details-content { height: auto; }

.fb-cipler { display: flex; gap: 8px; flex-wrap: wrap; padding: 2px 14px 13px; }
.fb-cip { width: auto; border: 1px solid #e0d3bd; background: #fff; border-radius: 999px;
  padding: 8px 14px; font-size: 12.5px; font-weight: 600; color: #5b4d3d; cursor: pointer;
  box-shadow: 0 1px 2px rgba(90, 60, 20, .06);
  transition: border-color .15s, color .15s, box-shadow .15s, transform .15s; }
.fb-cip:hover { border-color: #B87333; color: #7C4A22;
  box-shadow: 0 3px 10px -4px rgba(90, 60, 20, .28); transform: translateY(-1px); }
.fb-cip:active { transform: scale(.96); }
.fb-oneri[open] .fb-cip { animation: fb-cip-gir .3s cubic-bezier(.2, .8, .3, 1) backwards; }
.fb-oneri[open] .fb-cip:nth-child(2) { animation-delay: .04s; }
.fb-oneri[open] .fb-cip:nth-child(3) { animation-delay: .08s; }
.fb-oneri[open] .fb-cip:nth-child(4) { animation-delay: .12s; }
.fb-oneri[open] .fb-cip:nth-child(5) { animation-delay: .16s; }
.fb-oneri[open] .fb-cip:nth-child(6) { animation-delay: .2s; }
@keyframes fb-cip-gir { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .fb-oneri::details-content { transition: none; }
  .fb-oneri[open] .fb-cip { animation: none; }
  .fb-oneri-ok { transition: none; }
}
.fb-cip:hover { border-color: #B87333; background: #faf6ee; }

/* ── Giriş ── */
.fb-giris { display: flex; align-items: flex-end; gap: 8px; padding: 11px 13px;
  background: #fdfaf4; border-top: 1px solid #f2e9da; flex: 0 0 auto; }
.fb-giris textarea { flex: 1 1 auto; resize: none; border: 1px solid #e0d3bd; border-radius: 12px;
  padding: 10px 12px; font-size: 14px; line-height: 1.45; color: #2a2118; background: #fff;
  outline: 0; max-height: 96px; }
.fb-giris textarea:focus { border-color: #B87333; }
.fb-gonder { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center;
  border: 0; border-radius: 12px; background: #B87333; color: #fdf8f0; cursor: pointer; }
.fb-gonder:hover { background: #7C4A22; }
.fb-gonder svg { width: 17px; height: 17px; }

/* ── Mobil ──
   Dar ekranda düğme yalnız ikondan ibaret 54px'lik bir daire: sayfanın altını
   kaplamaz, hesap formunun üstüne oturmaz. Panel sağ kenara yaslı ve tam ekran
   değil — arkadaki form görünür kalsın diye üstte boşluk bırakılır. */
@media (max-width: 560px) {
  #fb-balon {
    right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    width: 54px; height: 54px; padding: 0; gap: 0;
    justify-content: center; border-radius: 50%;
    transition: all .35s cubic-bezier(.45, .15, .25, 1);
  }
  #fb-balon span { display: none; }
  #fb-balon svg { width: 23px; height: 23px; }

  /* Sayfaya girildikten 3 sn sonra düğme sağ kenar KULPUNA dönüşür (mini-oynatıcı
     deseni). İlk deneme daireyi ekran DIŞINA itiyordu: iOS görünen dilimin
     dokunuşunu yutuyor, kalan parça da anlamsız görünüyordu (kullanıcı bildirdi).
     Kulp tamamen ekran İÇİNDE: sola bakan yarım hap + ikon → ne olduğu belli,
     her noktası tıklanır. */
  #fb-balon.fb-kenar {
    right: 0;
    width: 38px; height: 56px;
    padding: 0 0 0 7px; justify-content: flex-start;
    border-radius: 999px 0 0 999px;
    opacity: .96;
    box-shadow: -4px 4px 14px -6px rgba(90, 60, 20, .4);
  }
  #fb-balon.fb-kenar svg { width: 21px; height: 21px; }
  #fb-balon.fb-kenar::before {           /* parmak hedefini sola doğru genişlet */
    content: ''; position: absolute; inset: -10px 0 -10px -14px;
  }
  @media (prefers-reduced-motion: reduce) { #fb-balon { transition: none; } }

  #fb-panel {
    right: 10px; left: auto; bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    width: calc(100vw - 20px); max-width: 420px;
    height: 74dvh; max-height: calc(100dvh - 96px); border-radius: 18px;
  }
  .fb-bas { padding: 12px 12px 13px; }
}
@media (max-width: 380px) {
  #fb-balon { width: 50px; height: 50px; }
  #fb-panel { height: 72dvh; }
  .fb-bas-alt { display: none; }   /* 320px'de başlığa sığmıyordu (kesiliyordu) */
}

/* ⚠️ iOS Safari, font-size'ı 16px'ten KÜÇÜK bir alana odaklanınca sayfayı kendiliğinden
   yakınlaştırır. Yakınlaşınca fixed panel görsel viewport'u aşıyor ve gönder düğmesi
   ekranın dışında kalıyordu (kullanıcı ekran görüntüsüyle bildirdi, 2026-07-26).
   Çözüm zoom'u yasaklamak DEĞİL (erişilebilirliği bozar) — alanı 16px yapmak. */
@media (max-width: 560px), (hover: none) and (pointer: coarse) {
  .fb-giris textarea { font-size: 16px; max-height: 110px; }
}