.elementor-2332 .elementor-element.elementor-element-a70f3fe{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--border-radius:15px 15px 15px 15px;--margin-top:0px;--margin-bottom:80px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:15px;--padding-right:0px;}.elementor-2332 .elementor-element.elementor-element-6367d15{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--border-radius:15px 15px 15px 15px;--padding-top:15px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2332 .elementor-element.elementor-element-6367d15:not(.elementor-motion-effects-element-type-background), .elementor-2332 .elementor-element.elementor-element-6367d15 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-39e38a9 );}.elementor-2332 .elementor-element.elementor-element-f0bfeae img{border-radius:100% 100% 100% 100%;}.elementor-2332 .elementor-element.elementor-element-ab38655{text-align:center;}.elementor-2332 .elementor-element.elementor-element-ab38655 .elementor-heading-title{font-size:18px;font-weight:bold;color:var( --e-global-color-2b88b20 );}.elementor-2332 .elementor-element.elementor-element-311013c{text-align:center;color:var( --e-global-color-2b88b20 );}.elementor-2332 .elementor-element.elementor-element-fbcd46e{--display:flex;--border-radius:0px 0px 15px 15px;}.elementor-2332 .elementor-element.elementor-element-fbcd46e:not(.elementor-motion-effects-element-type-background), .elementor-2332 .elementor-element.elementor-element-fbcd46e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-2b88b20 );}.elementor-2332 .elementor-element.elementor-element-271c35d{color:var( --e-global-color-accent );}.elementor-2332 .elementor-element.elementor-element-a8b3cef{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:-12px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}#elementor-popup-modal-2332 .dialog-widget-content{animation-duration:1.2s;background-color:#25D36600;}#elementor-popup-modal-2332 .dialog-message{width:260px;height:auto;}#elementor-popup-modal-2332{justify-content:flex-start;align-items:flex-end;}#elementor-popup-modal-2332 .dialog-close-button{display:flex;top:-2rem;background-color:var( --e-global-color-39e38a9 );font-size:28px;}body:not(.rtl) #elementor-popup-modal-2332 .dialog-close-button{right:0rem;}body.rtl #elementor-popup-modal-2332 .dialog-close-button{left:0rem;}#elementor-popup-modal-2332 .dialog-close-button i{color:var( --e-global-color-2b88b20 );}#elementor-popup-modal-2332 .dialog-close-button svg{fill:var( --e-global-color-2b88b20 );}@media(max-width:767px){.elementor-2332 .elementor-element.elementor-element-a70f3fe{--content-width:90vw;}}/* Start custom CSS */<div class="kateh-chat-wrapper">
    <textarea id="kateh-input" placeholder="Balas ke Kateh..." rows="1"></textarea>
    
    <button id="kateh-send" onclick="kirimKeWA()" title="Kirim ke WhatsApp">
        <i class="fas fa-paper-plane"></i> 
    </button>
</div>

<script>
function kirimKeWA() {
    var msgInput = document.getElementById('kateh-input');
    var msg = msgInput.value;
    
    // NOMOR ADMIN KATEH (Ubah sesuai nomor Anda)
    var waNumber = "6281267172717"; 
    
    if(!msg || msg.trim() === "") return;

    var unit = document.title;
    var url  = window.location.href;
    
    var textWA = "*Tanya Admin Kateh*%0A%0A" + 
                 "_" + encodeURIComponent(msg) + "_%0A%0A" +
                 "--------------------------%0A" + 
                 "*Unit:* " + encodeURIComponent(unit) + "%0A" +
                 "*Link:* " + encodeURIComponent(url);
               
    window.open("https://wa.me/" + waNumber + "?text=" + textWA, "_blank");
    msgInput.value = ""; 
}

// Fitur Enter untuk Kirim (Tanpa Shift)
document.getElementById('kateh-input').addEventListener('keypress', function (e) {
    if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault();
        kirimKeWA();
    }
});
</script>

<style>

/* PAKSA POPUP BERADA DI BAWAH TOMBOL WA (Z-INDEX 9999) */
#elementor-popup-modal-2332 .dialog-widget-content {
    z-index: 900 !important; /* Angka ini jauh di bawah 9999 */
}

/* Pastikan pembungkus paling luar popup juga mengalah */
#elementor-popup-modal-2332.dialog-type-buttons {
    z-index: 900 !important;
}

/* Izin agar tombol X bisa melayang di luar kotak */
#elementor-popup-modal-2332 .dialog-widget-content {
    overflow: visible !important;
}

/* Gaya Tombol X Bulat di Luar */
#elementor-popup-modal-2332 .dialog-close-button {
    background-color: #25d366 !important; /* Warna Hijau Kateh */
    border-radius: 50% !important; /* Jadi Bulat */
    width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    
    /* POSISI MELAYANG DI LUAR */
    position: absolute !important;
    top: -12px !important; /* Naik ke atas keluar kotak */
    right: -12px !important; /* Geser ke kanan keluar kotak */
    
    border: 2px solid #ffffff !important; /* Garis tepi putih */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important;
    opacity: 1 !important;
    z-index: 9999 !important;
}

/* Pastikan ikon X di tengah dan warna putih */
#elementor-popup-modal-2332 .dialog-close-button i {
    color: #ffffff !important;
    font-size: 14px !important;
}

/* KOTAK PUTIH UTAMA (LAYOUT KATEH) */
.kateh-chat-wrapper {
    background: #ffffff;
    padding: 10px 10px;
    border-radius: 20px;
        display: flex;
    align-items: center;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border: 1px solid #f0f0f0;
}

/* INPUT TEXTAREA */
#kateh-input {
    width: 100%;
    border: none !important;
    outline: none !important;
    background: transparent;
    padding-right: 45px; /* Ruang agar teks tidak nabrak ikon */
    font-size: 14px;
    resize: none;
    font-family: inherit; /* Mengikuti font website Kateh */
    color: #333;
    line-height: 1.5;
}

/* --- EFEK FOKUS: GLOW HIJAU TIPIS --- */

/* 1. Transisi halus untuk container utama */
.kateh-chat-wrapper {
    /* ... kode yang sudah ada ... */
    transition: all 0.3s ease; /* Tambahkan ini agar glow-nya muncul halus */
    border: 1px solid #f0f0f0; /* Border default tipis */
}

/* 2. Saat input di klik (Focus) */
.kateh-chat-wrapper:focus-within {
    border-color: #25d366 !important; /* Border berubah jadi hijau WA */
    box-shadow: 0 0 12px rgba(37, 211, 102, 0.2) !important; /* Efek Glow tipis */
    transform: translateY(-2px); /* Sedikit mengangkat kotak saat diklik */
}

/* 3. Menghilangkan outline biru bawaan browser pada textarea */
#kateh-input:focus {
    outline: none !important;
    border: none !important;
}

/* TOMBOL KIRIM */
#kateh-send {
    background: transparent;
    border: none;
    cursor: pointer;
    position: absolute;
    right: 12px;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.2s ease;
}

/* IKON PAPER PLANE (FONT AWESOME) */
#kateh-send i {
    color: #25d366 !important; /* HIJAU WHATSAPP */
    font-size: 22px !important; /* Ukuran yang pas dan tidak gepeng */
    transition: transform 0.2s ease;
}

/* Efek sedikit interaksi saat di-hover */
#kateh-send:hover i {
    transform: scale(1.1) rotate(-10deg);
}
</style>/* End custom CSS */