/* |-------------------------------------------------------------------------- | PAKARTOPUP CUSTOMER SERVICE — EXACT SAME FINAL |-------------------------------------------------------------------------- | Homepage : .ptv4-cs | Cek Transaksi : .pti-cs | Leaderboard : .ptl-cs | Artikel : .pta-cs | Semua Kalkulator : .ptc-cs | Semua Produk : .ptp-cs |-------------------------------------------------------------------------- */ /* |-------------------------------------------------------------------------- | HAPUS TOMBOL THEME LAMA CEK TRANSAKSI |-------------------------------------------------------------------------- */ html body .pti-theme{ display:none !important; visibility:hidden !important; opacity:0 !important; pointer-events:none !important; } /* |-------------------------------------------------------------------------- | FLOATING BUTTON |-------------------------------------------------------------------------- */ html body .ptv4-cs, html body .pti-cs, html body .ptl-cs, html body .pta-cs, html body .ptc-cs, html body .ptp-cs{ position:fixed !important; right:20px !important; bottom:20px !important; z-index:999999 !important; width:66px !important; min-width:66px !important; max-width:66px !important; height:66px !important; min-height:66px !important; max-height:66px !important; margin:0 !important; padding:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:0 !important; border:0 !important; outline:0 !important; border-radius:999px !important; background: linear-gradient( 145deg, #55B8FF 0%, #35A5F5 52%, #2394E5 100% ) !important; color:#FFFFFF !important; text-decoration:none !important; overflow:hidden !important; box-shadow: 0 12px 30px rgba(0,0,0,.30), 0 8px 24px rgba(35,148,229,.22), inset 0 1px 0 rgba(255,255,255,.18) !important; cursor:pointer !important; opacity:1 !important; visibility:visible !important; transform:none !important; transition: transform .16s ease, filter .16s ease, box-shadow .16s ease !important; } /* |-------------------------------------------------------------------------- | HAPUS ICON BAWAAN |-------------------------------------------------------------------------- */ html body .ptv4-cs > svg, html body .pti-cs > svg, html body .ptl-cs > svg, html body .pta-cs > svg, html body .ptc-cs > svg, html body .ptp-cs > svg{ display:none !important; visibility:hidden !important; width:0 !important; min-width:0 !important; max-width:0 !important; height:0 !important; min-height:0 !important; max-height:0 !important; margin:0 !important; padding:0 !important; opacity:0 !important; pointer-events:none !important; } /* |-------------------------------------------------------------------------- | HAPUS TULISAN CUSTOMER SERVICE |-------------------------------------------------------------------------- */ html body .ptv4-cs > span, html body .pti-cs > span, html body .ptl-cs > span, html body .pta-cs > span, html body .ptc-cs > span, html body .ptp-cs > span{ display:none !important; visibility:hidden !important; width:0 !important; min-width:0 !important; max-width:0 !important; height:0 !important; min-height:0 !important; max-height:0 !important; margin:0 !important; padding:0 !important; opacity:0 !important; overflow:hidden !important; pointer-events:none !important; } /* |-------------------------------------------------------------------------- | ICON CHAT + HEADSET |-------------------------------------------------------------------------- | Semua halaman menggunakan icon, ukuran dan posisi YANG SAMA. |-------------------------------------------------------------------------- */ html body .ptv4-cs::before, html body .pti-cs::before, html body .ptl-cs::before, html body .pta-cs::before, html body .ptc-cs::before, html body .ptp-cs::before{ content:"" !important; position:absolute !important; left:50% !important; top:50% !important; width:48px !important; min-width:48px !important; max-width:48px !important; height:48px !important; min-height:48px !important; max-height:48px !important; margin:0 !important; padding:0 !important; display:block !important; transform: translate(-50%,-50%) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M14 12h36c6.6 0 12 5.4 12 12v18c0 6.6-5.4 12-12 12H35L24 61v-7H14C7.4 54 2 48.6 2 42V24c0-6.6 5.4-12 12-12Z' fill='%23083E6A'/%3E%3Cpath d='M18 33v-4c0-8.3 6.7-15 15-15s15 6.7 15 15v4' fill='none' stroke='%23FFFFFF' stroke-width='4.4' stroke-linecap='round'/%3E%3Crect x='15' y='30' width='8' height='14' rx='4' fill='%235CD5FF'/%3E%3Crect x='43' y='30' width='8' height='14' rx='4' fill='%235CD5FF'/%3E%3Cpath d='M47 42c0 5-4 8-10 8h-3' fill='none' stroke='%23FFFFFF' stroke-width='3.5' stroke-linecap='round'/%3E%3Ccircle cx='32' cy='50' r='3.2' fill='%2346E2AD'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:center !important; background-size:48px 48px !important; opacity:1 !important; visibility:visible !important; pointer-events:none !important; } /* |-------------------------------------------------------------------------- | HOVER |-------------------------------------------------------------------------- */ html body .ptv4-cs:hover, html body .pti-cs:hover, html body .ptl-cs:hover, html body .pta-cs:hover, html body .ptc-cs:hover, html body .ptp-cs:hover{ filter:brightness(1.045) !important; transform: translateY(-2px) !important; box-shadow: 0 15px 34px rgba(0,0,0,.34), 0 10px 26px rgba(35,148,229,.27), inset 0 1px 0 rgba(255,255,255,.20) !important; } /* |-------------------------------------------------------------------------- | ACTIVE |-------------------------------------------------------------------------- */ html body .ptv4-cs:active, html body .pti-cs:active, html body .ptl-cs:active, html body .pta-cs:active, html body .ptc-cs:active, html body .ptp-cs:active{ transform: scale(.96) !important; } /* |-------------------------------------------------------------------------- | FOCUS |-------------------------------------------------------------------------- */ html body .ptv4-cs:focus-visible, html body .pti-cs:focus-visible, html body .ptl-cs:focus-visible, html body .pta-cs:focus-visible, html body .ptc-cs:focus-visible, html body .ptp-cs:focus-visible{ outline: 3px solid rgba(72,175,255,.35) !important; outline-offset: 4px !important; } /* |-------------------------------------------------------------------------- | MOBILE |-------------------------------------------------------------------------- */ @media(max-width:620px){ html body .ptv4-cs, html body .pti-cs, html body .ptl-cs, html body .pta-cs, html body .ptc-cs, html body .ptp-cs{ right:14px !important; bottom:14px !important; width:58px !important; min-width:58px !important; max-width:58px !important; height:58px !important; min-height:58px !important; max-height:58px !important; margin:0 !important; padding:0 !important; border-radius:999px !important; } html body .ptv4-cs::before, html body .pti-cs::before, html body .ptl-cs::before, html body .pta-cs::before, html body .ptc-cs::before, html body .ptp-cs::before{ width:42px !important; min-width:42px !important; max-width:42px !important; height:42px !important; min-height:42px !important; max-height:42px !important; background-size:42px 42px !important; left:50% !important; top:50% !important; transform: translate(-50%,-50%) !important; } }