{"id":828,"date":"2022-11-06T13:33:54","date_gmt":"2022-11-06T13:33:54","guid":{"rendered":"http:\/\/sarmedya.com\/wp\/?page_id=828"},"modified":"2025-09-26T23:59:31","modified_gmt":"2025-09-26T23:59:31","slug":"iletisim","status":"publish","type":"page","link":"https:\/\/sarmedya.com\/en\/iletisim\/","title":{"rendered":"Contact Us"},"content":{"rendered":"
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\r\n\r\n\r\n \r\n \r\n \u0130leti\u015fim - Sar Medya<\/title>\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: 'Arial', sans-serif;\r\n overflow-x: hidden;\r\n }\r\n\r\n .contact-container {\r\n background: linear-gradient(135deg, #0f1419 0%, #1a252f 50%, #0d1117 100%);\r\n min-height: 100vh;\r\n padding: 60px 20px;\r\n color: white;\r\n position: relative;\r\n }\r\n\r\n .contact-wrapper {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n \/* Floating Elements for Animation *\/\r\n .floating-decorative {\r\n position: fixed;\r\n pointer-events: none;\r\n z-index: 10;\r\n opacity: 0;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .star-particle {\r\n width: 8px;\r\n height: 8px;\r\n background: #f39c12;\r\n clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);\r\n animation: sparkle 2s ease-in-out infinite;\r\n }\r\n\r\n .circle-particle {\r\n width: 6px;\r\n height: 6px;\r\n background: #3498db;\r\n border-radius: 50%;\r\n animation: float 3s ease-in-out infinite;\r\n }\r\n\r\n .triangle-particle {\r\n width: 0;\r\n height: 0;\r\n border-left: 4px solid transparent;\r\n border-right: 4px solid transparent;\r\n border-bottom: 8px solid #e74c3c;\r\n animation: rotate 4s linear infinite;\r\n }\r\n\r\n @keyframes sparkle {\r\n 0%, 100% { opacity: 0.3; transform: scale(1); }\r\n 50% { opacity: 1; transform: scale(1.2); }\r\n }\r\n\r\n @keyframes float {\r\n 0%, 100% { transform: translateY(0px); }\r\n 50% { transform: translateY(-10px); }\r\n }\r\n\r\n @keyframes rotate {\r\n 0% { transform: rotate(0deg); }\r\n 100% { transform: rotate(360deg); }\r\n }\r\n\r\n \/* Enhanced Contact Card Animations *\/\r\n .contact-card.dance {\r\n animation: cardDance 3s ease-in-out;\r\n }\r\n\r\n @keyframes cardDance {\r\n 0% { transform: translateY(0) rotate(0deg) scale(1); }\r\n 20% { transform: translateY(-30px) rotate(5deg) scale(1.05); }\r\n 40% { transform: translateY(-20px) rotate(-3deg) scale(0.98); }\r\n 60% { transform: translateY(-40px) rotate(2deg) scale(1.02); }\r\n 80% { transform: translateY(-10px) rotate(-1deg) scale(1.01); }\r\n 100% { transform: translateY(0) rotate(0deg) scale(1); }\r\n }\r\n\r\n \/* Contact Icon Orbit Animation *\/\r\n .contact-icon.orbit {\r\n animation: iconOrbit 2.5s ease-in-out;\r\n }\r\n\r\n @keyframes iconOrbit {\r\n 0% { transform: translateX(0) translateY(0) rotate(0deg) scale(1); }\r\n 25% { transform: translateX(40px) translateY(-20px) rotate(90deg) scale(1.2); }\r\n 50% { transform: translateX(0) translateY(-40px) rotate(180deg) scale(0.9); }\r\n 75% { transform: translateX(-40px) translateY(-20px) rotate(270deg) scale(1.1); }\r\n 100% { transform: translateX(0) translateY(0) rotate(360deg) scale(1); }\r\n }\r\n\r\n \/* Form Dancing Animation *\/\r\n .contact-form.pulse {\r\n animation: formPulse 2s ease-in-out;\r\n }\r\n\r\n @keyframes formPulse {\r\n 0% { transform: scale(1); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4); }\r\n 25% { transform: scale(1.02); box-shadow: 0 20px 50px rgba(96, 165, 250, 0.3); }\r\n 50% { transform: scale(1.05); box-shadow: 0 25px 60px rgba(96, 165, 250, 0.4); }\r\n 75% { transform: scale(1.02); box-shadow: 0 20px 50px rgba(96, 165, 250, 0.3); }\r\n 100% { transform: scale(1); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4); }\r\n }\r\n\r\n \/* Social Icons Flying Animation *\/\r\n .social-icon.fly {\r\n animation: iconFly 3s ease-in-out;\r\n }\r\n\r\n @keyframes iconFly {\r\n 0% { transform: translateX(0) translateY(0) rotate(0deg); }\r\n 20% { transform: translateX(80px) translateY(-60px) rotate(180deg); }\r\n 40% { transform: translateX(-60px) translateY(-100px) rotate(-90deg); }\r\n 60% { transform: translateX(100px) translateY(-80px) rotate(270deg); }\r\n 80% { transform: translateX(-40px) translateY(-30px) rotate(45deg); }\r\n 100% { transform: translateX(0) translateY(0) rotate(360deg); }\r\n }\r\n\r\n \/* Map Container Bounce *\/\r\n .map-container.bounce {\r\n animation: mapBounce 2.5s ease-in-out;\r\n }\r\n\r\n @keyframes mapBounce {\r\n 0% { transform: translateY(0) scale(1); }\r\n 25% { transform: translateY(-30px) scale(1.05); }\r\n 50% { transform: translateY(-50px) scale(0.95); }\r\n 75% { transform: translateY(-20px) scale(1.02); }\r\n 100% { transform: translateY(0) scale(1); }\r\n }\r\n\r\n .contact-header {\r\n text-align: center;\r\n margin-bottom: 60px;\r\n animation: fadeInDown 1s ease-out;\r\n }\r\n\r\n .contact-header h1 {\r\n font-size: 3rem;\r\n margin-bottom: 20px;\r\n background: linear-gradient(45deg, #ffffff, #f8f9fa);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n font-weight: 700;\r\n text-shadow: 0 0 30px rgba(255, 255, 255, 0.3);\r\n }\r\n\r\n .contact-header p {\r\n font-size: 1.2rem;\r\n color: #e1e8ed;\r\n max-width: 600px;\r\n margin: 0 auto;\r\n line-height: 1.6;\r\n }\r\n\r\n .contact-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\r\n gap: 40px;\r\n margin-bottom: 60px;\r\n }\r\n\r\n .contact-card {\r\n background: linear-gradient(145deg, rgba(21, 32, 43, 0.9), rgba(13, 17, 23, 0.8));\r\n backdrop-filter: blur(15px);\r\n border-radius: 25px;\r\n padding: 40px 30px;\r\n border: 2px solid rgba(255, 255, 255, 0.1);\r\n transition: all 0.4s ease;\r\n animation: fadeInUp 1s ease-out;\r\n position: relative;\r\n overflow: hidden;\r\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);\r\n }\r\n\r\n .contact-card::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: -100%;\r\n width: 100%;\r\n height: 100%;\r\n background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);\r\n transition: left 0.6s ease;\r\n }\r\n\r\n .contact-card:hover::before {\r\n left: 100%;\r\n }\r\n\r\n .contact-card:hover {\r\n transform: translateY(-15px);\r\n box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);\r\n border-color: rgba(255, 255, 255, 0.3);\r\n background: linear-gradient(145deg, rgba(21, 32, 43, 1), rgba(13, 17, 23, 0.9));\r\n }\r\n\r\n .contact-icon {\r\n width: 80px;\r\n height: 80px;\r\n background: linear-gradient(45deg, #1e3a8a, #1e40af);\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 25px;\r\n font-size: 35px;\r\n transition: all 0.4s ease;\r\n box-shadow: 0 8px 25px rgba(30, 58, 138, 0.4);\r\n border: 3px solid rgba(255, 255, 255, 0.1);\r\n }\r\n\r\n .contact-card:hover .contact-icon {\r\n transform: scale(1.15) rotate(360deg);\r\n box-shadow: 0 12px 35px rgba(30, 58, 138, 0.6);\r\n }\r\n\r\n .contact-title {\r\n font-size: 1.6rem;\r\n margin-bottom: 15px;\r\n color: #ffffff;\r\n font-weight: 700;\r\n }\r\n\r\n .contact-info {\r\n color: #e1e8ed;\r\n line-height: 1.8;\r\n font-size: 1.1rem;\r\n }\r\n\r\n .contact-info a {\r\n color: #60a5fa;\r\n text-decoration: none;\r\n transition: all 0.3s ease;\r\n border-bottom: 1px solid transparent;\r\n font-weight: 500;\r\n }\r\n\r\n .contact-info a:hover {\r\n color: #ffffff;\r\n border-bottom-color: #60a5fa;\r\n text-shadow: 0 0 10px rgba(96, 165, 250, 0.5);\r\n }\r\n\r\n .flag-icon {\r\n display: inline-block;\r\n margin-right: 10px;\r\n font-size: 1.5rem;\r\n vertical-align: middle;\r\n }\r\n\r\n .contact-form {\r\n background: linear-gradient(145deg, rgba(21, 32, 43, 0.95), rgba(13, 17, 23, 0.9));\r\n backdrop-filter: blur(15px);\r\n border-radius: 25px;\r\n padding: 50px;\r\n border: 2px solid rgba(255, 255, 255, 0.1);\r\n animation: fadeInUp 1.2s ease-out;\r\n box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);\r\n }\r\n\r\n .form-title {\r\n font-size: 2.2rem;\r\n margin-bottom: 30px;\r\n text-align: center;\r\n color: #ffffff;\r\n font-weight: 700;\r\n text-shadow: 0 0 20px rgba(255, 255, 255, 0.2);\r\n }\r\n\r\n .form-group {\r\n margin-bottom: 25px;\r\n }\r\n\r\n .form-group label {\r\n display: block;\r\n margin-bottom: 8px;\r\n color: #f8f9fa;\r\n font-weight: 600;\r\n font-size: 1.05rem;\r\n }\r\n\r\n .form-group input,\r\n .form-group textarea {\r\n width: 100%;\r\n padding: 18px 24px;\r\n border: 2px solid rgba(255, 255, 255, 0.15);\r\n border-radius: 15px;\r\n background: rgba(13, 17, 23, 0.8);\r\n color: #ffffff;\r\n font-size: 1.05rem;\r\n transition: all 0.3s ease;\r\n backdrop-filter: blur(10px);\r\n }\r\n\r\n .form-group input::placeholder,\r\n .form-group textarea::placeholder {\r\n color: #94a3b8;\r\n }\r\n\r\n .form-group input:focus,\r\n .form-group textarea:focus {\r\n outline: none;\r\n border-color: #60a5fa;\r\n box-shadow: 0 0 25px rgba(96, 165, 250, 0.3);\r\n background: rgba(13, 17, 23, 0.9);\r\n transform: translateY(-2px);\r\n }\r\n\r\n .form-group textarea {\r\n min-height: 140px;\r\n resize: vertical;\r\n }\r\n\r\n .submit-btn {\r\n width: 100%;\r\n padding: 20px;\r\n background: linear-gradient(45deg, #1e3a8a, #1e40af);\r\n color: white;\r\n border: none;\r\n border-radius: 15px;\r\n font-size: 1.3rem;\r\n font-weight: 700;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n position: relative;\r\n overflow: hidden;\r\n box-shadow: 0 8px 25px rgba(30, 58, 138, 0.4);\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n }\r\n\r\n .submit-btn::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: -100%;\r\n width: 100%;\r\n height: 100%;\r\n background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);\r\n transition: left 0.6s ease;\r\n }\r\n\r\n .submit-btn:hover::before {\r\n left: 100%;\r\n }\r\n\r\n .submit-btn:hover {\r\n transform: translateY(-3px);\r\n box-shadow: 0 15px 40px rgba(30, 58, 138, 0.6);\r\n background: linear-gradient(45deg, #1e40af, #2563eb);\r\n }\r\n\r\n .social-links {\r\n text-align: center;\r\n margin-top: 50px;\r\n animation: fadeInUp 1.4s ease-out;\r\n }\r\n\r\n .social-links h3 {\r\n margin-bottom: 30px;\r\n color: #ffffff;\r\n font-size: 1.6rem;\r\n font-weight: 700;\r\n }\r\n\r\n .social-icons {\r\n display: flex;\r\n justify-content: center;\r\n gap: 25px;\r\n }\r\n\r\n .social-icon {\r\n width: 60px;\r\n height: 60px;\r\n background: linear-gradient(145deg, rgba(21, 32, 43, 0.9), rgba(13, 17, 23, 0.8));\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: #ffffff;\r\n text-decoration: none;\r\n transition: all 0.4s ease;\r\n border: 2px solid rgba(255, 255, 255, 0.1);\r\n font-size: 24px;\r\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);\r\n }\r\n\r\n .social-icon svg {\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .social-icon.facebook:hover {\r\n background: linear-gradient(45deg, #1877f2, #166fe5);\r\n transform: translateY(-8px) scale(1.1);\r\n box-shadow: 0 15px 35px rgba(24, 119, 242, 0.5);\r\n border-color: rgba(255, 255, 255, 0.3);\r\n }\r\n\r\n .social-icon.instagram:hover {\r\n background: linear-gradient(45deg, #E4405F, #833AB4, #FD1D1D, #F77737);\r\n transform: translateY(-8px) scale(1.1);\r\n box-shadow: 0 15px 35px rgba(228, 64, 95, 0.5);\r\n border-color: rgba(255, 255, 255, 0.3);\r\n }\r\n\r\n .social-icon.twitter:hover {\r\n background: linear-gradient(45deg, #1DA1F2, #0d8bd9);\r\n transform: translateY(-8px) scale(1.1);\r\n box-shadow: 0 15px 35px rgba(29, 161, 242, 0.5);\r\n border-color: rgba(255, 255, 255, 0.3);\r\n }\r\n\r\n .social-icon.linkedin:hover {\r\n background: linear-gradient(45deg, #0077B5, #005885);\r\n transform: translateY(-8px) scale(1.1);\r\n box-shadow: 0 15px 35px rgba(0, 119, 181, 0.5);\r\n border-color: rgba(255, 255, 255, 0.3);\r\n }\r\n\r\n .social-icon:hover svg {\r\n transform: scale(1.1);\r\n }\r\n\r\n .map-container {\r\n margin-top: 50px;\r\n border-radius: 20px;\r\n overflow: hidden;\r\n height: 400px;\r\n border: 2px solid rgba(255, 255, 255, 0.1);\r\n animation: fadeInUp 1.6s ease-out;\r\n box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);\r\n }\r\n\r\n .map-container iframe {\r\n width: 100%;\r\n height: 100%;\r\n border: none;\r\n filter: grayscale(0.3) contrast(1.2);\r\n }\r\n\r\n .map-link {\r\n display: block;\r\n padding: 40px;\r\n background: linear-gradient(145deg, rgba(21, 32, 43, 0.9), rgba(13, 17, 23, 0.8));\r\n color: #60a5fa;\r\n text-decoration: none;\r\n text-align: center;\r\n font-size: 1.2rem;\r\n font-weight: 600;\r\n transition: all 0.3s ease;\r\n border-radius: 18px;\r\n }\r\n\r\n .map-link:hover {\r\n background: linear-gradient(145deg, rgba(30, 58, 138, 0.8), rgba(30, 64, 175, 0.6));\r\n color: #ffffff;\r\n transform: scale(1.02);\r\n }\r\n\r\n @keyframes fadeInDown {\r\n from {\r\n opacity: 0;\r\n transform: translateY(-50px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n @keyframes fadeInUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(50px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .contact-header h1 {\r\n font-size: 2.5rem;\r\n }\r\n \r\n .contact-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .contact-form {\r\n padding: 30px 20px;\r\n }\r\n \r\n .contact-container {\r\n padding: 40px 15px;\r\n }\r\n\r\n .contact-icon {\r\n width: 70px;\r\n height: 70px;\r\n font-size: 30px;\r\n }\r\n\r\n .social-icons {\r\n flex-wrap: wrap;\r\n gap: 15px;\r\n }\r\n }\r\n\r\n .office-badge {\r\n display: inline-block;\r\n background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));\r\n padding: 8px 16px;\r\n border-radius: 20px;\r\n font-size: 0.9rem;\r\n margin-top: 10px;\r\n border: 1px solid rgba(255, 255, 255, 0.2);\r\n }\r\n\r\n \/* Contact Form 7 Styling *\/\r\n .wpcf7 {\r\n color: white;\r\n }\r\n\r\n .wpcf7 form {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 25px;\r\n }\r\n\r\n .wpcf7 label {\r\n display: block;\r\n margin-bottom: 8px;\r\n color: #f8f9fa;\r\n font-weight: 600;\r\n font-size: 1.05rem;\r\n }\r\n\r\n .wpcf7 input[type=\"text\"],\r\n .wpcf7 input[type=\"email\"],\r\n .wpcf7 input[type=\"tel\"],\r\n .wpcf7 textarea {\r\n width: 100% !important;\r\n padding: 18px 24px !important;\r\n border: 2px solid rgba(255, 255, 255, 0.15) !important;\r\n border-radius: 15px !important;\r\n background: rgba(13, 17, 23, 0.8) !important;\r\n color: #ffffff !important;\r\n font-size: 1.05rem !important;\r\n transition: all 0.3s ease !important;\r\n backdrop-filter: blur(10px) !important;\r\n box-sizing: border-box;\r\n }\r\n\r\n .wpcf7 input::placeholder,\r\n .wpcf7 textarea::placeholder {\r\n color: #94a3b8 !important;\r\n }\r\n\r\n .wpcf7 input:focus,\r\n .wpcf7 textarea:focus {\r\n outline: none !important;\r\n border-color: #60a5fa !important;\r\n box-shadow: 0 0 25px rgba(96, 165, 250, 0.3) !important;\r\n background: rgba(13, 17, 23, 0.9) !important;\r\n transform: translateY(-2px) !important;\r\n }\r\n\r\n .wpcf7 textarea {\r\n min-height: 140px !important;\r\n resize: vertical !important;\r\n }\r\n\r\n .wpcf7 input[type=\"submit\"] {\r\n width: 100% !important;\r\n padding: 20px !important;\r\n background: linear-gradient(45deg, #1e3a8a, #1e40af) !important;\r\n color: white !important;\r\n border: none !important;\r\n border-radius: 15px !important;\r\n font-size: 1.3rem !important;\r\n font-weight: 700 !important;\r\n cursor: pointer !important;\r\n transition: all 0.3s ease !important;\r\n box-shadow: 0 8px 25px rgba(30, 58, 138, 0.4) !important;\r\n text-transform: uppercase !important;\r\n letter-spacing: 1px !important;\r\n }\r\n\r\n .wpcf7 input[type=\"submit\"]:hover {\r\n transform: translateY(-3px) !important;\r\n box-shadow: 0 15px 40px rgba(30, 58, 138, 0.6) !important;\r\n background: linear-gradient(45deg, #1e40af, #2563eb) !important;\r\n }\r\n\r\n \/* Contact Form 7 Response Messages *\/\r\n .wpcf7-response-output {\r\n margin: 20px 0 0 0 !important;\r\n padding: 15px 20px !important;\r\n border-radius: 10px !important;\r\n font-weight: 600 !important;\r\n }\r\n\r\n .wpcf7-mail-sent-ok {\r\n background: linear-gradient(45deg, rgba(34, 197, 94, 0.2), rgba(21, 128, 61, 0.2)) !important;\r\n border: 1px solid rgba(34, 197, 94, 0.5) !important;\r\n color: #10b981 !important;\r\n }\r\n\r\n .wpcf7-mail-sent-ng, .wpcf7-spam {\r\n background: linear-gradient(45deg, rgba(239, 68, 68, 0.2), rgba(185, 28, 28, 0.2)) !important;\r\n border: 1px solid rgba(239, 68, 68, 0.5) !important;\r\n color: #ef4444 !important;\r\n }\r\n\r\n .wpcf7-validation-errors {\r\n background: linear-gradient(45deg, rgba(251, 146, 60, 0.2), rgba(217, 119, 6, 0.2)) !important;\r\n border: 1px solid rgba(251, 146, 60, 0.5) !important;\r\n color: #f59e0b !important;\r\n }\r\n\r\n \/* Loading state for Contact Form 7 *\/\r\n .wpcf7 form.submitting input[type=\"submit\"] {\r\n background: linear-gradient(45deg, #059669, #10b981) !important;\r\n cursor: not-allowed !important;\r\n }\r\n\r\n \/* Hide HTML form when Contact Form 7 is active *\/\r\n .wpcf7-form ~ #contactForm {\r\n display: none !important;\r\n }\r\n\r\n \/* Background Animation Effects *\/\r\n .bg-animation {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n opacity: 0.06;\r\n pointer-events: none;\r\n z-index: 1;\r\n }\r\n\r\n .floating-shape {\r\n position: absolute;\r\n background: linear-gradient(45deg, rgba(96, 165, 250, 0.3), rgba(30, 58, 138, 0.2));\r\n border-radius: 30% 70% 70% 30% \/ 30% 30% 70% 70%;\r\n animation: morphFloat 8s ease-in-out infinite;\r\n }\r\n\r\n @keyframes morphFloat {\r\n 0%, 100% { \r\n transform: translateY(0px) rotate(0deg); \r\n border-radius: 30% 70% 70% 30% \/ 30% 30% 70% 70%;\r\n }\r\n 25% {\r\n transform: translateY(-15px) rotate(90deg);\r\n border-radius: 60% 40% 30% 70% \/ 60% 30% 70% 40%;\r\n }\r\n 50% { \r\n transform: translateY(-25px) rotate(180deg); \r\n border-radius: 40% 60% 60% 40% \/ 70% 30% 70% 30%;\r\n }\r\n 75% {\r\n transform: translateY(-15px) rotate(270deg);\r\n border-radius: 70% 30% 40% 60% \/ 30% 70% 30% 70%;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"contact-container\">\r\n <!-- Background Animation -->\r\n <div class=\"bg-animation\">\r\n <div class=\"floating-shape\" style=\"top: 10%; left: 5%; width: 100px; height: 100px; animation-delay: 0s;\"><\/div>\r\n <div class=\"floating-shape\" style=\"top: 60%; right: 8%; width: 80px; height: 80px; animation-delay: 2s;\"><\/div>\r\n <div class=\"floating-shape\" style=\"bottom: 20%; left: 12%; width: 120px; height: 120px; animation-delay: 4s;\"><\/div>\r\n <div class=\"floating-shape\" style=\"top: 30%; right: 25%; width: 60px; height: 60px; animation-delay: 6s;\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"contact-wrapper\">\r\n <div class=\"contact-header\">\r\n <h1>\u0130leti\u015fime Ge\u00e7in<\/h1>\r\n <p>Sar Medya olarak size en iyi hizmeti sunmak i\u00e7in buraday\u0131z. Projeleriniz ve sorular\u0131n\u0131z i\u00e7in bizimle ileti\u015fime ge\u00e7in.<\/p>\r\n <\/div>\r\n\r\n <div class=\"contact-grid\">\r\n <div class=\"contact-card\">\r\n <div class=\"contact-icon\">\ud83d\udcde<\/div>\r\n <h3 class=\"contact-title\">Telefon \u0130leti\u015fim<\/h3>\r\n <div class=\"contact-info\">\r\n <a href=\"tel: 905538831565\">0 553 883 1565<\/a><br>\r\n Her g\u00fcn 09:00 - 18:00 aras\u0131 ula\u015fabilirsiniz<br>\r\n <span class=\"office-badge\">\ud83c\uddf9\ud83c\uddf7 T\u00fcrkiye Hatt\u0131<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"contact-card\">\r\n <div class=\"contact-icon\">\u2709\ufe0f<\/div>\r\n <h3 class=\"contact-title\">E-posta \u0130leti\u015fim<\/h3>\r\n <div class=\"contact-info\">\r\n <a href=\"mailto:info@sarmedya.com\">info@sarmedya.com<\/a><br>\r\n 24 saat i\u00e7inde size d\u00f6n\u00fc\u015f yap\u0131yoruz<br>\r\n <span class=\"office-badge\">\ud83c\udf10 Global \u0130leti\u015fim<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"contact-card\">\r\n <div class=\"contact-icon\">\ud83d\udccd<\/div>\r\n <h3 class=\"contact-title\"><span class=\"flag-icon\">\ud83c\uddf9\ud83c\uddf7<\/span>\u0130stanbul Ofis<\/h3>\r\n <div class=\"contact-info\">\r\n Maltepe F\u0131nd\u0131kl\u0131 Mahallesi<br>\r\n \u015eahinli Sokak 22\/1<br>\r\n \u0130stanbul, T\u00fcrkiye<br>\r\n <span class=\"office-badge\">Ana Merkez<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"contact-card\">\r\n <div class=\"contact-icon\">\ud83c\udf0d<\/div>\r\n <h3 class=\"contact-title\"><span class=\"flag-icon\">\ud83c\uddfa\ud83c\uddf8<\/span>USA Ofis<\/h3>\r\n <div class=\"contact-info\">\r\n Wyoming, Casper<br>\r\n United States<br>\r\n International Operations<br>\r\n <span class=\"office-badge\">International Hub<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"contact-form\">\r\n <h2 class=\"form-title\">Mesaj G\u00f6nder<\/h2>\r\n \r\n <!-- WordPress Contact Form 7 -->\r\n <div id=\"wordpress-form\">\r\n \n<div class=\"wpcf7 no-js\" id=\"wpcf7-f4099-o1\" lang=\"tr-TR\" dir=\"ltr\" data-wpcf7-id=\"4099\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/en\/wp-json\/wp\/v2\/pages\/828#wpcf7-f4099-o1\" method=\"post\" class=\"wpcf7-form init\" aria-label=\"Contact Form\" novalidate=\"novalidate\" data-status=\"init\" data-trp-original-action=\"\/en\/wp-json\/wp\/v2\/pages\/828#wpcf7-f4099-o1\">\n<fieldset class=\"hidden-fields-container\"><input type=\"hidden\" name=\"_wpcf7\" value=\"4099\" \/><input type=\"hidden\" name=\"_wpcf7_version\" value=\"6.1.1\" \/><input type=\"hidden\" name=\"_wpcf7_locale\" value=\"tr_TR\" \/><input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f4099-o1\" \/><input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/><input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/>\n<\/fieldset>\n<p><label> Ad Soyad *<br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-name\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" autocomplete=\"name\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Ad\u0131n\u0131z\u0131 ve soyad\u0131n\u0131z\u0131 girin\" value=\"\" type=\"text\" name=\"your-name\" \/><\/span> <\/label>\n<\/p>\n<p><label> E-posta Adresiniz *<br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-email\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email\" autocomplete=\"email\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"E-posta adresinizi girin\" value=\"\" type=\"email\" name=\"your-email\" \/><\/span> <\/label>\n<\/p>\n<p><label> Phone<br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-phone\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-tel wpcf7-text wpcf7-validates-as-tel\" autocomplete=\"tel\" aria-invalid=\"false\" placeholder=\"Telefon numaran\u0131z\u0131 girin\" value=\"\" type=\"tel\" name=\"your-phone\" \/><\/span> <\/label>\n<\/p>\n<p><label> Konu *<br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-subject\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Mesaj\u0131n\u0131z\u0131n konusunu girin\" value=\"\" type=\"text\" name=\"your-subject\" \/><\/span> <\/label>\n<\/p>\n<p><label> Mesaj\u0131n\u0131z *<br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-message\"><textarea cols=\"40\" rows=\"10\" maxlength=\"2000\" class=\"wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Mesaj\u0131n\u0131z\u0131 buraya yaz\u0131n...\" name=\"your-message\"><\/textarea><\/span> <\/label>\n<\/p>\n<p><input class=\"wpcf7-form-control wpcf7-submit has-spinner\" type=\"submit\" value=\"Mesaj G\u00f6nder\" \/>\n<\/p><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<input type=\"hidden\" name=\"trp-form-language\" value=\"en\"\/><\/form>\n<\/div>\n\r\n <\/div>\r\n \r\n <!-- Fallback HTML Form -->\r\n <form id=\"contactForm\" style=\"display: none;\" action=\"\">\r\n <div class=\"form-group\">\r\n <label for=\"name\">Ad Soyad<\/label>\r\n <input type=\"text\" id=\"name\" name=\"name\" placeholder=\"Ad\u0131n\u0131z\u0131 ve soyad\u0131n\u0131z\u0131 girin\" required>\r\n <\/div>\r\n \r\n <div class=\"form-group\">\r\n <label for=\"email\">E-posta<\/label>\r\n <input type=\"email\" id=\"email\" name=\"email\" placeholder=\"E-posta adresinizi girin\" required>\r\n <\/div>\r\n \r\n <div class=\"form-group\">\r\n <label for=\"phone\">Phone<\/label>\r\n <input type=\"tel\" id=\"phone\" name=\"phone\" placeholder=\"Telefon numaran\u0131z\u0131 girin\">\r\n <\/div>\r\n \r\n <div class=\"form-group\">\r\n <label for=\"subject\">Konu<\/label>\r\n <input type=\"text\" id=\"subject\" name=\"subject\" placeholder=\"Mesaj\u0131n\u0131z\u0131n konusunu girin\" required>\r\n <\/div>\r\n \r\n <div class=\"form-group\">\r\n <label for=\"message\">Mesaj<\/label>\r\n <textarea id=\"message\" name=\"message\" placeholder=\"Mesaj\u0131n\u0131z\u0131 buraya yaz\u0131n...\" required><\/textarea>\r\n <\/div>\r\n \r\n <button type=\"button\" onclick=\"sendEmail()\" class=\"submit-btn\">Mesaj G\u00f6nder<\/button>\r\n <input type=\"hidden\" name=\"trp-form-language\" value=\"en\"\/><\/form>\r\n <\/div>\r\n\r\n <div class=\"social-links\">\r\n <h3>Bizi Takip Edin<\/h3>\r\n <div class=\"social-icons\">\r\n <a href=\"#\" class=\"social-icon facebook\">\r\n <svg viewbox=\"0 0 24 24\" width=\"24\" height=\"24\" fill=\"currentColor\">\r\n <path d=\"M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z\"\/>\r\n <\/svg>\r\n <\/a>\r\n <a href=\"#\" class=\"social-icon instagram\">\r\n <svg viewbox=\"0 0 24 24\" width=\"24\" height=\"24\" fill=\"currentColor\">\r\n <path d=\"M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z\"\/>\r\n <\/svg>\r\n <\/a>\r\n <a href=\"#\" class=\"social-icon twitter\">\r\n <svg viewbox=\"0 0 24 24\" width=\"24\" height=\"24\" fill=\"currentColor\">\r\n <path d=\"M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z\"\/>\r\n <\/svg>\r\n <\/a>\r\n <a href=\"#\" class=\"social-icon linkedin\">\r\n <svg viewbox=\"0 0 24 24\" width=\"24\" height=\"24\" fill=\"currentColor\">\r\n <path d=\"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z\"\/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"map-container\">\r\n <iframe \r\n src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d3011.7938156340414!2d29.108896!3d40.9351!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14cac0a6be749885%3A0x4b0a4b39969b1b39!2sF\u0131nd\u0131kl\u0131%2C%20\u015eahinli%20Sk.%20No%3A22%2C%2034846%20Maltepe%2F\u0130stanbul!5e0!3m2!1str!2str!4v1693123456789!5m2!1str!2str\" \r\n allowfullscreen=\"\" \r\n loading=\"lazy\" \r\n referrerpolicy=\"no-referrer-when-downgrade\">\r\n <\/iframe>\r\n <a href=\"https:\/\/maps.app.goo.gl\/P1caJi1c44iELQkJ7\" target=\"_blank\" class=\"map-link\" style=\"display: none;\">\r\n \ud83d\uddfa\ufe0f Google Maps'te Konumu G\u00f6r\u00fcnt\u00fcle\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Floating Decorative Elements -->\r\n <div class=\"floating-decorative star-particle\" id=\"particle1\"><\/div>\r\n <div class=\"floating-decorative circle-particle\" id=\"particle2\"><\/div>\r\n <div class=\"floating-decorative triangle-particle\" id=\"particle3\"><\/div>\r\n <div class=\"floating-decorative star-particle\" id=\"particle4\"><\/div>\r\n <div class=\"floating-decorative circle-particle\" id=\"particle5\"><\/div>\r\n\r\n <script>\r\n \/\/ Enhanced Animations System\r\n let isScrolling = false;\r\n let animationTriggers = new Set();\r\n\r\n function createParticleAnimation() {\r\n const particles = document.querySelectorAll('.floating-decorative');\r\n particles.forEach((particle, index) => {\r\n const randomX = Math.random() * window.innerWidth;\r\n const randomY = Math.random() * window.innerHeight;\r\n \r\n particle.style.left = randomX + 'px';\r\n particle.style.top = randomY + 'px';\r\n particle.style.opacity = '1';\r\n \r\n setTimeout(() => {\r\n particle.style.transition = 'all 2s cubic-bezier(0.68, -0.55, 0.265, 1.55)';\r\n particle.style.left = (randomX + (Math.random() - 0.5) * 400) + 'px';\r\n particle.style.top = (randomY + (Math.random() - 0.5) * 400) + 'px';\r\n particle.style.opacity = '0';\r\n }, 100 + index * 200);\r\n });\r\n }\r\n\r\n function animateRandomContactElements() {\r\n \/\/ Random contact card animation\r\n const contactCards = document.querySelectorAll('.contact-card');\r\n if (contactCards.length > 0) {\r\n const randomCard = contactCards[Math.floor(Math.random() * contactCards.length)];\r\n randomCard.classList.add('dance');\r\n setTimeout(() => randomCard.classList.remove('dance'), 3000);\r\n }\r\n\r\n \/\/ Random contact icon animation\r\n const contactIcons = document.querySelectorAll('.contact-icon');\r\n if (contactIcons.length > 0) {\r\n const randomIcon = contactIcons[Math.floor(Math.random() * contactIcons.length)];\r\n randomIcon.classList.add('orbit');\r\n setTimeout(() => randomIcon.classList.remove('orbit'), 2500);\r\n }\r\n\r\n \/\/ Form pulse animation\r\n const contactForm = document.querySelector('.contact-form');\r\n if (contactForm && Math.random() > 0.7) {\r\n contactForm.classList.add('pulse');\r\n setTimeout(() => contactForm.classList.remove('pulse'), 2000);\r\n }\r\n\r\n \/\/ Random social icon flying\r\n const socialIcons = document.querySelectorAll('.social-icon');\r\n if (socialIcons.length > 0) {\r\n const randomSocialIcon = socialIcons[Math.floor(Math.random() * socialIcons.length)];\r\n randomSocialIcon.classList.add('fly');\r\n setTimeout(() => randomSocialIcon.classList.remove('fly'), 3000);\r\n }\r\n\r\n \/\/ Map bounce animation\r\n const mapContainer = document.querySelector('.map-container');\r\n if (mapContainer && Math.random() > 0.8) {\r\n mapContainer.classList.add('bounce');\r\n setTimeout(() => mapContainer.classList.remove('bounce'), 2500);\r\n }\r\n }\r\n\r\n function handleScroll() {\r\n if (!isScrolling) {\r\n isScrolling = true;\r\n \r\n const scrollY = window.scrollY;\r\n const triggerKey = 'scroll-' + Math.floor(scrollY \/ 300);\r\n \r\n if (!animationTriggers.has(triggerKey)) {\r\n animationTriggers.add(triggerKey);\r\n \r\n \/\/ Trigger particle animation\r\n createParticleAnimation();\r\n \r\n \/\/ Random chance to trigger contact animations\r\n if (Math.random() > 0.6) {\r\n setTimeout(animateRandomContactElements, 300);\r\n }\r\n }\r\n \r\n setTimeout(() => {\r\n isScrolling = false;\r\n }, 150);\r\n }\r\n }\r\n\r\n \/\/ Enhanced Form Submission with Email Integration\r\n function handleFormSubmission(formData) {\r\n const name = formData.get('name');\r\n const email = formData.get('email');\r\n const phone = formData.get('phone');\r\n const subject = formData.get('subject');\r\n const message = formData.get('message');\r\n\r\n \/\/ Create email body\r\n const emailBody = `\r\nYeni \u0130leti\u015fim Formu Mesaj\u0131\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n\r\n\ud83d\udc64 Ad Soyad: ${name}\r\n\ud83d\udce7 E-posta: ${email}\r\n\ud83d\udcde Telefon: ${phone || 'Belirtilmemi\u015f'}\r\n\ud83d\udccb Konu: ${subject}\r\n\r\n\ud83d\udcac Mesaj:\r\n${message}\r\n\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\nBu mesaj sarmedya.com ileti\u015fim formundan g\u00f6nderilmi\u015ftir.\r\nTarih: ${new Date().toLocaleString('tr-TR')}\r\n `.trim();\r\n\r\n \/\/ Create mailto link\r\n const mailtoLink = `mailto:info@sarmedya.com?subject=${encodeURIComponent('\u0130leti\u015fim Formu: ' + subject)}&body=${encodeURIComponent(emailBody)}`;\r\n \r\n \/\/ Open email client\r\n window.location.href = mailtoLink;\r\n \r\n return true;\r\n }\r\n\r\n \/\/ Enhanced Hover Effects\r\n function addEnhancedHoverEffects() {\r\n \/\/ Contact cards enhanced hover\r\n document.querySelectorAll('.contact-card').forEach(card => {\r\n card.addEventListener('mouseenter', function() {\r\n this.style.transform = 'translateY(-15px) scale(1.02)';\r\n \r\n \/\/ Random particle animation on hover\r\n if (Math.random() > 0.7) {\r\n createParticleAnimation();\r\n }\r\n \r\n \/\/ Icon orbit animation\r\n const icon = this.querySelector('.contact-icon');\r\n if (icon && Math.random() > 0.5) {\r\n icon.classList.add('orbit');\r\n setTimeout(() => icon.classList.remove('orbit'), 2500);\r\n }\r\n });\r\n \r\n card.addEventListener('mouseleave', function() {\r\n this.style.transform = 'translateY(0) scale(1)';\r\n });\r\n });\r\n\r\n \/\/ Social icons with flying effect\r\n document.querySelectorAll('.social-icon').forEach(icon => {\r\n icon.addEventListener('mouseenter', function() {\r\n if (Math.random() > 0.6) {\r\n this.classList.add('fly');\r\n setTimeout(() => this.classList.remove('fly'), 3000);\r\n }\r\n });\r\n });\r\n\r\n \/\/ Form inputs with enhanced focus effects\r\n document.querySelectorAll('.form-group input, .form-group textarea').forEach(input => {\r\n input.addEventListener('focus', function() {\r\n const form = document.querySelector('.contact-form');\r\n if (Math.random() > 0.8) {\r\n form.classList.add('pulse');\r\n setTimeout(() => form.classList.remove('pulse'), 2000);\r\n }\r\n \r\n \/\/ Particle effect on focus\r\n if (Math.random() > 0.7) {\r\n createParticleAnimation();\r\n }\r\n });\r\n });\r\n }\r\n\r\n \/\/ Random Autonomous Animations\r\n function startRandomAnimations() {\r\n setInterval(() => {\r\n if (Math.random() > 0.8) {\r\n animateRandomContactElements();\r\n }\r\n \r\n if (Math.random() > 0.85) {\r\n createParticleAnimation();\r\n }\r\n }, 4000);\r\n }\r\n\r\n \/\/ Intersection Observer for scroll-triggered animations\r\n function setupIntersectionObserver() {\r\n const observerOptions = {\r\n threshold: 0.2,\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 const element = entry.target;\r\n \r\n if (element.classList.contains('contact-grid')) {\r\n setTimeout(() => {\r\n const cards = element.querySelectorAll('.contact-card');\r\n cards.forEach((card, index) => {\r\n setTimeout(() => {\r\n card.classList.add('dance');\r\n setTimeout(() => card.classList.remove('dance'), 3000);\r\n }, index * 300);\r\n });\r\n }, 500);\r\n }\r\n \r\n if (element.classList.contains('social-links')) {\r\n setTimeout(() => {\r\n const icons = element.querySelectorAll('.social-icon');\r\n icons.forEach((icon, index) => {\r\n setTimeout(() => {\r\n icon.classList.add('fly');\r\n setTimeout(() => icon.classList.remove('fly'), 3000);\r\n }, index * 400);\r\n });\r\n }, 300);\r\n }\r\n \r\n if (element.classList.contains('map-container')) {\r\n setTimeout(() => {\r\n element.classList.add('bounce');\r\n setTimeout(() => element.classList.remove('bounce'), 2500);\r\n }, 200);\r\n }\r\n }\r\n });\r\n }, observerOptions);\r\n\r\n \/\/ Observe main sections\r\n document.querySelectorAll('.contact-grid, .contact-form, .social-links, .map-container').forEach(section => {\r\n observer.observe(section);\r\n });\r\n }\r\n\r\n \/\/ Form submission handling\r\n document.getElementById('contactForm').addEventListener('submit', function(e) {\r\n e.preventDefault();\r\n \r\n \/\/ Get form data\r\n const formData = new FormData(this);\r\n const name = formData.get('name');\r\n const email = formData.get('email');\r\n const subject = formData.get('subject');\r\n const message = formData.get('message');\r\n \r\n \/\/ Simple validation\r\n if (!name || !email || !subject || !message) {\r\n alert('L\u00fctfen t\u00fcm zorunlu alanlar\u0131 doldurun.');\r\n return;\r\n }\r\n \r\n \/\/ Success animation\r\n const btn = document.querySelector('.submit-btn');\r\n const originalText = btn.textContent;\r\n btn.textContent = 'G\u00d6NDER\u0130L\u0130YOR...';\r\n btn.style.background = 'linear-gradient(45deg, #059669, #10b981)';\r\n \r\n \/\/ Trigger form pulse animation\r\n document.querySelector('.contact-form').classList.add('pulse');\r\n createParticleAnimation();\r\n \r\n setTimeout(() => {\r\n btn.textContent = 'G\u00d6NDER\u0130LD\u0130! \u2713';\r\n \r\n \/\/ Send email\r\n handleFormSubmission(formData);\r\n \r\n setTimeout(() => {\r\n btn.textContent = originalText;\r\n btn.style.background = 'linear-gradient(45deg, #1e3a8a, #1e40af)';\r\n document.querySelector('.contact-form').classList.remove('pulse');\r\n this.reset();\r\n \r\n \/\/ Show success message\r\n alert('Mesaj\u0131n\u0131z ba\u015far\u0131yla g\u00f6nderildi! E-posta uygulaman\u0131z a\u00e7\u0131lacak.');\r\n }, 2000);\r\n }, 1000);\r\n });\r\n\r\n \/\/ Map iframe handling\r\n const iframe = document.querySelector('.map-container iframe');\r\n const mapLink = document.querySelector('.map-link');\r\n \r\n iframe.addEventListener('load', function() {\r\n console.log('Map loaded successfully');\r\n });\r\n \r\n iframe.addEventListener('error', function() {\r\n this.style.display = 'none';\r\n mapLink.style.display = 'block';\r\n });\r\n\r\n \/\/ Fallback for iframe loading issues\r\n setTimeout(() => {\r\n if (iframe.contentDocument === null) {\r\n iframe.style.display = 'none';\r\n mapLink.style.display = 'block';\r\n }\r\n }, 3000);\r\n\r\n \/\/ Initialize all animations and event listeners\r\n document.addEventListener('DOMContentLoaded', function() {\r\n addEnhancedHoverEffects();\r\n setupIntersectionObserver();\r\n startRandomAnimations();\r\n \r\n \/\/ Initial particle animation\r\n setTimeout(createParticleAnimation, 1000);\r\n \r\n \/\/ Initial contact elements animation\r\n setTimeout(animateRandomContactElements, 2000);\r\n });\r\n\r\n \/\/ Scroll event listener\r\n window.addEventListener('scroll', handleScroll, { passive: true });\r\n\r\n \/\/ Window resize handling\r\n window.addEventListener('resize', () => {\r\n \/\/ Reset particle positions on resize\r\n const particles = document.querySelectorAll('.floating-decorative');\r\n particles.forEach(particle => {\r\n particle.style.opacity = '0';\r\n particle.style.transition = 'none';\r\n });\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>\u0130leti\u015fim – Sar Medya \u0130leti\u015fime Ge\u00e7in Sar Medya olarak size en iyi hizmeti sunmak i\u00e7in buraday\u0131z. Projeleriniz ve sorular\u0131n\u0131z i\u00e7in bizimle ileti\u015fime ge\u00e7in. \ud83d\udcde Telefon \u0130leti\u015fim 0 553 883 1565…<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-828","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/sarmedya.com\/en\/wp-json\/wp\/v2\/pages\/828","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sarmedya.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sarmedya.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sarmedya.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sarmedya.com\/en\/wp-json\/wp\/v2\/comments?post=828"}],"version-history":[{"count":75,"href":"https:\/\/sarmedya.com\/en\/wp-json\/wp\/v2\/pages\/828\/revisions"}],"predecessor-version":[{"id":4105,"href":"https:\/\/sarmedya.com\/en\/wp-json\/wp\/v2\/pages\/828\/revisions\/4105"}],"wp:attachment":[{"href":"https:\/\/sarmedya.com\/en\/wp-json\/wp\/v2\/media?parent=828"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}