/*!
 * px-float.css (Pixiepa pcms site paketi; kaynak: vcms-float.css) - Yuzen WhatsApp / telefon dugmeleri (tema bagimsiz). Isaretleme: app/Views/Common/_float_buttons.php
 * Varyantlar: classic | pill | fab | bar | minimal. Konum: bottom-right | bottom-left (fiziksel yon; RTL'de de ayni taraf).
 * Renkler: WhatsApp #25D366, telefon --vc-primary / --vc-primary-contrast (tema :root'unda tanimli).
 * Degiskenler (JS yazar): --vcf-safe-bottom (html; telefonda body alt boslugu), --vcf-lift (cerez bandinin ustune cikarma), html'de --vcf-btt (tema "yukari cik" dugmesi icin alt boslugu).
 */
.vcf { --vcf-wa: #25d366; --vcf-wa-ink: #052e16; --vcf-wa-strong: #15803d; --vcf-tel: var(--vc-primary, #1f4e8c); --vcf-tel-ink: var(--vc-primary-contrast, #fff);
  --vcf-base: 20px; --vcf-edge: 20px; --vcf-shadow: 0 .5rem 1rem rgba(0, 0, 0, .18);
  position: fixed; z-index: 1020; bottom: calc(var(--vcf-base) + var(--vcf-lift, 0px) + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; font-family: var(--vc-font, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif); font-size: 15px; line-height: 1.2;}
.vcf.vcf-ready { transition: bottom .2s ease; }
.vcf *, .vcf *::before, .vcf *::after { box-sizing: border-box; }
.vcf--bottom-right { right: max(var(--vcf-edge), env(safe-area-inset-right, 0px)); align-items: flex-end; }
.vcf--bottom-left { left: max(var(--vcf-edge), env(safe-area-inset-left, 0px)); align-items: flex-start; }
.vcf-list { display: flex; flex-direction: column; gap: 10px; align-items: inherit; }
.vcf .vcf-btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; text-decoration: none; cursor: pointer; border: 0; color: inherit;
  box-shadow: var(--vcf-shadow); transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; -webkit-tap-highlight-color: transparent; }
.vcf .vcf-btn:hover { transform: translateY(-2px); filter: brightness(1.04); text-decoration: none; }
.vcf .vcf-btn:active { transform: translateY(0); }
.vcf .vcf-btn:focus-visible, .vcf .vcf-fab:focus-visible { outline: 3px solid #fff; outline-offset: 0; box-shadow: 0 0 0 6px var(--vc-focus-ring, #1c2127), var(--vcf-shadow); }
.vcf .vcf-btn--wa { background: var(--vcf-wa); color: #fff; }
.vcf .vcf-btn--tel { background: var(--vcf-tel); color: var(--vcf-tel-ink); }
.vcf .vcf-ico { display: inline-flex; flex: none; }
.vcf .vcf-svg { width: 26px; height: 26px; display: block; }
.vcf .vcf-label { font-weight: 700; white-space: nowrap; }

/* ---- classic: iki yuvarlak ikon dugmesi (etiket gorsel olarak gizli) ---- */
.vcf--classic .vcf-btn, .vcf--bar .vcf-btn { width: 50px; height: 50px; border-radius: 50%; }
.vcf--classic .vcf-label, .vcf--minimal .vcf-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- pill: ikon + etiket ---- */
.vcf--pill .vcf-btn { min-height: 48px; padding: .55rem 1.1rem .55rem .85rem; border-radius: 999px; font-size: 15px; }
.vcf--pill .vcf-btn--wa, .vcf--fab .vcf-btn--wa, .vcf--bar .vcf-btn--wa { color: var(--vcf-wa-ink); }
.vcf--pill .vcf-svg, .vcf--fab .vcf-list .vcf-svg { width: 22px; height: 22px; }

/* ---- minimal: kucuk cizgili kare ikonlar ---- */
.vcf--minimal .vcf-list { gap: 8px; }
.vcf--minimal .vcf-btn { width: 40px; height: 40px; border-radius: 8px; background: #fff; border: 2px solid currentColor; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.vcf--minimal .vcf-btn--wa { color: var(--vcf-wa-strong); background: #fff; }
.vcf--minimal .vcf-btn--tel { color: var(--vcf-tel); background: #fff; }
.vcf--minimal .vcf-svg { width: 20px; height: 20px; }
.vcf--minimal .vcf-btn:hover { background: #f4f6f8; }

/* ---- fab: tek yuvarlak dugme, acilinca iki eylem ---- */
.vcf--fab { flex-direction: column-reverse; gap: 12px; }
.vcf-fab { position: relative; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: var(--vcf-tel); color: var(--vcf-tel-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--vcf-shadow); transition: transform .2s ease, filter .15s ease; }
.vcf-fab:hover { filter: brightness(1.08); }
.vcf-fab__icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: opacity .18s ease, transform .22s ease; }
.vcf-fab .vcf-svg { width: 26px; height: 26px; }
.vcf-fab__icon--close { opacity: 0; transform: rotate(-90deg) scale(.6); }
.vcf-fab[aria-expanded="true"] .vcf-fab__icon--open { opacity: 0; transform: rotate(90deg) scale(.6); }
.vcf-fab[aria-expanded="true"] .vcf-fab__icon--close { opacity: 1; transform: none; }
.vcf--fab .vcf-btn { min-height: 46px; padding: .5rem 1.05rem .5rem .8rem; border-radius: 999px; }
/* JS varsa liste kapali: gorunmez + odaklanamaz; JS yoksa her zaman acik */
.vcf--fab.vcf-js .vcf-list { visibility: hidden; opacity: 0; transform: translateY(10px) scale(.96); transform-origin: bottom center; pointer-events: none; transition: opacity .18s ease, transform .2s ease, visibility 0s linear .2s; }
.vcf--fab.vcf-js.is-open .vcf-list { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition: opacity .18s ease, transform .2s ease, visibility 0s; }

/* ---- bar: telefonda (<768px) tam genislik alt cubuk; masaustunde classic ---- */
@media (max-width: 767.98px) {
  .vcf--bar { --vcf-base: 0px; left: 0; right: 0; bottom: calc(var(--vcf-lift, 0px)); align-items: stretch; z-index: 1025; }
  .vcf--bar .vcf-list { flex-direction: row; gap: 0; width: 100%; }
  .vcf--bar .vcf-btn { flex: 1 1 0; width: auto; height: auto; min-height: 56px; border-radius: 0; box-shadow: none; padding: .75rem .5rem calc(.75rem + env(safe-area-inset-bottom, 0px)); font-size: 15px; transform: none; }
  .vcf--bar { box-shadow: 0 -2px 12px rgba(0, 0, 0, .18); }
  .vcf--bar .vcf-label { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
  .vcf--bar .vcf-btn:hover { transform: none; }
  .vcf--bar .vcf-btn:focus-visible { outline-offset: -4px; box-shadow: none; }
  body.vcf-has-bar, body:has(.vcf--bar) { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 768px) {
  .vcf--bar .vcf-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}

/* Tema menusu acikken (html.vcf-menu-open: temanin mobil menu JS'i menu kilit sinifinin yanina ekler) butonlar gizlenir; odaklanamaz, tiklanamaz */
html.vcf-menu-open .vcf { opacity: 0; visibility: hidden; pointer-events: none; }
html.vcf-menu-open #back-to-top { opacity: 0; visibility: hidden; pointer-events: none; }

/* Alt guvenli alan: telefonda (<768px) yuzen butonlar sayfa sonundaki icerigi (footer yasal baglantilari, telif) ortmesin diye body'ye butonlarin
   yigin yuksekligi kadar alt bosluk verilir. Deger JS'ten gelir (--vcf-safe-bottom, html uzerinde; butonlar yokken / bar varyantinda / masaustunde 0).
   Tema ayrica footer'a alt dolgu EKLEMEZ. Ozel kullanim: .vc-footer-safe { padding-bottom: var(--vcf-safe-bottom, 0px) }. */
@media (max-width: 767.98px) {
  html.vcf-on body:not(.vcf-has-bar) { padding-bottom: var(--vcf-safe-bottom, 0px); }
}

/* Tema "yukari cik" dugmesi: yuzen dugmelerin (veya cerez bandinin) ustune alinir; deger JS'ten gelir */
html.vcf-on #back-to-top { bottom: var(--vcf-btt, 25px); }
html.vcf-on.vcf-ready #back-to-top { transition: bottom .2s ease; }

/* Telefonda formlarin kontrollerini ortmesin diye JS .is-avoiding ekler (bkz. vcms-float.js): solar, tiklanamaz, gorunmez */
@media (max-width: 720px) {
  .vcf.vcf-js { transition: opacity .2s ease, visibility 0s, bottom .2s ease; }
  .vcf.vcf-js.is-avoiding { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility 0s linear .2s, bottom .2s ease; }
}

@media (prefers-reduced-motion: reduce) {
  .vcf.vcf-js, .vcf.vcf-js.is-avoiding { transition: none !important; }
  .vcf.vcf-ready, .vcf .vcf-btn, .vcf-fab, .vcf-fab__icon, .vcf--fab.vcf-js .vcf-list, html.vcf-on #back-to-top { transition: none !important; }
  .vcf .vcf-btn:hover { transform: none; }
}
@media print { .vcf { display: none !important; } }