/* =========================================================
   TMV2 - 10 RESPONSIVE.CSS
   ---------------------------------------------------------
   TR:
   Bu dosya tüm sistemin mobil ve tablet uyumunu sağlar.
   Navbar, grid, font, admin panel ve genel layout burada
   responsive hale getirilir.

   EN:
   This file handles responsiveness for mobile and tablet devices.
   Navbar, grid, typography, admin panel, and layout are adapted here.

   KURAL / RULE:
   - Sadece responsive düzenleme yapılır
   - Yeni component yazılmaz
========================================================= */


/* =========================================================
   LARGE DEVICES (≤1200px)
========================================================= */

@media (max-width: 1200px) {

    /* GRID */
    .tmv2-grid-4 {
        grid-template-columns: repeat(3, 1fr);
    }

    /* ADMIN FILTER */
    .tmv2-admin-filter {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* =========================================================
   TABLET DEVICES (≤992px)
========================================================= */

@media (max-width: 992px) {

    /* NAVBAR */
    .tmv2-home-navbar {
        padding: var(--tmv2-space-3);
    }

        .tmv2-home-navbar .nav-link {
            padding: .5rem .75rem;
        }

    /* HERO */
    .tmv2-hero {
        padding-block: var(--tmv2-space-12);
        text-align: center;
    }

    .tmv2-hero-layout {
        grid-template-columns: 1fr;
    }

    .tmv2-hero-title {
        font-size: 2.2rem;
    }

    /* SLIDER */
    .tmv2-slider-item {
        grid-template-columns: 1fr;
    }

    /* GRID */
    .tmv2-grid-3,
    .tmv2-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* GALLERY */
    .tmv2-gallery {
        grid-template-columns: repeat(2, 1fr);
    }

    /* SIDEBAR */
    .tmv2-sidebar-layout {
        grid-template-columns: 1fr;
    }

    /* ADMIN */
    .tmv2-admin-shell {
        grid-template-columns: 1fr;
    }

    .tmv2-admin-sidebar {
        display: none;
    }

    .tmv2-admin-mobilebar {
        display: flex;
    }

    .tmv2-admin-main {
        padding: var(--tmv2-space-4);
    }

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


/* =========================================================
   MOBILE DEVICES (≤576px)
========================================================= */

@media (max-width: 576px) {

    /* TYPOGRAPHY */
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.75rem;
    }

    h3 {
        font-size: 1.5rem;
    }

    .tmv2-title {
        font-size: 1.8rem;
    }

    .tmv2-subtitle {
        font-size: 1.1rem;
    }

    /* SECTION */
    .tmv2-section {
        padding-block: var(--tmv2-space-10);
    }

    /* HERO */
    .tmv2-hero-title {
        font-size: 1.8rem;
    }

    .tmv2-hero-desc {
        font-size: var(--tmv2-font-base);
    }

    /* CARD */
    .tmv2-card-body {
        padding: var(--tmv2-space-4);
    }

    /* NEWS */
    .tmv2-news-title {
        font-size: var(--tmv2-font-lg);
    }

    /* GALLERY */
    .tmv2-gallery {
        grid-template-columns: 1fr;
    }

    /* DETAIL */
    .tmv2-detail-cover {
        height: 240px;
    }

    .tmv2-detail-body {
        padding: var(--tmv2-space-4);
    }

    /* CTA */
    .tmv2-cta {
        padding: var(--tmv2-space-6);
    }

    /* FOOTER */
    .tmv2-footer-top {
        padding: var(--tmv2-space-10) 0;
    }

    /* TABLE */
    .tmv2-table th,
    .tmv2-table td {
        padding: var(--tmv2-space-3);
        font-size: var(--tmv2-font-sm);
    }

    /* PAGINATION */
    .tmv2-page-link {
        width: 36px;
        height: 36px;
    }

    /* BUTTON */
    .tmv2-btn {
        width: 100%;
        justify-content: center;
    }
}


/* =========================================================
   EXTRA SMALL DEVICES (≤400px)
========================================================= */

@media (max-width: 400px) {

    .tmv2-hero-title {
        font-size: 1.5rem;
    }

    .tmv2-title {
        font-size: 1.5rem;
    }

    .tmv2-btn {
        font-size: .85rem;
        padding: .65rem 1rem;
    }
}