/* =====================================================
   E-Ticaret Script - Responsive Kurallar
   ===================================================== */

/* Tablet */
@media (max-width: 1024px) {
    :root { --container: 960px; }
    .product-grid { grid-template-columns: repeat(3, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
    .product-detail { gap: 24px; }
    .hero-inner { padding: 48px 0; }
    .hero-title { font-size: 30px; }
    .hero-image img { max-width: 300px; }
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
    .products-layout { grid-template-columns: 220px 1fr; gap: 20px; }
}

/* Mobile Landscape */
@media (max-width: 768px) {
    :root { --header-height: 56px; }

    /* Header */
    .header-nav { display: none; }
    .header-search { max-width: 100%; order: 3; }
    .menu-toggle { display: flex; }

    /* Mobile Navigation */
    .header-nav.open {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--bg);
        z-index: 200;
        padding: 16px;
        overflow-y: auto;
        border-top: 1px solid var(--border);
    }

    .header-nav.open a {
        padding: 12px 16px;
        font-size: 15px;
        border-bottom: 1px solid var(--border-light);
    }

    .nav-mega-item {
        flex-wrap: wrap;
    }

    .nav-mega-item > .nav-mega-trigger {
        flex: 1;
    }

    .nav-mega-panel {
        position: static;
        flex-basis: 100%;
        border: none;
        box-shadow: none;
        padding: 0 0 0 16px;
        min-width: 0;
    }

    .nav-mega-panel a {
        border-bottom: 1px solid var(--border-light);
        font-size: 14px;
    }

    .header-inner {
        flex-wrap: wrap;
        height: auto;
        min-height: var(--header-height);
        padding: 10px 0;
        gap: 8px;
    }

    .header-logo { order: 1; }
    .header-actions { order: 2; margin-left: auto; }
    .header-search { order: 3; flex: 1 0 100%; }

    .topbar-username { display: none; }

    /* Grid */
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .product-detail { grid-template-columns: 1fr; gap: 20px; }
    .products-layout { grid-template-columns: 1fr; }
    .products-filters { position: static; }
    .cart-layout { grid-template-columns: 1fr; }
    .checkout-layout { grid-template-columns: 1fr; }
    .account-layout { grid-template-columns: 1fr; }
    .blog-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }

    /* Hero */
    .hero-inner { flex-direction: column; text-align: center; padding: 32px 0; }
    .hero-title { font-size: 24px; }
    .hero-image { order: -1; }
    .hero-image img { max-width: 250px; margin: 0 auto; }

    /* Footer */
    .footer-grid { grid-template-columns: 1fr; gap: 24px; }

    /* Form */
    .form-row { grid-template-columns: 1fr; }

    /* Sections */
    .section-title { font-size: 18px; }
    .page-content { padding: 20px 0; }
    .section { margin-bottom: 32px; }

    /* Filter bar */
    .filter-bar { flex-direction: column; align-items: stretch; gap: 8px; }

    /* Cart summary sticky off */
    .cart-summary { position: static; }

    /* Account sidebar - horizontal scroll */
    .account-sidebar {
        position: static;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .account-user-info { display: none; }

    .account-nav {
        flex-direction: row;
        gap: 4px;
    }

    .account-nav-link { white-space: nowrap; padding: 8px 12px; font-size: 13px; }

    /* Account stats */
    .account-stats { grid-template-columns: repeat(2, 1fr); }

    /* Auth card */
    .auth-card { padding: 24px; }

    /* Header action text */
    .header-action-text { display: none; }
}

/* Mobile Portrait */
@media (max-width: 480px) {
    .container { padding: 0 14px; }
    .product-card-body { padding: 10px; }
    .product-card-name { font-size: 13px; }
    .product-card-price-current { font-size: 15px; }
    .product-card-btn { padding: 6px 8px; font-size: 11px; }
    .product-info-name { font-size: 22px; }
    .product-info-price-current { font-size: 24px; }
    .error-page-code { font-size: 80px; }
    .error-page-title { font-size: 20px; }
    .error-page-actions { flex-direction: column; }
    .blog-grid { grid-template-columns: 1fr; }
    .hero-title { font-size: 20px; }
    .category-card { flex-basis: 160px; }
    .category-scroll-prev { left: 4px; }
    .category-scroll-next { right: 4px; }
    .category-scroll-btn { width: 34px; height: 34px; opacity: 0.9; }
}