/**
 * Layout Essentials — SAHA
 *
 * Figma Grid Layout'tan çıkarılan gerçek değerler.
 * theme.json otomatik üretir:
 *   --wp--style--global--content-size: 898px
 *   --wp--style--global--wide-size: 1324px
 *
 * @package Saha
 */

:root {
    /* ========================
       Container
       ======================== */
    --saha-container-max: 1440px;
    --saha-container-padding: 43px;
    --saha-container-content: 898px;

    /* ========================
       Grid Gaps — Figma gerçek değerler
       ======================== */
    --saha-grid-gap: 30px;          /* default gap (3-column grid) */
    --saha-grid-gap-dense: 24px;    /* 4-column grid (dense) */

    /* ========================
       Grid Columns
       ======================== */

    /* 3-Column Grid: Card 421px + Gap 30px */
    --saha-grid-3col-card: 421px;

    /* 4-Column Grid: Column ~300px + Gap 24px */
    --saha-grid-4col-card: 300px;

    /* 2-Column Structure: Sidebar 1fr + Content 3fr */
    --saha-grid-sidebar: 1fr;
    --saha-grid-content: 3fr;
\n    /* ========================
       Z-Index Scale
       ======================== */
    --saha-z-header: 100;
    --saha-z-mega-menu: 200;
}

/* ================================
   Reusable Grid Classes
   ================================ */

.saha-grid-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--saha-grid-gap);
}

.saha-grid-4col {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--saha-grid-gap-dense);
}

.saha-grid-2col {
    display: grid;
    grid-template-columns: var(--saha-grid-sidebar) var(--saha-grid-content);
    gap: var(--saha-grid-gap);
}

.saha-container {
    max-width: var(--saha-container-max);
    margin-inline: auto;
    padding-inline: var(--saha-container-padding);
}

.saha-container--narrow {
    max-width: var(--saha-container-content);
    margin-inline: auto;
    padding-inline: var(--saha-container-padding);
}

/* ================================
   Responsive — match header padding
   ================================ */

@media (max-width: 767px) {
    :root {
        --saha-container-padding: 20px;
    }
}