/* ============================================
   COMPREHENSIVE MOBILE RESPONSIVE ENHANCEMENTS
   101 Digital - Mobile-First Optimization
   ============================================ */

/* ===== Root Variables for Mobile ===== */
@media (max-width: 768px) {
    :root {
        --header-height: 64px;
    }
}

/* ===== Global Mobile Base Styles ===== */
* {
    -webkit-tap-highlight-color: transparent !important;
    tap-highlight-color: transparent !important;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Ancak metin alanları için user-select'i etkinleştir */
input,
textarea,
[contenteditable="true"],
[contenteditable="true"] * {
    -webkit-user-select: text !important;
    user-select: text !important;
}

/* Tıklanabilir elementler için outline'ı kaldır */
button,
a,
input,
textarea,
select,
[role="button"],
button:focus,
a:focus,
input:focus,
textarea:focus,
select:focus,
[role="button"]:focus,
button:active,
a:active,
input:active,
textarea:active,
select:active,
[role="button"]:active {
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    tap-highlight-color: transparent !important;
}

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Smooth scrolling for mobile */
@media (max-width: 768px) {
    html {
        scroll-behavior: smooth;
        scroll-padding-top: var(--header-height);
    }
}

/* ===== Typography Mobile Optimization ===== */
@media (max-width: 768px) {
    body {
        font-size: 16px;
        /* Minimum for readability */
        line-height: 1.6;
    }

    h1 {
        font-size: clamp(1.75rem, 5vw, 2.5rem);
        line-height: 1.2;
    }

    h2 {
        font-size: clamp(1.5rem, 4vw, 2rem);
        line-height: 1.3;
    }

    h3 {
        font-size: clamp(1.25rem, 3.5vw, 1.5rem);
        line-height: 1.4;
    }

    h4 {
        font-size: clamp(1.1rem, 3vw, 1.25rem);
    }

    p,
    li {
        font-size: 1rem;
        line-height: 1.6;
    }
}

/* ===== Touch-Friendly Interactive Elements ===== */
@media (max-width: 768px) {

    a,
    button,
    .btn,
    input[type="submit"],
    input[type="button"] {
        min-height: 44px;
        /* Apple's recommended minimum */
        min-width: 44px;
    }

    .btn {
        padding: 12px 24px;
        font-size: 1rem;
        touch-action: manipulation;
        /* Prevents double-tap zoom */
    }

    .btn-lg {
        padding: 16px 32px;
        font-size: 1.1rem;
    }

    /* Form inputs */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    textarea,
    select {
        min-height: 44px;
        font-size: 16px;
        /* Prevents zoom on iOS */
        padding: 12px 16px;
    }

    textarea {
        min-height: 120px;
    }
}

/* ===== Header Mobile Enhancement ===== */
@media (max-width: 768px) {
    .header {
        padding: 12px 0;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .logo {
        font-size: 1.25rem;
        display: flex !important;
        align-items: center;
        gap: 8px;
    }

    .logo-img {
        display: block !important;
        max-height: 40px !important;
        height: auto !important;
        width: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .logo-icon {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }

    /* Mobile menu toggle - show on mobile */
    .mobile-toggle {
        display: flex !important;
    }
}

/* ===== Hero Section Mobile ===== */
@media (max-width: 768px) {
    .hero {
        padding: 100px 0 60px;
        min-height: auto;
    }

    .hero-content {
        text-align: center;
        max-width: 100%;
    }

    .hero h1 {
        font-size: 2rem;
        margin-bottom: 16px;
    }

    .hero-description {
        font-size: 1rem;
        margin-bottom: 24px;
    }

    .hero-buttons {
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .hero-buttons .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ===== Services Section Mobile ===== */
@media (max-width: 768px) {
    .services-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-bottom: 24px;
    }

    .services-tabs::-webkit-scrollbar {
        display: none;
    }

    .services-tabs-list {
        flex-wrap: nowrap;
        gap: 8px;
        padding-bottom: 8px;
    }

    .tab-btn {
        min-width: 120px;
        flex-shrink: 0;
        padding: 10px 16px;
        font-size: 0.9rem;
        white-space: nowrap;
    }

    .services-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .service-card {
        padding: 20px;
    }

    .service-icon {
        width: 48px;
        height: 48px;
        font-size: 1.5rem;
    }

    .service-card h3 {
        font-size: 1.1rem;
    }
}

/* ===== Stats Grid Mobile ===== */
@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .stat-card {
        padding: 20px 16px;
    }

    .stat-number {
        font-size: 2rem;
    }

    .stat-label {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== Industries Grid Mobile ===== */
@media (max-width: 768px) {
    .industries-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .industry-item {
        padding: 16px 12px;
    }

    .industry-icon {
        font-size: 1.75rem;
        margin-bottom: 8px;
    }

    .industry-name {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .industries-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== Partners Section Mobile ===== */
@media (max-width: 768px) {
    .partners-premium {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 32px;
    }

    .premium-partner-card {
        padding: 20px;
    }

    .partner-logo-marquee {
        margin: 0 -20px;
    }
}

/* ===== E-books Section Mobile ===== */
@media (max-width: 768px) {
    .ebooks-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .ebook-card {
        padding: 20px;
    }
}

/* ===== Case Studies Mobile ===== */
@media (max-width: 768px) {
    .case-studies-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .case-study-card {
        padding: 20px;
    }
}

/* ===== Testimonials Slider Mobile ===== */
@media (max-width: 768px) {
    .testimonial-card {
        padding: 24px 20px;
    }

    .testimonial-text {
        font-size: 1rem;
    }

    .slider-controls {
        margin-top: 24px;
    }

    .slider-btn {
        width: 40px;
        height: 40px;
    }
}

/* ===== Values Section Mobile ===== */
@media (max-width: 768px) {
    .values-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .value-card {
        padding: 20px;
    }
}

/* ===== Process Timeline Mobile ===== */
@media (max-width: 768px) {
    .process-timeline {
        grid-template-columns: 1fr;
    }

    .process-step {
        padding-left: 0;
    }

    .process-step::before,
    .process-step::after {
        display: none;
    }
}

/* ===== FAQ Section Mobile ===== */
@media (max-width: 768px) {
    .faq-columns {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .faq-item {
        margin-bottom: 12px;
    }

    .faq-question {
        padding: 14px 40px 14px 16px;
        font-size: 0.95rem;
    }

    .faq-answer {
        padding: 0 16px 14px;
        font-size: 0.95rem;
    }

    .faq-toggle {
        right: 16px;
        width: 20px;
        height: 20px;
    }
}

/* ===== Footer Mobile ===== */
@media (max-width: 768px) {
    /* Footer normal pozisyon - sayfanın en altında */
    .footer {
        position: relative !important;
        width: 100%;
        background: var(--bg-dark);
        padding-top: 60px;
        padding-bottom: 0;
    }

    .footer-main {
        padding: 0;
        padding-bottom: 32px;
    }

    /* Footer container padding - already handled in styles.css */
    .footer .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* === Brand Section - Centered & Compact === */
    .footer-brand {
        text-align: center;
        padding-bottom: 24px;
        margin-bottom: 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .footer-brand .logo {
        justify-content: center;
        margin-bottom: 16px;
    }

    .footer-brand .logo-icon {
        width: 44px;
        height: 44px;
        font-size: 1rem;
    }

    .footer-brand .logo-name {
        font-size: 1.25rem;
    }

    .footer-brand .logo-tagline {
        font-size: 0.7rem;
    }

    .footer-desc {
        font-size: 0.85rem;
        line-height: 1.6;
        max-width: 100%;
        margin: 0 auto 16px;
        padding: 0 8px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .footer-desc:last-of-type {
        font-size: 0.75rem;
        -webkit-line-clamp: 2;
    }

    /* Social Links - Fixed Alignment - Centered */
    .footer-social {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 12px !important;
        margin-top: 16px;
        flex-wrap: wrap;
        align-content: flex-start;
    }

    .footer-social a {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        max-width: 40px !important;
        max-height: 40px !important;
        border-radius: 8px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.2s ease;
        flex-shrink: 0;
        box-sizing: border-box;
        position: relative;
        vertical-align: middle;
    }

    .footer-social a:active {
        transform: scale(0.95);
        background: rgba(255, 255, 255, 0.2) !important;
    }

    .footer-social svg {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
        max-width: 20px !important;
        max-height: 20px !important;
        fill: rgba(255, 255, 255, 0.8) !important;
        stroke: none !important;
        display: block !important;
        flex-shrink: 0;
        vertical-align: middle !important;
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* === Collapsible Link Sections (Accordion Style) === */
    .footer-links {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .footer-links h4 {
        font-size: 0.95rem;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.95);
        padding: 16px 0;
        margin: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .footer-links h4::after {
        content: '+';
        font-size: 1.25rem;
        font-weight: 300;
        color: rgba(255, 255, 255, 0.5);
        transition: transform 0.2s ease;
    }

    .footer-links.active h4::after {
        content: '−';
    }

    .footer-links ul {
        display: none;
        flex-direction: column;
        gap: 0;
        padding-bottom: 16px;
        animation: slideDown 0.3s ease;
    }

    .footer-links.active ul {
        display: flex;
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-8px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .footer-links li {
        margin: 0;
    }

    .footer-links a {
        display: block;
        padding: 8px 0 !important;
        font-size: 0.9rem;
        color: rgba(255, 255, 255, 0.7) !important;
        background: transparent !important;
        background-color: transparent !important;
        border-radius: 0 !important;
        border: none !important;
        margin-bottom: 0 !important;
        box-shadow: none !important;
        transition: color 0.2s ease;
        text-decoration: none;
    }

    .footer-links a:active,
    .footer-links a:hover {
        background: transparent !important;
        background-color: transparent !important;
        color: rgba(255, 255, 255, 0.9) !important;
    }

    /* === Contact Section - Touch-Friendly === */
    .footer-contact {
        padding-top: 20px;
        text-align: center;
    }

    .footer-contact h4 {
        font-size: 1rem;
        margin-bottom: 16px;
        color: rgba(255, 255, 255, 0.95);
    }

    .footer-contact .contact-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .footer-contact .contact-list li {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        padding: 4px 0 !important;
        margin: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        font-size: 0.9rem;
        color: rgba(255, 255, 255, 0.7) !important;
        text-align: left;
        list-style: none !important;
        min-height: auto !important;
        height: auto !important;
    }
    
    /* Remove any button-like styles from contact list items */
    .footer-contact .contact-list li * {
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }

    .footer-contact .contact-list li svg {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        stroke: var(--color-primary-light, #60a5fa);
    }

    .footer-contact .contact-list li a {
        color: rgba(255, 255, 255, 0.9);
        font-weight: 500;
    }

    /* Quick Contact Buttons */
    .footer-contact .quick-contact-btns {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-top: 16px;
    }

    .footer-contact .quick-contact-btns a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 14px;
        border-radius: 12px;
        font-size: 0.9rem;
        font-weight: 600;
        transition: all 0.2s ease;
    }

    .footer-contact .quick-contact-btns a:active {
        transform: scale(0.98);
    }

    .footer-contact .quick-contact-btns .btn-phone {
        background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
        color: white;
    }

    .footer-contact .quick-contact-btns .btn-whatsapp {
        background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
        color: white;
    }

    .footer-contact .quick-contact-btns .btn-telegram {
        background: linear-gradient(135deg, #0088cc 0%, #0077b5 100%);
        color: white;
    }

    .footer-contact .quick-contact-btns .btn-email {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }

    .footer-contact .quick-contact-btns svg {
        width: 18px;
        height: 18px;
    }

    /* === Newsletter Form - Mobile Optimized === */
    .newsletter-form {
        margin-top: 24px;
        padding: 20px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .newsletter-form h5 {
        font-size: 0.95rem;
        color: rgba(255, 255, 255, 0.95);
        margin-bottom: 12px;
        text-align: center;
    }

    .newsletter-form form {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .newsletter-form input {
        width: 100%;
        padding: 14px 16px;
        font-size: 16px;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 10px;
        color: white;
        text-align: center;
    }

    .newsletter-form input::placeholder {
        color: rgba(255, 255, 255, 0.5);
    }

    .newsletter-form input:focus {
        outline: none;
        border-color: var(--color-primary-light, #60a5fa);
        box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
    }

    .newsletter-form button {
        width: 100%;
        padding: 14px;
        font-size: 0.95rem;
        font-weight: 600;
        background: linear-gradient(135deg, var(--color-primary, #3b82f6) 0%, var(--color-primary-dark, #2563eb) 100%);
        color: white;
        border: none;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .newsletter-form button:active {
        transform: scale(0.98);
    }

    .newsletter-form button svg {
        width: 18px;
        height: 18px;
    }

    /* === Footer Bottom - Compact === */
    .footer-bottom {
        flex-direction: column;
        gap: 16px;
        text-align: center;
        padding: 20px 20px !important;
        background: transparent !important;
        background-color: transparent !important;
        margin-top: 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        width: 100%;
        box-sizing: border-box;
    }

    .footer-bottom p {
        font-size: 0.75rem;
        line-height: 1.5;
        color: rgba(255, 255, 255, 0.4);
        max-width: 100%;
        margin: 0;
        padding: 0;
    }

    .footer-legal {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px 16px;
    }

    .footer-legal a {
        font-size: 0.8rem;
        color: rgba(255, 255, 255, 0.5);
        padding: 6px 0;
        position: relative;
    }

    .footer-legal a:not(:last-child)::after {
        content: '•';
        position: absolute;
        right: -10px;
        color: rgba(255, 255, 255, 0.2);
    }

    /* Footer scroll için smooth scroll */
    .footer::-webkit-scrollbar {
        width: 4px;
    }

    .footer::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
    }

    .footer::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 2px;
    }

    .footer::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.3);
    }
}

/* Footer toggle butonu - Mobilde gösterilmiyor */
.footer-toggle {
    display: none;
}


/* ===== Blog Post Page Mobile ===== */
@media (max-width: 768px) {
    .post-header-content {
        flex-direction: column;
        gap: 24px;
        text-align: center;
    }

    .post-header-text {
        max-width: 100%;
    }

    .post-header-image {
        width: 100%;
        max-width: 100%;
    }

    .post-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .toc-sidebar {
        position: static;
        max-height: none;
        order: -1;
        /* Show TOC first on mobile */
    }

    .toc-content {
        max-height: 300px;
        overflow-y: auto;
    }

    .related-sidebar {
        position: static;
    }

    .ai-summary-tools {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .ai-tool-btn {
        padding: 10px 16px;
    }
}

/* ===== Contact Page Mobile ===== */
@media (max-width: 768px) {
    .contact-wrapper {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .contact-info-card {
        padding: 20px;
    }

    .contact-form-wrapper {
        padding: 24px 20px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    /* Contact Grid - Mobile Fix */
    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }

    /* Contact Methods - Mobile Beautiful Layout */
    .contact-methods {
        gap: 16px !important;
        margin-bottom: 32px !important;
    }

    .contact-method {
        padding: 18px 20px !important;
        gap: 18px !important;
        flex-wrap: nowrap !important;
        display: flex !important;
        align-items: center !important;
        background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
        border: 2px solid #e2e8f0 !important;
        border-radius: 16px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
        transition: all 0.3s ease !important;
        position: relative !important;
        overflow: hidden !important;
    }

    .contact-method::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 4px;
        height: 100%;
        background: linear-gradient(180deg, #0066ff 0%, #0052cc 100%);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .contact-method:active {
        transform: scale(0.98) !important;
        border-color: #0066ff !important;
        box-shadow: 0 4px 12px rgba(0, 102, 255, 0.15) !important;
    }

    .contact-method:active::before {
        opacity: 1;
    }

    .method-icon {
        width: 52px !important;
        height: 52px !important;
        flex-shrink: 0 !important;
        min-width: 52px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
        border-radius: 14px !important;
        transition: all 0.3s ease !important;
    }

    .contact-method:active .method-icon {
        background: linear-gradient(135deg, #0066ff 0%, #0052cc 100%) !important;
        transform: scale(1.05) !important;
    }

    .method-icon svg {
        width: 26px !important;
        height: 26px !important;
        stroke: #0066ff !important;
        transition: stroke 0.3s ease !important;
    }

    .contact-method:active .method-icon svg {
        stroke: white !important;
    }

    .method-icon.whatsapp {
        background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%) !important;
    }

    .contact-method .method-icon.whatsapp svg {
        fill: #22c55e !important;
        stroke: none !important;
    }

    .contact-method:active .method-icon.whatsapp {
        background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    }

    .contact-method:active .method-icon.whatsapp svg {
        fill: white !important;
    }

    .method-icon.telegram {
        background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
    }

    .contact-method .method-icon.telegram svg {
        fill: #3b82f6 !important;
        stroke: none !important;
    }

    .contact-method:active .method-icon.telegram {
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    }

    .contact-method:active .method-icon.telegram svg {
        fill: white !important;
    }

    .method-content {
        min-width: 0 !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
    }

    .method-label {
        font-size: 0.75rem !important;
        font-weight: 600 !important;
        color: #64748b !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        margin-bottom: 0 !important;
    }

    .method-content strong {
        font-size: 1rem !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        word-break: break-word !important;
        line-height: 1.4 !important;
    }

    /* Office Info - Mobile Beautiful Card */
    .office-info {
        margin-top: 32px !important;
        padding: 24px 20px !important;
        background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
        border: 2px solid #e2e8f0 !important;
        border-radius: 16px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    }

    .office-info h3 {
        font-size: 1.1rem !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        margin-bottom: 20px !important;
        padding-bottom: 12px !important;
        border-bottom: 2px solid #e2e8f0 !important;
    }

    .office-info address {
        flex-direction: row !important;
        gap: 16px !important;
        margin-bottom: 24px !important;
        align-items: flex-start !important;
        display: flex !important;
    }

    .office-info address svg {
        width: 24px !important;
        height: 24px !important;
        margin-top: 4px !important;
        flex-shrink: 0 !important;
        stroke: #0066ff !important;
    }

    .office-info address > div {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .office-info address p {
        font-size: 0.95rem !important;
        line-height: 1.7 !important;
        margin: 0 0 8px 0 !important;
        color: #475569 !important;
        word-break: break-word !important;
    }

    .office-info address p:last-child {
        margin-bottom: 0 !important;
    }

    .office-info address p strong {
        font-weight: 700 !important;
        color: #0f172a !important;
    }

    /* Working Hours - Mobile Beautiful Card */
    .working-hours {
        flex-direction: column !important;
        gap: 16px !important;
        align-items: flex-start !important;
        display: flex !important;
        padding: 24px 20px !important;
        background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
        border: 2px solid #e2e8f0 !important;
        border-radius: 16px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
        margin-top: 16px !important;
    }

    .working-hours svg {
        width: 24px !important;
        height: 24px !important;
        margin-top: 0 !important;
        flex-shrink: 0 !important;
        stroke: #0066ff !important;
    }

    .working-hours p {
        font-size: 0.95rem !important;
        line-height: 1.7 !important;
        margin: 0 !important;
        color: #475569 !important;
    }
}

/* ===== Popup Form Mobile ===== */
@media (max-width: 768px) {
    .popup-content {
        width: 95%;
        max-width: 400px;
        padding: 24px 20px;
        margin: 20px;
    }

    .popup-header h3 {
        font-size: 1.25rem;
    }

    .popup-close {
        width: 32px;
        height: 32px;
    }
}

/* ===== Work Process Page Mobile ===== */
@media (max-width: 768px) {
    .work-process-header {
        margin-bottom: 32px;
        text-align: center;
    }

    .step-badge {
        width: 56px;
        height: 56px;
        font-size: 1.5rem;
        margin: 0 auto 16px;
    }

    .work-content-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .work-intro {
        padding: 20px;
    }

    .work-section {
        padding: 20px;
    }

    .solutions-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .solution-card {
        padding: 20px;
    }

    .team-categories {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .team-category-card {
        padding: 20px;
    }

    .team-roles {
        gap: 12px;
    }

    .role-item {
        padding: 12px;
    }

    .methodology-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .methodology-card {
        padding: 20px;
    }

    .timeline-overview {
        gap: 20px;
    }

    .timeline-item {
        flex-direction: column;
        gap: 12px;
        padding: 16px;
        text-align: center;
    }

    .timeline-period {
        flex-direction: column;
        padding-right: 0;
        border-right: none;
        border-bottom: 2px solid var(--color-primary);
        padding-bottom: 12px;
    }

    .tools-showcase-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .tool-category-showcase {
        padding: 16px;
    }

    .tools-list {
        gap: 8px;
    }

    .tool-tag {
        font-size: 0.85rem;
        padding: 6px 12px;
    }

    .mistakes-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .mistake-item {
        padding: 16px;
    }

    .success-message {
        padding: 20px;
        flex-direction: column;
        gap: 12px;
    }
}

/* ===== About Page Mobile ===== */
@media (max-width: 768px) {
    .about-intro {
        flex-direction: column;
        gap: 24px;
        text-align: center;
    }

    .about-image {
        max-width: 100%;
    }

    .team-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (max-width: 480px) {
    .team-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== Principles Page Mobile ===== */
@media (max-width: 768px) {
    .principles-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .principle-card {
        padding: 20px;
    }
}

/* ===== CTA Section Mobile Enhancement ===== */
@media (max-width: 768px) {
    .cta-content {
        padding: 0 20px;
    }

    .cta-content h2 {
        font-size: 1.65rem;
        margin-bottom: 12px;
    }

    .cta-subtitle-text {
        font-size: 0.95rem;
        margin-bottom: 24px;
    }

    .cta-buttons {
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .cta-buttons .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ===== Utility Classes for Mobile ===== */
@media (max-width: 768px) {
    .mobile-hidden {
        display: none !important;
    }

    .mobile-visible {
        display: block !important;
    }

    .mobile-text-center {
        text-align: center !important;
    }

    .mobile-full-width {
        width: 100% !important;
    }
}

/* ===== Performance Optimizations for Mobile ===== */
@media (max-width: 768px) {

    /* Reduce animations on mobile for better performance */
    * {
        animation-duration: 0.3s !important;
        transition-duration: 0.2s !important;
    }

    /* Optimize hover effects for touch devices */
    @media (hover: none) {
        *:hover {
            transform: none !important;
        }
    }
}

/* ===== Landscape Mobile Orientation ===== */
@media (max-width: 768px) and (orientation: landscape) {
    .hero {
        padding: 80px 0 40px;
    }

    .section {
        padding: 50px 0;
    }

    .popup-content {
        max-height: 90vh;
        overflow-y: auto;
    }
}

/* ===== Accessibility Enhancements ===== */
@media (max-width: 768px) {

    /* Focus styles for keyboard navigation */
    a:focus,
    button:focus,
    input:focus,
    textarea:focus,
    select:focus {
        outline: 3px solid var(--color-primary);
        outline-offset: 2px;
    }

    /* Skip to content link for screen readers */
    .skip-to-content {
        position: absolute;
        top: -40px;
        left: 0;
        background: var(--color-primary);
        color: white;
        padding: 8px 16px;
        text-decoration: none;
        z-index: 10000;
    }

    .skip-to-content:focus {
        top: 0;
    }
}

/* ===== Safe Area Insets for iPhone X and newer ===== */
@supports (padding: max(0px)) {
    @media (max-width: 768px) {
        .header {
            padding-top: max(12px, env(safe-area-inset-top));
        }

        .fixed-mobile-buttons {
            padding-bottom: env(safe-area-inset-bottom);
        }

        .mobile-menu {
            padding-bottom: env(safe-area-inset-bottom);
        }
    }
}

/* ===== Tables Responsive ===== */
@media (max-width: 768px) {
    table {
        width: 100%;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table thead {
        display: none;
    }

    table tr {
        display: block;
        margin-bottom: 16px;
        border: 1px solid var(--border-light);
        border-radius: var(--radius-md);
        padding: 12px;
    }

    table td {
        display: block;
        text-align: right;
        padding: 8px;
        border: none;
        position: relative;
        padding-left: 50%;
    }

    table td::before {
        content: attr(data-label);
        position: absolute;
        left: 12px;
        font-weight: 600;
        text-align: left;
    }
}

/* ===== Responsive Media (Images, Videos, Iframes) ===== */
@media (max-width: 768px) {
    img {
        max-width: 100%;
        height: auto;
    }

    iframe,
    video,
    embed,
    object {
        max-width: 100%;
        height: auto;
    }

    /* Responsive video container */
    .video-container,
    .iframe-container {
        position: relative;
        padding-bottom: 56.25%;
        /* 16:9 ratio */
        height: 0;
        overflow: hidden;
    }

    .video-container iframe,
    .video-container video,
    .video-container embed,
    .video-container object,
    .iframe-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

/* ===== Long Text and Overflow Control ===== */
@media (max-width: 768px) {

    /* Prevent text overflow */
    body,
    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    li,
    td,
    th,
    span,
    a,
    div {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    /* Prevent horizontal scroll */
    body,
    html {
        overflow-x: hidden;
    }

    .container {
        overflow-x: hidden;
    }

    /* Long URLs */
    a {
        word-break: break-word;
    }

    /* Code blocks */
    pre,
    code {
        white-space: pre-wrap;
        word-wrap: break-word;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    pre {
        padding: 12px;
        border-radius: var(--radius-md);
        font-size: 0.85rem;
    }
}

/* ===== Horizontal Scrolling Sections ===== */
@media (max-width: 768px) {

    /* Horizontal scroll indicators */
    .horizontal-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: var(--color-primary) var(--bg-light);
    }

    .horizontal-scroll::-webkit-scrollbar {
        height: 4px;
    }

    .horizontal-scroll::-webkit-scrollbar-track {
        background: var(--bg-light);
    }

    .horizontal-scroll::-webkit-scrollbar-thumb {
        background: var(--color-primary);
        border-radius: 2px;
    }
}

/* ===== Loading States Mobile ===== */
@media (max-width: 768px) {

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

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

        100% {
            background-position: -200% 0;
        }
    }
}

/* ===== Modal/Dialog Mobile Optimization ===== */
@media (max-width: 768px) {

    .modal,
    .dialog,
    .popup {
        width: 95vw !important;
        max-width: 95vw !important;
        margin: 0 auto;
        max-height: 90vh;
        overflow-y: auto;
    }

    .modal-content,
    .dialog-content {
        padding: 20px;
    }
}

/* ===== Cards Grid Enhancement ===== */
@media (max-width: 768px) {

    [class*="-grid"],
    [class*="-cards"],
    .grid,
    .cards {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .card {
        padding: 16px;
    }
}

/* ===== Navigation Breadcrumbs Mobile ===== */
@media (max-width: 768px) {

    .breadcrumbs,
    .service-breadcrumb,
    .post-hero-breadcrumbs {
        display: flex !important;
        align-items: center;
        gap: 4px !important;
        font-size: 0.75rem !important;
        flex-wrap: wrap;
        overflow-x: visible;
        white-space: normal;
        line-height: 1.4;
        padding: 0;
        margin-bottom: 16px;
        -webkit-overflow-scrolling: touch;
    }

    .breadcrumbs a,
    .service-breadcrumb a,
    .post-hero-breadcrumbs a {
        white-space: nowrap;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
    }

    .breadcrumbs .current,
    .service-breadcrumb .active,
    .post-hero-breadcrumbs .current {
        white-space: nowrap;
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
    }

    .breadcrumbs span,
    .service-breadcrumb span,
    .post-hero-breadcrumbs span {
        flex-shrink: 0;
        margin: 0 2px;
        font-size: 0.7rem;
    }

    .breadcrumbs::-webkit-scrollbar,
    .service-breadcrumb::-webkit-scrollbar,
    .post-hero-breadcrumbs::-webkit-scrollbar {
        display: none;
    }
}

@media (max-width: 480px) {

    .breadcrumbs,
    .service-breadcrumb,
    .post-hero-breadcrumbs {
        font-size: 0.7rem !important;
        gap: 3px !important;
    }

    .breadcrumbs a,
    .service-breadcrumb a,
    .post-hero-breadcrumbs a {
        max-width: 100px;
    }

    .breadcrumbs .current,
    .service-breadcrumb .active,
    .post-hero-breadcrumbs .current {
        max-width: 130px;
    }
}

/* ===== Tabs Mobile Enhancement ===== */
@media (max-width: 768px) {
    [class*="tabs"] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    [class*="tabs"]::-webkit-scrollbar {
        display: none;
    }

    .tab-content {
        padding: 16px;
    }
}

/* ===== Tooltips Mobile ===== */
@media (max-width: 768px) {

    /* Disable hover tooltips on mobile */
    [data-tooltip]:hover::before,
    [data-tooltip]:hover::after,
    .tooltip:hover {
        display: none !important;
    }

    /* Convert to tap-based */
    [data-tooltip]:active::before,
    [data-tooltip]:active::after {
        display: block !important;
    }
}

/* ===== Spacing Utilities Mobile ===== */
@media (max-width: 768px) {
    .mobile-mt-0 {
        margin-top: 0 !important;
    }

    .mobile-mt-1 {
        margin-top: 0.25rem !important;
    }

    .mobile-mt-2 {
        margin-top: 0.5rem !important;
    }

    .mobile-mt-3 {
        margin-top: 1rem !important;
    }

    .mobile-mt-4 {
        margin-top: 1.5rem !important;
    }

    .mobile-mt-5 {
        margin-top: 2rem !important;
    }

    .mobile-mb-0 {
        margin-bottom: 0 !important;
    }

    .mobile-mb-1 {
        margin-bottom: 0.25rem !important;
    }

    .mobile-mb-2 {
        margin-bottom: 0.5rem !important;
    }

    .mobile-mb-3 {
        margin-bottom: 1rem !important;
    }

    .mobile-mb-4 {
        margin-bottom: 1.5rem !important;
    }

    .mobile-mb-5 {
        margin-bottom: 2rem !important;
    }

    .mobile-p-0 {
        padding: 0 !important;
    }

    .mobile-p-1 {
        padding: 0.25rem !important;
    }

    .mobile-p-2 {
        padding: 0.5rem !important;
    }

    .mobile-p-3 {
        padding: 1rem !important;
    }

    .mobile-p-4 {
        padding: 1.5rem !important;
    }

    .mobile-p-5 {
        padding: 2rem !important;
    }
}

/* ===== Print Styles ===== */
@media print {

    .header,
    .mobile-toggle,
    .mobile-menu,
    .fixed-mobile-buttons,
    .cta-buttons,
    .newsletter-form,
    .popup-overlay {
        display: none !important;
    }

    body {
        font-size: 12pt;
    }

    a {
        text-decoration: underline;
    }

    .container {
        max-width: 100%;
    }
}

/* ===== Google Mobile-Friendly Enhancements ===== */
@media (max-width: 768px) {

    /* Ensure clickable elements are not too close */
    a+a,
    button+button,
    .btn+.btn {
        margin-left: 8px;
        margin-top: 8px;
    }

    /* Readable text without zooming */
    body {
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    /* Proper form labels */
    label {
        display: block;
        margin-bottom: 6px;
        font-weight: 500;
    }

    /* Enhanced form accessibility */
    input:focus,
    textarea:focus,
    select:focus {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
    }

    /* Error messages visible */
    .error-message,
    .form-error {
        color: #dc2626;
        font-size: 0.9rem;
        margin-top: 4px;
        display: block;
    }

    /* Success messages */
    .success-message-form,
    .form-success {
        color: #10b981;
        font-size: 0.9rem;
        margin-top: 4px;
        display: block;
    }
}

/* ===== SEO and Performance Optimizations ===== */
@media (max-width: 768px) {

    /* Lazy loading indicator */
    img[loading="lazy"],
    iframe[loading="lazy"] {
        background: var(--bg-light);
        min-height: 200px;
    }

    /* 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;
        }
    }

    /* Dark mode support */
    @media (prefers-color-scheme: dark) {
        :root {
            color-scheme: dark;
        }
    }
}

/* ===== Critical Mobile Fixes ===== */
@media (max-width: 768px) {

    /* Fix iOS input zoom */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    textarea,
    select {
        font-size: 16px !important;
    }

    /* Fix position fixed elements on iOS */
    .fixed-header,
    .fixed-footer,
    .fixed-mobile-buttons {
        position: -webkit-sticky;
        position: sticky;
    }

    /* Prevent body scroll when modal open */
    body.modal-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }

    /* Fix flexbox issues on older browsers */
    .flex-container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    /* Fix grid issues on older browsers */
    .grid-container {
        display: -ms-grid;
        display: grid;
    }
}