/* ============================================================================
   BUSTOP TRANSIT GRID — URETIM YUZEYI GECISI (Faz 2)
   ----------------------------------------------------------------------------
   Bagimlilik: tokens.css -> bridge.css -> components.css -> BU DOSYA (en son)

   YAKLASIM
     Uretim arayuzu 20.000 satir PHP string birlestirmesiyle uretiliyor.
     Isaretlemeyi yeniden yazmak is mantigina dokunma riski demek. Bunun
     yerine MEVCUT sinif adlari Transit Grid dilbilgisine BURADA baglanir.
     Isaretleme ayni kalir, dil degisir.

     PHP yalnizca CSS'in duzeltemeyecegi seyler icin degistirilir:
     emoji ikonlar, kontrol olarak kullanilan Unicode isaretler, ve
     bilgi mimarisi gerektiren yapisal eklemeler.

   BU DOSYADA HAM DEGER YOKTUR — hepsi --tg-* token'indan okunur.
   ========================================================================== */

/* ══ 1. KURESEL KABUK ═══════════════════════════════════════════════════════
   Tipografi ve zemin. Manrope + 16px govde: 40+ okunurluk alt siniri. */
html { -webkit-text-size-adjust: 100%; }
body {
  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;
}
/* Fiyat/KM kolonlari kaymasin — rakamlar tek genislikte. */
body { font-variant-numeric: tabular-nums; }

h1, h2, h3, h4, h5, h6 { font-family: var(--tg-font-ui); color: var(--tg-ink); letter-spacing: -.01em; }
h1 { font-size: var(--tg-fs-screen);  line-height: var(--tg-lh-screen);  font-weight: var(--tg-fw-bold); }
h2 { font-size: var(--tg-fs-section); line-height: var(--tg-lh-section); font-weight: var(--tg-fw-bold); }
h3 { font-size: var(--tg-fs-card);    line-height: var(--tg-lh-card);    font-weight: var(--tg-fw-bold); }
small, .small { font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta); }

a { color: var(--tg-brand); }
hr { border: 0; border-top: var(--tg-hairline) solid var(--tg-divider); }

/* Tek odak halkasi — her bilesende yeniden tanimlanmaz. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--tg-stroke) solid var(--tg-focus);
  outline-offset: 2px;
  border-radius: var(--tg-r-sm);
}

/* Sayfa kabi ve oluk */
.container { max-width: var(--tg-content-max); padding-left: var(--tg-gutter); padding-right: var(--tg-gutter); }
.app-main  { background: var(--tg-canvas); }
.app-section { padding-top: var(--tg-space-6); padding-bottom: var(--tg-space-8); }

/* ══ 2. YASAKLARIN TOPTAN KALDIRILMASI ══════════════════════════════════════
   Cam panel, dekoratif gradyan ve "her yerde golge" tek yerden kapatilir.
   Bu, 81 gradyan + 25 backdrop-filter bildiriminin gorsel etkisini bitirir;
   dosyalari silmeden once gorunumu duzeltir. */
.topbar, .mobile-topbar, .ig-sidebar, .mobile-bottom-nav,
.card, .content-card, .mk-card, .listing-card, .job-card, .am-card,
.feed-card, .bt-social-card, .admin-card, .metric-card, .auth-card,
.login-card, .legal-card, .table-card, .preview-card, .discover-card,
.market-card, .part-card, .clip-card, .onboarding-card, .cta-card,
.feature-card, .new-role-card, .create-option-card, .mk-seller-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* Dekoratif gradyan zeminler duz anlamsal yuzeye iner.
   MEDYA ve OKUNURLUK ORTUSU haric — onlar .tg-clip__veil ve benzeri
   isaretli istisnalardir ve bu listede yer almaz. */
.hero, .page-hero, .mk-hero, .launch-hero, .cta-card, .feature-card,
.auth-hero, .onboarding-card, .stat-card, .admin-quick-card,
.pricing-card, .empty-state, .setup-warning {
  background-image: none;
}

/* ══ 3. BUTON AILESI ════════════════════════════════════════════════════════
   Bes bicim + bir yuzen. Hepsi 48dp yukseklik ve 12px yaricap paylasir;
   fark VURGU'dur, sekil degil. "Her buton hap" gorunumu kaldirilir. */
.btn, button.btn, a.btn, input[type="submit"], button[type="submit"]:not(.tg-btn):not(.ig-nav-item):not(.mbn-item) {
  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;
  background: var(--tg-brand); color: var(--tg-on-brand);
  box-shadow: none; letter-spacing: 0; cursor: pointer; text-decoration: none;
  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);
}
.btn:hover  { background: var(--tg-brand-strong); box-shadow: none; transform: none; }
.btn:active { background: var(--tg-brand-strong); transform: scale(.98); }
.btn.small  { min-height: var(--tg-tap-compact); padding: 0 var(--tg-space-4); font-size: var(--tg-fs-meta); }
.btn.block, .btn.full { display: flex; width: 100%; }
.btn[disabled], .btn.disabled { opacity: .45; pointer-events: none; }

/* Ikincil */
.btn.ghost, .btn.secondary, .btn.outline {
  background: var(--tg-surface); color: var(--tg-brand);
  border-color: var(--tg-brand-border); box-shadow: none;
}
.btn.ghost:hover, .btn.secondary:hover, .btn.outline:hover {
  background: var(--tg-brand-soft); border-color: var(--tg-brand); transform: none;
}
/* Sessiz */
.btn.quiet, .btn.link, .btn.text {
  background: transparent; color: var(--tg-ink-secondary); border-color: transparent;
}
.btn.quiet:hover, .btn.link:hover, .btn.text:hover { background: var(--tg-surface-raised); color: var(--tg-ink); }
/* Yikici */
.btn.danger, .btn.delete { background: var(--tg-danger); color: var(--tg-on-danger); }
.btn.danger:hover { background: var(--tg-danger); filter: brightness(.94); }
/* Onay */
.btn.good, .btn.success { background: var(--tg-success); color: var(--tg-ink-inverse); }

/* ══ 4. FORMLAR ═════════════════════════════════════════════════════════════
   Etiket alanin ustunde ve kalici; placeholder etiket yerine gecmez.
   Her kritik hedef 48dp. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
select, 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); box-shadow: none;
  transition: border-color var(--tg-dur-state) var(--tg-ease);
}
textarea { min-height: calc(var(--tg-tap-min) * 2); line-height: var(--tg-lh-body); resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--tg-ink-muted); }
input:focus, select:focus, textarea:focus {
  border-color: var(--tg-brand);
  outline: var(--tg-stroke) solid var(--tg-focus); outline-offset: 0;
  box-shadow: none;
}
input[aria-invalid="true"], .is-error input, .field-error input {
  border-color: var(--tg-danger); background: var(--tg-danger-soft);
}
label { font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta); font-weight: var(--tg-fw-semi); color: var(--tg-ink); }
/* Eski `label > input` sarmalayici deseni: etiket metni ustte, alan altta. */
label:has(> input), label:has(> select), label:has(> textarea) { display: block; }
label > input, label > select, label > textarea { margin-top: var(--tg-space-2); }
.form-hint, .field-hint, .help-text { font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta); color: var(--tg-ink-secondary); }
.form-error, .field-error-text { font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-semi); color: var(--tg-danger-ink); }
fieldset { border: 0; padding: 0; margin: 0 0 var(--tg-space-6); }
legend { 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); }

/* Onay kutusu ve radyo — 40+ icin buyutuldu, marka rengiyle. */
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; accent-color: var(--tg-brand); }

/* ══ 5. KART AILESI ═════════════════════════════════════════════════════════
   VARSAYILAN: duz yuzey + 1px kenarlik, 16px yaricap. Golge YOK.
   Dev yuvarlak kart gorunumu (24-32px) toptan kaldirilir. */
.card, .content-card, .admin-card, .table-card, .legal-card,
.preview-card, .market-card, .discover-card, .onboarding-card,
.mk-seller-card, .job-apply-card, .phone-verify-card {
  background: var(--tg-surface);
  border: var(--tg-hairline) solid var(--tg-border);
  border-radius: var(--tg-r-lg);
  box-shadow: none;
}

/* Bolum basligi ritmi — her alt basligi karta koymak yerine. */
.page-head { display: flex; align-items: flex-end; gap: var(--tg-space-4); flex-wrap: wrap; padding: var(--tg-space-6) 0 var(--tg-space-4); }
.page-head h1 { font-size: var(--tg-fs-screen); line-height: var(--tg-lh-screen); font-weight: var(--tg-fw-bold); margin: 0; }
/* ROTA MOTIFI: bolum basligi bir durak isaretiyle baslar. */
.page-head .eyebrow, .eyebrow {
  display: inline-flex; align-items: center; gap: var(--tg-space-2);
  font-size: var(--tg-fs-caption); font-weight: var(--tg-fw-bold);
  letter-spacing: .06em; text-transform: uppercase; color: var(--tg-brand);
  background: none; padding: 0; border-radius: 0;
}
.eyebrow::before {
  content: ""; width: var(--tg-stop-size); height: var(--tg-stop-size);
  border-radius: var(--tg-r-pill); background: var(--tg-rail-active); flex: none;
}

/* ══ 6. PAZAR YERI ══════════════════════════════════════════════════════════
   Kart bir EDITORYAL poster degil, bir KAYITTIR.
   Tarama sirasi: gorsel -> baslik -> fiyat -> spec -> yer/tarih -> satici. */
.mk-grid, .listing-grid, .part-grid, .job-grid {
  display: grid;
  /* 300px alt sinir: 1200'luk icerikte 3 okunur sutun verir. 260 ile 4 dar
     sutun cikiyor ve spec seridi iki satira boluniyordu — ayrac cizgileri
     sarma sonrasi yanlis hizalaniyor. Yogunluk okunurluktan once gelmez. */
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--tg-space-4);
}
.mk-card, .listing-card, .part-card, .job-card, .am-card {
  display: flex; flex-direction: column;
  background: var(--tg-surface);
  border: var(--tg-hairline) solid var(--tg-border);
  border-radius: var(--tg-r-lg);
  box-shadow: none; overflow: hidden;
  text-decoration: none; color: inherit;
  transition: border-color var(--tg-dur-state) var(--tg-ease);
}
.mk-card:hover, .listing-card:hover, .part-card:hover, .job-card:hover {
  border-color: var(--tg-brand-border); transform: none; box-shadow: none;
}
.mk-card-img, .listing-card-img, .part-card-img {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--tg-surface-raised); border-radius: 0;
}
.mk-card-img img, .listing-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-card-body, .listing-card-body, .part-card-body, .job-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-title, .listing-card-title, .job-card-title {
  font-size: var(--tg-fs-card); line-height: var(--tg-lh-card);
  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;
}
/* FIYAT — ekrandaki en yuksek sesli oge. */
.mk-price, .listing-price, .part-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;
}
/* SPEC SATIRI — yil/KM/koltuk. Barlow Condensed BURADA kazanir: uc deger
   yan yana ayni optik ritimde okunur, tarama hizini gercekten artirir. */
.mk-meta {
  display: flex; align-items: center; gap: var(--tg-space-2); flex-wrap: wrap;
  font-family: var(--tg-font-numeric);
  font-size: var(--tg-fs-section); line-height: var(--tg-lh-section);
  font-weight: var(--tg-fw-semi); letter-spacing: .01em;
  color: var(--tg-ink); font-variant-numeric: tabular-nums;
}
.mk-city, .listing-card-meta-row, .mk-date {
  display: flex; align-items: center; gap: var(--tg-space-2); flex-wrap: wrap;
  font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta);
  font-weight: var(--tg-fw-regular); color: var(--tg-ink-secondary);
}
/* Gorsel ustundeki kategori etiketi — sayac cipi dilbilgisi. */
.mk-cat, .listing-card-badges > span, .mk-badge {
  position: absolute; left: var(--tg-space-2); top: var(--tg-space-2);
  display: inline-flex; align-items: center; height: var(--tg-space-6);
  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);
  letter-spacing: .02em; box-shadow: none;
}
/* SATICI GUVENI — siniflandirma plakasi. Rozet yigini degil. */
.mk-seller-tag, .seller-tag, .mk-corp {
  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; white-space: nowrap;
}
.mk-seller-tag::before, .mk-corp::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);
}
/* Tanitim/one cikarma durumu — icerigin DURUMU, kimligi degil. */
.mk-promo, .promo-tag, .listing-promo {
  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);
  background: var(--tg-info-soft); color: var(--tg-info-ink);
  border: var(--tg-hairline) solid var(--tg-info-border);
  font-size: var(--tg-fs-caption); font-weight: var(--tg-fw-bold);
}

/* ══ 7. FILTRE / SIRALAMA — ISLEMSEL ═══════════════════════════════════════
   Sonuc sayisi solda, aksiyonlar sagda. Dev form karti yok. */
.mk-toolbar, .listing-toolbar, .filter-bar {
  display: flex; align-items: center; gap: var(--tg-space-2); flex-wrap: wrap;
  padding: var(--tg-space-3) 0;
}
.mk-count, .result-count { flex: 1; font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-semi); color: var(--tg-ink-secondary); }
.mk-chips, .chip-row, .role-filter-row {
  display: flex; gap: var(--tg-space-2); overflow-x: auto;
  padding-bottom: var(--tg-space-1); scrollbar-width: none;
}
.mk-chips::-webkit-scrollbar, .chip-row::-webkit-scrollbar { display: none; }
/* CIP — hap bicimi BURAYA ait: bir secim, bir aksiyon degil. */
.mk-chip, .chip, .role-filter-btn, .filter-toggle-btn {
  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); white-space: nowrap;
  text-decoration: none; box-shadow: none; cursor: pointer;
  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);
}
.mk-chip:hover, .chip:hover, .role-filter-btn:hover { border-color: var(--tg-brand-border); color: var(--tg-ink); }
.mk-chip.active, .chip.active, .role-filter-btn.active,
.mk-chip[aria-pressed="true"], .chip[aria-current="true"] {
  background: var(--tg-brand-soft); color: var(--tg-brand);
  border-color: var(--tg-brand); font-weight: var(--tg-fw-bold);
}
/* NOT (Faz 2.6): `.mk-filters` panel stili KALDIRILDI. Filtre artik pazar
   yeri KONTROL GUVERTESININ bir parcasi (`.mk-filters--deck`, bkz.
   components.css §22) ve kendi kutusu yok. Buradaki kural guverteyi
   eziyordu, cunku bu dosya components.css'ten sonra yukleniyor. */
.filter-panel {
  background: var(--tg-surface);
  border: var(--tg-hairline) solid var(--tg-border);
  border-radius: var(--tg-r-lg);
  padding: var(--tg-space-4);
  box-shadow: none;
}
details.mk-filters > summary, details.filter-panel > summary {
  display: flex; align-items: center; gap: var(--tg-space-2);
  min-height: var(--tg-tap-min); cursor: pointer; list-style: none;
  font-size: var(--tg-fs-body); font-weight: var(--tg-fw-semi); color: var(--tg-ink);
}
details.mk-filters > summary::-webkit-details-marker { display: none; }

/* ══ 8. ILAN DETAYI ═════════════════════════════════════════════════════════
   Her alan ayri bir kart DEGIL. Bolum ritmi. */
.detail-section, .mk-detail-section, .listing-detail-section {
  padding: var(--tg-space-6) 0;
  border-top: var(--tg-hairline) solid var(--tg-divider);
}
.detail-section:first-child { border-top: 0; padding-top: 0; }
.detail-section > h2, .detail-section > h3 {
  font-size: var(--tg-fs-section); line-height: var(--tg-lh-section);
  font-weight: var(--tg-fw-bold); margin: 0 0 var(--tg-space-3);
}
/* NOT (Faz 2.6): `.mk-specs` BURADAN KALDIRILDI. Teknik ozellikler artik
   anlamsal gruplar halinde ve bolmeler "gap = kenarlik" numarasiyla degil
   hucre ic golgesiyle ciziliyor (components.css §22) — o numara, bir grupta
   sutundan az alan oldugunda bos izi GRI BLOK olarak birakiyordu.
   Buradaki kural components.css'i eziyordu, cunku bu dosya sonra yukleniyor. */
.spec-list, .detail-specs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--tg-hairline);
  background: var(--tg-border);
  border: var(--tg-hairline) solid var(--tg-border);
  border-radius: var(--tg-r-md); overflow: hidden;
}
.spec-list > *, .detail-specs > * {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--tg-space-3);
  background: var(--tg-surface); padding: var(--tg-space-3) var(--tg-space-4);
  font-size: var(--tg-fs-meta); color: var(--tg-ink-secondary);
}
.spec-list b, .spec-list strong, .detail-specs b {
  font-family: var(--tg-font-numeric); font-size: var(--tg-fs-section);
  font-weight: var(--tg-fw-semi); color: var(--tg-ink);
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
}

/* ══ 9. SATIR DILBILGISI (ayarlar, listeler) ════════════════════════════════
   Ayar satiri KART DEGILDIR. Bolum basligi + sac teli cizgiyle ayrilmis
   satirlar. Ikon cizgidir, renkli kare icinde degil. */
.settings-list, .row-list, .link-list, .account-list {
  background: var(--tg-surface);
  border: var(--tg-hairline) solid var(--tg-border);
  border-radius: var(--tg-r-lg); overflow: hidden;
}
.settings-row, .row-item, .account-row, .link-list > a {
  display: flex; align-items: center; gap: var(--tg-space-3);
  min-height: var(--tg-tap-min); padding: var(--tg-space-3) var(--tg-space-4);
  background: transparent; border: 0; border-radius: 0;
  color: var(--tg-ink); text-decoration: none; box-shadow: none;
  transition: background var(--tg-dur-state) var(--tg-ease);
}
.settings-row + .settings-row, .row-item + .row-item, .link-list > a + a {
  box-shadow: inset 0 1px 0 var(--tg-divider);
}
.settings-row:hover, .row-item:hover, .link-list > a:hover { background: var(--tg-surface-raised); }
.settings-row-title, .row-title { font-size: var(--tg-fs-body); font-weight: var(--tg-fw-semi); color: var(--tg-ink); }
.settings-row-desc, .row-desc { font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta); color: var(--tg-ink-secondary); }
.settings-group-label, .row-group-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: var(--tg-space-5) var(--tg-space-1) var(--tg-space-2);
}

/* ══ 10. TABLOLAR (admin) ══════════════════════════════════════════════════ */
.table-card { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--tg-fs-meta); }
thead th {
  text-align: left; padding: var(--tg-space-3) var(--tg-space-4);
  background: var(--tg-surface-raised); color: var(--tg-ink-secondary);
  font-size: var(--tg-fs-caption); font-weight: var(--tg-fw-bold);
  letter-spacing: .05em; text-transform: uppercase;
  border-bottom: var(--tg-hairline) solid var(--tg-border);
}
tbody td { padding: var(--tg-space-3) var(--tg-space-4); border-top: var(--tg-hairline) solid var(--tg-divider); color: var(--tg-ink); vertical-align: top; }
tbody tr:hover { background: var(--tg-surface-raised); }

/* ══ 11. ROZET / DURUM ═════════════════════════════════════════════════════ */
.badge, .status-badge, .tag {
  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); box-shadow: none;
  font-size: var(--tg-fs-caption); font-weight: var(--tg-fw-bold);
  background: var(--tg-surface-raised); color: var(--tg-ink-secondary);
  border: var(--tg-hairline) solid var(--tg-border);
}
.badge.good, .badge.success, .status-approved { background: var(--tg-success-soft); color: var(--tg-success-ink); border-color: var(--tg-success-border); }
.badge.warn, .badge.warning, .status-pending  { background: var(--tg-warning-soft); color: var(--tg-warning-ink); border-color: var(--tg-warning-border); }
.badge.bad,  .badge.danger,  .status-rejected { background: var(--tg-danger-soft);  color: var(--tg-danger-ink);  border-color: var(--tg-danger-border); }
.badge.info { background: var(--tg-info-soft); color: var(--tg-info-ink); border-color: var(--tg-info-border); }
/* Dogrulama — TEK isaret, marka renginde. */
.bt-verified, .verified-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tg-space-5); height: var(--tg-space-5);
  color: var(--tg-brand); background: none; border: 0; font-style: normal; flex: none;
}

/* ══ 12. FLASH / TOAST ═════════════════════════════════════════════════════ */
.flash-container { position: fixed; left: 50%; transform: translateX(-50%); top: var(--tg-space-4); z-index: 900; width: min(560px, calc(100vw - var(--tg-space-8))); display: flex; flex-direction: column; gap: var(--tg-space-2); }
.flash {
  display: flex; align-items: center; gap: var(--tg-space-3);
  padding: var(--tg-space-3) var(--tg-space-4);
  border-radius: var(--tg-r-md); box-shadow: var(--tg-elev-pop);
  font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta); font-weight: var(--tg-fw-medium);
  background: var(--tg-surface); color: var(--tg-ink);
  border: var(--tg-hairline) solid var(--tg-border);
}
.flash-success { background: var(--tg-success-soft); color: var(--tg-success-ink); border-color: var(--tg-success-border); }
.flash-error, .flash-danger { background: var(--tg-danger-soft); color: var(--tg-danger-ink); border-color: var(--tg-danger-border); }
.flash-warning { background: var(--tg-warning-soft); color: var(--tg-warning-ink); border-color: var(--tg-warning-border); }
.flash-info { background: var(--tg-info-soft); color: var(--tg-info-ink); border-color: var(--tg-info-border); }
.flash span { flex: 1; }
.flash-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tg-space-6); height: var(--tg-space-6); flex: none;
  background: none; border: 0; color: currentColor; cursor: pointer; opacity: .7;
}
.flash-close:hover { opacity: 1; }
.setup-warning {
  background: var(--tg-warning-soft); color: var(--tg-warning-ink);
  border-bottom: var(--tg-hairline) solid var(--tg-warning-border);
  padding: var(--tg-space-2) 0; font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-semi);
}

/* ══ 13. BOS / HATA / ISKELET ══════════════════════════════════════════════
   Glif + tek cumle + TEK birincil aksiyon. Emoji yok. */
.empty-state, .mk-empty, .no-results {
  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);
  background: var(--tg-surface); border: var(--tg-hairline) solid var(--tg-border);
  border-radius: var(--tg-r-lg); box-shadow: none;
  color: var(--tg-ink-secondary);
}
.empty-state p, .mk-empty p, .no-results p {
  font-size: var(--tg-fs-body); line-height: var(--tg-lh-body);
  color: var(--tg-ink-secondary); max-width: 44ch; margin: 0;
}
.empty-state-title, .mk-empty h3 { font-size: var(--tg-fs-section); line-height: var(--tg-lh-section); font-weight: var(--tg-fw-bold); color: var(--tg-ink); margin: 0; }
/* Emoji tabanli bos-durum grafigi kaldirilir; yerine glif gelir (PHP'de). */
.mk-empty-emoji, .empty-state-emoji { display: none; }
.error-card, .not-found-card {
  background: var(--tg-surface); border: var(--tg-hairline) solid var(--tg-border);
  border-radius: var(--tg-r-lg); box-shadow: none; padding: var(--tg-space-8);
  text-align: center;
}
.bt-skeleton, .skeleton {
  background: var(--tg-surface-sunken); border-radius: var(--tg-r-sm);
  background-image: none;
}

/* ══ 14. SOSYAL AKIS ═══════════════════════════════════════════════════════
   Icerik once, cerceve minimum. Medya tam genislik. Instagram giydirmesi yok. */
.feed-card, .bt-social-card, .vitrin-feed-card {
  background: var(--tg-surface);
  border: var(--tg-hairline) solid var(--tg-border);
  border-radius: var(--tg-r-lg);
  box-shadow: none; overflow: hidden;
}
.feed-card-header, .bt-social-post__header { padding: var(--tg-space-3) var(--tg-space-4); gap: var(--tg-space-3); }
.bt-post-author b, .feed-card-author { font-size: var(--tg-fs-card); line-height: var(--tg-lh-card); font-weight: var(--tg-fw-bold); color: var(--tg-ink); }
/* ROL SATIRI — BusTop'a ozgu: kimin konustugu icerik kadar onemli. */
.bt-post-author small, .feed-card-role { font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta); color: var(--tg-ink-secondary); font-weight: var(--tg-fw-regular); }
.feed-card-body, .bt-social-card__body { padding: 0 var(--tg-space-4) var(--tg-space-3); font-size: var(--tg-fs-body); line-height: var(--tg-lh-body); color: var(--tg-ink); }
.feed-card-img-wrap, .bt-social-card__media, .vitrin-feed-img-wrap { background: var(--tg-surface-raised); border-radius: 0; }
.feed-card-actions, .bt-social-card__actions { display: flex; align-items: center; gap: var(--tg-space-1); padding: var(--tg-space-1) var(--tg-space-2); border-top: var(--tg-hairline) solid var(--tg-divider); }
.feed-action-btn, .like-btn, .comment-btn, .save-btn, .share-btn {
  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; border-radius: var(--tg-r-md);
  color: var(--tg-ink-secondary);
  font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-semi); cursor: pointer;
  transition: color var(--tg-dur-toggle) var(--tg-ease), background var(--tg-dur-state) var(--tg-ease);
}
.feed-action-btn:hover, .like-btn:hover { background: var(--tg-surface-raised); color: var(--tg-ink); }
/* SECILI DURUM: kalp secilmedigi surece ASLA kirmizi degil. */
.like-btn.liked, .feed-action-btn.liked, .like-btn[aria-pressed="true"] { color: var(--tg-like); }
.save-btn.saved, .feed-action-btn.saved, .save-btn[aria-pressed="true"] { color: var(--tg-brand); }
/* Yorum — baglamsal, ayri bir kart degil. */
.comment-item, .bt-comment { display: flex; gap: var(--tg-space-3); padding: var(--tg-space-3) var(--tg-space-4); }
.comment-bubble { background: var(--tg-surface-raised); border-radius: var(--tg-r-md); padding: var(--tg-space-2) var(--tg-space-3); }
/* Hikaye halkasi — okunmamis marka mavisi, okunmus sessiz kenar. Gradyan yok. */
.story-ring, .story-avatar-ring { background: var(--tg-brand); background-image: none; padding: 3px; border-radius: var(--tg-r-pill); }
.story-ring.seen, .story-avatar-ring.seen { background: var(--tg-border-strong); }

/* ══ 15. CLIPS ═════════════════════════════════════════════════════════════
   Tam ekran medya, siyah zemin. Kontroller 48dp, koyu sis uzerinde beyaz. */
.bt-reel-card, .clip-card { background: var(--tg-media); border-radius: var(--tg-r-lg); overflow: hidden; box-shadow: none; }
.bt-reel-info, .clip-info { color: var(--tg-ink-on-media); }
.bt-reel-author strong, .clip-author { font-size: var(--tg-fs-card); font-weight: var(--tg-fw-bold); }
.bt-reel-actions button, .clip-action {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: var(--tg-tap-min); min-height: var(--tg-tap-min);
  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: var(--tg-media-shadow);
}
/* Secilmemis begeni notr beyaz; secili begeni dolu ve sicak kirmizi. */
.bt-reel-actions button.liked, .clip-action.liked { color: var(--tg-like); }
.bt-reel-actions button.saved, .clip-action.saved { color: var(--tg-accent); }

/* ══ 16. MESAJLASMA ════════════════════════════════════════════════════════
   Yogun ve okunur. Dev balon yaricapi yok. */
.dm-conv-item, .conversation-item {
  display: flex; align-items: center; gap: var(--tg-space-3);
  min-height: var(--tg-tap-min); padding: var(--tg-space-3) var(--tg-space-4);
  border-radius: 0; box-shadow: none; background: transparent;
  border-bottom: var(--tg-hairline) solid var(--tg-divider);
}
.dm-conv-item:hover { background: var(--tg-surface-raised); }
.dm-conv-item.unread { background: var(--tg-brand-softer); }
.dm-bubble, .message-bubble {
  max-width: 76%; padding: var(--tg-space-2) var(--tg-space-3);
  border-radius: var(--tg-r-md); box-shadow: none;
  font-size: var(--tg-fs-body); line-height: var(--tg-lh-body);
  background: var(--tg-surface-raised); color: var(--tg-ink);
  border: var(--tg-hairline) solid var(--tg-border);
}
.dm-bubble.mine, .message-bubble.mine {
  background: var(--tg-brand); color: var(--tg-on-brand); border-color: var(--tg-brand);
}
.dm-composer, .message-composer {
  display: flex; align-items: flex-end; gap: var(--tg-space-2);
  padding: var(--tg-space-2) var(--tg-space-3);
  background: var(--tg-surface); border-top: var(--tg-hairline) solid var(--tg-border);
}

/* ══ 17. BILDIRIMLER ═══════════════════════════════════════════════════════
   Kompakt liste. Her bildirim bagimsiz bir kart DEGIL. */
.notif-item, .notification-row {
  display: flex; align-items: flex-start; gap: var(--tg-space-3);
  min-height: var(--tg-tap-min); padding: var(--tg-space-3) var(--tg-space-4);
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  border-bottom: var(--tg-hairline) solid var(--tg-divider);
}
.notif-item:hover { background: var(--tg-surface-raised); }
.notif-item.unread, .notification-row.unread { background: var(--tg-brand-softer); }
.notif-text { font-size: var(--tg-fs-body); line-height: var(--tg-lh-body); color: var(--tg-ink); }
.notif-time, .notif-meta { font-size: var(--tg-fs-meta); color: var(--tg-ink-secondary); }
/* Okunmamis isareti — nokta, rota motifiyle ayni dil. */
.notif-dot { width: var(--tg-space-2); height: var(--tg-space-2); border-radius: var(--tg-r-pill); background: var(--tg-brand); flex: none; }

/* ══ 18. ISTATISTIK ════════════════════════════════════════════════════════
   Jenerik SaaS panosu degil: guclu sayi, acik donem, gercek kiyas. */
.metric-card, .stat-card {
  background: var(--tg-surface); border: var(--tg-hairline) solid var(--tg-border);
  border-radius: var(--tg-r-lg); box-shadow: none; padding: var(--tg-space-4);
}
.metric-value, .stat-value, .stat-number {
  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; letter-spacing: .01em;
}
.metric-label, .stat-label {
  font-size: var(--tg-fs-caption); font-weight: var(--tg-fw-semi);
  letter-spacing: .05em; text-transform: uppercase; color: var(--tg-ink-secondary);
}
.metric-delta.up   { color: var(--tg-success-ink); }
.metric-delta.down { color: var(--tg-danger-ink); }

/* ══ 19. SHEET / MODAL — gercekten yuzen, golge BURADA anlamli ═════════════ */
.create-modal, .modal, .sheet, .bt-sheet {
  background: var(--tg-surface);
  border: var(--tg-hairline) solid var(--tg-border);
  border-radius: var(--tg-r-xl) var(--tg-r-xl) 0 0;
  box-shadow: var(--tg-elev-sheet);
}
.modal-centered, .story-modal-inner { border-radius: var(--tg-r-lg); box-shadow: var(--tg-elev-modal); }
.create-modal-overlay, .modal-overlay, .sidebar-overlay { background: var(--tg-scrim); backdrop-filter: none; }
.create-modal-handle { 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); }
.create-modal-title { font-size: var(--tg-fs-section); line-height: var(--tg-lh-section); font-weight: var(--tg-fw-bold); color: var(--tg-ink); padding: 0 var(--tg-space-4) var(--tg-space-3); }
/* Olustur secenekleri — satir dilbilgisi, ozellik-karti izgarasi degil. */
.create-options { display: flex; flex-direction: column; gap: 0; padding: 0 var(--tg-space-3); }
.create-option-card {
  display: flex; align-items: center; gap: var(--tg-space-3);
  min-height: var(--tg-tap-min); padding: var(--tg-space-3);
  background: transparent; border: 0; border-radius: var(--tg-r-md);
  box-shadow: none; text-decoration: none; color: var(--tg-ink);
}
.create-option-card + .create-option-card { box-shadow: inset 0 1px 0 var(--tg-divider); }
.create-option-card:hover { background: var(--tg-surface-raised); }
/* Ikon renkli kare icinde DEGIL — cizgi glif. */
.create-option-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tg-space-6); height: var(--tg-space-6); flex: none;
  background: none; border-radius: 0; color: var(--tg-ink-secondary);
}
.create-option-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: var(--tg-stroke); stroke-linecap: round; stroke-linejoin: round; }
.create-option-label { font-size: var(--tg-fs-body); font-weight: var(--tg-fw-semi); color: var(--tg-ink); }
.create-option-desc  { font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta); color: var(--tg-ink-secondary); }
.create-modal-close { width: 100%; min-height: var(--tg-tap-min); margin-top: var(--tg-space-3); background: transparent; border: 0; color: var(--tg-ink-secondary); font-size: var(--tg-fs-button); font-weight: var(--tg-fw-bold); cursor: pointer; }

/* ══ 20. KABUK: UST CUBUK, KENAR CUBUGU, ALT MENU, ALT BILGI ═══════════════ */
.topbar, .mobile-topbar {
  background: var(--tg-surface);
  border-bottom: var(--tg-hairline) solid var(--tg-border);
  box-shadow: none; backdrop-filter: none;
}
.topnav-link {
  display: inline-flex; align-items: center; min-height: var(--tg-tap-compact);
  padding: 0 var(--tg-space-3); border-radius: var(--tg-r-md);
  font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-semi);
  color: var(--tg-ink-secondary); text-decoration: none;
}
.topnav-link:hover { background: var(--tg-surface-raised); color: var(--tg-ink); }
/* AKTIF DURUM — rota segmenti + durak noktasi. */
.topnav-link.active { color: var(--tg-brand); font-weight: var(--tg-fw-bold); background: none; position: relative; }
.topnav-link.active::after {
  content: ""; position: absolute; left: var(--tg-space-3); right: var(--tg-space-3); bottom: -2px;
  height: var(--tg-rail-w); background: var(--tg-rail-active); border-radius: var(--tg-rail-w);
}
.brand-wordmark, .ig-sidebar-wordmark { font-family: var(--tg-font-ui); font-weight: var(--tg-fw-bold); letter-spacing: -.02em; color: var(--tg-ink); }

.ig-sidebar { background: var(--tg-surface); border-right: var(--tg-hairline) solid var(--tg-border); box-shadow: none; }
.ig-nav-item {
  display: flex; align-items: center; gap: var(--tg-space-3);
  width: 100%; min-height: var(--tg-tap-min); padding: 0 var(--tg-space-3);
  border-radius: var(--tg-r-md); border: 0; background: transparent;
  color: var(--tg-ink); text-decoration: none; box-shadow: none;
  font-size: var(--tg-fs-body); font-weight: var(--tg-fw-medium); cursor: pointer;
  transition: background var(--tg-dur-state) var(--tg-ease);
}
.ig-nav-item:hover { background: var(--tg-surface-raised); }
.ig-nav-item.active { color: var(--tg-brand); font-weight: var(--tg-fw-bold); background: var(--tg-brand-soft); }
.ig-nav-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--tg-space-6); height: var(--tg-space-6); flex: none; color: currentColor; }
.ig-nav-label { flex: 1; min-width: 0; text-align: left; }
.ig-nav-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--tg-space-5); height: var(--tg-space-5); padding: 0 var(--tg-space-1);
  border-radius: var(--tg-r-pill); background: var(--tg-danger); color: var(--tg-on-danger);
  font-size: var(--tg-fs-caption); font-weight: var(--tg-fw-bold); flex: none;
}

.mobile-bottom-nav {
  background: var(--tg-surface);
  border-top: var(--tg-hairline) solid var(--tg-border);
  box-shadow: none; backdrop-filter: none;
}
.mbn-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 56px; 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);
  text-decoration: none;
}
/* Etiket HER ZAMAN gorunur — yalniz ikon 40+ icin ogrenilen bir sifredir. */
.mbn-item span { display: block; }
.mbn-item.active { color: var(--tg-brand); font-weight: var(--tg-fw-bold); }
.mbn-create-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tg-space-8); height: var(--tg-space-8);
  border-radius: var(--tg-r-md); background: var(--tg-brand); color: var(--tg-on-brand);
  box-shadow: none;
}

.footer { background: var(--tg-surface); border-top: var(--tg-hairline) solid var(--tg-border); color: var(--tg-ink-secondary); font-size: var(--tg-fs-meta); }
.footer a { color: var(--tg-ink-secondary); text-decoration: none; }
.footer a:hover { color: var(--tg-brand); }

/* Kuresel arama */
.global-search-input {
  min-height: var(--tg-tap-min); padding: var(--tg-space-3) var(--tg-space-4);
  border-radius: var(--tg-r-md); border: var(--tg-hairline) solid var(--tg-border-strong);
  background: var(--tg-surface); font-size: var(--tg-fs-body); box-shadow: none;
}
.global-search-dropdown {
  background: var(--tg-surface); border: var(--tg-hairline) solid var(--tg-border);
  border-radius: var(--tg-r-md); box-shadow: var(--tg-elev-pop);
}

/* ══ 21. KIMLIK DOGRULAMA ══════════════════════════════════════════════════
   Profesyonel ve sakin. Pazarlama kahramani, dev gradyan, dekoratif sekil yok. */
.auth-card, .login-card {
  max-width: 420px; margin: var(--tg-space-10) auto;
  background: var(--tg-surface); border: var(--tg-hairline) solid var(--tg-border);
  border-radius: var(--tg-r-lg); box-shadow: none; padding: var(--tg-space-6);
  background-image: none;
}
.login-card-header, .auth-header { text-align: left; padding: 0 0 var(--tg-space-5); }
.login-card-header h1, .auth-header h1 { font-size: var(--tg-fs-screen); line-height: var(--tg-lh-screen); font-weight: var(--tg-fw-bold); margin: 0 0 var(--tg-space-2); }
.auth-sub { font-size: var(--tg-fs-body); line-height: var(--tg-lh-body); color: var(--tg-ink-secondary); }

/* ══ 22. MAGAZA / PROFESYONEL SATICI ═══════════════════════════════════════
   Buyutulmus sosyal profil DEGIL. Kapak alcak, ilk ekranda ilan gorunur. */
.store-header, .mk-store-header, .seller-header {
  background: var(--tg-surface); border-bottom: var(--tg-hairline) solid var(--tg-border);
  border-radius: 0; box-shadow: none;
}
.store-cover, .mk-store-cover { height: 120px; object-fit: cover; background: var(--tg-surface-raised); }
.store-name, .mk-store-name { font-size: var(--tg-fs-screen); line-height: var(--tg-lh-screen); font-weight: var(--tg-fw-bold); color: var(--tg-ink); }
.store-trust { display: flex; gap: var(--tg-space-2); flex-wrap: wrap; }

/* ══ 23. SEKMELER ══════════════════════════════════════════════════════════ */
.tabs, .tab-nav, .profile-tabs {
  display: flex; gap: var(--tg-space-1); overflow-x: auto; scrollbar-width: none;
  background: var(--tg-surface); border-bottom: var(--tg-hairline) solid var(--tg-border);
}
.tabs::-webkit-scrollbar, .tab-nav::-webkit-scrollbar { display: none; }
.tab, .tab-nav a, .profile-tab {
  position: relative; flex: none; display: inline-flex; align-items: center;
  min-height: var(--tg-tap-min); padding: 0 var(--tg-space-4);
  background: transparent; border: 0; border-radius: 0; white-space: nowrap;
  font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-semi);
  color: var(--tg-ink-secondary); text-decoration: none; cursor: pointer;
}
.tab:hover, .tab-nav a:hover { color: var(--tg-ink); }
.tab.active, .tab-nav a.active, .profile-tab.active { color: var(--tg-brand); font-weight: var(--tg-fw-bold); background: none; }
/* Rota segmenti + durak noktasi — tek basina alt cizgi 40+ icin zayif. */
.tab.active::after, .tab-nav a.active::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);
}
.tab.active::before, .tab-nav a.active::before {
  content: ""; position: absolute; left: 50%; bottom: calc(-1 * var(--tg-rail-w));
  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);
}

/* ══ 24. IKON SISTEMI — uretim isaretlemesinde ═════════════════════════════
   PHP'de <svg class="tg-i"><use href="#tg-..."/></svg> olarak kullanilir.
   Cizim ozellikleri KOKTE durur: `<use>` golge agacina yalniz kalitim gecer. */
.tg-i {
  display: inline-block; width: var(--tg-space-6); height: var(--tg-space-6);
  flex: none; vertical-align: middle; color: inherit;
  fill: none; stroke: currentColor; stroke-width: var(--tg-stroke);
  stroke-linecap: round; stroke-linejoin: round;
}
.tg-i--sm { width: var(--tg-space-5); height: var(--tg-space-5); }
.tg-i--xs { width: var(--tg-space-4); height: var(--tg-space-4); }
.tg-i--lg { width: var(--tg-space-8); height: var(--tg-space-8); }
.tg-i--xl { width: 64px; height: 64px; }
.tg-i.is-filled { fill: currentColor; }

/* ══ 25. DUYARLI DAVRANIS ══════════════════════════════════════════════════
   Oluk 16 -> 24 -> 32. Yatay tasma hicbir genislikte kabul edilmez. */
html, body { overflow-x: hidden; }
@media (min-width: 768px)  { :root { --tg-gutter: 24px; } }
@media (min-width: 1024px) { :root { --tg-gutter: 32px; } }
@media (max-width: 640px) {
  /* Pazar yeri mobilde tek sutun degil, iki sutun: tarama hizi icin
     kritik. Kart yeterince yogun oldugu icin 2 sutun okunur kalir. */
  .mk-grid, .listing-grid, .part-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tg-space-3); }
  .mk-card-body { padding: var(--tg-space-2) var(--tg-space-3) var(--tg-space-3); }
  .mk-price { font-size: var(--tg-fs-section); line-height: var(--tg-lh-section); }
  .mk-meta  { font-size: var(--tg-fs-card); line-height: var(--tg-lh-card); }
  .mk-card-title { font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta); }
}
/* TEK SUTUN ESIGI 400 -> 480.
   430px (iPhone 14 Pro Max) mobil bir genislik ama iki sutuna dusuyordu;
   kart ~190px kaliyor, fiyat ve Transit Data Plate okunmaz hale geliyordu.
   Olculdu: 430'da 2 sutun, 390'da 1 sutun. Mobil tek sutundur. */
@media (max-width: 480px) {
  .mk-grid, .listing-grid, .part-grid { grid-template-columns: 1fr; }
  .mk-card { flex-direction: row; }
  .mk-card-img { width: 108px; aspect-ratio: 4 / 3; flex: none; }
  .mk-card-body { flex: 1; min-width: 0; }
  .mk-card-title { font-size: var(--tg-fs-card); line-height: var(--tg-lh-card); }
}

/* ══ 26. HAREKETI AZALT ════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* ══ 27. PAZAR YERI — KART YAPISI (Faz 2 isaretleme gocu) ══════════════════
   `vnext_pages.php` icindeki kart artik sabit hiyerarsiyi uretiyor:
   gorsel > baslik > fiyat > marka/model > spec > yer·tarih > satici.
   Buradaki kurallar O yapiyi cizer. */

/* Marka/model — baslik ile spec arasinda sessiz bir kimlik satiri. */
.mk-model {
  font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta);
  font-weight: var(--tg-fw-medium); color: var(--tg-ink-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* SPEC SERIDI — arac bilgi panosu. Degerler sac teli ayracla bolunur;
   kartin icinde ikinci bir kart olusturmaz. */
/* Esit sutunlar, SARMAYAN tek satir: ayrac cizgileri her zaman hizali kalir.
   Sarmaya izin verilseydi ikinci satirin ilk ogesi bas ayrac gosterirdi. */
.mk-meta { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; flex-wrap: nowrap; }
.mk-cardspec {
  /* Ad bilincli: `.mk-spec` DETAY sayfasinin cerceveli ozellik kutusudur ve
     kart seridiyle ayni sey degildir. Ayni adi kullanmak, detaydaki kutu
     stilini kartin icine tasiyordu. */
  position: relative; min-width: 0; padding-right: var(--tg-space-2);
  background: none; border: 0; border-radius: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mk-cardspec + .mk-cardspec { padding-left: var(--tg-space-3); }
.mk-cardspec + .mk-cardspec::before {
  content: ""; position: absolute; left: 0; top: 15%; bottom: 15%;
  width: var(--tg-hairline); background: var(--tg-border);
}

/* Yer · tarih — tek satir, glif + metin. */
.mk-city { gap: var(--tg-space-1); }
.mk-city .tg-i { color: var(--tg-ink-muted); }
.mk-city > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-dot { width: 3px; height: 3px; border-radius: var(--tg-r-pill); background: var(--tg-ink-muted); flex: none; margin: 0 var(--tg-space-1); }
.mk-date { color: var(--tg-ink-secondary); white-space: nowrap; }

/* Guven satiri — siniflandirma + tanitim, en fazla iki oge yan yana. */
.mk-trust { display: flex; align-items: center; gap: var(--tg-space-2); flex-wrap: wrap; margin-top: var(--tg-space-1); }
.mk-seller-tag .tg-i { color: var(--tg-brand); margin-left: var(--tg-space-1); }

/* Gorseli olmayan ilan — sahte fotograf yok, durust bir yuzey ve glif. */
.mk-noimg {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  background: var(--tg-surface-raised); color: var(--tg-ink-muted);
}
.mk-noimg .tg-i { width: var(--tg-space-8); height: var(--tg-space-8); }

/* Kurumsal etiketi gorselin SAG ustunde — kategori solda kalir. */
.mk-corp { left: auto; right: var(--tg-space-2); }

/* ══ 28. PAZAR YERI — FILTRE / SIRALAMA GRAMERI ════════════════════════════
   Tek etkilesim dilbilgisi: Ara · Filtrele · Sırala · sonuç · aktif · temizle.
   Masaustunde panel, mobilde tam genislik. Dev form karti yok. */
.mk-wrap { padding-bottom: var(--tg-space-10); }
.mk-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--tg-space-4); flex-wrap: wrap;
  padding: var(--tg-space-6) 0 var(--tg-space-4);
  background: none; border: 0; border-radius: 0; box-shadow: none;
}
.mk-h1 { font-size: var(--tg-fs-screen); line-height: var(--tg-lh-screen); font-weight: var(--tg-fw-bold); margin: 0; }
.mk-head .muted { font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta); color: var(--tg-ink-secondary); margin: var(--tg-space-1) 0 0; }

.mk-search { display: flex; gap: var(--tg-space-2); align-items: stretch; }
.mk-search input { flex: 1 1 auto; min-width: 0; }
/* `flex: none` + ic bosluk, dar ekranda kabi tasiyordu. Kucultulebilir yap. */
.mk-search .btn { flex: 0 0 auto; padding: 0 var(--tg-space-4); }

/* "Filtrele" bir ozet satiridir; acildiginda alan izgarasi gelir. */
.mk-adv { margin-top: var(--tg-space-2); }
.mk-adv > summary {
  display: flex; align-items: center; gap: var(--tg-space-2);
  min-height: var(--tg-tap-min); padding: 0 var(--tg-space-2);
  list-style: none; cursor: pointer; border-radius: var(--tg-r-md);
  font-size: var(--tg-fs-body); font-weight: var(--tg-fw-semi); color: var(--tg-ink);
}
.mk-adv > summary::-webkit-details-marker { display: none; }
.mk-adv > summary:hover { background: var(--tg-surface-raised); }
/* Acilir/kapanir yon gostergesi: dondurulen bir sevron. Unicode ok kullanilmaz. */
.mk-adv > summary::before {
  content: ""; width: var(--tg-space-2); height: var(--tg-space-2); flex: none;
  border-right: var(--tg-stroke) solid var(--tg-ink-muted);
  border-bottom: var(--tg-stroke) solid var(--tg-ink-muted);
  transform: rotate(-45deg); margin: 0 var(--tg-space-1);
  transition: transform var(--tg-dur-state) var(--tg-ease);
}
.mk-adv[open] > summary::before { transform: rotate(45deg); }
/* Aktif filtre sayaci — ozetin uzerinde, gorulur. */
.mk-adv .mk-badge {
  position: static; display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--tg-space-5); height: var(--tg-space-5); padding: 0 var(--tg-space-1);
  border-radius: var(--tg-r-pill); background: var(--tg-brand); color: var(--tg-on-brand);
  font-size: var(--tg-fs-caption); font-weight: var(--tg-fw-bold);
}
.mk-fgrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--tg-space-3); padding: var(--tg-space-3) var(--tg-space-2) 0;
}
.mk-fgrid > label { display: block; font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-semi); color: var(--tg-ink); }
.mk-fgrid > label > input, .mk-fgrid > label > select, .mk-range { margin-top: var(--tg-space-2); }
.mk-range { display: flex; gap: var(--tg-space-2); }
.mk-chks { display: flex; gap: var(--tg-space-4); flex-wrap: wrap; align-items: center; grid-column: 1 / -1; }
.mk-chk { display: inline-flex; align-items: center; gap: var(--tg-space-2); min-height: var(--tg-tap-min); font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-medium); color: var(--tg-ink); cursor: pointer; }
.mk-chk input { width: 20px; height: 20px; margin: 0; }
.mk-fact { display: flex; align-items: center; gap: var(--tg-space-4); padding: var(--tg-space-4) var(--tg-space-2) var(--tg-space-1); }
.mk-clear { font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-semi); color: var(--tg-ink-secondary); text-decoration: none; }
.mk-clear:hover { color: var(--tg-danger-ink); }

/* Sonuc cubugu — sayi solda, siralama sagda. */
.mk-result-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--tg-space-3); flex-wrap: wrap;
  padding: var(--tg-space-4) 0 var(--tg-space-3);
}
.mk-count { font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-semi); color: var(--tg-ink-secondary); }
.mk-sort { display: inline-flex; align-items: center; gap: var(--tg-space-2); font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-semi); color: var(--tg-ink-secondary); }
.mk-sort select { width: auto; min-width: 160px; min-height: var(--tg-tap-compact); padding: 0 var(--tg-space-3); font-size: var(--tg-fs-meta); }

/* Sayfalama — 48dp hedef. */
.mk-pager { display: flex; gap: var(--tg-space-2); flex-wrap: wrap; justify-content: center; padding: var(--tg-space-6) 0 0; }
.mk-page {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--tg-tap-min); min-height: var(--tg-tap-min); padding: 0 var(--tg-space-3);
  border-radius: var(--tg-r-md); border: var(--tg-hairline) solid var(--tg-border-strong);
  background: var(--tg-surface); color: var(--tg-ink-secondary);
  font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-semi); text-decoration: none;
}
.mk-page:hover { border-color: var(--tg-brand-border); color: var(--tg-ink); }
.mk-page.active { background: var(--tg-brand-soft); border-color: var(--tg-brand); color: var(--tg-brand); font-weight: var(--tg-fw-bold); }

/* Bos durum glifi */
.mk-empty .tg-i { color: var(--tg-ink-muted); }

@media (max-width: 640px) {
  .mk-head { padding-top: var(--tg-space-4); }
  .mk-model { display: none; }          /* dar ekranda baslik zaten tasiyor */
  .mk-result-bar { padding-top: var(--tg-space-3); }
  .mk-sort select { min-width: 128px; }
  /* Esit sutunlar dar ekranda degeri kirpiyor ("220.00…"). Akan satira gec:
     deger TAM okunur, ayrac yerini nokta alir. Kirpilmis bir KM degeri,
     hizali bir ayractan daha kotudur. */
  .mk-meta { display: flex; flex-wrap: wrap; column-gap: var(--tg-space-2); row-gap: 2px; }
  .mk-cardspec { padding-right: 0; }
  .mk-cardspec + .mk-cardspec { padding-left: var(--tg-space-3); }
  .mk-cardspec + .mk-cardspec::before { top: 25%; bottom: 25%; }
  /* ARAMA SATIRI ARTIK YIGILMIYOR.
     Onceden `flex-wrap: wrap` + iki ogeye de `flex: 1 1 100%` veriliyordu;
     kutu ve "Ara" alt alta geciyordu. Olculdu: kontrol guvertesi mobilde
     222px, ilk ilan 678px asagida — kullanici tek bir ilan gormeden yarim
     ekran kaydiriyordu. 390px'te kutu (~270px) ve buton (~90px) yan yana
     rahat siğiyor. */
  .mk-search { flex-wrap: nowrap; }
  .mk-search input { flex: 1 1 auto; min-width: 0; }
  .mk-search .btn { flex: 0 0 auto; width: auto; padding: 0 var(--tg-space-4); white-space: nowrap; }
}

/* ══ 29. PAZAR YERI — DAR EKRAN SATIR KARTI (<=400) ════════════════════════
   390'da kart satira doner: sol 108px gorsel, sag icerik. Bu genislikte
   gorsel ustundeki kategori/kurumsal etiketleri okunamayacak kadar kucuk
   kaliyor ve gorselin kenarindan tasiyor — kaldirilirlar. Kategori zaten
   baslikta ve cip satirinda var; ayni bilgiyi ucuncu kez gostermek yer
   harcamaktan baska is yapmiyor. */
@media (max-width: 480px) {
  .mk-cat, .mk-corp { display: none; }
  .mk-card-img { border-radius: 0; }
  /* Yer · tarih tek satirda kalsin; sigmiyorsa tarih kirpilir, yer degil. */
  .mk-city { flex-wrap: nowrap; }
  .mk-date { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  /* Sonuc cubugu: sayi solda, siralama sagda — ortalanmasin. */
  .mk-result-bar { justify-content: space-between; }
  .mk-result-bar .mk-count { flex: 1 1 auto; }
}

/* ══ 30. ILAN DETAYI — BOLUM RITMI ═════════════════════════════════════════
   Her alan ayri bir KART DEGIL. Tek yuzey, sac teli cizgilerle bolunmus
   bloklar: baslik/fiyat/spec · teknik · aciklama · satici/aksiyon.
   Bu, "her seyi karta koy" refleksinin panzehiri. */
.mk-detail { padding-bottom: var(--tg-space-12); }
.mk-back {
  display: inline-flex; align-items: center; gap: var(--tg-space-1);
  min-height: var(--tg-tap-min); padding: 0 var(--tg-space-2) 0 0;
  font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-semi);
  color: var(--tg-ink-secondary); text-decoration: none;
}
.mk-back:hover { color: var(--tg-brand); }

.mk-detail-body {
  background: var(--tg-surface);
  border: var(--tg-hairline) solid var(--tg-border);
  border-radius: var(--tg-r-lg); box-shadow: none; overflow: hidden;
}
.mk-block { padding: var(--tg-space-5) var(--tg-space-5); }
.mk-block + .mk-block { border-top: var(--tg-hairline) solid var(--tg-divider); }
.mk-block--head { padding-bottom: var(--tg-space-4); }
.mk-sec {
  font-size: var(--tg-fs-section); line-height: var(--tg-lh-section);
  font-weight: var(--tg-fw-bold); color: var(--tg-ink);
  margin: 0 0 var(--tg-space-3);
}
.mk-detail-title { font-size: var(--tg-fs-screen); line-height: var(--tg-lh-screen); font-weight: var(--tg-fw-bold); color: var(--tg-ink); margin: 0 0 var(--tg-space-2); }
/* Fiyat en yuksek sesli oge ama MARKA RENGI DEGIL — mavi fiyat, mavi butonla
   yarisir ve aksiyonu zayiflatir. */
.mk-detail-price {
  font-size: var(--tg-fs-display); line-height: var(--tg-lh-display);
  font-weight: var(--tg-fw-bold); letter-spacing: -.02em;
  color: var(--tg-ink); margin: 0;
}

/* BIRINCIL SPEC SERIDI — arac bilgi panosu. Etiket sessiz, deger baskin. */
.mk-hero-specs {
  display: flex; margin-top: var(--tg-space-4);
  background: var(--tg-surface-raised);
  border: var(--tg-hairline) solid var(--tg-border);
  border-radius: var(--tg-r-md); overflow: hidden;
}
.mk-hero-cell { flex: 1; min-width: 0; padding: var(--tg-space-2) var(--tg-space-3); text-align: center; }
.mk-hero-cell + .mk-hero-cell { border-left: var(--tg-hairline) solid var(--tg-border); }
.mk-hero-k {
  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);
}
.mk-hero-v {
  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; letter-spacing: .01em;
}

/* NOT (Faz 2.6): teknik ozellik kurallari BURADAN KALDIRILDI.
   Ozellikler artik anlamsal gruplar halinde ve bolmeler hucre ic golgesiyle
   ciziliyor — bkz. components.css §22. Bu dosya components.css'ten SONRA
   yuklendigi icin buradaki eski kurallar yeniyi eziyor ve bir grupta
   sutundan az alan oldugunda bos izi GRI BLOK olarak birakiyordu. */

.mk-desc { font-size: var(--tg-fs-body); line-height: var(--tg-lh-body); color: var(--tg-ink); margin: 0; max-width: var(--tg-reading-max); }

/* Etiketler — durum rozeti dilbilgisi, hap yigini degil. */
.mk-tags { display: flex; gap: var(--tg-space-2); flex-wrap: wrap; margin-top: var(--tg-space-3); }
.mk-tag {
  display: inline-flex; align-items: center; height: var(--tg-space-6);
  padding: 0 var(--tg-space-2); 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);
}
.mk-tag.vip { background: var(--tg-brand-soft); color: var(--tg-brand); border-color: var(--tg-brand-border); }
.mk-status {
  display: inline-flex; align-items: center; height: var(--tg-space-6);
  padding: 0 var(--tg-space-3); margin-bottom: var(--tg-space-2);
  border-radius: var(--tg-r-sm);
  background: var(--tg-warning-soft); color: var(--tg-warning-ink);
  border: var(--tg-hairline) solid var(--tg-warning-border);
  font-size: var(--tg-fs-caption); font-weight: var(--tg-fw-bold); letter-spacing: .04em;
}

/* Satici kimligi — magaza dilbilgisiyle ayni, kucultulmus. */
.mk-seller { display: flex; align-items: center; gap: var(--tg-space-3); }
.mk-seller-av {
  display: 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);
}
.mk-seller-name { display: flex; align-items: center; gap: var(--tg-space-1); font-size: var(--tg-fs-card); font-weight: var(--tg-fw-bold); color: var(--tg-ink); }
.mk-seller-name .tg-i { color: var(--tg-brand); }
.mk-seller-type { display: flex; align-items: center; gap: var(--tg-space-1); font-size: var(--tg-fs-meta); color: var(--tg-ink-secondary); }
.mk-seller-type .tg-i { color: var(--tg-ink-muted); }
.mk-action { margin-top: var(--tg-space-4); }
.mk-owner-note {
  padding: var(--tg-space-3) var(--tg-space-4); border-radius: var(--tg-r-md);
  background: var(--tg-info-soft); color: var(--tg-info-ink);
  border: var(--tg-hairline) solid var(--tg-info-border);
  font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-semi); text-align: center;
}

/* Galeri — medya once. Tek sutun genis, coklu gorsel yatay kayar. */
.mk-gallery {
  display: flex; gap: var(--tg-space-2); overflow-x: auto;
  margin-bottom: var(--tg-space-4); scrollbar-width: none;
  border-radius: var(--tg-r-lg); background: var(--tg-media);
}
.mk-gallery::-webkit-scrollbar { display: none; }
.mk-gallery img { flex: none; width: min(100%, 720px); aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; }
/* TEK FOTOGRAFLI ILAN — olu siyah alan birakma.

   Galeri yatay bir kaydiriciydi ve her kare 720px'e sabitti. Iki veya daha
   cok fotografta kareler kabi doldurur; TEK fotografta 1097px'lik kabin
   377px'i bos kalir ve altindaki medya zemini (siyah) genis bir seride
   donusur. Olculdu: img 720px, kap 1097px.

   Tek kare artik kabin tamamini kaplar ve masaustu icin bilincli bir orana
   oturur. Oran, fotograf HIC yokken kullanilan `.mk-gallery-empty` ile AYNI
   (16/7): medya seridi, ilanda fotograf olsa da olmasa da ayni yuksekligi
   tutar, sayfa duzeni ilandan ilana ziplamaz. */
.mk-gallery img:only-child { width: 100%; aspect-ratio: 16 / 7; }
.mk-gallery-empty {
  width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--tg-space-2); aspect-ratio: 16 / 7; margin-bottom: var(--tg-space-4);
  background: var(--tg-surface-raised); color: var(--tg-ink-muted);
  border: var(--tg-hairline) solid var(--tg-border); border-radius: var(--tg-r-lg);
  font-size: var(--tg-fs-meta);
}

@media (max-width: 640px) {
  .mk-block { padding: var(--tg-space-4); }
  .mk-detail-title { font-size: var(--tg-fs-section); line-height: var(--tg-lh-section); }
  .mk-detail-price { font-size: var(--tg-fs-price); line-height: var(--tg-lh-price); }
  .mk-hero-v { font-size: var(--tg-fs-section); line-height: var(--tg-lh-section); }
  .mk-gallery img { width: 100%; }
}

/* ══ 31. IS ILANI KARTI ════════════════════════════════════════════════════
   Arac kartiyla AYNI iskelet; fiyat yerine UCRET, spec yerine SART. */
.job-card { padding: var(--tg-space-4); gap: var(--tg-space-2); }
.job-card-top { display: flex; align-items: center; gap: var(--tg-space-2); flex-wrap: wrap; }
.job-pos, .job-emp {
  display: inline-flex; align-items: center; 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);
  background: var(--tg-surface-raised); color: var(--tg-ink-secondary);
  border: var(--tg-hairline) solid var(--tg-border);
}
.job-pos { background: var(--tg-brand-soft); color: var(--tg-brand); border-color: var(--tg-brand-border); }
.job-title { font-size: var(--tg-fs-card); line-height: var(--tg-lh-card); font-weight: var(--tg-fw-bold); color: var(--tg-ink); margin: 0; }
/* Ucret ilanin en yuksek sesli ogesi — arac kartindaki fiyatin karsiligi. */
.job-salary {
  font-family: var(--tg-font-numeric);
  font-size: var(--tg-fs-price); line-height: var(--tg-lh-price);
  font-weight: var(--tg-fw-semi); color: var(--tg-ink);
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
}
.job-company { font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-medium); color: var(--tg-ink-secondary); }
.job-meta { display: flex; align-items: center; gap: var(--tg-space-1); font-size: var(--tg-fs-meta); color: var(--tg-ink-secondary); }
.job-meta .tg-i { color: var(--tg-ink-muted); }
.job-tags { display: flex; gap: var(--tg-space-2); flex-wrap: wrap; }
.job-tags > span {
  display: inline-flex; align-items: center; height: var(--tg-space-6);
  padding: 0 var(--tg-space-2); 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-semi);
}

/* ══ 32. ILAN OLUSTURMA STUDYOSU ═══════════════════════════════════════════
   Yonlendirilmis, bolumlu akis. Jenerik admin formu gorunumu reddedildi. */
.bt-studio { max-width: var(--tg-content-max); margin: 0 auto; padding: var(--tg-space-4) var(--tg-gutter) var(--tg-space-12); }
.bt-studio__back {
  display: inline-flex; align-items: center; gap: var(--tg-space-1);
  min-height: var(--tg-tap-min); font-size: var(--tg-fs-meta);
  font-weight: var(--tg-fw-semi); color: var(--tg-ink-secondary); text-decoration: none;
}
.bt-studio__back:hover { color: var(--tg-brand); }
.bt-studio__hero {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--tg-space-4); flex-wrap: wrap;
  padding: var(--tg-space-2) 0 var(--tg-space-5);
  background: none; background-image: none; border: 0; box-shadow: none;
}
.bt-studio__eyebrow {
  display: inline-flex; align-items: center; gap: var(--tg-space-2);
  font-size: var(--tg-fs-caption); font-weight: var(--tg-fw-bold);
  letter-spacing: .06em; text-transform: uppercase; color: var(--tg-brand);
}
.bt-studio__eyebrow::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);
}
.bt-studio__title { font-size: var(--tg-fs-display); line-height: var(--tg-lh-display); font-weight: var(--tg-fw-bold); letter-spacing: -.02em; color: var(--tg-ink); margin: var(--tg-space-2) 0 var(--tg-space-2); }
.bt-studio__lead { font-size: var(--tg-fs-body); line-height: var(--tg-lh-body); color: var(--tg-ink-secondary); margin: 0; max-width: var(--tg-reading-max); }
.bt-studio__trust {
  display: inline-flex; align-items: center; gap: var(--tg-space-2);
  padding: var(--tg-space-2) var(--tg-space-3); border-radius: var(--tg-r-md);
  background: var(--tg-success-soft); color: var(--tg-success-ink);
  border: var(--tg-hairline) solid var(--tg-success-border);
  font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-semi);
}

/* ADIM CIZGISI — ROTA HATTI + DURAK NOKTASI.
   Urunun imza motifi burada tam yerine oturuyor: ilan hazirlamak sirali bir
   yolculuk. Tamamlanan durak dolu, bulunulan durak halkali, bekleyen bos. */
.bt-stepper {
  position: relative; display: flex; gap: 0;
  padding: var(--tg-space-4) 0 var(--tg-space-6);
  overflow-x: auto; scrollbar-width: none;
}
.bt-stepper::-webkit-scrollbar { display: none; }
.bt-step {
  position: relative; flex: 1 1 0; min-width: 128px;
  display: flex; flex-direction: column; align-items: center; gap: var(--tg-space-2);
  padding: 0 var(--tg-space-2);
  font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta);
  font-weight: var(--tg-fw-medium); color: var(--tg-ink-secondary); text-align: center;
  background: none; border: 0; border-radius: 0; box-shadow: none;
}
/* Duraklar arasi hat — ilk adimin solunda, sonuncunun saginda cizilmez. */
.bt-step::before {
  content: ""; position: absolute; top: calc(var(--tg-space-6) / 2 - var(--tg-rail-w) / 2);
  left: -50%; right: 50%; height: var(--tg-rail-w);
  background: var(--tg-rail-color);
}
.bt-step:first-child::before { display: none; }
.bt-step__num {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tg-space-6); height: var(--tg-space-6); flex: none;
  border-radius: var(--tg-r-pill);
  background: var(--tg-surface); color: var(--tg-ink-secondary);
  border: var(--tg-rail-w) solid var(--tg-rail-color);
  font-family: var(--tg-font-numeric);
  font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-bold);
}
.bt-step.is-current { color: var(--tg-ink); font-weight: var(--tg-fw-bold); }
.bt-step.is-current .bt-step__num {
  border-color: var(--tg-rail-active); color: var(--tg-brand);
  box-shadow: 0 0 0 var(--tg-stop-ring) var(--tg-brand-soft);
}
.bt-step.is-done .bt-step__num { background: var(--tg-rail-active); border-color: var(--tg-rail-active); color: var(--tg-on-brand); }
.bt-step.is-done::before { background: var(--tg-rail-active); }

/* PANELLER — bolum ritmi: baslik + aciklama + alan izgarasi. */
.bt-form { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--tg-space-6); align-items: start; }
.bt-form__main { display: flex; flex-direction: column; gap: var(--tg-space-4); min-width: 0; }
.bt-panel {
  background: var(--tg-surface);
  border: var(--tg-hairline) solid var(--tg-border);
  border-radius: var(--tg-r-lg); box-shadow: none;
  padding: var(--tg-space-5);
}
.bt-panel__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--tg-space-3); flex-wrap: wrap; margin-bottom: var(--tg-space-4);
}
.bt-panel__head h2 { font-size: var(--tg-fs-section); line-height: var(--tg-lh-section); font-weight: var(--tg-fw-bold); color: var(--tg-ink); margin: 0; }
.bt-panel__head p { font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta); color: var(--tg-ink-secondary); margin: var(--tg-space-1) 0 0; max-width: 52ch; }
.bt-panel__badge {
  display: inline-flex; align-items: center; height: var(--tg-space-6);
  padding: 0 var(--tg-space-2); 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); white-space: nowrap;
}
.bt-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--tg-space-4); }
.bt-field { display: flex; flex-direction: column; min-width: 0; }
.bt-field--full { grid-column: 1 / -1; }
/* Etiket alanin USTUNDE ve kalici — placeholder etiket yerine gecmez. */
.bt-field > label {
  display: block; margin-bottom: 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-ink);
}
.bt-field .req { color: var(--tg-danger-ink); }
.bt-field__hint { margin-top: var(--tg-space-2); font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta); color: var(--tg-ink-secondary); }

/* Medya alani — surukle-birak, kart degil calisma yuzeyi. */
.bt-dropzone {
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: var(--tg-space-8) var(--tg-space-4);
  background: var(--tg-surface-sunken);
  border: var(--tg-stroke) dashed var(--tg-border-strong);
  border-radius: var(--tg-r-lg); cursor: pointer;
  transition: border-color var(--tg-dur-state) var(--tg-ease), background var(--tg-dur-state) var(--tg-ease);
}
.bt-dropzone:hover, .bt-dropzone.is-over { border-color: var(--tg-brand); background: var(--tg-brand-softer); }
.bt-dropzone strong { display: block; font-size: var(--tg-fs-body); font-weight: var(--tg-fw-bold); color: var(--tg-ink); margin-bottom: var(--tg-space-1); }
.bt-dropzone span { font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta); color: var(--tg-ink-secondary); }
.bt-dropzone__icon { color: var(--tg-ink-muted); margin-bottom: var(--tg-space-2); }
.bt-dropzone__icon svg { width: var(--tg-space-8); height: var(--tg-space-8); }
.bt-media-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--tg-space-3); flex-wrap: wrap; padding: var(--tg-space-3) 0; font-size: var(--tg-fs-meta); color: var(--tg-ink-secondary); }
.bt-media-count { font-weight: var(--tg-fw-semi); color: var(--tg-ink); }
.bt-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: var(--tg-space-2); }
.bt-media-tile { position: relative; aspect-ratio: 4 / 3; border-radius: var(--tg-r-md); overflow: hidden; background: var(--tg-surface-raised); border: var(--tg-hairline) solid var(--tg-border); }
.bt-media-errors:not(:empty) {
  margin-top: var(--tg-space-3); padding: var(--tg-space-3);
  border-radius: var(--tg-r-md); background: var(--tg-danger-soft);
  color: var(--tg-danger-ink); border: var(--tg-hairline) solid var(--tg-danger-border);
  font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-medium);
}

/* Yan sutun — ozet ve yayin. Yapisir, formla birlikte kaymaz. */
.bt-form__side { display: flex; flex-direction: column; gap: var(--tg-space-4); position: sticky; top: var(--tg-space-4); min-width: 0; }
.bt-summary, .bt-publish {
  background: var(--tg-surface); border: var(--tg-hairline) solid var(--tg-border);
  border-radius: var(--tg-r-lg); box-shadow: none; padding: var(--tg-space-4);
}
.bt-summary h3, .bt-publish h3 { font-size: var(--tg-fs-card); line-height: var(--tg-lh-card); font-weight: var(--tg-fw-bold); color: var(--tg-ink); margin: 0 0 var(--tg-space-3); }

@media (max-width: 1024px) {
  .bt-form { grid-template-columns: minmax(0, 1fr); }
  .bt-form__side { position: static; }
}
@media (max-width: 640px) {
  .bt-studio__title { font-size: var(--tg-fs-screen); line-height: var(--tg-lh-screen); }
  .bt-panel { padding: var(--tg-space-4); }
  .bt-fields { grid-template-columns: minmax(0, 1fr); }
  /* Adim cizgisi dar ekranda yatay kayar; hedefler 48dp kalir. */
  .bt-step { min-width: 108px; font-size: var(--tg-fs-caption); }
}

/* ══ 33. KIMLIK DOGRULAMA ══════════════════════════════════════════════════
   Iki panelli yerlesim KORUNUR — sol panel pazarlama sisi degil, urunun ne
   yaptigini soyleyen dort gercek madde. Kaldirilanlar: 145deg gradyan,
   dekoratif daireler, 30px yaricap, 80px'lik golge.
   Kalan: duz derin mavi bir yuzey, marka mavisiyle ayni ailede. */
.login-page-wrap, .auth-section {
  background: var(--tg-canvas); background-image: none;
  padding: var(--tg-space-6) var(--tg-gutter) var(--tg-space-12);
  min-height: auto;
}
.login-split {
  width: min(1020px, 100%); margin: 0 auto;
  border: var(--tg-hairline) solid var(--tg-border);
  border-radius: var(--tg-r-lg);
  box-shadow: none;                      /* giris sayfasi yuzmez */
  background: var(--tg-surface);
  overflow: hidden;
}
.login-brand-panel {
  /* Duz yuzey. Gradyan bir MARKA degil, bir efektti.
     `--tg-brand-strong` DEGIL `--tg-brand-panel`: brand-strong koyu temada
     acilir (#82B4FF) ve uzerindeki beyaz metin okunmaz hale gelirdi.
     Bu panel markali bir yuzeydir; her iki temada ayni derin maviyi tutar. */
  background: var(--tg-brand-panel); background-image: none;
  padding: var(--tg-space-8) var(--tg-space-6);
}
/* Dekoratif daireler kaldirildi — bilgi tasimiyorlardi. */
.login-brand-panel::before, .login-brand-panel::after { content: none; display: none; }
.login-logo-row { display: flex; align-items: center; gap: var(--tg-space-3); margin-bottom: var(--tg-space-8); }
.login-wordmark { font-size: var(--tg-fs-section); font-weight: var(--tg-fw-bold); letter-spacing: -.02em; color: var(--tg-on-brand-panel); }
.login-tagline {
  font-size: var(--tg-fs-display); line-height: var(--tg-lh-display);
  font-weight: var(--tg-fw-bold); letter-spacing: -.02em;
  color: var(--tg-on-brand-panel); margin: 0 0 var(--tg-space-6);
}
.login-feature-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--tg-space-3); }
.login-feature-list li { display: flex; align-items: center; gap: var(--tg-space-3); font-size: var(--tg-fs-body); color: var(--tg-on-brand-panel); }
.lf-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--tg-space-6); height: var(--tg-space-6); flex: none; color: var(--tg-on-brand-panel); opacity: .82; background: none; border-radius: 0; }
.login-brand-copy { margin: var(--tg-space-8) 0 0; font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta); color: var(--tg-on-brand-panel); opacity: .76; }

.login-form-panel { padding: var(--tg-space-8) var(--tg-space-6); background: var(--tg-surface); }
.login-card, .auth-card {
  border: 0; border-radius: 0; box-shadow: none; padding: 0;
  background: transparent; max-width: 400px; margin: 0 auto;
}
.auth-card.wide { max-width: 720px; }
.login-card-header h1, .auth-card h1 {
  font-size: var(--tg-fs-screen); line-height: var(--tg-lh-screen);
  font-weight: var(--tg-fw-bold); letter-spacing: -.015em;
  color: var(--tg-ink); margin: 0 0 var(--tg-space-2);
}
.login-card-header p { font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta); color: var(--tg-ink-secondary); margin: 0 0 var(--tg-space-6); }
.login-field { margin-bottom: var(--tg-space-4); }
.login-field input, .auth-card input, .auth-card select, .auth-card textarea { border-radius: var(--tg-r-md); }
.auth-notice {
  border-radius: var(--tg-r-md); border: var(--tg-hairline) solid var(--tg-info-border);
  background: var(--tg-info-soft); color: var(--tg-info-ink);
  padding: var(--tg-space-3); font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta);
}
.gsi-divider { display: flex; align-items: center; gap: var(--tg-space-3); color: var(--tg-ink-muted); font-size: var(--tg-fs-caption); margin: var(--tg-space-4) 0; }
.gsi-divider::before, .gsi-divider::after { content: ""; height: var(--tg-hairline); background: var(--tg-border); flex: 1; }
.auth-links { font-size: var(--tg-fs-meta); color: var(--tg-ink-secondary); margin-top: var(--tg-space-4); }
.checkline { display: flex; align-items: flex-start; gap: var(--tg-space-2); line-height: var(--tg-lh-meta); font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-regular); color: var(--tg-ink-secondary); }
.checkline input { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 1px; }

@media (max-width: 900px) {
  .login-brand-panel { display: none; }   /* dar ekranda form tek is */
  .login-form-panel { padding: var(--tg-space-6) var(--tg-space-4); }
}

/* ══ 34. SOSYAL AKIS — INCE AYAR ═══════════════════════════════════════════ */
/* "56beğenme": `.bt-like-summary` inline-flex oldugu icin metin dugumundeki
   bosluk yutuluyordu. Gercek bir okunurluk hatasiydi. */
.bt-like-summary, .bt-show-comments, .bt-comment-login {
  display: inline-flex; align-items: center; gap: var(--tg-space-1);
  min-height: var(--tg-tap-compact);
  font-size: var(--tg-fs-meta); color: var(--tg-ink-secondary);
}
.bt-post-engagement { gap: var(--tg-space-4); font-size: var(--tg-fs-meta); color: var(--tg-ink-secondary); }
.bt-post-engagement b { font-weight: var(--tg-fw-bold); color: var(--tg-ink); }
.bt-post-action {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--tg-tap-min); min-height: var(--tg-tap-min);
  border-radius: var(--tg-r-md); background: transparent; border: 0;
  color: var(--tg-ink-secondary); cursor: pointer;
  transition: color var(--tg-dur-toggle) var(--tg-ease), background var(--tg-dur-state) var(--tg-ease), transform var(--tg-dur-press) var(--tg-ease);
}
.bt-post-action:hover { background: var(--tg-surface-raised); color: var(--tg-ink); }
.bt-post-action:active { transform: scale(.94); }
/* Secili durum: DOLGU + renk. Secilmemis kalp notr cizgidir. */
.bt-post-action.is-liked, .bt-post-action[aria-pressed="true"][data-like-post] { color: var(--tg-like); }
.bt-post-action.is-saved, .bt-post-action[aria-pressed="true"][data-save-post] { color: var(--tg-brand); }
.bt-social-post__header, .bt-post-author { gap: var(--tg-space-3); }
.bt-post-author { display: flex; align-items: center; gap: var(--tg-space-3); text-decoration: none; color: inherit; min-width: 0; }
.bt-post-author b { 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); color: var(--tg-ink); }
.bt-post-author small { display: block; font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta); color: var(--tg-ink-secondary); }
.bt-follow-button { min-height: var(--tg-tap-compact); }
/* Hikaye seridi — okunmamis marka mavisi, okunmus sessiz kenar, gradyan yok. */
.bt-story-ring, .story-item__ring { background: var(--tg-brand); background-image: none; }
.bt-story-ring.is-seen, .story-item__ring.is-seen { background: var(--tg-border-strong); }

/* Yorum alani — baglamsal, ayri kart degil. */
.bt-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-comment-form input { flex: 1; min-width: 0; }

/* ══ 35. KESFET ════════════════════════════════════════════════════════════
   Jenerik Pinterest kaosu degil: medya baskin, cerceve yok, izgara duzenli. */
.discover-grid, .explore-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--tg-space-1);
}
.discover-tile, .explore-tile {
  position: relative; aspect-ratio: 1; overflow: hidden;
  border-radius: var(--tg-r-sm); background: var(--tg-surface-raised);
  border: 0; box-shadow: none;
}
.discover-tile img, .explore-tile img { width: 100%; height: 100%; object-fit: cover; }
.discover-card { border-radius: var(--tg-r-lg); box-shadow: none; }
.discover-section-title { font-size: var(--tg-fs-section); line-height: var(--tg-lh-section); font-weight: var(--tg-fw-bold); color: var(--tg-ink); margin: var(--tg-space-6) 0 var(--tg-space-3); }

/* ══ 36. CLIPS — MEDYA ONCE ════════════════════════════════════════════════ */
.bt-reel { background: var(--tg-media); }
.bt-reel-card { border-radius: var(--tg-r-lg); }
.bt-reel-info { padding: var(--tg-space-4); }
.bt-reel-author { display: flex; align-items: center; gap: var(--tg-space-2); }
.bt-reel-author strong { display: flex; align-items: center; gap: var(--tg-space-1); }
.bt-reel-author .tg-i, .bt-verified { color: var(--tg-accent); }
.clip-play-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tg-space-12); height: var(--tg-space-12);
  border-radius: var(--tg-r-pill); border: 0;
  background: var(--tg-media-chip); color: var(--tg-ink-on-media); cursor: pointer;
}

/* ══ 37. HIKAYE — KOYU MEDYA CALISMA YUZEYI ════════════════════════════════
   Global tema acik olsa da hikaye yuzeyi bilincli olarak koyudur; medya
   siyah zeminde dogru gorunur. Yine de token kullanir, ham siyah degil. */
.story-modal, .story-composer { background: var(--tg-media); }
.story-modal-inner { background: var(--tg-media); border-radius: var(--tg-r-lg); }
/* Koyu medya uzerinde ilerleme: beyaz BILINCLI bir urun karari, tema
   rengi degil — bu yuzden `--tg-ink-on-media` token'indan okunur. */
.story-progress-bar { height: 3px; background: var(--tg-media-chip); border-radius: var(--tg-r-pill); overflow: hidden; }
.story-progress-fill { height: 100%; background: var(--tg-ink-on-media); }
.story-close-btn, .story-prev-btn, .story-next-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tg-tap-min); height: var(--tg-tap-min);
  border-radius: var(--tg-r-pill); border: 0;
  background: var(--tg-media-chip); color: var(--tg-ink-on-media); cursor: pointer;
}
.story-footer { color: var(--tg-ink-on-media); font-size: var(--tg-fs-meta); padding: var(--tg-space-3) var(--tg-space-4); }

/* ══ 38. MESAJLASMA ════════════════════════════════════════════════════════ */
.dm-layout { border: var(--tg-hairline) solid var(--tg-border); border-radius: var(--tg-r-lg); box-shadow: none; overflow: hidden; background: var(--tg-surface); }
.dm-conv-list { background: var(--tg-surface); border-right: var(--tg-hairline) solid var(--tg-border); }
.dm-conv-name { font-size: var(--tg-fs-body); font-weight: var(--tg-fw-semi); color: var(--tg-ink); }
.dm-conv-last { display: flex; align-items: center; gap: var(--tg-space-1); font-size: var(--tg-fs-meta); color: var(--tg-ink-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-conv-last .tg-i { color: var(--tg-ink-muted); flex: none; }
.dm-unread-dot { width: var(--tg-space-2); height: var(--tg-space-2); border-radius: var(--tg-r-pill); background: var(--tg-brand); flex: none; }
.dm-chat-area { background: var(--tg-canvas); }
.dm-msg { max-width: 76%; padding: var(--tg-space-2) var(--tg-space-3); border-radius: var(--tg-r-md); font-size: var(--tg-fs-body); line-height: var(--tg-lh-body); background: var(--tg-surface); color: var(--tg-ink); border: var(--tg-hairline) solid var(--tg-border); box-shadow: none; }
.dm-msg.mine, .dm-msg--out { background: var(--tg-brand); color: var(--tg-on-brand); border-color: var(--tg-brand); }
.dm-msg-time { font-size: var(--tg-fs-caption); color: var(--tg-ink-muted); }
.dm-send-btn, .dm-attach-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tg-tap-min); height: var(--tg-tap-min); flex: none;
  border-radius: var(--tg-r-md); border: 0; cursor: pointer;
}
.dm-attach-btn { background: transparent; color: var(--tg-ink-secondary); }
.dm-send-btn { background: var(--tg-brand); color: var(--tg-on-brand); }

/* ══ 39. BILDIRIMLER ═══════════════════════════════════════════════════════ */
.notif-list { background: var(--tg-surface); border: var(--tg-hairline) solid var(--tg-border); border-radius: var(--tg-r-lg); overflow: hidden; }
.notif-row, .notification-item {
  display: flex; align-items: flex-start; gap: var(--tg-space-3);
  min-height: var(--tg-tap-min); padding: var(--tg-space-3) var(--tg-space-4);
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  text-decoration: none; color: inherit;
}
.notif-row + .notif-row, .notification-item + .notification-item { box-shadow: inset 0 1px 0 var(--tg-divider); }
.notif-row:hover { background: var(--tg-surface-raised); }
.notif-row.unread, .notification-item.unread { background: var(--tg-brand-softer); }
.notif-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--tg-space-8); height: var(--tg-space-8); flex: none; border-radius: var(--tg-r-pill); background: var(--tg-surface-raised); color: var(--tg-ink-secondary); }
.notif-body { flex: 1; min-width: 0; }
.notif-title { font-size: var(--tg-fs-body); line-height: var(--tg-lh-body); font-weight: var(--tg-fw-semi); color: var(--tg-ink); }
.notif-desc { font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta); color: var(--tg-ink-secondary); }
.notif-badge {
  position: absolute; top: -4px; right: -4px;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--tg-r-pill);
  background: var(--tg-danger); color: var(--tg-on-danger);
  font-size: var(--tg-fs-caption); font-weight: var(--tg-fw-bold); line-height: 1;
}

/* ══ 40. ISTATISTIK ════════════════════════════════════════════════════════
   Jenerik pano kutucugu degil: tek yuzey uzerinde sac teli bolmeler. */
.stats-grid, .metric-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 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;
}
.stats-grid > *, .metric-grid > * { background: var(--tg-surface); border: 0; border-radius: 0; box-shadow: none; padding: var(--tg-space-4); }
.stat-period { font-size: var(--tg-fs-caption); color: var(--tg-ink-secondary); }
/* Kiyas YALNIZ gercek veri varsa. "Yeterli veri yok" notr renkte durur. */
.stat-delta-none { font-size: var(--tg-fs-meta); color: var(--tg-ink-secondary); }

/* ══ 41. AYARLAR / HESAP ═══════════════════════════════════════════════════
   Her ayar kendi kartinda DEGIL: bolum basligi + sac teli cizgiyle ayrilmis
   satirlar. Ikon renkli kare icinde degil, cizgi glif. */
.dash-links, .account-links, .profile-menu {
  background: var(--tg-surface); border: var(--tg-hairline) solid var(--tg-border);
  border-radius: var(--tg-r-lg); overflow: hidden; padding: 0;
}
.dash-links > a, .account-links > a, .profile-menu > a {
  display: flex; align-items: center; gap: var(--tg-space-3);
  min-height: var(--tg-tap-min); padding: var(--tg-space-3) var(--tg-space-4);
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  color: var(--tg-ink); text-decoration: none;
  font-size: var(--tg-fs-body); font-weight: var(--tg-fw-medium);
}
.dash-links > a + a, .account-links > a + a, .profile-menu > a + a { box-shadow: inset 0 1px 0 var(--tg-divider); }
.dash-links > a:hover, .account-links > a:hover, .profile-menu > a:hover { background: var(--tg-surface-raised); }
.dash-links .tg-i, .account-links .tg-i { color: var(--tg-ink-secondary); flex: none; }
/* Sayfa ici bolum basligi — kucuk, versal, sessiz. */
.section-heading, .admin-header-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--tg-space-4); flex-wrap: wrap; margin-bottom: var(--tg-space-4);
}
.section-heading h2 { font-size: var(--tg-fs-section); line-height: var(--tg-lh-section); font-weight: var(--tg-fw-bold); margin: 0; }

/* Izgara form — etiket ustte, alan altta, 48dp hedef. */
.grid-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--tg-space-4); }
.grid-form.compact { gap: var(--tg-space-3); }
.grid-form > label { display: block; font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-semi); color: var(--tg-ink); }
.grid-form .span-2 { grid-column: 1 / -1; }
.grid-form small { display: block; margin-top: var(--tg-space-1); font-size: var(--tg-fs-meta); color: var(--tg-ink-secondary); font-weight: var(--tg-fw-regular); }

/* ══ 42. FIYATLANDIRMA / PAKET ═════════════════════════════════════════════
   Ozellik-karti izgarasi degil: karsilastirilabilir, esit agirlikli paneller. */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--tg-space-4); }
.pricing-card {
  background: var(--tg-surface); background-image: none;
  border: var(--tg-hairline) solid var(--tg-border);
  border-radius: var(--tg-r-lg); box-shadow: none; padding: var(--tg-space-5);
}
.pricing-card.featured { border-color: var(--tg-brand); }
.pricing-price { 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; }

/* ══ 43. ADMIN ═════════════════════════════════════════════════════════════ */
.admin-quick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--tg-space-3); }
.admin-quick-card, .admin-card {
  background: var(--tg-surface); background-image: none;
  border: var(--tg-hairline) solid var(--tg-border);
  border-radius: var(--tg-r-lg); box-shadow: none; padding: var(--tg-space-4);
  text-decoration: none; color: var(--tg-ink);
}
.admin-quick-card:hover { border-color: var(--tg-brand-border); }
.admin-action-panel { padding: var(--tg-space-3); background: var(--tg-surface-raised); border-radius: var(--tg-r-md); border: var(--tg-hairline) solid var(--tg-border); }
details.admin-action > summary { min-height: var(--tg-tap-compact); display: inline-flex; align-items: center; cursor: pointer; list-style: none; font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-semi); color: var(--tg-brand); }
details.admin-action > summary::-webkit-details-marker { display: none; }
.highlight-row { background: var(--tg-brand-softer); }

/* ══ 44. KOYU TEMADA ACIK YUZEY KACAKLARI ══════════════════════════════════
   Koyu temada 12 rota tarandi; sabit acik zeminli yuzeyler burada token'a
   baglanir. Kalan tek "acik" yuzey `.story-progress-fill` — o BILINCLI:
   koyu medya uzerinde ilerleme cubugu beyaz olmali. */

/* E-posta dogrulama seridi: style.css'te #fef3c7 / #fbbf24 / #78350f sabit
   yazilmisti ve koyu tema karsiligi HIC yoktu — koyu ekranin tepesinde
   parlak sari bir bant birakiyordu. */
.email-verify-banner {
  background: var(--tg-warning-soft);
  border-bottom: var(--tg-hairline) solid var(--tg-warning-border);
  color: var(--tg-warning-ink);
  padding: var(--tg-space-2) var(--tg-gutter);
  font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta);
  font-weight: var(--tg-fw-medium);
  display: flex; align-items: center; justify-content: center; gap: var(--tg-space-3);
}
.resend-verify-btn {
  min-height: var(--tg-tap-compact); padding: 0 var(--tg-space-3);
  background: transparent; color: var(--tg-warning-ink);
  border: var(--tg-hairline) solid var(--tg-warning-border);
  border-radius: var(--tg-r-sm);
  font-size: var(--tg-fs-caption); font-weight: var(--tg-fw-bold); cursor: pointer;
}
.resend-verify-btn:hover { background: var(--tg-warning-border); }

/* Ayni desendeki diger sabit bilgi/uyari seritleri. */
.phone-warning-card, .notice, .info-box, .warning-box, .alert-box {
  background: var(--tg-warning-soft); color: var(--tg-warning-ink);
  border: var(--tg-hairline) solid var(--tg-warning-border);
  border-radius: var(--tg-r-md); box-shadow: none;
  font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta);
}

/* Koyu temada MEDYA cevresi: beyaz artefakt birakmasin. */
[data-theme="dark"] .mk-card-img,
[data-theme="dark"] .feed-card-img-wrap,
[data-theme="dark"] .bt-social-card__media,
[data-theme="dark"] .vitrin-feed-img-wrap,
[data-theme="dark"] .am-thumb { background: var(--tg-surface-raised); }

/* Iskeletler koyu temada ACIK olmaz — yukleniyor sinyali zeminden bir ton
   koyu/acik olmali, beyaz bir blok degil. */
[data-theme="dark"] .bt-skeleton,
[data-theme="dark"] .skeleton,
[data-theme="dark"] .tg-skel { background: var(--tg-surface-sunken); background-image: none; }

/* ══ 45. DOKUNMA HEDEFI DUZELTMELERI ═══════════════════════════════════════
   5 genislik x 18 rota tarandi. Asagidakiler 36px'in altinda kalan GERCEK
   kontrollerdi.

   BILINCLI ISTISNA: cumle icindeki metin baglantilari (yorumdaki yazar adi,
   "devamini gor") buyutulup blok haline GETIRILMEZ — WCAG 2.5.8 metin
   akisindaki hedefleri kapsam disi birakir ve satir yuksekligini sismek
   okunurlugu bozar. Onun yerine tiklama alani gorunmez dolguyla genisletilir. */

/* Gonderi menusu "···" — 34 -> 48. */
.bt-post-menu > button, .bt-post-menu button {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--tg-tap-min); min-height: var(--tg-tap-min);
  border-radius: var(--tg-r-md); background: transparent; border: 0;
  color: var(--tg-ink-secondary); cursor: pointer;
}
.bt-post-menu > button:hover { background: var(--tg-surface-raised); color: var(--tg-ink); }

/* Akis filtre cipleri — 34 -> 40 (cip standardi). */
.bt-social-filter {
  display: inline-flex; align-items: center;
  min-height: var(--tg-tap-compact); padding: 0 var(--tg-space-4);
  border-radius: var(--tg-r-pill);
  background: var(--tg-surface); color: var(--tg-ink-secondary);
  border: var(--tg-hairline) solid var(--tg-border-strong);
  font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-semi);
  text-decoration: none; white-space: nowrap; box-shadow: none;
}
.bt-social-filter:hover { border-color: var(--tg-brand-border); color: var(--tg-ink); }
.bt-social-filter.is-active {
  background: var(--tg-brand-soft); color: var(--tg-brand);
  border-color: var(--tg-brand); font-weight: var(--tg-fw-bold);
}
.bt-social-filter-row { display: flex; gap: var(--tg-space-2); flex-wrap: wrap; align-items: center; }

/* Rol filtresi acilir basligi — 24 -> 48. */
.bt-social-role-filter > summary {
  display: flex; align-items: center; gap: var(--tg-space-2);
  min-height: var(--tg-tap-min); padding: 0 var(--tg-space-2);
  list-style: none; cursor: pointer; border-radius: var(--tg-r-md);
  font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-semi); color: var(--tg-ink-secondary);
}
.bt-social-role-filter > summary::-webkit-details-marker { display: none; }
.bt-social-role-filter > summary:hover { background: var(--tg-surface-raised); color: var(--tg-ink); }

/* Karusel oklari — 34 -> 48. */
.bt-carousel-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tg-tap-min); height: var(--tg-tap-min);
  border-radius: var(--tg-r-pill); border: 0;
  background: var(--tg-media-chip); color: var(--tg-ink-on-media); cursor: pointer;
}

/* Kesfet butonlari */
.ds-btn {
  display: inline-flex; align-items: center; gap: var(--tg-space-2);
  min-height: var(--tg-tap-compact); padding: 0 var(--tg-space-4);
  border-radius: var(--tg-r-md);
  background: var(--tg-surface); color: var(--tg-ink);
  border: var(--tg-hairline) solid var(--tg-border-strong);
  font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-semi);
  text-decoration: none; cursor: pointer; box-shadow: none;
}
.ds-btn:hover { border-color: var(--tg-brand-border); }
.ds-btn.is-active, .ds-btn.active { background: var(--tg-brand-soft); color: var(--tg-brand); border-color: var(--tg-brand); }

/* Marka/logo baglantisi — ana sayfa hedefi, 48dp. */
.brand, .ig-sidebar-logo {
  display: inline-flex; align-items: center; gap: var(--tg-space-2);
  min-height: var(--tg-tap-min); text-decoration: none;
}

/* METIN ICI kontroller: satir yuksekligi buyutulmeden tiklama alani genisler.
   "devamini gor" bir paragrafin parcasi; blok haline getirmek metni bozar. */
.bt-post-caption button, .bt-inline-comment a {
  position: relative;
  padding: var(--tg-space-1) 0;
  font: inherit; background: none; border: 0; cursor: pointer;
  color: var(--tg-ink-secondary); font-weight: var(--tg-fw-semi);
}
.bt-post-caption button::after, .bt-inline-comment a::after {
  content: ""; position: absolute; left: 0; right: 0;
  top: 50%; height: var(--tg-tap-compact); transform: translateY(-50%);
}

/* ══ 46. CLIPS BASLIK AKSIYONU ═════════════════════════════════════════════
   "Klip yükle" baglantisi koyu temada BEYAZ zeminliydi (eski bir kural
   `background:#fff` yaziyordu). Reels basligi koyu medya baglaminda durur;
   aksiyon marka dolgusu alir. */
.bt-reels-header { display: flex; align-items: center; justify-content: space-between; gap: var(--tg-space-3); flex-wrap: wrap; }
.bt-reels-header > a {
  display: inline-flex; align-items: center; gap: var(--tg-space-2);
  min-height: var(--tg-tap-min); padding: 0 var(--tg-space-5);
  border-radius: var(--tg-r-md);
  background: var(--tg-brand); color: var(--tg-on-brand);
  border: var(--tg-hairline) solid transparent;
  font-size: var(--tg-fs-button); font-weight: var(--tg-fw-bold);
  text-decoration: none; box-shadow: none;
}
.bt-reels-header > a:hover { background: var(--tg-brand-strong); }

/* Karusel noktalari — gorsel olarak 7px KALMALI (buyutulen nokta gostergesi
   olmaktan cikar), ama "1. görsele git" gercek bir gezinme kontrolu.
   Cozum: nokta kucuk kalir, tiklama alani gorunmez bir ortu ile 40dp olur. */
.bt-carousel-dots { display: flex; align-items: center; justify-content: center; gap: var(--tg-space-2); padding: var(--tg-space-2) 0; }
.bt-carousel-dots button {
  position: relative; width: 7px; height: 7px; padding: 0; flex: none;
  border: 0; border-radius: var(--tg-r-pill); cursor: pointer;
  background: var(--tg-border-strong);
  transition: background var(--tg-dur-state) var(--tg-ease);
}
.bt-carousel-dots button.is-active { background: var(--tg-brand); }
.bt-carousel-dots button::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: var(--tg-tap-compact); height: var(--tg-tap-compact);
  transform: translate(-50%, -50%);
}

/* Clips yazar baglantisi — avatar + ad, gercek bir profil hedefi. 30 -> 40. */
.bt-reel-author > a {
  display: inline-flex; align-items: center; gap: var(--tg-space-2);
  min-height: var(--tg-tap-compact); text-decoration: none;
  color: var(--tg-ink-on-media);
}

/* ══ 47. AKIS AKSIYON DURUMLARI — GERCEK SINIF ADLARIYLA ═══════════════════
   Tarayicida olculdu: akis dugmeleri secildiginde `is-active` sinifini alir
   (`is-liked`/`is-saved` DEGIL) ve ikonlari `.bt-icon` ailesindendir; SVG
   uzerinde `fill="none"` OZNITELIGI vardir, bu yuzden dolgu CSS'te
   `fill: currentColor` ile ezilmek zorunda.

   Bu duzeltme olmadan begeni/kaydet durumu HICBIR gorsel sinyal vermiyordu:
   aria-pressed degisiyor, renk degismiyordu. */
.bt-post-action .bt-icon { fill: none; stroke: currentColor; }

/* BEGENI — secilmedigi surece notr. Secilince hem RENK hem DOLGU. */
.bt-like-button.is-active,
[data-like-post].is-active { color: var(--tg-like); }
.bt-like-button.is-active .bt-icon,
[data-like-post].is-active .bt-icon { fill: currentColor; }

/* KAYDET — begeniden ayrisir: marka mavisi. */
.bt-save-button.is-active,
[data-save-post].is-active { color: var(--tg-brand); }
.bt-save-button.is-active .bt-icon,
[data-save-post].is-active .bt-icon { fill: currentColor; }

/* PAYLAS — anlik geri bildirim, kalici bir durum degil. */
.bt-share-button.is-active { color: var(--tg-accent-ink); }

/* Begeni/kaydet gecisi 160ms — tasarim dilindeki "ac-kapa" suresi. */
.bt-post-action, .bt-post-action .bt-icon {
  transition: color var(--tg-dur-toggle) var(--tg-ease), fill var(--tg-dur-toggle) var(--tg-ease);
}

/* ══ 48. ANLAMSAL YARDIMCILAR — satir ici stil borcunun karsiligi ══════════
   Uretimde 10 satir ici stil HAM HEX tasiyordu (#165DFF, #16a34a, #dc2626,
   #f59e0b). Sabit hex tema degistiginde degismez; koyu temada hepsi yanlisti.
   Mekanik olarak sinifa cevirmek yerine ANLAMI olan bir avuc yardimci
   tanimlandi — tekrar eden desenler bunlari kullanir. */
.tg-txt-success { color: var(--tg-success-ink); }
.tg-txt-danger  { color: var(--tg-danger-ink); }
.tg-txt-warning { color: var(--tg-warning-ink); }
.tg-txt-muted   { color: var(--tg-ink-secondary); }
.tg-txt-sm      { font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta); }

/* Bilgi/uyari kutusu — durum rozetiyle ayni renk sozlesmesi, blok olcegi. */
.tg-notice {
  display: flex; align-items: flex-start; gap: var(--tg-space-3);
  padding: var(--tg-space-3) var(--tg-space-4); margin-bottom: var(--tg-space-4);
  border-radius: var(--tg-r-md);
  background: var(--tg-surface-raised); color: var(--tg-ink-secondary);
  border: var(--tg-hairline) solid var(--tg-border);
  font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta);
}
.tg-notice--warning { background: var(--tg-warning-soft); color: var(--tg-warning-ink); border-color: var(--tg-warning-border); }
.tg-notice--danger  { background: var(--tg-danger-soft);  color: var(--tg-danger-ink);  border-color: var(--tg-danger-border); }
.tg-notice--success { background: var(--tg-success-soft); color: var(--tg-success-ink); border-color: var(--tg-success-border); }
.tg-notice--info    { background: var(--tg-info-soft);    color: var(--tg-info-ink);    border-color: var(--tg-info-border); }