{"id":1243,"date":"2026-06-18T08:02:53","date_gmt":"2026-06-18T08:02:53","guid":{"rendered":"https:\/\/kurdi.krd\/?p=1243"},"modified":"2026-07-09T08:34:09","modified_gmt":"2026-07-09T08:34:09","slug":"%d8%b2%d8%a7%d8%b1%d8%a7%d9%88%db%95%db%8c-%d8%a8%d8%a7%d8%af%db%8c%d9%86%db%8c-%d9%be%db%8c%d8%aa%db%8c-%d8%b9%db%95%d8%b1%db%95%d8%a8%db%8c","status":"publish","type":"post","link":"https:\/\/kurdi.krd\/?p=1243","title":{"rendered":"badini arabi"},"content":{"rendered":"\n<style>\n    \/* Kurdish Alphabet Full-Page Accordion - Premium Glassmorphism & Lock Screen Edition\n       Font: XB Niloofar (Ensure this is loaded in your WP theme)\n    *\/\n    \n    \/* Fluid Colorful Background *\/\n    .kurdish-alphabet-page {\n        font-family: 'XB Niloofar', Tahoma, Arial, sans-serif;\n        direction: rtl;\n        width: 100%;\n        max-width: 1200px; \n        margin: 0 auto;\n        display: flex;\n        flex-direction: column;\n        gap: 16px;\n        padding: 20px 10px; \n        box-sizing: border-box;\n        position: relative;\n        min-height: 60vh; \n        \n        \/* Vibrant, smooth liquid gradient - Yellow, Coral, Mint, Light Blue *\/\n        background: linear-gradient(-45deg, #f6d365, #ffb199, #9cedad, #90e0ef);\n        background-size: 300% 300%;\n        animation: fluidGradient 15s ease infinite;\n        border-radius: 24px;\n        \n        counter-reset: alphabet-counter;\n    }\n\n    @keyframes fluidGradient {\n        0% { background-position: 0% 50%; }\n        50% { background-position: 100% 50%; }\n        100% { background-position: 0% 50%; }\n    }\n\n    \/* Glassmorphism Shared Utility *\/\n    .glass-panel {\n        background: rgba(255, 255, 255, 0.45);\n        backdrop-filter: blur(16px);\n        -webkit-backdrop-filter: blur(16px);\n        border: 1px solid rgba(255, 255, 255, 0.6);\n        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);\n    }\n\n    \/* --- Security Lock Screen --- *\/\n    #security-lock-screen {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        flex-direction: column;\n        width: 100%;\n        min-height: 50vh;\n        border-radius: 24px;\n        animation: fadeIn 0.5s ease;\n    }\n\n    .lock-box {\n        background: rgba(255, 255, 255, 0.85);\n        padding: 40px 30px;\n        border-radius: 24px;\n        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);\n        border: 1px solid rgba(255, 255, 255, 0.9);\n        text-align: center;\n        max-width: 320px;\n        width: 90%;\n    }\n\n    .lock-icon {\n        width: 48px;\n        height: 48px;\n        color: #007aff;\n        margin-bottom: 16px;\n    }\n\n    .lock-title {\n        font-size: 24px;\n        font-weight: 700;\n        color: #1d1d1f;\n        margin: 0 0 8px 0;\n    }\n\n    .lock-desc {\n        font-size: 16px;\n        color: #86868b;\n        margin: 0 0 24px 0;\n    }\n\n    .pin-input {\n        width: 100%;\n        padding: 16px;\n        font-size: 24px;\n        text-align: center;\n        letter-spacing: 8px;\n        border: 2px solid #e5e5ea;\n        border-radius: 12px;\n        background: #fbfbfd;\n        color: #1d1d1f;\n        outline: none;\n        transition: border-color 0.3s;\n        box-sizing: border-box;\n        font-family: monospace;\n        margin-bottom: 16px;\n        direction: ltr;\n    }\n\n    .pin-input:focus {\n        border-color: #007aff;\n    }\n\n    .pin-input.error {\n        border-color: #ff3b30;\n        animation: shake 0.4s;\n    }\n\n    @keyframes shake {\n        0%, 100% { transform: translateX(0); }\n        25% { transform: translateX(-5px); }\n        75% { transform: translateX(5px); }\n    }\n\n    .submit-pin-btn {\n        width: 100%;\n        padding: 16px;\n        background: #007aff;\n        color: white;\n        border: none;\n        border-radius: 12px;\n        font-size: 18px;\n        font-weight: bold;\n        cursor: pointer;\n        font-family: inherit;\n        transition: background 0.2s;\n    }\n\n    .submit-pin-btn:hover {\n        background: #0056b3;\n    }\n\n    \/* --- Main Content Wrapper --- *\/\n    #main-app-content {\n        display: none; \n        flex-direction: column;\n        gap: 16px;\n        animation: fadeIn 0.6s ease forwards;\n        width: 100%;\n    }\n\n    \/* FIX: Header Images Component - strict sizing *\/\n    .header-images-container {\n        display: flex;\n        flex-direction: row; \n        flex-wrap: nowrap;\n        justify-content: space-between;\n        align-items: stretch;\n        gap: 12px;\n        padding: 12px;\n        border-radius: 20px;\n        margin-bottom: 8px;\n        width: 100%;\n        box-sizing: border-box; \/* Prevents padding from causing overflow *\/\n    }\n\n    .header-img {\n        flex: 1;\n        width: 100%;\n        min-width: 0; \/* Critical fix for flexbox image bleed *\/\n        height: auto;\n        object-fit: cover;\n        border-radius: 14px;\n        border: 2px solid rgba(255, 255, 255, 0.8);\n        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n        background-color: rgba(255, 255, 255, 0.5);\n        transition: transform 0.3s ease, box-shadow 0.3s ease;\n        box-sizing: border-box;\n    }\n\n    .header-img:hover {\n        transform: translateY(-2px) scale(1.01);\n        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);\n    }\n\n    \/* Segmented Tab Controls *\/\n    .tabs-navigation {\n        display: flex;\n        background: rgba(255, 255, 255, 0.4);\n        padding: 8px;\n        border-radius: 18px;\n        gap: 8px;\n        margin-bottom: 12px;\n        border: 1px solid rgba(255, 255, 255, 0.5);\n        box-sizing: border-box;\n        width: 100%;\n    }\n\n    .tab-button {\n        flex: 1;\n        padding: 14px 10px;\n        border: none;\n        background: transparent;\n        border-radius: 14px;\n        font-family: inherit;\n        font-size: 18px;\n        font-weight: 700;\n        color: #4a4a4e;\n        cursor: pointer;\n        transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);\n        text-align: center;\n        box-sizing: border-box;\n    }\n\n    .tab-button:hover:not(.active) {\n        background: rgba(255, 255, 255, 0.6);\n    }\n\n    .tab-button.active {\n        background: #ffffff;\n        color: #007aff;\n        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);\n    }\n\n    .tab-content {\n        display: none; \n        animation: fadeIn 0.4s ease forwards;\n        width: 100%;\n        box-sizing: border-box;\n    }\n\n    .tab-content.active {\n        display: block; \n    }\n\n    @keyframes fadeIn {\n        from { opacity: 0; transform: translateY(10px); }\n        to { opacity: 1; transform: translateY(0); }\n    }\n\n    \/* Sticky Search Bar *\/\n    .search-container {\n        position: sticky;\n        top: 10px;\n        z-index: 100;\n        border-radius: 16px;\n        padding: 12px;\n        margin-bottom: 16px;\n    }\n\n    .search-input {\n        width: 100%;\n        padding: 14px 20px;\n        font-size: 18px;\n        font-family: inherit;\n        border: 1px solid rgba(255, 255, 255, 0.8);\n        border-radius: 12px;\n        background: rgba(255, 255, 255, 0.6);\n        color: #1d1d1f;\n        outline: none;\n        transition: all 0.3s ease;\n        box-sizing: border-box;\n        direction: rtl;\n    }\n\n    .search-input:focus {\n        background: rgba(255, 255, 255, 0.9);\n        border-color: #007aff;\n        box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.15);\n    }\n\n    \/* Alphabet Cards *\/\n    .alphabet-card {\n        border-radius: 16px;\n        overflow: hidden;\n        transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);\n        scroll-margin-top: 100px; \n    }\n\n    .alphabet-card.active {\n        background: rgba(255, 255, 255, 0.85);\n        border-color: rgba(255, 255, 255, 0.9);\n        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);\n        transform: scale(1.01);\n    }\n\n    .alphabet-card:hover:not(.active) {\n        background: rgba(255, 255, 255, 0.6);\n    }\n\n    .card-header {\n        width: 100%;\n        background: transparent;\n        border: none;\n        padding: 16px 20px; \n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        cursor: pointer;\n        font-family: inherit;\n        color: #1d1d1f;\n        text-align: right;\n    }\n\n    \/* Automated Kurdish Numbering *\/\n    .letter-title {\n        font-size: 28px; \n        font-weight: 700;\n        line-height: 1;\n        margin: 0;\n        display: flex;\n        align-items: center;\n    }\n\n    .letter-title::before {\n        counter-increment: alphabet-counter;\n        content: counter(alphabet-counter, arabic-indic) \" - \";\n        font-size: 0.6em; \n        color: #007aff;\n        font-weight: 700;\n        margin-left: 12px;\n        opacity: 0.8;\n    }\n\n    .toggle-icon {\n        width: 24px;\n        height: 24px;\n        color: #4a4a4e;\n        transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), color 0.3s ease;\n    }\n\n    .card-content-wrapper {\n        display: grid;\n        grid-template-rows: 0fr;\n        transition: grid-template-rows 0.4s cubic-bezier(0.25, 1, 0.5, 1);\n    }\n\n    .alphabet-card.active .card-content-wrapper {\n        grid-template-rows: 1fr;\n    }\n\n    .card-content {\n        overflow: hidden;\n    }\n\n    .content-inner {\n        padding: 0 16px 20px 16px; \n        display: flex;\n        flex-direction: column;\n        gap: 16px;\n    }\n\n    .media-container {\n        display: flex !important;\n        flex-direction: row !important;\n        flex-wrap: nowrap !important;\n        justify-content: space-between !important;\n        gap: 12px !important;\n        width: 100% !important;\n        box-sizing: border-box !important;\n    }\n\n    .media-container img {\n        flex: 1 1 0 !important; \n        width: 100% !important;\n        min-width: 0 !important;\n        height: auto !important;\n        aspect-ratio: 732 \/ 1024 !important;\n        object-fit: cover !important;\n        border-radius: 12px !important;\n        border: 2px solid #ffffff !important;\n        background-color: rgba(255,255,255,0.5) !important;\n        display: block !important;\n        transition: transform 0.3s ease !important;\n    }\n\n    @media (hover: hover) {\n        .media-container img:hover {\n            transform: scale(1.02) !important;\n        }\n    }\n\n    \/* Custom Audio Player *\/\n    .custom-audio-player {\n        direction: ltr; \n        display: flex;\n        align-items: center;\n        gap: 12px;\n        width: 100%;\n        background: rgba(255, 255, 255, 0.7);\n        border: 1px solid rgba(255, 255, 255, 0.8);\n        border-radius: 50px;\n        padding: 8px 16px 8px 8px;\n        box-sizing: border-box;\n    }\n\n    .play-pause-btn {\n        width: 48px; \n        height: 48px;\n        border-radius: 50%;\n        background: linear-gradient(135deg, #007aff, #0056b3);\n        color: #ffffff;\n        border: none;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        flex-shrink: 0;\n        box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);\n        transition: transform 0.2s, box-shadow 0.2s;\n    }\n\n    .play-pause-btn:active {\n        transform: scale(0.95);\n    }\n\n    .play-pause-btn svg {\n        width: 22px; \n        height: 22px;\n        fill: currentColor;\n    }\n\n    .icon-play {\n        margin-left: 3px; \n    }\n\n    .progress-wrapper {\n        flex-grow: 1;\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        cursor: pointer;\n        height: 30px; \n    }\n\n    .progress-bar {\n        width: 100%;\n        height: 6px;\n        background: rgba(0, 0, 0, 0.05);\n        border-radius: 3px;\n        overflow: hidden;\n        position: relative;\n    }\n\n    .progress-filled {\n        height: 100%;\n        width: 0%;\n        background: #007aff;\n        border-radius: 3px;\n        transition: width 0.1s linear;\n    }\n\n    .time-display {\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n        font-size: 13px;\n        color: #4a4a4e;\n        font-variant-numeric: tabular-nums;\n        flex-shrink: 0;\n        min-width: 75px;\n        text-align: right;\n        font-weight: 500;\n    }\n\n    \/* Placeholder Content Styles *\/\n    .placeholder-content {\n        padding: 60px 20px;\n        text-align: center;\n        border-radius: 20px;\n    }\n\n    .placeholder-content h3 {\n        font-size: 24px;\n        color: #1d1d1f;\n        margin-bottom: 10px;\n    }\n\n    .placeholder-content p {\n        font-size: 18px;\n        color: #86868b;\n    }\n\n    \/* Footer Component *\/\n    .page-footer-contacts {\n        display: grid;\n        grid-template-columns: 1fr;\n        gap: 16px;\n        margin-top: 24px;\n        width: 100%;\n    }\n\n    .contact-card {\n        padding: 24px;\n        text-align: center;\n        border-radius: 20px;\n    }\n\n    .institute-name {\n        font-size: 22px;\n        color: #1d1d1f;\n        margin: 0 0 16px 0;\n        line-height: 1.4;\n        font-weight: 700;\n    }\n\n    .contact-detail {\n        font-size: 18px;\n        color: #4a4a4e;\n        margin: 10px 0;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        gap: 8px;\n    }\n\n    .contact-detail span.label {\n        font-weight: bold;\n        color: #1d1d1f;\n    }\n\n    .ltr-text {\n        direction: ltr;\n        display: inline-block;\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n        color: #007aff;\n        font-weight: 500;\n    }\n\n    .ltr-text.phone {\n        color: #1d1d1f;\n    }\n\n    .contact-detail a {\n        text-decoration: none;\n    }\n\n    .contact-detail a:hover {\n        text-decoration: underline;\n    }\n\n    \/* Desktop Adjustments *\/\n    @media (min-width: 769px) {\n        .kurdish-alphabet-page { padding: 40px; gap: 20px; border-radius: 40px; }\n        .header-images-container { padding: 24px; margin-bottom: 12px; gap: 24px; }\n        \n        .tabs-navigation { padding: 10px; border-radius: 20px; margin-bottom: 24px; flex-direction: row; }\n        .tab-button { font-size: 20px; padding: 16px 20px; border-radius: 14px; }\n\n        .search-container { padding: 16px; margin-bottom: 24px; }\n        .search-input { font-size: 20px; padding: 16px 24px; }\n        .card-header { padding: 24px 30px; }\n        .letter-title { font-size: 36px; }\n        .toggle-icon { width: 32px; height: 32px; }\n        .content-inner { padding: 0 30px 30px 30px; gap: 24px; }\n        .media-container { gap: 20px !important; }\n        .custom-audio-player { padding: 10px 20px 10px 10px; gap: 16px;}\n        .play-pause-btn { width: 56px; height: 56px; }\n        .play-pause-btn svg { width: 26px; height: 26px; }\n        .progress-bar { height: 8px; }\n        .time-display { font-size: 14px; min-width: 85px;}\n        .page-footer-contacts { grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }\n    }\n    \n    \/* FIX: Mobile Specific Adjustments - Stacking Tabs & Preserving Image Alignment *\/\n    @media (max-width: 768px) {\n        .header-images-container { gap: 8px; padding: 12px; }\n        .tabs-navigation { \n            flex-direction: column; \/* Stacks the sections on top of each other *\/\n            padding: 12px;\n            gap: 10px;\n        }\n        .tab-button {\n            width: 100%;\n            padding: 14px 10px;\n        }\n    }\n<\/style>\n\n<div class=\"kurdish-alphabet-page\">\n\n    <div id=\"security-lock-screen\">\n        <div class=\"lock-box\">\n            <svg class=\"lock-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"><\/rect>\n                <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"><\/path>\n            <\/svg>\n            <h2 class=\"lock-title\">\u062f\u0627\u062e\u0631\u0627\u0648\u06d5<\/h2>\n            <p class=\"lock-desc\">\u062a\u06a9\u0627\u06cc\u06d5 \u06a9\u06c6\u062f\u06cc \u0686\u0648\u0648\u0646\u06d5\u0698\u0648\u0648\u0631\u06d5\u0648\u06d5 \u0628\u0646\u0648\u0648\u0633\u06d5<\/p>\n            \n            <input type=\"password\" id=\"pin-code-input\" class=\"pin-input\" placeholder=\"\u2022\u2022\u2022\u2022\" maxlength=\"4\" autocomplete=\"off\">\n            <button class=\"submit-pin-btn\" onclick=\"checkPinCode()\">\u0686\u0648\u0648\u0646\u06d5\u0698\u0648\u0648\u0631\u06d5\u0648\u06d5<\/button>\n        <\/div>\n    <\/div>\n\n    <div id=\"main-app-content\">\n\n        <div class=\"header-images-container glass-panel\">\n            <img decoding=\"async\" src=\"https:\/\/kurdi.krd\/wp-content\/uploads\/2026\/06\/image-1.png\" alt=\"Header Image 1\" class=\"header-img\">\n            <img decoding=\"async\" src=\"https:\/\/kurdi.krd\/wp-content\/uploads\/2026\/06\/image-2.png\" alt=\"Header Image 2\" class=\"header-img\">\n        <\/div>\n\n        <div class=\"tabs-navigation glass-panel\">\n            <button class=\"tab-button active\" onclick=\"switchTab('tab-reading', this)\">\u062e\u0648\u06ce\u0646\u062f\u0646\u06d5\u0648\u06d5\u06cc \u067e\u06cc\u062a\u06d5\u06a9\u0627\u0646<\/button>\n            <button class=\"tab-button\" onclick=\"switchTab('tab-images', this)\">\u0648\u06ce\u0646\u06d5\u06a9\u0627\u0646<\/button>\n            <button class=\"tab-button\" onclick=\"switchTab('tab-list', this)\">\u0644\u06cc\u0633\u062a\u06cc \u067e\u06cc\u062a\u06d5\u06a9\u0627\u0646<\/button>\n        <\/div>\n\n        <div id=\"tab-reading\" class=\"tab-content active\">\n            <div class=\"search-container glass-panel\">\n                <input type=\"text\" id=\"alphabetSearch\" class=\"search-input\" placeholder=\"\u06af\u06d5\u0695\u0627\u0646 \u0628\u06c6 \u067e\u06cc\u062a\u06ce\u06a9 (\u0628\u06d5 \u0646\u0645\u0648\u0648\u0646\u06d5: \u0626\u0640)...\">\n            <\/div>\n            <div id=\"dynamic-alphabet-container\" style=\"display: flex; flex-direction: column; gap: 16px;\"><\/div>\n        <\/div>\n\n        <div id=\"tab-images\" class=\"tab-content\">\n            <div class=\"placeholder-content glass-panel\">\n                <h3>\u0628\u06d5\u0634\u06cc \u0648\u06ce\u0646\u06d5\u06a9\u0627\u0646<\/h3>\n                <p>\u0644\u06ce\u0631\u06d5\u062f\u0627 \u0648\u06ce\u0646\u06d5\u06a9\u0627\u0646 \u062f\u0627\u062f\u06d5\u0646\u0631\u06ce\u0646&#8230; (\u0628\u06d5\u0645\u0646\u0632\u06cc\u06a9\u0627\u0646\u06d5)<\/p>\n            <\/div>\n        <\/div>\n\n        <div id=\"tab-list\" class=\"tab-content\">\n            <div class=\"placeholder-content glass-panel\">\n                <h3>\u0644\u06cc\u0633\u062a\u06cc \u067e\u06cc\u062a\u06d5\u06a9\u0627\u0646<\/h3>\n                <p>\u0644\u06ce\u0631\u06d5\u062f\u0627 \u0644\u06cc\u0633\u062a\u06cc \u067e\u06cc\u062a\u06d5\u06a9\u0627\u0646 \u062f\u0627\u062f\u06d5\u0646\u0631\u06ce\u062a&#8230; (\u0628\u06d5\u0645\u0646\u0632\u06cc\u06a9\u0627\u0646\u06d5)<\/p>\n            <\/div>\n        <\/div>\n\n        <div class=\"page-footer-contacts\">\n            <div class=\"contact-card glass-panel\">\n                <h3 class=\"institute-name\">\u0626\u06cc\u0646\u0633\u062a\u06cc\u062a\u0648\u0648\u062a\u06cc \u062e\u0648\u06ce\u0646\u062f\u0646\u06cc \u06a9\u0648\u0631\u062f\u06cc \u0628\u06d5\u0631\u0644\u06cc\u0646<\/h3>\n                <div class=\"contact-detail\">\n                    <span class=\"label\">\u0645\u0627\u06b5\u067e\u06d5\u0695:<\/span> \n                    <a href=\"http:\/\/ifkurds.de\" target=\"_blank\" class=\"ltr-text\">ifkurds.de<\/a>\n                <\/div>\n                <div class=\"contact-detail\">\n                    <span class=\"label\">\u062a\u06d5\u0644\u06d5\u0641\u06c6\u0646:<\/span> \n                    <span class=\"ltr-text phone\">+49 30 821 99 43<\/span>\n                <\/div>\n                <div class=\"contact-detail\">\n                    <span class=\"label\">\u0645\u06c6\u0628\u0627\u06cc\u0644:<\/span> \n                    <span class=\"ltr-text phone\">004917626854229<\/span>\n                <\/div>\n            <\/div>\n\n            <div class=\"contact-card glass-panel\">\n                <h3 class=\"institute-name\">\u067e\u0695\u06c6\u0698\u06d5 \u0632\u0627\u0646\u0633\u062a\u06cc\u06cc\u06d5\u06a9\u0627\u0646\u06cc \u0632\u0645\u0627\u0646\u060c \u0626\u06d5\u062f\u06d5\u0628 \u0648 \u06a9\u0648\u0644\u062a\u0648\u0648\u0631\u06cc \u06a9\u0648\u0631\u062f<\/h3>\n                <div class=\"contact-detail\">\n                    <span class=\"label\">\u0645\u0627\u06b5\u067e\u06d5\u0695:<\/span> \n                    <a href=\"https:\/\/kurdi.krd\" target=\"_blank\" class=\"ltr-text\">kurdi.krd<\/a>\n                <\/div>\n                <div class=\"contact-detail\">\n                    <span class=\"label\">\u062a\u06d5\u0644\u06d5\u0641\u06c6\u0646:<\/span> \n                    <span class=\"ltr-text phone\">+964 750 825 37 02<\/span>\n                <\/div>\n            <\/div>\n        <\/div>\n        \n    <\/div> \n\n<\/div>\n\n<script>\n    \/\/ --- 0. SECURITY LOCK LOGIC ---\n    const CORRECT_PIN = \"2026\"; \n\n    function checkPinCode() {\n        const input = document.getElementById('pin-code-input');\n        const lockScreen = document.getElementById('security-lock-screen');\n        const mainApp = document.getElementById('main-app-content');\n\n        if (input.value === CORRECT_PIN) {\n            lockScreen.style.display = 'none';\n            mainApp.style.display = 'flex';\n        } else {\n            input.classList.add('error');\n            setTimeout(() => {\n                input.classList.remove('error');\n            }, 400);\n            input.value = \"\"; \n        }\n    }\n\n    document.getElementById('pin-code-input').addEventListener('keypress', function (e) {\n        if (e.key === 'Enter') {\n            checkPinCode();\n        }\n    });\n\n\n    \/\/ --- 1. TAB SWITCHING LOGIC ---\n    function switchTab(tabId, buttonElement) {\n        document.querySelectorAll('.custom-audio-player audio').forEach(audio => {\n            audio.pause();\n            audio.currentTime = 0;\n            const player = audio.closest('.custom-audio-player');\n            if(player) {\n                player.querySelector('.icon-play').style.display = 'block';\n                player.querySelector('.icon-pause').style.display = 'none';\n                player.querySelector('.progress-filled').style.width = '0%';\n            }\n        });\n\n        document.querySelectorAll('.tab-content').forEach(tab => {\n            tab.classList.remove('active');\n        });\n\n        document.querySelectorAll('.tab-button').forEach(btn => {\n            btn.classList.remove('active');\n        });\n\n        document.getElementById(tabId).classList.add('active');\n        buttonElement.classList.add('active');\n    }\n\n\n    \/\/ --- 2. DYNAMIC DATABASE GENERATOR ---\n    const originalLetterIDs = {\n        \"\u0626\u0640\": 1, \"\u0627\": 2, \"\u0628\": 3, \"\u0628\u0640\": 4, \"\u067e\": 5, \"\u067e\u0640\": 6, \"\u062a\": 7, \"\u062a\u0640\": 8, \"\u062c\": 9, \"\u062c\u0640\": 10,\n        \"\u0686\": 11, \"\u0686\u0640\": 12, \"\u062d\": 13, \"\u062d\u0640\": 14, \"\u062e\": 15, \"\u062e\u0640\": 16, \"\u062f\": 17, \"\u0631\": 18, \"\u0695\": 19, \"\u0632\": 20,\n        \"\u0698\": 21, \"\u0633\": 22, \"\u0633\u0640\": 23, \"\u0634\": 24, \"\u0634\u0640\": 25, \"\u0639\": 26, \"\u0639\u0640\": 27, \"\u063a\": 28, \"\u063a\u0640\": 29, \"\u0641\": 30,\n        \"\u0641\u0640\": 31, \"\u06a4\": 32, \"\u06a4\u0640\": 33, \"\u0642\": 34, \"\u0642\u0640\": 35, \"\u06a9\": 36, \"\u06a9\u0640\": 37, \"\u06af\": 38, \"\u06af\u0640\": 39, \"\u0644\": 40,\n        \"\u0644\u0640\": 41, \"\u0644\u0627\": 42, \"\u06b5\": 43, \"\u06b5\u0640\": 44, \"\u06b5\u0627\": 45, \"\u0645\": 46, \"\u0645\u0640\": 47, \"\u0646\": 48, \"\u0646\u0640\": 49, \"\u0647\u0640\": 50,\n        \"\u06d5\": 51, \"\u0648\": 52, \"\u06c6\": 53, \"\u0648\u0648\": 54, \"\u06cc\": 55, \"\u06cc\u0640\": 56, \"\u06ce\": 57, \"\u06ce\u0640\": 58\n    };\n\n    const lettersList = [\n        \"\u062f\", \"\u0627\", \"\u0631\", \"\u06cc\", \"\u0648\", \"\u06d5\", \"\u0648\u0648\", \"\u0632\", \"\u06c6\", \"\u0626\u0640\", \"\u06ce\", \"\u0695\", \"\u0698\", \n        \"\u06cc\u0640\", \"\u06ce\u0640\", \"\u0646\", \"\u0646\u0640\", \"\u0645\", \"\u0645\u0640\", \"\u0628\", \"\u0628\u0640\", \"\u062a\", \"\u062a\u0640\", \"\u0633\", \"\u0633\u0640\", \n        \"\u0634\", \"\u0634\u0640\", \"\u06a9\", \"\u06a9\u0640\", \"\u067e\", \"\u067e\u0640\", \"\u06af\", \"\u06af\u0640\", \"\u0644\", \"\u0644\u0640\", \"\u0644\u0627\", \"\u0647\u0640\", \n        \"\u06b5\", \"\u06b5\u0640\", \"\u06b5\u0627\", \"\u0642\", \"\u0642\u0640\", \"\u0641\", \"\u0641\u0640\", \"\u06a4\", \"\u06a4\u0640\", \"\u062d\", \"\u062d\u0640\", \"\u062c\", \n        \"\u062c\u0640\", \"\u0686\", \"\u0686\u0640\", \"\u062e\", \"\u062e\u0640\", \"\u0639\", \"\u0639\u0640\", \"\u063a\", \"\u063a\u0640\"\n    ];\n\n    const alphabetData = lettersList.map((letter) => {\n        const id = originalLetterIDs[letter]; \n        const img1Number = (id * 2) - 1; \n        const img2Number = id * 2;       \n        const audioNumber = id;          \n\n        return {\n            letter: letter,\n            img1: `https:\/\/kurdi.krd\/wp-content\/uploads\/2026\/06\/ALFBE-BAR-${img1Number}-732x1024.png`,\n            img2: `https:\/\/kurdi.krd\/wp-content\/uploads\/2026\/06\/ALFBE-BAR-${img2Number}-732x1024.png`,\n            audio: `https:\/\/kurdi.krd\/wp-content\/uploads\/2026\/06\/Mp3-Page-${audioNumber}.mp3`\n        };\n    });\n\n    const container = document.getElementById('dynamic-alphabet-container');\n    let generatedHTML = \"\";\n\n    alphabetData.forEach(item => {\n        generatedHTML += `\n        <div class=\"alphabet-card glass-panel\" data-letter=\"${item.letter}\">\n            <button class=\"card-header\" onclick=\"toggleLetterCard(this)\">\n                <h2 class=\"letter-title\">${item.letter}<\/h2>\n                <svg class=\"toggle-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"6 9 12 15 18 9\"><\/polyline><\/svg>\n            <\/button>\n            <div class=\"card-content-wrapper\"><div class=\"card-content\"><div class=\"content-inner\">\n                <div class=\"media-container\">\n                    <img decoding=\"async\" data-src=\"${item.img1}\" src=\"data:image\/gif;base64,R0lGODlhAQABAAD\/ACwAAAAAAQABAAACADs=\" alt=\"${item.letter} Image 1\" class=\"lazy-trigger\">\n                    <img decoding=\"async\" data-src=\"${item.img2}\" src=\"data:image\/gif;base64,R0lGODlhAQABAAD\/ACwAAAAAAQABAAACADs=\" alt=\"${item.letter} Image 2\" class=\"lazy-trigger\">\n                <\/div>\n                <div class=\"custom-audio-player\">\n                    <button class=\"play-pause-btn\" aria-label=\"Play\">\n                        <svg viewBox=\"0 0 24 24\" class=\"icon-play\"><polygon points=\"5 3 19 12 5 21 5 3\"><\/polygon><\/svg>\n                        <svg viewBox=\"0 0 24 24\" class=\"icon-pause\" style=\"display:none;\"><rect x=\"6\" y=\"4\" width=\"4\" height=\"16\"><\/rect><rect x=\"14\" y=\"4\" width=\"4\" height=\"16\"><\/rect><\/svg>\n                    <\/button>\n                    <div class=\"progress-wrapper\">\n                        <div class=\"progress-bar\"><div class=\"progress-filled\"><\/div><\/div>\n                    <\/div>\n                    <div class=\"time-display\">0:00 \/ 0:00<\/div>\n                    <audio preload=\"none\" style=\"display:none;\">\n                        <source src=\"${item.audio}\" type=\"audio\/mpeg\">\n                    <\/audio>\n                <\/div>\n            <\/div><\/div><\/div>\n        <\/div>`;\n    });\n\n    container.innerHTML = generatedHTML;\n\n\n    \/\/ --- 3. ACCORDION & LAZY LOADING ---\n    function toggleLetterCard(button) {\n        const card = button.closest('.alphabet-card');\n        const isActive = card.classList.contains('active');\n\n        document.querySelectorAll('.alphabet-card').forEach(c => {\n            c.classList.remove('active');\n            const audio = c.querySelector('audio');\n            if(audio) {\n                audio.pause();\n                audio.currentTime = 0; \n            }\n            const playIcon = c.querySelector('.icon-play');\n            const pauseIcon = c.querySelector('.icon-pause');\n            if(playIcon) playIcon.style.display = 'block';\n            if(pauseIcon) pauseIcon.style.display = 'none';\n        });\n\n        if (!isActive) {\n            const lazyImages = card.querySelectorAll('.lazy-trigger[data-src]');\n            lazyImages.forEach(img => {\n                img.src = img.getAttribute('data-src'); \n                img.removeAttribute('data-src'); \n            });\n\n            card.classList.add('active');\n            setTimeout(() => {\n                card.scrollIntoView({ behavior: 'smooth', block: 'start' });\n            }, 100);\n        }\n    }\n\n\n    \/\/ --- 4. CUSTOM AUDIO PLAYER ---\n    function formatTime(seconds) {\n        if (isNaN(seconds)) return \"0:00\";\n        const m = Math.floor(seconds \/ 60);\n        const s = Math.floor(seconds % 60);\n        return `${m}:${s < 10 ? '0' : ''}${s}`;\n    }\n\n    document.querySelectorAll('.custom-audio-player').forEach(player => {\n        const audio = player.querySelector('audio');\n        const playBtn = player.querySelector('.play-pause-btn');\n        const playIcon = player.querySelector('.icon-play');\n        const pauseIcon = player.querySelector('.icon-pause');\n        const progressWrapper = player.querySelector('.progress-wrapper');\n        const progressFilled = player.querySelector('.progress-filled');\n        const timeDisplay = player.querySelector('.time-display');\n\n        audio.addEventListener('loadedmetadata', () => {\n            timeDisplay.textContent = '0:00 \/ ' + formatTime(audio.duration);\n        });\n\n        playBtn.addEventListener('click', (e) => {\n            e.stopPropagation(); \n            \n            if (audio.readyState === 0) {\n                audio.load();\n            }\n            \n            if (audio.paused) {\n                document.querySelectorAll('.custom-audio-player audio').forEach(otherAudio => {\n                    if (otherAudio !== audio) {\n                        otherAudio.pause();\n                        const otherPlayer = otherAudio.closest('.custom-audio-player');\n                        otherPlayer.querySelector('.icon-play').style.display = 'block';\n                        otherPlayer.querySelector('.icon-pause').style.display = 'none';\n                    }\n                });\n\n                audio.play();\n                playIcon.style.display = 'none';\n                pauseIcon.style.display = 'block';\n            } else {\n                audio.pause();\n                playIcon.style.display = 'block';\n                pauseIcon.style.display = 'none';\n            }\n        });\n\n        audio.addEventListener('timeupdate', () => {\n            const percent = (audio.currentTime \/ audio.duration) * 100 || 0;\n            progressFilled.style.width = `${percent}%`;\n            \n            const durationTxt = audio.duration ? formatTime(audio.duration) : \"0:00\";\n            timeDisplay.textContent = formatTime(audio.currentTime) + ' \/ ' + durationTxt;\n        });\n\n        progressWrapper.addEventListener('click', (e) => {\n            e.stopPropagation();\n            if(!audio.duration) return; \n            \n            const rect = progressWrapper.getBoundingClientRect();\n            const clickX = e.clientX - rect.left;\n            const percent = Math.max(0, Math.min(1, clickX \/ rect.width));\n            \n            audio.currentTime = percent * audio.duration;\n        });\n\n        audio.addEventListener('ended', () => {\n            playIcon.style.display = 'block';\n            pauseIcon.style.display = 'none';\n            progressFilled.style.width = '0%';\n            audio.currentTime = 0;\n        });\n    });\n\n\n    \/\/ --- 5. SEARCH FILTER LOGIC ---\n    const searchInput = document.getElementById('alphabetSearch');\n    const allCards = document.querySelectorAll('.alphabet-card');\n\n    searchInput.addEventListener('input', function(e) {\n        const searchTerm = e.target.value.trim();\n        \n        allCards.forEach(card => {\n            const letter = card.getAttribute('data-letter');\n            \n            if (searchTerm === '' || letter.includes(searchTerm)) {\n                card.style.display = 'block';\n            } else {\n                card.style.display = 'none';\n                card.classList.remove('active'); \n                \n                const audio = card.querySelector('audio');\n                if(audio) {\n                    audio.pause();\n                    card.querySelector('.icon-play').style.display = 'block';\n                    card.querySelector('.icon-pause').style.display = 'none';\n                }\n            }\n        });\n    });\n<\/script>\n\n\n\n<div id=\"qrcode-l86n6hd8\" class=\"wp-block-zolo-qrcode qrcode-l86n6hd8 zolo-block parent-qrcode-l86n6hd8\"><div class=\"zolo-qrcode-wrapper\" data-options=\"{&quot;qrContent&quot;:&quot;https:\/\/kurdi.krd\/?p=1243&quot;,&quot;qrCodeSize&quot;:500,&quot;qrCodeLevel&quot;:&quot;M&quot;,&quot;codeColor&quot;:&quot;#000&quot;,&quot;qrCodePadding&quot;:&quot;&quot;,&quot;logoWidth&quot;:48,&quot;logoOpacity&quot;:1,&quot;logoPaddingStyle&quot;:&quot;square&quot;,&quot;logoPadding&quot;:&quot;&quot;,&quot;logoQrBehind&quot;:false,&quot;eyeColor&quot;:&quot;#000&quot;,&quot;eyeRadius&quot;:0,&quot;badgeStyle&quot;:&quot;zolo-badge-style-1&quot;,&quot;showBadge&quot;:false,&quot;showBadgeIcon&quot;:false,&quot;badgeText&quot;:&quot;Scan me&quot;,&quot;badgeIcon&quot;:&quot;&lt;svg xmlns=\\&quot;http:\/\/www.w3.org\/2000\/svg\\&quot; viewBox=\\&quot;0 0 448 512\\&quot;&gt;&lt;path d=\\&quot;M144 32C170.5 32 192 53.49 192 80V176C192 202.5 170.5 224 144 224H48C21.49 224 0 202.5 0 176V80C0 53.49 21.49 32 48 32H144zM128 96H64V160H128V96zM144 288C170.5 288 192 309.5 192 336V432C192 458.5 170.5 480 144 480H48C21.49 480 0 458.5 0 432V336C0 309.5 21.49 288 48 288H144zM128 352H64V416H128V352zM256 80C256 53.49 277.5 32 304 32H400C426.5 32 448 53.49 448 80V176C448 202.5 426.5 224 400 224H304C277.5 224 256 202.5 256 176V80zM320 160H384V96H320V160zM352 448H384V480H352V448zM448 480H416V448H448V480zM416 288H448V416H352V384H320V480H256V288H352V320H416V288z\\&quot;\/&gt;&lt;\/svg&gt;&quot;}\"><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u062f\u0627\u062e\u0631\u0627\u0648\u06d5 \u062a\u06a9\u0627\u06cc\u06d5 \u06a9\u06c6\u062f\u06cc \u0686\u0648\u0648\u0646\u06d5\u0698\u0648\u0648\u0631\u06d5\u0648\u06d5 \u0628\u0646\u0648\u0648\u0633\u06d5 \u0686\u0648\u0648\u0646\u06d5\u0698\u0648\u0648\u0631\u06d5\u0648\u06d5 \u062e\u0648\u06ce\u0646\u062f\u0646\u06d5\u0648\u06d5\u06cc \u067e\u06cc\u062a\u06d5\u06a9\u0627\u0646 \u0648\u06ce\u0646\u06d5\u06a9\u0627\u0646 \u0644\u06cc\u0633\u062a\u06cc \u067e\u06cc\u062a\u06d5\u06a9\u0627\u0646 \u0628\u06d5\u0634\u06cc \u0648\u06ce\u0646\u06d5\u06a9\u0627\u0646 \u0644\u06ce\u0631\u06d5\u062f\u0627 \u0648\u06ce\u0646\u06d5\u06a9\u0627\u0646 \u062f\u0627\u062f\u06d5\u0646\u0631\u06ce\u0646&#8230; (\u0628\u06d5\u0645\u0646\u0632\u06cc\u06a9\u0627\u0646\u06d5) \u0644\u06cc\u0633\u062a\u06cc \u067e\u06cc\u062a\u06d5\u06a9\u0627\u0646 \u0644\u06ce\u0631\u06d5\u062f\u0627 \u0644\u06cc\u0633\u062a\u06cc \u067e\u06cc\u062a\u06d5\u06a9\u0627\u0646 \u062f\u0627\u062f\u06d5\u0646\u0631\u06ce\u062a&#8230; (\u0628\u06d5\u0645\u0646\u0632\u06cc\u06a9\u0627\u0646\u06d5) \u0626\u06cc\u0646\u0633\u062a\u06cc\u062a\u0648\u0648\u062a\u06cc \u062e\u0648\u06ce\u0646\u062f\u0646\u06cc \u06a9\u0648\u0631\u062f\u06cc \u0628\u06d5\u0631\u0644\u06cc\u0646 \u0645\u0627\u06b5\u067e\u06d5\u0695: ifkurds.de \u062a\u06d5\u0644\u06d5\u0641\u06c6\u0646: +49 30 821 99 43 \u0645\u06c6\u0628\u0627\u06cc\u0644: 004917626854229 \u067e\u0695\u06c6\u0698\u06d5 \u0632\u0627\u0646\u0633\u062a\u06cc\u06cc\u06d5\u06a9\u0627\u0646\u06cc \u0632\u0645\u0627\u0646\u060c \u0626\u06d5\u062f\u06d5\u0628 \u0648 \u06a9\u0648\u0644\u062a\u0648\u0648\u0631\u06cc \u06a9\u0648\u0631\u062f \u0645\u0627\u06b5\u067e\u06d5\u0695: kurdi.krd \u062a\u06d5\u0644\u06d5\u0641\u06c6\u0646: +964 750 825 37 02<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,47,49],"tags":[],"class_list":["post-1243","post","type-post","status-publish","format-standard","hentry","category-uncategorized","category-47","category-49"],"_links":{"self":[{"href":"https:\/\/kurdi.krd\/index.php?rest_route=\/wp\/v2\/posts\/1243","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kurdi.krd\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kurdi.krd\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kurdi.krd\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/kurdi.krd\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1243"}],"version-history":[{"count":11,"href":"https:\/\/kurdi.krd\/index.php?rest_route=\/wp\/v2\/posts\/1243\/revisions"}],"predecessor-version":[{"id":1774,"href":"https:\/\/kurdi.krd\/index.php?rest_route=\/wp\/v2\/posts\/1243\/revisions\/1774"}],"wp:attachment":[{"href":"https:\/\/kurdi.krd\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1243"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kurdi.krd\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1243"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kurdi.krd\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1243"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}