@media (max-width: 1200px) {

    .desktop-nav {
        gap: 20px;
    }

    .search-box {
        width: 220px;
    }

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

    .manhwa-cover {
        height: 230px;
    }
}


@media (max-width: 800px) {

    /* =========================================================
       MOBILE HEADER
       ========================================================= */

    .site-header {
        display: none;
    }


    /* =========================================================
       MOBILE BODY
       ========================================================= */

    body {
        padding-bottom: 88px;
    }


    /* =========================================================
       MOBILE DRAWER
       ========================================================= */

    .mobile-drawer {
        display: flex;
        position: fixed;
        top: 0;
        right: -300px;
        width: 290px;
        height: 100vh;
        background: #0b0f14;
        z-index: 200;
        padding: 22px;
        flex-direction: column;
        gap: 5px;
        border-left: 1px solid var(--border);
        transition: 0.25s;
    }

        .mobile-drawer.open {
            right: 0;
        }

    .drawer-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 18px;
    }

    .drawer-close {
        background: transparent;
        border: 0;
        color: #fff;
        font-size: 22px;
    }

    .mobile-drawer > a {
        padding: 13px;
        color: #ddd;
    }

    .drawer-auth {
        display: flex;
        gap: 8px;
        margin-top: 12px;
    }

        .drawer-auth button {
            flex: 1;
            height: 40px;
            border: 1px solid #2b3139;
            border-radius: 8px;
            background: #171c23;
            color: #fff;
        }

            .drawer-auth button:last-child {
                background: var(--purple);
            }


    /* =========================================================
       HOME LAYOUT
       ========================================================= */

    .home-layout {
        display: flex;
        flex-direction: column;
        padding: 12px 14px 20px;
    }

    .main-column {
        order: 1;
        width: 100%;
    }

    .sidebar-column {
        display: block;
        order: 2;
        width: 100%;
    }


    /* =========================================================
       HERO
       ========================================================= */

    .hero {
        height: 450px;
    }

    .hero-content {
        right: 30px;
        left: 30px;
        width: auto;
        top: 38px;
    }

    .hero h1 {
        font-size: 29px;
    }

    .hero p {
        font-size: 11px;
    }

    .hero-arrow {
        display: none;
    }

    .hero-shade {
        background: linear-gradient(180deg, #070b10, #070b1050 38%, #070b10e8);
    }


    /* =========================================================
       MANHWA GRID
       ========================================================= */

    .manhwa-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 9px;
    }

    .manhwa-cover {
        height: 190px;
    }


    /* =========================================================
       MOBILE BOTTOM NAV
       ========================================================= */

    /*
       استایل اصلی Mobile Bottom Navigation
       در فایل خودش قرار دارد.
       اینجا فقط فضای لازم برای جلوگیری از
       قرار گرفتن محتوا زیر نوار ایجاد می‌شود.
    */
}


@media (max-width: 520px) {

    /* =========================================================
       HERO
       ========================================================= */

    .hero {
        height: 440px;
    }

        .hero h1 {
            font-size: 27px;
        }


    /* =========================================================
       MANHWA GRID
       ========================================================= */

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

    .manhwa-cover {
        height: 240px;
    }


    /* =========================================================
       CHAPTER ROW
       ========================================================= */

    .chapter-row {
        padding: 10px 12px;
        gap: 10px;
    }

        .chapter-row > img {
            width: 100px;
            height: 67px;
        }


    /* =========================================================
       VISIT CARD
       ========================================================= */

    .visit-card {
        padding: 10px;
        gap: 10px;
    }

        .visit-card > img {
            width: 82px;
            height: 82px;
        }

    .visit-title-row h3 {
        font-size: 12px;
    }

    .visit-chapter {
        display: none;
    }

    .visit-progress {
        margin: 10px 0 7px;
    }

    .visit-bottom {
        font-size: 8px;
    }

        .visit-bottom button {
            font-size: 9px;
        }

    .last-read-content > img {
        width: 62px;
        height: 84px;
    }
}


@media (max-width: 360px) {

    /* =========================================================
       SMALL PHONES
       ========================================================= */

    .hero {
        height: 420px;
    }

        .hero h1 {
            font-size: 25px;
        }

    .manhwa-grid {
        gap: 8px;
    }

    .manhwa-cover {
        height: 210px;
    }
}