/* =================================================================
   TRENDMETRIK — ORTAK SAYFA KABUĞU (tm-page-shell)
   -----------------------------------------------------------------
   FAZ-0 altyapı katmanı. ADDITIVE — hiçbir mevcut sayfayı değiştirmez;
   yeni sınıflar opt-in'dir. Amaç: tutarlı container/wrapper/başlık/grid/
   tablo yapısı → iç içe container, çift padding, çift header, tutarsız
   max-width sorunlarını tek bir sistemle bitirmek.

   ┌── UYUM ─────────────────────────────────────────────────────────┐
   │ Bu dosya `static/css/v2/tokens.css` (canonical --tm-* token'ları)  │
   │ üzerine kurulur ve `v2/layout.css`'teki mevcut .tm-page /          │
   │ .tm-page-header / .tm-section sistemiyle UYUMLUDUR. Base.html'de   │
   │ v2 bundle'ından (v2/v2.css) SONRA yüklenir → --tm-* token'ları     │
   │ tanımlıdır, kurallar yalnızca ADDITIVE pekiştirme yapar (kutu-     │
   │ modeli, yatay-taşma, min-width) — mevcut görsel stili EZMEZ.       │
   │                                                                    │
   │ Dark/Light: tüm renk/yüzey/kenar değerleri --tm-* token'larından   │
   │ gelir → data-theme="dark" / html.dark-mode otomatik çalışır.       │
   │ tmv2-* isim-alanına DOKUNULMAZ (ayrı namespace).                   │
   └────────────────────────────────────────────────────────────────┘
   ================================================================= */

/* -----------------------------------------------------------------
   Yerel token köprüsü — yeni bir paralel sistem AÇMAZ; mevcut
   canonical --tm-* token'larına bağlanır. tokens.css yoksa (izole
   fixture) fallback literal'ler devreye girer.
   ----------------------------------------------------------------- */
:root {
  /* Tek max-width kaynağı (opt-in --constrained modifier'ında kullanılır) */
  --tm-page-max: var(--tm-content-max, 1280px);

  /* Yatay yan boşluk — sayfa shell'i (.tmv2-page-body) zaten gutter verir;
     .tm-page-content standalone kullanımda bu değeri kullanır. */
  --tm-page-gutter: var(--tm-page-padding-x, 1.5rem);

  /* Dikey ritim */
  --tm-page-section-gap: var(--tm-section-card-gap, var(--tm-section-gap, 1.25rem));
  --tm-page-content-gap: var(--tm-section-card-gap, var(--tm-section-gap, 1.25rem));
  --tm-page-card-gap:    var(--tm-card-gap, 1rem);

  /* Kart grid minimum kolon genişliği (auto-fit minmax) */
  --tm-card-grid-min: 240px;

  /* Yüzey / kenar (tablo/kart sarmalları) */
  --tm-page-surface: var(--tm-surface, #ffffff);
  --tm-page-border:  var(--tm-border, #e4e4e7);
  --tm-page-radius:  var(--tm-radius-card, 12px);
  --tm-page-shadow:  var(--tm-card-shadow, var(--tm-shadow-xs, 0 1px 2px rgba(9,9,11,.04)));
}

/* =================================================================
   .tm-page — sayfa kök konteyneri
   -----------------------------------------------------------------
   v2/layout.css zaten .tm-page için display:flex/column + gap tanımlar.
   Burada YALNIZ ADDITIVE güvenceler: box-sizing, min-width:0 (grid/flex
   taşma engeli) ve yatay-overflow=0. Mevcut layout stilini EZMEZ.
   ================================================================= */
.tm-page {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  /* Yatay taşma güvencesi — hiçbir çocuk viewport'u yatayda taşırmaz. */
  max-width: 100%;
  overflow-x: clip; /* clip: scroll oluşturmaz ama taşmayı keser */
}

/* Kutu-modeli tüm alt öğelere yayılsın (çift padding kaynaklı taşma engeli) */
.tm-page,
.tm-page *,
.tm-page *::before,
.tm-page *::after {
  box-sizing: border-box;
}

/* Opt-in: içeriği tek, tutarlı max-width'e ortala.
   Varsayılan .tm-page shell genişliğini korur (mevcut geniş sayfalar
   etkilenmez); yalnız <div class="tm-page tm-page--constrained"> ekleyen
   sayfa okunabilir max-width'e girer. */
.tm-page--constrained {
  max-width: var(--tm-page-max);
  margin-left: auto;
  margin-right: auto;
}

/* Standalone kullanım (shell gutter'ı olmayan bağlam) için yan boşluk. */
.tm-page--gutter {
  padding-left: var(--tm-page-gutter);
  padding-right: var(--tm-page-gutter);
}

/* =================================================================
   .tm-page-header — tek sayfa başlığı bölgesi
   -----------------------------------------------------------------
   v2/layout.css .tm-page-header'ı (flex/space-between/wrap) + __title /
   __subtitle / __actions / __title-group alt-parçalarını sağlar. Burada
   ADDITIVE: box-sizing + tam genişlik + min-width:0 (uzun başlık taşması).
   Alt-parça tipografisi mevcut layout.css'ten gelir → EZİLMEZ.
   ================================================================= */
.tm-page-header {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.tm-page-header__title-group {
  min-width: 0; /* uzun başlık kesme/wrap için */
}

/* Uzun başlıklar taşmasın (mevcut renk/boyut layout.css'ten). */
.tm-page-header__title {
  overflow-wrap: anywhere;
}

.tm-page-header__actions {
  flex-shrink: 0; /* aksiyon slotu daralmasın, gerekirse alt satıra sarsın */
}

/* Başlık üstü küçük etiket (opsiyonel, macro tm_page_header eyebrow=...) */
.tm-page-header__eyebrow {
  font-size: var(--tm-text-xs, 0.75rem);
  font-weight: var(--tm-weight-semibold, 600);
  letter-spacing: var(--tm-tracking-wide, 0.04em);
  text-transform: uppercase;
  color: var(--tm-text-muted, #71717a);
}

/* Bölüm başlığı sağ aksiyon slotu (macro tm_section actions=...) */
.tm-section__actions {
  display: flex;
  align-items: center;
  gap: var(--tm-space-2, 0.5rem);
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* =================================================================
   .tm-page-content — içerik bölgesi
   -----------------------------------------------------------------
   YENİ. Başlık altındaki içerik akışını dikey ritimle sarar. .tm-page
   zaten kendi gap'ini verir; .tm-page-content, başlık + içerik ayrımını
   netleştirmek isteyen ya da .tm-page dışında kullanan sayfalar için
   bağımsız bir sarmalayıcıdır.
   ================================================================= */
.tm-page-content {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--tm-page-content-gap);
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

/* =================================================================
   .tm-section — bölüm sarmalı
   -----------------------------------------------------------------
   v2/layout.css .tm-section'ı (flex/column + gap) + __header/__title
   sağlar. ADDITIVE: box-sizing + tam genişlik + min-width:0.
   ================================================================= */
.tm-section {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

/* =================================================================
   .tm-card-grid — responsive kart grid
   -----------------------------------------------------------------
   YENİ. auto-fit minmax → kolon sayısı içerik genişliğine göre otomatik;
   mobilde tek kolona düşer. Minimum kolon genişliği --tm-card-grid-min
   ile ayarlanır (varsayılan 240px).
   ================================================================= */
.tm-card-grid {
  box-sizing: border-box;
  display: grid;
  gap: var(--tm-page-card-gap);
  grid-template-columns: repeat(auto-fit, minmax(var(--tm-card-grid-min), 1fr));
  width: 100%;
  min-width: 0;
}

/* min-width ölçek varyantları (opt-in) */
.tm-card-grid--sm { --tm-card-grid-min: 180px; }
.tm-card-grid--lg { --tm-card-grid-min: 320px; }

/* Çok dar viewport'ta minmax alt-sınırı taşmasın → garantili tek kolon. */
@media (max-width: 480px) {
  .tm-card-grid {
    grid-template-columns: 1fr;
  }
}

/* =================================================================
   .tm-table-shell — tablo sarmalı
   -----------------------------------------------------------------
   YENİ. Geniş tabloları yatayda güvenli scroll'a alır (overflow-x:auto),
   sayfayı yatayda TAŞIRMAZ. Opsiyonel yapışkan başlık modifier'ı.
   ================================================================= */
.tm-table-shell {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  /* iOS momentum scroll */
  -webkit-overflow-scrolling: touch;
  background: var(--tm-page-surface);
  border: 1px solid var(--tm-page-border);
  border-radius: var(--tm-page-radius);
  box-shadow: var(--tm-page-shadow);
}

/* İçerideki tablo sarmalayıcıyı doldursun; küçük ekranda min-width ile
   scroll tetiklensin (hücreler ezilmesin). */
.tm-table-shell > table {
  width: 100%;
  border-collapse: collapse;
}

/* Opsiyonel: yapışkan başlık — dikey scroll'da th sabit kalır.
   max-height sayfa tarafından belirlenir (örn. style="max-height:480px"). */
.tm-table-shell--sticky {
  overflow-y: auto;
}

.tm-table-shell--sticky > table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--tm-page-surface);
}

/* Kenarsız/gölgesiz varyant (kart içine gömülü tablo). */
.tm-table-shell--flush {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

/* =================================================================
   Genel yatay-taşma güvenceleri (yalnız yeni namespace kapsamında)
   ================================================================= */
.tm-page img,
.tm-page video,
.tm-page canvas,
.tm-page-content img,
.tm-page-content video,
.tm-page-content canvas {
  max-width: 100%;
  height: auto;
}