/* Responsive Styles for All Pages */

/* Mobile First Approach - Extra Small Devices (phones, 320px and up) */
@media (max-width: 639px) {
    /* Root font size adjustment */
    html {
        font-size: 14px;
    }
    
    body {
        font-size: 0.875rem;
    }
        /* Navbar adjustments */
    .nav-glass {
        padding: 0.75rem 1rem;
    }
    
    nav .max-w-7xl {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        gap: 0.5rem !important;
    }
    
    nav .max-w-7xl .flex {
        flex-wrap: nowrap;
    }
    
    /* Hero Section */
    section.relative.min-h-screen {
        padding-top: 5rem;
        padding-left: 1rem;
        padding-right: 1rem;
        min-height: auto;
    }
    
    section.relative.min-h-screen .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Typography scaling */
    .font-display.text-5xl,
    .font-display.text-8xl {
        font-size: 2.5rem !important;
        line-height: 1.1 !important;
    }
    
    .font-display.text-4xl {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }
    
    .font-display.text-3xl {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
    }
    
    h1.font-display {
        font-size: 2rem !important;
    }
    
    h2.font-display {
        font-size: 1.75rem !important;
    }
    
    h3.font-display {
        font-size: 1.5rem !important;
    }
    
    /* Container padding */
    .container,
    .max-w-6xl,
    .max-w-7xl,
    .max-w-5xl,
    .max-w-4xl,
    .max-w-3xl,
    .max-w-2xl {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    .mx-auto {
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Section padding */
    section {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    section.py-32 {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
    
    section.pb-24 {
        padding-bottom: 3rem !important;
    }
    
    section.pt-20 {
        padding-top: 5rem !important;
    }
    
    section.px-6 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Grid adjustments */
    .grid {
        gap: 1.5rem !important;
    }
    
    .grid.lg\\:grid-cols-2,
    .grid.lg\\:grid-cols-3,
    .grid.lg\\:grid-cols-4 {
        grid-template-columns: 1fr !important;
    }
    
    /* Card padding */
    .bento-card {
        padding: 1.5rem !important;
    }
    
    .bento-card.rounded-3xl.p-8 {
        padding: 1.5rem !important;
    }
    
    .bento-card.rounded-3xl.p-5 {
        padding: 1.25rem !important;
    }
    
    /* Buttons */
    a[class*="px-8"],
    button[class*="px-8"],
    .px-8 {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
        font-size: 0.875rem !important;
    }
    
    .px-6 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    .py-4 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    
    /* Spacing adjustments */
    .mb-16 {
        margin-bottom: 2rem !important;
    }
    
    .mb-10 {
        margin-bottom: 1.5rem !important;
    }
    
    .mb-8 {
        margin-bottom: 1.5rem !important;
    }
    
    .mb-6 {
        margin-bottom: 1rem !important;
    }
    
    .mt-20 {
        margin-top: 2rem !important;
    }
    
    .gap-8 {
        gap: 1.5rem !important;
    }
    
    .gap-6 {
        gap: 1rem !important;
    }
    
    .gap-4 {
        gap: 0.75rem !important;
    }
    
    /* Table responsive */
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
    }
    
    table {
        font-size: 0.75rem;
    }
    
    /* Form elements */
    input,
    textarea,
    select {
        font-size: 1rem;
    }
    
    /* Mobile menu improvements */
    #mobile-menu {
        max-height: calc(100vh - 5rem);
        overflow-y: auto;
    }
    
    /* Kod editörü butonunu mobilde navbar'dan gizle */
    .code-editor-trigger:not(.code-editor-trigger-mobile) {
        display: none !important;
    }
    
    /* Mobil menüdeki kod editörü butonu */
    .code-editor-trigger-mobile {
        width: 100%;
        text-align: left;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        font-size: 0.875rem;
        font-weight: 500;
        color: #cbd5e1;
        padding: 0.5rem 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        transition: color 200ms ease;
    }
    
    .code-editor-trigger-mobile:hover {
        color: #ffffff;
    }
    
    .code-editor-trigger-mobile i {
        font-size: 1.125rem;
    }
    
    /* Canvas/game elements */
    canvas {
        max-width: 100%;
        height: auto;
    }
}

/* Small Devices (tablets, 640px and up) */
@media (min-width: 640px) and (max-width: 767px) {
    /* Medium adjustments */
    section {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
    
    .container,
    .max-w-6xl,
    .max-w-7xl {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    
    /* Kod editörü butonunu tablet'te göster */
    .code-editor-trigger:not(.code-editor-trigger-mobile) {
        display: inline-flex !important;
    }
}

/* Medium Devices (tablets landscape, 768px and up) */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Tablet adjustments */
    section {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
}

/* Tablet & küçük laptoplarda navbar taşmasını önle (768px - 1279px) */
@media (min-width: 768px) and (max-width: 1279px) {
    nav .max-w-7xl {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }
}

/* Large Devices (desktops, 1024px and up) */
@media (min-width: 1024px) {
    /* Desktop - default styles apply */
}

/* Extra Large Devices (large desktops, 1280px and up) */
@media (min-width: 1280px) {
    /* Large desktop optimizations */
}

/* Landscape Orientation */
@media (orientation: landscape) and (max-height: 500px) {
    section.relative.min-h-screen {
        min-height: auto;
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
    
    .font-display.text-5xl,
    .font-display.text-4xl {
        font-size: 2rem;
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    button,
    a[role="button"],
    .clickable {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Better spacing for touch */
    .gap-4 {
        gap: 1rem;
    }
    
    /* Remove hover effects on touch devices */
    *:hover {
        transition: none;
    }
}

/* Print Styles */
@media print {
    .nav-glass,
    #mobile-menu,
    button,
    .bento-card {
        display: none;
    }
    
    body {
        background: white;
        color: black;
    }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Crisp borders and images */
    .bento-card {
        border-width: 0.5px;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Dark Mode Specific Responsive Adjustments */
@media (prefers-color-scheme: dark) {
    /* Already handled by theme toggle */
}

/* Specific Component Responsive Fixes */

/* Navbar Logo */
@media (max-width: 640px) {
    nav a.text-2xl {
        font-size: 1.5rem;
    }
}

/* Hero Text */
@media (max-width: 480px) {
    h1.font-display.text-5xl {
        font-size: 2rem;
        line-height: 1.1;
        margin-bottom: 1rem;
    }
    
    p.text-lg {
        font-size: 0.875rem;
        margin-bottom: 1.5rem;
    }
}

/* Bento Grid */
@media (max-width: 768px) {
    .grid.grid-cols-1.md\\:grid-cols-2,
    .grid.grid-cols-1.lg\\:grid-cols-3 {
        grid-template-columns: 1fr;
    }
}

/* Footer */
@media (max-width: 640px) {
    footer {
        padding: 2rem 1rem;
        text-align: center;
    }
    
    footer .grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* Forms */
@media (max-width: 640px) {
    form .grid {
        grid-template-columns: 1fr;
    }
    
    input,
    textarea {
        width: 100%;
    }
}

/* Game Canvas */
@media (max-width: 768px) {
    #orbit-runner-canvas,
    #tetris-canvas {
        max-width: 100%;
        height: auto;
    }
}

/* Code Editor Modal */
@media (max-width: 1024px) {
    .code-editor-modal {
        flex-direction: column;
    }
    
    .code-editor-panels {
        width: 100%;
        max-height: 40vh;
    }
    
    .code-editor-preview {
        width: 100%;
        height: 60vh;
    }
}

/* Admin Dashboard (already has responsive styles) */
@media (max-width: 1024px) {
    .admin-sidebar {
        transform: translateX(-100%);
    }
    
    .admin-sidebar.active {
        transform: translateX(0);
    }
    
    .admin-main {
        margin-left: 0;
    }
}

/* Utility Classes for Responsive Spacing */
@media (max-width: 640px) {
    .mobile-px-4 {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .mobile-py-4 {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    
    .mobile-text-sm {
        font-size: 0.875rem;
    }
    
    .mobile-text-xs {
        font-size: 0.75rem;
    }
    
    .mobile-hidden {
        display: none;
    }
}