/* ============================================================
   2026-09 KABUK SADELEŞTİRMESİ (en son yüklenir)
   1) Genişlikler: dikey uygulama şeridi kalktı, sol menü 232px,
      istenirse yalnız simgeler (76px).
   2) Sol menü: misafirde "Giriş yap" kartı, altta kompakt uygulama alanı + QR.
   3) Üst bar: misafirde birincil eylem "Giriş yap".
   4) Ana sayfa: misafir tanıtımı, boş hikâye alanı tek satır.
   5) Sağ kolon: sekmeli "Öne çıkanlar", birleşik kartlar.
   6) Takip düğmesi sakin (çerçeveli); ikincil metin kontrastı yüksek.
   ============================================================ */

/* ---------- 1) Genişlikler ---------- */
:root {
  --mg-spine-w: 0px;              /* polish.css'teki gövde dolgusu sıfırlanır */
  --app-drawer-width: 232px;
  --app-drawer-collapsed: 76px;
}
.mg-app-spine { display: none !important; }

@media (min-width: 901px) {
  html.mg-drawer-collapsed { --app-drawer-width: var(--app-drawer-collapsed); }
}

/* Alt uygulama şeridi yalnızca sol menünün yatay şeride döndüğü genişlikte. */
@media (min-width: 901px) {
  .mg-app-bar { display: none !important; }
}

/* ---------- 6) Kontrast ----------
   Koyu zeminde kullanıcı adı, tarih ve açıklamalar soluk kalıyordu.
   Yüzey (#0d1116) üstünde: muted 9,8:1 (eski 7,5), faint 6,6:1 (eski 4,6).
   Aydınlık zeminde (#fff): muted 7,6:1, faint 6,3:1. */
:root {
  --mg-muted: #b4bbc5;
  --mg-faint: #8f99a5;
}
html[data-theme="light"] {
  --mg-muted: #4b5563;
  --mg-faint: #566170;
}

/* ---------- 2) Sol menü ---------- */
.social-sidebar { padding: 14px 12px 12px; }
.social-sidebar .nav-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.social-sidebar nav a { gap: 10px; }
.social-sidebar nav .nitro-link strong { margin-left: auto; }
.social-sidebar .nav-label { margin: 14px 12px 4px; }
.social-sidebar nav .nav-label:first-child { margin-top: 2px; }

.side-join-card {
  display: grid; gap: 5px;
  padding: 12px; margin-bottom: 12px;
  border: 1px solid var(--mg-line); border-radius: 12px;
  background: var(--mg-surface);
}
.side-join-title { font-size: 14.5px; font-weight: 700; letter-spacing: -.1px; color: var(--mg-text); }
.side-join-sub { font-size: 12px; line-height: 1.4; color: var(--mg-muted); }
.side-join-primary {
  margin-top: 5px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--mg-accent); color: #fff !important;
  font-size: 13.5px; font-weight: 700; text-decoration: none;
  transition: filter .15s ease;
}
.side-join-primary:hover { filter: brightness(1.08); }
.side-join-secondary {
  justify-self: center; padding: 3px 4px 0;
  font-size: 12.5px; font-weight: 700; color: var(--mg-text); text-decoration: none;
}
.side-join-secondary:hover { color: var(--mg-accent-ink); text-decoration: underline; }

.social-sidebar .create-post-button { margin: 14px 0 0; }

.side-app-card {
  display: grid; gap: 8px;
  margin-top: 12px; padding: 9px 8px 8px;
  border: 1px solid var(--mg-line); border-radius: 12px;
  background: var(--mg-surface);
}
.side-app-head { display: flex; align-items: center; gap: 9px; min-width: 0; }
.side-app-head { gap: 8px; }
.side-app-head img { width: 28px; height: 28px; flex: none; border-radius: 7px; object-fit: cover; }
.side-app-head > div { min-width: 0; flex: 1; }
.side-app-head .side-app-qr-toggle { flex: none; }
.side-app-head b {
  display: block; font-size: 12.5px; font-weight: 700; color: var(--mg-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.side-app-head small {
  display: block; font-size: 11px; color: var(--mg-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.side-app-stores { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.side-app-store, .side-app-qr-toggle, .side-app-mini {
  height: 32px; border: 1px solid var(--mg-line); border-radius: 8px;
  background: var(--mg-surface-2); color: var(--mg-text);
  transition: border-color .15s ease, color .15s ease;
}
.side-app-store {
  min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  padding: 0 4px; font-size: 10.5px; font-weight: 700; letter-spacing: -.1px;
  text-decoration: none; white-space: nowrap;
}
.side-app-store span { overflow: hidden; text-overflow: ellipsis; }
.side-app-store .mg-icon { flex: none; }
.side-app-qr-toggle, .side-app-mini { width: 32px; padding: 0; display: grid; place-items: center; cursor: pointer; }
.side-app-store:hover, .side-app-qr-toggle:hover, .side-app-mini:hover,
.side-app-card.qr-open .side-app-qr-toggle, .side-app-card.qr-open .side-app-mini {
  border-color: var(--mg-accent); color: var(--mg-accent-ink);
}
.side-app-mini { display: none; }
.side-app-qr { display: flex; align-items: center; gap: 10px; }
.side-app-qr[hidden] { display: none; }
/* QR her temada siyah-beyaz: ters renkli kodu bazı kameralar okuyamıyor. */
.side-app-qr-code {
  width: 88px; height: 88px; flex: none; box-sizing: border-box;
  padding: 7px; border-radius: 8px; background: #fff;
}
.side-app-qr-code svg { display: block; width: 100%; height: 100%; }
.side-app-qr p { margin: 0; display: grid; gap: 3px; min-width: 0; }
.side-app-qr p b { font-size: 12px; color: var(--mg-text); }
.side-app-qr p small { font-size: 11px; line-height: 1.35; color: var(--mg-muted); }

.side-collapse-toggle {
  width: 100%; height: 34px; margin-top: 8px; padding: 0 12px;
  display: flex; align-items: center; gap: 10px;
  border: 0; border-radius: 9px; background: transparent; cursor: pointer;
  color: var(--mg-muted); font-size: 13px; font-weight: 600; text-align: left;
}
.side-collapse-toggle:hover { background: var(--mg-surface-2); color: var(--mg-text); }
.side-collapse-toggle .mg-icon { flex: none; transition: transform .2s ease; }

/* Yasal bağlantılar tek blok halinde akar (dikey liste menüyü uzatıyordu).
   Yalnız masaüstü: dar ekranda menü yatay şerit ve bu bağlantılar orada gizli. */
@media (min-width: 901px) {
  .social-sidebar .side-legal {
    display: flex; flex-wrap: wrap; gap: 2px 10px;
    margin: 10px 12px 2px; padding-top: 10px;
  }
  .social-sidebar .side-legal a { font-size: 11px; }
}

/* Daraltılmış menü: yalnız simgeler. Metinler title ile adlandırılıyor. */
@media (min-width: 901px) {
  /* Yüzen QR kutusu içerik kartlarının üstünde kalsın (menü kendi yığın bağlamında). */
  html.mg-drawer-collapsed .social-sidebar { padding-left: 10px; padding-right: 10px; z-index: 25; }
  html.mg-drawer-collapsed .social-sidebar .nav-text,
  html.mg-drawer-collapsed .social-sidebar nav a strong,
  html.mg-drawer-collapsed .social-sidebar .side-user-info,
  html.mg-drawer-collapsed .social-sidebar .side-user-card > i,
  html.mg-drawer-collapsed .side-join-primary span,
  html.mg-drawer-collapsed .side-join-title,
  html.mg-drawer-collapsed .side-join-sub,
  html.mg-drawer-collapsed .side-join-secondary,
  html.mg-drawer-collapsed .side-app-head,
  html.mg-drawer-collapsed .side-app-stores,
  html.mg-drawer-collapsed .social-sidebar .side-legal { display: none !important; }

  html.mg-drawer-collapsed .social-sidebar nav a { justify-content: center; padding: 0; gap: 0; }
  html.mg-drawer-collapsed .social-sidebar nav a i { width: auto; }
  html.mg-drawer-collapsed .social-sidebar nav a.active { box-shadow: none; }
  html.mg-drawer-collapsed .social-sidebar .nav-label {
    height: 1px; margin: 9px 8px; padding: 0; overflow: hidden;
    font-size: 0; background: var(--mg-line);
  }
  html.mg-drawer-collapsed .social-sidebar nav .nav-label:first-child { display: none; }
  html.mg-drawer-collapsed .social-sidebar .side-user-card {
    justify-content: center; padding: 4px; margin-bottom: 8px;
    border-color: transparent; background: transparent;
  }
  html.mg-drawer-collapsed .side-join-card { padding: 0; margin-bottom: 8px; border: 0; background: transparent; }
  html.mg-drawer-collapsed .side-join-primary,
  html.mg-drawer-collapsed .social-sidebar .create-post-button {
    width: 44px; height: 44px; margin-left: auto; margin-right: auto; padding: 0; gap: 0;
    justify-content: center;
  }
  html.mg-drawer-collapsed .side-app-card { padding: 0; border: 0; background: transparent; justify-items: center; }
  html.mg-drawer-collapsed .side-app-mini { display: grid; width: 44px; height: 44px; }
  /* Daraltılmış menüde QR kutusu menünün yanında yüzer. */
  html.mg-drawer-collapsed .side-app-qr:not([hidden]) {
    position: fixed; z-index: 60;
    left: calc(var(--app-drawer-collapsed) + 8px); bottom: 72px;
    width: 250px; padding: 12px;
    border: 1px solid var(--mg-line); border-radius: 14px;
    background: var(--mg-surface); box-shadow: 0 16px 40px rgba(4, 7, 11, .35);
  }
  html.mg-drawer-collapsed .side-collapse-toggle { justify-content: center; padding: 0; }
  html.mg-drawer-collapsed .side-collapse-toggle .mg-icon { transform: scaleX(-1); }

  /* Üst barın logo sütunu da daralır: yalnız amblem. */
  html.mg-drawer-collapsed .app-logo { padding-left: 0 !important; padding-right: 0 !important; justify-content: center; }
  html.mg-drawer-collapsed .app-logo .brand { width: auto !important; }
  html.mg-drawer-collapsed .app-logo .brand-global-logo { display: none !important; }
  html.mg-drawer-collapsed .app-topbar .app-logo img.brand-emblem,
  html.mg-drawer-collapsed .app-logo img.brand-emblem {
    display: block !important; width: 32px !important; height: 32px !important; max-height: none !important;
  }
}
.brand .brand-emblem { display: none; }

/* Dar ekranda menü yatay şerit: yeni kartlar orada yer kaplamasın. */
@media (max-width: 900px) {
  .social-sidebar > .side-join-card,
  .social-sidebar > .side-app-card,
  .social-sidebar > .side-collapse-toggle { display: none !important; }
}

/* ---------- Kabuk hizası ----------
   Dikey şerit kalkınca üst bar (ortalanmış, orta sütunu 768px'e sınırlı),
   ana sayfa (1fr) ve forum kabuğu (768px, sola yaslı) farklı eksenlere
   düştü. Üçü de aynı ızgarayı kullanır: [boşluk] menü | içerik | ray [boşluk].
   Üst barın boşluk sütunları, geniş ekranda ortalanan kabukla hizayı korur. */
@media (min-width: 1160px) {
  .app-topbar {
    grid-template-columns:
      minmax(0, 1fr)
      var(--app-drawer-width)
      minmax(0, calc(var(--app-shell-width) - var(--app-drawer-width) - var(--app-rail-width)))
      var(--app-rail-width)
      minmax(0, 1fr) !important;
    justify-content: stretch !important;
  }
  .app-topbar > .app-logo { grid-column: 2; }
  .app-topbar > .app-search { grid-column: 3; }
  .app-topbar > .app-tools { grid-column: 4; }
  .forum-layout, .nitro-layout {
    grid-template-columns: var(--app-drawer-width) minmax(520px, 1fr) minmax(300px, var(--app-rail-width)) !important;
  }
}

/* 901–1159px: iki kolon (menü | içerik), sağ ray gizli. Önceden bu aralıkta
   üst bar araçları (ve dolayısıyla "Giriş yap") hiç görünmüyordu, ana sayfa
   menüsü de üst bardaki logodan 54px kaymıştı. */
@media (min-width: 901px) and (max-width: 1159px) {
  .app-topbar {
    grid-template-columns: var(--app-drawer-width) minmax(0, 1fr) auto !important;
    justify-content: stretch !important;
  }
  .app-topbar > .app-logo { grid-column: 1; }
  .app-topbar > .app-search { grid-column: 2; justify-self: stretch; width: auto; max-width: 600px; margin: 0 16px; }
  .app-topbar > .app-tools {
    grid-column: 3; display: flex !important; align-items: center; justify-content: flex-end;
    gap: 10px; padding: 0 16px 0 8px; border-left: 0;
  }
  .social-container, .forum-layout, .xp-layout, .news-layout, .saved-layout, .tr-layout {
    width: 100% !important; max-width: none !important; margin: 0 !important;
    grid-template-columns: var(--app-drawer-width) minmax(0, 1fr) !important;
    justify-content: stretch !important;
  }
  .social-rail, .forum-right, .xp-rail, .news-rail, .saved-rail { display: none !important; }
}

/* ---------- 3) Üst bar: misafir ---------- */
.topbar-account-wrap { align-items: center; gap: 6px; }
.topbar-signin {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 16px; border-radius: 10px;
  background: var(--mg-accent); color: #fff !important;
  font-size: 13.5px; font-weight: 700; text-decoration: none; white-space: nowrap;
  transition: filter .15s ease;
}
.topbar-signin:hover { filter: brightness(1.08); }
.topbar-signup {
  display: inline-flex; align-items: center; height: 38px; padding: 0 10px;
  color: var(--mg-text) !important; font-size: 13.5px; font-weight: 700;
  text-decoration: none; white-space: nowrap;
}
.topbar-signup:hover { color: var(--mg-accent-ink) !important; }
button.topbar-account.guest.icon-only {
  width: 38px; height: 38px; padding: 0; gap: 0;
  justify-content: center; border-radius: 10px; color: var(--mg-muted);
}
button.topbar-account.guest.icon-only > .mg-icon { color: inherit; transform: none; }
.account-menu-head.guest .guest-avatar { display: grid; place-items: center; }
@media (max-width: 1100px) { .topbar-signup { display: none; } }
@media (max-width: 560px) {
  .topbar-signin { width: 38px; padding: 0; justify-content: center; }
  .topbar-signin span { display: none; }
}

/* ---------- 4) Ana sayfa: misafir tanıtımı ---------- */
.guest-welcome {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px 24px;
  margin: 16px 0 4px; padding: 22px 22px 16px;
  border: 1px solid var(--mg-line); border-radius: 18px;
  background:
    radial-gradient(120% 150% at 100% 0%, var(--mg-accent-soft), transparent 55%),
    var(--mg-surface);
}
html.mg-welcome-off .guest-welcome { display: none; }
.gw-copy { min-width: 0; align-self: center; }
.gw-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--mg-accent-ink);
}
.guest-welcome h2 { margin: 6px 0 8px; font-size: 25px; line-height: 1.15; letter-spacing: -.02em; color: var(--mg-text); }
.gw-copy p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--mg-muted); }
.gw-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.gw-primary, .gw-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 18px; border-radius: 11px;
  font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.gw-primary { background: var(--mg-accent); color: #fff !important; }
.gw-primary:hover { filter: brightness(1.08); }
.gw-secondary { border: 1px solid var(--mg-line-strong); color: var(--mg-text) !important; background: transparent; }
.gw-secondary:hover { border-color: var(--mg-accent); }
.gw-features {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-content: center;
}
.gw-features li {
  display: flex; align-items: flex-start; gap: 10px; min-width: 0;
  padding: 10px; border-radius: 12px; background: var(--mg-surface-2);
}
.gw-features i {
  width: 34px; height: 34px; flex: none; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--mg-bg); color: var(--mg-accent-ink);
}
.gw-features div { min-width: 0; }
.gw-features b { display: block; font-size: 13.5px; font-weight: 700; color: var(--mg-text); }
.gw-features small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.35; color: var(--mg-muted); }
.gw-apponly {
  grid-column: 1 / -1; margin: 0; padding-top: 12px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  border-top: 1px solid var(--mg-line);
  font-size: 12.5px; color: var(--mg-muted);
}
.gw-apponly span {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  background: var(--mg-surface-2); color: var(--mg-text);
  font-size: 11.5px; font-weight: 700;
}
.gw-close {
  position: absolute; top: 10px; right: 10px;
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 0; border-radius: 8px; background: transparent; cursor: pointer;
  color: var(--mg-faint);
}
.gw-close:hover { background: var(--mg-surface-2); color: var(--mg-text); }
@media (max-width: 1320px) { .guest-welcome { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .guest-welcome { padding: 18px 16px 14px; }
  .guest-welcome h2 { font-size: 21px; }
  .gw-features { grid-template-columns: 1fr; }
}

/* Boş hikâye alanı: tek satır (yalnız üyede). */
.stories-compact {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  margin: 14px 0 2px; padding: 8px 10px;
  border: 1px solid var(--mg-line); border-radius: 12px; background: var(--mg-surface);
}
.stories-compact-add {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px; border-radius: 999px; cursor: pointer;
  border: 1px dashed var(--mg-line-strong); background: transparent;
  color: var(--mg-text); font-size: 12.5px; font-weight: 700;
}
.stories-compact-add b { color: var(--mg-accent-ink); }
.stories-compact-add:hover { border-color: var(--mg-accent); }
.stories-compact small { min-width: 0; font-size: 12.5px; color: var(--mg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 5) Sağ kolon ---------- */
.rail-tabs {
  display: flex; gap: 4px; margin: 12px 0 2px; padding: 3px;
  border-radius: 10px; background: var(--mg-surface-2);
}
.rail-tabs button {
  flex: 1; height: 30px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; border-radius: 8px; background: transparent; cursor: pointer;
  color: var(--mg-muted); font-size: 12.5px; font-weight: 700;
}
.rail-tabs button:hover { color: var(--mg-text); }
.rail-tabs button.active { background: var(--mg-surface); color: var(--mg-text); box-shadow: 0 1px 2px rgba(0, 0, 0, .22); }
.highlights-card .trend-garage-grid { margin-top: 12px; }
.rail-card .rail-merged { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--mg-line); }
.rail-subtitle {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 8px; font-size: 12px; font-weight: 700; color: var(--mg-muted);
}

/* ---------- 6) Takip düğmesi: sakin ----------
   Her gönderide dolu kırmızı düğme akışı bağırtıyordu. Artık çerçeveli;
   marka rengi yalnız "+" simgesinde ve üzerine gelince. Profil sayfasındaki
   düğme (.profile-actions / .large) birincil eylem olarak dolu kalır; Nitro
   video üstü beyaz hapını korur. "Takiptesin / istek gönderildi" hâlleri
   polish.css'teki nötr görünümde kalır. Aydınlık tema kuralları
   html[data-theme] ile daha özgül olduğu için iki tema birlikte yazılıyor. */
.follow-button:not(.following):not(.pending),
.post-card header .follow-button:not(.following):not(.pending),
html[data-theme="light"] .follow-button:not(.following):not(.pending),
html[data-theme="light"] .post-card header .follow-button:not(.following):not(.pending) {
  height: 30px; padding: 0 12px; gap: 5px;
  border: 1px solid var(--mg-line-strong); border-radius: 999px;
  background: transparent; color: var(--mg-text);
  font-size: 12.5px; font-weight: 700;
}
.follow-button:not(.following):not(.pending) .mg-icon { color: var(--mg-accent-ink); width: 13px; height: 13px; }
.follow-button:not(.following):not(.pending):hover:not(:disabled),
.post-card header .follow-button:not(.following):not(.pending):hover:not(:disabled),
html[data-theme="light"] .follow-button:not(.following):not(.pending):hover:not(:disabled),
html[data-theme="light"] .post-card header .follow-button:not(.following):not(.pending):hover:not(:disabled) {
  background: var(--mg-accent-soft); border-color: var(--mg-accent); color: var(--mg-text);
}

/* Birincil kalanlar: profil başlığı ve büyük düğme. */
.follow-button.large:not(.following):not(.pending),
.profile-actions .follow-button:not(.following):not(.pending),
html[data-theme="light"] .follow-button.large:not(.following):not(.pending),
html[data-theme="light"] .profile-actions .follow-button:not(.following):not(.pending) {
  border-color: var(--mg-accent); background: var(--mg-accent); color: #fff;
}
.follow-button.large:not(.following):not(.pending) { height: 40px; padding: 0 20px; font-size: 14px; }
.profile-actions .follow-button:not(.following):not(.pending) { height: 34px; padding: 0 15px; font-size: 13px; }
.follow-button.large:not(.following):not(.pending) .mg-icon,
.profile-actions .follow-button:not(.following):not(.pending) .mg-icon { color: #fff; }
.follow-button.large:not(.following):not(.pending):hover:not(:disabled),
.profile-actions .follow-button:not(.following):not(.pending):hover:not(:disabled),
html[data-theme="light"] .follow-button.large:not(.following):not(.pending):hover:not(:disabled),
html[data-theme="light"] .profile-actions .follow-button:not(.following):not(.pending):hover:not(:disabled) {
  background: var(--mg-accent-ink); border-color: var(--mg-accent-ink); color: #fff;
}

/* Nitro video üstü: beyaz hap (medya yüzeyi her temada koyu). */
.nitro-feature .feature-author .follow-button:not(.following):not(.pending),
html[data-theme="light"] .nitro-feature .feature-author .follow-button:not(.following):not(.pending) {
  height: 34px; padding: 0 15px; font-size: 13px;
  background: #fff; color: #10151b; border-color: #fff;
}
.nitro-feature .feature-author .follow-button:not(.following):not(.pending) .mg-icon { color: var(--mg-accent); }
.nitro-feature .feature-author .follow-button:not(.following):not(.pending):hover:not(:disabled),
html[data-theme="light"] .nitro-feature .feature-author .follow-button:not(.following):not(.pending):hover:not(:disabled) {
  background: var(--mg-accent); border-color: var(--mg-accent); color: #fff;
}
.nitro-feature .feature-author .follow-button:not(.following):not(.pending):hover:not(:disabled) .mg-icon { color: #fff; }

/* ============================================================
   2026-09-17 ANA SAYFA AYARLARI (UX değerlendirmesi, 3–5. maddeler)
   7) Hikâye şeridi 170px'ten ~135px'e: 54px avatar, tek satır ad,
      sekmelerle arada daha az boşluk.
   8) Akıştaki görsel kendi oranında ama en fazla 560px; yanlar bulanık
      kopyayla dolar; "Tamamını gör" kırpmasız açar.
   9) Ray haritası 160px, yakınlaştırma düğmesi yok; küme daha erken açılır.
   10) Öne çıkan kişiler: ad iki satıra kadar, kullanıcı adı yok.
   11) Küçük ayrıntılar: takip simgesi, halka anlamları, ince kaydırma
       çubuğu, uygulama kartı metni, misafirde tek çağrı.
   ============================================================ */

/* ---------- 7) Hikâyeler ---------- */
.stories-block { margin-top: 12px; padding: 0 14px 10px; }
.stories-head { padding: 10px 2px 0; }
.stories-head h3 { font-size: 15px; }
.stories { padding: 9px 2px 0; gap: 14px; }
.story, .feed-column .story { width: 78px; min-width: 78px; gap: 5px; }
.story .user-avatar { --ua: 54px; }
.story-ring, .stories .story-ring.add-story { width: 54px; height: 54px; }
.social-app .stories .story b { font-size: 11.5px; line-height: 1.2; }
.social-app .stories .story small { display: none; }
.feed-tabs { height: 46px; margin: 8px 0 12px; }
@media (max-width: 900px) {
  .story, .feed-column .story { width: 62px; min-width: 62px; }
}

/* ---------- 8) Gönderi görseli ----------
   event-shell-standard.css akıştaki her görseli 16/10 kutuya kırpıyordu
   (geniş kolonda 456–580px). Kutu artık görselin kendi oranında, en fazla
   560px. Bundan uzun (dikey) fotoğraf 560px'e sığar, yanlar aynı fotoğrafın
   bulanık kopyasıyla dolar; araç kırpılmaz. Aynı kural profil ve kaydedilenler
   akışında; detay sayfası (.post-detail-card, forum kabuğunda) kendi kuralında
   kalır (76vh, contain). */
.feed-column .post-card .post-media .media-art,
.profile-posts .post-card .post-media .media-art {
  aspect-ratio: auto; height: auto !important; min-height: 160px; max-height: 560px;
  display: grid; place-items: center; overflow: hidden; isolation: isolate;
  background: var(--mg-surface-2);
}
.feed-column .post-card .post-media .media-art img,
.feed-column .post-card .post-media .media-art video,
.profile-posts .post-card .post-media .media-art img,
.profile-posts .post-card .post-media .media-art video {
  position: relative; z-index: 1;
  aspect-ratio: auto; width: 100%; height: auto; max-height: 560px; object-fit: contain;
  background: transparent;   /* polish.css img'e siyah zemin veriyor; yanlar bulanık kopyadan görünsün */
}
.media-backdrop {
  position: absolute; inset: -24px; z-index: 0;
  background-position: center; background-size: cover;
  filter: blur(26px) saturate(1.1); opacity: .55; pointer-events: none;
}
html[data-theme="light"] .media-backdrop { opacity: .4; }
.media-expand {
  position: absolute; z-index: 2; right: 10px; bottom: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 11px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(10, 13, 16, .66); color: #fff; backdrop-filter: blur(6px);
  font-size: 12px; font-weight: 700; white-space: nowrap;
  opacity: 0; transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease, background .15s ease;
}
.media-expand:hover { background: rgba(10, 13, 16, .86); }
.post-media:hover .media-expand, .media-expand:focus-visible { opacity: 1; transform: none; }
@media (hover: none), (max-width: 900px) {
  .media-expand { opacity: 1; transform: none; }
  .media-expand span { display: none; }
  .media-expand { width: 30px; padding: 0; justify-content: center; }
}
@media (max-width: 900px) {
  .feed-column .post-card .post-media .media-art,
  .feed-column .post-card .post-media .media-art img,
  .feed-column .post-card .post-media .media-art video,
  .profile-posts .post-card .post-media .media-art,
  .profile-posts .post-card .post-media .media-art img,
  .profile-posts .post-card .post-media .media-art video { max-height: 70vh; }
}

/* ---------- 9) Ray haritası ---------- */
.svc-card .mg-map { height: 160px; margin: 10px 0 0; }
.mg-map-compact .leaflet-control-container { display: none; }
.mg-map-compact .mg-cluster span { font-size: 12px; }
.svc-card .svc-ref { margin: 8px 0 0; }

/* ---------- 10) Öne çıkan kişiler ---------- */
.trend-user { padding: 12px 5px 11px; gap: 0; }
.trend-user b {
  margin-top: 8px; font-size: 12.5px; line-height: 1.25;
  white-space: normal; overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  word-break: break-word; text-align: center;
}
.trend-user b svg { vertical-align: -1px; }
.trend-user-grid .trend-user small { display: none; }

/* ---------- 11) Küçük ayrıntılar ---------- */

/* Halka anlamları: dış halka = hikâye (her zaman kırmızı-turuncu), ince iç
   çember = kademe (bronz / gümüş / altın), rozet = doğrulama. Eskiden hikâyesi
   olan Turbo üyede dış halka kademe rengine dönüyor, hikâye anlamı kayboluyordu. */
.user-avatar.has-story:before,
.user-avatar.segment-1.has-story:before,
.user-avatar.segment-2.has-story:before,
.user-avatar.segment-3.has-story:before {
  background: conic-gradient(#e9003f, #ff8a4b, #e9003f 60%, #ff2d6b, #e9003f);
}
.user-avatar.segment-1.has-story > span { border-color: #c27a45; }
.user-avatar.segment-2.has-story > span { border-color: #aeb8c1; }
.user-avatar.segment-3.has-story > span { border-color: #ffc93c; }

/* "Takiptesin": simge kullanıcı+tik; doğrulama rozeti gibi durmasın. */
.follow-button.following .mg-icon { width: 14px; height: 14px; color: currentColor; }

/* Sol menü kaydırma çubuğu: her zaman görünen kalın çubuk dikkat çekiyordu.
   İnce ve yalnız üzerine gelince görünür; genişlik sabit kalır (gutter). */
.social-sidebar {
  scrollbar-width: thin; scrollbar-color: transparent transparent;
  scrollbar-gutter: stable;
}
.social-sidebar:hover, .social-sidebar:focus-within { scrollbar-color: var(--mg-line-strong) transparent; }
.social-sidebar::-webkit-scrollbar { width: 6px; }
.social-sidebar::-webkit-scrollbar-track { background: transparent; }
.social-sidebar::-webkit-scrollbar-thumb { border-radius: 6px; background: transparent; }
.social-sidebar:hover::-webkit-scrollbar-thumb { background: var(--mg-line-strong); }

/* Misafir: sol menüde tek, sakin çağrı (üst bar ve karşılama alanı zaten
   "Giriş yap" gösteriyor). */
.side-join-card { gap: 4px; padding: 11px 12px 12px; }
.side-join-sub { font-size: 11.5px; }
.side-join-secondary {
  justify-self: stretch; margin-top: 7px; height: 34px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--mg-line-strong); border-radius: 9px;
  font-size: 12.5px; font-weight: 700; color: var(--mg-text); text-decoration: none;
}
.side-join-secondary:hover { border-color: var(--mg-accent); color: var(--mg-accent-ink); text-decoration: none; }
.side-join-secondary .mg-icon { flex: none; color: var(--mg-accent-ink); }
@media (min-width: 901px) {
  html.mg-drawer-collapsed .side-join-secondary {
    display: inline-flex !important; width: 44px; height: 44px; margin: 0 auto; padding: 0; gap: 0;
  }
  html.mg-drawer-collapsed .side-join-secondary span { display: none; }
}

/* ---------- 12) İşletmem kabuğu ----------
   /isletmem sayfası kendi ızgarasını (248 + 960px, ortalı) kullanıyordu: sol
   menü üst bardaki logodan ve diğer sayfalardaki menüden kayıyor, sayfaya
   girince menü "dağılıyor" görünüyordu. Artık forum/blog kabuğuyla aynı:
   genişlik --app-shell-width, sütunlar --app-drawer-width | içerik; menü
   yapışkan; daraltılmış menü ve 901–1159px iki kolon kuralları da uygulanır. */
@media (min-width: 901px) {
  .bo-layout {
    width: min(var(--app-shell-width, 1444px), 100%); margin: auto;
    grid-template-columns: var(--app-drawer-width) minmax(0, 1fr);
    justify-content: stretch;
  }
  .bo-layout > .social-sidebar {
    position: sticky; top: var(--mg-topbar-h); left: auto;
    height: calc(100vh - var(--mg-topbar-h));
    border-right: 1px solid var(--mg-line);
  }
  .bo-main { border-left: 0; }
}
@media (min-width: 901px) and (max-width: 1159px) {
  .bo-layout {
    width: 100% !important; max-width: none !important; margin: 0 !important;
    grid-template-columns: var(--app-drawer-width) minmax(0, 1fr) !important;
  }
}

/* İşletme sahibinde "İşletmem" bağlantısı menüde öne çıkar: marka rengiyle
   çerçeveli, dolgulu bir satır ve "Sahip" etiketi. Seçiliyken diğer aktif
   bağlantılar gibi dolu kırmızı kalır. */
.social-sidebar nav a.side-business-link {
  margin: 6px 0 2px;
  border: 1px solid var(--mg-accent);
  background: var(--mg-accent-soft);
  color: var(--mg-text);
  font-weight: 700;
}
.social-sidebar nav a.side-business-link i,
.social-sidebar nav a.side-business-link .mg-icon { color: var(--mg-accent-ink); }
.social-sidebar nav a.side-business-link:hover { background: var(--mg-accent-soft); border-color: var(--mg-accent-ink); color: var(--mg-text); }
.social-sidebar nav a.side-business-link .nav-text::after {
  content: attr(data-owner-label);
  margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  background: var(--mg-accent); color: #fff;
  font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; vertical-align: 1px;
}
.social-sidebar nav a.side-business-link strong {
  margin-left: auto; background: var(--mg-accent); color: #fff;
}
.social-sidebar nav a.side-business-link.active,
html[data-theme="light"] .social-sidebar nav a.side-business-link.active {
  background: var(--mg-accent); border-color: var(--mg-accent); color: #fff;
}
.social-sidebar nav a.side-business-link.active i,
.social-sidebar nav a.side-business-link.active .mg-icon { color: #fff; }
.social-sidebar nav a.side-business-link.active .nav-text::after { background: #fff; color: var(--mg-accent); }
@media (min-width: 901px) {
  html.mg-drawer-collapsed .social-sidebar nav a.side-business-link { margin: 6px 0 2px; }
}
@media (max-width: 900px) {
  .social-sidebar nav a.side-business-link { margin: 0; }
  .social-sidebar nav a.side-business-link .nav-text::after { display: none; }
}

/* ---------- 13) Mobil tutarlılık ----------
   • Akış sekmeleri ≤900px'te boş çıkıyordu: polish.css ≤980'de etiketi,
     a6-mobile.css ≤900'de simgeyi gizliyor; ikisi birlikte hiçbir şey
     bırakmıyordu. Etiket geri geliyor (sekmeler yatay kayar).
   • Çerez bandı 390px'te ekranın yarısını kaplıyordu: mobilde daha sıkı
     metin ve boşluk, düğmeler tek satırda. */
@media (max-width: 900px) {
  .feed-tabs button span { display: inline; }
  .feed-tabs button { gap: 6px; }
  /* business.css'teki temel ızgara a6-mobile'dan sonra yüklendiği için
     mobilde de ızgara kalıyor, menü 232px'lik dikey sütuna sıkışıyordu. */
  .bo-layout { display: block; }
}
@media (max-width: 600px) {
  .mg-consent { left: 8px; right: 8px; bottom: 8px; border-radius: 14px; }
  .mg-consent-form { gap: 8px; padding: 12px 12px 10px; }
  .mg-consent-copy { gap: 4px; }
  .mg-consent-copy b { font-size: 13.5px; }
  .mg-consent-copy p { font-size: 12px; line-height: 1.4; }
  .mg-consent-details summary { font-size: 12px; }
  .mg-consent-actions { margin-top: 8px; }
  .mg-consent-btn { height: 36px; font-size: 12.5px; }
}

/* ============================================================
   2026-09-18
   14) Profil sekmeleri artık bağlantı (adres + SEO). Düğmelerle
       birebir aynı görünmeleri gerekiyor.
   15) Nitro "yeniden" rozeti.
   16) Paylaş (compose) sayfası: kabuk ve kart tema değişkenlerine geçti.
   ============================================================ */

/* ---------- 14) Sekme bağlantıları ---------- */
.forum-tabs a {
  display: flex; align-items: center; gap: 7px;
  padding: 13px 11px; position: relative; white-space: nowrap;
  border: 0; background: none; text-decoration: none;
  color: var(--mg-muted); font-size: 13px; font-weight: 600;
}
.forum-tabs a:hover { color: var(--mg-text); text-decoration: none; }
.forum-tabs a.active { color: var(--mg-accent-ink); font-weight: 700; }
.forum-tabs a.active:after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2.5px; border-radius: 3px 3px 0 0; background: var(--mg-accent);
}
@media (max-width: 900px) { .forum-tabs a { flex: 0 0 auto; } }

/* ---------- 15) Nitro: tekrar gösterilen video ---------- */
.nitro-rewatch {
  position: absolute; z-index: 4; top: 64px; left: 18px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(10, 13, 16, .62); color: #fff;
  font-size: 11px; font-weight: 700; backdrop-filter: blur(6px);
  pointer-events: none;
}

/* ---------- 16) Paylaş sayfası ----------
   Eski dosya (create-post.css) sabit koyu renklerle yazılmıştı: aydınlık
   temada kart siyah kalıyor, kabuk da kendi ızgarasını kullandığı için sol
   menü diğer sayfalardan kayıyordu. Artık ortak ızgara + tema değişkenleri. */
.create-app { background: var(--mg-bg); color: var(--mg-text); }
@media (min-width: 901px) {
  .create-layout {
    width: min(var(--app-shell-width, 1444px), 100%); margin: auto;
    display: grid; grid-template-columns: var(--app-drawer-width) minmax(0, 1fr);
    justify-content: stretch; padding-top: 0;
  }
  .create-layout > .social-sidebar {
    position: sticky; top: var(--mg-topbar-h); left: auto;
    height: calc(100vh - var(--mg-topbar-h));
    border-right: 1px solid var(--mg-line);
  }
  .create-main { padding: 26px 34px 70px; max-width: 900px; }
}
@media (max-width: 900px) {
  .create-layout { display: block; }
  .create-main { padding: 18px 14px 56px; }
}

.create-main .back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--mg-muted); text-decoration: none; }
.create-main .back-link:hover { color: var(--mg-accent-ink); }

.create-title { border-bottom: 1px solid var(--mg-line); padding: 14px 0 18px; }
.create-title span { font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--mg-accent-ink); }
.create-title h1 { margin: 8px 0 6px; font-size: 27px; line-height: 1.15; letter-spacing: -.02em; color: var(--mg-text); }
.create-title p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--mg-muted); }

.create-card {
  margin-top: 18px; padding: 18px;
  background: var(--mg-surface); border: 1px solid var(--mg-line); border-radius: 18px;
}
.create-author { display: flex; align-items: center; gap: 12px; }
.create-author > div { display: grid; min-width: 0; }
.create-author b { font-size: 14.5px; font-weight: 700; color: var(--mg-text); }
.create-author small { margin-top: 2px; font-size: 12.5px; color: var(--mg-muted); }
.create-visibility {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--mg-line); background: var(--mg-surface-2);
  font-size: 12px; font-weight: 600; color: var(--mg-muted); white-space: nowrap;
}

.create-card textarea {
  width: 100%; min-height: 150px; resize: vertical;
  margin-top: 14px; padding: 14px;
  background: var(--mg-surface-2); border: 1px solid var(--mg-line); border-radius: 14px;
  color: var(--mg-text); font-size: 16px; line-height: 1.55; outline: none;
  transition: border-color .15s ease;
}
.create-card textarea:focus { border-color: var(--mg-accent); }
.create-card textarea::placeholder { color: var(--mg-faint); }
.create-counter { margin-top: 6px; text-align: right; font-size: 12px; color: var(--mg-faint); }
.create-counter.over { color: var(--mg-accent-ink); font-weight: 700; }

/* Dosya seçme alanı */
.create-drop {
  margin-top: 14px; padding: 22px 16px;
  display: grid; justify-items: center; gap: 6px; text-align: center;
  border: 1px dashed var(--mg-line-strong); border-radius: 14px;
  background: var(--mg-surface-2); cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.create-drop:hover { border-color: var(--mg-accent); background: var(--mg-accent-soft); }
.create-drop.compact { padding: 12px; }
.create-drop b { font-size: 13.5px; font-weight: 700; color: var(--mg-text); }
.create-drop small { font-size: 12px; color: var(--mg-muted); }
.create-drop .mg-icon { color: var(--mg-accent-ink); }
.create-drop input[type="file"] { display: none; }

/* Seçilen dosyalar */
.create-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-top: 14px; }
.create-thumb {
  position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden;
  background: var(--mg-surface-2); border: 1px solid var(--mg-line);
  display: grid; place-items: center;
}
.create-thumb img { width: 100%; height: 100%; object-fit: cover; }
.create-thumb.is-video { display: grid; align-content: center; justify-items: center; gap: 6px; padding: 10px; }
.create-thumb.is-video i { color: var(--mg-accent-ink); }
.create-thumb small { font-size: 11px; color: var(--mg-muted); text-align: center; word-break: break-word; }
.create-thumb button {
  position: absolute; top: 6px; right: 6px; width: 24px; height: 24px;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: rgba(10, 13, 16, .72); color: #fff; cursor: pointer;
}
.create-thumb button:hover { background: var(--mg-accent); }

/* Anket */
.create-poll-add {
  margin-top: 12px; height: 38px; padding: 0 14px;
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--mg-line-strong); border-radius: 10px;
  background: transparent; color: var(--mg-text); cursor: pointer;
  font-size: 13px; font-weight: 700;
}
.create-poll-add:hover { border-color: var(--mg-accent); color: var(--mg-accent-ink); }
.create-poll {
  margin-top: 14px; padding: 14px;
  border: 1px solid var(--mg-line); border-radius: 14px; background: var(--mg-surface-2);
  display: grid; gap: 9px;
}
.create-poll-head { display: flex; align-items: center; justify-content: space-between; }
.create-poll-head b { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--mg-text); }
.create-poll-head button { border: 0; background: none; color: var(--mg-muted); cursor: pointer; }
.create-poll-head button:hover { color: var(--mg-accent-ink); }
.create-poll-row { display: flex; align-items: center; gap: 9px; }
.create-poll-row > span {
  width: 22px; height: 22px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--mg-surface); color: var(--mg-muted);
  font-size: 11px; font-weight: 800;
}
.create-poll-row input {
  flex: 1; min-width: 0; height: 40px; padding: 0 12px;
  border: 1px solid var(--mg-line); border-radius: 10px;
  background: var(--mg-surface); color: var(--mg-text); font-size: 14px; outline: none;
}
.create-poll-row input:focus { border-color: var(--mg-accent); }
.create-poll-row > button { border: 0; background: none; color: var(--mg-faint); cursor: pointer; }
.create-poll-row > button:hover { color: var(--mg-accent-ink); }
.create-poll-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.create-poll-foot .poll-add {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px;
  border: 1px dashed var(--mg-line-strong); border-radius: 9px; background: transparent;
  color: var(--mg-text); font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.create-poll-foot .poll-add:hover { border-color: var(--mg-accent); color: var(--mg-accent-ink); }
.poll-duration { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--mg-muted); }
.poll-duration select {
  height: 34px; padding: 0 8px; border: 1px solid var(--mg-line); border-radius: 9px;
  background: var(--mg-surface); color: var(--mg-text); font-size: 12.5px;
}

/* Alt satır */
.create-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--mg-line);
}
.create-note { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--mg-muted); }
.create-note .mg-icon { color: var(--mg-accent-ink); }
.create-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.create-cancel {
  height: 40px; padding: 0 16px; display: inline-flex; align-items: center;
  border-radius: 10px; border: 1px solid var(--mg-line-strong);
  color: var(--mg-text); text-decoration: none; font-size: 13.5px; font-weight: 700;
}
.create-cancel:hover { border-color: var(--mg-accent); color: var(--mg-accent-ink); }
.publish-button {
  height: 40px; padding: 0 20px; display: inline-flex; align-items: center; gap: 8px;
  border: 0; border-radius: 10px; background: var(--mg-accent); color: #fff;
  font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.publish-button:hover:not(:disabled) { background: var(--mg-accent-ink); }
.publish-button:disabled { opacity: .45; cursor: default; }

/* Paylaş sayfası: iki sütun (yazı alanı + kurallar). */
@media (min-width: 1100px) {
  .create-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 18px; align-items: start; }
  .create-grid .create-card { margin-top: 18px; }
  .create-side { position: sticky; top: calc(var(--mg-topbar-h) + 18px); display: grid; gap: 12px; margin-top: 18px; }
}
@media (max-width: 1099px) {
  .create-side { display: grid; gap: 12px; margin-top: 14px; }
}
.create-tip { padding: 14px 16px; border: 1px solid var(--mg-line); border-radius: 14px; background: var(--mg-surface); }
.create-tip.muted { background: var(--mg-surface-2); }
.create-tip h2 { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; font-size: 13.5px; font-weight: 700; color: var(--mg-text); }
.create-tip h2 .mg-icon { color: var(--mg-accent-ink); }
.create-tip ul { margin: 0; padding-left: 16px; display: grid; gap: 6px; }
.create-tip li, .create-tip p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--mg-muted); }
.create-tip b { color: var(--mg-text); }

.create-files-head { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.create-files-head b { font-size: 13px; color: var(--mg-text); }
.create-files-head small { font-size: 12px; color: var(--mg-faint); }
.create-files-clear {
  margin-left: auto; border: 0; background: none; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--mg-muted);
}
.create-files-clear:hover { color: var(--mg-accent-ink); }

/* ---------- 17) Keşfet: Haftanın garajı (afiş karuselinin hemen üstünde) ---------- */
.gotw {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  margin: 0 0 16px; border: 1px solid var(--mg-line); border-radius: 18px;
  background: var(--mg-surface); overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,.02) inset;
}
.gotw-media { position: relative; display: block; min-height: 260px; background: var(--mg-surface-2); overflow: hidden; }
.gotw-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.gotw-media:hover > img { transform: scale(1.03); }
.gotw-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.28), transparent 32%, transparent 62%, rgba(0,0,0,.42)); pointer-events: none; }
.gotw-art { position: absolute; inset: 0; display: grid; place-items: center; color: var(--mg-faint); }
.gotw-badge {
  position: absolute; z-index: 1; top: 14px; left: 14px;
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px 6px 9px; border-radius: 999px;
  background: var(--mg-accent); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .2px;
  box-shadow: 0 6px 18px rgba(233, 0, 63, .35);
}
.gotw-strip { position: absolute; z-index: 1; right: 12px; bottom: 12px; display: flex; gap: 6px; }
.gotw-strip img, .gotw-strip b { width: 54px; height: 40px; border-radius: 8px; object-fit: cover; border: 2px solid rgba(255,255,255,.85); background: rgba(0,0,0,.5); }
.gotw-strip b { display: grid; place-items: center; color: #fff; font-size: 12px; }
.gotw-body { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px; min-width: 0; }
.gotw-kicker { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--mg-accent-ink); }
.gotw-kicker span { padding: 3px 9px; border-radius: 999px; background: var(--mg-accent-soft); }
.gotw h2 { margin: 0; font-size: clamp(20px, 2.1vw, 26px); line-height: 1.2; letter-spacing: -.4px; font-weight: 800; color: var(--mg-text); }
.gotw-vehicle { display: flex; align-items: center; gap: 10px; }
.gotw-brand { width: 38px; height: 38px; object-fit: contain; padding: 5px; border-radius: 10px; background: var(--mg-surface-2); border: 1px solid var(--mg-line); }
.gotw-vehicle div { display: flex; flex-direction: column; min-width: 0; }
.gotw-vehicle strong { font-size: 15.5px; color: var(--mg-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gotw-vehicle small { color: var(--mg-muted); font-size: 12.5px; }
.gotw-desc { margin: 0; color: var(--mg-muted); font-size: 14px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gotw-foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding-top: 12px; border-top: 1px solid var(--mg-line); }
.gotw-owner { display: flex; align-items: center; gap: 9px; min-width: 0; text-decoration: none; color: inherit; }
.gotw-owner span { display: flex; flex-direction: column; min-width: 0; }
.gotw-owner b { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; color: var(--mg-text); }
.gotw-owner b svg { color: var(--mg-accent); }
.gotw-owner small { color: var(--mg-faint); font-size: 12px; }
.gotw-stats { display: flex; gap: 12px; margin: 0; padding: 0; list-style: none; color: var(--mg-muted); font-size: 13px; font-weight: 600; }
.gotw-stats li { display: inline-flex; align-items: center; gap: 5px; }
.gotw-cta {
  margin-left: auto; display: inline-flex; align-items: center; gap: 4px; height: 38px; padding: 0 14px 0 16px; border-radius: 999px;
  background: var(--mg-text); color: var(--mg-surface); font-size: 13px; font-weight: 800; text-decoration: none; transition: transform .15s, opacity .15s;
}
.gotw-cta:hover { transform: translateX(2px); opacity: .92; }
@media (max-width: 1100px) {
  .gotw { grid-template-columns: 1fr; }
  .gotw-media { min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 560px) {
  .gotw { border-radius: 14px; }
  .gotw-body { padding: 16px; }
  .gotw-cta { margin-left: 0; width: 100%; justify-content: center; }
  .gotw-strip img, .gotw-strip b { width: 44px; height: 32px; }
}