/* 
 * Mobile-First Responsive Design
 * Tüm sayfalar için genel responsive kuralları
 */

/* Base Mobile Styles */
@media (max-width: 768px) {
    html {
        font-size: 14px;
    }
    
    body {
        overflow-x: hidden;
    }
    
    /* Container Adjustments */
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Typography Scale */
    .text-6xl { font-size: 2.5rem !important; }
    .text-5xl { font-size: 2rem !important; }
    .text-4xl { font-size: 1.75rem !important; }
    .text-3xl { font-size: 1.5rem !important; }
    .text-2xl { font-size: 1.25rem !important; }
    .text-xl { font-size: 1.125rem !important; }
    
    /* Spacing Adjustments */
    .py-24 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
    .py-20 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
    .py-16 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
    .py-12 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
    .py-8 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
    .px-8 { padding-left: 1rem !important; padding-right: 1rem !important; }
    .px-6 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
    
    .mb-16 { margin-bottom: 2rem !important; }
    .mb-12 { margin-bottom: 1.5rem !important; }
    .mb-8 { margin-bottom: 1rem !important; }
    .mb-6 { margin-bottom: 0.75rem !important; }
    
    .gap-8 { gap: 1rem !important; }
    .gap-6 { gap: 0.75rem !important; }
    .gap-4 { gap: 0.5rem !important; }
    .gap-2 { gap: 0.25rem !important; }
    
    /* Grid System */
    .grid-cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .grid-cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .grid-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .grid-cols-2 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
    
    /* Hero Sections */
    .hero-section,
    .min-h-screen { 
        min-height: 60vh !important; 
    }
    
    /* Cards */
    .card, .modern-card {
        padding: 1rem !important;
    }
    
    /* Buttons */
    .btn, .button {
        padding: 0.75rem 1.5rem !important;
        font-size: 0.875rem !important;
    }
    
    /* Navigation */
    .nav-links {
        display: none;
    }
    
    .mobile-menu-btn {
        display: block !important;
    }
}

/* Small Mobile Devices */
@media (max-width: 640px) {
    html {
        font-size: 13px;
    }
    
    .text-6xl { font-size: 2rem !important; }
    .text-5xl { font-size: 1.75rem !important; }
    .text-4xl { font-size: 1.5rem !important; }
    .text-3xl { font-size: 1.25rem !important; }
    
    .py-24 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
    .py-20 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
    .py-16 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
    .py-12 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
    
    .hero-section,
    .min-h-screen { 
        min-height: 50vh !important; 
    }
    
    /* Single column on very small screens */
    .grid-cols-6 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .grid-cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .grid-cols-3 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
    .grid-cols-2 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
}

/* Extra Small Mobile Devices */
@media (max-width: 480px) {
    .text-6xl { font-size: 1.75rem !important; }
    .text-4xl { font-size: 1.25rem !important; }
    .text-3xl { font-size: 1.125rem !important; }
    
    .hero-section,
    .min-h-screen { 
        min-height: 45vh !important; 
    }
    
    /* Force single column on extra small screens */
    .grid-cols-8 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .grid-cols-6 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .grid-cols-4 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
    .grid-cols-3 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
    .grid-cols-2 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
    
    .card, .modern-card {
        padding: 0.75rem !important;
    }
}

/* Tablet Responsive */
@media (min-width: 769px) and (max-width: 1024px) {
    .text-6xl { font-size: 3rem !important; }
    .text-5xl { font-size: 2.5rem !important; }
    
    .py-24 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
    .py-20 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
}

/* Admin Panel Specific Mobile Styles */
@media (max-width: 1024px) {
    .sidebar {
        transform: translateX(-100%);
        width: 280px;
        position: fixed;
        height: 100vh;
        z-index: 1000;
        transition: transform 0.3s ease;
    }
    
    .sidebar.active {
        transform: translateX(0);
    }
    
    .content-area {
        margin-left: 0 !important;
    }
    
    .mobile-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 999;
    }
}

/* Touch-friendly adjustments */
@media (pointer: coarse) {
    .btn, .button, a, button {
        min-height: 44px;
        min-width: 44px;
    }
    
    .nav-link {
        padding: 0.75rem 1rem;
    }
}