/**
 * KurumsalScript - Grid & Layout Sistemi
 */

/* Konteyner */
.konteyner {
    width: 100%;
    max-width: var(--konteyner-max);
    margin-inline: auto;
    padding-inline: var(--konteyner-padding);
}

.konteyner-dar  { max-width: 860px; }
.konteyner-genis { max-width: 1440px; }
.konteyner-tam  { max-width: 100%; }

/* Temel grid */
.grid { display: grid; }

.grid-2 { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-8); }
.grid-3 { grid-template-columns: repeat(3, 1fr); gap: var(--spacing-8); }
.grid-4 { grid-template-columns: repeat(4, 1fr); gap: var(--spacing-8); }
.grid-5 { grid-template-columns: repeat(5, 1fr); gap: var(--spacing-6); }
.grid-6 { grid-template-columns: repeat(6, 1fr); gap: var(--spacing-6); }

/* Auto-fit responsive gridler */
.grid-auto-sm { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-6); }
.grid-auto-md { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--spacing-8); }
.grid-auto-lg { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--spacing-8); }

/* Flexbox yardımcıları */
.flex       { display: flex; }
.flex-col   { flex-direction: column; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.items-end    { align-items: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.flex-wrap  { flex-wrap: wrap; }
.gap-2  { gap: var(--spacing-2); }
.gap-4  { gap: var(--spacing-4); }
.gap-6  { gap: var(--spacing-6); }
.gap-8  { gap: var(--spacing-8); }
.gap-12 { gap: var(--spacing-12); }
.flex-1 { flex: 1; }

/* Aspect ratio yardımcıları */
.aspect-16-9  { aspect-ratio: 16 / 9; overflow: hidden; }
.aspect-4-3   { aspect-ratio: 4 / 3; overflow: hidden; }
.aspect-1-1   { aspect-ratio: 1; overflow: hidden; }
.aspect-3-4   { aspect-ratio: 3 / 4; overflow: hidden; }

.aspect-16-9 img, .aspect-4-3 img, .aspect-1-1 img, .aspect-3-4 img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--gecis-yavas);
}

/* Section padding */
.bolum           { padding-block: var(--spacing-24); }
.bolum-sm        { padding-block: var(--spacing-16); }
.bolum-lg        { padding-block: var(--spacing-32); }
.bolum-basi      { margin-bottom: var(--spacing-16); }
.bolum-basi-sm   { margin-bottom: var(--spacing-10); }

/* 2 kolon layout (içerik + sidebar) */
.layout-2kolon {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--spacing-12);
    align-items: start;
}

.layout-2kolon-ters {
    grid-template-columns: 340px 1fr;
}

/* Responsive */
@media (max-width: 1200px) {
    .grid-4 { grid-template-columns: repeat(3, 1fr); }
    .grid-5, .grid-6 { grid-template-columns: repeat(3, 1fr); }
    .layout-2kolon, .layout-2kolon-ters { grid-template-columns: 1fr; }
}

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

@media (max-width: 768px) {
    :root {
        --konteyner-padding: 1rem;
        --spacing-24: 4rem;
        --spacing-20: 3rem;
        --spacing-16: 2.5rem;
    }
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .grid-5, .grid-6 { grid-template-columns: repeat(2, 1fr); }
    .bolum { padding-block: var(--spacing-16); }
}

@media (max-width: 480px) {
    .grid-5, .grid-6 { grid-template-columns: 1fr; }
    .bolum { padding-block: var(--spacing-12); }
}