/* ============================================================
 *  FAB WhatsApp — situs marketing zultech.id
 * ============================================================
 *  DIPINDAH DARI <style> INLINE di marketing/partials/whatsapp_fab.php.
 *  Dulu ~5,5 KB CSS ini dikirim ulang pada SETIAP muat halaman dan tidak
 *  pernah bisa di-cache peramban. Sebagai berkas terpisah, ia diunduh
 *  sekali lalu dipakai ulang di seluruh situs.
 *
 *  Warna mengikuti tema aktif lewat CSS variables → ikut berubah saat
 *  pengunjung mengganti tema. SOLID, tanpa gradasi.
 *
 *  CATATAN GERAK (perapian 11 Sep 2026):
 *  Tombol ini dulu mengambang naik-turun tanpa henti + memancarkan dua
 *  cincin denyut + titik hijau berkedip — tiga animasi abadi sekaligus.
 *  Ironisnya hero halaman ini sudah dibersihkan dari pola yang sama
 *  karena dinilai "penanda template", sementara FAB-nya justru elemen
 *  paling mencolok di layar. Yang tersisa sekarang hanya gerak yang
 *  punya maksud: kemunculan sekali di awal, dan respons saat disentuh.
 * ============================================================ */

.mwa {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 998;
    font-family: Inter, system-ui, sans-serif;
}

/* ── Tombol utama ── */
.mwa-fab {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    background: rgb(var(--brand));
    color: rgb(var(--brand-ink));
    /* Bayangan dua lapis & rendah — sama seperti kartu di halaman ini.
       Versi lama memakai halo warna 30px yang terbaca seperti "glow"
       template. */
    box-shadow: 0 2px 4px -2px rgb(var(--shadow) / .3), 0 12px 26px -14px rgb(var(--brand) / .55);
    transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s;
    /* Muncul sekali saat halaman dibuka, lalu DIAM. */
    animation: mwa-in .45s cubic-bezier(.34, 1.56, .64, 1) both;
}

@keyframes mwa-in {
    0%   { transform: scale(0) rotate(-120deg); opacity: 0; }
    70%  { transform: scale(1.08) rotate(0);    opacity: 1; }
    100% { transform: scale(1); }
}

.mwa-fab:hover {
    transform: scale(1.06);
    box-shadow: 0 3px 6px -2px rgb(var(--shadow) / .34), 0 18px 34px -16px rgb(var(--brand) / .6);
}

.mwa-fab:active { transform: scale(.94); }
.mwa-fab:focus-visible { outline: 3px solid rgb(var(--brand) / .45); outline-offset: 3px; }
.mwa-fab.open { transform: rotate(90deg); }
.mwa-fab svg { width: 29px; height: 29px; }
.mwa-fab .ic-close { display: none; }
.mwa-fab.open .ic-wa { display: none; }
.mwa-fab.open .ic-close { display: block; }

/* Titik status ketersediaan — diam, warnanya saja yang bicara. */
.mwa-dot {
    position: absolute;
    bottom: 3px;
    right: 3px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #22c55e;
    border: 2.5px solid rgb(var(--brand));
}

.mwa-dot.off { background: #f59e0b; }

/* ── Gelembung sapaan ── */
.mwa-bubble {
    position: absolute;
    right: 72px;
    bottom: 6px;
    width: 248px;
    background: rgb(var(--surface));
    color: rgb(var(--ink));
    padding: 13px 32px 13px 14px;
    border-radius: 16px 16px 4px 16px;
    border: 1px solid rgb(var(--line));
    box-shadow: 0 2px 4px -2px rgb(var(--shadow) / .26), 0 16px 34px -18px rgb(var(--shadow) / .4);
    opacity: 0;
    transform: translateY(8px) scale(.85);
    transform-origin: bottom right;
    pointer-events: none;
    transition: opacity .2s, transform .2s;
}

.mwa-bubble.show { opacity: 1; transform: none; pointer-events: auto; }
.mwa-bubble b { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 2px; }
.mwa-bubble span { font-size: 12px; color: rgb(var(--muted)); line-height: 1.45; }

.mwa-bubble-x {
    position: absolute;
    top: 7px;
    right: 8px;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background: rgb(var(--surface-2));
    color: rgb(var(--muted));
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mwa-bubble-x:hover { color: rgb(var(--ink)); }

/* ── Panel ── */
.mwa-back {
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / .45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s;
    z-index: 997;
    backdrop-filter: blur(2px);
}

.mwa-back.show { opacity: 1; pointer-events: auto; }

.mwa-panel {
    position: absolute;
    right: 0;
    bottom: 74px;
    width: 330px;
    max-width: calc(100vw - 36px);
    background: rgb(var(--surface));
    border: 1px solid rgb(var(--line));
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 4px 8px -4px rgb(var(--shadow) / .3), 0 28px 60px -24px rgb(var(--shadow) / .55);
    opacity: 0;
    transform: translateY(16px) scale(.97);
    transform-origin: bottom right;
    pointer-events: none;
    transition: opacity .2s, transform .26s cubic-bezier(.34, 1.56, .64, 1);
}

.mwa-panel.show { opacity: 1; transform: none; pointer-events: auto; }

.mwa-head {
    background: rgb(var(--brand));
    color: rgb(var(--brand-ink));
    padding: 16px 18px;
}

.mwa-head .ttl { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 16px; }
.mwa-head .sub { font-size: 12px; opacity: .9; display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.mwa-head .sub i { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; display: inline-block; }
.mwa-head .sub i.off { background: #fbbf24; }

.mwa-body { padding: 8px; max-height: 60vh; overflow-y: auto; }

.mwa-topic {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    margin: 6px 0;
    border-radius: 12px;
    background: rgb(var(--surface-2));
    border: 1px solid rgb(var(--line));
    text-decoration: none;
    color: inherit;
    opacity: 0;
    transition: transform .12s, border-color .15s;
}

.mwa-panel.show .mwa-topic { animation: mwa-tin .34s cubic-bezier(.34, 1.56, .64, 1) both; }

@keyframes mwa-tin {
    0%   { opacity: 0; transform: translateX(12px); }
    100% { opacity: 1; transform: none; }
}

.mwa-topic:hover { transform: translateX(2px); border-color: rgb(var(--brand)); }

.mwa-topic .ico {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgb(var(--brand) / .14);
    color: rgb(var(--brand));
}

.mwa-topic .ico svg { width: 18px; height: 18px; }
.mwa-topic .tt { font-size: 13.5px; font-weight: 700; color: rgb(var(--ink)); }
.mwa-topic .ts { font-size: 11.5px; color: rgb(var(--muted)); }
.mwa-topic .arr { margin-left: auto; color: rgb(var(--brand)); }

@media (max-width: 575px) {
    .mwa { right: 14px; bottom: 14px; }
    .mwa-bubble { display: none; }
    .mwa-panel { width: calc(100vw - 28px); }
}

@media (prefers-reduced-motion: reduce) {
    .mwa-fab,
    .mwa-panel.show .mwa-topic { animation: none !important; }
    .mwa-fab, .mwa-panel, .mwa-bubble { transition: none !important; }
}