/* ============================================
   BEF DAYS — Responsive
   ============================================ */

/* ─── TABLET (< 1024px) ─────────────────── */
@media (max-width: 1023px) {
    .sidebar {
        transform: translateX(-100%);
    }
    .sidebar.is-open {
        transform: translateX(0);
    }
    .sidebar-overlay.is-open {
        display: block;
    }

    .main-content {
        margin-left: 0;
    }

    .mobile-menu-btn {
        display: flex;
    }

    .page-content {
        padding: var(--space-xl);
    }

    .header {
        padding: 0 var(--space-xl);
    }

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

    .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ─── MOBİL (< 768px) ───────────────────── */
@media (max-width: 767px) {
    .page-content {
        padding: var(--space-lg);
    }

    .header {
        padding: 0 var(--space-lg);
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .page-header-right {
        width: 100%;
        justify-content: flex-start;
    }

    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr;
    }

    .stat-card .stat-value {
        font-size: 20px;
    }

    .auth-card {
        padding: var(--space-xl);
    }

    /* Tablo mobil: yatay scroll */
    .table-wrapper {
        margin: 0 calc(-1 * var(--space-lg));
        padding: 0 var(--space-lg);
    }

    /* Filtre bar mobil */
    .filter-bar {
        flex-direction: column;
    }
    .filter-bar .input, .filter-bar .select {
        width: 100%;
    }

    /* Modal mobil: fullscreen */
    .modal {
        max-width: 100%;
        max-height: 100%;
        height: 100%;
        border-radius: 0;
    }

    /* Toast mobil */
    .toast-container {
        left: var(--space-lg);
        right: var(--space-lg);
        top: var(--space-lg);
    }
    .toast {
        min-width: auto;
        max-width: 100%;
    }

    /* Stepper mobil */
    .stepper {
        overflow-x: auto;
        padding-bottom: var(--space-sm);
    }

    .pagination {
        justify-content: center;
    }
}

/* ─── KÜÇÜK MOBİL (< 640px) ─────────────── */
@media (max-width: 639px) {
    html { font-size: 13px; }

    .btn { height: 36px; font-size: 13px; }
    .btn-lg { height: 42px; }

    .auth-card {
        box-shadow: none;
        border: 1px solid var(--color-border-subtle);
    }
}

/* ─── GENİŞ EKRAN (> 1536px) ────────────── */
@media (min-width: 1536px) {
    .page-content {
        padding: var(--space-3xl) var(--space-4xl);
    }
}