.elementor-kit-7{--e-global-color-primary:#457160;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-4ebeb0e:#D4AF37;--e-global-color-cbfaea6:#F8C3D0;--e-global-color-be50df0:#95DDC1;--e-global-color-610fc19:#FFFFFF;--e-global-typography-primary-font-family:"Poppins";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Poppins";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Poppins";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Poppins";--e-global-typography-accent-font-weight:500;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* =========================================================
   SAKINAH STUDIO FORM UI
   ========================================================= */

/* 1. INPUT FIELDS (Kotak Isian) - Bersih & Modern */
.jet-form-builder__field {
    width: 100%;
    padding: 12px 16px !important;
    background-color: #ffffff !important;
    border: 1px solid #dce0e6 !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    color: #333 !important;
    min-height: 46px !important;
    transition: all 0.2s ease;
}

/* Efek Fokus Hijau */
.jet-form-builder__field:focus {
    border-color: #457160 !important;
    box-shadow: 0 0 0 3px rgba(69, 113, 96, 0.15) !important;
    outline: none !important;
}

/* 2. LABEL */
.jet-form-builder__label-text {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #444 !important;
    margin-bottom: 6px !important;
    display: block !important;
}

/* 3. TOMBOL NAVIGASI (Kanan-Kiri) */
.jet-form-builder__next-page-wrap,
.jet-form-builder__submit-wrap.has-prev {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    gap: 15px !important;
    width: 100% !important;
    margin-top: 30px !important;
}

.jet-form-builder__next-page-wrap button,
.jet-form-builder__submit-wrap button {
    flex: 1 1 50% !important;
    height: 48px !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Tombol KEMBALI (Putih) */
.jet-form-builder__prev-page {
    background: #fff !important;
    color: #457160 !important;
    border: 1px solid #457160 !important;
}
.jet-form-builder__prev-page:hover {
    background: #f0fdf4 !important;
}

/* Tombol LANJUT (Hijau) */
.jet-form-builder__next-page,
.jet-form-builder__action-button {
    background: #457160 !important;
    color: #fff !important;
    border: 1px solid #457160 !important;
}
.jet-form-builder__next-page:hover,
.jet-form-builder__action-button:hover {
    background: #365a4c !important;
}

/* 4. SEMBUNYIKAN FIELD RAHASIA (Audio & Font Inputs) */
/* Kita sembunyikan kotak inputnya, tapi label dan value tetap ada di sistem */
#audio, #jenis_font,
label[for="audio"], label[for="jenis_font"],
.jet-form-builder-row:has(#audio),
.jet-form-builder-row:has(#jenis_font) {
    display: none !important;
}

/* 5. Mobile Adjustments */
@media (max-width: 767px) {
    .jet-form-builder__field {
        font-size: 13px !important;
        padding: 10px 12px !important;
    }
}

/* =========================================
   MODERN CHECKBOX / RADIO (CHIPS STYLE)
   ========================================= */

/* 1. Sembunyikan Checkbox Asli */
.jet-form-builder__field-wrap.checkboxes-wrap input[type="checkbox"],
.jet-form-builder__field-wrap.radio-wrap input[type="radio"] {
    display: none;
}

/* 2. Style Label Pembungkus (Kotak Tombol) */
.jet-form-builder__field-label.for-checkbox,
.jet-form-builder__field-label.for-radio {
    display: inline-block;
    padding: 10px 20px;
    margin: 5px 5px 5px 0;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 50px; /* Membuat lonjong (Pill shape) */
    font-size: 14px;
    color: #666;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    width: auto; /* Agar lebar menyesuaikan teks */
}

/* 3. Efek Hover */
.jet-form-builder__field-label.for-checkbox:hover,
.jet-form-builder__field-label.for-radio:hover {
    background-color: #e2e6ea;
    border-color: #cbd3da;
    transform: translateY(-2px);
}

/* 4. STATE CHECKED (Saat Dipilih) - Hijau Sakinah */
/* Trik: CSS mendeteksi input yang tercentang, lalu mengubah label setelahnya */
.jet-form-builder__field-wrap input:checked + span, /* Versi JetForm lama */
.jet-form-builder__field-wrap input:checked + label,
.jet-form-builder__field-wrap input:checked + .jet-form-builder__field-label { 
    /* Selector ini mungkin perlu disesuaikan tergantung output HTML JetForm versi terbaru */
}

/* KARENA STRUKTUR JETFORM KADANG BEDA, KITA PAKAI CARA INI: */
/* Targetkan Label yang membungkus input checked */
label:has(input:checked) {
    background-color: #457160 !important;
    color: #ffffff !important;
    border-color: #457160 !important;
    box-shadow: 0 4px 10px rgba(69, 113, 96, 0.3);
    font-weight: 600;
}

/* Container Pembungkus HP */
.mobile-scroll-container {
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory; /* Kunci Scroll Snap */
    scroll-behavior: smooth;
    /* Hilangkan Scrollbar biar bersih */
    scrollbar-width: none; 
    -ms-overflow-style: none;
}

.mobile-scroll-container::-webkit-scrollbar { 
    display: none; 
}

/* Container Slide (Per Halaman) */
.mobile-scroll-container > .e-con {
    height: 100vh; /* Tinggi Full Layar */
    scroll-snap-align: start; /* Posisi Snap */
    width: 100%;
}/* End custom CSS */