/* ============================================================
   MyGarage UI Cilası
   1) Tipografi — render kalitesi, ölçek ve okunabilirlik
   2) Kompakt sol menü
   3) Üst bar ince ayarları
   ============================================================ */

/* ---------- 1) Tipografi ---------- */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body {
  font-family: Manrope, 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  letter-spacing: .1px;
}
h1, h2, h3, h4, .brand, .rail-title h3, .settings-heading h1 {
  font-feature-settings: "kern" 1, "liga" 1;
  text-wrap: balance;
}
/* Sayaçlar ve istatistikler hizalı rakam kullanır */
.post-actions button span, .stats-grid strong, .profile-stats b, .nitro-time,
.chat-peer-stats b, .notification b, .trends li > span { font-variant-numeric: tabular-nums; }

/* Okunabilirlik: kritik metinler bir tık büyütüldü */
.app-search input { font-size: 12px; }
.post-card header b { font-size: 12.5px; }
.post-copy { font-size: 12.5px; line-height: 1.66; }
.post-card header small { font-size: 10px; }
.feed-tabs button { font-size: 11.5px; letter-spacing: .2px; }
.feed-filters button { font-size: 10px; }
.story small { font-size: 9px; }
.rail-title h3 { font-size: 12px; letter-spacing: .2px; }
.trends b { font-size: 10.5px; }
.trends small { font-size: 9px; }
.nearby-shop b { font-size: 10px; }
.nearby-shop small, .nearby-shop em { font-size: 8.5px; }
.settings-heading p, .settings-muted { font-size: 12.5px; }
.setting-row small { font-size: 11.5px; }
.turbo-card p { font-size: 10px; }
.user-identity-text b { font-size: 12.5px; }
.mini-user b { font-size: 11.5px; }
.mini-user small { font-size: 9.5px; }

/* Seçim ve klavye odağı marka rengiyle */
::selection { background: rgba(233, 0, 63, .28); color: inherit; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid rgba(233, 0, 63, .55);
  outline-offset: 2px;
  border-radius: 4px;
}

/* İnce, sakin kaydırma çubukları */
* { scrollbar-width: thin; scrollbar-color: #313a44 transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2b333d; border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #3a444f; background-clip: padding-box; }

/* Arama kısayol rozeti */
.app-search kbd {
  margin-left: auto; font: 700 9px/1 Manrope, sans-serif; letter-spacing: .4px;
  background: #1a212a; border: 1px solid #2a323c; border-radius: 5px;
  padding: 4px 6px; color: #8b95a1;
}

/* ---------- 2) Kompakt sol menü ---------- */
.social-sidebar { padding: 14px 10px; }
.social-sidebar nav { gap: 1px; overflow-y: auto; scrollbar-width: none; }
.social-sidebar nav::-webkit-scrollbar { display: none; }
.social-sidebar nav a {
  height: 34px; padding: 0 10px; gap: 10px;
  border-radius: 7px; font-size: 12.5px; font-weight: 600; letter-spacing: .1px;
  color: #8d95a0; transition: background .14s ease, color .14s ease;
}
.social-sidebar nav a i { font-size: 16px; width: 18px; display: grid; place-items: center; }
.social-sidebar nav a .mg-icon { width: 16px; height: 16px; }
.social-sidebar nav a:hover { background: #12181f; color: #e8ebee; }
.social-sidebar nav a.active {
  background: #141a21; color: #fff;
  box-shadow: inset 2px 0 0 #e9003f;
}
.social-sidebar nav a.active .mg-icon { color: #e9003f; }
/* Bölüm etiketleri */
.nav-label {
  display: block; margin: 14px 10px 5px; font-size: 8.5px; font-weight: 800;
  letter-spacing: 1.7px; text-transform: uppercase; color: #58616c;
}
.social-sidebar nav .nav-label:first-child { margin-top: 2px; }
/* Nitro rozetini küçült */
.social-sidebar .nitro-link strong { padding: 2px 7px; font-size: 6.5px; letter-spacing: .5px; }
/* Paylaş butonu */
.create-post-button {
  height: 36px; margin: 12px 6px 0; border-radius: 7px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 12px; letter-spacing: .2px;
  transition: filter .15s ease, transform .15s ease;
}
.create-post-button:hover { filter: brightness(1.08); }
/* Üst kullanıcı kartı — sidebar'ın en üstünde, kenarlara taşar */
.mini-user {
  gap: 10px; padding: 16px 20px;
  margin: -14px -10px 12px;
  border-bottom: 1px solid #1c2229;
}
@media (max-width: 1100px) { .social-sidebar { padding: 12px 8px; } .mini-user { margin: -12px -8px 12px; } }

/* ---------- 3) Üst bar ince ayarları ---------- */
.app-tools { gap: 14px; }
.top-action { width: 32px; height: 32px; border-radius: 8px; }