.elementor-2535 .elementor-element.elementor-element-1478b7b > .elementor-container{max-width:1200px;}.elementor-2535 .elementor-element.elementor-element-1478b7b{margin-top:80px;margin-bottom:0px;}.elementor-2535 .elementor-element.elementor-element-158e703 > .elementor-widget-container{margin:-20px 0px 0px 0px;}.elementor-2535 .elementor-element.elementor-element-f9a6f0f{margin-top:50px;margin-bottom:0px;padding:0px 0px 0px 0px;}.elementor-2535 .elementor-element.elementor-element-ee312e6 > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0px 0px 0px 0px;}.elementor-2535 .elementor-element.elementor-element-6cab0bd > .elementor-widget-container{margin:0px 0px 0px 0px;}@media(max-width:767px){.elementor-2535 .elementor-element.elementor-element-1478b7b{margin-top:70px;margin-bottom:0px;}.elementor-2535 .elementor-element.elementor-element-158e703 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-2535 .elementor-element.elementor-element-ee312e6 > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0px 0px 0px 0px;}.elementor-2535 .elementor-element.elementor-element-6cab0bd > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}}/* Start custom CSS for html, class: .elementor-element-a916bf7 *//* ============================================================
   1. NOTICE BAR (LOGGED IN/OUT)
   ============================================================ */
.logged-in-only { display: none !important; }
body.logged-in .logged-in-only { display: flex !important; }
body.logged-in .logged-out-only { display: none !important; }

.a4u-notice-bar { width: 100%; margin-bottom: 25px; font-family: 'Inter', sans-serif; }
.a4u-notice-content { display: flex; align-items: center; justify-content: space-between; padding: 15px 25px; border-radius: 12px; gap: 15px; }

.a4u-notice-content.logged-out-only { background-color: #ebf8ff; border: 1px solid #bee3f8; }
.a4u-notice-content.logged-in-only { background-color: #f0fff4; border: 1px solid #c6f6d5; }

.a4u-notice-text { display: flex; align-items: center; gap: 12px; font-size: 14px; color: #2c5282; }
.logged-in-only .a4u-notice-text { color: #276749; }

.a4u-notice-btn { text-decoration: none !important; padding: 8px 18px; border-radius: 8px; font-size: 13px; font-weight: 700; color: #fff !important; display: flex; align-items: center; gap: 8px; }
.logged-out-only .a4u-notice-btn { background-color: #3182ce; }
.logged-in-only .a4u-notice-btn { background-color: #38a169; }

/* ============================================================
   2. FLUENT FORMS MAKEOVER (FIXED FOR MOBILE)
   ============================================================ */
.ff_form_instance_4_1 {
    background: #ffffff !important;
    padding: 30px !important;
    border-radius: 20px !important;
    font-family: 'Inter', sans-serif !important;
}

/* STOP SAFARI AUTO ZOOM - WAJIB 16PX */
.ff_form_instance_4_1 input[type="text"],
.ff_form_instance_4_1 input[type="email"],
.ff_form_instance_4_1 input[type="number"],
.ff_form_instance_4_1 input[type="tel"],
.ff_form_instance_4_1 input[type="password"],
.ff_form_instance_4_1 select,
.ff_form_instance_4_1 textarea {
    font-size: 16px !important; 
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    width: 100% !important;
    display: block !important;
}

/* Username Specific */
#ff_4_username {
    text-transform: lowercase !important;
    font-family: monospace !important;
    background-color: #f0f4f8 !important;
}

/* Phone Input Adjustments */
input#ff_4_phone { padding-left: 100px !important; }

/* Custom HTML / Nota */
[data-name="custom_html-4_3"] {
    background: #fff9f0 !important;
    border-left: 5px solid #ed8936 !important;
    padding: 20px !important;
    border-radius: 12px !important;
}

/* ============================================================
   3. RESPONSIVE FIX
   ============================================================ */
@media (max-width: 768px) {
    .a4u-notice-content { flex-direction: column; text-align: center; }
    .a4u-notice-text { flex-direction: column; }
    .a4u-notice-btn { width: 100%; justify-content: center; }
    .ff_form_instance_4_1 { padding: 20px !important; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-158e703 *//* ============================================================
   MODERN FLUENT FORMS MAKEOVER + SAFARI ZOOM FIX
   ============================================================ */

/* 1. Container Borang */
.ff_form_instance_4_1 {
    background: #ffffff;
    padding: 30px !important;
    border-radius: 20px !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

/* 2. Styling Section Break */
.ff-el-section-title {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #1a202c !important;
    margin-bottom: 5px !important;
}

.ff-section_break_desk p {
    font-size: 14px !important;
    color: #718096 !important;
    margin-bottom: 15px !important;
}

hr {
    border: 0;
    border-top: 1px solid #edf2f7 !important;
    margin-bottom: 25px !important;
}

/* 3. Label Input */
.ff-el-input--label label {
    font-weight: 600 !important;
    color: #4a5568 !important;
    font-size: 14px !important;
    margin-bottom: 8px !important;
    display: inline-block !important;
}

.asterisk-right label::after {
    color: #e53e3e !important;
    margin-left: 4px;
}

/* 4. Input Fields (FIXED FOR SAFARI ZOOM) */
.ff_form_instance_4_1 input[type="text"],
.ff_form_instance_4_1 input[type="email"],
.ff_form_instance_4_1 input[type="number"],
.ff_form_instance_4_1 input[type="tel"],
.ff_form_instance_4_1 input[type="password"],
.ff_form_instance_4_1 select,
.ff_form_instance_4_1 textarea {
    width: 100% !important;
    height: auto !important;
    padding: 12px 16px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    /* WAJIB 16PX supaya Safari tak auto-zoom */
    font-size: 16px !important; 
    color: #2d3748 !important;
    transition: all 0.3s ease !important;
    box-shadow: none !important;
}

/* Focus Effect */
.ff_form_instance_4_1 input:focus,
.ff_form_instance_4_1 select:focus {
    background: #ffffff !important;
    border-color: #00b894 !important;
    box-shadow: 0 0 0 4px rgba(0, 184, 148, 0.1) !important;
    outline: none !important;
}

/* 5. Phone Input (ITI) Fix */
input#ff_4_phone, 
.iti__tel-input, 
.iti input[type="tel"] {
    background: #f8fafc !important;
    padding-left: 110px !important; 
    height: 50px !important;
    font-size: 16px !important;
}

.iti__selected-dial-code {
    color: #4a5568 !important;
    font-weight: 600 !important;
}

/* 6. Username Styling */
#ff_4_username {
    text-transform: lowercase !important;
    font-family: 'Courier New', Courier, monospace !important;
    letter-spacing: 0.5px;
    background-color: #f0f4f8 !important;
}

/* 7. Submit Button */
.ff_btn_style {
    width: 100% !important;
    background-color: #38a169 !important;
    color: #ffffff !important;
    padding: 16px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 14px rgba(0, 184, 148, 0.3) !important;
    text-transform: uppercase !important;
}

/* 8. Nota Bukan Warga PASTI (Custom HTML) */
[data-name="custom_html-4_3"] {
    background: #fff9f0 !important;
    border-left: 5px solid #ed8936 !important;
    border-radius: 15px !important;
    padding: 20px !important;
    margin: 20px 0 !important;
}

[data-name="custom_html-4_3"] p {
    font-size: 14px !important;
    color: #7b341e !important;
    line-height: 1.6 !important;
}

/* 9. RESPONSIVE */
@media (max-width: 768px) {
    .ff_form_instance_4_1 {
        padding: 20px !important;
    }
    /* Paksa input tetap 16px di mobile */
    .ff_form_instance_4_1 input, 
    .ff_form_instance_4_1 select, 
    .ff_form_instance_4_1 textarea {
        font-size: 16px !important;
    }
    [data-name="custom_html-4_3"] p {
        text-align: center;
    }
}











/* ============================================================
   STYLING TERMA & SYARAT (CHECKBOX CARD)
   ============================================================ */

/* 1. Container Utama (The Card) */
.ff-el-form-check {
    background: #f8fafc !important; /* Slate 50 */
    border: 1px solid #e2e8f0 !important; /* Slate 200 */
    border-radius: 12px !important;
    padding: 16px 20px !important;
    transition: all 0.3s ease !important;
    margin-top: 10px !important;
}

/* 2. Bila User Dah "Tick" (Active State) */
.ff_item_selected {
    background: #f0fff4 !important; /* Green 50 */
    border-color: #04a652 !important; /* Green Aqiqah4u */
    box-shadow: 0 4px 6px -1px rgba(4, 166, 82, 0.1) !important;
}

/* 3. Label & Teks */
.ff-el-form-check-label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    cursor: pointer !important;
}

.ff-el-form-check-label span {
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    color: #475569 !important; /* Slate 600 */
    font-weight: 500 !important;
}

/* Bila terpilih, tukar warna teks bagi pekat sikit */
.ff_item_selected .ff-el-form-check-label span {
    color: #166534 !important; /* Green 800 */
}

/* 4. Styling Checkbox Box nya sendiri */
.ff-el-form-check-input {
    width: 20px !important;
    height: 20px !important;
    margin-top: 2px !important;
    flex-shrink: 0 !important;
    accent-color: #04a652 !important; /* Warna Hijau Aqiqah4u */
    border-radius: 6px !important;
    cursor: pointer !important;
}

/* Hover Effect */
.ff-el-form-check:hover {
    border-color: #cbd5e1 !important; /* Slate 300 */
    transform: translateY(-1px);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-6cab0bd *//* --- FOOTER MAIN --- */
.a4u-footer {
    position: relative;
    padding: 80px 20px 40px;
    background-color: #0a0a0a;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    overflow: hidden;
}

.footer-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.12;
    mix-blend-mode: luminosity;
    pointer-events: none;
}

.a4u-footer-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* --- LOGO FOOTER (LOCKED SIZE) --- */
.footer-logo {
    display: block !important;
    height: 28px !important; /* Kita buat extra slim macam Apple */
    width: auto !important;
    max-height: 28px !important;
    margin-bottom: 25px;
    filter: brightness(0) invert(1);
    object-fit: contain;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 60px;
    gap: 40px;
}

.brand-tagline {
    color: #86868b;
    font-size: 14px;
    max-width: 280px;
    line-height: 1.6;
    font-weight: 500;
}

.footer-links {
    display: flex;
    gap: 60px;
}

.link-group h4 {
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 25px;
    color: var(--primary-green);
}

.link-group a {
    display: block;
    color: #a1a1a6;
    text-decoration: none;
    font-size: 14px;
    margin-bottom: 12px;
    transition: 0.3s ease;
}

.link-group a:hover {
    color: #ffffff;
    transform: translateX(3px);
}

/* PORTAL EJEN BOX */
.footer-cta-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 20px 35px;
    border-radius: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 50px;
}

.cta-content {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    font-size: 15px;
    color: #f5f5f7;
}

.btn-ejen {
    background: #ffffff;
    color: #000000 !important;
    padding: 10px 22px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 900;
    font-size: 13px;
    transition: 0.3s;
}

.btn-ejen:hover {
    background: var(--gold-bright);
    transform: translateY(-2px);
}

/* BOTTOM SECTION */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #6e6e73;
}

.footer-bottom strong { color: #d2d2d7; }

.footer-legal { display: flex; gap: 15px; }
.footer-legal a { color: #6e6e73; text-decoration: none; }
.sep { opacity: 0.2; }

/* --- MOBILE --- */
@media (max-width: 768px) {
    .footer-top { flex-direction: column; text-align: center; }
    .footer-links { flex-direction: column; gap: 35px; }
    .brand-tagline { margin: 0 auto; }
    .footer-cta-box { flex-direction: column; gap: 15px; text-align: center; }
    .footer-bottom { flex-direction: column; gap: 15px; text-align: center; }
    .footer-logo { 
        height: 24px !important; /* Lagi kecik kat mobile */
        margin: 0 auto 20px !important; 
    }
}/* End custom CSS */