/* ====================================
   UNIVERSAL RESPONSIVE CSS
   Tüm Sayfalar İçin Mobil Optimizasyon
   ==================================== */

/* Tablet ve Mobil Genel Ayarlar */
@media (max-width: 991.98px) {
    /* Container ve Spacing */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Sections */
    section {
        padding: 3rem 0 !important;
    }
    
    /* Headings */
    h1 {
        font-size: clamp(2rem, 6vw, 3rem) !important;
        line-height: 1.2 !important;
    }
    
    h2 {
        font-size: clamp(1.75rem, 5vw, 2.5rem) !important;
        line-height: 1.3 !important;
    }
    
    h3 {
        font-size: clamp(1.5rem, 4vw, 2rem) !important;
    }
    
    h4 {
        font-size: clamp(1.25rem, 3.5vw, 1.75rem) !important;
    }
    
    /* Text */
    p, .lead {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }
    
    /* Hero Sections */
    [class*="hero"] {
        padding: 4rem 0 3rem !important;
        min-height: auto !important;
    }
    
    .hero-title, [class*="hero-title"], [class*="page-title"] {
        font-size: clamp(2rem, 7vw, 2.75rem) !important;
        margin-bottom: 1.25rem !important;
    }
    
    .hero-description, [class*="hero-description"], [class*="hero-subtitle"] {
        font-size: 1rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* Grids */
    [class*="grid"], [class*="-grid"] {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    /* Cards */
    [class*="card"], [class*="-card"] {
        padding: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* Buttons */
    .btn, [class*="btn-"] {
        padding: 0.85rem 1.5rem !important;
        font-size: 0.95rem !important;
        width: auto !important;
    }
    
    .btn-lg {
        padding: 1rem 2rem !important;
        font-size: 1rem !important;
    }
    
    /* Button Groups */
    [class*="buttons"], .btn-group {
        flex-direction: column !important;
        gap: 0.75rem !important;
        align-items: stretch !important;
    }
    
    [class*="buttons"] .btn, .btn-group .btn {
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 auto !important;
    }
    
    /* Stats & Numbers */
    [class*="stats"], [class*="-stats"] {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 1.5rem !important;
    }
    
    [class*="stat-item"], [class*="stat"] {
        min-width: 100px !important;
        text-align: center !important;
    }
    
    /* Icons */
    [class*="icon"] i, [class*="-icon"] i {
        font-size: 1.5rem !important;
    }
    
    /* Features */
    [class*="feature"], [class*="-feature"] {
        text-align: center !important;
        padding: 1.25rem !important;
    }
    
    /* Images */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Tables */
    table {
        font-size: 0.9rem !important;
    }
    
    /* Forms */
    .form-control, .form-select {
        font-size: 1rem !important;
    }
    
    /* Process/Timeline */
    [class*="process"], [class*="timeline"] {
        grid-template-columns: 1fr !important;
    }
}

/* Mobil Portrait (< 768px) */
@media (max-width: 767.98px) {
    /* Container */
    .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    /* Sections */
    section {
        padding: 2.5rem 0 !important;
    }
    
    /* Hero */
    [class*="hero"] {
        padding: 3rem 0 2rem !important;
    }
    
    .hero-title, [class*="hero-title"] {
        font-size: clamp(1.75rem, 6vw, 2.25rem) !important;
        margin-bottom: 1rem !important;
    }
    
    .hero-description {
        font-size: 0.95rem !important;
        margin-bottom: 1.25rem !important;
    }
    
    /* Cards */
    [class*="card"] {
        padding: 1.25rem !important;
    }
    
    /* Buttons */
    .btn {
        padding: 0.75rem 1.25rem !important;
        font-size: 0.9rem !important;
    }
    
    /* Grids */
    [class*="grid"] {
        gap: 1.25rem !important;
    }
    
    /* Stats */
    [class*="stats"] {
        gap: 1.25rem !important;
    }
    
    [class*="stat-number"], [class*="stat"] strong {
        font-size: 1.75rem !important;
    }
    
    /* Hide complex visuals on mobile */
    [class*="mockup"], [class*="visual"], [class*="illustration"] {
        max-width: 100% !important;
        margin: 0 auto !important;
    }
}

/* Extra Small Mobile (< 576px) */
@media (max-width: 575.98px) {
    /* Container */
    .container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    /* Sections */
    section {
        padding: 2rem 0 !important;
    }
    
    /* Hero */
    [class*="hero"] {
        padding: 2.5rem 0 1.5rem !important;
    }
    
    .hero-title {
        font-size: clamp(1.5rem, 5vw, 2rem) !important;
        margin-bottom: 0.75rem !important;
    }
    
    .hero-description {
        font-size: 0.9rem !important;
    }
    
    /* Cards */
    [class*="card"] {
        padding: 1rem !important;
    }
    
    /* Buttons */
    .btn {
        padding: 0.65rem 1rem !important;
        font-size: 0.85rem !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Stats */
    [class*="stat-number"] {
        font-size: 1.5rem !important;
    }
    
    /* Text */
    p {
        font-size: 0.95rem !important;
    }
    
    /* Hide decorative elements */
    [class*="decoration"], [class*="particle"], [class*="float"], [class*="badge"].floating {
        display: none !important;
    }
}

/* Touch Optimization */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .btn, a.btn, button {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    .nav-link {
        min-height: 48px !important;
        padding: 0.75rem 1rem !important;
    }
    
    /* Remove hover effects on touch devices */
    *:hover {
        transform: none !important;
    }
    
    /* But keep tap feedback */
    .btn:active, a:active, button:active {
        transform: scale(0.97) !important;
        opacity: 0.9 !important;
    }
}

/* Landscape Mobile */
@media (max-width: 896px) and (orientation: landscape) {
    [class*="hero"] {
        padding: 2rem 0 !important;
        min-height: auto !important;
    }
    
    .hero-title {
        font-size: 2rem !important;
        margin-bottom: 0.75rem !important;
    }
}

/* Print Optimization */
@media print {
    .navbar, .footer, .btn-scroll-top, [class*="floating"], [class*="sticky"] {
        display: none !important;
    }
    
    section {
        page-break-inside: avoid !important;
    }
    
    * {
        background: white !important;
        color: black !important;
    }
}