/* ==========================================================================
   responsive.css — Tablet ve mobil uyumluluk
   ========================================================================== */

/* Geniş masaüstü — içerik ortalanmış kalır */
@media (min-width: 1600px) {
    .app-content {
        margin: 0 auto;
    }
}

/* Orta masaüstü / küçük dizüstü */
@media (max-width: 1200px) {
    .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* Tablet */
@media (max-width: 992px) {
    :root {
        --sidebar-width: 220px;
    }

    /* Sol menü kayar, hamburger ile açılır */
    .sidebar {
        transform: translateX(-100%);
        box-shadow: var(--shadow-modal);
    }

    .sidebar.is-open {
        transform: translateX(0);
    }

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

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

    .animal-detail {
        grid-template-columns: 1fr;
    }

    .animal-detail__media img {
        max-width: 160px;
    }
}

/* Mobil */
@media (max-width: 640px) {
    .app-content {
        padding: 14px;
    }

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

    /* Üst çubuk sadeleşir */
    .topbar {
        padding: 0 10px;
    }

    .topbar__brand-text {
        font-size: 15px;
    }

    .topbar__user-meta {
        display: none;
    }

    .topbar__right .icon-btn--optional {
        display: none;
    }

    /* Modal ekran genişliğinin yaklaşık %94'ünü kaplar
       (overlay dolgusu 3% + modal 100% = ~%94 görünür genişlik) */
    .modal-overlay {
        padding: 12px 3%;
    }

    .modal {
        max-width: 100%;
    }

    .toast-container {
        left: 10px;
        right: 10px;
        max-width: none;
    }

    h1 { font-size: 18px; }
}

/* Küçük mobil */
@media (max-width: 380px) {
    .topbar__brand-text {
        display: none;
    }
}