{"id":29774,"date":"2025-07-15T09:12:46","date_gmt":"2025-07-15T09:12:46","guid":{"rendered":"https:\/\/darksn.de\/?page_id=29774"},"modified":"2025-07-23T09:47:11","modified_gmt":"2025-07-23T09:47:11","slug":"testing-process","status":"publish","type":"page","link":"https:\/\/darksn.de\/en\/testing-process\/","title":{"rendered":"Testing Process"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\r\n\r\n\r\n\r\n \r\n \r\n Work Process - Darksn<\/title>\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #f1f3f4 100%);\r\n color: #333;\r\n line-height: 1.6;\r\n scroll-behavior: smooth;\r\n }\r\n\r\n \/* Ana B\u00f6l\u00fcm *\/\r\n .hero {\r\n background-image: url(https:\/\/darksn.de\/wp-content\/uploads\/2025\/07\/aerial-view-business-data-analysis-graph-scaled.jpg);\r\n background-size: cover;\r\n background-position: center;\r\n background-repeat: no-repeat;\r\n color: white;\r\n padding: 80px 0;\r\n text-align: center;\r\n position: relative;\r\n }\r\n\r\n .hero::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: rgba(0, 0, 0, 0.5);\r\n z-index: 1;\r\n }\r\n\r\n .hero-content {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n position: relative;\r\n z-index: 2;\r\n display: flex;\r\n justify-content: flex-end;\r\n align-items: center;\r\n min-height: 400px;\r\n }\r\n\r\n .hero-card {\r\n background: rgba(0, 0, 0, 0.7);\r\n padding: 3rem;\r\n max-width: 750px;\r\n color: white;\r\n position: relative;\r\n top: 75px;\r\n }\r\n\r\n .hero-card h1 {\r\n font-size: 1.2rem;\r\n margin-bottom: 1rem;\r\n color: white;\r\n }\r\n\r\n .hero-card p {\r\n font-size: 1.1rem;\r\n margin-bottom: 2rem;\r\n color: rgba(255, 255, 255, 0.9);\r\n opacity: 1;\r\n }\r\n\r\n .cta-button {\r\n background: #F93825;\r\n color: white !important;\r\n padding: 15px 32px;\r\n border: none;\r\n font-size: 1.1rem;\r\n font-weight: bold;\r\n cursor: pointer;\r\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);\r\n transition: background 0.3s, color 0.3s;\r\n }\r\n\r\n .cta-button:hover,\r\n .cta-button:focus,\r\n .cta-button:hover * {\r\n background: #fff;\r\n color: #F93825 !important;\r\n }\r\n\r\n .cta-button a {\r\n color: white !important;\r\n }\r\n\r\n \/* Ana \u0130\u00e7erik B\u00f6l\u00fcmleri *\/\r\n .main-content {\r\n background: #ffffff;\r\n margin-top: -50px;\r\n position: relative;\r\n z-index: 3;\r\n box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.1);\r\n }\r\n\r\n \/* B\u00f6l\u00fcm Ba\u015fl\u0131klar\u0131 *\/\r\n .section-header {\r\n text-align: center;\r\n padding: 80px 20px 60px 20px;\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n }\r\n\r\n .section-header h2 {\r\n font-size: 2.8rem;\r\n font-weight: 800;\r\n color: #F93825;\r\n margin-bottom: 25px;\r\n }\r\n\r\n .section-header p {\r\n font-size: 1.3rem;\r\n color: #6c757d;\r\n max-width: 800px;\r\n margin: 0 auto;\r\n line-height: 1.7;\r\n }\r\n\r\n \/* S\u00fcre\u00e7 Giri\u015f B\u00f6l\u00fcm\u00fc *\/\r\n .process-intro-section {\r\n padding: 80px 20px 60px 20px;\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n }\r\n\r\n .process-intro-container {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 60px;\r\n align-items: center;\r\n }\r\n\r\n .process-intro-content h2 {\r\n font-size: 2.8rem;\r\n font-weight: 800;\r\n color: #F93825;\r\n margin-bottom: 25px;\r\n }\r\n\r\n .process-intro-content p {\r\n font-size: 1.3rem;\r\n color: #6c757d;\r\n line-height: 1.7;\r\n margin-bottom: 0;\r\n }\r\n\r\n .process-intro-image {\r\n position: relative;\r\n overflow: hidden;\r\n box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);\r\n }\r\n\r\n .process-intro-image img {\r\n width: 100%;\r\n height: 750px;\r\n object-fit: cover;\r\n transition: all 0.4s ease;\r\n }\r\n\r\n .process-intro-image:hover img {\r\n transform: scale(1.05);\r\n }\r\n\r\n \/* Modern Step Process Presentation - G\u00f6rseldeki Tasar\u0131m *\/\r\n .process-overview {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n padding: 0 20px 0px 20px;\r\n }\r\n\r\n .step-process-container {\r\n display: flex;\r\n justify-content: center;\r\n align-items: flex-start;\r\n gap: 40px;\r\n margin: 60px 0;\r\n position: relative;\r\n padding: 40px 0;\r\n }\r\n\r\n \/* Timeline \u00e7izgisi *\/\r\n .step-process-container::before {\r\n content: '';\r\n position: absolute;\r\n top: 155px;\r\n left: 50px;\r\n right: 50px;\r\n height: 2px;\r\n background: repeating-linear-gradient(\r\n to right,\r\n #ccc 0,\r\n #ccc 10px,\r\n transparent 10px,\r\n transparent 20px\r\n );\r\n z-index: 1;\r\n }\r\n\r\n .step-process {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n position: relative;\r\n z-index: 2;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .step-process:hover {\r\n transform: translateY(-5px);\r\n }\r\n\r\n .step-icon {\r\n position: relative;\r\n margin-bottom: 30px;\r\n }\r\n\r\n .icon-background {\r\n width: 80px;\r\n height: 80px;\r\n background: var(--icon-color);\r\n border-radius: 50% 50% 50% 0;\r\n transform: rotate(-45deg);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);\r\n }\r\n\r\n .icon-background::before {\r\n content: '';\r\n position: absolute;\r\n top: 8px;\r\n left: 8px;\r\n width: calc(100% - 16px);\r\n height: calc(100% - 16px);\r\n background: white;\r\n border-radius: 50% 50% 50% 0;\r\n z-index: 1;\r\n }\r\n\r\n .icon-background i {\r\n color: #333;\r\n font-size: 24px;\r\n transform: rotate(45deg);\r\n z-index: 2;\r\n position: relative;\r\n }\r\n\r\n \/* Dikey ba\u011flant\u0131 \u00e7izgisi *\/\r\n .step-process::after {\r\n content: '';\r\n position: absolute;\r\n top: 90px;\r\n left: 50%;\r\n width: 2px;\r\n height: 30px;\r\n background: var(--icon-color);\r\n transform: translateX(-50%);\r\n }\r\n\r\n \/* Timeline noktalar\u0131 *\/\r\n .step-process::before {\r\n content: '';\r\n position: absolute;\r\n top: 110px;\r\n left: 50%;\r\n width: 12px;\r\n height: 12px;\r\n background: #ff4444;\r\n border-radius: 50%;\r\n transform: translateX(-50%);\r\n z-index: 3;\r\n }\r\n\r\n .step-process:nth-child(1) {\r\n --icon-color: #ff6b35;\r\n }\r\n\r\n .step-process:nth-child(2) {\r\n --icon-color: #ffd700;\r\n }\r\n\r\n .step-process:nth-child(3) {\r\n --icon-color: #ff8c00;\r\n }\r\n\r\n .step-process:nth-child(4) {\r\n --icon-color: #ff69b4;\r\n }\r\n\r\n .step-process:nth-child(5) {\r\n --icon-color: #9370db;\r\n }\r\n\r\n .step-content {\r\n text-align: center;\r\n max-width: 200px;\r\n margin-top: 15px;\r\n }\r\n\r\n .step-content h3 {\r\n font-size: 1.2rem;\r\n font-weight: 700;\r\n color: var(--icon-color);\r\n margin-bottom: 8px;\r\n }\r\n\r\n .step-content p {\r\n font-size: 0.9rem;\r\n color: #666;\r\n line-height: 1.4;\r\n margin: 0;\r\n }\r\n\r\n \/* Responsive Design *\/\r\n @media (max-width: 768px) {\r\n .step-process-container {\r\n flex-direction: column;\r\n gap: 40px;\r\n padding: 20px 0;\r\n }\r\n \r\n \/* Mobilde dikey timeline *\/\r\n .step-process-container::before {\r\n content: '';\r\n position: absolute;\r\n top: 40px;\r\n bottom: 40px;\r\n left: 50%;\r\n width: 2px;\r\n background: repeating-linear-gradient(\r\n to bottom,\r\n #ccc 0,\r\n #ccc 10px,\r\n transparent 10px,\r\n transparent 20px\r\n );\r\n transform: translateX(-50%);\r\n }\r\n \r\n .step-process {\r\n flex-direction: row;\r\n align-items: center;\r\n gap: 20px;\r\n width: 100%;\r\n max-width: 400px;\r\n }\r\n \r\n .step-icon {\r\n margin-bottom: 0;\r\n order: 1;\r\n }\r\n \r\n .step-content {\r\n order: 2;\r\n text-align: left;\r\n margin-top: 0;\r\n flex: 1;\r\n }\r\n \r\n .step-content h3 {\r\n font-size: 1.1rem;\r\n margin-bottom: 5px;\r\n }\r\n \r\n .step-content p {\r\n font-size: 0.85rem;\r\n }\r\n \r\n .icon-background {\r\n width: 60px;\r\n height: 60px;\r\n }\r\n \r\n .icon-background i {\r\n font-size: 18px;\r\n }\r\n \r\n \/* Mobilde dikey ba\u011flant\u0131 \u00e7izgisi *\/\r\n .step-process::after {\r\n content: '';\r\n position: absolute;\r\n top: 30px;\r\n left: 30px;\r\n width: 2px;\r\n height: 20px;\r\n background: var(--icon-color);\r\n transform: rotate(90deg);\r\n }\r\n \r\n \/* Mobilde timeline noktalar\u0131 *\/\r\n .step-process::before {\r\n content: '';\r\n position: absolute;\r\n top: 30px;\r\n left: 30px;\r\n width: 10px;\r\n height: 10px;\r\n background: #ff4444;\r\n border-radius: 50%;\r\n transform: translateX(-4px);\r\n z-index: 3;\r\n }\r\n }\r\n\r\n \/* Detayl\u0131 Section'lar - YARATICI TASARIM *\/\r\n .detail-sections {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n padding: 0 20px;\r\n position: relative;\r\n }\r\n\r\n\r\n .detail-section {\r\n margin-bottom: 100px;\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n min-height: 300px;\r\n }\r\n\r\n .detail-section:nth-child(odd) {\r\n flex-direction: row;\r\n }\r\n\r\n .detail-section:nth-child(even) {\r\n flex-direction: row-reverse;\r\n }\r\n\r\n .section-timeline {\r\n position: relative;\r\n width: 200px;\r\n height: 200px;\r\n flex-shrink: 0;\r\n z-index: 10;\r\n }\r\n\r\n .timeline-circle {\r\n width: 80px;\r\n height: 80px;\r\n background: linear-gradient(135deg, #F93825, #ff6b5b);\r\n border-radius: 50%;\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 24px;\r\n color: white;\r\n box-shadow: 0 0 30px rgba(248, 56, 37, 0.6);\r\n animation: pulse 2s infinite;\r\n z-index: 3;\r\n }\r\n\r\n .timeline-circle::before {\r\n content: '';\r\n position: absolute;\r\n width: 120px;\r\n height: 120px;\r\n border: 3px solid rgba(248, 56, 37, 0.3);\r\n border-radius: 50%;\r\n animation: rotate 10s linear infinite;\r\n }\r\n\r\n .timeline-circle::after {\r\n content: '';\r\n position: absolute;\r\n width: 160px;\r\n height: 160px;\r\n border: 2px dashed rgba(248, 56, 37, 0.2);\r\n border-radius: 50%;\r\n animation: rotate 15s linear infinite reverse;\r\n }\r\n\r\n @keyframes pulse {\r\n 0%, 100% { transform: translate(-50%, -50%) scale(1); }\r\n 50% { transform: translate(-50%, -50%) scale(1.1); }\r\n }\r\n\r\n @keyframes rotate {\r\n from { transform: rotate(0deg); }\r\n to { transform: rotate(360deg); }\r\n }\r\n\r\n .section-content-wrapper {\r\n flex: 1;\r\n background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(248,249,250,0.9));\r\n backdrop-filter: blur(20px);\r\n border-radius: 25px;\r\n padding: 40px;\r\n margin: 0 30px;\r\n position: relative;\r\n box-shadow: 0 20px 60px rgba(0,0,0,0.1);\r\n border: 1px solid rgba(255,255,255,0.2);\r\n overflow: hidden;\r\n }\r\n\r\n .section-content-wrapper::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n height: 4px;\r\n background: linear-gradient(90deg, #F93825, #ff6b5b, #F93825);\r\n background-size: 200% 100%;\r\n animation: gradientShift 3s ease-in-out infinite;\r\n }\r\n\r\n .section-content-wrapper::after {\r\n content: '';\r\n position: absolute;\r\n top: -50%;\r\n left: -50%;\r\n width: 200%;\r\n height: 200%;\r\n animation: float 6s ease-in-out infinite;\r\n }\r\n\r\n @keyframes float {\r\n 0%, 100% { transform: translate(0, 0) rotate(0deg); }\r\n 33% { transform: translate(30px, -30px) rotate(120deg); }\r\n 66% { transform: translate(-20px, 20px) rotate(240deg); }\r\n }\r\n\r\n .section-header-inline {\r\n display: flex;\r\n align-items: center;\r\n gap: 25px;\r\n margin-bottom: 30px;\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n .section-icon {\r\n width: 60px;\r\n height: 60px;\r\n background: linear-gradient(135deg, #F93825, #ff6b5b);\r\n border-radius: 15px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 24px;\r\n color: white;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .section-icon::before {\r\n content: '';\r\n position: absolute;\r\n top: -100%;\r\n left: -100%;\r\n width: 300%;\r\n height: 300%;\r\n background: linear-gradient(45deg, transparent, rgba(255,255,255,0.4), transparent);\r\n transform: rotate(45deg);\r\n animation: shimmer 3s infinite;\r\n }\r\n\r\n @keyframes shimmer {\r\n 0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }\r\n 100% { transform: translateX(100%) translateY(100%) rotate(45deg); }\r\n }\r\n\r\n .section-title {\r\n font-size: 2.5rem;\r\n font-weight: 900;\r\n background: linear-gradient(135deg, #2c3e50, #F93825, #34495e);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n margin: 0;\r\n position: relative;\r\n }\r\n\r\n .section-title::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -8px;\r\n left: 0;\r\n width: 50px;\r\n height: 3px;\r\n background: linear-gradient(90deg, #F93825, #ff6b5b);\r\n border-radius: 2px;\r\n }\r\n\r\n .section-subtitle {\r\n color: #6c757d;\r\n font-size: 1.2rem;\r\n margin-top: 10px;\r\n font-weight: 500;\r\n }\r\n\r\n .section-content {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 40px;\r\n align-items: start;\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n .content-left {\r\n color: #495057;\r\n font-size: 1.1rem;\r\n line-height: 1.8;\r\n }\r\n\r\n .content-left p {\r\n margin-bottom: 20px;\r\n position: relative;\r\n padding-left: 25px;\r\n }\r\n\r\n .content-left p::before {\r\n content: '\u25c6';\r\n position: absolute;\r\n left: 0;\r\n color: #F93825;\r\n font-size: 1rem;\r\n animation: bounce 2s infinite;\r\n }\r\n\r\n @keyframes bounce {\r\n 0%, 100% { transform: translateY(0); }\r\n 50% { transform: translateY(-3px); }\r\n }\r\n\r\n .content-right {\r\n background: linear-gradient(135deg, rgba(255,255,255,0.8), rgba(248,249,250,0.8));\r\n backdrop-filter: blur(10px);\r\n padding: 30px;\r\n border-radius: 20px;\r\n border: 1px solid rgba(248, 56, 37, 0.1);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .content-right::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 3px;\r\n background: linear-gradient(90deg, #F93825, #ff6b5b);\r\n }\r\n\r\n .content-right h4 {\r\n color: #2c3e50;\r\n font-size: 1.4rem;\r\n font-weight: 700;\r\n margin-bottom: 25px;\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n }\r\n\r\n .content-right h4::before {\r\n content: '\u26a1';\r\n font-size: 1.2rem;\r\n animation: sparkle 1.5s infinite;\r\n }\r\n\r\n @keyframes sparkle {\r\n 0%, 100% { transform: scale(1) rotate(0deg); }\r\n 50% { transform: scale(1.2) rotate(180deg); }\r\n }\r\n\r\n .content-right ul {\r\n list-style: none;\r\n padding: 0;\r\n }\r\n\r\n .content-right li {\r\n padding: 15px 0;\r\n color: #495057;\r\n font-size: 1rem;\r\n display: flex;\r\n align-items: center;\r\n font-weight: 500;\r\n border-bottom: 1px solid rgba(248, 56, 37, 0.1);\r\n transition: all 0.4s ease;\r\n position: relative;\r\n }\r\n\r\n .content-right li:last-child {\r\n border-bottom: none;\r\n }\r\n\r\n .content-right li:hover {\r\n color: #F93825;\r\n transform: translateX(8px);\r\n background: linear-gradient(90deg, rgba(248, 56, 37, 0.05), transparent);\r\n padding-left: 12px;\r\n border-radius: 8px;\r\n }\r\n\r\n .content-right li:before {\r\n content: '\u2726';\r\n color: #F93825;\r\n margin-right: 15px;\r\n font-weight: bold;\r\n font-size: 1.1rem;\r\n background: linear-gradient(135deg, rgba(248, 56, 37, 0.1), rgba(248, 56, 37, 0.2));\r\n width: 30px;\r\n height: 30px;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n box-shadow: 0 4px 12px rgba(248, 56, 37, 0.2);\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .content-right li:hover:before {\r\n transform: scale(1.15) rotate(180deg);\r\n box-shadow: 0 6px 20px rgba(248, 56, 37, 0.4);\r\n }\r\n\r\n \/* Responsive Design *\/\r\n @media (max-width: 1024px) {\r\n .detail-section {\r\n flex-direction: column !important;\r\n margin-bottom: 80px;\r\n }\r\n\r\n .section-timeline {\r\n width: 150px;\r\n height: 150px;\r\n margin: 0 auto 30px;\r\n }\r\n\r\n .timeline-circle {\r\n width: 60px;\r\n height: 60px;\r\n font-size: 20px;\r\n }\r\n\r\n .section-content-wrapper {\r\n margin: 0;\r\n padding: 35px;\r\n }\r\n\r\n .section-title {\r\n font-size: 2.2rem;\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .section-content {\r\n grid-template-columns: 1fr;\r\n gap: 30px;\r\n }\r\n\r\n .section-header-inline {\r\n flex-direction: column;\r\n text-align: center;\r\n gap: 20px;\r\n }\r\n\r\n .section-icon {\r\n width: 50px;\r\n height: 50px;\r\n font-size: 20px;\r\n }\r\n\r\n .section-title {\r\n font-size: 2rem;\r\n }\r\n\r\n .content-right {\r\n padding: 25px;\r\n }\r\n\r\n .content-right h4 {\r\n font-size: 1.3rem;\r\n }\r\n\r\n .content-right li {\r\n font-size: 0.95rem;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .section-content-wrapper {\r\n padding: 25px;\r\n }\r\n\r\n .section-icon {\r\n width: 45px;\r\n height: 45px;\r\n font-size: 18px;\r\n }\r\n\r\n .section-title {\r\n font-size: 1.8rem;\r\n }\r\n\r\n .content-right {\r\n padding: 20px;\r\n }\r\n }\r\n\r\n \/* \u0130statistikler *\/\r\n .stats-section {\r\n background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\r\n padding: 80px 20px;\r\n }\r\n\r\n .stats-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n gap: 40px;\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n }\r\n\r\n .stat-item {\r\n background: #ffffff;\r\n border-radius: 20px;\r\n padding: 40px 30px;\r\n text-align: center;\r\n box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);\r\n transition: all 0.4s ease;\r\n }\r\n\r\n .stat-item:hover {\r\n transform: translateY(-10px);\r\n box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);\r\n }\r\n\r\n .stat-number {\r\n font-size: 3rem;\r\n font-weight: 900;\r\n color: #F93825;\r\n display: block;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .stat-label {\r\n font-size: 1.1rem;\r\n font-weight: 600;\r\n color: #2c3e50;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .stat-description {\r\n font-size: 0.95rem;\r\n color: #6c757d;\r\n line-height: 1.5;\r\n }\r\n\r\n \/* CTA Section *\/\r\n .cta-section {\r\n background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);\r\n color: white;\r\n padding: 80px 40px;\r\n text-align: center;\r\n }\r\n\r\n .cta-content {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n }\r\n\r\n .cta-section h3 {\r\n font-size: 2.5rem;\r\n font-weight: 800;\r\n margin-bottom: 25px;\r\n color: white;\r\n }\r\n\r\n .cta-section p {\r\n font-size: 1.3rem;\r\n margin-bottom: 40px;\r\n opacity: 0.95;\r\n max-width: 800px;\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n\r\n .cta-buttons {\r\n display: flex;\r\n gap: 25px;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .cta-btn {\r\n padding: 15px 30px;\r\n font-size: 1.1rem;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n border: none;\r\n text-decoration: none;\r\n display: inline-block;\r\n }\r\n\r\n .cta-btn-primary {\r\n background: #F93825;\r\n color: white !important;\r\n }\r\n\r\n .cta-btn-primary:hover {\r\n background: #e0311e;\r\n transform: translateY(-3px);\r\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);\r\n }\r\n\r\n .cta-btn-secondary {\r\n background: transparent;\r\n color: #F93825;\r\n border: 3px solid #F93825;\r\n }\r\n\r\n .cta-btn-secondary:hover {\r\n background: #F93825;\r\n color: white;\r\n transform: translateY(-3px);\r\n }\r\n\r\n \/* Responsive Design *\/\r\n @media (max-width: 768px) {\r\n .process-intro-container {\r\n grid-template-columns: 1fr;\r\n gap: 40px;\r\n }\r\n\r\n .process-intro-content h2 {\r\n font-size: 2.2rem;\r\n }\r\n\r\n .process-intro-content p {\r\n font-size: 1.1rem;\r\n }\r\n\r\n .process-steps {\r\n flex-direction: column;\r\n gap: 30px;\r\n }\r\n\r\n .process-step {\r\n padding: 25px 20px;\r\n min-width: auto;\r\n width: 100%;\r\n max-width: 300px;\r\n }\r\n\r\n .process-step::after {\r\n display: none;\r\n }\r\n\r\n .step-number {\r\n font-size: 2.5rem;\r\n }\r\n\r\n .step-description {\r\n font-size: 0.85rem;\r\n }\r\n\r\n .section-content {\r\n grid-template-columns: 1fr;\r\n gap: 30px;\r\n }\r\n\r\n .stats-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .cta-buttons {\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n\r\n .section-header h2 {\r\n font-size: 2.2rem;\r\n }\r\n\r\n .detail-section {\r\n padding: 40px 25px;\r\n }\r\n\r\n .section-header-inline {\r\n flex-direction: column;\r\n text-align: center;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .process-steps {\r\n gap: 20px;\r\n }\r\n\r\n .process-step {\r\n padding: 20px 15px;\r\n max-width: 250px;\r\n }\r\n\r\n .step-number {\r\n font-size: 2rem;\r\n }\r\n\r\n .step-description {\r\n font-size: 0.8rem;\r\n }\r\n\r\n .hero-card {\r\n padding: 2rem;\r\n }\r\n\r\n .detail-section {\r\n padding: 30px 20px;\r\n }\r\n }\r\n\r\n \/* Legal Disclaimer Styles *\/\r\n .legal-disclaimer {\r\n background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\r\n padding: 60px 20px;\r\n width: 100%;\r\n }\r\n\r\n .legal-disclaimer-card {\r\n max-width: 900px;\r\n margin: 0 auto;\r\n background: rgba(220, 53, 69, 0.05);\r\n border: 2px solid rgba(220, 53, 69, 0.2);\r\n border-radius: 20px;\r\n padding: 40px 30px;\r\n text-align: center;\r\n position: relative;\r\n overflow: hidden;\r\n backdrop-filter: blur(10px);\r\n box-shadow: 0 8px 32px rgba(220, 53, 69, 0.1);\r\n border-left: 5px solid #dc3545;\r\n }\r\n\r\n .legal-icon {\r\n width: 80px;\r\n height: 80px;\r\n background: linear-gradient(135deg, #dc3545, #e74c3c);\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 0 auto 25px auto;\r\n font-size: 32px;\r\n color: white;\r\n box-shadow: 0 4px 20px rgba(220, 53, 69, 0.3);\r\n }\r\n\r\n .legal-content h4 {\r\n color: #dc3545;\r\n font-size: 1.4rem;\r\n margin-bottom: 20px;\r\n font-weight: 700;\r\n }\r\n\r\n .legal-content p {\r\n color: #495057;\r\n font-size: 1rem;\r\n line-height: 1.7;\r\n margin-bottom: 20px;\r\n max-width: 700px;\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n\r\n .legal-content p:last-child {\r\n margin-bottom: 0;\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .legal-disclaimer {\r\n padding: 40px 15px;\r\n }\r\n\r\n .legal-disclaimer-card {\r\n padding: 30px 20px;\r\n }\r\n\r\n .legal-icon {\r\n width: 60px;\r\n height: 60px;\r\n font-size: 24px;\r\n }\r\n\r\n .legal-content h4 {\r\n font-size: 1.2rem;\r\n }\r\n\r\n .legal-content p {\r\n font-size: 0.95rem;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .legal-disclaimer-card {\r\n padding: 25px 15px;\r\n }\r\n\r\n .legal-icon {\r\n width: 50px;\r\n height: 50px;\r\n font-size: 20px;\r\n }\r\n\r\n .legal-content h4 {\r\n font-size: 1.1rem;\r\n }\r\n\r\n .legal-content p {\r\n font-size: 0.9rem;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n <!-- Ana B\u00f6l\u00fcm -->\r\n <section class=\"hero\">\r\n <div class=\"hero-content\">\r\n <div class=\"hero-card\">\r\n <h1>Our Work Process - How We Operate<\/h1>\r\n <p>Discover how our accessibility services work step by step. We transparently explain our entire process from initial contact to final delivery.<\/p>\r\n <a href=\"https:\/\/darksn.de\/contact\/\"><button class=\"cta-button\">Explore Process<\/button><\/a>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Ana \u0130\u00e7erik B\u00f6l\u00fcmleri -->\r\n <div class=\"main-content\">\r\n <!-- S\u00fcre\u00e7 Ba\u015fl\u0131\u011f\u0131 -->\r\n <div class=\"process-intro-section\">\r\n <div class=\"process-intro-container\">\r\n <div class=\"process-intro-content\">\r\n <h2>Our Accessibility Service Process<\/h2>\r\n <p>Six strategic steps guiding your accessibility journey. At every stage, our expert team works with cutting-edge technologies and proven methodologies to bring your website into compliance with WCAG 2.1 AA standards. From ground zero to full compliance, we're with you every step of the way.<\/p>\r\n <\/div>\r\n <div class=\"process-intro-image\">\r\n <img decoding=\"async\" src=\"https:\/\/darksn.de\/wp-content\/uploads\/2025\/07\/laptop-with-internet-browser-search-bar-screen-scaled.jpg\" alt=\"Accessibility Process Analysis\" \/>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Modern Step Process Presentation -->\r\n <div class=\"process-overview\" id=\"process-overview\">\r\n <div class=\"section-header\">\r\n <h2>A Step Process Presentation<\/h2>\r\n <p>Our comprehensive accessibility implementation process with 5 strategic steps<\/p>\r\n <\/div>\r\n \r\n <div class=\"step-process-container\">\r\n <div class=\"step-process\">\r\n <div class=\"step-icon\" onclick=\"scrollToSection('analysis')\">\r\n <div class=\"icon-background\">\r\n <i class=\"fas fa-chart-line\"><\/i>\r\n <\/div>\r\n <\/div>\r\n <div class=\"step-content\">\r\n <h3>Step One<\/h3>\r\n <strong>Assessment<\/strong>\r\n <p>Assessment of current status and identification of requirements<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"step-process\">\r\n <div class=\"step-icon\" onclick=\"scrollToSection('testing')\">\r\n <div class=\"icon-background\">\r\n <i class=\"fas fa-microscope\"><\/i>\r\n <\/div>\r\n <\/div>\r\n <div class=\"step-content\">\r\n <h3>Step Two<\/h3>\r\n <strong>Testing<\/strong>\r\n <p>Comprehensive accessibility testing and evaluation<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"step-process\">\r\n <div class=\"step-icon\" onclick=\"scrollToSection('planning')\">\r\n <div class=\"icon-background\">\r\n <i class=\"fas fa-route\"><\/i>\r\n <\/div>\r\n <\/div>\r\n <div class=\"step-content\">\r\n <h3>Step Three<\/h3>\r\n <strong>Planning<\/strong>\r\n <p>Strategy development and implementation planning<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"step-process\">\r\n <div class=\"step-icon\" onclick=\"scrollToSection('implementation')\">\r\n <div class=\"icon-background\">\r\n <i class=\"fas fa-cogs\"><\/i>\r\n <\/div>\r\n <\/div>\r\n <div class=\"step-content\">\r\n <h3>Step Four<\/h3>\r\n <strong>Implementation<\/strong>\r\n <p>Implementation of technical improvements<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"step-process\">\r\n <div class=\"step-icon\" onclick=\"scrollToSection('delivery')\">\r\n <div class=\"icon-background\">\r\n <i class=\"fas fa-check-circle\"><\/i>\r\n <\/div>\r\n <\/div>\r\n <div class=\"step-content\">\r\n <h3>Step Five<\/h3>\r\n <strong>Validation<\/strong>\r\n <p>Final validation and documentation delivery<\/p>\r\n <\/div>\r\n <\/div>\r\n <!-- Bayrak (Flag) simgesi, s\u00fcrecin sonu i\u00e7in -->\r\n <div class=\"step-process\" style=\"cursor:default;\">\r\n <div class=\"step-icon\">\r\n <div class=\"icon-background\" style=\"background:#2ecc40;\">\r\n <i class=\"fas fa-flag\" style=\"color: black; font-size: 28px;\"><\/i>\r\n <\/div>\r\n <\/div>\r\n <div class=\"step-content\">\r\n <h3 style=\"color:#2ecc40;\">Finish<\/h3>\r\n <strong>Finish<\/strong>\r\n <p>Process Complete<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Detayl\u0131 Section'lar -->\r\n <div class=\"detail-sections\">\r\n <div class=\"section-header\">\r\n <h2>Detailed Process Explanations<\/h2>\r\n <p>Examine the details of each step and our processes closely. We provide you with the best service using modern technologies and our expert team.<\/p>\r\n <\/div>\r\n\r\n <!-- Analiz Section -->\r\n <div class=\"detail-section\" id=\"analysis\">\r\n <div class=\"section-timeline\">\r\n <div class=\"timeline-circle\">\r\n <i class=\"fas fa-chart-line\"><\/i>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"section-content-wrapper\">\r\n <div class=\"section-header-inline\">\r\n <div class=\"section-icon\">\r\n <i class=\"fas fa-chart-line\"><\/i>\r\n <\/div>\r\n <div>\r\n <h3 class=\"section-title\">1. Analysis and Assessment<\/h3>\r\n <p class=\"section-subtitle\">We analyze your project's current status and identify your requirements<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"section-content\">\r\n <div class=\"content-left\">\r\n <p>In the first stage, we conduct a comprehensive analysis of your project. We evaluate your current website's accessibility status, analyze legal requirements, and develop a customized strategy for you.<\/p>\r\n \r\n <p>At this stage, we prepare a free preliminary assessment report and identify your project's needs in detail. This enables us to provide you with the most suitable solution.<\/p>\r\n <\/div>\r\n\r\n <div class=\"content-right\">\r\n <h4>What We Do at This Stage:<\/h4>\r\n <ul>\r\n <li>Initial consultation and project scope definition<\/li>\r\n <li>Current website\/application analysis<\/li>\r\n <li>Legal requirements assessment<\/li>\r\n <li>Budget and timeline determination<\/li>\r\n <li>Free preliminary assessment report<\/li>\r\n <li>Test strategy development<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Test Section -->\r\n <div class=\"detail-section\" id=\"testing\">\r\n <div class=\"section-timeline\">\r\n <div class=\"timeline-circle\">\r\n <i class=\"fas fa-microscope\"><\/i>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"section-content-wrapper\">\r\n <div class=\"section-header-inline\">\r\n <div class=\"section-icon\">\r\n <i class=\"fas fa-microscope\"><\/i>\r\n <\/div>\r\n <div>\r\n <h3 class=\"section-title\">2. Comprehensive Testing Process<\/h3>\r\n <p class=\"section-subtitle\">Detailed accessibility analysis with automated and manual testing<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"section-content\">\r\n <div class=\"content-left\">\r\n <p>We comprehensively analyze your website's accessibility status using professional testing tools and our expert team. We implement all processes from automated scans to manual testing.<\/p>\r\n \r\n <p>We provide a complete analysis with screen reader tests, keyboard navigation controls, and mobile accessibility assessments.<\/p>\r\n <\/div>\r\n\r\n <div class=\"content-right\">\r\n <h4>Our Testing Process:<\/h4>\r\n <ul>\r\n <li>Control with automated scanning tools<\/li>\r\n <li>Screen reader tests (JAWS, NVDA, VoiceOver)<\/li>\r\n <li>Keyboard navigation tests<\/li>\r\n <li>Mobile accessibility tests<\/li>\r\n <li>WCAG 2.1 AA criteria verification<\/li>\r\n <li>Color contrast and typography analysis<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Planlama Section -->\r\n <div class=\"detail-section\" id=\"planning\">\r\n <div class=\"section-timeline\">\r\n <div class=\"timeline-circle\">\r\n <i class=\"fas fa-route\"><\/i>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"section-content-wrapper\">\r\n <div class=\"section-header-inline\">\r\n <div class=\"section-icon\">\r\n <i class=\"fas fa-route\"><\/i>\r\n <\/div>\r\n <div>\r\n <h3 class=\"section-title\">3. Strategy and Planning<\/h3>\r\n <p class=\"section-subtitle\">Detailed implementation strategy development based on test results<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"section-content\">\r\n <div class=\"content-left\">\r\n <p>We develop a customized implementation strategy by analyzing test results. We categorize identified issues by priority and plan the most effective solutions.<\/p>\r\n \r\n <p>At this stage, we prepare a detailed report, conduct cost analysis, and determine the implementation timeline.<\/p>\r\n <\/div>\r\n\r\n <div class=\"content-right\">\r\n <h4>Planning Process:<\/h4>\r\n <ul>\r\n <li>Analysis of test results<\/li>\r\n <li>Priority level determination<\/li>\r\n <li>Technical solution proposal preparation<\/li>\r\n <li>Implementation timeline creation<\/li>\r\n <li>Cost analysis and ROI calculation<\/li>\r\n <li>Detailed report preparation<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Uygulama Section -->\r\n <div class=\"detail-section\" id=\"implementation\">\r\n <div class=\"section-timeline\">\r\n <div class=\"timeline-circle\">\r\n <i class=\"fas fa-cogs\"><\/i>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"section-content-wrapper\">\r\n <div class=\"section-header-inline\">\r\n <div class=\"section-icon\">\r\n <i class=\"fas fa-cogs\"><\/i>\r\n <\/div>\r\n <div>\r\n <h3 class=\"section-title\">4. Technical Implementation<\/h3>\r\n <p class=\"section-subtitle\">Code-level implementation of accessibility improvements<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"section-content\">\r\n <div class=\"content-left\">\r\n <p>We implement accessibility improvements directly at the code level with our expert development team. We address all technical details from HTML structure to CSS, JavaScript to ARIA labels.<\/p>\r\n \r\n <p>We make step-by-step improvements starting from critical issues and test at every stage.<\/p>\r\n <\/div>\r\n\r\n <div class=\"content-right\">\r\n <h4>Implementation Areas:<\/h4>\r\n <ul>\r\n <li>HTML semantic structure optimization<\/li>\r\n <li>ARIA labels and roles addition<\/li>\r\n <li>CSS accessibility improvements<\/li>\r\n <li>JavaScript accessibility fixes<\/li>\r\n <li>Color contrast optimization<\/li>\r\n <li>Keyboard navigation improvements<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- E\u011fitim Section -->\r\n <div class=\"detail-section\" id=\"training\">\r\n <div class=\"section-timeline\">\r\n <div class=\"timeline-circle\">\r\n <i class=\"fas fa-users\"><\/i>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"section-content-wrapper\">\r\n <div class=\"section-header-inline\">\r\n <div class=\"section-icon\">\r\n <i class=\"fas fa-users\"><\/i>\r\n <\/div>\r\n <div>\r\n <h3 class=\"section-title\">5. Training and Support<\/h3>\r\n <p class=\"section-subtitle\">Training your team on accessibility<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"section-content\">\r\n <div class=\"content-left\">\r\n <p>We comprehensively train your team on accessibility. We educate all team members from developers to designers, content managers to testing experts.<\/p>\r\n \r\n <p>We ensure long-term success with continuous support and consulting services.<\/p>\r\n <\/div>\r\n\r\n <div class=\"content-right\">\r\n <h4>Training Program:<\/h4>\r\n <ul>\r\n <li>Accessibility fundamentals training<\/li>\r\n <li>WCAG guidelines and standards<\/li>\r\n <li>Testing methodologies and tools<\/li>\r\n <li>Compliance requirements<\/li>\r\n <li>Continuous support and consulting<\/li>\r\n <li>Best practice recommendations<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Teslim Section -->\r\n <div class=\"detail-section\" id=\"delivery\">\r\n <div class=\"section-timeline\">\r\n <div class=\"timeline-circle\">\r\n <i class=\"fas fa-trophy\"><\/i>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"section-content-wrapper\">\r\n <div class=\"section-header-inline\">\r\n <div class=\"section-icon\">\r\n <i class=\"fas fa-trophy\"><\/i>\r\n <\/div>\r\n <div>\r\n <h3 class=\"section-title\">6. Final Validation and Delivery<\/h3>\r\n <p class=\"section-subtitle\">Testing all improvements and documentation delivery<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"section-content\">\r\n <div class=\"content-left\">\r\n <p>In the final stage, we comprehensively test all improvements and validate accessibility compliance. We verify legal requirements and prepare necessary documentation.<\/p>\r\n \r\n <p>We complete the project with accessibility statement, compliance report, and technical documentation.<\/p>\r\n <\/div>\r\n\r\n <div class=\"content-right\">\r\n <h4>Final Process:<\/h4>\r\n <ul>\r\n <li>Testing all improvements<\/li>\r\n <li>WCAG 2.1 AA compliance verification<\/li>\r\n <li>Legal requirements verification<\/li>\r\n <li>Accessibility statement preparation<\/li>\r\n <li>Technical documentation delivery<\/li>\r\n <li>User testing implementation<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u0130statistikler -->\r\n <div class=\"stats-section\">\r\n <div class=\"section-header\">\r\n <h2>Why Choose Us?<\/h2>\r\n <p>We make a difference with our experience and achievements.<\/p>\r\n <\/div>\r\n\r\n <div class=\"stats-grid\">\r\n <div class=\"stat-item\">\r\n <span class=\"stat-number\">100+<\/span>\r\n <div class=\"stat-label\">Completed Projects<\/div>\r\n <div class=\"stat-description\">Successfully completed accessibility projects<\/div>\r\n <\/div>\r\n\r\n <div class=\"stat-item\">\r\n <span class=\"stat-number\">98%<\/span>\r\n <div class=\"stat-label\">Customer Satisfaction<\/div>\r\n <div class=\"stat-description\">Percentage of customers satisfied with our services<\/div>\r\n <\/div>\r\n\r\n <div class=\"stat-item\">\r\n <span class=\"stat-number\">24\/7<\/span>\r\n <div class=\"stat-label\">Technical Support<\/div>\r\n <div class=\"stat-description\">Uninterrupted technical support and consulting<\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- CTA B\u00f6l\u00fcm\u00fc -->\r\n <div class=\"cta-section\">\r\n <div class=\"cta-content\">\r\n <h3>Let's Start Your Project<\/h3>\r\n <p>Contact us to start your accessibility process. We can begin with a preliminary assessment.<\/p>\r\n\r\n <div class=\"cta-buttons\">\r\n <a href=\"https:\/\/darksn.de\/contact\/\" class=\"cta-btn cta-btn-primary\">Get Assessment<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Legal Disclaimer -->\r\n <div class=\"legal-disclaimer\">\r\n <div class=\"legal-disclaimer-card\">\r\n <div class=\"legal-icon\">\r\n <i class=\"fa-solid fa-triangle-exclamation\"><\/i>\r\n <\/div>\r\n <div class=\"legal-content\">\r\n <h4>Legal Disclaimer<\/h4>\r\n <p>\r\n The information provided on this website is for general informational purposes only. While we strive\r\n to provide accurate and up-to-date information regarding accessibility optimization and technology\r\n solutions, we do not accept any legal responsibility or liability for the accuracy, completeness, or\r\n suitability of this information for any specific purpose.\r\n <\/p>\r\n <p>\r\n We strongly recommend consulting with qualified legal professionals for specific legal advice\r\n regarding accessibility compliance, WCAG implementation, and regulatory obligations. Our services\r\n are provided \"as is\" without any warranties, express or implied.\r\n <\/p>\r\n <p>\r\n By using our services, you acknowledge that DARKSN is not responsible for any legal consequences,\r\n penalties, or damages that may arise from accessibility optimization or technology implementation\r\n decisions.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Smooth scroll function\r\n function scrollToSection(sectionId) {\r\n const section = document.getElementById(sectionId);\r\n if (section) {\r\n section.scrollIntoView({ \r\n behavior: 'smooth',\r\n block: 'start'\r\n });\r\n }\r\n }\r\n\r\n \/\/ Animasyonlar i\u00e7in Intersection Observer\r\n const observerOptions = {\r\n threshold: 0.1,\r\n rootMargin: '0px 0px -50px 0px'\r\n };\r\n\r\n const observer = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.style.opacity = '1';\r\n entry.target.style.transform = 'translateY(0)';\r\n \r\n \/\/ Kart animasyonlar\u0131 i\u00e7in ek efektler\r\n if (entry.target.classList.contains('detail-section')) {\r\n entry.target.style.animation = 'slideInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1)';\r\n }\r\n }\r\n });\r\n }, observerOptions);\r\n\r\n \/\/ CSS animasyonlar\u0131 i\u00e7in stil ekle\r\n const style = document.createElement('style');\r\n style.textContent = `\r\n @keyframes slideInUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(50px) scale(0.95);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0) scale(1);\r\n }\r\n }\r\n \r\n @keyframes fadeInScale {\r\n from {\r\n opacity: 0;\r\n transform: scale(0.8);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: scale(1);\r\n }\r\n }\r\n `;\r\n document.head.appendChild(style);\r\n\r\n \/\/ T\u00fcm animasyonlu \u00f6\u011feleri g\u00f6zlemle\r\n document.addEventListener('DOMContentLoaded', () => {\r\n const animatedElements = document.querySelectorAll('.process-step, .detail-section, .stat-item');\r\n animatedElements.forEach((el, index) => {\r\n el.style.opacity = '0';\r\n el.style.transform = 'translateY(30px)';\r\n el.style.transition = 'all 0.6s ease';\r\n \r\n \/\/ Staggered animasyon i\u00e7in delay\r\n if (el.classList.contains('detail-section')) {\r\n el.style.animationDelay = `${index * 0.2}s`;\r\n }\r\n \r\n observer.observe(el);\r\n });\r\n });\r\n <\/script>\r\n<\/body>\r\n\r\n<\/html>\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>Work Process – Darksn Our Work Process – How We Operate Discover how our accessibility services work step by step. We transparently explain our entire process from initial contact to final delivery. Explore Process Our Accessibility Service Process Six strategic steps guiding your accessibility journey. At every stage, our expert team works with cutting-edge technologies and proven methodologies to bring your website into compliance with WCAG 2.1 AA standards. From ground zero to full compliance, we’re with you every step of the way. A Step Process Presentation Our comprehensive accessibility implementation process with 5 strategic steps Step One Assessment Assessment of current status and identification of requirements Step Two Testing Comprehensive accessibility testing and evaluation Step Three Planning Strategy development and implementation planning Step Four Implementation Implementation of technical improvements Step Five Validation Final validation and documentation delivery Finish Finish Process Complete Detailed Process Explanations Examine the details of each step and our processes closely. We provide you with the best service using modern technologies and our expert team. 1. Analysis and Assessment We analyze your project’s current status and identify your requirements In the first stage, we conduct a comprehensive analysis of your project. We evaluate your current website’s accessibility status, analyze legal requirements, and develop a customized strategy for you. At this stage, we prepare a free preliminary assessment report and identify your project’s needs in detail. This enables us to provide you with the most suitable solution. What We Do at This Stage: Initial consultation and project scope definition Current website\/application analysis Legal requirements assessment Budget and timeline determination Free preliminary assessment report Test strategy development 2. Comprehensive Testing Process Detailed accessibility analysis with automated and manual testing We comprehensively analyze your website’s accessibility status using professional testing tools and our expert team. We implement all processes from automated scans to manual testing. We provide a complete analysis with screen reader tests, keyboard navigation controls, and mobile accessibility assessments. Our Testing Process: Control with automated scanning tools Screen reader tests (JAWS, NVDA, VoiceOver) Keyboard navigation tests Mobile accessibility tests WCAG 2.1 AA criteria verification Color contrast and typography analysis 3. Strategy and Planning Detailed implementation strategy development based on test results We develop a customized implementation strategy by analyzing test results. We categorize identified issues by priority and plan the most effective solutions. At this stage, we prepare a detailed report, conduct cost analysis, and determine the implementation timeline. Planning Process: Analysis of test results Priority level determination Technical solution proposal preparation Implementation timeline creation Cost analysis and ROI calculation Detailed report preparation 4. Technical Implementation Code-level implementation of accessibility improvements We implement accessibility improvements directly at the code level with our expert development team. We address all technical details from HTML structure to CSS, JavaScript to ARIA labels. We make step-by-step improvements starting from critical issues and test at every stage. Implementation Areas: HTML semantic structure optimization ARIA labels and roles addition CSS accessibility improvements JavaScript accessibility fixes Color contrast optimization Keyboard navigation improvements 5. Training and Support Training your team on accessibility We comprehensively train your team on accessibility. We educate all team members from developers to designers, content managers to testing experts. We ensure long-term success with continuous support and consulting services. Training Program: Accessibility fundamentals training WCAG guidelines and standards Testing methodologies and tools Compliance requirements Continuous support and consulting Best practice recommendations 6. Final Validation and Delivery Testing all improvements and documentation delivery In the final stage, we comprehensively test all improvements and validate accessibility compliance. We verify legal requirements and prepare necessary documentation. We complete the project with accessibility statement, compliance report, and technical documentation. Final Process: Testing all improvements WCAG 2.1 AA compliance verification Legal requirements verification Accessibility statement preparation Technical documentation delivery User testing implementation Why Choose Us? We make a difference with our experience and achievements. 100+ Completed Projects Successfully completed accessibility projects 98% Customer Satisfaction Percentage of customers satisfied with our services 24\/7 Technical Support Uninterrupted technical support and consulting Let’s Start Your Project Contact us to start your accessibility process. We can begin with a preliminary assessment. Get Assessment Legal Disclaimer The information provided on this website is for general informational purposes only. While we strive to provide accurate and up-to-date information regarding accessibility optimization and technology solutions, we do not accept any legal responsibility or liability for the accuracy, completeness, or suitability of this information for any specific purpose. We strongly recommend consulting with qualified legal professionals for specific legal advice regarding accessibility compliance, WCAG implementation, and regulatory obligations. Our services are provided “as is” without any warranties, express or implied. By using our services, you acknowledge that DARKSN is not responsible for any legal consequences, penalties, or damages that may arise from accessibility optimization or technology implementation decisions.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"coauthors":[35],"class_list":["post-29774","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/darksn.de\/en\/wp-json\/wp\/v2\/pages\/29774","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/darksn.de\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/darksn.de\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/darksn.de\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/darksn.de\/en\/wp-json\/wp\/v2\/comments?post=29774"}],"version-history":[{"count":41,"href":"https:\/\/darksn.de\/en\/wp-json\/wp\/v2\/pages\/29774\/revisions"}],"predecessor-version":[{"id":30273,"href":"https:\/\/darksn.de\/en\/wp-json\/wp\/v2\/pages\/29774\/revisions\/30273"}],"wp:attachment":[{"href":"https:\/\/darksn.de\/en\/wp-json\/wp\/v2\/media?parent=29774"}],"wp:term":[{"taxonomy":"author","embeddable":true,"href":"https:\/\/darksn.de\/en\/wp-json\/wp\/v2\/coauthors?post=29774"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}