/* Mobile-First Responsive Enhancements */
/* Vize Tema - Modern Mobile Responsive CSS */

/* =========================== */
/* MOBILE FIRST BASE STYLES    */
/* =========================== */

/* Base mobile styles */
body {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Touch-friendly minimum sizes */
button,
input[type="submit"],
input[type="button"],
.btn,
a.btn {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 12px 24px !important;
    font-size: 16px !important; /* Prevent iOS zoom */
    border-radius: 8px !important;
    touch-action: manipulation;
}

/* Hero buttons specific fix */
.hero__content .thm-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

/* Input fields mobile optimization */
input,
textarea,
select {
    min-height: 50px !important;
    font-size: 16px !important; /* Prevent iOS zoom */
    border-radius: 8px !important;
    padding: 12px 16px !important;
}

/* =========================== */
/* HERO SECTION MOBILE         */
/* =========================== */

/* Mobile Hero Fixes */
@media (max-width: 767px) {
    /* Remove gap between header and hero */
    main#main {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    .site-header {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    .site-header + main {
        margin-top: 0 !important;
    }
    
    .header__wrap {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    .hero.hero__style-one {
        padding: 40px 0 30px !important;
        min-height: 500px !important;
        height: auto !important;
        overflow-x: hidden !important;
        display: flex !important;
        align-items: center !important;
        margin-top: 0 !important;
    }
    
    .hero__content {
        padding: 0 !important;
        text-align: left !important;
    }
    
    .hero__content h1 {
        font-size: 28px !important;
        line-height: 1.3 !important;
        margin-bottom: 15px !important;
        text-align: left !important;
    }
    
    .hero__content h1 span {
        color: inherit !important;
    }
    
    .hero__content p {
        font-size: 15px !important;
        line-height: 1.5 !important;
        margin-bottom: 20px !important;
        text-align: left !important;
    }
    
    /* Hero list mobile layout - single column with white icons */
    .hero__content .xb-list {
        margin: 30px 0 40px !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    .hero__content .xb-list li {
        font-size: 16px !important;
        font-weight: 600 !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        color: #ffffff !important;
    }
    
    .hero__content .xb-list li i {
        font-size: 18px !important;
        color: #ffffff !important;
        flex-shrink: 0 !important;
    }
    
    /* Hero buttons mobile - side by side */
    .hero__content .btns {
        display: flex !important;
        gap: 8px !important;
        margin-top: 25px !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        align-items: center !important;
    }
    
    .hero__content .btns .thm-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        flex: 0 0 auto !important;
        min-width: 130px !important;
        padding: 10px 20px !important;
        font-size: 13px !important;
        text-align: center !important;
        white-space: nowrap !important;
        border-radius: 25px !important;
        height: 40px !important;
        line-height: 1 !important;
        font-weight: 600 !important;
    }
    
    /* Buttons will use theme colors from theme-colors.css */
    /* No static color overrides here - colors come from dynamic settings */
    
    /* Button active state for mobile touch */
    .hero__content .btns .thm-btn:active {
        transform: scale(0.98) !important;
    }
    
    /* Hero background image mobile optimization */
    .hero.bg_img {
        background-size: cover !important;
        background-position: center center !important;
        background-attachment: scroll !important;
    }
    
    /* Hide hero decorative elements on mobile */
    .hero__shape,
    .hero__shape-1,
    .hero__shape-2 {
        display: none !important;
    }
}

/* Small mobile adjustments */
@media (max-width: 380px) {
    .hero__content h1 {
        font-size: 24px !important;
    }
    
    .hero__content .btns {
        flex-direction: row !important;
        gap: 5px !important;
    }
    
    .hero__content .btns .thm-btn {
        min-width: auto !important;
        flex: 1 !important;
        padding: 10px 15px !important;
        font-size: 12px !important;
    }
    
    .hero__content .xb-list {
        grid-template-columns: 1fr !important;
    }
}

/* Extra small screens */
@media (max-width: 320px) {
    .hero__content .btns {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .hero__content .btns .thm-btn {
        width: 100% !important;
        margin-bottom: 0 !important;
    }
}

/* Tablet Hero adjustments */
@media (min-width: 768px) and (max-width: 991px) {
    .hero.hero__style-one {
        padding: 80px 0 60px !important;
    }
    
    .hero__content h1 {
        font-size: 32px !important;
        line-height: 1.3 !important;
    }
    
    .hero__content p {
        font-size: 16px !important;
    }
    
    .hero__content .btns .thm-btn {
        margin-right: 10px !important;
    }
}

/* =========================== */
/* SERVICES SECTION MOBILE     */
/* =========================== */

@media (max-width: 767px) {
    .visa.type {
        padding: 50px 0 !important;
        overflow-x: hidden !important;
    }
    
    .service-wrap {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
    }
    
    .service-img-wrap {
        display: none !important; /* Hide side images on mobile */
    }
    
    .sec-title {
        text-align: center !important;
        margin-bottom: 40px !important;
    }
    
    .sec-title h2 {
        font-size: 24px !important;
        line-height: 1.3 !important;
        margin-bottom: 15px !important;
    }
    
    /* Service cards mobile styling - Keep desktop appearance exactly as is */
    /* No overrides for service section - use desktop styles */
    
    /* Title styling for mobile */
    .xb-item--title {
        font-size: 20px !important;
        font-weight: 900 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        color: #0f172a !important;
        line-height: 1.3 !important;
    }
    
    /* Remove empty column on mobile */
    .visa.type .row .col-lg-4.mt-30:empty {
        display: none !important;
    }
    
    /* Service section specific adjustments */
    .visa.type {
        padding: 60px 0 !important;
        background: #f8f9fa !important;
    }
    
    .visa.type .sec-title {
        text-align: center !important;
        margin-bottom: 50px !important;
        padding-top: 0 !important;
    }
    
    .visa.type .sec-title h2 {
        font-size: 28px !important;
        color: var(--vtc-heading-color, #222) !important;
        margin-bottom: 0 !important;
    }
    
    /* Grid spacing fix */
    .visa.type .row {
        margin-left: -10px !important;
        margin-right: -10px !important;
    }
    
    .visa.type [class*="col-"] {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* Tablet services adjustments */
@media (min-width: 768px) and (max-width: 991px) {
    .visa.type {
        padding: 80px 0 !important;
    }
    
    .service-wrap {
        margin: 0 -50px !important;
        padding: 0 50px !important;
    }
    
    .xb-service {
        margin-bottom: 30px !important;
    }
    
    .xb-item--title {
        font-size: 20px !important;
    }
    
    .xb-item--description {
        font-size: 15px !important;
    }
}

/* =========================== */
/* ABOUT SECTION MOBILE        */
/* =========================== */

@media (max-width: 767px) {
    .about {
        padding: 50px 0 !important;
        overflow-x: hidden !important;
    }
    
    .about .sec-title {
        text-align: center !important;
        margin-bottom: 40px !important;
    }
    
    .about .sec-title h2 {
        font-size: 24px !important;
        line-height: 1.3 !important;
        margin-bottom: 15px !important;
    }
    
    .about .sec-title p {
        font-size: 14px !important;
        line-height: 1.5 !important;
        margin-bottom: 0 !important;
    }
    
    /* About image mobile fix */
    .about__img {
        position: relative !important;
        right: auto !important;
        top: auto !important;
        margin: 40px auto 0 auto !important;
        text-align: center !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .about__img img {
        border-radius: 15px !important;
        max-width: 100% !important;
        height: auto !important;
        width: 100% !important;
    }
    
    /* About list mobile styling */
    .about-list {
        margin: 30px 0 0 0 !important;
        padding: 0 !important;
    }
    
    .about-list .xb-item--inner {
        background: white !important;
        border-radius: 12px !important;
        padding: 20px !important;
        margin-bottom: 15px !important;
        box-shadow: 0 3px 15px rgba(0, 0, 0, 0.06) !important;
        display: flex !important;
        align-items: center !important;
        gap: 15px !important;
        border: 1px solid rgba(0, 0, 0, 0.05) !important;
    }
    
    .about-list .xb-item--number {
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-weight: 700 !important;
        font-size: 16px !important;
        flex-shrink: 0 !important;
        color: white !important;
    }
    
    .about-list .xb-item--holder {
        flex: 1 !important;
    }
    
    .about-list .xb-item--title {
        font-size: 16px !important;
        margin-bottom: 5px !important;
        font-weight: 600 !important;
        color: #333 !important;
    }
    
    .about-list .xb-item--description {
        font-size: 14px !important;
        line-height: 1.5 !important;
        color: #666 !important;
        margin: 0 !important;
    }
}

/* Tablet about adjustments */
@media (min-width: 768px) and (max-width: 991px) {
    .about {
        padding: 80px 0 !important;
    }
    
    .about__img {
        margin-top: 40px !important;
    }
    
    .about-list .xb-item--inner {
        padding: 25px !important;
        margin-bottom: 20px !important;
    }
    
    .about-list .xb-item--title {
        font-size: 18px !important;
    }
    
    .about-list .xb-item--description {
        font-size: 15px !important;
    }
}

/* =========================== */
/* COUNTER SECTION MOBILE      */
/* =========================== */

@media (max-width: 767px) {
    .counter {
        padding: 50px 0 !important;
        margin: 40px 0 !important;
        overflow-x: hidden !important;
    }
    
    .counter .sec-title {
        text-align: center !important;
        margin-bottom: 40px !important;
    }
    
    .counter .sec-title h2 {
        font-size: 24px !important;
        line-height: 1.3 !important;
        margin-bottom: 15px !important;
    }
    
    .counter .sec-title p {
        font-size: 14px !important;
        line-height: 1.5 !important;
        margin-bottom: 0 !important;
    }
    
    /* Counter grid mobile layout */
    .xb-counter {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Reset ul_li styles in counter */
    .xb-counter.ul_li {
        list-style: none !important;
    }
    
    .xb-counter .xb-item--item {
        background: rgba(255, 255, 255, 0.15) !important;
        backdrop-filter: blur(10px) !important;
        border-radius: 15px !important;
        padding: 25px 20px !important;
        text-align: center !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        transition: all 0.3s ease !important;
        display: block !important;
        min-height: 160px !important;
    }
    
    /* Fix ul_li inside counter items */
    .xb-counter .xb-item--item.ul_li {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .xb-counter .xb-item--item:hover {
        transform: translateY(-3px) !important;
        background: rgba(255, 255, 255, 0.25) !important;
        border-color: rgba(255, 255, 255, 0.3) !important;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15) !important;
    }
    
    .xb-counter .xb-item--icon {
        width: 45px !important;
        height: 45px !important;
        margin: 0 auto 15px auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .xb-counter .xb-item--icon img {
        width: 100% !important;
        height: 100% !important;
        filter: brightness(0) invert(1) !important;
        opacity: 0.9 !important;
    }
    
    .xb-counter .xb-item--holder {
        text-align: center !important;
        width: 100% !important;
        color: #ffffff !important;
    }
    
    .xb-counter .xb-item--holder * {
        color: #ffffff !important;
    }
    
    .xb-counter .xb-item--number {
        font-size: 32px !important;
        margin-bottom: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-weight: 700 !important;
        color: white !important;
        line-height: 1 !important;
    }
    
    .xb-counter .xb-item--number .suffix {
        font-size: 18px !important;
        opacity: 0.9 !important;
        margin-left: 2px !important;
    }
    
    .xb-counter .xb-item--title {
        font-size: 13px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        color: #ffffff !important;
        line-height: 1.3 !important;
        margin-top: 5px !important;
    }
    
    /* Single column layout for very small screens */
    @media (max-width: 360px) {
        .xb-counter {
            grid-template-columns: 1fr !important;
            gap: 15px !important;
        }
        
        .xb-item--item {
            padding: 25px 20px !important;
        }
        
        .xb-item--number {
            font-size: 24px !important;
        }
        
        .xb-item--title {
            font-size: 12px !important;
        }
    }
}

/* Tablet counter adjustments */
@media (min-width: 768px) and (max-width: 991px) {
    .counter {
        padding: 80px 0 !important;
        margin: 60px 0 !important;
    }
    
    .xb-counter {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 25px !important;
    }
    
    .xb-item--item {
        padding: 30px 20px !important;
    }
    
    .xb-item--number {
        font-size: 32px !important;
    }
    
    .xb-item--title {
        font-size: 14px !important;
    }
}

/* =========================== */
/* NAVIGATION MOBILE           */
/* =========================== */

@media (max-width: 991px) {
    .xb-header-menu {
        position: fixed !important;
        top: 0 !important;
        left: -100% !important;
        width: 320px !important;
        height: 100vh !important;
        background: white !important;
        z-index: 99999 !important; /* WordPress admin bar z-index: 99999'dan büyük */
        padding: 20px !important;
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
        box-shadow: 5px 0 25px rgba(0, 0, 0, 0.15) !important;
        overflow-y: auto !important;
    }
    
    .xb-header-menu.active {
        left: 0 !important;
    }
    
    /* Mobile menu backdrop */
    .xb-header-menu-backdrop {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        background: rgba(0, 0, 0, 0.6) !important;
        z-index: 99998 !important; /* Admin bar'dan yüksek */
        opacity: 0 !important;
        visibility: hidden !important;
        transition: all 0.3s ease !important;
    }
    
    .xb-header-menu-backdrop.active {
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Admin bar adjustment for mobile menu */
    .admin-bar .xb-header-menu {
        padding-top: 46px !important; /* Admin bar yüksekliği kadar padding */
    }
    
    @media screen and (min-width: 783px) {
        .admin-bar .xb-header-menu {
            padding-top: 32px !important;
        }
    }
    
    /* Prevent body scroll when menu is open */
    body.mobile-menu-active {
        overflow: hidden !important;
    }
    
    /* WordPress menu structure styling */
    .xb-menu-primary {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .xb-menu-primary > li {
        position: relative !important;
        width: 100% !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    }
    
    .xb-menu-primary > li > a {
        display: block !important;
        padding: 15px 20px !important;
        color: #333 !important;
        font-weight: 500 !important;
        transition: all 0.3s ease !important;
        text-decoration: none !important;
        position: relative !important;
        line-height: 1.5 !important;
    }
    
    .xb-menu-primary > li > a:hover,
    .xb-menu-primary > li.current-menu-item > a,
    .xb-menu-primary > li.current_page_item > a {
        background: rgba(var(--vtc-primary-color-rgb, 74, 144, 226), 0.1) !important;
        color: var(--vtc-primary-color, #4A90E2) !important;
        padding-left: 25px !important;
    }
    
    /* Sub-menu styling */
    .xb-menu-primary .sub-menu {
        display: none !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: rgba(0, 0, 0, 0.02) !important;
    }
    
    .xb-menu-primary .sub-menu.active {
        display: block !important;
    }
    
    .xb-menu-primary .sub-menu li {
        border-bottom: 1px solid rgba(0, 0, 0, 0.03) !important;
    }
    
    .xb-menu-primary .sub-menu li a {
        padding: 12px 20px 12px 40px !important;
        font-size: 14px !important;
        color: #666 !important;
    }
    
    .xb-menu-primary .sub-menu li a:hover,
    .xb-menu-primary .sub-menu li.current-menu-item > a {
        color: var(--vtc-primary-color, #4A90E2) !important;
        background: rgba(var(--vtc-primary-color-rgb, 74, 144, 226), 0.05) !important;
    }
    
    /* Menu toggle button for sub-menus */
    .xb-menu-primary li.menu-item-has-children > a {
        padding-right: 50px !important;
    }
    
    /* Remove the arrow from the link itself */
    .xb-menu-primary li.menu-item-has-children > a::after {
        display: none !important;
    }
    
    /* Override main.css xb-menu-toggle styles */
    .xb-header-menu .xb-menu-toggle {
        position: absolute !important;
        right: 0 !important;
        top: 0 !important;
        width: 50px !important;
        height: 46px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        z-index: 2 !important;
        background: transparent !important;
        border: none !important;
        /* Override the main.css ::before content */
        text-align: center !important;
        line-height: 46px !important;
    }
    
    /* Override and remove main.css content */
    .xb-header-menu .xb-menu-toggle::before {
        content: '' !important;
        display: none !important;
    }
    
    /* Add arrow icon using background SVG */
    .xb-header-menu .xb-menu-toggle {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23666666' d='M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 14px 14px !important;
        transition: all 0.3s ease !important;
    }
    
    .xb-header-menu .xb-menu-toggle:hover {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%234A90E2' d='M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z'/%3E%3C/svg%3E") !important;
    }
    
    .xb-header-menu .xb-menu-toggle.active {
        transform: rotate(180deg) !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%234A90E2' d='M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z'/%3E%3C/svg%3E") !important;
    }
    
    /* Remove ::after since we're using background-image */
    .xb-header-menu .xb-menu-toggle::after {
        display: none !important;
    }
    
    /* Close button styling */
    .xb-menu-close {
        position: absolute !important;
        top: 20px !important;
        right: 20px !important;
        width: 40px !important;
        height: 40px !important;
        cursor: pointer !important;
        background: rgba(0, 0, 0, 0.05) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.3s ease !important;
    }
    
    .xb-menu-close:hover {
        background: rgba(var(--vtc-primary-color-rgb, 74, 144, 226), 0.1) !important;
    }
    
    .xb-menu-close::before,
    .xb-menu-close::after {
        content: '' !important;
        position: absolute !important;
        width: 20px !important;
        height: 2px !important;
        background: #333 !important;
        transition: all 0.3s ease !important;
    }
    
    .xb-menu-close::before {
        transform: rotate(45deg) !important;
    }
    
    .xb-menu-close::after {
        transform: rotate(-45deg) !important;
    }
    
    .xb-menu-close:hover::before,
    .xb-menu-close:hover::after {
        background: var(--vtc-primary-color, #4A90E2) !important;
    }
    
    /* Mobile menu toggle */
    .mobile-menu-toggle {
        display: block !important;
        background: none !important;
        border: none !important;
        font-size: 24px !important;
        color: #333 !important;
        cursor: pointer !important;
        padding: 8px !important;
        border-radius: 4px !important;
    }
    
    /* Mobile menu overlay */
    .mobile-menu-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 9998 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: all 0.3s ease !important;
    }
    
    .mobile-menu-overlay.active {
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Mobile logo styling */
    .xb-logo-mobile {
        margin-bottom: 30px !important;
        text-align: center !important;
        padding: 20px 0 0 0 !important;
    }
    
    .xb-logo-mobile img {
        height: 40px !important;
        width: auto !important;
        max-width: 180px !important;
    }
    
    /* Mobile search styling */
    .xb-header-mobile-search {
        margin: 0 20px 25px 20px !important;
        padding: 0 !important;
    }
    
    .xb-header-mobile-search form {
        position: relative !important;
        width: 100% !important;
    }
    
    .xb-header-mobile-search .search-field {
        width: 100% !important;
        padding: 14px 50px 14px 20px !important;
        border: 2px solid transparent !important;
        border-radius: 30px !important;
        font-size: 15px !important;
        font-family: inherit !important;
        background: #f5f5f5 !important;
        transition: all 0.3s ease !important;
        color: #333 !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
    }
    
    .xb-header-mobile-search .search-field::placeholder {
        color: #999 !important;
        opacity: 1 !important;
    }
    
    .xb-header-mobile-search .search-field:focus {
        border-color: var(--vtc-primary-color, #4A90E2) !important;
        background: white !important;
        outline: none !important;
        box-shadow: 0 4px 20px rgba(74, 144, 226, 0.15) !important;
    }
    
    .xb-header-mobile-search .search-submit {
        position: absolute !important;
        right: 6px !important;
        top: 40% !important;
        transform: translateY(-50%) !important;
        /* Tema background rengini kullan */
        border: none !important;
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        color: white !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 16px !important;
        box-shadow: 0 2px 8px rgba(74, 144, 226, 0.3) !important;
    }
    
    .xb-header-mobile-search .search-submit i {
        font-size: 16px !important;
        line-height: 1 !important;
    }
    
    .xb-header-mobile-search .search-submit:hover {
        transform: translateY(-50%) scale(1.08) !important;
        box-shadow: 0 4px 12px rgba(74, 144, 226, 0.4) !important;
    }
    
    .xb-header-mobile-search .search-submit:active {
        transform: translateY(-50%) scale(0.95) !important;
    }
    
    /* Menu scroll area */
    .xb-header-menu-scroll {
        height: 100% !important;
        overflow-y: auto !important;
        padding-bottom: 50px !important;
    }
}

/* =========================== */
/* REMOVED CRITICAL OVERFLOW FIXES */
/* =========================== */
/* These rules were causing width issues */


/* Mobile specific overflow fixes */
@media (max-width: 991px) {
    .about__img {
        position: relative !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        max-width: 100% !important;
        margin: 30px 0 0 0 !important;
    }
    
    .service-img-wrap {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    /* Hide all decorative shapes on mobile */
    [class*="__shape"],
    .shape-1,
    .shape-2,
    .shape-3,
    .shape-4,
    .shape-5 {
        display: none !important;
    }
}

/* =========================== */
/* GENERAL MOBILE UTILITIES    */
/* =========================== */

@media (max-width: 767px) {
    /* Typography */
    h1 { font-size: 26px !important; line-height: 1.3 !important; }
    h2 { font-size: 22px !important; line-height: 1.3 !important; }
    h3 { font-size: 18px !important; line-height: 1.4 !important; }
    h4 { font-size: 16px !important; line-height: 1.4 !important; }
    h5 { font-size: 14px !important; line-height: 1.4 !important; }
    h6 { font-size: 12px !important; line-height: 1.4 !important; }
    
    /* Section spacing */
    section {
        padding: 50px 0 !important;
    }
    
    .pt-120, .pt-110, .pt-100 {
        padding-top: 50px !important;
    }
    
    .pb-120, .pb-110, .pb-100, .pb-90 {
        padding-bottom: 50px !important;
    }
    
    .mb-60, .mb-55, .mb-50, .mb-45 {
        margin-bottom: 25px !important;
    }
    
    .mt-40, .mt-30 {
        margin-top: 20px !important;
    }
    
    /* Container padding */
    .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
        max-width: 100% !important;
    }
    
    /* Cards and content blocks */
    .content-card {
        background: white !important;
        border-radius: 15px !important;
        padding: 25px 20px !important;
        margin-bottom: 20px !important;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06) !important;
        transition: all 0.3s ease !important;
    }
    
    .content-card:hover {
        transform: translateY(-3px) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Fix row overflow */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Fix column padding */
    [class*="col-"] {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    /* Hide decorative elements that cause overflow */
    .hero__shape,
    .hero__shape-1,
    .hero__shape-2,
    .service-shape,
    .about__shape,
    .shape-1,
    .shape-2,
    .shape-3 {
        display: none !important;
    }
}

/* =========================== */
/* UTILITY CLASSES            */
/* =========================== */

/* Mobile hidden/visible */
@media (max-width: 767px) {
    .mobile-hidden { display: none !important; }
    .mobile-visible { display: block !important; }
    .mobile-text-center { text-align: center !important; }
    .mobile-text-left { text-align: left !important; }
    .mobile-full-width { width: 100% !important; }
    .mobile-margin-bottom { margin-bottom: 20px !important; }
}

/* Tablet styles */
@media (min-width: 768px) and (max-width: 991px) {
    .tablet-hidden { display: none !important; }
    .tablet-visible { display: block !important; }
}

/* =========================== */
/* PERFORMANCE OPTIMIZATIONS   */
/* =========================== */

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .btn,
    .thm-btn {
        border: 2px solid currentColor !important;
    }
}

/* Dark mode support preparation */
@media (prefers-color-scheme: dark) {
    /* Future dark mode styles can be added here */
}

/* =========================== */
/* TOUCH GESTURES SUPPORT      */
/* =========================== */

/* Improve touch targets */
@media (hover: none) and (pointer: coarse) {
    /* Touch device styles */
    a, button, input, textarea, select {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    /* Remove hover effects on touch devices */
    .hover-effect:hover {
        transform: none !important;
    }
}

/* =========================== */
/* LOADING STATES              */
/* =========================== */

/* Skeleton loading for mobile */
.mobile-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* =========================== */
/* MOBILE SPECIFIC ANIMATIONS  */
/* =========================== */

@media (max-width: 767px) {
    /* Fade in animations for mobile */
    .mobile-fade-in {
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.6s ease;
    }
    
    .mobile-fade-in.visible {
        opacity: 1;
        transform: translateY(0);
    }
    
    /* Bounce effect for CTAs */
    .mobile-bounce {
        animation: mobileBounce 2s infinite;
    }
    
    @keyframes mobileBounce {
        0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
        40% { transform: translateY(-5px); }
        60% { transform: translateY(-3px); }
    }
}