/* ===== RESPONSIVE CSS - EK DÜZENLEMELER ===== */

/* Tablet (768px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        padding: 0 2rem;
    }
    
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .stats {
        gap: 2rem;
    }
    
    .stat-number {
        font-size: 2.5rem;
    }
}

/* Mobil Yatay (480px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
    .container {
        padding: 0 1.5rem;
    }
    
    .feature-card {
        padding: 2rem;
    }
    
    .pricing-card {
        padding: 2rem;
    }
    
    .hero {
        padding: 4rem 1.5rem;
    }
}

/* Küçük Mobil (320px - 480px) */
@media (max-width: 480px) {
    .container {
        padding: 0 1rem;
    }
    
    .btn-large {
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
    }
    
    .feature-icon {
        font-size: 3rem;
    }
    
    .price {
        font-size: 2.5rem;
    }
    
    .seo-score h4 {
        font-size: 3rem;
    }
}

/* Çok Küçük Ekranlar (320px altı) */
@media (max-width: 320px) {
    html {
        font-size: 14px;
    }
    
    .auth-card {
        padding: 1rem;
    }
    
    .form-input {
        padding: 0.75rem;
    }
    
    .stat-number {
        font-size: 2rem;
    }
}

/* Dark Mode için ek stiller */
@media (prefers-color-scheme: dark) {
    .feature-card, .pricing-card, .input-section, .output-section {
        background: var(--bg-card);
    }
}

/* Yüksek çözünürlüklü ekranlar */
@media (min-width: 1920px) {
    :root {
        --container-max: 1440px;
    }
    
    html {
        font-size: 18px;
    }
}

/* Dokunmatik cihazlar için hover düzeltmeleri */
@media (hover: none) and (pointer: coarse) {
    .feature-card:hover,
    .pricing-card:hover,
    .btn-primary:hover,
    .btn-outline:hover {
        transform: none;
    }
    
    .feature-card::before,
    .pricing-card::before {
        display: none;
    }
}

/* Yazdırma stilleri */
@media print {
    .no-print {
        display: none !important;
    }
    
    .print-only {
        display: block !important;
    }
    
    a[href]:after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        font-weight: normal;
    }
}

/* Erişilebilirlik */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}