/* MOBILE-FIRST CSS - PageSpeed Optimizasyonu */

/* Mobile Navigation */
@media (max-width: 767px) {
    .navbar {
        padding: 0.5rem 0;
    }
    
    .navbar-brand img {
        max-height: 32px;
    }
    
    .navbar-nav .nav-link {
        padding: 0.75rem 1rem;
        font-size: 0.95rem;
    }
    
    .dropdown-menu {
        border: none;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        border-radius: 10px;
        margin-top: 0.5rem;
    }
}

/* Mobile Hero Section */
@media (max-width: 767px) {
    .hero-section {
        padding: 50px 0;
        margin-top: 60px;
    }
    
    .hero-content h1 {
        font-size: 2rem;
        line-height: 1.2;
        margin-bottom: 1rem;
    }
    
    .hero-content .lead {
        font-size: 1rem;
        margin-bottom: 1.5rem;
        line-height: 1.5;
    }
    
    .hero-content .badge {
        font-size: 0.9rem;
        padding: 6px 12px;
    }
    
    .hero-visual {
        margin-top: 2rem;
    }
    
    .hero-main-image {
        max-width: 100%;
        height: auto;
        border-radius: 15px;
    }
    
    .floating-card {
        width: 60px;
        height: 60px;
        font-size: 1.2rem;
    }
}

/* Mobile Buttons */
@media (max-width: 767px) {
    .btn {
        padding: 12px 20px;
        font-size: 0.95rem;
        border-radius: 8px;
        font-weight: 600;
        width: 100%;
        margin-bottom: 0.75rem;
        text-align: center;
    }
    
    .btn-lg {
        padding: 14px 24px;
        font-size: 1rem;
    }
    
    .btn-group .btn {
        width: auto;
        margin-bottom: 0;
        margin-right: 0.5rem;
    }
    
    .btn-group .btn:last-child {
        margin-right: 0;
    }
}

/* Mobile Service Cards */
@media (max-width: 767px) {
    .service-card {
        margin-bottom: 1.5rem;
        padding: 1.5rem;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        transition: transform 0.2s ease;
    }
    
    .service-card:hover {
        transform: translateY(-2px);
    }
    
    .service-card .service-icon {
        font-size: 2.5rem;
        margin-bottom: 1rem;
    }
    
    .service-card h5 {
        font-size: 1.25rem;
        margin-bottom: 0.75rem;
        line-height: 1.3;
    }
    
    .service-card p {
        font-size: 0.9rem;
        line-height: 1.5;
        color: #6b7280;
    }
}

/* Mobile CTA Box */
@media (max-width: 767px) {
    .cta-box {
        padding: 2rem 1.5rem;
        margin: 2rem 0;
        border-radius: 15px;
    }
    
    .cta-box h3 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
        line-height: 1.3;
    }
    
    .cta-box p {
        font-size: 1rem;
        margin-bottom: 1.5rem;
        line-height: 1.5;
        opacity: 0.9;
    }
    
    .cta-box .btn {
        margin-bottom: 0.75rem;
    }
}

/* Mobile Stats Section */
@media (max-width: 767px) {
    .stats-section {
        padding: 2rem 0;
    }
    
    .stat-item {
        margin-bottom: 2rem;
        text-align: center;
    }
    
    .stat-number {
        font-size: 2.5rem;
        font-weight: 800;
        color: var(--primary-color);
        display: block;
        margin-bottom: 0.5rem;
        line-height: 1.2;
    }
    
    .stat-label {
        font-size: 1rem;
        color: var(--text-color);
        font-weight: 500;
        line-height: 1.4;
    }
}

/* Mobile Footer */
@media (max-width: 767px) {
    .footer {
        padding: 2rem 0 1rem;
    }
    
    .footer-logo {
        max-width: 180px;
        margin-bottom: 1rem;
    }
    
    .footer-description {
        font-size: 0.9rem;
        line-height: 1.6;
        margin-bottom: 1.5rem;
    }
    
    .footer-heading {
        font-size: 1.2rem;
        margin-bottom: 1rem;
    }
    
    .footer-links li {
        margin-bottom: 0.5rem;
    }
    
    .footer-links a {
        font-size: 0.9rem;
    }
    
    .social-links {
        gap: 0.75rem;
        margin-top: 1rem;
    }
    
    .social-links a {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
    }
}

/* Mobile Typography */
@media (max-width: 767px) {
    h1 { font-size: 1.875rem; line-height: 1.2; }
    h2 { font-size: 1.625rem; line-height: 1.3; }
    h3 { font-size: 1.375rem; line-height: 1.3; }
    h4 { font-size: 1.125rem; line-height: 1.4; }
    h5 { font-size: 1rem; line-height: 1.4; }
    h6 { font-size: 0.875rem; line-height: 1.4; }
    
    p { font-size: 0.95rem; line-height: 1.6; }
    
    .lead { font-size: 1.05rem; line-height: 1.6; }
}

/* Mobile Layout */
@media (max-width: 767px) {
    .container {
        padding: 0 15px;
    }
    
    .row {
        margin: 0;
    }
    
    .col-12, .col-md-6, .col-lg-4, .col-lg-8 {
        padding: 0 10px;
        margin-bottom: 1rem;
    }
    
    .py-4 { padding: 1.5rem 0; }
    .py-5 { padding: 2rem 0; }
    .my-4 { margin: 1.5rem 0; }
    .my-5 { margin: 2rem 0; }
}

/* Mobile Utilities */
@media (max-width: 767px) {
    .text-center { text-align: center; }
    .text-left { text-align: left; }
    .text-right { text-align: right; }
    
    .d-none { display: none !important; }
    .d-block { display: block !important; }
    .d-flex { display: flex !important; }
    
    .w-100 { width: 100% !important; }
    .h-auto { height: auto !important; }
    
    .rounded { border-radius: 8px !important; }
    .rounded-lg { border-radius: 12px !important; }
}

/* Mobile Performance Optimizations */
@media (max-width: 767px) {
    /* Reduce animations on mobile for better performance */
    * {
        animation-duration: 0.2s !important;
        transition-duration: 0.2s !important;
    }
    
    /* Optimize shadows for mobile */
    .shadow, .shadow-sm, .shadow-lg {
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    }
    
    /* Reduce backdrop-filter on mobile for better performance */
    .navbar {
        backdrop-filter: blur(5px);
    }
}