{"id":2025,"date":"2026-04-13T23:41:59","date_gmt":"2026-04-13T20:41:59","guid":{"rendered":"https:\/\/pandasticstudio.com\/?page_id=2025"},"modified":"2026-04-18T22:44:49","modified_gmt":"2026-04-18T19:44:49","slug":"ux-ui-design","status":"publish","type":"page","link":"https:\/\/pandasticstudio.com\/en\/our-services\/360-marketing\/seo-service\/ux-ui-design\/","title":{"rendered":"UX &amp; UI Design"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"2025\" class=\"elementor elementor-2025\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ffe45b2 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"ffe45b2\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bfc4d47 elementor-widget elementor-widget-html\" data-id=\"bfc4d47\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n<style>\r\n    \/* --- STRICT BRAND COLORS --- *\/\r\n    :root {\r\n        --ps-black: #1E1E1C;    \/* Eerie Black *\/\r\n        --ps-yellow: #F6AE2D;   \/* Hunyadi Yellow *\/\r\n        --ps-red: #E0563B;      \/* Cinnabar *\/\r\n        --ps-platinum: #DADADA; \/* Platinum *\/\r\n        --text-white: #ffffff;\r\n        --main-font: 'FF Neuwelt', 'Inter', sans-serif;\r\n    }\r\n\r\n    \/* --- GLOBAL RESET & UTILS --- *\/\r\n    * { box-sizing: border-box; margin: 0; padding: 0; }\r\n    html, body { width: 100%; height: 100%; overflow: hidden; }\r\n\r\n    \/* --- MAIN CONTAINER --- *\/\r\n    #ps-main-container {\r\n        height: 100vh;\r\n        width: 100%;\r\n        overflow-y: scroll;\r\n        overflow-x: hidden;\r\n        scroll-snap-type: y mandatory;\r\n        scroll-behavior: smooth;\r\n        background: var(--ps-black);\r\n        color: var(--text-white);\r\n        font-family: var(--main-font);\r\n        position: relative;\r\n    }\r\n\r\n    \/* --- SECTION STRUCTURE --- *\/\r\n    .ps-section {\r\n        height: 100vh;\r\n        width: 100%;\r\n        scroll-snap-align: start;\r\n        position: relative;\r\n        overflow: hidden;\r\n        display: flex;\r\n        flex-direction: column;\r\n        justify-content: center;\r\n        border-bottom: 1px solid rgba(255,255,255,0.05);\r\n    }\r\n\r\n    \/* 1. HERO SECTION *\/\r\n    .ps-ux-hero {\r\n        background-image: url('https:\/\/images.unsplash.com\/photo-1581291518633-83b4ebd1d83e?q=80&w=2070&auto=format&fit=crop');\r\n        background-size: cover;\r\n        background-position: center;\r\n    }\r\n    .ps-ux-hero::before {\r\n        content: ''; position: absolute; top:0; left:0; width:100%; height:100%;\r\n        background: rgba(30, 30, 28, 0.9);\r\n        z-index: 1;\r\n    }\r\n    .ps-hero-inner {\r\n        position: relative; z-index: 2;\r\n        padding-left: clamp(40px, 8vw, 80px);\r\n        max-width: 85%;\r\n    }\r\n\r\n    \/* Human Centered Badge *\/\r\n    .ps-ux-badge {\r\n        font-size: 1.2rem; font-weight: 900; border: 2px solid var(--ps-platinum); color: var(--ps-platinum);\r\n        padding: 10px 20px; display: inline-block; margin-bottom: 30px; text-transform: uppercase; letter-spacing: 2px;\r\n    }\r\n\r\n    .ps-hero-inner h1 {\r\n        font-size: clamp(4rem, 9vw, 11rem);\r\n        font-weight: 900;\r\n        text-transform: uppercase;\r\n        line-height: 1.1;\r\n        color: #fff;\r\n        margin: 0;\r\n    }\r\n    .ps-hero-inner p {\r\n        font-size: clamp(1.2rem, 2vw, 1.5rem);\r\n        margin-top: 30px;\r\n        color: var(--ps-platinum);\r\n        max-width: 750px;\r\n        border-left: 5px solid var(--ps-yellow);\r\n        padding-left: 20px;\r\n        font-weight: 500;\r\n        line-height: 1.5;\r\n    }\r\n\r\n    \/* 2. PROCESS GRID *\/\r\n    .ps-process-grid {\r\n        display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); height: 100%;\r\n    }\r\n    .ps-process-item {\r\n        border-right: 1px solid rgba(255,255,255,0.1);\r\n        border-bottom: 1px solid rgba(255,255,255,0.1);\r\n        padding: 40px; display: flex; flex-direction: column; justify-content: center;\r\n        background: var(--ps-black); transition: background 0.3s; position: relative;\r\n    }\r\n    .ps-process-item:hover { background: #252523; }\r\n\r\n    .ps-step-icon { font-size: 2.5rem; margin-bottom: 15px; color: var(--ps-red); }\r\n    .ps-step-title {\r\n        font-size: 2rem; font-weight: 900; text-transform: uppercase; margin-bottom: 15px; color: #fff; line-height: 1.1;\r\n    }\r\n    .ps-step-desc { font-size: 1.1rem; color: var(--ps-platinum); line-height: 1.5; }\r\n    \r\n    \/* Number Background *\/\r\n    .ps-step-bg-num {\r\n        position: absolute; right: 20px; bottom: 20px; font-size: 5rem; font-weight: 900;\r\n        color: rgba(255,255,255,0.03); line-height: 1; pointer-events: none;\r\n    }\r\n\r\n    \/* 3. UX vs UI (Split) *\/\r\n    .ps-compare-sec {\r\n        display: flex; flex-direction: row; height: 100%;\r\n    }\r\n    .ps-compare-left {\r\n        flex: 1; background: var(--ps-platinum); color: var(--ps-black);\r\n        padding: 60px; display: flex; flex-direction: column; justify-content: center;\r\n        border-right: 1px solid rgba(0,0,0,0.1);\r\n    }\r\n    .ps-compare-right {\r\n        flex: 1; background: var(--ps-black); color: #fff;\r\n        padding: 60px; display: flex; flex-direction: column; justify-content: center;\r\n    }\r\n\r\n    .ps-compare-head {\r\n        font-size: clamp(3rem, 5vw, 5rem); font-weight: 900; text-transform: uppercase;\r\n        line-height: 1.1; margin-bottom: 30px; color: var(--ps-black);\r\n    }\r\n    .ps-compare-text { font-size: 1.2rem; line-height: 1.6; font-weight: 500; margin-bottom: 20px; }\r\n    .ps-highlight { font-weight: 900; color: var(--ps-red); }\r\n\r\n    \/* 4. CTA *\/\r\n    .ps-cta-sec {\r\n        background-color: var(--ps-yellow);\r\n        color: var(--ps-black);\r\n        padding: 0 clamp(40px, 8vw, 80px);\r\n    }\r\n    .ps-cta-title {\r\n        font-size: clamp(3rem, 7vw, 6rem); font-weight: 900; text-transform: uppercase;\r\n        line-height: 1.1; margin-bottom: 40px; color: var(--ps-black);\r\n    }\r\n    \r\n    .ps-cta-btn-wrapper {\r\n        display: inline-flex; align-items: center; cursor: pointer; gap: 20px;\r\n        color: var(--ps-black);\r\n    }\r\n    .ps-cta-text {\r\n        font-size: 2rem; font-weight: 700; text-transform: uppercase;\r\n        border-bottom: 3px solid var(--ps-black); line-height: 1.2;\r\n    }\r\n    .ps-cta-arrow {\r\n        font-size: 2.5rem; transform: rotate(-45deg); transition: transform 0.3s;\r\n    }\r\n    .ps-cta-btn-wrapper:hover .ps-cta-arrow {\r\n        transform: rotate(0deg) scale(1.2);\r\n    }\r\n\r\n    \/* RESPONSIVE *\/\r\n\r\n    \/* 1. LARGE SCREENS (> 1600px) *\/\r\n    @media (min-width: 1600px) {\r\n        .ps-process-item { padding: 80px; }\r\n        .ps-step-title { font-size: 2.5rem; }\r\n        .ps-compare-head { font-size: 6rem; }\r\n    }\r\n\r\n    \/* 2. LAPTOP \/ SMALL DESKTOP (1025px - 1440px) *\/\r\n    @media (min-width: 1025px) and (max-width: 1440px) {\r\n        .ps-process-item { padding: 30px; }\r\n        .ps-step-title { font-size: 1.8rem; }\r\n        .ps-compare-left, .ps-compare-right { padding: 40px; }\r\n        .ps-compare-head { font-size: 3rem; }\r\n    }\r\n\r\n    \/* 3. TABLET LANDSCAPE (Horizontal) (900px - 1024px) *\/\r\n    @media (min-width: 900px) and (max-width: 1024px) and (orientation: landscape) {\r\n        .ps-process-item { padding: 25px; }\r\n        .ps-step-title { font-size: 1.6rem; }\r\n        .ps-step-desc { font-size: 0.95rem; }\r\n        \r\n        .ps-compare-left, .ps-compare-right { padding: 30px; }\r\n        .ps-compare-head { font-size: 2.5rem; }\r\n    }\r\n\r\n    \/* 4. TABLET PORTRAIT (Vertical) (600px - 1024px) *\/\r\n    @media (max-width: 1024px) and (orientation: portrait) {\r\n        #ps-main-container { scroll-snap-type: none; }\r\n        .ps-section { \r\n            height: auto; min-height: 100vh; overflow-y: auto; \r\n            justify-content: flex-start; padding-top: 60px; padding-bottom: 60px; \r\n        }\r\n\r\n        .ps-ux-hero { justify-content: center; }\r\n\r\n        .ps-process-grid { grid-template-columns: 1fr; grid-template-rows: auto; height: auto; }\r\n        .ps-process-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); padding: 40px; min-height: 250px; }\r\n\r\n        .ps-compare-sec {\r\n            flex-direction: row; \r\n            height: auto; \r\n            align-items: stretch;\r\n        }\r\n        .ps-compare-left, .ps-compare-right { \r\n            flex: 1;\r\n            justify-content: flex-start; \r\n            padding: 100px 30px 40px 30px;\r\n        }\r\n        .ps-compare-left { border-right: 1px solid rgba(0,0,0,0.1); border-bottom: none; }\r\n\r\n        \/* CTA *\/\r\n        .ps-cta-sec { \r\n            height: auto; min-height: 50vh; \r\n            justify-content: center; align-items: center; text-align: center; \r\n            padding: 40px; \r\n        }\r\n    }\r\n\r\n    \/* 5. MOBILE LANDSCAPE (Yatay Mobil) *\/\r\n    @media (max-width: 900px) and (orientation: landscape) {\r\n        #ps-main-container { scroll-snap-type: none; }\r\n        .ps-section { height: auto; min-height: 100vh; overflow-y: auto; display: block; padding: 40px 20px; }\r\n\r\n        .ps-ux-hero { display: flex; flex-direction: column; justify-content: center; padding: 0; }\r\n        \r\n        .ps-process-grid { display: grid; grid-template-columns: 1fr 1fr; height: auto; }\r\n        .ps-process-item { min-height: 250px; border-right: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); }\r\n        \r\n        .ps-compare-sec { \r\n            display: flex; \r\n            flex-direction: row; \r\n            height: auto; \r\n            min-height: 100vh; \r\n            align-items: stretch; \r\n        }\r\n        .ps-compare-left, .ps-compare-right { \r\n            flex: 1; \r\n            justify-content: flex-start; \r\n            padding: 100px 20px 40px 20px;\r\n        }\r\n        .ps-compare-left { border-right: 1px solid rgba(0,0,0,0.1); }\r\n\r\n        \/* CTA *\/\r\n        .ps-cta-sec { \r\n            display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; height: 100vh;\r\n        }\r\n    }\r\n\r\n    \/* 6. MOBILE PORTRAIT (Dikey Mobil - En K\u00fc\u00e7\u00fck Ekranlar) *\/\r\n    @media (max-width: 600px) {\r\n        #ps-main-container { scroll-snap-type: none; }\r\n        .ps-section { height: auto; padding-top: 100px; padding-bottom: 60px; justify-content: flex-start; display: flex; }\r\n\r\n        .ps-ux-hero { height: 100vh; padding-top: 0; justify-content: center; }\r\n        .ps-hero-inner { padding-left: 30px; padding-right: 30px; max-width: 100%; }\r\n        .ps-hero-inner h1 { font-size: 2.5rem; line-height: 1.1; }\r\n        .ps-hero-inner p { font-size: 1rem; margin-top: 20px; }\r\n        .ps-ux-badge { font-size: 0.9rem; padding: 8px 15px; }\r\n\r\n        .ps-process-grid { display: flex; flex-direction: column; height: auto; }\r\n        .ps-process-item { min-height: auto; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); padding: 40px 30px; }\r\n        .ps-step-title { font-size: 2rem; }\r\n\r\n        .ps-compare-sec { flex-direction: column; height: auto; }\r\n        .ps-compare-left { \r\n            padding: 40px 30px; \r\n            justify-content: center;\r\n            min-height: auto; \r\n            border-right: none; border-bottom: 1px solid rgba(0,0,0,0.1); \r\n        }\r\n        .ps-compare-right { \r\n            padding: 40px 30px; \r\n            justify-content: center; \r\n            min-height: auto; \r\n        }\r\n        .ps-compare-head { font-size: 2.5rem; }\r\n\r\n        .ps-cta-sec { text-align: center; padding: 80px 30px; justify-content: center; align-items: center; }\r\n        .ps-cta-title { font-size: 2.5rem; text-align: center; }\r\n        .ps-cta-btn-wrapper { justify-content: center; }\r\n        .ps-cta-text { font-size: 1.5rem; }\r\n    }\r\n\r\n<\/style>\r\n\r\n<div id=\"ps-main-container\">\r\n\r\n    \r\n    <section class=\"ps-section ps-ux-hero\">\r\n        <div class=\"ps-hero-inner\">\r\n            <div class=\"ps-ux-badge\">HUMAN-CENTRED DESIGN<\/div>\r\n            <h1>Design<br>& Experience<\/h1>\r\n            <p>Designs that aren\u2019t just \u2018pretty\u2019 but actually \u2018work\u2019. We build intuitive, conversion-focused interfaces that don\u2019t overwhelm your users.<\/p>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    \r\n    <section class=\"ps-section\">\r\n        <div class=\"ps-process-grid\">\r\n            \r\n            <div class=\"ps-process-item\">\r\n                <div class=\"ps-step-bg-num\">01<\/div>\r\n                <div class=\"ps-step-icon\">\ud83d\udd0d<\/div>\r\n                <h2 class=\"ps-step-title\">Research<br>& Analysis<\/h2>\r\n                <p class=\"ps-step-desc\">Who is the user? What do they want? What are the competitors doing? We are mapping out personas and user journeys.<\/p>\r\n            <\/div>\r\n\r\n            <div class=\"ps-process-item\">\r\n                <div class=\"ps-step-bg-num\">02<\/div>\r\n                <div class=\"ps-step-icon\">\u270f\ufe0f<\/div>\r\n                <h2 class=\"ps-step-title\">W\u0131reframe<br>& Prototype<\/h2>\r\n                <p class=\"ps-step-desc\">We\u2019re building the wireframe. Without colours or visuals, we\u2019re testing the page structure and flow (low-fidelity).<\/p>\r\n            <\/div>\r\n\r\n            <div class=\"ps-process-item\">\r\n                <div class=\"ps-step-bg-num\">03<\/div>\r\n                <div class=\"ps-step-icon\">\ud83c\udfa8<\/div>\r\n                <h2 class=\"ps-step-title\">UI (User interface)<br>Design<\/h2>\r\n                <p class=\"ps-step-desc\">We bring the brand identity to life. An aesthetic and modern look through typography, colour palette and iconography (High-Fidelity).<\/p>\r\n            <\/div>\r\n\r\n            <div class=\"ps-process-item\">\r\n                <div class=\"ps-step-bg-num\">04<\/div>\r\n                <div class=\"ps-step-icon\">\ud83e\uddea<\/div>\r\n                <h2 class=\"ps-step-title\">Test<br>& Optimised<\/h2>\r\n                <p class=\"ps-step-desc\">We measure and improve the usability of the design through user testing and feedback.<\/p>\r\n            <\/div>\r\n\r\n        <\/div>\r\n    <\/section>\r\n\r\n    \r\n    <section class=\"ps-section ps-compare-sec\">\r\n        <div class=\"ps-compare-left\">\r\n            <h2 class=\"ps-compare-head\">What is UX?<\/h2>\r\n            <p class=\"ps-compare-text\">UX (User Experience) is <span class=\"ps-highlight\">TO FEEL.<\/span><\/p>\r\n            <p class=\"ps-compare-text\">The quality of a building lies in the doors being in the right place and the lift running smoothly. It is all about how easily the user can achieve their objective.<\/p>\r\n        <\/div>\r\n        <div class=\"ps-compare-right\">\r\n            <h2 class=\"ps-compare-head\" style=\"color:#fff;\">What is UI?<\/h2>\r\n            <p class=\"ps-compare-text\">UI (User Interface) is <span class=\"ps-highlight\" style=\"color:var(--ps-yellow);\">TO SEE.<\/span><\/p>\r\n            <p class=\"ps-compare-text\">The building\u2019s exterior, interior d\u00e9cor and the colour of the walls. It is the aesthetic layer that the user sees and interacts with.<\/p>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    \r\n    <section class=\"ps-section ps-cta-sec\">\r\n        <h2 class=\"ps-cta-title\">Let's design<br>the experience.<\/h2>\r\n        <div class=\"ps-cta-btn-wrapper\" onclick=\"window.location.href='https:\/\/pandasticstudio.com\/en\/contact\/'\">\r\n            <span class=\"ps-cta-text\">Contact Us<\/span>\r\n            <span class=\"ps-cta-arrow\">&#10142;<\/span>\r\n        <\/div>\r\n    <\/section>\r\n\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6d908f1 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"6d908f1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3b1decc elementor-widget elementor-widget-wpr-elementor-template\" data-id=\"3b1decc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"wpr-elementor-template.default\">\n\t\t\t\t\t<style>.elementor-1928 .elementor-element.elementor-element-7c6490ba{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1928 .elementor-element.elementor-element-210f5e1d{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}<\/style>\t\t<div data-elementor-type=\"container\" data-elementor-id=\"1928\" class=\"elementor elementor-1928\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7c6490ba e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"7c6490ba\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-210f5e1d elementor-widget elementor-widget-html\" data-id=\"210f5e1d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n<style>\r\n    \/* --- FOOTER STYLES --- *\/\r\n    .ps-footer-section {\r\n        height: 100vh; \r\n        width: 100%;\r\n        scroll-snap-align: start;\r\n        background-color: var(--bg-dark);\r\n        color: var(--bg-light);\r\n        font-family: var(--main-font);\r\n        display: flex;\r\n        flex-direction: column;\r\n        justify-content: space-between;\r\n        position: relative;\r\n        border-top: 1px solid rgba(255,255,255,0.1);\r\n        overflow: hidden; \r\n        flex-shrink: 0;\r\n    }\r\n\r\n    \/* Mobil Scroll *\/\r\n    @media (max-height: 800px) {\r\n        .ps-footer-section {\r\n            height: auto;\r\n            min-height: 100vh;\r\n            padding-bottom: 50px;\r\n        }\r\n    }\r\n\r\n    \/* 1. KAYAN YAZI & RENK AN\u0130MASYONU *\/\r\n    .ps-footer-marquee {\r\n        width: 100%;\r\n        padding: 30px 0;\r\n        border-bottom: 1px solid rgba(255,255,255,0.1);\r\n        overflow: hidden;\r\n        white-space: nowrap;\r\n        background: var(--bg-dark);\r\n        flex-shrink: 0;\r\n    }\r\n\r\n    .ps-marquee-content {\r\n        display: inline-block;\r\n        font-family: var(--main-font);\r\n        font-weight: 900;\r\n        font-size: clamp(3rem, 5vw, 6rem);\r\n        text-transform: uppercase;\r\n        animation: \r\n            scrollText 20s linear infinite,\r\n            colorCycle 1.5s infinite; \r\n    }\r\n\r\n    \/* Sa\u011fa Sola Kayma Efekti *\/\r\n    @keyframes scrollText {\r\n        from { transform: translateX(0); }\r\n        to { transform: translateX(-50%); }\r\n    }\r\n\r\n    \/* 3 A\u015famal\u0131 HIZLI Renk De\u011fi\u015fimi *\/\r\n    @keyframes colorCycle {\r\n        0%, 30% { \r\n            color: var(--primary-cinnabar); \r\n            -webkit-text-stroke: 0 var(--primary-cinnabar); \r\n        }\r\n        33%, 63% { \r\n            color: var(--accent-yellow); \r\n            -webkit-text-stroke: 0 var(--accent-yellow); \r\n        }\r\n        66%, 100% { \r\n            color: var(--bg-light); \r\n            -webkit-text-stroke: 0 var(--bg-light); \r\n        }\r\n    }\r\n\r\n    \/* 2. FOOTER \u0130\u00c7ER\u0130K GRID *\/\r\n    .ps-footer-grid {\r\n        display: grid;\r\n        grid-template-columns: 1.5fr 1fr 1fr 1fr;\r\n        gap: 40px;\r\n        padding: 40px clamp(40px, 8vw, 80px);\r\n        flex-grow: 1;\r\n        align-items: start;\r\n    }\r\n\r\n    .ps-footer-col h4 a{font-size: 1.2rem;color: var(--accent-yellow);margin-bottom: 20px;text-transform: uppercase;font-weight: 900;}\r\n    .ps-footer-col h4 a:hover {color:var(--primary-cinnabar)}\r\n\r\n    .ps-footer-col ul { list-style: none; padding: 0; margin: 0; }\r\n    .ps-footer-col ul li { margin-bottom: 10px; }\r\n\r\n    .ps-footer-col ul li a {\r\n        color: var(--bg-light); text-decoration: none; font-size: 1rem;\r\n        font-weight: 400; transition: color 0.3s, padding-left 0.3s; display: inline-block;\r\n    }\r\n\r\n    .ps-footer-col ul li a:hover { color: var(--primary-cinnabar); padding-left: 5px; }\r\n\r\n    .ps-address p { font-size: 1rem; line-height: 1.6; color: #888; margin-bottom: 20px; }\r\n    \r\n    \/* Adres Link Stilleri *\/\r\n    .ps-address a.ps-map-link, .ps-address a.ps-tel-link {\r\n        color: var(--bg-light); \r\n        text-decoration: none; \r\n        border-bottom: 1px solid transparent;\r\n        transition: all 0.3s;\r\n        display: inline-block;\r\n    }\r\n    .ps-address a.ps-map-link:hover, .ps-address a.ps-tel-link:hover {\r\n        color: var(--accent-yellow);\r\n    }\r\n\r\n    .ps-footer-brand h3 {\r\n        font-size: clamp(2rem, 3vw, 3rem); font-weight: 900; line-height: 1.1;\r\n        color: var(--text-color); margin-bottom: 20px;\r\n    }\r\n    .ps-footer-brand p { color: #888; max-width: 300px; margin-bottom: 20px; }\r\n\r\n    \/* Sosyal Medya \u0130konlar\u0131 *\/\r\n    .ps-brand-socials {\r\n        display: flex; gap: 15px; margin-top: 25px;\r\n    }\r\n    .ps-brand-socials a {\r\n        color: var(--bg-light);\r\n        transition: transform 0.3s, color 0.3s;\r\n        display: flex; align-items: center; justify-content: center;\r\n    }\r\n    .ps-brand-socials a:hover {\r\n        color: var(--primary-cinnabar);\r\n        transform: translateY(-3px);\r\n    }\r\n    .ps-brand-socials svg {\r\n        width: 24px; height: 24px; fill: currentColor;\r\n    }\r\n\r\n    \/* 3. COPYRIGHT BAR *\/\r\n    .ps-footer-bottom {\r\n        padding: 20px clamp(40px, 8vw, 80px);\r\n        border-top: 1px solid rgba(255,255,255,0.1);\r\n        display: flex; justify-content: space-between; align-items: center;\r\n        font-size: 0.9rem; color: #666;\r\n        flex-shrink: 0;\r\n        background: var(--bg-dark);\r\n    }\r\n\r\n    \/* RESPONSIVE *\/\r\n    @media (max-width: 1024px) {\r\n        .ps-footer-grid { grid-template-columns: 1fr 1fr; padding: 30px; }\r\n        .ps-footer-section { height: auto; min-height: 100vh; } \r\n    }\r\n    @media (max-width: 768px) {\r\n        .ps-footer-grid { grid-template-columns: 1fr; gap: 30px; }\r\n        .ps-footer-bottom { flex-direction: column; gap: 15px; text-align: center; }\r\n        .ps-marquee-content { font-size: 3rem; }\r\n        .ps-brand-socials { justify-content: flex-start; }\r\n    }\r\n<\/style>\r\n\r\n<section class=\"ps-footer-section\" id=\"ps-footer\">\r\n    \r\n    \r\n    <div class=\"ps-footer-marquee\">\r\n        <div class=\"ps-marquee-content\">\r\n            GET READY FOR A PANDASTIC WORLD \u2014 LET'S CREATE TOGETHER \u2014 PANDASTIC STUDIO \u2014 \r\n            GET READY FOR A PANDASTIC WORLD \u2014 LET'S CREATE TOGETHER \u2014 PANDASTIC STUDIO \u2014\r\n        <\/div>\r\n    <\/div>\r\n\r\n    \r\n    <div class=\"ps-footer-grid\">\r\n        \r\n        <div class=\"ps-footer-col ps-footer-brand\">\r\n            <h3>LET\u2019S PUSH THE BOUNDARIES OF THE DIGITAL WORLD TOGETHER.<\/h3>\r\n            <p>We\u2019re rewriting your brand\u2019s story through technology and creativity.<\/p>\r\n            \r\n            <a href=\"https:\/\/pandasticstudio.com\/en\/iletisim\/\" style=\"display: inline-block; background: var(--primary-cinnabar); color: #fff; padding: 15px 30px; text-decoration: none; font-weight: bold; text-transform: uppercase;\">\r\n                Contact Us \u2794\r\n            <\/a>\r\n\r\n            \r\n            <div class=\"ps-brand-socials\">\r\n                \r\n                <a href=\"https:\/\/www.linkedin.com\/company\/pandasticstudio\/posts\/?feedView=all\" target=\"_blank\" aria-label=\"LinkedIn\" rel=\"noopener\">\r\n                    <svg viewbox=\"0 0 24 24\"><path d=\"M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z\"\/><\/svg>\r\n                <\/a>\r\n                \r\n                <a href=\"https:\/\/www.instagram.com\/pandasticstudio\/\" target=\"_blank\" aria-label=\"Instagram\" rel=\"noopener\">\r\n                    <svg viewbox=\"0 0 24 24\"><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\"\/><\/svg>\r\n                <\/a>\r\n                \r\n                <a href=\"https:\/\/www.tiktok.com\/@pandasticsocial\" target=\"_blank\" aria-label=\"TikTok\" rel=\"noopener\">\r\n                    <svg viewbox=\"0 0 24 24\"><path d=\"M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z\"\/><\/svg>\r\n                <\/a>\r\n                \r\n                <a href=\"https:\/\/www.facebook.com\/pandasticstudio\" target=\"_blank\" aria-label=\"Facebook\" rel=\"noopener\">\r\n                    <svg viewbox=\"0 0 24 24\"><path d=\"M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z\"\/><\/svg>\r\n                <\/a>\r\n                \r\n                <a href=\"https:\/\/x.com\/pandasticstudio\" target=\"_blank\" aria-label=\"X\">\r\n                    <svg viewbox=\"0 0 24 24\"><path d=\"M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z\"\/><\/svg>\r\n                <\/a>\r\n                \r\n                <a href=\"https:\/\/www.youtube.com\/@pandasticstudio\" target=\"_blank\" aria-label=\"Youtube\" rel=\"noopener\">\r\n                    <svg viewbox=\"0 0 24 24\"><path d=\"M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z\"\/><\/svg>\r\n                <\/a>\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n        <div class=\"ps-footer-col\">\r\n            <h4><a href=\"https:\/\/pandasticstudio.com\/en\/our-services\/\">Services<\/a><\/h4>\r\n            <ul>\r\n                <li><a href=\"https:\/\/pandasticstudio.com\/en\/our-services\/360-marketing\/digital-marketing\/\">Digital Marketing<\/a><\/li>\r\n                <li><a href=\"https:\/\/pandasticstudio.com\/en\/our-services\/360-marketing\/social-media-management\/\">Social Media Management<\/a><\/li>\r\n                <li><a href=\"https:\/\/pandasticstudio.com\/en\/our-services\/360-marketing\/seo-service\/\">SEO Service<\/a><\/li>\r\n                <li><a href=\"https:\/\/pandasticstudio.com\/en\/our-services\/production\/\">Production<\/a><\/li>\r\n                <li><a href=\"https:\/\/pandasticstudio.com\/en\/our-services\/web-design\/\">Web Design<\/a><\/li>\r\n                <li><a href=\"https:\/\/pandasticstudio.com\/en\/our-services\/e-commerce-management\/\">E-commerce Management<\/a><\/li>\r\n            <\/ul>\r\n        <\/div>\r\n\r\n        <div class=\"ps-footer-col\">\r\n            <h4><a href=\"https:\/\/pandasticstudio.com\/en\/corporate\/\">Corporate<\/a><\/h4>\r\n            <ul>\r\n                <li><a href=\"https:\/\/pandasticstudio.com\/en\/corporate\/about-us\/\">About Us<\/a><\/li>\r\n                <li><a href=\"https:\/\/pandasticstudio.com\/en\/references\/\">References<\/a><\/li>\r\n                <li><a href=\"https:\/\/pandasticstudio.com\/en\/pblog-en\/\">PBlog<\/a><\/li>\r\n                <li><a href=\"https:\/\/pandasticstudio.com\/en\/partners\/\">Partners<\/a><\/li>\r\n                <li><a href=\"https:\/\/pandasticstudio.com\/en\/contact\/\">Contact<\/a><\/li>\r\n            <\/ul>\r\n        <\/div>\r\n\r\n        <div class=\"ps-footer-col ps-address\">\r\n            <h4><a href=\"https:\/\/pandasticstudio.com\/en\/contact\/\">Offices<\/a><\/h4>\r\n            <p>\r\n                <strong style=\"color:#fff;\">\u0130STANBUL (Centre)<\/strong><br>\r\n                <a href=\"https:\/\/maps.app.goo.gl\/Sg3UyuVuft7GF5Gv5\" target=\"_blank\" class=\"ps-map-link\" rel=\"noopener\">\r\n                    Balmumcu, Morbasan Sk. Koza \u0130\u015f Merkezi No:12 B Blok Kat:5 D:11-13, 34349 Be\u015fikta\u015f \/ \u0130stanbul\r\n                <\/a><br>\r\n                <br>\r\n                <a href=\"tel:+905326992632\" class=\"ps-tel-link\">+90 532 699 26 32<\/a><br>\r\n                <a href=\"mailto:info@pandasticstudio.com\" class=\"ps-tel-link\">info@pandasticstudio.com<\/a>\r\n            <\/p>\r\n            <p>\r\n                <strong style=\"color:#fff;\">VIENNA<\/strong><br>\r\n                <a href=\"https:\/\/www.google.com\/maps\/search\/?api=1&amp;query=Linke+Wienzeile+64+1060+Wien+\u00d6sterreich\" target=\"_blank\" class=\"ps-map-link\" rel=\"noopener\">\r\n                    European Office GL3 Linke Wienzeile 64 1060 Wien, \u00d6sterreich\r\n                <\/a>\r\n            <\/p>\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n    \r\n    <div class=\"ps-footer-bottom\">\r\n        <div class=\"ps-copy\">\r\n            &copy; 2026 Pandastic Studio Media Ltd. All rights reserved. \r\n        <\/div>\r\n        \r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<script>\r\n    document.addEventListener('DOMContentLoaded', () => {\r\n        const footer = document.getElementById('ps-footer');\r\n        \r\n        const mainContainer = document.getElementById('ps-main-container');\r\n\r\n        if (footer && mainContainer) {\r\n            mainContainer.appendChild(footer);\r\n            \r\n            console.log(\"Pandastic Footer: Snap-Scroll ak\u0131\u015f\u0131na entegre edildi.\");\r\n        } else {\r\n            console.log(\"Pandastic Footer: Standart yerle\u015fimde.\");\r\n        }\r\n    });\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<span class=\"wpr-template-edit-btn\" data-permalink=\"https:\/\/pandasticstudio.com\/en\/?elementor_library=eng-footer-menu\">Edit Template<\/span>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>HUMAN-CENTRED DESIGN Design&#038; Experience Designs that aren\u2019t just \u2018pretty\u2019 but actually \u2018work\u2019. We build intuitive, conversion-focused interfaces that don\u2019t overwhelm your users. 01 \ud83d\udd0d Research&#038; Analysis Who is the user? What do they want? What are the competitors doing? We are mapping out personas and user journeys. 02 \u270f\ufe0f W\u0131reframe&#038; Prototype We\u2019re building the wireframe. Without colours or visuals, we\u2019re testing the page structure and flow (low-fidelity). 03 \ud83c\udfa8 UI (User interface)Design We bring the brand identity to life. An aesthetic and modern look through typography, colour palette and iconography (High-Fidelity). 04 \ud83e\uddea Test&#038; Optimised We measure and improve the usability of the design through user testing and feedback. What is UX? UX (User Experience) is TO FEEL. The quality of a building lies in the doors being in the right place and the lift running smoothly. It is all about how easily the user can achieve their objective. What is UI? UI (User Interface) is TO SEE. The building\u2019s exterior, interior d\u00e9cor and the colour of the walls. It is the aesthetic layer that the user sees and interacts with. Let&#8217;s designthe experience. Contact Us &#10142; GET READY FOR A PANDASTIC WORLD \u2014 LET&#8217;S CREATE TOGETHER \u2014 PANDASTIC STUDIO \u2014 GET READY FOR A PANDASTIC WORLD \u2014 LET&#8217;S CREATE TOGETHER \u2014 PANDASTIC STUDIO \u2014 LET\u2019S PUSH THE BOUNDARIES OF THE DIGITAL WORLD TOGETHER. We\u2019re rewriting your brand\u2019s story through technology and creativity. Contact Us \u2794 Services Digital Marketing Social Media Management SEO Service Production Web Design E-commerce Management Corporate About Us References PBlog Partners Contact Offices \u0130STANBUL (Centre) Balmumcu, Morbasan Sk. Koza \u0130\u015f Merkezi No:12 B Blok Kat:5 D:11-13, 34349 Be\u015fikta\u015f \/ \u0130stanbul +90 532 699 26 32 info@pandasticstudio.com VIENNA European Office GL3 Linke Wienzeile 64 1060 Wien, \u00d6sterreich &copy; 2026 Pandastic Studio Media Ltd. All rights reserved. Edit Template<\/p>","protected":false},"author":1,"featured_media":0,"parent":2010,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"googlesitekit_rrm_CAowqNq2DA:productID":"","footnotes":""},"class_list":["post-2025","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/pandasticstudio.com\/en\/wp-json\/wp\/v2\/pages\/2025","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pandasticstudio.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pandasticstudio.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pandasticstudio.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pandasticstudio.com\/en\/wp-json\/wp\/v2\/comments?post=2025"}],"version-history":[{"count":7,"href":"https:\/\/pandasticstudio.com\/en\/wp-json\/wp\/v2\/pages\/2025\/revisions"}],"predecessor-version":[{"id":2359,"href":"https:\/\/pandasticstudio.com\/en\/wp-json\/wp\/v2\/pages\/2025\/revisions\/2359"}],"up":[{"embeddable":true,"href":"https:\/\/pandasticstudio.com\/en\/wp-json\/wp\/v2\/pages\/2010"}],"wp:attachment":[{"href":"https:\/\/pandasticstudio.com\/en\/wp-json\/wp\/v2\/media?parent=2025"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<!-- This website is optimized by Airlift. Learn more: https://airlift.net. Template:. Learn more: https://airlift.net. Template: 69e38c8ed36f73be38ae3b56. Config Timestamp: 2026-04-18 13:52:13 UTC, Cached Timestamp: 2026-04-19 17:31:43 UTC -->