/* ===========================================================
   Birlix Group Page — 2026 Premium UI Overlay
   ---
   Strategy: pure CSS overlay scoped under
   `.sg-offcanvas-mainbar`. No HTML/JS changes
   required. Compresses pre-feed area, modernizes typography,
   sticky segmented nav, mobile-first thumb ergonomics, safe-area.
   =========================================================== */

/* Tunables ------------------------------------------------- */
.sg-offcanvas-mainbar {
  --g2026-radius-lg: 22px;
  --g2026-radius-md: 14px;
  --g2026-radius-sm: 10px;
  --g2026-surface: #ffffff;
  --g2026-surface-2: #f7f8fa;
  --g2026-border: rgba(15, 23, 42, 0.06);
  --g2026-border-strong: rgba(15, 23, 42, 0.10);
  --g2026-text: #0f172a;
  --g2026-text-2: #475569;
  --g2026-text-3: #94a3b8;
  --g2026-accent: var(--bs-primary, #4f46e5);
  --g2026-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 1px rgba(15, 23, 42, .02);
  --g2026-shadow-md: 0 6px 24px rgba(15, 23, 42, .06), 0 2px 6px rgba(15, 23, 42, .04);
  --g2026-cover-h: clamp(120px, 24vw, 200px);
  --g2026-avatar: 88px;
  --g2026-gap: 14px;
}

body.night-mode .sg-offcanvas-mainbar,
[data-bs-theme="dark"] .sg-offcanvas-mainbar {
  --g2026-surface: #11161d;
  --g2026-surface-2: #161b23;
  --g2026-border: rgba(255, 255, 255, 0.06);
  --g2026-border-strong: rgba(255, 255, 255, 0.10);
  --g2026-text: #e6e8eb;
  --g2026-text-2: #b8bfc8;
  --g2026-text-3: #6b7280;
  --g2026-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --g2026-shadow-md: 0 6px 24px rgba(0, 0, 0, .35);
}

/* Global density reset for the mainbar ---------------------- */
.sg-offcanvas-mainbar {
  color: var(--g2026-text);
  font-feature-settings: "ss01" on, "cv11" on;
  -webkit-font-smoothing: antialiased;
}

/* =========================================================
   1) HEADER — compact cover + avatar
   ========================================================= */
.sg-offcanvas-mainbar .profile-header {
  background: var(--g2026-surface);
  border: 1px solid var(--g2026-border);
  border-radius: var(--g2026-radius-lg);
  box-shadow: var(--g2026-shadow-md);
  overflow: hidden;
  padding-bottom: 14px;
  margin-bottom: 14px;
}

.sg-offcanvas-mainbar .profile-cover-wrapper {
  height: var(--g2026-cover-h);
  border-radius: 0;
  overflow: hidden;
  position: relative;
}
.sg-offcanvas-mainbar .profile-cover-wrapper::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 60%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .18) 100%);
}
.sg-offcanvas-mainbar .profile-cover-wrapper img.js_position-cover-cropped {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Floating cover action buttons — frosted glass */
.sg-offcanvas-mainbar .profile-cover-buttons,
.sg-offcanvas-mainbar .profile-cover-change,
.sg-offcanvas-mainbar .profile-cover-position,
.sg-offcanvas-mainbar .profile-cover-delete {
  z-index: 2;
}
.sg-offcanvas-mainbar .profile-cover-change > i.fa,
.sg-offcanvas-mainbar .profile-cover-position > i.fa,
.sg-offcanvas-mainbar .profile-cover-delete > i.fa {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #0f172a;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  font-size: 14px;
}

/* Avatar */
.sg-offcanvas-mainbar .profile-avatar-wrapper {
  width: var(--g2026-avatar);
  height: var(--g2026-avatar);
  margin: calc(var(--g2026-avatar) / -2) auto 8px;
  border-radius: 50%;
  background: var(--g2026-surface);
  padding: 4px;
  box-shadow: var(--g2026-shadow-md);
  position: relative;
  z-index: 3;
}
.sg-offcanvas-mainbar .profile-avatar-wrapper > img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* Avatar action overlay buttons */
.sg-offcanvas-mainbar .profile-avatar-change > i.fa,
.sg-offcanvas-mainbar .profile-avatar-crop > i.fa,
.sg-offcanvas-mainbar .profile-avatar-delete > i.fa {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--g2026-surface);
  color: var(--g2026-text);
  box-shadow: var(--g2026-shadow-sm);
}

/* Name section */
.sg-offcanvas-mainbar .profile-name-wrapper {
  padding: 0 16px;
  text-align: center;
}
.sg-offcanvas-mainbar .profile-name-wrapper h1,
.sg-offcanvas-mainbar .profile-name-wrapper h2,
.sg-offcanvas-mainbar .profile-name-wrapper .profile-name {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
  margin: 4px 0 6px;
  color: var(--g2026-text);
}
.sg-offcanvas-mainbar .privacy-badge {
  color: var(--g2026-text-3);
  font-size: .82em;
  margin-left: 4px;
}

/* Meta chips — modern pills */
.sg-offcanvas-mainbar .bx-profile-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 6px 0 0 !important;
}
.sg-offcanvas-mainbar .bx-profile-meta .bx-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 500;
  background: var(--g2026-surface-2);
  border: 1px solid var(--g2026-border);
  color: var(--g2026-text-2);
  line-height: 1.4;
}
.sg-offcanvas-mainbar .bx-profile-meta .bx-chip i {
  margin-right: 4px !important;
  font-size: .85em;
  opacity: .75;
}
.sg-offcanvas-mainbar .bx-profile-meta .bx-chip-warning {
  background: rgba(245, 158, 11, .12);
  color: #b45309;
  border-color: rgba(245, 158, 11, .25);
}
[data-bs-theme="dark"] .sg-offcanvas-mainbar .bx-profile-meta .bx-chip-warning,
body.night-mode .sg-offcanvas-mainbar .bx-profile-meta .bx-chip-warning {
  color: #fbbf24;
}
.sg-offcanvas-mainbar .bx-profile-meta .bx-chip-danger {
  background: rgba(239, 68, 68, .12);
  color: #b91c1c;
  border-color: rgba(239, 68, 68, .25);
}

/* Stats — compact horizontal row */
.sg-offcanvas-mainbar .bx-profile-stats {
  display: flex;
  justify-content: center;
  gap: 0;
  margin: 12px 12px 0 !important;
  padding: 10px 4px;
  background: var(--g2026-surface-2);
  border: 1px solid var(--g2026-border);
  border-radius: var(--g2026-radius-md);
}
.sg-offcanvas-mainbar .bx-profile-stats .bx-stat {
  flex: 1;
  text-align: center;
  padding: 2px 6px;
  position: relative;
}
.sg-offcanvas-mainbar .bx-profile-stats .bx-stat + .bx-stat::before {
  content: "";
  position: absolute;
  left: 0; top: 18%;
  height: 64%;
  width: 1px;
  background: var(--g2026-border-strong);
}
.sg-offcanvas-mainbar .bx-profile-stats .bx-stat-num {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--g2026-text);
  line-height: 1.1;
}
.sg-offcanvas-mainbar .bx-profile-stats .bx-stat-label {
  font-size: .68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--g2026-text-3);
  margin-top: 2px;
}

/* Action buttons row — icon-first compact pills */
.sg-offcanvas-mainbar .profile-buttons-wrapper {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 12px 0 !important;
  padding: 0;
}
.sg-offcanvas-mainbar .profile-buttons-wrapper > .btn,
.sg-offcanvas-mainbar .profile-buttons-wrapper > .dropdown > .btn,
.sg-offcanvas-mainbar .profile-buttons-wrapper button {
  border-radius: 999px !important;
  font-weight: 600;
  font-size: .85rem;
  padding: 8px 16px;
  min-height: 40px;
  box-shadow: none;
  border-width: 1px;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.sg-offcanvas-mainbar .profile-buttons-wrapper > .btn:active {
  transform: scale(.97);
}
.sg-offcanvas-mainbar .profile-buttons-wrapper .btn-success {
  background: var(--g2026-accent);
  border-color: var(--g2026-accent);
}
.sg-offcanvas-mainbar .profile-buttons-wrapper .btn-light {
  background: var(--g2026-surface-2);
  border-color: var(--g2026-border);
  color: var(--g2026-text);
}

/* =========================================================
   2) STICKY SEGMENTED NAVIGATION
   ========================================================= */
.sg-offcanvas-mainbar .profile-tabs-wrapper {
  position: sticky;
  top: 0;
  z-index: 50;
  margin: 14px 0 14px;
  padding: 6px;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border: 1px solid var(--g2026-border);
  border-radius: var(--g2026-radius-md);
  box-shadow: var(--g2026-shadow-sm);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  justify-content: flex-start !important;
  gap: 4px;
  flex-wrap: nowrap !important;
}
[data-bs-theme="dark"] .sg-offcanvas-mainbar .profile-tabs-wrapper,
body.night-mode .sg-offcanvas-mainbar .profile-tabs-wrapper {
  background: rgba(17, 22, 29, .82);
}
.sg-offcanvas-mainbar .profile-tabs-wrapper::-webkit-scrollbar { display: none; }

.sg-offcanvas-mainbar .profile-tabs-wrapper > a {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--g2026-text-2);
  text-decoration: none;
  scroll-snap-align: start;
  transition: background .15s ease, color .15s ease, transform .12s ease;
  flex: 0 0 auto;
  border: 1px solid transparent;
}
.sg-offcanvas-mainbar .profile-tabs-wrapper > a:hover {
  color: var(--g2026-text);
  background: var(--g2026-surface-2);
}
.sg-offcanvas-mainbar .profile-tabs-wrapper > a.active {
  background: var(--g2026-text);
  color: var(--g2026-surface);
  box-shadow: 0 2px 8px rgba(15, 23, 42, .18);
}
.sg-offcanvas-mainbar .profile-tabs-wrapper > a .main-icon {
  width: 18px !important;
  height: 18px !important;
}
.sg-offcanvas-mainbar .profile-tabs-wrapper > a:active {
  transform: scale(.96);
}

/* Group modules secondary tab row */
.sg-offcanvas-mainbar .profile-tabs-wrapper:has(.module-tab) {
  position: static;
  background: transparent;
  border: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding: 4px 0;
}

/* =========================================================
   3) DUES / ADMIN ALERT — compact chip card
   ========================================================= */
.sg-offcanvas-mainbar .dues-alert-box {
  margin: 10px 0;
  padding: 12px 14px;
  background: linear-gradient(135deg, #fef2f2 0%, #fff7ed 100%);
  border: 1px solid rgba(239, 68, 68, .15);
  border-radius: var(--g2026-radius-md);
  box-shadow: var(--g2026-shadow-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
[data-bs-theme="dark"] .sg-offcanvas-mainbar .dues-alert-box,
body.night-mode .sg-offcanvas-mainbar .dues-alert-box {
  background: linear-gradient(135deg, rgba(239, 68, 68, .08), rgba(245, 158, 11, .06));
}
.sg-offcanvas-mainbar .dues-alert-left {
  display: flex; align-items: center; gap: 10px;
  flex: 1; min-width: 0;
}
.sg-offcanvas-mainbar .dues-alert-icon-wrap {
  width: 36px; height: 36px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: #ef4444; color: #fff;
  flex-shrink: 0;
}
.sg-offcanvas-mainbar .dues-alert-title {
  font-weight: 700; font-size: .92rem;
  color: var(--g2026-text);
  line-height: 1.2;
}
.sg-offcanvas-mainbar .dues-alert-detail {
  font-size: .76rem;
  color: var(--g2026-text-2);
  margin-top: 2px;
}
.sg-offcanvas-mainbar .dues-alert-chip {
  display: inline-block;
  padding: 2px 6px;
  margin-right: 4px;
  border-radius: 6px;
  background: rgba(255,255,255,.6);
  font-size: .74rem;
}
.sg-offcanvas-mainbar .dues-alert-action {
  padding: 8px 14px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff !important;
  font-weight: 600;
  font-size: .82rem;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

/* =========================================================
   4) FEED / TIMELINE — premium cards
   ========================================================= */
.sg-offcanvas-mainbar .js_posts_stream,
.sg-offcanvas-mainbar .js_posts_stream_staging {
  padding: 0;
  margin: 0;
  list-style: none;
}
.sg-offcanvas-mainbar .js_posts_stream > li,
.sg-offcanvas-mainbar .js_posts_stream_staging > li {
  margin: 0 0 14px;
  list-style: none;
}
.sg-offcanvas-mainbar .post {
  background: var(--g2026-surface);
  border: 1px solid var(--g2026-border);
  border-radius: var(--g2026-radius-lg);
  box-shadow: var(--g2026-shadow-sm);
  overflow: visible;
  /* burak: do NOT use `contain` or `transform` here — they would create
     a containing block for the position:fixed reactions popup, trapping
     it inside the card. */
  transition: box-shadow .2s ease;
}
.sg-offcanvas-mainbar .post:hover {
  box-shadow: var(--g2026-shadow-md);
}
.sg-offcanvas-mainbar .post .post-header,
.sg-offcanvas-mainbar .post .post-content,
.sg-offcanvas-mainbar .post .post-meta {
  padding-left: 14px !important;
  padding-right: 14px !important;
}
.sg-offcanvas-mainbar .post .post-media,
.sg-offcanvas-mainbar .post .post-media-wrapper {
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 0;
}
.sg-offcanvas-mainbar .post .post-media img,
.sg-offcanvas-mainbar .post .post-media video {
  width: 100%;
  display: block;
}

/* publisher box */
.sg-offcanvas-mainbar .js_publisher-box,
.sg-offcanvas-mainbar .publisher-box {
  background: var(--g2026-surface);
  border: 1px solid var(--g2026-border);
  border-radius: var(--g2026-radius-lg);
  box-shadow: var(--g2026-shadow-sm);
  padding: 12px 14px;
  margin-bottom: 14px;
}

/* =========================================================
   5) MOBILE OPTIMIZATIONS
   ========================================================= */
@media (max-width: 767.98px) {
  .sg-offcanvas-mainbar {
    --g2026-cover-h: clamp(110px, 32vw, 160px);
    --g2026-avatar: 76px;
  }
  .sg-offcanvas-mainbar .profile-header {
    border-radius: 18px;
    margin-left: -4px;
    margin-right: -4px;
  }
  .sg-offcanvas-mainbar .profile-name-wrapper h1,
  .sg-offcanvas-mainbar .profile-name-wrapper h2,
  .sg-offcanvas-mainbar .profile-name-wrapper .profile-name {
    font-size: 1.15rem;
  }
  .sg-offcanvas-mainbar .bx-profile-stats {
    margin: 10px 10px 0 !important;
    padding: 8px 2px;
  }
  .sg-offcanvas-mainbar .bx-profile-stats .bx-stat-num { font-size: .98rem; }
  .sg-offcanvas-mainbar .bx-profile-stats .bx-stat-label { font-size: .62rem; }

  .sg-offcanvas-mainbar .profile-buttons-wrapper {
    gap: 6px;
    margin: 10px 10px 12px !important;
  }
  .sg-offcanvas-mainbar .profile-buttons-wrapper > .btn,
  .sg-offcanvas-mainbar .profile-buttons-wrapper button {
    padding: 7px 12px;
    min-height: 38px;
    font-size: .8rem;
  }

  /* hide xxl labels are already hidden — make sure icons are tappable */
  .sg-offcanvas-mainbar .profile-buttons-wrapper i {
    font-size: 14px;
  }

  /* sticky tabs flush to viewport on mobile */
  .sg-offcanvas-mainbar .profile-tabs-wrapper {
    margin: 12px -4px 12px;
    border-radius: 14px;
  }
  .sg-offcanvas-mainbar .profile-tabs-wrapper > a {
    padding: 7px 12px;
    font-size: .78rem;
  }

  /* posts edge-to-edge feel */
  .sg-offcanvas-mainbar .post {
    border-radius: 16px;
  }

  /* respect bottom safe-area for fixed/bottom UI; the existing
     bottom nav lives outside this scope, but we add bottom space
     to the last feed item so it isn't covered. */
  .sg-offcanvas-mainbar .js_posts_stream {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
}

/* iOS WebView momentum + overscroll fixes */
.sg-offcanvas-mainbar .profile-tabs-wrapper {
  overscroll-behavior-x: contain;
  touch-action: pan-x;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .sg-offcanvas-mainbar * {
    transition: none !important;
    animation: none !important;
  }
}

/* =========================================================
   6) MISC — hide a few legacy noisy visuals (safe)
   ========================================================= */
/* the wide "module-tab" secondary row already styled above */

/* Make ads strip blend with new design */
.sg-offcanvas-mainbar .group-ads-strip,
.sg-offcanvas-mainbar [class*="group-ads"] {
  border-radius: var(--g2026-radius-md);
  border-color: var(--g2026-border) !important;
  box-shadow: var(--g2026-shadow-sm);
}

/* =========================================================
   7) PRIORITY OVERRIDES — supersede legacy inline & theme CSS
   Cascade-last, force visual correctness on group/profile/page.
   ========================================================= */

/* Ensure profile-header is positioning context */
.sg-offcanvas-mainbar .profile-header {
  position: relative !important;
}

/* Avatar — force centered horizontal overlap on ALL breakpoints */
.sg-offcanvas-mainbar .profile-avatar-wrapper {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  top: var(--g2026-cover-h) !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  width: var(--g2026-avatar) !important;
  height: var(--g2026-avatar) !important;
  padding: 4px !important;
  background: var(--g2026-surface) !important;
  border-radius: 50% !important;
  box-shadow: var(--g2026-shadow-md) !important;
  z-index: 4 !important;
}
.sg-offcanvas-mainbar .profile-avatar-wrapper > img,
.sg-offcanvas-mainbar .profile-avatar-wrapper .profile-avatar {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
}
.sg-offcanvas-mainbar .profile-avatar-wrapper:hover {
  transform: translate(-50%, -50%) scale(1.03) !important;
}

/* Push name section below the overlapping avatar */
.sg-offcanvas-mainbar .profile-name-wrapper {
  padding-top: calc(var(--g2026-avatar) / 2 + 12px) !important;
  padding-bottom: 4px !important;
  text-align: center !important;
}

/* Force name color to theme (kill old gradient/white) */
.sg-offcanvas-mainbar .profile-name-wrapper a,
.sg-offcanvas-mainbar .profile-name-wrapper h1,
.sg-offcanvas-mainbar .profile-name-wrapper h2 {
  color: var(--g2026-text) !important;
  -webkit-text-fill-color: var(--g2026-text) !important;
  background: none !important;
  font-weight: 700 !important;
  font-size: 1.25rem !important;
  letter-spacing: -.01em !important;
}
.sg-offcanvas-mainbar .privacy-badge {
  color: var(--g2026-text-3) !important;
  opacity: 1 !important;
}

/* Chips — bright readable variant (override the dark glass legacy) */
.sg-offcanvas-mainbar .bx-profile-meta .bx-chip {
  background: var(--g2026-surface-2) !important;
  color: var(--g2026-text-2) !important;
  border: 1px solid var(--g2026-border) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  font-size: .78rem !important;
  font-weight: 500 !important;
  padding: 4px 10px !important;
}
.sg-offcanvas-mainbar .bx-profile-meta .bx-chip i,
.sg-offcanvas-mainbar .bx-profile-meta .bx-chip svg {
  color: var(--g2026-text-2) !important;
  opacity: .8 !important;
}
.sg-offcanvas-mainbar .bx-profile-meta .bx-chip-warning {
  background: rgba(245, 158, 11, .14) !important;
  color: #b45309 !important;
  border-color: rgba(245, 158, 11, .28) !important;
}
body.night-mode .sg-offcanvas-mainbar .bx-profile-meta .bx-chip-warning,
[data-bs-theme="dark"] .sg-offcanvas-mainbar .bx-profile-meta .bx-chip-warning {
  color: #fbbf24 !important;
}

/* Stats — light card variant */
.sg-offcanvas-mainbar .bx-profile-stats {
  background: var(--g2026-surface-2) !important;
  border: 1px solid var(--g2026-border) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  max-width: 460px !important;
}
.sg-offcanvas-mainbar .bx-profile-stats .bx-stat-num {
  color: var(--g2026-text) !important;
}
.sg-offcanvas-mainbar .bx-profile-stats .bx-stat-label {
  color: var(--g2026-text-3) !important;
}
.sg-offcanvas-mainbar .bx-profile-stats .bx-stat + .bx-stat::before {
  background: var(--g2026-border-strong) !important;
}

/* Cover edit buttons — frosted glass, top-left stacked */
.sg-offcanvas-mainbar .profile-cover-buttons {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  right: auto !important;
  display: flex !important;
  gap: 6px !important;
  z-index: 3 !important;
}
.sg-offcanvas-mainbar .profile-cover-buttons > * {
  margin: 0 !important;
}
.sg-offcanvas-mainbar .profile-cover-change > i.fa,
.sg-offcanvas-mainbar .profile-cover-position > i.fa,
.sg-offcanvas-mainbar .profile-cover-delete > i.fa {
  width: 34px !important;
  height: 34px !important;
  background: rgba(255, 255, 255, .75) !important;
  color: #0f172a !important;
  border-radius: 10px !important;
  -webkit-backdrop-filter: blur(10px) saturate(160%) !important;
  backdrop-filter: blur(10px) saturate(160%) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.18) !important;
  font-size: 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255,255,255,.5) !important;
}

/* Avatar edit buttons (camera / crop / trash) */
.sg-offcanvas-mainbar .profile-avatar-change,
.sg-offcanvas-mainbar .profile-avatar-crop,
.sg-offcanvas-mainbar .profile-avatar-delete {
  z-index: 5 !important;
}

/* Hide module-tabs row clutter if it's empty/iconic noise */
.sg-offcanvas-mainbar .profile-content-tabs ~ ul.list-inline-icons,
.sg-offcanvas-mainbar > ul.list-inline-icons {
  display: none !important;
}

/* Alert pills (5 kişi katılmak istiyor) — strong header */
.sg-offcanvas-mainbar .dues-alert-box,
.sg-offcanvas-mainbar .alert-box-rounded,
.sg-offcanvas-mainbar [class*="alert-box"] {
  background: var(--g2026-surface) !important;
  border: 1px solid var(--g2026-border) !important;
  border-radius: var(--g2026-radius-md) !important;
  box-shadow: var(--g2026-shadow-sm) !important;
  color: var(--g2026-text) !important;
  padding: 12px 14px !important;
  margin: 10px 0 !important;
  font-weight: 600 !important;
}
.sg-offcanvas-mainbar [class*="alert-box"] a,
.sg-offcanvas-mainbar [class*="alert-box"] strong {
  color: var(--g2026-text) !important;
  font-weight: 700 !important;
}

/* Action buttons (✓ i ⋮) — round icon-only on mobile */
.sg-offcanvas-mainbar .profile-buttons-wrapper {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  gap: 10px !important;
}

/* Mobile sticky tabs offset for bottom nav */
@media (max-width: 767.98px) {
  .sg-offcanvas-mainbar .profile-tabs-wrapper {
    margin: 12px -8px !important;
    padding: 6px 8px !important;
  }
  .sg-offcanvas-mainbar .profile-header {
    border-radius: var(--g2026-radius-lg) !important;
  }
}

/* =========================================================
   8) STAGE-2 — match target mockup (image #2)
   - colored chips, underline tabs, primary action with label,
     premium post card, alert pill refinements
   ========================================================= */

/* --- 8.1 Tabs: underline indicator instead of pill --------- */
.sg-offcanvas-mainbar .profile-tabs-wrapper {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--g2026-border) !important;
  border-radius: 0 !important;
  padding: 0 6px !important;
  margin: 14px 0 12px !important;
  box-shadow: none !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  justify-content: flex-start !important;
  gap: 4px !important;
}
.sg-offcanvas-mainbar .profile-tabs-wrapper::-webkit-scrollbar { display: none !important; }
.sg-offcanvas-mainbar .profile-tabs-wrapper > a {
  position: relative !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 12px 14px !important;
  color: var(--g2026-text-2) !important;
  font-weight: 500 !important;
  font-size: .9rem !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
  transition: color .15s ease !important;
}
.sg-offcanvas-mainbar .profile-tabs-wrapper > a .main-icon,
.sg-offcanvas-mainbar .profile-tabs-wrapper > a svg {
  width: 18px !important;
  height: 18px !important;
  margin-right: 4px !important;
}
.sg-offcanvas-mainbar .profile-tabs-wrapper > a > span {
  display: inline-block !important;   /* force show label on mobile */
}
.sg-offcanvas-mainbar .profile-tabs-wrapper > a.active {
  color: var(--g2026-accent) !important;
  font-weight: 600 !important;
}
.sg-offcanvas-mainbar .profile-tabs-wrapper > a.active::after {
  content: "" !important;
  position: absolute !important;
  left: 14px !important;
  right: 14px !important;
  bottom: -1px !important;
  height: 2px !important;
  background: var(--g2026-accent) !important;
  border-radius: 2px 2px 0 0 !important;
}
.sg-offcanvas-mainbar .profile-tabs-wrapper > a:hover {
  color: var(--g2026-text) !important;
  background: transparent !important;
}

/* --- 8.2 Chips: colored per type (icon-based) -------------- */
.sg-offcanvas-mainbar .bx-profile-meta .bx-chip {
  font-weight: 600 !important;
}
/* tag/category — blue */
.sg-offcanvas-mainbar .bx-profile-meta .bx-chip:has(i.fa-tag),
.sg-offcanvas-mainbar .bx-profile-meta .bx-chip:has(i.fa-tags),
.sg-offcanvas-mainbar .bx-profile-meta .bx-chip:has(i.fa-bookmark) {
  background: rgba(59, 130, 246, .12) !important;
  color: #1d4ed8 !important;
  border-color: rgba(59, 130, 246, .25) !important;
}
.sg-offcanvas-mainbar .bx-profile-meta .bx-chip:has(i.fa-tag) i,
.sg-offcanvas-mainbar .bx-profile-meta .bx-chip:has(i.fa-tags) i,
.sg-offcanvas-mainbar .bx-profile-meta .bx-chip:has(i.fa-bookmark) i {
  color: #1d4ed8 !important;
  opacity: 1 !important;
}
/* members — green */
.sg-offcanvas-mainbar .bx-profile-meta .bx-chip:has(i.fa-users),
.sg-offcanvas-mainbar .bx-profile-meta .bx-chip:has(i.fa-user-friends),
.sg-offcanvas-mainbar .bx-profile-meta .bx-chip:has(i.fa-user-group) {
  background: rgba(16, 185, 129, .12) !important;
  color: #047857 !important;
  border-color: rgba(16, 185, 129, .25) !important;
}
.sg-offcanvas-mainbar .bx-profile-meta .bx-chip:has(i.fa-users) i,
.sg-offcanvas-mainbar .bx-profile-meta .bx-chip:has(i.fa-user-friends) i,
.sg-offcanvas-mainbar .bx-profile-meta .bx-chip:has(i.fa-user-group) i {
  color: #047857 !important;
  opacity: 1 !important;
}
/* rating/star — amber */
.sg-offcanvas-mainbar .bx-profile-meta .bx-chip:has(i.fa-star) {
  background: rgba(245, 158, 11, .14) !important;
  color: #b45309 !important;
  border-color: rgba(245, 158, 11, .30) !important;
}
.sg-offcanvas-mainbar .bx-profile-meta .bx-chip:has(i.fa-star) i {
  color: #f59e0b !important;
  opacity: 1 !important;
}
[data-bs-theme="dark"] .sg-offcanvas-mainbar .bx-profile-meta .bx-chip:has(i.fa-tag),
body.night-mode .sg-offcanvas-mainbar .bx-profile-meta .bx-chip:has(i.fa-tag),
[data-bs-theme="dark"] .sg-offcanvas-mainbar .bx-profile-meta .bx-chip:has(i.fa-tags),
body.night-mode .sg-offcanvas-mainbar .bx-profile-meta .bx-chip:has(i.fa-tags) {
  color: #60a5fa !important;
}
[data-bs-theme="dark"] .sg-offcanvas-mainbar .bx-profile-meta .bx-chip:has(i.fa-users),
body.night-mode .sg-offcanvas-mainbar .bx-profile-meta .bx-chip:has(i.fa-users) {
  color: #34d399 !important;
}
[data-bs-theme="dark"] .sg-offcanvas-mainbar .bx-profile-meta .bx-chip:has(i.fa-star),
body.night-mode .sg-offcanvas-mainbar .bx-profile-meta .bx-chip:has(i.fa-star) {
  color: #fbbf24 !important;
}

/* --- 8.3 Primary action button: show label, big pill ------- */
.sg-offcanvas-mainbar .profile-buttons-wrapper {
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  padding: 14px 16px !important;
}
.sg-offcanvas-mainbar .profile-buttons-wrapper > .btn:first-child {
  flex: 0 1 auto !important;
  min-width: 160px !important;
  padding-left: 22px !important;
  padding-right: 22px !important;
  height: 44px !important;
  font-size: .92rem !important;
}
/* force the label span visible on first (primary) button */
.sg-offcanvas-mainbar .profile-buttons-wrapper > .btn:first-child > span {
  display: inline-block !important;
  margin-left: 6px !important;
}
/* secondary buttons stay icon-only round */
.sg-offcanvas-mainbar .profile-buttons-wrapper > .btn:not(:first-child),
.sg-offcanvas-mainbar .profile-buttons-wrapper > .dropdown > .btn {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--g2026-surface) !important;
  border: 1px solid var(--g2026-border-strong) !important;
  color: var(--g2026-text-2) !important;
}
.sg-offcanvas-mainbar .profile-buttons-wrapper > .btn:not(:first-child) > span {
  display: none !important;
}

/* --- 8.4 Post card: premium ------------------------------- */
.sg-offcanvas-mainbar .post {
  background: var(--g2026-surface) !important;
  border: 1px solid var(--g2026-border) !important;
  border-radius: var(--g2026-radius-lg) !important;
  box-shadow: var(--g2026-shadow-sm) !important;
  padding: 14px 16px !important;
  margin-bottom: 14px !important;
  overflow: visible !important;
  /* burak: NO `contain` / `transform` — keeps the reactions popup free to
     position:fixed against the viewport instead of the card. */
  transition: box-shadow .15s ease !important;
}
.sg-offcanvas-mainbar .post:hover {
  box-shadow: var(--g2026-shadow-md) !important;
}
.sg-offcanvas-mainbar .post .post-header,
.sg-offcanvas-mainbar .post .post-author-wrapper {
  margin-bottom: 10px !important;
}
.sg-offcanvas-mainbar .post .post-author-wrapper .post-author,
.sg-offcanvas-mainbar .post .post-author {
  font-weight: 700 !important;
  color: var(--g2026-text) !important;
  font-size: .95rem !important;
}
.sg-offcanvas-mainbar .post .post-meta,
.sg-offcanvas-mainbar .post .post-meta-wrapper {
  color: var(--g2026-text-3) !important;
  font-size: .78rem !important;
}
.sg-offcanvas-mainbar .post .post-avatar img,
.sg-offcanvas-mainbar .post .post-author-image {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}
.sg-offcanvas-mainbar .post .post-content,
.sg-offcanvas-mainbar .post .post-message {
  font-size: .95rem !important;
  line-height: 1.55 !important;
  color: var(--g2026-text) !important;
}
.sg-offcanvas-mainbar .post .post-media,
.sg-offcanvas-mainbar .post .post-image-wrapper,
.sg-offcanvas-mainbar .post .js_lightbox-image {
  border-radius: var(--g2026-radius-md) !important;
  overflow: hidden !important;
  margin: 10px 0 !important;
}
.sg-offcanvas-mainbar .post .post-stats,
.sg-offcanvas-mainbar .post .post-actions,
.sg-offcanvas-mainbar .post .post-footer {
  border-top: 1px solid var(--g2026-border) !important;
  padding-top: 8px !important;
  margin-top: 10px !important;
}
.sg-offcanvas-mainbar .post .post-actions a,
.sg-offcanvas-mainbar .post .post-actions button {
  color: var(--g2026-text-2) !important;
  font-weight: 500 !important;
  font-size: .85rem !important;
  border-radius: 10px !important;
  padding: 6px 10px !important;
}
.sg-offcanvas-mainbar .post .post-actions a:hover,
.sg-offcanvas-mainbar .post .post-actions button:hover {
  background: var(--g2026-surface-2) !important;
  color: var(--g2026-text) !important;
}

/* --- 8.5 "Yönetici / Admin" role badge style --------------- */
.sg-offcanvas-mainbar .post .role-badge,
.sg-offcanvas-mainbar .post .badge-admin,
.sg-offcanvas-mainbar .post [class*="badge"][class*="admin"] {
  display: inline-flex !important;
  align-items: center !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  background: rgba(99, 102, 241, .12) !important;
  color: var(--g2026-accent) !important;
  border: 1px solid rgba(99, 102, 241, .25) !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  margin-left: 6px !important;
  letter-spacing: .02em !important;
}

/* --- 8.6 Publisher box (Senin aklında ne var?) ------------- */
.sg-offcanvas-mainbar .publisher-box,
.sg-offcanvas-mainbar .js_publisher-box,
.sg-offcanvas-mainbar [class*="publisher"] {
  background: var(--g2026-surface) !important;
  border: 1px solid var(--g2026-border) !important;
  border-radius: var(--g2026-radius-lg) !important;
  box-shadow: var(--g2026-shadow-sm) !important;
  padding: 12px 16px !important;
}

/* --- 8.7 Ad card already premium — refine border ----------- */
.sg-offcanvas-mainbar .bx-ad-card {
  border-radius: var(--g2026-radius-lg) !important;
  box-shadow: var(--g2026-shadow-sm) !important;
}

/* --- 8.8 Status dot on avatar (if green-dot element exists) */
.sg-offcanvas-mainbar .profile-avatar-wrapper .online-dot,
.sg-offcanvas-mainbar .profile-avatar-wrapper .js_online-indicator {
  position: absolute !important;
  right: 4px !important;
  bottom: 6px !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
  border: 2px solid var(--g2026-surface) !important;
  z-index: 6 !important;
}

/* =========================================================
   9) BOTTOM NAV — premium fixed bar with center FAB
   Lock against iOS rubber-band / Android URL-bar shifts.
   HTML untouched. 5 children; 3rd is "Add" (FAB).
   ========================================================= */

/* Container — true fixed, GPU-promoted, safe-area, no scroll-jitter */
.footer-bottom-bar {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 1050 !important;
  background: var(--g2026-surface, #ffffff) !important;
  border-top: 1px solid var(--g2026-border, rgba(15,23,42,.06)) !important;
  box-shadow: 0 -6px 18px rgba(15, 23, 42, .06) !important;
  height: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  padding: 6px 6px env(safe-area-inset-bottom, 0px) !important;

  /* Anti-jitter against iOS Safari elastic scroll & Android URL bar */
  transform: translateZ(0) !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
  will-change: transform !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  contain: layout paint !important;
  transition: none !important;
  -webkit-overflow-scrolling: auto !important;
  overscroll-behavior: contain !important;
  touch-action: manipulation !important;

  /* Frosted look (subtle, fast) */
  background-color: rgba(255, 255, 255, .92) !important;
  -webkit-backdrop-filter: saturate(180%) blur(14px) !important;
  backdrop-filter: saturate(180%) blur(14px) !important;
}
body.night-mode .footer-bottom-bar,
[data-bs-theme="dark"] .footer-bottom-bar {
  background: rgba(20, 22, 28, .88) !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
  box-shadow: 0 -6px 18px rgba(0, 0, 0, .35) !important;
}
.footer-bottom-bar > .container,
.footer-bottom-bar > .container-fluid {
  padding: 0 6px !important;
  height: 100% !important;
}

/* Links row — equal flex, no shrink */
.footer-bottom-bar .footer-bottom-bar-links {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 64px !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.footer-bottom-bar .footer-bottom-bar-links > .link {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  height: 64px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.footer-bottom-bar .footer-bottom-bar-links > .link > a {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  width: 100% !important;
  height: 56px !important;
  padding: 6px 4px !important;
  margin: 0 !important;
  border-radius: 12px !important;
  color: var(--g2026-text-3, #94a3b8) !important;
  background: transparent !important;
  transition: color .15s ease, transform .12s ease !important;
}
.footer-bottom-bar .footer-bottom-bar-links > .link > a:hover {
  background: transparent !important;
  color: var(--g2026-text, #0f172a) !important;
}
.footer-bottom-bar .footer-bottom-bar-links > .link > a:active {
  transform: scale(.94) !important;
}
.footer-bottom-bar .footer-bottom-bar-links > .link.active > a,
.footer-bottom-bar .footer-bottom-bar-links > .link > a.active {
  color: var(--g2026-accent, #4f46e5) !important;
}
.footer-bottom-bar .footer-bottom-bar-links .link > a > .title,
.footer-bottom-bar .footer-bottom-bar-links .link .title {
  font-size: 11px !important;
  line-height: 1.1 !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  margin-top: 2px !important;
}
.footer-bottom-bar .footer-bottom-bar-links .link svg,
.footer-bottom-bar .footer-bottom-bar-links .link .header-icon {
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
}
.footer-bottom-bar .footer-bottom-bar-links .link.active .header-icon,
.footer-bottom-bar .footer-bottom-bar-links .link > a.active .header-icon {
  color: var(--g2026-accent, #4f46e5) !important;
  fill: currentColor !important;
}

/* User avatar (5th item) sized like icon */
.footer-bottom-bar .footer-bottom-bar-links .link img,
.footer-bottom-bar .footer-bottom-bar-links .link .user-avatar img {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid transparent !important;
}
.footer-bottom-bar .footer-bottom-bar-links .link.active img,
.footer-bottom-bar .footer-bottom-bar-links .link > a.active img {
  border-color: var(--g2026-accent, #4f46e5) !important;
}

/* --- FAB: 3rd child is "Add" — make it a floating primary disc -- */
.footer-bottom-bar .footer-bottom-bar-links > .link:nth-child(3) {
  flex: 0 0 64px !important;
  position: relative !important;
}
.footer-bottom-bar .footer-bottom-bar-links > .link:nth-child(3) > a {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: var(--g2026-accent, #4f46e5) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(79, 70, 229, .35), 0 2px 8px rgba(15, 23, 42, .15) !important;
  margin-top: -16px !important;   /* lift above the bar */
  padding: 0 !important;
}
.footer-bottom-bar .footer-bottom-bar-links > .link:nth-child(3) > a:hover {
  background: var(--g2026-accent, #4f46e5) !important;
  color: #ffffff !important;
  filter: brightness(1.05) !important;
}
.footer-bottom-bar .footer-bottom-bar-links > .link:nth-child(3) > a > .title {
  display: none !important;   /* icon-only FAB */
}
.footer-bottom-bar .footer-bottom-bar-links > .link:nth-child(3) > a > svg,
.footer-bottom-bar .footer-bottom-bar-links > .link:nth-child(3) > a > .header-icon {
  width: 26px !important;
  height: 26px !important;
  color: #ffffff !important;
  fill: currentColor !important;
}

/* Notification counter pill on bottom nav */
.footer-bottom-bar .footer-bottom-bar-links .counter,
.footer-bottom-bar .footer-bottom-bar-links .badge {
  position: absolute !important;
  top: 4px !important;
  right: 18% !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  background: #ef4444 !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 18px !important;
  text-align: center !important;
  border: 2px solid var(--g2026-surface, #fff) !important;
}

/* Reserve bottom space so content isn't hidden under bar */
@media (max-width: 767.98px) {
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* If main wrapper already has padding, neutralize double-add */
  .main-wrapper,
  .sg-offcanvas-mainbar {
    padding-bottom: 8px !important;
  }
}

/* Hide on tablets+ as before */
@media (min-width: 768px) {
  .footer-bottom-bar { display: none !important; }
  body { padding-bottom: 0 !important; }
}

/* Add-menu dropdown popping above the FAB — premium card */
.footer-bottom-bar .dropdown-menu,
.footer-bottom-bar .dropdown-widget {
  border-radius: 18px !important;
  border: 1px solid var(--g2026-border, rgba(15,23,42,.06)) !important;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .18) !important;
  padding: 10px !important;
  margin-bottom: 14px !important;
  background: var(--g2026-surface, #fff) !important;
}
.footer-bottom-bar .footer-quick-adds {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
}
.footer-bottom-bar .footer-quick-adds .add-quick-item {
  border-radius: 14px !important;
  background: var(--g2026-surface-2, #f7f8fa) !important;
  padding: 14px 8px !important;
  text-align: center !important;
  color: var(--g2026-text, #0f172a) !important;
  border: 1px solid var(--g2026-border, rgba(15,23,42,.06)) !important;
  font-weight: 600 !important;
  font-size: .8rem !important;
  transition: transform .12s ease, background .15s ease !important;
}
.footer-bottom-bar .footer-quick-adds .add-quick-item:hover {
  background: rgba(79, 70, 229, .08) !important;
  transform: translateY(-1px) !important;
}
.footer-bottom-bar .footer-quick-adds .add-quick-item.full {
  grid-column: 1 / -1 !important;
}

/* =========================================================
   10) BOTTOM NAV — FIX: dropdowns hidden behind bar
   - drop `contain: paint` (was clipping dropdown overflow)
   - pop menus UPWARD above the bar
   - bump dropdown stacking
   ========================================================= */

/* Re-declare with corrected containment (paint removed) */
.footer-bottom-bar {
  contain: layout !important;          /* no `paint`! */
}

/* Allow children to escape the bar's box visually */
.footer-bottom-bar,
.footer-bottom-bar > .container,
.footer-bottom-bar > .container-fluid,
.footer-bottom-bar .footer-bottom-bar-links,
.footer-bottom-bar .footer-bottom-bar-links > .link {
  overflow: visible !important;
}

/* Any dropdown inside the bar should pop ABOVE it */
.footer-bottom-bar .dropdown-menu,
.footer-bottom-bar .dropdown-widget {
  position: absolute !important;
  bottom: calc(100% + 8px) !important;
  top: auto !important;
  transform: none !important;
  z-index: 1100 !important;            /* > bar (1050) */
  max-height: min(70vh, 520px) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* FAB (3rd item) — center its dropdown above the FAB */
.footer-bottom-bar .footer-bottom-bar-links > .link:nth-child(3) .dropdown-menu {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  min-width: 280px !important;
  width: max-content !important;
  max-width: calc(100vw - 24px) !important;
}

/* User menu (5th item) — right-aligned, pop up */
.footer-bottom-bar .footer-bottom-bar-links > .link:last-child .dropdown-menu {
  right: 8px !important;
  left: auto !important;
  min-width: 260px !important;
  max-width: calc(100vw - 24px) !important;
}

/* The Bootstrap-applied open state — keep Popper from re-positioning */
.footer-bottom-bar .dropdown-menu.show {
  display: block !important;
}

/* Ensure clickable trigger reaches taps (no overlay traps) */
.footer-bottom-bar .footer-bottom-bar-links > .link > a,
.footer-bottom-bar .footer-bottom-bar-links > .link > a.dropdown-toggle,
.footer-bottom-bar .footer-bottom-bar-links > .link .user-menu {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Override Bootstrap's auto-positioning attribute style (data-popper) */
.footer-bottom-bar [data-popper-placement] {
  position: absolute !important;
  inset: auto !important;
  bottom: calc(100% + 8px) !important;
  top: auto !important;
}
.footer-bottom-bar .footer-bottom-bar-links > .link:nth-child(3) [data-popper-placement] {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}
.footer-bottom-bar .footer-bottom-bar-links > .link:last-child [data-popper-placement] {
  right: 8px !important;
  left: auto !important;
  transform: none !important;
}

/* User-menu mobile sheet already styles itself fullscreen — keep that */
.user-menu-mobile-sheet.dropdown-menu.show {
  z-index: 1200 !important;  /* above bar & FAB dropdown */
}

/* Center FAB icon visually */
.footer-bottom-bar .footer-bottom-bar-links > .link:nth-child(3) > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.footer-bottom-bar .footer-bottom-bar-links > .link:nth-child(3) > a > svg {
  color: #fff !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Tap feedback for FAB */
.footer-bottom-bar .footer-bottom-bar-links > .link:nth-child(3) > a:active {
  transform: scale(.93) !important;
  filter: brightness(.95) !important;
}

/* =========================================================
   11) FINAL FIXES
   - Square gradient FAB (iOS-style)
   - DO NOT touch user-menu-mobile-sheet (it's fixed bottom-sheet)
   - More iPhone home-indicator clearance
   - Add-menu = iOS share-sheet card
   ========================================================= */

/* --- 11.1 Don't break user-menu sheet: it manages itself ---- */
.footer-bottom-bar .user-menu-mobile-sheet.dropdown-menu,
.footer-bottom-bar .user-menu-mobile-sheet.dropdown-menu.show {
  position: fixed !important;
  inset: auto 0 0 0 !important;
  top: auto !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  min-width: 100vw !important;
  max-width: 100vw !important;
  z-index: 1200 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  /* allow drag transform set by JS */
  transform: translate3d(0, var(--sheet-drag, 0px), 0) !important;
}
/* Reset the [data-popper-placement] override JUST for user-menu sheet */
.footer-bottom-bar .user-menu-mobile-sheet[data-popper-placement] {
  position: fixed !important;
  inset: auto 0 0 0 !important;
  bottom: 0 !important;
  top: auto !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  min-width: 100vw !important;
  max-width: 100vw !important;
  transform: translate3d(0, var(--sheet-drag, 0px), 0) !important;
}

/* --- 11.2 FAB → rounded square + gradient (iOS app icon vibe) - */
.footer-bottom-bar .footer-bottom-bar-links > .link:nth-child(3) > a {
  width: 54px !important;
  height: 54px !important;
  border-radius: 18px !important;          /* squircle */
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%) !important;
  background-size: 200% 200% !important;
  color: #fff !important;
  margin-top: -14px !important;
  box-shadow:
    0 10px 24px rgba(139, 92, 246, .38),
    0 4px 10px rgba(15, 23, 42, .18),
    inset 0 1px 0 rgba(255, 255, 255, .25) !important;
  border: 1px solid rgba(255, 255, 255, .25) !important;
  transition: transform .15s ease, box-shadow .2s ease, background-position .35s ease !important;
}
.footer-bottom-bar .footer-bottom-bar-links > .link:nth-child(3) > a:hover {
  background-position: 100% 100% !important;
  box-shadow:
    0 14px 30px rgba(139, 92, 246, .45),
    0 6px 14px rgba(15, 23, 42, .22),
    inset 0 1px 0 rgba(255, 255, 255, .3) !important;
}
.footer-bottom-bar .footer-bottom-bar-links > .link:nth-child(3) > a:active {
  transform: scale(.94) !important;
}

/* --- 11.3 iPhone home indicator clearance (extra breathing) -- */
.footer-bottom-bar {
  /* extra 10px above the native indicator zone */
  height: calc(64px + env(safe-area-inset-bottom, 0px) + 10px) !important;
  padding: 6px 6px calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
}
@media (max-width: 767.98px) {
  body {
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px) + 10px) !important;
  }
}

/* --- 11.4 Add-menu = modern iOS share sheet -------------------*/
.footer-bottom-bar .footer-bottom-bar-links > .link:nth-child(3) .dropdown-menu {
  bottom: calc(100% + 14px) !important;
  min-width: 320px !important;
  width: min(92vw, 360px) !important;
  max-width: 92vw !important;
  padding: 14px !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, .96) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, .6) !important;
  box-shadow:
    0 24px 60px rgba(15, 23, 42, .22),
    0 4px 12px rgba(15, 23, 42, .08) !important;
  animation: birlixFabPop .18s ease-out !important;
}
body.night-mode .footer-bottom-bar .footer-bottom-bar-links > .link:nth-child(3) .dropdown-menu,
[data-bs-theme="dark"] .footer-bottom-bar .footer-bottom-bar-links > .link:nth-child(3) .dropdown-menu {
  background: rgba(28, 30, 36, .94) !important;
  border-color: rgba(255, 255, 255, .08) !important;
}
@keyframes birlixFabPop {
  from { opacity: 0; transform: translateX(-50%) translateY(8px) scale(.96); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* Quick-add grid items — iOS app tile look */
.footer-bottom-bar .footer-quick-adds {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  margin: 0 !important;
}
.footer-bottom-bar .footer-quick-adds .add-quick-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 14px 6px !important;
  border-radius: 16px !important;
  background: rgba(120, 120, 128, .08) !important;
  border: 1px solid transparent !important;
  color: var(--g2026-text, #0f172a) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-align: center !important;
  min-height: 84px !important;
  transition: transform .12s ease, background .15s ease !important;
}
.footer-bottom-bar .footer-quick-adds .add-quick-item .main-icon,
.footer-bottom-bar .footer-quick-adds .add-quick-item svg {
  width: 26px !important;
  height: 26px !important;
  margin-bottom: 2px !important;
  color: var(--g2026-accent, #6366f1) !important;
}
.footer-bottom-bar .footer-quick-adds .add-quick-item:hover,
.footer-bottom-bar .footer-quick-adds .add-quick-item:active {
  background: rgba(99, 102, 241, .12) !important;
  transform: translateY(-1px) !important;
}
.footer-bottom-bar .footer-quick-adds .add-quick-item.full {
  grid-column: 1 / -1 !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  min-height: auto !important;
  background: linear-gradient(135deg, rgba(99, 102, 241, .12), rgba(139, 92, 246, .10)) !important;
  border-color: rgba(99, 102, 241, .25) !important;
  font-size: 14px !important;
}
.footer-bottom-bar .footer-quick-adds .add-quick-item.full .main-icon,
.footer-bottom-bar .footer-quick-adds .add-quick-item.full svg {
  margin-bottom: 0 !important;
}
.footer-bottom-bar .footer-quick-adds .add-quick-item.full > div {
  text-align: left !important;
}

/* Drag handle on the add sheet (visual cue) */
.footer-bottom-bar .footer-bottom-bar-links > .link:nth-child(3) .dropdown-menu::before {
  content: "" !important;
  display: block !important;
  width: 38px !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: rgba(15, 23, 42, .15) !important;
  margin: 0 auto 12px !important;
}
body.night-mode .footer-bottom-bar .footer-bottom-bar-links > .link:nth-child(3) .dropdown-menu::before {
  background: rgba(255, 255, 255, .18) !important;
}

/* Inner scroller (slimScroll) — kill fixed height on small screens */
.footer-bottom-bar .footer-bottom-bar-links > .link:nth-child(3) .dropdown-menu .js_scroller {
  height: auto !important;
  max-height: 60vh !important;
}

/* --- 11.5 Bar bottom-edge premium gradient line --------------*/
.footer-bottom-bar::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 12% !important;
  right: 12% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(99,102,241,.25), transparent) !important;
  pointer-events: none !important;
}

/* =========================================================
   12) POLISH ROUND 2
   - more bottom space above iPhone home indicator
   - guarantee user-menu sheet drag close works (no transform overrides)
   - stabilize + menu items (no internal scroll jitter)
   ========================================================= */

/* --- 12.1 More clearance above home indicator ---------------- */
.footer-bottom-bar {
  height: calc(66px + env(safe-area-inset-bottom, 0px) + 18px) !important;
  padding: 8px 6px calc(env(safe-area-inset-bottom, 0px) + 18px) !important;
}
@media (max-width: 767.98px) {
  body {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 18px) !important;
  }
}

/* --- 12.2 USER-MENU sheet — let JS-driven transform work ----- */
/* JS sets `--sheet-drag` and a transition on inline style.
   Earlier rules clobbered transform. Make our transform a single
   source of truth that ALWAYS reads the CSS var. */
.footer-bottom-bar .user-menu-mobile-sheet.dropdown-menu,
.footer-bottom-bar .user-menu-mobile-sheet.dropdown-menu.show,
.footer-bottom-bar .user-menu-mobile-sheet[data-popper-placement] {
  position: fixed !important;
  inset: auto 0 0 0 !important;
  top: auto !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  min-width: 100vw !important;
  max-width: 100vw !important;
  z-index: 1200 !important;
  margin: 0 !important;
  transform: translate3d(0, var(--sheet-drag, 0px), 0) !important;
  will-change: transform !important;
  -webkit-overflow-scrolling: touch !important;
  /* burak: touch-action:none — vertical pan'i browser yutuyordu, drag-to-close
     bozuluyordu. Scroll'u JS manuel hallediyor. */
  touch-action: none !important;
  overscroll-behavior: contain !important;
}
/* Open-state animation must not fight the drag transform */
.footer-bottom-bar .user-menu-mobile-sheet.dropdown-menu.show {
  animation: none !important;
}
/* Re-add a one-shot open animation via a different property */
.footer-bottom-bar .user-menu-mobile-sheet.dropdown-menu.show {
  opacity: 1;
}

/* --- 12.3 + (Add) dropdown — kill internal scroll jitter ---- */
.footer-bottom-bar .footer-bottom-bar-links > .link:nth-child(3) .dropdown-menu {
  overflow: hidden !important;          /* outer card no scroll */
  touch-action: none !important;
}
.footer-bottom-bar .footer-bottom-bar-links > .link:nth-child(3) .dropdown-menu .js_scroller {
  overflow: visible !important;
  max-height: none !important;
  height: auto !important;
  touch-action: manipulation !important;
}
.footer-bottom-bar .footer-quick-adds {
  overflow: visible !important;
  touch-action: manipulation !important;
}
.footer-bottom-bar .footer-quick-adds .add-quick-item {
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-touch-callout: none !important;
  touch-action: manipulation !important;
}

/* If the menu would overflow viewport vertically, shrink tile padding */
@media (max-height: 700px) {
  .footer-bottom-bar .footer-quick-adds .add-quick-item {
    min-height: 72px !important;
    padding: 10px 6px !important;
  }
  .footer-bottom-bar .footer-quick-adds .add-quick-item .main-icon {
    width: 22px !important;
    height: 22px !important;
  }
}

/* --- 12.4 Sheet drag handle inside user-menu — bigger tap area */
.footer-bottom-bar .user-menu-mobile-sheet.dropdown-menu.show::before {
  width: 44px !important;
  height: 5px !important;
  margin: 8px auto 14px !important;
  background: rgba(15, 23, 42, .18) !important;
}
body.night-mode .footer-bottom-bar .user-menu-mobile-sheet.dropdown-menu.show::before {
  background: rgba(255, 255, 255, .22) !important;
}

/* =========================================================
   13) POST CARD — premium iOS-like polish
   - solid card (no transparency)
   - stats row: single line, compact pills
   - actions row: compact, reaction popup floats above
   ========================================================= */

/* --- 13.1 Solid card -------------------------------------- */
.post {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, .07) !important;
  border-radius: 18px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .05) !important;
  padding: 14px 16px !important;
  margin-bottom: 14px !important;
  overflow: visible !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.night-mode .post,
[data-bs-theme="dark"] .post {
  background: #16181d !important;
  border-color: rgba(255, 255, 255, .06) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.25) !important;
}

/* --- 13.2 Stats row → single horizontal line, short labels -- */
.post .post-stats {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  padding: 8px 0 !important;
  border-top: 1px solid rgba(15, 23, 42, .06) !important;
  border-bottom: 1px solid rgba(15, 23, 42, .06) !important;
  margin: 10px 0 6px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.post .post-stats::-webkit-scrollbar { display: none !important; }
body.night-mode .post .post-stats,
[data-bs-theme="dark"] .post .post-stats {
  border-color: rgba(255, 255, 255, .06) !important;
}

/* Left side — small reactions summary chip */
.post .post-stats > .float-start {
  margin: 0 !important;
  float: none !important;
}
.post .post-stats .reactions-stats {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: rgba(15, 23, 42, .04) !important;
  border: 1px solid rgba(15, 23, 42, .06) !important;
  border-radius: 999px !important;
  padding: 3px 10px 3px 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--g2026-text-2, #475569) !important;
  cursor: pointer !important;
}
.post .post-stats .reactions-stats .reactions-stats-item {
  width: auto !important;
  height: 20px !important;
  line-height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  border-radius: 0 !important;
}
.post .post-stats .reactions-stats svg {
  width: 20px !important;
  height: 20px !important;
}

/* Right side — comments/shares/views/reviews on a single line */
.post .post-stats > .float-end {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  margin: 0 !important;
  float: none !important;
  white-space: nowrap !important;
}
.post .post-stats > .float-end > span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 3px 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--g2026-text-2, #475569) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  white-space: nowrap !important;
}
.post .post-stats > .float-end > span + span {
  border-left: 1px solid rgba(15, 23, 42, .08) !important;
  margin-left: 2px !important;
  padding-left: 10px !important;
}
body.night-mode .post .post-stats > .float-end > span + span,
[data-bs-theme="dark"] .post .post-stats > .float-end > span + span {
  border-left-color: rgba(255, 255, 255, .08) !important;
}
.post .post-stats > .float-end > span i.fa {
  font-size: 13px !important;
  opacity: .75 !important;
}

/* Shorten visible label text — keep i18n strings, swap word only */
.post .post-stats > .float-end > span.js_comments-toggle::after,
.post .post-stats > .float-end > span[data-url*="who_shares"]::after,
.post .post-stats > .float-end > span[data-url*="who_reviews"]::after {
  /* no-op placeholder, real label trimming via :lang would need i18n hooks */
}
/* Hide explicit words to keep counts compact (very small screens) */
@media (max-width: 420px) {
  .post .post-stats > .float-end > span {
    font-size: 11px !important;
    padding: 3px 6px !important;
  }
  .post .post-stats > .float-end > span + span { padding-left: 7px !important; }
}

/* --- 13.3 Actions row — centered group, auto-width buttons --------------- */
.post .post-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 4px 0 0 !important;
  margin: 0 !important;
  border: 0 !important;
  position: relative !important;
  flex-wrap: wrap !important;
}
.post .post-actions .action-btn {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 8px 12px !important;
  border-radius: 12px !important;
  color: var(--g2026-text-2, #475569) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  user-select: none !important;
  position: relative !important;
  transition: background .15s ease, color .15s ease, transform .12s ease !important;
}
.post .post-actions .action-btn:hover {
  background: rgba(15, 23, 42, .04) !important;
  color: var(--g2026-text, #0f172a) !important;
}
.post .post-actions .action-btn:active { transform: scale(.97) !important; }
.post .post-actions .action-btn .action-icon,
.post .post-actions .action-btn svg,
.post .post-actions .action-btn i.fa {
  width: 20px !important;
  height: 20px !important;
  font-size: 18px !important;
}

/* show short labels (kill the d-none d-xl-inline-block hides) */
.post .post-actions .action-btn .d-none.d-xl-inline-block,
.post .post-actions .action-btn .reaction-btn-name {
  display: inline-block !important;
}
@media (max-width: 360px) {
  .post .post-actions .action-btn .d-none.d-xl-inline-block,
  .post .post-actions .action-btn .reaction-btn-name {
    display: none !important;     /* tiny screens → icon-only */
  }
}

/* --- 13.4 Reactions wrapper + popup ---------------------- */
.post .post-actions .reactions-wrapper {
  position: relative !important;
  overflow: visible !important;
}
.post .post-actions .reactions-wrapper .reaction-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
  justify-content: center !important;
}

/* Reactions emoji popup — Section 26 (later in file) handles the actual
   positioning as position:fixed with JS-driven top/left viewport coords.
   Keep ONLY the visual chrome here; do NOT set top/left/bottom/transform
   with !important or JS positioning will break. */
.post .post-actions .reactions-container {
  display: none;
  align-items: center !important;
  gap: 4px !important;
  padding: 6px 8px !important;
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  border-radius: 999px !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .18), 0 2px 6px rgba(15, 23, 42, .08) !important;
  z-index: 1080 !important;
  white-space: nowrap !important;
}
body.night-mode .post .post-actions .reactions-container,
[data-bs-theme="dark"] .post .post-actions .reactions-container {
  background: #1c1e22 !important;
  border-color: rgba(255, 255, 255, .08) !important;
}
/* visibility is controlled purely by JS display toggle (see Section 26) */
.post .post-actions .reactions-container .reactions_item,
.post .post-actions .reactions-container .reaction {
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  transition: transform .15s cubic-bezier(.34, 1.56, .64, 1) !important;
}
.post .post-actions .reactions-container .reactions_item:hover,
.post .post-actions .reactions-container .reaction:hover {
  transform: scale(1.25) translateY(-2px) !important;
  background: rgba(99, 102, 241, .08) !important;
}
.post .post-actions .reactions-container .reactions_item img,
.post .post-actions .reactions-container .reaction img,
.post .post-actions .reactions-container .reactions_item svg,
.post .post-actions .reactions-container .reaction svg,
.post .post-actions .reactions-container .reactions_item .inline-emoji,
.post .post-actions .reactions-container .reaction .inline-emoji {
  width: 26px !important;
  height: 26px !important;
  line-height: 26px !important;
  display: block !important;
}

/* Reaction button current selection emoji
   Sngine's .emoji is a 120x120 box scaled via transform:scale(0.325) and offset
   with top/right percentages. Those percentages are calibrated to .inline-emoji
   being EXACTLY 18x18 (the default). Resizing the wrapper breaks alignment and
   clips the emoji. So: keep wrapper at 18x18 native, just align it cleanly. */
.post .post-actions .reaction-btn-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
}
.post .post-actions .reaction-btn-icon .inline-emoji {
  width: 18px !important;
  height: 18px !important;
  display: inline-block !important;
  position: relative !important;
  overflow: visible !important;
}
/* Some templates put inline-emoji directly inside .action-btn without the icon
   wrapper (lightbox/photo). Cover those too. */
.post .post-actions .action-btn > .inline-emoji {
  width: 18px !important;
  height: 18px !important;
  display: inline-block !important;
  overflow: visible !important;
  vertical-align: middle !important;
}

/* --- 13.5 Ensure emojis are visible (image fallback) ------ */
.post .inline-emoji img,
.post .reactions-stats img,
.post .reactions-container img {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-width: 100% !important;
  height: auto !important;
}

/* --- 13.6 Post header refinements ------------------------ */
.post .post-header,
.post-author-wrapper {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  min-width: 0 !important;
}
.post .post-header > .post-avatar {
  flex: 0 0 auto !important;
}
.post .post-header > .post-meta {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}
.post .post-meta .bx-group-tag {
  max-width: 100% !important;
  min-width: 0 !important;
}
.post .post-meta .bx-group-tag > a,
.post .post-meta .bx-group-tag-name {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}
.post .post-avatar-wrapper img,
.post .post-author-image,
.post-author-wrapper img.profile-picture {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}
.post .post-author,
.post .post-meta-author {
  font-weight: 700 !important;
  color: var(--g2026-text, #0f172a) !important;
  font-size: 14px !important;
}
.post .post-meta,
.post .post-meta-time {
  color: var(--g2026-text-3, #94a3b8) !important;
  font-size: 12px !important;
}

/* Mobile post content text size */
.post .post-text,
.post .post-content {
  font-size: 14.5px !important;
  line-height: 1.5 !important;
  color: var(--g2026-text, #0f172a) !important;
  margin: 8px 0 10px !important;
}
body.night-mode .post .post-text,
body.night-mode .post .post-content,
[data-bs-theme="dark"] .post .post-text,
[data-bs-theme="dark"] .post .post-content {
  color: #e6e8eb !important;
}

/* =========================================================
   14) COMMENTS — premium iOS-style polish
   - rounded chat bubbles for each comment
   - compact inline reactions
   - filter dropdown polish
   - input bar = single rounded pill with inline tools
   ========================================================= */

/* --- 14.1 Sort/filter dropdown (En çok Recent vb.) --------- */
.post-comments .comments-filter {
  margin: 4px 0 10px !important;
}
.post-comments .comments-filter .btn-group .btn,
.post-comments .comments-filter .dropdown-toggle {
  background: transparent !important;
  border: 0 !important;
  color: var(--g2026-text-2, #475569) !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
}
.post-comments .comments-filter .btn-group .btn:hover {
  background: rgba(15, 23, 42, .05) !important;
  color: var(--g2026-text, #0f172a) !important;
}
.post-comments .comments-filter .dropdown-menu {
  border-radius: 14px !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .14) !important;
  padding: 6px !important;
  min-width: 180px !important;
}
.post-comments .comments-filter .dropdown-item {
  border-radius: 10px !important;
  font-size: 13px !important;
  padding: 8px 12px !important;
  font-weight: 500 !important;
  color: var(--g2026-text, #0f172a) !important;
}
.post-comments .comments-filter .dropdown-item:hover,
.post-comments .comments-filter .dropdown-item:active {
  background: rgba(99, 102, 241, .08) !important;
  color: var(--g2026-accent, #6366f1) !important;
}

/* --- 14.2 Comment row layout ------------------------------ */
.post-comments .comment {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  padding: 6px 0 !important;
  margin: 0 !important;
}
.post-comments .comment.reply {
  margin-left: 36px !important;
}
.post-comments .comment-avatar {
  flex: 0 0 36px !important;
  width: 36px !important;
  height: 36px !important;
}
.post-comments .comment-avatar-picture {
  display: block !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background-size: cover !important;
  background-position: center !important;
}
.post-comments .comment-data {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* --- 14.3 Comment bubble ---------------------------------- */
.post-comments .comment-inner-wrapper {
  position: relative !important;
}
.post-comments .comment-inner {
  background: rgba(15, 23, 42, .045) !important;
  border-radius: 16px !important;
  padding: 8px 12px !important;
  font-size: 13.5px !important;
  line-height: 1.45 !important;
  color: var(--g2026-text, #0f172a) !important;
  display: inline-block !important;
  max-width: 100% !important;
  word-break: break-word !important;
}
body.night-mode .post-comments .comment-inner,
[data-bs-theme="dark"] .post-comments .comment-inner {
  background: rgba(255, 255, 255, .06) !important;
  color: #e6e8eb !important;
}
.post-comments .comment-author {
  display: block !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: var(--g2026-text, #0f172a) !important;
  margin-bottom: 1px !important;
}
.post-comments .comment-author a {
  color: inherit !important;
  text-decoration: none !important;
}
body.night-mode .post-comments .comment-author,
[data-bs-theme="dark"] .post-comments .comment-author {
  color: #e6e8eb !important;
}
.post-comments .comment-author .verified-badge,
.post-comments .comment-author .pro-badge {
  margin-left: 3px !important;
  font-size: .9em !important;
}

/* --- 14.4 Comment actions row (İfade / Cevap / time) ------ */
.post-comments .comment-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  margin: 4px 0 0 6px !important;
  padding: 0 !important;
  list-style: none !important;
  font-size: 12px !important;
  color: var(--g2026-text-3, #94a3b8) !important;
  font-weight: 500 !important;
}
.post-comments .comment-actions > li,
.post-comments .comment-actions > * {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 2px 8px !important;
  position: relative !important;
}
.post-comments .comment-actions > li + li::before,
.post-comments .comment-actions > * + *::before {
  content: "·" !important;
  position: absolute !important;
  left: -3px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--g2026-text-3, #94a3b8) !important;
}
.post-comments .comment-actions .reaction-btn-name,
.post-comments .comment-actions a,
.post-comments .comment-actions .pointer {
  color: var(--g2026-text-2, #475569) !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  font-size: 12px !important;
  background: transparent !important;
}
.post-comments .comment-actions .reaction-btn-name:hover,
.post-comments .comment-actions a:hover,
.post-comments .comment-actions .pointer:hover {
  color: var(--g2026-accent, #6366f1) !important;
  text-decoration: none !important;
}
.post-comments .comment-actions .reactions-wrapper {
  position: relative !important;
}
.post-comments .comment-actions .reactions-container {
  display: none;
  gap: 4px !important;
  padding: 5px 7px !important;
  background: #fff !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .16) !important;
  z-index: 1080 !important;
  white-space: nowrap !important;
}
body.night-mode .post-comments .comment-actions .reactions-container,
[data-bs-theme="dark"] .post-comments .comment-actions .reactions-container {
  background: #1c1e22 !important;
  border-color: rgba(255,255,255,.08) !important;
}
/* visibility is controlled purely by JS display toggle (see Section 26) */
.post-comments .comment-actions .reactions-container .reactions_item,
.post-comments .comment-actions .reactions-container .reaction {
  width: 28px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  transition: transform .15s cubic-bezier(.34,1.56,.64,1) !important;
}
.post-comments .comment-actions .reactions-container .reactions_item:hover,
.post-comments .comment-actions .reactions-container .reaction:hover {
  transform: scale(1.25) translateY(-2px) !important;
  background: rgba(99, 102, 241, .08) !important;
}
.post-comments .comment-actions .reactions-container img,
.post-comments .comment-actions .reactions-container .inline-emoji {
  width: 22px !important;
  height: 22px !important;
  line-height: 22px !important;
  display: block !important;
}

/* --- 14.5 Comment dropdown menu (3 dot) ------------------- */
.post-comments .comment-btn {
  float: right !important;
  margin-left: 6px !important;
}
.post-comments .comment-btn .dropdown-toggle-icon {
  color: var(--g2026-text-3, #94a3b8) !important;
  cursor: pointer !important;
  padding: 4px !important;
}
.post-comments .comment-btn .dropdown-toggle-icon:hover {
  color: var(--g2026-text, #0f172a) !important;
}
.post-comments .comment-btn .dropdown-menu {
  border-radius: 14px !important;
  padding: 6px !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .14) !important;
  min-width: 160px !important;
}
.post-comments .comment-btn .dropdown-item {
  border-radius: 10px !important;
  font-size: 13px !important;
  padding: 8px 12px !important;
}

/* --- 14.6 Comment composer (write a comment input) -------- */
/* 2026 iOS-quality polish: full-width pill, embedded send button,
   refined focus ring, dynamic resize, dark mode parity */
.post-comments .comment.js_comment-form {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 0 2px !important;
  margin: 4px 0 0 !important;
  min-height: 0 !important;
}
.post-comments .comment.js_comment-form .comment-avatar {
  flex: 0 0 38px !important;
  width: 38px !important;
  height: 38px !important;
  align-self: center !important;
  margin: 0 !important;
}
/* Rounded-square avatar (iOS app-icon style) */
.post-comments .comment.js_comment-form .comment-avatar-picture {
  display: block !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  background-size: cover !important;
  background-position: center !important;
  box-shadow: 0 0 0 0.5px rgba(15,23,42,0.08) inset !important;
}
body.night-mode .post-comments .comment.js_comment-form .comment-avatar-picture,
[data-bs-theme="dark"] .post-comments .comment.js_comment-form .comment-avatar-picture {
  box-shadow: 0 0 0 0.5px rgba(255,255,255,0.12) inset !important;
}
.post-comments .comment.js_comment-form .comment-data {
  display: flex !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Hidden helper rows (voice / attachments) shouldn't add height */
.post-comments .comment.js_comment-form .comment-voice-notes,
.post-comments .comment.js_comment-form .comment-attachments {
  display: none !important;
}
.post-comments .comment.js_comment-form .comment-voice-notes.is-active,
.post-comments .comment.js_comment-form .comment-attachments:not(.x-hidden) {
  display: block !important;
}

/* The pill — fills all available space, iOS surface */
.post-comments .comment.js_comment-form .x-form.comment-form {
  display: flex !important;
  align-items: center !important;
  flex: 1 1 100% !important;
  width: 100% !important;
  background: rgba(118, 118, 128, 0.10) !important;
  border: 0.5px solid rgba(60, 60, 67, 0.14) !important;
  border-radius: 22px !important;
  padding: 4px 4px 4px 16px !important;
  min-height: 42px !important;
  gap: 4px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset !important;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease !important;
}
body.night-mode .post-comments .comment.js_comment-form .x-form.comment-form,
[data-bs-theme="dark"] .post-comments .comment.js_comment-form .x-form.comment-form {
  background: rgba(118, 118, 128, 0.18) !important;
  border-color: rgba(84, 84, 88, 0.50) !important;
  box-shadow: none !important;
}
.post-comments .comment.js_comment-form .x-form.comment-form:focus-within {
  background: var(--g2026-surface, #fff) !important;
  border-color: rgba(10, 132, 255, 0.45) !important;
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.10), 0 2px 12px rgba(15,23,42,0.06) !important;
}
body.night-mode .post-comments .comment.js_comment-form .x-form.comment-form:focus-within,
[data-bs-theme="dark"] .post-comments .comment.js_comment-form .x-form.comment-form:focus-within {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(10, 132, 255, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.18) !important;
}

.post-comments .comment.js_comment-form textarea.js_post-comment {
  flex: 1 1 auto !important;
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  resize: none !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  letter-spacing: -0.01em !important;
  padding: 8px 6px 8px 0 !important;
  color: var(--g2026-text, #0f172a) !important;
  min-height: 30px !important;
  max-height: 140px !important;
  width: 100% !important;
  font-family: inherit !important;
}
body.night-mode .post-comments .comment.js_comment-form textarea.js_post-comment,
[data-bs-theme="dark"] .post-comments .comment.js_comment-form textarea.js_post-comment {
  color: #e6e8eb !important;
}
.post-comments .comment.js_comment-form textarea.js_post-comment::placeholder {
  color: rgba(60, 60, 67, 0.45) !important;
  font-weight: 400;
}
body.night-mode .post-comments .comment.js_comment-form textarea.js_post-comment::placeholder,
[data-bs-theme="dark"] .post-comments .comment.js_comment-form textarea.js_post-comment::placeholder {
  color: rgba(235, 235, 245, 0.40) !important;
}

/* Inline tools (attach / send) — embedded inside the pill */
.post-comments .comment.js_comment-form .x-form-tools {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  flex-shrink: 0 !important;
}
.post-comments .comment.js_comment-form .x-form-tools > li {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  transition: background-color .15s ease, color .15s ease, transform .12s ease, opacity .12s ease !important;
}
.post-comments .comment.js_comment-form .x-form-tools > li:hover {
  background: rgba(15, 23, 42, .06) !important;
}
.post-comments .comment.js_comment-form .x-form-tools > li:active {
  transform: scale(0.92) !important;
  opacity: 0.85 !important;
}
.post-comments .comment.js_comment-form .x-form-tools > li i {
  font-size: 15px !important;
  color: rgba(60, 60, 67, 0.55) !important;
}
body.night-mode .post-comments .comment.js_comment-form .x-form-tools > li i,
[data-bs-theme="dark"] .post-comments .comment.js_comment-form .x-form-tools > li i {
  color: rgba(235, 235, 245, 0.55) !important;
}
/* Send button → iOS system blue with soft glow */
.post-comments .comment.js_comment-form .x-form-tools-post,
.post-comments .comment.js_comment-form .x-form-tools .js_post-comment {
  width: 34px !important;
  height: 34px !important;
  background: #0a84ff !important;
  background-image: linear-gradient(180deg, #0a84ff 0%, #007aff 100%) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(10,132,255,0.30), 0 0 0 0.5px rgba(10,132,255,0.4) inset !important;
}
.post-comments .comment.js_comment-form .x-form-tools-post i,
.post-comments .comment.js_comment-form .x-form-tools .js_post-comment i {
  color: #fff !important;
  font-size: 14px !important;
}
.post-comments .comment.js_comment-form .x-form-tools-post:hover,
.post-comments .comment.js_comment-form .x-form-tools .js_post-comment:hover {
  filter: brightness(1.06) !important;
  background: #0a84ff !important;
  box-shadow: 0 4px 14px rgba(10,132,255,0.40), 0 0 0 0.5px rgba(10,132,255,0.4) inset !important;
}
.post-comments .comment.js_comment-form .x-form-tools-post:active,
.post-comments .comment.js_comment-form .x-form-tools .js_post-comment:active {
  transform: scale(0.94) !important;
}

/* Mobile: a touch denser, edge-to-edge feel */
@media (max-width: 575px) {
  .post-comments .comment.js_comment-form { gap: 8px !important; }
  .post-comments .comment.js_comment-form .comment-avatar,
  .post-comments .comment.js_comment-form .comment-avatar-picture {
    width: 34px !important; height: 34px !important; flex-basis: 34px !important;
    border-radius: 11px !important;
  }
  .post-comments .comment.js_comment-form .x-form.comment-form {
    padding-left: 14px !important;
    border-radius: 20px !important;
    min-height: 40px !important;
  }
  .post-comments .comment.js_comment-form textarea.js_post-comment {
    font-size: 16px !important; /* iOS no-zoom */
  }
}

/* "Previous comments" button */
.post-comments .js_see-more {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--g2026-accent, #6366f1) !important;
  cursor: pointer !important;
  padding: 8px 12px !important;
}
.post-comments .js_see-more:hover {
  text-decoration: underline !important;
}

/* Reply form indentation */
.post-comments .comment.reply.js_comment-form {
  margin-left: 36px !important;
}

/* =========================================================
   15) WHO-REACTS MODAL — premium iOS-like tabbed sheet
   - center-aligned tabs, small emojis
   - active = pill style, others = soft circles
   - user list rows compact
   ========================================================= */

.modal .modal-header.with-nav {
  border-bottom: 1px solid rgba(15, 23, 42, .06) !important;
  padding: 14px 16px 10px !important;
  align-items: center !important;
  gap: 12px !important;
}
.modal .modal-header.with-nav .modal-title {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.modal .modal-header.with-nav .nav.nav-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;     /* iOS-centered */
  gap: 4px !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.modal .modal-header.with-nav .nav-tabs .nav-item {
  margin: 0 !important;
  display: inline-flex !important;
}
.modal .modal-header.with-nav .nav-tabs .nav-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 36px !important;
  height: 36px !important;
  padding: 0 12px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--g2026-text-2, #475569) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  transition: background .15s ease, transform .12s ease, color .15s ease !important;
  cursor: pointer !important;
}
.modal .modal-header.with-nav .nav-tabs .nav-link:hover {
  background: rgba(15, 23, 42, .05) !important;
  color: var(--g2026-text, #0f172a) !important;
}
.modal .modal-header.with-nav .nav-tabs .nav-link.active {
  background: var(--g2026-text, #0f172a) !important;
  color: #ffffff !important;
}
body.night-mode .modal .modal-header.with-nav .nav-tabs .nav-link.active,
[data-bs-theme="dark"] .modal .modal-header.with-nav .nav-tabs .nav-link.active {
  background: #ffffff !important;
  color: #0f172a !important;
}
/* Emoji tabs (non-"All") — make them small circles */
.modal .modal-header.with-nav .nav-tabs .nav-link:has(.inline-emoji) {
  width: 36px !important;
  padding: 0 !important;
  background: transparent !important;
}
.modal .modal-header.with-nav .nav-tabs .nav-link:has(.inline-emoji):hover {
  background: rgba(15, 23, 42, .05) !important;
}
.modal .modal-header.with-nav .nav-tabs .nav-link:has(.inline-emoji).active {
  background: rgba(99, 102, 241, .12) !important;
  outline: 2px solid var(--g2026-accent, #6366f1) !important;
  outline-offset: -2px !important;
}
/* Force emoji size inside tabs */
.modal .modal-header.with-nav .nav-tabs .nav-link .inline-emoji,
.modal .modal-header.with-nav .nav-tabs .nav-link > div {
  width: 22px !important;
  height: 22px !important;
  line-height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.modal .modal-header.with-nav .nav-tabs .nav-link .inline-emoji img,
.modal .modal-header.with-nav .nav-tabs .nav-link svg,
.modal .modal-header.with-nav .nav-tabs .nav-link img {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
  margin: 0 auto !important;
}

/* Close button — circle frosted */
.modal .modal-header.with-nav .btn-close {
  flex-shrink: 0 !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background-color: rgba(15, 23, 42, .05) !important;
  opacity: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  background-size: 12px !important;
  transition: background .15s ease !important;
}
.modal .modal-header.with-nav .btn-close:hover {
  background-color: rgba(15, 23, 42, .1) !important;
}

/* Modal card itself — premium */
.modal .modal-content {
  border-radius: 22px !important;
  border: 1px solid rgba(15, 23, 42, .06) !important;
  box-shadow: 0 30px 60px rgba(15, 23, 42, .22), 0 6px 16px rgba(15, 23, 42, .08) !important;
  overflow: hidden !important;
}
.modal .modal-body {
  padding: 8px 12px 14px !important;
}
.modal .modal-body > ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* User row inside who-reacts list */
.modal .modal-body .feeds-user,
.modal .modal-body .user-list-item,
.modal .modal-body ul > li {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 8px !important;
  border-radius: 14px !important;
  transition: background .12s ease !important;
}
.modal .modal-body ul > li:hover {
  background: rgba(15, 23, 42, .04) !important;
}
.modal .modal-body ul > li img.profile-picture,
.modal .modal-body ul > li img.rounded-circle {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
}
.modal .modal-body ul > li a.user-name,
.modal .modal-body ul > li .user-name a,
.modal .modal-body ul > li .post-meta-author {
  font-weight: 700 !important;
  color: var(--g2026-text, #0f172a) !important;
  text-decoration: none !important;
  font-size: 14px !important;
}

/* "See more" pill */
.modal .modal-body .alert.see-more,
.modal .modal-body .js_see-more {
  background: rgba(99, 102, 241, .08) !important;
  border: 1px solid rgba(99, 102, 241, .18) !important;
  color: var(--g2026-accent, #6366f1) !important;
  border-radius: 14px !important;
  padding: 10px 14px !important;
  text-align: center !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  margin: 10px 4px 4px !important;
  font-size: 13px !important;
}
.modal .modal-body .alert.see-more:hover,
.modal .modal-body .js_see-more:hover {
  background: rgba(99, 102, 241, .14) !important;
}

/* Reaction badge bubble on user row (if rendered) */
.modal .modal-body ul > li .inline-emoji {
  margin-left: auto !important;
  width: 22px !important;
  height: 22px !important;
}
.modal .modal-body ul > li .inline-emoji img,
.modal .modal-body ul > li .inline-emoji svg {
  width: 22px !important;
  height: 22px !important;
}

/* Dark mode for who-reacts */
body.night-mode .modal .modal-content,
[data-bs-theme="dark"] .modal .modal-content {
  background: #16181d !important;
  color: #e6e8eb !important;
}
body.night-mode .modal .modal-header.with-nav .nav-tabs .nav-link:hover,
[data-bs-theme="dark"] .modal .modal-header.with-nav .nav-tabs .nav-link:hover {
  background: rgba(255, 255, 255, .06) !important;
}
body.night-mode .modal .modal-body ul > li:hover,
[data-bs-theme="dark"] .modal .modal-body ul > li:hover {
  background: rgba(255, 255, 255, .04) !important;
}
body.night-mode .modal .modal-header.with-nav,
[data-bs-theme="dark"] .modal .modal-header.with-nav {
  border-bottom-color: rgba(255, 255, 255, .08) !important;
}

/* =========================================================
   16) HEADER — premium iOS-like top bar
   - clean white frosted bar
   - icon buttons = 40px soft circles
   - badges = small accent dots
   ========================================================= */

.main-header {
  background: rgba(255, 255, 255, .82) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid rgba(15, 23, 42, .06) !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, .02) !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
body.night-mode .main-header,
[data-bs-theme="dark"] .main-header {
  background: rgba(22, 24, 29, .82) !important;
  border-bottom-color: rgba(255, 255, 255, .06) !important;
}

/* Logo block clean spacing */
.main-header .logo-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.main-header .logo img {
  max-height: 32px !important;
  width: auto !important;
}

/* Menu (hamburger) icon — soft circle */
.main-header .menu-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: rgba(15, 23, 42, .05) !important;
  color: var(--g2026-text, #0f172a) !important;
  margin-right: 6px !important;
}
.main-header .menu-icon:hover {
  background: rgba(15, 23, 42, .08) !important;
}
.main-header .menu-icon .header-icon {
  width: 18px !important;
  height: 18px !important;
}

/* Group switcher button — frosted square */
.main-header .group-switcher .group-switcher-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 38px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: rgba(15, 23, 42, .05) !important;
  border: 0 !important;
  color: var(--g2026-text, #0f172a) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  transition: background .15s ease !important;
}
.main-header .group-switcher .group-switcher-btn:hover {
  background: rgba(15, 23, 42, .08) !important;
}
.main-header .group-switcher .group-switcher-btn .fa-users {
  color: var(--g2026-accent, #6366f1) !important;
}
.main-header .group-switcher .group-switcher-arrow {
  font-size: 10px !important;
  opacity: .55 !important;
}
.main-header .group-switcher-dropdown {
  border-radius: 16px !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .16) !important;
  padding: 6px !important;
  margin-top: 8px !important;
  overflow: hidden !important;
}
.main-header .group-switcher-header {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  color: var(--g2026-text-3, #94a3b8) !important;
  padding: 8px 10px 4px !important;
}
.main-header .group-switcher-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  color: var(--g2026-text, #0f172a) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
}
.main-header .group-switcher-item:hover {
  background: rgba(15, 23, 42, .04) !important;
}
.main-header .group-switcher-avatar {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
}
.main-header .group-switcher-footer {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  margin-top: 4px !important;
  border-top: 1px solid rgba(15, 23, 42, .06) !important;
  color: var(--g2026-accent, #6366f1) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-decoration: none !important;
}

/* Navbar right side: notification / message / plus icons */
.main-header .navbar-wrapper ul {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.main-header .navbar-wrapper ul > li {
  position: relative !important;
  margin: 0 !important;
  list-style: none !important;
}
.main-header .navbar-wrapper ul > li > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: rgba(15, 23, 42, .05) !important;
  color: var(--g2026-text, #0f172a) !important;
  transition: background .15s ease, transform .12s ease !important;
  text-decoration: none !important;
  position: relative !important;
}
.main-header .navbar-wrapper ul > li > a:hover {
  background: rgba(15, 23, 42, .09) !important;
}
.main-header .navbar-wrapper ul > li > a .header-icon {
  width: 18px !important;
  height: 18px !important;
}
/* Counter badge → small accent pill */
.main-header .navbar-wrapper ul > li .badge,
.main-header .navbar-wrapper ul > li .counter {
  position: absolute !important;
  top: 2px !important;
  right: 2px !important;
  background: #ef4444 !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  min-width: 16px !important;
  height: 16px !important;
  border-radius: 999px !important;
  padding: 0 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid rgba(255, 255, 255, .9) !important;
  line-height: 1 !important;
}
body.night-mode .main-header .navbar-wrapper ul > li > a,
[data-bs-theme="dark"] .main-header .navbar-wrapper ul > li > a {
  background: rgba(255, 255, 255, .06) !important;
  color: #e6e8eb !important;
}
body.night-mode .main-header .navbar-wrapper ul > li > a:hover,
[data-bs-theme="dark"] .main-header .navbar-wrapper ul > li > a:hover {
  background: rgba(255, 255, 255, .1) !important;
}
body.night-mode .main-header .menu-icon,
[data-bs-theme="dark"] .main-header .menu-icon,
body.night-mode .main-header .group-switcher .group-switcher-btn,
[data-bs-theme="dark"] .main-header .group-switcher .group-switcher-btn {
  background: rgba(255, 255, 255, .06) !important;
  color: #e6e8eb !important;
}

/* Header dropdowns (notifications/messages) — premium card */
.main-header .navbar-wrapper .dropdown-menu {
  border-radius: 18px !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  box-shadow: 0 22px 50px rgba(15, 23, 42, .18) !important;
  padding: 6px !important;
  margin-top: 10px !important;
  min-width: 320px !important;
  overflow: hidden !important;
}

/* =========================================================
   17) "Son Güncellemeler" filter row (page section header)
   ========================================================= */
.feeds-filter-wrapper,
.section-header-with-filters,
.posts-filter-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin: 12px 0 14px !important;
  padding: 0 4px !important;
}
.feeds-filter-wrapper h4,
.feeds-filter-wrapper .section-title,
.section-header-with-filters h4,
.posts-filter-bar h4 {
  font-weight: 800 !important;
  font-size: 18px !important;
  margin: 0 !important;
  color: var(--g2026-text, #0f172a) !important;
  letter-spacing: -.01em !important;
}
/* Country / "Tümü" dropdown buttons in filter row */
.feeds-filter-wrapper .btn,
.feeds-filter-wrapper .dropdown-toggle,
.posts-filter-bar .btn {
  background: #fff !important;
  border: 1px solid rgba(15, 23, 42, .1) !important;
  color: var(--g2026-text, #0f172a) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.feeds-filter-wrapper .btn:hover,
.feeds-filter-wrapper .dropdown-toggle:hover {
  background: rgba(15, 23, 42, .04) !important;
}
body.night-mode .feeds-filter-wrapper .btn,
[data-bs-theme="dark"] .feeds-filter-wrapper .btn {
  background: rgba(255, 255, 255, .06) !important;
  border-color: rgba(255, 255, 255, .12) !important;
  color: #e6e8eb !important;
}

/* =========================================================
   18) MODALS — Share + Review premium polish
   ========================================================= */

/* Modal header — base */
.modal .modal-header {
  border-bottom: 1px solid rgba(15, 23, 42, .06) !important;
  padding: 16px 18px !important;
  align-items: center !important;
}
.modal .modal-header .modal-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--g2026-text, #0f172a) !important;
  margin: 0 !important;
}
.modal .modal-header .modal-title .main-icon {
  width: 20px !important;
  height: 20px !important;
  color: var(--g2026-accent, #6366f1) !important;
  margin: 0 !important;
}
.modal .modal-header .btn-close {
  flex-shrink: 0 !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background-color: rgba(15, 23, 42, .05) !important;
  background-size: 11px !important;
  opacity: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.modal .modal-header .btn-close:hover {
  background-color: rgba(15, 23, 42, .1) !important;
}

/* Share modal: copy URL input group */
.modal .modal-body .input-group {
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid rgba(15, 23, 42, .1) !important;
  background: rgba(15, 23, 42, .04) !important;
}
.modal .modal-body .input-group .form-control {
  background: transparent !important;
  border: 0 !important;
  font-size: 13px !important;
  padding: 10px 14px !important;
  color: var(--g2026-text-2, #475569) !important;
  height: 44px !important;
}
.modal .modal-body .input-group .btn.js_clipboard,
.modal .modal-body .input-group .btn-light {
  background: rgba(15, 23, 42, .06) !important;
  border: 0 !important;
  color: var(--g2026-text, #0f172a) !important;
  border-left: 1px solid rgba(15, 23, 42, .08) !important;
  padding: 0 16px !important;
  font-size: 14px !important;
}
.modal .modal-body .input-group .btn.js_clipboard:hover {
  background: rgba(15, 23, 42, .1) !important;
}

/* Section titles inside share modal ("Dış Paylaşım", "Paylaş") */
.modal .modal-body .h5,
.modal .modal-body .h6 {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--g2026-text, #0f172a) !important;
  margin: 18px 0 12px !important;
  text-align: center !important;
}

/* External share buttons row — premium pills */
.external-share-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  justify-content: center !important;
  margin: 12px auto 18px !important;
}
.external-share-row .ext-share-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 11px 18px !important;
  border-radius: 14px !important;
  border: 0 !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .14) !important;
  transition: transform .12s ease, filter .15s ease, box-shadow .15s ease !important;
}
.external-share-row .ext-share-btn:hover {
  color: #fff !important;
  filter: brightness(1.06) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 20px rgba(15, 23, 42, .18) !important;
}
.external-share-row .ext-share-btn:active {
  transform: translateY(0) !important;
}

/* Share-to button cards (Zaman Tüneli / Grup / Etkinlik) */
.modal .modal-body .button-label {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 110px !important;
  min-height: 88px !important;
  padding: 14px 10px !important;
  margin: 6px 6px !important;
  background: #fff !important;
  border: 1.5px solid rgba(15, 23, 42, .1) !important;
  border-radius: 16px !important;
  cursor: pointer !important;
  transition: border-color .15s ease, background .15s ease, transform .12s ease !important;
}
.modal .modal-body .button-label:hover {
  border-color: rgba(99, 102, 241, .35) !important;
  background: rgba(99, 102, 241, .03) !important;
}
.modal .modal-body .button-label .icon .main-icon {
  width: 22px !important;
  height: 22px !important;
  color: var(--g2026-accent, #6366f1) !important;
}
.modal .modal-body .button-label .title {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--g2026-text, #0f172a) !important;
}
/* Selected state via :has(input:checked) */
.modal .modal-body .input-label:checked + .button-label,
.modal .modal-body .button-label:has(+ input:checked),
.modal .modal-body label.button-label[for]:has(~ input[type="radio"]:checked) {
  border-color: var(--g2026-accent, #6366f1) !important;
  background: rgba(99, 102, 241, .06) !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .12) !important;
}
body.night-mode .modal .modal-body .button-label,
[data-bs-theme="dark"] .modal .modal-body .button-label {
  background: rgba(255, 255, 255, .04) !important;
  border-color: rgba(255, 255, 255, .1) !important;
}

/* Modal form group + textarea */
.modal .modal-body .form-group {
  margin-bottom: 16px !important;
}
.modal .modal-body .form-label {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--g2026-text, #0f172a) !important;
  margin-bottom: 8px !important;
  display: block !important;
}
.modal .modal-body textarea.form-control,
.modal .modal-body input.form-control:not(.input-group .form-control) {
  border: 1px solid rgba(15, 23, 42, .12) !important;
  border-radius: 14px !important;
  background: #fff !important;
  font-size: 14px !important;
  padding: 12px 14px !important;
  color: var(--g2026-text, #0f172a) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .03) inset !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
.modal .modal-body textarea.form-control:focus,
.modal .modal-body input.form-control:focus {
  border-color: var(--g2026-accent, #6366f1) !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .15) !important;
  outline: 0 !important;
}
body.night-mode .modal .modal-body textarea.form-control,
[data-bs-theme="dark"] .modal .modal-body textarea.form-control,
body.night-mode .modal .modal-body input.form-control,
[data-bs-theme="dark"] .modal .modal-body input.form-control {
  background: rgba(255, 255, 255, .04) !important;
  border-color: rgba(255, 255, 255, .12) !important;
  color: #e6e8eb !important;
}

/* Modal footer */
.modal .modal-footer {
  border-top: 1px solid rgba(15, 23, 42, .06) !important;
  padding: 12px 18px !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}
.modal .modal-footer .btn-primary,
.modal .modal-footer .js_publisher-btn {
  background: var(--g2026-accent, #6366f1) !important;
  border-color: var(--g2026-accent, #6366f1) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 10px 24px !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 16px rgba(99, 102, 241, .28) !important;
  transition: filter .15s ease, transform .12s ease !important;
}
.modal .modal-footer .btn-primary:hover,
.modal .modal-footer .js_publisher-btn:hover {
  filter: brightness(1.06) !important;
  transform: translateY(-1px) !important;
}

/* ---- Review modal: star rating ---- */
.modal .star-rating {
  display: inline-flex !important;
  flex-direction: row-reverse !important;
  gap: 4px !important;
  justify-content: flex-end !important;
  font-size: 28px !important;
}
.modal .star-rating input[type="radio"] {
  display: none !important;
}
.modal .star-rating label {
  cursor: pointer !important;
  color: #d1d5db !important;
  padding: 2px !important;
  margin: 0 !important;
  transition: color .12s ease, transform .12s ease !important;
}
.modal .star-rating label:hover,
.modal .star-rating label:hover ~ label,
.modal .star-rating input[type="radio"]:checked ~ label {
  color: #fbbf24 !important;
  transform: scale(1.05) !important;
}

/* ---- Review modal: photo uploader (camera icon dashed box) ---- */
.modal .attachments[data-type="photos"] ul {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}
.modal .attachments[data-type="photos"] li.add {
  width: 64px !important;
  height: 64px !important;
  border-radius: 14px !important;
  border: 1.5px dashed rgba(15, 23, 42, .25) !important;
  background: rgba(15, 23, 42, .02) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: border-color .15s ease, background .15s ease !important;
}
.modal .attachments[data-type="photos"] li.add:hover {
  border-color: var(--g2026-accent, #6366f1) !important;
  background: rgba(99, 102, 241, .04) !important;
}
.modal .attachments[data-type="photos"] li.add i.fa-camera {
  font-size: 18px !important;
  color: var(--g2026-text-3, #94a3b8) !important;
}
.modal .attachments[data-type="photos"] li.add:hover i.fa-camera {
  color: var(--g2026-accent, #6366f1) !important;
}

/* Modal scaffold spacing */
.modal .modal-dialog {
  margin: 1.5rem auto !important;
}
@media (max-width: 575px) {
  .modal .modal-dialog {
    margin: 0.75rem !important;
  }
  .modal .modal-body .button-label {
    width: 30% !important;
    min-width: 0 !important;
  }
}

/* =========================================================
   19) MOBILE SEARCH OVERLAY — premium iOS-like
   ========================================================= */

@media (max-width: 767px) {
  .mobile-search-overlay {
    background: #fff !important;
  }
  body.night-mode .mobile-search-overlay,
  [data-bs-theme="dark"] .mobile-search-overlay {
    background: #0f1115 !important;
  }

  /* Top bar */
  .mobile-search-topbar {
    gap: 10px !important;
    padding: 10px 14px !important;
    padding-top: calc(10px + env(safe-area-inset-top)) !important;
    border-bottom: 0 !important;
    background: #fff !important;
  }
  body.night-mode .mobile-search-topbar,
  [data-bs-theme="dark"] .mobile-search-topbar {
    background: #0f1115 !important;
  }

  /* Search input pill */
  .mobile-search-input-wrap {
    background: rgba(15, 23, 42, .06) !important;
    border-radius: 12px !important;
    height: 38px !important;
    padding: 0 12px !important;
    align-items: center !important;
    display: flex !important;
    flex: 1 1 auto !important;
    gap: 8px !important;
  }
  body.night-mode .mobile-search-input-wrap,
  [data-bs-theme="dark"] .mobile-search-input-wrap {
    background: rgba(255, 255, 255, .08) !important;
  }
  .mobile-search-input-wrap .mobile-search-icon {
    width: 16px !important;
    height: 16px !important;
    color: var(--g2026-text-3, #94a3b8) !important;
    flex-shrink: 0 !important;
  }
  .mobile-search-input {
    flex: 1 1 auto !important;
    background: transparent !important;
    border: 0 !important;
    outline: none !important;
    font-size: 15px !important;
    color: var(--g2026-text, #0f172a) !important;
    height: 36px !important;
    padding: 0 !important;
  }
  body.night-mode .mobile-search-input,
  [data-bs-theme="dark"] .mobile-search-input {
    color: #e6e8eb !important;
  }
  .mobile-search-input::placeholder {
    color: var(--g2026-text-3, #94a3b8) !important;
  }
  .mobile-search-clear {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background: rgba(15, 23, 42, .25) !important;
    color: #fff !important;
    border: 0 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
  }

  /* Cancel button */
  .mobile-search-cancel {
    background: transparent !important;
    border: 0 !important;
    color: var(--g2026-accent, #6366f1) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    padding: 4px 6px !important;
    cursor: pointer !important;
  }

  /* Body padding */
  .mobile-search-body {
    padding: 4px 8px 20px !important;
    overflow-y: auto !important;
  }

  /* Section heading */
  .mobile-search-section-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 8px 8px !important;
    margin: 0 !important;
  }
  .mobile-search-section-head > span:first-child {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--g2026-text, #0f172a) !important;
    letter-spacing: -.01em !important;
  }
  body.night-mode .mobile-search-section-head > span:first-child,
  [data-bs-theme="dark"] .mobile-search-section-head > span:first-child {
    color: #e6e8eb !important;
  }
  .mobile-search-section-head .js_clear-searches {
    color: var(--g2026-accent, #6366f1) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    cursor: pointer !important;
  }
  .mobile-search-section-head .js_clear-searches:hover {
    text-decoration: underline !important;
  }

  /* List rows: avatar + name + button on SAME row */
  .mobile-search-section .js_scroller > ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .mobile-search-section .js_scroller > ul > li.feeds-item {
    padding: 4px 0 !important;
    margin: 0 !important;
    border: 0 !important;
  }
  .mobile-search-section .feeds-item .data-container {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 8px 10px !important;
    border-radius: 14px !important;
    transition: background .12s ease !important;
  }
  .mobile-search-section .feeds-item .data-container:hover {
    background: rgba(15, 23, 42, .04) !important;
  }
  body.night-mode .mobile-search-section .feeds-item .data-container:hover,
  [data-bs-theme="dark"] .mobile-search-section .feeds-item .data-container:hover {
    background: rgba(255, 255, 255, .05) !important;
  }
  .mobile-search-section .feeds-item .data-avatar {
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    display: block !important;
    position: relative !important;
  }
  .mobile-search-section .feeds-item .data-avatar img {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
  }
  .mobile-search-section .feeds-item .data-content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }
  /* Reorder: name first (left), button at right — both centered */
  .mobile-search-section .feeds-item .data-content > .float-end {
    float: none !important;
    order: 2 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }
  .mobile-search-section .feeds-item .data-content > .mt5 {
    order: 1 !important;
    margin: 0 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }
  .mobile-search-section .feeds-item .data-content .name a {
    font-size: 14.5px !important;
    font-weight: 600 !important;
    color: var(--g2026-text, #0f172a) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-block !important;
    max-width: 100% !important;
  }
  body.night-mode .mobile-search-section .feeds-item .data-content .name a,
  [data-bs-theme="dark"] .mobile-search-section .feeds-item .data-content .name a {
    color: #e6e8eb !important;
  }
  /* Action button (user_add icon) — circle pill */
  .mobile-search-section .feeds-item .data-content > .float-end .btn,
  .mobile-search-section .feeds-item .data-content > .float-end button {
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: rgba(99, 102, 241, .1) !important;
    border: 0 !important;
    color: var(--g2026-accent, #6366f1) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
  }
  .mobile-search-section .feeds-item .data-content > .float-end .btn:hover,
  .mobile-search-section .feeds-item .data-content > .float-end button:hover {
    background: rgba(99, 102, 241, .18) !important;
  }
  .mobile-search-section .feeds-item .data-content > .float-end .btn .main-icon,
  .mobile-search-section .feeds-item .data-content > .float-end .btn svg {
    width: 16px !important;
    height: 16px !important;
    color: var(--g2026-accent, #6366f1) !important;
  }
  /* Text-style action buttons (Sent, Following, etc.) keep readable */
  .mobile-search-section .feeds-item .data-content > .float-end .btn:not(.rounded-pill) {
    width: auto !important;
    height: 30px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    gap: 4px !important;
  }
  /* Mutual friends line */
  .mobile-search-section .feeds-item .text-underline {
    font-size: 12px !important;
    color: var(--g2026-text-3, #94a3b8) !important;
    text-decoration: none !important;
    cursor: pointer !important;
  }
}

/* =========================================================
   20) FIXES — emoji alignment, notification list, group switcher
   ========================================================= */

/* ---------- 20.1 Emoji alignment (sprite-scale) ----------
   Native theme uses .emoji (120x120) transform:scale + top/right %
   offsets to fit inside .inline-emoji (18x18). When we force
   img to 22x22 / 26x26 it breaks the offset and the emoji
   floats up. Restore the natural sprite mechanism everywhere. */
.inline-emoji img,
.inline-emoji svg,
.emoji img,
.reactions-container img,
.reactions-container .inline-emoji img,
.reactions-container .reactions_item img,
.modal .modal-header .nav-tabs .nav-link .inline-emoji img,
.modal .modal-header .nav-tabs .nav-link .inline-emoji svg,
.modal .modal-header .nav-tabs .nav-link .inline-emoji,
.modal .modal-body ul > li .inline-emoji img,
.modal .modal-body ul > li .inline-emoji svg {
  width: auto !important;
  height: auto !important;
  display: inline-block !important;
  margin: 0 !important;
}
/* Keep the wrapper sized; emoji scales itself via transform */
.inline-emoji {
  width: 18px !important;
  height: 18px !important;
  display: inline-block !important;
  vertical-align: middle !important;
  position: relative !important;
  overflow: hidden !important;
}
/* For tab/popup contexts that need slightly bigger emoji,
   simply enlarge the WRAPPER (not the inner img). */
.modal .modal-header .nav-tabs .nav-link .inline-emoji,
.modal .modal-body ul > li .inline-emoji,
.post-comments .comment-actions .reactions-container .reactions_item .inline-emoji,
.post-comments .comment-actions .reactions-container .reaction .inline-emoji,
.reactions-container .inline-emoji,
.reactions-container .reactions_item .inline-emoji,
.reactions-container .reaction .inline-emoji {
  width: 22px !important;
  height: 22px !important;
}
/* The .emoji inner div keeps its native 120px size + transform.
   We override its scale to fit the wrapper sizes set above. */
.inline-emoji .emoji {
  width: 120px !important;
  height: 120px !important;
  transform: scale(0.15) !important;
  top: -285% !important;
  right: 285% !important;
}
/* 22px wrapper → scale = 22/120 = 0.1833; pct offset = -(120-22)/2/120 = -41% */
.modal .modal-header .nav-tabs .nav-link .inline-emoji .emoji,
.modal .modal-body ul > li .inline-emoji .emoji,
.post-comments .comment-actions .reactions-container .inline-emoji .emoji,
.reactions-container .inline-emoji .emoji {
  transform: scale(0.1833) !important;
  top: -232% !important;
  right: 232% !important;
}
/* Reactions popup container — keep size of bubble items (32x32),
   the inner inline-emoji controls actual emoji size. */
.reactions-container .reactions_item,
.reactions-container .reaction,
.post-comments .comment-actions .reactions-container .reactions_item,
.post-comments .comment-actions .reactions-container .reaction {
  overflow: visible !important;
}

/* ---------- 20.2 Notifications dropdown — fix layout ----------
   Our §16 .main-header .navbar-wrapper ul > li styling was applied
   to ALL <li> descendants (including notification feed items inside
   the dropdown), turning each notification row into a 40px circle.
   Scope to DIRECT children of the navbar list only. */
.main-header .navbar-wrapper > ul > li {
  position: relative !important;
  margin: 0 !important;
  list-style: none !important;
}
.main-header .navbar-wrapper > ul > li > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: rgba(15, 23, 42, .05) !important;
  color: var(--g2026-text, #0f172a) !important;
  position: relative !important;
}
/* Undo any styling we forced on grandchildren */
.main-header .navbar-wrapper > ul > li .dropdown-menu li,
.main-header .navbar-wrapper > ul > li .dropdown-menu li > a,
.main-header .navbar-wrapper > ul > li .dropdown-widget li,
.main-header .navbar-wrapper > ul > li .dropdown-widget li > a {
  display: list-item !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  background: transparent !important;
  margin: initial !important;
  padding: initial !important;
}
/* Notification feed items inside dropdown-widget — restore native */
.main-header .navbar-wrapper .dropdown-widget .js_scroller {
  max-height: 380px !important;
  overflow-y: auto !important;
}
.main-header .navbar-wrapper .dropdown-widget .js_scroller > ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 4px !important;
  display: block !important;
}
.main-header .navbar-wrapper .dropdown-widget .js_scroller > ul > li {
  display: block !important;
  width: auto !important;
  height: auto !important;
  border-radius: 12px !important;
  background: transparent !important;
  padding: 10px 12px !important;
  margin: 2px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(15, 23, 42, .05) !important;
}
.main-header .navbar-wrapper .dropdown-widget .js_scroller > ul > li:last-child {
  border-bottom: 0 !important;
}
.main-header .navbar-wrapper .dropdown-widget .js_scroller > ul > li:hover {
  background: rgba(15, 23, 42, .04) !important;
}
.main-header .navbar-wrapper .dropdown-widget .js_scroller > ul > li > a,
.main-header .navbar-wrapper .dropdown-widget .js_scroller > ul > li {
  font-size: 13px !important;
  color: var(--g2026-text, #0f172a) !important;
  text-decoration: none !important;
}
.main-header .navbar-wrapper .dropdown-widget .js_scroller img {
  border-radius: 50% !important;
}
/* Dropdown widget header/footer cleanup */
.main-header .navbar-wrapper .dropdown-widget .dropdown-widget-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid rgba(15, 23, 42, .06) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: var(--g2026-text, #0f172a) !important;
}
.main-header .navbar-wrapper .dropdown-widget .dropdown-widget-header .title {
  font-weight: 800 !important;
  font-size: 15px !important;
}
.main-header .navbar-wrapper .dropdown-widget .dropdown-widget-footer {
  display: block !important;
  text-align: center !important;
  padding: 10px !important;
  border-top: 1px solid rgba(15, 23, 42, .06) !important;
  color: var(--g2026-accent, #6366f1) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  background: transparent !important;
}
.main-header .navbar-wrapper .dropdown-widget .dropdown-widget-footer:hover {
  background: rgba(99, 102, 241, .06) !important;
}
body.night-mode .main-header .navbar-wrapper .dropdown-widget .js_scroller > ul > li,
[data-bs-theme="dark"] .main-header .navbar-wrapper .dropdown-widget .js_scroller > ul > li {
  border-bottom-color: rgba(255, 255, 255, .06) !important;
}
body.night-mode .main-header .navbar-wrapper .dropdown-widget .js_scroller > ul > li:hover,
[data-bs-theme="dark"] .main-header .navbar-wrapper .dropdown-widget .js_scroller > ul > li:hover {
  background: rgba(255, 255, 255, .04) !important;
}

/* ---------- 20.3 Group switcher — fix dropdown disappearing ----------
   backdrop-filter on .main-header creates a containing block for
   position:fixed descendants, so the mobile slide-up dropdown
   (position:fixed; bottom:0) was anchored to .main-header (top of
   screen) instead of the viewport — appearing off-screen above.
   Remove backdrop-filter and use a solid background. */
.main-header {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.night-mode .main-header,
[data-bs-theme="dark"] .main-header {
  background: #16181d !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Make sure group-switcher dropdown can render above all */
.main-header .group-switcher {
  position: relative !important;
}
.main-header .group-switcher-dropdown {
  z-index: 1100 !important;
}

/* =========================================================
   21) MORE FIXES — group switcher overflow + drag-close + emojis
   ========================================================= */

/* ---------- 21.1 Emoji — full revert to native sprite ----------
   Our wrappers were resizing .inline-emoji to 22px which threw off
   the .emoji 120px scale-down math. Let everything be NATIVE
   except force img to its natural 120x120 so the scale works. */
.inline-emoji {
  width: 18px !important;
  height: 18px !important;
  display: inline-block !important;
  position: relative !important;
  vertical-align: middle !important;
  overflow: hidden !important;
}
.inline-emoji .emoji {
  width: 120px !important;
  height: 120px !important;
  display: inline-block !important;
  border-radius: 50% !important;
  position: relative !important;
  transform: scale(0.15) !important;
  top: -285% !important;
  right: 285% !important;
  margin: 0 !important;
}
.inline-emoji .emoji img,
.emoji img {
  width: 120px !important;
  height: 120px !important;
  display: inline-block !important;
  margin: 0 !important;
}
/* Reactions popup: make the wrapper match expected button size,
   but keep emoji wrapper inside at native 18px (native sprite math). */
.reactions-container .reactions_item,
.reactions-container .reaction,
.post-comments .comment-actions .reactions-container .reactions_item,
.post-comments .comment-actions .reactions-container .reaction {
  width: 36px !important;
  height: 36px !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.reactions-container .reactions_item .inline-emoji,
.reactions-container .reaction .inline-emoji,
.post-comments .comment-actions .reactions-container .inline-emoji,
.modal .modal-header .nav-tabs .nav-link .inline-emoji,
.modal .modal-body ul > li .inline-emoji {
  width: 22px !important;
  height: 22px !important;
}
.reactions-container .reactions_item .inline-emoji .emoji,
.reactions-container .reaction .inline-emoji .emoji,
.post-comments .comment-actions .reactions-container .inline-emoji .emoji,
.modal .modal-header .nav-tabs .nav-link .inline-emoji .emoji,
.modal .modal-body ul > li .inline-emoji .emoji {
  transform: scale(0.1833) !important;
  top: -232% !important;
  right: 232% !important;
}

/* ---------- 21.2 Group switcher dropdown — fits viewport ----------
   Bottom bar covers ~66px + safe-area. Pull the slide-up sheet
   ABOVE the bottom bar so the list isn't hidden. */
@media (max-width: 767.98px) {
  .main-header .group-switcher-dropdown {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: calc(66px + env(safe-area-inset-bottom) + 8px) !important;
    min-width: 100% !important;
    max-width: 100% !important;
    border-radius: 22px 22px 0 0 !important;
    max-height: calc(100vh - 80px - 66px - env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 -10px 30px rgba(15, 23, 42, .18) !important;
    padding: 0 !important;
    z-index: 1200 !important;
    background: #ffffff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    filter: none !important;
    isolation: isolate !important;
    opacity: 1 !important;
  }
  /* Hide when not open */
  .main-header .group-switcher:not(.open) .group-switcher-dropdown {
    display: none !important;
  }
  /* Drag handle */
  .main-header .group-switcher-dropdown::before {
    content: "" !important;
    display: block !important;
    width: 40px !important;
    height: 5px !important;
    background: rgba(15, 23, 42, .18) !important;
    border-radius: 999px !important;
    margin: 8px auto 6px !important;
    flex-shrink: 0 !important;
    cursor: grab !important;
  }
  .main-header .group-switcher-dropdown.dragging::before {
    cursor: grabbing !important;
  }
  /* Header stays fixed at top of sheet */
  .main-header .group-switcher-header {
    flex-shrink: 0 !important;
    padding: 4px 16px 10px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    color: var(--g2026-text-3, #94a3b8) !important;
  }
  /* List takes remaining space and scrolls */
  .main-header .group-switcher-list {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    max-height: none !important;
    padding: 4px 6px !important;
  }
  /* Footer pinned at bottom */
  .main-header .group-switcher-footer {
    flex-shrink: 0 !important;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important;
    background: #fff !important;
    border-top: 1px solid rgba(15, 23, 42, .06) !important;
  }
  body.night-mode .main-header .group-switcher-dropdown,
  [data-bs-theme="dark"] .main-header .group-switcher-dropdown {
    background: #1c1e22 !important;
  }
  body.night-mode .main-header .group-switcher-footer,
  [data-bs-theme="dark"] .main-header .group-switcher-footer {
    background: #1c1e22 !important;
    border-top-color: rgba(255, 255, 255, .08) !important;
  }
  /* Slide-down transform via inline style from JS */
  .main-header .group-switcher-dropdown {
    transform: translate3d(0, var(--g-sheet-drag, 0px), 0) !important;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1) !important;
  }
  .main-header .group-switcher-dropdown.dragging {
    transition: none !important;
  }
  /* Backdrop — soft dim, NO blur (blur leaks onto sheet on some browsers) */
  .group-switcher-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, .35) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    z-index: 1199 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .2s ease !important;
  }
  .group-switcher.open ~ .group-switcher-backdrop,
  body.group-switcher-open .group-switcher-backdrop {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  /* Keep bottom nav visible & tappable above backdrop */
  body.group-switcher-open .main-menu,
  body.group-switcher-open .bottom-bar,
  body.group-switcher-open nav.bottom-bar,
  body.group-switcher-open .mobile-bottom-nav {
    z-index: 1201 !important;
    position: relative;
  }
  /* .main-header is position:fixed; z-index:1001 → it creates a stacking
     context, so the dropdown sheet (a descendant) was painted below the
     body-level backdrop (z-index:1199). Lift the whole header above the
     backdrop while the switcher is open so the sheet is interactive. */
  body.group-switcher-open .main-header {
    z-index: 1210 !important;
  }
}

/* =========================================================
   22) REACTIONS POPUP — full revert to native, just polish container
   ========================================================= */
/* Container: native is position:fixed + width:144px on mobile (3 cols × 48).
   Stop forcing our absolute/32px sizing — let native render emojis. */
.reactions-container,
.post-comments .comment-actions .reactions-container {
  display: none;
  background: #fff !important;
  border-radius: 40px !important;
  box-shadow: 0 6px 24px rgba(15, 23, 42, .18) !important;
  padding: 6px !important;
  border: 1px solid rgba(15, 23, 42, .06) !important;
  width: auto !important;
  height: auto !important;
  white-space: nowrap !important;
  z-index: 1500 !important;
}
body.night-mode .reactions-container,
[data-bs-theme="dark"] .reactions-container {
  background: #1c1e22 !important;
  border-color: rgba(255, 255, 255, .08) !important;
}
.reactions-container.show,
.reactions-wrapper:hover .reactions-container,
.reactions-wrapper.active .reactions-container {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
}
/* Items: use native 48×48 float:left layout, just neutralize overflow */
.reactions-container .reactions_item,
.reactions-container .reaction,
.post-comments .comment-actions .reactions-container .reactions_item,
.post-comments .comment-actions .reactions-container .reaction {
  width: 48px !important;
  height: 48px !important;
  overflow: visible !important;
  display: inline-block !important;
  float: none !important;
  vertical-align: middle !important;
  cursor: pointer !important;
}
/* Inline-emoji inside popup items: use native 36×36 + native scale */
.reactions-container .reactions_item .inline-emoji,
.reactions-container .reaction .inline-emoji,
.post-comments .comment-actions .reactions-container .inline-emoji {
  width: 36px !important;
  height: 36px !important;
  display: inline-block !important;
  position: relative !important;
  overflow: hidden !important;
  margin: 6px !important;
}
.reactions-container .reactions_item .inline-emoji .emoji,
.reactions-container .reaction .inline-emoji .emoji,
.post-comments .comment-actions .reactions-container .inline-emoji .emoji {
  width: 120px !important;
  height: 120px !important;
  display: inline-block !important;
  position: relative !important;
  transform: scale(0.3) !important;
  top: -116.7% !important;
  right: 116.7% !important;
}
/* Reactions popup on mobile width: don't constrain */
@media (max-width: 480px) {
  .reactions-container {
    width: auto !important;
  }
}
/* Modal who-reacts tab emojis: keep at 22 wrapper - 18.3% scale */
.modal .modal-header .nav-tabs .nav-link .inline-emoji {
  width: 22px !important;
  height: 22px !important;
  display: inline-block !important;
  overflow: hidden !important;
  position: relative !important;
}
.modal .modal-header .nav-tabs .nav-link .inline-emoji .emoji {
  width: 120px !important;
  height: 120px !important;
  transform: scale(0.1833) !important;
  top: -222.7% !important;
  right: 222.7% !important;
}

/* =========================================================
   23) REACTIONS POPUP — FINAL: correct sprite math
   Wrapper W → scale = W/120, top/right = (50 - 6000/W)%
   Use W=32 (scale 0.2667, offset -137.5%) everywhere in popups
   ========================================================= */
/* Post + comments reactions popup: items */
.post .post-actions .reactions-container .reactions_item,
.post .post-actions .reactions-container .reaction,
.post-comments .comment-actions .reactions-container .reactions_item,
.post-comments .comment-actions .reactions-container .reaction,
.reactions-container .reactions_item,
.reactions-container .reaction {
  width: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  border-radius: 50% !important;
  overflow: visible !important;
  cursor: pointer !important;
  transition: transform .15s cubic-bezier(.34,1.56,.64,1) !important;
}
.post .post-actions .reactions-container .reactions_item:hover,
.post .post-actions .reactions-container .reaction:hover,
.post-comments .comment-actions .reactions-container .reactions_item:hover,
.post-comments .comment-actions .reactions-container .reaction:hover,
.reactions-container .reactions_item:hover,
.reactions-container .reaction:hover {
  transform: scale(1.25) translateY(-3px) !important;
  background: rgba(99,102,241,.08) !important;
}
/* Wrapper inline-emoji: 32×32 */
.post .post-actions .reactions-container .reactions_item .inline-emoji,
.post .post-actions .reactions-container .reaction .inline-emoji,
.post-comments .comment-actions .reactions-container .reactions_item .inline-emoji,
.post-comments .comment-actions .reactions-container .reaction .inline-emoji,
.reactions-container .reactions_item .inline-emoji,
.reactions-container .reaction .inline-emoji,
.reactions-container .inline-emoji {
  width: 32px !important;
  height: 32px !important;
  display: inline-block !important;
  position: relative !important;
  overflow: hidden !important;
  margin: 0 !important;
  line-height: normal !important;
}
/* .emoji inside: scale 32/120 = 0.2667, offset -137.5% */
.post .post-actions .reactions-container .inline-emoji .emoji,
.post-comments .comment-actions .reactions-container .inline-emoji .emoji,
.reactions-container .inline-emoji .emoji {
  width: 120px !important;
  height: 120px !important;
  display: inline-block !important;
  position: relative !important;
  transform: scale(0.2667) !important;
  top: -137.5% !important;
  right: 137.5% !important;
  border-radius: 50% !important;
}
.reactions-container .inline-emoji .emoji img {
  width: 120px !important;
  height: 120px !important;
  max-width: none !important;
  display: inline-block !important;
}
/* Image rule (some themes use bare <img> not sprite). If sprite missing, neutralize size:auto rule */
.reactions-container img {
  height: auto !important;
}
/* Container — no width constraint, auto-fit all reactions */
.post .post-actions .reactions-container,
.post-comments .comment-actions .reactions-container,
.reactions-container {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}
@media (max-width: 480px) {
  .reactions-container { width: auto !important; }
}

/* Modal "who reacted" tab emojis — 22px wrapper */
.modal .modal-header .nav-tabs .nav-link .inline-emoji,
.modal .modal-header.with-nav .nav-tabs .nav-link .inline-emoji {
  width: 22px !important;
  height: 22px !important;
  display: inline-block !important;
  position: relative !important;
  overflow: hidden !important;
}
.modal .modal-header .nav-tabs .nav-link .inline-emoji .emoji,
.modal .modal-header.with-nav .nav-tabs .nav-link .inline-emoji .emoji {
  width: 120px !important;
  height: 120px !important;
  transform: scale(0.1833) !important;
  top: -222.73% !important;
  right: 222.73% !important;
}

/* =========================================================
   24) REACTIONS POPUP — FINAL FIX (actual markup)
   Markup: .reactions-container > .reactions_item > .emoji > img
   (no .inline-emoji wrapper inside popup items)
   Strategy: keep native sprite math, just style container & items
   ========================================================= */
/* Kill our earlier broken overrides on imgs/inline-emoji inside popup */
.reactions-container .reactions_item img,
.reactions-container .reaction img {
  width: 120px !important;
  height: 120px !important;
  max-width: none !important;
  display: inline-block !important;
}
/* Container: don't force position — let native (style.css) + JS handle it.
   Only restyle appearance. */
.post .post-actions .reactions-container,
.post-comments .comment-actions .reactions-container,
.reactions-container {
  position: absolute !important;
  bottom: calc(100% + 8px) !important;
  left: 0 !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 4px 6px !important;
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  border-radius: 999px !important;
  box-shadow: 0 12px 30px rgba(15,23,42,.18), 0 2px 6px rgba(15,23,42,.08) !important;
  white-space: nowrap !important;
  z-index: 1000 !important;
  display: none;
}
body.night-mode .reactions-container,
[data-bs-theme="dark"] .reactions-container {
  background: #1c1e22 !important;
  border-color: rgba(255,255,255,.08) !important;
}
.reactions-wrapper:hover .reactions-container,
.reactions-wrapper.active .reactions-container,
.reactions-wrapper.show .reactions-container,
.reactions-wrapper .reactions-container.show,
.reactions-container.show,
.reactions-container:hover {
  display: inline-block !important;
}
/* Items: native 48x48 inline-block; keep .emoji native scale */
.reactions-container .reactions_item,
.reactions-container .reaction {
  width: 48px !important;
  height: 48px !important;
  display: inline-block !important;
  float: none !important;
  vertical-align: middle !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  position: relative !important;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1) !important;
}
.reactions-container .reactions_item:hover,
.reactions-container .reaction:hover {
  transform: scale(1.18) translateY(-2px) !important;
  background: transparent !important;
}
/* .emoji: native 120x120 scaled. Center inside the 48px slot */
.reactions-container .reactions_item .emoji,
.reactions-container .reaction .emoji {
  width: 120px !important;
  height: 120px !important;
  display: inline-block !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  transform: translate(-50%, -50%) scale(0.32) !important;
  margin: 0 !important;
  border-radius: 50% !important;
}
.reactions-container .reactions_item:hover .emoji,
.reactions-container .reaction:hover .emoji {
  transform: translate(-50%, -50%) scale(0.38) !important;
}
/* Mobile: keep popup compact */
@media (max-width: 480px) {
  .reactions-container { width: auto !important; }
  .reactions-container .reactions_item,
  .reactions-container .reaction { width: 42px !important; height: 42px !important; }
  .reactions-container .reactions_item .emoji,
  .reactions-container .reaction .emoji {
    transform: translate(-50%, -50%) scale(0.28) !important;
  }
  .reactions-container .reactions_item:hover .emoji,
  .reactions-container .reaction:hover .emoji {
    transform: translate(-50%, -50%) scale(0.34) !important;
  }
}

/* =========================================================
   25) REACTIONS POPUP — DROP-DOWN below action row (override JS)
   JS sets inline top/left from offset. !important beats inline-no-important.
   Anchor popup to .post-actions / .reactions-wrapper instead.
   ========================================================= */
.post .post-actions,
.post-comments .post-comments-item .comment-actions,
.reactions-wrapper {
  position: relative !important;
}
/* Force popup BELOW the action row, centered, full-width-friendly */
.post .post-actions .reactions-container,
.post-comments .comment-actions .reactions-container,
.reactions-wrapper .reactions-container,
.reactions-container[style] {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  bottom: auto !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  display: none;
  padding: 6px 10px !important;
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  border-radius: 999px !important;
  box-shadow: 0 14px 34px rgba(15,23,42,.20), 0 2px 8px rgba(15,23,42,.08) !important;
  white-space: nowrap !important;
  z-index: 1050 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 92vw !important;
}
/* On comment: anchor under its own row (left aligned looks better) */
.post-comments .comment-actions .reactions-container,
.post-comments .comment-actions .reactions-wrapper .reactions-container {
  left: 0 !important;
  transform: none !important;
}
/* When visible (JS .show() sets display:block) */
.reactions-container[style*="display: block"],
.reactions-container[style*="display:block"],
.reactions-wrapper:hover > .reactions-container,
.reactions-wrapper.active > .reactions-container,
.reactions-container.show {
  display: inline-block !important;
}
body.night-mode .reactions-container,
[data-bs-theme="dark"] .reactions-container {
  background: #1c1e22 !important;
  border-color: rgba(255,255,255,.08) !important;
}
/* Items */
.reactions-container .reactions_item,
.reactions-container .reaction {
  width: 56px !important;
  height: 56px !important;
  display: inline-block !important;
  float: none !important;
  vertical-align: middle !important;
  margin: 0 3px !important;
  padding: 0 !important;
  overflow: visible !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  position: relative !important;
  background: transparent !important;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1) !important;
}
.reactions-container .reactions_item:hover,
.reactions-container .reaction:hover {
  transform: scale(1.22) translateY(-4px) !important;
}
/* burak: emoji popup items \u2014 bypass the legacy `scale(0.325)` trick on
   `.emoji` and just size the <img> directly so it FILLS the circle slot. */
.reactions-container .reactions_item .emoji,
.reactions-container .reaction .emoji {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  overflow: visible !important;
}
.reactions-container .reactions_item .emoji img,
.reactions-container .reaction .emoji img,
.reactions-container .reactions_item img,
.reactions-container .reaction img {
  width: 90% !important;
  height: 90% !important;
  max-width: 90% !important;
  max-height: 90% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
  /* kill the per-reaction infinite animations that can shrink the icon */
  animation: none !important;
  -webkit-animation: none !important;
  transform: none !important;
  position: static !important;
}
@media (max-width: 480px) {
  .reactions-container .reactions_item,
  .reactions-container .reaction { width: 44px !important; height: 44px !important; margin: 0 2px !important; }
  .post .post-actions .reactions-container,
  .post-comments .comment-actions .reactions-container,
  .reactions-wrapper .reactions-container,
  .reactions-container { padding: 6px 8px !important; }
}

/* =========================================================
   26) REACTIONS POPUP — fixed-position so it escapes .post overflow:hidden
   JS sets top/left in VIEWPORT coords below the button.
   ========================================================= */
.post .post-actions .reactions-container,
.post-comments .comment-actions .reactions-container,
.reactions-wrapper .reactions-container,
.reactions-container {
  position: fixed !important;
  top: auto;            /* JS will set */
  left: auto;
  right: auto;
  bottom: auto !important;
  transform: none !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  border-radius: 999px !important;
  box-shadow: 0 14px 34px rgba(15,23,42,.20), 0 2px 8px rgba(15,23,42,.08) !important;
  white-space: nowrap !important;
  z-index: 99999 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 96vw !important;
  display: none;
}
body.night-mode .reactions-container,
[data-bs-theme="dark"] .reactions-container {
  background: #1c1e22 !important;
  border-color: rgba(255,255,255,.08) !important;
}


/* =========================================================
   27) WHO-REACTS MODAL — bigger emoji using sprite-math
   Wrapper 28px → scale = 28/120 = 0.2333; offset = (120-28)/2/28*100 ≈ 164%
   ========================================================= */
.modal .modal-header .nav-tabs .nav-link .inline-emoji {
  width: 28px !important;
  height: 28px !important;
}
.modal .modal-header .nav-tabs .nav-link .inline-emoji .emoji {
  width: 120px !important;
  height: 120px !important;
  transform: scale(0.2333) !important;
  top: -164% !important;
  right: 164% !important;
}
/* Per-user reaction badge in who-reacts list: 26px */
.modal .modal-body ul > li .inline-emoji {
  width: 26px !important;
  height: 26px !important;
}
.modal .modal-body ul > li .inline-emoji .emoji {
  width: 120px !important;
  height: 120px !important;
  transform: scale(0.2167) !important;
  top: -181% !important;
  right: 181% !important;
}

/* Post-stats summary emoji bigger (sprite-math) — 20px wrapper */
.post .post-stats .reactions-stats .inline-emoji {
  width: 20px !important;
  height: 20px !important;
  display: inline-block !important;
  position: relative !important;
  overflow: hidden !important;
  vertical-align: middle !important;
  background: transparent !important;
}
.post .post-stats .reactions-stats .inline-emoji .emoji {
  width: 120px !important;
  height: 120px !important;
  transform: scale(0.1667) !important;
  top: -250% !important;
  right: 250% !important;
}
.post .post-stats .reactions-stats .inline-emoji .emoji img,
.post .post-stats .reactions-stats .inline-emoji img {
  width: 120px !important;
  height: 120px !important;
  max-width: none !important;
  max-height: none !important;
  display: block !important;
}
/* Post action button current-reaction icon — 24px */
.post .post-actions .reaction-btn-icon .inline-emoji {
  width: 24px !important;
  height: 24px !important;
}
.post .post-actions .reaction-btn-icon .inline-emoji .emoji {
  width: 120px !important;
  height: 120px !important;
  transform: scale(0.2) !important;
  top: -200% !important;
  right: 200% !important;
}

/* The tpl wraps the .inline-emoji in <div style="height:19px;"> — override */
.modal .modal-header .nav-tabs .nav-link > div[style*="height"] {
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

/* Force .emoji img to its native 120px in modal contexts so the
   sprite-scale math actually scales something. An earlier rule
   (line ~3308) sets width:auto which can collapse the img. */
.modal .modal-header .nav-tabs .nav-link .inline-emoji .emoji img,
.modal .modal-header .nav-tabs .nav-link .inline-emoji img,
.modal .modal-body ul > li .inline-emoji .emoji img,
.modal .modal-body ul > li .inline-emoji img {
  width: 120px !important;
  height: 120px !important;
  max-width: none !important;
  max-height: none !important;
  display: block !important;
}

/* Who-reacts list user row: position the small reaction badge
   on the bottom-right of the avatar, like a status overlay. */
.modal .modal-body ul > li .data-avatar { position: relative !important; }
.modal .modal-body ul > li .data-avatar .data-reaction {
  position: absolute !important;
  right: -4px !important;
  bottom: -4px !important;
  margin: 0 !important;
  z-index: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
  border-radius: 50% !important;
  padding: 2px !important;
  box-shadow: 0 1px 4px rgba(15,23,42,.18) !important;
}
body.night-mode .modal .modal-body ul > li .data-avatar .data-reaction,
[data-bs-theme="dark"] .modal .modal-body ul > li .data-avatar .data-reaction {
  background: #1c1e22 !important;
}
.modal .modal-body ul > li .data-avatar .data-reaction .inline-emoji {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
}
.modal .modal-body ul > li .data-avatar .data-reaction .inline-emoji .emoji {
  width: 120px !important;
  height: 120px !important;
  transform: scale(0.15) !important;
  top: -283.3% !important;
  right: 283.3% !important;
}

/* Force visibility/size of reactions-stats emoji at very high specificity */
.post .post-stats .reactions-stats > .reactions-stats-item {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  border-radius: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}
.post .post-stats .reactions-stats > .reactions-stats-item .inline-emoji {
  width: 22px !important;
  height: 22px !important;
  display: inline-block !important;
  position: relative !important;
  overflow: hidden !important;
  background: transparent !important;
}
.post .post-stats .reactions-stats > .reactions-stats-item .inline-emoji .emoji {
  width: 120px !important;
  height: 120px !important;
  display: block !important;
  position: relative !important;
  transform: scale(0.1833) !important;
  top: -222.7% !important;
  right: 222.7% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.post .post-stats .reactions-stats > .reactions-stats-item .inline-emoji .emoji img,
.post .post-stats .reactions-stats > .reactions-stats-item img {
  width: 120px !important;
  height: 120px !important;
  max-width: none !important;
  max-height: none !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  transform: none !important;
}

/* =========================================================
   17) HEADER POLISH — squircle buttons + hide logo on mobile (burak)
   - Ovals/pills feel cheap; switch to soft rounded squares
   - Birlix logo hidden on mobile (icon-only header reads cleaner)
   ========================================================= */
@media (max-width: 767.98px) {
  /* Hide logo (text or img) on mobile */
  .main-header .logo,
  .main-header .logo-wrapper .logo {
    display: none !important;
  }
  .main-header .logo-wrapper {
    gap: 8px !important;
  }
}

/* Soft squircle for hamburger menu */
.main-header .menu-icon {
  border-radius: 12px !important;
  width: 40px !important;
  height: 40px !important;
}

/* Group switcher: rectangle with soft corners (no longer a full pill) */
.main-header .group-switcher .group-switcher-btn {
  border-radius: 12px !important;
  height: 40px !important;
  padding: 0 12px !important;
}

/* Right-side navbar buttons (messages, notifications, +) → squircles */
.main-header .navbar-wrapper ul > li > a {
  border-radius: 12px !important;
  width: 40px !important;
  height: 40px !important;
}
/* Avatar dropdown toggle keeps round image but its wrapper is also squircle */
.main-header .navbar-wrapper ul > li.dropdown > a.user-menu,
.main-header .navbar-wrapper ul > li.dropdown > a.dropdown-toggle.user-menu {
  border-radius: 12px !important;
}

/* Notification counter badge — keep small pill, but reposition to corner of the squircle */
.main-header .navbar-wrapper ul > li .badge,
.main-header .navbar-wrapper ul > li .counter {
  top: -2px !important;
  right: -2px !important;
}

/* =========================================================
   18) HEADER ICONS — SF Symbols-grade bell & message glyphs (burak)
   - Replace legacy Illustrator-export icons with clean, modern,
     filled-rounded glyphs via CSS mask. Stroke weight matches
     iOS 17 SF Symbols "fill" variant.
   ========================================================= */

/* Hide the original SVGs inside chat + bell buttons */
.main-header .navbar-wrapper ul > li.js_live-messages > a .header-icon,
.main-header .navbar-wrapper ul > li.js_live-notifications > a .header-icon {
  display: none !important;
}

/* Shared glyph base */
.main-header .navbar-wrapper ul > li.js_live-messages > a::before,
.main-header .navbar-wrapper ul > li.js_live-notifications > a::before {
  content: "" !important;
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  background-color: currentColor !important;
  -webkit-mask-repeat: no-repeat !important;
          mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
          mask-position: center !important;
  -webkit-mask-size: 22px 22px !important;
          mask-size: 22px 22px !important;
  color: #0f172a;
  transition: transform .15s ease !important;
}
body.night-mode .main-header .navbar-wrapper ul > li.js_live-messages > a::before,
body.night-mode .main-header .navbar-wrapper ul > li.js_live-notifications > a::before,
[data-bs-theme="dark"] .main-header .navbar-wrapper ul > li.js_live-messages > a::before,
[data-bs-theme="dark"] .main-header .navbar-wrapper ul > li.js_live-notifications > a::before {
  color: #e6e8eb !important;
}

/* Tap feedback */
.main-header .navbar-wrapper ul > li.js_live-messages > a:active::before,
.main-header .navbar-wrapper ul > li.js_live-notifications > a:active::before {
  transform: scale(.9) !important;
}

/* Bell — SF Symbol "bell.fill" style, soft rounded */
.main-header .navbar-wrapper ul > li.js_live-notifications > a::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 2.25a1.25 1.25 0 0 0-1.25 1.25v.58A7.5 7.5 0 0 0 4.5 11.25v3.46c0 .96-.36 1.88-1 2.59l-.85.92A1.25 1.25 0 0 0 3.57 20.25h16.86a1.25 1.25 0 0 0 .92-2.03l-.85-.92a3.83 3.83 0 0 1-1-2.59v-3.46a7.5 7.5 0 0 0-6.25-7.17v-.58A1.25 1.25 0 0 0 12 2.25Zm-2.25 19.5a2.25 2.25 0 0 0 4.5 0h-4.5Z'/></svg>") !important;
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 2.25a1.25 1.25 0 0 0-1.25 1.25v.58A7.5 7.5 0 0 0 4.5 11.25v3.46c0 .96-.36 1.88-1 2.59l-.85.92A1.25 1.25 0 0 0 3.57 20.25h16.86a1.25 1.25 0 0 0 .92-2.03l-.85-.92a3.83 3.83 0 0 1-1-2.59v-3.46a7.5 7.5 0 0 0-6.25-7.17v-.58A1.25 1.25 0 0 0 12 2.25Zm-2.25 19.5a2.25 2.25 0 0 0 4.5 0h-4.5Z'/></svg>") !important;
}

/* Message bubble — SF Symbol "message.fill" style */
.main-header .navbar-wrapper ul > li.js_live-messages > a::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 2.75c-5.66 0-10 3.86-10 8.75 0 2.66 1.3 5.06 3.4 6.72.13.1.2.26.18.43-.13.93-.55 2.05-1.4 3.16a.5.5 0 0 0 .47.78c2.4-.3 4.18-1.18 5.32-2 .04-.03.1-.04.16-.03A12.7 12.7 0 0 0 12 20.5c5.66 0 10-3.86 10-8.75S17.66 2.75 12 2.75Z'/></svg>") !important;
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 2.75c-5.66 0-10 3.86-10 8.75 0 2.66 1.3 5.06 3.4 6.72.13.1.2.26.18.43-.13.93-.55 2.05-1.4 3.16a.5.5 0 0 0 .47.78c2.4-.3 4.18-1.18 5.32-2 .04-.03.1-.04.16-.03A12.7 12.7 0 0 0 12 20.5c5.66 0 10-3.86 10-8.75S17.66 2.75 12 2.75Z'/></svg>") !important;
}

/* Make sure the button keeps centered content even with ::before glyph */
.main-header .navbar-wrapper ul > li.js_live-messages > a,
.main-header .navbar-wrapper ul > li.js_live-notifications > a {
  position: relative !important;
}

/* =========================================================
   19) GROUP-SWITCHER POLISH (burak)
   - Backdrop covers only area between header and bottom-bar
     so the bottom-bar stays white & tappable
   - Lock background scroll when sheet is open
   ========================================================= */
@media (max-width: 767.98px) {
  /* Backdrop: stop above the bottom-bar so the nav stays bright */
  .group-switcher-backdrop {
    bottom: calc(66px + env(safe-area-inset-bottom) + 18px) !important;
    inset: 0 0 auto 0 !important;
    top: 0 !important;
    height: auto !important;
  }
  /* Background scroll lock while group sheet is open */
  html.group-switcher-locked,
  html.group-switcher-locked body.group-switcher-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
    touch-action: none !important;
  }
  html.group-switcher-locked body.group-switcher-open {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }
  /* Bottom-bar must be above the backdrop so taps land */
  body.group-switcher-open .footer-bottom-bar,
  body.group-switcher-open .main-menu,
  body.group-switcher-open .bottom-bar,
  body.group-switcher-open nav.bottom-bar,
  body.group-switcher-open .mobile-bottom-nav {
    z-index: 1300 !important;
    position: fixed !important;
  }
  /* Whole sheet should be draggable from anywhere, not just the handle */
  .main-header .group-switcher-dropdown {
    touch-action: none !important;
  }
}

/* =========================================================
   20) PRODUCT CARD — robust photo cover (burak)
   Fixes the "multi-photo product post breaks layout" bug.
   Root cause: previous markup used <a class="pcm-cover"> wrapping
   another <a class="js_lightbox"> per photo — nested anchors are
   invalid HTML, the browser auto-splits them, and core.js
   rebuild_photo_grid() then measures width=0 on .pg_3x/.pg_4x
   parents. We changed the wrapper to <div> in the template and
   harden it here.
   ========================================================= */
.product-card-modern .pcm-cover {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: var(--pcm-soft-bg, #f5f5f7);
  border: 1px solid var(--pcm-border, #e6e8ee);
  margin-bottom: 10px;
}
/* clearfix for the float-based photo grid inside */
.product-card-modern .pcm-cover::after {
  content: "";
  display: block;
  clear: both;
}
.product-card-modern .pcm-cover .pg_wrapper {
  width: 100%;
  margin: 0;
}
.product-card-modern .pcm-cover .pg_3x,
.product-card-modern .pcm-cover .pg_4x {
  width: 100%;
  overflow: hidden;
}
/* belt-and-suspenders: ensure pg_2o3 / pg_1o3 always have correct width
   even before core.js rebuild_photo_grid() runs (avoids flash of broken layout) */
.product-card-modern .pcm-cover .pg_2o3 { width: 66.6666% !important; }
.product-card-modern .pcm-cover .pg_1o3 { width: 33.3333% !important; }
.product-card-modern .pcm-cover .pg_2o3_in,
.product-card-modern .pcm-cover .pg_1o3_in {
  background-size: cover !important;
  background-position: center !important;
}
/* JS sets width/height inline — keep them but cap total cover height */
.product-card-modern .pcm-cover {
  max-height: 520px;
}
@media (max-width: 767px) {
  .product-card-modern .pcm-cover {
    max-height: 380px;
  }
}
/* never let images leak outside */
.product-card-modern .pcm-cover img,
.product-card-modern .pcm-cover a,
.product-card-modern .pcm-cover .pg_2o3_in,
.product-card-modern .pcm-cover .pg_1o3_in {
  max-width: 100%;
}

/* =========================================================
   20.1) PRODUCT COVER — re-enable click on photo grid (burak)
   Newsfeed photos have pointer-events:none (we set this earlier
   to prevent accidental nav). For PRODUCTS the user must be able
   to tap photos to open lightbox and swipe through them.
   ========================================================= */
.product-card-modern .pcm-cover .pg_wrapper a,
.product-card-modern .pcm-cover .pg_wrapper a img {
  pointer-events: auto !important;
  cursor: zoom-in !important;
}
.product-card-modern .pcm-cover .pg_wrapper .more {
  pointer-events: none; /* overlay text passes clicks to anchor */
}

/* =========================================================
   21) ADD-MENU (+) — fixed centered bottom sheet on mobile
   Bootstrap popper anchors the menu to the FAB which pushes
   it off-center on narrow screens. Force a true centered
   bottom sheet, defeat popper's inline transform.
   ========================================================= */
@media (max-width: 767.98px) {
  .footer-bottom-bar .footer-bottom-bar-links > .link:nth-child(3) .dropdown-menu.show,
  .footer-bottom-bar .footer-bottom-bar-links > .link:nth-child(3) .dropdown-menu[data-popper-placement] {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 86px) !important;
    /* Cancel popper translate, keep our own centering */
    transform: translateX(-50%) !important;
    inset: auto !important;
    margin: 0 !important;
    width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    max-width: 420px !important;
    max-height: calc(100vh - 160px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    z-index: 1190 !important;
  }
  /* Stable 2-column grid on phones — 3 cols squeezed tiles when "Paylaş" full row exists */
  .footer-bottom-bar .footer-quick-adds {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .footer-bottom-bar .footer-quick-adds .add-quick-item {
    min-height: 78px !important;
    padding: 12px 8px !important;
  }
  /* Animation must not fight the centered transform */
  .footer-bottom-bar .footer-bottom-bar-links > .link:nth-child(3) .dropdown-menu.show {
    animation: birlixAddSheetPop .22s cubic-bezier(.22,.61,.36,1) !important;
  }
  @keyframes birlixAddSheetPop {
    from { opacity: 0; transform: translateX(-50%) translateY(12px) scale(.97); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0)    scale(1);  }
  }
  /* Backdrop dim behind the sheet — pure CSS, no JS needed */
  .footer-bottom-bar .footer-bottom-bar-links > .link:nth-child(3) .dropdown-menu.show::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .28);
    z-index: -1;
    pointer-events: none;
    animation: birlixAddSheetFade .22s ease-out;
  }
  @keyframes birlixAddSheetFade { from { opacity: 0; } to { opacity: 1; } }
}

/* =========================================================
   22) POST ACTIONS — single-row fit on phones
   Beğen / Yorumla / Paylaş / Puanla must stay on ONE row.
   ========================================================= */
@media (max-width: 767.98px) {
  .post .post-actions {
    flex-wrap: nowrap !important;
    gap: 2px !important;
    padding: 4px 4px 0 !important;
    overflow: hidden !important;
  }
  .post .post-actions .action-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 7px 4px !important;
    font-size: 11.5px !important;
    gap: 4px !important;
    white-space: nowrap !important;
  }
  .post .post-actions .action-btn .action-icon,
  .post .post-actions .action-btn svg,
  .post .post-actions .action-btn i.fa {
    width: 16px !important;
    height: 16px !important;
    font-size: 15px !important;
    flex: 0 0 auto !important;
  }
  .post .post-actions .action-btn .d-none.d-xl-inline-block,
  .post .post-actions .action-btn .reaction-btn-name {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
  }
}
@media (max-width: 380px) {
  .post .post-actions .action-btn {
    padding: 7px 2px !important;
    font-size: 11px !important;
  }
  .post .post-actions .action-btn .d-none.d-xl-inline-block,
  .post .post-actions .action-btn .reaction-btn-name {
    font-size: 11px !important;
  }
}

/* =========================================================
   23) ADD-MENU FIX — bar parent has `transform`, so `fixed`
   children anchor to the bar, not the viewport. Switch to
   absolute centered on the bar (the bar is full-width so the
   menu still ends up viewport-centered).
   Overrides §21 + §11.4.
   ========================================================= */
.footer-bottom-bar .footer-bottom-bar-links > .link:nth-child(3) .dropdown-menu,
.footer-bottom-bar .footer-bottom-bar-links > .link:nth-child(3) .dropdown-menu.show,
.footer-bottom-bar .footer-bottom-bar-links > .link:nth-child(3) .dropdown-menu[data-popper-placement] {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: calc(100% + 12px) !important;
  /* Bar is full-width (left:0; right:0) so 50% of bar == 50% of viewport */
  transform: translateX(-50%) !important;
  margin: 0 !important;
  width: min(calc(100vw - 24px), 420px) !important;
  min-width: 0 !important;
  max-width: calc(100vw - 24px) !important;
  max-height: calc(100vh - 140px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}
/* Defeat the earlier pop animation (it overrode our transform) */
.footer-bottom-bar .footer-bottom-bar-links > .link:nth-child(3) .dropdown-menu.show {
  animation: none !important;
  opacity: 1 !important;
}
/* Backdrop dim — pure CSS via a stacked pseudo on the bar's link */
.footer-bottom-bar .footer-bottom-bar-links > .link:nth-child(3) .dropdown-menu.show::before {
  /* keep the existing drag-handle pseudo (set elsewhere) — don't redefine */
}

/* =========================================================
   24) GROUP / PROFILE HEADER — mobile polish
   - Cover & avatar action buttons: full-opacity, 40x40 tap target,
     no hover dependency (mobile has no hover).
   - Avatar guaranteed horizontally centered on mobile.
   - Compact spacing between avatar and "Katıldın" buttons row.
   ========================================================= */
@media (max-width: 991.98px) {
  /* Avatar — force center (defeat stale hover-stuck transforms) */
  .profile-header .profile-avatar-wrapper {
    left: 50% !important;
    transform: translate(-50%, 0) !important;
  }
  .profile-header .profile-avatar-wrapper:hover,
  .profile-header .profile-avatar-wrapper:focus,
  .profile-header .profile-avatar-wrapper:active {
    transform: translate(-50%, 0) !important;
  }

  /* Cover action buttons — readable + tappable on mobile */
  .profile-cover-buttons {
    opacity: 1 !important;
    top: 8px !important;
    left: 8px !important;
    display: flex !important;
    gap: 6px !important;
  }
  /* Only the always-visible buttons (change + delete + position icon).
     The crop confirm/cancel buttons stay hidden unless repositioning. */
  .profile-cover-buttons > div.profile-cover-change,
  .profile-cover-buttons > div.profile-cover-position,
  .profile-cover-buttons > div.profile-cover-delete {
    float: none !important;
    margin: 0 !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, .45) !important;
    color: #fff !important;
    border-radius: 50% !important;
    font-size: 14px !important;
    backdrop-filter: blur(8px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(140%) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25) !important;
  }
  /* Position buttons (check/cancel) are toggled by JS — don't force-hide */
  .profile-cover-buttons > div.profile-cover-position-buttons {
    /* default display:none comes from legacy style.css; JS .show() will override */
    padding: 0 !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
  }
  .profile-cover-buttons > div > i {
    pointer-events: none !important;  /* outer div catches the tap */
  }
  .profile-cover-buttons > div:active {
    background: rgba(0, 0, 0, .65) !important;
    transform: scale(.94) !important;
  }

  /* Avatar action button — same treatment */
  .profile-avatar-change,
  .profile-avatar-crop,
  .profile-avatar-delete {
    opacity: 1 !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, .55) !important;
    color: #fff !important;
    border-radius: 50% !important;
    font-size: 13px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25) !important;
  }
  .profile-avatar-change > i,
  .profile-avatar-crop > i,
  .profile-avatar-delete > i {
    pointer-events: none !important;
  }
  .profile-avatar-change:active,
  .profile-avatar-crop:active,
  .profile-avatar-delete:active {
    background: rgba(0, 0, 0, .75) !important;
    transform: scale(.94) !important;
  }

  /* The <i class="fa fa-camera" data-bs-toggle="dropdown"> inside is the
     actual click target. Expand its hit area to fill the parent. */
  .profile-cover-change > i.fa-camera,
  .profile-avatar-change > i.fa-camera {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    pointer-events: auto !important;
  }
  .profile-cover-change,
  .profile-avatar-change {
    position: relative !important;
  }

  /* Dropdown menus from cover/avatar — keep within viewport */
  .profile-cover-change .dropdown-menu,
  .profile-avatar-change .dropdown-menu {
    z-index: 1060 !important;
    min-width: 200px !important;
  }

  /* --- Compact header spacing on mobile --- */
  .profile-header { margin-bottom: 6px !important; }
  .profile-name-wrapper {
    padding-top: 26px !important;
    padding-bottom: 2px !important;
  }
  .bx-profile-stats {
    margin-top: 8px !important;
    padding: 6px 4px !important;
  }
  .profile-buttons-wrapper {
    padding-top: 4px !important;
    padding-bottom: 6px !important;
    margin-top: 4px !important;
  }
}

/* =========================================================
   25) GROUP / PROFILE AVATAR — squircle (rounded square) instead of circle
   + camera button anchored bottom-right inside the avatar.
   ========================================================= */
.profile-avatar-wrapper {
  border-radius: 18px !important;
  padding: 3px !important;
  background: #fff !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.18) !important;
}
.profile-avatar-wrapper img {
  border-radius: 14px !important;
  object-fit: cover !important;
}
body.night-mode .profile-avatar-wrapper { background: #2b2d33 !important; }

/* Avatar change/crop/delete — bottom-right INSIDE avatar */
.profile-avatar-change {
  position: absolute !important;
  right: 6px !important;
  bottom: 6px !important;
  top: auto !important;
  left: auto !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0, 0, 0, .55) !important;
  color: #fff !important;
  border-radius: 50% !important;
  font-size: 12px !important;
  opacity: 1 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25) !important;
  z-index: 3 !important;
}
.profile-avatar-change > i.fa-camera {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.profile-avatar-crop,
.profile-avatar-delete {
  display: none !important; /* keep hidden; only show in editing mode if Sngine toggles */
}

@media (max-width: 991.98px) {
  .profile-avatar-wrapper { border-radius: 16px !important; padding: 3px !important; }
  .profile-avatar-wrapper img { border-radius: 12px !important; }
  /* Avatar shape is square — defeat the round transforms used for circle */
  .profile-header .profile-avatar-wrapper {
    transform: translate(-50%, 0) !important;
  }
}

/* =========================================================
   25.1) AVATAR squircle — stronger override to beat style.css
   + group.tpl inline rules. Apply at every nesting level.
   ========================================================= */
.profile-header .profile-avatar-wrapper,
.profile-header .profile-avatar-wrapper.static,
.profile-header .profile-avatar-wrapper:hover,
.profile-header .profile-avatar-wrapper:focus,
.profile-header .profile-avatar-wrapper:active,
.profile-avatar-wrapper,
.profile-avatar-wrapper.static {
  border-radius: 18px !important;
}
.profile-header .profile-avatar-wrapper img,
.profile-header .profile-avatar-wrapper > img,
.profile-header .profile-avatar-wrapper img.js_lightbox,
.profile-header .profile-avatar-wrapper img.js_lightbox-nodata,
.profile-avatar-wrapper img,
.profile-avatar-wrapper > img {
  border-radius: 14px !important;
  object-fit: cover !important;
}
/* Online dot etc. — re-square them */
.profile-avatar-wrapper .online-dot,
.profile-avatar-wrapper .js_online-indicator {
  border-radius: 50% !important;   /* dot stays round */
}

/* =========================================================
   25.2) COVER CHANGE DROPDOWN — escape overflow:hidden clip
   group.tpl inline style sets .profile-cover-wrapper{overflow:hidden}
   which crops both the image AND the dropdown. Lift the menu when open.
   ========================================================= */
.profile-header .profile-cover-wrapper:has(.profile-cover-buttons .dropdown-menu.show) {
  overflow: visible !important;
}
.profile-cover-buttons {
  z-index: 5 !important;
}
.profile-cover-buttons .dropdown-menu {
  z-index: 1080 !important;
  min-width: 220px !important;
  border-radius: 12px !important;
  padding: 6px !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .18) !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  background: #fff !important;
}
body.night-mode .profile-cover-buttons .dropdown-menu {
  background: #2b2d33 !important;
  border-color: rgba(255,255,255,.08) !important;
}
.profile-cover-buttons .dropdown-menu .dropdown-item {
  border-radius: 8px !important;
  padding: 8px 10px !important;
}

/* Fallback for browsers without :has() — also lift dropdown using portal pattern */
.profile-cover-buttons .dropdown-menu.show {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  margin-top: 6px !important;
}

/* =========================================================
   25.3) COVER WRAPPER — drop overflow:hidden, clip image instead
   This guarantees dropdowns can escape on ALL browsers
   (not just :has()-capable ones).
   ========================================================= */
.profile-header .profile-cover-wrapper {
  overflow: visible !important;
  border-radius: 14px 14px 0 0 !important;
}
.profile-header .profile-cover-wrapper > img.js_position-cover-cropped {
  border-radius: 14px 14px 0 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
/* The "full" variant is a hidden source used for repositioning. Keep hidden. */
.profile-header .profile-cover-wrapper > img.js_position-cover-full.x-hidden {
  display: none !important;
}
/* Gradient scrim must also round its corners */
.profile-header .profile-cover-wrapper::after {
  border-radius: 0 0 0 0 !important;
}

/* =========================================================
   25.4) COVER BUTTONS — remove residual rounded black "halo"
   The old .profile-cover-buttons > div from style.css has its own
   background; the inner <i.fa-camera> with data-bs-toggle="dropdown"
   also gets dropdown-toggle pseudo styling. Flatten everything.
   ========================================================= */
.profile-cover-buttons,
.profile-cover-buttons * {
  background-color: transparent;
}
.profile-cover-buttons > div.profile-cover-change,
.profile-cover-buttons > div.profile-cover-position,
.profile-cover-buttons > div.profile-cover-delete {
  background: rgba(0, 0, 0, .55) !important;
  border: 0 !important;
  outline: 0 !important;
}
/* The inner <i> with data-bs-toggle gets Bootstrap focus styling.
   Strip background/outline/halo. */
.profile-cover-buttons i.fa,
.profile-cover-buttons i.fa-camera,
.profile-cover-buttons i.fa-crop-alt,
.profile-cover-buttons i.fa-trash {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: #fff !important;
}
.profile-cover-buttons .show > i.fa,
.profile-cover-buttons i.fa:focus,
.profile-cover-buttons i.fa:active {
  background: transparent !important;
  box-shadow: none !important;
}

/* =========================================================
   26) PUBLISHER — iOS/Android friendly 4-column action grid
   Sngine renders publisher-tools-tab items as col-md-6 (2 per row)
   with pill shapes. On phones this looks oversized and inconsistent.
   Convert to a tight tile grid: 4 columns on phones, 3 on very small
   screens, with icon-on-top labels — like iOS Share Sheet apps row.
   ========================================================= */
.publisher .publisher-tools-tabs {
  margin-top: 10px !important;
  padding: 4px !important;
  background: rgba(99, 102, 241, .04);
  border-radius: 16px !important;
  border: 1px solid rgba(15, 23, 42, .06);
}
body.night-mode .publisher .publisher-tools-tabs {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
}
.publisher .publisher-tools-tabs > ul,
.publisher .publisher-tools-tabs > ul.row {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.publisher .publisher-tools-tabs > ul > li,
.publisher .publisher-tools-tabs > ul.row > li {
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}
.publisher .publisher-tools-tab {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  min-height: 78px !important;
  padding: 10px 4px !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  color: var(--g2026-text, #0f172a) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-align: center !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  border: 1px solid rgba(15, 23, 42, .06) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important;
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease !important;
  word-break: break-word !important;
}
body.night-mode .publisher .publisher-tools-tab {
  background: rgba(255,255,255,.05) !important;
  color: #f0f0f0 !important;
  border-color: rgba(255,255,255,.08) !important;
}
.publisher .publisher-tools-tab:hover,
.publisher .publisher-tools-tab:active {
  background: rgba(99, 102, 241, .08) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(15, 23, 42, .08) !important;
  text-decoration: none !important;
}
.publisher .publisher-tools-tab:active {
  transform: scale(.97) !important;
}
.publisher .publisher-tools-tab .main-icon,
.publisher .publisher-tools-tab svg {
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  color: var(--g2026-accent, #6366f1) !important;
}
.publisher .publisher-tools-tab > span,
.publisher .publisher-tools-tab > span.js_x-uploader {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.publisher .publisher-tools-tab .badge {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  font-size: 9px !important;
  padding: 2px 5px !important;
}
.publisher .publisher-tools-tab .spinner-grow {
  display: none !important;
}

/* Tighter spacing for the composer (textarea) and emoji button */
.publisher .x-form-textarea,
.publisher textarea.js_publisher-box-content {
  border-radius: 14px !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  padding: 12px 44px 12px 14px !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  min-height: 70px !important;
  resize: none !important;
}
body.night-mode .publisher textarea.js_publisher-box-content {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.08) !important;
  color: #f0f0f0 !important;
}

/* Footer options (Adult, Anonymous, etc.) — cleaner card */
.publisher .publisher-footer-options .form-table-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  margin: 8px 0 0 !important;
  background: #fff !important;
  border-radius: 14px !important;
  border: 1px solid rgba(15, 23, 42, .06) !important;
}
body.night-mode .publisher .publisher-footer-options .form-table-row {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.08) !important;
}
.publisher .publisher-footer-options .form-table-row .avatar {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 10px !important;
  background: rgba(99, 102, 241, .12) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}
.publisher .publisher-footer-options .form-table-row .avatar svg {
  width: 20px !important;
  height: 20px !important;
  color: var(--g2026-accent, #6366f1) !important;
}
.publisher .publisher-footer-options .form-table-row > div:nth-child(2) {
  flex: 1 !important;
  min-width: 0 !important;
}
.publisher .publisher-footer-options .form-table-row .form-label {
  font-size: 14px !important;
  font-weight: 600 !important;
  margin: 0 !important;
}
.publisher .publisher-footer-options .form-table-row .form-text {
  font-size: 12px !important;
  color: var(--g2026-text-2, #64748b) !important;
  margin: 2px 0 0 !important;
}
.publisher .publisher-footer-options .form-table-row .text-end {
  margin-left: auto !important;
}

/* Mobile-only: 3 cols on tiny screens for legibility */
@media (max-width: 360px) {
  .publisher .publisher-tools-tabs > ul,
  .publisher .publisher-tools-tabs > ul.row {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .publisher .publisher-tools-tab {
    min-height: 72px !important;
    font-size: 10.5px !important;
  }
}
/* Desktop ≥768px: 6 cols (wide screens), 4 cols on tablets */
@media (min-width: 768px) {
  .publisher .publisher-tools-tabs > ul,
  .publisher .publisher-tools-tabs > ul.row {
    grid-template-columns: repeat(6, 1fr) !important;
  }
  .publisher .publisher-tools-tab {
    font-size: 12px !important;
    min-height: 88px !important;
  }
}
@media (min-width: 992px) {
  .publisher .publisher-tools-tabs > ul,
  .publisher .publisher-tools-tabs > ul.row {
    grid-template-columns: repeat(8, 1fr) !important;
  }
}

/* =========================================================
   25.5) PERSONAL PROFILE — squircle avatar (defeat circle)
   profile.tpl also uses .profile-avatar-wrapper but without
   the .profile-header parent's inline `<style>` block. Apply
   directly to the wrapper, not nested under .profile-header.
   ========================================================= */
body .profile-avatar-wrapper,
body .profile-avatar-wrapper.static,
body .profile-avatar-wrapper:hover,
body .profile-avatar-wrapper:focus,
body .profile-avatar-wrapper:active {
  border-radius: 18px !important;
  padding: 3px !important;
  background: #fff !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.18) !important;
}
body .profile-avatar-wrapper > img,
body .profile-avatar-wrapper img.js_lightbox,
body .profile-avatar-wrapper img.js_lightbox-nodata {
  border-radius: 14px !important;
  object-fit: cover !important;
}
body.night-mode .profile-avatar-wrapper { background: #2b2d33 !important; }

/* =========================================================
   25.6) COVER — keep camera + reposition (drag); hide delete.
   Reposition (.profile-cover-position) opens drag mode, then the
   inline Save (✓) / Cancel (✕) buttons appear.
   ========================================================= */
.profile-cover-buttons > .profile-cover-delete {
  display: none !important;
}
/* Kill the leftover round dark background on the parent <div>s
   from style.css `.profile-cover-buttons > div { background: rgba(0,0,0,.1); padding: 4px 8px; border-radius: 50% }`.
   Apply at ALL viewports (the previous fix was inside @media max 991.98). */
.profile-cover-buttons > div {
  background: transparent !important;
  padding: 0 !important;
  margin-right: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.profile-cover-buttons > div.profile-cover-change {
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0, 0, 0, .55) !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25) !important;
  color: #fff !important;
}
.profile-cover-buttons > div.profile-cover-change:active {
  background: rgba(0, 0, 0, .75) !important;
  transform: scale(.94) !important;
}
.profile-cover-buttons > div.profile-cover-change > i.fa-camera {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  color: #fff !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* =========================================================
   26) FINAL FIXES (May 2026)
   - Hide cover crop & delete icons (keep only camera/edit)
   - Remove duplicate description text under dropdown menu items
     (Turkish translation collapses title + description into the
      same phrase, so the action-desc looks like a duplicate.)
   - Make group avatar image fully fill its rounded square
   - Make the cover-change dropdown menu always render ABOVE
     the avatar (sibling z-index stacking-context fix).
   ========================================================= */

/* 26.1 — Cover edit buttons: keep camera + reposition; hide delete.
   .profile-cover-position-buttons (Save/Cancel) are toggled by JS
   via inline style=display:block; don't override them here. */
.profile-cover-buttons > .profile-cover-delete {
  display: none !important;
}

/* 26.2 — Hide redundant secondary description in cover/avatar
          edit dropdown items. The title alone is enough. */
.profile-cover-change .action-dropdown-menu .dropdown-item .action-desc,
.profile-avatar-change .action-dropdown-menu .dropdown-item .action-desc {
  display: none !important;
}
.profile-cover-change .action-dropdown-menu .dropdown-item,
.profile-avatar-change .action-dropdown-menu .dropdown-item {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
.profile-cover-change .action-dropdown-menu .dropdown-item .action,
.profile-avatar-change .action-dropdown-menu .dropdown-item .action {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--g2026-text, #0f172a) !important;
}
body.night-mode .profile-cover-change .action-dropdown-menu .dropdown-item .action,
body.night-mode .profile-avatar-change .action-dropdown-menu .dropdown-item .action {
  color: #f0f0f0 !important;
}

/* 26.3 — Avatar fully fills its rounded-square frame.
          Drop the inner white padding ring so the image touches
          the frame edges (kills the small-icon-with-whitespace look). */
body .profile-header .profile-avatar-wrapper,
body .profile-avatar-wrapper {
  padding: 0 !important;
  overflow: hidden !important;
}
body .profile-header .profile-avatar-wrapper > img,
body .profile-header .profile-avatar-wrapper img.js_lightbox,
body .profile-header .profile-avatar-wrapper img.js_lightbox-nodata,
body .profile-avatar-wrapper > img,
body .profile-avatar-wrapper img.js_lightbox,
body .profile-avatar-wrapper img.js_lightbox-nodata {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: inherit !important;
  display: block !important;
  background: transparent !important;
}

/* 26.4 — Cover-change dropdown must render above the avatar.
          Root cause: .profile-avatar-wrapper is a sibling of
          .profile-cover-wrapper and has z-index:4, creating a
          stacking context. The dropdown lives inside cover-wrapper
          which had no z-index, so it was bound below the avatar
          regardless of its own z-index.
          Fix: promote the cover-wrapper to a stacking context with
          a HIGHER z-index than the avatar, but only while the
          dropdown is open (so the avatar stays on top normally). */
.profile-header .profile-cover-wrapper {
  position: relative !important;
  z-index: 1 !important;
}
.profile-header .profile-cover-wrapper:has(.dropdown-menu.show),
.profile-header .profile-cover-wrapper:has(.profile-cover-change.show) {
  z-index: 20 !important;
  overflow: visible !important;
}
/* Fallback for browsers without :has() — class hook applied via JS-free
   approach: when Bootstrap toggles .show on the dropdown, the parent
   .profile-cover-change also receives .show. Use sibling-aware selector. */
.profile-header .profile-cover-buttons {
  z-index: 6 !important;
}
.profile-header .profile-cover-buttons .profile-cover-change.show ~ *,
.profile-header .profile-cover-buttons .profile-cover-change.show {
  z-index: 30 !important;
}
.profile-header .profile-cover-buttons .dropdown-menu.show {
  z-index: 1090 !important;
}

/* =========================================================
   27) PUBLISHER — message row layout fix (May 2026)
   Symptoms: avatar tiny dot overlapping textarea, text cut off,
   stray empty circles, emoji icon misplaced, attachments
   preview unstyled, broken vertical rhythm.
   Goal: clean, modern composer:
     [ avatar 40 ] [ textarea grows ] [ emoji 28 ]
   ========================================================= */

/* Container card — consistent rounded surface */
.publisher,
#publisher-box.publisher {
  background: var(--g2026-surface, #fff) !important;
  border: 1px solid var(--g2026-border, rgba(15,23,42,.08)) !important;
  border-radius: var(--g2026-radius-lg, 16px) !important;
  box-shadow: var(--g2026-shadow-sm, 0 1px 2px rgba(15,23,42,.06)) !important;
  padding: 12px 14px !important;
  margin: 0 0 14px !important;
  overflow: visible !important;
}
body.night-mode .publisher,
body.night-mode #publisher-box.publisher {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.08) !important;
}

/* Message row — flex avatar | textarea | emoji */
.publisher .publisher-message {
  position: relative !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 4px 0 6px !important;
  margin: 0 !important;
}
.publisher .publisher-message.no-avatar {
  padding-left: 0 !important;
}

/* Avatar — fixed 40, perfectly round, no clipping */
.publisher .publisher-message > img.publisher-avatar,
.publisher .publisher-message .publisher-avatar {
  position: static !important;
  flex: 0 0 40px !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  object-fit: cover !important;
  background: #fff !important;
  display: block !important;
  margin: 2px 0 0 !important;
}
body.night-mode .publisher .publisher-message .publisher-avatar {
  border-color: rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.06) !important;
}

/* Textarea wrapper — fills remaining space */
.publisher .publisher-message > .colored-text-wrapper {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  position: relative !important;
  background: var(--g2026-surface-2, #f6f7fb) !important;
  border: 1px solid var(--g2026-border, rgba(15,23,42,.08)) !important;
  border-radius: 22px !important;
  padding: 8px 44px 8px 14px !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
}
body.night-mode .publisher .publisher-message > .colored-text-wrapper {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.08) !important;
}
.publisher .publisher-message > .colored-text-wrapper > textarea,
.publisher .publisher-message textarea.js_publisher-scraper {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  resize: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  min-height: 22px !important;
  color: var(--g2026-text, #0f172a) !important;
}
body.night-mode .publisher .publisher-message > .colored-text-wrapper > textarea {
  color: #f0f0f0 !important;
}

/* Emoji button — inside the textarea bubble, right side */
.publisher .publisher-message .publisher-emojis {
  display: flex !important;
  position: absolute !important;
  top: 50% !important;
  right: 8px !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: rgba(99,102,241,.08) !important;
  color: var(--g2026-accent, #6366f1) !important;
  cursor: pointer !important;
  z-index: 2 !important;
}
.publisher .publisher-message .publisher-emojis .position-relative {
  display: inline-flex !important;
  width: 100% !important;
  height: 100% !important;
  align-items: center !important;
  justify-content: center !important;
}
.publisher .publisher-message .publisher-emojis i.fa-smile-wink,
.publisher .publisher-message .publisher-emojis i.far {
  font-size: 16px !important;
  color: var(--g2026-accent, #6366f1) !important;
  line-height: 1 !important;
}
.publisher .publisher-message .publisher-emojis:hover {
  background: rgba(99,102,241,.16) !important;
}
/* Move emoji button OUT of the textarea row to a column for very tight widths */
@media (max-width: 360px) {
  .publisher .publisher-message > .colored-text-wrapper { padding-right: 38px !important; }
  .publisher .publisher-message .publisher-emojis { right: 6px !important; width: 26px !important; height: 26px !important; }
}

/* Colored / sticker mode keeps centered text */
.publisher .publisher-message.colored {
  display: block !important;
}
.publisher .publisher-message.colored > .colored-text-wrapper {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* Publisher-slider container — tighten paddings */
.publisher .publisher-slider {
  padding: 0 !important;
  margin: 6px 0 0 !important;
}

/* Attachments preview (uploaded photo) — clean rounded thumbnail row */
.publisher .publisher-attachments {
  margin: 8px 0 0 !important;
  padding: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: transparent !important;
}
.publisher .publisher-attachments .x-image,
.publisher .publisher-attachments img {
  border-radius: 12px !important;
  max-width: 100% !important;
  object-fit: cover !important;
}

/* Custom thumbnail (reel/video) — visible only when its meta is active.
   When not active, Sngine leaves them in DOM with no .show class.
   Hide stray .x-image placeholders that look like empty circles. */
.publisher .publisher-custom-thumbnail {
  display: none !important;
}
.publisher .publisher-meta[data-meta="video"] ~ .publisher-video-custom-thumbnail.show,
.publisher .publisher-meta[data-meta="reel"]  ~ .publisher-reel-custom-thumbnail.show,
.publisher .publisher-custom-thumbnail.show {
  display: block !important;
}

/* Subscription preview image — only when its toggle is on */
.publisher #subscriptions-image-wrapper:not(.x-hidden) .x-image {
  display: block !important;
}

/* Empty .x-image placeholders (no uploaded src) — neutral square, not a circle */
.publisher .x-image {
  border-radius: 12px !important;
}

/* Footer options — keep cards tidy & avoid empty avatar bubble */
.publisher .publisher-footer-options {
  margin-top: 8px !important;
}
.publisher .publisher-footer-options .form-table-row.x-hidden,
.publisher .publisher-footer-options .form-group.x-hidden {
  display: none !important;
}
/* Avatar inside footer rows — colored square icon container */
.publisher .publisher-footer-options .form-table-row .avatar {
  flex: 0 0 36px !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 10px !important;
  background: rgba(99,102,241,.12) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 0 !important;
  margin: 0 !important;
}
.publisher .publisher-footer-options .form-table-row .avatar svg,
.publisher .publisher-footer-options .form-table-row .avatar .main-icon,
.publisher .publisher-footer-options .form-table-row .avatar i {
  width: 20px !important;
  height: 20px !important;
  color: var(--g2026-accent, #6366f1) !important;
}
/* Empty spacer avatars used by paid-lock-toggle (a transparent 20x20 box).
   These should not render at all when inside a hidden parent. */
.publisher .publisher-footer-options .form-table-row.x-hidden .avatar > div { display: none !important; }

/* Publisher overlay / loader — never block layout */
.publisher .publisher-overlay { pointer-events: none !important; }
.publisher .publisher-loader {
  position: absolute !important;
  top: 8px !important;
  right: 10px !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border: 0 !important;
}
.publisher .publisher-loader .loader,
.publisher .publisher-loader .loader_small {
  width: 18px !important;
  height: 18px !important;
}

/* Tighten publisher-tools-tabs gap above (already styled in section 26) */
.publisher .publisher-tools-tabs { margin-top: 8px !important; }

/* =========================================================
   28) COVER BUTTONS — FINAL hide for crop/delete & polish
   Earlier @media rules used `div.profile-cover-position` (higher
   specificity than my prior rules) and reasserted display:inline-flex.
   Override with the same compound selector so we win.
   Also re-style the remaining camera button as a clean frosted pill
   instead of the dark heavy circle.
   ========================================================= */

/* Hide reposition + delete on ALL viewports, including mobile. */
.profile-header .profile-cover-buttons > div.profile-cover-position,
.profile-header .profile-cover-buttons > div.profile-cover-position-buttons,
.profile-header .profile-cover-buttons > div.profile-cover-delete,
.profile-cover-buttons > div.profile-cover-position,
.profile-cover-buttons > div.profile-cover-position-buttons,
.profile-cover-buttons > div.profile-cover-delete {
  display: none !important;
}

/* Camera (cover change) button — clean frosted white pill */
.profile-header .profile-cover-buttons > div.profile-cover-change,
.profile-cover-buttons > div.profile-cover-change {
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, .82) !important;
  border: 1px solid rgba(255, 255, 255, .65) !important;
  border-radius: 12px !important;
  color: #0f172a !important;
  -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
  backdrop-filter: blur(12px) saturate(160%) !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .18) !important;
  transition: background .15s ease, transform .12s ease !important;
}
.profile-header .profile-cover-buttons > div.profile-cover-change:hover,
.profile-cover-buttons > div.profile-cover-change:hover {
  background: rgba(255, 255, 255, .95) !important;
}
.profile-header .profile-cover-buttons > div.profile-cover-change:active,
.profile-cover-buttons > div.profile-cover-change:active {
  transform: scale(.94) !important;
  background: rgba(255, 255, 255, 1) !important;
}
.profile-header .profile-cover-buttons > div.profile-cover-change > i.fa-camera,
.profile-cover-buttons > div.profile-cover-change > i.fa-camera {
  color: #0f172a !important;
  font-size: 14px !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
body.night-mode .profile-cover-buttons > div.profile-cover-change {
  background: rgba(30, 32, 38, .78) !important;
  border-color: rgba(255, 255, 255, .12) !important;
  color: #f0f0f0 !important;
}
body.night-mode .profile-cover-buttons > div.profile-cover-change > i.fa-camera {
  color: #f0f0f0 !important;
}

/* =========================================================
   29) PUBLISHER — alignment fix + square avatar (May 2026)
   Symptoms (from screenshot):
   - Textarea bubble overflowing the card to the right.
   - Avatar misaligned with bubble top.
   - User wants avatar as rounded SQUARE (squircle), not circle.
   ========================================================= */

/* Constrain the publisher card to its column box and clip cleanly */
.publisher,
#publisher-box.publisher {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;            /* clip any stray child overflow */
  padding: 12px !important;
}

/* Message row — ensure children honor the box width */
.publisher .publisher-message {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 !important;
}
.publisher .publisher-message * { box-sizing: border-box !important; }

/* Avatar — SQUIRCLE (rounded square), not circle */
.publisher .publisher-message > img.publisher-avatar,
.publisher .publisher-message .publisher-avatar {
  flex: 0 0 42px !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;          /* squircle */
  object-fit: cover !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid rgba(15,23,42,.08) !important;
}
body.night-mode .publisher .publisher-message .publisher-avatar {
  border-color: rgba(255,255,255,.12) !important;
}

/* Textarea bubble — clamp width, prevent overflow */
.publisher .publisher-message > .colored-text-wrapper {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: auto !important;
  background: var(--g2026-surface-2, #f6f7fb) !important;
  border: 1px solid var(--g2026-border, rgba(15,23,42,.08)) !important;
  border-radius: 14px !important;          /* match squircle avatar */
  padding: 8px 44px 8px 14px !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;             /* no horizontal overflow */
}
.publisher .publisher-message > .colored-text-wrapper > textarea,
.publisher .publisher-message textarea.js_publisher-scraper,
.publisher .publisher-message textarea {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  resize: none !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  min-height: 22px !important;
  display: block !important;
}

/* Emoji button stays anchored inside the bubble */
.publisher .publisher-message .publisher-emojis {
  right: 6px !important;
  width: 30px !important;
  height: 30px !important;
}

/* Mobile tuning */
@media (max-width: 575.98px) {
  .publisher,
  #publisher-box.publisher { padding: 10px !important; }
  .publisher .publisher-message > .colored-text-wrapper {
    padding: 8px 40px 8px 12px !important;
    border-radius: 12px !important;
    min-height: 42px !important;
  }
  .publisher .publisher-message > img.publisher-avatar,
  .publisher .publisher-message .publisher-avatar {
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
  }
  .publisher .publisher-message .publisher-emojis {
    width: 28px !important;
    height: 28px !important;
    right: 5px !important;
  }
}

/* =========================================================
   30) PUBLISHER — perfect 3-column flex (May 2026)
   Earlier sections kept emoji as absolute; it visually leaked
   past the bubble's rounded right corner. Old style.css also
   keeps `.publisher-avatar { position:absolute }` which makes
   the avatar overlap the bubble.
   Final layout: [avatar 42] gap [bubble flex:1] gap [emoji 36]
   ========================================================= */

.publisher .publisher-message,
#publisher-box .publisher-message {
  position: relative !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Avatar — squircle, STATIC (defeat old absolute) */
.publisher .publisher-message > img.publisher-avatar,
.publisher .publisher-message > .publisher-avatar,
#publisher-box .publisher-message .publisher-avatar {
  position: static !important;
  top: auto !important;
  left: auto !important;
  flex: 0 0 42px !important;
  width: 42px !important;
  height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 12px !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  object-fit: cover !important;
  background: #fff !important;
  display: block !important;
}

/* Bubble — flex item, fully contained */
.publisher .publisher-message > .colored-text-wrapper {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: auto !important;
  margin: 0 !important;
  padding: 9px 14px !important;
  border-radius: 14px !important;
  background: var(--g2026-surface-2, #f6f7fb) !important;
  border: 1px solid var(--g2026-border, rgba(15,23,42,.08)) !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
  position: relative !important;
}
.publisher .publisher-message > .colored-text-wrapper > textarea {
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  resize: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  min-height: 22px !important;
  height: auto !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  display: block !important;
  color: var(--g2026-text, #0f172a) !important;
}
body.night-mode .publisher .publisher-message > .colored-text-wrapper > textarea {
  color: #f0f0f0 !important;
}

/* Emoji — own flex column, NOT absolute */
.publisher .publisher-message > .publisher-emojis,
#publisher-box .publisher-message > .publisher-emojis {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  flex: 0 0 36px !important;
  width: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: rgba(99,102,241,.10) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}
.publisher .publisher-message > .publisher-emojis:hover {
  background: rgba(99,102,241,.18) !important;
}
.publisher .publisher-message > .publisher-emojis > .position-relative {
  display: inline-flex !important;
  width: 100% !important;
  height: 100% !important;
  align-items: center !important;
  justify-content: center !important;
  position: static !important;
}
.publisher .publisher-message > .publisher-emojis i.fa-smile-wink,
.publisher .publisher-message > .publisher-emojis i.far {
  font-size: 16px !important;
  color: var(--g2026-accent, #6366f1) !important;
  line-height: 1 !important;
  margin: 0 !important;
}

/* Mobile fine-tuning */
@media (max-width: 575.98px) {
  .publisher .publisher-message { gap: 8px !important; }
  .publisher .publisher-message > .publisher-avatar {
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
  }
  .publisher .publisher-message > .colored-text-wrapper {
    padding: 8px 12px !important;
    border-radius: 12px !important;
    min-height: 40px !important;
  }
  .publisher .publisher-message > .publisher-emojis {
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
  }
  .publisher .publisher-message > .publisher-emojis i.fa-smile-wink,
  .publisher .publisher-message > .publisher-emojis i.far {
    font-size: 14px !important;
  }
}

/* =========================================================
   31) BOTTOM BAR + USER MENU — square avatar (May 2026)
   - Bottom nav "Menu" tab avatar: circle → squircle.
   - Dropdown's first item (user link) avatar: circle → squircle.
   ========================================================= */

/* Bottom bar menu trigger avatar */
.bottom-bar .user-menu > img,
.bottom-bar a.user-menu > img,
a.user-menu.dropdown-toggle > img,
.user-menu.dropdown-toggle > img {
  border-radius: 10px !important;
  object-fit: cover !important;
}

/* Dropdown menu — user profile row avatar (rounded-circle class) */
.user-menu + .dropdown-menu .dropdown-item img.rounded-circle,
.dropdown-menu.user-menu-mobile-sheet .dropdown-item img.rounded-circle,
.dropdown-menu .dropdown-item img.rounded-circle.mr10 {
  border-radius: 6px !important;
  object-fit: cover !important;
}

/* =========================================================
   32) PUBLISHER — bubble grows with content (May 2026)
   When the user types long text the textarea autosizes (js_autosize)
   but the wrapper had min-height + align-items:center + overflow:hidden,
   so extra lines visually leaked outside the rounded bubble.
   Fix: align top, no fixed height, no overflow clip; let wrapper
   match the textarea's height. Also align the row from the top
   so the avatar/emoji stay near the first line.
   ========================================================= */
.publisher .publisher-message,
#publisher-box .publisher-message {
  align-items: flex-start !important;
}
.publisher .publisher-message > .colored-text-wrapper {
  align-items: flex-start !important;
  min-height: 44px !important;
  height: auto !important;
  overflow: visible !important;
  padding: 10px 14px !important;
}
.publisher .publisher-message > .colored-text-wrapper > textarea,
.publisher .publisher-message textarea.js_publisher-scraper,
.publisher .publisher-message textarea {
  height: auto !important;
  min-height: 24px !important;
  max-height: 50vh !important;
  overflow-y: auto !important;
  display: block !important;
}
/* Keep avatar & emoji vertically anchored to the first line */
.publisher .publisher-message > .publisher-avatar,
.publisher .publisher-message > img.publisher-avatar {
  margin-top: 1px !important;
}
.publisher .publisher-message > .publisher-emojis {
  margin-top: 3px !important;
  align-self: flex-start !important;
}

/* =========================================================
   33) AVATAR UPDATE DROPDOWN — escape clipping (May 2026)
   Section 26.3 set `.profile-avatar-wrapper { overflow:hidden }`
   so the image fills the squircle, but that ALSO clips the
   "Upload Photo / Select Photo" dropdown opened from the camera
   button inside the avatar.
   Fix: keep the image clipped via its own border-radius + object-fit,
   drop overflow:hidden on the wrapper, and lift the dropdown above
   sibling stacking contexts.
   ========================================================= */

/* Wrapper no longer clips — dropdown can escape */
body .profile-header .profile-avatar-wrapper,
body .profile-avatar-wrapper {
  overflow: visible !important;
}
/* The image keeps the rounded-square clip on its own */
body .profile-header .profile-avatar-wrapper > img,
body .profile-avatar-wrapper > img,
body .profile-avatar-wrapper img.js_lightbox,
body .profile-avatar-wrapper img.js_lightbox-nodata {
  border-radius: inherit !important;
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* Camera trigger must allow its dropdown to escape too */
.profile-avatar-change {
  overflow: visible !important;
}
/* Lift dropdown menus opened from the avatar above everything else */
.profile-avatar-change .dropdown-menu,
.profile-avatar-change .action-dropdown-menu,
.profile-avatar-wrapper .dropdown-menu {
  z-index: 1100 !important;
  position: absolute !important;
  /* Default Bootstrap places dropdown below the toggle; on a small camera
     button that anchors near the bottom-right of the avatar, push it
     right + below so it doesn't overlap the avatar image */
  inset: auto auto auto auto !important;
  top: 100% !important;
  right: 0 !important;
  left: auto !important;
  margin-top: 8px !important;
  min-width: 220px !important;
  border-radius: 12px !important;
  padding: 6px !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .18) !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  background: #fff !important;
}
body.night-mode .profile-avatar-change .dropdown-menu,
body.night-mode .profile-avatar-wrapper .dropdown-menu {
  background: #2b2d33 !important;
  border-color: rgba(255,255,255,.08) !important;
}

/* While the avatar dropdown is open, the wrapper must rise above siblings
   (e.g. profile-name-wrapper, profile-buttons-wrapper which can sit above
   it depending on flow & z-index). */
.profile-header .profile-avatar-wrapper:has(.dropdown-menu.show),
.profile-header .profile-avatar-wrapper:has(.profile-avatar-change.show) {
  z-index: 50 !important;
}
.profile-avatar-change.show,
.profile-avatar-change .dropdown-menu.show {
  z-index: 1100 !important;
}

/* =========================================================
   34) PUBLISHER inside group/profile/page main column
   The `.sg-offcanvas-mainbar` scope adds higher specificity to
   legacy `style.css` selectors (e.g. `.sg-offcanvas-mainbar .publisher-avatar`),
   which overrides our base publisher fixes. Re-apply with the
   same scope so the cascade is correct.
   ========================================================= */

.sg-offcanvas-mainbar .publisher,
.sg-offcanvas-mainbar #publisher-box.publisher {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 12px !important;
  margin: 0 0 14px !important;
  overflow: hidden !important;
  border-radius: var(--g2026-radius-lg, 16px) !important;
  background: var(--g2026-surface, #fff) !important;
  border: 1px solid var(--g2026-border, rgba(15,23,42,.08)) !important;
  box-shadow: var(--g2026-shadow-sm, 0 1px 2px rgba(15,23,42,.06)) !important;
}

.sg-offcanvas-mainbar .publisher .publisher-message {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  position: relative !important;
}

.sg-offcanvas-mainbar .publisher .publisher-message > img.publisher-avatar,
.sg-offcanvas-mainbar .publisher .publisher-message > .publisher-avatar,
.sg-offcanvas-mainbar .publisher .publisher-message .publisher-avatar {
  position: static !important;
  top: auto !important;
  left: auto !important;
  flex: 0 0 42px !important;
  width: 42px !important;
  height: 42px !important;
  margin: 1px 0 0 !important;
  padding: 0 !important;
  border-radius: 12px !important;       /* squircle */
  border: 1px solid rgba(15,23,42,.08) !important;
  object-fit: cover !important;
  background: #fff !important;
  display: block !important;
}

.sg-offcanvas-mainbar .publisher .publisher-message > .colored-text-wrapper {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: auto !important;
  margin: 0 !important;
  padding: 10px 14px !important;
  border-radius: 14px !important;
  background: var(--g2026-surface-2, #f6f7fb) !important;
  border: 1px solid var(--g2026-border, rgba(15,23,42,.08)) !important;
  min-height: 44px !important;
  height: auto !important;
  display: flex !important;
  align-items: flex-start !important;
  overflow: visible !important;
  position: relative !important;
}

.sg-offcanvas-mainbar .publisher .publisher-message > .colored-text-wrapper > textarea,
.sg-offcanvas-mainbar .publisher .publisher-message textarea.js_publisher-scraper,
.sg-offcanvas-mainbar .publisher .publisher-message textarea {
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 24px !important;
  max-height: 50vh !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  resize: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  overflow-y: auto !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  white-space: pre-wrap !important;
  display: block !important;
  box-sizing: border-box !important;
  color: var(--g2026-text, #0f172a) !important;
}
body.night-mode .sg-offcanvas-mainbar .publisher .publisher-message > .colored-text-wrapper > textarea {
  color: #f0f0f0 !important;
}

.sg-offcanvas-mainbar .publisher .publisher-message > .publisher-emojis {
  position: static !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;
  flex: 0 0 36px !important;
  width: 36px !important;
  height: 36px !important;
  margin: 3px 0 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: rgba(99,102,241,.10) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  align-self: flex-start !important;
}
.sg-offcanvas-mainbar .publisher .publisher-message > .publisher-emojis:hover {
  background: rgba(99,102,241,.18) !important;
}
.sg-offcanvas-mainbar .publisher .publisher-message > .publisher-emojis i.fa-smile-wink,
.sg-offcanvas-mainbar .publisher .publisher-message > .publisher-emojis i.far {
  font-size: 16px !important;
  color: var(--g2026-accent, #6366f1) !important;
  margin: 0 !important;
}

/* Mobile tuning inside group/profile */
@media (max-width: 575.98px) {
  .sg-offcanvas-mainbar .publisher,
  .sg-offcanvas-mainbar #publisher-box.publisher { padding: 10px !important; }
  .sg-offcanvas-mainbar .publisher .publisher-message { gap: 8px !important; }
  .sg-offcanvas-mainbar .publisher .publisher-message > .publisher-avatar {
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
  }
  .sg-offcanvas-mainbar .publisher .publisher-message > .colored-text-wrapper {
    padding: 8px 12px !important;
    border-radius: 12px !important;
    min-height: 40px !important;
  }
  .sg-offcanvas-mainbar .publisher .publisher-message > .publisher-emojis {
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
  }
  .sg-offcanvas-mainbar .publisher .publisher-message > .publisher-emojis i.far {
    font-size: 14px !important;
  }
}

/* =========================================================
   35) PUBLISHER bubble — squircle, not pill (May 2026)
   The 14px radius on a 44px-tall element made the bubble read
   as an oval/pill. Bring it to a clean 10px rounded rectangle
   that matches the rest of the UI (avatar 12px, cards 16px).
   ========================================================= */

.publisher .publisher-message > .colored-text-wrapper,
.sg-offcanvas-mainbar .publisher .publisher-message > .colored-text-wrapper,
#publisher-box .publisher-message > .colored-text-wrapper {
  border-radius: 10px !important;
  background: var(--g2026-surface-2, #f6f7fb) !important;
  border: 1px solid var(--g2026-border, rgba(15,23,42,.08)) !important;
  padding: 10px 14px !important;
  min-height: 46px !important;
}
@media (max-width: 575.98px) {
  .publisher .publisher-message > .colored-text-wrapper,
  .sg-offcanvas-mainbar .publisher .publisher-message > .colored-text-wrapper,
  #publisher-box .publisher-message > .colored-text-wrapper {
    border-radius: 10px !important;
    padding: 9px 12px !important;
    min-height: 44px !important;
  }
}

/* =========================================================
   36) PUBLISHER MODAL — remove broken emoji glyph (May 2026)
   In the post-create modal (opened from group/profile publisher),
   the emoji trigger uses `<i class="far fa-smile-wink">` which is
   missing in the installed FA version → renders as an X tofu glyph.
   Hide it inside the modal publisher entirely; emoji picking is
   still available via the keyboard / standalone emoji panel.
   ========================================================= */

/* Hide emoji button in the modal publisher (#publisher-wapper-modal) */
#publisher-wapper-modal .publisher-emojis,
.modal #publisher-box .publisher-emojis,
#publisher-box[data-modal-mode="true"] .publisher-emojis {
  display: none !important;
}
/* Let the textarea bubble take the full width when emoji is hidden */
#publisher-wapper-modal .publisher-message,
.modal #publisher-box .publisher-message,
#publisher-box[data-modal-mode="true"] .publisher-message {
  gap: 10px !important;
}
#publisher-wapper-modal .publisher-message > .colored-text-wrapper,
.modal #publisher-box .publisher-message > .colored-text-wrapper,
#publisher-box[data-modal-mode="true"] .publisher-message > .colored-text-wrapper {
  flex: 1 1 auto !important;
}

/* If FontAwesome version doesn't ship fa-smile-wink, the inline (group page)
   publisher still uses it. Swap to a guaranteed-available smile glyph so we
   never show an X tofu. */
.publisher-emojis i.fa-smile-wink::before {
  /* fa-smile (solid/regular) — present in both FA5 & FA6 */
  content: "\f118" !important;
}

/* =========================================================
   37) PUBLISHER — sharper bubble + square emoji (May 2026)
   - Bubble: 6px radius (no oval/pill feel).
   - Emoji button: square (10px radius), centered with avatar.
   - Tighten the row spacing/alignment.
   ========================================================= */

.publisher .publisher-message,
.sg-offcanvas-mainbar .publisher .publisher-message,
#publisher-box .publisher-message {
  align-items: center !important;
  gap: 8px !important;
}

.publisher .publisher-message > .colored-text-wrapper,
.sg-offcanvas-mainbar .publisher .publisher-message > .colored-text-wrapper,
#publisher-box .publisher-message > .colored-text-wrapper {
  border-radius: 6px !important;
  min-height: 44px !important;
  padding: 9px 12px !important;
  align-items: center !important;
}

/* Emoji button — squircle (square w/ small radius), centered */
.publisher .publisher-message > .publisher-emojis,
.sg-offcanvas-mainbar .publisher .publisher-message > .publisher-emojis,
#publisher-box .publisher-message > .publisher-emojis {
  border-radius: 10px !important;
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
  margin: 0 !important;
  align-self: center !important;
  background: rgba(99,102,241,.10) !important;
}

/* Avatar — keep centered with row */
.publisher .publisher-message > .publisher-avatar,
.publisher .publisher-message > img.publisher-avatar,
.sg-offcanvas-mainbar .publisher .publisher-message > .publisher-avatar,
.sg-offcanvas-mainbar .publisher .publisher-message > img.publisher-avatar {
  margin: 0 !important;
  align-self: center !important;
}

/* Textarea — center its content vertically when single-line */
.publisher .publisher-message > .colored-text-wrapper > textarea,
.sg-offcanvas-mainbar .publisher .publisher-message > .colored-text-wrapper > textarea {
  display: flex !important;
  align-items: center !important;
}

@media (max-width: 575.98px) {
  .publisher .publisher-message,
  .sg-offcanvas-mainbar .publisher .publisher-message,
  #publisher-box .publisher-message { gap: 7px !important; }

  .publisher .publisher-message > .colored-text-wrapper,
  .sg-offcanvas-mainbar .publisher .publisher-message > .colored-text-wrapper {
    border-radius: 6px !important;
    padding: 8px 10px !important;
    min-height: 40px !important;
  }
  .publisher .publisher-message > .publisher-emojis,
  .sg-offcanvas-mainbar .publisher .publisher-message > .publisher-emojis {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
    border-radius: 9px !important;
  }
}

/* =========================================================
   38) PUBLISHER MODAL — clamp width + hide stray empty boxes
   Symptoms (modal screenshot):
   - Textarea bubble and tools-tabs panel overflow the card to the right.
   - An empty rounded rectangle appears below "Yetişkin İçerik".
   Root causes:
   - Inner wrappers (publisher-slider, publisher-tools-tabs ul.row,
     publisher-footer-options) don't have box-sizing constraints.
   - Empty publisher-attachments (.x-hidden but with min-height/padding)
     or empty form-table-row spacers still take layout space.
   ========================================================= */

/* Clamp every child of the publisher to the card width */
.publisher,
.publisher *,
#publisher-wapper-modal,
#publisher-wapper-modal * {
  box-sizing: border-box !important;
}
.publisher > *,
#publisher-box.publisher > *,
.publisher .publisher-slider,
.publisher .publisher-slider > *,
.publisher .publisher-tools-tabs,
.publisher .publisher-footer-options,
.publisher .publisher-attachments {
  max-width: 100% !important;
  width: 100% !important;
  min-width: 0 !important;
}
.publisher .publisher-slider {
  overflow: hidden !important;
}

/* Row grid for tools-tabs — defeat Bootstrap negative margins that
   make the row wider than its parent */
.publisher .publisher-tools-tabs > ul.row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}
.publisher .publisher-tools-tabs > ul.row > li {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Hide ANY empty/x-hidden attachment / file containers — they
   render as empty rounded boxes when no media is attached. */
.publisher .publisher-attachments:empty,
.publisher .publisher-attachments.x-hidden,
.publisher .publisher-meta:empty,
.publisher .publisher-meta.x-hidden,
.publisher .publisher-custom-thumbnail:not(.show),
.publisher .form-table-row.x-hidden,
.publisher .form-group.x-hidden {
  display: none !important;
}

/* The footer "submit row" sometimes leaves an empty card around the
   send button; constrain padding so it doesn't look like a blank box. */
.publisher .publisher-footer-buttons,
.publisher .publisher-buttons,
.publisher .publisher-submit-wrapper {
  padding: 8px 0 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Modal-specific: also clamp the wrapper */
#publisher-wapper-modal {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

/* =========================================================
   39) PUBLISHER — pixel-perfect alignment + kill stray circles
   ========================================================= */

/* Textarea bubble: equal inner padding both sides; no LTR override
   forcing left bias on RTL/auto direction. */
.publisher .publisher-message > .colored-text-wrapper,
.sg-offcanvas-mainbar .publisher .publisher-message > .colored-text-wrapper,
#publisher-box .publisher-message > .colored-text-wrapper {
  padding: 9px 12px !important;
  display: flex !important;
  align-items: center !important;
}
.publisher .publisher-message > .colored-text-wrapper > textarea,
.sg-offcanvas-mainbar .publisher .publisher-message > .colored-text-wrapper > textarea,
#publisher-box .publisher-message > .colored-text-wrapper > textarea {
  direction: ltr !important;
  text-align: left !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
[dir="rtl"] .publisher .publisher-message > .colored-text-wrapper > textarea {
  direction: rtl !important;
  text-align: right !important;
}

/* Avatar — guarantee shrink-locked square */
.publisher .publisher-message > .publisher-avatar,
.publisher .publisher-message > img.publisher-avatar,
.sg-offcanvas-mainbar .publisher .publisher-message > .publisher-avatar,
.sg-offcanvas-mainbar .publisher .publisher-message > img.publisher-avatar {
  flex: 0 0 42px !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
}
@media (max-width: 575.98px) {
  .publisher .publisher-message > .publisher-avatar,
  .publisher .publisher-message > img.publisher-avatar,
  .sg-offcanvas-mainbar .publisher .publisher-message > .publisher-avatar,
  .sg-offcanvas-mainbar .publisher .publisher-message > img.publisher-avatar {
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
  }
}

/* =========================================================
   39.b) KILL leftover empty round/box placeholders
   The little empty white circle/box at the bottom comes from
   one of:
   - .publisher-loader (loader shell)
   - .publisher-overlay (focus dimming layer)
   - empty .x-image placeholder inside hidden form-group
   Hide them when no relevant state is active.
   ========================================================= */
.publisher .publisher-loader { display: none !important; }
.publisher.js_loading .publisher-loader,
.publisher .publisher-loader.show { display: block !important; }

.publisher .publisher-overlay {
  display: none !important;
  pointer-events: none !important;
}
body.publisher-focus .publisher .publisher-overlay {
  display: block !important;
}

/* Empty x-image placeholders without a real uploaded src */
.publisher .x-image:empty,
.publisher .x-image:not(.has-image) {
  background: transparent !important;
  border: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
}
.publisher .form-group.x-hidden .x-image,
.publisher .form-table-row.x-hidden .x-image,
.publisher .publisher-meta.x-hidden .x-image {
  display: none !important;
}

/* The publisher-attachments wrappers are always-present empty
   containers until media is added. Hide while empty. */
.publisher .publisher-attachments {
  display: none !important;
}
.publisher .publisher-attachments.has-attachments,
.publisher .publisher-attachments:not(:empty):not(.x-hidden) {
  display: block !important;
}

/* Any direct child of .publisher-slider that is currently x-hidden
   should leave no layout footprint. */
.publisher .publisher-slider > .x-hidden,
.publisher .publisher-slider .x-hidden { display: none !important; }

/* =========================================================
   40) PUBLISHER — clean redesign (final, May 2026)
   - Textarea: NO bubble, just a flat input (kills the leftover oval).
   - Tools grid: dynamic auto-fit columns so tiles never clip.
   - Bottom card (Yetişkin İçerik): tight, no extra empty space.
   ========================================================= */

/* ---- 40.1  Textarea: flat, no bubble ---- */
.publisher .publisher-message > .colored-text-wrapper,
.sg-offcanvas-mainbar .publisher .publisher-message > .colored-text-wrapper,
#publisher-box .publisher-message > .colored-text-wrapper {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--g2026-border, rgba(15,23,42,.08)) !important;
  border-radius: 0 !important;
  padding: 8px 0 !important;
  min-height: 40px !important;
}
body.night-mode .publisher .publisher-message > .colored-text-wrapper {
  border-bottom-color: rgba(255,255,255,.10) !important;
}
.publisher .publisher-message > .colored-text-wrapper > textarea {
  padding: 0 !important;
}

/* Emoji button → also flat, no big background pill */
.publisher .publisher-message > .publisher-emojis,
.sg-offcanvas-mainbar .publisher .publisher-message > .publisher-emojis,
#publisher-box .publisher-message > .publisher-emojis {
  background: transparent !important;
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 36px !important;
  border-radius: 8px !important;
}
.publisher .publisher-message > .publisher-emojis:hover {
  background: rgba(99,102,241,.10) !important;
}

/* ---- 40.2  Tools grid — auto-fit so "Anket Oluştur" never clips ---- */
.publisher .publisher-tools-tabs {
  padding: 6px !important;
  border-radius: 12px !important;
}
.publisher .publisher-tools-tabs > ul,
.publisher .publisher-tools-tabs > ul.row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)) !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}
.publisher .publisher-tools-tabs > ul > li,
.publisher .publisher-tools-tabs > ul.row > li {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.publisher .publisher-tools-tab {
  min-height: 72px !important;
  padding: 8px 4px !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}
@media (max-width: 360px) {
  .publisher .publisher-tools-tabs > ul,
  .publisher .publisher-tools-tabs > ul.row {
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)) !important;
  }
  .publisher .publisher-tools-tab {
    min-height: 68px !important;
    font-size: 10.5px !important;
    padding: 6px 2px !important;
  }
}
@media (min-width: 768px) {
  .publisher .publisher-tools-tabs > ul,
  .publisher .publisher-tools-tabs > ul.row {
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)) !important;
  }
}

/* ---- 40.3  Footer block (Yetişkin İçerik) — tight, no empty space ---- */
.publisher .publisher-footer-options {
  margin: 10px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
.publisher .publisher-footer-options .form-table-row {
  margin: 0 !important;
  padding: 10px 12px !important;
}
/* Submit/send button area — trim padding and remove the empty card around */
.publisher .publisher-footer,
.publisher .publisher-buttons-wrapper,
.publisher .publisher-buttons,
.publisher .publisher-submit,
.publisher .publisher-actions,
.publisher .x-form-actions {
  padding: 10px 0 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  min-height: 0 !important;
}
/* Send button itself — keep its style, but kill any wrapping empty box */
.publisher button[type="submit"],
.publisher .btn-publish,
.publisher .js_publisher-submit {
  margin: 0 !important;
}

/* Catch-all: any direct child of .publisher that is empty and has no
   meaningful content should not render. */
.publisher > div:empty,
.publisher .publisher-slider > div:empty {
  display: none !important;
}

/* =========================================================
   41) PUBLISHER — final pass (May 2026)
   ========================================================= */

/* 41.1  Textarea: NO border at all → clean rectangle area */
.publisher .publisher-message > .colored-text-wrapper,
.sg-offcanvas-mainbar .publisher .publisher-message > .colored-text-wrapper,
#publisher-box .publisher-message > .colored-text-wrapper {
  border: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
  padding: 6px 0 !important;
  min-height: 36px !important;
}

/* 41.2  Tools grid: FIXED 4 columns w/ safe sizing so "Anket Oluştur"
        cannot clip. Use minmax(0,1fr) so cells shrink and parent has
        zero side padding interfering with the grid. */
.publisher .publisher-tools-tabs {
  padding: 4px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
.publisher .publisher-tools-tabs > ul,
.publisher .publisher-tools-tabs > ul.row,
.sg-offcanvas-mainbar .publisher .publisher-tools-tabs > ul,
.sg-offcanvas-mainbar .publisher .publisher-tools-tabs > ul.row {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  list-style: none !important;
}
.publisher .publisher-tools-tabs > ul > li,
.publisher .publisher-tools-tabs > ul.row > li {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.publisher .publisher-tools-tab {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 72px !important;
  padding: 8px 4px !important;
  font-size: 11px !important;
  line-height: 1.18 !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  overflow: hidden !important;
  text-align: center !important;
  hyphens: auto !important;
  -webkit-hyphens: auto !important;
}
.publisher .publisher-tools-tab .main-icon,
.publisher .publisher-tools-tab svg {
  margin: 0 0 4px !important;
  width: 22px !important;
  height: 22px !important;
  flex-shrink: 0 !important;
}
@media (max-width: 360px) {
  .publisher .publisher-tools-tabs > ul,
  .publisher .publisher-tools-tabs > ul.row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .publisher .publisher-tools-tab { font-size: 10.5px !important; }
}
@media (min-width: 480px) and (max-width: 767.98px) {
  .publisher .publisher-tools-tabs > ul,
  .publisher .publisher-tools-tabs > ul.row {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 768px) {
  .publisher .publisher-tools-tabs > ul,
  .publisher .publisher-tools-tabs > ul.row {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 992px) {
  .publisher .publisher-tools-tabs > ul,
  .publisher .publisher-tools-tabs > ul.row {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
}

/* 41.3  Footer-buttons (alttaki o boş gibi görünen alan) →
        küçük yuvarlak ikon yerine TAM GENİŞLİK "Gönder" butonu.
        Boş div'lerin layout footprint'ini kes. */
.publisher .publisher-footer-buttons {
  display: flex !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 10px 0 0 !important;
  background: transparent !important;
  border: 0 !important;
  min-height: 0 !important;
}
.publisher .publisher-footer-buttons > .d-grid {
  flex: 1 1 auto !important;
  width: 100% !important;
  display: block !important;
}
.publisher .publisher-footer-buttons .js_publisher,
.publisher .publisher-footer-buttons button.js_publisher-btn,
.publisher .publisher-footer-buttons button[type="button"].btn-primary {
  width: 100% !important;
  min-height: 44px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 10px 14px !important;
  margin: 0 !important;
  background: var(--g2026-accent, #6366f1) !important;
  border: 0 !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}
.publisher .publisher-footer-buttons .js_publisher .fa-paper-plane,
.publisher .publisher-footer-buttons .js_publisher i {
  display: inline-block !important;
  font-size: 14px !important;
}
.publisher .publisher-footer-buttons .js_publisher span.d-none,
.publisher .publisher-footer-buttons .js_publisher span.d-xl-inline-block {
  display: inline-block !important;          /* show "Post" text on mobile too */
  margin: 0 !important;
}

/* Privacy dropdown — pill style instead of empty round box look */
.publisher .publisher-footer-buttons .btn-group.js_publisher-privacy {
  flex: 0 0 auto !important;
}
.publisher .publisher-footer-buttons .btn-group .btn.btn-light {
  border-radius: 10px !important;
  padding: 10px 12px !important;
  font-size: 13px !important;
  background: var(--g2026-surface-2, #f6f7fb) !important;
  border: 1px solid var(--g2026-border, rgba(15,23,42,.08)) !important;
  min-height: 44px !important;
}

/* =========================================================
   42) PUBLISHER — fit-everything pass (May 2026)
   ========================================================= */

/* 42.1  Textarea: rectangular bordered box that grows downward */
.publisher .publisher-message > .colored-text-wrapper,
.sg-offcanvas-mainbar .publisher .publisher-message > .colored-text-wrapper,
#publisher-box .publisher-message > .colored-text-wrapper {
  border: 1px solid var(--g2026-border, rgba(15,23,42,.10)) !important;
  border-radius: 4px !important;            /* rectangle */
  background: #fff !important;
  padding: 10px 12px !important;
  min-height: 44px !important;
  height: auto !important;
  align-items: flex-start !important;
  overflow: visible !important;
}
body.night-mode .publisher .publisher-message > .colored-text-wrapper {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.10) !important;
}
.publisher .publisher-message > .colored-text-wrapper > textarea,
.sg-offcanvas-mainbar .publisher .publisher-message > .colored-text-wrapper > textarea {
  height: auto !important;
  min-height: 22px !important;
  max-height: none !important;
  overflow: hidden !important;              /* lets js_autosize grow */
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* 42.2  Tools tiles: shrink hard so 4 always fit on phones.
        Kill the legacy 10px 14px padding + 16px radius from style.css. */
.publisher .publisher-tools-tabs,
.sg-offcanvas-mainbar .publisher .publisher-tools-tabs {
  padding: 4px !important;
  margin-top: 10px !important;
  overflow: hidden !important;
}
.publisher .publisher-tools-tabs > ul,
.publisher .publisher-tools-tabs > ul.row,
.sg-offcanvas-mainbar .publisher .publisher-tools-tabs > ul,
.sg-offcanvas-mainbar .publisher .publisher-tools-tabs > ul.row {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 4px !important;
  --bs-gutter-x: 0 !important;
  --bs-gutter-y: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}
.publisher .publisher-tools-tabs > ul > li,
.publisher .publisher-tools-tabs > ul.row > li {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  list-style: none !important;
}
.publisher .publisher-tools-tab,
body .publisher .publisher-tools-tab,
.sg-offcanvas-mainbar .publisher .publisher-tools-tab {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 66px !important;
  padding: 6px 2px !important;            /* much tighter */
  border-radius: 10px !important;
  font-size: 10px !important;             /* smaller text */
  line-height: 1.15 !important;
  font-weight: 600 !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  overflow: hidden !important;
  text-align: center !important;
  background: #fff !important;
  border: 1px solid rgba(15,23,42,.06) !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.04) !important;
  margin: 0 !important;
}
.publisher .publisher-tools-tab .main-icon,
.publisher .publisher-tools-tab svg,
.publisher .publisher-tools-tab i {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  flex: 0 0 18px !important;
  flex-shrink: 0 !important;
}

@media (min-width: 420px) {
  .publisher .publisher-tools-tab { font-size: 11px !important; min-height: 70px !important; }
  .publisher .publisher-tools-tab .main-icon,
  .publisher .publisher-tools-tab svg { width: 20px !important; height: 20px !important; flex-basis: 20px !important; }
}
@media (min-width: 768px) {
  .publisher .publisher-tools-tabs > ul,
  .publisher .publisher-tools-tabs > ul.row {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
  .publisher .publisher-tools-tab { font-size: 12px !important; min-height: 78px !important; padding: 8px 4px !important; }
  .publisher .publisher-tools-tab .main-icon,
  .publisher .publisher-tools-tab svg { width: 22px !important; height: 22px !important; flex-basis: 22px !important; }
}
@media (min-width: 992px) {
  .publisher .publisher-tools-tabs > ul,
  .publisher .publisher-tools-tabs > ul.row {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
}

/* =========================================================
   43) PUBLISHER tools — FORCE icons to shrink (May 2026)
   The tile's icon container has INLINE width:24px;height:24px on
   `.svg-container.main-icon`. !important on a class CAN override
   inline non-!important styles. Apply with the most specific
   selector path so it wins. Also kill the `mr5` margin in column
   layout, and reduce font further so wrap fits 4-up.
   ========================================================= */

/* Tile container size & spacing */
.publisher .publisher-tools-tabs .publisher-tools-tab,
.publisher .publisher-tools-tabs > ul > li > .publisher-tools-tab,
.publisher .publisher-tools-tabs > ul.row > li > .publisher-tools-tab {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  padding: 5px 2px !important;
  min-height: 62px !important;
  font-size: 9.5px !important;
  line-height: 1.1 !important;
  letter-spacing: -0.1px !important;
  border-radius: 9px !important;
}

/* Beat the INLINE width:24px;height:24px on .svg-container */
.publisher .publisher-tools-tab .svg-container,
.publisher .publisher-tools-tab .svg-container.main-icon,
.publisher .publisher-tools-tab > .svg-container.main-icon,
.publisher .publisher-tools-tab span > .svg-container.main-icon,
.publisher .publisher-tools-tab form .svg-container.main-icon {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  margin: 0 !important;        /* kill mr5 in column layout */
  flex-shrink: 0 !important;
}
.publisher .publisher-tools-tab .svg-container svg,
.publisher .publisher-tools-tab .svg-container.main-icon svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* The span/form wrapper around the icon must also collapse to its
   icon width and not introduce extra inline-block whitespace */
.publisher .publisher-tools-tab > span.js_x-uploader,
.publisher .publisher-tools-tab form.x-uploader {
  display: inline-flex !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* Hide the file/hidden inputs visually but KEEP them clickable.
   NOTE: `display:none` on the file input prevents the browser file
   picker from ever opening (even via JS .click()), so we use the
   off-screen technique instead. The hidden inputs are truly hidden. */
.publisher .publisher-tools-tab input[type="hidden"] {
  display: none !important;
}
.publisher .publisher-tools-tab form.x-uploader input[type="file"] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  cursor: pointer !important;
  z-index: 2 !important;
  display: block !important;
}
/* Make the attach tile a proper positioning context so the file
   input overlay can cover the whole tile and capture clicks. */
.publisher .publisher-tools-tab.attach {
  position: relative !important;
  cursor: pointer !important;
}
.publisher .publisher-tools-tab.attach form.x-uploader {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 1 !important;
}
.publisher .publisher-tools-tab.attach > span.js_x-uploader {
  position: static !important;
}

/* Slightly larger at ≥420px and 5-up at ≥768px */
@media (min-width: 420px) {
  .publisher .publisher-tools-tabs .publisher-tools-tab {
    font-size: 10.5px !important;
    min-height: 68px !important;
    padding: 6px 3px !important;
  }
  .publisher .publisher-tools-tab .svg-container.main-icon {
    width: 18px !important; height: 18px !important;
    min-width: 18px !important; min-height: 18px !important;
    max-width: 18px !important; max-height: 18px !important;
  }
}
@media (min-width: 768px) {
  .publisher .publisher-tools-tabs .publisher-tools-tab {
    font-size: 12px !important;
    min-height: 78px !important;
    padding: 8px 6px !important;
    gap: 4px !important;
  }
  .publisher .publisher-tools-tab .svg-container.main-icon {
    width: 22px !important; height: 22px !important;
    min-width: 22px !important; min-height: 22px !important;
    max-width: 22px !important; max-height: 22px !important;
  }
}

/* =========================================================
   44) AVATAR DROPDOWN — keep inside viewport (May 2026)
   The "Upload Photo / Select Photo" menu was anchored to the
   camera button at the avatar's bottom-right, so on small screens
   (or when the avatar sits at the very edge of the wrapper) the
   menu overflowed the right side of the page.
   Fix: anchor it to the avatar wrapper, center horizontally below
   the avatar, with a max-width and viewport-safe positioning.
   ========================================================= */

.profile-header .profile-avatar-wrapper {
  position: absolute !important;          /* ensure it's the positioning ctx */
}

.profile-avatar-change {
  position: absolute !important;
}

/* The dropdown is a child of .profile-avatar-change. Lift it OUT
   visually by anchoring to the wrapper-center. */
.profile-avatar-change .dropdown-menu,
.profile-avatar-wrapper .dropdown-menu {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  /* Center horizontally around the avatar wrapper's bottom-right edge
     where the camera button lives, then nudge left so it doesn't
     overflow when the avatar is near the edge. */
  right: auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  min-width: 200px !important;
  width: max-content !important;
  max-width: min(260px, calc(100vw - 24px)) !important;
  border-radius: 12px !important;
  padding: 6px !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .18) !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  background: #fff !important;
  z-index: 1100 !important;
}
body.night-mode .profile-avatar-change .dropdown-menu {
  background: #2b2d33 !important;
  border-color: rgba(255,255,255,.08) !important;
}

/* Items inside the dropdown — readable padding */
.profile-avatar-change .dropdown-menu .dropdown-item,
.profile-avatar-wrapper .dropdown-menu .dropdown-item {
  border-radius: 8px !important;
  padding: 10px 12px !important;
  font-size: 13.5px !important;
  white-space: normal !important;          /* allow wrap on narrow widths */
}

/* Avatar wrapper must not clip the menu */
.profile-header .profile-avatar-wrapper {
  overflow: visible !important;
}
.profile-avatar-change {
  overflow: visible !important;
}

/* Same treatment for cover edit dropdown — center it under the camera
   button instead of right-edge so it never escapes the viewport. */
.profile-cover-buttons .dropdown-menu {
  left: 0 !important;
  right: auto !important;
  transform: none !important;
  margin-top: 8px !important;
  max-width: min(260px, calc(100vw - 24px)) !important;
}


/* =====================================================================
   .input-money — 2026 iOS-quality currency input (global)
   Applies to every modal that uses the .input-money pattern so the
   currency symbol never overlaps the value.
   ===================================================================== */
.modal .input-money,
form .input-money,
body .input-money { position: relative !important; display: block !important; }
.modal .input-money > span,
form .input-money > span,
body .input-money > span {
  position: absolute !important;
  top: 50% !important;
  left: 16px !important;
  right: auto !important;
  transform: translateY(-50%) !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  text-align: left !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: rgba(60,60,67,0.55) !important;
  pointer-events: none;
  letter-spacing: -0.01em;
  line-height: 1;
  z-index: 3;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
.modal .input-money.right > span,
form .input-money.right > span,
body .input-money.right > span { left: auto !important; right: 16px !important; }
.modal .input-money > input,
.modal .input-money input.form-control,
form .input-money > input,
form .input-money input.form-control,
body .input-money > input,
body .input-money input.form-control {
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  font-family: inherit !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 14px 16px 14px 64px !important;
  border-radius: 14px !important;
  background: rgba(118,118,128,0.10) !important;
  border: 0.5px solid rgba(60,60,67,0.14) !important;
  color: #1c1c1e !important;
  box-shadow: none !important;
  width: 100% !important;
  display: block !important;
}
.modal .input-money.right > input,
.modal .input-money.right input.form-control,
form .input-money.right > input,
form .input-money.right input.form-control,
body .input-money.right > input,
body .input-money.right input.form-control {
  padding-left: 16px !important;
  padding-right: 64px !important;
}
.modal .input-money input.form-control:focus,
form .input-money input.form-control:focus,
body .input-money input.form-control:focus {
  background: #fff !important;
  border-color: rgba(10,132,255,0.45) !important;
  box-shadow: 0 0 0 3px rgba(10,132,255,0.12) !important;
  outline: 0 !important;
}
.modal .input-money input.form-control::placeholder,
body .input-money input.form-control::placeholder { color: rgba(60,60,67,0.40) !important; font-weight: 600; }
body.night-mode .input-money input.form-control,
body.night-mode .modal .input-money input.form-control {
  background: rgba(118,118,128,0.18) !important;
  color: #f5f5f7 !important;
  border-color: rgba(255,255,255,0.10) !important;
}
body.night-mode .input-money > span,
body.night-mode .modal .input-money > span { color: rgba(235,235,245,0.45) !important; }

/* =====================================================================
   Bank transfer modal — IBAN / Account Name rows with copy button
   ===================================================================== */
.page-header.bank-transfer .bank-info-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.page-header.bank-transfer .bank-info-row .bank-info-meta {
  display: flex !important;
  align-items: center;
  gap: 10px;
  font-size: 15px !important;
  font-weight: 700;
  letter-spacing: 0.2px;
  word-break: break-word;
  line-height: 1.35;
  color: #fff;
  background: rgba(255,255,255,0.10);
  border: 0.5px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  padding: 8px 8px 8px 12px;
  min-height: 40px;
  backdrop-filter: saturate(160%) blur(8px);
  -webkit-backdrop-filter: saturate(160%) blur(8px);
}
.page-header.bank-transfer .bank-info-row .bank-info-value {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  word-break: break-word;
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 14px;
  letter-spacing: 0.4px;
}
.page-header.bank-transfer .bank-info-row .bank-info-help {
  display: block;
  margin-top: 2px;
  font-size: 11px !important;
  color: rgba(255,255,255,0.75) !important;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.bank-copy-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 0;
  background: rgba(255,255,255,0.18);
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  padding: 0;
  transition: background-color .15s ease, transform .12s ease;
  position: relative;
}
.bank-copy-btn:hover { background: rgba(255,255,255,0.30); }
.bank-copy-btn:active { transform: scale(0.92); }
.bank-copy-btn.copied { background: #34c759; }
.bank-copy-btn .fa-copy::before { content: "\f0c5"; }
.bank-copy-btn.copied .fa-copy::before { content: "\f00c"; }

/* =====================================================================
   PUBLISHER POLISH (May 2026, r6) — overflow / label / mobile fixes
   ===================================================================== */
/* 1) Textarea — wrap long unbroken strings (URLs, asdasdasd…) */
.publisher .publisher-message > .colored-text-wrapper > textarea,
.publisher .publisher-message textarea.js_publisher-scraper,
.publisher textarea.js_autosize,
.publisher textarea.js_mention {
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  white-space: pre-wrap !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  min-height: 22px !important;
  max-height: 220px !important;
  overflow-y: auto !important;
  -webkit-text-size-adjust: 100% !important;
  caret-color: var(--g2026-accent, #6366f1);
}
/* Wrapper grows with textarea (autosize), never clips */
.publisher .publisher-message > .colored-text-wrapper {
  align-items: flex-start !important;
  padding: 10px 44px 10px 14px !important;
  min-height: 44px !important;
  max-height: none !important;
  overflow: hidden !important;
}
/* Emoji button stays anchored top-right when textarea grows */
.publisher .publisher-message .publisher-emojis {
  top: 7px !important;
  transform: none !important;
}

/* 2) Tools-tab labels — wrap nicely, never get cut */
.publisher .publisher-tools-tab {
  position: relative !important;
  min-height: 86px !important;
  padding: 12px 6px 10px !important;
  font-size: 11.5px !important;
  line-height: 1.25 !important;
  hyphens: auto;
  -webkit-hyphens: auto;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
}
.publisher .publisher-tools-tab .main-icon,
.publisher .publisher-tools-tab svg {
  width: 22px !important;
  height: 22px !important;
}
/* Force 3 cols on phones for readability of Turkish labels
   (4 columns made "Anket Oluştur" overflow) */
@media (max-width: 767px) {
  .publisher .publisher-tools-tabs > ul,
  .publisher .publisher-tools-tabs > ul.row {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }
  .publisher .publisher-tools-tab {
    min-height: 84px !important;
    font-size: 11.5px !important;
  }
}
@media (max-width: 380px) {
  .publisher .publisher-tools-tabs > ul,
  .publisher .publisher-tools-tabs > ul.row {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .publisher .publisher-tools-tab {
    min-height: 78px !important;
    font-size: 10.5px !important;
    padding: 10px 4px !important;
  }
  .publisher .publisher-tools-tab .main-icon,
  .publisher .publisher-tools-tab svg { width: 20px !important; height: 20px !important; }
}

/* 3) Publisher-message: avatar never overflows out of the box;
      contain absolute children of the publisher wrapper */
.publisher,
#publisher-box.publisher {
  position: relative !important;
  overflow: visible !important;
}
.publisher .publisher-message {
  padding: 6px 0 6px 0 !important;
  margin: 0 !important;
}
.publisher .publisher-message .publisher-avatar {
  flex: 0 0 40px !important;
  width: 40px !important;
  height: 40px !important;
  margin: 2px 0 0 0 !important;
  position: static !important;
  left: auto !important;
  top: auto !important;
}

/* 4) Modal-mode publisher (the "Posting in" modal) — full layout, no floating avatar */
.modal .publisher,
.modal #publisher-box.publisher,
#publisher-wapper-modal .publisher {
  margin: 0 !important;
  padding: 14px !important;
  border-radius: 14px !important;
  background: var(--g2026-surface, #fff) !important;
  border: 1px solid rgba(15,23,42,.06) !important;
  box-shadow: none !important;
}
.modal .publisher .publisher-close {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  z-index: 5;
}
.modal .publisher .publisher-close .btn-close {
  width: 28px !important; height: 28px !important;
  border-radius: 50% !important;
  background-color: rgba(15,23,42,.06) !important;
  background-size: 12px !important;
  padding: 6px !important;
}
body.night-mode .modal .publisher .publisher-close .btn-close {
  background-color: rgba(255,255,255,.10) !important;
}

/* 5) Group page (mobile) — make publisher full-width inside the group feed
      and ensure the message bubble never clips long content */
.group-content .publisher,
#group-ajax-content .publisher,
.x-form.publisher[data-handle="group"] {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}
.group-content .publisher .publisher-message > .colored-text-wrapper,
#group-ajax-content .publisher .publisher-message > .colored-text-wrapper {
  border-radius: 18px !important;
}

/* 6) Footer toggle rows — never overflow on tight screens */
.publisher .publisher-footer-options .form-table-row > div:nth-child(2) {
  min-width: 0 !important;
  overflow: hidden !important;
}
.publisher .publisher-footer-options .form-table-row .form-label {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.publisher .publisher-footer-options .form-table-row .form-text {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* =====================================================================
   PUBLISHER MODAL — group context header + body padding (r6.1)
   ===================================================================== */
.modal .publisher-group-context {
  background: linear-gradient(180deg, rgba(247,248,251,1), rgba(247,248,251,.92)) !important;
  -webkit-backdrop-filter: saturate(180%) blur(18px);
          backdrop-filter: saturate(180%) blur(18px);
  border-radius: 14px 14px 0 0 !important;
  border-bottom: 1px solid rgba(15,23,42,.06) !important;
  padding: 12px 14px !important;
  position: sticky; top: 0; z-index: 4;
}
body.night-mode .modal .publisher-group-context {
  background: linear-gradient(180deg, rgba(28,30,36,1), rgba(28,30,36,.85)) !important;
  border-bottom-color: rgba(255,255,255,.08) !important;
}
.modal .publisher-group-context .js-publisher-back {
  width: 32px !important; height: 32px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  border-radius: 50% !important;
  background: rgba(15,23,42,.05) !important;
  margin-right: 10px !important;
}
.modal .publisher-group-context .js-publisher-back:active { background: rgba(15,23,42,.1) !important; }
.modal .publisher-group-context img {
  border-radius: 12px !important;
  border: 1px solid rgba(15,23,42,.08);
}
.modal .publisher-group-context .flex-grow-1 > div:first-child {
  letter-spacing: .01em; text-transform: uppercase;
  font-weight: 600;
}

/* Give the modal body breathing room (the .tpl uses ptb0 plr0) */
.modal .modal-body.ptb0.plr0:has(.publisher-group-context),
.modal .modal-body.ptb0.plr0:has(#publisher-wapper-modal) {
  padding: 0 !important;
}
.modal #publisher-wapper-modal { padding: 12px 12px 16px !important; }
.modal #publisher-wapper-modal .publisher,
.modal #publisher-wapper-modal #publisher-box.publisher { margin: 0 !important; }

/* Hide the duplicate close button in modal-mode publisher
   (the modal already has its own close button) */
.modal .publisher .publisher-close { display: none !important; }

/* Group picker list polish */
.publisher-group-picker-list .publisher-group-pick-item {
  border: 1px solid transparent;
}
.publisher-group-picker-list .publisher-group-pick-item:hover {
  border-color: rgba(15,23,42,.06);
}
.publisher-group-picker-list .publisher-group-pick-item img {
  border-radius: 12px !important;
}

/* =====================================================================
   PROFILE HEADER — name + avatar overlap fix (r6.2)
   The .sg-offcanvas-mainbar-scoped rule above doesn't always win on
   mobile (parent chain can differ); apply a universal override so the
   name wrapper always reserves enough vertical space below the avatar.
   ===================================================================== */
body .profile-header { position: relative !important; }

/* Center-overlap avatar at the cover/body seam */
body .profile-avatar-wrapper:not(.static) {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  top: 50% !important;                  /* fallback when --g2026-cover-h missing */
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  width: 76px !important;
  height: 76px !important;
  padding: 3px !important;
  background: #fff !important;
  border-radius: 18px !important;
  box-shadow: 0 6px 20px rgba(15,23,42,.18) !important;
  z-index: 4 !important;
}
body .profile-avatar-wrapper:not(.static) > img,
body .profile-avatar-wrapper:not(.static) img.js_lightbox,
body .profile-avatar-wrapper:not(.static) img.js_lightbox-nodata {
  width: 100% !important;
  height: 100% !important;
  border-radius: 14px !important;
  object-fit: cover !important;
  display: block !important;
}

/* Place avatar at cover bottom (no var dependency).
   Cover legacy height: ~120px mobile, ~160px ≥576px, ~200px ≥768px. */
body .profile-avatar-wrapper:not(.static) { top: 110px !important; }
@media (min-width: 576px) { body .profile-avatar-wrapper:not(.static) { top: 150px !important; width: 96px !important; height: 96px !important; } }
@media (min-width: 768px) { body .profile-avatar-wrapper:not(.static) { top: 190px !important; width: 110px !important; height: 110px !important; } }
@media (min-width: 992px) { body .profile-avatar-wrapper:not(.static) { top: auto !important; bottom: -28px !important; left: 28px !important; transform: none !important; width: 120px !important; height: 120px !important; } }

/* Name wrapper — reserve enough top padding so the absolute avatar
   never sits ON the name on small screens */
body .profile-name-wrapper {
  position: relative !important;
  background: transparent !important;
  padding: 56px 16px 8px !important;   /* 76/2 + 18px buffer */
  text-align: center !important;
  font-size: 1.18rem !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}
@media (min-width: 576px) { body .profile-name-wrapper { padding-top: 66px !important; font-size: 1.32rem !important; } }
@media (min-width: 768px) { body .profile-name-wrapper { padding-top: 72px !important; font-size: 1.55rem !important; } }
@media (min-width: 992px) {
  body .profile-name-wrapper {
    position: absolute !important;
    bottom: 14px !important;
    left: 165px !important;
    right: 16px !important;
    padding: 0 !important;
    text-align: left !important;
    font-size: 1.7rem !important;
    text-shadow: 0 1px 3px rgba(0,0,0,.45);
  }
  body .profile-name-wrapper a { color: #fff !important; }
}

/* Verified / pro badges — keep next to the name, never bigger than line */
body .profile-name-wrapper .verified-badge,
body .profile-name-wrapper .verified-badge svg {
  width: 22px !important;
  height: 22px !important;
  vertical-align: middle !important;
  display: inline-block !important;
}
@media (min-width: 768px) {
  body .profile-name-wrapper .verified-badge,
  body .profile-name-wrapper .verified-badge svg { width: 26px !important; height: 26px !important; }
}

/* Camera dropdown indicator — anchored bottom-right of AVATAR IMAGE,
   not the white wrapper. Sits half outside for an iOS-style badge. */
body .profile-avatar-wrapper {
  overflow: visible !important;
}
body .profile-avatar-wrapper .profile-avatar-change {
  position: absolute !important;
  right: -6px !important;
  bottom: -6px !important;
  top: auto !important;
  left: auto !important;
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #0a84ff !important;
  background-image: linear-gradient(180deg,#0a84ff,#007aff) !important;
  border: 2px solid #fff !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  opacity: 1 !important;
  font-size: 12px !important;
  box-shadow: 0 4px 12px rgba(10,132,255,.35), 0 0 0 0.5px rgba(10,132,255,.5) inset !important;
  z-index: 6 !important;
  cursor: pointer !important;
}
body.night-mode .profile-avatar-wrapper .profile-avatar-change {
  border-color: #2b2d33 !important;
}
body .profile-avatar-wrapper .profile-avatar-change > i.fa-camera,
body .profile-avatar-wrapper .profile-avatar-change > i {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  color: #fff !important;
  pointer-events: auto !important;
  background: transparent !important;
  border: 0 !important;
}
body .profile-avatar-wrapper .profile-avatar-change:active {
  transform: scale(.92) !important;
}
/* Hide crop/delete (kept in DOM for legacy handlers) */
body .profile-avatar-wrapper .profile-avatar-crop,
body .profile-avatar-wrapper .profile-avatar-delete {
  display: none !important;
}
/* Make avatar img clickable for the lightbox (don't let badge steal taps) */
body .profile-avatar-wrapper > img {
  cursor: zoom-in;
}

/* =====================================================================
   COMMENT COMPOSER — bug fix r6.3
   Legacy style.css sets .comment-avatar-picture { min-width:46px;
   min-height:46px; padding-top:100% } which makes the avatar OVERFLOW
   the flex slot in the comment composer (visible "shift" / misalignment).
   Force exact box.
   ===================================================================== */
.post-comments .comment.js_comment-form .comment-avatar,
.post-comments .comment.js_comment-form .comment-avatar-picture {
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  padding-top: 0 !important;
  padding: 0 !important;
  float: none !important;
  border-radius: 12px !important;
  background-color: transparent !important;
}
.post-comments .comment.js_comment-form .comment-avatar {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  align-self: center !important;
  position: relative !important;
  left: auto !important; top: auto !important;
}
.post-comments .comment.js_comment-form .comment-avatar-picture {
  width: 38px !important;
  height: 38px !important;
  display: block !important;
  background-size: cover !important;
  background-position: center !important;
}
/* Wipe legacy `.comment-data{margin-left:56px}` for the composer row */
.post-comments .comment.js_comment-form .comment-data {
  margin-left: 0 !important;
}
/* `.comment{padding-bottom:10px}` is fine — but ensure no overflow */
.post-comments .comment.js_comment-form {
  padding: 8px 0 4px !important;
  overflow: visible !important;
}
@media (max-width: 575px) {
  .post-comments .comment.js_comment-form .comment-avatar,
  .post-comments .comment.js_comment-form .comment-avatar-picture {
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
    border-radius: 11px !important;
  }
}

/* =====================================================================
   COMMENT COMPOSER — send button stable layout r6.4
   Problem: textarea had width:100% which broke flex so long text ran
   UNDER the absolutely-positioned send pill. Solution: anchor the send
   tools as an absolute element inside the pill and reserve right
   padding on the textarea (= classic chat-input pattern).
   ===================================================================== */
.post-comments .comment.js_comment-form .x-form.comment-form {
  position: relative !important;
  padding: 6px 52px 6px 16px !important;   /* right padding = send slot */
  align-items: flex-start !important;
  min-height: 44px !important;
}
.post-comments .comment.js_comment-form textarea.js_post-comment {
  width: 100% !important;
  flex: 1 1 auto !important;
  padding: 6px 0 !important;
  margin: 0 !important;
  display: block !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  white-space: pre-wrap !important;
}
/* Tools: pinned bottom-right inside the pill (no overlap with text) */
.post-comments .comment.js_comment-form .x-form-tools {
  position: absolute !important;
  right: 5px !important;
  bottom: 5px !important;
  top: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  background: transparent !important;
  z-index: 2 !important;
}
/* If attachments are also present, expand right padding a touch */
.post-comments .comment.js_comment-form .x-form.comment-form:has(.x-form-tools-attach) {
  padding-right: 86px !important;
}
@media (max-width: 575px) {
  .post-comments .comment.js_comment-form .x-form.comment-form {
    padding: 6px 48px 6px 14px !important;
  }
  .post-comments .comment.js_comment-form .x-form.comment-form:has(.x-form-tools-attach) {
    padding-right: 80px !important;
  }
  .post-comments .comment.js_comment-form .x-form-tools > li {
    width: 30px !important; height: 30px !important;
  }
  .post-comments .comment.js_comment-form .x-form-tools-post,
  .post-comments .comment.js_comment-form .x-form-tools .js_post-comment {
    width: 32px !important; height: 32px !important;
  }
}

/* =====================================================================
   PROFILE AVATAR — kill legacy 0.5s transitions that cause "shift" on tap
   ===================================================================== */
body .profile-avatar-wrapper,
body .profile-avatar-wrapper > img,
body .profile-avatar-wrapper .profile-avatar-change,
body .profile-avatar-wrapper .profile-avatar-change-loader {
  transition: none !important;
}
/* Defeat legacy `.profile-avatar-wrapper:hover { transform: ... }`
   which on touch triggers a 0.5s scale animation that looks like a
   "shift down and back" on mobile tap */
body .profile-avatar-wrapper:hover,
body .profile-avatar-wrapper:focus,
body .profile-avatar-wrapper:active {
  transform: translate(-50%, -50%) !important;
}
@media (min-width: 992px) {
  body .profile-avatar-wrapper:not(.static):hover,
  body .profile-avatar-wrapper:not(.static):focus,
  body .profile-avatar-wrapper:not(.static):active {
    transform: none !important;
  }
}

/* =====================================================================
   PROFILE AVATAR — FREEZE all motion (r6.5)
   Stop ANY transform/size change on tap/hover/focus/active for the
   avatar wrapper and its child img. Lightbox click should not move
   the wrapper. Camera badge keeps its tap scale.
   ===================================================================== */
body .profile-avatar-wrapper,
body .profile-avatar-wrapper *:not(.profile-avatar-change):not(.profile-avatar-change *) {
  transition: none !important;
  animation: none !important;
}
/* Kill ALL hover/focus/active transforms by re-pinning the wrapper. */
body .profile-avatar-wrapper:not(.static),
body .profile-avatar-wrapper:not(.static):hover,
body .profile-avatar-wrapper:not(.static):focus,
body .profile-avatar-wrapper:not(.static):active,
body .profile-avatar-wrapper:not(.static):focus-within {
  transform: translate(-50%, -50%) !important;
  width: 76px !important;
  height: 76px !important;
}
@media (min-width: 576px) {
  body .profile-avatar-wrapper:not(.static),
  body .profile-avatar-wrapper:not(.static):hover,
  body .profile-avatar-wrapper:not(.static):focus,
  body .profile-avatar-wrapper:not(.static):active,
  body .profile-avatar-wrapper:not(.static):focus-within {
    width: 96px !important; height: 96px !important;
  }
}
@media (min-width: 768px) {
  body .profile-avatar-wrapper:not(.static),
  body .profile-avatar-wrapper:not(.static):hover,
  body .profile-avatar-wrapper:not(.static):focus,
  body .profile-avatar-wrapper:not(.static):active,
  body .profile-avatar-wrapper:not(.static):focus-within {
    width: 110px !important; height: 110px !important;
  }
}
@media (min-width: 992px) {
  body .profile-avatar-wrapper:not(.static),
  body .profile-avatar-wrapper:not(.static):hover,
  body .profile-avatar-wrapper:not(.static):focus,
  body .profile-avatar-wrapper:not(.static):active,
  body .profile-avatar-wrapper:not(.static):focus-within {
    transform: none !important;
    width: 120px !important; height: 120px !important;
  }
}
/* Img inside — never scale, never transition */
body .profile-avatar-wrapper > img,
body .profile-avatar-wrapper > img:hover,
body .profile-avatar-wrapper > img:focus,
body .profile-avatar-wrapper > img:active {
  transform: none !important;
  width: 100% !important;
  height: 100% !important;
  cursor: pointer;
}
/* Camera badge tap feedback (only thing that may animate) */
body .profile-avatar-wrapper .profile-avatar-change {
  transition: transform .12s ease, filter .12s ease !important;
}
body .profile-avatar-wrapper .profile-avatar-change:active {
  transform: scale(.92) !important;
}

/* =====================================================================
   COVER REPOSITION — restore drag/save UI (r6.6)
   ===================================================================== */
/* Always-visible reposition button (next to camera) */
body .profile-cover-buttons > div.profile-cover-position {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  margin: 0 0 0 6px !important;
  background: rgba(0, 0, 0, .55) !important;
  color: #fff !important;
  border-radius: 50% !important;
  font-size: 14px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.25) !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 2 !important;
}
body .profile-cover-buttons > div.profile-cover-position.x-hidden {
  display: none !important;     /* hidden only when no cover */
}
body .profile-cover-buttons > div.profile-cover-position > i {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-size: 14px !important;
  background: transparent !important;
  border: 0 !important;
  pointer-events: none !important;
}
body .profile-cover-buttons > div.profile-cover-position:active {
  background: rgba(0, 0, 0, .75) !important;
  transform: scale(.94) !important;
}

/* Save / Cancel pills — shown only when JS triggers .show() */
body .profile-cover-buttons > div.profile-cover-position-buttons {
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  margin: 0 0 0 6px !important;
  border-radius: 50% !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 2 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.25) !important;
}
body .profile-cover-buttons > div.profile-cover-position-buttons:nth-of-type(2),
body .profile-cover-buttons > div.profile-cover-position-buttons:has(.js_save-position-picture) {
  background: linear-gradient(180deg,#34c759,#28a745) !important;
}
body .profile-cover-buttons > div.profile-cover-position-buttons:nth-of-type(3),
body .profile-cover-buttons > div.profile-cover-position-buttons:has(.js_cancel-position-picture) {
  background: linear-gradient(180deg,#ff3b30,#dc2626) !important;
}
body .profile-cover-buttons > div.profile-cover-position-buttons > i {
  color: #fff !important;
  font-size: 14px !important;
  background: transparent !important;
  border: 0 !important;
  /* `pointer-events: none` here used to break click handlers because
     the `.js_save-position-picture` / `.js_cancel-position-picture`
     classes live on the <i> element itself. Allow pointer events so
     jQuery delegated click handlers actually fire. */
  pointer-events: auto !important;
  cursor: pointer !important;
}
/* The wrapper div should also be clickable as a fallback */
body .profile-cover-buttons > div.profile-cover-position-buttons {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* When JS toggles them on via inline style (.show() -> display:block),
   the earlier section 28 rule (display:none !important) would still win.
   Re-assert visibility when the inline display style is present. */
body .profile-cover-buttons > div.profile-cover-position-buttons[style*="display: block"],
body .profile-cover-buttons > div.profile-cover-position-buttons[style*="display:block"],
body .profile-cover-buttons > div.profile-cover-position-buttons[style*="display: inline"],
body .profile-cover-buttons > div.profile-cover-position-buttons[style*="display:inline"] {
  display: inline-flex !important;
}
body .profile-cover-buttons > div.profile-cover-position[style*="display: block"],
body .profile-cover-buttons > div.profile-cover-position[style*="display:block"],
body .profile-cover-buttons > div.profile-cover-position[style*="display: inline"],
body .profile-cover-buttons > div.profile-cover-position[style*="display:inline"] {
  display: inline-flex !important;
}

/* Reposition loader pill */
body .profile-cover-position-loader {
  background: rgba(15,23,42,.75) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 8px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  -webkit-backdrop-filter: blur(8px) saturate(160%);
          backdrop-filter: blur(8px) saturate(160%);
  z-index: 5 !important;
}

/* =========================================================
   30) VIDEO PLAYER — Instagram-style loading + natural aspect
   - No forced 16:9 ratio: container fits the video exactly
     (portrait stays portrait, no side bars; landscape stays landscape)
   - Subtle skeleton + spinner while metadata/poster load
   - Pure CSS, no markup or JS changes
   ========================================================= */
.post .plyr,
.post .plyr--video {
  --plyr-video-background: transparent;
  position: relative;
  border-radius: 14px !important;
  overflow: hidden !important;
  /* portrait video kapağı: ekranı domine etmesin */
  max-height: 85vh;
  background: #000 !important;
  aspect-ratio: auto !important;
  height: auto !important;
}

/* Plyr'ın forced-ratio padding hack'ini iptal et — kutu videoya tam otursun */
.post .plyr__video-wrapper,
.post .plyr--video .plyr__video-wrapper {
  padding-bottom: 0 !important;
  height: auto !important;
  aspect-ratio: auto !important;
  position: relative !important;
}

/* İçteki <video>: doğal en/boy oranıyla, tam genişlikte */
.post .plyr--video video,
.post .plyr__video-wrapper > video {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  max-height: 85vh !important;
  display: block !important;
  background: transparent !important;
  object-fit: contain;
}

/* Native <video> (henüz Plyr'a sarılmadıysa) için aynı davranış */
.post video.js_video-plyr {
  width: 100% !important;
  height: auto !important;
  max-height: 85vh !important;
  border-radius: 14px !important;
  background: #000 !important;
  object-fit: contain;
  display: block;
}

/* Poster yüklenmediği sürece nazik shimmer */
.post .plyr--video:not(:has(.plyr__poster[style*="url"])):not(.plyr--playing)::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(110deg,
      rgba(255,255,255,0)   30%,
      rgba(255,255,255,.05) 50%,
      rgba(255,255,255,0)   70%);
  background-size: 220% 100%;
  animation: bx-video-shimmer 2.2s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

/* Ortada zarif spinner (yalnızca gerçekten yüklenirken — playing değilken) */
.post .plyr--video:not(:has(.plyr__poster[style*="url"])):not(.plyr--playing)::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 38px; height: 38px;
  margin: -19px 0 0 -19px;
  border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.18);
  border-top-color: rgba(255,255,255,.85);
  animation: bx-video-spin .9s linear infinite;
  pointer-events: none;
  z-index: 2;
}

/* Plyr'ın kendi posteri/koster siyahını yumuşat */
.post .plyr--video .plyr__poster {
  background-color: transparent !important;
  background-size: cover !important;
  background-position: center !important;
}

@keyframes bx-video-shimmer {
  0%   { background-position:  220% 0; }
  100% { background-position: -220% 0; }
}
@keyframes bx-video-spin {
  to { transform: rotate(360deg); }
}

/* Mobilde köşeleri biraz küçült + max-height genişlet */
@media (max-width: 575.98px) {
  .post .plyr,
  .post .plyr--video,
  .post .plyr--video video,
  .post video.js_video-plyr { max-height: 90vh; border-radius: 12px !important; }
}

/* ============================================================
/* ============================================================
/* ============================================================
/* ============================================================
/* ============================================================
   FINAL OVERRIDE (2026-05-14) — publisher textarea = grows w/ content.
   ============================================================ */

/* 1) Parent satırı: textarea büyüdükçe satır da büyüsün.
      align-items: flex-start → kutu kırpılmasın. */
html body .publisher .publisher-message,
html body #publisher-box .publisher-message,
html body #publisher-wapper .publisher-message,
html body #publisher-wapper-modal .publisher-message {
  display: flex !important;
  align-items: flex-start !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* 2) Wrapper: dikdörtgen, içerikle birlikte büyür. */
html body .publisher .publisher-message > .colored-text-wrapper,
html body #publisher-box .publisher-message > .colored-text-wrapper,
html body #publisher-wapper .publisher-message > .colored-text-wrapper,
html body #publisher-wapper-modal .publisher-message > .colored-text-wrapper,
html body .sg-offcanvas-mainbar .publisher .publisher-message > .colored-text-wrapper {
  display: block !important;
  position: relative !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  background: var(--g2026-surface-2, #f6f7fb) !important;
  border: 1px solid var(--g2026-border, rgba(15,23,42,.08)) !important;
  border-radius: 6px !important;
  -webkit-border-radius: 6px !important;
  padding: 12px 44px 12px 14px !important;
  min-height: 60px !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  text-align: left !important;
}

/* 3) Colored mod (full-card colored post) hariç tut. */
html body .publisher .publisher-message.colored > .colored-text-wrapper {
  display: flex !important;
  height: 240px !important;
  text-align: center !important;
}

/* 4) Textarea: height inline'a (js_autosize) bırak; sadece görsel. */
html body .publisher .publisher-message > .colored-text-wrapper > textarea,
html body .publisher .publisher-message textarea.js_publisher-scraper,
html body .publisher .publisher-message textarea.js_autosize {
  display: block !important;
  box-sizing: border-box !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  resize: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  overflow-y: hidden !important;
  min-height: 22px !important;
  max-height: none !important;
  /* height: ASLA override etme — js_autosize inline yazsın */
}

/* 5) Avatar üstte hizalı kalsın (büyük yazıda kaymasın). */
html body .publisher .publisher-message > img.publisher-avatar,
html body .publisher .publisher-message .publisher-avatar {
  align-self: flex-start !important;
  margin-top: 4px !important;
}

/* 6) Emoji butonu sağ-üstte sabitlensin. */
html body .publisher .publisher-message .publisher-emojis {
  top: 14px !important;
  transform: none !important;
}

/* ============================================================

/* ============================================================

/* ============================================================

/* ============================================================
   2026-05-14 — Header dropdown widgets (notifications, messages, friends)
   STRATEJİ: dropdown-menu'nün konumuna karışmıyoruz; sadece BODY'ye
   bir max-height verip iç scroll yaratıyoruz. Footer "Tümünü Gör"
   böylece HER ZAMAN body'nin altında, görünür kalıyor.
   ============================================================ */

/* Body: viewport'a göre maks yükseklik + iç scroll */
html body .main-header .dropdown-widget .dropdown-widget-body,
html body .navbar .dropdown-widget .dropdown-widget-body,
html body .header .dropdown-widget .dropdown-widget-body {
  max-height: 60vh !important;
  max-height: 60dvh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}

/* Footer her zaman görünür — body'nin altında otururken alttaki bar ile
   çakışmaması için body'nin max-height'i 60vh ile sınırlı. */
html body .main-header .dropdown-widget .dropdown-widget-footer,
html body .navbar .dropdown-widget .dropdown-widget-footer {
  display: block !important;
  background: var(--card-bg, #fff) !important;
  border-top: 1px solid rgba(15,23,42,.08) !important;
}
body.night-mode .main-header .dropdown-widget .dropdown-widget-footer,
body.night-mode .navbar .dropdown-widget .dropdown-widget-footer {
  background: var(--card-dark-bg, #1c1c1d) !important;
  border-top-color: var(--card-dark-divider, #333) !important;
}

/* Mobilde alt bar (~70px) için body daha kısa olsun ki "Tümünü Gör"
   üst-bar (56px) + body + footer (~44px) toplamı viewport'a sığsın. */
@media (max-width: 767px) {
  html body .main-header .dropdown-widget .dropdown-widget-body,
  html body .navbar .dropdown-widget .dropdown-widget-body {
    max-height: calc(100vh - 56px - 70px - 44px - 60px) !important;
    max-height: calc(100dvh - 56px - 70px - 44px - 60px) !important;
    min-height: 180px !important;
  }
  /* Dropdown'ı viewport'a sığdır: alt bar ile çakışmasın */
  html body .main-header .dropdown-menu.dropdown-widget.show,
  html body .navbar .dropdown-menu.dropdown-widget.show {
    max-height: calc(100vh - 56px - 70px) !important;
    max-height: calc(100dvh - 56px - 70px) !important;
    overflow: hidden !important;
  }
}

/* ============================================================
   2026-05-14 — /messages/new (fresh) & conversation gap fixes
   ============================================================ */
@media (max-width: 767px) {
  /* (1) "Yeni Mesaj" başlığı geri butonu ile çakışmasın. */
  html body .panel-messages.fresh > .card-header.with-icon {
    position: relative !important;
    padding: 16px 16px 16px 48px !important;
    text-align: left !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    min-height: 56px !important;
    display: flex !important;
    align-items: center !important;
  }
  html body .panel-messages.fresh > .card-header.with-icon .ig-back-btn {
    position: absolute !important;
    left: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  /* (2) Konuşma listesi: slimScroll'un sabit 420px yüksekliğini ez.
     chat-conversations viewport'ta kalan tüm boşluğu kullansın,
     son mesaj ile "Yazı yaz" inputu arasındaki büyük boşluk gitsin. */
  html body .panel-messages .chat-conversations,
  html body .panel-messages .chat-conversations.js_scroller {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
  }
  /* slimScroll wrapper'ı da serbest bırak (eklenmişse). */
  html body .panel-messages .chat-conversations > div[style*="overflow"],
  html body .panel-messages .chat-conversations .slimScrollDiv {
    height: auto !important;
    max-height: none !important;
  }
}

/* ============================================================
   2026-05-14 — YouTube player kutusu: tıklama sonrası iframe garantili dolsun.
   ============================================================ */
html body .youtube-player {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  padding-top: 56.25% !important; /* 16:9 */
  height: 0 !important;
  overflow: hidden !important;
  background: #000 !important;
  border-radius: 16px !important;
}
html body .youtube-player > iframe,
html body .youtube-player > img,
html body .youtube-player > .play {
  position: absolute !important;
}
html body .youtube-player > iframe {
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  background: #000 !important;
  display: block !important;
}

/* Elite member comment — purple frame & crown visibility (overrides 14.3) */
.post-comments .comment-inner.comment-inner--elite{border:1.5px solid #6a3df0 !important;background:linear-gradient(180deg,rgba(106,61,240,.08) 0%,rgba(106,61,240,.03) 100%) !important;box-shadow:0 0 0 1px rgba(106,61,240,.15),0 2px 8px -4px rgba(106,61,240,.35) !important}
body.night-mode .post-comments .comment-inner.comment-inner--elite,
[data-bs-theme="dark"] .post-comments .comment-inner.comment-inner--elite{border-color:#8a6bff !important;background:linear-gradient(180deg,rgba(138,107,255,.16) 0%,rgba(138,107,255,.05) 100%) !important;box-shadow:0 0 0 1px rgba(138,107,255,.22),0 2px 8px -4px rgba(138,107,255,.4) !important}
.post-comments .comment-inner--elite .comment-author a{color:#6a3df0 !important}
body.night-mode .post-comments .comment-inner--elite .comment-author a,
[data-bs-theme="dark"] .post-comments .comment-inner--elite .comment-author a{color:#b39bff !important}

/* ===== Fix: .input-money currency symbol (TRY/USD/EUR) overlapping input
   in funding/donation/ads modal — global so it works on every page. ===== */
html body .input-money {
  position: relative !important;
  display: block;
}
html body .input-money > span {
  position: absolute !important;
  top: 50% !important;
  left: 16px !important;
  right: auto !important;
  transform: translateY(-50%) !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  text-align: left !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: rgba(60,60,67,0.55) !important;
  pointer-events: none;
  letter-spacing: -0.01em;
  line-height: 1;
  z-index: 3;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
html body .input-money.right > span {
  left: auto !important;
  right: 16px !important;
  text-align: right !important;
}
html body .input-money > input,
html body .input-money input.form-control {
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.01em !important;
  font-family: inherit !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 12px 16px 12px 64px !important;
  border-radius: 12px !important;
  width: 100% !important;
  display: block !important;
}
html body .input-money.right > input,
html body .input-money.right input.form-control {
  padding-left: 16px !important;
  padding-right: 64px !important;
}
html body .input-money input.form-control::placeholder {
  color: rgba(60,60,67,0.40) !important;
  font-weight: 500;
}
body.night-mode .input-money > span,
[data-bs-theme="dark"] .input-money > span {
  color: rgba(235,235,245,0.55) !important;
}

/* ===== Fix: Reply comment bubble collapsing to ultra-narrow width =====
   Bug: When a reply is rendered, the .comment-inner-wrapper inherits
   display:flex from style.min.css, the inline-block .comment-inner
   becomes a flex item that shrinks, combined with word-break:break-word
   the bubble collapsed to ~1 char wide.
   Fix: Force block layout on the wrapper and stable sizing on the inner
   bubble so text wraps naturally on word boundaries.
*/
html body .post-comments .comment-inner-wrapper,
html body .post-comments .comment.reply .comment-inner-wrapper {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin-bottom: 4px !important;
}
html body .post-comments .comment-inner,
html body .post-comments .comment.reply .comment-inner {
  display: inline-block !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  /* allow normal word wrapping, only break very long unbreakable strings */
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
  vertical-align: top;
}
html body .post-comments .comment.reply {
  /* Keep reply indent reasonable on small screens */
  margin-left: 36px !important;
}
@media (max-width: 480px) {
  html body .post-comments .comment.reply {
    margin-left: 24px !important;
  }
}
/* Ensure the comment-data column actually fills available width on reply */
html body .post-comments .comment.reply .comment-data {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  width: 100% !important;
}
/* Avatar size consistency on reply (smaller, stable) */
html body .post-comments .comment.reply .comment-avatar {
  flex: 0 0 28px !important;
  width: 28px !important;
  height: 28px !important;
}
html body .post-comments .comment.reply .comment-avatar-picture {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  padding-top: 0 !important;
}
/* Comment text inside reply: normal wrapping */
html body .post-comments .comment-text,
html body .post-comments .comment.reply .comment-text {
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  white-space: pre-wrap !important;
  text-align: start !important;
}

/* ===== Fix: Excessive right-shift of replies =====
   style.min.css ships ".comment-data{margin-left:56px}" — this stacks on
   top of the modern flex layout AND on each nested reply, causing the
   reply bubble to be pushed far to the right. Force margin-left:0 on
   every .comment-data inside .post-comments and use a small, single
   indent on replies. */
html body .post-comments .comment-data,
html body .post-comments .comment-edit,
html body .post-comments .comment.reply .comment-data {
  margin-left: 0 !important;
}
html body .post-comments .comment.reply {
  margin-left: 28px !important;
}
@media (max-width: 480px) {
  html body .post-comments .comment.reply {
    margin-left: 16px !important;
  }
}
/* Reply avatar — keep small but clearly visible (override 100% padding-top) */
html body .post-comments .comment.reply .comment-avatar {
  flex: 0 0 32px !important;
  width: 32px !important;
  height: 32px !important;
  margin: 0 !important;
}
html body .post-comments .comment.reply .comment-avatar-picture {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding-top: 0 !important;
  border-radius: 50% !important;
  background-color: #eee;
}

/* --- Post media funding/blog icon: ensure it sits ABOVE the cover image --- */
.post .post-media-image,
.post-media .post-media-image {
  position: relative !important;
  overflow: visible !important;
}
.post .post-media-image .image,
.post-media .post-media-image .image,
.post .post-media-image img,
.post-media .post-media-image img {
  position: relative !important;
  z-index: 1 !important;
}
.post .post-media-image .icon,
.post-media .post-media-image .icon {
  z-index: 5 !important;
  background: #fff !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18) !important;
  pointer-events: none !important;
}
body.night-mode .post .post-media-image .icon,
body.night-mode .post-media .post-media-image .icon {
  background: var(--card-dark-input, #1f2937) !important;
}

/* ============================================================
   Birlix — Signup consent checkbox (Koşullar & Gizlilik)
   Make the privacy/newsletter checkbox visually prominent so
   users notice they need to tick it before "Kayıt Ol".
   ============================================================ */
#privacy_agree.form-check-input,
#newsletter_agree.form-check-input {
  width: 22px !important;
  height: 22px !important;
  margin-top: 2px !important;
  margin-right: 10px !important;
  border: 2px solid #6366f1 !important;
  border-radius: 6px !important;
  background-color: #fff !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12) !important;
  cursor: pointer !important;
  transition: all .15s ease-in-out;
  flex-shrink: 0;
}
#privacy_agree.form-check-input:hover,
#newsletter_agree.form-check-input:hover {
  border-color: #4f46e5 !important;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.22) !important;
}
#privacy_agree.form-check-input:focus,
#newsletter_agree.form-check-input:focus {
  outline: none !important;
  border-color: #4338ca !important;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.35) !important;
}
#privacy_agree.form-check-input:checked,
#newsletter_agree.form-check-input:checked {
  background-color: #6366f1 !important;
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.22) !important;
}
.form-check:has(#privacy_agree),
.form-check:has(#newsletter_agree) {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 10px 12px;
  background: rgba(99, 102, 241, 0.05);
  border: 1px dashed rgba(99, 102, 241, 0.35);
  border-radius: 10px;
  padding-left: 38px;
}
.form-check:has(#privacy_agree) .form-check-label,
.form-check:has(#newsletter_agree) .form-check-label {
  font-weight: 500;
  color: #334155;
  line-height: 1.45;
}
body.night-mode .form-check:has(#privacy_agree),
body.night-mode .form-check:has(#newsletter_agree) {
  background: rgba(99, 102, 241, 0.10);
  border-color: rgba(129, 140, 248, 0.45);
}
body.night-mode .form-check:has(#privacy_agree) .form-check-label,
body.night-mode .form-check:has(#newsletter_agree) .form-check-label {
  color: #e2e8f0;
}

/* ============================================================
   Birlix — Profile cover/avatar camera buttons: mobile tap-fix
   The cover/avatar camera icons are tiny on mobile (~28-36px)
   and many users have to tap repeatedly to open the upload menu.
   Enlarge touch targets to >=44px (Apple HIG / Material spec),
   ensure no parent eats the touch, and disable the 300ms tap
   delay via touch-action: manipulation.
   ============================================================ */
.profile-cover-buttons > div.profile-cover-change,
.profile-cover-buttons > div.profile-cover-position,
.profile-cover-buttons > div.profile-cover-delete,
.profile-avatar-change,
.profile-avatar-crop,
.profile-avatar-delete {
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: rgba(99,102,241,.25) !important;
  cursor: pointer !important;
}
/* The actual click target is the <i class="fa fa-camera"> that has
   data-bs-toggle="dropdown". Make sure its hit area fills parent and
   that no overlay sits above it. */
.profile-cover-change > i.fa-camera,
.profile-avatar-change > i.fa-camera {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  z-index: 5 !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: rgba(99,102,241,.25) !important;
}

/* Mobile-first: enforce a generous 46x46 hit area regardless of icon size. */
@media (max-width: 991.98px) {
  .profile-cover-buttons > div.profile-cover-change {
    width: 46px !important;
    height: 46px !important;
    font-size: 18px !important;
    background: rgba(0, 0, 0, .55) !important;
  }
  .profile-cover-buttons > div.profile-cover-position,
  .profile-cover-buttons > div.profile-cover-delete {
    width: 44px !important;
    height: 44px !important;
    font-size: 16px !important;
  }
  .profile-avatar-change {
    width: 42px !important;
    height: 42px !important;
    right: 4px !important;
    bottom: 4px !important;
    font-size: 16px !important;
    background: rgba(99, 102, 241, .95) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .35), 0 0 0 2px #fff !important;
  }
  .profile-avatar-change > i.fa-camera {
    font-size: 16px !important;
  }
  /* Make sure the avatar wrapper doesn't clip the larger button */
  .profile-avatar-wrapper { overflow: visible !important; }
  /* The cover wrapper sometimes has pointer-events trapping image lightbox */
  .profile-cover-wrapper .profile-cover-buttons { z-index: 10 !important; }
}

/* Active feedback for fingers (no hover on touch) */
.profile-cover-buttons > div.profile-cover-change:active,
.profile-avatar-change:active {
  transform: scale(.92) !important;
  filter: brightness(1.15) !important;
}