/* ============================================================
   MyGarage Ana Sayfa — referans ekran tasarımı
   Token bazlı (var(--mg-*)) yazıldı: dark ve light temada çalışır.
   En son yüklenir; reference.css / ui-polish.css kurallarını ezer.
   ============================================================ */

/* ---------- Kabuk genişlikleri (tüm layout'lar bu değişkenleri okur) ---------- */
:root {
  --app-shell-width: 1444px;
  --app-drawer-width: 284px;
  --app-center-width: 768px;
  --app-rail-width: 392px;
}
@media (min-width: 1160px) {
  .social-container {
    width: min(var(--app-shell-width), 100%);
    grid-template-columns: var(--app-drawer-width) minmax(520px, var(--app-center-width)) var(--app-rail-width);
  }
}

/* ---------- Üst bar ---------- */
.app-topbar { border-bottom: 1px solid var(--mg-line); }
.app-logo { border-right: 0; }
.app-search {
  width: 100%; max-width: 640px; height: 42px;
  margin: 0; align-self: center; justify-self: start;
  border-radius: 12px; padding: 0 15px; gap: 10px;
}
.app-search input { font-size: 12.5px; }
.app-tools { border-left: 0; gap: 12px; padding: 0 20px 0 12px; }
.top-icon-group {
  display: flex; align-items: center; gap: 3px;
  padding: 4px; border: 1px solid var(--mg-line); border-radius: 13px;
  background: var(--mg-surface);
}
.top-icon-group .top-action { width: 34px; height: 34px; border-radius: 9px; }
.topbar-account {
  display: flex; align-items: center; gap: 9px;
  padding: 4px 12px 4px 5px; border: 1px solid var(--mg-line); border-radius: 13px;
  background: var(--mg-surface); color: inherit; text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.topbar-account:hover { border-color: var(--mg-line-strong); }
.topbar-account b { font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.topbar-account > .mg-icon { color: var(--mg-faint); flex: none; }
.topbar-account .guest-avatar { width: 34px; height: 34px; border-width: 2px; font-size: 9px; }

/* ---------- Sol menü ----------
   Ölçek tek bir ritme oturur: 12px yatay iç boşluk, 9-12px yarıçap,
   38px satır yüksekliği. Aktif satır pembe zemin yerine nötr yükseltilmiş
   yüzey + ince marka çubuğu kullanır; okunurluk ve ağırlık böyle geliyor. */
.social-sidebar { padding: 16px 14px; border-color: var(--mg-line); }
.side-user-card {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 11px; margin-bottom: 14px;
  border: 1px solid var(--mg-line); border-radius: 12px;
  background: var(--mg-surface); color: inherit;
  transition: border-color .15s ease, background .15s ease;
}
.side-user-card:hover { border-color: var(--mg-line-strong); background: var(--mg-surface-2); }
.side-user-card > .user-identity { flex: none; }
.side-user-card > .side-user-info { display: grid; gap: 3px; min-width: 0; flex: 1; }
.side-user-card b {
  font-size: 15px; font-weight: 700; letter-spacing: -.15px; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.side-user-card small { font-size: 12px; line-height: 1.35; color: var(--mg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-user-card .side-user-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.side-user-card > i { flex: none; }
.side-user-card i { margin-left: auto; color: var(--mg-faint); display: grid; place-items: center; }

.social-sidebar nav { gap: 1px; }
.social-sidebar nav a {
  height: 38px; padding: 0 12px; gap: 11px;
  border-radius: 9px; font-size: 14px; font-weight: 600; letter-spacing: -.1px;
}
.social-sidebar nav a i { width: 19px; }
.social-sidebar nav a .mg-icon { width: 17px; height: 17px; opacity: .95; }
.social-sidebar nav a.active {
  box-shadow: inset 3px 0 0 var(--mg-accent-ink, var(--mg-accent));
  font-weight: 700; letter-spacing: -.1px;
}
.social-sidebar nav a.active .mg-icon { color: var(--mg-accent-ink, var(--mg-accent)); opacity: 1; }

/* Bölüm etiketleri: eskiden 9px/1.7px idi, okunmuyordu. */
.nav-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .8px;
  margin: 18px 12px 5px; color: var(--mg-faint);
}
.social-sidebar nav .nav-label:first-child { margin-top: 2px; }

/* nav ile kapsanıyor: aydınlık temadaki genel ":is(b, strong){color:inherit}"
   kuralı [data-theme] niteliğiyle birlikte daha yüksek özgüllükte kalıyor. */
.social-sidebar nav .nitro-link strong {
  padding: 2px 7px; border: 0; border-radius: 6px;
  font-size: 9px; font-weight: 800; letter-spacing: .2px;
  color: var(--mg-accent-ink, var(--mg-accent)); background: var(--mg-accent-soft);
}

.create-post-button {
  height: 40px; margin: 18px 2px 2px; border-radius: 10px;
  font-size: 13.5px; font-weight: 700; letter-spacing: .1px; gap: 7px;
  background: var(--mg-accent);
}

/* ---------- Akış sütunu ---------- */
.feed-column { border-right: 0; padding: 4px 26px 48px; }

/* Hikayeler bloğu */
.stories-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 2px 0; }
.stories-head h3 { margin: 0; font: 800 15px 'Space Grotesk', Manrope, sans-serif; letter-spacing: -.2px; }
.stories-head button {
  border: 0; background: none; cursor: pointer; padding: 4px 2px;
  color: var(--mg-accent); font: 700 11px Manrope, sans-serif;
}
.stories-head button:hover { text-decoration: underline; }
.stories { height: auto; padding: 12px 2px 4px; gap: 16px; overflow-x: auto; scrollbar-width: none; border: 0; }
.stories::-webkit-scrollbar { display: none; }
.story { width: 82px; min-width: 82px; gap: 4px; }
.story b { display: block; max-width: 100%; font-size: 10.5px; font-weight: 700; color: var(--mg-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.story small { max-width: 100%; font-size: 9px; color: var(--mg-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Sekmeler: tam genişliğe yayılır, aktif kırmızı */
.feed-tabs { display: flex; gap: 0; height: 52px; margin: 6px 0 16px; border-bottom: 1px solid var(--mg-line); }
.feed-tabs button { flex: 1; width: auto; height: 100%; padding: 0; font-size: 12.5px; font-weight: 700; color: var(--mg-faint); }
.feed-tabs button:hover { color: var(--mg-text); }
.feed-tabs button.active { color: var(--mg-accent); }
.feed-tabs button.active:after { left: 16%; right: 16%; height: 2.5px; border-radius: 3px 3px 0 0; background: var(--mg-accent); }

/* Gönderi kartları */
.feed-column .post-card {
  background: var(--mg-surface);
  border: 1px solid var(--mg-line); border-radius: 16px;
  padding: 16px 18px 13px; margin-bottom: 14px;
}
.post-card header { align-items: center; }
.post-header-side { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.post-more {
  width: 32px; height: 32px; border: 0; border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--mg-faint);
  display: grid; place-items: center; transition: background .14s ease, color .14s ease;
}
.post-more:hover { background: var(--mg-surface-2); color: var(--mg-text); }
.post-copy { margin: 12px 0; font-size: 13px; line-height: 1.6; }
.post-media { margin-left: 0; border-radius: 12px; border: 1px solid var(--mg-line); }
.post-actions { margin: 12px 0 0; border-bottom: 0; padding-bottom: 0; }
.post-actions > div { gap: 4px; }
.post-actions button {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 10px; border-radius: 9px; font-size: 17px;
  color: var(--mg-muted); transition: background .14s ease, color .14s ease;
}
.post-actions button:hover { background: var(--mg-surface-2); }
.post-actions button span { font-size: 11px; font-weight: 700; vertical-align: 0; }
.feed-load-more { border-radius: 12px; }

/* ---------- Sağ ray ---------- */
.social-rail { border-left: 0; padding: 20px 4px 40px 22px; }
.social-rail .rail-card {
  background: var(--mg-surface);
  border: 1px solid var(--mg-line); border-radius: 16px;
  padding: 16px; margin: 0 0 14px;
}
.rail-title h3 { font-size: 14px; letter-spacing: -.1px; }
.rail-title a { font-size: 10.5px; font-weight: 700; color: var(--mg-accent); }

/* Trend kullanıcılar ızgarası */
.trend-users-card { padding-bottom: 10px !important; }
.trend-user-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; margin-top: 10px; }
.trend-user {
  position: relative; display: grid; justify-items: center; align-content: start; gap: 3px;
  min-width: 0; text-align: center; padding: 10px 3px 9px;
  border: 0; background: transparent; border-radius: 12px; text-decoration: none;
  transition: background .14s ease;
}
.trend-user:hover { background: var(--mg-surface-2); transform: none; border-color: transparent; }
.trend-avatar-wrap { position: relative; display: inline-grid; }
.trend-user-medal {
  position: absolute; top: -4px; left: -8px; z-index: 2;
  width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 9.5px; font-weight: 900; color: #fff;
  border: 2px solid var(--mg-surface);
}
.trend-user-medal.m-1 { background: #efa400; }
.trend-user-medal.m-2 { background: #93a1af; }
.trend-user-medal.m-3 { background: #d0703c; }
.trend-user b { display: block; width: 100%; margin-top: 4px; font-size: 10.5px; font-weight: 700; color: var(--mg-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trend-user b svg { display: inline-block; vertical-align: -2px; color: var(--mg-accent); margin-left: 1px; }
.trend-user small { display: block; max-width: 100%; color: var(--mg-faint); font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trend-user .trend-rep { font-style: normal; color: var(--mg-muted); font-size: 9px; font-weight: 700; white-space: nowrap; margin-top: 1px; }

/* Harita kartı */
.map-card .mg-map { height: 216px; margin: 12px 0 2px; border-radius: 12px; border: 1px solid var(--mg-line); background: #0b0f13; }

/* Önerilen hizmet satırları */
.svc-card > .svc-row:first-of-type { border-top: 0; margin-top: 6px; }
.svc-row {
  display: grid; grid-template-columns: 54px minmax(0, 1fr) 34px; gap: 12px; align-items: center;
  padding: 11px 0 10px; margin-top: 2px; border-top: 1px solid var(--mg-line);
  color: inherit; text-decoration: none;
}
.svc-thumb {
  width: 54px; height: 54px; border-radius: 12px; overflow: hidden;
  background: #10161d; color: #eef2f5;
  display: grid; place-items: center; font-size: 11px; font-weight: 800;
}
.svc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-row > div { display: grid; gap: 3px; min-width: 0; }
.svc-row b { display: flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svc-row b .mg-icon { color: var(--mg-accent); flex: none; }
.svc-row small { color: var(--mg-faint); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svc-row em { font-style: normal; color: var(--mg-muted); font-size: 10.5px; font-weight: 600; }
.svc-go {
  width: 34px; height: 34px; border: 1px solid var(--mg-line); border-radius: 50%;
  display: grid; place-items: center; color: var(--mg-muted);
  transition: border-color .15s ease, color .15s ease;
}
.svc-row:hover .svc-go { border-color: var(--mg-accent); color: var(--mg-accent); }
.nearby-empty { padding: 14px 2px 6px; color: var(--mg-faint); font-size: 11px; }

/* ---------- Duyarlılık ---------- */
@media (max-width: 1100px) {
  .social-rail { display: none; }
}
@media (max-width: 760px) {
  .feed-column { padding: 0 12px 40px; }
  .story { width: 72px; min-width: 72px; }
  .feed-tabs button { font-size: 11px; }
  .feed-column .post-card { padding: 13px 13px 11px; border-radius: 14px; }
}