/* Many Business Solutions · sabit iletişim mührü (alternatif B, Mühür)
   Markup js/contact-fab.js tarafından eklenir. Hero'da gizli, #iletisim ve footer
   görünürken çekilir, koyu zeminde renkleri tersine döner. */

.mbfab {
  --fab-card: #fff; --fab-fg: var(--ink); --fab-line: var(--line);
  --fab-shadow: rgba(15, 15, 20, .3); --fab-focus: var(--indigo);
  --fab-edge: 28px; --fab-edge-b: 28px; --fab-size: 96px; --fab-core: 52px;
  position: fixed; inset: 0; z-index: 55;
  pointer-events: none;
  font-family: var(--f-sans); line-height: 1.4; color: var(--ink);
}
.mbfab.is-dark {
  --fab-card: var(--night-2); --fab-fg: var(--on-night); --fab-line: rgba(255, 255, 255, .16);
  --fab-shadow: rgba(0, 0, 0, .55); --fab-focus: var(--indigo-light);
}
.mbfab *, .mbfab *::before, .mbfab *::after { box-sizing: border-box; }
:where(.mbfab) :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
:where(.mbfab) :where(a) { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.mbfab svg { display: block; flex: none; }
.mbfab :focus { outline: none; }
.mbfab :focus-visible { outline: 2px solid var(--fab-focus); outline-offset: 3px; }
.mbfab__mono { font-family: var(--f-mono); font-weight: 500; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; line-height: 1.2; }

/* ---------- Mühür ---------- */
.mbfab__seal {
  pointer-events: auto; position: absolute; right: var(--fab-edge); bottom: var(--fab-edge-b);
  width: var(--fab-size); height: var(--fab-size); border-radius: 50%;
  display: grid; place-items: center;
  background: var(--fab-card); color: var(--fab-fg);
  border: 1px solid var(--fab-line);
  box-shadow: 0 16px 32px -14px var(--fab-shadow), 0 2px 4px rgba(15, 15, 20, .06);
  transition: transform .3s var(--ease-out), opacity .3s var(--ease-out), visibility 0s,
    background-color .3s, color .3s, border-color .3s, box-shadow .3s;
}
.mbfab.is-hidden .mbfab__seal {
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(24px) scale(.8);
  transition: transform .3s ease-in, opacity .2s ease-in, visibility 0s linear .3s;
}
.mbfab__seal:active { transform: scale(.95); }
.mbfab__ring { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); transform: rotate(var(--rot, 0deg)); pointer-events: none; }
.mbfab__ring text { font-family: var(--f-mono); font-weight: 500; font-size: 9.6px; fill: currentColor; }
.mbfab__core { position: relative; width: var(--fab-core); height: var(--fab-core); border-radius: 50%; background: var(--indigo); color: #fff; display: grid; place-items: center; transition: transform .45s var(--ease-out); }
.mbfab__core svg { position: absolute; width: 20px; height: 20px; transition: transform .45s var(--ease-out), opacity .2s; }
.mbfab__core .i2 { opacity: 0; transform: rotate(-90deg) scale(.6); }
.mbfab.is-open .mbfab__core .i1 { opacity: 0; transform: rotate(90deg) scale(.6); }
.mbfab.is-open .mbfab__core .i2 { opacity: 1; transform: none; }
@media (hover: hover) { .mbfab__seal:hover .mbfab__core { transform: scale(1.08); } }
.mbfab.is-enter .mbfab__seal { animation: mbfab-in .85s var(--ease-out) both; }
@keyframes mbfab-in { from { opacity: 0; transform: scale(.55) rotate(-60deg); } to { opacity: 1; transform: none; } }
@keyframes mbfab-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Kanal kartı ---------- */
.mbfab__panel {
  pointer-events: auto; position: absolute; right: var(--fab-edge); bottom: calc(var(--fab-edge-b) + var(--fab-size) + 14px);
  width: 344px; max-width: calc(100vw - 2 * var(--fab-edge));
  background: var(--night); color: var(--on-night);
  border-radius: 24px; padding: 20px 8px 8px;
  box-shadow: 0 32px 64px -28px rgba(8, 6, 24, .7), 0 0 0 1px rgba(255, 255, 255, .12);
  transform-origin: calc(100% - var(--fab-size) / 2) 100%;
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(.92);
  transition: opacity .16s ease-in, transform .2s ease-in, visibility 0s linear .2s;
}
.mbfab.is-open .mbfab__panel { opacity: 1; visibility: visible; transform: none; transition: opacity .22s ease-out, transform .34s var(--ease-out), visibility 0s; }
.mbfab__head { display: flex; justify-content: space-between; gap: 12px; padding: 0 12px; color: var(--on-night-2); }
.mbfab__title { margin: 8px 12px 14px; font-size: 25px; font-weight: 500; letter-spacing: -.025em; line-height: 1.1; }
.mbfab__title em { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: 1.1em; letter-spacing: -.01em; color: var(--indigo-light); }
.mbfab__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mbfab.is-open .mbfab__list li { animation: mbfab-rise .42s var(--ease-out) both; animation-delay: calc(var(--i) * 45ms + 60ms); }
.mbfab__row { display: flex; align-items: center; gap: 14px; min-height: 62px; padding: 10px 12px; border-radius: 16px; transition: background-color .2s; }
.mbfab__row:hover { background: rgba(255, 255, 255, .07); }
.mbfab__ric { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .09); display: grid; place-items: center; flex: none; }
.mbfab__row--main .mbfab__ric { background: var(--indigo); }
.mbfab__ric svg { width: 18px; height: 18px; }
.mbfab__rt { display: grid; gap: 3px; min-width: 0; }
.mbfab__rt b { font-weight: 500; font-size: 15px; }
.mbfab__rt small { font-size: 13px; color: var(--on-night-2); overflow-wrap: anywhere; }
.mbfab__arr { margin-left: auto; width: 18px; height: 18px; opacity: .45; transition: transform .35s var(--ease-out), opacity .2s; }
.mbfab__row:hover .mbfab__arr, .mbfab__row:focus-visible .mbfab__arr { opacity: 1; transform: translateX(3px); }
.mbfab__panel :focus-visible { outline-color: var(--indigo-light); }

@media (max-width: 640px) {
  .mbfab { --fab-edge: 16px; --fab-edge-b: calc(16px + env(safe-area-inset-bottom, 0px)); --fab-size: 76px; --fab-core: 42px; }
  .mbfab__core svg { width: 18px; height: 18px; }
  .mbfab__panel { bottom: calc(var(--fab-edge-b) + var(--fab-size) + 12px); }
}

@media (prefers-reduced-motion: reduce) {
  .mbfab *, .mbfab *::before, .mbfab *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}
@media print { .mbfab { display: none; } }