/* JFS Clinic — WhatsApp: üst bar 4'lü hat bloku + yüzen buton. Davranış: assets/js/whatsapp.js */

/* ---------- 4 bayraklı hat bloku ---------- */
.jfs-wa { position: relative; display: inline-flex; align-items: center; margin: 0; }
.jfs-wa-btn {
  display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid rgba(208, 164, 72, .55); border-radius: 10px; background: rgba(45, 37, 69, .6); cursor: pointer; color: #F1D995;
}
.jfs-wa-btn:focus-visible, .jfs-wa-liste a:focus-visible, .jfs-wa-yuzen:focus-visible { outline: 2px solid #F1D995; outline-offset: 2px; }
.jfs-wa-liste { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 8px; }
.jfs-wa-liste li { margin: 0; padding: 0; }
.jfs-wa-liste a { display: inline-flex; align-items: center; min-height: 28px; border-radius: 7px; opacity: .92; transition: opacity .2s, transform .2s; }
.jfs-wa-liste a:hover { opacity: 1; transform: translateY(-1px); }
.jfs-wa-liste img { display: block; height: 24px; width: auto; max-width: none; }

@media (max-width: 1023px) {
  .jfs-wa-btn { display: inline-flex; }
  .jfs-wa-liste {
    display: none; position: absolute; right: 0; top: calc(100% + 8px); z-index: 90; flex-direction: column; align-items: stretch; gap: 4px;
    padding: 8px; background: #2D2545; border: 1px solid rgba(208, 164, 72, .55); border-radius: 12px; box-shadow: 0 14px 36px rgba(0, 0, 0, .45);
  }
  .jfs-wa.acik .jfs-wa-liste { display: flex; }
  .jfs-wa-liste a { min-height: 48px; padding: 0 8px; justify-content: center; }
  .jfs-wa-liste img { height: 34px; }
}

/* ---------- Yüzen WhatsApp düğmesi ---------- */
.jfs-wa-yuzen {
  position: fixed; z-index: 9000; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px) + var(--jfs-wa-ek, 0px));
  width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(112deg, #B8883A, #F4DD99 38%, #E6C469 63%, #A8782F); color: #2D2545; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35); text-decoration: none; transition: bottom .25s ease, transform .2s ease, opacity .2s ease;
  animation: jfs-wa-nabiz 2s ease-out infinite;
}
.jfs-wa-yuzen:hover { transform: scale(1.06); }
.jfs-wa-yuzen svg { width: 32px; height: 32px; display: block; }
@keyframes jfs-wa-nabiz {
  0% { box-shadow: 0 6px 18px rgba(0, 0, 0, .35), 0 0 0 0 rgba(208, 164, 72, .55); }
  70% { box-shadow: 0 6px 18px rgba(0, 0, 0, .35), 0 0 0 18px rgba(208, 164, 72, 0); }
  100% { box-shadow: 0 6px 18px rgba(0, 0, 0, .35), 0 0 0 0 rgba(208, 164, 72, 0); }
}
@media (max-width: 1023px) {
  .jfs-wa-yuzen { right: 16px; width: 56px; height: 56px; }
  /* Alt bar (WhatsApp + iletişim) olan sayfada yüzen düğme mobilde gizli: bar zaten WhatsApp içeriyor, kartların üstüne binmesin. */
  body:has(.altbar) .jfs-wa-yuzen { display: none; }
  /* Hero kendi CTA'larını taşıyor: hero ekrandayken yüzen düğme gizli (CTA'yı örtüyordu). JS .jfs-wa-gizli verir. */
  .jfs-wa-yuzen.jfs-wa-gizli { opacity: 0; transform: scale(.6); pointer-events: none; }
  /* Sayfa sonu: footer'ın son satırları (dil linkleri) düğmenin altında kalmasın. */
  .m-footer, .site-alt { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ---------- Mobil sabit alt bar: WhatsApp (altın) + iletişim/aday ----------
   Tek kaynak: arastirma/altbar_bas.py bloğu basar; ornek.js/kategori.js (alt sayfalar) ve burası (ana sayfa) .gorunur verir. */
/* 2026-10-09: sütunlar içeriğe göre (WhatsApp auto + ikinci düğme kalan alan); eski 1fr 1.3fr uzun etiketi (FR/IT/DE) iki satıra kırıyordu */
.altbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 8500; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(45, 37, 69, .94);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid rgba(241, 217, 149, .18);
  transform: translateY(110%); transition: transform .35s ease; box-sizing: border-box;
}
.altbar.gorunur { transform: none; }
.altbar .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 12px; border-radius: 999px;
  font: 600 14px/1.2 Manrope, Arial, sans-serif; text-align: center; text-decoration: none; letter-spacing: .01em; cursor: pointer;
  box-sizing: border-box; border: 0;
}
.altbar .btn-wa { background: linear-gradient(112deg, #B8883A, #F4DD99 38%, #E6C469 63%, #A8782F); color: #2D2545; box-shadow: 0 8px 20px -10px rgba(208, 164, 72, .9); }
.altbar .btn-wa svg { width: 20px; height: 20px; flex: none; }
.altbar .btn-gold { background: rgba(243, 239, 232, .06); color: #F1D995; box-shadow: inset 0 0 0 1px rgba(241, 217, 149, .55); }
.altbar .btn:focus-visible { outline: 2px solid #F1D995; outline-offset: 2px; }
/* Çerez bandı açıkken (JS html'e jfs-bant verir) bar iner: iki sabit katman üst üste binmesin */
html.jfs-bant .altbar { transform: translateY(110%); }
/* ≤380px: uzun dil etiketi ("Sono un buon candidato?") tek satıra sığsın — kenar/iç boşluk ve font biraz daralır (dugme_tara.mjs ölçer) */
@media (max-width: 380px) {
  .altbar { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .altbar .btn { padding: 0 10px; font-size: 13px; }
}
@media (min-width: 1024px) { .altbar { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .altbar { transition: none; }
  .jfs-wa-yuzen { animation: none; transition: none; }
  .jfs-wa-liste a { transition: none; }
}