{"id":6107,"date":"2026-01-12T08:45:33","date_gmt":"2026-01-12T08:45:33","guid":{"rendered":"https:\/\/buildori.com\/%d9%86%d9%85%d8%a7%d8%b0%d8%ac-%d9%85%d9%88%d8%a7%d9%82%d8%b9-%d8%a7%d9%84%d9%88%d9%8a%d8%a8\/"},"modified":"2026-01-12T17:33:34","modified_gmt":"2026-01-12T17:33:34","slug":"%d9%86%d9%85%d8%a7%d8%b0%d8%ac-%d9%85%d9%88%d8%a7%d9%82%d8%b9-%d8%a7%d9%84%d9%88%d9%8a%d8%a8","status":"publish","type":"page","link":"https:\/\/buildori.com\/ar\/%d9%86%d9%85%d8%a7%d8%b0%d8%ac-%d9%85%d9%88%d8%a7%d9%82%d8%b9-%d8%a7%d9%84%d9%88%d9%8a%d8%a8\/","title":{"rendered":"\u0646\u0645\u0627\u0630\u062c \u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u0648\u064a\u0628"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"6107\" class=\"elementor elementor-6107 elementor-5732\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6fb2579 e-con-full e-flex e-con e-parent\" data-id=\"6fb2579\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5fc556d elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"5fc556d\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n    \/* --- SCOPED STYLES --- *\/\r\n    #buildori-viewer-wrapper {\r\n        font-family: 'Inter', system-ui, -apple-system, sans-serif;\r\n        color: #334155;\r\n        background-color: #f8fafc;\r\n        padding: 40px 20px;\r\n        box-sizing: border-box;\r\n    }\r\n    #buildori-viewer-wrapper * { box-sizing: border-box; }\r\n\r\n    \/* --- LAYOUT & DIRECTION --- *\/\r\n    \/* Default (English\/LTR) *\/\r\n    .bv-container {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 30px;\r\n        max-width: 1650px;\r\n        margin: 0 auto;\r\n        direction: ltr; \r\n        text-align: left; \/* Default LTR alignment *\/\r\n    }\r\n\r\n    \/* Arabic (RTL) Mode - Forces everything to flip *\/\r\n    .bv-container.rtl {\r\n        direction: rtl !important;\r\n        text-align: right !important; \/* Force text to right *\/\r\n        font-family: 'Cairo', 'Inter', sans-serif; \r\n    }\r\n\r\n    @media (min-width: 768px) {\r\n        .bv-container {\r\n            flex-direction: row;\r\n            align-items: flex-start;\r\n        }\r\n    }\r\n\r\n    \/* --- SIDEBAR --- *\/\r\n    .bv-sidebar {\r\n        width: 100%;\r\n        background: #ffffff;\r\n        border-radius: 16px;\r\n        border: 1px solid #e2e8f0;\r\n        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);\r\n        display: flex;\r\n        flex-direction: column;\r\n        overflow: hidden; \r\n    }\r\n\r\n    @media (min-width: 768px) {\r\n        .bv-sidebar {\r\n            width: 320px;\r\n            height: 720px; \r\n            flex-shrink: 0;\r\n        }\r\n    }\r\n\r\n    \/* Header - FIXED ALIGNMENT *\/\r\n    .bv-sidebar-header { \r\n        height: 75px; \r\n        padding: 24px 24px 0 24px; \r\n        background: white; \r\n        border-bottom: 1px solid #f1f5f9; \r\n        flex-shrink: 0;\r\n        display: flex; \r\n        flex-direction: column;\r\n        justify-content: center;\r\n        \r\n        \/* Smart Alignment: 'flex-start' means Left in LTR, and Right in RTL *\/\r\n        align-items: flex-start; \r\n    }\r\n\r\n    \/* Explicit Override for RTL Header to ensure right alignment *\/\r\n    .bv-container.rtl .bv-sidebar-header {\r\n        align-items: flex-start; \r\n        text-align: right !important;\r\n    }\r\n\r\n    .bv-sidebar-footer { height: 75px; padding: 15px 24px; background: white; border-top: 1px solid #f1f5f9; flex-shrink: 0; }\r\n\r\n    \/* Scroll Area *\/\r\n    .bv-sidebar-content {\r\n        height: 570px; \r\n        overflow-y: auto; \r\n        padding: 10px 24px;\r\n        background: #fff;\r\n        overscroll-behavior: contain; \r\n    }\r\n\r\n    \/* Scrollbar *\/\r\n    .bv-sidebar-content::-webkit-scrollbar { width: 10px; }\r\n    .bv-sidebar-content::-webkit-scrollbar-track { background: #f8fafc; }\r\n    .bv-sidebar-content::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 5px; border: 2px solid #f8fafc; }\r\n    .bv-sidebar-content::-webkit-scrollbar-thumb:hover { background: #94a3b8; }\r\n\r\n    \/* Typography *\/\r\n    .bv-title { font-size: 20px; font-weight: 800; color: #1e293b; margin: 0; line-height: 1.2; width: 100%; }\r\n    .bv-subtitle { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; font-weight: 600; width: 100%; }\r\n    \r\n    .bv-category-group { margin-bottom: 8px; border-bottom: 1px solid #f1f5f9; padding-bottom: 8px; }\r\n    \r\n    \/* Buttons *\/\r\n    .bv-parent-btn {\r\n        width: 100%; display: flex; justify-content: space-between; align-items: center;\r\n        padding: 12px 8px; background: transparent; border: none; color: #334155;\r\n        font-size: 14px; font-weight: 700; cursor: pointer; \r\n        text-align: inherit; \/* Inherits LTR or RTL *\/\r\n    }\r\n    .bv-parent-btn:hover { color: #2563eb; }\r\n    \r\n    .bv-chevron { transition: transform 0.3s ease; font-size: 12px; color: #94a3b8; }\r\n    .bv-parent-btn.open .bv-chevron { transform: rotate(180deg); color: #2563eb; }\r\n\r\n    \/* Menu indentation flips automatically in RTL *\/\r\n    .bv-child-container { display: none; padding-inline-start: 12px; padding-top: 4px; flex-direction: column; gap: 4px; }\r\n    .bv-child-container.show { display: flex; }\r\n\r\n    .bv-child-btn {\r\n        text-align: inherit;\r\n        padding: 8px 12px; background: transparent;\r\n        border: 1px solid transparent; border-radius: 6px; color: #64748b;\r\n        font-size: 13px; cursor: pointer; transition: all 0.2s;\r\n    }\r\n    .bv-child-btn:hover { background: #f8fafc; color: #334155; }\r\n    .bv-child-btn.active { background: #eff6ff; color: #2563eb; border-color: #bfdbfe; font-weight: 600; }\r\n    .bv-child-btn.disabled { opacity: 0.5; cursor: not-allowed; }\r\n\r\n    .bv-toggles { display: flex; gap: 8px; }\r\n    .bv-toggle-btn { flex: 1; padding: 10px; border: 1px solid #e2e8f0; background: white; border-radius: 8px; font-size: 12px; color: #64748b; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 6px; }\r\n\r\n    \/* Preview Area *\/\r\n    .bv-preview-area {\r\n        flex-grow: 1; background: #e2e8f0; border-radius: 16px; padding: 20px;\r\n        height: 720px; display: flex; justify-content: center; align-items: flex-start; width: 100%;\r\n    }\r\n    .bv-device-frame {\r\n        width: 100%; height: 100%; background: white; border-radius: 12px;\r\n        overflow: hidden; position: relative; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\r\n        border: 1px solid #cbd5e1; transition: width 0.4s ease;\r\n    }\r\n    iframe { width: 100%; height: 100%; border: none; }\r\n    \r\n    .bv-loader-overlay { position: absolute; inset: 0; background: rgba(255,255,255,0.9); display: none; justify-content: center; align-items: center; z-index: 50; }\r\n    .bv-spinner { width: 40px; height: 40px; border: 4px solid #f3f3f3; border-top: 4px solid #2563eb; border-radius: 50%; animation: bv-spin 1s linear infinite; }\r\n    @keyframes bv-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }\r\n    .bv-empty-state { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; background: #f8fafc; z-index: 10; text-align: center; padding: 20px; }\r\n    .bv-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.2; }\r\n<\/style>\r\n\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@400;600;700&amp;display=swap\" rel=\"stylesheet\">\r\n\r\n<div id=\"buildori-viewer-wrapper\">\r\n    <div id=\"bv-main-container\" class=\"bv-container\">\r\n        \r\n        <div class=\"bv-sidebar\">\r\n            <div class=\"bv-sidebar-header\">\r\n                <div>\r\n                    <h2 class=\"bv-title\">Buildori<\/h2>\r\n                    <p class=\"bv-subtitle\" data-key=\"subtitle\">\u0645\u0633\u062a\u0643\u0634\u0641 \u0627\u0644\u0645\u0644\u0641 \u0627\u0644\u062a\u0639\u0631\u064a\u0641\u064a<\/p>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div id=\"bv-scroll-target\" class=\"bv-sidebar-content\">\r\n                <div id=\"bv-menu-root\"><\/div>\r\n            <\/div>\r\n\r\n            <div class=\"bv-sidebar-footer\">\r\n                <div class=\"bv-toggles\">\r\n                    <button onclick=\"bvResize('100%')\" class=\"bv-toggle-btn\" id=\"btn-desktop\">\ud83d\udda5\ufe0f \u0633\u0637\u062d \u0627\u0644\u0645\u0643\u062a\u0628<\/button>\r\n<button onclick=\"bvResize('375px')\" class=\"bv-toggle-btn\" id=\"btn-mobile\">\ud83d\udcf1 \u0627\u0644\u0647\u0627\u062a\u0641 \u0627\u0644\u0645\u062d\u0645\u0648\u0644<\/button>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"bv-preview-area\">\r\n            <div id=\"bv-frame-container\" class=\"bv-device-frame\">\r\n                <div id=\"bv-loader\" class=\"bv-loader-overlay\"><div class=\"bv-spinner\"><\/div><\/div>\r\n                <div id=\"bv-empty\" class=\"bv-empty-state\">\r\n                    <div class=\"bv-icon\">\ud83d\udcc2<\/div>\r\n                    <h3 style=\"margin:0 0 8px 0; color:#334155;\" data-key=\"emptyTitle\">\u0627\u062e\u062a\u0631 \u0645\u0634\u0631\u0648\u0639\u064b\u0627<\/h3>\r\n                    <p style=\"color:#94a3b8; font-size:14px; max-width: 250px;\" data-key=\"emptyDesc\">\u0642\u0645 \u0628\u062a\u0648\u0633\u064a\u0639 \u0641\u0626\u0629 \u0639\u0644\u0649 \u0627\u0644\u064a\u0633\u0627\u0631 \u0648\u0627\u0646\u0642\u0631 \u0639\u0644\u0649 \u0646\u0633\u062e\u0629 \u062a\u062c\u0631\u064a\u0628\u064a\u0629 \u0644\u0639\u0631\u0636\u0647\u0627.<\/p>\r\n                <\/div>\r\n                <iframe id=\"bv-iframe\"><\/iframe>\r\n            <\/div>\r\n        <\/div>\r\n\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\n    \/\/ --- 1. ROBUST LANGUAGE DETECTION ---\r\n    function getPageLanguage() {\r\n        const htmlLang = document.documentElement.lang || '';\r\n        const htmlDir = document.documentElement.dir || '';\r\n        \r\n        \/\/ Check 1: HTML Lang Attribute (ar, ar-SA, etc)\r\n        if (htmlLang.startsWith('ar')) return 'ar';\r\n        \r\n        \/\/ Check 2: HTML Dir Attribute (rtl)\r\n        if (htmlDir === 'rtl') return 'ar';\r\n\r\n        \/\/ Check 3: Body Class (WordPress standard)\r\n        if (document.body.classList.contains('rtl')) return 'ar';\r\n\r\n        return 'en';\r\n    }\r\n\r\n    const currentLang = getPageLanguage();\r\n\r\n    \/\/ --- 2. TRANSLATIONS ---\r\n    const i18n = {\r\n        en: {\r\n            subtitle: \"Portfolio Explorer\",\r\n            desktop: \"\ud83d\udda5\ufe0f Desktop\",\r\n            mobile: \"\ud83d\udcf1 Mobile\",\r\n            emptyTitle: \"Select a Project\",\r\n            emptyDesc: \"Expand a category and click a mockup version to view it.\",\r\n            comingSoon: \"Coming Soon\"\r\n        },\r\n        ar: {\r\n            subtitle: \"\u0645\u0633\u062a\u0643\u0634\u0641 \u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639\",\r\n            desktop: \"\ud83d\udda5\ufe0f \u0633\u0637\u062d \u0627\u0644\u0645\u0643\u062a\u0628\",\r\n            mobile: \"\ud83d\udcf1 \u0627\u0644\u062c\u0648\u0627\u0644\",\r\n            emptyTitle: \"\u0627\u062e\u062a\u0631 \u0645\u0634\u0631\u0648\u0639\u0627\u064b\",\r\n            emptyDesc: \"\u0627\u0641\u062a\u062d \u0642\u0627\u0626\u0645\u0629 \u0645\u0646 \u0627\u0644\u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u062c\u0627\u0646\u0628\u064a\u0629 \u0648\u0627\u062e\u062a\u0631 \u0646\u0645\u0648\u0630\u062c\u0627\u064b \u0644\u0639\u0631\u0636\u0647.\",\r\n            comingSoon: \"\u0642\u0631\u064a\u0628\u0627\u064b\"\r\n        }\r\n    };\r\n\r\n    \/\/ --- 3. MENU DATA ---\r\n    const mockupsData = [\r\n        { \r\n            title_en: \"E-Commerce Websites\", \r\n            title_ar: \"\u0645\u062a\u0627\u062c\u0631 \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629\",\r\n            items: [\r\n                { name_en: \"Serenity Sensory Store\", name_ar: \"\u0645\u062a\u062c\u0631 \u0633\u064a\u0631\u064a\u0646\u064a\u062a\u064a\", url: \"aHR0cHM6Ly9idWlsZG9yaS5jb20vbW9ja3Vwcy9zZXJlbml0eS1zdG9yZS5waHA=\" },\r\n                { name_en: \"Fashion\", name_ar: \"\u0623\u0632\u064a\u0627\u0621 \u0648\u0645\u0648\u0636\u0629\", url: \"aHR0cHM6Ly9idWlsZG9yaS5jb20vbW9ja3Vwcy9CdWlsZG9yaS1mYXNoaW9uLnBocA==\" },\r\n                { name_en: \"The Tech Boutique\", name_ar: \"\u0628\u0648\u062a\u064a\u0643 \u0627\u0644\u062a\u0642\u0646\u064a\u0629\", url: \"aHR0cHM6Ly9idWlsZG9yaS5jb20vbW9ja3Vwcy9CdWlsZG9yaS1TYXBwaGlyZS1FZGl0aW9uLnBocA==\" },\r\n                { name_en: \"Jewelry\", name_ar: \"\u0645\u062c\u0648\u0647\u0631\u0627\u062a \u0641\u0627\u062e\u0631\u0629\", url: \"aHR0cHM6Ly9idWlsZG9yaS5jb20vbW9ja3Vwcy9KZXdlbHJ5LnBocA==\" },\r\n                { name_en: \"Furniture\", name_ar: \"\u0623\u062b\u0627\u062b \u0645\u0646\u0632\u0644\u064a\", url: \"\" },\r\n                { name_en: \"Grocery\", name_ar: \"\u062a\u0648\u0635\u064a\u0644 \u0628\u0642\u0627\u0644\u0629\", url: \"\" }\r\n            ] \r\n        },\r\n        { \r\n            title_en: \"Business (Corporate)\", \r\n            title_ar: \"\u0634\u0631\u0643\u0627\u062a \u0648\u0623\u0639\u0645\u0627\u0644\",\r\n            items: [\r\n                { name_en: \"Corporate V1\", name_ar: \"\u0634\u0631\u0643\u0629 \u0646\u0645\u0648\u0630\u062c 1\", url: \"\" },\r\n                { name_en: \"Corporate V2\", name_ar: \"\u0634\u0631\u0643\u0629 \u0646\u0645\u0648\u0630\u062c 2\", url: \"\" },\r\n                { name_en: \"Corporate V3\", name_ar: \"\u0634\u0631\u0643\u0629 \u0646\u0645\u0648\u0630\u062c 3\", url: \"\" },\r\n                { name_en: \"Corporate V4\", name_ar: \"\u0634\u0631\u0643\u0629 \u0646\u0645\u0648\u0630\u062c 4\", url: \"\" },\r\n                { name_en: \"Corporate V5\", name_ar: \"\u0634\u0631\u0643\u0629 \u0646\u0645\u0648\u0630\u062c 5\", url: \"\" }\r\n            ] \r\n        },\r\n        { \r\n            title_en: \"Blogs & Personal\", \r\n            title_ar: \"\u0645\u062f\u0648\u0646\u0627\u062a \u0634\u062e\u0635\u064a\u0629\",\r\n            items: [\r\n                { name_en: \"Personal Brand\", name_ar: \"\u0639\u0644\u0627\u0645\u0629 \u0634\u062e\u0635\u064a\u0629\", url: \"\" },\r\n                { name_en: \"Minimal Blog\", name_ar: \"\u0645\u062f\u0648\u0646\u0629 \u0628\u0633\u064a\u0637\u0629\", url: \"\" },\r\n                { name_en: \"Magazine\", name_ar: \"\u0645\u062c\u0644\u0629 \u0631\u0642\u0645\u064a\u0629\", url: \"\" },\r\n                { name_en: \"Tech Blog\", name_ar: \"\u0645\u062f\u0648\u0646\u0629 \u062a\u0642\u0646\u064a\u0629\", url: \"\" },\r\n                { name_en: \"Portfolio\", name_ar: \"\u0645\u0639\u0631\u0636 \u0634\u062e\u0635\u064a\", url: \"\" }\r\n            ] \r\n        },\r\n        { \r\n            title_en: \"Portfolio Websites\", \r\n            title_ar: \"\u0645\u0639\u0631\u0636 \u0623\u0639\u0645\u0627\u0644\",\r\n            items: [\r\n                { name_en: \"Agency\", name_ar: \"\u0648\u0643\u0627\u0644\u0629 \u0631\u0642\u0645\u064a\u0629\", url: \"\" },\r\n                { name_en: \"Photographer\", name_ar: \"\u0645\u0635\u0648\u0631 \u0641\u0648\u062a\u0648\u063a\u0631\u0627\u0641\u064a\", url: \"\" },\r\n                { name_en: \"Developer\", name_ar: \"\u0645\u0637\u0648\u0631 \u0628\u0631\u0645\u062c\u064a\u0627\u062a\", url: \"\" },\r\n                { name_en: \"Architect\", name_ar: \"\u0645\u0647\u0646\u062f\u0633 \u0645\u0639\u0645\u0627\u0631\u064a\", url: \"\" },\r\n                { name_en: \"Designer\", name_ar: \"\u0645\u0635\u0645\u0645 \u062c\u0631\u0627\u0641\u064a\u0643\", url: \"\" }\r\n            ] \r\n        },\r\n        { \r\n            title_en: \"Web Applications\", \r\n            title_ar: \"\u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0648\u064a\u0628\",\r\n            items: [\r\n                { name_en: \"Dashboard\", name_ar: \"\u0644\u0648\u062d\u0629 \u062a\u062d\u0643\u0645\", url: \"\" },\r\n                { name_en: \"CRM System\", name_ar: \"\u0646\u0638\u0627\u0645 \u0625\u062f\u0627\u0631\u0629 \u0639\u0645\u0644\u0627\u0621\", url: \"\" },\r\n                { name_en: \"Analytics\", name_ar: \"\u062a\u062d\u0644\u064a\u0644\u0627\u062a \u0628\u064a\u0627\u0646\u0627\u062a\", url: \"\" },\r\n                { name_en: \"Project Mgr\", name_ar: \"\u0625\u062f\u0627\u0631\u0629 \u0645\u0634\u0627\u0631\u064a\u0639\", url: \"\" },\r\n                { name_en: \"Chat App\", name_ar: \"\u062a\u0637\u0628\u064a\u0642 \u0645\u062d\u0627\u062f\u062b\u0629\", url: \"\" }\r\n            ] \r\n        },\r\n        { \r\n            title_en: \"Educational\", \r\n            title_ar: \"\u062a\u0639\u0644\u064a\u0645\u064a\",\r\n            items: [\r\n                { name_en: \"Course Site\", name_ar: \"\u0645\u0648\u0642\u0639 \u062f\u0648\u0631\u0627\u062a\", url: \"\" },\r\n                { name_en: \"University\", name_ar: \"\u062c\u0627\u0645\u0639\u0629\", url: \"\" },\r\n                { name_en: \"Kids Learning\", name_ar: \"\u062a\u0639\u0644\u064a\u0645 \u0623\u0637\u0641\u0627\u0644\", url: \"\" },\r\n                { name_en: \"Tutor\", name_ar: \"\u0645\u062f\u0631\u0633 \u062e\u0635\u0648\u0635\u064a\", url: \"\" },\r\n                { name_en: \"Exams\", name_ar: \"\u0646\u0638\u0627\u0645 \u0627\u062e\u062a\u0628\u0627\u0631\u0627\u062a\", url: \"\" }\r\n            ] \r\n        },\r\n        { \r\n            title_en: \"Social Media\", \r\n            title_ar: \"\u062a\u0648\u0627\u0635\u0644 \u0627\u062c\u062a\u0645\u0627\u0639\u064a\",\r\n            items: [\r\n                { name_en: \"Social Feed\", name_ar: \"\u062a\u063a\u0630\u064a\u0629 \u0627\u062c\u062a\u0645\u0627\u0639\u064a\u0629\", url: \"\" },\r\n                { name_en: \"Forum\", name_ar: \"\u0645\u0646\u062a\u062f\u0649\", url: \"\" },\r\n                { name_en: \"Profile\", name_ar: \"\u0645\u0644\u0641 \u0634\u062e\u0635\u064a\", url: \"\" },\r\n                { name_en: \"News\", name_ar: \"\u0623\u062e\u0628\u0627\u0631\", url: \"\" },\r\n                { name_en: \"Groups\", name_ar: \"\u0645\u062c\u0645\u0648\u0639\u0627\u062a\", url: \"\" }\r\n            ] \r\n        },\r\n        { \r\n            title_en: \"Landing Pages\", \r\n            title_ar: \"\u0635\u0641\u062d\u0627\u062a \u0647\u0628\u0648\u0637\",\r\n            items: [\r\n                { name_en: \"Product Launch\", name_ar: \"\u0625\u0637\u0644\u0627\u0642 \u0645\u0646\u062a\u062c\", url: \"\" },\r\n                { name_en: \"App Download\", name_ar: \"\u062a\u062d\u0645\u064a\u0644 \u062a\u0637\u0628\u064a\u0642\", url: \"\" },\r\n                { name_en: \"Event\", name_ar: \"\u0641\u0639\u0627\u0644\u064a\u0629\", url: \"\" },\r\n                { name_en: \"Webinar\", name_ar: \"\u0646\u062f\u0648\u0629 \u0639\u0628\u0631 \u0627\u0644\u0625\u0646\u062a\u0631\u0646\u062a\", url: \"\" },\r\n                { name_en: \"Lead Magnet\", name_ar: \"\u062c\u0630\u0628 \u0639\u0645\u0644\u0627\u0621\", url: \"\" }\r\n            ] \r\n        }\r\n    ];\r\n\r\n    \/\/ --- 4. INIT ---\r\n    const container = document.getElementById('bv-main-container');\r\n    const menuRoot = document.getElementById('bv-menu-root');\r\n    const iframe = document.getElementById('bv-iframe');\r\n    const loader = document.getElementById('bv-loader');\r\n    const emptyState = document.getElementById('bv-empty');\r\n    const frameContainer = document.getElementById('bv-frame-container');\r\n    const scrollTarget = document.getElementById('bv-scroll-target');\r\n\r\n    \/\/ Scroll Isolator\r\n    scrollTarget.addEventListener('wheel', (e) => {\r\n        const scrollTop = scrollTarget.scrollTop;\r\n        const scrollHeight = scrollTarget.scrollHeight;\r\n        const height = scrollTarget.clientHeight;\r\n        const delta = e.deltaY;\r\n        const isUp = delta < 0;\r\n        const isDown = delta > 0;\r\n        if (isUp && scrollTop <= 0) { e.preventDefault(); return; }\r\n        if (isDown && (scrollTop + height >= scrollHeight - 1)) { e.preventDefault(); return; }\r\n        e.stopPropagation(); \r\n    }, { passive: false });\r\n\r\n    function initViewer() {\r\n        \/\/ Apply Direction Class\r\n        if(currentLang === 'ar') {\r\n            container.classList.add('rtl');\r\n        } else {\r\n            container.classList.remove('rtl');\r\n        }\r\n\r\n        \/\/ Apply Static Text Translations\r\n        document.getElementById('btn-desktop').innerText = i18n[currentLang].desktop;\r\n        document.getElementById('btn-mobile').innerText = i18n[currentLang].mobile;\r\n        \r\n        document.querySelectorAll('[data-key]').forEach(el => {\r\n            const key = el.getAttribute('data-key');\r\n            if(i18n[currentLang][key]) el.innerText = i18n[currentLang][key];\r\n        });\r\n\r\n        renderMenu();\r\n    }\r\n\r\n    function renderMenu() {\r\n        menuRoot.innerHTML = '';\r\n        \r\n        mockupsData.forEach((category) => {\r\n            const catGroup = document.createElement('div');\r\n            catGroup.className = 'bv-category-group';\r\n            \r\n            const parentBtn = document.createElement('button');\r\n            parentBtn.className = 'bv-parent-btn';\r\n            \r\n            \/\/ Logic: Pick AR or EN title based on page language\r\n            const catTitle = currentLang === 'ar' ? category.title_ar : category.title_en;\r\n            \r\n            parentBtn.innerHTML = `${catTitle} <span class=\"bv-chevron\">\u25bc<\/span>`;\r\n            parentBtn.onclick = () => toggleCategory(parentBtn, childContainer);\r\n            \r\n            const childContainer = document.createElement('div');\r\n            childContainer.className = 'bv-child-container';\r\n            \r\n            category.items.forEach((item) => {\r\n                const childBtn = document.createElement('button');\r\n                childBtn.className = 'bv-child-btn';\r\n                \r\n                \/\/ Logic: Pick AR or EN item name\r\n                const itemName = currentLang === 'ar' ? item.name_ar : item.name_en;\r\n                \r\n                if(item.url && item.url !== \"\") {\r\n                    childBtn.innerText = itemName;\r\n                    childBtn.onclick = () => loadUrl(item.url, childBtn);\r\n                } else {\r\n                    const comingSoon = i18n[currentLang].comingSoon;\r\n                    childBtn.innerText = `${itemName} (${comingSoon})`;\r\n                    childBtn.classList.add('disabled');\r\n                }\r\n                childContainer.appendChild(childBtn);\r\n            });\r\n            \r\n            catGroup.appendChild(parentBtn);\r\n            catGroup.appendChild(childContainer);\r\n            menuRoot.appendChild(catGroup);\r\n        });\r\n    }\r\n\r\n    function toggleCategory(btn, container) {\r\n        container.classList.toggle('show');\r\n        btn.classList.toggle('open');\r\n    }\r\n\r\n    function loadUrl(encodedUrl, btn) {\r\n        document.querySelectorAll('.bv-child-btn').forEach(b => b.classList.remove('active'));\r\n        btn.classList.add('active');\r\n        emptyState.style.display = 'none';\r\n        loader.style.display = 'flex';\r\n\r\n        try {\r\n            const realUrl = atob(encodedUrl);\r\n\r\n            fetch(realUrl)\r\n                .then(response => {\r\n                    if (!response.ok) throw new Error(\"Network response was not ok\");\r\n                    return response.text();\r\n                })\r\n                .then(htmlContent => {\r\n                    const redirectScript = `\r\n                        <script>\r\n                            if (window.self === window.top) {\r\n                                window.location.href = \"https:\/\/buildori.com\";\r\n                            }\r\n                        <\\\/script>\r\n                    `;\r\n                    const protectedHtml = htmlContent + redirectScript;\r\n                    const blob = new Blob([protectedHtml], { type: 'text\/html' });\r\n                    const blobUrl = URL.createObjectURL(blob);\r\n\r\n                    iframe.src = blobUrl;\r\n                    iframe.onload = () => { loader.style.display = 'none'; };\r\n                })\r\n                .catch(err => {\r\n                    console.error(\"Secure Load Failed\", err);\r\n                    loader.style.display = 'none';\r\n                    alert(\"Error loading protected file.\");\r\n                });\r\n\r\n        } catch(e) {\r\n            console.error(\"Decoding Error\");\r\n            loader.style.display = 'none';\r\n        }\r\n    }\r\n\r\n    function bvResize(width) {\r\n        frameContainer.style.width = width;\r\n    }\r\n\r\n    initViewer();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Buildori \u0645\u0633\u062a\u0643\u0634\u0641 \u0627\u0644\u0645\u0644\u0641 \u0627\u0644\u062a\u0639\u0631\u064a\u0641\u064a \ud83d\udda5\ufe0f \u0633\u0637\u062d \u0627\u0644\u0645\u0643\u062a\u0628 \ud83d\udcf1 \u0627\u0644\u0647\u0627\u062a\u0641 \u0627\u0644\u0645\u062d\u0645\u0648\u0644 \ud83d\udcc2 \u0627\u062e\u062a\u0631 \u0645\u0634\u0631\u0648\u0639\u064b\u0627 \u0642\u0645 \u0628\u062a\u0648\u0633\u064a\u0639 \u0641\u0626\u0629 \u0639\u0644\u0649 \u0627\u0644\u064a\u0633\u0627\u0631 \u0648\u0627\u0646\u0642\u0631 \u0639\u0644\u0649 \u0646\u0633\u062e\u0629 \u062a\u062c\u0631\u064a\u0628\u064a\u0629 \u0644\u0639\u0631\u0636\u0647\u0627.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_theme","meta":{"_acf_changed":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"class_list":["post-6107","page","type-page","status-publish","hentry"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/buildori.com\/ar\/wp-json\/wp\/v2\/pages\/6107","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buildori.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/buildori.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/buildori.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buildori.com\/ar\/wp-json\/wp\/v2\/comments?post=6107"}],"version-history":[{"count":5,"href":"https:\/\/buildori.com\/ar\/wp-json\/wp\/v2\/pages\/6107\/revisions"}],"predecessor-version":[{"id":6129,"href":"https:\/\/buildori.com\/ar\/wp-json\/wp\/v2\/pages\/6107\/revisions\/6129"}],"wp:attachment":[{"href":"https:\/\/buildori.com\/ar\/wp-json\/wp\/v2\/media?parent=6107"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}