/* =========================================================
   TMV2 - 04 LAYOUT.CSS
   ---------------------------------------------------------
   TR:
   Bu dosya sayfa iskeletini oluşturur.
   Container, grid, section ve sayfa düzenleri burada tanımlanır.

   EN:
   This file defines the page structure.
   Container, grid system, sections, and page layouts are handled here.

   KURAL / RULE:
   - Burada component yok
   - Sadece layout (iskelet) var
========================================================= */


/* =========================================================
   CONTAINER
   ---------------------------------------------------------
   TR: Sayfanın maksimum genişliğini belirler
   EN: Defines max width of the page
========================================================= */

.tmv2-container {
    width: min(100% - 32px, var(--tmv2-container));
    margin-inline: auto;
}


/* =========================================================
   SECTION
========================================================= */

.tmv2-section {
    padding-block: var(--tmv2-space-16);
    background: var(--section-bg);
}

.tmv2-section-sm {
    padding-block: var(--tmv2-space-10);
}

.tmv2-section-lg {
    padding-block: var(--tmv2-space-20);
}


/* =========================================================
   SECTION HEADER
========================================================= */

.tmv2-section-head {
    max-width: 720px;
    margin-bottom: var(--tmv2-space-10);
}

.tmv2-section-title {
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    font-weight: var(--tmv2-weight-extrabold);
    color: var(--section-title);
}

.tmv2-section-desc {
    font-size: var(--tmv2-font-lg);
    color: var(--section-text);
}


/* =========================================================
   GRID SYSTEM
   ---------------------------------------------------------
   TR: Responsive grid yapısı
   EN: Responsive grid system
========================================================= */

.tmv2-grid {
    display: grid;
    gap: var(--tmv2-space-6);
}

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

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

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


/* =========================================================
   RESPONSIVE GRID
========================================================= */

@media (max-width: 992px) {
    .tmv2-grid-3,
    .tmv2-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .tmv2-grid-2,
    .tmv2-grid-3,
    .tmv2-grid-4 {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   PAGE STRUCTURE
========================================================= */

.tmv2-page {
    background: var(--page-bg);
}


/* =========================================================
   PAGE HEADER
========================================================= */

.tmv2-page-header {
    padding: var(--tmv2-space-12) 0;
    background: var(--page-header-bg);
    border-bottom: 1px solid var(--page-header-border);
}

.tmv2-page-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: var(--tmv2-weight-extrabold);
    color: var(--page-title);
}

.tmv2-page-desc {
    font-size: var(--tmv2-font-lg);
    color: var(--page-desc);
}


/* =========================================================
   PAGE CONTENT
========================================================= */

.tmv2-page-content {
    padding-block: var(--tmv2-space-16);
}


/* =========================================================
   SIDEBAR LAYOUT
   ---------------------------------------------------------
   TR: Blog / detay sayfaları için sağ/sol kolon
   EN: Sidebar layout for blog/detail pages
========================================================= */

.tmv2-sidebar-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--tmv2-space-8);
}

@media (max-width: 992px) {
    .tmv2-sidebar-layout {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   SIDEBAR
========================================================= */

.tmv2-sidebar {
    background: var(--page-sidebar-bg);
    border: 1px solid var(--page-sidebar-border);
    border-radius: var(--tmv2-radius-xl);
    padding: var(--tmv2-space-6);
}


/* =========================================================
   STICKY SIDEBAR
========================================================= */

.tmv2-sticky {
    position: sticky;
    top: 100px;
}


/* =========================================================
   DETAIL PAGE LAYOUT
========================================================= */

.tmv2-detail-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--tmv2-space-8);
}


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

.tmv2-hero-layout {
    display: grid;
    align-items: center;
    min-height: 600px;
    gap: var(--tmv2-space-10);
}


/* =========================================================
   FLEX HELPERS (LAYOUT LEVEL)
========================================================= */

.tmv2-flex {
    display: flex;
}

.tmv2-flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tmv2-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}


/* =========================================================
   GAP HELPERS
========================================================= */

.tmv2-gap-2 {
    gap: var(--tmv2-space-2);
}

.tmv2-gap-4 {
    gap: var(--tmv2-space-4);
}

.tmv2-gap-6 {
    gap: var(--tmv2-space-6);
}

.tmv2-gap-8 {
    gap: var(--tmv2-space-8);
}