/* ============================================================================
   BUSTOP TRANSIT GRID — COMPONENT LAYER (v3)
   ----------------------------------------------------------------------------
   Namespace: .tg-*   Bagimlilik: bustop-transit-grid.tokens.css

   BU DOSYADA HAM DEGER YOKTUR.
   Renk, olcu, yaricap, sure — hepsi --tg-* token'indan okunur. Tek istisna:
   0, 100%, 50% gibi konumsal degerler ve `1px` hairline hesaplari.

   URETIM ETKISI: sifir. Hicbir uretim sinifi (.card, .btn, .listing-card,
   .bt-*, .mk-*) bu dosyada gecmiyor; yalniz .tg-* tanimlaniyor.
   ========================================================================== */

/* == 0. KOK ================================================================
   .tg-root tasiyan her kap bu dilin icine girer. Global reset YAPILMAZ —
   boylece dosya uretim sayfasina yuklense bile disari sizmaz. */
.tg-root {
  font-family: var(--tg-font-ui);
  font-size: var(--tg-fs-body);
  line-height: var(--tg-lh-body);
  color: var(--tg-ink);
  background: var(--tg-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;   /* fiyat/KM kolonlari kaymasin */
}
.tg-root *, .tg-root *::before, .tg-root *::after { box-sizing: border-box; }
.tg-root img, .tg-root svg, .tg-root video { max-width: 100%; display: block; }

/* Odak halkasi — TEK bir tanim. Her bilesende yeniden yazilmaz. */
.tg-root :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--tg-stroke) solid var(--tg-focus);
  outline-offset: 2px;
  border-radius: var(--tg-r-sm);
}

/* == 1. TIPOGRAFI ROLLERI ==================================================
   Ekran kendi font-size'ini SECMEZ, rol secer. Yeni bir boyut gerekiyorsa
   once "hangi rol eksik" sorusu sorulur. */
.tg-display  { font-size: var(--tg-fs-display); line-height: var(--tg-lh-display); font-weight: var(--tg-fw-bold); letter-spacing: -.02em; margin: 0; }
.tg-screen   { font-size: var(--tg-fs-screen);  line-height: var(--tg-lh-screen);  font-weight: var(--tg-fw-bold); letter-spacing: -.015em; margin: 0; }
.tg-section  { font-size: var(--tg-fs-section); line-height: var(--tg-lh-section); font-weight: var(--tg-fw-bold); letter-spacing: -.01em; margin: 0; }
.tg-cardtitle{ font-size: var(--tg-fs-card);    line-height: var(--tg-lh-card);    font-weight: var(--tg-fw-bold); letter-spacing: -.005em; margin: 0; }
.tg-body     { font-size: var(--tg-fs-body);    line-height: var(--tg-lh-body);    font-weight: var(--tg-fw-regular); margin: 0; }
.tg-body-strong { font-size: var(--tg-fs-body); line-height: var(--tg-lh-body);    font-weight: var(--tg-fw-semi); margin: 0; }
.tg-meta     { font-size: var(--tg-fs-meta);    line-height: var(--tg-lh-meta);    font-weight: var(--tg-fw-medium); color: var(--tg-ink-secondary); margin: 0; }
.tg-caption  { font-size: var(--tg-fs-caption); line-height: var(--tg-lh-caption); font-weight: var(--tg-fw-medium); color: var(--tg-ink-secondary); margin: 0; }

/* Fiyat — ekrandaki en yuksek sesli oge. Negatif harf araligi uzun TL
   tutarlarini (4.200.000) tek blok halinde okutur, dagitmaz. */
.tg-price    { font-size: var(--tg-fs-price); line-height: var(--tg-lh-price); font-weight: var(--tg-fw-bold); letter-spacing: -.02em; color: var(--tg-ink); margin: 0; }
.tg-price--compact { font-size: var(--tg-fs-section); line-height: var(--tg-lh-section); }

/* Metrik — BARLOW CONDENSED. YALNIZ sayisal tasima bilgisi. Paragraf DEGIL.
   Sikistirilmis genislik yan yana dizilen yil/KM/koltuk degerlerini ayni
   optik ritimde tutar; bu, arac bilgi panosu hissinin kaynagidir. */
.tg-metric   { font-family: var(--tg-font-numeric); font-size: var(--tg-fs-metric); line-height: var(--tg-lh-metric); font-weight: var(--tg-fw-semi); letter-spacing: .01em; font-variant-numeric: tabular-nums; margin: 0; }

.tg-ink-2 { color: var(--tg-ink-secondary); }
.tg-ink-3 { color: var(--tg-ink-muted); }

/* == 2. IKON ===============================================================
   Tek aile: 24 kutu, 2px cizgi, yuvarlak uc, yuvarlak birlesim.
   Aktif durum DOLGU ile de anlatilir — yalniz renkle degil (renk korlugu). */
/* CIZIM OZELLIKLERI KOKTE TANIMLANIR — icerideki sekillere DEGIL.
   NEDEN: `<use>` bir golge agac (shadow tree) olusturur; `.tg-icon [data-stroke]`
   gibi seciciler oraya ULASMAZ (ikonlar siyah blok olarak cizilir). Ama
   `fill`, `stroke`, `stroke-width` KALITILAN ozelliklerdir ve golge agaca
   gecer. Bu yuzden aile kurallari svg kokunde durur, semboldeki sekiller de
   kendi ozniteligini yazmadigi surece bunlari devralir. */
.tg-icon {
  display: block; width: var(--tg-space-6); height: var(--tg-space-6);
  flex: none; color: inherit;
  fill: none; stroke: currentColor; stroke-width: var(--tg-stroke);
  stroke-linecap: round; stroke-linejoin: round;
}
/* DIKKAT: burada `svg.tg-icon` YAZILMAZ. Eleman+sinif secicisi (0,1,1)
   boyut siniflarini (0,1,0) ezer ve ikonlar kabi doldurur. Yalniz sarmalayici
   icindeki svg gerdirilir; `<svg class="tg-icon">` kendi olcusunu korur. */
.tg-icon > svg { width: 100%; height: 100%; display: block; }
.tg-icon--sm { width: var(--tg-space-5); height: var(--tg-space-5); }
.tg-icon--lg { width: var(--tg-space-8); height: var(--tg-space-8); }
/* Dolu (secili) durum: govde de boyanir. Kalitim yoluyla golge agaca gecer.
   `data-fill` tasiyan detaylar sembolde `fill="currentColor"` OZNITELIGI
   tasir; oznitelik kalitimi ezer, yani nokta/merkez her durumda dolu kalir. */
.tg-icon.is-filled { fill: currentColor; }

/* == 3. ROTA MOTIFI (imza) =================================================
   route line + stop dot. Ilerleme, adim, yolculuk ve bolum hiyerarsisi
   AYNI hatti kullanir — bu tekrar, kimligi kuran seydir.
   Dekoratif kullanilmaz: bir sey sirali degilse ray cizilmez. */
.tg-rail { position: relative; padding-left: var(--tg-space-6); }
.tg-rail::before {
  content: ""; position: absolute; left: calc(var(--tg-stop-size) / 2 - var(--tg-rail-w) / 2);
  top: var(--tg-space-2); bottom: var(--tg-space-2);
  width: var(--tg-rail-w); background: var(--tg-rail-color); border-radius: var(--tg-rail-w);
}
.tg-stop { position: relative; padding-bottom: var(--tg-space-5); }
.tg-stop:last-child { padding-bottom: 0; }
.tg-stop::before {
  content: ""; position: absolute; left: calc(-1 * var(--tg-space-6) + 0px);
  top: var(--tg-space-1); width: var(--tg-stop-size); height: var(--tg-stop-size);
  border-radius: var(--tg-r-pill);
  background: var(--tg-canvas); border: var(--tg-rail-w) solid var(--tg-rail-color);
}
.tg-stop.is-done::before    { background: var(--tg-rail-active); border-color: var(--tg-rail-active); }
.tg-stop.is-current::before { background: var(--tg-surface); border-color: var(--tg-rail-active); box-shadow: 0 0 0 var(--tg-stop-ring) var(--tg-brand-soft); }
.tg-stop__title { font-size: var(--tg-fs-card); line-height: var(--tg-lh-card); font-weight: var(--tg-fw-bold); }
.tg-stop.is-todo .tg-stop__title { color: var(--tg-ink-secondary); font-weight: var(--tg-fw-medium); }

/* Yatay ray — bolum basligi ve kirilma yolu (breadcrumb) icin. */
.tg-railhead { display: flex; align-items: center; gap: var(--tg-space-3); }
.tg-railhead::before {
  content: ""; width: var(--tg-stop-size); height: var(--tg-stop-size); flex: none;
  border-radius: var(--tg-r-pill); background: var(--tg-rail-active);
}
.tg-railhead::after { content: ""; flex: 1; height: var(--tg-rail-w); background: var(--tg-divider); border-radius: var(--tg-rail-w); }

/* == 4. YUZEY / KART =======================================================
   VARSAYILAN: duz yuzey + 1px kenarlik. GOLGE YOK.
   Golge yalniz fiziksel olarak yuzen ogede (.tg-sheet, .tg-modal, .tg-fab). */
.tg-surface { background: var(--tg-surface); border: var(--tg-hairline) solid var(--tg-border); border-radius: var(--tg-r-lg); }
.tg-card    { background: var(--tg-surface); border: var(--tg-hairline) solid var(--tg-border); border-radius: var(--tg-r-lg); overflow: hidden; }
.tg-card__body { padding: var(--tg-space-4); }
.tg-panel   { background: var(--tg-surface-raised); border: var(--tg-hairline) solid var(--tg-border); border-radius: var(--tg-r-md); padding: var(--tg-space-4); }

/* == 5. BUTON AILESI =======================================================
   ALTI degil BES + bir yuzen. Hepsi ayni yukseklik ritmini ve ayni yaricapi
   paylasir; fark VURGU'dur, sekil degil. "Her buton hap" reddedildi:
   hap bicimi cip ve filtre gibi SECIM kontrollerine ayrildi. */
.tg-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--tg-space-2);
  min-height: var(--tg-tap-min); padding: 0 var(--tg-space-5);
  font-family: var(--tg-font-ui); font-size: var(--tg-fs-button);
  line-height: var(--tg-lh-button); font-weight: var(--tg-fw-bold);
  border-radius: var(--tg-r-md); border: var(--tg-hairline) solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--tg-dur-state) var(--tg-ease),
              border-color var(--tg-dur-state) var(--tg-ease),
              color var(--tg-dur-state) var(--tg-ease),
              transform var(--tg-dur-press) var(--tg-ease);
}
.tg-btn:active { transform: scale(.98); }   /* 90ms basma geri bildirimi */
.tg-btn[disabled], .tg-btn.is-disabled { opacity: .45; pointer-events: none; }
.tg-btn .tg-icon { width: var(--tg-space-5); height: var(--tg-space-5); }

.tg-btn--primary   { background: var(--tg-brand); color: var(--tg-on-brand); }
.tg-btn--primary:hover  { background: var(--tg-brand-strong); }
.tg-btn--secondary { background: var(--tg-surface); color: var(--tg-brand); border-color: var(--tg-brand-border); }
.tg-btn--secondary:hover{ background: var(--tg-brand-soft); border-color: var(--tg-brand); }
.tg-btn--quiet     { background: transparent; color: var(--tg-ink-secondary); }
.tg-btn--quiet:hover    { background: var(--tg-surface-raised); color: var(--tg-ink); }
.tg-btn--danger    { background: var(--tg-danger); color: var(--tg-on-danger); }
.tg-btn--danger:hover   { filter: brightness(.94); }
.tg-btn--block     { display: flex; width: 100%; }
.tg-btn--sm        { min-height: var(--tg-tap-compact); padding: 0 var(--tg-space-4); font-size: var(--tg-fs-meta); }

/* Ikon buton — kare, etiketsiz. aria-label ZORUNLU. */
.tg-btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tg-tap-min); height: var(--tg-tap-min);
  border-radius: var(--tg-r-md); border: 0; background: transparent;
  color: var(--tg-ink-secondary); cursor: pointer;
  transition: background var(--tg-dur-state) var(--tg-ease), color var(--tg-dur-state) var(--tg-ease), transform var(--tg-dur-press) var(--tg-ease);
}
.tg-btn-icon:hover  { background: var(--tg-surface-raised); color: var(--tg-ink); }
.tg-btn-icon:active { transform: scale(.94); }
.tg-btn-icon.is-active { color: var(--tg-brand); }

/* Yuzen aksiyon — GERCEKTEN yuzer, bu yuzden golgesi vardir. */
.tg-fab {
  display: inline-flex; align-items: center; gap: var(--tg-space-2);
  min-height: var(--tg-space-12); padding: 0 var(--tg-space-5);
  background: var(--tg-brand); color: var(--tg-on-brand);
  border: 0; border-radius: var(--tg-r-pill);
  font-family: var(--tg-font-ui); font-size: var(--tg-fs-button); font-weight: var(--tg-fw-bold);
  box-shadow: var(--tg-elev-float); cursor: pointer;
  transition: transform var(--tg-dur-press) var(--tg-ease);
}
.tg-fab:active { transform: scale(.96); }

/* == 6. CIP / FILTRE =======================================================
   Hap bicimi BURAYA ayrildi: cip bir SECIMdir, bir aksiyon degil.
   Secili durum hem zemin hem kenarlik hem agirlik ile anlatilir. */
.tg-chip {
  display: inline-flex; align-items: center; gap: var(--tg-space-2);
  min-height: var(--tg-tap-compact); padding: 0 var(--tg-space-4);
  background: var(--tg-surface); color: var(--tg-ink-secondary);
  border: var(--tg-hairline) solid var(--tg-border-strong);
  border-radius: var(--tg-r-pill);
  font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta); font-weight: var(--tg-fw-semi);
  cursor: pointer; white-space: nowrap;
  transition: background var(--tg-dur-state) var(--tg-ease), border-color var(--tg-dur-state) var(--tg-ease), color var(--tg-dur-state) var(--tg-ease);
}
.tg-chip:hover { border-color: var(--tg-brand-border); color: var(--tg-ink); }
.tg-chip[aria-pressed="true"], .tg-chip.is-selected {
  background: var(--tg-brand-soft); color: var(--tg-brand); border-color: var(--tg-brand); font-weight: var(--tg-fw-bold);
}
.tg-chip__count { color: var(--tg-ink-muted); font-weight: var(--tg-fw-medium); }
.tg-chiprow { display: flex; gap: var(--tg-space-2); overflow-x: auto; padding-bottom: var(--tg-space-1); scrollbar-width: none; }
.tg-chiprow::-webkit-scrollbar { display: none; }

/* == 7. ROZET / SINIFLANDIRMA ==============================================
   ROZET ENFLASYONU REDDEDILDI. Bir profesyonel hesapta EN FAZLA:
     (a) bir SINIFLANDIRMA plakasi  +  (b) bir DOGRULAMA isareti.
   Ucuncu bir rozet eklemek isteyen, once birini kaldirmak zorundadir. */
.tg-plate {
  display: inline-flex; align-items: center; gap: var(--tg-space-2);
  height: var(--tg-space-6); padding: 0 var(--tg-space-3);
  background: var(--tg-surface-raised); color: var(--tg-ink);
  border: var(--tg-hairline) solid var(--tg-border);
  border-radius: var(--tg-r-sm);
  font-size: var(--tg-fs-caption); line-height: 1; font-weight: var(--tg-fw-bold);
  letter-spacing: .04em; text-transform: uppercase;
  /* Plaka SARMAZ ve KUCULMEZ. Dar ekranda once satici adi kirpilir —
     siniflandirma guven sinyalidir, iki satira boluneni kimse okumaz. */
  white-space: nowrap; flex: none;
}
/* Plakanin sol ucundaki mavi serit — arac plakasinin ulke seridi gibi.
   Sinifi RENKLE degil, KONUMLA isaretler: renk korlugunde de okunur. */
.tg-plate::before { content: ""; width: var(--tg-rail-w); align-self: stretch; margin: var(--tg-space-1) 0; background: var(--tg-brand); border-radius: var(--tg-rail-w); }
.tg-plate--gallery::before  { background: var(--tg-brand); }
.tg-plate--dealer::before   { background: var(--tg-accent); }
.tg-plate--official::before { background: var(--tg-success); }

/* Dogrulama — TEK isaret. Renk + bicim birlikte tasir. */
.tg-verified { display: inline-flex; align-items: center; justify-content: center; width: var(--tg-space-5); height: var(--tg-space-5); color: var(--tg-brand); flex: none; }

/* Durum rozeti — icerigin DURUMU (yayinda/beklemede/reddedildi). */
.tg-badge { display: inline-flex; align-items: center; gap: var(--tg-space-1); height: var(--tg-space-6); padding: 0 var(--tg-space-2); border-radius: var(--tg-r-sm); font-size: var(--tg-fs-caption); font-weight: var(--tg-fw-bold); border: var(--tg-hairline) solid transparent; }
.tg-badge--success { background: var(--tg-success-soft); color: var(--tg-success-ink); border-color: var(--tg-success-border); }
.tg-badge--warning { background: var(--tg-warning-soft); color: var(--tg-warning-ink); border-color: var(--tg-warning-border); }
.tg-badge--danger  { background: var(--tg-danger-soft);  color: var(--tg-danger-ink);  border-color: var(--tg-danger-border); }
.tg-badge--info    { background: var(--tg-info-soft);    color: var(--tg-info-ink);    border-color: var(--tg-info-border); }
.tg-badge--neutral { background: var(--tg-surface-raised); color: var(--tg-ink-secondary); border-color: var(--tg-border); }

/* == 8. SPEC STRIP (imza) ==================================================
   ARAC BILGI PANOSU. Pazar yerinin en hizli okunan satiri.
   Etiket kucuk ve sessiz, deger BARLOW CONDENSED ve baskin. Kolonlar sac
   teli ayracla bolunur — kart icinde ikinci bir kart olusturmaz. */
.tg-spec {
  display: flex; align-items: stretch;
  background: var(--tg-surface-raised);
  border: var(--tg-hairline) solid var(--tg-border);
  border-radius: var(--tg-r-md); overflow: hidden;
}
.tg-spec__cell { flex: 1; min-width: 0; padding: var(--tg-space-2) var(--tg-space-3); text-align: center; }
.tg-spec__cell + .tg-spec__cell { border-left: var(--tg-hairline) solid var(--tg-border); }
.tg-spec__label { display: block; font-size: var(--tg-fs-caption); line-height: var(--tg-lh-caption); font-weight: var(--tg-fw-semi); letter-spacing: .06em; text-transform: uppercase; color: var(--tg-ink-secondary); }
.tg-spec__value { display: block; font-family: var(--tg-font-numeric); font-size: var(--tg-fs-screen); line-height: var(--tg-lh-screen); font-weight: var(--tg-fw-semi); color: var(--tg-ink); font-variant-numeric: tabular-nums; }
/* Liste karti icindeki sikistirilmis surum. */
.tg-spec--inline { background: transparent; border: 0; border-radius: 0; gap: var(--tg-space-3); }
.tg-spec--inline .tg-spec__cell { flex: 0 0 auto; padding: 0; text-align: left; }
.tg-spec--inline .tg-spec__cell + .tg-spec__cell { border-left: 0; padding-left: var(--tg-space-3); position: relative; }
.tg-spec--inline .tg-spec__cell + .tg-spec__cell::before { content: ""; position: absolute; left: 0; top: 15%; bottom: 15%; width: var(--tg-hairline); background: var(--tg-border); }
.tg-spec--inline .tg-spec__value { font-size: var(--tg-fs-section); line-height: var(--tg-lh-section); }
.tg-spec--inline .tg-spec__label { display: none; }

/* == 9. FORM ===============================================================
   Form YUVARLAK KUTU YIGINI DEGILDIR. Yapi: bolum > etiket > alan > destek.
   Etiket alanin USTUNDE ve her zaman gorunur (placeholder etiket yerine
   gecmez — 40+ kullanicida yazmaya baslayinca etiketin kaybolmasi hataya
   yol acar). */
.tg-fieldset { border: 0; padding: 0; margin: 0 0 var(--tg-space-6); }
.tg-fieldset__legend { display: block; font-size: var(--tg-fs-caption); font-weight: var(--tg-fw-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--tg-ink-secondary); padding: 0 0 var(--tg-space-2); }
.tg-field { display: block; margin-bottom: var(--tg-space-4); }
.tg-field__label { display: block; font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta); font-weight: var(--tg-fw-semi); color: var(--tg-ink); margin-bottom: var(--tg-space-2); }
.tg-field__req { color: var(--tg-danger-ink); }
.tg-input, .tg-select, .tg-textarea {
  width: 100%; min-height: var(--tg-tap-min);
  padding: var(--tg-space-3) var(--tg-space-4);
  font-family: var(--tg-font-ui); font-size: var(--tg-fs-body); line-height: var(--tg-lh-body); color: var(--tg-ink);
  background: var(--tg-surface); border: var(--tg-hairline) solid var(--tg-border-strong);
  border-radius: var(--tg-r-md);
  transition: border-color var(--tg-dur-state) var(--tg-ease), background var(--tg-dur-state) var(--tg-ease);
}
.tg-textarea { min-height: calc(var(--tg-tap-min) * 2); resize: vertical; }
.tg-input::placeholder, .tg-textarea::placeholder { color: var(--tg-ink-muted); }
.tg-input:focus, .tg-select:focus, .tg-textarea:focus { border-color: var(--tg-brand); outline: var(--tg-stroke) solid var(--tg-focus); outline-offset: 0; }
.tg-field.is-error .tg-input, .tg-field.is-error .tg-select, .tg-field.is-error .tg-textarea { border-color: var(--tg-danger); background: var(--tg-danger-soft); }
.tg-field__help  { display: block; font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta); color: var(--tg-ink-secondary); margin-top: var(--tg-space-2); }
.tg-field__error { display: flex; align-items: center; gap: var(--tg-space-2); font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta); font-weight: var(--tg-fw-semi); color: var(--tg-danger-ink); margin-top: var(--tg-space-2); }

/* Secici satir — kontrollu secim. Tiklaninca alt sayfa (sheet) acilir.
   Uzun listeler icin <select> yerine bu tercih edilir: sheet'te arama,
   grup basligi ve 48dp satir olur. */
.tg-selector {
  display: flex; align-items: center; gap: var(--tg-space-3);
  width: 100%; min-height: var(--tg-tap-min); padding: var(--tg-space-2) var(--tg-space-4);
  background: var(--tg-surface); border: var(--tg-hairline) solid var(--tg-border-strong);
  border-radius: var(--tg-r-md); cursor: pointer; text-align: left;
}
.tg-selector:hover { border-color: var(--tg-brand-border); }
.tg-selector__value { flex: 1; min-width: 0; font-size: var(--tg-fs-body); font-weight: var(--tg-fw-semi); color: var(--tg-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-selector__value.is-empty { color: var(--tg-ink-muted); font-weight: var(--tg-fw-regular); }
.tg-selector__chev { color: var(--tg-ink-muted); flex: none; }

/* Anahtar (switch) — durum hem konum hem renk ile. */
.tg-switch { position: relative; display: inline-flex; align-items: center; width: 52px; height: 32px; flex: none; background: var(--tg-border-strong); border: 0; border-radius: var(--tg-r-pill); cursor: pointer; transition: background var(--tg-dur-state) var(--tg-ease); }
.tg-switch::after { content: ""; position: absolute; left: var(--tg-space-1); width: var(--tg-space-6); height: var(--tg-space-6); border-radius: var(--tg-r-pill); background: var(--tg-knob); box-shadow: var(--tg-elev-pop); transition: transform var(--tg-dur-state) var(--tg-ease); }
.tg-switch[aria-checked="true"] { background: var(--tg-brand); }
.tg-switch[aria-checked="true"]::after { transform: translateX(20px); }

/* == 10. SATIR (ayarlar, liste) ============================================
   AYAR SATIRI KART DEGILDIR. Her satiri karta koymak sayfayi 12 ayri kutuya
   boler ve tarama hizini dusurur. Dogru yapi: bolum basligi + sinir
   cizgileriyle ayrilmis satirlar. Ayrica: HER SATIRIN IKONU RENKLI KARE
   ICINDE OLMAZ — ikon cizgidir, satirin sesini yukseltmez. */
.tg-rows { background: var(--tg-surface); border: var(--tg-hairline) solid var(--tg-border); border-radius: var(--tg-r-lg); overflow: hidden; }
.tg-row {
  display: flex; align-items: center; gap: var(--tg-space-3);
  width: 100%; min-height: var(--tg-tap-min); padding: var(--tg-space-3) var(--tg-space-4);
  background: transparent; border: 0; text-align: left; cursor: pointer; color: inherit;
  transition: background var(--tg-dur-state) var(--tg-ease);
}
.tg-row + .tg-row { box-shadow: inset 0 1px 0 var(--tg-divider); }
.tg-row:hover { background: var(--tg-surface-raised); }
.tg-row__icon  { color: var(--tg-ink-secondary); flex: none; }
.tg-row__main  { flex: 1; min-width: 0; }
.tg-row__title { font-size: var(--tg-fs-body); line-height: var(--tg-lh-body); font-weight: var(--tg-fw-semi); color: var(--tg-ink); }
.tg-row__desc  { font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta); color: var(--tg-ink-secondary); }
.tg-row__value { font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-semi); color: var(--tg-ink-secondary); flex: none; }
.tg-row__chev  { color: var(--tg-ink-muted); flex: none; }
.tg-row--danger .tg-row__title, .tg-row--danger .tg-row__icon { color: var(--tg-danger-ink); }
.tg-rowgroup__label { font-size: var(--tg-fs-caption); font-weight: var(--tg-fw-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--tg-ink-secondary); padding: 0 var(--tg-space-1) var(--tg-space-2); }

/* == 11. BASLIK / SEKME / GEZINME ==========================================
   Ust cubuk: geri + baslik + en fazla IKI baglam aksiyonu. Ucuncusu
   "daha fazla" menusune gider. Baslik ortalanmaz — sola hizali baslik
   uzun Turkce kelimelerde kirpilmaz. */
.tg-topbar {
  display: flex; align-items: center; gap: var(--tg-space-2);
  min-height: 56px; padding: 0 var(--tg-space-2);
  background: var(--tg-surface); border-bottom: var(--tg-hairline) solid var(--tg-border);
}
.tg-topbar__title { flex: 1; min-width: 0; font-size: var(--tg-fs-section); line-height: var(--tg-lh-section); font-weight: var(--tg-fw-bold); padding-left: var(--tg-space-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Sekme — aktif durum ROTA SEGMENTI ile: cizgi + uc noktasi.
   Alt cizgi tek basina 40+ kullanicida zayif kaliyor; nokta hedefi buyutmeden
   secili sekmeyi tartismasiz hale getirir. */
.tg-tabs { display: flex; gap: var(--tg-space-1); border-bottom: var(--tg-hairline) solid var(--tg-border); background: var(--tg-surface); overflow-x: auto; scrollbar-width: none; }
.tg-tabs::-webkit-scrollbar { display: none; }
.tg-tab {
  position: relative; flex: none; min-height: var(--tg-tap-min); padding: 0 var(--tg-space-4);
  background: transparent; border: 0; cursor: pointer; white-space: nowrap;
  font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta); font-weight: var(--tg-fw-semi); color: var(--tg-ink-secondary);
  transition: color var(--tg-dur-state) var(--tg-ease);
}
.tg-tab:hover { color: var(--tg-ink); }
.tg-tab[aria-selected="true"] { color: var(--tg-brand); font-weight: var(--tg-fw-bold); }
.tg-tab[aria-selected="true"]::after {
  content: ""; position: absolute; left: var(--tg-space-3); right: var(--tg-space-3); bottom: 0;
  height: var(--tg-rail-w); background: var(--tg-rail-active); border-radius: var(--tg-rail-w);
}
.tg-tab[aria-selected="true"]::before {
  content: ""; position: absolute; left: 50%; bottom: calc(-1 * var(--tg-rail-w));
  width: calc(var(--tg-stop-size) - 2px); height: calc(var(--tg-stop-size) - 2px);
  margin-left: calc((var(--tg-stop-size) - 2px) / -2);
  border-radius: var(--tg-r-pill); background: var(--tg-rail-active);
  border: var(--tg-rail-w) solid var(--tg-surface);
}

/* Alt sekme cubugu — ETIKET HER ZAMAN GORUNUR. Yalniz ikon, 40+ kullanicida
   ogrenilmesi gereken bir sifredir; etiket bunu ortadan kaldirir. */
.tg-bottombar { display: flex; background: var(--tg-surface); border-top: var(--tg-hairline) solid var(--tg-border); }
.tg-bottombar__item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 56px; padding: var(--tg-space-2) 0; background: transparent; border: 0; cursor: pointer;
  color: var(--tg-ink-secondary); font-size: var(--tg-fs-caption); line-height: var(--tg-lh-caption); font-weight: var(--tg-fw-semi);
}
.tg-bottombar__item[aria-current="page"] { color: var(--tg-brand); font-weight: var(--tg-fw-bold); }
.tg-bottombar__item[aria-current="page"] .tg-icon { }

/* == 12. SHEET / MODAL =====================================================
   Bunlar GERCEKTEN yuzer: golge burada anlamlidir.
   Sheet 220ms, asagidan; modal 220ms, olcekle. */
.tg-scrim { position: absolute; inset: 0; background: var(--tg-scrim); }
.tg-sheet {
  background: var(--tg-surface); border-top-left-radius: var(--tg-r-xl); border-top-right-radius: var(--tg-r-xl);
  border-top: var(--tg-hairline) solid var(--tg-border); box-shadow: var(--tg-elev-sheet);
  padding-bottom: var(--tg-space-4);
}
.tg-sheet__grip { width: var(--tg-space-10); height: var(--tg-space-1); margin: var(--tg-space-3) auto var(--tg-space-2); border-radius: var(--tg-r-pill); background: var(--tg-border-strong); }
.tg-sheet__head { display: flex; align-items: center; gap: var(--tg-space-2); padding: 0 var(--tg-space-4) var(--tg-space-3); }
.tg-sheet__title { flex: 1; font-size: var(--tg-fs-section); line-height: var(--tg-lh-section); font-weight: var(--tg-fw-bold); }
.tg-sheet__body { padding: 0 var(--tg-space-4); }
.tg-modal { background: var(--tg-surface); border: var(--tg-hairline) solid var(--tg-border); border-radius: var(--tg-r-lg); box-shadow: var(--tg-elev-modal); padding: var(--tg-space-5); max-width: 420px; }

/* == 13. SOSYAL ============================================================
   Feed: ICERIK once. Cerceve minimum — kart kenarligi mobilde kaldirilir,
   ayrimi bosluk ve sac teli cizgi yapar. Medya tam genisliktedir. */
.tg-post { background: var(--tg-surface); border-bottom: var(--tg-hairline) solid var(--tg-border); }
.tg-post__head { display: flex; align-items: center; gap: var(--tg-space-3); padding: var(--tg-space-3) var(--tg-gutter); }
.tg-avatar { width: var(--tg-space-10); height: var(--tg-space-10); border-radius: var(--tg-r-pill); background: var(--tg-surface-raised); border: var(--tg-hairline) solid var(--tg-border); flex: none; object-fit: cover; }
.tg-avatar--sm { width: var(--tg-space-8); height: var(--tg-space-8); }
.tg-avatar--lg { width: 72px; height: 72px; }
.tg-post__who { flex: 1; min-width: 0; }
.tg-post__name { display: flex; align-items: center; gap: var(--tg-space-1); font-size: var(--tg-fs-card); line-height: var(--tg-lh-card); font-weight: var(--tg-fw-bold); }
/* ROL SATIRI — BusTop'a ozgu. Instagram'da yoktur; burada kimin konustugu
   (Otobus Sahibi, Yetkili Servis, Filo Muduru) icerik kadar onemlidir. */
.tg-post__role { font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta); color: var(--tg-ink-secondary); }
.tg-post__text { padding: 0 var(--tg-gutter) var(--tg-space-3); font-size: var(--tg-fs-body); line-height: var(--tg-lh-body); }
.tg-post__media { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--tg-surface-raised); }
.tg-post__actions { display: flex; align-items: center; gap: var(--tg-space-1); padding: var(--tg-space-1) var(--tg-space-2); }
.tg-post__spacer { flex: 1; }
.tg-action { display: inline-flex; align-items: center; gap: var(--tg-space-2); min-height: var(--tg-tap-min); padding: 0 var(--tg-space-3); background: transparent; border: 0; cursor: pointer; color: var(--tg-ink-secondary); font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-semi); border-radius: var(--tg-r-md); transition: color var(--tg-dur-toggle) var(--tg-ease), background var(--tg-dur-state) var(--tg-ease); }
.tg-action:hover { background: var(--tg-surface-raised); color: var(--tg-ink); }
/* SECILI DURUM: Kalp SECILMEDIGINDE ASLA KIRMIZI DEGILDIR. Secilmemis ikon
   notr cizgidir; secilince dolar VE renklenir. Iki sinyal birlikte. */
.tg-action--like.is-on { color: var(--tg-like); }
.tg-action--save.is-on { color: var(--tg-brand); }
.tg-comment { display: flex; gap: var(--tg-space-3); padding: var(--tg-space-3) var(--tg-gutter); }
.tg-comment__bubble { flex: 1; background: var(--tg-surface-raised); border-radius: var(--tg-r-md); padding: var(--tg-space-2) var(--tg-space-3); }

/* == 14. CLIPS =============================================================
   Tam ekran medya, siyah zemin. Kontroller sag kenarda dikey; her biri
   48dp ve KOYU SIS altligi uzerinde — beyaz ikon parlak videoda kaybolmaz. */
.tg-clip { position: relative; background: var(--tg-media); border-radius: var(--tg-r-lg); overflow: hidden; aspect-ratio: 9 / 16; }
.tg-clip__veil { position: absolute; inset: 0; /* tg-allow: scrim — okunurluk ortusu, dekorasyon degil */ background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.28) 34%, rgba(0,0,0,0) 62%); }
.tg-clip__rail { position: absolute; right: var(--tg-space-2); bottom: var(--tg-space-4); display: flex; flex-direction: column; align-items: center; gap: var(--tg-space-1); }
.tg-clipbtn { display: flex; flex-direction: column; align-items: center; gap: 2px; width: var(--tg-tap-min); min-height: var(--tg-tap-min); padding: var(--tg-space-1) 0; background: transparent; border: 0; cursor: pointer; color: var(--tg-ink-on-media); font-size: var(--tg-fs-caption); font-weight: var(--tg-fw-bold); text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.tg-clipbtn.is-on { color: var(--tg-like); }
.tg-clipbtn--save.is-on { color: var(--tg-accent); }
.tg-clip__meta { position: absolute; left: var(--tg-gutter); right: 76px; bottom: var(--tg-space-4); color: var(--tg-ink-on-media); }
.tg-clip__name { display: flex; align-items: center; gap: var(--tg-space-1); font-size: var(--tg-fs-card); font-weight: var(--tg-fw-bold); }
.tg-clip__role { font-size: var(--tg-fs-meta); opacity: .88; }
.tg-clip__caption { font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta); margin-top: var(--tg-space-2); }
/* Hikaye halkasi — okunmamis: rota mavisi, okunmus: sessiz kenar. */
.tg-story { display: flex; flex-direction: column; align-items: center; gap: var(--tg-space-1); width: 76px; flex: none; }
.tg-story__ring { width: 64px; height: 64px; border-radius: var(--tg-r-pill); padding: 3px; background: var(--tg-brand); }
.tg-story.is-seen .tg-story__ring { background: var(--tg-border-strong); }
.tg-story__ring img { width: 100%; height: 100%; border-radius: var(--tg-r-pill); border: var(--tg-stroke) solid var(--tg-surface); object-fit: cover; }
.tg-story__name { font-size: var(--tg-fs-caption); line-height: var(--tg-lh-caption); color: var(--tg-ink-secondary); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* == 15. PAZAR YERI ========================================================
   BILGI YOGUN. Kart bir EDITORYAL kart degil, bir KAYITTIR.
   Tarama sirasi: gorsel > baslik > fiyat > spec > yer/tarih > satici.
   Bu sira degistirilemez; her dikeyde (otobus, minibus, yedek parca, is
   ilani, operasyon) AYNI iskelet kullanilir, yalniz spec alanlari degisir. */
.tg-listing { display: flex; gap: var(--tg-space-3); padding: var(--tg-space-3); background: var(--tg-surface); border: var(--tg-hairline) solid var(--tg-border); border-radius: var(--tg-r-lg); }
/* Kucuk gorsel: 390px'te ana kolona en az 220px birakmak zorunda.
   128px'lik gorsel Turkce baslikta ("Sehirlerarasi Otobus Kaptani") satiri
   uce boluyordu; 108 tarama hizini artiriyor, gorsel hala taninabilir. */
.tg-listing__thumb { position: relative; width: 108px; height: 81px; flex: none; border-radius: var(--tg-r-md); overflow: hidden; background: var(--tg-surface-raised); }
.tg-listing__thumb img { width: 100%; height: 100%; object-fit: cover; }
.tg-listing__count { position: absolute; left: var(--tg-space-1); bottom: var(--tg-space-1); display: inline-flex; align-items: center; gap: var(--tg-space-1); height: var(--tg-space-5); padding: 0 var(--tg-space-2); border-radius: var(--tg-r-sm); background: var(--tg-media-chip); color: var(--tg-ink-on-media); font-size: var(--tg-fs-caption); font-weight: var(--tg-fw-bold); }
.tg-listing__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--tg-space-2); }
.tg-listing__title { font-size: var(--tg-fs-card); line-height: var(--tg-lh-card); font-weight: var(--tg-fw-bold); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Alt satir dar ekranda sarabilir; ayrac noktasi sarma sirasinda satir
   basina dusmesin diye satir araligi kucuk tutuldu ve nokta ic ogeye
   sabitlendi. */
.tg-listing__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 0 var(--tg-space-2); row-gap: 2px; font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta); color: var(--tg-ink-secondary); }
.tg-listing__dot { width: 3px; height: 3px; border-radius: var(--tg-r-pill); background: var(--tg-ink-muted); flex: none; }
.tg-listing--grid { flex-direction: column; padding: 0; overflow: hidden; }
.tg-listing--grid .tg-listing__thumb { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 0; }
.tg-listing--grid .tg-listing__main { padding: var(--tg-space-3); }

/* Satici satiri — kartin en altinda, tek satir. SINIFLANDIRMA + DOGRULAMA. */
.tg-seller { display: flex; align-items: center; gap: var(--tg-space-2); min-width: 0; font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta); color: var(--tg-ink-secondary); }
/* Uzun kurum adlari ("Anadolu Otobus Galerisi") kirpilir; plaka ve dogrulama
   isareti ASLA kirpilmaz — guven sinyali her zaman gorunur kalir. */
.tg-seller__name { min-width: 0; font-weight: var(--tg-fw-semi); color: var(--tg-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Siralama / filtre cubugu — ISLEMSEL. Sonuc sayisi solda, aksiyon sagda. */
.tg-toolbar { display: flex; align-items: center; gap: var(--tg-space-2); padding: var(--tg-space-2) var(--tg-gutter); background: var(--tg-surface); border-bottom: var(--tg-hairline) solid var(--tg-border); }
.tg-toolbar__count { flex: 1; font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-semi); color: var(--tg-ink-secondary); }

/* == 16. PROFESYONEL MAGAZA ================================================
   Magaza BUYUTULMUS SOSYAL PROFIL DEGILDIR. Kimlik seridi + guven satiri +
   sekmeler. Kapak gorseli varsa dusuk yukseklikte kalir; magazanin ilk
   ekraninda ILAN gorunmelidir. */
.tg-store { background: var(--tg-surface); border-bottom: var(--tg-hairline) solid var(--tg-border); }
.tg-store__cover { width: 100%; height: 120px; object-fit: cover; background: var(--tg-surface-raised); }
.tg-store__head { display: flex; gap: var(--tg-space-3); padding: var(--tg-space-4) var(--tg-gutter) var(--tg-space-3); }
.tg-store__name { display: flex; align-items: center; gap: var(--tg-space-2); font-size: var(--tg-fs-screen); line-height: var(--tg-lh-screen); font-weight: var(--tg-fw-bold); }
.tg-store__trust { display: flex; gap: var(--tg-space-2); padding: 0 var(--tg-gutter) var(--tg-space-4); flex-wrap: wrap; }

/* == 17. METRIK / ANALIZ ===================================================
   GENEL SAAS PANOSU DEGIL. Once TEK bir birincil sayi, sonra kiyas.
   Kiyas YALNIZ gercek veri varsa gosterilir; veri yoksa "yeterli veri yok"
   yazilir — uydurma yuzde yazilmaz. */
.tg-metricgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--tg-hairline); background: var(--tg-border); border: var(--tg-hairline) solid var(--tg-border); border-radius: var(--tg-r-lg); overflow: hidden; }
.tg-metriccell { background: var(--tg-surface); padding: var(--tg-space-4); }
.tg-metriccell__label { font-size: var(--tg-fs-caption); font-weight: var(--tg-fw-semi); letter-spacing: .05em; text-transform: uppercase; color: var(--tg-ink-secondary); }
.tg-metriccell__value { font-family: var(--tg-font-numeric); font-size: var(--tg-fs-display); line-height: var(--tg-lh-display); font-weight: var(--tg-fw-semi); color: var(--tg-ink); font-variant-numeric: tabular-nums; }
.tg-delta { display: inline-flex; align-items: center; gap: var(--tg-space-1); font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-semi); }
.tg-delta--up   { color: var(--tg-success-ink); }
.tg-delta--down { color: var(--tg-danger-ink); }
.tg-delta--flat { color: var(--tg-ink-secondary); }
/* Cubuk — kutuphane yok, tek renk, izgara yok. Grafik veriyi anlatir, susler degil. */
.tg-bars { display: flex; align-items: flex-end; gap: var(--tg-space-1); height: 72px; }
.tg-bars__bar { flex: 1; background: var(--tg-brand-soft); border-radius: var(--tg-r-sm) var(--tg-r-sm) 0 0; }
.tg-bars__bar.is-peak { background: var(--tg-brand); }

/* == 18. YUKLENIYOR / BOS / HATA ===========================================
   HICBIRINDE EMOJI YOK. Iskelet gercek yerlesimi taklit eder (yanlis
   yerlesimi taklit eden iskelet, sayfa gelince zipladigi icin daha kotudur). */
.tg-skel { background: var(--tg-surface-sunken); border-radius: var(--tg-r-sm); position: relative; overflow: hidden; }
.tg-skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); /* tg-allow: shimmer — yukleniyor sinyali */ background: linear-gradient(90deg, transparent, var(--tg-surface) 50%, transparent); animation: tg-shimmer 1.4s infinite; }
@keyframes tg-shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .tg-skel::after { animation: none; } }
.tg-skel--line { height: var(--tg-space-3); }
.tg-skel--title { height: var(--tg-space-5); }
.tg-skel--thumb { width: 128px; height: 96px; border-radius: var(--tg-r-md); flex: none; }

/* Bos durum — glif + tek cumle + TEK birincil aksiyon. */
.tg-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--tg-space-3); padding: var(--tg-space-12) var(--tg-space-6); }
.tg-state__glyph { width: 64px; height: 64px; color: var(--tg-ink-muted); }
.tg-state__title { font-size: var(--tg-fs-section); line-height: var(--tg-lh-section); font-weight: var(--tg-fw-bold); }
.tg-state__text  { font-size: var(--tg-fs-body); line-height: var(--tg-lh-body); color: var(--tg-ink-secondary); max-width: 44ch; }
/* Satir ici hata — SAYFAYI DEGISTIRMEZ, sadece baglami isaretler. */
.tg-inline-error { display: flex; align-items: flex-start; gap: var(--tg-space-3); padding: var(--tg-space-3); background: var(--tg-danger-soft); border: var(--tg-hairline) solid var(--tg-danger-border); border-radius: var(--tg-r-md); color: var(--tg-danger-ink); font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta); font-weight: var(--tg-fw-medium); }
.tg-offline { display: flex; align-items: center; justify-content: center; gap: var(--tg-space-2); padding: var(--tg-space-2) var(--tg-space-4); background: var(--tg-warning-soft); border-bottom: var(--tg-hairline) solid var(--tg-warning-border); color: var(--tg-warning-ink); font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-semi); }

/* == 19. DUZEN YARDIMCILARI ================================================ */
.tg-stack   { display: flex; flex-direction: column; gap: var(--tg-space-3); }
.tg-stack-4 { display: flex; flex-direction: column; gap: var(--tg-space-4); }
.tg-inline  { display: flex; align-items: center; gap: var(--tg-space-2); }
.tg-gutter  { padding-left: var(--tg-gutter); padding-right: var(--tg-gutter); }
.tg-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* == 20. DUYARLI DAVRANIS ==================================================
   Kirilma noktalari: 390 / 430 (telefon) · 768 (tablet) · 1024 / 1440 (masaustu).
   Telefonda gutter 16 sabit kalir; tablette ve ustunde artar. */
@media (min-width: 430px) {
  .tg-listing__thumb { width: 128px; height: 96px; }
}
@media (min-width: 768px) {
  .tg-root { --tg-gutter: 24px; }
  .tg-listing__thumb { width: 168px; height: 126px; }
}
@media (min-width: 1024px) {
  .tg-root { --tg-gutter: 32px; }
  .tg-post { border: var(--tg-hairline) solid var(--tg-border); border-radius: var(--tg-r-lg); overflow: hidden; }
}

/* ══ 21. IMZA BILESENLERI (Faz 2.6) ════════════════════════════════════════
   Karsilikli PHP: `app/components.php`. Bu uc bilesen urunun her yuzeyinde
   tekrar eder; kimligi kuran o tekrardir, tek tek guzel ekranlar degil.
   ========================================================================= */

/* ── A. TRANSIT DATA PLATE ─────────────────────────────────────────────────
   Kaynak: arac bilgi panosu ve peron gostergesi.

   Jenerik "metric card"tan ayiran dort karar:
     1. Hucreler ayri kutu DEGIL — tek plakanin TAM BOYU cizgiyle bolmeleri.
     2. Etiket 11px versal ve genis harf arali; deger sikistirilmis ve baskin.
     3. Bas kenarda 2px marka cubugu — plakanin "rota" isareti.
     4. Koyu temada plaka karttan DAHA KOYU: panele gomulu enstruman hissi.
        (Jenerik pano kutucuklari daima karttan ACIK olur; bu tersleme
        bilerek yapildi ve gorsel imzanin bir parcasi.) */
.tg-plate-data {
  position: relative;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: var(--tg-surface-raised);
  border: var(--tg-hairline) solid var(--tg-border);
  border-radius: var(--tg-r-sm);
  overflow: hidden;
}
/* Rota cubugu — plakanin bas kenari. */
.tg-plate-data::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--tg-rail-w); background: var(--tg-rail-active);
}
.tg-plate-data__cell {
  min-width: 0; padding: var(--tg-space-2) var(--tg-space-3);
  display: flex; flex-direction: column; gap: 1px;
}
.tg-plate-data__cell:first-child { padding-left: calc(var(--tg-space-3) + var(--tg-rail-w)); }
/* TAM BOYU bolme — inset degil. Enstruman panosu sertligi. */
.tg-plate-data__cell + .tg-plate-data__cell { border-left: var(--tg-hairline) solid var(--tg-border); }
.tg-plate-data__k {
  font-size: var(--tg-fs-label); line-height: 14px; font-weight: var(--tg-fw-bold);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--tg-ink-muted); white-space: nowrap;
}
.tg-plate-data__v {
  font-family: var(--tg-font-numeric);
  font-size: var(--tg-fs-price); line-height: 26px;
  font-weight: var(--tg-fw-semi); letter-spacing: .01em;
  color: var(--tg-ink); font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tg-plate-data__u { font-style: normal; font-size: var(--tg-fs-meta); color: var(--tg-ink-secondary); margin-left: 2px; }

/* Kart olcegi — daha sik, ayni dil. */
.tg-plate-data--sm .tg-plate-data__cell { padding: var(--tg-space-1) var(--tg-space-2); }
.tg-plate-data--sm .tg-plate-data__cell:first-child { padding-left: calc(var(--tg-space-2) + var(--tg-rail-w)); }
.tg-plate-data--sm .tg-plate-data__k { font-size: var(--tg-fs-label); line-height: 13px; letter-spacing: var(--tg-ls-label); }
.tg-plate-data--sm .tg-plate-data__v { font-size: var(--tg-fs-section); line-height: 21px; }

/* Detay kahramani — en buyuk olcek. */
.tg-plate-data--lg .tg-plate-data__cell { padding: var(--tg-space-3) var(--tg-space-4); }
.tg-plate-data--lg .tg-plate-data__v { font-size: var(--tg-fs-display); line-height: 34px; }

/* KOYU TEMA: plaka karttan koyu — gomulu enstruman. */
:root[data-theme="dark"] .tg-plate-data {
  background: var(--tg-surface-sunken);
  border-color: var(--tg-border);
}
:root[data-theme="dark"] .tg-plate-data__cell + .tg-plate-data__cell { border-left-color: var(--tg-border); }

/* ── B. IDENTITY RAIL ──────────────────────────────────────────────────────
   Kim konusuyor / kim satiyor — TEK gramer, dort yuzey.

   Rozet corbasi yerine: sol dikey ray (SINIFLANDIRMA, konumla) + ad + TEK
   dogrulama isareti + versal ROL satiri. Rol versal cizilir cunku bu bir
   PROFESYONEL unvandir, bir etiket degil. */
.tg-ident { display: flex; align-items: center; gap: var(--tg-space-3); min-width: 0; }
.tg-ident__link {
  display: flex; align-items: center; gap: var(--tg-space-3);
  min-width: 0; flex: 1; text-decoration: none; color: inherit;
  position: relative;
}
/* SINIFLANDIRMA RAYI — konum birinci sinyal, renk ikinci. */
.tg-ident--gallery    .tg-ident__link::before,
.tg-ident--authorized .tg-ident__link::before,
.tg-ident--official   .tg-ident__link::before,
.tg-ident--corporate  .tg-ident__link::before {
  content: ""; flex: none; width: var(--tg-rail-w); align-self: stretch;
  min-height: var(--tg-space-8); border-radius: var(--tg-rail-w);
  margin-right: var(--tg-space-1);
}
.tg-ident--gallery    .tg-ident__link::before { background: var(--tg-brand); }
.tg-ident--authorized .tg-ident__link::before { background: var(--tg-accent); }
.tg-ident--official   .tg-ident__link::before { background: var(--tg-success); }
.tg-ident--corporate  .tg-ident__link::before { background: var(--tg-border-strong); }

.tg-ident__main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tg-ident__name {
  display: flex; align-items: center; gap: var(--tg-space-1); min-width: 0;
  font-size: var(--tg-fs-card); line-height: var(--tg-lh-card);
  font-weight: var(--tg-fw-bold); color: var(--tg-ink);
}
.tg-ident__name > span, .tg-ident__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-ident__tick { color: var(--tg-brand); flex: none; }
.tg-ident__sub { display: flex; align-items: baseline; gap: var(--tg-space-2); min-width: 0; }
/* ROL — versal, kucuk, harf arali. Profesyonel kayit. */
.tg-ident__role {
  font-size: var(--tg-fs-label); line-height: var(--tg-lh-label); font-weight: var(--tg-fw-bold);
  letter-spacing: var(--tg-ls-label); text-transform: uppercase;
  color: var(--tg-ink-secondary); white-space: nowrap; flex: none;
}
.tg-ident__meta {
  font-size: var(--tg-fs-meta); line-height: 15px; color: var(--tg-ink-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tg-ident__tail { display: flex; align-items: center; gap: var(--tg-space-2); flex: none; margin-left: auto; }
.tg-ident__status {
  height: var(--tg-space-5); padding: 0 var(--tg-space-2);
  display: inline-flex; align-items: center; border-radius: var(--tg-r-sm);
  background: var(--tg-surface-raised); color: var(--tg-ink-secondary);
  border: var(--tg-hairline) solid var(--tg-border);
  font-size: var(--tg-fs-caption); font-weight: var(--tg-fw-bold);
}

/* Kucuk olcek — kart alt satiri, yorum. Avatarsiz calisir. */
.tg-ident--sm { gap: var(--tg-space-2); }
.tg-ident--sm .tg-ident__link { gap: var(--tg-space-2); }
.tg-ident--sm .tg-ident__name { font-size: var(--tg-fs-caption); line-height: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--tg-ink-secondary); }
.tg-ident--sm .tg-ident__tick { width: 14px; height: 14px; }
.tg-ident--sm .tg-ident__link::before { min-height: var(--tg-space-4); margin-right: var(--tg-space-1); }

/* Buyuk olcek — magaza ve detay. */
.tg-ident--lg .tg-ident__name { font-size: var(--tg-fs-section); line-height: var(--tg-lh-section); }
.tg-ident--lg .tg-ident__link::before { min-height: var(--tg-space-10); }

/* ── C. ROUTE RULE — bolum basligi ve yonelim ───────────────────────────── */
.tg-rule { display: flex; align-items: center; gap: var(--tg-space-3); margin: 0 0 var(--tg-space-4); }
.tg-rule__dot { width: var(--tg-space-2); height: var(--tg-space-2); flex: none; border-radius: var(--tg-r-pill); background: var(--tg-rail-active); }
.tg-rule__title { font-size: var(--tg-fs-section); line-height: var(--tg-lh-section); font-weight: var(--tg-fw-bold); color: var(--tg-ink); margin: 0; flex: none; }
.tg-rule__line { flex: 1; height: var(--tg-hairline); background: var(--tg-divider); }
.tg-rule__aside { flex: none; font-size: var(--tg-fs-meta); color: var(--tg-ink-secondary); }

/* ── D. CONTEXT STRIP — sektorel baglam ────────────────────────────────────
   BusTop'a ozgu: bir gonderi yalniz "gonderi" degil, "arac musait"tir.
   Medyanin hemen altinda, kucuk versal etiketler; nokta ayraclarla. */
.tg-context {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--tg-space-2); padding: var(--tg-space-2) var(--tg-space-4);
  border-top: var(--tg-hairline) solid var(--tg-divider);
  background: var(--tg-surface-raised);
}
.tg-context__tag {
  font-size: var(--tg-fs-label); line-height: var(--tg-lh-label); font-weight: var(--tg-fw-bold);
  letter-spacing: var(--tg-ls-label); text-transform: uppercase; color: var(--tg-ink-secondary);
}
.tg-context__tag:first-of-type { color: var(--tg-brand); }
.tg-context__sep { width: 3px; height: 3px; border-radius: var(--tg-r-pill); background: var(--tg-ink-muted); flex: none; }

/* ── E. DISCUSSION — ray uzerinde tartisma ─────────────────────────────────
   Yorumlar ic ice ham metin yigini degil; solda dikey hat, her yorum bir
   durak. Gonderinin DEVAMI oldugu belli olur, ayri bir kart gibi durmaz. */
.tg-discussion { border-top: var(--tg-hairline) solid var(--tg-divider); }
.tg-discussion__head {
  padding: var(--tg-space-3) var(--tg-space-4) var(--tg-space-1);
  font-size: var(--tg-fs-label); font-weight: var(--tg-fw-bold);
  letter-spacing: var(--tg-ls-label); text-transform: uppercase; color: var(--tg-ink-muted);
}
.tg-discussion__head--empty { color: var(--tg-ink-muted); }
.tg-discussion__rows { position: relative; padding: var(--tg-space-1) 0 var(--tg-space-2); }
/*
  ROTA HATTI — AVATARLARIN ICINDEN gecer, yanindan degil.

  Ilk denemede hat avatarlarin solundaydi ve ayri bir nokta sutunu daha
  vardi; iki paralel sol kenar olusuyor ve baglanti kopuyordu. Dogrusu:
  hat avatar merkezinden gecer, her AVATAR bir duraktir. Avatarin etrafina
  yuzey rengiyle bir halka konur ki hat arkasindan gecerken kesilsin.
  Boylece "yorumlar bir hattin duraklaridir" okumasi kuruluyor.
*/
.tg-discussion__rows::before {
  content: ""; position: absolute;
  left: calc(var(--tg-space-4) + var(--tg-space-8) / 2);
  top: var(--tg-space-2); bottom: var(--tg-space-2);
  width: var(--tg-hairline); background: var(--tg-border);
}
.tg-discussion__row { position: relative; }
/* Avatar hattin uzerinde durur ve arkasini keser. */
.tg-discussion__row > a:first-child, .tg-discussion__row .avatar {
  position: relative; z-index: 1;
  box-shadow: 0 0 0 3px var(--tg-surface);
  border-radius: var(--tg-r-pill);
}
.tg-discussion .bt-inline-comment { padding-left: var(--tg-space-4); padding-right: var(--tg-space-4); }

/* ══ 22. URETIM YUZEYLERI — YENIDEN BESTELENEN ISARETLEME (Faz 2.6) ════════
   Asagidaki kurallar `app/components.php` + yeniden yazilan uretim
   isaretlemesinin karsiligidir. CSS ile "duzeltme" degil, YENI yapinin
   tanimi — bu yuzden ad alani disinda da olsa kanonik katmanda duruyor.
   ========================================================================= */

/* ── PAZAR YERI KONTROL GUVERTESI ──────────────────────────────────────────
   Dort yigilmis blok yerine TEK guverte. 1440'ta ilk ilana kadar harcanan
   yukseklik ~430px'ten ~210px'e iner. */
.mk-deck {
  background: var(--tg-surface);
  border: var(--tg-hairline) solid var(--tg-border-card);
  border-radius: var(--tg-r-lg);
  margin: var(--tg-space-5) 0 var(--tg-space-5);
  overflow: hidden;
}
.mk-deck__top {
  display: flex; align-items: center; gap: var(--tg-space-4); flex-wrap: wrap;
  padding: var(--tg-space-4) var(--tg-space-5);
}
.mk-deck__id { display: flex; align-items: baseline; gap: var(--tg-space-3); min-width: 0; flex: 1; }
/* Sayfa kimligi bir DURAK ile baslar — sidebar aktif durumuyla ayni dil. */
.mk-deck__dot {
  width: var(--tg-stop-size); height: var(--tg-stop-size); flex: none;
  border-radius: var(--tg-r-pill); background: var(--tg-rail-active);
  align-self: center;
}
.mk-deck__title {
  font-size: var(--tg-fs-screen); line-height: var(--tg-lh-screen);
  font-weight: var(--tg-fw-bold); letter-spacing: -.02em;
  color: var(--tg-ink); margin: 0; flex: none;
}
/* Sonuc sayisi baslikla AYNI satirda: "kac ilan" bir alt basliktir, ayri bir
   satir hak etmiyor. Sikistirilmis rakam — plakayla ayni sayisal dil. */
.mk-deck__count {
  font-family: var(--tg-font-numeric); font-size: var(--tg-fs-section);
  font-weight: var(--tg-fw-semi); letter-spacing: .02em;
  color: var(--tg-ink-secondary); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mk-deck__controls {
  display: flex; align-items: center; gap: var(--tg-space-4); flex-wrap: wrap;
  padding: var(--tg-space-3) var(--tg-space-5);
  border-top: var(--tg-hairline) solid var(--tg-divider);
  background: var(--tg-surface-raised);
}
.mk-deck__controls .mk-chips { flex: 1 1 auto; min-width: 0; padding: 0; }
.mk-deck__tools { display: flex; align-items: center; gap: var(--tg-space-2); flex: 0 1 auto; min-width: 0; }
/* Filtre formu guvertede kendi paneli olmadan durur. */
.mk-filters--deck {
  display: flex; align-items: center; gap: var(--tg-space-2);
  background: none; border: 0; border-radius: 0; padding: 0; flex-wrap: wrap;
}
/* Arama guvertedeki en genis kontrol olmali: marka+model yazilir. */
.mk-filters--deck { flex: 1 1 auto; min-width: 0; padding: 0; }
.mk-filters--deck .mk-search { flex: 1 1 300px; min-width: 0; }
.mk-filters--deck .mk-search input { min-height: var(--tg-tap-compact); background: var(--tg-surface); }
.mk-filters--deck .mk-search .btn { min-height: var(--tg-tap-compact); }
.mk-filters--deck .mk-adv { flex: 0 0 auto; }
.mk-filters--deck .mk-adv[open] { flex: 1 1 100%; }
.mk-filters--deck .mk-adv > summary { min-height: var(--tg-tap-compact); background: var(--tg-surface); }
.mk-filters--deck .mk-fgrid { padding-top: var(--tg-space-3); }
.mk-sort { flex: 0 0 auto; }
.mk-sort__k { font-size: var(--tg-fs-label); font-weight: var(--tg-fw-bold); letter-spacing: var(--tg-ls-label); text-transform: uppercase; color: var(--tg-ink-muted); }
.mk-sort select { min-height: var(--tg-tap-compact); background: var(--tg-surface); }

@media (max-width: 640px) {
  .mk-deck { margin: var(--tg-space-3) 0 var(--tg-space-4); }
  .mk-deck__top, .mk-deck__controls { padding: var(--tg-space-3) var(--tg-space-4); }
  .mk-deck__title { font-size: var(--tg-fs-section); line-height: var(--tg-lh-section); }
  .mk-deck__controls { flex-direction: column; align-items: stretch; gap: var(--tg-space-3); }
  .mk-deck__tools { flex-wrap: wrap; gap: var(--tg-space-2); }
  /*
    MOBILDE GUVERTE DORT SATIRA YAYILIYORDU: cipler · arama · Filtrele ·
    Sirala. Olculdu (390px): guverte 222px, ilk ilan 678px asagida —
    kullanici tek bir ilan gormeden yarim ekrandan fazla kaydiriyordu.

    "Filtrele" formun ICINDE, "Sirala" ise formun KARDESI oldugu icin ayni
    satira gelemiyorlardi. Form kutusu mobilde `display: contents` ile
    kaldiriliyor; cocuklari dogrudan guverte satirinin ogeleri oluyor.
    Form DOM'da duruyor, gonderim davranisi DEGISMIYOR — yalniz kutusu
    duzenden cikiyor.

    Sonuc: arama kendi satirinda (yazilacak en uzun deger), Filtrele ve
    Sirala yan yana tek satirda.
  */
  .mk-filters--deck { display: contents; }
  .mk-deck__tools .mk-search { flex: 1 1 100%; }
  .mk-deck__tools details.mk-adv { flex: 0 0 auto; }
  .mk-sort { flex: 1 1 auto; width: auto; justify-content: flex-end; gap: var(--tg-space-2); }
}

/* ── ILAN KARTI — YENIDEN BESTELENMIS ──────────────────────────────────────
   Kart artik: medya · (baslik+model) · fiyat · DATA PLATE · yer/tarih ·
   IDENTITY RAIL. Basliga iki satir AYRILIR ki izgara tirtiklanmasin. */
.mk-card-body { display: flex; flex-direction: column; gap: var(--tg-space-2); padding: var(--tg-space-3) var(--tg-space-4) var(--tg-space-4); }
.mk-card-head { min-height: 46px; }
.mk-card-title {
  font-size: var(--tg-fs-card); line-height: 21px; letter-spacing: -.01em;
  font-weight: var(--tg-fw-bold); color: var(--tg-ink); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mk-model { font-size: var(--tg-fs-meta); line-height: 18px; color: var(--tg-ink-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
/* Fiyat mansettir: plakadan hemen once, en yuksek ses. */
.mk-price { font-size: var(--tg-fs-price); line-height: var(--tg-lh-price); font-weight: var(--tg-fw-bold); letter-spacing: -.02em; color: var(--tg-ink); margin: 0; }
.mk-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--tg-space-2); font-size: var(--tg-fs-meta); color: var(--tg-ink-secondary);
}
.mk-city { display: inline-flex; align-items: center; gap: var(--tg-space-1); min-width: 0; }
.mk-city .tg-i { color: var(--tg-ink-muted); flex: none; }
.mk-city > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-date { color: var(--tg-ink-muted); white-space: nowrap; flex: none; }
.mk-trust { display: flex; align-items: center; gap: var(--tg-space-2); flex-wrap: wrap; padding-top: var(--tg-space-2); border-top: var(--tg-hairline) solid var(--tg-divider); }

/* Medya seridinde artik TEK etiket: kategori. Satici kimligi kart altinda. */
.mk-cat {
  position: absolute; left: var(--tg-space-2); top: var(--tg-space-2);
  height: var(--tg-space-6); padding: 0 var(--tg-space-2);
  display: inline-flex; align-items: center; border-radius: var(--tg-r-sm);
  background: var(--tg-media-chip); color: var(--tg-ink-on-media);
  font-size: var(--tg-fs-label); font-weight: var(--tg-fw-bold); letter-spacing: .05em;
  text-transform: uppercase;
}

/* ── ILAN DETAYI — SOL/SAG BESTE ───────────────────────────────────────────
   Sag sutun bir SATIN ALMA KUTUSU: fiyat, plaka, satici kimligi, iletisim.
   Sol sutun okuma: baslik, aciklama, teknik gruplar. */
.mk-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tg-space-5); align-items: start; }
@media (min-width: 1024px) {
  .mk-detail-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--tg-space-6); }
  .mk-detail-side { position: sticky; top: var(--tg-space-4); }
}
.mk-detail-main {
  background: var(--tg-surface);
  border: var(--tg-hairline) solid var(--tg-border-card);
  border-radius: var(--tg-r-lg); overflow: hidden;
}
.mk-block { padding: var(--tg-space-5) var(--tg-space-6); }
.mk-block + .mk-block { border-top: var(--tg-hairline) solid var(--tg-divider); }
/* Bos galeri bilgi kadar yer kaplar, daha fazlasi degil. Sinirsiz birakildiginda
   detay sayfasinin ilk ekranini tamamen "fotograf yok" dolduruyordu. */
.mk-gallery-empty { aspect-ratio: auto; min-height: 200px; max-height: 280px; }
.mk-detail-title { font-size: var(--tg-fs-display); line-height: var(--tg-lh-display); font-weight: var(--tg-fw-bold); letter-spacing: -.025em; color: var(--tg-ink); margin: 0; }
.mk-desc { font-size: var(--tg-fs-body); line-height: var(--tg-lh-body); color: var(--tg-ink); margin: 0; max-width: 68ch; }

/* SATIN ALMA KUTUSU — sag sutun. */
.mk-buybox {
  background: var(--tg-surface);
  border: var(--tg-hairline) solid var(--tg-border-card);
  border-radius: var(--tg-r-lg);
  padding: var(--tg-space-5);
  display: flex; flex-direction: column; gap: var(--tg-space-4);
}
.mk-buybox__price {
  font-family: var(--tg-font-numeric);
  /* Olcegin en ustu: `display`. 40px cazipti ama olcek disi bir ara deger
     olurdu — tasarim dili "ara deger yok" diyor. Barlow Condensed 32'de
     zaten yeterince baskin. */
  font-size: var(--tg-fs-display); line-height: var(--tg-lh-display); font-weight: var(--tg-fw-semi);
  letter-spacing: .01em; color: var(--tg-ink);
  font-variant-numeric: tabular-nums;
}
/*
  ILAN NO — ustveri, baslik DEGIL.
  Karari fiyat ve arac veriyor; numara destege/paylasima yarar. Bu yuzden
  fiyatin altinda ve SESSIZ tipografide duruyor. `tabular-nums` sayilarin
  ayni genislikte hizalanmasini saglar — numara okunurken goz kaymaz.
*/
.mk-buybox__no {
  margin-top: var(--tg-space-2);
  font-size: var(--tg-fs-caption); line-height: var(--tg-lh-caption);
  color: var(--tg-ink-muted);
  font-variant-numeric: tabular-nums;
}
.mk-buybox__seller {
  padding-top: var(--tg-space-4);
  border-top: var(--tg-hairline) solid var(--tg-divider);
  display: flex; flex-direction: column; gap: var(--tg-space-3);
}

/* SATICI KUNYESI — her alan kendi satirinda, etiketli.

   ONCESI: rol ve sehir kimlik rayinin tek bir alt satirina sikismisti.
   Olculdu: rol 11px, sehir 14px — yani DAHA AZ onemli alan DAHA BUYUK
   goruluyordu ve ikisi ayni taban cizgisine oturmuyordu (y=875 / y=873).
   Alanlar artik etiket/deger cifti; hangi bilginin ne oldugu okunuyor. */
.mk-sellerfacts { margin: 0; display: flex; flex-direction: column; gap: var(--tg-space-2); }
.mk-sellerfact {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--tg-space-3);
}
.mk-sellerfact dt {
  font-family: var(--tg-font-display);
  font-size: var(--tg-fs-metadata); line-height: var(--tg-lh-metadata);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--tg-ink-muted); white-space: nowrap;
}
.mk-sellerfact dd {
  margin: 0; text-align: right;
  font-size: var(--tg-fs-caption); line-height: var(--tg-lh-caption);
  font-weight: var(--tg-fw-medium); color: var(--tg-ink);
}
.mk-buybox .mk-action { margin: 0; }
.mk-buybox .mk-action .btn { width: 100%; }
.mk-seller-av {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tg-space-10); height: var(--tg-space-10); flex: none;
  border-radius: var(--tg-r-pill); background: var(--tg-brand-soft); color: var(--tg-brand);
  font-size: var(--tg-fs-card); font-weight: var(--tg-fw-bold);
}

/* TEKNIK GRUPLAR — alan basina kart yok; grup basligi + bolmeler. */
.mk-specgroup + .mk-specgroup { margin-top: var(--tg-space-5); }
.mk-specgroup__k {
  font-size: var(--tg-fs-label); font-weight: var(--tg-fw-bold); letter-spacing: .1em;
  text-transform: uppercase; color: var(--tg-brand);
  margin-bottom: var(--tg-space-2);
}
/*
  Bolmeler GAP ile degil, hucre golgesiyle cizilir.

  "gap = kenarlik rengi" numarasi kolay ama izgarada BOS IZ kaldiginda o
  izler gri blok olarak gorunuyor: dort alanli bir grupta ucuncu sutun bos
  kalinca sayfada aciklanamayan gri bir dikdortgen olusuyordu.
  Ic golge yalniz DOLU hucreleri cizer; bos iz zeminle ayni kalir.
*/
.mk-specs {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0; background: var(--tg-surface);
  border: var(--tg-hairline) solid var(--tg-border);
  border-radius: var(--tg-r-sm); overflow: hidden;
}
.mk-spec {
  display: flex; flex-direction: column; gap: 1px;
  background: var(--tg-surface); padding: var(--tg-space-2) var(--tg-space-3);
  border: 0; box-shadow: inset -1px -1px 0 var(--tg-border);
}
.mk-spec-k { font-size: var(--tg-fs-label); font-weight: var(--tg-fw-bold); letter-spacing: var(--tg-ls-label); text-transform: uppercase; color: var(--tg-ink-muted); }
.mk-spec-v { font-size: var(--tg-fs-body); font-weight: var(--tg-fw-semi); color: var(--tg-ink); }

/* ── AKIS — YENIDEN BESTELENMIS GONDERI ────────────────────────────────────
   Sira: kimlik · METIN · medya · baglam seridi · aksiyonlar · tartisma. */
.bt-social-post {
  background: var(--tg-surface);
  border: var(--tg-hairline) solid var(--tg-border-card);
  border-radius: var(--tg-r-lg);
  margin-bottom: var(--tg-space-4);
  overflow: hidden;
}
.bt-social-post__header { padding: var(--tg-space-4); }
/* Metin MEDYADAN ONCE: soz once gelir. */
.bt-post-caption { padding: 0 var(--tg-space-4) var(--tg-space-4); font-size: var(--tg-fs-body); line-height: var(--tg-lh-body); color: var(--tg-ink); }
.bt-post-caption p { margin: 0; }
.bt-caption-more { background: none; border: 0; padding: var(--tg-space-1) 0 0; font: inherit; font-weight: var(--tg-fw-semi); color: var(--tg-ink-secondary); cursor: pointer; }
.bt-social-post__body { padding: 0; }
.bt-post-actions { display: flex; align-items: center; justify-content: space-between; padding: var(--tg-space-1) var(--tg-space-2); }
.bt-post-actions > div { display: flex; align-items: center; }
.bt-post-engagement { display: flex; align-items: center; gap: var(--tg-space-4); padding: 0 var(--tg-space-4) var(--tg-space-3); font-size: var(--tg-fs-meta); color: var(--tg-ink-secondary); }
.bt-post-engagement b { font-family: var(--tg-font-numeric); font-size: var(--tg-fs-card); font-weight: var(--tg-fw-semi); color: var(--tg-ink); }
.bt-social-post__context { padding: var(--tg-space-2) var(--tg-space-4) 0; }
.bt-post-context { font-size: var(--tg-fs-label); font-weight: var(--tg-fw-bold); letter-spacing: var(--tg-ls-label); text-transform: uppercase; color: var(--tg-brand); }

/* Yorum formu tartismanin parcasi. */
.bt-inline-comment-form { display: flex; align-items: center; gap: var(--tg-space-2); padding: var(--tg-space-3) var(--tg-space-4); border-top: var(--tg-hairline) solid var(--tg-divider); }
.bt-inline-comment-form textarea { flex: 1; min-height: var(--tg-tap-min); max-height: 120px; padding: var(--tg-space-3) var(--tg-space-4); font-size: var(--tg-fs-body); border-radius: var(--tg-r-md); background: var(--tg-surface-sunken); border-color: var(--tg-border); }
.bt-comment-login { display: block; padding: var(--tg-space-3) var(--tg-space-4); font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-semi); color: var(--tg-brand); border-top: var(--tg-hairline) solid var(--tg-divider); }

/* ── GEZINME — GENEL UST CUBUK ILE SIDEBAR AYNI URUN ───────────────────────
   Ikisi de: 40dp kontrol, 11px versal olmayan etiket, ayni aktif durak dili. */
.topnav-link { position: relative; }
.topnav-link.active::before {
  content: ""; position: absolute; left: 50%; bottom: -1px;
  width: var(--tg-space-2); height: var(--tg-space-2);
  margin-left: calc(var(--tg-space-2) / -2);
  border-radius: var(--tg-r-pill); background: var(--tg-rail-active);
  border: var(--tg-rail-w) solid var(--tg-surface);
}

/* ── Plaka izgarasi — panoda ucerli gruplar halinde. ─────────────────────── */
.tg-plate-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--tg-space-3); }

/* ── VIDEO CERCEVESI ──────────────────────────────────────────────────────
   `controls` KALDIRILMADI — kaldirmak oynatma anlamini ve erisilebilirligi
   degistirirdi (klavye, ekran okuyucu, altyazi menusu). Degisen yalniz
   cerceve: video kartin medya yuzeyine oturur, orani sabittir ve kartin
   yaricapina kirpilir. Tarayici kontrolleri kalir; "sayfaya yapistirilmis
   ham embed" gorunumu biter. */
.bt-post-slide--video {
  position: relative; background: var(--tg-media);
  display: flex; align-items: center; justify-content: center;
}
.bt-post-slide--video video {
  display: block; width: 100%; max-height: min(560px, 70vh);
  object-fit: contain; background: var(--tg-media);
}