/* ══════════════════════════════════════════════════════════════════
   GTS RESPONSIVE — Ortak akışkan temel
   Amaç: tek tek cihaz için CSS yazmadan tüm ekran boyutlarında
   (küçük telefon → geniş masaüstü) tutarlı, taşmasız layout.

   STANDART KIRILIM SİSTEMİ (Bootstrap 5 ile hizalı — tüm sayfalarda bunu kullan):
     ≤575.98px   telefon (küçük)
     576–767.98  telefon (büyük) / phablet
     768–991.98  tablet portre (iPad dahil)      ← eskiden yetim bant
     992–1199.98 tablet yatay / küçük laptop      ← eskiden yetim bant
     ≥1200px     masaüstü
   Kural: yeni @media eklerken bu eşikleri kullan (768/992/1200);
   keyfi 900/1040/1300 gibi sayılar KULLANMA.
   ══════════════════════════════════════════════════════════════════ */

:root {
    /* Konteyner */
    --gts-container-max: 1280px;
    --gts-container-pad: clamp(16px, 4vw, 32px); /* kenar boşluğu ekranla ölçeklenir */

    /* Akışkan boşluk (spacing) ölçeği */
    --gts-gap-xs: clamp(6px, 1.2vw, 10px);
    --gts-gap-sm: clamp(8px, 1.8vw, 14px);
    --gts-gap: clamp(12px, 2.5vw, 24px);
    --gts-gap-lg: clamp(16px, 3vw, 32px);
    --gts-section-y: clamp(40px, 7vw, 96px); /* bölüm dikey boşluğu */

    /* Akışkan tipografi ölçeği — clamp(min, tercih, maks) */
    --gts-fs-h1: clamp(1.9rem, 1.15rem + 3.3vw, 3.25rem);
    --gts-fs-h2: clamp(1.5rem, 1.05rem + 2.0vw, 2.25rem);
    --gts-fs-h3: clamp(1.2rem, 1.0rem + 0.9vw, 1.6rem);
    --gts-fs-h4: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
    --gts-fs-lead: clamp(1rem, 0.94rem + 0.5vw, 1.2rem);

    /* Kart minimum genişliği (auto-fit ızgaralar için) */
    --gts-card-min: 280px;
}

/* ── Global taşma korumaları ──────────────────────────────────────
   Görseller/medya konteynerini asla aşmaz. (Leaflet harita karoları
   kendi mutlak boyutlarını kullandığı için hariç tutulur.) */
img,
video,
canvas {
    max-width: 100%;
    height: auto;
}

.leaflet-container img,
.leaflet-pane img,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-image-layer {
    max-width: none;
    height: auto;
}

iframe {
    max-width: 100%;
}

/* Uzun kırılamayan metin/URL taşmayı tetiklemesin */
.gts-break-word {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ── Ortak akışkan konteyner ──────────────────────────────────────
   Sabit genişlikli (width:1300px, min-width:1200px) gövde
   sarmalıcılarının yerine geç. */
.gts-container {
    width: 100%;
    max-width: var(--gts-container-max);
    margin-inline: auto;
    padding-inline: var(--gts-container-pad);
}

/* ── Cihaz-bağımsız otomatik-saran kart ızgarası ──────────────────
   Sabit kolon sayısı yerine: ekran daraldıkça kolon sayısı kendi
   kendine azalır. minmax(min(100%,…)) küçük ekranda taşmayı önler. */
.gts-autogrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--gts-card-min)), 1fr));
    gap: var(--gts-gap-lg);
}

.gts-autogrid.gts-autogrid-sm { --gts-card-min: 200px; }
.gts-autogrid.gts-autogrid-lg { --gts-card-min: 340px; }

/* ── Akışkan başlık yardımcı sınıfları (opt-in) ───────────────────
   Sabit px başlıkları bunlarla değiştir; ekranla pürüzsüz ölçeklenir. */
.gts-fluid-h1 { font-size: var(--gts-fs-h1); line-height: 1.1; }
.gts-fluid-h2 { font-size: var(--gts-fs-h2); line-height: 1.15; }
.gts-fluid-h3 { font-size: var(--gts-fs-h3); line-height: 1.2; }
.gts-fluid-h4 { font-size: var(--gts-fs-h4); line-height: 1.25; }
.gts-fluid-lead { font-size: var(--gts-fs-lead); line-height: 1.5; }

/* ── Yatay taşan içeriği (geniş tablo/şerit) güvenle kaydır ───────
   Kesmek yerine kendi içinde yatay scroll ver. */
.gts-scroll-x {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Bootstrap tabloları dar ekranda taşırsa saran yardımcı */
.gts-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.gts-table-wrap > table { min-width: 0; }

/* ── İki-kolon gövde deseni (içerik + sidebar) ────────────────────
   Varsayılan tek kolon (mobil-öncelik); yalnız geniş ekranda ayrılır.
   Sayfalar --gts-aside-w ile sidebar genişliğini ayarlayabilir. */
.gts-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gts-gap-lg);
    align-items: start;
}
@media (min-width: 992px) {
    .gts-split {
        grid-template-columns: minmax(0, 1fr) var(--gts-aside-w, 360px);
    }
    .gts-split.gts-split-left {
        grid-template-columns: var(--gts-aside-w, 300px) minmax(0, 1fr);
    }
}