/* ============================================================
   MyGarage — Tasarım Cilası (2026-08-30)
   En son yüklenen stylesheet: home-pro.css ve theme.css'ten sonra.
   Kural: renkler DAİMA var(--mg-*) token'ları üzerinden; böylece
   koyu ve aydınlık temada aynı dosya çalışır.
   ============================================================ */

/* ============================================================
   1) TİPOGRAFİ TEMELİ — TEK AİLE: Source Sans 3
   Site genelinde tek yazı tipi isteniyor; eski katmanlardaki
   Space Grotesk / Manrope bildirimleri joker kuralla eziliyor.
   ============================================================ */
:root {
  --mg-font: 'Source Sans 3', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --mg-font-display: var(--mg-font);
  /* Üst barın GERÇEK yüksekliği. header-fix.css içindeki ikinci kural
     (`height:64px!important`) kazandığı için bar 64px; oysa yapışkan
     kolonların hepsi 78–80px'e göre ayarlanmıştı ve 16px kayıyorlardı. */
  --mg-topbar-h: 64px;
}

/* Yapışkan kolonlar üst bara tam otursun. */
.social-sidebar, .forum-sidebar, .forum-right, .sp-map-panel,
.blogs-layout > .social-sidebar, .tr-layout > .social-sidebar {
  top: var(--mg-topbar-h);
  height: calc(100vh - var(--mg-topbar-h));
}

html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* TEK YAZI TİPİ: Source Sans 3.
   Eski katmanlarda `font: 700 13px 'Space Grotesk'` gibi ~30 kısayol bildirimi
   var; kısayol aileyi de yazdığı için düşük özgüllüklü bir kural onları ezemez.
   Tek güvenilir yol joker + !important. Uygulamada ikon fontu yok (ikonlar SVG),
   bu yüzden yan etkisi yok. */
*, *::before, *::after { font-family: var(--mg-font) !important; }

/* Başlık ölçüsü (aile artık joker kuralla geliyor); `font` kısayolunun
   tırnaksız yazıldığı yerler de bu kuralla toparlanır.
   NOT: Yorum eskiden ilk satırın sonunda kapanıyordu; arta kalan yorum
   kapatma imi seçici listesinin başına düştüğü için AŞAĞIDAKİ KURALIN
   TAMAMI ayrıştırılamıyor ve başlık ölçeği hiç uygulanmıyordu. */
.social-app :is(h1, h2, h3), .xp-app :is(h1, h2, h3), .blogs-app :is(h1, h2, h3),
.forum-app-shell :is(h1, h2, h3), .sp-app :is(h1, h2, h3), .tr-app :is(h1, h2, h3),
.settings-app :is(h1, h2, h3), .notifications-app :is(h1, h2, h3), .saved-app :is(h1, h2, h3),
.route-detail-app :is(h1, h2, h3), .shop-detail-app :is(h1, h2, h3), .create-app :is(h1, h2, h3) {
  font-family: var(--mg-font-display);
  letter-spacing: -.02em;
  font-weight: 700;
}

/* Sayılar hizalansın: istatistik/sayaç alanlarında zıplama olmasın. */
.trend-user small, .topic-stat b, .forum-stats b, .sp-stars em, .tr-rank,
.post-actions button span, .sp-card-meta, .tr-user-meta small {
  font-variant-numeric: tabular-nums;
}

/* --- app.css sızıntısı: çıplak `footer{border-top;padding:40px 0}` kuralı
   pazarlama sayfası içindi ama uygulama kartlarının <footer> öğelerine de
   uygulanıyordu (mağaza kartındaki kopuk çizgi, blog kartındaki boşluk). --- */
:is(.social-app, .xp-app, .blogs-app, .forum-app-shell, .sp-app, .tr-app,
    .saved-app, .settings-app, .notifications-app, .route-detail-app) footer {
  border-top: 0;
  padding: 0;
  font-size: inherit;
  color: inherit;
}

/* ============================================================
   2) ÜST BAR — HESAP MENÜSÜ
   Çip artık profile gitmiyor; altında Profilim / Ayarlar / Çıkış açıyor.
   ============================================================ */
.topbar-account-wrap { position: relative; display: flex; }

.app-tools .top-icon-group .top-action { width: 38px; height: 38px; }
.top-action .top-action-count {
  position: absolute; top: -3px; right: -4px; z-index: 1;
  display: grid; place-items: center; box-sizing: border-box;
  min-width: 21px; height: 21px; padding: 0 5px;
  border: 2px solid var(--mg-surface); border-radius: 999px;
  background: var(--mg-accent); color: #fff;
  font-size: 11px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: 0;
  pointer-events: none;
}

button.topbar-account {
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
}
.topbar-account.is-open {
  border-color: var(--mg-line-strong);
  background: var(--mg-surface-2);
}
.topbar-account.is-open > .mg-icon { transform: rotate(180deg); }
.topbar-account > .mg-icon { transition: transform .18s ease; }

.account-menu-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: transparent;
}

.account-menu {
  position: absolute; z-index: 91;
  top: calc(100% + 9px); right: 0;
  width: 244px; padding: 6px;
  border: 1px solid var(--mg-line-strong); border-radius: 14px;
  background: var(--mg-surface);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .34), 0 2px 6px rgba(0, 0, 0, .16);
  animation: mgMenuIn .16s cubic-bezier(.22, .7, .3, 1);
}
@keyframes mgMenuIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.account-menu-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 10px 12px; margin-bottom: 5px;
  border-bottom: 1px solid var(--mg-line);
}
.account-menu-head > div { display: grid; gap: 2px; min-width: 0; }
.account-menu-head b {
  font-size: 13.5px; font-weight: 700; letter-spacing: -.15px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.account-menu-head small { font-size: 11px; color: var(--mg-faint); }
.account-menu-head .guest-avatar {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 800;
  background: var(--mg-surface-2); color: var(--mg-muted);
  border: 2px solid var(--mg-line-strong);
}

.account-menu-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  height: 38px; padding: 0 11px; border: 0; border-radius: 9px;
  background: transparent; color: var(--mg-text);
  font: 600 13px/1 var(--mg-font); text-align: left; cursor: pointer;
  text-decoration: none;
  transition: background .13s ease, color .13s ease;
}
.account-menu-item .mg-icon { color: var(--mg-faint); flex: none; transition: color .13s ease; }
.account-menu-item:hover { background: var(--mg-surface-2); }
.account-menu-item:hover .mg-icon { color: var(--mg-text); }
.account-menu-item.danger { color: var(--mg-accent-ink); }
.account-menu-item.danger .mg-icon { color: var(--mg-accent-ink); }
.account-menu-item.danger:hover { background: var(--mg-accent-soft); }

.account-menu-sep { height: 1px; margin: 5px 8px; background: var(--mg-line); }

/* Menü satırları <button> olduğu için `create-post-button` benzeri eski buton
   kuralları boyutu şişiriyordu; ölçü burada sabitleniyor. */
button.account-menu-item {
  height: 38px; min-height: 38px; margin: 0; padding: 0 11px;
  font-size: 13px; font-weight: 600; letter-spacing: 0; line-height: 1;
  border-radius: 9px; box-shadow: none; text-transform: none;
}

/* ---------- Marka logosu: temaya göre dosya değişimi ---------- */
.brand { display: inline-flex; align-items: center; }
.brand .brand-on-light { display: none; }
html[data-theme="light"] .brand .brand-on-dark { display: none; }
html[data-theme="light"] .brand .brand-on-light { display: block; }

/* ============================================================
   3) SOL MENÜ — SEÇİLİ SATIR
   İnce sol çubuk yerine dolu marka pili: uzaktan da hangi sayfada
   olduğun okunuyor, ikon ve yazı birlikte beyaza dönüyor.
   ============================================================ */
.social-sidebar nav a {
  position: relative;
  color: var(--mg-muted);
  transition: background .15s ease, color .15s ease;
}
.social-sidebar nav a:hover { background: var(--mg-surface-2); color: var(--mg-text); }

.social-sidebar nav a.active,
.forum-sidebar nav a.active {
  box-shadow: none;
  background: var(--mg-accent);
  color: #fff;
  font-weight: 700;
}
.social-sidebar nav a.active .mg-icon,
.forum-sidebar nav a.active .mg-icon { color: #fff; opacity: 1; }
.social-sidebar nav a.active:hover,
.forum-sidebar nav a.active:hover { background: var(--mg-accent); color: #fff; }

/* Aktif satırdaki "Yeni" rozeti kırmızı zeminde okunmalı.
   %22 beyaz dolgu + beyaz metin 3,89 veriyordu (dolgu zemini pembeleştirip
   kontrastı düşürüyor). Ters çevrildi: dolu beyaz hap, kırmızı metin. */
.social-sidebar nav a.active.nitro-link strong {
  background: #fff;
  color: var(--mg-accent-ink, #c00030);
}

/* Bölüm etiketleri biraz daha okunur. */
.social-sidebar .nav-label { font-size: 11px; letter-spacing: .7px; text-transform: uppercase; }

/* ============================================================
   4) ANA SAYFA RAYI — TREND KULLANICILAR & TREND GARAJLAR
   ============================================================ */
/* İtibar satırı kaldırıldı; kartlar biraz nefes alsın. */
.trend-user { padding: 11px 3px 10px; }
.trend-user b { margin-top: 6px; font-size: 11px; }
.trend-user small { font-size: 9.5px; }

.trend-garage-card { padding-bottom: 14px !important; }
.trend-garage-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px; margin-top: 12px;
}
.trend-garage {
  display: grid; gap: 2px; min-width: 0;
  color: inherit; text-decoration: none;
  border-radius: 12px; padding: 6px; margin: -6px;
  transition: background .14s ease;
}
.trend-garage:hover { background: var(--mg-surface-2); }
.trend-garage-media {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden;
  background: var(--mg-surface-2); border: 1px solid var(--mg-line);
  color: var(--mg-faint);
}
/* Konumlandırma mutlak: ızgara satırı görselin doğal yüksekliğine
   göre büyüyüp kırpmayı bozmasın. */
.trend-garage-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.trend-garage-media .trend-user-medal { top: 6px; left: 6px; border-color: rgba(0, 0, 0, .35); }
.trend-garage b {
  margin-top: 7px; font-size: 11.5px; font-weight: 700; letter-spacing: -.1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.trend-garage small {
  font-size: 10px; color: var(--mg-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Ray kartlarının başlıkları tek ritimde. */
.social-rail .rail-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.social-rail .rail-title h3 { font-family: var(--mg-font-display); font-size: 14.5px; font-weight: 700; margin: 0; }
.social-rail .rail-title a {
  font-size: 11px; font-weight: 700; color: var(--mg-accent-ink);
  white-space: nowrap; text-decoration: none;
}
.social-rail .rail-title a:hover { text-decoration: underline; }

/* ============================================================
   5) TRENDLER SAYFASI (/trendler)
   Kullanıcı ve garaj kartları BİLEREK farklı: kullanıcıda büyük
   yuvarlak portre, garajda geniş araç fotoğrafı + marka logosu.
   ============================================================ */
.tr-app { min-height: 100vh; background: var(--mg-bg); color: var(--mg-text); }
.tr-layout {
  width: min(var(--app-shell-width, 1444px), 100%); margin: auto;
  display: grid; grid-template-columns: var(--app-drawer-width, 284px) minmax(0, 1fr);
}
.tr-layout > .social-sidebar { position: sticky; }
.tr-main { min-width: 0; padding: 30px 34px 70px; border-left: 1px solid var(--mg-line); }

.tr-head { padding-bottom: 20px; border-bottom: 1px solid var(--mg-line); }
.tr-kicker { font-size: 11px; font-weight: 800; letter-spacing: 1.8px; color: var(--mg-accent-ink); }
.tr-head h1 { margin: 9px 0 6px; font-size: 30px; font-weight: 700; letter-spacing: -.6px; }
.tr-head p { margin: 0; font-size: 14px; color: var(--mg-muted); }

.tr-controls {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin: 20px 0 6px;
}
.tr-tabs, .tr-sorts { display: flex; gap: 8px; }
.tr-tabs button, .tr-sorts button {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 15px; cursor: pointer;
  border: 1px solid var(--mg-line); border-radius: 10px;
  background: var(--mg-surface); color: var(--mg-muted);
  font-size: 13px; font-weight: 700;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.tr-tabs button:hover, .tr-sorts button:hover:not(:disabled) { border-color: var(--mg-line-strong); color: var(--mg-text); }
.tr-tabs button.active { background: var(--mg-accent); border-color: var(--mg-accent); color: #fff; }
.tr-tabs button.active .mg-icon { color: #fff; }
/* Sıralama ikincil bir kontrol: dolgu yerine çerçeve vurgusu. */
.tr-sorts button { height: 34px; padding: 0 13px; font-size: 12.5px; border-radius: 9px; }
.tr-sorts button.active { border-color: var(--mg-accent); color: var(--mg-accent-ink); background: var(--mg-accent-soft); }
.tr-sorts button.active .mg-icon { color: var(--mg-accent-ink); }
.tr-sorts button:disabled { opacity: .55; cursor: default; }

.tr-count { margin: 16px 0 14px; font-size: 12.5px; color: var(--mg-faint); font-weight: 600; }
.tr-count b { color: var(--mg-text); font-weight: 800; }

.tr-state {
  border: 1px solid var(--mg-line); border-radius: 16px; background: var(--mg-surface);
  min-height: 280px; display: grid; place-content: center; justify-items: center;
  gap: 9px; text-align: center; padding: 34px; color: var(--mg-faint); margin-top: 18px;
}
.tr-state b { font-size: 15px; color: var(--mg-text); }
.tr-state small { font-size: 12.5px; }

/* ---------- Kullanıcı kartı: büyük portre ---------- */
.tr-user-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 14px; }
.tr-user-card {
  position: relative; display: grid; justify-items: center; align-content: start; gap: 3px;
  padding: 26px 14px 20px; min-width: 0; text-align: center;
  border: 1px solid var(--mg-line); border-radius: 18px; background: var(--mg-surface);
  color: inherit; text-decoration: none;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.tr-user-card:hover {
  border-color: var(--mg-line-strong); transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .2);
}
.tr-user-card.podium { border-color: color-mix(in srgb, var(--mg-accent) 28%, var(--mg-line)); }
.tr-user-rank {
  position: absolute; top: 12px; left: 12px;
  display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px;
  border-radius: 9px; font-size: 12.5px; font-weight: 800;
  background: var(--mg-surface-2); color: var(--mg-faint);
}
.tr-user-rank.gold { background: #efa400; color: #fff; }
.tr-user-rank.silver { background: #93a1af; color: #fff; }
.tr-user-rank.bronze { background: #d0703c; color: #fff; }
.tr-user-photo { display: block; margin-bottom: 10px; }
.tr-user-card b {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  max-width: 100%; font-size: 15px; font-weight: 700; letter-spacing: -.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tr-user-card b .mg-icon { color: var(--mg-accent-ink); flex: none; }
.tr-user-card small { max-width: 100%; font-size: 12.5px; color: var(--mg-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-user-score {
  margin-top: 8px; font-style: normal; font-size: 11.5px; font-weight: 700;
  padding: 4px 10px; border-radius: 20px;
  background: var(--mg-surface-2); color: var(--mg-muted);
}

/* ---------- Garaj kartı: geniş fotoğraf + marka logosu ---------- */
.tr-garage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 16px; }
.tr-garage {
  display: grid; text-decoration: none; color: inherit;
  border: 1px solid var(--mg-line); border-radius: 16px; overflow: hidden;
  background: var(--mg-surface);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.tr-garage:hover {
  border-color: var(--mg-line-strong); transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .22);
}
.tr-garage.podium { border-color: color-mix(in srgb, var(--mg-accent) 28%, var(--mg-line)); }
.tr-garage-media {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--mg-surface-2); color: var(--mg-faint);
}
.tr-garage-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .45s cubic-bezier(.22, .7, .3, 1);
}
.tr-garage:hover .tr-garage-media > img { transform: scale(1.04); }
.tr-garage-rank {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px;
  border-radius: 8px; font-size: 12.5px; font-weight: 800;
  background: rgba(8, 10, 13, .72); color: #fff; backdrop-filter: blur(6px);
}
.tr-garage-rank.gold { background: #efa400; }
.tr-garage-rank.silver { background: #93a1af; }
.tr-garage-rank.bronze { background: #d0703c; }
/* Marka logosu beyaz bir jetonda: logolar çoğunlukla koyu ve fotoğraf üstünde kaybolur. */
.tr-garage-brand {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center; padding: 5px;
  background: rgba(255, 255, 255, .92); box-shadow: 0 3px 10px rgba(0, 0, 0, .22);
}
.tr-garage-brand img { position: static; width: 100%; height: 100%; object-fit: contain; }
.tr-garage-score {
  position: absolute; left: 10px; bottom: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 20px;
  font-size: 11.5px; font-weight: 800; color: #fff;
  background: rgba(8, 10, 13, .72); backdrop-filter: blur(6px);
}
.tr-garage-body { display: grid; gap: 4px; padding: 13px 14px 14px; min-width: 0; }
.tr-garage-body > b {
  font-size: 15px; font-weight: 700; letter-spacing: -.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tr-garage-model {
  font-size: 12px; color: var(--mg-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tr-garage-owner { display: flex; align-items: center; gap: 7px; margin-top: 5px; min-width: 0; }
.tr-garage-owner small {
  font-size: 12.5px; color: var(--mg-muted); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@media (max-width: 900px) {
  .tr-layout { display: block; }
  .tr-layout > .social-sidebar { display: none; }
  .tr-main { padding: 22px 16px 60px; border-left: 0; }
  .tr-controls { align-items: flex-start; }
}

/* ============================================================
   6) BLOGLAR — dergi düzeni
   Kart görselin üstünde saydamdan tam opaklığa geçen bir perde
   taşır; yazı her görselde okunur kalır.
   ============================================================ */
.blogs-app { background: var(--mg-bg); color: var(--mg-text); }
.blogs-layout {
  width: min(var(--app-shell-width, 1444px), 100%); margin: auto;
  grid-template-columns: var(--app-drawer-width, 284px) minmax(0, 1fr);
  padding-top: 0;
}
.blogs-layout > .social-sidebar { position: sticky; }
.blogs-main { padding: 30px 34px 70px; min-width: 0; border-left: 1px solid var(--mg-line); }

.blogs-heading { border-bottom: 1px solid var(--mg-line); padding-bottom: 20px; }
.blogs-heading span { font-size: 11px; font-weight: 800; letter-spacing: 1.8px; color: var(--mg-accent-ink); }
.blogs-heading h1 {
  margin: 9px 0 6px; font-family: var(--mg-font-display);
  font-size: 30px; font-weight: 700; letter-spacing: -.6px;
}
.blogs-heading p { margin: 0; color: var(--mg-muted); font-size: 13.5px; }

.blog-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 16px; margin-top: 24px;
}

/* display:grid — kart ızgara satırına göre uzayınca içerideki metin
   bloğu da uzasın, yoksa yazı kartın ortasında asılı kalıyor. */
.blog-card {
  position: relative; display: grid; isolation: isolate;
  min-height: 300px; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--mg-line); background: #0b0f14;
  text-decoration: none; color: #fff;
  transition: transform .3s cubic-bezier(.22, .7, .3, 1), box-shadow .3s ease, border-color .3s ease;
}
.blog-card:hover {
  transform: translateY(-4px);
  border-color: var(--mg-line-strong);
  box-shadow: 0 20px 44px rgba(0, 0, 0, .26);
}

/* Görsel tüm kartı kaplar; yavaşça yakınlaşır. */
.blog-card > img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .55s cubic-bezier(.22, .7, .3, 1);
}
.blog-card:hover > img { transform: scale(1.05); }

/* Perde: üstte tamamen saydam → altta tam opak.
   Görseli olmayan kartlarda da aynı zemin çalışsın diye ::before
   her zaman basılıyor. */
.blog-card::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top,
      rgba(7, 9, 12, 1) 0%,
      rgba(7, 9, 12, .97) 18%,
      rgba(7, 9, 12, .82) 34%,
      rgba(7, 9, 12, .48) 55%,
      rgba(7, 9, 12, .16) 76%,
      rgba(7, 9, 12, 0) 100%);
  transition: opacity .3s ease;
}
.blog-card:hover::before { opacity: .94; }

/* Görselsiz kartlarda düz marka zemini. */
.blog-card:not(:has(> img)) {
  background: linear-gradient(155deg, #1b2733, #0b0f14 62%);
}

.blog-card > div {
  position: relative; z-index: 2;
  display: grid; align-content: end; gap: 8px;
  min-height: 300px; padding: 20px 20px 18px;
}
.blog-card small {
  font-size: 11px; font-weight: 600; letter-spacing: .2px;
  color: rgba(255, 255, 255, .72);
}
.blog-card h2 {
  margin: 0; font-family: var(--mg-font-display);
  font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -.3px;
  color: #fff;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-card p {
  margin: 0; font-size: 12.5px; line-height: 1.6;
  color: rgba(255, 255, 255, .74);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-card footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 4px; padding-top: 11px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.blog-card footer span {
  font-size: 12px; font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.blog-card footer b {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 700; color: #fff;
  padding: 4px 9px; border-radius: 20px;
  background: rgba(255, 255, 255, .14);
  backdrop-filter: blur(4px);
}

/* İlk yazı iki kolon kaplayan kapak. */
.blog-card.lead { grid-column: span 2; min-height: 384px; }
.blog-card.lead > div { min-height: 384px; padding: 26px 26px 24px; }
.blog-card.lead h2 { font-size: 27px; -webkit-line-clamp: 2; }
.blog-card.lead p { font-size: 13.5px; -webkit-line-clamp: 3; max-width: 62ch; }
@media (max-width: 700px) { .blog-card.lead { grid-column: span 1; min-height: 300px; } .blog-card.lead > div { min-height: 300px; } .blog-card.lead h2 { font-size: 20px; } }

@media (max-width: 900px) {
  .blogs-layout { display: block; padding-top: 0; }
  .blogs-layout > .social-sidebar { display: none; }
  .blogs-main { padding: 22px 16px 60px; border-left: 0; }
}

/* ============================================================
   7) FORUM
   Eski ölçek 8–12px arasındaydı; gövde metni okunmuyordu.
   Tüm tipografi bir kademe yukarı çekildi ve kartlar tokenlara
   bağlandı (aydınlık temada da düzgün görünsün diye).
   ============================================================ */
.forum-app-shell { background: var(--mg-bg); color: var(--mg-text); }
.forum-layout { width: min(var(--app-shell-width, 1444px), 100%); }
.forum-main { border-color: var(--mg-line); padding: 28px 32px 90px; }

.forum-heading h1 { font-family: var(--mg-font-display); font-size: 30px; font-weight: 700; letter-spacing: -.6px; }
.forum-heading p { margin-top: 8px; font-size: 13.5px; color: var(--mg-muted); }

.forum-tabs { gap: 2px; margin-top: 22px; border-bottom-color: var(--mg-line); }
.forum-tabs button {
  gap: 8px; padding: 14px 13px; font-size: 13px; font-weight: 600;
  color: var(--mg-muted); cursor: pointer;
}
.forum-tabs button:hover { color: var(--mg-text); }
.forum-tabs button.active { color: var(--mg-accent-ink); font-weight: 700; }
.forum-tabs button.active:after { background: var(--mg-accent); height: 2.5px; border-radius: 3px 3px 0 0; }

.forum-toolbar { margin: 20px 0 22px; }
.topic-search {
  height: 44px; padding: 0 15px; gap: 10px; border-radius: 11px;
  background: var(--mg-surface); border-color: var(--mg-line); color: var(--mg-faint);
}
.topic-search input { font: 500 13.5px var(--mg-font); color: var(--mg-text); }
.topic-search input::placeholder { color: var(--mg-faint); }
.filter-button, .new-topic-button {
  height: 44px; border-radius: 11px; font-size: 13px; font-weight: 700;
  cursor: pointer; font-family: var(--mg-font);
}
.filter-button { background: var(--mg-surface); border-color: var(--mg-line); color: var(--mg-text); }
.filter-button:hover:not(:disabled) { border-color: var(--mg-line-strong); }
.new-topic-button { background: var(--mg-accent); }

.category-chips { gap: 9px; margin-top: 16px; }
.chip {
  gap: 8px; padding: 9px 15px; border-radius: 20px; font-size: 12.5px; font-weight: 600;
  background: var(--mg-surface); border-color: var(--mg-line); color: var(--mg-muted);
}
.chip:hover { border-color: var(--mg-line-strong); color: var(--mg-text); }
.chip img { width: 16px; height: 16px; }

.section-head { margin-bottom: 16px; }
.section-head h2, .forum-section > h2 { font-family: var(--mg-font-display); font-size: 17px; font-weight: 700; letter-spacing: -.2px; }
.section-head a { font-size: 12px; font-weight: 700; color: var(--mg-accent-ink); }
.section-count { font-size: 12px; color: var(--mg-faint); font-weight: 600; }

.category-grid { gap: 14px; }
.category-card { border-color: var(--mg-line); background: var(--mg-surface); border-radius: 14px; }
.category-card b { margin-top: 13px; font-size: 14px; font-weight: 700; }
.category-card p { margin: 8px 0 12px; font-size: 12.5px; line-height: 1.55; color: var(--mg-muted); }
.category-card small { font-size: 11.5px; color: var(--mg-faint); font-weight: 600; }

.topic-list { background: var(--mg-surface); border-color: var(--mg-line); border-radius: 14px; padding: 2px 18px; }
.topic-row { padding: 17px 18px; border-bottom-color: var(--mg-line); gap: 18px; }
a.topic-row { transition: background .14s ease; }
a.topic-row:hover { background: var(--mg-surface-2); }
.topic-avatar { width: 42px; height: 42px; font-size: 11px; background: var(--mg-surface-2); }
.topic-info > b { font-size: 14px; font-weight: 700; letter-spacing: -.15px; line-height: 1.35; }
.topic-info small { margin-top: 6px; gap: 7px; font-size: 12px; color: var(--mg-faint); }
.topic-info em { font-weight: 700; color: var(--mg-accent-ink); }
.topic-stat { width: 78px; }
.topic-stat b { font-size: 16px; font-weight: 800; }
.topic-stat small { margin-top: 3px; font-size: 11px; color: var(--mg-faint); }
.last-reply > span { width: 34px; height: 34px; font-size: 10px; background: var(--mg-surface-2); }
.last-reply small { font-size: 11.5px; color: var(--mg-faint); }
.last-reply small:first-child { color: var(--mg-muted); font-weight: 600; }
.verified { color: var(--mg-accent-ink); }

.forum-empty {
  background: var(--mg-surface); border-color: var(--mg-line); border-radius: 16px;
  color: var(--mg-faint);
}
.forum-empty b { font-size: 15px; color: var(--mg-text); }
.forum-empty small { font-size: 12.5px; }
.forum-empty button, .forum-empty-button {
  font-size: 13px; padding: 11px 20px; border-radius: 10px;
  background: var(--mg-accent); cursor: pointer; font-family: var(--mg-font);
}

/* Sağ ray */
.forum-right { padding: 24px 18px; }
.forum-right .rail-card { padding: 17px; border-radius: 15px; background: var(--mg-surface); border-color: var(--mg-line); }
.forum-right .rail-title h3 { font-family: var(--mg-font-display); font-size: 14.5px; font-weight: 700; }
.forum-right .rail-title a { font-size: 11.5px; font-weight: 700; color: var(--mg-accent-ink); }
.popular-topics .popular-item {
  grid-template-columns: 18px 46px minmax(0, 1fr);
  gap: 13px; padding: 13px 0; border-bottom-color: var(--mg-line);
}
.popular-topics .popular-item > i { font-size: 13px; font-weight: 800; color: var(--mg-faint); }
.popular-topics b { font-size: 12.5px; line-height: 1.45; font-weight: 700; }
.popular-topics small { margin-top: 5px; font-size: 11px; color: var(--mg-faint); }
.forum-stats { gap: 17px 12px; margin-top: 17px; }
.forum-stats .stat > i { width: 34px; height: 34px; border-radius: 10px; }
.forum-stats small { font-size: 11px; color: var(--mg-faint); font-weight: 600; }
.forum-stats b { margin-top: 3px; font-size: 15px; font-weight: 800; }

/* ============================================================
   8) ROTALAR
   Sağdaki "Popüler Rotalar" listesi 8px yazıyla okunmuyordu:
   ızgaraya alındı, tipografi büyütüldü.
   ============================================================ */
.route-list-main .forum-heading h1 { font-size: 30px; }
.route-kicker { font-size: 11px; font-weight: 800; letter-spacing: 1.8px; color: var(--mg-accent-ink); }

.route-list-tabs { gap: 8px; margin: 20px 0 4px; flex-wrap: wrap; display: flex; }
.route-list-tabs button {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 15px; cursor: pointer;
  border: 1px solid var(--mg-line); border-radius: 10px;
  background: var(--mg-surface); color: var(--mg-muted);
  font: 700 12.5px var(--mg-font);
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.route-list-tabs button:hover { border-color: var(--mg-line-strong); color: var(--mg-text); }
.route-list-tabs button.active { background: var(--mg-accent); border-color: var(--mg-accent); color: #fff; }
.route-list-tabs button.active .mg-icon { color: #fff; }

.route-page-list { display: grid; gap: 14px; margin-top: 4px; }
.route-page-card {
  display: grid; grid-template-columns: 218px minmax(0, 1fr);
  border: 1px solid var(--mg-line); border-radius: 16px; overflow: hidden;
  background: var(--mg-surface); color: inherit; text-decoration: none;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.route-page-card:hover {
  border-color: var(--mg-line-strong); transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .18);
}
.route-page-media { position: relative; overflow: hidden; background: var(--mg-surface-2); min-height: 168px; }
.route-page-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.route-page-art {
  width: 100%; height: 100%; display: grid; place-items: center;
  background: linear-gradient(140deg, #17313a, #171c36); color: var(--mg-accent-ink);
}
.route-page-media > span {
  position: absolute; left: 12px; bottom: 12px;
  padding: 5px 10px; border-radius: 8px;
  font-size: 9.5px; font-weight: 800; letter-spacing: 1px;
  background: rgba(8, 10, 13, .74); color: #fff; backdrop-filter: blur(6px);
}
.route-page-content { display: grid; align-content: start; gap: 9px; padding: 16px 18px 15px; min-width: 0; }
.route-page-author { display: flex; align-items: center; gap: 10px; }
.route-page-author span { display: grid; gap: 1px; min-width: 0; }
.route-page-author b { font-size: 13px; font-weight: 700; }
.route-page-author small { font-size: 11.5px; color: var(--mg-faint); }
.route-page-card h2 {
  margin: 0; font-family: var(--mg-font-display);
  font-size: 18px; font-weight: 700; letter-spacing: -.25px; color: var(--mg-text);
}
.route-page-card p {
  margin: 0; font-size: 13px; line-height: 1.55; color: var(--mg-muted); min-height: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.route-page-content footer {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--mg-line);
}
.route-page-content footer span {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--mg-muted);
}
.route-page-content footer span.liked { color: var(--mg-accent-ink); }
.route-page-content footer b {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 700; color: var(--mg-accent-ink);
}

/* — Popüler Rotalar rayı — */
.forum-right .real-route {
  display: grid; grid-template-columns: 58px minmax(0, 1fr) 16px;
  align-items: center; gap: 12px;
  padding: 12px 0; border-top: 1px solid var(--mg-line);
  color: inherit; text-decoration: none;
}
.forum-right .real-route:first-of-type { border-top: 0; }
.real-route-thumb {
  width: 58px; height: 42px; border-radius: 9px;
  background-size: cover; background-position: center;
  background-color: var(--mg-surface-2); border: 1px solid var(--mg-line);
  display: grid; place-items: center; color: var(--mg-faint); filter: none;
}
.forum-right .real-route > b {
  display: grid; gap: 3px; min-width: 0;
  font-size: 13px; font-weight: 700; letter-spacing: -.1px; line-height: 1.35;
  color: var(--mg-text);
  overflow: hidden; text-overflow: ellipsis;
}
.forum-right .real-route > b > small {
  font-size: 11.5px; font-weight: 500; color: var(--mg-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.forum-right .real-route > i {
  font-style: normal; font-size: 17px; color: var(--mg-faint);
  transition: color .15s ease, transform .15s ease;
}
.forum-right .real-route:hover > i { color: var(--mg-accent-ink); transform: translateX(2px); }
.forum-right .real-route:hover > b { color: var(--mg-accent-ink); }

@media (max-width: 760px) {
  .route-page-card { grid-template-columns: 1fr; }
  .route-page-media { min-height: 170px; }
}

/* ============================================================
   9) MAĞAZALAR
   Kart bilgi hiyerarşisi netleşiyor: ad → kategori/konum → puan
   ve mesafe rozetleri → adres. Logolar üste hizalanıyor ki
   uzun adreslerde ortada asılı kalmasın.
   ============================================================ */
.sp-app { background: var(--mg-bg); color: var(--mg-text); }
.sp-list { padding: 24px 22px 50px; gap: 16px; border-right-color: var(--mg-line); }
.sp-head span { font-size: 11px; letter-spacing: 1.8px; color: var(--mg-accent-ink); font-weight: 800; }
.sp-head h1 { margin: 8px 0 6px; font-family: var(--mg-font-display); font-size: 28px; font-weight: 700; letter-spacing: -.5px; }
.sp-head p { font-size: 13px; color: var(--mg-muted); }
.sp-head p b { color: var(--mg-text); font-weight: 800; }

.sp-sort { gap: 8px; }
.sp-sort button {
  gap: 7px; padding: 11px 8px; border-radius: 11px; font-size: 12.5px; font-weight: 700;
  background: var(--mg-surface); border-color: var(--mg-line); color: var(--mg-muted);
  font-family: var(--mg-font);
}
.sp-sort button:hover { border-color: var(--mg-line-strong); color: var(--mg-text); }
.sp-sort button.active { background: var(--mg-accent); border-color: var(--mg-accent); color: #fff; box-shadow: none; }

.sp-cats { gap: 8px; }
.sp-cats button {
  gap: 7px; padding: 9px 14px; border-radius: 20px; font-size: 12.5px; font-weight: 600;
  background: var(--mg-surface); border-color: var(--mg-line); color: var(--mg-muted);
  font-family: var(--mg-font);
}
.sp-cats button em { font-size: 11px; font-weight: 800; padding: 2px 7px; background: var(--mg-surface-2); color: var(--mg-faint); }
.sp-cats button:hover { border-color: var(--mg-line-strong); color: var(--mg-text); }
.sp-cats button.active { border-color: var(--mg-accent); background: var(--mg-accent-soft); color: var(--mg-text); }
.sp-cats button.active em { background: var(--mg-accent); color: #fff; }

.sp-results { display: grid; gap: 10px; }
.sp-card {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) 20px;
  align-items: start; gap: 14px; padding: 15px;
  border-color: var(--mg-line); background: var(--mg-surface); border-radius: 15px;
}
.sp-card:hover { border-color: var(--mg-line-strong); box-shadow: 0 10px 24px rgba(0, 0, 0, .16); }
.sp-card.selected { border-color: var(--mg-accent); background: var(--mg-surface); box-shadow: 0 0 0 1px var(--mg-accent) inset; }
.sp-card.selected::before { display: none; }
.sp-logo {
  width: 56px; height: 56px; border-radius: 14px;
  background: var(--mg-surface-2); border-color: var(--mg-line); color: var(--mg-faint);
}
.sp-card-body { gap: 7px; }
.sp-card-top { align-items: flex-start; }
.sp-card-top h3 { font-size: 14.5px; font-weight: 700; letter-spacing: -.2px; line-height: 1.3; white-space: normal; }
.sp-card-top h3 svg { color: var(--mg-accent-ink); }
.sp-fav {
  width: 32px; height: 32px; margin-top: -2px;
  background: var(--mg-surface-2); border-color: var(--mg-line); color: var(--mg-faint);
}
.sp-fav:hover { border-color: var(--mg-accent); color: var(--mg-accent-ink); }
.sp-card-cat { font-size: 12.5px; color: var(--mg-muted); font-weight: 500; }
.sp-card-cat i { color: var(--mg-faint); }
.sp-card-meta { gap: 10px; margin-top: 1px; }
.sp-star-row i { font-size: 12px; color: var(--mg-line-strong); }
.sp-stars em { font-size: 12.5px; }
.sp-stars small { font-size: 11.5px; color: var(--mg-faint); }
.sp-new {
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 12px;
  background: var(--mg-surface-2); color: var(--mg-muted);
}
.sp-dist {
  font-size: 11.5px; padding: 4px 9px;
  background: var(--mg-surface-2); border-color: var(--mg-line); color: var(--mg-muted);
}
.sp-card-body footer {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--mg-faint); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sp-go { color: var(--mg-faint); margin-top: 18px; }
.sp-state { border-color: var(--mg-line); background: var(--mg-surface); color: var(--mg-faint); }
.sp-state b { font-size: 15px; color: var(--mg-text); }
.sp-state small { font-size: 12.5px; }

/* --- Harita üstü paneller ---
   Rozet, Leaflet'in +/− kontrolüyle üst üste biniyordu; kontrolün sağına
   alındı. Harita katmanı artık temaya uyduğu için (maps.js) üstündeki
   panellerin de her iki temada okunur olması gerekiyor. */
.sp-map { background: var(--mg-surface-2); }
.mg-map { background: var(--mg-surface-2) !important; }

.sp-map-badge {
  left: 62px; top: 14px;
  background: var(--mg-surface); border-color: var(--mg-line-strong);
  color: var(--mg-text);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
}
.sp-map-badge b { font-size: 12.5px; color: var(--mg-text); }
.sp-map-badge small { font-size: 11.5px; color: var(--mg-faint); }

.sp-selected {
  background: var(--mg-surface); border-color: var(--mg-line-strong);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .2);
}
.sp-selected-top h3 { font-size: 15px; font-weight: 700; color: var(--mg-text); }
.sp-selected-top h3 svg { color: var(--mg-accent-ink); }
.sp-selected-top p { font-size: 12px; color: var(--mg-muted); }
.sp-selected-addr { font-size: 12px; color: var(--mg-muted); }
.sp-selected-addr svg { color: var(--mg-accent-ink); }
/* "Yeni işletme" çipi ızgara hücresini kaplayıp kutu gibi görünüyordu. */
.sp-selected-top .sp-new, .sp-card-meta .sp-new { justify-self: start; width: fit-content; }
.sp-selected-actions a {
  padding: 11px 15px; font-size: 12.5px; font-weight: 700;
  border-color: var(--mg-line-strong); color: var(--mg-text);
}
.sp-selected-actions a:hover { border-color: var(--mg-accent); color: var(--mg-accent-ink); }
.sp-selected-actions a.primary { background: var(--mg-accent); border-color: var(--mg-accent); color: #fff; box-shadow: none; }
.sp-selected-actions a.primary:hover { color: #fff; }

.sp-map-summary span {
  background: var(--mg-surface); border-color: var(--mg-line-strong);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .16);
}
.sp-map-summary svg { color: var(--mg-accent-ink); }
.sp-map-summary span b { font-size: 12.5px; color: var(--mg-text); }
.sp-map-summary span small { font-size: 11px; color: var(--mg-faint); }

.sp-map .leaflet-control-zoom a {
  background: var(--mg-surface); color: var(--mg-text); border-color: var(--mg-line-strong);
}
.sp-map .leaflet-control-zoom a:hover { background: var(--mg-accent); color: #fff; }
.sp-map .leaflet-control-attribution {
  background: color-mix(in srgb, var(--mg-surface) 82%, transparent);
  color: var(--mg-faint); font-size: 9px;
}
.sp-map .leaflet-control-attribution a { color: var(--mg-muted); }

/* Yatay kaydırılan çip şeritleri: kesik kenar yerine solma. */
.sp-cats, .category-chips {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent 100%);
  padding-right: 8px;
}

/* ============================================================
   10) GENEL CİLA
   ============================================================ */
/* Odak halkası: klavyeyle gezerken her yerde görünür ve marka rengiyle. */
:is(.social-app, .xp-app, .blogs-app, .forum-app-shell, .sp-app, .tr-app)
  :is(a, button, input):not([tabindex="-1"]):focus-visible {
  outline: 2px solid var(--mg-accent-ink);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ui-polish.css'teki `[tabindex]:focus-visible` kuralı, Blazor'ın gelişmiş
   gezinme sonrası odakladığı `tabindex="-1"` başlığı da yakalıyordu: her
   sayfa açılışında h1'in çevresinde kırmızı bir kutu beliriyordu.
   tabindex="-1" öğeleri klavyeyle gezilemez, odak halkası almamalı. */
[tabindex="-1"]:focus-visible, [tabindex="-1"]:focus { outline: none; }

/* Görsellerin yüklenmeden önceki boşluğu zemine karışsın. Blog kartı her
   temada koyu olduğu için orada koyu bir bekleme zemini kullanılıyor. */
.trend-garage-media img, .tr-garage-media img, .route-page-media img {
  background: var(--mg-surface-2);
}
.blog-card > img { background: #10161d; }

/* Seçim rengi markaya bağlansın. */
::selection { background: var(--mg-accent); color: #fff; }

/* İnce kaydırma çubukları — koyu/aydınlık farkı token üzerinden. */
.forum-right, .social-rail, .social-sidebar, .sp-list {
  scrollbar-width: thin;
  scrollbar-color: var(--mg-line-strong) transparent;
}

/* ============================================================
   11) AYDINLIK TEMA DÜZELTMELERİ
   theme.css bu dosyadan ÖNCE yüklendiği için, aydınlık temada
   farklılaşması gereken kurallar burada tekrar yazılıyor.
   ============================================================ */
html[data-theme="light"] .account-menu {
  box-shadow: 0 18px 44px rgba(23, 28, 35, .14), 0 2px 6px rgba(23, 28, 35, .06);
}
/* theme.css .blog-card'ı aydınlık kart grubuna alıp koyu metin veriyor;
   bu kart artık görsel üstü bir kapak olduğu için her temada koyu zemin
   + beyaz yazı kalmalı. */
html[data-theme="light"] .blog-card {
  background: #0b0f14; color: #fff; border-color: var(--mg-line);
}
html[data-theme="light"] .blog-card:hover { box-shadow: 0 20px 44px rgba(23, 28, 35, .14); }
html[data-theme="light"] :is(.tr-user, .tr-garage, .route-page-card, .sp-card):hover {
  box-shadow: 0 12px 28px rgba(23, 28, 35, .1);
}
html[data-theme="light"] :is(.topic-list, .category-card, .forum-empty, .forum-right .rail-card) {
  background: var(--mg-surface); border-color: var(--mg-line);
}
html[data-theme="light"] :is(.topic-avatar, .last-reply > span, .sp-logo, .trend-garage-media, .tr-garage-media) {
  background: var(--mg-surface-2);
}
html[data-theme="light"] .route-page-art { background: linear-gradient(140deg, #dbe6ea, #dcdff0); }
html[data-theme="light"] .social-sidebar nav a.active,
html[data-theme="light"] .forum-sidebar nav a.active { background: var(--mg-accent); color: #fff; }
html[data-theme="light"] .social-sidebar nav a.active .mg-icon,
html[data-theme="light"] .forum-sidebar nav a.active .mg-icon { color: #fff; }
html[data-theme="light"] .tr-tabs button.active,
html[data-theme="light"] .route-list-tabs button.active,
html[data-theme="light"] .sp-sort button.active { color: #fff; }
html[data-theme="light"] .sp-cats button.active { color: var(--mg-text); }
/* Blog kartlarının perdesi her temada koyu kalır (görsel üstü metin). */
html[data-theme="light"] .blog-card :is(h2, footer span, footer b) { color: #fff; }
html[data-theme="light"] .blog-card small { color: rgba(255, 255, 255, .72); }
html[data-theme="light"] .blog-card p { color: rgba(255, 255, 255, .74); }

/* ============================================================
   12) AKIŞ — KİMLİK İŞARETLERİ, SEKMELER, BEĞENENLER
   ============================================================ */

/* ---------- Resmî MyGarage hesabı amblemi ---------- */
.ub-official {
  display: inline-grid; place-items: center; flex: none;
  width: 16px; height: 16px; vertical-align: -3px; margin-left: 1px;
}
.ub-official img { width: 100%; height: 100%; object-fit: contain; display: block; }
.user-badge .ub-names b { display: inline-flex; align-items: center; gap: 2px; flex-wrap: wrap; }

/* ---------- Takip et / Takiptesin ----------
   social.css'te `.post-card header .follow-button` (0,3,0) çerçeveli bir
   stil dayatıyordu; buradaki kurallar aynı özgüllüğe çıkarılıyor. */
.post-card header .follow-button,
.follow-button {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; padding: 0 15px; cursor: pointer;
  border: 1px solid var(--mg-accent); border-radius: 20px;
  background: var(--mg-accent); color: #fff;
  font-size: 12.5px; font-weight: 700; letter-spacing: -.1px; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
}
.post-card header .follow-button:hover:not(:disabled),
.follow-button:hover:not(:disabled) { background: var(--mg-accent-ink); border-color: var(--mg-accent-ink); color: #fff; }
.follow-button:active:not(:disabled) { transform: scale(.97); }
/* Takip edilen durumu ikincil: dolgu yerine nötr çerçeve. */
.post-card header .follow-button.following,
.follow-button.following {
  background: transparent; color: var(--mg-muted); border-color: var(--mg-line-strong);
}
.post-card header .follow-button.following:hover:not(:disabled),
.follow-button.following:hover:not(:disabled) {
  color: var(--mg-accent-ink); border-color: var(--mg-accent); background: var(--mg-accent-soft);
}
.follow-button:disabled { opacity: .6; cursor: default; }
.follow-button.large { height: 38px; padding: 0 20px; font-size: 13.5px; }

/* ---------- Akış sekmeleri: ikon + etiket ---------- */
.feed-tabs button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
.feed-tabs button .mg-icon { flex: none; opacity: .9; }
.feed-tabs button.active .mg-icon { opacity: 1; }
@media (max-width: 980px) {
  .feed-tabs button span { display: none; }
  .feed-tabs button { gap: 0; }
}

/* ---------- Beğeni sayacı ayrı düğme ---------- */
.post-like-count {
  border: 0; background: transparent; cursor: pointer;
  padding: 7px 8px; margin-left: -6px; border-radius: 9px;
  color: var(--mg-muted); font-size: 11px; font-weight: 700;
  transition: background .14s ease, color .14s ease;
}
.post-like-count:hover { background: var(--mg-surface-2); color: var(--mg-text); text-decoration: underline; }

/* ============================================================
   13) ORTAK MODAL (beğenenler, davet vb.)
   ============================================================ */
.mg-modal-backdrop {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(6, 8, 11, .62); backdrop-filter: blur(4px);
  display: grid; place-items: center; padding: 20px;
  animation: mgFadeIn .14s ease;
}
@keyframes mgFadeIn { from { opacity: 0; } to { opacity: 1; } }

.mg-modal {
  width: min(430px, 100%); max-height: min(620px, 86vh);
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  background: var(--mg-surface); color: var(--mg-text);
  border: 1px solid var(--mg-line-strong); border-radius: 18px; overflow: hidden;
  box-shadow: 0 26px 64px rgba(0, 0, 0, .38);
  animation: mgModalIn .18s cubic-bezier(.22, .7, .3, 1);
}
@keyframes mgModalIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

.mg-modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 16px; border-bottom: 1px solid var(--mg-line);
}
.mg-modal-head h3 {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: 15.5px; font-weight: 700; letter-spacing: -.2px;
}
.mg-modal-head h3 .mg-icon { color: var(--mg-accent-ink); }
.mg-modal-head small { display: block; margin-top: 2px; font-size: 12px; color: var(--mg-faint); }
.mg-modal-close {
  width: 32px; height: 32px; flex: none; cursor: pointer;
  border: 1px solid var(--mg-line); border-radius: 9px;
  background: var(--mg-surface-2); color: var(--mg-muted);
  display: grid; place-items: center;
  transition: color .14s ease, border-color .14s ease;
}
.mg-modal-close:hover { color: var(--mg-text); border-color: var(--mg-line-strong); }
.mg-modal-body { overflow-y: auto; padding: 6px; scrollbar-width: thin; }

.likers-state {
  display: grid; place-content: center; justify-items: center; gap: 8px;
  min-height: 220px; text-align: center; color: var(--mg-faint); padding: 24px;
}
.likers-state b { font-size: 14.5px; color: var(--mg-text); }
.likers-state small { font-size: 12.5px; }

.likers-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.liker-row {
  display: grid; grid-template-columns: 42px minmax(0, 1fr) 20px;
  align-items: center; gap: 12px; padding: 9px 10px;
  border-radius: 12px; color: inherit; text-decoration: none;
  transition: background .13s ease;
}
.liker-row:hover { background: var(--mg-surface-2); }
.liker-shop-logo {
  width: 42px; height: 42px; border-radius: 12px; overflow: hidden;
  display: grid; place-items: center;
  background: var(--mg-surface-2); border: 1px solid var(--mg-line); color: var(--mg-faint);
}
.liker-shop-logo img { width: 100%; height: 100%; object-fit: cover; }
.liker-meta { display: grid; gap: 2px; min-width: 0; }
.liker-meta b {
  display: flex; align-items: center; gap: 4px;
  font-size: 14px; font-weight: 700; letter-spacing: -.15px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.liker-meta b .mg-icon { color: var(--mg-accent-ink); flex: none; }
.liker-meta small { font-size: 12px; color: var(--mg-faint); }
.liker-go { color: var(--mg-faint); display: grid; place-items: center; }
.liker-row:hover .liker-go { color: var(--mg-accent-ink); }

/* ============================================================
   14) HİKÂYE ŞERİDİ — okunurluk
   9px isim / 10.5px başlık okunmuyordu.
   ============================================================ */
.story { width: 88px; min-width: 88px; }
.story b {
  font-size: 12px; font-weight: 700; color: var(--mg-text);
  line-height: 1.3; margin-top: 2px;
}
.story small { font-size: 11px; color: var(--mg-muted); }
.stories-empty small { font-size: 12.5px; color: var(--mg-faint); }

/* ============================================================
   15) NİTRO — kabuk temaya uyar
   Sayfa nitro-reference.css'teki sabit koyu hex'lerle çizildiği ve
   theme.css'in aydınlık seçici listesinde HİÇ yer almadığı için,
   aydınlık temadayken Nitro'ya girince site koyuya düşüyordu.
   Video kartı (.nitro-feature) bilinçli olarak koyu kalır — dikey
   video siyah zeminde doğru görünür; kabuk ise temaya uyar.
   ============================================================ */
.nitro-app-shell { background: var(--mg-bg); color: var(--mg-text); }
.nitro-main { border-color: var(--mg-line); }
.nitro-app-shell .nitro-feed-layout {
  width: min(var(--app-shell-width, 1444px), 100%); margin-inline: auto;
  grid-template-columns: var(--app-drawer-width, 284px) minmax(0, 1fr) !important;
}
.nitro-feed-layout .nitro-sidebar { top: var(--mg-topbar-h); height: calc(100dvh - var(--mg-topbar-h)); }
.nitro-feed-layout .nitro-main {
  height: calc(100dvh - var(--mg-topbar-h)); padding: 16px 24px 24px;
  border-right: 0; overscroll-behavior-y: contain;
}
.nitro-feed-layout .nitro-feature {
  width: min(430px, 100%, calc((100dvh - var(--mg-topbar-h) - 32px) * 9 / 16));
  height: auto; min-height: 0; max-height: none; max-width: 100%;
  aspect-ratio: 9 / 16; margin: 0 auto 24px;
  scroll-snap-align: start; scroll-margin-top: 16px;
}
@media (max-width: 900px) {
  .nitro-app-shell .nitro-feed-layout { display: block; }
  .nitro-feed-layout .nitro-sidebar { display: none; }
  .nitro-feed-layout .nitro-main { border-left: 0; padding-inline: 12px; }
}
.nitro-heading h1 { font-size: 24px; font-weight: 700; letter-spacing: -.4px; color: var(--mg-text); }
.nitro-heading p { margin-top: 5px; font-size: 12.5px; color: var(--mg-muted); }
.nitro-heading > div > span { color: var(--mg-accent-ink); }
.nitro-heading > button {
  border: 1px solid var(--mg-line); border-radius: 11px;
  background: var(--mg-surface); color: var(--mg-text);
  padding: 11px 16px; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.nitro-heading > button:hover { border-color: var(--mg-line-strong); }

.nitro-tabs { border-bottom-color: var(--mg-line); gap: 4px; }
.nitro-tabs button { color: var(--mg-muted); font-size: 13px; font-weight: 600; padding: 0 13px; cursor: pointer; }
.nitro-tabs button:hover { color: var(--mg-text); }
.nitro-tabs button.active { color: var(--mg-accent-ink); font-weight: 700; }
.nitro-tabs button.active:after { background: var(--mg-accent); height: 2.5px; border-radius: 3px 3px 0 0; }

.nitro-right { top: var(--mg-topbar-h); height: calc(100vh - var(--mg-topbar-h)); }
.nitro-right .rail-card {
  background: var(--mg-surface); border: 1px solid var(--mg-line);
  border-radius: 15px; padding: 16px;
}
.nitro-right .rail-title h3 { font-size: 14.5px; font-weight: 700; color: var(--mg-text); }

.popular-nitros article { border-bottom-color: var(--mg-line); padding: 11px 0; }
.popular-nitros article > div { background: var(--mg-surface-2); }
.popular-nitros b { font-size: 13px; font-weight: 700; color: var(--mg-text); }
.popular-nitros small { font-size: 11.5px; color: var(--mg-faint); }
.popular-nitros em { font-size: 11.5px; color: var(--mg-muted); margin-top: 5px; }

.tag-cloud span {
  border-color: var(--mg-line); border-radius: 20px; padding: 8px 13px;
  font-size: 12.5px; font-weight: 600; color: var(--mg-muted); background: var(--mg-surface-2);
}
.channel-list article { padding: 9px 0; }
.channel-list b { font-size: 13.5px; font-weight: 700; color: var(--mg-text); }
.channel-list small { font-size: 11.5px; color: var(--mg-faint); }
.channel-link:hover b { color: var(--mg-accent-ink); }
.channel-link > span {
  width: 40px; height: 40px; flex: none; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; font-size: 11px; font-weight: 800;
  background: var(--mg-surface-2); color: var(--mg-muted);
}
.channel-link > span img { width: 100%; height: 100%; object-fit: cover; }

.nitro-status { color: var(--mg-muted); }
.nitro-status b { color: var(--mg-text); font-size: 15px; }
.nitro-status small { color: var(--mg-faint); font-size: 12.5px; }
.nitro-status button { background: var(--mg-accent); color: #fff; padding: 11px 18px; border-radius: 10px; font-size: 13px; cursor: pointer; }

/* Video kartı ve üstündeki katmanlar her temada koyu (medya yüzeyi). */
.nitro-feature { background: #0c1014; border-color: #1d242b; }

/* ============================================================
   16) KAYDEDİLENLER — normal akışla aynı ölçü
   Kolon 720px'ti ve kartlar akıştakinden farklı ölçülerdeydi;
   gönderiler orantısız büyük duruyordu.
   ============================================================ */
.saved-app { background: var(--mg-bg); color: var(--mg-text); }
.saved-layout {
  width: min(var(--app-shell-width, 1444px), 100%); margin: auto;
  grid-template-columns: var(--app-drawer-width, 284px) minmax(0, var(--app-center-width, 768px));
  justify-content: center; padding-top: 0;
}
.saved-layout > .social-sidebar { position: sticky; }
.saved-main { padding: 26px 26px 70px; min-width: 0; border-left: 1px solid var(--mg-line); }
.saved-heading { border-bottom: 1px solid var(--mg-line); padding-bottom: 20px; margin-bottom: 6px; }
.saved-heading span { font-size: 11px; font-weight: 800; letter-spacing: 1.8px; color: var(--mg-accent-ink); }
.saved-heading h1 { font-size: 28px; font-weight: 700; letter-spacing: -.5px; margin: 9px 0 6px; }
.saved-heading p { font-size: 13.5px; color: var(--mg-muted); }
/* Akış sütunuyla birebir aynı kart ölçüsü. */
.saved-main .post-card {
  background: var(--mg-surface); border: 1px solid var(--mg-line);
  border-radius: 16px; padding: 16px 18px 13px; margin: 14px 0;
}
@media (max-width: 900px) {
  .saved-layout { display: block; }
  .saved-layout > .social-sidebar { display: none; }
  .saved-main { padding: 20px 14px 60px; border-left: 0; }
}

/* ============================================================
   17) KULÜPLER — rotalardaki gibi akış kartları
   ============================================================ */
.club-feed { display: grid; gap: 14px; }
.club-feed-card {
  display: grid; grid-template-columns: 232px minmax(0, 1fr);
  border: 1px solid var(--mg-line); border-radius: 16px; overflow: hidden;
  background: var(--mg-surface); color: inherit; text-decoration: none;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.club-feed-card:hover {
  border-color: var(--mg-line-strong); transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .18);
}
.club-feed-media {
  position: relative; min-height: 172px; overflow: hidden;
  background: var(--mg-surface-2); display: grid; place-items: center;
}
.club-feed-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.club-feed-art {
  width: 100%; height: 100%; display: grid; place-items: center;
  background: linear-gradient(140deg, color-mix(in srgb, var(--cat, #e9003f) 26%, #16202a), #101820);
  color: #fff;
}
/* Logo kapağın üstünde bir jeton olarak durur. */
.club-feed-logo {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  width: 52px; height: 52px; border-radius: 14px; overflow: hidden;
  display: grid; place-items: center;
  background: var(--mg-surface); border: 2px solid var(--mg-surface);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
  font-size: 20px; font-weight: 800; color: var(--mg-accent-ink);
}
.club-feed-logo img { width: 100%; height: 100%; object-fit: cover; }

.club-feed-body { display: grid; align-content: start; gap: 9px; padding: 16px 18px 15px; min-width: 0; }
.club-feed-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.club-feed-top h3 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.3px; }
.club-private, .club-admin {
  font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .3px;
  padding: 3px 9px; border-radius: 20px; white-space: nowrap;
}
.club-private { background: var(--mg-surface-2); color: var(--mg-muted); }
.club-admin { background: var(--mg-accent-soft); color: var(--mg-accent-ink); }
.club-admin.mod { background: rgba(120, 134, 148, .18); color: var(--mg-muted); }
.club-feed-body p {
  margin: 0; font-size: 13px; line-height: 1.55; color: var(--mg-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.club-feed-body footer {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--mg-line);
}
.club-feed-body footer > span {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--mg-muted);
}
.club-feed-avatars { display: inline-flex; }
.club-feed-avatars i {
  width: 24px; height: 24px; border-radius: 50%; overflow: hidden;
  border: 2px solid var(--mg-surface); margin-left: -8px; background: var(--mg-surface-2);
}
.club-feed-avatars i:first-child { margin-left: 0; }
.club-feed-avatars img { width: 100%; height: 100%; object-fit: cover; display: block; }
.club-feed-actions { margin-left: auto; }

@media (max-width: 760px) {
  .club-feed-card { grid-template-columns: 1fr; }
  .club-feed-media { min-height: 160px; }
}

/* ---------- Kulüp detayı: tartışmalar ---------- */
.disc-list { display: grid; gap: 10px; }
.disc-row {
  display: grid; grid-template-columns: 62px minmax(0, 1fr) auto;
  align-items: center; gap: 16px; padding: 15px 17px;
  border: 1px solid var(--mg-line); border-radius: 14px; background: var(--mg-surface);
  transition: border-color .16s ease;
}
.disc-row:hover { border-color: var(--mg-line-strong); }
.disc-score {
  display: grid; justify-items: center; gap: 1px;
  padding: 9px 6px; border-radius: 11px; background: var(--mg-surface-2);
}
.disc-score b { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.disc-score small { font-size: 10px; color: var(--mg-faint); }
.disc-main { display: grid; gap: 7px; min-width: 0; }
.disc-main h3 { margin: 0; font-size: 15.5px; font-weight: 700; letter-spacing: -.2px; }
.disc-meta { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--mg-faint); }
.disc-meta span { color: var(--mg-muted); font-weight: 600; }
.disc-meta i { font-style: normal; }
.disc-cats { display: flex; gap: 6px; flex-wrap: wrap; }
.disc-cats span {
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px;
  background: var(--mg-accent-soft); color: var(--mg-accent-ink);
}
.disc-stats { display: flex; gap: 14px; }
.disc-stats span {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 700; color: var(--mg-muted);
  font-variant-numeric: tabular-nums;
}
.disc-stats span.on { color: var(--mg-accent-ink); }

/* ---------- Kulüp detayı: yönetim ---------- */
.club-manage { display: grid; gap: 14px; }
.manage-card {
  border: 1px solid var(--mg-line); border-radius: 15px;
  background: var(--mg-surface); padding: 17px 18px 18px;
}
.manage-card > header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 13px; margin-bottom: 13px; border-bottom: 1px solid var(--mg-line);
}
.manage-card h3 {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: 15.5px; font-weight: 700; letter-spacing: -.2px;
}
.manage-card h3 .mg-icon { color: var(--mg-accent-ink); }
.manage-card > header span { font-size: 12px; font-weight: 600; color: var(--mg-faint); }
.manage-note { margin: 0; font-size: 13px; color: var(--mg-faint); }
.manage-error { margin: 0; font-size: 12.5px; color: var(--mg-accent-ink); font-weight: 600; }

.manage-rows { display: grid; gap: 4px; }
.manage-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 9px 0; border-top: 1px solid var(--mg-line);
}
.manage-rows > .manage-row:first-child { border-top: 0; }
.manage-actions { display: flex; gap: 8px; flex: none; }
.manage-actions button, .manage-delete {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 13px; cursor: pointer;
  border: 1px solid var(--mg-line-strong); border-radius: 9px;
  background: var(--mg-surface-2); color: var(--mg-text);
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.manage-actions button:hover:not(:disabled) { border-color: var(--mg-line-strong); background: var(--mg-surface); }
.manage-actions button:disabled, .manage-delete:disabled { opacity: .55; cursor: default; }
.manage-approve { background: var(--mg-accent) !important; border-color: var(--mg-accent) !important; color: #fff !important; }
.manage-delete { width: 32px; padding: 0; justify-content: center; color: var(--mg-accent-ink); }
.manage-delete:hover:not(:disabled) { border-color: var(--mg-accent); background: var(--mg-accent-soft); }

.manage-form { display: grid; gap: 9px; margin-bottom: 14px; }
.manage-form input, .manage-form textarea {
  width: 100%; padding: 11px 13px; resize: vertical;
  border: 1px solid var(--mg-line); border-radius: 10px;
  background: var(--mg-surface-2); color: var(--mg-text);
  font-size: 13.5px; outline: none;
}
.manage-form input:focus, .manage-form textarea:focus { border-color: var(--mg-line-strong); }
.manage-form input::placeholder, .manage-form textarea::placeholder { color: var(--mg-faint); }
.manage-form .new-topic-button { justify-self: start; height: 40px; }

.manage-row.ann { align-items: flex-start; }
.ann-body { display: grid; gap: 4px; min-width: 0; }
.ann-body b { font-size: 14px; font-weight: 700; }
.ann-body p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--mg-muted); }
.ann-body small { font-size: 11.5px; color: var(--mg-faint); }

/* ---------- Kulüp duyuruları rayı ---------- */
.club-ann-list { display: grid; gap: 12px; margin-top: 12px; }
.club-ann-list article { padding-top: 12px; border-top: 1px solid var(--mg-line); }
.club-ann-list article:first-child { padding-top: 0; border-top: 0; }
.club-ann-list b { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 4px; }
.club-ann-list p { margin: 0 0 5px; font-size: 12.5px; line-height: 1.55; color: var(--mg-muted); }
.club-ann-list small { font-size: 11.5px; color: var(--mg-faint); }
.club-ann-card .rail-title h3 { display: flex; align-items: center; gap: 7px; }
.club-ann-card .rail-title h3 .mg-icon { color: var(--mg-accent-ink); }

/* ---------- Kulüp detayı başlığı ---------- */
.club-head { border: 1px solid var(--mg-line); border-radius: 16px; overflow: hidden; background: var(--mg-surface); }
.club-head-cover { height: 168px; background: var(--mg-surface-2); }
.club-head-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.club-head-row { display: flex; align-items: flex-start; gap: 16px; padding: 0 20px 20px; }
.club-logo.big {
  width: 84px; height: 84px; margin-top: -30px; flex: none;
  border-radius: 20px; overflow: hidden; display: grid; place-items: center;
  background: var(--mg-surface); border: 3px solid var(--mg-surface);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .26);
  font-size: 30px; font-weight: 800; color: var(--mg-accent-ink);
}
.club-logo.big img { width: 100%; height: 100%; object-fit: cover; }
.club-head-id { flex: 1; min-width: 0; padding-top: 14px; }
.club-head-id h1 { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.4px; }
.club-head-id > small { display: inline-flex; align-items: center; gap: 6px; margin-top: 7px; font-size: 13px; color: var(--mg-muted); }
.club-head-id p { margin: 9px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--mg-muted); }
.club-head-actions { padding-top: 16px; flex: none; }

/* ---------- Üye satırları ---------- */
.member-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 15px; border: 1px solid var(--mg-line); border-radius: 13px;
  background: var(--mg-surface);
}
.member-list { display: grid; gap: 8px; }
.member-side { display: flex; align-items: center; gap: 10px; flex: none; }

/* ============================================================
   18) PROFİL — rozetler, garaj kartları, nitro ızgarası
   ============================================================ */
.profile-badges {
  border: 1px solid var(--mg-line); border-radius: 15px;
  background: var(--mg-surface); padding: 16px 17px 17px; margin-bottom: 18px;
}
.profile-badges > header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 13px;
}
.profile-badges h2 {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: 15.5px; font-weight: 700; letter-spacing: -.2px;
}
.profile-badges h2 .mg-icon { color: var(--mg-accent-ink); }
.profile-badges > header span { font-size: 12px; font-weight: 600; color: var(--mg-faint); }
.badge-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.badge-chip {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 9px 14px 9px 10px; border-radius: 14px;
  border: 1px solid var(--mg-line); background: var(--mg-surface-2);
}
.badge-icon {
  width: 34px; height: 34px; flex: none; border-radius: 10px;
  display: grid; place-items: center; overflow: hidden;
  background: var(--mg-accent-soft); color: var(--mg-accent-ink);
}
.badge-icon img { width: 100%; height: 100%; object-fit: contain; }
.badge-chip > div { display: grid; gap: 1px; }
.badge-chip b { font-size: 13px; font-weight: 700; white-space: nowrap; }
.badge-chip small { font-size: 11.5px; color: var(--mg-faint); white-space: nowrap; }

/* ---------- Garaj kartları ---------- */
.garage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 14px; }
.garage-card {
  display: grid; text-decoration: none; color: inherit;
  border: 1px solid var(--mg-line); border-radius: 16px; overflow: hidden;
  background: var(--mg-surface);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.garage-card:hover {
  border-color: var(--mg-line-strong); transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, .2);
}
.garage-card-photo {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--mg-surface-2); color: var(--mg-faint);
}
.garage-card-photo > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .45s cubic-bezier(.22, .7, .3, 1);
}
.garage-card:hover .garage-card-photo > img { transform: scale(1.04); }
.garage-card-art { display: grid; place-items: center; }
.garage-card-chips { position: absolute; left: 10px; top: 10px; z-index: 2; display: flex; gap: 6px; flex-wrap: wrap; }
.gc-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-style: normal; font-size: 10.5px; font-weight: 700;
  padding: 3px 8px; border-radius: 20px;
  background: rgba(8, 10, 13, .72); color: #fff; backdrop-filter: blur(6px);
}
.gc-chip.legacy { background: rgba(140, 120, 60, .82); }
/* Marka jetonu: logo yoksa markanın baş harfi. */
.garage-card-brand {
  position: absolute; right: 10px; top: 10px; z-index: 2;
  width: 38px; height: 38px; border-radius: 11px; padding: 5px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .93); box-shadow: 0 3px 10px rgba(0, 0, 0, .22);
}
.garage-card-brand img { width: 100%; height: 100%; object-fit: contain; }
.garage-card-brand b { font-size: 15px; font-weight: 800; color: #1b222b; }

.garage-card-body { display: grid; gap: 4px; padding: 13px 15px 14px; min-width: 0; }
.garage-card-name {
  font-size: 15px; font-weight: 700; letter-spacing: -.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.garage-card-model {
  font-size: 12px; color: var(--mg-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.garage-card-stats {
  display: flex; align-items: center; gap: 13px; flex-wrap: wrap;
  margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--mg-line);
}
.garage-card-stats i {
  display: inline-flex; align-items: center; gap: 5px; font-style: normal;
  font-size: 12.5px; font-weight: 600; color: var(--mg-muted);
  font-variant-numeric: tabular-nums;
}
.garage-card-stats i.on { color: var(--mg-accent-ink); }
.garage-plate {
  margin-left: auto; padding: 2px 8px; border-radius: 5px;
  border: 1px solid var(--mg-line-strong); background: var(--mg-surface-2);
  font-size: 11px !important; font-weight: 700 !important; letter-spacing: .4px;
  color: var(--mg-muted) !important;
}
/* Eski araçlar biraz geri planda. */
.garage-grid.is-legacy .garage-card { opacity: .82; }
.garage-grid.is-legacy .garage-card:hover { opacity: 1; }
.garage-legacy-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin: 26px 0 13px; padding-top: 18px; border-top: 1px solid var(--mg-line);
}
.garage-legacy-head h3 {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: 15.5px; font-weight: 700; letter-spacing: -.2px;
}
.garage-legacy-head h3 .mg-icon { color: var(--mg-faint); }
.garage-legacy-head small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--mg-faint); }
.garage-legacy-head > span { font-size: 12.5px; font-weight: 700; color: var(--mg-faint); flex: none; }

.profile-garage-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin: 18px 0 14px;
}
.profile-garage-head h2 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.2px; }
.profile-garage-head small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--mg-faint); }
.profile-garage-head > a {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  height: 38px; padding: 0 16px; border-radius: 10px;
  background: var(--mg-accent); color: #fff;
  font-size: 13px; font-weight: 700; text-decoration: none;
}

/* ---------- Nitro ızgarası (izlenme sayısıyla) ---------- */
.reel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.reel-card {
  display: grid; gap: 8px; text-decoration: none; color: inherit;
  transition: transform .18s ease;
}
.reel-card:hover { transform: translateY(-3px); }
.reel-thumb {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 9 / 14; border-radius: 14px; overflow: hidden;
  background: #0c1014; color: var(--mg-faint);
  border: 1px solid var(--mg-line);
}
.reel-thumb img, .reel-thumb video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.reel-play {
  position: absolute; z-index: 2; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(8, 10, 13, .58); color: #fff; backdrop-filter: blur(6px);
  padding-left: 2px;
}
.reel-views {
  position: absolute; left: 9px; bottom: 9px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 20px;
  font-size: 11.5px; font-weight: 800; color: #fff;
  background: rgba(8, 10, 13, .7); backdrop-filter: blur(6px);
  font-variant-numeric: tabular-nums;
}
.reel-meta { display: grid; gap: 3px; min-width: 0; }
.reel-meta b {
  font-size: 13px; font-weight: 700; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.reel-meta small {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: var(--mg-faint); font-variant-numeric: tabular-nums;
}

/* ---------- Profil başlığı ölçüsü ---------- */
.profile-id h1 { font-size: 22px; font-weight: 700; letter-spacing: -.4px; }
.profile-id h1 .mg-icon { color: var(--mg-accent-ink); }
.profile-id > small { font-size: 13px; color: var(--mg-faint); }
.profile-bio { font-size: 13.5px; line-height: 1.6; color: var(--mg-muted); }
.profile-meta { font-size: 12.5px; color: var(--mg-muted); gap: 16px; }
.profile-meta a { color: var(--mg-accent-ink); }
.profile-stats > div { background: var(--mg-surface); border-color: var(--mg-line); border-radius: 13px; padding: 14px; }
.profile-stats b { font-size: 18px; font-weight: 800; display: block; font-variant-numeric: tabular-nums; }
.profile-stats small { font-size: 12px; color: var(--mg-faint); }

/* ============================================================
   19) KEŞFET — üç kolon + trend araç ızgarası
   Sayfa iki kolonluydu ve trend araçlar sonsuz kayan bir şeritti.
   ============================================================ */
.xp-app { background: var(--mg-bg); color: var(--mg-text); }
@media (min-width: 1160px) {
  .xp-layout {
    width: min(var(--app-shell-width, 1444px), 100%);
    grid-template-columns: var(--app-drawer-width, 284px) minmax(0, 1fr) var(--app-rail-width, 392px);
  }
}
.xp-main { padding: 20px 24px 70px; gap: 22px; }
.xp-rail {
  position: sticky; top: var(--mg-topbar-h); align-self: start;
  max-height: calc(100vh - var(--mg-topbar-h));
  overflow-y: auto; scrollbar-width: thin;
  padding: 20px 20px 60px; display: grid; gap: 16px;
  border-left: 1px solid var(--mg-line);
}
@media (max-width: 1159px) { .xp-rail { display: none; } }

.xp-section { background: transparent; }
.xp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.xp-head span { font-size: 10.5px; font-weight: 800; letter-spacing: 1.6px; color: var(--mg-accent-ink); }
.xp-head h2 { margin: 6px 0 0; font-size: 21px; font-weight: 700; letter-spacing: -.4px; }
.xp-more {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  font-size: 12.5px; font-weight: 700; color: var(--mg-accent-ink); text-decoration: none;
}
.xp-more:hover { text-decoration: underline; }
.xp-rail .xp-head h2 { font-size: 16.5px; }
.xp-rail .xp-section {
  border: 1px solid var(--mg-line); border-radius: 15px;
  background: var(--mg-surface); padding: 16px;
}

/* ---------- Hero afiş ----------
   Afişler tasarlanmış geniş görseller; sabit min-height + `cover` üstlerini
   kırpıyor ve başlık kesiliyordu. Oran taşıyıcıya veriliyor, `bare` afişlerde
   görsel `contain` ile tam görünüyor. */
.xp-hero-carousel {
  min-height: 0; aspect-ratio: 1000 / 340;
  border-color: var(--mg-line); border-radius: 18px;
}
.xp-hero.bare .xp-hero-bg {
  background-size: contain; background-repeat: no-repeat; background-position: center;
  background-color: var(--mg-surface-2);
}
@media (max-width: 900px) { .xp-hero-carousel { aspect-ratio: 4 / 3; } }

/* Ray içinde etkinlikler yatay kaydırma yerine alt alta. */
.xp-rail .xp-event-strip { grid-auto-flow: row; grid-auto-columns: auto; overflow-x: visible; }
.xp-hero-copy h1 { font-size: clamp(30px, 4vw, 46px); font-weight: 700; letter-spacing: -1px; line-height: 1.05; }
.xp-hero-copy p { font-size: 14px; line-height: 1.6; max-width: 46ch; }
.xp-hero-copy small { font-size: 11px; font-weight: 800; letter-spacing: 1.8px; }

/* ---------- Trend araç ızgarası ---------- */
.xp-car-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); gap: 14px; }
.xp-car {
  display: grid; text-decoration: none; color: inherit;
  border: 1px solid var(--mg-line); border-radius: 15px; overflow: hidden;
  background: var(--mg-surface);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.xp-car:hover {
  border-color: var(--mg-line-strong); transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .2);
}
.xp-car-img {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--mg-surface-2); color: var(--mg-faint);
}
.xp-car-img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.xp-car-brand {
  position: absolute; top: 9px; right: 9px; z-index: 2;
  width: 34px; height: 34px; border-radius: 10px; padding: 5px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .93); box-shadow: 0 3px 10px rgba(0, 0, 0, .22);
}
.xp-car-brand img { position: static; width: 100%; height: 100%; object-fit: contain; }
.xp-car-score {
  position: absolute; left: 9px; bottom: 9px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 20px;
  font-size: 11px; font-weight: 800; color: #fff;
  background: rgba(8, 10, 13, .72); backdrop-filter: blur(6px);
}
.xp-car-meta { display: grid; gap: 3px; padding: 12px 13px 13px; min-width: 0; }
.xp-car-meta b { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-car-meta small { font-size: 12px; color: var(--mg-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Ray içi listeler ---------- */
.xp-event-strip, .xp-club-list, .xp-route-list { display: grid; gap: 9px; }
.xp-event, .xp-club-list > a {
  display: flex; align-items: center; gap: 12px; padding: 10px;
  border: 1px solid var(--mg-line); border-radius: 12px;
  background: var(--mg-surface-2); color: inherit; text-decoration: none;
  transition: border-color .15s ease;
}
.xp-event:hover, .xp-club-list > a:hover { border-color: var(--mg-line-strong); }
.xp-event-date {
  display: grid; justify-items: center; flex: none;
  width: 46px; padding: 7px 0; border-radius: 10px;
  background: var(--mg-accent-soft); color: var(--mg-accent-ink);
}
.xp-event-date b { font-size: 17px; font-weight: 800; line-height: 1; }
.xp-event-date small { font-size: 10px; font-weight: 700; margin-top: 2px; }
.xp-event-meta { display: grid; gap: 2px; min-width: 0; }
.xp-event-meta b { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-event-meta small { font-size: 11.5px; color: var(--mg-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-event-meta em { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--mg-muted); }
.xp-event.done { opacity: .68; }
.xp-club-logo {
  width: 40px; height: 40px; flex: none; border-radius: 11px; overflow: hidden;
  display: grid; place-items: center; font-size: 16px; font-weight: 800;
  background: var(--mg-surface); color: var(--mg-accent-ink);
}
.xp-club-logo img { width: 100%; height: 100%; object-fit: cover; }
.xp-club-meta { display: grid; gap: 2px; min-width: 0; flex: 1; }
.xp-club-meta b { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-club-meta small { font-size: 11.5px; color: var(--mg-faint); }
.xp-route-list > a {
  position: relative; display: flex; align-items: flex-end;
  min-height: 92px; padding: 12px; border-radius: 12px; overflow: hidden;
  background-size: cover; background-position: center; color: #fff; text-decoration: none;
  border: 1px solid var(--mg-line);
}
.xp-route-list b { display: block; font-size: 13.5px; font-weight: 700; }
.xp-route-list small { display: block; margin-top: 3px; font-size: 11.5px; color: rgba(255, 255, 255, .8); }

/* ---------- Trend kullanıcı kartları (Keşfet) ---------- */
.xp-user-grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; }
.xp-user { border-color: var(--mg-line); background: var(--mg-surface); border-radius: 15px; padding: 18px 10px 15px; }
.xp-user:hover { border-color: var(--mg-line-strong); }
.xp-user b { font-size: 13.5px; font-weight: 700; margin-top: 8px; }
.xp-user small { font-size: 11.5px; color: var(--mg-faint); }
.xp-rank {
  background: var(--mg-surface-2); color: var(--mg-faint);
  font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 8px;
}
.xp-rank.gold { background: #efa400; color: #221a02; }
.xp-rank.silver { background: #93a1af; color: #161b21; }
.xp-rank.bronze { background: #d0703c; color: #241203; }

/* ============================================================
   20) YORUMLAR — okunurluk
   `.comment-item p { font-size: 11.5px; color: #d7dade }` aydınlık
   temada beyaz üstünde neredeyse görünmüyordu.
   ============================================================ */
.comment-list { gap: 8px; }
.comment-item {
  background: var(--mg-surface); border-color: var(--mg-line);
  border-radius: 14px; padding: 14px 16px;
}
.comment-item p {
  margin: 10px 0 0; font-size: 14px; line-height: 1.62;
  color: var(--mg-text);
}
.comment-item.is-reply { margin-left: 30px; background: var(--mg-surface-2); }
.comment-item footer { gap: 14px; margin-top: 11px; }
.comment-likes {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  border: 0; background: transparent; padding: 3px 6px; margin-left: -6px;
  border-radius: 7px; font-size: 12.5px; font-weight: 700; color: var(--mg-accent-ink);
  transition: background .13s ease;
}
.comment-likes:hover { background: var(--mg-accent-soft); }
.comment-reply {
  font-size: 12.5px; font-weight: 700; color: var(--mg-muted); cursor: pointer;
  border: 0; background: transparent; padding: 3px 4px;
}
.comment-reply:hover { color: var(--mg-text); }
.replying-chip {
  background: var(--mg-surface-2); border-color: var(--mg-line);
  border-radius: 10px; padding: 9px 12px; font-size: 12.5px; color: var(--mg-muted);
}
.entries-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 26px 0 14px; }
.entries-head h2 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.2px; }
.entries-head span { font-size: 12.5px; color: var(--mg-faint); font-weight: 600; }
.reply-box textarea {
  font-size: 14px; padding: 12px 14px; border-radius: 11px;
  background: var(--mg-surface-2); border: 1px solid var(--mg-line); color: var(--mg-text);
}
.reply-login b { font-size: 15px; }
.reply-login small { font-size: 12.5px; color: var(--mg-faint); }

/* ============================================================
   21) ETKİNLİK DETAYI — okunurluk
   Meta 10.5px, gövde 11.5px ve açık gri idi.
   ============================================================ */
.event-detail-head { background: var(--mg-surface); border-color: var(--mg-line); border-radius: 16px; }
.event-detail-cover { height: 280px; background: var(--mg-surface-2); }
.event-detail-cover img { width: 100%; height: 100%; object-fit: cover; }
.event-detail-body { padding: 22px 24px 24px; }
.event-detail-body h1 { margin: 0; font-size: 27px; font-weight: 700; letter-spacing: -.5px; line-height: 1.2; }
.event-detail-meta { gap: 10px 22px; margin-top: 16px; }
.event-detail-meta span, .event-map-link {
  font-size: 13.5px; color: var(--mg-muted); gap: 7px; font-weight: 500;
}
.event-detail-meta .mg-icon, .event-map-link .mg-icon { color: var(--mg-accent-ink); flex: none; }
.event-map-link { color: var(--mg-accent-ink); font-weight: 600; text-decoration: none; }
.event-map-link:hover { text-decoration: underline; }
.event-content {
  background: var(--mg-surface); border-color: var(--mg-line); border-radius: 14px;
  padding: 20px 22px; font-size: 14.5px; line-height: 1.75; color: var(--mg-text);
}
.event-cats span {
  font-size: 11.5px; font-weight: 700; padding: 4px 11px; border-radius: 20px;
  background: var(--mg-accent-soft); color: var(--mg-accent-ink);
}
.event-cats { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.event-online, .event-done {
  font-size: 11px; font-weight: 800; padding: 5px 11px; border-radius: 20px;
  background: rgba(8, 10, 13, .74); color: #fff; backdrop-filter: blur(6px);
}
.event-done { background: rgba(90, 96, 104, .86); }

/* ============================================================
   22) HABERLER — gerçek bir haber sayfası düzeni
   Manşet + liste + sağ ray (en çok okunanlar, bölgeler).
   ============================================================ */
.news-app { min-height: 100vh; background: var(--mg-bg); color: var(--mg-text); }
.news-layout {
  width: min(var(--app-shell-width, 1444px), 100%); margin: auto;
  display: grid; grid-template-columns: var(--app-drawer-width, 284px) minmax(0, 1fr) var(--app-rail-width, 392px);
}
.news-layout > .social-sidebar { position: sticky; top: var(--mg-topbar-h); height: calc(100vh - var(--mg-topbar-h)); }
.news-main { min-width: 0; padding: 28px 30px 70px; border-left: 1px solid var(--mg-line); }
.news-rail {
  position: sticky; top: var(--mg-topbar-h); align-self: start;
  max-height: calc(100vh - var(--mg-topbar-h)); overflow-y: auto; scrollbar-width: thin;
  padding: 26px 20px 60px; display: grid; gap: 14px; align-content: start;
  border-left: 1px solid var(--mg-line);
}
.news-rail .rail-card {
  border: 1px solid var(--mg-line); border-radius: 15px;
  background: var(--mg-surface); padding: 16px;
}
@media (max-width: 1159px) { .news-rail { display: none; } .news-layout { grid-template-columns: var(--app-drawer-width, 284px) minmax(0, 1fr); } }
@media (max-width: 900px) {
  .news-layout { display: block; }
  .news-layout > .social-sidebar { display: none; }
  .news-main { padding: 20px 15px 60px; border-left: 0; }
}

.news-masthead {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  padding-bottom: 20px; margin-bottom: 22px; border-bottom: 2px solid var(--mg-text);
}
.news-masthead span { font-size: 11px; font-weight: 800; letter-spacing: 1.8px; color: var(--mg-accent-ink); }
.news-masthead h1 { margin: 8px 0 6px; font-size: 34px; font-weight: 800; letter-spacing: -.9px; }
.news-masthead p { margin: 0; font-size: 13.5px; color: var(--mg-muted); }
.news-search {
  display: flex; align-items: center; gap: 9px; flex: none;
  width: min(280px, 40%); height: 40px; padding: 0 14px;
  border: 1px solid var(--mg-line); border-radius: 11px;
  background: var(--mg-surface); color: var(--mg-faint);
}
.news-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--mg-text); font-size: 13.5px; }

.news-meta {
  display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .3px;
  text-transform: uppercase; color: var(--mg-accent-ink);
}

/* ---------- Manşet ---------- */
.news-lead {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 0; margin-bottom: 26px; overflow: hidden;
  border: 1px solid var(--mg-line); border-radius: 18px; background: var(--mg-surface);
  color: inherit; text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.news-lead:hover { border-color: var(--mg-line-strong); box-shadow: 0 16px 34px rgba(0, 0, 0, .16); }
.news-lead-media {
  position: relative; display: grid; place-items: center; min-height: 260px;
  background: var(--mg-surface-2); color: var(--mg-faint); overflow: hidden;
}
.news-lead-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.news-kicker {
  position: absolute; left: 14px; top: 14px; z-index: 2;
  padding: 5px 11px; border-radius: 6px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px;
  background: var(--mg-accent); color: #fff;
}
.news-lead-body { display: grid; align-content: center; gap: 11px; padding: 26px 28px; min-width: 0; }
.news-lead-body b { font-size: 25px; font-weight: 800; line-height: 1.22; letter-spacing: -.5px; }
.news-lead-body p {
  margin: 0; font-size: 14px; line-height: 1.6; color: var(--mg-muted);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.news-lead-more {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--mg-accent-ink);
}
@media (max-width: 820px) { .news-lead { grid-template-columns: 1fr; } .news-lead-media { min-height: 190px; } .news-lead-body b { font-size: 20px; } }

/* ---------- Haber listesi ---------- */
.news-list { display: grid; gap: 2px; }
.news-row {
  display: grid; grid-template-columns: 176px minmax(0, 1fr);
  gap: 18px; padding: 18px 0; border-top: 1px solid var(--mg-line);
  color: inherit; text-decoration: none;
}
.news-row:first-child { border-top: 0; }
.news-row-media {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden;
  background: var(--mg-surface-2); color: var(--mg-faint);
}
.news-row-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s cubic-bezier(.22, .7, .3, 1);
}
.news-row:hover .news-row-media img { transform: scale(1.04); }
.news-row-body { display: grid; align-content: start; gap: 8px; min-width: 0; }
.news-row-body b { font-size: 17px; font-weight: 700; line-height: 1.32; letter-spacing: -.3px; }
.news-row:hover .news-row-body b { color: var(--mg-accent-ink); }
.news-row-body p {
  margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--mg-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 700px) { .news-row { grid-template-columns: 116px minmax(0, 1fr); gap: 13px; } .news-row-body b { font-size: 15px; } }

/* ---------- Ray listeleri ---------- */
.news-top { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; }
.news-top li { border-top: 1px solid var(--mg-line); }
.news-top li:first-child { border-top: 0; }
.news-top a {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px;
  align-items: start; padding: 11px 0; color: inherit; text-decoration: none;
}
.news-top i {
  font-style: normal; font-size: 17px; font-weight: 800;
  color: var(--mg-line-strong); line-height: 1.2;
}
.news-top a:hover b { color: var(--mg-accent-ink); }
.news-top b { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.4; }
.news-top small {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 5px; font-size: 11.5px; color: var(--mg-faint);
}
.news-regions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.news-regions span {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 20px;
  border: 1px solid var(--mg-line); background: var(--mg-surface-2);
  font-size: 12.5px; font-weight: 600; color: var(--mg-muted);
}
.news-regions em { font-style: normal; font-weight: 800; color: var(--mg-accent-ink); }

/* ---------- Haber detayı ---------- */
.news-article {
  border: 1px solid var(--mg-line); border-radius: 18px; overflow: hidden;
  background: var(--mg-surface); margin-top: 12px;
}
.news-article-cover { height: 340px; background: var(--mg-surface-2); }
.news-article-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-article-body { padding: 26px 30px 28px; }
.news-article-body h1 { margin: 12px 0 0; font-size: 32px; font-weight: 800; letter-spacing: -.8px; line-height: 1.2; }
.news-lede {
  margin: 16px 0 0; font-size: 16.5px; line-height: 1.6; font-weight: 600;
  color: var(--mg-muted);
}
.news-body { margin-top: 20px; font-size: 15.5px; line-height: 1.8; color: var(--mg-text); }
.news-body p { margin: 0 0 16px; }
.news-body :is(h2, h3) { margin: 26px 0 10px; font-weight: 700; letter-spacing: -.3px; }
.news-body h2 { font-size: 21px; }
.news-body h3 { font-size: 18px; }
.news-body img { max-width: 100%; height: auto; border-radius: 12px; margin: 8px 0; }
.news-body a { color: var(--mg-accent-ink); text-decoration: underline; }
.news-body ul, .news-body ol { padding-left: 22px; margin: 0 0 16px; }
.news-body li { margin-bottom: 7px; }
.news-body blockquote {
  margin: 18px 0; padding: 12px 18px;
  border-left: 3px solid var(--mg-accent); background: var(--mg-surface-2);
  border-radius: 0 10px 10px 0; color: var(--mg-muted);
}
.news-article-foot {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--mg-line);
}
.news-article-foot span {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--mg-muted);
}
.news-article-foot .mg-icon { color: var(--mg-faint); }
@media (max-width: 700px) {
  .news-article-cover { height: 210px; }
  .news-article-body { padding: 20px 18px 22px; }
  .news-article-body h1 { font-size: 24px; }
}

/* ============================================================
   23) GİRİŞ SAYFASI — dil + tema kontrolü
   Yarı saydam bir kutu içinde iki farklı düğme tipi vardı; ölçü ve
   hizalar tutmuyordu. Artık tek bir çerçevede, aynı yükseklikte iki
   bölüm: segmentli dil anahtarı + ayraç + tema düğmesi.
   ============================================================ */
.auth-toolbar {
  top: 22px; right: 26px; gap: 0; padding: 5px;
  border-radius: 14px;
  background: rgba(13, 17, 22, .62);
  border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .22);
}
html[data-theme="light"] .auth-toolbar {
  background: rgba(255, 255, 255, .9);
  border-color: var(--mg-line-strong);
  box-shadow: 0 8px 26px rgba(23, 28, 35, .1);
}

.auth-toolbar .lang-switch {
  position: relative; gap: 0; padding: 0; background: transparent; border-radius: 0;
}
/* Dil düğmeleri arasında ince ayraç yerine seçili olanda dolgu. */
.auth-toolbar .lang-switch button {
  min-width: 42px; height: 32px; padding: 0 11px; cursor: pointer;
  border: 0; border-radius: 9px; background: transparent;
  font-size: 12px; font-weight: 800; letter-spacing: .6px;
  color: rgba(255, 255, 255, .62);
  transition: background .15s ease, color .15s ease;
}
.auth-toolbar .lang-switch button:hover:not(.active) { background: rgba(255, 255, 255, .1); color: #fff; }
.auth-toolbar .lang-switch button.active {
  background: var(--mg-accent); color: #fff;
  box-shadow: 0 2px 8px rgba(233, 0, 63, .32);
}
html[data-theme="light"] .auth-toolbar .lang-switch button { color: var(--mg-muted); }
html[data-theme="light"] .auth-toolbar .lang-switch button:hover:not(.active) { background: var(--mg-surface-2); color: var(--mg-text); }
html[data-theme="light"] .auth-toolbar .lang-switch button.active { background: var(--mg-accent); color: #fff; }

/* Dil ve tema arasında dikey ayraç. */
.auth-toolbar .lang-switch::after {
  content: ""; position: absolute; right: -5px; top: 6px; bottom: 6px;
  width: 1px; background: rgba(255, 255, 255, .16);
}
html[data-theme="light"] .auth-toolbar .lang-switch::after { background: var(--mg-line-strong); }

.auth-toolbar .top-action {
  width: 32px; height: 32px; margin-left: 10px; border-radius: 9px;
  color: rgba(255, 255, 255, .82); cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.auth-toolbar .top-action:hover { background: rgba(255, 255, 255, .12) !important; color: #fff; }
html[data-theme="light"] .auth-toolbar .top-action { color: var(--mg-muted); }
html[data-theme="light"] .auth-toolbar .top-action:hover { background: var(--mg-surface-2) !important; color: var(--mg-text); }

/* ============================================================
   24) İŞLETME SİTESİ (/{slug})
   Tek sayfalık bağımsız mikro site. Uygulama kabuğundan ayrı,
   kendi tipografi ve renk ritmi var; marka rengi --mgbiz ile
   işletmeden geliyor. Her iki temada da çalışır.
   ============================================================ */
.mgbiz {
  --mgbiz-ink: var(--mg-text);
  --mgbiz-soft: color-mix(in srgb, var(--mgbiz, #e9003f) 10%, transparent);
  min-height: 100vh; background: var(--mg-bg); color: var(--mgbiz-ink);
}
.mgbiz-wrap { width: min(1180px, calc(100% - 44px)); margin: 0 auto; }

/* ---------- Üst çubuk ---------- */
.mgbiz-topbar {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--mg-surface) 92%, transparent);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--mg-line);
}
.mgbiz-topbar .mgbiz-wrap { display: flex; align-items: center; gap: 26px; height: 68px; }
.mgbiz-ident { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; flex: none; }
.mgbiz-logo {
  width: 42px; height: 42px; flex: none; border-radius: 12px; overflow: hidden;
  display: grid; place-items: center; font-size: 17px; font-weight: 800;
  background: var(--mgbiz-soft); color: var(--mgbiz, #e9003f);
}
.mgbiz-logo img { width: 100%; height: 100%; object-fit: cover; }
.mgbiz-ident b { display: block; font-size: 15.5px; font-weight: 800; letter-spacing: -.2px; }
.mgbiz-ident small { display: block; font-size: 11.5px; color: var(--mg-faint); }
.mgbiz-nav { display: flex; gap: 4px; margin-left: auto; }
.mgbiz-nav a {
  padding: 8px 13px; border-radius: 9px; text-decoration: none;
  font-size: 13.5px; font-weight: 600; color: var(--mg-muted);
  transition: background .14s ease, color .14s ease;
}
.mgbiz-nav a:hover { background: var(--mg-surface-2); color: var(--mgbiz-ink); }
.mgbiz-tools { display: flex; align-items: center; gap: 10px; flex: none; }
.mgbiz-lang { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--mg-line); border-radius: 10px; background: var(--mg-surface); }
.mgbiz-lang button {
  min-width: 38px; height: 28px; cursor: pointer; border: 0; border-radius: 7px;
  background: transparent; color: var(--mg-muted);
  font-size: 11.5px; font-weight: 800; letter-spacing: .5px;
  transition: background .14s ease, color .14s ease;
}
.mgbiz-lang button:hover:not(.active) { background: var(--mg-surface-2); color: var(--mgbiz-ink); }
.mgbiz-lang button.active { background: var(--mgbiz, #e9003f); color: #fff; }
.mgbiz-call {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 16px; border-radius: 10px; text-decoration: none;
  background: var(--mgbiz, #e9003f); color: #fff; font-size: 13px; font-weight: 700;
}
@media (max-width: 880px) { .mgbiz-nav { display: none; } .mgbiz-ident small { display: none; } }

/* ---------- MyGarage şeridi ---------- */
.mgbiz-mg-strip { background: var(--mg-surface-2); border-bottom: 1px solid var(--mg-line); }
.mgbiz-mg-strip .mgbiz-wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 44px; flex-wrap: wrap;
}
.mgbiz-verified {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700; color: var(--mg-muted);
}
.mgbiz-verified .mg-icon { color: #22a55b; }
.mgbiz-mg-back {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  font-size: 12.5px; font-weight: 700; color: var(--mg-muted);
}
.mgbiz-mg-back .brand { width: 108px; height: 26px; }
.mgbiz-mg-back .brand-global-logo { width: 104px; height: 26px; }
.mgbiz-mg-back em { font-style: normal; }
.mgbiz-mg-back:hover { color: var(--mg-accent-ink); }

/* ---------- Kahraman ---------- */
.mgbiz-hero { padding: 62px 0 54px; background: radial-gradient(circle at 82% 12%, var(--mgbiz-soft), transparent 42%); }
.mgbiz-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center; }
.mgbiz-kicker { font-size: 11.5px; font-weight: 800; letter-spacing: 2px; color: var(--mgbiz, #e9003f); }
.mgbiz-hero-copy h1 { margin: 14px 0 16px; font-size: clamp(32px, 4.4vw, 50px); font-weight: 800; line-height: 1.08; letter-spacing: -1.4px; }
.mgbiz-hero-copy > p { margin: 0; max-width: 52ch; font-size: 16px; line-height: 1.68; color: var(--mg-muted); }
.mgbiz-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.mgbiz-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 46px; padding: 0 22px; border-radius: 12px; text-decoration: none;
  background: var(--mgbiz, #e9003f); color: #fff;
  font-size: 14px; font-weight: 700; border: 1px solid var(--mgbiz, #e9003f);
  transition: transform .14s ease, box-shadow .16s ease;
}
.mgbiz-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px color-mix(in srgb, var(--mgbiz, #e9003f) 30%, transparent); }
.mgbiz-btn.ghost { background: transparent; color: var(--mgbiz-ink); border-color: var(--mg-line-strong); box-shadow: none; }
.mgbiz-btn.ghost:hover { border-color: var(--mgbiz, #e9003f); color: var(--mgbiz, #e9003f); }
.mgbiz-highlights { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 10px; }
.mgbiz-highlights li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--mg-muted); }
.mgbiz-highlights .mg-icon { color: #22a55b; flex: none; margin-top: 1px; }

.mgbiz-hero-card {
  border: 1px solid var(--mg-line); border-radius: 20px; overflow: hidden;
  background: var(--mg-surface); box-shadow: 0 22px 50px rgba(0, 0, 0, .14);
}
.mgbiz-hero-media { aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--mg-surface-2); overflow: hidden; }
.mgbiz-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.mgbiz-hero-art {
  display: grid; place-items: center; width: 100%; height: 100%;
  background: linear-gradient(150deg, color-mix(in srgb, var(--mgbiz, #e9003f) 20%, #1b2733), #101820);
  color: #fff;
}
.mgbiz-hero-facts { display: grid; grid-template-columns: repeat(3, 1fr); }
.mgbiz-hero-facts > div { padding: 15px 14px; text-align: center; border-left: 1px solid var(--mg-line); }
.mgbiz-hero-facts > div:first-child { border-left: 0; }
.mgbiz-hero-facts b {
  display: inline-flex; align-items: center; gap: 5px; justify-content: center;
  font-size: 17px; font-weight: 800;
}
.mgbiz-hero-facts b .mg-icon { color: #f0a500; }
.mgbiz-hero-facts b.is-open { color: #22a55b; }
.mgbiz-hero-facts b.is-closed { color: var(--mg-faint); }
.mgbiz-hero-facts small { display: block; margin-top: 4px; font-size: 11.5px; color: var(--mg-faint); }
@media (max-width: 900px) { .mgbiz-hero-grid { grid-template-columns: 1fr; gap: 32px; } .mgbiz-hero { padding: 38px 0 34px; } }

/* ---------- Bölümler ---------- */
.mgbiz-section { padding: 62px 0; border-top: 1px solid var(--mg-line); }
.mgbiz-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 34px; margin-bottom: 32px; flex-wrap: wrap; }
.mgbiz-head h2 { margin: 12px 0 0; font-size: clamp(24px, 3vw, 34px); font-weight: 800; letter-spacing: -.8px; line-height: 1.15; }
.mgbiz-head > p { margin: 0; max-width: 40ch; font-size: 14.5px; line-height: 1.65; color: var(--mg-muted); }
.mgbiz-rating-line { font-size: 14px; color: var(--mg-muted); }
.mgbiz-rating-line b { font-size: 20px; font-weight: 800; color: var(--mgbiz-ink); }

.mgbiz-service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 16px; }
.mgbiz-service {
  padding: 26px 24px 24px; border: 1px solid var(--mg-line); border-radius: 16px;
  background: var(--mg-surface);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.mgbiz-service:hover { border-color: var(--mgbiz, #e9003f); transform: translateY(-3px); box-shadow: 0 16px 32px rgba(0, 0, 0, .12); }
.mgbiz-service-icon {
  display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: 13px; background: var(--mgbiz-soft); color: var(--mgbiz, #e9003f);
}
.mgbiz-service h3 { margin: 18px 0 9px; font-size: 18px; font-weight: 700; letter-spacing: -.3px; }
.mgbiz-service p { margin: 0; font-size: 14px; line-height: 1.62; color: var(--mg-muted); }
.mgbiz-price { display: block; margin-top: 16px; font-size: 14px; font-weight: 800; color: var(--mgbiz, #e9003f); }

/* ---------- Kampanyalar ---------- */
.mgbiz-campaigns .mgbiz-wrap { display: grid; gap: 14px; }
.mgbiz-campaign {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 28px; align-items: center; padding: 30px 32px; border-radius: 18px;
  background: linear-gradient(112deg, var(--mgbiz, #e9003f), color-mix(in srgb, var(--mgbiz, #e9003f) 26%, #16181d) 72%);
  color: #fff;
}
.mgbiz-campaign-badge {
  display: grid; place-items: center; text-align: center;
  width: 94px; height: 94px; flex: none; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .55);
  font-size: 13px; font-weight: 800; padding: 8px;
}
.mgbiz-campaign small { font-size: 11px; font-weight: 800; letter-spacing: 1.8px; opacity: .82; }
.mgbiz-campaign h2 { margin: 8px 0 6px; font-size: 26px; font-weight: 800; letter-spacing: -.5px; }
.mgbiz-campaign p { margin: 0; font-size: 14.5px; color: rgba(255, 255, 255, .88); }
.mgbiz-campaign .mgbiz-btn { background: #fff; color: #16181d; border-color: #fff; flex: none; }
.mgbiz-campaign .mgbiz-btn:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, .24); }
@media (max-width: 820px) { .mgbiz-campaign { grid-template-columns: 1fr; gap: 18px; padding: 24px; text-align: left; } }

/* ---------- Yorumlar ---------- */
.mgbiz-review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.mgbiz-review { padding: 26px 24px; border: 1px solid var(--mg-line); border-radius: 16px; background: var(--mg-surface); }
.mgbiz-stars { position: relative; display: inline-flex; gap: 3px; color: var(--mg-line-strong); }
/* Dolu yıldızlar: --filled kadar ilk yıldız marka sarısıyla boyanır. */
.mgbiz-stars > span {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  width: calc(var(--filled, 5) * 17px);
}
.mgbiz-stars > span::before {
  content: "★★★★★"; letter-spacing: 2px; font-size: 15px; color: #f0a500; line-height: 1;
}
.mgbiz-review p { margin: 16px 0 18px; font-size: 15.5px; line-height: 1.65; color: var(--mgbiz-ink); }
.mgbiz-review footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding-top: 14px; border-top: 1px solid var(--mg-line);
  font-size: 13px; color: var(--mg-faint);
}
.mgbiz-review footer b { font-size: 13.5px; font-weight: 700; color: var(--mgbiz-ink); }

/* ---------- İletişim ---------- */
.mgbiz-contact-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 44px; align-items: start; }
.mgbiz-contact-grid h2 { margin: 12px 0 20px; font-size: clamp(24px, 3vw, 32px); font-weight: 800; letter-spacing: -.7px; }
.mgbiz-contact-list { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 13px; }
.mgbiz-contact-list li { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; color: var(--mg-muted); }
.mgbiz-contact-list .mg-icon { color: var(--mgbiz, #e9003f); flex: none; margin-top: 1px; }
.mgbiz-contact-list a { color: var(--mgbiz-ink); text-decoration: none; font-weight: 600; }
.mgbiz-contact-list a:hover { color: var(--mgbiz, #e9003f); }
.mgbiz-hours { border: 1px solid var(--mg-line); border-radius: 16px; background: var(--mg-surface); padding: 22px 24px; }
.mgbiz-hours h3 { margin: 0 0 14px; font-size: 16.5px; font-weight: 700; letter-spacing: -.2px; }
.mgbiz-hours ul { list-style: none; margin: 0; padding: 0; display: grid; }
.mgbiz-hours li {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 0; border-top: 1px solid var(--mg-line);
  font-size: 14px; color: var(--mg-muted);
}
.mgbiz-hours li:first-child { border-top: 0; }
.mgbiz-hours li b { font-weight: 700; color: var(--mgbiz-ink); font-variant-numeric: tabular-nums; }
.mgbiz-hours li.today { color: var(--mgbiz, #e9003f); font-weight: 700; }
.mgbiz-hours li.today b { color: var(--mgbiz, #e9003f); }
@media (max-width: 880px) { .mgbiz-contact-grid { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- Alt bilgi ---------- */
.mgbiz-footer { border-top: 1px solid var(--mg-line); background: var(--mg-surface-2); padding: 44px 0 22px; }
.mgbiz-footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 36px; }
.mgbiz-footer-brand .brand { width: 150px; height: 38px; }
.mgbiz-footer-brand .brand-global-logo { width: 146px; height: 38px; }
.mgbiz-footer-brand p { margin: 14px 0 0; max-width: 42ch; font-size: 13.5px; line-height: 1.65; color: var(--mg-muted); }
.mgbiz-footer-links { display: grid; gap: 9px; align-content: start; }
.mgbiz-footer-links a { font-size: 13.5px; font-weight: 600; color: var(--mg-muted); text-decoration: none; }
.mgbiz-footer-links a:hover { color: var(--mg-accent-ink); }
.mgbiz-footer-stores small { display: block; font-size: 12.5px; color: var(--mg-faint); margin-bottom: 10px; }
.mgbiz-footer-stores span { display: flex; gap: 8px; flex-wrap: wrap; }
.mgbiz-footer-stores a {
  display: inline-flex; align-items: center; height: 34px; padding: 0 14px;
  border: 1px solid var(--mg-line-strong); border-radius: 9px;
  font-size: 12.5px; font-weight: 700; color: var(--mgbiz-ink); text-decoration: none;
}
.mgbiz-footer-stores a:hover { border-color: var(--mg-accent); color: var(--mg-accent-ink); }
.mgbiz-footer-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--mg-line);
  font-size: 12.5px; color: var(--mg-faint);
}
.mgbiz-footer-foot a { color: var(--mg-accent-ink); text-decoration: none; font-weight: 600; }
@media (max-width: 880px) { .mgbiz-footer-grid { grid-template-columns: 1fr; gap: 26px; } }

/* ============================================================
   25) ARAÇ (GARAJ) DETAYI
   Başlık 17px / alt satır 10px ve sabit koyu hex'lerdeydi; sayaç
   düğmeleri de ölçüsüzdü.
   ============================================================ */
.vd-main { background: var(--mg-surface); border-color: var(--mg-line); border-radius: 16px; color: var(--mg-faint); }
.vd-main img { width: 100%; height: 100%; object-fit: cover; }
.vd-count {
  position: absolute; right: 12px; bottom: 12px;
  padding: 4px 10px; border-radius: 20px;
  font-size: 11.5px; font-weight: 700; color: #fff;
  background: rgba(8, 10, 13, .72); backdrop-filter: blur(6px);
}
.vd-thumbs { gap: 9px; margin-top: 11px; }
.vd-thumbs button { width: 84px; height: 58px; border-radius: 10px; background: var(--mg-surface-2); }
.vd-thumbs button.on { border-color: var(--mg-accent); }

.vd-head {
  background: var(--mg-surface); border-color: var(--mg-line);
  border-radius: 16px; padding: 18px 20px; margin: 14px 0 14px;
}
.vd-title { gap: 15px; }
.vd-brand {
  width: 46px; height: 46px; object-fit: contain; padding: 5px;
  border-radius: 12px; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
.vd-title h1 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.5px; line-height: 1.2; }
.vd-title small { margin-top: 6px; font-size: 13px; color: var(--mg-muted); }
.vd-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

/* Beğeni / favori / yorum sayaçları: eşit ölçü, okunur rakam. */
.vote-button, .vehicle-edit-button {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 15px; cursor: pointer;
  border: 1px solid var(--mg-line-strong); border-radius: 10px;
  background: var(--mg-surface-2); color: var(--mg-text);
  font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.vote-button:hover:not(:disabled), .vehicle-edit-button:hover { border-color: var(--mg-accent); color: var(--mg-accent-ink); }
.vote-button.on { border-color: var(--mg-accent); background: var(--mg-accent-soft); color: var(--mg-accent-ink); }
.vote-button:disabled { opacity: .6; cursor: default; }
.vehicle-edit-button { background: var(--mg-accent); border-color: var(--mg-accent); color: #fff; }
.vehicle-edit-button:hover { background: var(--mg-accent-ink); border-color: var(--mg-accent-ink); color: #fff; }

/* Özellik / servis kartları */
.vd-prop, .vd-service, .vd-row, .vd-owner, .vd-form {
  background: var(--mg-surface); border-color: var(--mg-line); border-radius: 14px;
}
.vd-prop b, .vd-service b { font-size: 14px; font-weight: 700; }
.vd-prop small, .vd-service small { font-size: 12.5px; color: var(--mg-faint); }
.vd-owner b { font-size: 14.5px; font-weight: 700; }
.vd-owner small { font-size: 12.5px; color: var(--mg-faint); }

/* ============================================================
   26) HİKÂYE GÖRÜNTÜLEYİCİ
   Veri sözleşmesi düzeldikten sonra çerçeve de büyütüldü:
   ilerleme çubuğu üstte, isim okunur, izlenme sayacı altta.
   Medya yüzeyi bilinçli olarak her temada koyu.
   ============================================================ */
.story-frame {
  width: min(440px, 100%); background: #0b0f14; border-color: #232b33;
  border-radius: 18px; color: #fff;
}
.story-progress { padding: 14px 16px 0; gap: 5px; }
.story-progress span { height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .22); }
.story-progress span.done { background: #fff; }
.story-progress span.active { background: var(--mg-accent); }
.story-frame header { padding: 13px 16px; }
.story-frame .user-badge .ub-names b { color: #fff; font-size: 14px; }
.story-frame .user-badge .ub-names small { color: rgba(255, 255, 255, .68); font-size: 12px; }
.story-close {
  width: 34px; height: 34px; flex: none; border-radius: 9px; cursor: pointer;
  background: rgba(255, 255, 255, .1); color: #fff; border: 0;
  display: grid; place-items: center;
}
.story-close:hover { background: rgba(255, 255, 255, .2); }
.story-stage { aspect-ratio: 9 / 15; background: #000; }
.story-missing {
  display: grid; place-items: center; gap: 10px; height: 100%;
  color: rgba(255, 255, 255, .55); text-align: center;
}
.story-missing small { font-size: 12.5px; }
.story-nav {
  width: 38px; height: 38px; cursor: pointer;
  background: rgba(10, 13, 16, .58); backdrop-filter: blur(6px);
}
.story-nav:hover { background: rgba(10, 13, 16, .82); }
.story-stats {
  display: flex; align-items: center; gap: 18px;
  padding: 13px 16px; border-top: 1px solid rgba(255, 255, 255, .1);
}
.story-stats span {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; color: rgba(255, 255, 255, .78);
  font-variant-numeric: tabular-nums;
}
.story-stats span.on { color: var(--mg-accent-ink); }

/* ============================================================
   27) DÜZELTMELER — 2026-08-30 (ikinci tur)
   ============================================================ */

/* ---------- Hikâye şeridi: isimler temaya uymalı ----------
   theme.css'teki `html[data-theme="light"] :is(.social-app,…) :is(h1,h2,h3,h4,b,strong)
   {color:inherit}` kuralı (0,2,2); `.story b` (0,1,1) ondan zayıf kalıyordu ve `b`
   rengi `.story{color:#fff}`ten miras alınıyordu. Seçiciler (0,3,x)'e çıkarıldı. */
.social-app .stories .story b,
html[data-theme="light"] .stories .story b { color: var(--mg-text); }
.social-app .stories .story small,
html[data-theme="light"] .stories .story small { color: var(--mg-muted); font-size: 11px; max-width: 100%; }
.social-app .stories .story b { font-size: 12px; font-weight: 700; }

/* ---------- Takip butonu: her iki temada da net ---------- */
.post-card header .follow-button, .follow-button {
  height: 34px; padding: 0 16px; border-radius: 10px;
  font-size: 13px; font-weight: 700; letter-spacing: -.1px;
  border: 1px solid var(--mg-accent); background: var(--mg-accent); color: #fff;
  box-shadow: none;
}
.post-card header .follow-button:hover:not(:disabled), .follow-button:hover:not(:disabled) {
  background: var(--mg-accent-ink); border-color: var(--mg-accent-ink); color: #fff;
}
/* Takip edilirken ikincil: nötr yüzey, marka rengi yok. */
.post-card header .follow-button.following, .follow-button.following {
  background: var(--mg-surface-2); border-color: var(--mg-line-strong); color: var(--mg-muted);
}
.post-card header .follow-button.following:hover:not(:disabled), .follow-button.following:hover:not(:disabled) {
  background: var(--mg-surface-2); border-color: var(--mg-accent); color: var(--mg-accent-ink);
}
.follow-button.large { height: 40px; padding: 0 22px; font-size: 14px; border-radius: 11px; }

/* ---------- Blog detayı ---------- */
.blog-detail-main { max-width: 900px; }
.blog-detail {
  background: var(--mg-surface); border: 1px solid var(--mg-line); border-radius: 18px;
}
.blog-detail-head { padding: 26px 28px 18px; gap: 12px; }
.blog-detail-head small { color: var(--mg-accent-ink); font-size: 11.5px; font-weight: 800; letter-spacing: 1.4px; }
.blog-detail-head h1 { font-size: 30px; font-weight: 800; letter-spacing: -.7px; line-height: 1.2; color: var(--mg-text); }
.blog-detail-meta { padding-top: 6px; border-top: 1px solid var(--mg-line); margin-top: 4px; }
.blog-detail-cover { max-height: 440px; }
.blog-detail-body {
  padding: 24px 28px 30px; color: var(--mg-text);
  font-size: 16px; line-height: 1.78; gap: 16px;
}
.blog-detail-body :is(h1, h2, h3) { color: var(--mg-text); margin: 14px 0 0; letter-spacing: -.3px; }
.blog-detail-body h1 { font-size: 24px; }
.blog-detail-body h2 { font-size: 21px; }
.blog-detail-body h3 { font-size: 18px; }
.blog-detail-body strong { color: var(--mg-text); }
.blog-detail-body a { color: var(--mg-accent-ink); }
.blog-detail-body blockquote {
  background: var(--mg-surface-2); border-left-color: var(--mg-accent); color: var(--mg-muted);
  padding: 14px 18px;
}
.blog-detail-body :is(td, th) { border-color: var(--mg-line); font-size: 14px; }
.blog-detail-body img { border-radius: 14px; }

/* Beğeni düğmesi: sayaçla birlikte tek, düz bir kontrol. */
.pd-like {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  height: 38px; padding: 0 16px; border-radius: 11px;
  border: 1px solid var(--mg-line-strong); background: var(--mg-surface-2);
  color: var(--mg-text); font-size: 13.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.pd-like:hover:not(:disabled) { border-color: var(--mg-accent); color: var(--mg-accent-ink); }
.pd-like.liked { background: var(--mg-accent-soft); border-color: var(--mg-accent); color: var(--mg-accent-ink); }
.pd-like:disabled { opacity: .6; cursor: default; }
.pd-stat {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 14px; border-radius: 11px;
  border: 1px solid var(--mg-line); background: var(--mg-surface-2);
  color: var(--mg-muted); font-size: 13.5px; font-weight: 600;
}

/* Blog yorumları — hiç CSS'i yoktu, ham liste gibi görünüyordu. */
.pd-comments {
  margin-top: 18px; padding: 22px 24px 24px;
  border: 1px solid var(--mg-line); border-radius: 18px; background: var(--mg-surface);
}
.pd-comments > h2 {
  display: flex; align-items: center; gap: 9px; margin: 0 0 16px;
  font-size: 18px; font-weight: 700; letter-spacing: -.3px;
}
.pd-comments > h2 span {
  font-size: 12.5px; font-weight: 800; padding: 3px 10px; border-radius: 20px;
  background: var(--mg-surface-2); color: var(--mg-muted);
}
.pd-comment-form {
  display: grid; grid-template-columns: 38px minmax(0, 1fr) 42px;
  gap: 11px; align-items: center; margin-bottom: 18px;
}
.pd-comment-form input {
  height: 42px; padding: 0 15px; width: 100%;
  border: 1px solid var(--mg-line); border-radius: 11px;
  background: var(--mg-surface-2); color: var(--mg-text);
  font-size: 14px; outline: none;
}
.pd-comment-form input:focus { border-color: var(--mg-line-strong); }
.pd-comment-form input::placeholder { color: var(--mg-faint); }
.pd-comment-form button {
  width: 42px; height: 42px; cursor: pointer; border: 0; border-radius: 11px;
  background: var(--mg-accent); color: #fff; display: grid; place-items: center;
}
.pd-comment-form button:disabled { opacity: .5; cursor: default; }
.pd-comment {
  display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px;
  padding: 14px 0; border-top: 1px solid var(--mg-line);
}
.pd-comment:first-of-type { border-top: 0; }
.pd-comment header { display: flex; align-items: center; gap: 9px; }
.pd-comment header a { font-size: 14px; font-weight: 700; color: var(--mg-text); text-decoration: none; }
.pd-comment header a:hover { color: var(--mg-accent-ink); }
.pd-comment header small { font-size: 12px; color: var(--mg-faint); }
.pd-comment p { margin: 7px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--mg-text); overflow-wrap: anywhere; }
.pd-empty { margin: 0; padding: 22px 0; text-align: center; font-size: 13.5px; color: var(--mg-faint); }
.pd-login-note { margin: 0 0 16px; font-size: 13.5px; color: var(--mg-muted); }
.pd-login-note a { color: var(--mg-accent-ink); font-weight: 700; }

/* ---------- Forum: okunurluk ---------- */
.entry-card {
  background: var(--mg-surface); border: 1px solid var(--mg-line);
  border-radius: 14px; padding: 17px 19px;
}
.entry-list { display: grid; gap: 10px; }
.entry-content {
  margin: 12px 0 0; font-size: 15px; line-height: 1.68;
  color: var(--mg-text); overflow-wrap: anywhere;
}
.entry-card footer { display: flex; gap: 9px; margin-top: 14px; }
.entry-card header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.op-badge, .ai-badge {
  font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .3px;
  padding: 3px 9px; border-radius: 20px;
  background: var(--mg-accent-soft); color: var(--mg-accent-ink);
}
.ai-badge { background: var(--mg-surface-2); color: var(--mg-muted); }
.topic-head {
  background: var(--mg-surface); border: 1px solid var(--mg-line);
  border-radius: 16px; padding: 20px 22px; margin-bottom: 6px;
}
.topic-head h1 { margin: 12px 0 0; font-size: 25px; font-weight: 800; letter-spacing: -.6px; line-height: 1.25; color: var(--mg-text); }
.topic-head-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.topic-head-meta em {
  font-style: normal; font-size: 11.5px; font-weight: 800; letter-spacing: .5px;
  padding: 4px 11px; border-radius: 20px;
  background: color-mix(in srgb, var(--cat, #e9003f) 14%, transparent); color: var(--cat, #e9003f);
}
.topic-head-meta > span { font-size: 12.5px; color: var(--mg-faint); font-weight: 600; }

/* Konu bildirimleri düğmesi */
.topic-subscribe {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  margin-left: auto; height: 34px; padding: 0 14px;
  border: 1px solid var(--mg-line-strong); border-radius: 10px;
  background: var(--mg-surface-2); color: var(--mg-muted);
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.topic-subscribe:hover:not(:disabled) { border-color: var(--mg-accent); color: var(--mg-accent-ink); }
.topic-subscribe.on { background: var(--mg-accent-soft); border-color: var(--mg-accent); color: var(--mg-accent-ink); }
.topic-subscribe:disabled { opacity: .6; cursor: default; }
.topic-subscribe.rail { margin: 14px 0 0; width: 100%; justify-content: center; height: 38px; }

/* Konu detayı rayı: kategoriler */
.rail-cats { display: grid; gap: 4px; margin-top: 10px; }
.rail-cat {
  display: flex; align-items: center; gap: 11px; padding: 9px 10px;
  border-radius: 11px; color: inherit; text-decoration: none;
  transition: background .13s ease;
}
.rail-cat:hover { background: var(--mg-surface-2); }
.rail-cat.on { background: color-mix(in srgb, var(--cat, #e9003f) 10%, transparent); }
.rail-cat-icon {
  width: 32px; height: 32px; flex: none; border-radius: 9px; overflow: hidden;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--cat, #e9003f) 14%, transparent); color: var(--cat, #e9003f);
}
.rail-cat-icon img { width: 18px; height: 18px; object-fit: contain; }
.rail-cat b { display: block; font-size: 13.5px; font-weight: 700; }
.rail-cat small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--mg-faint); }

/* ---------- Rota detayı ---------- */
.route-detail-app { background: var(--mg-bg); color: var(--mg-text); }
.route-detail-card, .route-detail-stats, .route-stops, .route-comments,
.route-detail-aside, .route-stop-list article, .route-comment-composer, .route-comment-list > article {
  background: var(--mg-surface); border-color: var(--mg-line);
}
.route-detail-cover { height: 320px; background: var(--mg-surface-2); }
.route-detail-heading h1 { margin: 10px 0; font-size: 30px; font-weight: 800; letter-spacing: -.7px; color: var(--mg-text); }
.route-detail-heading p { font-size: 14.5px; line-height: 1.65; color: var(--mg-muted); }
.route-detail-cover span, .route-kicker { font-size: 11px; font-weight: 800; letter-spacing: 1.8px; color: var(--mg-accent-ink); }
.route-detail-stats { border-color: var(--mg-line); }
.route-detail-stats span { border-color: var(--mg-line); }
.route-detail-stats b { font-size: 17px; font-weight: 800; color: var(--mg-text); }
.route-detail-stats small { font-size: 12px; color: var(--mg-faint); margin-top: 5px; }
.route-detail-author b { font-size: 14.5px; font-weight: 700; color: var(--mg-text); }
.route-detail-author small { font-size: 12.5px; color: var(--mg-faint); }
/* Beğeni: düz, tek parça kontrol */
.route-social-button {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  height: 38px; padding: 0 16px; border-radius: 11px;
  border: 1px solid var(--mg-line-strong); background: var(--mg-surface-2);
  color: var(--mg-text); font-size: 13.5px; font-weight: 700;
  font-variant-numeric: tabular-nums; box-shadow: none;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.route-social-button:hover:not(:disabled) { border-color: var(--mg-accent); color: var(--mg-accent-ink); }
.route-social-button.on, .route-social-button.liked {
  background: var(--mg-accent-soft); border-color: var(--mg-accent); color: var(--mg-accent-ink);
}
.route-start {
  height: 40px; padding: 0 20px; border-radius: 11px;
  font-size: 13.5px; font-weight: 700; background: var(--mg-accent); color: #fff;
  display: inline-flex; align-items: center;
}

/* ---------- Keşfet düzeltmeleri ---------- */
/* Afiş görselleri 800x450, yani tam 16:9. Kap bu orana ayarlanınca ne kırpma
   (cover) ne de boşluk (contain) kalıyor; 340px oranından da belirgin
   biçimde yükseliyor. */
.xp-hero-carousel { aspect-ratio: 16 / 9; min-height: 0; }
.xp-hero.bare .xp-hero-bg { background-size: cover; }

/* "İşletmeni oluştur" bloğu sabit koyu hex'lerdeydi. */
.xp-biz {
  background: var(--mg-surface); border: 1px solid var(--mg-line); border-radius: 18px;
  padding: 30px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 34px; align-items: center;
}
.xp-biz-copy h2 { font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; letter-spacing: -.6px; line-height: 1.18; color: var(--mg-text); }
.xp-biz-copy h2 em { font-style: normal; color: var(--mg-accent-ink); }
.xp-biz-copy > p { font-size: 14px; line-height: 1.65; color: var(--mg-muted); }
.xp-biz-kicker {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 800; letter-spacing: 1.4px; color: var(--mg-accent-ink);
}
.xp-biz-feats { list-style: none; margin: 20px 0; padding: 0; display: grid; gap: 11px; }
.xp-biz-feats li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--mg-muted); }
.xp-biz-feats .mg-icon { color: var(--mg-accent-ink); flex: none; margin-top: 1px; }
.xp-biz-feats b { color: var(--mg-text); }
.xp-biz-primary {
  display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 20px; border-radius: 11px; text-decoration: none;
  background: var(--mg-accent); color: #fff; font-size: 13.5px; font-weight: 700;
}
.xp-biz-stores small { display: block; margin-bottom: 8px; font-size: 12px; color: var(--mg-faint); }
.xp-biz-stores span { display: flex; gap: 8px; }
.xp-biz-stores a {
  display: inline-flex; align-items: center; height: 34px; padding: 0 14px;
  border: 1px solid var(--mg-line-strong); border-radius: 9px; text-decoration: none;
  font-size: 12.5px; font-weight: 700; color: var(--mg-text);
}
.xp-biz-stores a:hover { border-color: var(--mg-accent); color: var(--mg-accent-ink); }
.xp-browser { border-color: var(--mg-line); background: var(--mg-surface-2); }
.xp-browser-bar { background: var(--mg-surface-2); border-color: var(--mg-line); }
.xp-browser-bar b { background: var(--mg-surface); color: var(--mg-muted); }
@media (max-width: 900px) { .xp-biz { grid-template-columns: 1fr; gap: 24px; padding: 22px; } }

/* Keşfet blog bloğu: kapak + yan liste, okunur tipografi. */
.xp-blogs { display: grid; gap: 14px; }
.xp-blog-lead {
  position: relative; display: block; min-height: 260px; overflow: hidden;
  border: 1px solid var(--mg-line); border-radius: 16px; background: #0b0f14;
  color: #fff; text-decoration: none;
}
.xp-blog-lead img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.xp-blog-lead::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(7, 9, 12, .96) 8%, rgba(7, 9, 12, .55) 46%, rgba(7, 9, 12, 0) 82%);
}
.xp-blog-lead > span {
  position: relative; z-index: 2; display: grid; align-content: end; gap: 8px;
  min-height: 260px; padding: 22px 24px;
}
.xp-blog-lead small { font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, .74); }
.xp-blog-lead b { font-size: 21px; font-weight: 800; letter-spacing: -.4px; line-height: 1.25; color: #fff; }
.xp-blog-lead p {
  margin: 0; font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, .78);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.xp-blog-rest { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.xp-blog-rest a {
  display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 12px; align-items: center;
  padding: 10px; border: 1px solid var(--mg-line); border-radius: 13px;
  background: var(--mg-surface); color: inherit; text-decoration: none;
  transition: border-color .15s ease;
}
.xp-blog-rest a:hover { border-color: var(--mg-line-strong); }
.xp-blog-rest img { width: 74px; height: 58px; border-radius: 10px; object-fit: cover; background: var(--mg-surface-2); }
.xp-blog-rest span { display: grid; gap: 4px; min-width: 0; }
.xp-blog-rest b {
  font-size: 13.5px; font-weight: 700; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.xp-blog-rest small { font-size: 11.5px; color: var(--mg-faint); }

/* ---------- Yeni gönderi (paylaş) sayfası ---------- */
.create-app { background: var(--mg-bg); color: var(--mg-text); }
.create-main { padding: 26px 28px 70px; }
.create-title span { font-size: 11px; font-weight: 800; letter-spacing: 1.8px; color: var(--mg-accent-ink); }
.create-title h1 { margin: 9px 0 6px; font-size: 28px; font-weight: 800; letter-spacing: -.6px; }
.create-title p { margin: 0; font-size: 13.5px; color: var(--mg-muted); }
.create-card {
  margin-top: 20px; padding: 22px 24px 24px;
  border: 1px solid var(--mg-line); border-radius: 18px; background: var(--mg-surface);
}
.create-author { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.create-author b { display: block; font-size: 15px; font-weight: 700; }
.create-author small { display: block; font-size: 12.5px; color: var(--mg-faint); }
.create-visibility {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 20px;
  border: 1px solid var(--mg-line); background: var(--mg-surface-2);
  font-size: 12px; font-weight: 700; color: var(--mg-muted);
}
.create-card textarea {
  width: 100%; min-height: 150px; resize: vertical; padding: 15px 16px;
  border: 1px solid var(--mg-line); border-radius: 13px;
  background: var(--mg-surface-2); color: var(--mg-text);
  font-size: 15.5px; line-height: 1.6; outline: none;
}
.create-card textarea:focus { border-color: var(--mg-line-strong); }
.create-card textarea::placeholder { color: var(--mg-faint); }
.create-counter { margin-top: 7px; text-align: right; font-size: 12px; color: var(--mg-faint); font-variant-numeric: tabular-nums; }
.create-counter.over { color: var(--mg-accent-ink); font-weight: 700; }

.create-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-top: 14px; }
.create-thumb {
  position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--mg-line); background: var(--mg-surface-2);
  display: grid; place-items: center; gap: 6px; color: var(--mg-faint); padding: 10px; text-align: center;
}
.create-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.create-thumb small { font-size: 11px; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.create-thumb button {
  position: absolute; top: 6px; right: 6px; z-index: 2; cursor: pointer;
  width: 24px; height: 24px; border: 0; border-radius: 50%;
  background: rgba(8, 10, 13, .74); color: #fff; display: grid; place-items: center;
}
.create-thumb button:hover { background: var(--mg-accent); }

.create-drop {
  display: grid; justify-items: center; gap: 7px; cursor: pointer;
  margin-top: 14px; padding: 26px 18px;
  border: 1.5px dashed var(--mg-line-strong); border-radius: 14px;
  background: var(--mg-surface-2); color: var(--mg-muted);
  transition: border-color .15s ease, color .15s ease;
}
.create-drop:hover { border-color: var(--mg-accent); color: var(--mg-accent-ink); }
.create-drop.compact { padding: 14px; }
.create-drop b { font-size: 14px; font-weight: 700; }
.create-drop small { font-size: 12.5px; color: var(--mg-faint); }
.create-drop input[type="file"] { display: none; }

.create-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--mg-line);
}
.create-note { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--mg-faint); }
.create-note .mg-icon { color: #22a55b; }
.create-actions { display: flex; align-items: center; gap: 10px; }
.create-cancel {
  display: inline-flex; align-items: center; height: 42px; padding: 0 18px;
  border-radius: 11px; text-decoration: none;
  border: 1px solid var(--mg-line-strong); background: transparent;
  color: var(--mg-muted); font-size: 13.5px; font-weight: 700;
}
.create-cancel:hover { color: var(--mg-text); border-color: var(--mg-line-strong); }
.publish-button {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  height: 42px; padding: 0 22px; border: 0; border-radius: 11px;
  background: var(--mg-accent); color: #fff; font-size: 14px; font-weight: 700;
}
.publish-button:hover:not(:disabled) { background: var(--mg-accent-ink); }
.publish-button:disabled { opacity: .5; cursor: default; }
.loading-wheel.small { width: 15px; height: 15px; border-width: 2px; }

/* ---------- Bildirim avatarları ---------- */
.notification-avatar { position: relative; flex: none; }
.notification-avatar > .notification-icon {
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 12px; background: var(--mg-surface-2); color: var(--mg-muted);
}
.notification-kind {
  position: absolute; right: -3px; bottom: -3px;
  display: grid; place-items: center; width: 19px; height: 19px;
  border-radius: 50%; border: 2px solid var(--mg-surface);
  background: var(--mg-muted); color: #fff;
}
.notification-kind.kind-like { background: #e42a55; }
.notification-kind.kind-follow { background: #2f7de1; }
.notification-kind.kind-comment { background: #8b5cf6; }
.notification-kind.kind-other { background: var(--mg-faint); }
.notification-item {
  display: flex; align-items: center; gap: 14px; padding: 13px 16px;
  border: 1px solid var(--mg-line); border-radius: 14px; background: var(--mg-surface);
}
.notification-item.unread { border-color: color-mix(in srgb, var(--mg-accent) 34%, var(--mg-line)); }
.notification-item > div { flex: 1; min-width: 0; }
.notification-text { display: block; font-size: 14px; line-height: 1.5; color: var(--mg-text); }
.notification-item small { display: block; margin-top: 4px; font-size: 12px; color: var(--mg-faint); }
.notification-go { color: var(--mg-faint); flex: none; display: grid; place-items: center; }

/* ---------- Rozet modalı ---------- */
.badge-all {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 0; background: transparent; padding: 4px 6px; border-radius: 8px;
  font-size: 12.5px; font-weight: 700; color: var(--mg-accent-ink);
}
.badge-all:hover { background: var(--mg-accent-soft); }
.badges-modal { width: min(520px, 100%); }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; padding: 4px; }
.badge-tile {
  position: relative; display: grid; justify-items: center; gap: 7px; cursor: pointer;
  padding: 14px 8px 12px; border-radius: 13px; text-align: center;
  border: 1px solid var(--mg-line); background: var(--mg-surface);
  transition: border-color .14s ease, background .14s ease;
}
.badge-tile:hover { border-color: var(--mg-line-strong); }
.badge-tile.active { border-color: var(--mg-accent); background: var(--mg-accent-soft); }
.badge-tile b {
  font-size: 11.5px; font-weight: 700; line-height: 1.3; color: var(--mg-text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Kazanılmayanlar soluk ve gri; katalogda yerini korur. */
.badge-tile.locked { opacity: .5; }
.badge-tile.locked .badge-icon { filter: grayscale(1); background: var(--mg-surface-2); color: var(--mg-faint); }
.badge-tile.locked b { color: var(--mg-faint); }
.badge-lock {
  position: absolute; top: 7px; right: 7px;
  display: grid; place-items: center; width: 17px; height: 17px;
  border-radius: 50%; background: var(--mg-surface-2); color: var(--mg-faint);
}
.badge-icon.big { width: 54px; height: 54px; border-radius: 15px; }
.badge-icon.on { background: var(--mg-accent-soft); color: var(--mg-accent-ink); }
.badge-detail {
  display: flex; align-items: flex-start; gap: 14px; margin: 4px 4px 12px;
  padding: 15px 16px; border-radius: 14px;
  border: 1px solid var(--mg-line); background: var(--mg-surface-2);
}
.badge-detail b { display: block; font-size: 15px; font-weight: 700; }
.badge-detail p { margin: 6px 0 6px; font-size: 13.5px; line-height: 1.55; color: var(--mg-muted); }
.badge-detail small { font-size: 12px; font-weight: 700; color: var(--mg-accent-ink); }

/* ---------- Giriş sayfası: daha düz, daha temiz ---------- */
.auth-toolbar {
  padding: 4px; gap: 0; border-radius: 12px;
  background: rgba(13, 17, 22, .5);
  border: 1px solid rgba(255, 255, 255, .1);
  backdrop-filter: blur(14px); box-shadow: none;
}
html[data-theme="light"] .auth-toolbar {
  background: var(--mg-surface); border-color: var(--mg-line); box-shadow: none;
}
.auth-toolbar .lang-switch button {
  min-width: 40px; height: 30px; padding: 0 10px; border-radius: 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .4px;
}
.auth-toolbar .lang-switch button.active { box-shadow: none; }
.auth-toolbar .lang-switch::after { display: none; }
.auth-toolbar .top-action {
  width: 30px; height: 30px; margin-left: 4px; border-radius: 8px;
}

/* event-shell-standard.css'teki `.explore-hero{min-height:230px;padding:24px}`
   afişin kabı doldurmasını engelliyordu: 16:9 kutunun içinde görsel 230px'de
   kalıyor, altında boşluk oluşuyor ve üstten kırpılmış görünüyordu. */
.xp-hero-carousel .xp-hero { position: absolute; inset: 0; min-height: 0; }
.xp-hero-carousel .xp-hero.bare { padding: 0; }
.xp-hero-carousel .xp-hero-bg { background-size: cover; background-position: center; }

/* ============================================================
   28) MAĞAZA SAYFASI (/shop/{id})
   shop-site.css sabit koyu hex'lerle yazılmıştı; sayfa aydınlık temada da
   koyu kalıyordu. Burada tokenlara bağlanıyor ve tipografi yükseltiliyor.
   Kapak fotoğrafı ve üstündeki katmanlar bilinçli olarak koyu kalır.
   ============================================================ */
.bz-site, .bz-boot { background: var(--mg-bg); color: var(--mg-text); }

.bz-topstrip {
  background: var(--mg-surface-2); border-bottom: 1px solid var(--mg-line);
  color: var(--mg-muted); font-size: 12.5px;
}
.bz-topstrip .bz-container { display: flex; align-items: center; gap: 14px; min-height: 42px; }
.bz-topstrip a { color: var(--mg-muted); font-weight: 600; }
.bz-topstrip a:hover { color: var(--mg-accent-ink); }
.bz-topstrip > .bz-container > span { display: inline-flex; align-items: center; gap: 6px; }
.bz-topstrip .mg-icon { color: #22a55b; }
.bz-theme {
  margin-left: auto; width: 34px; height: 34px; padding: 0; flex: none; cursor: pointer;
  border: 1px solid var(--mg-line); border-radius: 8px;
  background: var(--mg-surface); color: var(--mg-muted);
  display: grid; place-items: center;
}
.bz-theme:hover { color: var(--mg-text); border-color: var(--mg-line-strong); }
.bz-topstrip .bz-theme .mg-icon { color: inherit; width: 18px; height: 18px; }
.bz-topstrip .bz-theme > span { color: var(--mg-muted); }

.bz-header {
  background: color-mix(in srgb, var(--mg-surface) 92%, transparent);
  border-bottom: 1px solid var(--mg-line); backdrop-filter: blur(14px);
}
.bz-brand b { font-size: 15.5px; font-weight: 800; color: var(--mg-text); }
.bz-brand small { font-size: 11.5px; color: var(--mg-faint); }
.bz-brand-logo { background: var(--mg-surface-2); border: 1px solid var(--mg-line); color: var(--mg-faint); }
.bz-nav a { color: var(--mg-muted); font-size: 13.5px; font-weight: 600; }
.bz-nav a:hover { color: var(--mg-text); }
.bz-fav { background: var(--mg-surface-2); border-color: var(--mg-line); color: var(--mg-muted); }
.bz-fav:hover { border-color: var(--mg-accent); color: var(--mg-accent-ink); }
.bz-fav.on { background: var(--mg-accent); border-color: var(--mg-accent); color: #fff; }
.bz-button { background: var(--bz, #e9003f); color: #fff; font-weight: 700; }
.bz-button.ghost { background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .3); }

/* Kapak: medya yüzeyi her temada koyu kalır, üstündeki yazı beyaz. */
.bz-hero-veil { background: linear-gradient(180deg, rgba(6, 8, 11, .45), rgba(6, 8, 11, .88)); }
.bz-hero h1 { font-size: clamp(30px, 4vw, 46px); font-weight: 800; letter-spacing: -1.2px; color: #fff; }
.bz-slogan { font-size: 15.5px; line-height: 1.6; color: rgba(255, 255, 255, .84); }
.bz-chip { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); color: #fff; font-size: 12.5px; }
.bz-badge { background: rgba(34, 165, 91, .18); border: 1px solid rgba(34, 165, 91, .4); color: #6ee7a0; font-size: 11px; font-weight: 800; }

/* İstatistik şeridi kartlara oturuyor. */
.bz-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.bz-stat {
  position: relative; padding: 16px 18px; border-radius: 14px;
  background: var(--mg-surface); border: 1px solid var(--mg-line);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .16);
}
.bz-stat b { display: block; font-size: 22px; font-weight: 800; color: var(--mg-text); }
.bz-stat small { display: block; margin-top: 3px; font-size: 12px; color: var(--mg-faint); }
.bz-stat-star { position: absolute; top: 14px; right: 16px; color: #f0a500; font-style: normal; font-size: 17px; }
@media (max-width: 820px) { .bz-stats { grid-template-columns: repeat(2, 1fr); } }

.bz-section { padding: 60px 0; border-top: 1px solid var(--mg-line); }
.bz-alt { background: var(--mg-surface-2); }
.bz-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; margin-bottom: 28px; }
.bz-title h2 { margin: 10px 0 0; font-size: clamp(24px, 3vw, 34px); font-weight: 800; letter-spacing: -.8px; line-height: 1.15; color: var(--mg-text); }
.bz-title > p { margin: 0; font-size: 14px; color: var(--mg-muted); }
.bz-title > p b { color: var(--mg-text); font-weight: 800; }
.bz-kicker { font-size: 11px; font-weight: 800; letter-spacing: 1.8px; color: var(--bz, #e9003f); }
.bz-empty {
  display: flex; align-items: center; gap: 10px; margin: 0;
  padding: 20px 22px; border-radius: 14px;
  border: 1px dashed var(--mg-line-strong); background: var(--mg-surface);
  font-size: 14px; color: var(--mg-muted);
}

.bz-service { background: var(--mg-surface); border: 1px solid var(--mg-line); border-radius: 16px; overflow: hidden; }
.bz-service:hover { border-color: var(--bz, #e9003f); }
.bz-service-media { background: var(--mg-surface-2); color: var(--mg-faint); }
.bz-service-body { padding: 16px 18px 18px; }
.bz-service-body small { font-size: 11.5px; color: var(--mg-faint); font-weight: 700; letter-spacing: .3px; }
.bz-service-body h3 { margin: 8px 0 7px; font-size: 17px; font-weight: 700; letter-spacing: -.3px; color: var(--mg-text); }
.bz-service-body p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--mg-muted); }
.bz-service-body footer { margin-top: 12px; display: flex; align-items: center; gap: 12px; font-size: 12.5px; }
.bz-service-body s { color: var(--mg-faint); }
.bz-service-body em { font-style: normal; font-weight: 700; color: var(--bz, #e9003f); }
.bz-price-tag { background: var(--bz, #e9003f); color: #fff; font-size: 13px; font-weight: 800; }

.bz-campaign { background: var(--mg-surface); border: 1px solid var(--mg-line); border-radius: 16px; overflow: hidden; }
.bz-campaign-body { padding: 16px 18px 18px; }
.bz-campaign-body h3 { margin: 9px 0 7px; font-size: 18px; font-weight: 700; color: var(--mg-text); }
.bz-campaign-body p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.6; color: var(--mg-muted); }
.bz-campaign-body small { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mg-faint); }
.bz-campaign-tag { background: var(--bz, #e9003f); color: #fff; font-size: 11.5px; font-weight: 800; }
.bz-campaign-cta { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--bz, #e9003f); }

.bz-review { background: var(--mg-surface); border: 1px solid var(--mg-line); border-radius: 15px; }
.bz-review p { font-size: 14.5px; line-height: 1.65; color: var(--mg-text); }
.bz-quote { color: var(--mg-line-strong); }
.bz-title-score b { font-size: 21px; font-weight: 800; color: var(--mg-text); }
.bz-title-score p { font-size: 13.5px; color: var(--mg-muted); }
.bz-rate-strip, .bz-review-form, .bz-review-login {
  background: var(--mg-surface); border: 1px solid var(--mg-line); border-radius: 15px;
}
.bz-map { border: 1px solid var(--mg-line); border-radius: 16px; overflow: hidden; }
.bz-contact-row { color: var(--mg-muted); font-size: 14px; }
.bz-contact-row .mg-icon { color: var(--bz, #e9003f); }
.bz-cta { background: linear-gradient(112deg, var(--bz, #e9003f), color-mix(in srgb, var(--bz, #e9003f) 24%, #16181d) 74%); color: #fff; }
.bz-cta-kicker { color: rgba(255, 255, 255, .82); }

/* Alt bilgi + MyGarage markası */
.bz-footer { background: var(--mg-surface-2); border-top: 1px solid var(--mg-line); }
.bz-footer-brand b { font-size: 15px; font-weight: 800; color: var(--mg-text); }
.bz-footer-brand small { font-size: 12.5px; color: var(--mg-faint); }
.bz-footer-col b { font-size: 13.5px; font-weight: 800; color: var(--mg-text); }
.bz-footer-col a, .bz-footer-col span { font-size: 13px; color: var(--mg-muted); }
.bz-footer-col a:hover { color: var(--mg-accent-ink); }
.bz-powered { border-top: 1px solid var(--mg-line); background: var(--mg-surface); }
.bz-powered .bz-container {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding: 18px 0;
}
.bz-powered-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.bz-powered-brand .brand { width: 138px; height: 34px; }
.bz-powered-brand .brand-global-logo { width: 134px; height: 34px; }
.bz-powered-brand span { font-size: 12.5px; color: var(--mg-faint); }
.bz-powered-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--mg-accent-ink); text-decoration: none;
}
.bz-powered-cta:hover { text-decoration: underline; }

/* Kapak fotoğrafı olmayan işletmelerde hero yarım ekran boş kalıyordu
   (shop-site.css'te min-height:640px, sonra 540px). */
.bz-hero { min-height: 480px; }
.bz-hero.no-photo { min-height: 0; }
.bz-hero-inner { padding-top: 56px; padding-bottom: 34px; }
.bz-hero.no-photo .bz-hero-inner { padding-top: 44px; padding-bottom: 26px; }

/* ============================================================
   Yasal metinler (/{culture}/privacy-policy · /eula · /terms-and-conditions)
   ve kenar çubuğundaki küçük yasal bağlantılar
   ============================================================ */

/* Paylaş butonunun altındaki ince bağlantı listesi */
/* padding kısaltması bilerek: app.css'teki genel `footer{padding:40px 0}` kuralı
   yalnızca üstü ezildiğinde altta 40px boşluk bırakıyor. */
.social-sidebar .side-legal {
  display: grid; gap: 3px;
  margin: 14px 10px 2px; padding: 11px 0 0;
  border-top: 1px solid var(--mg-line);
}
.social-sidebar .side-legal a {
  font-size: 11px; line-height: 1.45; font-weight: 600;
  color: var(--mg-faint); text-decoration: none;
}
.social-sidebar .side-legal a:hover { color: var(--mg-accent-ink); text-decoration: underline; }

/* Sayfa kabuğu — Kaydedilenler sayfasıyla aynı ızgara */
.legal-app { min-height: 100vh; background: var(--mg-bg); color: var(--mg-text); }

.legal-heading { border-bottom: 1px solid var(--mg-line); padding-bottom: 25px; margin-bottom: 18px; }
.legal-heading span { font-size: 10px; color: var(--mg-accent-ink); letter-spacing: 2px; font-weight: 700; }
.legal-heading h1 { font-size: 31px; margin: 8px 0 0; }

.legal-langs { display: flex; gap: 6px; margin-bottom: 22px; }
.legal-langs a {
  min-width: 42px; padding: 6px 12px; border-radius: 8px;
  border: 1px solid var(--mg-line); background: var(--mg-surface);
  font-size: 12px; font-weight: 800; text-align: center;
  color: var(--mg-muted); text-decoration: none;
}
.legal-langs a:hover { color: var(--mg-text); border-color: var(--mg-line-strong); }
.legal-langs a.active { background: var(--mg-accent); border-color: var(--mg-accent); color: #fff; }

/* Metin düz metin dosyasından geliyor: satır sonları olduğu gibi korunuyor */
.legal-body {
  white-space: pre-wrap;
  font-size: 14.5px; line-height: 1.75; color: var(--mg-muted);
  background: var(--mg-surface); border: 1px solid var(--mg-line);
  border-radius: 14px; padding: 26px 28px;
}
.legal-body.loading { color: var(--mg-faint); }

@media (max-width: 800px) {
  .legal-heading h1 { font-size: 25px; }
  .legal-body { padding: 20px 18px; border-radius: 12px; }
}

/* ============================================================
   Şifre sıfırlama (/{culture}/forgot-password?key=…)
   ============================================================ */

/* Dil seçimi burada bağlantı (URL kültürü değişiyor), giriş sayfasında düğme */
.auth-toolbar .lang-switch a {
  padding: 6px 11px; border-radius: 6px; border: 0;
  font-size: 10px; font-weight: 800; letter-spacing: .4px;
  color: #9aa3ad; text-decoration: none;
}
.auth-toolbar .lang-switch a:hover:not(.active) { color: #fff; }
.auth-toolbar .lang-switch a.active { background: #e9003f; color: #fff; }
html[data-theme="light"] .auth-toolbar .lang-switch a { color: var(--mg-muted); }
html[data-theme="light"] .auth-toolbar .lang-switch a:hover:not(.active) { color: var(--mg-text); }
html[data-theme="light"] .auth-toolbar .lang-switch a.active { background: var(--mg-accent); color: #fff; }

/* Şifre kuralları — yazdıkça yeşile döner */
.pw-rules { list-style: none; display: grid; gap: 5px; margin: -4px 0 2px; padding: 0; }
.pw-rules li { font-size: 11px; color: #7f8791; display: flex; align-items: center; gap: 7px; }
.pw-rules li::before { content: "○"; font-size: 11px; }
.pw-rules li.ok { color: #4ade80; }
.pw-rules li.ok::before { content: "●"; }
.pw-rules li.bad { color: #ff8098; }

/* Başarı ekranındaki bağlantı auth-submit görünümünü koruyor */
a.auth-submit { display: block; text-align: center; text-decoration: none; }

/* Kenar çubuğu sabit yükseklikte (100vh - topbar). Menü + Paylaş + yasal bağlantılar
   kısa ekranlara sığmadığında öğeler ezilip kırpılıyordu: içerik kendi boyunu korusun,
   taşarsa çubuk kaysın. */
.social-sidebar { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.social-sidebar > * { flex: 0 0 auto; }

/* ============================================================
   ÜST BAR — SAĞ BLOK (simgeler + hesap)
   Simge grubu ve hesap çipi kenarlıklı birer kutudaydı. Aydınlık temada
   kutunun zemini (--mg-surface: #fff) üst barın zeminiyle neredeyse aynı
   olduğu için profil hiç ayırt edilmiyordu. Kutular kaldırıldı; ayrım ince
   bir dikey çizgiye, vurgu ise avatar ve isme taşındı.
   ============================================================ */
.top-icon-group {
  gap: 2px; padding: 0;
  border: 0; border-radius: 0; background: none;
}

.topbar-account-wrap {
  margin-left: 4px; padding-left: 12px;
  border-left: 1px solid var(--mg-line);
}
.topbar-account {
  gap: 10px; padding: 4px 10px 4px 4px;
  border: 0; border-radius: 999px; background: none;
}
/* .guest ayrı yazılıyor: event-shell-standard.css'te `.topbar-account.guest b`
   kuralı daha özgül ve 12.5px/700 dayatıyor. */
.topbar-account b,
.topbar-account.guest b { font-size: 13px; font-weight: 800; color: var(--mg-text); }
.topbar-account .guest-avatar { width: 36px; height: 36px; }
.topbar-account:hover { background: var(--mg-surface-2); }

/* Hover'lar iki temada da token'lardan gelmeli: event-shell-standard.css
   sabit koyu bir zemini `!important` ile dayatıyordu, aydınlık temada
   theme.css'in açık hover'ı ona yeniliyor ve beyaz ikon koyu kutuda kalıyordu. */
.app-tools .top-action:hover {
  background: var(--mg-surface-2) !important;
  color: var(--mg-text);
}

/* Arama kutusu: genel odak halkası (2px kırmızı, 2px dışarıda) input'un
   çevresinde, kutudan taşan ayrı bir çerçeve gibi duruyordu. Odak artık
   kutunun kendi kenarlığında — giriş formundaki desenin aynısı. */
.app-topbar .app-search input:focus,
.app-topbar .app-search input:focus-visible { outline: none; }
.app-topbar .app-search:focus-within {
  border-color: var(--mg-line-strong);
  box-shadow: 0 0 0 3px var(--mg-accent-soft);
  background: var(--mg-surface);
}

/* ============================================================
   29) ANA SAYFA (/) & KEŞFET (/kesfet) — GENEL TASARIM SÜZMESİ
   Amaç: iki ana sayfayı "itibarlı" bir ürün gibi göstermek.

   İlkeler
     • Tek tipografi ölçeği. Akışta gövde 15px, kart başlığı 14–15px,
       ikincil satır 12–12.5px. 11.5px'in altında metin bırakılmadı
       (eskiden 8–10.5px'lik onlarca satır vardı).
     • Tek kart reçetesi: var(--mg-surface) + 1px var(--mg-line) +
       15–16px yarıçap. Hover = kenarlık koyulaşır; her kartta ayrı bir
       yükselme/gölge/dönme yok.
     • Marka kırmızısı görünüm başına birkaç eylemde kalır (sol menü,
       "Paylaş", "Takip Et"). Etiket, rozet, sekme ve "tümünü gör"
       bağlantıları nötr; kırmızı orada anlam taşımıyordu.
     • Hareket yalnızca kullanıcı niyetinde. Sürekli çalışan Ken Burns,
       parıltı, süzülme ve dönen ışıma efektleri kaldırıldı.
     • Her renk token üzerinden: aynı kurallar koyu ve aydınlık temada.
   ============================================================ */

/* ------------------------------------------------------------
   29.1) ANA SAYFA — akış sütunu
   ------------------------------------------------------------ */

/* Hikâyeler artık sayfa zemininde duran serbest bir şerit değil, akışın
   ilk kartı: aynı yüzey, aynı kenarlık, aynı yarıçap. Aydınlık temada
   çıplak şerit sütunu yarım bırakılmış gibi gösteriyordu. */
.stories-block {
  margin-top: 16px;
  padding: 2px 16px 14px;
  border: 1px solid var(--mg-line);
  border-radius: 16px;
  background: var(--mg-surface);
}
.stories-head { padding: 14px 2px 0; }
.stories-head h3 { font-size: 16px; font-weight: 700; letter-spacing: -.2px; }
.stories-head button { font-size: 12.5px; font-weight: 700; color: var(--mg-muted); }
.stories-head button:hover { color: var(--mg-accent-ink); text-decoration: none; }
.stories { padding: 14px 2px 2px; gap: 18px; }
.stories-empty { padding: 0 10px; }

/* Sekmeler: aktif sekme metni kırmızıydı; sayfada zaten kırmızı sol menü,
   kırmızı "Paylaş" ve her gönderide kırmızı "Takip Et" var. Vurgu ikona ve
   alt çizgiye taşındı, etiket güçlü metin rengiyle okunuyor. */
.feed-tabs { height: 50px; margin: 18px 0; }
/* Eşit beşe bölünen sekmelerde "Takip Ettiklerim" 1280px'de iki satıra
   düşüyordu. Sekmeler artık içeriği kadar yer alıyor, artan boşluk
   aralarında paylaşılıyor. */
.feed-tabs button { flex: 1 1 auto; padding: 0 8px; white-space: nowrap; font-size: 13.5px; font-weight: 600; color: var(--mg-muted); }
.feed-tabs button:hover { color: var(--mg-text); }
.feed-tabs button.active,
html[data-theme="light"] .feed-tabs button.active { color: var(--mg-text); font-weight: 700; }
.feed-tabs button.active .mg-icon { color: var(--mg-accent-ink); }
.feed-tabs button.active:after { left: 12%; right: 12%; height: 3px; background: var(--mg-accent); }

/* Gönderi kartı: akışın gövdesi 13px'ti, sayaçlar 11px. */
.feed-column .post-card { padding: 18px 20px 12px; border-radius: 16px; margin-bottom: 16px; }
.feed-column .post-card .ub-names b { font-size: 15px; }
.feed-column .post-card .ub-names small { font-size: 12.5px; color: var(--mg-faint); }
.feed-column .post-copy { margin: 13px 0 14px; font-size: 15px; line-height: 1.6; }
.feed-column .post-media { border-radius: 14px; }
.feed-column .post-actions { margin-top: 14px; }
.feed-column .post-actions button span { font-size: 12.5px; font-weight: 700; }
.feed-column .post-like-count { font-size: 12.5px; }

/* Boş/hata durumu: app.css `.feed-status`a `color:#fff` veriyor; aydınlık
   temada theme.css `b` rengini `inherit`e çektiği için "Henüz gönderi yok"
   başlığı beyaz zeminde beyaz kalıyordu. */
.feed-status { min-height: 260px; gap: 10px; color: var(--mg-text); }
.feed-status b,
html[data-theme="light"] .feed-status b { font-size: 15.5px; font-weight: 700; color: var(--mg-text); }
.feed-status small { font-size: 13px; color: var(--mg-faint); }
.feed-status button {
  margin-top: 14px; padding: 11px 20px; border-radius: 10px;
  background: var(--mg-accent); color: #fff; font-size: 13px; font-weight: 700;
}
.feed-status button:hover { background: var(--mg-accent-ink); }
.feed-load-more { font-size: 12.5px; }

/* Yükleme çarkının halkası sabit koyu bir hex'ti (#2b313b): aydınlık temada
   beyaz zeminde koyu bir daire olarak duruyordu. Artık token üzerinden. */
.loading-wheel { border-color: var(--mg-line-strong); border-top-color: var(--mg-accent); }

/* ------------------------------------------------------------
   29.2) ANA SAYFA — sağ ray
   Ray akışla birlikte kayıp gidiyordu; Keşfet'teki gibi yapışkan.
   ------------------------------------------------------------ */
.social-rail {
  position: sticky; top: var(--mg-topbar-h); align-self: start;
  max-height: calc(100vh - var(--mg-topbar-h));
  overflow-y: auto; overscroll-behavior: contain;
  padding: 20px 18px 48px 24px;
}
.social-rail .rail-card { padding: 16px 18px; margin: 0 0 16px; }
.social-rail .rail-card:last-child { margin-bottom: 0; }
.social-rail .rail-title h3 { font-size: 15.5px; }
.social-rail .rail-title a { font-size: 12.5px; color: var(--mg-muted); }
.social-rail .rail-title a:hover { color: var(--mg-accent-ink); text-decoration: none; }

/* Trend kullanıcılar: 11px isim / 9.5px kullanıcı adı okunmuyordu. Dört
   sütunda 83px'lik hücrelerde isimlerin çoğu üç noktayla kesiliyordu;
   üç sütun hem okunur hem daha derli toplu. */
.trend-users-card { padding-bottom: 12px !important; }
.trend-user-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.trend-user { padding: 13px 6px 12px; }
.trend-user b { margin-top: 9px; font-size: 13px; }
.trend-user small { font-size: 12px; }
.trend-user-medal { width: 20px; height: 20px; font-size: 10.5px; }

/* Trend garajlar */
.trend-garage-grid { gap: 12px; margin-top: 12px; }
.trend-garage b { margin-top: 8px; font-size: 13px; }
.trend-garage small { font-size: 12px; }

/* Yakındaki hizmetler: harita ve liste iki ayrı karttı ve ikisi de aynı
   yere ("/shops") gidiyordu. Tek kart: üstte harita, altında öneriler. */
.svc-card .mg-map {
  height: 190px; margin: 12px 0 2px;
  border: 1px solid var(--mg-line); border-radius: 12px;
  background: var(--mg-surface-2);
}
.svc-card .mg-map + .svc-row { border-top: 0; margin-top: 8px; }
.svc-row { grid-template-columns: 56px minmax(0, 1fr) 32px; gap: 13px; padding: 12px 0 11px; }
.svc-thumb {
  width: 56px; height: 56px; border-radius: 13px;
  background: var(--mg-surface-2); color: var(--mg-text); font-size: 13px;
}
.svc-row b { font-size: 13.5px; }
.svc-row small { font-size: 12px; }
.svc-row em { font-size: 12px; }
.svc-go { width: 32px; height: 32px; }
.nearby-empty { padding: 16px 2px 6px; font-size: 12.5px; }

/* ------------------------------------------------------------
   29.3) KEŞFET — gürültüyü azalt
   Aynı anda çalışan beş döngü vardı: afişte Ken Burns yakınlaşması,
   afiş üzerinden geçen parıltı, panelin arkasında dönen konik ışıma,
   tarayıcı maketinin havada süzülmesi ve her bölümün kaydırmayla
   belirmesi. Hepsi kapatıldı.
   ------------------------------------------------------------ */
.xp-hero-bg { inset: 0; animation: none; }
.xp-hero::after { display: none; }
.xp-hero.is-active .xp-hero-copy > * { animation: none; }
.xp-biz-glow { display: none; }
.xp-biz-preview { perspective: none; }
.xp-browser, .xp-biz-preview:hover .xp-browser { transform: none; animation: none; }

/* Kaydırmayla belirme kaldırıldı. Görsel bir katman olmasının yanında
   emniyetsizdi: explore.js yüklenemezse `.in` sınıfı hiç eklenmiyor ve
   sayfanın yarısı kalıcı olarak opacity:0 kalıyordu. */
[data-reveal], [data-reveal].in { opacity: 1; transform: none; transition: none; }

/* ------------------------------------------------------------
   29.4) KEŞFET — bölüm başlıkları
   Yedi bölümün yedisinde de kırmızı, harfleri açılmış bir üst etiket
   vardı; sayfa bağırıyordu. Üst etiket nötrleşti, başlık öne çıktı.
   ------------------------------------------------------------ */
.xp-main { padding: 24px 28px 76px; gap: 36px; }
/* Orta sütundaki bölümler çerçeveli birer kutuydu ve içlerinde yine
   çerçeveli kartlar duruyordu (kart içinde kart). Bölümler artık sayfa
   zemininde: başlık + ızgara. Kart görünümü yalnızca sağ rayda kalıyor.
   Aydınlık tema ayrıca yazılıyor: theme.css `.xp-section`e beyaz zemin
   veriyor ve orada da kutu görünümü geri geliyordu. */
.xp-main > .xp-section,
html[data-theme="light"] .xp-main > .xp-section {
  border: 0; border-radius: 0; padding: 0; overflow: visible; background: transparent;
}
.xp-head { align-items: end; margin-bottom: 16px; }
.xp-head span { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; color: var(--mg-faint); }
.xp-head h2 { margin: 7px 0 0; font-size: 22px; }
.xp-more { font-size: 13px; font-weight: 700; color: var(--mg-muted); }
.xp-more:hover { color: var(--mg-accent-ink); text-decoration: none; }
.xp-more svg { transition: transform .2s ease; }
.xp-more:hover svg { transform: translateX(3px); }
.xp-loading { min-height: 380px; }

/* ------------------------------------------------------------
   29.5) KEŞFET — afiş karuseli
   ------------------------------------------------------------ */
.xp-hero-carousel { border-radius: 18px; background: var(--mg-surface-2); }
/* Afiş geçişinde her 6 saniyede bir siyah bir kare görünüyordu: giden afiş
   `visibility:hidden` ile ANINDA kayboluyor, gelen afiş 0'dan açılıyordu.
   Giden afişin görünürlüğü artık solma bitene kadar korunuyor — gerçek
   çapraz geçiş. */
.xp-hero { transition: opacity .5s ease, visibility 0s linear .5s; pointer-events: none; }
/* Geçiş sırasında iki afiş üst üste dururken tıklama daima görünür
   olana gitsin (afişler bağlantı olabiliyor). */
.xp-hero.is-active { transition: opacity .5s ease, visibility 0s linear 0s; pointer-events: auto; }
/* Noktalar sola değil ortaya: afişlerin tamamı metni görselde taşıyor,
   sol alt köşede metnin üstüne biniyorlardı. */
.xp-dots { left: 0; right: 0; bottom: 14px; justify-content: center; gap: 7px; }
.xp-dots i {
  width: 20px; height: 4px; border-radius: 4px;
  background: rgba(255, 255, 255, .45); box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.xp-dots i.active { width: 34px; background: #fff; }
.xp-arrow {
  width: 38px; height: 38px; font-size: 19px;
  background: rgba(9, 12, 16, .52); border-color: rgba(255, 255, 255, .26);
}
.xp-arrow:hover { background: var(--mg-accent); border-color: var(--mg-accent); }
.xp-hero-chip { font-size: 12px; padding: 9px 15px; }

/* ------------------------------------------------------------
   29.6) KEŞFET — trend araç kartları
   ------------------------------------------------------------ */
.xp-car-grid { gap: 16px; }
.xp-car { border-radius: 16px; }
.xp-car:hover {
  transform: none; border-color: var(--mg-line-strong);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .14);
}
/* Marka rozeti keskin beyaz bir kareydi, fotoğrafın üstünde yama gibi
   duruyordu: yuvarlak, buzlu ve daha hafif. */
.xp-car-brand {
  top: 10px; right: 10px; width: 36px; height: 36px; padding: 7px;
  border-radius: 50%; background: rgba(255, 255, 255, .93);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .26); backdrop-filter: blur(6px);
}
.xp-car-score {
  left: 10px; bottom: 10px; padding: 5px 10px; font-size: 12px;
  background: rgba(8, 10, 13, .6);
}
.xp-car-meta { padding: 13px 15px 15px; gap: 4px; }
.xp-car-meta b { font-size: 15px; }
.xp-car-meta small { font-size: 12.5px; }

/* ------------------------------------------------------------
   29.7) KEŞFET — trend kullanıcı kartları
   ------------------------------------------------------------ */
.xp-user-grid { grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 14px; }
.xp-user { border-radius: 16px; padding: 20px 12px 16px; gap: 6px; }
.xp-user:hover {
  transform: none; border-color: var(--mg-line-strong);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .12);
}
/* İlk üç kart koyu temada morumsu bir degradeyle ayrılıyordu; ayrım artık
   yalnızca madalya renginde. */
.xp-user.top { background: var(--mg-surface); }
.xp-user b { margin-top: 10px; font-size: 14px; }
.xp-user small { font-size: 12.5px; }
/* 4. sıradan sonrası sessiz; madalya yalnız ilk üçte.
   Aydınlık tema ayrıca yazılıyor: theme.css `.xp-rank`i "yükseltilmiş
   yüzey" listesine koyuyor ve o seçici (0,4,1) özgüllüğünde — hem nötr
   zemin hem de madalya renkleri eziliyordu. */
.xp-rank { top: 10px; left: 10px; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.xp-rank,
html[data-theme="light"] .xp-user .xp-rank:not(.gold):not(.silver):not(.bronze) {
  background: transparent; border-color: transparent; color: var(--mg-faint);
}
.xp-rank.gold,   html[data-theme="light"] .xp-user .xp-rank.gold   { background: #e0a106; color: #221a02; border-color: transparent; }
.xp-rank.silver, html[data-theme="light"] .xp-user .xp-rank.silver { background: #8b98a5; color: #161b21; border-color: transparent; }
.xp-rank.bronze, html[data-theme="light"] .xp-user .xp-rank.bronze { background: #c26a35; color: #241203; border-color: transparent; }
.xp-rank.gold, .xp-rank.silver, .xp-rank.bronze { padding: 3px 9px; }

/* ------------------------------------------------------------
   29.8) KEŞFET — "İşletmeni oluştur" paneli
   ------------------------------------------------------------ */
.xp-biz {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 36px; padding: 32px; border-radius: 18px;
}
.xp-biz::before { display: none; }               /* nokta deseni */
.xp-biz h2 em::after { display: none; }          /* sahte fosforlu çizgi */
.xp-biz-copy { gap: 16px; }
.xp-biz-kicker {
  padding: 7px 13px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: 1.4px;
  color: var(--mg-accent-ink); background: var(--mg-accent-soft);
  border-color: color-mix(in srgb, var(--mg-accent) 26%, transparent);
}
.xp-biz-feats { gap: 11px; }
.xp-biz-feats li,
html[data-theme="light"] .xp-biz-feats li { font-size: 14px; color: var(--mg-muted); }
/* Aydınlık temada `b` rengi theme.css'te `inherit`e çekildiği için
   vurgu tamamen kayboluyordu. */
.xp-biz-feats b,
html[data-theme="light"] .xp-biz-feats b { color: var(--mg-text); font-weight: 700; }
.xp-biz-feats svg { color: var(--mg-accent-ink); }
.xp-biz-primary {
  height: 44px; padding: 0 22px; border-radius: 11px;
  font-size: 14px; box-shadow: none;
}
.xp-biz-primary:hover { transform: none; box-shadow: none; background: var(--mg-accent-ink); }
.xp-biz-stores small { font-size: 12.5px; color: var(--mg-faint); }
.xp-biz-stores span { gap: 10px; }
/* Mağaza bağlantıları koyu tema hex'leriyle yazılmıştı: aydınlık temada
   beyaz zeminde açık gri metin, neredeyse görünmüyordu. */
.xp-biz-stores span a {
  padding: 9px 15px; border-radius: 10px; font-size: 12.5px; font-weight: 700;
  border: 1px solid var(--mg-line-strong); background: var(--mg-surface-2); color: var(--mg-text);
}
.xp-biz-stores span a:hover { border-color: var(--mg-accent); color: var(--mg-accent-ink); }

/* Tarayıcı maketi: eğim, süzülme ve ışıma gitti; çerçeve temaya uyuyor. */
.xp-browser {
  border-radius: 14px; border: 1px solid var(--mg-line);
  background: var(--mg-surface-2); box-shadow: 0 16px 36px rgba(0, 0, 0, .16);
}
.xp-browser-bar { padding: 10px 13px; background: var(--mg-surface-2); border-bottom-color: var(--mg-line); }
.xp-browser-bar b {
  padding: 6px 13px; border-radius: 8px; font-size: 12px;
  background: var(--mg-surface); border-color: var(--mg-line); color: var(--mg-muted);
}
/* Önizleme sabit `scale(.415)` ile ölçekleniyordu: 1366px'lik iframe
   ~567px'e düşüyor, oysa sütun ~340px. Sitenin sağ %40'ı kırpılıyordu.
   Artık iframe kabın 1/ölçek katı kadar büyütülüp aynı oranda küçültülüyor;
   hangi genişlikte olursa olsun kabı tam dolduruyor. */
.xp-browser-body {
  --s: .34;
  position: relative; height: auto; aspect-ratio: 4 / 3;
  background: var(--mg-surface);
}
.xp-browser-body iframe {
  position: absolute; top: 0; left: 0;
  width: calc(100% / var(--s)); height: calc(100% / var(--s));
  transform: scale(var(--s)); transform-origin: 0 0;
}
/* İpucu artık hover'a gizlenmiyor: kutunun tıklanabilir olduğu görünsün. */
.xp-browser-hint,
.xp-biz-preview:hover .xp-browser-hint {
  opacity: 1; padding: 30px 0 13px; font-size: 12.5px; color: #fff;
  background: linear-gradient(0deg, rgba(5, 7, 10, .92) 26%, transparent);
}

/* ------------------------------------------------------------
   29.9) KEŞFET — bloglar ve forum
   ------------------------------------------------------------ */
.xp-blog-lead, .xp-blog-lead > span { min-height: 280px; }
.xp-blog-lead small { font-size: 12.5px; }
.xp-blog-lead b { font-size: 22px; }
.xp-blog-lead p { font-size: 14px; }
.xp-blog-rest a { grid-template-columns: 84px minmax(0, 1fr); padding: 11px; border-radius: 14px; }
.xp-blog-rest img { width: 84px; height: 62px; }
.xp-blog-rest b { font-size: 14px; }
.xp-blog-rest small { font-size: 12.5px; }

/* Forum ızgarası hiç ölçeklenmemişti: 11px başlık, 8.5px meta, 8px etiket. */
.xp-forum-grid { grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: 14px; }
.xp-forum-grid a {
  gap: 12px; padding: 16px; border-radius: 15px;
  border: 1px solid var(--mg-line); background: var(--mg-surface);
  transition: border-color .16s ease;
}
.xp-forum-grid a:hover { transform: none; border-color: var(--mg-line-strong); }
.xp-forum-cat { padding: 5px 10px; border-radius: 8px; font-size: 11px; font-weight: 700; letter-spacing: .5px; }
.xp-forum-grid b { min-height: 41px; font-size: 14.5px; line-height: 1.42; }
.xp-forum-foot { gap: 9px; }
.xp-forum-foot small { font-size: 12.5px; color: var(--mg-faint); }
.xp-forum-foot em { font-size: 12.5px; color: var(--mg-muted); }

/* ------------------------------------------------------------
   29.10) KEŞFET — sağ ray
   ------------------------------------------------------------ */
.xp-rail { padding: 22px 22px 60px; gap: 18px; }
.xp-rail .xp-section { padding: 18px; border-radius: 16px; }
.xp-rail .xp-head { margin-bottom: 12px; }
.xp-rail .xp-head span { font-size: 10.5px; }
.xp-rail .xp-head h2 { font-size: 17px; }
/* Sayfa yüklenirken ray boş kalıyor; ayırıcı çizgisi ve boşluğu da gitsin. */
.xp-rail:not(:has(> *)) { display: none; }
.xp-event-meta small, .xp-event-meta em { font-size: 12px; }
.xp-club-meta small { font-size: 12px; }
.xp-route-list small { font-size: 12px; }

/* ------------------------------------------------------------
   29.11) Üst bar logosu — dar ekranda kırpılma
   `.brand` sabit genişlikte ve `overflow:hidden`; dar ekranda kutu esneyip
   95px'e düşerken görsel 100px kalıyor ve logo sağdan kesiliyordu
   ("MyGarage" → "MyGarag"). Görsel artık kutusunu takip ediyor.
   ------------------------------------------------------------ */
.app-logo .brand { max-width: 100%; }
.app-logo .brand-global-logo { width: 100%; height: 100%; }

/* ------------------------------------------------------------
   29.12) Dar ekranlar
   ------------------------------------------------------------ */
@media (max-width: 1159px) {
  .xp-main { padding: 20px 20px 64px; }
}
@media (max-width: 900px) {
  .xp-biz { grid-template-columns: 1fr; gap: 26px; padding: 24px; }
  .xp-browser-body { --s: .5; }
}
@media (max-width: 760px) {
  .stories-block { margin-top: 12px; padding: 2px 12px 12px; border-radius: 14px; }
  .feed-column .post-card { padding: 14px 14px 10px; }
  .feed-column .post-copy { font-size: 14.5px; }
  .xp-main { padding: 16px 14px 60px; gap: 26px; }
  .xp-head h2 { font-size: 19px; }
}

/* ============================================================
   30) AKIŞ KARTI — EYLEMLER, MENÜ, ANKET, ŞİKAYET
   ============================================================ */

/* ---------- 30.1 Gövde metni ----------
   Akış metni sayfanın en çok okunan yeri: tek aile (Source Sans 3),
   rahat satır aralığı, hafif optik hizalama. Uzun paylaşımlar 5 satırdan
   sonra kısalmıyor — akışta bütün metin görünür, karar okuyucunun. */
.feed-column .post-copy,
.post-detail-card .post-copy {
  font-family: var(--mg-font);
  font-size: 15px; font-weight: 400; line-height: 1.62;
  letter-spacing: .002em; color: var(--mg-text);
  white-space: pre-wrap; overflow-wrap: anywhere;
  text-wrap: pretty;
}
html[data-theme="light"] .feed-column .post-copy { color: #232a33; }

/* ---------- 30.2 Eylem satırı ----------
   İkon ile sayacı arasındaki boşluk 17px'ti; sayı komşu ikona ait gibi
   duruyordu. İkon+sayı artık tek bir çift; çiftler arası boşluk büyük,
   çift içi boşluk küçük. */
.post-actions > div { display: flex; align-items: center; gap: 14px; }
.post-action-pair { display: inline-flex; align-items: center; gap: 0; }
.post-actions .post-action {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px; border: 0; border-radius: 10px; cursor: pointer;
  background: transparent; color: var(--mg-muted);
  transition: background .14s ease, color .14s ease;
}
.post-actions .post-action.with-label { padding: 8px 11px; }
.post-actions .post-action span { font-size: 12.5px; font-weight: 700; }
.post-actions .post-action:hover { background: var(--mg-surface-2); color: var(--mg-text); }
.post-actions .post-count {
  border: 0; background: transparent; cursor: pointer;
  padding: 8px 8px 8px 2px; border-radius: 10px;
  color: var(--mg-muted); font-size: 12.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: background .14s ease, color .14s ease;
}
.post-actions .post-count:hover { background: var(--mg-surface-2); color: var(--mg-text); }

/* Beğenilmiş / kaydedilmiş: ikon dolu, renk taşıyor. */
.post-actions .post-action.liked,
html[data-theme="light"] .post-actions .post-action.liked { color: #e11d48; }
.post-actions .post-action.liked:hover { background: rgba(225, 29, 72, .1); }
.post-actions .post-action.saved,
html[data-theme="light"] .post-actions .post-action.saved { color: var(--mg-accent-ink); }
.post-actions .post-action.saved:hover { background: var(--mg-accent-soft); }
/* Dolu ikonlarda ince kontur gövdeyi şişiriyordu. */
.mg-icon.is-filled { stroke-width: 1.2; }

/* Çift tıklama kalbi görselin üstünde. */
.post-media .media-art { position: relative; }
.double-like-heart {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-items: center; pointer-events: none;
  color: #fff; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .45));
  animation: mgPop .75s cubic-bezier(.2, .9, .3, 1) both;
}
@keyframes mgPop {
  0% { opacity: 0; transform: scale(.5); }
  22% { opacity: 1; transform: scale(1.08); }
  60% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.04); }
}

/* ---------- 30.3 Takip düğmesi ----------
   Dolgulu kırmızı yalnız "Takip et"te. Takipteyken nötr çerçeve, üzerine
   gelince eylemi söyler ("Takibi bırak") ve kırmızıya döner. */
.follow-button, .post-card header .follow-button, .follow-button.large {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 14px; cursor: pointer;
  border: 1px solid var(--mg-accent); border-radius: 999px;
  background: var(--mg-accent); color: #fff;
  font-family: var(--mg-font);
  font-size: 13px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.follow-button.large { height: 40px; padding: 0 20px; font-size: 14px; }
.follow-button .mg-icon { flex: none; }
.follow-button .fb-off { display: none; }
.follow-button:hover:not(:disabled) { background: var(--mg-accent-ink); border-color: var(--mg-accent-ink); }

.follow-button.following, .post-card header .follow-button.following,
.follow-button.pending, .post-card header .follow-button.pending,
html[data-theme="light"] .follow-button.following,
html[data-theme="light"] .follow-button.pending {
  background: transparent; color: var(--mg-muted); border-color: var(--mg-line-strong);
}
.follow-button.following:hover:not(:disabled),
.follow-button.pending:hover:not(:disabled),
html[data-theme="light"] .follow-button.following:hover:not(:disabled),
html[data-theme="light"] .follow-button.pending:hover:not(:disabled) {
  background: var(--mg-accent-soft); color: var(--mg-accent-ink); border-color: var(--mg-accent);
}
.follow-button.following:hover .fb-on, .follow-button.pending:hover .fb-on { display: none; }
.follow-button.following:hover .fb-off, .follow-button.pending:hover .fb-off { display: inline; }
.follow-button.following:hover .mg-icon, .follow-button.pending:hover .mg-icon { display: none; }
.follow-button:disabled { opacity: .65; cursor: default; }
.follow-spin {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: spin .7s linear infinite;
}

/* ---------- 30.4 Üç nokta menüsü ---------- */
.post-menu-wrap { position: relative; display: inline-flex; }
.post-more.is-open { background: var(--mg-surface-2); color: var(--mg-text); }
.post-menu-backdrop { position: fixed; inset: 0; z-index: 60; }
.post-menu {
  position: absolute; z-index: 61; top: calc(100% + 6px); right: 0;
  min-width: 208px; padding: 6px;
  border: 1px solid var(--mg-line); border-radius: 14px;
  background: var(--mg-surface); box-shadow: 0 18px 44px rgba(4, 7, 11, .3);
  display: grid; gap: 2px;
  animation: mgMenuIn .13s ease;
}
@keyframes mgMenuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.post-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 11px; border: 0; border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--mg-text);
  font-size: 13.5px; font-weight: 600; text-align: left;
  transition: background .12s ease;
}
.post-menu-item:hover { background: var(--mg-surface-2); }
.post-menu-item .mg-icon { color: var(--mg-faint); flex: none; }
.post-menu-item.danger, .post-menu-item.danger .mg-icon { color: var(--mg-accent-ink); }
.post-menu-item.danger:hover { background: var(--mg-accent-soft); }
.post-menu-sep { height: 1px; margin: 4px 6px; background: var(--mg-line); }

/* ---------- 30.5 Şikayet penceresi ---------- */
.mg-modal.post-report { width: min(460px, 100%); display: grid; }
.post-report header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 20px 14px; border-bottom: 1px solid var(--mg-line);
}
.post-report header h3 { margin: 0; font-size: 17px; font-weight: 700; }
.post-report header button {
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 0; border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--mg-faint);
}
.post-report header button:hover { background: var(--mg-surface-2); color: var(--mg-text); }
.report-body { padding: 16px 20px 6px; }
.report-body p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; color: var(--mg-muted); }
.report-reasons { display: flex; flex-wrap: wrap; gap: 8px; }
.report-reasons button {
  padding: 9px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--mg-line-strong); background: var(--mg-surface-2);
  color: var(--mg-text); font-size: 13px; font-weight: 600;
  transition: border-color .14s ease, background .14s ease, color .14s ease;
}
.report-reasons button:hover { border-color: var(--mg-line-strong); background: var(--mg-surface); }
.report-reasons button.on {
  border-color: var(--mg-accent); background: var(--mg-accent-soft); color: var(--mg-accent-ink);
}
.report-note { margin-top: 14px; padding: 11px 13px; border-radius: 10px; font-size: 13px; line-height: 1.5; }
.report-note.ok { background: rgba(22, 163, 74, .12); color: #16a34a; }
.report-note.err { background: var(--mg-accent-soft); color: var(--mg-accent-ink); }
.post-report footer {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 16px 20px 18px; border: 0;
}
.post-report footer button { height: 40px; padding: 0 18px; border-radius: 10px; cursor: pointer; font-size: 13.5px; font-weight: 700; }
.report-cancel { border: 1px solid var(--mg-line-strong); background: transparent; color: var(--mg-muted); }
.report-cancel:hover { color: var(--mg-text); }
.report-send { border: 0; background: var(--mg-accent); color: #fff; }
.report-send:hover:not(:disabled) { background: var(--mg-accent-ink); }
.report-send:disabled { opacity: .5; cursor: default; }

/* ---------- 30.6 Anket ----------
   Oy vermeden önce: şıklar birer düğme. Sonra: aynı kutular, içi doldurulmuş
   bir çubuk. Yükseklik değişmiyor, sonuç yerinde açılıyor. */
.post-poll { display: grid; gap: 8px; margin: 4px 0 14px; }
.poll-option {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px; width: 100%;
  border: 1px solid var(--mg-line-strong); border-radius: 12px;
  background: var(--mg-surface-2); color: var(--mg-text);
  font-family: var(--mg-font); font-size: 14px; font-weight: 600; text-align: left;
  cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.poll-option:hover:not(.is-result):not(:disabled) { border-color: var(--mg-accent); background: var(--mg-accent-soft); }
.poll-option:disabled { cursor: default; opacity: .7; }
.poll-option.is-result { cursor: default; padding: 0 14px; }
.poll-fill {
  position: absolute; inset: 0 auto 0 0; z-index: 0;
  width: var(--share, 0%); border-radius: 11px 0 0 11px;
  background: var(--mg-line); transition: width .5s cubic-bezier(.22, .7, .3, 1);
}
.poll-option.mine .poll-fill { background: var(--mg-accent-soft); }
.poll-option.mine { border-color: var(--mg-accent); }
.poll-option.is-result b,
.poll-option.is-result em { position: relative; z-index: 1; }
.poll-option.is-result b { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.poll-option.mine b .mg-icon { color: var(--mg-accent-ink); }
.poll-option.is-result em {
  margin-left: auto; font-style: normal; font-weight: 800;
  font-variant-numeric: tabular-nums; color: var(--mg-muted);
}
.poll-option.mine em { color: var(--mg-accent-ink); }
.poll-foot { font-size: 12.5px; color: var(--mg-faint); }
.poll-error { font-size: 12.5px; color: var(--mg-accent-ink); }

/* ---------- 30.7 Kimlik işaretleri ---------- */
.ub-names b .mg-icon,
.side-user-card b .mg-icon,
.topbar-account b .mg-icon,
.account-menu-head b .mg-icon,
.trend-user b .mg-icon,
.svc-row b .mg-icon { color: var(--mg-accent); flex: none; vertical-align: -2px; }
.side-user-card b, .topbar-account b, .account-menu-head b {
  display: inline-flex; align-items: center; gap: 4px; min-width: 0;
}
.side-user-card b { overflow: hidden; }

/* Kabuktaki avatarın segment halkası: 40px'te 3px'lik halka görselden çok
   yer kapıyordu, 2px daha zarif. */
.side-user-card .user-avatar:not(.has-story),
.topbar-account .user-avatar:not(.has-story) { padding: 2px; }
.side-user-card .user-avatar:not(.has-story) > span,
.topbar-account .user-avatar:not(.has-story) > span { inset: 2px; }

/* ============================================================
   31) MOBİL UYGULAMA ŞERİDİ ("MyGarage'ı indir")
   Geniş ekranda sayfanın sol kenarında sabit bir sırt; gövdeye eşit
   genişlikte iç boşluk verildiği için içeriğin üstüne binmiyor, kendi
   kolonunda duruyor. Dar ekranda sırt gizlenir, alt şerit devreye girer.
   ============================================================ */
:root { --mg-spine-w: 58px; }

.mg-app-spine { display: none; }
.mg-app-bar { display: none; }

@media (min-width: 1200px) {
  body { padding-left: var(--mg-spine-w); }
  .mg-app-spine {
    position: fixed; z-index: 40; left: 0; top: 0; bottom: 0;
    width: var(--mg-spine-w);
    display: flex; flex-direction: column; align-items: center;
    padding: 16px 0 18px; gap: 14px;
    background: var(--mg-surface); border-right: 1px solid var(--mg-line);
  }
  .mg-spine-mark { width: 26px; height: 26px; flex: none; opacity: .95; }
  .mg-spine-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }

  /* Künyenin iki ucunda kısa marka çizgileri; boşluğu esneyen ayraçlar
     alıyor, böylece yazı şeridin tam ortasında kalıyor. */
  .mg-spine-gap { flex: 1 1 auto; }
  .mg-spine-rule {
    width: 2px; height: 30px; flex: none; border-radius: 2px;
    background: linear-gradient(180deg, transparent, var(--mg-accent));
  }
  .mg-spine-rule:last-of-type { background: linear-gradient(180deg, var(--mg-accent), transparent); }

  /* Aşağıdan yukarı okunan künye — sırt yazısı. */
  .mg-spine-word {
    flex: none;
    writing-mode: vertical-rl; transform: rotate(180deg);
    font-size: 12px; font-weight: 800; letter-spacing: .34em;
    color: var(--mg-muted); white-space: nowrap;
    transition: color .18s ease;
  }
  .mg-app-spine:hover .mg-spine-word { color: var(--mg-text); }

  .mg-spine-stores { flex: none; display: grid; gap: 7px; }
  .mg-spine-stores a {
    width: 34px; height: 34px; display: grid; place-items: center;
    border: 1px solid var(--mg-line); border-radius: 10px;
    background: var(--mg-surface-2); color: var(--mg-muted);
    transition: border-color .16s ease, color .16s ease, background .16s ease;
  }
  .mg-spine-stores a:hover {
    border-color: var(--mg-accent); color: var(--mg-accent-ink); background: var(--mg-accent-soft);
  }

  /* Sabit konumlu kabuk parçaları da şeridin sağından başlasın. */
  .floating-dock { margin-left: calc(var(--mg-spine-w) / 2); }
}

/* Ekran daraldıkça sırt yerine tek satırlık alt şerit. Bir kez kapatılınca
   bir daha gösterilmiyor (app-promo.js, localStorage). */
@media (max-width: 1199px) {
  .mg-app-bar {
    position: fixed; z-index: 45; left: 12px; right: 12px; bottom: 12px;
    display: flex; align-items: center; gap: 12px;
    padding: 11px 12px;
    border: 1px solid var(--mg-line); border-radius: 16px;
    background: var(--mg-surface); box-shadow: 0 14px 40px rgba(4, 7, 11, .28);
    opacity: 0; transform: translateY(14px);
    transition: opacity .28s ease, transform .28s cubic-bezier(.22, .7, .3, 1);
  }
  .mg-app-bar.is-in { opacity: 1; transform: none; }
  .mg-app-bar[hidden] { display: none; }
  .mg-app-bar-icon { width: 42px; height: 42px; border-radius: 11px; object-fit: cover; flex: none; }
  .mg-app-bar-copy { display: grid; gap: 2px; min-width: 0; flex: 1; }
  .mg-app-bar-copy b { font-size: 13.5px; font-weight: 700; }
  .mg-app-bar-copy small {
    font-size: 12px; color: var(--mg-faint);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .mg-app-bar-cta {
    flex: none; height: 36px; padding: 0 15px; border-radius: 10px;
    display: inline-flex; align-items: center;
    background: var(--mg-accent); color: #fff; font-size: 13px; font-weight: 700;
  }
  .mg-app-bar-close {
    flex: none; width: 30px; height: 30px; display: grid; place-items: center;
    border: 0; border-radius: 8px; cursor: pointer;
    background: transparent; color: var(--mg-faint);
  }
  .mg-app-bar-close:hover { background: var(--mg-surface-2); color: var(--mg-text); }
  /* Alt rıhtım varken şerit onun üstüne otursun. */
  body:has(.floating-dock) .mg-app-bar { bottom: 76px; }
}

@media (max-width: 420px) {
  .mg-app-bar-copy small { display: none; }
}

/* ============================================================
   32) DÜZELTMELER — sağ ray, bildirimler, forum kimliği
   ============================================================ */

/* ---------- 32.1 Sağ ray: kendi içinde kaymasın ----------
   Ray yapışkan kalıyor ama artık kendi kaydırma çubuğu yok; sayfa
   kaydıkça yerinde duruyor. */
.social-rail, .xp-rail {
  max-height: none; overflow: visible;
  scrollbar-width: auto;
}
.social-rail, .xp-rail, .forum-right {
  position: sticky; top: var(--mg-topbar-h); align-self: start;
}

/* ---------- 32.2 Bildirimler: sol menü hizası ----------
   Kabuk 72px'e göre kurulmuştu, üst bar 64px: menü 8px aşağıdan
   başlıyordu. Diğer sayfalarla aynı yapışkan kolon. */
.notifications-layout { padding-top: 0; }
.notifications-layout .social-sidebar {
  position: sticky; top: var(--mg-topbar-h);
  height: calc(100vh - var(--mg-topbar-h));
  border-right: 1px solid var(--mg-line);
}
.notifications-main { padding: 28px 30px 70px; }

/* ---------- 32.3 Forum: ad ile kullanıcı adı arası ----------
   `.entry-card header small` hem grid boşluğu hem 4px üst boşluk
   alıyordu; iki satır kopuk duruyordu. */
.entry-card header .ub-names { gap: 0; }
.entry-card header .ub-names b { font-size: 14px; font-weight: 700; line-height: 1.3; }
.entry-card header .ub-names small { margin-top: 1px; font-size: 12px; line-height: 1.35; color: var(--mg-faint); }
.topic-info > b { line-height: 1.3; }
.topic-info small { margin-top: 3px; }
.user-identity-text { gap: 0; }
.user-identity-text b { line-height: 1.3; }
.user-identity-text small { margin-top: 1px; font-size: 12px; line-height: 1.35; color: var(--mg-faint); }
.last-reply div { display: grid; gap: 1px; }
.last-reply small { line-height: 1.35; }

/* ---------- 32.4 Bloglar: daha eski yazılar ---------- */
.blogs-more { max-width: 320px; margin: 26px auto 0; }
.forum-inline-error { margin-top: 12px; font-size: 13px; color: var(--mg-accent-ink); text-align: center; }

/* ============================================================
   33) İŞLETME SİTESİ (/shop/{id}) — tek sayfalık mikro site
   Bu sayfa MyGarage'ın bir ekranı değil, işletmenin KENDİ sitesi.
   İtibarı taşıyan üç şey var: net bir künye, kanıt (puan/yorum/doğrulama)
   ve tek bir belirgin eylem. Sayfa boyunca tek vurgu rengi kullanılıyor:
   işletmenin kendi rengi (--bz). MyGarage kırmızısı yalnız üst şeritte.
   ============================================================ */

/* ---------- 33.1 Üst şerit ve künye ---------- */
.bz-topstrip a { font-size: 12.5px; font-weight: 600; letter-spacing: 0; }
.bz-topstrip > .bz-container > span { font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--mg-muted); }

/* ---------- 33.2 Kapak ----------
   İstatistik şeridi `translateY(46px)` ile kapağın dışına taşıyordu ve
   `overflow:hidden` onu ortadan kesiyordu; sayılar yarım görünüyordu.
   Şerit artık kapağın içinde, akışta. */
.bz-hero { min-height: 0; padding-bottom: 30px; }
.bz-hero-inner { padding-top: 74px; padding-bottom: 34px; }
.bz-stats { transform: none; margin-top: 0; }

/* Kapak fotoğrafı olmayan işletmede sayfa bomboş bir bant oluyordu.
   İşletmenin kendi logosu, bulanıklaştırılmış bir zemin olarak kullanılıyor:
   her işletmede var ve sayfaya o işletmenin kimliğini veriyor. */
.bz-hero.no-photo { min-height: 0; }
.bz-hero-logo-wash {
  position: absolute; inset: -10%;
  background-position: 78% 34%; background-repeat: no-repeat; background-size: 46% auto;
  filter: blur(58px) saturate(1.3); opacity: .45; pointer-events: none;
}
html[data-theme="light"] .bz-hero-logo-wash { opacity: .5; }

.bz-hero-copy { gap: 14px; max-width: 760px; }
.bz-hero h1 { line-height: 1.04; }
.bz-hero-actions { gap: 10px; margin-top: 10px; }
.bz-hero.no-photo .bz-hero-inner { padding-top: 62px; padding-bottom: 30px; }

/* Kapak üstündeki yazı her temada beyaz; kapak yüzeyi koyu kalıyor. */
.bz-hero.no-photo {
  background:
    radial-gradient(900px 460px at 78% -10%, color-mix(in srgb, var(--bz, #e9003f) 34%, transparent), transparent 60%),
    linear-gradient(168deg, #12151c, #07080b 62%);
}

/* İstatistik kartları: 9.5px büyük harf etiketler okunmuyordu. */
.bz-stat { padding: 17px 18px 16px; }
.bz-stat::before { width: 3px; background: var(--bz, #e9003f); opacity: 1; }
.bz-stat b { font-size: 25px; letter-spacing: -.6px; line-height: 1.1; }
.bz-stat small {
  margin-top: 4px; font-size: 12.5px; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--mg-faint);
}

/* ---------- 33.3 Bölüm ritmi ---------- */
.bz-section { padding: 68px 0; }
.bz-section.bz-alt,
html[data-theme="light"] .bz-section.bz-alt { background: var(--mg-surface-2); }
.bz-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 26px; }
.bz-kicker { font-size: 11.5px; font-weight: 800; letter-spacing: 1.6px; color: var(--bz, #e9003f); }
.bz-kicker::before { width: 22px; height: 2px; background: var(--bz, #e9003f); }
.bz-title > div > p, .bz-title > p { margin: 0; font-size: 13.5px; color: var(--mg-muted); }
.bz-title > div > p b, .bz-title > p b { color: var(--mg-text); }
.bz-empty {
  display: flex; align-items: center; gap: 11px;
  padding: 18px 20px; border-radius: 14px;
  border: 1px solid var(--mg-line); background: var(--mg-surface);
  font-size: 14px; line-height: 1.55; color: var(--mg-muted);
}
.bz-empty .mg-icon { color: var(--bz, #e9003f); flex: none; }

/* ---------- 33.4 Hizmet ve kampanya kartları ---------- */
.bz-service, .bz-campaign {
  border: 1px solid var(--mg-line); border-radius: 16px; overflow: hidden;
  background: var(--mg-surface);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.bz-service:hover, .bz-campaign:hover {
  border-color: color-mix(in srgb, var(--bz, #e9003f) 55%, var(--mg-line));
  box-shadow: 0 12px 30px rgba(0, 0, 0, .14);
}
.bz-service-media { position: relative; aspect-ratio: 16 / 10; background: var(--mg-surface-2); }
.bz-service-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bz-service-media > span { position: absolute; inset: 0; display: grid; place-items: center; color: var(--mg-faint); }
.bz-price-tag {
  position: absolute; left: 12px; bottom: 12px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--bz, #e9003f); color: #fff;
  font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.bz-service-body { padding: 15px 17px 17px; display: grid; gap: 6px; }
.bz-service-body small { font-size: 12px; font-weight: 700; letter-spacing: .3px; color: var(--bz, #e9003f); text-transform: uppercase; }
.bz-service-body h3 { margin: 0; font-size: 16.5px; font-weight: 700; letter-spacing: -.2px; color: var(--mg-text); }
.bz-service-body p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--mg-muted); }
.bz-service-body footer { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.bz-service-body footer s { font-size: 13px; color: var(--mg-faint); }
.bz-service-body footer em {
  font-style: normal; font-size: 12px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
  background: var(--mg-surface-2); color: var(--mg-muted);
}

/* ---------- 33.5 Yorumlar ---------- */
.bz-title-score { display: grid; gap: 4px; justify-items: end; }
.bz-star-row { font-size: 19px; color: #f0a500; letter-spacing: 2px; }
.bz-title-score p { margin: 0; font-size: 13px; color: var(--mg-muted); }
.bz-title-score p b { color: var(--mg-text); }
.bz-rate-strip {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 18px 20px; border-radius: 16px;
  border: 1px solid var(--mg-line); background: var(--mg-surface);
}
.bz-rate-copy b { display: block; font-size: 15px; font-weight: 700; color: var(--mg-text); }
.bz-rate-copy small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--mg-faint); }
.bz-rate-stars { margin-left: auto; display: flex; gap: 2px; }
.bz-rate-stars button {
  width: 34px; height: 34px; border: 0; border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--mg-line-strong); font-size: 23px; line-height: 1;
  transition: color .12s ease, background .12s ease;
}
.bz-rate-stars button:hover:not(:disabled) { background: var(--mg-surface-2); }
.bz-rate-stars button.full { color: #f0a500; }
.bz-rate-stars button:disabled { cursor: default; }
.bz-rate-done { font-size: 12.5px; font-weight: 700; color: #22a55b; }
.bz-review-login, .bz-review-form { padding: 16px 20px; border-radius: 14px; font-size: 13.5px; }
.bz-review-login a { color: var(--bz, #e9003f); font-weight: 700; }
.bz-review-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-top: 16px; }
.bz-review { padding: 18px 20px; }
.bz-quote { font-size: 13px; color: var(--mg-faint); }
.bz-reply {
  margin-top: 12px; padding: 12px 14px; border-radius: 12px;
  border-left: 3px solid var(--bz, #e9003f); background: var(--mg-surface-2);
  font-size: 13.5px; line-height: 1.55; color: var(--mg-muted);
}

/* ---------- 33.6 Konum, iletişim, kapanış ---------- */
.bz-location-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.bz-map { min-height: 340px; }
.bz-contact {
  display: grid; align-content: start; gap: 14px;
  padding: 22px 24px; border-radius: 16px;
  border: 1px solid var(--mg-line); background: var(--mg-surface);
}
.bz-contact-row { display: flex; align-items: flex-start; gap: 11px; font-size: 14px; line-height: 1.5; color: var(--mg-text); }
.bz-contact-row .mg-icon { color: var(--bz, #e9003f); flex: none; margin-top: 2px; }
.bz-hours { display: grid; gap: 6px; font-size: 13.5px; color: var(--mg-muted); }
.bz-hours span { display: flex; justify-content: space-between; gap: 14px; }

.bz-cta { border-radius: 20px; padding: 40px 44px; }
.bz-cta-kicker { font-size: 12px; font-weight: 800; letter-spacing: 1.6px; }
.bz-cta h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 800; letter-spacing: -.7px; color: #fff; }
.bz-button.big { height: 50px; padding: 0 26px; font-size: 15px; border-radius: 12px; }
.bz-button {
  display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 18px; border-radius: 11px;
  font-size: 14px; font-weight: 700; box-shadow: none;
}
.bz-button.lg { height: 46px; padding: 0 22px; font-size: 14.5px; }
.bz-button:hover { filter: brightness(1.06); }

.bz-footer { padding: 40px 0 0; }
.bz-footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 26px; padding-bottom: 34px; }
.bz-footer-col { display: grid; gap: 8px; align-content: start; }

@media (max-width: 900px) {
  .bz-location-grid { grid-template-columns: 1fr; }
  .bz-footer-grid { grid-template-columns: 1fr; }
  .bz-section { padding: 48px 0; }
  .bz-cta { padding: 28px 24px; }
  .bz-rate-stars { margin-left: 0; }
}

/* ============================================================
   34) ÜST BAR YÜKSEKLİĞİ — yapışkan kolonların hizası
   `--mg-topbar-h` 64px'ti; oysa header-fix.css masaüstünde
   `height:80px!important` dayatıyor, 64px yalnızca ≤760px'te geçerli.
   Fark 16px: yapışkan sol menü ve sağ raylar sayfa kayınca üst barın
   ALTINA giriyordu. Değişken artık gerçek yüksekliği taşıyor.
   ============================================================ */
:root { --mg-topbar-h: 80px; }
@media (max-width: 760px) { :root { --mg-topbar-h: 64px; } }

/* ============================================================
   35) AKIŞ BAŞLIĞI — dar ekranda taşma
   Uzun isimlerde doğrulama rozeti alt satıra düşüyor, isim iki satır
   oluyordu. Ad satırı artık tek satır; yer açmak için dar ekranda
   "Takip et" yalnız ikonla gösteriliyor.
   ============================================================ */
.user-badge .ub-names { min-width: 0; }
.user-badge .ub-names b { flex-wrap: nowrap; min-width: 0; overflow: hidden; white-space: nowrap; }
.user-badge .ub-names b .mg-icon, .user-badge .ub-names b .ub-official { flex: none; }

/* Dar ekranda düğme biraz daralır ama etiketi kalır: yalnız "+" ikonu
   ne yapacağını söylemiyor. Uzun isim gerekirse kırpılır. */
@media (max-width: 560px) {
  .post-card header .follow-button { height: 32px; padding: 0 12px; gap: 5px; font-size: 12.5px; }
  .post-card header .follow-button .mg-icon { width: 13px; height: 13px; }
  .post-card header .post-more { width: 30px; height: 30px; }
}

/* ============================================================
   36) TAKİP DÜĞMESİ — iki temada da aynı kontrast
   social.css `.follow-button`a çerçeveli/şeffaf bir stil veriyor ve
   `.post-card header .follow-button` ile aynı özgüllükte tekrar ediyor.
   Aydınlık temada şeffaf zeminde koyu kırmızı yazı okunmuyordu. Kural
   artık her iki tema için de açıkça yazılıyor.
   ============================================================ */
.follow-button,
.post-card header .follow-button,
.profile-actions .follow-button,
.member-side .follow-button,
html[data-theme="light"] .follow-button,
html[data-theme="light"] .post-card header .follow-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 15px; cursor: pointer;
  border: 1px solid var(--mg-accent); border-radius: 999px;
  background: var(--mg-accent); color: #fff;
  font-family: var(--mg-font); font-size: 13px; font-weight: 700;
  letter-spacing: -.01em; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.follow-button.large,
html[data-theme="light"] .follow-button.large { height: 40px; padding: 0 22px; font-size: 14px; }

.follow-button:hover:not(:disabled),
.post-card header .follow-button:hover:not(:disabled),
html[data-theme="light"] .follow-button:hover:not(:disabled),
html[data-theme="light"] .post-card header .follow-button:hover:not(:disabled) {
  background: var(--mg-accent-ink); border-color: var(--mg-accent-ink); color: #fff;
}

/* Takipteyken / istek beklerken ikincil: nötr çerçeve, okunur metin. */
.follow-button.following, .follow-button.pending,
.post-card header .follow-button.following, .post-card header .follow-button.pending,
.follow-button.large.following, .follow-button.large.pending,
html[data-theme="light"] .follow-button.following,
html[data-theme="light"] .follow-button.pending,
html[data-theme="light"] .follow-button.large.following,
html[data-theme="light"] .post-card header .follow-button.following,
html[data-theme="light"] .post-card header .follow-button.pending {
  background: var(--mg-surface-2); color: var(--mg-text); border-color: var(--mg-line-strong);
}
.follow-button.following:hover:not(:disabled), .follow-button.pending:hover:not(:disabled),
html[data-theme="light"] .follow-button.following:hover:not(:disabled),
html[data-theme="light"] .follow-button.pending:hover:not(:disabled) {
  background: var(--mg-accent-soft); color: var(--mg-accent-ink); border-color: var(--mg-accent);
}

/* ============================================================
   37) TAM EKRAN GÖRSEL (garaj galerisi · forum ekleri)
   ============================================================ */
.mg-lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: 40px 60px;
  background: rgba(4, 6, 9, .93); backdrop-filter: blur(6px);
  animation: mgFadeIn .16s ease; outline: none;
}
.mg-lb-figure { margin: 0; display: grid; gap: 12px; justify-items: center; max-width: 100%; max-height: 100%; }
.mg-lb-figure img {
  max-width: min(1180px, 100%); max-height: calc(100vh - 132px);
  border-radius: 12px; object-fit: contain; display: block;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}
.mg-lb-figure figcaption {
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; color: rgba(255, 255, 255, .78);
}
.mg-lb-figure figcaption span { font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .55); }
.mg-lb-close, .mg-lb-nav {
  position: absolute; z-index: 2; display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px;
  background: rgba(12, 16, 21, .7); color: #fff;
  transition: background .15s ease, border-color .15s ease;
}
.mg-lb-close { top: 18px; right: 20px; width: 42px; height: 42px; }
.mg-lb-nav { top: 50%; transform: translateY(-50%); width: 46px; height: 46px; }
.mg-lb-nav.prev { left: 18px; }
.mg-lb-nav.next { right: 18px; }
.mg-lb-close:hover, .mg-lb-nav:hover { background: var(--mg-accent); border-color: var(--mg-accent); }
@media (max-width: 760px) {
  .mg-lightbox { padding: 16px; }
  .mg-lb-nav { width: 38px; height: 38px; }
  .mg-lb-nav.prev { left: 6px; } .mg-lb-nav.next { right: 6px; }
}

/* Büyütme tetikleyicileri */
.vd-main img.vd-zoomable { cursor: zoom-in; }
.vd-zoom-btn {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 10px;
  height: 34px; padding: 0 14px; cursor: pointer;
  border: 1px solid var(--mg-line-strong); border-radius: 10px;
  background: var(--mg-surface); color: var(--mg-muted);
  font-size: 13px; font-weight: 600;
}
.vd-zoom-btn:hover { color: var(--mg-text); border-color: var(--mg-accent); }
.media-grid .media-open {
  padding: 0; border: 1px solid var(--mg-line); border-radius: 12px;
  overflow: hidden; cursor: zoom-in; background: var(--mg-surface-2);
  transition: border-color .15s ease, transform .15s ease;
}
.media-grid .media-open:hover { border-color: var(--mg-accent); transform: translateY(-2px); }
.media-grid .media-open img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   38) ROTA DETAYI — aydınlık temada okunur
   Kabuk sabit koyu hex'lerle çizilmişti; başlık paneli aydınlık temada
   siyah bir blok olarak kalıyordu.
   ============================================================ */
.route-hero-panel,
html[data-theme="light"] .route-hero-panel {
  border: 1px solid var(--mg-line); border-radius: 18px; padding: 26px 28px;
  background:
    radial-gradient(700px 320px at 92% 12%, color-mix(in srgb, var(--mg-accent) 12%, transparent), transparent 60%),
    var(--mg-surface);
  color: var(--mg-text);
}
.route-hero-copy h1 { font-size: 30px; font-weight: 800; letter-spacing: -.7px; color: var(--mg-text); }
.route-hero-copy > p { font-size: 14px; line-height: 1.65; color: var(--mg-muted); }
.route-kicker, .route-section-title span { font-size: 11.5px; font-weight: 800; letter-spacing: 1.5px; color: var(--mg-accent-ink); }
.route-section-title h2 { font-size: 20px; font-weight: 700; letter-spacing: -.3px; }
.route-section-title > b { font-size: 13px; color: var(--mg-faint); }
.route-stops, .route-comments, .route-detail-aside, .route-detail-stats,
html[data-theme="light"] :is(.route-stops, .route-comments, .route-detail-aside, .route-detail-stats) {
  border: 1px solid var(--mg-line); background: var(--mg-surface); border-radius: 16px;
}
.route-stop-list article { background: var(--mg-surface-2); border-color: var(--mg-line); border-radius: 12px; }
.route-stop-list b { font-size: 13.5px; }
.route-stop-list small { font-size: 12px; color: var(--mg-faint); }
.route-comment-composer { background: var(--mg-surface-2); border-color: var(--mg-line); border-radius: 12px; padding: 12px; }
.route-comment-composer textarea { color: var(--mg-text); font-family: var(--mg-font); font-size: 14px; }
.route-comment-composer textarea::placeholder { color: var(--mg-faint); }
.route-comment-composer button {
  height: 38px; padding: 0 16px; border-radius: 10px; cursor: pointer;
  background: var(--mg-accent); color: #fff; font-size: 13px; font-weight: 700;
}
.route-comment-composer button:disabled { opacity: .5; cursor: default; }
.route-comment-list > article { background: var(--mg-surface); border-color: var(--mg-line); border-radius: 12px; padding: 14px 16px; }
.route-comment-list p { padding-left: 0; margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--mg-text); }
.route-empty-comments { color: var(--mg-faint); }
.route-empty-comments b { color: var(--mg-text); font-size: 15px; }
.route-login-note { font-size: 13.5px; padding: 14px; border-radius: 11px; color: var(--mg-accent-ink); border-color: color-mix(in srgb, var(--mg-accent) 40%, transparent); }
.route-social-button span { font-size: 13px; }
.route-map-overlay { background: rgba(7, 16, 22, .88); border-color: rgba(255, 255, 255, .16); }
.route-map-overlay b { font-size: 13px; color: #fff; }
.route-map-overlay span { font-size: 11.5px; color: rgba(255, 255, 255, .7); }
.route-page-content h2 { font-size: 19px; font-weight: 700; }
.route-page-content p { font-size: 13.5px; line-height: 1.6; color: var(--mg-muted); }
.route-page-content footer span { font-size: 12.5px; color: var(--mg-muted); }
.route-page-content footer > b { font-size: 12.5px; color: var(--mg-accent-ink); }
.route-page-media > span { font-size: 11px; padding: 5px 10px; border-radius: 8px; }

/* ============================================================
   39) HESAP MENÜSÜ — dil seçimi
   ============================================================ */
.lang-picker { display: flex; align-items: center; gap: 10px; padding: 8px 11px; }
.lang-picker-label {
  display: inline-flex; align-items: center; gap: 10px; flex: 1;
  font-size: 13.5px; font-weight: 600; color: var(--mg-text);
}
.lang-picker-label .mg-icon { color: var(--mg-faint); }
.lang-picker-options { display: inline-flex; gap: 3px; padding: 3px; border-radius: 999px; background: var(--mg-surface-2); }
.lang-picker-options button {
  min-width: 38px; height: 26px; padding: 0 10px; cursor: pointer;
  border: 0; border-radius: 999px; background: transparent;
  color: var(--mg-muted); font-size: 12px; font-weight: 800; letter-spacing: .4px;
  transition: background .14s ease, color .14s ease;
}
.lang-picker-options button:hover:not(:disabled) { color: var(--mg-text); }
.lang-picker-options button.on { background: var(--mg-accent); color: #fff; }
.lang-picker-note { margin: 0 11px 8px; font-size: 12px; color: var(--mg-faint); }

/* ============================================================
   40) KEŞFET — işletme paneli örnek çizimi
   Canlı iframe kalktı; yerine veriye bağlı olmayan bir şablon çizimi geldi.
   ============================================================ */
.xp-biz-preview { display: grid; gap: 10px; }
.xp-browser-body { aspect-ratio: 4 / 3; background: var(--mg-bg); }
.xp-mock { display: block; width: 100%; height: 100%; }
.xp-mock-note { margin: 0; font-size: 12.5px; color: var(--mg-faint); text-align: center; }
.xp-biz-stores span { flex-wrap: wrap; }
.xp-store-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 16px; border-radius: 11px;
  border: 1px solid var(--mg-line-strong); background: var(--mg-surface-2); color: var(--mg-text);
  font-size: 13.5px; font-weight: 700;
  transition: border-color .15s ease, color .15s ease;
}
.xp-store-btn:hover { border-color: var(--mg-accent); color: var(--mg-accent-ink); }
.xp-store-btn .mg-icon { flex: none; }

/* ============================================================
   41) KAYDEDİLENLER — üç kolon, arkadaş listesi
   ============================================================ */
/* event-shell-standard.css bu kabuğu `!important` ile iki kolona sabitliyor;
   üç kolona geçmek için aynı ağırlıkta yazılıyor. */
@media (min-width: 1160px) {
  .saved-layout {
    width: min(var(--app-shell-width, 1444px), 100%);
    grid-template-columns: var(--app-drawer-width, 284px) minmax(0, 1fr) var(--app-rail-width, 392px) !important;
    justify-content: center;
  }
}
@media (max-width: 1159px) { .saved-rail { display: none; } }
.saved-main { min-width: 0; padding: 24px 26px 70px; }
.saved-rail { padding: 22px 20px 60px 24px; }
.rail-loading { display: grid; place-items: center; padding: 22px; }

.friend-list { display: grid; gap: 2px; margin-top: 10px; }
.friend-row {
  display: grid; grid-template-columns: 42px minmax(0, 1fr) 20px;
  align-items: center; gap: 12px; padding: 9px 8px; margin: 0 -8px;
  border-radius: 12px; color: inherit; text-decoration: none;
  transition: background .14s ease;
}
.friend-row:hover { background: var(--mg-surface-2); }
.friend-meta { display: grid; gap: 1px; min-width: 0; }
.friend-meta b {
  display: flex; align-items: center; gap: 5px;
  font-size: 13.5px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.friend-meta b .mg-icon { color: var(--mg-accent); flex: none; }
.friend-meta small { font-size: 12px; color: var(--mg-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.friend-go { color: var(--mg-faint); display: grid; place-items: center; }
.friend-row:hover .friend-go { color: var(--mg-accent-ink); }
.friend-all {
  display: block; margin-top: 12px; padding: 10px; border-radius: 10px;
  border: 1px solid var(--mg-line); text-align: center;
  font-size: 13px; font-weight: 700; color: var(--mg-muted);
}
.friend-all:hover { color: var(--mg-text); border-color: var(--mg-line-strong); }

/* ============================================================
   42) BLOG YAZMA EKRANI (/blog/new)
   Yazının kendisi gibi görünen bir yüzey: kapak + başlık blogda nasıl
   duracaksa burada da öyle durur, gövde tek kolon 68 karakterlik ölçüde.
   ============================================================ */
.bw-app { min-height: 100vh; background: var(--mg-bg); color: var(--mg-text); }
.blogs-write {
  display: inline-flex; align-items: center; gap: 8px; align-self: center;
  height: 40px; padding: 0 18px; border-radius: 11px;
  background: var(--mg-accent); color: #fff; font-size: 13.5px; font-weight: 700;
}
.blogs-write:hover { background: var(--mg-accent-ink); }
.blogs-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

.bw-gate {
  width: min(560px, calc(100% - 32px)); margin: 90px auto;
  display: grid; justify-items: center; gap: 10px; text-align: center;
  padding: 44px 32px; border: 1px solid var(--mg-line); border-radius: 20px; background: var(--mg-surface);
}
.bw-gate .mg-icon { color: var(--mg-accent-ink); }
.bw-gate b { font-size: 19px; font-weight: 800; letter-spacing: -.3px; }
.bw-gate small { font-size: 14px; line-height: 1.6; color: var(--mg-muted); max-width: 44ch; }
.bw-gate-btn {
  margin-top: 8px; height: 42px; padding: 0 22px; border-radius: 11px;
  display: inline-flex; align-items: center;
  background: var(--mg-accent); color: #fff; font-size: 14px; font-weight: 700;
}

/* Eylem çubuğu — sayfadaki tek kroki. */
.bw-bar {
  position: sticky; top: var(--mg-topbar-h); z-index: 15;
  display: flex; align-items: center; gap: 16px;
  padding: 12px max(24px, calc((100% - 900px) / 2));
  border-bottom: 1px solid var(--mg-line);
  background: color-mix(in srgb, var(--mg-bg) 92%, transparent);
  backdrop-filter: blur(12px);
}
.bw-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--mg-muted); }
.bw-back:hover { color: var(--mg-text); }
.bw-state {
  padding: 5px 12px; border-radius: 999px;
  background: var(--mg-surface-2); color: var(--mg-faint);
  font-size: 12px; font-weight: 700;
}
.bw-bar-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.bw-count { font-size: 12.5px; color: var(--mg-faint); font-variant-numeric: tabular-nums; }
.bw-count.over { color: var(--mg-accent-ink); font-weight: 700; }
.bw-publish {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 20px; border: 0; border-radius: 11px; cursor: pointer;
  background: var(--mg-accent); color: #fff; font-size: 13.5px; font-weight: 700;
}
.bw-publish:hover:not(:disabled) { background: var(--mg-accent-ink); }
.bw-publish:disabled { opacity: .45; cursor: default; }

.bw-sheet { width: min(900px, calc(100% - 32px)); margin: 26px auto 90px; }

/* Kapak: yazının manşeti. Başlık görselin üstünde, yayındaki gibi. */
.bw-cover {
  position: relative; display: grid; align-items: end;
  min-height: 320px; padding: 28px; cursor: pointer;
  border: 1px solid var(--mg-line); border-radius: 20px; overflow: hidden;
  background: var(--mg-surface-2) center / cover no-repeat;
  color: #fff;
}
.bw-cover::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(to top, rgba(6, 8, 11, .92) 6%, rgba(6, 8, 11, .35) 52%, rgba(6, 8, 11, .1) 100%);
}
.bw-cover.empty { background-image: none; }
.bw-cover.empty::after { background: none; }
.bw-cover input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.bw-cover-hint {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-content: center; justify-items: center; gap: 6px;
  color: var(--mg-faint); text-align: center; pointer-events: none;
}
.bw-cover-hint b { font-size: 15px; font-weight: 700; color: var(--mg-text); }
.bw-cover-hint small { font-size: 12.5px; }
.bw-cover-title { position: relative; z-index: 1; display: grid; gap: 8px; }
.bw-title {
  width: 100%; border: 0; background: transparent; outline: none;
  font-family: var(--mg-font); font-size: clamp(26px, 4vw, 40px); font-weight: 800;
  letter-spacing: -1px; line-height: 1.12; color: inherit;
}
.bw-cover.empty .bw-title { color: var(--mg-text); }
.bw-title::placeholder { color: rgba(255, 255, 255, .45); }
.bw-cover.empty .bw-title::placeholder { color: var(--mg-faint); }
.bw-byline { font-size: 13px; font-weight: 600; opacity: .8; }
.bw-cover.empty .bw-byline { color: var(--mg-faint); }
.bw-cover-clear {
  margin-top: 10px; display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: transparent; cursor: pointer;
  color: var(--mg-faint); font-size: 12.5px; font-weight: 600;
}
.bw-cover-clear:hover { color: var(--mg-accent-ink); }

/* Araç çubuğu: yedi düğme, tek satır, sabit. */
.bw-tools {
  position: sticky; top: calc(var(--mg-topbar-h) + 64px); z-index: 10;
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  margin: 26px 0 4px; padding: 6px;
  border: 1px solid var(--mg-line); border-radius: 12px;
  background: color-mix(in srgb, var(--mg-surface) 94%, transparent);
  backdrop-filter: blur(10px);
}
.bw-tools button {
  min-width: 34px; height: 34px; padding: 0 9px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 8px; background: transparent; color: var(--mg-muted);
  font-size: 13.5px; font-weight: 700;
  transition: background .12s ease, color .12s ease;
}
.bw-tools button:hover { background: var(--mg-surface-2); color: var(--mg-text); }
.bw-tool-text { font-family: var(--mg-font); line-height: 1; }
.bw-tools button[title="İtalik"] .bw-tool-text { font-style: italic; }
.bw-tool-sep { width: 1px; height: 20px; margin: 0 6px; background: var(--mg-line); }

/* Gövde: okuma ölçüsünde tek kolon. */
.bw-body {
  min-height: 46vh; padding: 22px 2px 40px; outline: none;
  font-size: 18px; line-height: 1.78; color: var(--mg-text);
  max-width: 68ch;
}
.bw-body:empty::before {
  content: attr(data-placeholder);
  color: var(--mg-faint); pointer-events: none;
}
.bw-body h2 { font-size: 26px; font-weight: 800; letter-spacing: -.5px; margin: 34px 0 10px; }
.bw-body h3 { font-size: 20px; font-weight: 700; letter-spacing: -.2px; margin: 28px 0 8px; }
.bw-body p { margin: 0 0 18px; }
.bw-body blockquote {
  margin: 24px 0; padding: 4px 0 4px 20px;
  border-left: 3px solid var(--mg-accent);
  font-size: 20px; line-height: 1.6; color: var(--mg-muted);
}
.bw-body ul, .bw-body ol { margin: 0 0 18px; padding-left: 26px; }
.bw-body li { margin-bottom: 8px; }
.bw-body a { color: var(--mg-accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.bw-error {
  width: min(900px, calc(100% - 32px)); margin: 0 auto 60px;
  padding: 13px 16px; border-radius: 11px;
  background: var(--mg-accent-soft); color: var(--mg-accent-ink); font-size: 13.5px;
}

@media (max-width: 760px) {
  .bw-bar { padding: 10px 14px; gap: 10px; }
  .bw-state { display: none; }
  .bw-sheet { margin-top: 16px; }
  .bw-cover { min-height: 230px; padding: 18px; }
  .bw-body { font-size: 17px; }
  .bw-tools { top: calc(var(--mg-topbar-h) + 56px); }
}

/* ============================================================
   43) YASAL SAYFALAR — kabuk bozulmasın
   Bu üç sayfa kendi ölçüleriyle kuruluydu (248px menü, elle 80px üst
   boşluk, `position:relative` kolon). Sonuç: üst bar ile içerik arasında
   boşluk, dar bir menü ve diğer sayfalardan farklı bir gövde genişliği.
   Artık uygulamanın standart kabuğu.
   ============================================================ */
.legal-heading span { font-size: 11.5px; letter-spacing: 1.6px; }
.legal-heading h1 { font-size: 28px; font-weight: 800; letter-spacing: -.6px; }
.legal-langs a { font-size: 12.5px; }
@media
/* ============================================================
   44) ETKİNLİK TARİH ROZETİ — aydınlık temada okunmuyordu
   Rozet koyu bir kutu ama gün sayısı renk almıyordu; aydınlık temada
   metin `--mg-text` (koyu) olarak miras alınıp koyu kutuda kayboluyordu.
   ============================================================ */
.event-date-chip {
  background: rgba(8, 11, 15, .82); border-color: rgba(255, 255, 255, .18);
  border-radius: 11px; padding: 7px 11px; backdrop-filter: blur(6px);
}
.event-date-chip b,
html[data-theme="light"] .event-date-chip b { color: #fff; font-size: 16px; font-weight: 800; }
.event-date-chip small,
html[data-theme="light"] .event-date-chip small {
  margin-top: 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .6px;
  color: rgba(255, 255, 255, .74);
}

/* ============================================================
   45) NITRO — video üstündeki katman
   Video her temada koyu; üstündeki her şey beyaz kalmalı. Aydınlık temada
   isimler koyulaşıp kayboluyordu. Takip ve ses düğmeleri de birbirinden
   farklı ölçülerdeydi; ikisi de 36px, aynı yarıçap.
   ============================================================ */
.nitro-feature .feature-author { gap: 10px; align-items: center; }
.nitro-feature .fa-names b,
html[data-theme="light"] .nitro-feature .fa-names b { color: #fff; font-size: 14px; font-weight: 700; }
.nitro-feature .fa-names small,
html[data-theme="light"] .nitro-feature .fa-names small { color: rgba(255, 255, 255, .72); font-size: 12px; }
.nitro-feature .fa-names b .mg-icon { color: #fff; }
.nitro-feature .feature-copy p,
html[data-theme="light"] .nitro-feature .feature-copy p { color: #fff; font-size: 14px; line-height: 1.55; }
.nitro-feature .vehicle-tag,
html[data-theme="light"] .nitro-feature .vehicle-tag {
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .24);
  color: #fff; font-size: 12px; padding: 5px 11px; border-radius: 999px;
}

/* Takip ve ses: aynı yükseklik, aynı görsel ağırlık. */
.nitro-feature .feature-author .follow-button,
html[data-theme="light"] .nitro-feature .feature-author .follow-button {
  margin-left: auto; height: 34px; padding: 0 15px; font-size: 13px;
  background: #fff; color: #10151b; border-color: #fff;
}
.nitro-feature .feature-author .follow-button:hover:not(:disabled),
html[data-theme="light"] .nitro-feature .feature-author .follow-button:hover:not(:disabled) {
  background: var(--mg-accent); border-color: var(--mg-accent); color: #fff;
}
.nitro-feature .feature-author .follow-button.following,
.nitro-feature .feature-author .follow-button.pending,
html[data-theme="light"] .nitro-feature .feature-author .follow-button.following,
html[data-theme="light"] .nitro-feature .feature-author .follow-button.pending {
  background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .4);
}
.nitro-mute {
  flex: none; width: 34px; height: 34px; margin-left: 0; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .4); border-radius: 999px;
  background: rgba(8, 11, 15, .5); color: #fff; backdrop-filter: blur(8px);
  transition: background .15s ease, border-color .15s ease;
}
.nitro-mute:hover { background: rgba(8, 11, 15, .75); border-color: #fff; }

/* Avatar: kırmızı halka herkese uygulanıyordu; halka artık segmentten geliyor
   ve tam yuvarlak. */
.nitro-feature .feature-author .user-avatar { border-radius: 50%; }
.nitro-feature .feature-author .user-avatar > span { border-radius: 50%; }

/* Eylem sütunu: yorum artık bağlantı, ölçüler eşitlendi. */
.nitro-feature nav > a, .nitro-feature nav > button {
  display: grid; justify-items: center; gap: 3px;
  border: 0; background: transparent; color: #fff; cursor: pointer;
  text-decoration: none;
}
.nitro-feature nav small { font-size: 11.5px; font-weight: 700; color: rgba(255, 255, 255, .88); }

/* ============================================================
   46) BLOG KAPAĞI — dosya seçici katmanı
   ============================================================ */
.bw-cover-drop {
  position: absolute; inset: 0; z-index: 1; display: block; cursor: pointer;
}
.bw-cover-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.bw-cover::after { pointer-events: none; }
.bw-cover-title { position: relative; z-index: 2; }
.bw-cover .bw-cover-hint { z-index: 1; }

/* ============================================================
   47) HİKÂYE / UYGULAMA KAPISI PENCERESİ
   ============================================================ */
.mg-modal.app-gate {
  position: relative; width: min(420px, 100%);
  display: grid; justify-items: center; text-align: center; gap: 10px;
  padding: 34px 30px 26px;
}
.app-gate-close {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 0; border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--mg-faint);
}
.app-gate-close:hover { background: var(--mg-surface-2); color: var(--mg-text); }
.app-gate-mark {
  width: 64px; height: 64px; border-radius: 18px; overflow: hidden;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
}
.app-gate-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.app-gate h3 { margin: 6px 0 0; font-size: 19px; font-weight: 800; letter-spacing: -.3px; }
.app-gate p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--mg-muted); max-width: 34ch; }
.app-gate-stores { display: grid; gap: 9px; width: 100%; margin-top: 10px; }
.app-gate-stores.ios-first a:first-child { order: -1; }
.app-gate-store {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  height: 52px; border-radius: 13px;
  border: 1px solid var(--mg-line-strong); background: var(--mg-surface-2);
  color: var(--mg-text); text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.app-gate-store:hover { border-color: var(--mg-accent); background: var(--mg-accent-soft); }
.app-gate-store span { display: grid; text-align: left; line-height: 1.15; }
.app-gate-store small { font-size: 11px; color: var(--mg-faint); }
.app-gate-store b { font-size: 14.5px; font-weight: 800; }
.app-gate-foot { margin-top: 6px; font-size: 12px; color: var(--mg-faint); }

/* Hikâye ekleme artık düğme: şerit içindeki diğer öğelerle aynı ölçüde. */
.stories .story-add-label {
  border: 0; background: transparent; cursor: pointer; padding: 0;
  display: grid; justify-items: center; gap: 4px;
}

/* ============================================================
   48) AVATAR HALKASI — segment 0 marka kırmızısı değil
   `segment-0` normal üye demek; ona da kırmızı halka verilince herkes
   Turbo gibi görünüyordu ve halkanın anlamı kayboluyordu. Kırmızı yalnız
   kendi hikâyesi olan avatarda (has-story) kalıyor; kademeler
   1 bronz · 2 gümüş · 3 altın olarak duruyor.
   ============================================================ */
.user-avatar.segment-0:not(.has-story) {
  padding: 2px;
  background: var(--mg-line-strong);
}
.user-avatar.segment-0:not(.has-story) > span { inset: 2px; }
/* Video üstündeki avatarlar (Nitro, hikâye) her temada koyu zeminde. */
.nitro-feature .user-avatar.segment-0:not(.has-story),
.story-frame .user-avatar.segment-0:not(.has-story) { background: rgba(255, 255, 255, .45); }

/* ============================================================
   49) AVATARIN SİYAH HALKASI
   Avatarın içindeki halka sabit `#070a0d` ile çizilmişti — koyu temada
   zeminle aynı renk olduğu için "boşluk" gibi okunuyordu, aydınlık temada
   ise fotoğrafın etrafında siyah bir çember olarak kalıyordu. Halka artık
   ya yok (profil) ya da bulunduğu yüzeyin rengi (hikâye çemberi).
   ============================================================ */
.profile-ava .user-avatar > span,
.profile-ava .user-avatar.has-story > span { border: 0; }
.user-avatar.has-story > span { border-color: var(--mg-bg); }
/* Koyu kalan yüzeylerde (hikâye izleyici, Nitro) halka o yüzeyin rengini alır. */
.story-frame .user-avatar.has-story > span,
.nitro-feature .user-avatar.has-story > span { border-color: #0b0f14; }
/* Hikâye şeridindeki "+" rozetinin çerçevesi de sayfa zemininden. */
.story-ring.add-story b { border-color: var(--mg-bg); }

/* Kimlik rozetinin oyuğu: rozet sayfa zemininde değil kendi yüzeyinde
   duruyorsa oyuk o yüzeyin rengi olmalı. Video üstünde beyaz bir rozet +
   beyaz oyuk = görünmez tik (aydınlık temanın Nitro'daki hatası). */
.nitro-feature, .story-frame, .bz-cover-plate, .sp-verified-flag {
  --mg-badge-knockout: #0b0f14;
}
.nitro-feature .fa-names b .mg-icon,
html[data-theme="light"] .nitro-feature .fa-names b .mg-icon {
  color: #fff; --mg-badge-knockout: #101820;
}

/* ============================================================
   50) HİKÂYE — beğeni
   Sayaçlar yalnızca hikâyenin sahibinde. İzleyen taraf sayı değil,
   basılabilir tek bir kalp görür.
   ============================================================ */
.story-like {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .08); color: #fff;
  font-size: 13px; font-weight: 700;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.story-like:hover:not(:disabled) { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .5); }
.story-like.on { background: var(--mg-accent); border-color: var(--mg-accent); color: #fff; }
.story-like:disabled { opacity: .6; cursor: default; }
.story-stats { justify-content: space-between; }

/* ============================================================
   51) UYGULAMA KAPISI — mağaza bağlantıları
   İki bağlantı koyu temada zeminle aynı tonda kalıyordu ve okunmuyordu.
   Artık her iki temada da yüzeyden ayrışan, kendi ağırlığı olan düğmeler.
   ============================================================ */
.app-gate-store {
  border-color: var(--mg-line-strong);
  background: var(--mg-text); color: var(--mg-bg);
  font-weight: 700;
}
.app-gate-store:hover { background: var(--mg-accent); border-color: var(--mg-accent); color: #fff; }
.app-gate-store small { color: color-mix(in srgb, currentColor 66%, transparent); }
.app-gate-store b { color: currentColor; }
.app-gate-store .mg-icon { color: currentColor; }
.app-gate p { color: var(--mg-text); opacity: .78; }
.app-gate-foot { color: var(--mg-muted); }

/* ============================================================
   52) NITRO — ses düğmesi, sağ ray, yorum tabakası
   ============================================================ */
/* Ses düğmesi: `.feature-author button` kuralı bu düğmeye de 14px yan
   dolgu veriyordu; ikon 34px'lik dairenin içinde sağa kaçıyordu. */
.nitro-feature .feature-author .nitro-mute {
  width: 36px; height: 36px; padding: 0; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; line-height: 0;
}
.nitro-mute > span { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.nitro-mute .mg-icon { display: block; }

/* Sağ ray tamamen sabit: sayfa kaydıkça yerinde kalır, taşan içerik
   rayın kendi içinde kayar (sticky-rail.js bu rayı artık yukarı çekmiyor). */
.nitro-right {
  position: sticky; top: var(--mg-topbar-h);
  height: calc(100vh - var(--mg-topbar-h));
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin;
}
.nitro-right > .rail-card:last-child { margin-bottom: 0; }

/* Yorumlar videonun üstünde açılan bir tabaka. */
.nitro-comments {
  position: absolute; z-index: 6; left: 0; right: 0; bottom: 0;
  max-height: 66%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: rgba(8, 11, 15, .93); backdrop-filter: blur(18px);
  border-top: 1px solid rgba(255, 255, 255, .14);
  border-radius: 16px 16px 0 0; color: #fff;
}
.nitro-comments > header {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 14px 11px; border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.nitro-comments > header b { font-size: 14px; font-weight: 700; }
.nitro-comments > header span { font-size: 12px; color: rgba(255, 255, 255, .6); }
.nitro-comments > header button {
  margin-left: auto; width: 28px; height: 28px; padding: 0; flex: none;
  display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: 8px; background: transparent; color: rgba(255, 255, 255, .7);
}
.nitro-comments > header button:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.nitro-comment-list { overflow-y: auto; padding: 10px 14px; display: grid; gap: 12px; align-content: start; }
.nitro-comment { display: flex; gap: 10px; align-items: flex-start; }
.nitro-comment > div { min-width: 0; }
.nitro-comment b {
  display: flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 700; color: #fff;
}
.nitro-comment b em { font-style: normal; font-weight: 500; font-size: 11.5px; color: rgba(255, 255, 255, .55); }
.nitro-comment b .mg-icon { color: #fff; --mg-badge-knockout: #101820; }
.nitro-comment p { margin: 3px 0 0; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .88); overflow-wrap: anywhere; }
.nitro-comment-note { margin: 6px 0; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: rgba(255, 255, 255, .6); }
.nitro-comment-form { display: flex; gap: 8px; padding: 11px 14px 13px; border-top: 1px solid rgba(255, 255, 255, .1); }
.nitro-comment-form input {
  flex: 1; min-width: 0; height: 38px; padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px;
  background: rgba(255, 255, 255, .08); color: #fff; font-size: 13px; outline: none;
}
.nitro-comment-form input::placeholder { color: rgba(255, 255, 255, .5); }
.nitro-comment-form input:focus { border-color: rgba(255, 255, 255, .45); }
.nitro-comment-form button {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: 999px; background: var(--mg-accent); color: #fff;
}
.nitro-comment-form button:disabled { opacity: .45; cursor: default; }
.nitro-comment-login { display: block; padding: 13px 14px; text-align: center; font-size: 13px; font-weight: 700; color: #fff; }
/* Yorum açıkken eylem sütunu tabakanın üstünde kalmasın. */
.nitro-feature.comments-open > nav { bottom: auto; top: 96px; }
.nitro-feature.comments-open .nitro-timeline { display: none; }
.nitro-feature nav > button.on i { background: var(--mg-accent); }
.nitro-feature nav > button.n-like.on i { background: var(--mg-accent); color: #fff; }

/* ============================================================
   53) İŞLETME LİSTESİ — doğrulanmış kart öne çıkar
   Onaylı işletme listede diğerleriyle aynı ağırlıktaydı; tek fark isim
   yanındaki küçük tikti. Artık kartın kendisi bunu söylüyor: sol kenarda
   marka şeridi, üstte küçük bir bayrak, biraz daha yüksek yüzey.
   ============================================================ */
.sp-card.is-verified {
  border-color: color-mix(in srgb, var(--mg-accent) 34%, var(--mg-line));
  background:
    linear-gradient(102deg, color-mix(in srgb, var(--mg-accent) 7%, transparent), transparent 42%),
    var(--mg-surface);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}
.sp-card.is-verified::after {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--mg-accent);
}
.sp-card.is-verified:hover {
  border-color: var(--mg-accent);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--mg-accent) 18%, rgba(0, 0, 0, .2));
}
.sp-verified-flag {
  position: absolute; top: 0; right: 0;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 11px 6px 10px; border-radius: 0 14px 0 12px;
  background: var(--mg-accent); color: #fff;
  --mg-badge-knockout: var(--mg-accent);
  font-size: 9.5px; font-weight: 800; letter-spacing: 1.1px;
}
/* Köşe şeridi kalbin üstüne binmesin: gövde bir tık aşağı iner. */
.sp-card.is-verified .sp-card-top, .sp-card.is-verified .sp-logo { margin-top: 12px; }
.sp-card.is-verified .sp-logo {
  border-color: color-mix(in srgb, var(--mg-accent) 30%, var(--mg-line));
  background: var(--mg-surface-2);
}
.sp-card-top h3 .mg-icon { --mg-badge-knockout: var(--mg-surface); color: var(--mg-accent); }

/* Favoriler bir yere kaydediliyor: listede kendi süzgeci var. */
.sp-cat-fav { display: inline-flex; align-items: center; gap: 6px; }
.sp-cat-fav.active { border-color: var(--mg-accent); background: var(--mg-accent-soft); }
.sp-fav.on { background: var(--mg-accent); border-color: var(--mg-accent); color: #fff; }
.sp-fav:disabled { opacity: .55; cursor: default; }
.sp-inline-error {
  display: flex; align-items: center; gap: 7px; margin: 0;
  padding: 10px 13px; border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--mg-accent) 40%, var(--mg-line));
  background: var(--mg-accent-soft); color: var(--mg-text); font-size: 12.5px;
}
.sp-inline-error .mg-icon { color: var(--mg-accent-ink); flex: none; }

/* ============================================================
   54) İŞLETME SAYFASI — giriş bloğu ve künye şeridi

   Sayfa bir sosyal profil değil, bir kartvizit. Bu yüzden fotoğrafla
   değil ADLA açılıyor: kapak fotoğrafı bilinmeyen bir atölyeyi tanıtmaz,
   ad ve dört gerçek tanıtır. Adın hemen altındaki künye şeridi bu
   sayfanın imzası: yalnızca ziyaret kararını değiştiren bilgiler
   (puan, açık/kapalı, mesafe, fiyatlı hizmet sayısı), ince çizgilerle
   ayrılmış tek bir satırda. Verisi olmayan hücre hiç çizilmiyor.

   Not: site genelinde tek yazı ailesi kuralı (bkz. §1) burada da
   geçerli. Ayrım aileden değil ölçek, ağırlık ve harf aralığından
   geliyor; sayılar tablo rakamlarıyla hizalanıyor.
   ============================================================ */
.bz-hero { min-height: 0; padding: 44px 0 10px; border-bottom: 0; overflow: visible; }
.bz-site .bz-section:first-of-type { border-top: 0; }

.bz-intro {
  display: grid; align-items: start; gap: 24px;
  grid-template-columns: minmax(0, 1fr);
}
.bz-hero-details { display: grid; gap: 18px; min-width: 0; }
.bz-intro-id { display: grid; gap: 15px; align-content: start; min-width: 0; }

.bz-eyebrow {
  margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 12px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
  color: var(--bz, #e9003f);
}
.bz-eyebrow i { font-style: normal; color: var(--mg-line-strong); }

.bz-intro-id h1 {
  margin: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: clamp(34px, 4.4vw, 54px); font-weight: 800; line-height: 1.02;
  letter-spacing: -2px; color: var(--mg-text); text-wrap: balance; text-shadow: none;
}
.bz-verified {
  display: inline-grid; place-items: center; flex: none;
  color: var(--bz, #e9003f); --mg-badge-knockout: var(--mg-bg);
}
.bz-intro-id .bz-slogan {
  margin: 0; max-width: 46ch;
  font-size: 17px; line-height: 1.5; color: var(--mg-muted);
}

/* ---------- Künye şeridi ---------- */
.bz-facts {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  margin-top: 5px; overflow: hidden;
  border: 1px solid var(--mg-line); border-radius: 16px; background: var(--mg-surface);
}
.bz-fact { padding: 15px 18px 16px; min-width: 0; border-left: 1px solid var(--mg-line); }
.bz-fact:first-child { border-left: 0; }
.bz-fact b {
  display: inline-flex; align-items: baseline; gap: 3px; vertical-align: middle;
  font-size: 26px; font-weight: 800; letter-spacing: -1px; line-height: 1;
  color: var(--mg-text); font-variant-numeric: tabular-nums;
}
.bz-fact b.quiet { font-size: 19px; letter-spacing: -.4px; color: var(--mg-muted); }
.bz-fact b em { font-style: normal; font-size: 14px; font-weight: 700; letter-spacing: 0; color: var(--mg-faint); }
.bz-fact .bz-star-row { display: inline-flex; vertical-align: middle; margin-left: 8px; font-size: 14px; }
.bz-fact .bz-open { vertical-align: middle; padding: 4px 11px 4px 9px; font-size: 12.5px; }
.bz-fact small {
  display: flex; align-items: center; gap: 6px; margin-top: 8px;
  font-size: 12.5px; color: var(--mg-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bz-fact small .mg-icon { flex: none; }

/* ---------- Geniş kapak ---------- */
.bz-showcase {
  position: relative; overflow: hidden;
  width: 100%; height: clamp(200px, 25vw, 320px); aspect-ratio: auto; border-radius: 20px;
  border: 1px solid var(--mg-line);
  display: grid; place-items: center;
  color: color-mix(in srgb, var(--bz, #e9003f) 55%, var(--mg-faint));
  background:
    radial-gradient(120% 100% at 78% 0%, color-mix(in srgb, var(--bz, #e9003f) 20%, transparent), transparent 66%),
    linear-gradient(160deg, var(--mg-surface), var(--mg-surface-2));
}
.bz-showcase.has-photo { background: var(--mg-surface-2); }
.bz-showcase.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Kapak fotoğrafı yoksa amblem gerilmiyor: dokulu bir levhanın ortasında
   kendi oranında duruyor. */
.bz-showcase.is-mark::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(currentColor 1px, transparent 1.4px);
  background-size: 22px 22px; opacity: .12;
}
/* Amblem kendi ölçüsünde durur: büyütülüp yumuşamaz, kırpılmaz. */
.bz-showcase-logo {
  position: relative; width: auto; height: auto;
  max-width: min(58%, 300px); max-height: 62%; object-fit: contain;
}
.bz-showcase-badge {
  position: absolute; left: 15px; bottom: 15px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px 7px 10px; border-radius: 999px;
  background: var(--bz, #e9003f); color: #fff;
  --mg-badge-knockout: var(--bz, #e9003f);
  font-size: 10.5px; font-weight: 800; letter-spacing: 1.4px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .26);
}

/* ---------- Eylemler ---------- */
.bz-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.bz-button.quiet {
  background: var(--mg-surface); color: var(--mg-text);
  border: 1px solid var(--mg-line-strong); box-shadow: none;
}
.bz-button.quiet:hover { border-color: var(--bz, #e9003f); color: var(--bz, #e9003f); filter: none; }
.bz-hero-actions .bz-button:first-child { font-variant-numeric: tabular-nums; }

@media (max-width: 940px) {
  .bz-hero { padding: 28px 0 6px; }
  .bz-intro { grid-template-columns: 1fr; gap: 24px; }
  .bz-showcase { height: clamp(180px, 32vw, 280px); }
}
@media (max-width: 620px) {
  .bz-facts { grid-auto-flow: row; grid-auto-columns: auto; }
  .bz-fact { border-left: 0; border-top: 1px solid var(--mg-line); }
  .bz-fact:first-child { border-top: 0; }
}

/* ============================================================
   55) ETKİNLİKLER — "Yaklaşan Etkinlikler" rayı
   Satırlar kulüp rayından devralınmıştı: başlık tek satıra sıkışıp
   taşıyor, küçük görsel ile metin hizalanmıyordu. Ray artık kendi
   ölçüsünde — iki satırlık başlık, tarih altında, taşma yok.
   ============================================================ */
.forum-right .club-rail { display: grid; gap: 2px; margin-top: 10px; }
.forum-right .club-rail-row {
  display: grid; grid-template-columns: 44px minmax(0, 1fr);
  align-items: center; gap: 11px;
  padding: 10px 8px; margin: 0 -8px;
  border-bottom: 1px solid var(--mg-line); border-radius: 10px;
  text-decoration: none; transition: background .15s ease;
}
.forum-right .club-rail-row:last-child { border-bottom: 0; }
.forum-right .club-rail-row:hover { background: var(--mg-surface-2); }
.forum-right .club-rail-row > div { min-width: 0; display: grid; gap: 3px; }
.forum-right .club-rail-row b {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; white-space: normal;
  font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--mg-text);
}
.forum-right .club-rail-row small {
  display: block; margin: 0; font-size: 11.5px; line-height: 1.35;
  color: var(--mg-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.forum-right .event-thumb.small,
.forum-right .club-logo.small {
  width: 44px; height: 44px; flex: none; border-radius: 11px;
  background: var(--mg-surface-2); color: var(--mg-faint);
  display: grid; place-items: center; overflow: hidden; font-size: 15px; font-weight: 800;
}
.forum-right .event-thumb.small img,
.forum-right .club-logo.small img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   56) YASAL SAYFALAR — standart kabuğun içinde
   Sayfa artık forum kabuğunu kullanıyor; burada yalnızca metnin kendi
   tipografisi kalıyor.
   ============================================================ */
.legal-main { max-width: 820px; }
.legal-heading { border-bottom: 1px solid var(--mg-line); padding-bottom: 18px; margin: 4px 0 18px; }
.legal-heading h1 { font-size: 28px; font-weight: 800; letter-spacing: -.6px; margin: 8px 0 0; }
.legal-rail { display: grid; gap: 2px; margin-top: 10px; }
.legal-rail a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 11px; border-radius: 10px;
  font-size: 13px; font-weight: 600; color: var(--mg-muted); text-decoration: none;
}
.legal-rail a:hover { background: var(--mg-surface-2); color: var(--mg-text); }
.legal-rail a.on { background: var(--mg-accent-soft); color: var(--mg-text); font-weight: 700; }
.legal-rail a > span { flex: 1; min-width: 0; }
.legal-rail .mg-icon { flex: none; color: var(--mg-faint); }
.legal-rail a.on .mg-icon { color: var(--mg-accent-ink); }

/* ============================================================
   57) KULÜP — tartışma başlatma ve satırların tıklanabilirliği
   ============================================================ */
.disc-row { text-decoration: none; color: inherit; }
.disc-compose { margin-bottom: 12px; }
.disc-compose-open {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 11px 18px; border-radius: 11px;
  border: 1px dashed var(--mg-line-strong); background: var(--mg-surface);
  color: var(--mg-text); font-size: 13.5px; font-weight: 700;
}
.disc-compose-open:hover { border-color: var(--mg-accent); color: var(--mg-accent-ink); }
.disc-compose-form {
  display: grid; gap: 10px; padding: 16px;
  border: 1px solid var(--mg-line); border-radius: 14px; background: var(--mg-surface);
}
.disc-compose-form input, .disc-compose-form textarea {
  width: 100%; padding: 11px 13px; border-radius: 10px;
  border: 1px solid var(--mg-line-strong); background: var(--mg-bg);
  color: var(--mg-text); font: inherit; font-size: 14px; outline: none; resize: vertical;
}
.disc-compose-form input { font-weight: 700; font-size: 15px; }
.disc-compose-form input:focus, .disc-compose-form textarea:focus { border-color: var(--mg-accent); }
.disc-cat-picker { display: flex; flex-wrap: wrap; gap: 7px; }
.disc-cat-picker button {
  padding: 7px 13px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--mg-line-strong); background: var(--mg-surface-2);
  color: var(--mg-muted); font-size: 12.5px; font-weight: 600;
}
.disc-cat-picker button:hover { color: var(--mg-text); border-color: var(--mg-line-strong); }
.disc-cat-picker button.on { background: var(--mg-accent); border-color: var(--mg-accent); color: #fff; }
.disc-compose-actions { display: flex; justify-content: flex-end; gap: 9px; }
.disc-compose-cancel {
  padding: 10px 16px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--mg-line-strong); background: transparent;
  color: var(--mg-muted); font-size: 13px; font-weight: 700;
}
.disc-compose-cancel:hover { color: var(--mg-text); }
.disc-head-by { margin-top: 12px; }

/* ============================================================
   58) GİRİŞ EKRANI — sağ üstteki tema ve dil geçişi
   İki ayrı kutu (pembe dolgulu dil düğmesi + yuvarlak tema düğmesi) camsı
   bir hapın içinde duruyordu. Artık tek, düz, ince çerçeveli bir şerit:
   seçili dil dolgu değil, yüzey farkıyla belli oluyor.
   ============================================================ */
.auth-toolbar {
  top: 20px; right: 22px; gap: 0; padding: 0;
  display: flex; align-items: stretch;
  border: 1px solid var(--mg-line-strong); border-radius: 10px;
  background: var(--mg-surface); backdrop-filter: none; box-shadow: none;
  overflow: hidden;
}
html[data-theme="light"] .auth-toolbar { background: var(--mg-surface); border-color: var(--mg-line-strong); }
.auth-toolbar .lang-switch,
html[data-theme="light"] .auth-toolbar .lang-switch {
  display: flex; gap: 0; padding: 0; border-radius: 0; background: transparent;
}
.auth-toolbar .lang-switch button,
html[data-theme="light"] .auth-toolbar .lang-switch button {
  height: 34px; min-width: 42px; padding: 0 12px; border: 0; border-radius: 0; cursor: pointer;
  background: transparent; color: var(--mg-faint);
  font-size: 12px; font-weight: 700; letter-spacing: .6px;
  transition: background .15s ease, color .15s ease;
}
.auth-toolbar .lang-switch button:hover:not(.active),
html[data-theme="light"] .auth-toolbar .lang-switch button:hover:not(.active) {
  background: var(--mg-surface-2); color: var(--mg-text);
}
.auth-toolbar .lang-switch button.active,
html[data-theme="light"] .auth-toolbar .lang-switch button.active {
  background: var(--mg-surface-2); color: var(--mg-text);
  box-shadow: inset 0 -2px 0 var(--mg-accent);
}
.auth-toolbar .top-action,
html[data-theme="light"] .auth-toolbar .top-action {
  width: 38px; height: 34px; border-radius: 0; cursor: pointer;
  border-left: 1px solid var(--mg-line); background: transparent;
  color: var(--mg-muted); display: grid; place-items: center;
}
.auth-toolbar .top-action:hover,
html[data-theme="light"] .auth-toolbar .top-action:hover {
  background: var(--mg-surface-2) !important; color: var(--mg-text);
}
@media (max-width: 560px) {
  .auth-toolbar { top: 12px; right: 12px; }
  .auth-toolbar .lang-switch button { min-width: 36px; padding: 0 9px; font-size: 11px; }
  .auth-toolbar .top-action { width: 34px; }
}

/* ============================================================
   59) İŞLETME SAYFASI — açık/kapalı durumu ve bulunamadı ekranı
   İşletmenin sayfası artık okunabilir adresten de açılıyor
   (/isletme/{slug}); adres tutmadığında sayfa boş bir hata değil,
   yolu gösteren bir ekran veriyor.
   ============================================================ */
.bz-hero-today { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bz-hero-today > span { display: inline-flex; align-items: center; gap: 7px; }
.bz-open {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px 5px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700;
  border: 1px solid var(--mg-line-strong); background: var(--mg-surface-2); color: var(--mg-muted);
}
.bz-open i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.bz-open.yes { border-color: rgba(34, 165, 91, .45); background: rgba(34, 165, 91, .12); color: #1f9d57; }
html:not([data-theme="light"]) .bz-open.yes { color: #4ade80; }
.bz-open.no { border-color: color-mix(in srgb, var(--mg-accent) 34%, var(--mg-line)); background: var(--mg-accent-soft); color: var(--mg-accent-ink); }

.bz-missing { gap: 10px; padding: 40px 20px; text-align: center; }
.bz-missing .brand { width: 168px; height: 42px; margin-bottom: 6px; }
.bz-missing-code {
  font-size: 56px; font-weight: 900; letter-spacing: -3px; line-height: 1;
  color: var(--mg-line-strong);
}
.bz-missing b { font-size: 20px; font-weight: 800; color: var(--mg-text); }
.bz-missing small { font-size: 14px; color: var(--mg-muted); max-width: 42ch; }
.bz-missing .bz-back-pill { margin-top: 10px; border-color: var(--mg-line-strong); color: var(--mg-muted); }
.bz-missing .bz-back-pill:hover { border-color: var(--mg-accent); color: var(--mg-accent-ink); }
.rail-title .rail-count {
  min-width: 22px; padding: 2px 8px; border-radius: 999px;
  background: var(--mg-surface-2); color: var(--mg-muted);
  font-size: 11.5px; font-weight: 700; text-align: center;
}

/* Fiyat etiketi: shop-site.css "right:10px", polish "left:12px" veriyordu;
   ikisi birden uygulanınca etiket kart genişliğine yayılıyordu. */
.bz-price-tag { right: auto; width: fit-content; }

/* ============================================================
   60) PAYLAŞ KUTUSU — gönderiyi mesaj olarak gönder
   Alıcı iki kaynaktan seçilir: mevcut sohbetler ve takip ettiklerin.
   Çoklu seçim; seçili satır sağdaki tikle işaretlenir.
   ============================================================ */
.mg-modal.share-sheet {
  width: min(440px, 100%); max-height: min(660px, 88vh);
  display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto auto auto;
  padding: 0; overflow: hidden;
}
.share-sheet > header {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 18px 13px; border-bottom: 1px solid var(--mg-line);
}
.share-sheet > header h3 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.2px; }
.share-sheet > header button {
  margin-left: auto; width: 30px; height: 30px; flex: none;
  display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: 9px; background: transparent; color: var(--mg-faint);
}
.share-sheet > header button:hover { background: var(--mg-surface-2); color: var(--mg-text); }

.share-preview {
  display: flex; align-items: center; gap: 11px;
  margin: 14px 18px 0; padding: 10px 12px;
  border: 1px solid var(--mg-line); border-radius: 13px; background: var(--mg-surface-2);
}
.share-preview-thumb {
  width: 44px; height: 44px; flex: none; overflow: hidden;
  display: grid; place-items: center; border-radius: 10px;
  background: var(--mg-bg); color: var(--mg-faint);
}
.share-preview-thumb img { width: 100%; height: 100%; object-fit: cover; }
.share-preview > div { min-width: 0; display: grid; gap: 2px; }
.share-preview b { font-size: 13.5px; font-weight: 700; color: var(--mg-text); }
.share-preview small {
  font-size: 12.5px; color: var(--mg-muted); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.share-search {
  display: flex; align-items: center; gap: 9px;
  margin: 14px 18px 0; padding: 0 13px; height: 40px;
  border: 1px solid var(--mg-line-strong); border-radius: 11px; background: var(--mg-bg);
  color: var(--mg-faint);
}
.share-search input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  color: var(--mg-text); font: inherit; font-size: 14px;
}

.share-list { overflow-y: auto; padding: 8px 10px; margin: 6px 8px 0; }
.share-group {
  display: block; padding: 8px 8px 5px;
  font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--mg-faint);
}
.share-row {
  width: 100%; display: flex; align-items: center; gap: 11px;
  padding: 8px 10px; border: 0; border-radius: 11px; cursor: pointer;
  background: transparent; color: var(--mg-text); text-align: left;
}
.share-row:hover:not(:disabled) { background: var(--mg-surface-2); }
.share-row:disabled { opacity: .55; cursor: default; }
.share-row.on { background: var(--mg-accent-soft); }
.share-row-fallback {
  width: 36px; height: 36px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--mg-surface-2); color: var(--mg-faint);
}
.share-row-name { flex: 1; min-width: 0; display: grid; gap: 1px; }
.share-row-name b {
  font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.share-row-name small { font-size: 12px; color: var(--mg-faint); }
.share-tick {
  flex: none; width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: 50%; border: 1.5px solid var(--mg-line-strong); color: transparent;
  --mg-badge-knockout: var(--mg-surface);
}
.share-row.on .share-tick { border-color: var(--mg-accent); color: var(--mg-accent); }
.share-note { margin: 10px 8px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mg-muted); }

.share-note-input {
  margin: 8px 18px 0; padding: 10px 12px; resize: none;
  border: 1px solid var(--mg-line-strong); border-radius: 11px;
  background: var(--mg-bg); color: var(--mg-text); font: inherit; font-size: 14px; outline: none;
}
.share-note-input:focus { border-color: var(--mg-accent); }

.share-result { margin: 10px 18px 0; font-size: 13px; font-weight: 600; }
.share-result.ok { color: #1f9d57; }
html:not([data-theme="light"]) .share-result.ok { color: #4ade80; }
.share-result.err { color: var(--mg-accent-ink); }

.share-sheet > footer {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 18px; margin-top: 12px; border-top: 1px solid var(--mg-line);
}
.share-copy {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 9px 14px; border-radius: 10px;
  border: 1px solid var(--mg-line-strong); background: transparent;
  color: var(--mg-muted); font-size: 13px; font-weight: 700;
}
.share-copy:hover { color: var(--mg-text); border-color: var(--mg-line-strong); background: var(--mg-surface-2); }
.share-send {
  padding: 10px 20px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--mg-accent); color: #fff; font-size: 14px; font-weight: 700;
}
.share-send:disabled { opacity: .4; cursor: default; }

.share-gate { display: grid; justify-items: center; gap: 8px; padding: 30px 24px; text-align: center; color: var(--mg-faint); }
.share-gate b { font-size: 16px; font-weight: 800; color: var(--mg-text); }
.share-gate small { font-size: 13px; color: var(--mg-muted); max-width: 34ch; }
.share-gate-btn {
  margin-top: 8px; padding: 10px 20px; border-radius: 10px;
  background: var(--mg-accent); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none;
}

/* ============================================================
   61) SOHBETTE PAYLAŞILAN GÖNDERİ
   Balonun içinde gönderinin kendisi: kim paylaştı, ne paylaştı,
   tek dokunuşla açılır.
   ============================================================ */
.bubble.has-share { padding: 6px 6px 5px; max-width: 320px; }
.bubble .bubble-text { display: block; padding: 5px 7px 7px; font-size: 14px; line-height: 1.45; }
.shared-post {
  display: grid; gap: 0; overflow: hidden; cursor: pointer;
  border-radius: 12px; background: var(--mg-surface); border: 1px solid var(--mg-line);
  color: var(--mg-text);
}
.shared-post:hover { border-color: var(--mg-accent); }
.shared-post:focus-visible { outline: 2px solid var(--mg-accent); outline-offset: 2px; }
.shared-post-media { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--mg-surface-2); }
.shared-post-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shared-post-play {
  position: absolute; inset: 0; margin: auto; width: 36px; height: 36px;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(8, 11, 15, .6); color: #fff;
}
.shared-post-body { display: grid; gap: 5px; padding: 9px 11px 10px; }
.shared-post-author { display: flex; align-items: center; gap: 6px; min-width: 0; }
.shared-post-author b {
  font-size: 12.5px; font-weight: 700; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shared-post-author .mg-icon { flex: none; color: var(--mg-accent); --mg-badge-knockout: var(--mg-surface); }
.shared-post-body p {
  margin: 0; font-size: 13px; line-height: 1.45; color: var(--mg-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.shared-post-body > small {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; color: var(--mg-faint);
}
.shared-post-loading, .shared-post-gone {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 18px 12px; font-size: 12.5px; color: var(--mg-faint);
}
.shared-post.is-gone { cursor: default; }
.shared-post.is-gone:hover { border-color: var(--mg-line); }
/* Kendi mesajın koyu bir balonda: içindeki kart yüzeyini korur. */
.bubble-row.mine .bubble.has-share .shared-post { border-color: rgba(255, 255, 255, .22); }
.share-gate-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.share-gate-btn { margin-top: 0; }
/* Pano izni yoksa bağlantı elle kopyalanabilsin. */
.share-link {
  width: calc(100% - 36px); margin: 10px 18px 0; padding: 9px 12px;
  border: 1px solid var(--mg-line-strong); border-radius: 10px;
  background: var(--mg-bg); color: var(--mg-muted);
  font-size: 12.5px; font-family: inherit; outline: none;
}
.share-gate .share-link { width: 100%; margin: 10px 0 0; }

/* ============================================================
   62) İŞLETME SAYFASI — hizmet levhaları ve puan tablosu
   Hizmet kartı fotoğraf + altında metin kutusuydu; üç kart yan yana
   farklı yükseklikler tutuyor, kategori satırı marka kırmızısıyla
   yazıldığı için başlıktan daha çok bağırıyordu. Kart artık fotoğrafın
   kendisi: künye siyah bir gradyanın içinde fotoğrafın üstünde duruyor,
   kategori sessiz bir üst satır.
   ============================================================ */
.bz-service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1040px) { .bz-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .bz-service-grid { grid-template-columns: 1fr; } }

.bz-service {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 4 / 5; border-radius: 16px;
  border: 1px solid var(--mg-line); background: #0a0d12;
  transition: transform .28s cubic-bezier(.22, .7, .3, 1), border-color .2s ease, box-shadow .28s ease;
}
.bz-service:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--bz, #e9003f) 45%, var(--mg-line));
  box-shadow: 0 18px 38px rgba(0, 0, 0, .3);
}
.bz-service-photo { position: absolute; inset: 0; width: 100%; height: 100%; }
img.bz-service-photo { object-fit: cover; transition: transform .6s cubic-bezier(.22, .7, .3, 1); }
.bz-service:hover img.bz-service-photo { transform: scale(1.06); }
/* Fotoğrafsız hizmet: aynı levha, dokulu bir zemin. */
.bz-service-blank {
  display: grid; place-items: center; color: rgba(255, 255, 255, .3);
  background:
    radial-gradient(120% 90% at 30% 0%, color-mix(in srgb, var(--bz, #e9003f) 18%, transparent), transparent 62%),
    linear-gradient(165deg, #1a2029, #0a0d12);
}
/* İstenen gradyan: alt kenarda tam siyah, üst üçte birde tamamen açılır. */
.bz-service-veil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top,
    rgba(0, 0, 0, .94) 0%, rgba(0, 0, 0, .82) 22%,
    rgba(0, 0, 0, .48) 46%, rgba(0, 0, 0, .12) 68%, transparent 88%);
}
.bz-service-copy {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: grid; gap: 6px; padding: 16px 17px 17px; color: #fff;
}
.bz-service-copy small {
  font-size: 11px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase;
  color: rgba(255, 255, 255, .64);
}
.bz-service-copy h3 {
  margin: 0; font-size: 16.5px; font-weight: 700; line-height: 1.25; letter-spacing: -.2px;
  color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .55);
}
.bz-service-copy p {
  margin: 0; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .74);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* app.css'te genel bir `footer` kuralı var (40px dolgu + üst çizgi); kart
   içindeki künye satırı ondan kurtulmalı. */
.bz-service-copy footer {
  display: flex; align-items: baseline; gap: 9px;
  margin-top: 4px; padding: 0; border: 0; color: inherit; font-size: inherit;
}
.bz-service-copy footer b { font-size: 18px; font-weight: 800; letter-spacing: -.4px; font-variant-numeric: tabular-nums; }
.bz-service-copy footer s { font-size: 13px; color: rgba(255, 255, 255, .5); }
/* Kampanya adı kartın üstünde tek renkli bir bayrak — fiyatla yarışmıyor. */
.bz-service-flag {
  position: absolute; left: 13px; top: 13px; z-index: 1;
  padding: 5px 11px; border-radius: 999px;
  background: var(--bz, #e9003f); color: #fff;
  font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .2px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}

/* ---------- Puan tablosu ---------- */
.bz-score-board {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center; gap: 26px;
  padding: 22px 26px; margin-bottom: 16px;
  border: 1px solid var(--mg-line); border-radius: 18px; background: var(--mg-surface);
}
.bz-score-figure { display: grid; gap: 7px; justify-items: start; }
.bz-score-figure b {
  font-size: 46px; font-weight: 800; line-height: 1; letter-spacing: -2px;
  color: var(--mg-text); font-variant-numeric: tabular-nums;
}
.bz-score-figure small { font-size: 13px; color: var(--mg-muted); }
.bz-score-mine {
  display: grid; gap: 8px; justify-items: end; text-align: right;
  padding-left: 26px; border-left: 1px solid var(--mg-line);
}
.bz-score-mine > b { font-size: 14px; font-weight: 700; color: var(--mg-text); }
.bz-score-mine small { font-size: 12.5px; color: var(--mg-faint); }
.bz-score-board .bz-rate-stars { margin: 0; }
@media (max-width: 720px) {
  .bz-score-board { grid-template-columns: 1fr; gap: 18px; padding: 20px; }
  .bz-score-mine { justify-items: start; text-align: left; padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--mg-line); width: 100%; }
}

/* Yıldızlar <i> ile çiziliyor: eğik duruyorlardı. */
.bz-star-row, .bz-star-row i, .bz-stat-star, .bz-chip .bz-star { font-style: normal; }
.bz-star-row { display: inline-flex; gap: 3px; letter-spacing: 0; font-size: 18px; color: var(--mg-line-strong); }
.bz-star-row i.full { color: #f0a500; }

/* ---------- Yorum kartı ---------- */
/* Dev tırnak işareti kartın üstünde yüzüyordu; künye metnin altındaydı.
   Kim yazmış önce okunur, sonra ne yazmış. */
.bz-review { display: grid; gap: 12px; padding: 18px 20px; border-radius: 14px; }
.bz-review .bz-quote { display: none; }
.bz-review header {
  display: flex; align-items: center; gap: 11px;
  margin: 0; padding: 0; border: 0;
}
.bz-review header div { display: grid; gap: 2px; min-width: 0; }
.bz-review header b { font-size: 14px; font-weight: 700; color: var(--mg-text); }
.bz-review header small { font-size: 12px; color: var(--mg-faint); }
.bz-review > p { margin: 0; font-size: 14px; line-height: 1.62; color: var(--mg-text); }
/* Yorum kutusu koyu tema renklerine sabitlenmişti; aydınlık temada sayfanın
   ortasında siyah bir şerit gibi duruyordu. */
.bz-review-form {
  gap: 10px; padding: 14px; margin-bottom: 16px;
  border: 1px solid var(--mg-line); border-radius: 16px; background: var(--mg-surface);
}
.bz-review-form input {
  height: 46px; padding: 0 15px; border-radius: 11px;
  border: 1px solid var(--mg-line-strong); background: var(--mg-bg); color: var(--mg-text);
  font-size: 14px;
}
.bz-review-form input::placeholder { color: var(--mg-faint); }
.bz-review-form input:focus { border-color: var(--mg-accent); }
.bz-review-login {
  border: 1px solid var(--mg-line); background: var(--mg-surface); color: var(--mg-muted);
}

/* ============================================================
   63) İŞLETME LİSTESİ — kart bağlantı, onaylı yüzey, harita iğneleri
   Onaylı kartın sol kenarındaki şerit köşe bayrağıyla aynı şeyi iki kez
   söylüyordu. Şerit kalktı; ayrım artık yüzeyin kendisinde: markadan
   gelen ve sağa doğru sönen bir gradyan (iki temada da).
   ============================================================ */
/* Kartın tamamı işletme sayfasına giden bir bağlantı; favori düğmesi onun
   üstünde kalır (yayılmış bağlantı deseni). */
.sp-card-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.sp-card .sp-fav { position: relative; z-index: 2; }
.sp-card:focus-within { border-color: var(--mg-accent); }
.sp-card.is-verified::after { display: none; }
.sp-app .sp-results .sp-card.is-verified {
  border-color: color-mix(in srgb, var(--mg-accent) 32%, var(--mg-line));
  background:
    linear-gradient(106deg,
      color-mix(in srgb, var(--mg-accent) 20%, var(--mg-surface)) 0%,
      color-mix(in srgb, var(--mg-accent) 7%, var(--mg-surface)) 38%,
      var(--mg-surface) 76%);
}
.sp-app .sp-results .sp-card.is-verified:hover {
  border-color: color-mix(in srgb, var(--mg-accent) 60%, var(--mg-line));
  background:
    linear-gradient(106deg,
      color-mix(in srgb, var(--mg-accent) 26%, var(--mg-surface)) 0%,
      color-mix(in srgb, var(--mg-accent) 10%, var(--mg-surface)) 38%,
      var(--mg-surface) 76%);
}
.sp-go { display: grid; place-items: center; }
.sp-card:hover .sp-go { color: var(--mg-accent-ink); }
.sp-selected-actions a.primary { gap: 6px; }

/* Harita iğnesi: yüzü işletmenin amblemi.

   Amblem damlanın içinde küçük, ortada yüzen bir resim gibi duruyordu.
   Artık iğnenin BAŞI amblemin kendisi: yuvarlak kırpılmış, başlığı tam
   dolduran bir görsel. Damla -45° döndürüldüğü için görsel +45° geri
   döndürülüyor — daire döndürmeden etkilenmediği için biçim bozulmuyor,
   yalnızca içerik dik duruyor. Kuyruk marka renginde kalıyor ki nokta
   hâlâ bir harita iğnesi gibi okunsun.

   Amblem büyüdüğü için iğne de bir tık büyüdü (38 → 42px; maps.js'teki
   iconSize/iconAnchor değerleri buna göre). */
.mg-shop-pin { position: relative; overflow: hidden; box-sizing: border-box; }
/* `--pin-face` = damlanın iç ölçüsü (dış boy eksi kenarlık). Amblem yüzdeyle
   değil bu değerle ölçülüyor: damla `grid` ve tek örtük satırı `auto`
   olduğu için `width:100%` döngüsel kalıyor, tarayıcı onu `auto`ya düşürüp
   görseli kendi doğal boyunda (96px) çiziyordu — iğneden taşıyordu. */
.mg-shop-pin-wrap:not(.is-quiet) .mg-shop-pin { width: 42px; height: 42px; --pin-face: 36px; }
/* Mutlak konumlandırma yok: damla zaten `place-items:center` bir ızgara,
   görsel de onun içinde %100 ile tam oturuyor. (Mutlak konumdayken
   `width:100%` bu bağlamda 0'a çözülüyordu.) */
.mg-shop-pin.has-logo img {
  width: var(--pin-face, 36px); height: var(--pin-face, 36px);
  max-width: none; max-height: none; margin: 0; padding: 0; display: block;
  object-fit: cover; object-position: center; border-radius: 50%;
  transform: rotate(45deg); transform-origin: center;
}
/* Doğrulanmamış işletme bir tık küçük ve soluk; onaylı noktalar önde. */
.mg-shop-pin-wrap.is-quiet .mg-shop-pin { width: 36px; height: 36px; border-width: 2px; --pin-face: 32px; opacity: .62; }
.mg-shop-pin-wrap.is-quiet .mg-shop-pin:hover { opacity: 1; }
.mg-shop-pin-wrap.is-active .mg-shop-pin { box-shadow: 0 0 0 4px color-mix(in srgb, var(--mg-accent) 45%, transparent), 0 7px 22px rgba(0, 0, 0, .7); }

/* ============================================================
   64) KABUK HİZASI — mağazalar ve ana sayfa aynı eksende
   `.sp-layout` kendi 1560px'ine oturuyordu; diğer sayfalar 1444px.
   Fark ekranın ortasında ikiye bölününce sol menü mağazalarda ~58px
   sola kayıyordu. Tüm kabuklar artık aynı değişkeni okuyor.
   ============================================================ */
@media (min-width: 1160px) {
  .sp-layout {
    width: min(var(--app-shell-width, 1444px), 100%);
    max-width: var(--app-shell-width, 1444px);
    margin-inline: auto;
    grid-template-columns: var(--app-drawer-width, 284px) minmax(0, var(--app-rail-width, 392px)) minmax(0, 1fr);
    justify-content: stretch;
  }
  .sp-layout > .social-sidebar {
    box-sizing: border-box;
    width: var(--app-drawer-width, 284px);
    min-width: var(--app-drawer-width, 284px);
  }
  /* Ana sayfanın kolonları tam olarak kabuk genişliğini doldurur; ortadaki
     sütun `1fr` olduğu için 1444px'in tamamı kullanılır ve sol kenar
     forum/mağaza kabuklarıyla aynı noktadan başlar. */
  .social-container {
    max-width: var(--app-shell-width, 1444px);
    grid-template-columns: var(--app-drawer-width, 284px) minmax(0, 1fr) var(--app-rail-width, 392px);
    justify-content: stretch;
  }
}
@media (min-width: 1101px) and (max-width: 1420px) {
  .sp-layout { grid-template-columns: var(--app-drawer-width, 284px) minmax(0, .85fr) minmax(0, 1.15fr); }
}

/* ============================================================
   65) İŞLETME KÜNYESİ — gönderi, hikâye ve Nitro
   Gönderiyi bir işletme paylaştıysa (ShopId dolu) künye üyeyi değil
   işletmeyi gösterir ve işletme sayfasına gider. Kurumsal amblem
   yuvarlak değil köşeli: portre değil, logo.
   ============================================================ */
.ub-shop-mark {
  flex: none; display: grid; place-items: center; overflow: hidden;
  width: var(--ub-mark, 42px); height: var(--ub-mark, 42px);
  border: 1px solid var(--mg-line-strong); border-radius: 10px;
  background: var(--mg-surface-2); color: var(--mg-faint);
  transition: border-color .15s ease;
}
.ub-shop-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.user-badge.is-shop:hover .ub-shop-mark { border-color: var(--mg-accent); }
.user-badge.is-shop .ub-names b .mg-icon { color: var(--mg-accent); }
.user-badge.is-shop .ub-names small {
  font-weight: 700; letter-spacing: .2px; color: var(--mg-accent-ink);
}
/* İşletme gönderisi köşeli: akıştaki üye kartından ayrışsın. */
.post-card.from-shop { border-radius: 6px; }
.post-card.from-shop .post-media, .post-card.from-shop .media-art { border-radius: 6px; }

/* Nitro'da künye video üstünde: aynı köşeli amblem, beyaz metin. */
.feature-author .fa-shop { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; color: #fff; text-decoration: none; }
.feature-author .fa-shop-mark {
  flex: none; width: 42px; height: 42px; display: grid; place-items: center; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .45); border-radius: 10px;
  background: rgba(8, 11, 15, .5); color: #fff; backdrop-filter: blur(6px);
}
.feature-author .fa-shop-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feature-author .fa-shop:hover .fa-shop-mark { border-color: #fff; }
.feature-author .fa-shop .fa-names small { color: rgba(255, 255, 255, .82); font-weight: 700; letter-spacing: .2px; }
/* Hikâye çerçevesi işletme yayınında köşeli. */
.story-frame.from-shop { border-radius: 8px; }
.story-frame.from-shop .story-stage { border-radius: 0; }

/* ============================================================
   66) YORUM BEĞENİSİ — kalp beğenir, sayı beğenenleri açar
   Kalp her yorumda kırmızıydı; beğenmediğin bir yorum beğenilmiş
   görünüyordu. Üstelik kalbe basmak beğenmek yerine listeyi açıyordu.
   ============================================================ */
.comment-like-pair { display: inline-flex; align-items: center; gap: 2px; }
.comment-like {
  display: grid; place-items: center; cursor: pointer;
  width: 28px; height: 28px; padding: 0; margin-left: -5px;
  border: 0; border-radius: 8px; background: transparent; color: var(--mg-faint);
  transition: background .13s ease, color .13s ease;
}
.comment-like:hover:not(:disabled) { background: var(--mg-surface-2); color: var(--mg-accent-ink); }
.comment-like.on { color: var(--mg-accent); }
.comment-like:disabled { cursor: default; opacity: .6; }
/* Sayı nötr: beğeni durumunu kalp taşıyor. */
.comment-likes { margin-left: 0; color: var(--mg-muted); }
.comment-likes:hover { color: var(--mg-text); }

/* ============================================================
   67) KULÜP — kompakt tartışma düğmesi, yönetici ayrılamaz
   ============================================================ */
.disc-compose { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.disc-compose.is-open { display: block; }
button.disc-compose-open {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 14px; border: 0; border-radius: 9px;
  background: var(--mg-accent); color: #fff;
  font-size: 13px; font-weight: 700; letter-spacing: -.1px;
}
button.disc-compose-open:hover { filter: brightness(1.07); border-color: transparent; color: #fff; }
/* Yöneticisi olduğun kulüpten ayrılamazsın: düğme rolü söyleyen bir etiket. */
.join-button.owner {
  background: var(--mg-surface-2); border: 1px solid var(--mg-line-strong);
  color: var(--mg-muted); cursor: default; opacity: 1;
}

/* ============================================================
   68) UYGULAMA KAPISI — mağaza bağlantıları iki temada da okunur
   Ters renkli düğmede alt satır %66 saydamdı ve kayboluyordu.
   Düğme artık kendi yüzeyinde: net kenar, tam kontrastlı metin.
   ============================================================ */
.app-gate-store {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 15px; border-radius: 12px;
  border: 1px solid var(--mg-line-strong);
  background: var(--mg-surface-2); color: var(--mg-text);
}
.app-gate-store:hover {
  border-color: var(--mg-accent); background: var(--mg-accent-soft); color: var(--mg-text);
}
.app-gate-store span { flex: 1; min-width: 0; }
.app-gate-store small { font-size: 11.5px; font-weight: 600; color: var(--mg-muted); }
.app-gate-store b { font-size: 14.5px; font-weight: 700; color: var(--mg-text); }
.app-gate-store > .mg-icon:first-child { color: var(--mg-text); flex: none; }
.app-gate-store > .mg-icon:last-child { color: var(--mg-faint); flex: none; }
.app-gate-store:hover > .mg-icon:last-child { color: var(--mg-accent-ink); }
.app-gate p { color: var(--mg-muted); opacity: 1; }

/* ============================================================
   69) NITRO — beğenilmemiş kalp kırmızı görünmesin
   nitro-reference.css kalbi durumdan bağımsız kırmızı çiziyordu.
   Kalp yalnızca sen beğendiysen doluyor.
   ============================================================ */
.nitro-feature > nav > button.n-like i { color: #fff; }
.nitro-feature > nav > button.n-like.on i { background: var(--mg-accent); border-color: var(--mg-accent); color: #fff; }
.nitro-feature > nav > button.n-like:disabled { opacity: .7; }

/* ============================================================
   70) GİRİŞ SAYFASI — düz ve kurumsal üst kontrol
   Camsı kutu, bulanıklık ve pembe dolgulu dil düğmesi tanıtım
   görselinin üstünde bir uygulama parçası gibi duruyordu. Tek
   çerçeve, düz yüzey, seçili dil nötr bir dolguyla.
   ============================================================ */
html .auth-page .auth-toolbar {
  top: 20px; right: 24px; gap: 8px; padding: 5px;
  border-radius: 10px; border: 1px solid var(--mg-line-strong);
  background: var(--mg-surface); color: var(--mg-text);
  backdrop-filter: none; box-shadow: none;
}
html .auth-page .auth-toolbar .lang-switch {
  display: flex; align-items: center; gap: 3px; padding: 0;
  border: 0; background: transparent;
}
html .auth-page .auth-toolbar .lang-switch::after { display: none; }
html .auth-page .auth-toolbar .lang-switch button {
  min-width: 40px; height: 34px; padding: 0 10px;
  border: 0; border-radius: 6px; background: transparent; color: var(--mg-muted);
  font-size: 12px; font-weight: 700; letter-spacing: .3px; box-shadow: none;
}
html .auth-page .auth-toolbar .lang-switch button:hover:not(.active) {
  background: var(--mg-surface-2); color: var(--mg-text);
}
html .auth-page .auth-toolbar .lang-switch button.active {
  background: var(--mg-surface-2); color: var(--mg-text);
  box-shadow: inset 0 0 0 1px var(--mg-line-strong);
}
html .auth-page .auth-toolbar .top-action {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 34px; margin: 0; padding: 0 0 0 6px;
  border: 0; border-left: 1px solid var(--mg-line); border-radius: 0;
  background: transparent; color: var(--mg-muted);
}
html .auth-page .auth-toolbar .top-action:hover {
  background: var(--mg-surface-2) !important; color: var(--mg-text);
}
html .auth-page .auth-toolbar button:focus-visible {
  outline: 2px solid var(--mg-accent-ink); outline-offset: 2px;
}
@media (max-width: 560px) {
  html .auth-page .auth-toolbar { top: 12px; right: 12px; }
}
/* ============================================================
   71) YATAY ÇİP ŞERİTLERİ — sağa kaydırma
   Kaydırma çubuğu gizliydi; fareyle sağa gitmenin yolu yoktu.
   Şerit artık dikey tekerleği yatay kaydırmaya çeviriyor (hscroll.js)
   ve iki ucunda ok düğmesi var. Solma maskesi yalnızca o yönde
   içerik kaldığında görünüyor.
   ============================================================ */
.chip-strip { display: flex; align-items: center; gap: 6px; margin-top: 16px; }
.chip-strip .category-chips { flex: 1; min-width: 0; margin-top: 0; }
.chip-nav {
  flex: none; display: grid; place-items: center; cursor: pointer;
  width: 30px; height: 30px; border-radius: 9px;
  border: 1px solid var(--mg-line); background: var(--mg-surface); color: var(--mg-muted);
  transition: border-color .14s ease, color .14s ease;
}
.chip-nav:hover { border-color: var(--mg-line-strong); color: var(--mg-text); }
@media (max-width: 760px) { .chip-nav { display: none; } }

/* Maske iki uçta da çalışsın ve yalnızca o yönde içerik varsa görünsün. */
.sp-cats, .category-chips { -webkit-mask-image: none; mask-image: none; }
.sp-cats.can-end, .category-chips.can-end {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
}
.sp-cats.can-start, .category-chips.can-start {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 34px), transparent 100%);
  mask-image: linear-gradient(to left, #000 calc(100% - 34px), transparent 100%);
}
.sp-cats.can-start.can-end, .category-chips.can-start.can-end {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
}

/* ============================================================
   72) İŞLETME SAYFASI — bölüm ritmi, ziyaret kolonu, saatler

   Sayfanın yapısı çizgiyle anlatılıyor: her bölüm başlığının altında
   ince bir kural var. Süs değil, sınır — atölye panosunun kendi dili.
   Boldluk tek bir yerde harcanıyor (künye şeridi, §54); geri kalan her
   şey sessiz duruyor.
   ============================================================ */
.bz-section { padding: 62px 0; }
.bz-title {
  align-items: flex-end; gap: 24px; margin-bottom: 26px;
  padding-bottom: 18px; border-bottom: 1px solid var(--mg-line);
}
.bz-title h2 {
  margin: 9px 0 0; font-size: clamp(23px, 2.6vw, 31px);
  font-weight: 800; letter-spacing: -1px; line-height: 1.15; color: var(--mg-text);
}
.bz-kicker { font-size: 11.5px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }
.bz-title > div > p, .bz-title > p { font-size: 13.5px; color: var(--mg-faint); font-variant-numeric: tabular-nums; }

/* Küçük amblem kutusu da kırpmıyor: geniş yazı markaları `cover` ile
   ortadan kesiliyordu. */
.bz-brand-logo img, .bz-footer-brand .bz-brand-logo img {
  width: 100%; height: 100%; object-fit: contain; padding: 5px;
}

/* ---------- Konum: harita solda, ziyaret bilgisi sağda ---------- */
.bz-location-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.bz-map { min-height: 420px; height: 100%; border-radius: 16px; overflow: hidden; border: 1px solid var(--mg-line); }
.bz-visit { display: grid; gap: 14px; align-content: start; min-width: 0; }
.bz-contact { padding: 20px 22px; gap: 13px; }
.bz-contact h3 { display: none; }
.bz-contact-row { font-size: 14px; }
.bz-contact-row a { color: var(--mg-text); font-weight: 700; text-decoration: none; }
.bz-contact-row a:hover { color: var(--bz, #e9003f); }
.bz-contact .bz-button { justify-self: start; margin-top: 3px; }

/* Çalışma saatleri kapıdaki tabela gibi: günler alt alta, bugün işaretli. */
.bz-hours {
  display: block; padding: 4px 20px 12px; margin: 0;
  border: 1px solid var(--mg-line); border-radius: 16px; background: var(--mg-surface);
}
.bz-hours-title {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 0 11px; border-bottom: 1px solid var(--mg-line);
  font-size: 11.5px; font-weight: 800; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--mg-faint);
}
.bz-hours-title .mg-icon { color: var(--bz, #e9003f); }
.bz-hours-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 9px 0; border-bottom: 1px solid var(--mg-line);
  font-size: 14px; color: var(--mg-muted);
}
.bz-hours-row:last-child { border-bottom: 0; }
.bz-hours-row em { font-style: normal; color: var(--mg-text); font-variant-numeric: tabular-nums; }
.bz-hours-row.closed em { color: var(--mg-faint); }
.bz-hours-row.today { color: var(--mg-text); font-weight: 700; }
.bz-hours-row.today span::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 6px; height: 6px; margin-right: 9px; border-radius: 50%;
  background: var(--bz, #e9003f);
}
.bz-hours-row.today em { font-weight: 800; }
@media (max-width: 900px) {
  .bz-location-grid { grid-template-columns: 1fr; }
  .bz-map { min-height: 300px; }
}

/* ---------- Kapanış şeridi: sayfanın tek tam renk anı ---------- */
.bz-cta { border-radius: 20px; padding: 44px 46px; }
.bz-cta-kicker { font-size: 11.5px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: rgba(255, 255, 255, .82); }
.bz-cta h2 { margin: 10px 0 0; font-size: clamp(25px, 3vw, 34px); font-weight: 800; letter-spacing: -1px; color: #fff; }
.bz-cta p { margin: 9px 0 0; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .84); max-width: 46ch; }
.bz-cta .bz-button.big { font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .bz-cta { padding: 30px 24px; } }

/* ---------- 72.1 Ölçü düzeltmeleri ---------- */
/* Puan levhasında ayraç, rakamın hemen ardında dursun: ortada boşluk
   kalıyordu. */
.bz-score-board { grid-template-columns: max-content minmax(0, 1fr); }
@media (max-width: 720px) { .bz-score-board { grid-template-columns: 1fr; } }
/* Tek yorum varken kart fazla dardı. */
.bz-review-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
/* Yan levha künye şeridiyle yarışmasın: marka tonu bir ton geri çekildi. */
.bz-showcase {
  background:
    radial-gradient(120% 100% at 78% 0%, color-mix(in srgb, var(--bz, #e9003f) 12%, transparent), transparent 68%),
    linear-gradient(160deg, var(--mg-surface), var(--mg-surface-2));
}
/* Puansız işletmede rakam yerine davet cümlesi duruyor. */
.bz-score-figure b.quiet { font-size: 20px; font-weight: 700; letter-spacing: -.4px; color: var(--mg-muted); }
/* Ziyaret kolonu haritayla aynı boyu tutuyor: kısa bir kartın altında
   yarım sütun boşluk kalmıyor. */
.bz-visit { align-content: stretch; }
.bz-contact { align-content: start; }
/* shop-site.css saatleri yedi küçük kutu olarak çiziyordu (`.bz-hours span`
   ve `.bz-hours b`); satır düzeninde o kutu kalıntıları temizleniyor. */
.bz-hours .bz-hours-row span {
  display: inline; padding: 0; border: 0; border-radius: 0;
  background: none; text-align: left; gap: 0; color: inherit; font-size: inherit;
}
.bz-hours .bz-hours-title { font-size: 11.5px; }
/* Koyu temada levha zeminle aynı tona düşüyordu: marka ışığı ve doku bir
   tık güçlendirildi, amblem boşlukta durmasın. */
html:not([data-theme="light"]) .bz-showcase {
  background:
    radial-gradient(120% 100% at 78% 0%, color-mix(in srgb, var(--bz, #e9003f) 26%, transparent), transparent 66%),
    linear-gradient(160deg, var(--mg-surface-2), var(--mg-surface));
}
.bz-showcase.is-mark::before { opacity: .18; }
/* Saatleri olmayan işletmede harita ile künye kartı arasındaki boy farkı
   büyüyordu; haritanın tabanı bir tık alçaldı. */
.bz-map { min-height: 360px; }

/* ---------- 72.2 Ölçü düzeltmeleri (ikinci geçiş) ---------- */
/* Puan levhasında iki blok sayfanın iki ucuna itilmişti; ortada bir boşluk
   kalıyordu. Bloklar artık ayracın iki yanında yan yana, boşluk sağ uçta. */
.bz-score-mine {
  justify-items: start; text-align: left;
  padding-left: 26px; border-left: 1px solid var(--mg-line);
}
/* Tek yorum bir sütuna sıkışmasın: masaüstünde en fazla iki kolon. */
.bz-review-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
/* Kimlik kolonu bir tık geniş: dört eylem düğmesi tek satıra sığıyor. */
@media (min-width: 1180px) {
  .bz-hero-actions .bz-button.lg { padding: 0 18px; }
}

/* ============================================================
   73) İŞLETME SAYFASI — kampanyalar
   Kampanya bir katalog kalemi değil, süreli bir teklif. Bu yüzden
   hizmet levhalarının ızgarasını taklit etmiyor: yatay bir şerit —
   solda fotoğraf, sağda indirim etiketi, ad, tarih ve tek bir eylem.
   Fark rastlantı değil, içeriğin kendisinden geliyor.
   ============================================================ */
.bz-campaigns { background: transparent; border-block: 0; }
.bz-campaign-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 14px; }
.bz-campaign {
  display: grid; grid-template-columns: 164px minmax(0, 1fr);
  align-items: stretch; overflow: hidden; transform: none;
  border: 1px solid var(--mg-line); border-radius: 16px; background: var(--mg-surface);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.bz-campaign:hover {
  transform: none;
  border-color: color-mix(in srgb, var(--bz, #e9003f) 45%, var(--mg-line));
  box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
}
.bz-campaign > img { width: 100%; height: 100%; min-height: 150px; object-fit: cover; display: block; }
/* Fotoğrafsız kampanyada şerit tek kolona düşer. */
.bz-campaign:not(:has(> img)) { grid-template-columns: minmax(0, 1fr); }
.bz-campaign-body { display: grid; gap: 8px; align-content: start; padding: 16px 18px 17px; }
.bz-campaign-tag {
  justify-self: start; padding: 5px 12px; border-radius: 999px;
  background: var(--bz, #e9003f); color: #fff; box-shadow: none;
  font-size: 11.5px; font-weight: 800; letter-spacing: .3px;
}
.bz-campaign h3 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.4px; color: var(--mg-text); }
.bz-campaign p {
  margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--mg-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bz-campaign small {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--mg-faint); font-variant-numeric: tabular-nums;
}
.bz-campaign small .mg-icon { color: var(--bz, #e9003f); flex: none; }
.bz-campaign-cta {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 2px;
  font-size: 13px; font-weight: 700; color: var(--mg-accent-ink); text-decoration: none;
}
.bz-campaign-cta .mg-icon { transition: transform .16s ease; }
.bz-campaign-cta:hover .mg-icon { transform: translateX(3px); }
@media (max-width: 560px) {
  .bz-campaign { grid-template-columns: minmax(0, 1fr); }
  .bz-campaign > img { height: 160px; min-height: 0; }
}

/* ---------- 72.3 Uzun işletme adı ---------- */
/* Başlık esnek bir satırdı; ad iki satıra taştığında doğrulama işareti
   tek başına üçüncü satıra düşüyordu. İşaret artık metnin akışında,
   son sözcüğe yapışık. */
.bz-intro-id h1 { display: block; }
.bz-verified { display: inline-grid; vertical-align: middle; margin-left: 10px; }
/* Amblemi de kapağı da olmayan işletmede kategori ikonu levhada kaybolmasın. */
.bz-showcase > .mg-icon { width: 76px; height: 76px; }

/* ============================================================
   74) İŞLETME SAYFASI — gezinme, odak ve hareket
   Tek sayfalık bir sitede menü nerede olunduğunu söylemeli. Yeni bir
   gösterge eklenmiyor: üzerine gelince beliren alt çizgi, okunan
   bölümde kalıcı oluyor (shop-site.js).
   ============================================================ */
.bz-nav a.is-current { color: var(--mg-text); }
.bz-nav a.is-current::after { transform: scaleX(1); }
html[data-theme="light"] .bz-nav a.is-current { color: var(--mg-text); }

/* Klavye odağı bu sayfada hiç görünmüyordu: polish.css'teki odak halkası
   yalnızca uygulama kabuklarını kapsıyor, mikro siteyi değil. */
.bz-site :is(a, button, input):not([tabindex="-1"]):focus-visible {
  outline: 2px solid var(--bz, #e9003f);
  outline-offset: 3px;
  border-radius: 8px;
}

/* "Hareketi azalt" tercihi: kartların kalkması ve fotoğraf yakınlaşması
   kapanır, sayfa yerinde durur. */
@media (prefers-reduced-motion: reduce) {
  .bz-site *, .bz-site *::before, .bz-site *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .bz-service:hover, .bz-campaign:hover { transform: none; }
  .bz-service:hover img.bz-service-photo { transform: none; }
}

/* Şeritte doğrulama satırı kalktığında tema düğmesi sağda kalsın. */
.bz-topstrip .bz-theme { margin-left: auto; }

/* Profilde yalnızca bu kullanıcının yayımlanan blog yazıları. */
.profile-tabs { overflow-x: auto; overflow-y: hidden; gap: 0; scrollbar-width: thin; }
.profile-tabs > button { flex: 1 0 auto; padding-inline: 12px; white-space: nowrap; }
.profile-blog-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin: 22px 0 18px;
}
.profile-blog-head h2 { margin: 0; font-size: 19px; }
.profile-blog-head small { display: block; margin-top: 4px; font-size: 13px; color: var(--mg-muted); }
.profile-blog-head .blogs-write { flex: none; }
.profile-blog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.profile-blog-card {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border: 1px solid var(--mg-line); border-radius: 14px;
  background: var(--mg-surface); color: var(--mg-text); text-decoration: none;
  transition: border-color .16s ease;
}
.profile-blog-card:hover { border-color: var(--mg-line-strong); color: var(--mg-text); }
.profile-blog-card:focus-visible { outline: 2px solid var(--mg-accent-ink); outline-offset: 3px; }
.profile-blog-cover {
  display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--mg-surface-2); color: var(--mg-faint);
}
.profile-blog-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.profile-blog-copy { display: flex; flex-direction: column; flex: 1; gap: 10px; padding: 18px; min-width: 0; }
.profile-blog-copy time { font-size: 12px; color: var(--mg-muted); }
.profile-blog-copy h3 {
  margin: 0; font-size: 19px; line-height: 1.3; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.profile-blog-copy p {
  margin: 0 0 8px; font-size: 14px; line-height: 1.6; color: var(--mg-muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.profile-blog-copy footer {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: auto;
}
.profile-blog-copy footer span, .profile-blog-copy footer b {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--mg-muted);
}
.profile-blog-copy footer b { margin-left: auto; font-weight: 700; color: var(--mg-accent-ink); }
@media (max-width: 560px) {
  .profile-blog-grid { grid-template-columns: minmax(0, 1fr); }
  .profile-blog-head { align-items: start; flex-wrap: wrap; }
}

/* Mağazalar sayfasındaki kategori şeridi de forumdaki gibi oklu. Şerit
   `.sp-list` içinde (flex kolon, gap:12px) durduğu için kendi üst boşluğunu
   eklemiyor. */
.chip-strip > .category-chips, .chip-strip > .sp-cats { flex: 1; min-width: 0; margin-top: 0; }
.sp-list > .chip-strip { margin-top: 0; }
/* Gidilecek yer kalmadıysa ok sönük ve tıklanamaz: hscroll.js şeride
   `can-start`/`can-end` yazıyor, oklar onu okuyor. Şerit hiç taşmıyorsa
   ikisi birden söner. */
.chip-strip:has(> [data-hscroll]:not(.can-start)) > .chip-nav.prev,
.chip-strip:has(> [data-hscroll]:not(.can-end)) > .chip-nav.next {
  opacity: .3; pointer-events: none;
}

/* ============================================================
   75) BİLDİRİMLER — aydınlık temada okunabilirlik
   notifications.css renkleri koyu temaya sabitlemiş (#98a3ad, #89949e,
   #8f9aa5, #aab3bc). Aydınlık zeminde bunlar 2,3–2,7:1 kontrasta düşüyor
   ve okunmuyordu; boş durum başlığı neredeyse görünmezdi.

   theme.css `b`/`strong` etiketlerini `color: inherit` yapıyor. Bu yüzden
   renk etiketin kendisine değil KAPSAYICISINA veriliyor: kalın kısım
   ondan miras alıyor, ikincil metin ayrıca soluklaştırılıyor.
   ============================================================ */
.notification-empty { color: var(--mg-text); }
.notification-empty small { color: var(--mg-muted); }
.notifications-title p { color: var(--mg-muted); }
.notification-tabs button { color: var(--mg-muted); }
.notification-tabs button:hover { color: var(--mg-text); }
.notification-tabs .active { color: var(--mg-text); }
/* Künye: kimin yaptığı koyu, ne yaptığı soluk. */
.notification-item .notification-text { color: var(--mg-text); }
.notification-item .notification-text > span { color: var(--mg-muted); }
.notifications-title button {
  color: var(--mg-accent-ink);
  border-color: color-mix(in srgb, var(--mg-accent) 40%, var(--mg-line));
}
.notifications-title button:hover:not(:disabled) { background: var(--mg-accent-soft); }

/* ============================================================
   76) İŞLETME SAYFASI — hizmet kartı düzeltmeleri

   Gerçek veriyle bakınca kart üç yerden bozuluyordu:
   1) Perde çok ağırdı (altta .94, ortada .48). Ürün fotoğrafları zaten
      koyu olduğu için kartlar simsiyah bir kutuya dönüşüyordu.
   2) Kategori satırı BÜTÜN kategorileri büyük harf basıyordu; bazı
      işletmeler bir ürüne yedi kategori işaretliyor ve o liste kartın
      üçte birini yiyordu. Artık yalnızca ilk kategori, tek satır.
   3) Karta tıklayınca hiçbir şey olmuyordu; açıklama iki satıra
      kırpıldığı için kartta okunamayan metin kalıyordu.
   Kart artık düğme: ayrıntı kutusunu açıyor.
   ============================================================ */
.bz-service {
  /* 4/5 fazla dikeydi; ürün ızgarasında 4/3 hem fotoğrafı hem satırı
     daha iyi okutuyor. */
  aspect-ratio: 4 / 3;
  /* <button> sıfırlaması */
  padding: 0; text-align: left; font: inherit; color: inherit; cursor: pointer;
  appearance: none; -webkit-appearance: none;
}
.bz-service:focus-visible { outline: 2px solid var(--bz, #e9003f); outline-offset: 3px; }

/* Perde yalnızca alt üçte biri kapatıyor; fotoğrafın kendisi görünür kalıyor. */
.bz-service-veil {
  background: linear-gradient(to top,
    rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .62) 26%,
    rgba(0, 0, 0, .18) 52%, transparent 72%);
}
.bz-service-copy { gap: 4px; padding: 14px 16px 15px; }
/* Kategori tek satır: taşarsa üç nokta. */
.bz-service-copy small {
  display: block; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 10.5px; letter-spacing: 1.1px; color: rgba(255, 255, 255, .6);
}
.bz-service-copy h3 {
  font-size: 15.5px; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bz-service-copy p { font-size: 12.5px; -webkit-line-clamp: 2; }
.bz-service-copy footer b { font-size: 17px; }

/* ---------- Hizmet ayrıntısı ---------- */
.bz-item-modal {
  position: relative; width: min(680px, 100%); max-height: 88vh;
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  padding: 0; overflow: hidden; border-radius: 18px;
  background: var(--mg-surface); border: 1px solid var(--mg-line);
}
.bz-item-close {
  position: absolute; right: 12px; top: 12px; z-index: 2;
  width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: 50%;
  background: rgba(8, 11, 15, .62); color: #fff; backdrop-filter: blur(6px);
}
.bz-item-close:hover { background: rgba(8, 11, 15, .85); }
/* Fotoğraf kırpılmıyor: ürünün kenarı kesilmesin diye `contain`. */
.bz-item-photo {
  display: grid; place-items: center; max-height: 46vh; padding: 14px;
  background: linear-gradient(160deg, #12161d, #0a0d12);
}
.bz-item-photo img { max-width: 100%; max-height: 42vh; object-fit: contain; display: block; border-radius: 10px; }
.bz-item-body { display: grid; gap: 12px; align-content: start; padding: 20px 22px 22px; overflow-y: auto; }
.bz-item-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.bz-item-cats span {
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--mg-line-strong); background: var(--mg-surface-2);
  font-size: 12px; font-weight: 600; color: var(--mg-muted);
}
.bz-item-body h3 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.5px; line-height: 1.25; color: var(--mg-text); }
.bz-item-body p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--mg-muted); white-space: pre-line; }
.bz-item-body footer {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 0; border: 0; margin-top: 2px;
}
.bz-item-body footer b { font-size: 26px; font-weight: 800; letter-spacing: -1px; color: var(--mg-text); font-variant-numeric: tabular-nums; }
.bz-item-body footer s { font-size: 15px; color: var(--mg-faint); }
.bz-item-body footer em {
  font-style: normal; font-size: 12px; font-weight: 800; letter-spacing: .4px;
  padding: 5px 11px; border-radius: 999px; background: var(--bz, #e9003f); color: #fff;
}
.bz-item-body .bz-button { justify-self: start; margin-top: 2px; }
@media (max-width: 620px) {
  .bz-item-photo { max-height: 38vh; }
  .bz-item-photo img { max-height: 34vh; }
  .bz-item-body { padding: 16px 16px 18px; }
  .bz-item-body h3 { font-size: 18px; }
}

/* ============================================================
   77) FAVORİLER — profildeki işletmeler ve araçtaki modifiyeler
   Tek bileşen iki yerde: profil garaj sekmesinde araçların üstünde
   (kullanıcı kapsamı) ve araç detayında (araç kapsamı). Kartlar
   listenin kendi ritmine uyuyor; düzenleme düğmeleri yalnızca sahibine
   çiziliyor ve satırın sağ ucunda duruyor.
   ============================================================ */
.fav-board { display: grid; gap: 14px; margin-bottom: 26px; }
.fav-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.fav-head h3 {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: 17px; font-weight: 800; letter-spacing: -.3px; color: var(--mg-text);
}
.fav-head h3 .mg-icon { color: var(--mg-accent); }
.fav-head small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--mg-faint); }
.fav-add {
  display: inline-flex; align-items: center; gap: 7px; flex: none; cursor: pointer;
  height: 34px; padding: 0 14px; border: 0; border-radius: 9px;
  background: var(--mg-accent); color: #fff; font-size: 13px; font-weight: 700;
}
.fav-add:hover { filter: brightness(1.07); }

.fav-state {
  display: grid; justify-items: center; gap: 8px; padding: 26px 18px; text-align: center;
  border: 1px solid var(--mg-line); border-radius: 14px; background: var(--mg-surface);
  color: var(--mg-muted);
}
.fav-state b { font-size: 15px; color: var(--mg-text); }
.fav-state small { font-size: 13px; color: var(--mg-muted); max-width: 46ch; }
.fav-state > i { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--mg-surface-2); color: var(--mg-faint); }
.fav-state button:not(.fav-add) {
  margin-top: 4px; padding: 8px 14px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--mg-line-strong); background: transparent; color: var(--mg-text); font-size: 13px;
}
.fav-state .fav-add { margin-top: 4px; }

.fav-grid { display: grid; gap: 10px; }
.fav-card {
  position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: start; gap: 14px; padding: 14px 15px;
  border: 1px solid var(--mg-line); border-radius: 14px; background: var(--mg-surface);
  transition: border-color .15s ease;
}
.fav-card:hover { border-color: var(--mg-line-strong); }
.fav-card-mark {
  width: 52px; height: 52px; flex: none; display: grid; place-items: center; overflow: hidden;
  border: 1px solid var(--mg-line); border-radius: 12px;
  background: var(--mg-surface-2); color: var(--mg-faint);
}
.fav-card-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fav-card-body { min-width: 0; display: grid; gap: 5px; }
.fav-card-cat {
  font-size: 11px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--mg-accent-ink);
}
.fav-card-name {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 15px; font-weight: 700; letter-spacing: -.2px; color: var(--mg-text); text-decoration: none;
}
a.fav-card-name:hover { color: var(--mg-accent-ink); }
a.fav-card-name .mg-icon { color: var(--mg-faint); flex: none; }
.fav-card-body p {
  margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--mg-muted);
  white-space: pre-line; overflow-wrap: anywhere;
}
.fav-card-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 2px; }
.fav-card-meta span, .fav-card-meta a {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--mg-faint); text-decoration: none;
}
.fav-card-meta a { color: var(--mg-muted); font-weight: 600; }
.fav-card-meta a:hover { color: var(--mg-accent-ink); }
.fav-card-shots { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.fav-card-shots img { width: 54px; height: 40px; object-fit: cover; border-radius: 8px; border: 1px solid var(--mg-line); }
.fav-card-shots span { font-size: 12px; font-weight: 700; color: var(--mg-faint); }
.fav-card-actions { display: flex; gap: 4px; align-self: center; }
.fav-card-actions button {
  width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--mg-line); border-radius: 9px;
  background: transparent; color: var(--mg-faint);
  transition: border-color .14s ease, color .14s ease, background .14s ease;
}
.fav-card-actions button:hover { border-color: var(--mg-line-strong); color: var(--mg-text); }
.fav-card-actions button.armed {
  border-color: var(--mg-accent); background: var(--mg-accent); color: #fff;
}
.fav-error {
  display: flex; align-items: center; gap: 8px; margin: 0;
  padding: 10px 13px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--mg-accent) 40%, var(--mg-line));
  background: var(--mg-accent-soft); color: var(--mg-text); font-size: 13px;
}
.fav-error .mg-icon { color: var(--mg-accent-ink); flex: none; }

/* ---------- Ekle / düzenle kutusu ---------- */
.fav-modal {
  width: min(560px, 100%); max-height: 88vh;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: 0; overflow: hidden;
  border-radius: 16px; border: 1px solid var(--mg-line); background: var(--mg-surface);
}
.fav-modal > header, .fav-modal > footer {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 18px; border-bottom: 1px solid var(--mg-line);
}
.fav-modal > footer { border-bottom: 0; border-top: 1px solid var(--mg-line); justify-content: flex-end; }
.fav-modal > header h3 { margin: 0; font-size: 16px; font-weight: 800; color: var(--mg-text); }
.fav-modal > header button {
  width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: 8px; background: transparent; color: var(--mg-faint);
}
.fav-modal > header button:hover { background: var(--mg-surface-2); color: var(--mg-text); }
.fav-form { display: grid; gap: 13px; padding: 18px; overflow-y: auto; }
.fav-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 700; color: var(--mg-text); }
.fav-form label em { font-style: normal; font-weight: 500; color: var(--mg-faint); }
.fav-form input, .fav-form select, .fav-form textarea {
  width: 100%; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--mg-line-strong); background: var(--mg-bg); color: var(--mg-text);
  font: inherit; font-size: 14px; font-weight: 400; outline: none; resize: vertical;
}
.fav-form input:focus, .fav-form select:focus, .fav-form textarea:focus { border-color: var(--mg-accent); }
.fav-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .fav-form-row { grid-template-columns: 1fr; } }

.fav-shop-pick { display: grid; gap: 8px; }
.fav-shop-chosen {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--mg-accent) 35%, var(--mg-line));
  background: var(--mg-accent-soft); font-size: 13.5px; color: var(--mg-text);
}
.fav-shop-chosen .mg-icon { color: var(--mg-accent-ink); flex: none; }
.fav-shop-chosen b { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-shop-chosen button {
  width: 24px; height: 24px; display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: 6px; background: transparent; color: var(--mg-muted);
}
.fav-shop-list { display: grid; gap: 2px; max-height: 210px; overflow-y: auto; }
.fav-shop-list button {
  display: flex; align-items: center; gap: 10px; width: 100%; cursor: pointer; text-align: left;
  padding: 8px 10px; border: 0; border-radius: 10px; background: transparent;
}
.fav-shop-list button:hover { background: var(--mg-surface-2); }
.fav-shop-list button > span {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center; overflow: hidden;
  border: 1px solid var(--mg-line); border-radius: 9px; background: var(--mg-surface-2); color: var(--mg-faint);
}
.fav-shop-list button > span img { width: 100%; height: 100%; object-fit: cover; }
.fav-shop-list button div { min-width: 0; display: grid; }
.fav-shop-list button b { font-size: 13.5px; font-weight: 700; color: var(--mg-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fav-shop-list button small { font-size: 12px; color: var(--mg-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.fav-form-files { display: grid; gap: 9px; }
.fav-file-pick { position: relative; }
.fav-file-pick input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.fav-file-pick > span {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 10px;
  border: 1px dashed var(--mg-line-strong); background: var(--mg-surface-2);
  font-size: 13px; font-weight: 700; color: var(--mg-muted);
}
.fav-file-pick:hover > span { border-color: var(--mg-accent); color: var(--mg-accent-ink); }
.fav-file-list { display: flex; flex-wrap: wrap; gap: 6px; }
.fav-file-list span {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 8px 5px 11px; border-radius: 999px;
  background: var(--mg-surface-2); font-size: 12px; color: var(--mg-muted);
}
.fav-file-list button, .fav-file-existing button {
  width: 20px; height: 20px; display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: 50%; background: transparent; color: var(--mg-faint);
}
.fav-file-list button:hover, .fav-file-existing button:hover { color: var(--mg-accent-ink); }
.fav-file-existing { display: flex; flex-wrap: wrap; gap: 8px; }
.fav-file-existing span { position: relative; }
.fav-file-existing img { width: 62px; height: 46px; object-fit: cover; border-radius: 9px; border: 1px solid var(--mg-line); display: block; }
.fav-file-existing button {
  position: absolute; right: -6px; top: -6px;
  background: var(--mg-surface); border: 1px solid var(--mg-line-strong);
}

.fav-cancel, .fav-save {
  padding: 10px 16px; border-radius: 10px; cursor: pointer; font-size: 13.5px; font-weight: 700;
}
.fav-cancel { border: 1px solid var(--mg-line-strong); background: transparent; color: var(--mg-muted); }
.fav-cancel:hover { color: var(--mg-text); }
.fav-save { border: 0; background: var(--mg-accent); color: #fff; }
.fav-save:hover:not(:disabled) { filter: brightness(1.07); }
.fav-save:disabled, .fav-cancel:disabled { opacity: .5; cursor: default; }

@media (max-width: 620px) {
  .fav-card { grid-template-columns: 44px minmax(0, 1fr); }
  .fav-card-mark { width: 44px; height: 44px; }
  .fav-card-actions { grid-column: 1 / -1; justify-content: flex-end; }
}

/* ============================================================
   78) GÖNDERİ DETAYI — fotoğraf kırpılmıyor
   Akışta 16/10 tek tip kutu doğru: kartlar aynı ritimde durmalı.
   Detayda değil — oraya fotoğrafı GÖRMEK için giriliyor. Dikey bir
   fotoğrafın üstü altı kesiliyordu. Detayda oran fotoğrafın kendi
   oranı, `contain` ile tamamı görünüyor.
   ============================================================ */
.post-detail-card .media-art {
  aspect-ratio: auto; height: auto; max-height: 76vh;
  background: var(--mg-surface-2); display: grid; place-items: center;
}
.post-detail-card .media-art img, .post-detail-card .media-art video {
  aspect-ratio: auto; width: auto; max-width: 100%;
  height: auto; max-height: 76vh; object-fit: contain;
}

/* ============================================================
   79) ÇİFT TIKLA BEĞENİ — lastik
   Kalp yerine lastik: uygulamanın kendi dünyasından bir işaret.
   Ortada büyüyerek dönüyor, sonra sol alttaki kalbe doğru süzülüp
   kayboluyor; kalp aynı anda bir kez atıyor.
   ============================================================ */
.tyre-burst {
  position: absolute; left: 50%; top: 50%; z-index: 4;
  display: grid; place-items: center; pointer-events: none;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .45));
  animation: tyreSpinToHeart .95s cubic-bezier(.32, .7, .32, 1) forwards;
}
@keyframes tyreSpinToHeart {
  0%   { transform: translate(-50%, -50%) scale(.35) rotate(0deg); opacity: 0; }
  18%  { transform: translate(-50%, -50%) scale(1.12) rotate(140deg); opacity: 1; }
  38%  { transform: translate(-50%, -50%) scale(.95) rotate(320deg); opacity: 1; }
  /* Sol alta, kalbin durduğu yöne doğru süzülür ve küçülerek söner. */
  100% { transform: translate(-190%, 165%) scale(.16) rotate(760deg); opacity: 0; }
}
/* Lastik yola çıkınca kalp bir kez atar. */
.post-action.pop { animation: heartCatch .95s ease-out; }
@keyframes heartCatch {
  0%, 62% { transform: scale(1); }
  74%     { transform: scale(1.45); }
  86%     { transform: scale(.92); }
  100%    { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .tyre-burst { animation: tyreFadeOnly .6s ease-out forwards; }
  @keyframes tyreFadeOnly {
    0% { transform: translate(-50%, -50%) scale(.9); opacity: 0; }
    30% { opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
  }
  .post-action.pop { animation: none; }
}

/* ============================================================
   80) İŞLETME SAYFASI — amblemin arkasındaki gri kutu
   Amblem gri bir kutunun içinde duruyordu; şeffaf amblemlerde bu kutu
   markanın parçasıymış gibi görünüyordu. Kutu kalktı, amblem biraz
   büyüdü ve doğrudan zeminde duruyor.
   ============================================================ */
.bz-brand-logo {
  width: 48px; height: 48px; border: 0; background: transparent; border-radius: 10px;
}
.bz-brand-logo img { padding: 0; }
.bz-footer-brand .bz-brand-logo { width: 44px; height: 44px; }
/* Zaman damgası aydınlık temada `--mg-faint` ile 3,07:1'de kalıyordu (AA altı).
   İkincil metin tonuna çekildi. */
.notification-item small { color: var(--mg-muted); }
/* --mg-faint AA için açıldı; bu rozet METİN değil, üstünde beyaz ikon taşıyan
   dekoratif bir zemin. Açılan token ikonu zayıflatacağı için eski tonda sabit. */
.notification-kind.kind-other { background: #6b7480; }
html[data-theme="light"] .notification-kind.kind-other { background: #8a94a1; }

/* ============================================================================
   §81 KONTRAST — ölçülmüş AA hataları
   Denetim: 12 sayfa × 2 tema, alfa harmanlanmış, fotoğraf üstü metin hariç.
   İki kök neden vardı:
   (a) Sabit gri tonlar (#76828c, #78808a, #6f7987, #828d97 …) temaya hiç
       tepki vermiyordu — token'a çevrildiler, artık iki temada da geçiyorlar.
   (b) Vurgu renkleri KOYU tema için seçilmiş; aydınlıkta beyaz üstünde
       kehribar/turuncu okunmuyordu. Ton korunarak koyulaştırıldı.
   ========================================================================= */

/* --- Sabit griler → token (her iki tema) --- */
.xp-event-meta small, .xp-event-meta em,
.xp-club-meta small, .xp-blog-rest small,
.xp-forum-foot small, .gs-head p,
.xp-event-date b, .xp-event-date small,
.app-search kbd, .forum-empty small,
.nav-label { color: var(--mg-muted); }

.xp-biz-copy p { color: var(--mg-muted); }

/* --- Sıralama rozetleri: beyaz metin altın/gümüş üstünde 2,27 ve 2,94 idi.
       Zemin madalya rengi olarak kalıyor, metin koyuya çevrildi (4,87). --- */
/* madalya mürekkebi yukarıda §46 bölgesinde düzeltildi */

/* --- Aydınlık tema: vurgu tonları --- */
html[data-theme="light"] .sp-stars em { color: #947115; }        /* kehribar 1,52 → 4,55 */
html[data-theme="light"] .xp-forum-cat { color: #a45a1f; }       /* turuncu 1,82 → 4,55 */
html[data-theme="light"] .forum-cat em,
html[data-theme="light"] .topic-cat em { color: #a45a1f; }       /* forumdaki aynı etiket */

/* --- Koyu tema: 9-11px vurgu metinleri --- */
html:not([data-theme="light"]) .gs-head span { color: #ff5c7e; } /* 4,29 → daha açık kırmızı */
html:not([data-theme="light"]) .nitro-link strong { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.85); }

/* §82 Kulüp kartları: kaplama bağlantı deseni.
   Kart artık <article>/<div>; bağlantı yüzeyi kaplıyor, etkileşimli çocuklar
   (Katıl düğmesi) z-index ile onun üstünde kalıyor. Böylece kartın tamamı
   tıklanabilir ama "button ⊂ a" geçersizliği ortadan kalkıyor. */
.club-feed-card, .club-rail-row { position: relative; }
.club-card-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.club-card-link:focus-visible { outline: 2px solid var(--mg-accent); outline-offset: 3px; }
/* z-index:0 vermek çocuklarda yeni bir yığın bağlamı açıyor ve içerideki
   Katıl düğmesi oradan yukarı çıkamayıp kaplama bağlantının altında kalıyordu
   (tıklayınca kulübe gidiyordu, katılmıyordu). Çocuklara dokunulmuyor;
   yalnızca etkileşimli öğeler bağlantının üstüne çıkarılıyor. */
.club-feed-card .club-feed-body,
.club-rail-row > *:not(.club-card-link) { position: relative; }
.club-feed-actions, .club-feed-actions .join-button,
.club-rail-row .join-button { position: relative; z-index: 2; }

/* §83 §81'de cascade'i kaybeden kurallar — ölçülen özgüllüklerle yeniden.
   theme.css `html[data-theme="light"] .nav-label` (0,2,1) ve explore-pro.css
   `.xp-event.done .xp-event-meta em` (0,3,0) benim (0,1,x) kurallarımı yeniyordu. */
html[data-theme="light"] .nav-label { color: var(--mg-muted); }
.xp-event.done .xp-event-meta em,
.xp-event .xp-event-meta em { color: var(--mg-muted); }
.xp-biz .xp-biz-copy p, .xp-biz-copy p { color: var(--mg-muted); }

/* Kategori çipi rengi `--cat` ile sayfadan geliyor; sabit bir ton tüm hue'lara
   uymaz. Aydınlıkta hue korunup siyaha doğru karıştırılıyor, zemin de
   biraz daha açılıyor — her kategori için okunur oluyor. */
html[data-theme="light"] .xp-forum-cat {
  color: color-mix(in srgb, var(--cat, #e9003f) 52%, #12161b);
  background: color-mix(in srgb, var(--cat, #e9003f) 9%, #fff);
}

/* Yıldız puanı: beyaz kart üstünde 4,11 kalmıştı, bir tık daha koyu. */
html[data-theme="light"] .sp-stars em { color: #7d5f12; }

/* §84 Kalan üç ölçülmüş hata.
   Forum kategori metni doğrudan `--cat` ile boyanıyor ve kart zemininde
   çıplak duruyor (tint yok) — pembe/turuncu kategoriler aydınlıkta 2,5-3,5.
   Hue korunup siyaha karıştırılıyor; koyu tema dokunulmadan kalıyor. */
html[data-theme="light"] .topic-info em,
html[data-theme="light"] .popular-topics em,
html[data-theme="light"] .cat-icon,
html[data-theme="light"] .popular-thumb {
  color: color-mix(in srgb, var(--cat, #e9003f) 58%, #101418);
}

/* Arama boş durumu: sabit koyu-tema grileri, aydınlıkta 3,07. */
.gs-empty { color: var(--mg-muted); }
.gs-empty b { color: var(--mg-text); }

/* Nitro "Yeni" rozeti: %22 beyaz dolgu üstünde beyaz metin 3,89 idi.
   Marka kırmızısı zemine dönüyor — hem okunur hem rozet gibi duruyor. */
html:not([data-theme="light"]) .social-sidebar nav .nitro-link strong { background: var(--mg-accent); color: #fff; }

/* §85 Kategori renkleri veriden (`--cat`) geliyor; mor/kırmızı gibi koyu
   hue'lar KOYU temada 3,9-4,47'de kalıyordu. Aydınlıkta siyaha, koyuda beyaza
   doğru karıştırılıyor — hue korunuyor, iki tarafta da AA'yı geçiyor. */
html:not([data-theme="light"]) .xp-forum-cat,
html:not([data-theme="light"]) .topic-info em,
html:not([data-theme="light"]) .popular-topics em {
  color: color-mix(in srgb, var(--cat, #e9003f) 70%, #fff);
}
/* Arama kısayolu rozeti: reference.css'teki daha özgül kural token'ı eziyordu. */
.app-topbar .app-search kbd, .app-search kbd { color: var(--mg-muted); }

/* §86 Son iki 9px etiket (aydınlık).
   theme.css bunları (0,3,2) ile boyuyor; aynı özgüllükle ve daha sonra
   yazıldığı için buradaki kural kazanıyor. */
html[data-theme="light"] .social-sidebar .nitro-link strong {
  background: color-mix(in srgb, var(--mg-accent) 13%, #fff);
  color: var(--mg-accent-ink);
}
html[data-theme="light"] .gs-head span { color: var(--mg-accent-ink); }